@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;
}

html{}

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: #000;
}

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: #003461;
    background-size:100vw 100vh;
    background-attachment: fixed;
}

.container img{max-width: 100%;}

.container.page-yoyaku{}

.container p{}




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

.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: 10px;margin-left: 10px;}
.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 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;color: #000;border-radius: 30px;}
.btn-basic a:hover{background-color:#ddd;transition: 0.2s;}

/*予約ボタン*/
.entry-btn{margin: 50px auto;}
.entry-btn a{background: #fff;color: #000;display: flex;align-items: center;justify-content: space-between;max-width: 96%;margin: auto;padding: 20px 40px;border-radius: 80px;}
.entry-btn a .icon{margin: 0;}
.entry-btn a .icon img{height: 2rem;}
.entry-btn a .text{font-size: 1.1rem;font-weight: bold;margin: 0;text-align: left!important;}
.entry-btn a:hover{background-color:#ddd;transition: 0.2s;}
.entry-btn .attention{margin: 5px auto;}

#fixed-entry{background: #002B51;color: #fff;text-align: center;padding: 1px 0;position: fixed;bottom: 0;left: 0;right:0;width: 100%;max-width: 500px;margin: auto;z-index: 10;}
#fixed-entry p{margin: 10px auto;font-size: 1rem;}
#fixed-entry a{background: #fff;color: #002B51;max-width: 96%;width: 250px;margin: 10px auto;padding: 10px;border-radius: 30px;display: block;text-align: center;font-size: 1.1rem;font-weight: bold;}
#fixed-entry a p{margin: 0;}

/*main contents*/
/*共通設定*/
.contents{
	margin: 30px;
}

.contents h2{font-size:1.7rem;font-weight: bold;margin: 30px auto;}
.contents h2 span{font-size: 1.1rem;color: #003461;display: block;}
.contents h3{font-size:1.5rem;font-weight: bold;}
.contents h4{font-size:1.2rem;font-weight: bold;margin: 15px auto;}
.contents p{margin: 30px 0;font-size: 1rem;line-height: 1.8rem;}
.contents img{max-width: 100%;vertical-align: middle;}

.bg-blue{background: #003461;color: #fff;padding: 15px 0;}
.bg-gray{background: #F2F2F2;padding: 15px 0;}

.flex-three{display: flex;justify-content: space-between;margin: 30px auto;}
.flex-three .flexitem{width: 31%;list-style: none;}

.sec-head-img{width: 80%;margin: 50px 0;}
.sec-head-img.img-r{margin-left: 20%}

/* アコーディオン */
.accordion{margin: 30px auto;}
.ac-header {cursor: pointer;display: flex;justify-content: space-between;align-items: center;padding: 10px 15px;}
.ac-header .arrow{margin: 0;width: 25px;}
.ac-header .arrow img{height: 25px;opacity: 0.8;transition: 0.2s;}

.ac-inner {display: none;padding: 10px 15px;}

.ac-header.active .arrow img{transform: rotate(90deg);transition: 0.2s;}

/* TOPコンテンツ */
.main-section{position: relative;}
.outer-contents.left{position: fixed;top:100px;right: calc(50vw + 280px);max-height: calc(100vh - 100px);max-width: 450px;width: calc(50% - 300px);overflow-y: scroll;scrollbar-width: none;}
.outer-contents.right{position: fixed;top:0px;left: calc(50vw + 280px);max-height: 100vh;max-width: 450px;width: calc(50% - 300px);overflow-y: scroll;scrollbar-width: none;}

.inner-wrap{position: relative;background: #fff;max-width: 500px;margin: 0 auto;box-shadow: 0 0 30px #4A6C73;}

@media (max-width:1200px){
  .main-section{display: block;}
  .outer-contents{display: none;}
  .head_logo{display: none;}
  footer {padding: 30px 0 150px 0;}
}

/* Outer Contents */
.outer-contents .contents{background: #fff;border-radius: 15px;padding: 15px 30px;text-align: center;margin: 30px 0;}
.outer-contents .contents h2{font-size: 1.3rem;margin-top: 0;}
.outer-contents .btn-basic a{background: #003461;color: #fff;font-weight: bold;font-size: 1rem;}

#outer-gaiyou dl{display: flex;flex-wrap: wrap;font-size: 1rem;}
#outer-gaiyou dt{background: #003461;color: #fff;font-weight: bold;display: flex;width: 80px;justify-content: center;align-items: center;padding: 5px;margin: 5px 0;}
#outer-gaiyou dd{width: calc(100% - 100px);margin: 5px 0 5px 10px;text-align: left;font-weight: bold;}
#outer-melit.contents{background: none;}
#outer-melit h2{color: #fff;}
#outer-step{}
#outer-entry .attention{color: #fff;text-align: center;}

#firstview{}
#firstview img{width: 100%;vertical-align: middle;}

#sec1 p{text-align: center;}

#sec2 .ac-header {border-bottom: 1px solid #B3B3B3;}
#sec2 .schedule-box{}
#sec2 .schedule-list{display: flex;justify-content: space-between;flex-wrap: wrap;}
#sec2 .schedule-list li{width: calc(50% - 10px);margin: 10px 0;background: #EBF2FA;padding: 10px 0;border-radius: 10px;text-align: center;list-style: none;font-size: 1rem;font-weight: bold;}

#sec3{margin-top: 100px;}
#sec3 .toknow-box{margin: 30px auto;}
#sec3 .toknow-box .text{position: relative;background: #F2F2F2;padding: 30px 15px 40px 30px;width: calc(90% - 45px);border-radius: 15px;}
#sec3 .toknow-box .text h3{border-left: 3px solid #003461;padding-left: 10px;font-size: 1.3rem;}
#sec3 .toknow-box .image{position: relative;width: 60%;margin-left: 40%;margin-top: -40px;}

#sec4{margin-top: 100px;}
#sec4 .vision-list li{margin: 10px auto;background: #EBF2FA;display: flex;justify-content: space-between;align-items: center;padding: 15px 25px;border-radius: 15px;}
#sec4 .vision-list li .text{margin: 0;width: calc(100% - 65px);line-height: normal;}
#sec4 .vision-list li img{width: 60px;}
#sec4 .lead{text-align: center;font-size: 1.1rem;font-weight: bold;}

#sec5 .contents h3{border-left: 3px solid #003461;padding-left: 10px;font-size: 1.3rem;margin: 30px auto 15px auto;}
#sec5 .contents p{margin-top: 15px;}
#sec5 .accordion {margin-top: 5px;}
#sec5 .ac-header{background: #002B51;color: #fff;border-radius: 10px;padding: 15px;}
#sec5 .ac-header h5{font-size: 1.2rem;}
#sec5 .ac-inner p{margin: 0;}

#sec6 .head-area{position: relative;}
#sec6 .head-area .title{position: absolute;bottom:0px;left: 0;display: inline-block;padding: 10px 15px;background: #fff;margin-left: 0;}
#sec6 .head-area .title h2{margin: 0;}
#sec6 .voice-box{margin: 30px auto;}
#sec6 .voice-box .youtube{width: 85%;position: relative;box-shadow: 5px 5px 0 #003461;z-index: 2;}
#sec6 .voice-box .youtube:after{display: block;content: "";padding-top: 56.25%;}
#sec6 .voice-box .youtube iframe{width: 100%;height: 100%;position: absolute;top:0;left: 0;}
#sec6 .voice-box .text{width:calc(80% - 15px);margin: -50px 0 0 20%;background: #F2F2F2;padding: 80px 15px 5px 15px;border-radius: 0 0 0 10px;}
#sec6 .voice-box .text h3{font-size: 1.2rem;font-weight: normal;}
#sec6 .voice-box .text p{margin: 15px auto;}
#sec6 .voice-box .text p span{font-size: 0.9rem;}

#sec7{margin: 50px auto;}
#sec7 p{text-align: center;}

#sec8 .program-box{margin: 30px auto;}
#sec8 .program-box h3{position: relative;z-index: 2;background: #003461;color: #fff;padding: 5px 15px;border-radius: 20px;font-size: 1.2rem;display: inline-block;margin-left: 15px;}
#sec8 .program-box .main-area{padding: 15px;border:1px solid #003461;border-radius: 15px;margin-top: -18px;}
#sec8 .program-box .main-area p{margin: 15px auto;}

#sec9{margin-bottom: 100px;}
#sec9 .ac-header {border-bottom: 1px solid #B3B3B3;}
#sec9 .flow-box{border:1px solid #B3B3B3;border-radius: 15px;padding: 10px;display: flex;justify-content: space-between;align-items: center;position: relative;margin: 25px auto;position: relative;}
#sec9 .flow-box:after{display: block;content: "";width: 0;height: 24px;border: 1px solid #003461;margin: 0 auto;position: absolute;bottom: -26px;left: 0;right: 0;margin: auto;}
#sec9 .flow-box:last-child:after{display: none;}
#sec9 .flow-box .step{width: 20%;font-size: 1.1rem;font-weight: bold;color:#003461;}
#sec9 .flow-box .text{width: 75%;}
#sec9 .flow-box .text h4{margin: 10px auto;}
#sec9 .flow-box .text p{margin: 10px auto;}

#sec10 .ac-header{border: 1px solid #B3B3B3;border-radius: 10px;padding: 15px;}
#sec10 .qa-box{background: #fff;border-radius: 10px;margin: 15px auto;}
#sec10 .qa-box h3{font-size: 1rem;}
#sec10 .qa-box .q-text{display: flex;width: calc(100% - 28px);}
#sec10 .qa-box .q-text:before{display: block;content:"Q.";color:#003461;font-size: 1.2rem;margin-top: -3px;margin-right: 3px;}
#sec10 .qa-box p{margin: 15px auto;}
#sec10 .lead{text-align: center;font-size: 1rem;font-weight: bold;}

#sec11{position: relative;}
#sec11 img{vertical-align: middle;}
#sec11 .contents h2 span{font-size:1.7rem;color: #000;display: inline;background-image: linear-gradient(#003461, #003461);background-position: 0 100%;background-size: 100% 2px;background-repeat: no-repeat; }
#sec11 .text-area{background: rgba(255,255,255,0.9);padding: 5px 15px;margin: 30px 15px;position: absolute;top:0;left: 0;right:0;width: calc(100% - 60px);border-radius: 15px;text-align: center;}

#sec12{text-align: center;}

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

.container {
	width: 100%;
}

}

/* Mobile */
@media (max-width: 431px) {
html{font-size: 14px;}

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{
	margin: 30px 15px;
}

.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: 150px;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;}



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