@charset "UTF-8";
/* CSS Document */
body{
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
}
#wrapperFixed{
	background:url(img/kurootome/mv.jpg)no-repeat top center;
}
#header{
	background:none;
}
#bc{
	display:none;
}
#header nav > .menu{
	background:none;
}
h1 img{
	pointer-events:none;
}
#main h2{
	color:#fff!important;
	letter-spacing:0.03em;
}
#main h3{
	letter-spacing:0.05em;
}
#sec01{
	padding-bottom: 120px;
}
#main .ttlPage{
	padding:0!important;
	background:none!important;
	margin:0!important;
	height:0;
	overflow:hidden;
}
#sec02{
	background:url(img/kurootome/bg01.png)no-repeat top center;
	padding-top: 420px;
	padding-bottom: 150px;
	text-align: center;
	color:#fff;
}
#sec02:after{
	content:"";
	background:#222222;
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	bottom:0;
	z-index:-1
}
#sec02 h2{
	margin-bottom:50px;
	font-size: clamp(1.313rem, 5.6vw, 2.625rem)!important;
}
#sec02 h2 span{
	font-size:clamp(1.875rem, 8vw, 3.75rem);
}
#sec02 .img{
	max-width: 800px;
	margin-inline:auto;
}
#sec02 .txt-box{
	display:flex;
	align-items:center;
	justify-content:space-between;
	max-width: 1000px;
	margin-inline:auto;
	margin-top: -60px;
}
#sec02 h3{
	/* font-size:34px; */
	line-height: 2;
}
#sec02 .txt-box .txt{
	text-align:left;
	width: 50%;
	max-width: 550px;
	line-height: 2;
}

#sec03{
	background:url(img/kurootome/bg02.png)no-repeat top center;
	background-size:cover;
	padding-top: 360px;
	padding-bottom: 340px;
	text-align: center;
	color:#fff;
	position: relative;
	margin-top: -350px;
	margin-bottom: -270px;
	z-index: 1;
}
#sec03 h2{
	line-height: 1.6;
	margin-bottom: clamp(1.25rem, 5.33vw, 2.5rem);
}
#sec03 .loop{
	margin-bottom: clamp(2.5rem, 10.67vw, 5rem);
}
#sec03 .loop ul{
	display:flex;
	flex-wrap:nowrap;
	list-style:none;
	padding:0;
	animation: loop 50s linear infinite;
}
@keyframes loop {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
#sec03 .loop ul li{
	margin-right:30px
}
#sec03 .loop ul img{
	min-width:calc(100vw - 60px);
}
@media screen and (min-width: 768px) {
	#sec03 .loop ul img{
		min-width:800px;
	}
}
#sec03 p{
	max-width:870px;
	margin-inline:auto;
	text-align: left;
	line-height: 2.5;
	padding-inline: clamp(0rem, -1.25rem + 5.33vw, 1.25rem);
}
#sec04{
	background: #111111;
	color:#fff;
	text-align:center;
	padding-top: 200px;
	padding-inline: 20px;
	padding-bottom: 120px;
	position: relative;
	z-index: 0;
}
#sec04 h2{
	/* font-size:50px; */
	margin-bottom: 30px;
}
#sec04 > h3{
	/* font-size:28px; */
	line-height: 2;
}
#sec04 .img-box{
	display:flex;
	justify-content:center;
	max-width: 560px;
	margin-top: 120px;
	margin-inline: auto;
	margin-bottom: 90px;
}
#sec04 .img-box p{
	flex-basis: calc(100% - 25px);
}
#sec04 ul{
	display:flex;
	justify-content:space-between;
	list-style:none;
	max-width: 1100px;
	margin-inline: auto;
	padding: 0;
}
#sec04 ul li{
	flex-basis:calc((100% / 3) - clamp(1.25rem, 5.33vw, 2.5rem))
}
#sec04 ul h3{
	margin-bottom: clamp(1.25rem, 0.625rem + 2.67vw, 1.875rem);
}
#sec04 p{
	text-align:left;
	line-height: 2.5;
}
#sec05{
	background:#222222;
	color:#fff;
	padding-top: 120px;
	padding-bottom: 70px;
	padding-inline: 20px;
}
#sec05 h2{
	text-align:center;
	margin-bottom: 90px;
}
#sec05 .img{
	margin-bottom:110px;
}
#sec05 ul{
	list-style:none;
	padding:0;
	display:flex;
	justify-content:space-between;
	max-width: 1040px;
	margin-inline: auto;
	margin-bottom: 70px;
}
#sec05 .tokuchoBox{
	max-width: 800px;
	margin-inline: auto;
	margin-bottom: 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#sec05 .tokuchoBox p{
	max-width:600px;
	line-height: 2;
}
#sec05 ul.point li{
	flex-basis:calc((100% / 3) - clamp(1.25rem, 5.33vw, 2.5rem));
	position:relative;
}
#sec05 ul.point li:before{
	content:"";
	background:url(img/kurootome/1.png)no-repeat top center;
	padding: 85px 55px;
	position:absolute;
	top:-60px;
	z-index: 0;
	padding: calc(clamp(7.875rem, 5.25rem + 11.2vw, 10.5rem)/2);
	aspect-ratio: 57/77;
}
#sec05 ul.point li.point2:before{
	background-image:url(img/kurootome/2.png);
}
#sec05 ul.point li.point3:before{
	background-image:url(img/kurootome/3.png);
}
#sec05 ul h3{
	text-align:center;
	margin-bottom:30px;
	position: relative;
}
#sec05 ul p{
	position:relative;
	z-index:1;
	line-height: 2;
}
#sec05 .orain{
	background:#111111;
	padding: 60px 150px;
	border-radius:1000px;
	max-width: 1100px;
	margin-inline: auto;
}
#sec05 .orain h3{
	text-align:center;
	margin-bottom: 20px;
}
#sec05 .orain p{
	line-height:2.5;
}
#sec06{background: #222222;color: #fff;padding-bottom: 70px;}
#sec06 h2{
	text-align:center;
	font-size: 50px;
	margin-bottom: 50px;
}
#sec06 ul{
	list-style:none;
	padding: 0 clamp(0rem, -1.25rem + 5.33vw, 1.25rem);
	max-width:1000px;
	margin-inline: auto;
}
#sec06 ul li{
	display:flex;
	align-items:center;
	font-size: 16px;
	margin-bottom: 40px;
}
#sec06 ul li h3{
	font-size:1rem;
	margin-bottom: 0;
	line-height: 2;
}
#sec06 ul li h3 a{
	color:#fff;
	text-decoration:none;
}
#sec06 ul li span{
	background: #dbbb72;
	padding: 4px;
	background: linear-gradient(90deg, #bf9b55, #dbbb72);
	border-radius: 30px;
	min-width: 160px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 20px;
	max-width: 320px;
}
#sec07{
	background:#111111;
	text-align:center;
	padding: 80px 40px;
}
#sec07 h2,#sec08 h2{
	margin-bottom: 70px;
}
#sec08{
	background:#222222;
	text-align:center;
	padding: 100px 40px 0;
}
#sec09{
	background:#222222;
	text-align:center;
	padding: 50px 0;
	padding-left: clamp(0.938rem, 4vw, 1.875rem);
}
.comingsoon{
	background:#444444;
	aspect-ratio:1320 / 484;
	border-radius:20px;
	display:flex;
	justify-content:center;
	align-items:center;
	font-weight:bold;
	font-size:70px!important;
}
#sec08 .comingsoon{
	aspect-ratio:1320 / 740;
}
.comingsoon span{
		background: linear-gradient(90deg,  #bf9b55, #dbbb72); 
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#main article.max840{
	max-width:100%!important;
	padding-inline: 0!important;
}

.quotes{
	position:relative;
	display:table;
	margin-inline:auto;
	font-size:50px;
	padding-inline: 70px;
	margin-bottom: 20px;
}
.quotes:before{
	content:"";
	position:absolute;
	padding:30px;
	background:url(img/kurootome/double01.svg)no-repeat top center;
	left: 0px;
	top:-10px;
}
.quotes:after{
	content:"";
	position:absolute;
	padding:30px;
	background:url(img/kurootome/double02.svg)no-repeat top center;
	right:0;
	bottom:-10px;
}

.img-250,.img-600,.img-800{
	margin-inline:auto;
}

/* 1400px以上は最大値で固定 */
@media (min-width: 1400px) {
  .fs-60 { font-size: 60px!important; }
  .fs-42 { font-size: 42px!important; }
  .fs-34 { font-size: 34px!important; }
  .fs-20 { font-size: 20px!important; }
  .fs-18 { font-size: 18px!important; }
  .fs-50 { font-size: 50px!important; }
  .fs-28 { font-size: 28px!important; }
  .fs-24 { font-size: 24px!important; }
  .fs-70 { font-size: 70px!important; }
  .mb-100 { font-size: 100px!important; }
  .mb-120 { font-size: 120px!important; }
  /*画像*/
  .img-250 { width: 250px; height: auto!important; }
  .img-600 { width: 600px; height: auto!important; }
  .img-800 { width: 800px; height: auto!important;}
}

/* 751px〜1399px：PC→SPのリキッド */
@media (max-width: 1399px) and (min-width: 751px) {
  .fs-34 { font-size: calc(40px + (34 - 40) * ((100vw - 750px) / (1400 - 750)))!important; }
  .fs-20 { font-size: calc(36px + (20 - 36) * ((100vw - 750px) / (1400 - 750)))!important; }
  .fs-18 { font-size: calc(32px + (18 - 32) * ((100vw - 750px) / (1400 - 750)))!important; }
  .fs-50 { font-size: calc(60px + (50 - 60) * ((100vw - 750px) / (1400 - 750)))!important; }
  .fs-28 {font-size: calc(40px + (28 - 40) * ((100vw - 750px) / (1400 - 750)))!important;}
  .fs-24 { font-size: calc(38px + (24 - 38) * ((100vw - 750px) / (1400 - 750)))!important; }
  /*画像*/
  .img-250 { width: calc(200px + (250 - 200) * ((100vw - 750px) / (1400 - 750))); height: auto!important;}
  .img-600 { width: calc(600px + (600 - 600) * ((100vw - 750px) / (1400 - 750))); height: auto!important;} /* 600固定 */
  .img-800 { width: calc(600px + (800 - 600) * ((100vw - 750px) / (1400 - 750))); height: auto!important;}
}

/* 375px〜750px：SP→さらに小さくリキッド（min値は仮に設定） */
@media (max-width: 750px) and (min-width: 375px) {
  .fs-60 {/* font-size: calc(40px + (60 - 40) * ((100vw - 375px) / (750 - 375)))!important; */}
  .fs-42 { font-size: calc(28px + (42 - 28) * ((100vw - 375px) / (750 - 375)))!important; }
  .fs-34 { font-size: calc(24px + (40 - 24) * ((100vw - 375px) / (750 - 375)))!important; }
  .fs-20 { font-size: calc(16px + (36 - 16) * ((100vw - 375px) / (750 - 375)))!important; }
  .fs-18 { font-size: calc(14px + (32 - 14) * ((100vw - 375px) / (750 - 375)))!important; }
  .fs-50 { font-size: calc(30px + (60 - 30) * ((100vw - 375px) / (750 - 375)))!important; }
  .fs-28 { font-size: calc(20px + (40 - 20) * ((100vw - 375px) / (750 - 375)))!important; }
  .fs-24 { font-size: calc(18px + (38 - 18) * ((100vw - 375px) / (750 - 375)))!important; }
  .fs-70 { font-size: calc(40px + (70 - 40) * ((100vw - 375px) / (750 - 375)))!important; }
  .mb-100 { font-size: calc(60px + (100 - 60) * ((100vw - 375px) / (750 - 375)))!important; }
  .mb-120 { font-size: calc(72px + (120 - 72) * ((100vw - 375px) / (750 - 375)))!important; }
  /*画像*/
  .img-250 { width: calc(150px + (200 - 150) * ((100vw - 375px) / (750 - 375))); height: auto!important; }
  .img-600 { width: calc(400px + (600 - 400) * ((100vw - 375px) / (750 - 375))); height: auto!important; }
  .img-800 { width: calc(400px + (600 - 400) * ((100vw - 375px) / (750 - 375))); height: auto!important; }
}
@media screen and (min-width: 768px) {
  .fs-34 { font-size: 34px!important; }
  .fs-20 { font-size: 20px!important; }
  .fs-18 { font-size: 18px!important; }
  .fs-50 { font-size: 50px!important; }
  .fs-28 { font-size: 28px!important; }
  .fs-24 { font-size: 24px!important; }
}

#footer{
	margin-top:0;
}

@media screen and (max-width: 768px) {
	#wrapperFixed{
		background:url(img/kurootome/mv_sp.jpg)no-repeat top center;
		background-size:contain;
	}
	#main article *{
		font-size:clamp(1rem, 4.27vw, 2rem);
	}
	#sec01{
		padding-top: clamp(0.625rem, 2.67vw, 1.25rem);
		padding-bottom: 140px;
	}
	#sec01 h1{
		width:80%;
	}
	#sec02{
	}
	#sec02 .txt-box,
	#sec04 ul,
	#sec05 ul,
	#sec05 .tokuchoBox,
	#sec06 ul li{
		display:block;
	}

	#sec02{
		background-size:contain;
		padding-top: clamp(6.25rem, 26.67vw, 12.5rem);
		background-image:url(img/kurootome/bg01_sp.png);
		padding-bottom: 150px;
		padding-inline: clamp(0.938rem, 4vw, 1.875rem);
	}
	#sec02 .img{
		width:100%;
	}
	#sec02 .txt-box{
		margin-top:0
	}
	#sec03{
			background-size: cover;
			background-image:url(img/kurootome/bg02_sp.png);
			background-position: top center;
			margin-top: calc((-1)*clamp(3.75rem, 16vw, 7.5rem));
			padding-top: 50px;
			padding-bottom: clamp(6.25rem, 26.67vw, 12.5rem);
			margin-bottom: calc((-1)*clamp(6.25rem, 26.67vw, 12.5rem));
	}
	#sec03 h2{
		font-size:clamp(1.563rem, 6.67vw, 3.125rem)!important;
	}
	#sec03 > *:not(.loop){
		max-width:calc(100% - clamp(3.75rem, -1.25rem + 21.33vw, 8.75rem));
		margin-inline:auto;
	}
	#sec03 p.txt.fs-18{
		font-size:clamp(1rem, 4.27vw, 2rem)!important;
		line-height: 2.2;
	}
	.quotes{
		padding-inline:clamp(2.5rem, 10.67vw, 5rem);
	}
	.quotes:before,.quotes:after{
	padding:clamp(0.938rem, 4vw, 1.875rem);
		background-size:contain;
	}
	#sec04{
		margin-bottom:0;
		padding-top: clamp(6.25rem, 26.67vw, 12.5rem);
		padding-bottom:clamp(4.375rem, 18.67vw, 8.75rem);
	}
	#sec04 .img-box{
		padding-inline:clamp(1.875rem, -0.625rem + 10.67vw, 4.375rem);
		margin-top: clamp(3.125rem, -1.25rem + 18.67vw, 7.5rem);
		margin-bottom: clamp(3.125rem, -1.25rem + 18.67vw, 7.5rem);
	
	}
	#sec04 .img-box p{
		text-align:center;
	}
	#sec04 .img-box img{
		max-width:calc(100% - 20px);
	}
	#sec04 li{
		margin-bottom:clamp(3.75rem, 16vw, 7.5rem);
	}
	#sec04 li:last-child{
		margin-bottom:0;
	}
	#sec05{
		padding-top:clamp(4.375rem, 18.67vw, 8.75rem);
	}
	#sec05 h2 img{
		height:clamp(3.063rem, 13.07vw, 6.125rem);
	}
	
	#sec05 .img{
		padding-inline: clamp(2.5rem, 10.67vw, 5rem)!important;
		width: 100%;
	}
	#sec05 h2{
		margin-bottom:clamp(2.5rem, -0.625rem + 13.33vw, 5.625rem);
	}
	#sec05 .tokuchoBox,
	#sec05 .orain{
		max-width:calc(100% - clamp(3.125rem, 13.33vw, 6.25rem));
		margin-inline:auto;
	}
	#sec04 ul,
	#sec05 ul.point{
		max-width:calc(100% - clamp(5.625rem, 24vw, 11.25rem));
		margin-inline:auto;
	}
	#sec05 ul.point li{
		margin-bottom:100px;
	}
	#sec05 .tokuchoBox h3{
		text-align:center;
	}
	#sec02 .img{
		margin-bottom:30px;
	}
	#sec02 h3{
		line-height:1.8;
		margin-bottom:20px;
	}
	#sec02 .txt-box .txt{
		width:100%;
		max-width: 100%;
		text-align:center;
		line-height: 2;
	}
	#sec05 .orain{
		padding: clamp(1.875rem, 8vw, 3.75rem);
		border-radius: clamp(1.25rem, 5.33vw, 2.5rem);
	}
	#sec05 .tokuchoBox p{
		font-size:clamp(1.063rem, 4.53vw, 2.125rem);
	}
	#sec06 {
	padding-bottom:clamp(1.875rem, -0.625rem + 10.67vw, 4.375rem);
	}
	#sec06 ul li{
		max-width:calc(100% - clamp(5.625rem, 24vw, 11.25rem));
		margin-inline:auto;
		margin-bottom:40px;
	}
	#sec06 ul li span{
		margin-inline:auto;
		margin-bottom:20px;
		width: clamp(10rem, 42.67vw, 20rem);
		font-size: clamp(1rem, 4.27vw, 2rem);
	}
	#sec07, #sec08{
		padding-block:clamp(3.125rem, 13.33vw, 6.25rem);
	}
	#sec07 h2, #sec08 h2 {
	    margin-bottom: 40px;
	    line-height: 1;
	}
	.comingsoon{
		aspect-ratio:1/1!important;
	}
}
@media screen and (min-width: 1200px) {
	#sec02 .txt-box .txt{
		line-height: 3;
	}
	#sec05 .tokuchoBox p {
	    line-height: 3;
	}
}
@media screen and (min-width: 1400px) {
	#wrapperFixed{
		background-size:contain;
	}
	#main section{
		background-size:cover;
	}
	#sec03 {
		padding-bottom:450px;
	}
	#sec04:before{
		content:"";
		background:#111111;
		position:absolute;
		top:-50%;
		right:0;
		width:100%;
		height:50%;
	}
}
@media screen and (min-width: 2000px) {
	#wrapperFixed{
		background-position:0 -20vw;
	}
}