@charset "UTF-8";

/* -------------------------------
SF型

.section_inrは不要（あっても無害）
------------------------------- */

/* CSS Document */
:root {
    --preset--color--main: #E83D6D;
    --preset--color--accent: #515CCF;
    --preset--color--accent-2: #EFEC09;
    --preset--color--gray: #cccccc;
    --preset--color--sumi-200: #E8E8EB;
    --preset--color--sumi-50: #F8F8FB;
    --preset--color--base: #ffffff;
    --preset--color--contrast: #000000;
    --preset--color--cta: #000000;
    --preset--color--link: #3399ff;
    --preset--color--link-hover: #ff6600;
    --preset--color--btn: #00c12d;

    --preset--spacing--10: 10px;
    --preset--spacing--20: clamp(1rem, 0.8555rem + 0.6163vw, 1.25rem);
    --preset--spacing--30: clamp(1.25rem, 0.8889rem + 1.5408vw, 1.875rem);
    --preset--spacing--50: clamp(1.875rem, 1.1527rem + 3.0817vw, 3.125rem);
    --preset--spacing--70: clamp(3.125rem, 2.4027rem + 3.0817vw, 4.375rem);
    --preset--spacing--100: clamp(4.375rem, 3.2916rem + 4.6225vw, 6.25rem);

    --preset--font-size--body: clamp(0.875rem, 0.8021rem + 0.3333vw, 1rem);
    /* 16-14px */
    --preset--font-size--h2: clamp(2rem, 1.3438rem + 3vw, 3.125rem);
    /* 50-32px */
    --preset--font-size--h3: clamp(1.5rem, 1.1739rem + 1.3913vw, 2rem);
    /* 32-24px */
    --preset--font-size--h4: clamp(1.375rem, 1.1304rem + 1.0435vw, 1.75rem);
    /* 28-22px */
    --preset--font-size--h5: clamp(1.125rem, 0.962rem + 0.6957vw, 1.375rem);
    /* 22-18px */
}

/* -------------------------------
基本設定
------------------------------- */

/* body全体の初期スタイル */
body {
    font-family: "Noto Sans JP", sans-serif;
    font-size: var(--preset--font-size--body);
    font-weight: 400;
    background-color: var(--preset--color--sumi-200);
    margin: 0;
}
@media screen and (min-width: 1024px) {
    body {
        background-attachment: fixed;
        background-image: url(../images/bg_ballet.png);
        background-position: right bottom;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

img {
    display: block;
    /* imgの下に余計な空白が入るのを防ぐ */
    width: 100%;
}

/* リンク文字の設定 */
a {
    text-decoration: none;
}

.smalltext {
    font-size: 0.8rem;
}

/* -------------------------------
見出しタグ設定
------------------------------- */

h1,
h2,
h3,
h4,
h5 {
    font-weight: 700;
    line-height: 1.5;
    min-height: 0vw;
    /* clampをSafariで機能させるため */
}

h2 {
    font-size: var(--preset--font-size--h2);
    margin-bottom: var(--preset--spacing--50);
    margin-top: var(--preset--spacing--70);
    text-align: center;
}

h3 {
    font-size: var(--preset--font-size--h3);
    margin-bottom: var(--preset--spacing--30);
    margin-top: var(--preset--spacing--50);
}

h4 {
    font-size: var(--preset--font-size--h4);
    margin-bottom: var(--preset--spacing--20);
    margin-top: var(--preset--spacing--30);
}

h5 {
    font-size: var(--preset--font-size--h5);
    margin-bottom: var(--preset--spacing--20);
    margin-top: var(--preset--spacing--30);
}

/* -------------------------------
全体レイアウト／背景設定
------------------------------- */

/* 全体エリア */
/* main {
    background-color: var(--preset--color--sumi-200);
} */


/* 記事（ボディ）エリア */
article {
    background-color: var(--preset--color--cta);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.35);
}

article p {
    line-height: 1.7;
}

article p:first-of-type {
    margin-top: 0;
}

/* 全体の幅を設定する */
article,
.header_inr,
.top_image_in,
.footer_inr {
    margin: 0 auto;
    width: 700px;
}
@media screen and (max-width: 699px) {
    article,
    .header_inr,
    .top_image_in,
    .footer_inr {
        width: 100%;
    }
    .header_inr {
        padding: 0 var(--preset--spacing--20);
    }    
}

section {
    padding: var(--preset--spacing--50) var(--preset--spacing--20);
}

section h2:first-of-type {
    margin-top: 0;
}

/* ボタン */
.wrap_btn a:hover {
    opacity: 0.9;
}

/* 強調テキスト */
.emphasize_phrase {
    background-image: linear-gradient(rgba(0 0 0 / 0) 70%,
            var(--preset--color--main) 70%);
    font-weight: 700;
}

/* -------------------------------
上部固定ヘッダー設定
------------------------------- */

/* 上部固定ヘッダー全体 */
header {
    height: clamp(50px, 10vw, 80px);
    background-color: var(--preset--color--base);
    border-bottom: 1px solid var(--preset--color--gray);
}

@media screen and (min-width: 768px) {
    header {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        z-index: 5000;
        /* background-color: rgba(0, 0, 0, 0.7); */
    }
}

/* ヘッダー内部 */
.header_inr {
    align-items: center;
    display: flex;
    gap: 10px;
    height: 100%;
}

.header_inr img {
    width: 100%;
}

.header_logo {
    margin-right: auto;
    max-width: 180px;
}

.header_btns {
    align-items: center;
    display: flex;
    gap: var(--preset--spacing--20);
}

@media screen and (max-width: 767px) {
    .header_btns {
        gap: 10px;
    }
}

.header_btns .wrap_btn {
    max-width: 220px;
    min-width: 120px;
}

/* -------------------------------
section別設定
------------------------------- */

/* CTA */

.area_cta {
    background-color: var(--preset--color--cta);
    padding-bottom: var(--preset--spacing--30);
    padding-top: var(--preset--spacing--30);
}

.cta_btns {
    align-items: center;
    display: flex;
    gap: var(--preset--spacing--30);
    justify-content: center;
    padding-top: var(--preset--spacing--30);
}

.cta_microcopy {
    margin: 0 auto;
    max-width: 500px;
}

/* 写真ギャラリー */
.sec_gallery {
    padding: 0;
}

/* 3つの特長 */
.sec_points {
    background-color: var(--preset--color--base);
    padding: 0;
}

.sec_points h2 {
    margin-bottom: var(--preset--spacing--30);
}

/* アクセス */
.sec_access {
    background-image: url(../images/bg_white.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.sec_access h2 {
    margin-bottom: var(--preset--spacing--30);
}

iframe.googlemap {
    height: 560px;
    width: 100%;
}

/* 教室紹介 */
.sec_classes {
    background-image: url(../images/bg_purple.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.sec_classes h2 {
    margin-bottom: var(--preset--spacing--30);
}

.wrap_classes {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
}

.class_item {
    background-color: var(--preset--color--base);
    border: 1px solid var(--preset--color--gray);
    padding: 10px;
    
}

.class_item img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.class_item p {
    color: var(--preset--color--contrast);
    font-weight: 700;
    margin: 10px 0 0;
}

.class_schedule {
    margin-top: var(--preset--spacing--30);
}

/* よくある質問 */

.sec_faq {
    background-image: url(../images/bg_red.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.faq_item {
    background-color: var(--preset--color--base);
    border-radius: 10px;
    margin-top: var(--preset--spacing--30);
    padding: 10px;
}

.faq_q h4 {
    font-size: var(--preset--font-size--h5);
    margin: 0;
}

.faq_a {
    margin-top: var(--preset--spacing--20);
}

.faq_a p {
    margin: 0;
}

.faq_q,
.faq_a {
    display: flex;
    gap: var(--preset--spacing--20);
}

.faq_q_img,
.faq_a_img {
    flex-shrink: 0;
    width: 28px;
}

.faq_q_img {
    margin-top: 2px;
}

.faq_a_img {
    margin-top: 0.5em;
}

/* 下部CTA */
.cta_footer {
    padding-top: var(--preset--spacing--50);
}

.cta_footer_img {
    margin-top: var(--preset--spacing--50);
}

/*--------------------------------------------------
スマホ用下部固定フッター（PCは非表示）
https://lpdesignermasterschool.com/
アニメーションの指定は「上へ戻るボタン」と一緒にcommon.cssに
-----------------------------------------------------*/

#fix_menu_smartphone {
    display: none;
}

@media screen and (max-width: 767px) {
    #fix_menu_smartphone {
        align-items: center;
        background-color: var(--preset--color--btn);
        bottom: 0px;
        box-shadow: 0px 0px 3px #594a42;
        display: flex;
        left: 0px;
        position: fixed;
        width: 100%;
        z-index: 10000;
        /*はじめは非表示*/
        opacity: 0;
        transform: translateY(100px);
    }

    #fix_menu_smartphone a {
        padding: 1em;
        margin: 0 auto;
    }

    #fix_menu_smartphone img {
        max-width: 300px;
    }


    /* footer下スペース広げる */
    footer {
        margin-bottom: 4em;
    }
}

/* -------------------------------
フッター部分
------------------------------- */

.footer_inr {
    background-color: var(--preset--color--cta);
    color: var(--preset--color--base);
    padding: var(--preset--spacing--20) 0;
    text-align: center;
}

footer a {
    color: var(--preset--color--base);
}