@media only screen and (min-width : 501px) {
body {
background: url("images/pc_bg.jpg") no-repeat top center;
background-size: cover;
background-attachment: fixed;
}
}
main{
background: #fff;
overflow: hidden;
}
.cont-box{
margin: 0 auto;
}
.w76{
width: 76%;
}
.w87{
width: 87%;
}
.main-kv{
width: 100%;
position: relative;
}
.intro{
background: #FFD1E4;
padding: 12% 0 4%;
position: relative;
}
.intro-ttl{
display: inline-block;
position: relative;
margin: 0 0 0 5%;
padding: 0 1%;
z-index: 10;
}
.intro-ttl p{
font-size: clamp(12px, 4.8vw, 21px);
font-weight: 500;
position: relative;
z-index: 10;
}
.intro-ttl::before{
position: absolute;
content: '';
width: 100%;
height: 40%;
left: 0;
bottom: 0;
background: #F87FA0;
z-index: 0;
}
.intro-ill{
position: absolute;
width: 25%;
right: 2%;
bottom: 0;
}
.anchor-sec{
padding: 14% 0;
}
.anchor-box{
display: flex;
justify-content: space-between;
padding: 0 5% 0 0;
}
.anchor-box-img{
width: 41%;
position: relative;
}
.anchor-box-prof{
position: absolute;
top: -8%;
right: -8%;
width: 66%;
}
.anchor-box-prof-ill{
width: 50%;
position: absolute;
bottom: -13%;
right: -17%;
z-index: 11;
}
.anchor-box-prof-ill02{
width: 29%;
position: absolute;
top: -17%;
right: -55%;
z-index: 0;
}
.anchors{
width: 59%;
display: flex;
align-items: center;
padding: 0 0 0 5%;
position: relative;
z-index: 10;
}
.anchors-inner{
width: 100%;
background: #fff;
}
.sec01{
background: #ffd1e4;
padding: 12% 0 12%;
}
.cont-img{
position: relative;
width: 90%;
margin: 0 auto;
}
.cont-img-reson01{
position: absolute;
width: 33%;
top: -8%;
right: 3%;
}
.cont-img-reson02{
position: absolute;
width: 33%;
top: -8%;
left: 3%;
}
.sec01-sub-ttl{
text-align: center;
color: #f47483;
font-size: clamp(12px, 5vw, 23px);
font-weight: 700;
}
.cont-img.add-ajust01{
padding: 0 6% 0 0;
}
.cont-img.add-ajust02{
padding: 0 0 0 6%;
}
.cont-img.add-ajust03{
padding: 0 6%;
}
.sec02{
background: #f8a4ae;
padding: 12% 0 12%;
}
.sec03{
background: #ffd1e4;
padding: 12% 0 12%;
}
.cont-add-lead{
font-size: clamp(12px, 3.7vw, 18px);
font-weight: 700;
text-align: center;
}
.sec03 p{
width: 90%;
margin: 0 auto;
font-size: clamp(12px, 3.2vw, 16px);
font-weight: 500;
}
.sec04{
background: #f8a4ae;
overflow: hidden;
padding: 10% 0 8%;
}
.sec04 .cont-box{
max-width: 560px;
width: 90%;
}
.sec04 p{
font-size: clamp(12px, 3.2vw, 16px);
}
.sep-ttl{
color: #fff;
text-align: center;
font-size: clamp(12px, 5vw, 23px);
font-weight: 700;
}
.sep-ttl2{
color: #fff;
text-align: center;
font-size: clamp(12px, 5.3vw, 26px);
line-height: 1.3;
font-weight: 700;
}
.sep-ttl2 span{
color: #fff;
text-align: center;
font-size: clamp(12px, 3.7vw, 18px);
}
.schedule-box{
width: 90%;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
position: relative;
}
.schedule-box::after{
position: absolute;
content: '';
height: 88%;
width: 2px;
background: #fff;
top: 2%;
left: 8.1%;
z-index: 0;
}
.schedule-box-time{
width: 17%;
position: relative;
z-index: 1;
}
.schedule-box-cont{
width: 80%;
position: relative;
z-index: 1;
}
.schedule-comment{
position: absolute;
width: 53%;
right: -4%;
bottom: -145%;
}
.schedule-comment-top{
position: absolute;
width: 56%;
right: -3%;
top: -65%;
}
.add-ajust{
padding: 3.5% 0 0;
}
.schedule-ill-cont{
padding: 2% 0 0;
}
.schedule-ill-cont img{
width: 115%;
position: relative;
left: -15%;
}
.sec04 .schedule-box-cont p{
color: #fff;
line-height: 1.5;
}
.sec04 p.main-act{
font-size: clamp(12px, 5.3vw, 25px);
}
.sec04 p.sub-act{
font-size: clamp(12px, 4.3vw, 20px);
}
.sec04 .end-img01{
width: 90%;
position: relative;
margin: -24% auto 0;
}
.sec04 .end-img02{
width: 90%;
margin: 0 auto;
padding: 6% 0 0;
}
.sec05,
.sec07{
background: #ffd1e4;
}
.sec07{
background: #ffd1e4;
padding: 12% 0 0;
}
.ttl-box{
position: relative;
margin: 0 auto;
}
.ttl-box img{
width: 100%;
}
.ttl-box h2{
position: absolute;
top: 20%;
left: 0;
width: 100%;
height: 100%;
font-size: clamp(16px, 6.15vw, 30px);
font-weight: 700;
color: #fff;
text-align: center;
}
h3{
background: #fff;
text-align: center;
color: #f47483;
font-size: clamp(12px, 5vw, 23px);
margin: 0 auto;
font-weight: 500;
}
dl.qa-box{
display: flex;
padding: 0 5%;
}
dl.qa-box dt{
width: 54px;
flex-shrink: 0;
}
dl.qa-box dt img{
width: 44px;
}
dl.qa-box dd{
font-weight: 500;
font-size: clamp(12px, 3.2vw, 16px);
}
dl.qa-box dd.ajust-intro{
padding: 0 19% 0 0;
}
dl.qa-box dd.qa-q{
font-weight: 500;
font-size: clamp(12px, 3.5vw, 17px);
display: flex;
align-items: center;
}
.sec07-end-img{
width: 82%;
margin: 0 auto;
}
.ill-yorizo{
background: #fff;
padding: 6% 16% 10%;
}
section{
max-width: 500px;
margin: 0 auto;
}