@charset "UTF-8";
/* ===============================================### 
可変設定
###=============================================== */
.lp_container {
  /*デザインの値*/
  --pc-width: 1400;/*PCデザイン幅*/
  --sp-width: 750;/*SPデザイン幅*/
  --pc-artboard-width: 1060;/*SP共通デザイン幅*/
  --sp-artboard-width: 750;/*PC共通デザイン幅*/
  /*可変率の計算式*/
  --formula: calc(var(--variable) * var(--ratio));/*SP,PC共通箇所の可変割合の計算式*/
  --formula_pc: calc(var(--variable) * 1);/*PCデザインの可変割合の計算式*/
}

/* PC画面幅 1400px以上 固定 */
@media (min-width: 1401px) {
  .lp_container {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比 */
  --variable: 1px; /* 固定値（可変しない） */
  }
}

/* PC画面幅 768～1400px 可変 */
@media (min-width: 768px) and (max-width: 1400px) {
  .lp_container {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比 */
  --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
}

/* SP画面幅 767px以下 可変 */
@media (max-width: 767px) {
  .lp_container {
  --ratio: 1; /* 比率は1（変わらない） */
  --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}

/* ===============================================### 
初期設定
###=============================================== */
@font-face {
  font-family: "Butler";
  src: url("../font/Butler_Light.otf") format("opentype");
}

.bandw_0716 {
	/* font-family: "Yu Gothic", "YuGothic", "游ゴシック体", "游ゴシック", sans-serif; */
	font-family: "Butler";

	font-weight: 300;
	--fw-thin: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semi-bold: 600;
	--fw-bold: 700;
	font-style: normal;
	color: #231815;
	--color-black: #231815;
	--color-white: #fff;
	overflow: clip;
}

.bandw_0716 img {
	width: 100%;
	height: auto;
}


/* ===========### PCのみ表示 ###=========== */
@media screen and (min-width: 768px) {
	.bandw_0716 .pc-visible {
		display: block;
	}

	.bandw_0716 .sp-visible {
		display: none;
	}

	.bandw_0716 .image-bg {
		background-color: #fff;
	}

	.bandw_0716 .image-bg a:hover {
		opacity: 0.7;
	}

	.bandw_0716 .inner {
		padding-top: 20px;
	}

	.bandw_0716 .inner-bd {
		max-width: 1000px;
		margin: 0 auto;
	}

	.breadcrumbs {
		width: 106rem;
		max-width: 120rem;
		margin: 0 auto;
		padding: 2rem 0;
	}
}

/* ===========### SPのみ表示 ###=========== */
@media screen and (max-width: 767px) {
	.bandw_0716 .pc-visible {
		display: none;
	}

	.bandw_0716 .sp-visible {
		display: block;
	}
}


.l__mv{
	display: grid;
	width: calc(750 * var(--formula));
	grid-template-rows: calc(51 * var(--formula)) calc(108 * var(--formula)) calc(162 * var(--formula)) calc(38 * var(--formula));
	grid-template-columns: calc(55 * var(--formula)) calc(56 * var(--formula)) calc(41 * var(--formula)) calc(223 * var(--formula)) calc(107 * var(--formula));
	margin: calc(114 * var(--formula)) auto 0;
}
.l__mv__card01{
	width: calc(310 * var(--formula));
	grid-area: 1/2/1/2;
}
.l__mv__card02{
	width: calc(175 * var(--formula));
	grid-area:3/6/4/7;
}
.l__mv__card03{
	width: calc(367 * var(--formula));
	grid-area:2/5/3/6;
}
.l__mv__card04{
	width: calc(200 * var(--formula));
	grid-area: 4 / 3 / 5 / 4;
}
.l__mv__card05{
	width: calc(127 * var(--formula));
	grid-area: 5/4/6/5;
}

/* カードの共通初期スタイル */
.l__mv__card {
  opacity: 0;
  transition: opacity 0.4s ease-out; /* アニメーションの速度 */
}

/* JSでクラスが付与された時のスタイル（ズームアウト＋フェードイン） */
.l__mv__card.is-active {
  opacity: 1;
}

/* ===============================================
* content01 *
=============================================== */
.grid-wrap{
	display: grid;
	width: calc(750 * var(--formula));
	margin-left: auto;
	margin-right: auto;
}
.content01 .content__image_01{
	width: calc(400 * var(--formula));
	margin: calc(155 * var(--formula)) auto 0;
}
.content01 .grid-wrap{
grid-template-rows:calc(91 * var(--formula)) calc(50 * var(--formula)) calc(276 * var(--formula));
grid-template-columns: calc(138 * var(--formula)) calc(64 * var(--formula)) calc(216 * var(--formula));
margin-top: calc(74 * var(--formula));
}
.content01 .content__image_02{
	width: calc(322 * var(--formula));
	grid-area: 1/1/1/1;
}
.content01 .content__image_03{
	width: calc(164 * var(--formula));
	grid-area: 2/3/2/3;
}
.content01 .content__image_04{
	width: calc(293 * var(--formula));
	grid-area:3/4/5/5;
}
.content01 .content__image_05{
	width: calc(280 * var(--formula));
	grid-area:4/2/4/2;
	position: relative;
	left: calc(-30 * var(--formula));
}





.content02 .grid-wrap{
	grid-template-rows:calc(167 * var(--formula)) calc(199 * var(--formula)) calc(286 * var(--formula));
	grid-template-columns:calc(16 * var(--formula)) calc(106 * var(--formula)) calc(266 * var(--formula)) calc(104 * var(--formula));
	margin-top: calc(122 * var(--formula));
}
.content02 .content__image_01{
	width: calc(450 * var(--formula));
	grid-area: 1/2/1/2;
}
.content02 .content__image_02{
	position: relative;
	width: calc(351 * var(--formula));
	grid-area: 3/4/3/4;
}
.content02 .content__image_02::before{
	content: "";
	position: absolute;
	background: url(../img/ttl01.svg) center/contain no-repeat;
	width:calc(520 * var(--formula)) ;
	height: calc(62 * var(--formula));
	top: calc(204 * var(--formula));
	left: calc(-341 * var(--formula));
	z-index: 1;
}
.content02 .content__image_03{
	width: calc(583 * var(--formula));
	grid-area: 4/3/4/3;
}
.content02 .content__image_04{
	width: calc(240 * var(--formula));
	grid-area:2/5/2/5;
}
.credit__link{
	display: flex;
	flex-direction: column;
	/* gap: calc(3 * var(--formula)); */
	font-size: calc(18 * var(--formula));
	white-space: nowrap;
	letter-spacing: 0.08em;
}
.credit__link a{
	padding-top: calc(3 * var(--formula));
}




.content03 .grid-wrap{
	grid-template-rows:calc(99 * var(--formula)) calc(387 * var(--formula)) calc(214 * var(--formula));
	grid-template-columns:calc(16 * var(--formula)) calc(127 * var(--formula)) calc(21 * var(--formula)) calc(259 * var(--formula));
	margin-top: calc(165 * var(--formula));
}
.content03 .content__image_01{
	width: calc(194 * var(--formula));
	grid-area: 2/2/2/2;
	position: relative;
	z-index: 1;
	pointer-events: none;
}
.content03 .content__image_02{
	width: calc(293 * var(--formula));
	grid-area: 1/4/2/4;
}
.content03 .content__image_03{
	position: relative;
	width: calc(293 * var(--formula));
	grid-area: 3/5/4/6;
}
.content03 .content__image_03 .credit__link{
	position: absolute;
	top: calc(20 * var(--formula));
	width: calc(38 * var(--formula));
	right: calc(10 * var(--formula));
	writing-mode: vertical-rl;
	color: #fff;
}
.content03 .content__image_04{
	width: calc(225 * var(--formula));
	grid-area:4/3/5/3;
}





.content04 .grid-wrap{
	grid-template-rows:calc(233 * var(--formula)) calc(340 * var(--formula)) calc(49 * var(--formula)) calc(611 * var(--formula)) calc(116 * var(--formula));
	grid-template-columns: calc(46 * var(--formula)) calc(11 * var(--formula)) calc(211 * var(--formula)) calc(151 * var(--formula));
	margin-top: calc(265 * var(--formula));
}
.content04 .content__image_01{
	width: calc(666 * var(--formula));
	grid-area: 1/2/1/2;
}
.content04 .content__image_02{
	width: calc(288 * var(--formula));
	grid-area: 3/5/4/6;
}
.content04 .content__image_03{
	width: calc(440 * var(--formula));
	grid-area: 4/4/4/5;
	position: relative;
	z-index: -1;
	pointer-events: none;
}
.content04 .content__image_04{
	width: calc(582 * var(--formula));
	grid-area:6/1/7/2;
}
.content04 .content__image_05{
	width: calc(204 * var(--formula));
	grid-area:5/2/5/3;
	position: relative;
	top: calc(-10 * var(--formula));
}
.content04 .content__image_06{
	width: calc(42 * var(--formula));
	grid-area: 2 / 2 / 3 / 3;
	position: relative;
	z-index: 1;
	pointer-events: none;
}
.content04 .content__image_07{
	width: calc(666 * var(--formula));
margin: calc(170 * var(--formula)) auto 0;
}
/* ===============================================### 
アニメーション設定
###=============================================== */
/************** fade-in **************/
.bandw_0716 .js-fade-in {
	opacity: 0;
	transition: transform 1s ease-in-out, opacity 1s ease-in-out;
	transform: translateY(100px);
}

.bandw_0716 .js-fade-in.left_in {
	transform: translateX(-100px);
}

.bandw_0716 .js-fade-in.right_in {
	transform: translateX(100px);
}

.bandw_0716 .js-fade-in.show,
.bandw_0716 .js-fade-in.left_in.show,
.bandw_0716 .js-fade-in.right_in.show {
	opacity: 1;
	transform: translate(0);
}







.lp_content {
	position: relative;
}

@media screen and (min-width: 768px) {
	.bandw_0716 {
		width: 140rem;
		margin: auto;
	}

}







/* ===============================================### 
item-area
###=============================================== */
 .item-area {
	position: relative;
	/* margin: 0 auto calc(70 * var(--formula)) auto; */
	padding-bottom: calc(100 * var(--formula));
}

 .item-area .box08 {
	margin: 0 auto;
	width: calc(119 * var(--formula));
	margin-top: calc(160 * var(--formula));
}

 .flex {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.box08 img {
	width: calc(32 * var(--formula));
}

 .item-area .box08_1 {
	margin: 0 auto;
	width: calc(164 * var(--formula));
	margin-top: calc(-63 * var(--formula));
	font-size: calc(9 * var(--formula));
}

 .item-area .box09 {
	display: flex;
	justify-content: center;
	margin-top: calc(-34 * var(--formula));
}

 .item-area .box09 figure {
	width: calc(170 * var(--formula));
	margin-top: calc(-27 * var(--formula));
	margin-left: 0;
}

 .item-area .box08_1 p {
	width: fit-content;
	text-align: center;
	letter-spacing: .1px;
}

 .btn-area {
	display: flex;
	margin: calc(134 * var(--formula)) auto 0;
	padding-bottom: calc(117 * var(--formula));
}

 .btn-area a {
	margin: 0 auto;
	padding: calc(9 * var(--formula)) calc(30 * var(--formula));
	letter-spacing: 0.1em;
	font-family: 'Nunito', sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: calc(10 * var(--formula));
	border: 1px solid #19191E;
	color: #19191E;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
	 .item-area .box08 {
		width: calc(200 * var(--formula));
	}

	.box08 img {
    width: calc(55 * var(--formula));
	}

	 .item-area .box08_1 {
    width: calc(280 * var(--formula));
		margin-top: calc(-55 * var(--formula));
    font-size: calc(15 * var(--formula));
	}

	 .item-area .box09 figure {
    width: calc(270 * var(--formula));
		margin-top: calc(-21 * var(--formula));
	}

	 .btn-area {
    margin: calc(156 * var(--formula)) auto 0;
    padding-bottom: calc(157 * var(--formula));
	}

	 .btn-area a {
    padding: calc(21 * var(--formula)) calc(80 * var(--formula));
    font-size: calc(23 * var(--formula));
	}
}