﻿@charset "utf-8";

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,able, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure, footer, header,hgroup, menu, nav, section, summary,time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none;}
ins { background-color:#ff9;color:#000;text-decoration:none;}
mark {background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help;}
table {border-collapse:collapse;border-spacing:0;}
hr {display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}
input, select {vertical-align:middle;}

body {
    color: #333;
    font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    line-height: 1.4;
    background: #fff;
    font-size: 14px;
    font-size: .875rem;
}

@media screen and (max-width: 767px) {
    body {
        padding-bottom: 62px;
        -webkit-text-size-adjust: 100%;
    }
}

a {
    color: #11c;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    margin: 0;
    padding: 0;
}

a a:hover {
    color: #65c0f5;
    text-decoration: none;
}

.arrow {
    background: url(../images/icon_arrow.gif) left center no-repeat;
    padding-left: 20px;
}

img {
    height: auto;
    vertical-align: top;
    max-width: 100%;
}

p {
    margin-bottom: 1.2em
}

small,
.small {
    font-size: 12px;
    font-size: .75rem
}

.clear {
    clear: both
}

@media screen and (max-width: 767px) {
    .left,
    .right {
        float: none
    }
    img.left,
    img.right {
        display: block;
        margin: 0 auto 14px
    }
}

@media screen and (min-width: 768px) {
    .left {
        float: left
    }
    .right {
        float: right
    }
    img.left {
        margin: 0 14px 14px 0
    }
    img.right {
        margin: 0 0 14px 14px
    }
}

.center {
    text-align: center
}

.bordered-table {
    margin-bottom: 14px;
    width: 100%
}

.bordered-table th,
.bordered-table td {
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px 14px;
    text-align: left;
    vertical-align: middle
}

.bordered-table th {
    background: #eee;
}

.bordered-table thead th {
    background: #ddd;
    text-align: center;
    white-space: nowrap
}

@media screen and (max-width: 767px) {
    .bordered-table th,
    .bordered-table td {
        padding: 5px 10px
    }
    .bordered-table th {
        background-color: #eee;
        font-weight: normal;
        white-space: normal
    }
    .bordered-table.list th,
    .bordered-table.list td {
        display: block;
        padding: 5px
    }
    .bordered-table.list th {
        border-bottom-width: 0;
        border-top-width: 0
    }
    .bordered-table.list tr:first-child th {
        border-top-width: 1px
    }
}

.bordered {
    background: #fff;
    border: 3px double #ffa647;
    padding: 10px
}

.bordered p:last-child {
    margin-bottom: 0
}

.note {
    font-size: 12px !important
}

ul,
ol {
    margin: 0 0 1.2em 1.8em
}

table ul:last-child,
table ol:last-child {
    margin-bottom: 0
}

@media screen and (max-width: 767px) {
    .btn {
        background: #30ca00;
        box-sizing: border-box;
        color: #fff;
        display: block;
        font-weight: bold;
        margin: 14px 0;
        padding: 12px 10px;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        font-size: 1rem
    }
    .btn:hover {
        color: #fff
    }
}

.row:after {
    clear: both;
    content: "";
    display: block
}

@media screen and (min-width: 768px) {
    .col2 {
        float: left;
        margin-right: 20px;
        width: 440px
    }
    .col2:last-child {
        margin-right: 0
    }
}

@media screen and (max-width: 767px) {
    .hidden-sp {
        display: none
    }
}

@media screen and (min-width: 768px) {
    .hidden-pc {
        display: none
    }
}

.acc-tog {
    cursor: pointer;
}

.acc-con {
    display: none;
}

h2 {
    background: #ed7700;
    color: #fff;
    line-height: 1.2
}

@media screen and (max-width: 767px) {
    h2 {
        padding: 10px;
        font-size: 22px;
        font-size: 1.375rem
    }
}

@media screen and (min-width: 768px) {
    h2 {
        padding: 13px 0 10px;
        font-size: 28px;
        font-size: 1.75rem
    }
}

h3 {
    border-bottom: 2px solid #ed7700;
    color: #ed7700;
    line-height: 1.2;
    margin: 20px 0 10px;
    padding-bottom: 2px;
    font-size: 20px;
    font-size: 1.25rem
}

h4 {
    margin: 18px 0 10px;
    font-size: 16px;
    font-size: 1rem
}

h3 + h4 {
    margin-top: 0
}

.jpc-content {
    margin-bottom: 20px
}

section {
    background: #fafafa;
    margin-bottom: 40px
}

section section {
    margin-bottom: 20px
}

section > .inner:after {
    clear: both;
    content: "";
    display: block
}

section > .inner > *:last-child {
    margin-bottom: 0
}

@media screen and (max-width: 767px) {
    section {
        background: #fff;
        margin-bottom: 30px
    }
    section > .inner {
        padding: 10px 0
    }
}

@media screen and (min-width: 768px) {
    section > .inner {
        padding: 20px
    }
}

@media screen and (min-width: 768px) {
    .global-header,
    .jpc-content {
        margin: 0 auto;
    }
}

.global-header:after {
    clear: both;
    content: "";
    display: block
}

.global-header h1 a {
    color: #ed7700;
    font-weight: bold;
    line-height: 1.2;
    text-decoration: none
}

@media screen and (max-width: 767px) {
    .global-header {
        margin-bottom: 10px;
        padding: 10px 0 0
    }
    .global-header h1 {
        margin: 10px 0 20px;
        text-align: center
    }
    .global-header h1 a {
        font-size: 24px;
        font-size: 1.5rem
    }
    .global-header .logo {
        margin: 0 auto 10px;
        width: 80%
    }
}

@media screen and (min-width: 768px) {
    .global-header h1 {
        float: left;
        margin: 30px 0 0
    }
    .global-header h1 a {
        font-size: 28px;
        font-size: 1.75rem
    }
    .global-header .logo {
        margin: 5px 0 0
    }
}

.tel {
    margin-bottom: 20px
}

.tel a {
    color: #12a73b;
    text-decoration: none
}

.tel .inner {
    display: table
}

.tel .fd,
.tel .ivr {
    display: table-cell;
    font-weight: bold
}

.tel .ivr {
    padding-left: 5px
}

.tel .tel-label {
    background: #12a73b;
    color: #fff;
    font-weight: bold;
    text-align: center
}

.tel .num {
    color: #12a73b;
    font-family: Arial;
    line-height: 1;
    font-size: 38px;
    font-size: 2.375rem
}

.tel .num img {
    margin-right: 5px;
    padding-bottom: 5px;
    vertical-align: middle
}

.tel .ivr-num {
    padding: 0 10px
}

.tel .reception {
    font-weight: bold;
    text-align: center;
    font-size: 12px;
    font-size: .75rem
}

@media screen and (max-width: 767px) {
    .tel {
        border: 2px solid #12a73b;
        float: none;
        padding-bottom: 5px;
        text-align: center
    }
    .tel .inner {
        margin: 0 auto;
        width: 100%
    }
    .tel .tel-label {
        margin-bottom: 5px;
        padding: 5px;
        font-size: 12px;
        font-size: .75rem
    }
    .tel .num {
        font-size: 30px;
        font-size: 1.875rem
    }
    .tel .num img {
        display: none
    }
}

@media screen and (min-width: 768px) {
    .tel .tel-label {
        padding: 5px 20px;
        font-size: 20px;
        font-size: 1.25rem
    }
}

.header-tel {
    margin: 0
}

.header-tel .fd,
.header-tel .ivr {
    padding-top: 0
}

.header-tel .tel-label {
    padding: 2px;
    font-size: 16px;
    font-size: 1rem
}

.header-tel .num {
    font-size: 40px;
    font-size: 2.5rem;
}

@media screen and (min-width: 768px) {
    .header-tel {
        float: right
    }

    .header-tel .tel-label,
    .header-tel .reception {
        font-size: 15px;
        font-size: .9375rem;
    }

    .header-tel .num {
        font-size: 50px;
        font-size: 3.125rem;
    }
}

.content-tel {
    margin-bottom: 20px;
    text-align: center;
}

@media screen and (max-width: 767px) {
    .content-tel {
        margin-bottom: 30px;
        padding: 0 10px;
    }
}

.trouble-tel {
    border: 1px solid #12a73b;
    font-weight: bold;
    margin: 0;
    padding: 10px;
    text-align: center
}

.trouble-tel .inner {
    margin: 0 auto
}

.trouble-tel .tel-label {
    background: #12a73b;
    color: #fff;
    margin-bottom: 5px;
    padding: 5px 10px;
    text-align: center;
    font-size: 12px;
    font-size: .75rem
}

.trouble-tel .num {
    font-size: 32px;
    font-size: 2rem
}

.discount {
    background: #fffab2;
    border: 2px solid #f00;
    color: #f00;
    margin-bottom: 40px;
    padding: 10px;
    text-align: center
}

.discount strong {
    font-size: 22px;
    font-size: 1.375rem
}

.discount span {
    font-size: 26px;
    font-size: 1.625rem
}

@media screen and (max-width: 767px) {
    .discount {
        margin-top: 10px
    }
}

@media screen and (min-width: 768px) {
    .discount br {
        display: none
    }
}

.mainvisual {
    margin-bottom: 30px
}

.mainvisual .discount {
    margin-bottom: 0
}

@media screen and (max-width: 767px) {
    .mainvisual {
        margin-bottom: 20px;
        text-align: center
    }
}

.trouble-content {
    background: #fff
}

.trouble-content .trouble {
    border: 2px solid #979797;
    border-bottom-width: 0;
    overflow: hidden;
    padding: 10px
}

.trouble-content .trouble:last-child {
    border-bottom-width: 2px
}

.trouble-content .trouble .t-img {
    background: #ed7700;
    height: 130px;
    width: 150px
}

.trouble-content .trouble h3 {
    margin-top: 0;
    font-size: 18px;
    font-size: 1.125rem
}

.trouble-content .trouble p {
    font-weight: bold;
    margin: 0;
    font-size: 15px;
    font-size: .9375rem
}

@media screen and (max-width: 767px) {
    .trouble-content {
        margin-bottom: 20px
    }
    .trouble-content .trouble p {
        margin-bottom: 5px
    }
}

@media screen and (min-width: 768px) {
    .trouble-content {
        float: left;
        width: 480px
    }
    .trouble-content .trouble .t-img {
        float: right
    }
    .trouble-content .trouble .t-text {
        float: left;
        width: 296px
    }
}

@media screen and (max-width: 767px) {
    .trouble-support {
        text-align: center
    }
}

@media screen and (min-width: 768px) {
    .trouble-support {
        background: url(../images/icon_trouble_arrow.png) left center no-repeat;
        float: right;
        padding-left: 53px;
        width: 360px
    }
}

.feature {
    list-style: none;
    margin: 0
}

.feature li {
    background-color: #ed7700;
    background-position: left center;
    background-repeat: no-repeat;
    border: 3px solid #979797;
    color: #555;
    font-weight: bold;
    margin-bottom: 5px
}

.feature li strong {
    color: #ed7700
}

.feature li > div {
    background: #fff;
    padding-left: 20px
}

.feature .feature01 {
    background-image: url(../images/feature01.png)
}

.feature .feature02 {
    background-image: url(../images/feature02.png)
}

.feature .feature03 {
    background-image: url(../images/feature03.png)
}

.feature .feature04 {
    background-image: url(../images/feature04.png)
}

.feature .feature05 {
    background-image: url(../images/feature05.png)
}

@media screen and (max-width: 767px) {
    .feature li {
        background-size: 75px auto;
        padding: 0 0 0 75px;
        font-size: 14px;
        font-size: .875rem
    }
    .feature li > div {
        padding: 5px 10px
    }
}

@media screen and (min-width: 768px) {
    .feature li {
        line-height: 64px;
        height: 64px;
        padding-left: 150px;
        font-size: 20px;
        font-size: 1.25rem
    }
    .feature > div {
        height: 64px
    }
}

.flow .f-step {
    display: table
}

.flow .f-step .f-step-img,
.flow .f-step .f-step-desc {
    display: table-cell;
    vertical-align: top
}

.flow .f-step .f-step-img {
    padding-right: 20px
}

.flow .f-step:last-child,
.flow p {
    margin-bottom: 0
}

.flow h3 {
    border: 0;
    color: #fff;
    margin-top: 0;
    padding: 5px 10px
}

@media screen and (max-width: 767px) {
    .flow .f-step {
        padding-bottom: 40px;
        position: relative
    }
    .flow .f-step:last-child {
        padding-bottom: 0
    }
    .flow .f-step .f-step-img {
        min-width: 80px;
        width: 80px
    }
    .flow .f-step:after {
        border: 16px solid transparent;
        border-top-color: #fc0;
        bottom: -5px;
        content: "";
        height: 0;
        left: 50%;
        margin-left: -16px;
        position: absolute;
        width: 0
    }
    .flow .f-step:last-child:after {
        border: 0
    }
    .flow .f-step:last-child,
    .flow p {
        margin-bottom: 0
    }
}

@media screen and (min-width: 768px) {
    .flow .f-step {
        margin-bottom: 20px
    }
    .flow .f-step .f-step-img {
        width: 200px
    }
    .flow .f-step .f-step-desc {
        width: 750px
    }
}

.price-system {
    margin-bottom: 40px
}

.price-system:after {
    clear: both;
    content: "";
    display: block
}

.price-system > div {
    position: relative
}

.price-system > div:before,
.price-system > div:after {
    background: #888;
    display: block;
    content: "";
    position: absolute
}

.price-system > div:before {
    height: 22px;
    width: 4px
}

.price-system > div:after {
    height: 4px;
    width: 22px
}

.price-system > div:last-child:before,
.price-system > div:last-child:after {
    display: none;
    padding-bottom: 0
}

.price-system .inner {
    background: #fff;
    border: 2px solid #ed7700;
    line-height: 1.4;
    text-align: center;
    vertical-align: middle;
    font-size: 18px;
    font-size: 1.125rem
}

.price-system .inner .exp {
    font-size: 12px;
    font-size: .75rem;
    margin-top: 5px;
}

.price-system .inner .title {
    color: #ed7700;
    font-weight: bold;
    font-size: 20px;
    font-size: 1.25rem;
    margin: 5px 0;
}

.price-system .inner span {
    display: inline-block
}

@media screen and (max-width: 767px) {
    .price-system > div {
        margin-bottom: 28px
    }
    .price-system > div:before,
    .price-system > div:after {
        right: 50%
    }
    .price-system > div:before {
        bottom: -25px
    }
    .price-system > div:after {
        bottom: -16px;
        margin-right: -9px
    }
    .price-system > div:nth-child(2):before,
    .price-system > div:nth-child(2):after {
        height: 22px;
        width: 4px
    }
    .price-system > div:nth-child(2):before {
        margin: 0 4px 0 0
    }
    .price-system > div:nth-child(2):after {
        bottom: -25px;
        margin: 0 -4px 0 0
    }
    .price-system .inner {
        padding: 10px
    }
    .price-system .inner .title br {
        display: none
    }
}

@media screen and (min-width: 768px) {
    .price-system > div {
        display: table;
        float: left;
        margin-right: 28px;
        width: calc((100% - 28px - 28px) / 3);
    }
    .price-system > div:before,
    .price-system > div:after {
        top: 50%
    }
    .price-system > div:before {
        margin-top: -10px;
        right: -16px
    }
    .price-system > div:after {
        margin-top: -1px;
        right: -25px
    }
    .price-system > div:last-child {
        margin-right: 0
    }
    .price-system > div:nth-child(2):before,
    .price-system > div:nth-child(2):after {
        height: 4px;
        right: -25px;
        width: 22px
    }
    .price-system > div:nth-child(2):before {
        margin-top: -5px
    }
    .price-system > div:nth-child(2):after {
        margin-top: 3px
    }
    .price-system .inner {
        display: table-cell;
        height: 150px;
        padding: 0 5px
    }
}

.price-example table thead th {
    white-space: nowrap
}

.price-example .price-option th {
    padding-left: 2em
}

.price {
    margin: 0;
    text-align: right;
    white-space: nowrap;
    width: 6em
}

.home-appliance .home-appliance-example {
    margin-bottom: 40px
}

.home-appliance .price {
    width: 7em
}

@media screen and (max-width: 767px) {
    .home-appliance .inner {
        padding: 10px
    }
    .home-appliance .bordered-table tbody th {
        width: 10em
    }
}

.global-footer {
    background: #ed7700;
    color: #fff;
    overflow: hidden;
    padding: 10px;
    font-size: 12px;
    font-size: .75rem
}

.global-footer a {
    color: #fff;
    text-decoration: underline
}

.global-footer a[target="_blank"] {
    background: url(../images/icon_blank_w_arrow.gif) right center no-repeat
}

.global-footer p {
    margin-bottom: 0
}

.global-footer .copyright {
    float: left
}

.global-footer .privacy {
    float: right
}

/**
 * 固定フッター
 */
.fixed-footer {
    background: linear-gradient(to bottom, #ffee7f 0%, #ffde00 100%);
    border-top: 4px solid #ed0000;
    bottom: -66px;
    box-sizing: border-box;
    left: 0;
    padding: 0;
    position: fixed;
    text-align: center;
    transition: all 0.3s ease;
    width: 100%;
    z-index: 9;
}

.fixed-footer.fixed {
    bottom: 0;
}

.fixed-footer-inner {
    position: relative;
}
    
.fixed-footer img {
    width: 320px;
}

.fixed-footer-tel {
    background: url(../images/sp-fixed-footer-tel-bg.png) center no-repeat;
    background-size: auto 40px;
    box-sizing: border-box;
    display: block;
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: 21px;
    font-weight: bold;
    height: 62px;
    line-height: 1;
    margin: 0 auto;
    position: relative;
    text-decoration: none;
    width: 320px;
    z-index: 4;
}

.fixed-footer-tel .tel-num,
.fixed-footer-tel::before {
    background-image: linear-gradient(to bottom, #ed5f5f 50%,#ed0000 51%,#ed0000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ed0000;
    left: 18%;
    letter-spacing: .04em;
    position: absolute;
    top: 46%;
    z-index: 2;
}

.fixed-footer-tel::before {
    display: block;
    text-shadow: 0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff;
    z-index: 1;
}

.tel-text a::before {
    content: "0120-351-865";
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .tel-text a .tel-num,
    .tel-text a::before {
        background-image: none;
    }
}

.fixed-footer-reflection {
    display: block;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 3;
}

.fixed-footer-reflection:after {
    animation: reflection 2s ease-in-out infinite;        
    background-color: #fff;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    transform: rotate(45deg);
    top: -180px;
    width: 30px;
}

@keyframes reflection {
    0% {
        opacity: 0;
        transform: scale(0) rotate(45deg);
    }
    80% {
        opacity: 0.5;
        transform: scale(0) rotate(45deg);
    }
    81% {
        opacity: 1;
        transform: scale(4) rotate(45deg);
    }
    100% {
        opacity: 0;
        transform: scale(50) rotate(45deg);
    }
}

h2,
.trouble-content .trouble .t-img {
    background-color: #2c97ba;
}

h2 {
    background: none;
}

h3,
.feature li strong {
    color: #2c97ba;
}

.price-system .inner .title {
    color: #eb9100;
}

.global-header h1 a {
    color: #333;
}

.caution {
    text-align: left;
}

.caution h3 {
    color: #89ab1f;
    border-color: #89ab1f;    
}

.caution ul:last-child {
    margin-bottom: 0;
}

.caution ul li {
    list-style: disc;
}

.caution a,
.store-desc a {
    color: #11c;
    text-decoration: underline;
}

.caution .postage-table {
    margin-bottom: 10px;
    table-layout: fixed;
}

.caution .postage-table caption {
    caption-side: top;
    font-weight: bold;
}

.caution .postage-table th {
    white-space: normal;
}

.caution .postage-table td {
    text-align: center;
}

.price-system .inner {
    border-color: #eb9100;    
}

.h2-title {
    background-color: #2c97ba;
}

.feature li {
    background-color: #79489d;
}

.feature li strong {
    color: #79489d;
}

h2,
.container {
    box-sizing: border-box;
    margin: 0 auto;
    width: 950px;
}

section {
    background: none;
}

.question {
    background-color: #ff0;
    color: #333;
    margin-bottom: 10px;
    padding: 10px;
}

.question p:last-child {
    margin-bottom: 0;
}

.memento-document p {
    background-color: #ff0;
    color: #333;
    padding: 10px;
}

.trouble-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    margin: 0;
}

.trouble-list li {
    border: solid 1px #ddd;
    box-sizing: border-box;
    color: #141414;
    display: block;
    margin-bottom: 10px;
    position: relative;
}

.trouble-list:after {
    display: none;
}

.trouble-list h3 {
    border: 0;
    font-size: 15px;
    font-size: .9375rem;
    padding: 0 10px;
}

.trouble-list .sp-line1 {
    line-height: calc((.9375rem * 2) * 1.2);
}

@media screen and (min-width: 768px) {
    .trouble-list h3 {
        font-size: 24px;
        font-size: 1.5rem;
        padding: 0 16px;
    }

    .trouble-list .sp-line1 {
        line-height: 1.2;
    }

    .trouble-list .pc-line1,
    .trouble-list .pc-line1.sp-line1 {
        line-height: calc((1.5rem * 2) * 1.2);
    }
}

.trouble-info {
    margin: 0;
}

.trouble-inner h3 {
    border-color: #2cba7e;
    color: #2cba7e;
}

.clean-house {
    margin-top: 40px;
}

.clean-house a {
    display: block;
    margin-bottom: 10px;
}

.price-menu li {
    list-style: none;
    margin-top: 1px;
}

.price-menu ul {
    margin: 0;
}

.price-menu a {
    text-align:center;
    text-decoration:none;
    color:#fff;
    display:block;
    padding:10px 0;
}

.obtained {
    color: #f00;
}

.item-color-red {
    background-color: #e12f59;
}

.item-text-color-red {
    color: #e12f59;
}

.item-border-color-red {
    border-color: #e12f59;
}

.item-color-orange {
    background-color: #ff5722;
}

.item-text-color-orange {
    color: #ff5722;
}

.item-border-color-orange {
    border-color: #ff5722;
}

.item-color-brown {
    background-color: #c7722c;
}

.item-text-color-brown {
    color: #c7722c;
}

.item-border-color-brown {
    border-color: #c7722c;
}

.item-color-navy {
    background-color: #000080;
}

.item-text-color-navy {
    color: #000080;
}

.item-border-color-navy {
    border-color: #000080;
}

.item-color-gray {
    background-color: #808080;
}

.item-text-color-gray {
    color: #808080;
}

.item-border-color-gray {
    border-color: #808080;
}

.item-color-goldenrod {
    background-color: #daa520;
}

.item-text-color-goldenrod {
    color: #daa520;
}

.item-border-color-goldenrod {
    border-color: #daa520;
}

.item-color-yellow {
    background-color: #eb9100;
}

.item-text-color-yellow {
    color: #eb9100;
}

.item-border-color-yellow {
    border-color: #eb9100;
}

.item-color-green {
    background-color: #89ab1f;
}

.item-text-color-green {
    color: #89ab1f;
}

.item-border-color-green {
    border-color: #89ab1f;
}

.item-color-blue-green {
    background-color: #2cba7e;
}

.item-text-color-blue-green {
    color: #2cba7e;
}

.item-border-color-blue-green {
    border-color: #2cba7e;
}

.item-color-deep-skyblue {
    background-color: #00bfff;
}

.item-text-color-deep-skyblue {
    color: #00bfff;
}

.item-border-color-deep-skyblue {
    border-color: #00bfff;
}

.item-color-blue {
    background-color: #2c97ba;
}

.item-text-color-blue {
    color: #2c97ba;
}

.item-border-color-blue {
    border-color: #2c97ba;
}

.item-color-purple-blue {
    background-color: #484e9d;
}

.item-text-color-purple-blue {
    color: #484e9d;
}

.item-border-color-purple-blue {
    border-color: #484e9d;
}

.item-color-purple {
    background-color: #79489d;
}

.item-text-color-purple {
    color: #79489d;
}

.item-border-color-purple {
    border-color: #79489d;
}

.global-footer a[target="_blank"] {
    padding-right: 18px;
}

.back-menu {
    text-align: right;
}

/**
 * アニメーション
 */
@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale3d(.98, .98, .98);
        transform: scale3d(.98, .98, .98);
    }
    
    50% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    
    to {
        -webkit-transform: scale3d(.98, .98, .98);
        transform: scale3d(.98, .98, .98);
    }
}

@keyframes pulse {
    from {
        -webkit-transform: scale3d(.98, .98, .98);
        transform: scale3d(.98, .98, .98);
    }
    
    50% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    
    to {
        -webkit-transform: scale3d(.98, .98, .98);
        transform: scale3d(.98, .98, .98);
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animated:hover {
    -webkit-animation-name: none;
    animation-name: none;
}

.price-example-table {
    width: 100%;
}

.price-example-table td {
    padding: 10px 0 20px;
    vertical-align: middle;
}

.price-example-table  tr:last-child td {
    padding-bottom: 0;
}

.price-example-table-name,
.price-example-table-desc {
    text-align: left;
}

.price-example-table-name {
    background: #ed7700;
    color: #fff;
    padding: 5px 10px;
    text-align: left;
}

.price-example-table-desc {
    text-align: left;
}

.price-example-table-price {
    text-align: right;
    width: 6em;
}

.flow {
    margin-bottom: 40px;
}

.flow .tel {
    border: 0;
}

.flow .tel .reception {
    text-align: left;
}

.flow .tel .reception {
    font-size: 16px;
    font-size: 1rem;
}

.flow .tel .num {
    font-size: 50px;
    font-size: 3.125rem;
}

.flow p:not(:last-child) {
    margin-bottom: 1.2em;
}

.flow h3 {
    border-bottom: 2px solid #ff5722;
    color: #ff5722;
    font-size: 20px;
    font-size: 1.25rem;
    padding: 0 0 5px;
}

.flow h4 {
    color: #fff;
    font-size: 20px;
    font-size: 1.25rem;
    margin-top: 0;
    padding: 5px 10px;
}

.flow h5 {
    font-size: 16px;
    font-size: 1rem;
    margin: 0 0 10px;
}

.flow-carryin h3 {
    border-bottom-color: #2c97ba;
    color: #2c97ba;
}

.flow-carryin h4 {
    background: #2c97ba;
}

.store-section h3 {
    border-color: #2c97ba;
}

.store-list-tag {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    gap: 5px;
    margin-left: 0;
}

.store-list-tag li {
    border: 2px solid #fe6602;
    border-radius: 5px;
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: bold;
}

.store-list-tag li a {
    color: #333;
    display: block;
    padding: 5px 15px;
    text-decoration: none;
}

.store-list-tag li a:hover {
    background: #fe6602;
    color: #fff;
}

.store {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.store-img {
    width: 220px;
}

.store-desc {
    flex: 1;
}

.store-desc h4 {
    color: #333;
    margin-top: 0;
}

.store-desc th {
    width: calc(5em + 22px);
}

.store-pr {
    color: #2c97ba;
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
}

@media screen and (max-width: 767px) {
    .price-example-table-name {
        font-size: 18px;
    }
    
    .price-example-table-price {
        font-size: 20px;
    }
}

@media screen and (min-width: 768px) {
    .store-pr {
        font-size: 25px;
        font-size: 1.5625rem;
    }
    
    .price-example-table-name {
        font-size: 25px;
    }
    
    .price-example-table-price {
        font-size: 25px;
        width: 6em;
    }
}

.area-pr {
    color: #ed0000;
    font-weight: bold;
    margin-bottom: 10px;
}

@media screen and (max-width: 767px) {
    .area-pr {
        font-size: 18px;
    }

    .area-pr span {
        font-size: 22px;
    }
}

@media screen and (min-width: 768px) {
    .area-pr {
        font-size: 32px;
    }

    .area-pr span {
        font-size: 48px;
    }
}

.company-table th {
    width: 6em;
}

@media screen and (max-width: 767px) {
    h2,
    .global-header, 
    .container {
        margin: 0 auto;
        width: auto;
    }
    
    .h2-title h2 {
        padding: 15px;
        width: auto;
    }
    
    section > .inner {
        padding: 10px;
        width: auto;
    }
    
    .tel {
        margin: 0 10px 10px;
        text-align: center;
    }
    
    .header-banner,
    .clean-house {
        margin: 0 10px 30px;
        text-align: center;
    }
    
    section > .trouble-list-outer {
        padding: 0;
    }
    
    .trouble-list {
        box-sizing: border-box;
        margin: 0 auto;
        padding: 10px;
        width: 100%;
    }
    
    .trouble-list li {
        box-sizing: border-box;
        width: calc(50% - 5px);
    }

    .trouble-list h3 {
        margin-top: 10px;
    }
    
    .trouble-info {
        font-size: 11px;
        padding: 0 10px 10px;
    }
    
    .flow .f-step:after {
        border-top-color: #ff5722;
    }
    
    .flow-carryin .f-step:after {
        border-top-color: #2c97ba;
    }
    
    .jpc-content > p:last-child {
        margin: 0 10px 10px;
    }
    
    .price-menu {
        margin-bottom: 30px;
    }

    .flow .tel {
        margin: 0 0 10px;
        text-align: left;
    }

    .flow .tel .num {
        font-size: 30px;
        font-size: 1.875rem;
    }

    .flow .tel .reception {
        font-size: 14px;
        font-size: .875rem;
    }

    .store-list-tag li {
        font-size: 14px;
        font-size: .875rem;
    }

    .store {
        display: block;
    }

    .store-img {
        margin-bottom: 10px;
        text-align: center;
        width: auto;
    }

    .store-desc h4 {
        text-align: center;
    }
}

@media screen and (min-width: 768px) {
    .global-header {
        border-bottom: solid #ccc 1px;
        margin-bottom: 0;
        padding: 10px 0;
    }
    
    .global-header-inner {
        margin: 0 auto;
        overflow: hidden;
        width: 950px;
    }
    
    .header-banner {
        float: right;
        margin-left: 10px;
        padding: 0;
    }
    
    .mainvisual {
        background: url(../images/mainvisual_bg.jpg?20220629) center no-repeat;
        height: 520px;
        padding: 0;
    }
    
    .mainvisual-title {
        margin: 0 auto;
        text-align: left;
        width: 950px;
    }
    
    .h2-title {
        height: 87px;
        margin: 32px 0 16px;
    }
    
    .jpc-content > section:nth-child(1) .h2-title {
        margin-top: 0;
    }
    
    .h2-title h2 {
        font-size: 30px;
        font-size: 1.875rem;
        padding-top: 27px;
    }
    
    section > .inner {
        padding: 0px;
    }
    
    .memento-document p {
        width: 860px;
    }
    
    .trouble-list {
        margin: 0;
    }
    
    .trouble-list li {
        padding-bottom: 16px;
        width: 310px;
    }
    
    .trouble-info {
        padding: 0 16px;
    }

    .feature li {
        height: auto;
    }
    
    .col2 {
        width: 534px;
    }
    
    .jpc-content > p:last-child {
        margin: 40px auto 20px;
    }
    
    .price-menu {
        margin-bottom: 40px;
    }
    
    .price-menu ul {
        margin: 0;
        overflow: hidden;
    }
    
    .price-menu li {
        float: left;
        margin-right: 1px;
    }
    
    .price-menu li:nth-child(3),
    .price-menu li:nth-child(6),
    .price-menu li:nth-child(9),
    .price-menu li:last-child {
        margin-right: 0;
    }
    
    .price-menu a {
        width: 362px;
    }
    
    .price-menu li:hover {
        opacity: 0.8;
    }
}

#ChatSlideBox,
#PageSoutBox {
    display: none;
}

@media screen and (max-width: 767px) {
    .site-note {
        padding: 0 10px;
    }   
}
