@charset "utf-8";
/* =========================================================
   YIN YAN TOP(index2.html)
   ========================================================= */

/* 横はみ出しだけ切る(clip はスクロール領域を作らない。hidden は非対応ブラウザ用) */
html,
body{
	overflow-x: hidden;
	overflow-x: clip;
	}

.contents{
	position: relative;
	padding: 0 0 8%;
	}

/* =========================================================
   メインビジュアル(top.css から移植)
   ========================================================= */
.visual{
	width: 100vw;
	height: 100vh;
	height: 100svh;
	z-index: -1;
	}
.visual h1{
	position: relative;
	top: 50%;
	left: 0%;
	right: 0;
	margin: 23% auto 0em;
	font-weight: 300;
	font-size: 1.0em;
	letter-spacing: 0.15em;
	width: 20%;
	}
.fade1 {
	animation-name: fade1;
	animation-delay: 1.3s;
	animation-duration: 1.2s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
	filter: blur(10px);
	}
@keyframes fade1 {
	0% {opacity: 0;  filter: blur(10px); transform: scale(1.1);}
	100% {opacity: 1; filter: blur(0px); transform: scale(1);}
	}
@-webkit-keyframes fade1 {
	0% {opacity: 0;  filter: blur(10px); transform: scale(1.1);}
	100% {opacity: 1; filter: blur(0px); transform: scale(1);}
	}

.vr-tx {
	font-family: "Avenir",Arial,sans-serif;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	position: absolute;
	top: 35%;
	left: 1.5%;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1;
	color: #fff;
	z-index: 3;
	letter-spacing: 0.2em;
	}

.scroll{
	position: absolute;
	bottom: 1.5em;
	left: 50%;
	}
.scroll span{
	position: absolute;
	left: 0px;
	bottom: 25px;
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	}
.scroll:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: -3px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #eee;
	animation:
	circlemove 1.8s ease-in-out infinite,
	circlemovehide 1.8s ease-out infinite;
	}
@keyframes circlemove{
	0%{bottom:45px;}
	100%{bottom:-5px;}
	}
@keyframes circlemovehide{
	0%{opacity:0}
	50%{opacity:1;}
	80%{opacity:0.3;}
	100%{opacity:0;}
	}
.scroll:after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1px;
	height: 50px;
	background: #eee;
	}

/* HEADER(トップページのみ)※ headerSlideDown は script.js の animationend 処理と名前を一致させる */
#tops .header,
#tops .sp_header{
	animation: headerSlideDown 1s cubic-bezier(0.19, 1, 0.22, 1) 3.15s both;
	}
@keyframes headerSlideDown{
	0%{
		transform: translateY(-100%);
		opacity: 0;
		}
	100%{
		transform: translateY(0);
		opacity: 1;
		}
	}

/* iPad */
@media screen and (max-width : 1180px)  {
	.visual h1{
	top: 70%;
	margin: 28% auto 0em;
	width: 30%;
	}
}

/* SP */
@media screen and (max-width : 768px)  {
	.visual{
	overflow: hidden;
	max-width: 100vw;
	height: 100vh;
	height: 100svh;
	}
	.visual h1{
	margin: 68% auto 0em;
	width: 47%;
	}
	.vr-tx {
	top:32%;
	font-size: 0.6rem;
	font-weight: 300;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	#tops .header,
	#tops .sp_header{
	animation: none;
	}
	.fade1{
	animation: none;
	filter: none;
	}
	.scroll:before{
	animation: none;
	opacity: 1;
	bottom: 20px;
	}
}

/* =========================================================
   ここから新レイアウト
   ========================================================= */
:root{
  --tp-ink:#2e2c29;
  --tp-sub:#8b867f;
  --tp-line:#e6e2dc;
  --tp-stone:#ebe7e1;
  --tp-font:"adobe-garamond-pro","Cormorant Garamond","source-han-serif-japanese","hiragino-mincho-pron","yu-mincho-pr6n",serif;
  --tp-side:clamp(20px,6vw,120px);
  --tp-gap:clamp(16px,2.2vw,32px);
}

.tp_works,.tp_news,.tp_loc{color:var(--tp-ink);font-family:var(--tp-font);font-weight:300}
.tp_works a,.tp_news a,.tp_loc a{color:inherit;text-decoration:none}
.tp_works a:focus-visible,.tp_news a:focus-visible,.tp_loc a:focus-visible{outline:1px solid var(--tp-ink);outline-offset:4px}

/* =========================================================
   写真グリッド(12カラム・非対称)
   ========================================================= */
.tp_works{padding:clamp(120px,16vw,220px) var(--tp-side) clamp(80px,10vw,160px)}
.tp_row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--tp-gap);margin-bottom:clamp(90px,11vw,180px)}
.tp_row:last-child{margin-bottom:0}

.tp_ph{position:relative;margin:0;background:var(--tp-stone);overflow:hidden}
/* 画像・動画とも枠いっぱいにトリミング
   見せる位置(--pos)と比率(--ratio)は、下の「行ごとの配置」で1枚ずつ指定します */
.tp_ph img,
.tp_ph video{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
/* 画像が未設置のときだけ見えるメモ(画像が入れば隠れます) */
.tp_ph span{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-size:11px;color:var(--tp-sub)}
/* 比率の既定値(--ratio が未指定のとき) */
.tp_ph--land{aspect-ratio:var(--ratio,7/5)}
.tp_ph--port{aspect-ratio:var(--ratio,2/3)}
.tp_ph--sq{aspect-ratio:var(--ratio,1/1)}
.tp_ph--wide{aspect-ratio:var(--ratio,7/4)}

.tp_cap{display:flex;flex-direction:column;justify-content:space-between;font-size:13px;line-height:1.9;letter-spacing:.06em}
.tp_cap h3{margin:0;font-weight:400;font-size:15px;letter-spacing:.08em}
.tp_cap p{margin:0;color:var(--tp-sub)}
.tp_cap a{align-self:flex-start;padding-bottom:2px;font-size:12px;letter-spacing:.12em;border-bottom:1px solid currentColor;transition:opacity .3s}
.tp_cap a:hover{opacity:.55}
.tp_cap--r{text-align:right}
.tp_cap--r a{align-self:flex-end}

/* 行ごとの配置(PC) */
.r1 .tp_cap{grid-column:1/4;grid-row:1}
/* 1:3:2に低くして上を切る(上端のスポットライトの影を外す) */
.r1 .tp_ph{grid-column:5/13;grid-row:1;--ratio:3/2;--pos:50% 100%}

/* 2:3つとも同じ段に置く(grid-row:1)。接写はキャプションの下をくぐる位置から始める */
.r2 .tp_ph{grid-column:1/6;grid-row:1}
.r2 .tp_cap{grid-column:7/10;grid-row:1;justify-content:flex-start;gap:20px}
.r2 .tp_ph--sub{grid-column:9/13;margin-top:clamp(180px,18vw,300px)}

.r3 .tp_ph{grid-column:2/5;align-self:start}
/* 3:キャプションは写真の下端に揃える。行間は Hair design と同じ 20px
   写真が小さいので、空き列を挟まず隣の列から始めて少しだけ内側に寄せる */
.r3 .tp_cap{grid-column:5/8;align-self:end;justify-content:flex-start;gap:20px;padding-left:clamp(65px,2vw,32px);padding-bottom: 1em}

.r4 .tp_ph{grid-column:1/9;grid-row:1}
.r4 .tp_cap{grid-column:10/13;grid-row:1}

.r5 .tp_cap{grid-column:3/5;grid-row:1;align-self:end;justify-content:flex-start;gap:20px;padding-bottom:1em}
/* 5:海。2:3だと高すぎるので4:5に。空を多めに切って水平線を少し上に */
.r5 .tp_ph{grid-column:8/13;grid-row:1;--ratio:4/5;--pos:50% 70%}

/* =========================================================
   NEWS(サムネイルなしのテキストリスト)
   ========================================================= */
.tp_news{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--tp-gap);margin:0 var(--tp-side);padding:clamp(60px,8vw,120px) 0;border-top:1px solid var(--tp-line)}
.tp_news h2,.tp_loc h2{grid-column:1/4;margin:0;font-family:"Cormorant Garamond",var(--tp-font);font-weight:400;font-size:clamp(28px,3vw,40px);letter-spacing:.04em}
.tp_news_list{grid-column:5/13;margin:0;padding:0;list-style:none}
.tp_news_list li{border-bottom:1px solid var(--tp-line)}
.tp_news_list a{display:grid;grid-template-columns:7.5em 1fr;gap:16px;padding:22px 0;font-size:14px;line-height:1.8;letter-spacing:.05em;transition:opacity .3s}
.tp_news_list a:hover{opacity:.55}
.tp_news_list time{color:var(--tp-sub);font-size:13px}
.tp_news_more{grid-column:5/13;justify-self:end;margin-top:28px;padding-bottom:2px;font-size:12px;letter-spacing:.12em;border-bottom:1px solid currentColor}

/* =========================================================
   LOCATION(フッター直前)
   News と同じ12カラム。上だけ線で区切る(下はフッターなので不要)
   ========================================================= */
.tp_loc{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--tp-gap);margin:0 var(--tp-side);padding:clamp(60px,8vw,120px) 0 clamp(90px,10vw,150px);border-top:1px solid var(--tp-line)}
.tp_loc_body{grid-column:5/13}
.tp_loc_list{margin:0}
.tp_loc_list > div{display:grid;grid-template-columns:7.5em 1fr;gap:16px;padding:14px 0}
.tp_loc_list dt{color:var(--tp-sub);font-size:12px;line-height:1.9;letter-spacing:.08em}
.tp_loc_list dd{margin:0;font-size:13px;line-height:1.9;letter-spacing:.06em}
.tp_loc_note{color:var(--tp-sub);font-size:12px}
.tp_loc_list dd a{border-bottom:1px solid #ccc;transition:opacity .3s}
.tp_loc_list dd a:hover{opacity:.55}
.tp_loc_link{display:inline-block;margin-top:6px;font-size:11px;letter-spacing:.12em}
.tp_loc .tp_btns{justify-content:flex-start;margin-top:40px}
/* ボタン3つが右の列に1行で収まるよう、幅を少し詰める */
.tp_loc .tp_btn{min-width:0;flex:1 1 0;max-width:240px;text-align:center;font-size:12px}
.tp_btns{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:40px}
.tp_btn{display:inline-block;min-width:220px;padding:16px 24px;font-size:13px;letter-spacing:.16em;border:1px solid var(--tp-ink);transition:background .3s,color .3s}
.tp_btn--fill{background:var(--tp-ink);color:#fff!important}
.tp_btn--fill:hover{background:transparent;color:var(--tp-ink)!important}
.tp_btn--line:hover{background:var(--tp-ink);color:#fff!important}

/* =========================================================
   SP:縦一列。ただし写真の幅と寄せを1枚ずつ変えて単調にしない
   ========================================================= */
@media (max-width:767px){
  .tp_works{padding-top:100px}
  .tp_row{display:flex;flex-direction:column;gap:18px;margin-bottom:90px}
  .tp_row .tp_ph{width:100%;margin-top:0}

  /* 1:店舗 全幅 → キャプション */
  .r1 .tp_ph{order:1}
  .r1 .tp_cap{order:2}

  /* 2:ヘアは左寄せ82%、接写は右寄せ60%で少し下げる */
  .r2 .tp_ph{width:82%}
  .r2 .tp_ph--sub{width:60%;align-self:flex-end;margin-top:40px;order:3}

  /* 3:商品は小さく、少し内側から */
  .r3 .tp_ph{width:62%;margin-left:calc(var(--tp-side) * -1)}
  .r3 .tp_cap{align-self: flex-start;padding-left:0;padding-bottom:0}

  /* 4:シャンプールーム 全幅 */

  /* 5:景色は右寄せ78%、キャプションも右 */
  .r5 .tp_ph{width:78%;align-self:flex-end;order:1}
  .r5 .tp_cap{order:2;padding:0}

  .tp_cap,.tp_cap--r{justify-content:flex-start;gap:10px;text-align:left}
  .tp_cap--r a{align-self:flex-start}
  .r5 .tp_cap{align-self:flex-end;text-align:right}
  .r5 .tp_cap a{align-self:flex-end}

  /* SPの文字サイズ:全体を1段階小さく */
  .tp_cap{font-size:12px;line-height:1.85}
  .tp_cap h3{font-size:14px}
  .tp_cap a{font-size:11px}

  .tp_news{display:flex;flex-direction:column}
  .tp_news h2,.tp_loc h2{font-size:26px}
  .tp_news h2{margin-bottom:16px}
  .tp_news_list a{grid-template-columns:1fr;gap:2px;padding:14px 0;font-size:13px;line-height:1.7}
  .tp_news_list time{font-size:11px}
  .tp_news_more{align-self:flex-end;margin-top:20px;font-size:11px}

  .tp_loc{display:flex;flex-direction:column}
  .tp_loc h2{margin-bottom:12px}
  .tp_loc_list > div{grid-template-columns:5em 1fr;gap:10px;padding:10px 0}
  .tp_loc_list dt{font-size:11px;line-height:2}
  .tp_loc_list dd{font-size:13px;line-height:1.8}
  .tp_loc_note{font-size:11px}
  .tp_loc_link{font-size:11px}
  .tp_loc .tp_btns{margin-top:28px;gap:10px}

  .tp_btn{width:100%;min-width:0;padding:14px 20px;font-size:12px}
  .tp_loc .tp_btn{flex:1 1 100%;max-width:none}

}

@media (prefers-reduced-motion:reduce){
  .tp_cap a,.tp_news_list a,.tp_loc_list dd a,.tp_btn{transition:none}
}