@charset "UTF-8";

html {
    font-size: 62.5%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', YuGothic, 'Yu Gothic Medium', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    font-size: 1.6em;
}


/* set */
h2 {
    margin-top: 10px;
}
.bold {
    font-weight: bold;
}
.dot{
    border-bottom: 2px dotted #ffc6c6;
}
.right {
    text-align: right;
    display: block;
    font-size: 1.2rem;
    margin: 0;
    color: gray;
}
.bottom {
    margin-bottom: 2.4rem;
}
.center {
    text-align: center;
}
.large {
    font-size: 2rem;
}
.big {
    font-size: 2.4rem;
}
.blue {
    color: #3366ff;
}
.red {
    color: #ff5959;
}
.pink {
    color: #215db0;
}
.green {
    color:#215db0;
}
.purple {
    color: #666699;
}
.yellow {
    color: #fdff9c;
}
.img-box {
    width: 80%;
    margin: 0 auto 2.4rem auto;
}
.l-through { 
    text-decoration: line-through;
}
.u-line {
    text-decoration: underline;
}
a {
    color: blue;
}
.link {
    text-align: right;
    margin-top: 1rem;
    font-size: 2rem;
    font-weight: bold;
    text-decoration: underline;
}
.btn {
    width: 80%;
    margin: 0 auto;
}
/* 蛍光マーカー*/

.marker {
    background:  #fdff9c;
    font-weight: bold;
    line-height: 26px;
   }
.p_marker {
    background: linear-gradient(transparent 64%, #ffc6c6 0%);
       font-weight: bold;
       line-height: 26px;
   }

article {
    background: #FFF;
    width: 100%;
    max-width: 640px;
    margin: 0 auto 32px auto;
    padding: 0 1.3rem 2.4rem 1.3rem;
}
article img{
    width: 100%;
    height: auto;
    margin: 0 auto;
}
.text {
    letter-spacing: 0.03rem;
    line-height: 3.2rem;
    margin-top: 2.8rem;
    margin-bottom: 2.8rem;
    font-size: 1.8rem;
}
.title {
    border: 2px solid#ff6982;
    border-left: 0.7rem solid #ff6982;
    background-color:#fff7fa;
    padding: 0.8rem;
    font-weight: bold;
    font-size: 2.6rem;
    line-height: 3.4rem;
    margin-top: 2.8rem;
    margin-bottom: 2.8rem;
}
.s-title   {
    font-size: 2.4rem;
    color: #fff;
    font-weight: bold;
    background-color: #ff6982;
    padding: 1.8rem;
    margin-top: 2rem;
    border-radius: 10px;
    line-height: 3.2rem;
}
.secondary {
    border-top: 1px solid #636363;
    border-bottom: 1px solid #636363;
    padding: 1.4rem 0;
}
.reviews {
    width: 100%;
    max-width: 640px;
    margin-top: 3rem; 
    background-color: hsl(0, 0%, 95%);
}
.r-title {
    background-color: #FA778E;
    color: #fff;
    padding: 1.6rem;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
}
.user {
    text-align: right;
    margin: 1.2rem auto;
}
.star {
    width: 12rem;
    margin: 0 1.2rem 1.2rem auto;
}
.user_img {
    margin: 1.2rem 1.4rem;
}
.r-text {
    font-size :1.8rem;
    color: #6F6363;
    line-height: 2.8rem;
    padding: 1.4rem;
}

.box29 {
    margin: 2em 0;
    background: #dcefff;
}
.box29 .box-title {
    font-size: 1.2em;
    background: #5fb3f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box29 p {
    padding: 15px 20px;
    margin: 0;
}

.s-box {
    width:70%;
    margin: 1rem auto;
}
.m-box {
    width: 40%;
    margin: 1rem auto;
}
.w-box {
    margin-top: 2rem;
}
.reviews {
     border: 2px solid #636363;
     margin: 2rem auto;
     box-shadow: 1px 1px 43x 2px rgba(0, 0, 0, 0.1);
     width: 80%;
}
.reviews >img{
    padding: 1.7rem;
}
.r-text {
    padding:  1.7rem;
    font-size: 1.6rem;
    line-height: 2.6rem;

    font-weight: bold;
    color: #636363;
}
footer {
    color: #d4d4d4;
}
footer ul {
    display: flex;
    justify-content: center;
    padding: 1.2rem 1.2rem 1.6rem 1.2rem;
}
footer ul li a {
    color: #d4d4d4;
    border-bottom: 1px solid #d4d4d4;
    margin-right: 1rem;
}
a:hover {
    color: #a6a6a6;
}

/* pc mode */
@media screen and (max-width: 470px) {
    body {
        background: #FFF;
    }
    article {
        width: 100%;
        margin: 0 auto;
    }
}