:root {
  --color-white: #ffffff;
  --color-bg: #fffaf3;
  --color-paper: #fffdf7;
  --color-feature-bg: #fffdfa;
  --color-text: #694134;
  --color-green: #2fa388;
  --color-green-dark: #1f8e74;
  --color-blue: #73afd3;
  --color-orange: #e26a43;
  --color-pink: #e58ca2;
  --color-yellow: #cea666;
  --color-surface: #f8fae8;
  --color-book-school-bg: #3eb370;
  --color-book-school-border: #00a647;
  --color-book-button: #ff984d;
  --font-round: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --font-base: "Noto Sans JP", sans-serif;
  --contents-width: 768;
}
@media screen and (min-width: 768px) {
  :root {
    --contents-width: 1140;
  }
}

/* ベースとなるリセットと共通設定 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-base);
  background: var(--color-white);
  line-height: 1.7;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.sp_only {
  display: block;
}
.pc_only {
  display: none;
}


/* ヘッダー */
header{
    position: relative;
    z-index: 1;
}
.site-header {
    padding: min(60px, calc(60 / var(--contents-width) * 100vw)) 0;
    background: var(--color-white);
    position: relative;
}
.site-header__label {
    position: absolute;
    font-family: var(--font-round);
    font-size: min(24px, calc(24 / var(--contents-width) * 100vw));
    font-weight: 700;
    color: #69ab23;
    left: min(50px, calc(50 / var(--contents-width) * 100vw));
    top: min(36px, calc(36 / var(--contents-width) * 100vw));
}
.site-header__label__link {
    display: block;
}

/* LP全体のキャンバス */
.lp {
    position: relative;
    z-index: 2;
    overflow: visible;
    width: 100%;
    max-width: none;
    margin: 0;
    background:
    linear-gradient(
        to bottom,
        var(--color-bg) 0 min(876px, calc(876 / var(--contents-width) * 100vw)),
        var(--color-surface) min(876px, calc(876 / var(--contents-width) * 100vw)) min(3320px, calc(3320 / var(--contents-width) * 100vw)),
        var(--color-surface) min(3320px, calc(3320 / var(--contents-width) * 100vw)) 100%
    );
}
.lp__content {
    display: block;
    margin: 0 auto;
}

/* ファーストビュー */
.hero {
    display: block;
    position: relative;
    z-index: 3;
    overflow: visible;
    background-color: var(--color-white);
}

.hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0 auto;
}
.hero__bg {
    position: relative;
}
.hero__bg img {
    margin: 0 auto;
    display: block;
    width: 100%;
    object-fit: cover;
}
.hero__image {
    position: relative;
    z-index: 3;
    width: 100%;
    margin: 0 auto;
}
.hero__image img {
    margin: 0 auto;
    display: block;
    height: 100%;
    object-fit: cover;
}
.hero__boy,.hero__girl {
    display: block;
    position: absolute;
    z-index: 4;
    width: fit-content;
    height: fit-content;
    --ease-elastic-out: linear(0, 0.2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, 0.941 24.01%, 0.8912 25.91%, 0.8694 27.84%, 0.8698 29.21%, 0.8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, 0.9961 53.26%, 0.9839 57.54%, 0.9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, 0.9981 86.66%, 1);
    --ease-bounce-out: linear(0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1, 0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1, 0.988, 0.984, 0.988, 1);
    opacity: 0;
    animation:
    hero-fade-in 2s var(--ease-elastic-out) 2s forwards,
    hero-bounce 2s var(--ease-bounce-out) 0s infinite alternate;
}
.hero__boy__image,.hero__girl__image {
    display: block;
    margin: 0 auto;
}
.hero__boy {
    top: 5%;
    right: 78%;
}
.hero__girl {
    top: 2%;
    left: 74%;
}
.hero__boy__image {
    width: min(235px,17.47vw);
}
.hero__girl__image {
    width: min(170px,22.67vw);
}

/* キーワード導線 */
.keywords {
    position: relative;
    padding:
    min(26px, calc(26 / var(--contents-width) * 100vw))
    min(22px, calc(22 / var(--contents-width) * 100vw))
    min(34px, calc(34 / var(--contents-width) * 100vw));
    background: var(--color-surface);
}

.section-title {
    position: relative;
    margin-bottom: min(80px, calc(80 / var(--contents-width) * 100vw));
    padding-top: min(18px, calc(18 / var(--contents-width) * 100vw));
}

.section-title__tap {
    position: absolute;
    content: "";
    display: block;
    background-image: url(../img/tap_icon.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    top: 2%;
    left: 3%;
    width: min(76px, calc(76 / var(--contents-width) * 100vw));
    height: min(76px, calc(76 / var(--contents-width) * 100vw));
}

.section-title__box {
    margin:
    min(22px, calc(22 / var(--contents-width) * 100vw))
    min(48px, calc(48 / var(--contents-width) * 100vw))
    0
    min(64px, calc(64 / var(--contents-width) * 100vw));
    padding: min(30px, calc(30 / var(--contents-width) * 100vw)) min(24px, calc(24 / var(--contents-width) * 100vw));
    border: min(3px, calc(3 / var(--contents-width) * 100vw)) solid var(--color-yellow);
    border-radius: min(10px, calc(10 / var(--contents-width) * 100vw));
    background: var(--color-white);
    text-align: center;
}

.section-title__box p {
    margin: 0;
    font-family: var(--font-round);
    font-size: min(34px, calc(34 / var(--contents-width) * 100vw));
    font-weight: 700;
    line-height: 1.18;
}

.section-title__icon {
    position: absolute;
    top: 50%;
    right: -1%;
    width: min(116px, calc(116 / var(--contents-width) * 100vw));
}

.keyword-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: min(12px, calc(12 / var(--contents-width) * 100vw)) min(14px, calc(14 / var(--contents-width) * 100vw));
}

.keyword-card {
    border-radius: min(16px, calc(16 / var(--contents-width) * 100vw));
}

.keyword-card__image {
    display: block;
    width: 100%;
    height: auto;
}

.keyword-card__link {
    display: block;
}

/* 大学紹介セクション */
.university {
    padding:
    min(120px, calc(120 / var(--contents-width) * 100vw))
    min(22px, calc(22 / var(--contents-width) * 100vw))
    min(34px, calc(34 / var(--contents-width) * 100vw));
    background: var(--color-white);
}

.university__heading {
    position: relative;
    width: min(100%, min(503px, calc(503 / var(--contents-width) * 100vw)));
    margin: 0 auto min(18px, calc(18 / var(--contents-width) * 100vw));
    padding: min(16px, calc(16 / var(--contents-width) * 100vw)) min(10px, calc(10 / var(--contents-width) * 100vw)) min(16px, calc(16 / var(--contents-width) * 100vw)) min(80px, calc(80 / var(--contents-width) * 100vw));
    border: min(3px, calc(3 / var(--contents-width) * 100vw)) solid var(--color-yellow);
    border-radius: min(10px, calc(10 / var(--contents-width) * 100vw));
    background: var(--color-white);
    text-align: center;
}

.university__heading p {
    margin: 0;
    font-family: var(--font-round);
    font-size: min(30px, calc(30 / var(--contents-width) * 100vw));
    font-weight: 700;
    line-height: 1.18;
}

.university__heading img {
    position: absolute;
    left: min(10px, calc(10 / var(--contents-width) * 100vw));
    top: 16%;
    width: min(160px, calc(160 / var(--contents-width) * 100vw));
    transform: translateY(-50%);
}

.university__logos {
    overflow: hidden;
    margin-bottom: min(18px, calc(18 / var(--contents-width) * 100vw));
}

.university__logos-track {
    display: flex;
    align-items: center;
    gap: min(18px, calc(18 / var(--contents-width) * 100vw));
    width: max-content;
    animation: feature-carousel-scroll var(--carousel-duration, 18s) linear infinite;
    will-change: transform;
}

.university__logos__item {
    flex: 0 0 auto;
}

.university__logos__item img {
    display: block;
    max-height: min(34px, calc(34 / var(--contents-width) * 100vw));
    width: auto;
}

.university__book-link {
    position: relative;
    display: block;
    width: min(100%, min(330px, calc(330 / var(--contents-width) * 100vw)));
    margin: 0 auto;
    padding:
    min(8px, calc(8 / var(--contents-width) * 100vw))
    min(52px, calc(52 / var(--contents-width) * 100vw))
    min(8px, calc(8 / var(--contents-width) * 100vw))
    min(18px, calc(18 / var(--contents-width) * 100vw));
    border: 2px solid var(--color-book-school-border);
    border-radius: 10px;
    font-family: var(--font-round);
    font-size: min(20px, calc(20 / var(--contents-width) * 100vw));
    font-weight: 700;
    line-height: clamp(20px, 3.51vw, 40px);
    letter-spacing: 0.15em;
    color: var(--color-white);
    background: var(--color-book-school-bg);
    box-shadow: 0 3px 0 var(--color-book-school-border);
}

.university__book-link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: min(12px, calc(12 / var(--contents-width) * 100vw));
    width: min(35px, calc(35 / var(--contents-width) * 100vw));
    height: min(35px, calc(35 / var(--contents-width) * 100vw));
    background: url(../img/arrow_univ.png) center / contain no-repeat;
    transform: translateY(-50%) rotate(90deg);
}

.university__book-link::before {
    content: none;
}

.university__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: min(10px, calc(10 / var(--contents-width) * 100vw));
    margin: 0;
    padding: 0;
    list-style: none;
}

.university__list li {
    padding: min(10px, calc(10 / var(--contents-width) * 100vw)) min(12px, calc(12 / var(--contents-width) * 100vw));
    border-radius: min(8px, calc(8 / var(--contents-width) * 100vw));
    font-size: min(13px, calc(13 / var(--contents-width) * 100vw));
    font-weight: 700;
    color: var(--color-white);
    background: #35a85d;
    text-align: center;
}

/* 4つの導線ボタン */
.feature-links {
    background: var(--color-feature-bg);
    padding:
    min(12px, calc(12 / var(--contents-width) * 100vw))
    min(18px, calc(18 / var(--contents-width) * 100vw))
    min(34px, calc(34 / var(--contents-width) * 100vw));
}
.feature-links__wrapper {
    margin: 0 auto;
}

.feature-links__item {
    position: relative;
    display: block;
    cursor: pointer;
    padding:
    min(18px, calc(18 / var(--contents-width) * 100vw))
    min(58px, calc(58 / var(--contents-width) * 100vw))
    min(18px, calc(18 / var(--contents-width) * 100vw))
    min(26px, calc(26 / var(--contents-width) * 100vw));
    border: min(3px, calc(3 / var(--contents-width) * 100vw)) solid currentColor;
    border-radius: 999px;
    background: var(--color-white);
    font-family: var(--font-round);
    font-size: min(28px, calc(28 / var(--contents-width) * 100vw));
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    box-shadow: 0 min(4px, calc(4 / var(--contents-width) * 100vw)) 0 currentColor;
    margin: 0 auto min(35px, calc(35 / var(--contents-width) * 100vw));
}
.feature-links__item.feature-links__item--life {
    padding: min(38px, calc(38 / var(--contents-width) * 100vw)) min(58px, calc(58 / var(--contents-width) * 100vw)) min(38px, calc(38 / var(--contents-width) * 100vw)) min(26px, calc(26 / var(--contents-width) * 100vw));
}

.feature-links__item::after {
    content: "";
    position: absolute;
    top: 50%;
    right: min(18px, calc(18 / var(--contents-width) * 100vw));
    width: min(26px, calc(26 / var(--contents-width) * 100vw));
    height: min(26px, calc(26 / var(--contents-width) * 100vw));
    border-radius: 50%;
    background: currentColor;
    transform: translateY(-50%);
}

.feature-links__item::before {
    content: "";
    position: absolute;
    top: 50%;
    right: min(24px, calc(24 / var(--contents-width) * 100vw));
    z-index: 1;
    width: min(9px, calc(9 / var(--contents-width) * 100vw));
    height: min(10px, calc(10 / var(--contents-width) * 100vw));
    background: var(--color-white);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform: translateY(-50%);
    transform-origin: 50% 50%;
    transition: transform 0.2s ease;
}

.feature-links__item.is-open::before {
    transform: translateY(-50%) rotate(90deg);
    right: min(26px, calc(26 / var(--contents-width) * 100vw));
}

.feature-links__item--food {
    color: var(--color-green);
}

.feature-links__item--medical {
    color: var(--color-blue);
}

.feature-links__item--industry {
    color: var(--color-orange);
}

.feature-links__item--life {
    color: var(--color-pink);
}

.feature-links__item--food + .feature-links__carousel,
.feature-links__item--food + .feature-links__carousel__inner {
    --feature-links-accent: var(--color-green);
}

.feature-links__item--medical + .feature-links__carousel,
.feature-links__item--medical + .feature-links__carousel__inner {
    --feature-links-accent: var(--color-blue);
}

.feature-links__item--industry + .feature-links__carousel,
.feature-links__item--industry + .feature-links__carousel__inner {
    --feature-links-accent: var(--color-orange);
}

.feature-links__item--life + .feature-links__carousel,
.feature-links__item--life + .feature-links__carousel__inner {
    --feature-links-accent: var(--color-pink);
}

.feature-links__carousel__inner {
    position: relative;
}

.feature-links__carousel__inner,
.feature-links__item + .feature-links__carousel {
    display: none;
    padding:
    0
    min(8px, calc(8 / var(--contents-width) * 100vw))
    min(4px, calc(4 / var(--contents-width) * 100vw));
}

.feature-links__carousel__explanation {
    display: flex;
    gap: min(20px, calc(20 / var(--contents-width) * 100vw));
    align-items: center;
    box-sizing: border-box;
    max-width: 900px;
    margin: 0 auto min(30px, calc(30 / var(--contents-width) * 100vw));
    padding:
    min(18px, calc(18 / var(--contents-width) * 100vw))
    min(20px, calc(20 / var(--contents-width) * 100vw));
    background: var(--color-white);
    border: 3px solid var(--feature-links-accent, var(--color-green));
    border-radius: 10px;
}

.feature-links__carousel__explanation__img {
    display: flex;
    flex: 0 0 min(42%, 312px);
    width: min(312px, calc(312 / var(--contents-width) * 100vw));
    padding-left: max(0px, calc(50% - 156px - 264px));
}

.feature-links__carousel__explanation__img img {
    width: 100%;
}

.feature-links__carousel__explanation__text {
    display: flex;
    align-items: center;
    flex: 1;
    font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: min(16px, calc(16 / var(--contents-width) * 100vw));
    line-height: 1.75;
    color: var(--color-text);
}

.feature-links__carousel {
    position: relative;
    overflow: visible;
    margin: 0 auto min(35px, calc(35 / var(--contents-width) * 100vw));
}

.feature-links__carousel .slick-list {
    overflow: hidden;
}

.feature-links__carousel .slick-slide {
    box-sizing: border-box;
}

.feature-links__carousel .slick-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(42.5px, calc(42.5 / var(--contents-width) * 100vw));
    height: min(42.5px, calc(42.5 / var(--contents-width) * 100vw));
    margin: 0;
    padding: 0;
    border: min(2px, calc(2 / var(--contents-width) * 100vw)) solid var(--color-white);
    border-radius: 50%;
    background: var(--feature-links-accent, var(--color-green));
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
    transform: translateY(-50%);
}

.feature-links__carousel .slick-arrow::before,
.feature-links__carousel .slick-arrow::after {
    content: "";
    position: absolute;
    top: calc(50% - min(2px, calc(2 / var(--contents-width) * 100vw)));
    right: min(13px, calc(13 / var(--contents-width) * 100vw));
    width: min(17px, calc(17 / var(--contents-width) * 100vw));
    height: min(4px, calc(4 / var(--contents-width) * 100vw));
    border-radius: 999px;
    background-color: var(--color-white);
    transform-origin: calc(100% - min(2px, calc(2 / var(--contents-width) * 100vw))) 50%;
}

.feature-links__carousel .slick-arrow::before {
    transform: rotate(45deg);
}

.feature-links__carousel .slick-arrow::after {
    transform: rotate(-45deg);
}

.feature-links__carousel .slick-prev {
    left: calc(50% - min(270px, calc(270 / var(--contents-width) * 100vw)) - min(24px, calc(24 / var(--contents-width) * 100vw)));
    transform: translateY(-50%) rotate(-180deg);
}

.feature-links__carousel .slick-next {
    right: calc(50% - min(270px, calc(270 / var(--contents-width) * 100vw)) - min(24px, calc(24 / var(--contents-width) * 100vw)));
}

.feature-links__carousel[data-randomize-on-load="true"] .feature-links__carousel__item {
    display: block;
}

.feature-links__carousel__item {
    width: min(540px, calc(540 / var(--contents-width) * 100vw));
    margin: 0 min(10px, calc(10 / var(--contents-width) * 100vw));
    box-sizing: border-box;
}

.feature-links__carousel__item img {
    width: 100%;
}

.feature-links__carousel-counter {
    width: fit-content;
    min-width: min(90px, calc(90 / var(--contents-width) * 100vw));
    margin: min(14px, calc(14 / var(--contents-width) * 100vw)) auto 0;
    padding: min(8px, calc(8 / var(--contents-width) * 100vw)) min(18px, calc(18 / var(--contents-width) * 100vw));
    border-radius: 999px;
    background: var(--feature-links-accent, var(--color-green));
    color: var(--color-white);
    font-family: var(--font-round);
    font-size: min(16px, calc(16 / var(--contents-width) * 100vw));
    font-weight: 700;
    line-height: 1;
    text-align: center;
    position: absolute;
    bottom: 4.5%;
    right: 50%;
    transform: translateX(50%);
}

.is-modal-open {
    overflow: hidden;
}

.feature-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: min(20px, calc(20 / var(--contents-width) * 100vw));
}

.feature-modal.is-open {
    display: flex;
}

.feature-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
}

.feature-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, min(620px, calc(620 / var(--contents-width) * 100vw)));
    border-radius: min(20px, calc(20 / var(--contents-width) * 100vw));
    background: #f3f3f3;
    overflow: visible;
}

.feature-modal__header {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: min(124px, calc(124 / var(--contents-width) * 100vw));
    padding: min(14px, calc(14 / var(--contents-width) * 100vw)) min(24px, calc(24 / var(--contents-width) * 100vw));
    background: var(--feature-links-accent, var(--color-green));
    border-radius: min(20px, calc(20 / var(--contents-width) * 100vw)) min(20px, calc(20 / var(--contents-width) * 100vw)) 0 0;
}

.feature-modal__title {
    margin: 0;
    color: var(--color-white);
    text-align: center;
    font-family: var(--font-round);
    font-size: min(32px, calc(32 / var(--contents-width) * 100vw));
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.03em;
    white-space: pre-line;
}

.feature-modal__close {
    position: absolute;
    top: min(-30px, calc(-30 / var(--contents-width) * 100vw));
    right: min(-5px, calc(-5 / var(--contents-width) * 100vw));
    width: min(42px, calc(42 / var(--contents-width) * 100vw));
    height: min(42px, calc(42 / var(--contents-width) * 100vw));
    border: 0;
    background: transparent;
    cursor: pointer;
}

.feature-modal__close::before,
.feature-modal__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(32px, calc(32 / var(--contents-width) * 100vw));
    height: min(5px, calc(5 / var(--contents-width) * 100vw));
    border-radius: 999px;
    background: var(--color-white);
    transform-origin: 50% 50%;
}

.feature-modal__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.feature-modal__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.feature-modal__body {
    padding: min(20px, calc(20 / var(--contents-width) * 100vw));
}

.feature-modal__image {
    display: block;
    width: 100%;
    border-radius: min(10px, calc(10 / var(--contents-width) * 100vw));
    margin-bottom: min(16px, calc(16 / var(--contents-width) * 100vw));
}

.feature-modal__text {
    margin: 0 0 min(18px, calc(18 / var(--contents-width) * 100vw));
    font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    font-size: min(16px, calc(16 / var(--contents-width) * 100vw));
    font-weight: 700;
    line-height: 1.8;
    color: #2f2f2f;
    white-space: pre-line;
}

.feature-modal__button {
    display: block;
    width: 100%;
    padding: min(14px, calc(14 / var(--contents-width) * 100vw)) min(16px, calc(16 / var(--contents-width) * 100vw));
    border-radius: min(6px, calc(6 / var(--contents-width) * 100vw));
    text-align: center;
    font-family: var(--font-round);
    font-size: min(24px, calc(24 / var(--contents-width) * 100vw));
    font-weight: 700;
    color: var(--color-white);
    background: var(--feature-links-accent, var(--color-green));
}

/* BOOKセクション */
.book {
    padding:
    min(80px, calc(80 / var(--contents-width) * 100vw))
    min(22px, calc(22 / var(--contents-width) * 100vw))
    min(42px, calc(42 / var(--contents-width) * 100vw));
    background: var(--color-surface);
}

.book__heading {
    position: relative;
    width: min(100%, min(503px, calc(503 / var(--contents-width) * 100vw)));
    margin: 0 auto min(18px, calc(18 / var(--contents-width) * 100vw));
    padding: min(16px, calc(16 / var(--contents-width) * 100vw)) min(140px, calc(140 / var(--contents-width) * 100vw)) min(16px, calc(16 / var(--contents-width) * 100vw)) min(10px, calc(10 / var(--contents-width) * 100vw));
    border: min(3px, calc(3 / var(--contents-width) * 100vw)) solid var(--color-yellow);
    border-radius: min(10px, calc(10 / var(--contents-width) * 100vw));
    background: var(--color-white);
    text-align: center;
}

.book__heading p {
    margin: 0;
    font-family: var(--font-round);
    font-size: min(30px, calc(30 / var(--contents-width) * 100vw));
    font-weight: 700;
    line-height: 1.18;
}

.book__heading img {
    position: absolute;
    right: min(10px, calc(10 / var(--contents-width) * 100vw));
    top: 32%;
    width: min(160px, calc(160 / var(--contents-width) * 100vw));
    transform: translateY(-50%);
}

.book__wrapper {
    width: min(100%, 1140px);
    max-width: 1140px;
    margin: 0 auto;
    background: var(--color-white);
    border-radius: 10px;
    padding: min(60px, calc(60 / var(--contents-width) * 100vw)) min(40px, calc(40 / var(--contents-width) * 100vw));
}

.book__schools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: min(14px, calc(14 / var(--contents-width) * 100vw)) min(10px, calc(10 / var(--contents-width) * 100vw));
    width: 100%;
    margin: 0 0 min(14px, calc(14 / var(--contents-width) * 100vw));
    padding: 0;
    list-style: none;
}

.book__schools li {
    position: relative;
    width: 100%;
    max-width: 330px;
    padding:
    min(8px, calc(8 / var(--contents-width) * 100vw))
    min(52px, calc(52 / var(--contents-width) * 100vw))
    min(8px, calc(8 / var(--contents-width) * 100vw))
    min(18px, calc(18 / var(--contents-width) * 100vw));
    border: 2px solid var(--color-book-school-border);
    border-radius: 10px;
    font-family: var(--font-round);
    font-size: min(20px, calc(20 / var(--contents-width) * 100vw));
    font-weight: 700;
    line-height: clamp(20px, 3.51vw, 40px);
    letter-spacing: 0.15em;
    color: var(--color-white);
    background: var(--color-book-school-bg);
    box-shadow: 0 3px 0 var(--color-book-school-border);
}

.book__schools li::after {
    content: "";
    position: absolute;
    top: 50%;
    right: min(12px, calc(12 / var(--contents-width) * 100vw));
    width: min(35px, calc(35 / var(--contents-width) * 100vw));
    height: min(35px, calc(35 / var(--contents-width) * 100vw));
    background: url(../img/arrow_univ.png) center / contain no-repeat;
    transform: translateY(-50%);
}

.book__schools li::before {
    content: none;
}

.book__divider {
    width: 100%;
    height: 1px;
    margin: 0 0 min(12px, calc(12 / var(--contents-width) * 100vw));
    background: #a8d8a5;
}

.book__body {
    display: grid;
    grid-template-columns: minmax(0, 126fr) minmax(0, 214fr);
    gap: min(12px, calc(12 / var(--contents-width) * 100vw));
    align-items: start;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding:
    min(10px, calc(10 / var(--contents-width) * 100vw))
    min(12px, calc(12 / var(--contents-width) * 100vw))
    min(12px, calc(12 / var(--contents-width) * 100vw));
    border-radius: min(2px, calc(2 / var(--contents-width) * 100vw));
    background: var(--color-white);
}

.book__visual {
    margin: 0;
}

.book__cover {
    width: 100%;
    margin: 0;
}

.book__text {
    position: relative;
    color: var(--color-text);
}

.book__text h2 {
    margin: 0 0 min(8px, calc(8 / var(--contents-width) * 100vw));
    font-family: var(--font-round);
    font-size: clamp(1rem, 3vw, 1.45rem);
    font-weight: 700;
    line-height: 1.2;
    color: #6a432f;
}

.book__text p {
    margin: 0 0 min(8px, calc(8 / var(--contents-width) * 100vw));
    font-size: min(15px, calc(15 / var(--contents-width) * 100vw));
    line-height: 1.8;
}

.book__button {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-top: min(4px, calc(4 / var(--contents-width) * 100vw));
    padding:
    min(8px, calc(8 / var(--contents-width) * 100vw))
    min(34px, calc(34 / var(--contents-width) * 100vw))
    min(8px, calc(8 / var(--contents-width) * 100vw))
    min(12px, calc(12 / var(--contents-width) * 100vw));
    border-radius: min(6px, calc(6 / var(--contents-width) * 100vw));
    font-family: var(--font-round);
    font-size: min(20px, calc(20 / var(--contents-width) * 100vw));
    text-align: center;
    font-weight: 700;
    color: var(--color-white);
    background: var(--color-book-button);
}

.book__button::after {
    content: "";
    position: absolute;
    top: 50%;
    right: min(10px, calc(10 / var(--contents-width) * 100vw));
    width: min(30px, calc(30 / var(--contents-width) * 100vw));
    height: min(30px, calc(30 / var(--contents-width) * 100vw));
    background: url(../img/arrow_book.png) center / contain no-repeat;
    transform: translateY(-50%);
}

.book__button::before {
    content: none;
}

.page-top {
    display: block;
    display: block;
    margin: 0 auto;
    width: min(100%, min(200px, calc(200 / var(--contents-width) * 100vw)));
}

/* footerと背景のキャラクター配置 */
footer.footer {
    display: block;
    position: relative;
    background: var(--color-surface);
    padding: min(90px, calc(90 / var(--contents-width) * 100vw)) 0 0;
    text-align: center;
}
.footer__bg {
    display: block;
    width: 100%;
    height: min(100%, min(330px, calc(330 / var(--contents-width) * 100vw)));
    object-fit: cover;
}
.footer__characters {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    width: min(90%, min(1350px, calc(1350 / var(--contents-width) * 100vw)));
    object-fit: cover;
}

/* Copyright */
.footer__copyright__link {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: min(30px, calc(30 / var(--contents-width) * 100vw)) 0;
    font-family: var(--font-round);
    font-size: min(18px, calc(18 / var(--contents-width) * 100vw));
    text-align: center;
    font-weight: 700;
    color: var(--color-text);
}

/* 小さな浮遊感を出す演出 */
@keyframes twinkle {
    0%,100% {
        transform: scale(1);
        opacity: 0.85;
    }
    50% {
        transform: scale(1.35);
        opacity: 1;
    }
}

@keyframes feature-carousel-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-1 * var(--carousel-distance, 0px)));
    }
}

@keyframes hero-fade-in {
    from {
        opacity: 0;
        scale: 0;
    }
    to {
        opacity: 1;
        scale: 1;
    }
}

@keyframes hero-bounce {
    from {
        translate: 0 -1.6rem;
    }
    to {
        translate: 0 0;
    }
}

/* PCではSPデザインを中央に見せる */
@media (min-width: 768px) {
    body {
        background: var(--color-white);
    }
    .sp_only {
        display: none;
    }
    .pc_only {
        display: block;
    }
    .hero__boy {
        top: 9%;
        right: 74%;
    }
    .hero__girl {
        top: 2%;
        left: 71%;
    }
    .hero__boy__image {
        width: min(355px,17.47vw);
    }
    .hero__girl__image {
        width: min(460px,22.67vw);
    }
    .keywords{
        max-width: 1280px;
        margin: 0 auto;
    }
    .section-title {
        width: min(100%, min(950px, calc(950 / var(--contents-width) * 100vw)));
        margin: 0 auto min(80px, calc(80 / var(--contents-width) * 100vw));
    }
    .keyword-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .book {
        max-width: calc(var(--contents-width) * 1px);
        margin: 0 auto;
    }
    .university__heading {
        width: min(100%, min(835px, calc(835 / var(--contents-width) * 100vw)));
        margin-bottom: min(22px, calc(22 / var(--contents-width) * 100vw));
        padding: min(30px, calc(30 / var(--contents-width) * 100vw)) min(24px, calc(24 / var(--contents-width) * 100vw)) min(30px, calc(30 / var(--contents-width) * 100vw)) min(100px, calc(100 / var(--contents-width) * 100vw));
    }
    .university__heading img {
        left: min(30px, calc(30 / var(--contents-width) * 100vw));
        width: min(160px, calc(160 / var(--contents-width) * 100vw));
        top: 8.5%;
        transform: translateY(-50%);
    }
    .university__book-link {
        padding-left: min(20px, calc(20 / var(--contents-width) * 100vw));
        padding-right: min(58px, calc(58 / var(--contents-width) * 100vw));
    }
    .feature-links__item {
        width: 680px;
        margin: 0 auto 35px;
    }
    .feature-links__carousel {
        padding-left: 0;
        padding-right: 0;
    }
    .feature-links__carousel__inner,
    .feature-links__item + .feature-links__carousel {
        padding-left: 0;
        padding-right: 0;
    }
    .feature-links__carousel__explanation {
        gap: min(28px, calc(28 / var(--contents-width) * 100vw));
        padding:
        min(24px, calc(24 / var(--contents-width) * 100vw))
        min(28px, calc(28 / var(--contents-width) * 100vw));
    }
    .feature-links__carousel__explanation__text {
        font-size: min(16px, calc(24 / var(--contents-width) * 100vw));
    }
    .feature-links__carousel__explanation__img {
        width: min(380px, calc(380 / var(--contents-width) * 100vw));
    }
    .feature-links__item.feature-links__item--life {
        padding: min(18px, calc(18 / var(--contents-width) * 100vw)) min(58px, calc(58 / var(--contents-width) * 100vw)) min(18px, calc(18 / var(--contents-width) * 100vw)) min(18px, calc(18 / var(--contents-width) * 100vw));
    }
    .book__heading {
        width: min(100%, min(835px, calc(835 / var(--contents-width) * 100vw)));
        margin-bottom: min(22px, calc(22 / var(--contents-width) * 100vw));
        padding: min(30px, calc(30 / var(--contents-width) * 100vw)) min(100px, calc(100 / var(--contents-width) * 100vw)) min(30px, calc(30 / var(--contents-width) * 100vw)) min(24px, calc(24 / var(--contents-width) * 100vw));
    }
    .book__heading img {
        right: min(15px, calc(15 / var(--contents-width) * 100vw));
        width: min(178px, calc(178 / var(--contents-width) * 100vw));
        top: 17.5%;
        transform: translateY(-50%);
    }
    .book__schools {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(3, auto);
        gap: min(12px, calc(12 / var(--contents-width) * 100vw));
        margin-bottom: min(18px, calc(18 / var(--contents-width) * 100vw));
    }
    .book__schools li {
        padding-left: min(20px, calc(20 / var(--contents-width) * 100vw));
        padding-right: min(58px, calc(58 / var(--contents-width) * 100vw));
    }
    .book__body {
        width: min(750px, calc(750 / var(--contents-width) * 100vw));
        grid-template-columns: min(185px, calc(185 / var(--contents-width) * 100vw)) 1fr;
        gap: min(18px, calc(18 / var(--contents-width) * 100vw));
        padding:
        min(14px, calc(14 / var(--contents-width) * 100vw))
        min(18px, calc(18 / var(--contents-width) * 100vw));
    }
    .book__visual {
        align-self: center;
    }
    .book__cover {
        width: min(100%, min(249px, calc(249 / var(--contents-width) * 100vw)));
    }
    .book__text h2 {
        font-size: clamp(1.25rem, 1.8vw, 1.7rem);
    }
    .book__button {
        font-size: min(25px, calc(25 / var(--contents-width) * 100vw));
    }
    .footer__characters {
        top: 1%;
    }
}