/*
 Theme Name: Divi Child
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Child theme for Divi
 Author: あなたの名前
 Template: Divi
 Version: 1.0.0
*/

/* 1920px以下で等比縮小 (>1920は固定) */
:root { 
	--s: min(1, 100vw / 1920); 
	--px13: 0.9285em;
}

/* キャンバス：実高さを持たせて中央の基準を安定化（重要） */
.frame{
  width: 100vw;
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  aspect-ratio: 16 / 9;
  min-height: 100svh;              /* ★ これが無いと高さゼロになり得ます */
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-content: center;
  position: relative;
}

/* タイトルは絶対配置のまま（@1920で上から291px） */
.overtitle{
  position: absolute;
  /*top:  calc(291px * var(--s));*/
  top: 15.15vw;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font: 600 calc(14px * var(--s)) / 1.6 system-ui, -apple-system, "Noto Sans JP", sans-serif;
  letter-spacing: .06em;
  text-align: center;
  z-index: 10;
  color: #111;
}

/* タイトルは常に上から291pxに固定（縮尺の影響を受けない） */
/* .frame > .overtitle { top: 291px !important; } */


/* ★ 5枚ブロックを “中央行(=2行目)” に固定するのが肝 */
.showcase{
  grid-row: 2;                     /* ← これが無いと1行目(上端)に入ります */
  justify-self: center;            /* 横中央 */
  align-self: center;              /* 縦中央（2行目の中で） */

/*   width: min(100vw, 1920px); */
  width: 75.8vw;
  box-sizing: border-box;
  margin: 0;

  display: grid;
  grid-template-columns: repeat(5, 12.7vw);
  column-gap: 3vw;
}

.showcase.news{
	grid-template-columns: repeat(4, 12.7vw);
}

/* 基準となる画像ボックス／キャプションなどは今のままでOK */
.stage{
/*   width:  calc(244px * var(--s)); */
width: 12.7vw;
/*   height: calc(344px * var(--s)); */
height: 17.9vw;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
}
.stage img{ width:100%; height:100%; object-fit:cover; display:block; }

.stage.news{
	background-color: #b5b5b5;
	
	display: flex;
	justify-content:center;
	align-items: center;
}

.stage.news .article_title{
	color: black;
}


.tile{ width: fit-content; }


.cap{ 
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px); /* 画像の下に 10px すき間 */
    text-align: center;
/*     font-family: "Shadows Into Light", cursive; */
    font-size: 16px;
    line-height: 1.4;
    color: #111;
} 

/* 左黒タイルのラベル（Diviの .title と競合しないようスコープ） */
.frame .concept .title{ letter-spacing:.08em; font-size: calc(18px * var(--s)); color:#e9e9e9; font-weight:600; }
.frame .concept .sub  { margin-top: calc(8px * var(--s)); font-size: calc(11px * var(--s)); letter-spacing:.2em; color:#bdbdbd; }

/* 右メニューの間隔 48px@1920 をスケール */
.menu ul{ list-style:none; margin:0; padding:0; display:grid; gap: calc(48px * var(--s)); }
.menu a { font-size: calc(12px * var(--s)); color:#e9e9e9; letter-spacing:.12em; text-decoration:none; }
.menu a:hover{ text-decoration: underline; }

#main-header, #main-footer{display: none}
.et_fixed_nav.et_show_nav #page-container{
	padding: 0 !important;
	margin: 0 !important;
}


/* ==========================================================
   /concept 固定レイアウト（1920×1080・5列×2段・gap=0）
   ========================================================== */
/* ====== 1920×1080 固定（レスポンシブなし・gap=0・5列×2段） ====== */
.frame{
  width: 100vw;
  aspect-ratio: 16/9;
  margin: 0 auto;
  display: grid;
  place-items: center;
  background: #fff;
  overflow: hidden;
}

/* 5列×2段のグリッド。左列400px、右4列は380px。行は各540px。gapは0。 */
.showcase.concept-gallery{
  display: grid !important;
  grid-template-columns: 400px repeat(4, 380px) !important;
  grid-template-rows: repeat(2, 540px) !important;
  gap: 0 !important;
  width: 1920px !important;
  height: 1080px !important;
  box-sizing: border-box;
  justify-content: center;
  align-content: center;
  /* 既存 .showcase の幅/カラム指定があればリセット */
  padding: 0 !important;
  margin: 0 !important;
  column-gap: 0 !important;
}

/* 左列：上段／下段（各 400×540）。DOMの先頭2要素にしてあるので自動で1列目に入る。 */
.concept-gallery .left-cell{
  background: #0a0a0a;
  color: #fff;
  width: 400px;
  height: 540px;
/*   display: grid; */
  place-items: center;
}
.concept-gallery .left-top .cell-inner  { 
	padding-top: 56.5px;
	width: 75%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.concept-gallery .left-bottom{ grid-column: 1 / 2; grid-row: 2 / 3; }

/* 左セル内のコンテンツ（任意） */
.concept-gallery .cell-inner{
  font-size: 14px;
  letter-spacing: .08em;
}
.concept-gallery .vertical{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1;
	font-size: 13px;
}
.concept-gallery .back{ color:#fff; text-decoration:none; font-size: 15px;}
.concept-gallery .back:hover{ text-decoration:underline; }

.left-bottom .sentense{
	width: 75%;
	margin: 0 auto;
}

.left-bottom .sentense p{
	font-size: 0.8em;
	line-height: 1.5em;
	padding-bottom:0;
}

.left-bottom .sentense .top{
	margin-bottom: 1.5em;
}


.left-bottom .sentense.en{
	margin-bottom: 1.5em;
	letter-spacing: 0.03em;
	padding-top: 25px;
}

.left-bottom .sentense.ja{
	letter-spacing: 0.17em;
	font-family: "kozuka-gothic-pro", sans-serif;
	font-weight: 300;
	font-style: normal;
}


/* 右側8要素（各 380×540）。左列が埋まっているので自動で列2〜5へ流れる。 */
.concept-gallery .tile{
  width: 380px;
  height: 540px;
  position: relative;
}
.concept-gallery .stage{
  width: 380px;
  height: 540px;
  background: #000;
  overflow: hidden;
}
.concept-gallery .stage img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* （Diviの汎用 .showcase/.stage が残っていても上書きできるように…） */
/* .showcase.concept-gallery .stage, */
/*.showcase.concept-gallery .tile{ all: revert-layer; } /* 対応環境で余計な継承を抑止 */

/* =========================================================== */
/* COMPANYページ                                                */
/* =========================================================== */
.company-main{
	aspect-ratio: 16/9;
}
.company-frame{
	width: 100vw;
	aspect-ratio: 16/9;
	posisiton: reletive;
	background-color: black;
}

.company-frame div{
	color: white;
}

.company-frame .back{
	position: absolute;
	top: 56px;
	left: 50px;
	font-weight: bold;
}


.company-frame .back a{
	text-decoration: none;
	color: white;
}

.company-info{
	width: 77.7%;
	padding-top: 353px;
	padding-left: 214px;
	margin-bottom: 47px;
}

.company-info div,
.company-info p{
	font-size: var(--px13);
}

.company-info .section-title{
	margin-bottom: 54px;
}

.company-info .info-wrapper .info{
	margin-bottom: 30px;
	display: flex;
}

.company-info .info-wrapper .info .option-name{
	margin-right: 40px;
}

.company-info .info.address .option div{
	line-height: 110%;
}

.tokushoho-wrapper{
	padding-top: 47px;
}

.tokushoho-wrapper .section-title{
	margin-bottom: 30px;
}

.tokushoho-wrapper .description p{
	padding-bottom: 0px;
	font-size: var(--px13);
	line-height: 110%;
}

.tokushoho-wrapper .title{
	line-height: 110%;
	font-size: var(--px13);
}

.about-price, .about-payment, .about-atobarai, .about-shipping, .about-return{
	margin-bottom: 30px;
}