@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Zen+Kaku+Gothic+Antique&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/* ------------------
 グローバル変数
------------------ */
:root {
  /* 色 */
  --base-color: #1EB03B;
  --main-color: #094;
  --sub-color: #EEE;
}

/* ------------------
 フォント
------------------ */
body{
  font-size: 1.6rem;
  color: #141414;
  font-family: "Noto Sans JP", "Raleway";
}
.fs_14{
  font-size: 1.4rem;
}
.red{
  color: #FE222E;
}

main{
  background: #FFF;
  margin-top: 80px;
}

/* スマホメニュー非表示 */
.spNav_btn,.spNav_panel {display: none;}

/* PCのみ表示する要素を表示 */
.pc_block {display: block;}
.sp_block {display: none;}

.bold{
  font-weight: bold;
}

a:hover {
    opacity: 0.7;
}

/* インデント */
.indent{
  text-indent: -1em;
  padding-left: 1em;
}

/* 文字の位置 */
.left{
  text-align: right;
}
.center{
  text-align: center;
}
.right{
  text-align: right;
}

/*コンポーネント*/
.mt_0{margin-top: 0px;}
.mt_10{margin-top: 10px;}
.mt_20{margin-top: 20px;}
.mt_30{margin-top: 30px;}
.mt_40{margin-top: 40px;}
.mt_50{margin-top: 50px;}
.mt_60{margin-top: 60px;}
.mt_70{margin-top: 70px;}
.mt_80{margin-top: 80px;}
.mt_90{margin-top: 90px;}
.mt_100{margin-top: 100px;}
.mt_110{margin-top: 110px;}

.mb_0{margin-bottom: 0px;}
.mb_10{margin-bottom: 10px;}
.mb_20{margin-bottom: 20px;}
.mb_30{margin-bottom: 30px;}
.mb_40{margin-bottom: 40px;}
.mb_50{margin-bottom: 50px;}
.mb_60{margin-bottom: 60px;}
.mb_70{margin-bottom: 70px;}
.mb_80{margin-bottom: 80px;}
.mb_90{margin-bottom: 90px;}
.mb_100{margin-bottom: 100px;}
.mb_110{margin-bottom: 110px;}

/* アニメーション */
.fade{
  opacity: 0;
  transition: .5s ease-in-out;
}
.fade.fade--bot{
  transform: translate(0,100px);
}
.fade.fade--top{
  transform: translate(0,-100px);
}
.fade.fade--left{
  transform: translate(-100px,0);
}
.fade.fade--right{
  transform: translate(100px,0);
}
.fade.fadein{
  transform: translate(0,0);
  opacity: 1;
}
/* 子要素を順番にフェードイン */
.fade.fade--list{
  opacity: 1;
}
.fade_child{
  opacity: 0;
  transform: translate(0,100px);
  transition: .5s ease-in-out;
}
.fadein .fade_child{
  transform: translate(0,0);
  opacity: 1;
}
.fade_child:nth-child(1){
  transition-delay: 0.15s;
}
.fade_child:nth-child(2){
  transition-delay: 0.3s;
}
.fade_child:nth-child(3){
  transition-delay: 0.45s;
}
.fade_child:nth-child(4){
  transition-delay: 0.6s;
}
.fade_child:nth-child(5){
  transition-delay: 0.75s;
}
.fade_child:nth-child(6){
  transition-delay: 0.9s;
}
.fade_child:nth-child(7){
  transition-delay: 1.05s;
}
.fade_child:nth-child(8){
  transition-delay: 1.2s;
}
.fade_child:nth-child(9){
  transition-delay: 1.35s;
}
.fade.roll-in {
opacity: 0;
}
.fade.roll-in.roll-in.fadein {
animation: rollFadeIn 1s ease-in-out;
opacity: 1;
}
@keyframes rollFadeIn {
from {
  opacity: 0;
  transform: rotate(-180deg) translate(0);
}
to {
  opacity: 1;
  transform: rotate(0deg) translate(0);
}
}

/* ------------------
 header
------------------ */
header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  transition: all .3s;
  background: #FFF;
}
.hd_inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 85px;
  padding: 0 50px;
}
.header_logo {
  position: relative;
  bottom: 5px;
}
.hd_nav_list{
  display: flex;
  gap: 30px;
  height: 100%;
  li{
    height: 100%;
    a{
      font-weight: 700;
      font-size: 1.6rem;
      color: #222;
      height: 100%;
      display: flex;
      align-items: center;
    }
  }
}
.hd_nav{
  height: 100%;
}
.hd_cont{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: #1EB03B;
  width: 190px;
  height: 90px !important;
  color: #FFF !important;
  clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%);
}
/* メガメニュー */
.pcNav_mega{
  background: var(--sub-color);
  overflow: hidden;
  opacity: 0;
  height: 0;
  transition: all .5s;
}
.mega:hover .pcNav_mega{
  opacity: 1;
  box-shadow: 0px 5px 10px #00000029;
  height: 626px;
}
/* 製品情報 メガメニュー */
.mega_products{
  max-width: 1109px;
  width: 100%;
  position: absolute;
  top: 80px;
  right: 0;
}
.pro_list--mega{
  max-width: 1024px;
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 50px;
  &::before{
    content: "";
    display: block;
    position: absolute;
    width: 72px;
    height: 4px;
    background: var(--base-color);
    top: 0;
    left: 220px;
  }
}
.plm_box{
  max-width: 154px;
  width: 100%;
  text-align: center;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plm_btn_list{
  max-width: 1024px;
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
}
.plb_btn{
  max-width: 328px;
  width: 100%;
  min-height: 60px;
  border: 1px solid #1EB03B;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: #FFF;
  font-weight: 700;
}

/* ------------------
 footer
------------------ */
.ft_inner{
  max-width: 1200px;
  width: 100%;
  margin: auto;
  padding: 90px 0 60px 0;
}
.fi_flex{
  display: flex;
  justify-content: space-between;
}
.ft_add{
  line-height: 32px;
  margin-top: 20px;
}
.ft_nav{
  display: flex;
}
.ft_nav_list{
  border-right: 1px solid #25C58D;
  padding: 0 35px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  &:first-child{
    border-left: 1px solid #25C58D;
  }
}
.fn_top a{
  font-weight: 400;
  color: #222;
}
.fn_second{
  margin-left: 20px;
  a {
    font-weight: 400;
    color: #222;
  }
}
.fn_third{
  margin-left: 40px;
  a {
    font-weight: 400;
    color: #222;
  }
}
.copyright{
  background: var(--base-color);
  display: flex;
  justify-content: center;
  padding: 20px 0;
  small{
    color: #FFF;
    display: flex;
    align-items: center;
  }
}
.ft_link_list{
  max-width: 490px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* ------------------
下層ページ共通
------------------ */

/* 共通タイトル */
.cmn_title p{
  font-family: "Raleway";
  font-size: 8rem;
  font-weight: 700;
  line-height: 80px;
  color: #1EB03B;
}
.cmn_title h2{
  font-weight: 700;
}

/* 共通ボタン */
.cmn_btn{
  max-width: 240px;
  width: 100%;
  min-height: 60px;
  color: #FFF;
  background: #1EB03B;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-right: 20px;
  &::before{
    content: "";
    background: #141414;
    width: 60px;
    height: 60px;
    position: absolute;
    right: 0;
    clip-path: polygon(35% 0, 100% 0, 75% 100%, 0 100%);
  }
  &::after{
    content: "";
    background: url(../../common/img/cb_allow.svg) no-repeat center/cover;
    width: 27px;
    height: 9px;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* page_visual */
.page_visual{
  min-height: 300px;
  display: flex;
}
.pv_inner{
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pv_title {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pv_title p{
  font-family: "Raleway";
  font-size: 8rem;
  font-weight: 700;
  line-height: 125%;
  color: var(--base-color);
}
.pv_title h1{
  font-weight: 700;
  /* display: flex;
  align-items: center;
  gap: 8px; */
  font-size: 1.6rem;
  /* &::before{
    content: "";
    display: block;
    background: var(--main-color);
    width: 26px;
    height: 2px;
  } */
}

/* パンくずリスト */
.breadcrumb{
  max-width: 1024px;
  width: 100%;
  margin: auto;
  padding: 10px 0;
}
.breadcrumb_list{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 10px;
  & li::after{
    content: "-";
    color: #222;
    position: relative;
    left: 6px;
  }
  & a{
    color: #222;
    text-decoration: underline;
  }
}
.breadcrumb_list li:last-child::after{
    display: none;
}

/* ------------------
Backtop
------------------ */
#backtop {
  position: fixed;
  display: block;
  width: 50px;
  height: 50px;
  right: 3%;
  bottom: 50px;
  border-radius: 50%;
  background: rgba(50,50,50,0.9);
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
  z-index: -10;
}
#backtop::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-25%) rotate(-45deg);
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
}
#backtop.active {
  opacity: 0.6;
  visibility: visible;
  z-index: 50;
}

/* cmn_link */
.cmn_link_inner{
  max-width: 1024px;
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 100px 0;
}
.cl_box{
  max-width: 241px;
  width: 100%;
  p{
    min-height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--base-color);
    font-weight: 700;
    color: #FFF;
  }
}

/* cmn_pro_link */
.cmn_pro_link{
  background: var(--sub-color);
}
.cpl_inner{
  max-width: 1024px;
  width: 100%;
  margin: auto;
  padding: 60px 0;
}
.cpl_catalog{
  display: block;
  max-width: 712px;
  width: 100%;
  margin: auto;
}
.cpl_list{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 60px;
}
.cpl_list--box{
  font-weight: 700;
  line-height: 24px;
  color: #000;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* お問い合わせ */
.contact{
  position: relative;
  &::before{
    content: "";
    background: url(../../common/img/cont_bg.png) no-repeat center/cover;
    width: 100%;
    height: 400px;
    position: absolute;
    top: 0;
  }
}
.cont_inner{
  padding-top: 280px;
}
.cont_box{
  max-width: 1024px;
  width: 100%;
  margin: auto;
  background: var(--base-color);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  padding: 60px 0;
  position: relative;
  z-index: 1;
}
.cont_title{
  p{
    font-size: 8rem;
    font-weight: 700;
    font-family: "Raleway";
    color: #FFF;
  }
  h2{
    font-weight: 700;
    color: #FFF;
  }
}
.cont_btn{
  max-width: 327px;
  width: 100%;
  min-height: 60px;
  height: 100%;
  color: #141414;
  font-weight: 700;
  background: #FFF;
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

@media screen and (max-width: 1279px) {
/* 推奨動作環境1280pxに固定 */
  body {
    width: 1280px;
  }

  main{
    margin-top: 70px;
  }

  /* ------------------
  header
  ------------------ */
  .hd_inner {
    height: 70px;
    display: flex;
    justify-content: space-between;
    padding: 0;
  }
  .header_logo {
    max-width: 180px;
    padding-left: 10px;
    bottom: auto;
  }
  .hd_nav{
    display: none;
  }
	
  /* ------------------
  スマホメニュー
  ------------------ */
  /* ボタン */
  .spNav_btn {
    display: block;position: absolute; width: 80px;height: 80px;background: var(--base-color);top:0;right: 0;transition: all 0.5s;z-index: 100;clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%);
    span {position: absolute;display: block;height: 2px;background: #fff;margin: auto;}
    
    /* 閉じた状態 */
    &[aria-pressed="false"] span {width: 30px;transition: all 0.5s;}
    &[aria-pressed="false"] span:nth-child(1) {top: 25px;left: 0;right: 0;}
    &[aria-pressed="false"] span:nth-child(2) {top: 44%;left: 0;right: 0;transform: translateY(-50%);}
    &[aria-pressed="false"] span:nth-child(3) {bottom: 35px;left: 0;right: 0;}
    
    /* 開いた状態 */
    &[aria-pressed="true"] span {width: 30px;transition: all 0.5s;}
    &[aria-pressed="true"] span:nth-child(1) {top: 46%;transform: translateY(-1.5px) rotate(45deg);left: 25px;}
    &[aria-pressed="true"] span:nth-child(2) {display: none;}
    &[aria-pressed="true"] span:nth-child(3) {bottom: 55%;transform: translateY(1.5px) rotate(-45deg);left: 25px;}
  }
  .spNav_btn::before {
    position: absolute;
    left: 0px;
    bottom: 15px;
    content: "MENU";
    display: block;
    width: 100%;
    color: #fff;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition: all 0.4s;
    font-size: 1.0rem;
  }

  /* メニューパネル */
  .spNav_panel {
    display: block;
    height: 100vh;
    width: 260px;
    position: fixed;
    top: 0;
    right: 0;
    transition: all 0.5s;
    background: var(--base-color);
    box-shadow: -8px 0px 8px -1px rgba(0, 0, 0, 0.2);
    overflow: auto;
    z-index: 99;
    
    /* パネルが閉じている状態 */
    &[aria-hidden="true"] {
      visibility: hidden;
      pointer-events: none;
      transform: translateX(100%);
    }

    /* パネルが開いている状態 */
    &[aria-hidden="false"] {
      visibility: visible;
      transform: translateX(0);
    }
  }

  /* メニューパネル内の項目 */
  .spNav_list {
    width: 100%;
    padding: 56px 0 0;
    font-size: 1.5rem;
  }
  .spNav_list--item {
    border-bottom: 1px solid #fff;
    a {
      display: block;
      padding: 12px 20px;
      color: #fff;
    }
  }
  .spNav_accordion--title {
    width: 100%;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    &::after {
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }
    
    /* アコーディオン開閉時の状態表示 */
    &[aria-expanded="false"]::after {content: "+";}
    &[aria-expanded="true"]::after {content: "-";}

    /* アコーディオン内の項目 */
    &[aria-expanded="false"] + .spNav_accordion {
      max-height: 0;
      height: auto;
    }
    &[aria-expanded="true"] + .spNav_accordion {
      max-height: 1000px;
    }
  }
  .spNav_accordion {
    overflow: hidden;
    background: #fff;
    transition: all 0.5s;
    a {
      padding-left: 15%;
      color: var(--base-color);
      border-bottom: 1px dashed #ccc;
    }
  }
  /* bodyをタッチ不可に */
  #onbody {position: absolute;height: 100%;width: 100%; top: 0;left: 0;background: rgba(0, 0, 0, 0.6);z-index: 98;overflow: hidden;pointer-events: none;}
  body:has(#onbody[aria-hidden="true"]) {height: 100%; overflow: hidden;}
}

@media screen and (min-width: 768px) {
/* PCの場合はtelリンクを無効 */
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}

/* iPad調整用 */
@media screen and (orientation: portrait) and (min-width: 768px){
  .pro_list--mega{
    &::before{
      left: 190px;
    }
  }
}

@media screen and (max-width: 767px){
  /* スマホ閲覧時、横幅可変 */
  body {
    width: 100%;
  }

  /* スマホのみ表示する要素を表示 */
	.sp_block {display: block;}
	.pc_block {display: none;}

  /* 共通タイトル */
  .cmn_title p{
    font-size: 4.8rem;
  }

  /* cmn_link */
  .cmn_link_inner{
    padding: 60px 5%;
    gap: 10px;
  }
  .cl_box{
    width: calc(50% - 5px);
    p{
      font-size: 1.4rem;
    }
  }

  /* cmn_pro_link */
  .cpl_inner{
    padding: 60px 5%;
  }
  .cpl_list{
    gap: 10px;
    margin-top: 40px;
  }
  .cpl_list--box{
    width: calc(50% - 5px);
    img{
      width: 100%;
    }
  }

  /* page_visual */
  .page_visual{
    min-height: 250px;
  }
  .pv_title p{
    font-size: 4.8rem;
  }
  .pv_title h1{
    font-size: 1.4rem;
  }
  .pv_inner{
    padding: 0 5%;
  }

  /* パンくずリスト */
  .breadcrumb{
    padding: 10px 5%;
    font-size: 1.4rem;
  }

  /* contact */
  .contact{
    &::before{
      height: 300px;
    }
  }
  .cont_inner{
    padding: 100px 5% 0 5%;
  }
  .cont_box{
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 30px 5%;
  }
  .cont_title{
    p{
      font-size: 4.8rem;
    }
  }
  .cont_btn{
    font-size: 1.4rem;
    max-width: 240px;
  }

  /* ------------------
  footer
  ------------------ */
  .ft_inner{
    padding: 40px 5%;
  }
  .fi_flex{
    flex-direction: column;
  }
  .ft_link_list{
    gap: 10px;
    a{
      width: calc(50% - 5px);
    }
  }
  .ft_nav{
    margin-top: 30px;
    justify-content: center;
  }
  .ft_nav_list {
    padding: 0 10px;
    gap: 10px;
    li{
      line-height: 15px;
    }
  }
  .fn_top a{
    font-size: 1rem;
  }
  .fn_second{
    margin-left: 10px;
    a{
      font-size: 1rem;
    }
  }
  .fn_third{
    margin-left: 20px;
    a {
      font-size: 1rem;
    }
  }
  .copyright{
    padding: 10px 5%;
  }
  .copyright small {
    display: inline-block;
  }
  .copyright small a {
    display: inline-block;
    position: relative;
    top: 4px;
  }
}

/* 印刷用設定 */
@media print {
  body {
    width:1280px!important;
    zoom: 0.68;
    -webkit-print-color-adjust: exact;
  }

  header{
    position: absolute;
  }

  #backtop{
    display: none;
  }
}
@page {
  size: A4;margin: 5px;
}