@charset "UTF-8";
/* First View CSS */

/* ==================== */
/* presetting all */
/* ==================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Oswald:wght@200..700&display=swap');

@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 200; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 300; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 400; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Bold"); font-weight: bold; }

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,body { font-size: 16px; }
body { background: #fff; line-height: 1.5; }
article,aside,details,figcaption,figure,
footer,header,main,menu,nav,section,summary { display: block; }
summary { display: list-item; }
div,h1,h2,h3,h4,h5,p,li,a,b,span,small,aside {
  font-family: "Noto Sans JP", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.nav-items .nav-item a,
.nav-items .nav-item li {
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
#main-content .heading,
#main-content .sub-heading {
  font-family: "Oswald", "Noto Sans JP", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  color: #155aa8;
}
a { color: #000; -webkit-transition: .1s; transition: .1s; }
a:hover { opacity: .6; }
ul,li { list-style-type: none; }
img { width: 100%; height: auto; vertical-align: bottom; }

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]:focus,
input[type="button"]:focus {
  outline-offset: -2px;
}

.basic-button { display: block; width: 127px; height: 40px; } /* 標準ボタン */
.basic-button.wide { width: 278px; } /* ワイドボタン */
.basic-button .btn-style { border-radius: 2px; box-shadow: 3px 3px 0 rgba(0,0,0,.1); width: 100%; height: 100%; }
.basic-button .btn-style .btn-style-inner {
  border: none;
  background: none;
  color: #fff;
  font-family: 'Noto Sans JP', "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  width: 100%;
  height: 100%;
}
.basic-button .btn-style.btn-white .btn-style-inner { color: #000; font-weight: 600; }
.basic-button:hover .btn-style {
/*  position: relative;
  top: 1px;
  left: 1px;*/
}
.btn-black { background-color: #000; }
.btn-green { background-color: #00AD5D; }
.btn-white { background-color: #fff; }

.marker-plgr {
  background: rgb(198,233,216);
  background: -moz-linear-gradient(0deg, rgba(198,233,216,1) 37%, rgba(255,255,255,0) 37%);
  background: -webkit-linear-gradient(0deg, rgba(198,233,216,1) 37%, rgba(255,255,255,0) 37%);
  background: linear-gradient(0deg, rgba(198,233,216,1) 37%, rgba(255,255,255,0) 37%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c6e9d8",endColorstr="#ffffff",GradientType=1);
} /* マーカー ペールグリーン */
.board-graywhite { background-color: #f7f7f7; }
.anchor-float {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  color: #00AD5D;
  font-size: 1rem;
  font-weight: 300;
  text-decoration: none;
} /* ぶら下がりリンク */
.anchor-float::after {
  content: "";
  display: inline-block;
  background-image: url('../images/icn-arrow-green-r.svg');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  width: 18px;
  height: 18px;
  margin-left: 10px;
}

.sp { display: none; }

@media screen and (max-width: 812px) {
  /* iPhone X 横表示までSP扱い */
  .pc { display: none; }
  .sp { display: inline-block; }

  .basic-button.wide { width: 100%; }
}

/* ==================== */
/* header preset */
/* ==================== */
#header,
#header .content-links,
#header .content-links #header-nav,
#header-nav .nav-items,
#header-nav .nav-items .nav-item,
#header-nav .nav-items .nav-item a,
#header-nav .nav-items #language-toggle {
  display: flex;
}
#header {
  justify-content: space-between;
}
#header-nav .nav-items,
#header-nav .nav-items #language-toggle {
  justify-content: center;
}
#header,
#header-nav .nav-items,
#header-nav .nav-items #language-toggle {
  flex-direction: row;
}
.nav-item a,
.nav-item #language-toggle {
  align-items: center;
}

#header #logo {
  padding: 12px 0 12px 30px;
}
#header-nav .nav-items .nav-item a,
#header-nav .nav-items #language-toggle {
  text-decoration: none;
  text-align: center;
  padding: 0 20px;
}

#header-nav .nav-items #language-toggle .en a {
  color:#fff;
  text-align: center;
  padding: 0 ;
	display: contents;
}

#header-nav .nav-items .nav-item > li {
  text-align: center;
  background: #333;
  color: #fff;
  width: 48px;
  height: 28px;
  cursor: pointer;
  transition: .1s;
}
#header-nav .nav-items .nav-item li:hover {
  opacity: .8;
}
#header-nav .nav-items .nav-item #language-toggle li {
    text-align: center;
    color: rgb(255, 255, 255);
    width: 48px;
    height: 28px;
    cursor: pointer;
    background: rgb(51, 51, 51);
    transition: 0.1s;
}

#header-nav .nav-items .nav-item #language-toggle li.current-language {
  background: #e7e7e7;
  color: #949494;
}
#header-nav .nav-items .nav-item.inquiry {
  background: #009190;
}
#header-nav .nav-items .nav-item.inquiry a {
  color: #fff;
  padding: 0 40px;
}

#hero-image {
}
#hero-image div {
  position: relative;
	background: #fff;
  width: 100%;
  height: 720px;
  margin: auto;
  overflow: hidden;
}
#hero-image div picture,
#hero-image div picture img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  max-width: 1300px;
  margin: auto;
}
#hero-image div{position:relative;}
#hero-image div video {
  margin-top: -310px;
  opacity: .9;
    position: absolute;
  top: calc(50% + 155px);
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

#news {
  background: #155aa8;
}
#news > div {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}
#news > div,
#news > div .sub-heading,
#news > div .news-items,
#news > div .news-items a,
#news > div .news-items .news-item {
  display: flex;
  color: #fff;
}
#news > div,
#news > div .news-items .news-item {
  flex-direction: row;
}
#news > div .news-items {
  flex-direction: column;
}

#news > div .sub-heading,
#news > div .news-items {
  padding: 30px 0;
}
#news > div .news-items {
  line-height: 1.85rem;
}

#news > div .sub-heading::after {
  content: "";
  display: block;
  height: 40%;
  border-right: solid 1px #fff;
  margin: 0 30px;
}


#news > div .sub-heading {
  font-family: 'Oswald', 'Noto Sans JP', "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 600;
  align-items: center;
}
#news > div .news-items a {
  text-decoration: none;
}


@media screen and (max-width: 1200px) {
  /*メニューのみ崩れるタイミングで処理する*/
  #header {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  #header .content-links,
  #header-nav,
  #header-nav .nav-items{
    width: 100%;
  }
  #header .content-links {
    height: 7vw;
  }
  #header-nav .nav-items {
    justify-content: space-between;
    box-sizing: border-box;
    padding-left: 3vw;
  }
}

@media screen and (max-width: 1024px) {
  #news > div {
    flex-direction: column;
    width: 96%;
  }
  #news > div .sub-heading {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #news > div .sub-heading::after {
    height: auto;
    width: 120px;
    margin-top: 16px;
    border-right: none;
    border-bottom: solid 1px #fff;
  }
  #news > div .news-items {
    padding: 0 0 30px;
    width: 100%;
  }
  #news > div .news-items a,
  #news > div .news-items .news-item {
    width: 100%;
  }
  #news > div .news-items dt {
    max-width: 18%;
    margin-right: 2%;
  }
  #news > div .news-items dd {
    max-width: 80%;
  }
}


@media screen and (max-width: 860px) {
  /*メニューのみ崩れるタイミングで処理する*/
    #header {
        flex-direction: row;
        /* justify-content: space-around; */
        justify-content: space-between;
        align-items: center;
    }
#header #logo {
    padding: 12px 0 12px 20px;
    width: 200px;
}

  #header .content-links {
    position: absolute;
    top: -101vh;
    width: 100%;
    height:100vh;
    background-color: rgba(0,0,0,0);
    transition: ease .3s;
    z-index: 9998;
    box-sizing: border-box;
  }
  #header.open .content-links {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background-color: rgba(0,0,0,.875);
  }

  #header-nav .nav-items {
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    height: 100%;
    padding: 0;
  }
  #header-nav .nav-items .nav-item a {
    font-size: 2.5vw;
    color: #fff;
  }
  #header-nav .nav-items .nav-item.inquiry {
    background: none;
  }

.nav_switch {
	display:none;
        position: relative;
        width: 23px;
        height: 15px;
        z-index: 9999;
        margin-right: 20px;
    }
  .nav_switch::before,
  .nav_switch span,
  .nav_switch::after {
    content: "";
    position: absolute;
    display: block;
    width: 23px;
    height: 2px;
    background: #155aa8;
    z-index: 1100;
  }
  .nav_switch::before,
  .nav_switch::after { transition: .3s; }
  .nav_switch::before { top: 0; }
  .nav_switch span {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
  .nav_switch::after { bottom: 0; }

  .open .nav_switch::before {
    top: 0;
    bottom: 0;
    margin: auto 0;
    transform: rotate(45deg);
    background-color: #fff;
  }
  .open .nav_switch span {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0);
  }
  .open .nav_switch::after {
    top: 0;
    bottom: 0;
    margin: auto 0;
    transform: rotate(-45deg);
    background-color: #fff;
  }
}

@media screen and (max-width: 812px) {
  /*iPhone X 横表示までSP扱い*/
#news > div .news-items dt {
        max-width: 100%;
        margin-right: 0;
    }
    #news > div .news-items dd {
        max-width: 100%;
    }
    #news > div, #news > div .sub-heading, #news > div .news-items, #news > div .news-items a, #news > div .news-items .news-item {
        flex-wrap: wrap;
        margin-bottom: 8px;
    }
#philosophy {
    position: relative;
    padding: 40px 0;
    overflow: hidden;
} 
}

.js-dropdown{position:relative;}
.js-dropdown::after{content:"";position:absolute;right:5px;top:42px;display: inline-block;
  vertical-align: middle;
  line-height: 1;
  width: 0.5em;
  height: 0.5em;
  border: 0.2em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);transition:0.5s;color:#155aa8}
.js-dropdown.is-active::after{transform:rotate(-45deg);}
.nav-item{position:relative;}
.panel-inner{display:block;position:absolute;top:74px;left:0;position:absolute;width:14em;z-index:1001;height:0;transition:0.5s;transform: scaleY(0);z-index:1001;width:15em;visibility:hidden;top:80px}
.js-dropdown.is-active + .panel-inner{display:block;transform: scaleY(1);visibility:visible}

.js-dropdown.is-active + .panel-inner{display:block}
.panel_item{height:0;transition:0.5s ease;display:block;}
.js-dropdown.is-active +  .panel-inner .panel_item{background:rgba(21, 98, 168, 0.9);height:auto;color:#fff;height:auto;transition:0.3s;overflow:hidden;}
.js-dropdown +  .panel-inner .panel_item a{color:#fff;font-weight:400;font-size:0.9em;overflow:hidden;display:block;width:100%;height:100%;padding:10px 10px!important;}
.js-dropdown +  .panel-inner .panel_item{border-bottom:1px dotted #fff;}
.js-dropdown +  .panel-inner .panel_item:last-child{border-bottom:0 dotted #fff;}


.js-dropdown + .panel-inner{ transition: all 0.5s ease;transform: translateY(-20px);}

@media screen and (max-width: 1200px) {
.js-dropdown::after{top:32px;}
.js-dropdown.is-active::after{top:32px;}}
/**/