@charset "utf-8";
/*shortstory*/
#shortstory{background: #181c2d;}
/* 本のような背景画像*/
#shortstory .shortstory_area{background: url(../ss_img/shortstory_img01.png) no-repeat top -12px center;background-size: contain;}
#shortstory .shortstory_area .shortstory_inner{max-width: 1000px;margin:auto;}
/* 前日単構成スタイル */
#shortstory .shortstory_area div.episode_wrapp{max-width: 1000px;display: flex;padding-top: 30px;/* background: yellow; */}
/* back_pageボタン */
/* ↓mainコンテンツ内のbackpageボタン----- */
#shortstory .shortstory_area div.back_page{width: 150px;display: flex;justify-content: center;align-items: start;padding: 166px 0px 0 0px;line-height: 1.1;}
#shortstory div.back_page a{display: flex;flex-direction: column;justify-content: center;align-items: center;color: #fff;font-size: 15px;text-shadow: 1px 1px 1px rgba(0,0,0,0.75);letter-spacing: -0.01em;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;
}
/* ↑mainコンテンツ内のbackpageボタン----- */
/* footer内のbackpageボタン----- */
footer div.back_page{width: 150px;display: flex;justify-content: center;align-items: start;line-height: 1.1;position: absolute;bottom: 8px;left: -62px;}
footer div.back_page a{display: flex;flex-direction: column;justify-content: center;align-items: center;color: #fff;font-size: 15px;text-shadow: 1px 1px 1px rgba(0,0,0,0.75);letter-spacing: -0.01em;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;
}
/* footer内のbackpageボタン----- */
#shortstory .shortstory_area div.back_page a:hover,
footer div.back_page a:hover{transform: translateY(-3px);}
#shortstory .shortstory_area div.back_page img{width: 83px;margin: 4px 0 0 7px;}
footer div.back_page img{width: 83px;margin: 4px 0 0 7px;}

/* 前日談の背景メッシュや本文、タイトルなど格納*/
#shortstory .shortstory_area div.episode_container{width: 830px;padding: 0;margin: 42px auto 110px;position: relative;z-index: 4;}
#shortstory .shortstory_area div.episode_background_mesh{position: absolute;top: -32px;left:0;z-index: -1;max-width: 805px;}
#shortstory .shortstory_area img.episode_mesh_img{}
#shortstory .shortstory_area div.character{width: 280px;position: absolute;top: 50px;left: 0;z-index: -1;}
#shortstory .shortstory_area div.character_img{width: 100%;height: auto;}
#shortstory .for_pc{display: block;}
#shortstory .for_sp{display: none;}

/* 前日談枠 */
#shortstory .shortstory_area h3.episode_title{font-size:20px;color: #B58F78;transform: skew(-4deg,-9.2deg) rotate(9.3deg) translate(15px, -25px);height: 0;margin: 0 0 0 auto;max-width: 168px;}
#shortstory .shortstory_area article.episode{width: 554px;padding: 8px 15px 10px 10px;transform: skew(-5deg,-0.6deg) rotate(-5deg);background: #1A1A1A;border:none;box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);margin: 16px 26px 0 auto;}
#shortstory .shortstory_area article.episode div.episode_text_inner{background: #181C2D;padding: 19px 10px 29px 26px;border: 1px solid #B58F78;margin: 0px 0px;}
#shortstory .shortstory_area article.episode p.episode_text{font-size: 14px;letter-spacing: -0.4px;line-height: 32px;}
#shortstory .shortstory_area div.episode_container h3.ss_title{color:#fff;text-shadow: 1px 1px 1px rgba(0,0,0,0.75);font-size: 29.53px;font-feature-settings: "palt";transform: rotate(0.3deg) translate(-230px,-9px) skew(0deg,0deg);letter-spacing: 4.4px;width: 152%;height: 0;}

/* ss本文構成スタイル */
#shortstory .shortstory_area article{background: #181C2D;padding: 114px 84px 40px 100px;border: 1px solid #B58F78;}
#shortstory .shortstory_area article div{width: 100%;max-width: 574px;margin: 20px auto;}
#shortstory .shortstory_area article p{color:#eff2ee;line-height: 28px;text-align: left;letter-spacing: -0.04em;}
#shortstory .shortstory_area article p span{display: inline-block;}
#shortstory .shortstory_area article p span.text01{color:#a3342f;font-size: 20px;}
#shortstory .shortstory_area article p span.text02{font-size: 20px;}
#shortstory .shortstory_area article p span.text03{font-size: 20px;transform: rotate(15deg);}
#shortstory .shortstory_area article p span.text04{color:#a3342f;}
#shortstory .shortstory_area article p span.text05{font-size: 20px;transform: rotate(-15deg);color:#a3342f;}

#shortstory .shortstory_area article p.text01{margin:0 0 50px 0;}
#shortstory .shortstory_area article p.text02{margin:0 0 50px 0;}
#shortstory .shortstory_area article p.text03{margin:0 0 30px 0;}
#shortstory .shortstory_area article p.text04{margin:0 0 0 0;}

/* 1200pxで一部レイアウト切り替え */
@media(max-width:1200px){
 #shortstory .shortstory_area div.episode_container{width:100%;max-width:830px;}
#shortstory .shortstory_area div.episode_wrapp{flex-direction:column;}
#shortstory .shortstory_area article.episode{width: 66.8%;margin: 16px 0 0 auto;}
#shortstory .shortstory_area .shortstory_inner{padding:0 20px;}
#shortstory .shortstory_area div.episode_container h3.ss_title{font-size: 26px;width: 140%;transform: rotate(0.3deg) translate(-207.9px,-9px) skew(0deg,0deg);}
/* ↓mainコンテンツ内のbackpageボタン----- */
#shortstory .shortstory_area div.back_page{width: 100px;padding: 0;transform: translateX(-33px);}
#shortstory div.back_page a{display: flex;flex-direction: column;justify-content: center;align-items: center;color: #fff;font-size: 15px;text-shadow: 1px 1px 1px rgba(0,0,0,0.75);letter-spacing: -0.01em;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}
/* ↑mainコンテンツ内のbackpageボタン----- */
#shortstory .shortstory_area{background: url(../ss_img/shortstory_img01.png) no-repeat top -12px center;background-size: 1420px;}
#shortstory .shortstory_area article{margin:auto;}
#shortstory .shortstory_area div.episode_background_mesh{max-width: unset;}
}/* /.max-width:1200px */

/* 全体の切り替え */
@media(max-width:800px){
  #shortstory .for_pc{display: none;}
  #shortstory .for_sp{display: block;}
  #shortstory{padding:0 0 40px 0;}
  #shortstory .shortstory_area article.episode div.episode_text_inner{max-width:unset;padding: 20px 2%;}
  #shortstory .shortstory_area div.episode_container{margin: 42px auto 60px;}
  #shortstory .shortstory_area article{padding: 20px 2%;}
  #shortstory .shortstory_area article.episode p.episode_text{font-size: 0.8rem;line-height: 2.5;}
  #shortstory .shortstory_area article.episode{width: 100%;padding: 8px 10px;}
  #shortstory .shortstory_area div.episode_container h3.ss_title {transform: rotate(-6deg) translate(0px,0px) skew(-13deg,0deg);width: auto;line-height: 1.2;font-size:26px;height: auto;}
  #shortstory .shortstory_area div.back_page{margin: 0 0 0 7px;}
  #shortstory .shortstory_area article p{font-size: 0.8rem;line-height: 2.5;}
  #shortstory .shortstory_area div.character{position:unset;width:100%;max-width:400px;margin:0 auto 60px;}
}/* /.max-width:800px */