@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%;
  	overflow: hidden;
}

.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%;border-left: 1px solid #fff;}
#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 a span{display: inline-block;border:1px solid #fff;padding: 0 5px;margin-right: 5px;}
#head_menu li a:hover	{background-color:#bbbbbb;color: #ffffff;transition: 0.5s;}

#head_menu_2	{float:right;width:auto;height: 70px;margin-right: 30px;}
#head_menu_2 ul	{display: flex;align-items: center;height: 100%;;}
#head_menu_2 li{margin: 0 15px;list-style: none;}
#head_menu_2 li a{}
#head_menu_2 li a:hover	{opacity: 0.7;}

/*footer設定*/
footer {padding: 30px 0;}
footer .catalog{padding-bottom: 50px;border-bottom: 1px solid;}
footer .information{text-align: center;margin: 50px auto;}
footer .information .logo{border: none;}
.copyright {text-align: center;}

/*予約ボタン*/
#mobile-reserve{display: flex;justify-content: space-around;position: fixed;bottom: 15px;text-align: center;width: 96%;left: 0;right: 0;margin: auto;max-width: 800px;}
#mobile-reserve .reserve-btn{width: 48%;padding: 2px;}
#mobile-reserve .reserve-btn a{background: #013461;color: #fff;display: inline-block;width: 100%;padding: 15px 0;border-radius: 3px;box-shadow: 1px 1px 3px #777;border:1px solid #fff;font-size: 1.2rem;}
#mobile-reserve .reserve-btn a:hover{transition: 0.5s;background: #777;}
#mobile-reserve .reserve-btn a p{}

/* 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;border:1px solid;position: relative;}
.btn-basic a:after{position: absolute;top:0;left: -15px;display: block;content: "";background: url(../img/btn-parts.svg)no-repeat;width: 30px;height: 100%;background-size: 100%;background-position: center center;}
.btn-basic a:hover{background-color:#bbbbbb;color: #ffffff;transition: 0.5s;}



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

.contents h2{font-size:2rem;font-weight: bold;}
.contents h3{font-size:1.2rem;font-weight: bold;}
.contents p{margin: 30px 0;font-size: 1rem;}
.contents img{max-width: 100%;}
img.objectfit{width: 100%;height: 100%;object-fit: cover;}

.flexbox{display: flex;justify-content: space-between;}
.flexbox .image{width: 48%;}
.flexbox .text{width: 48%;}

/* TOPコンテンツ */

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

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


/*tablet*/
@media (min-width:431px) and (max-width:1200px){

}

/*2連リンクボタン*/
.bnr-links{display: flex;justify-content: center;margin: 30px auto;flex-wrap: wrap;}
.bnr-links a{display: inline-block;margin: 15px;}
.bnr-links a img{max-width: 500px;}
.bnr-links a:hover{opacity: 0.9;}


/*カタログ請求*/
.catalog{margin: 50px auto;}
.catalog .catalog-inner{display: flex;justify-content: center;margin: 15px auto;}
.catalog .catalog-inner img{width: 100px;margin-right: 15px;}
.catalog .catalog-inner p{font-size: 1.2rem;font-weight: bold;}
.catalog .btn-catalog{text-align: center;}
.catalog .btn-catalog a{display: inline-block;padding: 10px 100px;background: #3B3B3B;border:1px solid #013461;color: #fff;border:1px solid;font-size: 1.2rem;}
.catalog .btn-catalog a:hover{background-color:#bbbbbb;color: #3B3B3B;transition: 0.5s;}

#sec1{background: #E3DBC9;padding: 100px 0;text-align: center;}
#sec1 .logo{margin: 30px auto;}
#sec1 .logo img{width: 200px;}
#sec1 .contents h2{border-bottom:1px solid;}

#kanie-camp{margin: 100px auto;text-align: center;}

#sec2{margin: 100px auto;}
#sec2 .box1{align-items:center;position: relative;z-index: 2;}
#sec2 .box1 .image{margin-left: calc(50% - 48vw);width: 48vw;height: 600px;}
#sec2 .box1 .text{}
#sec2 .box2{margin: 100px auto;text-align: center;position: relative;}
#sec2 .box2 h2{position: relative;z-index: 2;}
#sec2 .box2 .box-bg{display: block;content: "";position: absolute;top:-200px;left: -100px;width: 100vw;height: calc(100% + 400px);background: #F5F4F2;z-index: 1;}
#sec2 .box3{margin: 100px auto;position: relative;z-index: 2;}
#sec2 .box3 .image{width: 50%;}
#sec2 .box4{align-items:center;flex-direction: row-reverse;}
#sec2 .box4 .image{margin-right: calc(50% - 48vw);width: 48vw;height: 600px;}
#sec2 .box5{position: relative;margin: 100px auto;}
#sec2 .box5 .flexbox{position: relative;z-index: 2;justify-content: space-between;align-items: flex-start;}
#sec2 .box5 .flexbox .image1{width: 32%;}
#sec2 .box5 .flexbox .image2{width: 32%;padding-top: 20%;}
#sec2 .box5 .flexbox .image3{width: 32%;padding-top: 40%;}
#sec2 .box5 .box-bg{display: block;content: "";position: absolute;top:5%;right: -100px;width: 100vw;height: 90%;background: #F5F4F2;z-index: 1;}
#sec2 .box5 .tegaki{display: block;content: "";position: absolute;bottom:0;left: 0;width: 30%;z-index: 3;}

#information{padding: 100px 0;background: #F5F4F2;}

#sec3{margin: 100px auto;}
#sec3 .box1{align-items:center;position: relative;z-index: 2;}
#sec3 .box1 .image{margin-left: calc(50% - 48vw);width: 48vw;height: 600px;}
#sec3 .box1 .text{}
#sec3 .box2{margin: 100px auto;justify-content: space-between;}
#sec3 .box2 .image{}

#sec4 .image{width: 50%;}

#aikoumuten{padding: 100px 0;background: #C6BFB2;color: #fff;text-align: center;}
#aikoumuten h2{margin: 30px auto;font-size: 2.5rem;}
#aikoumuten h3{margin: 30px auto;font-size: 1.8rem;}
#aikoumuten .aikoumuten-img{text-align: center;}
#aikoumuten .aikoumuten-img img{width: 500px;}
#aikoumuten .listbox{}
#aikoumuten .listbox h4{font-size: 1.3rem;}
#aikoumuten .listbox h4 span{padding: 5px 10px;border-bottom: 1px solid;}
#aikoumuten .listbox ul{margin:30px auto;display: flex;justify-content: space-around;flex-wrap: wrap;}
#aikoumuten .listbox li{font-size: 1.1rem;list-style: none;width: 350px;margin: 10px auto;}
#aikoumuten .listbox li a{width: 100%;padding: 10px 0;color: #fff;}
#aikoumuten .listbox li.btn-basic a:after{background: url(../img/btn-parts-w.svg)no-repeat;background-size: 100%;background-position: center center;}
#aikoumuten .listbox ul.taisei{justify-content: center;}
#aikoumuten .listbox ul.taisei li{width: 450px;margin: 10px 15px;}

#nees{background: #F5F4F2;text-align: center;padding: 50px 0;}
#nees img{max-width: 100%;}
#nees .reserve-btn a{border:2px solid #fff;}

#plan{margin: 100px auto;}
#plan h2{max-width: 900px;margin: 0 auto;text-align: center;}
#plan p{text-align: center;}
#plan .plan-list{display: flex;flex-wrap: wrap;}
#plan .plan-list li{width: 46%;padding: 0 2%;margin: 15px auto;list-style: none;}
#plan .plan-list li img{width: 100%;}


/*下層ページ*/
#inline-form{padding-top: 30px;}


/*tablet*/
@media (min-width:431px) and (max-width:960px){
/*共通設定*/
.contents{
	width: 90%;
	margin: 0 5% 50px 5%;
}

.container {
	width: 100%;
	overflow: hidden;
}

}

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

h1{
	text-align: center;
}



p{
}

.pc-block{
	display: none;
}

.sp-block{
	display: block;
}


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

.container p{}


/* Header */
header {height: 60px;}
.head_contents	{width: 100%;margin: 0;}
.head_logo img{height: 40px;margin-left: 10px;margin-top: 10px;}
#head_menu_2	{height: 60px;margin-right: 0;}
#head_menu_2 li a{font-size:0.9rem;}
#head_menu_2 li.head-reserve a:after{width: 20px;height: 20px;background-size: 100%;top:-10px;left: -20px;}

/*footer設定*/
footer{}

/*予約ボタン*/
#mobile-reserve{display: flex;justify-content: space-around;position: fixed;bottom: 15px;text-align: center;width: 96%;left: 0;right: 0;margin: auto;}
#mobile-reserve .reserve-btn{width: 48%;padding: 2px;}
#mobile-reserve .reserve-btn a{background: #013461;color: #fff;display: inline-block;width: 100%;padding: 10px 0;border-radius: 3px;box-shadow: 1px 1px 3px #777;border:1px solid #fff;font-size: 0.9rem;}
#mobile-reserve .reserve-btn a p{}


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

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

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

.contents h3{font-size:1.2rem;}
.contents h4{font-size:1.1rem;}

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

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

.flexbox{display: flex;justify-content:flex-start;flex-direction: column;align-items: center;}
.flexbox .image{width: 98%;margin: auto 1%;}
.flexbox .text{width: 98%;margin: auto 1%;}

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

/*2連リンクボタン*/
.bnr-links{display: flex;justify-content: center;margin: 30px auto;flex-wrap: wrap;}
.bnr-links a{display: inline-block;margin: 15px;}
.bnr-links a img{width: 100%;}
.bnr-links a:hover{opacity: 0.9;}

#sec1{padding: 50px 0;}
#sec1 .logo{margin: 30px auto;}
#sec1 .logo img{width: 150px;}
#sec1 p{text-align: left;}

#kanie-camp{margin: 50px auto;}

#sec2{margin: 50px auto;}
#sec2 .box1{margin: 50px auto;}
#sec2 .box1 .image{margin:30px calc(50% - 50vw);width: 100vw;height: 300px;}
#sec2 .box1 .text{margin: 30px auto;}
#sec2 .box2{margin: 50px auto;}
#sec2 .box2 .box-bg{top:-50px;left: -50px;width: 100vw;height: calc(100% + 150px);}
#sec2 .box3{margin: 50px auto;}
#sec2 .box3 .image{width: 90%;height: 150px;}
#sec2 .box4{flex-direction:column;}
#sec2 .box4 .image{margin:30px calc(50% - 50vw);width: 100vw;height: 300px;}
#sec2 .box5{margin: 50px auto;}
#sec2 .box5 .flexbox{display: block;}
#sec2 .box5 .flexbox .image1{width: 48%;margin-left: 52%;}
#sec2 .box5 .flexbox .image2{width: 48%;padding-top: 0;margin-top: -50px;}
#sec2 .box5 .flexbox .image3{width: 48%;margin-left: 52%;padding-top: 0;margin-top: -50px;padding-bottom: 50px;}
#sec2 .box5 .box-bg{top:5%;right: -100px;width: 100vw;height: 90%;}
#sec2 .box5 .tegaki{width: 45%;}

#information{padding: 50px 0;}

#sec3{margin: 50px auto;}
#sec3 .box1{}
#sec3 .box1 .image{margin:30px calc(50% - 50vw);width: 100vw;height: 300px;}
#sec3 .box1 .text{}
#sec3 .box2{margin: 50px auto;}
#sec3 .box2 .image{width: 80%;height: 250px;}

#sec4 .image{width: 100vw;margin:0 calc(50% - 50vw);padding: 0;}
#sec4 .image img{vertical-align: middle;}

#aikoumuten{padding: 50px 0;}
#aikoumuten h2{margin: 30px auto;font-size: 1.5rem;}
#aikoumuten h3{margin: 30px auto;font-size: 1.2rem;}
#aikoumuten .listbox{}
#aikoumuten .listbox h4{font-size: 1.1rem;}
#aikoumuten .listbox ul{margin:30px auto;}
#aikoumuten .listbox li{font-size: 1rem;width: 280px;margin: 10px auto;}
#aikoumuten .listbox li a{width: 100%;padding: 10px 0;}
#aikoumuten .listbox ul.taisei li{width: 280px;margin: 10px auto;}

#plan{margin: 50px auto;}
#plan .plan-list{display: flex;flex-wrap: wrap;}
#plan .plan-list li{width: 96%;padding: 0 2%;margin: 15px auto;list-style: none;}
#plan .plan-list li img{width: 100%;}


/*下層ページ*/


/* pagetop button */
#pageTop {position: fixed;bottom: 100px;right: 20px;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: none;
    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;}

@media (max-width:960px){
 #head_menu {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -110vh;
        background: rgba(255,255,255,0.8);
        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;
    }
    #head_menu ul {
      display: block;
      margin:100px 5% 0 5%;
    }
    #head_menu ul li {
      height: auto;
      margin: 5px auto;
    }
    #head_menu ul li a,
    #header.fixed #head_menu ul li a {
      padding: 15px 10px;
    }
    #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 #head_menu {
        /* #global-nav top + #mobile-head height */
        -moz-transform: translateY(110vh);
        -webkit-transform: translateY(110vh);
        transform: translateY(110vh);
    }

}

/*tablet*/
@media (min-width:431px) and (max-width:960px){
  #firstview{margin: 50px 3%;}

  #head_menu_2 li a{font-size:0.9rem;}

  /*来場予約セクション*/
  .sec-reserve .contents{padding: 30px 0;}

  #modelhouse .flexbox{flex-direction: column;}
  #modelhouse .flexbox .text{width: 98%;margin-bottom: 50px;}

  #aikoumuten .flexbox{margin: 50px 0;}
  #aikoumuten .flexbox .maintext h3{font-size: 1.5rem;}
  #aikoumuten .flexbox .listbox ul{margin:30px 0;}
  #aikoumuten .flexbox .listbox li{font-size: 1rem;padding: 10px 0 10px 5px;border-left: 3px solid #3B3B3B;margin: 10px 0;}
  #aikoumuten .flexbox .listbox .shiyou li{width: 46%;}
}

/*モーダルウィンドウ設定*/
/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after,
.modaal-close:before{
	background:#ccc;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}

/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title{
	font-size:1.2rem;
	text-align: center;
	margin: 0 0 20px 0;
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
	padding:0;
}

.modaal-gallery-prev{bottom: -60px!important;}
.modaal-gallery-next{bottom: -60px!important;}

/*202502追加*/
#firstview-cp{position: relative;}
#firstview-cp img{width: 100%;vertical-align: middle;}

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

@media (max-width: 431px) {
#fixed-bnr{position: fixed;bottom:60px;right: 5px;}
#fixed-bnr img{max-width: 100%;width: 130px;}
}