/* =========================================
   共通・基本設定
   ========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img, object, embed, video {
	max-width: 100%;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* スティッキーフッターの基盤 */
    color: #333;
    font-size: 0.85rem;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: #333;
}

/* コンテンツ幅管理 */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* =========================================
   メインコンテンツ (スティッキーフッター用)
   ========================================= */
main.content {
    flex: 1; /* 余白を埋める */
    padding: 3rem 0;
}

/* =========================================
   ヘッダー共通スタイル
   ========================================= */
.header {
    width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    /* ▼▼▼ 追加：ヘッダーを上部に固定 ▼▼▼ */
    /* position: sticky; */
    top: 0;
    z-index: 1000; /* コンテンツより常に上に表示 */
    padding-top: 5px;
    /* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */
}

/* ヘッダー上段 */
.header-top {
    border-bottom: 1px solid #eee;
    background-color: #fff; /* 固定時に透けないよう背景色を指定 */
}

.header-top-inner {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo a {
    font-size: 1.5rem;
    font-weight: bold;
    color: #000;
}

/* 外部ヘッダー右寄せ */
.other {
    margin-left: auto; /* 左側の余白を自動で最大にする＝右に寄る */
    font-size: 80%;
}

/* ヘッダー下段 */
.header-bottom {
    background-color: #ce1538;
    position: relative;
}

/* 矢印アイコン */
.arrow {
    display: inline-block;
    font-size: 0.8em;
    margin-left: 6px;
    transition: transform 0.3s;
}

/* 開閉時の矢印回転 */
.has-submenu.active > a .arrow {
    transform: rotate(180deg);
}

/* -----------------------------------
   トピックスベーススタイル（リストの装飾リセットなど）
----------------------------------- */
.contents-ti {
    margin-bottom: 12px;
    text-align: center;
    font-size: 130%;
    margin-top: 50px;
}
.news-list {
    list-style: none;
    padding: 0;
    border-top: 1px solid #e0e0e0; /* リストの一番上の線 */
    margin-bottom: 31px;
}

.news-item {
    border-bottom: 1px solid #e0e0e0; /* 各項目の区切り線 */
    padding: 16px 12px;
    line-height: 5px;
}

.news-title a {
    text-decoration: none;
    color: #333;
    display: block; /* クリックできる範囲を広げる */
    line-height: 1.6;
}

.news-title a:hover {
  text-decoration: underline; /* ホバー時に下線を引く */
  color: #0056b3;
}
.past-news {
    margin-top: 12px;
    text-align: right;
}


/* =========================================
   スマホ用スタイル (768px以下)
   ========================================= */
@media (max-width: 768px) {
	
	/* スマホでは「PC用」を隠す */
    .pc-only {
                display: none;
    }
/* スマホでは「スマホ用」を表示する */
    .sp-only {
                display: block;
    }

.header-bottom {
    position: fixed;
    /* ヘッダー全体の高さ（上段60px + 下段の高さ）に合わせて調整 */
        /* 下段の高さが不明な場合は、header-topだけ固定するか、
           以下のように top を設定します */
    top: 60px;
    right: -100%;
    width: 100%;
    /* 画面全体の高さから、見えているヘッダー（header-top）分を引く */
    height: calc(100vh - 60px);
    background-color: #fff;
    transition: right 0.3s ease;
    overflow-y: auto;
    }
	
/* 外部フッター中央揃え */
.other {
    font-size: 100%;
    margin-top: 30px;
    text-align: center;
}
	
.container .about-kikulon {
}
    /* --- ドロワーメニュー設定 --- */
    .header-bottom {
        position: fixed;
        top: 60px; /* header-topの高さ */
        right: -100%; /* 画面外へ */
        width: 100%;
        height: calc(100vh - 60px);
        transition: right 0.3s ease;
        overflow-y: auto;
        border-top: 1px solid #eee;
        box-shadow: inset 5px 0 5px rgba(0,0,0,0.05);
    }
    
    .header-bottom.active {
        right: 0; /* 画面内へ */
    }

    /* --- メニューリスト --- */
    .menu-list {
        flex-direction: column;
        justify-content: flex-start; /* 上詰め */
    }

    .menu-item {
        position: relative; /* スマホでは通常配置 */
        width: 100%;
		background-color: #ce1639;
    }

    .menu-item > a {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #FFFFFF;
    }

    .header-top {
        border-bottom: none; /* スマホ時はメニュー境界線を変えるため削除 */
    }

    /* --- サブメニュー（アコーディオン） --- */
    .submenu {
        /* PCのアニメーション設定をリセット */
        position: static;
        width: 100%;
        box-shadow: none;
        border-top: none;
        max-height: none;
        opacity: 1;
        visibility: visible;
        
        display: none; /* JS操作のため非表示スタート */
        background-color: #fafafa;
    }
    
    /* インナーコンテナのリセット */
    .submenu-inner {
        display: block;
        padding: 0;
        width: 100%;
    }
    
    .submenu li {
        width: 100%;
    }

    .submenu li a {
        padding: 15px 20px 15px 40px; /* インデント */
        border-bottom: 1px solid #eaeaea;
        text-align: left;
        background: none;
        display: block;
    }

    /* アコーディオン開 */
    .submenu.open {
        display: block;
    }

    /* --- ハンバーガーボタン --- */
    .hamburger {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        width: 30px;
        height: 24px;
        position: relative;
        z-index: 101;
    }

    .hamburger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #333;
        transition: all 0.3s;
    }

    .hamburger span:nth-of-type(1) { top: 0; }
    .hamburger span:nth-of-type(2) { top: 50%; transform: translateY(-50%); }
    .hamburger span:nth-of-type(3) { bottom: 0; }

    /* ハンバーガー active時 */
    .hamburger.active span:nth-of-type(1) {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }
    .hamburger.active span:nth-of-type(2) {
        opacity: 0;
    }
    .hamburger.active span:nth-of-type(3) {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
    }
	
	
/* トピックス */
.news-date {
    display: block;
    color: #666;
    margin-bottom: 6px; /* 日付とタイトルの間の余白 */
    line-height: 17px;
}
	
/* コンテナの設定 */
/* ピックアップ */
  .grid-container-pickup {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* PC: 1fr（均等）を4回繰り返す */
    gap: 0; /* 隙間なし */
    width: 100%;
    margin-top: 10px;
  }
  .grid-container-pickup .grid-item {
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
	text-align: center;
	font-size: 0.8rem;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 10px;
  }
.grid-container-pickup .grid-item img {
	border-radius: 10px;
	}
/* 製品情報 */
  .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PC: 1fr（均等）を4回繰り返す */
    gap: 0; /* 隙間なし */
    width: 100%;
    margin-top: 10px;
  }


	
/* 製品5コラム */
	.products5 {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
	}
  .products5 .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PC: 1fr（均等）を4回繰り返す */
    gap: 0; /* 隙間なし */
    width: 100%;
  }

  .products5 .grid-container .grid-item {
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    text-align: center;
    font-size: 0.8rem;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
    border-radius: 8px;
  }
  .products5 .grid-container .grid-item img {
	margin-bottom: 5px;
	border-radius: 10px;
}
	
	
/* キクロンについて */
.about-kikulon {
    text-align: center;
    padding-top: 14px;
    color: #FFFFFF;
    background-image: url(../image_new/index/about-kikulon_sp.png);
    height: 677px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: relative;
    padding-bottom: 5px;
    height: 500px;
}
.about-kikulon .image {
    margin-left: 3%;
    margin-right: 3%;
    margin-top: 10px;


}
.about-kikulon .grid-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* PC: 1fr（均等）を5回繰り返す */
    gap: 15px; /* 隙間なし */
    width: 100%;
    padding-top: 18px;
    padding-right: 18px;
    padding-bottom: 18px;
    padding-left: 18px;
    position: absolute; /* 3. 絶対配置にする */
    bottom: 5px;
  }

  .about-kikulon .grid-container .grid-item {
    border: 1px solid #BABABA; /* 境界線が見えるように設定 */
    padding-top: 8px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 8px;
    text-align: center;
    font-size: 1rem;
    background-color: #FFFFFF;
  }
  .about-kikulon .grid-container .grid-item a {
    color: #000000;
	}
	
.container .about-kikulon {
    text-align: center;
}

/* トップSNSエリア */
	.index-sns {
    text-align: center;
    margin-top: 20px;
    }
    .index-sns .column {
    }
    /* 最後の要素だけ下の余白を消す（お好みで） */
    .index-sns .column:last-child {
    }
 .index-sns img {
    width: 48px;
    margin-left: 10px;
    margin-right: 10px;

  }
}

/* 製品情報 */
  .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PC: 1fr（均等）を4回繰り返す */
    gap: 0; /* 隙間なし */
    width: 100%;
    margin-top: 10px;
  }

/* 社名の由来 */
  .grid-container-pict {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* PC: 1fr（均等）を4回繰り返す */
    gap: 0; /* 隙間なし */
    width: 100%;
  }
  .grid-container-pict .grid-item {
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
    font-size: 0.8rem;
    margin-left: 5px;
    margin-right: 5px;
  }
.grid-container-pict .grid-item img {
	}

 .grid-container-kiku {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* PC: 1fr（均等）を4回繰り返す */
    gap: 0; /* 隙間なし */
    width: 100%;
  }
  .grid-container-kiku .grid-item {
    font-size: 0.8rem;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  }
.grid-container-kiku .grid-item img {
	}

 .grid-container-kiku {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* PC: 1fr（均等）を4回繰り返す */
    gap: 0; /* 隙間なし */
    width: 100%;
  }
  .grid-container-kiku .grid-item {
    font-size: 0.8rem;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  }
.grid-container-kiku .grid-item img {
	}

/* トップメッセージ */
#topics-part-area .message-waku .grid-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* PC: 1fr（均等）を4回繰り返す */
    gap: 0; /* 隙間なし */
    width: 100%;
    text-align: center;
  }
#topics-part-area .message-waku .grid-container .grid-item {
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
    font-size: 0.8rem;
    margin-left: 5px;
    margin-right: 5px;
    display: grid;
  place-items: center; /* これだけで上下左右の中央に配置されます */
  }
#topics-part-area .message-waku .grid-container .grid-item img {
	}


/* =========================================
   PC用スタイル (769px以上)
   ========================================= */
@media (min-width: 769px) {
	
    /* PCでは「スマホ用」を隠す */
    .sp-only {
            display: none;
        }
	
    /* --- メニュー配置 --- */
    .nav-container {
    background-color: #ce1639;
        /* 必要に応じて高さを指定 */
        /* height: 50px; display: flex; align-items: center; */
    }
    .nav-container a {
    color: #FFFFFF;
	}
    .menu-list {
        display: flex;
        justify-content: flex-end; /* 右寄せ */
    }

    /* --- サブメニュー全幅表示の肝 --- */
    /* 親liのposition:relativeを解除し、header-bottomを基準にする */
    .menu-item {
        position: static; 
    }

    .menu-item > a {
        display: block;
        padding: 15px 20px;
        font-weight: 500;
        transition: background-color 0.3s;
    }
    
    .menu-item > a:hover,
    .menu-item.active > a {

    }

    /* --- サブメニュー本体（スライドダウン） --- */
    .submenu {
    position: absolute;
    top: 100%; /* header-bottomの直下 */
    left: 0;
    width: 100%; /* 画面幅いっぱい */
    background-color: rgba(255,255,255,0.85);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 200;
    border-top: 1px solid #eee;
    /* アニメーション設定 */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.4s;
    }

    /* 開いた状態 */
    .submenu.open {
        max-height: 600px; /* コンテンツが収まる十分な値を設定 */
        opacity: 1;
        visibility: visible;
    }

    /* PCサブメニュー内のレイアウト（横並び例） */
    .submenu-inner {
        display: flex;
        flex-wrap: wrap;
        padding: 20px 0;
        gap: 20px;
    }

    .submenu li {
        width: calc(25% - 15px); /* 4列レイアウト例 */
    }

    .submenu li a {
    display: block;
    padding: 10px;
    /*        background-color: #f9f9f9;*/
    border-radius: 4px;
    text-align: center;
    transition: background 0.3s;
    color: #000000;
    }
/*    .submenu li a:hover {
        background-color: #eee;
    }*/

    /* PCではハンバーガー非表示 */
    .hamburger {
        display: none;
    }

	
/* トピックス */
.news-item {
    display: flex;           /* Flexboxで横並びにする */
    align-items: flex-start; /* 上端で揃える（テキストが複数行になった時用） */
  }
  
  .news-date {
    width: 120px;       /* 日付部分の幅を固定（文字数に合わせて調整してください） */
    flex-shrink: 0;     /* 画面が狭くなっても日付の幅が潰れないようにする */
    margin-bottom: 0;   /* スマホ用の余白を解除 */
    line-height: 26px;
  }
  
  .news-title {
    flex-grow: 1;       /* 残りの幅をタイトル部分でいっぱいに使う */
  }
	
/* ピックアップ */
.grid-container-pickup {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* PC: 1fr（均等）を4回繰り返す */
    gap: 0; /* 隙間なし */
    width: 100%;
  }
	
.grid-container-pickup .grid-item {
	padding-top: 5px;
	padding-right: 5px;
	padding-left: 5px;
	padding-bottom: 5px;
	text-align: center;
	font-size: 0.9rem;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 5px;
	margin-right: 5px;
	}
.grid-container-pickup .grid-item img {
	border-radius: 10px;
	}
/* 製品情報 */

  /* アイテムの装飾（見やすくするため） */
  .grid-item {
    padding: 20px;
    text-align: center;
    font-size: 0.9rem;
  }

/* 製品5コラム */
	.products5 {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;

		
	}
  .products5 .grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* PC: 1fr（均等）を5回繰り返す */
    gap: 0px; /* 隙間なし */
    width: 100%;
    margin-top: 10px;
  }

  /* アイテムの装飾（見やすくするため） */
  .products5 .grid-container .grid-item {
    padding-top: 5px;
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    text-align: center;
    font-size: 0.9rem;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 8px;
  }
  .products5 .grid-container .grid-item img {
    margin-bottom: 5px;
	border-radius: 10px;
}

	
/* キクロンについて */
.about-kikulon {
    text-align: center;
    padding-top: 15px;
    margin-bottom: 20px;
    color: #FFFFFF;
    background-image: url(../image_new/index/about-kikulon_pc.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: relative;
    padding-bottom: 20px;
    height: 600px;
}
.about-kikulon .grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* PC: 1fr（均等）を5回繰り返す */
    gap: 15px; /* 隙間なし */
    width: 100%;
    padding-top: 18px;
    padding-right: 18px;

    padding-left: 18px;
    position: absolute;
    bottom: 20px;
  }

  .about-kikulon .grid-container .grid-item {
    border: 1px solid #BABABA; /* 境界線が見えるように設定 */
    padding-top: 8px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 8px;
    text-align: center;
    font-size: 0.8rem;
    background-color: #FFFFFF;
  }
  .about-kikulon .grid-container .grid-item a {
    color: #000000;
}
/* トップSNSエリア */
  .index-sns {
    padding: 20px;   /* 背景色（確認用） */
    text-align: center;
}
  .index-sns img {
    width: 48px;
    margin-left: 10px;
    margin-right: 10px;

}

	/* 社名の由来 */
.grid-container-pict {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PC: 1fr（均等）を4回繰り返す */
    gap: 0; /* 隙間なし */
    width: 100%;
  }
	
.grid-container-pict .grid-item {
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    text-align: center;
    font-size: 0.9rem;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
	}
.grid-container-pict .grid-item img {
	}
	
.grid-container-kiku {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PC: 1fr（均等）を4回繰り返す */
    gap: 0; /* 隙間なし */
    width: 100%;
  }
	
.grid-container-kiku .grid-item {
    text-align: center;
    font-size: 0.9rem;
	}
.grid-container-kiku .grid-item img {
	}
	
.footer .menu {
    margin-bottom: 10px;

}
	
	/* トップメッセージ */
#topics-part-area .message-waku .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PC: 1fr（均等）を4回繰り返す */
    gap: 0; /* 隙間なし */
    width: 100%;
  }
	
#topics-part-area .message-waku .grid-container .grid-item {
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    text-align: center;
    font-size: 0.9rem;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
	}
.grid-container-pict .grid-item img {
	}
}

/* =========================================
   フッター
   ========================================= */
.footer {
    background-color: #ce1538;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    margin-top: auto; /* flex container内での念のための指定 */
}
.footer .menu {
    margin-bottom: 20px;
}
.footer .menu a, .footer .menu a:visited {
    color: #FFFFFF;
}
.copyright {
    font-size: 70%;
}