@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500,700|Noto+Sans+JP&display=swap&subset=japanese");
html,
body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dt,
dd,
table,
th,
td,
form,
fieldset,
header,
section,
article,
aside,
footer,
figure,
figcaption,
nav {
  margin: 0px;
  padding: 0px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section,
summary {
  display: block;
}

@-ms-viewport {
  width: extend-to-zoom 100%;
  zoom: 1;
  user-zoom: zoom;
}

@-o-viewport {
  width: extend-to-zoom 100%;
  zoom: 1;
  user-zoom: zoom;
}

@viewport {
  width: extend-to-zoom 100%;
  zoom: 1;
  user-zoom: zoom;
}

img {
  max-width: 100%;
}

input,
textarea,
select,
button {
  outline: none;
}

label,
select,
[type="button"],
[type="checkbox"],
[type="radio"],
[type="submit"],
[type="reset"],
[type="file"],
[type="number"],
button {
  cursor: pointer;
}

html {
  overflow: scroll;
  overflow: -moz-scrollbars-vertical;
  overflow-x: scroll;
}

ul,
ol {
  list-style: none;
}

p,
li,
dt,
dd,
th,
td,
pre {
  -ms-line-break: strict;
  line-break: strict;
  -ms-word-break: break-strict;
  word-break: break-strict;
}

table {
  border-collapse: collapse;
  border-spacing: 0px;
}

img {
  border: none;
  vertical-align: middle;
}

input,
button,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
}

/*----------------------------------------------------------------end reset */
/*! Type: YakuHanJPs - Based on Noto Sans CJK JP */
@font-face {
  font-family: "YakuHanJPs";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("../font/YakuHanJPs/YakuHanJPs-Thin.eot");
  src: url("../font/YakuHanJPs/YakuHanJPs-Thin.woff2") format("woff2"), url("../font/YakuHanJPs/YakuHanJPs-Thin.woff") format("woff");
  unicode-range: U+3008-3011, U+3014-3015, U+ff08-ff09, U+ff3b, U+ff3d, U+ff5b, U+ff5d;
}

@font-face {
  font-family: "YakuHanJPs";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../font/YakuHanJPs/YakuHanJPs-Light.eot");
  src: url("../font/YakuHanJPs/YakuHanJPs-Light.woff2") format("woff2"), url("../font/YakuHanJPs/YakuHanJPs-Light.woff") format("woff");
  unicode-range: U+3008-3011, U+3014-3015, U+ff08-ff09, U+ff3b, U+ff3d, U+ff5b, U+ff5d;
}

@font-face {
  font-family: "YakuHanJPs";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../font/YakuHanJPs/YakuHanJPs-DemiLight.eot");
  src: url("../font/YakuHanJPs/YakuHanJPs-DemiLight.woff2") format("woff2"), url("../font/YakuHanJPs/YakuHanJPs-DemiLight.woff") format("woff");
  unicode-range: U+3008-3011, U+3014-3015, U+ff08-ff09, U+ff3b, U+ff3d, U+ff5b, U+ff5d;
}

@font-face {
  font-family: "YakuHanJPs";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../font/YakuHanJPs/YakuHanJPs-Regular.eot");
  src: url("../font/YakuHanJPs/YakuHanJPs-Regular.woff2") format("woff2"), url("../font/YakuHanJPs/YakuHanJPs-Regular.woff") format("woff");
  unicode-range: U+3008-3011, U+3014-3015, U+ff08-ff09, U+ff3b, U+ff3d, U+ff5b, U+ff5d;
}

@font-face {
  font-family: "YakuHanJPs";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../font/YakuHanJPs/YakuHanJPs-Medium.eot");
  src: url("../font/YakuHanJPs/YakuHanJPs-Medium.woff2") format("woff2"), url("../font/YakuHanJPs/YakuHanJPs-Medium.woff") format("woff");
  unicode-range: U+3008-3011, U+3014-3015, U+ff08-ff09, U+ff3b, U+ff3d, U+ff5b, U+ff5d;
}

@font-face {
  font-family: "YakuHanJPs";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../font/YakuHanJPs/YakuHanJPs-Bold.eot");
  src: url("../font/YakuHanJPs/YakuHanJPs-Bold.woff2") format("woff2"), url("../font/YakuHanJPs/YakuHanJPs-Bold.woff") format("woff");
  unicode-range: U+3008-3011, U+3014-3015, U+ff08-ff09, U+ff3b, U+ff3d, U+ff5b, U+ff5d;
}

@font-face {
  font-family: "YakuHanJPs";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../font/YakuHanJPs/YakuHanJPs-Black.eot");
  src: url("../font/YakuHanJPs/YakuHanJPs-Black.woff2") format("woff2"), url("../font/YakuHanJPs/YakuHanJPs-Black.woff") format("woff");
  unicode-range: U+3008-3011, U+3014-3015, U+ff08-ff09, U+ff3b, U+ff3d, U+ff5b, U+ff5d;
}

/* COMMON -----------------------------------*/
html {
  font-size: 62.5%;
  font-family: "Noto Sans JP", YakuHanJPs, -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  color: #00469b;
  overflow-x: hidden;
}

body {
  background: #fff;
  overflow-wrap: break-word;
  overflow-x: hidden;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
  font-size: 1.4rem;
}

header,
#contents,
#footermenu,
footer {
  width: 100%;
}

@media screen and (min-width: 960px) {
  body {
    font-size: 1.6rem;
  }
  header,
  #contents,
  footer {
    width: 100%;
    margin: 0 auto;
  }
}

header {
  padding: 10px 10px 60px 10px;
  text-align: center;
  position: relative;
}

header h1 {
  font-family: "M PLUS 1p", sans-serif;
  font-size: 5rem;
  margin: 0 auto 4rem auto;
}

header .rounded {
  background: rgba(0, 159, 232, 0.5);
  padding: 0.2em 0;
  border-radius: 1em;
  width: 20em;
  margin: 1em auto 0 auto;
  font-size: 1.8rem;
}

.logo-area {
  max-width: 960px;
  margin: 0 auto;
}

.logo-area .logo {
  text-align: center;
  margin: 40px auto;
}

.logo-area .logo img {
  width: 240px;
}

.contents-head {
  max-width: 960px;
  min-height: 550px;
  margin: 0 auto;
  background: url(../img/main_img.png) no-repeat right bottom;
  background-size: 500px auto;
  overflow: visible;
}

.contents-head .lines {
  font-size: 2rem;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  padding: 0.3em;
  width: 16em;
  margin: 1em auto;
}

.contents-head .main-copy {
  height: 400px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  padding-right: 300px;
}

.contents-head .main-copy p {
  font-size: 2.4rem;
  text-align: left;
}

section {
  margin: 0 auto;
  max-width: 960px;
  min-height: 300px;
}

section h2 {
  font-family: "M PLUS 1p", sans-serif;
  font-size: 4rem;
  text-align: center;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.flex-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.grd-area, header {
  background: -webkit-gradient(linear, left bottom, left top, from(#0054af), to(#003887));
  background: linear-gradient(0deg, #0054af 0%, #003887 100%);
  color: #fff;
}

.area2 p,
.area3 p,
.area4 p,
.area5 p {
  line-height: 180% !important;
}

/*area1 --------------------------------------*/
.photo-bg {
  background: url(../img/photo_bg.jpg) center center no-repeat;
  background-size: cover;
}

.area1 {
  padding: 60px 0 30px 0;
  margin: 0 auto;
}

.area1 .txt {
  width: 18em;
  font-size: 2rem;
  line-height: 150%;
}

.area1 .img {
  width: 320px;
  opacity: 0;
}

/*area2 --------------------------------------*/
.area2 {
  padding: 60px 0 50px 0;
  margin: 0 auto;
}

.area2 h2 {
  margin-bottom: 1em;
}

.area2 .flex {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 2em;
}

.area2 .area2-txt {
  width: 30em;
  padding: 2em;
}

.area2 .area2-img {
  width: 250px;
}

.area2 .area2-img img {
  width: 100%;
}

h3 {
  font-weight: normal;
  font-size: 3rem;
  border-bottom: 1px solid #fff;
  margin-bottom: 1rem;
}

/*area3 --------------------------------------*/
.area3 {
  padding: 60px 0 0 0;
}

.area3 .flex {
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.area3 img {
  width: 466px;
}

.area3 .area3-txt {
  width: 25em;
}

.area3 .area3-txt h3 {
  border-bottom: 2px solid #00469b;
}

/*area4 --------------------------------------*/
.area4 {
  padding: 60px 0 40px 0;
}

.area4 h2 {
  margin-bottom: 1em;
}

.area4 .flex {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.area4 .flex .area4-txt {
  width: 17em;
}

.area4 .flex img {
  width: 300px;
  opacity: 0;
}

.area4 .bg_img4-1 {
  background: url(../img/area4_img01.png) no-repeat left center;
  background-size: contain;
}

.area4 .bg_img4-2 {
  background: url(../img/area4_img02.png) no-repeat right center;
  background-size: contain;
}

@media screen and (min-width: 960px) {
  .area4 .flex {
    width: 800px;
    margin: 0 auto;
  }
  .area4 .flex .area4-txt {
    font-size: 2rem;
  }
  .area4 .flex img {
    width: 400px;
    opacity: 0;
  }
}

/*area5 --------------------------------------*/
.area5 {
  padding: 60px 0;
}

.area5 h2 {
  font-size: 3rem;
  text-align: left;
  margin-bottom: 1em;
  padding: 0;
}

.area5 .flex {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.area5 .flex p {
  width: 24em;
}

/*footer --------------------------------------*/
footer {
  padding: 60px 0 0 0;
  text-align: center;
}

footer .qr-copy {
  margin-top: 3em;
}

footer .conpyright {
  margin: 4em auto 2em auto;
}

/*QR --------------------------------------*/
.qr-copy {
  margin-bottom: 1em;
  font-size: 2rem;
}

.qr-copy small {
  font-size: 1.2rem;
  display: block;
}

.qr-copy small.note {
  display: block;
  margin-top: 1rem;
}

.qr-area {
  border-top: 1px solid #fff;
  width: 960px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
}

.qr-area .qr {
  width: 45%;
  padding: 0 20px;
}

.qr-area .qr h4 {
  margin: 20px auto;
}

.qr-area .qr .qr-code {
  width: 50%;
  margin-right: 20px;
}

.qr-area .qr .bnr {
  text-align: left;
  width: 100%;
}

.qr-area .qr .bnr img {
  height: 65px;
  width: auto;
  margin-bottom: 10px;
}

.qr-area .qr .bnr small {
  display: block;
  text-align: left;
  font-size: 1rem;
}

dl {
  margin-top: 2em;
  text-align: left;
  font-size: 1.4rem;
}

dl dt {
  margin-bottom: 0.5em;
}

dl dd {
  margin-bottom: 1em;
}

dl dd p {
  text-indent: -1em;
  margin-left: 1em;
}

/*SP --------------------------------------*/
@media screen and (max-width: 768px) {
  .sp-off {
    display: none;
  }
  .pc-off {
    display: block;
  }
  section {
    width: 95vw;
  }
  section h2 {
    font-size: 2.4rem;
    line-height: 1.2;
  }
  .logo-area,
  .contents-head {
    width: 100%;
  }
  header h1 {
    font-size: 2.5rem;
  }
  header .rounded {
    font-size: 1.6rem;
  }
  .contents-head {
    width: 100%;
    min-height: inherit;
    background: none;
  }
  .contents-head .main-copy {
    height: inherit;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-right: 0;
  }
  .contents-head .main-copy:before {
    content: " ";
    display: block;
    background: url(../img/main_img_sp.png) no-repeat center top;
    background-size: contain;
    height: 260px;
    width: 120%;
  }
  .contents-head .main-copy p {
    font-size: 1.6rem;
    margin: 2em auto;
  }
  .qr-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
  }
  .qr-area .qr {
    width: 100%;
    padding: 0;
  }
  .qr-area .qr:last-child {
    margin-top: 1em;
    border-top: 1px dashed #fff;
  }
  .qr-copy {
    border-top: 1px solid #fff;
    padding-top: 1em;
    font-size: 1.6rem;
  }
  /*area1 --------------------------------------*/
  .photo-bg {
    background: url(../img/photo_bg.jpg) top center no-repeat;
    background-size: cover;
  }
  .area1 {
    padding: 30px 0 0 0;
    margin: 0 auto;
  }
  .area1 .txt {
    width: 75vw;
    font-size: 1.6rem;
    line-height: 150%;
    padding-top: 1em;
    padding-left: 2vw;
    /*&:before{
				content:"";
				display: block;
				background: url(../img/area1_img_sp.png) no-repeat center top;
				background-size:cover;
				height:200px;
				margin-bottom:1em ;
			}*/
  }
  .area1 .img {
    width: 40vw;
  }
  /*area2*/
  .area2 {
    padding: 30px 0 20px 0;
  }
  .area2 .flex .area2-txt {
    width: 100%;
    padding: 1em;
  }
  .area2 .flex .area2-img {
    width: 50%;
  }
  .area2 h3 {
    font-size: 2rem;
  }
  /*area3 --------------------------------------*/
  .area3 {
    padding: 30px 0 0 0;
  }
  .area3 .flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
  .area3 img {
    width: 466px;
  }
  .area3 .area3-txt {
    width: 100%;
    margin-top: 1em;
    margin-bottom: 30px;
  }
  .area3 .area3-txt h3 {
    font-size: 2rem;
    border-bottom: 2px solid #00469b;
  }
  /*area4 --------------------------------------*/
  .area4 {
    padding: 30px 0 40px 0;
  }
  .area4 h2 {
    margin-bottom: 1em;
  }
  .area4 .flex img {
    width: 50%;
  }
  /*area5 --------------------------------------*/
  .area5 {
    padding: 30px 0;
  }
  .area5 h2 {
    font-size: 2rem;
    text-align: left;
    margin-bottom: 1em;
    padding: 0;
  }
  .area5 .flex img {
    width: 50%;
  }
  .area5 .flex p {
    width: 100%;
  }
  /*footer --------------------------------------*/
  footer {
    padding: 30px 0 0 0;
  }
}

.text-divider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  --text-divider-gap: 1rem;
}

.text-divider::before,
.text-divider::after {
  content: '';
  height: 1px;
  background-color: #ccc;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.text-divider::before {
  margin-right: var(--text-divider-gap);
  margin-right: 1rem;
}

.text-divider::after {
  margin-left: var(--text-divider-gap);
  margin-left: 1rem;
}
/*# sourceMappingURL=style.css.map */