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

/* ===== Colors ===== */
:root{
  --light-gray:#F2F2F0;
  --yellow:#FFD127;
  --green:#025237;
  --sky-blue:#8FD0E1;
  --blue:#003288;
  --pink:#EEA2B5;
  --red:#CC0110;
  --orange:#E43C00;
  --gray:#C8C1BE;
  --dark-brown:#473F3C;
	
	--px10: 0.714em;
	--px12: 0.857em;
	--px13: 0.929em;
	--px14: 1em;
}

/* ===== Divi chrome off ===== */
#main-header, #main-footer{ display:none; }
#page-container{ padding: 0 !important;}
.et_fixed_nav.et_show_nav #page-container{ padding: 0 !important;}
/* ================================== */
/* ============ TOPページ ============ */
/* ================================== */

/* ===== Stage ===== */
.top-main-frame{
	width:100vw;
	aspect-ratio:16/9;
	display:flex;
	justify-content:center;
	align-items:center;
}

/* ===== Layout ===== */
.top-main-wrapper{
  width:53.3%;
  height:10.6vw;
  display:flex;
  gap:1.97vw;
  position:relative;
  overflow:visible; /* ラベルのはみ出し可 */
}

/* ===== Piler base ===== */
.top-main-wrapper .piler{
  width:3.54vw;
  height:10.6vw;
  position:relative;
  overflow:visible; /* ラベルのはみ出し可 */
  z-index:0;        /* ホバーで前面に */
}

/* 背景色は::beforeで描画（色だけ薄くするため） */
.top-main-wrapper .piler::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--bg, transparent);
  opacity:1;
  z-index:1; /* ラベル(2)より下 */
  transition:opacity 0.2s ease-out;
}

/* ホバー/フォーカス時に色だけ薄く */
.top-main-wrapper .piler:hover::before,
.top-main-wrapper .piler:focus-within::before{
  opacity:0.4;
}

/* ===== Label (inner-menu-name) ===== */
.top-main-wrapper .piler .inner-menu-name{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  display:flex;
  align-items:center;
  justify-content:center;


  white-space:nowrap;
  padding:0 0.5em;

  opacity:0;
  pointer-events:none;
  z-index:2;

  color:#454545;
  font-family:"hiragino-kaku-gothic-pron", sans-serif;
  font-weight:300;
  font-style:normal;
  font-size:var(--px13) !important;

  transition:opacity 0.2s ease-out;
}

.top-main-wrapper .piler:hover,
.top-main-wrapper .piler:focus-within{
  z-index:10;
}
.top-main-wrapper .piler:hover .inner-menu-name,
.top-main-wrapper .piler:focus-within .inner-menu-name{
  opacity:1;
  pointer-events:auto;
}

.top-main-wrapper .piler .inner-menu-name a{
  display:inline-block;
  text-decoration:none;
  color:inherit;
  padding:0.25em 0.5em;
  border-radius:0.25em;
}
.top-main-wrapper .piler .inner-menu-name a:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}

.top-main-wrapper .piler.one   { --bg: var(--light-gray); }
.top-main-wrapper .piler.two   { --bg: var(--yellow); }
.top-main-wrapper .piler.three { --bg: var(--green); }
.top-main-wrapper .piler.four  { --bg: var(--sky-blue); }
.top-main-wrapper .piler.five  { --bg: var(--blue); }
.top-main-wrapper .piler.six   { --bg: var(--pink); }
.top-main-wrapper .piler.seven { --bg: var(--red); }
.top-main-wrapper .piler.eight { --bg: var(--orange); }
.top-main-wrapper .piler.nine  { --bg: var(--gray); }
.top-main-wrapper .piler.ten   { --bg: var(--dark-brown); }

/* ====================================== */
/* ============ CONCEPTページ ============ */
/* ====================================== */
.concept-main-frame{
	width:100vw;
	aspect-ratio:16/9;
	display:flex;
	justify-content:center;
	align-items:center;
}

.concept-main-wrapper{
	width: 18.95vw;
	height: 100%;
	margin: 0 auto;
	padding-top: 11.6vw;
}

.concept-main-frame .text p{
	font-family: "yu-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
	
	font-size: var(--px13);
}

.concept-main-wrapper .title,
.concept-main-wrapper .text .top{
	margin-bottom: 4.95vw;
}

.concept-main-wrapper .title{
	color: #707070;
	font-family: "helvetica-neue-lt-pro", sans-serif;
	font-weight: 100;
	font-style: normal;
	font-size: var(--px14);
	text-align: center;
}

.concept-main-wrapper .text p{
	padding-bottom: 0 !important;
	color: #707070;
	text-align: center;
}

.concept-main-wrapper .text .middle{
	margin-bottom: 2vw;
}

.concept-main-wrapper .text .middle p,
.concept-main-wrapper .text .bottom p:nth-child(1){
	margin-bottom: 0.5vw;
}

/* ====================================== */
/* ============ All Products ============ */
/* ====================================== */
.all-products-main-frame{
	width:100vw;
	aspect-ratio:16/9;
}

.all-products-main-wrapper{
  	width: 80%;
	max-width: 1536px;
	margin: 0 auto;
	padding-top: 6.45vw;
	margin-bottom: 2.6vw;
}

.all-products-main-wrapper .title{
	color: #707070;
	font-family: "helvetica-neue-lt-pro", sans-serif;
	font-weight: 100;
	font-style: normal;
	font-size: var(--px14);
	text-align: center;
}

.all-products-main-wrapper .top{
	width: 25.7vw;
	max-width: 493px;
	height: 12.9vw;
	max-height: 248px;
	margin: 0 auto;
}

.all-products-main-wrapper .middle,
.all-products-main-wrapper .bottom{
	display: flex;
	justify-content: space-between;
}

.all-products-main-wrapper .middle .product,
.all-products-main-wrapper .bottom .product{
	width: 11.5vw;
	max-width: 221px;
}


/* =============================== */
/* ============ Image ============ */
/* =============================== */
.image-main-frame{
	width:100vw;
	aspect-ratio:16/9;
}

.image-main-wrapper{
  width: 71.6%;
  margin: 0 auto;
  padding-top: 11.6vw;
  position: relative;
}

.image-main-wrapper .title{
  color: #707070;
  font-family: "helvetica-neue-lt-pro", sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: var(--px14);
  text-align: center;

  position: relative;
  z-index: 10;
}

.image-main-wrapper .image-wrapper{
  display: flex;
  position: relative;
  z-index: 0;
}

.image-main-wrapper .image-wrapper .left,
.image-main-wrapper .image-wrapper .right{
	width: 23.4vw;
	height: 23.4vw;
}

.image-main-wrapper .image-wrapper .center{
	width: 24.7vw;
	height: 24.7vw;
	transform: translateY(-1vw);
}

.image-main-wrapper .image-wrapper .right{
	transform: translateY(-2vw);
}

.image-main-wrapper .image-wrapper .left,
.image-main-wrapper .image-wrapper .center{
	position: relative;
}

.image-main-wrapper .image-wrapper .left .before,
.image-main-wrapper .image-wrapper .left .after,
.image-main-wrapper .image-wrapper .center .before,
.image-main-wrapper .image-wrapper .center .after{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition:opacity 0.2s ease-out;
}

.image-main-wrapper .image-wrapper .left .before,
.image-main-wrapper .image-wrapper .center .before{
	opacity: 1;
}

.image-main-wrapper .image-wrapper .left .after,
.image-main-wrapper .image-wrapper .center .after{
	opacity: 0;
}

.image-main-wrapper .image-wrapper .left .before:hover,
.image-main-wrapper .image-wrapper .center .before:hover{
	opacity: 0;
}

.image-main-wrapper .image-wrapper .left .after:hover,
.image-main-wrapper .image-wrapper .center .after:hover{
	opacity: 1;
}

/* ================================= */
/* ============ Company ============ */
/* ================================= */
.company-main-frame{
	width:100vw;
	aspect-ratio:16/9;
}

.company-main-wrapper{
  width: 23%;
  margin: 0 auto;
  padding-top: 11.6vw;
}

.company-main-wrapper .title{
	color: #707070;
	font-family: "helvetica-neue-lt-pro", sans-serif;
	font-weight: 100;
	font-style: normal;
	font-size: var(--px14);
	text-align: center;
	margin-bottom: 3.9vw;
}

.company-main-wrapper .company-info{
	width: fit-content;
	margin: 0 auto;
	margin-bottom: 62px;
}

.company-main-wrapper .company-info div{
	color: #707070;
	font-family: "yu-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
	
	font-size: var(--px13);
}

.company-main-wrapper .company-info .info{
	display: flex;
	margin-bottom: 1.2vw;
}

.company-main-wrapper .company-info .info .key{
	margin-right: 1vw;
}

.company-main-wrapper .tokushoho{
	text-align: center;
}

.company-main-wrapper .tokushoho .title{
	color: #707070;
	font-family: "yu-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
	
	font-size: var(--px12);
	margin-bottom: 0.78vw;
}

.company-main-wrapper .tokushoho .about{
	margin-bottom: 0.78vw;
}

.company-main-wrapper .tokushoho .option-title,
.company-main-wrapper .tokushoho .content p{
	color: #707070;
	font-family: "yu-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
	
	font-size: var(--px10);
}

.company-main-wrapper .tokushoho .content p{
	padding-bottom: 0;
	line-height: 1.3;
}


/* ============================== */
/* ============ logo ============ */
/* ============================== */
.logo{
	position: fixed;
	top: 49.6vw;
	left: 82.6vw;
	
	width: 9.4vw;
	height: 1vw;
}

.logo img{
	width: 100%;
	height: 100%;
}

/* ===== Motion preference ===== */
@media (prefers-reduced-motion: reduce){
  .top-main-wrapper .piler::before,
  .top-main-wrapper .piler .inner-menu-name{
    transition:none;
  }
}