@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: #050310;
}
.main{
position: relative;
}
.main-ttl{
position: absolute;
bottom: -3.5%;
left: 7.5%;
width: 85%;
}
.main-ill{
width: 19%;
position: absolute;
bottom: 14%;
left: 36.6%;
}
.prof-sec{
padding: 15% 0 5%;
}
.prof-sec-cont{
padding: 0 5% 0;
}
.prof-sec-cont02{
padding: 10% 5% 0;
}
.prof-tag{
width: 68%;
font-weight: 300;
font-size: clamp(16px, 3.4vw, 17px);
background: #ffff00;
padding: 0 0 0 3%;
line-height: 1.4;
}
.prof-sec h2.sec-ttl{
color: #fff;
padding: 0 0 0 10%;
}
.prof-sec h2.sec-ttl.ajust{
color: #fff;
padding: 0 0 0;
}
.prof-box{
padding: 0 4% 0 10%;
}
.prof-history-ttl{
background: #ffff00;
font-size: clamp(12px, 3.2vw, 16px);
padding: 0 2%;
display: inline-block;
margin: -3% 0 0;
position: relative;
}
.prof-history-once{
display: flex;
justify-content: space-between;
border-bottom: 1px solid #555;
color: #fff;
font-size: clamp(12px, 3.2vw, 16px);
padding: 4% 0;
}
.prof-history-once.last-unit{
border-bottom: none;
}
.history-year{
width: 16%;
font-family: "Noto Serif JP", serif;
font-weight: 600;
}
.history-cont{
width: 83%;
font-weight: 500;
font-size: clamp(12px, 3vw, 15px);
}
.schedule-box{
padding: 0 4%;
}
.schedule-once{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 0 0 3%;
}
.schedule-time{
width: 3%;
position: relative;
padding: 2.5% 0 0;
}
.schedule-time img{
vertical-align: top;
}
.schedule-time::after{
position: absolute;
content: '';
width: 1px;
height: 100%;
background: #ffff00;
top: 15%;
left: 50%;
}
.schedule-time.last-unit::after{
display: none;
}
.schedule-cont{
width: 94%;
position: relative;
color: #ffff00;
font-size: clamp(14px, 3.9vw, 20px);
font-family: "Noto Serif JP", serif;
font-weight: 600;
padding: 0 0 3%;
}
.schedule-cont p{
font-size: clamp(12px, 3.2vw, 16px);
font-weight: 500;
color: #fff;
font-family: "Noto Sans JP", serif;
}
.cont-text{
font-size: clamp(12px, 3.2vw, 16px);
color: #fff;
font-weight: 500;
padding: 0 0 0 7%;
}
.anchor-sec{
padding: 8% 7% ;
background: url("images/texture-bg.jpg") top left;
background-size: cover;
}
.lead-box{
padding: 8% 7% ;
background: url("images/texture-bg.jpg") top left;
background-size: cover;
}
.lead-box p{
font-size: clamp(12px, 3.4vw, 18px);
font-family: "Noto Serif JP", serif;
font-weight: 600;
color: #fff;
letter-spacing: 0.03em;
}
.anchor-box{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 6% 3% 2% ;
background: url("images/texture-bg.jpg") no-repeat top left;
background-size: cover;
}
.anchor-box a{
color: #fff;
font-size: clamp(12px, 3.4vw, 17px);
font-weight: 500;
text-align: center;
position: relative;
display: block;
padding: 0 0 20%;
}
.anchor-box a::after{
position: absolute;
content: '';
bottom: 0;
left: 0;
right: 0;
margin: auto;
color: #fff;
width: 94%;
height: 28%;
background: url("images/arrow-down.svg") no-repeat bottom center;
background-size: 100% auto;
}
.anchor-once{
width: 32%;
margin: 0 0 7%;
}
.sec-main{
position: relative;
}
.sec-main-logo{
width: 29.5%;
position: absolute;
left: 2%;
top: 4%;
}
.sec-cont{
padding: 4% 5%;
}
.sec-ttl{
font-weight: 300;
font-size: clamp(12px, 6.6vw, 30px);
color: #ffff00;
position: relative;
letter-spacing: 0.12em;
line-height: 1.4;
}
.sec-ttl::after{
position: absolute;
content: '';
top: 30%;
right: 0;
width: 21%;
height: 2px;
background: #ffff00;
}
.sec-ttl.line1::after{
position: absolute;
content: '';
top: 50%;
right: 0;
width: 21%;
height: 2px;
background: #ffff00;
}
.sec-cont p{
font-size: clamp(12px, 3.4vw, 17px);
font-weight: 500;
color: #fff;
}
.sec-cont p.with-mg{
margin: 0 0 1.4em;
}
.w32{
width: 32%;
float: right;
margin: 6% 0 0 3%;
}
.w28{
width: 28%;
float: right;
margin: 6% 0 0 3%;
}
.cont-ill03{
width: 87%;
margin: 0 auto;
}