/* =========================================================
   page-illustration.php 専用スタイル
   「奥多摩工業をイラストで知る」ページ
========================================================= */

html:has(body.page-template-page-illustration-php) {
  scroll-behavior: smooth;
}

.illust_page {
  margin: 0 auto;
}

/* イントロ ------------------------------------------------- */
.illust_intro {
  text-align: center;
  margin: 0 0 50px;
}

.illust_intro_title {
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin: 0 0 60px !important;
}

.illust_intro_desc {
  font-size: 16px;
  font-weight: 700;
  line-height: 2;
}

/* イラストマップ + 吹き出し ---------------------------------
   ブラウザ幅いっぱいに表示(サイト既存の .wideframe と同じ手法ではみ出す) */
.illust_map_wrap {
  position: relative;
  overflow: visible;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  container-type: inline-size;
  container-name: illust-map;
  /* 吹き出しをこの幅基準(cqw)で可変させる */
}

.illust_map_image {
  position: relative;
  width: 100%;
  aspect-ratio: 2716 / 1196;
  overflow: hidden;
}

.illust_map_image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.illust_balloon {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 2;
  display: block;
  text-decoration: none;
  text-align: center;
}

/* 真円 + 真下に尖った尻尾のバブル(CSS shape()関数で作図) ---------------------
   マップ幅(コンテナクエリ)を基準にcqwで可変。r=円の半径・t=尻尾の長さで、
   マップ幅1000px相当のとき r=58px・t=20px・尻尾の開き角a=8度になるよう設計。
   (r - r*sin(a), r + r*cos(a)) 〜 (r + r*sin(a), r + r*cos(a)) の間を
   円弧(大きい方=cw large)で結び、円の真下の頂点(r, 2r+t)へ2本の直線で
   尖った尻尾を作図している。 */
.illust_balloon_inner {
  --r: clamp(32px, 5.8cqw, 58px);
  --t: clamp(11px, 2cqw, 20px);
  --r: 4.8cqw;
  --t: 1.4cqw;
  position: relative;
  box-sizing: border-box;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2 + var(--t));
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 0 0 var(--t);
  background: #fff;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.illust_balloon .label {
  font-size: clamp(9px, 1.1cqw, 11px);
  font-size: 0.9cqw;
  font-weight: 700;
  color: #000;
  line-height: 1.35;
}

.illust_balloon .sub {
  font-size: clamp(8px, 1cqw, 10px);
  font-size: 1.4cqw;
  font-weight: 700;
  color: #000;
  line-height: 1;
}

.illust_balloon:hover .illust_balloon_inner {
  transform: translateY(-3px);
}

/* shape()/arc未対応ブラウザ向けフォールバック(角丸+三角の尻尾) --------------- */
@supports not (clip-path: shape(from 0px 0px, arc to 1px 1px of 1px cw large, close)) {
  .illust_balloon_inner {
    width: auto;
    min-width: clamp(56px, 9.6cqw, 96px);
    height: auto;
    padding: clamp(5px, 0.8cqw, 8px) clamp(7px, 1.2cqw, 12px) clamp(6px, 0.9cqw, 9px);
    border-radius: clamp(5px, 0.8cqw, 8px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  }

  .illust_balloon_inner:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(clamp(4px, 0.7cqw, 7px) * -1);
    margin-left: calc(clamp(4px, 0.7cqw, 7px) * -1);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: clamp(4px, 0.7cqw, 7px) clamp(4px, 0.7cqw, 7px) 0 clamp(4px, 0.7cqw, 7px);
    border-color: #fff transparent transparent transparent;
  }

  .illust_balloon:hover .illust_balloon_inner {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
  }
}

/* shape()/arc対応ブラウザ: 真円 + 真下に尖った尻尾を1本のパスで作図 --------- */
@supports (clip-path: shape(from 0px 0px, arc to 1px 1px of 1px cw large, close)) {
  .illust_balloon_inner {
    clip-path: shape(from calc(var(--r) * 0.86083) calc(var(--r) * 1.99027),
        arc to calc(var(--r) * 1.13917) calc(var(--r) * 1.99027) of var(--r) cw large,
        line to var(--r) calc(var(--r) * 2 + var(--t)),
        close);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.22));
  }

  .illust_balloon:hover .illust_balloon_inner {
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.28));
  }
}

/* 取り組みセクション一覧 ------------------------------------- */
.illust_flow_list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 0 0 60px;
  padding-block: 60px;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    background: #f1f1f1;
    z-index: -1;
  }
}

.illust_flow_item {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  background: #fff;
  border-radius: 10px;
  padding: 35px;
  scroll-margin-top: 110px;
}

.illust_flow_icon {
  flex: 0 0 340px;
  width: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.illust_flow_icon .emoji {
  font-size: 52px;
  line-height: 1;
}

.illust_flow_body {
  flex: 1 1 auto;
  min-width: 0;
}

.illust_flow_heading {
  margin: 0 0 15px;
  line-height: 1.6;
}

.illust_flow_heading .num {
  font-size: 28px;
  font-weight: 700;
  margin-right: 2px;
}

.illust_flow_heading .title {
  font-size: 28px;
  font-weight: 700;
  color: #222;
  margin-right: 14px;
}

.illust_flow_heading .subtitle {
  font-size: 18px;
  font-weight: 500;
}

.illust_flow_desc {
  font-size: 16px;
  line-height: 1.9;
  margin: 0 0 22px;
}

.illust_flow_meta {
  margin: 0;
}

.illust_flow_meta .meta_row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid #e2e4e8;
  line-height: 1.6;
}

.illust_flow_meta .meta_row:last-child {
  border-bottom: 1px solid #e2e4e8;
}

.illust_flow_meta dt {
  flex: 0 0 190px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.illust_flow_meta dt .icon {
  display: grid;
  place-content: center;
}

.illust_flow_meta dd {
  flex: 1 1 auto;
  margin: 0;
  font-size: 12px;
}

.illust_flow_meta .products dd .product {
  display: inline-block;
  margin: 0 18px 0 0;
}

.illust_flow_meta .products dd .product .name {
  font-weight: 700;
  color: #222;
}

/* CTAボタン ---------------------------------------------------
   .design_button.recruit_btn03 自体はサイト共通のクラスだが、実際の見た目
   (枠線・矢印アイコン)は他の採用ページでは「ページ個別のカスタムCSS」で
   都度追加されている。このページにはその設定がないため、同じCSSをここに
   直接記述して合わせている。 */
.illust_cta_list.wp-block-columns {
  display: flex;
  flex-wrap: nowrap !important;
  gap: 2em;
  align-items: center;
  margin: 0 0 20px;
}

.illust_cta_list .wp-block-column {
  flex: 1 1 0;
}

.illust_cta_list .design_button {
  height: 100px;
}

.illust_cta_list .recruit_btn03 {
  border: 2px solid #007fc8;
}

.illust_cta_list .recruit_btn03 a:hover {
  background: #007fc8 !important;
  color: #fff !important;
}

.illust_cta_list .recruit_btn03 a::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid #007fc8;
  border-bottom: 2px solid #007fc8;
  transform: rotate(-45deg);
  position: absolute;
  top: calc(50% - 6px);
  right: 20px;
}

.illust_cta_list .recruit_btn03 a:hover::after {
  border-right-color: #fff;
  border-bottom-color: #fff;
}

.illust_cta_list .design_button a {
  display: inline-block;
  height: 100px;
  line-height: 100px;
  font-size: 20px;
  padding: 0 20px;
  position: relative;
  overflow: hidden;
  z-index: 3;
  box-sizing: border-box;
  transition: all 0.35s ease;
  font-weight: bold;
  color: #007fc8;
}


@media(min-width:751px) {
  .illust_cta_list .design_button a {
    min-width: 100%;
    max-width: 100%;
  }
  .sp-only {
    display: none;
  }
}

@media(max-width:750px) {
  .illust_map_image {
    aspect-ratio: 784 / 546;
  }
  .illust_balloon .label {
    display: none;
  }
  .illust_balloon_inner {
    --r: 6.0cqw;
  }
  .illust_balloon .sub {
    font-size: 2cqw;
  }

  .illust_cta_list .design_button a {
    min-width: 100%;
    max-width: 100% !important;
  }
}

/* スマホ ------------------------------------------------------- */
@media screen and (max-width:768px) {
  .illust_intro_title {
    font-size: 22px;
    margin-bottom: 14px;
  }

  .illust_intro_desc {
    font-size: 14px;
    line-height: 1.9;
  }

  .illust_flow_list {
    gap: 25px;
  }

  .illust_flow_item {
    flex-direction: column;
    align-items: center;
    padding: 25px 20px;
    scroll-margin-top: 70px;
    margin-top: 100px;
  }

  .illust_flow_icon {
    flex: 0 0 auto;
    width: auto;
    margin-top: -100px;
  }

  .illust_flow_heading {
    margin-bottom: 20px !important;
  }

  .illust_flow_heading .title {
    margin: 4px 0;
  }

  .illust_flow_heading .subtitle {
    display: block;
    margin-top: 10px;
  }

  .illust_flow_desc {
    text-align: left;
  }

  .illust_flow_meta .meta_row {
    flex-direction: column;
    gap: 4px;
    text-align: left;
  }

  .illust_flow_meta dt {
    flex: none;
  }

  .illust_cta_list.wp-block-columns {
    flex-wrap: wrap !important;
    gap: 14px;
  }

  .illust_cta_list .wp-block-column {
    flex-basis: 100%;
  }
}