@charset "UTF-8";

/* ==========================================================================
   Mainvisual
========================================================================== */
#top {
  background: url(/assets/img/top/mainvisual-bg-upper.svg) no-repeat right 3rem / max(72rem, 30vw) auto;
}
.sec-mainvisual {
  display: flex;
  background: url(/assets/img/common/bg-footer.svg) repeat-x left bottom -3rem/ 160rem auto;
  position: relative;
}
.sec-mainvisual hgroup {
  flex: 0 0 calc(50% - 40rem);
}
.sec-mainvisual hgroup .main-tit{
  display: flex;
  flex-direction: row-reverse;
  gap: 1.6rem;
  margin: 1.6rem 5.6rem 0 0;
  font-size: max(4rem, 2.6vw);
  position: relative;
  z-index: 2;
  font-weight: bold;
  line-height: 1.3;
}
.sec-mainvisual hgroup .main-tit span {
  flex: 0 0 1em;
  padding: 0 1.6rem 0 0;
  height: fit-content;
  display: block;
  --dot-gap: 1.2rem;
  --dot-size: 0.25rem;
  --border-width: calc(var(--dot-size) * 2);
  --dot-color: var(--color-carrot);
  background-repeat: repeat-y;
  background-position: right var(--dot-size) top;
  background-size: var(--border-width) calc(var(--dot-size) + var(--dot-gap));
  background-image: radial-gradient(circle, var(--dot-color) var(--dot-size), transparent var(--dot-size));
}
.sec-mainvisual hgroup p {
  padding: 0 3.2rem;
  background: #fff;
  border-radius: 999rem;
  font-size: max(4rem, 2.2vw);
  position: absolute;
  left: 12%;
  bottom: 4rem;
  z-index: 2;
  box-shadow: 0.4rem 0.4rem 0 var(--color-carrot);
}
.sec-mainvisual .mv-slider {
  flex: 1 1 auto;
  border-radius: 4rem 0 0 0;
  overflow: hidden;
  background: #fff;
}
.sec-mainvisual .mv-slider .splide__slide {
  aspect-ratio: 120 / 61;
}
.sec-mainvisual .mv-slider .splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4rem 0 0 0;
}
@media (max-width: 768px) {
  #top {
    background: none;
  }
  .sec-mainvisual {
    padding: 2.4rem 0 4rem;
    display: block;
    background: url(/assets/img/common/bg-footer.svg) repeat-x -3rem bottom/ auto 9rem;
  }
  .sec-mainvisual hgroup .main-tit {
    display: block;
    margin: 0;
    font-size: 3.5rem;
    text-align: center;
  }
  .sec-mainvisual hgroup .main-tit span {
    display: inline-block;
    padding: 0.4rem;
    --dot-gap: 0.7rem;
    --dot-size: 0.15rem;
    --border-height: calc(var(--dot-size) * 2);
    --dot-color: var(--color-carrot);
    background-repeat: repeat-x;
    background-position: bottom center;
    background-size: calc(var(--dot-size) + var(--dot-gap)) var(--border-height);
    background-image: radial-gradient(circle, var(--dot-color) var(--dot-size), transparent var(--dot-size));
  }
  .sec-mainvisual hgroup p {
    width: fit-content;
    padding: 0 1.6rem;
    font-size: 1.8rem;
    font-weight: bold;
    left: 0.8rem;
    bottom: 7rem;
  }
  .sec-mainvisual .mv-slider {
    border-radius: 1.6rem 0 0 1.6rem;
    margin-left: 3.2rem;
    margin-top: 1.6rem;
  }
  .sec-mainvisual .mv-slider .splide__slide {
    width: 100%;
    height: calc(100% * 2 / 3);
  }
  .sec-mainvisual .mv-slider .splide__slide img {
    border-radius: 1.6rem 0 0 1.6rem;
  }
}
/* ==========================================================================
   Intro
========================================================================== */
.sec-intro {
  padding-block: 12rem 26rem;
  background:
    url(/assets/img/top/intro-img02.webp) no-repeat right 22% bottom / max(32rem, 18vw) auto,
    url(/assets/img/top/mainvisual-bg-lower.svg) no-repeat right top / max(51rem, 27vw) auto,
    url(/assets/img/top/intro-bg.svg) no-repeat center bottom / contain,
    linear-gradient(to top, transparent 20rem, var(--color-emerald-light) 20rem);
  position: relative;
}
.sec-intro h2 {
  max-width: 50.6rem;
  margin: 0 auto 4rem;
}
.sec-intro .flexbox {
  display: flex;
  align-items: center;
  gap: 4rem;
  padding-inline: var(--size-inline);
  font-size: 2.4rem;
}
.sec-intro .flexbox figure {
  flex: 0 0 48rem;
  border-radius: var(--size-border-radius);
  overflow: hidden;
}
@media (max-width: 768px) {
  .sec-intro {
    padding: var(--size-block) 0 12rem;
    background:
      url(/assets/img/top/intro-img02.webp) no-repeat 90% bottom / 15rem auto,
      url(/assets/img/top/intro-bg.svg) no-repeat center bottom / contain,
      linear-gradient(to top, transparent 5rem, var(--color-emerald-light) 5rem);
  }
  .sec-intro h2 {
    max-width: 26rem;
    margin-bottom: 2.4rem;
  }
  .sec-intro .flexbox {
    display: block;
    font-size: inherit;
  }
  .sec-intro .flexbox figure {
    margin-bottom: 1.6rem;
  }
}
/* ==========================================================================
   Concept
========================================================================== */
.sec-concept {
  margin-top: -15rem;
  padding-block: 20rem 35rem;
  background: var(--pattern-grid);
}
.sec-concept hgroup p {
  max-width: 80rem;
  margin: 4rem auto 0;
  padding: 2.4rem 0;
  background: var(--color-emerald-ultralight);
  text-align: center;
  font-size: 3rem;
  position: relative;
}
.sec-concept hgroup p:before,
.sec-concept hgroup p:after {
  display: block;
  color: var(--color-emerald);
  font-size: 8rem;
  line-height: 0.5;
  position: absolute;
}

.sec-concept hgroup p:before {
  content: "“";
  left: 0.2em;
  top: -0.1em;
}
.sec-concept hgroup p:after {
  content: "”";
  right: 0.2em;
  bottom: -0.4em;
}
.sec-concept .flexbox {
  display: flex;
  align-items: center;
  gap: 4rem;
  margin-top: 4rem;
}
.sec-concept .flexbox figure {
  flex: 0 0 36rem;
}
.sec-concept .flexbox a {
  margin-top: 2.4rem;
  margin-left: auto;
}

@media (max-width: 768px) {
  .sec-concept {
    padding: 20rem var(--size-inline);
    background-size: 1.3rem auto !important;
  }
  .sec-concept hgroup p {
    margin-top: 2.4rem;
    font-size: 1.6rem;
    font-weight: bold;
  }
  .sec-concept hgroup p:before,
  .sec-concept hgroup p:after {
    font-size: 6rem;
  }
  .sec-concept .flexbox {
    display: block;
    margin-top: 2.4rem;
  }
  .sec-concept .flexbox figure {
    width: 28rem;
    margin: 0 auto;
  }
  .sec-concept .flexbox a {
    width: 100%;
  }
}
/* ==========================================================================
   Program
========================================================================== */
.sec-program {
  --offset-bg: 20rem;
  margin-top: -25rem;
  padding: var(--size-block) var(--size-inline);
  background:
    url(/assets/img/top/program-bg-btm.svg) no-repeat center bottom / contain,
    url(/assets/img/top/program-bg-top.svg) no-repeat center top / contain,
    linear-gradient(to bottom, transparent var(--offset-bg), var(--color-lemon-light) var(--offset-bg), var(--color-lemon-light) calc(100% - var(--offset-bg)), transparent calc(100% - var(--offset-bg)));
  position: relative;
}
.sec-program hgroup {
  margin-bottom: 4rem;
  text-align: center;
}
.sec-program hgroup p {
  margin-top: 3.2rem;
  font-size: 2.4rem;
}
.sec-program .program-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8rem 4rem;
}
.sec-program .program-list li {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: 0;
}
.sec-program .program-list li:nth-child(1) {
  --color-theme: var(--color-green);
}
.sec-program .program-list li:nth-child(2) {
  --color-theme: var(--color-carrot);
}
.sec-program .program-list li:nth-child(3) {
  --color-theme: var(--color-navy);
}
.sec-program .program-list li:nth-child(4) {
  --color-theme: var(--color-maroon);
}
.sec-program .program-list li h3 {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--color-theme);
  font-size: 2.4rem;
}
.sec-program .program-list li h3:before {
  content: "";
  display: block;
  width: 4.8rem;
  aspect-ratio: 1/1;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.sec-program .program-list li:nth-child(1) h3:before {
  background-image: url(/assets/img/top/program-ico01.webp);
}
.sec-program .program-list li:nth-child(2) h3:before {
  background-image: url(/assets/img/top/program-ico02.webp);
}
.sec-program .program-list li:nth-child(3) h3:before {
  background-image: url(/assets/img/top/program-ico03.webp);
}
.sec-program .program-list li:nth-child(4) h3:before {
  background-image: url(/assets/img/top/program-ico04.webp);
}
.sec-program .program-list li figure {
  aspect-ratio: 45/32;
  margin: 0.8rem auto 1.6rem;
}
.sec-program .program-list li figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--size-border-radius);
  border: 0.6rem solid var(--color-theme);
}
.sec-program .program-list li a {
  width: 100%;
  margin-top: 1.6rem;
}
.sec-program .program-list + a {
  width: 100%;
  max-width: 42rem;
  margin: 2rem auto 0;
}

@media (max-width: 768px) {
  .sec-program {
    --offset-bg: 5rem;
    margin-top: -15rem;
  }
  .sec-program hgroup {
    margin-bottom: 3.2rem;
  }
  .sec-program hgroup p {
    margin-top: 1.6rem;
    font-size: 1.6rem;
  }
  .sec-program .program-list {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  .sec-program .program-list li {
    display: block;
  }
  .sec-program .program-list li h3 {
    font-size: 2rem;
  }

  .sec-program .program-list li figure img {
    border-width: 0.4rem;
  }
}
/* ==========================================================================
   Points
========================================================================== */
.sec-points {
  margin-top: -10rem;
  padding: calc(var(--size-block) * 2) var(--size-inline) var(--size-block);
  background-image: repeating-linear-gradient(35deg, var(--color-emerald-ultralight), var(--color-emerald-ultralight) 10px, transparent 10px, transparent 16px);
  text-align: center;
}
.sec-points hgroup p {
  margin-top: 3.2rem;
  font-size: 2.4rem;
}
.sec-points .points-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6rem 2.4rem;
  margin: 8rem auto 6rem;
}
.sec-points .points-list li {
  flex: 0 0 31.2rem;
  counter-increment: num;
}
.sec-points .points-list li figure {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17rem;
  margin: 0 auto 0.8rem;
  aspect-ratio: 1/1;
  border-radius: 999rem;
  background: #fff;
  border: 2px solid var(--color-green);
  position: relative;
}
.sec-points .points-list li figure:before {
  content: counter(num);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  aspect-ratio: 1/1;
  border-radius: 99rem;
  background: var(--color-green);
  color: #fff;
  font-size: 3.5rem;
  position: absolute;
  left: -1rem;
  top: -2rem;
}
.sec-points .points-list li figure img {
  width: 10rem;
}
.sec-points .points-list + a {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .sec-points {
    margin-top: -7rem;
  }
  .sec-points hgroup p {
    margin-top: 1.6rem;
    font-size: 1.6rem;
  }
  .sec-points .points-list {
    margin: 3.2rem auto;
    gap: 3rem 1.6rem;
  }
  .sec-points .points-list li {
    flex: 0 0 16rem;
  }
  .sec-points .points-list li figure {
    width: 90%;
  }
  .sec-points .points-list li figure:before {
    width: 4.8rem;
    font-size: 2.4rem;
    top: -1rem;
  }
  .sec-points .points-list li figure img {
    width: 7rem;
  }
  .sec-points .points-list li p br {
    display: none;
  }
}
/* ==========================================================================
   Guide
========================================================================== */
.sec-guide {
  padding: var(--size-block) var(--size-inline);
  text-align: center;
}
.sec-guide .inner {
  max-width: 160rem;
  margin: 0 auto;
  padding: calc(var(--size-inline) * 2) var(--size-inline);
  background: var(--color-emerald-light);
  border-radius: var(--size-border-radius);
}
.sec-guide ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.4rem;
  margin: 6rem auto 4rem;
}
.sec-guide ul li {
  flex: 0 0 44rem;
  padding-top: 17rem;
}
.sec-guide ul li:nth-of-type(1) {
  --color-theme: var(--color-carrot);
  background: url(/assets/img/top/guide-img01.webp) no-repeat center top/ 24.4rem auto;
}
.sec-guide ul li:nth-of-type(2) {
  --color-theme: var(--color-green);
  background: url(/assets/img/top/guide-img02.webp) no-repeat center top/ 24.4rem auto;
}
.sec-guide ul li div {
  height: 100%;
  border: 2px solid var(--color-theme);
  border-radius: var(--size-border-radius);
  background: #fff;
  overflow: hidden;
}
.sec-guide ul h3 {
  padding: 1.6rem;
  background: var(--color-theme);
  color: #fff;
}
.sec-guide ul p {
  padding: 1.6rem;
}
.sec-guide ul + a {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .sec-guide .inner {
    padding-bottom: 4rem;
  }
  .sec-guide h2 {
    width: 24rem;
    margin: auto;
  }
  .sec-guide ul {
    margin: 2.4rem auto;
  }
  .sec-guide ul li {
    flex: 1 1 auto;
    padding-top: 12rem;
    background-size: 17rem auto !important;
  }
  .sec-guide ul h3 {
    padding: 0.8rem;
  }
  .sec-guide ul p {
    padding: 0.8rem;
  }
}
/* ==========================================================================
   Blog
========================================================================== */
.sec-blog {
  --offset: 6rem;
  padding: var(--size-block) var(--size-inline);
  background:
    url(/assets/img/top/blog-bg-top.svg) repeat-x center top / auto 10rem,
    url(/assets/img/top/blog-bg-btm.svg) repeat-x center bottom / auto 10rem,
    linear-gradient(to bottom, transparent var(--offset), var(--color-lemon-light) var(--offset), var(--color-lemon-light) calc(100% - var(--offset)), transparent calc(100% - var(--offset)));
}
.sec-blog hgroup p {
  margin-top: 3.2rem;
  text-align: center;
}
.sec-blog .article-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
  margin: 5rem auto;
}
.sec-blog .article-container article {
  padding-bottom: 5.6rem;
  background: url(/assets/img/top/blog-ico.svg) #fff no-repeat right 1.6rem bottom 1.6rem / auto 1.4rem;
  border-radius: var(--size-border-radius);
  overflow: hidden;
  position: relative;
  box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.16);
}
.sec-blog .article-container article figure {
  aspect-ratio: 3/2;
  pointer-events: none;
}
.sec-blog .article-container article figure:not(:has(img)) {
  background: url(/assets/img/common/logo.webp) #f5f5f5 no-repeat center center / 65% auto;
}
.sec-blog .article-container article figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sec-blog .article-container article h3 {
  margin: 1.6rem 1.6rem 0.8rem;
}
.sec-blog .article-container article p {
  margin: 0 1.6rem;
  font-size: 1.4rem;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sec-blog .article-container article time {
  position: absolute;
  left: 1.6rem;
  bottom: 1.6rem;
  color: var(--color-green);
  line-height: 1;
  font-size: 0.9em;
}
.sec-blog .article-container + a {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .sec-blog {
    padding-bottom: 8rem;
  }
  .sec-blog .article-container {
    margin: 2.4rem auto;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
  }
  .sec-blog .article-container article {
    background-position: right 0.8rem bottom 1.2rem;
    background-size: auto 0.8rem !important;
    padding-bottom: 3rem;
  }
  .sec-blog .article-container article h3 {
    margin: 0.6rem 0.8rem;
  }
  .sec-blog .article-container article p {
    margin: 0 0.8rem;
    font-size: 1.2rem;
    line-height: 1.4;
    -webkit-line-clamp: 2;
  }
  .sec-blog .article-container article time {
    font-size: 1.1rem;
    bottom: 1rem;
  }
}
/* ==========================================================================
   News
========================================================================== */
.sec-news {
  padding: var(--size-block) var(--size-inline);
}
.sec-news .inner-content {
  display: flex;
  gap: 8rem;
}
.sec-news .col-left hgroup h2 {
  flex: 0 0 auto;
}
.sec-news .col-left hgroup h2:after {
  display: none;
}
.sec-news .col-left hgroup {
  display: flex;
  align-items: center;
  gap: 4rem;
}
.sec-news .news-container {
  margin-top: 2.4rem;
  padding: var(--size-inline);
  background: var(--color-emerald-light);
  border-radius: var(--size-border-radius);
}
.sec-news .news-container .scroll-wrapper {
  height: 22rem;
  padding-right: 2rem;
  overflow-y: scroll;
}
.sec-news .news-container .scroll-wrapper::-webkit-scrollbar {
  width: 0.6rem;
}
.sec-news .news-container .scroll-wrapper::-webkit-scrollbar-track {
  background: #ccc;
}
.sec-news .news-container .scroll-wrapper::-webkit-scrollbar-thumb {
  background-color: #fff;
  border-radius: 99rem;
}
.sec-news .news-container article {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.2rem;
  --dot-gap: 0.7rem;
  --dot-size: 0.15rem;
  --border-height: calc(var(--dot-size) * 2);
  --dot-color: #fff;
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: calc(var(--dot-size) + var(--dot-gap)) var(--border-height);
  background-image: radial-gradient(circle, var(--dot-color) var(--dot-size), transparent var(--dot-size));
}
.sec-news .news-container article time {
  color: var(--color-green);
}
.sec-news .news-container article h3 {
  font-weight: 500;
}
.sec-news .news-container article h3 {
  flex: 1 1 auto;
}
.sec-news .news-container article a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.6rem;
}
.sec-news .news-container article a:after {
  content: "\f054";
  pointer-events: none;
  font-size: 0.85em;
  color: var(--color-green);
}
.sec-news .col-right {
  flex: 0 0 40rem;
}
.sec-news .col-right a {
  width: 100%;
  max-width: 100%;
  margin-top: 1.6rem;
}

@media (max-width: 768px) {
  .sec-news .inner-content {
    display: block;
  }
  .sec-news .news-container article {
    --dot-gap: 0.5rem;
    --dot-size: 0.12rem;
    gap: 0.8rem;
    padding: 1.2rem 0;
  }
  .sec-news .news-container article time {
    font-size: 1.2rem;
  }
  .sec-news .col-left hgroup h2 {
    margin-bottom: 1.6rem;
  }
  .sec-news .col-left hgroup {
    display: block;
    text-align: center;
  }
  .sec-news .col-right {
    margin-top: 2.4rem;
  }
  .sec-news .col-right figure {
    width: 20rem;
    margin: 0 auto -2.4rem;
  }
}
/* ==========================================================================
   FAQ
========================================================================== */
.sec-faq {
  --offset: 6rem;
  padding: var(--size-block) var(--size-inline) calc(var(--size-block) * 1.5);
  background:
    url(/assets/img/top/faq-bg-top.svg) repeat-x center top / auto 10rem,
    url(/assets/img/top/faq-bg-btm.svg) repeat-x center bottom / auto 10rem,
    linear-gradient(to bottom, transparent var(--offset), var(--color-emerald-light) var(--offset), var(--color-emerald-light) calc(100% - var(--offset)), transparent calc(100% - var(--offset)));
}
.sec-faq h2 {
  margin-bottom: 5rem;
}
.sec-faq .accordion-container {
  margin-top: 1.6rem;
}
.sec-faq summary {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  padding: 1rem 6rem 1rem 1.6rem;
  border-radius: 99rem;
  background: #fff;
  font-size: 2.4rem;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.sec-faq summary::-webkit-details-marker {
  display: none;
}
.sec-faq summary:before {
  content: "Q";
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 6rem;
  aspect-ratio: 1/1;
  border-radius: 99rem;
  background: var(--color-carrot);
  color: #fff;
  font-size: 3.5rem;
  pointer-events: none;
}
.sec-faq summary:after {
  content: "\f078";
  position: absolute;
  right: 2.4rem;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-feature-settings: normal;
  font-style: normal;
  font-synthesis: none;
  font-variant: normal;
  text-align: center;
  text-rendering: auto;
  transition: all 0.2s;
  pointer-events: none;
}
.sec-faq .accordion-container[open] summary:after {
  transform: translateY(-50%) rotate(180deg);
}
.sec-faq .accordion-content {
  position: relative;
  padding: 3.2rem;
  padding-left: 9rem;
  overflow: hidden;
}
.sec-faq .accordion-content:before {
  content: "A";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  aspect-ratio: 1/1;
  border-radius: 99rem;
  background: var(--color-green);
  color: #fff;
  font-size: 3.5rem;
  position: absolute;
  left: 1.6rem;
  top: 1.6rem;
  pointer-events: none;
}

@media (max-width: 768px) {
  .sec-faq h2 {
    margin-bottom: 3.2rem;
  }
  .sec-faq summary {
    gap: 0.8rem;
    font-size: 1.6rem;
    line-height: 1.3;
  }
  .sec-faq summary:before {
    flex: 0 0 4rem;
    font-size: 2rem;
  }
  .sec-faq .accordion-content {
    padding: 2.4rem 1.6rem 2.4rem 6.8rem;
  }
  .sec-faq .accordion-content:before {
    width: 4rem;
    font-size: 2rem;
  }
}
/* ==========================================================================
   Access
========================================================================== */
.sec-access {
  padding: var(--size-block) var(--size-inline);
}
.sec-access .flexbox {
  display: flex;
  align-items: center;
  gap: 4rem;
  margin-top: 5rem;
}
.sec-access .flexbox .map {
  flex: 0 0 50rem;
  aspect-ratio: 4/3;
}
.sec-access .flexbox .map iframe {
  width: 100%;
  height: 100%;
  border-radius: var(--size-border-radius);
}
.sec-access .flexbox em {
  color: var(--color-green);
  font-size: 2.4rem;
}
.sec-access .flexbox p:first-of-type {
  margin-bottom: 1.6rem;
  line-height: 2;
}
.sec-access .flexbox .button-standard {
  width: 100%;
  margin-top: 3.2rem;
}

@media (max-width: 768px) {
  .sec-access .flexbox {
    flex-direction: column-reverse;
    gap: 2.4rem 0;
    margin: 2.4rem auto;
    align-items: unset;
  }
  .sec-access .flexbox > div {
    flex: 1 1 auto !important;
    text-align: center;
  }
  .sec-access .flexbox em {
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.2;
  }
}
/* ==========================================================================
   Attention
========================================================================== */
.sec-attention {
  margin-bottom: calc(var(--size-block) * -1);
}
.sec-attention .upper-block {
  padding: calc(var(--size-inline) * 2) var(--size-inline);
  background: url(/assets/img/top/attention-bg.webp) no-repeat center top/ cover;
}
.sec-attention .lower-block .flexbox {
  display: flex;
  gap: 2.4rem;
  margin-top: 4rem;
}
.sec-attention .lower-block .detail {
  flex: 1 1 auto;
}
.sec-attention .lower-block .detail h3 {
  margin-bottom: 1.6rem;
  font-size: 2.4rem;
}
.sec-attention .lower-block .detail em {
  color: var(--color-green);
}
.sec-attention .lower-block figure {
  flex: 0 0 42rem;
}

@media (max-width: 768px) {
  .sec-attention .lower-block .flexbox {
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.6rem;
    padding-inline: var(--size-inline);
    margin-block: 3rem 8rem;
  }
  .sec-attention .lower-block .detail {
    display: contents;
  }
  .sec-attention .lower-block .detail h3 {
    flex: 0 0 20rem;
    font-size: 1.8rem;
    margin: 0;
  }
  .sec-attention .lower-block figure {
    flex: 0 0 12rem;
  }
  .sec-attention .lower-block .detail p {
    flex: 1 1 100%;
    order: 99;
  }
}