@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: #f73200;
}
.main-kv{
width: 100%;
position: relative;
background: #f73200;
}
.main-ttl{
width: 81.5%;
margin: 0 auto;
padding: 4% 0 7%;
}
.book-logo{
width: 62.5%;
margin: 0 auto;
padding: 0 0 10%;
}
.book-tag{
width: 35.5%;
position: absolute;
right: 0;
bottom: 0;
}
.sub-block{
background: #f73200;
padding: 7% 5% 10%;
}
.sub-block .lead-box{
background: #fff;
border: 2px solid #000;
padding: 7% 8%;
}
.lead-box-ttl{
text-align: center;
color: #f73200;
font-size: clamp(12px, 5vw, 25px);
font-weight: 700;
padding: 0 0 5%;
}
.sub-block .lead-box p{
font-size: clamp(12px, 4.2vw, 21px);
font-weight: 500;
}
.sec01,
.sec02{
padding: 8% 5%;
background: #fff;
}
.q-mark{
width: 32%;
}
h2.q-ttl{
font-weight: 700;
color: #f73200;
font-size: clamp(12px, 5.45vw, 26px);
line-height: 1.1;
padding: 3% 0 5%;
}
h2.q-ttl span{
font-weight: 500;
color: #000;
font-size: clamp(12px, 5vw, 23px);
}
.q-box{
background: #fee4de;
margin: 0 auto;
border: 2px solid #f73200;
}
.q-box-q{
background: #f73200;
color: #fff;
padding: 3% 5%;
}
.q-box-q-ttl{
color: #fff;
font-size: clamp(12px, 5vw, 32px);
font-weight: 700;
line-height: 1.2;
}
.q-box-q-ttl span{
color: #fff;
font-size: clamp(12px, 4vw, 25px);
}
.q-box-q p{
color: #fff;
font-weight: 700;
font-size: clamp(12px, 4.6vw, 23px);
line-height: 1.5;
}
.q-box-q p.ajust-small{
font-size: clamp(12px, 3.9vw, 20px);
font-weight: 500;
}
.q-box-cont{
padding: 5% 5%;
}
.q-box-cont dl{
overflow: hidden;
}
.q-box-cont dl dt{
width: 9%;
float: left;
padding: 0.5% 0 0;
}
.q-box-cont dl dd {
padding: 0 0 0 12%;
line-height: 1.4;
}
.text-answer{
font-size: clamp(12px, 5.3vw, 21px);
font-weight: 700;
padding: 0 0 1.5%;
}
.text-attack{
color: #f73200;
font-size: clamp(12px, 5vw, 21px);
font-weight: 700;
padding: 0 0 1.5%;
}
.text-main,
.text-attack .text-main{
font-size: clamp(12px, 5.5vw, 30px);
font-weight: 700;
color: #000;
line-height: 1.2;
}
.text-main span{
font-size: clamp(12px, 4vw, 25px);
font-weight: 500;
}
.a-box{
margin: 0 auto;
border: 2px solid #000;
}
.a-box .inner{
padding: 6% 5% 7%;
}
.a-box-ttl{
font-size: clamp(12px, 5.4vw, 26px);
font-weight: 700;
padding: 3% 5%;
}
.a-box-attack{
background: #000;
color: #fff;
font-size: clamp(12px, 4.6vw, 23px);
font-weight: 700;
padding: 4% 5% 5%;
}
.a-box-attack span{
font-size: clamp(12px, 6.1vw, 30px);
}
.a-box-column{
padding: 6% 5%;
}
.a-box-column-ttl{
text-align: center;
font-size: clamp(12px, 5vw, 25px);
font-weight: 700;
}
.a-box-column-ex{
border-top: 2px dashed #000;
padding: 6% 0 2%;
}
.a-box-column-ex-ttl{
color: #f73200;
font-size: clamp(12px, 4vw, 23px);
line-height: 1.4;
font-weight: 700;
margin: 0 0 4%;
}
.a-box-column p{
font-size: clamp(12px, 4vw, 20px);
line-height: 1.4;
font-weight: 500;
}
.a-ex-ttl-r{
font-weight: 700;
font-size: clamp(12px, 4.5vw, 22px);
line-height: 1.5;
margin: 0 auto;
padding: 0 0 0 34%;
}
.a-ex-ttl-l{
font-weight: 700;
font-size: clamp(12px, 4.5vw, 22px);
line-height: 1.5;
margin: 0 auto;
}
.a-ex-box{
display: flex;
justify-content: space-between;
}
.a-ex-av{
width: 24%;
display: flex;
align-items: center;
}
.a-ex-text{
width: 66%;
background: #feeae5;
border: 2px solid #f73200;
padding: 4%;
font-size: clamp(12px, 3.8vw, 18px);
line-height: 1.4;
font-weight: 500;
position: relative;
}
.a-ex-text span{
color: #0000ff;
}
.a-ex-text a{
color: #f73200;
text-decoration: underline;
}
.a-ex-text.right::after{
position: absolute;
content: '';
width: 11%;
height: 20%;
top: 48%;
left: -11%;
background: url("images/arrow-red-left.svg") no-repeat;
background-size: 100% auto;
}
.a-ex-text.left::after{
position: absolute;
content: '';
width: 11%;
height: 20%;
top: 44%;
right: -11%;
background: url("images/arrow-red-right.svg") no-repeat;
background-size: 100% auto;
}
.ending{
padding: 10% 4% 15%;
background: #f73200;
color: #fff;
}
.ending-catch{
font-weight: 700;
text-align: center;
font-size: clamp(12px, 6.3vw, 30px);
}
.end-lead{
font-weight: 700;
text-align: center;
font-size: clamp(12px, 3.8vw, 18px);
}
.ending-block-ttl{
font-weight: 700;
text-align: center;
font-size: clamp(12px, 5.4vw, 26px);
background: #fff;
border-radius: 80px;
color: #f73200;
line-height: 1.9;
}
.ending-block-ttl.add-fcb{
color: #000;
}
.ending-comment-box{
display: flex;
justify-content: space-between;
}
.ending-comment-av{
width: 35%;
display: flex;
align-items: center;
}
.ending-comment-text{
width: 60%;
background: #fff;
padding: 4%;
position: relative;
}
.ending-comment-text.right::after{
position: absolute;
content: '';
width: 11%;
height: 20%;
top: 50%;
left: -11%;
background: url("images/arrow-white-left.svg") no-repeat;
background-size: 100% auto;
}
.ending-comment-text.left::after{
position: absolute;
content: '';
width: 11%;
height: 20%;
top: 43%;
right: -11%;
background: url("images/arrow-white-right.svg") no-repeat;
background-size: 100% auto;
}
.ending-comment-text p{
font-size: clamp(12px, 3.8vw, 18px);
line-height: 1.5;
color: #000;
font-weight: 500;
}
.ending-comment-text p.attack{
font-weight: 700;
font-size: clamp(12px, 4vw, 20px);
padding: 0 0 6%;
color: #f73200;
}
.yell-box{
background: #fff;
padding: 6% 5%;
color: #000;
}
.yell-box-ttl{
text-align: center;
font-size: clamp(12px, 5.4vw, 26px);
}
.yell-box p{
font-size: clamp(12px, 3.8vw, 18px);
border-top:1px solid #f73200;
padding: 5% 4% ;
line-height: 1.5;
font-weight: 500;
}
.w121{
position: relative;
width: 121%;
left: -13%;
top: 4%;
}
.w115{
position: relative;
width: 112%;
left: 0;
margin: -4% 0 0;
}
.w130{
position: relative;
width: 130%;
left: -16%;
margin: -5% 0 0;
}