@charset "utf-8";
/* メディアクエリ */

/* 初期状態: PCのみに表示 */
.pc_only {
    display: block; 
}
.tb_only,
.sp_only {
    display: none !important; 
}

/* タブレットサイズ（768px以下）の場合 */
@media only screen and (max-width: 768px) {
    .pc_only {
        display: none !important; 
    }
    .tb_only {
        display: block !important; 
    }
    .sp_only {
        display: none !important; 
    }
}

/* スマホサイズ（600px以下）の場合 */
@media only screen and (max-width: 600px) {
    .pc_only,
    .tb_only {
        display: none !important; 
    }
    .sp_only {
        display: block !important; 
    }
}

a{
    text-decoration: none;
}
.spacer20{
    height: 20px;
}
.spacer10{
    height: 10px;
}

.center{
    text-align: center;
}

body {
    margin: 0;
    padding: 0;
    background-color: #EEEEEE;
    font-style: normal;
    font-weight: normal;
    font-family: 'Noto Sans JP', sans-serif;
    color: #333;
    font-size: 16px;
}
h1{
    display: block;
    font-size: 2em;
    color: #373737;
}
h1 span{
    font-size: .7em;
    color: #373737;
    font-weight: bold;
}
/* スマホサイズ（600px以下）の場合 */
@media only screen and (max-width: 600px) {
    h1 span{
        display: block;
    }
}

h2{
    box-sizing: content-box;
    padding: 5px 10px;
    font-size: 1.5rem;
    color: #00968D;
    border-bottom: 1px solid #08a39a;
    display: flex;
    align-items: center;
}

h2:before {
    margin-bottom: -20px;
    content: '';
    display: inline-block;
    width: 54px;
    height: 54px;
    background-image: url(./h2-icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 10px;
}

@media only screen and (max-width: 768px) {
    h1{
        font-size: 1.7em;
    }
    h2{
        font-size: 1.2rem;
    }
    h2:before {
        width: 44px;
        height: 44px;
    }
}


/* index.php以外の背景色を変更 */
body:not(.index) {
    background-color: #F7F7F7;
}

/* 960px以下のレスポンシブ対応 */
@media only screen and (max-width: 768px) {
    body {
        max-width: 100%; 
        background-color: #F7F7F7;
    }
    /* index.php以外の背景色を変更 */
    body:not(.index){
        background-color: #FFF;
    }
}

footer{
    width: 100%;
    background-color: #00968D;
    text-align: center;
    color: #fff;
    font-size: .8rem;
    padding: 10px 0;
}
.green-box {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: -1;
    background-color: #00968D;
    min-height: 730px;
    max-height: 730px;
    height: 100vh;
}

.content {
    margin: 80px auto 0px;
    padding: 0 7px;
    max-width: 960px; /* 最大幅を960pxに設定 */
    line-height: 1.5;
}
@media only screen and (max-width: 768px) {
    .content {
        padding: 0 0px;
    }
}

.padding-box{
    padding: 0%;
}
@media only screen and (max-width: 960px) {
    .padding-box{
        padding: 0 10px;
    }
}
@media only screen and (max-width: 768px) {
    .padding-box{
        padding: 0 15px;
    }
}

.main-menu {
    width: 100%; /* 親要素の幅に合わせる */
    padding: 45px 10px;
    background-color: #F7F7F7;
    border-radius: 40px;
    box-sizing: border-box; /* paddingとborderを含めたサイズにする */
    filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.3));
    transform: translateZ(0);
}
.main-menu-box {
    width: 100%; /* 親要素の幅に合わせる */
    padding: 20px;
    box-sizing: border-box; /* paddingとborderを含めたサイズにする */
    display: flex; /* 子要素を横並びにする */
    justify-content: space-between; /* 子要素の間に均等なスペースを入れる */
    flex-wrap: wrap; /* 子要素を折り返す */
    row-gap: 20px;
    column-gap: 10px;
}

/* メインメニューボタンのデザイン */
.content-link {
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.4));
    transform: translateZ(0);
    display: flex;
    align-items: center;
    padding: 20px 20px;
    background-color: #fff;
    border-radius: 12px;
    cursor: pointer;
    justify-content: space-between;
    width: 32%;
    box-sizing: border-box;
    transition: background-color 0.3s ease; /* 境界線と背景色の変化をゆっくりに */
}
.content-link:hover{
    background-color: #f6f6f6;
    cursor: pointer;
}
.content-link:hover .link-text {
    color: #00968D !important; /* ホバー時のテキストカラー */
    font-weight: 500;
}

.link-img {
    width: auto;
    height: 36px;
    margin-right: 13px;
}
.link-text-box{
    width: 100%;
    margin: 0;
}
.link-text {
    flex-grow: 1; /* テキストを可能な限り伸ばす */
    margin: 0;
    font-size: 16px;
    color: #484848 !important;
    transition: color 0.3s ease; /* 境界線と背景色の変化をゆっくりに */
}
.link-text-gray {
    margin: 7px auto 0;
    font-size: 13px;
    color: #727272 !important;
    transition: color 0.3s ease; /* 境界線と背景色の変化をゆっくりに */
}

@media only screen and (max-width: 768px) {
    .link-text-gray {
        text-align: center;
    }
}

.arrow-img {
    width: 20px;
    height: auto;
    margin-left: 10px;
}

/* 768px以下の画面幅で2列に並べ、縦に配置する */
@media only screen and (max-width: 768px) {
    .main-menu {
        border-radius: 40px 0 0 0;
        filter: initial;
        padding: 45px 10px 0px;
    }

    .main-menu-box {
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .content-link {
        width: 47%; /* ボタンの幅を45%にして、2つ並べる */
        display: flex;
        flex-direction: column; /* 要素を縦に並べる */
        align-items: center; /* 子要素を中央揃えにする */
        padding: 20px;
    }

    .link-img {
        margin-bottom: 10px; /* 画像とテキストの間に余白を追加 */
        height: 50px; /* 画像のサイズを少し大きく */
        margin-right: 0px;
    }

    .link-text {
        font-size: 16px;
        text-align: center; /* テキストを中央揃え */
    }

    .arrow-img {
        display: none; /* 矢印を非表示にする */
    }
}
@media only screen and (max-width: 600px) {
    .main-menu-box {
        padding: 20px 0px;
    }
    .content-link {
        padding: 20px 5px;
    }
    .link-text {
        font-weight: 500;
        font-size: .9rem;
        text-align: center; /* テキストを中央揃え */
    }
}

/* 店舗のご案内 */

.shop-info{
    width: 100%; /* 親要素の幅に合わせる */
    margin: 70px 0;
    padding: 25px 30px;
    background-color: #F7F7F7;
    border-radius: 40px;
    box-sizing: border-box; /* paddingとborderを含めたサイズにする */
    filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.3));
    transform: translateZ(0);
}
.home-title {
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #484848;
    text-align: center;
    margin-bottom: 30px;
}
.home-title-icon {
    height: 55px;
    width: 60px;
    margin-right: 10px;
}
.shop-box {
    display: flex; /* 子要素を横並びにする */
    justify-content: space-between; /* 左右の間にスペースを均等に配置 */
    align-items: flex-start; /* 子要素の上部を揃える */
}

.column-left {
    width: 250px;
}
.column-left img{
    width: 250px;
}
.column-center{
    width: 30%;
    padding:0 15px;
}

.column-right {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
}
.shop-name{
    color: #00968D;
    font-weight: bold;
}
.shop-address{
    font-size: .9rem;
}
.shop-start{
    font-size: .9rem;
}

.map {
    width: 100%;
    height: 100%;
    position: relative;
}

.map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* 高さ指定を追加して縦に広げる */
.column-right iframe {
    width: 100%;
    height: 100%;
    min-height: 200px; /* 最低限の高さを指定 */
    border: none;
}
/* 768px以下でのレスポンシブ対応 */
@media only screen and (max-width: 768px) {
    .shop-info{
        width: 94%; 
        margin: 70px auto;
        padding: 25px 20px;
    }
    .shop-box {
        flex-wrap: wrap; /* 子要素の折り返しを許可 */
    }

    .column-left, .column-center {
        display: flex;
        width: 100%; /* 左カラムと中央カラムを横並びに */
        justify-content: flex-start; /* 左に寄せる */
        padding: 0 10px;
    }

    .column-left {
        width: 50%; /* 左カラムを40%の幅に */
    }
    .column-left img{
        width: 100%;
    }

    .column-center {
        width: 40%; /* 中央カラムを58%の幅に */
        padding-left: 0px;
        display: flex;
        flex-direction: column; /* 中身を縦並び */
    }

    .column-right {
        width: 100%; /* 地図のカラムを100%に */
        margin-top: 20px; /* 地図の上にスペースを追加 */
    }
}
/* 600px以下でのレスポンシブ対応 */
@media only screen and (max-width: 600px) {
    .column-left {
        width: 100%; 
    }

    .column-center {
        width: 100%; 
    }
}

/* 外部リンク */
.external-site {
    padding: 0;
    overflow: hidden;
}

.external-site img {
    display: inline-block;
    width: 28%; /* 4個 width: 21%; */
    margin: 10px;
    flex-shrink: 0; /* 画像の縮小を防ぐ */
    transition: opacity 0.3s ease; 
}
.external-site img:hover {
    opacity: 0.8; 
}

.site-box{
    max-width: 960px;
    margin: 0 auto;
    padding: 0 25px;
}
.box-area {
    background-color: #00968D;
    padding: 50px 0px 30px; /* 初期設定 padding: 50px 25px;*/
    border-radius: 40px 0 0 40px;
    margin-right: calc(50% - 50vw);
}
.box-area-inner {
    max-width: 960px;
    text-align: center;
}
@media only screen and (max-width: 768px) {
    .external-site img {
        display: inline-block;
        width: 28%; /* 初期設定（3個）width: 29%;　（4個）width: 21.5%;*/
        margin: 5px;
        flex-shrink: 0; /* 画像の縮小を防ぐ */
    }
    .box-area {
        padding: 50px 0px 20px;
    }
    .site-box{
        padding: 0 20px;
    }
}
@media only screen and (max-width: 600px) {
    .site-box{
        margin: 0 auto;
        padding: 0 0px;
    }
    .box-area {
        padding: 30px 0px;
        border-radius: 0px;
        margin-right: initial;
    }
    .box-area-inner {
        max-width: 100%;
    }
    .external-site img {
        display: block;
        width: 80%;
        max-width: 380px;
        margin: 25px auto;
    }
}

/* テキストリンク */
.footer-link {
    margin: 3em auto 0;
    text-align: center;
}

@media only screen and (max-width: 600px) {
    .footer-link {
    font-size: 0.85em;
    }
}

/* お知らせ */
.content-news{
    margin-top: 75px;
    width: 100%;
    background-color: #fff;
}
.news {
    max-width: 960px;
    margin: auto;
    display: flex; /* フレックスボックスで左右に配置 */
    justify-content: space-between; /* 左右の間にスペースを入れる */
    align-items: flex-start; /* 上揃え */
    gap: 30px; /* 左右の間隔を調整 */
    padding:60px 20px;
    border-radius: 10px;
}
.column-title {
    margin-top: 70px;
    width: 30%; /* 左側の幅を指定 */
    position: sticky; /* スクロール時に固定 */
    top: 300px; /* 画面上部からの距離を指定 */
}

.column-content {
    width: 68%; /* 右側の幅を指定 */
}

.news-date {
    display: inline-block;
    margin: 0 20px 0 0;
    text-align: center;
    padding: 5px 10px;
    width: 100px;
    font-size: 1rem;
    color: #fff;
    background-color: #00968D;
}

.news-title {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.news-text {
    margin: 20px 0 40px;
    font-size: .95rem;
    line-height: 1.5;
    color: #444;
}
@media only screen and (max-width: 768px) {
    .news {
        display: block; /* フレックスボックスで左右に配置 */
        padding:60px 20px;
    }
    .column-title {
        margin-top: 0px;
        width: 100%; 
        position: initial; 
        top: 10px; 
    }
    .news-date {
        display: block;
    }
    
    .news-title {
        display: block;
    }
    .column-content {
        width: 94%;        
        margin: 50px auto;
    }
    
}

@media only screen and (max-width: 600px) {
    .column-content {
        width: 97%;        
    }
}

/* ---------------------- */
/* ---------------------- */
/* ---------------------- */
/* ---------------------- */
/* ----業務案内ページ----- */
/* ---------------------- */
/* ---------------------- */
/* ---------------------- */
/* ---------------------- */

.page-top{
    margin-top: 120px;
    background-image: url(./page-top.svg);
}
.page-top-content {
    box-sizing: border-box;
    padding: 30px 15px 60px;
    max-width: 960px;
    margin: auto;
}
.breadcrumb{
    font-size: .95rem;
    margin: 0 0 60px;
}
.breadcrumb a{
    color: #00968D;
    text-decoration: none;
}

@media only screen and (max-width: 600px) {
    .page-top{
        margin-top: 75px;
    }
    .breadcrumb{
        font-size: .9rem;
    }
}

/* テーブル */

.service-table {
    margin: 50px 0;
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #7abcb8;
    table-layout: fixed; /* 固定幅のレイアウト */
    max-width: 100%; /* 画面幅に合わせて縮小 */
}
.service-table tbody{
    display: contents;
}

.service-table th {
    box-sizing: border-box;
    text-align: left;
    width: 30%;
    padding: 25px 20px;
    background-color: #e1f5f0;
    font-weight: bold;
    color: #484848;
    border-bottom: 1px solid rgb(202 202 202);
}

.service-table td {
    box-sizing: border-box;
    width: 70%; /* 右の列を残り65%に */
    font-size: .95rem;
    background-color: white;
    color: #333;
    padding: 10px;
    border-bottom: 1px solid rgb(202 202 202);
}

/* 行全体のスタイル */
.service-table tr:last-child th,
.service-table tr:last-child td {
    border-bottom: none;
}

/* 600px以下の画面幅で1列にする */
@media only screen and (max-width: 600px) {
    .service-table, .service-table tr, .service-table th, .service-table td {
        display: block; /* ブロック要素として扱う */
        width: 100%;
    }
    .service-table tbody{
        display: block;
    }

    .service-table tr {
        margin-bottom: 15px;
    }

    .service-table th, .service-table td {
        width: 100%; /* 1列にするので幅を100%に */
        border-bottom: none; 
    }

    .service-table td {
        padding-top: 20px;
    }
}

/* サービス内容 */

.service-box{
    margin: 50px auto;
    box-sizing: border-box;
    background-color: #fcfcfc;
    padding: 30px 80px;
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.4));
    transform: translateZ(0);
    border-radius: 30px;
}
.services-icon{
    display: block;
    margin: auto;
    height: 55px;
}
.service-box-title{
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    color: #484848;
    margin: 10px auto 5px;
    
}
.service-box-green{
    font-size: 1.1rem;
    font-weight: 300;
    color: #00968D;
    text-align: center;
    margin: 0 auto;
    line-height: 1.3;
}
.service-box-text{
    margin: 30px auto;
}
.service-box-subtitle{
    font-size: .95rem;
    font-weight: bold;
    margin: 20px auto 0;
}
.service-box-subtitle span{
    font-size: 1rem;
    color: #00968D;
    margin-right: 10px;
}
.service-box-subtext{
    color: #000;
    font-weight: 200;
    font-size: .95rem;
    margin-top: 5px;
}
/* 600px以下の画面幅で1列にする */
@media only screen and (max-width: 600px) {
    .service-box{
        padding: 30px 20px;
    }
}

/* 業務案内のボタンのデザイン */
.service-link {
    height: 45px;
    border: 1px solid #d6d6d6;
    margin: 0 auto 20px;
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.4));
    transform: translateZ(0);
    display: flex;
    align-items: center;
    padding: 0 20px 0 30px;
    background-color: #fff;
    border-radius: 20px;
    cursor: pointer !important;
    justify-content: space-between;
    width: 28%;
    box-sizing: border-box;
    transition: border 0.3s ease, background-color 0.3s ease; /* 境界線と背景色の変化をゆっくりに */
}

.service-link-text {
    font-weight: 500;
    color: #00968D;
    flex-grow: 1;
    font-size: 16px;
    transition: color 0.3s ease; /* テキストカラーの変化をゆっくりに */
}

.service-link:hover{
    border: 1px solid #53b9b3;
    cursor: pointer;
    background-color: #00968D; 
}
.service-link:hover .service-link-text {
    color: white !important; /* ホバー時のテキストカラー */
    font-weight: 500;
}

.service-link::after {
    display: inline-block;
    margin-top: 0px;
    content: '';
    width: 13px;
    height: 18px;
    background-image: url(./arrow-nallow.png);
    background-size: cover;
    margin-left: 10px;
}

.service-link:hover::after {
    background-image: url('./arrow-nallow-white.png'); 
}


/* 786px以下の画面幅 */
@media only screen and (max-width: 786px) {
    .service-link {
        width: 40%;
    }
}
/* 500px以下の画面幅 */
@media only screen and (max-width: 500px) {
    .service-link {
        width: 70%;
    }
}


/* ---------------------- */
/* ---------------------- */
/* ---------------------- */
/* ---------------------- */
/* ----ガスのご案内ページ--- */
/* ---------------------- */
/* ---------------------- */
/* ---------------------- */
/* ---------------------- */

.gas-service-box{
    margin: 40px auto 60px;
    box-sizing: border-box;
    background-color: #fcfcfc;
    padding: 30px 50px;
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.4));
    transform: translateZ(0);
    border-radius: 30px;
}
.tg-link-title {
    width: 99%;
    display: inline-block;
    position: relative;
}
.tg-link-title::after {
    bottom: 15px;
    content: '＼';
    position: absolute;
    right: -0px;
    font-size: .8rem;
    color: #08a39a;
}
.gas-service-box img{
    top: 18px;
    position: absolute;
    left: 0;
    width: 28px;
}
.tg-link-title p{
    padding-bottom: 5px;
    border-bottom: 1px solid #08a39a;
    margin-left: 40px;
    display: block;
    font-size: 1.1rem;
    font-weight: bold;
    color: #484848;
}
.tg-link-title p:hover {
    color: #00968D;
    background-color: #f6f6f6;
    cursor: pointer;
}

.tg-link-title span{
    margin-left: 15px;
    font-size: .95rem;
    font-weight: 300;
    color: #00968D;
}

.tg-link-text{
    font-size: 1rem;
    color: #585858;
}
/* 768px以下の画面幅で1列にする */
@media only screen and (max-width: 786px) {
    .gas-service-box{
        padding: 30px 15px;
    }
    .gas-service-box img{
        margin: 0 6px 15px 0;
    }
    .tg-link-title{
        width: 100%;
    }
    .tg-link-title::after {
        bottom: 14px;
    }
    .tg-link-title p{
        font-size: 1rem;
    }
    .tg-link-text{
        font-size: .95rem;
    }
    .tg-link-title span{
        font-size: .9rem;
    }
}
/* 600px以下の画面幅で1列にする */
@media only screen and (max-width: 600px) {
    .tg-link-title span{
        margin-left: 0px;
        display: block;
    }
}


.h1-under-text{
    padding: 0 20px;
    margin: 30px auto;
}
/* 768px以下の画面幅で1列にする */
@media only screen and (max-width: 786px) {
    .h1-under-text{
        padding: 0 10px;
    }
}

/* ガスの使用停止や中止のお申し込み */
.gas-howto{
    text-align: center;
}
.gas-fire{
    position: initial !important;
    width: 40px !important;
}
.gas-howto-text{
    font-size: 1.1rem;
    font-weight: bold;
    color: #5f5f5f;
}
.gas-tel{
    margin: 10px auto;
}
.gas-tel img{
    vertical-align: middle;
    width: auto !important;
    position: initial !important;
    display: inline-block !important;
    height: 50px !important;
}
.gas-tel span{
    margin-left: 0px;
    display: inline-block;
    font-size: 1.4rem;
    color: #989898;
    font-weight: bold;
    vertical-align: middle;
}
.gas-note{
    font-size: .9rem;
}

@media only screen and (max-width: 600px) {
    .gas-fire {
        position: initial !important;
        width: 30px !important;
    }
    .gas-howto-text{
        margin: 0px;
    }
    .gas-tel img {
        margin: 10px auto 0px;;
        height: 40px !important;
    }
    .gas-tel span{
        margin-left: 0px;
        display: block;
        font-size: 1rem;
    }

}
.meter{
    position: initial !important; 
    width: 120px !important;
}


/* ---------------------- */
/* ---------------------- */
/* ---------------------- */
/* ---------------------- */
/* ----会社案内ページ--- */
/* ---------------------- */
/* ---------------------- */
/* ---------------------- */
/* ---------------------- */

.out-link{
    color: #00968D;
    font-size: .95rem;
    margin: 0;
}
.out-link img{
    vertical-align: middle;
    display: inline-block;
    width: 20px;
    margin-left: 10px;
}

/* ---------------------- */
/* ---------------------- */
/* ---------------------- */
/* ---------------------- */
/* ----リフォームページ--- */
/* ---------------------- */
/* ---------------------- */
/* ---------------------- */
/* ---------------------- */

.reform-box{
    margin: 40px auto 60px;
    box-sizing: border-box;
    background-color: #fcfcfc;
    padding: 30px 50px;
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.4));
    transform: translateZ(0);
    border-radius: 30px;
}

.reform-title{
    margin: 15px auto 30px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    color: #5f5f5f;
}
.reform-icon{
    display: block;
    margin: auto;
    width: 50px;
}
.reform-text{
    font-size: 1rem;
    color: #585858;
}

@media only screen and (max-width: 600px) {
    .reform-box{
        padding: 30px 15px;
    }
    .reform-title{
        margin: 20px auto 35px;
    }
    .reform-icon {
        width: 55px;
    }
    .reform-text{
        font-size: .95rem;
    }
}

/* ---------------------- */
/* ---------------------- */
/* ---------------------- */
/* ---------------------- */
/* ----取扱商品--- */
/* ---------------------- */
/* ---------------------- */
/* ---------------------- */
/* ---------------------- */

/* １行ネーム用のボックス */
.products-box {
    padding-top: 30px;
    position: relative;
    display: flex; /* 子要素を横並びに */
    justify-content: space-between; /* 子要素間に均等なスペース */
    flex-wrap: wrap; /* 子要素が画面幅に収まらない場合に折り返し */
    gap: 20px; /* 子要素間のスペース */
}

.product-item {
    flex-basis: calc(50% - 20px); /* 2列に並べるための幅調整 */
    text-align: right;
    position: relative;
    margin-bottom: 20px; /* 下にも余白を追加 */
}

.product-name {
    font-size: .95rem;
    color: #585858;
    font-weight: bold;
    margin: 15px 0;
    text-align: left;
}

.products-pic {
    width: 90%; /* 画像の幅を親要素に合わせる */
    height: auto; /* 高さは自動調整 */
}

.product-erea {
    box-sizing: border-box;
    padding: 10px;
    position: absolute;
    background-color: #fff;
    border-radius: 15px;
    top: -30px;
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.4));
    transform: translateZ(0);
    width: 250px;
}

.button-text {
    color: #333;
    font-size: .9rem;
    margin: 0;
}

.button-set {
    height: 40px;
    margin: auto;
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.4));
    transform: translateZ(0);
    display: flex;
    align-items: center;
    padding: 10px 20px 10px 30px;
    background-color: #fff;
    border-radius: 20px;
    cursor: pointer;
    justify-content: space-between;
    width: 160px;
    box-sizing: border-box;
    transition: border 0.3s ease, background-color 0.3s ease;
}



.button-set:hover{
    cursor: pointer;
    background-color: #00968D; 
}
.button-set:hover .button-text {
    color: white !important; /* ホバー時のテキストカラー */
}

.button-set::after {
    display: inline-block;
    margin-top: 2px;
    content: '';
    width: 17px;
    height: 17px;
    background-image: url(./link.png);
    background-size: cover;
}

.button-set:hover::after {
    background-image: url('./link-white.png'); 
}

@media only screen and (max-width: 960px) {
    .products-pic {
        width: 100%;
    }
    .product-erea {
        justify-content: space-between;
        padding: 10px 10px 10px 15px;
        display: flex;
        position: unset;
        width: 100%;
        filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2));
        transform: translateZ(0);
    }
    .product-name {
        display: inline;
    }
    .button-set {
        margin: auto 0;
        filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.3));       
        transform: translateZ(0);
        border-radius: 30px; 
    }
}

/* 600px以下の画面幅では1列に */
@media only screen and (max-width: 786px) {
    .product-item {
        flex-basis: 100%; /* 1列に変更 */
    }
}


/* ２行ネーム用のボックス */
.products2-box {
    padding-top: 30px;
    position: relative;
    display: flex; /* 子要素を横並びに */
    justify-content: space-between; /* 子要素間に均等なスペース */
    flex-wrap: wrap; /* 子要素が画面幅に収まらない場合に折り返し */
    gap: 20px; /* 子要素間のスペース */
}

.product2-item {
    flex-basis: calc(50% - 20px); /* 2列に並べるための幅調整 */
    text-align: right;
    position: relative;
    margin-bottom: 20px; /* 下にも余白を追加 */
}

.product2-name {
    color: #585858;
    font-weight: bold;
    font-size: .95rem;
    margin: 15px 0;
    text-align: left;
}

.products2-pic {
    width: 90%; /* 画像の幅を親要素に合わせる */
    height: auto; /* 高さは自動調整 */
}

.product2-erea {
    box-sizing: border-box;
    padding: 10px;
    position: absolute;
    background-color: #fff;
    border-radius: 15px;
    top: -30px;
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.4));
    transform: translateZ(0);
    width: 250px;
}

.button2-text {
    color: #333;
    font-size: .9rem;
    margin: 0;
}

.button2-set {
    height: 40px;
    margin: auto;
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.4));
    transform: translateZ(0);
    display: flex;
    align-items: center;
    padding: 10px 20px 10px 30px;
    background-color: #fff;
    border-radius: 20px;
    cursor: pointer;
    justify-content: space-between;
    width: 160px;
    box-sizing: border-box;
    transition: border 0.3s ease, background-color 0.3s ease;
}

.button2-set:hover{
    cursor: pointer;
    background-color: #00968D; 
}
.button2-set:hover .button2-text {
    color: white !important; /* ホバー時のテキストカラー */
}

.button2-set::after {
    display: inline-block;
    margin-top: 2px;
    content: '';
    width: 17px;
    height: 17px;
    background-image: url(./link.png);
    background-size: cover;
}

.button2-set:hover::after {
    background-image: url('./link-white.png'); 
}


@media only screen and (max-width: 960px) {
    .products2-pic {
        width: 100%;
    }
    .product2-erea {
        justify-content: space-between;
        padding: 10px 10px 10px 15px;
        display: block;
        position: unset;
        width: 100%;
        filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2));
        transform: translateZ(0);
    }
    .product2-item {
        text-align: left;
    }
    
    .product2-name {
        display: block;
        text-align: center;
        margin: 5px 0 15px;
    }
    .button2-set {
        margin: 20px auto auto;
        filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.3));       
        transform: translateZ(0);
        border-radius: 30px; 
    }
}

/* 786px以下の画面幅では1列に */
@media only screen and (max-width: 786px) {
    .product2-item {
        flex-basis: 100%; /* 1列に変更 */
    }
}


/* その他の製品用のボックス */

.products-etc-box {
    padding-top: 30px;
    position: relative;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    gap: 20px 10px;
}
.product-etc-item {
    flex-basis: calc(50% - 20px); /* 2列に並べるための幅調整 */
    text-align: right;
    position: relative;
    margin-bottom: 20px; /* 下にも余白を追加 */
}

.product-etc-name {
    color: #585858;
    font-weight: bold;
    font-size: .95rem;
    margin: 15px 0;
    text-align: left;
}


.product-etc-erea {
    box-sizing: border-box;
    padding: 10px;
    background-color: #fff;
    border-radius: 15px;
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.4));
    transform: translateZ(0);
    width: 24%;
}

.button-etc-text {
    color: #333;
    font-size: .9rem;
    margin: 0;
}

.button-etc-set {
    height: 40px;
    margin: auto;
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.4));
    transform: translateZ(0);
    display: flex;
    align-items: center;
    padding: 10px 20px 10px 30px;
    background-color: #fff;
    border-radius: 20px;
    cursor: pointer;
    justify-content: space-between;
    width: 160px;
    box-sizing: border-box;
    transition: border 0.3s ease, background-color 0.3s ease;
}

.button-etc-set:hover{
    cursor: pointer;
    background-color: #00968D; 
}
.button-etc-set:hover .button-etc-text {
    color: white !important; /* ホバー時のテキストカラー */
}

.button-etc-set::after {
    display: inline-block;
    margin-top: 2px;
    content: '';
    width: 17px;
    height: 17px;
    background-image: url(./link.png);
    background-size: cover;
}

.button-etc-set:hover::after {
    background-image: url('./link-white.png'); 
}


@media only screen and (max-width: 960px) {
    .product-etc-erea {
        justify-content: space-between;
        padding: 10px 10px 10px 15px;
        display: block;
        position: unset;
        width: 49%;
        filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2));
        transform: translateZ(0);
    }
    .product-etc-item {
        text-align: left;
    }
    
    .product-etc-name {
        display: block;
        text-align: center;
        margin: 5px 0 15px;
    }
    .button-etc-set {
        margin: 20px auto auto;
        filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.3));       
        transform: translateZ(0);
        border-radius: 30px; 
    }
}

/* 575px以下の画面幅 */
@media only screen and (max-width: 575px) {
    .products-etc-box {
        justify-content: space-between;
    }
    .product-etc-erea {
        width: 48%;
    }
}
/* 480px以下の画面幅では1列に */
@media only screen and (max-width: 480px) {
    .product-etc-erea {
        width: 100%;
        filter: drop-shadow(2px 1px 2px rgba(0, 0, 0, 0.2));
        transform: translateZ(0);
    }
}


/* ---------------------- */
/* ---------------------- */
/* ---------------------- */
/* ---------------------- */
/* --イベント・キャンペーン- */
/* ---------------------- */
/* ---------------------- */
/* ---------------------- */
/* ---------------------- */

.event-box{
    margin: 40px auto 60px;
    box-sizing: border-box;
    background-color: #fcfcfc;
    padding: 50px 50px 30px;
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.4));
    transform: translateZ(0);
    border-radius: 30px;
}
.event-title{
    font-size: 1.1rem;
    font-weight: bold;
    color: #00968D;
    background-color: #E7F3EA;
    padding: 10px 25px;
    margin-bottom: 20px;
}
.evnet-text{
    font-size: .95rem;
    color: #484848;
    margin-bottom: 30px;
}
.event-pic-flex{
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}
.event-pic-flex img{
    width: 48%;
}
.event-pic-display{
    text-align: center;
    width: 100%;
}


@media only screen and (max-width: 700px) {
    .event-box{
        padding: 50px 30px 30px;
    }
    .event-title{
        font-size: 1rem;
    }
    .event-text{
        font-size: .9rem;
    }
    .event-pic-flex {
        gap: 20px 10px;
    }
}
@media only screen and (max-width: 500px) {
    .event-box{
        padding: 50px 15px 30px;
    }
    .event-pic-flex {
        margin: 0 auto;
        display: block;
    }
    .event-pic-flex img {
        margin: 0 auto 20px;
        display: block;
        width: 90%;
    }
}

.first-message{
    padding: 0 15px;
    width: fit-content;
    max-width: 760px;
    color: white;
    margin: 50px auto;
}
@media only screen and (max-width: 768px) {
    .first-message{
        padding: 0 15px;
        width: fit-content;
        max-width: 88%;/* 初期値 max-width: 90%; */
        color: white;
        margin: 50px auto;
    }
}

.page-title-box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.page-title-box h1 {
    white-space: nowrap; /* 折り返さない */
    flex-shrink: 0;
}
.page-title-box > div {
    line-height: 1.7;
    letter-spacing: 1px;
    padding-left: 30px;
    margin-bottom: 30px;
    margin-top: 30px;
    flex: 1;
}

@media only screen and (max-width: 768px) {
    .page-title-box {
        display: block;
    }
    .page-title-box > div {
        padding-left: 0px;
        margin-bottom: 0px;
        margin-top: 30px;
    }
}

.out-link-small{
    display: flex;
}
.out-link-small a{
    text-decoration: none;
    color: #00968D;
    font-size: .9rem;
}
.out-link-small img{
    width: 25px;
    margin-right: 8px;
}

/* おすすめセレクションバナー */
/* 取扱商品ページ・リフォームページ */

.selection-banner {
    margin: 0 auto 3em;
    text-align: center;
}

.selection-banner img {
    width: 92.5%;
    max-width: 850px;
    margin: 0 auto;
}

.selection-banner img:hover {
    opacity: 0.8; 
}

/* お客さま個人情報の取り扱いについてページ */

#privacypolicy.service-box ul {
    padding-inline-start: 20px;
}
#privacypolicy.service-box ol {
    padding-inline-start: 30px;
}

/* お支払い方法についてページ */

/* アンカーポイント */
#payment .anchor {
    display: block;
    padding-top: 120px;
    margin-top: -80px;
}

#payment .payment-menu {
    width: 85%;
    margin: 2em auto;
    padding-inline-start: 15px;
}

#payment .payment-menu p {
    margin: 0.25em auto;
    padding: 5px 0;
    border-bottom: 1px solid #08a39a;
    line-height: 1.5em;
    font-size: 1.1rem;
    letter-spacing: 2px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #484848;
}

#payment .payment-menu p:hover {
    color: #00968D;
    background-color: #f6f6f6;
    cursor: pointer;
}

#payment .price_stores {
    padding: 0;
    list-style-type: none;
}

#payment .list-1 {
    padding: 0;
    list-style-type: none;
    font-weight: bold;
}

#payment .list-2 {
    padding: 0 0.5em 0 1.5em;
    font-weight: normal;
}

#payment li::marker {
    font-size: 1.2em;
}

#payment table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

#payment .price {
    max-width: 750px;
    margin: 0.5em auto;
    font-size: 0.95em;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    font-weight: normal;
}

#payment .price_heading,
#payment .price_item {
    padding: 5px;
    vertical-align: middle;
}

#payment .price_heading {
    background-color: #f5f5f5;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    text-align: center;
}

#payment .price_item-stores {
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

#payment .price_item-upper,
#payment .price_item-middle,
#payment .price_item-lower {
    text-align: right;
}

#payment .price_item-upper,
#payment .price_item-middle {
    border-bottom: 1px dotted #ccc;
    border-left: 1px solid #ccc;
}

#payment .price_item-lower {
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

@media only screen and (max-width: 600px) {
    #payment .price {
        font-size: 0.75em;
    }
}