@charset "UTF-8";
/* CSS Document */
body {
  font-family: "Noto Sans JP","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Arial,Verdana,sans-serif;
  color: #333333; }

img {
  max-width: 100%;
  width: auto;
  height: auto; }

a {
  text-decoration: none; }
  a:hover, a:active, a:focus {
    text-decoration: none; }

.large {
  font-size: 150%;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .large {
      font-size: 165%; } }

.big {
  font-size: 200%;
  margin-bottom: 1.3em;
  line-height: 1.1; }

.text-color-white {
  color: white; }

.text-color-1 {
  color: #02ac96; }

.text-color-2 {
  color: #0379c2; }

.zen {
  font-family: Zen Maru Gothic; }

.century {
  font-family: Century Gothic; }

.link {
  text-align: center; }
  .link a {
    color: white;
    border-radius: 3em;
    padding: .75em 2em;
    line-height: 1;
    display: block; }

.enqlink {
  font-size: 20px;
  font-weight: 700;
  margin: 2.5em auto; }
  @media screen and (min-width: 768px) {
    .enqlink {
      font-size: 140%; } }
  @media screen and (min-width: 1200px) {
    .enqlink {
      font-size: 42px; } }
  .enqlink a {
    background-color: #f76e18;
    border: 3px solid white;
    padding: 1.3em 1em; }
    .enqlink a:hover, .enqlink a:active, .enqlink a:focus {
      background-color: white;
      color: #f76e18;
      border-color: #f76e18; }
    @media screen and (min-width: 768px) {
      .enqlink a {
        display: inline-block;
        padding: 1.3em 2em; } }
    @media screen and (min-width: 1200px) {
      .enqlink a {
        padding: 0.7em 3em; } }

.maillink a {
  background-color: #02ac96;
  display: block; }

#header .sitetitle {
  background-color: white;
  text-align: center;
  padding: .5em; }
  @media screen and (max-width: 599.98px) {
    #header .sitetitle {
      padding-bottom: 0; }
      #header .sitetitle img {
        max-height: 45px; } }
#header section {
  line-height: 1.1;
  padding: 5em .5em 8em;
  background-image: url("../images/bg-mv-sp-b.png"), url("../images/bg-mv-sp-t.png");
  background-position: bottom center, top center;
  background-repeat: no-repeat, no-repeat;
  text-align: center; }
  @media screen and (min-width: 600px) {
    #header section {
      background-size: 100vw, 140vw; } }
  @media screen and (min-width: 1000px) {
    #header section {
      background-image: url("../images/bg-mv.png");
      background-position: top center;
      background-repeat: no-repeat;
      background-size: auto;
      padding: 3em .5em 6em;
      line-height: 1.8; } }
#header .year {
  font-size: 80px; }
  @media screen and (min-width: 768px) {
    #header .year {
      font-size: 112px; } }
@media screen and (min-width: 768px) {
  #header .title {
    font-size: 88px; } }
@media screen and (min-width: 768px) {
  #header .date {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.5em; } }
@media screen and (min-width: 768px) {
  #header .enqlink {
    margin-top: 1.5em; } }

#main > section {
  padding: 2em .5em; }
  #main > section.s2 {
    padding-bottom: 8.5em;
    background-image: url("../images/bg-comp-sp.png");
    background-repeat: no-repeat;
    background-position: bottom center; }
    @media screen and (min-width: 600px) {
      #main > section.s2 {
        padding-bottom: 9em;
        background-size: 100vw; } }
    @media screen and (min-width: 1200px) {
      #main > section.s2 {
        background-image: url("../images/bg-comp.png");
        padding-bottom: 5em;
        padding-top: 0;
        margin-top: -2em; } }

section p {
  line-height: 2; }

.copy {
  font-weight: 600;
  padding-bottom: 2em; }

.s2 h2 img {
  display: block;
  margin-left: auto;
  margin-right: auto; }
@media screen and (max-width: 599.98px) {
  .s2 .enqlink {
    margin-top: 1.5em; } }

.s2, .s3, .s4 {
  margin-bottom: 7em; }
  @media screen and (min-width: 768px) {
    .s2, .s3, .s4 {
      margin-bottom: 15em; } }

.s3 h2, .s4 h2, .s5 h2 {
  font-weight: 700;
  background-color: white;
  text-align: center;
  margin: -4.5em 1em 1.2em;
  padding: 1em .5em;
  font-size: 1.8em;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  border-width: 3px;
  border-style: solid;
  line-height: 1.8; }
  @media screen and (min-width: 768px) {
    .s3 h2, .s4 h2, .s5 h2 {
      font-size: 3em;
      padding: .5em; } }
  .s3 h2 .small, .s4 h2 .small, .s5 h2 .small {
    font-size: 70%; }

.s3, .s5 {
  background-color: #02ac96;
  color: white; }
  .s3 h2, .s5 h2 {
    border-color: #02ac96;
    color: #02ac96; }

.s3 .guidance {
  width: 100%;
  margin-bottom: 2em; }
  .s3 .guidance th, .s3 .guidance td {
    width: 100%;
    display: block;
    vertical-align: baseline;
    padding: .5em; }
  @media screen and (min-width: 768px) {
    .s3 .guidance th {
      width: 30%;
      display: table-cell; }
    .s3 .guidance td {
      width: 70%;
      display: table-cell; } }
  .s3 .guidance .head {
    border: 2px solid white;
    border-radius: .3em;
    padding: .5em;
    line-height: 1;
    text-align: center;
    display: block;
    width: 100%; }

.s4 {
  background-color: #0379c2; }
  .s4 h2 {
    border-color: #0379c2;
    color: #0379c2; }
  .s4 .inner {
    background-color: white;
    padding: 1em;
    border-radius: 1.5em;
    /*		.d-flex {
    			flex-direction: column;
    			gap: 1.5em;
    			padding-bottom: 3.5em;
    			background-image: url('../images/arrow.png');
    			background-repeat: no-repeat;
    			background-position: bottom 1em center;
    			background-size: 12%;
    			@media screen and (min-width:768px) {
    				flex-direction: row;
    				justify-content: center;
    				align-items: center;
    				background-size: 6%;
    			}
    			@media screen and (max-width:767.98px) {
    				img:last-of-type {
    					max-width: 70%;
    					margin-left: auto;
    					margin-right: auto;
    				}
    			}
    		}*/ }
    @media screen and (min-width: 768px) {
      .s4 .inner {
        padding: 2em 2.5em; } }
    .s4 .inner h3 {
      border-bottom: 3px solid #0379c2;
      padding-bottom: .5em; }
  .s4 .action {
    width: 100%;
    margin-bottom: 1em; }
    .s4 .action th, .s4 .action td {
      width: 100%;
      display: block;
      vertical-align: baseline;
      line-height: 1;
      padding: .5em;
      font-weight: 700;
      text-align: center; }
    .s4 .action th {
      background-color: #0379c2;
      color: white;
      border: 2px solid #0379c2;
      font-size: 1.2em; }
    .s4 .action td {
      border: 2px solid #0379c2;
      color: #0379c2; }
    @media screen and (min-width: 768px) {
      .s4 .action {
        font-size: 165%; }
        .s4 .action th {
          width: 30%;
          display: table-cell;
          padding: 1em; }
        .s4 .action td {
          width: 70%;
          display: table-cell;
          padding: 1em;
          text-align: left; } }
    .s4 .action .head {
      text-align: center;
      display: block;
      width: 100%; }
    .s4 .action.style-2 th {
      background-color: #f76e18;
      color: white;
      border-color: #f76e18; }
    .s4 .action.style-2 td {
      border-color: #f76e18;
      color: #f76e18; }

.s5 .copy {
  font-size: 1.15em;
  line-height: 1.4; }
  @media screen and (min-width: 768px) {
    .s5 .copy {
      font-size: 1.65em;
      text-align: center; } }
  @media screen and (min-width: 1200px) {
    .s5 .copy {
      font-size: 3em;
      padding-bottom: 1em; } }

#footer > section {
  padding: 3em 0.5em;
  background-color: #f8f6f0; }
  #footer > section > .contents {
    display: flex;
    flex-direction: column;
    gap: 2em; }
    @media screen and (min-width: 768px) {
      #footer > section > .contents {
        flex-direction: row;
        gap: 5em; } }
#footer .d-flex {
  gap: 1em;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; }
  #footer .d-flex > * {
    width: 45%;
    height: auto;
    max-width: 210px; }
  @media screen and (min-width: 768px) {
    #footer .d-flex {
      width: 70%;
      flex-wrap: nowrap; } }
#footer .address {
  text-align: center; }
  @media screen and (min-width: 768px) {
    #footer .address {
      text-align: left; } }
#footer address {
  padding: .5em;
  text-align: center;
  margin-bottom: 0;
  line-height: 1;
  font-size: 85%; }

section h2:first-child,
.contents {
  width: 95%;
  margin-left: auto;
  margin-right: auto; }

/* 以下は画面サイズが768px以下になったら適応されます */
/* 以下は画面サイズが768px〜1024pxまでのあいだに適応されます */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .contents.thin {
    max-width: 80%; } }
/* 以下は画面サイズが1024px以上になったら適応されます */
@media screen and (min-width: 1224px) {
  section h2:first-child,
  .contents {
    width: 1200px; }
    section h2:first-child.thin,
    .contents.thin {
      max-width: calc( 1200px * 0.7 ); } }
.colums {
  margin-bottom: 1.5em; }
  .colums a {
    margin: 1em;
    display: block; }
  @media screen and (min-width: 768px) {
    .colums {
      display: flex;
      flex-direction: row;
      gap: 2em; }
      .colums .colum:first-of-type {
        width: 65%; } }