@charset "UTF-8";

.c-button._shiny {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto 18px;
    background-color: #008F00;
    box-shadow: 0 3px 0 0 #048004;
    border-radius: 4px;
    padding: 10px;
    font-weight: 600;
    font-size: clamp(1.25rem, 1.102rem + 0.74vw, 1.75rem);
    letter-spacing: .2em;
    max-width: 400px;
    width: 80%;
    color: #fff;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
  transition: 300ms;
}

.c-button._shiny img{
    height: 30px;
    margin-right: 5px;
    width: auto;
}

.c-button._shiny::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #b5e7ff;
    transition: 300ms;
    /*animation: shinyshiny 2.5s ease-in-out infinite;*/
}

.c-button._shiny:hover {
    text-decoration: none;
    color: #fff;
    box-shadow: none;
    -webkit-transform: translateY(3px);
    background-color: #07bd07;


}

.c-button._shiny-f {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto 18px;
    background-color: #00a0ea;
    box-shadow: 0 3px 0 0 #008dc9;
    border-radius: 4px;
    padding: 10px;
    font-weight: 600;
    font-size: clamp(1.25rem, 1.102rem + 0.74vw, 1.75rem);
    letter-spacing: .2em;
    max-width: 400px;
    width: 80%;
    color: #fff;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
  transition: 300ms;
}

.c-button._shiny-f img{
    height: 30px;
    margin-right: 5px;
    width: auto;
}

.c-button._shiny-f::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #b5e7ff;
    transition: 300ms;
    /*animation: shinyshiny 2.5s ease-in-out infinite;*/
}

.c-button._shiny-f:hover {
    text-decoration: none;
    color: #fff;
    box-shadow: none;
    -webkit-transform: translateY(3px);
    background-color: #1ebbff;


}


@-webkit-keyframes shinyshiny {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}


.review .m-inner_m {
    padding-bottom: 0
}

.review_ttl {
    background: #947123;
    background: linear-gradient(160deg, rgb(148, 113, 35) 0%, rgb(220, 192, 127) 12%, rgb(163, 130, 54) 29%, rgb(151, 117, 39) 39%, rgb(163, 130, 54) 58%, rgb(220, 192, 127) 73%, rgb(220, 192, 127) 84%, rgb(148, 113, 35) 100%);
    padding: 50px 0;
    position: relative
}

@media(max-width: 599px) {
    .review_ttl {
        padding:25px 5%
    }
}

.review_ttl--h {
    font-size: 48px;
    font-size: clamp(34px,3.2vw,48px);
    font-weight: 700;
    color: #fff;
    text-align: center;
    text-shadow: 0 3px 6px rgba(0,0,0,.4);
    line-height: 1;
    letter-spacing: .05em
}

@media(max-width: 599px) {
    .review_ttl--h {
        font-size:20px
    }
}

.review_ttl--h span {
    display: inline-block;
    position: relative
}

.review_ttl--h span img {
    vertical-align: text-bottom;
    width: clamp(166px,15.8vw,237px);
    position: relative;
    top: 10px
}

.review_ttl--h span em {
    font-size: 52px;
    font-size: clamp(36px,3.47vw,52px)
}

@media(max-width: 599px) {
    .review_ttl--h span em {
        font-size:28px
    }
}

.review_ttl--h span strong {
    font-size: 60px;
    font-size: clamp(42px,4vw,60px)
}

@media(max-width: 599px) {
    .review_ttl--h span strong {
        font-size:34px
    }
}

.review_ttl--sub {
    text-align: center;
    width: 177px;
    width: clamp(120px,23.6vw,177px);
    height: 177px;
    height: clamp(120px,11vw,177px);
    background: url(./images/review-icon_bg.png) no-repeat 50% 50%;
    background-size: contain;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 60%;
    top: 45%
}

@media(max-width: 599px) {
    .review_ttl--sub {
        left:calc(100% - 100px - 10px);
        top: 70%
    }
}

.review_ttl--sub span {
   /* display: inline-block;*/
    font-size: 68px;
    font-size: clamp(46px,4.53vw,68px);
    font-weight: 700;
    font-family: "Yu Mincho",YuMincho,"Hiragino Mincho Pro",serif;
    color: #80673c;
    line-height: 1;
    letter-spacing: -0.03em;
    max-width: 114px
}

.review_ttl--sub img {
    display: block;
    margin: 0 auto
}

.review_ttl--sub img:first-of-type {
    max-width: 71px;
    margin-bottom: 6px;
    margin-top: 5px
}

.review_ttl--sub img:last-of-type {
   /* max-width: 114px;*/
    margin-bottom: 3px
}

.review_list {
    flex-wrap: wrap;
    margin-top: -30px
}

@media(max-width: 599px) {
    .review_list {
        display:block
    }
}

.review_list--item {
    flex-basis: 45%;
    margin-top: 30px
}

.review_list--head {
    font-weight: 700;
    margin-bottom: 18px;
    position: relative
}

@media(max-width: 599px) {
    .review_list--head {
        margin-bottom:10px
    }
}

.review_list--head span {
    display: block
}

.review_list--icon {
    font-size: 28px;
    color: #fff;
    line-height: 57px;
    text-align: center;
    width: 57px;
    height: 57px;
    background: #4a16a8;
    border-radius: 50%;
    position: absolute;
    left: 0
}

@media(max-width: 599px) {
    .review_list--icon {
        font-size:18px;
        line-height: 40px;
        width: 40px;
        height: 40px
    }
}

.review_list--name {
    font-size: 20px;
    padding-left: 77px
}

@media(max-width: 599px) {
    .review_list--name {
        font-size:14px;
        padding-left: 60px
    }
}

.review_list--time {
    font-size: 18px;
    color: #a0a0a0;
    padding-left: 77px
}

@media(max-width: 599px) {
    .review_list--time {
        font-size:12px;
        padding-left: 60px
    }
}

.review_list--comment {
    font-size: 22px;
    line-height: 1.8;
    text-align: justify
}

@media(max-width: 599px) {
    .review_list--comment {
        font-size:14px
    }
}

.review_list--comment img {
    display: inline-block;
    max-width: 113px;
    vertical-align: middle;
    margin-right: 20px
}

@media(max-width: 599px) {
    .review_list--comment img {
        max-width:80px;
        margin-right: 15px
    }
}


.bg_white {
    background: #fff
}