@charset "utf-8";

/***************************************
Ver 2026.02.08-
*************************************** */
:root {
    font-size: 16px; /* 100% */
  /* --- ブランドカラー --- */
  --base-green:   #007f50;   /* ヘッダーとフッター  */
  --base-navy:    #003366; 
  --base-color:   #d45a00;   /* コンテンツのベースカラー */
  --accent:       #d45a00;   /* 注目・行動（ステップ番号等） */
  --alert-red:    #c0392c;   /* 警告・規律 */

  /* --- テキスト（可読性重視） --- */
  --text-main:    #333333;   
  --text-body:    #555555ee; /* 柔らかい黒 */
  --text-muted:   #999999;   /* タイムスタンプ・パンくず */
  --text-white:   #ffffffee; 

  /* --- 背景・面 --- */
  --bg-white:     #ffffff;
  --bg-soft:      #fcfcfc;   /* セクション区切り */
  --bg-accent:    #fdf7f2;   /* オレンジ系（04等） */
  --bg-gray:      #cccccc; 

  /* --- 枠線・装飾 --- */
  --border-light: #eeeeee;
  --border-accent:#d45a00;
  --border-color: #ddd;
  /* --- 横幅・余白（レスポンシブ対応） --- */
  --width-content: 1000px;
  --width-box:     800px;    /* 本文の黄金幅 */
  --width-narrow:  650px;    /* 手続き・補足用 */
  --space-section: clamp(60px, 8vw, 120px); /* セクション間の呼吸 */
  --space-side:    1.5em;    /* スマホ端の余白 */

  /* --- 挙動 --- */
  --transition-base: all 0.3s ease;
}


header ,
footer { color:var(--text-white); background-color: var(--base-green); }


/*-------------------------------
/*　メイン領域
/*　文字サイズ　行高　色初期化
-----------------------------------*/
/* 全体の基本設定 */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
    font-size: clamp(1em, 0.95em + 0.25vw, 1.125em); /* フォントサイズは画面幅に応じて16px〜18pxの間で微調整 */
    line-height: 1.8; margin: 0; padding: 0;
    color:var(--text-body); border-color:var(--border-light); background-color:var(--bg-white);
    word-wrap: break-word;
}
section , header , footer{
	position: relative; overflow: hidden;
	display: grid;
	grid-template-columns: 
    [full-start] minmax(8px, 1fr) 
    [main-start] minmax(0, 960px)
	[main-end] minmax(8px, 1fr)
	[full-end];
}
section > * , header > * , footer > * { grid-column: main; }
div.wrap-display , .grid-full{ grid-column: full; }




/*---------------------------------
/*　こまごま
/*---------------------------------*/

a { color:var(--base-color); text-decoration: underline; }
strong{ font-weight: bold; color: var(--base-color); }
em { font-style: normal; font-weight: bold; background: linear-gradient(transparent 60%, #fff3e0 60%); }
b { font-weight: bold; color: inherit; }
.warning { color: var(--alert-red); }

span.tips{ font-size: 80%; color:var(--text-muted); }
.warning{ color: var(--alert-red); }

.width-box{ max-width: var(--width-box); }
.width-narrow{ max-width: var(--width-narrow); }
.width-small{ max-width: 320px; }


/* 行間とりあえず */
p + p   { margin-top: 0.5em; }
li + li { margin-top: 0.5em; }

/*---------------------------------
/*　画像
/*---------------------------------*/

p + picture{ margin-top: 2em ;}

picture, img { display: block; max-width: 100%; height: auto; margin: auto; /*vertical-align: middle;*/ }
picture{ text-align: center; margin-left: auto; margin-right: auto; } /* 上下マージンは設定しない */
picture:not(:last-child){ margin-bottom: 1.5em; }



/*---------------------------------
/*　TABEL
/*---------------------------------*/
/* 横スクロール */
.table-scroll{ overflow:auto;}
/* htmlに貼る
@media screen and (max-width: 420px) {.table-scroll table#table1 { display:block; white-space:nowrap; padding-bottom: 8px; } }
*/

p + table{ margin-top: 2em;}

table{
    font-size: 0.9em; margin:1.5em auto 0;
	font-family:sans-serif;	text-align:left;
	width:fit-content; min-width:300px; overflow: auto; box-sizing:border-box; background-color: var(--bg-white);
	border-collapse:collapse; font-variant-numeric: tabular-nums; border-spacing:0;
}
@media screen and (max-width: 420px) { table { font-size: 80%; } }
table:not(:last-child){ margin-bottom: 1.5em; }

caption{ font-size:0.95em; text-align:left; line-height:1.5; padding-bottom:0.25em; }
caption.pre{ white-space:nowrap; text-overflow: ellipsis; }
th , td{ border:1px solid var(--border-color) ;  box-sizing: border-box; vertical-align: middle; }
th{ padding:0.5em 0.5em; background-color:var(--bg-soft); white-space:nowrap; }
th.wrap{ white-space:normal !important; }
th[scope='row']{ width:auto; }
th[scope='col']{ width:auto; text-align:center; }

.table-col-center td{ text-align:center; }
.table-col-price td{ text-align:right; }
td{ padding:0.5em 0.5em; }

/*　縦文字にするセル */
th.cell-tatemoji ,
td.cell-tatemoji{ padding: 0; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; }

/*　注釈（小さくする） */
td.tips{ font-size: 80%; color: var(--text-muted); text-align: left; }
/*　セル内の注釈 折り返す */
td b.tips{ display: block; font-size: 80%; font-weight: normal; }


/*---------------------------------
/*　LIST
/*---------------------------------*/
ul{ margin:1em 0 1em 1.15em; }
ol{ margin:1em 0 1em 1.15em; }
li{ line-height: 1.6;}
li + li{ margin-top: 0.75em; }

/* リストマークなし（マーク分を左詰め）*/
.list-0 ,.ListMark_non{ list-style-type: none; margin-left: 0; }

/* リストマークをアルファベット（使用頻度高） */
.list-a{ list-style:upper-alpha; }
.list-a li::before { content:"" ; margin-right: 0.3vw; }
.list-a li::marker{ font-size: 90%; }

.list-icon{ list-style-type:none; }
.list-icon li{ margin-left:-16px; }
.list-icon li i{ display: inline-block; margin-right: 0.75rem; }

/* リストの中のリスト */
li ul , li ol{ font-size: 95%; margin-top: 0.5em; }
li ul li + li , li ol li + li{ margin-top:0.2em; }



/*---------------------------------
/*　DL
/*---------------------------------*/

dt{ font-size: 1.1em; font-weight: bold; line-height: 1; margin-bottom: 0.75em;  }
dd{ font-size: 0.9em; line-height: 1.6; margin-left: 0.2em; }
dd + dt{ margin-top: 2em; }
dd + dd{ margin-top: 0.5em; }



/*--------------------------------------
ページヘッダー
ピックパス　見出し　タイムスタンプ　概要説明　ショートカットリンク
---------------------------------------- */
.pagetop{ box-sizing: border-box; overflow: hidden; }
.pagetop .time-stamp ~ *:last-child{ margin-bottom: 3em; } /* タイムスタンプの後に何かある場合は下パディングをつける */

.pagetop picture{ margin: 0 auto;}
.pagetop picture img{ margin: 0 auto; }

.pagetop h1{ font-size: 1.5rem; line-height: 1.8; letter-spacing: 0.05em; }
.pagetop h1 b{ display: block; font-size: 60%; padding-top: 0; line-height:calc( 100% + 1.5vw ); }

.topic-path { margin:0.5em 0; }
.topic-path ol {
    display:flex; flex-wrap:wrap; align-items: center; padding:0; margin:0; list-style-type:none;
    font-size: 0.8em; color:var(--text-body); 
}
.topic-path li { display: flex; align-items: center; margin: 0; line-height: 1; }
.topic-path li:not(:first-child)::before { content: ">"; margin: 0 0.6em; color: #ccc; }
.topic-path li a { color:inherit; text-decoration: none; }
.topic-path li a:hover { text-decoration: underline; }
.topic-path li:last-child { display: none; }

.topic-path li:first-child a {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0; text-decoration: none; padding: 0.3em 0.5em; }

.topic-path li:first-child a::before {
  content: "HOME";
  font-family: 'Verdana', 'Arial', sans-serif; 
  font-size: 0.75rem; font-weight: bold; letter-spacing: 0.05em;
  border: 1px solid var(--base-navy); border-radius: 2px; padding: 0.1em 0.4em; transition: all 0.2s ease;
}
.topic-path li:first-child a:hover::before { background-color: var(--base-navy); color:var(--text-white); }

/* タイムスタンプ全体のコンテナ */
.time-stamp { margin-top: 1em; margin-bottom: 1em; }
.time-stamp ul { margin: 0; padding: 0; list-style: none; text-align: right; }
.time-stamp li { display: block; font-size: 0.8em; color:var(--text-muted); line-height: 1.4; }
.time-stamp li:first-child::before {
  content: "update : "; text-transform: uppercase;
  font-size: 0.9em; letter-spacing: 0.05em; margin-right: 0.3em;
}
.time-stamp li:nth-child(2) { font-size: 0.75em; color: #bbb; }
.time-stamp li:nth-child(2)::before {
  content: ""; text-transform: uppercase; font-size: 0.9em; margin-right: 0.3em; }

/* トップ画の中にH1とタイムスタンプを埋め込み */
.wrap-mv{ position: relative; }
.wrap-mv h1{ position: absolute; top: 0; left: 0; }
.wrap-mv .time-stamp { position: absolute; bottom: 0; right: 0; }

/* リード文 */
.pagetop h1 + .read{ margin-top: calc( 2em + 1vw );}
.pagetop .read{
    border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
    padding: 1.5em; text-align: center; margin: 0 auto; max-width: var(--width-narrow);
}
/* --- リンク --- */
.pagetop .read a { color:var(--base-color); text-decoration: underline; }

/* 文字強調 */
.pagetop .read strong { font-weight: bold; color: var(--base-color); }
.pagetop .read em { font-style: normal; font-weight: bold; background: linear-gradient(transparent 60%, #fff3e0 60%); }
.pagetop .read b { font-weight: bold; color: inherit; }
.pagetop .read .warning { color: var(--alert-red); }





/*---------------------------------
セクションベース
<section class="common-section">
-------------------------------------*/
.section-bg-gray{ background-color: var(--bg-soft);}

.common-section{ padding-bottom: 6em; }

.common-section h2:first-child{
  position: relative;
  width: fit-content; margin-inline: auto;
  margin-block: 2em 1.5em; margin-bottom: 0;
  padding-bottom: 0.5em;
  font-size: 2em; font-weight: 700; line-height: 1.4; letter-spacing: 0.08em; text-align: center;
  border-bottom: 3px solid var(--accent);
}
.common-section h2:first-child b{ display: block; font-size: 0.6em; margin-bottom: 0.5em; }
.common-section h3{ font-size: 1em; font-weight: bold; text-align: center; } /* 詳細はセクション単位 */
.common-section h3 b{ display: block; font-size: 0.6em; margin-bottom: 0.5em; }


/* 見出し直下の上マージン制御   */
h2 + p ,
h2 + .read ,
h3 + p ,
h3 + .read{ margin-top: calc( 1em + 1vw ); }
h2 + table{ margin-top: calc( 2em + 1vw ); }

/* 基本セクションのPは特殊中央寄せ */
.common-section p{
    max-width: var(--width-box); margin-left: auto; margin-right: auto;
    width: fit-content; margin-inline: auto; 
    text-align: left; line-height: 1.8; letter-spacing: 0.05em;
 }



/* ---------------------------
アコーディオン
.common-sectionの後に書く
------------------------------*/
.acc-wrap{ font-size: 0.9em; max-width: var(--width-box); margin-left: auto; margin-right: auto; margin-top: 3em; }
.acc-contents p{ margin-inline:0; }
.acc-contents ul{ list-style:circle; margin-top: 1.5em; }

/* ---------------------------
 グリッド基本 
------------------------------*/
.wrap-grid{ display: grid; grid-template-columns: 1fr; gap: 1.5em; margin: 3em 0; }
@media (min-width: 420px) { .wrap-grid { grid-template-columns: 1fr 1fr; } }
.wrap-grid-image-text { display: grid; gap: 1.5em; align-items: flex-start; margin-bottom: 3em; }
@media (min-width: 40em) { .wrap-grid-image-text { grid-template-columns: 1fr 2fr; } }

/* ---------------------------
 ボックスを縦カラム化（ボタンや画像の位置を揃える）
------------------------------*/
.set-col{ display: flex; flex-direction: column; }
.set-col >:last-child{ margin-top: auto; margin-bottom: 0;}

/* ---------------------------
 フレックスやグリッドのボックス
------------------------------*/
.box-item { position: relative; font-size: 0.9em; color: var(--text-body);  }
.wrap-grid .box-item{ border: 1px solid var(--border-color); padding: 1.5em; border-radius: 0.3em; }

.box-item h4:first-child ,
.box-item h3:first-child { font-size: 1.2em; color: var(--base-navy); font-weight: bold; margin: 0 auto ; }
.box-item h4:first-child span ,
.box-item h3:first-child span { display: block; font-size: 0.7em; }
.box-item h4 + p ,
.box-item h3 + p { margin-top: 1em;}

.box-item .btn{ width: 100%; margin-top: auto; margin-bottom: 0; } /* flex-column で下詰めする設定 */
.box-item .btn a {
    display: block; text-align: center; padding: 1em; margin-top: 1em; border-radius: 4px; 
    font-size: 1em; color:var(--text-white); line-height: 1; background: var(--base-color);
    text-decoration: none; font-weight: bold;
}

.box-item picture{ margin: 0; padding: 0; }
.box-item picture + p{ margin-top: 1em; }

/* ボックスのバリエーション */
.box-item.type1{
    background: var(--bg-white); box-shadow: 0 0.5em 1.5em rgba(0,0,0,0.05);
    border-radius: 0.8em; border-top: 0.5em solid var(--base-navy);
    font-size: 0.95em; text-align: left; padding: 2.5em;
}
.box-item.type-border-top-red{ border-top-color: var(--alert-red); }


/* flex columnで画像の縦幅を揃える ボックス設定下に書く */
.img-align-height picture{ aspect-ratio: 4 / 3; max-height: 240px; margin-left: auto; margin-right: auto; overflow: hidden; padding:1.25em; }
.img-align-height img{ width: 100%; height:100%; object-fit: cover; }
.img-align-height picture:last-child img{ margin-top: 1em; }


/* ---------------------------
ボックス
------------------------------*/
.boxset1{
    background: var(--bg-soft); border-radius: 0.5em;
    padding: 2em; margin: 1.75em auto;
}
.boxset1 h3 { font-size: 1.1em; color: var(--text-body); text-align: center; font-weight: bold; margin: 0 0 0.5em; }

.boxset2{
    border: 1px solid var(--border-color); background-color: var(--bg-gray-light);
    padding: 1.5em; margin: 1.5em auto;
    width:100%; /* 原因不明のインライン化の暫定対処 */
}
.boxset2 h4:first-child ,
.boxset2 h3:first-child { font-size: 1.1em; color: var(--text-body); font-weight: bold; text-align: center; margin: 0 0 0.75em; }

.boxset2 h4:first-child span ,
.boxset2 h3:first-child span { display: block; font-size: 0.8em; }

/* ボックスに追加するバリエーション */
.boxset2.type-small { font-size: 90%; padding: 1em; }
.boxset2.type-gray { filter: grayscale(100%); }
.boxset2.type1 { border-top: 4px solid var(--base-color); background-color: var(--bg-soft); }

.boxset2.type2 { width: auto; border: 1px solid var(--base-color); }
.boxset2.type2 h3 { color: var(--text-body); border-color: var(--text-body); }
.boxset2.type3 { box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.boxset2.type3 h3 { color: #444; }

.boxset2.type4 { border: 3px dotted var(--base-color); border-radius: 1em;  }


/* グリッドやフレックスを内包するボックス */
.boxset-wrap-grid{
      background: var(--bg-soft); border: 1px solid var(--border-color); border-radius: 4px;
      padding: 1.5em;  margin-bottom: 2em;
}

/* 見出し直下の上マージン制御   */
/* ボックス汎用設定の最後に書く */
h2 + .boxset1 ,
h2 + .boxset2
h3 + .boxset1 ,
h3 + .boxset2{ margin-top: 1.5em; }



/*-----------------------------
 診断ボックス 
-----------------------------*/
.diag-container {
    max-width:var(--width-narrow);
    margin: calc( 2.5em + 1vw ) auto; padding: 2.5em;
    background:var(--bg-white); border: 0.2em solid var(--accent); border-radius: 0.8em;
    font-size: 0.8em;
}
.diag-container h3 {
    font-size: 1.5em; margin-top: 0; margin-bottom: 1.2em;
    color:var(--accent); text-align: center;
}
/* チェックリスト */
.diag-container .diag-list { margin-bottom: 2em; }
.diag-container .diag-item { display: block; margin-bottom: 1em; cursor: pointer; }
.diag-container .diag-item input { transform: scale(1.2); margin-right: 0.8em; }

 /* 診断ボタン */
.diag-container .diag-submit {
    width: 100%; border: none; border-radius: 0.4em;
    color: var(--text-white); background:var(--accent);
    font-size: 1.2em; font-weight: bold; padding: 1em 2em;
    cursor: pointer; transition: background 0.3s;
}
.diag-container .diag-submit:hover { opacity: 0.9; }
.diag-container .result {font-size: 1.1em; color:var(--accent); font-weight: bold; }





/*-----------------------------
個別最適化
<section class="common-section section-optimization">
-----------------------------*/
dl.opti-list { max-width: var(--width-narrow); margin:calc( 2em + 1vw ) auto; }
.opti-list dt { font-size: 1.1em; font-weight: bold; margin: 0 0 0.4em; }
.opti-list dt::before {
        display:inline-block; margin-left: -2em; margin-right: 1em;
        content: "●"; font-size: 0.8em; color:var(--accent); }
.opti-list dd { margin: 0; }
.opti-list dd.tips { font-size: 0.9em; color: var(--text-muted); }
.opti-list dd + dd { margin-top: 0.5em; }
.opti-list dd + dt { margin-top: 2.0em; }


/*-----------------------------
工程期間
<section class="common-section section-policy-timeline">
-----------------------------*/
.section-policy-timeline h2 b::before ,
.section-policy-timeline h2 b::after { display: inline-block; content: "～"; margin-left: 1em; margin-right: 1em; }
.section-policy-timeline h3{
    width: fit-content; margin-inline: auto; margin: 3em auto 0;
    font-size: 1.75em; font-weight: bold; text-align: center;
    border-bottom: 1px solid var(--base-navy);
}
.table-timeline td::after{ content: "ヶ月"; font-size: 0.6em; }


/*-----------------------------
引き受け条件
<section class="common-section section-commitments ">
-----------------------------*/
.section-commitments{ padding-top: 3em; padding-bottom: 0; } /* 次セクションと連続しているように見せる */

.commitment-box {
    position: relative;
    max-width:var(--width-box); margin: 2em auto; padding: 3em calc( 2em + 2vw );
    border: 0.1em solid var(--border-color); border-radius: 1em; background-color:var(--bg-soft);
}
.commitment-box h2{ font-size: 1.4em !important; color: var(--base-color) !important; }

dl.promise-list { margin:calc( 2em + 1vw ) auto ; padding-left: 2em; }
.promise-list dt { font-size: 1.1em; color:var(--text-body); font-weight: bold; margin: 0 0 0.4em; }
.promise-list dt::before {
        display:inline-block; margin-left: -2em; margin-right: 1em;
        content: "●"; font-size: 0.8em; color:var(--accent);    
}
.promise-list dd { margin: 0; }
.promise-list dd.tips { font-size: 0.9em; color: var(--text-muted); }
.promise-list dd + dd { margin-top: 0.5em; }
.promise-list dd + dt { margin-top: 2.0em; }


/*-----------------------------
メッセージ
<section class="section-closing-message">
-----------------------------*/
.section-closing-message { padding:3em 1.5em 3em; }
.section-closing-message .message-frame {
    position: relative; max-width:var(--width-box); margin: 0 auto;
    text-align: left; padding: 1.5em 3em;
    background: var(--bg-accent);  border: 0.1em solid var(--accent); border-radius: 1.5em;
}
.message-frame h2 {
    position: absolute; top: -1em; left: 2em; border-radius: 2em;
    background:var(--accent); color: #fff;
    font-size: 0.9em; font-weight: bold; padding: 0.3em 1.5em;
}
.message-frame p { line-height: 1.9; margin-bottom: 1.5em; text-align: justify; }
.message-frame p:last-of-type { margin-bottom: 0; }


/*-----------------------------
募集概要
<section class="common-section section-cta">
-----------------------------*/
.section-cta h3{
    width: fit-content; margin-inline: auto; margin:0 auto ;
    font-size: 1.25em; font-weight: bold; text-align: center;
    border-bottom: 1px solid var(--text-muted);
}

h3 + .info-table{ margin-top: calc( 1em + 1vw ); }
.section-cta h2 + h3 ,
.info-table + h3{ margin-top: calc( 2.5em + 1vw ); }
.info-table + p{ margin-top: calc( 1em + 1vw ); }

.info-table{
    width: 100%; max-width: var(--width-narrow); margin-left:auto; margin-right: auto; 
    border: 1px solid var(--border-color);
    box-shadow: 0 3px 12px rgba(0,0,0,0.05); border-radius: 8px; overflow: hidden;
}
.info-table table { width: 100%; margin: 0; border-collapse: collapse; border-spacing: 0; }
.info-table th {
    color:var(--text-body); background:var(--bg-accent);
    padding: 1.2em 1.5em; border-bottom: 0.1em solid var(--border-light);
}
.info-table td { padding: 1.2em 1.5em; border-bottom: 0.1em solid var(--border-light); }
.info-table tr:last-child th,
.info-table tr:last-child td { border-bottom: none; }
.info-table td span.tips { display: block; margin-top: 0.75em; font-size: 0.8em; color: var(--text-muted); } 


/*-----------------------------
申し込み
<section class="common-section entry-section">
-----------------------------*/
h2 + .box-flow{ margin-top: calc( 2em + 1vw ); }

.box-flow{
    width: 100%; max-width:var(--width-narrow); padding: 1.5em; margin: 0 auto; 
    border: 1px solid var(--border-color); background-color:var(--bg-white); border-radius: 8px; 
}
.box-flow h3{
    text-align: left; font-size: 1.25em;
    margin-top: 0; color: var(--base-color); margin-bottom: 1em;
}
.box-flow h3 span{
    display: inline-block; background: var(--base-color); color: var(--bg-white);
    padding: 0.2em 0.5em; border-radius: 4px; margin-right: 0.5em; font-size: 0.9em;
}
.box-flow p{ text-align: left; margin-inline:0; }
.box-flow ul{ list-style: none; padding: 0; margin: 2em; }
.box-flow ul.listmark-type1{ margin-left: 1em; } 
.box-flow ul.listmark-type1 li::before{ content: "・"; font-size: 0.8em; margin-right: 0.5em;  vertical-align: middle;  } 

.box-flow p:last-child{ color: var(--text-muted); font-size: 0.8em;}
.box-flow p:last-child::before{ content:"※"; margin-right: 0.25em; }

.box-flow ul.listmark-type2{ margin-left: 0.5em; } 

.box-flow dl{
    font-size: 0.95em; margin:1.2em 0 1em; padding: 1em;
    background-color:#f6f6f6; border-left: 4px solid #ccc; 
}
.box-flow dt{ font-weight: bold; }
.box-flow dt::before{ content: "【"; margin-right: 0.2em; margin-left: -0.5em; }
.box-flow dt::after{ content: "】"; margin-left: 0.2em; }

.entry-section .arrow{ text-align: center; color: #ddd; font-size: 1.2em; margin: 1em auto; }
.entry-section .arrow::before{ content: "▼"; }

/*-----------------------------
LINE
<section class="common-section section-flow">
-----------------------------*/
.cta-line{
    position: relative;
    max-width: var(--width-narrow); margin: 3em auto; 
    padding: 3em 1.5em; text-align: center;
    background-color:var(--bg-soft); border: 0.05em solid #444; color: #333;
}
.cta-line h3{ font-size: 1em; border: none; margin: 0 auto; }

.line-assets { 
    position: relative;
    display: flex; flex-wrap: wrap; justify-content:space-evenly; align-items: center; gap: 20px;
    max-width: var(--box-width); margin: 20px auto; padding: 10px 15%;
}
.line-assets a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity:0; }
.line-assets a:hover{ opacity: 0;}
.line-assets picture { flex: 1; max-width: 100px; }
.line-assets p { flex-basis: 100%; font-size: 0.8em; margin: 0 auto; text-align: center; }

/* コピペ用ボックス */
.copy-box {
    text-align: left; margin-top: 2.5em; padding: 1.5em;
    background-color: rgba(255, 255, 255, 0.5); border: 0.05em solid #ccc; border-radius: 0.2em;
}
.copy-box h4 { font-size: 0.9em; color: #444; font-weight: bold; text-align: center; margin-bottom: 1em; }

/* コピー元のテキストエリア */
#copy-target {
    width: 100%; max-width: 600px; margin: 0 auto; height: 6em; resize: none;  padding: 1em;
    font-family: inherit; font-size: 0.8em; line-height: 1.6; color: #555;
    background-color: #fcfcfc; border: 0.05em solid #ddd; border-radius: 0.2em;
}
.btn-copy {
    display: block; width: 100%; margin-top: 1em; padding: 1em;
    background-color: #06C755; color: #fff; border: none; border-radius: 0.2em;
    font-weight: bold; cursor: pointer; transition: opacity 0.2s;
}
.btn-copy:hover { opacity: 0.8; }
#copy-target:focus { outline: none; border-color: #ccc; }

.btn-policy{
    width: fit-content; margin-inline: auto; text-align: center;
    font-size: 0.7em; color: var(--text-muted); text-decoration: underline;
    margin-top: 1em; cursor: pointer;
}


/* Dialog Styling */
/* ダイアログが表示された時のスタイルを強制する */
.close-btn button { all: unset; cursor: pointer; }
.close-btn button:focus, .close-btn button:focus-visible { outline: none !important; box-shadow: none !important; }
.close-btn button::-moz-focus-inner { border: 0 !important; padding: 0 !important; }
.close-btn button::-webkit-focus-inner { border: 0 !important; padding: 0 !important; }
dialog[open] {
    display: block; position: fixed; top: 50%; left: 50%; z-index: 9999;
    transform: translate(-50%, -50%); margin: 0;
    font-size: 0.8em;
}
#policy-dialog {
    background: #1a1a1a; color: #ffffffcc;
    border: 1px solid var(--bg-gray);
    padding: 2em; max-width: 90%;
}
#policy-dialog .close-btn { text-align: center; margin-top: 1em; border: 1px solid #ffffffaa; }
#policy-dialog .close-btn button{ width: 100%;}





/*-----------------------------
ページ下部に設置するナビ
-----------------------------*/
.sub-footer-grid{ margin-top: 2em; border-top: 1px dotted var(--border-color); }
.sub-footer-grid ul { display: grid; grid-template-columns: 1fr 1fr; gap:0 1em; align-items: end; margin: 2em auto; }
.sub-footer-grid li{
    display: block; border-radius: 0.3em; padding: 0;
    font-size: 1em; font-weight: bold; line-height: 1.4; list-style: none; 
    text-align: center; text-decoration: none;
}
.sub-footer-grid li a{ display: block; padding: 1.5em 0.5em; color: inherit; text-decoration: none; }
.sub-footer-grid ul li:nth-child(1){ background-color:var(--base-color); color:var(--text-white); border: 1px solid var(--base-color); }
.sub-footer-grid ul li:nth-child(2){ color: var(--base-color); border: 1px solid var(--base-color); }
.sub-footer-grid ul li:nth-child(3){
    grid-column: 1 / -1; padding: 0.5em; margin-top: 0;
    font-size: 0.85em; color: var(--text-body); font-weight: normal; text-decoration:underline;
}
/* スマホでは縦に積む */
@media (max-width: 480px) { .sub-footer-grid ul { grid-template-columns: 1fr; gap: 1em; } }