@charset "UTF-8";
.sec-allon4 {
  position: relative;
  overflow: hidden;
  color: var(--c-text);
  font-feature-settings: normal;
  line-break: strict;
}
.allon4-band { width: 100%; }
.allon4-band--merit {
  background: #F1F2ED;
  padding-top: 91.546px;
  padding-bottom: 154.11px;
}
.allon4-band--demerit {
  background-color: #FFFFFF;
  background-image: url("../../assets/img/allon4/bg-grid.webp");
  background-repeat: repeat;
  background-size: 10px 10px;
  background-position: 0 0;
  padding-top: 74.5px;
  padding-bottom: 115.61px;
}
.allon4-inner {
  display: flow-root;
  max-width: 1920px;
  margin: 0 auto;
}
.allon4-head { position: relative; }
.allon4-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.6;
  text-align: center;
  color: var(--c-text);
}
.allon4-title-l1,
.allon4-title-l2 { display: block; }
.allon4-title-l2 {
  font-size: 40px;
  margin-top: -3.4px;
}
.allon4-title-s { font-size: 40px; }
.allon4-title-en {
  position: absolute;
  top: 23.227px;
  left: calc(50% + 76.5px);
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--c-text);
}
.allon4-gap--sp { display: none; }
.allon4-rule {
  display: block;
  height: 1px;
  margin-left: auto;
  margin-right: auto;
}
.allon4-rule--head  { width: 80px;  background: #666666; margin-top: 33.054px; }
.allon4-rule--label { width: 111px; background: #AAAAAA; }
.allon4-lead {
  margin-top: 26.623px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 2;
  letter-spacing: .04em;
  text-align: center;
  color: var(--c-text);
}
.allon4-note {
  margin-top: -1px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 2;
  letter-spacing: .04em;
  text-align: center;
  color: var(--c-text);
}
.allon4-label { position: relative; }
.allon4-label--merit   { margin-top: 48.377px; }
.allon4-label--merit   .allon4-rule--label { margin-top: 35px; }
.allon4-label--demerit .allon4-rule--label { margin-top: 44px; }
.allon4-label-ja {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 32px;
  line-height: 36px;
  text-align: center;
  color: var(--c-text);
}
.allon4-script {
  position: absolute;
  transform: rotate(-16deg);
  transform-origin: 0 0;
  font-family: "Corinthia", cursive;
  font-weight: 400;
  line-height: .375;
  white-space: nowrap;
  pointer-events: none;
}
.allon4-script--merit {
  top: .647px;
  left: calc(50% + min(252px, 19.6875vw));
  font-size: min(96px, 7.5vw);
  color: var(--c-gold);
}
.allon4-script--demerit {
  top: 13.086px;
  left: calc(50% + min(277px, 21.640625vw));
  font-size: min(96px, 7.5vw);
  color: #AAAAAA;
}
.allon4-cards {
  display: flex;
  justify-content: center;
  gap: 5.042%;
  width: min(1190.37px, 100% - 48px);
  margin-left: auto;
  margin-right: auto;
}
.allon4-cards--merit   { margin-top: 43px; }
.allon4-cards--demerit { margin-top: 84px; }
.allon4-card { flex: 0 0 29.972%; min-width: 0; }
.allon4-fig {
  position: relative;
  overflow: hidden;
  aspect-ratio: 356.79 / 260.39;
  background: #D9D9D9;
}
.allon4-fig img {
  position: absolute;
  max-width: none;
}
.allon4-card--m1 .allon4-fig img { width: 167.23%; height: 144.93%; left: -33.61%; top: -41.09%; }
.allon4-card--m2 .allon4-fig img { width: 139.43%; height: 129.20%; left: -24.23%; top: -29.04%; }
.allon4-card--m3 .allon4-fig img { width: 147.08%; height: 113.43%; left: -29.21%; top:  -9.83%; }
.allon4-card--d1 .allon4-fig img { width: 105.68%; height: 108.61%; left:  -1.84%; top:  -3.49%; }
.allon4-card--d2 .allon4-fig img { width: 109.47%; height: 109.56%; left:  -4.84%; top:  -6.33%; }
.allon4-card--d3 .allon4-fig img { width: 134.61%; height: 122.94%; left: -33.95%; top: -21.19%; }
.allon4-card-title {
  margin-top: 24px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(16px, calc(2.0161vw - .97px), 24px);
  line-height: 1;
  text-align: center;
  color: var(--c-text);
}
.allon4-card-body {
  margin-top: 16px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(13px, calc(1.5121vw - .73px), 18px);
  line-height: 2;
  text-align: center;
  color: var(--c-text);
}
.allon4-extra { display: none; }
.allon4-btnwrap { margin-top: 85px; }
.allon4-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 420px;
  max-width: calc(100% - 48px);
  height: 89px;
  margin: 0 auto;
  background: #F0831E;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 2;
  letter-spacing: .04em;
  text-align: center;
  transition: opacity .25s ease;
}
.allon4-btn:hover,
.allon4-btn:focus-visible { opacity: .82; }
.allon4-btn-arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24.42px;
  height: 22.69px;
}
@media (max-width: 767px) {
  .allon4-band--merit {
    padding-top: 75.985px;
    padding-bottom: .997px;
  }
  .allon4-band--demerit {
    padding-top: 95px;
    padding-bottom: 126.89px;
  }
  .allon4-inner { max-width: 390px; }
  .allon4-title { font-size: min(28px, 7.1795vw); }
  .allon4-title-l2 { font-size: inherit; margin-top: 0; }
  .allon4-title-s  { font-size: inherit; }
  .allon4-gap--pc { display: none; }
  .allon4-gap--sp { display: inline; }
  .allon4-title-en {
    top: 8.72px;
    left: calc(50% + min(38px, 9.7436vw));
    font-size: min(18px, 4.6154vw);
  }
  .allon4-rule--head  { width: 64px; margin-top: 20.915px; }
  .allon4-rule--label { width: 64px; }
  .allon4-label--merit   .allon4-rule--label { margin-top: 31.5px; }
  .allon4-label--demerit .allon4-rule--label { margin-top: 31.5px; }
  .allon4-lead {
    width: min(342px, 100% - 48px);
    margin-left: auto;
    margin-right: auto;
    margin-top: 28.165px;
    font-size: 16px;
    letter-spacing: 0;
    text-align: justify;
    text-justify: inter-character;
  }
  .allon4-note {
    width: min(342px, 100% - 48px);
    margin-left: auto;
    margin-right: auto;
    margin-top: -1.5px;
    font-size: 13px;
    letter-spacing: 0;
    text-align: left;
  }
  .allon4-br-pc { display: none; }
  .allon4-label--merit { margin-top: 68.718px; }
  .allon4-label-ja { font-size: 26px; }
  .allon4-script { line-height: .5625; }
  .allon4-script--merit {
    top: -16.601px;
    left: 58.086%;
    font-size: min(64px, 16.41vw);
  }
  .allon4-script--demerit {
    top: -34.609px;
    left: 54.948%;
    font-size: min(64px, 16.41vw);
  }
  .allon4-cards {
    display: block;
    width: 100%;
  }
  .allon4-cards--merit   { margin-top: 30.527px; }
  .allon4-cards--demerit { margin-top: 52.5px; }
  .allon4-card { width: 100%; }
  .allon4-card--m2 { margin-top: 18.97px; }
  .allon4-card--m3 { margin-top: 63px; }
  .allon4-card--d2 { margin-top: 41.95px; }
  .allon4-card--d3 { margin-top: 2.94px; }
  .allon4-fig {
    width: 300px;
    max-width: 100%;
    margin: 0 auto;
    aspect-ratio: 300 / 160;
  }
  .allon4-card--m1 .allon4-fig img { width: 165.19%; height: 174.60%; left: -27.93%; top: -74.32%; }
  .allon4-card--m2 .allon4-fig img { width: 103.05%; height: 130.55%; left:  -2.04%; top: -26.89%; }
  .allon4-card--m3 .allon4-fig img { width: 137.79%; height: 145.40%; left: -19.12%; top: -27.90%; }
  .allon4-card--d1 .allon4-fig img { width: 105.68%; height: 148.62%; left:  -1.84%; top:  -4.79%; }
  .allon4-card--d2 .allon4-fig img { width: 109.47%; height: 113.07%; left:  -4.84%; top:  -8.66%; }
  .allon4-card--d3 .allon4-fig img { width: 134.61%; height: 168.23%; left: -33.95%; top: -29.00%; }
  .allon4-card-title { margin-top: 16px; font-size: 20px; line-height: 1.2; }
  .allon4-card-body  { margin-top: 16px; font-size: 16px; }
  .allon4-cards--demerit .allon4-card-body { margin-top: 8px; }
  .allon4-extra {
    display: block;
    width: min(342px, 100% - 48px);
    margin: 50.123px auto -10px;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 18px;
    line-height: 2;
    letter-spacing: .04em;
    text-align: center;
    color: var(--c-text);
  }
  .allon4-btnwrap { margin-top: 49.47px; }
  .allon4-btn {
    width: 315px;
    max-width: calc(100% - 24px);
    height: 66.75px;
    font-size: 16px;
    letter-spacing: 0;
  }
  .allon4-btn-arrow { width: 18.32px; height: 17.02px; }
}
@media (max-width: 359px) {
  .allon4-card-body { font-size: 15px; }
}
@media (min-width: 768px) and (max-width: 1360px) {
  .allon4-head .allon4-title-en {
    --t: calc(-6.6757px + 4.0203vw);
    top: calc(0.4839 * var(--t));
    left: calc(50% + 1.59375 * var(--t));
    font-size: max(12px, calc(0.5 * var(--t)));
  }
}


/* 2026-10-16 PC・タブレット（768〜1920px）で（All-on-4）が「を選ぶ」に重なる不具合の修正
   tablet-type.css で見出しの文字サイズが変わった後も、（All-on-4）の位置が旧サイズ基準のままだったため。
   見出し・（All-on-4）の文字サイズは tablet-type.css と同じ式。式を変えたらここも合わせる。 */
@media (min-width: 768px) and (max-width: 1920px) {
  .allon4-head {
    --a4-f: calc(3.3333px + 2.066vw);
    --a4-fs: calc(9.6667px + 1.5799vw);
    --a4-fen: calc(12.3333px + 0.6076vw);
  }
  .allon4-head .allon4-gap--pc {
    display: inline-block;
    width: calc(5.875 * var(--a4-fen) - var(--a4-f) / 6);
    white-space: nowrap;
  }
  .allon4-head .allon4-title-en {
    font-size: var(--a4-fen);
    left: calc(50% + 2.26 * var(--a4-f) - var(--a4-fs));
    top: calc(0.8 * var(--a4-f) - 0.8 * var(--a4-fen) + var(--a4-f) / 12);
  }
}