@charset "utf-8";
/* CSS Document */

/* Iolani Summer School 見出しの影 */
h1 {
    text-shadow:
        0 2px 3px rgba(0, 0, 0, 0.22),
        0 5px 10px rgba(0, 0, 0, 0.12);
}

/* =====================================================
   学校ページ内の角丸をすべて解除
   ===================================================== */

main * {
    border-radius: 0 !important;
}

/* =====================================================
   SCHOOL PAGE
   画像・枠を四角 ＋ 上品な影
   ===================================================== */

/* すべての画像 */
main img {
    border-radius: 0 !important;

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.16),
        0 12px 28px rgba(0, 0, 0, 0.08) !important;
}


/* 各種ボックス・枠 */
.card,
.school-card,
.info-box,
.content-box,
.photo-box,
.image-box,
.logo-box,
.support-box,
.section-box {
    border-radius: 0 !important;

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.14),
        0 12px 28px rgba(0, 0, 0, 0.07) !important;
}

/* =====================================================
   Good_points.png
   透明PNGの四角い影を消して、
   絵柄そのものに影を付ける
   ===================================================== */

main img.support-title-image {
    /* main img に付けた四角い影を解除 */
    box-shadow: none !important;

    /* 背景も透明 */
    background: transparent !important;

    /* 角丸もなし */
    border-radius: 0 !important;

    /* PNGの絵柄に沿って影を付ける */
    filter:
        drop-shadow(0 4px 5px rgba(0, 0, 0, 0.18))
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.08)) !important;
}

/* =====================================================
   HAWAII SUMMER SCHOOL
   文字の前後にゴールドのライン
   ===================================================== */

.iolani-label {
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
}

/* 左右の線 */
.iolani-label::before,
.iolani-label::after {
    content: "";
    display: block;

    width: 32px;
    height: 1px;

    background: #c9a227;
    flex-shrink: 0;
}


/* Iolani Summer School 文字間隔を少し詰める */
.iolani-title h1 {
    letter-spacing: -0.05em !important;
}

/* =====================================================
   OFFICIAL CATALOG
   BaseのGreenbox_long1.pngを背景に
   ===================================================== */

.catalog-box {
    background:
        url("../../Base/Greenbox_long1.png")
        center bottom / cover
        no-repeat !important;

    border-radius: 0 !important;
}

/* =====================================================
   無料相談・お問い合わせ
   obi_b1.jpg を背景に
   ===================================================== */

.iolani-cta-button {
    background:
        url("../../Base/obi_b1.jpg")
        center center / cover
        no-repeat !important;

    color: #ffffff !important;

    border-radius: 0 !important;

    border: 1px solid rgba(255,255,255,0.45);

    text-shadow:
        0 2px 4px rgba(0,0,0,0.45);

    box-shadow:
        0 6px 16px rgba(30,79,66,0.20);
}

.iolani-cta-button:hover {
    background:
        url("../../../Base/obi_b1.jpg")
        center center / cover
        no-repeat !important;

    color: #d8b765 !important;

    transform: translateY(-2px);
}


/* =====================================================
   2026年度情報
   goldbox_longpsd.png を背景に
   ===================================================== */

.iolani-notice {
    background:
        url("../../Base/goldbox_longpsd.png")
        left center / cover
        no-repeat !important;

    border-radius: 0 !important;
    border-left: none !important;

    color: #514b36 !important;

    /* 左側だけ広くして文字を右へ */
    padding: 28px 70px 28px 90px !important;

    box-shadow:
        0 6px 18px rgba(80, 70, 35, 0.12) !important;
}


/* 2026年度情報 */
.iolani-notice strong {
    color: #a21f1f !important;
    font-size: 18px !important;
    font-weight: 700 !important;
	  position: relative;
    top: -15px;
}

/* =====================================================
   SECTION 英字見出し
   左右 ＋ 下にゴールドライン
   ===================================================== */

.iolani-section-heading small {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: fit-content;
    margin: 0 auto 28px !important;

    gap: 14px;

    position: relative;

    color: #a88642 !important;
}


/* 左右の線 */
.iolani-section-heading small::before,
.iolani-section-heading small::after {
    content: "";

    display: block;

    width: 30px;
    height: 1px;

    background: #c9a227;

    opacity: 0.55;

    flex-shrink: 0;
}


/* 下の中央の線 */
.iolani-section-heading small {
    padding-bottom: 24px;
}


/* 下線 */
.iolani-section-heading small::after {
    /* 右線として使用するのでここはそのまま */
}


/* 下の線を別に作る */
.iolani-section-heading {
    position: relative;
}

.iolani-section-heading small + h2::before {
    content: "";

    display: block;

    width: 70px;
    height: 1px;

    margin: -12px auto 20px;

    background: #c9a227;

    opacity: 0.35;
}

/* =====================================================
   Iolani ロゴ
   四角い影を消して画像自体に影
   ===================================================== */

/* Iolani ヒーローロゴ */
.iolani-hero-logo {
    display: block !important;

    /* 少し小さく */
    width: 200px !important;
    max-width: 170px !important;
    height: auto !important;

    /* 四角い影を完全に消す */
    box-shadow: none !important;

    /* 白い枠・背景を作らない */
    border: none !important;
    background: transparent !important;

    /* 画像の形に沿った影 */
    filter:
        drop-shadow(0 3px 4px rgba(0, 0, 0, 0.18))
        drop-shadow(0 7px 10px rgba(0, 0, 0, 0.10)) !important;

    margin: 0 0 10px 0 !important;
}



/* =====================================================
   サポートの流れを見る
   モンステラ背景ボタン
   ===================================================== */

.support-flow-link {
    margin-top: 2cm;
    text-align: center;
}

.support-flow-link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 360px;
    max-width: 85%;
    min-height: 70px;
    padding: 12px 30px;

    /* モンステラ画像 */
    background:
        url("../../Base/Greenmonstera_small.png")
        center center / cover
        no-repeat;

    color: #ffffff;

    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 0;

    font-family: Montserrat, "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.08em;

    text-decoration: none;

    text-shadow:
        0 2px 4px rgba(0,0,0,0.25);

    box-shadow:
        0 6px 16px rgba(30,79,66,0.18);

    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* マウスオーバー */
.support-flow-link a:hover {
    color: #d8b765;

    border-color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(30,79,66,0.25),
        0 0 0 1px rgba(255,255,255,0.35);
}






  /* =====================================================
   SUMMER SCHOOL ONLY
   HEADER LOGO
   ===================================================== */

/* PC */
body .header .logo img {
    width: 130px !important;
    max-width: 130px !important;
    height: auto !important;
    max-height: auto !important;
}

body .header .logo {
    transform: translateY(5px) !important;
}


/* タブレット */
@media (max-width: 900px) {

    body .header .logo img {
        width: 130px !important;
        max-width: 130px !important;
        height: auto !important;
        max-height: auto !important;
    }

    body .header .logo {
        transform: translateY(5px) !important;
    }
}


/* スマートフォン */
@media (max-width: 600px) {

    body .header .logo img {
        width: 100px !important;
        max-width: 100px !important;
        height: auto !important;
        max-height: auto !important;
    }

    body .header .logo {
        transform: translateY(3px) !important;
    }
}