@charset "utf-8";
/*--------------------------------------
	copyright : yuyu design.
--------------------------------------*/

@import url(reset.css);
@import url(common.css);
@import url(../libs/fontawesome/css/all.min.css);
@import url(../libs/aos/aos.css);


/*
 index
==============================*/


/* common ----------*/
.in { max-width: 102.4rem; margin: 0 auto; }
.page_links { background: linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.00) 48.56%); }
.page_link { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.page_link li { display: flex; border-radius: 0.5rem; overflow: hidden; }
.page_link li a { display: grid; text-align: center; flex-direction: column; width: 100%; padding: 0rem 1rem 1.5rem; color: #FFF; background-repeat: no-repeat; background-position: center; background-size: cover; text-decoration: none; text-align: center; grid-template-columns: 1fr; gap: 3rem; }
.page_link li a::before { content: ""; width: 0; height: 4rem; border: solid 0.5px #FFF; margin: auto; }
.page_link li a::after { height: 3rem; content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M16.0833%201C16.0833%200.585786%2015.7475%200.25%2015.3333%200.25C14.919%200.25%2014.5833%200.585786%2014.5833%201L15.3333%201L16.0833%201ZM14.8029%2022.5303C15.0958%2022.8232%2015.5707%2022.8232%2015.8636%2022.5303L20.6366%2017.7574C20.9294%2017.4645%2020.9294%2016.9896%2020.6366%2016.6967C20.3437%2016.4038%2019.8688%2016.4038%2019.5759%2016.6967L15.3333%2020.9393L11.0906%2016.6967C10.7977%2016.4038%2010.3228%2016.4038%2010.03%2016.6967C9.73706%2016.9896%209.73706%2017.4645%2010.03%2017.7574L14.8029%2022.5303ZM15.3333%201L14.5833%201L14.5833%2022L15.3333%2022L16.0833%2022L16.0833%201L15.3333%201Z%22%20fill%3D%22white%22/%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2214.5%22%20stroke%3D%22white%22/%3E%3C/svg%3E"); }
.page_link li .p { display: inline-flex; gap: 1rem; align-items: center; justify-content: center; }
.page_link li .p .t { border-bottom: solid 1px #FFF; font-size: 1.4rem; }
.page_link li .p .n { font-family: "Outfit", sans-serif; font-weight: 300; font-size: 4rem; line-height: 1; }
.page_link li h3 { font-size: 2.8rem; }
.point .w { display: flex; gap: 8rem; align-items: center; }
.point:nth-child(even) .w {  flex-direction: row-reverse; }
.point .w .pw { width: 47%; position: relative; }
.point .w .pw img { min-width: 68rem; width: 100%; position: absolute; top: 0; bottom: 0; margin: auto; right: 0; transition: all 0.6s ease-out; }
.point.aos-animate .w .pw img {}
.point:nth-child(even) .w .pw img { left: 0; right: auto; }
.point.aos-animate:nth-child(even) .w .pw img {}
.point .w .tw { width: 53%; padding: 0 0 6rem 6rem; border-left: solid 1px #004A70;  border-bottom: solid 1px #004A70; border-radius: 0 0 0 0.5rem; }
.point .p { position: relative; display: inline-flex; padding-bottom: 2rem; color: #FFF; gap: 1rem; align-items: center; justify-content: center; }
.point .p::after { content: ""; position: absolute; z-index: -1; bottom: 0; display: block; width: 20rem; height: 18rem; }
.point .p .t { border-bottom: solid 1px #FFF; font-size: 1.6rem; }
.point .p .n { font-family: "Outfit", sans-serif; font-weight: 300; font-size: 4rem; line-height: 1; }
.point h3 { display: inline-block; border-bottom: solid 1px #004A70; padding-bottom: 1rem; color: #004A70; font-size: 2rem; font-family: "Outfit", sans-serif; font-weight: 600; text-transform: uppercase; line-height: 1; }
.point:nth-child(even) h3 {}
.point h2 { font-size: 4rem; line-height: 1.4; margin-top: 2rem; margin-bottom: 4rem; }
.point .red { color: #BB2415; }
@media screen and (max-width:1440px) {
	.point .w .pw img { min-width: 50vw; }
}
@media screen and (max-width:959px) {
	.page_link { margin-top: 4rem; grid-template-columns: 1fr; gap: 1rem; }
	.page_link li a { padding: 2rem 0.5rem 1rem; gap: 2rem; }
	.page_link li a::after { scale: 0.6; height: 4.5rem; }
	.page_link li .p .t { font-size: 1.8rem; }
	.page_link li .p .n { font-size: 4.5rem; }
	.page_link li h3 { font-size: 3.8rem; }
	.point .w { display: block; }
	.point .w .pw { width: 100%; height: 70vw; }
	.point .w .pw img { min-width: auto; width: 100%; left: 0; right: auto; }
	.point .w .tw { width: 100%; margin-top: 4rem; padding: 0 0 3rem 3rem; }
	.point .w .tw p { font-size: 2.15rem; }
	.point h3 { font-size: 2rem; }	
	.point h2 { font-size: 3.8rem; }
}


/* mv ----------*/
#mv {}
#mv .cap { text-align: right; padding: 1rem; font-size: 1.4rem; }


/* cause ----------*/
#cause {}
#cause h2 { margin-top: 4rem; margin-bottom: 4rem; line-height: 1.3; }
#cause h2 .w { display: inline; padding: 0.1em 0.2em; color: #FFF; background-color: #333; background: #231815; font-size: 4rem; font-weight: bold; line-height: 2; box-decoration-break: clone; vertical-align: baseline; -webkit-box-decoration-break: clone; }
#cause h2 span .logo { display: inline-block; width: 19rem; height: 3.2rem; line-height: 1.3; }
#cause h2 span svg { width: auto; height: inherit; vertical-align: baseline; fill: #000; }
#cause p { line-height: 2.4; }
@media screen and (max-width:959px) {
	#cause h2 .w { font-size: 3.4rem; }
	#cause p { line-height: 1.8; font-size: 2.15rem; }
}


/* eye_catch ----------*/
#eye_catch { background-image: url(../img/index/eye_catch_img_01.webp); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; height: 40rem; }
@media screen and (max-width:480px) { /* s */
	#eye_catch { background-attachment: scroll; height: 30rem; }
}

/* lightBody ----------*/
#lightBody { color: #FFF; background-repeat: no-repeat; background-position: center 40%; background-size: cover; }
#lightBody h2 { font-size: 5rem; line-height: 1.6; margin-bottom: 4rem; }
#lightBody .more { position: absolute; display: inline-flex; gap: 0.5rem; align-items: center; border: solid 1px rgba(255,255,255,0.5); font-size: 1.6rem; border-radius: 5rem; line-height: 1; padding: 0.5rem 1.5rem 0.7rem 2rem; transition: all 0.3s ease-out; }
#lightBody .more:hover { cursor: pointer; }
#lightBody .more::after { content: ""; display: inline-block; width: 1rem; height: 0; border-bottom: solid 1px #FFF; transition: all 0.3s ease-out; }
#lightBody .more:hover::after { width: 2rem; }
#lightBody .more.open { opacity: 0; visibility: hidden; }
#lightBody .ww { max-width: 63rem; }
#lightBody .w p { margin-top: 0; margin-bottom: 1em; }
@media screen and (max-width:959px) {
	#lightBody { background-position: 25% 40%; }
	#lightBody h2 { font-size: 3.2rem; }
	#lightBody .ww { max-width: 65vw; }
	#lightBody .w p { font-size: 2.15rem; }
}

/* points ----------*/
#points, #points2 { overflow: hidden; }


/* moreContents ----------*/
#moreContents { padding-bottom: 31.25vw !important;
	background-color: #000;
	background-image: url(../img/index/bg_02.webp), url(../img/index/bg_03.webp);
	background-repeat: no-repeat;
	background-position: center top -2px, center bottom -2px;
	background-size: 100% auto;
}
#moreContents h2 { margin-bottom: 8rem; color: #FFF; text-align: center; line-height: 1.3; }
#moreContents h2 .w { display: inline-block; font-size: 5rem; font-weight: bold; vertical-align: baseline; }
#moreContents h2 span .logo { display: inline-block; width: 25rem; height: 4.2rem; line-height: 1.3; }
#moreContents h2 span svg { width: auto; height: inherit; vertical-align: baseline; fill: #FFF; }
#moreContents h3 { text-align: center; margin-top: 8rem; }
#moreContents h3 span { font-size: 3rem; line-height: 1.4; display: inline-block; color: #FFF; border-bottom: solid 1px #FFF; padding-bottom: 1rem; margin-bottom: 4rem; }
#moreContents p { color: #FFF; }
#moreContents .bt a { display: flex; gap: 1rem; align-items: center; justify-content: center; padding: 1rem; border-radius: 0.5rem; color: #FFF; background-color: #333333; text-decoration: none; text-align: center; font-size: 1.6rem; }
#moreContents .bt a::after { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.5 1.27051C3.5 0.718223 3.94772 0.270508 4.5 0.270508L12.5 0.270508C13.0523 0.270508 13.5 0.718223 13.5 1.27051V7.27051C13.5 7.82279 13.0523 8.27051 12.5 8.27051H4.5C3.94772 8.27051 3.5 7.82279 3.5 7.27051V1.27051ZM4.5 1.27051L12.5 1.27051V7.27051H4.5V1.27051Z' fill='white'/%3E%3Cpath d='M1.5 3.27051H2.5V4.27051H1.5V10.2705H9.5V9.27051H10.5V10.2705C10.5 10.8228 10.0523 11.2705 9.5 11.2705H1.5C0.947716 11.2705 0.5 10.8228 0.5 10.2705L0.5 4.27051C0.5 3.71822 0.947715 3.27051 1.5 3.27051Z' fill='white'/%3E%3C/svg%3E"); }
#moreContents .campaign { padding: 6rem; background-color: #FFF; border-radius: 1rem; margin-top: 8rem; }
#moreContents .campaign h3 { margin-top: 0; }
#moreContents .campaign h3 span { color: #333; border-color: #333; }
#moreContents .campaign p { color: #333; }
#moreContents .campaign p img { border-radius: 0.5rem; }
#moreContents .campaign .btw { margin-top: 4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
#moreContents .campaign .btw .bt a { background-color: #004A70; }
#moreContents .contents_list {}
#moreContents .contents_list li { padding: 2rem; border-radius: 1rem; background-color: #FFF; }
#moreContents .contents_list li span { display: block; line-height: 1.4; }
#moreContents .contents_list li .pw {}
#moreContents .contents_list li .pw img { border-radius: 0.5rem; }
#moreContents .contents_list li .tw {}
#moreContents .contents_list li .tw .h { margin-top: 2rem; font-size: 1.8rem; font-weight: bold; }
#moreContents .contents_list li .tw .r { margin-top: 1rem; color: #867664; font-size: 1.4rem; text-align: right; }
#moreContents .contents_list li .tw .bt { margin-top: 2rem; }
@media screen and (max-width:959px) {
	#moreContents { padding-bottom: 80vw !important; background-image: url(../img/index/bg_02_sp.webp), url(../img/index/bg_03_sp.webp); }
	#moreContents h2 { margin-bottom: 4rem; }
	#moreContents h2 .w { font-size: 3.5rem; }
	#moreContents h2 span .logo { width: 17rem; height: 2.8rem; }
	#moreContents .bt a { font-size: 2.15rem; }
	#moreContents .campaign { padding: 8vw; margin-top: 4rem; }
	#moreContents .campaign .btw { grid-template-columns: 1fr; gap: 2rem; }
	#moreContents .contents_list li .tw .h { font-size: 2.15rem; }
}


/* floatNav ----------*/
#floatNav { position: fixed; z-index: 100; text-align: center; bottom: -8rem; left: 0; width: 100%; height: 8rem; transition: all 0.3s ease-out; }
.show_pageup #floatNav { bottom: 1rem; }
#floatNav ul {}
#floatNav ul li {}
#floatNav ul li a { box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.25); display: inline-block; height: 8rem; width: 100%; border-radius: 10rem; max-width: 40rem; color: #FFF; background-color: #FF9D00; font-size: 2rem; font-weight: 500; text-decoration: none; text-align: center; line-height: 8rem; }
#floatNav ul li a:hover { opacity: 1; background-color: #FFC300; }
#floatNav ul li a::after { content: ""; margin-left: 1rem; display: inline-block; width: 1.6rem; height: 1.6rem; background: url(../img/common/ico_zoom_g.svg) no-repeat top / 100%; }
@media screen and (max-width:959px) {
	#floatNav ul li a { font-size: 2.2rem; }
	#floatNav ul li a::after { width: 1.6rem; height: 1.6rem; }
}

/* modal_wrap ----------*/
.modal_wrap { position: fixed; opacity: 0; visibility: hidden; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background-color: #004A70; transition: all 0.3s ease-out; }
.modal_wrap.open { opacity: 1; visibility: visible; }
.modal_wrap .modal_close { position: absolute; z-index: 1001; top: 4rem; right: 4rem; display: block; width: 3rem; height: 3rem; cursor: pointer; }
.modal_wrap .modal_close::before, .modal_wrap .modal_close::after { content: ""; position: absolute; top: 0; right: 1.5rem; width: 1px; height: 3rem; background-color: #fff; }
.modal_wrap .modal_close::before { transform: rotate(45deg); }
.modal_wrap .modal_close::after { transform: rotate(-45deg); }
.modal_wrap .modal_cont { height: 100vh; display: flex; }
.modal_wrap .modal_cont .img { width: 50%; background-repeat: no-repeat; background-position: center; background-size: cover; }
.modal_wrap .modal_cont .nav { display: grid; width: 50%; place-items: center; }
.modal_wrap .nav__ttl { margin-bottom: 4rem; color: #FFF; font-weight: 600; font-size: 3.2rem; text-align: center; }
.modal_wrap .modal_cont .nav .list { display: flex; flex-direction: column; gap: 3rem; }
.modal_wrap .modal_cont .nav .list a { display: flex; width: 32rem; height: 6.4rem; border-radius: 100px; color: #004A70; background: #DAE3E9; font-weight: 500; font-size: 1.6rem; text-decoration: none; justify-content: center; align-items: center; }
.modal_wrap .modal_cont .nav .list a:after { content: ""; position: relative; bottom: 1px; right: -8px; display: inline-block; width: 12px; height: 12px; background: url(../img/common/ico_blank.svg) no-repeat top center / 100%; }
@media screen and (max-width:959px) {
	.modal_wrap { overflow-y: auto; }
	.modal_wrap .modal_close { top: 2rem; right: 2rem; width: 4rem; height: 4rem; }
	.modal_wrap .modal_close::before, .modal_wrap .modal_close::after { width: 3px; height: 5rem; }
	.modal_wrap .modal_cont { height: auto; flex-direction: column; }
	.modal_wrap .modal_cont .img { width: 100%; aspect-ratio: 1 / 0.7; }
	.modal_wrap .modal_cont .nav { width: 100%; padding: 10vw 0; }
	.modal_wrap .modal_cont .nav .list a { width: 38rem; height: 8rem; font-size: 2rem; }
}