@charset "utf-8";
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;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}button{background-color:transparent;border:none;cursor:pointer;outline:none;padding:0;appearance:none}img{image-rendering:-webkit-optimize-contrast}a{color:inherit;text-decoration: none;}


/*--------------------------------------------------------------
header @js
--------------------------------------------------------------*/
#header{
    width: 100%;
    background-color: #FFF;
    position: fixed;
    z-index: 1000;
}
.header-wrap{
    width: 90vw;
    min-width: 1000px;position: relative;
    margin-left: auto; margin-right: auto; 
    display: flex;justify-content: space-between;align-items: center;}
  
  /* .header-logo-wrap,.site-header{padding: 10px;} */
  .header-logo {
    position: absolute;top:0;
    width: 180px;margin-bottom: 10px;}
  .header-logo img{width: 100%;} 
  
  .site-header  {display: flex; justify-content: space-between;align-items: center;}
  .nav-wrapper { display: flex; align-items: center;}
  
  .nav__item ,.nav__item__btn{box-sizing: border-box; position: relative;width: 140px;
  transition : all 0.5s ease 0s;}
  .nav__item > a {
    color: #262626; padding: 25px 10px;line-height: 1.35;
    display: block; font-weight: 700;text-align: center;transition : all 0.3s ease 0s;}
  .nav__item__btn{width: auto;margin-left: 10px;}
  .nav__item__btn > a{
    padding:0.5rem 2rem;border-radius: 3px;
    background-color: #262626;color: #FFF;transition : all 0.3s ease 0s;
    display: block;font-weight: 800;text-align: center;}
  .nav__toggle {display: none;}
  .nav__item:hover{background-color:  #d8edee;}
  .nav__item > a:hover{color: #00B1B7;}
  .nav_btn_recruit > a{background-color: #fda32e;}
  .nav_btn_contact > a{background-color: #27a5a4;}
  .nav_btn_recruit > a:hover{background-color: #e68507;}
  .nav_btn_contact > a:hover{background-color: #1497BC;}
  .nav__item__btn > a:hover{transform: translate(0 , 2px);}
  
  @media (max-width: 1000px) {
    .header-logo {top:10px; width: 140px; left: 3vw; margin-bottom: 0;}
    .header-wrap {min-width: 768px;}
    .nav__item, .nav__item__btn {width: initial;}
    .nav__item > a {font-size: 15px;padding: 25px 1vw;}
    .nav__item__btn > a { padding: 0.5rem 1vw;font-size: 15px;}
  }
  
  @media (max-width: 768px) {
  .header-wrap{width: 100%;height: 17vw;min-width: auto;}
  .header-logo-wrap,.site-header{padding: 4vw;}
  .header-logo {width:40vw; top: 1vw;  left: 48%; transform: translateX(-50%);
    -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}
  .nav__item{width: 100%;box-sizing: border-box;padding:5vw 0;}
  .nav__item__btn > a {padding: 2vw 0;width: 100%;}
  .nav__toggle {display: block; position: absolute; right: 1rem;top: 0rem; }
  .nav-wrapper {top: 16vw; right: 0; left: 0; z-index: 1;
  background-color: rgba( 255, 255, 255, 1 );padding:1vw 6vw 5vw;
  position: absolute; flex-direction: column; 
  visibility: hidden;opacity: 0;transform: translateY(-114%);
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;}
  .nav-wrapper.active {visibility: visible;opacity: 1;transform: translateY(0)}
  
  .nav__item > a {padding:0; text-align: left;}
  .nav__item {border-bottom: 1px #d3d3d3 solid;}
  .nav__item:nth-child(3) {border-bottom: 0;}
  
  .nav__item__btn {margin-left: 0;width: 100%; margin-bottom: 2.5vw;}
  .nav__item__btn > a {display: block;padding: 3vw 0; width: 100%;}
  }
  
  /*-----------------------------
  #ハンバーガーボタン
  -----------------------------*/
  
  .openbtn1{width: 11vw;height:11vw;border-radius: 5px;top: 3vw;
    background:#27a5a4;;
    position: relative;cursor: pointer;}
  .openbtn1 span{
    left: 3vw; height: 0.8vw;width: 45%; border-radius: 2px;
    position: absolute;display: inline-block;background: #fff;
    transition: all .4s;}
  .openbtn1 span:nth-of-type(1) {top:2.9vw;}
  .openbtn1 span:nth-of-type(2) {top:5.3vw;}
  .openbtn1 span:nth-of-type(3) {top:7.7vw;}
  
  /*active*/
  .openbtn1.active span:nth-of-type(1) {
  top: 3.5vw; left: 3vw;transform: translateY(6px) rotate(-45deg); width: 45%}
  .openbtn1.active span:nth-of-type(2) {opacity: 0;}
  .openbtn1.active span:nth-of-type(3){
  top: 6.5vw; left: 3vw; transform: translateY(-6px) rotate(45deg); width: 45%}
  
  /*-----------------------------
  #ドロップダウンメニュー
  -----------------------------*/
  
  .dropdown__lists {
    visibility: visible;/*デフォルトでは非表示の状態にしておく*/
    opacity: 0;/*不透明度0*/
    transition: all .3s;/*表示の変化を0.3秒に指定*/
    width: 300px; position: absolute;top: 72px;left: 0;}
  .nav__item:hover .dropdown__lists {
    visibility: visible; opacity: 1;}
  .nav__item:hover .dropdown__lists {display: block;}


  .dropdown__list {
    background-color: #00b1b3;
    height: 3em;transition: all .3s;position: relative;
    display: flex;align-items: center;}
  .dropdown__list:not(:first-child)::before{
    content: ""; width: 100%;
    height: 1px; background-color: #00b1b3;
    position: absolute; top: 0; left: 0;}
  .dropdown__list:hover {background-color: #1497BC;}
  .dropdown__list a {
    display: flex; justify-content: center;
    align-items: center;color: #fff;
    text-decoration: none; position: relative; width: 100%;height: 100%;}
  .dropdown__list a::before {content: ''; display: block;
    width: 6px; height: 6px; border-top: 2px solid #fff; border-left: 2px solid #fff;
    transform: rotate(135deg); position: absolute; right: 15px;top: calc(50% - 5px);}
  @media (max-width: 1000px) {.dropdown__lists {top: 70px;}}

  @media (max-width: 768px) {
  .dropdown__lists { visibility: visible; opacity: 1; position: relative;top: 0;left: 0;width: 100%;
  margin-left: 1vw;margin-top: 2vw;}
  .dropdown__list {background-color: initial;height: auto;}
  .dropdown__list a {color: #262626; justify-content: flex-start; align-items: center;
  font-weight: 500; padding:1.5vw 0 1.5vw 6vw; }
  .dropdown__list:not(:first-child)::before {background-color: initial;}
  .dropdown__list a::before {width: 0; height: 0;}
  .dropdown__list a::after {content: '―'; display: block;color: #333;
    position: absolute; font-weight: 900;left:0;}
  .dropdown__list:hover {background-color: initial;}  
  }

/*-----------------------------
#Headerの高さ分 contentsをさげる
-----------------------------*/
.main-Container{padding-top: 71px;}
@media (max-width: 768px) {.main-Container{padding-top: 17vw;}}

/*--------------------------------------------------------------
floating @js
--------------------------------------------------------------*/
.float-button__wrap {
display: none; width: 280px; position: fixed;
 bottom: 10px; right: 10px;  z-index: 10; }
.float-button__wrap a {
display: flex; justify-content: center;align-items: center;
width: 100%; height: 100%; text-decoration: none;color: #fff;}
.float-button__wrap img{width: 100%;}
@media screen and (max-width: 790px) {.float-button__wrap{width: 90%;  bottom: 2vw; right: 5vw;}}

/*-----------------------------
floating - closedBtn @CSSonly
-------------------------------*/
.check_button{position: absolute;right:0; width: 20px; height: 20px;
display: flex; align-items: center;justify-content: center;}
.float-button__wrap input[type="checkbox"] { border-radius: 0;
-webkit-appearance: none;-moz-appearance: none;appearance: none;}
.float-button__wrap input[type="checkbox"] {
position: absolute;width: 30px; height: 30px;border-radius: 50%;
background-color: #FFF; cursor: pointer;top:-10px;right: -10px;
box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.3);transition: all 0.3s ease;} 
.float-button__wrap input[type="checkbox"]:hover{background-color: #8ee6eb;}
.float-button__wrap input[type="checkbox"]:checked:before {content: '×';font-size: 27px;color: #00b1b3;}
.check_button:not(:checked){ display: none;}
.check_button:not(:checked)~.float-button{ display: none;}

/*-----------------------------
footer
-------------------------------*/
footer{background-color: #1497BC;color: #FFF;}
.footer-Copyright{color: #FFF;padding-bottom: 20px;}

/*-----------------------------
footer-group
-------------------------------*/
#footer-group{background-color: #007090;}
#footer-group .section-wrap-wide {width: 90vw; background-color: #007090;margin: 0 auto; padding:20px 0 15px;}
#footer-group .group-site-Link-wrap{display: flex; justify-content: space-between;}
#footer-group h2 { font-size: 1em; width: 15vw; margin-bottom: 0;}
#footer-group .group-site-list{display: flex; flex-wrap: wrap; border-left: 1px solid #FFF;
  padding-left: 1em;margin-left: 1em; box-sizing: border-box;}
#footer-group .group-site-list li{border-radius: 3px;transition: all 0.5s ease-out allow-discrete;
margin:0 2em 0 0; font-size: 90%;}
#footer-group .group-site-list li a{display: block; width: 100%; height: 100%;text-align: center;}
#footer-group .group-site-list li p:hover{text-decoration: underline;}
#footer-group .group-site-list li img{display: none;}
#footer-group .group-site-list li a:hover img{transform: scale(1.1);}
@media screen and (max-width: 768px) {
#footer-group .group-site-Link-wrap {}
#footer-group .section-wrap-wide {width: 90vw; margin: 0 auto; min-width: initial; padding:20px 0;}
#footer-group .group-site-Link-wrap{flex-direction: column;}
#footer-group  h2 {padding: 0 0.5em;font-size: 4.6vw;margin-bottom: 3vw;letter-spacing: 0;width: 100%;}
#footer-group .group-site-list{display: flex; flex-wrap: wrap; justify-content: space-evenly;
  padding-left: 0;margin-left: 0;border-left: 0;}
#footer-group .group-site-list li{border-radius: 4px; width: 45%;margin:0 0 10px 0;text-align: left;}
#footer-group .group-site-list li a{display: block; width: 100%; height: 100%;text-align: left;}
#footer-group .group-site-list li img{width: 70%; padding:1vw 0 2vw;}}