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

　●　ようこそエリア
　●　ピックアップ

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


/*========================================
　●　ようこそエリア
========================================*/
.welcomeArea{
 margin-top: 90px;
 background: url("../images/p01top/welcome_bg.png") no-repeat center top;
}

.welcome{
 min-height: 460px;
 padding-right: 10px;
 padding-left: 10px;
 text-align: center;
}

.welcome h2{
 padding-top: 12px;
 padding-bottom: 32px;
}
.welcome h2 img { width: 100%; max-width: 335px;}

.welcome p{
 color: #37291d;
 font-size: 19px;
 line-height: 42px;
}


.welcome p ruby{}

.welcome p rt{
 margin-bottom: -0.4em;
 transform: translateY(-0.4em);
}

/*============================== ■ max-width 1087 */
@media screen and (max-width: 1087px){
.welcomeArea{
 background:
  url("../images/p01top/welcome_bg_top.png") no-repeat center top,
  url("../images/p01top/welcome_bg_bottom.png") no-repeat center 85%;
 background-size: 140%;
}

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

/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){
.welcomeArea{
 margin-top: 20px;
 background-size: 160%;
}

.welcome p{ background: rgba(254,254,241,0.8);}

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

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){
.welcome{
 min-height: auto;
 margin-bottom: 32px;
}

.welcome p{
 text-align: left;
}
}/*----- media -----*/



/*========================================
　●　ピックアップ
========================================*/
/*------------------------------ 全体 */
.pickupWhole01{
 display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
 margin-bottoom: 7px;
}

.pickupWhole02{
 display: flex;
  flex-wrap: wrap;
  justify-content: center;
 margin-bottom: 90px;
}

.pickupWhole01 .pickupWrap:nth-of-type(2){ margin-top: 72px;}

/*------------------------------ 個別（共通） */
.pickupWrap{
 width: 100%;
 max-width: 480px;
 height: 100%;
 margin-right: 4px;
 margin-left: 4px;
}

.pickupWrap a{ transition: all 0.3s ease-out;}


.pickup{
 display: flex;
  align-items: center;
  justify-content: center;
 width: 100%;
 max-width: 480px;
 border-radius: 50%;
}

.pickup:before{
 display: block;
 content: "";
 padding-bottom: 100%;
}

.pickup h2{}
.pickup h2 img{ width: 100%; max-width: 420px;}

/*--------------- hover用関係 */
.pickup--hover{ opacity: 0;
 position: absolute; left: 0; top: 0;
 display: flex;
  align-items: center;
 width: 100%;
 height: 100%;
 padding-left: 20%;
 color: #fff;
 font-size: 16px;
 font-weight: bold;
 line-height: 2;
 background: rgba(33,33,33,0.8);
 transition: all 0.8s ease;
}

.pickup:hover .pickup--hover{ opacity: 1;}


/*--------------- more */
.pickup--more{
 position: absolute; right: 12px; bottom: 16px;
 transition: all 0.3s ease-out;
}

.pickup--more:hover{ opacity: 0.5;}

/*------------------------------ 個別（個別） */
.pickup01{ background: url("../images/p01top/pickup01_bg.jpg") no-repeat center top;}
.pickup02{ background: url("../images/p01top/pickup02_bg.jpg") no-repeat center top;}
.pickup03{ background: url("../images/p01top/pickup03_bg.jpg") no-repeat center top;}


.pickup01_deco01{ position: absolute; top: 0px; right: -66px; z-index: -1;}
.pickup01_deco02{ position: absolute; bottom: -87px; left: -34px; z-index: -1;}

.pickup02_deco01{ position: absolute; bottom: 72px; left: -126px; z-index: -1;}
.pickup02_deco02{ position: absolute; bottom: -144px; right: -60px; z-index: -1;}

.pickup03_deco01{ position: absolute; top: 124px; left: -209px; z-index: -1;}
.pickup03_deco02{ position: absolute; bottom: 46px; right: -155px; z-index: -1;}

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

.pickupWhole01{
 display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
 margin-bottoom: 7px;
}

.pickupWhole02{
 display: flex;
  flex-wrap: wrap;
  justify-content: center;
 margin-bottom: 90px;
}

.pickupWhole01 .pickupWrap:nth-of-type(1){ margin: 0 auto 15px 6%;}
.pickupWhole01 .pickupWrap:nth-of-type(2){ margin: -20px 6% 15px auto;}

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

/*============================== ■ max-width 960 */
@media screen and (max-width: 960px){
.pickupWhole01 .pickupWrap:nth-of-type(1){ margin: 0 auto 15px 6%;}
.pickupWhole01 .pickupWrap:nth-of-type(2){ margin: 0px 6% 15px auto;}
}/*----- media -----*/


/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){
/*------------------------------ 個別（共通） */
.pickupWhole01 .pickupWrap:nth-of-type(1){ margin: 0 auto 15px auto;}
.pickupWhole01 .pickupWrap:nth-of-type(2){ margin: 0px auto 15px auto;}

/*------------------------------ 個別（個別） */
.pickup02_deco02{ position: absolute; top: 0; bottom: auto; right: -60px;}

.pickup03_deco01{ position: absolute; top: 24px; left: -129px;}
.pickup03_deco02{ position: absolute; bottom: 46px; right: -75px;}


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

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){
/*------------------------------ 個別（個別） */
.pickup01_deco01{
 position: absolute; top: 0px; right: -32px; width: calc(142px * 0.8);}

.pickup01_deco02{
 position: absolute; bottom: -27px; left: -34px; width: calc(122px * 0.8);}

.pickup02_deco01{
 position: absolute; bottom: 0px; left: -14px; width: calc(134px * 0.8);}

.pickup02_deco02{
 position: absolute; top: 0; bottom: 0px; right: 0px; width: calc(111px * 0.8);}

.pickup03_deco01{
 position: absolute; top: auto; bottom: 2px; left: 0px; width: calc(175px * 0.8);}

.pickup03_deco02{
 position: absolute; top: 20px; bottom: auto; right: -8px; width: calc(119px * 0.8);}

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

/*============================== □ max-width 460 */
@media screen and (max-width: 460px){
/*--------------- hover用関係 */
.pickup--hover{
 padding-left: 0%;
 font-size: 16px;
 line-height: 2;
 text-align: center;
}
.pickup--hover p{
 width: 100%;
 padding: 0 3%;
}

/*--------------- more */
.pickup--more{
 position: absolute; right: 0px; bottom: 16px;
}
}/*----- media -----*/

/*============================== □ max-width 378 */
@media screen and (max-width: 378px){
.pickup03 .u-br{
 display: none;
}

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