@charset "UTF-8";html{font-size:82.5%}
body {color:rgba(94,94,94,1.0);margin: 0;font-family: "Metrophobic", sans-serif;font-weight: 400;font-style: normal;overflow-x: hidden;background:rgba(255,255,233,1.0);line-height:1.8;}
/* =====================
   ツールチップ
===================== */
.tooltip {position: absolute;top: 10px;left: 50%;transform: translateX(-50%);background: rgba(0,0,0,0.85);color: #fff;font-size: 12px;padding: 6px 10px;border-radius: 3px;white-space: nowrap;opacity: 0;pointer-events: none;transition: opacity 0.2s ease;}
.mega-item:hover .tooltip {opacity: 1;}
/* =====================
   コンテナ
===================== */
.container {max-width:1200px;margin:0 auto;padding:30px 40px;background:rgba(255,254,249,1.0)}
/* =====================
   ヘッダー
===================== */
.header {position: fixed;width: 100%;background: rgba(255,255,255,0.9);z-index: 1000;}
.header-inner {max-width: 1200px;margin: 0 auto;padding: 20px 20px 0 20px;display: flex;align-items: center;justify-content: space-between;}
.logo {width:130px; height:auto;}
.insta-logo {opacity:0.6;height: 14px;width: 14px;cursor: pointer;}
.gnav {margin: 0 auto;display:block;}
.hamburger {display:none;}
.sp_menu {display:none;}
.gnav ul {display: flex;gap: 30px;list-style: none;padding: 0;justify-content: center;}
.header-inner a {color:inherit;text-decoration:none;}
.header-lang {
  vertical-align: middle;
  letter-spacing: 0.1em;
}

.header-lang a {
  margin: 0 10px;
  text-decoration: none;
  font-weight: normal;
}

.header-lang .active {
  margin: 0 10px;
  font-weight: bold;
}
/* =====================
   グローバルメニュー
===================== */
.menu-item {position: relative;width:100%;text-align:center;padding: 3px 15px;}
.gm1 {margin-right:25px;display:inline;padding:5px 0;}
.gm2 {margin-right:25px;display:inline;padding:5px 0;}
.gm3 {margin-right:25px;display:inline;padding:5px 0;}
.gm4 {margin-right:25px;display:inline;padding:5px 0;}
.gm5 {margin-right:25px;display:inline;padding:5px 0;}
.gm6 {margin-right:25px;display:inline;padding:5px 0;}
.gm7 {margin-right:25px;display:inline;padding:5px 0;}
.gm8 {margin-right:25px;display:inline;padding:5px 0;}
.gm1 a,.gm2 a,.gm3 a,.gm4 a,.gm5 a,.gm6 a,.gm7 a,.gm8 a {color:inherit;text-decoration:none;}
.gm4:hover {font-weight: bold;}
.mega1,.mega2,.mega3,.mega4,.mega5,.mega6 {position: absolute;top: 0px;left: 0;width: 100vw;background: white;opacity: 0;visibility: hidden;}
.mega-inner {max-width: 100%;margin: 0 auto;padding: 0 5% 3% 5%;text-align:center;display: flex;justify-content: center; /* 中央寄せ */gap: 20px;}
.mega-item {position: relative;display: inline-block;}
.mega-item img {width: 100%;transition: 0.8s;max-height:150px;}
.mega-item:hover img {transform: scale(1.1);}
.mega1 a,.mega2 a,.mega3 a,.mega4 a,.mega5 a,.mega6 a,.mega7 a,.mega8 a {color:inherit;text-decoration:none;}
/* =====================
   ヒーロー
===================== */
.hero {height: 50vh;position: relative;line-height:0.5;}
.hero video {width: 100%;height: 100%;object-fit: cover;}
.hero img {width: 100%;height: 100%;object-fit: cover;}
.hero h1 {text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);position: absolute;top: 46%;width: 100%;text-align: center;color: white;font-size: 60px;font-family: "Cantarell", sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;}
.hero h1 span {font-size:20px;}
/* =====================
   商品
===================== */
.txt-inner {padding:0 50px;}
.products {padding: 0 0;}
.products .inner {padding: 0 50px;line-height:1.8;}
.products h2 {text-align: center;}
.products h3 {text-align: left;font-size: 28px;margin:30px 0 0 0;padding:0;}
.grid1 {display: grid;grid-template-columns: repeat(1, 1fr);gap: 30px;margin-top: 40px; margin-left:30px; margin-right:30px;}
.grid2 {display: grid;grid-template-columns: repeat(2, 1fr);gap: 30px;margin-top: 40px;}
.grid3 {display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;margin-top: 40px; margin-left:30px; margin-right:30px;}
.grid4 {display: grid;grid-template-columns: repeat(4, 1fr);gap: 30px;margin-top: 40px;}
.grid5 {display: grid;grid-template-columns: repeat(5, 1fr);gap: 30px;margin-top: 40px; margin-left:30px; margin-right:30px;}
.grid3-3 {display: grid;grid-template-columns: repeat(3, 1fr);gap: 5px;margin-top: 20px;}
.card img {width: 100%;}
.card h2 {text-align:left; font-size:28px;}
.card p.credit {text-align:left;font-weight:normal;font-size:80%;}
.process-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 55px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.process-card {
  grid-column: span 2;
}

.process-card-4 {
  grid-column: 2 / span 2;
}

.process-card-5 {
  grid-column: 4 / span 2;
}

.process-num {
  text-align: center;
  font-size: 24px;
  margin-bottom: 0;
}

.process-card h2,
.process-card h3 {
  text-align: center;
}
/* =====================
   ボタン
===================== */
.btn-box { text-align:center; font-weight: bold;}
.btn_border {position: relative;display: inline-block;padding: 15px 40px;color: inherit;background: white;text-decoration: none;overflow: hidden;border-bottom: 1px solid rgba(94,94,94,0.5);transition: border-color 0.2s ease 0.6s;}
/* 共通 */
.btn_border::before,.btn_border::after,.btn_border span::before,.btn_border span::after {content: "";position: absolute;background: rgba(94,94,94,1.0);}
/* ===== 初期（戻る時の順番） ===== */
/* 上 */
.btn_border::before {top: 0;left: 0;width: 100%;height: 1px;transform: scaleX(0);transform-origin: right;transition: transform 0.3s ease 0.2s;}
/* 下 */
.btn_border::after {bottom: 0;left: 0;width: 100%;height: 1px;transform: scaleX(0);transform-origin: left;transition: transform 0.3s ease 0.6s;}
/* span */
.btn_border span {position: absolute;inset: 0;}
/* 右 */
.btn_border span::after {right: 0;top: 0;width: 1px;height: 100%;transform: scaleY(0);transform-origin: bottom;transition: transform 0.3s ease 0.4s;}
/* 左 */
.btn_border span::before {left: 0;top: 0;width: 1px;height: 100%;transform: scaleY(0);transform-origin: top;transition: transform 0.3s ease 0s;}
/* ===== hover（行きの順番） ===== */
.btn_border:hover {border-bottom-color: transparent;transition-delay: 0.2s;}
/* 下（最初） */
.btn_border:hover::after {transform: scaleX(1);transition-delay: 0s;}
/* 右 */
.btn_border:hover span::after {transform: scaleY(1);transition-delay: 0.2s;}
/* 上 */
.btn_border:hover::before {transform: scaleX(1);transition-delay: 0.4s;}
/* 左（最後） */
.btn_border:hover span::before {transform: scaleY(1);transition-delay: 0.6s;}

/* 2つのボタンを横並びにするための設定 */
.btn-wrapper {
    display: flex;           /* フレックスボックスを有効にし、子要素を横並びにする */
    justify-content: center; /* ボタンを水平方向の中央に配置 */
    gap: 40px;               /* ボタン同士の間隔（適宜調整可能） */
    margin-top: 30px;        /* 上のコンテンツとの余白 */
    flex-wrap: wrap;         /* 画面幅が狭い時にボタンが重ならないよう自動で折り返す */
}

/* 元々の btn-box が横幅いっぱいに広がらないように設定 */
.btn-wrapper .btn-box {width: auto;}
/* =====================
   Cookie 管理
===================== */
.cookie-banner {max-width:500px;display:none;position:fixed;bottom:0;left:0;width:100%;background:#E5E5F0;opacity:0.9;color:inherit;z-index:2000;}
.cookie-inner {padding:20px;}
/* ===================== */
/* モーダル背景 */
/* ===================== */
.cookie-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

/* ===================== */
/* モーダル本体 */
/* ===================== */
.cookie-modal-inner {
    background: rgba(255,255,255,1.0);
    width: 90%;
    max-width: 420px;
    border-radius: 12px;
    padding: 24px 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    animation: modalFadeIn 0.3s ease;
    color: #333;
    font-size: 14px;
    line-height: 1.6;
}

/* ===================== */
/* アニメーション */
/* ===================== */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===================== */
/* タイトル */
/* ===================== */
.cookie-modal-inner h2 {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 600;
}

/* ===================== */
/* テキスト */
/* ===================== */
.cookie-modal-inner p {
    font-size: 13px;
    margin-bottom: 16px;
    color: #555;
}

/* ===================== */
/* チェックボックス */
/* ===================== */
.cookie-modal-inner label {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
}

.cookie-modal-inner input[type="checkbox"] {
    margin-right: 8px;
}

/* ===================== */
/* ボタンエリア */
/* ===================== */
.cookie-btn-group {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* btn_border を活かす */
.btn-box {
    width: 100%;
}



/* ===================== */
/* Cookieリンク */
/* ===================== */
#cookie-settings-link {
    color: inherit;
    font-family: inherit;
    text-decoration: none;
    font-size: 12px;
    cursor: pointer;
}

#cookie-settings-link:hover {
    opacity: 0.6;
}

/* =====================
   Inquiry Form
===================== */
.inquiry-main {
  padding-top: 0px;
}

.inquiry-section .container {
  min-height: 70vh;
}

.inquiry-form {
  max-width: 760px;
  margin: 40px auto 0;
}

.form-row {
  margin-bottom: 24px;
}

.form-row label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid rgba(94,94,94,0.4);
  background: #fff;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.6;
}

.form-row textarea {
  resize: vertical;
  min-height: 180px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.form-note {
  margin: 0 0 8px;
  font-size: 12px;
  color: rgba(94,94,94,0.8);
}

.required {
  color: #b00020;
  font-size: 12px;
  margin-left: 6px;
}

.optional {
  color: rgba(94,94,94,0.7);
  font-size: 12px;
  margin-left: 6px;
}

.inquiry-submit {
  margin-top: 40px;
}

button.btn_border {
  border-left: none;
  border-right: none;
  border-top: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

.confirm-row {
  border-bottom: 1px solid rgba(94,94,94,0.2);
  padding: 16px 0;
}

.confirm-row strong {
  display: block;
  margin-bottom: 6px;
}

.confirm-row p {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.confirm-error-box {
  border: 1px solid rgba(176,0,32,0.4);
  background: rgba(176,0,32,0.05);
  padding: 16px;
  margin-bottom: 30px;
}

.confirm-error-box p {
  margin: 0 0 8px;
  color: #b00020;
}

.inquiry-submit {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* =====================
   フッター（フル幅）
===================== */
.footer {width: 100%;background: #fff;border-top: 1px solid rgba(0,0,0,0.1);padding: 40px 0;}
/* 中央コンテナ */
.footer-inner {max-width: 1200px;margin: 0 auto;padding: 0 20px;text-align: center;}
/* ロゴ */
.footer-logo img {height: 36px;margin-bottom: 20px;}
/* メニュー */
.footer-menu {margin-bottom: 20px;display: flex;flex-wrap: wrap;justify-content: center;gap: 10px 20px;}
.footer-menu a {text-decoration: none;color: inherit;font-size: 70%;white-space: nowrap;}
.footer-menu a:hover {opacity: 0.6;}
/* コピー */
.footer-copy {font-size: 80%;color:inherit;}

/* モーダル全体 */
.image_modal {
	z-index:10001;
    position: fixed;
    inset: 0;

    /* 初期状態（非表示） */
    opacity: 0;
    visibility: hidden;

    /* フェード */
    transition: opacity 0.3s ease;
}

/* 表示状態 */
.image_modal:target {
    opacity: 1;
    visibility: visible;
}

/* 背景 */
.modal_bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
}

/* 画像 */
.modal_image {
    position: absolute;
    top: 50%;
    left: 50%;

    /* 少しズームしながら表示 */
    transform: translate(-50%, -50%) scale(0.9);
    transition: transform 0.3s ease;

    max-width: 95vw;
    max-height: 95vh;
}

/* 表示時に拡大 */
.image_modal:target .modal_image {
    transform: translate(-50%, -50%) scale(1);
}

/* =====================
   ニュース
===================== */
.news-section { /*width:100%;*/ max-width: 900px; box-sizing: border-box ;margin:0 auto; padding:0 20px;}
.news-section div.grid3 { display: flex; flex-direction: column;}
.news-section .card { display: block; float: none; border-bottom: 1px solid #e0e0e0; padding: 28px 0;box-sizing:border-box; margin-left:0; margin-right:0;} 
.news-section .grid2-col { display: flex; flex-direction:row; justify-content:space-between; align-items:center; gap:40px;box-sizing:border-box;flex-wrap:nowrap;}/*横に向け*/
.news-section .card2:not(.btn-box) {flex:1; margin-right:auto; }
.news-section .grid2-col > img {width: 160px; min-width:160px; height:120px; object-fit:cover; border-radius:4px; flex-shrink:0; order:2;}
.news-section .news-title { margin: 0; font-size: 1.15rem; line-height: 1.6;}
.news-section .btn-box { width:170px; min-width:120px; text-align:right; order:3; white-space:nowrap;}

/*画像がないとき*/
.news-section .card.no-image { background:none; padding:24px 0; border-bottom:1px solid #e0e0e0; }
.news-section .card.no-image img { display:none; }

@media screen and (max-width: 768px) {
    .news-section { max-width: none;  }
    .news-section .card { padding: 20px 0;}
    .news-section .grid2-col { flex-direction: column; align-items: center; justify-content: center; gap: 15px; }
    .news-section .card2:not(.btn-box) { flex: none; text-align: center; }
    .news-section .news-title { text-align: center; padding: 0 10px; box-sizing: border-box; }
    .news-section .grid2-col > img { max-width: 240px; height: auto; aspect-ratio: 4 / 3;  margin: 5px auto; display: block; }
    .news-section .btn-box { max-width: 180px; text-align: center; margin: 5px auto 0; white-space: normal; }
}

/* ===================================================
   トップページ用ニュース
   =================================================== */
.top-news-box {border-top:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; padding:10px 0; margin-bottom:40px;background:transparent; display:block; }
/* ニュースの各行*/
a.top-news-row { display:flex; align-items:center; padding:15px 0px; text-decoration:none; color:#333; border-bottom:1px dashed #e0e0e0; box-sizing:border-box; transition:background-color 0.2s ease;}
a.top-news-row:last-child { border-bottom: none;}

/* マウスホバー時の背景色変更効果 */
a.top-news-row:hover { background-color:rgba(0, 0, 0, 0.02); padding-left:10px; }
/* 投稿日時のスタイル設定 */
a.top-news-row .news-date { font-size:0.95rem; color:#666666; font-weight:bold; width:110px; min-width:110px; flex-shrink:0; display:inline-block;}
/* カテゴリータグのスタイル設定 */
a.top-news-row .news-tag { border:1px solid #cccccc; color:#666666; font-size:0.75rem; padding:2px 12px; border-radius:3px; margin-right:20px; min-width:70px; text-align:center; flex-shrink:0; display:inline-block;}
a.top-news-row .news-text { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; display: inline-block; text-align:letf;}


@media screen and (max-width: 768px) {
    
    /* フレックス配置を折り返し可能に変更 */
    a.top-news-row { flex-wrap: wrap;   /* コンポーネントが収まらない場合は自動改行 */
        align-items: flex-start;        /* 上揃えに変更 */
        padding: 12px 0 ;
    }
    
    /* スマホ表示時：日付とタグを1行目に並べる調整 */
    a.top-news-row .news-date { width: auto; min-width: auto; margin-right: 15px;
        margin-bottom: 8px;           /* タイトルとの間の縦余白 */
    } 
    a.top-news-row .news-tag { margin-bottom: 8px; }
    
    /* スマホ表示時：タイトルテキストを2行目に独立させ、全文表示（自動折り返し）にする */
    a.top-news-row .news-text { flex: none; width: 100%;                    
        white-space: normal; overflow: visible; text-overflow: clip; /* PC用の折り返し禁止を解除（自動改行を許可、非表示設定を解除、三点リーダを解除して全文見せる */            
    }
}

/* =====================
   大枠のコンテナ
===================== */
/* --- コンテンツ全体のレイアウト管理（大枠のコンテナ） --- */
.main-inner {
    max-width: 1400px;  /* コンテンツの最大幅を1200pxに制限 */
    margin: 0 auto; padding: 0 5px; box-sizing: border-box; width: 100%; overflow: hidden;}

.main-inner .txt-inner{ padding-left:42px;}

/* メインコンテンツ内にある画像の微調整（レイアウトのバランス調整用） */
/* 左側に画像がある場合の調整 */
.main-inner .image { padding-left:42px; }

/* 右側に画像がある場合の調整 */
.main-inner .image-right { padding-right:42px; box-sizing:border-box; }

@media (max-width: 1200px) {
    
    .main-inner .image { padding-left: 0 !important; }
    .main-inner .image-right { padding-right: 0 !important; }
    .main-inner .txt-inner { padding-left: 0 !important; }
}

/* =====================
   Chang&Giao
===================== */
.introduction p {text-align: left; justify-items: center; margin-top: 20px;}
.card h3 {text-align: left; font-size: 28px; margin:0; padding:0;}
.card h4 {text-align: center; font-size: 20px; margin-top: 60px; padding-right: 30px}
.recycle-ribbons h4 { text-align: center;font-size: 20px;}
.main-content-explain h4 { text-align: center; font-size: 20px; padding-top: 40px;}
.main-content-explain p { text-align: center;}
.explain-parts-1 p { text-align: center;}
.explain-parts-1 h4 { font-size: 15px;}
.explain-parts-2 p { text-align: center;}
.explain-parts-2 h4 { font-size: 15px;}
.card .news-title { font-size: 18px;}
.grid2-col {display: grid;grid-template-rows: 1fr auto;gap: 30px;height: 100%}

.card .detail-title {text-align: center; font-size: 48px;}
.line {width: 33%; margin: 20px auto; border:0; border-top: 2px solid rgba(94,94,94,0.4);margin-bottom: 40px;}
.card .detail-image {display:block;width: 50%; height: auto; margin: 20px auto; border:0;object-fit: cover;}

/* =====================
   レスポンシブ
===================== */
@media (max-width: 1200px) {
	.grid2 {grid-template-columns: 1fr;}
  .image { padding-left: 0; }
  .image-right { padding-right: 0;}
  .products .inner { padding: 0 0; }
}

@media (max-width: 768px) {

	.process-grid {grid-template-columns: 1fr;}
	.process-card,.process-card-4,.process-card-5 {grid-column: auto;}
	.txt-inner {padding:0 0;}
	.products .inner {padding: 0 0;}
	.image { padding-left:0;}
	.header-lang {padding-right:15px;}
	.footer-menu {flex-direction: column;align-items: center;gap: 12px;}
	.footer-menu a {font-size: 70%;}
	
	.insta-logo {display:none;}
	.insta {width:20px;opacity:0.7;}
	/* =====================
	 ヘッダー
	===================== */
	.header {position: fixed;width: 100%;height: 70px;background: rgba(255,255,255,0.95);z-index: 1000;}
	.header-inner {height: 100%;display: flex;align-items: center;padding: 0 20px;}
	.logo {width: 100px;}
	/* =====================
	 PCナビ非表示
	===================== */
	.gnav {display: none;}
	/* =====================
	 ハンバーガー
	===================== */
	.hamburger {display: block;width: 30px;height: 22px;position: absolute;right: 20px;top: 50%;transform: translateY(-50%);cursor: pointer;z-index: 1001;}
	.hamburger span {position: absolute;width: 100%;height: 2px;background: #333;left: 0;transition: 0.4s;}
	/* 等間隔にする */
	.hamburger span:nth-child(1) { top: 0px; }
	.hamburger span:nth-child(2) { top: 10px; }
	.hamburger span:nth-child(3) { top: 20px; }
	/* ×アニメーション */
	.hamburger.active span:nth-child(1) {transform: rotate(45deg);top: 10px;}
	.hamburger.active span:nth-child(2) {opacity: 0;}
	.hamburger.active span:nth-child(3) {transform: rotate(-45deg);bottom: 10px;}
	/* =====================
	 SPメニュー本体
	===================== */
	.sp_menu {position: fixed;inset: 0;background: white;display: flex;flex-direction: column;justify-content: center;align-items: center;transform: scale(0.95);opacity: 0;pointer-events: none;transition:transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),opacity 0.3s;z-index: 1000;}
	/* 開いた状態 */
	.sp_menu.active {transform: scale(1);opacity: 1;pointer-events: auto;}
	/* =====================
	 閉じるボタン
	===================== */
	.sp_close {position: absolute;top: 20px;right: 20px;font-size: 28px;cursor: pointer;}
  	/* =====================
	 ロゴ
	===================== */
  .hamburger_logo {width: 120px; height: auto;}
	/* =====================
	 メニューリスト
	===================== */
	.sp_menu ul {list-style: none;text-align: center;padding: 0;}
	.sp_menu li {margin: 40px 0;padding: 10px;opacity: 0.8; border-bottom: 1px solid rgba(94,94,94);}
	.sp_menu a {font-size: 18px;font-weight: bold;text-decoration: none;color:inherit;}
  .sp_menu li:hover{opacity: 1;}
	/* =====================
	 ヒーロー
	===================== */
	.hero h1 {font-size: 32px;}
	.hero h1 span {font-size: 14px;}
	/* =====================
	 商品グリッド
	===================== */
	.grid2 {grid-template-columns: 1fr;}
	.grid3 {grid-template-columns: 1fr;}
	.grid4 {grid-template-columns: repeat(2,1fr);}
	.grid5 {grid-template-columns: repeat(2,1fr);}


.inquiry-main {
  padding-top: 0px;
}

.inquiry-section .container {
  padding: 30px 20px;
}

.inquiry-form {
  margin-top: 30px;
}

.form-grid {
  grid-template-columns: 1fr;
  gap: 0;
}

.form-row input,
.form-row select,
.form-row textarea {
  font-size: inherit;
}

.inquiry-submit .btn_border {
  width: 100%;
  box-sizing: border-box;
}

  .inquiry-submit {
    flex-direction: column;
    gap: 12px;
  }

  .inquiry-submit .btn_border {
    width: 100%;
    box-sizing: border-box;
  }
  
  

}