/*
Theme Name: napZ
Author: Teruhisa Osawa
Version: 1.0
*/


*,*::before,*::after{box-sizing:border-box}ul[class],ol[class]{padding:0}body,h1,h2,h3,h4,p,ul[class],ol[class],figure,blockquote,dl,dd{margin:0}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}ul[class],ol[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img{max-width:100%;display:block}article>*+*{margin-top:1em}input,button,textarea,select{font:inherit}img:not([alt]){filter:blur(0)}


*{
box-sizing:border-box;
}
html, body {
height:100%;
font-family: 'Noto Serif JP', serif;
font-feature-settings : "palt";
font-size:16px;
color:#333333;
width: 100%;
height: auto;
position: relative;
-webkit-text-size-adjust: 100%;
}
body{
transition:1s;
}

a{
text-decoration:none;
opacity:1;
line-height:100%;
color:#333333;
}


/*
a,a:hover {
-webkit-transition:0.7s;
-moz-transition:0.7s;
-o-transition:0.7s;
transition:0.7s;
}
a img:hover {
-moz-opacity:0.5;
opacity:0.5;
}
*/
a:hover{
cursor:pointer;
}
p,dt,dd,td,th,div{
line-height:2;
}
img{
vertical-align:bottom;
}

a.tel,
a.tel img{
opacity:1;
cursor:default;
}

img{
max-width:100%;
height:auto;
}

/* reset */

ul.rst,
.rst ul{
padding-inline-start: 0;
margin-block-start: 0;
margin-block-end: 0;
}
ul.rst li,
.rst ul li{
list-style:none;
}




/*====================================================
LAYOUT
====================================================*/



.w1080{
width:1080px;
margin:0 auto;
}
.w720{
width:720px;
margin:0 auto;
}
.w480{
width:480px;
margin:0 auto;
}


.inside{
width: 96%;
max-width: 1180px;
margin: 0 auto;
}
/*====================================================
HEADER
====================================================*/
#header{
display:none;
height:80px;
background:rgba(255,255,255,0.9);
z-index:10;
}

#header #hd_logo{
position:absolute;
width:10%;
margin:0 auto;
left:0;
right:0;
top:0;
bottom:0;
text-align:center;
}
#header #hd_logo img{
width:60px;
height:auto;
margin:0 auto;
padding:10px 0;
}
#header #hd_menber{
height:60px;
width:140px;
position: absolute;
top:0;
right:0;
text-align:center;
}
#header #hd_menber a{
color:#fff;
background:#EDAD94;
display:block;
line-height:60px;
font-size:16px;
}
#header #nav1{
width:45%;
position:absolute;
height:80px;
left:0;
top:0;
}
#header #nav2{
width:45%;
position:absolute;
height:80px;
right:0;
top:0;
}
#header #nav2 ul li,
#header #nav1 ul li{
width:33.333%;
float:left;
text-align:center;
}
/*
#header #nav2 ul li{
width:25%;
float:left;
text-align:center;
}
*/
#header #nav1 ul li a,
#header #nav2 ul li a{
line-height:80px;
display:block;
}
#hdttl{
position:absolute;
bottom:-25px;
height:25px;
width:100%;
background:#8d9db5;
color:#fff;
text-align:center;
line-height:25px;
font-size:12px;
transition:1s;
}
#loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(https://office-prime.com/v1/common/img/pre11.gif) center no-repeat #fff;
}


#hdttl.zero{background:#a7a6a5;}
#classpage.one h1,#hdttl.one,.pricebox .one th{background:#d69ca7;}
#classpage.two h1,#hdttl.two,.pricebox .two th{background:#c0afce;}
#classpage.three h1,#hdttl.three,.pricebox .three th{background:#ababd8;}
#classpage.four h1,#hdttl.four,.pricebox .four th{background:#a0c3dc;}
#classpage.five h1,#hdttl.five,.pricebox .five th{background:#97ccbb;}
#classpage.six h1,#hdttl.six,.pricebox .six th{background:#bbb788;}
#classpage.seven h1,#hdttl.seven,.pricebox .seven th{background:#bb9d88;}
#classpage.eight h1,#hdttl.eight,.pricebox .eight th{background:#bb8888;}
#hdttl.voice{background:#999999;}
#hdttl.flow{background:#75a7c3;}

.pricebox .one{border: 1px solid #d69ca7;}
.pricebox .two{border: 1px solid #c0afce;}
.pricebox .three{border: 1px solid #ababd8;}
.pricebox .four{border: 1px solid #a0c3dc;}
.pricebox .five{border: 1px solid #97ccbb;}
.pricebox .six{border: 1px solid #bbb788;}
.pricebox .seven{border: 1px solid #bb9d88;}
.pricebox .eight{border: 1px solid #bb8888;}

#classpage h1{
padding:3rem 0 2rem 0;
font-size:28px;
line-height:1.5;
text-align:center;
}
#singlepage h1{
color:#fff;
padding:3rem 0;
background:#8d9db5;
}

.wpcf7-form textarea,
.wpcf7-form input{
border:1px solid #999;
padding:0.5rem;
width:100%;
}
.wpcf7-form textarea{
height:240px;
}
.wpcf7-form label{
display:block;
margin-bottom:2rem;
}
.wpcf7-submit{
display:block;
border:none;
padding:1.5rem 0.5rem;
background:#333;
color:#fff;
}
.wpcf7-submit:hover{
background:#000;
cursor:pointer;
}

/*====================================================
SPNAVI
====================================================*/

#spnav{
display:none;
position:relative;
height:60px;
width:100%;
}
#spnav .mn{
color:#fff;
font-size:24px;
position:absolute;
left:2rem;
top:0.5rem;
}
#sp-btn{
display: inline-block;
position: relative;
width: 46px;
height: 46px;
background:none;
top:15px;
margin-right:1.5rem;
float:right;
}
#sp-btn:hover{
opacity:1;
}
#sp-btn-icon{
display: block;
position: absolute;
top: 50%;
left: 0;
width: 46px;
height: 1px;
background: #999;
transition: .2s;
}
#sp-btn-icon:before, #sp-btn-icon:after{
display: block;
content: "";
position: absolute;
top: 50%;
left: 0;
width: 46px;
height: 1px;
background: #999;
transition: .3s;
}
#sp-btn-icon:before{
margin-top: -14px;
}
#sp-btn-icon:after{
margin-top: 12px;
}
#sp-btn .close{
background: transparent;
}
#sp-btn .close:before, #sp-btn .close:after{
margin-top: 0;
}
#sp-btn .close:before{
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
#sp-btn .close:after{
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}

/*====================================================
HOME
====================================================*/
#topslide{
position:relative;
}
#topslide .logo_slide{
width:70px;
position:absolute;
top:15%;
left:5%;
display:none;
}
#topslide .cc_slide{
position:absolute;
top:25%;
left:5%;
color:#fff;
font-size:36px;
line-height:1.5;
}
#topslide .cc_slide .small{
display:block;
font-size:21px;
padding-left:0.5rem;
}

.catchcopy p{
font-size:48px;
}


/*====================================================
SLIDE
====================================================*/


#vegasSliderInner p{
color:#fff;
font-weight:200;
position:absolute;
right:20%;
top:20%;
}
#vegasSliderInner .num{
position:absolute;
display:block;
left:0;
right:0;
text-align:center;
bottom:110px;
font-size:10px;
color:#fff;
margin: 0 auto;
}
.cc1{
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
text-align: justify;
display:none;
}

.scrolldown a {
display: inline-block;
position: absolute;
right: 40px;
width:200px;
margin:0 auto;
text-align:center;
bottom: 0;
left:0;
right:0;
z-index: 2;
padding: 10px 10px 60px;
overflow: hidden;
color: #fff;
font-size: 14px;
line-height: 1;
letter-spacing: .2em;
text-decoration: none;
}


/*====================================================
PAGE
====================================================*/

.section#about{
padding:12rem 0 6rem 0;
}
.section.about h1{
font-weight:normal;
}
.section.about p{
letter-spacing:2px;
line-height:2;
}
#slide{
position:relative;
top:-60px;
z-index:2;
width:100%;
}
.sec0{
margin:3rem 0;
padding:12rem 0;
}
.sec0b{
margin:2rem 0;
padding:2rem 0;
}
.classbox .img{
width:65%;
float:left;
height:480px;
overflow:hidden;
position:relative;
transition: 0.5s;
}
#classpage .classbox .img{
height:auto;
}
.classbox .ov{
width:100%;
height:480px;
background:#fff;
position:absolute;
z-index:1;
}
.classbox .img img{
width:702px;
max-width:702px;
z-index:2;
}

.classbox .img:hover{
opacity:0.7;
cursor:pointer;
}

.sec0b .classbox .img{
width:100%;
}
.sec0b .classbox .img img{
width:100%;
max-width:100%;
}

.classbox .txt{
width:32%;
float:right;
padding:0 0 0 0;
writing-mode: vertical-rl;
text-align: justify;
}
.classbox h1{
margin-bottom:1rem;
font-size:32px;
opacity:0;
}
.classbox .txt p{
font-size:16px;
padding:3rem 2rem 0 0;
opacity:0;
}


#blog,
#flow,
#voice{
padding:6rem 0;
}
#voice .col2 li{
width:47.5%;
margin:0 0 4rem 5%;
float:left;
opacity:0;
padding:2rem;
height:240px;
background:#fff8d9;
position:relative;
font-family: "M PLUS Rounded 1c";
box-shadow: 1px 1px 3px 0 rgb(0 0 0 / 15%);
}
#voice .col2 li:before{
content:"";
width:32px;
height:46px;
background:url(https://office-prime.com/v1/common/img/pushpin.png) no-repeat;
background-size:contain;
position:absolute;
top:-10px;
left:0;
right:0;
margin:0 auto;
}
#voice .col2 li:nth-child(2n+1){
clear:left;
float:left;
margin-left:0;
}
#voice .col2 li h2{
font-size:18px;
font-weight:normal;
}

#voice .col2 li .img{
position:absolute;
width:48px;
right:1rem;
bottom:1rem;
opacity:0.5;
}

.prices,
#blog h1,
#flow h1,
#voice h1{
opacity:0;
}



.tmtimeline {
margin: 30px 0 0 0;
padding: 0;
list-style: none;
position: relative;
}
.tmtimeline:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 10px;
background: #afdcf8;
left: 20%;
margin-left: -10px;
}
.tmtimeline > li{
opacity:0;
position: relative;
}
.tmtimeline > li .tmtime {
display: block;
width: 25%;
padding-right: 100px;
position: absolute;
font-size:24px;
color:#000;
line-height:1;
text-align:right;
}
.tmtimeline > li .tmtime span {
display: block;
text-align: right;
}
.tmtimeline > li .tmtime span:first-child {
font-size: 0.9em;
color: #bdd0db;
}
.tmtimeline > li .tmtime span:last-child {
font-size: 2.9em;
color: #3594cb;
}
.tmtimeline > li:nth-child(odd) .tmtime span:last-child {
color: #6cbfee;
}
.tmtimeline > li .cbp_tmlabel {
margin: 0 0 3rem 25%;
background: #3594cb;
color: #fff;
font-weight: 300;
line-height: 1.4;
position: relative;
border-radius: 5px;
transition: 0.5s;
}
.tmtimeline > li:nth-child(odd) .cbp_tmlabel {
background: #6cbfee;
}
.tmtimeline > li .cbp_tmlabel h2 { 
margin-top: 0px;
padding: 1rem;
}
.tmtimeline > li .cbp_tmlabel p{ 
padding:1rem;
background:#fff;
color:#333;
border:1px solid #ddd;
border-top:0;
}
.tmtimeline > li .cbp_tmlabel:after {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-right-color: #3594cb;
border-width: 10px;
top: 10px;
}
.tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: #6cbfee;
}
.tmtimeline > li .cbp_tmicon {
width: 20px;
height: 20px;
font-family: 'ecoico';
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-size: 1.4em;
line-height: 40px;
-webkit-font-smoothing: antialiased;
position: absolute;
color: #fff;
background: #46a4da;
border-radius: 50%;
box-shadow: 0 0 0 8px #afdcf8;
text-align: center;
left: 20%;
top: 0;
margin: 0 0 0 -15px;
transition:0.5s;
}
.tmtimeline > li:hover .cbp_tmicon{
width: 30px;
height: 30px;
margin: 0 0 0 -20px;
}

.tmtimeline > li:hover .cbp_tmlabel{
margin-top:-1rem;
margin-bottom:4rem;
}

/*
.btn a{
width:360px;
margin:0 auto;
display:block;
padding:1.5rem 0.5rem;
background:#bbb38c;
color:#fff;
}
*/

.swpm-login-form-submit,
.swpm-registration-submit,
.btn a{
width: 320px;
height: 80px;
display:block;
font-size:24px;
line-height:80px;
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 500;
color: #fff;
background-color:#2EE59D;
border: none;
border-radius: 45px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease 0s;
cursor: pointer;
outline: none;
margin:0 auto;
padding:0 2rem;
}
.swpm-login-form-submit:hover,
.swpm-registration-submit:hover,
.btn a:hover {
background-color:#0c9861;
color:#fff;
box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
color: #fff;
transform: translateY(-7px);
}

.blogbox ul li .img{
margin-bottom:0.5rem;
}
.blogbox ul li{
float:left;
width:32%;
margin-left:2%;
opacity:0;
}
.blogbox ul li .date{
display:block;
text-align:right;
}
.blogbox ul li:first-child{
margin-left:0;
}

.slidectr li{
position:relative;
overflow:hidden;
}
.slidectr li .line{
height: 2px;
background: white;
position: absolute;
top:2px;
left: 0;
}


.video-wrap {
position:fixed;
width:100%;
height:100%;
overflow:hidden;
z-index:1000;
background:#fff;
}

.video-wrap #mainvideo{
width: 100vw;
height: 100vh;
}
.video-wrap video{
outline: none;
border: none;
filter: drop-shadow(0px 0px #000);
}

.pricebox table th,
.pricebox table td{
padding:1rem;
font-weight:bold;
color:#000;
width:50%;
font-size:120%;
text-align:center;
}
.pricebox table{
width:100%;
background:#fff;
margin-bottom:1rem;
}
.pricebox table th{
background:#333;
color:#fff;
}

.logobox{
padding:1rem 0;
}
.logobox img{
margin: 0 auto;
width: 80px;
}

.archive .logobox,
.single .logobox{
background:#8d9db5;
}
.class-text li,
.class-text p{
font-size:115%;
}
#ftnavi{
}
#ftnavi .prevpost{
float:left;
}
#ftnavi .nextpost{
float:right;
}

.single .date{
margin-bottom:1rem;
padding:1rem;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
text-align:center;
}

/*====================================================
FOOTER
====================================================*/
#ft_svg{
display:none;
margin-bottom:2rem;
}
#ft_svg.active{
display:block;
}

#ftmn ul li{
width:47%;
float:left;
margin:0 0 2rem 6%;
}
#ftmn ul li:nth-child(2n+1){
margin-left:0;
}
#ftmn ul li a{
display:block;
padding:1rem 0.5rem;
text-align:center;
border:1px solid #000;
}


#footer{
padding-top: 80px;
clear: both;
background-color: #fff;
position: relative;
}

#footer .ftb{
padding:0.5rem;
background:#333;
position:relative;
}

#footer .sns{
float:left;
}
#footer .sns li{
float:left;
margin-left:0.5rem;
}
#footer .sns li img{
width:24px;
height:auto;
}
#footer .sns li a{
color:#fff;
}
#footer .copyright{
float:right;
color:#fff;
}
#footer .ftlink,
#footer .ftlink a{
color:#fff;
}
#footer .ftb .ftlink{
position:absolute;
left:0;
right:0;
margin:0 auto;
}
#footer .copyright a{
color:#fff;
font-size:14px;
margin-right:1rem;
}

.swpm-registration-firstname-row,
.swpm-registration-lastname-row,
.swpm-profile-firstname-row,
.swpm-profile-lastname-row {
display:none;
}

#swpm-registration-form table{
width:100%;
margin-bottom:2rem;
}
#swpm-registration-form table th,
#swpm-registration-form table td{
padding:0.5rem 0;
}
#swpm-login-form  input[type="text"],
#swpm-login-form  input[type="password"],
#swpm-registration-form input[type="password"],
#swpm-registration-form input[type="text"]{
width:100%;
box-sizing:border-box;
padding:0.3rem;
border:1px solid #333;
}

#swpm-registration-form table .swpm-registration-membership-level-row td:last-child{
background:#eeeeee;
padding:0.5rem;
}
.swpm-registration-submit-section{
padding-bottom:2rem;
}
.swpm-login-submit,
.swpm-remember-me{
margin-bottom:1.5rem;
}

/*====================================================
BASE
====================================================*/
.ctr{text-align:center;}
.tgt{text-align:right;}
.tlt{text-align:left;}
.bold{font-weight:bold;}
.mb02{margin-bottom:0.2rem;}
.mb03{margin-bottom:0.3rem;}
.mb05{margin-bottom:0.5rem;}
.mt05{margin-top:0.5rem;}
.mb1{margin-bottom:1rem;}
.mb15{margin-bottom:1.5rem;}
.mb2{margin-bottom:2rem;}
.mb25{margin-bottom:2.5rem;}
.mb3{margin-bottom:3rem;}
.mb4{margin-bottom:4rem;}
.mb5{margin-bottom:5rem;}
.mb6{margin-bottom:6rem;}
.mb8{margin-bottom:8rem;}
.mb10{margin-bottom:10rem;}
.mb12{margin-bottom:12rem;}
.mt2{margin-top:2rem;}
.pt05{padding-top:0.5rem;}
.pb1{padding-bottom:1rem;}
.pt1{padding-top:1rem;}
.pt2{padding-top:2rem;}
.pt4{padding-top:4rem;}
.pt6{padding-top:6rem;}
.pt8{padding-top:8rem;}
.fff{color:#fff;}
.red{color:#e95464;}
.big{font-size:150%;}
.txtlt{text-align:left;}
.txtgt{text-align:right;}
.txtctr{text-align:center;}
.txt9{font-size:9px;}
.txt10{font-size:10px;}
.txt11{font-size:11px;}
.txt12{font-size:12px;}
.txt13{font-size:13px;}
.txt15{font-size:15px;}
.txt16{font-size:16px;}
.txt18{font-size:18px;}
.txt20{font-size:20px;}
.txt21{font-size:21px;}
.txt24{font-size:24px;}
.txt25{font-size:25px;}
.txt30{font-size:30px;}
.txt32{font-size:32px;}
.lh1{line-height:1;}
.lh13{line-height:1.3;}
.lh15{line-height:1.5;}
.lh18{line-height:1.8;}
.lh20{line-height:2.0;}
.lh24{line-height:2.4;}
.ls01{letter-spacing:-1px;}
.ls02{letter-spacing:-2px;}
.ls03{letter-spacing:-3px;}
.ls04{letter-spacing:-4px;}
.ls05{letter-spacing:-5px;}
.ls06{letter-spacing:-6px;}
.size-full,
.img100 img,
.img100{
width:100%;
height:auto;
}

strike .strike{
color:#231916;
}

.shadow{text-shadow: rgba(0,0,0,0.5) 2px 2px 5px;}

.ffs{ -moz-font-feature-settings: "palt";
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";}

.none,
.sp{display:none;}
.pc{display:block;}

.small{font-size:80%;}

.img100{
width:100%;
height:auto;
}

/*====================================================
AFTER
====================================================*/
.newsbox li a:after,
section:after,
.breadcrumb:after,
.w980:after,
.cl:after,
.clearfix:after,
#main:after,
#nav:after,
#footer:after,
#header:after{content:".";display:block;clear:both;height:0;visibility:hidden;font-size:0;}

/*====================================================
MEDIA QUERY
====================================================*/



@media screen and (max-width: 1480px) {

#header #nav ul li a{
padding:0 0.5rem;
}


}


@media screen and (max-width: 1340px) {
#header #nav{
display:none;
}
}

@media screen and (max-width: 1100px) {
.w1080{
width:100%;
}
.w1080.in{
width:90%;
}
.classbox .txt{
margin-right:3%;
}

#header .navsp{
display:none;
background:rgba(255,255,255,0.9);
position: relative;
top: 40px;
}
#header #nav2,
#header #nav1{
position:relative;
width:100%;
height:auto;
}
#header #nav2 ul li,
#header #nav1 ul li{
width:100%;
float:none;
}
#header #hd_logo{
left:0.5rem;
margin:0;
}
#spnav{
display:block;
}
#blog, #flow, #voice {
padding: 6rem 2rem;
}
#ftmn{
margin:0 2rem;
}
}

@media screen and (max-width: 980px) {
.lists .item:nth-child(4n+1),
.lists .item{
width:49%;
margin-left:2%;
}
.lists .item:nth-child(2n+1){
margin-left:0;
}
.tmtimeline > li .tmtime{
text-align:left;
padding-right:0;
}
}
@media screen and (max-width: 800px) {
.w720{
width:100%;
}
#voice .col2 li:nth-child(2n+1),
#voice .col2 li{
width:100%;
float:none;
margin:0 0 2rem 0;
padding-bottom:4rem;
height:auto;
}
.classbox .img{
width:50%;
}
.classbox .txt{
width:45%;
}
.classbox.active .ov{
position:absolute;
z-index:2;
}
.classbox .img img{
right:0;height:600px;
position: absolute;
width:auto;
left: -50%;
z-index:1;

max-width:none;
}
.classbox .img .pc{
display:none;
}
.classbox .img .sp{
display:block;
}
.sec0b .classbox .img{
width:90%;
margin:0 auto;
float:none;
}
.sec0b .classbox .img img{
position:static;
left:0;
height:600px;
}
.pricebox.w720,
#classpage .w720{
width:90%;
}

#classpage .sec0b .classbox .img{
width:100%;
}

}

@media screen and (max-width: 600px) {
.tmtimeline > li .tmtime{
font-size:18px;
}
.tmtimeline > li .cbp_tmlabel{
margin-left:30%;
}
.tmtimeline > li .cbp_tmicon,
.tmtimeline:before{
left:24%;
}
.classbox .txt p {
font-size: 16px;
padding: 3rem 1rem 0 0;
line-height: 1.5;
}
.classbox h1 {
margin-bottom: 1rem;
font-size: 24px;
line-height:1.5;
}
.blogbox ul li:first-child,
.blogbox ul li{
float:none;
width:100%;
margin:0 0 2rem 0;
}
.btn a{
width:90%;
}
#ftmn ul li:nth-child(2n+1),
#ftmn ul li{
width:100%;
float:none;
margin:0 0 1rem 0;
}
.cc_slide{
display:none;
}
#topslide .logo_slide {
top: 3%;
}
#vegasSliderInner p{
right:40%;
}
#header{
height:75px;
}
#header #nav1 ul li a,
#header #nav2 ul li a{
line-height:65px;
}
.catchcopy p{
font-size:32px;
}

#footer .ftb .ftlink{
position:static;
}
#footer .ftb .ftlink a{
display:block;
}
#footer .sns{
}
#footer .sns,
#footer .copyright{
float:none;
text-align:center;
}
#footer .sns ul{
text-align:center;
}
#footer .sns li{
display:inline-block;
float:none;
}

}



@media screen and (max-width: 420px) {
.catchcopy p{
font-size:28px;
}
}