@charset "UTF-8";
/* ===== html, body の基本設定 ===== */

body {
    margin: 0;
    padding: 0;
    font-family: "fot-chiaro-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #fff;
    
  
}

/* スマホ以外はスクロール無効（後述でオーバーライドされる） */
html, body {
     overflow-x: hidden;
     overflow-y: auto;
     height: auto;
}

/* ===== 背景を全面表示する要素 ===== */
#main-background {
    max-width: 1920px;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: clamp(22.5rem, 100vw, 120rem);
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* ===== header ===== */
.header {
    display: flex;
    background-color: rgba(26, 176, 146, 0.274);
    width: clamp(22.5rem, 100vw, 120rem);
    height: 100%; /* MIN40 MAX80 MIN360 MAX1920 */
    position: relative;
    z-index: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: baseline;  

}

.nav__list {
    max-width: 1600px;
    list-style: none;
    display: flex;
    gap: clamp(1rem, 0.221rem + 3.46vw, 4.375rem); /* MIN20 MAX70 MIN360 MAX1920:*/
    padding: 0;
    justify-content: center;
    z-index: 2;
    align-items: baseline;
}

.nav__list li a {
    color: #f3f0a0;
    text-decoration: none;
    font-weight: bold;
    padding: clamp(0.063rem, 0.019rem + 0.19vw, 0.25rem);
    font-size: clamp(1.25rem, 1.034rem + 0.96vw, 2.188rem);
    text-align: center;
}

.nav__list li a:hover {
    text-decoration: underline;
    color: #ffd700;
}

.nav__list li a.small-multiline {
  font-size:clamp(1rem, 0.798rem + 0.9vw, 1.875rem); /* LightMuseum のサイズ */
  line-height: 1.2;
  display: inline-block;
  text-align: center;
  white-space: normal;
  word-break: keep-all;
  letter-spacing: -0.02em;

}

.nav__list li a.small-multiline .subtitle {
  font-size: 0.8em; /* ← LightMuseum よりさらに小さく */
  display: block;
  line-height: 1.1;
}


/* ===== コンテンツラッパー ===== */
#content-wrapper {
    display: flex;
    margin-right: clamp(0.625rem, 0.048rem + 2.56vw, 3.125rem);
    width: clamp(37.5rem, 23.077rem + 64.1vw, 100rem);
    max-height: 900px;
    flex-direction: row;
    align-content: center;
    align-items: flex-start;
    overflow: hidden;
}

#content-wrapper .guide {
    white-space: pre;
    font-size: clamp(0.75rem, 0.663rem + 0.38vw, 1.125rem);/* MIN10 MAX18 MIN360 MAX1920 */
    line-height: clamp(1.2, 1.4, 1.6);
    padding-left: clamp(0.625rem, 0.337rem + 1.28vw, 1.875rem); /* MIN10 MAX30 MIN360 MAX1920 */
    padding-right: clamp(0.625rem, 0.337rem + 1.28vw, 1.875rem); /* MIN10 MAX30 MIN360 MAX1920 */
    overflow-wrap: break-word;
    position: relative;
    z-index: 3;
}

#content-wrapper .guide::after {
  content: "";
  position: absolute;
  top: -40px;    /* 外側に広げてぼかしの効果を強調 */
  left: -20px;
  right: -20px;
  bottom: -20px;
  background: linear-gradient(to top right, rgb(0, 163, 158) 30%, transparent 50%);
  filter: blur(30px);  /* 強めのぼかし効果 */
  z-index: -1;         /* 擬似要素を背面に配置 */
}

/* ===== 言語切り替えボタン ===== */
.language-selector {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    position: relative;
    z-index: 5;
    gap: clamp(0.2rem, 0.131rem + 0.31vw, 0.5rem); 
    margin-left: clamp(1rem, 0.769rem + 1.03vw, 2rem);   
}
  
.language-selector button {
    display: flex;
    font-weight: bold;
    color: #f3f0a0;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    position: relative;
    z-index: 4;
    font-size: clamp(0.625rem, 0.538rem + 0.38vw, 1rem);
}

.language-selector button:hover {
    color: #ffd700;
}

/* ===== スライドエリアのスタイル ===== content-wrapperの中にある　.slide_img_iframe 指定*/ 

#content-wrapper {
    max-width: 1920px;
    min-width: 360px;
}
#content-wrapper .slide_img_iframe {
    display: flow-root;
    box-sizing: border-box;  
    position: relative;
    z-index: 6;
}

.slide_img_iframe{
    max-width: 1200px;
    min-width: 360px;
    width: clamp(22.5rem, 10.385rem + 53.85vw, 75rem);
     padding-left:clamp(1rem, 0.375rem + 1.56vw, 2.25rem);
    padding-right:clamp(1rem, 0.375rem + 1.56vw, 2.25rem);  
   
}

iframe {
   width:  clamp(22.5rem, 10.385rem + 53.85vw, 75rem);
    height: 140vh; /* ←ここをautoに変更 */
    aspect-ratio: 16 / 9; /* 必要に応じて追加 */
    border: none;  
    margin-bottom: clamp(0.625rem, 0.337rem + 1.28vw, 1.875rem);
    padding-left:clamp(1rem, 0.375rem + 1.56vw, 2.25rem);
    
}

.content {
    max-width:700px;
    min-width: 360px;
    width:  clamp(22.5rem, 20.481rem + 8.97vw, 31.25rem);
    padding-left:clamp(1rem, 0.375rem + 1.56vw, 2.25rem);
    padding-right:clamp(1rem, 0.375rem + 1.56vw, 2.25rem);  
}

.Lyn {
    font-size: clamp(1rem, 0.899rem + 0.45vw, 1.438rem);
}

/* ===== フェードインアニメーション ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 1.5s ease-in-out;
    animation-fill-mode: forwards;
    background-color: black;
    opacity: 0;
}

/* ===== PC・タブレット（760px以上） ===== */
@media (min-width: 768px) {
   html, body {
        overflow-x: hidden;
        overflow-y: auto;
    }
    #main-background {
        background-image: url("images/top_img1920.jpg");
        max-width: 1920px;
        max-height: 1080px;
        background-position: center;

    }

    #content-wrapper {
        flex-direction: row;
        justify-content: space-around;
        max-width: 1920px;
        width: clamp(22.5rem, 4.615rem + 79.49vw, 100rem);
        padding-top:clamp(1.875rem, 1.587rem + 1.28vw, 3.125rem);
        
    }
    .credit_index {
        white-space: pre;
        font-family: sans-serif;
        font-weight: 200;
        font-size: clamp(0.625rem, 0.567rem + 0.26vw, 0.875rem);
    }


}

/* ===== スマホ中サイズ（431px～767px） ===== */
@media (min-width: 431px) and (max-width: 767px) {
    html, body {
        overflow-x: hidden;
        overflow-y: visible;
    }

    /* ===== header ===== */

    header .header {
    max-width: 767px;
    height: 100%;
    display: flex;
    background-color: rgba(26, 176, 146, 0.274);
    position: relative;
    z-index: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: baseline;
    flex-shrink: 1;
}
  
    #main-background {
        background-image: url("images/top_img1920.jpg");
        background-size: cover;
    }

    .nav__list li a {
        color: #f3f0a0;
        text-decoration: none;
        font-weight: bold;
        font-size: clamp(1.25rem, 0.962rem + 1.07vw, 1.875rem);
        text-align: center;
        
        
    }

    .nav__list li a.small-multiline {
  font-size:clamp(0.625rem, 0.304rem + 1.19vw, 0.875rem); /* LightMuseum のサイズ */
  line-height: 1.2;
  display: inline-block;
  text-align: center;
  white-space: normal;
  word-break: keep-all;
  letter-spacing: -0.02em;

}

.nav__list li a.small-multiline .subtitle {
  font-size: 0.8em; /* ← LightMuseum よりさらに小さく */
  display: block;
  line-height: 1.1;
}

    .language-selector {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: clamp(0.2rem, 0.131rem + 0.31vw, 0.5rem);    
}


    .content {
        display: flex;
        flex-direction: column;
        max-width: 767px;
        width: clamp(26.938rem, 100vw, 47.938rem);
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: flex-start;
    
    }

    #content-wrapper {
        padding-left: clamp(0.625rem, 0.153rem + 2.22vw, 0.75rem);
        padding-right: clamp(0.625rem, 0.153rem + 2.22vw, 0.75rem);
        flex-direction: column;
        width:clamp(26.938rem, 100vw, 47.938rem);
        display: flex;
        flex-wrap: nowrap;
        align-items: center; 
    }

    iframe {
        width:clamp(26.938rem, 100vw, 47.938rem);
    }    

    .credit_index {
        white-space: pre;
        font-family: sans-serif;
        font-weight: 200;
        font-size: clamp(0.625rem, 0.567rem + 0.26vw, 0.875rem);
    }

}
/* =====スマホ小サイズ（430px以下） ===== */
@media (max-width: 430px) {
    html, body {
        overflow-x: auto;
        overflow-y: auto;
    }

    #main-background {
        background-image: url("images/top_img1920.jpg");
        background-size: cover;
    }

      /* ===== header ===== */

    .header {
    max-width: 430px;
    width: clamp(22.5rem, 100vw, 26.875rem);
    display: flex;
    background-color: rgba(26, 176, 146, 0.274);
    position: relative;
    z-index: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: baseline;
    flex-shrink: 1;
}
   .nav__list {
    max-width: 410px;
}


    .nav__list li a {
        color: #f3f0a0;
        text-decoration: none;
        font-weight: bold;
        font-size: clamp(0.75rem, -0.194rem + 4.44vw, 1rem);
        text-align: center;
        padding-top: clamp(0.625rem, -0.018rem + 2.86vw, 0.75rem);
    }

    .nav__list li a.small-multiline {
  font-size:clamp(0.75rem, -0.194rem + 4.44vw, 1rem); /* LightMuseum のサイズ */
  line-height: 1.4;
  display: inline-block;
  text-align: center;
  white-space: normal;
  word-break: keep-all;
  letter-spacing: -0.02em;

}

.nav__list li a.small-multiline .subtitle {
  font-size: 0.8em; /* ← LightMuseum よりさらに小さく */
  display: block;
  line-height: 1.2;
}

    
    .language-selector {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: clamp(0.2rem, 0.131rem + 0.31vw, 0.5rem);
    }
    .content {
       display: flex;
       flex-wrap: nowrap;
       flex-direction: column;
       margin-top: clamp(1rem, -0.286rem + 5.71vw, 1.25rem);
       width:100%;
       align-items: flex-start;
       
    }

    #content-wrapper {
        max-width: 430px;
        padding-left: clamp(0.625rem, 0.153rem + 2.22vw, 0.75rem);
        padding-right: clamp(0.625rem, 0.153rem + 2.22vw, 0.75rem);
        flex-direction: column;
        width:clamp(22.5rem, 100vw, 26.875rem);
        display: flex;
        flex-wrap: nowrap;
        align-items: center; 
    }

    /* iframe を内包するボックスを拡大縮小に対応させる */
.slide_img_iframe {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* content-wrapper 自体もスクロール可能に */
#content-wrapper {
  overflow-y: visible;
  max-height: 950px;
  height: auto;
}

    iframe {
        width:100%;
    }    
}

/*　ipad */
@media screen and (min-width:390px) and (max-width:1024px) and (min-height:600px) and (max-height:1400px){
   #main-background {
        background-image: url("images/top_img1920.jpg");
        background-size: auto;
    }
}