@charset "UTF-8";

/*
  # Settings
---------------------------------------------- */
:root {
  --color-primary: #0e801d;
  --color-secondary: #892b3e;
  --color-text: #000;
  --color-bg: #fff;
  --color-bg-secondary: #f5f5f5;

  /* font-size */
  --fz12: calc(12 / 16 * 1rem);
  --fz13: calc(13 / 16 * 1rem);
  --fz14: calc(14 / 16 * 1rem);
  --fz15: calc(15 / 16 * 1rem);
  --fz16: calc(16 / 16 * 1rem);
  --fz18: calc(18 / 16 * 1rem);
  --fz20: calc(20 / 16 * 1rem);
  --fz26: calc(26 / 16 * 1rem);
  --fz32: calc(32 / 16 * 1rem);
  --fz36: calc(36 / 16 * 1rem);

  /* font-family */
  --font-primary: "Noto Sans JP", sans-serif;
}

/*
  # BASE
---------------------------------------------- */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fz16);
  font-family: var(--font-primary);
  font-weight: 500;
  font-optical-sizing: auto;
  font-style: normal;
}
:where(p) {
  line-height: 1.8;
}
:where(a) {
  text-decoration: none;
}
.uppercase {
  text-transform: uppercase;
}

/*
  # Common Styles
---------------------------------------------- */
.container {
  display: grid;
  place-items: center;
}

.btn-buy {
  overflow: hidden;
  position: relative;
  z-index: 1;

  background: var(--color-primary);
  color: #fff;
  padding: calc(6 / 16 * 1rem) calc(42 / 16 * 1rem);
  text-align: center;
  font-weight: 700;
  display: block;
  width: fit-content;
  margin-inline: auto;
  font-size: var(--fz20);
  border-radius: calc(4 / 16 * 1rem);
  border: 2px solid var(--color-primary);
  line-height: 1.2;
}

.btn-buy::after {
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}
.btnText--upper {
  font-size: var(--fz13);
  display: block;
}
/* ホバースタイル */
@media (any-hover: hover) {
  .btn-buy:hover {
    color: var(--color-primary);
  }
  .btn-buy:hover::after {
    transform: scale(1, 1);
  }
}
.bookcover__image {
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}

/*
  # Header
---------------------------------------------- */
header {
  border-top: 10px solid #892b3e;
  background-color: #fff;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(10 / 16 * 1rem);
  width: 100%;
  position: relative;
}

.header__nav {
  width: calc(360 / 16 * 1rem);
}

.header__nav ul {
  display: flex;
  list-style: none;
}

.header__nav ul {
  display: flex;
  list-style: none;
  gap: 1em;
  align-items: center;
  li {
    width: fit-content;
  }
}
.btn-header__sp {
  display: none;
}

.header__nav-list__logo {
  display: none;
}
.header__nav-list__btn-buy--PC {
  display: block;
}
.header__nav-list__btn-buy--SP {
  display: none;
}

.textLink {
  color: var(--color-text);
  padding-right: 0.5em;
  font-size: var(--fz14);
  display: block;
  position: relative;
  transition: color 0.2s ease;
  font-size: var(--fz14);
}
/* ホバースタイル */
@media (any-hover: hover) {
  .textLink:hover {
    color: var(--color-secondary);
  }
}

.textLink-icon {
  position: absolute;
  top: 40%;
  left: -8px;
}

.btn-header {
  padding: calc(12 / 16 * 1rem) calc(46 / 16 * 1rem);
  font-size: var(--fz16);
}

.header__nav-hamburger {
  display: none;
}

@media (width <= 638px) {
  .btn-header__sp {
    display: block;
  }
  .btn-header {
    margin-right: calc(52 / 16 * 1rem);
    font-size: var(--fz12);
    padding: calc(4 / 16 * 1rem) calc(12 / 16 * 1rem);
  }
  .btn-header__pc {
    display: none;
  }
  .header__nav {
    width: fit-content;
  }
  .header__nav-list__logo {
    display: block;
    margin-bottom: 26px;
  }
  .header__nav-list__btn-buy--SP {
    display: block;
    width: 100%;
  }
  .header__nav-list--wrapper {
    position: fixed;
    top: 0;
    right: -110%;
    width: 100%;
    height: 100%;
    background-color: var(--color-secondary);
    color: #fff;
    transition: right 0.3s ease, visibility 0s 0.3s; /* visibilityは遅延させる */
    z-index: 10;
    padding: 0 10%;
    visibility: hidden;
  }
  .header__nav ul {
    display: grid;
    width: 100%;
    margin-top: calc(60 / 16 * 1rem);
    place-items: center;
  }
  .header__nav ul {
    display: grid;
    width: 100%;
    max-width: 288px;
    margin-top: calc(68 / 16 * 1rem);
    place-items: center;
    margin-inline: auto;
    gap: 0;
  }
  .textLink {
    color: #fff;
    border-bottom: 1px solid #fff;
    display: block;
    padding-left: calc(10 / 16 * 1rem);
    padding-bottom: calc(10 / 16 * 1rem);
    margin-top: 14px;
    font-size: var(--fz16);
  }
  /* ホバースタイル */
  @media (any-hover: hover) {
    .textLink:hover {
      color: #fff;
    }
  }
  .textLink-icon {
    left: 0;
    top: 28%;
  }

  .textLink-icon path {
    fill: #fff;
    left: 0;
  }
  .header__nav li:has(.textLink) {
    width: 100%;
  }
  .header__nav-list li:last-child {
    width: 100%;
    margin: 26px 0 0;
    padding: 0;
  }
  /* メニューが表示される状態 */
  .header__nav-list--wrapper.is-open {
    right: 0;
    visibility: visible;
    transition: right 0.3s ease, visibility 0s 0s;
  }
  .header__nav-hamburger {
    display: block;
  }

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

  .header__nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(44 / 16 * 1rem);
    height: calc(22 / 16 * 1rem);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .hamburger__border {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #000;
    transition: all 0.3s ease;
  }

  /* ハンバーガーメニューがアクティブなときのスタイル */
  .header__nav-hamburger.is-open .hamburger__border {
    background-color: #fff;
  }

  .header__nav-hamburger.is-open .hamburger__border:nth-child(1) {
    transform: rotate(45deg) translate(12px, 2px);
    width: 32px;
  }

  .header__nav-hamburger.is-open .hamburger__border:nth-child(2) {
    opacity: 0;
  }

  .header__nav-hamburger.is-open .hamburger__border:nth-child(3) {
    transform: rotate(-45deg) translate(12px, -2px);
    width: 32px;
  }
}
@media (width <= 638px) {
  .header__inner {
    padding: calc(6 / 16 * 1rem) calc(10 / 16 * 1rem);
  }
  .header__logo img {
    width: 100%;
    max-width: 192px;
  }
}

/*
  # メインビジュアル
---------------------------------------------- */
.mainVisual {
  width: 100%;
  margin-top: calc(78 / 16 * 1rem);
  padding: 0 4%;
}
.mainVisual .btn-buy {
  margin-top: calc(26 / 16 * 1rem);
}
.mainVisual__author {
  margin-top: calc(22 / 16 * 1rem);
}

@media (width <= 768px) {
  .mainVisual {
    margin-top: calc(90 / 16 * 1rem);
  }
  .mainVisual__author {
    margin-top: calc(42 / 16 * 1rem);
  }
}
@media (width <= 390px) {
  .mainVisual {
    margin-top: calc(104 / 16 * 1rem);
    padding: 0 3%;
  }
  .mainVisual__author {
    margin-top: calc(30 / 16 * 1rem);
  }
}

/*
  # 経営の本質
---------------------------------------------- */
.essence {
  background: var(--color-secondary);
  color: #fff;
  display: flex;
  margin-top: calc(64 / 16 * 1rem);
  padding: calc(52 / 16 * 1rem) calc(58 / 16 * 1rem) calc(46 / 16 * 1rem);
}
.essence__inner {
  margin-inline: auto;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr auto;
  justify-content: space-between;
  width: 100%;
  max-width: 1310px;
  align-items: center;
  gap: calc(54 / 16 * 1rem);
}
.essence__paragraph p {
  line-height: 1.7;
}
.essence__paragraph--text {
  font-size: var(--fz20);
}
.essence__paragraph--author {
  font-size: var(--fz16);
  margin-top: calc(6 / 16 * 1rem);
}

@media (width <1150px) {
  .essence {
    padding: calc(40 / 16 * 1rem) calc(58 / 16 * 1rem);
  }
  .essence__inner {
    grid-auto-flow: row;
    grid-template-columns: unset;
    place-items: center;
    justify-content: center;
    gap: calc(20 / 16 * 1rem);
  }
  .essence__title {
    max-width: calc(430 / 16 * 1rem);
  }
  br.hide {
    display: none;
  }
}

@media (width <= 768px) {
  .essence {
    padding-top: calc(24 / 16 * 1rem);
    padding-bottom: calc(24 / 16 * 1rem);
  }
}

@media (width <= 570px) {
  .essence {
    padding: calc(34 / 16 * 1rem) 6.5%;
  }
}

@media (width <= 390px) {
  .essence {
    margin-top: calc(58 / 16 * 1rem);
  }
  .essence__paragraph--text {
    font-size: var(--fz16);
  }
  .essence__paragraph--author {
    font-size: var(--fz14);
  }
}

/*
  # その山は、勝てる山か？
---------------------------------------------- */
.mountain {
  padding: 0 calc(90 / 16 * 1rem);
}
.mountain__inner {
  display: flex;
  gap: min(3vw, 54px);
  margin-inline: auto;
  max-width: 1418px;
  margin-top: calc(120 / 16 * 1rem);
}
.mountain__text {
  width: 68%;
}
.mountain__subTitle {
  margin-left: 1.7%;
  width: 63%;
}
.mountain__title {
  margin-top: 2.2%;
}
.mountain__img {
  width: 36.4%;
}
.mountain__paragraph--upperText {
  margin-top: 5.7%;
  width: 63%;
}
.mountain__paragraph--bottomText {
  margin-top: 3%;
  width: 87%;
}

@media (width <= 1024px) {
  .mountain {
    padding: 0 calc(58 / 16 * 1rem);
  }
  .mountain__inner {
    margin-top: calc(70 / 16 * 1rem);
  }
}

@media (width <= 768px) {
  .twoVentures {
    margin-top: calc(94 / 16 * 1rem);
  }
}

@media (width <= 570px) {
  .mountain {
    padding: 0 6.5%;
  }
}

@media (width <= 460px) {
  .mountain__inner {
    display: block;
    margin-top: calc(52 / 16 * 1rem);
  }
  .mountain__text {
    width: 100%;
  }
  .mountain__title {
    margin-top: 3%;
  }
  .mountain__subTitle {
    margin-left: calc(6 / 16 * 1rem);
  }
  .mountain__paragraph--upperText {
    margin-top: 6%;
  }
  .mountain__paragraph--bottomText {
    margin-top: 3%;
  }
  .mountain__img {
    width: 100%;
    margin-top: 7%;
  }
}

/*
  # 明暗を分けたベンチャー
---------------------------------------------- */
.twoVentures {
  background: var(--color-bg-secondary);
  padding: calc(70 / 16 * 1rem) calc(58 / 16 * 1rem) calc(86 / 16 * 1rem);
  margin-top: calc(168 / 16 * 1rem);
}

.twoVentures__inner {
  display: grid;
  /* grid-template-columns: repeat(2, auto);
  grid-template-rows: calc(196 / 16 * 1rem) calc(314 / 16 * 1rem) calc(288 / 16 * 1rem);
  gap: 0 calc(38 / 16 * 1rem); */
  grid-template-rows: repeat(3, auto);
  max-width: 1026px;
  gap: 0 40px;
}
.company-description__create {
  grid-column-start: 1;
  grid-row-start: 2;
  margin-top: calc(32 / 16 * 1rem);
}
.company-description__yamamoto {
  grid-row-start: 3;
  margin-top: calc(50 / 16 * 1rem);
}
.company-description__title {
  letter-spacing: 0.07em;
}
.company-description__paragraph {
  margin-top: calc(24 / 16 * 1rem);
}
.company-description__paragraph--bottom {
  margin-top: calc(12 / 16 * 1rem);
}
.company-image__create {
  grid-row: span 2 / span 2;
  grid-column-start: 2;
  grid-row-start: 1;
}
.company-image__yamamoto {
  grid-row-start: 3;
  grid-column-start: 2;
  margin-top: calc(42 / 16 * 1rem);
}
.twoVentures figcaption {
  font-size: var(--fz12);
  text-align: center;
  margin-top: calc(6 / 16 * 1rem);
}
.twoVentures .btn-buy {
  margin-top: calc(52 / 16 * 1rem);
}

@media (width <= 1024px) {
  .twoVentures {
    margin-top: calc(114 / 16 * 1rem);
  }
  .twoVentures__inner {
    gap: 0 34px;
  }
  .company-description__create {
    margin-top: calc(86 / 16 * 1rem);
  }
  .company-image__yamamoto {
    margin-top: calc(20 / 16 * 1rem);
  }
  .company-description__yamamoto {
    margin-top: calc(30 / 16 * 1rem);
  }
}

@media (width <= 768px) {
  .twoVentures {
    margin-top: calc(94 / 16 * 1rem);
    padding-bottom: calc(66 / 16 * 1rem);
  }
  .twoVentures__inner {
    display: block;
  }
  .twoVentures__heading {
    width: 100%;
    max-width: calc(534 / 16 * 1rem);
  }
  .company-image__create {
    margin-top: calc(56 / 16 * 1rem);
    width: fit-content;
    margin-inline: auto;
  }
  .company-description__create {
    margin-top: calc(50 / 16 * 1rem);
  }
  .company-image__yamamoto {
    margin-top: calc(50 / 16 * 1rem);
    width: fit-content;
    margin-inline: auto;
  }
  .company-description__yamamoto {
    margin-top: calc(48 / 16 * 1rem);
  }
  .twoVentures .btn-buy {
    margin-top: calc(54 / 16 * 1rem);
  }
}

@media (width <= 570px) {
  .twoVentures {
    margin-top: calc(56 / 16 * 1rem);
    padding: calc(40 / 16 * 1rem) 6.5% calc(54 / 16 * 1rem);
  }
}
@media (width <= 390px) {
  .twoVentures {
    margin-top: calc(56 / 16 * 1rem);
  }
  .company-image__create {
    margin-top: calc(48 / 16 * 1rem);
  }
  .twoVentures .btn-buy {
    margin-top: calc(44 / 16 * 1rem);
  }
}

/*
  # 著者
---------------------------------------------- */
.author {
  padding: 0 calc(58 / 16 * 1rem) calc(108 / 16 * 1rem);
}
.author__heading {
  margin-top: calc(84 / 16 * 1rem);
  font-size: var(--fz20);
}
.author__inner {
  margin-inline: auto;
  width: fit-content;
  max-width: 1025px;
  display: grid;
  grid-auto-flow: column;
  gap: calc(44 / 16 * 1rem);
  margin-top: calc(52 / 16 * 1rem);
}
.author__text {
  width: 100%;
  max-width: calc(668 / 16 * 1rem);
}
.author__text--titleBox {
  display: flex;
  align-items: center;
  gap: calc(12 / 16 * 1rem);
}
.author__text--title {
  font-size: var(--fz20);
  font-weight: 700;
}
.author__text--subTitle {
  font-size: var(--fz14);
  font-weight: 700;
  margin-top: 0.1em;
}
.author__text--post {
  font-size: var(--fz14);
  font-weight: 700;
}
.author__text--paragraph {
  margin-top: calc(14 / 16 * 1rem);
}
.author__text--paragraph:first-child {
  margin-top: 1rem;
}
.author__company {
  --author__company-border: #d3d9e9;
  border: 1px solid var(--author__company-border);
  background: var(--color-bg-secondary);
  display: flex;
  padding: calc(16 / 16 * 1rem) calc(50 / 16 * 1rem);
  gap: calc(54 / 16 * 1rem);
  margin-top: calc(88 / 16 * 1rem);
  align-items: center;
}
.author__company__logoBox {
  margin-top: 3px;
}
.author__company__mail {
  text-align: center;
  font-size: var(--fz14);
  margin-top: calc(10 / 16 * 1rem);
}
.author__company__list {
  list-style: disc;
  padding-left: 1rem;
  font-size: var(--fz14);
  line-height: 1.8;
}

@media (width <= 1024px) {
  .author__company {
    margin-top: calc(60 / 16 * 1rem);
  }
}
@media (width <= 768px) {
  .author {
    padding: 0 calc(58 / 16 * 1rem) calc(88 / 16 * 1rem);
  }
  .author__inner {
    grid-template-columns: 32% 61%;
    gap: 6vw;
  }
  .author__company {
    margin-top: calc(36 / 16 * 1rem);
    padding: calc(16 / 16 * 1rem) calc(43 / 16 * 1rem);
    gap: calc(48 / 16 * 1rem);
  }
  .author__company__logoBox {
    width: 39%;
  }
  .author__company__list {
    padding-left: 0rem;
  }
}
@media (width <= 570px) {
  .author {
    padding: 0 6.5% calc(74 / 16 * 1rem);
  }
}
@media (width <= 500px) {
  .author__heading {
    margin-top: calc(44 / 16 * 1rem);
  }
  .author__inner {
    display: block;
  }
  .author__img img {
    width: 100%;
  }
  .author__text {
    margin-top: calc(42 / 16 * 1rem);
  }
  .author__text--paragraph {
    font-size: var(--fz14);
    margin-top: calc(12 / 16 * 1rem);
  }
  .author__text--paragraph__wrapper {
    margin-top: calc(20 / 16 * 1rem);
  }
  .author__company {
    margin-top: calc(36 / 16 * 1rem);
    display: block;
    padding: calc(16 / 16 * 1rem) calc(12 / 16 * 1rem);
    width: 100%;
  }
  .author__company__logoBox {
    width: 74%;
    margin-inline: auto;
  }
  .author__company__list {
    margin-top: calc(26 / 16 * 1rem);
    padding-left: 1.2rem;
  }
}
/*
  # 書籍情報
---------------------------------------------- */
.bookInformation {
  background-color: var(--color-bg-secondary);
  padding: calc(44 / 16 * 1rem) calc(58 / 16 * 1rem) calc(24 / 16 * 1rem);
}
.bookInformation__title {
  font-size: var(--fz20);
}
.bookIndex__wrapper {
  width: 100%;
}
.bookInformation__inner {
  display: flex;
  width: fit-content;
  margin-top: calc(44 / 16 * 1rem);
  gap: calc(30 / 16 * 1rem);
}
.bookInformation__img img {
  max-width: calc(272 / 16 * 1rem);
}
.bookInformation__text {
  margin-top: calc(4 / 16 * 1rem);
  width: calc(274 / 16 * 1rem);
}
.bookInformation__item {
  display: flex;
  border-bottom: 1px solid #bdc4d5;
  font-size: var(--fz12);
  padding: 3px 0;
}
.bookInformation__item dt {
  width: 3em;
  text-align-last: justify;
}
.bookInformation__btn {
  margin-top: calc(22 / 16 * 1rem);
  width: 100%;
}
.bookIndex {
  width: 100%;
  margin-inline: auto;
  max-width: 1024px;
}
.bookIndex__header {
  background: var(--color-secondary);
  color: #fff;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  width: 100%;
  margin-top: calc(70 / 16 * 1rem);
  font-size: var(--fz14);
  padding: calc(8 / 16 * 1rem) calc(16 / 16 * 1rem);
  align-items: center;
}
.bookIndex__title {
  font-size: var(--fz14);
}
.bookIndex__list {
  max-width: 1024px;
  width: 100%;
  display: flex;
  flex-wrap: wrap; /* 複数行に要素を配置 */
  flex-direction: column;
  counter-reset: chapter0 -1; /* カウンターの初期化を-1にする */
  margin-top: calc(18 / 16 * 1rem);
}
.bookIndex__chapter {
  width: calc((100% - 52px) / 3);
  margin-right: 26px;
}

/* 大見出し */
.bookIndex__chapter {
  counter-increment: chapter0;
  position: relative;
}

.chapterTitle {
  background-color: #fff;
  display: block;
  padding: calc(6 / 16 * 1rem) calc(8 / 16 * 1rem) calc(6 / 16 * 1rem) calc(40 / 16 * 1rem);
  font-size: var(--fz14);
  font-weight: 700;
  margin-top: calc(8 / 16 * 1rem);
  position: relative;
  line-height: 1.4;
}

.chapterTitle:before {
  content: counter(chapter0); /* カウンターの値を表示 */
  position: absolute;
  top: 0;
  left: 0;
  font-weight: bold; /* 数字を太字にする */
  background: var(--color-secondary);
  color: #fff;
  padding: 0 calc(12 / 16 * 1rem);
  font-size: var(--fz14);
  height: 100%;
  display: grid;
  place-content: center;
}

/* 小見出し */
.bookIndex__chapter > ol {
  counter-reset: section1; /* カウンターの初期化 */
  list-style: none; /* デフォルトのリストスタイルを無効にする */
  padding-left: 0; /* 左のパディングをリセット */
}

.bookIndex__chapter > ol > li {
  counter-increment: section1;
  position: relative;
  font-size: var(--fz14);
  margin: calc(8 / 16 * 1rem) calc(4 / 16 * 1rem) 0 0;
}

.sectionTitle {
  border-bottom: 1px dashed #000;
  display: block;
  padding-left: calc(26 / 16 * 1rem);
  padding-bottom: calc(8 / 16 * 1rem);
  line-height: 1.4;
}

.bookIndex__chapter > ol > li:before {
  content: counter(section1); /* カウンターの値を表示 */
  position: absolute;
  top: 0;
  left: 0;
  font-weight: bold; /* 数字を太字にする */
  font-weight: 700;
  padding: 0 calc(8 / 16 * 1rem);
}

.bookIndex__chapter li ol {
  padding-left: 1em;
  padding: calc(6 / 16 * 1rem) calc(10 / 16 * 1rem) calc(6 / 16 * 1rem) calc(30 / 16 * 1rem);
}

.bookIndex__chapter li li {
  list-style: decimal;
  font-size: var(--fz12);
  line-height: 1.6;
}

@media (width <= 1024px) {
  .bookInformation {
    background-color: var(--color-bg-secondary);
    padding-top: calc(40 / 16 * 1rem);
    padding-bottom: calc(4 / 16 * 1rem);
  }
}

@media (width <= 690px) {
  .bookInformation {
    padding-bottom: calc(56 / 16 * 1rem);
  }
  .bookInformation__inner {
    display: block;
  }
  .bookIndex__list {
    display: block;
  }
  .bookIndex__chapter {
    width: 100%;
  }
}
@media (width <= 570px) {
  .bookInformation {
    padding-top: calc(40 / 16 * 1rem);
    padding-left: 6.5%;
    padding-right: 6.5%;
  }
}

@media (width <= 390px) {
  .bookInformation__inner {
    width: 100%;
  }
  .bookInformation__img img {
    max-width: 100%;
  }
  .bookInformation__text {
    margin-top: calc(34 / 16 * 1rem);
    width: 100%;
  }
  .bookIndex__header {
    padding: calc(8 / 16 * 1rem) calc(10 / 16 * 1rem);
  }
  .bookIndex__header .lineBroken {
    display: block;
  }
  .bookIndex__list {
    margin-top: calc(28 / 16 * 1rem);
  }
}

/*
  # 購入特典
---------------------------------------------- */
#benefits {
  scroll-margin-top: calc(120 / 16 * 1rem);
}
.benefits {
  background-color: #f0e4e6;
  padding-bottom: calc(50 / 16 * 1rem);
  display: grid;
  place-items: center;
}

.benefits__header {
  background-color: var(--color-secondary);
  color: #fff;
  width: 100%;
  text-align: center;
  position: relative;
  padding: calc(24 / 16 * 1rem) 6.5% calc(30 / 16 * 1rem);
}
.benefits__title {
  font-size: var(--fz36);
}
.benefits__subtitle {
  font-size: var(--fz14);
  background: #fff;
  border-radius: 3em;
  border: 3px solid var(--color-secondary);
  color: var(--color-secondary);
  display: inline-block;
  padding: 0 calc(16 / 16 * 1rem);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -1rem;
  font-weight: 700;
}

.benefits .lineBrake {
  display: block;
}
.benefits__text__wrapper {
  margin-inline: auto;
  width: fit-content;
}
.benefits__text {
  line-height: 1.5;
  text-align: left;
}
.benefits.lineBrake {
  display: block;
}

.form__wrapper {
  padding: 0 6.5vw;
  display: grid;
  place-items: center;
  width: 100%;
}
.isbn-label {
  font-size: var(--fz15);
  font-weight: 700;
  line-height: 1.6;
  margin-top: calc(52 / 16 * 1rem);
}

.isbn-code__input {
  width: 100%;
  max-width: calc(630 / 16 * 1rem);
  border: none;
  padding: calc(20 / 16 * 1rem) calc(16 / 16 * 1rem);
  border-radius: 6px;
  margin: 1em 0;
}
::placeholder {
  color: #818181;
  font-size: var(--fz14);
}
.btn-benefits {
  background-color: var(--color-secondary);
  color: #fff;
  padding: calc(12 / 16 * 1rem) calc(16 / 16 * 1rem);
  font-weight: 700;
  border-radius: 6px;
  font-size: var(--fz14);
  border: 2px solid var(--color-secondary);
}
/* ホバースタイル */
@media (any-hover: hover) {
  .btn-benefits:hover {
    background-color: #fff;
    color: var(--color-secondary);
  }
}

@media (width <= 470px) {
  .benefits {
    padding-bottom: calc(32 / 16 * 1rem);
  }
  .benefits__header {
    padding-top: calc(24 / 16 * 1rem);
    padding-bottom: calc(24 / 16 * 1rem);
  }
  .benefits__title {
    font-size: var(--fz32);
  }
  .benefits__text {
    font-size: var(--fz14);
  }
  .benefits .lineBrake {
    display: inline;
  }
  .isbn-label {
    margin-top: calc(24 / 16 * 1rem);
  }
  .isbn-code__input {
    margin: calc(20 / 16 * 1rem) 0 calc(18 / 16 * 1rem);
  }
  .btn-benefits {
    padding: calc(12 / 16 * 1rem) calc(16 / 16 * 1rem);
  }
}
@media (width <= 370px) {
  .benefits__title {
    font-size: var(--fz26);
  }
}
/*
  # お問い合わせ
---------------------------------------------- */
#contact {
  scroll-margin-top: calc(120 / 16 * 1rem);
}
.contact {
  margin-inline: auto;
  padding: 0 6.5vw calc(118 / 16 * 1rem);
  margin-top: calc(72 / 16 * 1rem);
}
.contact__header {
  text-align: center;
}
.contact__title {
  font-size: var(--fz20);
}
.contact__require {
  color: #da0000;
  font-size: var(--fz12);
}
.snow-monkey-form {
  width: 100%;
  max-width: 638px;
  margin-top: calc(2 / 16 * 1rem);
}
.wp-block-snow-monkey-forms-item {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 20% 1fr;
  gap: 2%;
  align-items: center;
  margin-top: calc(20 / 16 * 1rem);
}

.smf-item__label__text {
  font-size: var(--fz14);
  line-height: 1.3;
}

.wp-block-snow-monkey-forms-item:nth-last-child(-n + 2) {
  align-items: start;
  margin-top: calc(20 / 16 * 1rem);
}

.smf-form .smf-item .smf-text-control__control {
  width: 100%;
  border-radius: calc(6 / 16 * 1rem);
  border: 1px solid #c9c9c9;
  padding: calc(10 / 16 * 1rem);
}

.smf-radio-buttons-control__control {
  font-size: var(--fz14);
}
.smf-radio-buttons-control__control .smf-label:not(:first-child) {
  font-size: var(--fz14);
  margin-top: calc(-2 / 16 * 1rem);
}
.smf-form .smf-item .smf-textarea-control__control {
  border-radius: calc(6 / 16 * 1rem);
  height: calc(220 / 16 * 1rem);
}
.smf-action .smf-button-control__control {
  border-radius: calc(4 / 16 * 1rem);
  border: 1px solid #0075ea;
  background: #fff;
  color: #0080ff;
  font-weight: 700;
  margin-inline: auto;
  display: block;
  margin-top: calc(36 / 16 * 1rem);
  padding: calc(10 / 16 * 1rem) calc(44 / 16 * 1rem);
}
/* ホバースタイル */
@media (any-hover: hover) {
  .smf-action .smf-button-control__control:hover {
    background-color: #0080ff;
    color: #fff;
  }
}
@media (width <= 1024px) {
  .contact {
    margin-top: 6.3vw;
  }
}

@media (width <= 768px) {
  .contact {
    margin-top: 7vw;
  }
}

@media (width <= 650px) {
  .contact {
    margin-top: 10vw;
    padding: 0 6.5vw calc(64 / 16 * 1rem);
  }
  .wp-block-snow-monkey-forms-item {
    display: block;
    margin-top: calc(20 / 16 * 1rem);
  }
  .smf-item__col--controls {
    margin-top: calc(10 / 16 * 1rem);
  }
  .wp-block-snow-monkey-forms-item:last-child {
    margin-top: calc(12 / 16 * 1rem);
  }
}

/*
  # footer
---------------------------------------------- */
footer {
  background: var(--color-secondary);
  color: #fff;
  text-align: center;
  padding-bottom: calc(2 / 16 * 1rem);
}
.footer__text small {
  font-size: var(--fz12);
}