@charset "utf-8";

/*================================
フォント
================================*/
body {
	font-family:"Noto Sans JP",'小塚ゴシック Pro','Kozuka Gothic Pro',"游ゴシック体",YuGothic,"YuGothic M","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS P Gothic",sans-serif;
    letter-spacing: 0.05em;
    color: #222;
}

p {
    font-size: 16px;
    line-height: 1.6;
    color: #222;
    letter-spacing: 0.05em;
}

@media screen and (max-width: 768px) {
    p {
        font-size: 13px;
    }
}

a {
    text-decoration: none;
    line-height: 1;
}

@media screen and (min-width: 769px) {
    a {
        transition: opacity 0.3s ease;
    }
    a:hover {
        opacity: 0.6;
    }
}

p a {
    line-height: 1.6;
    text-decoration: underline;
}

h1,h2,h3,h4,h5 {
	font-family: "Shippori Mincho", serif;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.5;
}

.tx-center {
    text-align: center;
}

.ff-shippori {
	font-family: "Shippori Mincho", serif;
}

.ff-notosans {
    font-family: "Noto Sans JP", sans-serif;
}


/*================================
画像
================================*/
img {
    vertical-align: bottom;
}

img.max {
    width: 100%;
    max-width: 100%;
    vertical-align: bottom;
}

/*================================
リスト
================================*/
ul {
    list-style: none;
}

/*================================
表示切り替え
================================*/

.is-pc {
    display: block!important;
}

@media screen and (max-width: 768px) {
    .is-pc {
        display: none!important;
    }
}

.is-tab {
    display: none!important;
}

@media screen and (max-width: 928px) {
    .is-tab {
        display: block!important;
    }
}


.is-sp {
    display: none!important;
}

@media screen and (max-width: 768px) {
    .is-sp {
        display: block!important;
    }
}

.is-flex-pc {
    display: flex!important;
}

@media screen and (max-width: 768px) {
    .is-flex-pc {
        display: none!important;
    }
}

.is-flex-sp {
    display: none!important;
}

@media screen and (max-width: 768px) {
    .is-flex-sp {
        display: flex!important;
    }
}

.is-grid-pc {
    display: grid!important;
}

@media screen and (max-width: 768px) {
    .is-grid-pc {
        display: none!important;
    }
}

.is-grid-sp {
    display: none!important;
}

@media screen and (max-width: 768px) {
    .is-grid-sp {
        display: grid!important;
    }
}

.is-ib-pc {
    display: inline-block!important;
}

@media screen and (max-width: 768px) {
    .is-ib-pc {
        display: none!important;
    }
}

.is-ib-sp {
    display: none!important;
}

@media screen and (max-width: 768px) {
    .is-ib-sp {
        display: inline-block!important;
    }
}

.is-il-pc {
    display: inline!important;
}

@media screen and (max-width: 768px) {
    .is-il-pc {
        display: none!important;
    }
}

.is-il-sp {
    display: none!important;
}

@media screen and (max-width: 768px) {
    .is-il-sp {
        display: inline!important;
    }
}

/*================================
カラー
================================*/
:root {
    --color-maingreen: #228B22;
    --color-btnyellow: #bcab52;
    --color-btnlightyellow: #c4b665;
    --color-btnred: #ea6062;
    --color-btnlightred: #ee7375;
    --color-btngreen: #45b0b0;
    --color-btnlightgreen: #5dbaba;
    --color-btnlimegreen: #45b192;
    --color-btnlightlimegreen: #50b699;
    --color-basebeige: #F7F5EF;
    --color-basegray: #F8F8F8;
    --color-arrowgreen: #68C3C5;
    --color-bordergreen: #67C3C4;
}

/*================================
マージンなど
================================*/
.mt0 {
    margin-top: 0!important;
}

/*================================
ボタン・リンク
================================*/
.btn_tel {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(180deg, var(--color-btnlightyellow) 0%, var(--color-btnlightyellow) 50%, var(--color-btnyellow) 50%, var(--color-btnyellow) 100%);
    color: #FFF;
}

.btn_tel .tel_number {
    font-weight: 500;
}

.btn_tel .tel_number:before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 26px;
    margin-right: 8px;
    background: url(../img/common/icon_tel.svg) no-repeat center center;
    background-size: cover;
}

.btn_blog {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #222;
    background: #FFF;
}

.btn_blog .label {
    position: relative;
}

.btn_blog:after {
    content:"";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 7px solid var(--color-arrowgreen);
    border-right: 0;
}

.btn_contact {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #FFF;
    background: var(--color-btngreen);
}

.btn_contact .label {
    position: relative;
}

.btn_contact:after {
    content:"";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 7px solid #ffffff;
    border-right: 0;
}

.btn_cart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #FFF;
    background: var(--color-btnlimegreen);
}

.btn_cart .label {
    position: relative;
}

.btn_cart:after {
    content:"";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 7px solid #ffffff;
    border-right: 0;
}

.btn_medium {
    align-items: flex-start;
    padding: 4px 14px 4px 22px;
    height: 51px;
    border-radius: 9999px;
}

@media all and (max-width:768px){
    .btn_medium {
        align-items: flex-start;
        padding: 4px 14px 4px 22px;
        height: 12.687vw;
        border-radius: 9999px;
    }
}

.btn_large {
    max-width: 502px;
    font-size: 22px;
    border-radius: 9999px;
}

.btn_tel.btn_large {
    flex-direction: column;
    height: 115px;
}

.btn_large span {
    display: block;
    margin-bottom: 12px;
    font-size: 18px;
    text-align: center;
}

.btn_tel.btn_large_emergency {
    background: linear-gradient(180deg, var(--color-btnlightred) 0%, var(--color-btnlightred) 50%, var(--color-btnred) 50%, var(--color-btnred) 100%);
    height: 115px;
}

.btn_tel.btn_large .label {
    font-size: 18px;
}

.btn_tel.btn_large .tel_number {
    margin-top: 6px;
    font-size: 32px;
}

.btn_tel.btn_large .attention {
    margin-top: 6px;
    font-size: 12px;
}

.btn_contact.btn_large {
    background: linear-gradient(180deg, var(--color-btnlightgreen) 0%, var(--color-btnlightgreen) 50%, var(--color-btngreen) 50%, var(--color-btngreen) 100%);
    height: 115px;
}

.btn_cart.btn_large {
    background: linear-gradient(180deg, var(--color-btnlightlimegreen) 0%, var(--color-btnlightlimegreen) 50%, var(--color-btnlimegreen) 50%, var(--color-btnlimegreen) 100%);
    height: 115px;
}

.link_btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 69px;
    border: 2px solid var(--color-bordergreen);
    border-radius: 9999px;
    font-size: 18px;
    color: var(--color-bordergreen);
}

.link_btn:after {
    content:"";
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 11px solid var(--color-arrowgreen);
    border-right: 0;
}

.tri_sm:after {
    content:"";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 7px solid #ffffff;
    border-right: 0;
}

.tri_md {
    content:"";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 11px solid #ffffff;
    border-right: 0;
}

@media all and (max-width:768px) {

}

/*================================
その他
================================*/
html {
    scroll-behavior: auto !important;
}

address {
    font-style: normal;
}

picture {
    display: block;
}

/* 幅・高さを指定 */
.swiper-button-prev,
.swiper-button-next {
    height: 50px;
    width: 50px;
}

.swiper-button-prev svg,
.swiper-button-next svg {
    display: none;
}

/* 矢印を消す、画像に変更 */
.swiper-button-prev:after,
.swiper-button-next:after {
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    height: 50px;
    width: 50px;
    margin: auto;
}

/* 前に戻る画像パス */
.swiper-button-prev:after {
    background-image: url(../img/common/icon_swiper_prev.webp);
}
/* 次に進む画像パス */
.swiper-button-next:after {
    background-image: url(../img/common/icon_swiper_next.webp);
}