@charset "utf-8";
/* =========================================================
   20261124.html 専用CSS
   通販生活の学校×歌舞伎座　吉例顔見世大歌舞伎プレミアム観劇会
   ========================================================= */


.content {
    display: flex;
    flex-direction: column;
    gap: 40px;
	font-feature-settings: 'pwid' on, 'palt' on;
}
.intro {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.intro__heading {
    font-family: "Hiragino Mincho ProN", "游明朝体", "Yu Mincho", YuMincho, serif;
    position: relative;
    z-index: 10;
    font-weight: bold;
}
.intro__heading:before,
.intro__heading:after {
    content: "";
    position: absolute;
    top: 20px;
    width: 135px;
    height: 55px;
    z-index: -1;
    background: url(/study/event/assets/images/20261124/intro-bg.svg);
}
.intro__heading:before {
    left: -40px;
}
.intro__heading:after {
    right: -40px;
    transform: scaleX(-1);
}
.intro__heading-catch {
    color: #C59A1B;
    font-size: 2rem;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 5px;
}
.intro__heading-title {
    font-size: 1.625rem;
    line-height: 1.5;
    text-align: center;
}
.intro__lead {
    font-size: 1.125rem;
    line-height: 1.6;
	margin-bottom: 0;
}

.cv {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cv__title {
    font-size: 1.25rem;
	color: #EE1515;
	font-weight: bold;
	text-align: center;
	margin-bottom: 0;
}
.cv__btn {
	text-align: center;
}
.cv__btn .cv__link-text {
	position: relative;
}
.cv__image {
	position: absolute;
	display: inline-block;
	top: -16px;
	left: -170px;
	width: 185px;
	height: auto;
	pointer-events: none;
}
.cv__text {
	display: inline-block;
	margin: 0 auto;
}
.bg-gray-cta {
	background-color: #A5A5A5;
	border: 2px solid #fff;
	font-weight: bold;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
    cursor: default; /* common.css の .btn>*(cursor:pointer)を上書き。受付前の非活性ボタンのためポインターにしない */
}
/* common.css の .btn>*:hover:before（白半透明オーバーレイでの色薄め）を無効化。bg-gray-ctaは受付前の非活性ボタンのため色を変えたくない */
html:not(.mobile) .btn > .bg-gray-cta:hover:before {
	opacity: 0;
}
.faq-btn__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    max-width: 262px;
    padding: 16px 24px;
	background-color: #4DACDF;
    border: 1px solid #fff;
    border-radius: 100px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    font-feature-settings: 'palt';
	margin: 0 auto;
}
html:not(.mobile) .faq-btn__link:hover {
	color: #fff; /* common.css の main a:hover(color:#49a1b8) に負けないよう上書き */
}
/* 上の「観劇会に申込む」ボタン（.btn>*:before の白半透明オーバーレイ）とホバー時の見た目を揃える */
.faq-btn__link:before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #fff;
	opacity: 0;
	border-radius: 100px;
	transition: opacity .2s linear;
}
html:not(.mobile) .faq-btn__link:hover:before {
	opacity: .2;
}
.faq-btn__link-text {
	position: relative;
}

.benefits {
    background-color: #FFFCF3;
    background-image: url(/study/event/assets/images/20261124/bg.svg);
	padding: 40px 0 64px;
}
.benefits .content-narrow {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.benefits__heading {
	text-align: center;
	font-weight: bold;
	font-size: 2.5rem;
    font-family: "Hiragino Mincho ProN", "游明朝体", "Yu Mincho", YuMincho, serif;
	line-height: 1.3;
}
.benefits__heading-catch {
	text-align: center;
	margin-bottom: 0;
	font-size: 2rem;
}
.benefit {
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.benefit__item {
	display: flex;
	flex-direction: column;
	gap: 32px;

}
.benefit__item__head {
	display: flex;
	gap: 10px;
	min-height: 64px;
	align-items: center;
}

.benefit__item__badge-text {
	width: 137px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: bold;
	font-size: 1.5rem;
	line-height: 1.1;
    font-family: "Hiragino Mincho ProN", "游明朝体", "Yu Mincho", YuMincho, serif;
	margin-bottom: 0;
}
.benefit__item__badge-text {
	position: relative;
	z-index: 10;
}
.benefit__item__badge-text:before {
	position: absolute;
	content: "";
	width: 137px;
	height: 64px;
	z-index: -1;
}
.benefit__item--guide .benefit__item__badge-text:before {
	position: absolute;
	content: "";
	width: 137px;
	height: 96px;
	z-index: -1;
}
.benefit__01 .benefit__item__badge-text:before {
	background: url("/study/event/assets/images/20261124/badge_icon01.png") no-repeat;
	background-size: contain;
}
.benefit__02 .benefit__item__badge-text:before {
	background: url("/study/event/assets/images/20261124/badge_icon02.png") no-repeat;
	background-size: contain;
}
.benefit__03 .benefit__item__badge-text:before {
	background: url("/study/event/assets/images/20261124/badge_icon03.png") no-repeat;
	background-size: contain;
}
.benefit__04 .benefit__item__badge-text:before {
	background: url("/study/event/assets/images/20261124/badge_icon04.png") no-repeat;
	background-size: contain;
	top: -30px;
}
.benefit__item__title {
	width: calc(100% - 147px);
	margin-bottom: 0!important;
	line-height: 1.3!important;
}
.benefit__item__title span {
	display: block;
}
.benefit__item__title-catch {
	font-size: 1.125rem;
}
.benefit__item__title-main {
	font-size: 1.875rem;
}
.benefit__item__profile {
	display: flex;
	gap: 16px;
	max-width: 394px;
	width: 100%;
	min-width: 0; /* flexアイテムの既定min-width:autoを解除。中の画像/ボタンの最小幅で親ごと横に膨らむのを防ぐ */
	margin: 0 auto;
	padding: 24px;
	background-color: #fff;
}
.benefit__item__profile-img {
	flex-shrink: 0;
	object-fit: cover;
}
/* 講師プロフィール（モーダル付き）のテキスト・ボタン。style.css の .profile--button 系デザインに合わせる */
.benefit__item__profile__item {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.benefit__item__profile__item-name {
	margin-bottom: 0;
	font-family: "Hiragino Mincho ProN", "游明朝体", "Yu Mincho", YuMincho, serif;
	font-size: 1.25rem;
	font-weight: bold;
	line-height: 1.6;
}
.benefit__item__profile__item-role {
	margin: 0 0 10px;
	font-size: 0.9rem;
	line-height: 1.6;
}
.benefit__item__profile__item-btn {
	display: inline-block;
	padding: 4px 30px;
	border: 1px solid #303030;
	border-radius: 100px;
	background: none;
	color: #303030;
	font-size: 1rem;
	line-height: 1.6;
	text-align: center;
	box-sizing: border-box;
	cursor: pointer;
}
html:not(.mobile) .benefit__item__profile__item-btn:hover {
	opacity: 0.7;
}

.profile-modal__name {
	font-size: 1.5rem;
}
.profile-modal__body p {
	margin-bottom: 0;
}

.benefit__item__photo {
	text-align: center;
}
.benefit__item__photo-caption {
	text-align: center;
	font-size: 1.125rem;
	margin-top: 10px;
}
.benefit__04 .benefit__item__badge-text {
	text-align: center;
}
.benefit__item--guide .benefit__item__body {
	display: flex;
	gap: 32px;
	max-width: 696px;
	margin: 0 auto;
	align-items: center;
}
.benefit__item__text {
	font-size: 1.125rem;
	line-height: 1.6;
	margin-bottom: 0;
}
.benefits .cv {
	margin-bottom: 24px;
}
.benefits .heading-frame {
	border-image:url(/study/event/assets/images/20261124/title-frame_02.svg) 12 stretch;
	background-color: #fff; /* 枠内側だけ白背景。padding-boxにして枠線(border-image)側には回り込ませない */
	background-clip: padding-box;
}
.benefit-info {
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.benefit-info p {
	font-size: 1.125rem;
	text-align: center;
	margin-bottom: 0;
}
.benefit-info__item {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.benefit-info__item .heading-frame {
	margin-bottom: 0;
}
.heading-frame {
	margin-bottom: 32px;
}
.lineup__block {
	background-color: #fff;
	padding: 40px 20px;
}
.benefit-info-lineup .lineup__title {
	text-align: center;
	margin-bottom: 0;
}
.benefit-info-lineup .lineup__label {
	max-width: 640px;
	text-align: left;
	margin: 0 auto 32px;
	border-bottom: 2px solid #c6b063;
	
}
.benefit-info-lineup .lineup__author {
	margin-bottom: 16px;
}

.dl-strong {
	font-weight: bold;
	font-size: 1.25rem;
}
.dd--center {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.nowrap {
	white-space: nowrap;
}
@media screen and (max-width: 767px) {
    .nowrap {
		white-space: normal;
	}
}



/* ---------- よくあるご質問（1101022.html の product-faq-box に体裁を合わせる） ----------
   商品ページでは #product-secondary .product-faq-box { padding: 0; } 等の上書きと、
   products/common/css/product_secondary.css の product-faq-* 一式で見た目が作られている。
   このページでは product_secondary.css を読み込んでいないため、同じルールを #faq 配下に移植。
   新規追加（既存コードの上書きなし）。
   ---------------------------------------------------------- */
#faq.product-faq-box {
	padding: 0;
	background-color: #f7f3ed;
	scroll-margin-top: 20px; /* #faqへのアンカージャンプが上に詰まりすぎるのを補正（20260805.css の .kbz-faq と同様の対応） */
}

#faq.product-faq-box .bar-heading {
	margin-bottom: 0;
}

#faq .product-faq-list {
	display: block;
	margin-bottom: 8px;
}

#faq .product-faq-item {
	border-bottom: 1px solid #E6E1DB;
}

#faq .product-faq-item:last-child {
	border-bottom: none;
}

#faq .product-faq-question {
	color: #000000;
	cursor: pointer;
	font-weight: bold;
	padding: 16px 24px;
	position: relative;
	transition: background-color 0.3s ease;
	width: auto;
}

#faq .product-faq-question::before,
#faq .product-faq-question::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 24px;
	width: 13px;
	height: 2px;
	background-color: #6B6B6B;
	border-radius: 5px;
}

#faq .product-faq-question::before {
	transform: translateY(-50%);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#faq .product-faq-question::after {
	transform: translateY(-50%) rotate(90deg);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#faq .product-faq-question.is-active::after {
	transform: translateY(-50%) rotate(0deg);
}

#faq .product-faq-question-text {
	display: inline-block;
	padding: 0 24px;
	position: relative;
}

#faq .product-faq-question-text::before {
	content: 'Q';
	position: absolute;
	left: 0;
	top: 0;
	color: #1C89A6;
	font-size: 16px;
	font-weight: bold;
}

#faq .product-faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
				padding 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	padding: 0;
	width: auto;
}

#faq .product-faq-answer-content {
	color: #000000;
	padding: 0 46px 16px 46px;
	position: relative;
}

#faq .product-faq-answer-content::before {
	content: 'A';
	position: absolute;
	left: 24px;
	top: 0;
	color: #F2646E;
	font-size: 16px;
	font-weight: bold;
}

@media (max-width: 500px) {
	#faq .product-faq-list {
		margin-bottom: calc(8/375*100vw);
	}

	#faq .product-faq-question {
		padding: calc(16/375*100vw) calc(24/375*100vw);
	}

	#faq .product-faq-question::before,
	#faq .product-faq-question::after {
		right: calc(24/375*100vw);
		width: calc(13/375*100vw);
		height: calc(2/375*100vw);
		border-radius: calc(5/375*100vw);
	}

	#faq .product-faq-question-text {
		padding: 0 calc(24/375*100vw);
	}

	#faq .product-faq-question-text::before {
		font-size: calc(16/375*100vw);
	}

	#faq .product-faq-answer-content {
		padding: 0 calc(46/375*100vw) calc(16/375*100vw) calc(46/375*100vw);
	}

	#faq .product-faq-answer-content::before {
		left: calc(24/375*100vw);
		font-size: calc(16/375*100vw);
	}
}



@media (max-width: 767px) {
	.intro__heading:before {
		top: -20px;
		left: 100px;
	}
	.intro__heading:after {
		bottom: -20px;
		right: 100px;
		top: revert-layer;
	}
	.intro__heading-catch {
		font-size: 1.625rem;
	}
	.intro__heading-title {
		font-size: 1.25rem;
	}
	.intro__heading:before, .intro__heading:after {
		width: 88px;
		height: 36px;
		background-size: contain;
	}
	.intro {
		gap: 32px;
	}
	.intro__lead {
		font-size: 1rem;
	}
	.cv__title {
		font-size: 0.975rem;
	}
	.cv__btn .cv__link-text {
		position: static;
	}
	.btn.full {
		position: relative;
	}
	.cv__image {
		width: 120px;
		height: 40px;
		top: -10px;
		left: 0;
	}
	.cv__text {
		font-size: 0.9375rem;
		text-align: center;
	}
	.benefits {
		padding: 24px 0 60px;
	}
	.benefits__heading-catch {
		font-size: 1.6875rem;
	}
	.benefits__heading-title {
		font-size: 2rem;
	}
	.benefit__item {
		gap: 24px;
	}
	.benefit__item__head {
		flex-direction: column;
		gap: 16px;
	}
	.benefit__item__title {
		width: 100%;
		text-align: center;
	}
	.benefit__item__profile__item-btn {
		padding: 4px 10px;
	}
	.profile-modal {
		width: max-content;
	}
	.benefit__item__body {
		flex-direction: column;
	}
	.benefits .cv {
		margin-bottom: 10px;
	}
	.benefit-info__text,.benefit-info p {
		font-size: 0.9375rem;
		font-feature-settings: 'pwid' on, 'palt' on;
	}
	.heading-frame {
		font-size: 1.25rem;
		padding: 6px 34px;
	}
	.lineup__block {
		padding: 35px 20px;
	}
	.map iframe {
		width: 100%;
		height: auto;
		aspect-ratio: 200 / 153; /* iframeのwidth/height属性(200x153)固定分。横100%化しても地図が潰れないよう比率維持 */
	}
}
@media (max-width: 500px) {
	.intro__heading:before {
		left: 0;
	}
	.intro__heading:after {
		right: 0;
	}
}