@charset "UTF-8";
html body {font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;}
html,body {
  height: 100%;
  margin: 0;
  padding: 0;
	background-color: #efe8da;
	color: #3e3a39;
  text-align: center;font-size: 14px;
  line-height: 2.5; letter-spacing: 1px;
overflow:scroll;
  }
img {
	border: none;width: 100%;height: auto;
	vertical-align: top;
}
body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
nav.drawer-nav {
	z-index: 1000!important;
}

a {color: #000;text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}
a:active {text-decoration: none;}

p {margin: 0; padding: 0;}

/* マージン
----------------------------------------------------------------------------------------------------------------------*/

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

.fs30 {font-size:30%;}
.fs50 {font-size:50%;}
.fs80 {font-size:80%;}
.fs85 {font-size:85%;}
.fs90 {font-size:90%;}
.fs95 {font-size:95%;}
.fs100 {font-size:100%;}
.fs105 {font-size:105%;}
.fs110 {font-size:110%;}
.fs115 {font-size:115%;}
.fs120 {font-size:120%;}
.fs125 {font-size:125%;}
.fs130 {font-size:130%;}
.fs135 {font-size:135%;}
.fs140 {font-size:140%;}
.fs145 {font-size:145%;}
.fs150 {font-size:150% !important;}
.fs155 {font-size:155%;}
.fs180 {font-size:180%;}
.fs200 {font-size:200% !important;}
.fs300 {font-size:300%;}



.fcwh {color:#ffffff;}
.fcbk {color:#000000;}
.fc01 {color:#4c4948;}
.fc02 {color: #b5b5b6;}
.ff01 {font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;}

.tac {text-align:center;}
.tal {text-align:left;}
.tar {text-align:right;}

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

.spo, .sp { display: none; }
@media (min-width: 511px) { .spo { display: block; } }
@media (max-width: 510px) { .sp { display: block; } }


@media print, screen and (min-width: 1100px) {
.pc {display: block;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.pc {display: none;}
}
@media print, screen and (max-width: 510px) {
.pc {display: none;}
}
@media print, screen and (min-width: 1100px) {
.pco {display: none;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.pco {display: block;}
}
@media print, screen and (max-width: 510px) {
.pco {display: block;}
}
@media print, screen and (min-width: 1100px) {
.tb {display: none;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.tb {display: block;}
}
@media print, screen and (max-width: 510px) {
.tb {display: none;}
}



.wrapper {overflow:hidden;}
@media print, screen and (min-width: 1100px) {.wrapper {margin:95px 0 0 0;}}
@media print, screen and (max-width: 510px) {.wrapper { margin:70px 0 0 0;}}

@media print, screen and (min-width: 1100px) {.wide01 {width: 1100px; margin: 100px auto;}}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {.wide01 {width: 90%; margin: 100px auto;}}
@media print, screen and (max-width: 510px) {.wide01 {width: 90%; margin: 60px auto;}}

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

.logo-joshu {max-width:180px; margin:0 auto 50px;}



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 > ul > li:hover {display: block; background: rgba(239, 239, 239, 0.8);}
.gnav > li:hover .megamenu {
 max-height: 9999px;
 opacity: 1;
 padding: 0px 0;
}
.gnav li.mgmn:hover {background: rgba(239, 239, 239, 0.8);}
.megamenu {
 opacity: 0;
 overflow: hidden;
}
.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;}


/*ハンバーガーメニューボタン*/
.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;
}

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


.sld {height: 250px; margin: 0;}

.title01 {font-size: 150%; letter-spacing: 1px; margin: 0 0 30px; text-align: center; padding: 0; font-weight: 400;}
.title02 {font-size: 200%; letter-spacing: 1px; padding: 0 0 10px; margin: 0 0 50px; text-align: center; border-bottom: 2px solid #ffffff; font-weight: 400; line-height: 1.2;}
.title03 {font-size: 110%; letter-spacing: 1px; margin: 0 0 10px; padding: 0; font-weight: 400; text-align: left;}
.title04 {font-size: 200%; letter-spacing: 1px; margin: 0 0 50px; padding: 0; line-height: 1.5; font-weight: 400;}

.fs01 {font-size: 80%;}

ul.item {margin: 0 0 50px; padding: 0; list-style-type:none; display: flex; flex-wrap: wrap; gap: 10px 1%;}
ul.item li {margin: 0; padding: 0;}
@media print, screen and (min-width: 1100px) {ul.item li {width: calc(97% / 4);}}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {ul.item li {width: calc(98% / 3);}}
@media print, screen and (max-width: 510px) {ul.item li {width: calc(99% / 2);}}



.block01 .swiper-slide {
  position: relative;
  overflow: hidden;
}

.block01 .slide-link, 
.block01 .swiper-slide > img {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.block01 .slide-overlay {
  content: '';
  display: block;
  position: absolute;
  z-index: 2;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0);
  transition: background 0.3s;
  pointer-events: none;
}

.block01 .slide-title {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: bold;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  white-space: pre-line;
  line-height: 1.3;
  text-shadow: 0 0 8px rgba(0,0,0,0.8);
}

/* ホバー時のみオーバーレイとタイトルを表示 */
.block01 .swiper-slide:hover .slide-overlay,
.block01 .swiper-slide:focus-within .slide-overlay {
  background: rgba(0,0,0,0.15);
}

.block01 .swiper-slide:hover .slide-title,
.block01 .swiper-slide:focus-within .slide-title {
  opacity: 1;
}
.swiper-container,
.swiper-wrapper,
.swiper-slide {
  width: 100%;
}

.swiper-wrapper {
  display: flex;
}

.swiper-slide {
  flex: 0 0 100%;
  box-sizing: border-box;
}
.swiper-slide span{
  width: 100%;
}

ul.process {margin: 0; padding: 0; list-style-type:none; display: flex; flex-wrap: wrap; gap: 10px 2%;}
ul.process li{margin: 0; padding: 0; width: calc(96% / 3);}

.footer-service {
	position: fixed;
	z-index: 1000;
	
}
@media print, screen and (min-width: 1100px) {
.footer-service {bottom: 15%; width: 80%; left: 10%; height: 110px;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.footer-service {bottom: 15%; width: 90%; left: 5%; height: 90px;}
}
@media print, screen and (max-width: 510px) {
.footer-service {top: 40%; width: 80%; left: 10%; height: 400px; overflow:scroll;}
}

.index-bnr-out {background-color: rgba(255,255,255,0.5); padding: 2%;}
@media print, screen and (min-width: 1100px) {
.index-bnr-out {overflow: hidden; margin: 0 0 0 -2%;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.index-bnr-out {overflow: hidden; margin: 0 0 0 -2%;}
}
@media print, screen and (max-width: 510px) {
.index-bnr-out {overflow: hidden; margin: 0 0 0 0;}
}
@media print, screen and (min-width: 1100px) {
.index-bnr {width: 31.3%; float: left; margin: 0 0 0 2%;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.index-bnr {width: 31.3%; float: left; margin: 0 0 0 2%;}
}
@media print, screen and (max-width: 510px) {
.index-bnr {width: 100%; float: none; margin: 0 0 2% 0;}
}
footer {background-color: #ffffff; overflow: hidden;
}
@media print, screen and (min-width: 1100px) {
footer {padding: 30px 0 20px 0;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
footer {padding: 30px 0 20px 0;}
}
@media print, screen and (max-width: 510px) {
footer {padding: 30px 0 20px 0;}
}
ul.ftmn {overflow:hidden; padding: 0; font-size: 80%;}
@media print, screen and (min-width: 1100px) {
ul.ftmn {width: 1100px; margin: 0 auto 20px; border: none;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
ul.ftmn {width: 90%; margin: 0 auto 20px; border: none;}
}
@media print, screen and (max-width: 510px) {
ul.ftmn {width: 100%; margin: 0 auto 20px; border-bottom: 1px solid #666666;}
}

ul.ftmn li {text-align: center; padding: 10px 0 8px; list-style-type: none; box-sizing: border-box;}
@media print, screen and (min-width: 1100px) {
ul.ftmn li {width: 12%;float: left; margin: 0; border: none;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
ul.ftmn li {width: 12%;float: left; margin: 0; border: none;}
}
@media print, screen and (max-width: 510px) {
ul.ftmn li {width: 50%;float: left; margin: 0; border-top: 1px solid #666666; border-right: 1px solid #666666;}
}
ul.ftmn li:nth-child(even){
 border-right: none;
}
ul.ftmn li a {color: #000000!important;}
.footer-copy {width: 100%; text-align: center; height: 25px; color: #999999; lear: both; font-size: 70%;}
.cmname { font-size: 80%; margin: 0 0 20px 0; overflow: hidden; color: #000000;}
@media print, screen and (min-width: 1100px) {
.cmname {text-align: right; width: 1100px; margin: 0 auto 20px;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.cmname {text-align: right; width: 100%; margin: 0 auto 20px;}
}
@media print, screen and (max-width: 510px) {
.cmname {text-align: center; width: 100%; margin: 0 auto 20px;}
}
.cmname a{ color: #ffffff !important;}


.top {position:relative; background-size:cover; background-repeat:no-repeat; background-position:center center; clear:both;}
@media print, screen and (min-width: 1100px) {
.top {height:400px;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.top {height:330px;}
}
@media print, screen and (max-width: 510px) {
.top {height:260px;}
}
.top2 {position:relative; background-size:cover; background-repeat:no-repeat; background-position:center center; clear:both; overflow:hidden;}
#History {background-image: url(images/top-history.jpg);}
#History2 {background-image: url(images/history002b.jpg);}
#History3 {background-image: url(images/history002.jpg);}
#Products {background-image: url(images/top-products.jpg);}
#Contact {background-image: url(images/top-contact.jpg);}
#Privacy {background-image: url(images/top-privacy.jpg);}
#Process {background-image: url(images/top-process.jpg);}
#Company {background-image: url(images/top-company.jpg);}
#Seisan {background-image: url(images/top-seisan.jpg);}

.pankuzu {clear:both; overflow:hidden; text-align:left; background-color: #f9f9f9; font-size:90%; padding: 2px 0 1px;margin: 0 0 50px 0;}
.pankuzu2 {clear:both; overflow:hidden; text-align:left; background-color: #f9f9f9; font-size:90%; padding: 2px 0 1px;margin: 0;}
@media print, screen and (min-width: 1100px) {
.pankuzu-in {width:800px; margin: 0 auto;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.pankuzu-in {width:94%; margin: 0 3%;}
}
@media print, screen and (max-width: 510px) {
.pankuzu-in {width:94%; margin: 0 3%;}
}

@media print, screen and (min-width: 1100px) {
.pankuzu-in2 {width:880px; margin: 100px auto 0;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.pankuzu-in2 {width:94%; margin: 100px 3% 0;}
}
@media print, screen and (max-width: 510px) {
.pankuzu-in2 {width:94%; margin: 100px 3% 0;}
}


.pagename {
	position: absolute;
	width: 100%; color: #000000;
	z-index: 500; font-weight: 700;
	text-align: center !important;
	line-height: 1.5;letter-spacing: 5px;
}
@media print, screen and (min-width: 1100px) {
.pagename {font-size: 180%; top: 150px;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.pagename {font-size: 160%; top: 120px;}
}
@media print, screen and (max-width: 510px) {
.pagename {font-size: 120%; top: 100px;}
}
.pagenamein {line-height: 1.6;font-family: 'Open Sans', sans-serif;
	margin: 0;
	padding: 0; color: #ffffff;
	font-size: 300%;letter-spacing: 0;
}

.def {
	overflow: hidden;
	clear: both;
}
.p-text {
	overflow: hidden;
	clear: both;
}
@media print, screen and (min-width: 1100px) {
.p-txt {padding: 0%;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.p-txt {padding: 5%;}
}
@media print, screen and (max-width: 510px) {
.p-txt {padding: 5%;}
}
.p-text2 {
	overflow: hidden;
	clear: both;
}
@media print, screen and (min-width: 1100px) {
.p-txt2 {padding: 5%;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.p-txt2 {padding: 5%;}
}
@media print, screen and (max-width: 510px) {
.p-txt2 {padding: 5%;}
}


@media print, screen and (min-width: 1100px) {
.img-adj {width: 25%; margin: 0 auto;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.img-adj {width: 35%; margin: 0 auto;}
}
@media print, screen and (max-width: 510px) {
.img-adj {width: 50%; margin: 0 auto;}
}



.bg-gr {
	background-color: #f7f7f7;
}
.bg-wh {
	background-color: #ffffff;
}
.bg-wh2 {background-color: rgba(255,255,255,0.7);
	padding: 3%; overflow:hidden;
}

.t-midashi {line-height: 1.6;font-family: 'Open Sans', sans-serif;
	margin: 0;
	padding: 0;
	font-size: 600%;letter-spacing: 0;
}



.t-main {line-height: 1.6;font-family: 'Open Sans', sans-serif;
	margin: 0;
	padding: 0;
	font-size: 300%;letter-spacing: 0;
}
.t-main p{line-height: 1.6;font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
	margin: 0;
	padding: 0;
	font-size: 30%;letter-spacing: 0;
}

.t-sub {line-height: 1.6;
	margin: 0;
	padding: 0;
	font-size: 230%;letter-spacing: 2px;
}

table.uenashi, td.uenashi, th {border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; border-top: none;
}
table.uenashi {
    border-collapse: collapse;
}
table.shitanashi, th {border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
}


table.shitanashi {
    border-collapse: collapse;
}





.bg-wall {
	background-image: url(images/bg-wall.jpg);
	overflow: hidden;
	position: relative;
	z-index: 10;
}
@media print, screen and (min-width: 1100px) {
.bg-wall-in {width: 1100px; margin: 0 auto; padding: 60px auto 80px;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.bg-wall-in {width: 90%; margin: 30px auto 0; padding: 5%;}
}
@media print, screen and (max-width: 510px) {
.bg-wall-in {width: 94%; margin: 40px auto 0; padding: 3%;}
}
.bg-wall-in2 {clear: both;}
@media print, screen and (min-width: 1100px) {
.bg-wall-in2 {width: 900px;margin: 50px auto;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.bg-wall-in2 {width: 100%;margin: 50px auto;}
}
@media print, screen and (max-width: 510px) {
.bg-wall-in2 {width: 100%;margin: 50px auto;}
}
@media print, screen and (min-width: 1100px) {
.bg-wall-in3 {width: 900px;margin: 100px auto;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.bg-wall-in3 {width: 100%;margin: 100px auto;}
}
@media print, screen and (max-width: 510px) {
.bg-wall-in3 {width: 100%;margin: 100px auto;}
}


@media print, screen and (min-width: 1100px) {
.logo-josyukinuya {width: 150px; margin: 0 auto 50px; padding: 100px 0 0 0;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.logo-josyukinuya {width: 150px; margin: 0 auto 50px; padding: 100px 0 0 0;}
}
@media print, screen and (max-width: 510px) {
.logo-josyukinuya {width: 150px; margin: 0 auto 50px; padding: 100px 0 0 0;}
}

.plan-out {
	overflow: hidden;
}
@media print, screen and (min-width: 1100px) {
.plan-out {margin: 0 -3% 0 0;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.plan-out {margin: 0 -3% 0 0;}
}
@media print, screen and (max-width: 510px) {
.plan-out {margin: 0 -3% 0 0;}
}

.plan-box {float: left; margin: 0 3% 4% 0;position: relative;overflow: hidden;}
@media print, screen and (min-width: 1100px) {
.plan-box {width: 22%;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.plan-box {width: 30.3%;}
}
@media print, screen and (max-width: 510px) {
.plan-box {width: 30.3%;}
}
.plan-box2 {float: left; margin: 0 3% 4% 0;position: relative;overflow: hidden;}
@media print, screen and (min-width: 1100px) {
.plan-box2 {width: 22%;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.plan-box2 {width: 22%;}
}
@media print, screen and (max-width: 510px) {
.plan-box2 {width: 47%;}
}
.figcaption2 {
	position: absolute; line-height: 1.2;
	bottom: 14px; border: 1px solid #ffffff;
	left: 10%; padding-top: 10px;
	z-index: 2;
	width: 80%;
	
}
@media print, screen and (min-width: 1100px) {
.figcaption2 {height: 25px;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.figcaption2 {height: 25px;}
}
@media print, screen and (max-width: 510px) {
.figcaption2 {height: 33%;}
}
.figure2 img {
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
}
.figure2 img:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
.sameheight {text-align: left; line-height: 1.5; position: relative; z-index: 2; padding: 5px 0 0 0;}

@media print, screen and (min-width: 1100px) {
.gree-fl {width: 20%; float: left; margin: 0;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.gree-fl {width: 30%; float: left; margin: 0;}
}
@media print, screen and (max-width: 510px) {
.gree-fl {width: 60%; float: none; margin: 0 auto 30px;}
}
@media print, screen and (min-width: 1100px) {
.gree-fr {width: 75%; float: right; margin: 0;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.gree-fr {width: 65%; float: right; margin: 0;}
}
@media print, screen and (max-width: 510px) {
.gree-fr {width: 100%; float: none; margin: 0 auto;}
}

/* form
=============================================== */
.form {background-color: #fff;padding: 3%;
font-size: 120%;text-align:left;
}
.form > dl {
display: table;
width: 100%;
border-top: 1px solid #ccc;
}
.form > dl > * {
display: table-cell;
vertical-align: middle;
}
.form > dl > dt {
width: 33%;
padding: 15px 10px 15px 0;
}
.form > dl > dt b {
float: left;
line-height: 1.1;
padding: 10px 10px 10px 0;
}
.form > dl > dt span {
float: right;
width: 60px;
text-align: center;
line-height: 1.1;
color: #fff;
border-radius: 3px;
background: #82d65c;
padding: 10px;
font-size: 80%;
}
.form > dl > dt span.opt{
display: none;
}
.form > dl > dt span.imp{
}
.form > dl > dd {
padding: 15px 10px;
}
.form.conf > dl > dd {
vertical-align: middle;
}
.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form select,
.form textarea {
width: 100%;
min-height: 40px;
border: 1px solid #ccc;
background: #fafafa;
border-radius: 5px;
font-size: 16px;
padding: 5px;
cursor: pointer;
}
.form input[type="text"],
.form input[type="tel"],
.form input[type="email"] {
width: 60%;
}
.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 {
border-top: 1px solid #ccc;
text-align: center;
padding: 40px 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){
	#area01 {
	padding-bottom: 10px;
	}
	#area01 .step {
	padding: 10px 10px 0 10px;
	}
	#area01 .area_box {
	background: #fff;
	padding: 10px;
	margin: 0 10px;
	}
	.area01text01 {
	margin-bottom: 10px;
	}
	.form > dl {
	display: block;
	}
	.form > dl > * {
	display: block;
	}
	.form > dl > dt {
	width: auto;
	padding: 10px 0;
	}
	.form > dl > dt:before { content:""; display:table;}
	.form > dl > dt:after { content:""; display:table; clear:both;}
	.form > dl > dt { zoom:1;}
	.form > dl > dd {
	padding: 0 0 10px 0;
	}
	.form.conf > dl > dd {
	vertical-align: middle;
	}
	.form input[type="text"] {
	width: 100%;
	}
	.form .age input[type="text"] {
	width: 70%;
	}
	.form select {
	width: 100%;
	}
	.form .btn {
	padding: 10px 0;
	}
	.form_msg.err {
	font-size: 100%;
	}
	}
.sndbtn {
    border: 0px;
    width: 400px;
    height: 90px;
    background: url(https://miyamazensyoku.co.jp/wp/wp-content/themes/miyama/images/reserve_item01.jpg) center top no-repeat;
}
.sndbtn2 {
    border: 0px;
    width: 400px;
    height: 90px;
    background: url(https://miyamazensyoku.co.jp/wp/wp-content/themes/miyama/images/reserve_item02.jpg) center top no-repeat;
}

#Kuwa {background-image: url(images/bg05b.jpg);}
#Silk {background-image: url(images/bg-silk.jpg);}



ul.catmenu {overflow:hidden; margin: 0 0 0 -2%; padding: 0;}
ul.catmenu li {text-align: center; padding: 10px 0 8px; list-style-type: none; background-color: #383f69;}
@media print, screen and (min-width: 1100px) {
ul.catmenu li {width: 18.4%;float: left; margin: 0 0 2% 2%;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
ul.catmenu li {width: 23.5%;float: left; margin: 0 0 2% 2%;}
}
@media print, screen and (max-width: 510px) {
ul.catmenu li {width: 48%;float: left; margin: 0 0 2% 2%;}
}
ul.catmenu li a {color: #ffffff !important;}
@media print, screen and (min-width: 1100px) {
.half-l {width: 50%;float: left; margin: 0;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.half-l {width: 50%;float: left; margin: 0;}
}
@media print, screen and (max-width: 510px) {
.half-l {width: 100%;float: none; margin: 0 0 2%;}
}
@media print, screen and (min-width: 1100px) {
.half-r {width: 50%;float: right; margin: 0;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.half-r {width: 50%;float: right; margin: 0;}
}
@media print, screen and (max-width: 510px) {
.half-r {width: 100%;float: none; margin: 0 0 2%;}
}


.bg-js {position:relative; background-size:cover; background-repeat:no-repeat; background-position:center center; clear:both; margin:0 0 40px;}
@media print, screen and (min-width: 1100px) {
.bg-js {height:300px;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.bg-js {height:280px;}
}
@media print, screen and (max-width: 510px) {
.bg-js {height:250px;}
}
#Js01 {background-image: url(images/js01.jpg);}
#Js02 {background-image: url(images/js02.jpg);}
#Js03 {background-image: url(images/js03.jpg);}
#Js04 {background-image: url(images/js04b.jpg);}
.jstt {font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;text-align:center;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.6),1px 0 0 rgba(0,0,0,0.6),0 -1px 0 rgba(0,0,0,0.6),-1px 0 0 rgba(0,0,0,0.6),-1px -1px 0 rgba(0,0,0,0.6),1px -1px 0 rgba(0,0,0,0.6),-1px 1px 0 rgba(0,0,0,0.6),1px 1px 0 #fff; font-weight:700;}
@media print, screen and (min-width: 1100px) {
.jstt {padding:110px 0 0; font-size:230%;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.jstt {padding:100px 0 0; font-size:200%;}
}
@media print, screen and (max-width: 510px) {
.jstt {padding:90px 0 0; font-size:170%;}
}


.iframe-content {
	position: relative;
	width: 100%;
	padding: 55% 0 0 0;
	margin: 0;
}
.iframe-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




.menu-process-over {overflow: hidden;}
@media print, screen and (min-width: 1100px) {
.menu-process-over {margin: 0 0 0 -2%;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.menu-process-over {margin: 0 0 0 -2%;}
}
@media print, screen and (max-width: 510px) {
.menu-process-over {margin: 0 0 0 -2%;}
}
.menu-process {background-color: #fefefe;
	float: left;
}
@media print, screen and (min-width: 1100px) {
.menu-process {width: 16.6%;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.menu-process {width: 16.6%;}
}
@media print, screen and (max-width: 510px) {
.menu-process {width: 32%;}
}
.pro {text-align: left; font-size: 130%;
	background-color: rgba(255,255,255,0.8);
	padding: 3%; border: 1px solid #ffffff;
}
@media print, screen and (min-width: 1100px) {
.pro {width: 23%;float: right; margin: 100px 100px 0 0; }
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.pro {width: 33%;float: right; margin: 5% 5% 0 0; }
}
@media print, screen and (max-width: 510px) {
.pro {width: 90%;float: none; margin: 5% 0 5% 0; }
}
.pro2 {
	z-index: 10; text-align: left; font-size: 130%;
	background-color: rgba(255,255,255,0.9);
	padding: 3%; border: 1px solid #ffffff;
}
@media print, screen and (min-width: 1100px) {
.pro2 {width: 23%;float: left; margin: 100px 100px 0 0; }
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.pro2 {width: 33%;float: left; margin: 5% 5% 0 0; }
}
@media print, screen and (max-width: 510px) {
.pro2 {width: 90%;float: none; margin: 5% 0 5% 0; }
}
@media print, screen and (min-width: 1100px) {
.pro3 {width: 30%;float: right; margin: 100px 100px 0 0; }
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.pro3 {width: 30%;float: right; margin: 5% 5% 0 0; }
}
@media print, screen and (max-width: 510px) {
.pro3 {width: 90%;float: none; margin: 5% 0 5% 0; }
}
@media print, screen and (min-width: 1100px) {
.pro4 {width: 30%;float: left; margin: 100px 100px 0 0; }
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.pro4 {width: 30%;float: left; margin: 5% 5% 0 0; }
}
@media print, screen and (max-width: 510px) {
.pro4 {width: 90%;float: none; margin: 5% 0 5% 0; }
}
.t-pro {
	font-size: 150%; padding: 0; margin: 0 0 10px 0;
	color: #0168b7;
}

.btn {
    font-weight: bold;padding: 9px 0;
    display: inline-block; text-align: center;
    text-decoration: none !important;font-size: 125%;
    border-radius: 3px; width: 100%; 
box-sizing: border-box;}
.btn04 { position: relative;
	background-color: #ffffff;
    border: 2px solid #5d92d4;
    color: #5d92d4 !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.btn04:after {content: "\f105"; top: 50%; right: 10px; margin-top: -16px; position: absolute; font-family: FontAwesome;}
.btn04:hover {
    background-color: #5d92d4;
    border: 2px solid #5d92d4;
    color: #ffffff !important;
}
@media print, screen and (min-width: 1100px) {
.btn04 {width: 30%; float: right; margin: 0;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.btn04 {width: 40%; float: right; margin: 3%;}
}
@media print, screen and (max-width: 510px) {
.btn04 {width: 70%; float: none; margin: 0 auto;}
}

#Bg200 {background: url(images/bg-silk.jpg) center no-repeat; background-size: cover;overflow: hidden;
	position: relative;
	z-index: 10;
}
#Snyk {background: url(images/snyk.jpg) center no-repeat; background-size: cover;overflow: hidden;
	position: relative;
	z-index: 10;
}
.bg-move {position: relative;min-height: 60%;
    padding: 5% 30px 0;
}
.zi10000 {z-index: 10000;}
#Process01 {
    background: url(images/process01.jpg) center no-repeat fixed;
    background-size: cover;
}
#Process02 {
    background: url(images/process02.jpg) center no-repeat fixed;
    background-size: cover;
}
#Process03 {
    background: url(images/process03.jpg) center no-repeat fixed;
    background-size: cover;
}
#Process04 {
    background: url(images/process04.jpg) center no-repeat fixed;
    background-size: cover;
}
#Process05 {background: url(images/process05.jpg) center no-repeat fixed;
    background-size: cover;
}
#Process06 {background: url(images/process06.jpg) center no-repeat fixed;
    background-size: cover;
}

#Process01, #Process02, #Process03, #Process04, #Process05  {@include max(1024) {
        background-attachment: scroll;
    } }



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