/*--------------------------------------------------------
  共通style
--------------------------------------------------------*/
#story_1 .scn_set {
    background: #fff;
}

#story_1 .title_img {
    position: absolute;
    width: 15.2%;
    max-width: 258px;
    top: 5.3%;
    right: 70px;
    z-index: 1;
}

#story_1 .main_area {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    width: 84%;
    margin: 0 auto;
    max-width: 156vh;
    position: relative;
    height: 100vh;
}
#story_1 .main_area p {
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    color: #083b55;
    font-weight: 500;
}

#story_1 .left_area {
    width: 39.4%;
    margin-right: 6.6%;
    margin-top: 21vh;
}
#story_1 .left_area .text_01 {
    margin-top: 15px;
    width: 96%;
    margin: 20px auto 0;
}
#story_1 .left_area .text_01 p {
    font-size: 14px;
    line-height: 1.85;
}
#story_1 .left_area .text_01 p.info {
    font-size: 12px;
    line-height: 1.66;
    margin-top: 1em;
}
#story_1 .left_area .text_01 p.info .large {
    font-size: 14px;
}
#story_1 .left_area .text_01 [data-ruby] {
    position: relative;
    display: inline-block;
}
#story_1 .left_area .text_01 [data-ruby]::before {
    content: attr(data-ruby);
    width: 10em;
    position: absolute;
    top: -0.6em;
    left: 50%;
    right: 0;
    margin: auto auto auto -5em;
    font-size: 0.5em;
    line-height: 1;
    text-align: center;
}

#story_1 .right_area {
    width: 56%;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}
#story_1 .right_area .img_01 img {
    vertical-align: bottom;
}

#story_1 .text_credit p {
    position: absolute;
    font-family: "Koburina Gothic W6 JIS2004", sans-serif;
    font-size: 12px;
}

@keyframes car_box {
    0%   { opacity: 0; }
    67%  { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes car_move {
    0%   { left: 0%; transform: rotate(-2deg); }
    2%   { left: 0%; transform: rotate(2deg); }
    4%   { transform: rotate(-2deg); }
    6%   { transform: rotate(2deg); }
    8%   { transform: rotate(-2deg); }
    10%  { transform: rotate(-2deg); }
    12%  { transform: rotate(2deg); }
    14%  { transform: rotate(0deg); }
    16%  { transform: rotate(0deg); }
    86%  { transform: rotate(-2deg); }
    88%  { transform: rotate(-2deg); }
    90%  { transform: rotate(-2deg); }
    92%  { transform: rotate(2deg); }
    94%  { transform: rotate(-2deg); }
    96%  { transform: rotate(2deg); }
    98%  { transform: rotate(0deg); }
    100% { left: calc(100% - 52px); }
}

#story_1 .car_box {
    opacity: 0;
}
#story_1 .active .car_box {
    opacity: 1;
    animation: car_box 1s ease 0s 1 normal forwards;
}
#story_1 .car_box .inner {
    position: absolute;
    top: 21.74%;
    left: 0;
    width: 16%;
    max-width: 220px;
    height: 120px;
    background: #093a56;
    border-radius: 0 60px 60px 0;
}
#story_1 .car_box .min {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    width: 160px;
    margin: 20px auto 0;
    line-height: 1.4;
    text-align: center;
    font-family: "Koburina Gothic W6 JIS2004", sans-serif;
    font-size: 16px;
    color: #FFFFFF;
}
#story_1 .car_box .min span {
    font-size: 13px;
}
#story_1 .car_box .car_road {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 160px;
    height: 5px;
}
#story_1 .car_box .car_road > img {
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
}
#story_1 .car_box .car {
    position: absolute;
    left: 0;
    bottom: 12px;
    width: 52px;
}
#story_1 .car_box .car img {
    vertical-align: bottom;
}
#story_1 .active .car_box .car {
    animation: car_move 2.0s ease-in-out forwards 1.2s;
    transform: translate(0, 0);
}

#story_1 #scn01 {
    background: url(/book/focal/hirata/images/trip/fv_bg.jpg) no-repeat center 50% / cover;
}
#story_1 #scn03 {
    background: url(/book/focal/hirata/images/trip/day1_largeimg01.jpg) no-repeat center 50%/ cover;
}
#story_1 #scn07 {
    background: url(/book/focal/hirata/images/trip/day2_largeimg01.jpg) no-repeat center 50%/ cover;
}
#story_1 #scn12 {
    background: url(/book/focal/hirata/images/trip/day3_largeimg01.jpg) no-repeat center 50%/ cover;
}


/*--------------------------------------------------------
  個別style
--------------------------------------------------------*/
#story_1 #scn01 {
    opacity: 1;
    z-index: 501;
}
#story_1 #scn01 .main_title {
    width: 48.5%;
    max-width: 683px;
    position: absolute;
    top: 23.1%;
    left: 46.7%;
}

#story_1 #scn01 .main_name {
    width: 5%;
    max-width: 70px;
    position: absolute;
    top: 23%;
    left: 9%;
}

#story_1 #scn02 {
    background: #083b55;
}
#story_1 #scn02.popup::after {
    content: "";
    display: block;
    background: rgba(0,0,0,0.4);
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
#story_1 #scn02 .schedule {
    position: absolute;
    width: 8.6%;
    right: 80px;
    bottom: 20%;
    cursor: pointer;
}
#story_1 #scn02 .access {
    position: absolute;
    width: 119px;
    right: 83px;
    bottom: 10%;
    cursor: pointer;
}
#story_1 .schedule-box {
    display: none;
    cursor: pointer;
    width: 80%;
    left: 0;
    position: absolute;
    right: 0;
    margin: auto;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 10;
}
#story_1 .schedule-box a:hover {
    opacity: 1;
}

#story_1 #scn02 .main_text {
    width: 48%;
    position: absolute;
    display: block;
    top: 46.5%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#story_1 #scn02 .main_text > p {
    color: #fff;
}
#story_1 #scn02 .main_text .main_text_item {
    font-size: 20px;
    line-height: 2;
    letter-spacing: 0.02em;
}
#story_1 #scn02 .main_text .credit_text {
    margin-top: 2.5em;
    font-family: "Koburina Gothic W3 JIS2004", sans-serif;
    font-size: 16px;
    line-height: 1.75;
}

#story_1 #scn03 .large_title,
#story_1 #scn07 .large_title,
#story_1 #scn12 .large_title {
    width: 23.5%;
    max-width: 490px;
    position: absolute;
    top: 19%;
    left: 61%;
}
/*
#story_1 #scn03 .copy {
    width: 6.15%;
    max-width: 84px;
    position: absolute;
    top: 16.1%;
    left: 17.8%;
}
*/

#story_1 #scn04 .right_area .img_01 {
    width: 98.8%;
    margin-top: -10.4%;
}
#story_1 #scn05 .right_area .img_01 {
    width: 98.8%;
    margin-top: -10.4%;
}

#story_1 #scn06 .right_area .img_01 {
    width: 114.4%;
    margin-left: -2.5%;
    margin-top: -6%;
}

#story_1 #scn08 .right_area .img_01 {
    width: 97%;
    margin-top: -9.8%;
    margin-left: -4%;
}
#story_1 #scn09 .right_area .img_01 {
    width: 108%;
    margin-top: -8.8%;
    margin-left: -4%;
}

#story_1 #scn10 {
    background: url(/book/focal/hirata/images/trip/day2_largeimg02.jpg) no-repeat center 60%/ 85.5% auto;
}

#story_1 #scn13 .right_area .img_01 {
    width: 111%;
    margin-top: -6.5%;
    margin-left: -3%;
}
#story_1 #scn14 {
    background: url(/book/focal/hirata/images/trip/day3_largeimg02.jpg) no-repeat center 53%/ 75% auto;
}
#story_1 #scn15 .right_area .img_01 {
    width: 111%;
    margin-top: -9.5%;
    margin-left: -3%;
}
#story_1 #scn16 .right_area .img_01 {
    width: 111%;
    margin-top: -9.5%;
    margin-left: -3%;
}

#story_1 #scn11 .scn_inner,
#story_1 #scn12 .scn_inner {
    background: #D9F5F6;
    border-width: 20px 65px 20px 20px;
    border-style: solid;
    border-color: #fff;
    box-sizing: border-box;
    height: 100%;
}

/*
#story_1 #scn11 .logo_img,
#story_1 #scn12 .logo_img,
#story_1 #scn19 .logo_img,
#story_1 #scn26 .logo_img,
#story_1 #scn27 .logo_img {
    top: calc(6.3% - 20px);
    left: calc(3.5% - 20px);
}

#story_1 #scn11 .title_img,
#story_1 #scn12 .title_img,
#story_1 #scn19 .title_img,
#story_1 #scn26 .title_img,
#story_1 #scn27 .title_img {
    top: calc(5.3% - 20px);
    right: calc(70px - 65px);
}
*/

#story_1 #scn11 .spot,
#story_1 #scn12 .spot {
    position: relative;
    font-size: 18px!important;
    padding-left: 1em;
    margin-bottom: .8em;
}

#story_1 #scn11 .spot::before,
#story_1 #scn12 .spot:before {
    content: "";
    width: 15px;
    height: 15px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    border-radius: 50%;
    background: #00AABE;
}

#story_1 #scn11 .right_area .img_01 {
    width: 111.9%;
    margin-left: -4%;
    margin-top: -13%;
}

#story_1 #scn12 .main_area {
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 100%;
    max-width: 100vw;
}
#story_1 #scn12 .left_area,
#story_1 #scn12 .right_area {
    width: 33.4%;
    margin-top: 0;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}
#story_1 #scn12 .left_area .text_01,
#story_1 #scn12 .right_area .text_01 {
    width: 96%;
    margin: 20px auto 0;
}
#story_1 #scn12 .left_area .text_01 p,
#story_1 #scn12 .right_area .text_01 p {
    font-size: 14px;
    line-height: 1.85;
}
#story_1 #scn12 .left_area .text_01 p.info,
#story_1 #scn12 .right_area .text_01 p.info {
    font-size: 12px;
    line-height: 1.66;
    margin-top: 1em;
}
#story_1 #scn12 .left_area .img_01,
#story_1 #scn12 .right_area .img_01 {
    width: 79.5%;
    margin: 0 auto;
}
#story_1 #scn12 .tag_img {
    position: absolute;
    top: 0;
    left: 20px;
    width: 3.4%;
    max-width: 58px;
    margin-top: 11.4%;
}

#story_1 #scn14 .right_area .img_01 {
    width: 92%;
    margin-left: 3.1%;
}