@charset "UTF-8";
/* Body */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
}

body {
	font-family: 'Noto Sans JP', "YuGothic" , "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	margin: 0;
	font-size:14px;
	color: #333;
}

body .serif {
	font-family:  "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

h1{
	font-size:2rem;
	text-align: center;
}



p{

}

a{
	text-decoration: none;
	color: #505050;
}

a.fade{-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all  0.3s ease;}
a.fade:hover{opacity: 0.7;}

.clear{
	content:"";display:block;clear:both
}

.bold{
	font-weight: bold;
}

.red{
	color: #ff0000;
}

.pc-block{
	display: block;
}

.sp-block{
	display: none;
}

.shadow{filter:drop-shadow(0 3px 5px rgba(0,0,0,0.2));}

/* Container */
.container {
  	width: 100%;
    background: linear-gradient(45deg,#635347,#2b241f);
    background-size:100vw 100vh;
    background-attachment: fixed;
}

.container.page-yoyaku{}

.container p{}




/* Header */
header {position: fixed;width: 100%;height: 70px;z-index: 999;background: #fff;}

.head_contents	{/*width: 960px;*/margin:0 0 0 5%;}
.head_contents h1{font-size: 0.8rem;color: #ffffff;text-align: left;padding-left: 5px;}
.head_contents:after{content:"";display:block;clear:both}
.head_logo {float:left;}
.head_logo img{height: 60px;margin-top: 5px;}
.head_logo a {text-decoration: none;}

#head_menu	{float:right;width:auto;height: 70px;}
#head_menu ul	{display: flex;align-items: center;height: 100%;}
#head_menu li{list-style: none;height: 100%;}
#head_menu li a{font-size:1rem;letter-spacing: 0.1rem;padding:0 30px;color:#000;text-decoration:none;font-weight: bold;display: flex;align-items: center;height: 100%;}
#head_menu li.head-reserve a{background: #013461;color: #fff;}
#head_menu li.head-reserve.kobetsu a{background: #fff;color: #013461;border:1px solid;}
#head_menu li.reserve-event a{background: #FF885C;color: #fff;}
#head_menu li a:hover	{background-color:#bbbbbb;color: #ffffff;transition: 0.5s;}

/*footer設定*/
footer {background: #013461;color: #fff;padding: 30px 0;}
.copyright {text-align: center;}

#mobile-reserve{display: none;}

#fixed-bnr{position: fixed;bottom:15px;right: 60px;}
#fixed-bnr img{width: 150px;max-width: 100%;vertical-align: middle;}

/* pagetop button */
#pageTop {position: fixed;bottom: 30px;right: 20px;z-index: 999;}
#pageTop img{width: 120px;}
#pageTop i {padding-top: 6px}
#pageTop a {display: block;background-color: rgba(255,255,255,0.50);color: #777;border-radius: 10px;padding: 10px;line-height: 16px;text-align: center;}
#pageTop a:hover {text-decoration: none;opacity: 0.7;}


/*下層ページヘッダー*/
/*標準ボタン*/
.btn-basic{text-align: center;}
.btn-basic a{display: inline-block;padding: 10px 50px;background: #fff;border:1px solid #013461;color: #013461;}
.btn-basic a:hover{background-color:#bbbbbb;color: #ffffff;transition: 0.5s;}

/*予約ボタン*/
.reserve-btn{}
.reserve-btn a{background: #635347;color: #fff;display: flex;align-items: center;justify-content: center;max-width: 96%;margin: auto;}
.reserve-btn a .icon{margin: 10px 30px 0 30px;}
.reserve-btn a .icon img{height: 3.5rem;animation: yurayura 1.5s  infinite;}
.reserve-btn a .text{font-size: 2.2rem;padding: 0 30px 10px 30px;border-bottom: 2px solid;font-weight: bold;}
.reserve-btn a:hover{background-color:#bbbbbb;color: #ffffff;transition: 0.5s;}

@keyframes yurayura {
    0% {transform: translateX(0)}
    25% {transform: translateX(-5px)}
    50% {transform: translateX(0)}
    75% {transform: translateX(-5px)}
    100% {transform: translateX(0)}
    transition-timing-function:ease-in-out;
}

.btn-form a{display: inline-flex;justify-content: space-between;align-items: center;padding: 10px 20px;background: #e6cd8a;color: #000;font-weight: bold;border-radius: 30px;margin: 5px auto;width: 120px}
.btn-form a::after{display: block;content: ">";}
.btn-form a:hover{background: #777;}
.btn-form.mini a{font-size: 12px;padding:3px 20px;}

.yoyaku-list{display: flex;flex-wrap: wrap;width: 100%;}
.yoyaku-list li{list-style: none;margin: 5px 10px;}

/*main contents*/
/*共通設定*/
.contents{
	max-width: 560px;
	margin: 0 auto 50px auto;
}

.contents h2{font-size:2.5rem;font-weight: bold;}
.contents h4{font-size:1.5rem;text-align: center;padding: 10px;background: #173763;color: #fff;margin: 50px auto;}
.contents p{margin: 30px 0;font-size: 1rem;}
.contents img{max-width: 100%;vertical-align: middle;}

/* TOPコンテンツ */

.head-space{width: 100%;height: 70px;}

.main-section{display: flex;justify-content: center;}
.outer-contents{position: relative;margin: 50px 30px;max-height: 100vh;width: 550px;}
.outer-contents .fixed{position: fixed;top:100px;right:51vw;width: 550px;height: 100%;}
.outer-contents .fixed h2{color: #fff;font-size: 2.5rem;margin: 30px auto;text-align: center;font-weight: bold;}
.outer-contents .fixed h2 span{display: inline-block;border:2px solid;padding: 5px 15px;font-size: 1.5rem;margin: 15px auto;background: #fff;color:#000;}

.inner-wrap{background: #fff;}
.inner-wrap.contents{margin-bottom: 0;}

@media (max-width:960px){
  .main-section{display: block;}
  .outer-contents{display: none;}
  #head_menu{display: none;}
}

#firstview-cp{position: relative;}
#firstview-cp.contents{margin: 0 auto;}
#firstview-cp img{width: 100%;vertical-align: middle;}
#firstview-cp .fv-reserve{position: absolute;width: 30%;bottom: 40%;right: 5%;animation: yurayura 1.5s  infinite;display: block;}
#firstview-cp .left-img{position: absolute;width: 350px;top:100px;left: -400px;}
#firstview-cp .right-img{position: absolute;width: 350px;top:100px;right: -400px;}

#firstview .fv-bg{position: relative;}
#firstview .fv-bg img{width: 100%;min-height: 800px;object-fit: cover;vertical-align: middle;}
#firstview .fv-bg:after{position: absolute;top:0;left: 0;width: 100%;height: 100%;display: block;content: "";background: rgba(0,0,0,0.2);z-index: 2;}
#firstview .fv-text{position: absolute;top:10%;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;z-index: 3;}
#firstview .fv-text-sp{display: none;z-index: 3;}
#firstview .fv-text .fv-text-inner{position: relative;width: 100%;text-align: center;}
#firstview .fv-text .maintext{width: 70%;position: relative;z-index: 2;}
#firstview .fv-text .camp{position: absolute;top:-25%;right: 22%;width: 13%;animation: furufuru 1s  infinite;}
@keyframes furufuru {
    0% {transform: rotateZ(0deg)}
    25% {transform: rotateZ(3deg)}
    50% {transform: rotateZ(0deg)}
    75% {transform: rotateZ(-3deg)}
    100% {transform: rotateZ(0deg)}
    transition-timing-function:ease-in-out;
}

#firstview-ev{}
#firstview-ev .fv-img{max-width: 1920px;margin: auto;}
#firstview-ev .fv-img img{width: 100%;}

#firstview-cp{}
#firstview-cp img{width: 100%;}

/* swiperのズームフェード設定*/
@keyframes zoomUp {
  0% {transform: scale(1);}
  100% {transform: scale(1.15);}
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
  animation: zoomUp 10s linear 0s 1 normal both;
}

//imgタグだと下に隙間ができるのでblockに。
.slide-img img{
  display: block;
}
/* 設定ここまで*/

/*tablet*/
@media (min-width:431px) and (max-width:1200px){
  #firstview .fv-text .maintext{width: 90%;}
  #firstview .fv-text .camp{top:-15%;right: 17%;width: 15%;}
}

#campaign{background: #fff;text-align: center;}

#aikoumuten{background: url(../img/ai-bg.png)no-repeat;background-size: auto 100%;padding: 20px 2%;text-align: center;margin-bottom: 0;}
#aikoumuten h3{margin: 50px auto;}
#aikoumuten2{background: #1e0d04;padding: 50px 0;margin-top: 0;}
#aikoumuten2 h3{margin: 15px 2%;}
#aikoumuten2 img{max-width: 100%;}

#modelroom{margin: 100px 2%;}
#modelroom h2{text-align: center;color: #013461;border-bottom: 1px solid;}
#modelroom .comment{font-size: 1.5rem;text-align: center;color: #173763;font-weight: bold;}
#modelroom .wrap{display: flex;flex-wrap: wrap;}
#modelroom .wrap .room-info{width: 96%;padding: 30px 2%;}
#modelroom .wrap .room-info img{width: 100%;}
#modelroom .wrap .room-info .title-wrap{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
#modelroom .wrap .room-info h3{font-size: 2rem;font-weight: bold;color: #013461;padding: 0;margin-top: 15px;}
#modelroom .wrap .room-info .youtube{display: flex;justify-content:flex-end;}
#modelroom .wrap .room-info .youtube li{list-style: none;margin: 0 15px;}
#modelroom .wrap .room-info .youtube a{color: #EE0000;font-size: 2rem;}
#modelroom .wrap .room-info .tel{font-size: 1.5rem;font-weight: bold;color: #013461;padding: 0;margin: 0;}
#modelroom .wrap .room-info .tel a{color: #013461;}
#modelroom .wrap .room-info p{margin: 5px auto;}

#modelroom .wrap .room-info .btn-basic{text-align: left;}
#modelroom .wrap .sashie{padding-top: 200px;}

#modelroom .wrap .room-info.newopen{position: relative;}
#modelroom .wrap .room-info.newopen:after{position: absolute;width: 100px;height: 100px;top:15px;left: 5px;display: block;content: "";background: url(../img/newopen.png)no-repeat;background-size: 100%;z-index: 2;}

#information{margin: 100px auto;}
#information .info-aikoumuten{text-align: center;}
#information .info-aikoumuten .border{padding: 30px 0;border-top: 1px solid;border-bottom:1px solid;}
#information .info-instagram{margin: 30px auto;}
#information .info-instagram img{width: 50px;}

/*下層ページ*/
#inline-form{padding-top: 30px;margin: auto 15px;width: 530px;}
#inline-form h2{font-size: 1.5rem;}
@media (max-width:560px){
#inline-form{padding-top: 30px;margin: auto;width: 96%;}
}

#select-modelroom{padding-top: 50px;}
#select-modelroom h2{text-align: center;color: #013461;border-bottom: 1px solid;font-size: 1.5rem;}
#select-modelroom .wrap{display: flex;flex-wrap: wrap;}
#select-modelroom .wrap .room-info{width: 48%;padding: 15px 1%;list-style: none;display: flex;flex-direction: column;justify-content: space-between;}
#select-modelroom .wrap .room-info img{width: 100%;}
#select-modelroom .wrap .room-info h3{font-size: 1.5rem;font-weight: bold;color: #013461;padding: 0;margin: 15px 0;}
#select-modelroom .wrap .room-info h3 span{font-size: 1.1rem;}
#select-modelroom .wrap .room-info p{margin: 5px auto;font-size: 10px;font-size: 1rem;}
#select-modelroom .wrap .room-info .tel a{color: #013461;}


/*tablet*/
@media (min-width:431px) and (max-width:960px){
/*共通設定*/

.container {
	width: 100%;
}

}

/* Mobile */
@media (max-width: 431px) {

h1{
	text-align: center;
}



p{
}

.pc-block{
	display: none;
}

.sp-block{
	display: block;
}


/* Container */
.container {
	width: 100%;
}

.container p{}


/* Header */
header {height: 60px;}
.head_contents	{width: 100%;margin: 0;}
.head_logo img{height: 40px;margin-left: 10px;margin-top: 10px;}

/*footer設定*/
/*footer{padding-bottom: 120px;}*/

#fixed-bnr{position: fixed;bottom:5px;right: 5px;}
#fixed-bnr img{max-width: 100%;width: 130px;}


/*main contents*/
/*共通設定*/

.contents{
  width: 100%;
	margin: 0 auto 50px auto;
}

.contents h2{font-size:2rem;}

.contents h3{font-size:1.8rem;}
.contents h4{font-size:1.3rem;}

.contents p{
  font-size: 0.9rem;
	margin: 30px auto;
}

.more_info{
	float: right;
	text-decoration: underline;
	padding: 5px;
}

//*予約ボタン*/
.reserve-btn a .icon{margin: 10px 10px 0 10px;}
.reserve-btn a .icon img{height: 2.5rem;}
.reserve-btn a .text{font-size: 1.3rem;padding: 0 10px 10px 10px;margin: 15px 0;}
.contents p.goyoyaku{font-size: 1rem;}

/*TOP~HOME*/
.head-space{width: 100%;height: 60px;}

#firstview-cp.contents{width: 100%;margin: 0 auto;}
#firstview{position: relative;}
#firstview .fv-bg img{height: 600px;min-height: auto;}
#firstview .fv-text{display: none;}
#firstview .fv-text-sp{display: block;position: absolute;top:8%;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}
#firstview .fv-text-sp .fv-text-inner{position: relative;width: 100%;text-align: center;}
#firstview .fv-text-sp .maintext{width: 90%;position: relative;z-index: 2;}
#firstview .fv-text-sp .camp{position: absolute;top:-28%;right: 2%;width: 35%;animation: furufuru 1s  infinite;}


#aikoumuten{padding: 1px 3%;width: 94%;}

#modelroom .comment{font-size: 1rem;}

#information{margin: 50px 5%;}
#information .info-aikoumuten{margin: 30px auto;}

/*下層ページ*/
#select-modelroom .wrap .room-info p{font-size: 12px;}
#select-modelroom .btn-form{text-align: center;}





/* pagetop button */
#pageTop {position: fixed;bottom: 50px;right: 10px;z-index: 999;}
#pageTop img{width: 80px;}
#pageTop i {padding-top: 6px}
#pageTop a {display: block;background-color: rgba(255,255,255,0.50);border-radius: 10px;}

}

#sp-phone {
    position: absolute;
    right: 70px;
    top: 5px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 100;
	font-size:38px;
}

/* トグルメニュー */
#nav-toggle {
    display: block;
    position: absolute;
    right: 20px;
    top: 13px;
    width: 28px;
    height: 36px;
    cursor: pointer;
    z-index: 100;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #777; /*トグルボタン色設定*/
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 9px;
}
#nav-toggle span:nth-child(3) {
    top: 18px;
}

#nav-toggle p{font-size: 10px;position: absolute;top:22px;}

/*#toggle_menu{display: none;}*/


 #toggle_menu {
        display: block;
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -110vh;
        left: 0;
        background: rgba(255,255,255,0.9);
        width: 100vw;
        height: 100vh;
        text-align: center;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
	 	margin: 0;
    float: none;
    padding-top: 0vh;
    }

    #toggle_menu .yoyaku-list{justify-content: center;margin: 15px auto;}

    #toggle_menu h2{color: #173763;font-size: 2rem;margin: 0 auto 30px auto;text-align: center;font-weight: bold;}
    #toggle_menu h2 span{display: inline-block;border:2px solid;padding: 5px 15px;font-size: 1.5rem;margin: 15px auto;background: #fff;}
    #toggle_menu p{text-align: center;color: #173763;font-weight: bold;letter-spacing: 0.1rem;font-size: 1rem;}


    #nav-toggle {
        display: block;
    }


    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /* #global-nav スライドアニメーション */
    .open #toggle_menu {
        /* #global-nav top + #mobile-head height */
        -moz-transform: translateY(110vh);
        -webkit-transform: translateY(110vh);
        transform: translateY(110vh);
    }

    #toggle_menu .midashi-links{max-width: 960px;margin: auto;}
    #toggle_menu .midashi-links li{font-size: 1.5rem;text-align: left;padding: 15px;list-style: none;border-bottom: 1px solid;font-weight: bold;}

@media (max-width:960px){
    #mobile-reserve{display: block;position: fixed;bottom: 15px;text-align: center;width: 90%;left: 0;right: 0;margin: auto;}
    #mobile-reserve .reserve-btn{width: 98%;margin: 0 1%;}
    #mobile-reserve .reserve-btn a{background: #013461;border: 1px solid #fff;}
    #mobile-reserve .reserve-btn.event-btn a{background: #FF885C;}
    #mobile-reserve .reserve-btn a .icon{margin: 10px 0px 0 0px;}
    #mobile-reserve .reserve-btn a .icon img{height: 2.5rem;}
    #mobile-reserve .reserve-btn a .text{font-size: 1.2rem;padding: 5px 10px;margin: 15px 0;}
}

/*tablet*/
/*@media (min-width:431px) and (max-width:960px){
  footer{padding-bottom: 100px;}
#mobile-reserve{max-width:500px; }

#information .flexbox .info-aistudio .reserve-btn a{display: flex;padding: 0;}
#information .flexbox .info-aistudio .reserve-btn a .icon{margin: 10px 15px 0 15px;}
#information .flexbox .info-aistudio .reserve-btn a .icon img{height: 2.5rem;}
#information .flexbox .info-aistudio .reserve-btn a .text{font-size: 1.5rem;padding: 0 30px 10px 30px;}
}*/

/* 共通：ページ内リンク先にこのクラスをつける */
.anchor-target {scroll-margin-top: 80px;}