/*========================================
こすもすベースcss

　●　メイン骨組み
　●　共通定義
　●　h要素
　●　ページ内アンカー
　●　おススメコース・メニューへ（バナー,text）

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

/*========================================
　●　メイン骨組み
========================================*/
/*-------------------------------- 全体 */
.wholeWrap{
 display: flex;
  align-items: flex-start;
  justify-content: space-between;
 width: 100%;
 max-width: 840px;
 margin-left: auto;
 margin-right: auto;
 font-size: 16px;
}

/*-------------------------------- 左側：サイドバー骨組み（header部分は別） */
.sidebar{
 position: sticky; top: 0; left: 0;
 width: 100%;
 max-width: calc(228px + 3px);
 background: url("../images/parts/mainbg02.jpg") center center,var(--main-cream);
 border-bottom: 1px solid var(--main-pink);
 border-left: 3px solid var(--main-ac_pink);
 border-right: 1px solid var(--main-pink);
}

.sidebar .petitInfo{
 margin: 0 0 30px 0;
 padding: 10px 8px 5px 5px;
 font-size: 1.6rem;
 background: #fcfce8;
 border-top: 1px #633000 dotted;
 border-bottom: 1px #633000 dotted;
}

.sidebar .petitInfo--teikei{
 padding: 0 0.5em;
 font-size: 15px;
 line-height: 1.5;
}

/*-------------------------------- 右側：全ページ共通部分 */
.mainWrap{
 width: 100%;
 max-width: 560px;
 color: var(--main-textcolor1);
 background: #fff;
}

main{
 min-height: 1000px;
 border-top: 1px solid var(--main-pink);
 border-left: 1px solid var(--main-pink);
 border-right: 1px solid var(--main-pink);
}

main.pageMain{
 background: url(../images/parts/bgcosmos02.jpg) no-repeat 132% -10px scroll,#fff;
}

/*-------------------------------- フッター */
footer{
 width: 100%;
 color: var(--main-brown);
 padding-top: 16px;
 padding-bottom: 16px;
 padding-left: 8px;
 padding-right: 8px;
 text-align: center;
 background: #fde9eb;
 border: 1px solid var(--main-pink);
}

footer figure{
 margin-bottom: 8px;
 line-height: 1.5;
}

footer figure figcaption{
 margin-bottom: 4px;
}

footer address{ font-style: normal;}

footer .to_saloninfo{
 margin-bottom: 12px;
 line-height: 1.5;
}

footer .to_saloninfo a{
 display: block;
 margin-top: 4px;
 margin-bottom: 12px;
 transition: all 0.3s ease-out;
}

footer .to_saloninfo a:hover{ opacity: 0.6;}

footer .toriatsukai{ line-height: 1.5;}

footer .toriatsukai br.u-br01{ display: none;}


/*============================== ■ max-width 960 */
@media screen and (max-width: 960px){
/*-------------------------------- 全体 */
.wholeWrap{
 display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;

 width: 100%;
 max-width: 560px;
 margin-left: auto;
 margin-right: auto;
 font-size: 16px;
}


/*-------------------------------- 左側：サイドバー骨組み（header部分は別） */
.sidebar{
 position: static;
 width: 100%;
 max-width: 100%;
 background: none;
 border: none;
}

.sidebar .petitInfo{
 margin-bottom: 0;
 text-align: center;
 background: none;
 border: none;
}

/*-------------------------------- 右側：全ページ共通部分 */
.mainWrap{}

main{
 border: none;
 border-left: 1px solid var(--main-pink);
 border-right: 1px solid var(--main-pink);
}

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

/*============================== □ max-width 420 */
@media screen and (max-width: 420px){
footer .toriatsukai br.u-br01{ display: block;}

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

/*========================================
　●　共通定義
========================================*/
/*****

.c-pricekaitei{
 padding: 8px 8px 0px 8px;
 font-size: 1.6rem;
 font-weight: normal;
 line-height: 1.8;
 text-align: right;
}

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

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

/*========================================
　●　h要素
========================================*/
.h_type01{
 margin: 0 0 12px 0;
 padding: 16px 0 16px 8px;
 color:  var(--main-ac_pink);
 font-weight: normal;
 font-size: 20px;
 background: url("../images/parts/mainbg02.jpg") left center,#fcfce8;
 border-top: 1px solid var(--main-ac_pink);
 border-bottom: 1px solid var(--main-ac_pink);
 border-left: 6px solid var(--main-ac_pink);
}

/*-------------------------------- ページタイトル */
.pagetitle:before{
 display: block;
 height: 4px;
 width: 100%;
 content: "";
 border-top: 5px solid var(--main-pink);
 border-bottom: 1px solid #f9e450;
}

.pagetitle{
 color: #afa371;
 background: #fff;
 border-bottom: 1px solid var(--main-green);
}

.pagetitle h2{
 display: flex;
  align-items: center;
 height: calc(50px + 8px);
 padding-left: 84px;
 background: url("../images/parts/mark_cosmos01.png") no-repeat left 4px center / 68px;
}
.pagetitle--title01{
 padding-right: 15px;
 font-family: 'Bitter', serif;
 font-size: 28px;
}
.pagetitle--title02{ padding-top: 4px; font-size: 14px;}


.pageMainbg{
 background:url(../images/parts/bgcosmos02.jpg) no-repeat top -74px right -72px,#fff;
}

.h_type02{
 margin-bottom: 16px;
 padding: 0px 0 8px 0px;
 color: var(--main-textcolor1);
 font-size: 24px;
 font-weight: bold;
 line-height: 1.3;
 border-bottom: 3px dotted var(--main-textcolor1);
}

/*============================== ■ max-width 960 */
@media screen and (max-width: 960px){
/*-------------------------------- ページタイトル */
.pagetitle:before{
 display: block;
 height: 0px;
 width: 100%;
 margin: 0;
 padding: 0;
 content: "";
 border-top: none;
 border-bottom: 5px solid #f9e450;
}

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

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){
/*-------------------------------- ページタイトル */
.pagetitle h2{
 display: flex;
  align-items: flex-start;
  flex-direction: column;
 height: auto;
 padding-top: 12px;
 padding-bottom: 12px;
 padding-left: 84px;
}
.pagetitle--title01{
 padding-right: 0px;
 font-size: 28px;
}
.pagetitle--title02{}

.pageMainbg{
 background:url(../images/parts/bgcosmos02.jpg) no-repeat top -28px right -28px / 160px,#fff;
}

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

/*========================================
　●　ページ内アンカー
========================================*/
ul.anchor{
 display: flex;
  flex-wrap: wrap;
  justify-content: center;
 font-size: 16px;
 margin-bottom: 24px;
}

ul.anchor li{
 margin: 0.5em 0em;
 line-height: 1.5;
 list-style: none;
 border-right: 1px solid var(--main-textcolor1);
}

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

ul.anchor li a{ padding: 0 1em; text-underline-offset: 6px;}

ul.anchor li a:link   { color: var(--main-textcolor1);}
ul.anchor li a:visited{ color: var(--main-textcolor1);}
ul.anchor li a:hover  { color: var(--main-green);}

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

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

/*========================================
　●　おススメコース・メニューへ（バナー,text）
========================================*/
.to_course{
 width: 80%;
 margin-left: auto;
 margin-right: 0;
 line-height: 0;
 text-align: right;
}

.to_course img{ width: 100%;}

.to_course a{ transition: all 0.3s ease-out;}
.to_course a:hover{ opacity: 0.6;}


/*-------------------------------- テキスト関連 */
.buttonlink{}
.buttonlink a{
 display: block;
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 padding: 20px 5px;
 color: var(--main-brown);
 line-height: 1.3;
 text-align: center;
 text-decoration: none;
 border-radius: 10px;
 transition: all 0.3s ease-out;
}

.buttonlink a:link   { color: #633000;}
.buttonlink a:visited{ color: #633000;}
.buttonlink a:hover  { opacity: 0.6;}

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

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