@charset "UTF-8";
/*************************************** 矢印
*****************************************/
/* story.scss
***************************************

story

*****************************************/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Serif+JP&display=swap");
.story { background-color: #E0F6FC; padding-bottom: 200px; overflow: hidden; position: relative; /*************************************** //これが私の物語 ページ共通　から　個別まで
*****************************************/ }
.story + footer { margin-top: 0; }
.story::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../../img/story/back_img.jpg"); background-size: 100% 100%; }
.story .story_inner { position: relative; z-index: 1; }
.story .title_bar { color: #fff; background-color: #009DDA; font-family: 'Noto Serif JP', serif; letter-spacing: 0.5em; }
.story .title_bar::before, .story .title_bar::after { display: none; }
.story .center { margin-left: auto; margin-right: auto; }
@media print, screen and (min-width: 1030px) { .story .center { max-width: 980px; padding-left: 40px; padding-right: 40px; } }
@media screen and (max-width: 1029px) { .story .center { width: 90%; } }
.story .story-page { font-family: 'Noto Serif JP', serif; color: #0082B5; }
.story .story-page .story_nav { justify-content: center; }
.story .story-page .story_nav li { -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; position: relative; font-weight: bold; font-size: 1.8rem; margin-right: 5px; margin-left: 5px; }
@media screen and (max-width: 1029px) { .story .story-page .story_nav li { font-size: 1.6rem; margin-right: 2px; margin-left: 2px; } }
.story .story-page .story_nav li a { padding-top: 27px; display: inline-block; position: relative; }
@media screen and (max-width: 1029px) { .story .story-page .story_nav li a { padding-top: 22px; } }
.story .story-page .story_nav li a::before { content: ''; display: inline-block; position: absolute; width: 24px; height: 13px; top: 0; left: 50%; margin-left: -12px; background-image: url("../../img/story/ico_book.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; transition: ease .3s; opacity: 0; }
@media screen and (max-width: 1029px) { .story .story-page .story_nav li a::before { width: calc(24px * .8); height: calc(13px * .8); margin-left: calc(((24px * .8) / 2) * -1); } }
.story .story-page .story_nav li a.se::before { opacity: 1; }
@media screen and (min-width: 1030px) { .story .story-page .story_nav li a:hover::before { opacity: 1; } }
.story .story_cont { background-color: #FDFBED; border-radius: 15px; padding: 140px; margin-top: 100px; margin-bottom: 60px; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); position: relative; /***************************************
//story_01 〜
*****************************************/         /*&.story_03, &.story_04, &.story_05, &.story_06, &.story_07, &.story_08, &.story_09 { .pic3-box { img { max-width: 215px;
 @include mq-down() { width: 100%; max-width: 180px; } } } }
 &.story_04 { .pic2-box { img { max-width: 400px; } } }
 &.story_05 { .pic2-box { img { max-width: 210px; } } }*/ /*&.story_03,
&.story_06,
&.story_08,
&.story_09 { .pic2-box { img { max-width: 300px; } }
}*/ }
@media screen and (max-width: 1029px) { .story .story_cont { padding: 200px 10% 60px 10%; margin-top: 50px; margin-bottom: 70px; } }
.story .story_cont h2 { font-size: 4rem; font-weight: bold; margin-bottom: 60px; margin-left: -.5em; }
@media screen and (max-width: 1029px) { .story .story_cont h2 { font-size: 3rem; margin-bottom: 30px; } }
.story .story_cont p { font-size: 2rem; line-height: 200%; }
@media screen and (max-width: 1029px) { .story .story_cont p { font-size: 1.6rem; } }
.story .story_cont .pic1-box { position: absolute; width: 300px; height: 300px; top: 40px; right: 40px; }
@media screen and (max-width: 1029px) { .story .story_cont .pic1-box { /*width: 140px;
height: 140px;
top: 30px;
right: 30px;*/ width: 80%; text-align: center; height: 140px; right: auto; } }
.story .story_cont .pic2-box { margin-top: 60px; display: flex; align-content: flex-start; align-items: flex-start; }
.story .story_cont .pic2-box img { display: block; width: 50%; }
@media screen and (max-width: 1029px) { .story .story_cont .pic2-box img { margin-bottom: 10px; } }
.story .story_cont .pic3-box { margin-top: 40px; }
.story .story_cont.story_01 .pic2-box, .story .story_cont.story_02 .pic2-box { margin-top: 40px; margin-bottom: 40px; text-align: left; }
.story .story_cont.story_01 .pic2-box img, .story .story_cont.story_02 .pic2-box img { max-width: 400px; width: 100%; }
.story .story_cont.story_01 .pic3-box, .story .story_cont.story_02 .pic3-box { text-align: right; }
@media screen and (min-width: 1030px) { .story .story_cont.story_01 .pic3-box img, .story .story_cont.story_02 .pic3-box img { width: 490px; } }
@media print, screen and (min-width: 1030px) { .story .story_cont.story_07 .pic1-box { width: 200px; top: 60px; } }