html {
  font-size: 62.5%;
}
body {
  background: #fff;
  color: #333;
  font: 1.6em 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  /* font: 1.6em "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; */
  line-height: 1.5;
  margin: 0;
}
.wrap {
  margin: auto;
  width: 100%;
}
.clearfix:after {
  content: "";
  clear: both;
  display: block
}
img {
  max-width: 100%;
  vertical-align: bottom;
}

/* list */
ul {
  list-style: none;
  padding: 0;
}

/* link */
a:link,a:visited,a:active {
  color: #3b3f4a;
  text-decoration: none;
}
a:hover {
  color: #00abeb;
}
a img:hover {
  filter: alpha(opacity=70);
  -webkit-transition: 0.3s;
  opacity: 0.7;
  transition: 0.3s;
}

/* pagetop */
.pagetop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 60px;
  height: 60px;
  background: bottom / cover no-repeat url(../img/pagetop.svg);
  display: block;
  opacity: 0.8;
}
.pagetop a {
  display: block;
  height: 60px;
  width: 60px;
}
.pagetop:hover {
  filter: alpha(opacity=70);
  -webkit-transition: 0.3s;
  opacity: 0.7;
  transition: 0.3s;
}

/* font */
.serif {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

/* color */
.c-f {color: #fff}
.c-0 {color: #000}

/* font-size */
.fs-4  {font-size: 0.4rem}
.fs-5  {font-size: 0.5rem}
.fs-6  {font-size: 0.6rem}
.fs-7  {font-size: 0.7rem}
.fs-8  {font-size: 0.8rem}
.fs-9  {font-size: 0.9rem}
.fs-10 {font-size: 1.0rem}
.fs-11 {font-size: 1.1rem}
.fs-12 {font-size: 1.2rem}
.fs-14 {font-size: 1.4rem}
.fs-16 {font-size: 1.6rem}
.fs-18 {font-size: 1.8rem}
.fs-20 {font-size: 2.0rem}
.fs-22 {font-size: 2.2rem}
.fs-24 {font-size: 2.4rem}
.fs-26 {font-size: 2.6rem}
.fs-28 {font-size: 2.8rem}
.fs-30 {font-size: 3.0rem}
.fs-32 {font-size: 3.2rem}
.fs-34 {font-size: 3.4rem}
.fs-36 {font-size: 3.6rem}
.fs-38 {font-size: 3.8rem}
.fs-40 {font-size: 4.0rem}
.fs-42 {font-size: 4.2rem}
.fs-44 {font-size: 4.4rem}
.fs-46 {font-size: 4.6rem}
.fs-48 {font-size: 4.8rem}
.fs-50 {font-size: 5.0rem}
.fs-52 {font-size: 5.2rem}
.fs-54 {font-size: 5.4rem}
.fs-56 {font-size: 5.6rem}
.fs-58 {font-size: 5.8rem}
.fs-60 {font-size: 6.0rem}
.fs-62 {font-size: 6.2rem}
.fs-64 {font-size: 6.4rem}
.fs-66 {font-size: 6.6rem}
.fs-68 {font-size: 6.8rem}
.fs-70 {font-size: 7.0rem}
.fs-72 {font-size: 7.2rem}

/* font-weight */
.fw-1 {font-weight: 100}
.fw-2 {font-weight: 200}
.fw-3 {font-weight: 300}
.fw-4 {font-weight: 400}
.fw-5 {font-weight: 500}
.fw-6 {font-weight: 600}
.fw-7 {font-weight: 700}
.fw-8 {font-weight: 800}
.fw-9 {font-weight: 900}

/* margin */
.mt-2  {margin-top:   2px}
.mt-4  {margin-top:   4px}
.mt-8  {margin-top:   8px}
.mt-12 {margin-top:  12px}
.mt-16 {margin-top:  16px}
.mt-32 {margin-top:  32px}
.mt-64 {margin-top:  64px}
.mt-64 {margin-top:  96px}
.mt-128{margin-top: 128px}
.mb-2  {margin-bottom:   2px}
.mb-4  {margin-bottom:   4px}
.mb-8  {margin-bottom:   8px}
.mb-12 {margin-bottom:  12px}
.mb-16 {margin-bottom:  16px}
.mb-32 {margin-bottom:  32px}
.mb-64 {margin-bottom:  64px}
.mb-96 {margin-bottom:  96px}
.mb-128{margin-bottom: 128px}

/* padding */
.pt-2  {padding-top:   2px}
.pt-4  {padding-top:   4px}
.pt-8  {padding-top:   8px}
.pt-12 {padding-top:  12px}
.pt-16 {padding-top:  16px}
.pt-32 {padding-top:  32px}
.pt-64 {padding-top:  64px}
.pt-96 {padding-top:  96px}
.pt-128{padding-top: 128px}
.pb-2  {padding-bottom:   2px}
.pb-4  {padding-bottom:   4px}
.pb-8  {padding-bottom:   8px}
.pb-12 {padding-bottom:  12px}
.pb-16 {padding-bottom:  16px}
.pb-32 {padding-bottom:  32px}
.pb-64 {padding-bottom:  64px}
.pb-96 {padding-bottom:  96px}
.pb-128{padding-bottom: 128px}

/* text-align */
.t-c {text-align: center}
.t-l {text-align:   left}
.t-r {text-align:  right}

/* tips */
.underline {
  background: linear-gradient(transparent 70%, #ff0 0%);
}

h2 {
  color: #00abeb;
  font-size: 3.2rem;
  font-weight: 400;
  margin-bottom: 16px;
}

.o-red {
  color: #e64e32;
}

/*notes*/
header .header__top__wrap {
  padding: 8px 0;
  width: 100%;
}
header .header__top__wrap .header__top {
  align-items: center;
  color: #00abeb;
  display: flex;
  font-weight: 600;
  justify-content: space-between;
  margin: auto;
  max-width: 1000px;
}
header .header__top__wrap .header__top .lang {
  background: #fff;
  border: 1px solid #00a6e6;
  color: #00a6e6;
  margin-left: 1em;
  padding: 0 4px;
}
.lang a:link,.lang a:visited,.lang a:active .lang a:hover {
  color: #00a6e6;
}
header .header__top__wrap .header__top .toggle_btn {
  position: relative;
  width: 50px;
  height: 30px;
  transition: all .5s;
  cursor: pointer;
  z-index: 3;
}
header .header__top__wrap .header__top .toggle_btn span {
  position: absolute;
  background: #00abeb;
  display: block;
  width: 32px;
  height: 2px;
  transition: all .5s;
}
header .header__top__wrap .header__top .toggle_btn span:nth-child(1) {
  top: 4px;
}
header .header__top__wrap .header__top .toggle_btn span:nth-child(2) {
  top: 14px;
}
header .header__top__wrap .header__top .toggle_btn span:nth-child(3) {
  bottom: 4px;
}
header .header__top__wrap .header__top .open .toggle_btn span {
  background: #fff;
}
header .header__top__wrap .header__top .open .toggle_btn span:nth-child(1) {
  transform: translateY(10px) rotate(-45deg);
}
header .header__top__wrap .header__top .open .toggle_btn span:nth-child(2) {
  opacity: 0;
}
header .header__top__wrap .header__top .open .toggle_btn span:nth-child(3) {
  transform: translateY(-10px) rotate(45deg);
}
header .header__top__wrap .header__top nav {
  display: block;
  position: fixed;
  top: 0;
  left: -300px;
  bottom: 0;
  width: 300px;
  background: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  transition: all .5s;
  z-index: 3;
  opacity: 0;
}
header .header__top__wrap .header__top .open nav {
  left: 0;
  opacity: .8;
}
header .header__top__wrap .header__top nav .inner {
  padding: 4%;
}
header .header__top__wrap .header__top nav .inner ul li {
  border-bottom: 1px solid #f1f1f1;
}
header .header__top__wrap .header__top nav .inner ul li a {
  display: block;
  font-weight: 600;
  margin: 4px 0;
  padding: 4px 8px;
  transition-duration: 0.2s;
}
header .header__top__wrap .header__top nav .inner ul li a:hover {
  background: #00abeb;
  border-radius: 4px;
  color: #fff;
}
header .header__top__wrap .header__top #mask {
  display: none;
  transition: all .5s;
}
header .header__top__wrap .header__top .open #mask {
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  cursor: pointer;
  display: block;
  width: 100%;
  height: 100%;
  opacity: .7;
  z-index: 2;
}

/*notes*/
.g_nav {
  background: #4c4948;
}
.g_nav ul {
  position: relative;
  color: #fff;
  display: flex;
  font-size: 2.2rem;
  font-weight: 500;
  justify-content: center;
}
.g_nav ul li {
  margin: 0 16px;
  padding: 12px 8px 0;
}
.g_nav a:link,.g_nav a:visited,.g_nav a:active {
  color: #fff;
}
.g_nav a:hover, header {
  color: #d7e4e6;
}
.g_nav ul li.t1 {
  border-bottom: 3px solid #ff0;
  color: #ff0;
  padding-bottom: 9px;
}
.g_nav ul li.t2 {
  padding-bottom: 12px;
}
.g_nav li ul {
  position: absolute;
  top: 57px;
  left: 0px;
  background: #a3afbe;
  padding: 0;
  width: 100%;
}
.g_nav li li {
  height: 0;
  margin: 0 16px;
  overflow: hidden;
  padding: 0 6px 0;
  transition: .5s;
}
.g_nav li:hover > ul > li {
  height: 4rem;
  overflow: visible;
  padding: 6px 6px 0;
}

/*notes*/
.s_nav {
  background: #a3afbe;
}
.s_nav ul {
  color: #fff;
  display: flex;
  font-size: 2.0rem;
  font-weight: 500;
  justify-content: center;
}
.s_nav ul li {
  margin: 0 16px;
  padding: 6px 6px 0;
}
.s_nav a:link,.g_nav a:visited,.g_nav a:active {
  color: #fff;
}
.s_nav a:hover, header {
  color: #4c4948;
}
.s_nav ul li.t1 {
  border-bottom: 2px solid #fff;
  color: #fff;
  padding-bottom: 4px;
}

/*notes*/
.breadcrumb {
  margin-top: 64px;
}
.breadcrumb ol {
  font-size: 1.4rem;
  margin: 4px auto;
  max-width: 1000px;
  padding: 0 1em;
}
.breadcrumb li {
  display: inline;
}
.breadcrumb li:after {
  content: '>';
  font-size: 1.2rem;
  padding: 0 0.5em;
}
.breadcrumb li:last-child:after {
  content: '';
}
.breadcrumb li a {
  color: #d80012;
}

/*notes*/
footer {
  background: #ecedf0;
  color: #80889b;
  padding: 46px 2%;
}
footer a:link, footer a:visited, footer a:active {
  color: #80889b;
}
footer a:hover {
  color: #00abeb;
}
footer .b1__wrap {
  margin: auto;
  max-width: 1000px;
}
footer .b1__wrap  ul {
  display: flex;
  padding-bottom: 8px;
}
footer .b1__wrap  ul li {
  margin-right: 2em;
  width: 160px;
}
footer .b1__wrap  p {
  margin-top: 64px;
}

@media screen and (max-width: 720px){
.header__top__wrap {
  padding: 8px 0;
}
.header__top__wrap .h_logo {
  margin-left: 5%;
  width: 40%;
}

/*notes*/
header .header__top__wrap .header__top .lang__wrap {
  margin-left: auto;
  margin-right: 24px;
}

/*notes*/
footer {
  padding: 32px 5%;
}
footer .b1__wrap  ul {
  display: block;
  padding-bottom: 12px;
}
footer .b1__wrap  ul li {
  margin-right: 0;
  padding-bottom: 4px;
  width: 100%;
}
footer .b1__wrap  p {
  margin-top: 32px;
  text-align: center;
}
}