@charset "utf-8";
/* ========================
目次
1. outlineContainer：総合 ページ内リンク
2. storyContainer：ストーリーなど
3. chara-link：キャラクター紹介
4. keywordContainer：用語集

===========================*/

/* 余白を消したい */
section {
    overflow: hidden;
}
h1 span {
    font-size: 2vw;
    letter-spacing: 0.05em;
    vertical-align:middle;
}

/* ========================
1. outlineContainer：総合 ページ内リンク
===========================*/
.outlineContainer {
    margin: 46px auto 0;
    text-align: center;
    background-color: #333;
}
.outlineContainer .container{
    max-width: 1000px;
    margin: 0 auto 0;
    padding: 30px 10px 0;
}
.outlineContainer .container img{
    width: 100% ;
	margin-top: -10px ;
}
/*640pxより小さい場合*/
@media (max-width: 640px) {
    .outlineContainer {
        background-position: top right;
        background-size: cover;
    }
}

/* メインストーリー */
.main-story {
    margin-top: 0;
    padding-bottom: 30px;
    background-color: #CCC;
    color: #333;
    color: var(--text-bright-color);
/*    background: url(../i/bg_main.jpg) no-repeat top center;
    background-size: cover;*/
}


/* あらすじ部分画像 */
.pc-only {
  display: block;
}
.sp-only {
  display: none;
}

/* スマホ幅以下のときだけ切り替え */
@media (max-width: 767px) {
  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }

  .sp-only img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 8px; /* 好みに応じて */
  }
}

/* あらすじテキスト */
.story{
    font-weight: bold;
	font-size: 1.3em;
	font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", "Noto Serif JP", serif;
}
/*640pxより小さい場合*/
@media (max-width: 640px) {
    .main-story .story p, .story{
        font-size: 14px;
    }
}
/*374pxより小さい場合（iPhone8以前）*/
@media (max-width: 374px) {
    .main-story .story p, .story, .storyContainer .container p.caution{
        font-size: 12px;
    }
}
/*640pxより大きい場合*/
@media (min-width: 640px) {
    .main-story .story p br{
        display: none; /*改行を消す*/
    }
}
.story p.workPeriod{
    margin-top: 30px;
    padding-bottom: 20px;
    color: #808080;
	font-size: 0.7em;
}


.outlineContainer h1{
    font-size: 4.5vw;
    letter-spacing: 0.1em;
    padding: 35px 0 0;
    font-weight: bold;
    color: #333;
}
/*640pxより小さい場合*/
@media (max-width: 640px) {
    .outlineContainer h1{
        font-size: 24px;
    }
}
.outlineContainer p{
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

/* ページ内リンク */
.page-link{
    display: flex;
    justify-content: space-around;
    text-align: center;
    margin:0 auto;
    padding-bottom: 35px;
}
.page-link a{
    display: inline;
    width: 20%;
    font-weight: bold;
}
.page-link a:hover{
    opacity: 0.5;
}
.page-link dt{
    font-size: 20px;
    padding-bottom: 10px;
    color: #fff;
}
.page-link img{
    width: 100%;
}
/* スマホ表示 */
@media (max-width: 640px) {
    .page-link{
        flex-wrap: wrap;
        margin:0 30px -20px;
    }
    .page-link a{
        width: 35%;
        padding-bottom: 20px;
    }
    .page-link dt{
        font-size: 16px;
    }
}


/* ========================
2. storyContainer：ストーリー
===========================*/
.storyContainer {
    margin: 0 auto;
    text-align: center;
    font-size: 16px;
}
.chap1{
    background: url(../../i/bg_chap1.jpg) no-repeat top center;
    background-size: 100% auto;
}
.chap2{
    background: url(../../i/bg_chap2.jpg) no-repeat top center;
    background-size: 100% auto;
}
.chap3{
    background: url(../../i/bg_chap3.jpg) no-repeat top center;
    background-size: 100% auto;
    padding-bottom: 40px; /* 用語集ができるまで隙間を調整 */
}
.chap4{
    background: url(../../i/bg_chap4.jpg) no-repeat top center;
    background-size: 100% auto;
    padding-bottom: 40px; /* 用語集ができるまで隙間を調整 */
}

/* 768pxより小さい場合 */
@media (max-width: 768px) {
    .storyContainer{
    background-size: 100% auto;
    }
}
.storyContainer .container{
    max-width: 1000px;
    margin: 0 auto;
}
.storyContainer h2{
    font-size: 4vw;
    letter-spacing: 0.1em;
    padding: 40px 0 20px;
    font-weight: bold;
    color: #333;
}
.storyContainer h2 img{
    padding: 0 0 20px; /* ロゴ */
}
/* 640pxより小さい場合 スマホ表示 */
@media (max-width: 640px) {
    .aboutContainer h1{
        font-size: 22px;
    }
    .storyContainer h2{
        font-size: 22px;
    }
    .storyContainer h2 img{
        width: 80%;
    }
}


/* 各話へのリンクボタン */
.story-link{
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin:30px 10px;
}
.story-link dl{
    display: inline-block;
    padding: 8px 0 0;
    width: 24%;
    border: solid 4px #333;
}
.story-link dt{
    font-size: 22px;
    font-weight: bold;
    padding-bottom: 10px;
}
.story-link dd{
    padding: 8px 0 5px;
    background-color: #333;
    color: #fff;
}
.story-link dd a{
   display: block;
}
.story-link dd a:hover{
    color: #999;
    background-color: rgb(0,0,0);
}
/* 準備中 */
.story-link dl.close dd a,
.story-link dl dd a.close{
    color: #666;
}
.story-link dl.close dd a:hover{
    background-color: #333; 
}


/* スマホ表示 */
@media (max-width: 640px) {
    .story-link dl:hover{
        background-color: rgb(0,0,0,0.3); /* 全体ホバー */
    }
    .story-link dt{
        font-size: 16px;
    }
    .story-link dd{
        display: none; /* 非表示に */
    }
}



/* ========================
3. chara-link：キャラクター
===========================*/

/* キャラ紹介ボタンリンク */
.chara-link{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    margin:30px 10px;
}
.chara-link+.chara-link{
    margin-top:0 ;
}
.chara-link a{
    display: inline;
    padding: 0;
    margin: 0 20px;
    width: 18%;
    height: auto;
/*    border: solid 4px #333; */
}
.chara-link dt img{
    width: 100%;
    border-radius: 50%;
}
.chara-link dd{
    padding: 8px 0 5px;
    color: #333;
}
.chara-link dd span{
    font-size: 12px;
}

/* マウスオーバー */
.chara-link a:hover img{
    opacity: 0.5;
}
.chara-link a:hover dd{
    color: #999;
}

/* スマホのみ */
@media (max-width: 640px) {
    .chara-link{
    justify-content: center;
}
    .chara-link a{
    width: 25%;
    margin: auto 10px;
    }
}




/* ========================
4. keywordContainer：用語集
===========================*/
/* 用語集 */
.storyContainer h3{
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    margin: 0 14px 20px;
    border-bottom:1px solid #000;
/*    color: #666;*/
}
.storyContainer p+h3{
    margin-top: 40px;
}
.storyContainer .txt{
    margin-bottom: 40px;
}
.storyContainer .txt p{
    text-align: left;
    margin: 0 14px;
}
.storyContainer .txt p a{
    /* border-bottom:solid 3px #dcdcdc; */
}
/* 段落が続いた場合は隙間を開ける */
.storyContainer .txt p+p{
    margin-top: 10px;
}
/* 注釈 */
.storyContainer .caution{
    font-size: 14px;
    color: #999;
    margin-top: 10px;
}

/* スマホ表示 */
@media (max-width: 640px) {
    .storyContainer .txt p{
    font-size: 14px;
}