@charset "UTF-8";


/*=======================================================*/
/*      		セクション毎のCSS   			  		  */
/*======================================================*/


/*======= 共通 ======*/

/* 料金価格を、半角分→にずらす */
.price-txt-indent{
	display: inline-block;
	margin-left: 0.5em;
}


/*======= TOP ======*/
/*ご挨拶*/
.greeting {
	padding: clamp(20px, 6vw, 80px) 0 var(--v-space);
	background-color: #f8f4e7;
	position: relative;
	/* sectionの位置を相対的にする*/
	z-index: 1;
	/* 背景画像より上に表示 */
}


.greeting-haba {
	max-width: 950px;
	margin: 0 auto;
	padding: 2% 0 0 0;
}

.greeting-photo{
	display: grid;
	place-content: center;
	margin-top: 2vw;
	margin-bottom: 2vw;
}

/*TELバナー*/
.tel_bnr {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
}

@media (max-width: 568px) {
	.tel_bnr {
		grid-template-columns: repeat(1, 1fr);
	}
}

/* SNSバナー */
.sns_bnr {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	/* margin-bottom: 50px; */
	margin-top: 10px;
}

@media (max-width: 568px) {
	.sns_bnr {
		grid-template-columns: repeat(1, 1fr);
	}
}

/* .sns_bnr img{
	border-radius: 10px;
} */

/*======= 入会までの流れ ======*/
.sec1 {
	padding: var(--v-space) 0;
	background-color: #e7f8fe;

	position: relative;
	/* sectionの位置を相対的にする*/
	z-index: 1;
	/* 背景画像より上に表示 */
}
@media print, screen and (min-width: 768px) {
	.sec1 {
		background-image: url(../img/bg_01.jpg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}

}
@media only screen and (max-width: 767px) {
	.sec1 {
		background-image: url(../img/bg_01_sp.jpg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}
}

/* sec1 入会のご案内 ---------------------------------- */


/* 上2カラム＋下1カラム（フル幅） */
.admission-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

/* 下の３つ目パネルだけ、横幅いっぱいに */
.admission-grid .admission-panel:nth-child(3) {
	grid-column: 1 / -1;
}

@media screen and (max-width: 768px) {
	.admission-grid {
		grid-template-columns: 1fr;
	}
	.admission-grid .admission-panel:nth-child(3) {
		grid-column: auto;
	}
}

/* パネル共通 */
.admission-panel {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 14px;
	padding: 18px 18px 16px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	border-top: 6px solid var(--main-color);
	box-sizing: border-box;
}

.admission-panel--info {
	border-top-color: var(--accent-color1);
}

/* 小見出し */
.admission-subtitle {
	font-size: clamp(18px,2vw,20px);
	font-weight: 600;
	color: var(--accent-color2);
	margin-bottom: 10px;
}

/* おすすめリストなど（前のCSSそのまま使ってOK） */
.admission-point-list { list-style:none; padding-left:0; margin:0; }
.admission-point-list li {
	position: relative;
	padding-left: 1.2em;
	margin-bottom: 6px;
}
.admission-point-list li::before {
	content: "●";
	position: absolute;
	left: 0;
	top: 0.3em;
	color: var(--accent-color1);
	font-size: 0.7em;
}

/* 入会までの流れ */
.admission-flow-list { list-style:none; padding-left:0; margin:0 0 8px; }
.admission-flow-list li {
	display:flex;
	gap:8px;
	align-items:flex-start;
	padding:6px 0;
	border-bottom:1px dashed #ddd;
}
.admission-flow-list li:last-child { border-bottom:none; }

.step-no {
	position: relative;
	top:2px;
	display:inline-flex;
	justify-content:center;
	align-items:center;
	width:22px;
	height:22px;
	border-radius:50%;
	background-color:var(--main-color);
	color:#fff;
	font-size:15px;
	font-weight:700;
	flex-shrink:0;
}
.step-title { font-weight:600; font-size:16px; }
.step-text  { font-size:15px; }

/* 写真＋テキストの横並び */
.admission-photo-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr);
	gap: 16px;
	align-items: center;
}

@media screen and (max-width: 964px) {
	.admission-photo-wrap {
		grid-template-columns: 1fr;
	}
}

.admission-photo {
	margin: 0;
}

.admission-photo img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	object-fit: cover;
}

/* ミニ情報ボックス（開催日・入会金） */
.admission-mini-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 10px;
}

@media screen and (max-width: 964px) {
	.admission-mini-grid {
		grid-template-columns: 1fr;
	}
}

.mini-box {
	background-color: #f7f0dd;
	border-radius: 10px;
	padding: 8px 10px;
}
.mini-label {
	font-size: 18px;
	font-weight: 600;
	color: var(--accent-color2);
	margin-bottom: 4px;
}
.mini-text {
	font-size: 15px;
	line-height: 2;
}
.mini-text-ttl{
	width: 70px;
	display: inline-block;
	margin-bottom: 5px;
	box-sizing: border-box;
	border-radius: 5px;
	text-align: center;
	color: #FFF;
	font-weight: 600;
	margin-right: 10px;
}
.mini-text-ttl_bg01{
	background-color: var(--course-color1);
}
.mini-text-ttl_bg02{
	background-color: var(--course-color2);
}


/*======= 授業内容 ======*/
.sec2 {
	padding: var(--v-space) 0;
	background-color: #FFF;

	background: radial-gradient(circle, transparent 20%, #FFFFFF 20%, #FFFFFF 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #FFFFFF 20%, #FFFFFF 80%, transparent 80%, transparent) 15px 15px, linear-gradient(#e5edf0 1px, transparent 1px) 0 -1px, linear-gradient(90deg, #e5edf0 1px, #FFFFFF 1px) -1px 0;
	background-size: 30px 30px, 30px 30px, 15px 15px, 15px 15px;

	position: relative;
	/* sectionの位置を相対的にする*/
	z-index: 1;
	/* 背景画像より上に表示 */
}

.lesson-photo {
	margin: 0;
}

.lesson-photo img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	object-fit: cover;
}

/* 大人／子ども２カラム */
.lesson-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 25px;
	margin-bottom: 40px;
}

@media screen and (max-width: 768px) {
	.lesson-cols {
		grid-template-columns: 1fr;
	}
}

/* コースカード */
.lesson-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 12px;
	padding: 20px 22px 18px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	border-top: 6px solid var(--main-color);
	box-sizing: border-box;
}

.lesson-card--adult {
	border-top-color: var(--course-color1); /* シアン */
}

.lesson-card--kids {
	border-top-color: var(--course-color2); /* オレンジ */
}

/* タイトルまわり */
.lesson-title {
	font-size: clamp(18px, 1.8vw, 20px);
	font-weight: 600;
	color: var(--accent-color2);
	margin-top: 10px;
	margin-bottom: 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lesson-label {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 11px;
	color: #fff;
	font-weight: 600;
}

.lesson-label--adult {
	background-color: var(--course-color1);
}

.lesson-label--kids {
	background-color: var(--course-color2);
}

/* 授業料リスト */
.lesson-fee-list {
	margin: 15px 0 10px;
}

.lesson-fee-list div {
	display: flex;
	flex-direction: column;
	margin-bottom: 8px;
}

.lesson-fee-list dt {
	font-weight: 600;
	font-size: 16px;
}

.lesson-fee-list dd {
	margin: 0;
	font-size: 16px;
}

.lesson-price {
	font-weight: 700;
	color: var(--accent-color2);
	margin-right: 4px;
}

.lesson-note {
	font-size: 12px;
	color: #555;
}

/* カリキュラムブロック */
.lesson-curriculum {
	margin-top: 20px;
	padding: 25px 20px 10px;
	background: #f7f7f7;
	border-radius: 12px;
}

.lesson-curriculum-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 20px;
}

@media screen and (max-width: 900px) {
	.lesson-curriculum-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 568px) {
	.lesson-curriculum-grid {
		grid-template-columns: 1fr;
	}
}

.lesson-curriculum-item {
	background-color: #ffffff;
	border-radius: 10px;
	padding: 15px 15px 12px;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
	font-size: 16px;
}

.lesson-curriculum-item h4 {
	font-size: 17px;
	font-weight: 600;
	color: var(--accent-color2);
	margin-bottom: 6px;
}

.lesson-curriculum-item p {
	text-align: justify;
}


/*======= 彫刻家・吉田光正の世界 ======*/
.sec3 {
	padding: var(--v-space) 0;
	background-color: #F8F4E7;

	position: relative;	/* sectionの位置を相対的にする*/
	z-index: 1;			/* 背景画像より上に表示 */
}
/* 彫刻家・吉田光正の世界 ---------------------------- */

/* 見出し下の構造 */
.artist-header {
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

/* 写真まわり（256px用・丸小サイズ） */
.artist-photo-small {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.artist-photo-small figure {
	display: inline-block;
	position: relative;
	border-radius: 50%;
	background-color: #fff;

	/* ★外側フチ（メインカラー） */
	border: 4px solid var(--accent-color1);

	/* ★影（軽め） */
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);

	/* フチが切れないように */
	overflow: visible !important;
}

.artist-photo-small img {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	object-fit: cover;

	/* ★内側フチ（白） */
	border: 3px solid #fff;
}

/* 本文ブロック */
.artist-body {
	/* max-width: 900px; */
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.artist-lead {
	margin-bottom: 4px;
}

/* -------------------------------------------
   quote（作家メッセージ）と profile
------------------------------------------- */

.artist-quote {
	background-color: #ffffff;
	border-left: 6px solid var(--accent-color1);
	/* ★メインカラーの縦ライン */
	border-radius: 8px;
	padding: 14px 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.artist-profile {
	background-color: #ffffff;
	border-left: 6px solid var(--main-color);
	/* ★メインカラーの縦ライン */
	border-radius: 8px;
	padding: 14px 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* プロフィール見出し */
.artist-profile h4 {
	font-size: 16px;
	font-weight: 600;
	color: var(--accent-color2);
	margin-bottom: 8px;
}

/* プロフィールリスト */
.artist-profile ul {
	list-style: none;
	padding: 0;
	margin: 0 0 6px;
	font-size: 14px;
}

.artist-profile ul li {
	position: relative;
	padding-left: 1.2em;
	margin-bottom: 4px;
}

.artist-profile ul li::before {
	content: "・";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--accent-color2);
}

/* 名前の署名 */
.artist-sign {
	text-align: right;
	font-size: 14px;
	margin-top: 6px;
}

/* -------------------------------------------
   quote + profile 横並びレイアウト
------------------------------------------- */

.artist-info-flex {
	display: flex;
	flex-direction: column;
	/* スマホは縦並び */
	gap: 20px;
	margin: 15px 0 10px;
}

@media print, screen and (min-width: 900px) {
	.artist-info-flex {
		flex-direction: row;
		/* PCは横並び */
		justify-content: space-between;
		align-items: flex-start;
	}

	.artist-quote,
	.artist-profile {
		flex: 1;
	}

	.artist-quote {
		margin-right: 15px;
	}

	.artist-profile {
		margin-left: 15px;
	}
}

/* -------------------------------------------
   指導ポリシー部分
------------------------------------------- */

.artist-message {
	margin-top: 10px;
}

.artist-message-inner {
	background-color: rgba(255, 255, 255, 0.95);
	border-radius: 12px;
	padding: 18px 16px 16px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	font-size: clamp(13px, 1.4vw, 14px);
}

/* -------------------------------------------
   ギャラリー部分
------------------------------------------- */

.artist-gallery {
	margin-top: 10px;
}


/* -------------------------------------------
   sec4 略歴 History
------------------------------------------- */

/*======= 彫刻家・吉田光正の世界 ======*/
.sec4 {
	padding: var(--v-space) 0;
	background-color: #FFF;

	position: relative;	/* sectionの位置を相対的にする*/
	z-index: 1;			/* 背景画像より上に表示 */
}
@media print, screen and (min-width: 768px) {
	.sec4 {
		background-image: url(../img/bg_02.jpg);
		background-repeat: no-repeat;
		background-position: top;
		background-size: cover;
	}
}
@media only screen and (max-width: 767px) {
	.sec4 {
		background-image: url(../img/bg_02_sp.jpg);
		background-repeat: no-repeat;
		background-position: top;
		background-size: cover;
	}
}

/* 2カラムレイアウト */
.artist-bio-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr);
	gap: 25px;
}

@media screen and (max-width: 900px) {
	.artist-bio-grid {
		grid-template-columns: 1fr;
	}
}

.artist-bio-block {
	background-color: #00000038;
	border-radius: 10px;
	padding: 16px 18px 18px;
	box-shadow: 0 3px 10px rgba(0,0,0,0.04);
	box-sizing: border-box;
	font-size: 13px;
}

/* タイムライン */
.bio-timeline {
	margin: 0;
	padding: 0;
	position: relative;
}

.bio-item {
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr);
	column-gap: 10px;
	padding: 6px 0;
	border-bottom: 1px dashed #ddd;
}

.bio-item:last-child {
	border-bottom: none;
}

.bio-item dt {
	font-weight: 600;
	font-size: clamp(13px, 1.4vw, 15px);
	color: var(--course-color1);
}

.bio-item dd {
	margin: 0;
	font-size: clamp(13px, 1.4vw, 15px);
	line-height: 1.6;
}

/* パブリックコレクション */
.bio-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.bio-list li {
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr);
	column-gap: 10px;
	margin-bottom: 6px;
}

.bio-year {
	font-weight: 600;
	font-size: clamp(13px, 1.4vw, 15px);
	color: var(--course-color1);
}

.bio-text {
	font-size: clamp(13px, 1.4vw, 15px);
}

/* 所属一覧 */
.bio-list-simple {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}

.bio-list-simple li {
	position: relative;
	padding-left: 1.2em;
	margin-bottom: 4px;
	font-size: clamp(13px, 1.4vw, 15px);
}

.bio-list-simple li::before {
	content: "・";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--course-color1);
}


/*======= FAQ ======*/
.faq_sec1 {
	padding: var(--v-space) 0;
	background-color: var(--base-color);

	position: relative;
	/* sectionの位置を相対的にする*/
	z-index: 1;
	/* 背景画像より上に表示 */
}

.faq-item {
	display: grid;
	grid-template-columns: 1.5em 1fr;
	column-gap: 10px;
	row-gap: 5px;
}

.faq-label {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: bold;
	font-size: 110%;
	line-height: 1.5;
	border-radius: 3px;
	width: 1.5em;
	text-align: center;
	align-self: start;
	/* lavelを上揃えに */
}

.faq-label.q {
	background-color: var(--main-color);
}

.faq-label.a {
	background-color: var(--accent-color1);
}

.faq-question,
.faq-answer {
	margin: 0;
	line-height: 1.6;
	text-align: justify;
}

.faq-question {
	font-weight: bold;
}

hr.faqHr {
	height: 0px;
	border: 1px dashed var(--accent-color2);
	margin: 20px auto;
}



/*======= 会社案内ページ ======*/

/*会社案内*/
.info_sec1 {
	padding: var(--v-space) 0 ;
	background-color: #eee;
	position: relative;
	/* sectionの位置を相対的にする*/
	z-index: 1;
	/* 背景画像より上に表示 */
}
@media print, screen and (min-width: 768px) {
	.info_sec1 {
		background-image: url(../img/bg_03.jpg);
		background-repeat: no-repeat;
		background-position: top;
		background-size: cover;
	}
}
@media only screen and (max-width: 767px) {
	.info_sec1 {
		background-image: url(../img/bg_03_sp.jpg);
		background-repeat: no-repeat;
		background-position: bottom;
		background-size: cover;
	}
}



/* 概要部分のテーブル */
.info1 {
	font-weight: bold;
	border-bottom: 1px dashed #999;
	color: var(--txt-color);
	padding: 5px;
	/* width: 5.25em; */
	width: 170px;
	text-align: left;
}

.info2 {
	border-bottom: 1px dashed #999;
	padding: 5px;
	/* width: 400px; */
}

@media screen and (max-width: 568px) {
	.info1 {
		display: block;
		padding: 8px 2px 2px 2px;
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0);
	}

	.info2 {
		display: block;
		padding: 2px;
		width: 99%;
	}
}



/*会社概要*/
.bg_b {
	background: rgba(255, 255, 255, 0.9);
	padding: 40px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bg_b:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 568px) {
	.bg_b {
		padding: 20px;
	}
}



.access_sec1 {
	padding: var(--v-space) 0;
	background-color: #FFF;

	position: relative;
	/* sectionの位置を相対的にする*/
	z-index: 1;
	/* 背景画像より上に表示 */
}

/* アクセス部分のテーブル */
.access1 {
	font-weight: bold;
	border-bottom: 1px dashed #999;
	padding: 5px;
	width: 5.25em;
}

.access2 {
	border-bottom: 1px dashed #999;
	padding: 5px;
	width: 400px;
}

@media screen and (max-width: 568px) {
	.access1 {
		display: block;
		padding: 8px 2px 2px 2px;
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0);
	}

	.access2 {
		display: block;
		padding: 2px;
		width: 99%;
	}
}