/*
  都市ガス関連ページ専用
  対象:
    /for_home/city/
    /for_home/city/plan/
    /for_home/city/simulation/（result含む）
    /for_home/campaign/（および /for_home/city/campaign/）
    /for_home/gas_power_other/
    /for_home/kawahara_app/
  スコープ: #city / #plan / #simulation / #result
  読み込み: header.php（都市ガス関連ページのみ）
  更新: 2026年7月24日
*/

/* for_home cityの重要なお知らせボックス（赤） */
#city .alert-box-red {
    border: 2px solid red;
    border-radius: 16px;
    margin-bottom: 36px;
    padding: 16px;
    color: red;
}

/* for_home cityの重要なお知らせボックス（ピンク） */
#city .alert-box-pink {
    border: 2px solid #e33a57;
    border-radius: 10px;
    margin-bottom: 60px;
    padding: 10px;
}

/* for_home cityの重要なお知らせタイトル（h4） */
#city .alert-title-h4 {
    color: #e33a57;
    font-size: 1.8rem;
    margin: 10px;
    background: initial;
    font-weight: bold;
    text-align: center;
}

/* for_home cityの重要なお知らせタイトル（h5） */
#city .alert-title-h5 {
    color: #e33a57;
    font-size: 1.6rem;
    margin: 10px;
    text-align: center;
    margin-bottom: 20px;
}

/* for_home cityの重要なお知らせタイトル（h6） */
#city .alert-title-h6 {
    color: #e33a57;
    font-size: 1.4rem;
    margin: 20px 6px 30px;
    font-weight: bold;
}

#city .alert-title-h6-alt {
    color: #e33a57;
    font-size: 1.4rem;
    margin: 30px 10px 10px;
    font-weight: bold;
}

/* for_home cityの重要なお知らせテキスト */
#city .alert-text {
    color: #e33a57;
    margin: 10px;
}

/* for_home cityの重要なお知らせテキスト（マージンレフト） */
#city .alert-text.ml-20 {
    margin-left: 20px;
}

#city .alert-text.ml-30 {
    margin-left: 30px;
}

/* for_home cityのフレックスカラム（赤色） */
#city .flex-col-red {
    display: flex;
    flex-direction: column;
    color: #e33a57;
}

/* for_home cityの太字 */
#city .bold {
    font-weight: bold;
}

/* for_home cityのマージンボトム */
#city .mb-10 {
    margin-bottom: 10px;
}

#city .mb-20 {
    margin-bottom: 20px;
}

#city .mb-30 {
    margin-bottom: 30px;
}

/* for_home cityのh4マージンボトム */
#city h4.mb-20 {
    margin-bottom: 20px;
}

/* for_home cityのh4マージンボトムなし */
#city h4.mb-0 {
    margin-bottom: 0;
}

/* for_home cityの中央揃えブロック */
#city .center-block {
    text-align: center;
    margin: 20px 0;
}

#city .center-block.mb-30 {
    margin-bottom: 30px;
}

/* for_home cityのフォントサイズ・太字 */
#city .font-large-bold {
    font-size: 1.2em;
    font-weight: bold;
}

/* for_home cityのフレックス中央揃え */
#city .flex-center-items {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

/* for_home cityの赤色テキスト（フォントサイズ大） */
#city .text-red-large {
    color: red;
    font-size: 20px;
}

/* for_home cityのマージンなし */
#city .no-margin {
    margin: 0;
}

/* for_home cityのマージントップ */
#city .mt-20 {
    margin-top: 20px;
}

/* for_home cityのマージンボトム */
#city .mb-36 {
    margin-bottom: 36px;
}

/* for_home cityの青色リンク */
#city a.link-blue {
    color: blue;
    font-weight: bolder;
    text-decoration: underline;
}

#city a.link-blue:hover {
    text-decoration: none;
    opacity: 0.8;
}

/* for_home city セクション ---------------------------------------------- */

/* for_home cityのタイトル */
#city h3 {
    font-size: 22px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    padding: 0 0 10px;
    margin: 0 0 20px;
}

/* for_home cityのトップ1 */
#city .top-1 {
    font-size: 18px;
    font-weight: bold;
    border-bottom: none;
    background: #5ec1c4;
    padding: 10px;
    line-height: 26px;
    font-size: 18px;
    margin: 0 0 20px;
    color: #fff;
    text-align: center;
}

/* for_home cityのトップ2 */
#city .top-2 {
    font-size: 22px;
    font-weight: bold;
    border-bottom: none;
    padding: 0;
    margin: 0 0 20px;
    text-align: center;
}

/* for_home cityのトップ2内スパン */
#city .top-2 span {
    display: block;
    font-size: 26px;
    font-weight: bold;
    margin: 15px 0 0;
}

/* for_home cityのスモールテキスト */
#city small {
    display: block;
    font-size: .8em;
    margin: 0 0 30px;
}

/* for_home cityのサブタイトル */
#city h4 {
    background: #5ec1c4;
    padding: 0 5px 5px;
    line-height: 26px;
    font-size: 18px;
    margin: 0 0 15px;
    color: #fff;
}

/* for_home cityのサブタイトル（疑似要素付き） */
#city h4:before {
    position: relative;
    bottom: -5px;
    display: inline-block;
    content: "";
    border-left: 5px solid #fff;
    height: 26px;
    margin: 0 5px 0 0;
}

/* for_home cityのh5タイトル */
#city h5 {
    color: #1c6459;
    font-weight: bold;
    font-size: 16px;
    margin: 0 0 15px;
}

/* for_home cityのストロングテキスト */
#city strong {
    font-weight: bold;
    color: #e33b57;
}

/* for_home cityのCTAボタン（2列で揃える） */
/* 上段など: price + simu のみ */
#city > .clearfix:has(> .price):has(> .simu):not(:has(> #plan)),
#city .clearfix:has(> .price):has(> .simu):not(:has(> #plan)),
#city #plan > .clearfix:has(> .webm):has(> .sales) {
    display: flex;
    gap: 20px;
    align-items: stretch;
    margin: 0 0 20px;
}

/* 下段: price/simu と #plan(webm/sales) が同じ clearfix に入っている壊れたHTML向け */
#city .clearfix:has(> .price):has(> .simu):has(> #plan) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
    margin: 0 0 20px;
}

#city .clearfix:has(> .price):has(> .simu):has(> #plan) > #plan,
#city .clearfix:has(> .price):has(> .simu):has(> #plan) > #plan > div {
    display: contents;
}

#city .price,
#city .simu {
    display: block;
    box-sizing: border-box;
    padding: 18px 16px;
    margin: 0 0 20px;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.45;
    text-align: center;
    text-decoration: none;
    color: #fff;
    border-radius: 5px;
}

#city .clearfix:has(> .price):has(> .simu):not(:has(> #plan)) > .price,
#city .clearfix:has(> .price):has(> .simu):not(:has(> #plan)) > .simu,
#city #plan > .clearfix:has(> .webm):has(> .sales) > .webm,
#city #plan > .clearfix:has(> .webm):has(> .sales) > .sales,
#city .clearfix:has(> .price):has(> .simu):has(> #plan) > .price,
#city .clearfix:has(> .price):has(> .simu):has(> #plan) > .simu,
#city .clearfix:has(> .price):has(> .simu):has(> #plan) .webm,
#city .clearfix:has(> .price):has(> .simu):has(> #plan) .sales {
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 1 1 0;
    width: auto;
    min-height: 88px;
    margin: 0;
    padding: 18px 16px;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.45;
    text-align: center;
    text-decoration: none;
    color: #fff;
    border-radius: 5px;
}

/* for_home cityの価格 */
#city .price {
    background: #eba117;
}

/* for_home cityのシミュレーション */
#city .simu {
    background: #e33b57;
}

#city #plan > .clearfix:has(> .webm):has(> .sales) {
    margin: 0 0 20px;
}


/* for_home city plan セクション ---------------------------------------------- */

/* for_home city planのタイトル */
#plan h3 {
    background: #5ec1c4;
    padding: 10px;
    line-height: 26px;
    font-size: 18px;
    margin: 30px 0 10px 0;
    color: #fff;
    text-align: center;
}

/* for_home city planのサブタイトル */
#plan h4 {
    font-size: 14px;
    margin: 30px 0 10px 0;
    font-weight:bold;
}

/* for_home city planのブルータイトル */
#plan .blue h3 {
    background: #096892;
    padding: 10px;
    line-height: 26px;
    font-size: 18px;
    margin: 30px 0 10px 0;
    color: #fff;
    text-align: center;
}

/* for_home city planの4番目のタイトル */
#plan h3:nth-of-type(4) {
    background: #64ad82;
}

/* for_home city planの5番目のタイトル */
#plan h3:nth-of-type(5) {
    background: #e33b57;
}

/* for_home city planのスモールテキスト */
#plan small {
    display: block;
    font-size: 12px;
    margin: 0 0 30px;
    line-height: 1.5;
}

/* for_home city planのビッグテキスト */
#plan .big {
    font-size: 16px;
    text-align: center;
}

/* for_home city planのビッグボールドテキスト */
#plan .big-b {
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    /* color: #5ec1c4; */
}

/* for_home city planのビッグテキスト内スパン */
#plan .big span {
    display: block;
    font-size: 16px;
}

/* for_home city planのフォーミュラ1 */
#plan .formula1 {
    display: block;
    margin: 0 auto 30px;
    color: #5ec1c4;
    border: 1px solid #5ec1c4;
    font-size: 18px;
    font-weight: bold;
    padding: 15px;
    text-align: center;
}

/* for_home city planのPDFとシミュレーション */
#plan .pdf,
#plan .simu {
    display: block;
    padding: 20px;
    text-align: center;
    font-size: 16px;
    line-height:1.4;
}

/* for_home city planのウェブフォーム */
#plan .webf {
    display: block;
    padding: 20px;
    text-align: center;
    font-size: 16px;
    line-height:1.4;
}


/* for_home city planのPDF（ボーダー付き） */
#plan .pdf{
    border: 2px solid #30ac77;
    padding: 10px;
    margin: 5px 10px;
    width: 100%;
}

/* for_home city planのPDFリンク */
#plan .pdf a{
    color: #30ac77;
    font-size:1.5rem;
}


/* for_home city planのシミュレーション（ボーダー付き） */
#plan .simu {
    border: 2px solid #e33b57;
    color: #e33b57;
    margin: 0 0 20px;
    width:100%;
    font-weight:bold;
    border-radius: 30px;
}

/* for_home city planのウェブフォーム（ボーダー付き） */
#plan .webf {
    background-color: #2ea7e0;
    color: #fff;
    margin: 0 0 50px;
    width:100%;
    font-weight:bold;
    border-radius: 30px;
}

/* for_home city planのWEB申し込みボタン（左右セット） */
#plan .clearfix:has(> .webm):has(> .sales) {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

#plan .webm,
#plan .sales {
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 1 1 0;
    width: auto;
    min-height: 88px;
    padding: 18px 16px;
    margin: 0 0 50px;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.45;
    text-align: center;
    text-decoration: none;
    color: #fff;
    border-radius: 5px;
}

#plan .webm {
    background-color: #2ea7e0;
}

#plan .sales {
    background-color: #008000;
}

/* バックページ */
#back-page {
    font-size: 10px;
}

/* for_home city planのセクション */
#plan section {
    border: 3px solid #5ec1c4;
    border-radius: 10px;
    padding: 20px;
    margin: 0 0 20px;
}

/* for_home city planのセクション内h4 */
#plan section h4 {
    padding: 15px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    background: #f1dddd;
    margin: 0 0 15px;
    border-radius: 10px;
}

/* for_home city planのセクション内h4内スパン */
#plan section h4 span {
    display: block;
}

/* for_home city planのセクション内p */
#plan section p {
    font-size: 12px;
    margin: 0!important;
}

/* for_home city planの1番目のセクション内h5 */
#plan section:nth-of-type(1) h5 {
    font-size: 20px;
    font-weight: bold;
    color: #e33b57;
    text-align: center;
    margin: 0 0 15px;
}

/* for_home city planの1番目のセクション内p */
#plan section:nth-of-type(1) p {
    text-align: center;
}

/* for_home city planの1番目のセクション内p内スパン */
#plan section:nth-of-type(1) p span {
    display: block;
    font-size: 12px;
}

/* for_home city planの2番目のセクション内h5 */
#plan section:nth-of-type(2) h5 {
    font-size: 18px;
    text-align: center;
    margin: 0 0 15px;
}

/* for_home city planの2番目のセクション内h5内スパン */
#plan section:nth-of-type(2) h5 span {
    font-size: 22px;
    color: #e33b57;
    font-weight: bold;
}

/* for_home city planの2番目のセクション内スモールテキスト */
#plan section:nth-of-type(2) small {
    margin: 5px 0 0;
    padding: 0 0 0 1em;
}

/* for_home city planの3番目のセクション内h4内スパン内スパン */
#plan section:nth-of-type(3) h4 span span {
    display: inline;
    font-size: 18px;
    color: #e33b57;
    font-weight: bold;
}

/* for_home city planの3番目のセクション内スモールテキスト */
#plan section:nth-of-type(3) small {
    margin: 5px 0 0;
}

/* for_home city planの特エリアタイトル */
#plan p.tokuAreaTitle{
    border: 2px solid #64ad82;
    padding: 5px 10px;
    font-weight: bold;
    font-size: 1.5rem;
    text-align: center;
}

/* for_home city planの定義リストタイトル */
#plan dl dt {
    border-bottom: 1px solid #64ad82;
    font-size: 16px;
    font-weight: bold;
    padding: 0 0 5px;
    margin: 0 0 5px;
}

/* for_home city planの定義リスト説明 */
#plan dl dd {
    margin: 0 0 10px;
    line-height: 1.5;
}

/* for_home city planのコンタクト */
#plan .contact {
    border: 2px solid #b5b5b6;
    padding: 20px;
    width: 80%;
    margin: 0 auto 10px;
}

/* for_home city planのコンタクト内p */
#plan .contact p {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    text-align: center;
}

/* for_home city planのコンタクト内p内スパン */
#plan .contact p span {
    display: inline-block;
    margin: 0 0 0 5px;
    font-size: 24px;
    color: #eba117;
}

/* for_home city planのコンタクト後のp */
#plan .contact+p {
    text-align: center;
    margin: 0 0 50px;
}

/* for_home city planのテーブル */
#plan table {
    margin: 0 0 20px;
    width: 100%;
}

/* for_home city planのテーブルキャプション */
#plan table caption {
    background: #e33b57;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
    white-space: nowrap;
    line-height: 1.4;
}

/* for_home city planのテーブルキャプション内スモールテキスト */
#plan table caption small {
    display: inline;
    white-space: nowrap;
}

/* for_home city planのテーブルヘッダーとセル */
#plan table th,
#plan table td {
    padding: 10px;
    text-align: center;
    border: 1px solid #ccc;
    font-size: 13px;
}

/* for_home city planのテーブル1行目のセル */
#plan table tr:nth-of-type(1) td {
    text-align: left;
    font-size: 12px;
}

/* for_home city planのテーブル2行目のヘッダー */
#plan table tr:nth-of-type(2) th {
    background: #efefef;
    line-height: 1.3;
}

/* for_home city planのテーブル2行目のヘッダー内スパン */
#plan table tr:nth-of-type(2) th span {
    display: block;
    font-size: 10px;
}

/* for_home city planのテーブル2行目の1番目のヘッダー */
#plan table tr:nth-of-type(2) th:nth-of-type(1) {
    width: 35%;
}

/* for_home city planのテーブル2行目の2-5番目のヘッダー */
#plan table tr:nth-of-type(2) th:nth-of-type(2),
#plan table tr:nth-of-type(2) th:nth-of-type(3),
#plan table tr:nth-of-type(2) th:nth-of-type(4),
#plan table tr:nth-of-type(2) th:nth-of-type(5) {
    width: 16%;
    font-size: 11px;
}

/* for_home city planのテーブル2行目の4-5番目のヘッダー */
#plan table tr:nth-of-type(2) th:nth-of-type(4),
#plan table tr:nth-of-type(2) th:nth-of-type(5) {
    font-size: 11px;
}


/* for_home about_lpgas セクション ---------------------------------------------- */

/* for_home about_lpgasのタブコンテンツ内ラジオボタン */
#plan .tab-content input[type="radio"] {
    display: none;
}

/* for_home about_lpgasのタブコンテンツ内タブリスト */
#plan .tab-content .tab-list {
    display: flex;
}

/* for_home about_lpgasのタブコンテンツ内ラベル */
#plan .tab-content label {
    position: relative;
    display: inline-block;
    padding: 5px 2px 5px 9px;
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1.3;
    text-align: center;
}

/* for_home about_lpgasのタブコンテンツ内ラベル内スパン */
#plan .tab-content label span {
    display: block;
}

/* for_home about_lpgasのタブコンテンツ内ラベル（ホバー・チェック時） */
#plan .tab-content label:hover,
#plan .tab-content input[type="radio"]:checked+label {
    color: #21a564;
}

/* for_home about_lpgasのタブコンテンツ内ラベル（疑似要素付き） */
#plan .tab-content label:before {
    position: absolute;
    left: 0;
    bottom: 1em;
    display: inline-block;
    content: "";
    height: 1.2em;
    border-left: 1px solid #ccc;
}

/* for_home about_lpgasのタブコンテンツ内最初のラベル（疑似要素非表示） */
#plan .tab-content label:first-of-type:before {
    display: none;
}
/* for_home about_lpgasのタブコンテンツ内ラベル内スパン（1-5番目） */
#plan .tab-content label:nth-of-type(1) span,
#plan .tab-content label:nth-of-type(2) span,
#plan .tab-content label:nth-of-type(3) span,
#plan .tab-content label:nth-of-type(4) span,
#plan .tab-content label:nth-of-type(5) span,
/* for_home about_lpgasのタブコンテンツ内ラベル内スパン（6-8番目） */
#plan .tab-content label:nth-of-type(6) span,
#plan .tab-content label:nth-of-type(7) span,
#plan .tab-content label:nth-of-type(8) span {
    position: relative;
    bottom: .5em;
}

/* for_home about_lpgasのタブコンテンツ内タブボックス */
#plan .tab-content .tab-box {
    padding: 40px 0;
    border-top: 3px solid #21a564;
}

/* for_home about_lpgasのタブコンテンツ内タブボックス内div（非表示） */
#plan .tab-content>.tab-box>div {
    display: none;
}

#tab1:checked~.tab-box>#tabView1 {
    display: block;
}

#tab2:checked~.tab-box>#tabView2 {
    display: block;
}

#tab3:checked~.tab-box>#tabView3 {
    display: block;
}

#tab4:checked~.tab-box>#tabView4 {
    display: block;
}

#tab5:checked~.tab-box>#tabView5 {
    display: block;
}

#tab6:checked~.tab-box>#tabView6 {
    display: block;
}

#tab7:checked~.tab-box>#tabView7 {
    display: block;
}

/* for_home about_lpgasのタブ8（チェック時表示） */
#tab8:checked~.tab-box>#tabView8 {
    display: block;
}


/* for_home city simulation ---------------------------------------------- */

/* for_home city simulationのタイトル */
#simulation h3 {
    background: #5ec1c4;
    padding: 15px 15px 15px 84px;
    font-size: 18px;
    line-height: 54px;
    background-image: url(../img/for_home/city/simulation/h3-icon.png);
    background-position: center left 15px;
    background-repeat: no-repeat;
    color: #fff;
    margin: 0 0 20px;
}

/* for_home city simulationのインナー */
#simulation .simulationinner {
    width: 90%;
    margin: 0 auto;
}

/* シミュレーション準備中 */
#simulation .simulation-coming-soon {
    width: 90%;
    max-width: 640px;
    margin: 40px auto 60px;
    padding: 40px 32px;
    text-align: center;
    border: 2px solid #5ec1c4;
    border-radius: 8px;
    background: #f7fcfc;
    box-sizing: border-box;
}

#simulation .simulation-coming-soon__label {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.12em;
    color: #5ec1c4;
    text-transform: uppercase;
}

#simulation .simulation-coming-soon__title {
    margin: 0 0 20px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
}

#simulation .simulation-coming-soon__text {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.8;
    color: #555;
}

#simulation .simulation-coming-soon__note {
    margin: 0 0 28px;
    font-size: 14px;
    line-height: 1.7;
    color: #666;
}

#simulation .simulation-coming-soon__cta a {
    display: inline-block;
    padding: 14px 28px;
    background: #2ea7e0;
    color: #fff;
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;
    border-radius: 5px;
}

#simulation .simulation-coming-soon__cta a:hover {
    opacity: 0.9;
}

/* for_home city simulationのフォーム */
#simulation form {
    background: url(../img/for_home/city/simulation/bg.png) center top no-repeat;
    background-size: contain;
    padding: 100px 0 0;
}

/* for_home city simulationのフォームラベル */
#simulation form label {
    display: block;
    margin: 0 0 20px;
}

/* for_home city simulationのフォームラベル内画像 */
#simulation form label img {
    display: inline-block;
    margin: 0 .5em 0 0!important;
}

/* for_home city simulationのフォームラベル内セレクトとインプット */
#simulation form label select,
#simulation form label input {
    display: inline-block;
    margin: 10px 0 0;
    border: 1px solid #c9caca;
    border-radius: 5px;
    padding: 10px;
}

/* for_home city simulationのフォームラベル内セレクト */
#simulation form label select {
    padding: 10px;
    background: url(../img/for_home/city/simulation/select-bg.png) center right 5px no-repeat;
    width: 80%;
}

/* for_home city simulationのフォームラベル内セレクト（3番目） */
#simulation form label:nth-of-type(3) select {
    width: 30%;
    display: inline-block;
    margin: 0 20px 0 0;
}

/* for_home city simulationのフォームラベル内インプット（3番目） */
#simulation form label:nth-of-type(3) input {
    width: 30%;
    display: inline-block;
}

/* for_home city simulationのフォームラベル内スパン（3番目） */
#simulation form label:nth-of-type(3) span {
    display: block;
    margin: 10px 0 0;
    position: relative;
    padding: 0 0 13px;
}

/* for_home city simulationのフォームラベル内スパン内スパン（3番目） */
#simulation form label:nth-of-type(3) span span {
    display: inline;
    position: static;
}

/* for_home city simulationのフォームラベル内スモール（3番目） */
#simulation form label:nth-of-type(3) small {
    position: absolute;
    bottom: 0;
    right: 10%;
    font-size: 12px;
}

/* for_home city simulationのフォームボタン */
#simulation form button {
    display: block;
    padding: 10px 30px;
    background: #e33b57;
    text-align: center;
    margin: 30px auto 40px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    border-radius: 10px;
    border: none;
}

/* for_home city simulationの定義リスト */
#simulation dl {
    border: 1px solid #ddd;
    padding: 15px 15px 5px 20px;
    background: #fcfced;
}

/* for_home city simulationの定義リストタイトル */
#simulation dl dt {
    margin: 0 0 10px -1em
}

/* for_home city simulationの定義リストタイトルの疑似要素 */
#simulation dl dt:before {
    content: "\3010";
}

/* for_home city simulationの定義リストタイトルの疑似要素（後） */
#simulation dl dt:after {
    content: "\3011";
}

/* for_home city simulationの定義リスト説明内リスト項目 */
#simulation dl dd ul li {
    text-indent: -.6em;
    padding: 0 0 0 .6em;
    margin: 0 0 10px;
    line-height: 1.3;
}

/* for_home city simulationの定義リスト説明内リスト項目の疑似要素 */
#simulation dl dd ul li:before {
    content: "\25A0";
    display: inline-block;
    margin: 0 .2em 0 0;
}


/* for_home city simulation result ---------------------------------------------- */

/* for_home city simulation resultのタイトル（1番目） */
#result h3:nth-of-type(1) {
    background: #5ec1c4;
    padding: 15px 15px 15px 84px;
    font-size: 18px;
    line-height: 54px;
    background-image: url(../img/for_home/city/simulation/h3-icon.png);
    background-position: center left 15px;
    background-repeat: no-repeat;
    color: #fff;
    margin: 0 0 20px;
}

/* for_home city simulation resultのインナー */
#result .simulationinner {
    width: 90%;
    margin: 0 auto;
}

/* for_home city simulation resultの結果エリア */
#result .result {
    background: url(../img/for_home/city/simulation/result/bg.png) center top no-repeat;
    background-size: contain;
    padding: 100px 0 0;
}

/* for_home city simulation resultのスモールテキスト */
#result small {
    display: block;
    font-size: 12px;
    margin: 0 0 20px;
}

/* for_home city simulation resultの選択された要素 */
#result .selected {
    background: #ebe9ee;
    padding: 35px 10px 0;
    position: relative;
    margin: 0 0 20px;
}

/* for_home city simulation resultの選択された要素の疑似要素 */
#result .selected:before {
    content: "";
    color: #096892;
    font-size: 12px;
    position: absolute;
    top: 10px;
    left: 10px;
}

/* for_home city simulation resultの選択された要素内定義リスト */
#result .selected dl,
#result .selected dl dt,
#result .selected dl dd {
    float: left;
}

/* for_home city simulation resultの選択された要素内定義リストタイトル */
#result .selected dl dt {
    color: #096892;
    font-size: 12px;
    position: relative;
    bottom: -2px;
    margin: 0 10px 10px 0;
}

/* for_home city simulation resultの選択された要素内定義リスト説明 */
#result .selected dl dd {
    font-size: 16px;
    margin: 0 15px 10px 0;
}

/* for_home city simulation resultの選択された要素の次のdiv */
#result div.selected+div {
    border: 1px solid #096892;
    padding: 0 20px 10px;
    color: #096892;
    margin: 0 0 30px;
    border-radius: 5px;
}

/* for_home city simulation resultの選択された要素の次のdiv内p */
#result div.selected+div p {
    margin: 0;
    text-align: center;
}

/* for_home city simulation resultの選択された要素の次のdiv内p内スパン */
#result div.selected+div p span {
    position: relative;
    bottom: -8px;
    display: inline-block;
    margin: 0 10px;
    font-size: 40px;
    font-weight: bold;
}

/* for_home city simulation resultの結果エリア内リスト */
#result .result ul {
    background: #e33b57;
    box-shadow: 0 0 0 7px #fff, 0 0 0 10px #e33b57;
    padding: 20px;
    margin: 0 0 50px;
    border-radius: 5px;
}

/* for_home city simulation resultの結果エリア内リスト項目 */
#result .result ul li {
    color: #fff;
    border-bottom: 1px solid #fff;
    padding: 0 0 25px;
    margin: 0 0 10px;
}

/* for_home city simulation resultの結果エリア内リスト項目のスパン（1-2番目） */
#result .result ul li:nth-of-type(1) span:nth-of-type(1),
#result .result ul li:nth-of-type(2) span:nth-of-type(1) {
    display: block;
    width: 100%;
    text-align: center;
}

/* for_home city simulation resultの結果エリア内リスト項目のスパン（1-2番目の2番目） */
#result .result ul li:nth-of-type(1) span:nth-of-type(2),
#result .result ul li:nth-of-type(2) span:nth-of-type(2) {
    display: inline-block;
    width: 90%;
    font-size: 40px;
    font-weight: bold;
    text-align: right;
    margin: 0 10px 0 0;
    position: relative;
    bottom: -8px;
}

/* for_home city simulation resultの結果エリア内リスト項目（最後） */
#result .result ul li:last-child {
    border-bottom: none;
    padding: 5px 0;
    margin: 0;
    font-size: 24px;
    text-align: center;
}

/* for_home city simulation resultの結果エリア内リスト項目（最後）のスパン（1番目） */
#result .result ul li:last-child span:nth-of-type(1) {
    display: inl
    ine-block;
    font-size: 40px;
    font-weight: bold;
    text-align: right;
    margin: 0 10px;
    position: relative;
    bottom: -5px;
}

/* for_home city simulation resultの結果エリア内リスト項目（最後）のスパン（2番目） */
#result .result ul li:last-child span:nth-of-type(2) {
    display: inline-block;
    font-size: 14px;
    margin: 0 10px 0 0;
}

/* for_home city simulation resultのh5タイトル */
#result h5 {
    background: #e33b57;
    padding: 10px;
    line-height: 26px;
    font-size: 18px;
    margin: 0 0 15px;
    color: #fff;
    text-align: center;
}

/* for_home city simulation resultのコンタクトエリア */
#result .contact {
    border: 2px solid #b5b5b6;
    padding: 20px;
    width: 80%;
    margin: 0 auto 10px;
}

/* for_home city simulation resultのコンタクトエリア内p */
#result .contact p {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    text-align: center;
}

/* for_home city simulation resultのコンタクトエリア内p内スパン */
#result .contact p span {
    display: inline-block;
    margin: 0 0 0 5px;
    font-size: 24px;
    color: #eba117;
}

/* for_home city simulation resultのコンタクトエリアの次のp */
#result .contact+p {
    text-align: center;
    margin: 0 0 30px;
}

/* 商品に関するお問い合わせ（contact-list）※living.css と同デザイン */
.contact-list {
    margin: 0 0 30px;
}

.contact-list li h4 {
    font-weight: normal;
    text-align: center;
    margin: 0 0 10px;
}

.contact-list li:nth-of-type(1) {
    float: left;
    width: 100%;
    border: 2px solid #2ea7e0;
    padding: 20px;
    box-sizing: border-box;
}

.contact-list li:nth-of-type(1) a {
    display: block;
    background: #2ea7e0;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    font-size: 1.1em;
    text-align: center;
    text-decoration: none;
}

.contact-list li:nth-of-type(2) {
    display: none;
}

.contact-list li a:after {
    display: inline-block;
    content: url(../img/for_home/living/contact-arrow.png);
    margin: 0 0 0 1em;
}

@media screen and (max-width: 979px) {
    /* for_home city ---------------------------------------------- */
    #city h3 {
        font-size: 1.6rem;
        padding: 0 0 1rem;
        margin: 0 0 2rem;
    }
    #city .top-1 {
        font-size: 1.4rem;
        padding: .5rem;
        line-height: 1.8;
        margin: 0 0 1rem;
    }
    #city .top-2 {
        font-size: 1.6rem;
        margin: 0 0 1rem;
    }
    #city .top-2 span {
        font-size: 1.8rem;
        margin: 1rem 0 0;
    }
    #city small {
        font-size: .8rem;
        margin: 0 0 1.5rem;
    }
    #city h4 {
        padding: 0 .5rem .5rem;
        line-height: 2rem;
        font-size: 1.5rem;
        margin: 0 0 1rem;
    }
    #city h4:before {
        bottom: -.5rem;
        height: 2rem;
        margin: 0 .5rem 0 0;
    }
    #city h5 {
        font-size: 1.4rem;
        margin: 0 0 .5rem;
        line-height: 1.3;
    }
    #city > .clearfix:has(> .price):has(> .simu):not(:has(> #plan)),
    #city .clearfix:has(> .price):has(> .simu):not(:has(> #plan)),
    #city #plan > .clearfix:has(> .webm):has(> .sales),
    #city .clearfix:has(> .price):has(> .simu):has(> #plan) {
        display: block;
        gap: 0;
        margin: 0 0 1rem;
    }
    #city .clearfix:has(> .price):has(> .simu):has(> #plan) > #plan,
    #city .clearfix:has(> .price):has(> .simu):has(> #plan) > #plan > div {
        display: block;
    }
    #city .price,
    #city .simu {
        float: none;
        width: 100%;
        min-height: 0;
        padding: 1.2rem 1rem;
        font-size: 1.4rem;
        margin: 0 0 1rem;
    }
    #city .clearfix:has(> .price):has(> .simu):not(:has(> #plan)) > .price,
    #city .clearfix:has(> .price):has(> .simu):not(:has(> #plan)) > .simu,
    #city #plan > .clearfix:has(> .webm):has(> .sales) > .webm,
    #city #plan > .clearfix:has(> .webm):has(> .sales) > .sales,
    #city .clearfix:has(> .price):has(> .simu):has(> #plan) > .price,
    #city .clearfix:has(> .price):has(> .simu):has(> #plan) > .simu,
    #city .clearfix:has(> .price):has(> .simu):has(> #plan) .webm,
    #city .clearfix:has(> .price):has(> .simu):has(> #plan) .sales {
        flex: none;
        width: 100%;
        margin: 0 0 1rem;
    }
    #plan .clearfix:has(> .webm):has(> .sales) {
        display: block;
        gap: 0;
    }
    #plan .webm,
    #plan .sales {
        float: none;
        flex: none;
        width: 100%;
        min-height: 0;
        padding: 1.2rem 1rem;
        font-size: 1.4rem;
        margin: 0 0 1rem;
        border-radius: 5px;
    }
    #plan .sales {
        margin: 0 0 3rem;
    }
    /* for_home city plan ---------------------------------------------- */
    #plan h3 {
        padding: 1rem;
        line-height: 1.5;
        font-size: 1.6rem;
        margin: 3rem 0 1.5rem 0;
    }
    #plan small {
        font-size: 1rem;
        margin: 0 0 1rem;
    }
    #plan .big {
        font-size: 15px!important;
        text-align: left;
    }
    #plan .big span {
        display: inline;
        font-size: 1.4rem;
    }
    #plan .formula1 {
        margin: 0 auto 1rem;
        font-size: 1.6rem;
        padding: 1rem;
    }
    #plan .pdf,
    #plan .simu {
        float: none;
        width: 100%;
        padding: 1rem;
        font-size: 1.5rem;
        margin: 0 0 3rem;
    }
    #plan .pdf {
        margin: 0 0 1.5rem;
        min-height:60px;
        line-height: initial;
    }

    .img-3 {
    margin-bottom: 20px;
    padding: 20px 0px;
    display: block;
    justify-content: space-between;
    }

    #plan section {
        border-radius: 1rem;
        padding: 1rem;
        margin: 0 0 1rem;
    }
    #plan section h4 {
        padding: 1rem;
        font-size: 1.4rem;
        margin: 0 0 1rem;
        border-radius: 1rem;
    }
    #plan section p {
        font-size: 1rem;
    }
    #plan section:nth-of-type(1) h5 {
        font-size: 1.6rem;
        margin: 0 0 1rem;
    }
    #plan section:nth-of-type(1) p {
        font-size: 1rem;
    }
    #plan section:nth-of-type(1) p span {
        font-size: 1rem;
    }
    #plan section:nth-of-type(2) h5 {
        font-size: 1.2rem;
        margin: 0 0 1rem;
    }
    #plan section:nth-of-type(2) h5 span {
        font-size: 1.6rem;
    }
    #plan section:nth-of-type(2) small {
        margin: .5rem 0 0;
    }
    #plan section:nth-of-type(3) h4 {
        font-size: 1.3rem;
    }
    #plan section:nth-of-type(3) h4 span span {
        font-size: 1.4rem;
    }
    #plan section:nth-of-type(3) small {
        margin: .5rem 0 0;
    }
    #plan dl dt {
        font-size: 1.4rem;
        padding: 0 0 .5rem;
        margin: 0 0 .5rem;
    }
    #plan dl dd {
        margin: 0 0 1rem;
    }
    #plan .contact {
        padding: 1rem;
        margin: 0 auto 1rem;
    }
    #plan .contact p {
        font-size: 1.4rem;
        margin: 0;
    }
    #plan .contact p span {
        display: block;
        margin: 0;
        font-size: 2.2rem;
    }
    #plan .contact+p {
        margin: 0 0 2rem;
    }
    #plan table {
        margin: 0 0 2rem;
    }
    #plan table caption {
        font-size: 1.4rem;
        padding: 1rem;
        line-height: 1.4;
    }
    #plan table caption small {
        display: block;
        margin: .5rem 0 0;
    }
    #plan table th,
    #plan table td {
        padding: .5rem;
        font-size: 1rem;
    }
    #plan table tr:nth-of-type(1) td {
        font-size: 1rem;
    }
    #plan table tr:nth-of-type(2) th:nth-of-type(1) {
        width: 36%;
    }
    #plan table tr:nth-of-type(2) th:nth-of-type(2),
    #plan table tr:nth-of-type(2) th:nth-of-type(3),
    #plan table tr:nth-of-type(2) th:nth-of-type(4),
    #plan table tr:nth-of-type(2) th:nth-of-type(5) {
        width: 16%;
    }
    #plan table tr:nth-of-type(2) th:nth-of-type(4),
    #plan table tr:nth-of-type(2) th:nth-of-type(5) {
        font-size: 10px;
    }
    /* for_home city simulation ---------------------------------------------- */
    #simulation h3 {
        background: #5ec1c4;
        padding: 1rem 1rem 1rem 5rem;
        font-size: 1.4rem;
        line-height: 4rem;
        background-image: url(../img/for_home/city/simulation/h3-icon.png);
        background-position: center left 1rem;
        background-repeat: no-repeat;
        background-size: 3rem;
        margin: 0 0 1.5rem;
    }
    #simulation .simulationinner {
        width: 100%;
        margin: 0;
    }
    #simulation .simulation-coming-soon {
        width: 100%;
        margin: 2rem auto 3rem;
        padding: 2rem 1.5rem;
    }
    #simulation .simulation-coming-soon__title {
        font-size: 1.8rem;
    }
    #simulation .simulation-coming-soon__text,
    #simulation .simulation-coming-soon__note {
        font-size: 1.3rem;
        text-align: left;
    }
    #simulation form {
        padding: 6rem 0 0;
    }
    #simulation form label {
        margin: 0 0 1.5rem;
    }
    #simulation form label img {
        width: 3rem;
        height: auto;
    }
    #simulation form label select,
    #simulation form label input {
        margin: 1rem 0 0;
        padding: 1rem;
        width: 100%;
    }
    #simulation form label select {
        padding: 1rem;
    }
    #simulation form label:nth-of-type(3) select {
        margin: 0 1em 0 0;
    }
    #simulation form label:nth-of-type(3) span {
        margin: 1rem 0 0;
        padding: 0;
    }
    #simulation form label:nth-of-type(3) span span {
        display: block;
    }
    #simulation form label:nth-of-type(3) small {
        position: static;
        font-size: 1rem;
    }
    #simulation form button {
        padding: 1rem 3rem;
        margin: 3rem auto 4rem;
        font-size: 1.4rem;
        border-radius: 1rem;
    }
    #simulation dl {
        padding: 1rem 1rem .5rem 2rem;
        background: #fcfced;
    }
    #simulation dl dt {
        margin: 0 0 1rem -1em
    }
    #simulation dl dd ul li {
        margin: 0 0 1rem;
    }
    /* for_home city simulation result ---------------------------------------------- */
    #result h3:nth-of-type(1) {
        background: #5ec1c4;
        padding: 1rem 1rem 1rem 5rem;
        font-size: 1.4rem;
        line-height: 4rem;
        background-image: url(../img/for_home/city/simulation/h3-icon.png);
        background-position: center left 1rem;
        background-repeat: no-repeat;
        background-size: 3rem;
        margin: 0 0 1.5rem;
    }
    #result .simulationinner {
        width: 100%;
        margin: 0;
    }
    #result .result {
        padding: 6rem 0 0;
    }
    #result small {
        font-size: 1rem;
        margin: 0 0 1rem;
    }
    #result .selected {
        padding: 3rem 1rem .5rem;
        margin: 0 0 1rem;
    }
    #result .selected:before {
        font-size: 1rem;
        top: 1rem;
        left: 1rem;
    }
    #result .selected dl {
        float: none;
    }
    #result .selected dl dt {
        float: left;
        font-size: 1rem;
        line-height: 1.6rem;
        bottom: -.2rem;
        margin: 0 1rem .5rem 0;
    }
    #result .selected dl dd {
        float: left;
        font-size: 1.4rem;
        line-height: 1.6rem;
        margin: 0 0 .5rem;
    }
    #result div.selected+div {
        padding: 1rem 2rem;
        margin: 0 0 3rem;
    }
    #result div.selected+div p span {
        bottom: -.8rem;
        margin: 0 1rem;
        font-size: 4rem;
    }
    #result .result ul {
        width: 96%;
        box-shadow: 0 0 0 5px #fff, 0 0 0 8px #e33b57;
        padding: 1rem;
        margin: 0 auto 3rem;
    }
    #result .result ul li {
        padding: 0 0 1rem;
        margin: 0 0 1rem;
        text-align: center;
    }
    #result .result ul li:nth-of-type(1) span:nth-of-type(1),
    #result .result ul li:nth-of-type(2) span:nth-of-type(1) {
        display: inline-block;
        width: 100%;
        text-align: center;
    }
    #result .result ul li:nth-of-type(1) span:nth-of-type(2),
    #result .result ul li:nth-of-type(2) span:nth-of-type(2) {
        width: 90%;
        font-size: 4rem;
        margin: 0 1rem 0 0;
        padding: 0 0 .5rem;
        position: relative;
        bottom: -.5rem;
    }
    #result .result ul li:last-child {
        padding: 0 0 .5rem;
        font-size: 2rem;
        text-align: left;
    }
    #result .result ul li:last-child span:nth-of-type(1) {
        font-size: 4rem;
        width: 58%;
        margin: 0 1rem;
        bottom: -.5rem;
    }
    #result .result ul li:last-child span:nth-of-type(2) {
        font-size: 1.4rem;
        margin: 0 1rem 0 0;
    }
    #result h5 {
        padding: 1rem;
        line-height: 1.5;
        font-size: 1.6rem;
        margin: 0 0 1.5rem;
    }
    #result h5 span {
        display: block;
    }
    #result .contact {
        border: 2px solid #b5b5b6;
        padding: 20px;
        width: 80%;
        margin: 0 auto 10px;
    }
    #result .contact p {
        font-size: 20px;
        font-weight: bold;
        margin: 0;
        text-align: center;
    }
    #result .contact p span {
        display: inline-block;
        margin: 0 0 0 5px;
        font-size: 24px;
        color: #eba117;
    }
    #result .contact+p {
        text-align: center;
        margin: 0 0 30px;
    }

    /* contact-list（SP） */
    .contact-list li:nth-of-type(1) {
        float: none;
        width: 100%;
        padding: 2rem;
        margin: 0 0 1rem;
        box-sizing: border-box;
    }
    .contact-list li:nth-of-type(1) a {
        padding: 1rem;
        font-size: 1.4rem;
    }
}