/*========================================

　●　サイト基本定義
　●　横幅設定
　●　h要素

　●　TOP動画
　●　下層ヘッダーエリア＋ページアンカー

　●　フッターエリア（＋フッタープラン）
　●　おすすめプラン補足

　●　下層共通装飾ブロック01
　●　下層共通装飾ブロック02
　●　背景装飾

========================================*/


/*========================================
　●　サイト基本定義
========================================*/
body{
 background: #dfe7b2;
}

main{
 display: block;
 margin-bottom: 120px;
 font-size: 16px;
}

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){
main{
 margin-bottom: 60px;
 font-size: 16px;
}
}/*----- media -----*/

/*========================================
　●　横幅設定
========================================*/
.c-mainwidth1180{
 width: 100%;
 max-width: 1180px;
 margin: 0 auto;
}

.c-mainwidth1180__space{
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
 padding-right: 10px;
 padding-left: 10px;
}

.c-mainwidth1280{
 width: 100%;
 max-width: 1280px;
 margin: 0 auto;
}

.c-mainwidth1280__space{
 width: 100%;
 max-width: 1300px;
 margin: 0 auto;
 padding-right: 10px;
 padding-left: 10px;
}

.c-mainwidth1400{
 width: 100%;
 max-width: 1400px;
 margin: 0 auto;
}

.c-mainwidth1400__space{
 width: 100%;
 max-width: 1420px;
 margin: 0 auto;
 padding-right: 10px;
 padding-left: 10px;
}

.c-mainwidth1600{
 width: 100%;
 max-width: 1600px;
 margin: 0 auto;
}

.c-mainwidth1600__space{
 width: 100%;
 max-width: 1620px;
 margin: 0 auto;
 padding-right: 10px;
 padding-left: 10px;
}

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){
.c-mainwidth1180__space,
.c-mainwidth1280__space,
.c-mainwidth1600__space{
 width: 100%;
 max-width: 1180px;
 margin: 0 auto;
}
}/*----- media -----*/

/*========================================
　●　h要素
========================================*/
.c-h_type01{
 display: flex;
  align-items: center;
  justify-content: center;
 width: 100%;
 max-width: 300px;
 margin: 0 auto 28px auto;
 background: url("../images/page/h_type01.png") no-repeat center center;
}

/*------------------------------ type02 */
.c-h_type02{
 width: 100%;
 max-width: 500px;
 margin: 0 auto 28px auto;
 padding-bottom: 24px;
 font-size: 19px;
 text-align: center;
 background: url("../images/page/h_type02.png") no-repeat center bottom;
 background-size: contain;
}


/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){
/*------------------------------ type02 */
.c-h_type02{ background-size: 93%;}

}/*----- media -----*/
/*========================================
　●　TOP動画
========================================*/
.topimage{
 width: 100%;
 max-width: 1600px;
 margin: 0 auto 0 auto;
 line-height: 0;
}

.topimage video{ width: 100%;}

/*========================================
　●　下層ヘッダーエリア＋ページアンカー
========================================*/
.pageheaderArea{}

.pageheader{ margin-bottom: 36px; text-align: center;}
.pageheader--image{ width: 100%;}

.pageheader h2{
 width: 100%;
 background: url("../images/page/bg_line.png") repeat-x center 8px;
}

.pageheader h2 img{
 width: 100%;
 max-width: 304px;
 margin: -90px auto 0 auto;
}

/*------------------------------ ページアンカー */
.anchor{
 display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
 max-width: 960px;
 margin-bottom: 45px;
 margin-right: auto;
 margin-left: auto;
 padding: 0px;
 height: 100%;
 min-height: 136px;
 background:
  url("../images/deco/deco_tree02.png") no-repeat left center,
  url("../images/deco/deco_tree02r.png") no-repeat right center;
 border-radius: 10px;
}

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop,
.anchor{
 height: 136px;
 min-height: auto;
}
}/*--- iehack ---*/

.anchor ul{
 display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.anchor li{
 padding: 10px 10px;
 font-size: 1.8rem;
 list-style: none;
 background: #deded3;
	border: #000 1px solid; margin:0 2px; border-radius: 6px;
}

.anchor li a{
 text-decoration: none;
}

.anchor li a:link   { color: #37291d;}
.anchor li a:visited{ color: #37291d;}
.anchor li a:hover  { color: #e29a3b;}

/*============================== ■ max-width 1087 */
@media screen and (max-width: 1087px){
.pageheader h2 img{
 max-width: calc(304px * 0.8);
 margin: -60px auto 0 auto;
}

}/*----- media -----*/

/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){
.pageheader h2 img{
 max-width: calc(304px * 0.6);
 margin: -40px auto 0 auto;
}
}/*----- media -----*/

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){

/*------------------------------ ページアンカー */
.anchor{
 padding: 0px 0px;
}

.anchor ul{
 display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
 width: 100%;
 padding: 0px;
 background: rgba(254,254,241,0.95);
}

.anchor li{
	width:90%;
 padding: 0px 0px;
	margin:0 auto 5px auto;
 font-size: 1.8rem;
 list-style: none;
 text-align: center;
 border: none;
}

.anchor li:last-of-type{ border-bottom: none;}

.anchor li a{
 display: block;
 width: 100%;
 padding: 15px 10px;
 text-decoration: none;
}

}/*----- media -----*/


/*========================================
　●　フッターエリア（＋フッタープラン）
========================================*/
/*------------------------------ footerplan */
.footer_planArea{
 display: flex;
  align-items: center;
  justify-content: center;
 width: 100%;
 height: 390px;
 background: url("../images/parts/plan02_bg.jpg") repeat-x center top;
}

.footer_planArea img{ width: 100%; max-width: 800px;}

.footer_planArea a{ transition: all 0.3s ease-out;}
.footer_planArea a:hover{ opacity: 0.85; transform: scale(0.98);}

/*------------------------------ footer */
footer{
 width: 100%;
 color: #fffff8;
 font-size: 16px;
 line-height: 1;
 background: #37291d;
}

/*------------------------------ footerNav */
ul.footerNav{
 display: flex;
  flex-wrap: wrap;
  justify-content: center;
 padding-top: 9px;
 padding-bottom: 33px;
 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: #fefef1;}
ul.footerNav li a:visited{ color: #fefef1;}
ul.footerNav li a:hover  { color: #fefef1; opacity: 0.5;}

/*------------------------------ footerMain */
.footerMain{
 width: 100%;
 margin: 0 auto;
 line-height: 1;
 text-align: center;
}

.footer--logo{
 width: 187px;
 margin-right: auto;
 margin-left: auto;
 padding-bottom: 8px;
 text-align: center;
}

.footer--logo img{ width: 100%;}

footer address{
 margin-bottom: 12px;
 font-size: 1.6rem;
 font-style: normal;
 line-height: 2;
 text-align: center;
}

ul.footer--sns{
 display: flex;
  align-items: center;
  justify-content: center;
 padding-bottom: 10px;
}

ul.footer--sns li{ list-style: none;}
ul.footer--sns li:first-child{ padding: 0 15px 0 0;}
ul.footer--sns li:last-child{ padding: 0 0 0 15px;}

ul.footer--sns li a{ transition: all 0.3s ease-out;}
ul.footer--sns li a:hover{ opacity: 0.5;}

p.footer--info{
 padding-bottom: 18px;
 font-size: 1.6rem;
 line-height: 32px;
 text-align: center;
}

.footer--info span.tel{ font-size: 22px;}

/*------------------------------ coyright */
.footerCopyright{
 width: 100%;
 padding: 0px 0 22px 0;
 color: #fff;
 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){
/*------------------------------ footerplan */
.footer_planArea{
 height: auto;
 padding: 12px 0;
}
/*------------------------------ footer */
/*------------------------------ 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 #e7d7d4;
}

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{
 padding-top: 42px;
 background: #dfe7b2;
}

.osusume h2{
 padding-bottom: 28px;
 color: #37291d;
 font-size: 32px;
 text-align: center;
}

.osusume h2:first-letter{
 color: #e29a3b;
}


/*========================================
　●　下層共通装飾ブロック01
========================================*/
.decoblock01{
 display: flex;
  align-items: center;
  flex-wrap: wrap;
 background:
  url("../images/deco/deco_yama01.png") no-repeat left 0%,
  url("../images/deco/deco_flower01.png") no-repeat 98% 98%;
}

.decoblock01 h4{
 position: relative;
 margin: 0 0 20px 0;
 padding: 16px 4px 16px 102px;
 font-size: 22px;
 line-height: 1.3;
 text-align: left;
 background: #ecece1;
}

.decoblock01 h4 span.flower{
 position: absolute; left: 2px; top: -25px;
 width: 85px;
 height: 89px;
 background: url("../images/deco/deco_flower02.png");
}

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){
.decoblock01 h4{
 margin: 0 0 20px 0;
 padding: 16px 4px 16px 82px;
 font-size: 22px;
}

.decoblock01 h4 span.flower{
 position: absolute; left: 2px; top: -18px;
 width: 72px;
 height: 75px;
 background: url("../images/deco/deco_flower02.png");
 background-size: contain;
}

}/*----- media -----*/

/*========================================
　●　下層共通装飾ブロック02
========================================*/
.decoblock02{
 display: flex;
  align-items: center;
  flex-wrap: wrap;
 background:
  url("../images/deco/deco_tree01.png") no-repeat left 10%,
  url("../images/deco/deco_grass01.png") no-repeat 98% 90%;
}

/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){
.decoblock02{
 display: flex;
  align-items: center;
  flex-wrap: wrap;
 background: none;
}


}/*----- media -----*/

/*========================================
　●　背景装飾
========================================*/
.c-deco_bg00{
 background: url("../images/p01top/welcome_bg_top.png") no-repeat center center;
}

.c-deco_bg01{
 background: url("../images/deco/deco_bg01.png") no-repeat center 85%;
}

.c-deco_bg02{
 background: url("../images/deco/deco_bg02.png") no-repeat center 85%;
}


/*============================== ■ max-width 1087 */
@media screen and (max-width: 1087px){

.c-deco_bg01{
 background: url("../images/deco/deco_bg01_sp.png") no-repeat center 85%;
}

.c-deco_bg02{
 background: url("../images/deco/deco_bg02_sp.png") no-repeat center 85%;
}


}/*----- media -----*/