@charset "UTF-8";
/*
Theme Name: Sankyo kogyo
Description: 三協工業株式会社
Version: 1
Author: RAISE DESIGN
*/
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
html {
  scroll-behavior: smooth;
}

html,body {font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #fff;
  text-align: center;
  }
img {
	border: none;width: 100%;height: auto;
	vertical-align: top;
}
p {margin: 0; padding: 0;}
body {text-align: left;
  font-size: 15px;
  line-height: 2;
  color: #3e3a39; overflow:scroll;
  }
nav.drawer-nav {
	z-index: 1000!important;
}
section {
  overflow-x: hidden;
}
button {border: none; padding: 0; margin: 0;}

/* リンク部分
----------------------------------------------------------------------------------------------------------------------*/

a {
	color: #000;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	/*color: #34A7E0;*/
	text-decoration: none;
}
a:active {
	text-decoration: none;
}

.ff01 { font-family: "Noto Sans JP", sans-serif;}
.ff02 {font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;}
.ff03 {font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;}
.ff04 {font-family: "Crimson Text", serif;}
.fc01 {color: #ffffff!important;}

.lh12 {line-height:1.2!important;}
.lh20 {line-height:2;}
.lh30 {line-height:3;}

.fcwh {color:#ffffff;}
.fcbk {color:#000000;}
.fcgr {color:#999999;}
.fcgl {color:#6f9b1c;}
.fcrd {color:#ff0000;}
.fcbl {color:#0168b7;}
.fcgn {color:#037b00;}
.fcyl {color:#ffff01;}
.fcor {color:#ffa401;}

.tac {text-align:center!important;}
.tal {text-align:left;}
.tar {text-align:right;}
.taltac {text-align:left;}
@media print, screen and (max-width: 700px) {.taltac {text-align:center;}}
.tactal {text-align:center;}
@media print, screen and (max-width: 700px) {.tactal { text-align: left; }}


h1,h2,h3,h4,h5 {
  font-size: 100%;
  line-height: 1.5;
  }

h1 {
	text-align: left;
	margin: 8px 0 0 0;
	clear: both;
	height: 10px;
	color: #999;
 }

.ls {
	letter-spacing: -0.2em;
  }
.ls2 {
	letter-spacing: -0.1em;
  }
@media print, screen and (min-width: 1100px) {.pc {display: block;}}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {.pc {display: none;}}
@media print, screen and (max-width: 700px) {.pc {display: none;}}
@media print, screen and (min-width: 1100px) {.pco {display: none;}}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {.pco {display: block;}}
@media print, screen and (max-width: 700px) {.pco {display: block;}}
@media print, screen and (min-width: 1100px) {.sp {display: none;}}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {.sp {display: none;}}
@media print, screen and (max-width: 700px) {.sp {display: block;}}
@media print, screen and (min-width: 1100px) {.spo {display: block;}}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {.spo {display: block;}}
@media print, screen and (max-width: 700px) {.spo {display: none;}}
@media print, screen and (min-width: 1100px) {.tb {display: none;}}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {.tb {display: block;}}
@media print, screen and (max-width: 700px) {.tb {display: none;}}

@media print, screen and (min-width: 921px) {.pc2 {display: block;}}
@media print, screen and (max-width: 900px) {.pc2 {display: none;}}
@media print, screen and (min-width: 921px) {.pco2 {display: none;}}
@media print, screen and (max-width: 900px) {.pco2 {display: block;}}
@media print, screen and (min-width: 921px) {.sp2 {display: none;}}
@media print, screen and (max-width: 900px) {.sp2 {display: block;}}
@media print, screen and (min-width: 921px) {.spo2 {display: block;}}
@media print, screen and (max-width: 900px) {.spo2 {display: none;}}

header {position: fixed;
  z-index: 5;
  transition: background-color 0.3s ease;
}

  header::-webkit-scrollbar {
    display: none;
  }
  @media print, screen and (min-width: 1000px) {
    header {
      height: 80px;
      width: 100%;
      left: 0;
      top: 0;
      border-bottom: none;
    }
  }
  @media screen and (min-width: 701px) and (max-width: 999px) {
    header {
      height: 80px;
      width: 100%;
      left: 0;
      top: 0;
      border-bottom: none;
    }
}
@media print, screen and (max-width: 700px) {
    header {
      height: 70px;
      width: 100%;
      left: 0;
      top: 0;
      border-bottom: 1px solid #eeeeee;
    }
  }
.header-an {
    animation-name: header-ana;
    animation-duration: 2.7s;
  }
  @keyframes header-ana {
    0% {
      opacity: 0;
      transform: translateX(0px);
    }
    72% {
      opacity: 0;
      transform: translateX(0px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
.change-color {
  background-color: #ffffff;
  transition: 0.3s;
}

.gnav-wrapper {z-index: 1000; position: relative; letter-spacing: 0.05em; text-align: center;}
@media print, screen and (min-width: 1300px) {
.gnav-wrapper  {font-size:100%;}
}
@media screen and (max-width: 1199px) {
.gnav-wrapper  {font-size:100%;}
}

.gnav {margin: 0 auto; padding: 0; display: flex; justify-content: space-between; max-width: 100%;}
 
.gnav li {
  list-style-type: none;
  width: calc(100% / 8);
  line-height: 1.8;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px; /* ここはそのまま */
  text-align: center;
  transition: all .3s ease-in-out;
}
.gnav a {padding: 0;}
.gnav li.mgmn {height: 30px;padding: 25px 0;}

 .gnav li.mgmn > a {
  color: #231815!important;
}

.megamenu {line-height: 1.1;
background-color: rgba(239, 239, 239, 0.7);
 max-height: 0;
 width: 100%;
 position: absolute;
 top: 80px;
 left: 0;
 transition: all .2s ease-in;
 z-index: 999;
}
 
.megamenu-inner {justify-content: center; align-items: center; height: 80px;
 display: flex;
 flex-wrap: wrap;
}
 
.megamenu-inner li {
 width: 120px;
 padding: 0; margin: 0;
}
.megamenu-inner li.wde {
 width: 240px;
 padding: 0; margin: 0;
}
 
.megamenu-inner a {color: #231815;
 border-left: none;
}
 
.gnavsp{background: rgba(0,0,0,0.9);-webkit-overflow-scrolling: touch;
    display: none; top: 0!important;
height: 100vh;
  overflow-y: scroll;
    position: fixed;
    width: 100%;
z-index: 20; line-height:1.5; margin: 0; padding: 0;
}

.gnavsp__wrap{-webkit-overflow-scrolling: touch;
    display: flex; justify-content: space-between; align-items: center;
    width: 90%; padding:5%; max-width: 1200px; margin: 0 auto; height: 90%;
}

.menu{ line-height:2.0;
    height: 20px;
position: fixed;
    width: 30px;
z-index: 99;
}

@media print, screen and (min-width: 1300px) {.menu{top:  30px; right: 25px;}}
@media only screen and (min-width: 701px) and (max-width: 9129px) {.menu{top: 30px; right: 25px;}}
@media only screen and (max-width: 700px) {.menu{top: 24px; right: 15px;}}

.menu__line{
background: #ffffff;
    display: block;
    height: 2px;
    position: absolute;
    transition:transform .3s;
    width: 100%;
}
.menu__line--center{
    top: 9px;
}
.menu__line--bottom{
    bottom: 0;
}
.menu__line--top.active{
    top: 8px;
    transform: rotate(45deg);
}
.menu__line--center.active{
    transform:scaleX(0);
}
.menu__line--bottom.active{
    bottom: 10px;
    transform: rotate(135deg);
}


ul.fullmenu {display: flex;flex-wrap: wrap;justify-content:center;align-items: stretch; list-style-type:none; padding:0; margin:0 auto; width:100%; color:#ffffff; font-size:140%; letter-spacing:0.05em;}
ul.fullmenu li {padding:15px 30px; margin:0; box-sizing: border-box; border-bottom: 1px solid #333333; width:100%; position: relative;opacity: 0;                     /* 最初は透明 */
  transform: translateY(-15px);   /* 少し上から登場 */
  animation: fadeSlide 1.2s ease forwards; /* ゆっくりめ */}
ul.fullmenu li::after {
  content: '';
  position: absolute;
  right: 5px; /* liの右端からの距離 */
  top: 50%;
  transform: translateY(-50%) rotate(45deg); /* 45度回転させて矢印に */
  width: 8px; /* 矢印のサイズ（調整可能） */
  height: 8px;
  border-top: 1px solid #eeeeee; /* 矢印の色と太さ */
  border-right: 1px solid #eeeeee;
  /* border-left: 1px solid transparent; */ /* 下側は不要 */
  /* border-bottom: 1px solid transparent; */ /* 左側も不要 */
}
ul.fullmenu li:first-child {border-top: 1px solid #333333; width:100%;}
ul.fullmenu li a{color:#ffffff;}

/* アニメーション本体 */
@keyframes fadeSlide {
  0% {
    opacity: 0;
    transform: translateY(-15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* li を順番に表示（遅延を付与） */
ul.fullmenu li:nth-child(1) { animation-delay: 0.2s; }
ul.fullmenu li:nth-child(2) { animation-delay: 0.4s; }
ul.fullmenu li:nth-child(3) { animation-delay: 0.6s; }
ul.fullmenu li:nth-child(4) { animation-delay: 0.8s; }
ul.fullmenu li:nth-child(5) { animation-delay: 1.0s; }
ul.fullmenu li:nth-child(6) { animation-delay: 1.2s; }
ul.fullmenu li:nth-child(7) { animation-delay: 1.4s; }
ul.fullmenu li:nth-child(8) { animation-delay: 1.6s; }
ul.fullmenu li:nth-child(9) { animation-delay: 1.8s; }
ul.fullmenu li:nth-child(10) { animation-delay: 2.0s; }
/* 必要なだけ続けてOK */

.bg-menuslider {border: 1px solid #333333; padding:4%;}

.menu-sp {height: 80px; color: #ffffff; font-size: 75%; background-color: #000000; text-align:center; line-height:1.5; display:flex; justify-content: center; align-items: center; width:90px!important; position:relative;}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {.menu-sp {height: 80px; position:absolute; right:0; width:80px!important; }}
@media print, screen and (max-width: 700px) {.menu-sp {height: 70px; position:absolute; right:0; width:70px!important; }}

.brb {height: 20px!important;
 border-right: 1px solid #231815;
}

.logo {position:absolute; top: 12px; left: 25px; width:240px;}
.logo-pc {width:250px!important; margin: -21px 3% 0; padding: 0;}
.logo-spmenu {width:300px; margin: 0 auto 30px; padding: 0;}
.menu-tel {position:absolute; font-size:70%; text-align:center; line-height:1.5; display:flex; justify-content: center; align-items: center;}
@media print, screen and (min-width: 1000px) {
.menu-tel {right: 0; width:180px; top: 0; height: 86px;}
}
@media screen and (min-width: 701px) and (max-width: 999px) {
.menu-tel {right: 0; width:180px; top: 0; height: 86px;}
}
@media screen and (max-width: 700px) {
.menu-tel {right: 60px; width:50px; top: 0; height:70px;}
}
.menu-tel p{margin: 0; padding:0; font-size:200%; text-align:center;}
.menu-tel a{}
.menu-contact {font-size: 75%; position:absolute; text-align:center; line-height:1.5; display:flex; justify-content: center; align-items: center;}
@media print, screen and (min-width: 1000px) {
.menu-contact {width:90px; right: 180px; top: 0; height: 86px;}
}
@media screen and (min-width: 701px) and (max-width: 999px) {
.menu-contact {width:90px; right: 180px; top: 0; height: 86px;}
}
@media screen and (max-width: 700px) {
.menu-contact {width:50px; right: 110px; top: 0; height: 70px;}
}

.menu-tel-pc {height: 86px; color: #ffffff; background-color: #ffffff; font-size:70%; text-align:center; line-height:1.5; display:flex; justify-content: center; align-items: center; width:226px!important; }
.menu-tel-pc p{margin: 0; padding:0; max-width:150px; text-align:center;}
.menu-tel-pc a{color:#ffffff!important;}
.menu-contact-pc {height: 86px; color: #ffffff; font-size: 75%; background-color: #eeeeee; text-align:center; line-height:1.5; display:flex; justify-content: center; align-items: center; width:106px!important;}
.menu-contact-pc p{padding:0; margin:0; max-width:62px;}
.menu-contact-pc a{color:#ffffff!important;}

.menu-rrt-pc {display:flex; justify-content: center; align-items: center; width:28px!important; margin:0px 17px 2px 30px;}


.menu-tel-pc img{filter: invert(100%);}
.menu-contact-pc img{filter: invert(100%);}

.menu-recruit {font-size: 90%; position:absolute; text-align:center; line-height:1.5; padding:3px; top: 33px;}
@media print, screen and (min-width: 1000px) {
.menu-recruit {width:90px; right: 320px;  display:block;}
}
@media screen and (max-width: 999px) {
.menu-recruit {width:90px; right: 320px; display:none;}
}

.c-bt-first a {
    height: 60px;
    line-height: 60px;
    background: #333333;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    overflow: hidden;
    position: relative;
    text-align: center;
    text-decoration: none;
 border-radius: 0px;
}
@media print, screen and (min-width: 701px) {.c-bt-first a{width: 100%;}}
@media only screen and (max-width: 700px){.c-bt-first a{width: 100%;}}

.c-bt-first a:before {line-height: 65px;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .7s cubic-bezier(.19, 1, .22, 1);
    background: var(--c-bg-nineth);
  }
  
.c-bt-first a:hover:before {
    transform: scaleX(1);
    transform-origin: left;
  color: #eeeeee;
  }
  
.c-bt-first a .inner-text {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
  }

.nav-bread {margin: 50px 0 80px; overflow: hidden; font-size: 80%;}
@media print, screen and (max-width: 700px) {.nav-bread {margin: 20px 0 30px;}}

footer {background-color: #ababab; overflow: hidden; color: #231815; position: relative; z-index: 5;}
@media print, screen and (min-width: 1100px) {footer {padding: 50px 0;}}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {footer {padding: 50px 0;}}
@media print, screen and (max-width: 700px) {footer {padding: 50px 0;}}

.cmname {overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: row-reverse;}
@media print, screen and (min-width: 1100px) {.cmname-ad {width: 300px; margin: 20px 0 0 0; text-align: left; font-size: 90%;}}
@media print, screen and (max-width: 1099px) {.cmname-ad {width: 100%; margin: 0 0 50px; text-align: center;}}
.cmname-ad a{color: #ffffff!important;}
.cmname-ad p{max-width: 250px; margin: 0 0 20px;}
@media print, screen and (max-width: 1099px) {.cmname-ad p {margin: 0 auto 32px;}}
@media print, screen and (min-width: 1100px) {.cmname-link {width: calc(100% - 450px); margin: 0;}}
@media print, screen and (max-width: 1099px) {.cmname-link {width: 100%; margin: 0;}}

.cta {background-color: #f9f9f9; overflow: hidden; color: #000000; position: relative;}
.cta-in {display:flex; justify-content: space-between; align-items: center; flex-wrap:wrap; background-color: #ffffff; padding: 4%; }
@media screen and (min-width: 1100px) {.cta-in {margin: 70px auto; width: 800px;}}
@media screen and (max-width: 1099px) {.cta-in {margin: 40px 0; width: 92%;}}

.cta-box {width: 45%;}
@media screen and (max-width: 700px) {.cta-box {width: 100%;}}

.c-contact-flex-box {text-align:center;}
.c-contact-flex-box-tel {line-height:1.5; margin: 0;}
@media only screen and (max-width: 700px){.c-contact-flex-box-tel {margin: 50px 0 0 0;}}
.c-contact-flex-box-title-tel {margin: 0 0 15px 0; font-weight:400; letter-spacing:0.05em; font-size: 110%;}
.c-contact-flex-box-title-telnum {margin: 0 0 20px 0; font-weight:600; letter-spacing:0.07em; line-height:1.2; font-size: 250%;}
.c-contact-flex-box-title-telnum span {font-weight:700; font-size: 30%;}
.c-contact-flex-box-title-fax {margin: 0 0 0 0; font-weight:400; letter-spacing:0.1em; font-size:100% ;}

.cls {position: absolute; z-index: 12; color: #fff; text-shadow:0 0 10px #000; font-weight: 700;}
@media print, screen and (min-width: 1200px) {.cls {left: 15%; top: 20%;}}
@media print, screen and (min-width: 769px) and (max-width: 1199px) {.cls {left: 10%; top: 20%;}}
@media only screen and (max-width: 700px){.cls {left: 20%; top: 20%;}}

.cls01 {animation-name: clsa01;animation-duration: 4.5s; letter-spacing: 0.05em; line-height: 1.9;}
@keyframes clsa01 {
0% {opacity: 0; transform: translateX(-40px);}
72% {opacity: 0; transform: translateX(-40px);}
100% {opacity: 1; transform: translateX(0);}
}
@media print, screen and (min-width: 1200px) {.cls01 {font-size: 780%;}}
@media print, screen and (min-width: 769px) and (max-width: 1199px) {.cls01 {font-size: 600%;}}
@media only screen and (max-width: 700px) {.cls01 {font-size: 340%;}}

.cls02 {animation-name: clsa02; animation-duration: 4.8s; letter-spacing: 0.15em; line-height: 1.9;}
@keyframes clsa02 {
0% {opacity: 0; transform: translateX(-40px);}
72% {opacity: 0; transform: translateX(-40px);}
100% {opacity: 1; transform: translateX(0);}
}
@media print, screen and (min-width: 1200px) {.cls02 {font-size: 290%;}}
@media print, screen and (min-width: 769px) and (max-width: 1199px){.cls02 {font-size: 250%;}}
@media only screen and (max-width: 700px){.cls02 {font-size: 140%;}}


ul.link {list-style-type: none; overflow: hidden; color: #ffffff; margin: 0 0 50px; padding: 0; display: flex; flex-wrap: wrap; line-height:1.8;}
ul.link li{margin: 0; padding: 30px 0; text-align:left;}
@media print, screen and (max-width: 701px) {ul.link li {padding: 20px 0; text-align:center;}}
ul.link li a{color: #ffffff;}
@media print, screen and (min-width: 701px) {ul.link li {width: calc(100% / 3);}}
@media print, screen and (max-width: 700px) {ul.link li {width: calc(100% / 2);}}
ul.link li p{padding: 0; margin: 0;}

ul.outlink {list-style-type: none; overflow: hidden; margin: 0 ; padding: 0; max-width: 600px; font-size: 110%;}
ul.outlink li{padding: 0 18px 14px; margin: 0 0 18px 0; border-bottom: 1px solid #dddddd;}
/* aタグをブロック化＆右側に余白 */
ul.outlink li a {
  display: block;
  position: relative;
  padding-right: 24px; /* 矢印分のスペース */
}

/* 右端・縦中央の矢印 */
ul.outlink li a::after {
  content: "›";              /* 好きな矢印記号に変更可 */
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-size: 14px;           /* 必要に応じて調整 */
}


.shad {background-color: #ffffff;width: 100%; position: relative; overflow: hidden;}

.shad:after {
  content: "";
  position: absolute; z-index:10;
  right: 0;
  bottom: 0;       /* 最下部起点にする */
  width: 100%;
  height: 0;       /* 初期は高さ0 */
  background-color: #999999;
  overflow: hidden;
  transform: translateY(0); /* 初期は位置移動なし */
}

.shad.animate:after {
  animation-name: secondaryImageOverlayIn, secondaryImageOverlayOut;
  animation-duration: 0.9s, 0.9s;
  animation-delay: 0s, 0.9s;
  animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1), cubic-bezier(0.77, 0, 0.175, 1);
  animation-fill-mode: forwards, forwards;
}


.shad-wh:after {
  content: "";
  position: absolute; z-index:10;
  right: 0;
  bottom: 0;       /* 最下部起点にする */
  width: 100%;
  height: 0;       /* 初期は高さ0 */
  background-color: #ffffff;
  overflow: hidden;
  transform: translateY(0); /* 初期は位置移動なし */
}

/* 1回目: 最下部起点で高さ0から100%へ伸びる */
@keyframes secondaryImageOverlayIn {
  0% {
    height: 0;
    transform: translateY(0);
  }
  100% {
    height: 100%;
    transform: translateY(0);
  }
}

/* 2回目: 高さ100%の状態から上にスライドして消える */
@keyframes secondaryImageOverlayOut {
  0% {
    height: 100%;
    transform: translateY(0);
  }
  100% {
    height: 100%;          /* 高さはそのまま */
    transform: translateY(-102%);
  }
}

@keyframes move-stripe {0% { background-position-x: 0;} 100% {  background-position-x: -34px; }}

.shad01 .c-top-subpage { opacity: 0;}

.shad01.animate .index-top {animation: fadeIn 1.1s 1.2s; animation-fill-mode: both; }
.shad01.animate .c-top-subpage {animation: fadeIn 1.1s 1.2s; animation-fill-mode: both; }
.shad02.animate .shad-img02 {animation: fadeIn 1.1s 1.2s; animation-fill-mode: both; }
.shad03.animate .shad-img03 {animation: fadeIn 1.1s 1.2s; animation-fill-mode: both; }
.shad04.animate .shad-img04 {animation: fadeIn 1.1s 1.2s; animation-fill-mode: both; }
.shad05.animate .c-img {animation: fadeIn 1.1s 1.2s; animation-fill-mode: both; }
.shad06.animate shad04in {animation: fadeIn 1.1s 1.2s; animation-fill-mode: both; }


.index-top {overflow: hidden; position: relative;}


.index-top {
  opacity: 0; 
  animation-name: fadeInAnimation-top;
  animation-duration: 4.5s;
  animation-delay: 4.5s;
  animation-fill-mode: forwards; /* アニメーション後に状態を保持 */
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.index-top::before {content: ""; position: absolute; left: 0; top: 180px; width: calc(100% - 90px); height: 100%; z-index: 1; background: linear-gradient(135deg, #dddddd, #999999);
background-size: 300% 300%;
animation: smoothShift 8s ease-in-out infinite;}
@media screen and (max-width: 700px) {.index-top::before {width: calc(100% - 34px); height: 100%; top: 134px;}}

@keyframes smoothShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.index-top-img {width: calc(100% - 90px); position: relative; z-index: 1; margin: 0 0 0 90px; padding: 0 0 120px 0; height: 100vh;}
@media screen and (max-width: 700px) {.index-top-img {width: calc(100% - 34px); margin: 0 0 40px 34px; padding: 0 0 0 0; height: 80vh;}}

.index-top-img video{width: 100%;
  height: 100vh;
  object-fit: cover; /* 画面いっぱいに動画をフィットさせる */}
@media screen and (max-width: 700px) {.index-top-img video {height: 80vh;}}

.index-top-title {color: #ffffff; line-height: 1.6;
  position: absolute;
 left: 12%; width: 80%;
 top: 30%;
}


.c-top-subpage {margin: 0 0 0; padding: 0 0 40px; position: relative; min-height: 400px;}
@media screen and (min-width: 701px) and (max-width: 1099px) {.c-top-subpage {padding: 0 0 22px; min-height: 280px;}}
@media screen and (max-width: 700px) {.c-top-subpage {padding: 0 0 22px; min-height: 280px;}}
.c-top-subpage::before {content: ""; position: absolute; left: 0; top: 180px; width: calc(100% - 90px); height: 100%; z-index: 1; background: linear-gradient(135deg, #dddddd, #999999);
background-size: 300% 300%;
animation: smoothShift 8s ease-in-out infinite;}
@keyframes smoothShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media screen and (min-width: 701px) and (max-width: 1099px) {.c-top-subpage::before {width: calc(100% - 90px); top: 120px;}}
.c-top-subpage-img {width: calc(100% - 90px);
  position: relative; z-index: 1; margin: 0 0 0 90px;}}
@media screen and (max-width: 700px) {.c-top-subpage::before {width: calc(100% - 24px); top: 170px;}}
.c-top-subpage-img {width: calc(100% - 90px);
  position: relative; z-index: 1; margin: 0 0 0 90px;
}
@media screen and (min-width: 701px) and (max-width: 1099px) {.c-top-subpage-img {width: calc(100% - 60px); margin: 0 0 0 60px;}}
@media screen and (max-width: 700px) {.c-top-subpage-img {width: calc(100% - 24px); margin: 0 0 0 24px;}}
.c-top-subpage-title {color: #ffffff; text-shadow:0 0 6px #000; line-height: 1.6; font-weight: 600;
  position: absolute;
 left: 14%; width: 80%;
 top: 38%;
}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {.c-top-subpage-title  {font-size: 87%;}}
@media screen and (max-width: 700px) {.c-top-subpage-title {font-size: 77%; left: 16%; top: 40%;}}
.c-top-subpage-title-en {font-size: 400%; letter-spacing: 0.07em; position: relative; z-index: 8; animation-name: c-top-subpage-title-ena;animation-duration: 2.7s;}
@keyframes c-top-subpage-title-ena {
0% {opacity: 0; transform: translateX(-40px);}
72% {opacity: 0; transform: translateX(-40px);}
100% {opacity: 1; transform: translateX(0);}
}
.c-top-subpage-title-jp {font-size: 180%; letter-spacing: 0.12em; position: relative; z-index: 8; animation-name: c-top-subpage-title-ena;animation-duration: 3.0s; margin:0 0 0 10px;}
@keyframes c-top-subpage-title-jpa {
0% {opacity: 0; transform: translateX(-40px);}
72% {opacity: 0; transform: translateX(-40px);}
100% {opacity: 1; transform: translateX(0);}
}
.c-top-subpage-title-jp::before {
  content: "";
  display: inline-block;
  width: 30px;  /* 横線の長さ */
  height: 2px;   /* 横線の高さ */
  background-color: #ffffff; /* 横線の色 */
  margin-right: 10px;  /* テキストとの間隔 */
  vertical-align: middle; /* テキストと横線を縦に揃える */
}
@media screen and (max-width: 700px) {.c-top-subpage-title-jp::before {width: 22px; margin-right: 10px;}}

.scroll_down {z-index: 5; left: 0; top: 0; line-height: 1.2;
  position: absolute;
  width: 100px;
  height: 100vh;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 700px) {.scroll_down {width: 30px; height: 80vh;}}

.scroll_down {animation-name: scroll_downa;animation-duration: 6.1s;}
@keyframes scroll_downa {
0% {opacity: 0;}
72% {opacity: 0;}
100% {opacity: 1;}
}

.scroll_down:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80%;
  background: linear-gradient(180deg,rgba(#000, 0) 0, rgba(#000, .8) 80%, rgba(#000, .8) 100%);
  }

.scroll_down a {
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 13px;
  padding: 10px 10px 110px;
  color: #000;
  font-size: 90%;
  font-family: 'Josefin Sans', sans-serif;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
  transition: .2s;
  overflow: hidden;
  margin: auto;
}

@media screen and (max-width: 700px) {.scroll_down a { font-size: 80%;}}

.scroll_down a:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 2px;
  height: 100px;
  background: #ddd;
}

.scroll_down a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 2px;
  height: 100px;
  background: #000;
}

.scroll_down a:hover {
  opacity: .5;
}

#type01 a:after {
  animation: sdl01 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes sdl01 {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

.haguruma {position: absolute; z-index: 2;
    animation-name: clsa03;
    animation-duration: 3.0s;
}
@media print, screen and (min-width: 1100px) {.haguruma {bottom: 120px; right: 3%; width: 25%;}}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {.haguruma {bottom: 120px; right: -10%; width: 30%;}}
@media only screen and (max-width: 700px) {.haguruma {top: 50px; right: -7%; width: 23%;}}
@keyframes clsa03 {
0% {
    opacity: 0; transform:rotate(0);
}
50% {
    opacity: 0; transform:rotate(120deg);
}
75% {
    opacity: 0; transform:rotate(240deg);
}
100% {
    opacity: 1; transform:rotate(360deg);
}
}

.haguruma-in {animation:110s linear infinite rotation;}
@keyframes rotation{
0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

.haguruma-in img{opacity: 0.2;}

.pro-cat {font-size: 100%; text-align: left; margin: 0 62px 10px;width: calc(100% - 62px); letter-spacing: 0.1em;}
.pro-number {color: #b9b9b9; font-size: 200%; line-height: 1.1; width: 62px; margin: 0 0 5px; padding: 0;}
.pro-box {width: calc(100% - 62px);}

.pro-cat-fac {font-size: 120%; text-align: left; margin: 0 0 0 50px; letter-spacing: 0.15em;}
.pro-number-fac {color: #b9b9b9; fcolor: #b9b9b9; font-size: 100%; line-height: 1.1; width: 50px; margin: 0 0 5px; padding: 0; -ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
text-orientation: sideways;
text-align: left; /* 左寄せで表示される */ padding: 0;}
.pro-box-fac {width: calc(100% - 50px);}
.pro-box-layer {padding: 0 0 30px; position: relative;}
.pro-box-layer-img {position: relative; z-index: 1;}
.pro-cat-ab {position: absolute; z-index: 2; bottom: 15px; right: 12px; font-size: 170%; line-height: 1.2; text-align: right; letter-spacing: 0.05em;}


.wide-outline01 {width: 100%; max-width: 1368px; overflow: hidden;}
.wide-outline02 {width: 100%; max-width: 1323px; overflow: hidden;}
.wide-normal-nogap {width: 100%; max-width: 1152px; overflow: hidden;}
.wide-normal {width: 84%; max-width: 1152px; overflow: hidden;}
.wide-narrow01 {width: 84%; max-width: 1024px; overflow: hidden;}
.wide-narrow02 {width: 84%; max-width: 960px; overflow: hidden;}
.wide-narrow03 {width: 84%; max-width: 768px; overflow: hidden;}
.wide-narrow04 {width: 84%; max-width: 640px; overflow: hidden;}
.wide-narrow05 {width: 100%; margin: 0 auto;}
@media print, screen and (max-width: 700px) {.wide-narrow05 {width: 84%;}}

.mgauto {margin: 0 auto;}

.mgauto-btm-high {margin: 0 auto 180px;}
@media print, screen and (max-width: 700px) {.mgauto-btm-high {margin: 0 auto 80px;}}

.mgauto-up-high {margin: 150px auto 0;}
@media print, screen and (max-width: 700px) {.mgauto-up-high {margin: 80px auto 0;}}

.mgauto-ub-low {margin: 50px auto;}
@media print, screen and (max-width: 700px) {.mgauto-ub-low {margin: 50px auto;}}

.mgauto-ub-high {margin: 150px auto;}
@media print, screen and (max-width: 700px) {.mgauto-ub-high {margin: 80px auto;}}

.ml-normal {margin-left:10%!important;}
@media print, screen and (max-width: 700px) {.ml-normal {margin-left:10%!important;}}

.mr-normal {margin-right:10%!important;}
@media print, screen and (max-width: 700px) {.mr-normal {margin-right:10%!important;}}

.height01 {min-height: 800px;}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {.height01 {min-height: 600px}}
@media print, screen and (max-width: 700px) {.height01 {min-height: 400px}}

.height02 {min-height: 800px;}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {.height02 {min-height: 600px}}
@media print, screen and (max-width: 700px) {.height02 {min-height: 400px}}

.wide00 {max-width: 1600px; width: 100%;}
@media print, screen and (min-width: 1100px) {.wide00 {margin: 100px auto;}}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {.wide00 {margin: 100px auto;}}
@media print, screen and (max-width: 700px) {.wide00 {margin: 60px auto;}}

.wide01 {max-width: 1323px;}
@media print, screen and (min-width: 1100px) {.wide01 {margin: 0 auto 200px; width: 100%;}}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {.wide01 {margin: 200px auto; width: 90%;}}
@media print, screen and (max-width: 700px) {.wide01 {margin: 100px auto; width: 90%;}}

.wide02 {width: 90%; max-width: 960px; margin: 0 auto 0px; text-align: left; overflow: hidden;}
@media print, screen and (max-width: 700px) {.wide02 {width: 90%; margin: 0 auto 0px;}}

.wide02-index {width: 90%; max-width: 960px; margin: 0 auto 0px; text-align: left; overflow: hidden;}
@media print, screen and (max-width: 700px) {.wide02-index {width: 80%; margin: 0 13% 0px 7%;}}

.wide02-insta {width: 90%; max-width: 680px; margin: 80px auto; text-align: left; overflow: hidden;}
@media print, screen and (max-width: 700px) {.wide02-insta {width: 90%; margin: 50px auto;}}

.wide03 {width: 90%; max-width: 1152px; margin: 100px auto 180px; padding: 0 0 0 10%; text-align: left;}
@media print, screen and (max-width: 700px) {.wide03 {width: 100%; margin: 40px auto 80px; padding: 0;}}

.wide04 {width: 86%; max-width: 960px; margin: 250px auto 30px; padding: 0; text-align: left; position: relative; z-index: 2;}
@media print, screen and (max-width: 700px) {.wide04 {width: 90%; margin: 80px auto 30px; padding: 0;}}
.wide04-tn {width: 86%; max-width: 960px; margin: 50px auto 0; padding: 0; text-align: left; position: relative; z-index: 2;}
@media print, screen and (max-width: 700px) {.wide04-tn {width: 90%; margin: 50px auto 0; padding: 0;}}


.wide04-zi {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 86%;
  max-width: 960px;
  margin: 0;
  padding: 0;
  text-align: left;
  z-index: 2;
}
@media print, screen and (max-width: 700px) {.wide04-zi {width: 90%; margin: 50px auto 0; padding: 0;}}

.wide05 {max-width: 1600px; width: 100%;}
@media print, screen and (min-width: 1100px) {.wide01 {margin: 200px auto;}}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {.wide01 {margin: 200px auto;}}
@media print, screen and (max-width: 700px) {.wide01 {margin: 100px auto;}}

.wide06 {width: 90%; max-width: 1024px; margin: 0 auto 180px; padding: 0; text-align: left;}
@media print, screen and (max-width: 700px) {.wide06 {width: 90%; margin: 0 auto 80px; padding: 0;}}

.wide07 {width: 90%; max-width: 768px; margin: 0 auto 180px; padding: 0; text-align: left;}
@media print, screen and (max-width: 700px) {.wide07 {width: 90%; margin: 0 auto 80px; padding: 0;}}

.wide08 {width: 90%; max-width: 640px; margin: 0 auto 180px; padding: 0; text-align: left;}
@media print, screen and (max-width: 700px) {.wide08 {width: 90%; margin: 0 auto 80px; padding: 0;}}

.wide09 {width: 90%; max-width: 640px; margin: 0 auto 180px; padding: 0; text-align: left;}
@media print, screen and (max-width: 700px) {.wide09 {width: 90%; margin: 0 auto 80px; padding: 0;}}

.wide10 {width: 90%; max-width: 1152px; margin: 0 auto 180px; padding: 0 0 0 0; text-align: left;}
@media print, screen and (max-width: 700px) {.wide10 {width: 90%; margin: 0 auto 80px; padding: 0;}}

.wide11 {width: 90%; max-width: 1152px; margin: 50px auto; padding: 0; text-align: left;}
@media print, screen and (max-width: 700px) {.wide11 {width: 90%; margin: 50px auto; padding: 0;}}

.wide12 {width: 90%; max-width: 1152px; margin: 180px auto; padding: 0 ; text-align: left;}
@media print, screen and (max-width: 700px) {.wide12 {width: 90%; margin: 80px auto; padding: 0;}}

.wide14 {max-width: 1323px; width: 100%; overflow: hidden;}
@media print, screen and (min-width: 1100px) {.wide14 {margin: 50px auto;}}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {.wide14 {margin: 50px auto;}}
@media print, screen and (max-width: 700px) {.wide14 {margin: 50px auto;}}

@media print, screen and (min-width: 701px) {.flex-reverse-md {flex-direction: row-reverse;}}
@media print, screen and (max-width: 700px) {.flex-reverse-md {flex-direction: row;}}

.flex {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.flex-ait {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; padding: 0 14px 8px; margin: 0 0 8px 0; border-bottom: 1px solid #dddddd; font-size:90%;}

.flex-company {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; padding: 0 14px 16px; margin: 0 0 16px 0; border-bottom: 1px solid #dddddd; font-size:90%;}

.flex01 {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; align-items: start;}
@media print, screen and (max-width: 1000px) {.flex01 {justify-content: center;}}
@media print, screen and (min-width: 1001px) {.flex0101 {width: 27%; margin: 0;}}
@media print, screen and (max-width: 1000px) {.flex0101 {width: 100%; margin: 0 0 30px; 0}}
.flex0102 {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start;}
@media print, screen and (min-width: 1001px) {.flex0102 {width: 67%; margin: 4% 0 0 0;}}
@media print, screen and (max-width: 1000px) {.flex0102 {width: 100%; margin: 4% 0 30px;}}

@media print, screen and (min-width: 1001px) {.flex010201 {width: 70%; margin: 80px 0 0 0;}}
@media print, screen and (max-width: 1000px) {.flex010201 {width: 90%; margin: 0 auto 0;}}
.flex010202 {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start;}
@media print, screen and (min-width: 1001px) {.flex010202 {width: 25%; margin: 0;}}
@media print, screen and (max-width: 1000px) {.flex010202 {width: 100%; margin: 0;}}

@media print, screen and (min-width: 1001px) {.flex01020201 {width: 90%; margin: 30% 0 8% 8%;}}
@media print, screen and (max-width: 1000px) {.flex01020201 {width: 60%; margin: 0;}}
@media print, screen and (min-width: 1001px) {.flex01020202 {width: 100%; margin: 0;}}
@media print, screen and (max-width: 1000px) {.flex01020202 {width: 37%; margin: 0;}}

.fr01 {width: 130px; float: right;}
@media print, screen and (max-width: 700px) {.fr01 {width: 90px; float: right;}}
.fr02 {width: 130px; float: right; margin: 0 10% 0 0;}
@media print, screen and (max-width: 700px) {.fr02 {margin: 0 0 0;}}


@media print, screen and (min-width: 701px) {.flex0201 {width: 46%; display: block;}}
@media print, screen and (max-width: 700px) {.flex0201 {width: 100%; margin: 0; display: none;}}
@media print, screen and (min-width: 701px) {.flex0202 {width: 46%;}}
@media print, screen and (max-width: 700px) {.flex0202 {width: 100%; margin: 0;}}


.flex03 {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start;}
@media print, screen and (min-width: 701px) {.flex0301 {width: 100px;}}
@media print, screen and (max-width: 700px) {.flex0301 {width: 90px;}}
@media print, screen and (min-width: 701px) {.flex0302 {width: calc(100% - 150px);}}
@media print, screen and (max-width: 700px) {.flex0302 {width: calc(100% - 100px);}}

.flex04 {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; margin: 0 0 100px;}
@media print, screen and (max-width: 700px) {.flex04 {margin: 0 0 50px;}}
@media print, screen and (min-width: 701px) {.flex0401 {width: 380px; margin: 0;}}
@media print, screen and (max-width: 700px) {.flex0401 {width: 100%; margin: 0 0 30px;}}
@media print, screen and (min-width: 701px) {.flex0402 {width: calc(100% - 450px);}}
@media print, screen and (max-width: 700px) {.flex0402 {width: 100%;}}

.flex05 {display: flex; align-items:stretch; padding: 0 0 70px; position: relative;}
@media print, screen and (max-width: 920px) {.flex05 {padding: 0 0 100px;}}
.flex05bd::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 25%;
    transform: translateX(-50%);
    width: 1px;
    height: 100%;
    background: #727171;
}
@media print, screen and (max-width: 920px) {.flex05bd::before {display: none;}}

.flex0501{position: relative;}
@media print, screen and (min-width: 921px) {.flex0501 {width: 38%; padding: 8% 6% 2%; z-index: 1;}}
@media print, screen and (max-width: 920px) {.flex0501 {width: 76%; padding: 12% 12%;}}
@media print, screen and (min-width: 921px) {.flex0502 {width: 50%;}}
@media print, screen and (max-width: 920px) {.flex0502 {width: 100%;}}

ul.flow {display: flex; flex-wrap: wrap; gap: 20px 2%; list-style-type:none; padding: 0; margin: 0;}
ul.flow li {display: flex; justify-content: space-between; align-items: center; border: 1px solid #666666; box-sizing: border-box; background-color: #333333; text-align:center;}
@media print, screen and (min-width: 1100px) {ul.flow li {width: calc(98% / 2); margin: 0; padding: 30px; }}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {ul.flow li {width: calc(98% / 2); margin: 0;  padding: 30px;}}
@media print, screen and (max-width: 700px) {ul.flow li {width: 100%; margin: 0;  padding: 20px 10px; }}

.flow-num {width: 70px;}
.flow-txt {width: calc(100% - 90px); text-align:left;}

.ar01 {
  position: absolute;
  left: 25%;
  top: 0;
  width: 1px;
  height: 50px;
  background: #727171;
  transform: translateX(-50%);
  z-index: 2;
}

.ar01::before,
.ar01::after {
  content: "";
  position: absolute;
  left: 25%;
  top: 50px;
  width: 22px;   /* 斜め線の長さ */
  height: 1px;
  background: #727171;
  transform-origin: left center;
}

.ar01::before {
  /* 左下方向に45度 */
  transform: translateX(-0%) rotate(240deg);
}

.ar01::after {
  /* 右下方向に45度 */
  transform: translateX(-0%) rotate(300deg);
}

.ar02 {position: absolute;
  left: 25%;
  width: 1px; /* 線の太さ */
  background: #727171; /* 線の色 */
  transform: translateX(-50%);
  z-index: 2;
  bottom: 70px;
  height: 70px;
}

.ar03 {
  position: absolute;
  left: 50%;
  bottom: 50px;
  width: 1px;
  height: 120px;
  background: #727171;
  transform: translateX(-50%);
  z-index: 10;
}
.ar03::before,
.ar03::after {display: block;
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px;
  width: 22px;   /* 斜め線の長さ */
  height: 1px;
  background: #727171;
  transform-origin: left center;
}
.ar03::before {
  /* 左下方向に45度 */
  transform: translateX(-0%) rotate(240deg);
}
.ar03::after {
  /* 右下方向に45度 */
  transform: translateX(-0%) rotate(300deg);
}

.ar04 {
  position: relative; margin: 10px auto 40px;
  width: 1px;
  height: 170px;
  background: #727171;
  transform: translateX(-50%);
  z-index: 10;
}
@media screen and (min-width: 1020px) and (max-width: 1280px) {.ar04 {height: 110px;}}
@media screen and (min-width: 921px) and (max-width: 1019px) {.ar04 {height: 70px;}}
@media print, screen and (max-width: 920px) {.ar04 {height: 50px;}}
.ar04::before,
.ar04::after {display: block;
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px;
  width: 22px;   /* 斜め線の長さ */
  height: 1px;
  background: #727171;
  transform-origin: left center;
}
.ar04::before {
  /* 左下方向に45度 */
  transform: translateX(-0%) rotate(240deg);
}
.ar04::after {
  /* 右下方向に45度 */
  transform: translateX(-0%) rotate(300deg);
}

.flex050102 {position: absolute; bottom: 7%; right: 7%; width: 130px; margin: 0;}
@media print, screen and (max-width: 700px) {.flex050102 {position: relative; width: 110px; float: right; margin: 60px 0 0 0;}}

.flex06 {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start;}
.flex0601 {width: 30%;}
@media print, screen and (max-width: 700px) {.flex0601 {width: 100%; margin: 0 auto 50px;}}
.flex0601 p{width: 100%; margin: 0 auto 20px;}
@media print, screen and (max-width: 700px) {.flex0601 p{width: 50%; margin: 0 auto 20px;}}

.flex07 {display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px 5%;
  align-items: flex-start; /* align-items: start; は無効。flex-startを使う */}
.flex0701 {width: 47.5%;}
@media print, screen and (max-width: 700px) {.flex0701 {width: 100%;}}

.flex08 {margin: 0 0 150px;}
@media print, screen and (max-width: 700px) {.flex08 {margin: 0 0 80px;}}
.flex0801 {width:260px; margin: 0;}
@media print, screen and (max-width: 700px) {.flex0801 {width: 60%; margin: 0 auto 30px;}}
.flex0802 {width:calc(100% - 360px); margin: 0;}
@media print, screen and (max-width: 700px) {.flex0802 {width: 100%; margin: 0 auto 30px;}}

.flex0901 {width:47%; margin: 0;}
@media print, screen and (max-width: 700px) {.flex0901 {width: 84%; margin: 0 0 80px;}}
.flex0902 {width:47%; margin: 0;}
@media print, screen and (max-width: 700px) {.flex0902 {width: 84%; margin: 0 auto;}}
.flex090201 {width:80%; margin: 0 auto;}
@media print, screen and (max-width: 700px) {.flex090201 {width: 100%; margin: 0 0 80px;}}
.flex0901r {width:47%; margin: 0;}
@media print, screen and (max-width: 700px) {.flex0901r {width: 72%; margin: 0 0 80px 28%;}}

.flex1001 {width:47%; margin: 0;}
@media print, screen and (max-width: 700px) {.flex1001 {width: 76%; margin: 0 0 80px 24%;}}
.flex1002 {width:42%; margin: 28% 0 0 0;}
@media print, screen and (max-width: 700px) {.flex1002 {width: 68%; margin: 0 0 0;}}

.flex1101 {width:60%; margin: 0;}
@media print, screen and (max-width: 700px) {.flex1101 {width: 100%; margin: 0 0 30px;}}
.flex1102 {width:35%; margin: 0;}
@media print, screen and (max-width: 700px) {.flex1102 {width: 100%; margin: 0;}}

.flex1201 {width:70px; margin: 0; text-align: left; color: #999999;}
.flex1202 {width:calc(100% - 80px); text-align: left!important;}

.flex1301 {width:110px; margin: 0; text-align: left; color: #999999;}
.flex1302 {width:calc(100% - 120px); text-align: left!important;}

.flex1401 {width:180px; margin: 0;}
@media print, screen and (max-width: 700px) {.flex1401 {width: 160px; margin: 0 0 20px;}}
.flex1402 {width:calc(100% - 240px); text-align: left!important;}
@media print, screen and (max-width: 700px) {.flex1402 {width: 100%; margin: 0;}}

.block01 {width:60%; margin: 0 30% 100px 0%;}
@media print, screen and (max-width: 700px) {.block01 {width: 70%; margin: 0 0 80px;}}

.block02 {width:55%; margin: 0 0 100px 45%;}
@media print, screen and (max-width: 700px) {.block02 {width: 65%; margin: 0 0 80px 35%;}}

.block03 {width:100%; margin: 0 auto 100px;}
@media print, screen and (max-width: 700px) {.block03 {width:100%; margin: 0 auto 80px;}}

.block04 {margin: 0 0 40px 0; padding: 0 0 0 36px; position: relative;}
.block04:before {content:"A."; position: absolute; left: 17px; top: 1px;}

.block05 {margin: 0 0 10px 0;}

.block06 {border-bottom:1px solid #898989; margin: 0 0 70px;}
@media print, screen and (max-width: 700px) {.block06 {margin: 0 0 50px; padding: 0 0 50px;}}

ul.contactform {list-style-type: none; margin: 0; padding: 0;}
ul.contactform li{border-bottom: none; padding: 2%; position: relative;}
ul.contactform li:not(:last-child) { margin: 0 0 30px 0; }

.flex-from {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; font-weight: 700;margin: 0 0 10px 0;}

.ex-name {min-width: 100px; font-size: 60%; color: #999999; font-weight: 400; text-align: right;}

.hissu {width: 60px; letter-spacing: 0.2em; margin: 0 0 10px;
text-align: center;
line-height: 1.1;
color: #fff;
border-radius: 3px;
background-color: #999999;
padding: 6px 17px 4px;
font-size: 60%;
}
.nini {
width: 60px; letter-spacing: 0.2em; margin: 0 0 10px;
text-align: center;
line-height: 1.1;
color: #fff;
border-radius: 3px;
background: #b3b3b3;
padding: 6px 17px 4px;
font-size: 60%;
}

.form {text-align:left; width: 100%;}

/* フォーム本体を100%に */
.wpcf7,
.wpcf7-form {
  width: 100% !important;
}

/* ラッパーとラベルを100%に */
.wpcf7-form .wpcf7-form-control-wrap,
.wpcf7-form label {
  display: block;
  width: 100% !important;
}

/* テキスト入力を100%に */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100% !important;
  box-sizing: border-box;
}
/* Contact Form 7 の送信ボタンにスタイルを適用 */
.wpcf7-submit {font-size: 150%; letter-spacing: 0.2em;
    margin: 0 auto;
    border-radius: 3px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    position: relative;
    width: 296px !important;
    height: 66px;
    color: #ffffff !important;
    background: #666666 !important;
    border: 2px solid #666666 !important;
    cursor: pointer; /* ボタンにカーソルを追加 */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* ホバー時のアニメーション */
}

/* ホバー時のスタイル */
.wpcf7-submit:hover {
    background: #999888888999 !important;
    border-color: #666666 !important;
}


.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form select,
.form textarea {box-sizing: border-box;
width: 100%!important;
min-height:  48px;
background: #ffffff;
border-radius: 5px; border: 1px solid #eeeeee;
font-size: 14px;
padding: 5px;
cursor: pointer;
}

.form select {
width: 35%;
}
.form textarea {
min-height: 80px;
vertical-align: bottom;
}
.form label {
display: inline-block;
line-height: 1.1;
padding: 10px 10px 10px 0;
cursor: pointer;
}
.form .btn {
text-align: center;
padding: 40px 0 0;
}
.form .btn button {
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
border: none;
width: 100%;
}
.form .btn button:hover {
opacity: 0.7;
}
.form .btn input[type="image"],
.form .btn img {
width: 100%;
max-width: 420px;
}
.form .btn input[type="image"]:hover,
.form .btn img:hover {
opacity: 0.7;
}
.form_msg {
text-align: center;
padding: 10px;
}
.form_msg.err {
color: #BB0003;
font-size: 130%;
}
.backbtn {
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
text-decoration: underline;
color: #20B4ED;
}
	@media screen and (max-width: 768px){
	.form input[type="text"] {
	width: 100%;
	}
	.form .age input[type="text"] {
	width: 100%;
	}
	.form select {
	width: 100%;
	}
	.form .btn {
	padding: 10px 0;
	}
	.form_msg.err {
	font-size: 100%;
	}
	}
.sndbtn {margin: 0 auto; border-radius: 40px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; font-weight: 700; 
    position: relative;
    width: 296px!important;
    height: 66px;
     color: var(--c-fc-sixth)!important;
    background: var(--c-bg-third)!important;
    border: 2px solid var(--c-bg-first)!important;
}

.sndbtn2 {margin: 0 auto; border-radius: 40px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;  font-weight: 700; 
    border: 0px;
    width: 296px!important;
    height: 66px;
    color: var(--c-fc-first)!important;
    background: var(--c-bg-fifth)!important;
    border: 2px solid var(--c-bg-first)!important;
}

.sr-privacy {font-size: 80%; border:1px solid #eeeeee; border-radius:2px;
  overflow: scroll; background-color: #ffffff;
  height: 300px; padding: 20px 10px;
}

ul.list-privacy {margin: 0 0 0 20px; padding: 0;}
ul.list-privacy li{margin: 0; padding: 0;}

.swiper-container {
  position: relative;
  width: 100%;
}
.custom-pagination {width: 94%; right: 16px;
  position: relative;
  z-index: 10;
  top: 0;
  left: 0;
  display: flex;
  gap: 6px;
}
@media print, screen and (max-width: 700px) {.custom-pagination {gap: 6px;}}

.custom-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 1;
  cursor: pointer;
  transition: opacity 0.2s;
  border: 1px solid transparent;
}
@media print, screen and (max-width: 700px) {.custom-dot { width: 14px; height: 14px;}}

.custom-dot.active {
  opacity: 1;
  border: 1px solid #333;
}
.ver-wide02 .swiper-pagination2,
.ver-wide03 .swiper-pagination3,
.ver-wide04 .swiper-pagination4,
.ver-wide05 .swiper-pagination5,
.ver-wide06 .swiper-pagination6,
.ver-wide07 .swiper-pagination7,
.ver-wide08 .swiper-pagination8,
.ver-wide09 .swiper-pagination9,
.ver-wide10 .swiper-pagination10 {
  bottom: 20px;
  right: 0;
  left: 0;
  width: 100%;
  position: absolute;
  text-align: center;
  z-index: 10;
}

.ver-wide02 .swiper-slide img,
.ver-wide03 .swiper-slide img,
.ver-wide04 .swiper-slide img,
.ver-wide05 .swiper-slide img,
.ver-wide06 .swiper-slide img,
.ver-wide07 .swiper-slide img,
.ver-wide08 .swiper-slide img,
.ver-wide09 .swiper-slide img,
.ver-wide10 .swiper-slide img {
  width: 100%;
  display: block;
}

.iframe-content {
	position: relative;
	width: 100%;
	padding: 56.35% 0 0 0;
	margin: 0;
}
.iframe-content iframe {background-color: #ffffff!important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.iframe-content iframe::before {background-color: #ffffff;
    position: absolute; z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
}
.iframe-content-top {
	position: absolute; z-index: 10; top: 0;
	width: 100%;
	border-top: 5px solid #ffffff; border-left: 3px solid #ffffff;
}
.iframe-content-bottom {
	position: absolute; z-index: 10; bottom: 0;
	width: 100%;
	border-bottom: 3px solid #ffffff; border-right: 3px solid #ffffff;
}

.fw400 {font-weight: 400;}
.fw700 {font-weight: 700;}

.fs01 {font-size: 210%; font-weight: 700; letter-spacing: 0.18em; padding: 0; margin: 0;}
.fs02 {font-size: 140%; letter-spacing: 0.09em;}
.fs03 {font-size: 90%; padding: 11px 0 10px; margin: 0 0 10px; background-color:#e19d8d; color:#ffffff;  text-align:center; width:70px; line-height:1.1;}
.fs04 {font-size: 120%; margin: 0 0 10px; letter-spacing: 2px;}
.fs05 {font-size: 920%; font-weight: 500; margin: 0; padding: 0;color:#f4f4f4; position: absolute; z-index: 1; white-space: nowrap;}
.fs06 {font-size: 70%; color:#999999; font-weight:400;}
.fs07 {font-size: 280%; line-height: 1.3; letter-spacing: 0.05em;}
.fs08 {font-size: 90%;}
.fs09 {font-size: 160%; letter-spacing: 2px;}
.fs10 {font-size: 50%; color:#999999;}
.fs11 {font-size: 240%; line-height: 1.3; letter-spacing: 0.05em;}
.fs12 {font-size: 110%; letter-spacing: 0.1em;}
.fs13 {font-size: 90%; letter-spacing: 0.03em; color:#dddddd;}
.bg01 {background-color:#666666;}
.bg02 {
  position: relative;
}
.bg02::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 90%;
  height: 100%;
  background-color: #f9f9f9;
  z-index: -1;
}
.bg02-rv {position: relative;
}
.bg02-rv::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
width: var(--before-width, 90%); /* JavaScriptで設定したカスタムプロパティを使う */
  height: 100%;
  background-color: #eeeeee;
  z-index: -1;
}
.bg03-rv {
  position: relative;
}
.bg03-rv::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: var(--before-width, 45%); /* JavaScriptで設定したカスタムプロパティを使う */
  height: 100%;
  background-color: #eeeeee;
  z-index: -1;
  transition: width 0.2s ease-out; /* スムーズに変化させる */
}

#visualBlock4 {
    width: 100%;
    height: 700px;
    position: relative;
    overflow: hidden;
}

#visualVerticalImg {
    position: absolute;
    top: -900px;
}

/* 中画面サイズ (701px～1099px) */
@media screen and (min-width: 701px) and (max-width: 1099px) {
    #visualBlock4 {
        height: 750px;  /* 中画面サイズ時の高さ */
    }
}

/* 小画面サイズ (700px 以下) */
@media screen and (max-width: 700px) {
    #visualBlock4 {
        height: 1000px;  /* 小画面時の高さ */
    }
}
				
.bg04 {
  position: relative;
  min-height: 300px;
  overflow: hidden; /* はみ出し防止 */
}

/* パララックス用背景（.bg04内限定） */
.bg04::before {
  content: "";
  position: absolute;
  top: -20%;   /* 上に余白を持たせる（パララックスのため） */
  left: 0;
  width: 100%;
  height: 140%; /* 大きめサイズ（動かすため） */
  background-image: url(images/bg04.jpg);
  background-size: cover;
  background-position: center;
  transform: translateY(var(--p, 0));
  will-change: transform;
  z-index: -1;
}


.ofhd {overflow:hidden;}


.box01 {margin-bottom:10px;}
.box02 {margin-bottom:30px;}
.box03 {margin-bottom:50px;}
.box04 {margin-bottom:80px;}
.box05 {margin-bottom:100px;}
.box06 {margin-bottom:150px;}

.sidenav {width:25%; margin:0 0 100px 0; position:relative;
    height: auto; box-sizing: border-box;}
@media print, screen and (max-width: 1000px) {.sidenav {width:100%; margin:0;}}
.maincontents {width:75%;; margin:0 0 0 0;}
@media print, screen and (max-width: 1000px) {.maincontents {width:100%; margin:0 0 100px;}}

ul.sidemenu {list-style-type:none; padding:0; margin:0; position: relative; top: 0; display: block; width: 100%; max-height: 700px; 
    overflow-y: auto}
@media print, screen and (max-width: 1000px) {ul.sidemenu {display: flex; flex-wrap: wrap; gap: 0 2%; position: relative; margin:0 0 50px;}}
ul.sidemenu li{list-style-type:none; padding:0 0 0 40px; margin:0 0 34px; font-size:100%; line-height:1.36; border:nonet; width: 100%; box-sizing: border-box; position: relative;}
@media print, screen and (max-width: 1000px) {ul.sidemenu li{width: 49%; border:1px solid #999999; text-align:center; padding:10px 0; margin:0 0 10px;}}

ul.sidemenu li p {font-size:80%; color:#999999;}

ul.sidemenu li::after {
  content: '';
  position: absolute;
  left: 0px; /* liの右端からの距離 */
  top: 50%;
  transform: translateY(-50%) rotate(45deg); /* 45度回転させて矢印に */
  width: 8px; /* 矢印のサイズ（調整可能） */
  height: 8px;
  border-top: 1px solid #d8d8d8; /* 矢印の色と太さ */
  border-right: 1px solid #d8d8d8;
  /* border-left: 1px solid transparent; */ /* 下側は不要 */
  /* border-bottom: 1px solid transparent; */ /* 左側も不要 */
}

@media screen and (max-width: 1000px) {
ul.sidemenu li::after {transform: translateY(-50%) rotate(135deg); /* 45度回転させて矢印に */ left: 92%;}
}

.title-img {width: 300px; margin: 0 0 80px;}
@media print, screen and (max-width: 700px) {.title-img {width: 300px; margin: 0 0 30px;}}

.title-img01 {width: 40px; margin: 0 auto;}
.title-img02 {width: 90%; max-width: 400px; margin: 0 0 30px; margin-top: 0!important;}
@media print, screen and (max-width: 700px) {.title-img02 {width: 100%; margin: 0 0 30px;}}
.title-img03 {width: 100%; max-width: 630px; margin: 0 0 30px;}
.title-img04 {width: 200px; margin: 0 auto 50px;}
.title-img05 {width: 90%; max-width: 120px; margin: 0 auto 30px;}
@media print, screen and (max-width: 700px) {.title-img05 {width: 100%; margin: 0 auto 30px;}}

.title-img-cm {margin: 0 0 50px;}
@media print, screen and (max-width: 700px) {.title-img-cm {margin: 0 0 0 -24%;}}

.title-img05c {width: 374px; padding-left: 15px;}
@media screen and (min-width: 701px) and (max-width: 1300px) {.title-img05c {width: 384px; padding-left: 0; }}
@media print, screen and (max-width: 700px) {.title-img05c {width: 290px; padding-left: 0;}}

.title-img06 {width: 421px; padding-left: 15px;}
@media screen and (min-width: 701px) and (max-width: 1300px) {.title-img06 {width: 421px;margin: 0 0 50px;}}
@media print, screen and (max-width: 700px) {.title-img06 {width: 310px;}}

.title-img07 {width: 700px; padding-left: 15px; margin: 50px 0 50px;}
@media screen and (min-width: 701px) and (max-width: 1300px) {.title-img07 {width: 700px; margin: 50px 0 50px;}}
@media print, screen and (max-width: 700px) {.title-img07 {width: 310px; margin: 50px 0 50px -18%;}}

.title-img08 {width: 421px; margin: 0 0 50px;}
@media screen and (min-width: 701px) and (max-width: 1300px) {.title-img08 {width: 421px; margin: 0 0 50px;}}
@media print, screen and (max-width: 700px) {.title-img08 {width: 310px; margin: 0 0 50px;}}

.title-img09 {width: 194px; margin: 50px 0 50px;}
@media screen and (min-width: 701px) and (max-width: 1300px) {.title-img09 {width: 194px; margin: 50px 0 50px;}}
@media print, screen and (max-width: 700px) {.title-img09 {width: 150px; margin: 50px 0 50px -8%;}}

.title-img10 {width: 330px; padding-left: 15px; margin: 0 0 50px;}
@media screen and (min-width: 701px) and (max-width: 1300px) {.title-img10 {width: 330px; padding-left: 0; margin: 0 0 50px;}}
@media print, screen and (max-width: 700px) {.title-img10 {width: 260px; padding-left: 0; margin: 50px 0 50px -8%;}}

.title-img11 {width: 450px; margin: 50px 0 50px 8%;}
@media screen and (min-width: 701px) and (max-width: 1300px) {.title-img11 {width: 450px; margin: 50px 0 50px -1%;}}
@media print, screen and (max-width: 700px) {.title-img11 {width: 290px; margin: 50px 0 50px -1%;}}

.title-z01 {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; width: 660px;}
@media print, screen and (max-width: 700px) {.title-z01 {width: 90%;}}

.pr {position:relative;}
.pr-zi05 {position:relative; z-index:5;}
.bt01 {width:150px; margin: 0 auto 70px;}
@media print, screen and (max-width: 700px) {.bt01 {width:150px; margin: 0 auto;}}

/* 最初は非表示 + 下から上に移動する準備 */
.animate-up {
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* マスク用 ::after 擬似要素で画像を覆う */
.animate-up::after {opacity: 0.95;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #fff; /* ページ背景に合わせる */
  z-index: 2;
  transform: translateY(0);
}

/* アニメ開始 */
.animate-up.show {
  opacity: 1;
  transform: translateY(0);
}

/* マスクアニメーション */
.animate-up.show::after {
  animation: maskIn 0.9s cubic-bezier(0.77,0,0.175,1) forwards,
             maskOut 0.9s cubic-bezier(0.77,0,0.175,1) forwards 0.9s;
}

@keyframes maskIn {
  0% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

@keyframes maskOut {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

/* 画像フェードイン */
.animate-up img {
  opacity: 0;
  transition: opacity 0.3s ease 0.9s;
}
.animate-up.show img {
  opacity: 1;
}


/* B：パララックス用の transform レイヤー（干渉しない） */
.parallax-wrap img {
  transform: translateY(var(--para, 0px));
  transition: transform 0.05s linear; /* なめらかに動く */
}


/* 横に動かすテキスト */
.sc-hl {
  position: sticky;
  top: 0vh;
  white-space: nowrap;

  /* アニメーションとタイムラインを紐付け */
  animation-name: moveX;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: textMove; /* ←ココが重要 */
}

/* 横移動の変化量 */
@keyframes moveX {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(400px);
  }
}

.title-index-products{
position: absolute;
z-index: 1; top: 5%; left: -3%; line-height: 1.1;
}

					.wide-button {margin: 0 auto; max-width:370px;}
.button-01 {
  a {
    position: relative;
    display: block;
    width: 100%;
    height: 66px;
    font-size: 100%;
    text-decoration: none;
    background-color: transparent;
    color: #000000;
    transition: all 0.3s;

    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      background: #666666;
      transition: all 0.3s;
    }

    &::before {
      height: 24px;
      width: 2px;
    }

    &::after {
      width: 24px;
      height: 2px;
    }

    span {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;

      &::before,
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        background: #666666;
        transition: all 0.3s ease;
      }

      &::before {
        height: 24px;
        width: 2px;
      }

      &::after {
        width: 24px;
        height: 2px;
      }
    }

    &:hover {
      &::before {
        height: 100%;
      }

      &::after {
        width: 100%;
      }

      span {
        &::before {
          height: 100%;
        }

        &::after {
          width: 100%;
        }
      }
    }
  }
}


ul.item {margin: 0 0 50px; padding: 0; list-style-type:none; display: flex; flex-wrap: wrap; gap: 80px 3%;}
@media print, screen and (max-width: 1099px) {ul.item  {gap: 40px 5%;}}
ul.item li {margin: 0; padding: 0;;}
@media print, screen and (min-width: 1100px) {ul.item li {width: calc(90% / 3); margin: 0;}}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {ul.item li {width: calc(95% / 2); margin: 0;}}
@media print, screen and (max-width: 700px) {ul.item li {width: 100%; margin: 0 auto;}}

ul.item-fac {margin: 0 0 50px; padding: 0; list-style-type:none; display: flex; flex-wrap: wrap; gap: 80px 3%;}
@media print, screen and (max-width: 1099px) {ul.item-fac  {gap: 40px 5%;}}
ul.item-fac li {margin: 0; padding: 0;;}
@media print, screen and (min-width: 701px) {ul.item-fac li {width: calc(95% / 2); margin: 0;}}
@media print, screen and (max-width: 700px) {ul.item-fac li {width: 100%; margin: 0 auto;}}


/*ハンバーガーメニューボタン*/
.bt-spmenu {
  display : block;
  position: fixed;
  z-index : 100;
  right : 30px;
  top   : 14px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
.bt-spmenu span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #221714;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.bt-spmenu span:nth-child(1) {
  top: 10px;
}
.bt-spmenu span:nth-child(2) {
  top: 20px;
}
.bt-spmenu span:nth-child(3) {
  top: 30px;
}

/* スマホメニューを開いてる時のボタン */
.bt-spmenu.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  background :#221714;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.bt-spmenu.active span:nth-child(2),
.bt-spmenu.active span:nth-child(3) {
  top: 16px;
  background :#221714;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

/* メニュー背景　*/


nav.slidemenu {
  position: fixed;
  z-index : 90;
  top  : 0;
  right: 0;        /* ←右から出す場合 */
  left : auto;
  background: rgba(239,239,239,1);
  text-align: center;
  width: 220px;    /* ←ここを変更 */
  height: auto;   /* ←必要に応じて */
  transform: translateX(220px); /* ←幅と同じ値にする */
  transition: all 0.6s;
}

nav.slidemenu ul {text-align: left;
  margin: 0 auto;
  padding: 80px 40px 40px;
  width: 100%;
}

nav.slidemenu ul li {line-height: 2;
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}
nav.slidemenu ul li:last-child {
  padding-bottom: 0;
}
nav.slidemenu ul li:hover{
  background: rgba(239,239,239,1);
}

nav.slidemenu ul li a {
  display: block;
  color: #221714;
  padding: 1em 0;
  text-decoration :none;
}

/* クリックでjQueryで追加・削除 */
nav.slidemenu.active {
  opacity: 100;
  display: block;
  transform: translateX(0%);
}
/* サブメニューを最初は非表示に */
ul.aochild {padding: 0!important; margin: 0!important;
  display: none;
}
ul.aochild li{padding: 0 0 0 15px!important; margin: 0!important; line-height: 1.2;
}
/* トグル矢印のスタイル */
.toggle {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.toggle-label {
  display: block;
  position: relative;
}
.arrow {
  display: inline-block;
  position: absolute;
  right: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1px solid #221714;
  border-bottom: 1px solid #221714;
  transition: transform 0.3s;
  transform: translateY(-50%) rotate(45deg); /* 下向き */
}
.toggle.open .arrow {
  transform: translateY(-50%) rotate(-135deg); /* 上向き */
}

    .smooth-scroll-wrapper {
      position: fixed;
      top: 0; left: 0; width: 100vw; height: auto;
      will-change: transform;
      pointer-events: none;
    }
    .smooth-scroll-content {
      width: 100vw;
      min-height: auto;
      pointer-events: auto;
    }
.fadeup {
  opacity: 0;
  transform: translateY(60px) scale(0.97);
  transition:
    opacity 1.8s cubic-bezier(0.4,0,0.2,1),
    transform 1.8s cubic-bezier(0.4,0,0.2,1);
  will-change: opacity, transform;
}
.fadeup.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.fadeleft {
  opacity: 0;
  transform: translateX(-60px) scale(0.97);
  transition:
    opacity 1.8s cubic-bezier(0.4,0,0.2,1),
    transform 1.8s cubic-bezier(0.4,0,0.2,1);
  will-change: opacity, transform;
}
.fadeleft.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.faderight {
  opacity: 0;
  transform: translateX(60px) scale(0.97);
  transition:
    opacity 1.8s cubic-bezier(0.4,0,0.2,1),
    transform 1.8s cubic-bezier(0.4,0,0.2,1);
  will-change: opacity, transform;
}
.faderight.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.fadein {
  opacity: 0;
  transition: opacity 2.8s cubic-bezier(0.4,0,0.2,1);
  will-change: opacity;
}
.fadein.visible {
  opacity: 1;
}

.bt-wide {overflow:hidden; position:relative; height:100px; width: 300px; margin:0;}
.bt-wide01 {overflow:hidden; position:relative; height:50px;}
@media print, screen and (min-width: 1200px) {.bt-wide01 {width: 300px; margin:0;}}
@media print, screen and (max-width: 1199px) {.bt-wide01 {width: 90%; margin:0 auto;}}
.scrollbt{position:absolute;left:0%;top:0px; height:40px;}
@media print, screen and (min-width: 756px) {.scrollbt {width:250px;}}
@media print, screen and (max-width: 755px) {.scrollbt {width:150px;}}

/*Scrollテキストの描写*/
.scrollbt span{
  position: absolute;
  left:0px;
  top: 0px;
  color: #000;}

/* 線の描写 */
.scrollbt::after{
  content: "";
  position: absolute;
  top: 15px;
left: 50px;
  width: 100px;
  height: 1px;
  background: #000;
	/*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;}

/*高さ・位置・透過が変化して線が左から右に動く*/
@keyframes pathmove{
  0%{
	width:0;
	left:130px;
	opacity: 0;
  }
  30%{
	 width:120px;
left:130px;
	opacity: 1;
  }
  100%{
	 width:0;
	left:240px;
	opacity: 0;
  }}

.bt-contact {width: 200px; margin:60px auto 0; letter-spacing:0.05em}
@media print, screen and (max-width: 700px) {.bt-contact{width: 180px;}}

ul.lst01 {margin:0 0 0 60px; padding:0; list-style-type:disc; }

.form-thanks {min-height:500px;}


.scroll-element {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.scroll-element .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff; /* 背景色はページに合わせて調整 */
  transition: transform 1s ease-out;
  transform: translateX(0);
  z-index: 2;
}

.scroll-element.visible .overlay {
  transform: translateX(100%);
}


.fadein-animate span {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.7, 0, 0.9, 1); /* ←ここを調整 */
  display: inline-block;
}
.fadein-animate.visible span {
  opacity: 1;
}
[data-scroll-animation] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 2.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 2.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
[data-scroll-animation].visible {
  opacity: 1;
  transform: translateY(0);
}