/*
Theme Name: Lightning Child Sample
Theme URI:
Template: lightning
Description:
Author:
Tags:
Version: 0.6.1
*/

/* ============================
   フォント設定
   ==============================*/
body {
    font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* ============================
   ローディング画面
   ==============================*/
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f7f6f5;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader {
    width: 60px;
    height: 60px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader:before,
.loader:after {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid transparent;
}

.loader:before {
    border-top: 3px solid #9aded7;
    border-right: 3px solid #9aded7;
    animation: spinLoader 1.2s linear infinite;
}

.loader:after {
    border-bottom: 3px solid #b9aa94;
    border-left: 3px solid #b9aa94;
    animation: spinLoader 1.2s linear infinite reverse;
}

@keyframes spinLoader {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

body.loaded #loading {
    display: none;
}

@keyframes blurAnime {
    from {
        filter: blur(10px);
        transform: scale(1.02);
    }
    to {
        filter: blur(0);
        transform: scale(1);
    }
}

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

/* ============================
   フローティングボタン
   ==============================*/
.floating_btn {
    writing-mode: vertical-lr;
    position: fixed;
    top: 26%;
    right: -3px;
    z-index: 9998;
}

a.floating_link.vk_button_link.btn.has-background.btn-md {
    padding: 0;
    height: 43px;
}

.vk_button .vk_button_link, 
.editor-styles-wrapper .vk_button .vk_button_link {
    min-width: 45px;
}

i.floating_i:before {
    position: absolute;
    top: 8px;
    right: 10px;
}

.vk_button.vk_button-align-wide {
    width: unset;
}

span.floating_text.vk_button_link_txt {
    position: absolute;
    top: 65px;
    right: 12px;
}

        /* CTAボタンコンテナ - 右端固定 */
        .cta-container {
            position: fixed;
            right: 0px;
            top: 45%;
            transform: translateY(-50%);
            z-index: 1000;
        }

        /* CTAボタン */
        .cta-button {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            background:#AEE2DD;
            color: white;
            padding: 20px 9px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: bold;
            font-size: 16px;
            transition: all 0.3s ease;
            cursor: pointer;
            border: none;
        }

        .cta-button > span:not(.cta-icon) {
            writing-mode: vertical-rl;
            text-orientation: upright;
            letter-spacing: 0.1em;
        }

        .cta-button:hover {
			color: white;
            transform: translateY(-3px);
            background: #bbaa95;
        }

        .cta-button:active {
            transform: translateY(-1px);
        }

        /* アイコン */
        .cta-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .cta-icon svg {
            width: 100%;
            height: 100%;
            fill: white;
        }


/* ============================
   ページトップボタン
   ==============================*/
.page_top_btn {
    position: fixed;
    right: 2%;
    bottom: 3%;
    z-index: 9998;
    width: 40px;
    height: 38px;
    color: transparent;
    border-radius: 50%;
    border: none;
    background: #b9aa94;
    box-shadow: unset;
    background-image: var(--ver_page_top_button_url);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity .3s;
    text-decoration: none;
}

/* ============================
   共通設定
   ==============================*/
.main-section--margin-bottom--on {
    margin-bottom: 0;
}

.grecaptcha-badge {
    bottom: 64px !important;
}

.grecaptcha-badge {
    bottom: 64px !important;
}

div#breadcrumb {
    display: none;
}

.site-body {
    padding: 0;
}

.wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-1.wp-block-columns-is-layout-flex {
    margin-bottom: unset;
}

/* ============================
   ヘッダー設定
   ==============================*/
/* トップページのヘッダー */
body.home header.site-header {
    background-color: rgb(247, 246, 245, 0);
    box-shadow: unset;
}

/* 固定ページのヘッダー */
body.page-id-54 header.site-header, 
body.page-id-255 header.site-header, 
body.page-id-228 header.site-header, 
body.page-id-8 header.site-header {
    background-color: #f7f6f5;
}

/* スクロール時のヘッダー */
.header_scrolled .site-header .global-nav {
    display: block;
    margin-left: auto;
    margin-right: 0;
}

.header_scrolled.admin-bar .site-header {
    top: 30px;
    background-color: #f7f6f5;
}

.page-header {
    display: none;
}

/* ============================
   見出し・タイトル設定
   ==============================*/
.heading {
    font-size: 34px;
    color: #4b555d;
    font-family: serif;
    padding: 0;
    border-top: unset;
    border-bottom: unset;
}

.heading span {
    display: flex;
    align-items: center;
    color: #b9aa94;
    font-size: 18px;
    text-transform: uppercase;
}

.heading span::before {
    content: '';
    display: inline-block;
    margin-right: 20px;
    width: 22px;
    height: 1px;
    background-color: #b9aa94;
}

h2.contents_title {
    font-size: 36px;
    font-family: serif;
}

p.has-text-align-center {
    font-family: serif;
}

p.sp-title {
    display: none;
}

/* ============================
   メインビュー設定
   ==============================*/
.ltg-slide picture img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

h3.ltg-slide-text-title {
    position: absolute;
    top: -50px;
    left: 5%;
    text-align: left !important;
    letter-spacing: 1.5px;
    line-height: 1.6;
    font-size: 1.6em;
    animation-name: blurAnime;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

p.has-text-align-left.miel_vision.has-text-color.has-link-color {
    font-size: 34px;
}

p.clay_text {
    padding: 40px;
}

.wp-block-columns.sp-clay.is-layout-flex.wp-container-core-columns-is-layout-28f84493.wp-block-columns-is-layout-flex {
    display: none;
}

.clay {
    position: relative;
    top: 80px;
    left: 30px;
}

/* ============================
   画像設定
   ==============================*/
img.wp-image-316 {
    border-radius: 5px;
}

/* ============================
   サービス一覧レイアウト
   ==============================*/
.wp-block-column.service-list.has-white-background-color.has-background.is-layout-flow.wp-block-column-is-layout-flow {
    margin-bottom: 30px;
    border-radius: 5px;
}

/* ============================
   Aboutページ設定
   ==============================*/
.wp-block-group.about_innner_background.is-layout-constrained.wp-block-group-is-layout-constrained {
    margin-top: 115px;
    opacity: 0.9;
}

.wp-block-group.is-style-vk-group-shadow.has-white-background-color.has-background.is-layout-constrained.wp-block-group-is-layout-constrained {
    padding: 80px 40px;
}

/* About見出しアニメーション */
p.has-text-align-left.concept.has-vk-color-custom-2-color.has-text-color.has-link-color {
    position: relative;
    opacity: 0;
    transform: translateY(100%);
    animation: fadeInFromBottom 1.8s forwards;
    margin: 100px 0 40px 0;
    font-size: 30px;
    line-height: 1.8;
}

p.about_text {
    position: relative;
    opacity: 0;
    transform: translateY(100%);
    animation: fadeInFromBottom 3.8s forwards;
    margin-bottom: 100px;
}

p.has-text-align-left.about_message.has-vk-color-custom-2-color.has-text-color.has-link-color {
    font-size: 20px;
    font-weight: bold;
}

/* About画像配置 */
.wp-block-columns.flex_item_right.is-layout-flex.wp-container-core-columns-is-layout-1.wp-block-columns-is-layout-flex,
.wp-block-columns.flex_item_right.is-layout-flex.wp-container-core-columns-is-layout-3.wp-block-columns-is-layout-flex {
    margin: 100px 0;
}

/* ============================
   スクールページ設定
   ==============================*/
/* 縦書きテキスト */
p.school_pc_ver {
    position: relative;
    font-family: serif;
    top: 28%;
    left: 34%;
    writing-mode: vertical-rl;
    font-size: 1.2rem;
}

span.horizontal-number {
    text-orientation: upright;
    color: #b9aa94;
    font-size: 1.4rem;
    font-weight: bold;
}

.school-background {
    padding: 100px 0;
}

/* スクールページタイトル */
h2.wp-block-heading.has-text-align-center.contents_title.is-style-vk-heading-plain.has-vk-color-custom-1-color.has-text-color.has-link-color {
    font-size: 34px;
    font-family: serif;
}

h2.wp-block-heading.has-text-align-center.contents_title.is-style-vk-heading-plain.has-vk-color-custom-1-color.has-text-color.has-link-color:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -15px;
    width: 30px;
    height: 2px;
    transform: translateX(-50%);
    background-color: #b8aa93;
}

h2.wp-block-heading.has-text-align-center.course-title.is-style-vk-heading-plain.has-vk-color-custom-1-color.has-text-color.has-link-color {
    font-size: 34px;
    font-family: serif;
}

h2.wp-block-heading.is-style-vk-heading-plain.course-title {
    margin: 0 0 15px 0;
    color: #b9aa94;
    font-size: 40px;
    font-family: serif;
    text-shadow: 3px 3px 1px #e5dfd5;
    letter-spacing: 1.5px;
}

/* スクールページ画像 */
img.wp-image-1976.lazyautosizes.ls-is-cached.lazyloaded {
    position: relative;
    left: 11%;
}

/* ============================
   タブ設定（スクールページ）
   ==============================*/
.tab-wrap {
    padding: 100px 0;
}

.tab-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-end;
}

.tab {
    flex-grow: 1;
    background: #B8AA93;
    border-radius: 8px 8px 0 0;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    font-family: serif;
    padding: 14px 0 12px;
    text-align: center;
    transition: 1s;
    vertical-align: bottom;
    opacity: 0.6;
}

.panel-group {
    min-height: 100px;
    border: solid 1px #B8AA93;
    border-top: 8px solid #B8AA93;
    border-radius: 0 0 8px 8px;
    padding: 40px 50px;
    background: #F7F6F5;
}

.panel {
    display: none;
}

.tab.is-active {
    color: #FFF;
    font-family: serif;
    transition: 1s;
    opacity: 1;
    padding-bottom: 20px;
}

.panel.is-show {
    display: block;
    color: #4B555D;
}

.tab.salon {
    opacity: 1;
}



/* ============================
   タブコンテンツ（スクールページ）
   ==============================*/
.main-title {
    font-size: 1.6em;
    padding: 15px 0;
    color: #B8AA93;
    font-family: serif;
    text-shadow: 3px 3px 1px #e5dfd5;
    letter-spacing: 1.5px;
}

br.school_title_pc_none {
    display: none;
}

.two-column-container {
    display: flex;
    justify-content: space-between;
    margin: 50px 0;
    padding: 0 50px;
}

.recommendation-section {
    margin-top: 75px;
}

.course-description {
    padding: 0 30px;
}

.recommendation-title-en, 
.benefits-title-en {
    font-size: 11px;
    font-weight: bold;
    color: #b8aa93;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
    padding-left: 5px;
}

.recommendation-title, 
.benefits-title {
    font-size: 1.2em;
    font-weight: normal;
    color: #6b6b6b;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 15px;
}

.recommendation-title::after, 
.benefits-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30%;
    height: 1px;
    background-color: #8b8b8b;
}

.recommendation-list {
    margin-top: 20px;
}

.recommendation-item, 
.benefit-item {
    font-size: 0.9rem;;
    margin: 0 30px;
    letter-spacing: 1.2px;
    line-height: 24px;
}

.price-amount {
    text-align: right;
    padding: 0 30px;
    color: #b8aa93;
    font-size: 20px;
    font-family: serif;
    font-weight: bold;
}

span.tax {
    font-size: 0.8em;
}

.for_salon {
    font-weight: bold;
}

/* ============================
   コンタクトページ設定
   ==============================*/
h2.wp-block-heading.is-style-vk-heading-background_fill_lightgray.has-vk-color-custom-2-color.has-text-color.has-background.has-link-color {
    margin-top: 70px;
}

/* ============================
   会社概要ページ設定
   ==============================*/
.wp-block-group.outline_detail.is-layout-constrained.wp-block-group-is-layout-constrained {
    margin-top: 100px;
}

p.outline_title {
    border-left: solid 3px #9ADED7;
    height: 30px;
    margin-block-end: 0 !important;
    padding-left: 10px;
    width: 100px;
}

.wp-block-group.outline_flex_pc.is-layout-constrained.wp-block-group-is-layout-constrained {
    border-bottom: solid 1px #b9aa94;
    display: flex;
    margin-top: 35px;
    padding-bottom: 35px;
}

.outline_right {
    margin-left: 100px !important;
}

p.outline_left {
    text-align: left;
    margin: 0 !important;
}

/* ============================
   フッター設定
   ==============================*/
.container.site-footer-copyright > p:nth-child(2) {
    display: none;
}

/* ============================
   レスポンシブ設定 - タブレット (max-width:991px)
   ==============================*/
@media screen and (max-width:991px) {
    /* ハンバーガーメニュー位置調整 */
    .admin-bar .vk-mobile-nav-menu-btn {
        top: calc(60px + 5px);
    }

    .vk-mobile-nav-menu-btn {
        background: var(--vk-mobile-nav-menu-btn-bg-src) center 50% no-repeat rgba(247, 246, 245,.8);
        position: fixed;
        left: unset;
        right: 9px;
        z-index: 2100;
        overflow: hidden;
        border: 1px solid #333;
        border-radius: 2px;
        width: 34px;
        height: 34px;
        cursor: pointer;
        text-indent: -9999px;
        background-size: 24px 24px;
        transition: border-color .5s ease-out;
    }

    p.has-text-align-left.concept.has-vk-color-custom-2-color.has-text-color.has-link-color {
        font-size: 26px;
        line-height: unset;
    }
	

 /* スクールページタテ文字 */
p.school_pc_ver {
    left: 65%;
}
	
 /* スクールページコースタブ調整 */
	.two-column-container {
    padding:0;
}
	br.school_title_pc_none {
    display: block;
}
	
	.panel-group {
    padding: 40px 30px;
}
	
.recommendation-item, .benefit-item {
    margin:0;
}
}

/* ============================
   レスポンシブ設定 - スマートフォン (max-width:781px)
   ==============================*/
@media screen and (max-width:781px) {
    /* ハンバーガーメニュー */
    .vk-mobile-nav-menu-btn {
        background: var(--vk-mobile-nav-menu-btn-bg-src) center 50% no-repeat;
        border: none;
    }

    /* clay表示切り替え */
    .clay {
        display: none;
    }

    /* メインビュータイトル切り替え */
    h3.ltg-slide-text-title {
        display: none;
    }

    p.sp-title {
        display: block;
        color: #615C55;
        font-weight: bold;
        font-size: 16px;
        margin: 40px 0 0 0;
        animation-name: blurAnime;
        animation-duration: 4s;
        animation-fill-mode: forwards;
    }

    /* what's clay コンテンツ切り替え */
    .wp-block-columns.sp-clay.is-layout-flex.wp-container-core-columns-is-layout-28f84493.wp-block-columns-is-layout-flex {
        display: block;
    }

    img.wp-image-1399 {
        margin-top: 40px;
    }

    .wp-block-columns.pc-clay.is-layout-flex.wp-container-core-columns-is-layout-28f84493.wp-block-columns-is-layout-flex {
        display: none;
    }

    /* ビジョンテキスト */
    p.has-text-align-left.miel_vision.has-text-color.has-link-color {
        font-size: 27px;
    }

    br.sp_none {
        display: none;
    }

    p.has-text-align-left.concept.has-vk-color-custom-2-color.has-text-color.has-link-color {
        font-size: 20px;
        line-height: unset;
    }

    /* about画像設定 */
    .alignwide, 
    .alignwide:is(.vk_slider,.wp-block-image,.wp-block-cover-image,.wp-block-cover) {
        width: unset;
        margin-left: unset;
        margin-right: unset;
        max-width: unset;
    }

    .wp-block-column.second.is-layout-flow.wp-block-column-is-layout-flow {
        order: -1;
    }

    .wp-block-group.about_innner_background.is-layout-constrained.wp-block-group-is-layout-constrained {
        margin-top: 0;
    }

    .wp-block-columns.flex_item_right.is-layout-flex.wp-container-core-columns-is-layout-1.wp-block-columns-is-layout-flex,
    .wp-block-columns.flex_item_left.is-layout-flex.wp-container-core-columns-is-layout-2.wp-block-columns-is-layout-flex,
    .wp-block-columns.flex_item_right.is-layout-flex.wp-container-core-columns-is-layout-3.wp-block-columns-is-layout-flex {
        gap: 0;
    }

    /* スクールステップフロー */
/*     figure.wp-block-image.aligncenter.size-full.stepflow_sp {
        display: block;
        padding: 3%;
    }

    figure.wp-block-image.aligncenter.size-large.stepflow_pc {
        display: none;
    }

    img.wp-image-1246 {
        margin-bottom: 50px;
    } */

/* スクールページデザイン */
	p.has-text-align-left.school_pc_ver.o-anim-ready.fadeIn.delay-500ms.slower {
    z-index: 9999;
}	

/* タブ設定（スマートフォン） */
	
.two-column-container {
    display: block;
	padding: 0 30px;
}
	
ul.recommendation-list {
    padding-bottom: 40px;
}
	
.main-title {
    font-size: 1.4em;
}

    .tab {
        padding: 10px 0 7px;
    }

    .tab.is-active {
        padding-bottom: 15px;
    }
	
    .tab {
        padding: 10px 0 7px;
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tab-group {
        gap: 2px;
    }
	
	.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 100%;
}
	
.tab.salon {
    margin-top: 100px;
}
	
/* ============================
CTA
==============================*/
	
.cta-container {
    right: 0px;
            }

.cta-button {
    padding: 14px 10px;
    font-size: 14px;
    gap: 8px;
            }

.cta-icon {
    width: 20px;
    height: 20px;
            }	
}

/* ============================
   レスポンシブ設定 - 小画面スマートフォン (max-width:440px)
   ==============================*/
@media screen and (max-width:440px) {
    /* メインビジョン */
    p.has-text-align-left.miel_vision.has-text-color.has-link-color {
        font-size: 20px;
    }

    br.sp_none {
        display: none;
    }

    h2.contents_title {
        font-size: 18px;
    }

    /* About見出し */
    p.has-text-align-left.concept.has-vk-color-custom-2-color.has-text-color.has-link-color {
        font-size: 18px;
        line-height: unset;
    }

    p.about_text {
        font-size: 12px;
    }

    .wp-block-column.second.is-layout-flow.wp-block-column-is-layout-flow {
        order: -1;
    }

    .wp-block-group.about_innner_background.is-layout-constrained.wp-block-group-is-layout-constrained {
        margin-top: 0;
    }

    .wp-block-group.is-style-vk-group-shadow.has-white-background-color.has-background.is-layout-constrained.wp-block-group-is-layout-constrained {
        padding: 10px 10px 20px;
    }

    /* 画像配置レイアウト */
    .wp-block-columns.flex_item_right.is-layout-flex.wp-container-core-columns-is-layout-2.wp-block-columns-is-layout-flex,
    .wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-3.wp-block-columns-is-layout-flex,
    .wp-block-columns.flex_item_right.is-layout-flex.wp-container-core-columns-is-layout-4.wp-block-columns-is-layout-flex {
        gap: 0;
    }

    /* スクールコンテンツ */
/*     span.text_gold {
        font-size: 20px;
    }

    p.has-text-align-left.has-vk-color-custom-1-color.has-text-color.has-link-color {
        font-size: 14px;
    }

    p.step_title {
        font-size: 18px;
    }

    p.flow-inner-title {
        font-size: 20px;
    } */
	
	p.has-text-align-left.school_pc_ver.fadeIn.delay-500ms.slower.o-anim-ready {
    padding: 10px;
}
	
	img.wp-image-1976.lazyautosizes.ls-is-cached.lazyloaded {
    top: -173px;
    left: -5%;
}
	
	p.school_pc_ver {
       top: 47%;
       left: 25px;
}
	
	.tab-wrap {
    padding: 0;
}
	
	.course-description {
    padding: 0;
}
	
	.two-column-container {
    padding: 0;
}
	
    .main-title {
    font-size: 1.1em;
}

    /* 会社概要レイアウト */
    .outline_right {
        margin-left: 0 !important;
    }

    .wp-block-group.outline_flex_pc.is-layout-constrained.wp-block-group-is-layout-constrained {
        display: block;
    }
}