/*========================================
フッターやプラン等の骨組み系
サイトによって詳細の定義が大きく違う系のパーツ
サイト固有の設定

　●　トップ動画・ヘッダー画像
　●　ページヘッダー・タイトルエリア（下層）
　●　h要素・background
　●　フッタープランエリア（p05のプランも）
　●　フッターエリア（＆p01のMAP）
　●　おすすめプラン：補足
　●　ページ間共通利用体裁

========================================*/


/*========================================
　●　トップ動画・ヘッダー画像
========================================*/
.topimage{
 width; 100%;
 line-height: 0;
}
.topimage video{ width: 100%;}

/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){


}/*----- media -----*/

/*========================================
　●　メイン背景設定・ページヘッダー＆タイトル（下層）
========================================*/
/*------------------------------ 背景設定 */
.bg01__index{
 padding-bottom: 64px;
 background:
  url("../images/bg/bg01_top.png") repeat-x center top,
  url("../images/bg/bg01.jpg") repeat center top;
}

.bg01{
 padding-top: 40px;
 padding-bottom: 120px;
 background:
  url("../images/bg/bg_fuji01.png") no-repeat center top / auto,
  url("../images/bg/bg01_top.png") repeat-x center top,
  url("../images/bg/bg01_bottom.png") repeat-x center bottom,
  url("../images/bg/bg01.jpg") repeat center top;
}

/*------------------------------ 下層ページヘッダー＆タイトル */
.topimage_sub{
 width: 100%;
}

.topimage_sub--bg{
 display: block;
 width: 100%;
 height: 420px;
}

.pagetitle{
 width: 100%;
 height: 80px;
 margin: 0 0 0px 0;
 padding: 0px 0 0 0;
 color: #fff;

 text-align: center;
 background: #38211a;
}

.pagetitle > span.en{
 display: block;
 padding-top: 10px;
 color: #b686db;
 font-family: 'Caveat', cursive;
 font-size: 32px;
 opacity: 0.5;
 text-align: center;
}

.pagetitle h2{
 margin-top: -10px;
 font-size: 23px;
}

/*----------*/
.p02 .topimage_sub--bg{ background: url("../images/page/pageimage_p02.jpg") no-repeat center center / cover;}
.p03 .topimage_sub--bg{ background: url("../images/page/pageimage_p03.jpg") no-repeat center center / cover;}
.p04 .topimage_sub--bg{ background: url("../images/page/pageimage_p04.jpg") no-repeat center center / cover;}
.p05 .topimage_sub--bg{ background: url("../images/page/pageimage_p05.jpg") no-repeat center center / cover;}
.p06 .topimage_sub--bg{ background: url("../images/page/pageimage_p06.jpg") no-repeat center center / cover;}

/*============================== □ max-width 1600 */
@media screen and (max-width: 1600px){
.topimage_sub--bg{ background-size: auto;}

}/*----- media -----*/

/*============================== ■ max-width 1087 */
@media screen and (max-width: 1087px){
.bg01{
 padding-top: 40px;
 padding-bottom: 60px;
 background:
  url("../images/bg/bg_fuji01.png") no-repeat center top / 102%,
  url("../images/bg/bg01_top.png") repeat-x center top,
  url("../images/bg/bg01_bottom.png") repeat-x center bottom,
  url("../images/bg/bg01.jpg") repeat center top;
}


.topimage_sub--bg{ height: 300px;}


}/*----- media -----*/


/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){
.topimage_sub--bg{ height: 200px;}

}/*----- media -----*/

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){
.bg01{
 padding-top: 40px;
 padding-bottom: 60px;
 background:
  url("../images/bg/bg01_top.png") repeat-x center top,
  url("../images/bg/bg01_bottom.png") repeat-x center bottom,
  url("../images/bg/bg01.jpg") repeat center top;
}

.p02 .topimage_sub--bg{ background: url("../images/page/pageimage_p02.jpg") no-repeat -47px center / auto 300px;}
.p03 .topimage_sub--bg{ background: url("../images/page/pageimage_p03.jpg") no-repeat -47px center / auto 300px;}
.p04 .topimage_sub--bg{ background: url("../images/page/pageimage_p04.jpg") no-repeat left center / cover;}

.p06 .topimage_sub--bg{ background: url("../images/page/pageimage_p06.jpg") no-repeat 15% center / cover;}
}/*----- media -----*/


/*========================================
　●　h要素
========================================*/
.h_type01{
 margin-bottom: 20px;
 font-size: 28px;
 line-height: 1.5;
 text-align: center;
}

.h_type01 .en{
 display: block;
 color: #47345e;
 font-family: 'Caveat', cursive;
 font-size: 24px;
}

.h_type02{
 margin-bottom: 8px;
 padding-bottom: 8px;
 font-size: 24px;
 line-height: 1.5;
 text-align: center;
 border-bottom: 1px solid #47345e;
}

/*============================== ■ max-width 1087 */
@media screen and (max-width: 1087px){}/*----- media -----*/

/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){}/*----- media -----*/

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){}/*----- media -----*/



/*========================================
　●　フッタープランエリア（p05のプランも）
========================================*/
.footerplanArea{
 width: 100%;
 height: 420px;
 line-height: 0;
 background: url("../images/bg/bg02.png") repeat center top / auto, #604475;
}

.footerplan{
 display: flex;
  align-items: center;
  justify-content: flex-start;
 width: 100%;
 max-width: 1280px;
 height: 100%;
 margin: 0 auto 0 auto;
 padding: 0 61px;
 background: url("../images/parts/planbnr02_bg.jpg") no-repeat center top / auto;
}

.footerplanMain{
 width: 100%;
 max-width: 468px;
 padding-bottom: 33px;
 line-height: 1;
 text-align: center;
 background: rgba(30,17,13,0.75);
}

.footerplanMain >img{ width: 100%;}

.footerplanMain a{
 display: flex;
  align-items: center;
  justify-content: center;
 width: 64%;
 max-width: 300px;
 height: 64px;
 margin: 0 auto;
 font-size: 22px;
 text-decoration: none;
 transition: all 0.3s ease-out;
}

.footerplanMain a:link   { color: #fff;}
.footerplanMain a:visited{ color: #fff;}
.footerplanMain a:hover  { color: #fff;}

/*------------------------------ p05プランのバナー */
.p0x_plan{
 display: flex;
  align-items: center;
  justify-content: center;
 width: 100%;
 max-width: 750px;
 height: 100%;
 margin: 0 auto 0 auto;
 background: url("../images/parts/planbnr03_bg.jpg") no-repeat left top / auto;
}

.p0x_planMain{
 width: 100%;
 max-width: 468px;
 padding-bottom: 33px;
 line-height: 0;
 text-align: center;
 background: rgba(30,17,13,0.75);
}

.p0x_planMain >img{ width: 100%;}

.p0x_planMain a{
 display: flex;
  align-items: center;
  justify-content: center;
 width: 64%;
 max-width: 300px;
 height: 64px;
 margin: 0 auto;
 font-size: 22px;
 text-decoration: none;
 transition: all 0.3s ease-out;
}

.p0x_planMain a:link   { color: #fff;}
.p0x_planMain a:visited{ color: #fff;}
.p0x_planMain a:hover  { color: #fff;}


/*============================== ■ max-width 1087 */
@media screen and (max-width: 1087px){
.footerplan{
 display: flex;
  align-items: center;
  justify-content: center;
 padding: 0 0px;
}

}/*----- media -----*/

/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){}/*----- media -----*/

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){
.footerplanArea{ height: auto;}

.footerplanMain a{ font-size: 19px;}

.p0x_planMain a{ font-size: 19px;}

}/*----- media -----*/

/*========================================
　●　フッターエリア（＆p01のMAP）
========================================*/
/*------------------------------ footerNav */
.gmap_p01{
 width: 100%;
 height: 352px;
 background: #fff;
}

/*------------------------------ footer */
footer{
 width: 100%;
 background: #38211a;
}

/*------------------------------ footerNav */
ul.footerNav{
 display: flex;
  flex-wrap: wrap;
  justify-content: center;
 padding-top: 6px;
 padding-bottom: 34px;
 font-size: 17px;
 line-height: 2;
}

ul.footerNav li{
 padding: 0 1em;
 list-style: none;
}

ul.footerNav li a{
 text-decoration: none;
 transition: all 0.3s ease-out;
}

ul.footerNav li a:link   { color: #d4c6bb;}
ul.footerNav li a:visited{ color: #d4c6bb;}
ul.footerNav li a:hover  { color: #ffffff;}

/*------------------------------ footerMain */
.footerMain{
 color: #fff;
}

.yadoinfo{
 display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: center;
 font-size: 16px;
}

.yadoinfoSideL,
.yadoinfoSideR{
 width: 100%;
 max-width:285px;
 margin-bottom: 23px;
}

.yadoinfoSideL{ padding-bottom: 4px;}

.yadoinfo--logo{
 padding-bottom: 12px;
 text-align: center;
}
.yadoinfo--logo > span{
 display: block;
 padding-bottom: 16px;
}

.yadoinfo address{
 font-style: normal;
 line-height: 1.5;
 text-align: center;
}

.yadoinfo span.tel{
 display: inline-block;
 font-size: 22px;
 line-height: 16px;
}

.yadoinfoSideR p{
 padding: 0 27px;
 line-height: 2;
}

/*------------------------------ coyright */
.footerCopyright{
 width: 100%;
 padding: 0px 0 9px 0;
 color: #d4c6bb;
 font-size: 15px;
 line-height: 1;
 text-align: center;
}

.footerCopyright img{ vertical-align: middle; padding-right: 1.0em;}


/*============================== ■ max-width 1087 */
@media screen and (max-width: 1087px){}/*----- media -----*/

/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){
/*------------------------------ footerNav */
ul.footerNav{
 display: flex;
  flex-direction: column;
  justify-content: center;
 width: 100%;
 max-width: 650px;
 margin: 0 auto;
 line-height: 1;
}

ul.footerNav li{
 width: 95%;
 margin: 0 auto;
 font-size: 18px;
 list-style: none;
 text-align: center;
 border-bottom: 1px dotted #d4c6bb;
}

ul.footerNav li a{
 display: block;
 width: 100%;
 height: 100%;
 padding: 12px 0;
}

}/*----- media -----*/

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){}/*----- media -----*/

/*========================================
　●　おすすめプラン：補足
========================================*/
.osusume h2,
.osusume h3{ margin-bottom: 24px;}


/*========================================
　●　ページ間共通利用体裁
========================================*/
.baseStyle01{
 display: flex;
  align-items: center;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: flex-start;
 width: 100%;
 max-width: 1120px;
 margin-bottom: 24px;
}

.baseStyle01Main{
 width: calc(100% - 520px);
 padding: 0 1.0em;
}

.baseStyle01 figure{ width: 520px;}
.baseStyle01 figure img{ width: 100%;}


.baseStyle--h{ text-align: left;}
.baseStyle01Main{ line-height: 1.8;}

/*============================== ■ max-width 1087 */
@media screen and (max-width: 1087px){
.baseStyle01{
 display: flex;
  align-items: flex-start;
  flex-direction: column;
 width: 100%;
 max-width: 750px;
}

.baseStyle01Main{
 width: 100%;
 margin-bottom: 16px;
 padding: 0 0em;
}

.baseStyle01 figure{ width: 100%;}

.baseStyle--h{ margin-bottom: 8px;}

/*----- media -----*/

/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){


}/*----- media -----*/

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){

}/*----- media -----*/

