@charset "UTF-8";

/*================================================
 *  レースへの挑戦（race）
 ================================================*/

/*******共通*******/
section .main_box {
	max-width: 160rem;
	margin: 0 auto;
	width: 100%;
}
@media screen and (min-width: 800.1px) {
	section .main_box {
		display: grid; 
		grid-template-columns: minmax(0, 1fr) calc(50% - 20rem); 
		grid-template-rows: auto 1fr; 
		gap: 0 13rem; 
		grid-template-areas: "title bg" "txt bg"; 
	}
}


section .main_box h3 {
	grid-area: title;
	padding: 0 0 8rem 13rem;
	position: relative;
	z-index: 10;
}
section .main_box h3 > span {
	white-space: nowrap;
}

section .main_box .img_bg {
	grid-area: bg;
	width: 100%;
	margin-top: 13rem;
}
@media screen and (min-width: 800.1px) {
	section .main_box .img_bg .inr {
		width: calc(50vw - 20rem);
	}
}
section .main_box .img_bg img {
	width: 100%;
}


section .main_box .txt_box {
	grid-area: txt;
	margin-left: auto;
	width: 55rem;
}
section .main_box .txt_box p + p {
	margin-top: 1em;
}



/*******ヤリスカップへの取り組み*******/
section#intro_area {
	margin-top: 10rem;
}
section#intro_area h3 {
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	margin-bottom: 0.8em;
}

/*******ヤリスカップレースとは*******/
section#about_area {
	margin-top: 10rem;
}

section#about_area .btn_report {
	border: 1px solid var(--black);
	font-size: 2rem;
	height: 12rem;
	width: 45rem;
	margin-top: 8rem;
	padding: 0 4rem 0 5rem;
}
section#about_area .btn_report:hover {
	background-color: var(--black);
}
section#about_area .btn_report:hover em {
	color: #fff;
}
section#about_area .btn_report .arrow_circle {
	height: 5rem;
	width: 5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: currentColor;
	border: 2px solid;
	border-radius: 50%;
	transition: all 0.2s linear;
}
section#about_area .btn_report:hover .arrow_circle {
	background-color: #fff;
}
section#about_area .btn_report .arrow_circle .replace-svg {
	width: auto;
	height: 1.2rem;
}
section#about_area .btn_report:not(:hover) .arrow_circle .replace-svg path {
	fill: #fff;
}


/*******モータースポーツブランドについて*******/
section#brand_area {
	margin-top: 15rem;
}

@media screen and (min-width: 800.1px) {
	section#brand_area .main_box {
		grid-template-areas: 
		"title title"
		"logo logo"
		"txt bg";
	}
	section#brand_area .main_box .img_logo {
		grid-area: logo;
	}
	
}

section#brand_area .main_box .img_logo {
	width: 105rem;
	margin: 0 auto 8rem;
}
section#brand_area .main_box .img_bg {
	margin-top: 0!important;
}








/*================================================================================================
 *  スマートフォン向けデザイン
 ================================================================================================*/
@media screen and (max-width:800px) {


/*******共通*******/
section .main_box {
	max-width: inherit;
	padding: 0;
}

section .main_box h3 {
	padding: 0!important;
	margin-left: -3vw;
}
section .main_box h3 > span {
	font-size: 12.5vw;
}

section .main_box .img_bg {
	width: 92.5vw;
	margin: -5vw 0 0;
}


section .main_box .txt_box {
	width: 100%;
	margin: 0;
	padding: 8vw 0 0;
}




/*******ヤリスカップへの取り組み*******/
section#intro_area {
	margin-top: 13vw;
}
section#intro_area h3 {
	font-size: 5.6vw;
}



/*******ヤリスカップレースとは*******/
section#about_area {
	margin-top: 10vw;
}
section#about_area .btn_report {
	font-size: 4vw;
	height: 21vw;
	width: 78vw;
	margin: 10vw auto 0;
	padding: 0 5vw 0 5.5vw;
}
section#about_area .btn_report .arrow_circle {
	height: 10vw;
	width: 10vw;
	border-width: 1px;
}
section#about_area .btn_report .arrow_circle .replace-svg {
	height: 2.2vw;
}







/*******モータースポーツブランドについて*******/
section#brand_area {
	margin-top: 15vw;
}

section#brand_area .main_box .img_logo {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	margin: 0;
}







	
}