/* ============================================================
   components.css — 全ページ共通の UI パーツ
   title / link / carousel(slick) / button / lightbox / modal / youtube banner
   ============================================================ */

/* ---------- title / link ---------- */
/*link*/
a.icon_y{background: url("../img/shared/icons/icon_y.webp") no-repeat right center;padding-right: 1rem;background-size: 8px;}
.right_link{text-align: right}

/*ttl*/
.ttl{text-align: center;font-size: 2rem;font-weight: bold;margin: 0 0 60px}
.ttl{
  position: relative;
  text-align: center
}
.ttl::before {
 background-color: var(--c-pink);
  bottom: -10px;
  content: "";
  height: 2px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 60px; /* 線の長さ */

}
@media (max-width: 767px) {
.ttl{font-size: 1.5rem;}

}

/* ---------- scroll fade-in & carousel (slick) ---------- */
/*------------------------------
JS
-----------------------------*/
.fadein {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: all 1s;
    transition: all 1s;
}

/* SLICK */
#slick-main{margin-top: -150px;}
/*slick setting*/
.slick-prev:before,
.slick-next:before {
    color: #000;
}

/* 効果をかけるためのスタイル設定 */
#slick-main-sp .slick-slide,
#slick-main .slick-slide{
	/* slickによってelement.styleで付けられるopacityを無効化 */
	opacity: 1 !important;
}
#slick-main-sp .slideobject,
#slick-main .slideobject{
	/* フェード要素の初期設定 */
	opacity: 0;
	-webkit-transition: 0s;
	transition: 0s;
}
#slick-main-sp .slick-active .slideobject,
#slick-main .slick-active .slideobject{

	/* [重要]slick側の設定と同じdurationを取る */
	opacity: 1;
	-webkit-transition: ease 10.0s;
	transition: ease 10.0s;
}
#slick-main-sp .slick-continue .slideobject,
#slick-main .slick-continue .slideobject{

	/* [重要]slick側の設定と同じdurationを取る */
	opacity: 0;
	-webkit-transition: ease 10.0s;
	transition: ease 10.0s;
}
#slick-main-sp figure.image,
#slick-main figure.image{
	/* 画像 ズーム要素の初期設定 */
	-webkit-transform: scale(1.0, 1.0);
	        transform: scale(1.0, 1.0);
	-webkit-transition: 0s;
	transition: 0s;
}
#slick-main-sp .slick-active figure.image,
#slick-main .slick-active figure.image{

	/* ズームをかける要素には必ずフェードに対して大きめのtransition-durationを取る */
	-webkit-transform: scale(1.2, 1.2);
	        transform: scale(1.2, 1.2);
	-webkit-transition: ease 10.0s;
	transition: ease 10.0s;
}
#slick-main-sp .slick-continue figure.image,
#slick-main .slick-continue figure.image{

	/* ズームをかける要素には必ずフェードに対して大きめのtransition-durationを取る */
	-webkit-transform: scale(1.4, 1.4);
	        transform: scale(1.4, 1.4);
	-webkit-transition: ease 10.0s;
	transition: ease 10.0s;
}
#slick-main-sp p.text,
#slick-main p.text{
	/* テキスト 初期設定 */
	opacity: 0;
	-webkit-transition: 0s;
	transition: 0s;
}
#slick-main-sp .slick-active p.text,
#slick-main .slick-active p.text{
	/* テキスト　slick-active(効果開始) この辺は自由にduration */
	opacity: 1;
	-webkit-transition: ease 0s;
	transition: ease 0s;
	-webkit-transition-delay: 0s;
	        transition-delay: 0s;
}
#slick-main-sp .slick-continue p.text,
#slick-main .slick-continue p.text{
	/* テキスト　slick-continue この辺は自由にduration */
	opacity: 1;
	-webkit-transition: ease 0s;
	transition: ease 0s;
}
#slick-main-sp,
#slick-main {
    opacity: 0;
    -webkit-transition: opacity .25s ease;
    transition: opacity .25s ease;
}
#slick-main-sp.slick-initialized,
#slick-main.slick-initialized {
    opacity: 1;
}

#slick-main-sp .slick-dots,
#slick-main .slick-dots{bottom: 30px; padding-bottom: 5px; }
#slick-main-sp .slick-dots li button:before,
#slick-main .slick-dots li button:before{color: #fff}
.slideobject{
	padding-top: 19%;
	position: relative;
	z-index: 10;
	overflow: hidden;
	vertical-align: bottom;
}
.slideobject .text span{padding-left: 0}
@media (max-width: 767px) {
.slideobject{	padding-top: 50%;}
.slideobject .text span{padding-left: 0}
}

.slideobject figure.image{
	background-size:contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.slideobject figure.image{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.slideobject p.text{
	font-size: 2rem;
	line-height: 1.7em;
	width: auto;
	margin:0 auto;
	position: absolute;
	z-index: 20;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	color: #fff;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6), -1px -1px 2px rgba(0, 0, 0, 0.6), 1px -1px 2px rgba(0, 0, 0, 0.6), -1px 1px 2px rgba(0, 0, 0, 0.6);
	font-weight: bold;
	text-align: center;
	background: url("../img/logo/krus.webp") no-repeat 0 center;
	background-size: 200px;
	padding: 20px 0 20px 220px;
	z-index: 999;
}
@media (max-width: 1250px) {
.slideobject p.text{font-size: 1.8rem;}
}
@media (max-width: 1100px) {
.slideobject p.text{font-size: 1.6rem;padding-left: 180px;background-size: 160px;}
}
@media (max-width: 820px) {
.slideobject p.text{font-size: 1.4rem;padding-left: 150px;background-size: 130px;}
}
/* タブレット（iPad等）向け調整：ロゴ上配置 */
@media (min-width: 768px) and (max-width: 1024px) {
.slideobject{padding-top: 32%;}
.slideobject figure.image{background-position: 50% 30%;}
.slideobject p.text{
	font-size: 1.5rem;
	background: url("../img/logo/krus.webp") no-repeat center top;
	background-size: 150px;
	padding: 170px 1rem 0;
	width: 100%;
	box-sizing: border-box;
	}
}
@media (max-width: 767px) {
.slideobject{padding-top: 70%;}
.slideobject figure.image{background-position: 60% 50%;}
.slideobject p.text{
	font-size:1.35rem;
	background: url("../img/logo/krus.webp") no-repeat center top;
	background-size: 140px;
	padding: 170px 0.5rem 0;
	width: 100%;
	box-sizing: border-box;
	}
.slick-dots li button:before{font-size: 10px !important}
}
/* ---------- button ---------- */
/*ボタン*/
.flex_btn{width: 80%; margin: 0 auto;display: flex;column-gap:60px;}
.flex_btn a{text-decoration: none !important; padding: 20px 0 20px 60px;color: #fff;font-size: 1.2rem;display: block;}
.btn_yellow {background-color:var(--c-gold);width: 100%}

.flex_btn a.icon_y {    background: url(../img/shared/icons/icon_y_w.webp) no-repeat 88% center ;background-size: 8px}
a.icon_y{text-decoration: none !important}

.btn_brown{background-color:var(--c-brown);width: 40%;margin: 0 auto}

.btn_brown a.icon_y { text-decoration: none !important; padding: 20px 0 ;text-align: center;color: #fff;font-size: 1.2rem;display: block;  background: url(../img/shared/icons/icon_y_w.webp) no-repeat 90% center ;background-size: 8px}

.btn_brown_under{background-color:var(--c-brown);width: 100%;margin: 0 auto;text-align: center;}
.btn_brown_under a.icon_y { text-decoration: none !important; padding: 20px 20px 30px 20px;color: #fff;font-size: 1rem;display: block;
background: url(../img/shared/icons/icon_down_w.webp) no-repeat center 80% ;background-size: 15px}

@media (max-width: 820px) {
.flex_btn{width: 100%;}
}

@media (max-width: 767px) {
.flex_btn{width: 100%; display: block;}
.flex_btn a{margin-bottom: 20px}
.btn_brown{background-color:var(--c-brown);width: 100%;margin: 0 auto}
.btn_brown a.icon_y { padding: 20px 0 ;}
.btn_brown_under a.icon_y{ padding: 20px 0 20px 0; background: url(../img/shared/icons/icon_down_w.webp) no-repeat 96% center ;background-size: 15px}

}

/*          メニュー詳細        */

/* ---------- lightbox ---------- */
/*写真一覧*/

.lightbox .lb-image {
	border: unset !important;
  border-radius: unset !important;
	filter: drop-shadow(3px 3px 9px #000);
}
.lb-data .lb-details {
	float: right !important;
  width: fit-content !important;
}

/*ナビ*/

/*--------------------------
2025.12.2 月額会員・回数券
---------------------------*/

/* ---------- youtube banner ---------- */
/* YouTube Banner Style */
.youtube-banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff !important;
    color: #333 !important;
    padding: 10px 40px;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: transform 0.2s;
    font-size: 1.5rem;
    font-family: serif;
    height: auto;
    box-sizing: border-box;
}
.youtube-banner-content:hover {
    transform: translateY(-2px);
}
.youtube-banner-content svg {
    width: 55px;
    height: auto;
    margin-right: 20px;
}
.youtube-banner-content .yt-text {
    text-align: left;
    line-height: 1.4;
    letter-spacing: 1px;
}
@media (max-width: 767px) {
    .youtube-banner-content {
        padding: 10px 20px;
        font-size: 1.2rem;
    }
    .youtube-banner-content svg {
        width: 45px;
        margin-right: 15px;
    }
}

/* ---------- scroll nav (ページ最上部 / 最下部へ移動) ---------- */
/* z-index は SP ドロワー(99999)・モーダル(999999)・固定ヘッダー(999) より下に置く */
.scroll_nav{
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 500;
	display: flex;
	flex-direction: column;
	row-gap: 10px;
}
.scroll_nav_btn{
	width: 46px;
	height: 46px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--c-brown);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, opacity 0.2s ease;
}
.scroll_nav_btn:hover{background: #8A7967}
.scroll_nav_btn:focus-visible{outline: 2px solid var(--c-gold); outline-offset: 2px}
/* 端に到達したら押せないことを見た目でも示す */
.scroll_nav_btn:disabled{opacity: 0.3; cursor: default; box-shadow: none}
.scroll_nav_btn::before{
	content: "";
	width: 11px;
	height: 11px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}
.scroll_nav_btn.up::before{transform: translateY(2px) rotate(-45deg)}
.scroll_nav_btn.down::before{transform: translateY(-2px) rotate(135deg)}
@media (max-width: 767px) {
	.scroll_nav{right: 12px; bottom: 12px; row-gap: 8px}
	.scroll_nav_btn{width: 44px; height: 44px}
}

/* ---------- ユーティリティ ----------
   HTML の style 属性から移設した最小限の調整用クラス。
   新規のスタイルはできるだけコンポーネント側に持たせ、ここは増やさない。 */
.u_mt1{margin-top: 1em}
.u_mt2{margin-top: 2em}
.u_mb40{margin-bottom: 40px}
.u_mb80{margin-bottom: 80px}
.u_center{text-align: center}
.u_valign_middle{vertical-align: middle}

/* 画像の切り抜き (はじめての方へ の流れ図など) */
.img_circle{width: 100%;border-radius: 50%;aspect-ratio: 1 / 1;object-fit: cover}
.img_rounded{width: 100%;border-radius: 10px;object-fit: cover}

/* 番号付きリードリスト (施術メニュー) */
.list_lead{font-size: 1.1em;line-height: 2}
.u_mt3{margin-top: 3em}
.u_mb1em{margin-bottom: 1em}