@charset "utf-8";

body#story .story-header,body#story .story{ background: #DBEBF8}
body#story .story-header,body#story .bg,body#story .story-lead{position: relative;}
body#story .bg{z-index: 1}
body#story .story-lead{ margin: 0 auto; margin-top: -82px; z-index: 4}

@media (min-width: 769px) {
 body#story{ overflow-x: hidden}
 body#story #main{margin-left: 20px; margin-right: 20px;}
 body#story .story-header{padding-bottom: 44px;}
 .story-lead{width: 762px;}
}
@media (max-width: 768.98px) {
 body#story .story-header{padding-bottom: 12.8vw;}
 .story-lead{width: 100%;}
}

body#story .story-wrap{ max-width: 1200px; width: 100%; margin-right: auto; margin-left: auto;}
@media (min-width: 769px) {
 body#story .story-wrap{padding-bottom: 90px;}
}
@media (min-width: 768.98px) and (max-width: 1199px) {
 body#story .story-wrap{ padding-left: 30px; padding-right: 30px;}
}
@media (max-width: 768.98px) {
 body#story .story-wrap{width: 89.3%; margin: 0 auto; padding-bottom: min(21.8vw,82px)}
}


body#story h3{color: #0072CE; font-weight: 700}
body#story .story-text p{ margin-bottom: 1.2em; font-weight: 500; line-height: 2; text-align: center;}

@media (min-width: 1200px) {
 body#story .story-text{ position: relative;}
 body#story .story-img{display: block; position: absolute;}
 body#story .story-img-01{top: 86px; left: -282px; z-index: 2}
 body#story .story-img-02{top: -57px; left: -28px; z-index: 3;}
 body#story .story-img-03{top: -170px; right: -320px; z-index: 3}
}
@media (max-width: 1199px) {
 body#story .story-img{display: none;}
}
@media (min-width: 769px) {
 body#story h3{ font-size: 24px;}
 body#story .story-text{ margin-bottom: 58px;}
 body#story .story-text p{ font-size: 20px;}
}
@media (max-width: 768.98px) {
 body#story .story-text{ margin-bottom: min(13.3vw,50px);}
 body#story .story-text p{ font-size: min(4.2vw,16px)}
}

body#story .howto-wrap{ border: 3px solid #0072CE; background: #fff; position: relative}
body#story .howto-wrap p{ font-weight: 500; line-height: 1.75}
body#story .howto-img img{max-width: 100%; width: 100%; height: auto}
body#story .btn-story{ margin: 0 auto; display: inline-block; background: #0072CE; border: 1px solid #0072CE; text-align: center; line-height: 1; color: #fff; width: 100%;}
body#story .btn-story:hover{ background: #fff; color: #0072CE;}
body#story .t-c{text-align: center;}

@media (min-width: 769px) {
 body#story .howto-wrap{position: relative; margin-bottom: 56px; border-radius: 26px; padding: 24px 36px; z-index: 4}
 body#story .howto-wrap h3{margin-bottom: 18px;}
 body#story .howto-wrap p{max-width: 554px; width: 46.1%;}
 body#story .howto-img{max-width: 534px; width: 44.5%; position: absolute; top: -22px; right: 36px;}
 body#story .btn-story{ font-size: 20px; padding: 0.7em; max-width: 400px; border-radius:1.25em; }
 body#story .howto-wrap .btn-story{ margin-top: 36px;}
}
@media (max-width: 768.98px) {
 body#story .howto-wrap{ padding: 6.4vw 4.2vw 9.6vw; border-radius: 20px; text-align: center;}
 body#story h3{margin-bottom: min(4vw,15px); font-size: min(6.4vw,24px)}
 body#story .howto-wrap p{ margin-bottom: min(6.4vw,24px); font-size: min(4.8vw,18px); font-feature-settings: "palt";}
 body#story .howto-img{width: 78.6vw;}
 body#story .btn-story{ padding: 0.6em; border-radius: 1.1em; font-size: min(5.3vw,20px); width: 66.6vw;}
 body#story .howto-wrap .btn-story{ margin-top: min(8.5vw,32px);}
}

body#story .post-wrap{text-align: center;}
body#story .post-item{margin-left: auto; margin-right: auto; background: #fff; text-align: left;}
body#story .post-item p{line-height: 1.875}
body#story .post-item .tag{ list-style: none; color: #0072CC}
body#story .post-item .tag li{display: inline-block;}
body#story .post-item .tag li + li{margin-left: 1em}

body#story .link-btn{ margin-left: auto}

@media (min-width: 769px) {
 body#story .post-wrap h3{ margin-bottom: 1em}
 body#story .post-item{ padding: 26px; max-width: 1000px; border-radius: 16px;}
 body#story .post-item + .post-item{margin-top: 12px;}
 body#story .post-wrap .btn-story{ margin-top: 40px;}
 
 body#story .link-btn{ color: #000; margin-top: 74px;}
 body#story .link-btn:hover{ color: #fff}
}
@media (max-width: 768.98px) {
 body#story .post-wrap{padding-top: min(24.5vw,92px)}
 body#story .post-item{ padding: 5.3vw; max-width: 1000px; border-radius: 20px;}
 body#story .post-item + .post-item{margin-top: min(5.8vw,22px);}
 body#story .post-item .tag{margin-top: 10px;}
 body#story .post-wrap .btn-story{ margin-top: min(11.2vw,42px);}
 body#story .link-btn{ margin-top: min(21.8vw,82px);}
 
 body#story #footer{margin-top: 15px;}
}