@charset "utf-8";

html{
scroll-behavior: smooth;
}

body{
margin: 0 auto;
font-family: "Noto Sans", sans-serif;
/*font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", "sans-serif" !important;*/
color: #382C02;
font-size: 16px;
line-height: 1.5;
letter-spacing: 1px;
}

.pc_show{display: block !important;}
.pc_none,.tab_show,.sp_show{display: none;}

em{font-style: normal;}
.font--famNum{font-family: "Noto Sans", sans-serif;}
.font--sizeS{font-size: 18px;}
.font--sizeM{font-size: 28px;}
.font--sizeL{font-size: 34px;}
.font--color-brown{color: #84531A;}
.font--color-brown-light{color: #C89932;}
.font--color-white{color: #fff;}
.font--bold{font-weight: bold;}

.--dot-underline{
text-decoration: underline dotted;
text-underline-offset: 4px;
}
.marker{
display: inline-block;
line-height: 1;
}
.marker--yellow{
background: linear-gradient(transparent 50%, #FFF34B 50%);
}
.marker--brown{
background: linear-gradient(transparent 50%, #C89932 50%);
}
.marker--brown-light{
background: linear-gradient(transparent 50%, #E3CB98 50%);
}
.marker--red{
padding: 6px 4px;
background: linear-gradient(transparent 0%, #C9171E 0%);
}
.marker--img {
display: inline;
margin-bottom: 8px;
background: url(../images/Uservoice/marker.svg);
background-position: bottom left;
background-repeat: no-repeat;
background-size: contain;
}

/* header */
header{
margin: 0 auto;
padding: 20px 0;
background: #C9171E;
color: #fff;
position: relative;
z-index: 1000;
@media screen and (min-width: 768px) and (max-width: 1024px) {
    width: 100%;
    height: 60px;
    padding: 10px 0;
    position: fixed;
}
@media screen and (max-width: 767px) {
    width: 100%;
    height: 60px;
    padding: 10px 0;
    position: fixed;
}
.innerBoxH{
display: grid;
grid-template-columns: auto auto;
column-gap: 80px;
justify-content: start;
align-items: end;
padding-left: 20px;
@media screen and (min-width: 768px) and (max-width: 1024px) {
    column-gap: normal;
    justify-content: space-between;
    padding-right: 10px;
}
@media screen and (max-width: 767px) {
    column-gap: normal;
    justify-content: space-between;
    padding-right: 10px;
}
nav{
margin-bottom: 10px;
@media screen and (min-width: 768px) and (max-width: 1024px) {
    &#navArea{
        transform: translateX(100%);
        pointer-events: none;
        transition: transform 0.7s ease;
        background: #fff;
        position: fixed;
        top: 0;
        right: 0;
        width: 400px;
        height: 100vh;
        z-index: 1000;
        &.active {
          transform: translateX(0);
          pointer-events: auto;
          transition: transform 1.0s ease;
        }
        .buttonList{
        display: grid;
        grid-template-columns: none;
        grid-template-rows: auto auto;
        row-gap: 32px;
        justify-content: center;
        align-items: center;
        &.--banner{
        li{
        margin-bottom: 24px;
        a{
        display: block;
        padding: 0;
        border: none;
        box-shadow: none;
        img{
        width: 100%;
        }
        }
        }
        }
        li{
        margin-bottom: 24px;
        a{
        display: grid;
        grid-template-columns: auto auto;
        column-gap: 10px;
        justify-content: start;
        align-items: center;
        width: 80%;
        margin: 0 auto;
        padding: 8px 16px;
        box-shadow: 0px 10px 10px -6px rgba(55, 44, 2, 0.3);
        border: 3px solid hwb(47 1% 78%);
        border-radius: 100px;
        color: #382C02;
        line-height: 1;
        img{
        width: 80px;
        }
        .button{
        font-weight: bold;
        letter-spacing: 0;
        .--catch{
        color: #53854A;
        font-size: 20px;
        }
        .--title{
        font-size: 24px;
        margin: 4px auto;
        }
        .--info{
        font-size: 14px;
        font-weight: 600;
        }
        }
        }
        }
        }
    }
}
@media screen and (max-width: 767px) {
    &#navArea{
        transform: translateX(100%);
        pointer-events: none;
        transition: transform 0.7s ease;
        background: #fff;
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        height: 100vh;
        z-index: 1000;
        &.active {
          transform: translateX(0);
          pointer-events: auto;
          transition: transform 1.0s ease;
        }
        .buttonList{
        display: grid;
        grid-template-columns: none;
        grid-template-rows: auto auto;
        row-gap: 32px;
        justify-content: center;
        align-items: center;
        &.--banner{
        li{
        margin-bottom: 24px;
        a{
        display: block;
        padding: 0;
        border: none;
        box-shadow: none;
        img{
        width: 100%;
        }
        }
        }
        }
        li{
        margin-bottom: 24px;
        a{
        display: grid;
        grid-template-columns: auto auto;
        column-gap: 10px;
        justify-content: start;
        align-items: center;
        width: 80%;
        margin: 0 auto;
        padding: 8px 16px;
        box-shadow: 0px 10px 10px -6px rgba(55, 44, 2, 0.3);
        border: 3px solid hwb(47 1% 78%);
        border-radius: 100px;
        color: #382C02;
        line-height: 1;
        img{
        width: 40px;
        }
        .button{
        font-weight: bold;
        letter-spacing: 0;
        .--catch{
        color: #53854A;
        font-size: 18px;
        }
        .--title{
        font-size: 20px;
        margin: 4px auto;
        }
        .--info{
        font-size: 12px;
        font-weight: 600;
        }
        }
        }
        }
        }
    }
}
.menuArea{
display: grid;
grid-template-columns: repeat(6, auto);
column-gap: 20px;
justify-content: center;
align-items: center;
@media screen and (min-width: 768px) and (max-width: 1024px) {
    grid-template-columns: none;
    grid-template-rows: repeat(6, auto);
    gap: 20px 0;
    justify-content: space-between;
    margin: 80px auto 40px;
    padding: 0 24px;
}
@media screen and (max-width: 767px) {
    grid-template-columns: none;
    grid-template-rows: repeat(6, auto);
    gap: 20px 0;
    justify-content: space-between;
    margin: 80px auto 40px;
    padding: 0 24px;
}
a,
a:link{
color: #fff;
font-weight: bold;
@media screen and (min-width: 768px) and (max-width: 1024px) {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 8px;
    justify-content: start;
    align-items: center;
    color: #382C02;
    &::before{
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        background: #C89932;
        border-radius: 50%;
    }
}
@media screen and (max-width: 767px) {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 8px;
    justify-content: start;
    align-items: center;
    color: #382C02;
    &::before{
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        background: #C89932;
        border-radius: 50%;
    }
}
}
a:hover{
opacity: 0.33;
}
}
}
.logoArea{
img{
width: 169px;
@media screen and (min-width: 768px) and (max-width: 1024px) {
    width: 100px;
}
@media screen and (max-width: 767px) {
    width: 108px;
}
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .hamburger {
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        span{
        position: relative;
        transition: transform 0.3s ease, opacity 0.3s ease;
        font-size: 12px;
        &.menu--icon{
            display: block;
            height: 4px;
            width: 40px;
            background: #fff;
            transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
            position: relative;
            bottom: 15px;
            &::before,
            &::after {
                content: "";
                display: block;
                height: 100%;
                width: 100%;
                background: #fff;
                position: absolute;
                transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
            }        
            &::before {
                top: 9px;
            }        
            &::after {
                bottom: 9px;
            }        
        }
        &.menu--name{
            position: absolute;
            bottom: 5px;
            right: 22px;
            color: #fff;
            .menu--open{
                display: block;
            }
            .menu--close{
                display: none;
            }
        }
        }
    &.active{
        z-index: 1100;
        span{
            background: transparent !important;
            transition: transform 0.3s ease, opacity 0.3s ease;
            &.menu--icon{
                bottom: 5px;
                &::before,
                &::after{
                    content: "";
                    display: block;
                    background: #382C02;
                    position: absolute;
                    transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
                }
                &::before{
                    transform: translateY(9px) rotate(45deg);
                    top: -14px;
                }
                &::after{
                    transform: translateY(-9px) rotate(-45deg);
                    bottom: -4px;
                }
            }
            &.menu--name{
                position: absolute;
                bottom: -5px;
                right: 20px;
                color: #382C02;
                .menu--open{
                    display: none;
                }
                .menu--close{
                    display: block;
                }
            }
        }          
    }
    }
}
@media screen and (max-width: 767px) {
    .hamburger {
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        span{
        position: relative;
        transition: transform 0.3s ease, opacity 0.3s ease;
        font-size: 12px;
        &.menu--icon{
            display: block;
            height: 4px;
            width: 40px;
            background: #fff;
            transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
            position: relative;
            bottom: 15px;
            &::before,
            &::after {
                content: "";
                display: block;
                height: 100%;
                width: 100%;
                background: #fff;
                position: absolute;
                transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
            }        
            &::before {
                top: 9px;
            }        
            &::after {
                bottom: 9px;
            }        
        }
        &.menu--name{
            position: absolute;
            bottom: 5px;
            right: 22px;
            color: #fff;
            .menu--open{
                display: block;
            }
            .menu--close{
                display: none;
            }
        }
        }
    &.active{
        z-index: 1100;
        span{
            background: transparent !important;
            transition: transform 0.3s ease, opacity 0.3s ease;
            &.menu--icon{
                bottom: 5px;
                &::before,
                &::after{
                    content: "";
                    display: block;
                    background: #382C02;
                    position: absolute;
                    transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
                }
                &::before{
                    transform: translateY(9px) rotate(45deg);
                    top: -14px;
                }
                &::after{
                    transform: translateY(-9px) rotate(-45deg);
                    bottom: -4px;
                }
            }
            &.menu--name{
                position: absolute;
                bottom: -5px;
                right: 20px;
                color: #382C02;
                .menu--open{
                    display: none;
                }
                .menu--close{
                    display: block;
                }
            }
        }          
    }
    }
}
}
.contactArea{
position: absolute;
right: 0;
bottom: 0;
font-size: 18px;
font-weight: bold;
a,
a:link{
color: #fff;
}
a:visited{
color: #fff;
}
.tellArea{
display: grid;
grid-template-columns: auto auto;
column-gap: 5px;
justify-content: start;
align-items: center;
padding: 0 0 5px;
em{
font-style: normal;
}
small{
font-size: 10px;
}
}
.mailArea{
display: grid;
grid-template-columns: auto auto;
column-gap: 8px;
justify-content: center;
align-items: center;
padding: 15px 10px;
background: #D9D9D9;
.bubble{
position: relative;
display: inline-block;
margin-right: 8px;
padding: 5px;
background: #464E53;
border-radius: 8px;
&::after {
content: "";
position: absolute;
top: 50%;
right: 0;
border-style: solid;
border-width: 5px 0 5px 8px;
border-color: transparent transparent transparent #464E53;
translate: 100% -50%;
}
small{
font-size: 10px;
&.icon{
&.--mail{
display: grid;
grid-template-columns: auto auto;
column-gap: 5px;
justify-content: center;
align-items: center;
font-size: 14px;
&::before{
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: url(../images/header_icom_mail.svg);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
}
}
}
}
}
}
}
}

/* section FV*/
#FVArea{
    @media screen and (min-width: 768px) and (max-width: 1024px) {
        padding-top: 60px;
    }
    @media screen and (max-width: 767px) {
        padding-top: 60px;
    }
.freeBox{
display: grid;
grid-template-columns: auto auto;
column-gap: 20px;
justify-content: center;
align-items: center;
padding: 20px 0;
background: url(../images/coyash_stamp_3free-bg.jpg);
background-position: 0 0;
background-repeat: repeat;
background-size: contain;
.freeList{
display: grid;
grid-template-columns: auto auto auto;
column-gap: 16px;
align-items: center;
@media screen and (max-width: 767px) {
    grid-template-columns: none;
    grid-template-rows: auto auto auto;
    row-gap: 8px;
}
li{
img{
width: 150px;
@media screen and (min-width: 768px) and (max-width: 1024px) {
    width: 120px;
}
@media screen and (max-width: 767px) {
    width: 80px;
}
}
&:nth-of-type(3){
img{
width: 180px;
@media screen and (min-width: 768px) and (max-width: 1024px) {
    width: 150px;
}
@media screen and (max-width: 767px) {
    width: 110px;
}
}
}
}
}
.freePoint{
width: 280px;
@media screen and (max-width: 767px) {
    width: 160px;
}
}
}
}

/* section Campaign */
.Campaign{
font-family: "Noto Sans", sans-serif;
padding: 40px 0;
h2{
&.--banner{
width: 900px;
margin: 0 auto;
@media screen and (min-width: 768px) and (max-width: 1024px) {
    width: 100%;
}
@media screen and (max-width: 767px) {
    width: 96%;
}
}
&::after{
content: "";
display: block;
width: 40px;
height: 35px;
margin: 0 auto;
background: url(../images/arrow.svg);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
@media screen and (min-width: 768px) and (max-width: 1024px) {
    width: 40px;
    height: 35px;
}
@media screen and (max-width: 767px) {
    width: 40px;
    height: 35px;
}
}
}
.main{
&.--catch{
display: grid;
grid-template-columns: auto auto auto;
column-gap: 20px;
justify-content: center;
align-items: center;
margin: 20px auto;
font-size: 32px;
font-weight: bold;
@media screen and (max-width: 767px) {
    font-size: 24px;
    .firstline{
        display: block;
    }
}
&::before,
&::after{
content: "";
display: inline-block;
width: 2px;
height: 40px;
background: #382C02;
border-radius: 100px;
}
&::before{
transform: rotate(-30deg);
}
&::after{
transform: rotate(30deg);
}
}
}
.cambuttonList{
display: grid;
grid-template-columns: auto auto;
column-gap: 20px;
justify-content: center;
align-items: center;
@media screen and (max-width: 767px) {
    grid-template-columns: none;
    grid-template-rows: auto auto;
    row-gap: 32px;
}
li{
.telWrap,
.mailWrap{
display: grid;
grid-template-columns: auto auto;
column-gap: 10px;
justify-content: start;
align-items: center;
width: 320px;
padding: 5px 10px;
box-shadow: 0px 10px 10px -6px rgba(55, 44, 2, 0.3);
border: 3px solid hwb(47 1% 78%);
border-radius: 100px;
color: #382C02;
line-height: 1;
@media screen and (max-width: 767px) {
    column-gap: 8px;
    width: auto;
    padding: 16px 24px;
}
img{
width: 80px;
@media screen and (max-width: 767px) {
    width: 56px;
}
}
.button{
font-weight: bold;
letter-spacing: 0;
.--catch{
color: #53854A;
font-size: 20px;
}
.--title{
font-size: 24px;
margin: 4px auto;
    @media screen and (max-width: 767px) {
        font-size: 20px;
    }
}
.--info{
font-size: 14px;
font-weight: 600;
}
}
}
.mailWrap{
&:hover{
transform: translateY(4px);
box-shadow: none;
    @media screen and (min-width: 768px) and (max-width: 1024px) {
        transform: none;
        box-shadow: 0px 10px 10px -6px rgba(55, 44, 2, 0.3);
    }
    @media screen and (max-width: 767px) {
        transform: none;
        box-shadow: 0px 10px 10px -6px rgba(55, 44, 2, 0.3);
    }
}
}
}
}
}

/* banner Campaign */
.CampaignbannerBox{
width: 900px;
@media screen and (max-width: 1024px) {
width: 90%;
}
margin: 0 auto 80px;
}

/* section Highprice*/
.HighpriceArea--bg{
background: linear-gradient(to bottom, rgba(255, 255, 255, 100), rgba(253, 221, 149, 0.5)), url(../images/HighpriceArea_bg.png);
background-position: 0 0;
background-repeat: no-repeat;
background-size: cover;
.Highprice{
width: 80%;
margin: 0 auto 20px;
padding: 40px 0;
text-align: center;
position: relative;
    @media screen and (min-width: 768px) and (max-width: 1024px) {
        width: 90%;
    }
    @media screen and (max-width: 767px) {
        width: 90%;
    }
.main{
display: grid;
grid-template-columns: auto auto auto;
column-gap: 20px;
justify-content: center;
align-items: center;
margin-bottom: 20px;
&.--catch{
img{
width: 460px;
@media screen and (min-width: 768px) and (max-width: 1024px) {
    width: 400px;
}
@media screen and (max-width: 767px) {
    width: 240px;
}
}
}
&::before,
&::after{
content: "";
display: inline-block;
width: 2px;
height: 40px;
background: #382C02;
border-radius: 100px;
}
&::before{
transform: rotate(-30deg);
}
&::after{
transform: rotate(30deg);
}
}
.index{
display: grid;
grid-template-rows: auto auto;
row-gap: 20px;
justify-content: center;
justify-items: center;
&.--textimg{
img{
&.firstline{
width: 180px;
/*transform: rotate(-5deg);*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
    width: 180px;
}
@media screen and (max-width: 767px) {
    width: 160px;
}
}
&.secondline{
width: 640px;
@media screen and (min-width: 768px) and (max-width: 1024px) {
    width: 560px;
}
@media screen and (max-width: 767px) {
    width: 320px;
}
}
}
}
}
.kitteList{
display: grid;
grid-template-columns: repeat(4, auto);
column-gap: 20px;
justify-content: center;
align-items: center;
margin: 40px auto;
@media screen and (min-width: 768px) and (max-width: 1024px) {
    grid-template-columns: repeat(4, auto);
}
@media screen and (max-width: 767px) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px 20px;
}
li{
padding: 5px 15px;
background: #DA4107;
color: #fff;
font-size: 18px;
font-weight: bold;
}
}
.swiperArea{
margin-bottom: 40px;
position: relative;
@media screen and (min-width: 768px) and (max-width: 1024px) {
    margin-bottom: 80px;
}
@media screen and (max-width: 767px) {
    margin-bottom: 40px;
}
.swiper{
padding: 16px 0;
}
.swiper:not(.swiper-initialized) {
padding: 0;
.swiper-button-prev,
.swiper-button-next {
display: none;
}
.swiper-wrapper{
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 32px 16px;
padding: 16px 0;
@media screen and (min-width: 768px) and (max-width: 1024px) {
grid-template-columns: repeat(1, 1fr);
gap: 24px;
}
@media screen and (max-width: 767px) {
grid-template-columns: repeat(1, 1fr);
}
}
}
.swiper-slide{
height: auto;
margin: 0;
padding: 8px 16px;
background: #fff;
border: 1px solid #C89932;
border-radius: 10px;
box-shadow: 0px 0px 3px 0px #C89932;
}
.swiper-button-next,
.swiper-button-prev,
.swiper-pagination{
display: none;
}
@media screen and (max-width: 1024px) {
.swiper-button-next,
.swiper-button-prev{
display: grid;
place-content: center;
width: 48px;
height: 48px;
background: #C8993280;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
.swiper-button-next{
right: calc(100% - 5.2rem);
}
.swiper-button-prev{
left: calc(100% - 5.2rem);
}
}
.swiper-button-next{
top: calc(100%/2);
right: -16px;
&::before,
&::after{
content: "";
position: absolute;
top: calc(50% - 2px);
left: calc(50%/2);
width: 24px;
height: 4px;
border-radius: 9999px;
background-color: #fff;
transform-origin: calc(100% - 2px) 50%;
}
&::before{
transform:  rotate(45deg);
}
&::after{
transform:  rotate(-45deg);
}
}
.swiper-button-prev{
top: calc(100%/2);
left: -16px;
&::before,
&::after{
content: "";
position: absolute;
top: calc(50% - 2px);
left: calc(50%/2);
width: 24px;
height: 4px;
border-radius: 9999px;
background-color: #fff;
transform-origin: 2px 50%;
}
&::before{
transform:  rotate(45deg);
}
&::after{
transform:  rotate(-45deg);
}
}
.swiper-pagination{
display: block;
}
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction{
bottom: -80px !important;
    @media screen and (max-width: 767px) {
        bottom: -40px !important;
    }
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
width: 24px;
height: 24px;
margin: 0 var(--swiper-pagination-bullet-horizontal-gap,10px);
background: #C89932;
border: 1px solid #C89932;
border-radius: 50%;
    @media screen and (max-width: 767px) {
        width: 16px;
        height: 16px;
        margin: 0 var(--swiper-pagination-bullet-horizontal-gap,6px);
    }
}
}
}
.kitte--content{
font-weight: bold;
text-align: left;
letter-spacing: 1px;
line-height: 1.3;
.kitte--name{
height: 42px;
line-height: 40px;
span{
display: block;
line-height: 1.5 !important;
}
}
img{
margin-bottom: 16px;
}
.kitte--type{
height: 40px;
font-size: 14px;
line-height: 40px;
}
.kitte--priceBox{
border-top: 2px dotted #C89932;
.kitte--price--mark{
display: inline-block;
margin: 8px 0 16px;
padding: 2px 5px;
background: #C89932;
color: #fff;
font-size: 14px;
}
.kitte--price{
text-align: right;
font-size: 14px;
em{
color: #C89932;
font-size: 24px;
}
}
}
}
.cautionArea{
padding: 24px;
text-align: left;
h3{
font-size: 12px;
font-weight: bold;
}
p{
font-size: 12px;
}
}
}
}

/* section UservoiceK */
.UservoiceK{
width: 80%;
margin: 80px auto 40px;
@media screen and (max-width: 767px) {
    width: 90%;
    margin: 40px auto;
}
.uservoiceKList{
display: grid;
grid-template-columns: repeat(3, auto);
column-gap: 8px;
justify-content: center;
align-items: center;
margin: 0 auto 40px;
position: relative;
@media screen and (min-width: 768px) and (max-width: 1023px) {
    display: block;
    height: 300px;
}
@media screen and (max-width: 767px) {
    display: block;
    height: 270px;
}
li{
    @media screen and (min-width: 768px) and (max-width: 1023px) {
        position: absolute;
        &.--a{
            top: 0;
            left: 32%;
        }
        &.--b{
            bottom: -5px;
            right: 5px;
        }
        &.--c{
            bottom: 5px;
            left: 10px;
        }
    }
    @media screen and (max-width: 767px) {
        position: absolute;
        &.--a{
            top: 0;
            left: 25%;
        }
        &.--b{
            bottom: 0px;
            right: 0;
        }
        &.--c{
            bottom: 5px;
            left: 0;
            img{
                width: 172px;
            }
        }
    }
img{
width: 300px;
@media screen and (min-width: 768px) and (max-width: 1023px) {
    width: 240px;
}
@media screen and (max-width: 767px) {
    width: 190px;
}
}
}
}
.catchArea{
&::before{
content: "";
display: block;
width: 40px;
height: 35px;
margin: 0 auto 32px;
background: url(../images/arrow.svg);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
@media screen and (min-width: 768px) and (max-width: 1024px) {
    width: 40px;
    height: 35px;
}
@media screen and (max-width: 767px) {
    width: 40px;
    height: 35px;
}
}
.main{
&.--catch{
display: grid;
grid-template-columns: auto auto auto;
column-gap: 20px;
justify-content: center;
align-items: center;
margin: 20px auto;
font-size: 42px;
font-weight: bold;
@media screen and (max-width: 767px) {
    column-gap: 10px;
    font-size: 24px;
    .firstline{
        display: block;
    }
}
&::before,
&::after{
content: "";
display: inline-block;
width: 48px;
height: 48px;
background: url(../images/UservoiceK/UservoiceKArea_img_kirakira.png);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
border-radius: 100px;
@media screen and (max-width: 767px) {
    width: 32px;
    height: 32px;
}
}
&::before{
transform: rotate(-90deg);
}
&::after{
transform: rotate(0deg);
}
}
}
.sub{
text-align: center;
font-size: 34px;
font-weight: bold;
@media screen and (max-width: 767px) {
    font-size: 18px;
}
.small{
font-size: 24px;
@media screen and (max-width: 767px) {
    font-size: 14px;
}
}
.firstline{
display: block;
}
}
}
}

/* section Peaceofmind */
.PeaceofmindArea--bg{
background: url(../images/Peaceofmind/PeaceofmindArea_bg.jpg);
background-position: 0 0;
background-repeat: no-repeat;
background-size: cover;
.Peaceofmind{
width: 80%;
margin: 80px auto 40px;
padding: 40px 0;
    @media screen and (min-width: 768px) and (max-width: 1023px) {
        width: 90%;
    }
    @media screen and (max-width: 767px) {
        width: 90%;
    }
.main{
&.--catch{
img{
width: 460px;
margin: 0 auto 16px;
}
}
}
h2{
img{
width: 240px;
margin: 0 auto;
/*transform: rotate(-3deg);*/
    @media screen and (min-width: 768px) and (max-width: 1023px) {
        width: 200px;
    }
    @media screen and (max-width: 767px) {
        width: 200px;
    }
}
}
.PeaceofmindList{
display: grid;
grid-template-columns: auto auto auto;
column-gap: 40px;
justify-items: center;
align-items: stretch;
margin: 40px auto 80px;
    @media screen and (min-width: 768px) and (max-width: 1023px) {
        column-gap: 8px;
    }
    @media screen and (max-width: 767px) {
        grid-template-columns: none;
        grid-template-rows: auto auto auto;
        row-gap: 40px;
    }
li{
padding: 48px 16px 16px 16px;
background: #fff;
border-radius: 10px;
position: relative;
text-align: center;
    @media screen and (max-width: 767px) {
        width: 100%;
    }
h3{
width: 140px;
margin: 0 auto;
/*transform: rotate(-5deg);*/
position: relative;
top: -80px;
img{
    max-width: 100%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
}
    @media screen and (min-width: 768px) and (max-width: 1023px) {
    }
    @media screen and (max-width: 767px) {
        width: 140px;
    }
}
.catch{
margin-bottom: 10px;
font-size: 16px;
}
h4{
font-size: 24px;
font-weight: bold;
    @media screen and (max-width: 767px) {
        font-size: 24px;
    }
}
img{
margin: 16px auto;
}
.cmnt{
text-align: left;
}
}
}
.why--content{
h2{
transform: none;
font-weight: bold;
text-align: center;
.firstline{
display: block;
font-size: 24px;
}
.secondline{
font-size: 32px;
}
    @media screen and (min-width: 768px) and (max-width: 1023px) {
        .firstline{
        display: block;
        font-size: 18px;
        }
        .secondline{
        font-size: 24px;
        }
    }
    @media screen and (max-width: 767px) {
        .firstline{
        display: block;
        font-size: 18px;
        }
        .secondline,
        .thirdline,
        .fourthline{
        display: block;
        font-size: 24px;
        }
    }
}
.why--content--main{
display: grid;
grid-template-columns: auto minmax(240px,400px);
column-gap: 8px;
justify-content: center;
align-items: center;
margin: 32px auto 0;
padding: 16px 24px;
background: #fff;
border-radius: 10px;
    @media screen and (max-width: 767px) {
        grid-template-columns: none;
        grid-template-rows: auto auto;
        padding: 24px;
    }
img{
width: 240px;
    @media screen and (max-width: 767px) {
        width: 100%;
        max-width: 320px;
        margin: 0 auto 24px;
    }
}
h3{
margin-bottom: 16px;
font-size: 24px;
    @media screen and (max-width: 767px) {
        font-size: 18px;
    }
}
.cmnt{
font-size: 16px;
}
}
}
}
}

/* section Uservoice */
.Uservoice{
h2{
margin: 0 auto;
img{
width: 260px;
margin: 0 auto;
/*transform: rotate(-3deg);*/
    @media screen and (max-width: 767px) {
        width: 200px;
    }
}
}
.uservoiceList{
width: 100%;
max-width: 900px;
margin: 0 auto;
li{
display: grid;
grid-template-columns: auto auto;
column-gap: 16px;
justify-content: center;
align-items: start;
width: 80%;
margin: 40px auto;
padding: 24px;
border: 1px solid #382C02;
box-shadow: 4px 4px 0px #D7D5CC;
    @media screen and (max-width: 767px) {
        grid-template-columns: none;
        grid-template-rows: auto auto;
        row-gap: 16px;
        padding: 16px;
    }
h3{
margin-bottom: 8px;
font-size: 24px;
font-weight: bold;
    @media screen and (min-width: 768px) and (max-width: 1023px) {
        font-size: 22px;
    }
    @media screen and (max-width: 767px) {
        font-size: 18px;
        letter-spacing: 0;
    }
span{
line-height: 1.5 !important;
}
}
.star,
.type{
margin-bottom: 16px;
font-weight: bold;
img{
width: 120px;
}
}
&:nth-child(1){            
.personal--data{
order: 1;
width: 160px;
    @media screen and (max-width: 767px) {
        width: 120px;
        margin: 0 auto;
    }
}
.content--data{
order: 2;
}
}
&:nth-child(2){
.personal--data{
order: 2;
width: 160px;
}
.content--data{
order: 1;
}
    @media screen and (max-width: 767px) {
    .personal--data{
        order: 1;
        width: 120px;
        margin: 0 auto;
    }
    .content--data{
        order: 2;
    }
    }
}
}
}
}

/* section flow */
.flowArea--bg{
background: url(../images/flow/flowArea_bg.jpg);
background-position: 0 0;
background-repeat: no-repeat;
background-size: cover;
.Flow{
padding: 40px 0 0;
.main{
img{
width: 400px;
margin: 0 auto 16px;
@media screen and (max-width: 767px) {
    width: 80%;
}
}
}
h2{
margin: 0 auto;
img{
width: 500px;
margin: 0 auto;
/*transform: rotate(-3deg);*/
@media screen and (max-width: 767px) {
    width: 80%;
}
}
}
.flowList{
width: 100%;
max-width: 1000px;
margin: 48px auto 0;
li{
padding-bottom: 32px;
&::after{
content: "";
display: block;
width: 40px;
height: 40px;
margin: 0 auto;
background: url(../images/flow/flowArea_flow_arrow.svg);
background-position: bottom center;
background-repeat: no-repeat;
background-size: contain;
}
&:nth-child(3)::after{
display: none;
}
.flow--wrap{
display: grid;
grid-template-columns: auto auto;
column-gap: 24px;
justify-content: start;
align-items: start;
width: 80%;
margin: 0 auto 16px;
padding: 24px 32px;
background: #fff;
border-radius: 10px;
box-shadow: 0px 0px 3px 0px #674C1250;
    @media screen and (max-width: 767px) {
        grid-template-columns: none;
        grid-template-rows: auto auto;
        padding: 24px;
    }
.flow--img{
img{
width: 100%;
max-width: 160px;
margin: 0 auto;
    @media screen and (max-width: 767px) {
        max-width: 100%;
        margin: 0 auto;
    }
}
}
.flow--text{
h3{
display: grid;
grid-template-columns: auto auto;
column-gap: 4px;
justify-content: start;
align-items: center;
margin-bottom: 16px;
font-size: 24px;
text-align: center;
    @media screen and (max-width: 767px) {
        grid-template-columns: none;
        grid-template-rows: none;
        row-gap: 24px;
        justify-content: center;
        justify-items: center;
        margin: 32px auto;
        font-size: 18px;
    }
&::before{
content: "";
display: block;
width: 48px;
height: 48px;
}
&.--first::before{
background: url(../images/flow/flowArea_flow-mark-01.svg);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
}
&.--second::before{
background: url(../images/flow/flowArea_flow-mark-02.svg);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
}
&.--third::before{
background: url(../images/flow/flowArea_flow-mark-03.svg);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
}
.firstline,
.secondline{
font-size: 24px;
    @media screen and (max-width: 767px) {
        display: block;
    }
span{
font-size: 20px;
}
}
}
em{
font-weight: bold;
}
}
}
&:nth-child(3){
padding-bottom: 0;
}
}
}
}
}

/* section area */
.area{
/*width: 900px;*/
margin: 80px auto 0;
.indexArea{
display: grid;
grid-template-columns: auto auto;
column-gap: 4px;
justify-content: center;
align-items: center;
max-width: 900px;
margin: 0 auto;
padding-bottom: 32px;
position: relative;
    @media screen and (max-width: 767px) {
        display: block;
    }
&::after{
content: "";
display: block;
margin-left: -15px;
border: 40px solid transparent;
border-top: 25px solid #fff;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
.indexArea--img{
width: 160px;
    @media screen and (max-width: 767px) {
        width: 120px;
        margin: 0 auto;
        position: absolute;
        top: -24px;
        left: 50%;
        transform: translateX(-50%);
    }
}
.indexArea--text{
h2{
margin-bottom: 16px;
font-size: 34px;
line-height: 1.3;
    @media screen and (max-width: 767px) {
        margin-bottom: 64px;
        font-size: 16px;
        text-align: center;
    }
.firstline{
display: block;
}
em{
font-size: 44px;
@media screen and (max-width: 767px) {
    font-size: 28px;
}
}
}
.caution{
    @media screen and (max-width: 767px) {
        padding: 0 32px;
        font-size: 16px;
        text-shadow: 
            -1px -1px 0 #fff,
            1px -1px 0 #fff,
            -1px  1px 0 #fff,
            1px  1px 0 #fff;
    }
p{
em{
color: #C9171E;
font-size: 12px;
    @media screen and (max-width: 767px) {
        font-size: 11px;
    }
}
}
}
}
}
.contentArea{
width: 100%;
margin: 0 auto 40px;
padding: 40px 0;
background: url(../images/Area/Area_bg.jpg);
background-position: 0 0;
background-repeat: repeat-y;
background-size: cover;
h3{
width: 600px;
margin: 0 auto 32px;
padding: 8px 0;
border-top: 1px dotted #382C02;
border-bottom: 1px dotted #382C02;
text-align: center;
    @media screen and (max-width: 767px) {
        width: 90%;
    }
}
.areaList{
display: grid;
grid-template-columns: repeat(2, auto);
grid-template-rows: repeat(3, auto);
gap: 16px;
justify-content: center;
align-items: center;
font-weight: bold;
width: 600px;
margin: 0 auto;
    @media screen and (max-width: 767px) { 
        grid-template-columns: none;
        grid-template-rows: repeat(6, auto);
        width: 100%;
        margin: 0 auto;
        padding: 0 32px;
    }
li{
display: grid;
grid-template-columns: auto auto;
column-gap: 16px;
justify-content: start;
align-items: center;
.region{
display: inline-block;
width: 80px;
padding: 4px 0;
background: #fff;
border-radius: 2px;
text-align: center;
}
.prefectures{
display: inline;
}
}
}
}
}

/* section question */
.question{
padding: 40px 0;
h2{
img{
width: 300px;
margin: 0 auto;
/*transform: rotate(-3deg);*/
    @media screen and (max-width: 767px) {
        width: 260px;
    }
}
}
.questionList{
width: 70%;
margin: 80px auto 0;
    @media screen and (max-width: 767px) {
        width: 80%;
        margin: 40px auto 0;
    }
li{
margin-bottom: 32px;
padding-bottom: 32px;
border-bottom: 1px solid #464E5330;
h3{
display: grid;
grid-template-columns: auto auto;
column-gap: 8px;
justify-content: start;
align-items: center;
margin-bottom: 16px;
font-family: "ＭＳ 明朝", "ヒラギノ明朝 ProN", "Times New Roman", serif;
font-size: 20px;
font-weight: bold;
.questionmark{
display: inline-block;
width: 32px;
height: 32px;
background: #382C02;
border-radius: 50%;
color: #fff;
font-family: "ＭＳ 明朝", "ヒラギノ明朝 ProN", "Times New Roman", serif;
font-size: 24px;
line-height: 1.3;
font-weight: bold;
text-align: center;
}
}
.answer{
display: grid;
grid-template-columns: auto auto;
column-gap: 8px;
justify-content: center;
align-items: start;
.answermark{
display: inline-block;
width: 32px;
height: 32px;
background: #fff;
border: 1px solid #382C02;
border-radius: 50%;
color: #382C02;
font-family: "ＭＳ 明朝", "ヒラギノ明朝 ProN", "Times New Roman", serif;
font-size: 24px;
line-height: 1.3;
font-weight: bold;
text-align: center;
}
.answercmnt{
font-size: 16px;
}
}
}
}
}

/* section genre */
.Genre-bg{
background: url(../images/flow/flowArea_bg.jpg);
background-position: 0 0;
background-repeat: no-repeat;
background-size: cover;
.genre{
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 64px 0 80px;
h2{
text-align: center;
font-size: 24px;
@media screen and (max-width: 767px) {
    font-size: 22px;
}
img{
display: inline;
@media screen and (max-width: 767px) {
    width: 120px;
}
}
.firstline{
display: grid;
grid-template-columns: auto auto;
column-gap: 4px;
justify-content: center;
align-items: end;
margin-bottom: 8px;
}
.secondline,
.thirdline{
display: inline;
@media screen and (min-width: 768px) and (max-width: 1023px) {
    display: block;
}
@media screen and (max-width: 767px) {
    display: block;
}
}
em{
font-size: 32px;
@media screen and (max-width: 767px) {
    font-size: 28px;
}
}
}
h3{
width: 90%;
margin: 32px auto;
padding: 8px 0;
border-top: 2px solid #382C02;
border-bottom: 2px solid #382C02;
position: relative;
text-align: center;
font-size: 22px;
    @media screen and (max-width: 767px) {
        width: 70%;
        font-size: 16px;
    }
&::before,
&::after{
content: "";
display: block;
width: 12px;
height: 12px;
background: #382C02;
border-radius: 2px;
transform: rotate(-45deg);
position: absolute;
}
&::before{
top: -6px;
right: -24px;
}
&::after{
bottom: -6px;
left: -24px;
}
span{
&::before,
&::after{
content: "";
display: block;
width: 12px;
height: 12px;
background: #382C02;
border-radius: 2px;
transform: rotate(-45deg);
position: absolute;
}
&::before{
top: -6px;
left: -24px;
}
&::after{
bottom: -6px;
right: -24px;
}
}
}
.genreList{
display: grid;
grid-template-columns: repeat(4, auto);
grid-template-rows: repeat(4, auto);
gap: 24px;
justify-content: space-around;
align-items: center;
text-align: center;
padding: 0 16px;
    @media screen and (max-width: 767px) {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(8, auto);
        text-align: left;
        padding: 0 32px;
    }
li{
    @media screen and (max-width: 767px) {
        display: grid;
        grid-template-columns: 80px auto;
        column-gap: 8px;
        justify-content: start;
        align-items: center;
    }
p{
margin-top: 8px;
font-size: 20px;
font-weight: bold;
    @media screen and (min-width: 768px) and (max-width: 1023px) {
        font-size: 18px;
    }    
    @media screen and (max-width: 767px) {
        font-size: 14px;
    }
}
}
}
}
}

/* section Mailform*/
.mailform{
.indexArea{
margin: 0 auto;
padding: 0 0 40px 0;
background: url(../images/coyash_stamp_bg-03.jpg);
background-position: 0 0;
background-repeat: no-repeat;
background-size: cover;
position: relative;
h2{
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
    @media screen and (max-width: 767px) {
        top: -24px;
    }
img{
width: 400px;
/*transform: rotate(-3deg);*/
    @media screen and (min-width: 768px) and (max-width: 1023px) {
        width: 400px;
    }
    @media screen and (max-width: 767px) {
        max-width: 300px;
    }
}
}
.infoBox{
padding: 40px 0 0 0;
}
.info{
display: grid;
grid-template-columns: auto auto;
column-gap: 10px;
justify-content: center;
align-items: center;
.cmnt{
font-weight: bold;
p{
margin-bottom: 5px;
}
em{
font-size: 18px;
}
.caution{
color: #E83517;
}
}
}
    @media screen and (min-width: 768px) and (max-width: 1023px) {
        .info{
        padding: 0 16px;
        img{
        width: 160px;
        }
        .cmnt{
        width: 100%;
        }
        }
        .cmnt{
        width: 80%;
        margin: 8px auto;
        padding: 0 16px;
        font-weight: bold;
        .caution{
        color: #E83517;
        em{
        font-size: 16px;
        }
        }
        }
    }
    @media screen and (max-width: 767px) {
        .info{
        display: block;
        padding: 24px 16px 0;
        position: relative;
        img{
        width: 150px;
        position: absolute;
        left: 16px;
        bottom: 0;
        }
        .cmnt{
        margin: 40px 0 0 150px;
        font-size: 14px;
        font-weight: bold;
        p{
        em{
        font-size: 16px;
        }
        }
        }
        }
        .info.--second{
        margin-bottom: 24px;
        .cmnt{
        margin: 0 auto;
        padding: 0;
        .caution{
        color: #E83517;
        em{
        font-size: 14px;
        }
        }
        }
    }
    }
.tel{
display: grid;
grid-template-columns: auto auto auto;
column-gap: 30px;
justify-content: center;
align-items: center;
width: 900px;
@media screen and (min-width: 768px) and (max-width: 1024px) {
width: 90%;
}
@media screen and (max-width: 767px) {
    grid-template-columns: none;
    grid-template-rows: auto auto auto;
    width: 90%;
}
margin: 0 auto;
padding: 15px 10px;
background: #fff;
border-radius: 10px;
box-shadow: 0px 0px 15px -5px #674C12;
h3{
display: grid;
grid-template-columns: auto auto;
column-gap: 3px;
justify-content: center;
align-items: center;
&::before{
content: "";
display: block;
width: 36px;
height: 36px;
@media screen and (min-width: 768px) and (max-width: 1024px) {
width: 30px;
height: 30px;
}
@media screen and (max-width: 767px) {
width: 26px;
height: 26px;
}
background: url(../images/Mailform/MailformArea_icon_tel.svg);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
}
}
em{
font-size: 40px;
@media screen and (min-width: 768px) and (max-width: 1024px) {
font-size: 32px;
}
@media screen and (max-width: 767px) {
font-size: 24px;
}
font-weight: bold;
}
dl{
font-size: 14px;
@media screen and (min-width: 768px) and (max-width: 1024px) {
font-size: 13px;
}
@media screen and (max-width: 767px) {
display: grid;
grid-template-columns: auto auto;
justify-content: center;
align-items: center;
font-size: 12px;
}
font-weight: bold;
}
}
}
.formBox{
width: 900px;
@media screen and (max-width: 1024px) {
width: 90%;
}
margin: 0 auto;
padding: 40px 0;
.contBox{
display: grid;
grid-template-columns: 240px 600px;
column-gap: 20px;
justify-content: center;
align-items: center;
margin-bottom: 16px;
font-weight: bold;
@media screen and (min-width: 768px) and (max-width: 1024px) {
    grid-template-columns: 140px 500px;
}
@media screen and (max-width: 767px) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .ttl{
    width: 100%;
    margin-bottom: 8px;
    font-size: 18px;
    }
    .cont{
    width: 100%;
    margin-bottom: 24px;
    }
}
@media screen and (max-width: 767px) {
.cont.--stamptype{
display: grid;
grid-template-columns: auto auto;
gap: 16px 32px;
justify-content: start;
align-items: center;
label{
display: grid;
grid-template-columns: auto auto;
column-gap: 8px;
justify-content: start;
align-items: center;
}
}
}
.label__caution{
margin-left:8px;
padding: 2px 5px;
border: 2px solid;
border-radius: 5px;
font-size: 13px;
&.required{
color: #C9171E;
}
&.any{
color: #382C02;
}
}
input,
input[type="text"],
input[type="tel"],
input[type="email"],
textarea{
width: 100%;
padding: 20px;
background: #F8F6EF;
border: none;
border-radius: 10px;
&::placeholder{
color: #DBC79C;
font-weight: 400;
}
&::-ms-input-placeholder,
&:-ms-input-placeholder{
color: #DBC79C;
font-weight: 400;
}
}
label{
display: inline-block;
input[type="checkbox"] {
position: relative;
width: 24px;
height: 24px;
@media screen and (min-width: 768px) and (max-width: 1024px) {
    width: 20px;
    height: 20px;
}
@media screen and (max-width: 767px) {
    width: 32px;
    height: 32px;
}
padding: 0;
border: 2px solid #382C02;
border-radius: 3px;
vertical-align: -5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type="checkbox"]:checked:before {
position: absolute;
top: 0px;
left: 6px;
content: '';
transform: rotate(50deg);
width: 8px;
height: 16px;
border-right: 4px solid #382C02;
border-bottom: 4px solid #382C02;
@media screen and (min-width: 768px) and (max-width: 1024px) {
    top: 0px;
    left: 6px;
    width: 8px;
    height: 16px;
}
@media screen and (max-width: 767px) {
    top: -2px;
    left: 7px;
    width: 14px;
    height: 26px;
    border-right: 6px solid #382C02;
    border-bottom: 6px solid #382C02;
}
}
}
}
.submitBox{
margin: 0 auto;
text-align: center;
.btn__submit{
width: 420px;
height: 104px;
@media screen and (max-width: 767px) {
    max-width: 300px;
    width: 100%;
    height: 80px;
}
background: url(../images/Mailform/MailformArea_button_confirm.png);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
border: none;
&:hover{
opacity: 0.6;
cursor: pointer;
}
}
}
}
}

/* footer */
footer{
margin: 0 auto;
background: #C9171E;
color: #fff;
text-align: center;
    @media screen and (min-width:768px) and (max-width:1023px){
        padding-bottom: 240px;
    }
    @media screen and (max-width:767px){
        padding-bottom: 120px;
    }
a,
a:link{
color: #464E53;
}
a:hover{
opacity: 0.33;
}
.innerBoxF{
display: grid;
row-gap: 20px;
padding: 30px 0 20px;
.logoArea{
margin: 0 auto;
text-align: center;
img{
width: 185px;
height: auto;
}
}
.linkBox{
display: grid;
grid-template-columns: repeat(3,auto);
column-gap: 20px;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: bold;
    @media screen and (max-width: 767px) {
        padding: 0 32px;
    }
a,
a:link{
color: #fff;
}
a:hover{
opacity: 0.33;
}
}
}
.copyrightBox{
padding: 5px 0;
small{
font-size: 10px;
}
}
}

/* fixed button forPC */
.buttonBox.fixed{
margin: 0 auto;
position: fixed;
top: 140px;
right: 0;
z-index: 1200;
a,
a:link{
display: block;
width: 70px;
margin: 0 auto;
opacity: 10;
position: absolute;
top: 0;
right: 0;
}
&.hidden{
opacity: 0;
visibility: hidden;
}
}
/* fixed button forSP and tab */
.buttonBoxsptab.fixed{
margin: 0 auto;
background: #EBEBE2;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 900;
.campaignArea{
padding: 4px 32px;
img{
margin: 0 auto;
}
}
.contactArea{
display: grid;
grid-template-columns: auto auto;
column-gap: 5px;
justify-content: center;
align-items: center;
}
}

/* page top link */  
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background: inherit;
border: 2px solid #382C02;
text-align: center;
line-height: 50px;  /* 要素の高さと合わせることで縦中央揃え */
font-size: 24px;
border-radius: 50%; /* 円形にする */
opacity: 0.7;
transition: opacity 0.3s;
display: none; /* 初期状態は非表示 */
z-index: 800;
@media screen and (min-width:768px) and (max-width:1023px){
    bottom: 240px;
}
.arrow {
position: relative;
display: inline-block;
width: 40px;
height: 40px;
top: 25%;
&::before,
&::after {
content: "";
position: absolute;
top: 0;
left: calc(50% - 2px);
width: 4px;
height: 24px;
border-radius: 9999px;
background-color: #382C02;
transform-origin: 50% 2px;
}
&::before {
transform: rotate(45deg);
}
&::after {
transform: rotate(-45deg);
}
}
&:hover{
opacity: 1;
}
}


/* tablet1 ================ */
@media screen and (min-width:821px) and (max-width:1024px){

.tab_show{display: block !important;}
.tab_none{display: none !important;}

.font--sizeS{font-size: 22px;}
.font--sizeM{font-size: 24px;}
.font--sizeL{font-size: 32px;}


}

/* tablet2 ================ */
@media screen and (min-width:768px) and (max-width:820px){

.tab_show{display: block !important;}
.tab_none{display: none !important;}

.font--sizeS{font-size: 22px;}
.font--sizeM{font-size: 24px;}
.font--sizeL{font-size: 32px;}

}

/* SP ================ */
@media screen and (max-width:767px){

.sp_show{display: block !important;}
.sp_none{display: none !important;}

.font--sizeS{font-size: 14px;}
.font--sizeM{font-size: 18px;}
.font--sizeL{font-size: 26px;}

#ResultArea,
#HighpriceArea,
#flowArea,
#UservoiceArea,
#questionArea,
#areaArea{
scroll-margin-top: 60px;
}
#MailformArea{
scroll-margin-top: 80px;
}

}