@media only screen and (min-width : 501px) {
body {
background: #FE9901;
}
}
.main{
background: #fff;
position: relative;
}
main{
background: #fff;
}
.main-ttl{
position: absolute;
width: 86.5%;
top: 6%;
left: 0;
right: 0;
margin: auto;
}
.main-cont{
position: absolute;
width: 75%;
bottom: 12%;
left: 0;
right: 0;
margin: auto;
}
.sub-sec{
position: relative;
}
.sub-sec-ttl{
position: absolute;
width: 100%;
top: 12%;
left: 0;
padding: 0 7%;
}
.sub-sec p{
font-weight: 700;
font-size: clamp(12px, 3.8vw, 19px);
position: absolute;
bottom: 26%;
left: 7%;
line-height: 1.4;
}
.sub-sec-ill{
width: 29.5%;
position: absolute;
right: 7%;
bottom: 18%;
}
.anchor-sec{
padding: 6% 12.5% 10%;
background: #FE9901;
}
.anchor-once{
}
.sec-ttl{
position: relative;
background: #fff;
border: 2px solid #000;
border-radius: 100px;
text-align: center;
font-weight: 700;
font-size: clamp(12px, 5.15vw, 25px);
line-height: 1.9;
}
.icon-pin{
position: absolute;
width: 9%;
top: -38%;
left: 25%;
}
.icon-person{
position: absolute;
width: 13%;
top: -42%;
left: 14%;
}
.prof-sec{
background: #FCD740;
padding: 10% 6%;
}
.prof-name-box{
display: flex;
justify-content: space-between;
}
.prof-img{
width: 25%;
}
.prof-name{
width: 72%;
font-weight: 700;
font-size: clamp(12px, 3.7vw, 18px);
}
.prof-name p{
font-size: clamp(12px, 5.9vw, 30px);
}
.prof-history-ttl{
font-weight: 700;
font-size: clamp(12px, 4.6vw, 31px);
}
p.prof-history{
font-weight: 700;
font-size: clamp(12px, 3.45vw, 17px);
line-height: 1.5;
}
.prof-btn-box{
display: flex;
justify-content: space-between;
}
.prof-btn-once{
width: 31%;
}
.cont-box{
background: #fff;
padding: 5% 5% 8%;
border-radius: 3.2vw;
font-weight: 700;
}
.cont-box.place{
padding: 15% 5% 6%;
position: relative;
}
.prof-cont-q{
font-size: clamp(12px, 4.65vw, 22px);
color: #FE5300;
line-height: 1.4;
}
.cont-box p{
font-size: clamp(12px, 3.45vw, 17px);
}
.cont-box-ill01{
position: absolute;
width: 28%;
top: -8%;
right: 2%;
}
.cont-box-ill02{
position: absolute;
width: 32%;
top: -4%;
right: 3%;
}
.cont-box-ill03{
position: absolute;
width: 32%;
top: -4%;
right: 9%;
}
.place-sec{
background: #FEBA0F;
padding: 10% 6%;
}
.place-detail-box{
width: 72%;
display: flex;
justify-content: space-between;
margin: 0 auto -6%;
position: relative;
z-index: 10;
}
.place-detail-box.add-ajust{
width: 60%;
}
.place-img{
width: 54%;
}
.place-name{
width: 40%;
font-weight: 700;
font-size: clamp(12px, 5.9vw, 30px);
}
.schedule-box{
padding: 0;
}
.schedule-once{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 0 0 ;
}
.schedule-time{
width: 4%;
position: relative;
padding: 2% 0 0;
}
.schedule-time img{
vertical-align: top;
}
.schedule-time::after{
position: absolute;
content: '';
width: 2px;
height: 100%;
background: #FE5300;
top: 15%;
left: 49%;
}
.schedule-time.last-unit::after{
display: none;
}
.schedule-cont{
width: 94%;
position: relative;
font-size: clamp(12px, 4.65vw, 22px);
color: #FE5300;
font-weight: 700;
margin: -1% 0 0;
padding: 0 0 6%;
}
.schedule-cont p{
font-size: clamp(12px, 3.45vw, 17px);
color: #000;
}
.talk-sec{
background: #FE9901;
padding: 8% 5%;
}
.talk-cont{
padding: 0;
}
.talk-box01{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.talk-box01 p{
position: relative;
font-size: clamp(12px, 3.45vw, 17px);
padding: 3.5% 5%;
border-radius: 2.6vw;
}
.talk-av{
width: 19.5%;
}
.talk-cont-l{
width: 80%;
padding: 0 5% 0 0;
}
.talk-cont-r{
width: 80%;
padding: 0 0 0 5%;
}
.talk-box01 .talk-cont-r p{
background: #fff;
font-weight: 500;
}
.talk-box01 .talk-cont-r p::after{
position: absolute;
width: 8%;
height: 70%;
top: 7%;
left: -5%;
content: '';
background: url("images/arrow-gray.svg") no-repeat;
background-size: 100% auto;
}
.talk-box01 .talk-cont-l p{
background: #fff;
font-weight: 500;
}
.talk-box01.point-ex .talk-cont-l p{
background: #FFF2AF;
width: 100%;
}
.talk-box01 .talk-cont-l p::after{
position: absolute;
width: 8%;
height: 70%;
top: 18%;
right: -5%;
content: '';
background: url("images/arrow-t01.svg") no-repeat;
background-size: 100% auto;
}
.talk-box01.point-ex .talk-cont-l p::after{
position: absolute;
width: 8%;
height: 70%;
top: 18%;
right: -5%;
content: '';
background: url("images/arrow-t02.svg") no-repeat;
background-size: 100% auto;
}
.talk-box01.point-ex .talk-av{
width: 30%;
}
.talk-box01.point-ex .talk-cont-l{
width: 64%;
padding: 0 0 0;
display: flex;
align-items: center;
}
.talk-box01.point-ex{
margin: -6% auto -4%;
}

@media only screen and (max-width : 500px) {
.schedule-time::after{
position: absolute;
content: '';
width: 1px;
height: 100%;
background: #FE5300;
top: 14%;
left: 46%;
}
}


@media only screen and (min-width : 501px) {
.cont-box{
border-radius: 26px;
}
.talk-box01 p{
border-radius: 18px;
}
}