/* =========================
ヒーロー
========================= */

.hero{
position:relative;
width:100%;
min-height:500px;
padding:120px 0;
overflow:hidden;
display:flex;
justify-content:center;
align-items:center;
margin-bottom: 30px;
}

/* =========================
写真
========================= */

.hero-photos{
position:absolute;
width:100%;
height:100%;
}

.photo{
position:absolute;
width:clamp(280px, 20vw, 320px);

border-radius:10%;
box-shadow:0 10px 20px rgba(0,0,0,0.2);

opacity:0;
transform:scale(.9);

animation:photoIn 2s forwards;
}

.p1{top:5%; left:35%; animation-delay:3.2s;}
.p2{top:13%; left:3%; animation-delay:3.7s;}
.p3{top:18%; right:0%; animation-delay:4.2s;}
.p4{bottom:10%; left:6%; animation-delay:4.7s;}
.p5{bottom:23%; right:5%; animation-delay:5.2s;}
.p6{bottom:5%; left:38%; animation-delay:5.7s; transform:translateX(-50%);}


@keyframes photoIn{
to{
opacity:1;
transform:scale(1);
}
}

/* =========================
人の輪
========================= */
.circle-wrap{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
transition:transform 1.2s ease;
}

.circle{
width:500px;

opacity:0;
transform:scale(.6) rotate(-180deg);

animation:
circleAppear 1.6s ease forwards,
circleRotate 50s linear infinite;

animation-delay:6.8s,8.4s;
}

@keyframes circleAppear{

0%{
opacity:0;
transform:scale(.6) rotate(-180deg);
}

100%{
opacity:1;
transform:scale(1) rotate(0deg);
}

}

/* 回転 */

@keyframes circleRotate{

from{
transform:rotate(0deg);
}

to{
transform:rotate(360deg);
}

}

/* スクロール拡大 */

.circle-wrap:hover{
transform:translate(-50%,-50%) scale(1.4);
}

/* =========================
コピー
========================= */

.copy{
position:absolute;
text-align:center;
z-index:10;
}

/* 白ぶち文字 */

.copy p{

/*font-size:clamp(22px,4vw,42px);*/
font-size:45px;
font-weight:bold;
margin:12px 0;

color:#333;

-webkit-text-stroke:8px #fff;
paint-order:stroke fill;

text-shadow:
-3px -3px 0 #fff,
3px -3px 0 #fff,
-3px 3px 0 #fff,
3px 3px 0 #fff;

opacity:0;
transform:translateY(20px);

animation:textFade 3s forwards;

}

.copy p:nth-child(1){animation-delay:.3s;}
.copy p:nth-child(2){animation-delay:1.2s;}
.copy p:nth-child(3){animation-delay:2.1s;}

@keyframes textFade{

to{
opacity:1;
transform:translateY(0);
}

}

/* =========================
カラー
========================= */

.green{color:#2ca24c;}
.blue{color:#2d6fb7;}
.red{color:#e53935;}

/*＝＝＝＝＝＝＝＝
リード文
＝＝＝＝＝＝＝＝＝*/

.read_txt{
    padding: 10px;
    margin: 30px;
    text-align: center;
    font-size: 18px;
    line-height: 1.6em;
    font-weight: 700;
}

.read_txt_b{font-size: 30px;
font-weight: bold;
    padding: 15px 0;
}