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

　●　講師スタッフ紹介
　●　講師派遣

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


/*========================================
　●　講師スタッフ紹介
========================================*/
.sec-staffArea{ margin-bottom: 16px;}

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

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

.staffTitle{
  align-self: center;
 display: flex;
  align-items: center;
  flex-direction: column;
 width: calc(31.3% + 2.03%);
 margin-bottom: 40px;
}

.staffTitle img{
 width: 100%;
 max-width: 221px;
 margin-left: 24px;
}

/*------------------------------ 共通設定 */
.staff{
 display: flex;
  flex-direction: column;
 width: 48%;
 max-width: 612px;
 margin-bottom: 40px;
 padding: 0.5em 0.5em 1.5em 0.5em;
 border-width: 2px;
 border-style: solid;
 border-radius: 8px;
}

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

.staff p{ padding-bottom: 8px;  line-height: 1.8;}

.staff p.staffImage{
/* margin-top: auto;*/
 margin-bottom: 16px;
 padding-bottom: 0;
 line-height: 1;
 text-align: center;
}

.staff p.staffImage img{ width: 100%; max-width: 200px;}

/*------------------------------ 個別設定 */
.staffLayout01 .staff{
 width: 62.6%;
 max-width: 740px;
 background: url("../images/bgdeco/deco_star02.png") no-repeat 98% 2%,rgba(255,255,255,0.96);
 border-color: var(--main-orange);
}

.staffLayout01 .staff figcaption{
 color: var(--main-orange);
 border-color: var(--main-orange);
}

p.staffImage__will{
 display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-evenly;
 padding-bottom: 0;
 line-height: 1;
}

.staffImage__will img{
 width: auto;
 max-width: 48%;
 margin-bottom: 16px;
}

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

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


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

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


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

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


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

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

/*============================== ■ max-width 1087 */
@media screen and (max-width: 1087px){
.staffLayout01{
 display: flex;
  flex-direction: column;
  align-items: center;
}

.staffTitle{
 width: 100%;
 margin-bottom: 40px;
}

.staffTitle img{
 width: 100%;
 max-width: calc(221px * 0.8);
 margin-left: 24px;
}

/*------------------------------ 個別設定 */
.staffLayout01 .staff{ width: 98%; max-width: auto;}

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

/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){
/*------------------------------ 共通設定 */
.staff{ width: 100%; max-width: 612px;}

/*------------------------------ 個別設定 */
.staffLayout01 .staff{ width: 100%; max-width: 612px;}

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

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){
/*------------------------------ 共通設定 */
/*
.staff{ width: 100%; max-width: 420px;}
.staff p.staffImage.u-tate01{ padding-bottom: 0px;}
*/
/*------------------------------ 個別設定 */
.staffLayout01 .staff{
 width: 100%;
 max-width: 420px;
}

.staffImage__will{
 display: flex;
  flex-direction: column;
  justify-content: center;
}

.staffImage__will img{
 width: auto;
 max-width: 100%;
 margin-bottom: 16px;
}

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

/*========================================
　●　講師派遣
========================================*/
.koushi--text01{
 margin-bottom: 24px;
 line-height: 1.8;
 text-align: center;
}
.koushi--text02{
 margin-bottom: 40px;
 line-height: 1.8;
 text-align: center;
}

/*-----*/
.koushiTodokede{
 width: 100%;
 max-width: 304px;
 margin-bottom: 40px;
 margin-left: auto;
 margin-right: auto;
 padding: 16px 16px 18px 16px;
 color: #664e1a;
 background: var(--main-cream);
 border-radius: 8px;
}

.koushiTodokede figcaption{
 margin-bottom: 12px;
 text-align: center;
}

.koushiTodokede dl{
 display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
 line-height: 1.5;
}

.koushiTodokede dt{ width: 8em;}
.koushiTodokede dd{ width: fit-content; text-align: right;}

/*-----*/
.koushiList{
 width: 100%;
 max-width: 520px;
 margin-left: auto;
 margin-right: auto;
 padding: 16px 16px 18px 16px;
 border: 2px solid var(--main-yellow);
 border-radius: 8px;
}

.koushiList ul{
 display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.koushiList li{
 width: 49.5%;
 max-width: 12em;
 color: #664e1a;
 line-height: 2.2;
 list-style: none;
}

/*-----*/
.shucchou--bnrgroup{}
.shucchou--bnrgroup a{
 display: block;
 width: 100%;
 max-width: 688px;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 4px;
 transition: all 0.3s ease-out;
}
.shucchou--bnrgroup a:last-of-type{ margin-bottom: 0;}

.shucchou--bnrgroup a:hover{ opacity: 0.6;}
.shucchou--bnrgroup a img{ width: 100%;}

/*----- 改行処理 */
.sec-koushi br.u-br0101{}
.sec-koushi br.u-br0201{}
.sec-koushi br.u-br0301{}

/*-----*/
.bg_staff02{
 width: 100%;
 max-width: 840px;
 margin-bottom: 40px;
 margin-left: auto;
 margin-right: auto;
 background: url("../images/bgdeco/illust_staff02.png") no-repeat right bottom / calc(120px * 1.0);
}

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

/*============================== □ max-width xxx */
@media screen and (max-width: 960px){
.bg_staff02{
 padding-bottom: 240px;
 background: url("../images/bgdeco/illust_staff02.png") no-repeat center bottom / calc(120px * 1.0);
}
}/*----- media -----*/

/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){
/*----- 改行処理 */
.sec-koushi br.u-br0101{ display: none;}
.sec-koushi br.u-br0201{ display: none;}

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

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

/*-----*/
.koushiList{
 width: fit-content;
 max-width: 100%
}

.koushiList ul{
 display: block;
}

.koushiList li{ width: 100%;}

/*----- 改行処理 */
.sec-koushi br.u-br0301{ display: none;}

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