@charset "utf-8";
/* =========================================================================
 * ⚡️ 【ウェブページ固有：初期表示スタイル】 (page-initial.css)
 * =========================================================================
 * このファイルは、指定されたウェブページにおいて「最優先」で
 * レンダリングされるべき、レイアウトの骨格を定義しています。
 *
 * 【役割】
 * - 対象ページで「ファーストビュー」に表示されるパーツの領域確保。
 * - ページ固有の構造（記事本文、サイドバー、特定レイアウト等）の定義。
 *
 * 【遅延読み込みとの境界線】
 * 本ファイルは「ページを開いた瞬間に表示されるもの」のみを記述してください。
 * ページ読み込み完了後に適用される装飾や、ページ下部にある要素については、
 * style_base, style_contents への記述をお願いします。
 *
 * 【⚠️ 運用上の注意】
 * 1. ウェブページごとに読み込まれるため、全ページ共通の定義は
 * initial.css (または共通CSS) に集約し、ここには書かないでください。
 * 2. ページ遷移時や直接アクセス時に崩れないよう、このファイルが適用された時点で
 * 大枠のレイアウトが正しく見えるように管理してください。
 * ========================================================================= */

.productid { /* ウェブページ テンプレ */
    position: absolute;
    left: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

/* テーブル */
.tbl1 {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    border-collapse: collapse;
}
.tbl1 td, .tbl1 th {
    padding: 15px 8px;
    word-break: break-all;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.2;
}
.tbl1.txt_L td, .tbl1.txt_L th { text-align: left;}

.tbl1 th {
    border: 1px solid #fff;
    background: #005a19;
    color:#fff;
}
.tbl1 td { border: 1px solid #c2c2c2;}
.tbl1 p { line-height: 1.2;}
.contents .tbl1 tbody th {
    border: 1px solid #c2c2c2;
    background: #f3f5f4;
    color:#172125;
}

/* 枠 */
.box_border {
    border: 3px dotted #9f9fa0;
    border-radius: 10px;
    padding: 4%;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 30px;
}
.box_border p:last-child { margin-bottom: 0;}

.box_shadow_l {
    box-shadow: 0 0 5px #ccc;
    padding: 1%;
    box-sizing: border-box;
    width: 100%;
}
img.img_shadow {
    box-shadow: 1px 2px 5px #acacac;
    box-sizing: border-box;
}
/* ボタンリンク群（ペットページで使用） */
.btn_link img.img_shadow { border-radius: 10px;}

.youtube iframe { width: 100%;}

/* リスト */
.list_disc li{
    list-style: disc;
    margin: 5px 0 5px 20px;
}

/* 目次 */
.box_shadow_l .ttl {
    background: url("https://yutakani.club/sankotsu-funkotsu/images/ttl_bg_grn.jpg");
    text-align: center;
    font-weight: bold;
    color: #fff;
    padding: 1%;
}
.mokuji dt, .mokuji dd,
.mokuji li, .mokuji li li {
    padding-left: 1.2em;
    text-indent: -.7em;
    margin: 5px 0;
}
.mokuji  li li { padding-left: 0.2em;}
.mokuji dt:before,
.mokuji li:before{
    content: "〇";
    color: #005a19;
    font-weight: bold;
    margin-right: 5px;
}
.mokuji dd:before,
.mokuji li li:before{
    content: "●";
    color: #005a19;
    font-weight: bold;
    margin-right: 5px;
    margin-left: 15px;
    font-size: 1.0rem;
}
.mokuji a {
    color: #005a19;
}

/* アコーディオンン */
/* お客様の声 アコーディオン は style_base */
.accordion { margin-bottom: 24px;}
.accordion .toggle {
    cursor: pointer;
    position: relative;
    margin-bottom: 0;
}
.accordion .toggle::before {
    content: " ";
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 6px;
    background: url(/sankotsu-funkotsu/images/arw-down.png) no-repeat left center;
    width: 25px;
    height: 25px;
}
.accordion .toggle.active::before { background: url(/sankotsu-funkotsu/images/arw-up.png) no-repeat left center; }
.accordion .toggle_txt {
    display: none;
    padding: 15px 10px 10px;
    margin-top: -4px;
    border: 1px solid #c1c1c1;
    border-top: none;
    border-radius: 0px 0px 4px 4px;
}
.accordion.mb0 { margin-bottom: 0;}
.accordion.mb0 .toggle_txt { margin-bottom: 0;}

/* QA */
.qa_box li { margin: 10px auto 40px;}
.qa_box li .ques ,
.qa_box li .ans {
        display: inline-flex !important;
    box-sizing: border-box;
}
.qa_box li .ques { margin-bottom: 16px;}
.qa_box li .ques .circle ,
.qa_box li .ans .circle {
        width: 30px;
    height: 30px;
}
.qa_box li .ques .circle { background: #8b6232;}
.qa_box li .ques .circle div ,
.qa_box li .ans .circle div {
        width: 30px;
        font-weight: bold;
        font-size: 2.0rem !important;
        line-height: 1 !important;
}
.qa_box li .ques .circle + div ,
.qa_box li .ans .circle + div {
        padding-left: 10px;
        width: calc(100% - 30px);
}
.qa_box li .ques .circle + div p ,
.qa_box li .ans .circle + div p {
        font-size: 2.0rem !important;
        line-height: 1.5;
        margin-top: 2px;
}
.qa_box li .ques .circle + div p:first-child ,
.qa_box li .ans .circle + div p:first-child { margin-top: 0px;}

/* 写真にテキストを載せる 会社概要のみ */
.pic_bottom_txt { position: relative; }
.bottom_txt {
    position: absolute;
    bottom: 0; right: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    text-align: center;
    padding: 4px 6px;
    font-size: 14px; font-size: 1.4rem;
    width: 100%;
    box-sizing: border-box;
}