@charset "UTF-8";

/* ==============================================================================

  "ZAISAN" Index PC Style

============================================================================== */

/*
  "ZAISAN" Common Style Overwrite
============================================================================== */
/*
#top .l-header { background: rgba(var(--white-rgb), .8); }
#top .menu-trigger > div span { background-color: var(--black); }
#top .menu-trigger.is-toggled > div span { background-color: var(--white); }
#top .menu-trigger::after { color: var(--black); }
#top .menu-trigger.is-toggled::after { color: var(--white); }
.l-main { display: none; }
*/

/*
  Header
============================================================================== */
/* #top .l-header h1 { background-image: url(../common/images/zaisan_logo.svg); } */

/*
  Section Common
============================================================================== */
.sec-header {
  position: relative;
  width: 100%;
  height: 500px;
  background: url(../common/images/zaisan_common_img.jpg) no-repeat 50% 50%;
  background-size: cover;
  background-attachment: fixed;
}
/*
.sec-header img {
  height: 100%;
  object-fit: cover;
}
*/
.sec-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(var(--black-rgb), .7);
}
.sec-heading {
  position: relative;
  font-family: 'Antro Vectra', sans-serif;
  font-size: calc(90 / 1920 * 100vw);
  font-weight: 700;
  letter-spacing: .1em;
  display: block;
  color: var(--l-gray2);
  transform: scaleX(1.4);
  transform-origin: 0 50%;
  white-space: nowrap;
}
.sec-subheading {
  position: relative;
  font-family: "Tsukuhou Mincho", serif;
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 400;
  letter-spacing: .075em;
  line-height: 2.0;
  white-space: nowrap;
}
.sec-subheading::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2em;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: .1em;
}
.sec-pict img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/*
  Main Visual
============================================================================== */
.mv {
  padding: 320px 0 135px;
  height: 100%;
}
.mv .sec-pict {
  position: absolute;
  bottom: 470px;
  left: 0;
  width: 100%;
}
.mv .sec-pict img {
  width: 200%;
  height: calc(153 / 1920 * 100vw);
}
.mv .inner { padding: 0 100px; }
.intro {
  padding: 0 0 0 400px;
  margin: 0 0 150px;
}
.mv h2 {
  font-family: "Tsukuhou Mincho", serif;
  font-size: 70px;
  font-size: 7.0rem;
  font-weight: 400;
  color: var(--black);
  margin: 0 0 60px;
  letter-spacing: -.05em;
  white-space: nowrap;
}
.mv h3 {
  font-family: "Tsukuhou Mincho", serif;
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: 100;
  margin: 0 0 30px;
}
.mv p {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: calc(36 / 16);
}

@media screen and (max-width:1200px) {
  .mv .sec-pict { bottom: calc(470 / 1200 * 100vw); }
}

/*
  Section01
============================================================================== */
.sec01 {
  background-color: var(--m-gray2);
  padding: 0 0 230px;
}
.sec01 .sec-heading { top: calc(70 / 1920 * 100vw * -1); }
.sec01 .sec-subheading {
  color: var(--white);
  padding: 0 100px;
}
.sec01 .sec-pict {
  position: absolute;
  z-index: 1;
  right: -35px;
  top: 475px;
  width: calc(676 / 1920 * 100vw);
}
.message-content {
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin: 40px 0 0;
  padding: 0 100px;
}
.message-content figure { width: 40%; }
.message-content figure figcaption {
  font-family: "Tsukuhou Mincho", serif;
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: .1em;
  color: var(--white);
  white-space: nowrap;
  margin: 1em 0 0;
}
.message-content ul { width: 50%; }
.message-content ul li:first-of-type { margin: 0 0 40px; }
.message-content ul li p {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: calc(36 / 16);
  letter-spacing: .05em;
  color: var(--white);
}
.message-content ul li button { width: 100%; }
.message-content ul li button a {
  position: relative;
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: .1em;
  color: var(--white);
  text-decoration: none;
  line-height: 60px;
  background-color: var(--d-gray1);
  border: solid 1px var(--m-gray1);
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s;
}
.message-content ul li button a i {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin: 0 15px 0 0;
}
.message-content ul li button a:hover { background-color: var(--m-gray1); }

/*
  Section02
============================================================================== */
.sec02 { padding: calc(160 / 1920 * 100vw) 0 195px; }
.sec02 .sec-heading {
  text-align: right;
  transform-origin: 100% 50%;
}
.sec02 .sec-pict { width: calc(1609 / 1920 * 100vw); }
.sec02 .inner { padding: calc(105 / 1920 * 100vw) 0 0; }
.service-content {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 100px;
  margin: 100px 0 215px;
}
.service-content figure { width: 40%; }
.service-content ul { width: 50%; }
.service-content ul li:first-of-type { margin: 0 0 20px; }
.service-content ul li p {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: calc(36 / 16);
  letter-spacing: .05em;
}

/* 4つの力
------------------------------------------------------------------------------ */
.four-powers {
  text-align: center;
  padding: 0 100px;
}
.four-powers .sec-subheading::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background-color: var(--black);
}
.four-powers .sec-subheading span {
  position: relative;
  z-index: 1;
  width: fit-content;
  display: inline-block;
  background-color: var(--white);
  padding: 0 15px;
}
.four-powers h4 {
  position: relative;
  font-family: "Tsukuhou Mincho", serif;
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: .075em;
  line-height: calc(48 / 22);
  white-space: nowrap;
  margin: 35px 0 145px;
}
.three-pieces {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 80px;
  margin: 0 0 40px;
}

.one-piece dl dt {
  font-family: "Nobel Extra Light", sans-serif;
  font-size: 60px;
  font-size: 6.0rem;
  font-weight: 400;
}
.one-piece dl dd {
  font-family: 'Antro Vectra', sans-serif;
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: .05em;
  transform: scaleX(1.4);
  transform-origin: 50% 0;
}
.one-piece figure {
  width: 240px;
  margin: 10px auto 0;
}
.one-piece ul { margin: 20px 0 0; }
.one-piece ul li:first-of-type { margin: 0 0 15px; }
.one-piece h5 {
  font-family: "Tsukuhou Mincho", serif;
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 400;
  letter-spacing: .075em;
}
.one-piece p {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: calc(36 / 16);
  letter-spacing: .05em;
}

/*
  Section03
============================================================================== */
.sec03 {
  background-color: var(--m-gray2);
  padding: 0 0 200px;
}
.sec03 .sec-pict {
  position: absolute;
  z-index: 1;
  right: -10px;
  top: 560px;
  width: calc(843 / 1920 * 100vw);
}
.sec03 .sec-heading { top: calc(70 / 1920 * 100vw * -1); }
.sec03 .sec-subheading {
  color: var(--white);
  padding: 0 100px;
}
.sec03 .sec-subheading + p {
  padding: 0 100px;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: calc(36 / 16);
  letter-spacing: .05em;
  color: var(--white);
  margin: 40px 0 150px;
}
.booklist { padding: 0 100px; }
.book-unit {
  border-top: solid 1px var(--m-gray1);
  padding: 60px 0;
  display: grid;
  grid-template-columns: 375px 590px;
  align-items: flex-start;
  gap: 0 35px;
}
.book-unit:last-of-type { border-bottom: solid 1px var(--m-gray1); }
.book-photo {
  padding: 0 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.book-photo figure {
  width: 157px;
  aspect-ratio: 157 / 230;
  background-color: var(--black);
  flex-shrink: 0;
}
.book-photo p span {
  position: relative;
  top: -.25em;
  font-family: 'Antro Vectra', sans-serif;
  font-size: calc(24 / 60 * 1em);
  font-weight: 700;
  letter-spacing: .05em;
  transform: scaleX(1.4);
  transform-origin: 50% 50%;
  display: inline-block;
  margin: 0 1.5em 0 0;
  color: var(--white);
}
.book-photo p {
  font-family: "Nobel Extra Light", sans-serif;
  font-size: 60px;
  font-size: 6.0rem;
  font-weight: 400;
  color: var(--white);
}
.book-summary ul li { color: var(--white); }
.book-summary ul li h4 {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: calc(36 / 18);
  letter-spacing: .05em;
}
.book-summary ul li p {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: calc(36 / 16);
  letter-spacing: .05em;
}
.book-summary ul + button {
  width: 100%;
  margin: 30px 0 0;
}
.book-summary ul + button a {
  position: relative;
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: .1em;
  color: #f9f9f9;
  text-decoration: none;
  line-height: 60px;
  background-color: var(--d-gray1);
  border: solid 1px var(--m-gray1);
  text-align: center;
  max-width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s;
}
.book-summary ul + button a i {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin: 0 15px 0 0;
}
.book-summary ul + button a:hover { background-color: var(--m-gray1); }

.book-unit:nth-of-type(2) .book-summary ul + button a {
  pointer-events: none;
  background-color: var(--m-gray1);
}
.book-unit:nth-of-type(2) .book-summary ul + button a i { display: none; }
.book-unit:last-of-type { display: none; }

/*
  Section04
============================================================================== */
.sec04 { padding: calc(265 / 1920 * 100vw) 0 200px; }
.sec04 .sec-pict { width: calc(1562 / 1920 * 100vw); }
.sec04 .sec-heading {
  padding: calc(265 / 1920 * 100vw) 0 0;
  text-align: right;
  transform-origin: 100% 50%;
}
.sec04 .sec-subheading { margin: 0 0 40px; }
.sec04 .sec-subheading::before { content: "編集者"; }
.editor-content {
  margin: 0 0 100px;
  padding: 60px 100px 0;
}
.editor-content p {
  width: 685px;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: calc(36 / 16);
  letter-spacing: .05em;
}
.comment-content {
  width: calc(100% - 200px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0 60px;
  border-top: solid 1px #dfdfdf;
  border-bottom: solid 1px #dfdfdf;
  margin: auto;
  padding: 80px 0;
}
.comment-content figure {
  width: 200px;
  flex-shrink: 0;
}
.comment-content p {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: calc(36 / 16);
  letter-spacing: .05em;
}
.comment-content dl { margin: 30px 0 0; }
.comment-content dl dt {
  font-family: "Tsukuhou Mincho", serif;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 400;
  letter-spacing: .05em;
  line-height: calc(36 / 20);
  margin: 0 0 50px;
}

/*
  Section05
============================================================================== */
.sec05 {
  background-color: var(--m-gray2);
  padding: 0 0 200px;
}
.sec05 .sec-pict {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 420px;
  width: calc(799 / 1920 * 100vw);
}
.sec05 .sec-heading { top: calc(70 / 1920 * 100vw * -1); }
.sec05 .sec-subheading {
  color: var(--white);
  line-height: 1.0;
  margin: 0 0 45px;
}
.overview {
  position: relative;
  z-index: 2;
  padding: 0 100px;
}
.overview table {
  width: 100%;
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: .1em;
}
.overview table th {
  width: calc(170 / 1000 * 100%);
  font-weight: 400;
  text-align: left;
  color: var(--white);
  background-color: var(--m-gray1);
  padding: 35px 0 35px 35px;
}
.overview table td {
  width: calc(830 / 1000 * 100%);
  background-color: var(--l-gray1);
  padding: 35px;
}
.overview table tr:not(:last-of-type) { border-bottom: solid 1px var(--black); }

.overview table + button {
  width: 500px;
  padding: 0;
  margin: 170px auto 0;
  display: block;
}
.overview table + button a {
  position: relative;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: #f9f9f9;
  text-decoration: none;
  line-height: 80px;
  background-color: var(--d-gray1);
  border: solid 1px var(--m-gray1);
  text-align: center;
  width: 100%;
  display: block;
  transition: all .3s;
}
.overview table + button a::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  right: 20px;
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url(../common/images/icon_link.png) no-repeat 50% 50%;
  background-size: 100%;
}
.overview table + button a:hover { background-color: var(--m-gray1); }