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

@import url(normalize.css);
@import url(../_plugin/fontawesome/css/all.min.css);
@import url(../_plugin/aos/aos.css);
@import url(common_parts.css);
@import url(common.css);


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

/* common ----------*/
.clip-r { transition: clip-path 1s cubic-bezier(0.5, 1, 0.89, 1) 0.7s; clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); }
.clip-r.inview { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%); }
.clip-l { transition: clip-path 1s cubic-bezier(0.5, 1, 0.89, 1) 0.7s; clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); }
.clip-l.inview { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%); }
.cts-title { position: relative; margin-bottom: 4rem; padding-top: 2rem; line-height: 1.4; }
.cts-title::before { position: absolute; top: 0; left: 0; right: 0; content: ""; width: 10rem; height: 0.5rem; margin: auto; background-color: #E60012; }
.cts-title span { display: block; color: #333; text-align: center; font-weight: 900; }
.cts-title .e { font-size: 4rem; }
.cts-title .j { margin-top: 1rem; font-size: 2rem; }
.bgw { position: absolute; width: 192rem; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }


/* mv ----------*/
#mv { position: relative; padding: 15rem 2rem 20rem; background-repeat: no-repeat; background-position: center; background-size: cover; }
#mv h1 { display: none; position: absolute; top: 4rem; left: 4rem; color: #FFF; font-size: 3.2rem; font-family: 'Noto Serif JP', serif; }
#mv .w { text-align: center; }
#mv .w h2 { color: #FFF; text-align: center; line-height: 1.2; font-size: 9.6rem; font-weight: 700; }
#mv .w h3 { display: inline-block; margin-top: 6rem; padding: 0.5rem 1rem; color: #FFF; background-color: #000; line-height: 1; font-size: 2.8rem; font-weight: 900; }
#mv .w h3 span { color: #E60012; }
@media screen and (max-width:480px) { /* iPhone 縦 s */
	#mv { position: relative; padding: 10rem 1rem 10rem; }
	#mv h1 { top: 2rem; left: 2rem; font-size: 2.4rem; }
	#mv .w h2 { font-size: 11vw;}
	#mv .w h3 { margin-top: 4rem; font-size: 4vw; }
}

/* main ----------*/
#main { overflow: hidden; }

/* message ----------*/
#message { padding: 7rem 0; background-color: #E60012; background-image: url(../_img/index/ms_bg.svg); background-repeat: repeat; background-position: center top; }
#message .inner { position: relative; overflow: hidden; }
#message .w0 { border: solid 2px #FFF; margin: 3.3% 2.5%; }
#message .w0 p {  padding: 4rem 2rem;  color: #FFF; text-align: center; font-size: 1.8rem; font-weight: 700; }
#message .w1 { position: absolute; top: 0; left: 0; width: 100%; }
#message .w2 { position: absolute; bottom: 0; left: 0; width: 100%; }
@media screen and (max-width:480px) { /* iPhone 縦 s */
	#message .w0 { border: solid 1px #FFF; margin: 3.3% 0; }
	#message { background-size: 400%; }
}

/* mission ----------*/
#mission { position: relative; padding: 20rem 0 12rem; }
#mission .bg1 { z-index: -1; top: 27rem; }
#mission .bg2 { z-index: -2; top: 118rem; }
#mission h3 {}
#mission h4 { margin-top: 3rem; line-height: 1.5; font-weight: 900; }
#mission h4 span { color: #E60012; }
#mission h4.j { font-size: 3.2rem; }
#mission h4.e { font-size: 3rem; }
#mission p { margin-top: 3rem; line-height: 1.6; font-size: 1.6rem; font-weight: 500; }
#mission .w { position: relative; }
#mission .w .pw { position: absolute; }
#mission .w1 {}
#mission .w1 .pw { top: 8rem; right: 0; }
#mission .w1 h3 img { margin-left: -15rem; }
#mission .w2 { margin-top: -8rem; text-align: right; }
#mission .w2 .pw { top: calc(50% - 14rem); }
#mission .w2 p { text-align: right; }
#mission .w3 {}
#mission .w3 .pw { bottom: -14rem; left: -6rem; }
#mission .w3 ul { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2em; }
#mission .w3 ul li:nth-child(2) { padding-top: 12rem; }
#mission .w3 ul li:nth-child(3) { padding-top: 24rem; }
#mission .w3 h5 { text-align: center; }
#mission .w3 h6 { text-align: center; line-height: 1.5; font-size: 3rem; font-weight: 900; }
#mission .w3 p { text-align: center; }
@media screen and (max-width:1400px) {
	#mission .w1 h3 img { margin-left: 0; }
}
@media screen and (max-width:480px) { /* iPhone 縦 s */
	#mission { position: relative; padding: 6rem 0 12rem; }
	#mission h4.j { font-size: 2.8rem; }
	#mission h4.e { font-size: 2.6rem; }
	#mission .w .pw { position: relative; margin-top: 2rem; text-align: center; top: auto !important; left: auto !important; right: auto !important; }
	#mission .w .pw img { width: 80%; }
	#mission .w h3 img { width: 70%; }
	#mission .w2 { margin-top: 3rem; }
	#mission .w3 .pw { bottom: auto; left: auto; }
	#mission .w3 ul { margin-top: 4rem; grid-template-columns: 1fr; gap: 4rem; }
	#mission .w3 ul li:nth-child(2) { padding-top: 0; }
	#mission .w3 ul li:nth-child(3) { padding-top: 0; }
	#mission .w3 h5 img { width: 50%; }
	#mission .bg2 { top: auto; bottom: 20%; }
}

/* data ----------*/
#data { position: relative; padding-bottom: 17rem; }
#data h3 {}
#data h3 span { display: inline-block; width: 16rem; margin-top: 2rem; padding-top: 1rem; border-top: dashed 2px #707070; font-size: 2rem; font-weight: 900; }
#data .w { position: relative; }
#data .w .bgw { z-index: -1; }
#data .bg1 { top: 15.5rem; }
#data .bg2 { top: 0; }
#data .bg3 { top: 0; }
#data .bg3 img { height: 51rem; }
#data .w ul { display: grid; gap: 2rem; }
#data .w ul li { text-align: center; }
#data .w ul li span { display: block; text-align: center; }
#data .w1 ul { grid-template-columns: 1fr 1fr 1fr; }
#data .w1 ul li:nth-child(1) { padding-top: 2rem; }
#data .w1 ul li:nth-child(2) { margin-top: -7rem; }
#data .w2 { margin-top: 15rem; }
#data .w2 h3 { text-align: right; }
#data .w2 ul { grid-template-columns: 1fr 1fr 1fr; }
#data .w2 ul li:nth-child(2) { margin-top: -4rem; }
#data .w2 ul li:nth-child(3) { padding-top: 2rem; }
#data .w3 { margin-top: 15rem; }
#data .w3 ul { grid-template-columns: 1fr 1fr 1fr 1fr; }
#data .w3 ul li:nth-child(1) { padding-top: 4rem; }
#data .w3 ul li:nth-child(2) { padding-top: 13rem; }
#data .w3 ul li:nth-child(3) { margin-top: -7rem; }
@media screen and (max-width:480px) { /* iPhone 縦 s */
	#data .w ul { margin-top: 2rem; grid-template-columns: 1fr 1fr; gap: 4rem !important; }
	#data .w ul li { margin: 0 !important; padding: 0 !important; }
	#data .w .bgw { width: 100vw; height: 105%; }
	#data .w .bg1 { height: calc(105% - 15.5rem); }
	#data .w .bgw img { width: 100%; height: 100%; }
	#data .w2 { margin-top: 10rem; }
	#data .w3 { margin-top: 10rem; }
	#data .w1 li:nth-child(3), #data .w2 li:nth-child(3) { grid-column: 1 / 3; }
	#data .w1 li:nth-child(3) img, #data .w2 li:nth-child(3) img { width: 50%; }
}

/* business ----------*/
#business { position: relative; padding-bottom: 24rem; }
#business .bg1 { top: 65rem; z-index: -2; }
#business .bg2 { top: 141rem;z-index: -1; }
#business .bg3 { top: 217rem;z-index: -2; }
#business .bg4 { top: 293rem;z-index: -1; }
#business .bg5 { top: 369rem; z-index: -2;}
#business .sw { max-width: 73rem; margin: auto; }
#business .t1 { text-align: center; line-height: 1.6; font-size: 1.8rem; font-weight: 700; }
#business .t1 span { color: #E60012; }
#business .w1 { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
#business .w1 li { position: relative; }
#business .w1 h4 { position: absolute; top: 0; left: 0; width: 100%; text-align: center; line-height: 1.4; font-size: 2.4rem; font-weight: 700; }
#business h3 { position: relative; margin-top: 8rem; margin-bottom: 3rem; padding-top: 1.5rem; line-height: 1.6; font-size: 2.8rem; font-weight: 900; }
#business h3 span { color: #E60012; }
#business h3::before { position: absolute; top: 0; left: 0; content: ""; width: 4rem; border-top: solid 3px #E60012; }
#business .sdgs { margin-top: 5rem; }
#business .sdgs > li { display: flex; border-top: solid 1px #333; padding: 2rem 0 5rem;  }
#business .sdgs > li .h { width: 18rem; }
#business .sdgs > li .h h4 { font-size: 2.2rem; font-weight: 900; }
#business .sdgs > li .h img { margin-top: 2rem; }
#business .sdgs > li .t { width: calc(100% - 18rem); }
#business .sdgs > li .t .c { display: flex; flex-flow: wrap; gap: 0.7rem; }
#business .sdgs > li .t .c li { background-color: #333; color: #FFF; line-height: 1; font-size: 1.6rem; font-weight: 500; padding: 0.5rem 2rem; }
#business .sdgs > li .t .s { margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 1rem; }
#business .sdgs > li .t .s li {}
#business .list-ul li {  white-space: nowrap; font-size: 1.8rem; font-weight: 700; }
#business .list-ul li span { color: #E60012; }
#business .tw { display: flex; gap: 2rem; }
#business .tw ul { width: calc(100% - 27rem); }
#business .tw .pw { width: 25rem; margin-top: -3rem; }
@media screen and (max-width:480px) { /* iPhone 縦 s */
	#business .w1 { grid-template-columns: 1fr; }
	#business .sdgs > li .h { width: 16rem; }
	#business .sdgs > li .h h4 { font-size: 2rem; }
	#business .sdgs > li .t { width: calc(100% - 16rem); }
	#business .sdgs > li .t .c li { font-size: 1.5rem; padding: 0.5rem; }
	#business .sdgs > li .t .s {  grid-template-columns: 1fr 1fr 1fr; }
	#business .tw { display: block; }
	#business .tw ul { width: 100%; }
	#business .tw .pw { width: 100%; margin-top: 0; text-align: center; }
	#business .list-ul li {  white-space: inherit; }
}

/* training_welfare ----------*/
#training_welfare { position: relative; padding-bottom: 20rem; }
#training_welfare .bg1 { top: 65rem; z-index: -2; }
#training_welfare h3 { position: relative; padding-top: 1.6rem; line-height: 1.4; }
#training_welfare h3::before { position: absolute; top: 0; left: 0; content: ""; width: 4rem; border-top: solid 3px #E60012; }
#training_welfare h3 span { display: block; }
#training_welfare h3 .j { font-size: 2.8rem; font-weight: 900; }
#training_welfare h3 .e { margin-top: 0.5rem; color: #E60012; font-size: 2.2rem; font-weight: 500; }
#training_welfare .w1 { position: relative; }
#training_welfare .w1 h4 { margin-top: 3rem; margin-bottom: 2rem; line-height: 1.6; font-size: 3.2rem; font-weight: 900; }
#training_welfare .w1 .pw { margin-top: -42rem; text-align: right; }
#training_welfare .w1 p { max-width: 70rem; }
#training_welfare .w2 { margin-top: 6rem; }
#training_welfare .w3 { display: grid; margin-top: 4rem; grid-template-columns: 1fr 1fr; gap: 3rem; }
#training_welfare .w4 { display: grid; grid-template-columns: 1fr; gap: 9rem; }
#training_welfare .w5 { padding: 3rem 2rem 2rem; background-color: #FFF; box-shadow: 3px 6px 10px 0px rgba(0, 0, 0, 0.16); }
#training_welfare .w5 h4 { text-align: center; font-size: 2.1rem; font-weight: 900; line-height: 1.6; }
#training_welfare .w5 .p { text-align: center; margin-top: 2rem; }
#training_welfare .w5 dl { margin-top: 2rem; }
#training_welfare .w5 dl dt { font-size: 1.8rem; font-weight: 700; padding: 1rem; line-height: 1.6rem; background-color: #F7E9EA; }
#training_welfare .w5 dl dd { font-size: 1.6rem; font-weight: 500; padding: 1rem; }
@media screen and (max-width:480px) { /* iPhone 縦 s */
	#training_welfare { padding-bottom: 10rem; }
	#training_welfare .w1 .pw { margin-top: 0; }
	#training_welfare .w3 { grid-template-columns: 1fr; }
	#training_welfare .w4 { gap: 3rem; }
}