@charset "UTF-8";
.cloud01 {
	position: absolute;
	left: 40px;
	top: -40px;
	z-index: 0;
}
.cloud02 {
	position: absolute;
	right: 80px;
	top: 50px;
	z-index: 0;
}
.sec-about { padding: 180px 0 180px; }
.sec-about.has-bg { background-color: #f3f3f3;}
.sec-about .w770 {
    margin: 0 auto;
    max-width: 770px;
}
@media screen and (max-width: 767px){
    .sec-about { padding: 80px 0;}
}

.sec-about .intro {
    margin-bottom: 170px;
    text-align: center;
}
.sec-about .intro h2 {
    font-size: 2.8rem;
    font-weight: bold;
    letter-spacing: 0.1em;
}
.sec-about .intro p {
    margin-top: 45px;
    line-height: 2;
    letter-spacing: 0.1em;
}
.sec-about .intro strong {
    font-size: 150%;
    font-weight: bold;
}
@media screen and (max-width: 767px){
    .sec-about .intro { margin-bottom: 100px;}
    .sec-about .intro h2 { font-size: 2rem; letter-spacing: 0.05em;}
    .sec-about .intro p { letter-spacing: 0.05em; margin-top: 25px;}
}

.sec-about .movie .headline01 .gif {
    position: absolute;
    left: 160px;
    bottom: -5px;
    width: 110px;
}
@media screen and (max-width: 767px){
    .sec-about .movie .headline01 .gif { left: 70px;}
    .sec-about .movie iframe { height: auto; aspect-ratio: 16 / 9;}
}

.sec-about .about { text-align: center; }
.sec-about .about + .about { margin-top: 220px;}
.sec-about .about .ttl {
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
    font-size: 3.6rem;
    font-weight: bold;
    margin-bottom: 30px;
    padding: 12px 0 10px;
    position: relative;
}
.sec-about .about .ttl .gif {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% - 13px);
    margin: 0 auto;
}
.sec-about .about .txt {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 2.0;
    margin-bottom: 80px;
}
@media screen and (max-width: 767px){
    .sec-about .about + .about { margin-top: 150px;}
    .sec-about .about .ttl { font-size: 2rem; padding: 6px 0 4px;}
    .sec-about .about .txt { font-size: 1.5rem;}
}

.sec-about .pieces {
    margin: 0 auto;
    margin-top: 200px;
    width: 190px;
    position: relative;
}
.sec-about .pieces .img-c {
    position: relative;
    width: 100%;
    z-index: 1;
}
.sec-about .pieces .img-l {
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    width: 124px;
    z-index: 3;
    transition-delay: 0.75s;
    transform: translateX(-250%);
}
.sec-about .pieces .img-l.show {
    transform: translateX(0);
}
.sec-about .pieces .img-r {
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    width: 124px;
    z-index: 2;
    transition-delay: 0.75s;
    transform: translateX(250%);
}
.sec-about .pieces .img-r.show {
    transform: translateX(0);
}