@charset "UTF-8";

/* reason 
----------------------------------------------- */
.reason{background: url(../images/reason/reason-bg02.png) top -3vw right -13vw no-repeat ,url(../images/reason/reason-bg01.jpg) top left no-repeat,#fff;padding: 8vw 5vw 12vw;margin-top: 8vw;background-size: contain;}
.reason .read{font-size: 5vw;color: var(--pink);font-weight: 600;line-height: 1.7;margin-bottom: 14vw;position: relative;}
.reason .read:after{content: "";width: 23vw;height: 2px;position: absolute;background: #c4c4c4;left: 0;bottom: -6vw;}
.reason p{margin-bottom: 4vw;font-size: 3.6vw;line-height: 1.8;font-feature-settings: "palt";letter-spacing: .02em;text-align: justify;}
.reason p.con span{color: var(--red);font-weight: 600;font-size: 120%;}

/* merit 
----------------------------------------------- */
.top-merit {padding: 12vw 0 6vw;}
.top-merit-title { margin: 0 auto 5vw; text-align: center; }
.top-merit-title .en { margin-bottom: 2.5vw; color: var(--red); font-size: 9.2vw; font-family: "quicksand"; font-weight: 700; letter-spacing: 0.4vw; display: block; }
.top-merit-title .jp { font-size: 4.4vw; display: block; }
.top-merit-items { width: 90vw; margin: auto; }
.top-merit-items li {width: 100%;padding: 1.5vw;margin-bottom: 6vw;background: #ffffff;-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;}
.top-merit-item-content {padding: 5vw 5vw 6vw;border: 2px solid #fbe2e0;-moz-border-radius: 18px;-webkit-border-radius: 18px;border-radius: 18px;}
.top-merit-item-image { width: 100%; margin-bottom: 6vw; }
.top-merit-item-batch { margin-bottom: 2vw; color: var(--pink); font-size: 4.2vw; font-family: "quicksand"; font-weight: 700; letter-spacing: 0.2vw; z-index: 1; position: relative; display: block; }
.top-merit-item-batch:before { content: ''; width: 5vw; height: 5vw; background: #fbe2e0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; z-index: -1; position: absolute; top: -2vw; left: -2vw; }
.top-merit-item-title { padding-bottom: 3vw; margin-bottom: 3.5vw; font-size: 5vw; font-weight: bold; line-height: 1.4; border-bottom: 1px dotted #ccc; }
.top-merit-item-comment p { font-size: 3.8vw; text-align: justify; text-justify: inter-ideograph; font-feature-settings: "palt"; line-height: 1.6; letter-spacing: 0.04em; }
.top-merit-item-more { margin-top: 4vw; }


/* =============================================
pc
================================================*/
@media screen and (min-width: 736px) { 

/* reason 
----------------------------------------------- */
.reason{background: url(../images/reason/reason-bg02.png) top -3vw right calc(50% - 176px) no-repeat ,url(../images/reason/reason-bg01.jpg) top left no-repeat,#fff;padding: 80px 0 60px;margin-top: 100px;background-size: contain;}
.reason .text{width: 900px;margin: 0 auto;}
.reason .read{font-size: 26px;margin-bottom: 70px;}
.reason .read:after{width: 140px;bottom: -30px;}
.reason p{margin-bottom: 30px;font-size: 16px;}
.reason a{margin: 0 auto 0 0; }

/* merit 
----------------------------------------------- */
.top-merit { padding: 100px 0 60px; background: none; overflow: hidden; z-index: 1; position: relative; }
.top-merit-title { margin-bottom: 40px; }
.top-merit-title .en { margin-bottom: 10px; font-size: 60px; letter-spacing: 4px; }
.top-merit-title .jp { font-size: 18px; }
.top-merit-items { width: 960px; }
.top-merit-items li { padding: 6px; margin-bottom: 40px; }
.top-merit-items li:nth-child(even) .top-merit-item-image { -webkit-order: 2; order: 2; }
.top-merit-items li:nth-child(even) .top-merit-item-text { -webkit-order: 1; order: 1; }
.top-merit-item-content { padding: 35px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; align-items: flex-start; }
.top-merit-item-image { width: 385px; margin: 0; }
.top-merit-item-text { width: 450px; }
.top-merit-item-batch { margin-bottom: 10px; font-size: 20px; letter-spacing: 1px; }
.top-merit-item-batch:before { width: 26px; height: 26px; top: -10px; left: -12px; }
.top-merit-item-title { padding-bottom: 15px; margin-bottom: 15px; font-size: 26px; }
.top-merit-item-comment p { font-size: 16px; line-height: 1.8; }

}

/* =============================================
retina用
================================================*/
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) { 
.reason{background-image: url(../images/reason/reason-bg02@2x.png),url(../images/reason/reason-bg01@2x.jpg);}

}