@charset "utf-8";


@media print,
screen and (min-width : 769px) {

	/* ------------------------------------------------------------------------------------------
*
*
    /300million/
    Responsive / PC
*
*
------------------------------------------------------------------------------------------ */
	
	#contents_area {
		background: #e5ecf5;
		color: #595757;
		font-family: "HondaGlobalFontJP-Regular", sans-serif;
		font-weight: normal;
	}

	#contents_area img {
		width: 100%;
		vertical-align: middle;
	}

	.content_wrap {
		max-width: 1080px;
		width: 100%;
		margin: 0 auto;
		background: #fff;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	}

	.content_wrap .c-head2 {
		font-size: 28px;
		font-family: "HondaGlobalFontJP-Bold", sans-serif;
		line-height: 1.75;
		letter-spacing: 0.01em;
		text-align: center;
		padding-bottom: 30px;
		position: relative;
	}

	.content_wrap .c-head2::after {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		content: '';
		width: 40px;
		height: 4px;
		background: #8398bd;
	}

	/* section-message */
	.section-message {
		margin-bottom: 90px;
	}

	.section-message__topImage {
		width: 100%;
		aspect-ratio: 1080 / 565;
		position: relative;
		margin-bottom: 195px;
	}

	.section-message__topImage .image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.section-message__topImage .logo {
		position: absolute;
		left: 50%;
		bottom: -170px;
		transform: translateX(-50%);
		width: 225px;
		z-index: 1;
	}

	.section-message h2 {
		font-size: 28px;
		font-family: "HondaGlobalFontJP-Bold", sans-serif;
		line-height: 1.75;
		text-align: center;
		margin-bottom: 30px;
	}

	.section-message__text {
		width: fit-content;
		margin: 0 auto 65px;
	}

	.section-message__text p {
		font-size: 18px;
		line-height: 2.16;
		text-align: center;
	}

	.section-message__text p+p {
		margin-top: 2.2em;
	}

	.section-message__banner {
		width: 585px;
		margin: 0 auto;
	}

	.section-message__btmImage {
		width: 100%;
	}

	/* graph */
	.graph {
		position: relative;
		width: 960px;
		height: 600px;
		margin: -60px auto 0;
		overflow: hidden;
		/*background: #fff;*/
	}


	/* section-history */
	.section-history {
		margin-bottom: 115px;
	}

	.section-history .c-head2 {
		margin-bottom: 40px;
	}

	.section-history__contents {
		max-width: 830px;
		margin: 0 70px 0 auto;
	}

	.section-history__item {
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 25px;
	}

	.section-history__item._02,
	.section-history__item._04,
	.section-history__item._06 {
		flex-direction: row-reverse;
	}

	.section-history__item._01 .text,
	.section-history__item._03 .text,
	.section-history__item._05 .text {
		width: 340px;
		margin: 0 40px 0 25px;
	}

	.section-history__item._01 .image,
	.section-history__item._03 .image,
	.section-history__item._05 .image {
		width: 425px;
	}

	.section-history__item._02 .text,
	.section-history__item._04 .text,
	.section-history__item._06 .text {
		width: 325px;
		margin: 0 0 0 35px;
	}

	.section-history__item._02 .image,
	.section-history__item._04 .image,
	.section-history__item._06 .image {
		width: 470px;
	}

	.section-history__item._03 .text {
		padding-bottom: 30px;
	}

	.section-history__item .text h3 {
		font-size: 46.5px;
		font-family: "HondaGlobalFontJP-Light", sans-serif;
		font-weight: normal;
		line-height: 1.7;
		letter-spacing: 0.01em;
		margin: 0;
	}

	.section-history__item .text h4 {
		font-size: 18px;
		line-height: 1.5;
		letter-spacing: 0.01em;
		margin: 0 0 15px 0;
	}

	.section-history__item .text p {
		font-size: 12px;
		font-family: "HondaGlobalFontJP-Light", sans-serif;
		line-height: 2;
		letter-spacing: 0.05em;
		padding-right: 1.5em;
	}
	.section-history__item._01 .image{
		margin-top: 20px;
	}
	.section-history__item._02 .text{
		padding-top: 10px;
	}
	.section-history__item._04{
		padding-top: 45px;
	}
	.section-history__item._05{
		padding-top: 48px;
	}
	.section-history__item._06{
		padding-top: 45px;
	}

	/* section-value */
	.section-value .c-head2 {
		margin-bottom: 85px;
	}

	.section-value__image {
		max-width: 918px;
		margin: 0 auto 100px;
	}
	.section-value__image .caution{
		margin-top: 10px;
		font-family: "HondaGlobalFontJP-Light", sans-serif;
		font-size: 12px;
	}

	.section-value__item {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 25px;
		margin: 0 auto;
	}

	.section-value__item+.section-value__item {
		margin-top: 40px;
	}

	.section-value__item._01 .text,
	.section-value__item._03 .text,
	.section-value__item._05 .text{
		margin-left: 40px;
		width: 380px;
	}
	.section-value__item._02 .text,
	.section-value__item._04 .text,
	.section-value__item._06 .text{
		width: 350px;
		margin: 30px 0 0 auto;
	}

	.section-value__item .image {
		width: 580px;
	}
	.section-value__item:nth-child(even) {
		flex-direction: row-reverse;
		justify-content: flex-end;
	}


	.section-value__item h3 {
		margin-bottom: 55px;
	}

	.section-value__item h3 span {
		display: inline-block;
		font-family: "HondaGlobalFontJP-Light", sans-serif;
		font-size: 19px;
		font-weight: normal;
		letter-spacing: 0.14em;
		padding-bottom: 0.4em;
		border-bottom: #8398bd solid 1px;
	}

	.section-value__item h4 {
		font-size: 28px;
		font-weight: normal;
		letter-spacing: 0.01em;
		line-height: 1.5;
		margin-bottom: 24px;
	}

	.section-value__item .text p {
		font-size: 18px;
		line-height: 1.72;
		letter-spacing: 0.01em;
		margin-bottom: 30px;
	}

	.c-btn-more {
		display: block;
		width: 178px;
		height: 38px;
		line-height: 38px;
		color: #fff;
		font-size: 13px;
		letter-spacing: 0.05em;
		text-align: center;
		padding-right: 1em;
		text-decoration: none;
		background: #041b42;
		border-radius: 50px;
		position: relative;
		margin: 0 auto;
		transition: 0.3s;
	}

	.c-btn-more::after {
		position: absolute;
		top: 45%;
		right: 18px;
		content: '';
		width: 10px;
		height: 10px;
		border-top: #a9b1be solid 1px;
		border-right: #a9b1be solid 1px;
		transform: rotate(45deg) translateY(-50%);
	}

	.c-btn-more:hover {
		opacity: 0.7;
	}

	.section-value__item._01 .text .c-btn-more,
	.section-value__item._03 .text .c-btn-more,
	.section-value__item._05 .text .c-btn-more {
		margin: 0 auto 0 5px;
	}
	
	.section-value__item._02 .text .c-btn-more,
	.section-value__item._04 .text .c-btn-more,
	.section-value__item._06 .text .c-btn-more {
		margin: 0 auto 0 0;
	}
	.section-value__item._03{
		margin-top: 60px;
	}
	.section-value__item._03 .text{
		margin-top: 25px;
	}
	
	.section-value__item._04{
		margin-top: 50px;
	}
	.section-value__item._04 .text{
		margin-top: 20px;
	}
	
	.section-value__item._05{
		margin-top: 60px;
	}
	
	.section-value__item._05 .text{
		margin-top: 25px;
	}
	
	
	.section-value__item._06{
		margin-top: 60px;
	}
	
	.section-value__item._06 .text{
		margin-top: 20px;
	}

	.section-value__item._lineup {
		margin-top: 90px;
		display: block;
	}

	.section-value__item._lineup h3,
	.section-value__item._lineup h4,
	.section-value__item._lineup p {
		text-align: center;
	}
	.section-value__item._lineup h3 {
		margin-bottom: 35px;
	}
	.section-value__item._lineup p{
		margin-bottom: 70px;
	}

	.section-value__item._lineup .text {
		width: 100%;
	}

	.section-value__item._lineup .row {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.section-value__item._lineup .row+.row {
		margin-top: 50px;
	}

	.section-value__item._lineup .row .pic {
		width: 715px;
	}

	.section-value__item._lineup .row .detail {
		width: 320px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
	}

	.section-value__item._lineup .row._01 .logo {
		padding-top: 25px;
		width: 192px;
		margin-bottom: 28px;
	}

	.section-value__item._lineup .row._02 .logo {
		width: 192px;
		margin-bottom: 5px;
	}

	.section-value__item._lineup .row._03 .logo {
		padding-top: 10px;
		width: 192px;
		margin-bottom: 43px;
	}

	.section-value__item._lineup .row._04 .logo {
		padding-top: 30px;
		width: 292px;
		margin-bottom: 10px;
	}

	.section-value__item._lineup .row._04 .model {
		text-align: center;
		font-size: 25px;
		letter-spacing: 0.06em;
		margin-top: 0;
		margin-bottom: 40px;
	}



	/* section-bottom */
	.section-bottom {
		width: 100%;
		padding: 130px 0 120px;
	}

	.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: 280px;
		color: #444B49;
		font-size: 18px;
		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: -30px;
		transform: translateY(-50%);
		content: '';
		width: 26px;
		height: 44px;
		background: url(../image/btm_bg_01.png) no-repeat;
		background-size: contain;
	}

	.section-bottom .title::after {
		position: absolute;
		top: 50%;
		right: -30px;
		transform: translateY(-50%);
		content: '';
		width: 26px;
		height: 44px;
		background: url(../image/btm_bg_02.png) no-repeat;
		background-size: contain;
	}

	.section-bottom .image {
		width: 220px;
		margin: 0 auto 80px;
	}

	.section-bottom .button_box {
		width: 460px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 40px;
	}

	.section-bottom .c-btn-more {
		width: 220px;
		height: 48px;
		line-height: 48px;
		font-size: 17px;
		letter-spacing: 0;
	}



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



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


	.section-bottom {
		margin-top: 15.385vw;
	}

	.section-bottom .inner {
		max-width: 100%;
	}
}


.add-animation {
	animation: zoomUp 10s linear 0s normal both;
	transform-origin: center center;
}


.bounce-in {
	opacity: 0;
}

.bounce-in.is-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);
	}
}



.graph img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: contain;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.1s ease;
	/* 通常は0.1秒 */
}

.graph img.show {
	opacity: 1;
}

/* フェード無効 */
.graph img.no-fade {
	transition: none;
}

/* 36の最初だけゆっくりフェード */
.graph img.fade-slow {
	transition: opacity 0.5s ease;
}


/* fadeIn */
.js-fade_in {
	opacity: 0;
	transition-duration: 1000ms;
	transition-property: opacity, transform;
}

.js-fade_in_up {
	opacity: 0;
	transform: translate(0, 30px);
	transition-duration: 1000ms;
	transition-property: opacity, transform;
}

.js-fade_in.is-active,
.js-fade_in_up.is-active {
	opacity: 1;
	transform: translate(0, 0);
}