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

　●　BABY＆KIDSクラス
　●　クラス紹介

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


.main_p04 .anchorArea{ margin-bottom: 20px;}

/*========================================
　●　BABY＆KIDSクラス
========================================*/
.sec-babykids{ margin-bottom: 72px;}

.babykids--text01{
 margin-bottom: 48px;
 line-height: 1.8;
 text-align: center;
 text-shadow:
   rgb(255,255,255,1.0) 1px 1px 3px, rgb(255,255,255,1.0) -1px 1px 3px,
   rgb(255,255,255,1.0) 1px -1px 3px,rgb(255,255,255,1.0) -1px -1px 3px;
}

.babykids--text02{
 padding-bottom: 12px;
 line-height: 1.8;
 text-align: center;
}

.aboutPLS{
 background: var(--main-cream);
 border-radius: 8px;
}

.aboutPLS figcaption{
 margin-bottom: 16px;
 padding-top: 16px;
 padding-bottom: 16px;
 color: #c63ea6;
 font-size: 18px;
 text-align: center;
 border-bottom: 1px solid #c63ea6;
}

.aboutPLS figcaption + p > img{
 width: 100%;
 max-width: 124px;
 line-height: 1;
}

.aboutPLS p{
 padding-bottom: 16px;
 color: #664e1a;
 line-height: 1.8;
 text-align: center;
}

/*---------- 改行処理 */
.babykids--jh .u-br01{}
.aboutPLS p br.u-br0101{}
.aboutPLS p br.u-br0201{}

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

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

/*============================== □ max-width xxx */
@media screen and (max-width: 675px){
/*---------- 改行処理 */
.babykids--jh .u-br01{ display: none;}
.aboutPLS p br.u-br0101{ display: none;}
.aboutPLS p br.u-br0201{ display: none;}

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

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){
.babykids--text01,
.babykids--text02{ text-align: left;}

.aboutPLS p{ text-align: left;}

.aboutPLS figcaption + p{ text-align: center;}

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


/*========================================
　●　クラス紹介
========================================*/
.sec-classArea{}

.classArea--text01{
 margin-bottom: 40px;
 line-height: 1.8;
 text-align: center;
}

.classList{
 display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

/*------------------------------ 共通設定 */
.class{
 width: 32%;
 max-width: 388px;
 min-height: 362px;
 margin-bottom: 40px;
 padding: 0.5em;
 border-width: 2px;
 border-style: solid;
 border-radius: 8px;
}

.class figcaption{
 margin-bottom: 8px;
 padding-bottom: 8px;
 font-size: 26px;
 line-height: 1.3;
 border-bottom-width: 1px;
 border-bottom-style: solid;
}

.class p{ line-height: 1.8;}

.classGaiyo{
 padding-bottom: 8px;
 color: var(--main-orange);
}

.class .u-bnrgroup{
 margin-top: auto;
 padding-top: 12px;
}

.class a.u-banner{
 display: inline-block;
 padding-bottom: 4px;
 transition: all 0.3s ease-out;
}
.class a.u-banner:hover{ opacity: 0.6;}

.class a.u-banner img{ width: 100%;}


/*------------------------------ 個別設定 */
.classList .class:nth-of-type(4n + 1){
 background: url("../images/bgdeco/deco_star02_pink.png") no-repeat 98% 98%,rgba(255,255,255,0.96);
 border-color: #ff6db3;
}

.classList .class:nth-of-type(4n + 1) figcaption{
 color: #ff6db3;
 border-color: #ff6db3;
}


.classList .class:nth-of-type(4n + 2){
 background: url("../images/bgdeco/deco_star02_skyblue.png") no-repeat 98% 98%,rgba(255,255,255,0.96);
 border-color: var(--main-green);
}

.classList .class:nth-of-type(4n + 2) figcaption{
 color: var(--main-green);
 border-color: var(--main-green);
}


.classList .class:nth-of-type(4n + 3){
 background: url("../images/bgdeco/deco_star02.png") no-repeat 98% 98%,rgba(255,255,255,0.96);
 border-color: var(--main-blue);
}

.classList .class:nth-of-type(4n + 3) figcaption{
 color: var(--main-blue);
 border-color: var(--main-blue);
}


.classList .class:nth-of-type(4n){
 background: url("../images/bgdeco/deco_star02_lime.png") no-repeat 98% 98%,rgba(255,255,255,0.96);
 border-color: var(--main-yellow);
}

.classList .class:nth-of-type(4n) figcaption{
 color: #664e1a;
 border-color: var(--main-yellow);
}

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

/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){
/*------------------------------ 共通設定 */
.class{
 display: flex;
  flex-direction: column;
 width: 48%;
 max-width: 370px;
}

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

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){
.classArea--text01{ text-align: left;}

/*------------------------------ 共通設定 */
.class{ width: 100%; max-width: 420px;}

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