/* About */
.hero {position:relative; width:100%; height:480px;}
.aboutMedical .hero {background:url(../img/about/medical/bg_hero.jpg) no-repeat 50% 50% / cover;}
.aboutNet .hero {background:url(../img/about/net/bg_hero.jpg) no-repeat 50% 50% / cover;}
.aboutGuide .hero {background:url(../img/about/guide/bg_hero.jpg) no-repeat 50% 50% / cover;}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  .aboutMedical .hero {background:url(../img/about/medical/bg_hero@2x.jpg) no-repeat 50% 50% / cover;}
  .aboutNet .hero {background:url(../img/about/net/bg_hero@2x.jpg) no-repeat 50% 50% / cover;}
  .aboutGuide .hero {background:url(../img/about/guide/bg_hero@2x.jpg) no-repeat 50% 50% / cover;}
}

.hero_txt {position:absolute; top:50%; left:50%; width:100%; color:#ffffff; text-align:center; transform:translate3d(-50%,-50%,0);}
.hero_ttl {padding:30px 0 0; text-align:center; font-weight:bold; font-size:4rem; line-height:6.4rem; letter-spacing:1px; white-space:nowrap;}
.hero_ttl::after {content:''; display:block; width:65px; height:2px; margin:20px auto; background:#ffffff;}
.hero_sub {margin:30px 0 0; font-weight:bold; font-size:1.6rem; line-height:2;}
.hero_btn {display:flex; width:240px; height:52px; margin:30px auto 0; border-radius:5px; background:#d17364; justify-content:center; align-items:center; transition:all 0.3s;}
.hero_btn span {line-height:1; font-size:18px; font-weight:bold; color:#ffffff;}

@media screen and (min-width:1024px) {
  .hero_sub {letter-spacing:1px; white-space:nowrap;}
}
@media screen and (max-width:1023px) {
  .hero {height:auto; overflow:hidden;}
  .aboutMedical .hero {background:url(../img/about/medical/bg_hero_sp.jpg) no-repeat 50% 50% / cover;}
  .aboutNet .hero {background:url(../img/about/net/bg_hero_sp.jpg) no-repeat 50% 50% / cover;}
  .aboutGuide .hero {background:url(../img/about/guide/bg_hero_sp.jpg) no-repeat 50% 50% / cover;}

  .hero_txt {position:relative; top:0; left:0; width:auto; margin:50px 18px; transform:translateY(0);}
  .hero_ttl {padding:0; text-align:left; font-size:22px; line-height:32px; text-align:center;}
  .hero_sub {margin:20px 0 0; font-weight:bold; text-align:left; font-size:14px;}
  .hero_recruite {display:flex; justify-content:center; align-items:center; position:absolute; bottom:88px; left:0; right:0; width:calc(100% - 36px); height:70px; margin:0 auto; border-radius:3px; color:#00457f; font-weight:bold; font-size:16px; background:#ffffff;}
  .hero_recruite img {width:31px; flex:0 0 31px; margin:0 10px 0 0;}

  .hero_btn span {font-size:16px;}
}




.pageNav {margin:0 0 150px; background:linear-gradient(-90deg, #00457f 50%, #ffffff 50%);}
.pageNav_items {display:flex; justify-content:flex-start; align-items:center; width:100%; max-width:1120px; height:100px; margin:0 auto; padding:0 40px; background:#00457f; color:#ffffff;} 
.pageNav_item {}
.pageNav_item a {display:block; position:relative; margin:0 40px 0 0; padding:10px 10px 10px 35px; font-size:18px; font-weight:bold;}
.pageNav_item a::before {content:''; position:absolute; top:50%; left:10px; display:block; width:10px; height:10px; border-top:solid 2px #ffffff; border-right:solid 2px #ffffff; transform:translateY(-80%) rotate(135deg);}
@media screen and (max-width:1023px) {
  .pageNav {margin:0 0 50px;}
  .pageNav_items {flex-direction:column; align-items:flex-start; width:calc(100% - 36px); height:auto; margin:0 auto; padding:15px 0 15px 30px;} 
  .pageNav_item a {margin:0; padding:10px 5px 10px 35px; font-size:16px;}

}




.sec {width:100%; max-width:632px; margin:0 auto 130px;}
.aboutNet #sec1 {margin:100px auto 70px;}

.sec_doc {font-size:1.6rem; line-height:2;}
.sec_ttl {display:flex; justify-content:center; align-items:center; margin:0 0 70px; font-size:33px; text-align:center; font-weight:bold; line-height:50px}
.sec_ttl .ttlNum {display:inline-block; position:relative; margin:0 20px 0 0; padding:0 0 3px; font-size:35px; line-height:35px; color:#00457f; font-weight:bold; overflow:hidden; font-family:'Montserrat',sans-serif;}
.sec_ttl .ttlNum::after {content:''; position:absolute; left:50%; bottom:0; width:100%; height:2px; background:#00457f; transform:translateX(-50%); transition:all 0.3s;}
.sec_sttl {margin:0 0 -10px; font-size:28px; font-weight:bold; line-height:44px; color:#00457f;}
.sec_doc p {margin:60px 0;}
.sec_doc blockquote {position:relative; margin:80px 20px; padding:20px; background:#f5f5f5;}
.sec_doc blockquote::before {content:url('../img/common/ic_quot.svg'); position:absolute; top:-15px; left:-20px;}
.sec_doc blockquote::after {content:url('../img/common/ic_quot.svg'); position:absolute; bottom:-10px; right:-20px; transform:rotate(180deg);}
.sec_doc img {display:block; max-width:100%; margin:40px auto;}
.sec_doc a {text-decoration:underline; color:#d17364;}
.sec_doc ol {margin:0 0 40px; counter-reset:li;}
.sec_doc ol li {position:relative; padding:0 0 0 3.5rem; list-style:none;}
.sec_doc ol li:before {content:counter(li)'.'; position:absolute; top:0; left:1rem; color:#808080; font-weight:600; font-family:'Montserrat',sans-serif; counter-increment:li;}

.sec_btn {display:flex; width:320px; height:80px; justify-content:center; align-items:center; margin:0 auto 180px; border-radius:5px; color:#ffffff; background:#00457f;}
.sec_btn span {line-height:1; font-size:18px; font-weight:bold; color:#ffffff;}
.sec_bnr {display:block; width:502px; margin:0 auto;}


@media screen and (max-width:1023px) {
  .sec {width:calc(100% - 36px); margin:0 auto 50px;}
  .aboutNet #sec1 {margin:50px auto 30px;}

  .sec_ttl {justify-content:flex-start; align-items:flex-start; margin:0 0 25px; font-size:26px; text-align:left; line-height:40px}
  .sec_ttl .ttlNum {flex:0 0 32px; margin:5px 10px 0 0; padding:0; text-align:center; font-size:24px; line-height:30px;}
  .sec_sttl {margin:0 0 30px; font-size:22px; line-height:36px;}
  .sec_doc p {margin:25px 0;}
  .sec_doc p + .sec_sttl {margin:50px 0 30px;}
  .sec_doc blockquote {margin:25px 14px; background:#f5f5f5;}
  .sec_doc blockquote::before {top:0; left:-16px;}
  .sec_doc blockquote::after {bottom:0; right:-16px;}
  .sec_doc img {margin:25px auto;}
  .sec_doc ol {margin:0 0 20px;}

  .sec_btn {display:flex; justify-content:center; align-items:center; width:100%; height:70px; margin:0 auto; border:solid 2px #00457f; border-radius:1px; color:#00457f; font-weight:bold; font-size:16px; background:#ffffff;}
  .sec_btn img {width:31px; flex:0 0 31px; margin:0 10px 0 0;}

  .sec_bnr {width:100%;}
}




.about_link {width:100%; max-width:632px; margin:0 auto 170px;}
.aboutLink_items {display:flex; justify-content:space-between; align-items:center;}
.aboutLink_item {flex:0 0 49%; width:49%;}
.aboutLink_item.medical {}
.aboutLink_item.net {}
.aboutLink_item.guide {}
.aboutLink_item a {display:flex; width:100%; height:80px; border-radius:5px; background:#00457f; justify-content:center; align-items:center; transition:all 0.3s;}
.aboutLink_item span {line-height:1; font-size:18px; font-weight:bold; color:#ffffff;}

@media screen and (max-width:1023px) {
  .about_link {width:calc(100% - 112px); margin:0 auto 50px;}
  .aboutLink_items {flex-direction:column;}
  .aboutLink_item {flex:0 0 100%; width:100%;}
  .aboutLink_item a {position:relative; height:70px; margin:0 auto 10px; border-radius:2px;}
  .aboutLink_item a::after {content:''; display:block; position:absolute; top:50%; right:15px; width:10px; height:10px; border-top:solid 2px #ffffff; border-right:solid 2px #ffffff; transform:translateY(-50%) rotate(45deg);}
  .aboutLink_item span {font-size:15px;}
}