.grad-btn {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #f7f7f7;
border-left: solid 6px #ff7c5c;/*左線*/
color: #ff7c5c;/*文字色*/
font-weight: bold;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
.grad-btn:active {
box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
transform: translateY(2px);
}
.grad-btn::before {
content: "続きを読む"
}
.grad-item {
position: relative;
overflow: hidden;
height: 240px; /*隠した状態の高さ*/
}
.grad-item::before {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 240px; /*グラデーションで隠す高さ*/
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
content: "";
}
.grad-trigger {
display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked ~ .grad-btn::before {
content: "閉じる" /*チェックされていたら、文言を変更する*/
}
.grad-trigger:checked ~ .grad-item {
height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}


.otome-page {
font-size: 13px;
line-height: 2;
text-align: center;
font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        margin: 20px 0 40px 0;
}


.otome-page h3{
background: -moz-linear-gradient(65deg, #F13F79, #FFC778); 
background: -webkit-linear-gradient(65deg, #F13F79, #FFC778); 
background: linear-gradient(25deg, #F13F79, #FFC778);  /* 背景色指定 */ /* 切り抜きたい画像 */
-webkit-background-clip: text;        /* 画像を文字で切り抜く指定 */
color: white;                         /* 文字色を白色(不透明)にする：IE用 */
-webkit-text-fill-color: transparent; /* 文字色を透明にする：IE避け */
/* 以下は任意の装飾 */
margin: 0 auto;
font-weight: bold;
font-size: 24px;
letter-spacing: normal;
line-height:1.5;
padding-bottom: .5em;

}


.otome-page h4{
font-size: 20px;
font-weight: normal;
text-align: center;
margin: 0 0 30px;
text-transform:none;
color: gray;
}

.otome-page p{	
margin: 20px;
word-wrap:break-word;
text-align: left;
}


.topimage img{
  margin-bottom:20px;
  text-align:center;
  width:100%;
}

.secimage img{
    text-align:center;
  width:300px;
}

@media screen and (max-width: 768px){
.otome-page h3{
font-size: 20px;
}

.otome-page h4{
font-size: 17px;
}
}

.sou { text-align: center;
margin: 10px;
}

.sou img{
width: 150px;

}

.otome-flex{
display: -webkit-flex;
display: -ms-flex;
display: flex;
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}



.otome-flex.rp-1{
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
text-align: center;
line-height: 1.8;
margin: 10 auto 10px;
}

.otome-flex.rp-1 .flex-img{ width: 50%;}
.otome-flex.rp-1 .flex-txt{ width: 50%;}
.otome-flex.rp-1 .flex-txt{ width: 50%;}

.otome-flex.rp-2{
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.otome-flex.rp-2 .flex-box{ width: 32%;}


.otome-flex.rp-2 .flex-box .icon{
width: 150px;
margin: 0 auto 10px;
}
.otome-flex.rp-2 .flex-box .icon img{
width: 100%;

}
.otome-flex.rp-2 .flex-box .ttlh{
background: -moz-linear-gradient(65deg, #F13F79, #FFC778); 
background: -webkit-linear-gradient(65deg, #F13F79, #FFC778); 
background: linear-gradient(25deg, #F13F79, #FFC778);  /* 背景色指定 */ /* 切り抜きたい画像 */
-webkit-background-clip: text;        /* 画像を文字で切り抜く指定 */
color: white;                         /* 文字色を白色(不透明)にする：IE用 */
-webkit-text-fill-color: transparent; /* 文字色を透明にする：IE避け */
/* 以下は任意の装飾 */
margin: 0 auto;
font-weight: bold;
font-size: 15px;
letter-spacing: normal;
line-height:1.5;
padding-bottom: .5em;
    text-align: center;
}



.otome-flex.rp-2 .flex-box .ttl{
font-size: 13px;
text-align: center;
margin: 0 auto 10px;
    padding: 10px 0 0 0px;
}

.otome-flex.rp-2 .flex-box .txt{
font-size: 10px;
text-align: left;
margin: 0 auto 10px;
    padding: 10px;
}

.otome-flex.rp-3{
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
text-align: center;
line-height: 1.8;
margin: 30px 0 30px 0;
  padding-bottom:40px;
}

.otome-flex.rp-3 .img { width: 40%;}
.otome-flex.rp-3 .txt { width: 60%;}

.otome-flex.rp-3 .txt h4{ 
  text-align: center;
color: #fff;
    text-shadow: 1px 1px 1px #050505, -1px 1px 1px #050505, 1px -1px 1px #050505, -1px -1px 1px #050505, 1px 1px 1px #050505, -1px 1px 1px #050505, 1px -1px 1px #050505, -1px -1px 1px #050505;
  font-size: 30px;
  transform: rotate(-4deg);
  font-weight: bold;
      padding-top:10px;
}

.otome-flex.rp-3 .txt h5{ 
font-size: 18px;
font-weight: bold;
color: gray;
margin: 10px;}

.otome-flex.rp-3 .txt h5 span{ display: block;
font-size: 13px;
}

.otome-flex.rp-3 .img img{

width: 100%;

}



@media screen and (max-width: 768px){
.otome-flex.rp-1{
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;

}
.otome-flex.rp-1 .flex-img,
.otome-flex.rp-1 .flex-txt{ 
width: 80%;
text-align: center;
}

.otome-flex.rp-2 .flex-box{
width: 50%;
max-width: 320px;
margin: 0 auto 30px;
}

.otome-flex.rp-2 .flex-box .icon{
width: 100px;
margin: 0 auto ;
}

.otome-flex.rp-2 .flex-box .icon img{
width: 100%;
}

.otome-flex.rp-3{
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin: 0 auto ;
padding-bottom:40px;
}


.otome-flex.rp-3 .img{ width:80%;
margin: 10px}
.otome-flex.rp-3 .txt { width:100%;}
.otome-flex.rp-3 .txt h5{ 
}

.otome-flex.rp-3 .txt h5 span{ display: block;
}
}

.kouryakujyun, .kouryakujyun2{
  width:100%;
padding: 1px;
    margin-bottom:50px;
display: flex;
flex-direction: row;
justify-content: center;
);
}





.kouryakujyun img,{
width:100%;
        height: 100%;
    object-fit: cover;
  margin:0px;
}

.kouryakujyun2 img{
        height: 100%;
    object-fit: cover;
  margin:0px;
}

.kouryakujyun p, .kouryakujyun2 p{
text-align: center;
  width: 150px;
    height: 150px;
margin: 0 auto;
text-align: center;

}

.ttl span{
font-size: 20px;
color: transparent;
background-image: linear-gradient(yellow, orange), linear-gradient(lightgray, gray);
background-position: left, right;
background-repeat: no-repeat;
background-size: var(--rate) 100%, calc(100% - var(--rate)) 100%;
background-clip: text;
-webkit-background-clip: text;
}
.ttl span:before{
content: "★★★★★";
}

h4 span{
font-size: 20px;
color: transparent;
background-image: linear-gradient(orange, orangered), linear-gradient(gray, dimgray);
background-position: left, right;
background-repeat: no-repeat;
background-size: var(--rate) 100%, calc(100% - var(--rate)) 100%;
background-clip: text;
-webkit-background-clip: text;
}
h4 span:before{
content: "★★★★★";
}

.bargraph {
  background-color: #c5d1d8;
  margin: 0 auto;
  height: 40px;
  width: 80%;
  display: flex;
  flex-direction: row; /* 要素を横に並べる */
  justify-content: space-evenly; /* 要素を均等間隔に分散させる */
  font-family: "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;;
}

  @media screen and (max-width: 768px){
  .bargraph {
      height: 40px;
  width: 80%;
    font-size:10px}
}

.bar {
  box-sizing: border-box;
  background-color: #FFFFFF;
  padding: 4px;
  line-height: 1em;
 text-align: center;


  margin: 0 auto;
}

.bar_label {
  white-space: nowrap;
position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}




/*ネタバレ表示非表示ボタン*/

/*全体*/
.hidden_box {
    margin: 2em 0;/*前後の余白*/
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
    display: inline-block;
    padding: 0.3em 1em;
    text-decoration: none;
    color: #ff7d6e;
    border: solid 2px #ff7d6e;
  background: #ffebe9;
    border-radius: 3px;
    transition: .4s;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: #ff7d6e;
    color: white;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
    display: 
}




/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

.hidden_box p {
 white-space: pre-wrap;  
}



/*dtタグ*/
#qasetsumei dl{

     overflow: hidden;
     _zoom: 1;
}

#qasetsumei dl dd{
     text-indent: -2.6em;   
     padding: 0 20px 0px 60px;
}

#qasetsumei dl{
     margin:10px 0px 0 0;
}

#qasetsumei dt{
     margin:10px 0px 0 0;
}

#qasetsumei dl dd:first-letter
{
     font-size: 1.6em;
     font-weight: bold;
     margin-right:10px;
     padding:5px;
     font-family: 'Nunito', sans-serif;
}

#qasetsumei dl dt:first-letter
{
     font-size: 1.6em;
     font-weight: bold;
     margin-right:10px;
     padding:5px;
     font-family: 'Nunito', sans-serif;
}


#qasetsumei dl dd{
     margin: 0px 0 -1px 0;
     padding-bottom:15px;
     border-bottom: 1px #000 dotted;
}


#qasetsumei dl dt:first-letter{
     color: #0F78E1;
}
#qasetsumei dl dd:first-letter{
     color: #ff6767;
}

/*個別へいく*/

.kobetsu_btn{
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    color: #ff7c5c;
    border: dashed 1px #ff7c5c;
    background: #f7cac4;
    border-radius: 3px;
    transition: .4s;
}

.kobetsu_btn:hover {
    background: #ff7c5c;
    color: #FFF;
}

/*プレイ済みゲーム*/


.shugou , .shugou2, .shugou3{
padding: 1px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}

.shugou p{
width: 10%;
padding: 5px;
margin: 0 auto;
text-align: center;
}

.shugou2 p{
width: 25%;
  height:10%;
padding: 5px;
margin: 0 auto;
text-align: center;
}


.shugou3 p{
width: 20%;
  height:20%;
padding: 5px;
margin: 0 auto;
text-align: center;
}

.shugou img{
width:100%;
}

.shugou2 img, .shugou3 img{
width:100%;
    height:100%;
  object-fit: cover;
}



.end-back-mask{
  padding: 10px;
  background: rgba(255,255,255,0.7);
}


.end-back-mask p{
    /*word-break: break-all;*/
  overflow-wrap : break-word;
  color: black;
}