@charset "UTF-8";
/*
Theme Name: miyama
Description: ミヤマ全織
Version: 1
Author: RAISE DESIGN
*/
html {
  scroll-behavior: smooth;
}

html body {font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;}
html,body {
  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 {
  font-size: 15px;
  line-height: 2.3;
  color: #3e3a39;overflow:scroll;
  }
nav.drawer-nav {
	z-index: 1000!important;
}
section {
  overflow-x: hidden;
}

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

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: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;}
.ff02 {font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;}

.fc01 {color: #595757;}
.fc02 {color: #b5b5b6;}

.lh12 {line-height:1.2;}
.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: 10px;
  line-height: 12px;
  }

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 {color:#231815;
    background-color: #efefef!important;
    z-index: 10!important;
    position: fixed;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0;
    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 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.03em; 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: center;
  max-width: 1080px;
  gap: 48px; /* ← 追加：li同士の隙間を均一に */
}

.gnav li {
  list-style-type: none;
  /* 幅指定を削除 */
  /* width: calc(100% / 6); ← これを削除 */
  line-height: 1.8;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  text-align: center;
  transition: all .3s ease-in-out;
  /* 必要ならmin-widthやpaddingを調整 */
}

.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;
}
 
.brb {height: 20px!important;
 border-right: 1px solid #231815;
}

.logo {position:absolute; top: 18px; left: 25px; width:70px;}
.logo-pc {width:110px!important; margin: -25px 40px 0 0; padding: 0;}

.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 {display:flex; justify-content: center; align-items: center; margin:5px 30px 0 40px; width:140px!important;}

.menu-rrt-pc {display:flex; justify-content: center; align-items: center; width:23px!important; margin:0 4px 0 0;}

.menu-ear-pc {display:flex; justify-content: center; align-items: center; width:140px!important; margin:-2px 10px 0 0;}

.menu-ear-pc p{display:flex; justify-content: center; align-items: center; width:18px!important; margin:-3px 10px 0 0;}


footer {background-color: #efefef; overflow: hidden; color: #231815;}
@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;}
@media print, screen and (min-width: 1100px) {
.cmname {width: 1100px; margin: 0 auto;}
}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {
.cmname {width: 90%; margin: 0 auto;}
}
@media print, screen and (max-width: 700px) {
.cmname {width: 90%; margin: 0 auto;}
}

.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}}

.wide01 {max-width: 1323px; 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;}}

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

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

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

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

.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;}

.flex01 {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
@media print, screen and (max-width: 700px) {.flex01 {justify-content: center;}}
@media print, screen and (min-width: 701px) {.flex0101 {width: 360px; margin: 0;}}
@media print, screen and (max-width: 700px) {.flex0101 {width: 76%; margin: 0 0 30px; 0}}
.flex0102 {display: flex;}
@media print, screen and (min-width: 701px) {.flex0102 {width: calc(100% - 690px);}}
@media print, screen and (max-width: 700px) {.flex0102 {width: 73%; margin: 10px auto 30px;}}

@media print, screen and (min-width: 701px) {.flex010201 {width: calc(100% - 10px);}}
@media print, screen and (max-width: 700px) {.flex010201 {width: 100%; margin: -20px 0 0 0;}}
@media print, screen and (min-width: 701px) {.flex010202 {width: 100px; margin: 0;}}
@media print, screen and (max-width: 700px) {.flex010202 {width: 100px; margin: 0 0 0 calc(100% - 120px);;}}

.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;}}

.flex0201 {
  position: relative;
}
@media print, screen and (min-width: 701px) {.flex0201 {width: 60%;}}
@media print, screen and (max-width: 700px) {.flex0201 {width: 90%; margin: 0 0 50px 10%;}}
@media print, screen and (min-width: 701px) {.flex0202 {width: 35%;}}
@media print, screen and (max-width: 700px) {.flex0202 {width: 77%; margin: 0 0 50px 23%;}}
@media print, screen and (min-width: 701px) {.flex0201b {width: 60%;}}
@media print, screen and (max-width: 700px) {.flex0201b {width: 90%; margin: 0 10% 50px 0;}}
@media print, screen and (min-width: 701px) {.flex0202b {width: 35%;}}
@media print, screen and (max-width: 700px) {.flex0202b {width: 77%; margin: 0 23% 50px 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%;}}

.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;}
.flex1202 {width:calc(100% - 80px); text-align: left!important;}

.flex1301 {width:40px; margin: 0;}
.flex1302 {width:calc(100% - 50px); text-align: left!important;}

.flex1401 {width:180px; margin: 0;}
@media print, screen and (max-width: 700px) {.flex1401 {width: 160px; margin: 0 0 50px;}}
.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;}}

.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;
}

/* 全てのスライダーのページネーションドット */
.swiper-pagination-bullet {
  background-color: #e09c8c;
}

/* 特定のスライダーだけ変えたい場合 */
.ver-wide01 .swiper-pagination-bullet {
  background-color: #e09c8c;
}
				
				
.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: 160%; font-weight: 700; margin: 10px 0 30px; letter-spacing: 10px;}
.fs02 {font-size: 120%;}
.fs02s {font-size: 120%;}
@media screen and (max-width: 700px) {.fs02s {font-size: 93%;}}
.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-weight: 700; margin: 0 0 10px; padding: 0 5px 5px; background:linear-gradient(transparent 60%, #efefef 60%);}
.fs06 {font-size: 70%;}
.fs07 {font-size: 90%;}
.fs08 {border-bottom: 1px solid #595757; color: #595757!important;}
.fs09 {font-size: 160%; letter-spacing: 2px;}

.bg01 {background-color:#f7f5f6;}
.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;}

.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: 170px; margin: 0 auto 70px;}
.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;}

.bt01 {width:150px; margin: 0 auto 70px;}
@media print, screen and (max-width: 700px) {.bt01 {width:150px; margin: 0 auto;}}
.bt01 input[type="image"]{width: 100%; height: auto;}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    background: #efefef;
    border: none;
    outline: 0;
    padding: 5px 10px; width: calc(100% - 20px);
    font-size: 120%;
}


.wpcf7 input[type=”text”]:focus
{
background: #efefef;
border: none;
outline: 0;
}

.bt01{
width: 200px;
margin: 0 auto;
}

ul.item {margin: 0 0 50px; padding: 0; list-style-type:none; display: flex; flex-wrap: wrap; gap: 80px 1%;}
@media print, screen and (max-width: 700px) {ul.item  {gap: 20px 1%;}}
ul.item li {margin: 0; padding: 0;}
@media print, screen and (min-width: 1100px) {ul.item li {width: calc(97% / 4); margin: 0;}}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {ul.item li {width: calc(98% / 3); margin: 0;}}
@media print, screen and (max-width: 700px) {ul.item 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-contact {width: 200px; margin:60px auto 0;}
@media print, screen and (max-width: 700px) {.bt-contact{width: 180px;}}

ul.lst01 {margin:0 0 0 21px; 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);
}

.adj-l01 {padding: 0 0 0 15px;}
@media  screen and (max-width: 700px) {.adj-l01 {padding: 0 0 0 12px;}}
.adj-l02 {padding: 0 0 0 21px;}
@media  screen and (max-width: 700px) {.adj-l02 {padding: 0 0 0 16px;}}
.adj-r01 {overflow: hidden;}
.adj-r01 {padding-right: 10px;}}
@media  screen and (max-width: 700px) {.adj-r01 {padding-right: 6px;}}
.adj-r02 {padding-right: -11px;}}
@media  screen and (max-width: 700px) {.adj-r02 {padding-right: -4px;}}

.adj-l03 {margin-left: 7px;}