@charset "UTF-8";

body {animation: bodyFadeIn 2s ease 0s 1 normal;-webkit-animation: bodyFadeIn 2s ease 0s 1 normal;}
@keyframes bodyFadeIn {0% {opacity: 0}100% {opacity: 1}}
@-webkit-keyframes bodyFadeIn {0% {opacity: 0}100% {opacity: 1}}
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 2s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
.img-wrap {
  opacity: 1;
}

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.7s;
animation-fill-mode:forwards;
opacity:0;
}

/* --- トップに戻るボタン用 --- */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 100px;
  width: 50px;
  height: 50px;
  z-index: 9999;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid #ddd;
  opacity: 0; /* ボタンは消えていてもサイト閲覧に支障がないので0でOK */
  visibility: hidden;
  transition: all 0.4s ease;
}
.back-to-top.is-show {
  opacity: 1;
  visibility: visible;
}
.back-to-top:hover {
  background-color: #1c243d;
  border-color: #1c243df;
}
.arrow {
  width: 12px; height: 12px;
  border-top: 3px solid gray; border-right: 3px solid gray;
  transform: translateY(3px) rotate(-45deg);
  transition: all 0.4s ease;
}
.back-to-top:hover .arrow { border-color: #fff; }


.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.7s;
animation-fill-mode:forwards;
opacity:0;
}



/*スマホ*/
@media screen and (max-width:750px){

	.infofont55{height: auto;margin: 0px auto 0px auto;padding: 3% 0px 0.1rem 0px;color:#fff;text-align:left;letter-spacing:0px;line-height: 170%;font-weight: 400;font-size: clamp(0.9rem, 1.0vw, 1.0rem);font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif}
.infofont444{max-width:700px;width:100%; height :auto;margin: 0rem auto 0rem auto;padding: 1rem 0 0rem ;color:#fff;text-align:left;letter-spacing:0px;line-height: 170%;font-weight: 400;font-size: clamp(0.8rem, 1.0vw, 1.0rem);font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif}
hr.line {height: 1px;border: none;border-top: 1px #fff solid;margin:0.2rem 0px 0.3rem;}
	
	
.slash { display: none; }
html { -ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0px auto 0px auto;padding: 0px 0px 0px 0px;}
body {font-size: 100%; width:100%;background: #fff;color: #000;padding: 0;margin: 0;font-weight: normal;font-style: normal;position: relative;cursor: default;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;}
.wrap{width:100%;overflow: hidden;}

.ib{display:inline-block;border: solid 1px #000;padding:3px 5px;margin:20px 5px 0px 0px;}
ul{list-style: none;margin: 0;padding: 0;}
li{list-style: none;margin: 0;padding: 0;}
    
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
    
h1{margin: 0px auto 0px auto;padding: 0px 0px 5px 5px;}
h2{font-size:110% ;margin: 20px auto 20px auto;font-weight:700;}
h3{font-size:110% ;margin: 20px auto 20px auto;font-weight:700;}

img {max-width: 100%;height: auto;border: 0;-ms-interpolation-mode: bicubic;vertical-align: bottom;}
sup {font-size: 40%; vertical-align: super;}
	     /*NEWマーク*/
[data-ruby] {position: relative;}
[data-ruby]::before {width: 3em;content: attr(data-ruby);position: absolute;top: 0.0em;right: -4.0em;margin: auto;font-size: 0.7em;color:#fff;letter-spacing: 0px;background:
#E80509;padding: 0px 3px 0px 3px;text-align: center;line-height:160%;}
	
 .machi{width: 80%;height: auto;padding:5px 0% 5px;text-align: center;margin: 0px auto 0px auto; }
	

.othertop{width:100%;margin:30px auto 10px; height:auto;padding:0px 5% 0px 5%;text-align: center }
.othertop1{width:100%;margin:0px auto 10px; height:auto;padding:0px 5% 0px 5%;text-align: center }
.othertop2{width:100%;margin:0px auto 10px; height:auto;padding:0px 5% 0px 5%;text-align: center }
.othertop3{width:100%;margin:0px auto 30px; height:auto;padding:0px 5% 0px 5%;text-align: center }
/*フッター*/
.copyright{clear:both; width: 100%;height: auto;margin: 0px auto 90px auto;text-align: center;color:#fff;background-color:#B5B5B5;font-size: 60%;padding:4px 0px 4px 0px;}
	
.title {width:25%;height:auto;margin:0px auto 0px auto;padding: 0px 0px 10px 0px;text-align: center;color:#000;font-weight: 300;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;line-height: 150%;font-size:110%;letter-spacing:2px;}
/*フォーム*/
.form{width:80%;text-align:center;padding:0px 0% 0px 0%;color:#000;;margin: 70px auto 70px auto; }
.formtext{margin:35px auto 20px auto;font-size:110%;text-align: center;letter-spacing:2px;font-weight: 300;}
    

.contents {width:80%;text-align:left;color: #fff;font-weight: 300;margin:20px auto 30px auto;;letter-spacing:2px;font-size:90%;}
.cap{width:100%;height: auto;margin: 0px auto 0px auto;padding: 30px 0px 0px 0px;color:#000;text-align:left;letter-spacing:0px;line-height: 150%;font-weight: 300;font-size:70%;}
.outcap{width:100%;height: auto;margin: 0px auto 0px auto;padding: 0px 0px 40px 0px;color:#000;text-align:left;letter-spacing:0px;line-height: 150%;font-weight: 300;font-size:80%;}
.cap2{width:100%;height: auto;margin: 0px auto 0px auto;padding: 30px 0px 0px 0px;color:#000;text-align:left;letter-spacing:0px;}
  /*ロゴ*/
.logotop {padding: 0px 0px 0px 10px;width:100%;height:auto;}
.logotop {width:70%;padding: 0px 1% 0px 2%;}
 

/*ヘッダー*/
.headertop{margin: 0px auto 0px auto;height: auto; text-align:left;}
.header {padding:5px 0 5px 0px;margin: 0; z-index:1;display: block;width: 100%;height: auto; position: fixed;top: 0px;left:0;text-align:left;background-color:#fff;box-shadow: 0px 0px 2px 0px  #333;}
.header a:visited {color:#666;}
.header a:link {color:#666;}
.hdrleft{width:25%;margin:10px auto 0px auto;text-align:left;}

	
.item2 {margin: 10px 0 20px 0%; width: calc(90% - 10px);}
.item2 a{color:#fff ;}

.hover {
    transition-property: opacity;
    transition-duration: 0.5s;
}

.hover:hover {
    opacity: 0.5;
}

	
	
/*スマホナビ*/
.pure-container {position: relative;height: 100%;-webkit-overflow-scrolling: touch;z-index:99}
.pure-pusher-container {position: relative;height: 100%;padding: 20px 0 0 0;overflow: hidden;width: 100%;margin: 0 auto;z-index:99}

/*コンテンツ*/
.contact{width: 60%;height: auto;margin: 30px auto 0px auto;padding: 10px 0px 10px 0px;}
	
	


/*TEL＆ロゴ*/
.footer2{display:flex; flex-wrap: wrap;apadding: 0;list-style: none; width:100%; margin: 30px auto 30px auto; }
.footer2 li{display: flex;lign-items: center;text-align: center;margin: 10px auto 10px auto;width:100%; }

/*TEL＆ロゴ*/
.footer2 li:nth-child(1) {width:90%}
.footer2 li:nth-child(2) {width:35%;margin: 10px auto 0px auto;}
.footer2 li:nth-child(3) {width:58%;margin: 10px auto 0px auto;}
.footer2 li:nth-child(4) {width:60%;margin: 10px auto 0px auto;}

/*スマホ固定下部ナビ*/
#floatBanner {z-index:99; display: block; position: absolute; bottom:0px; width:100%; height:auto;}
#floatBody {z-index:99; display:block; width: 100%; height:auto; position:absolute; cursor:move; bottom:0px; border-top:1px solid #fff;background-color:#FFF }

.btnlist {width: 80%;margin: 0% auto 3% auto; }
.btnlist li{width: 100%;margin-bottom: 15px;margin: 0px auto 20px auto; }
.btnlist li a {display: block;width: 100%;text-align: center;font-size: 100%;color: #fff;background: #8d8379;letter-spacing: 0.1rem;line-height: 3;text-decoration:none; transition: .3s all;}
.btnlist li a:hover {opacity: 0.8;}



/*フッター*/
.footerbg{width: 100%;height: auto;margin: 0px auto 0px auto;padding: 10px 0px 30px 0px;background:#1c243d;}
.footerbg {
  width: 100%;
  height: auto;
  margin: 30px auto 0;
  padding: 30px 0;
  background-color: #1c243d;
  background-image: url('../img/common/footerbg.png');
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto 50%;  /* 高さに合わせて自動スケール */
  position: relative;
}
.footer{ list-style-type: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;}
.item {color:#CFCFCF;margin: 10px 0 0 10%; width: calc(40% - 10px);}
.item a{color:#fff ;}
/* フッターナビ*/

/* scroll */
#page-top {clear:both;position: fixed;bottom: 80px;right: 5px;font-size: 70%;z-index:100;cursor: pointer;}
#page-top a {background-color:#929A94;text-decoration: none;color: #fff;font-weight:bold;width: auto;padding: 0px 0;text-align: center;display: block;z-index:100}
#page-top a:hover {text-decoration: none;background-color:#929A94;}

.img20{width:20%;height:auto;margin:0px auto 0px auto;}
.img30{width:30%;height:auto;margin:0px auto 0px auto;}
.img40{width:40%;height:auto;margin:0px auto 0px auto;}
.img50{width:50%;height:auto;margin:30px auto 0px auto;}
.img60{width:50%;height:auto;margin:10px auto 0px auto;}
.img65{width:65%;height:auto;margin:0px auto 0px auto;}
.img70{width:70%;height:auto;margin:0px auto 0px auto;}
.img75{width:75%;height:auto;margin:0px auto 0px auto;}
.img110{width:110%;height:auto;margin:0px auto 0px auto;}
.img40{width:40%;height:auto;margin:0px auto 0px auto;}
.img40{width:40%;height:auto;margin:0px auto 0px auto;}
.img60{width:60%;height:auto;margin:0px auto 0px auto;}
.img80{width:80%;height:auto;margin:0px auto 0px auto;}
.img90{width:90%;height:auto;margin:0px auto 0px auto;}
    
.image-resize {width: 60%; margin:0px auto 0px auto ;}
.image2-resize {width: 80%; margin:0px auto 0px auto ;}

/*スペース*/
.s50{width: 50%;}
.s60{width: 60%;}
.s80{width: 80%;}
.s100{width: 100%;}
.st5 { margin-top: 5px; }
.st10 { margin-top:10px; }
.st15 { margin-top:15px; }
.st20 { margin-top:20px; }
.st25 { margin-top:25px; }
.st30 { margin-top:30px; }
.st40 { margin-top:40px; }
.st50 { margin-top:50px; }
.sb10 { margin-bottom:10px; }
.sb15 { margin-bottom:15px; }
.sb20 { margin-bottom:20px; }
.sb30 { margin-bottom:30px; }
.sb50 { margin-bottom:50px; }

.sp { display: block ;}
.br-s2{display: none;}
.br-s3{display: none;}
.pc { display: none ;}
.headerbg{display: none;}
.headerbg1{display: none;}
.headerbg2{display: none;}

  .formnavi {
    max-width: 700px;background-color: #fff;
    width: 100%; /* 40% -> 80% に修正 */
    display: flex; /* フレックスボックスを使用 */
    flex-wrap: wrap; /* 要素を折り返し */
    gap: 10px; /* 要素間の隙間 */
    margin: 0px auto 20px; /* 中央に配置 */z-index:5;
	padding: 0px 0px 30px;
	
}

.seikyutop, .seikyu1top {
    max-width: calc(100% - 10px); /* 各要素の幅を50%に設定 */
    width: 100%;
    height: auto;
    display: flex; /* flexbox */
    flex-wrap: wrap; /* 折返し指定 */
    gap: 1px; /* 余白（縦 横） */
    margin: 10px auto 0px auto;
    padding: 10px 0px;z-index:5
}

.seikyutop {
    background-color: #8e8178;
    color: #fff;z-index:5
}

.seikyu1top {
    background-color: #1c243d;
    color: #fff;z-index:5
}
	

.seikyutop li, .seikyu1top li {
    margin: 0;
    padding: 0px;
    width: 100%; /* 全域をクリック可能に */
    display: flex; /* flexbox */
    justify-content: center;
    height: 25px;
    color: #ccc;
    text-align: center;
    line-height: 120%;
    align-items: center;
    font-size: 100%;
    font-weight: 400;
    letter-spacing: 2px;z-index:5
}

.seikyu1top li {
    color: #fff;
}

.seikyutop li a{
    width: 100%; /* 全体をクリック可能領域に */
    text-decoration: none;
    text-align: center;
    font-weight: 400;
    position: relative;
    margin: 0px auto;
    display: inline-block;
    color: #fff;
    outline: none;
    -webkit-transition: all .3s;
    transition: all .5s;z-index:5
}
.seikyu1top li a {
    width: 100%; /* 全体をクリック可能領域に */
    text-decoration: none;
    text-align: center;
    font-weight: 400;
    position: relative;
    margin: 0px auto;
    display: inline-block;
   color: #fff;
    outline: none;
    -webkit-transition: all .3s;
    transition: all .5s;z-index:5
}

.seikyu1top li a {
    color: #fff;z-index:5
}

.seikyutop li.current a, .seikyutop li a:hover {
color:#fff;z-index:5;
}

.seikyu1top li.current a, .seikyu1top li a:hover {
color: #fff;z-index:5;
}

.seikyu1top li.current a, .seikyu1top li a:hover {
    color: #fff;z-index:5;
}

.seikyutop li a::after, .seikyu1top li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: -16px;
    left: 0%;
    /*線の形状*/
    width: 100%;
    height: 4px;
    background: #94783C;
    /*アニメーションの指定*/
    transition: all 1.0s;
    transform: scale(0.4, 1);/*X方向0.4、Y方向1*/
    transform-origin: center top;/*上部中央基点*/z-index:5
}

.seikyu1top li a::after {
    background: #7D1C20;z-index:5
}

/*現在地とhoverの設定*/
.seikyutop li.current a::after, .seikyutop li a:hover::after,
.seikyu1top li.current a::after, .seikyu1top li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/z-index:5
}

.hover {
    transition-property: opacity;
    transition-duration: 0.5s;z-index:5
}

.hover:hover {
    opacity: 0.5;z-index:5
}
	
.infotext{width:75vw;margin: 0px auto 0px auto;font-size: clamp(16px, 3.0vw, 30px);padding: 0px 0px 10px 0px;text-align:center;background-color: #fff;;font-feature-settings: "palt";line-height: 150%;font-weight: 400;}
}  


/*PC*/
@media print, screen and (min-width:751px){

.infofont55 {margin:0px auto 0px;color:#fff;padding:1% 0 15px 0;font-size: clamp(1.0rem, 1.3vw, 1.1rem);line-height:160% ;letter-spacing:1px;font-weight: 400;}
.infofont444{max-width:800px;width:80%; height :auto;border: 1px solid #fff;margin: 2rem auto 2rem auto;padding: 1.2rem 1rem ;color:#fff;text-align:center;letter-spacing:0px;line-height: 170%;font-weight: 400;font-size: clamp(0.9rem, 1.2vw, 1.0rem);font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;}
hr.line {height: 1px;border: none;border-top: 1px #fff solid;margin:0.2rem 0px 0.4rem;}
.slash {
    display: inline; /* デフォルトで表示 */
}
	     /*NEWマーク*/
[data-ruby] {position: relative;}
[data-ruby]::before {width: 4em;content: attr(data-ruby);position: absolute;top: -2.0em;right:-3.0em;margin: auto;font-size: 0.7em;color:#fff;letter-spacing: 0px;background:#DB0003;padding: 2px 3px 0px 5px;text-align: center;line-height:160%;}

sup {font-size: 40%; vertical-align: super;}
	
body {color: #000;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;line-height: 150%;  margin: 0;padding: 0;}
.wrap{width:100%;overflow: hidden;}
a[href^="tel:"] {pointer-events: none;}
img {image-rendering: -webkit-optimize-contrast;}
.clearfix:after {content: "";display: block;clear: both;} 
.clearfix:before {content: "";display: block;clear: both;} 
.clearfix {display: block;}
h1{margin: 5px auto 15px auto;padding: 0px 0px 0px 0px;}
h2{font-size:120% ;margin: 20px auto 20px auto;font-weight:700;}
h3{font-size:120% ;margin: 20px auto 20px auto;font-weight:700;}
.title {max-width:1200px;width:90%;height:auto;margin:0px auto 0px auto;padding: 0px 0px 10px 0px;text-align: center;color:#000;font-weight: 300;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;line-height: 150%;font-size: clamp(12px, 2.0vw, 36px);letter-spacing:2px;}

.form{width:300px;text-align:center;padding:70px 0% 70px 0%;color:#000;;margin: 70px auto 70px auto; }  
.form:hover {background-color: #555;}
	
	
 .machi{width: 90%;height: auto;padding:2% 0% 0%;text-align: center;margin: 0px auto 0px auto; }
    
.ib{display:inline-block;border: solid 1px #847c56;padding:3px 5px;margin:20px 5px 0px 0px;}

ul{list-style: none;margin: 0;padding: 0;}
li{list-style: none;margin: 0;padding: 0;}
img {image-rendering: -webkit-optimize-contrast; max-width:100%; }
a img.opacity,.hoverimg a img{-webkit-transition: all .3s ease; transition: all .3s ease;}
.hoverimg a:hover img{opacity:0.5;}
a img.opacity:hover{opacity:0.3;}
	

img {max-width: 100%;height: auto;border: 0;vertical-align: bottom;}
.center{display: block;margin-left: auto;margin-right: auto;}


	
.headerbg {
  margin: 0 auto;
  width: 100%;
  padding: 0;
  position: fixed;
  top: 0;
  z-index: 99;
  height: 90px;
  background:
    linear-gradient(to right,
      rgba(255, 255, 255, 1) 40%,
      rgba(255, 255, 255, 0) 100%
    ),
    url('../img/common/headerbg.jpg') center center / cover no-repeat;
}
	

.top {max-width: 1200px;width:90%;margin:0 auto; height:auto;padding:0px 0px 0px 0px;}
    
.headerbg1 {margin:90px auto; width:100%;height:auto;padding:10px 0px 13px 0px;position: fixed; top:0;z-index:99;background-color: rgba(255, 255, 255, 0.9);}
.headerbg2 {margin:90px auto; width:100%;height:auto;padding:10px 0px 13px 0px;position: fixed; top:0;z-index:99;background-color: #1c243d;color: #fff}

.headerbg1 {
  width: 100%;
  height: auto;
  padding: 12px 0 12px;
  position: fixed;
  top: 0;
  z-index: 99;
  background-color: rgba(255, 255, 255, 0.7);
  /* display:flex 削除 → margin:0 autoに任せる */
}

.header {
  width: 50%;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0 auto;            /* ← これでページ中央に配置 */
  padding: 0;
  justify-content: space-between;
  align-items: center;
}

.header li {
  margin: 0;
  padding: 0 16px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  color: #6F6F6F;
  font-size: clamp(0.9rem, 1.3vw, 1.0rem);
  font-weight: 400;
  white-space: nowrap;
  box-sizing: border-box;
  border: none;              /* border完全削除 */
  position: relative;
}

/* 2番目以降に区切り線 */
.header li + li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: #6F6F6F;
}
	
/* 1番目の縦線を消す */
.header li:nth-child(1) {
  border-left: none;
}
	
.header li             { flex: 1; }        /* TOP / PLAN（短め） */
.header li:nth-child(2){ flex: 2; }        /* ACCESS＆LOCATION（最長） */
.header li:nth-child(3){ flex: 1; }        /* PLAN */
.header li:nth-child(4){ flex: 1.4; }      /* EQUIPMENT */
	
.header li a{
    width: 100%; /* 全体をクリック可能領域に */
	text-decoration: none;
	text-align: center;
	font-weight:700;position: relative;
    margin: 0px auto 0px auto;display: inline-block;color: #231815;outline: none;-webkit-transition: all .8s;transition: all .8s;}

.header li.current a,
.header li a:hover{color:#000;}

.header li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: -7px;
    left: 0%;
    /*線の形状*/
    width: 100%;
    height: 2px;
    background:#000;
    /*アニメーションの指定*/
    transition: all .7s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.header li.current a::after,
.header li a:hover::after {
transform: scale(1, 1);/*X方向にスケール拡大*/
}
	
	
	
.headerbg2 .header {
  width: 50%;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0 auto;            /* ← これでページ中央に配置 */
  padding: 0;
  justify-content: space-between;
  align-items: center;
}

.headerbg2 .header li {
  margin: 0;
  padding: 0 16px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  color: #fff;
  font-size: clamp(0.75rem, 1.1vw, 0.9rem);
  font-weight: 400;
  white-space: nowrap;
  box-sizing: border-box;
  border: none;              /* border完全削除 */
  position: relative;
}

/* 2番目以降に区切り線 */
.headerbg2 .header li + li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: #fff;
}
	
/* 1番目の縦線を消す */
.headerbg2 .header li:nth-child(1) {
  border-left: none;
}
	
.headerbg2 .header li             { flex: 1; }        /* TOP / PLAN（短め） */
.headerbg2 .header li:nth-child(2){ flex: 2; }        /* ACCESS＆LOCATION（最長） */
.headerbg2 .header li:nth-child(3){ flex: 1; }        /* PLAN */
.headerbg2 .header li:nth-child(4){ flex: 1.4; }      /* EQUIPMENT */
	
.headerbg2 .header li a{
    width: 100%; /* 全体をクリック可能領域に */
	text-decoration: none;
	text-align: center;
	font-weight:700;position: relative;
    margin: 0px auto 0px auto;display: inline-block;color: #ccc;outline: none;-webkit-transition: all .8s;transition: all .8s;}

.headerbg2 .header li.current a,
.header li a:hover{color:#ccc;}

.headerbg2 .header li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: -7px;
    left: 0%;
    /*線の形状*/
    width: 100%;
    height: 2px;
    background:#fff;
    /*アニメーションの指定*/
    transition: all .7s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.headerbg2 .header li.current a::after,
.headerbg2 .header li a:hover::after {
transform: scale(1, 1);/*X方向にスケール拡大*/
}
	
	
	
.formtext{margin: 70px auto 10px auto;font-size: clamp(12px, 2.0vw, 40px);text-align: center;letter-spacing:2px;font-weight: 300;}


		
    
.contents {max-width: 1200px;width: 90%;text-align:left;color: #fff;font-weight: 300;margin:20px auto 20px auto;font-size: clamp(12px, 1.6vw, 24px);letter-spacing:2px;}
    
.item2 {width:50%;height: auto;margin: 1px auto 0px auto;}
.item2 img{width:100%;height: auto;margin: 0px auto 0px auto;}    

.cap{max-width: 1200px;width:90%;height: auto;margin: 10% auto 0px auto;padding: 10px 0px 40px 0px;color:#000;text-align:left;letter-spacing:0px;line-height: 170%;font-weight: 400;font-size:70%;}
	
.outcap{width:100%;height: auto;margin: 0px auto 0px auto;padding: 10px 0px 40px 0px;color:#000;text-align:left;letter-spacing:0px;line-height: 170%;font-weight: 400;}
	
.cap2{max-width: 1200px;width:100%;height: auto;margin: 20px auto 0px auto;padding: 10px 0px 0px 0px;color:#000;text-align:left;letter-spacing:0px;}
    
/*=========================================*/
.maintop2 {width: 100%;margin: 0px auto 0px auto; padding: 6% 0px 0px 0px;}
.maintop {width: 100%;margin: 50px auto 0px auto; padding: 0px 0px 0px 0px;}
.infotext{width:75vw;margin: 20px auto 0px auto;font-size: clamp(16px, 3.0vw, 30px);padding: 40px 0px 10px 0px;text-align:center;background-color: #fff;;font-feature-settings: "palt";line-height: 150%;font-weight: 400;}
.topfont1{height: auto;margin: 0px auto 0px auto;padding: 10px 0px 10px 0px;color:#4c4948;text-align:center;letter-spacing:0px;line-height: 150%;font-weight: 400;font-size:110%;}
.topfont4{height: auto;margin: 0px auto 0px auto;padding: 10px 0px 10px 0px;color:#4c4948;text-align:center;letter-spacing:0px;line-height: 170%;font-weight: 400;font-size:80%;}
.hdrleft{float:left;width: 38%;height:auto;padding: 10px 0px 0px 1%;font-size:12px;text-align:left;line-height: 100%;font-weight: 700;}
.hdrright {float: right;width:60%;height:auto;margin:0px 1% 0px 0px;}
.hdrright ul{list-style: none;padding: 0px 0px 0px 0px;margin: 0px; }
.hdrright li {float: right;text-align: center;list-style: none;margin: 0px 0px 0px 8px; font-size:14px;}
	
	
.hdrright li:nth-child(1) {padding: 0px 0px 0px 0px;margin: 12px 0px 0px 5px;color:#222;}
.hdrright li:nth-child(1) a{padding: 0px 0px 0px 0px;margin: 0px 0px 0px 5px;color:#222;}
.hdrright li:nth-child(1) a:visited {color:#222 !important;}
.hdrright li:nth-child(1) a:hover {color:#999 !important;}
	
.hdrright li:nth-child(2) {padding: 0px 0px 0px 0px;margin: 12px 0px 0px 5px;color:#222;}
.hdrright li:nth-child(2) a{padding: 0px 0px 0px 0px;margin: 0px 0px 0px 5px;color:#222;}
.hdrright li:nth-child(2) a:visited {color:#222 !important;}
.hdrright li:nth-child(2) a:hover {color:#999 !important;}
	
.hdrright li:nth-child(3) {padding: 0px 0px 0px 0px;margin: 15px 0px 0px 5px;color:#222;}
.hdrright li:nth-child(3) a{padding: 0px 0px 0px 0px;margin: 0px 0px 0px 5px;color:#222;}
.hdrright li:nth-child(3) a:visited {color:#222 !important;}
.hdrright li:nth-child(3) a:hover {color:#999 !important;}
	
.hdrright li:nth-child(4) {padding: 0px 0px 0px 0px;margin: 15px 0px 0px 5px;color:#222;}
.hdrright li:nth-child(4) a{padding: 0px 0px 0px 0px;margin: 0px 0px 0px 5px;color:#222;}
.hdrright li:nth-child(4) a:visited {color:#222 !important;}
.hdrright li:nth-child(4) a:hover {color:#999 !important;}
	

    
	


	
/*フッター*/
.footerbg{width: 100%;height: auto;margin: 30px auto 0px auto;  bottom: 0px; padding: 30px 0px 30px 0px;background:#1c243d;}
.footerbg {
  width: 100%;
  height: auto;
  margin: 30px auto 0;
  padding: 30px 0;
  background-color: #1c243d;
  background-image: url('../img/common/footerbg.png?');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;  /* 高さに合わせて自動スケール */
  position: relative;
}
.fgnavi {max-width: 1200px;width: 90%;
	display: flex; /* flexbox */
	flex-wrap: wrap; /* 折返し指定 */
	gap: 1px; /* 余白（縦 横） */;padding:5px 0% 5px 0px; 
    height:30px;margin:10px auto 10px auto;text-align: center;
}

.fgnavi li {
	margin: 0;padding: 8px 0px 0px 0px;
	width: calc(11.1% - 5px);
	display: flex; /* flexbox */
    -webkit-justify-content: center;
    height: 20px;
    text-align: center;line-height: 120%;
    justify-content: center;
    align-items: center; font-size: 80%;font-weight: 700;color:#9C9C9C;}

.fgnavi li a{
width: 80%; 
text-decoration: none;
text-align: center;
font-weight:400;position: relative;
margin: 0px auto 0px auto;display: inline-block;color: #fff;outline: none;-webkit-transition: all .3s;transition: all .5s;}

.fgnavi li.current a,
.fgnavi li a:hover{color:#fff;}

.fgnavi li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: -7px;
    left: 0%;
    /*線の形状*/
    width: 100%;
    height: 2px;
    background:#fff;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.fgnavi li.current a::after,
.fgnavi li a:hover::after {
transform: scale(1, 1);/*X方向にスケール拡大*/
}
    
.item {width:50%;height: auto;margin: 1px auto 0px auto;}
.item img{width:100%;height: auto;margin: 0px auto 0px auto;} 

	
	
.btnlist {
    max-width: 600px;
    margin: 5% auto 1%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 91%;
}

.btnlist li{
	width: 49%;
    margin-bottom: 15px;
}

.btnlist li a {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: #fff;
    background: #8d8379;
    letter-spacing: 0.1rem;
    line-height: 3;
    text-decoration:none; 
    transition: .3s all;
}

.btnlist li a:hover {opacity: 0.8;}

    
/*TEL＆ロゴ*/
.footer2{display:flex;padding: 0;list-style: none;max-width:1080px;width:90%;margin: 0px auto 0px auto; padding: 0px 20px 0 0 }
.footer2 li{display: flex;justify-content: center;align-items: center;text-align: center;margin: 30px auto 30px auto; }

/*TEL＆ロゴ
.footer2 li:nth-child(1) {width:100%}
.footer2 li:nth-child(2) {width:35%;margin: 10px auto 0px auto;}
.footer2 li:nth-child(3) {width:58%;margin: 10px auto 0px auto;}
.footer2 li:nth-child(4) {width:60%;margin: 10px auto 0px auto;}*/
	

/* scroll */
#page-top {clear:both;position: fixed;bottom: 20px;right: 20px;font-size: 70%;z-index:99;cursor: pointer;}
#page-top a {background-color:#929A94;text-decoration: none;color: #fff;font-weight:bold;width: auto;padding: 0px 0;text-align: center;display: block;z-index:99}
#page-top a:hover {text-decoration: none;background-color:#929A94;}



.b { margin: 0px; }
.b1 { margin: 1px; }
.b2 { margin-bottom: 2px; }
.b5 { margin-bottom: 5px; }
.b8 { margin-bottom: 8px; }
.b10 { margin-bottom:10px; }
.b15 { margin-bottom:15px; }
.b20 { margin-bottom:20px; }
.b25 { margin-bottom:25px; }
.b35 { margin-bottom:35px; }
.b50{ margin-bottom:50px; }

.t { margin-top: 0px; }
.t1 { margin-top: 1px; }
.t5 { margin-top: 5px; }
.t10 { margin-top:10px; }
.t15 { margin-top:15px; }
.t20 { margin-top:20px; }
.t25 { margin-top:25px; }
.t35 { margin-top:25px; }
.t45 { margin-top:45px; }
.t55 { margin-top:55px; }
.t100 { margin-top:103px; }

.l { margin-left: 0px; }
.l1 { margin-left: 1px; }
.l5 { margin-left: 5px; }
.l8 { margin-left: 8px; }
.l10 { margin-left:10px; }
.l15 { margin-left:15px; }
.l20 { margin-left:20px; }
.l40 { margin-left:40px; }
.l55 { margin-left:55px; }
    
.othertop{max-width: 1200px;width:90%;margin:0 auto; height:auto;padding:15px 0px 10px 0px;text-align: center }
.othertop1{max-width: 1200px;width:90%;margin:0 auto; height:auto;padding:0px 0px 10px 0px;text-align: center }
.othertop2{max-width: 1200px;width:90%;margin:0 auto; height:auto;padding:0px 0px 10px 0px;text-align: center }
.othertop3{max-width: 1200px;width:90%;margin:0 auto; height:auto;padding:0px 0px 50px 0px;text-align: center }
/*コピーライト*/
.copyright{clear:both;width: 100%;height: auto;margin: 0px auto;text-align: center;font-size:70%;color:#fff;background-color:#B5B5B5;padding:3px 0px 3px 0px;}
    /*コンテンツ*/
.contact{width:80%;height: auto;margin: 40px auto 0px auto;padding: 10px 0px 10px 0px;text-align: center}
.formnavi {
    background-color: #fff;
    width:60vw;/* 40% -> 80% に修正 */
    display: flex; /* フレックスボックスを使用 */
    flex-wrap: wrap; /* 要素を折り返し */
    gap: 10px 10px; /* 要素間の隙間 */
    margin: 0 auto; /* 中央に配置 */z-index:5;padding: 0px 10% 30px 10%;
	
}

.seikyutop, .seikyu1top {
    max-width: calc(50% - 30px); /* 各要素の幅を50%に設定 */
    width: 100%;
    height: auto;
    display: flex; /* flexbox */
    flex-wrap: wrap; /* 折返し指定 */
    gap: 1px; /* 余白（縦 横） */
    margin: 30px auto 0px auto;
    padding: 20px 0px;z-index:5;
}

.seikyutop {
    background-color: #8e8178;
    color: #fff;z-index:5
}

.seikyu1top {
    background-color: #1c243d;
    color: #fff;z-index:5
}

.seikyutop li, .seikyu1top li {
    margin: 0;
    padding: 0px;
    width: 100%; /* 全域をクリック可能に */
    display: flex; /* flexbox */
    justify-content: center;
    height: 20px;
    color: #ccc;
    text-align: center;
    line-height: 120%;
    align-items: center;
    font-weight: 400;
    letter-spacing: 2px;z-index:5;font-size: clamp(14px, 2.0vw, 19px)
}

.seikyu1top li {
    color: #fff;
}

.seikyutop li a{
    width: 100%; /* 全体をクリック可能領域に */
    text-decoration: none;
    text-align: center;
    font-weight: 400;
    position: relative;
    margin: 0px auto;
    display: inline-block;
    color: #fff;
    outline: none;
    -webkit-transition: all .3s;
    transition: all .5s;z-index:5
}
.seikyu1top li a {
    width: 100%; /* 全体をクリック可能領域に */
    text-decoration: none;
    text-align: center;
    font-weight: 400;
    position: relative;
    margin: 0px auto;
    display: inline-block;
   color: #fff;
    outline: none;
    -webkit-transition: all .3s;
    transition: all .5s;z-index:5
}

.seikyu1top li a {
    color: #fff;z-index:5
}

.seikyutop li.current a, .seikyutop li a:hover {
color:#fff;z-index:5;
}


.seikyu1top li.current a, .seikyu1top li a:hover {
color: #fff;z-index:5;
}

.seikyutop li a::after, .seikyu1top li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: -20px;
    left: 0%;
    /*線の形状*/
    width: 100%;
    height: 3px;
    background: #531A00;color: #fff;
    /*アニメーションの指定*/
    transition: all 1.0s;
    transform: scale(0.4, 1);/*X方向0.4、Y方向1*/
    transform-origin: center top;/*上部中央基点*/z-index:5
}

.seikyu1top li a::after {
    background: #7D1C20;z-index:5
}

/*現在地とhoverの設定*/
.seikyutop li.current a::after, .seikyutop li a:hover::after,
.seikyu1top li.current a::after, .seikyu1top li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/z-index:5
}

.hover {
    transition-property: opacity;
    transition-duration: 0.5s;z-index:5
}

.hover:hover {
    opacity: 0.5;z-index:5
}
    

/*スマホ固定下部ナビ*/
#floatBanner {display: none }
#floatBody {display: none }

.sp { display: none ; }
.pc { display: block ; }
.br-sp{display:none;}
.br-sp2{display: none;}
.logotop{display: none;}
.pure-container{display: none;}
	

}
@media only screen and (min-width:751px) and (max-width:1200px) {

.maintop2 {width: 100%;margin: 110px auto 0px auto; padding: 0px 0px 0px 0px;}
.top {max-width: 1200px;width:100%;margin:0 auto; height:auto;padding:0px 0px 0px 0px;}
.header {max-width: 800px;width:100%;height:auto;
	display: flex; /* flexbox */
	flex-wrap: wrap; /* 折返し指定 */
	gap: 1px; /* 余白（縦 横） */;
    margin:0px auto 0px auto;padding:0px 0px 0px 0px;z-index:99;}
.header li {
font-size:80%;}

	
.hdrleft{float:left;width: 32%;height:auto;padding: 10px 0px 0px 1%;font-size:12px;text-align:left;line-height: 100%;font-weight: 700;}
.hdrright {float: right;width:66%;height:auto;margin:0px 1% 0px 0px;}
.hdrright ul{list-style: none;padding: 0px 0px 0px 0px;margin: 0px; }
.hdrright li {float: right;text-align: center;list-style: none;margin: 0px 0px 0px 8px; font-size:12px;}
	
.hdrright li:nth-child(1) {padding: 0px 0px 0px 0px;margin: 10px 0px 0px 5px;color:#222;}
.hdrright li:nth-child(1) a{padding: 0px 0px 0px 0px;margin: 10px 0px 0px 5px;color:#222;}
.hdrright li:nth-child(1) a:visited {color:#222 !important;}
.hdrright li:nth-child(1) a:hover {color:#999 !important;}
	
.hdrright li:nth-child(2) {padding: 0px 0px 0px 0px;margin: 10px 0px 0px 5px;color:#222;}
.hdrright li:nth-child(2) a{padding: 0px 0px 0px 0px;margin: 10px 0px 0px 5px;color:#222;}
.hdrright li:nth-child(2) a:visited {color:#222 !important;}
.hdrright li:nth-child(2) a:hover {color:#999 !important;}
	
.hdrright li:nth-child(3) {padding: 0px 0px 0px 0px;margin: 15px 0px 0px 5px;color:#222;}
.hdrright li:nth-child(3) a{padding: 0px 0px 0px 0px;margin: 15px 0px 0px 5px;color:#222;}
.hdrright li:nth-child(3) a:visited {color:#222 !important;}
.hdrright li:nth-child(3) a:hover {color:#999 !important;}
	
.hdrright li:nth-child(4) {padding: 0px 0px 0px 0px;margin: 15px 0px 0px 5px;color:#222;}
.hdrright li:nth-child(4) a{padding: 0px 0px 0px 0px;margin: 15px 0px 0px 5px;color:#222;}
.hdrright li:nth-child(4) a:visited {color:#222 !important;}
.hdrright li:nth-child(4) a:hover {color:#999 !important;}
    

.fgnavi {max-width: 1200px;width: 100%;
	display: flex; /* flexbox */
	flex-wrap: wrap; /* 折返し指定 */
	gap: 1px; /* 余白（縦 横） */;padding:5px 0% 5px 20px; 
    height:30px;margin:10px auto 10px auto;text-align: center;
}
.fgnavi li a{
width: 96%; 
text-decoration: none;
text-align: center;
font-weight:400;position: relative;
margin: 0px auto 0px auto;display: inline-block;color: #fff;outline: none;-webkit-transition: all .3s;transition: all .5s;}

.fgnavi li{width:10.0%}
.fgnavi li:nth-child(5){width:13.0%}
.fgnavi li:nth-child(6){width:9.0%}
.fgnavi li:nth-child(7){width:12.0%}


.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 2s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
.img-wrap {
  opacity: 1;
}

.img-animation {
  animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  position: relative;
}

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


@keyframes fadeUpAnime2{
from {opacity: 0;transform: translateY(100px);}
to {opacity: 1;transform: translateY(0);}}


@keyframes img-opacity2 {
100% {opacity: 1;}}

@keyframes img-animation2 {100% {
transform: translateX(100%);}}
    
    
@keyframes fadeUpAnime{
from {opacity: 0;transform: translateY(100px);}
to {opacity: 1;transform: translateY(0);}}


@keyframes img-opacity {
100% {opacity: 1;}}

@keyframes img-animation {100% {
transform: translateX(100%);}}