@charset "UTF-8";

/* --------------------------------

  reset

-------------------------------- */
@import url("https://fonts.googleapis.com/css?family=Rock+Salt");
@import url("https://fonts.googleapis.com/css?family=Anton");
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-style: normal;
  font-weight: normal;
  vertical-align: baseline;
}

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

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

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

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

a {
  color: #3bb8eb;
  border: none;
  text-decoration: none;
}

a:hover {
  color: #e75192;
  text-decoration: underline;
}

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

th, td {
  padding: 0;
  vertical-align: middle;
}

th {
  text-align: left;
}

li {
  list-style: none;
}

b, strong {
  font-weight: bold;
}

img, iframe, object {
  max-width: 100%;
}

hr {
  display: block;
  height: 0;
  margin: 0 0 1em;
  padding: 0;
  font-size: 1em;
  line-height: 0;
  border: 0;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

/* --------------------------------

  共通スタイル

-------------------------------- */
/* 共通見出し */
.main-heading,
.news-heading,
.seminar-heading {
  position: relative;
  margin-bottom: 1.5rem;
  padding: .5em .5em .3em .7em;
  line-height: 1.3;
  font-size: 1.5em;
  font-weight: 800;
  text-align: center;
  border-radius: 6px;
  border: 1px solid #3bb8eb;
  background-color: #fff;
}
@media screen and (min-width: 1101px), print {
  .main-heading,
  .news-heading,
  .seminar-heading {
    margin-bottom: 2rem;
    font-size: 1.8em;
    border-radius: 8px;
  }
}

.main-heading {
  text-align: left;
}
.main-heading:first-letter {
  color: #3bb8eb;
}
.main-heading .subtitle {
  display: inline-block;
  vertical-align: middle;
  margin: -.1em 0 0 .5em;
  font-size: .6em;
  font-weight: 800;
}

.subheading {
  display: block;
  position: relative;
  margin-bottom: .8em;
  padding-left: 35px;
  font-size: 1.2em;
  line-height: 1.2;
}
.subheading:before {
  content: "";
  display: block;
  position: absolute;
  top: -.2em;
  left: .1em;
  width: 25px;
  height: 25px;
  margin: auto;
  background: url(../img/base/title.png?v=1) center no-repeat;
  background-size: contain;
}

/* 共通リスト */
.main ul > li {
  margin-left: 2em;
  text-indent: -1em;
  list-style-type: none;
}
.main ul > li:before {
  content: "●";
  display: inline-block;
  vertical-align: middle;
  margin: 0 .5em;
}

.main ol > li {
  margin-left: 2em;
  list-style-type: decimal;
}

ul.list-style-none > li {
  margin-left: 0;
  text-indent: 0;
  list-style-type: none;
}
ul.list-style-none > li:before {
  display: none;
}

ol.list-style-none > li {
  margin-left: 0;
  list-style-type: none;
}

/* 注釈（※）用インデント */
.note {
  margin-left: 1em;
  text-indent: -1em;
}

/* 共通リンクボタン */
.more {
  margin-top: 2em;
  text-align: center;
}

.link-button {
  display: inline-block;
  vertical-align: top;
  position: relative;
  padding: .5em 1.5em .4em;
  color: #fff;
  font-size: 1.1em;
  text-align: center;
  background-color: #3bb8eb;
}
.link-button:hover {
  color: #fff;
  text-decoration: none;
  background-color: #e75192;
  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 641px), print {
  .link-button.large {
    padding: .7em 2.5em .5em;
    font-size: 1.2em;
  }
}
.link-button:before {
  content: "\e907";
  display: inline-block;
  vertical-align: middle;
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  font-size: .7rem;
  margin: 0 .6em 0 0;
}
.link-button.soldout {
  background-color: #bbb;
}
.link-button.soldout:hover {
  background-color: #bbb;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.link-button.dropdown {
  padding-right: 1em;
  padding-left: 1.2em;
}
.link-button.dropdown:before {
  content: "\e904";
  margin: .2em .5em 0 0;
}
.link-button.dropdown.active {
  background-color: #e75192;
  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
}
.link-button.dropdown.active:before {
  content: "\e905";
}

/* コンテンツ画面中央寄せ */
.inner {
  position: relative;
  max-width: 1100px;
  margin-right: auto;
  margin-left: auto;
}
.inner:after {
  content: "";
  display: table;
  clear: both;
}

/* コンテンツ隙間・間隔用 */
.gutter:not(:last-child) {
  margin-bottom: 5rem;
}
.gutter > .inner {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  font-size: 1.1em;
  line-height: 1.8;
}
@media screen and (max-width: 1100px) {
  .gutter > .inner {
    padding-right: 0;
    padding-left: 0;
  }
}
@media screen and (max-width: 640px) {
  .gutter > .inner {
    font-size: 1em;
  }
}
.gutter > .inner .inner {
  overflow: hidden;
}
.gutter > .inner.center {
  padding: 0;
}
.gutter .inner:not(:last-child) {
  margin-bottom: 42px;
  margin-bottom: 3rem;
}

/* アンカー位置調整 */
.anchor-point {
  display: block;
}
.anchor-point:before {
  content: "";
  display: block;
  position: relative;
  width: 100%;
  height: 1px;
  margin-top: -80px;
  padding-top: 80px;
  z-index: -1;
}
@media screen and (min-width: 1101px), print {
  .anchor-point:before {
    margin-top: -100px;
    padding-top: 100px;
  }
}

/* ボーダー付きボックス */
@media screen and (min-width: 1101px), print {
  .subsection {
    padding-left: 35px;
  }
  .subsection .subheading {
    margin-left: -35px;
  }
}
.subsection:not(:last-child) {
  margin-bottom: 2em;
  padding-bottom: 2em;
  border-bottom: 1px solid #eee;
}
.subsection:after {
  content: "";
  display: table;
  clear: both;
}

/* --------------------------------

  Webフォント

-------------------------------- */
/*
 * https://icomoon.io/
 */
@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon.eot?p4ive6");
  src: url("../fonts/icomoon.eot?p4ive6#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?p4ive6") format("truetype"), url("../fonts/icomoon.woff?p4ive6") format("woff"), url("../fonts/icomoon.svg?p4ive6#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-clock:before {
  content: "\e909";
}

.icon-memo:before {
  content: "\e910";
}

.icon-arrowup:before {
  content: "\e905";
}

.icon-arrowdown:before {
  content: "\e904";
}

.icon-arrowtop:before {
  content: "\e900";
}

.icon-link:before {
  content: "\e901";
}

.icon-mail:before {
  content: "\e902";
}

.icon-sitemap:before {
  content: "\e903";
}

.icon-tel:before {
  content: "\e908";
}

.icon-arrowLeft:before {
  content: "\e906";
}

.icon-arrowRight:before {
  content: "\e907";
}

.icon-search:before {
  content: "\e90a";
}

/*
 * "Rock Salt" is lisenced under the Apache License, version 2.0
 * RockSalt.ttf: Copyright (c) 2010 by Font Diner, Inc DBA Sideshow. All rights reserved.
 * http://fonts.googleapis.com
 * https://www.google.com/fonts/attribution
 * http://www.apache.org/licenses/LICENSE-2.0.html
 */
/*
 * "Anton" is lisenced under the SIL Open Font License, 1.1
 * Anton-Regular.ttf: Copyright 2011 The Anton Project Authors
 * https://www.google.com/fonts/attribution
 * http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL_web
 */
/*
 * あんずいろapricot×color
 * http://www8.plala.or.jp/p_dolce/font2.html
 */
@font-face {
  font-family: 'あんず文字';
  src: url("../fonts/APJapanesefont.woff") format("woff");
}
/*
 * genjyuugothic is licensed under the SIL Open Font License 1.1
 * http://jikasei.me/font/genjyuu/
 * http://scripts.sil.org/OFL
 */
@font-face {
  font-family: "GenJyuuGothicXP";
  src: url("../fonts/GenJyuuGothicX-P-Regular.ttf") format("ttf"), url("../fonts/GenJyuuGothicX-P-Regular.woff2") format("woff2"), url("../fonts/GenJyuuGothicX-P-Regular.woff") format("woff");
}
/*
 * adobe-fonts/source-han-serif is licensed under the SIL Open Font License 1.1
 * http://scripts.sil.org/OFL
 */
@font-face {
  font-family: "SourceHanSerifJP";
  src: url("../fonts/SourceHanSerifJP-Light.woff2") format("woff2"), url("../fonts/SourceHanSerifJP-Light.woff") format("woff"), url("../fonts/SourceHanSerifJP-Light.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
/* --------------------------------

  html, body

-------------------------------- */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

html {
  overflow-y: scroll;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -o-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  color: #333;
  font-size: 14px;
  line-height: 1.5;
  /*font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;*/
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  text-align: left;
}

/* --------------------------------

  wrapper

-------------------------------- */
.wrapper {
  position: relative;
  background-color: #fff;
  overflow:hidden;
}
@media screen and (min-width: 1601px), print {
  .wrapper {
    padding-right: 0;
  }
}

/* --------------------------------

  header

-------------------------------- */
.header {
  position: fixed;
  display:flex;
  justify-content: space-between;
  align-items:center;
  width:100%;
  height:100px;
  padding:0 40px;
  z-index: 999;
}
@media screen and (max-width: 768px), print {
  .header{
    padding:0 20px;
  }
}
.header.fixed{
  background:var(--l_blue);
  height:80px;
}


/*@media screen and (min-width: 1101px), print {
  .header .inner {
    -webkit-box-shadow: none;
    box-shadow: none;
    z-index: 1001;
  }
}
@media screen and (min-width: 1601px), print {
  .header .inner {
    max-width: 1100px;
  }
}*/
/*@media screen and (min-width: 1101px) {
  .header.fixed .inner {
    position: fixed;
    top: -60px;
    -webkit-transform: translateY(60px);
    transform: translateY(60px);
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s;
  }
  .header.fixed .header-logo {
    top: 16px;
    width: 140px;
  }
  .contact-page .header.fixed {
    display: none;
  }
}*/
.header-logo {
  display: block;
  width: 235px;
}
.header.fixed .header-logo {
  width:160px;
}
@media screen and (max-width: 768px), print {
  .header-logo{
    width:200px;
  }
}
@media screen and (min-width: 1101px), print {
  .header-side {
    position: fixed;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    z-index: 1001;
  }
}
@media screen and (orientation: landscape) and (max-height: 800px) and (min-width: 1101px), print {
  .header-side .header-emblem-text {
    display: none;
  }
}
.header-emblem {
  display: none;
  position: relative;
  width: 100%;
  max-width: 680px;
  height: 320px;
  margin: 90px auto 0 0;
  padding-left: 165px;
}
#top .header-emblem {
  display: block;
}
@media screen and (min-width: 481px), print {
  .header-emblem {
    height: 290px;
  }
}
@media screen and (min-width: 1101px), print {
  .header-emblem {
    display: block;
    height: auto;
    margin: 0;
    padding-left: 20px;
    background-color: #fff;
  }
}
@media screen and (min-width: 1101px), print {
  .header-emblem-logo {
    margin-bottom: .6em;
  }
}
.header-emblem-logo img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
}

.header-emblem-logo span {
  display: block;
  font-size: 1.3em;
  font-weight: 800;
  line-height: 1.3;
}
.header-emblem-text {
  position: relative;
  margin: 2em 0 0 -45px;
}
.header-emblem-text p {
  font-size: .7em;
  color: #ccc;
}
@media screen and (min-width: 641px), print {
  .header-emblem-text {
    margin-top: 3em;
  }
  .header-emblem-text p {
    font-size: .9em;
  }
}
@media screen and (min-width: 1101px), print {
  .header-emblem-text {
    margin: 0 0 1em;
  }
  .header-emblem-text p {
    font-size: .7em;
  }
}


.header-nav .global-sidenav {
  display: none;
}
@media screen and (min-width: 1101px), print {
  .header-nav .global-sidenav {
    display: block;
    padding: 0 15px 15px 25px;
    background-color: #fff;
  }
  .header-nav .global-sidenav:after {
    content: "";
    display: table;
    clear: both;
  }
}
.header-nav .global-sidenav li {
  float: left;
  width: 33.33333%;
}

.header_sns{
  display:flex;
  align-items:center;
}
@media screen and (max-width: 1100px), print {
  .header_sns{
    padding:0 0 20px 20px;
  }
}
.header_sns a{
  color:var(--dk_blue);
  font-size: 18px;
  margin:0 10px;
}
.header_sns a:hover{
  color:var(--sky_blue);
}
.header_contact{
  padding-left:30px;
  display:flex;
  align-items:center;
}
.header_contact a{
  text-decoration:none;
  display:block;
  color:#fff;
  position:relative;
  width:125px;
  height:40px;
  line-height:40px;
  text-align:center;
  font-weight:bold;
  font-size:14px;
}
.header_contact a:before{
  content:'';
  width:0;
  height:40px;
  background:var(--sky_blue);
  position:absolute;
  left:auto;
  right:0;
  top:0;
  transform:skew(-20deg);
  z-index: -9;
}
.header_contact a:after{
  content:'';
  width:100%;
  height:40px;
  background:var(--dk_blue);
  position:absolute;
  left:0;
  top:0;
  transform:skew(-20deg);
  z-index: -10;
}
.header_contact a:hover{
  text-decoration:none;
}
.header_contact a:hover:before{
  width:100%;
  left:0;
  right:auto;
}
@media screen and (max-width: 1100px), print {
  .header_contact{
    padding-left: 0;
    justify-content: center;
  }
  .header_contact a{
    width:55vw;
  }
}

/* --------------------------------

  nav

-------------------------------- */
.nav {
  display: block;
}
@media screen and (max-width: 1100px) {
  .nav {
    position: fixed;
    top: 0;
    right: -3vw;
    width:70vw;
    height: 100%;
    z-index: 1001;
    background: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    opacity:0;
    visibility: hidden;
  }
  .nav-open .nav {
    right:0;
    opacity:1;
    visibility: visible;
    background:var(--l_blue);
  }
}
@media screen and (min-width: 1101px), print {
  .nav {
    z-index: 1000;
    display:flex;
  }
}

/* メインナビ */
@media screen and (max-width: 1100px) {
  .main-nav {
    padding: 80px 0 20px;
  }
}
@media screen and (min-width: 1101px), print {
  .main-nav {
    display:flex;
    align-items:center;
  }
}

@media screen and (max-width: 1100px) {
  .main-nav-item {
    position: relative;
  }
}
@media screen and (min-width: 1101px), print {
  .main-nav-item {
    position: relative;
    padding:0 1em;
  }
}
@media screen and (max-width: 1100px) {
  .main-nav .nav-link {
    display: block;
    position: relative;
    padding: 20px 10px;
    color: var(--dk_blue);
    border-bottom: 1px solid var(--l_blue);
    margin: 0 20px;
    font-weight:bold;
  }
  .main-nav .nav-link:after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    border-top: 1px solid var(--dk_blue);
    border-right: 1px solid var(--dk_blue);
    transform: rotate(45deg);
    top: 27px;
    right: 10px;
  }
  .main-nav .nav-link:hover {
    text-decoration: none;
  }
  .main-nav .nav-link span {
    display: block;
    font-size: .8em;
    line-height: 1.2;
    text-align: right;
  }
  .main-nav .nav-link span:before {
    display: block;
    float: left;
    margin: -.2em 0 0 0;
    font-size: 1.5em;
    font-family: Arial, sans-serif;
  }
}
@media screen and (min-width: 1101px), print {
  .main-nav .nav-link {
    width: 100%;
    font-size: 14px;
    color: var(--dk_blue);
    font-weight:bold;
    height:40px;
    line-height:40px;
    display:block;
    position:relative;
    overflow:hidden;
  }
  .main-nav .nav-link:before {
    content:'';
    width: 0;
    height:2px;
    background: var(--sky_blue);
    position: absolute;
    bottom:0;
    left:auto;
    right:0;
    transition:.3s;
  }
  .main-nav .nav-link:hover {
    text-decoration: none;
    color:var(--sky_blue);
  }
  .main-nav .nav-link:hover:before {
    left:0;
    right:auto;
    width: 100%;
  }
}
@media screen and (max-width: 1160px), print {
  .main-nav .nav-link {
    font-size: 12px;
  }
}

/* ドロップダウンナビ */
.sub-nav {
  height: 0;
  visibility: hidden;
  opacity: 0;
}
@media screen and (max-width: 1100px) {
  .sub-nav {
    overflow: hidden;
  }
}
@media screen and (min-width: 1101px), print {
  .sub-nav {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    margin: 0;
    padding: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #fff;
    -webkit-transition: .2s;
    transition: .2s;
  }
}
.sub-nav-active .sub-nav {
  visibility: visible;
  opacity: 1;
}
@media screen and (max-width: 1100px) {
  .sub-nav-active .sub-nav {
    height: auto;
    overflow: visible;
  }
}
@media screen and (min-width: 1101px), print {
  .sub-nav-active .sub-nav {
    top: 100%;
    height: auto;
    padding: 3px;
    background-color: #fff;
  }
}
@media screen and (max-width: 1100px) {
  .sub-nav li:not(:last-child) {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1101px), print {
  .sub-nav li:not(:last-child) {
    margin-bottom: 0;
    border-bottom: 1px solid #fff;
  }
}
@media screen and (max-width: 1100px) {
  .sub-nav a {
    display: block;
    position: relative;
    padding: 1em;
    font-size: .9em;
    color: #3bb8eb;
    border-bottom: 1px solid #3bb8eb;
    background-color: #fff;
    overflow: hidden;
  }
  .sub-nav a:hover {
    text-decoration: none;
    color: #e75192;
  }
}
@media screen and (min-width: 1101px), print {
  .sub-nav a {
    display: block;
    padding: 1em 1em .8em;
    font-size: .9em;
    color: #fff;
    text-align: center;
    background-color: #e75192;
  }
  .sub-nav a:hover {
    text-decoration: none;
    background-color: #3bb8eb;
  }
}
@media screen and (min-width: 1101px), print {
  .sub-nav-button.nav-link {
    padding-right: 2em;
  }
}
@media screen and (max-width: 1100px) {
  .sub-nav-active .sub-nav-button.nav-link {
    background-color: #e75192;
  }
}
@media screen and (min-width: 1101px), print {
  .sub-nav-active .sub-nav-button.nav-link {
    background-color: #3bb8eb;
  }
  .sub-nav-active .sub-nav-button.nav-link span {
    color: #fff;
  }
  .sub-nav-active .sub-nav-button.nav-link span:before {
    color: #fff;
  }
}

@media screen and (max-width: 1100px) {
  .sub-nav-active .sub-nav-button:after {
    border-style: solid;
    border-width: 0 5px 8px 5px;
    border-color: transparent transparent #fff transparent;
  }
}

/* ナビゲーション開閉ボタン */
.nav-button {
  display: none;
}
@media screen and (max-width: 1100px) {
  .nav-button {
    display: block;
    position: fixed;
    top: 20px;
    right: 10px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    outline: none;
    z-index: 1002;
  }
  .header.fixed .nav-button{
    top:14px;
  }
  .nav-button-icon {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 25px;
    height: 1px;
    margin: auto;
    background-color: var(--dk_blue);
  }
  .nav-open .nav-button-icon {
    background: none;
  }
  .nav-button-icon:before, .nav-button-icon:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    background-color: var(--dk_blue);
  }
  .nav-button-icon:before {
    margin-top: -6px;
  }
  .nav-open .nav-button-icon:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .nav-button-icon:after {
    margin-top: 6px;
  }
  .nav-open .nav-button-icon:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .nav-open .nav-button-icon:before, .nav-open .nav-button-icon:after {
    margin-top: 0;
  }
}

/* ナビゲーション背景 */
.nav-screen {
  display: none;
}
@media screen and (max-width: 1100px) {
  .nav-screen {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    background: #000;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: .2s;
    transition: .2s;
    z-index: 1000;
  }
  .nav-open .nav-screen {
    visibility: visible;
    opacity: .4;
    cursor: pointer;
  }
}

/* --------------------------------

  スライダー

-------------------------------- */
.slider {
  position: relative;
  background-color: #fff;
  overflow: hidden;
}
@media screen and (min-width: 1101px), print {
  .slider {
    margin-top: 110px;
    padding-left: 20px;
  }
}
.slider .inner {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
}
.slider .slide {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
}

/* owl-carousel */
.slider .owl-carousel {
  max-width: 1100px;
  margin: auto;
}
.slider .owl-nav {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 1100px;
  height: 1px;
  margin: auto;
  z-index: 101;
}
.slider .owl-prev,
.slider .owl-next {
  display: block;
  position: absolute;
  top: -8px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 100%;
  background-color: #3bb8eb;
  cursor: pointer;
}
.slider .owl-prev:before,
.slider .owl-next:before {
  content: "";
  display: block;
  color: #fff;
  font-size: .7em;
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
}
.slider .owl-prev {
  left: 5px;
}
.slider .owl-prev:before {
  content: "\e906";
}
.slider .owl-next {
  right: 5px;
}
.slider .owl-next:before {
  content: "\e907";
}
.slider .owl-dots {
  text-align: center;
}
.slider .owl-dots .owl-dot {
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  margin: 0 5px;
  padding: 19px 0;
  cursor: pointer;
}
@media screen and (min-width: 1101px), print {
  .slider .owl-dots .owl-dot {
    width: 70px;
  }
}
.slider .owl-dots .owl-dot span {
  display: block;
  height: 2px;
  background-color: #666;
}
.slider .owl-dots .owl-dot.active span {
  background-color: #3bb8eb;
}

/* --------------------------------

  main

-------------------------------- */
.main {
  display: block;
  position: relative;
  padding: 300px 1em 5em;
  background: #fff;
  z-index: 100;
}

@media screen and (min-width: 1101px), print {
  .main {
    padding: 100px 2em 5em;
  }
}

/* --------------------------------

  footer

-------------------------------- */
.footer {
    color: var(--dk_blue);
    background-image: url(/img/web2021/page_logo.png);
    background-size: 600px;
    background-repeat: no-repeat;
    background-position: bottom 110px right -30px;
}
.footer_contact_area{
  padding:0 0 120px;
}
.footer_contact_area .contact_cover a{
  color: var(--l_blue);
  text-decoration: none;
  z-index: 100;
  position: relative;
  height: 300px;
  width: 90%;
  display: flex;
  align-items: center;
  padding: 0 0 0 120px;
}
.footer_contact_area .contact_cover a p{
  font-size:18px;
  font-weight:bold;
}
.footer_contact_area .contact_cover a p span{
  font-size: 50px;
  font-weight:normal;
  display:block;
}
.footer_contact_area .contact_cover a:before{
  content: '';
  position: absolute;
  background: var(--dk_blue);
  width: 100%;
  z-index: -2;
  height: 300px;
  transform: skew(-20deg);
  left: -10%;
}
.footer_contact_area .contact_cover a:after{
  content: '';
  position: absolute;
  background: var(--sky_blue);
  width: 0;
  z-index: -1;
  height: 300px;
  transform: skew(-20deg);
  left: auto;
  right:10%;
}
.footer_contact_area .contact_cover a:hover:after{
  width:100%;
  right:auto;
  left:-10%;
}
.footer_contact_area .contact_cover a .arrow_cover{
    position:absolute;
    top:53%;
    right:20%;
    z-index:20;
}
.footer_contact_area .contact_cover a .arrow_cover .arrow {
    height: 2px;
    width: 180px;
    background: var(--l_blue);
    position: relative;
}
.footer_contact_area .contact_cover a .arrow_cover .arrow span {
    display: block;
    height: 2px;
    width: 40px;
    background: var(--l_blue);
    transform: rotate(45deg);
    position: absolute;
    right: -5px;
    bottom: 14px;
}
.footer_contact_area .contact_cover a:hover .arrow_cover{
    right:18%;
}
.footer_contact_area .contact_cover a:hover .arrow_cover .arrow{
    width:190px;
}
.footer_contact_area .contact_cover a:hover{
  text-decoration:none;
}
.footer_inner{
  display:flex;
  justify-content: space-between;
}
.footer_left{
  width:33%;
  position:relative;
  padding:40px 0 40px 80px;
  z-index: 100;
}
.footer_left:after {
    content: '';
    position: absolute;
    width: 200%;
    height: 608px;
    background: #fff;
    left: -106%;
    top: -120px;
    transform: skew(20deg);
    z-index: -1;
}
.footer_right{
  width:66%;
  padding:40px;
}
.footer_logo{
  width:235px;
}
.address_area{
  padding:40px 0 0;
}
.address_area h2{
  font-size:18px;
  font-weight:bold;
  padding:0 0 20px;
  letter-spacing:.1rem;
}
.address_area address{
  font-style:normal;
  font-size:14px;
  line-height:1.7;
}
.footer_sns_area{
  padding:80px 0 0;
}
.footer_sns_area p{
  font-size:12px;
  padding:0 0 10px;
}
.footer_sns{
  display:flex;
}
.footer_sns a{
  color:var(--dk_blue);
  font-size:20px;
  margin-right:20px;
}
.footer_sns a:hover{
  color:var(--sky_blue);
}
.footer_nav{
  display:flex;
}
.footer_nav ul{
  width:25%;
}
.footer_nav ul li{
  padding:0 0 10px;
}
.footer_nav ul li a{
  color:var(--dk_blue);
  font-size:14px;
  text-decoration:none;
  position:relative;
  padding:0 0 5px;
}
.footer_nav ul li a:before{
  content:'';
  position:absolute;
  width:0;
  right:0;
  left:auto;
  bottom:0;
  height:1px;
  background:var(--sky_blue);
}
.footer_nav ul li a:hover{
  text-decoration:none;
  color:var(--sky_blue);
}
.footer_nav ul li a:hover:before{
  width:100%;
  left:0;
  right:auto;
}
.copy{
  text-align:right;
  padding:0 40px 40px 0;
}
@media screen and (max-width: 1100px), print {
  .footer{
    background-size:80%;
  }
  .footer_contact_area{
    padding:0 0 80px;
  }
  .footer_contact_area .contact_cover a{
    height:150px;
    padding:0 0 0 20px;
  }
  .footer_contact_area .contact_cover a p{
    font-size:12px;
  }
  .footer_contact_area .contact_cover a p span{
    font-size:26px;
  }
  .footer_contact_area .contact_cover a:before{
    height:150px;
    left:-8%;
  }
  .footer_contact_area .contact_cover a:after{
    height: 150px;
    left: auto;
    right:8%;
  }
  .footer_contact_area .contact_cover a:hover:after{
    left:-8%;
  }
  .footer_contact_area .contact_cover a .arrow_cover{
    right:18%;
  }
  .footer_contact_area .contact_cover a .arrow_cover .arrow{
    height:1px;
    width:50px;
  }
  .footer_contact_area .contact_cover a .arrow_cover .arrow span{
    width:15px;
    right:-2px;
    bottom:5px;
  }
  .footer_contact_area .contact_cover a:hover .arrow_cover{
    right:16%;
  }
  .footer_contact_area .contact_cover a:hover .arrow_cover .arrow{
    width:60px;
  }
  .footer_inner{
    flex-wrap:wrap;
  }
  .footer_left{
    width:100%;
    padding:0 20px;
  }
  .footer_left:after{
    display:none;
  }
  .footer_logo{
    width:200px;
    margin:auto;
  }
  .address_area{
    padding:20px 0 0;
    text-align: center;
  }
  .address_area h2{
    font-size:15px;
    text-align:center;
  }
  .address_area address{
    font-size:13px;

  }
  .footer_sns_area{
    padding:30px 0 50px;
    text-align: center;
  }
  .footer_sns{
    justify-content: center;
  }
  .footer_sns a{
    margin:0 10px;
  }
  .footer_right{
    display:none;
  }
}


/* --------------------------------

  お知らせ

-------------------------------- */
.news-area {
  position: relative;
}
.news-area > .inner:not(:last-child) {
  margin-bottom: 0;
}
.news-link {
  display: block;
  padding: 1em 0;
  border-bottom: 1px dotted #eee;
}
.news-meta {
  text-align: right;
  line-height: 1;
}
.news-meta .news-date,
.news-meta .news-category {
  display: inline-block;
  vertical-align: top;
  margin-left: 1em;
}
.news-meta .news-date:before,
.news-meta .news-category:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin: -.1em .3em 0 0;
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 1.1em;
}
.news-meta .news-date:before {
  content: "\e909";
}
.news-meta .news-category:before {
  content: "\e910";
}
.news-date {
  font-size: .9em;
}
.news-category {
  font-size: .9em;
}
.news-title {
  line-height: 1.5;
  word-break: break-all;
  word-wrap: break-word;
}
.news-text {
  margin-top: 1em;
  line-height: 1.8;
  word-break: break-all;
  word-wrap: break-word;
}
.news-text p,
.news-text div {
  word-break: break-all;
  word-wrap: break-word;
}
.news-more {
  margin-top: 2em;
  text-align: center;
}
@media screen and (min-width: 641px), print {
  .news-more {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
  }
}
.news-back {
  max-width: 1100px;
  margin: 2em auto 0;
  padding: 2em 0 0;
  text-align: center;
  border-top: 1px dotted #ccc;
}

.news-text h1 {
font-size: 2em;
font-weight: bold;
}
.news-text h3 {
font-size: 1.17em;
font-weight: bold;
}
.news-text h4 {
font-weight: bold;
}
.news-text h5 {
font-size: 0.83em;
font-weight: bold;
}



/* お知らせ一覧（テキスト）*/
.news-list.news-slider {
  position: relative;
}
@media screen and (min-width: 1101px), print {
  .news-list.news-slider {
    padding: 0 40px;
  }
}
@media screen and (min-width: 1101px), print {
  .news-list.news-slider:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 36px;
    width: 4px;
    height: 100%;
    background: url(../img/base/nav1.png) repeat-y;
  }
}
.news-list:not(.news-slider) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  margin: 0 0 -20px 0;
  padding: 0 4px 0 0;
}
.news-list:not(.news-slider) .news-topics {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  max-width: 100%;
  padding: 0 0 20px 0;
}
@media screen and (min-width: 481px), print {
  .news-list:not(.news-slider) .news-topics {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }
}
@media screen and (min-width: 769px), print {
  .news-list:not(.news-slider) .news-topics {
    -ms-flex-preferred-size: 33.33333%;
    flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
}
.news-list:not(.news-slider) .news-title {
  font-size: .9em;
}
.news-list .news-link {
  display: block;
  position: relative;
  min-height: 90px;
  padding: 0 10px 0 115px;
  border-bottom: none;
  text-decoration: underline;
}
@media screen and (min-width: 1101px), print {
  .news-list .news-link {
    padding: 0 10px 0 120px;
  }
}
.news-list .news-link:hover {
  color: #3bb8eb;
  text-decoration: none;
}
.news-list .news-link:hover .news-date {
  color: #3bb8eb;
}
.news-list .news-link:hover .news-img {
  opacity: .7;
}
.news-list .news-link:before, .news-list .news-link:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 4px;
  height: 100%;
  background: url(../img/base/nav1.png) repeat-y;
}
.news-list .news-link:before {
  left: 0;
}
.news-list .news-link:after {
  right: -4px;
}
.news-list .news-date {
  float: left;
  width: 100%;
  color: #333;
}
.news-list .news-img {
  display: block;
  position: absolute;
  top: 0;
  left: 15px;
  width: 90px;
  height: 90px;
  margin: auto;
  background-color: #fff;
  overflow: hidden;
}
@media screen and (min-width: 1101px), print {
  .news-list .news-img {
    left: 20px;
  }
}
.news-list .news-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  max-width: 110px;
  max-height: 110px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* お知らせ一覧（サムネイル・スライダー）*/
.news-img-list:not(.news-slider) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  margin: 0 -10px -2em 0;
}
@media screen and (min-width: 1101px), print {
  .news-img-list:not(.news-slider) {
    margin: 0 -20px -2em 0;
  }
}
.news-img-list:not(.news-slider) .news-topics {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  max-width: 100%;
  padding: 0 10px 2em 0;
}
@media screen and (min-width: 481px), print {
  .news-img-list:not(.news-slider) .news-topics {
    -ms-flex-preferred-size: 33.33333%;
    flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
}
@media screen and (min-width: 1101px), print {
  .news-img-list:not(.news-slider) .news-topics {
    padding: 0 20px 2em 0;
  }
}
.news-img-list.news-slider {
  padding-top: 10px;
}
.news-img-list.news-slider .news-topics {
  width: 240px;
  padding: 10px 10px 0;
}
@media screen and (min-width: 769px), print {
  .news-img-list.news-slider .news-topics {
    width: 260px;
    padding: 10px 30px 0;
  }
}
.news-img-list .news-link {
  position: relative;
  height: 100%;
  padding: 0;
  color: #333;
  line-height: 1.5;
  border: none;
}
.news-img-list .news-link:before {
  content: "";
  display: block;
  margin-bottom: .5em;
  padding-top: 45.45%;
}
.news-img-list .news-link:hover {
  color: #3bb8eb;
  text-decoration: none;
}
.news-img-list .news-link:hover .news-area {
  background-color: #3bb8eb;
}
.news-img-list .news-link:hover .news-img {
  border-color: #3bb8eb;
}
.news-img-list .news-link:hover .news-img img {
  opacity: .7;
}
.news-img-list .news-area {
  display: block;
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  color: #fff;
  font-size: .9em;
  text-align: center;
  line-height: 2.6rem;
  border-radius: 100%;
  background-color: #000;
  overflow: hidden;
}
.news-img-list .news-date {
  display: block;
  padding: .3em 0 0 50px;
  font-size: .8em;
  font-weight: 800;
}
.news-img-list .news-title {
  padding-left: 50px;
  font-size: .85em;
}
.news-img-list .news-img {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  margin: auto;
  border-bottom: 1px solid #333;
  background: #fff;
  overflow: hidden;
}
.news-img-list .news-img:before {
  content: "";
  display: block;
  padding-top: 45.45%;
}
.news-img-list .news-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  max-width: 150%;
  max-height: 150%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.news-img-list .slick-current .news-link {
  color: #3bb8eb;
}
.news-img-list .slick-current .news-date {
  background: #3bb8eb;
}
.news-img-list .slick-current .news-img {
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

/* お知らせスライダー用前後ボタン */
.news-arrow {
  display: block;
  margin-top: 1em;
  padding-top: 1em;
  text-align: center;
  background: url(../img/base/nav2.png) repeat-x;
}
@media screen and (min-width: 1101px), print {
  .news-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    margin: auto;
    padding: 0;
    background: none;
  }
}
.news-arrow-item {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 28px;
  height: 28px;
  line-height: 28px;
  margin: 0 15px;
  border-radius: 100%;
  background-color: #3bb8eb;
  cursor: pointer;
}
@media screen and (min-width: 1101px), print {
  .news-arrow-item {
    display: block;
    position: absolute;
    top: -24px;
    height: 48px;
    line-height: 48px;
    margin: 0;
    text-align: center;
    background: none;
  }
}
.news-arrow-item:before {
  color: #fff;
  font-size: .7em;
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
}
@media screen and (min-width: 1101px), print {
  .news-arrow-item:before {
    color: #3bb8eb;
    font-size: 2rem;
  }
}
@media screen and (min-width: 1101px), print {
  .news-arrow-prev {
    left: 0;
  }
}
.news-arrow-prev:before {
  content: "\e906";
}
@media screen and (min-width: 1101px), print {
  .news-arrow-next {
    right: 0;
  }
}
.news-arrow-next:before {
  content: "\e907";
}

/* WordPress お知らせ詳細用 */
.news-pagers {
  position: relative;
  margin-top: 2em;
  padding-top: 2em;
  border-top: 1px dotted #ccc;
  overflow: hidden;
}

.news-pager {
  width: 70px;
  height: 40px;
  margin: auto;
  overflow: hidden;
}
@media screen and (min-width: 481px), print {
  .news-pager {
    width: 80px;
  }
}
.news-pager a {
  display: block;
  position: relative;
  color: #fff;
  line-height: 40px;
  text-align: center;
  border-radius: 0;
  background-color: #00814d;
  -webkit-transition: .2s;
  transition: .2s;
}
.news-pager a:hover {
  color: #fff;
  text-decoration: none;
  background-color: #40ad60;
}
.news-pager a:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 8px;
  height: 8px;
  margin: auto;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.news-pager-prev {
  position: absolute;
  top: 2em;
  right: 0;
  left: -190px;
}
@media screen and (min-width: 481px), print {
  .news-pager-prev {
    left: -240px;
  }
}
.news-pager-prev a {
  padding-left: 10px;
}
.news-pager-prev a:before {
  display: none;
}
.news-pager-prev a:after {
  left: -40px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.news-pager-next {
  position: absolute;
  top: 2em;
  right: -190px;
  left: 0;
}
@media screen and (min-width: 481px), print {
  .news-pager-next {
    right: -240px;
  }
}
.news-pager-next a {
  padding-right: 10px;
}
.news-pager-next a:before {
  display: none;
}
.news-pager-next a:after {
  right: -40px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.news-pager-back {
  width: 90px;
  font-size: 13px;
}
@media screen and (min-width: 481px), print {
  .news-pager-back {
    width: 120px;
  }
}
.news-pager-back a:before {
  display: none;
}
.news-pager-back a:after {
  display: none;
}

/* --------------------------------

  フォーム部品

-------------------------------- */
/* フォーム注釈文 */
.form-notes {
  margin-bottom: 2em;
}
.form-notes .note {
  font-size: .8em;
  color: #c00;
}

/* フォーム用テーブル */
.form-table {
  display: block;
}
.form-table tbody {
  display: block;
  position: relative;
  border-top: 1px solid #ddd;
}
.form-table tbody:before {
  content: "";
  display: block;
  width: 300px;
  height: 1px;
  margin-top: -1px;
  border-bottom: 1px solid #444;
}
@media screen and (max-width: 1100px) {
  .form-table tbody:before {
    width: 200px;
  }
}
@media screen and (max-width: 640px) {
  .form-table tbody {
    border-top: none;
  }
  .form-table tbody:before {
    display: none;
  }
}
.form-table tr {
  display: table;
  width: 100%;
}
@media screen and (max-width: 640px) {
  .form-table tr {
    display: block;
  }
  .form-table tr:not(:last-child) {
    margin-bottom: 1em;
  }
}
.form-table th {
  vertical-align: top;
  width: 300px;
  padding: .8em .5em 0 1em;
  font-size: 1.1em;
  letter-spacing: .1em;
  border-bottom: 1px solid #444;
}
.form-table th .required {
  display: inline-block;
  vertical-align: middle;
  margin: -.1em 0 0 .2em;
  color: #c00;
}
@media screen and (max-width: 1100px) {
  .form-table th {
    width: 200px;
  }
}
@media screen and (max-width: 640px) {
  .form-table th {
    display: block;
    width: 100%;
    padding: 0;
    font-size: 1.2em;
  }
}
.form-table td {
  vertical-align: top;
  padding: .5em;
  border-bottom: 1px solid #ddd;
}
@media screen and (max-width: 640px) {
  .form-table td {
    display: block;
    padding: .5em 0 0;
    border-bottom: none;
  }
}

/* フォーム部品：入力欄 */
.form-short,
.form-middle,
.form-long {
  padding: .3em .5em;
  color: #333;
  /*font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;*/
  font-family: "游ゴシック体","Yu Gothic",YuGothic;
  font-size: 1.1em;
  line-height: 1.5;
  border: 1px solid #eee;
  background-color: #fff;
}

.form-short:focus,
.form-middle:focus,
.form-long:focus {
  border-color: #3bb8eb;
  background-color: #fff;
}

.form-short {
  width: 30%;
}

.form-middle {
  width: 50%;
}

.form-long {
  width: 100%;
}

@media screen and (max-width: 640px) {
  .form-short,
  .form-middle,
  .form-long {
    width: 100%;
  }
}
/* フォーム部品：入力必須マーク */
.form-title {
  display: table-cell;
  vertical-align: middle;
  padding-left: 1em;
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1.2;
}

.form-icon {
  display: table-cell;
  vertical-align: middle;
  width: 50px;
}
.form-icon:before {
  content: "";
  display: block;
  width: 50px;
  height: 40px;
  margin: auto;
  color: #fff;
  line-height: 40px;
  text-align: center;
}
.form-icon-must:before {
  content: "必須";
  background: #c00;
}
.form-icon-none:before {
  content: "";
  background: #fff;
}
.form-icon-free:before {
  content: "任意";
  background: #ccc;
}

/* フォーム部品：セレクト */
.form-select {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  max-width: 100%;
  background: url(../img/base/select.png) no-repeat right;
  background-size: 40px auto;
  border-radius: 0;
  overflow: hidden;
}
.form-select select {
  width: auto;
  padding: .5em 50px .5em .5em;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.form-select select:focus {
  background: none;
}
.form-select select::-ms-expand {
  visibility: hidden;
}

/* フォーム部品：ラジオボタン、チェックボックス共通 */
.form-box {
  position: absolute;
  opacity: 0;
}
.form-box + label {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: 1em;
  padding-left: 26px;
  cursor: pointer;
}
.form-box + label:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 18px;
  height: 18px;
  margin: auto;
  border: 1px solid #eee;
  background: #fff;
}
.form-box + label:after {
  content: "";
  display: block;
  position: absolute;
  margin: auto;
}
.form-box:checked + label {
  color: #3bb8eb;
}
.form-box:checked + label:before {
  border-color: #3bb8eb;
}

/* フォーム部品：ラジオボタン */
.form-box-radio + label:before {
  border-radius: 100%;
}
.form-box-radio + label:after {
  top: 0;
  bottom: 0;
  left: 4px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 100%;
  opacity: 1;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}
.form-box-radio:checked + label:after {
  background-color: #3bb8eb;
  opacity: 1;
  -webkit-transition: .2s;
  transition: .2s;
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* フォーム部品：チェックボックス */
.form-box-check + label:before {
  border-radius: 0;
}
.form-box-check + label:after {
  top: -10px;
  bottom: 0;
  left: 3px;
  width: 20px;
  height: 10px;
  border-left: 3px solid #3bb8eb;
  border-bottom: 3px solid #3bb8eb;
  opacity: 0;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.form-box-check:checked + label:after {
  opacity: 1;
  -webkit-transition: .2s;
  transition: .2s;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* フォーム部品：テキストエリア */
.form-textarea {
  vertical-align: top;
  height: 15em;
  min-height: 4em;
  resize: vertical;
}

/* フォーム部品：エラーメッセージ */
.has-error input,
.has-error textarea {
  border-color: #c00;
}

.has-error .with-errors ul > li {
  margin-left: 0;
  text-indent: 0;
  color: #c00;
  font-size: .8em;
  list-style-type: none;
}
.has-error .with-errors ul > li:before {
  display: none;
}

/* フォーム部品：送信ボタン */
.form-buttons {
  padding-top: 1em;
  text-align: center;
}

.form-button {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  width: 100%;
  max-width: 150px;
  margin: 1em .5em 0;
  padding: .5em .5em .3em;
  color: #fff;
  /*font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;*/
  font-family: "游ゴシック体","Yu Gothic",YuGothic;
  font-size: 1.1em;
  line-height: 1.5;
  border: none;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  overflow: hidden;
  cursor: pointer;
}
.form-button:before {
  content: "\e907";
  display: inline-block;
  vertical-align: middle;
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  font-size: .6rem;
  margin: -.1em .3em 0 0;
}
.form-button:hover {
  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
}
.form-button-send {
  background: #3bb8eb;
}
.form-button-back {
  background: #777;
}

/* --------------------------------

  ページタイトル

-------------------------------- */
.page-title {
  display: table;
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  height: 120px;
  background-color: #3bb8eb;
  overflow: hidden;
  z-index: 101;
  margin-bottom:50px;
}
@media screen and (min-width: 1101px), print {
  .page-title {
    display: table;
    position: relative;
    height: 150px;
    max-width: 1150px;
    margin: 0 auto 50px;
    top:0;
  }
}
.page-title-inner {
  display: table-cell;
  vertical-align: middle;
  line-height: 1.2;
  font-size: .8em;
  color: #fff;
  text-align: center;
}
@media screen and (min-width: 641px), print {
  .page-title-inner {
    font-size: .9em;
  }
}
@media screen and (min-width: 1101px), print {
  .page-title-inner {
    font-size: 1em;
  }
}
.page-title-name {
  display: block;
  margin-bottom: .1em;
  font-size: 2em;
  letter-spacing: .2em;
}
.page-title-caption {
  display: block;
  font-size: 1em;
  letter-spacing: .2em;
}
.news-page .page-title {
  background-color: #3bb8eb;
}
.seminar-page .page-title {
  background-color: #513e33;
}
.item-page .page-title {
  background-color: #4c4394;
}
.edu-page .page-title {
  background-color: #e73e0c;
}
.support-page .page-title {
  background-color: #e75192;
}
.makers-page .page-title {
  background-color: #f5a900;
}
.recruit-page .page-title {
  background-color: #377b39;
}
.company-page .page-title {
  background-color: #00abe8;
}
.links-page .page-title {
  background-color: #333333;
}
.sitemap-page .page-title {
  background-color: #999999;
}
.contact-page .page-title {
  background-color: #3bb8eb;
}

/* --------------------------------

  共通ナビボタン

-------------------------------- */
.global-sidenav li {
  position: relative;
}
.global-sidenav a {
  display: block;
  position: relative;
  color: #333;
  text-align: center;
}
.global-sidenav a:hover {
  color: #3bb8eb;
  text-decoration: none;
}
.global-sidenav a:before {
  display: block;
  margin-top: .1em;
  margin-bottom: .1em;
  font-size: 1.5em;
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}
.global-sidenav a:after {
  content: "";
  display: block;
  font-size: .8em;
  line-height: 1.2;
}
.global-sidenav span {
  display: none;
}
.global-sidenav .mail:before {
  content: "\e902";
}
.global-sidenav .mail:after {
  content: "MAIL";
}
.global-sidenav .sitemap:before {
  content: "\e903";
}
.global-sidenav .sitemap:after {
  content: "SITE MAP";
}
.global-sidenav .sitelink:before {
  content: "\e901";
}
.global-sidenav .sitelink:after {
  content: "LINK";
}
.global-sidenav .pagetop:before {
  content: "\e900";
}
.global-sidenav .pagetop:after {
  content: "PAGE TOP";
}
.global-sidenav .facebook:before,
.global-sidenav .instagram:before,
.global-sidenav .app:before {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  margin: auto;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}
.global-sidenav .facebook:before {
  background-image: url(../img/base/facebook.png);
}
.global-sidenav .instagram:before {
  background-image: url(../img/base/instagram.png);
}
.global-sidenav .app:before {
  background-image: url(../img/base/app.png);
}

/* --------------------------------

  プリント

-------------------------------- */
@media print {
  html,
  body {
    width: 1100px;
    background: none;
  }
}
/* --------------------------------

  id01 トップページ

-------------------------------- */
/* トップページ内共通 */
.section {
  max-width: 1100px;
  margin: auto;
}
.section:not(:last-child) {
  margin-bottom: 3rem;
}
@media screen and (min-width: 1101px), print {
  .section:not(:last-child) {
    margin-bottom: 4rem;
  }
}
.section-header {
  position: relative;
  margin-bottom: 1.5em;
  padding: .8em 1em 1em;
  text-align: center;
  border-radius: 8px;
  border: 1px solid #3bb8eb;
  background-color: #fff;
}
@media screen and (min-width: 1101px), print {
  .section-header {
    padding: 1em 1em .6em;
    text-align: left;
  }
}
.section-header:after {
  content: "";
  display: table;
  clear: both;
}
.section h2 {
  margin-bottom: .5em;
}
@media screen and (min-width: 1101px), print {
  .section h2 {
    float: left;
    width: 100%;
    margin-right: -70px;
    padding-right: 74px;
    margin-bottom: 0;
  }
}
.section h2 span:first-child {
  display: block;
  height: 28px;
  padding: 0 1em;
  font-size: .9em;
  line-height: 30px;
}
@media screen and (min-width: 1101px), print {
  .section h2 span:first-child {
    float: right;
    background-color: #eee;
  }
}
.section h2 span:last-child {
  display: block;
  font-size: 1.8em;
  font-weight: 800;
  line-height: 1;
}
@media screen and (min-width: 1101px), print {
  .section h2 span:last-child {
    float: left;
    font-size: 2.4em;
  }
}
.section h2 span:last-child:first-letter {
  color: #3bb8eb;
}
.section .link-button {
  display: inline-block;
  position: relative;
  width: 70px;
  height: 28px;
  padding: 0 1em;
  font-size: .9em;
  line-height: 30px;
  z-index: 10;
}
@media screen and (min-width: 1101px), print {
  .section .link-button {
    float: right;
  }
}

/* 講習会情報 */
@media screen and (min-width: 1281px), print {
  .section-info .inner {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

/* お知らせ情報 */
/* フェイスブック */
@media screen and (min-width: 1101px), print {
  .section-facebook {
    float: left;
    width: 50%;
    max-width: none;
  }
  .section-facebook .inner {
    max-width: 550px;
    padding-right: 50px;
    margin-right: 0;
  }
}
.section-facebook .facebook-area {
  max-width: 500px;
  margin: auto;
  min-height: 500px;
}
.section-facebook .fb_iframe_widget,
.section-facebook .fb_iframe_widget span,
.section-facebook .fb_iframe_widget iframe[style] {
  width: 100% !important;
}

/* バナー（画像）*/
@media screen and (min-width: 1101px), print {
  .section-banner {
    float: right;
    width: 50%;
    max-width: none;
  }
  .section-banner .inner {
    max-width: 600px;
    margin-left: -50px;
    padding-left: 20px;
  }
}
@media screen and (min-width: 1281px), print {
  .section-banner .inner {
    padding-left: 50px;
  }
}
.section-banner .bnr-list.large {
  max-width: 800px;
  margin: auto;
  overflow: hidden;
}
@media screen and (min-width: 1101px), print {
  .section-banner .bnr-list.large {
    max-width: none;
    margin: 0 -25px 0 0;
  }
}
.section-banner .bnr-list.large li {
  float: left;
  width: 100%;
  padding: 0 5px 25px;
}
@media screen and (min-width: 481px), print {
  .section-banner .bnr-list.large li {
    width: 50%;
  }
}
@media screen and (min-width: 1101px), print {
  .section-banner .bnr-list.large li {
    float: none;
    width: auto;
    padding: 0 25px 25px 0;
  }
}
.section-banner .bnr-list.large img {
  width: 100%;
}
.section-banner .bnr-list.small {
  max-width: 500px;
  margin: auto;
  overflow: hidden;
}
@media screen and (min-width: 1101px), print {
  .section-banner .bnr-list.small {
    max-width: none;
    margin: 0 -10px -10px 0;
  }
}
.section-banner .bnr-list.small li {
  float: left;
  width: 33.33333%;
  padding: 0 5px;
}
@media screen and (min-width: 1101px), print {
  .section-banner .bnr-list.small li {
    padding: 0 10px 10px 0;
  }
}
.section-banner .bnr-list.small img {
  width: 100%;
}

/* バナー（スライダー）*/
.section-bnr-slider {
  clear: both;
  max-width: none;
  margin: 0 -1em;
  padding: 3em 0 1.5em;
  background: url(../img/base/dot.png);
}
@media screen and (min-width: 1101px), print {
  .section-bnr-slider {
    margin: 0 0 0 -2em;
    padding: 3em 45px 1.5em 50px;
  }
}
@media screen and (min-width: 1601px), print {
  .section-bnr-slider {
    margin-right: 200px;
    padding-right: 70px;
  }
}
.section-bnr-slider .inner {
  max-width: none;
}
.section-bnr-slider .bnr-slider {
  max-width: 1800px;
  margin: 0 0 0 auto;
}
.section-bnr-slider .bnr-slider li {
  width: 200px;
}
.section-bnr-slider .bnr-slider a {
  display: block;
  font-size: .8em;
  color: #333;
}
.section-bnr-slider .bnr-slider a:hover {
  color: #3bb8eb;
}
.section-bnr-slider .bnr-slider a:hover img {
  border-color: #3bb8eb;
}
.section-bnr-slider .bnr-slider img {
  display: block;
  margin: auto;
  border: 1px solid #eee;
}
.section-bnr-slider .bnr-slider p {
  display: table;
  width: 100%;
  height: 44px;
}
.section-bnr-slider .bnr-slider span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  line-height: 1.2;
}
.section-bnr-slider .bnr-slider span span {
  display: block;
}
.section-bnr-slider .bnr-arrow {
  display: block;
  position: relative;
  margin-top: 1em;
  text-align: center;
}
@media screen and (min-width: 1101px), print {
  .section-bnr-slider .bnr-arrow {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 1800px;
    height: 1px;
    margin: auto;
  }
}
.section-bnr-slider .bnr-arrow-item {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 28px;
  height: 28px;
  line-height: 28px;
  margin: 0 15px;
  border-radius: 100%;
  background-color: #3bb8eb;
  cursor: pointer;
}
@media screen and (min-width: 1101px), print {
  .section-bnr-slider .bnr-arrow-item {
    display: block;
    position: absolute;
    top: -24px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    margin: 0;
    text-align: center;
  }
}
.section-bnr-slider .bnr-arrow-item:before {
  color: #fff;
  font-size: .7em;
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
}
.section-bnr-slider .bnr-arrow-prev:before {
  content: "\e906";
}
@media screen and (min-width: 1101px), print {
  .section-bnr-slider .bnr-arrow-prev {
    left: -30px;
  }
}
.section-bnr-slider .bnr-arrow-next:before {
  content: "\e907";
}
@media screen and (min-width: 1101px), print {
  .section-bnr-slider .bnr-arrow-next {
    right: -30px;
  }
}

/* --------------------------------

  idxx 講習会情報

-------------------------------- */
/* 講習会情報ページ共通 */
.seminar:not(:last-child) {
  margin-bottom: 3em;
  padding-bottom: 3em;
  border-bottom: 1px solid #eee;
}
@media screen and (min-width: 1101px), print {
  .seminar .inner {
    padding: 0 1.5em;
  }
}
@media screen and (min-width: 1101px), print {
  .seminar-main {
    float: right;
    width: 100%;
    margin: 0 0 0 -220px;
    padding-left: 240px;
  }
}
.seminar-side {
  margin-bottom: 3em;
}
@media screen and (min-width: 1101px), print {
  .seminar-side {
    float: left;
    width: 220px;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
  }
}
.seminar-mainimg {
  display: block;
  float: left;
  width: 37%;
  margin-bottom: 2em;
  padding-right: 5px;
}
@media screen and (min-width: 641px), print {
  .seminar-mainimg {
    padding-right: 1em;
  }
}
@media screen and (min-width: 1101px), print {
  .seminar-mainimg {
    padding-right: 20px;
  }
}
.seminar-mainimg img {
  width: 100%;
}
@media screen and (min-width: 1101px), print {
  .seminar-mainimg img {
    border: 7px solid #eee;
  }
}
.seminar-table {
  display: block;
  float: right;
  width: 63%;
}
.seminar-table tbody {
  display: block;
}
.seminar-table tr {
  display: table;
  width: 100%;
  margin-bottom: 3px;
  font-size: .9em;
}
@media screen and (max-width: 480px) {
  .seminar-table tr {
    display: block;
  }
}
.seminar-table th {
  width: 120px;
  padding: .6em 1em .5em;
  background-color: #eee;
}
@media screen and (max-width: 480px) {
  .seminar-table th {
    display: block;
    width: auto;
    padding: .4em .5em .3em;
  }
}
.seminar-table td {
  padding: .6em 1em .5em;
  border: 1px solid #eee;
  background-color: #fff;
}
@media screen and (max-width: 480px) {
  .seminar-table td {
    display: block;
    padding: .4em .5em .3em;
    font-size: .9em;
  }
}
.seminar .seminar-target {
  padding: .5em .2em;
}
@media screen and (min-width: 1101px), print {
  .seminar .seminar-target {
    padding: 0;
  }
}
.seminar .seminar-target li {
  display: inline-block;
  vertical-align: top;
  margin: .2em 0;
  padding: .2em .9em .3em;
  text-indent: 0;
  color: #fff;
  background-color: #3bb8eb;
}
@media screen and (min-width: 1101px), print {
  .seminar .seminar-target li {
    font-size: .9em;
  }
}
.seminar .seminar-target li:before {
  display: none;
}
.seminar-entry {
  clear: both;
  text-align: center;
}
@media screen and (min-width: 641px), print {
  .seminar-entry {
    width: 63%;
    margin: 0 0 0 auto;
  }
}
.seminar .accordion-button {
  float: right;
  clear: right;
  margin-top: .5em;
  margin-bottom: 2em;
  font-size: .9em;
  cursor: pointer;
  border: none;
  outline: none;
}
@media screen and (min-width: 641px), print {
  .seminar .accordion-button {
    display: none;
  }
}
.seminar .accordion-panel {
  clear: both;
  float: none;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.3s ease-out;
  transition: max-height 0.3s ease-out;
}
.seminar .accordion-panel tbody {
  padding-bottom: 2em;
}
@media screen and (min-width: 641px), print {
  .seminar .accordion-panel {
    clear: right;
    float: right;
    width: 63%;
    max-height: none !important;
  }
}

/* 講習会検索メニューA */
.seminar-search-menu:not(:last-child) {
  margin-bottom: 1.5em;
}
@media screen and (max-width: 1100px) {
  .seminar-search-menu:not(:last-child) {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 360px) {
  .seminar-search-menu:first-child li {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }
}
.seminar-search-menu h3 {
  padding: .6em .8em .5em;
  color: #fff;
  font-weight: 800;
  background-color: #e73e0c;
}
@media screen and (max-width: 1100px) {
  .seminar-search-menu h3 {
    cursor: pointer;
  }
  .seminar-search-menu h3:before {
    content: "\e904";
    display: inline-block;
    vertical-align: middle;
    margin: .1em .5em 0 0;
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  }
  .seminar-search-menu h3.active {
    background-color: #3bb8eb;
  }
  .seminar-search-menu h3.active:before {
    content: "\e905";
  }
}
.seminar-search-menu ul {
  position: relative;
  padding-bottom: 1px;
}
@media screen and (max-width: 1100px) {
  .seminar-search-menu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }
}
.seminar-search-menu ul li {
  margin: 0 0 -1px;
  padding: 0;
  text-indent: 0;
}
.seminar-search-menu ul li:before {
  display: none;
}
@media screen and (max-width: 1100px) {
  .seminar-search-menu ul li {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }
}
@media screen and (max-width: 360px) {
  .seminar-search-menu ul li {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}
.seminar-search-menu a {
  display: block;
  height: 100%;
  padding: .65em 1em .5em 1em;
  font-size: .9em;
  color: #333;
  border-bottom: 1px dotted #ccc;
}
.seminar-search-menu a:hover {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #8bddff;
  background-color: #8bddff;
}
.seminar-search-menu .accordion-panel {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.2s ease-out;
  transition: max-height 0.2s ease-out;
}
@media screen and (min-width: 1101px), print {
  .seminar-search-menu .accordion-panel {
    max-height: none !important;
  }
}

/* 講習会検索メニューB */
.seminar-menu {
  display: block;
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  padding: 2em;
  background: rgba(85, 85, 85, 0.9);
  -webkit-transition: right .25s;
  transition: right .25s;
  z-index: 1001;
}
@media screen and (max-width: 1100px) {
  .seminar-menu {
    padding: 6em 2em 2em;
    z-index: 998;
  }
}
@media screen and (max-width: 640px) {
  .seminar-menu {
    padding: 60px 0 0;
  }
}
.seminar-menu-open .seminar-menu {
  right: 0;
}
.seminar-menu-content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.seminar-menu-content section {
  padding: 1.5em 1.5em 0;
}
.seminar-menu-content section:last-child {
  padding-bottom: 1.5em;
}
.seminar-menu-content h3 {
  padding-bottom: .2em;
  color: #fff;
  font-size: 1.2em;
  border-bottom: 1px solid #fff;
}
.seminar-menu-content ul {
  margin-top: 1em;
}
.seminar-menu-content li {
  display: inline-block;
  vertical-align: top;
}
.seminar-menu-content a {
  display: block;
  padding: .5em;
  color: #fff;
}
.seminar-menu-content a:hover {
  text-decoration: none;
  background-color: #e73e0c;
}
.seminar-menu-button {
  display: block;
  position: fixed;
  right: 0;
  bottom: 0;
  width: 60px;
  height: 60px;
  background-color: #3bb8eb;
  cursor: pointer;
  outline: none;
  z-index: 1002;
}
.seminar-menu-open .seminar-menu-button {
  background-color: #e73e0c;
}
.seminar-menu-button i {
  display: block;
  padding: .4em 0 .1em;
  color: #fff;
  text-align: center;
}
.seminar-menu-button i:before {
  font-size: 1.5rem;
}
.seminar-menu-button span {
  display: block;
  text-align: center;
  font-size: .8em;
  line-height: 1.2;
  color: #fff;
}
@media screen and (max-width: 1100px) {
  .seminar-menu-button {
    top: 0;
    bottom: auto;
    z-index: 999;
  }
}
.seminar-menu-screen {
  display: none;
}
@media screen and (max-width: 1100px) {
  .seminar-menu-screen {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    background: #000;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: .2s;
    transition: .2s;
    z-index: 997;
  }
  .edu-menu-open .seminar-menu-screen {
    visibility: visible;
    opacity: .4;
    cursor: pointer;
  }
}

/* --------------------------------

  id02 サポート

-------------------------------- */
/* ページ内共通 */
.support-page .main {
  position: static;
}
.support-description {
  margin-bottom: 3em;
}
.support-description:after {
  content: "";
  display: table;
  clear: both;
}
.support-img {
  text-align: center;
}
.support-img:after {
  content: "";
  display: table;
  clear: both;
}
.support-img-twin img {
  display: block;
  float: left;
  width: 50%;
}
.support-img-right {
  max-width: 600px;
  margin: 1em auto 1em;
}
@media screen and (min-width: 769px), print {
  .support-img-right {
    float: right;
    width: 60%;
    margin: 1em 0 0 1em;
  }
}
.support-img-right2 {
  max-width: 300px;
  margin: 1em auto 1em;
}
@media screen and (min-width: 769px), print {
  .support-img-right2 {
    float: right;
    width: 32%;
    margin: 1em 0 0 1em;
  }
}
.support-img-center {
  max-width: 600px;
  margin: 0 auto 1em;
}
@media screen and (min-width: 769px), print {
  .support-img-center {
    width: 60%;
  }
}
.support-img-center img {
  display: block;
  float: left;
  width: 50%;
}
.support-img-bsa, .support-img-bkc {
  margin-bottom: 1em;
}
@media screen and (min-width: 641px), print {
  .support-img-bsa, .support-img-bkc {
    float: right;
    width: 43%;
    margin: 0 0 .5em 1em;
  }
}
.support-bkc-description, .support-partners {
  margin-top: 1em;
}
.support-bkc-description dt, .support-partners dt {
  font-size: 1.1em;
}
.support-bkc-description dt:first-letter, .support-partners dt:first-letter {
  color: #3bb8eb;
}
.support-bkc-description dd, .support-partners dd {
  margin-top: .3em;
  margin-left: 2em;
  text-indent: -1em;
  line-height: 1.5;
}
.support-bkc-description dd:before, .support-partners dd:before {
  content: "・";
}
.main .support-sublist {
  margin-top: 1em;
}
.main .support-sublist > li:before {
  color: #3bb8eb;
}

/* 新規開業 */
.open-support {
  margin-top: 2em;
}
.open-support ol {
  counter-reset: open_support;
}
.open-support li:not(:last-child) {
  margin-bottom: 1.5em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid #eee;
}
.open-support dl {
  position: relative;
}
@media screen and (min-width: 769px), print {
  .open-support dl {
    padding-left: 35px;
  }
}
.open-support dl:before {
  counter-increment: open_support;
  content: counter(open_support) ". ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 2em;
  line-height: 1;
}
.open-support dt {
  margin-bottom: .5em;
  padding-top: .2em;
  font-size: 1.2em;
  font-weight: 800;
  padding-left: 40px;
  line-height: 1.5;
}
@media screen and (min-width: 769px), print {
  .open-support dt {
    padding-left: 0;
  }
}
.open-support dd:after {
  content: "";
  display: table;
  clear: both;
}
.open-support img {
  display: block;
  margin: 1em auto;
}
@media screen and (min-width: 641px), print {
  .open-support img {
    float: right;
    width: 40%;
    max-width: 280px;
    margin: 5px 0 0 1em;
  }
}

/* --------------------------------

  id03 取り扱いメーカー

-------------------------------- */
/* メーカー一覧 */
.makers-list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  margin: 0 -8px 3rem 0;
  overflow: hidden;
}
@media screen and (min-width: 641px), print {
  .makers-list ul {
    margin: 0 -15px 3rem 0;
  }
}
.makers-list li {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%;
  padding: 0 8px 8px 0;
}
@media screen and (min-width: 641px), print {
  .makers-list li {
    -ms-flex-preferred-size: 33.33333%;
    flex-basis: 33.33333%;
    max-width: 33.33333%;
    padding: 0 15px 15px 0;
  }
}
.makers-list a,
.makers-list span.a {
  display: block;
  height: 100%;
  padding: 1em;
  color: #333;
  text-align: center;
  border-radius: 10px;
  border: 1px solid #3bb8eb;
}
.makers-list a:hover {
  color: #e75192;
  border-color: #e75192;
  text-decoration: none;
}
.makers-list a:hover .imgwrap {
  opacity: .8;
}
.makers-list .imgwrap {
  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;
  height: 80px;
}
.makers-list .imgwrap img {
  max-width: 70%;
  max-height: 80%;
}
@media screen and (min-width: 641px), print {
  .makers-list .imgwrap {
    height: 150px;
  }
  .makers-list .imgwrap img {
    max-width: 100%;
  }
}
.makers-list .txtwrap {
  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;
  height: 35px;
  font-size: .8em;
  line-height: 1.5;
}

/* --------------------------------

  id04 リクルート

-------------------------------- */
.recruit-main {
  margin-bottom: 1em;
}
@media screen and (min-width: 769px), print {
  .recruit-main {
    float: left;
    width: 100%;
    margin-right: -50%;
    padding-right: 51%;
  }
}
@media screen and (min-width: 1101px), print {
  .recruit-main {
    margin-right: -460px;
    padding-right: 475px;
  }
}
@media screen and (min-width: 769px), print {
  .recruit-side {
    float: right;
    width: 50%;
    position: relative;
    z-index: 1;
  }
}
@media screen and (min-width: 1101px), print {
  .recruit-side {
    width: 460px;
  }
}
.recruit-foot {
  clear: both;
  padding-top: 2em;
}
.recruit-sample {
  margin-right: -1em;
  overflow: hidden;
}
.recruit-sample li {
  float: left;
  width: 50%;
  padding-right: 1em;
  line-height: 1.5;
}
.recruit-sample p {
  font-size: .8em;
}
.recruit-sample img {
  display: block;
  width: 100%;
  margin: auto;
  margin-bottom: .5em;
}
.recruit-table {
  display: block;
}
.recruit-table tbody {
  display: block;
}
.recruit-table tr {
  display: table;
  width: 100%;
  margin-bottom: -1px;
}
@media screen and (max-width: 640px) {
  .recruit-table tr {
    display: block;
    margin-bottom: 0;
  }
  .recruit-table tr:not(:last-child) {
    margin-bottom: 1em;
  }
}
.recruit-table th {
  vertical-align: top;
  width: 330px;
  padding: .5em;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
@media screen and (max-width: 1100px) {
  .recruit-table th {
    width: 190px;
  }
}
@media screen and (max-width: 640px) {
  .recruit-table th {
    display: block;
    width: auto;
    padding: .6em 1em .5em;
    border: none;
    color: #fff;
    background-color: #377b39;
  }
}
.recruit-table td {
  vertical-align: top;
  padding: .5em;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
@media screen and (max-width: 640px) {
  .recruit-table td {
    display: block;
    padding: .6em 1em .5em;
    border: 1px solid #eee;
    border-top: none;
  }
}

/* --------------------------------

  id05 会社情報

-------------------------------- */
.company-page .main {
  position: static;
}

/* アンカーメニュー */
.anchor-menu {
  padding:0 0 60px;
}
@media screen and (max-width: 1100px), print {
  .anchor-menu {
    padding:0 0 50px;
    margin-top:-50px;
  }
}
.anchor-menu ul {
  margin: 0 -5px -5px 0;
  text-align: center;
}
@media screen and (min-width: 1201px), print {
  .anchor-menu ul {
    margin: 0;
  }
}
.anchor-menu ul:after {
  content: "";
  display: table;
  clear: both;
}
.anchor-menu li {
  display: block;
  padding: 0 5px 5px 0;
}
@media screen and (min-width: 481px), print {
  .anchor-menu li {
    float: left;
    width: 50%;
  }
}
@media screen and (min-width: 1101px), print {
  .anchor-menu li {
    width: 33.33333%;
  }
}
@media screen and (min-width: 1201px), print {
  .anchor-menu li {
    display: inline-block;
    vertical-align: top;
    float: none;
    width: auto;
    margin: 0 .2em;
    padding: 0;
  }
}
.anchor-menu a {
  display: block;
  padding: .8em 0;
  font-size: 1em;
}
@media screen and (min-width: 1101px), print {
  .anchor-menu a {
    padding: .8em 1.5em;
  }
}
.anchor-menu a:before {
  content: "\e904";
}

/* 右上固定用 */
.anchor-menu-fixed {
  display: none;
}
@media screen and (min-width: 1101px), print {
  .anchor-menu-fixed {
    display: block;
    position: fixed;
    top: 150px;
    right: -100%;
    z-index: 1001;
    opacity: 0;
    -webkit-transition: .5s;
    transition: .5s;
  }
  .anchor-menu-fixed.fixed {
    right: 0;
    opacity: 1;
  }
}
.anchor-menu-fixed a {
  display: block;
  height: 38px;
  padding: 0 .5em 0 1em;
  text-align: left;
  font-size: .9em;
  line-height: 37px;
  border-bottom: 1px solid #fff;
  background-color: rgba(59, 184, 235, 0.9);
}
.anchor-menu-fixed a:hover {
  background-color: #3bb8eb;
}
.anchor-menu-fixed a.active {
  background-color: #e75192;
}
.anchor-menu-fixed a.external {
  text-align: center;
  border-bottom: none;
}
.anchor-menu-fixed a.external:before {
  content: "\e905";
}

/* 会長・社長写真 */
.president-photo {
  width: 170px;
  margin: .5em auto 1em;
  text-align: center;
}
@media screen and (min-width: 641px), print {
  .president-photo {
    float: right;
    margin: 0 0 0 1.5em;
  }
}
.president-photo figcaption {
  margin-top: .5em;
}
.president-photo figcaption img {
  display: inline-block;
  vertical-align: top;
  margin-top: -5px;
}

/* 企業理念 */
.company-policy {
  margin: 1em 0 1em;
}
.company-policy span {
  font-size: 1.1em;
  line-height: 1.5;
  color: #3bb8eb;
  text-align: center;
}
@media screen and (min-width: 641px), print {
  .company-policy span {
    display: block;
    font-size: 1.3em;
  }
}
@media screen and (min-width: 641px), print {
  .company-policy-main {
    float: left;
    width: 100%;
    margin: 0 -26% 0 0;
    padding-right: 28%;
  }
}
.company-policy-side {
  margin-bottom: 1em;
  text-align: center;
}
@media screen and (min-width: 641px), print {
  .company-policy-side {
    float: right;
    width: 26%;
    margin-top: 5px;
    margin-bottom: 0;
    position: relative;
    text-align: right;
    z-index: 1;
  }
  .company-policy-side img {
    width: 100%;
  }
}

/* ロゴと社名紹介 */
.company-logoname {
  position: relative;
}
@media screen and (min-width: 769px), print {
  .company-logoname {
    padding-left: 47%;
  }
}
.company-logoname img {
  display: block;
  width: 250px;
  margin: 2em auto 1em;
}
@media screen and (min-width: 769px), print {
  .company-logoname img {
    position: absolute;
    top: 0;
    left: 0;
    width: 44%;
    margin-bottom: 0;
  }
}
.company-logoname br {
  display: none;
}
@media screen and (min-width: 641px), print {
  .company-logoname br {
    display: block;
  }
}
.company-logoname dl {
  margin-top: .5em;
  border-top: 1px solid #eee;
}
.company-logoname dt {
  float: left;
  clear: left;
  padding: .4em 0 .4em .5em;
  color: #3bb8eb;
  font-weight: 800;
}
.company-logoname dd {
  padding: .4em 0 .4em 7.5em;
  border-bottom: 1px solid #eee;
}

/* 会社概要、会社沿革 */
.company-outline,
.company-history {
  line-height: 1.5;
}
.company-outline:after,
.company-history:after {
  content: "";
  display: table;
  clear: both;
}
.company-outline dt,
.company-history dt {
  margin-bottom: .3em;
  font-size: 1.1em;
}
@media screen and (min-width: 641px), print {
  .company-outline dt,
  .company-history dt {
    float: left;
    clear: left;
    margin-bottom: 0;
    font-size: 1em;
  }
}
.company-outline dd,
.company-history dd {
  margin-left: 1.1em;
}
.company-outline dd:not(:last-child),
.company-history dd:not(:last-child) {
  margin-bottom: .5em;
}
@media screen and (min-width: 641px), print {
  .company-outline dd,
  .company-history dd {
    margin-left: 8em;
  }
}

/* 会社概要 */
.outline-section .group-list {
  margin-left: 1em;
}
.outline-section .group-list li {
  list-style-type: square;
}
.outline-section .group-list li:not(:last-child) {
  margin-bottom: .3em;
}
.outline-section .member-list {
  max-width: 300px;
}
.outline-section .member-list li:after {
  content: "";
  display: table;
  clear: both;
}
.outline-section .member-list span {
  display: block;
  float: right;
}

/* 事業内容 */
.company-service-description {
  padding: 1em 0;
  text-align: center;
}
.company-service-list {
  text-align: center;
}
.company-service-list ul {
  margin: 1.5em 0 3em;
}
.company-service-list ul > li {
  display: inline-block;
  vertical-align: top;
  margin: .5em .5em 0;
}
@media screen and (min-width: 769px), print {
  .company-service-list ul > li {
    margin: .5em 1em 0;
  }
}
.company-service-list .item {
  display: table;
  width: 80px;
  height: 80px;
  font-size: 1.5em;
  border-radius: 100%;
  border: 1px solid #3bb8eb;
}
@media screen and (min-width: 481px), print {
  .company-service-list .item {
    width: 110px;
    height: 110px;
  }
}
@media screen and (min-width: 641px), print {
  .company-service-list .item {
    width: 130px;
    height: 130px;
    font-size: 2.5em;
  }
}
@media screen and (min-width: 1101px), print {
  .company-service-list .item {
    width: 170px;
    height: 170px;
    font-size: 3em;
  }
}
.company-service-list .item p {
  display: table-cell;
  vertical-align: middle;
}
.company-service-list .item span {
  display: block;
  line-height: 1;
  color: #3bb8eb;
  font-family: SourceHanSerifJP, "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.company-service-list .service1 span:last-child {
  margin-top: .2em;
  font-size: .7em;
}
.company-service-item {
  position: relative;
  margin-top: 3em;
}
.company-service-item h3 {
  margin-bottom: .5em;
  padding-bottom: .5em;
  border-bottom: 1px solid #3bb8eb;
}
.company-service-item h3 span {
  display: block;
  color: #3bb8eb;
  font-family: SourceHanSerifJP, "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 2em;
  line-height: 1;
}
@media screen and (min-width: 641px), print {
  .company-service-item h3 span {
    display: inline-block;
    vertical-align: middle;
    margin: -.2em .5em 0 0;
  }
}
.company-service-item .more {
  margin-top: .5em;
  text-align: left;
}
.company-service-item .link-button {
  font-size: .8em;
}

/* 活動拠点 */
.base-section .inner {
  padding-right: 0;
}

.company-base-side {
  text-align: center;
}
@media screen and (min-width: 769px), print {
  .company-base-side {
    float: left;
    width: 50%;
    position: relative;
    z-index: 1;
  }
  .company-base-side img {
    width: 100%;
  }
}
@media screen and (min-width: 1101px), print {
  .company-base-side {
    width: 460px;
  }
}
@media screen and (min-width: 769px), print {
  .company-base-main {
    float: right;
    width: 100%;
    margin-left: -50%;
    padding-left: 52%;
  }
}
@media screen and (min-width: 1101px), print {
  .company-base-main {
    margin-left: -480px;
    padding-left: 500px;
  }
}
.company-base-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  margin: 0 -1em -1em 0;
}
.company-base-list dl {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%;
  position: relative;
  padding: 0 1em 1em 0;
  line-height: 1.5;
}
@media screen and (min-width: 1101px), print {
  .company-base-list dl {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}
.company-base-list dd {
  font-size: .9em;
}
.company-base-list .add {
  margin-bottom: .2em;
}
.company-base-list .tel,
.company-base-list .fax {
  display: inline-block;
  vertical-align: top;
  margin-right: 1em;
}
.company-base-list .map {
  color: #333;
}
.company-base-list .map:hover {
  color: #3bb8eb;
  text-decoration: none;
}
.company-base-list .map:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  margin: -.2em 0 0 .3em;
  background: url(../img/pages/company/marker.png) center no-repeat;
  background-size: contain;
}
.company-base-list .map span {
  display: inline-block;
  margin-right: .3em;
}
.company-base-list a.tel-link {
  color: #333;
}
.company-base-list a.tel-link:hover {
  color: #3bb8eb;
  text-decoration: none;
}

/* ビューティロジセンター */
/* Japan Beauty Academy */
/* ビューティサービス・スーパーバイザーとは */
@media screen and (min-width: 1101px), print {
  .logistic .layout-main,
  .jbacademy .layout-main,
  .bsa-about .layout-main {
    float: left;
    width: 100%;
    margin: 0 -48% 0 0;
    padding-right: 50%;
  }
}
.logistic .layout-side,
.jbacademy .layout-side,
.bsa-about .layout-side {
  margin-bottom: 1em;
  text-align: center;
}
@media screen and (min-width: 1101px), print {
  .logistic .layout-side,
  .jbacademy .layout-side,
  .bsa-about .layout-side {
    float: right;
    width: 48%;
    margin-top: 5px;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
  }
}

/* ビューティサービス・スーパーバイザー 理事長あいさつ */
@media screen and (min-width: 1101px), print {
  .bsa-greeting .layout-main {
    float: right;
    width: 100%;
    margin: 0 0 0 -173px;
    padding-left: 193px;
  }
}
.bsa-greeting .layout-side {
  margin-bottom: 1em;
  text-align: center;
}
@media screen and (min-width: 1101px), print {
  .bsa-greeting .layout-side {
    float: left;
    width: 173px;
    margin-top: 5px;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
  }
}
.bsa-greeting .name {
  text-align: right;
}
.bsa-greeting .name span {
  display: block;
}

/* --------------------------------

  id06 リンク

-------------------------------- */
/* リンク一覧 */
.links-list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  margin: 0 -10px -10px 0;
}
@media screen and (min-width: 769px), print {
  .links-list ul {
    margin: 0 -15px -15px 0;
  }
}
@media screen and (min-width: 1101px), print {
  .links-list ul {
    margin: 0 -35px -35px 0;
  }
}
.links-list li {
  -ms-flex-preferred-size: 33.33333%;
  flex-basis: 33.33333%;
  max-width: 33.33333%;
  padding: 0 10px 10px 0;
  text-align: center;
}
@media screen and (min-width: 481px), print {
  .links-list li {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
  }
}
@media screen and (min-width: 769px), print {
  .links-list li {
    -ms-flex-preferred-size: 16.66667%;
    flex-basis: 16.66667%;
    max-width: 16.66667%;
    padding: 0 15px 15px 0;
  }
}
@media screen and (min-width: 1101px), print {
  .links-list li {
    padding: 0 35px 35px 0;
  }
}
.links-list a:hover {
  opacity: .8;
}
.links-list img {
  display: block;
  width: 100%;
}

/* --------------------------------

  id07 サイトマップ

-------------------------------- */
.sitemapList li {
  margin-bottom: 1em;
  font-size: 1.2em;
}

/* 202107 追加  ------------------------------- */

/* --------------------------------

  common

-------------------------------- */
:root {
  --dk_blue: #2A4F9D;
  --blue:#4488C9;
  --sky_blue:#76C0E0;
  --l_blue:#ECF3FA;
}
span.blank{
    padding-right:.3em;
}
.en{
  font-family: 'Marcellus';
}

/* --------------------------------

  transition

-------------------------------- */

.header-logo h1 a,.header,.header-logo,.main-nav .nav-link,.main-nav .nav-link:before,.header_sns a,.header_contact a,.header_contact a:before,.nav-button-icon,.nav-button-icon:before,.nav-button-icon:after,.nav-button,.button_cover a,.button_cover:before,.button_cover:after,.news_contents a,.news_contents a .news_cover img,.footer_sns a,.footer_nav ul li a,.footer_nav ul li a:before,.nav,.button_cover a .arrow_cover,.button_cover a .arrow_cover .arrow,.button_cover a .arrow_cover .arrow span,.button_cover a .square_cover .square:before,.bottom_link_inner .inner_cover a img,.bottom_link_inner .inner_cover a:before,.bottom_link_inner .inner_cover a:after,.bottom_link_inner .inner_cover a .arrow_cover .arrow,.bottom_link_inner .inner_cover a .arrow_cover,.footer_contact_area .contact_cover a:after,.footer_contact_area .contact_cover a .arrow_cover,.footer_contact_area .contact_cover a .arrow_cover .arrow,.top_info_area a,.top_info_area a:after,.top_info_area a:before,.button_cover a:before,.logo_inner a{
  transition:.3s;
}
.button_cover a .square_cover .square:after{
  transition:.2s;
}
.fadein span , .fadein .fadein_contents, .slidein{
  transition:.8s;
}
.front_page_body .wrapper,.top_slide_area,.top_slide_area:before{
  transition:1.5s;
}

/* --------------------------------

  animation

-------------------------------- */

/*.opening_animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 999999;
}
.animation_wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cover {
    width: 500px;
    height: 500px;
    position: relative;
}
.cover .logo_parts{
  position: absolute;
}*/
.fadein span , .fadein .fadein_contents{
  opacity:0;
  transform:translateX(20px);
  display:inline-block;
}
.fadein.active span , .fadein.active .fadein_contents{
  opacity:1;
  transform:translateX(0);
}
.fadein span:nth-child(1){transition-delay:.1s;}
.fadein span:nth-child(2){transition-delay:.15s;}
.fadein span:nth-child(3){transition-delay:.2s;}
.fadein span:nth-child(4){transition-delay:.25s;}
.fadein span:nth-child(5){transition-delay:.3s;}
.fadein span:nth-child(6){transition-delay:.35s;}
.fadein span:nth-child(7){transition-delay:.4s;}
.fadein span:nth-child(8){transition-delay:.45s;}
.fadein span:nth-child(9){transition-delay:.5s;}
.fadein span:nth-child(10){transition-delay:.55s;}
.fadein span:nth-child(11){transition-delay:.6s;}
.fadein span:nth-child(12){transition-delay:.65s;}
.fadein span:nth-child(13){transition-delay:.7s;}
.fadein span:nth-child(14){transition-delay:.75s;}
.fadein span:nth-child(15){transition-delay:.8s;}
.fadein span:nth-child(16){transition-delay:.85s;}
.fadein span:nth-child(17){transition-delay:.9s;}
.fadein span:nth-child(18){transition-delay:.95s;}
.fadein span:nth-child(19){transition-delay:1s;}
.fadein span:nth-child(20){transition-delay:1.5s;}
.slidein{
  opacity:0;
  transform:translateY(20px);
}
.slidein.active{
  opacity:1;
  transform:translateY(0);
}
.expansion{
  overflow:hidden;
  position:relative;
}
.expansion:before{
  content:'';
  width:100%;
  height:100%;
  z-index:7;
  position:absolute;
  left:0;
  right:auto;
  background:var(--l_blue);
  transition:all .6s ease-in-out .1s;
}
.expansion.active:before{
  width:0;
  left:auto;
  right:0;
}
.expansion img{
  transition:all 2.5s ease-in-out .5s;
  transform:scale(1);
}
.expansion.active img{
  transform:scale(1.1);
}

/*.front_page_body.active .main_catch h2 span{
  opacity:0;
  transform:translateX(3px);
  transition:transform .5s;
}*/

.front_page_body .wrapper,.top_slide_area,.top_slide_area:before{
  opacity:0;
}
.front_page_body.active .wrapper,.top_slide_area.active{
  opacity:1;
}
.top_slide_area{
  transition-delay:.5s;
  transform:translateX(30px);
  position:relative;
}
.top_slide_area.active{
  transform:translateX(0);
}

/* front page body */
.front_page_body{
    background: var(--l_blue);
}
.front_page_body .wrapper,.front_page_body .main{
    background: var(--l_blue)!important;
}
.bold{
    font-weight:bold;
}

/*button*/
.button_cover{
    position:relative;
    height:40px;
    line-height:40px;
}
.button_cover a{
    color:var(--dk_blue);
    font-size:12px;
    display:block;
    padding:0 60px 0 20px;
    height:40px;
    line-height:40px;
    position:relative;
    z-index:50;
}
.button_cover a .arrow_cover {
    position: absolute;
    bottom: 15px;
    right: 20px;
    z-index:10;
}
.button_cover a .arrow_cover .arrow {
    height: 1px;
    width: 25px;
    background: var(--dk_blue);
    position: relative;
}
.button_cover a .arrow_cover .arrow span {
    display: block;
    height: 1px;
    width: 8px;
    background: var(--dk_blue);
    transform: rotate(45deg);
    position: absolute;
    right: 0;
    bottom: 3px;
}
.button_cover a:before{
    content:'';
    position:absolute;
    left:auto;
    right:0;
    width:0;
    background:var(--sky_blue);
    height:40px;
    transform: skew(-18deg);
}
.button_cover a:hover:before{
    width:100%;
    left:0;
    right:auto;
    z-index:-1;
}
.button_cover a:hover{
    color:var(--l_blue);
    text-decoration:none;
}
.button_cover a:hover .arrow_cover{
    right:10px;
}
.button_cover a:hover .arrow_cover .arrow{
    width:30px;
}
.button_cover a:hover .arrow_cover .arrow,.button_cover a:hover .arrow_cover .arrow span{
    background:var(--l_blue);
}
.button_cover a .square_cover{
    position:absolute;
    top:0;
    right:0;
    width:33px;
    height:40px;
}
.button_cover a .square_cover .square{
    position:relative;
}
.button_cover a .square_cover .square:after{
    content: '';
    position: absolute;
    top: 0;
    right:auto;
    left:0;
    width: 33px;
    height: 40px;
    transform: skew(-18deg);
    background: var(--sky_blue);
    z-index: 5;
}
.button_cover a:hover .square_cover .square:after{
    width:0;
    left:auto;
    right:0;
}
.top_main_area{
    display:flex;
    height:100vh;
    position:relative;
}
.top_logo_area{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
}
.logo_cover{
    position:relative;
    width:100%;
    height:100%;
}
.logo_cover .logo_parts{
    position:absolute;
    z-index:6;
    mix-blend-mode: multiply;
}
.logo_cover .logo_parts_01{
    top:12vh;
    left:41vw;
    width:18vw;
}
.logo_cover .logo_parts_02{
    top:34vh;
    left:0;
    width:18vw;
}
.logo_cover .logo_parts_03{
    top:60vh;
    left:27vw;
    width:13vw;
}
.logo_cover .logo_parts_04{
    top:72vh;
    left:77vw;
    width:13vw;
}
.logo_cover .logo_parts_05{
    top:88vh;
    left:-5vw;
    width:30vw;
}
.main_catch {
    position: absolute;
    z-index: 150;
    left: 5vw;
    height: 100vh;
    line-height:1.1;
    display: flex;
    align-items: center;
    z-index: 10;
}
.main_catch h2 {
    font-size: 5.6vw;
    color: var(--dk_blue);
}
.main_catch h2 span{
  display:inline-block;
}
.top_blank{
    width:50%;
}
.top_info_area{
    position:absolute;
    bottom:4vh;
    left:5vw;
    z-index: 11;
}
.top_info_area a{
    color:var(--dk_blue);
    padding:0 0 5px 15px;
    position:relative;
    font-weight:bold;
}
.top_info_area a span{
    padding-right:10px;
    font-weight:bold;
}
.top_info_area a:before{
    content:'';
    width:5px;
    height:5px;
    border-top:1px solid var(--dk_blue);
    border-right:1px solid var(--dk_blue);
    transform:rotate(45deg);
    position:absolute;
    left:0;
    top:4px;
}
.top_info_area a:after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    background: var(--dk_blue);
    right: 0;
    left: auto;
    bottom: 0;
}
.top_info_area a:hover{
    color:var(--dk_blue);
    text-decoration:none;
}
.top_info_area a:hover:after{
    width:100%;
    right:auto;
    left:0;
}
.top_info_area a:hover:before{
    border-color:var(--dk_blue);
}
.top_slide_area{
    width:50%;
    height:100vh;
    z-index:5;
}
.top_slide_area .slide_image{
    width:100%;
    height:100vh;
    overflow: hidden;
}
.top_slide_area .slide_image img{
  width:100%;
  height:100vh;
  object-fit: cover;
}
.top_news_area{
    padding:150px 0;
    overflow-x: hidden;
}
.news_headline_area{
    padding:0 40px;
}
.headline_cover{
    display:flex;
    justify-content: space-between;
}
.headline_cover h2{
    color:var(--dk_blue);
    font-size:36px;
}
.news_slide{
    padding:50px 0 50px 40px;
}
.news_contents a{
    color:var(--dk_blue);
}
.news_contents a:hover{
    color:var(--sky_blue);
    text-decoration: none;
}
.news_contents a .news_cover{
    overflow:hidden;
    width:100%;
    height:12vw;
}
.news_contents a .news_cover img{
    object-fit: cover;
    width:100%;
    height:100%;
}
.news_contents a:hover .news_cover img{
    transform:scale(1.05);
    opacity:.6;
}
.news_bottom{
    padding:20px 0 0;
}
.news_bottom .news_date{
    font-size:12px;
    font-weight:bold;
}
.news_bottom .news_title{
    font-size:14px;
    font-weight:bold;
    padding:10px 0 0;
}
.top_about_area{
    display:flex;
}
.about_description{
    width:50%;
    padding:20px;
    background-image: url(/img/web2021/page_logo.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top 30% left -100px;
}
.description_flex{
    display:flex;
    align-items:center;
    justify-content: center;
    height:100%;
}
.about_description h3{
    color:var(--dk_blue);
}
.about_description h3 p{
    font-size:28px;
    padding:0 0 50px;
}
.about_description h3 p span{
    font-weight:bold;
}
.about_description h3 .s_cover{
    font-size:16px;
    font-weight:normal;
    display:block;
}
.about_description .description{
    font-size:14px;
    color:var(--dk_blue);
    line-height:2;
}
.about_description .button_area {
    display: flex;
    justify-content: flex-end;
    padding: 60px 0 0;
}
.about_image_area{
    width: 50%;
}
.about_image_area img{
    width:100%;
}
.business_content_area{
    padding:50px 5vw;
}
.business_inner{
    display:flex;
    height:45vw;
    position:relative;
}
.business_image_area {
    position: absolute;
    z-index: 5;
    width: 50vw;
    height:100%;
    display:flex;
    align-items:center;
}
.business_inner:nth-child(2n + 1) .business_image_area{
    left:auto;
    right:0;
}
.business_inner .button_area{
    position:absolute;
    bottom:4vw;
}
.business_inner:nth-child(2n + 1) .button_area{
    left:0;
}
.business_inner:nth-child(2n) .button_area{
    right:0;
}
.business_description {
    width:100%;
    display:flex;
    align-items:center;
    z-index:10;
}
.business_inner:nth-child(2n + 1) .business_description{
    justify-content: flex-start;
}
.business_inner:nth-child(2n) .business_description{
    justify-content: flex-end;
}
.description_cover{
    background:rgba(236,243,250,0.9);
    padding:50px;
    width:50vw;
}
.business_inner:nth-child(2n + 1) .business_description .description_cover{
    padding-left:0;
}
.business_inner:nth-child(2n) .business_description .description_cover{
    padding-right:0;
}
.business_description .button_cover{
    position:absolute;
    bottom:0;
}
.description_cover h3{
    color:var(--dk_blue);
}
.description_cover h3 > span{
    font-size:48px;
}
.description_cover h3 p{
    font-size:18px;
    font-weight:bold;
    padding:0 0 30px;
}
.description_cover .description{
    font-size:16px;
    color:var(--dk_blue);
    line-height:2;
}
.business_image img{
    width:100%;
}
.bottom_link_area{
    display:flex;
    justify-content: space-evenly;
    padding:50px 0;
}
.bottom_link_inner{
    width:30vw;
}
.bottom_link_inner .inner_cover{
    position:relative;
    overflow: hidden;
}
.bottom_link_inner .inner_cover a:before {
    content: '';
    height: 17vw;
    position: absolute;
    background: var(--dk_blue);
    z-index: 10;
    opacity: .8;
    height:100%;
}
.bottom_link_inner .inner_cover a:after {
    content: '';
    height: 17vw;
    position: absolute;
    background: var(--blue);
    z-index: 10;
    opacity: .8;
    height:100%;
}
.bottom_link_inner:nth-child(1){
    padding:6vw 0 0;
}
.bottom_link_inner:nth-child(2){
    padding:3vw 0 0;
}
.bottom_link_inner:nth-child(3){
    padding:0;
}
.bottom_link_inner:nth-child(1) .inner_cover a:before{
    width: 80%;
    transform: skew(20deg);
    left: -20%;
}
.bottom_link_inner:nth-child(1) .inner_cover a:after{
    width: 80%;
    transform: skew(20deg);
    left: 59.8%;
}
.bottom_link_inner:nth-child(2) .inner_cover a:before{
    width: 100%;
    transform: skew(-45deg);
    left: -36%;
}
.bottom_link_inner:nth-child(2) .inner_cover a:after{
    width: 100%;
    transform: skew(-45deg);
    left: 63.8%;
}
.bottom_link_inner:nth-child(3) .inner_cover a:before{
    width: 130%;
    transform: skew(70deg);
    left: -80%;
}
.bottom_link_inner:nth-child(3) .inner_cover a:after{
    width: 130%;
    transform: skew(70deg);
    left: 49.8%;
}
.bottom_link_inner .inner_cover a{
    display:block;
    position: relative;
    z-index:20;
}
.bottom_link_inner .inner_cover a p{
    color: var(--l_blue);
    position: absolute;
    top: 45%;
    left:10%;
    font-size: 24px;
    font-size: 1.7vw;
    font-weight: bold;
    z-index: 20;
}
.bottom_link_inner .inner_cover a img{
    width:100%;
}
.bottom_link_inner .inner_cover a:hover img{
    transform:scale(1.05);
}
.bottom_link_inner .inner_cover a .arrow_cover{
    position:absolute;
    top:53%;
    right:10%;
    z-index:20;
}
.bottom_link_inner .inner_cover a .arrow_cover .arrow {
    height: 1px;
    width: 45px;
    background: var(--l_blue);
    position: relative;
}
.bottom_link_inner .inner_cover a .arrow_cover .arrow span {
    display: block;
    height: 1px;
    width: 15px;
    background: var(--l_blue);
    transform: rotate(45deg);
    position: absolute;
    right: -2px;
    bottom: 5px;
}
.bottom_link_inner .inner_cover a:hover .arrow_cover .arrow{
    width:50px;
}
.bottom_link_inner .inner_cover a:hover .arrow_cover{
    right:8%;
}
.logo_area{
    display:flex;
    margin:200px 0;
    width:100%;
    background:#fff;
}
.logo_area_top {
    display:flex;
    justify-content: center;
    margin:200px 0;
    margin-bottom:0;
    width:100%;
    background:#fff;
}
.logo_area_bottom {
    display:flex;
    justify-content: center;
    margin:200px 0;
    margin-top:0;
    width:100%;
    background:#fff;
}
.logo_inner{
    width:12.5%;
}
.logo_inner a{
    display:block;
    width:100%;
    padding:50px 0;
}
.logo_inner a:hover{
    opacity:.4;
}
.logo_inner img{
    width:70%;
    display:block;
    margin:auto;
}
@media screen and (max-width: 1100px), print {
    .main_catch h2{
        font-size: 7vw;
    }
    .news_contents a .news_cover{
        height:20vw;
    }
    .business_inner{
        display:block;
        background: none!important;
        height:auto;
        margin:0 0 50px;
        padding:0 0 60px;
    }
    .business_description{
        width:100%;
    }
    .description_cover{
        width:100%;
        padding:20px 0;
    }
    .business_image_area{
        position: static;
        width: 100%;
    }
    .business_image_area img{
        width:100%;
    }
    .business_inner .button_area{
        bottom:0;
    }
    .business_inner:nth-child(2n + 1) .button_area{
        left:auto;
        right:0;
    }
    .description_cover h3 > span{
        font-size:25px;
    }
    .description_cover h3 p{
        font-size:13px;
    }
    .description_cover .description{
        font-size:14px;
    }
}
@media screen and (max-width: 768px), print {
    .top_news_area{
        padding:100px 0 50px;
    }
    .news_headline_area{
        padding:0 20px;
    }
    .news_contents a .news_cover{
        height:49vw;
    }
    .top_about_area{
        display:block;
    }
    .about_description{
        width:100%;
        padding-bottom:40px;
    }
    .about_image_area{
        width:100%;
        padding:0 20px;
    }
    .bottom_link_area{
        display:block;
        padding:0;
    }
    .bottom_link_inner{
        width:100%;
        padding:0 20px 30px!important;
    }
    .bottom_link_inner .inner_cover a p{
        font-size:16px;
    }
    .logo_area{
        margin:50px 0;
        flex-wrap:wrap;
    }
    .logo_area_top {
        margin:50px 0;
        margin-bottom: 0;
        flex-wrap:wrap;
    }
    .logo_area_bottom {
        margin:50px 0;
        margin-top: 0;
        flex-wrap:wrap;
    }
    .logo_inner,.logo_inner img{
        width:50%;
    }
}