/*
Theme Name: mimosa
Theme URI: https://mimosa-kyoto.com
Description: 京都着物レンタル mimosa 公式テーマ
Version: 1.0.0
Author: Your Name
*/

:root{

  /* ===============================
  Color
  =============================== */
  --color-main: #D41A10;
  --color-text: #6B4B3E;
  --color-bg-body: #805E37;
  --color-bg-main: #FFF5EC;
  --color-bg-menu: #FBEAEA;
  --color-white: #FFFCF8;
  --color-accent-beige: #E8DBC6;
  --color-accent-pink-1: #FFEAEA;
  --color-accent-pink-2: #FFD2D2;
  --color-border: #E9DDD6;

  /* ===============================
  Font Family
  =============================== */
  --font-en: "Braah One", sans-serif;
  --font-num: "Poppins", sans-serif;
  --font-ja: "Zen Kaku Gothic New", sans-serif;
  --font-article: "Noto Sans JP", sans-serif;

  /* ===============================
  Typography / clamp
  =============================== */
  --fz-h1: clamp(1.75rem, 1.636rem + 0.49vw, 2rem);
  --fz-h2: clamp(1.75rem, 1.636rem + 0.49vw, 2rem);
  --fz-h3: clamp(1.375rem, 1.261rem + 0.49vw, 1.5rem);
  --fz-text: clamp(0.875rem, 0.839rem + 0.16vw, 0.9375rem);

  /* ===============================
  Font Weight
  =============================== */
  --fw-bold: 700;
  --fw-medium: 500;

  /* ===============================
  Line Height
  =============================== */
  --lh-tight: 1.4;
  --lh-heading: 1.5;
  --lh-text: 1.8;

  /* ===============================
  Letter Spacing
  =============================== */
  --ls-base: 0.03em;

  /* ===============================
  Radius
  =============================== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 999px;

  --shadow-01:0 4px 16px rgba(89, 89, 89, 0.2);
  --transition: all .25s ease;
}


/* ===============================
RESET
=============================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

img{
width:100%;
display:block;
}

a{
text-decoration:none;
color:inherit;
}

ul{
list-style:none;
}

html, body{
  height: 100%;
}

body{
font-family: var(--font-ja);
  font-size: var(--fz-text);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  letter-spacing: var(--ls-base);
  color: var(--color-text);
  /* body背景をsite-wrapperと同色にする */
  /* → SafariでアドレスバーUI縮小時にコンテンツ下に茶色が透けるのを防ぐ */
  background: var(--color-bg-main);
  overflow-x: hidden;
}

h1, h2, h3, p{
  margin: 0;
}

h1{
  font-family: var(--font-ja);
  font-size: var(--fz-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
  color: var(--color-text);
}

h2{
  font-family: var(--font-ja);
  font-size: var(--fz-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
  color: var(--color-text);
}

h3{
  font-family: var(--font-ja);
  font-size: var(--fz-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-base);
  color: var(--color-text);
}

p,
li,
dt,
dd,
th,
td{
  font-family: var(--font-ja);
  font-size: var(--fz-text);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  letter-spacing: var(--ls-base);
  color: var(--color-text);
}

.font-en{
  font-family: var(--font-en);
}

.font-num{
  font-family: var(--font-num);
}

.font-article{
  font-family: var(--font-article);
}

.section-title{
  font-family: var(--font-ja);
  font-size: var(--fz-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
  color: var(--color-text);
  text-align: center;
  z-index: 20;
}

.block-title{
  font-family: var(--font-ja);
  font-size: var(--fz-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-base);
  color: var(--color-text);
}

.body-text{
  font-family: var(--font-ja);
  font-size: var(--fz-text);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  letter-spacing: var(--ls-base);
  color: var(--color-text);
}

.red{
    color: var(--color-main);
}

.section-title.red .font-en{
  font-size: var(--fz-h3);
  display: block;
}

/* ===============================
BACKGROUND
=============================== */

.site-bg{
  background: var(--color-bg-body);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* ===============================
PC LAYOUT
=============================== */

.pc-layout{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  min-height:100vh;
}

.pc-left,
.pc-right{

  width:510px;
  padding:60px 100px 0px 100px;

  color:var(--color-white);

}
/* 左メニュー */
.pc-left{
  text-align:left;
}
.pc-nav-title{

display:flex;
align-items:center;
gap:8px;

font-weight:700;

margin-bottom:4px;

color: var(--color-accent-pink-2);

position: relative;

}

.pc-nav-title img{

  width: 25px;

}


.pc-nav-list{

position:relative;

padding-left:24px;

}
.pc-nav-list::before{

content:"";

position:absolute;

left: 10.5px;
top: 15px;
width: 1px;
height: calc(100% - 30px);

background:var(--color-accent-pink-2);

}

.pc-nav-list li{

position:relative;

margin-bottom:4px;

font-size:14px;

color: var(--color-white);

}

.pc-nav-list li::before{

content:"";

position:absolute;

left:-16.5px;
top:10px;

width:6px;
height:6px;

border-radius:50%;

background:var(--color-accent-pink-2);

}

.pc-nav-title::after{

content:"";

display:block;

width:1px;
height:24px;

border-left:1px dashed var(--color-accent-pink-2);

margin-left:10px;

position: absolute;

top: 30px;

}

.pc-left-btn{

margin-top:20px;

display:flex;
flex-direction:column;
gap:0px;

}

.pc-left-btn a{
  position: relative;
}

.pc-left-btn a:nth-child(1) img{
width:146px;
margin: 0 auto 0 0;
}

.pc-left-btn a:nth-child(2){
margin-top: -15px;
}

.pc-left-btn a:nth-child(2) img{
width:176px;
margin: 0 0 0 auto;
}

.pc-left-btn a:nth-child(1) .img-hover{
position:absolute;
top:0;
left:0;

opacity:0;
}

.pc-left-btn a:nth-child(2) .img-hover{
position:absolute;
top:0;
right:0;

opacity:0;
}

.pc-left-btn a:hover .img-hover{
opacity:1;
}

.pc-left-btn a:hover .img-main{
opacity:0;
}

/* 右メニュー */

.pc-right{
  text-align:left;
  gap: 32px;
}

.pc-logo{

width:140px;
margin:0 auto;

}


.pc-info{

text-align:left;

font-size:16px;
line-height:1.8;

}

p.pc-info-title{

font-weight:700;
margin-top:20px;

font-size: 18px;

color: var(--color-accent-pink-2)!important;

}

.pc-info p{

color: var(--color-white);

}


.pc-sns{

display:flex;
justify-content: flex-start;
gap:12px;

}

.pc-sns a{

font-size: 28px;

width: 60px;
height: 60px;

border: 5px solid var(--color-border);
border-radius: var(--radius-xl);

background-color: var(--color-white);

display: flex;
justify-content: center;
align-items: center;

color: var(--color-text);

transition: .3s background;

}

.pc-sns a:hover{

background-color: var(--color-border);

}



.pc-left,
.pc-right{
  display:none;
}


@media (min-width:1200px){

  .pc-left,
  .pc-right{
        display: flex;
        flex-direction: column;
  }

}

/* ===============================
MOBILE WRAPPER
=============================== */

.site-wrapper{

  /* モバイルでは画面幅いっぱい、PCでは最大430pxに制限 */
  width: 100%;
  max-width: 430px;

  /* 茶色（.site-bg）が下に見えないよう最低画面高さを確保 */
  min-height: 100vh;

  background: var(--color-bg-main);

  position: relative;

  overflow-x: hidden;

  /* scroll-behavior は JS 側で制御 */

  /* PCでの左右中央寄せ */
  margin: 0 auto;

  /* モバイル: fixed ヘッダーの高さ分だけ上に余白を確保 */
  padding-top: 80px;

}


/* ===============================
HEADER
=============================== */

.header{

/* モバイル: body スクロール時は sticky が効かないので fixed に変更 */
position:fixed;
top:0;
left:0;
right:0;

background:transparent;

z-index:2000;

padding:12px 24px;
height: 80px;

transition: background .3s ease;

/* モバイルではsite-wrapperの幅に合わせる */
max-width: 430px;
margin: 0 auto;

}

.header.is-scroll{

background:var(--color-bg-main);

}

.header-inner{

display:flex;
justify-content:space-between;
align-items:center;

}
.logo{
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: start;
}
.logo .logomain{
height:42px;
width: auto;
}

.logo .logotxt{
height:13px;
width: auto;
}

.header-right{

display:flex;
gap:12px;
align-items:center;

}

body.menu-open header,
body.menu-open header.is-scroll{

background: transparent;

}

/* ===============================
LANG SELECT
=============================== */

.lang-switch-wrapper{
position:relative;
display:inline-block;
}

.lang-switch{

appearance: none;
-webkit-appearance: none;
-moz-appearance: none;

font-family: "Poppins";

padding:12px 36px 12px 12px; /* ←右に余白 */

border-radius:4px;

background-color: var(--color-text);
color:var(--color-white);

font-size:12px;

border:none;

cursor:pointer;

background-image: none; /* 念のため */

position: relative;

}


.lang-switch-wrapper::after{

content:"";

position:absolute;

right:12px;
top:calc(50% - 3px);

width:6px;
height:6px;

border-right:1px solid var(--color-white);
border-bottom:1px solid var(--color-white);

transform:translateY(-50%) rotate(45deg);

pointer-events:none;

}

/* ===============================
HAMBURGER
=============================== */

.hamburger{

width:56px;
height:56px;

border:none;
background:#fff;

border-radius: var(--radius-xl);

display:flex;
flex-direction:column;
justify-content:center;
align-items: center;
gap:4px;

cursor:pointer;

}

.hamburger span{

height:2px;
background:var(--color-bg-body);
width: 25px;
margin-top: 2px;

transition:
transform .35s ease,
top .35s ease;
}

.menu-text,.close-text{
    font-family: var(--font-num);
    font-size: 11px;
    text-align: center;
    font-weight: 600;
    color: var(--color-text);
}

.close-text{
  display:none;
}

.hamburger.active .menu-text{
  display:none;
}

.hamburger.active .close-text{
  display:block;
}

/* OPEN状態 */

.hamburger.active span:nth-child(1){
transform:rotate(45deg) translate(3px,3px);
}

.hamburger.active span:nth-child(2){
transform:rotate(-45deg) translate(3px,-3px);
}



/* ===============================
MENU MODAL
=============================== */

.menu-modal{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.4);

opacity:0;
visibility:hidden;
transform:translateY(-10px);

transition:
opacity .35s ease,
transform .35s ease,
visibility .35s;

justify-content:center;

z-index:1500;


}

/* 開いた状態 */

.menu-modal.is-open{

opacity:1;
visibility:visible;
transform:translateY(0);

}

.menu-inner{

width:430px;
background:var(--color-accent-pink-1);
height:100%;
padding:80px 24px 40px;

overflow:auto;

}

.menu-nav h3{

color:var(--color-main);
margin-bottom: 10px;
font-size: 18px;

}

.menu-nav ul{

margin-bottom:20px;

}

.menu-nav li{

padding:0px 0px 4px;

position:relative;

padding-left:14px;

}

.menu-nav li::before{

content:"";

position:absolute;

left:0;
top:0.8em;

width:6px;
height:6px;

border-radius:50%;

background:var(--color-accent-pink-2);

}

.menu-nav li:last-child{
margin-bottom: 12px;
border-bottom: 1px solid var(--color-white);

}


/* ===============================
MENU BUTTON
=============================== */

.menu-buttons{

display:flex;
flex-direction: column;
gap:0px;
margin-top:12px;
padding: 0 56px;

}
.menu-buttons img{
  height: 60px;
  width: auto;
}
.btn-access{

  margin: 0 auto 0 0;
flex:1;

}

.btn-reserve{

 margin: -34px 0 0 auto;
flex:1;

}


/* ===============================
FV
=============================== */

.fv{
/* padding-top: 80px; */
height:750px;
position:relative;
background-image:url("../images/fv.png");
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}

.fv-text{

position:absolute;

bottom:46px;
left:20px;

}

.fv-text img{
width: 177px;
height: auto;
margin-bottom: 8px;
}

.fv-title span{

display:inline-block;

background:#fff;

color: var(--color-main);

padding:0px 4px 0px 0px;

border-bottom:2px dashed var(--color-main);

margin-bottom:8px;

}

.fv-btn{

display:inline-flex;

align-items:center;
gap:16px;

margin-top:24px;

background:var(--color-main);
color:#fff;

padding:12px 32px;

border-radius:40px;

font-weight:700;

box-shadow: var(--shadow-01);

transition: var(--transition);

}

.fv-btn:hover{
    box-shadow: none;
    opacity: 0.6;
}

.arrow{

width:24px;
height:24px;

background:#fff;

border-radius:var(--radius-xl);

position:relative;

}

.arrow::before{

content:"";

position:absolute;

top:50%;
left:50%;

width:3px;
height:4px;

background-image:url("../images/btn_arrow.png");
background-repeat:no-repeat;
background-size:contain;
background-position:center;

transform:translate(-50%,-50%);

}


/* ===============================
NEWS
=============================== */

.news-item{

display:flex;
flex-direction: column;
gap:14px;
padding: 16px 16px 20px;
background-color: var(--color-white);
width: 100%;
border-radius: var(--radius-md);
margin-bottom: 20px;

}

/* アイキャッチ画像を正しいアスペクト比で表示 */
.news-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

.news-text{

flex:1;
position:relative;

}

.news-title{

font-size:18px;
width: 100%;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

}

.news-date{

font-size:13px;

}

.news-more,.blog-more{

font-size:13px;
padding: 8px 16px;

color:#fff;
background-color: var(--color-text);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-01);
transition: var(--transition);

margin: 0 0 0 auto;

}

.news-more:hover,.blog-more:hover{
    box-shadow: none;
}


/* ===============================
SECTION
=============================== */

section{

padding:40px 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;

}

h2{

font-size:24px;
margin-bottom:20px;

}

/* ===============================
BANNER
=============================== */

.banner a{
    transition: var(--transition);
}

.banner a:hover{
    opacity: .6;
}


/* ===============================
REASON
=============================== */

.points{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.reason-item::before{

content:"";

position:absolute;

pointer-events: none;

z-index:-1;

}

.reason-item:nth-child(1)::before{

width: 160%;
height: 75%;

top: -80px;
left: -140px;

background:url("../images/reason_bg01.png") no-repeat center/contain;

}

.reason-item:nth-child(2)::before{

width:140%;
height:140%;

top: -180px;
right: -130px;

background:url("../images/reason_bg02.png") no-repeat center/contain;

}

.reason-item:nth-child(3)::before{

width:140%;
height:140%;

top: -170px;
left: -150px;

background:url("../images/reason_bg03.png") no-repeat center/contain;

}

.reason-item:nth-child(4)::before{

width:150%;
height:150%;

top: -180px;
right: -130px;

background:url("../images/reason_bg04.png") no-repeat center/contain;

}

.reason-item:nth-child(5)::before{

width:155%;
height:155%;

top: -140px;
left: -140px;

background:url("../images/reason_bg05.png") no-repeat center/contain;

}

.reason-item{
display: flex;
flex-direction: column;
position:relative;
z-index:1;
}

.reason-item:nth-child(odd){

align-items: flex-start;

}

.reason-item:nth-child(even){

align-items: flex-end;

}

.reason-item:nth-child(odd) .reason-point{

left:-10px;

}

.reason-item:nth-child(even) .reason-point{

right:-10px;

}

.reason-head{

position:relative;

}


.reason-point{

position:absolute;


width:100px;

z-index:2;

}


.reason-title{

display:inline-block;

background:var(--color-main);
color:#fff;

font-size:18px;
font-weight:bold;

padding:0px 5px 0px 3px;

margin-top: 36px;

}

.reason-text{

margin-top:12px;

color:var(--color-brown);

line-height:1.8;

}

.reason-img{
margin-top:20px;

margin-left:-24px;
margin-right:-24px;

overflow:hidden;
}

.reason-img img{

width:110%;
max-width:none;

display:block;

margin-left:-5%;

}


/* ===============================
KIMONO SLIDER
=============================== */

/* ラッパー：グラデ背景＋相対配置の起点 */
.kimono-slider-wrap {
  position: relative;
  /* 親の .reason-img の margin-left/right: -24px を引き継ぐ */
  width: calc(100% + 48px); /* 親のネガティブマージン分を打ち消して全幅 */
  margin-left: -24px;
  margin-right: -24px;
  margin-top: 20px;
  overflow: visible; /* スライド画像が上方向にはみ出せるよう */
  padding-bottom: 72px; /* ナビ・ページネーション分の余白 */
}

/* Swiper本体 */
.kimono-slider {
  position: relative;
  z-index: 2;
  /* スライドが上方向にはみ出す（人物の足元から始まり頭は上にはみ出す）ため
     padding-topで上余白を確保 */
  padding-top: 20px;
  overflow: visible !important;
}

/* swiper-wrapper はオーバーフロー可能にしてはみ出しを表現 */
.kimono-slider .swiper-wrapper {
  align-items: flex-end; /* スライドを下揃えにして人物が"立っている"ように */
}

/* 各スライド */
.kimono-slide {
  background: transparent !important;
  border-radius: 0 !important;
  /* スライドの高さ：画像が大きく見えるよう固定しない */
  height: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.kimono-img {
  width: auto !important;
  /* 高さをスライダーの基準高さに合わせる */
  height: 290px;
  max-width: none !important;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  /* 次スライドが少し見えるよう scale で奥行き感を出す（アクティブ以外を少し縮小） */
  transition: transform 0.4s ease, filter 0.4s ease;
  transform-origin: bottom center;
}

/* アクティブスライドは少し大きく */
.kimono-slide.swiper-slide-active .kimono-img {
  transform: scale(1.0);
}

/* 隣接スライドは少し縮小 */
.kimono-slide.swiper-slide-next .kimono-img,
.kimono-slide.swiper-slide-prev .kimono-img {
  transform: scale(0.9);
}

/* ===============================
SLIDER CONTROLS（共通）
kimono / plan / hairmake 全スライダーで共用
=============================== */

/* コントロール全体（ナビ＋ページネーション） */
.kimono-slider-controls,
.plan-slider-controls,
.hairmake-slider-controls {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
}

/* ナビゲーションボタン群 */
.kimono-nav,
.plan-nav,
.hairmake-nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* 共通ボタンスタイル */
.kimono-btn-prev,
.kimono-btn-next,
.plan-btn-prev,
.plan-btn-next,
.hairmake-btn-prev,
.hairmake-btn-next {
  width: 27px;
  height: 27px;
  border-radius: var(--radius-xl);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
  font-size: 12px;
}

/* 前へボタン：赤背景・白アイコン */
.kimono-btn-prev,
.plan-btn-prev,
.hairmake-btn-prev {
  background: var(--color-main);
  color: #fff;
}

.kimono-btn-prev:hover,
.plan-btn-prev:hover,
.hairmake-btn-prev:hover {
  opacity: 0.8;
  transform: scale(0.95);
}

/* 次へボタン：白背景・赤ボーダー・赤アイコン */
.kimono-btn-next,
.plan-btn-next,
.hairmake-btn-next {
  background: #fff;
  color: var(--color-main);
  border: 1px solid var(--color-main);
}

.kimono-btn-next:hover,
.plan-btn-next:hover,
.hairmake-btn-next:hover {
  opacity: 0.8;
  transform: scale(0.95);
}

/* disabled状態 */
.kimono-btn-prev:disabled,
.kimono-btn-next:disabled,
.plan-btn-prev:disabled,
.plan-btn-next:disabled,
.hairmake-btn-prev:disabled,
.hairmake-btn-next:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ページネーション */
.kimono-pagination,
.plan-pagination,
.hairmake-pagination {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Bullet（横長ダッシュ型） */
.kimono-pagination .swiper-pagination-bullet,
.plan-pagination .swiper-pagination-bullet,
.hairmake-pagination .swiper-pagination-bullet {
  width: 16px;
  height: 5px;
  border-radius: var(--radius-xl);
  background: var(--color-accent-beige);
  opacity: 1;
  transition: background 0.3s ease;
  margin: 0 !important;
}

.kimono-pagination .swiper-pagination-bullet-active,
.plan-pagination .swiper-pagination-bullet-active,
.hairmake-pagination .swiper-pagination-bullet-active {
  background: var(--color-accent-pink-2);
}



/* ===============================
PLAN
=============================== */

.plan p{
  z-index: 20;
}

.plan-list{

width: 100%;
display: flex;
flex-direction: column;
gap: 46px;
margin: 26px 0;

}

.plan-cont{

position: relative;

z-index:1;

}

.plan-cont::before{

content:"";

position:absolute;

pointer-events: none;

z-index:-1;

width: 70%;
height: 15%;

top: -45px;
left: -50px;

background:url("../images/plan_bg.png") no-repeat center/contain;

}




/* ===============================
PLAN SLIDER
=============================== */

/* ラッパー：グラデ背景＋相対配置の起点 */
.plan-slider-wrap {
  position: relative;
  /* 親の .reason-img の margin-left/right: -24px を引き継ぐ */
  width: calc(100% + 48px); /* 親のネガティブマージン分を打ち消して全幅 */
  margin-left: -24px;
  margin-right: -24px;
  margin-top: 20px;
  overflow: visible; /* スライド画像が上方向にはみ出せるよう */
  padding-bottom: 72px; /* ナビ・ページネーション分の余白 */
  padding-left: 24px;
}

/* Swiper本体 */
.plan-slider {
  position: relative;
  z-index: 2;
  /* スライドが上方向にはみ出す（人物の足元から始まり頭は上にはみ出す）ため
     padding-topで上余白を確保 */
  padding-top: 20px;
  overflow: visible !important;
}

/* swiper-wrapper はオーバーフロー可能にしてはみ出しを表現 */
.plan-slider .swiper-wrapper {
  align-items: stretch; /* スライドを下揃えにして人物が"立っている"ように */
  gap: 16px;
}

/* 各スライド */
.plan-slide {

  background:var(--color-white);

  border: 2px solid var(--color-white);

  border-radius:var(--radius-md);

  overflow:hidden;

  height:auto;

  display:flex;
  flex-direction:column;

}

.plan-img img{

width:100%;
display:block;

}

.plan-content{

padding:16px;

}

.plan-title{

display:flex;
align-items:center;
gap:4px;

font-size:20px;
font-weight:700;

color:var(--color-main);

margin-bottom:6px;

}

img.plan-title-icon{

width:27px;
height:auto;

}

.plan-title span{

  font-size: var(--fz-text);

}

.plan-time{
  font-size: 13px;
  font-family: var(--font-num);
  margin-right: 6px;
}

.plan-time .fa-clock{
  margin-right: 3px;
}

.column{

  display: flex;
  flex-direction: column;

}

.plan-price{

margin-bottom:6px;

color:#6b4f3a;

}

.plan-price-main{

font-size:20px;

margin-right:4px;

font-family: var(--font-num);

}

.price-old{
text-decoration: line-through;
font-size: small;
}

.plan-price-tax{

font-size:12px;

}

.plan-price.left{

border-left: 3px solid var(--color-main);
padding-left: 5px;

}

.plan-desc{

background:var(--color-accent-pink-1);

padding:8px;

margin-bottom:8px;

}

.plan-desc.beige{

background:var(--color-accent-beige);

}

.plan-btn{

display:block;
position:relative;

text-align:center;
text-decoration:none;

}

.plan-btn-border{

position:absolute;

top:4px;
left:0px;

width:100%;
height:100%;

border:1px solid var(--color-main);
border-radius:2px;

}

.plan-btn-text{

display:block;

background:var(--color-main);
color:#fff;

padding:12px;

border-radius:2px;

transform:translate(4px,0px);

transition:transform .25s ease;

}

.plan-btn:hover .plan-btn-text{

transform:translate(0px,4px);

}

/* ===============================
SWIPER（共通）
=============================== */

.swiper{

width:100%;
}


/* ===============================
SET CONTENT 
=============================== */

.set-box,.option-box{

border:4px solid var(--color-main);

border-radius:var(--radius-md);

position:relative;

background:var(--color-accent-pink-1);

width: 100%;

}

.set-box{

background:var(--color-accent-pink-1);

}

.set-box::after,.option-box::after{

content:"";

position:absolute;

top:13px;
right:13px;

width:45px;
height:45px;

background:url("../images/cont_bg01.png") no-repeat center/contain;

}

.set-inner{

padding:24px 20px;

text-align:center;

}

.set-title,.option-title,.return-title{

font-size:24px;
font-weight:700;

color:var(--color-main);

margin-bottom:16px;

position:relative;

}

.set-line{

display:block;

width:120px;
height:10px;

margin:8px auto 0;

background:url("../images/cont_line_p.png") no-repeat center/contain;

}

.set-visual{

margin:20px 0;

}

.set-visual img{

width:100%;
height:auto;
display:block;

}

.set-catch{

font-size:18px;
font-weight:700;

color:var(--color-main);

margin-top:10px;
margin-bottom:10px;

}

.set-text{

line-height:1.8;

font-size:16px;

}

/* OPTION */

.option-box{

background:var(--color-white);

}

.option-inner,.return-inner{

padding:24px 20px;

}

.option-title,.return-title{
  text-align: center;
}

.option-title .set-line,.return-title .set-line{

background:url("../images/cont_line_b.png") no-repeat center/contain;

}

.option-list{

display:grid;
grid-template-columns:1fr 1fr;

gap:12px 16px;

list-style:none;
padding:0;
margin:0;

}


.option-list li{

display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 0px 8px;

border-bottom: 1px solid var(--color-main);

padding-bottom: 4px;

}

.option-list li small{

grid-column:1 / -1;

font-size:10px;

}

/* RETURN BOX */

.return-box{

border:4px solid var(--color-main);

border-radius:var(--radius-md);

position:relative;

background:var(--color-white);

z-index: 2;

}

.return-box::after{

content:"";

position:absolute;

top:13px;
left:13px;

width:45px;
height:45px;

background:url("../images/cont_bg02.png") no-repeat center/contain;

}

.return-item{

display:flex;
gap:16px;

align-items:flex-start;

margin-bottom:24px;

}

.return-item:last-child{

margin-bottom:0px;

}

.return-fee{

width:74px;
height:74px;

border-radius:50%;

background:var(--color-text);

color:#fff;

display:flex;
align-items:center;
justify-content:center;

text-align:center;

font-size:15px;
font-weight:700;

flex-shrink:0;

line-height: 120%;

}

.return-content{

flex:1;

}

.return-heading{

font-size:20px;
font-weight:700;

color:var(--color-main);

margin-bottom:8px;

}

.return-heading .num{

margin-right:2px;

text-decoration:underline;

font-family: var(--font-num);

}

.return-content p{

line-height:1.7;

margin-bottom:6px;

}

.highlight{

color:var(--color-main);
font-weight:700;

}

.return-sub{

margin-top:8px;

font-size:14px;

}

.return-sep{

border-top:2px dashed var(--color-border);

margin:20px 0;

}

.return-note{

text-align:center;

margin-bottom:20px;

font-weight:700;

}


/* ===============================
HAIRMAKE
=============================== */
.hairmake{
  position: relative;

  z-index: 1;
}

.hairmake::before{

content:"";

position:absolute;

pointer-events: none;

z-index:-1;

width: 120%;
height: 30%;

top: -75px;
left: -20px;


background:url("../images/hairmake_bg.png") no-repeat center/contain;

}

/* ===============================
HAIRMAKE SLIDER
=============================== */

/* ラッパー：相対配置の起点 */
.hairmake-slider-wrap {
  position: relative;
  /* 親の .reason-img の margin-left/right: -24px を引き継ぐ */
  width: 100%; /* 親のネガティブマージン分を打ち消して全幅 */
  /* margin-left: -24px;
  margin-right: -24px; */
  margin-top: 20px;
  overflow: visible; /* スライド画像が上方向にはみ出せるよう */
  padding-bottom: 72px; /* ナビ・ページネーション分の余白 */
}

.hairmake-slider-wrap::before{

content:"";

position:absolute;

pointer-events: none;

z-index:2;

width: 120%;
height: 90%;

top: -24px;
left: -35px;


background:url("../images/hairmake_deco.png") no-repeat center/contain;

}

/* Swiper本体 */
.hairmake-slider {
  position: relative;
  z-index: 2;
  /* スライドが上方向にはみ出す（人物の足元から始まり頭は上にはみ出す）ため
     padding-topで上余白を確保 */
  padding-top: 20px;
  overflow: visible !important;
}

/* swiper-wrapper はオーバーフロー可能にしてはみ出しを表現 */
.hairmake-slider .swiper-wrapper {
  align-items: center; 
}

/* 各スライド */
.hairmake-slide {
  background: transparent !important;
  border-radius: 0 !important;
  /* スライドの高さ：画像が大きく見えるよう固定しない */
  height: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.hairmake-img {
  width: auto !important;
  /* 高さをスライダーの基準高さに合わせる */
  height: 314px;
  max-width: none !important;
  object-fit: contain;
  display: block;
  margin: 0 16px 0 0;
  /* 次スライドが少し見えるよう scale で奥行き感を出す（アクティブ以外を少し縮小） */
  transition: transform 0.4s ease, filter 0.4s ease;
  transform-origin: bottom center;
}

/* ===============================
HAIRMAKE BOX
=============================== */

.hairmake-box{

position:relative;
z-index: 1;
width: 100%;
}

.hairmake-box::before{

content:"";

position:absolute;

pointer-events: none;

z-index:-1;

width: 140%;
height: 80%;

top: 60px;
left: -70px;


background:url("../images/hairset_bg.png") no-repeat center/contain;

}

.hairmake-section{

margin-bottom:60px;

position:relative;

}
.hairmake-section.hair{

text-align: left;

}

.hairmake-section.makeup{

text-align: right;

}

.hairmake-section .center{

text-align: center;

margin-top: 60px;

}

.hairmake-section.makeup::before{

content:"";

position:absolute;

pointer-events: none;

z-index:-1;

width: 160%;
height: 250%;

top: 40px;
left: -120px;


background:url("../images/makeup-shooting_bg.png") no-repeat center/contain;

}


.hairmake-title{

display:inline-block;

color:#fff;

font-size:18px;
font-weight:700;

padding:10px 24px;

background:url("../images/midashi_hairset.png") no-repeat center/contain;

}

.makeup .hairmake-title{

display:inline-block;

color:#fff;

font-size:18px;
font-weight:700;

padding:10px 24px;

background:url("../images/midashi_makeup.png") no-repeat center/contain;

margin-bottom:12px;

}

.hairmake-price{

margin-bottom:12px;

}

.hairmake-price .num{

font-size:22px;

margin-right:4px;

font-family: var(--font-num);

}

.hairmake-price .tax{

font-size:14px;

}

.hairmake-text{

line-height:1.8;

margin-bottom:16px;

}

.hairmake-highlight{

color:var(--color-main);

font-weight:700;

margin:16px 0 10px;

font-size: 18px;

}

.hairmake-sub{

font-size:14px;
line-height:1.8;

margin-bottom:20px;

}

.hairmake-visual{

margin-top:20px;

}

.hairmake-visual img{

width:100%;
height:auto;

display:block;

}

/* ===============================
PREMIUM
=============================== */

.premium *{
  z-index: 3;
}

.recommended{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 12px;
}
.recommended li{
  background-color: var(--color-accent-pink-2);
  padding: 4px 8px;
  border-radius: 3px;
  border-left: 2px solid var(--color-main);
  text-align: center;
  font-size: 16px;
  font-weight: 400;
}

.datail-list{
  list-style-type: disc;
  margin-left: 24px;
}

/* FREE HAIRSET */

.option-box.free-hairset{

background:var(--color-main);

}

.option-box.free-hairset::after{

content:"";

position:absolute;

top:13px;
right:13px;

width:45px;
height:45px;

background:url("../images/cont_bg03.png") no-repeat center/contain;

}

.free-hairset .option-title{
  color: var(--color-white);
}

.free-hairset p{
  color: var(--color-white);
  text-align: center;
}


/* ===============================
FLOW
=============================== */

.flow{
  position: relative;

  z-index: 2;
}

.flow::before{

content:"";

position:absolute;

pointer-events: none;

z-index:-1;

width: 120%;
height: 30%;

top: -220px;
left: -20px;


background:url("../images/hairset-flow_bg.png") no-repeat center/contain;

}

.flow-chart{
display:flex;
flex-direction:column;
gap:64px;
width: 100%;
}

.flow-box{

background:var(--color-white);

border-radius:60px 0px 60px 0px;

padding:28px 20px 24px 28px;

position:relative;

}

.flow-step{

position:absolute;

top:-28px;
left:24px;

font-size:29px;
font-weight:500;

font-family: var(--font-num);

color:#D0B993;

}

.flow-step span{

font-size:36px;
margin-left: 4px;
}

.flow-content{

display:flex;
align-items:center;
gap:20px;
justify-content: space-between;

}

.flow-item.reverse .flow-content{
flex-direction:row-reverse;
}

.flow-item.reverse .flow-step{
right: 24px;
left: 0;
text-align: right;
}

.flow-text{
  text-align: left;
  position: relative;
}

.flow-item.reverse .flow-text{
  width: 200px;
  margin: 0 0 0 auto;
}


.flow-text h3{

font-size:18px;
font-weight:700;

margin-bottom:8px;

}

.flow-text p{

font-size:14px;
line-height:1.3;

}


.float{

  position: absolute;
  z-index: 5;
}

.flow01{
  width: 180px;
  height: auto;
}

.flow02{
  width: 243px;
  height: auto;
  top: -80px;
  left: -90px;
}

.flow03{
  width: 250px;
  height: auto;
  left: 220px;
  top: -25px;
}

.flow04{
  width: 240px;
  height: auto;
  top: -50px;
  left: -90px;
}
/* ===============================
FAQ
=============================== */

.faq{
  position: relative;

  z-index: 1;
}

.faq::before{

content:"";

position:absolute;

pointer-events: none;

z-index:-1;

width: 120%;
height: 40%;

top: -150px;
left: -40px;


background:url("../images/flow-faq_bg.png") no-repeat center/contain;

}

.faq-box{
display:flex;
flex-direction:column;
gap:12px;
}

.faq-item{
border-radius:12px;
overflow:hidden;
background:var(--color-white);
}

.faq-question{

display:flex;
align-items:center;
gap:12px;

padding:12px;

cursor:pointer;

position:relative;

transition:.3s;

}

.faq-icon{

width:25px;
height:25px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

font-weight:400;
font-size: 15px;
font-family: var(--font-num);

background:var(--color-main);
color:var(--color-white);

flex-shrink:0;

}

.faq-toggle{

margin-left:auto;

width:16px;
height:2px;

background:var(--color-main);

position:relative;

padding-left: 16px;

}

.faq-toggle::before{

content:"";

position:absolute;

width:2px;
height:16px;

background:var(--color-main);

top:-7px;
left:7px;

transition:.3s;

}

.faq-item.is-open .faq-toggle::before{
opacity:0;
}

.faq-item.is-open .faq-question{

background:var(--color-accent-beige);
color:var(--color-white);

}

.faq-item.is-open .faq-question .faq-icon{

background:var(--color-white);
color:var(--color-main);

}

.faq-answer{

max-height:0;
overflow:hidden;

transition:max-height .4s ease;

display:flex;

padding:0 12px;

background:var(--color-white);

gap:12px;

}

.faq-item.is-open .faq-answer{
max-height:200px;
padding:12px;
}

.faq-icon.answer{
background:var(--color-main);
color:var(--color-white);
}

/* ===============================
ACCESS
=============================== */

.access{
  position: relative;

  z-index: 1;
}

.access::before{

content:"";

position:absolute;

pointer-events: none;

z-index:-1;

width: 80%;
height: 10%;

top: -70px;
left: 90px;


background:url("../images/access_bg.png") no-repeat center/contain;

}

.access-section{
  position: relative;
}

.access-title{
  text-align: center;
  color: var(--color-text);
  margin-bottom: 28px;
}

.access-photos{
  position: relative;
  z-index: 1;
}

.access-photos::before{

content:"";

position:absolute;

pointer-events: none;

z-index:-1;

width: 140%;
height: 250%;

top: 110px;
left: -80px;


background:url("../images/access_bg02.png") no-repeat center/contain;

}
.access-photos img{
  width: 100%;
  height: auto;
}

.access-info{
  display: flex;
  flex-direction: column;
  gap: 0;
}

.access-block{
  padding: 28px 0;
  border-bottom: 1px solid var(--color-border);
}

.access-heading{
  color: var(--color-text);
  margin-bottom: 18px;
  font-size: 18px;
}

.access-text{
  color: var(--color-text);
  line-height: 160%;
  font-size: 15px;
}

.access-spot-list{
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.access-spot-list li{
  display: flex;
  gap: 10px;
  color: var(--color-text);
  line-height: 160%;
}

.access-spot-list li span:first-child{
  min-width: 8em;
}


.access iframe{

width:100%;
height:360px;

border:none;

margin-top:10px;

}


/* ===============================
SPOTS
=============================== */

.spots{
  position: relative;

  z-index: 1;
}

.spots::before{

content:"";

position:absolute;

pointer-events: none;

z-index:-1;

width: 125%;
height: 100%;

top: -150px;
left: -60px;


background:url("../images/photospot_bg.png") no-repeat center/contain;

}

.spots .center{
  text-align: center;
}

.spot{
display:flex;
flex-direction:column;
gap:40px;
}

.spot-item{
display:flex;
align-items:center;
gap:0px;
position: relative;
}

.spot-item.reverse{
flex-direction:row-reverse;
}

.spot-img{

width:70%;

}

.spot-img img{

width:100%;
height:auto;

display:block;

}

.spot-overlay{

position:absolute;

}

.spot-catch{

padding:0px 4px 2px;

font-size:15px;

margin-bottom:6px;

display:inline-block;

}

.spot01{
  text-align: right;
  right: 0px;
  top: 50px;
}

.spot02{
  text-align: left;
  left: 0px;
  bottom: 40px;
}

.spot03{
  text-align: right;
  right: 0px;
  bottom: 0px;
}

.spot01 .spot-catch{
  background:#FFD2D2CC;
}

.spot02 .spot-catch{
  background:#E3DBF3CC;
}

.spot03 .spot-catch{
  background:#FFF2BECC;
}

.spot-text{

flex:1;

}

.spot-text h3{

font-size:20px;
font-weight:700;

margin-bottom:6px;

}

.spot-text p{

font-size:14px;

}



/* ===============================
BLOG
=============================== */

section.blog{
  margin-bottom: 60px;
}

.blog-slider-wrap{
  position: relative;
    width: calc(100% + 48px);
    margin-left: -24px;
    margin-right: -24px;
    overflow: visible;
    padding-left: 24px;
}

.blog-cont{

display:flex;
flex-direction: column;
gap:14px;
padding: 16px 16px 20px;
background-color: var(--color-white);
width: 100%;
border-radius: var(--radius-md);
margin-bottom: 20px;

}

.blog-img{
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;  /* 246×164px のデザイン比率に合わせて統一 */
  object-fit: cover;
  display: block;
  border-radius: var(--radius-sm);
}

.blog-text{

flex:1;
position:relative;

}

.blog-title{

font-size:18px;
width: 100%;
display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; 
overflow:hidden;

}

.blog-date{

font-size:13px;

}




/* ===============================
FOOTER
=============================== */

.footer{

position:relative;

background:var(--color-main);

color:#fff;

text-align:center;

padding:60px 20px 100px;


}
.footer-deco-top{

position:absolute;

top: -40px;
left: -10px;

width: 90%;
height: 90px;

background:url("../images/footer_top_deco.png") no-repeat center top / cover;

}

.footer-inner{
position:relative;
z-index:1;
}

.footer-title{

font-size:20px;
font-weight:700;
height: 20px;
text-align: center;

margin-bottom:30px;

}

.footer-title img{
height: 100%;
width: auto;
margin: 0 auto;
}

.footer-nav{

display:flex;
justify-content:center;

gap:40px;

margin-bottom:30px;

text-align: left;

}

.footer-nav ul{
list-style:none;
padding:0;
margin:0;
}

.footer-nav li{

margin-bottom:10px;

position:relative;

padding-left:14px;

transition: .3s;
}

.footer-nav li:hover{
opacity: 0.6;
}

.footer-nav li::before{

content:"";

position:absolute;

left:0;
top:0.6em;

width:9px;
height:9px;

border-radius:50%;

background:var(--color-white);

}

.footer-nav a{

color:var(--color-white);
text-decoration:none;

font-size:14px;

}

.footer-sns{

display:flex;
justify-content:center;

gap:12px;

margin-bottom:30px;


}

.footer-sns a{

width:42px;
height:42px;

border: solid 1px var(--color-white);
color: var(--color-white);
border-radius: 50%;

font-size: 20px;
line-height: 20px;

display: flex;
align-items: center;
justify-content: center;

transition: .3s;

}

.footer-sns a:hover{

color: var(--color-main);
background-color: var(--color-accent-pink-2);

}


.footer-links{

font-size:13px;

line-height:2;

margin-bottom:20px;

}

.footer-links a{
color:var(--color-white);
text-decoration:none;
}

.footer-copy{

font-size:11px;

font-family: var(--font-num);

font-weight: 200;

color: var(--color-white);

opacity:0.9;

}

.footer-deco{

position:absolute;

bottom:70px;
left: 0px;

width: 100%;
height: 45px;

background:url("../images/footer_btm_bg.png") no-repeat center / contain;

}

/* ===============================
FIXED CTA
=============================== */

.fixed-cta{

position:fixed;

bottom:0;
left:50%;

transform:translateX(-50%);

width:430px;

height: 70px;

display:flex;

z-index:500;

}

.cta-access{

flex:1;
background: var(--color-accent-pink-2);
padding: 4px;
border-radius: 4px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

}

.cta-reserve{

flex:1;
background:var(--color-main);
color:var(--color-white);
padding: 4px;
border-radius: 4px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

}

.cta-access div,.cta-reserve div{

border: 1px solid var(--color-white);

border-radius: 2px;

height: 100%;
width: 100%;

text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

position: relative;

font-size: 13px;

line-height: 13px;

gap: 4px;


}

.cta-access div span,.cta-reserve div span{

  font-size: 20px;
  font-weight: bold;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  gap: 8px;
}

.cta-reserve div .webreserve{

  position: absolute;
  top: -16px;
  background-color: var(--color-white);
  border: 1px solid var(--color-main);
  border-radius: var(--radius-xl);
  color: var(--color-main);
  font-size: 12px;
  font-weight: lighter;
  text-align: center;
  padding:0px 16px;
  height: 22px;
  width: 146px;
  display: flex;
  justify-content: center;
  align-items: center;
z-index: 501;


}


/* ===============================
PC VIEW
=============================== */

@media(min-width:768px){

  /* ---------------------------------------------------
     タブレット（768〜1199px）
     PC と同じく .site-wrapper 内だけスクロールさせる構造に統一。
     .site-bg を画面に固定し padding-top:60px の茶色帯を常に表示。
     --------------------------------------------------- */

  /* site-bg を画面に固定して padding-top の茶色帯を維持 */
  .site-bg {
    padding-top: 60px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
  }

  /* pc-layout も画面高さに揃える */
  .pc-layout {
    height: 100vh;
  }

  /* ヘッダー：sticky に変更（fixed だとズレるため）
     .site-wrapper 内の先頭に貼り付く */
  .header {
    position: sticky;
    top: 0;
    max-width: none;
    margin: 0;
  }

  /* .site-wrapper だけスクロール可能にする */
  .site-wrapper {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 0; /* sticky header なので不要 */
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    -webkit-overflow-scrolling: touch;
    /* scroll-behavior は JS 側で制御するため CSS では設定しない */
    /* .site-wrapper 内のハッシュジャンプ補正 */
    scroll-padding-top: 90px;
  }

  /* .site-wrapper 内のハッシュジャンプ補正 */
  section[id] {
    scroll-margin-top: 90px;
  }

  .menu-modal {
    padding-top: 60px;
    display: flex;
  }

  .menu-inner {
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    align-self: center;
  }

  .fixed-cta {
    display: none;
  }

}


/* ===============================
PC SCROLL
（1200px以上: 左右固定・中央wrapperのみスクロール）
=============================== */

@media (min-width:1200px) {

  /* PC（1200px以上）
     タブレットと同じく wrapper スクロール構造だが
     左右サイドバーが表示される点が異なる */

  .site-bg {
    height: 100vh;
    overflow: hidden;
    position: sticky;
    top: 0;
    /* padding-top:60px はタブレット(@media 768px)から継承 */
  }

  .pc-layout {
    height: 100vh;
  }

  /* 左右カラムは高さいっぱいに固定 */
  .pc-left,
  .pc-right {
    height: 100vh;
    overflow: hidden;
    position: sticky;
    top: 0;
  }

  /* PC: .site-wrapper を 100vh に戻す */
  .site-wrapper {
    height: 100vh;
    padding-top: 0;
    scroll-padding-top: 90px;
  }

  section[id] {
    scroll-margin-top: 90px;
  }

}


/* ===============================
430px未満のスマホ対応
=============================== */

@media (max-width: 429px) {

  /* -------
  サイト全体のスケーリング
  ------- */
  .site-wrapper {
    width: 100vw;        /* 画面幅いっぱい */
    /* height はbodyスクロール（Safariアドレスバー縮小）を妨げないため指定しない */
    padding-top: 64px;  /* 429px以下ではヘッダーが64pxになるので上書き */
  }

  /* -------
  ヘッダー
  ------- */
  .header {
    padding: 8px 16px;
    height: 64px;
    max-width: 100vw;   /* 429px以下では画面幅いっぱい */
  }

  .logo .logomain {
    height: 34px;
  }

  .logo .logotxt {
    height: 11px;
  }

  .hamburger {
    width: 48px;
    height: 48px;
  }


  /* メニューモーダル */
  .menu-inner {
    width: 100vw;
  }

  /* -------
  FV
  ------- */
  .fv {
    height: 620px;
  }

  .fv-text {
    left: 16px;
    bottom: 36px;
  }

  /* -------
  セクション共通
  ------- */
  section {
    padding: 32px 16px;
  }

  /* -------
  REASONセクション
  ------- */
  .reason-img {
    margin-left: -16px;
    margin-right: -16px;
  }

  /* -------
  着物スライダー
  ------- */
  .kimono-slider-wrap {
    width: calc(100% + 32px);  /* padding: 16pxを相殺 */
    margin-left: -16px;
    margin-right: -16px;
    padding-bottom: 68px;
  }

  .kimono-btn-prev,
  .kimono-btn-next {
    width: 38px;
    height: 38px;
  }

  .kimono-btn-prev svg,
  .kimono-btn-next svg {
    width: 16px;
    height: 16px;
  }

  .kimono-pagination .swiper-pagination-bullet {
    width: 22px;
    height: 7px;
  }

  .kimono-pagination .swiper-pagination-bullet-active {
    width: 30px;
  }

   /* -------
  FLOW
  ------- */

  .flow-item.reverse .flow-text {
    width: 180px;
    margin: 0 0 0 auto;
}

  .flow01{
  width: 150px;
  height: auto;
  }

  .flow02{
    width: 210px;
    top: -60px;
  }

  .flow03{
    width: 220px;
    left: 200px;
    top: -15px;
  }

  .flow04{
    width: 220px;
    left: -80px;
  }


  /* -------
  Fixed CTA
  ------- */
  .fixed-cta {
    width: 100vw;
  }

/* -------
  Footer
  ------- */

  .footer{

    padding-bottom:170px;


    }
  
  .footer-deco {
    left: 15px;
    bottom: 80px;
    width: calc(100% - 30px);
}
}