/*
Theme Name: wonderful11.com
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}body{min-height:100vh;scroll-behavior:smooth;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 Sans JP', sans-serif;
font-feature-settings : "palt"
}
body{
font-size:18px;
color: #555555;
-webkit-text-size-adjust: 100%;
position: relative;
right: 0;
overflow-x: hidden;
background:#f4f4f4;
}

a{
text-decoration:underline;
opacity:1;
line-height:100%;
color:#e94b68;
text-decoration:none;
border-bottom:1px solid #e94b68;
}
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{
opacity:0.4;
cursor:pointer;
}
a.link img:hover,
a.link:hover{
opacity:1;
}
p,dt,dd,td,th,div{
line-height:1.8;
}
.page #main{
padding-top:2rem;
}
#main p{
margin-bottom:1rem;
}
#main p.nopdg{
margin-bottom:0;
}
.page #main p{
line-height:2;
margin-bottom:2rem;
}
img{
max-width:100%;
height:auto;
vertical-align:bottom;
}

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

.en{
font-family: 'Cinzel', serif;
}
.small{
font-size:80%;
}


body.page{
font-size:16px;
}

.page h2{
font-size:18px;
margin-bottom:0.5rem;
}

/*====================================================
LAYOUT
====================================================*/
#wrapper{
width:100%;
height:100%;
position:relative;
margin:0 auto;
}

.w1450{
width:1450px;
margin:0 auto;
}
.w1180{
width:1180px;
margin:0 auto;
}
.w980{
width:980px;
margin:0 auto;
}
.w720{
width:720px;
margin:0 auto;
}
.w600{
width:600px;
margin:0 auto;
}

/*====================================================
HEADER
====================================================*/
.page #header.active,
#header{
position:fixed;
right:0;
top:0;
width:100%;
z-index:101;
}
.page #header{
background:rgba(40,30,35,1);
}
.page #hdm{
padding:1rem 3rem 1rem 0;
}
#header.active{
background:rgba(40,30,35,0.5);
}
#hdr{
display:none;
}
#hdm{
padding:2rem 3rem 0 0;
float:right;
}
#hdm ul li{
float:left;
margin-left:3rem
}
#hdm ul li a{
color:#fff;
border:none;
}
#header.active #hdm{
padding:1rem 3rem 1rem 0;
}


.breadcrumb{
background:#f3f7f6;
padding:0.2rem 0;
}
.breadcrumb ul li{
display:inline-block;
line-height:1;
position:relative;
padding-right:1rem;
margin-right:1rem;
}
.breadcrumb ul li:after{
content:">";
position:absolute;
right:-5px;
top:-3px;
line-height:1;
color:#ccc;
}

.breadcrumb ul li:last-child:after{
content:"";
}
.breadcrumb ul li a{
font-size:12px;
line-height:1;
display:block;
color:#999;
}


#livecam{
position:fixed;
right:0;
top:75px;
width:120px;
}


/*====================================================
SPNAVI
====================================================*/
#hdr{
float:right;
}
#spnav{
display:block;
}
#sp-btn{
display: inline-block;
position: relative;
width: 45px;
height: 45px;
background:none;
top:0.5rem;
right:1rem;
border:none;
}
#sp-btn:hover{
opacity:1;
}
#sp-btn-icon{
display: block;
position: absolute;
top: 50%;
left: 0;
width: 45px;
height: 2px;
background: #ccc;
transition: .2s;
}
#sp-btn-icon:before, #sp-btn-icon:after{
display: block;
content: "";
position: absolute;
top: 50%;
left: 0;
width: 45px;
height: 2px;
background: #ccc;
transition: .3s;
}
#sp-btn-icon:before{
margin-top: -15px;
}
#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);
}



/*====================================================
MAIN
====================================================*/
#topslide{
width:100%;
height:780px;
position:relative;
}
.topslidetxt{
position:absolute;
top:25%;
left:6%;
}
.topslidetxt p{
color:#fff;
font-size:21px;
line-height:3;
}
.topslidetxt p .arw{
color:#fff;
font-size:16px;
background:url(https://wonderful11.com/v1/common/img/arw1.png) no-repeat right center;
background-size:20px 5px;
padding-right:30px;
border:none;
}
#topslide #hdlogo{
position:absolute;
right:2rem;
bottom:2rem;
width:240px;
}
.grandopen{
padding:1rem;
background:#88a5af;
text-align:center;
}
.grandopen img{
width:720px;
margin:0 auto;
}



.section{
padding:6rem 0;
}
#top1.section{
padding-top:10rem;
}
#top1 p{
margin-bottom:2rem;
line-height:2;
}
#top2 .img,
#top1 .txt{
width:50%;
float:left;
}
#top2 .txt,
#top1 .img{
width:50%;
float:right;
}
#top2 .txt{
padding-left:10rem;
}
#top2 .top1img1,
#top1 .top1img1{
float:left;
width:47.5%;
}
#top2 .top1img2,
#top1 .top1img2{
float:right;
width:47.5%;
margin-top:30%;
}
#top2 h1{
font-size:21px;
margin-bottom:2rem;
}

.arw2{
color:#555;
font-size:16px;
background:url(https://wonderful11.com/v1/common/img/arw2.png) no-repeat right center;
background-size:20px 5px;
padding-right:30px;
border:none;
}
.top2link{
padding-left:12rem;
}
#top3 h1{
font-size:21px;
text-align:center;
margin-bottom:2rem;
}

.tbl2,
.tbl1{
width:100%;
border-collapse:collapse;
border-left:1px solid #cccccc;
border-bottom:1px solid #cccccc;
}
.tbl2 th,
.tbl2 td,
.tbl1 th,
.tbl1 td{
font-weight:normal;
padding:1rem 0.3rem;
width:16.7777%;
font-size:16px;
text-align:center;
border-top:1px solid #cccccc;
border-right:1px solid #cccccc;
}
.tbl1 .thbg,
.tbl1 tbody th{
text-align:left;
padding:1rem;
background:#e0e0e0;
}

.tbl2 th{
background:#e0e0e0;
width:25%;
}
.tbl2 .mid{
width:50%;
text-align:left;
padding:1rem 2rem;
}
.tbl2 .last{
width:25%;
}

.tbl2 .price,
.tbl1 .price{
font-size:21px;
}

.box1{
padding:1.5rem 0;
background:#281e23;
}
.box1 p{
font-size:18px;
}
#top4 h1{
font-size:21px;
width:20%;
max-width:230px;
float:left;
}
#top4 .flow{
width:60%;
float:left;
}
#top4 .imgbox{
width:20%;
float:right;
}
.flow dt{
font-size:21px;
font-weight:bold;
margin-bottom:1rem;
}
.flow dd{
margin-bottom:3rem;
padding-bottom:4rem;
background:url(https://wonderful11.com/v1/common/img/arw3.png) no-repeat left bottom;
background-size:12px 22px;
}
.flow dd.nodd{
padding-bottom:0;
}
.flow a{
}
.flow dd:last-child{
background:none;
}
#top4 .imgbox .item{
margin-bottom:3rem;
}
#igbox{
background:#fff;
}

.aboutbox .txt{
width:47.5%;
float:left;
}
.aboutbox .img{
width:47.5%;
float:right;
}
.ab1{
width:100%;
margin-bottom:2rem;
}
.ab2{
width:47.5%;
float:left;
}
.ab3{
width:47.5%;
float:right;
}

.page h1{
text-align:center;
margin-bottom:5rem;
}

.pricebox{
margin-bottom:6rem;
}
.pricebox h2{
font-size:18px;
margin-bottom:1rem;
}
.gmap iframe{
width:100%;
height:600px;
}

.contactbox label{
display:block;
margin-bottom:2rem;
}
.contactbox label .txa,
.contactbox label .ipt1{
width:100%;
padding:0.5rem;
}
.btn_submit input{
width:300px;
background:#281e23;
color:#fff;
border:none;
padding:0.5rem 0;
border-radius:3px;
}
.btn_submit input:hover{
cursor:pointer;
opacity:0.7;
}

.qrcode{
width:148px;
height:148px;
display:block;
margin-bottom:1rem;
}

ul.ul2{
margin-left:1.5rem;
}
.ul2 li{
list-style:disc;
margin-bottom:1.5rem;
}

.btn_line a{
background:#3d990e;
color:#fff;
border-radius:5px;
padding:0.3rem 1rem;
text-decoration:none;
border:none;
}

.faq{
padding-top:5rem;
margin-top:-5rem;
padding-bottom:2rem;
margin-bottom:2rem;
border-bottom:1px dotted #999;
}
.faq .num{
font-size:120%;
color:#e94b68;
}
.faq .ttl{
margin-bottom:1rem;
}
.faq h2{
font-size:21px;
}
.faq .qa{
font-size:21px;
font-weight:bold;
color:#a98888;
}
.faq p .qa{
color:#e1bdac;
}
.faq .owl-carousel{
width:90%;
margin:0 auto;
}
.atfirst li{
margin-bottom:1rem;
}

.imgbox img{
display:block;
margin:0 auto;
}


.blog_main{
width:70%;
float:left;
}
.blog_side{
width:25%;
float:right;
}
.blog_main .img{
width:20%;
float:left;
}
.blog_main .txt{
width:75%;
float:right;
}

.wp-block-search__button{
width:60px !important;
font-size:14px !important;
}
.blog_side .widget{
margin-bottom:2rem;
}
.aboutus2 h2{
background:url(https://wonderful11.com/v1/common/img/footprint.png) no-repeat left 5px;
background-size:29px 25px;
padding-left:34px;
font-size:21px;
font-weight:bold;
margin-bottom:2rem;
color:#281e23;
}
.aboutus2 h3{
margin-bottom:1rem;
}
.aboutus2 h3 span{
border-bottom:1px solid #ddd;
}
.aboutus2 .in{
margin:0 0 4rem  2.2rem;
}

/*====================================================
FOOTER
====================================================*/
#footer{
padding:2rem 0;
background:#281e23;
color:#afaaaa;
}

.ftl{
width:25%;
float:left;
}
.ftm{
width:35%;
margin-left:5%;
float:left;
}
.ftr{
width:30%;
float:right;
}
.ftl p{
margin-bottom:2rem;
font-size:14px;
}
.ftm h2{
font-weight:normal;
margin-bottom:1.5rem;
}
.ftm a{
color:#afaaaa;
font-size:14px;
border:none;
}
.ftm li{
margin-bottom:1rem;
}
.ftm span{
padding-right:1.5rem;
}
.ftr iframe{
width:100%;
height:300px;
}
.ftnavi ul{
text-align:center;
margin-bottom:1rem;
}
.ftnavi ul li{
display:inline;
text-align:center;
}
.ftnavi ul li:first-child{
border:none;
}
.ftnavi ul li a{
margin:0 1rem;
color:#fff;
border:none;
}
.ftlogo{
width:240px;
margin-bottom:4rem;
}


#ftnavi{
padding-top:1rem;
border-top:1px solid #ddd;
}
#ftnavi .prevpost{
float:left;
background-size:14px 14px;
}
#ftnavi .nextpost{
float:right;
background-size:14px 14px;
}
.single-ft{
margin-top:2rem;
}
.single-ft p{
font-size:14px;
text-align:right;
}
.copyright{
margin-top:2rem;
font-size:14px;
}

.pager,
.pager ul{
text-align:center;
}
.pager ul li{
display:inline-block;
margin-left:0.3rem;
color:#ccc;
}
.pager ul li:first-child{
margin-left:0;
}
.pager ul li .current,
.pager ul li a{
padding:0.2rem 0.5rem;
display:block;
font-size:21px;
}
.pager ul li .current{
line-height:21px;
background:#4a8e7c;
color:#fff;
border:1px solid #4a8e7c;
}

.pager ul li a{
color:#4a8e7c;
border:1px solid #4a8e7c;
}

#sprsvp{
display:none;
}

.atfirst{
border:2px solid #e94b68;
padding:1rem;
width:90%;
margin-bottom:2rem;
}
.atfirst h2{
font-size:24px;
}

/*====================================================
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;}
.mb6{margin-bottom:6rem;}
.mb8{margin-bottom:8rem;}
.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:#cc0000;}
.big{font-size:150%;}
.med{font-size:120%;}
.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;}
.img100 img,
.img100{
width:100%;
height:auto;
}
.red,
.req{
color:#cc0000;
}
strike .strike{
color:#231916;
}
.yline{
color:#000;
background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #fffb80 0%) repeat scroll 0 0;
}
.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;}

.hd_navi .pc{display:inline-block;}

.rst{
margin-block-start:0;
margin-block-end:0;
}


.ytbox {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.ytbox iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}

.ytbtn{
display:flex;
justify-content:space-between;
margin-top:0.5rem;
}
.ytbtn button{
width:49%;
}
/*====================================================
AFTER
====================================================*/
section:after,
.breadcrumb:after,
.cl:after,
.clearfix:after,
#main:after,
#navigation: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) {
.w1450{
width:96%;
}
}

@media screen and (max-width: 1200px) {
.w1180{
width:100%;
}
.section .w1180{
width:90%;
}
#hdr{
display:block;
position:absolute;
top:0;
right:0;
z-index:101;
}
#hdm{
margin-top:0;
padding:75px 0 0 0;
float:none;
position: fixed;
top: 0;
right: -320px;
width: 320px;
height: 100%;
background:#281e23;
}
.open #hdm,
#header.active #hdm{
padding:75px 0 0 0;
}
#hdm ul{
overflow: auto;
overflow-x: hidden;
}

#hdm ul li{
float:none;
margin:0;
border-top:1px solid #665d62;
}
#mem #hdm li:last-child a,
#hdm li a{
padding:1rem 0.5rem;
display:block;
text-align:center;
}
#hdm li:last-child a{
padding:1rem 0.5rem;
border-radius:0;
}

.sptbl{
overflow: auto;
white-space: nowrap;
margin-bottom:4rem;
}
#top3 .tbl1{
width:1180px;
}
.tbl1.mb4{
margin-bottom:0.5rem;
}
.tbl1 tbody th{
position: sticky;
left: 0;
color: #fff;
background: #333;
&:before{
content: "";
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
border: 1px solid #ccc;
}
}
}

@media screen and (max-width: 1080px) {
.w980{
width:90%;
}
.aboutbox .txt,
.aboutbox .img,
#top2 .txt,
#top1 .img,
#top2 .img,
#top1 .txt{
width:100%;
float:none;
padding:0;
margin-bottom:4rem;
}
.top2link{
padding:4rem 0 0 0;
text-align:right;
}
#top4 h1{
float:none;
width:100%;
max-width:100%;
margin-bottom:3rem;
text-align:center;
}
#top4 .flow,
#top4 .imgbox{
width:100%;
float:none;
}
#top4 .imgbox .item{
float:left;
width:47.5%;
margin:0 0 2rem 5%;
}
#top4 .imgbox .item:nth-child(2n+1){
margin-left:0;
}
.ftr,
.ftm,
.ftl{
float:none;
width:100%;
margin:0 0 2rem 0;
}
#footer .w1180{
width:90%;
margin:0 auto;
}
.aboutbox img{
width:100%;
height:auto;
}
.pt4.link{
padding-top:2rem;
margin-bottom:2rem;
}
.link{
text-align:center;
}
.spbr{
display:block;
}

.atfirst{
width:100%;}
}

@media screen and (max-width: 780px) {
.w720{
width:100%;
}
.page .w720{
width:96%;
}
.box1{
padding:0;
}
.box1 p{
text-align:left;
padding:2rem;
}

.tbl2{
border-left:none;
}
.tbl2 th,
.tbl2 .last,
.tbl2 .mid{
display:block;
width:100%;
border-right:none;
}
.tbl2 .mid{
border-top:none;
}
.tbl2 .last{
border-top:none;
text-align:right;
padding-right:2rem;
}
.grandopen img{
width:90%:
}

#top4 .imgbox{
display:none;
}
.flow dd {
margin-bottom: 1rem;
padding-bottom: 2rem;
background: url(https://wonderful11.com/v1/common/img/arw3.png) no-repeat center bottom;
background-size: 8px 16px;
}
#sprsvp{
display:block;
position:fixed;
bottom:0;
width:100%;
z-index:1001;
}
#sprsvp a{
color:#fff;
padding:1rem 0.5rem;
background:#e94b68;
width:100%;

display:block;
text-align:center;
}
}
@media screen and (max-width: 720px) {
body{
font-size:16px;
}
.btn_submit a{
width:100%;
}
.ftnavi ul{
}
.ftnavi ul li:first-child,
.ftnavi ul li{
width:100%;
border:none;
display:block;
}
.ftnavi ul li a{
display:block;
padding:1rem 0;
}
#top3 .tbl1{
width:1000px;
}
.tbl2 th, .tbl2 td, .tbl1 th, .tbl1 td{
font-size:14px;
padding:0.5rem 0.2rem;
}
.tbl1 .thbg, .tbl1 tbody th{
padding:0.5rem;
}
.blog_side,
.blog_main{
width:100%;
float:none;
margin-bottom:4rem;
}
}



@media screen and (max-width: 640px) {
#footer{
padding:2rem 0 10rem 0;
}
#top4 .imgbox .item{
margin-bottom:1.5rem;
}

#topslide #hdlogo{
width:50%;
right:1rem;
bottom:1rem;
}
}



@media screen and (max-width: 500px) {
.flow dt{
font-size:18px;
}

.qrcode{
display:none;
}
.btn_line a{
width:100%;
display:block;
text-align:center;
padding:1rem;
}

#sprsvp a{
font-size:130%;
padding:1.5rem 0.5rem;
}
}