@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=Roboto:ital,wght@0,100;0,400;1,100;1,300;1,400&display=swap');


/* ----------------------------------------------
reset
---------------------------------------------- */
html{
  scroll-behavior: smooth;/*Safariは非対応*/
}
body {
  margin: 0 auto;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}
table {
  margin : 0;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}
img {
  vertical-align: middle;
  border: none;
}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

.elem{
  word-break: keep-all;
  line-break: strict;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/*clearfix*/
.clearfix:after {content: " "; display: block; height: 0;clear: both; visibility: hidden;}
.clearfix {display: inline-table;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

/*pagetop*/
.pagetop {height: 50px; width: 50px; position: fixed; right: 10px; bottom: 20px; background: rgba(255,255,255,1); border: solid 2px #000; border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 2;}
.pagetop__arrow {height: 10px; width: 10px; border-top: 3px solid #000; border-right: 3px solid #000; transform: translateY(20%) rotate(-45deg);}
@media (max-width: 767px) {
.pagetop {bottom:80px;}
}


/* ***DEF-family*** */
html, body, table, th, td, li, div, p, em, mark{font-family: 'Noto Sans JP', sans-serif; font-weight:500;}
strong{font-weight:600;}
i{font-weight:900; font-family:'Font Awesome 5 Free'; display:inline-block; font-style: normal;}

/* ***DEF-FONTSIZE*** */
html {font-size: 62.5%;}
body {font-size: 1.6em; letter-spacing:1px; line-height:1.7;}

@media screen and (max-width: 500px) {
body {letter-spacing:0;}
body, table, th, td, li, div, p, dl, dt, dd
{font-size: 1.4rem;}
}

/* ***DEF-color*** */
html, body, table, th, td, li, div, p, dl, dt, dd, 
h1,h2,h3,h4,h5,h6
{color:#111;}

a {outline:none; transition:.3s;}
a,a:hover,a:hover img {text-decoration: none;}
img {max-width: 100%; height: auto; width:auto;}

.smm{width:.7em; display:inline-block;}
a .fa-caret-right{display:inline-block; margin-left:.8em;}
a .fa-caret-left{display:inline-block; margin-right:.8em;}
@media screen and (max-width: 767px) {
.h_space{height:53px;}
}


/*h*/
h2{margin:0;}


section.intro{background:url(../img/intro.jpg) center top no-repeat #d8ebf2; background-size:cover;}
section.intro .inner{overflow:hidden; width:100%; height:100%; /*aspect-ratio:2 / 1;*/}
@media (max-width: 1200px) {
section.intro .inner{aspect-ratio:5 / 3;}
}
@media (max-width: 767px) {
section.intro .inner{aspect-ratio:inherit; height:calc(100vh - 4.5em);}
section.intro{background:url(../img/intro_s.jpg) center bottom no-repeat #d8ebf2; background-size:65vh;}
}
section.intro ul.top{list-style:none; margin:0; padding:1em; width:100%; display:flex; justify-content:space-between; align-items: flex-start; position:fixed; top:0; left:0; z-index:+1;}
section.intro ul.top li{margin:0; padding:0; display: flex; align-items: center;}
section.intro ul.top li a{display:block;}
section.intro ul.top li a img{display:block; width: clamp(50px, 10vw, 100px); height: auto;}
@media (max-width: 767px) {
section.intro ul.top{padding:.5em;}
}
section.intro div.middle{display:flex; padding:1em; height:100vh; align-items:center;}
section.intro div.middle h1{display:block; margin:0; padding-left:5%; width: clamp(400px, 100vw, 45%);}
@media (max-width: 1200px) {
section.intro div.middle{height:100%;}
}
@media (max-width: 767px) {
section.intro div.middle{justify-content:center; align-items:flex-start;}
section.intro div.middle h1{padding-left:0; width:auto; height:40vh; margin:50px 0 0 0;}
section.intro div.middle h1 img{height:100%; width:auto;}
}
section.intro div.bottom{position:fixed; right:0; bottom:80px; z-index:+1;}
section.intro div.bottom a{background:#e6005a; color:#fff; padding:1.5em 1em; border-top-left-radius:.3em; border-bottom-left-radius:.3em; letter-spacing:.2em; font-weight:600;
  -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; line-height:2; white-space:nowrap;
display:flex; justify-content:center; align-items:center; gap:.5em;
}
section.intro div.bottom a small{font-size:100%; display:block; width:1.5em; height:1.5em; border-radius:1.5em; text-align:center; line-height:1; color:#e6005a; background:#fff;}
section.intro div.bottom a i{margin:.2em .3em 0 0; display:block;}
@media (max-width: 767px) {
section.intro div.bottom{position:fixed; right:0; top:inherit; bottom:0; width:100%;}
section.intro div.bottom a{-webkit-writing-mode:inherit; writing-mode:inherit; line-height:5; padding:0 1em; letter-spacing:.08em; text-align:center; border-top-left-radius:0; border-bottom-left-radius:0;}


section.intro div.bottom a i{margin:.3em 0 0 0; display:block;}



}
@media (hover: hover) and (min-width: 768px){
section.intro div.bottom a:hover{padding:1.5em 1.5em 1.5em 1em; background:#ff0064;}
section.intro div.bottom a small:hover{color:#ff0064;}
}



section.lead{background:url(../img/bg_lead.jpg) center center no-repeat; background-size:cover; position:relative;}
@media (min-width: 1400px) {
section.lead{background-position:center bottom;}
}
section.lead .inner{max-width:calc(1200px + 2em); margin:0 auto; padding:0 1em; height:calc(100vh - 100px);/*aspect-ratio:3 / 2;*/ display:flex; align-items:center;}
section.lead .title{width:30%;}
section.lead .text{width:65%; margin-right:5%;}
section.lead h2{-webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; color:#fff; font-size:clamp(5rem, 4vw, 6rem); font-weight:900; letter-spacing:0.05em; margin:0 auto;}
section.lead h3{color:#fff; font-size:clamp(2.5rem, 3vw, 3rem); margin:0 0 2em 0;}
section.lead h3 br.sp{display:none;}
section.lead p{color:#fff; margin:.5em 0; font-size:clamp(1.3rem, 2vw, 1.6rem);}
@media (max-width: 767px) {
section.lead .inner{gap:5%; height:calc(100vh - 8em); aspect-ratio:inherit;}
section.lead .title{width:20%;}
section.lead .text{width:70%; margin-right:5%;}
section.lead h3 br.sp{display:inherit;}
section.lead h3{color:#fff; margin:0 0 1em 0;}
section.lead p br{display:none;}
}
@media (max-width: 600px) {
section.lead h2{font-size:4rem;}
section.lead h3{font-size:1.8rem; line-height:1.5;}
section.lead p{font-size:1.2rem;}
}


.oj{display:block; height: clamp(40px, 10vw, 100px); width:100%; clip-path: polygon(0% 0, 100% 100%, 0 100%);}
section.lead .oj{background:#fff;}
section.runner .oj{background:#f8f8ef;}





section.runner{background:url(../img/bg_runner.jpg) center center repeat; background-size:100%;}
section.runner .wrap{background: #FFF; background:linear-gradient(0deg,rgba(255, 255, 255, .5) 80%, rgba(255, 255, 255, 1) 100%); padding-bottom:3%;}
section.runner h2{text-align:center; margin:3% auto 5% auto; position:relative;}
section.runner h2 img{display:block; height:auto; margin:0 auto; max-width:700px; width:80%;}
section.runner .inner{max-width:calc(1200px + 2em); width:90%; margin:0 auto; }
section.runner ul.list{margin:0; padding:0; list-style:none; display:flex; align-items:stretch; justify-content:center; flex-wrap:wrap; gap:3%;}
section.runner ul.list li{max-width:calc(91% / 4); min-width:160px; margin:1% 0;}
section.runner ul.list .img{aspect-ratio:1; border:3px solid #222; display:block; overflow:hidden;}
section.runner ul.list .text h3{margin:1.5em 0 .5em 0; font-size:clamp(1.4rem, 1.6vw, 1.6rem); text-align:center; line-height:1; white-space:nowrap;}
section.runner ul.list .text .post{text-align:center; line-height:1.3; height:2.5em; display:flex; align-items:center; justify-content:center; margin-bottom:.5em;}
section.runner ul.list .text .post span{font-size:clamp(1.1rem, 1.2vw, 1.2rem); letter-spacing:0; color:#507896;}
section.runner ul.list .text .career{font-size:clamp(1.2rem, 1.3vw, 1.3rem); letter-spacing:0; line-height:1.5;}
@media (max-width: 600px) {
section.runner .inner{max-width:inherit; padding:0; width:100%;}
section.runner ul.list{display:block;}
section.runner ul.list li{max-width:inherit; width:100%; min-width:inherit; margin:0; padding:1.5em; border-top:1px solid #ccc; display:flex; align-items:flex-start; gap:5%;}
section.runner ul.list .img{width:25%; aspect-ratio:1;}
section.runner ul.list .text{width:70%;}
section.runner ul.list .text h3{margin:0 0 .5em 0; text-align:left;}
section.runner ul.list .text .post{display:block; text-align:left; margin-bottom:.8em; height:inherit;}
}



section.about{background:/*url(../img/bg_about.jpg) center bottom no-repeat*/ #f8f8ef; background-size:100%;}
section.about .wrap{max-width:calc(1000px + 4em); margin:0 auto; padding:0 2em; display:flex; justify-content:center; align-items:center; }
section.about .inner{width:100%; padding:3% 0 15% 0;}
section.about .inner h2{text-align:center; font-size:clamp(2rem, 4vw, 4rem); margin:0 0 2em 0;}
section.about .inner table{background:#fff; border:3px solid #222; width:100%; border-collapse: collapse;}
section.about .inner table th, section.about .inner table td{border:1px solid #222; padding:1.5em; line-height:1.5;}
section.about .inner table th{background:#f0f0f5; white-space:nowrap; letter-spacing:1em;}
section.about .inner table td .btn_s{display:inline-block; color:#222; border:2px solid #222; padding:0 .8em; font-size:80%; line-height:2; margin:.2em; letter-spacing:0; transition:.3s; margin-left:2em;}

section.about .inner table .oubo td{padding-top:2em; padding-bottom:2em;}
section.about .inner table td p{text-align:center; margin:0 0 1.5em 0; font-size:110%;}
section.about .inner table td .btn_l{display:block; margin:0 auto; font-size:120%; text-align:center; width:80%; max-width:400px; color:#fff; border-radius:.3em; line-height:4.5; white-space:nowrap; background: #673ab7;}
section.about .inner table .oubo td strong span{background:rgba(0, 0, 0, 0) linear-gradient(transparent 40%, #FFDFEF 0%) repeat scroll 0 0; padding:0 .3em;}
@media (max-width: 1000px) {
section.about .inner table .oubo td strong{display:block; margin:0 auto;}
}

@media (hover: hover) {
section.about .inner table td .btn_s:hover{color:#eee; background:#222; transition:.3s;}
section.about .inner table td .btn_l:hover{background: #E6321E;}
}
@media (max-width: 767px) {
section.about .inner h2{margin:0 0 1em 0;}
}
@media (max-width: 600px) {
section.about .inner table th, section.about .inner table td{padding:2em .5em; text-align:center;}
section.about .inner table th{letter-spacing:.5em; padding-left:1em;}
section.about .inner table td .btn_s{display:block; margin:.5em auto; padding:.3em; width:90px;}
section.about .inner h2{margin:1em 0 2em 0;}
}



footer{background:#333;}
footer .inner{max-width:calc(1000px + 2em); padding:3em 1em; margin:0 auto; text-align:center; line-height:1.3; white-space:nowrap; font-size:12px; color:#eee; letter-spacing:1px;}
@media (max-width: 767px) {
footer .inner{padding-bottom:9.5em;}
}
@media (max-width: 500px) {
footer .inner{font-size:11px;}
}