@charset "UTF-8";
/*
    Theme Name: Hirano-Sekiyu
    Description: 平野石油のテーマ
    Version: 1.0
    Author: miyata.shohei
 */

.menu-content {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background-color: black;
    color: white;
}

.page-titile{
    text-decoration:underline;
}

/* 中央寄せ、左寄せを切り替える */
.text-align-switch {
    text-align: center; /* パソコン時は中央寄せ */
}

@media screen and (max-width: 768px) {
    .text-align-switch {
    text-align: left; /* 768px以下だと左寄せになる */
    }
}

/* ハンバーガーメニューの色を変更 */
.drawer-hamburger-icon{
    background-color: white;
}
.drawer-hamburger-icon:after{
    background-color: white;
}
.drawer-hamburger-icon:before {
    background-color: white;
}

.fs-2_5 {
    font-size: 2.5rem;
}

.fs-2_0 {
    font-size: 2.0rem;
}

.fs-1_4 {
    font-size: 1.4rem;
}

.fs-1_2 {
    font-size: 1.2rem;
}

.fs-0_8 {
    font-size: 0.8rem;
}

.fs-0_7 {
    font-size: 0.7rem;
}

.ls-0_2_4 {
    letter-spacing: 0.24rem;
    display: block;
    text-indent: 0.24rem;
}

.ls-1_0 {
    letter-spacing: 1.0rem;
    display: block;
    text-indent: 1.0rem;
}

.ls_1_5 {
    letter-spacing: 1.5rem;
    display: block;
    text-indent: 1.5rem;
}

.site-light-color {
    color: #646464;
}

.menu-divider {
    border-top: 1px solid #e9ecef;
    margin: 0.1rem;
}

.no-gutters {
    margin:0;
    padding:0;
}

.head {
    position:fixed;
    z-index: 1000;
    background-color: white;
    height: 167.35px;
    width: 100%;
}

.pt-head-height {
    padding-top: 167.35px;
}

.footer {
    background-color: #201F20;
}

.container-max {
    width: 100%;
}

.add-scroll {
    overflow: auto;
}

.side-border {
    display: flex;
    align-items: center;
}

.side-border:before, .side-border:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #666;
}

.side-border:before {
    margin-right: 1rem;
}

.side-border:after {
    margin-left: 1rem;
}

.footer-address {
    font-size: 0.8rem;
}

/*
燃料情報関連
*/

.FuelRegular {
    color: red;
}

.FuelHighOc {
    color: orange;
}

.FuelKeiyu {
    color: green;
}

.FuelToyu {
    color: yellow;
}

.fuel_price_main_header {
    background-color: royalblue;
    font-size: xx-large;
    color: white;
}

.fuel_price_data_row {
    background-color: black;
}

.fuel_price_table {
    text-align: center;
    float: left;
    width: 30%;
    font-family: sans-serif;
}

.fuel_price_table_wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.fuel_price_table_wrapper::after {
    content: "";
    display: block;
    clear: both;
}

.PriceLabel {
    font-size: xx-large;
}

.PriceValue {
    font-weight: bolder;
    font-size: 500%;
}

/*---
Collapse
*/

.accordion {
    width: 100%;
}
.toggle {
    display: none;
}
.option {
    position: relative;
    margin-top: 1em;
}

.title,
.content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.3s;
}
.title {
    border: solid 1px #ccc;
    padding: 1em;
    display: block;
    color: #333;
    font-weight: bold;
}
.title::after,
.title::before {
    content: "";
    position: absolute;
    right: 1.25em;
    top: 1.25em;
    width: 2px;
    height: 0.75em;
    background-color: #999;
    transition: all 0.3s;
}
.title::after {
    transform: rotate(90deg);
}
.content {
    max-height: 0;
    overflow: hidden;
}
.content p {
    margin: 0;
    padding: 0.5em 1em 1em;
    font-size: 0.9em;
    line-height: 1.5;
}
.toggle:checked + .title + .content {
    max-height: 1000px;
    transition: all 1.5s;
}
.toggle:checked + .title::before {
    transform: rotate(90deg) !important;
}

table th, table td {
    border: solid 1px white;
    padding: 10px;
}

.fmhs {
    text-align: center;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp, .fus { display: none !important; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 768px) {
    .pc, .fup { display: none !important; }
    .sp { display: block !important; }
    .fus { display: block !important; }
}

.theme-title{
    font-size: 2.5rem;
}

@media screen and (max-width: 768px){
    .theme-title{
        font-size: 2.0rem;
        margin-top: 0.3rem;
        margin-right: 1.8rem;
    }

    table {
        width: 100%;
    }

}

/* 画像のサイズを調整 */
.img-resize {
    width: 75%;
    height: 75%;
}

.img-resize-93 {
    width: 93%;
    height: 93%;
}

@media screen and (max-width: 768px){
    .img-resize , .img-resize-93 {
        width: 100%;
        height: 100%;
    }
}

/*ホバーエフェクト*/
.zoom-in-img img {
    transform: scale(1);
    transition: .3s ease-in-out;
}
.zoom-in-img:hover img {
    transform: scale(1.05);
}