/* TABLE OF CONTENTS: * * 00 どのサイズでも共通で適用されるスタイル * - メインビジュアル * - 見出しデザイン * - 対応地域 * - 助成金 * - こんなお悩み * 01 幅 768px 未満 ( スマホの時だけ適用されるスタイル ) * - メインビジュアル * - 対応地域 * 02 幅 480px 以上 * 03 幅 768px 以上 ( PCの時だけ適用されるスタイル ) * - メインビジュアル * - 対応地域 * - 助成金 * - こんなお悩み * 04 幅 880px 以上 * 05 幅 1072px 以上 * 06 幅 1264px 以上 */ /* -------------------------------------------------------------------------------------------------------- 00 * * どのサイズでも共通で適用されるスタイル */ /* メインビジュアル */ .site-main #mainImg { background-color: #a4947c; background-repeat: no-repeat; background-position: center bottom; background-size: cover; padding-top: 1.5em; } /* 見出しデザイン */ h1[id*="-heading"] { white-space: nowrap; } /* 対応地域 */ section[id*="visit"] .choice-tab { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } section[id*="visit"] .choice-tab li { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-weight: bold; background: #f5f5f5; color: #999; list-style: none; padding: 0.4em; text-align: center; } section[id*="visit"] .choice-tab li:first-child { border-radius: 5px 0 0 5px; } section[id*="visit"] .choice-tab li:last-child { border-radius: 0 5px 5px 0; } section[id*="visit"] .choice-tab li.active { background: #ffd117; color: #333; } section[id*="visit"] .choice-tab li.active:after { border-top: 10px #ffd117 solid; border-right: 6px transparent solid; border-left: 6px transparent solid; content: ""; position: absolute; bottom: -20px; right: 0; left: 0; margin: 0 auto; height: 20px; width: 12px; } section[id*="visit"] .choice-show-panel { background-color: #FFF; border: 2px #ffd117 solid; border-radius: 5px; padding: 1em; } section[id*="visit"] .choice-show-panel ul li { list-style: none; } section[id*="visit"] .choice-show-panel ul:not([class*="rosen"]) { display: flex; flex-wrap: wrap; } section[id*="visit"] .choice-show-panel ul:not([class*="rosen"]) li { border-right: 1px #CCC solid; border-left: 1px #CCC solid; line-height: 1em; text-align: center; margin-top: 1em; margin-left: -1px; } section[id*="visit"] .choice-show-panel ul[class*="rosen"] { text-align: center; } section[id*="visit"] .choice-show-panel ul[class*="rosen"] li { display: inline-block; padding: 0 1em; } section[id*="visit"] div.st-box { margin-right: auto !important; margin-left: auto !important; } div.outer.visit { background-position: center bottom; background-repeat: no-repeat; background-size: cover; } /* 料金表 */ section[id*="cost"] p:not(.catch), table.cost-table { max-width: 1000px; margin-left: auto !important; margin-right: auto !important; } /* 助成金 */ section[id*="subsidy"] dt { border-left: 4px solid #ff9124; padding-left: 0.6em; margin-bottom: 1em; margin-left: 0.6em; font-size: 16px; } /* こんなお悩み */ section[id*="trouble"] div.st-box { padding: 0.6em 1.2em 0.4em; } section[id*="trouble"] div.st-box dl dd { margin: 0 0 1.5em 1.5em; } /* -------------------------------------------------------------------------------------------------------- 01 * * 幅 768px 未満 ( スマホの時だけ適用されるスタイル ) */ @media screen and (max-width: 767px) { /* メインビジュアル */ #mainImg { background-image: url(../img/bg/ci-mv-bg-sp.jpg); } /* 対応地域 */ section[id*="visit"] .choice-tab li:before { left: 10px; width: 20px; } section[id*="visit"] ul:not([class*="rosen"]) li { min-width: 6.9em; } div.outer.visit { background-image: url(../img/bg/ci-area-bg-sp.png); } } /* End max 767px */ /* -------------------------------------------------------------------------------------------------------- 02 * * 幅 480px 以上 */ @media screen and (min-width: 30em) {} /* End min 480px */ /* -------------------------------------------------------------------------------------------------------- 03 * * 幅 768px 以上 */ @media screen and (min-width: 48em) { /* メインビジュアル */ .site-main #mainImg { padding-top: 2em; } #mainImg { background-image: url(../img/bg/ci-mv-bg.jpg); } /* 対応地域 */ section[id*="visit"] .choice-tab li { font-size: 1.3em; line-height: 1.2em; /*padding-left: 140px;*/ /*text-align: center;*/ position: relative; } section[id*="visit"] .choice-tab li:before { right: 80%; width: 48px; } section[id*="visit"] .choice-tab li:before { content: ""; background-repeat: no-repeat; background-position: center; background-size: 100% auto; display: inline-block; position: absolute; top: 0; bottom: 0; } section[id*="visit"] .choice-tab li.area:before { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22_x31_0%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22width%3A%20128px%3B%20height%3A%20128px%3B%20opacity%3A%201%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%23374149%3B%7D%0A%3C%2Fstyle%3E%0A%3Cg%3E%0A%09%3Cpolygon%20class%3D%22st0%22%20points%3D%22105.66%2C355.676%2073.074%2C355.676%2073.074%2C416.996%2073.074%2C417.023%2037.242%2C417.023%2037.242%2C308.871%20%0A%09%0937.078%2C308.871%2037.078%2C305.879%2027.848%2C305.879%2023.977%2C305.813%2063.172%2C226.176%2086.676%2C178.629%20109.496%2C222.809%20123.058%2C249.282%20%0A%09%09123.11%2C249.176%20123.199%2C249.351%20154.465%2C185.848%20168.422%2C157.652%20168.344%2C157.652%20168.422%2C157.492%2074.734%2C157.492%201.746%2C305.879%20%0A%09%090.332%2C308.871%200%2C309.453%200%2C314.855%2017.293%2C314.855%2017.293%2C436.977%20125.942%2C436.977%20125.942%2C417.023%20105.66%2C417.023%20%09%22%20style%3D%22fill%3A%20rgb(153%2C%20153%2C%20153)%3B%22%3E%3C%2Fpolygon%3E%0A%09%3Cpath%20class%3D%22st0%22%20d%3D%22M511.82%2C289.918H512l-95.598-184.965h-17.625V65.465h-64.926v39.488h-121.37l-17.79%2C36.161l-4.738%2C9.644%0A%09%09l-3.324%2C6.734l-54.035%2C109.981l-9.226%2C18.789l-1.828%2C3.656l-0.332%2C0.746v6.57h21.113v119.789v19.954v9.558h345.825V289.918h16.32%0A%09%09l7.394%2C0.07L511.82%2C289.918z%20M379.242%2C153.25h-25.938V84.918h25.938v68.286V153.25z%20M463.785%2C421.934v0.246H333.59l-0.234-0.004%0A%09%09V289.918h130.43V421.934z%20M250.305%2C422.18v-5.157V347.11h-39.817v69.914v5.157h-43.812V289.918h-0.164v-3.656h-11.25l-4.762-0.07%0A%09%09l43.859-89.214l16.793-34.082l2.661-5.402l8.316-16.898l4.954-9.851l13.832%2C26.75l66.918%2C129.434v21.946V422.18h-7.562h-49.95%0A%09%09H250.305z%22%20style%3D%22fill%3A%20rgb(153%2C%20153%2C%20153)%3B%22%3E%3C%2Fpath%3E%0A%09%3Cpolygon%20class%3D%22st0%22%20points%3D%22210.649%2C232.309%20210.649%2C232.309%20210.488%2C232.309%20210.488%2C283.934%20250.305%2C283.934%20250.305%2C232.309%20%0A%09%09210.77%2C232.309%20%09%22%20style%3D%22fill%3A%20rgb(153%2C%20153%2C%20153)%3B%22%3E%3C%2Fpolygon%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A'); } section[id*="visit"] .choice-tab li.area.active:before { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22_x31_0%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22width%3A%20128px%3B%20height%3A%20128px%3B%20opacity%3A%201%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%23374149%3B%7D%0A%3C%2Fstyle%3E%0A%3Cg%3E%0A%09%3Cpolygon%20class%3D%22st0%22%20points%3D%22105.66%2C355.676%2073.074%2C355.676%2073.074%2C416.996%2073.074%2C417.023%2037.242%2C417.023%2037.242%2C308.871%20%0A%09%0937.078%2C308.871%2037.078%2C305.879%2027.848%2C305.879%2023.977%2C305.813%2063.172%2C226.176%2086.676%2C178.629%20109.496%2C222.809%20123.058%2C249.282%20%0A%09%09123.11%2C249.176%20123.199%2C249.351%20154.465%2C185.848%20168.422%2C157.652%20168.344%2C157.652%20168.422%2C157.492%2074.734%2C157.492%201.746%2C305.879%20%0A%09%090.332%2C308.871%200%2C309.453%200%2C314.855%2017.293%2C314.855%2017.293%2C436.977%20125.942%2C436.977%20125.942%2C417.023%20105.66%2C417.023%20%09%22%20style%3D%22fill%3A%20rgb(51%2C%2051%2C%2051)%3B%22%3E%3C%2Fpolygon%3E%0A%09%3Cpath%20class%3D%22st0%22%20d%3D%22M511.82%2C289.918H512l-95.598-184.965h-17.625V65.465h-64.926v39.488h-121.37l-17.79%2C36.161l-4.738%2C9.644%0A%09%09l-3.324%2C6.734l-54.035%2C109.981l-9.226%2C18.789l-1.828%2C3.656l-0.332%2C0.746v6.57h21.113v119.789v19.954v9.558h345.825V289.918h16.32%0A%09%09l7.394%2C0.07L511.82%2C289.918z%20M379.242%2C153.25h-25.938V84.918h25.938v68.286V153.25z%20M463.785%2C421.934v0.246H333.59l-0.234-0.004%0A%09%09V289.918h130.43V421.934z%20M250.305%2C422.18v-5.157V347.11h-39.817v69.914v5.157h-43.812V289.918h-0.164v-3.656h-11.25l-4.762-0.07%0A%09%09l43.859-89.214l16.793-34.082l2.661-5.402l8.316-16.898l4.954-9.851l13.832%2C26.75l66.918%2C129.434v21.946V422.18h-7.562h-49.95%0A%09%09H250.305z%22%20style%3D%22fill%3A%20rgb(51%2C%2051%2C%2051)%3B%22%3E%3C%2Fpath%3E%0A%09%3Cpolygon%20class%3D%22st0%22%20points%3D%22210.649%2C232.309%20210.649%2C232.309%20210.488%2C232.309%20210.488%2C283.934%20250.305%2C283.934%20250.305%2C232.309%20%0A%09%09210.77%2C232.309%20%09%22%20style%3D%22fill%3A%20rgb(51%2C%2051%2C%2051)%3B%22%3E%3C%2Fpolygon%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E'); } section[id*="visit"] .choice-tab li.station:before { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22_x31_0%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22width%3A%20128px%3B%20height%3A%20128px%3B%20opacity%3A%201%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%23374149%3B%7D%0A%3C%2Fstyle%3E%0A%3Cg%3E%0A%09%3Cpath%20class%3D%22st0%22%20d%3D%22M137.381%2C383.274h237.23c17.539%2C0%2C31.89-14.352%2C31.89-31.89V136.66c0-26.078-21.32-47.43-47.434-47.43h-40.539%0A%09%09l-28.242-0.114l20.019-20.015c5.778-5.742%2C5.778-15.156%2C0-20.898L266.444%2C4.34C263.647%2C1.539%2C259.936%2C0%2C255.979%2C0%0A%09%09c-3.957%2C0-7.668%2C1.539-10.434%2C4.34l-43.859%2C43.863c-5.778%2C5.742-5.778%2C15.156%2C0%2C20.898l11.789%2C11.789l8.18%2C8.34h-68.731%0A%09%09c-26.113%2C0-47.468%2C21.352-47.468%2C47.43v214.723C105.456%2C368.922%2C119.842%2C383.274%2C137.381%2C383.274z%20M210.928%2C339.274h-63.465%0A%09%09v-35.008h46.59c9.312%2C0%2C16.874%2C7.562%2C16.874%2C16.906V339.274z%20M364.494%2C339.274h-63.465v-18.102c0-9.344%2C7.562-16.906%2C16.91-16.906%0A%09%09h46.554V339.274z%20M215.967%2C58.633l40.012-40.008l39.965%2C39.93l0.082%2C0.078L265.432%2C89.23h-18.902L215.967%2C58.633z%20M217.334%2C117.477%0A%09%09c0-3.149%2C2.555-5.703%2C5.703-5.703h21.285h23.313h21.321c3.148%2C0%2C5.667%2C2.554%2C5.667%2C5.703v9.629c0%2C3.113-2.519%2C5.668-5.667%2C5.668%0A%09%09h-65.918c-3.148%2C0-5.703-2.555-5.703-5.668V117.477z%20M140.463%2C169.953c0-6.758%2C5.668-12.465%2C12.426-12.465h206.179%0A%09%09c6.722%2C0%2C12.426%2C5.707%2C12.426%2C12.465v102.898v0.157H140.463V169.953z%22%20style%3D%22fill%3A%20rgb(153%2C%20153%2C%20153)%3B%22%3E%3C%2Fpath%3E%0A%09%3Cpath%20class%3D%22st0%22%20d%3D%22M415.346%2C506.266l-10.582-12.015l-0.527-0.598l-10.008-11.402l-8.926-10.168l-1.633-1.867l-31.121-35.5%0A%09%09l-0.234-0.266l-12.629-14.395h-0.047l-16.062-18.293h-19.278l-12.598-0.106l0.09%2C0.106h-0.21l9.691%2C11.039l6.23%2C7.254h-62.446%0A%09%09l-40.683-0.105l9.516-10.887l6.374-7.141h-0.137l0.141-0.16h-31.922l-16.058%2C18.293h-0.004l-11.938%2C13.61l-5.668%2C6.461%0A%09%09l-26.336%2C30.082h-0.012l-3.808%2C4.336l-6.774%2C7.687l-5.95%2C6.809l-4.578%2C5.214h0.015l-4.371%2C4.934l-6.722%2C7.676l-4.504%2C4.977h0.141%0A%09%09L91.643%2C512h31.996l5.012-5.734l10.586-12.012h233.535l10.578%2C12.012l5.015%2C5.734h31.996L415.346%2C506.266z%20M235.881%2C470.207%0A%09%09l-75.454-0.106l22.734-25.985h145.602l13.801%2C15.723l8.961%2C10.367H235.881z%22%20style%3D%22fill%3A%20rgb(153%2C%20153%2C%20153)%3B%22%3E%3C%2Fpath%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E'); } section[id*="visit"] .choice-tab li.station.active:before { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22_x31_0%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22width%3A%20128px%3B%20height%3A%20128px%3B%20opacity%3A%201%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%23374149%3B%7D%0A%3C%2Fstyle%3E%0A%3Cg%3E%0A%09%3Cpath%20class%3D%22st0%22%20d%3D%22M137.381%2C383.274h237.23c17.539%2C0%2C31.89-14.352%2C31.89-31.89V136.66c0-26.078-21.32-47.43-47.434-47.43h-40.539%0A%09%09l-28.242-0.114l20.019-20.015c5.778-5.742%2C5.778-15.156%2C0-20.898L266.444%2C4.34C263.647%2C1.539%2C259.936%2C0%2C255.979%2C0%0A%09%09c-3.957%2C0-7.668%2C1.539-10.434%2C4.34l-43.859%2C43.863c-5.778%2C5.742-5.778%2C15.156%2C0%2C20.898l11.789%2C11.789l8.18%2C8.34h-68.731%0A%09%09c-26.113%2C0-47.468%2C21.352-47.468%2C47.43v214.723C105.456%2C368.922%2C119.842%2C383.274%2C137.381%2C383.274z%20M210.928%2C339.274h-63.465%0A%09%09v-35.008h46.59c9.312%2C0%2C16.874%2C7.562%2C16.874%2C16.906V339.274z%20M364.494%2C339.274h-63.465v-18.102c0-9.344%2C7.562-16.906%2C16.91-16.906%0A%09%09h46.554V339.274z%20M215.967%2C58.633l40.012-40.008l39.965%2C39.93l0.082%2C0.078L265.432%2C89.23h-18.902L215.967%2C58.633z%20M217.334%2C117.477%0A%09%09c0-3.149%2C2.555-5.703%2C5.703-5.703h21.285h23.313h21.321c3.148%2C0%2C5.667%2C2.554%2C5.667%2C5.703v9.629c0%2C3.113-2.519%2C5.668-5.667%2C5.668%0A%09%09h-65.918c-3.148%2C0-5.703-2.555-5.703-5.668V117.477z%20M140.463%2C169.953c0-6.758%2C5.668-12.465%2C12.426-12.465h206.179%0A%09%09c6.722%2C0%2C12.426%2C5.707%2C12.426%2C12.465v102.898v0.157H140.463V169.953z%22%20style%3D%22fill%3A%20rgb(51%2C%2051%2C%2051)%3B%22%3E%3C%2Fpath%3E%0A%09%3Cpath%20class%3D%22st0%22%20d%3D%22M415.346%2C506.266l-10.582-12.015l-0.527-0.598l-10.008-11.402l-8.926-10.168l-1.633-1.867l-31.121-35.5%0A%09%09l-0.234-0.266l-12.629-14.395h-0.047l-16.062-18.293h-19.278l-12.598-0.106l0.09%2C0.106h-0.21l9.691%2C11.039l6.23%2C7.254h-62.446%0A%09%09l-40.683-0.105l9.516-10.887l6.374-7.141h-0.137l0.141-0.16h-31.922l-16.058%2C18.293h-0.004l-11.938%2C13.61l-5.668%2C6.461%0A%09%09l-26.336%2C30.082h-0.012l-3.808%2C4.336l-6.774%2C7.687l-5.95%2C6.809l-4.578%2C5.214h0.015l-4.371%2C4.934l-6.722%2C7.676l-4.504%2C4.977h0.141%0A%09%09L91.643%2C512h31.996l5.012-5.734l10.586-12.012h233.535l10.578%2C12.012l5.015%2C5.734h31.996L415.346%2C506.266z%20M235.881%2C470.207%0A%09%09l-75.454-0.106l22.734-25.985h145.602l13.801%2C15.723l8.961%2C10.367H235.881z%22%20style%3D%22fill%3A%20rgb(51%2C%2051%2C%2051)%3B%22%3E%3C%2Fpath%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E'); } section[id*="visit"] .choice-tab li span { font-size: initial; display: inline-block; text-decoration: underline; margin: 0 10px; } section[id*="visit"] ul:not([class*="rosen"]) li { min-width: 8.4em; } div.outer.visit { background-image: url(../img/bg/ci-area-bg.png); } /* 助成金 */ section[id*="subsidy"] dt { font-size: 24px; } /* こんなお悩み */ section[id*="trouble"] div.st-box { padding: 1em 2em 1em; } } /* End min 768px */ /* -------------------------------------------------------------------------------------------------------- 04 * * 幅 880px 以上 */ @media screen and (min-width: 55em) {} /* End min 880px */ /* -------------------------------------------------------------------------------------------------------- 05 * * 幅 1072px 以上 */ @media screen and (min-width: 67em) {} /* End min 1072px */ /* -------------------------------------------------------------------------------------------------------- 06 * * 幅 1264px 以上 */ @media screen and (min-width: 79em) {} /* End min 1264px */