@charset "utf-8";
/* CSS Document */
.contentsBoxInner{max-width: 1420px; width: 100%; margin: auto; padding: 80px 0;}
h3.ttl-h3{font-size: 48px; text-align: center; color: #dd470c; border-bottom: solid 2px; width: 200px; margin: 0 auto 1em;}
p{font-size: 20px;}
.blueBox{background: rgba(197, 220, 232, 0.3);}
.blueBox .ttl-h3{color: #009696;}
.ttl-h4{font-size: 57px; text-align: center; line-height: 1.3;}

/*main*/
#mainView{background: url(../images/fv_bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; position: relative;}
#mainView .logo{position: absolute; top: 2%; left: 2%; width: 365px; height: auto;}
#mainView .ttl{width: 90%; max-width: 1000px; height: auto; margin: 0 auto; padding: 7% 0;}

/*dna*/
#dna .dnaBox{max-width: 1200px; width: 100%; margin: 0 auto;}
#dna .dnaBox .flexBox{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
#dna .dnaBox .flexBox .img{width: 37%; margin-right: 0.5em; box-shadow: 0px 0px 10px 1px rgba(29, 53, 34, 0.8);}
#dna .dnaBox .flexBox .txtBox{width: 58%;}
#dna .dnaBox .flexBox .txtBox .moreLink a{display: block; color: #dd470c; border: 2px solid #dd470c; text-align: center; border-radius: 50vw; width: 370px; padding: 2px 25px; font-weight: 500; margin-top: 15px;}
#dna .dnaBox .flexBox .txtBox .moreLink a:hover{text-decoration: none; opacity: 0.5;}
#dna .dnaBox .btnBox{margin: 3em 0 0;}
#dna .dnaBox .btnBox a:hover{opacity: 0.5;}

/*recruit*/
#recruit{background: url("../images/bg_img01a.png"); background-size: cover; background-position: center; background-attachment: fixed;}
#recruit .recruitBox{background: #fbe0d5; padding: 100px 0; position: relative;}
#recruit .recruitBox::before{content: ""; position: absolute; top: 20px; left: 20px; width: 90%; height: 1200px; background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0)) top left / 100% 3px no-repeat, linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0)) top left / 3px 100% no-repeat; pointer-events: none;}
#recruit .recruitBox::after{content: ""; position: absolute; right: 20px; bottom: 20px; width: 90%; height: 1200px; background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0)) bottom right / 100% 3px no-repeat, linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0)) bottom right / 3px 100% no-repeat; pointer-events: none;}

#recruit .recruitBox .ttl-h3{width: 455px; margin: 0 auto 1em; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%); font-size: 40px; border-bottom: none;}
#recruit .recruitBox .imgBox{margin: 3em auto;}
#recruit .recruitBox .whiteBox{max-width: 1240px; width: 90%; margin: 0 auto; margin-top: 3em;background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%); padding: 3em 0 4.5em;}
#recruit .recruitBox .naibulink a{display: block; color: #dd470c; border: 2px solid #dd470c; text-align: center; border-radius: 50vw; width: 450px; padding: 5px 25px 10px; font-size: 26px; font-weight: 500; margin: 1em auto 0; position: relative;}
#recruit .recruitBox .naibulink a:hover{text-decoration: none; opacity: 0.5;}
#recruit .recruitBox .naibulink a::before{position: absolute;  content: ''; width: 25px; height: 25px; bottom: -35px; right: 0; left: 0; border-top: 3px solid #dd470c; border-right: 3px solid #dd470c; transform: rotate(135deg); margin: auto;}
#recruit .btnBox{margin: 3em 0 0;}

/*内部リンク*/
#dnaSec .LinkBox{padding: 5em 0;}
#dnaSec .LinkBoxttl{background: #f1f1f1; font-size: 37px; color: #dd470c; text-align: center; font-weight: bold; max-width: 1170px; margin: 0 auto 1em;}
#dnaSec .LinkBoxflex{display: flex;flex-wrap: wrap;justify-content: center;align-items: center;margin: 1em;}
#dnaSec .LinkBox a{border-right: 1px dashed #b9b9b9;padding: 0 1em 1em;position: relative; font-size: 40px; line-height: 1.2;color: #b9b9b9;font-weight: bold; text-align: center; display: inline-block;}
#dnaSec .LinkBox p:last-of-type a{border-right: none;}
#dnaSec .LinkBox a::before{ position: absolute;content: ''; width: 25px;height: 25px; bottom: 0;right: 0;left: 0;border-top: 3px solid #b9b9b9;  border-right: 3px solid #b9b9b9; transform: rotate(135deg);margin: auto;}
#dnaSec .LinkBox a:hover{color:#dd470c;text-decoration: none;}
#dnaSec .LinkBox a:hover::before{border-top: 3px solid #dd470c;  border-right: 3px solid #dd470c;}

/*point_one*/
#point_one{background: url("../images/bg_img02a.png"); background-size: cover; background-position: center; background-attachment: fixed;}
#point_one .contentsBoxInner{max-width: 1170px;}
#point_one .ttl-h4 .en{font-size: 36px;}
#point_one .ttl-h4 .small{font-size: 46px;}
#point_one .orangekakko{background: linear-gradient(#dd470c, #dd470c) left top / 20px 6px no-repeat, linear-gradient(#dd470c, #dd470c) left center / 6px 100% no-repeat, linear-gradient(#dd470c, #dd470c) left bottom / 20px 6px no-repeat, linear-gradient(#dd470c, #dd470c) right top / 20px 6px no-repeat, linear-gradient(#dd470c, #dd470c) right center / 6px 100% no-repeat, linear-gradient(#dd470c, #dd470c) right bottom / 20px 6px no-repeat; text-align: center; max-width: 940px; width:100%; margin: 1em auto 2em;}
#point_one .ttl{text-align: center; color: #dd470c; font-size: 35px; font-weight: bold;}
#point_one .ttl .small{font-size: 23px;}
#point_one .whiteBox{background: #fff; border: solid #f1ddd6 6px; border-radius: 20px; position: relative; margin: 1.5em auto 3em; padding: 5em 0 3em;}
#point_one .whiteBox .orangettl{position: absolute; left: 50%; transform: translateX(-50%); top: -10%;}
#point_one .whiteBox .flexBox{display: flex; justify-content: center; gap: 3em;}
#point_one .whiteBox .leftBox{border-left: solid #dd470c 8px;}
#point_one .whiteBox .rightBox{border-left: solid #dd470c 8px;}
#point_one .whiteBox .innerttl{padding: 5px 70px 5px 40px; background: #f1ddd6; clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%); margin: 0; display: inline-block;}
#point_one .whiteBox .innertxt{margin: 1em 0em 1em 2em;}

/*point_two*/
#point_two .contentsBoxInner{max-width: 1170px;}
#point_two .bluekakko{background: linear-gradient(#009696, #009696) left top / 20px 6px no-repeat, linear-gradient(#009696, #009696) left center / 6px 100% no-repeat, linear-gradient(#009696, #009696) left bottom / 20px 6px no-repeat, linear-gradient(#009696, #009696) right top / 20px 6px no-repeat, linear-gradient(#009696, #009696) right center / 6px 100% no-repeat, linear-gradient(#009696, #009696) right bottom / 20px 6px no-repeat; text-align: center; max-width: 800px; width:100%; margin: 1em auto 2em;}
#point_two .whiteBox{background: #fff; border: solid #c5dce8 6px; border-radius: 20px; position: relative; margin: 5em auto 3em; padding: 3em 3em 2em;}
#point_two .whiteBox .bluettl{position: absolute; left: 50%; transform: translateX(-50%); top: -10%;}
#point_two .whiteBox .flexBox{display: flex; align-items: center; gap: 2em; padding: 1em 0;}
#point_two .whiteBox .flexBox .leftBox{background: #c5dce8; padding: 15px 50px 15px 30px; clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 50%, calc(100% - 25px) 100%, 0 100%);}
#point_two .whiteBox .topBox{border-bottom: #c5dce8 2px dotted;}

/*point_three*/
#point_three{background: url("../images/bg_img03a.png"); background-size: cover; background-position: center; background-attachment: fixed;}
#point_three .contentsBoxInner{max-width: 1170px;}
#point_three .orangekakko{background: linear-gradient(#dd470c, #dd470c) left top / 20px 6px no-repeat, linear-gradient(#dd470c, #dd470c) left center / 6px 100% no-repeat, linear-gradient(#dd470c, #dd470c) left bottom / 20px 6px no-repeat, linear-gradient(#dd470c, #dd470c) right top / 20px 6px no-repeat, linear-gradient(#dd470c, #dd470c) right center / 6px 100% no-repeat, linear-gradient(#dd470c, #dd470c) right bottom / 20px 6px no-repeat; text-align: center; max-width: 870px; width:100%; margin: 1em auto 2em;}
#point_three .ttl{color: #dd470c; font-size: 35px; text-align: center; font-weight: bold; margin: 2em auto 0.5em;}
#point_three .ttl::before{content: ""; background: url("../images/point_three_left.png"); background-repeat: no-repeat; background-size: cover; display: inline-block; width: 55px; height: 37px; vertical-align: sub; margin-right: 0.5em;}
#point_three .ttl::after{content: ""; background: url("../images/point_three_right.png"); background-repeat: no-repeat; background-size: cover; display: inline-block; width: 55px; height: 37px; vertical-align: sub; margin-left: 0.5em;}
#point_three .orangeBox{background: #f5e2db; padding: 2em; margin-bottom: 2em; position: relative;}
#point_three .orangeBox::before{content: ""; position: absolute; top: 20px; right: 20px; width: 55px; height: 55px; background: #e84a00; clip-path: polygon(100% 0, 100% 100%, 0 0);}
#point_three .orangeBox .subttl.white{font-size: 23px; font-weight: bold; text-align: center; background: #fff; width: 275px; margin: 0 auto; border-radius: 50vw; margin-bottom: 1em;}
#point_three .orangeBox .dantai{text-align: center;}
#point_three .orangeBox .more{text-align: right; font-size: 15px;}
#point_three .orangeBox .subttl.orange{font-size: 30px; text-align: center; color: #dd470c; font-weight: bold; line-height: 1.5; margin-bottom: 1em;}
#point_three .orangeBox .playerBox{display: flex; justify-content: center; gap: 3em;}

/*#point_four*/
#point_four .contentsBoxInner{max-width: 1170px;}
#point_four .bluekakko{background: linear-gradient(#009696, #009696) left top / 20px 6px no-repeat, linear-gradient(#009696, #009696) left center / 6px 100% no-repeat, linear-gradient(#009696, #009696) left bottom / 20px 6px no-repeat, linear-gradient(#009696, #009696) right top / 20px 6px no-repeat, linear-gradient(#009696, #009696) right center / 6px 100% no-repeat, linear-gradient(#009696, #009696) right bottom / 20px 6px no-repeat; text-align: center; max-width: 760px; width:100%; margin: 1em auto 2em;}
#point_four .proBox{margin: 3em auto 1.5em;}

/*#boshu*/
#boshu{background: #f5e2db; margin-top: 8em;}
#boshu .contentsBoxInner{max-width: 1100px; position: relative;}
#boshu h3.ttl-h3{max-width: 795px; width: 100%; border: none; background: #dd470c; color: #fff; clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); position: absolute; left: 50%; transform: translateX(-50%); top: -3%;}
#boshu .listBox li{display: flex; align-items: center; gap: 2em; border-bottom: #fff 2px dotted; padding: 1em 0 1em 10em;}
#boshu .listBox li:last-child{border-bottom: none;}
#boshu .listBox li .leftBox{font-size: 27px; background: #fff; width: 110px; text-align: center; border-radius: 50vw;}
#boshu .listBox li .rightBox{font-size: 25px;}
#boshu .listBox li .orange{font-size: 30px; font-weight: bold; color: #dd470c;}
#boshu .whiteBox{background: #fff; margin: 2em auto 0; padding: 3em 0; position: relative;}
#boshu .whiteBox::before{content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: -3%; width: 75px; height: 540px; background: url("../images/side_img.png"); z-index: 1;}
#boshu .whiteBox::after{content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: -3%; width: 75px; height: 540px; background: url("../images/side_img.png"); z-index: 1;}
#boshu .whiteBox .innerBox{max-width: 798px; width: 100%;margin: 0 auto;}
#boshu .whiteBox .subttl{font-size: 30px; font-weight: bold; text-align: center; border-bottom: solid 2px #dd470c; margin-bottom: 1em;}
#boshu .btnBox{margin: 3em 0 0;}

/*#pageFooter*/
#pageFooter .footerInner{max-width: 1100px; margin: 0 auto; padding: 3em 0;}
#pageFooter dl{display: flex; align-items: center; justify-content: center;}
#pageFooter dt{font-size: 35px; text-align: center; border-left: 10px #dd470c solid; border-right: 10px #dd470c solid; padding: 0 1.5em;}
#pageFooter dd{padding: 0 3.5em; border-right: 10px #dd470c solid;}
#pageFooter dd .bold{font-size: 25px; font-weight: bold;}
#pageFooter dd a{font-size: 22px; color: #000;}