@charset "utf-8";
/* CSS Document */
@import url("reset.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
/*
font-family: 'Noto Sans JP', sans-serif;
*/

@font-face {
	font-family: 'BarlowSemiCondensed-BoldItalic';
	src: url(../font/BarlowSemiCondensed-BoldItalic.ttf);
}


html{
  overflow: auto;
  scroll-behavior: smooth;
}

body{
  color: #212529;
  font-family: 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow: hidden;
  min-width: 100%;
  width: 100%;

}


:root{
  --color-style1: #212529;
  --color-style2: #96df17;
}

.ct{ text-align: center; }

.f_bld { font-weight: bold;}


a{ text-decoration: none; }

img {
  image-rendering: -webkit-optimize-contrast;
  max-width: 100%;
  height: auto;
}


.pcd{ display: block;}
.spd{ display: none;}

@media (max-width:768px){
  .pcd{ display: none;}
  .spd{ display: block;}
}

.wrap{
  margin: 0 auto;
  width: 1240px;
}

@media (max-width:1240px){
  .wrap:not(.nons){
    margin: 0 30px;
    width: calc(100% - 60px);
  }
  .wrap.nons{
    width: 100%;
  }

}

@media (max-width:768px){
  .wrap.nons{
    width: 100%;
  }
}

.spw_c{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.spw_fs{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

.spw_sr{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}

.ctt_c{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.ctt_cr{
  display: flex;
  flex-wrap:wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ctt_fs{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.fst_c{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.fst_fs{
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.fed_c{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.fed_fs{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
}

.fst_sr{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

header {
  width: 100%;
  padding: 16px 0;
  background-color: #fff;
  position: fixed;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
}

.logo {
  width: 285px;
}

nav {
  margin: 0 0 0 auto;
}

nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

nav.pc ul{
  justify-content: flex-end;
}

nav.pc ul li{
  display: flex;
  justify-content: center;
  align-items: center;
}

nav.pc ul li a:not(.contatct_btn) {
  color: var(--color-style1);
  text-decoration: none;
  display: block;
  font-weight:bold;
  margin-right:33px;
  position:relative;
  display: inline-block;
}

@media (max-width:1180px){
  nav.pc ul li a:not(.contatct_btn) {
    margin-right: 15px;
  }
}

nav.pc ul li a.active{
  color: var(--color-style2);
  position: relative;
}

nav.pc ul li a.active::after{
  content:"";
  background:var(--color-style2);
  width: 100%;
  height: 3px;
  position:absolute;
  bottom: -15px;
  left: 0;
}

nav.pc ul li a:not(.contatct_btn)::before {
  content: "";
  position: absolute;
  background:var(--color-style2);
  width: 0;
  height: 3px;
  bottom: -15px;
  left: 0;
  -webkit-transition: .4s ease 0s;
  transition: .4s ease 0s;
}
nav.pc ul li a:not(.contatct_btn):hover{
  color:var(--color-style2);

}
nav.pc ul li a:not(.contatct_btn):hover::before {
  content: "";
  width: 100%;
}

.sm {
  display: none;
}

a.contatct_btn{
  background: var(--color-style1);
  border-radius: 25px;
  padding: 13px 33px 15px 21px;
  color:#fff;
  overflow:hidden;
  position: relative;
  z-index: 1;
  transform: scale(1);
  transform-origin: right top;
  transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
}

a.contatct_btn::before{
  font-family: "Font Awesome 5 Free";
  content: "\f054";
  font-weight: 900;
  position: absolute;
  top: 35%;
  right: 9%;
}

a.contatct_btn::after {
  background: var(--color-style2);
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}
a.contatct_btn:hover {
  background: var(--color-style2);
  color: #fff;
}
a.contatct_btn:hover::after {
  transform: scale(1, 1);
}

a.contatct_btn.act{
  background: var(--color-style2);
}


/**********************************　
以下、ハンバーガーメニューの設定　
************************************/

@media (max-width: 768px) {
  header{
    padding: 0;
  }

  header .wrap{
    margin:0 0 0 15px !important;
    width: calc(100% - 15px) !important;
  }

  .pc {
    display: none;
  }

  #hamburger {
    background-color: var(--color-style1);
    position: relative;
    cursor: pointer;
    margin: 0 0 0 auto;
    height: 70px;
    width: 70px;
  }

  .icon span {
    position: absolute;
    left: 15px;
    width: 45px;
    height: 4px;
    background-color: #fff;
    border-radius: 5px;
    transition: ease 0.75s;
  }

  .icon span:nth-of-type(1) {
    top: 14px;
  }
  .icon span:nth-of-type(2) {
    top: 24px;
  }
  .icon span:nth-of-type(3) {
    bottom: 32px;
  }

  .icon::after{
    content: "MENU";
    font-weight: bold;
    font-size: 14px;
    color: #fff;
    position: absolute;
    left: 15px;
    bottom:11px;
  }


  .close span:nth-of-type(1) {
    transform: rotate(45deg);
    top: 24px;
  }

  .close span:nth-of-type(2) {
    opacity: 0;
  }

  .close span:nth-of-type(3) {
      transform: rotate(-45deg);
      top: 24px;
  }

  .icon.close::after{
    content: "CLOSE";
    font-weight: bold;
    font-size: 14px;
    color: #fff;
    position: absolute;
    left: 15px;
    bottom:11px;
  }


  .sm {
      top: 70px;
      right: -150%;
      position: absolute;
      z-index: 10;
      width: 100%;
      background-color: #fff;
      transition: all 0.5s;
  }

  .sm.panelactive{
      right: 0;
  }

  nav.sm ul {
    flex-direction: column;
    
  }

   nav.sm ul li a {
    font-size: 18px;
    font-weight: bold;
    color: var(--color-style1);
    padding: 10px 0 10px 105px;
    margin-bottom: 28px;
    display: block;
    position: relative;
  }

  nav.sm ul li a::before{
    content:"";
    background: #707070;
    width:34px;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 8%;
  }
}

footer{
  background:#F6F6F6;
  padding: 65px 0 28px;
  text-align: center;
}

.f_logo{
  margin-bottom: 15px;
}

.f_logo a{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.f_logo a span.f_s_1{
  color: #1130F3;
  font-weight: bold;
  font-family: 'Noto Sans JP';
  font-size: 30px;
  margin-left: 5px;
}

.f_logo a span.f_s_2{
  margin-top: 11px;
  color: #000;
  font-size: 10px;
  font-weight:bold;
  letter-spacing: 0.25em;
  width: 100%;
  text-align: center;
}

.add_p{
  line-height: 1.3;
  margin-bottom: 52px;
}

footer ul{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin-bottom: 95px;
}

footer ul li:first-child{
  margin-right: 30px;
}


footer ul li a{
  color: var(--color-style1);
  border-bottom: solid 1px var(--color-style1);
  padding: 0 5px 5px;
}

footer small{
  font-size: 14px;
}

@media (max-width:420px){
  footer{
    padding: 44px 0 26px;
  }

  .f_logo{
    margin-bottom: 19px;
  }

  footer ul{
    flex-wrap: wrap;
    margin-bottom: 32px;
  }

  footer ul li:first-child{
    margin-right:0;
    margin-bottom: 25px;
    width: 100%;
  }

  footer ul li a{
    padding: 0 5px 2px;
  }

  .add_p{
    font-size: 14px;
    margin-bottom: 27px;
  }
}

.hv_img{
  cursor:pointer;
  overflow:hidden;
  width: 100%;
}

.hv_img img {
  cursor: default;
  height: auto;
  transition: transform .6s ease;
  width: 100%;
}
.hv_img:hover img {
  transform: scale(1.1);
}


#page_top{
  width: 70px;
  height: 70px;
  position: fixed;
  right: -70px;
  bottom: 50px;
  background: var(--color-style1);
  opacity: 0.9;
  border-radius: 50%;
  z-index:99;
}

#page_top a{
  position: relative;
  display: block;
  width: 70px;
  height: 70px;
  text-decoration: none;
}

#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f062';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

.grbg{
  height: 100%;
  position: relative;
  transition: ease .2s;
}


.grbg::before{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 106%;
  background: var(--color-style2);
  transition: 0.5s;
}


.fade::before {
  width: 100%;
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;

}

/*下層ページ共通*/
section#und_fv{
  margin-top: 80px;
  width:100%;
  height: 348px;
  overflow: hidden;
  position: relative;
  background: url('../img/under_bg.png') no-repeat;
  background-size: cover;
}

section#und_fv:before {
  animation: img-wrap 1s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@keyframes img-wrap {
  0% {
  height: 348px;
  }

  100% {
    transform: translateX(100%);
  }
}

section#und_fv h2{
  font-size: 40px;
  letter-spacing: 0.2em;
  line-height: 1.3;
  font-weight: 900;
}

section#und_fv h2 span{
  font-size: 20px;
  font-weight: bold;
  display: block;
}

section#und_fv .wrap{
  display: flex;
  align-items: center;
  height: 100%;
}

@media (max-width:768px){
  section#und_fv h2{
    font-size: 24px;
    white-space: nowrap;
  }
}

@media (max-width:420px){
  section#und_fv{
    margin-top: 70px;
    height: 134px;
  }
}

ul.breadcrumb{
  margin-top: 15px;
}

ul.breadcrumb li{
  color:#828282;
}

ul.breadcrumb li a{
  color:#828282;
}

ul.breadcrumb li a::after{
  font-family: "Font Awesome 5 Free";
  content: "\f054";
  font-weight: 900;
  font-size: 14px;
  color:#828282;
  margin:0 1em;
}

@media (max-width:768px){
  ul.breadcrumb{
    display: none;
  }
}

.t_center{
  text-align: center;
}

h3.h_3d{
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 0.2em;
  margin: 106px auto 53px;
  padding-bottom: 14px;
  border-bottom: solid 3px var(--color-style2);
  width: 532px;
}


h3.h_3d::first-letter{
  color: var(--color-style2);
}

@media (max-width:768px){
  h3.h_3d{
    font-size: 24px;
    width: 326px;
  }
}

@media (max-width:420px){
  h3.h_3d{
    width: 100%;
  }
}

/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

.scroll_up_2 {
  transition: 1.5s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up_2.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}