@charset "UTF-8";
/* 固定ページの共通部分は common.css に移動 */
/* .second-text img{width:100%;} */

.intro img{width: 45%;margin: 0 auto 5%;}

/* .sec_blc{margin-bottom: 12vw;} */
/* .sec_blc:last-child{margin-bottom:0;} */

.item-list{margin-bottom: 6vw;}
.item-list img{margin-bottom: 4vw;}

.how-to-items {width: 100%;}
.how-to-items .slick-dots {bottom: 3vw;line-height: 1;}
.how-to-items .prev {width: 12vw;height: 12vw;color: #ccc;background: #fff;font-size: 5vw;border: 1px solid #ccc;-moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;cursor: pointer;z-index: 2;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;position: absolute;position: absolute;top: 12%;left: 4vw;-moz-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);-webkit-transform: translate(-50%, 0);transform: translate(-50%, 0);}
.how-to-items .prev:before { content: '\f104'; font-family: 'icon'; display: inline-block; }
.how-to-items .next {width: 12vw;height: 12vw;color: #ccc;background: #fff;font-size: 5vw;border: 1px solid #ccc;-moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;cursor: pointer;z-index: 2;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;position: absolute;position: absolute;top: 12%;right: -8vw;-moz-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);-webkit-transform: translate(-50%, 0);transform: translate(-50%, 0);}
.how-to-items .next:before { content: '\f105'; font-family: 'icon'; display: inline-block; }
.how-to-item {width: 80vw;padding: 5vw 5vw 8vw;margin: 0 5vw;border: 1.5vw solid #ebebeb;}
.how-to-item-image { width: 100%; margin-bottom: 5vw; }
.how-to-item-user {padding: 1.5vw;margin: 0 auto 2vw;color: #fff;font-size: 4.74vw;font-weight: bold;background: var(--orange);-moz-border-radius: 1vw;-webkit-border-radius: 1vw;border-radius: 1vw;display: table;line-height: 1;}
.how-to-item-title { margin-bottom: 1.5vw; color: var(--orange); font-size: 3.86vw; font-weight: bold; text-align: center; line-height: 1.6; }
.how-to-item-comment p { font-size: 3.86vw; text-align: justify; text-justify: inter-ideograph; font-feature-settings: "palt"; line-height: 1.8; letter-spacing: 0.04em; }
.how-to-item-comment p:last-child{margin-bottom: 0;}

.message{position: relative;margin-bottom: 8vw;}
.message img{width: 100%;}
.message .text .ttl{font-weight: 600;position: relative;top: -3vw}
.message .text .ttl dt{padding: 2%;background: var(--orange);color: #fff;display: table;line-height: 1;margin: 0 auto;}
.message .text .ttl dd{font-size: 120%;line-height: 1.4;}


/* =============================================
pc-size
================================================*/
@media screen and (min-width: 736px) {
/* .sec_blc{margin-bottom: 100px;} */

.intro img{width: 220px;margin: 0 auto 20px;}

.item-list{margin-bottom: 40px;}
.item-list img{margin-bottom: 20px;}

.how-to-items{}
.how-to-items .prev {width: 50px;height: 50px;font-size: 25px;left: 30px;top: 110px;}
.how-to-items .next {width: 50px;height: 50px;font-size: 25px;right: -24px;top: 110px;}
.how-to-items .slick-dots {bottom: 18px;}
.how-to-items .slick-dots li { width: 15px; height: 15px; margin: 0 10px; }

.how-to-item {width: 460px;padding: 30px 30px 40px;margin: 0 30px;border-width: 6px;}
.how-to-item-image { margin-bottom: 30px; }
.how-to-item-user { padding: 8px 12px; margin-bottom: 12px; font-size: 26px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.how-to-item-title { margin-bottom: 8px; font-size: 22px; }
.how-to-item-comment p { font-size: 22px; }

.message{margin-bottom: 40px;}
.message .text .ttl{top: -20px;}
.message .text .ttl dt{padding: 10px;}




}