@charset "utf-8";

/*--------------------------------
ベース
---------------------------------*/

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  color: var(--black);
  font-family: "Noto Sans JP", sans-serif;
  font-style: normal;
  font-size: 100%;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
  color: var(--black);
}

@media (hover: hover) {
  a:hover{
    opacity: .6;
  }
}

p,a,dt,dd,li,span {
  font-size: clamp(0.938rem, 0.912rem + 0.11vw, 1rem); /* 15px--16px */
  line-height: 1.7;
}

h2{
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(1.375rem, 1.012rem + 1.55vw, 2.25rem); /* 22px--36px */
}

h3{
  font-size: clamp(1.25rem, 1.198rem + 0.22vw, 1.375rem);/* 20px--22px */
}

:root {
  --black: #333;
  --beige: #FCF9EF;
  --brown: #7A6665;
  --darkbrown: #4E352F;
  --white: #fdfdfc;
}

/* ////////// z-index ////////// */

.header{
  z-index: 80;
}
.header__hamburger {
  z-index: 99;
}
.sp-nav {
  z-index: 90;
}
.sticky-button{
  z-index: 60;
}
.sp-sticky-button{
  z-index: 60;
}
.back-to-top{
  z-index: 70;
}

/*--------------------------------
共通のレイアウト
---------------------------------*/

.wrapper{
  display: flex;
  flex-direction: column;
  position: relative;
}

.container{
  flex: 1;
  position: relative;
  top: 0;
  background-color: var(--beige);
}

.inner {
  margin: 0 auto;
  padding: 0 3%;
}
@media(min-width: 768px) {
  .inner {
    max-width: 1280px;
    padding: 0;
  }
}

.l-flex {
  display: flex;
  flex-direction: column;
}
@media(min-width: 768px) {
  .l-flex {
    flex-direction: row;
  }
}

.sec-title{
  margin-top: 40px;
  text-align: center;
}
@media(min-width: 768px) {
  .sec-title {
    margin-top: 80px;
  }
}
@media(min-width: 1024px){
  .sec-title {
    margin-top: 120px;
  }
}

.sec-title.m--beige{
  color: var(--beige);
  margin-top: 24px;
}
@media(min-width: 768px) {
  .sec-title.m--beige {
    margin-top: 64px;
  }
}

.sec-title img{
  width: clamp(50px, 8vw, 100px);
}

#about,#selector,#service{
  padding-top: 20px;
  margin-top: -20px;
}
@media(min-width: 768px) {
  #about,#selector,#service{
    padding-top: 10px;
    margin-top: -10px;
  }
}

/*--------------------------------
個別のレイアウト
---------------------------------*/

/* ////////// header ////////// */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #FFCF31;
}
@media(min-width: 1281px) {
  .header {
    background-image: linear-gradient(90deg, rgba(255, 204, 37, 1), rgba(255, 207, 49, 1) 45%, rgba(255, 208, 68, 1));
  }
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 3%;
}
@media(min-width: 768px) {
  .header__inner {
    padding: 8px 16px;
  }
}

.header__logo{
  width: clamp(150px, 15vw, 200px);
}

.pc-nav__list {
  display: none;
}
@media(min-width: 768px) {
  .pc-nav__list {
    display: flex;
    gap: 24px;
  }
}

.pc-nav__item a {
  font-size:  min(2vw, 18px);
  font-weight: 500;
}

/* ////////// ハンバーガーメニュー ////////// */

.hamburger-wrap {
  width: 30px;
  height: 30px;
  text-align: center;
}

.header__hamburger {
  position: relative;
  width: 100%;
  height: 100%;
}

.header__hamburger span {
  display: block;
  position: relative;
  width: 100%;
  height: 2px;
  background-color: var(--darkbrown);
  transition: ease .4s;
}

.header__hamburger span:nth-child(1) {
  top: 0;
}

.header__hamburger span:nth-child(2) {
  margin: 8px 0;
}

.header__hamburger span:nth-child(3) {
  top: 0;
}

@media(min-width: 768px) {
  .hamburger-wrap,.sp-navi{
    display: none;
  }
}

/* ////////// spナビ ////////// */

.sp-nav {
  position: fixed;  
  top: 0;
  inset: 0;
  background-color: var(--darkbrown); 
  opacity: 0;
  visibility: hidden;
  transition: ease 1s;
}

.sp-nav__list{
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 120px 0;
  text-align: center;
}

.sp-nav__item a{
  color: var(--white);
  font-size: 1.25rem;
}

/* ////////// ハンバーガーメニュークリック後のスタイル ////////// */
.sp-nav.active {
  opacity: 1;
  visibility: visible;
}

.header__hamburger.active span{
  background-color: var(--white);
}

.header__hamburger.active span:nth-child(1) {
  top: 10px;
  transform: rotate(45deg);
}

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

.header__hamburger.active span:nth-child(3) {
  top: -10px;
  transform: rotate(-45deg);
}

/* ////////// mainvisual ////////// */

.mainvisual__top{
  position: relative;
}

.mainvisual__title-bg{
  height: clamp(375px, 45vh, 520px);
  background-image: url(../img/mainvisual.jpg);
  background-size: cover;
}
@media(min-width: 1921px) {
  .mainvisual__title-bg{
    background-size: contain;
    background-repeat: repeat;
  }
}

.mainvisul__title{
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 8vh;
  right: 0;
  left: 0;
  width: clamp(360px, 70vw, 835px);
  margin: 0 auto;
}
@media(min-width: 1024px) {
  .mainvisul__title{
    top: 18%;
  }
}

.mainvisul__title h1{
  position: relative;
  top: 10px;
  display: inline-block;
  text-align: start;
}

.mainvisual__title-img{
  width: clamp(270px, 40vw, 500px);
}

.mainvisual__title-catch{
  display: inline-block;
  padding-left: 0.5rem;
  color: var(--darkbrown);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(1.25rem, 0.836rem + 1.77vw, 2.25rem); /* 20px--36px */
  font-weight: 500;
  text-align: end;
}

.mainvisual__title-catch span{
  font-size: clamp(0.938rem, 0.549rem + 1.66vw, 1.875rem); /* 15px--30px */
}

.mainvisual__bottom{
  position: relative;
  height: max(10vh, 90px);
  background-color: var(--darkbrown);
}
@media(min-width: 1024px) {
  .mainvisual__bottom{
    height: 135px;
  }
}

.mainvisual__overlay{
  width: 100vw;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: .3;
}

.mainvisual__text{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  color: var(--beige);
  font-family: "Kaisei HarunoUmi", serif;
  font-size: clamp(1.2rem, 0.659rem + 1.99vw, 2rem); /* 18px--32px */
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.2rem;
  text-align: end;
}
@media(min-width: 1281px) {
  .mainvisual__text{
    right: 8%;
  }
}

/* ////////// 一万円読書便とは ////////// */

.about__inner{
  max-width: 1120px;
}

.about__contents{
  align-items: center;
  margin: 24px 16px;
}
@media(min-width: 768px) {
  .about__contents{
    margin: 48px 24px;
  }
}

.about__img{
  display: block;
}
@media(min-width: 768px) {
  .about__img{
    width: 45%;
  }
}

.about__text{
  margin-top: 1.5rem;
  /* font-size: clamp(0.938rem, 0.86rem + 0.33vw, 1.125rem); 15px--18px */
  font-size: clamp(0.938rem, 0.86rem + 0.33vw, 1.0015rem); /* 15px--約16.25px */
}
@media(min-width: 768px) {
  .about__text{
    margin-top: 0;
    margin-left: 4.5%;
  }
}

/* ////////// サービスの特徴 ////////// */

@media(min-width: 768px) {
  .point__inner{
    padding: 0 16px;
  }
}

.point__contents{
  justify-content: space-between;
  gap: 16px;
  margin: 24px 0 48px;
}
@media(min-width: 768px) {
  .point__contents{
    margin: 48px 0 80px;
  }
}

.point__item{
  display: flex;
  flex-direction: column;
  max-width: 400px;
  align-items: center;
  padding: 2% 5% 2rem;
  margin: 0 auto;
  background-color: var(--white);
}
@media(min-width: 768px) {
  .point__item{
    width: 32%;
  }
}

.point__img{
  display: block;
}

.point__text{
  margin-top: 1.5rem;
}

/* ////////// 選書マスター ////////// */

.selector {
  padding: 5px;
  background: #7A6665;
}
@media(min-width: 768px) {
  .selector {
    padding: 1rem;
  }
}

.selector__inner{
  margin: 0 auto;
}

.frame{
  border: 3px #C1A22B solid;
  outline: 1px #C1A22B solid;
  outline-offset: -10px;
}
@media(min-width: 768px) {
  .frame{
    outline-offset: -16px;
  }
}

.selector__contents{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 16px;
  padding: 40px 4%;
}
@media(min-width: 768px) {
  .selector__contents{
    padding-bottom: 64px;
  }
}
@media(min-width: 1280px) {
  .selector__contents {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 24px;
    max-width: 1880px;
    margin: 0 auto;
    padding: 80px 4%;
  }
}

/* ////////// 各profile ////////// */

.profile {
  position: relative;
  background: var(--white);
}
@media(min-width: 1280px) {
  .profile {
    width: calc((100% - 24px) / 2);
  }
}

.profile__block{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1.5rem 3rem;
}
@media(min-width: 768px) {
  .profile__block{
    display: block;
    padding: 1.5rem 2rem 3rem;
  }
}

.profile__block::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  background: linear-gradient(to bottom,
    rgba(252, 249, 239, 1) 0px,     /* 上端はベージュ */
    rgba(252, 249, 239, 1) 230px,    /* 230pxまではベージュ */
    rgba(253, 253, 252, 1) 250px,   /* 230〜260pxの間で白へぼかす */
    rgba(253, 253, 252, 1) 100%     /* 残りは全部白 */
  );
}
@media(min-width: 768px) {
  .profile__block::before {
    background: linear-gradient(to bottom,
      rgba(252, 249, 239, 1) 0px,     /* 上端はベージュ */
      rgba(252, 249, 239, 1) 80px,    /* 80pxまではベージュ */
      rgba(253, 253, 252, 1) 110px,   /* 80〜110pxの間で白へぼかす */
      rgba(253, 253, 252, 1) 100%     /* 残りは全部白 */
    );
  }
}

.profile__photo{
  position: relative;
  z-index: 15;
  width: 150px;
  height: 150px;
  object-fit: contain;
}
@media(min-width: 768px) {
  .profile__photo{
    width: 200px;
    height: 200px;
    float: right;
    /* margin-right: 2rem; */
  }
}

.profile__top{
  margin-bottom: 1rem;
  text-align: center;
}
@media(min-width: 768px) {
  .profile__top{
    text-align: start;
  }
}

.profile__text{
  position: relative;
  z-index: 15;
}

.profile__name{
  font-size: clamp(1.125rem, 1.073rem + 0.22vw, 1.25rem); /* 18px--20px */
  font-weight: bold;
}

.profile__store{
  font-size: 1rem;
}

.profile__q{
  display: inline-block;
  margin-bottom: .5rem;
  background: linear-gradient(transparent 40%, rgba(255, 207, 49, 0.7) 60%);
  font-size: clamp(1rem, 0.948rem + 0.22vw, 1.125rem); /* 16px--18px */
  font-weight: 500;
}

.profile__a{
  margin-bottom: 1rem;
}

.profile__q.m--small{
  margin: 1.2rem 0 .5rem 0; 
  background: none;
  font-size: 14px;
  font-weight: bold;
}

.profile__a.m--small{
  margin-bottom: 1.2rem;
  font-size: 14px;
  letter-spacing: -.5px;
}
@media(min-width: 768px) {
  .profile__a.m--small{
    letter-spacing: normal;
  }
}

.profile__info{
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 18;
  padding: 1.2rem 1rem 0;
  background-image: linear-gradient(180deg, rgba(253, 253, 252, 1), rgba(252, 249, 239, 1) 40%);
}
@media(min-width: 768px) {
  .profile__info{
    justify-content: space-between;
    align-items: center;
  }
  .profile__info:not(:has(.profile__url)){
    display: block;  
  }
}

.profile__url img{
  width: 30px;
  vertical-align: middle;
}

.profile__sns{
  margin-top: .5rem;
  text-align: end;
}
@media(min-width: 768px) {
  .profile__sns{
    margin-top: 0;
  }
}

.profile__sns a+a{
  margin-left: .5rem;
}

.profile__sns img{
  width: 30px;
}

/* ////////// 本が届くまでの流れ ////////// */

.flow__contents{
  max-width: 680px;
  margin: 48px auto 20px;
}
@media(min-width: 768px) {
  .flow__contents{
    margin: 80px auto 40px;
    padding: 0 24px;
  }
}

.flow__bar{
  display: flex;
  gap: 1.5rem;
  position: relative;
  padding-bottom: 40px;
}
@media(min-width: 768px) {
  .flow__bar{
    gap: 5rem;
    padding-bottom: 48px;
  }
}

.flow__bar:not(:last-child)::before{
  content: "";
  position: absolute;
  top: 52px;
  left: 20px;
  z-index: 1;
  display: block;
  width: 0;
  height: calc(100% - 60px);
  border-right: 1px solid #4E352F;
}
@media(min-width: 768px) {
  .flow__bar:not(:last-child)::before{
    top: 64px;
    left: 28px;
    height: calc(100% - 70px);
  }
}

.flow__number{
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  width: 40px;
  height: 40px;
  background-color: var(--darkbrown);
  border-radius: 50%;
}
@media(min-width: 768px) {
  .flow__number{
    width: 56px;
    height: 56px;
  }
}

.flow__number p{
  color: var(--white);
  font-family: "Abril Fatface", serif;
  font-size: clamp(1.875rem, 1.616rem + 1.1vw, 2.5rem); /* 30px--40px */
}

.flow__label{
  margin-bottom: 1rem;
}

/* 料金 */

.price__inner{
  position: relative;
  max-width: 1120px;
  padding: 0 2%;
}

.price__bg img{
  width: 100%;
  min-height: 310px;
  max-height: 550px;
}

.price__contents{
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  padding: 0 10%;
  color: var(--white);
  text-align: center;
}

.price__title img{
  display: block;
  margin: 0 auto;
}

.price__text{
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(1.25rem, 0.732rem + 2.21vw, 2.5rem); /* 20px--40px */
  margin: 24px 0;
}
@media(min-width: 768px) {
  .price__text{
    margin: 32px 0;
  }
}

.price__note{
  font-size: clamp(0.625rem, 0.521rem + 0.44vw, 0.875rem); /* 10px--14px */
}

/* ////////// よくあるご質問 ////////// */

.faq__inner{
  padding: 0 2%;
}

.faq__contents{
  width: 100%;
  max-width: 1080px;
  margin: 24px auto 48px;
  padding: 2%;
  background-color: #EBE5D5;
}
@media(min-width: 768px) {
  .faq__contents{
    margin: 48px auto 80px;
  }
}

.faq__contents li+li{
  margin-top: 1rem;
}

.faq__text{
  margin: 0 auto;
  background-color: var(--white);
}

.faq__q{
  padding: 1rem;
  font-size: clamp(1rem, 0.896rem + 0.44vw, 1.25rem); /* 16px--20px */
  font-weight: bold;
  cursor: pointer;
}

.faq__a{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq__a p{
  padding: .5rem 1rem 1rem;
}

/* ////////// 申し込みCTAボタン ////////// */

.cta-button__wrap{
  margin-bottom: 80px;
}

.cta-button{
  display: flex;
  justify-content: center;
  width: clamp(320px, 40vw, 460px);
  margin: 0 auto;
  padding: 20px 16px;
  background-color: #FFD02E;
  border-radius: 30px;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.4);
  outline: 1px #4E352F solid;
  outline-offset: -10px;
  color: var(--darkbrown);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(1.25rem, 1.095rem + 0.66vw, 1.625rem); /* 20px--26px */
  font-weight: bold;
  transition: all .2s;
}

.cta-button:hover{
  opacity: 1;
  outline: 1px #4E352F solid;
  outline-offset: -10px;
  transform: scale(1.03,1.03);
}

.cta-button:active{
  transform: scale(.95);
}

/* ////////// サイド追従申し込みボタン ////////// */

.sticky-button{
  position: fixed;
  top: 96px;
  right: -120%; /* 初期は画面外 */
  transition: right 1s ease;
}

.sticky-button.active {
  right: -3px; /* 画面内にスライドイン */
}

.sticky-button:hover{
  transform: rotate(-2deg);
  transform-origin:right bottom;
}

.sticky-button__link{
  display: none;
}
@media(min-width: 768px) {
  .sticky-button__link{
    display: block;
  }
}

.sticky-button__link:hover{
  opacity: 1;
}

.sticky-button__link img{
  height: 18vh;
}
@media(min-width: 1024px) {
  .sticky-button__link img{
    height: 220px;
  }
}

/* ////////// sp下部 追従申し込みボタン ////////// */

.sp-sticky-button{
  position: fixed;
  bottom: -100px; /* 初期は画面外 */
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0;
  transition: bottom 1s ease;
}
@media(min-width: 768px) {
  .sp-sticky-button{
    display: none;
  }
}

.sp-sticky-button.active {
  bottom: 12px; /* 画面内にスライドイン */
}

/* ////////// TOPへ戻る ////////// */

.back-to-top{
  position: fixed;
  bottom: 80px;
  right: 3%;
  width: 40px;
  height: 60px;
  opacity: 0; /* 初期状態: 透明 */
  visibility: hidden; /* スクリーンリーダー等から隠す */
  transition: opacity 0.5s ease, visibility 0.5s ease; /* 0.5秒かけて変化 */
}
@media(min-width: 768px) {
  .back-to-top{
    bottom: 76px;
    right: 35px;
    width: 55px;
    height: 70px;
  }
}

.back-to-top.show {
  opacity: 1; /* .showクラスが付くと表示 */
  visibility: visible;
}

.back-to-top:hover{
  transform: translateY(-5px);
}

.back-to-top__link{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(252, 249, 239, 0.7);
  border: 2px solid #7A6665;
}

.back-to-top__link:hover{
  opacity: 1;
}

.back-to-top__link img{
  width: 20px;
  height: 50px;
}
@media(min-width: 1024px) {
  .back-to-top__link img{
    width: 25px;
    height: 55px;
  }
}

/* フッター */

.footer{
  background-color: var(--darkbrown);
}

.footer__link-list{
  gap: 10px;
  margin: 2rem 0;
  text-align: center;
}
@media(min-width: 768px) {
  .footer__link-list{
    justify-content: center;
    gap: 1.5rem;
  }
}

@media(min-width: 768px) {
  .footer__link-list li+li{
    border-left: 1px solid #FCF9EF;
    padding-left: 1.5rem;
  }
}

.footer__link-item a{
  color: var(--white);
  font-size: clamp(0.875rem, 0.823rem + 0.22vw, 1rem); /* 14px--16px */
}

.footer__copyright{
  margin-bottom: 8px;
  color: var(--beige);
  font-size: 12px;
  text-align: center;
}