@charset "utf-8";

/* ===================================================================== */
/* Base * /
/* ===================================================================== */
html {
  height: 100%;
  font-size: 62.5%;
}

body {
  width: 100%;
  height: 100%;
  font-family: /*-apple-system, BlinkMacSystemFont,*/ 'Helvetica Neue', Helvetica,
  '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック','Yu Gothic',
  'Hiragino Kaku Gothic ProN','メイリオ', arial, Meiryo,
  'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size: 1.6rem;
  line-height: 1.8;
  text-align: justify;
  text-justify: inter-ideograph;
  -webkit-font-feature-settings: "pkna";
  font-feature-settings: "pkna";
  letter-spacing: .16em;
  color: #2a2f3c;
}

section {
  padding: 6.4rem 0;
  position: relative;
  z-index: 1;
}

img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.wrapper {
  width: 100%;
  background-color: #fff;
  position: relative;
}

.content {
  position: relative;
  z-index: 1;
}

.container {
  width: 1240px;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
  margin: 0 auto;
}

.text-box {
  width: 100%;
  max-width: 720px;
  margin: 0 auto 4.8rem;
}

/* -----------------------------------------------------------
fot Smartphone
----------------------------------------------------------- */
@media only screen and (max-width: 1480px) {

  .container {
    padding: 0 20px;
  }

}

@media only screen and (max-width: 1240px) {

  html {
    font-size: 58.5937%;
  }

  .container {
    width: 90%;
    padding: 0;
  }

}

@media only screen and (max-width: 560px) {

  html {
    font-size: 54.6875%;
  }

}

@media only screen and (max-width: 480px) {

  section {
    padding: 6.4rem 0;
  }

}

/* ===================================================================== */
/* Link * /
/* ===================================================================== */
a, a:link, a:active {
  color: #2a2f3c;
  text-decoration: underline;
  outline: none;
  transition: .3s;
}

a:hover {
  color: #0c6c84;
  text-decoration: none;
  transition: .3s;
}

a img {
  border: none;
  transition: .3s;
}

a:hover img {
  transform: scale(1.02);
  opacity: .5;
  transition: .3s;
}

/* ===================================================================== */
/* Utility * /
/* ===================================================================== */
.fs-60 {font-size: 60%;}
.fs-65 {font-size: 65%;}
.fs-70 {font-size: 70%;}
.fs-75 {font-size: 75%;}
.fs-80 {font-size: 80%;}
.fs-85 {font-size: 85%;}
.fs-90 {font-size: 90%;}
.fs-95 {font-size: 95%;}
.fs-105 {font-size: 105%;}
.fs-110 {font-size: 110%;}
.fs-115 {font-size: 115%;}
.fs-120 {font-size: 120%;}
.fs-130 {font-size: 130%;}
.fs-140 {font-size: 140%;}
.fs-150 {font-size: 150%;}
.fs-160 {font-size: 160%;}
.fs-170 {font-size: 170%;}
.fs-180 {font-size: 180%;}
.fs-190 {font-size: 190%;}
.fs-200 {font-size: 200%;}

.mgB-08 {margin-bottom: .8rem;}
.mgB-16 {margin-bottom: 1.6rem;}
.mgB-24 {margin-bottom: 2.4rem;}
.mgB-32 {margin-bottom: 3.2rem;}
.mgB-40 {margin-bottom: 4.0rem;}
.mgB-48 {margin-bottom: 4.8rem;}
.mgB-64 {margin-bottom: 6.4rem;}

.font-B {font-weight: bold;}

.text-L {text-align: left !important;}
.text-C {text-align: center !important;}
.text-R {text-align: right !important;}

.float-L {float: left;}
.float-R {float: right;}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.bg-GR {background-color: #0c6c84;}
.bg-GY {background-color: #f2f2f2;}

.empha {
  color: #ffd750;
  font-size: 1.2em;
}

.marker {
  background: linear-gradient(transparent 70%, #ffd750 30%);
}

.mincho {
  font-family: '游明朝', 'Yu Mincho', 'ヒラギノ明朝 ProN W3',
  'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
}

.wf-sawarabimincho {font-family: "Sawarabi Mincho"; }
.m-plus {font-family: 'M PLUS 1p', sans-serif;}
.o-sans {font-family: 'Open Sans', sans-serif;}
.noto-sans {font-family: 'Noto Sans JP', sans-serif;}
.ms-delafield {font-family: 'Mrs Saint Delafield', cursive;}
.tangerine {font-family: 'Tangerine', cursive;}
.josefin-sans {font-family: 'Josefin Sans', sans-serif;}
.oswald {font-family: 'Oswald', sans-serif;}

/* -----------------------------------------------------------
 <br> Responsive
----------------------------------------------------------- */
@media screen and (min-width: 481px) {

  .br-sp {display: none;}

}

@media screen and (max-width: 480px) {

  .br-pc {display: none;}

}

/* ===================================================================== */
/* Effects * /
/* ===================================================================== */
/* .effectIn {
  transition: 1.0s;
  opacity: 0;
}
.effectOut {
  transition: 1.0s;
  opacity: 1.0;
}

.effectIn1 {
  transition: 1.0s;
  transform: translate(0, 60px);
  opacity: 0;
}
.effectOut1 {
  transition: 1.0s;
  transform: translate(0, 0px);
  opacity: 1.0;
}

.effectIn2 {
  transition: 1.0s;
  transform: translate(-60px, 0);
  opacity: 0;
}
.effectOut2 {
  transition: 1.0s;
  transform: translate(0, 0px);
  opacity: 1.0;
}

.effectIn3 {
  transition: 1.0s;
  transform: translate(60px, 0);
  opacity: 0;
}
.effectOut3 {
  transition: 1.0s;
  transform: translate(0, 0px);
  opacity: 1.0;
}

.effectIn4 {
  transition: 1.0s;
  transform: translate(0, -60px);
  opacity: 0;
}
.effectOut4 {
  transition: 1.0s;
  transform: translate(0, 0px);
  opacity: 1.0;
} */

@keyframes zoom {
  0% {
    transform: scale(1.0);
    filter: grayscale(1.0) opacity(.5) blur(6px);
  }
  100% {
    transform: scale(1.1);
    filter: grayscale(1.0) opacity(.5) blur(0);
  }
}

@keyframes scroll {
  0% {height: 0;}
  75% {height: 96px;}
  100% {height: 96px;}
}

@keyframes title {
  0% {color: transparent;}
  80% {color: transparent;}
  100% {color: #173149;}
}
@keyframes title-bg {
  0% {width: 0; left: 0;}
  50% {width: 100%; left: 0;}
  100% {width: 100%; left: 100%;}
}

@keyframes title-zoom {
  0% {width: 120%; height: 120%; top: -10%; left: -10%;}
  100% {width: 100%; height: 100%; top: 0; left: 0;}
}
@keyframes title-zoom-TL {
  0% {top: -10%; left: -10%;}
  100% {top: 0; left: 0;}
}
@keyframes title-zoom-TR {
  0% {top: -10%; right: -10%;}
  100% {top: 0; right: 0;}
}
@keyframes title-zoom-BL {
  0% {left: -10%; bottom: -10%;}
  100% {left: 0; bottom: 0;}
}
@keyframes title-zoom-BR {
  0% {right: -10%; bottom: -10%;}
  100% {right: 0; bottom: 0;}
}

/* ===================================================================== */
/* Layout * /
/* ===================================================================== */
.flex-C {
  display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-flex-flow: row nowrap;
  display: flex;
  justify-content: center;
  flex-flow: row nowrap;
}
.flex-L {
  display: -webkit-flex;
  -webkit-justify-content: flex-start;
  -webkit-flex-flow: row nowrap;
  display: flex;
  justify-content: flex-start;
  flex-flow: row nowrap;
}
.flex-R {
  display: -webkit-flex;
  -webkit-justify-content: flex-start;
  -webkit-flex-flow: row-reverse nowrap;
  display: flex;
  justify-content: flex-start;
  flex-flow: row-reverse nowrap;
}
.flex-wrap {
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}
.flex-column {
  -webkit-flex-flow: column nowrap;
  flex-flow: column nowrap;
}
.flex-R-column {
  display: -webkit-flex;
  -webkit-justify-content: flex-start;
  -webkit-flex-flow: column-reverse nowrap;
  display: flex;
  justify-content: flex-start;
  flex-flow: column-reverse nowrap;
}

/* ===================================================================== */
/* Object Fit * /
/* ===================================================================== */
.object-fit {
  object-fit: cover;
  font-family: 'object-fit: cover;'; /*IE対策*/
}

.img-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.img-wrap::before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 66.6666%;
}
.img-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.img-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: 'object-fit: cover;'; /*IE対策*/
  object-position: center center;
}

/* ===================================================================== */
/* Header * /
/* ===================================================================== */
#header {
  width: 100%;
  position: fixed;
  z-index: 9999;
}

.header-menu {
  background-color: transparent;
  transition: .3s;
}

.header-menu li {
  display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-flex-flow: column nowrap;
  display: flex;
  justify-content: center;
  flex-flow: column nowrap;
  background-color: transparent;
  transition: .3s;
}
.header-menu li a {
  display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-flex-flow: column nowrap;
  display: flex;
  justify-content: center;
  flex-flow: column nowrap;
  height: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  color: #fff;
  font-size: 1.4rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: .16rem;
  padding: 1.6rem;
  transition: .3s;
}

.header-menu li a:hover {
  color: #d63d5f;
}
.lp-b .header-menu li a:hover {
  color: #7dab36;
}

.header-menu li.header-logo {
  margin-right: auto;
}
.header-menu li.header-logo a {
  padding: 1.6rem;
  text-decoration: none;
  position: relative;
}
.header-menu li.header-logo a img {
  width: 160px;
}

.header-menu li.header-doc-dl {
  background-color: #d63d5f;
  transition: .3s;
}
.lp-b .header-menu li.header-doc-dl {
  background-color: #dcad1b;
  transition: .3s;
}
.header-menu li.header-contact {
  background-color: #0c6c84;
  transition: .3s;
}
.header-menu li.header-doc-dl:hover {
  background-color: #f0bf29;
  transition: .3s;
}
.lp-b .header-menu li.header-doc-dl:hover {
  background-color: #7dab36;
  transition: .3s;
}
.header-menu li.header-contact:hover {
  background-color: #2a2f3c;
  transition: .3s;
}
.header-menu li.header-doc-dl a,
.header-menu li.header-contact a {
  transition: .3s;
}
.header-menu li.header-doc-dl a:hover,
.header-menu li.header-contact a:hover {
  color: #fff;
  transition: .3s;
}

/* ---------------------------------------------
Header Smaller
--------------------------------------------- */
.smaller .header-menu,
.smaller .header-menu li {
  background-color: #2a2f3c;
  transition: .3s;
}
.smaller .header-menu li.header-doc-dl {
  background-color: #d63d5f;
}
.lp-b .smaller .header-menu li.header-doc-dl {
  background-color: #dcad1b;
}
.smaller .header-menu li.header-contact {
  background-color: #0c6c84;
}

.smaller .header-menu {
  background-color: #2a2f3c;
  box-shadow: 0 0 24px rgba(0,0,0,.2);
}

.smaller .header-menu li a {
  font-size: .8em;
  padding: 1.28rem 1.6rem;
  transition: .3s;
}

.smaller .header-menu li.header-logo img {
  width: 120px;
  transition: .3s;
}

.smaller .header-menu li.header-doc-dl:hover {
  background-color: #f0bf29;
  transition: .3s;
}
.lp-b .smaller .header-menu li.header-doc-dl:hover {
  background-color: #7dab36;
  transition: .3s;
}
.smaller .header-menu li.header-contact:hover {
  background-color: #2a2f3c;
  transition: .3s;
}


/* ===================================================================== */
/* Drower Menu * /
/* ===================================================================== */
.drawer-box .drawer-hamburger {
  width: 3.2rem;
  padding-top: 2rem;
  padding-left: 3.2rem;
  padding-right: 3.2rem;
  padding-bottom: 3rem;
  margin-top: 0;
  background-color: #0c6c84;
  z-index: 9999;
  transition: .3s;
}

.drawer-box .drawer-hamburger-icon,
.drawer-box .drawer-hamburger-icon::before,
.drawer-box .drawer-hamburger-icon::after {
  height: 3px;
  background-color: #fff;
}
.drawer-box .drawer-hamburger-icon::after {
  width: 80%;
  margin-left: 20%;
}
.drawer-open .drawer-box .drawer-hamburger-icon {
  background-color: transparent;
}
.drawer-open .drawer-box .drawer-hamburger-icon::before,
.drawer-open .drawer-box .drawer-hamburger-icon::after {
  height: 3px;
  background-color: #fff;
}
.drawer-open .drawer-box .drawer-hamburger-icon::after {
  width: 100%;
  margin-left: 0;
}

.drawer--top.drawer-open .drawer-box .drawer-nav {
  padding-top: 10%;
  padding-bottom: 10%;
  background-color: #0c6c84;
  top: -1px;
  z-index: 9998;
}

.drawer-box .header-logo {
  border-bottom: none;
  margin: 0 auto 2.4rem;
}
.drawer-box .header-logo img {
  width: 18rem;
  margin: 2.4rem auto;
}

.drawer-box .drawer-menu {
  padding: 1.6rem;
}

.drawer-box .drawer-menu li {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  position: relative;
}
.drawer-box .drawer-menu li.header-logo {
  border-bottom: none;
}

.drawer-box .drawer-menu li::before {
  font-family: "Material Icons";
  content: "\e5cc";
  position: absolute;
  top: .8rem;
  right: .8rem;
  color: #fff;
  font-size: 2rem;
  z-index: -1;
}
.drawer-box .drawer-menu li.header-logo::before {
  content: "";
}

.drawer-box .drawer-menu li a {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  padding: .8rem;
  padding-right: 1.6rem;
}

.drawer-box .drawer-menu li:hover a,
.drawer-box .drawer-menu li:hover::before {
  color: #f0bf29;
}
.drawer-box .drawer-menu li a:hover {
  border-bottom: none;
}

.drawer-open .drawer-overlay {
  z-index: 9000;
  background-color: rgba(42,47,60,.8);
}

@media only screen and (min-width: 1201px) {

  .drawer-box {
    display: none;
  }

}

@media only screen and (max-width: 1200px) {

  .header-menu li:not(.header-logo) {
    display: none;
  }

}

/* -----------------------------------------------------------
Header Scroll
----------------------------------------------------------- */
.smaller .drawer-box .drawer-hamburger {
  padding-top: 1.2rem;
  padding-bottom: 2.3rem;
  transition: .3s;
}

.smaller .drawer-box .header-register,
.smaller .drawer-box .header-login,
.smaller .drawer-box .header-contact {
  background-color: transparent;
}
.smaller .drawer-box .drawer-menu li:hover a,
.smaller .drawer-box .drawer-menu li:hover::before {
  color: #f0bf29;
}

/* ===================================================================== */
/* Title * /
/* ===================================================================== */
.title-1, .title-2 {
  font-family: 'Josefin Sans', 'Noto Sans JP', sans-serif;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}
.lp-b .title-1, .title-2 {
  font-family: 'Oswald', 'Noto Sans JP', sans-serif;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

.title-1 {
  text-align: center;
  margin-bottom: 4.8rem;
  position: relative;
}
.title-1 h2 {
  font-size: 4rem;
  font-weight: bold;
  line-height: 1.5;
  padding-bottom: 2.4rem;
}
.title-1 > span {
  display: block;
  font-family: 'Josefin Sans', sans-serif;
  color: #0c6c84;
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: .06rem;
  line-height: 1.2;
  margin-bottom: .8rem;
}
.lp-b .title-1 > span {
  font-family: 'Oswald', sans-serif;
}

.title-2 {
  font-family: 'Josefin Sans', sans-serif;
  color: #fff;
  font-size: 3.6rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  padding: 6.4rem .5rem 3.2rem;
  margin-bottom: 6rem;
  background-color: #2a2f3c;
  position: relative;
}
.title-2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 0;
  height: 0;
  bottom: -28px;
  border-style: solid;
  border-width: 30px 30px 0 30px;
  border-color: #2a2f3c transparent transparent transparent;
}
.lp-b .title-2 > span {
  font-family: 'Oswald', sans-serif;
}

/* ===================================================================== */
/* Section Line * /
/* ===================================================================== */
@keyframes scroll {
  0% {height: 0;}
  75% {height: 80px;}
  100% {height: 80px;}
}

.line {
  position: relative;
}

.line::after {
  content: "";
  width: 2px;
  height: 80px;
  background-color: #0c6c84;
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
}

#intro.line::after,
#trouble.line::after {
  background-color: #fff;
  animation: scroll 2.0s ease-in infinite;
  -webkit-animation: scroll 2.0s ease-in infinite;
  -moz-animation: scroll 2.0s ease-in infinite;
}
#about.line::after {
  background-color: #fff;
}

/* ===================================================================== */
/* Link Box * /
/* ===================================================================== */
.link-box {
  width: 100%;
  max-width: 480px;
  text-align: center;
  margin: 0 auto 4.8rem;
}
.link-box a {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  text-decoration: none;
  padding: 2rem 6.4rem;
  padding-left: 5.6rem;
  box-sizing: border-box;
  background-color: #d63d5f;
  border-radius: 4.8rem;
  box-shadow: 0 0 12px rgba(0,0,0,.2);
  overflow: hidden;
  position: relative;
}
.link-box a::before {
  font-family: "Material Icons";
  content: "\e5cc";
  color: #d63d5f;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-indent: 1px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 0;
  right: 2.4rem;
  bottom: 0;
  margin: auto;
  transition: .3s;
}
.link-box a::after {
  content: "";
  width: 100%;
  height: 480px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  transform: scale(0);
  z-index: -1;
}
.link-box a:hover {
  transform: scale(.98);
  background-color: #f0bf29;
  box-shadow: 0 0 6px rgba(0,0,0,.2);
}
.link-box a:hover::before {
  color: #f0bf29;
  transition: .3s;
}

@keyframes hover {
  0% {
    background-color: rgba(255,255,255,1.0);
    transform: scale(0);
  }
  75% {
    background-color: rgba(255,255,255,.8);
    transform: scale(.5);
  }
  100% {
    background-color: rgba(214,61,95,0);
    transform: scale(1.0);
  }
}

.link-box a:hover::after {
  animation: hover .5s ease-out;
  -webkit-animation: hover .5s ease-out;
  -moz-animation: hover .5s ease-out;
  transform: scale(1.0);
}

@media only screen and (max-width: 560px) {

  .link-box a {
    font-size: .9em;
    padding-left: 4.6rem;
  }

}

.lp-b .link-box a {
  background-color: #dcad1b;
}
.lp-b .link-box a::before {
  color: #dcad1b;
}
.lp-b .link-box a:hover {
  background-color: #7dab36;
}
.lp-b .link-box a:hover::before {
  color: #7dab36;
}

/* ===================================================================== */
/* Page Top * /
/* ===================================================================== */
.page-top {
  position: absolute;
  right: 1.6rem;
  bottom: 1.6rem;
  margin: auto;
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  background: #2a2f3c;
  box-sizing: border-box;
  z-index: 9999;
}

.page-top i {
  color: #fff;
  font-size: 2.8rem;
  width: 100%;
  height: 100%;
  text-align: center;
  padding-top: 1.6rem;
  box-sizing: border-box;
  cursor: pointer;
}
.page-top i:hover {
  padding-top: 1.2rem;
}

/* ===================================================================== */
/* Footer * /
/* ===================================================================== */
#footer {
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  background-color: #2a2f3c;
  position: relative;
  z-index: 1;
}
p.copyright {
  color: #fff;
  font-size: 1rem;
  letter-spacing: .08rem;
  text-align: center;
  padding: 1.6rem 0;
}