:root {
--main-font: 'Zen Kaku Gothic New', sans-serif;
--mincho-font: 'Zen Old Mincho', serif;
--main-color:  #51735A;
--sub-color: #F9AB36;
--beige-color: #F2EDE4;
--text-color: #000;
--line-height: 1.8;
--line-height-sp: 1.5;
}

*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style-type: none;
font-feature-settings: "palt" 1;
letter-spacing: -0.02em;
}

a{
color: #fff;
text-decoration: none;
}

img{
max-width: 100%;
height: auto;
}


nav{
position: fixed;
width: 100%;
z-index: 9999;
}

nav ul{
background-color: rgba(81, 115, 90, 0.8);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 24px 40px;
font-family: var(--main-font);
font-weight: 700;
gap: 120px;
}

nav ul a{
padding: 10px;
position: relative;
}

nav ul a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background-color: #fff;
transition: width 0.3s ease;
}

nav ul a:hover::after {
width: 100%;
}

/* main */
.hero{
position: relative;
background: url(/design_items/pc/img/mondai/main-image_pc@2x.png) no-repeat center center/cover;
height: 679px;
}
@media screen and (max-width: 739px){
.hero{
position: relative;
background: url(/design_items/pc/img/mondai/main-image_sp@2x.png) no-repeat center center/cover;
height: 580px;
}
}
h1{
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
top: 68%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
animation: fadeIn 1.5s ease-in forwards .4s;
}

@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

@media screen and (max-width: 640px){
.main__title{
max-width: 130%;
}
.main__tagline{
max-width: 200%;
width: 150%;
}
}

.illustrator{
position: absolute;
bottom: 10px;
right: 10px;
display: inline-block;
color: #fff;
letter-spacing: 0.25rem;
font-size: clamp(12px, 1.8vw, 18px);
}

section{
padding: clamp(40px,6.4vw,60px) 20px;
}
.sp__only{
display: none;
}
@media screen and (max-width: 640px){
.sp__only{
display: block;
}
}
h2{
font-family: var(--mincho-font);
font-weight: 400;
font-size: clamp(24px, 4.8vw, 48px);
color: var(--main-color);
text-align: center;
line-height: var(--line-height);
margin-bottom: clamp(20px, 6vw, 60px);
}
@media screen and (max-width: 640px){
h2{
line-height: var(--line-height-sp);
}
}
.top__lead{
font-family: var(--mincho-font);
font-weight: 400;
text-align: center;
font-size: clamp(16px, 3.2vw, 32px);
line-height: var(--line-height);
margin-bottom: clamp(20px, 6vw, 60px);
}

.top__img{
max-width: 890px;
width: 100%;
margin: 0 auto;
}

.top__img img{
margin-bottom: clamp(20px, 6vw, 60px);
width: 100%;
}

.top__img__txt{
font-family: var(--main-font);
font-weight: 400;
font-size: clamp(16px, 1.8vw,  18px);
border: 1px solid #000;
border-radius: 10px;
padding: 30px;
}

.bg__beige{
background-color: #F2EDE4;
}

.h3__heading{
font-family: var(--main-font);
font-weight: 400;
text-align: center;
font-size: clamp(18px, 2.4vw, 24px);
margin-bottom: clamp(40px,6.4vw,60px);
}
.h3__heading span{
border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding-top: 3px;
padding-bottom: 3px;
}
.flex{
display: flex;
max-width: 930px;
width: 100%;
margin: 0 auto;
}
.flex img{
object-fit: cover;
}
@media screen and (max-width: 640px){
.flex{
flex-direction: column;
align-items: center;
}
}
.introduction--gap{
gap: clamp(40px,6vw,60px);
}
.flex img{
filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.1));
height: 100%;
}
.right__inner{
display: flex;
flex-direction: column;
gap: clamp(16px,4vw,40px);
flex: 1;
}
.right__inner span{
display: block;
}
.book__title{
font-family: var(--mincho-font);
font-size: clamp(24px, 4.8vw, 48px);
font-weight: 700;
}
.book__subtitle{
font-family: var(--mincho-font);
font-size: clamp(16px, 2.4vw, 24px);
font-weight: 400;
}
.book__author{
font-family: var(--main-font);
font-weight: 700;
font-size: 16px;
}
.book__overview{
font-family: var(--main-font);
font-weight: 400;
line-height: var(--line-height);
}
.link__button{
font-family: var(--main-font);
font-size: 24px;
display: inline-block;
background-color: var(--sub-color);
color: #fff;
border-radius: 50px;
width: fit-content;
padding: 10px 48px;
max-width: 290px;
width: 100%;
text-align: center;
margin-inline: auto;
}

.link__button:hover{
opacity: 0.8;
}

/* 251016_試し読みはこちら */
.button_center{
    text-align: center;
    margin: 20px 0;
    }

.link__button_02{
    font-family: var(--main-font);
    font-size: 24px;
    font-weight: 700;
    display: inline-block;
    background-color: var(--sub-color);
    color: #fff;
    border-radius: 50px;
    width: fit-content;
    padding: 10px 48px;
    max-width: 320px;
    width: 100%;
    text-align: center;
    margin-inline: auto;
}
    
    .link__button_02:hover{
    opacity: 0.8;
    }
    



.bg__main--color{
background-color: var(--main-color);
}
.h3__heading--white span{
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
color: #fff;
}
.profile--gap{
gap: 40px;
}
.right__inner--gap{
gap: 16px;
color: #fff;
}
.book__author__name{
font-family: var(--main-font);
font-weight: 700;
font-size: 18px;
}

.comment__inner{
max-width: 1380px;
width: 100%;
margin: 0 auto;
font-family: var(--mincho-font);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px 60px;
}
.comment__item{
background-color: #fff;
border-radius: 10px;
box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 420px;
width: 100%;
}
.comment__txt{
font-size: 18px;
font-weight: 700;
margin-bottom: 20px;
}
.comment__name{
font-size:16px ;
text-align: right;
font-weight: 400;
}
.hidden {
display: none;
opacity: 0;
transition: opacity 1s ease-in-out;
}

.fade-in {
opacity: 1;
}

.more {
text-align: center;
margin-top:clamp(40px,7vw,70px);
}
button {
font-family: var(--main-font);
font-size: 24px;
font-weight: 700;
background-color: var(--main-color);
border: none;
cursor: pointer;
outline: none;
color:#fff;
padding: 10px 48px;
line-height: 40px;
max-width: 216px;
width: 100%;
border-radius: 50px;
}

footer {
position: relative;
padding: 40px 16px;
text-align: center;
background: #fff;
font-size: 12px;
}

.copyright{
    margin-bottom: 16px;
}

/* ハンバーガーメニュー */
.hamburger {
display: none;
width: 30px;
height: 24px;
position: fixed;
right: 20px;
top: 20px;
z-index: 10000;
cursor: pointer;
}

.hamburger span {
display: block;
position: absolute;
width: 100%;
height: 4px;
background-color: var(--main-color);
transition: all 0.3s;
}

.hamburger span:nth-child(1) {
top: -2px;
}

.hamburger span:nth-child(2) {
top: 9px;
}

.hamburger span:nth-child(3) {
bottom: 0;
}

/* ハンバーガーメニューがアクティブ時の状態 */
.hamburger.active span:nth-child(1) {
transform: translateY(11px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
opacity: 0;
}

.hamburger.active span:nth-child(3) {
transform: translateY(-11px) rotate(-45deg);
}

@media screen and (max-width: 739px) {
header{
background-color: #fff;
height: 60px;
position: relative;
}
.hamburger {
display: block;
position: absolute;
}

nav {
position: fixed;
top: 0;
right: -100%;
width: 100%;        
transition: all 0.3s;
}

nav.active {
right: 0;
}

nav ul {
background-color: var(--beige-color);
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
gap: 20px;
padding: 40px 20px 20px;
}

nav ul li {
width: 100%;
text-align: center;
}

nav ul li a {
color: var(--main-color);
display: block;
padding: 10px;
font-size: 18px;
}

nav ul a::after {
background-color: var(--main-color);
}
}

.top__button{
width: 48px;
height: 48px;
background-color: #F9AB36;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 20px;
right: 20px;
}

.top__button__inner{
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 20px solid #fff;
}