@charset "utf-8";


@media print, screen and (min-width : 769px){
/* ------------------------------------------------------------------------------------------
*
*
    /yorimichi/
    Responsive / PC
*
*
------------------------------------------------------------------------------------------ */
body {
	overflow-y: scroll;
}
#contents_area{
	position: relative;
	font-weight: 300;
}
#contents_area picture{
	width: 100%;
}
#contents_area img{
	width: 100%;
}
#contents_area .swiper img{
	width: auto !important;
}

.loading_bg{
	background: #3E3C38;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 20;
	display: block;
}
.page-logo{
	position: absolute;
	top: calc(50vh - 100px);
	left: 50%;
	transform: translate(-50%, -50%);
	width: 184px;
	z-index:21;
	display: none;
}
.page-logo.fixed{
	position: absolute;
	top: auto;
	left: auto;
	bottom:50px;
	right:50px;
	transform: translate(0,0);
}

#sound_btn{
	display: block;
	outline: none;
	cursor: pointer;
	position: absolute;
	top: 20px;
	right: 30px;
	width: 88px;
	height: 41px;
	background: url(../image/sound_btn_01_on.png) no-repeat;
	background-size: 100% auto;
	border:none;
	z-index: 100;
	transition: all 0.3s ease;
}
#sound_btn.is-fixed {
	position: fixed;
	top: 68px;
}
#sound_btn.is-active{
	background-image: url(../image/sound_btn_01_off.png);
}
#sound_btn:hover{
	background-image: url(../image/sound_btn_02_on.png);
}
#sound_btn.is-active:hover{
	background-image: url(../image/sound_btn_02_off.png);
}
#sound_btn.is-body{
	background-image: url(../image/sound_btn_03_on.png);
}
#sound_btn.is-body.is-active{
	background-image: url(../image/sound_btn_03_off.png);
}
#sound_btn.is-body:hover{
	background-image: url(../image/sound_btn_04_on.png);
}
#sound_btn.is-body.is-active:hover{
	background-image: url(../image/sound_btn_04_off.png);
}



/* hero */


.hero{
	width: 100%;
	aspect-ratio: 1440 / 938;
	height: calc(100vh - 148px);
	position: relative;
	overflow: hidden
}
.kv-slider{
	width: 100%;
	height: 100%;
}
.hero .slick-track {
	height: calc(100vh - 148px);
}
.hero .kv_01,
.hero .kv_02,
.hero .kv_03{
	width: 100%;
	height: 100%;
}
.hero .kv_01 img,
.hero .kv_02 img,
.hero .kv_03 img{
	/*
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	*/
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.kv-slider .slick-dots{
		bottom:40px;
}
.kv-slider .slick-dots li {
	margin: 0 5px;
	width: 65px;
 	height: 2px;
	background: #fff;
}
.kv-slider .slick-dots li button {
	width: auto;
	height: auto;
	padding: 0;
}
.kv-slider .slick-dots li button::before {
	display: none;
}
.kv-slider .slick-dots li.slick-active::before {
	width: 0;
	height: 100%;
	left: 0;
	top: 0;
	background:#00bcab;
	position: absolute;
	display: block;
	content: "";
	-webkit-animation: 9s linear 0s infinite slide_meter;
			animation: 9s linear 0s infinite slide_meter;
}

.kv-slider .slick-dots li.slick-active.first::before {
	-webkit-animation: 9s linear 0s infinite slide_meter;
			animation: 9s linear 0s infinite slide_meter;
}

@-webkit-keyframes slide_meter {
	from {
	  width: 0;
	}
	to {
	  width: 100%;
	}
}
@keyframes slide_meter {
	from {
	  width: 0;
	}
	to {
	  width: 100%;
	}
}



/* content common  */
.bg_container{
	background: url(../image/white_noise_back.jpg) repeat;
	background-size: 100%;
	position: relative;
	top: -1px;
	z-index: 1;
}

/* section-intro */
.section-intro{
	color: #4E5553;
	padding-top: 160px;
	padding-bottom: 200px;
}
.section-intro .inner{
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
}
.section-intro h2{
	width: 380px;
	margin: 0 auto 0 100px;
}
#contents_area .section-intro h2 img {
	width: 380px;
}
.section-intro h3{
	font-size: 22px;
	font-weight: 300;
	line-height: 2.27;
	letter-spacing: 0.06em;
	margin-bottom: 50px;
}
.section-intro .text p{
	font-size: 15px;
	line-height: 3.33;
	letter-spacing: 0.04em;
}
.section-intro picture {
	border-radius: 5px;
	display: block;
	overflow: hidden;
}
.section-intro .block_01{
	width: 100%;
	margin: 25px auto 140px;
	padding: 0 80px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.section-intro .block_01 .text{
	margin-left: 80px;
	width: 300px;
	margin-top: 15px;
}
.section-intro .block_01 .text p{
	line-height: 3.6;
	margin-bottom: -15px;
}
.section-intro .block_01 .image{
	width: 640px;
}
.section-intro .block_02{
	width: 494px;
	aspect-ratio: 494 / 235;
	margin: 0 auto 155px;
}
.section-intro .block_02 .figure {
	position: relative;
}
.section-intro .block_02 .figure .img._01{
	position: absolute;
	top: 0;
	left: 0;
	width: 97px;
	height: 110px;
}
.section-intro .block_02 .figure .img._02{
	position: absolute;
	top: 0;
	right: 0;
	width: 101px;
	height: 110px;
}
.section-intro .block_02 .figure .img._03{
	position: absolute;
	top: 0;
	left: 97px;
	width: 325px;
	height: 73px;
}
.section-intro .block_02 .figure .img._04{
	position: absolute;
	top: 81px;
	left: 97px;
	width: 201px;
	height: 154px;
}
.section-intro .block_02 .figure .img._05{
	position: absolute;
	top:81px;
	left: 298px;
	width: 152px;
	height: 96px;
}
.section-intro .block_02 .figure .img._06{
	position: absolute;
	top: 162px;
	left: 59px;
	width: 137px;
	height: 55px;
}
.section-intro .block_02 .figure .img .box{
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}
.section-intro .block_02 .figure .img .box img{
	height: 100%;
	object-fit: contain;
}
#contents_area .section-intro .block_02 .figure .img._03 img {
	width: 325px;
	position: absolute;
	top: 0;
}
#contents_area .section-intro .block_02 .figure .img._04 img {
	width: 201px;
	position: absolute;
	top: 0;
}
#contents_area .section-intro .block_02 .figure .img._05 img {
	width: 152px;
	position: absolute;
	top: 0;
}
.section-intro .block_02 .figure .img._01,
.section-intro .block_02 .figure .img._02,
.section-intro .block_02 .figure .img._06{
	opacity: 0;
	transition: opacity 1s;
}
.section-intro .block_02 .figure .img._01.is-active,
.section-intro .block_02 .figure .img._02.is-active,
.section-intro .block_02 .figure .img._06.is-active{
	opacity:1;
}
.section-intro .block_02 .figure .img._03 .box,
.section-intro .block_02 .figure .img._04 .box,
.section-intro .block_02 .figure .img._05 .box{
	width: 0%;
	transition: width 1s ease-in-out;
}
.section-intro .block_02 .figure .img._04 .box {
	transition-delay: 1s;
}
.section-intro .block_02 .figure .img._05 .box {
	transition-delay: 2s;
}
.section-intro .block_02 .figure .img._06,
.section-intro .block_02 .figure .img._06 .box {
	transition-delay: 3s;
}
.section-intro .block_02 .figure .img._03.is-active .box,
.section-intro .block_02 .figure .img._04.is-active .box,
.section-intro .block_02 .figure .img._05.is-active .box{
	width: 100%;
}


.section-intro .block_03{
	width: 100%;
	margin: 0 auto 100px;
}
.section-intro .block_03 .wrap{
	max-width: 1040px;
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.section-intro .block_03 .js-image{
	width: 100%;
	aspect-ratio: 1040 / 650;
	border-radius: 5px;
}
.section-intro .block_03 .joy-logo{
	position: absolute;
	top: -65px;
	left: -50px;
	width: 190px;
	z-index: 11;
}
.section-intro .block_03 .word{
	position: absolute;
	top: -63px;
	left: 150px;
	width: 265px;
	z-index: 11;
}
#contents_area .section-intro .block_03 .word img {
	width: 265px;
}
.section-intro .block_04{
	width: 100%;
	margin: 0 auto 125px;
	display: flex;
	justify-content: space-between;
}
.section-intro .block_04 .image_01{
	max-width: 640px;
	aspect-ratio: 640 / 400;
}
.section-intro .block_04 .image_02{
	max-width: 560px;
	aspect-ratio: 560 / 350;
	margin-top: 150px;
}
.section-intro .block_05{
	width: 100%;
	padding: 0 120px;
	margin: 0 auto 150px;
}
.section-intro .block_05 .js-image{
	aspect-ratio: 1040 / 650;
	border-radius: 5px;
}
.section-intro .block_06{
	width: 100%;
	margin: 0 auto 125px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.section-intro .block_06 .text{
	margin-left: 160px;
	width: 400px;
	padding-bottom: 30px;
}
.section-intro .block_06 .text h3{
	margin-bottom: 60px;
}
.section-intro .block_06 .image{
	width: 640px;
}
.section-intro .block_06 .image .js-image{
	width: 100%;
	aspect-ratio: 640 / 400;
	border-radius: 5px;
}
.section-intro .block_07{
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 170px;
}
.section-intro .block_07 .image_01{
	margin-left: 40px;
	width: 600px;
	aspect-ratio: 600 / 375;
}
.section-intro .block_07 .image_02{
	margin-top: 150px;
	margin-right: 80px;
	width: 480px;
	aspect-ratio: 480 / 300;
}
.section-intro .block_08{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 125px;
}
.section-intro .block_08 .js-image{
	width: 720px;
	aspect-ratio: 720 / 450;
	border-radius: 5px;
}
.section-intro .block_08 .text{
	margin-right: 120px;
	width: 360px;
}
.section-intro .block_08 .text h3{
	margin-top: 40px;
	margin-bottom: 60px;
}
.section-intro .block_09{
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 150px;
}
.section-intro .block_09 .image_01,
.section-intro .block_09 .image_02,
.section-intro .block_09 .image_03{
	width: 400px;
	aspect-ratio: 400 / 250;
}
.section-intro .block_09 .image_02{
	margin-top: 50px;
}
.section-intro .block_09 .image_03{
	margin-top: 125px;
}
.section-intro .block_10{
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 55px;
}
.section-intro .block_10 .text{
	margin-left: 160px;
	width: 350px;
	margin-top: 10px;
}
.section-intro .block_10 .text h3{
	margin-bottom: 60px;
}
.section-intro .block_10 .image{
	margin-right: 80px;
	width: 640px;
}
.section-intro .block_10 .js-image {
	aspect-ratio: 640 / 400;
	border-radius: 5px;
}

.section-intro .block_11{
	width: 100%;
	height: 975px;
	position: relative;
}
.section-intro .block_11 .image_01{
	position: absolute;
	top: 0;
	right: 0;
	width: 400px;
}
.section-intro .block_11 .image_02{
	position: absolute;
	top: 125px;
	left: 440px;
	width: 400px;
}
.section-intro .block_11 .image_03{
	position: absolute;
	top: 450px;
	left: 0;
	width: 560px;
}
.section-intro .block_11 .image_03 .note{
	position: absolute;
	top: -10px;
	right: -100px;
	content:'';
	width: 86px;
	z-index: 1;
}
.section-intro .block_11 .image_03 .note img{
	width: 100%;
}
.section-intro .block_11 .image_04{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 640px;
}
.section-intro .block_11 .word{
	position: absolute;
	bottom: 0;
	left: 200px;
	width: 352px;
}
#contents_area .section-intro .block_11 .word img {
	width: 352px;
}

/* section-show */
.section-show{
	width: 100%;
	background: rgba(76,84,82,0.2);
	padding-top: 30px;
	position: relative;
	margin-bottom: 200px;
}
.section-show-bottom {
	overflow: hidden;
}
.section-show-bottom-inner {
	position: absolute;
	left: 50%;
	bottom: -200px;
	transform: translateX(-50%);
	width:2400px;
	height: 200px;
}
.section-show-car {
	width: 76px;
}
.section-show::after{
	position: absolute;
	left: 50%;
	bottom: -200px;
	content:'';
	transform: translateX(-50%);
	width: 100%;
	height: 200px;
	background: url(../image/show_btm_bg.png) center center no-repeat;
	background-size: auto 100%;
}
.section-show .inner{
	width: 100%;
	margin: 0 auto;
	padding-left: 38px;
	padding-right: 38px;
}
.section-show h2{
	text-align: left;
	width: 214px;
	margin-bottom: 80px;
}
.section-show .slider_wrap{
	max-width: 960px;
	width: 100%;
	margin: 0 auto;
}
.section-show .show-slider{
	width: 100%;
}
.section-show .slider_item{
	width: 100%;
	aspect-ratio: 960 / 600;
}
.section-show .slider_item picture{
	width: 100%;
	height: 100%;
}
.section-show .slider_item picture img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.section-show .show-slider__thumb{
	width: 790px;
	height: 160px;
	margin:40px auto 50px;
}
.section-show .show-slider__thumb .slick-track{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  	grid-template-rows: 70px 70px;
  	gap: 10px;
}
.section-show .show-slider__thumb .slick-track::before,
.section-show .show-slider__thumb .slick-track::after{
	display: none;
}
.section-show .thumb_item{
	width: 70px !important;
	height: 100%;
	position: relative;
}
.section-show .thumb_item::after{
	position: absolute;
	top: 0;
	left: 0;
	content:'';
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.7);
	transition: 0.3s;
}
.section-show .thumb_item.slick-current::after{
	content:none;
}
/*
.section-show .thumb_item:nth-child(10),
.section-show .thumb_item:nth-child(20){
	margin-right: 0;
}

.section-show .thumb_item:nth-child(n+11){
	margin-bottom: 0;
}
	*/

.section-show .slick-arrow{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 25px !important;
	height: 50px;
	opacity:0.7;
	z-index:10;
  }
  .section-show .prev-arrow{
	  left: -80px;
  }
  .section-show .next-arrow{
	  right: -80px;
  }

  /* section-point */
  .section-point{
	width: 100%;
	background: rgba(142,140,133,0.09);
	position: relative;
	margin-bottom: 200px;
  }
	.section-point-bottom {
		overflow: hidden;
	}
	.section-point-bottom-inner {
		position: absolute;
		left: 50%;
		bottom: -200px;
		transform: translateX(-50%);
		width:2400px;
		height: 200px;
	}
	.section-point-car {
		width: 76px;
		position: relative;
		margin-top: 100px;
	}
  .section-point::after{
	position: absolute;
	left: 50%;
	bottom: -200px;
	content:'';
	transform: translateX(-50%);
	width: 100%;
	height: 200px;
	background: url(../image/point_btm_bg.png) center center no-repeat;
	background-size: auto 100%;
}
#spsp {
	fill: transparent;
	stroke-width: 2;
	stroke: transparent;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
#ppsp {
	fill: transparent;
	stroke-width: 2;
	stroke: transparent;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
  .section-point .inner{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
  }
  .section-point h2{
	/*margin: -50px auto 0 30px;*/
	position: relative;
	top: -40px;
	left: 0;
	width: 427px;
  }
	#contents_area .section-point h2 img {
		width: 427px;
	}
  .section-point .point{
	width: 100%;
	padding: 75px 0;
	border-bottom: #CCCCCC solid 1px;
	display: flex;
	justify-content: space-between;
  }
  .section-point .point._01{
	padding-top: 40px;
  }
	.section-point .point._02 .col.image video {
		width: 100%;
		height: auto;
		display: block;
	}
  .section-point .point._03{
	padding-bottom: 55px;
  }
  .section-point .point._04{
	border-bottom: none;
	padding-bottom: 20px;
  }
  .section-point .point .col.text{
	width: 400px;
  }
  .section-point .point .col.image{
	width: 560px;
  }
  .section-point .point .col.image img{
	border-radius: 8px;
  }
  .section-point .point .col.image video{
	border-radius: 8px;
  }
  .section-point .point._03 .col .swiper-slide .c-card__image{
	border: none;
  }
  .section-point .point .col.text .no{
	position: relative;
	top: -30px;
	left: -40px;
	width: 120px;
	height: 120px;
	border: #808080 solid 1px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-bottom: 5px;
  }
  .section-point .point .col.text .no span{
	margin-top: 5px;
	display: block;
  }
  .section-point .point .col.text .no span.en{
	color: #444B49;
	font-size: 12px;
	letter-spacing: 0.06em;
  }
  .section-point .point .col.text .no span.num{
	color: #444B49;
	font-size: 20px;
	letter-spacing: 0.06em;
  }
  .section-point .point .col.text h3{
	padding: 0 0 0 40px;
	color: #444B49;
	font-size: 19px;
	font-weight: 300;
	line-height: 2.1;
	letter-spacing: 0.06em;
	margin-bottom: 30px;
  }
  .section-point .point .col.text p.text{
	padding: 0 0 0 40px;
	color: #444B49;
	font-size: 15px;
	line-height: 2.3;
	letter-spacing: 0.04em;
	margin-bottom: 15px;
  }
  .section-point .point .col.text p.caution{
	padding: 0 30px 0 40px;
	color: #444B49;
	font-size: 11px;
	line-height: 2;
	letter-spacing: 0.06em;
	font-family: "HondaGlobalFontJP-Light", sans-serif;
  }
  .section-point .point._03 .swiper-controls{
	margin-top: 20px;
  }

  /* section-joytime */
  .section-joytime{
	width: 100%;
	margin-bottom: 80px;
  }
  .section-joytime .inner{
	max-width: 1080px;
	width: 100%;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
  }
  .section-joytime .row{
	display: flex;
	justify-content: space-between;
	align-items: center;
  }
  .section-joytime .row .col.slide{
	width: 500px;
  }
  .section-joytime .joytime-slider{
	width: 500px;
	height: 500px;
	position: relative;
  }
  .section-joytime .joytime-slider::after{
	position: absolute;
	top: 0;
	left: 0;
	content:'';
	width: 100%;
	height: 100%;
	background: url(../image/jt_mask.png) no-repeat;
	background-size: contain;
	z-index: 100;
  }
  .section-joytime .slider_item{
	width: 100%;
  }
  .section-joytime .row .col.text{
	width: 500px;
  }
  .section-joytime .row .col.text h2{
	padding-top: 40px;
	margin-left: 130px;
	margin-bottom: 30px;
	position: relative;
  }
  .section-joytime .row .col.text h2::after{
	position: absolute;
	top: -80px;
	left: -50px;
	content:'';
	width: 120px;
	height: 120px;
	background: url(../image/jt_tit_01.png) no-repeat;
	background-size: contain;
  }
  .section-joytime .row .col.text h2 span{
	display: block;
	width: 240px;
  }
  .section-joytime .row .col.text p{
	margin-left: 150px;
	font-size: 15px;
	line-height: 3;
	letter-spacing: 0.04em;
  }

  /* section-interview */
  .section-interview{
	width: 100%;
	margin-bottom: 150px;
  }
  .section-interview .inner{
	width: 800px;
	margin: 0 auto;
  }
  .section-interview .content{
	padding: 40px 0;
	border-bottom: #DFE1E0 solid 1px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
  }
  .section-interview .content:last-child{
	border-bottom: none;
  }
  .section-interview .content .photo{
	width: 220px;
	height: 220px;
	padding-right: 20px;
  }
  .section-interview .content .photo img{
	border-radius: 100%;
  }
  .section-interview .content .text{
	width: 350px;
  }
  .section-interview .content:nth-child(1) h3{
	width: 316px;
  }
  .section-interview .content:nth-child(2) h3{
	width: 320px;
  }
  .section-interview .content:nth-child(3) h3{
	width: 318px;
  }
  .section-interview .content .name{
	margin-top: 20px;
	margin-left: 20px;
	font-size: 16px;
	font-family: "HondaGlobalFontJP-Bold", sans-serif;
	line-height: 1.625;
	letter-spacing: 0.05em;
  }
  .section-interview .content .name span{
	font-size: 13px;
	font-weight: normal;
  }
  .section-interview .content .btn{
	margin-top: 20px;
	margin-left: 20px;

  }
  .section-interview .content .btn a{
	color: #4E5553;
	display: block;
	width: 250px;
	height: 40px;
	border: #A9A9A9 solid 1px;
	font-size: 14px;
	letter-spacing: 0.05em;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
	padding-left: 20px;
	position: relative;
	transition: 0.3s;
  }
  .section-interview .content .btn a::before{
	position: absolute;
	top: 50%;
	left: 20px;
	content:'';
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent #4E5553;
	border-style: solid;
  }
  .section-interview .content .btn a:hover{
	color: #fff;
	background: #A9A9A9;
  }
  .section-interview .content .btn a:hover::before{
	border-color: transparent transparent transparent #fff;
  }



   /* section-bottom */
	.section-bottom{
	width: 100%;
	padding-bottom: 50px;
	margin-bottom: -50px;
  }
  .section-bottom .inner{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
  }
  .section-bottom .title{
	text-align: center;
	display: block;
	width: 220px;
	color: #444B49;
	font-size: 19px;
	font-family: "HondaGlobalFontJP-Bold", sans-serif;
	line-height: 1.84;
	margin: 0 auto 30px;
	position: relative;
  }
  .section-bottom .title::before{
	position: absolute;
	top: 50%;
	left: -45px;
	transform: translateY(-50%);
	content:'';
	width: 45px;
	height: 62px;
	background: url(../image/btm_bg_01.png) no-repeat;
	background-size: contain;
  }
  .section-bottom .title::after{
	position: absolute;
	top: 50%;
	right:-50px;
	transform: translateY(-50%);
	content:'';
	width: 45px;
	height: 62px;
	background: url(../image/btm_bg_02.png) no-repeat;
	background-size: contain;
  }
  .section-bottom .image{
	width: 160px;
	margin: 0 auto 50px;
  }
  .section-bottom .button_box{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
  }
  .section-bottom .c-button{
	min-width: 330px;
  }
  .section-bottom .c-button{
	background: #444b49;
  }
  .section-bottom .c-button:hover{
	color: #444b49;
	background-color: var(--color-light-gray);
  }
  .section-bottom .c-button.c-button-secondary{
	color: #444b49;
	border-color:#444b49;
	background: #fff;
  }
  .section-bottom .c-button.c-button-secondary:hover{
	background-color: var(--color-light-gray);
  }
  .section-bottom .c-button + .c-button{
	margin-top: 15px;
  }
  .section-bottom .c-list{
	color: #444b49;
	margin: 120px auto 50px;
  }
  .section-bottom .c-list a{
	text-decoration: underline;
  }



  .section-campaign{
	background: #FAF0E2;
	padding: 65px 0;
	position: relative;
	margin: 270px auto 100px;
  }
  .section-campaign::after{
	position: absolute;
	top: 5.271vw;
	right:-10.395vw;
	content:'';
	width:125.769vw;
	height: 36.31vw;
	background: url(../image/campaign_bg.png) no-repeat;
	background-size: cover;
  }
  .section-campaign .inner{
	width: 980px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 1;
  }
  .section-campaign .col_left{
	width: 490px;
  }
  .section-campaign .col_right{
	width: 420px;
  }
  .section-campaign .col_right p{
	width: 413px;
	margin: 0 auto 20px 0;
  }
  .section-campaign .col_right .thumb{
	width: 380px;
	margin: 0 auto;
  }
  .section-campaign .col_right .thumb a{
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
	position: relative;
  }
  .section-campaign .col_right .thumb a::after{
	position: absolute;
	top: 50%;
	left: 50%;
	content:'';
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	background: url(../image/icon_play.svg) no-repeat;
	background-size: contain;
	z-index: 1;
  }









/* ------------------------------------------------------------------------------------------
*
*
    END
*
*
------------------------------------------------------------------------------------------ */
}


@media (min-width : 769px) and (max-width : 1280px) {
	.section-intro{
		padding-top: 11.719vw;
		padding-bottom: 15.625vw;
	}
	.section-intro .inner{
		max-width: 100%;
		padding-left: 1.563vw;
		padding-right: 1.563vw;
	}

	.section-intro h2{
		width: 29.688vw;
		margin: 0 auto 0 1.563vw;
	}
	#contents_area .section-intro h2 img {
		width: 29.688vw;
	}
	.section-intro h3{
		margin-bottom: 3.906vw;
	}
	.section-intro .block_01{
		margin: 0 auto 9.375vw;
		padding: 0 6.25vw;
	}
	.section-intro .block_01 .text{
		margin-left:0;
		width: 28.125vw;
	}
	.section-intro .block_01 .image{
		width: 50vw;
	}
	.section-intro .block_02{
		/*width: 38.594vw;*/
		margin: 0 auto 11.719vw;
	}
	.section-intro .block_03{
		margin: 0 auto 10.938vw;
	}
	.section-intro .block_03 .joy-logo{
		top: -3.516vw;
		left: -3.125vw;
		width: 12.5vw;
	}
	.section-intro .block_03 .word{
		top: -4.922vw;
		left: 10.938vw;
		width: 20.703vw;
	}
	#contents_area .section-intro .block_03 .word img {
		width: 20.703vw;
	}
	.section-intro .block_04{
		width: 100%;
		margin: 0 auto 9.766vw;
	}
	.section-intro .block_04 .image_01{
		max-width: 50vw;
	}
	.section-intro .block_04 .image_02{
		max-width: 43.75vw;
		margin-top: 11.719vw;
	}
	.section-intro .block_05{
		padding: 9.375vw;
		margin: 0 auto 11.719vw;
	}
	.section-intro .block_06{
		margin: 0 auto 9.766vw;
	}
	.section-intro .block_06 .text{
		margin-left: calc((50vw - 400px) / 23 * 14 );
		width: 400px;
		margin-right: calc((50vw - 400px) / 23 * 9 );
	}
	.section-intro .block_06 .image{
		width: 50vw;
	}
	.section-intro .block_07{
		margin-bottom: 13.281vw;
	}
	.section-intro .block_07 .image_01{
		margin-left: 3.125vw;
		width: 46.875vw;
	}
	.section-intro .block_07 .image_02{
		margin-top: 11.719vw;
		margin-right: 6.25vw;
		width: 37.5vw;
	}
	.section-intro .block_08{
		margin-bottom: 9.375vw;
	}
	.section-intro .block_08 .js-image{
		width: 56.25vw;
	}
	.section-intro .block_08 .text{
		margin-right: 0;
		width: 37.5vw;
	}
	.section-intro .block_09{
		margin-bottom: 11.719vw;
	}
	.section-intro .block_09 .image_01,
	.section-intro .block_09 .image_02,
	.section-intro .block_09 .image_03{
		width: 31.25vw;
	}
	.section-intro .block_09 .image_02{
		margin-top: 3.906vw;
	}
	.section-intro .block_09 .image_03{
		margin-top: 9.375vw;
	}
	.section-intro .block_10{
		margin-bottom: 5.859vw;
	}
	.section-intro .block_10 .text{
		margin-left: calc((50vw - 350px) /11 *7);
		width: 350px;
	}
	.section-intro .block_10 .image{
		margin-right: calc((50vw-350px) /11 *4);
		width: 50vw;
	}
	.section-intro .block_11{
		height: 76.172vw;
	}
	.section-intro .block_11 .image_01{
		width: 31.25vw;
	}
	.section-intro .block_11 .image_02{
		top: 9.766vw;
		left: 32.813vw;
		width: 31.25vw;
	}
	.section-intro .block_11 .image_03{
		top: 34.766vw;
		left: 0;
		width: 43.75vw;
	}
	.section-intro .block_11 .image_04{
		width: 50vw;
	}
	.section-intro .block_11 .word{
		left: 14.063vw;
		width: 27.5vw;
	}
	#contents_area .section-intro .block_11 .word img {
		width: 27.5vw;
	}

	.section-show .inner{
		max-width: 100%;
		padding-bottom: 4.688vw;
	}
	.section-show h2{
		width: 16.719vw;
		margin-bottom: 6.25vw;
	}
	.section-show .show-slider__thumb{
		width: 70vw;
		height: 12.5vw;
		margin-top: 3.125vw;
	}
	.section-show .show-slider__thumb .slick-track{
		  grid-template-rows: 5.469vw 5.469vw;
		  gap: 0.781vw;
	}
	.section-show .thumb_item{
		width: 5.469vw !important;
	}

	.section-show .slick-arrow{
		width: 1.953vw !important;
		height: 3.906vw;
	  }
	  .section-show .prev-arrow{
		  left: -6.25vw;
	  }
	  .section-show .next-arrow{
		  right: -6.25vw;
	  }

}
@media (min-width : 769px) and (max-width : 960px) {
	.section-intro .block_01{
		padding: 0;
		display: flex;
		justify-content: center;
	}
	.section-intro .block_01 .text{
		margin-right: 3.125vw;
		width: auto;

	}
}
@media (min-width : 769px) and (max-width : 1040px) {
	.section-point{
		margin-top: 200px;
	  }
	  .section-point::before{
		top: -200px;
		left: 50%;
		height: 200px;
	  }
	  .section-point .inner{
		max-width: 100%;
	  }
	  .section-point h2{
		margin-top: -50px;
		margin-left: 30px;
		width: 427px;
	  }
	  #contents_area .section-point h2 img {
		width: 427px;
	  }
	  .section-point .point{
		padding: 75px 0;
	  }
	  .section-point .point .col.text{
		width: 400px;
	  }
	  .section-point .point .col.image{
		width: 560px;
	  }
	  .section-point .point .col.text .no{
		top: -30px;
		left: 0;
		width: 120px;
		height: 120px;
		margin-bottom: 10px;
	  }
	  .section-point .point .col.text h3{
		padding: 0 30px;
		margin-bottom: 10px;
	  }
	  .section-point .point .col.text p.text{
		padding: 0 30px;
		margin-bottom: 10px;
	  }
	  .section-point .point .col.text p.caution{
		padding: 0 30px;
		font-family: "HondaGlobalFontJP-Light", sans-serif;
	  }

	  .section-joytime .row .col.slide{
		width: 50%;
	  }
	  .section-joytime .joytime-slider{
		width: 100%;
		aspect-ratio: 1 / 1;
		position: relative;
	  }
	  .section-joytime .joytime-slider::after{
		position: absolute;
		top: 0;
		left: 0;
		content:'';
		width: 100%;
		height: 100%;
		background: url(../image/jt_mask.png) no-repeat;
		background-size: contain;
		z-index: 100;
	  }
	  .section-joytime .slider_item{
		width: 100%;
	  }
	  .section-joytime .row .col.text{
		width: 50%;
	  }
	  .section-joytime .row .col.text h2{
		padding-top: 3.846vw;
		margin-left: 0;
		margin-bottom: 2.885vw;
	  }
	  .section-joytime .row .col.text h2::after{
		top: -7.692vw;
		left: 0;
		width: 11.538vw;
		height: 11.538vw;
	  }
	  .section-joytime .row .col.text h2 span{
		width: 23.077vw;
	  }
	  .section-joytime .row .col.text p{
		margin-left: 20px;
	  }

	  .section-bottom{
		margin-top: 15.385vw;
	  }
	  .section-bottom .inner{
		max-width: 100%;
	  }
}

@media (min-width : 769px) and (max-width : 1000px) {

	  .section-campaign .inner{
		width: 100%;
		padding: 0 20px;
	  }
	  .section-campaign .col_left{
		width: 50vw;
	  }
	  .section-campaign .col_right{
		width: 42.857vw;
	  }
	  .section-campaign .col_right p{
		width: 42.143vw;
		margin-bottom: 2.041vw;
	  }
	  .section-campaign .col_right .thumb{
		width: 38.776vw;
	  }
	  .section-campaign .col_right .thumb a::after{
		width: 5.102vw;
		height: 5.102vw;
	  }
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}
.add-animation {
  animation: zoomUp 10s linear 0s normal both;
	transform-origin: center center;
}

.bounce-in {
	opacity: 0;
}
.bounce-in.active {
  animation: bounce-in 1s ease forwards;
}
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
		opacity: 1;
		transform: scale(.9);
	}
  100% {
		opacity: 1;
		transform: scale(1);
	}
}

.u-image-parallax {
	overflow: hidden;
	position: relative;
	will-change: transform;
}
.u-image-parallax > div {
	bottom: 0;
	position: absolute;
	will-change: transform;
}
.u-image-parallax img {
	border: 0;
	height: auto;
	vertical-align: top;
	width: 100%;
}
.js-heading {
  position: relative;
}

.js-heading-wrapper {
  position: relative;
  width: 0;
  overflow: hidden;
  transition: width .6s ease-in-out;
}

.js-heading.visible .js-heading-wrapper {
  width: 100%;
}

/* fadeIn */
.js-fade_in{
	opacity: 0;
	transition-duration: 1000ms;
	transition-property: opacity, transform;
}
.text_in{
	transition-delay: 500ms;
}
.js-fade_in_up {
	opacity: 0;
	transform: translate(0, 30px);
	transition-duration: 1000ms;
	transition-property: opacity, transform;
}
.fade_in_down {
	transform: translate(0, -50px);
}
.fade_in_left {
	transform: translate(-50px, 0);
}
.fade_in_right {
	transform: translate(50px, 0);
}
.js-fade_in.is-active,
.js-fade_in_up.is-active {
	opacity: 1;
	transform: translate(0, 0);
}


/* for micromodal */

.modal{
	display: none;
}
.modal.is-open {
	display: block;
}
.modal {
	font-family: "HondaGlobalFontJP-Regular", sans-serif;
	font-weight: normal;
  }

  .modal__overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/*background: rgba(0,0,0,0.6);*/
	background: rgba(255,255,255,1.0);
	display: flex;
	justify-content: center;
	align-items: center;
  }

  .modal__container {
	background-color: #fff;
	margin-top: 48px;
	padding: 20px;
	max-width: 400px;
	max-height: 100vh;
	box-sizing: border-box;
  }

  .modal__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	}


  .modal__content {
	margin-top: 2rem;
	margin-bottom: 2rem;
	line-height: 1.5;
	color: rgba(0,0,0,.8);
  }

  .modal__close {
	position: fixed;
	top: 78px;
	right: 30px;
	z-index: 9999;
	width: 25px;
	height: 25px;
	padding: 0;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 1);
	border: none;
	transition: opacity .4s ease
}
@media(hover: hover) {
	.modal__close:hover {
		opacity: .7
	}
}
@media screen and (max-width: 768px) {
	.modal__close {
		top: 78px;
		right: 20px
	}
}
.modal__close::before, .modal__close::after {
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	content: "";
	background-color:#000;
}
.modal__close::before {
	transform: rotate(-45deg)
}
.modal__close::after {
	transform: rotate(45deg)
}