@charset "utf-8";

/* -----------------------------------------------------------------------
 style-service.css
 /service/ 用の追加・上書きスタイル
 style.css の後に読み込み、後勝ちで上書きする
 ※ サイトルート側の style.css は変更しないこと
----------------------------------------------------------------------- */


/* -----------------------------------------------------------------------
 追加カスタムプロパティ
----------------------------------------------------------------------- */
:root {
  /* 見出しの強調色。既存の --em-cream (#FFEC80) とは別の黄色のため追加 */
  --accent-yellow: #FFC919;
}


/* -----------------------------------------------------------------------
 共通パーツ（style.css の .btn--outline を上書き）
----------------------------------------------------------------------- */
/* 上書き：資料ダウンロード用ボタンの配色を、通常時とhover時で入れ替える
   通常  … 濃紺背景＋白文字＋白アイコン（style.css の hover 時の配色）
   hover … 白背景＋濃紺文字＋濃紺アイコン（style.css の通常時の配色） */
.btn--outline {
  background: var(--main-color);
  border-color: var(--main-color);
  color: var(--white);
}
.btn--outline::before {
  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11%2015V3C11%202.44772%2011.4477%202%2012%202C12.5523%202%2013%202.44772%2013%203V15C13%2015.5523%2012.5523%2016%2012%2016C11.4477%2016%2011%2015.5523%2011%2015Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M2%2019V15C2%2014.4477%202.44772%2014%203%2014C3.55228%2014%204%2014.4477%204%2015V19C4%2019.2652%204.10543%2019.5195%204.29297%2019.707C4.48051%2019.8946%204.73478%2020%205%2020H19C19.2652%2020%2019.5195%2019.8946%2019.707%2019.707C19.8946%2019.5195%2020%2019.2652%2020%2019V15C20%2014.4477%2020.4477%2014%2021%2014C21.5523%2014%2022%2014.4477%2022%2015V19C22%2019.7957%2021.6837%2020.5585%2021.1211%2021.1211C20.5585%2021.6837%2019.7957%2022%2019%2022H5C4.20435%2022%203.44151%2021.6837%202.87891%2021.1211C2.3163%2020.5585%202%2019.7956%202%2019Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M16.293%209.29297C16.6835%208.90245%2017.3165%208.90245%2017.707%209.29297C18.0975%209.68349%2018.0975%2010.3165%2017.707%2010.707L12.707%2015.707C12.3165%2016.0976%2011.6835%2016.0976%2011.293%2015.707L6.29295%2010.707C5.90243%2010.3165%205.90243%209.68349%206.29295%209.29297C6.68348%208.90245%207.31649%208.90245%207.70702%209.29297L12%2013.5859L16.293%209.29297Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E');
}

@media screen and (min-width: 768px), print {

  .btn--outline:hover {
    background: var(--white);
    color: var(--main-color);
  }
  .btn--outline:hover::before {
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11%2015V3C11%202.44772%2011.4477%202%2012%202C12.5523%202%2013%202.44772%2013%203V15C13%2015.5523%2012.5523%2016%2012%2016C11.4477%2016%2011%2015.5523%2011%2015Z%22%20fill%3D%22%23363480%22%2F%3E%3Cpath%20d%3D%22M2%2019V15C2%2014.4477%202.44772%2014%203%2014C3.55228%2014%204%2014.4477%204%2015V19C4%2019.2652%204.10543%2019.5195%204.29297%2019.707C4.48051%2019.8946%204.73478%2020%205%2020H19C19.2652%2020%2019.5195%2019.8946%2019.707%2019.707C19.8946%2019.5195%2020%2019.2652%2020%2019V15C20%2014.4477%2020.4477%2014%2021%2014C21.5523%2014%2022%2014.4477%2022%2015V19C22%2019.7957%2021.6837%2020.5585%2021.1211%2021.1211C20.5585%2021.6837%2019.7957%2022%2019%2022H5C4.20435%2022%203.44151%2021.6837%202.87891%2021.1211C2.3163%2020.5585%202%2019.7956%202%2019Z%22%20fill%3D%22%23363480%22%2F%3E%3Cpath%20d%3D%22M16.293%209.29297C16.6835%208.90245%2017.3165%208.90245%2017.707%209.29297C18.0975%209.68349%2018.0975%2010.3165%2017.707%2010.707L12.707%2015.707C12.3165%2016.0976%2011.6835%2016.0976%2011.293%2015.707L6.29295%2010.707C5.90243%2010.3165%205.90243%209.68349%206.29295%209.29297C6.68348%208.90245%207.31649%208.90245%207.70702%209.29297L12%2013.5859L16.293%209.29297Z%22%20fill%3D%22%23363480%22%2F%3E%3C%2Fsvg%3E');
  }

}


/* -----------------------------------------------------------------------
 ファーストビュー（ヒーロー）
----------------------------------------------------------------------- */
.hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.hero__photo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__inner {
  position: relative;
  z-index: 1;
}

/* 認定ラベル */
.hero__label {
  background-color: var(--main-color);
  text-align: center;
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}

/* サブキャッチ（両脇の斜線は疑似要素で描画） */
.hero__subcatch {
  position: relative;
  display: block;
  width: fit-content; /* inline-block だと行ボックス分の余白が下に付くため */
  font-weight: 700;
  color: var(--txt-color);
}
.hero__subcatch::before,
.hero__subcatch::after {
  content: "";
  position: absolute;
  top: 50%;
  display: block;
  background-color: var(--txt-color);
}
.hero__subcatch-em {
  color: var(--accent-color2);
}

/* メインコピー */
.hero__catch {
  font-weight: 700;
  color: var(--txt-color);
}
.hero__catch-em {
  color: var(--menu-color);
}

/* リード文 */
.hero__lead {
  font-weight: 700;
  color: var(--txt-color);
}

/* 実績表示（月桂冠） */
.hero__stat {
  display: flex;
}
.hero__stat-laurel {
  flex-shrink: 0;
}
.hero__stat-num {
  font-weight: 700;
  color: #AF7D2B;
}
.hero__stat-big {
  font-family: var(--num-font), sans-serif;
  font-weight: 900;
}
.hero__stat-note {
  color: var(--txt-color);
  font-weight: 700;
}

/* スペックカード */
.hero__specs {
  background-color: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.hero__spec {
  display: flex;
  align-items: center;
}
.hero__spec-icon {
  flex-shrink: 0;
}
.hero__spec-body {
  display: flex;
}
.hero__spec-ttl {
  font-weight: 700;
  line-height: 1;
  color: var(--sub-color);
}
.hero__spec-val {
  font-weight: 700;
  line-height: 1;
  color: var(--accent-color2);
}
.hero__spec-num {
  font-family: var(--num-font), sans-serif;
  font-weight: 900;
}
.hero__spec--report .hero__spec-strong {
  color: var(--accent-color2);
}
.hero__spec--report .hero__spec-unit {
  color: var(--sub-color);
}

/* CTAボタン（共通 .btn / .btn--red / .btn--outline を流用し、以下で上書き） */
.hero__btns {
  display: flex;
}
.hero__btn {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  border-width: 3px;
}
/* .btn::before（メール／ダウンロードアイコン）を左端へ絶対配置に変更 */
.hero__btn::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
/* 右端の丸矢印 */
.hero__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  background: url(/img/service/icon_arrow_white.svg) no-repeat center;
  background-size: contain;
  transition: all .3s ease-in;
}
/* 上書き：.btn--outline の配色反転に合わせ、通常時は白矢印（hover で紺に反転） */
.hero__btn--download::after {
  background-image: url(/img/service/icon_arrow_white.svg);
}
.hero__btn-main {
  line-height: 1;
}


@media screen and (max-width: 767px) {

  .hero {
    background-color: #F0F8FE;
    padding-bottom: 7.9487vw;
  }
  .hero__photo {
    height: 123.0769vw;
  }
  /* .inner の width: 89.2308% を打ち消し、要素ごとに左位置を指定する */
  .hero__inner {
    width: 100%;
    max-width: none;
  }

  .hero__label {
    width: 79.7436vw;
    margin: 0 auto;
    padding: 1.6667vw 0;
    border-radius: 0 0 var(--radius-sp) var(--radius-sp);
    font-size: 3.0769vw;
    line-height: 1.1667;
  }

  .hero__subcatch {
    margin: 2.3077vw 0 0 5.0641vw;
    padding: 0 7.1154vw;
    font-size: 4.6154vw;
    line-height: 1.1667;
    text-align: center;
  }
  .hero__subcatch::before,
  .hero__subcatch::after {
    width: 11.5385vw;
    height: 2px; /* 細線のためvw化しない */
  }
  .hero__subcatch::before {
    left: -2.8846vw;
    transform: translateY(-50%) rotate(60deg);
  }
  .hero__subcatch::after {
    right: -2.8846vw;
    transform: translateY(-50%) rotate(-60deg);
  }

  .hero__catch {
    margin: 1.0256vw 0 0 7.1795vw;
    font-size: 10vw;
    line-height: 1.1795;
  }

  .hero__lead {
    margin: 1.0256vw 0 0 7.9487vw;
    font-size: 4.1026vw;
    line-height: 1.3125;
  }

  .hero__stat {
    align-items: center;
    gap: 1.0256vw;
    margin: 2.3077vw 0 0 7.1795vw;
  }
  .hero__stat-laurel {
    width: 7.4359vw;
    height: 12.8205vw;
  }
  .hero__stat-num {
    font-size: 3.5897vw;
    line-height: 1.1;
    text-align: center;
  }
  .hero__stat-big {
    font-size: 5.641vw;
  }
  .hero__stat-md {
    font-size: 4.1026vw;
  }
  .hero__stat-xs {
    font-size: 3.0769vw;
  }
  .hero__stat-mark {
    font-size: 2.6462vw;
  }
  .hero__stat-note {
    font-size: 2.5641vw;
    line-height: 1.2;
    text-align: center;
  }

  .hero__specs {
    flex-direction: column;
    width: 84.359vw;
    min-height: 46.4103vw;
    margin: 4.4615vw 0 0 7.9487vw;
    border-radius: var(--radius-sp);
  }
  .hero__spec {
    flex: 1;
    gap: 3.8462vw;
    padding-left: 4.359vw;
  }
  .hero__spec:not(:last-of-type) {
    border-bottom: solid 1px #CCCCCC; /* 細線のためvw化しない */
  }
  .hero__spec-icon {
    width: 7.6923vw;
    height: 7.6923vw;
  }
  .hero__spec-body {
    align-items: baseline;
    gap: 1.5385vw;
  }
  .hero__spec-ttl {
    font-size: 3.8462vw;
  }
  .hero__spec-val {
    font-size: 4.1026vw;
  }
  .hero__spec-num {
    font-size: 6.9231vw;
  }
  .hero__spec--report .hero__spec-val {
    line-height: 1.1667;
  }
  .hero__spec--report .hero__spec-strong {
    font-size: 4.6154vw;
  }
  .hero__spec--report .hero__spec-unit {
    font-size: 3.8462vw;
  }

  .hero__btns {
    flex-direction: column;
    gap: 2.5641vw;
    width: 89.7436vw;
    margin: 7.6923vw 0 0 5.1282vw;
  }
  .hero__btn {
    width: 100%;
    min-height: 15.3846vw;
    padding: 0 12.8205vw 0 13.5897vw; /* 右は矢印との重なりを防ぐ余白 */
    border-radius: var(--radius-sp);
    font-size: 4.1026vw;
  }
  .hero__btn::before {
    left: 5.1282vw;
    width: 5.1282vw;
    height: 5.1282vw;
  }
  .hero__btn::after {
    right: 5.1282vw;
    width: 5.1282vw;
    height: 5.1282vw;
  }
  .hero__btn-main {
    font-size: 4.1026vw;
  }

}


@media screen and (min-width: 768px), print {

  .hero {
    /* デザイン高さ620px分の余白。中身が増えても崩れないよう height は固定しない */
    padding: 31px 0 52px;
  }
  .hero__photo {
    bottom: 0;
  }
  .hero__inner {
    width: 94%;
  }

  .hero__label {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 365px;
    padding: 8px 0;
    border-radius: 0 0 0 var(--radius-pc);
    font-size: 14px;
  }

  .hero__subcatch {
    margin-left: -14.5px;
    padding: 0 20.5px;
    font-size: 32px;
    line-height: 1.3;
  }
  .hero__subcatch::before,
  .hero__subcatch::after {
    width: 30px;
    height: 2px; /* 細線のためvw化しない */
  }
  .hero__subcatch::before {
    left: -7.5px;
    transform: translateY(-50%) rotate(60deg);
  }
  .hero__subcatch::after {
    right: -7.5px;
    transform: translateY(-50%) rotate(-60deg);
  }

  .hero__catch {
    margin-top: 5px;
    font-size: 60px;
    line-height: 1.15;
  }
  .hero__catch-sm {
    font-size: 48px;
  }

  .hero__lead {
    margin-top: 11px;
    font-size: 1em;
    line-height: 1.5;
  }

  .hero__stat {
    align-items: flex-end;
    gap: 3px;
    margin-top: 5px;
  }
  .hero__stat-laurel {
    width: 29px;
    height: 50px;
  }
  .hero__stat-num {
    font-size: 21px;
    line-height: 1.8;
  }
  .hero__stat-big {
    font-size: 30px;
  }
  .hero__stat-md {
    font-size: 21px;
  }
  .hero__stat-xs {
    font-size: 18px;
  }
  .hero__stat-mark {
    font-size: 13.5px;
  }
  .hero__stat-note {
    margin: -2px 0 0 20px;
    font-size: 12px;
    line-height: 1;
  }

  .hero__specs {
    width: 800px;
    max-width: 100%; /* 768〜1280px でカードがはみ出さないように */
    min-height: 90px; /* 文字が折り返しても潰れないよう height ではなく min-height */
    margin-top: 35px;
    border-radius: var(--radius-pc);
  }
  .hero__spec {
    gap: 17px;
    min-width: 0;
    padding-left: 3.75%; /* 幅800px時に30px。狭い画面では比率を保って縮む */
  }
  /* 幅800px時に 290 / 235 / 275px となる比率。狭い画面では比率を保って縮む */
  .hero__spec:nth-of-type(1) {
    width: 36.25%;
  }
  .hero__spec:nth-of-type(2) {
    width: 29.375%;
  }
  .hero__spec:nth-of-type(3) {
    width: 34.375%;
  }
  .hero__spec:not(:first-of-type) {
    border-left: solid 1px #CCCCCC; /* 細線のためvw化しない */
  }
  .hero__spec-icon {
    width: 40px;
    height: 40px;
  }
  .hero__spec-body {
    flex-direction: column;
    gap: 1.5px;
  }
  .hero__spec-ttl {
    font-size: 16px;
  }
  .hero__spec-val {
    /* 狭いPC幅で金額が途中改行されるのを防ぐ */
    white-space: nowrap;
    font-size: 16px;
  }
  .hero__spec-num {
    font-size: 33px;
  }
  .hero__spec--report .hero__spec-val {
    line-height: 1.25;
  }
  .hero__spec--report .hero__spec-strong {
    font-size: 22px;
  }
  .hero__spec--report .hero__spec-unit {
    font-size: 16px;
  }

  .hero__btns {
    flex-wrap: wrap; /* 768〜940px では2段に折り返す */
    justify-content: center;
    gap: 20px;
    margin-top: 43px;
  }
  .hero__btn {
    gap: 10px;
    /* 常に450pxを保ち、横に並ばない幅（〜1030px）では2段に折り返す */
    width: 450px;
    max-width: 100%;
    min-height: 80px; /* 文字が折り返しても潰れないよう height ではなく min-height */
    padding: 0 48px 0 69px; /* 右は矢印との重なりを防ぐ余白 */
    border-radius: var(--radius-pc);
    font-size: 21px;
  }
  .hero__btn--download {
    padding-left: 58px;
  }
  .hero__btn::before {
    left: 20px;
    width: 30px;
    height: 30px;
  }
  .hero__btn::after {
    right: 20px;
    width: 20px;
    height: 20px;
  }
  .hero__btn-sub {
    font-size: 12px;
    line-height: 1;
  }
  .hero__btn-main {
    font-size: 21px;
  }
  /* hover：カンプにない状態のため既存 .btn の挙動（色反転）に合わせ、矢印色も追従させる */
  .hero__btn.btn--red:hover::after {
    background-image: url(/img/service/icon_arrow_red.svg);
  }
  .hero__btn--download:hover::after {
    background-image: url(/img/service/icon_arrow_navy.svg);
  }

}


/* -----------------------------------------------------------------------
 ページ内ナビ（style.css の .pagenav を上書き。配色のみ変更し、
 レイアウト・余白・構造は既存のままとする）
----------------------------------------------------------------------- */
/* 上書き：背景 var(--menu-color)＋文字 白 → 背景 #F5F8FD＋文字 var(--main-color) */
.pagenav__list {
  border: solid 2px #C3D6FD;
}
.pagenav__list li a {
  background-color: #F5F8FD;
  color: var(--main-color);
}
/* 上書き：hover の背景 var(--main-color) → 薄いブルー（カンプにない状態のため既存の挙動に合わせる） */
.pagenav__list li a:hover {
  background-color: #E8F0FE;
}

@media screen and (max-width: 767px) {

  .pagenav__list {
    border-width: 1px; /* 細線のためvw化しない */
  }
  /* 上書き：区切り線 #8A99C2 → #C3D6FD */
  .pagenav__list li:not(:last-of-type) {
    border-bottom-color: #C3D6FD;
  }
  /* 各項目右端の下向きシェブロン（リンク先がページ下部にあることを示す装飾） */
  .pagenav__list li a {
    position: relative;
  }
  .pagenav__list li a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 7.6923vw;
    transform: translateY(-50%);
    display: block;
    width: 5.1282vw;
    height: 5.1282vw;
    background: url(/img/service/icon_chevron.svg) no-repeat center;
    background-size: contain;
  }

}

@media screen and (min-width: 768px), print {

  /* 上書き：区切り線 #8A99C2 → #C3D6FD */
  .pagenav__list li:not(:last-of-type) {
    border-right-color: #C3D6FD;
  }

}


/* -----------------------------------------------------------------------
 資料ダウンロード（style.css の .download を全面的に上書き）
 ※ 構造クラスは既存スタイルの誤爆を避けるため別名にしている
    .download__flx  → .download__layout
    .download__body → .download__detail
    .download__img  → .download__visual
    .download__btn  → .download__cta
----------------------------------------------------------------------- */
/* 上書き：右下の紺色の三角形装飾はカンプに存在しないため非表示にする */
.download::after {
  display: none;
}

.download__layout {
  display: grid;
}

/* バッジ（既存 .download__label の配色・角丸をそのまま流用し、余白のみ調整） */
.download__label {
  width: fit-content; /* グリッドアイテムでは inline-block が block 化されるため */
  margin: 0;
}

/* 見出し（.ttl / .download__ttl を上書き） */
.download__ttl {
  margin: 0;
  text-align: left;
  color: var(--main-color);
}
.download__ttl-em {
  color: var(--accent-yellow);
}

/* リード文（既存 .download__sub の紺・太字はそのまま流用） */
.download__sub {
  margin: 0;
}

/* 書影＋丸バッジ */
.download__visual {
  position: relative;
  align-self: start;
}
.download__book {
  width: 100%;
  height: auto;
}
.download__badge {
  position: absolute;
  height: auto;
}

/* 「資料でわかること」ラベル
   両脇の斜線は .hero__subcatch と同じ疑似要素方式。片側2本ずつ必要なため
   .download__catch と .download__catch-txt の疑似要素を計4つ使う */
.download__catch {
  position: relative;
  width: fit-content;
  font-weight: 700;
  color: var(--main-color);
}
.download__catch::before,
.download__catch::after,
.download__catch-txt::before,
.download__catch-txt::after {
  content: "";
  position: absolute;
  top: 50%;
  display: block;
  background-color: var(--main-color);
}

/* チェックリスト */
.download__list-item {
  position: relative;
}
.download__list-item:not(:last-child) {
  border-bottom: solid 1px var(--bdr-color); /* 細線のためvw化しない */
}
/* チェックアイコンは .why__detail-list li::before と同じものを流用 */
.download__list-item::before {
  content: "";
  position: absolute;
  left: 0;
  display: block;
  background: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.7647%203L6.82366%209.941L2.23534%205.353L0%207.588L4.58831%2012.1763L6.82366%2014.4117L9.05869%2012.1763L16%205.23538L13.7647%203Z%22%20fill%3D%22%23FF4D00%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
  background-size: contain;
}
.download__list-q {
  font-weight: 700;
  color: var(--main-color);
}
.download__list-a {
  color: var(--txt-color);
}

/* フォロー文 */
.download__note {
  font-weight: 700;
  color: var(--main-color);
}

/* CTAボタン（.btn / .btn--outline を流用） */
/* 配色（濃紺背景＋白文字＋白アイコン）は上の .btn--outline の上書きを流用 */
.download__cta {
  position: relative;
  display: flex;
  gap: 0;
}
/* .btn::before（ダウンロードアイコン）を左端へ絶対配置に変更 */
.download__cta::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
/* 右端の丸矢印はヒーローのCTAと同じ icon_arrow_white.svg を流用 */
.download__cta::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  background: url(/img/service/icon_arrow_white.svg) no-repeat center;
  background-size: contain;
  transition: all .3s ease-in;
}


@media screen and (max-width: 767px) {

  .download__layout {
    grid-template-columns: 100%;
    grid-template-areas:
      "label"
      "ttl"
      "sub"
      "visual"
      "detail";
  }
  .download__label {
    grid-area: label;
  }
  .download__ttl {
    grid-area: ttl;
  }
  .download__sub {
    grid-area: sub;
  }
  .download__visual {
    grid-area: visual;
  }
  .download__detail {
    grid-area: detail;
  }

  .download__ttl {
    margin-top: 0.8462vw;
    font-size: 6.9231vw;
    line-height: 1.2;
  }

  .download__sub {
    margin-top: 6.0256vw;
    font-size: 4.1026vw;
    line-height: 1.5;
  }

  /* .inner（84.8718%）より広く、画面中央基準で配置する */
  .download__visual {
    width: 90vw;
    margin: 13.4103vw 0 0 -3.0513vw;
  }
  .download__badge {
    top: -12.1795vw;
    right: 0.2821vw;
    width: 22.3077vw;
  }

  .download__catch {
    margin: 19.0256vw auto 0;
    padding: 0 8.7179vw;
    font-size: 4.1026vw;
    line-height: 1.6;
  }
  .download__catch::before,
  .download__catch::after,
  .download__catch-txt::before,
  .download__catch-txt::after {
    width: 4.6154vw;
    height: 2px; /* 細線のためvw化しない */
  }
  .download__catch::before {
    left: -1.2821vw;
    transform: translateY(-50%) rotate(60deg);
  }
  .download__catch-txt::before {
    left: 0.2564vw;
    transform: translateY(-50%) rotate(60deg);
  }
  .download__catch::after {
    right: 1.0256vw;
    transform: translateY(-50%) rotate(-60deg);
  }
  .download__catch-txt::after {
    right: -0.5128vw;
    transform: translateY(-50%) rotate(-60deg);
  }

  .download__list {
    margin-top: 2.6667vw;
  }
  .download__list-item {
    padding: 3.4615vw 0 3.9744vw 6.9231vw;
  }
  .download__list-item::before {
    top: 5.2564vw;
    width: 3.5897vw;
    height: 3.5897vw;
  }
  .download__list-q {
    display: block;
    font-size: 4.1026vw;
    line-height: 1.6;
  }
  .download__list-a {
    display: block;
    margin-top: 2.5641vw;
    font-size: 1em;
    line-height: 1.6;
  }

  .download__note {
    margin-top: 8.3077vw;
    font-size: 4.1026vw;
    line-height: 1.6;
  }

  /* .inner（84.8718%）より広く、画面中央基準で配置する */
  .download__cta {
    width: 89.7436vw;
    min-height: 15.3846vw;
    margin: 3.8718vw 0 0 -2.4359vw;
    padding: 0 11.7949vw 0 6.4103vw; /* 左右は各アイコンとの重なりを防ぐ余白 */
    border-radius: var(--radius-sp);
    font-size: 4.1026vw;
  }
  .download__cta::before {
    left: 4.7436vw;
    width: 4.7436vw;
    height: 4.7436vw;
  }
  .download__cta::after {
    right: 4.6154vw;
    width: 5vw;
    height: 5vw;
  }

}


@media screen and (min-width: 768px), print {

  /* 幅1140px（.inner最大幅）時に 620 / 47 / 473px となる比率。
     狭いPC幅では比率を保って縮む。バッジと見出しは2カラムにまたがる */
  .download__layout {
    grid-template-columns: minmax(0, 54.386%) minmax(0, 1fr);
    column-gap: 4.1228%;
    grid-template-areas:
      "label  label"
      "ttl    ttl"
      "sub    visual"
      "detail visual";
  }
  .download__label {
    grid-area: label;
  }
  .download__ttl {
    grid-area: ttl;
  }
  .download__sub {
    grid-area: sub;
  }
  .download__visual {
    grid-area: visual;
  }
  .download__detail {
    grid-area: detail;
  }

  .download__ttl {
    margin-top: 15px;
    font-size: 36px;
    line-height: 1.2;
  }

  .download__sub {
    margin-top: 20.5px;
    font-size: 1em;
    line-height: 1.5;
  }

  /* 右カラム（1140px時に473px）に対し107.4%＝508px。
     カンプ通り .inner の右へ約35pxはみ出す */
  .download__visual {
    width: 107.4%;
    margin-top: 22.7px;
  }
  /* 書影に対する比率で指定し、画像が縮んでもバッジの位置関係を保つ */
  .download__badge {
    top: -17.885%;
    right: 2.756%;
    width: 24.0157%;
  }

  .download__catch {
    margin-top: 41.5px;
    padding: 0 34px;
    font-size: 1em;
    line-height: 1.6;
  }
  .download__catch::before,
  .download__catch::after,
  .download__catch-txt::before,
  .download__catch-txt::after {
    width: 18px;
    height: 2px; /* 細線のためvw化しない */
  }
  .download__catch::before {
    left: -5px;
    transform: translateY(-50%) rotate(60deg);
  }
  .download__catch-txt::before {
    left: 1px;
    transform: translateY(-50%) rotate(60deg);
  }
  .download__catch::after {
    right: 4px;
    transform: translateY(-50%) rotate(-60deg);
  }
  .download__catch-txt::after {
    right: -2px;
    transform: translateY(-50%) rotate(-60deg);
  }

  .download__list {
    margin-top: 16.5px;
  }
  .download__list-item {
    display: flex;
    flex-wrap: wrap; /* 狭いPC幅では補足文が2行目に折り返す */
    align-items: baseline;
    padding: 15px 0 15px 36px;
  }
  .download__list-item::before {
    top: 19px;
    left: 1px;
    width: 19px;
    height: 19px;
  }
  .download__list-q {
    flex: 0 0 318px;
    max-width: 100%;
    font-size: 18px;
    line-height: 1.6;
  }
  .download__list-a {
    font-size: 1em;
    line-height: 1.6;
  }

  .download__note {
    margin-top: 41px;
    font-size: 1em;
    line-height: 1.6;
  }

  .download__cta {
    width: 480px;
    max-width: 100%; /* 狭いPC幅で左カラムからはみ出さないように */
    min-height: 80px;
    margin-top: 15px;
    padding: 0 89px 0 62px; /* 左右は各アイコンとの重なりを防ぐ余白 */
    border-radius: var(--radius-pc);
    font-size: 21px;
  }
  .download__cta::before {
    left: 28px;
    width: 30px;
    height: 30px;
  }
  .download__cta::after {
    right: 28px;
    width: 24px;
    height: 24px;
  }
  /* hover：背景・文字・ダウンロードアイコンの反転は .btn--outline:hover を流用し、丸矢印のみ追従させる */
  .download__cta:hover::after {
    background-image: url(/img/service/icon_arrow_navy.svg);
  }

}


/* -----------------------------------------------------------------------
 ヘッダー（PCヘッダー内ボタンの高さ調整）
----------------------------------------------------------------------- */
@media screen and (min-width: 768px), print {

  /* 上書き：.btn の padding: 1em → 上下のみ詰めてボタン高さを調整 */
  .header__btns .btn {
    padding: 11px 1em;
  }

}