@charset "utf-8";

/**
* shop
============================== */
.archives-shop {
    margin: auto;
    padding: 60px var(--addLR);
    max-width: var(--contentWidth2-px);
}
.archives-shop__area {
    background: var(--color-theme-primary);
    border-radius: 5px 5px 0 0;
    font-size: clamp(1.8rem, 2vw, 2.4rem);
    font-weight: 700;
    color: #fff;
    padding: .3em 1em;
}
.archives-shop__list + .archives-shop__area {
    margin-top: var(--section);
}
.archives-shop__list {
    border: 3px solid var(--color-theme-primary-pale);
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: clamp(1em, 3.636vw, 40px);
    padding: min(var(--addLR), 50px);
}
.archives-shop__thumb::before {
    content: '';
    display: block;
    padding-top: 75%;
}
.archives-shop__title {
    font-size: clamp(1rem, 1.273vw, 1.4rem);
    font-weight: 700;
    margin: 1.4em 0;
}
.archives-shop__name {
    font-size: 1.714em;
    display: block;
}
@media screen and (min-width: 641px) {
    .archives-shop__list {
        grid-template-columns: repeat(3,1fr);
    }
}
@media screen and (min-width: 1001px) {
    .archives-shop__list {
        grid-template-columns: repeat(4,1fr);
    }
}


/* single */
.shop__header {
    border-bottom: 6px solid var(--color-theme-primary);
    font-size: clamp(2.4rem, 3vw, 3.6rem);
    display: flex;
    align-items: flex-end;
    margin-bottom: 1.333em;
    padding-bottom: .556em;
}
.shop__title {
    margin-left: .5em;
    font-weight: 900;
    line-height: 1.2;
}
.shop__logo {
    width: min(45%, 220px);
}
.shop__thumb::before {
    content: '';
    display: block;
    padding-top: 75%;
}
.shop__map {
    /* aspect-ratio: 4 / 3; */
    background: var(--color-bg);
    position: relative;
}
.shop__map::before {
    content: '';
    display: block;
    padding-top: 100%;
}
.shop__map > iframe {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transition: transform 1s ease-out;
}

@media only screen and (max-width: 640px) {
    .shop__thumb {
        display: block;
        margin: 0 auto 2em;
    }
}
@media only screen and (min-width: 641px) {
    .shop__container {
        display: flex;
        align-items: flex-start;
        gap: clamp(1em, 3.33vw, 40px)
    }
    .shop__thumb {
        width: min(35%, 400px);
    }
    .shop__content {
        flex: 1;
    }
    .shop__map::before {
        content: '';
        display: block;
        padding-top: 42%;
    }
}


/**
* products
============================== */
/* archives */
.handled {
    border: 3px solid var(--color-theme-primary);
    border-radius: var(--radius);
    margin-top: 2em;
    padding: calc(var(--addLR) - 3px);
    counter-reset: handled;
}
.handled__title {
    color: var(--color-theme-primary);
    font-size: clamp(2.2rem, 2.586vw, 3rem);
    font-weight: 900;
    margin-bottom: 1em;
}
.handled__title::before {
    background: var(--color-theme-primary);
    border-radius: 3em;
    content: 'CASE ' counter(handled, decimal-leading-zero);
    counter-increment: handled;
    color: #fff;
    display: block;
    font-size: .6em;
    font-weight: 700;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: .4em;
    padding: 0.1em 0;
    width: 160px;
}
.handled__content {
    background: var(--color-bg-yellow);
    text-align: center;
    padding: min(3vw,10px);
}
.handled__text {
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1.4;
    margin-bottom: 0.2em;
}
.text--blue {
    color: #001e73;
}
.handled__price {
    display: inline;
}
@media screen and (min-width: 1001px) {
    .handled__price {
        display: grid;
        gap: 5px;
        align-items: center;
        margin-top: -10px;
        margin-left: 10px;
    }
}
@media (min-width: 641px) and (max-width: 768px) {
    .handled__price {
        display: grid;
        gap: 5px;
        align-items: center;
        margin-top: -10px;
        margin-left: 10px;
    }
}
@media screen and (max-width: 768px) {
    .handled__img {
        display: block;
        margin: 0 auto 1em;
    }
}
@media screen and (min-width: 641px) {
    .handled__price {
        grid-template-columns: repeat(2,1fr);
    }
}
@media screen and (min-width: 769px) {
    .handled__container {
        display: grid;
        grid-template-columns: 39.375% 57.143%;
        gap: var(--padding-40);
    }

    .handled__label::before,
    .handled__label::after {
        background: var(--color-theme-primary);
        content: '';
        display: block;
        width: 2em;
        height: 2px;
        margin: 0 .75em;
    }
}

/* products-list-2 */
.products-list-2 {
    border: 1px solid var(--color-border);
    border-radius: max(var(--radius),2.5vw);
    padding: calc(var(--padding-40) * .75) var(--padding-40);
    display: grid;
    grid-template-columns: auto 30vw;
    grid-template-areas:
        "INFO BADGE"
        "PRICE PRICE"
        "BTN BTN";
    gap: min(3vw,20px);
    align-items: center;
}
.products-list-2 * {
    letter-spacing: 0;
}
.products-list-2 + .products-list-2 {
    margin-top: min(1em, 20px);
}
.products-list-2__info {
    grid-area: INFO;
}
@media screen and (max-width: 768px) {
    .products-list-2__badge {
        text-align: center;
    }
}
.products-list-2__badge {
    grid-area: BADGE;
}
.products-list-2__price {
    grid-area: PRICE;
    margin-bottom: .8em;
}
.products-list-2__btn {
    grid-area: BTN;
    text-align: center;
}



.products-list-2__pressure {
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: .2em;
}
.products-list-2__title {
    font-size: clamp(2rem, 6.25vw, 4.8rem);
    font-weight: 900;
    line-height: 1;
}

.products-list-2__pinfo {
    font-size: clamp(1.2rem, 2.08vw, 1.6rem);
    padding-right: .5em;
}
.products-list-2__num {
    background: var(--price-marker);
    color: var(--color-accent-error);
    display: inline-block;
    font-size: clamp(4rem, 7.81vw, 6rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: var(--price-spacing);
}
.products-list-2__num > .yen {font-size: .5em;}
.products-list-2__num > .tax {font-size: .25em;}

@media screen and (max-width: 1000px) {
    .products-list-2__btn .btn-1 {
        min-width: auto;
        width: 100%;
    }
}

@media screen and (min-width: 641px) {
    .products-list-2 {
        /* grid-template-columns: auto 30vw; */
        grid-template-areas:
            "INFO BADGE"
            "PRICE BTN";
    }
}
@media screen and (min-width: 1001px) {
    .products-list-2 {
        grid-template-columns: auto auto auto;
        grid-template-areas:
            "INFO BADGE PRICE"
            "INFO BADGE BTN";
        gap: 0 20px;
    }

    .products-list-2__title {font-size: 4.8rem;}
    .products-list-2__num {font-size: 6rem;}

}
@media screen and (min-width: 1201px) {
    .products-list-2__price {
        display: flex;
        justify-content: center;
        align-items: center;
        justify-self: end;
    }
}

/* maker-header */
.maker-header {
    overflow: hidden;
}
.maker-header__thumb {
    border: 1px solid var(--color-border);
    text-align: center;
    margin: 0 0 2em;
    padding: 2.5em 1em 3em;
}
.maker-header__label {
    font-size: clamp(1em, 2vw, 2.4rem);
    font-weight: 700;
    margin-top: -.5em;
}
.maker-header__big {
    font-size: clamp(2.4rem, 3.83vw, 4.6rem);
    font-weight: 900;
    line-height: 1.2;
}
@media only screen and (min-width: 641px) {
    .maker-header__thumb {
        width: min(40%,420px);
        float: right;
        margin: 0 0 0 2em;
    }
}

/* maker-feature */
.maker-feature__title {
    color: var(--color-theme-primary);
    font-size: clamp(1.8rem, 2.5vw, 3rem);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: .5em;
}
@media only screen and (max-width: 640px) {
    .maker-feature__container + .maker-feature__container {
        border-top: 1px solid var(--color-border);
        margin-top: 1em;
        padding-top: 1em;
    }
}
@media only screen and (min-width: 641px) {
    .maker-feature {
        background: var(--color-border);
        display: grid;
        gap: 1px;
        grid-template-columns: repeat(3,1fr);
    }
    .maker-feature__container {
        background: #fff;
        padding: 0 clamp(1em, 2.5vw, 30px);
    }
}

/* fotter-maker */
.fotter-maker {
    background: var(--color-theme-primary);
    color: #fff;
    text-align: center;
    padding: calc(var(--section) / 2) var(--addLR) var(--section);
}
.fotter-maker__title {
    font-size: clamp(2rem, 3.75vw, 2.4rem);
    font-weight: 900;
    margin-bottom: 1em;
}
.fotter-maker__navi {
    --maker-navi-width: calc((100% - 6px) / 2);

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--maker-navi-width), max-content));
    justify-content: center;
    gap: 6px;
    margin: auto;
    max-width: 1000px;
}
.fotter-maker__link {
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    padding: 1em;
}
@media only screen and (min-width: 641px) {
    .fotter-maker__navi {
        --maker-navi-width: 195px;
    }
}

/* products */
.products {
    display: grid;
    gap: min(2.5vw, 30px);
}
.products__pressure {
    font-size: clamp(1.4rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: .4em;
}
.products__title {
    font-size: clamp(2.4rem, 8vw, 4.8rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    margin-bottom: .85em;
    padding-left: 2.1em;
    position: relative;
}
.products__title::before {
    border: 2px solid;
    content: '品番';
    font-size: .375em;
    font-weight: 500;
    padding: .5em 0;
    width: 4.4em;
    text-align: center;
    position: absolute;
    left: 0;
    top: .25em;
}
@media screen and (min-width: 1201px) {
    .products {
        grid-template-columns: repeat(2,1fr);
    }
}

/* breakdown */
.breakdown {
    background: var(--color-bg-yellow);
    font-size: clamp(1.6rem,3vw,1.8rem);
    padding: min(3vw,30px);
}
.breakdown__label {
    color: var(--color-accent-error);
    display: flex;
    align-items: center;
    font-size: clamp(1.8rem,4vw,2.4rem);
    font-weight: 900;
    line-height: 1.4;
    text-align: center;
    margin-bottom: .5em;
}
.breakdown__label::before,
.breakdown__label::after {
    background: var(--color-accent-error);
    content: '';
    display: block;
    width: 1.5em;
    height: 2px;
    margin: 0 .75em;
}
.breakdown__bnr {
    display: grid;
    gap: 10px;
    align-items: end;
    justify-content: center;
    margin-top: 1em;
}
@media screen and (min-width: 641px) and (max-width: 1200px) {
    .breakdown__bnr {
        grid-template-columns: repeat(2,1fr);
    }
}

/* products-tag */
.products-tag {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    margin-bottom: 1em;
}
.products-tag__label {
    border-radius: 3em;
    color: #fff;
    font-size: clamp(1.2rem,2.08vw,1.6rem);
    font-weight: 700;
    padding: .1em 1em;
}
.products-tag__label.unit {background: var(--color-accent-error);}
.products-tag__label.tank {background: var(--color-theme-tertiary);}

/* products-info */
.products-num {
    letter-spacing: var(--price-spacing) !important;
    margin: 0 .1em;
}

.products-info__plus {
    fill: var(--color-theme-primary);
    display: block;
    margin: .75em auto;
    height: 29px;
    width: 29px;
}

.products-info {
    text-align: center;
}
.products-info__title {
    background: var(--color-theme-primary);
    border-radius: var(--radius-20) var(--radius-20) 0 0;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    padding: .5em;
}
.products-info__container {
    border: 3px solid var(--color-theme-primary);
    border-radius: 0 0 var(--radius-20) var(--radius-20);
    padding: var(--padding-30);
}
.products-info__container * {
    letter-spacing: 0;
}

.products-retail {
    border: 1px solid var(--color-border);
    font-size: clamp(1.4rem,2.81vw,1.8rem);
    font-weight: 700;
    padding: .2em 1em;
}
.products-retail__num {
    font-size: 1.333em;
    font-weight: 900;
}
@media screen and (min-width: 641px) {
    .products-retail {
        font-size: 1.8rem;
    }
}

.products-price {
    color: var(--color-accent-error);
    font-size: clamp(1.6rem,3.75vw,2.4rem);
    font-weight: 900;
    line-height: 1;
    position: relative;
}
.products-retail + .products-price::before {
    border-style: solid;
    border-width: 15px 10px 0 10px;
    border-color: var(--color-border) transparent transparent transparent;
    content: '';
    display: block;
    margin: 1em auto;
    width: 0;
    height: 0;
}
.products-price__wrap {
    background: var(--price-marker);
    display: inline-block;
}
.products-price__num {
    font-size: 2.5em;
}
@media screen and (min-width: 481px) {
    .products-price__wrap > br {
        display: none;
    }
}
@media screen and (min-width: 641px) {
    .products-price {
        font-size: 2.4rem;
    }
}

.products-off {
    background: #ffea00;
    border-radius: 50%;
    color: var(--color-theme-tertiary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    letter-spacing: var(--price-spacing);
    height: 4.2em;
    width: 4.2em;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(10%,-15%) rotate(10deg);
    z-index: -1;
}
.products-off__num {
    font-size: 2em;
    letter-spacing: var(--price-spacing);
}
.products-off__par {
    font-size: .75em;
    letter-spacing: var(--price-spacing);
}

.products-info__note {
    background: var(--color-theme-secondary);
    line-height: 1.4;
    margin-top: .8em;
    padding: .5em;
}

.products-change + .products-change {
    margin-top: 2em;
}
.products-change__title {
    background: #f60;
    color: #fff;
    font-size: clamp(1.8rem,2vw,2.4rem);
    font-weight: 700;
    margin-bottom: .25em;
    padding: .2em 1em;
}

.products-cost {
    font-size: clamp(1.6rem,2.81vw,1.8rem);
    font-weight: 700;
}
.products-cost__num {
    font-size: 1.78em;
    font-weight: 900;
}
@media screen and (min-width: 641px) {
    .products-cost {
        font-size: 1.8rem;
    }
}

.produsts-total {
    background: var(--price-marker);
    color: var(--color-accent-error);
    font-size: clamp(1.8rem,4.69vw,3rem);
    font-weight: 900;
    line-height: 1;
    display: inline-block;
}
.produsts-total__label {
    background: #fff;
    border: 2px solid;
    display: inline-block;
    font-size: .75em;
    font-weight: 700;
    padding: .25em .5em;
    position: relative;
    top: -.5em;
}
.produsts-total__num {
    font-size: 2.5em;
}
@media screen and (min-width: 641px) {
    .produsts-total {
        font-size: 3rem;
    }
}


/**
* post
============================== */

/* single page */
.post-single__title {
    border-bottom: 3px solid var(--color-theme-primary);
    font-size: clamp(2.4rem,3.33vw,3rem);
    font-weight: 900;
    padding-bottom: .6em;
}
.post-single__info {
    border-bottom: 1px solid var(--color-border);
    font-size: 1.2rem;
    display: flex;
    flex-wrap: wrap;
    padding: .8em 0;
}
.post-single__info > * {margin-right: 1em;}


/* postcontent */
.postcontent {
    font-size: 1.6rem;
    margin: 2em 0 4em;
    position: relative;
    word-wrap: break-word;
}
.postcontent::after {
    /* clearfix */
    content: "";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.postcontent > *:first-child,
.postcontent blockquote > *:first-child {margin-top: 0;}
.postcontent blockquote > *:last-child {margin-bottom: 0;}
.postcontent a {text-decoration: underline;}
.postcontent a[href$=".pdf"]::after {
    background: var(--color-link);
    border-radius: 2px;
    color: #fff;
    content: 'PDF';
    display: inline-block;
    font-size: .8rem;
    letter-spacing: 0;
    vertical-align: middle;
    margin-left: 1em;
    padding: 0 .4em;
}
.postcontent p,
.postcontent ul,
.postcontent ol {
    margin-bottom: 1.8em;
}
.postcontent ul,
.postcontent ol {
    padding-left: 2em;
}
.postcontent ul {
    list-style-type: disc;
}
.postcontent ol {
    list-style-type: decimal;
}
.postcontent ul > li + li,
.postcontent ol > li + li {
    margin-top: .8em;
}
.postcontent h2,
.postcontent h3,
.postcontent h4 {
    font-weight: 900;
    margin: 3em 0 1em;
}
/* 見出し1 */
.postcontent h2 {
    border-bottom: 1px solid var(--color-border);
    font-size: clamp(2rem,2.66vw,2.4rem);
    padding-bottom: .8em;
}
/* 見出し2 */
.postcontent h3 {
    border-left: 5px solid var(--color-theme-primary);
    font-size: clamp(1.8rem,2.22vw,2rem);
    padding-left: .4em;
}
/* 見出し3 */
.postcontent h4 {
    color: var(--color-theme-tertiary);
    font-size: clamp(1.7rem,2vw,1.8rem);
}
.postcontent blockquote {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 0 0 1.8rem;
    padding: 20px;
}
.postcontent strong,
.postcontent strong * {
    font-weight: bold;
}
.postcontent em,
.postcontent em * {
    font-style: italic;
}
.postcontent img {
    vertical-align: baseline;
}
@media only screen and (max-width: 640px) {
    .postcontent .alignleft,
    .postcontent .alignright,
    .postcontent .aligncenter {
        display: block;
        margin: 0 auto 1em;
    }
}
@media only screen and (min-width: 641px) {
    .postcontent .alignleft {
        float: left;
        margin: 0 2em 1em 0;
    }
    .postcontent .alignright {
        float: right;
        margin: 0 0 1em 2em;
    }
    .postcontent .aligncenter {
        display: block;
        margin: 0 auto 1em;
    }
}
.postcontent hr {
    border-color: #ccc;
    border-style: dashed;
    border-width: 1px 0 0;
    margin: 1.5em 0;
    height: 1px;
    width: 100%;
}
.postcontent th,
.postcontent td {
    border: 1px solid var(--color-border);
    padding: .6em 1em;
}
.postcontent th p:last-child,
.postcontent td p:last-child {
    margin-bottom: 0;
}

/* sns */
.share {
    background: var(--color-bg);
    border-radius: var(--border-rad3);
    padding: 10px;
    font-size: 1.2rem;
    display: flex;
        flex-wrap: wrap;
}
.share__list {
    margin: 3px;
}
.facebook-like {
    width: 100%;
}
.share__link {
    background-position: 10px center;
    background-size: 14px;
    background-repeat: no-repeat;
    border-radius: 3px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 30px;
}
.share__link:hover {
    color: #fff;
}
.share__link--facebook {
    background-color : #315096;
}
.share__link--tweet {
    background-color : #55acee;
}
.share__link--line {
    background-color: #00c300;
}
.share__icon {
    fill: #fff;
    width: 20px;
    height: 20px;
}
@media only screen and (min-width: 641px) {
    .facebook-like {
        transform: translateY(5px);
        width: auto;
    }
}

/* wp-calendar */
#wp-calendar caption,
#wp-calendar thead,
#wp-calendar tbody {
    text-align: center;
}
#wp-calendar caption {
    background-color: #f5f5f5;
    padding: 3px;
}
#wp-calendar th,
#wp-calendar td {
    text-align: center;
    padding: 2px;
}
#wp-calendar th {font-weight: 700;}
#wp-calendar #prev {text-align: left;}
#wp-calendar #next {text-align: right;}
#wp-calendar a {
    background: #d9e5bf;
    display: block;
}
#wp-calendar #prev a,
#wp-calendar #next a {
    background: transparent;
}

/* prev next */
.prev-next {
    border-top: 1px solid var(--color-border);
    font-size: 1.4rem;
    line-height: 1.3;
    margin-top: 60px;
    padding-top: 60px;
}
.prev-next__btn {
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    padding: 1.4em;
    position: relative;
    transition: color var(--duration), border var(--duration);
}
.prev-next__btn.prev {
    padding-left: 2.5em;
}
.prev-next__btn.next {
    padding-right: 2.5em;
    text-align: right;
}
.prev-next__btn.non {
    opacity: .4;
}
.prev-next__arrow {
    margin: auto;
    height: 6px;
    width: 5px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: fill var(--duration);
}
.prev .prev-next__arrow {
    left: 1em;
    transform: translateY(-50%) scale(-1,1);
}
.next .prev-next__arrow {
    right: 1em;
}
.back-list {
    border: 1px solid var(--color-border);
    display: block;
    font-size: 1.2rem;
    text-align: center;
    margin: 2em auto 0;
    padding: 1.5em;
    min-width: 25%;
    transition: color var(--duration), border var(--duration);
}
a.prev-next__btn:hover,
.back-list:hover {
    border-color: var(--color-theme-primary);
    color: var(--color-theme-primary);
}
a.prev-next__btn:hover .prev-next__arrow {
    fill: var(--color-link);
}
@media screen and (max-width: 640px) {
    .prev-next__btn + .prev-next__btn {
        margin-top: 10px;
    }
}
@media screen and (min-width: 641px) {
    .prev-next {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .prev-next__btn {
        width: 49%;
    }
}

/* Pagination */
.pagination {
    clear: both;
    padding: 2.4em 0 .8em;
    position: relative;
    font-size: 1.2rem;
    text-align:center;
}
.pagination span,
.pagination a {
    background-color: #fff;
    border: 1px solid var(--color-border);
    color: var(--color-default);
    display: inline-block;
    font-weight: 700;
    text-decoration: none;
    margin: 0 4px;
    padding: .4em 1em;
    width: auto;
}
.pagination a:hover {
    border-color: currentColor;
    color: var(--color-link);
    text-decoration: underline;
}
.pagination .current {
    background-color: var(--color-default);
    color: #fff;
    font-weight: 700;
}
.pagination__count {
    text-align: center;
    font-size: 1.1rem;
}
.pagination__countnum {
    font-weight: bold;
    margin: 0 2px;
}
@media screen and (min-width: 769px) {
    .pagination {
        font-size: 1.4rem;
    }
}