@charset "UTF-8";
/******* setting.scss *******/
/******* mixin.scss *******/
/******* reset.scss *******/
html {
  font-size: 62.5%; }

html,
body {
  background-color: #E9EDF8;
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  margin: 0;
  max-width: 100%;
  min-height: 100%;
  padding: 0;
  text-align: center;
  position: relative;
  -webkit-text-size-adjust: 100%; }

div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fildset, input, textarea, p, blockquote, table, th, td, address, textarea, input {
  color: #000;
  font-size: 16px;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 160%;
  margin: 0;
  padding: 0;
  word-wrap: break-word; }

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%; }

caption, th {
  text-align: left; }

td, th {
  vertical-align: top; }

fieldset, img, abbr {
  border: none; }

li {
  list-style-type: none; }

strong {
  font-weight: bold; }

a {
  color: #065FE3;
  text-decoration: underline; }
  a:hover {
    text-decoration: none; }

img {
  vertical-align: bottom; }

*:focus {
  outline: none; }

img {
  max-width: 100%; }

.sp {
  display: none !important; }

/******header******/
header {
  background: url("../img/mvbg.png") no-repeat 50% 0, linear-gradient(90deg, #F6F6F6 0%, #F6F6F6 50%, #5F74F1 50%, #5F74F1 100%); }
  header .headCont {
    background: url("../img/mv_illust.png") no-repeat 50% 0;
    height: 900px;
    max-width: 1600px;
    margin: 0 auto;
    position: relative; }
    @media screen and (max-width: 1100px) {
      header .headCont {
        background-size: 130%;
        background-position: 50% 50%; } }
  header .headlogo {
    position: absolute;
    top: 40px;
    left: 30px; }
  header .headTitleArea {
    display: flex;
    justify-content: flex-end;
    max-width: 1140px;
    margin: 0 auto;
    padding-top: 310px;
    text-align: left; }
    @media screen and (max-width: 1100px) {
      header .headTitleArea {
        padding-top: 280px;
        padding-right: 20px; } }
    header .headTitleArea .headTitleCont {
      width: 510px; }
      @media screen and (max-width: 1100px) {
        header .headTitleArea .headTitleCont {
          width: 46%; } }
    header .headTitleArea h1 {
      color: #fff;
      font-size: 225%;
      font-weight: 700;
      line-height: 120%;
      margin-bottom: 35px; }
      header .headTitleArea h1 img {
        display: block;
        margin-bottom: 5px; }
    header .headTitleArea .anniversary {
      margin-bottom: 20px;
      text-align: center; }
    header .headTitleArea p {
      color: #fff;
      font-weight: 700; }

/******footer******/
footer {
  background-color: #fff;
  padding: 0 20px; }
  footer .footCont {
    padding: 35px 0;
    margin: 0 auto;
    max-width: 1140px;
    text-align: left; }
  footer .attention {
    margin-bottom: 40px; }
    footer .attention li {
      font-size: 87.5%;
      padding-left: 35px;
      position: relative; }
      footer .attention li span {
        position: absolute;
        top: 0px;
        left: 0px; }
  footer dl {
    margin-bottom: 40px; }
    footer dl dt {
      font-weight: 700; }
    footer dl dd {
      font-size: 87.5%;
      margin-top: 15px; }
      footer dl dd li {
        font-size: 87.5%; }
      footer dl dd.note {
        font-weight: 700; }
  footer .snslink {
    display: flex;
    justify-content: center;
    margin-bottom: 30px; }
    footer .snslink li {
      margin: 0 10px; }
  footer .footLogo {
    margin: 0 auto 15px;
    text-align: center; }
  footer .copyright {
    text-align: center; }

/******main******/
main {
  display: block;
  text-align: left;
  position: relative;
  overflow: hidden; }

section {
  padding: 0 20px; }

.secCont {
  max-width: 1140px;
  margin: 0 auto; }

.h201 .secCont {
  padding: 70px 0 110px;
  max-width: 1312px; }
.h201 h2 {
  margin: 0 auto 20px;
  text-align: center; }
.h201 .fig li {
  margin-bottom: 10px; }

.h202 {
  background: url("../img/bg01.png") no-repeat 50% 0 #5F74F1; }
  .h202 .secCont {
    padding: 100px 0 150px;
    max-width: 1240px; }
  .h202 h2 {
    margin: 0 auto 15px;
    text-align: center; }
  .h202 .fig {
    margin-bottom: 55px; }
  .h202 .other {
    margin: 0 auto;
    max-width: 1060px;
    padding: 0 90px; }

.h203 h2,
.h204 h2 {
  color: #003282;
  font-size: 280%;
  font-weight: 700;
  margin-bottom: 15px; }
.h203 p,
.h204 p {
  font-size: 112%;
  font-weight: 700; }
.h203 .secCont,
.h204 .secCont {
  padding: 100px 0 0; }
.h203 .fig,
.h204 .fig {
  margin-top: 45px; }
.h203 .figlist,
.h204 .figlist {
  margin-top: 45px;
  display: flex;
  justify-content: space-between; }

.h204 .secCont {
  padding-bottom: 85px; }
.h204 .figlist {
  align-items: flex-end; }

.h205 {
  background-color: #5F74F1; }
  .h205 .secCont {
    padding: 150px 0;
    max-width: 1180px;
    position: relative; }
    .h205 .secCont:after {
      background-position: 0 0;
      background-repeat: no-repeat;
      background-size: 100%;
      overflow: hidden;
      text-indent: 180%;
      white-space: nowrap;
      content: "";
      display: block;
      height: 319px;
      width: 330px;
      background-image: url("../img/h205illust.png");
      position: absolute;
      top: 520px;
      right: -120px; }
  .h205 h2 {
    margin: 0 auto;
    position: absolute;
    top: 110px;
    left: 0;
    right: 0;
    text-align: center; }

.h206 {
  background: url("../img/bg02.png") repeat; }
  .h206 .secCont {
    padding: 85px 0 120px; }
  .h206 h2 {
    color: #fff;
    font-size: 285%;
    font-weight: 700;
    margin: 0 auto;
    position: absolute;
    top: -5px;
    left: 0;
    right: 0;
    text-align: center; }
  .h206 .titleArea {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
    padding-left: 90px;
    position: relative; }
    .h206 .titleArea p {
      color: #fff;
      font-weight: 700;
      width: 60%; }
    .h206 .titleArea .fig {
      width: 35%; }
  .h206 .linkArea {
    height: 230px;
    margin-bottom: 55px;
    position: relative;
    text-align: center; }
    .h206 .linkArea:before {
      background-position: 0 0;
      background-repeat: no-repeat;
      background-size: 100%;
      overflow: hidden;
      text-indent: 180%;
      white-space: nowrap;
      content: "";
      display: block;
      height: 445px;
      width: 250px;
      background-image: url("../img/fig17.png");
      position: absolute;
      top: -100px;
      left: 0px; }
    .h206 .linkArea h3 {
      margin: 0 auto 35px;
      padding-left: 160px; }
    .h206 .linkArea .link {
      background-color: #fff;
      border-radius: 110px;
      margin: 0 auto;
      width: 450px; }
      .h206 .linkArea .link a {
        background-color: #21C7A1;
        border-radius: 110px;
        border: 4px solid #fff;
        box-sizing: border-box;
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 125%;
        font-weight: 700;
        transition: opacity 0.6s;
        text-decoration: none; }
        .h206 .linkArea .link a:hover {
          opacity: 0.7; }
        @media screen and (max-width: 960px) {
          .h206 .linkArea .link a:hover {
            opacity: 1; } }
  .h206 h3 {
    margin: 0 auto 10px;
    text-align: center; }

.h207 {
  background: url("../img/bg03.png") no-repeat 50% 0 #5F74F1; }
  .h207 .secCont {
    padding: 110px 0 150px; }
  .h207 h2 {
    color: #fff;
    font-size: 285%;
    font-weight: 700;
    margin: 0 auto 40px;
    text-align: center; }
  .h207 p {
    color: #fff;
    font-size: 110%;
    font-weight: 700;
    max-width: 900px;
    margin: 0 auto 20px; }
  .h207 .fig {
    text-align: center; }

.appArea {
  padding: 100px 20px 80px; }
  .appArea dl {
    max-width: 940px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; }
    .appArea dl dt {
      margin: 0 auto;
      position: absolute;
      top: -140px;
      left: 0;
      right: 0;
      text-align: center; }
    .appArea dl dd {
      width: 48%; }
      .appArea dl dd a {
        background-color: #072CFA;
        border-radius: 110px;
        color: #fff;
        font-size: 135%;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 90px;
        transition: opacity 0.6s;
        text-decoration: none; }
        .appArea dl dd a:hover {
          opacity: 0.7; }
        @media screen and (max-width: 960px) {
          .appArea dl dd a:hover {
            opacity: 1; } }
      .appArea dl dd:last-of-type a {
        background-color: #F9064C; }