@charset "UTF-8";
*,*::before,*::after{box-sizing:border-box}*{margin:0}html,body{height:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}

body{
  line-height: 1.6;
  font-family: "Zen Kaku Gothic New", sans-serif;
  letter-spacing: 0.07em;
}

/* footer */
.fot{
	width:100%;
	margin:0 auto;
	padding:15px 0;
	text-align:center;
	font-size:10px;
}

h2{margin:30px 0;text-align:center;} 
.txt{font-size:0.8em;text-align:center;}
.rcrt{font-size:0.7em;text-align:center;}

/* ヒーローセクション */
.hero {
  position: relative;
  width: 100%;
  height: 100dvh;
  padding: 5% 7%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ロゴ・テキストブロック */
.hero-content {
//  display: flex;
//  flex-direction: column;
//  justify-content: center;
  height: 100vh;
}
.logo-box{
position:absolute;
top:20%;
}

/* ロゴ */
.logo {
  width: 380px;
  height: auto;
  object-fit: contain;
  margin-bottom: auto;
}

/* TOPテキスト */
.contact-info {
  position: absolute;
  bottom: 16%;
  left: 7%;
  color: #000;
  font-size: 1.4rem;
}
@media screen and (max-width: 768px){
.contact-info {bottom: 15%;}
}

/* スクロールインジケータ */
.scroll-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
//  transform: translateX(-50%);
  text-align: center;
  color: #000;
  font-size: 12px;
	font-weight: bold;
  letter-spacing: 0.1em;
  cursor: pointer;
  animation: bounce 1.5s infinite;
}

.arrow {
  width: 2px;
  height: 30px;
  background: #000;
  margin: 8px auto 0;
  position: relative;
}

.arrow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  border-bottom: 2px solid #000;
  border-right: 2px solid #000;
}

/* アニメーション */
@keyframes bounce {
  0%, 100% {
    transform: translateX(-50%) rotate(0deg) translateY(0);
  }
  50% {
    transform: translateX(-50%) rotate(0deg) translateY(5px);
  }
}

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



/* 次のセクション */
.next-section {
//  height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #000;
  padding:5% 3% 60px;
box-sizing: border-box;
}
.next-section ul{
list-style-type: none;
display: flex;
 justify-content:center;
margin:0 0 40px;padding:0;
}
.next-section li{
width:33%;
padding:5px 2%;
box-sizing: border-box;
font-size:0.8em;
}
.next-section li p{padding:14px 0 0;font-size:0.7em;}
.next-section li img{width:100%;padding-bottom:20px;}


/* contact */
.beyond-section {
	width:100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #000;
box-sizing: border-box;
}


.contact-info p{margin:6px 0;}
.contact-info mark{background-color:black;padding:0 10px;font-weight:700;color:#fff;}

#formWrap {
	width:340px;
	margin:20px auto;
	color:#000;
	line-height:1.7em;
	font-size:90%;
	font-size:12px;
}
#formWrap input{
padding: 5px;
}
.mail{text-decoration:none;color:#fff;}
.mail:hover{text-decoration:underline;color:#fff;}
.square_btn1{background:#000;color:#fff;border:0;padding:10px 2.0em !important;transition: 0.3s;}
.square_btn1:hover{background:#444;}

.square_btn2{background:#999;color:#fff;border:0;padding:10px 2.0em !important;transition: 0.3s;}
.square_btn2:hover{background:#666;}

/* access */
.acc-section {
	width:100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.box-ac{
  margin:0 auto;
	padding:20px 2%;
  width: 90%;
}



/* MAPカラリング */
.googlemap-bw iframe {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

/* レスポンシブ */
@media screen and (max-width: 768px){
  .logo {width: 80%;}
  .txt{width:90%;margin:0 auto;padding:0 5%;box-sizing: border-box;}
  .rcrt{width:90%;margin:0 auto;padding:0 5%;box-sizing: border-box;}
  .arrow {height: 25px;}
.next-section ul{
width:100%;
margin:0 auto;
	 flex-direction: column;
}
.next-section li{
width:100%;
  padding:5% 5% 60px;
box-sizing: border-box;
}
}

/*　パスワードボタンリンク　*/
.btn_box{

}

button{
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .1em;
  text-align: center;
  line-height: 50px;
  width: 220px;
//  height: 50px;
  background: #000;
//  margin: auto;
//  border:1px solid #000;
//  position: relative;
  display: block;
  overflow: hidden;
  transition: 0.5s;
//  border-radius: 100px;
  text-decoration: none;

}

/*
button:after {
  font-family: "FontAwesome";
  content: "\f061";
  position: absolute;
  right: 20px;
}
*/
button:hover{background: #eee;color: #000;}
/*
button:hover:after {
  transform: rotate3d(1,0,0,360deg);
  transition: 2s;
}
*/


/* ==== モーダル全体 ==== */
    .modal {
      display: none; /* 初期は非表示 */
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 999;
      justify-content: center;
      align-items: center;
    }

    /* ==== モーダルボックス ==== */
    .modal-content {
      background: rgba(255,255,255,0.9);
      padding: 30px 40px;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.2);
      text-align: center;
      max-width: 300px;
      width: 80%;
    }
    .modal-content h2{margin:10px 0;font-size:1.2em;}

    input[type="password"] {
      padding: 10px;
      width: 100%;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 14px;
      margin-top: 10px;
    }

    .btn-area {
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
    }

    .btn-area button {
      flex: 1;
      margin: 0 5px;
			font-size:1.0em;
    }

    .error {
      color: red;
      margin-top: 10px;
      font-size: 14px;
    }