@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/


/************************************
** 子テーマ用のスタイルを書く
************************************/
/*header */
body.public-page {
  background-size: cover !important;
  background-attachment: fixed !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.container {height:100%;}
.header-container-in.hlt-top-menu .logo-header img {
  width:100px;
  height:auto;}


/************************************
** common css
************************************/
/*
base setting
------------------------------*/
html {
  height: 100%;
  font-size: 62.5%;
}

body {  
  height: 100%;
  color: #ccc;
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  line-height: 1.4; /* 基本の行間 */
}

body::before {
  content: "";
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: -1;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  transition: 0.5s;
}

#main {
  border-radius: 10px;
  width: 100%;
  float: none;
  margin: auto;
  position: relative;
  background: rgb(0, 0, 0, 0.5);
}

.content {
margin-top: 20px;
  padding: 20px 80px 50px;
  min-height: calc(100% - 190px);
}


/*
header
------------------------------*/
h1,
h2,
h3,
h4 {
  clear: both;
  font-weight: bold;}
  
h1 {
  font-size: 2.6rem;
  border-bottom: 2px solid #ffffff50;
  padding: 5px;
  width: 100%;}

h2 {
  color:#ddd;
  font-size: 1.8rem;
  background:rgb(255, 255, 255,0.3);
  padding:10px;
  border-radius:5px;
  margin:35px 0 10px 0;
  }

.article h2 {
  background: rgb(0, 0, 0, 0.5);
  color: #ddd;
  font-size: 1.4rem;
  padding: 15px;
  border-radius: 5px;
  margin: 35px 0 30px 0;
}

h3 {
  font-size: 1.8rem;
  position: relative;  
  padding:3px 3px 10px;
  margin:40px 0 10px 0;
  border-bottom: 2px solid #ffffff35;
  }


h4 {font-size: 1.4rem;}


/*
link color
------------------------------*/
a {transition : all 0.5s ease 0s;
  overflow: hidden;
  outline: none;
color: #fff;}

a:hover {
  transition: all 0.3s ease;
  color:#999 !important;}

a:link {color: #fff;}

a:hover,
a:active,
a:focus {
  color:#999;}


/*
other
------------------------------*/
.wp-block-separator { border-top: 1px solid #888;}

p {
  font-size:1.4rem;
  line-height: 1.8;
  color:#fff;}

.sp {display: none;}

input[type=search] {background:rgb(255, 255, 255, 0.3);}


/*
footer
------------------------------*/
.author-info,
.date-tags {display:none;}

#footer {
width: 100%;
    position: relative;
    bottom: 0;
}




/************************************
** index css
************************************/
/* table */
table.tablesorter-blackice {
  font-size:16px;
  margin-bottom:0;
}

table.tablesorter-blackice tr th {
  padding:10px;
  border:none;
}

.wp-block-button__link {background:none;}
.body .is-layout-flex {width:100%;}


/* その他ボタン設定 */
.link-ss,
.link-love,
.link-xmas {
  height:150px;
  border-radius:10px;}

.link-ss:hover,
.link-love:hover,
.link-xmas:hover {
  border-radius:10px;
  opacity:0.8;
  transition: all 0.3s ease;
}

.link-ss{
  background:url(http://ykgnmyc.cloudfree.jp/wp-content/uploads/2026/01/ss.png);
  background-size:cover;
  background-position: center;
}

.link-love{
  background:url(http://ykgnmyc.cloudfree.jp/wp-content/uploads/2026/01/love.png);
  background-size:cover;
  background-position: center;
}

.link-xmas {
  background:url(http://ykgnmyc.cloudfree.jp/wp-content/uploads/2026/01/xmas.png);
  background-size:cover;
  background-position: center;
}

/* CM-link */
.wp-block-buttons>.wp-block-button.has-custom-width .wp-block-button__link {background:rgb(0, 0, 0, 0.4);}





/************************************
** 基本設定ページcss
************************************/

.ttl-box {
  display: flex;
  width: 100%;}

.character-header {}
.top_icon {
  display: block;
  margin: 0;
  width: 60px;
  height: auto;}

.name-box {width: 100%;}


p.copy {
  font-size: 1.4rem;
  padding: 10px;
  text-align: right;
  opacity: 0.6;
}

.remark {
  font-size: 1.4rem;
  opacity: 0.6;
  letter-spacing: 0.3rem;}


.view {
  width: auto;
  max-width: 250px;
  filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.6));
  margin: 10px;
  float: right;
}


/* spec */
dl.spec,
dl.spec-other {
     padding: 3rem 1.5rem 3rem 3rem;
    font-size: 1.2rem;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-collapse: separate;
    border-spacing: 1rem;}


dl.spec-other {
  border-top: 1px solid #cccccc50;
  width: calc(100% - 22.5rem);}

dl.spec-other.felmina {border: none;}

dl.spec dt,
dl.spec dd,
dl.spec-other dt,
dl.spec-other dd {
  margin-bottom:0.5rem;
  border-radius: 0.5rem;
  padding:0.6rem 1rem;}

dl.spec dt,
dl.spec-other dt {
  width:10rem;
  margin-right: 1rem;
  font-weight: bold;
  background:rgb(255, 255, 255,0.2);
  text-align:left;}

dl.spec dd,
dl.spec-other dd {background: #00000025;
    width: calc(50% - 12rem);
    margin-right: 1rem;}

dl.spec dt.name {width:10rem;}
dl.spec dd.name {
  width: calc(100% - 12rem);
  margin-left: 0;
  margin-right: 0;}

.character-data {
  width: calc(100% - 22.5rem);
  display: flex;
  flex-wrap: wrap;}

.character-face {margin:0 0 2rem 2rem;}
.main_image {
  width: 185px;
  margin: 0;
  border: 1px solid #333;
  border-radius: 15px;
  height: auto;
  float: right;
}


/* 好きなもの以下 
dl.spec-other {
  font-size: 1.2rem;
  width:calc(100% - 25rem);
  padding: 2rem;
  display: flex;
  flex-wrap: wrap;}*/



/* ストーリーアコーディオン */
dl.spec-story > dt {
  clear: both;
  font-weight: bold;
  font-size: 1.8rem;
  position: relative;
  padding: 3px 3px 10px;
  margin: 40px 0 10px 0;
}

dl.spec-story > dt::before {
    content: "";
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    mix-blend-mode: screen;
    border-bottom: 2px solid #ffffff35;
}

.story-inner {
  font-size: 1.4rem;
  height: 4.5em;
  line-height: 1.5;
  overflow: hidden;
}

/* 開いた状態のときの設定 */
.story-inner.is-open {
  -webkit-line-clamp: unset !important;
  display: block !important;
}

/* 続きを読むボタン */
.read-more-btn {
  display: block;
  margin: 10px auto 0;
  padding: .4rem 1.5rem;
  background: #00000050;
  color: #fff;
  border: none;
  border-radius: .3rem;
  cursor: pointer;
  font-size: 0.8em;
  width:150px;
}



/* 補足アコーディオン全体の枠 */
.acotext-unit {
  border: none; /* デフォルトの枠があれば消す */
}

/* 補足アコーディオン */

.acottl {
  font-size: 1.6rem;
  cursor: pointer;
  color: #ccc;
  padding: 9px 10px 7px 15px;
  border-radius: 5px;
  margin: 20px 0 10px 0;
  border: 1px solid #ffffff50;
  }


/* 補足の中身（ここをJSでスライドさせる） */
.acotext {
  font-size: 1.4rem;
  overflow: hidden; /* スライド中のハミ出し防止 */
  display: none;    /* JSで制御するので最初は隠しておく */
  padding: 10px;    /* 余白はお好みで */
}

/* detailsが開いているとき、中身を表示状態に保つ */
.acotext-unit[open] .acotext {
  display: block;
}


/* 性格 */
.p-ttl {
    font-size: 1.6rem;
    display: block;
    margin-top: 25px;
}
.p-content {
    font-size: 1.4rem;
    display: block;
}


/* 関係 */
.relation {
    margin: 10px 0;
}

.relation-name {
    color: #fff;
    margin-bottom: 0px;
    cursor: pointer;
}

.relation-detail {
    margin-top: 5px;
    padding: 0 15px;
    font-size: 1.4rem;
    line-height: 1.5;
    margin-bottom: 15px;
    display: none; /* JSで開くので最初は隠す（open属性がない時） */
    overflow: hidden; /* スライドを綺麗に見せる */
}

/* detailsにopen属性がついている時は表示状態を維持 */
.relation[open] .relation-detail {
    display: block;
}


/* その他 */
.box {
  font-size:1.4rem;
  border: 1px solid #555;
  border-radius: 5px;
  background: rgb(0, 0, 0, 0.2);
  padding: 10px;
  margin: 10px;
  line-height: 150%;
  color: #999;
}


/* ---------------------------------------------- */



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
.content {padding: 20px 50px 50px;}
}

/*834px以下*/
@media screen and (max-width: 834px){

.content {padding: 20px 30px 50px;}

h1 {font-size: 2rem;}
h2 {
  font-size: 1.8rem;
  padding: 6px 10px;
  border-radius: 3px;
  margin: 20px 0 10px 0;
}

p.copy {text-align: left;}


dl.spec, dl.spec-other {
    padding: 3rem 0rem 3rem 0rem;
    font-size: 1.2rem;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-collapse: separate;
    border-spacing: 1rem;
    flex-direction: column-reverse;
    align-content: center;
}

dl.spec-other {
    border-top: 1px solid #cccccc50;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.character-face {margin: 0 auto 2rem;}
.character-data {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.acottl {font-size: 1.4rem;}
.relation-name {font-size: 1.6rem;}
.box {
  font-size: 1.2rem;
  line-height: 1.7;
}


}




/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
.content {padding: 20px 10px 50px;}
  
dl.spec dt.name {width: 10rem;}
dl.spec dd.name,
dl.spec dd, dl.spec-other dd {
    width: calc(100% - 10.5rem);
    margin-left: 0;
    margin-right: 0;
}

dl.spec dt, dl.spec-other dt {margin-right: 0.5rem;}

.view {
  width: auto;
  max-width: 140px;
  margin: auto;
  float: right;
  display: block;
}

}