@charset 'utf-8';
/*
 * name:story.css
*/

/* story
------------------------------------------------ */
.story--link{ position: relative; padding: 37px 67px; margin: 150px auto 0; display: flex; flex-wrap: wrap; align-items: center; width: 100%; max-width: 580px; font-size: 2rem; font-weight: bold; text-align: center; letter-spacing: 0.048em;  color:#fff !important; background-color: #011E41; border:2px solid #011E41; border-radius: 10px; -webkit-transition: all .3s; transition: all .3s; }
.story--link:before{ margin-right: 19px; content: ''; background: url(../../img/share/icon_cart2.svg) no-repeat; width: 32px; height: 32px; -webkit-transition: all .3s; transition: all .3s; }
.story--link:hover:before{ background: url(../../img/share/icon_cart3.svg) no-repeat; }
.story--link:hover{ color:#011E41 !important; background-color: #fff; }
.story--link:after{
    content: '';
    width: 10px;
    height: 18px;
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);
    background: url(../../img/share/icon_arrow_w.svg) no-repeat;
    background-size: 100%;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.story--link:hover:after{
    background: url(../../img/share/icon_arrow_b_2.svg) no-repeat;
    background-size: 100%;
}

@media screen and (min-width: 769px) {
    #contents.pt-100{ padding-top: 100px; }
}

@media screen and (max-width: 768px) {
    .story--link{ margin-top: 37px; padding:7px 19px; width: calc(100% - 43px); font-size: 1.3rem; letter-spacing: 0.048em; line-height: calc(42 / 26); border-radius: 4px; text-align: left; }
    .story--link:before{ margin-right: 12px; width: 30px; height: 30px; background-size: contain; }
    .story--link:after{ right: 19px; }
}
.visual{ position: relative; }
.visual .wrap{ width: calc(100% - 40px); position: absolute; left: 50%; transform: translateX(-50%); }
.visual--title{ font-size: 3rem; font-weight: bold; letter-spacing: 0.015em; line-height: calc(51 / 30); color:#011E41; }
.viusal--desc{ padding-top: 8.4%; }
.viusal--desc p{ margin-top: 15px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.072em; line-height: calc(42 / 16); color:#011E41; }

.desc--title{ margin-bottom: 18px; position: relative; font-size: 2.2rem; font-weight: bold; letter-spacing: 0.15em; line-height: calc(37 / 22); color:#011E41; }
.desc01 .desc--title:before{ display: none; content: ''; position: absolute; left: -190px; top: 17px; width: 160px; border-bottom: 1px dashed #011E41; }
.block-content p{ font-size: 1.6rem; font-weight: 400; letter-spacing: 0.072em; line-height: calc(42 / 16); color:#011E41; }
.block-content p+p{ margin-top: 42px; }
.desc02 .note{ padding: 52px 36px; display: table; margin: 0 auto 20px; font-size: 2.2rem; font-weight: bold; letter-spacing: 0.15em; line-height: calc(37 / 22); border:2px dashed #011E41; color:#011E41; }
.desc02 .desc--title{ margin-top: 60px; }

@media screen and (min-width: 769px) {
    .desc01{ display: flex; flex-wrap: wrap; }
    .desc01--pht{ width: calc(100% - 610px); max-width: 530px; height: 700px; }
    .desc01--pht img{ width: 100%; height: 100%; object-fit: cover; object-position: center 0; }
    .desc01--txt{ padding-top: calc(120/1200 * 100%); margin-left: 80px; width: 530px; }
    .desc02{ display: flex; flex-wrap: wrap; padding-top: 115px; }
    .desc02--pht{ padding-bottom: 1.3em; padding-top: 50px; width: 340px; display: inline-flex; flex-direction: column; justify-content: space-between; }
    .desc02--txt{ width: calc(100% - 410px); margin-left: 70px; }
    .desc03{ padding-top: 100px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; }
    .desc03--pht{ display: inline-flex; justify-content: flex-end; padding-right: 80px; width: calc(100% - 380px); height: 580px; box-sizing: border-box; max-width: 710px; }
    .desc03--pht img{ max-width: 520px; width: 100%; height: 100%; object-fit: cover; object-position: center 0; }
    .desc03--txt{ width: 380px; }
    .visual--icon{ margin-top: 2.2%; max-width: 488px; }
}

@media screen and (max-width: 1024px) and (min-width: 769px) {
    .desc01--txt{ width: 330px; }
    .desc01--pht{ width: calc(100% - 410px); }
}

@media screen and (max-width: 768px) {
    #contents{ padding-top: 45px; }
    .visual .wrap{ width: calc(100% - 40px); }
    .visual--title{ font-size: 1.9rem; line-height: calc(65 / 38); }
    .viusal--desc{ padding-top: 30px; max-width: unset; }
    .viusal--desc p{ margin-top: 10px; font-size: 1.3rem; line-height: calc(56 / 26); }
    .visual--icon{ margin-top: 15px; }
    .desc--title{ margin-bottom: 5px; font-size: 1.9rem; line-height: calc(65 / 38); }
    .block-content p{ font-size: 1.3rem; line-height: calc(56 / 26); }
    .block-content p+p{ margin-top: 30px; }
    .desc01--txt{ padding-top: 20px; }
    .desc01--pht{ width: 100%; margin-left: -20px; }
    .desc02{ padding-top: 40px; }
    .desc02--pht{ display: flex; flex-wrap: wrap; flex-direction: column; }
    .desc02 .note{ padding: 29px 19px; margin: 25px auto; font-size: 1.4rem; line-height: calc(48 / 28); }
    .desc02--txt{ margin-top: 25px; }
    .desc02 .desc--title{ margin-top: 20px; }
    .sp-desc02--pht2{ width: calc(100% + 40px); margin-left: -20px; }
    .desc03{ padding-top: 40px; }
    .desc03--pht{ margin-left: -20px; }
    .desc03--txt{ padding-top: 20px; }
}