/* common */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&display=swap');

html {font-size: 62.5%;font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", 'Meiryo', sans-serif;color: #000;scroll-behavior: smooth;height: 100%;}
body{height: 100%;}
a,a.active {text-decoration: none;cursor: pointer;}
a:link,a:visited,a:active{outline: none;}
header{min-width: 1000px;}
h2 {font-size: 3rem;color: #2c4179;background: #e4eef9;padding: 13px 0 13px 40px;position: relative;margin-bottom: 35px;}
h2::before{position: absolute;content: '';top: 0;left: 0;width: 10px;height: 100%;background: #6994e5;}
h3{font-size: 3rem;color: #333;}
h3.point_h3{color: #ce3130;text-align: center;position: relative;background: #ffe5bb;border-radius: 5px;padding: 25px 0;background-image: url(../img/bg02.png);background-repeat: no-repeat;background-position: 96% 60%;}
h3.point_h3::before{position: absolute;content: 'Point';top: 50%;left: 30px;transform: translateY(-50%);}
p {font-size: 1.8rem;line-height: 1.6;letter-spacing: 1px;color: #333;margin-bottom: 40px;font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;}
ul {list-style: none;}

.red_b,.red_p {color: #ce3130;}
.red_b{font-weight: bold;}

.blue_b{font-weight: bold;color: #2c4179;}

section{width: 1100px;max-width: 100%;padding: 0 50px;margin: 0 auto 120px;}

.fb,.fb02,.fb03{display: flex;justify-content: space-around;}

figcaption{text-align: center;font-size: 1.6rem;}
.quote{text-align: left;font-size: 1.2rem;font-family: 'Meiryo', sans-serif;}

.mt30{margin-top: 30px;}

.res_on{display: none;}
@media (width < 770px) {
  h2{padding: 13px 0 13px 25px;}
  h2,h3{font-size: 2.5rem;}
  p{font-size: 1.5rem;}
  section{padding: 0 20px;}
  .fb,.fb02,.fb03{flex-direction: column;}
  h3.point_h3{padding: 40px 0 15px;font-size: 2.3rem;background-image: none;}
  h3.point_h3::before{top: 23%;left: 15px;}
  .res_on{display: block;}
}

/* header */
h1 {font-size: 4.4rem;color: #2c4179;padding: 27px 0;text-align: center;background: url(../img/bg01.png) no-repeat center;background-color: #e3f0ff;}
nav {background: #c9ddf4;}
nav ul {display: flex;width: 1000px;height: 60px;margin: 0 auto;justify-content: center;overflow: hidden;}
nav ul li a {display: block;font-size: 1.7rem;font-weight: bold;color: #2c4179;padding: 18px 20px;transition: all .3s ease-in-out;}
nav ul li a:hover{background: #f7e7b8;}
nav ul li.member{background: #4f5d82;position: relative;}
nav ul li.member::before{position: absolute;content: '';background: url(../img/member.png) no-repeat;width: 22px;height: 22px;top: 18px;left: 15px;background-size: contain;}
nav ul li.member a{color: #fff;padding-left: 50px;}
nav ul li.member a:hover{background: #224ab5;}
nav ul li.inq{background: #5b82bd;}
nav ul li.inq a{color: #fff;}
nav ul li.inq a:hover{background: #7795c3;}
@media (width > 770px) {
  .pc_nav h1{position: relative;}
  .pc_nav h1::before{position: absolute;content: '';width: 100px;height: 100px;background: url(../img/qr.png) no-repeat;background-size: contain;top: 7%;left: 10%;}
}
@media (width < 770px) {
  .pc_nav{display: none;}
}

/* hamburger nav */
.ham_nav {display: none;position: fixed;top: 0;left: 0;width: 100%;z-index: 10;}
.ham_nav .ham_tgl {position: fixed;top: 20px;left: 20px;width: 30px;height: 24px;z-index: 12;box-sizing: border-box;cursor: pointer;-webkit-transition: all 400ms;transition: all 400ms;}
.ham_nav .ham_tgl.open{top: 25px;}
.ham_nav .ham_tgl span {position: absolute; width: 100%;height: 4px;background: #2c4179;border-radius: 10px;-webkit-transition: all 400ms;transition: all 400ms;}
.ham_nav .ham_tgl span:nth-child(1) {top: 0;}
.ham_nav .ham_tgl span:nth-child(2) {top: 10px;}
.ham_nav .ham_tgl span:nth-child(3) {top: 20px;}
.ham_nav .ham_tgl.open span:nth-child(1) {background: #2c4179;top: 6px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);transform: rotate(-45deg);}
.ham_nav .ham_tgl.open span:nth-child(2),
.ham_nav .ham_tgl.open span:nth-child(3) {top: 6px;background: #2c4179;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);}
.hnav .hnav-menu {display: flex;justify-content: space-between;}
.hnav .hnav-menu li {margin: 0 auto;padding: 0 5px;}

@media (width < 770px) {
  .ham_nav{display: block;width: 100%;height: 65px;display: flex;justify-content: space-between;}
  .ham_nav h1{width: 100%;display: flex;justify-content: center;align-items: center;padding-left: 20px;background: none;background-color: #e3f0ff;}
  .ham_tgl{display: block;}
  .hnav{position: fixed;top: 65px;left: -100%;width: 100%;height: 100vh;background-color: rgba(36, 36, 61, 0.8);font-size: 16px;box-sizing: border-box;z-index: 1;backdrop-filter: blur(3px);transition: .3s;}
  .hnav.open{left: 0;}
  .hnav .hnav-menu {width: 100%;height: 100%;display: block;flex-direction: column;text-align: center;}
  .hnav .hnav-menu li {width: 86%;padding: 15px;border-bottom: #8b8b8b 1px solid;}
  .hnav .hnav-menu li a {color: white;}
  .hnav .hnav-menu li a:hover{background: none;}
  .hnav .hnav-menu li.member{background: none;}
  .hnav .hnav-menu li.member::before{width: 30px;height: 30px;top: 28px;left: 70px;}
  .hnav .hnav-menu li.member a{padding-left: 20px;}

  h1{font-size: 2rem;}
}

/* footer */
footer{background: #e4eef9;text-align: center;padding: 15px 0;}
footer p{margin-bottom: 0;color: #4f5d82;font-family: "Noto Sans JP";font-size: 1.8rem;}
footer p.sec{font-size: 1.4rem;}
@media (width > 770px) {
  footer{height: 120px;}
  .footer_fb{display: flex;justify-content: center;}
  .footer_fb div{margin: 0 110px 0 25px;}
  .footer_fb div p:first-child{padding-top: 20px;}
  .footer_fb img{margin-top: -5px;}
}
@media (width < 770px) {
  footer{padding: 15px;}
  .footer_fb img{display: none;}
}


/* contents */
section#s1{margin: 0 auto 50px;}
#s1{text-align: center;}
#s1 .red_b{text-align: center;font-size: 3.6rem;margin: 40px 0;font-family: "Noto Sans JP"}
#s1 video{width: 100%;}
#s1 .txt_area{margin: 20px 0;}
#s1 .txt_area .red_b{font-size: 3rem;}
.red_b span{background: linear-gradient(transparent 70%, #fff462 70%);font-size: 3.6rem;}
#s1 .txt_area .blue_b{font-size: 3rem;margin-bottom: 15px;}
@media (width < 770px) {
  section#s1{margin-top: 100px;}
  #s1 .red_b{font-size: 2.5rem;}
  #s1 .txt_area .blue_b{font-size: 2.3rem;}
}

#s2 .fb{margin-bottom: 40px;justify-content: space-between;}
#s2 .fb .fb_l p{text-align: center;font-size: 2rem;font-weight: bold;color: #2c4179;padding: 5px 0;background: #d0e0f2;margin-bottom: 15px;}
#s2 .fb figure.fb_r{text-align: center;}
#s2 .fb03{background: #d0e0f2;padding: 30px;border-radius: 5px;position: relative;margin-bottom: 60px;justify-content: space-between;}
#s2 .fb03::before{position: absolute;content: '';background: #d0e0f2;height: calc(tan(60deg) * 47px / 2);width: 60px;clip-path: polygon(0 0,100% 0,50% 100%);left: 0;right: 0;bottom: -40px;margin: 0 auto;}
#s2 .fb03 ul li{font-size: 1.8rem;}
#s2 .fb03 ul li:not(:last-child){margin-bottom: 25px;}
@media (width < 770px) {
  #s2 .fb .fb_l{margin-bottom: 50px;}
  #s2 .fb img{width: 100%;}
  #s2 .fb03{padding: 30px 20px;}
  #s2 .fb03 ul li{margin-bottom: 20px;}
}

#s3 .app_txt{border: 3px solid #6994e5;border-radius: 5px;padding: 15px 30px 20px;}
#s3 .app_txt p.red_b{font-size: 3rem;text-align: center;font-family: "Noto Sans JP";margin-bottom: 20px;}
#s3 .app_txt div b{font-size: 2rem;}
#s3 .app_txt div p{margin-top: 20px;margin-bottom: 0;}
@media (width < 770px) {
  #s3 .app_txt{padding: 0;}
  #s3 .app_txt p.red_b{font-size: 2.5rem;padding-top: 20px;}
  #s3 .app_txt div{padding: 0 25px 30px;}
}

#s4 figure{width: 350px;margin-left: 30px;}
#s4 .fb02{flex-wrap: wrap;margin: 60px 0;justify-content: space-between;position: relative;}
#s4 .fb02::before{position: absolute;content: '';background: #2c4179;height: calc(tan(60deg) * 35px / 2);width: 75px;clip-path: polygon(0 0,100% 0,50% 100%);left: 50%;right: 50%;bottom: -45px;transform: translate(-50%, -50%);}
#s4 .fb02 div{width: 30%;text-align: center;background: #e4eef9;border-radius: 5px;padding: 20px;margin-bottom: 40px;}
#s4 .fb02 div:nth-child(-n + 3){padding: 30px 20px 40px;}
#s4 .fb02 div:nth-child(4){margin-left: 14.7%;}
#s4 .fb02 div:nth-child(5){margin-right: 14.7%;}
#s4 .fb02 div p{margin-bottom: 0;line-height: 1.4;font-family: "Noto Sans JP"}
#s4 .fb02 div p:first-child{font-size: 2rem;font-weight: bold;color: #2c4179;border-bottom: 2px solid #2c4179;padding-bottom: 5px;}
#s4 .fb02 div p.red_b{font-size: 3rem;padding-top: 20px;}
#s4 .fb02 div p.padd{padding: 13px 0 20px;}
#s4 .point02_h3{width: 742px;margin: 0 auto;text-align: center;position: relative;background: #ffcb5b;padding: 30px 0;color: #2c4179;border-radius: 10px;}
#s4 .point02_h3::before{position: absolute;content: '';background: url(../img/bg03.png) no-repeat;right: 10px;top: -13px;width: 146px;height: 120px;}
@media (width < 770px) {
  #s4 figure{margin-left: 0;}
  #s4 .fb02 div:nth-child(4){margin-left: 0;}
  #s4 .fb02 div:nth-child(5){margin-right: 0;}
  #s4 .point02_h3::before{background: none;}
}

#s5 ul{margin-top: 30px;}
#s5 ul li{font-size: 3rem;margin-bottom: 5px;}
#s5 ul li:first-child span{color: #0071bc;}
#s5 ul li:nth-child(2) span{color: #589fef;}
#s5 ul li:nth-child(3) span{color: #8fd0ff;}
#s5 ul li:nth-child(5) span{color: #adbae3;}
#s5 ul li:nth-child(6) span{color: #7d8ab1;}
#s5 ul li:last-child span{color: #4f5d82;}
@media (width < 770px) {
  #s5 ul li{font-size: 2.5rem;}
}

#s6 img,#s7 img{width: 100%;margin: 50px 0 20px;}
@media (width < 770px) {
  #s6 img,#s7 img{margin: 10px 0 20px;}
}

section#s8{width: 100%;background: #d0e0f2;padding: 40px 0 20px;margin-bottom: 60px;}
#s8 .inner{width: 1100px;max-width: 100%;padding: 0 50px;margin: 0 auto;}
#s8 h2,#s9 h2{text-align: center;background: none;padding: 13px 0;}
#s8 h2::before,#s9 h2::before{background: none;}
#s8 .inner .fb{flex-wrap: wrap;}
#s8 .inner .fb div.fb_child{width: 280px;text-align: center;margin-bottom: 80px;}
#s8 .inner .fb .top{background: #4f5d82;border-radius: 5px 5px 0 0;height: 140px;}
#s8 .inner .fb .top img{width: 80%;}
#s8 .inner .fb .top_a img{width: 60%;}
#s8 .inner .fb .top_b img{width: 48%;}
#s8 .inner .fb .top_c img{padding-top: 30px;}
#s8 .inner .fb .btm{width: 280px;display: table;background: #fff;border-radius: 0 0 5px 5px;height: 110px;}
#s8 .inner .fb .btm p{line-height: 1.2;display: table-cell;vertical-align: middle;font-family: "Noto Sans JP";}
@media (width < 770px) {
  #s8 .inner{padding: 0 30px;}
  #s8 .inner .fb div.fb_child{margin: 0 auto 50px;}
  #s8 .inner .fb .btm p{font-size: 1.7rem;}
}

#s9{text-align: center;}
#s9 img{width: 100%;}
#s9 .quote{margin: 30px 0 0 50px;}
#s9 .quote a{color: #004ea2;}
#s9 .quote a:hover{text-decoration: underline;}
@media (width < 770px) {
  #s9 .quote{word-break: break-all;margin: 30px 0 0;}
}

@media (width < 770px) {
  #s1 img,#s2 .fb .fb_l,#s2 .fb .fb_r figure img,#s2 .fb03 img,
  #s4 figure,#s4 .fb02 div,#s4 .point02_h3,#s5 figure img{width: 100%;height: auto;}
}

/* member */
.mem_h1 a{color: #2c4179;}
#member{text-align: center;}
#member h2{margin: 100px 0 50px;background: none;padding: 0;color: #333;}
#member h2::before{background: none;}
#member .mem_lists{display: inline-block;text-align: left;}
#member .mem_lists h3{font-size: 2rem}
#member .mem_lists ul li{font-size: 1.8rem;margin: 20px 0;}
#member .mem_lists ul li a{color: #004ea2;text-decoration: underline;}
#member .mem_lists ul li a:hover{text-decoration: none;}

.footer_mem{position: sticky;top: 100vh;}
@media (width < 770px) {
  #member .mem_lists{padding: 0 20px;}
}