/* CSS Document */
*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box; height:100%;
}
body{ background:#FDD000; height:100%; color:#221814; position:relative;}
a{ color:#221814;}
h1,h2,h3,p{ line-height:1.4em; text-align:left;}
img{ max-width:100%; vertical-align:bottom;}
.sp{ display:none;}
p{ font-size:1.4rem; line-height:1.6em; margin:0 auto; font-weight:400;}
.center{ text-align:center;}
header ul.nav li span,header ul.sns_nav li.contact_btn,h1.title span,footer .right_box ul li span,#navi_toggle ul li span{font-family: "Montserrat Subrayada", sans-serif; font-weight:700;}





/*トグルボタン*/
#menubtn{
	width:40px;
	height:41px;
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 3;
	border:1px solid #7d8488;
    border-radius: 4px;        /* CSS3草案 */  
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 4px;   /* Firefox用 */
	font-family:Arial, Helvetica, sans-serif;
	}
header #menubtn{display:none;}

#menubtn #menubtn_line{
    width: 40px;
    height:40px;
    position: absolute;
    top: 0px;
    right: 0px;
	
}
#menubtn #menubtn_line span {
    display: block;
    background: #7d8488;
    width:   23px;
    height: 2px;
    position: absolute;
    left: 9px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}
#menubtn p{color:#fff; position:absolute; bottom:3px; left:8px;}
#menubtn #menubtn_line span:first-child {
    top: 12px;
}
#menubtn #menubtn_line span:nth-child(2) {
    margin-top: -1px;
    top: 50%;
}
#menubtn #menubtn_line span:last-child {
    bottom: 12px;
}
#menubtn.active #menubtn_line span:first-child {
    -webkit-transform: translateY(7px) rotate(45deg);
    -moz-transform: translateY(7px) rotate(45deg);
    -ms-transform: translateY(7px) rotate(45deg);
    transform: translateY(7px) rotate(45deg);
}
#menubtn.active #menubtn_line span:nth-child(2) {
    opacity: 0;
}
#menubtn.active #menubtn_line span:last-child {
    -webkit-transform: translateY(-7px) rotate(-45deg);
    -moz-transform: translateY(-7px) rotate(-45deg);
    -ms-transform: translateY(-7px) rotate(-45deg);
    transform: translateY(-7px) rotate(-45deg);
}


/*ヘッダー*/
header { width:1200px; max-width:100%; margin:0 auto; position:relative; padding-bottom:15px;}
header .header_top{ display: flex; justify-content: space-between; }
header .logo{ width:196px; padding-top:20px;}
header nav { width:930px; max-width:100%; margin:50px auto 0;}

header ul.nav{ display: flex; justify-content:right;  align-items:center;}
header ul.nav li{font-size:1rem; line-height:1.4rem; font-weight:400; padding:5px 15px;}
header ul.nav li span{ font-size:1.4rem; display:block; margin-bottom:3px;}
header ul.sns_nav{ margin-top:10px; display: flex; justify-content:right;  align-items:center;}
header ul.sns_nav li.contact_btn a{ display:block; width:88px; padding:3px 10px; color:#fff; font-size:1.4rem; letter-spacing:0.1em; line-height:1.2em; background:#000; border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px;}
header ul.sns_nav li{ padding:5px 2px;}


#navi_toggle{ width:100%; display:none; background:rgba(255,255,255,0.9); padding:30px; position:absolute; right:0; top:0; z-index:2; box-sizing: border-box;}
#navi_toggle ul{ margin:60px 0 0 0; font-weight: 900;}
#navi_toggle ul li{ font-size:1rem; margin:0px 0 20px; padding:3px 5px 2px 3px; text-align:left;}
#navi_toggle ul li span{ font-size:1.4rem; padding-right:10px;}
#navi_toggle ul.sns_nav{ margin-top:10px; display: flex; justify-content:left;  align-items:center; flex-wrap:wrap;}
#navi_toggle ul.sns_nav li.contact_btn a{ display:block; width:88px; padding:3px 10px; color:#fff; font-size:1.4rem; letter-spacing:0.1em; line-height:1.2em; background:#000; border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px;}
#navi_toggle ul.sns_nav li{ padding:2px 2px; margin:0;}

/*フッター*/
footer{ width:1000px; padding:40px 0; max-width:95%; margin:0 auto; overflow:hidden; display:flex; justify-content: space-between; flex-wrap: wrap; text-align:left; }
footer .left_box{ width:40%; padding:0; margin:0;}
footer .left_box h1.logo{ width:196px; margin:30px 0 20px 0;}
footer .left_box h2{ font-size:1.2rem; line-height:1.6em; padding-left:10px;}
footer .left_box p{font-size:1.2rem; line-height:1.6em; font-weight:400; padding-left:10px;}
footer .left_box ul.sns li{ display:inline-block;}
footer .left_box ul.sns { margin:20px 0; padding-left:10px;}

footer .right_box{ width:60%; font-size:1.4rem; line-height:1.2em; padding:0; }
footer .right_box ul{ width:370px; max-width:100%; text-align:left; margin:0 0 0 auto;}
footer .right_box ul li{  padding:10px 25px;}
footer .right_box ul li span{ width:180px; padding-left:5px; display:inline-block;}
footer .right_box ul li.reserve_btn{margin:0 0 30px auto; text-align:center; padding:10px 10px;}

/*共通*/
h1.title{ font-size:2rem; line-height:1.4em; margin:50px auto 50px; letter-spacing:0.1em;}
h1.title span{ font-size:calc(1.5vw + 2.4rem);}
.sec2 { margin:60px auto;}



/*アニメーション*/

/*一文字ずつ現れる*/
h1.type_ani span,.type_ani span{display: inline-block; transform: translateY(-1rem);opacity:0; padding:0; letter-spacing:0.05em;}
.type_ani:before{ opacity:0;}
h1.type_ani div,.type_ani div{display: inline-block;}

.start .type_ani span,.start .type_ani:before{ animation: text-animation 0.8s forwards; }
.start .type_ani span:nth-child(2){animation-delay: 0.1s}
.start .type_ani span:nth-child(3){animation-delay: 0.2s}
.start .type_ani span:nth-child(4){animation-delay: 0.3s}
.start .type_ani span:nth-child(5){animation-delay: 0.4s}
.start .type_ani span:nth-child(6){animation-delay: 0.5s}
.start .type_ani span:nth-child(7){animation-delay: 0.6s}
.start .type_ani span:nth-child(8){animation-delay: 0.7s}
.start .type_ani span:nth-child(9){animation-delay: 0.8s}
.start .type_ani span:nth-child(10){animation-delay: 0.9s}
.start .type_ani span:nth-child(11){animation-delay: 1s}
.start .type_ani span:nth-child(12){animation-delay: 1.1s}
.start .type_ani span:nth-child(13){animation-delay: 1.2s}
.start .type_ani span:nth-child(14){animation-delay: 1.3s}
.start .type_ani span:nth-child(15){animation-delay: 1.4s}
.start .type_ani span:nth-child(16){animation-delay: 1.5s}
.start .type_ani span:nth-child(17){animation-delay: 1.6s}
.start .type_ani span:nth-child(18){animation-delay: 1.7s}
.start .type_ani span:nth-child(19){animation-delay: 1.8s}

@keyframes text-animation {
    0% {
        opacity: 0;
        transform: translateY(-1rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0rem);
    }
}

/*フェード*/
.fade{ opacity:0;}
.start .fade{ animation: fade-animation 2s forwards;}
@keyframes fade-animation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*フェードアップ*/
.fade_up{ transform: translateY(-1rem); opacity:0;}
.start .fade_up{ animation: text-animation 2s forwards;}

/*スライドイン*/
.start .slide_in{
  animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
 
@keyframes slideIn {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  80%,100% {
    opacity: 1;
  }
}

/*スライドイン２*/
.slide_in2{
  opacity:0;
}

.start .slide_in2{
  animation: slideIn2 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
 
@keyframes slideIn2 {
  0% {
    transform: translateX(-300px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  80%,100% {
    opacity: 1;
  }
}


/*トップページ*/
#top .sec1{ display:flex; justify-content:center; align-items:center; flex-direction:row-reverse;}
#top .sec1 .text_box{max-width:40vw; padding:20px; margin-right:20px; text-align:left;}
#top .sec1 .mainimage{width:60vw; height:50vw; background:url(../images/top_image1.jpg) no-repeat left top; background-size:cover; border-bottom-left-radius: 100px; animation: fade-animation 2.5s forwards;}
#top .sec1 h1{  font-size:calc(2vw + 1.6rem); line-height:1.4em; animation: fade-animation 2s forwards;}
#top .sec1 p{  font-size:calc(0.5vw + 1rem); line-height:1.6em; letter-spacing:0.05em; margin:20px 0 20px 0; opacity:0; animation: fade-animation 2s forwards; animation-delay:1s;}
#top .sec1 p.soudan{ display:inline-block; padding:10px 20px;border:1px solid #000; font-size:2em; letter-spacing:0.15em;}
#top .sec1 p.soudan:hover{ background:rgba(255,255,255,0.8); transition:1s;}



@keyframes skewanime {
	0% {
		left:-500%;/*画面の見えていない左から右へ移動する終了地点*/
	}
	100% {
		left:-120%;/*画面の見えていない左から右へ移動する終了地点*/
	}
}



.sec3,.sec4,.sec5,.sec6,.sec7,.sec8,.sec9{ position:relative; margin:50px auto;}
.sec5{ background:#F9BE00; padding:5px 0 30px;}
.sec7{ background:#FFF9AE; padding:30px 0 10px;}

#top .circle_bg{ width:60vw; height:60vw; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; position:relative;
  display: flex;
  justify-content: center;
  align-items: center;}
#top .circle_bg.start{animation: zoom 1s forwards;}
#top .sec3 .circle_bg{ background:#FFF9B0; margin-left:-10vw;}
#top .sec4 .circle_bg{ background:none; border:4px solid #FFFDEA; margin:0 -10vw 0 auto;}
#top .sec5 .circle_bg{ background:#FFE049; border:4px solid #FFFDEA; margin-left:-10vw; margin-top:-50px;}
#top .sec6 .circle_bg{ background:#F6AC18; border:4px solid #FFFDEA; margin:0 -10vw 0 auto;}
#top .sec7 .circle_bg{  background:none; border:4px solid #FFFDEA; margin-left:-10vw;}
#top .sec8 .circle_bg{ background:#FEFEFE; margin:0 -10vw 0 auto;}



:where(#top .sec3 ,#top .sec5 ,#top .sec7 ) .contents_box{ margin-left:5vw; margin-top:-5vw; width:50vw; padding:0 5vw;}
:where(#top .sec4 ,#top .sec6 ,#top .sec8 ) .contents_box{ margin-right:5vw; margin-top:-5vw; width:50vw; padding:0 5vw;}

#top .contents_box h1.title span{ font-size:calc(1.7vw + 2rem); padding-right:10px; line-height:1em;}
#top .contents_box h1.title { font-size:calc(1vw + 0.8rem); line-height:1.4em;}
#top p.text{  font-size: calc(0.3vw + 1rem); line-height:1.6em;}

#top .photo_wrap{ width:60vw; display:flex; flex-flow: column;}
:where(#top .sec3 ,#top .sec5 ,#top .sec7 ) .photo_wrap{ position:absolute; top:0; right:0; align-items: flex-end;}
:where(#top .sec4 ,#top .sec6 ,#top .sec8 ) .photo_wrap{ position:absolute; top:0; left:0;  align-items: flex-start;}



.photo_wrap .photo1{ width:50vw; opacity:0; margin-top:100px;}
.photo_wrap .photo2{ width:24vw; margin:30px 30vw 0 0; opacity:0;}
.photo_wrap .photo3{ width:20vw; margin:-40px 15vw 0 0; opacity:0;}

#top .sec4 .photo_wrap .photo1,#top .sec8 .photo_wrap .photo1{ width:45vw; margin:100px 2vw 0 0;}
#top .sec5 .photo_wrap .photo1{ width:45vw; margin:150px 2vw 0 0;}
#top .sec6 .photo_wrap .photo1{ width:40vw; margin:150px 0 0 2vw;}
#top .sec7 .photo_wrap .photo1{ margin:10vw 0 0 0;}

:where(#top .sec4 ,#top .sec6 ,#top .sec8 ) .photo_wrap .photo2{ margin:30px 0 0 30vw; opacity:0;}


.photo_wrap .photo1 img{ border-radius:60px; -webkit-border-radius:60px; -moz-border-radius:60px;}
.photo_wrap .photo2 img{ border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px;}
.photo_wrap .photo3 img{ border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px;}

.sec3 .photo_wrap .photo1 img,.sec7 .photo_wrap .photo1 img{ border-bottom-right-radius:0px; border-top-right-radius:0px;}
.sec4 .photo_wrap .photo1 img,.sec8 .photo_wrap .photo1 img{ border-bottom-left-radius:0px; border-top-left-radius:0px;}

:where(#top .sec3 ,#top .sec5 ,#top .sec7 ) .start .photo1 { animation: slideIn 1s forwards; animation-delay:1s;}
:where(#top .sec3 ,#top .sec5 ,#top .sec7 ) .start .photo2 { animation: slideIn 1s forwards; animation-delay:1.5s;}
:where(#top .sec3 ,#top .sec5 ,#top .sec7 ) .start .photo3{ animation: slideIn 1s forwards; animation-delay:2s;}
:where(#top .sec4 ,#top .sec6 ,#top .sec8 ) .start .photo1 { animation: slideIn2 1s forwards; animation-delay:1s;}
:where(#top .sec4 ,#top .sec6 ,#top .sec8 ) .start .photo2 { animation: slideIn2 1s forwards; animation-delay:1.5s;}
:where(#top .sec4 ,#top .sec6 ,#top .sec8 ) .start .photo3{ animation: slideIn2 1s forwards; animation-delay:2s;}

@keyframes zoom {
  0% {
    transform: scale(0.5);
	opacity:0;
  }
  100% {
    transform: scale(1);
	opacity:1;
  }
}

#top .sec9 { display:flex; justify-content:center; flex-wrap:wrap; background:#fff; padding:100px 0 200px; margin:0;}
:where(#top .sec9 ,#top .sec10) h1.title{ width:275px; margin:0; font-size:1.4em; letter-spacing:0.1em; padding:10px;}
:where(#top .sec9 ,#top .sec10) h1.title span{ font-size:calc(1.25vw + 2rem);}
#top .sec9 dl{ width:560px; max-width:90%; display:flex; justify-content:left; flex-wrap:wrap; padding:50px; border-left:1px solid #221814; font-size:1.4rem; line-height:1.4em; text-align:left;}
#top .sec9 dl dt{ width:90px; padding:20px 10px;}
#top .sec9 dl dd{ width:calc(100% - 90px); padding:20px 10px;}


#top .sec10{ background:#FFF9AE; padding-bottom:100px;}
#top .sec10 h1.title{ margin:0;}

#top .sec10 .img_box{ width:100%; position:relative;}
#top .sec10 .img_box img{ width:100%;}
#top .sec10 .img_box h1{ position:absolute; top:45%; left:15%;}


#top .sec10 dl{ font-size:1.4rem; line-height:1.6em; width:700px; max-width:95%; margin:100px auto; display:flex; justify-content:left; flex-wrap:wrap; text-align:left;}
#top .sec10 dl dt{ width:200px; padding:10px; border-bottom:1px dotted #999999;}
#top .sec10 dl dd{ width:calc(100% - 200px); padding:10px; border-bottom:1px dotted #999999;}






.gmap {
position: relative;
width:800px;
padding-bottom: 50%;
height: 0;
overflow: hidden;
max-width:100%;
margin:0 auto;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 
 
 
a.anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}



#thanks .sec1{ width:1000px; max-width:90%; margin:200px auto;}


#privacy { width:800px; max-width:90%; margin:60px auto;}
#privacy h2{ max-width:100%;  text-align:left; font-size:1.8rem; line-height:1.4em; margin:30px auto 10px;}
#privacy h3{ max-width:100%;  font-size:1.6rem; line-height:1.6em; text-align:left; margin:0 auto 5px;}
#privacy p{ max-width:100%; font-size:1.4rem; line-height:1.6em; text-align:left; margin-bottom:20px;}






@media screen and (min-width: 1200px){
#top .sec1 .mainimage{width:60vw; height:650px; background:url(../images/top_image1.jpg) no-repeat left top; background-size:cover; border-bottom-left-radius: 100px;}
}

@media screen and (max-width: 1200px){
header .header_top{ display:block; }
header nav {margin:20px auto 0;}
header .logo{ margin-left:15px;}
.photo_wrap .photo1 img { border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px;}
.photo_wrap .photo2 img{ border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px;}
.photo_wrap .photo3 img{ border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px;}
}


@media screen and (max-width: 960px){
header .nav_wrap,header ul.sns_nav{ display:none;}
header #menubtn{ display:block;}


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


}
@media screen and (max-width: 780px){
}
/*767以下 ipadを含まない*/
@media screen and (max-width: 767px){
.spno{ display:none;}
.sec2 .information_list{ display:block; margin-top:30px;}
#top .sec1{ display:block;}
#top .sec1 .text_box{max-width:100%; width:100%; padding:20px; margin-right:0px; }
#top .sec1 .mainimage{width:100vw; height:60vw;}
h1.title{ margin:30px auto 30px;}

#top .sec9 h1.title{ text-align:center;}
}





/*600以下 */
@media screen and (max-width: 600px){
.sec2 .information{
	width:1260px;
	max-width:100%;
	padding:10px;
	border-top-right-radius: 100px;
}



#top .circle_bg{width:100vw; height:100vw;}
#top .contents_box{ margin-left:5vw; margin-top:-5vw; width:80vw; padding:0 5vw;}
#top .photo_wrap{ width:100vw; position:relative; margin-top:-10vw;}
#top .sec5 .photo_wrap{ margin-top:-20vw;}
.photo_wrap .photo1{ width:75vw; margin-top:-20px;}
.photo_wrap .photo2{ width:45vw; margin:10px 40vw 0 0;}
.photo_wrap .photo3{ width:30vw; margin:-40px 15vw 0 0;}
#top .sec4 .photo_wrap .photo1{ width:70vw; margin: 10px 10vw 0 0 ;}
#top .sec5 .photo_wrap .photo1{ width:70vw; margin: 10px 10vw 0 0 ;}
#top .sec6 .photo_wrap .photo1{ width:80vw; margin:  -30px 0 0 10vw;}
#top .sec7 .photo_wrap .photo1{ margin:-30px 0 0 0;}
#top .sec8 .photo_wrap .photo1{ width:80vw; margin: 50px 2vw 0 0;}

.photo_wrap .photo1 img { border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px;}
.photo_wrap .photo2 img{ border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px;}
.photo_wrap .photo3 img{ border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}


#top .sec10 dl{  margin:50px auto; display:block;}
#top .sec10 dl dt{ width:100%; border-bottom: dotted 1px #999; padding-bottom:5px;}
#top .sec10 dl dd{ width:100%; border-bottom: solid 1px #999;}




#footer_wrap{ padding:30px 0;}

footer .left_box{ width:100%; padding:0; margin:0;}
footer .logo{max-width:60%;}
footer .right_box{ width:100%;}
footer .right_box ul{margin:30px 0 ; }
footer .right_box ul li{ padding:8px 15px; text-align:left;}
footer .right_box ul li.reserve_btn{margin:0 0 30px 0;}

}

/*560以下 */
@media screen and (max-width: 560px){
header .logo{ margin:0 auto 10px 15px; padding-top:10px; max-width:60%;}
#top .sec9 dl{display:block; padding:20px;}
#top .sec9 dl dt{ width:100%; padding:20px 10px 10px;}
#top .sec9 dl dd{ width:100%; padding:0px 10px 20px;}





/*グーぐるマップ*/
.gmap {
position: relative;
width:480px;
padding-bottom: 70%;
height: 0;
overflow: hidden;
max-width:100%;
margin:0 auto;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
	
}
/*414以下 iphone縦*/
@media screen and (max-width: 414px){
h1.title{ margin:30px auto 20px;}
footer .right_box ul li span{ width:100%; padding-left:0px; display:inline-block;}

.spno2{ display:none;}






}