@charset "utf-8";

:root{
	--font-color:#3d433c;
	--font-size:14px;
	--font-light: "HondaGlobalFontJP-Light", sans-serif;
	--transition: 2000ms ease-out;
}

section.content{
	font-family: var(--font-light);
	font-size: var(--font-size);
	color: var(--font-color);
	line-height: 36px;
}

.main_mv img,
.main_mv picture,
section.content img,
section.content picture{
	vertical-align: bottom;
	width: 100%;
	height: auto;
	display: inline-block;
}

/*----------------------------
main
----------------------------*/
.main_mv{
	position: relative;
}

.main_tl{
	width: 22%;
	position: absolute;
	top: 18%;
	left: 20%;
	z-index: 2;
}
@media print, screen and (max-width : 768px){
	.main_tl{
		width: 76.1333%;
		top: 6%;
		left: 50%;
		transform: translateX(-50%);
	}
}
.main_tl img{
	filter: drop-shadow(4px 4px 40% rgba(0, 0, 0, 0.4));
}

.main_thum_wrap{
	overflow: hidden;
}

/*----------------------------
main
----------------------------*/
/*----------------------------
content
----------------------------*/
@media print, screen and (min-width : 769px){
	.section01_01{ margin-top: 18%; }

	.section01_01 .section_img{
		width: 37.5%;
		margin-left: 46%;
	}

	.section01_02{ margin-top: 7.6%; }

	.section01_02 .section_img{
		width: 24.6%;
		margin-left: 17.6%;
	}

	.section01_03{
		display: flex;
		align-items: center;
	}

	.section01_03 .txtwrap{
		width: 51.6%;
		display: flex;
		justify-content: right;
		transform: translateY(-34%);
	}

	.section01_03 .txtwrap p{
		width: fit-content;
		margin-right: 18.625%;
		display: inline-block;
		
	}

	.section01_03 .section_img{
		width: 48.4%;
	}

	.section01_04{
		margin-top: 8.0878%;
		position: relative;
	}

	.section01_04 .section_img:nth-child(1){
		width: 28.4%;
		position: absolute;
		top: -60%;
		left: 16%;
	}

	.section01_04 .section_img:nth-child(2){
		width: 24.6%;
		margin-left: 58.4%;
	}

	.section01_05{
		margin-top: 11.1%;
		display: flex;
		justify-content: center;
		gap: 9px;
	}

	.section01_05 .section_img:nth-child(1){
		width: 12.9%;
	}

	.section01_05 .section_img:nth-child(2){
		width: 25.3%;
	}

	.section01_06{
		margin-top: 13.675%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.section01_06 .section_img_wrap{
		width: 53.9%;
	}

	.section01_06 .section_img_wrap .section_img{
		width: 70.7%;
		margin-left: auto;
	}

	.section01_06 .txtwrap{
		width: 46.1%;
		padding-left: 8.775%;
		box-sizing: border-box;
	}

	.section01_07{
		margin-top: 15.45%;
		position: relative;
	}

	.section01_07 .section_img:nth-child(1){
		width: 28.5%;
		position: absolute;
		top: -20%;
		right: 14.7%;
	}

	.section01_07 .section_img:nth-child(2){
		width: 29.4%;
		margin-left: 20.2%;
	}

	.content .section_mv{
		margin-top: 17.95%;
		overflow: hidden;
	}

	.section02_01{
		margin-top: 14.55%;
		display: flex;
		justify-content: center;
		gap: 4.81%;
	}

	.section02_01 .section_img{
		width: 18.987%;
	}

	.section02_02{
		margin-top: 11.9125%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.section02_02 .txtwrap{
		width: 46.6%;
		padding-right: 5%;
		box-sizing: border-box;
		transform: translateY(-20%);
	}

	.section02_02 .txtwrap p{
		width: fit-content;
		margin-left: auto;
		display: block;
	}

	.section02_02 .section_img_wrap{
		width: 53.4%;
	}

	.section02_02 .section_img_wrap .section_img{
		width: 64.2%;
	}

	.section02_03{
		margin-top: 9.766%;
		position: relative;
	}

	.section02_03 .section_img:nth-child(1){
		width: 22.658%;
		position: absolute;
		top: -95%;
		left: 18.73%;
	}

	.section02_03 .section_img:nth-child(2){
		width: 18.987%;
		margin-left: 50%;
	}

	.section02_04{
		margin-top: 9.97%;
		display: flex;
		justify-content: center;
		gap: 9px;
	}

	.section02_04 .section_img:nth-child(1){
		width: 20.127%;
		display: flex;
		flex-flow: column;
		justify-content: space-between;
	}

	.section02_04 .section_img:nth-child(2){
		width: 33.86%;
	}

	.section03_01{
		margin-top: 15.072%;
		display: flex;
		justify-content: center;
		gap: 3.544%;
	}

	.section03_01 .section_img:nth-child(1){
		width: 17.59%;
	}

	.section03_01 .section_img:nth-child(2){
		width: 23.04%;
		margin-top: 8.389%;
	}

	.section03_01 .section_img:nth-child(3){
		width: 21.14%;
		margin-top: 28.965%;
	}

	.section03_02{
		width: 66.962%;
		margin: -7.35% auto 0;
	}

	.section03_03{
		text-align: center;
		margin-top: 12.98%;
	}

	.section04 .section_mv{
		margin-top: 12.98%;
	}

	.grid_wrap {
	display: grid;
	grid-template-columns: repeat(17, 1fr);
	grid-template-rows: repeat(10, 1fr);
	grid-column-gap: 9px;
	grid-row-gap: 9px;
	}

	.grid1 { grid-area: 1 / 1 / 9 / 8; display: flex; align-items: end; }
	.grid2 { grid-area: 9 / 3 / 11 / 8; }
	.grid3 { grid-area: 3 / 8 / 7 / 14;  display: flex; align-items: end; transform: translateY(-11%);}
	.grid4 { grid-area: 7 / 8 / 11 / 12; transform: translateY(-11%);}
	.grid5 { grid-area: 3 / 14 / 7 / 18;  display: flex; align-items: end; transform: translateY(-11%);}
	.grid6 { grid-area: 7 / 12 / 11 / 16; transform: translateY(-11%);}
}

@media print, screen and (max-width : 768px){
	#contents_area section.content br{
		display: block !important;
	}

	.section01_01{margin-top: 34vw;}
	.section01_01 .section_img{
		width: 66.66%;
		margin-left: 23.73%;
	}
	.section01_02{margin-top: 22vw;}
	.section01_02 .section_img{
		width: 48%;
		margin-left: 8.13%;
	}

	.section01_03{
		width: 100%;
		margin-top: 22vw;
		display: flex;
		flex-direction: column;
	}
	.section01_03 .txtwrap{
		margin-top: 22vw;
		padding: 0 10.4%;
		order: 1;
	}
	.section01_03 .section_img{
		width: 86.933%;
		margin-left: auto;
		order: 0;
	}

	.section01_04{ margin-top: 24vw; }
	.section01_04 .section_img:nth-child(1){
		width: 61.333%;
		margin-left: 7.733%;
	}
	.section01_04 .section_img:nth-child(2){
		width: 45.8666%;
		margin-top: 17vw;
		margin-left: auto;
	}

	.section01_05{
		width: 84.8%;
		margin: 22vw auto 0;
		display: flex;
		gap: 4px;
	}

	.section01_06{
		margin-top: 22vw;
	}

	.section01_06 .section_img{
		width: 88%;
	}

	.section01_06 .txtwrap{
		text-align: center;
		width: fit-content;
		margin: 36vw auto 0;
	}

	.section01_07{ margin-top: 36vw;}

	.section01_07 .section_img:nth-child(1){
		width: 60.8%;
		margin-left: auto;
	}
	.section01_07 .section_img:nth-child(2){
		width: 65.0666%;
		margin:19vw auto 0;
	}

	.section_mv{
		margin-top: 40vw;
		overflow: hidden;
	}

	.section02_01{
		width: 49.2%;
		margin: 20vw auto 0;
		display: flex;
		flex-direction: column;
		gap: 14vw;
	}

	.section02_02{
		margin-top: 18vw;
		display: flex;
		flex-direction: column-reverse;
	}

	.section02_02 .txtwrap{
		margin-top: 22vw;
		padding: 0 12.8%;
	}

	.section02_02 .section_img_wrap{
		width: 85.333%;
		margin-left: auto;
	}

	.section02_03 { margin-top: 22vw;}
	.section02_03 .section_img:nth-child(1){
		width: 59.7333%;
		margin-left: 7.4666%;
	}
	.section02_03 .section_img:nth-child(2){
		width: 48.533%;
		margin-top: 16vw;
		margin-left: 35.7333%;
	}

	.section02_04{ margin-top: 13vw; }
	.section02_04 .section_img{
		width: 87.4666%;
		margin: 0 auto;
	}
	.section02_04 .section_img:nth-child(1){
		margin-bottom: 4px;
		display: flex;
		gap: 4px;
	}

	.section03_01{ margin-top: 16vw;}
	.section03_01 .section_img:nth-child(1){
		width: 35.733%;
		margin-left: 10.6666%;
	}
	.section03_01 .section_img:nth-child(2){
		width: 46.4%;
		margin-top: 8vw;
		margin-left: 30.4%;
	}
	.section03_01 .section_img:nth-child(3){
		width: 45.866%;
		margin-top: 8vw;
		margin-left: 48.8%;
	}

	.grid_wrap {
		width: 91.73333%;
		margin: -21vw auto 0;
		display: grid;
		grid-template-columns: repeat(13, 1fr);
		grid-template-rows: repeat(20, 1fr);
		grid-column-gap: 4px;
		grid-row-gap: 4px;
	}

	.grid1 { grid-area: 1 / 1 / 11 / 8; padding-left: 23%; display: flex; align-items: end;}
	.grid2 { grid-area: 1 / 8 / 10 / 14; display: flex; align-items: end; transform: translateY(2dvw);}
	.grid3 { grid-area: 11 / 1 / 15 / 8; }
	.grid4 { grid-area: 10 / 8 / 15 / 14; padding-right: 10.721%; display: flex; align-items: end;}
	.grid5 { grid-area: 15 / 1 / 21 / 7 ; padding-left: 21.1395%;}
	.grid6 { grid-area: 15 / 7 / 19 / 14 ; padding-right: 15.302%;}

	.section03_03{
		text-align: center;
		margin-top: 7vw;
	}
}

/*section_item*/
.section_item {
	color: #5a5a5a;
	padding: 209px 0;
	background: #f1f1f1;
}
@media print, screen and (max-width : 768px){
	.section_item {
		padding: 150px 0;
	}
}

.item_tl{
	max-width: 319px;
	margin: 0 auto 115px;
}
@media print, screen and (max-width : 768px){
	.item_tl{
		max-width: 169px;
		margin: 0 auto 71px;
	}
}

.item_list{
	max-width: 980px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 50px 73px;
}
@media print, screen and (max-width : 768px){
	.item_list{
		padding: 0 20px;
		justify-content: center;
		gap: 30px 30px;
	}
}

.item_list .item_cont{
	width: 278px;
}
@media print, screen and (max-width : 768px){
	.item_list .item_cont{
		width: 224px;
	}
}

#contents_area .item_cont a{
	color: inherit;
}

.item_cont p{
	padding-left: 1rem;
	position: relative;
}

.item_cont p::before{
	content: "";
	width: 8px;
	height: 10px;
	display: block;
	background: url(../img/icon_arrow.svg) center center no-repeat;
	background-size: cover;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

/*section_sns*/
.section_sns{
	padding: 85px 0;
}
@media print, screen and (max-width : 768px){
	.section_sns{
		padding: 73px 0;
	}
}

.section_sns ul{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 80px;
}
@media print, screen and (max-width : 768px){
	.section_sns ul{
		gap: 42px;
	}
}

.section_sns ul img{
	width: auto;
	height: 42px;
}
@media print, screen and (max-width : 768px){
	.section_sns ul img{
		height: 38px;
	}
}

.section_sns ul li:nth-child(2) img{
	height: 35px;
}
@media print, screen and (max-width : 768px){
	.section_sns ul li:nth-child(2) img{
		height: 32px;
	}
}

/*----------------------------
content
----------------------------*/

/*アニメーション*/
.main_mv.obs_ani h1{
	opacity: 0;
	transition: var(--transition);
	position: relative;
	z-index: 2;
}
.main_mv.obs_ani.in h1{
	opacity: 1;
}

.section_mv.obs_ani img,
.main_mv.obs_ani .main_thum{
	transition: var(--transition);
}

.section_mv.obs_ani.in img,
.main_mv.obs_ani.in .main_thum{
	transform: scale(1.1);
}

.content .obs_ani.fade img,
.content .obs_ani.fade p{
	opacity: 0;
	transition: var(--transition);
	transform: translateY(50px);
}

.content .obs_ani.fade.in img,
.content .obs_ani.fade.in p{
	opacity: 1;
	transform: translateY(0px);
}