@charset "utf-8";

/*
 * Fluid values are calculated between:
 *   SP: 375px ↔ PC: 1324px
 *
 * Formula: clamp(min, calc(intercept + slope * 100vw), max)
 *   slope     = (max - min) / (1324 - 375)
 *   intercept = min - slope * 375
 */

/* ==============================================
   カスタム変数
============================================== */

body {
  /* レイアウト */
  --section-padding:  2.4rem; /* 24px */
  --width-large:      calc(1500px + var(--section-padding) * 2);
  --width-mid:        calc(1324px + var(--section-padding) * 2);
  --width-small:      calc(990px  + var(--section-padding) * 2);

  /* 色 */
  --color-primary:       #B81C22;
  --color-primary-light: #c4001e;
  --color-black:         #000;
  --color-white:         #fff;
  --color-border:        #ccc;

  /* フォント */
  --font-primary: 'Poppins', sans-serif;

  /* 形状 */
  --radius-card: 10px;
  --radius-pill: 999px;

  /* ボーダー */
  --border-default: 1px solid var(--color-border);

  /* ボタン */
  --btn-padding-inline: 54px;
  --btn-padding-block:  clamp(1.5rem, calc(3.9rem - 1.6 * (100vw / 100)), 2.4rem);
  --btn-transition:     background 0.2s ease, transform 0.2s ease;

  /* トランジション */
  --transition-img:     transform 0.4s ease;
  --transition-opacity: opacity 0.2s ease;

  /* フォントサイズ (fluid) */
  --fs-sm:         1.5rem;                                           /* 固定 15px */
  --fs-base:       1.6rem;                                           /* 固定 16px */
  --fs-base-fluid: clamp(16px, calc(18.79px - 0.211vw),  18px);     /* 18px → 16px */
  --fs-md:         clamp(15px, calc(13.815px + 0.316vw), 18px);     /* 15px → 18px */
  --fs-lg:         clamp(24px, calc(22.42px + 0.422vw),  28px);     /* 24px → 28px */
  --fs-xl:         clamp(18px, calc(26.37px - 0.632vw),  24px);     /* 24px → 18px */
  --fs-2xl:        clamp(24px, calc(16.89px + 1.897vw),  42px);     /* 24px → 42px */
  --fs-cta:        clamp(32px, calc(28.05px + 1.054vw),  42px);     /* 32px → 42px */
  --fs-heading:    35px;                                             /* 固定 */

  /* スペーシング (fluid) */
  --space-section-block: clamp(48px, calc(35.355px + 3.372vw), 80px);  /* 48px → 80px */
  --space-cards-gap:     clamp(24px, calc(17.68px  + 1.686vw), 40px);  /* 24px → 40px */
  --space-feature-gap:   clamp(32px, calc(28.84px  + 0.843vw), 40px);  /* 32px → 40px */
  --space-card-padding:  clamp(24px, calc(20.84px  + 0.843vw), 32px);  /* 24px → 32px */
}


/* ==============================================
   Common
============================================== */

html {
  scroll-padding-top: calc(74px + 20px * 2); /* ヘッダーの高さ分 */
}

body {
  color: var(--color-black);
}

em,strong {
  font-weight: 700;
}

#contentMain {
  margin-top: 0;
}

.boxBreadcrumb {
  bottom: -48px;
}

/* ==============================================
   レイアウト
============================================== */

.p-section {
  background-color: var(--bg-color, transparent);
  padding-block: clamp(64px, calc(51.3px + 3.372vw), 96px); /* 64px → 96px */
}

.p-section--bg {
  --bg-color: #FFF5F5;
  padding-block: clamp(0.4rem, 5.613rem - 4.348vw, 2.4rem);
}

.p-section:not(.highlight + .p-section):first-child {
  padding-top: clamp(9.6rem, 2.52rem + 9.57vw, 14rem);
}

.p-section-lightgray {
  background-color: #F3F3F3;
}

.p-section-softpink {
  background-color: #FFF5F5;
}

.l-section {
  box-sizing:    border-box;
  width:         100%;
  margin-inline: auto;
}

.l-section--full {
  max-width: 100%;
}

.l-section--large {
  max-width:      var(--width-large);
  padding-inline: var(--section-padding);
}

.l-section--mid {
  max-width:      var(--width-mid);
  padding-inline: var(--section-padding);
}

.l-section--small {
  max-width:      var(--width-small);
  padding-inline: var(--section-padding);
}

@media (max-width: 740px) {
  #content { padding-bottom: 496px; }
}

/* ==============================================
   Combined BG Wrapper
============================================== */

.combined-bg-wrapper {
  position:            relative;
  width:               100%;
  background-image:    url('/index/img/bg_earth-asean.png');
  background-repeat:   no-repeat;
  background-size:     613px;
  background-position: right top 40px;
}

@media (max-width: 740px) {
  .combined-bg-wrapper {
    background-position: left 2.5rem top 12.5rem;
    background-size:     initial;
  }
}


/* ==============================================
   Section Heading
============================================== */

.c-section-heading {
  width: 100%;
}

.c-section-heading__title {
  margin:      0;
  font-family: var(--font-primary);
  font-size:   var(--fs-heading);
  font-weight: 700;
  line-height: 1.2;
  color:       var(--color-primary);
}

.c-section-heading__sub {
  margin:           0;
  font-size:        var(--fs-sm);
  font-weight:      700;
  color:            var(--color-black);
  transform:        translateY(0.1em);
}

.c-section-heading--left,
.c-section-heading--center {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             17px;
  text-align:      center;
  margin-bottom:   3.2rem;
}


.c-section-heading--left {
  align-items: flex-start;
  text-align:       left;
}

.c-section-heading--row {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         17px;
}

.c-section-heading--column {
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  margin-bottom:   clamp(3.2rem, 2.4889rem + 1.4815vw, 3.6rem);
}

.c-section-body {
  margin-bottom: clamp(5rem, 3.2222rem + 3.7037vw, 6rem);
}

.c-section-body__title {
  font-size:    var(--fs-base);
  font-weight:  700;
  text-align:   left;
  margin-block: 2.8rem 3.2rem;
}

.c-section-body__detail {
  font-size:    1.6rem;
  line-height:  2;
  margin-block: clamp(2.2rem, -0.2889rem + 5.1852vw, 3.6rem);
}

.c-section-body__title--emphasis {
  font-size:   clamp(2.4rem, 1.6889rem + 1.4815vw, 2.8rem);
  font-weight: 700;
}

@media (min-width: 740px) {
  .c-section-body__detail {
    margin-block: 3.6rem;
  }
}

@media (max-width: 740px) {
  .c-section-body__detail,
  #Services .c-section-body__title--emphasis {
    text-align: left;
  }

  .c-section-body__detail {
    margin-top:    2.2rem;
    margin-bottom: 4.0rem;
  }
}

/* ==============================================
   Feature
============================================== */

.c-feature__inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-feature-gap); /* 32px → 40px */
  margin:                4.0rem auto;
}

.c-feature__item {
  display:        flex;
  flex-direction: column;
}

.c-feature__image {
  position:      relative;
  overflow:      hidden;
  margin:        0;
  border-radius: var(--radius-card);
}

.c-feature__image img {
  display: block;
  width:   100%;
  height:  auto;
}

img[src$="hover.png"] {
  position:   absolute;
  top:        0;
  left:       0;
  opacity:    0;
  transition: opacity 0.4s ease;
}

.c-feature__link:hover img[src$="hover.png"] {
  opacity: 1;
}

.c-feature__title {
  margin:      24px 0 16px;
  font-size:   clamp(20px, calc(25.58px - 0.422vw), 24px); /* 24px → 20px */
  font-weight: bold;
  line-height: 1.4;
  color:       var(--color-primary);
  text-align:  left;
}

.c-feature__text {
  margin:      0;
  font-size:   var(--fs-base-fluid); /* 18px → 16px */
  line-height: 1.7;
  text-align:  left;
}

.c-feature__link:hover {
  text-decoration: none;
}

@media (max-width: 767px) {
  .c-feature__inner {
    grid-template-columns: 1fr;
  }
}



/* ==============================================
   Button
============================================== */

.c-button {
  position:         relative;
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            fit-content;
  min-width:        252px;
  max-width:        360px;
  padding:          var(--btn-padding-block) var(--btn-padding-inline);
  border-radius:    var(--radius-pill);
  font-size:        var(--fs-base);
  font-weight:      700;
  color:            var(--color-white);
  text-decoration:  none;
  background-color: var(--color-primary);
  cursor:           pointer;
  transition:       var(--btn-transition);
}

.c-button:hover {
  color:            var(--color-white);
  background-color: var(--color-black);
  text-decoration:  none;
}

.c-button__icon {
  position: absolute;
  right:    1.5rem;
  display:  flex;
}

.c-button__icon svg path {
  stroke-width: 2px;
}

@media (max-width: 740px) {
  .c-button {
    margin: 0 auto;
  }
}


/* ==============================================
   Utility
============================================== */
.visually-hidden {
  width: 1px;
  height: 1px;
  
  position: absolute;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  border: 0;

  clip-path: inset(50%);
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mb00 {
  margin-bottom: 0 !important;
}

.pb00 {
  padding-bottom: 0 !important;
}

.pb120 {
  padding-bottom: 12rem !important;
}

.u-accent {
  color:       var(--color-primary);
  font-weight: 700;
}

.c-emphasis {
  text-decoration:           underline;
  text-decoration-color:     var(--color-primary);
  text-decoration-thickness: 4px;
  text-underline-offset:     0.1em;
}

.for-pc { display: block; }
.for-sp { display: none;  }
.for-tb { display: none;  }

@media (740px <= width < 1200px) {
  .for-tb { display: block; }
}

@media (max-width: 740px) {
  .for-sp { display: block; }
  .for-pc { display: none;  }
  .for-tb { display: none;  }
}