/* ======================================================================
 reset
 参考: https://www.joshwcomeau.com/css/custom-css-reset/
====================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  overflow-y: scroll;
  overflow-anchor: none;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
ul {
  list-style: none;
  padding-left: 0;
}


/* ======================================================================
 variables
====================================================================== */
:root {
  --color-green: #0da222;        /* CTAグリーン */
  --color-green-dark: #0a8a1c;
  --color-black: #333;        /* 見出し・本文の黒 */
  --color-yellow: #ffd900;       /* メインの黄色（HERO以降の帯） */
  --color-gray: #777;
  --color-bg-gray: #f5f5f5;
  --font-base: "Noto Sans JP", 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif;
  --font-yakuhan: YakuHanJP, "Noto Sans JP", 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif;
  --base-width: 1240px;
}


/* ======================================================================
 base
====================================================================== */
html {
  font-size: 62.5%;
}

body {
  font-family: var(--font-base);
  font-weight: 500;
  color: var(--color-black);
  line-height: 1.7;
  word-wrap: break-word;
  word-break: break-all;
  min-width: var(--base-width);
  @media (max-width: 768px) {
    min-width: inherit;
  }
}
html.is-nav-open {
  overflow: hidden;
}

img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

strong {
  font-weight: 700;
}

a {
  transition: opacity .2s;
  color: var(--color-black);
  text-decoration: none;
  cursor: pointer;
  @media (min-width: 769px) {
    &:hover {
      opacity: .75;
    }
  }
}


/* ======================================================================
 utility
====================================================================== */



/* =================================
 l-content__size : コンテナ幅
================================= */
.l-content__size-pc-1 {
  width: var(--base-width);
  margin: 0 auto;
  padding-inline: 20px;
  @media (max-width: 768px) {
    width: auto;
    padding-inline: calc(40/750*100vw);
  }
}

.l-content__size-pc-2 {
  /* 本文などやや狭めのコンテナ */
  width: 840px;
  margin: 0 auto;
  padding-inline: 20px;
  @media (max-width: 768px) {
    width: auto;
    padding-inline: calc(40/750*100vw);
  }
}


/* ======================================================================
 component
====================================================================== */

/* --- 見出し（センター/通常） --- */

.c-lead {
  display: block;
  font-size: 1.6rem;
  color: var(--color-gray);
  text-align: center;
  @media (max-width: 768px) {
    font-size: calc(28/750*100vw);
  }
}

/* --- 黒タグ見出し（ピクセル角）--- */
.c-tag-head {
  position: relative;
  text-align: center;
}
.c-tag-ttl {
  position: relative;
  display: inline-block;
  background: url(/business/public-affairs/assistants-for-public/assets/img/bg_ttl.png) center center / calc(1342px / 2) no-repeat;
  color: #fff;
  font-size: 3.2rem;
  font-weight: 900;
  letter-spacing: .05em;
  width: calc(1342px / 2);
  height: calc(168px / 2);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: auto;
  @media (max-width: 768px) {
    background: url(/business/public-affairs/assistants-for-public/assets/img/sp/bg_ttl.png) center center / 100% no-repeat;
    font-size: calc(44/750*100vw);
    width: calc(582/750*100vw);
    height: calc(112/750*100vw);
  }
}
.c-tag-subttl {
  @media (max-width: 768px) {
    font-size: calc(36/750*100vw);
    font-weight: 900;
  }
}



/* --- マーカーハイライト --- */
.c-mark {
  position: relative;
  display: inline;
  white-space: nowrap;
  z-index: 0;
}
.c-mark::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: .38em;
  background: var(--color-yellow);
  z-index: -1;
}


/* --- ボタン --- */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  border-radius: 28px;
  border: none;
  font-size: 2.4rem;
  font-weight: 900;
  padding: 4px 40px;
  @media (max-width: 768px) {
    width: 100%;
    font-size: calc(36/750*100vw);
    padding: calc(16/750*100vw) 0;
    border-radius: calc(45/750*100vw);
  }
}
.c-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.c-btn i {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.c-btn--primary {
  background: var(--color-green);
  color: #fff;
  width: 500px;
  @media (max-width: 768px) {
    width: calc(570/750*100vw);
  }
  img {
    width: 28px;
  }
}
.c-btn--primary:hover {
  opacity: 1;
  background: var(--color-green-dark);
}
.c-btn--white {
  background: #fff;
  color: var(--color-black);
  border: 2px solid var(--color-black);
}
.c-btn--header {
  background: var(--color-green);
  color: #fff;
  font-size: 1.6rem;
  border-radius: 22px;
  padding: 8px 28px;
}
.c-btn--header:hover {
  opacity: 1;
  background: var(--color-green-dark);
}


/* --- バッジ／チップ --- */

.c-badge--outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-black);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 4px 18px;
  border-radius: 999px;
  @media (max-width: 768px) {
    font-size: calc(24/750*100vw);
    padding: calc(8/750*100vw) calc(25/750*100vw);
  }
}
.c-badge--outline i {
  font-size: 1.3rem;
  color: var(--color-yellow);
  @media (max-width: 768px) {
    font-size: calc(22/750*100vw);
  }
}

.c-badge--outline span {
  @media (max-width: 768px) {
    flex: 1;
    text-align: center;
  }
}


/* --- カード（黒枠） --- */
.c-card {
  background: #fff;
  border-radius: 30px;
  border: 5px solid var(--color-black);
  @media (max-width: 768px) {
    border-radius: calc(40/750*100vw);
    border: 4px solid var(--color-black);
  }
}


/* --- チェックリスト --- */
.c-check-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.c-check-list__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 1.4rem;
  color: var(--color-black);
  line-height: 1.8;
  @media (max-width: 768px) {
    font-size: calc(24/750*100vw);
  }
}
.c-check-list__item svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}


/* ======================================================================
 l-header
====================================================================== */
.l-header {
  position: sticky;
  top: 0;
  z-index: 998;
  background: rgb(255 255 255 / .95);
  @media (max-width: 768px) {
    position: static;
    background: none;
  }
}
.l-header__inner {
  height: 136px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
  padding-inline: 50px;
  @media (max-width: 768px) {
    height: calc(176/750*100vw);
    padding-inline: calc(40/750*100vw);
  }
}
.l-header__logo-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.l-header__eyebrow {
  font-size: 1.4rem;
  color: var(--color-gray);
  margin-bottom: 6px;
  @media (max-width: 768px) {
    font-size: calc(24/750*100vw);
    margin-bottom: calc(3 / 750 * 100vw);
  }
}
.l-header__logo {
  width: calc(731px / 2);
  @media (max-width: 768px) {
    width: calc(470/750*100vw);
  }
}


.l-gnav {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 30px;
  @media (max-width: 768px) {
    display: none;
  }
}
.l-gnav__item {
  color: var(--color-gray);
  font-size: 1.6rem;
}
.l-gnav__item:hover {
  color: var(--color-green);
}

.l-header__cta {
  img {
    width: 21px;
  }
  @media (max-width: 768px) {
    display: none;
  }
}

.l-header.is-scrolled .l-header__inner {
  height: 84px;
  @media (max-width: 768px) {
    height: calc(176/750*100vw);
  }
}

.l-header.is-scrolled .l-header__eyebrow {
  display: none;
}

.l-header__sp-btn {
  display: none;
  width: calc(96/750*100vw);
  height: calc(96/750*100vw);
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-yellow);
  border: none;
  border-radius: calc(15/750*100vw);
  padding: calc(39/750*100vw) calc(29/750*100vw);
  cursor: pointer;
  @media (max-width: 768px) {
    position: fixed;
    top: calc(40/750*100vw);
    right: calc(40/750*100vw);
    z-index: 1001;
    display: flex;
    margin-left: auto;
  }
}
.l-header__sp-btn span {
  height: calc(6/750*100vw);
  background: #fff;
  transition: transform .25s, opacity .25s;
}
/* .l-header__sp-btn.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.l-header__sp-btn.is-open span:nth-child(2) {
  opacity: 0;
}
.l-header__sp-btn.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
} */


/* ======================================================================
 l-sp__nav（SPハンバーガーメニュー）
====================================================================== */
/* .l-sp__nav-overlay {
  display: none;
} */
.l-sp__nav {
  display: none;
}
@media (max-width: 768px) {
  /* .l-sp__nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(26, 26, 26, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
  }
  .l-sp__nav-overlay.is-show {
    opacity: 1;
    pointer-events: auto;
  } */
  .l-sp__nav {
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    width: 100%;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    background: rgb(255 255 255 / .95);
    padding: calc(140/750*100vw) calc(40/750*100vw) calc(40/750*100vw);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s, visibility 0s .3s;
    box-shadow: -8px 0 24px rgba(16, 24, 43, .12);
    
  }
  .l-sp__nav.is-open {
    transition: opacity .3s, visibility 0s;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .l-sp__nav-close {
    position: absolute;
    top: calc(40/750*100vw);
    right: calc(40/750*100vw);
    width: calc(96/750*100vw);
    height: calc(96/750*100vw);
    background: var(--color-black);
    border: none;
    border-radius: calc(15/750*100vw);
    padding: 0;
    cursor: pointer;
  }
  .l-sp__nav-close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40%;
    height: calc(6/750*100vw);
    background: #fff;
    border-radius: 1px;
  }
  .l-sp__nav-close span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .l-sp__nav-close span:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .l-sp__nav-inner {
    min-height: calc(540/750*100vw);
    text-align: center;
  }
  .l-sp__eyebrow {
    font-size: calc(24/750*100vw);
    color: var(--color-gray);
    margin-bottom: calc(16/750*100vw);
  }
  .l-sp__logo {
    width: calc(470/750*100vw);
    margin-inline: auto;
    margin-bottom: calc(100/750*100vw);
  }
  .l-sp__nav-list {
    display: flex;
    flex-direction: column;
    gap: calc(60/750*100vw);
    margin-bottom: calc(100/750*100vw);
  }
  .l-sp__nav-item {
    display: block;
    font-size: calc(36/750*100vw);
    font-weight: 900;
    color: var(--color-black);
    
  }
}


/* ======================================================================
 l-footer
====================================================================== */
.l-footer {
  background: var(--color-black);
  color: #fff;
  padding: 18px 0;
  text-align: center;
  @media (max-width: 768px) {
    padding-block: calc(30/750*100vw);
  }
}
.l-footer__copyright {
  font-size: 1.2rem;
  font-weight: 400;
  color: rgba(255, 255, 255, .6);
  @media (max-width: 768px) {
    font-size: calc(18/750*100vw);
  }
}


/* ======================================================================
 l-fixed-cta（SP固定フローティングCTA）
====================================================================== */
.l-fixed-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  padding: calc(20/750*100vw) calc(90/750*100vw);
  background: var(--color-green);
  box-shadow: 0 -6px 20px rgba(16, 24, 43, .12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  transition: opacity .3s, transform .3s;
  display: none;
  @media (max-width: 768px) {
    display: block;
  }
  .c-btn--primary {
    background: #fff;
    color: var(--color-green);
  }
}
.l-fixed-cta.is-show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}


/* ======================================================================
 p-index__mv（ファーストビュー）
====================================================================== */
.p-index__mv {
  position: relative;
  background: #fff;
  padding: 48px 0 0;
  margin-bottom: -80px;
  overflow: hidden;
  @media (max-width: 768px) {
    padding: calc(50/750*100vw) 0 0;
    margin-bottom: calc(69/750*100vw);
  }
}
.p-index__mv-inner {
  position: relative;
  display: flex;
  gap: 100px;
  margin-left: 70px;
  @media (max-width: 768px) {
    margin-left: 0;
    flex-direction: column;
    gap: calc(40/750*100vw);
  }
}
.p-index__mv-ttl {
  font-size: 4.8rem;
  line-height: 2;
  font-weight: 900;
  font-family: var(--font-yakuhan);
  margin: 0;
  color: var(--color-black);
  letter-spacing: .05em;
  @media (max-width: 768px) {
    font-size: calc(48/750*100vw);
    line-height: 2;
    .c-mark {
      font-size: calc(56/750*100vw);
    }
  }
}
.p-index__mv-txt {
  font-size: 1.6rem;
  line-height: 1.95;
  color: var(--color-gray);
  margin: 20px 0 0;
  max-width: 520px;
  @media (max-width: 768px) {
    font-size: calc(28/750*100vw);
    line-height: 2;
    max-width: none;
    margin-top: calc(50/750*100vw);
  }
}
.p-index__mv-btn {
  margin: 42px 0 0;
  @media (max-width: 768px) {
    margin-top: calc(60/750*100vw);
    text-align: center;
  }
  .c-btn--primary {
    width: 437px;
    @media (max-width: 768px) {
      width: calc(570/750*100vw);
    }
  }
}

.p-index__mv-catch-1 {
  background: #fff;
  border: 3px solid #ff4133;
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: 700;
  color: #ff4133;
  width: 76px;
  height: 76px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 6px;
  margin-bottom: -67px;
  margin-left: 136px;
  position: relative;
  line-height: 1.2;
  @media (max-width: 768px) {
    background: #ff4133;
    border: none;
    color: #fff;
    font-size: calc(24/750*100vw);
    width: calc(124/750*100vw);
    height: calc(124/750*100vw);
    margin-top: calc(-48/750*100vw);
    margin-bottom: calc(-36/750*100vw);
    margin-left: calc(-22/750*100vw);
  }
}

.p-index__mv-catch-2 {
  background: #ff4133;
  color: #fff;
  border-radius: 50%;
  font-size: 2.8rem;
  font-weight: 900;
  width: 230px;
  height: 230px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 1.4;
  @media (max-width: 768px) {
    background: none;
    color: #ff4133;
    border-top: 2px solid #ff4133;
    border-bottom: 2px solid #ff4133;
    border-radius: 0;
    font-size: calc(36/750*100vw);
    width: inherit;
    height: inherit;
    padding-block: calc(22/750*100vw);
    margin-inline: calc(30/750*100vw);
  }
  .num {
    font-size: 3.2rem;
    @media (max-width: 768px) {
      font-size: calc(44/750*100vw);
    }
  }
  small {
    font-size: 16px;
    margin-top: 4px;
    display: block;
  }
}

.p-index__mv-people {
  margin-inline: -151px -168px;
  margin-top: -172px;
  @media (max-width: 768px) {
    margin-inline: calc(-40/750*100vw);
    margin-top: calc(60/750*100vw);
  }
}


/* ======================================================================
 p-index__about（外国人住民は「支援される側」ではなく…）
====================================================================== */
.p-index__about {
  position: relative;
  background: var(--color-yellow);
  background: url(/business/public-affairs/assistants-for-public/assets/img/bg_lead.jpg) center 63px / auto no-repeat;
  margin-bottom: -35px;
  @media (max-width: 768px) {
    margin-bottom: calc(-60/750*100vw);
    background: url(/business/public-affairs/assistants-for-public/assets/img/sp/bg_lead.jpg) center calc(61/750*100vw) / cover no-repeat;
  }
}
.p-index__about-badges-row {
  position: relative;
  z-index: 2;
  margin-bottom: -19px;
  margin-left: 56px;
  @media (max-width: 768px) {
    margin-bottom: calc(-90/750*100vw);
    margin-left: 0;
    display: flex;
    gap: calc(26/750*100vw);
  }
}
.p-index__about-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  @media (max-width: 768px) {
    flex-direction: column;
    gap: calc(24/750*100vw);
    margin-top: calc(150/750*100vw);
  }
}
.p-index__about-card {
  position: relative;
  padding: 0 56px;
  display: flex;
  justify-content: space-between;
  @media (max-width: 768px) {
    padding: calc(80/750*100vw) calc(50/750*100vw) calc(90/750*100vw);
  }
}
.p-index__about-card-inner {
  padding-block: 85px;
  @media (max-width: 768px) {
    padding-block: 0;
  }
}
.p-index__about-ttl {
  font-size: 3.2rem;
  line-height: 2;
  font-weight: 900;
  font-family: var(--font-yakuhan);
  color: var(--color-black);
  margin: 0;
  letter-spacing: .05em;
  @media (max-width: 768px) {
    font-size: calc(44/750*100vw);
  }
}
.p-index__about-txt {
  font-size: 1.6rem;
  line-height: 2;
  color: var(--color-gray);
  margin: 18px 0 0;
  @media (max-width: 768px) {
    font-size: calc(28/750*100vw);
    margin-top: calc(45/750*100vw);
  }
}

.p-index__about-visual {
  margin-block: -154px -80px;
  width: calc(696px / 2);
  @media (max-width: 768px) {
    margin-block: 0;
    width: calc(311/750*100vw);
  }
}

.p-index__about-next {
  text-align: center;
  padding-top: 70px;
  @media (max-width: 768px) {
    padding-top: calc(89/750*100vw);
  }
}
.p-index__about-next-txt {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--color-black);
  margin: 0;
  @media (max-width: 768px) {
    font-size: calc(36/750*100vw);
    line-height: 2;
  }
}
.p-index__about-next-line {
  width: 5px;
  height: 70px;
  background: var(--color-black);
  margin: 54px auto 0;
  position: relative;
  z-index: 1;
  @media (max-width: 768px) {
    width: calc(8/750*100vw);
    height: calc(120/750*100vw);
    margin-top: calc(80/750*100vw);
  }
}


/* ======================================================================
 p-index__features（4つのコア機能／ジグザグ配置）
====================================================================== */
.p-index__features {
  position: relative;
  background: url(/business/public-affairs/assistants-for-public/assets/img/bg_features.jpg) center top / auto no-repeat;
  padding: 90px 0 140px;
  overflow: hidden;
  @media (max-width: 768px) {
    background: url(/business/public-affairs/assistants-for-public/assets/img/sp/bg_features.jpg) center top / cover no-repeat;
    padding: calc(150/750*100vw) 0 calc(242/750*100vw);
  }
  .c-lead {
    margin-top: 18px;
    @media (max-width: 768px) {
      margin-top: calc(60/750*100vw);
    }
  }
}

.p-index__features-list-wrap  {
  position: relative;
}

.p-index__features-illust {
  position: absolute;
}

.p-index__features-illust-1 {
  width: calc(693px / 2);
  right: 30px;
  top: 14px;
  @media (max-width: 768px) {
    width: calc(278/750*100vw);
    right: calc(-35/750*100vw);
    top: calc(-54/750*100vw);
  }
}

.p-index__features-illust-2 {
  width: calc(78px / 2);
  left: -39px;
  top: 255px;
  @media (max-width: 768px) {
    width: calc(56/750*100vw);
    left: calc(-28/750*100vw);
    top: calc(895/750*100vw);
  }
}

.p-index__features-illust-3 {
  width: calc(224px / 2);
  left: 24px;
  top: 239px;
  @media (max-width: 768px) {
    width: calc(147/750*100vw);
    left: calc(34/750*100vw);
    top: calc(898/750*100vw);
  }
}

.p-index__features-illust-4 {
  width: calc(100px / 2);
  left: 390px;
  top: 354px;
  @media (max-width: 768px) {
    width: calc(71/750*100vw);
    left: inherit;
    right: calc(-10/750*100vw);
    top: calc(275/750*100vw);
  }
}

.p-index__features-illust-5 {
  width: calc(223px / 2);
  left: 339px;
  top: 441px;
  @media (max-width: 768px) {
    width: calc(146/750*100vw);
    left: calc(116/750*100vw);
    top: calc(146/750*100vw);
  }
}

.p-index__features-illust-6 {
  width: calc(662px / 2);
  right: 116px;
  top: 778px;
  @media (max-width: 768px) {
    width: calc(288/750*100vw);
    right: calc(-2/750*100vw);
    top: calc(28/750*100vw);
  }
}

.p-index__features-illust-7 {
  width: calc(224px / 2);
  left: 93px;
  top: 1027px;
  @media (max-width: 768px) {
    width: calc(146/750*100vw);
    left: calc(83/750*100vw);
    top: calc(144/750*100vw);
  }
}

.p-index__features-illust-8 {
  width: calc(216px / 2);
  left: 363px;
  top: 1215px;
  @media (max-width: 768px) {
    width: calc(141/750*100vw);
    left: inherit;
    right: calc(77/750*100vw);
    top: calc(891/750*100vw);
  }
}

.p-index__features-illust-9 {
  width: calc(78px / 2);
  left: 61px;
  top: 980px;
  @media (max-width: 768px) {
    width: calc(56/750*100vw);
    left: calc(34/750*100vw);
    top: calc(34/750*100vw);
  }
}

.p-index__features-illust-10 {
  width: calc(100px / 2);
  right: 5px;
  top: 1167px;
  @media (max-width: 768px) {
    width: calc(71/750*100vw);
    right: calc(264/750*100vw);
    top: calc(1042/750*100vw);
  }
}

.p-index__features-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-top: 90px;
  @media (max-width: 768px) {
    gap: calc(69/750*100vw);
    margin-top: calc(110/750*100vw);
  }
}
.p-index__features-item {
  position: relative;
  
}
.p-index__features-item:nth-child(1) { margin-right: auto; }
.p-index__features-item:nth-child(2) { margin-left: auto; margin-right: 180px; }
.p-index__features-item:nth-child(3) { margin-right: auto; }
.p-index__features-item:nth-child(4) { margin-left: auto; margin-right: 180px; }
@media (max-width: 768px) {
  .p-index__features-item:nth-child(1),
  .p-index__features-item:nth-child(2),
  .p-index__features-item:nth-child(3),
  .p-index__features-item:nth-child(4) {
    margin-left: auto;
    margin-right: auto;
  }
  .p-index__features-item:nth-child(odd) .p-index__features-item-phone {
    margin-left: calc(40/750*100vw);
  }
  .p-index__features-item:nth-child(even) .p-index__features-item-phone {
    margin-left: auto;
    margin-right: calc(40/750*100vw);
  }
}
.p-index__features-item-inner {
  width: 590px;
  height: 276px;
  max-width: 100%;
  padding: 55px 100px 55px 70px;
  padding: 0 100px 0 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  border-radius: 30px;
  border: 5px solid var(--color-black);
  @media (max-width: 768px) {
    width: auto;
    height: calc(430/750*100vw);
    padding: 0 calc(46/750*100vw);
    border-radius: calc(40/750*100vw);
    border: 4px solid var(--color-black);
    position: relative;
  }
}
.p-index__features-item-ttl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 3.2rem;
  font-weight: 900;
  color: var(--color-black);
  margin: 0 0 30px;
  line-height: 1.2;
  letter-spacing: .05em;
  @media (max-width: 768px) {
    font-size: calc(44/750*100vw);
    margin-bottom: calc(50/750*100vw);
    
  }
}
.p-index__features-item-ttl.c-mark::before {
  bottom: -.15em;
}

.p-index__features-item-ttl i {
  font-size: 3rem;
  color: var(--color-black);
  flex-shrink: 0;
  @media (max-width: 768px) {
    font-size: calc(40/750*100vw);
  }
}

.p-index__features-item-ttl img {
  width: 30px;
  @media (max-width: 768px) {
    width: calc(40/750*100vw);
  }
}
.p-index__features-item-txt {
  font-size: 1.6rem;
  line-height: 2;
  color: var(--color-gray);
  margin: 0;
  @media (max-width: 768px) {
    font-size: calc(28/750*100vw);
  }
}

.p-index__features-item-phone {
  width: calc(340px / 2);
  position: absolute;
  right: 0;
  top: -28px;
  margin-right: -113px;
  @media (max-width: 768px) {
    width: calc(364/750*100vw);
    position: relative;
    top: 0;
    margin-bottom: calc(-189/750*100vw);
  }
}


/* ======================================================================
 p-index__language（9言語対応）
====================================================================== */
.p-index__language {
  position: relative;
  padding: 90px 0 0;
  @media (max-width: 768px) {
    padding: calc(110/750*100vw) 0 0;
  }
  .c-tag-ttl {
    margin-bottom: -42px;
    @media (max-width: 768px) {
      margin-bottom: calc(-55/750*100vw);
    }
  }
}
.p-index__language-box {
  background: var(--color-bg-gray);
  border-radius: 10px;
  border: 1px solid #d5d5d5;
  padding: 62px 70px 75px;
  @media (max-width: 768px) {
    border-radius: calc(15/750*100vw);
    padding: calc(110 / 750 * 100vw) 0 calc(90 / 750 * 100vw);
  }
}
.p-index__language-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px 14px;
  margin-top: 60px;
  @media (max-width: 768px) {
    gap: calc(34/750*100vw) calc(22/750*100vw);
    margin-top: calc(74/750*100vw);
  }
}
.p-index__language-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #d5d5d5;
  border-radius: 999px;
  padding: 8px 22px 8px 0;
  width: 200px;
  height: 48px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-black);
  @media (max-width: 768px) {
    gap: 0;
    font-size: calc(24/750*100vw);
    padding: calc(8/750*100vw) calc(10/750*100vw) calc(8/750*100vw) 0;
    width: calc(274/750*100vw);
    height: calc(66/750*100vw);
  }
  p {
    text-align: center;
    flex: 1;
  }
}

.p-index__language-item-flag {
  width: calc(136px / 2);
  margin-block: -10px;
  margin-left: -4px;
  @media (max-width: 768px) {
    width: calc(91/750*100vw);
    margin-block: calc(-13/750*100vw);
    margin-left: calc(-8/750*100vw);
  }
}


/* ======================================================================
 p-index__spec（アプリ概要）
====================================================================== */
.p-index__spec {
  position: relative;
  padding: 60px 0 100px;
  @media (max-width: 768px) {
    padding: calc(90/750*100vw) 0 calc(110/750*100vw);
  }
}
.p-index__spec-table {
  border: 1px solid #d5d5d5;
  border-radius: 10px;
  overflow: hidden;
  @media (max-width: 768px) {
    margin-inline: calc(20/750*100vw);
  }
}
.p-index__spec-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  border-bottom: 1px solid #d5d5d5;
  @media (max-width: 768px) {
    grid-template-columns: calc(196/750*100vw) 1fr;
  }
}
.p-index__spec-row:last-child {
  border-bottom: none;
}

.p-index__spec-row-label {
  padding: 16px 37px;
  background: var(--color-bg-gray);
  border-right: 1px solid #d5d5d5;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-black);
  display: flex;
  align-items: center;
  @media (max-width: 768px) {
    padding: calc(20/750*100vw) calc(30/750*100vw) calc(20/750*100vw);
    font-size: calc(24/750*100vw);
  }
}
.p-index__spec-row-value {
  padding: 16px 37px;
  font-size: 1.4rem;
  color: var(--color-gray);
  display: flex;
  align-items: center;
  @media (max-width: 768px) {
    padding: calc(20/750*100vw) calc(30/750*100vw) calc(20/750*100vw);
    font-size: calc(24/750*100vw);
  }
}


/* ======================================================================
 p-index__cta（CTA帯）
====================================================================== */
.p-index__cta {
  position: relative;
  padding: 100px 0;
  background: url(/business/public-affairs/assistants-for-public/assets/img/bg_cta.jpg) center top / auto no-repeat;
  @media (max-width: 768px) {
    padding: calc(110/750*100vw) 0;
    background: url(/business/public-affairs/assistants-for-public/assets/img/sp/bg_cta.jpg) center top / cover no-repeat;
  }
}
.p-index__cta-card {
  background: #fff;
  border: 5px solid var(--color-black);
  border-radius: 30px;
  padding: 56px 40px;
  text-align: center;
  @media (max-width: 768px) {
    padding: calc(110/750*100vw) calc(50/750*100vw);
    border: 4px solid var(--color-black);
    border-radius: calc(40/750*100vw);
  }
}
.p-index__cta-logo {
  width: calc(731px / 2);
  margin-inline: auto;
  margin-bottom: 20px;
  @media (max-width: 768px) {
    width: calc(499/750*100vw);
    margin-bottom: calc(50/750*100vw);
  }
}

.p-index__cta-ttl {
  font-size: 4.8rem;
  font-weight: 900;
  color: var(--color-black);
  margin: 0 0 16px;
  line-height: 1.5;
  letter-spacing: .05em;
  @media (max-width: 768px) {
    font-size: calc(48/750*100vw);
    margin-bottom: calc(50/750*100vw);
  }
}
.p-index__cta-txt {
  font-size: 1.6rem;
  color: var(--color-gray);
  margin: 0 0 50px;
  @media (max-width: 768px) {
    font-size: calc(28/750*100vw);
    margin-bottom: calc(80/750*100vw);
  }
}


/* ======================================================================
 u-pc / u-sp
 参考LPと同様、他のコンポーネント個別のdisplay指定に確実に勝てるよう
 ファイル最後尾に配置する
====================================================================== */
.u-pc {
  display: block;
}

.u-sp {
  display: none;
}
@media (max-width: 768px) {
  .u-pc {
    display: none;
  }
  .u-sp {
    display: block;
  }
}