.index main
{
/*    background-color:#f6f4ec;*/
    position:relative;
    z-index: 2;
}


/* ===== ファーストビュー ===== */
.top
{
    position: relative;
    width: 100%;
    aspect-ratio: 1200/710;
/*    background-image: var(--white-bg);*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: 102%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* 背景の表示領域 */
.fv-overwrap
{
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* 横スクロール */
.fv-overwrap-track
{
    display: flex;
    width: 200%;
    height: 100%;
    animation: fvBgFlow 70s linear infinite;
}

/* 2枚並べる */
.fv-overwrap-panel
{
    flex: 0 0 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 画像制御 */
.fv-overwrap-panel img
{
    height: 106%;
    width: auto;
    max-width: none;
    object-fit: contain;
    object-position: center;
}

/* 横流れ */
@keyframes fvBgFlow
{
    0%
    {
        transform: translateX(-50%);
    }
    100%
    {
        transform: translateX(0);
    }
}
.fv-logo,
.left-top,
.scroll-indicator,
.midashi
{
    position: relative;
    z-index: 2;
}
.fv-logo
{
    width: 50%;
    max-width: 560px;
    z-index: 10;
}

.midashi
{
    position: absolute;
    right: 0;
    bottom: -1px;
    box-sizing: border-box;
}
.count-bg
{
    width:25%;
    min-width: 296px;
    aspect-ratio: 296/112;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 25px 0 0 0;
    color: var(--control-color);
    gap: 10px;
}
.midashi .count
{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    padding-left: 4rem;
    box-sizing: border-box;
}
.kaisai
{
    position: absolute;
    top: 50%;
    left: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;    
    color: #fff;
    transform: translateY(-50%);
}
.kaisai:after
{
    content: "";
    margin-left: -1px; 
    width: 0;
    height: 0;
    border-left: 0.8rem solid var(--control-color);
    border-top: calc(1.05rem + 5px) solid transparent;
    border-bottom: calc(1.05rem + 5px) solid transparent;
}
.kaisai>span
{
    background-color: var(--control-color);
    min-width: 5em;
    padding:5px 10px;
    box-sizing:border-box;
    display: flex;
    justify-content: center;
    align-items: center; 
}
.niti
{
    position: absolute;
    top: 50%;
    right: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;    
    transform: translateY(-50%);
    font-size: 2rem;
}
#days-count{
  display: inline-flex;
  gap: 5px;
}

#days-count .digit{
  background: #fff;
  padding: 5px 10px;
  text-align: center;
  font-size: calc(2em * var(--font-scale));
  font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.2vw;
    aspect-ratio: 1 / 2;
}

.scroll-indicator{
  position: absolute;
  left: 20px;
  bottom: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  height: 100px;
  color: var(--control-color);
}

/* レール */
.scroll-indicator::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: rgba(13, 98, 92, 0.25);
  border-radius: 999px;
}

/* 光 */
.scroll-indicator::after{
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 5px;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 30%,
    currentColor 50%,
    transparent 70%,
    transparent 100%
  );
  background-size: 100% 180%;
  background-repeat: no-repeat;
  animation: scrollLight 1.8s ease-in-out infinite;
}

.scroll-text{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: calc(12px * var(--font-scale));
  line-height: 1;
  margin-left: 13px;
}

@keyframes scrollLight{
  0%{
    background-position: 0 140%;
    opacity: 0;
  }
  15%{
    opacity: 1;
  }
  100%{
    background-position: 0 -40%;
    opacity: 1;
  }
}
.left-top
{
    position: absolute;
    top: 30px;
    left: 0;
    display: flex;
    flex-direction: column;
    gap:10px;
    
}
.left-top-bg
{
    border-radius: 0 50px 50px 0;
    width: fit-content;
}
.left-top-text
{
    padding: 10px 25px;
    color: #fff;
    font-size: calc(20px * var(--font-scale));
    letter-spacing: 0.6rem;
}


section
{
    padding: 50px 0;
    box-sizing: border-box;
    
}

/*aboutセクション*/
.about
{
    background-color: #f6f4ec;
    border-radius: 0 0 50px 0;
    position: relative;
    z-index: 10;
}
.il-about-yairo
{
    position: absolute;
    bottom:50px;
    right: 50px;
    width: 10%;
    max-width:113px;
}


.about .sec-wrap>div,
.story .sec-wrap>div
{
    width: 50%;    
}
.about .sec-wrap p
{
    margin: 75px 0 50px;
    color: var(--control-color)
}

.about>.sec-wrap
{
    align-items: flex-start;
}



/*高知の森と木*/
.story
{
    margin:-50px 0 0;
    border-radius:0 0 0 50px;
    padding:100px 0 50px;
    position: relative;
    background-size:101%;
    z-index:5;
}
.more-area
{
   position: absolute;
    width: 100%;
    height: 100%;
    display: inline-block;
    top: 0;
    left: 0;
    z-index:15;
}
.story .sec-wrap>div
{
    width:fit-content;
}
.story-text-wrap
{
    display:flex;
    flex-direction: column;
    align-items: flex-end;
    
}
.story-text
{
    display:flex;
    flex-direction: row-reverse;
    margin-bottom:200px;
    
}
.story-text p
{
  -webkit-writing-mode: vertical-rl; /* Safari用 */
  writing-mode: vertical-rl;
  margin: 0 50px;
  color:var(--control-color);
}

.story-text-wrap .more-btn-line
{
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 20;
}
.story-kochi
{
    position: absolute;
    width: 50%;
    max-width: 587px;
    bottom: -90%;
    z-index: 11;
}

/*kochi*/
.kochi
{
    width:100%;
    max-width:1200px;
    height:360px;
    background-image:url(../images/index/kochi_yama.jpg) !important;
    background-position:center;
    background-size:cover;
    margin:-50px 0 0;
    position: relative;
    background-attachment: fixed;
}
.sinnyouju-il
{
    position: absolute;
    width:16.6%;
    z-index:+10;
    bottom: -75%;
    right:5%;
}
.story .photo-area>p
{
    position: absolute;
    font-size: calc(140px * var(--font-scale));
    bottom:-2.5%;
    font-weight:1000;
    color: var(--control-color) !important;
    -webkit-text-stroke: 3px var(--control-color);
    text-stroke: 3px --control-color;
}
.kochi-btn
{
    position: relative;
    width: 100%;
    padding: 50px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--control-color);
    background-color:#f6f4ec;
}
/*お知らせ*/
.information,.links-wrap-bg
{
    background-color:#f6f4ec;
    padding:50px 0;
    z-index:5;
    position: relative;
}
.links-wrap-bg{
    border-radius: 0 0 50px 0;
}
        
.information .sec-wrap
{
    flex-direction: column;
    gap:0;
}
.info-title-box
{
    width:100%;
    display:flex;
    justify-content: space-between;
}
.info-container
{
    width: 100%;
    max-width:1000px;
    display: flex;
    margin: 20px auto 0;
    flex-direction: column;
    gap:25px;
}
.info-buttons
{
    width: 100%;
}
.genre-buttons
{
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    padding: 0px;
}
.genre-buttons > button,
.genre {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: none;
    border-radius: 20px;
    height: 25px;
    padding: 0 12px;
    font-weight: 700;
    font-size: calc(13px * var(--font-scale));
    color:var(--control-color);
    line-height: 1;
    box-sizing: border-box;
    white-space: nowrap;
}
.more-area
{
    
}
.genre
{
    color: #fff;
    background-color: #46966e;
}

.info-wrapper
{
    width: 100%;
    display:flex;
}
.info-link:first-of-type
{
    border-left:1px solid #fff;
}
.info-link
{
    width:25%;
    text-decoration: none;
    color: #333333;
    padding:0 20px;
    box-sizing:border-box;
    border-right:1px solid #fff;
}
.info
{
    display: flex;
    flex-flow: column;
    gap: 10px;
}
.info-flex
{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-direction: column;
}
.info-flex p
{
    margin: 0;
    font-size: calc(14px * var(--font-scale));
    font-weight: 700; 
    line-height: 1;
}
.info-ttl p
{
    font-weight: 700;
    margin: 0;
    line-height:1;
    color: var(--control-color);
    font-size: calc(14px * var(--font-scale));
}

/*リンクエリア*/
.links-wrap
{
    width:85%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    margin: auto;
    background-color:#ece8de;
    padding:50px;
    border-radius: 50px;
    box-sizing:border-box;
    z-index:10;
        position: relative;
}
.links-wrap section
{
    padding:0;
}
.links-title-wrap
{
    display:flex;
    flex-decoration:column;
    justify-content:center;
    align-items:center;
    margin-bottom:30px;
}
.links-wrap h2
{
    text-align:center;
    color:var(--control-color);
    font-size:calc(18px * var(--font-scale));
    display:flex;
    margin: 0 auto;
    border-bottom: 3px solid var(--yellow);
}
.banner-slider {
    width: 100%;
}
.banner-slide {
  padding: 0 10px;
  box-sizing: border-box;
}
.banner-img-wrap {
    width: 100%;
    aspect-ratio: 5/3;
    overflow: hidden;
    display:flex;
    align-items:center;
}

/* 画像 */
.banner-img-wrap img {
    width: 100%;
    object-fit: cover;
    
    display: block;
}


/* =========================================================
   SPONSOR 共通
========================================================= */

/* セクション外枠 */
.sponsor-group {
    width: 900px;
    margin: 50px auto;
}

/* grid 本体（並びを制御するのはここだけ） */
.sponsor-list {
    display: grid;
    gap: 30px;
    /* background: #fff; ←削除 */
}


/* =========================================================
   各スポンサー枠（1マス）
========================================================= */

.sponsor-item {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}


.sponsor-item.is-empty {
    opacity: 0;            /* 見えなくする（枠は残る） */
    pointer-events: none;  /* クリック無効 */
}


/* =========================================================
   リンク
========================================================= */

.sponsor-item a {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 8%;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
}

/* =========================================================
   画像ロゴ
========================================================= */

.sponsor-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* =========================================================
   テキストロゴ
========================================================= */

.sponsor-text-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.sponsor-text-logo span {
    display: block;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    line-height: 1.2;
    width: 100%;
}

/* =========================================================
   グループ別レイアウト
========================================================= */

/* ---------- グループ1：最大（3列） ---------- */
.group-1 .sponsor-list {
    grid-template-columns: repeat(3, calc((100% - 60px) / 3));
}

.group-1 .sponsor-item {
    aspect-ratio: 300 / 180;
    font-size: clamp(20px, 2.5vw, 30px);
}

/* ---------- グループ2：大（4列） ---------- */
.group-2 .sponsor-list {
    grid-template-columns: repeat(4, calc((100% - 90px) / 4));
}

.group-2 .sponsor-item {
    aspect-ratio: 220 / 100;
    font-size: clamp(16px, 2vw, 22px);
}

/* ---------- グループ3：中（5列） ---------- */
.group-3 .sponsor-list {
    grid-template-columns: repeat(5, calc((100% - 120px) / 5));
}

.group-3 .sponsor-item {
    aspect-ratio: 180 / 80;
    font-size: clamp(14px, 1.8vw, 18px);
}

/* ---------- グループ4：小（5列） ---------- */
.group-4 .sponsor-list {
    grid-template-columns: repeat(5, calc((100% - 120px) / 5));
}

.group-4 .sponsor-item {
    aspect-ratio: 180 / 50;
    font-size: clamp(13px, 1.6vw, 16px);
}

/* =========================================================
   グループ5：社名のみ
========================================================= */

.group-5 .sponsor-name-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 24px;
    width: 100%;
    margin: 0 auto 60px;
    list-style: none;
    padding: 0;
}

.group-5 .sponsor-name-list li {
    text-align: left;
    padding-left: 20px;
    position: relative;
}
.group-5 .sponsor-name-list li:before
{
    content: "";
    position: absolute;
    display: block;
    width: 1.2rem;
    aspect-ratio: 1/1;
    background-color: #333;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.group-5 .sponsor-name-list a {
    text-decoration: none;
    color: inherit;
    line-height: 1.2;
}


/* =========================================================
   協賛企業グループ別表示なし(disply:none)
========================================================= */
.sponsor
{
    display:none;
}
.sponsor-group-all
{
    width: 100%;
    padding:20px;
    box-sizing:border-box;
    background-color:#fff;
    border-radius: 25px;
}
.sponsor-list-all
{
    width: 100%;
    margin: 0 auto;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, calc((100% - 80px) / 4));
}
.sponsor-list-all .sponsor-item
{
    aspect-ratio:216/71;
/*    border:3px solid #f1efeb;*/
    background-color:#f1efeb;
}

/*関連リンク*/
.relation-list
{
    width: 100%;
    margin: 0 auto;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, calc((100% - 80px) / 4));
}
.relation-item
{
    background-color: #fff;    
    display: flex;    
    justify-content: center;
    align-items: center;
    aspect-ratio: 213/71;
}
.relation-item a
{
    display: inline-flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    padding: 5%;
    box-sizing: border-box;
    text-decoration: none;
    color: #333;
}
.relation-item img
{
    object-fit: contain;
    aspect-ratio: 213/71;
}

/* =========================================================
   レスポンシブ（必要最低限）
========================================================= */

@media (max-width: 1024px) {
    .sponsor-group,
    .group-5 .sponsor-name-list {
        width: 90%;
    }
    .top
    {
        aspect-ratio: 1200 / 1000;
    }
    .fv-logo
    {
        margin-top: 50px;
    }
    .genre-buttons
    {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .group-1 .sponsor-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .group-2 .sponsor-list,
    .group-3 .sponsor-list,
    .group-4 .sponsor-list {
        grid-template-columns: repeat(3, 1fr);
    }
    .information, .links-wrap-bg
    {
        padding-bottom:130px;
    }
    .story-kochi > img
    {
        max-width:330px;
    }
}

@media (max-width: 480px) {
    .group-1 .sponsor-list,
    .group-2 .sponsor-list,
    .group-3 .sponsor-list,
    .group-4 .sponsor-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .group-5 .sponsor-name-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px){
    .top
   {
       aspect-ratio: 16 / 9;
       height: calc(100vh - 137px);
   }
   .fv-overwrap-track {
        animation: fvBgFlow 90s linear infinite;
    }
   .left-top
   {
       gap:20px;
   }
   .left-top-text
   {
        font-size: calc(24px * var(--font-scale));
        letter-spacing: 0.8rem;
        padding: 10px 30px;
   }
   .fv-logo
   {
        max-width:650px;
   }
   .count-bg
   {
        width:20vw;
        min-width: 400px;
        font-size: calc(1.5em * var(--font-scale));
        gap:20px;
   }
   #days-count .digit
   {
       width:1.4vw;
       font-size: calc(1.5em * var(--font-scale));
   }
   .midashi .count{
       padding-left: 7rem;
   }
   .scroll-indicator 
   {
           height: 10vw;
   }
   .scroll-text{
       font-size: calc(1em * var(--font-scale));
   }
   .sec-wrap
   {
        width:80%;
        max-width: none;
   }
   .about-photo-wrap
   {
       max-width:none;
       width: 48%;
       aspect-ratio: 3/1;
       
   }
   .about
   {
       padding: 100px 0;
   }
   .story-kochi
   {
/*        max-width:700px;*/
   }
   .story-text-wrap .more-btn-line
   {
       position: relative;
       max-width:none;
       aspect-ratio: 6/1
   }
   .story
   {
       padding: 100px 0 100px;
   }
   .story .sec-wrap>div
   {
       width:80%;
   }
   .story-kochi
   {
       bottom: -450px;
       width:40vw;
   }
   .story-text
   {
       margin-bottom: 20px;
   }
   .story-text p
    {
        line-height: 3;
            
    }
    .kochi
    {
        max-width:none;
        height:12/5;
    }
    .kochi-btn
    {
        padding: 100px;  
    }
    .sinnyouju-il
    {
        max-width: 200px;
        bottom: -95%;
    }
    .info-container
    {
        max-width:none;
        wisth:80%;
/*        padding:100px 0 0;*/
        box-sizing: border-box;
    }
    .information
    {
         padding: 100px 0 0; 
    }
     .links-wrap-bg
    {
        padding: 100px 0;
        box-sizing: border-box;
    }
    .links-wrap
    {
        width:80%;
        max-width: none;
        z-index: 2;
        position: relative;
    }
    
    .sponsor-group-all
    {
        padding: 50px;
    }
    
}