@charset "utf-8";

/* =========================================================
 common
========================================================= */
body{
	background-color: #fff;
}
#container{
	width: 90%;
	margin: 40px auto;
}

.ttl{
	font-size: 40px;
	font-family: "Marcellus", serif;
	font-weight: 400;
	font-style: normal;
	color: #000;
	letter-spacing: 0.05em;
}
@media screen and (max-width:800px){
	.ttl{
		font-size: 28px;
		margin-bottom: 20px;
	}
}

/* =========================================================
 FV
========================================================= */
@keyframes main{
  0%{opacity:0;transform:scale(1)}
  10%{opacity:1}
  26%{opacity:1}
  34%{opacity:0}
  100%{opacity:0;transform:scale(1.2)}
}

@keyframes firstImageAnimation{
  0%{opacity:1;transform:scale(1)}
  26%{opacity:1}
  30%{opacity:0}
  100%{opacity:0;transform:scale(1.2)}
}

#fv{
  position:relative;
  z-index:50;
  width:100%;
  margin-left:var(--ml);
  aspect-ratio:1296/730;
  max-height:calc(100vh - 170px);
  min-height:700px;
  overflow:hidden;
  background:#000;
}

/* ---------------- tit ---------------- */

#fv .tit_area{
  position:absolute;
  width:88.8888888889%;
  right:5.5555555556%;
  bottom:0;
  z-index:10;

  /* ←ここがマスク役 */
  /* overflow:hidden; */
}

/* ================= sub_tit ================= */

#fv .sub_tit{
  position:absolute;
  width:100%;
  right:0;
  top:calc(-1em - 5px);
  height:1em;
  letter-spacing:.15em;
  color:#fff;
  font-size:clamp(16px,16.666vw,40px);
  text-align:right;
  z-index:10;
  line-height:1;

  /* 初期 */
  opacity:0;
  transform:translateY(120%);
  will-change:transform,opacity;
}

#fv.move .sub_tit{
  opacity:1;
  transform:translateY(0);
  transition:
    transform 1s cubic-bezier(.22,.61,.36,1),
    opacity .6s ease;
}

/* ================= fv_tit ================= */

#fv .fv_tit{
  position:relative;

  /* 初期 */
  transform:translateY(120%);
  opacity:0;
}

#fv.move .fv_tit{
  transform:translateY(0);
  opacity:1;
  transition:
    transform 1s cubic-bezier(.22,.61,.36,1) .2s,
    opacity .6s ease .2s;
}

/* ===== SVG文字配置 ===== */

#fv h1 .text{
  display:block;
  position:absolute;
  bottom:0;
}

#fv h1 .text.text01,
#fv h1 .text.test05{
  position:relative;
}

/* 幅 */
/* #fv h1 .-S{width:calc(49/1152*100%)}
#fv h1 .-A{width:calc(97/1152*100%)}
#fv h1 .-G{width:calc(92/1152*100%)}
#fv h1 .-M{width:calc(131/1152*100%)}
#fv h1 .-R{width:calc(74/1152*100%)}
#fv h1 .-I{width:calc(16/1152*100%)}
#fv h1 .-E{width:calc(51/1152*100%)} */

/* 位置 */
#fv h1 .text01{position:relative}
#fv h1 .text02{left:calc(70/1152*100%)}
#fv h1 .text03{left:calc(183/1152*100%)}
#fv h1 .text04{left:calc(294/1152*100%)}
#fv h1 .text05{left:calc(464/1152*100%)}
#fv h1 .text06{left:calc(613/1152*100%)}
#fv h1 .text07{left:calc(732/1152*100%)}
#fv h1 .text08{left:calc(827/1152*100%)}
#fv h1 .text09{left:calc(867/1152*100%)}
#fv h1 .text10{left:calc(978/1152*100%)}
#fv h1 .text11{right:0}

/* KOSE専用 */
#fv h1.-kose{
	width: 42%;
  margin: 0 0 0 auto;
  height:auto;
}
#fv h1.-kose .text{
  position:relative;
  left:auto;
  bottom:auto;
  opacity:0;
  transform:translateY(100%);
}
#fv.move h1.-kose .text{
  opacity:1;
  transform:translateY(0);
  transition:.6s var(--easeOutSine);
}

/* ================= overlay ================= */

#fv:before{
  content:"";
  position:absolute;
  inset:0;
  background:#000;
  opacity:.1;
  z-index:5;
}

/* ================= 画像 ================= */

#fv .fv_img{
  z-index:1;
  position:absolute;
  bottom:0;
  width:50%;
  height:100%;
}

#fv .fv_img.l-area{left:0}
#fv .fv_img.r-area{right:0}

#fv .img{
  position:absolute;
  inset:0;
  margin:auto;
  width:100%;
  height:100%;
  overflow:hidden;
}

#fv .img img{
  position:absolute;
  inset:0;
  margin:auto;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;

  --animation-duration:20s;
  --animation-delay-base:calc(var(--animation-duration)/5);

  animation:main var(--animation-duration) linear infinite;
}

#fv .img:nth-child(1) img{
  opacity:1;
  animation:firstImageAnimation var(--animation-duration) linear infinite;
}

#fv .img:nth-child(2) img{animation-delay:calc(var(--animation-delay-base))}
#fv .img:nth-child(3) img{animation-delay:calc(2 * var(--animation-delay-base))}
#fv .img:nth-child(4) img{animation-delay:calc(3 * var(--animation-delay-base))}
#fv .img:nth-child(5) img{animation-delay:calc(4 * var(--animation-delay-base))}
#fv .img:nth-child(6) img{animation-delay:calc(5 * var(--animation-delay-base))}

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

@media screen and (max-width:800px){

#fv{
  position:relative;
  z-index:50;
  aspect-ratio:320/602;
  max-height:calc(100vh - 65px);
  min-height:400px;
}

/* tit */
#fv .tit_area{
  position:absolute;
  width:calc(284/320*100%);
  left:0;
  right:0;
  margin:auto;
}

/* sub */
#fv .sub_tit{
  top:calc(-1em - 15px);
  height:1em;
  letter-spacing:.15em;
  text-align:left;
  font-size:var(--fz14);
}

/* h1 text */
#fv h1 .text{
  display:block;
  position:absolute;
  bottom:0;
  opacity:0;
  transform:translateY(100%);
  transition:transform .55s var(--easeOutSine),opacity .55s var(--easeOutSine);
}

#fv h1 .text.text01,
#fv h1 .text.test05{
  position:relative;
}

/* 幅（280基準） */
#fv h1 .-S{width:calc(21/280*100%)}
#fv h1 .-A{width:calc(38/280*100%)}
#fv h1 .-G{width:calc(37/280*100%)}
#fv h1 .-M{width:calc(54/280*100%)}
#fv h1 .-R{width:calc(30/280*100%)}
#fv h1 .-I{width:calc(7/280*100%)}
#fv h1 .-E{width:calc(21/280*100%)}

/* 位置（280基準） */
#fv h1 .text01{margin-bottom:1.6rem}
#fv h1 .text02{left:calc(30/280*100%);top:0}
#fv h1 .text03{left:calc(76/280*100%);top:0}
#fv h1 .text04{left:calc(121/280*100%);top:0}
#fv h1 .text05{position:relative;left:0}
#fv h1 .text06{left:calc(61/280*100%);bottom:0}
#fv h1 .text07{left:calc(109/280*100%);bottom:0}
#fv h1 .text08{left:calc(148/280*100%);bottom:0}
#fv h1 .text09{left:calc(164/280*100%);bottom:0}
#fv h1 .text10{left:calc(210/280*100%);bottom:0}
#fv h1 .text11{bottom:0}

/* 画像 */
#fv .fv_img{
  z-index:1;
  position:absolute;
  width:100%;
  height:50%;
}

#fv .fv_img.l-area{top:0}
#fv .fv_img.r-area{bottom:0}

#fv.move h1 .text{
  transform:translateY(0);
  opacity:1;
  transition-delay:1.4s;
}

#fv h1.-kose{
	width: 42%;
  margin: 0;
}

}

/* =========================================================
 menulist
========================================================= */
.menulist ul{
	display: flex;
	justify-content: center;
}
.menulist ul li{
  float: none;
	width: 10%;
	padding: 40px 0 0;
	line-height: 1;
	text-align: center;
}
.menulist ul .logo{
	padding: 0;
}
.menulist ul li a {
	text-decoration: none;

}
.menulist ul li a:hover {
	text-decoration: none;
	color: #000000;
	font-weight: bold;
}

@media screen and (max-width:800px){
	.menulist ul li{
		width: 14%;
	}
	.menulist ul li {
		font-size: 70%;
		padding: 10px 0 0;
	}
}


/* =========================================================
top-project
========================================================= */
.top-project ul{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.top-project ul li{
	width: 22.5%;
	position: relative;
	padding-bottom: 80px;
}
.top-project ul li a{
	text-decoration: none;
}
.text_area{
	position: absolute;
	background-color: #fff;
	right: 0;
	bottom: 0;
	width: 80%;
	padding: 20px 0 0 20px;
	transform: translateY(80px);
}
.text_area .mincho{
	font-size: 18px;
	margin-bottom: 10px;
	font-family: "Zen Old Mincho", serif;
	font-weight: 400;
	font-style: normal;
}
.text_area .n_txt{
	line-height: 1.5;
	margin-bottom: 15px;
}
.text_area .en{
	font-size: 14px;
	font-family: "Marcellus", serif;
	font-weight: 400;
	font-style: normal;
	text-decoration: underline;
}

@media screen and (max-width:800px){
	.top-project ul li{
		width: 95%;
		padding-bottom: 40px;
	}
	.text_area{
		position: static;
		bottom: none;
		transform: translateY(0);
		width: 100%;
		padding: 10px 0 0 0;
	}
	.text_area .mincho{
		font-size: 18px;
		margin-bottom: 5px;
		line-height: 1.5;
	}
	.text_area .n_txt{
		line-height: 1.5;
		margin-bottom: 10px;
	}
}

/* =========================================================
top-concept
========================================================= */
.top-concept .wrap{
	width: 80%;
	margin: 100px auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.top-concept .wrap .txtbox{
	width: 50%
}
.top-concept .wrap .txtbox .lead-txt{
	margin: 30px 0;
	font-size: 24px;
	font-family: "Zen Old Mincho", serif;
	font-weight: bold;
	font-style: normal;
}
.top-concept .wrap .txtbox .txt{
	margin-top: 30px;
}
.top-concept .wrap .imgbox{
	width: 50%;
}

@media screen and (max-width:800px){
	.top-concept .wrap{
		width: 95%;
		margin: 60px auto;
	}
	.top-concept .wrap .txtbox{
		width: 100%
	}
	.top-concept .wrap .txtbox .lead-txt{
		margin: 15px 0;
		font-size: 20px;
	}
	.top-concept .wrap .txtbox .txt{
		margin-top: 15px;
	}
	.top-concept .wrap .imgbox{
		width: 100%;
		margin-top: 30px;
	}
}


/* =========================================================
concept page
========================================================= */
.concept-list{
	margin-bottom: 60px;
}
.concept-list ul{
	display: flex;
	flex-wrap: wrap;
}
.concept-list ul li{
	width: 29%;
	margin: 0 2% 40px 2%;
}
.concept-list ul li a{
	text-decoration: none;
}
.concept-list ul li a img{
	width: 100%;
}
.concept-list .li-ttl{
	font-size: 20px;
	margin: 15px 0;
}
.concept-list .li-txt{
	line-height: 1.5;
}

@media screen and (max-width:800px){
	.concept-list ul li{
		width: 100%;
		margin: 0 0 40px 0;
	}
	.concept-list .li-ttl{
		font-size: 18px;
		margin: 10px 0;
	}
}

/* =========================================================
detail page
========================================================= */
.detail{
	margin: 100px 0;
}
.detail-ttl{
	font-size: 32px;
	padding: 20px 0;
	margin-bottom: 60px;
	border-top: #000 1px solid;
	border-bottom: #000 1px solid;
}
.detail .img-box img{
	width: 100%;
}
.detail .txtbox{
	margin: 40px 0 0;
	font-size: 18px;
}

@media screen and (max-width:800px){
	.detail{
		margin: 60px 0;
	}
	.detail-ttl{
		font-size: 20px;
		padding: 15px 0;
		margin-bottom: 30px;
	}
	.detail .txtbox{
		margin: 30px 0 0;
		font-size: 14px;
	}
}