/* ======================================================================
 * 1. 基本スタイル (Reset & Base Styles)
 * ====================================================================== */

/* HTML5要素をブロックレベル要素として定義 */
article, aside, canvas, details, figcaption, figure, header,
footer, hgroup, menu, nav, section, summary {
    display: block;
}

html {
    scroll-behavior: smooth;
}

body {
    margin-left: auto;
    margin-right: auto;
    background: #FFF url(img/bg_cardboard.jpg) left top;
    font-size: calc(10px + 0.6vw); /* ベースフォントサイズ + 画面幅に応じた可変サイズ */
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

a {
    color: black;
    text-decoration: none;
}

a:hover {
    color: #ff0055;
}

ul, li {
    padding: 0;
    list-style-type: none; /* 点を無くす */
}

div {
    border-radius: 10px;
}

hr.order {
    border-width: 4px 0px 0px 0px; /* 太さ1px */
    border-style: dashed; /* 線種を破線に */
    border-color: red;   /* 線色を赤色に */
    height: 1px;         /* 高さ(※古いIE用) */
}

/* <hr>タグ用の新しいクラス */
.section-divider {
    width: 80%;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em auto;
}

.button {
	font-size:120%;
	color:white;
}


/* button{
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
} */

/* ======================================================================
 * 2. 汎用・ユーティリティクラス (Utility Classes)
 * ====================================================================== */

/* --- スペース調整 --- */
.space-ml-1em { margin-left: 1em; }
.space-ml-2em { margin-left: 2em; }
.space-pr-2em { padding-right: 2em; }
.space-pl-1em { padding-left: 1em; }
.space-pl-2em { padding-left: 2em; }
.custom-spacer { height: 1em; }

/* --- テキスト・フォント --- */
.fon16 { font-size: 16px; }
.fon14 { font-size: 14px; }
.fon12 { font-size: 12px; }
.fon10 { font-size: 10px; }
.fon20e { font-size: 2.0em; }
.fon13e { font-size: 1.3em; }
.fon10e { font-size: 1.0em; }
.fonsmall { font-size: small; }
.fonlighter * { font-weight: lighter; }

/* --- 配置 --- */
.flex { display: flex; padding: 0px; flex-wrap: wrap; }
.right { text-align: right; }
.aligncenter, .aligncenter9, .aligncenter8, .aligncenter7, .aligncenter6 { display: block; margin-left: auto; margin-right: auto; }
.aligncenter { width: 100%; }
.aligncenter9 { width: 90%; }
.aligncenter8 { width: 80%; }
.aligncenter7 { width: 70%; }
.aligncenter6 { width: 60%; }

/* --- 色 --- */
.kon { background-color: rgba(29, 32, 137, 1); color: white; } /* 紺色 */
.azuki { background-color: rgba(152, 34, 34, 1); color: white; } /* 小豆色 */
.midori { background-color: #8cc6ae; color: white; } /* 緑色 */
.basetya { background-color: #523e19; color: white; } /* 濃い茶色 */
.sasitya { background-color: #aa814b; color: white; } /* 薄い茶色 */
.CameoPink { background-color: #EBC3CB; }
.CadetBlue { background-color: #B2AFCC; }
.Champagne { background-color: #F6E2D4; }
.Cornsilk { background-color: #FFFBDB; }
.BeauBlue { background-color: #B6D8DB; }
.TeaGreen { background-color: #D3EBC7; }
.linen { background-color: linen; }
.shiro { background-color: white; }
.gainsboro { background-color: gainsboro; }
.shirohai { background-color: #EEEEEE; }

/* --- その他 --- */
.order { color: red; font-weight: bold; width: 80%; }
.success { font-size: x-large; font-weight: bolder; margin: 1.5em 50px; padding: 1.5em 0; background-color: #e8f198; border: solid 1px #c6e148; text-align: center; color: #4e4c35; }
.wtn_copyright { display: none; }

/* --- floatベースのカラム (古いレイアウト) --- */
.column0 { padding: 3px; float: left; background: #00BFFF; }
.column { padding: 3px; float: left; border: 1px solid #333333; background: #ccffff; }
.column9 { width: 90%; }
.column8 { width: 80%; }
.column7 { width: 70%; }
.column6 { width: 60%; }
.column5 { width: 50%; }
.column4 { width: 40%; }
.column3 { width: 30%; }
.column2 { width: 20%; }
.column1 { width: 10%; }
#left { float: left; }
#right { float: right; }

/* ======================================================================
 * 3. レイアウト (Layout)
 * ====================================================================== */

#header {
    margin-top: 0;
    margin-left: 0;
    margin-right: auto;
    width: 100%;
    background-color: rgba(63, 41, 0, 0.7); /* 文字化け: wiF */
    padding: 8px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.header {
    left: 0;
    width: 100%;
    background-color: rgba(63, 41, 0, 0.75);
    color: #fff;
    padding: 2px 0px;
    text-align: center;
}

.container {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    word-break: break-all;
    box-sizing: border-box;
}

.wrapper {
    position: relative;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.inner {
    border: 0px solid black;
    width: 70%;
    margin: auto;
    border-radius: 10px;
    font-size: calc(14px + 0.8vw);
}

/* --- .inner レスポンシブ対応 --- */
@media (max-width: 890px) {
    .inner { width: 80%; }
}
@media (max-width: 500px) {
    .inner { width: 100%; border-radius: 0; }
}

/* --- グリッドレイアウト --- */
.wrapper-grid {
    display: grid;
    display: -ms-grid;
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-columns: repeat(2, 1fr);
}
.wrapper-left { grid-column: 1 / 2; -ms-grid-column: 1; }
.wrapper-right { grid-column: 2 / 3; -ms-grid-column: 2; }
.box1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 3; }
.box2 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; }
.box3 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; }
.box4 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; }

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0px;
    padding: 20px;
    background: url(img/bg_bro.jpg);
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}
.column-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 40px 10px;
    box-sizing: border-box;
    border-right: solid 5px #dcdcdc;
    border-top: solid 5px #dcdcdc;
    border-radius: 0;
    margin-left: auto;
    margin-right: auto;
}

/* --- グリッドレイアウト レスポンシブ対応 --- */
@media (max-width: 768px) {
    .grid-container { grid-template-columns: repeat(2, 1fr); padding: 15px 10px; width: 80%; }
}
@media (max-width: 500px) {
    .grid-container { width: 90%; }
}

/* ======================================================================
 * 4. コンポーネント (Components)
 * ====================================================================== */

/* --- タイトルロゴ --- */
.title_logo { font-weight: bold; font-size: x-large; vertical-align: bottom; border-bottom: solid 2px; }
.ti-sub { vertical-align: sub; }
.ti-top { vertical-align: top; }

/* --- タグ --- */
.tag { display: inline-block; padding: 0.25em 0.4em; font-size: 75%; font-weight: bold; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem; }
.tag-danger { background-color: #d9534f; }
.tag-default { background-color: #78909C; }

/* --- フォーム --- */
.form { width: 80%; border: 1px solid #ccc; margin: 0 auto; }
.form-title { display: inline-block; padding: 0.2em 3.5em; white-space: nowrap; border-radius: 1rem; text-align: center; font-weight: bold; font-size: 120%; }
.form li { border: 1px solid #ccc; vertical-align: middle; font-size: 1.5em; }
.form-contact { text-align: left; grid-column: 2 / 3; -ms-grid-column: 2; margin: 0px 0px 0px 10px; padding: 5px 0px 5px 20px; }
.form-base { display: grid; display: -ms-grid; grid-template-columns: 30% 1fr; grid-template-rows: auto auto; -ms-grid-columns: 30% 1fr; -ms-grid-rows: auto auto; margin: 10px; }
.form-side { text-align: right; grid-column: 1 / 2; -ms-grid-column: 1; background-color: #dbc0af; padding: 5px 20px 5px 0px; white-space: nowrap; }
.form-side2 { grid-row: 2; -ms-grid-row: 2; }
.form-main { text-align: left; grid-column: 2 / 3; -ms-grid-column: 2; background-color: burlywood; margin: 0px 0px 0px 10px; padding: 5px 0px 5px 20px; }
.form-main2 { grid-row: 2; -ms-grid-row: 2; }
.form-line { text-align: left; background-color: #c1e3e3; margin: auto; padding: 5px 0px 5px 20px; width: 95%; white-space: nowrap; }
.form caption, .form th { font-weight: bold; white-space: nowrap; }
.form input, .form textarea { font-size: 1.5em; }
.td-side { text-align: right; width: 30%; }
.td-title { display: inline-block; padding: 0.25em 4em; white-space: nowrap; border-radius: 1rem; text-align: center; font-weight: bold; font-size: 120%; }

/* --- 会社概要テーブル --- */
.Company { padding-top: 1em; }
.Company table { border-collapse: collapse; width: 100%; max-width: 690px; margin-bottom: 1em; border-top: 2px solid #CCC; border-right: 2px solid #CCC; font-size: large; font-weight: bold; clear: left; }
.Company table th, .Company table td { border-bottom: 2px solid #FFF; margin: 0; }
.Company table th { background: #CCC; width: 150px; padding: 10px; font-weight: bold; }
.Company table td { padding: 10px 2em; border-bottom: 2px solid #CCC; }

/* --- メニュー --- */
.check_menu { margin-right: 3em; }
.check_menu, .go_top { text-align: right; font-size: large; }
.check_menu a { padding-right: 1em; }

ul.topmenu { width: 140px; margin: 5px; padding: 0; list-style-type: none; background-color: #eeeeee; }
.topmenu li a { display: block; padding: 2px 5px; color: #000000; }
.topmenu li { text-align: center; border-bottom: 1px solid #ccc; }
.topmenu li :last-child { border-bottom: none; }
.topmenu li a.active { color: #000000; background-color: #d7f7ea; }
.topmenu li a.title { color: #ffffff; background-color: #A5A2C3; }
.topmenu li a:hover:not(.title) { color: #ffffff; background-color: #1b2538; }



/* --- バナー・動画 --- */
.main-video { display: block; max-width: 700px; width: 90%; height: auto; margin-left: auto; margin-right: auto; padding: 1em; z-index: 20; background: url(img/bg_bro.jpg); box-sizing: border-box; }
.top-banner1, .top-banner2, .top-banner3, .top-banner4 { display: flex; flex-wrap: wrap; list-style: none; background: url(img/bg_bro.jpg); border-radius: 10px; }
.top-banner1 li, .top-banner2 li, .top-banner3 li, .top-banner4 li { box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.top-banner1 li { width: calc(100%); padding: 20px 40px 25px 40px; }
.top-banner2 li { width: calc(100% / 2); padding: 20px 15px 25px 10px; }
.top-banner3 li { width: calc(100% / 3); padding: 20px 15px 25px 10px; font-size: calc(8px + 0.4vw); }
.top-banner4 li { width: calc(100% / 4); padding: 20px 25px 25px 20px; }
.top-banner1 li img, .top-banner2 li img, .top-banner3 li img, .top-banner4 li img { max-width: 100%; height: auto; border: solid 2px #ccc; box-shadow: 5px 10px 5px 5px rgba(0, 0, 0, 0.5); }
.top-box { box-shadow: 5px 10px 5px 5px rgba(0, 0, 0, 0.5); }
.banner-line { border-left: 5px solid #dcdcdc; }
.banner-title { padding: 15px 15px 0px 15px; border: solid 8px #eee; box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5); font-weight: bold; text-align: center; font-size: large; color: #000; }
.banner-tri { font-size: xx-large; border: 0px; margin: 15px auto; }
.banner-cap { padding: 10px; border: solid 5px #bbb; box-shadow: 5px 10px 5px 5px rgba(0, 0, 0, 0.5); font-weight: bold; text-align: center; font-size: x-large; color: #000; background: url(img/bg_cardboard.jpg); }
.banner-title span, .banner-cap { font-size: calc(8px + 0.7vw); }

/* --- バナー レスポンシブ対応 --- */
@media screen and (max-width: 600px) {
    .top-banner3-2 li { width: calc(50% - 8px); }
}

/* --- 診断ボタン --- */
.diagnosis-text-button { font-family: "Noto Serif JP", "MS Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif; background-color: #b87ffa; color: white; padding: 10px 15px; border-radius: 8px; white-space: nowrap; font-weight: bold; font-size: 1.2em; transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.diagnosis-text-button:hover { background-color: #a572f0; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.diagnosis-section-wrapper .container-wrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }

/* --- 診断ボタン レスポンシブ対応 --- */
@media only screen and (max-width: 768px) {
    .diagnosis-section-wrapper .container-wrapper { flex-direction: column; gap: 10px; align-items: center; width: 100%; box-sizing: border-box; padding: 0 10px; }
    #main-diagnosis-button img { width: 60px !important; height: auto !important; margin-right: 8px !important; }
    .diagnosis-text-button { width: 100%; white-space: normal; font-size: clamp(14px, 4.5vw, 18px); padding: 8px 12px; line-height: 1.4; }
    .plan-section-description { font-size: clamp(12px, 4vw, 16px); text-align: center; padding: 0 10px; box-sizing: border-box; max-width: 100%; word-break: break-word; line-height: 1.8; }
}

/* --- その他コンポーネント --- */
.choi-title { display: inline-block; width: 50%; text-align: center; font-weight: bold; background-color: #CCCCCC; }
.choice > li { background-color: #c1e3e3; }
.floatover { background-color: white; }
.floatover:hover { background-color: wheat; float: none; }
.info-box { border: 10px outset #31A9EE; text-align: center; max-width: 700px; width: 90%; height: auto; }
.item { background: url(img/bg_bro.jpg); border-radius: 10px; padding: 5px; text-align: center; width: 100%; max-width: 200px; margin-left: auto; margin-right: auto; }
.item img { width: 100%; height: auto; }
.blur, .blur > img { margin: 0; padding: 0; border: 0; }
.blur { position: relative; display: inline-block; font-size: 0; line-height: 0; }
.blur:after { position: absolute; left: 0; top: 0; right: 0; bottom: 0; -moz-box-shadow: inset 0px 0px 15px 15px #fff; -webkit-box-shadow: inset 0px 0px 15px 15px #fff; box-shadow: inset 0px 0px 15px 15px #fff; content: " "; }
.slide-arrow { position: absolute; top: 50%; margin-top: -15px; }
.prev-arrow { left: -40px; width: 0; height: 0; border-left: 0 solid transparent; border-right: 15px solid #113463; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.next-arrow { right: -40px; width: 0; height: 0; border-right: 0 solid transparent; border-left: 15px solid #113463; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }

/* --- Q&Aセクション --- */
.qa-section { margin-top: 1.0em; padding: 1em; }
.qa-section details { border: 1px solid #ddd; border-radius: 8px; margin-bottom: 1em; padding: 1em; background-color: #f9f9f9; }
.qa-section summary { font-weight: bold; cursor: pointer; position: relative; padding-left: 2em; color: #333; }
.qa-section summary::before { content: "Q."; position: absolute; left: 0; color: #1F70B5; font-size: 1.1em; }
.qa-section details > p { padding-left: 2em; line-height: 1.7; margin-top: 0.8em; color: #555; }
.table-container { overflow-x: auto; padding-left: 2em; margin-top: 0.8em; }
.shuhashikata-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.shuhashikata-table th, .shuhashikata-table td { border: 1px solid #ccc; padding: 0.8em; text-align: left; font-size: 0.8em; }
.shuhashikata-table th { background-color: #e9f5ff; font-weight: bold; }

/* ======================================================================
 * 5. フッター (Footer)
 * ====================================================================== */

/* --- ページ最下部フッター (.footer05) --- */
.footer05 {
    color: rgba(63, 41, 0, 0.95);
    background: rgba(63, 41, 0, 0.20);
    font-size: clamp(12px, calc(10px + 0.6vw), 14px);
}
.footer05 a { color: rgba(63, 41, 0, 0.95); text-decoration: none; }
.footer05 li a:hover { text-decoration: underline; }
.footer05 .wrap { max-width: 950px; width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; box-sizing: border-box; overflow: auto; }
.footer05 .wrap h3 { margin: 0 0 10px 0; padding: 0; border-bottom: 1px #808080 solid; background-color: rgba(230, 230, 230, 0.4); border-radius: 5px; text-align: center; border: 0; }
.footer05 .wrap p { margin: 0; padding: 0 0 20px 0; }
.footer05 .wrap .box { width: 18%; min-width: 135px; border-left: 1px #808080 solid; padding: 4px; border-radius: 0px; float: left; margin-left: 0.8%; margin-right: 0.8%; margin-bottom: 20px; box-sizing: border-box; }
.footer05 .wrap .box ul { margin: 0; padding: 0 0 20px 0; list-style: none; }
.footer05 .wrap .copyright { width: 950px; padding: 20px 0 0 0; }
.foot_copy { font-weight: bold; text-align: center; padding: 20px 0 0 0; }

/* --- スクロール追従フッター (#scroll_footer) --- */
div#scroll_footer {
    position: fixed !important;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(63, 41, 0, 0.75);
    color: #fff;
    padding: 10px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}
.footer-logo { height: 45px; vertical-align: middle; }
.footer-tel { display: flex; align-items: center; text-align: left; background-color: #fff; border: 2px solid #1F70B5; border-radius: 50px; }
.inqu { height: 50px; border-radius: 15px; vertical-align: sub; }
.inquiry-image-border { border: 2px solid gray; }

/* --- フッター関連ユーティリティ --- */
.page-footer { margin-bottom: 72px; } /* 固定フッターの重なり防止 */
.footer-contact-info { border-radius: 15px; border: 1px solid #808080; padding: 14px; }
.footer-banner-link { margin: 0 20px 0 5px; font-size: small; border-radius: 12px; border: 3px solid #808080; padding: 3px; background: white; }
.footer-spacer-2 { margin-top: 2em; }
.footer-spacer-6 { margin-top: 6em; }

/* --- フッター レスポンシブ対応 --- */
@media only screen and (max-width: 999px) {
    .page-footer { margin-bottom: 40px; }
    .inqu { height: 30px; border-radius: 15px; }
    .footer-logo { height: 35px; }
    .footer-tel { font-size: 1rem; padding: 4px 8px; }
}
@media only screen and (max-width: 500px) {
    .page-footer { margin-bottom: 100px; }
    .footer05 .wrap .fitem1, .footer05 .wrap .fitem2, .footer05 .wrap .fitem3, .footer05 .wrap .fitem4, .footer05 .wrap .fitem5 { width: 47%; }
    .fitem1 { order: -3; }
    .fitem5 { order: -1; }
}

/* ======================================================================
 * 6. ページ固有スタイル (Page Specific Styles)
 * ====================================================================== */

/* --- けんそうさいページ (007zsr2.html) --- */
.zsr-description { font-size: 1.3em; padding-bottom: 2em; }
.guideline-box { border: 10px solid skyblue; padding: 1em; margin-top: 1em; margin-bottom: 1em; }
.disaster-agreement-box { border: 10px solid skyblue; width: 80%; margin: 0 auto; padding: 1em; font-size: 1.3em; }
.zsr-intro { font-size: x-large; font-weight: bolder; clear: left; margin-bottom: 1em; }
.zsr-banner-img { width: 200px; }
.zsr-grid { display: grid; grid-template-columns: 250px 1fr; gap: 20px; align-items: center; margin-top: 2em; }

@media only screen and (max-width: 995px) {
    .zsr-grid { grid-template-columns: 1fr; }
    .zsr-grid > div { margin: 0 20px; }
}

/* --- 供花供物オーダーフォーム --- */



/* --- その他 --- */
div#stick { position: sticky; bottom: 0; left: 0; width: 100%; color: #fff; padding: 10px 0px; text-align: center; background: #FFF url(img/bg_cardboard.jpg) left top; }
* html div#page_all { height: 100%; overflow: auto; }
.aoadd { font-size: x-large; }
@media only screen and (max-width: 500px) {
    .aoadd { font-size: large; }
}