/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Shippori Mincho', 'Yu Mincho', '游明朝', serif;
  color: #333;
  line-height: 1.8;
  background: #fff;
  font-kerning: normal;
  font-feature-settings: "palt";
  font-variant-east-asian: proportional-width;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* Variables */
:root {
  --navy: #0f1d2d;
  --gold: #c9a84c;
  --vw: 1vw;
}

@media (min-width: 1080px) {
  :root {
    --vw: min(1vw, 10.8px);
  }

  body {
    max-width: 1080px;
    margin: 0 auto;
  }
}

/* FV */
.fv__img {
  width: 100%;
  display: block;
}

/* CTA */
.cta-block {
  background: var(--navy);
  padding: 0 calc(5.1 * var(--vw)) calc(3.9 * var(--vw));
  position: relative;
  margin-top: calc(-40 * var(--vw));
  z-index: 1;
}

.cta-block--no-margin {
  margin-top: 0;
}

.cta-block__head {
  position: relative;
  padding-left: calc(19.6 * var(--vw));
  display: flex;
  align-items: center;
}

.cta-block__ribbon {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(16.6 * var(--vw));
}

.cta-block__title {
  width: 94%;
  margin-top: calc(5 * var(--vw));
}

.cta-block__btn {
  display: block;
  width: 91%;
  margin: calc(5 * var(--vw)) auto 0;
  transition: opacity 0.2s;
}

.cta-block__btn:hover {
  opacity: 0.85;
}

.cta-block__note {
  text-align: center;
  font-size: calc(3.4 * var(--vw));
  color: #fff;
  margin-top: calc(3.2 * var(--vw));
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* 3つの悲劇 */
.problems {
  position: relative;
  background-image: url('./assets/problems-bg.png');
  background-size: cover;
  background-position: center top;
  overflow: hidden;
  padding: calc(11 * var(--vw)) calc(5.2 * var(--vw)) calc(10 * var(--vw));
}

.problems::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(15, 29, 45, 0.4);
  z-index: 1;
}

.problems__man {
  position: absolute;
  right: 0;
  top: calc(-15 * var(--vw));
  width: calc(78 * var(--vw));
  z-index: 0;
}

.problems__body {
  position: relative;
  z-index: 2;
}

.problems__catch {
  width: calc(62 * var(--vw));
  margin-bottom: calc(15 * var(--vw));
}


.problems__list {
  display: flex;
  flex-direction: column;
  gap: calc(5.3 * var(--vw));
  margin-bottom: calc(5.1 * var(--vw));
}

.problems__item {
  background: #7a7a7a;
  padding: calc(2 * var(--vw)) calc(3 * var(--vw));
  display: flex;
  align-items: center;
  gap: calc(3.3 * var(--vw));
  width: fit-content;
}

.problems__item:nth-child(2) {
  margin-left: calc(2 * var(--vw));
}

.problems__item:nth-child(3) {
  margin-left: calc(5 * var(--vw));
}

.problems__check {
  width: calc(5 * var(--vw));
  flex-shrink: 0;
}

.problems__item-text {
  font-size: calc(3.7 * var(--vw));
  color: #fff;
  font-weight: 500;
  line-height: 1.3;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  letter-spacing: -0.05em;
}

.problems__item-text span {
  font-size: 0.78em;
}

.problems__note {
  font-size: calc(2.1 * var(--vw));
  color: #fff;
  line-height: 1.8;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 300;
}

/* SOS */
.sos {
  position: relative;
  background-image: url('./assets/sos-bg.png');
  background-size: 100% 100%;
  padding: calc(11 * var(--vw)) calc(7.2 * var(--vw)) calc(26 * var(--vw));
  z-index: 1;
}

.sos__title {
  width: 100%;
  margin-bottom: calc(9 * var(--vw));
}

.sos__case {
  width: calc(70 * var(--vw));
  margin: auto;
}

.sos__label {
  margin: 0 auto calc(5 * var(--vw));
}

.sos__text {
  font-size: calc(4.6 * var(--vw));
  color: #334455;
  line-height: 1.5;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;
  letter-spacing: -0.05em;
}

.sos__point {
  position: absolute;
  bottom: calc(-10 * var(--vw));
  left: 50%;
  transform: translateX(-50%);
  width: calc(28 * var(--vw));
  z-index: 2;
}

/* 決意 */
.story-service-bg {
  margin-top: calc(-30 * var(--vw));
  background-image: url('./assets/story-bg.png');
  background-size: cover;
  background-position: center top;
}

.story {
  position: relative;
  overflow: hidden;
  min-height: calc(115 * var(--vw));
  padding: calc(49.7 * var(--vw)) calc(4 * var(--vw)) calc(18 * var(--vw)) calc(46.6 * var(--vw));
}

.story__woman {
  position: absolute;
  left: calc(4 * var(--vw));
  bottom: 0;
  width: calc(43 * var(--vw));
}

.story__catch {
  width: 100%;
  margin-bottom: calc(7.8 * var(--vw));
}

/* サービス */
.service {
  margin-top: calc(-9 * var(--vw));
  z-index: 1;
  position: relative;
}

.service__header {
  width: 100%;
}

.service__block {
  padding: calc(13 * var(--vw)) calc(4.4 * var(--vw)) calc(6 * var(--vw));
  overflow: hidden;
}

.service__block--02 {
  padding-top: 0;
  padding-bottom: calc(12 * var(--vw));
}

.service__intro {
  position: relative;
  min-height: calc(42 * var(--vw));
}

.service__block--01 .service__label {
  width: calc(16 * var(--vw));
  margin-bottom: calc(5 * var(--vw));
}

.service__block--01 .service__title {
  width: calc(45 * var(--vw));
}

.service__block--01 .service__photo {
  position: absolute;
  right: calc(-21.2 * var(--vw));
  top: calc(-7 * var(--vw));
  width: calc(81.5 * var(--vw));
}

.service__block--02 .service__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: calc(5 * var(--vw));
}

.service__block--02 .service__label {
  width: calc(16 * var(--vw));
  margin-bottom: calc(4 * var(--vw));
  margin-right: calc(32 * var(--vw));
  margin-top: calc(1 * var(--vw));
}

.service__block--02 .service__title {
  width: calc(46 * var(--vw));
}

.service__block--02 .service__photo {
  position: absolute;
  left: calc(-4.8 * var(--vw));
  top: calc(0.5 * var(--vw));
  width: calc(60.3 * var(--vw));
}

.service__item {
  margin-bottom: calc(3.5 * var(--vw));
  overflow: hidden;
}

.service__item-title {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-size: calc(4.2 * var(--vw));
  font-weight: 700;
  font-family: 'Shippori Mincho', serif;
  text-align: center;
  padding: calc(0.3 * var(--vw)) calc(4.9 * var(--vw)) calc(0.3 * var(--vw)) calc(2 * var(--vw));
  min-width: 59%;
  clip-path: polygon(0 0, 95% 0, 100% 100%, 0 100%);
}

.service__item-text {
  display: block;
  font-size: calc(3.7 * var(--vw));
  color: #0f1d2d;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  line-height: 1.5;
  font-weight: 400;
  padding: calc(1.3 * var(--vw)) 0;
}

/* 比較表 */
.compare {
  background-image: url('./assets/table-bg.png');
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  padding: calc(15 * var(--vw)) calc(5 * var(--vw)) calc(12 * var(--vw));
  margin-top: calc(-10 * var(--vw));
  position: relative;
  z-index: 1;
}

.compare__title {
  width: calc(85 * var(--vw));
  margin: 0 auto calc(8 * var(--vw));
}

.compare__table {
  width: 100%;
}

/* 士業の先生へ */
.consultant {
  background-image: url('./assets/consultant-bg.png');
  background-size: cover;
  background-position: center top;
  padding-bottom: calc(34 * var(--vw));
}

.consultant__header {
  background: var(--gold);
  padding: calc(10 * var(--vw)) calc(7.2 * var(--vw)) calc(11 * var(--vw));
  text-align: center;
  margin-bottom: calc(8 * var(--vw));
  clip-path: polygon(0 0,
      100% 0,
      100% 85%,
      50% 100%,
      0 85%);
}

.consultant__header-title {
  font-size: calc(11.7 * var(--vw));
  color: #fff;
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  line-height: 1;
}

.consultant__intro-img {
  width: calc(77 * var(--vw));
  margin: 0 auto calc(5 * var(--vw));
}

.consultant__item {
  position: relative;
  margin: 0 calc(2.1 * var(--vw));
}


.consultant__footer-text {
  text-align: center;
  font-size: calc(5.1 * var(--vw));
  font-weight: 600;
  color: #0f1d2d;
  line-height: 1.6;
  letter-spacing: -0.05em;
  font-family: 'Shippori Mincho', serif;
  padding: 0 calc(7.2 * var(--vw));
  margin-top: calc(4 * var(--vw));
}

/* メッセージ */
.message {
  position: relative;
}

.message__visual {
  position: absolute;
  top: calc(-13 * var(--vw));
  z-index: 1;
}

.message__thumb {
  width: calc(95 * var(--vw));
  display: block;
}

.message__catch {
  position: absolute;
  right: calc(-3 * var(--vw));
  top: calc(-6 * var(--vw));
  width: calc(61 * var(--vw));
}

.message__body {
  background-image: url('./assets/message-bg.png');
  background-size: cover;
  background-position: center;
  padding: calc(51 * var(--vw)) calc(5.2 * var(--vw)) calc(12 * var(--vw));
}

.message__text {
  font-size: calc(4.4 * var(--vw));
  color: #1e2d3d;
  line-height: 1.6;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;
  letter-spacing: -0.05em;
}