/* 基本設定 */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    padding: 0;
    color: #333;
    transition: background-color 0.8s ease;
    transition: background-color 1.5s ease; 
    background-color: #fff;
}

/* ローディング画面 */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000000;
    transition: opacity 1s ease, visibility 1s ease;

    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;

    transition: opacity 1s ease, visibility 1s ease;
}


@keyframes loadingFadeUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* JSで付与する非表示クラス */
.loading-screen.is-loaded {
    opacity: 0;
    visibility: hidden;
}

@media screen and (min-width: 769px) {

    .c-arrow-down {
        margin-left: 0;
        margin-right: auto;
    }

      .u-pc {
    display: block !important;
  }

  .u-sp {
    display: none !important;
  }

  /* Historyセクションのレイアウト */
  .horizontal-scroll-section {
    height: 600vh;
    position: relative;
  }
  /* 画面内に固定されるエリア */
  .sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  /* 横に並ぶコンテンツのコンテナ */
  .horizontal-items {
    padding: 0 10vw;
    will-change: transform;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    margin-top: 80px;
  }

  .horizontal-scroll-section .sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .history_list {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0;
  }
  .history_list:before {
    width: calc(100% - 1000px);
    height: 10px;
    background: #2b9179;
    top: 199px;
    left: 655px;
  }

  .history_event_main {
    margin: 0 140px 0 70px;
  }
  /*石光の始まりのみ*/
  .history_event_main.start{
    margin-right: 0;
  }

  .history_event_main.start::before{
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 10px;
    background-size: 16px 10px;
    background-image: linear-gradient(to right, #88ada4, #88ada4 10px, transparent 10px, transparent 18px);
    top: 199px;
    left: 110px;
    z-index: -1;
  }

  .history_event.btm {
    margin-top: 244px;
  }

  .history_event.top:before {
    bottom: -45px;
  }

  .history_event.btm:before {
    top: -50px;
  }

  .history_event.top .history_num {
    top: -40px;
  }

  .history_event.btm .history_num {
    bottom: -40px;
  }

  .history_event:before {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    background: #2b9179;
    border-radius: 50rem;
  }

  .history_btn button:hover:after {
    transform: rotate(0);
  }
  .history_event {
    margin-left: -100px;
  }
  .history_event.w250 {
    width: 250px;
  }
  .history_event.w300 {
    width: 300px;
  }
  .history_event.w350 {
    width: 350px;
  }
  .history_event.w450 {
    width: 450px;
  }
    .history_event.w560 {
    width: 760px;
  }
  .history_event.w500 {
    width: 500px;
  }
  .history_event.w350.top,
  .history_event.w450.top,
  .history_event.w560.top {
    margin-top: -33px;
  }
  .history_event.w500.top {
    margin-top: -62px;
  }

  .history_wbox:before {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    width: 32px;
    height: 28px;
    background: url(../img/history_tri.svg);
    background-size: 32px;
  }

  .history_wbox.v3 {
    padding: 40px 30px 36px;
  }

  .modal_bg {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.loading-content {
    width: 100%;
    height: 100%;
}
.loading-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.sp-only {
    display: none;
}


.no_pc {
    display: none;
}
.no_sp {
    display: block;
}
.nav_button {
    display: none;
}
.header_outer {
    box-sizing: border-box;
    z-index: 9999999;
    position: fixed;
    top: 0px;
    width: 100%;
    height: 80px;
    background: rgba(254,255,226,0.3);
    backdrop-filter: blur(10px); 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    padding: 0 20px
}
.header_logo {
    position: absolute;  
    top: -5px;  
    left: 40px; 
    width: 200px;
    height: 160px; 
    z-index: 100; 
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    flex-shrink: 0;
    margin-right: 15px
}


.header_inner {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 20px;
}

.header_logo::before {
    content: ""; 
    position: absolute;
    top: 0; 
    left: 50%;
    transform: translateX(-50%);
    width: 80%; 
    height: 100%; 
    background-color: #fff; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
    border-radius: 0 0 80px 80px;
    z-index: -1;  
    pointer-events: none;
}


.header_logo a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px; 
    box-sizing: border-box;
}
.header_logo img {
    width: auto; 
    height: 100%; 
    max-height: 120px;  
    object-fit: contain; 
    display: block;
}


.g-nav_list {
    display: flex;

}
.g-nav_item {
    position: relative;
    padding: 20px;
    display: block;
    font-size: 0.95rem;
    letter-spacing: 0.12rem;
}



.nav_area {
    flex: 1; 
  display: flex;
  align-items: center;
  line-height: 1.2;
  font-size: 14px; 
  overflow: hidden;
  justify-content: flex-end;
}

.nav_item {
  white-space: normal; 
  word-break: break-all;
  max-height: 70px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}


.catch, body, a.g-nav_link, .fixed-company-name, .sub_main_hl, .news_title, .deco-number {
    /* font-family: "Inter", "Avenir Next", "Segoe UI", "Arial", "Hiragino Kaku Gothic ProN", sans-serif; */
    font-family: "Montserrat", "Helvetica Neue", "Arial", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
    /* font-family: "DNP ShueiMinPr6N", "DNP 秀英明朝 Pr6N", serif; */
    font-weight: 800;
}
.description, .btn-detail, .detail-text, .btn-more, .message-txt .lead, .message-txt .name, .message-txt .text, .contact_btn, h3.top-message_item-title, .card-content, .comment-profile, a, .movie_soon span, .c-pager span, .message_sec01__area-txt .catch, .message_sec01__area-txt .position, .message_sec01__area-txt p.name, .message_sec01__txt p, .message_sec01__txt .catch {
    font-family: "Yu Gothic Medium", "YuGothic", "Yu Gothic", "Hiragino Sans", "Meiryo", sans-serif;
}

.comment_section {
    margin: 80px 0;
}
.section_inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 40px;
}
.w_bg {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 20px;
}
.l_inner {
    max-width: 1040px;
    margin: 0 auto;
}

.section {
    padding: 100px 0;
    min-height: 30vh;
}

/* 芽のギミック */
.illustration-container {
    position: fixed;
    bottom: -30px;
    right: 30px;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center; 
    justify-content: flex-end; 
    gap: 10px; 
    pointer-events: none;
    z-index: 9999;
}

.illustration-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none; /* 下線を消す */
    pointer-events: auto;  /* 重要：containerがnoneでもリンクは反応させる */
}


.illustration-container {
    /* 既存の pointer-events: none; はそのままでOK（リンク以外を透過させるため） */
    pointer-events: none; 
}

.illustration-link:hover #illustration-img {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}


.fixed-company-name {
    writing-mode: horizontal-tb; 
    font-size: 1.1rem;
    color: #2B9179;
    font-weight: bold;
    white-space: nowrap; 
    letter-spacing: 0.05em;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

#illustration-img {
    width: auto; 
    max-width: 120px;
    height: auto;
    max-height: 100%; 
    
    transition: all 0.4s ease-in-out;
    opacity: 1;
}
#illustration-img.fade-out {
    opacity: 0; 
}

.fade-out {
    opacity: 0;
    transform: translateY(10px);
}


/* 共通 */
 .c-hover  {
    transition: all 1.0s ease;
}

.c-hover:hover  {
    opacity: 0.3;
    transition: all 0.8s ease;
}
/* メインビジュアル */
.mv {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* justify-content: flex-end; */
}

.mv-content {
    flex: 1;
    color: #ffffff;
    position: relative;

}

.mv-catch {
    display: inline-block;
    font-size: 3.8rem;
    line-height: 1.8;
    letter-spacing: 0.2rem;
    position: relative;
    z-index: 1;
    left: 50%;
    top: -80px;
    transform: translateX(-50%);
    font-weight: bold;

}

.mv-catch span {
    display: block;
    width: fit-content; 
    border-bottom: 1px solid #fff; 
    margin-bottom: 20px; 
}

/* ロゴ用スペース */
.mv-logo-space {
    position: absolute; 
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%); 
    width: 50%;
    opacity: 0.25;

}
.mv-logo-space img {
    width: 100%; 
    height: 100%;
}

/* 右側50%のグラデーション背景 */
.mv-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to top right, #0089FF, #FFFDD5);
    z-index: -1;
}

.mv-image-container {
    position: relative;
    left: 0;
    width: 60%; /* PC時の元の幅 */
    height: 550px; /* 元の高さ */
    z-index: 0;
    overflow: hidden;

}
.mv-image-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    
    /* ぼやっと消えるアニメーションの設定 */
    opacity: 0;
    transition: opacity 2.0s ease-in-out; /* 2秒かけて切り替え */
}
.mv-image-item.is-active {
    opacity: 1;
}


/* 左側60%の画像枠 */
/* .mv-image-frame {
    width: 60%;
    height: 550px;
    background-color: #e0e0e0; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    background: url(../img/top/mv_img.jpg) no-repeat top center / cover;
    object-fit: cover;
} */

/* テキストスタイル */
.grid-item {
    display: flex;
    flex-direction: row-reverse; 
}
.flex-item {
    display: flex;
    align-items: center;
    justify-content: center;
}
.section-title {
    font-size: 3.5rem;
    letter-spacing: 0.1em;
    line-height: 4rem;
    margin-bottom: 40px;
    text-align: center;
    background: linear-gradient(
    to right,
    #2B9179 0%,
    #108635 25%, 
    #1F2022 100%
    );
    -webkit-background-clip: text;
  background-clip: text;
    color: transparent;
    font-weight: 800;
}

.section-title.sub {
    position: relative; 
    display: inline-block;
    margin-top: 100px;
    font-size: 2.5rem;
    text-align: center;
}
.section.history {
    margin-top: -100px;
}
.section.history .section-title,
.section.topics .section-title {
    text-align: left;
    position: relative;
    margin-top: 100px;
    font-weight: 800;
}
.section.history .section-title::before,
.section.topics .section-title::before{
    content: "";
    position: absolute;
    top: -100px;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    background-image: url(../img/kounotori.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.section.history .section-title::before {
    left: 10%;
}
.section.topics .section-title::before {
    left: 16%;
}


.catch {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 30px;
    writing-mode: vertical-rl;
}


.history-skip-btn {
    position: sticky;
    top: 90vh; /* 画面下部に配置 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 50px;
    
    background: rgba(43, 145, 121, 0.9); /* セクションタイトルの色に合わせた緑系 */
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    
    transition: all 0.3s ease;
    pointer-events: auto;
}

.history-skip-btn:hover {
    background: #108635;
    transform: translateX(-50%) translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.history-skip-btn::after {
    content: "↓";
    margin-left: 10px;
}



/* Newsのレイアウト */



.news {
    background-color: #fff;
    width: 100%;
    height: auto;
    padding: 80px 0;
    display: block;
    /* display: flex;
    align-items: center;
    overflow: hidden; */
}
.news_container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}
.news_title {
    font-size: 2.8rem;
    text-align: left;
    margin: 0;
}


.news_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: #333;
    width: 100%;
    transition: opacity 0.3s ease;
}

.news_item:hover {
    opacity: 0.6;
}

.news_left {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 80px;
}

.news_right_btn {
    align-self: flex-end; 
    margin-top: 10px;
}
.news_right_btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 56px;
    background: #086231;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
}
.news_right_btn a::after {
    content: "";
    width: 8px;
    height: 13px;
    background: url(../img/cmn/c-arr_w.svg) no-repeat center / contain !important;
    margin-left: 15px;
}
.news_right_btn a:hover {
    background: #108635; /* 少し明るい緑に */
    opacity: 1; /* c-hoverの透過を打ち消す場合 */

}

.news_right_btn a:hover::after {
    transform: translateX(5px); /* 矢印が右に動く */
}




.news_content {
    display: flex;
    align-items: center;
    gap: 30px; 
}

.news_date {
    font-size: 0.95rem;
    color: #888;
    line-height: 1;
}

.news_text {
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* font-size: 1rem;
    font-weight: 500;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden; */
}


.top_news_item {
    width: calc(33.333% - 14px);
    height: auto !important;
}


.top_news_item a {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px;
    text-decoration: none;

}

.news_img {
    width: 100%; 
    height: 200px; 
    overflow: hidden;
    background-color: #eee;
    margin-bottom: 15px;

}

.news_img img, 
.news_img .attachment-medium {
    width: 636px !important;
    height: 100% !important;
    object-fit: cover;
}

.news_txt_area {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news_right {
    flex-shrink: 0; 
    margin-left: 20px;

}
.news_right a {
    color: #fff;
    font-weight: bold;
    width: 100%;
    display: block;
    height: 100%;
    background: #086231;
    padding: 24px 70px;
    box-sizing: border-box;
    position: relative;
}
.news_right a:after {
    content: "";
    position: absolute;
    display: block;
    right: 30px;
    top: 0;
    bottom: 0;
    width: 8px;
    height: 13px;
    background: url(../img/cmn/c-arr_w.svg) no-repeat !important;
    margin: auto;
}
/* Slickのコンテナ */

.top_news {
    display: block;
    margin: 0 -15px;
}
.top_news_item {
    padding: 0 15px; 
    height: auto !important;
    display: block !important; 
}
.top_news_item a {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
}


.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

/* Anniversaryセクションのレイアウト */

.bnr_movie {
    width: 100%;
    height: auto;
    margin-top: 40px;
}
.text-content {
    flex: 1;
}

.image-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.gray-box {
    background-color: #eee;
    width: 100%;
    height: 450px;
}

.anniversary {
    position: relative;
    z-index: 2; 
    background: linear-gradient(180deg, 
        #33A1F7 0%, 
        #95D8B4 40%, 
        #FFFDD5 70%, 
        rgba(255, 253, 213, 0) 100% 
    );
    /* padding-bottom: 200px; 透明部分を作るための余白 */
}
.movie {
    display: flex;
    justify-content: center;
}
.movie_area {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px;
    background: rgba(254, 255, 226, 0.3);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-sizing: border-box;
/* 

    height: 512px;
    background-color: #cccccc;
    display: flex;
    justify-content: center;
    align-items: center; */
}
.movie_frame {
    position: relative;
    width: 100%;
    /* padding-top: 56.25%; */
    aspect-ratio: 16 / 9; 
    background-color: #efefef;
    border-radius: 10px;
    overflow: hidden;
}

.movie_frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}


.movie_soon {
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../img/top/movie_area.jpg'); 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
}

.movie_soon span {
    font-size: 2rem;
    letter-spacing: 0.1rem;
    color: rgba(159, 221, 255, 0.5);
}


.top-message {
    width: 100%;
    height: auto;
    background-color: #cccccc;
    display: flex;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}
.top-message_area {
    width: 100%;
    height: auto;
    padding: 40px;

}
.message-img {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.message-txt {
    display: block;
    text-align: left;
    margin-top: 30px;
}
.message-txt .lead {
    font-size: 2.2rem;
}
.message-txt .name {
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.message-txt .name span {
    font-size: 0.9rem;
} 
.message-txt .text, .description, .message_sec01__txt p {
    text-align: justify;
}
.comment-page .message_sec01__txt .original p {
    text-align: left;
}

.message-txt .text {
    margin-bottom: 40px;
}

/* .top-message_director {
    margin-top: 80px;
} */
.top-message_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 40px 30px;
}
.top-message_item-img {
    position: relative; 
    line-height: 0; 
    overflow: hidden;
}

.top-message_item-img::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(
        to top,
        rgba(4, 12, 18, 1) 0%,
        rgba(4, 12, 18, 0) 80%
    );
    pointer-events: none;
}

.top-message_item-img img {
    width: 100%;
    height: auto;
    display: block;
}
.top-message_item-link {
    position: relative;
    display: block;
    overflow: hidden;
}

.top-message_item-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    padding: 30px 20px;
    box-sizing: border-box;
    z-index: 2;
    color: #fff;
    text-align: left;
}

.top-message_item-info .btn-arrow {
    background-color: #EDF29D;
}
.top-message_item-info .btn-arrow::after {
    background-color: #54565A;
}
.top-message_item-info .btn-arrow::before {
    border-top: 1.5px solid #54565A;
    border-right: 1.5px solid #54565A
}



.top-message_item-position {
    font-size: 1rem;
}

.top-message_item-title {
    font-size: 1.8rem;
    /* font-family: "dnp-shuei-mincho-pr6n", serif; */
}

/* ボタンを右下に寄せる */
.top-message_item-info .btn-container {
    text-align: right;
    width: 100%;
    margin-top: -42px;
}

.btn-arrow {
  display: inline-block;
  width: 53px;
  height: 18px;
  background-color: #54565A;
  position: relative;
  vertical-align: middle;
  border-radius: 20px;
}


.btn-arrow::after {
  content: "";
  position: absolute;
  top: 46%;
  right: 12px;
  transform: translateY(-25%);
  width: 25px; 
  height: 1.1px;
  background-color: #fff;
  display: block;
}

.btn-arrow::before {
  content: "";
  position: absolute;
  top: 61.4%;
  right: 13px;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: right center; 
  width: 5px;
  height: 5px;
  border-top: 1.5px solid #fff;
  border-right: 1.5px solid #fff;
  z-index: 1;
}

.btn-container {
    text-align: right;
    width: 100%;
    /* margin-top: 30px; */
}

.movie_area, .top-message, .quiz_area-bg {
    background: rgba(254,255,226,0.3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px); 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
}
.top-message {
    background: #fff;
    /* background: rgba(254,255,226,0.8); */
}
.top-comment {
    position: relative;
    z-index: 1; /* ANNIVERSARYの下に潜り込む */
    /* margin-top: -200px; 
    padding-top: 250px;  */
    text-align: center;
}

/* Historyセクションのレイアウト */
.horizontal-scroll-section {
    height: 600vh;
    position: relative;
}

.horizontal-scroll-section .sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    

   background: linear-gradient(to right, #FEFFE2 20%, #96dcaf 50%, #47c8ff 100%);
   background-size: 300% 100%; 
   background-position: 0% 50%;
   
   transition: background-position 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}




    


/* 画面内に固定されるエリア */
.sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden; 
}
/* 横に並ぶコンテンツのコンテナ */
.horizontal-items {
    display: flex;
    /* padding: 0 10vw;
    will-change: transform;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    margin-top: 80px; */
}

.horizontal-item {
    box-sizing: border-box;
    width: 80vw;
    flex-shrink: 0;
    padding: 40px;
    background: rgba(255,255,255,0.1);
    border: 1px solid #ccc;
    margin-right: 50px;
}

/* スクロールインジケーター */
.scroll-indicator {
    margin-top: 50px;
}
.scroll-indicator .line {
    width: 200px;
    height: 2px;
    background: rgba(0, 0, 0, 0.1);
    margin-top: 15px;
    position: relative;
    overflow: hidden;
}
.scroll-indicator .line::after {
    content: '';
    position: absolute;
    left: 0;
    width: 40px;
    height: 100%;
    background: #000;
    animation: scroll-move 3s infinite ease-in-out;
}
/* スクロールアニメーションの定義 */
@keyframes scroll-move {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(500%);
  }
}

/* ヒストリー部分 */
.history_list:before {
  position: absolute;
  content: "";
  display: block;
}

.history_event_main {
  position: relative;
  width: 350px;
  z-index: 2;
}

.history_event {
  position: relative;
  align-items: flex-start;
}

.history_wbox {
  position: relative;
  background: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 40px 30px 30px;
}

.history_event.btm .history_wbox {
  padding: 30px 30px 40px;
}

.history_event.top .history_wbox:before {
  bottom: -24px;
}

.history_event.btm .history_wbox:before {
  top: -24px;
  transform: rotate(180deg);
}
.history_num_main {
  position: absolute;
  text-align: center;
  top: -30px;
  left: 0;
  right: 0;
  margin: auto;
  color: #fff;
  font-size: 100px;
  text-shadow: 1px 1px 20px black;
  line-height: 1;
  font-weight: bold;
}
/*石光の始まりのみ*/
.start .history_num_main {
  font-size: 1.5rem;
  line-height: 1.25;
  text-shadow: none;
  color: #333333;
  top: 0;
}

.history_num {
  position: absolute;
  display: block;
  color: #2b9179;
  font-weight: bold;
  font-size: 40px;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

.history_img {
  border-radius: 50rem;
  overflow: hidden;
  margin-bottom: 10px;
  margin-top: 25px;
}
/*石光の始まりのみ*/
.start .history_img{
    width: 70%;
    margin: auto;
    margin-top: 65px;
}

.history_ttl {
  text-align: center;
  font-size: 20px;
  line-height: 1.7;
  margin-bottom: 10px;
  font-weight: bold;
}

.history_tx {
  line-height: 1.7;
}

.history_main_ttl {
  font-size: 30px;
  font-weight: bold;
}

.history_btn button {
  position: relative;
  display: block;
  padding: 30px 60px 30px 0;
  font-size: 20px;
  cursor: pointer;
  font-weight: bold;
  color: #086231;
}
/*石光の始まりのみ*/
.start .history_btn button{
    margin: auto;
}

.history_btn button:before,
.history_btn button:after {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  bottom: 0;
  margin: auto;
}

.history_btn button:before {
  border: solid 1px #000;
  border-radius: 50rem;
  right: 0;
  width: 44px;
  height: 44px;
}

.history_btn button:after {
  right: 15px;
  width: 15px;
  height: 15px;
  background: url(../img/history_btn.svg);
  background-size: 15px;
  transform: rotate(45deg);
  transition: 0.3s;
}

/* モーダル部分 */
.modal_list_item {
  display: none;
  position: fixed;
  z-index: 12;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7);
}

.modal_bg {
  position: fixed;
  border: none;
  border-radius: 8px;
  padding: 50px;
  width: 80%;
  max-width: 1000px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.modal_ttl {
  font-size: 32px;
  margin-bottom: 20px;
}

.modal_tx {
    ext-align: justify;
}
.modal_tx::after {
    content: "";
    display: block;
    clear: both;
}

.modal_tx img {
    width: 40%;
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;

}
.modal-close {
  cursor: pointer;
  background: #000;
  color: #fff;
  display: block;
  padding: 10px 30px;
  margin: 40px auto 0;
  border-radius: 50rem;
}

/* モーダル部分（石光の始まり） */
#modal_start .modal_bg{
  height: 65%;
  overflow-y: scroll;
}
#modal_1906 .modal_bg,
#modal_1922 .modal_bg,
#modal_1951 .modal_bg,
#modal_1963 .modal_bg,
#modal_1972 .modal_bg,
#modal_1980 .modal_bg,
#modal_1995 .modal_bg,
#modal_2004 .modal_bg {
  height: 65%;
  overflow-y: scroll;
}

/* アニメーションの初期状態 */
.fade-item {
  opacity: 0;
  transform: translateY(60px) scale(0.9);
  transition:
    opacity 0.6s ease-out,
    transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, opacity;
}

.fade-item.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}



.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 100px;
    margin-right: 300px;
    flex-shrink: 0;
    height: fit-content;
}

.detail-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 400px;
    flex-shrink: 0;
}
.detail-year {
    font-size: 1.2rem;
    color: #2B9179;
    margin-bottom: 5px;
}
.detail-sub {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.4;
}

.detail-text {
    font-size: 1rem;
    color: #666;
}

.detail-item + .detail-item {
    border-top: 1px solid #54565A;
    margin-top: 20px; 
    padding-top: 20px; 
}
.detail-item:last-child {
    padding-bottom: 0;
}

/* 小さな画像スロット */
.detail-images {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.small-placeholder {
    width: 100px;
    height: 70px;
    background: #eee;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* スクロールアニメーションの定義 */
@keyframes scroll-move {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(500%); }
}


.image-placeholder {
    width: 700px;
    height: 512px;
    background-color: #cccccc;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 20px 20px 40px rgba(0,0,0,0.1);
}

.image-placeholder span {
    color: #666;
    font-weight: bold;
}

.detail-images {
    display: flex;
    gap: 10px;
    margin-top: 15px; 
}

/* 小さい画像枠自体のスタイル */
.small-placeholder {
    flex: 1;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.small-placeholder span {
    font-size: 0.7rem;
    color: #888;
    letter-spacing: 0.1em;
}
.detail-group.all-top {
    align-self: flex-start;   
}

/* テキストエリアの幅固定 */
.info-group {
    width: 450px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.btn-detail {
    display: inline-block;
    width: 270px;
    height: 48px;
    background-image: url('../img/cmn/btn_bf.png'); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-decoration: none;
    transition: background-image 0.3s ease;
    margin-top: 15px;
    line-height: 3.1rem;
    font-size: 1.2rem;
}
/* ホバー時の画像切り替え */
.btn-detail:hover {
    background-image: url('../img/cmn/btn_af.png');
        height: 50px;
}

.year-label {
    font-size: 5rem;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.1);
    display: block;
    line-height: 1;
    margin-bottom: 10px;
}
.sub-title_top {
        font-size: 1.8rem;
        font-weight: bold;
}
.sub-title {
    font-size: 2.1rem;
    font-weight: bold;
    line-height: normal;
}
.description {
    font-size: 1.1rem;
    line-height: 1.8;
    margin: 40px 0;
}
section.message .description {
    text-align: center;
}

.dash {
    letter-spacing:  -0.24rem;
    padding-right: 6px;
}
.center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.center img {
    margin-bottom: 20px;
}

/* Topicsセクションのレイアウト */

.topics .section_inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 auto;
}
.topics_title-area {
    width: 30%;
    position: sticky; 
    top: 150px;
    text-align: left;
}

.topics_title-area .section-title,
.topics_title-area .sub-title {
    display: block;
    text-align: left;
    margin-left: 0;
}
.topics_list {
    width: 50%;
    margin-left: auto;
    flex-wrap: wrap;
    gap: 60px 20px;
}

.topics_item {
    width: calc(50% - 10px);
    max-width: 520px;
    margin-top: 100px;
}

.topics_item {
    width: 520px;
    list-style: none;
    /* font-family: "dnp-shuei-mincho-pr6n", serif; */
}


.topics_item-deco {
    display: flex;
    align-items: center;
    justify-content:间-between; 
    margin-bottom: 10px;
}

.deco-line {
    flex-grow: 1; 
    height: 1px;
    background-color: #54565A;
    margin-right: 15px;
}

.deco-number {
    font-size: 18px;
    font-weight: bold;
    color: #54565A;
    line-height: 1;
}


.topics_item-image {
    width: 520px;
    height: 203px;
    overflow: hidden;
    background-color: #eee; 
}

.topics_item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}


.topics_item-content {
    margin-top: 20px;
}

.topics_item-title {
    font-size: 20px;
    color: #1F2022; 
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 1.5rem;
}

.topics_item-text {
    font-size: 15px;
    color: #333;
    line-height: 1.8; 
    text-align: left; 
}


/* Quizセクションのレイアウト */

.quiz .card { 
    background:#FFFDD5; 
    padding: 30px 20px; 
    border-radius: 8px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    position: relative; 
    min-height: 400px; 
}

.quiz .result-header { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    margin-bottom: 5px; 
}

.quiz .q-label { 
    background-color: #EDF29D; 
    padding: 8px 12px; 
    border-radius: 8px; 
    font-weight: bold; 
    font-size: 1.1em; 
}
#judgement { 
    color: #2B9179; 
    font-weight: bold; 
    font-size: 1.8em; 
}

.quiz .re-question { 
    color: #878a8f; 
    font-size: 0.85em; 
    margin-bottom: 20px; 
    line-height: 1.4; 
}


/* 右下の進捗表示 */
.quiz .progress { 
    position: absolute;
    bottom: 15px;
    right: 20px;
    color: #666; 
    font-size: 0.9em; 
}

.quiz h2 { 
    margin-top: 10px; 
}

.quiz .btn-container { 
    display: flex; 
    gap: 10px; 
    argin-top: 20px; 
}

.quiz button { 
    flex: 1; 
    padding: 0; 
    font-size: 3.5em; 
    cursor: pointer; 
    border: none; 
    border-radius: 5px; 
    transition: 0.3s; 
    background-color: #FFF;
}
.quiz .btn-maru,
.quiz .btn-batsu {
    border: 2px solid #54565A;

}
.quiz .btn-maru { 
    border-color: #2B9179; 
    color: #2B9179;

}
.quiz .btn-batsu { 
    border-color: #54565A; 
    color: #54565A;;

}

.quiz .result-area { 
    margin-top: 20px; 
    padding-top: 15px; 
    border-top: 2px solid #eee; 
}

/* 解説画面のレイアウト（横並び） */
.quiz .explanation-container {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}
.quiz .explanation-main { flex: 1; }

/* 解説画像（比率 4:5） */
.quiz .explanation-body { 
    overflow: hidden; 
    margin-top: 40px; 
}
.quiz .explanation-image {
    float: right;
    width: 250px; /* 縦長4:5比率用 */
    aspect-ratio: 3.5 / 5;
    object-fit: cover;
    margin-left: 15px;
    margin-bottom: 10px;
    border-radius: 4px;
    background-color: #eee;
}

.quiz .your-answer { 
    font-weight: bold; 
    margin-bottom: 10px; 
}

/* 解説ラベルの装飾 */
.quiz .answer-label {
    display: inline-block;
    background-color: #EDF29D;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 0.9em;
}
#explanation-text { 
    font-size: 1em;
    }

.quiz .btn-next {
    background-color: transparent;
    color: #2B9179;
    border: 2px solid #2B9179;
    width: 40%;
    padding: 12px;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 25px;
    transition: 0.3s;
}
.quiz .btn-next:hover { 
    background-color: rgba(43, 145, 121, 0.1); 
}
.quiz .onemore {
    border: none;
    border-bottom: 2px solid #2B9179;
    border-radius: 0;

}

/* 右下の進捗表示 */
.quiz .progress { 
    position: absolute; 
    bottom: 10px; 
    right: 15px; 
    color: #999; 
    font-size: 0.8em;
    }


#question-text { 
    margin-top: 40px; 
    font-size: 1.3em; 
}
.quiz .btn-container { 
    display: flex; 
    gap: 10px; 
    margin-top: 30px; 
}
.quiz .correct, .quiz .wrong {  
    font-weight: bold; 
}
.quiz .hidden { 
    display: none; 
}
.quiz .quiz-bold { 
    font-weight: bold; 
}

.quiz .score {
    color: #2B9179;
    font-weight: bold;
}

.final-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.final-screen h3 {
font-size: 1.7rem;
color: #3c3e42;
}

/* Commentセクションのレイアウト */
.comment_top-message {
        margin-top: 40px;
}
.comment .section-title {
    margin-top: 100px;
}
h2 .small {
    font-size: 2.5rem;
}
.large {
    font-weight: bold;
    color: #086231;
}

.comment-img {
    max-width: 1200px;
    height: auto;
}

.comment-item {
    list-style: none;
    position: relative;
    padding: 20px 0; /* 上下の余白 */
    /* font-family: "dnp-shuei-mincho-pr6n", serif; */
}

/* 1pxの下線 */
.comment .btn-container {
    text-align: right;
    width: 100%;
    margin-top: 30px;

}



.comment .history-skip-btn::after {
    content: "→";
    margin-left: 10px;

}
.comment .history-skip-btn {
    background: #086231;
    content: "→";
}


.comment .top-message{
    margin-top: 40px;
}

.comment-list {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 40px;
    margin-top: 80px;
}
.comment-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #54565A; 
}

.comment-inner {
    /* display: flex; */
    justify-content: space-between; 
    align-items: flex-end; 
}

.comment-profile {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comment-company {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.comment-name {
    font-size: 22px;
    font-weight: bold;
    color: #1F2022;
    margin: 0;
}

.comment-name span {
    font-size: 16px;
    font-weight: normal;
    margin-left: 8px;
}



/* Messageセクションのレイアウト */
.message {
    position: relative;
    background-color: #E3FEFF;
    background-blend-mode: multiply;
    background-image: url('../img/top/message_bg.jpg'); 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.message .section_inner {
    text-align: center;
}

.new_list {
    margin-bottom: 40px;
}

.new_link {
    grid-gap: 2px;
    display: grid;
    position: relative;
    position: relative;
    grid-template-rows: auto 1fr;
    grid-template-columns: 110px auto;
    padding: 15px 20px;
    padding-right: 20px;
    border-bottom: 2px solid #086231;
    background-color: #fff;
    color: #1A1A1A;
}
.new_date {
    display: block;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    font-family: "Montserrat", sans-serif;
    text-align: left;
}

.new_cat-outer {
    display: flex;
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}
.new_title {
    grid-row: 2 / 3;
    grid-column: 1 / 3;
    text-align: left;
}

.new_link:after {
    content: "";
    transition: all 0.3s ease;
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border-top: 1px solid #086231;
    border-right: 1px solid #086231;
    transform: rotate(45deg);
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
}

.new_cat {
    box-sizing: border-box;
    display: block;
    width: 100px;
    height: 20px;
    background-color: #086231;
    color: #F4F4F4;
    font-size: 12px;
    line-height: 20px;
    text-align: center;

    animation: pulse-border 2s infinite;
}
@keyframes pulse-border {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(8, 98, 49, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 6px rgba(8, 98, 49, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(8, 98, 49, 0);
    }
}




/* Quizのセクションのレイアウト */
.quiz_area {
  display: block;
  width: 100%;
  position: relative;
}

.quiz_left, .quiz_right {
  display: grid;
  gap: 15px;
}
.quiz_left { grid-template-rows: 2fr 1fr; }
.quiz_right { grid-template-rows: repeat(3, 1fr); }

.quiz_area-bg {
    width: 100%;
    height: auto; 
    padding: 40px;
}

.quiz_left {
  display: grid;
  grid-template-rows: auto auto;
  /* grid-template-rows: 2fr 1fr;  */
  gap: 15px;
}


.quiz_right {
  display: grid;
  /* grid-template-rows: repeat(3, 1fr);  */
  grid-template-rows: auto auto auto;
  gap: 15px;
}

/* 共通のデザイン */
.question {
    font-size: 1.3rem;
    /* display: flex;  */
    align-items: flex-start; 
    /* justify-content: center;  */
    text-align: left;          
    width: 100%; 
    line-height: normal;


}
.question::before {
  display: inline-block;
  font-size: 1.1em;
  font-weight: bold;
  margin-right: 10px;
  flex-shrink: 0;
}

/* 各番号の指定 */
.q1 .question::before { content: "Q1."; }
.q2 .question::before { content: "Q2."; }
.q3 .question::before { content: "Q3."; }
.q4 .question::before { content: "Q4."; }
.q5 .question::before { content: "Q5."; }

.q-item {
  background-color: #FFFDD5;
  padding: 30px;
  border: 1px solid #dcdca0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* justify-content: center; */
  text-align: left;
  position: relative;
  transition: all 0.4s ease; 
  cursor: pointer;
  /* overflow: hidden; */
  border-radius: 10px;
  min-height: 150px;
}

.q-item:hover {
    background-color: #EDF29D;
}
/* 回答は初期状態では非表示 */
.answer {
  display: none;
  margin-top: 20px;
  font-size: 1.2rem;
  color: #333;
  text-align: justify;
}

.q-btn {
  width: 78px;
  height: 67px;
  background-color: #EDF29D;
  border-radius: 10px 0 10px 0;
  position: absolute;
  right: 0px;
  bottom: 0px;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.q-btn-plus {
  font-size: 30px;
  font-weight: bold;
  color: #54565A;
  transition: transform 0.4s;
  display: inline-block;
}

.quiz-bold {
    border-bottom: 2px solid #2B9179;
    font-weight: 600;
    color: #2B9179;
    font-size: 1.2rem;
}

/* --- 💥クリックして広がった時の状態 --- */
.q-item.is-active {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 100; 
  cursor: default;
  background-color:#EDF29D;
}

.q-item.is-active .answer {
  display: block; 
}

.q-item.is-active .q-btn {
  background-color: #FFFDD5;
  bottom: auto; 
  top: 15px;
  right: 15px;
  border-radius: 10px;
    align-items: center;
    justify-content: center;
}
.q-item.is-active .q-btn-plus {
  transform: rotate(45deg);
}

.q-item.is-active .q-content {
  padding-top: 60px; 
}

.quiz {
    background-image: url(../img/top/quiz_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.quiz .section-title, .quiz .message-txt {
    color: #fff;
}  
.quiz .section-title {
    margin-bottom: 20px;
    text-shadow: 2px 2px 3px #888888;
}

.quiz .message-txt .lead {
    text-shadow: 2px 2px 3px #888888;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 40px;
}

/* Contactのセクション */
.contact {
    /* background-image: url(../img/top/contact_bg.jpg); */
    background-color: #fdfdfd;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.contact-area {
    display: block;
    align-items: center;
}
.contact_btn {
    background-color: #FFFFFF;
    border: 1px solid #1F2022;
    width: 300px;
    text-align: center;
    padding: 15px;
    display: block;
    transition: all 0.3s ease-in-out;
    margin: 0 0 95px 0;
}
/* フッター */
footer {
    padding: 20px 0;
    text-align: center;
    background: #F5F5F5;
    color: #086231;
    height: auto;
    width: 100%;
    /* border-top: 1px solid #707070; */
}

.footer_logo {
    width: 360px;
    height: auto;
    padding: 40px 0 0;
    margin: 0 auto;
}

.footer.section_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* 右側のグループ（ボタン + ロゴ3つ） */
.footer_contact-group {
    display: flex;
    align-items: center;
    gap: 30px;
}
.footer_companies {
    display: flex;
    flex-direction: column;
    align-items: center; 
    /* width: 100%; */
    background: #fff;

}

.bg_w{
    display: block;
    /* width: 100%; */
    background: #fff;
    padding: 40px;
    margin: 0 20px;
    border-radius: 20px;
}

/* 3社のロゴエリア */
.footer_sub-companies {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer_sub-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
}

.footer_sub-logo {
    width: 50px; 
    height: auto;
    margin-bottom: 5px;
    display: flex;
    gap: 40px;
}
.footer_main_items .footer_sub-logo {
    width: 140px;
}

.footer_main_items {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 40px;
}
.footer_sub_items {
    display: flex;
    justify-content: center;
    width: 100%;
}
.footer_sub-logo img {
    width: 100%;
    height: auto;
}
.footer_sub_items .footer_sub-logo{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center; 
    align-items: center;
    gap: 40px;
    width: auto; 
}
.footer_sub_items .footer_sub-logo img {
    width: 130px; 
    height: auto;
}



/* 
        NEWSのページ 
                        */
.sub_main {
    position: relative;
    height: 350px;
    background-size: cover !important;
    background-position: center !important;
    /* display: flex; */
    justify-content: center;
    
}

.sub_main--news {
    background: url(../img/news/mv_bg.jpg);

}
.sub_main_hl {
    /* position: relative; */
    z-index: 1;
    padding-top: 140px; 
    font-size: 50px;
    color: #1F2022;
    /* text-align: center; */
    margin: 0;
    line-height: normal;
}

.sub_main_hl, .sub_main p {
    color: #fff;
    text-shadow: 2px 2px 3px #888888;
}

.sub_main_txt {
    font-size: 25px;
}

.list-group {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 20px;
    list-style: none;
    padding: 0;
    margin: 80px 0;
}
.list-item a {
    text-decoration: none;
    color: #333;
    display: flex;
    flex-direction: column;
}
.list-img {
    width: 100%;
    aspect-ratio: 16 / 10; 
    overflow: hidden;
    background-color: #eee;
    margin-bottom: 15px;
}

.list-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.news_right_btn a, .news_right_btn a:hover, .list-img img, .news_img, .news_right_btn a::after {
    transition: transform 0.3s ease;
    /* transition: all 0.8s ease; */
}


.list-item a:hover, .list-img img, .top_news_item a:hover, .news_img {
    transform: scale(1.05);
}

.list-date {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 5px;
}

.list-ttl {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.5;
    /* タイトルが長すぎても2行で省略 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.c-pager {
    text-align: center;
    margin-top: 30px;
}


.c-pager .previouspostslink {
    margin-right: 50px;
}
.c-pager .previouspostslink, .c-pager .nextpostslink {
    position: relative;
}

.c-pager a, .c-pager span {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border: solid 1px #086231;
    margin: 10px;
    vertical-align: middle;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    color: #086231;
}

.c-pager span {
    background: #086231;
    color: #fff;
}
.c-pager .previouspostslink:after, .c-pager .nextpostslink:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: block;
    width: 8px;
    height: 14px;
    background-size: 8px !important;
    background: url(../img/cmn/c-arr.svg) no-repeat;
}
.c-pager .previouspostslink:after {
    transform: rotate(180deg);
}

.c-pd {
    padding-bottom: 80px;
}

/* 
        NEWS-singleのページ 
                        */

.single-paging {
    display: flex;
    justify-content: center;
    width: 100%;
    height: auto;
    margin: 100px 0 100px 0;
}

.single-paging_button a {
    box-sizing: border-box;
    display: block;
    position: relative;
    width: 40px;
    height: 40px;
    margin: 0 4px;
    background-color: #086231;
    color: #fff;
    line-height: 42px;
    text-align: center;
}
.single-paging_button-all {
    box-sizing: border-box;
    display: block;
    width: 120px;
    height: 40px;
    margin: 0 4px;
    background-color: #086231;;
    color: #fff;
    line-height: 42px;
    text-align: center;
}

.single-paging_arrow-right:after, .single-paging_arrow-left:after {
    display: inline-block;
    position: absolute;
    top: 15px;
    left: 13px;
    width: 9px;
    height: 9px;
    transform: rotate(45deg);
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    content: "";
}
.single-paging_arrow-right:after {
    left: 17px;
    transform: rotate(-135deg);
}

/* 
        TopMessageのページ 
                        */

.sec_label {
    display: flex;
    align-items: center;
    gap: 10px;
}
.message_sec02 {
    padding: 80px 0;
}
.message_sec02 .sec_label {
    margin-bottom: 20px;
}

.sec_label_img {
    width: auto;
    height: 30px; 
    object-fit: contain;
}

.sec_label_txt {
    color: #2B9179; 
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.sec_ttl {
    font-size: 3rem;
    color: #1F2022;
    margin: 0 0 20px 0;  
    text-align: left; 
}


.message-page .top_bg {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, #FFFDD5 0%, #adeaca 40%, #b7e8fd 70%, rgba(255, 253, 213, 0) 100%);
}                       

/* --- アニメーションの共通設定 --- */
.message_sec01,
.message_sec02,
.message_sec03 {
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.2s ease;
}
.message_sec01,
.message_sec02:nth-of-type(even) {
    transform: translateX(-50px);
}

.message_sec02:nth-of-type(odd),
.message_sec03 {
    transform: translateX(50px);
}

/* --- JSでクラスが付与された時の状態 --- */
.message_sec01.is-visible,
.message_sec02.is-visible, 
.message_sec03.is-visible {
    opacity: 1;
    transform: translateX(0);
}


.message_sec01 {
    padding: 80px 0;
}

.sec_label_top {
    display: grid;
    align-items: flex-start;
    grid-template-columns: 1fr 50%;
    gap: 0 4%;
    max-width: 1040px;
    margin-bottom: 40px;
    place-items: center;
}


.message_sec01__area-img {
    width: 100%;
    object-fit: cover;
    /* background-color: #efefef; */
    position: relative;
}

.message_sec01__area-img::before {
  content: "";
  display: block;
  position: absolute;
  top: 10px; 
  left: 10px; 
  width: 100%;
  height: 100%; 
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  background: linear-gradient(
    to top right,
    #E0D83E, 
    #20B967,
    #3CC3FF  
  );
  z-index: -1;
}

.message-page .catch, .comment-page .catch, .topics-page .catch, .topics-single-page .catch{
    writing-mode: lr;
    color: #2B9179;
    font-weight: 600;

}
.sec_label_top .name {
    font-size: 1.8rem;
}
.sec_label_top .name .annotation {
    font-size: 0.9rem;
    margin-left: 10px;
}

.message_sec01__txt .catch {
    margin-top: 40px;
} 

.message_sec01__txt p + p {
    margin-top: 20px;
}
.message_sec01__area-txt .catch {
    /* border-bottom: 1px solid #333; */
    /* padding-bottom: 15px; */
    line-height: 3.5rem;

}
.position {
    font-weight: 600;
}

/* 
        Commentのページ 
                        */

.comment-page .comment_section .comment-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 30px;
} 
.comment-page .comment_section .comment-name {
    font-size: 13px;
    letter-spacing: -0.02rem;
}
.comment-page .comment_section .btn-arrow {
    width: 18px;
}

.comment-page .comment_section .comment-inner {
    position: relative;
}

.comment-page .comment_section .btn-arrow::before {
    right: 11px;
    transform: translateY(-50%) rotate(135deg);
}
.comment-page .comment_section .btn-arrow::after {
    background: none;

}
.comment-page .comment_section .comment-item {
    position: relative;
}
.comment-page .comment_section .btn-container {
    text-align: right;
    width: 100%;
    margin-top: 30px;
    position: absolute;
    bottom: 0px;
}
.comment_bg {
    background-color: transparent !important;
}
.comment-page .sec_label_top {
    grid-template-columns: 1fr 60%;
    place-items: normal;
}

/* Commentページのタイトルと名前の再編集 */
.comment-page .message_sec01__area-txt {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 30px;
    gap: 20px;
    flex-wrap: wrap;
}

.comment-page .message_sec01__area-txt .catch {
    margin: 0;
    line-height: 1.2;
    flex-shrink: 0; 
}
.comment-page .name-group {
    /* text-align: right; */
}

.comment-page .name-group p {
    margin: 0;
    line-height: 1.4;
    font-weight: 600;
}

.left-content-wrapper {
        display: block;
        overflow: hidden; 
        max-width: 1040px;
        margin: 0 auto;
    }
.left-block {
        float: left;
        width: 35%; 
        margin-right: 40px; 
        margin-bottom: 70px; 
    }
.comment-page .message-img {
        width: 100%;
        margin-bottom: 15px;
    }

.comment-page .message-img img {
        width: 100%;
        height: auto;
    }
.message_sec01__txt.original {
        display: block; /* grid-itemとしての挙動を解除 */
        font-size: 1.1rem;
        line-height: 1.8;
    }
.message_sec01__txt.translater {
        clear: both; /* 回り込みを終了させる */
        padding-top: 40px;
    } 
    
/* Commentページのタイトルと名前の再編集 追加ここまで */



.comment-page .message_sec01__area-img::before {
    display: none;
}
.translater {
    border-top: 1px solid #54565A;
    padding-top: 40px;
}
.original {
    text-align: left;
    padding-bottom: 40px;
}

 .comment-page .message_sec02 {
    padding: 40px 0;
 }

.comment-page .message_sec01__area-img-sub, .topics-single-page .message_sec01__area-img-sub {
    display: flex;
    justify-content: center;  
    gap: 20px; 
    margin-top: 20px;

 }
 .comment-page .message_sec01__area-img-sub img {
    /* max-width: 45%;  */
    height: auto; 
    object-fit: cover; 
}
 .comment-page .sec_label_top .name {
    font-size: 1.2rem;
 }

/* 
        Topicsのページ 第２階層
                        */
     
             
.topics-list_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 40px 30px; 
    list-style: none;
    padding: 0;
    margin: 0;
}
.topics-list_item {
    background-color: #FEFFE2;
    width: 100%;
    height: auto;
    text-align: center;
    padding: 20px;
    border-radius: 20px;
}

.topics-list_item .catch {
    font-size: 1.5rem;
    color: #1F2022;
    margin: 10px 0;
}
.topics-list_item .img {
    width: 100%;
    aspect-ratio: 19 / 12;
    overflow: hidden;
    background-color: #eee;
    margin-bottom: 20px;

}
.topics-list_item .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.topics-list_item .txt {
    text-align: left;
}

.topics-page .btn-container {
    margin-top: 20px;
}
.topics-single-page .font-bold {
    font-weight: bold;

}
.topics-single-page .flex img,
.topics-single-page .flex2 img {
    width: 220px;
    height: 220px;
    padding: 20px 20px 0 0;
}
.topics-single-page .flex {
    display: flex;
}
.topics-single-page .flex2 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.topics-single-page .w_bg {
    padding-bottom: 40px;
}
.topics-single-page .sub_catch {
    margin-bottom: 0;
}
.message_sec02_sub {
    padding: 80px 0 20px
}
.topics-single-page .message_sec01__area-img {
    margin: 20px 0;
}

.topics-single-page .btn-container {
    border-bottom: 1px solid #000;
}
.topics-single-page .btn-container {
    margin-top: 0;
}

.topics-single-page .message_sec02_sub{
    padding: 80px 0 0;
}
.topics-page .message_sec02_sub {
    padding: 80px 0 40px
}



.links-wrapper {
    display: flex;
    gap: 20px; 
    margin-top: 40px;
    flex-wrap: wrap; 
}
.links-wrapper_topics01 {
    margin-top: 0;
    width: max-content;
    gap: 0;
}
.links-wrapper_topics01 .recruit-link {
    border: none;
    padding: 15px 10px;
}

.recruit-link {
    display: flex;
    align-items: center; 
    justify-content: space-between; 
    flex: 1; 
    min-width: 280px; 
    padding: 15px 20px;
    /* border-bottom: 1px solid #000;  */
    text-decoration: none;
    color: #333;
    transition: opacity 0.3s;
}

.recruit-link img {
    width: 200%;
    height: auto;
}

.link-label {
    font-weight: 600;
    font-size: 1.2rem;
}

.topics-single-page .btn-container {
    margin-top: 0 !important;
    width: auto !important;
    border-bottom: none !important; 
}

.recruit-link .btn-arrow {
    vertical-align: middle;
}

.topics-single-page .big {
    font-size: 1.5rem;
}



.topics-single-text_list + .topics-single-text_list{
    padding-top: 40px;
}

.topics-single-text_list h3, .topics-single-text_list h3 .no-line {
    width: 100%;
    border-bottom: 1px solid #000;
    font-size: 1.5rem;
    padding-top: 20px;
}
.topics-single-text_list h3.no-line {
    border-bottom:none;
}

.topics-single-text_list p {
    padding-top: 20px;
}

.annotation-box {
    margin-top: 30px;
    padding: 15px;
    font-size: 0.85rem;
    color: #666;
}

/* TOPICS グリーン焙煎 リストのデザイン調整 */
.design-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}
.design-list li {
    position: relative;
    padding-left: 1.5em;
    line-height: 1.8;
    margin-bottom: 12px;
    text-align: justify;
}
.design-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 8px;
    height: 8px;
    background-color: #2B9179;
    border-radius: 50%;
}

/* 矢印専用のコンテナ */
.step-flow-container {
    position: relative;
    padding-left: 50px; 
    /* margin-top: 40px; */
}

.step-flow-container::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50px; 
    bottom: 20px; 
    width: 25px;
    background-color: #2B9179; 
    z-index: 1;
}

.step-flow-container::after {
    content: "";
    position: absolute;
    left: -14px; 
    bottom: 0; 
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 20px solid #2B9179; 
    z-index: 2;
}
.step-flow-container .message_sec02 {
    padding: 30px 0 !important;
    position: relative;
}


/* TOPICS グリーン焙煎 リストのデザイン調整 追記ここまで*/
.l_under {
    border-bottom: 1px solid #086231;
    color: #086231;
}
.link_name {
    font-size: 1.1rem;
    display: flex; 
    align-items: center; 
    gap: 10px; 
    margin-top: 20px;
}
.link_name::before {
    content: "";
    display: inline-block;
    width: 30px;   
    height: 30px; 
    background-image: url("../img/cmn/sec_ttl_bf.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* グリーン焙煎　小野工場 */
.topics-single-text_list.message_sec03{
    box-sizing: border-box;
    margin-top: 120px;
    padding: 20px;
    border-radius: 10px;
    background-color: #ddf1ec;
    text-align: center;
}

.topics-single-text_list.message_sec03 h3{
    margin-top: -50px;
    padding: 10px 20px;
    background-color: #086231;
    border-radius: 50px;
    border: none;
    color: #ffffff;
    font-weight: bold;
}
.topics-single-text_list.message_sec03 .message_sec01__area-img::before{
    display: none;
}


/* 個別記事の  */

.post_head {
    display: flex;
}
.post_title {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #086231;
    font-size: 30px;
}
.post_text p {
    margin-top: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.7;
    /* font-family: "Noto Sans JP", sans-serif; */
    text-align: left;
}

.post_text p + p {
    margin-top: 20px;
}

.post_text a {
    color: #086231;
    border-bottom: 1px solid  #086231;
    padding-bottom: 3px;
    font-weight: bold;
    
}

.c-arrow-down {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 35px 30px 0 30px; 
    border-color: #086231 transparent transparent transparent; 
    margin: 40px auto;
}


/* 地域別売上高テーブル設定 */
.sales-table-container {
    margin-top: 40px;
    width: 100%;
    max-width: 800px; 
    margin-left: auto;
    margin-right: auto;
}

.sales-table-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.sales-table-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.sales-table-unit {
    font-size: 0.95rem;
    color: #666;
}

.sales-custom-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

.sales-custom-table td {
    padding: 15px;
    border: 1px solid #c8e7e9;
    text-align: center;
    font-weight: bold;
}

/* .sales-custom-table td:last-child {
    border-right: none;
} */

.cell-primary {
    background-color: #288887; 
    color: #fff;
    font-weight: bold;
    width: 30%;
}

.cell-primary td {
    font-weight: bold;
}

.sales-custom-table tr:first-child td:nth-child(2),
.sales-custom-table tr:first-child td:nth-child(3) {
    background-color: #c8e7e9; 
    color: #333;
    font-weight: bold;
}

.sales-custom-table tr:first-child td:nth-child(3) {
    position: relative;
    z-index: 1;
    border-left: 2px solid #288887;
}

.sales-custom-table tr:first-child td:nth-child(2) {
    border-right: none; 
}








@media screen and (max-width: 768px) {
    
    .sp-only {
        display: block !important;
    }
    .pc-only {
        display: none !important;
    }
    

    /*. top-history_img.pngのための設定 */
    .horizontal-image-container {
        height: auto;
    }
    .horizontal-image-container img {
        height: auto;
        width: 100%; /* スマホでは横幅いっぱいにフィットさせる（必要に応じて） */
    }

    .loading-screen {
        height: 100vh;
        width: 100%;
    }


    .header_outer {
        background: rgba(254, 255, 250, 0.6);
        padding: 0;
    }
    .mv {
        display: block;
        width: 100%;
        height: 100vh;
    }
    .mv-bg {
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(0, 137, 255, 0.5), rgba(255, 253, 213, 0.5));
        z-index: 1;
    }

    .mv-image-container {
        width: 100%;
        height: 100vh;
        top: 0;
    }

    .mv-image-item img{
        height: 100%;
        object-fit: cover;
    }

    .mv-content {
        margin-left: 0;
        z-index: 10;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 30%
    }

    .mv-catch {
        font-size: 3rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        line-height: 1.6;
        left: 0;
        transform: none;
    }

    .mv-catch span {
        margin: 0 auto 15px;
        width: fit-content;
        border-bottom: 2px solid #fff;
    }

    .mv-logo-space {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;

    }

    .mv-logo-space img {
        height: 330px;
        height: auto;
        transform: none;
    }

    .illustration-container {
        right: 15px;
        bottom: -20px;
    }
    .fixed-company-name {
        font-size: 1.1rem;
    }

    .no_pc {
     display: block;
    }
    .no_sp {
    display: none;
    }
    .header_logo, .footer_logo { width: 250px; } 
    .topics_item, .topics_item-image, .image-placeholder { 
        width: 100% !important; 
        height: auto; 
    }

    .header_outer {
        height: 70px;
    }

    .header_inner {
        padding: 0 15px; 
        position: relative;
    }

    .header_logo {
        width: 120px;
        height: 70px; 
        left: 5px;     
    }
    .header_logo::before {
        width: 90%;
        height: 100px;
        border-radius: 0 0 70px 70px;
    }

    .header_logo a {
        padding: 10px;
    }

    .header_logo img {
        margin-top: 30px;
        height: 150%;
    }
    .nav_area {
        position: absolute;
        right: 0;
        top: 0;
        width: 70px;
        height: 70px;
         display: block;
    }
    .nav_button {
        display: flex !important; 
        position: absolute;
        top: 0;
        right: 0;
        width: 70px;
        height: 70px;
        background-color: #086231;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: none;
        z-index: 10000;
    }
    .nav_bar {
        display: block;
        width: 30px;
        height: 2px;
        background-color: #fff;
        margin: 3px 0;
        transition: all 0.3s;
    }
   .nav_button.is-active .nav_bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .nav_button.is-active .nav_bar:nth-child(2) {
        opacity: 0;
    }
    .nav_button.is-active .nav_bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    .g-nav {
        position: fixed;
        top: 0;
        right: -100%; /* 初期状態は隠す */
        width: 100%;
        height: 110vh;
        background: #fff;
        transition: 0.5s;
        z-index: 9999;
    }
    /* メニューが開いた時 */
    .g-nav.is-active {
        right: 0;
    }

    .g-nav_list {
        flex-direction: column; 
        align-items: center;
    }

    .g-nav_item {
        padding: 26px 0;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #eee;
    }

    /* 3. オーバーレイ（背景を暗くする） */
    .nav_overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 9999998;
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s;
    }

    .nav_overlay.is-active {
        opacity: 1;
        visibility: visible;
    }
    

    /*メニューここまで*/


    /* footer */
    .footer.section_inner {
        flex-direction: column;
        gap: 30px;
    }

    .footer_contact-group {
        flex-direction: column;
        width: 100%;
    }
    

    .footer_sub-companies {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap; 
        gap: 20px;
    }

    .footer_sub-link {
        width: calc(33.333% - 15px); 
    }

    .footer_sub-name {
        font-size: 0.8rem;
        transform: scale(0.9);
        display: block !important;
    }

    .topics .section_inner {
        flex-direction: column;
        align-items: center;
    }
    .topics_title-area, .topics_list {
        width: 100%;
        text-align: center;
    }
    .topics_title-area {
        position: static;
        margin-bottom: 50px;
    }
    .topics_title-area .section-title,
    .topics_title-area .sub-title {
        text-align: center;
    }

    .section_inner {
        padding: 0 20px;
    }

    /* Newsのレイアウト */

    .sub_main {
        height: 270px; 
    }
    .news_right_btn {
        width: 100%;
        align-self: center;
        /* margin-left: 0;
        margin-top: 20px;
        padding: 0 20px; 
        box-sizing: border-box; */
    }

    .news_right_btn a {
        /* width: 100%; */
        height: 50px;
        font-size: 0.9rem;
    }
    
    .news_container {
        padding-bottom: 40px;
    }


    .sub_main_hl {
        padding-top: 100px; 
        font-size: 30px;

    }
    .sub_main_txt {
    font-size: 1rem;
    }

    .sub_main_hl::before {
        width: 100px;
        height: 100px;
        top: 95px;
    }

    .news {
        height: auto;
        /* padding: 40px 0; */
        background: #fff;
    }
    .news .section_inner {
        padding: 0 20px;
    }


    .news_img {
        width: 350px;
        height: 200px;
        flex-shrink: 0;
    }

    .news_img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

    .news_txt_area {
        /* flex: 1;  */
        width: 100%;
        padding: 0 5px;
    }
    .news_date {
        font-size: 0.8rem;
        color: #888;
    }

    .top_news_item {
        padding: 0;
    }
    
    .top_news_item a {
        gap: 15px;
        flex-direction: column !important;
        align-items: center;
    }

    .news_left {
        display: block; 
        width: 100%;
    }

    .news_content {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .news_title {
        font-size: 1.8rem;
        margin-bottom: 20px;
        text-align: left;
    }

    .news_text {
        font-size: 0.95rem;
        font-weight: bold;
        line-height: 1.4;
        margin-top: 5px;
        /* 2行以上は省略（必要に応じて） */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }


    .top_news {
        flex-direction: column;
        gap: 30px;
            /* width: 100%; 
            margin-bottom: 30px; */
        }

    .top_news_item {

        }
     .top_news_item:last-child {
        border-bottom: none;
    }
    .top_news_item a {
        display: flex !important;
        align-items: center;
        gap: 15px;
        text-decoration: none;
    }

    .news_text {
        width: 100%;
        white-space: normal;
        -webkit-line-clamp: 2;
    }
    .news_right {
        width: 100%;
        margin-top: 20px;

    }
 
    .news_right a {
        width: 100%;
        padding: 15px;
        background: #086231;
        color: #fff;
        text-align: center;
        display: block;
        border-radius: 5px;
        box-sizing: border-box;
    }
    .news_right a:after {
        right: 20px;
    }


    /* Anniversary */
    .anniversary {
        position: relative;
        z-index: 2;
        background: linear-gradient(180deg, #66bdff 0%, #95D8B4 40%, #FFFDD5 70%, rgba(255, 253, 213, 0) 100%);
        }

    .movie_area {
        width: 100%;
        padding: 20px; 
    }

    .movie_soon {
        height: 200px;
    }

    .section {
        padding: 80px 0;
    }
    .top-message_area {
        padding: 20px;
    }
    .section-title {
        font-size: 2.1rem;
    }
    .comment .section-title {
        font-size: 1.7rem;
    }
    h2 .small {
        font-size: 1.5rem;
        letter-spacing: 0.1rem;
    }
    .topics_item-title {
        font-size: 1.2rem;
    }
    .comment .sub-title {
        font-size: 1.5rem;
    }

    .section-title.sub {
       font-size: 1.5rem;
       margin-top: 40px;
    }

    .message {
        background-attachment: local; 
    }
    .message-txt .lead {
        font-size: 1.5rem;
    }
    .message-txt .name {
        font-size: 1.2rem;
        margin-bottom: 20px;
    }
    .sec_label_top .name {
        font-size: 1.4rem;
    }
    .message-txt .text {
        font-size: 1rem;
    }
    .btn-more {
        font-size: 0.9rem;
    }

  
    .message-img {
        background-color: aliceblue;
        height: auto;
        width: 100%; 
        overflow: hidden; 
        margin: 0; 
    }

    .message-img img {
        width: 100%; 
        height: 100%;
        object-fit: cover; 
        object-position: center top; 
    }
     .topic01_message-img img {
        height: auto;
    }

    .top-message_list {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px 10px;
    }

    /* Historyのセクション */



  .u-sp {
        display: block !important;
    }
  .horizontal-scroll-section .sticky-wrapper {
    background: linear-gradient(
      to right,
      #fefef0 20%,
      #aeecc4 50%,
      #73d5ff 100%
    );
    background-size: 300% 100%;
    background-position: 0% 50%;

    transition: background-position 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    width: fit-content;
  }

  .scroll-indicator span {
    letter-spacing: 0.2em;
    font-size: 0.8rem;
    margin-bottom: 10px;
  }

  .scroll-indicator .line {
    width: 2px;
    height: 100px;
    background: rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
  }

  .scroll-indicator .line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: #000;
    animation: scroll-move-y 3s infinite ease-in-out;
  }

  /* 縦移動のアニメーション定義 */
  @keyframes scroll-move-y {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(250%);
    }
  }

  .history_list {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
  }

  .history_event_main {
    width: 100%;
    position: relative;
    z-index: 2;
    margin-top: 30px;
  }

  .history_event {
    width: 100%;
  }

  .history_wbox {
    padding: 40px 20px 20px;
  }

  .history_num_main {
    top: -30px;
    font-size: 80px;
  }

  .history_num {
    top: -35px;
    font-size: 38px;
  }

  .history_img {
    margin-top: 5px;
  }

  .history_ttl {
    text-align: center;
    font-size: 20px;
    line-height: 1.7;
    margin-bottom: 10px;
  }

  .history_tx {
    line-height: 1.7;
  }

  .history_main_ttl {
    font-size: 24px;
  }

  .history_event.btm .history_wbox {
    padding: 30px 20px 20px;
  }

  /* モーダル部分 */

  .modal_bg {
    top: 120px;
    right: 0;
    left: 0;
    margin: auto;
    padding: 30px;
  }
  .modal_ttl {
    line-height: 1.5;
    font-size: 28px;
    margin-bottom: 10px;
  }

  .modal-close {
    padding: 10px 30px;
    margin: 30px auto 0;
  }

  /* アニメーションの初期状態 */
  .fade-item {
    opacity: 0;
    transform: translateY(60px) scale(0.9);
    flex-shrink: 0;
    transition:
      opacity 0.4s ease-out,
      transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .fade-item.is-visible {
    transition-delay: 0.05s;
  }

    .history-skip-btn {
        width: 180px;
        height: 44px;
        font-size: 0.8rem;
        top: 85vh;
        position: sticky;
        left: 50%;
    }

    .section.history .section-title, .section.topics .section-title {
        text-align: center;
    }
    .info-group {
        align-items: center;
        margin-bottom: 40px;
        position: relative;
    }
    /* --- scroll-indicator を縦向きに変更 --- */

    .scroll-indicator {
        display: flex;
        flex-direction: column;
        align-items: center; 
        margin-top: 30px;
        width: fit-content;
    }

    .scroll-indicator span {
        letter-spacing: 0.2em;
        font-size: 0.8rem;
        margin-bottom: 10px;
    }

    .scroll-indicator .line {
        width: 2px; 
        height: 100px; 
        background: rgba(0, 0, 0, 0.1);
        position: relative;
        overflow: hidden;
    }

    .scroll-indicator .line::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 40px;
        background: #000;
        animation: scroll-move-y 3s infinite ease-in-out;
    }

    /* 縦移動のアニメーション定義 */
    @keyframes scroll-move-y {
        0% { transform: translateY(-100%); }
        100% { transform: translateY(250%); } 
    }
    .description {
        margin: 40px 0 10px;
    }
    .btn-detail {
        margin-top: 0;
        height: 40px;
        font-size: 0.99rem;
        line-height: 2.9rem;
        padding-left: 40%;
        background-position: right;
        position: absolute;
        right: 33%;
        bottom: -20%;
    }

    .section.history .section-title::before, .section.topics .section-title::before {
        content: "";
        position: absolute;
        top: -100px;
        left: 50%; 
        transform: translateX(-50%); 
        width: 120px;
        height: 120px;
        background-image: url(../img/kounotori.png);
        background-size: contain;
        background-repeat: no-repeat;
    }

    .section-before {
        height: 120px;
        width: 120px;
        margin: 0 auto;
    }


    /* Topicsのセクション */
    .topics_item {
        margin-top: 40px;
    }

    /* Commentのセクション  */
    .comment .section-title {
        margin-top: 40px;
    }
    
    .comment-list {
        grid-template-columns: repeat(1, 1fr);
    }
    .comment-name {
        font-size: 1.2rem;
    }

    /* Quizのセクション */


    .quiz_area-bg {
        padding: 20px;
    }
    .quiz_area {
        display: flex;
        flex-direction: column;
        height: auto; 
        gap: 10px;
    }


    .quiz_left, 
    .quiz_right {
        display: contents; 
    }

    /* 各アイテムの基本設定 */
    .q-item {
        width: 100%;
        min-height: 120px;
        height: auto !important;
        padding: 40px 20px;
    }

    /* Q1だけは少し高さを出しても良い（お好みで） */
    .q-item.q1 {
        min-height: 160px;
    }

    .q-item.is-active {
        position: fixed;
        top: 0;
        left: 0;
        width: 100% !important;
        /* height: 105vh !important; */
        z-index: 9999;
        padding: 80px 20px; 
        overflow-y: auto;
    }
    .q-btn {
        width: 48px;
        height: 47px;
    }
    .q-btn-plus {
        font-size: 25px;
    }



     /* 横スクロールを縦並びに戻す（スマホでは横スクロールは操作しづらいため） */
    .horizontal-scroll-section {
        height: auto !important;
    }
    .sticky-wrapper {
        position: relative !important;
        height: auto !important;
        overflow: visible !important;
    }
    .horizontal-items {
        flex-direction: column;
        transform: none !important;
        padding: 40px 20px;
    }
    .timeline-item {
        flex-direction: column;
        gap: 40px;
        margin-right: 0;
        margin-bottom: 80px;
        width: 100%;
    }
    .image-placeholder, .info-group, .detail-group {
        width: 100% !important;
    }
    .detail-group + .detail-group {
        border-top: 1px solid #54565A;
        padding-top: 40px;
    }
    .detail-group.all-top {
        width: 100% !important;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* NEWSのページ */
    .list-group {
        grid-template-columns: repeat(2, 1fr);
    }
    .c-pager a, .c-pager span {
        width: 35px;
        height: 35px;
        line-height: 35px;
        margin: 2px;
    }
    .c-pager .previouspostslink {
        margin-right: 10px;
    }
    .c-pd {
        padding-bottom: 80px;
    }




    /* 
        TopMessageのページ 
                        */

    .sec_ttl {
        font-size: 2rem;
        margin: 0;
    }
    .sec_label_top {
        grid-template-columns: 1fr;
        margin-bottom: 40px;
        place-items: none;
    }
    .message_sec01,
    .message_sec02 {
        transform: translateY(60px) !important;
    }
    .message_sec01.is-visible,
    .message_sec02.is-visible {
        transform: translateY(0) !important;
    }

    .message-page .message_sec01 {
        padding: 80px 0;
     }
    .message_sec01 {
        padding: 80px 20px;
     }
    .message_sec01__area-img {
        margin: 20px 0;
        margin-bottom: 0;
        position: relative;
        overflow: visible !important;
    }
    .message_sec01__area-txt h2.catch {
        padding-top: 20px;
        font-size: 1.5rem;
    }
    .message_sec01__txt h2.catch {
        font-size: 1.5rem;
    }
    .message_sec02 .sec_label {
        margin-bottom: 0;
    }
    .sec_label h2.catch  {
        font-size: 1.5rem;
    }
    .message_sec01__area-txt .catch {
        line-height: 3rem;
    }
    .message_sec01__area-txt {
        font-size: 1.2rem;

    }
     .message_sec01__area-txt .position {
        font-size: 1.1rem;
        
     }

    /* 
        Commentのページ 
                        */
    
    .comment-page .sec_label_top {
        display: block;
    }
    .w_bg {
        width: 90%;
    }
    .comment-page .message_sec01__area-txt .position {
        /* font-size: 0.9rem; */
        font-size: 1.2rem;
    }
    .comment-page .sec_label_top .name {
        /* font-size: 1.2rem; */
        font-size: 0.9rem;
    }
    .comment .history-skip-btn {
        transform: translateX(-35%); 
    }

    .left-block {
        float: none;
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }

    /* 
        Topicsのページ 第２階層
                        */

    .topics-list_grid {
        grid-template-columns: repeat(1, 1fr); 
    }

    .topics-list_flex {
        grid-template-columns: 1fr; 
        gap: 30px 0;
    }  
    
        .links-wrapper {
        flex-direction: column; 
    }
    .recruit-link {
        flex: none;
        width: 100%;
    }
    .link-label {
        font-size: 1rem;
    }
    .topic01_message-img {
        height: 100%;
    }

    .link_name {
        display: block;
    }

    .topics-single-text_list + .topics-single-text_list{
        padding-top: 40px;
    }

    .topics-single-text_list.message_sec03{
        margin-top: 40px;
        text-align: justify;

    }

    .topics-single-text_list.message_sec03 h3{
        padding: 20px;
        font-size: 1rem;
        line-height: 1.5;
    }



    .new_title {
        padding-right: 20px;
    }
    .topics-single-page .message_sec01__area-img-sub {
        flex-direction: column;
        width: auto;
    }

    .topics-single-page .flex,  .topics-single-page .flex2 {
        display: block;
        text-align: center;
    }
    .topics-single-text_list p {
        text-align: start;
    }

    /* QUIZ */
    .quiz .message-txt .lead {
    font-size: 1.1rem;
    }

    .quiz .explanation-body {
        display: flex;
        flex-direction: column;
    }
    .quiz .explanation-image {
        margin: 0 auto;
    }
    .quiz .answer-label {
        text-align: center;
        margin-top: 40px;
    }
    .quiz .btn-next {
        width: 90%;
    }

    .modal_tx img {
        float: none;
        width: 100%;
        margin-right: 0;
    }

    .comment-page .message_sec01__area-img-sub {
        flex-direction: column;

    }

    .comment-page .comment_section .comment-list {
        grid-template-columns: repeat(1, 1fr);
    } 

    .c-arrow-down {
        margin-left: auto;
        margin-right: auto;
    }

    section.message .description {
    text-align: start;
    }

    .footer_sub_items {
        padding: 0 10px;
    }
    .bg_w {
        display: ruby;
        padding: 20px;
    }

    .footer_sub_items .footer_sub-logo {
        gap: 20px;
        grid-template-columns: repeat(2, 1fr);
    }

    /* 地域別売上高テーブル設定 */
    .sales-table-title {
        font-size: 1.2rem;
    }
    .sales-custom-table td {
        padding: 10px 5px;
        font-size: 0.9rem;
    }

    .link_name::before {
    width: 25px;   
    height: 20px; 
    }

    /* TOPICS グリーン焙煎 リストのデザイン調整 */

    .step-flow-container {
            /* padding-left: 25px; */
        }
    .step-flow-container::before {
            /* left: 10px; */
        }
        .step-flow-container::after {
            left: -12px;
        }
        .step-flow-container .message_sec02::before {
            left: -19px;
            width: 10px;
            height: 10px;
        }


    /* TOPICS グリーン焙煎 リストのデザイン調整 ここまで*/

    .bnr_movie {
        width: 100%;
    }
}