/* リセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    font-size: 100%;
    font-weight: normal;
    text-decoration: none;
    line-height: 1.0;
}

/* 全体 */
body {
    letter-spacing: 0.2em;
    color: #3c3c3c;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.container {
    max-width: 1190px;
    width: 100%;
    margin: 0 auto;
}
@media (max-width: 750px) {
    .container {
        max-width: 375px; /* スマホ画面に対応した最大幅 */
        width: 100%;
        margin: 0 auto;
    }
}

/* header*/
.logo_tel_button {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo_tel_button .logo {
    width: clamp(174px, 19.4vw, 321px);
    height: auto;
}


.tel-number-working-time {
    padding-left: 13%;
}
@media (max-width: 750px) {
    .tel-number-working-time {
    padding-left: 1%;
    }
}
.tel-number {
    font-size: clamp(18px, 2.4vw, 30px);
    font-weight: 500;
    letter-spacing: 0.2em;
    padding-left: 12%;
    position: relative;
    white-space: nowrap; /* テキストの折り返しを防ぐ */
}
.tel-number::before {
    font-family: 'Font Awesome 6 Free';
    position: absolute;
    font-size: clamp(13px, 2.4vw, 25px);
    left: -12%;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 40px;
    font-weight: 900;
    content: "\f095";
}
@media (max-width: 750px) {
    .tel-number::before {
        left: -16%;
    }
}
.working-time {
    display: flex;
    white-space: nowrap; /* テキストの折り返しを防ぐ */
}
.working-time p {
    font-size: clamp(10px, 1.2vw, 16px);
    letter-spacing: 0.1em;
}
.working-time span {
    font-size: clamp(6px, 1.2vw, 14px);
    margin-right: 5px;
    padding: 3px 7px;
    color: #ffffff;
    background-color: #595959;
    border-radius: 5px;
}
.logo_tel_button a {
    padding: 20px 14px;
    color: #ffffff;
    letter-spacing: 0.1em;
    font-weight: 600;
    background-color: #78d877;
    border-radius: 7px;
    box-shadow: 0 5px 0 0 #53944e;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    white-space: nowrap; /* テキストの折り返しを防ぐ */
}
.logo_tel_button a:hover {
    transform: translateY(4px);
    box-shadow: 0 2px 0 0 #53944e;
  }
@media (max-width: 1070px) {
    .logo_tel_button a {
    display: none;
    }
}
.header-background h1 {
    text-align: center; /* h1内のコンテンツを中央揃え */
    background-position: top center; /* 背景画像を上端に配置 */
}
.header-background h1 img {
    width: 100%;
    max-width: 1920px;
}
h1 .second-img {
    display: none; /* 750pxより大きいときは非表示 */
}
@media (max-width: 750px) {
    .header-background .second-img {
        display: block;
    }
}
/* スライダーのスタイル */
.slider {
    overflow: hidden; /* 画像がコンテナからはみ出さないようにする */
    position: relative;
    width: 100%; /* コンテナの幅を画面幅に合わせる */
    height: auto; /* 高さは自動で調整 */
}

/* スライドトラックのスタイル */
.slide-track {
    display: flex; /* 画像を横並びにする */
    width: 300%; /* 2つの画像が並ぶ幅 */
    animation: slide 20s linear infinite; /* アニメーションを適用 */
}

/* スライドのスタイル */
.slide {
    width: 50%; /* 1つのスライドの幅を設定 */
}

/* 画像のスタイル */
.slide img {
    width: 100%; /* 画像がスライドの幅に合わせて表示される */
    height: auto; /* 高さは自動で調整 */
}

/* アニメーションの設定 */
@keyframes slide {
    0% {
        transform: translateX(0); /* 初期位置 */
    }
    100% {
        transform: translateX(-50%); /* 画像が完全に移動する位置 */
    }
}
.fadeDown{
    animation-name:fadeDownAnime;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeDownAnime{
      from {
        opacity: 0;
      transform: translateY(-100px);
      }
    
      to {
        opacity: 1;
      transform: translateY(0);
      }
    }
.header-button {
    padding-top: 1.5%;
}
.header-background-color {
    background-color: #f9fcdb;
    padding-bottom: 20px;
}
.button-flex {
    display: flex;
    justify-content: space-between;
}
@media (max-width: 750px) {
    .button-flex {
    display: grid;
    align-items: center;
    justify-content: center;
    width: 100%;
    }
}
.header-button .title {
    margin-bottom: 3%;
    font-size: clamp(16px, 4.4vw, 44px);
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
    text-shadow: 
    1px 1px 0 #f9fcdb,
    -1px -1px 0 #f9fcdb,
    1px -1px 0 #f9fcdb,
    -1px 1px 0 #f9fcdb,
    2px 2px 0 #f9fcdb,
    -2px -2px 0 #f9fcdb,
    2px -2px 0 #f9fcdb,
    -2px 2px 0 #f9fcdb,
    2px 0 0 #f9fcdb,
    -2px 0 0 #f9fcdb,
    0 2px 0 #f9fcdb,
    0 -2px 0 #f9fcdb,
    3px 3px 0 #f9fcdb,
    -3px -3px 0 #f9fcdb,
    3px -3px 0 #f9fcdb,
    -3px 3px 0 #f9fcdb,
    3px 0 0 #f9fcdb,
    -3px 0 0 #f9fcdb,
    0 3px 0 #f9fcdb,
    0 -3px 0 #f9fcdb;
}
@media (max-width: 750px) {
    .header-button .title {
        font-size: clamp(16px, 7.4vw, 44px);
    }
}
.info-group, .question-group {
    flex: 1;
}
.info-group {
    padding-right: 4%;
}
.info {
    display: flex;
    align-items: flex-end; /* 下揃えにする */
}
.date-time {
    font-size: clamp(16px, 4.4vw, 55px);
    white-space: nowrap;
    font-weight: 700;
    margin: 0.5% 0;
}
@media (max-width: 750px) {
    .date-time {
        font-size: clamp(16px, 8.4vw, 44px);
    }
}
.day {
    font-size: clamp(16px, 2.5vw, 35px);
    letter-spacing: 0;
    margin-right: 2%;
}
.day span {
    color: #fc8bab;
}
.location {
    font-size: clamp(16px, 2.5vw, 25px);
    white-space: nowrap;
    font-weight: 700;
    margin-top: 5%;
}
.question {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
@media (max-width: 750px) {
    .question {
    margin: 5% 0;
    }
}
.question-group h2 {
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    text-shadow:
        1px 1px 0 #f9fcdb,
        -1px -1px 0 #f9fcdb,
        1px -1px 0 #f9fcdb,
        -1px 1px 0 #f9fcdb,
        2px 0 0 #f9fcdb,
        -2px 0 0 #f9fcdb,
        0 2px 0 #f9fcdb,
        0 -2px 0 #f9fcdb;
}
@media (max-width: 750px) {
    .question-group h2 {
    margin-top: 8%;
    }
}
.question {
    position: relative;
}
.question::before {
    content: "";
    position: absolute;
    top: 18%; /* 上下の中央に配置 */
    left: 50%; /* 左右の中央に配置 */
    width: 100%;
    height: 100%;
    background-image: url(images/top_brackets.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translate(-50%, -50%); /* 位置を中央に調整 */
    z-index: 1; /* 画像をテキストの背面に配置 */
}
@media (max-width: 750px) {
    .question::before {
        top: -29%;
    }
}
.question::after {
    content: "";
    position: absolute;
    top: 74%; /* 上下の中央に配置 */
    left: 50%; /* 左右の中央に配置 */
    width: 100%;
    height: 100%;
    background-image: url(images/bottom_brackets.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translate(-50%, -50%); /* 位置を中央に調整 */
    z-index: 1; /* 画像をテキストの背面に配置 */
}
@media (max-width: 750px) {
    .question::after {
        top: 115%;
    }
}
.question h3 {
    font-size: clamp(13px, 1vw, 16px);
    position: relative;
    z-index: 1;
    letter-spacing: 0.01em;
    font-weight: 600;
    text-align: center;
    flex: 1;
    line-height: 180%;
}
.question h3::after {
    content: "";
    position: absolute;
    top: 50%; /* 上下の中央に配置 */
    left: 50%; /* 左右の中央に配置 */
    width: 63%;
    height: 210%;
    background-image: url(images/circle.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translate(-50%, -50%); /* 位置を中央に調整 */
    z-index: -1; /* 画像をテキストの背面に配置 */
}
.button-text {
    text-align: center;
}
.button-text a {
    display: block;
    margin-top: 3%;
    font-size: clamp(16px, 5.4vw, 40px);
    font-weight: 700;
    letter-spacing: 0.12em;
    width: 100%;
    padding: 30px 10px;
    color: #ffffff;
    background-color: #78d877;
    border-radius: 7px;
    box-shadow: 0 5px 0 0 #53944e;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.button-text a:hover {
    transform: translateY(4px);
    box-shadow: 0 2px 0 0 #53944e;   
}
@media (max-width: 750px) {
    .button-text a, .button-text p {
        display: none;
    }
}
.button-text p {
    font-size: clamp(12px, 1.4vw, 16px);
    white-space: nowrap;
    margin-top: 20px;
    font-weight: 600;
}

/*what-can-do*/
#what-can-do {
    background-image: url(images/background.png);
    padding-bottom: 100px;
}
#what-can-do h2 {
    font-size: clamp(21px, 2.5vw, 35px);
    white-space: nowrap;
    font-weight: 500;
    text-align: center;
    padding: 100px 0;
    line-height: 1.3em;
    position: relative;
}
#what-can-do h2::before {
    content: "";
    position: absolute;
    top: 31%; /* 上下の中央に配置 */
    left: 50%; /* 左右の中央に配置 */
    width: 54%;
    height: 100%;
    background-image: url(images/top_brackets2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translate(-50%, -50%); /* 位置を中央に調整 */
    z-index: 1; /* 画像をテキストの背面に配置 */
}
@media (max-width: 750px) {
    #what-can-do h2::before {
        width: 95%;
    }
}
#what-can-do h2::after {
    content: "";
    position: absolute;
    top: 75%; /* 上下の中央に配置 */
    left: 50%; /* 左右の中央に配置 */
    width: 54%;
    height: 100%;
    background-image: url(images/bottom_brackets2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translate(-50%, -50%); /* 位置を中央に調整 */
    z-index: 1; /* 画像をテキストの背面に配置 */
}
@media (max-width: 750px) {
    #what-can-do h2::after {
        width: 95%;
    }
}
#what-can-do h2 span {
    font-weight: 500;
    color: #fdad1f;
}
.what-can-do-contents {
    background-color: #f9e2b7;
    padding: 1px 0;
}
#what-can-do .content {
    margin: 100px auto;
    max-width: 1103px;
    background-color: #ffffff;
    display: flex;
}
@media (max-width: 750px) {
    #what-can-do .content {
        display: block;
    }
}
#what-can-do h3 {
    font-size: clamp(16px, 2.4vw, 30px);
    font-weight: 500;
    white-space: nowrap;
}
#what-can-do .introduction {
    position: relative;
    padding-left: 13%;
}
#what-can-do .introduction::before {
    content: "";
    position: absolute;
    top: -127%; /* 上下の中央に配置 */
    left: -3%;
    width: 50%;
    height: 240%;
    background-image: url(images/01.png);
    background-repeat: no-repeat;
    background-size: contain;
}
#what-can-do .lesson {
    position: relative;
    padding-left: 13%;
}
#what-can-do .lesson::before {
    content: "";
    position: absolute;
    top: -127%; /* 上下の中央に配置 */
    left: -3%;
    width: 50%;
    height: 240%;
    background-image: url(images/02.png);
    background-repeat: no-repeat;
    background-size: contain;
}
#what-can-do .campustour {
    position: relative;
    letter-spacing: 0em;
    padding-left: 13%;
}
#what-can-do .campustour::before {
    content: "";
    position: absolute;
    top: -127%; /* 上下の中央に配置 */
    left: -3%;
    width: 50%;
    height: 240%;
    background-image: url(images/03.png);
    background-repeat: no-repeat;
    background-size: contain;
}
#what-can-do .lunch {
    position: relative;
    padding-left: 13%;
}
#what-can-do .lunch::before {
    content: "";
    position: absolute;
    top: -127%; /* 上下の中央に配置 */
    left: -3%;
    width: 50%;
    height: 240%;
    background-image: url(images/04.png);
    background-repeat: no-repeat;
    background-size: contain;
}
#what-can-do .oneonone {
    position: relative;
    padding-left: 13%;
}
#what-can-do .oneonone::before {
    content: "";
    position: absolute;
    top: -127%; /* 上下の中央に配置 */
    left: -3%;
    width: 50%;
    height: 240%;
    background-image: url(images/05.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.triangle {
    display: flex;
    position: relative;
}
.triangle::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 100px 100px; /* 三角形のサイズを指定 */
    border-color: transparent transparent #fce9e8 transparent; /* 三角形の色を指定 */
}
#what-can-do h3 span {
    font-size: clamp(16px, 5.5vw, 40px);
    color: #80b5ff;
}
.title-content {
    padding: 50px;
}
@media (max-width: 750px) {
    .title-content {
        padding: 10% 5%;
    }
}
.title-content p {
    margin: 30px 0;
    line-height: 1.8em;
}
.img-right, .img-left {
    width: clamp(100px, 43vw, 412px);   /* 親要素の幅に合わせて最大100% */
    height: auto;
    object-fit: contain;
}
@media (max-width: 750px) {
    .img-right, .img-left {
        width: clamp(100px, 100vw, 412px);
    }
}
.img-right {
    margin-right: -30px;
}
@media (max-width: 1165px) {
    .img-right {
        margin-right: 0px; /* 1165px以下のときのマージン */
    }
}
.img-left {
    margin-left: -30px;
}
@media (max-width: 1165px) {
    .img-left {
        margin-left: 0px; /* 1165px以下のときのマージン */
    }
}

/*questions-about-seisho*/
#questions-about-seisho {
    padding: 95px;
    height: 80vh;
    text-align: center;
    position: relative;
    background-color: #d6f5fb;
    background-image: url(images/silhouette.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 1;
    position: relative;
    overflow: hidden;
}
@media (max-width: 750px) {
    #questions-about-seisho {
        padding: 25px 0;
    }
}

#questions-about-seisho::before {
    position: absolute;
    content: "";
    top: 55%;
    left: 8%;
    width: 84%;
    height: 45%;
    background-image: url(images/highschool_girls.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 5;
}
@media (max-width: 750px) {
    #questions-about-seisho::before {
        left: 6%;
        top: 64%;
    }
}
#questions-about-seisho h2 {
    text-align: center;
    font-size: clamp(16px, 5.4vw, 35px);
    white-space: nowrap;
    color: #0db5d5;
    font-weight: 500;
    text-shadow: 
    1px 1px 0 #ffffff,
    -1px -1px 0 #ffffff,
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    2px 2px 0 #ffffff,
    -2px -2px 0 #ffffff,
    2px -2px 0 #ffffff,
    -2px 2px 0 #ffffff,
    2px 0 0 #ffffff,
    -2px 0 0 #ffffff,
    0 2px 0 #ffffff,
    0 -2px 0 #ffffff,
    3px 3px 0 #ffffff,
    -3px -3px 0 #ffffff,
    3px -3px 0 #ffffff,
    -3px 3px 0 #ffffff,
    3px 0 0 #ffffff,
    -3px 0 0 #ffffff,
    0 3px 0 #ffffff,
    0 -3px 0 #ffffff;
}
#questions-about-seisho p {
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 500;
    text-align: center;
    line-height: 1.6em;
    white-space: nowrap;
}
#questions-about-seisho span {
    color: #0db5d5;
    font-weight: 500;
}
#questions-about-seisho .container {
    position: relative;
}
.rightbubble-1 {
    position: absolute;
    z-index: 0;
    top: 781%;
    left: 11%;
}
.rightbubble-1::after {
    content: "";
    position: absolute;
    background-image: url(images/speechbubble_right.png);
    background-size: contain;
    top: -92%;
    left: -9%;
    width: 124%;
    height: 319%;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    z-index: -1;
}
@media (max-width: 1100px) {
    .rightbubble-1 {
        position: absolute;
        z-index: 0;
        top: 781%;
        left: 5%;
    }
}
@media (max-width: 870px) {
    .rightbubble-1 {
        position: absolute;
        z-index: 0;
        top: 781%;
        left: -9%;
    }
}
@media (max-width: 750px) {
    .rightbubble-1::after {
        content: "";
        position: absolute;
        background-image: url(images/speechbubble.png);
        background-size: contain;
        top: -49%;
        left: -18%;
        width: 139%;
        height: 220%;
        background-repeat: no-repeat;
        background-position: center;
        display: inline-block;
        z-index: -1;
    }
}
@media (max-width: 750px) {
    .rightbubble-1 {
        top: 1074%;
        left: 40%;
    }
}
.rightbubble-2 {
    position: absolute;
    z-index: 0;
    top: 306%;
    left: 19%;
}
.rightbubble-2::after {
    content: "";
    position: absolute;
    background-image: url(images/speechbubble_right.png);
    background-size: contain;
    top: -40%;
    left: -20%;
    width: 139%;
    height: 220%;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    z-index: -1;
}
@media (max-width: 750px) {
    .rightbubble-2::after {
        content: "";
        position: absolute;
        background-image: url(images/speechbubble.png);
        background-size: contain;
        top: -49%;
        left: -18%;
        width: 139%;
        height: 220%;
        background-repeat: no-repeat;
        background-position: center;
        display: inline-block;
        z-index: -1;
    }
}
@media (max-width: 750px) {
    .rightbubble-2 {
        left: 11%;
        top: 687%;
    }
}
.leftbubble-1 {
    position: absolute;
    z-index: 0;
    top: 306%;
    left: 68%;
}
.leftbubble-1::after {
    content: "";
    position: absolute;
    background-image: url(images/speechbubble_left.png);
    background-size: contain;
    top: -40%;
    left: -20%;
    width: 139%;
    height: 220%;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    z-index: -1;
}
@media (max-width: 750px) {
    .leftbubble-1::after {
        content: "";
        position: absolute;
        background-image: url(images/speechbubble.png);
        background-size: contain;
        top: -49%;
        left: -18%;
        width: 139%;
        height: 220%;
        background-repeat: no-repeat;
        background-position: center;
        display: inline-block;
        z-index: -1;
    }
}
@media (max-width: 1165px) {
    .leftbubble-1 {
        top: 306%;
        left: 35%;
    }
}
.leftbubble-2 {
    position: absolute;
    z-index: 0;
    top: 781%;
    left: 73%;
}
.leftbubble-2::after {
    content: "";
    position: absolute;
    background-image: url(images/speechbubble_left.png);
    background-size: contain;
    top: -40%;
    left: -20%;
    width: 139%;
    height: 220%;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    z-index: -1;
}
@media (max-width: 1100px) {
    .leftbubble-2 {
        position: absolute;
        z-index: 0;
        top: 781%;
        left: 79%;
    }
}
@media (max-width: 870px) {
    .leftbubble-2 {
        position: absolute;
        z-index: 0;
        top: 781%;
        left: 84%;
    }
}
@media (max-width: 750px) {
    .leftbubble-2::after {
        content: "";
        position: absolute;
        background-image: url(images/speechbubble_both.png);
        background-size: contain;
        top: -49%;
        left: -18%;
        width: 139%;
        height: 220%;
        background-repeat: no-repeat;
        background-position: center;
        display: inline-block;
        z-index: -1;
    }
}
@media (max-width: 750px) {
    .leftbubble-2 {
        top: 1457%;
        left: 21%;
    }
}

/*filler*/
#filler {
    height: 280px;
    text-align: center;
    background-image: url(images/background.png);
    position: relative;
    display: flex;
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
}
#filler::after {
    position: absolute;
    content: "";
    top: -16%;
    left: 28%;
    width: 44%;
    height: 41%;
    background-image: url(images/red_triangle.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#filler p {
    font-size: clamp(16px, 5.4vw, 35px);
    font-weight: 500;
    padding-top: 35px;
    position: relative;
}
#filler p::before {
    position: absolute;
    content: "・";
    top: 20%;
    left: 8%;
    width: 44%;
    font-size: clamp(10px, 2.4vw, 20px);
}
#filler p::after {
    position: absolute;
    content: "・";
    top: 20%;
    left: 14.75%;
    width: 44%;
    font-size: clamp(10px, 2.4vw, 20px);
}

/* three-reasons */
/*#three-reasons img {
    width: 100%;
    height: auto;
}*/
#three-reasons {
    height: 280px;
    text-align: center;
    background-image: url(images/reasons_background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}
#three-reasons::before {
    position: absolute;
    content: url(images/three_reasons_student_left.png);
    width: 43%;
    height: 0%;
    top: -29.5%;
    left: 5%;
}
@media (max-width: 1550px) {
    #three-reasons::before {
        position: absolute;
        content: url(images/three_reasons_student_left.png);
        width: 60%;
        height: 0%;
        top: -29.8%;
        left: -14%;
    }
}
@media (max-width: 1153px) {
    #three-reasons::before {
        content: "";
    }
}
#three-reasons::after {
    position: absolute;
    content: url(images/three_reasons_student_right.png);
    width: 43%;
    height: 0%;
    top: -24.8%;
    left: 52%;
}
@media (max-width: 1550px) {
    #three-reasons::after {
        position: absolute;
        content: url(images/three_reasons_student_right.png);
        width: 60%;
        height: 0%;
        top: -24.8%;
        left: 52%;
    }
}
@media (max-width: 1153px) {
    #three-reasons::after {
        content: "";
    }
}
#three-reasons h2 {
    font-size: clamp(16px, 6.4vw, 30px);
    padding-top: 52px;
    letter-spacing: 0.2em;
    line-height: 1.1em;
    position: relative;
}
#three-reasons h2::before {
    position: absolute;
    content: url(images/sunburst.png);
    width: 43%;
    height: 0%;
    top: 37%;
    left: 8%;
}
@media (max-width: 1153px) {
    #three-reasons h2::before {
        content: "";
    }
}
#three-reasons h2::after {
    position: absolute;
    content: url(images/three_stars.png);
    width: 43%;
    height: 0%;
    top: 109%;
    left: 28%;
}
#three-reasons .choose-seisho {
    padding-left: 10px;
    white-space: nowrap;
    color: #ffffff;
    background-color: #45c0db;
}
#three-reasons .three {
    font-size: 100px;
    font-size: clamp(16px, 23.4vw, 100px);
}
#three-reasons .reason {
    font-size: clamp(16px, 10.4vw, 90px);
    white-space: nowrap;
}
.three, .reason {
    color: #45c0db;
    text-shadow: 
    1px 1px 0 #ffffff,
    -1px -1px 0 #ffffff,
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    2px 2px 0 #ffffff,
    -2px -2px 0 #ffffff,
    2px -2px 0 #ffffff,
    -2px 2px 0 #ffffff,
    2px 0 0 #ffffff,
    -2px 0 0 #ffffff,
    0 2px 0 #ffffff,
    0 -2px 0 #ffffff,
    3px 3px 0 #ffffff,
    -3px -3px 0 #ffffff,
    3px -3px 0 #ffffff,
    -3px 3px 0 #ffffff,
    3px 0 0 #ffffff,
    -3px 0 0 #ffffff,
    0 3px 0 #ffffff,
    0 -3px 0 #ffffff;
}

/* 3つの理由共通 */
 /*タイトル*/
.reason-one-two {
    background-image: url(images/background.png);
    padding: 170px 0;
}
@media (max-width: 1000px) {
    .reason-one-two {
        padding-bottom: 1px;
    }
}
.reason-three-question {
    background-image: url(images/background.png);
}
.three-reasons-title {
    display: flex;
}
@media (max-width: 830px) {
    .three-reasons-title {
        flex-wrap: wrap;
        justify-content: center;
        margin-top: -14%;
    }
}
.three-reasons-title img {
    width: clamp(100px, 46vw, 341px);
    height: auto;
    object-fit: contain;
}
@media (max-width: 830px) {
    .three-reasons-title img {
    min-width: 341px;
    height: auto;
    }
}
.three-reasons-title-explain {
    margin-top: 20px;
    margin-left: 70px;
}
@media (max-width: 830px) {
    .three-reasons-title-explain {
        margin: 5% 3% 0% 3%;
    }
}
.three-reasons-title-explain h2 {
    font-size: clamp(16px, 2.1vw, 35px);
    padding: 15px;
    color: #ffffff;
}
.three-reasons-title-explain p {
    margin-top: 30px;
    letter-spacing: 0.3em;
    line-height: 2em;
    font-weight: 500;
}
 /*体験*/
  /* メモ帳 */
.lesson-experience {
    position: relative;
    z-index: 1;
}
.lesson-experience::after {
    position: absolute;
    content: url(images/memopad_left.png);
    height: 100%;
    width: 100%;
    top: 0%;
    left: 0%;
    z-index: -1;
}
@media (max-width: 881px) {
    .lesson-experience::after {
        content: "";
        background-color: #F8F7F5;
    }
}
.lesson-experience-studyabroad {
    position: relative;
    z-index:  1;
}
.lesson-experience-studyabroad::after {
    position: absolute;
    content: url(images/memopad_right.png);
    height: 100%;
    width: 100%;
    top: 0%;
    left: 0%;
    z-index: -1;   
}
@media (max-width: 881px) {
    .lesson-experience-studyabroad::after {
        content: "";
        background-color: #F8F7F5;
    }
}
.title-name {
    margin-top: 4%;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
@media (max-width: 925px) {
    .title-name {
        display: grid;
        justify-content: center;
    }
}
.lesson-experience-contents {
    display: flex;
    justify-content: center;
}
@media (max-width: 881px) {
    .lesson-experience-contents {
    padding-bottom: 50px;
    display: grid;
    justify-content: center;
    }
}
.title-name-text {
    margin: 4% 4% 5% 6%;
    max-width: 730px;
}
@media (max-width: 1180px) {
    .title-name-text {
        margin-left: 10%;
    }
}
.title-name-text-studyabroad {
    margin: 4% 4% 5% 6%;
    max-width: 730px;
}
.title-name .lesson-experience-title {
    font-size: clamp(16px, 2.7vw, 35px);
    white-space: nowrap;
    position: relative;
    font-weight: 500;
    z-index: 0;
}
@media (max-width: 881px) {
    .title-name .lesson-experience-title {
    font-size: clamp(16px, 5vw, 35px);
    }
}
.title-name .lesson-experience-title::before {
    position: absolute;
    content: "";
    background-color: #d6f5fb; /* 四角形の色を設定 */
    height: 0.5em; /* h3よりも大きい四角形の高さを設定 */
    width: 13em; /* 必要に応じて幅を調整 */
    top: 76%; /* h3の高さに対する位置を調整 */
    transform: translateY(-50%); /* 四角形を中央に揃える */
    z-index: -1; /* 四角形をh3の背後に配置 */
}
.title-name .study-abroad-experience-title {
    font-size: clamp(16px, 2.7vw, 35px);
    white-space: nowrap;
    position: relative;
    font-weight: 500;
    z-index: 0;
}
@media (max-width: 881px) {
    .title-name .study-abroad-experience-title {
    font-size: clamp(16px, 5vw, 35px);
    }
}
.title-name .study-abroad-experience-title::before {
    position: absolute;
    content: "";
    background-color: #fadbd9; /* 四角形の色を設定 */
    height: 0.5em; /* h3よりも大きい四角形の高さを設定 */
    width: 12em; /* 必要に応じて幅を調整 */
    top: 76%; /* h3の高さに対する位置を調整 */
    transform: translateY(-50%); /* 四角形を中央に揃える */
    z-index: -1; /* 四角形をh3の背後に配置 */
}
.title-name .job-hunting-experience-title {
    font-size: clamp(16px, 2.7vw, 35px);
    white-space: nowrap;
    position: relative;
    font-weight: 500;
    z-index: 0;    
}
@media (max-width: 881px) {
    .title-name .job-hunting-experience-title {
    font-size: clamp(16px, 5vw, 35px);
    text-align: center;
    }
}
.title-name .job-hunting-experience-title::before {
    position: absolute;
    content: "";
    background-color: #dbfad9; /* 四角形の色を設定 */
    height: 0.5em; /* h3よりも大きい四角形の高さを設定 */
    width: 7.7em; /* 必要に応じて幅を調整 */
    top: 76%; /* h3の高さに対する位置を調整 */
    transform: translateY(-50%); /* 四角形を中央に揃える */
    z-index: -1; /* 四角形をh3の背後に配置 */
}
.title-name p {
    font-size: clamp(14px, 2.4vw, 20px);
    font-weight: 500;
    white-space: nowrap;
}
@media (max-width: 925px) {
    .title-name p {
        margin-top: 3%;
        text-align: right;
    }
}
.title-name-text .text, .title-name-text-studyabroad .text {
    margin-top: 6%;
    line-height: 2em;
}
.lesson-experience-contents img {
    margin-top: 5%;
    object-fit: contain;
}
@media (max-width: 881px) {
    .lesson-experience-contents img {
        margin: 0 auto;
    }
}

/* reason-one */
#reason-one {
    margin-bottom: 250px;
}
@media (max-width: 750px) {
    #reason-one {
        margin-bottom: 25%;
    }
}
#reason-one .three-reasons-title-explain h2{
    background-color: #5ecadf;
}
.three-department {
    margin: 100px 0;
    display: flex;
    justify-content: space-between;
}
@media (max-width: 750px) {
    .three-department {
        display: grid;
        justify-content: center;
    }
}
.three-department img {
    width: clamp(100px, 32vw, 377px);
    height: auto;
}
@media (max-width: 750px) {
    .three-department img {
        width: clamp(375px, 51vw, 377px);
        height: auto;
    }
}
.three-department p {
    width: clamp(16px, 30vw, 344px);
}
@media (max-width: 750px) {
    .three-department p {
        width: clamp(344px, 51vw, 344px);
    }
}
.eng-department {
    background-color: #dbfad9;
    width: clamp(100px, 32vw, 377px);
}
.jpn-department {
    background-color: #fee7e4;
    width: clamp(100px, 32vw, 377px);
}
@media (max-width: 750px) {
    .jpn-department {
        margin: 50px 0;
    }
}
.hst-department {
    background-color: #fcfdc6;
    width: clamp(100px, 32vw, 377px);
}
@media (max-width: 750px) {
    .eng-department, .jpn-department, .hst-department {
        width: clamp(375px, 51vw, 377px);
        height: auto;
    }
}
.eng-department h3, .jpn-department h3, .hst-department h3{
    margin: 20px 0;
    font-size: clamp(16px, 2.4vw, 30px);
    white-space: nowrap;
    padding: 5px;
    color: #ffffff;
}
.eng-department h3 {
    background-color: #71c66b;
}
.jpn-department h3 {
    background-color: #f5897b;
}
.hst-department h3 {
    background-color: #bbac72;
}
.eng-department p, .jpn-department p, .hst-department p {
    margin: 0 10px 20px 10px;
    line-height: 1.8em;
}

/* reason-two */
#reason-two {
    margin-bottom: 100px;
}
#reason-two .three-reasons-title-explain h2{
    background-color: #e6aaa6;
}
.overseas-uni {
    margin: 100px 0;
    display: flex;
    justify-content: space-between;
}
@media (max-width: 750px) {
    .overseas-uni {
        flex-wrap: wrap;
        display: grid;
        justify-content: center;
    }
}
.overseas-uni img {
    width: clamp(100px, 32vw, 365px);
    height: auto;
}
@media (max-width: 750px) {
    .overseas-uni img {
        width: 100%;
    }
}
@media (max-width: 750px) {
.overseas-uni .eng {
        margin: 50px 0;
     }
}
.overseas-uni p {
    font-size: clamp(10px, 1vw, 14px);
    letter-spacing: 0.1em;
    text-align: right;
}

/* button */
#button {
    background-color: #f9fcdb;
    box-shadow: 3px 4px 9px rgba(77, 77, 77, 0.26);
    display: flex;
    justify-content: center;
}
@media (max-width: 1000px) {
    #button {
        display: none;
    }
}
#button img {
    width: clamp(200px, 37.4vw, 476px);
    height: auto;
    margin-top: -50px;
    margin-right: 25px;
    max-width: 100%;
}
#button h2 {
    margin-top: -3%;
    font-size: clamp(16px, 4.4vw, 45px);
    white-space: nowrap;
    font-weight: 700;
    text-shadow: 
    1px 1px 0 #f9fcdb,
    -1px -1px 0 #f9fcdb,
    1px -1px 0 #f9fcdb,
    -1px 1px 0 #f9fcdb,
    2px 2px 0 #f9fcdb,
    -2px -2px 0 #f9fcdb,
    2px -2px 0 #f9fcdb,
    -2px 2px 0 #f9fcdb,
    2px 0 0 #f9fcdb,
    -2px 0 0 #f9fcdb,
    0 2px 0 #f9fcdb,
    0 -2px 0 #f9fcdb,
    3px 3px 0 #f9fcdb,
    -3px -3px 0 #f9fcdb,
    3px -3px 0 #f9fcdb,
    -3px 3px 0 #f9fcdb,
    3px 0 0 #f9fcdb,
    -3px 0 0 #f9fcdb,
    0 3px 0 #f9fcdb,
    0 -3px 0 #f9fcdb;
}
#button .date {
    font-size: clamp(16px, 5.4vw, 75px);
    font-weight: 700;
}
.day-2 {
    font-size: 37px;
}
.day-2 span {
    color: #fc8bab;
}
.date-time-2 {
    padding: 20px 0;
    display: flex;
    align-items: flex-end;
}
.time {
    font-size: clamp(16px, 5.4vw, 64px);
    font-weight: 500;
    white-space: nowrap;
}
#button a {
    display: block;
    width: 100%;
    height: 130px;
    padding: 43px 32px;
    font-size: clamp(16px, 5.4vw, 43px);
    white-space: nowrap;
    color: #ffffff;
    letter-spacing: 0.1em;
    font-weight: 600;
    background-color: #78d877;
    border-radius: 7px;
    box-shadow: 0 5px 0 0 #53944e;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#button a:hover {
    transform: translateY(4px);
    box-shadow: 0 2px 0 0 #53944e;
}
#button .note {
    margin-top: 4%;
}

/*reason-three*/
#reason-three {
    padding: 120px 0 150px 0;
}
#reason-three .three-reasons-title-explain h2{
    background-color: #8bd487;
}
#reason-three .support-program {
    margin: 100px 0 120px 0;
    text-align: center;
    font-size: clamp(16px, 4.7vw, 35px);
    position: relative;
}
#reason-three .support-program::before {
    position: absolute;
    content: url(images/jobhunting_program_titledecoration.png);
    height: 100%;
    width: 100%;
    top: -113%;
    left: 0%;
}
@media (max-width: 750px) {
    #reason-three .support-program::before {
        position: absolute;
        content: "";
        top: 70%;
        left: 49%;
        width: 102%;
        height: 327%;
        background-image: url(images/jobhunting_program_titledecoration.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transform: translate(-50%, -50%);
    }
}
.three-steps {
    margin-bottom: 100px;
    display: flex;
    justify-content: space-between;
}
@media (max-width: 1120px) {
    .three-steps {
    display: grid;
    justify-content: center;
    }
}
.program-two {
    margin-top: 67px;
}
@media (max-width: 1120px) {
    .program-two {
    margin: 50px 0;
    }
}
.program-three {
    margin-top: 134px;
}
@media (max-width: 1120px) {
    .program-three {
    margin-top: 0px;
    }
}
.three-steps h4 {
    width: clamp(100px, 98vw, 367px);
    font-size: 30px;
    margin: 30px 0;
    text-align: center;
}
.three-steps p {
    width: clamp(100px, 29vw, 367px);
    line-height: 2em;
}
@media (max-width: 1120px) {
    .three-steps p {
    width: clamp(100px, 97vw, 367px);;
    }
}

/* question */
#question {
    padding-bottom: 100px;
}
@media (max-width: 1180px) {
    #question .container {
        width: 100%;
        max-width: 100%;
        padding-left: 10px; /* 必要に応じて調整 */
        padding-right: 10px; /* 必要に応じて調整 */
    }
}
#question h2 {
    font-size: clamp(25px, 2.5vw, 35px);
    font-weight: 500;
    text-align: center;
    padding: 100px 0;
    line-height: 1.3em;
    position: relative;
}
#question h2::before {
    content: "";
    position: absolute;
    top: 30%;
    left: 50%;
    width: 54%;
    height: 100%;
    background-image: url(images/top_brackets2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translate(-50%, -50%);
    z-index: 1;
}
@media (max-width: 750px) {
    #question h2::before {
        width: 100%;
    }
}
#question h2::after {
    content: "";
    position: absolute;
    top: 69%;
    left: 50%;
    width: 54%;
    height: 100%;
    background-image: url(images/bottom_brackets2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translate(-50%, -50%);
    z-index: 1;
}
@media (max-width: 750px) {
    #question h2::after {
        width: 100%;
    }
}
#question h2 span {
    font-weight: 500;
    color: #fdad1f;
}
#question h3 {
    font-size: clamp(16px, 2.4vw, 20px);
    position: relative;
    z-index: 2;
}
@media (max-width: 750px) {
    #question h3 {
        padding: 0 2%;
    }
}
#question h3::before {
    content: "Q";
    font-size: 145%;
    color: #ffffff;
    background-color: #f5ca7b;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.5em; /* 背景のサイズを調整 */
    height: 1.5em; /* 背景のサイズを調整 */
    margin-right: 0.5em; /* Qとテキストの間にスペースを追加 */
}
#question h3::after {
    position: absolute;
    content: "";
    background-color: #e0dffe;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    top: -41%;
    left: -2%;
    width: 100%;
    height: 200%;
    z-index: -1;
}
.question-answer {
    display: flex;
    flex-direction: column;
    align-items: center; /* 全体を中央に寄せる */
}
.question-answer h3, .question-answer p {
    text-align: left; /* テキストを左揃え */
    max-width: 1180px; /* 必要に応じて幅を調整 */
}
.question-answer-contents {
    margin: 40px 0 100px 0;
    width: 100%;
    max-width: 1180px;
}
.question-answer p {
    padding: 5% 3% 0 2%;
    position: relative;
    z-index: 1;
}
@media (max-width: 750px) {
    .question-answer p {
        padding: 18% 3% 0 2%;
        line-height: 1.6em;
    }
}
.question-answer p::after {
    position: absolute;
    content: "";
    background-color: #f4f4f4;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    top: -41%;
    left: -2%;
    width: 100%;
    height: 200%;
    z-index: -1;
}
@media (max-width: 750px) {
    .question-answer p::after {
        height: 180%;
    }
}

/* footer */
footer {
    height: 90px;
    background-color: #ecf9fc;
    text-align: center;
    display: flex;
    align-items: center; /* 上下中央揃え */
}
@media (max-width: 750px) {
    footer {
        margin-bottom: 60px;
    }
}

/* fixed-button */
#fixed-button a {
    display: none;
}
@media (max-width: 750px) {
    #fixed-button a {
        display: block;
        position: fixed;
        width: 100%;
        height: auto;
        bottom: 0px;
        z-index: 99;
        padding: 6% 10%;
        font-size: clamp(16px, 5.4vw, 43px);
        white-space: nowrap;
        color: #ffffff;
        letter-spacing: 0.1em;
        font-weight: 600;
        background-color: #78d877;
        box-shadow: 0 5px 0 0 #53944e;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    #fixed-button a:hover {
        transform: translateY(4px);
        box-shadow: 0 2px 0 0 #53944e;
    }
}

/* 動き */
/* 下からふわっと現れる動き */
.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(100px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* 左から時間差でふわっと上がってくる動き */
/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box{
	opacity: 0;
}

/*==================================================
動かしたい動き（今回は” ふわっ” を採用）
===================================*/

.fadeUp {
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
    animation-name:fadeLeftAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeLeftAnime{
      from {
        opacity: 0;
      transform: translateX(-100px);
      }
    
      to {
        opacity: 1;
      transform: translateX(0);
      }
    }