@charset "UTF-8";
/* CSS Document */
html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}
@font-face {
  font-family: 'Myfont';
}
body {
  color: #333; /* RGB */
  font-family: yu-mincho-pr6n, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1.6em;
  line-height: 2.4rem;
  height: 100%;
}
section h2 {
  font-size: 2.4rem;
}
a:hover {
  opacity: 0.5;
}
*, *:before, *:after {
  box-sizing: border-box;
}
main {
	max-width: 1440px;
  position: relative;
}
/* header */
.header {
  width: 100%;
  height: 30px;
  position: absolute;
  z-index: 1;
}
.header_others {
  width: 100%;
  height: 50px;
  position: relative;
}
.header__logo-index,
.header__logo-others {
  width: 30%;
  padding: 15px 0 0 20px;
  display: block;
}
.header__navigation,
.header__navigation_others {
  display: none;
}
.header .none, 
.header_others .none { 
  display: none;
}
  @media(min-width: 750px) {  
    .header,
    .header_others {
      height: 70px;
    }
    .header__logo-index,
    .header__logo-others {
      width: 25%;
      display: inline-block;
      padding: 15px 0 10px 30px;
    }
    .header__navigation,
    .header__navigation_others {
      display: block;
      text-align: left;
    }
    .header ul,
    .header_others ul {
      position: absolute;
      top: 0;
      left: 29%;
      padding-top: 15px;
    }
    .header ul li,
    .header_others ul li {
      display: inline-block;
      padding-left: 15px;
    }
    .header ul li:first-child,
    .header_others ul li:first-child {
      padding-left: 0;
    }
    .header ul li a {
      color: #FFF;
      text-decoration: none;
      font-size: 1.2rem;
    }
    .header_others ul li a {
      color: #333;
      text-decoration: none;
      font-size: 1.2rem;
    }
    .header p {
      position: absolute;
      font-size: 1.6rem;
      background-color: #FFF;
      color: #333;
      top: 0;
      right: 0;
      padding: 10px 15px;
      display: flex;
      text-decoration: none;
      
    }
    .header_others p {
      position: absolute;
      font-size: 1.6rem;
      background-color: #3f6583;
      color: #FFF;
      top: 0;
      right: 0;
      padding: 15px 40px 15px 15px;
      display: flex;
    }
    .header__phone {
      position: absolute;
      top: 15px;
      right: 10px;
    }
    .material-icons {
      color: #3F6583;
      transform: scaleX(-1);
      text-align: center;
      padding-right: 5px;
    }
    .material-icons.others {
      color: #FFF;
      padding-right: 5px;
      top: 20px;
    }
    .material-icons__others {
      font-color: #FFF;
      transform: scaleX(-1);
      text-align: center;
    }
    .header p a {
      text-decoration: none; 
      color: #333;
      text-align: center;
    }    
    .header_others p a {
      text-decoration: none;
      color: #FFF;
    }
    .nav-drawer__logo {
      display: none;
    }
  }
  @media (min-width: 1000px) {
    .header,
    .header_others {
      padding-left: 40px;
    }
    .header__logo-index,
    .header__logo-others {
      width: 23%;
      padding: 20px 0 10px 0;
    }
    .header ul,
    .header_others ul {
      position: absolute;
      top: 0;
      left: 27%;
      padding: 23px 50px 20px 30px;
      width: 70%;
      text-align: left;
    }
    .header ul li,
    .header_others ul li {
      display: inline-block;
      padding-left: 30px;
    }
    .header ul li a,
    .header_others ul li a {
      font-size: 1.5rem;
    }
    .header p,
    .header_others p {
      font-size: 2.0rem;
      padding: 13px 20px;
    }
  }
  @media (min-width: 1400px) {
    .header,
    .header_others{
      padding-left: 50px;
      max-width: 1440px;
    }
    .header__logo-index,
    .header__logo-others {
      width: 20%;
      display: inline-block;
      padding: 20px 0 10px 0;
    }
    .header ul,
    .header_others ul {
      left: 25%;
      width: 70%;
      text-align: left;
      padding: 26px 0 20px 45px;
    }
    .header ul li a,
    .header_others ul li a {
      font-size: 2.0rem;
      padding: 30px 15px 0 20px;
    }
    .header p,
    .header_others p {
      font-size: 2.4rem;
      padding: 20px 40px;
    }
  }
/* ハンバーガーボタン　*/
  @media(max-width: 480px) {
    #nav-drawer {
      padding: 5px 15px 0 0;
      position: absolute;
      top: 0;
      right: 0;
    }
    #openbtn {
      display: inline-block;
      position: relative;
      width: 20px;
      height: 20px;
      cursor: pointer;
      z-index: 500;
    }
    #openbtn span {
      position: absolute;
      width: 25px;
      height: 2px;
      background-color: #FFF;
      display: block;
      content: "";
      border-radius: 1px;
      transition: all 0.5s;
    }
    #openbtn.openbtn-others span {
      background-color: #3f6583;
    }
    #openbtn span:nth-of-type(1)  {
      top: 10px;
      width: 100%;
    }
    #openbtn span:nth-of-type(2) {
      top: 20px;
      width: 100%;
    }
    #openbtn.active span {
      background-color: #3f6583;
    }
    #openbtn.active span:nth-of-type(1) {
      top: 22px;
      left: 0;
      transform: translateY(7px) rotate(-45deg);
      width: 80%;
    }
    #openbtn.active span:nth-of-type(2) {
      top: 36px;
      left: 0;
      transform: translateY(-7px) rotate(45deg);
      width: 80%;
    }
    .g-nav.panelactive #g-nav-list {
      position: fixed;
      z-index: 1000;
      width: 100%;
      height: 100vh;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }	
    .g-nav ul {
      padding-top: 10px;
    }
    .g-nav {
      display: block;
      position: fixed;
      top:0 ;
      left:-120%;
      z-index: 150;
      width: 100%;
      height: 100vh;
      transition: all 0.5s;
      background: -moz-linear-gradient(90deg, #a7c9e4 35% #FFF 77%);
      background: -webkit-linear-gradient(90deg, #a7c9e4 35%, #FFF 77%);
      background: linear-gradient(360deg, #a7c9e4 7%, #FFF 76%);
    }
    .g-nav.panelactive {
      left: 0;
      padding: 0;
    }
    .nav-drawer__logo {
      width: 65%;
      padding-top: 50px;
      display: block;
      margin: 0 auto;
    }
    .g-nav ul li {
      padding-top: 35px;
      text-align: center;
    }
    .g-nav ul li a {
      text-decoration: none;
      color: #333;
      font-size: 1.6rem;
      transition: 0.3s;
    }
    .g-nav ul li a:hover {
      font-size: 2.0rem;
      color: #3f6583;
      opacity: 0.8;
    }
    .g-nav p {
      display: none;
    }
    #nav-drawer .header__phone {
      display: none;
    }
    #particles-js {
      position: fixed;
      z-index: 1;
      width: 100%;
      height: 100%;
    }
    #g-nav-list {
      position: relative;
      z-index: 100;
      width: 100%;
      height: 100%;
    }  
  }
	@media(min-width: 750px) {
		.particles-js-canvas-el {
			display: none
		}
  }
.title__ja {
  font-size: 16px;
  padding-bottom: 10px;
  margin-left: 20px;
  line-height: 2.0;
  text-align: left;
  position: relative;
/*  border-bottom: solid 1px #333;*/
}
.title__ja::after {
  border-bottom: solid 1px #333;
  width: 50px;
  content: "";
  position: absolute;
  left: 0;
}

/*
.title__bar {
  border-bottom: solid 1px #333;
  width: 50px;
}
*/
.title__en {
  font-size: 14px;
}
.blue_button {
  width: 15px; 
}
  @media(min-width: 750px) {
    .title__ja {
      font-size: 2.5rem;
      padding-bottom: 40px;
      margin: 100px 0 0 50px;
    }
    .title__bar {
      border-bottom: solid 1px #333;
      width: 50px;
    }
    .title__en {
      font-size: 2.3rem;
    }
    .blue_button {
      width: 15px;
    }
  }
	@media(min-width: 1000px) {
		.title__ja {
		  font-size: 3.3rem;
		  padding-bottom: 25px;
		  margin: 100px 0 0 8%;
		}
		.title__bar {
		  width: 70px;
		}
		.title__en {
		  font-size: 3.0rem;
		}
		.blue_button {
		  width: 20px;
		}
	}
  @media(min-width: 1400px) {
    .title__ja {
      font-size: 3.4rem;
    }
    .title__en {
      font-size: 3.1rem;
    }
  }
.section-top__tellink {
  position: absolute;
  right: 0;
}
.section-top__telbutton {
  width: 50%;
  display: block;
  position: fixed;
  bottom: 70px;
  right: 0px;
  z-index: 900;
}
 main .section-top__tellink:hover {
  opacity: 1;
}
  @media (min-width: 750px) {
    .section-top__telbutton {
      width: 33%;
      bottom: 90px;
      right: 0;
      z-index: 50;
    }
  }
  @media (min-width: 1440px) {
    .section-top__telbutton {
      width: 300px;
      right: initial;
      margin-left: -300px;
    }
  }

.section-footer {
  background-image: url("../images/images_common/footer_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: bottom 40%;
  margin-top: -50px;
  height: 150px;
  position: relative;
}
.section-footer__footerlogo {
  display: inline-block;
  position: absolute;
  bottom: 6px;
  left: 15px;
  width: 33%;
}
.section-footer small {
  font-size: 1.0rem;
  display: block;
  position: absolute;
  color: #FFF;
  text-align: center;
  bottom: 3px;
  right: 13%;
}
.section-footer__facebook {
  display: block;
  position: absolute;
  width: 5%;
  bottom: 10px;
  right: 10px;
}
  @media(min-width: 750px) {
    .section-footer {
      background-size: cover;
      background-position: bottom 40%;
      height: 125px;
      position: relative;
      margin-top: -104px;
    }
    .section-footer__footerlogo {
      left: 40px;
      bottom: 20px;
      width: 26%;
    }
    .section-footer small {
      font-size: 1.5rem;
      right: 140px;
      bottom: 20px;
    }
    .section-footer__facebook {
      width: 4%;
      right: 100px;
      bottom: 20px;
    }	
  }
  @media(min-width: 1000px) {
    .section-footer {
	  background-image: url("../images/images_common/footer_pc.png");
      margin-top: -90px;
      height: 200px;
      background-position: 0;
    }
    .section-footer__footerlogo {
      width: 23%;
    }
    .section-footer small {
      font-size: 1.8rem;
      right: 170px;
      bottom: 20px;
    }
  }
  @media(min-width: 1400px) {
    .section-footer {
      margin-top: -95px;
      height: 188px;
    }
    .section-footer__footerlogo {
      width: 20%;
    }
    .section-footer small {
      font-size: 2.2rem;
      right: 250px;
      bottom: 20px;
    }
  }