@charset "UTF-8";

@font-face {
  font-family: "M PLUS Rounded 1c";
  src: url("./fonts/MPLUSRounded1c-Medium.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "M PLUS Rounded 1c Bold";
  src: url("./fonts/MPLUSRounded1c-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "M PLUS Rounded 1c ExtraBold";
  src: url("./fonts/MPLUSRounded1c-ExtraBold.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("./fonts/NotoSansJP-Medium.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP Bold";
  src: url("./fonts/NotoSansJP-ExtraBold.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   基本設定
   ========================================================= */
:root {
  --color-blue: #0068B7;
  --color-blue-light: #E3F1FB;
  --color-red: #E22525;
  --color-orange: #D63D00;
  --color-orange-light: #FFE9D4;
  --color-cream: #F8F3E2;
  --color-green-pale: #C8E2D7;
  --color-text: #000;
  --content-max: 1000px;
  --body-font: max(18px, min(24px, 2.4vw));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--color-text);
  background: #ffffff;
  font-family:
    "M PLUS Rounded 1c",
    "Yu Gothic",
    Meiryo,
    sans-serif;
  font-size: var(--body-font);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main {
  overflow-x: clip;
}

* {
  margin: 0;
  padding: 0;
}
footer {
  position: relative;
  margin: auto;
  width: 100%;
}
p {
  margin: 0;
}
ul {
  margin: 0;
  padding: 0;
  width: 100%;
}
li {
  list-style: none;
}
a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  opacity: 1;
  transition: opacity .15s ease-in-out;
  transition: transform 0.3s;
}
a:hover {
  color: var(--color-blue);
}
img {
  max-width: 100%;
  height: auto;
  width: 100%;
  vertical-align: top;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

/*
 * 振り仮名はDOMのテキストノードに置かず、画面上だけ復元する。
 * white-spaceを固定し、従来のruby注釈と同じ固有幅・改行位置を保つ。
 */
 rt {
  translate: 0 0.4em;
  margin-top: -0.4em;
  speak: never;
}

rt[data-reading]::before {
  white-space: nowrap;
  content: attr(data-reading);
}

/* JICA */
[data-visual-text="JICA"] {
  position: relative;
}

/* 通常画面に表示する文字 */
[data-visual-text="JICA"]::before {
  content: "JICA";
  content: "JICA" / "";
}

/* Safari Readerに渡す実テキスト */
[data-visual-text="JICA"] > [data-reader-text] {
  position: absolute;
  inset: 0 auto auto 0;

  width: 1px;
  height: 1px;

  color: transparent;
  -webkit-text-fill-color: transparent;

  font-size: 1px;
  line-height: 1;
  white-space: nowrap;

  pointer-events: none;
  forced-color-adjust: none;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  padding: min(14px, 1.4vw) min(20px, 2vw);
  color: #ffffff;
  background: #000000;
  font-size: max(18px, min(20px, 2vw));
  transform: translateY(-110%);
}

/* .skip-link:focus {
  transform: translateY(0);
} */

:focus-visible {
  outline: 4px solid #FF5300;
  outline-offset: 4px;
}

.content-inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 0 min(40px, 4vw);
  position: relative;
}

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

}

/* =========================================================
   ファーストビュー
   ========================================================= */
.fv {
  position: relative;
  width: 100vw;
  height: 54.6vw;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fv__row {
  position: relative;
  width: 85vw;
  height: 45vw;
  display: flex;
  align-items: center;
}
.fv__panel {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  width: 100%;
  height: 100%;
  background: var(--color-blue-light);
  border-radius: 1.6vw;
}

.fv__logo {
  position: absolute;
  z-index: 4;
  top: 0vw;
  left: 3.2vw;
  filter: drop-shadow(0 0.25vw 0.7vw rgba(0, 0, 0, 0.12));
}

.fv__logo img {
  width: 10vw;
  height: auto;
}

.fv__copy {
  /* position: absolute; */
  /* z-index: 3;
  top: 42%;
  transform: translateY(-50%);
  left: 15vw; */
  transform: translateY(-10%);
  padding: 0vw 7vw 5vw;
}
.fv__copy h1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}

.fv__lead {
  margin: 0 0 1.05vw;
  color: var(--color-blue);
  font-size: 2.12vw;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.025em;
}

.fv__title {
  margin: 0;
  color: #000000;
  font-size: 5.15vw;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0.01em;
  text-indent: -2.5vw;
  font-family: "M PLUS Rounded 1c Bold";
  max-width: 100%;
}

.fv__collage {
  position: absolute;
  z-index: 2;
  top: 49%;
  transform: translateY(-50%);
  right: -12.0vw;
  width: 64vw;
  height: auto;
}

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

}

@media screen and (max-width:767px) {
  .fv__logo {
    left: 0.25vw;
  }
  .fv__logo img {
    width: 26vw;
  }
  .fv {
    height: 156vw;
    padding-bottom: 12vw;

    height: auto;
    padding: 5vw 0 0;
  }
  .fv__row {
    flex-direction: column;
    justify-content: start;
    align-items: center;

    height: auto;

  }
  .fv__panel {
    height: 90%;
    top: 0;
    transform: translate(-50%, -0);
  }

  .fv__copy {
    padding: 28vw 0vw 0vw;
    text-align: center;
    transform: translateY(0);
    max-width: 100%;
  }
  .fv__copy h1 {
    align-items: center;
  }
  .fv__lead {
    font-size: 6.42vw;
    margin-bottom: 4vw;
  }
  .fv__title {
    text-indent: 0;
    font-size: 11.74vw;
  }

  .fv__collage {
    position: static;
    transform: translate(0%);
    width: 100vw;
    max-width: none;
  }
}
/* =========================================================
   共通
========================================================= */

.mgn-btm {
  margin-bottom: min(40px, 4vw);
}
br.sp-open_br {
  display: none;
  height: 0;
  width: 0;
}

@media screen and (max-width:767px) {
  .mgn-btm {
    margin-bottom: 8vw;
  }
  br.sp-open_br {
    display: block;
  }
}

/* 背景あしらい */
.ele-area {
  position: relative;
}
.ele-inner {
  position: absolute;
  content: '';
  z-index: 2;
  background-size: 100%;
  background-position: 0;
  background-repeat: no-repeat;
}
.ele_01 {
  background-image: url(./img/img_ele_vertical01.webp);
  width: min(343px, 34.3vw);
  height: min(891px, 89.1vw);
  left: -24%;
  top: -28%;
}
.ele_02 {
  background-image: url(./img/img_ele_vertical02.webp);
  width: min(280px, 28vw);
  height: min(777px, 77.7vw);
  right: -20%;
  bottom: -50%;
}
.ele_03 {
  background-image: url(./img/img_ele_horizontal02.webp);
  width: min(503px, 50.3vw);
  height: min(340px, 34vw);
  right: -28%;
  top: min(20px, 2vw);
}
.ele_04 {
  background-image: url(./img/img_ele_horizontal02.webp);
  width: min(503px, 50.3vw);
  height: min(340px, 34vw);
  left: -30%;
  top: min(640px, 64vw);
  transform: rotateY(180deg);
}

.closing-ele--left {
  top: min(30px, 3vw);
  left: -30%;
  width: min(343px, 34.3vw);
  height: min(891px, 89.1vw);
  background-image: url(./img/img_ele_vertical01.webp);
}

.closing-ele--right {
  top: -25%;
  right: -25%;
  width: min(280px, 28vw);
  height: min(777px, 77.7vw);
  background-image: url(./img/img_ele_vertical02.webp);
}

.section__img {
  position: absolute;
  content: '';
  height: auto;
}
.section__img.img_01 {
  right: -8%;
  bottom: 0;
  width: min(280px, 28vw);
  height: auto;
}
.section__img.img_02 {
  right: -10%;
  top: max(-100px, -10vw);
  width: min(203px, 20.3vw);
  height: auto;
}
.section__img.img_03 {
  top: min(20px, 2.0vw);
  right: max(-96px, -9.6vw);
  width: min(400px, 40vw);
}

@media screen and (max-width:1000px) {
  .section__img.img_02 {
    right: 0%;
    top: -16vw;
    width: 24vw;
    height: auto;
  }
}
@media screen and (max-width:767px) {
  .ele_01 {
    left: 0%;
    top: auto;
    bottom: -59%;
    z-index: -1;
  }
  .ele_02 {
    right: -8%;
    bottom: -38%;
    z-index: -1;
  }
  .ele_03 {
    left: 0vw;
    top: -40vw;
  }
  .section__img.img_01 {
    right: 5%;
    bottom: 1%; 
    width: 44vw;
  }
  .section__img.img_03 {
    top: -10vw;
    right: 0;
    width: 60vw;
  }
} 

@media screen and (max-width:300px) {
  .section__img.img_02 {
    top: -32vw;
  }
  .section__img.img_03 {
    top: -20vw;
    width: 100%;
  }
}

/* タイトル */
.section-title {
  margin-bottom: min(40px, 4vw);
}
.section-title h2 {
  display: inline;
  color: var(--color-blue);
  background: linear-gradient(
    transparent 70%,
    var(--color-orange-light) 70%,
    var(--color-orange-light) 98%,
    transparent 98%
  );
  font-size: max(36px, min(54px, 5.4vw));
  font-family: "Noto Sans JP Bold";
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.border-ttl {
  padding: min(8px, 0.8vw) min(24px, 2.4vw) 0;
  background: #ffffff;
  border: min(4px, 0.4vw) solid #9CBDE3;
  border-radius: min(32px, 3.2vw);
  font-size: max(18px, min(24px, 2.4vw));
  font-weight: 900;
  font-family: "M PLUS Rounded 1c ExtraBold";
  line-height: 1.75;
  width: fit-content;
  min-width: min(316px, 31.6vw);
  text-align: center;
}
.border-ttl__bgcont {
  transform: translateY(-50%);
  margin: 0;
}

@media screen and (max-width:767px) {
  .section-title {
    margin-bottom: 8vw;
  }
  .section-title h2 {
    font-size: 10vw;
  }

  .border-ttl {
    /* width: 94%; */
    border-radius: 10vw;
    padding: 1.2vw 4vw 0vw;
    border: 0.8vw solid #9CBDE3;
    margin: auto;
    text-align: left;
    min-width: auto;
  }
  .credit-card .border-ttl,
  .map-card .border-ttl,
  .consideration-block .border-ttl {
    text-align: left;
  }
}
@media screen and (max-width:300px) {
  .border-ttl {
    padding: 4vw 4vw 0vw;
  }
  .border-ttl__bgcont {
    margin-bottom: -12vw;
  }
  .section-title {
    margin-bottom: 16vw;
  }
  .section-title h2 {
    font-size: 14vw;
  }
}

/* タイトル下リード文 */
.intro__description {
  font-size: max(18px, min(24px, 2.4vw));
  font-weight: 400;
  line-height: 1.8;
}

/* テキスト */
.txt__ExtraBold {
  font-weight: 900;
  font-family: "M PLUS Rounded 1c ExtraBold";
  line-height: 1.75;
}

/* 横並び */
.column-wrap {
  display: grid;
  grid-template-columns: min(420px,42vw) min(450px,45vw);
  justify-content: center;
  align-items: flex-start;
  gap: min(50px,5vw);
  margin-top: min(80px,8vw);
}
.column-wrap__txt {
  padding: min(20px, 2vw) 0;
}
.column-wrap__txt li {
  position: relative;
  padding-left: min(320px, 3.2vw);
  text-indent: max(-320px, -3.2vw);
  margin-bottom: min(12px, 1.2vw);
}
.column-wrap__txt li::before {
  content: '▶︎';
  color: var(--color-blue);
  margin: 0 min(8px, 0.8vw);
}
.column-wrap__imgs img {
  margin-bottom: min(12px, 1.2vw);
}
.column-wrap__imgs p {
  font-size: 18px;
}

@media screen and (max-width:767px) {
  .column-wrap {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 12vw;
  }
  .column-wrap__txt li {
    margin-bottom: 2.4vw;
  }
  .column-wrap__txt,
  .column-wrap__imgs {
    padding: 4vw;
  }
  .column-wrap__imgs img {
    margin-bottom: 2.4vw;
  }
}
@media screen and (max-width:300px) {
  .column-wrap {
    display: block;
  }
  .column-wrap__txt,
  .column-wrap__imgs {
    padding: 8vw 0;
  }
  .column-wrap__imgs img {
    margin-bottom: 4.8vw;
  }
}

/* ナンバリングリスト */
ul.number_list li {
  padding-left: min(44px, 4.4vw);
  margin-bottom: min(10px, 1vw);
  position: relative;
  line-height: 1.75;
}
ul.number_list li span {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  background-color: var(--color-blue);
  color: #fff;
  border-radius: 100%;
  width: min(36px, 3.6vw);
  height: min(36px, 3.6vw);
  aspect-ratio: 1/1;
  margin-right: min(8px, 0.8vw);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: max(14px, min(20px, 2vw));
}
@media screen and (max-width:767px) {
  ul.number_list {
    padding: 4vw;
  }
  ul.number_list li {
    padding-left: 8.8vw;
    margin-bottom: 2vw;
  }
  ul.number_list li span {
    width: 7.2vw;
    height: 7.2vw;
  }
}
@media screen and (max-width:300px) {
  ul.number_list li {
    padding-left: 17.6vw;
    margin-bottom: 4vw;
  }
  ul.number_list li span {
    width: 14vw;
    height: auto;
  }
}

/* 囲いコンテンツ */
.contents__bg {
  border-radius: min(24px, 2.4vw);
  position: relative;
  padding: min(40px, 4vw) min(40px, 4vw) min(40px, 4vw);
}

.credit-card {
  background: var(--color-cream);
  margin-top: min(68px, 6.8vw);
  padding: 0 min(40px, 4vw) min(32px, 3.2vw) min(40px, 4vw);
}
.map-card {
  background: var(--color-blue-light);
  margin-top: min(200px, 20vw);
  padding: 0 min(40px, 4vw) min(40px, 4vw);
}
.quiz-card {
  border: min(2px, 0.2vw) solid var(--color-blue);
  margin-top: min(60px, 6vw);
}
.katsudo-card {
  border: min(2px, 0.2vw) dashed var(--color-blue);
  margin-top: min(60px, 6vw);
  padding: min(20px, 2vw) min(40px, 4vw) min(30px, 3vw);
}
.people-card {
  background: var(--color-cream);
  padding: min(60px, 6vw) min(40px, 4vw) min(60px, 6vw);
}
.closing-card {
  background: var(--color-blue-light);
}

@media screen and (max-width:767px) {
  .contents__bg {
    border-radius: 4vw;
    padding: 8vw 4vw 8vw;
  }

  .credit-card {
    margin-top: 24vw;
    padding: 0vw 4vw 6vw;
  }
  .map-card {
    padding: 0vw 4vw 8vw;
  }

  .katsudo-card {
    border: 0.6vw dashed var(--color-blue);
    padding: 4vw 4vw 6vw;

  }
}
@media screen and (max-width:300px) {
  .contents__bg {
    margin-top: 24vw;
  }

  .credit-card {
    margin-top: 40vw;
  }
  .map-card {
    margin-top: 40vw;
  }
  .quiz-card {
    margin-top: 12vw
  }

}
/* =========================================================
   目次
   ========================================================= */
.toc-card {
  background: var(--color-blue-light);
  margin-top: min(68px, 6.8vw);
}

.toc-card__img {
  position: absolute;
  z-index: 2;
  top: max(-72px, -7.2vw);
  right: -23%;
}
.toc-card__photo {
  width: min(642px, 64.2vw);
  height: auto;
}

.toc-card__panel {
  position: relative;
  z-index: 1;
  min-height: min(585px, 58.5vw);
  padding:
    min(38px, 3.8vw)
    min(54px, 5.4vw)
    min(42px, 4.2vw);
  background: #ffffff;
  border-radius: min(24px, 2.4vw);
}

.toc-card__title {
  display: inline-block;
  margin: 0 0 min(24px, 2.4vw);
  color: var(--color-red);
  font-size: max(28px, min(40px, 4vw));
  font-weight: 700;
  font-family: "M PLUS Rounded 1c Bold";
  line-height: 1.2;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
  text-underline-offset: min(9px, 0.9vw);
}

.toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc-number;
  font-size: max(18px, min(28px, 2.8vw));
  font-variant-numeric: tabular-nums;
}

.toc-list li {
  display: flex;
  align-items: baseline;
  gap: min(10px, 1vw);
  counter-increment: toc-number;
}

/* .toc-list li::before {
  flex: 0 0 min(48px, 4.8vw);
  content: counter(toc-number, decimal-leading-zero) ".";
  font-weight: 500;
} */

.toc-list li + li {
  margin-top: min(15px, 1.5vw);
}

.toc-list a {
  flex: 1;
  font-weight: 400;
  text-decoration-line: underline;
  text-decoration-thickness: min(2px, 0.2vw);
  text-underline-offset: min(5px, 0.5vw);
}

.toc-list__quiz {
  align-items: center;
  flex-wrap: wrap;
}

.quiz-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: min(4px, 0.4vw) min(8px, 0.8vw) min(4px, 0.4vw);
  color: #ffffff;
  background: var(--color-orange);
  border-radius: min(7px, 0.7vw);
  font-size: 18px;
  font-weight: 900;
  font-family: "M PLUS Rounded 1c ExtraBold";
  line-height: 1;
}

.quiz-badge span {
  margin-bottom: min(2px, 0.2vw);
  font-size: 18px;
  font-weight: 700;
  font-family: "M PLUS Rounded 1c Bold";
}

.toc-card__message {
  margin: min(34px, 3.4vw) 0 0;
  font-size: max(18px, min(24px, 2.4vw));
  font-weight: 400;
  line-height: 1.75;
}

@media screen and (max-width:767px) {
  .toc-card {
    margin-top: 21vw;
    padding: 4vw;
  }

  .toc-card__img {
    top: -21vw;
    right: -78%;
  }
  .toc-card__photo {
    width: 108vw;
  }

  .toc-card__title {
    margin-bottom: 4vw;
    text-underline-offset: 1.8vw;
  }
  .toc-list li {
    margin-bottom: 4vw;
    align-items: center;
  }

  .quiz-badge {
    height: stretch;
    padding: 1.2vw 2.4vw 1.2vw;
  }

  .toc-card__message {
    padding: 2vw 2vw;
  }
}
@media screen and (max-width:300px) {
  .toc-card__title {
    margin-bottom: 8vw;
    line-height: 1.7;
  }
  .toc-list li {
    margin-bottom: 8vw;
    gap: 4vw;
    flex-wrap: wrap;
  }
  .toc-list a {
    flex: auto;
  }
}

/* =========================================================
   制作協力者
   ========================================================= */

.credit-card__text {
  margin: 0;
  font-size: max(18px, min(24px, 2.4vw));
  font-weight: 400;
  line-height: 1.8;
}

@media screen and (max-width:767px) {
  .credit-card__text {
    padding: 2vw 2vw 0;
  }
}

/* =========================================================
   01. ことばの説明
   ========================================================= */
.word-section {
  padding-top: min(160px, 16vw);
  padding-bottom: min(280px, 28vw);
}

.word-section .word-intro {
  padding-inline: min(60px, 6vw);
}
.word-intro {
  display: flex;
  gap: min(20px, 2vw);
  align-items: center;
}
.word-intro__term {
  font-size: max(24px, min(32px, 3.2vw));
  text-align: center;
}

.word-intro_blue {
  color: var(--color-blue);
  font-size: max(32px, min(52px, 5.2vw));
  font-weight: 700;
  font-family: "Helvetica";
  line-height: 1.5;
}

.word-intro__dots {
  border-top: min(3px, 0.3vw) dotted #111111;
  min-width: min(28px, 2.8vw);
}

.acronym {
  width: min(520px, 52vw);
  margin: min(38px, 3.8vw) auto 0;
}
.acronym__list {
  width: 100%;
  margin:
    calc(0px - min(12px, 1.2vw))
    0;

  border-collapse: separate;
  border-spacing:
    0
    min(12px, 1.2vw);

  table-layout: fixed;
}
.acronym__language-row th {
  padding:
    0
    0
    min(16px, 1.6vw);

  border: 0;
  background: transparent;

  font-size: 18px;
  font-weight: 400;
  line-height: 1.05;
  vertical-align: bottom;
}
.acronym__language-row th:first-child {
  text-align: left;
}
.acronym__language-row th:last-child {
  text-align: right;
}
.acronym__language-label {
  position: relative;
  display: inline-flex;
  min-width: min(142px, 14.2vw);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: min(8px, 0.8vw) min(16px, 1.6vw) min(8px, 0.8vw);

  background: var(--color-green-pale);
  border-radius: min(30px, 3vw);

  font-size: 18px;
  font-weight: 400;
  line-height: 1.05;
}
.acronym__language-label::before {
  position: absolute;
  top: 100%;
  left: 50%;

  width: min(12px, 1.2vw);
  height: min(8px, 0.8vw);

  background: var(--color-green-pale);
  clip-path: polygon(0 0, 100% 0, 50% 100%);

  transform: translateX(-50%);

  content: "";
}
.acronym__language-row small,
.acronym__row small {
  display: block;

  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.acronym__row {
  height: min(76px, 7.6vw);
}
.acronym__row > th,
.acronym__row > td {
  background: var(--color-cream);
  vertical-align: middle;
}
.acronym__row > th {
  width: 50%;
  padding: min(8px, 0.8vw) 0 min(8px, 0.8vw) min(26px, 2.6vw);
  border-radius: min(12px, 1.2vw) 0 0 min(12px, 1.2vw);
  
}
.acronym__row > td {
  width: 50%;
  padding: min(8px, 0.8vw) min(26px, 2.6vw) min(8px, 0.8vw) 0;
  border-radius: 0 min(12px, 1.2vw) min(12px, 1.2vw) 0;
}

/* 英語 */
.acronym__word {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  font-size: max(20px, min(26px, 2.6vw));
}

.acronym__word > strong {
  display: inline-block;
  min-width: min(32px, 3.2vw);
  color: var(--color-blue);
  font-size: max(30px, min(42px, 4.2vw));
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  vertical-align: baseline;
}

/* 日本語 */
.acronym__translation {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: min(20px, 2vw);
}

.acronym__leader {
  width: min(40px, 4vw);
  min-width: min(55px, 5.5vw);

  border-top:
    min(3px, 0.3vw)
    dotted
    #111111;
}

.acronym__translation > strong {
  min-width: min(72px, 7.2vw);

  font-size: max(22px, min(30px, 3vw));
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

  

.acronym__brace {
  position: relative;
  height: min(12px, 1.2vw);
  margin-top: min(20px, 2vw);
  border: min(1.5px, 0.15vw) solid #111111;
  border-radius: 0 0 min(4px, 0.4vw) min(4px, 0.4vw);
  border-top: none;
}

.acronym__brace::after {
  position: absolute;
  content: '';
  width: min(8px, 0.8vw);
  height: min(8px, 0.8vw);
  background: #fff;
  top: 100%;
  left: 50%;
  transform: rotate(45deg) translateX(-50%);
  border: min(1.5px, 0.15vw) solid #111111;
  border-top: none;
  border-left: none;
}

.acronym__reading {
  margin: min(18px, 1.8vw) 0 0;
  text-align: center;
  font-size: max(24px, min(36px, 3.6vw));
  font-weight: 400;
  letter-spacing: 0.08em;
}

.future-anchor {
  width: 0;
  height: 0;
}

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

  .word-section {
    padding-top: 22vw;
    padding-bottom: 48vw;
  }
  .word-section .word-intro {
    margin: auto;
    padding: 0;
  }
  .word-intro {
    grid-template-columns: 18vw 8vw 1fr;
    gap: 4vw;
  }
  .word-intro__term {
    text-align: start;
  }
  .word-intro__dots {
    border-top: 1vw dotted #111111;
    min-width: 5.6vw;
  }
  .acronym {
    width: 100%;
    margin: 8vw auto 0;
    overflow-x: scroll;
  }

  .acronym__list {
    width: auto;
    margin: 2vw auto;
    border-spacing: 0 2vw;
  }

  .acronym__language-row th {
    padding-bottom: 4vw;
  }

  .acronym__language-row th:first-child {
    width: 50%;
  }

  .acronym__language-row th:last-child {
    width: 50%;
  }

  .acronym__language-row th > span {
    min-width: 38vw;
    padding: 3.2vw 3.2vw 1.6vw;
    border-radius: 10vw;
    font-size: 4.8vw;
  }

  .acronym__language-row th > span::before {
    width: 2.4vw;
    height: 1.6vw;
  }

  .acronym__row > th {
    padding: 4vw 2vw 2vw 2vw;
    border-radius: 3vw 0 0 3vw;
  }

  .acronym__row > td {
    padding: 3vw 8vw 1vw 8vw;
    border-radius: 0 3vw 3vw 0;
  }


  /* 英語側の頭文字 */
  .acronym__word {
    font-size: 5.2vw;
  }
  .acronym__word > strong {
    min-width: 9vw;
    font-size: 9vw;
  }

  /* 日本語側 */
  .acronym__translation {
    gap: 4vw;
  }
  .acronym__translation > strong {
    font-size: 7vw;
  }

  .acronym__leader {
    width: 8vw;
    border-top: 0.8vw dotted #111111;
  }

  .acronym__brace {
    height: 3.2vw;
    margin-top: 3.2vw;
    border: 0.3vw solid #111111;
    border-top: none;
    border-radius: 0 0 0.8vw 0.8vw;
  }

  .acronym__brace::after {
    width: 2vw;
    height: 2vw;
    border: 0.3vw solid #111111;
    border-top: none;
    border-left: none;
  }

  .acronym__reading {
    margin-top: 3.6vw;
  }

}


@media screen and (max-width:300px) {
  .word-intro {
    flex-wrap: wrap;
  }
  .word-intro__dots {
    min-width: 10vw;
  }
  .acronym__translation {
    
  }
}

/* =========================================================
02. JICAってなにをしているの
========================================================= */
.about-section {
  padding-bottom: min(200px, 20vw);
}

@media screen and (max-width:767px) {
  .about-section {
    padding-bottom: 28vw;
  }
}
@media screen and (max-width:300px) {
  .about-section {
    padding-bottom: 56vw;
  }
}

/* =========================================================
03. クイズ
========================================================= */
.quiz-section {
  padding-bottom: min(200px, 20vw);
}

.quiz-intro {
  margin-bottom: min(40px, 4vw);
}
h3.quiz-title {
  color: var(--color-red);
  font-size: max(24px, min(50px, 5vw));
  margin-bottom: min(20px, 2vw);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.quiz-card__number {
  display: grid;
  width: min(64px, 6.4vw);
  height: min(64px, 6.4vw);
  aspect-ratio: 1/1;
  margin: 0;
  place-items: center;
  color: var(--color-blue);
  background: var(--color-cream);
  border: min(4px, 0.4vw) solid var(--color-blue);
  border-radius: 50%;
  font-size: max(18px, min(38px, 3.8vw));
  line-height: 1;
}

.quiz-flag {
  width: min(400px, 40vw);
  aspect-ratio: 3 / 2;
  margin: 0 auto min(62px, 6.2vw);
}

.quiz-hints {
  display: grid;
  grid-template-columns: min(140px, 14vw) minmax(0, 1fr);
  align-items: center;
  gap: min(28px, 2.8vw);
  width: min(690px, 69vw);
  margin-right: 0;
  margin-left: min(6px, 0.6vw);
}

.quiz-hints__label{
  display: grid;
  width: min(140px, 14vw);
  height: min(140px, 14vw);
  margin: 0;
  place-items: center;
  color: #ffffff;
  background: var(--color-red);
  border-radius: 50%;
  font-size: max(18px, min(32px, 3.2vw));
  line-height: 1;
}

.quiz-hints__list {
  display: grid;
  gap: min(12px, 1.4vw);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: max(18px, min(24px, 2.4vw));
  line-height: 1.55;
}

.quiz-hints__list li {
  position: relative;
  padding-left: min(320px, 3.2vw);
  text-indent: max(-320px, -3.2vw);
  line-height: 1.75;
}

.quiz-hints__list li::before {
  margin: 0 min(4px, 0.4vw);
  color: var(--color-red);
  content: "▶︎";
}

.quiz-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: min(40px, 4vw);
  margin: min(60px, 6vw) 0 0;
  padding: 0;
  list-style: none;
}

.quiz-option {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
}

.quiz-option__label,
.quiz-answer__label {
  color: var(--color-blue);
  font-size: max(18px, min(24px, 2.4vw));
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  font-family: "Noto Sans JP";
}

.quiz-option__image {
  width: min(240px, 24vw);
  height: min(240px, 24vw);
  object-fit: contain;
}

.quiz-answer {
  width: 100%;
  margin: min(60px, 6vw) 0 0;
}

@media screen and (max-width:767px) {
  .quiz-intro {
    margin-bottom: 8vw;
  }
  h3.quiz-title {
    margin-bottom: 4vw;
  }
  .quiz-card {
    padding: 4vw 4vw 4vw;
    border: 0.3vw solid var(--color-blue);
  }
  .quiz-card__number {
    width: 9vw;
    height: 9vw;
  }
  .quiz-flag {
    width: 34.5vw;
  }

  .quiz-hints {
    grid-template-columns: 1fr;
    width: 100%;
    margin: auto;
    gap: 5.6vw;
    margin-bottom: 4vw;
  }
  .quiz-hints__label {
    width: 100%;
    height: auto;
    padding: 3vw 4vw 1.2vw;
    border-radius: 10vw;
  }
  .quiz-hints__list {
    gap: 2.4vw;
  }
  .quiz-hints__list li {
    padding-left: 6.4vw;
    text-indent: -6.4vw;
  }

  .quiz-options {
    grid-template-columns: 1fr;
    width: 90%;
    margin: auto;
  }
  .quiz-option {
    flex-direction: row;
    justify-content: space-between;
  }
  .quiz-option__image {
    width: 30vw;
    height: 30vw;
  }
}

@media screen and (max-width:300px) {
  h3.quiz-title {
    margin-bottom: 8vw;
  }
  .quiz-card__number {
    width: auto;
    height: auto;
    max-width: 15vw;
  }
  .quiz-flag {
    width: 60vw;
    margin: 8vw auto 12vw;
  }
  .quiz-hints {
    gap: 10vw;
    margin-bottom: 12vw;
  }
  .quiz-hints__list {
    gap: 10vw;
  }


  .quiz-option {
    flex-wrap: wrap;
    justify-content: center;
  }
  .quiz-option__image {
    width: 60vw;
    height: 60vw;
  }
  .quiz-options {
    gap: 8vw;
  }

}

/* 答え */
.quiz-answer__toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: min(72px, 7.2vw);
  padding: min(8px, 0.8vw) min(36px, 3.6vw) min(4px, 0.4vw);

  color: #fff;
  background-color: var(--color-blue);
  border: 0;
  border-radius: min(18px, 1.8vw);

  font-size: max(18px, min(24px, 2.4vw));
  font-weight: 700;
  line-height: 1.5;
  text-align: left;

  cursor: pointer;
  transition: all .3s;
}

/* 右側の三角 */
.quiz-answer__toggle::after {
  position: absolute;
  content: '';
  top: 50%;
  right: 5%;
  display: block;
  width: min(16px, 1.6vw);
  height: min(14px, 1.4vw);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background-color: #fff;
  transform: translateY(-50%);
  transition: transform 0.35s ease;
}

/* 開いているときは上向き */
.quiz-answer.is-open .quiz-answer__toggle::after {
  transform: translateY(-50%) rotate(180deg);
}

/* 開いているときはボタン下部の角丸を解除 */
.quiz-answer.is-open .quiz-answer__toggle {
  border-radius: min(18px, 1.8vw) min(18px, 1.8vw) 0 0;
}

/*
 * スライド対象
 */
.quiz-answer__panel {
  height: 0;
  overflow: hidden;
  visibility: hidden;
  background-color: #fff;
}

/* 回答欄の余白・枠線はこちらへ付ける */
.quiz-answer__panel-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  min-height: min(380px, 38vw);
  padding: 0 min(70px, 7vw);

  border: min(2px, 0.2vw) solid var(--color-blue);
  border-top: 0;

  border-radius: 0 0 min(18px, 1.8vw) min(18px, 1.8vw);
}

.quiz-answer__image {
  display: block;
  width: min(340px, 34vw);
  max-width: 100%;
  margin-inline: auto;
}
.remarks-note {
  text-align: end;
  font-size: 18px;
  margin-top: min(10px, 1vw);
}


@media (max-width: 767px) {
  .quiz-answer {
    width: 90%;
    margin: 6vw auto 0;
  }
  .quiz-answer__toggle {
    padding: 3vw 4vw 1.2vw;
  }
  .quiz-answer__toggle::after {
    width: 3.2vw;
    height: 2.8vw;
  }
  .quiz-answer__panel-inner {
    grid-template-columns: 1fr 1fr;
    padding: 0;
    border: 0.6vw solid var(--color-blue);
  }
  .quiz-answer__image {
    width: 30vw;
    height: 30vw;
  }

  .remarks-note {
    margin-top: 4vw;
  }
}
@media (max-width: 300px) {
  .quiz-answer {
    width: 95%;
    margin: 12vw auto 0;
  }
  .quiz-answer__toggle {
    padding: 6vw 4vw 1.2vw;
  }
  .quiz-answer__toggle::after {
    width: 6.4vw;
    height: 5.6vw;
  }

  .quiz-answer__panel-inner {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 8vw 0  4vw 0;
  }
  .quiz-answer__image {
    width: 56vw;
    height: 56vw;
  }
}

@media (forced-colors: active) {
  .quiz-answer__toggle::after {
    background-color: CanvasText;
  }
}
  

/* =========================================================
04. 「障害と開発」の活動ってなにをしているの？
========================================================= */
.katsudo-section {
  padding-bottom: min(200px, 20vw);
}
.katsudo-card .toc-card__title {
  width: 100%;
  text-align: center;
  margin-bottom: min(40px, 4vw);
}

@media screen and (max-width:767px) {
  .katsudo-section {
    padding-bottom: 32vw;
  }
  .katsudo-card .word-intro {
    grid-template-columns: 26vw 12vw;
    gap: 4vw;
  }
  .katsudo-card .intro__description {
    grid-row: 2 / 3;
    grid-column: 1 / 4;
  }
  .katsudo-card .toc-card__title {
    margin-bottom: 8vw;
  }
}
@media screen and (max-width:300px) {
  .katsudo-section {
    padding-bottom: 64vw;
  }
}


/* =========================================================
05. JICAで活躍した人たち
========================================================= */
.people-section {
  padding-bottom: min(200px, 20vw);
}

.people-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: min(20px, 2vw);
  margin-bottom: min(50px, 5vw);
}

.people-card__name {
  font-size: max(24px, min(32px, 3.2vw));
  font-weight: 400;
  line-height: 1.45;
}
.people-card__name span {
  font-size: 70%;
}

.people-card__disability {
  display: flex;
  align-items: center;
  gap: min(14px, 1.4vw);
}

.people-card__disability-value {
  font-size: max(24px, min(32px, 3.2vw));
  line-height: 1.45;
  white-space: nowrap;
}

.people-profile {
  width: min(610px, 61vw);
  margin: 0 auto;
}


.people-profile figcaption {
  margin-top: min(7px, 0.7vw);
  font-size: 18px;
  font-weight: 400;
}

.people-activity {
  position: relative;
  margin-top: min(72px, 7.2vw);
  padding:
    0
    min(54px, 5.4vw)
    min(32px, 3.2vw);
  background: #ffffff;
  border-radius: min(14px, 1.4vw);
}
.people-card__disability-label,
.people-activity__title {
  padding: min(10px, 1.0vw) min(24px, 2.4vw) 0;
  color: #ffffff;
  background: var(--color-blue);
  border-radius: min(32px, 3.2vw);
  font-size: max(18px, min(24px, 2.4vw));
  line-height: 1.75;
  text-align: center;
}

.people-activity__title {
  width: fit-content;
  font-size: max(18px, min(24px, 2.4vw));
  font-weight: 900;
  font-family: "M PLUS Rounded 1c ExtraBold";
}

.people-activity__grid {
  display: flex;
  align-items: start;
  justify-content: center;
  gap: min(100px, 10vw);
}

.people-country {
  margin: 0;
  text-align: center;
}

.people-country__flag {
  display: block;
  width: min(220px, 22vw);
  aspect-ratio: 3 / 2;
  margin: 0 auto;
  object-fit: fill;
}

.people-country figcaption {
  margin-top: min(16px, 1.6vw);
  font-size: max(18px, min(24px, 2.4vw));
  font-weight: 400;
  line-height: 1.75;
}

.people-card__description {
  margin-top: min(50px, 5vw);
  line-height: 1.8;
}

@media screen and (max-width: 767px) {
  .people-section {
    padding-bottom: 32vw;
  }

  .people-card__disability-label,
  .people-activity__title {
    padding: 2vw 4vw 0vw;
    border-radius: 10vw;
  }
  .people-card__header {
    flex-direction: column;
    align-items: start;
    gap: 4vw;
  }

  .people-card__disability {
    flex-wrap: wrap;
    justify-content: center;
  }

  .people-profile {
    width: 100%;
  }
  .people-profile figcaption {
    margin-top: 2vw;
  }

  .people-activity__title {
    width: 90%;
    min-width: 0;
    margin: auto;
    transform: translateY(-50%);
  }
  .people-activity {
    margin-top: 16vw;
    padding: 0vw 0vw 8vw;
  }


  .people-activity__grid {
    flex-direction: column;
    gap: 8vw;
    padding: 0 10vw;
  }

  .people-country__flag {
    width: 100%;
  }
  .people-country figcaption {
    margin-top: 3.2vw;
  }
  .people-card__description {
    margin-top: 8vw;
  }
}

@media screen and (max-width: 300px) {
  .people-activity {
    margin-top: 40vw;
  }
  .people-card__disability-label {
    padding: 4vw 8vw 0vw;
  }
  .people-profile figcaption {
    margin-top: 4vw;
  }
  .people-activity__title {
    padding: 4vw 4vw 0vw;
  }
  .people-card__disability {
    gap: 4vw;
  }
}

/* =========================================================
06. 合理的配慮ってなに？
========================================================= */
.consideration-section {
  padding-bottom: min(100px, 10vw);
}

.consideration-block--first {
  margin-top: min(80px, 8vw);
}

.consideration-block--jica {
  margin-top: min(110px, 11vw);
}

.consideration-block__title {
  width: min(800px, 80vw);
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
}

.consideration-steps {
  width: min(720px, 72vw);
  max-width: 100%;
  margin: min(28px, 2.8vw) auto 0;
}

.consideration-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(285px, 28.5vw);
  align-items: center;
  gap: min(50px, 5vw);
  padding: min(24px, 2.4vw) 0;
}

.consideration-step:not(:last-child) {
  border-bottom: min(3px, 0.3vw) dotted var(--color-blue);
}

.consideration-step__text,
.consideration-grid__text {
  font-size: max(18px, min(24px, 2.4vw));
  line-height: 1.8;
}

.consideration-step__image,
.consideration-grid__image {
  display: block;
  height: auto;
  margin-inline: auto;
  object-fit: contain;
  width: min(340px, 34vw);
}

.consideration-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(860px, 86vw);
  max-width: 100%;
  margin: min(72px, 7.2vw) auto 0;
}
.consideration-grid::before {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #fff;
  width: min(20px, 2vw);
  height: min(70px, 7vw);
}

.consideration-grid__item {
  display: flex;
  min-width: 0;
  min-height: min(520px, 52vw);
  flex-direction: column;
  justify-content: space-between;
  padding:
    0
    min(40px, 4vw)
    min(34px, 3.4vw);
}

.consideration-grid__item:nth-child(odd) {
  border-right: min(3px, 0.3vw) dotted var(--color-blue);
}

.consideration-grid__item:nth-child(-n + 2) {
  border-bottom: min(3px, 0.3vw) dotted var(--color-blue);
}

.consideration-grid__item:nth-child(n + 3) {
  padding-top: min(36px, 3.6vw);
}

@media screen and (max-width: 767px) {
  .consideration-block__title,
  .consideration-steps,
  .consideration-grid {
    width: 85%;
  }
  .consideration-step,
  .consideration-grid__item {
    gap: 4vw;
    min-height: 0;
    padding: 6vw 4vw 8vw;
  }
  .consideration-step {
    grid-template-columns: 1fr;
  }
  .consideration-step:not(:last-child) {
    border-bottom: 0.8vw dotted var(--color-blue);
  }
  .consideration-step__text,
  .consideration-grid__text {
    text-align: center;
    text-align: left;
  }

  .consideration-step__image,
  .consideration-grid__image {
    width: 68vw;
  }

  .consideration-grid {
    grid-template-columns: 1fr;
  }
  .consideration-grid__item {
    border-right: none!important;
    border-left: none!important;
  }
  .consideration-grid__item:not(:last-child) {
    border-bottom:  0.8vw dotted var(--color-blue)!important;
  }


  .consideration-grid::before {
    display: none;
  }

}

/* =========================================================
07. さいごに
========================================================= */
.closing-section {
  padding-bottom: min(150px, 15vw);
}

.closing-card__message {
  font-weight: 400;
  line-height: 1.8;
}

.closing-card rt,
.closing-contact-card rt {
  font-size: 42%;
}

.closing-card__divider {
  width: 100%;
  height: 0;
  margin: min(28px, 2.8vw) 0 min(30px, 3vw);
  border: 0;
  border-top: min(3px, 0.3vw) dotted var(--color-blue);;
}

.closing-card__message--contact {
  margin-bottom: min(34px, 3.4vw);
}

/* この白背景部分だけで使用する専用クラス */
.closing-contact-card {
  display: block;
  margin: 0;
  padding:
    min(34px, 3.4vw)
    min(42px, 4.2vw);
  background: #ffffff;
  border-radius: min(14px, 1.4vw);
  font-style: normal;
}

.closing-contact-card__list {
  display: grid;
  gap: min(14px, 1.4vw);
  margin: 0;
}

.closing-contact-card__row {
  display: grid;
  grid-template-columns: min(150px, 15vw) minmax(0, 1fr);
  align-items: start;
  gap: min(18px, 1.8vw);
  margin: 0;
}

.closing-contact-card__label {
  padding: min(10px, 1.0vw) min(24px, 2.4vw) 0;
  color: #ffffff;
  background: var(--color-blue);
  border-radius: min(32px, 3.2vw);
  font-size: max(18px, min(24px, 2.4vw));
  font-weight: 900;
  font-family: "M PLUS Rounded 1c ExtraBold";
  white-space: nowrap;
  text-align: center;
}

.closing-contact-card__row dd {
  min-width: 0;
  margin: 0;
  padding-top: min(4px, 0.4vw);
  font-size: max(18px, min(24px, 2.4vw));
  font-weight: 400;
  line-height: 1.75;
}

.closing-contact-card__tel,
.closing-contact-card__mail {
  text-decoration: underline;
  text-decoration-thickness: min(2px, 0.2vw);
  text-underline-offset: min(6px, 0.6vw);
  display: inline;
}

.closing-contact-card__mail {
  overflow-wrap: anywhere;
}

.closing-ele {
  z-index: 0;
  pointer-events: none;
}

.site-footer {
  display: flex;
  min-height: min(72px, 7.2vw);
  align-items: center;
  justify-content: center;
  padding:
    min(18px, 1.8vw)
    min(20px, 2vw);
  color: #ffffff;
  background: var(--color-blue);
  text-align: center;
}

.site-footer__copyright {
  font-size: max(14px, min(18px, 1.8vw));
  font-weight: 400;
  line-height: 1.5;
}

.site-footer__copyright rt {
  font-size: 42%;
}

@media screen and (max-width: 767px) {
  .closing-card {
    padding: 8vw 4vw
  }
  .closing-card__divider {
    margin: 8vw 0;
    border-top: 0.8vw dotted var(--color-blue);
  }

  .closing-contact-card {
    padding: 8vw 6vw;
    border-radius: 4vw;
  }
  .closing-contact-card__list {
    gap: 8vw;
  }

  .closing-contact-card__row {
    grid-template-columns: 1fr;
    gap: 4vw;
  }

  .closing-contact-card__label {
    width: 100%;
    padding: 2vw 4vw 0vw;
    border-radius: 10vw;
  }

  .closing-contact-card__row dd {
    padding-top: 0;
  }

  .closing-ele--left {
    top: -17vw;
    left: auto;
    right: -12vw;
  }
  .closing-ele--right {
    top: auto;
    bottom: -2vw;
    right: auto;
    left: -9vw;
  }

  .site-footer {
    min-height: 12vw;
  }
}

@media screen and (max-width: 300px) {
  .closing-contact-card__label {
    padding: 4vw 4vw 0vw;
  }
}