@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

body {
	font-size: 16px;
	font-family: "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
}

@media not all and (min-width: 960px) {
	.l-header__inner {
		justify-content: center;		
	}
}
.l-fixHeader__logo {
	padding: 10px 0;
}


/* ******************** */
/* メインビジュアル 　　*/
/* ******************** */
.p-mainVisual__textLayer {
	justify-content: end;
	top: -10%;
	left: 0;
	transform: unset;
}

.p-mainVisual__slideTitle {
	font-weight: 600;
    font-size: min(100px, 11vw);
}

.p-mainVisual__slideText {
	font-size: min(32px, 3.4vw);
    margin-top: 0;
    font-weight: 600;
}


/* ******************** */
/* セクションタイトル 　*/
/* ******************** */
/* 全体の枠組み */
.design-title {
    margin-bottom: 60px;
}

/* 英語部分*/
.design-title .en {
    display: inline-block;
	font-size: 2em;
	font-weight: 700;
    line-height: 1;
    color: #000;
    position: relative; 
    
    /* 黄色いマーカーの設定 */
    background: linear-gradient(transparent 86%, #ffe500 60%);
    padding: 0 2px 3px;          
    margin-bottom: 30px;     /* 下の日本語との距離を確保 */
}

.design-title .en .large {
	font-size: .9em;
}

.design-title .en .small {
	font-size: .7em;
}

/* 中央の黒い短い線 */
.design-title .en::after {
    content: "";
    display: block;
    width: 48px;             /* 線の長さ */
    height: 2px;             /* 線の太さ */
    background-color: #000;  /* 線の色 */
    
    /* 線の位置調整 */
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}

/* 日本語部分 */
.design-title .jp {
    display: block;
    font-size: .55em;
    font-weight: 400;
}


/* ************************** */
/* 練習会・セレクション情報 　*/
/* ************************** */
.info-box-red {
    border: 1px solid var(--capbox-color);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

/* タイトル部分の調整 */
.info-box-red .cap_box_ttl {
	width: fit-content;
    padding: 4px 15px;
}

/* 中身の余白調整 */
.info-box-red .cap_box_content {
	border: unset !important;
}

/* ************************** */
/* クラブの特徴　　　　　　 　*/
/* ************************** */
.features figure {
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.features figure.is-style-photo_frame img {
	border: 10px solid #fff;
	box-shadow: none;
	height: 175px;
    object-fit: cover;
}


/* ************************** */
/* 無料体験（波型背景）　　 　*/
/* ************************** */
/* 波形セクションの土台 */
.wave-section {
    position: relative;
}

/* 上と下の波を作る共通設定 */
.wave-section::before,
.wave-section::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 5vw;
    background-repeat: no-repeat;
    background-size: 145% 100%;
    z-index: 99;
    pointer-events: none;
}

/* --- 上側の波 --- */
.wp-block-group.wave-section::before {
	height: 5vw;
    top: 0;
	transform: scaleX(-1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* --- 下側の波 --- */
.wave-section::after {
    bottom: -2px;
    transform: scaleY(-1); 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

.wave-section .swell-block-fullWide {
	padding-top: 10vw !important;
    padding-bottom: 10vw !important;
}

/* スマホでの微調整 */
@media screen and (max-width: 768px) {
    .wp-block-group.wave-section::before,
    .wave-section::after {
        height: 10vw;
    }
}


/* ************************** */
/* CLUB INFO 活動状況　　　 　*/
/* ************************** */
.info_table {
	max-width: 1000px;
}

.info_table.wp-block-table>table tr>:first-child:not(.-no1) {
	width: 30%;
}


/* ************************** */
/* 申し込みフォーム　　　　　 */
/* ************************** */
/* --- CF7 フォーム全体のデザイン --- */
.custom-cf7-form {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 30px;
	border: 1px solid #eaeaea;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* 1行の構成（PCは横並び） */
.custom-cf7-form .form-row {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #eee;
    padding: 20px 0;
}
.custom-cf7-form .form-row:last-of-type {
    border-bottom: none;
}

/* 左側のラベル部分 */
.custom-cf7-form .form-label {
    width: 35%;
    font-weight: bold;
    color: #333;
    padding-right: 20px;
}

/* 必須マーク */
.custom-cf7-form .req {
    color: #e60012; /* アクセントの赤色 */
    font-size: 0.8em;
    margin-left: 5px;
    vertical-align: top;
}

/* ラベルの補足説明 */
.custom-cf7-form .label-note {
    font-size: 0.8em;
    color: #666;
    font-weight: normal;
    display: block;
    margin-top: 5px;
}

/* 右側の入力エリア */
.custom-cf7-form .form-input {
    width: 65%;
}

/* 入力ボックス（テキスト、メール、日付、テキストエリア） */
.custom-cf7-form input[type="text"],
.custom-cf7-form input[type="email"],
.custom-cf7-form input[type="tel"],
.custom-cf7-form input[type="date"],
.custom-cf7-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fafafa;
    transition: all 0.3s;
}
.custom-cf7-form input:focus,
.custom-cf7-form textarea:focus {
    border-color: #002b62; /* フォーカス時に紺色 */
    background: #fff;
    outline: none;
}

/* ラジオボタンの整列 */
.custom-cf7-form .wpcf7-list-item {
    margin: 0 15px 10px 0;
    display: inline-block;
}
.custom-cf7-form .mb-2 {
    margin-bottom: 10px;
}

/* 送信ボタンエリア */
.custom-cf7-form .form-submit-row {
    text-align: center;
    margin-top: 30px;
}
.custom-cf7-form input[type="submit"] {
    background-color: #002b62; /* プレジール風の紺色 */
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 15px 40px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.3s;
    width: 100%;
    max-width: 300px;
}
.custom-cf7-form input[type="submit"]:hover {
    background-color: #e60012; /* ホバーで赤に変化 */
    opacity: 1;
}

.wpcf7-spinner {
	display: block;
}

/* スマホ対応（縦積み） */
@media screen and (max-width: 768px) {
    .custom-cf7-form .form-label,
    .custom-cf7-form .form-input {
        width: 100%;
    }
    .custom-cf7-form .form-label {
        margin-bottom: 10px;
    }
    .custom-cf7-form {
        padding: 15px;
    }
}



/* ************************** */
/* 卒業後進路（線形背景）　　 */
/* ************************** */
.slant-section {
    position: relative;
}

/* 上下の「斜め」を作る共通設定 */
.slant-section::before,
.slant-section::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 5%; 
    background-color: #ffffff;
    z-index: 99;
    pointer-events: none;
}

/* --- 上側の斜め --- */
.wp-block-group.slant-section::before {
	height: 5%; 
    top: -1px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
	background-color: #fff;
}

/* --- 下側の斜め --- */
.slant-section::after {
    bottom: -1px;
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

/* スマホでの微調整 */
@media screen and (max-width: 768px) {
    .wp-block-group.slant-section::before,
    .slant-section::after {
        height: 10vw;
    }
}

.slant-section .swell-block-fullWide {
	padding-top: 17vw !important;
    padding-bottom: 17vw !important;
}

.slant-section p {
	color: #fff;
	margin-bottom: 0;
}

.slant-section p:before {
    content: "\f101";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;           
    margin-right: 5px;
}

.slant-section p.under_y {
	width: fit-content;
	margin-bottom: 1rem;
	background: linear-gradient(transparent 80%, #ffe500 60%);
    padding: 0 0 3px;
	line-height: 1;
}

.slant-section p.under_y:before {
	content: "";
	margin-right: 0;
}


/* ************************** */
/* スタッフ紹介　　　　　　　 */
/* ************************** */
/* --- スタッフ紹介の横スクロールエリア --- */
.staff-scroll-container > .wp-block-group__inner-container {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding-bottom: 20px;
	padding-left: 5px;
    padding-right: 5px;
    -webkit-overflow-scrolling: touch; 
}

/* --- カードごとの設定 --- */
.staff-card {
    min-width: 320px;
	max-width: 400px;
    flex-shrink: 0;
    padding: 30px 20px;
	margin-bottom: 0;
    border: 1px solid #eaeaea;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    text-align: left;
}

.staff-card h4.wp-block-heading {
	margin-top: 1.5em;
}

.staff-card .wp-block-heading .post {
	display: block;
    font-size: 12px;
}

.staff-card .wp-block-heading .name {
	padding-right: 1rem;
}

.staff-card .wp-block-heading .rome {
	font-size: 15px;
}

/* --- 顔画像の調整 --- */
.staff-card figure.wp-block-image {
    margin: 0 auto 20px;
    width: 175px;
}

.staff-card figure.wp-block-image img {
    width: 100%;
	height: 175px;
	object-fit:cover;
	border-radius: 50%;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

/* --- スクロールバーのデザイン（Webkit系ブラウザ用） --- */
.staff-scroll-container > .wp-block-group__inner-container::-webkit-scrollbar {
    height: 8px;               /* スクロールバーの太さ */
}
.staff-scroll-container > .wp-block-group__inner-container::-webkit-scrollbar-thumb {
    background: #ccc;          /* つまみの色 */
    border-radius: 4px;        /* 丸み */
}
.staff-scroll-container > .wp-block-group__inner-container::-webkit-scrollbar-track {
    background: #f1f1f1;       /* レールの色 */
}


/* ************************** */
/* フロー　　　　　　　　　　 */
/* ************************** */
/* なだらかな単一カーブセクションの土台 */
.single-curve-section {
    position: relative;
}

/* 上下のカーブを作る共通設定 */
.single-curve-section::before,
.single-curve-section::after {
    content: "";
    position: absolute;
    left: 0;
    width: 145%;
    height: 6vw;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 99;
    pointer-events: none;
}

/* --- 上側のカーブ --- */
.single-curve-section::before {
    top: -1px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* --- 下側のカーブ --- */
.single-curve-section::after {
	bottom: -1px;
    transform: scaleY(-1); 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* スマホでの微調整 */
@media screen and (max-width: 768px) {
    .wp-block-group.single-curve-section::before,
    .single-curve-section::after {
        height: 8vw;
    }
}

.single-curve-section .swell-block-fullWide {
	padding-top: 12vw !important;
    padding-bottom: 12vw !important;
}

.single-curve-section .swell-block-step__title {
	color: #fff;
}

/* ************************** */
/* オフィシャルパートナー　　 */
/* ************************** */
.partner.swell-block-box-menu.is-style-default .swell-block-box-menu__item {
	border: none;
}

.partner.swell-block-box-menu.is-style-default .swell-block-box-menu__item img {
	height: auto;
}