@charset "utf-8";
body {background-color:#FFF;color:#6a6a6a;font-family:'Helvetica Neue', 'HelveticaNeue-Medium', 'HelveticaNeue-Light', 'Roboto', sans-serif;width:100%;}
html {
    scroll-behavior: smooth;
  }

  .content {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    background: white;
  }

section {margin:100px auto;}

img {width:100%;}
a {color:#6a6a6a;text-decoration: none;} 
h2{letter-spacing:1.2px;}
p{letter-spacing:0.6px;}

.end-message {display: none;}
 .false-message {display: none;}
 
 input.text_input {background-color:#000;border-bottom:#FFF 1px solid;color:#FFF;}
 textarea.text_input {background-color:#000;border:#FFF 1px solid;color:#FFF;}
 
 .submit-btn {width:40%;height:auto;padding:10px 0;color:#FFF;cursor:pointer;text-align:center;margin:20px 30%;background-color: #000;border:none;border-bottom:#fff 1px solid;}
     
 #questionnaire {background-color:#000;width:100%;height:auto;padding:0 10%;margin:auto;padding-bottom:100px;padding-top:40px;box-sizing:border-box;}
 #questionnaire h2 {color:#FFF;}

 .form-box {margin-bottom:30px;box-sizing:border-box;padding:20px;color:#fff}
 .form-box_message {box-sizing:border-box;padding:20px;margin-bottom:20px;}
 .form-box_message p {margin:0;}
 .form-wrapper {width:100%;height:auto;}
 .form-box label{width:100%;height:auto;margin-bottom:30px;display:block;}
 .text_input {width:100%;height:auto;border:none;border-bottom:1px solid #dadce0;}
 *:focus {outline: none;}

.fade {opacity : 0;transition: opacity 3s;}
.fade.view{opacity: 1;}

 .header {
    color: #6a6a6a;
    letter-spacing:1.2px;
    padding:0;
}

.navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    padding: 1rem 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

/* スクロール時のスタイル */
.navbar.scrolled {
    background: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    height:120px;
    padding:0;
  }
.scrolled .logo {width:100px;height:auto;}  
.scrolled .logo img {margin:0;} 

.navbar a:link{color:#6a6a6a;text-decoration:none;}
.navbar a:visited{color:#6a6a6a;text-decoration:none;}

.logo {
    position: relative; /* 追加 */
    width: 300px; /* ロゴの幅を指定（実際のロゴサイズに応じて調整） */
    height: auto; /* ロゴの高さを指定（実際のロゴサイズに応じて調整） */
}
.logo img {
    position: absolute; /* 追加 */
    top: 50%; /* 追加 */
    left: 50%; /* 追加 */
    transform: translate(-50%, -50%); /* 追加 */
    max-width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
    margin-top:60%
  }

  .logo-default {
    opacity: 1;
  }
  
  .logo-scroll {
    opacity: 0;
  }
  

  .nav-links {
    position: absolute;
    right: 20px; /* 右側の余白を追加 */
    padding: 0;
    margin: 0;
    list-style: none;
  }

.nav-links li {
    margin-left: 20px;
}

.nav-links a {
    text-decoration: none;
    color: #fff;
    font-size: 1em;
}

.flex-spbetween {display: flex;justify-content: space-between;align-items:center;}
.flex-sparound {display: flex;justify-content: space-around;align-items:center;}
.flex-spbetween div img,.space-around div img {width:100%;height: auto;}

.garally div {width:100%;height: auto;padding:0 2%;box-sizing:border-box;}
.column div {width:100%;height: auto;padding:0 5%;box-sizing:border-box;}
.column_fs div:first-child img {width:80%;height: auto;padding:0 10%;box-sizing:border-box;}
.column_ls div:last-child img {width:80%;height: auto;padding:0 10%;box-sizing:border-box;}


.text-descpption p {width:100%;height:auto;padding:0 20%;box-sizing:border-box;text-align:left;}
.text-descpption h2 {text-align:center;}

.hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    margin-top:0;
  }
  
  .hero video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
  }

.info .image-container {display: flex;width: 100%;max-height:400px;}

.image-box {display: flex;justify-content: center;align-items: center;overflow: hidden;}
.image-box img {width: 100%;height: auto;display: block;object-fit: contain;}
.image-box-1 {flex: 3;}
.image-box-2 {flex: 2;}


@media (max-width: 640px) {
    .info .image-container {max-height:none;display:block;}
 }

 @media (max-width: 640px) {
    section.aboutus p{text-align:left !important;}
    .text-descpption p {padding:0 5%;}
 }

.info,.aboutus,#questionnaire h2{
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
}

.imgwide img {max-height:200px;display:block;object-fit:cover;}

footer {
    width:100%;
    box-sizing:border-box;
    background-color: #111;
    color: #fff;
    letter-spacing:1.6px;
    text-align: center;
    padding: 10px;
}