@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
*/


/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.container {
    padding-left: 0 !important;
}

html {
    scrollbar-width: none;
    background-color: #FFF;
}

body {
	font-family: "M PLUS 1p", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;

	overflow-x: hidden;
	user-select:none;
	-moz-user-select:none;
	-webkit-user-select:none;
  -khtml-user-select:none;
  line-height: 1.5;
}
.is-layout-flex {	gap: 0rem; }





/* *** 共通設定 *** */
.article p, .wp-block-table th, .wp-block-table td {
  font-size: clamp(0.75rem, calc(0.4rem + 0.65vw), 0.9rem);
  line-height: 1.3;
}
.article p {
	padding: 5px 10px 5px 5px;
	margin: 0px;
}

.article h2 {
	clip-path: polygon(15px 0, calc(100% - 6px) 0, 100% 25%, calc(100% - 15px) 100%, 6px 100%, 0 75%);
	padding: 6px 20px;
	background-color: #000;
	color: #FFF;
	margin: 20px auto 10px;
	font-size: clamp(0.9rem, calc(0.8rem + 0.6vw), 1.2rem);
}

.article h3 {
	clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px);
	border:0;
	padding: 5px 15px;
	background-color: #333;
	color: #FFF;
	align-items: center;
	margin: 20px auto 10px;
	font-size: clamp(0.7rem, calc(0.6rem + 0.5vw), 1.1rem);
}

.article h4 {
	border: 0;
	border-bottom: solid 2px #000000;
	padding: 20px 5px 5px;
	margin: 10px auto;
	font-size: clamp(0.8rem, calc(0.5rem + 0.65vw), 1rem);
	align-items: flex-end;
}

.article h4.charaTitle {
	margin: 25px auto 10px;
}

.article h4 img {
	margin: 0 5px 0 0;
}

.article h5 {
	border: 0;
	border-bottom: dashed 1px #000000;
	padding: 15px 5px 2px;
	margin: 10px auto 5px;
	font-size: clamp(0.8rem, calc(0.5rem + 0.65vw), 1rem);
	display: flex;
	align-items: flex-end;
}

.article h5 span { /* キャラ情報で使用する＜＞部分 */
	color: #FFF;
	clip-path: polygon(5px 0, calc(100% - 5px) 0%, 100% 50%, calc(100% - 5px) 100%, 5px 100%, 0 50%);
	padding: 2px 7px;
	background-color: #000;
	margin-right: 5px;
	font-size: clamp(0.6rem, calc(0.5rem + 0.65vw), 0.8rem);
}

.article h6 {
	border: 0;
	border-bottom: dashed 1px #000000;
	padding: 5px 5px 2px;
	margin: 10px auto 5px;
	font-size: clamp(0.8rem, calc(0.5rem + 0.65vw), 1rem);
	display: flex;
	align-items: flex-end;
}

/* テーブル共通 */
.wp-block-table th {
	background-color:#000000;
	color:#ffffff;
}

.wp-block-table td {
	border: solid 1px #000000;
	background-color:#ffffff;
}

.widget-entry-card { 
	font-size: clamp(0.6rem, calc(0.5rem + 0.65vw), 0.8rem);
}

.header-container { display: none; }
.content { margin-top: 0; }
footer { display: none; }
.under-entry-content { display: none; }
.entry-title { display: none; }
.article p { margin-bottom: 0; }
.entry-content { margin: 0; }
.body .article { margin: 0; }
.date-tags { margin: 0; }
.entry-content>* { line-height: 1em; }
.main {
    padding: 0px 0px;
    border: none;
    border-radius: unset;
}

.card-bg {
  padding: 5px!important;
  line-height: 1.3!important;
  margin-bottom: 4px!important;
	border-radius: unset!important;
  border: unset!important;
	position: relative;
  background-color: #000;
  clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
	&::after {
	  display: block;
	  background-color: #FFF;
	  position: absolute;
		content: '';
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    z-index: -1;
	    clip-path: polygon(2px 10px, 10px 2px, calc(100% - 10px) 2px, calc(100% - 2px) 10px, calc(100% - 2px) calc(100% - 17px), calc(100% - 14px) calc(100% - 5px), 12px calc(100% - 5px), 2px calc(100% - 14px))
	}
}


.card-title {
	margin-bottom:15px;
}

/* タブ背景 */
.tab-com {
  position: relative;
	color: #FFF;
  background-color: #bbb;
  padding: 3px 20px;
  clip-path: polygon(0 5px, 5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px));
	&::after {
	  display: block;
	  position: absolute;
	  padding: 3px 20px;
		content: '';
	  top: 1px;
	  bottom: 1px;
	  left: 1px;
	  right: 1px;
	  z-index: -1;
	  clip-path: polygon(1px 4px, 4px 1px, calc(100% - 4px) 1px, calc(100% - 1px) 4px, calc(100% - 1px) calc(100% - 4px), calc(100% - 4px) calc(100% - 1px), 4px calc(100% - 1px), 1px calc(100% - 4px))
	}
}

/* カテゴリタグ */
.tab19::after { background-color: #f7ae40; }
.tab15::after { background-color: #cbd523; }
.tab18::after { background-color: #cf31d9; }
.tab16::after { background-color: #46db80; }
.tab17::after { background-color: #4654db; }
.tab20::after { background-color: #dd0e0e; }
.tab22::after { background-color: #00a2de; }
.tab21::after { background-color: #17942f; }

/* サムネイルサイズ */
.card-thumb img {
  aspect-ratio: unset;
  object-fit: unset;
}
.widget-entry-cards figure {
  width: 40%;
	margin-right: 14px;
  float: left;
}

.wrap {
  width: 100%;
}
.container {
	background-color: #fff !important;
	padding-right: 3px;
}

.grecaptcha-badge { visibility: hidden; }
main.main, div.sidebar { padding: 0px 0px; }

.news-fream {
	width: 100%;
  height: auto;
  box-sizing: border-box;
  border-style: solid!important;
  border-image: url(https://aws-prd-wp.kin-gtr.com/wp-content/uploads/frame2.png) 11 11 15 11 fill / 11px 11px 15px 11px!important;
	padding: 1.5% 1.5% 2% 1.5%!important;
}

.widget-entry-cards .a-wrap {
	margin-bottom: 8px;
}

.back-button-area {
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.8);
  width: 100%;
}
#back-button {
	background-color: transparent;
  border: none;
	width: 16vw;
}

.entry-content>*,.mce-content-body>*,.article p,.demo .entry-content p,.article dl,.article ul,.article ol,.article blockquote,.article pre,.article table,.article .toc,.body .article,.body .column-wrap,.body .new-entry-cards,.body .popular-entry-cards,.body .navi-entry-cards,.body .box-menus,.body .ranking-item,.body .rss-entry-cards,.body .widget,.body .author-box,.body .blogcard-wrap,.body .login-user-only,.body .information-box,.body .question-box,.body .alert-box,.body .information,.body .question,.body .alert,.body .memo-box,.body .comment-box,.body .common-icon-box,.body .blank-box,.body .button-block,.body .micro-bottom,.body .caption-box,.body .tab-caption-box,.body .label-box,.body .toggle-wrap,.body .wp-block-image,.body .booklink-box,.body .kaerebalink-box,.body .tomarebalink-box,.body .product-item-box,.body .speech-wrap,.body .wp-block-categories,.body .wp-block-archives,.body .wp-block-archives-dropdown,.body .wp-block-calendar,.body .ad-area,.body .wp-block-gallery,.body .wp-block-audio,.body .wp-block-cover,.body .wp-block-file,.body .wp-block-media-text,.body .wp-block-video,.body .wp-block-buttons,.body .wp-block-columns,.body .wp-block-separator,.body .components-placeholder,.body .wp-block-search,.body .wp-block-social-links,.body .timeline-box,.body .blogcard-type,.body .btn-wrap,.body .btn-wrap a,.body .block-box,.body .wp-block-embed,.body .wp-block-group,.body .wp-block-table,.body .scrollable-table,.body .wp-block-separator,.body .wp-block,.body .video-container,.comment-area,.related-entries,.pager-post-navi,.comment-respond {
  margin-bottom: 0;
}

/* 投稿詳細のタイトル表示部分 */
.post-title-area {
  margin: 10px auto;
}
.post-title-area figure {
  width: 40%;
  margin-right: 14px;
  float: left;
}
.post-title-text-area {}
.post-title-text-area img {
  vertical-align: top;
}
.post-title-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 10px;
  margin-bottom: 14px;
}

.post-title-info-img {
	white-space: nowrap;
}

.post-title-info-date {
  font-size: 14px;
  width: 50%;
  text-align: right;
}
.post-title-text {
  font-size: 16px;
  line-height: 20px;
}
.post-title-hr {
  border-top: 2px solid #000;
  margin-bottom: 10px;
}



.wp-container-content-1 {

}

/* キャラ情報テーブル */
.chara-info table {
	margin-right: 0;
}

.chara-info table, .chara-info td{
  border: none;
}

.chara-info table th {
	font-size: clamp(0.6rem, calc(0.5rem + 0.65vw), 0.8rem);

	width : 20%;
	background-color:#6f6f6f;
	color:#ffffff;
	white-space: nowrap;
  line-height: 10px;
}

.chara-info table td {0
/*	font-size: clamp(0.9rem, calc(0.5rem + 0.65vw), 1rem);*/
	font-size: clamp(0.75rem, calc(0.4rem + 0.55vw), 0.85rem);

	width : 30%;
	border-bottom: solid 1px #6f6f6f;
	background-color:#ffffff;
	text-align : right;
	line-height: 10px;
}

.chara-info div {
 margin:0;
}


/* キャラ情報テーブルのキャプション */
.chara-info .wp-element-caption {
	font-size: clamp(0.6rem, calc(0.5rem + 0.65vw), 0.8rem);
}

.wp-container-content-1.chara-stat{
	padding-left:10px;
	width: 40%;
	flex-basis: 400px;
}

.chara-stat img {
	min-width: 60px;
	padding-right: 10px;
}

.info-img {
	width: 45%;
}

/*
 .info-img img {
	min-width: 1vw;
	padding-bottom:10px;
}
*/

.wp-block-image.alignfull.info-img img,
.wp-block-image.alignwide.info-img img
 {
	min-width: 1vw;
	max-width: 40vw;
	padding-bottom:10px;
}

/* アイテム用テーブル */
.item_info {
	border: solid 1px #cccccc;
	margin: 5px 10px;
    background: #ffffff;

}

.item_info table {
   background: #ffffff;


}

.item_info th {
	background: #cdcdcd;
	border: none;
	padding: 5px;
	min-width:  14vw;
}

.item_info td {
	border: none;
	background: #ffffff;

}

/* アイテム用テーブル(リスト) */
.item_info_list {
	margin: 5px 10px;
	background: #ffffff;
}

.item_info_list table {
	background: #ffffff;
}

.item_info_list table td:nth-child(odd) {
	background: #cdcdcd;
	border:solid 1px #ffffff;
	padding: 5px;
	min-width:  14vw;
	text-align: center;
}

.item_info_list table td:nth-child(even) {
	width:  90%;
	border: solid 1px #cccccc;
	background: #ffffff;
}


/* アイテム用ステータス */
.item-stat {
	margin: auto 10px;
}

.item-stat table, .item-stat td{
  border: none;
}

.item-stat table th {
	width: 12vw;
	font-size: clamp(0.6rem, calc(0.5rem + 0.65vw), 0.8rem);
	background-color:#6f6f6f;
	color:#ffffff;
	white-space: nowrap;
	line-height: 10px;
}

.item-stat table td {
	width: 12vw;
	font-size: clamp(0.6rem, calc(0.5rem + 0.65vw), 0.8rem);
	border-bottom: solid 1px #6f6f6f;
	background-color:#ffffff;
	text-align : right;
	line-height: 10px;
}
.item-stat .wp-element-caption {
	font-size: clamp(0.6rem, calc(0.5rem + 0.65vw), 0.8rem);
}



/* キャラ一覧用 */

figure.wp-block-table.chara-list table {
 max-width: 96vw;
}

.chara-list table td:nth-child(even) {
 width : 33vw;
}

.chara-list table td:nth-child(odd) {
 width: 15vw;
 text-align: center; 
}


/* リング効果一覧用 */

figure.wp-block-table.ring-list table {
 width: 80vw;
}

.ring-list table td:nth-child(even) {
 width: 32vm;
}
.ring-list table td:nth-child(odd) {
  width: 48vm;
}

/* アコーディオン用 */

.toggle-box .toggle-button {
 background-color: #efefef;
 font-size: clamp(0.75rem, calc(0.4rem + 0.65vw), 0.9rem);
 text-align: left;
}


/* アイテム名と個数を揃えるテーブル */
.item_tbl  tr:nth-child(odd) {
background-color: transparent;
}
.item_tbl  td {
background-color: transparent;
padding : 0px 6px;
}

/* 特効系キャラリストの行追加を維持するため、1行目に結合なしのtd追加 */
.chara-list table tr:nth-child(1), .chara-list table tr:nth-child(1) td {
 padding: 0;
 border: none;
 background-color: transparent;
}

/* 横並びで幅を確保する */
.wp-block-group-is-layout-flex {
margin:10px;
gap:10px;
}

.item_info {
flex:1;
}


/************************************
** タブ
************************************/
.tab-content-group {
	padding:0.5em;
		background-color:#ffffff;
}
.tab-label-group .tab-label {
	padding : 0.1em 1em;
	font-size: clamp(0.75rem, calc(0.4rem + 0.65vw), 0.9rem);
}

/************************************
** バースデーリボン
************************************/
.hbbox-rbn {
	clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 50%, 100% 100%, 0 100%, 20px 50%);
	text-align: center;
	background: linear-gradient(90deg, #9c0209 0%, #c80002 50%, #9c0209 90% 100%);
	color:#ffffff;
	margin: 0 20px;
	padding: 0 5px;
}

.hbbox-rbn p {
	padding: 1px 0 !important; 
}

.hbbox-txt {
	display: inline-block;
	margin:0 auto 0;
	padding:0;
	background: linear-gradient(45deg, #dabf15 0%, #fed100 45%, #fff597 70%, #fed100 80%, #dabf15 90% 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/************************************
** ヘッダサムネイル画像
************************************/
.image-container {
  display: inline-block;
  position: relative;
  border-radius: 10px; /* 角丸の半径を指定 */
}

.image-container img {
  display: block;
  border-radius: 10px; /* 角丸の半径を画像に適用 */
}
.image-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px; /* 角丸の半径を指定 */
  border: 2px solid #000; /* 枠線の太さと色を指定 */
  box-sizing: border-box;
}


/************************************
** ガチャタブ表示部分
************************************/
.tab{
  position: fixed;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
}
.area {
  display: none;
  opacity: 0;
}
.area.is-active {
  display: block;
  animation-name: displayAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes displayAnime{
  from { opacity: 0; }
  to { opacity: 1; }
}
.gacha-tab-area {
  display: flex;
  position: sticky;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  flex-wrap: unset;
  padding-left: 0!important;
  list-style-type: none;
}
.gacha-tab-area li {
  margin: 0!important;
}

/************************************
** FAQ
************************************/
.ewd-ufaq-post-margin { margin: 15px auto 0; }
.ewd-ufaq-post-margin-symbol { display: none; }
.ewd-ufaq-faq-category {
	position: relative;
	margin-bottom: 5px !important;
}
.ewd-ufaq-faq-category-title { position: relative; }
.ewd-ufaq-faq-category-title h3 {
  font-size: 14px;
  color: #FFF;
  padding: 16px 25px;
	margin: 5px auto;
  background-color: #000;
  clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 
  calc(100% - 10px));
  &::after {
    display: block;
    background-color: #4d4d4d;
	  position: absolute;
	  content: '';
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  z-index: -1;
	  clip-path: polygon(3px 10px, 10px 3px, calc(100% - 10px) 3px, calc(100% - 3px) 10px, calc(100% - 3px) calc(100% - 16px), calc(100% - 10px) calc(100% - 7px), 10px calc(100% - 7px), 3px calc(100% - 16px))
  }
}
.ewd-ufaq-faq-category-title::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%) rotate(-90deg);
  width: 24px;
  height: 16px;
  background: url('https://aws-prd-wp.kin-gtr.com/wp-content/uploads/23613d2c989478dbac8bdc2aabc8a3a3.png') no-repeat center center;
  background-size: contain; /* 画像のサイズを調整 */
  transition: transform 0.3s ease; /* スムーズな回転を実現 */
}
.ewd-ufaq-faq-category-title.rotated::after {
  transform: translateY(-50%) rotate(0);
}

.ewd-ufaq-categories-bg {
  position: absolute;
  top: 0;
  right: 7px;
  width: 87px;
}

.ewd-ufaq-faq-title-text {
  position: relative;
  width: 98% !important;
  float: right !important;
}
.ewd-ufaq-faq-title-text h4 {
  font-size: 14px;
  color: #000;
  display: flex !important;
  align-items: flex-start;
  margin: 0 !important;
  padding: 12px 45px 16px 25px;
  background-color: #000;
  clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 
  calc(100% - 10px));
  position: relative;
  z-index: 1;
}
.ewd-ufaq-faq-title-text h4::after {
  color: #000;
  display: block;
  background-color: #FFF;
  position: absolute;
  content: '';
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  clip-path: polygon(2px 10px, 10px 2px, calc(100% - 10px) 2px, calc(100% - 2px) 10px, calc(100% - 2px) calc(100% - 15px), calc(100% - 10px) calc(100% - 6px), 10px calc(100% - 6px), 2px calc(100% - 15px))
}

.ewd-ufaq-faq-title-text h4::before {
  content: "◆ "; /* 挿入するシンボルとスペース */
  color: #000; /* シンボルの色を指定（オプション） */
  margin-right: 5px; /* テキストとの間に余白を追加（オプション） */
}

.ewd-ufaq-faq-title-text::after {
  content: '';
  position: absolute;
  top: 45%;
  right: 20px;
  width: 24px;
  height: 16px;
  background: url('https://aws-prd-wp.kin-gtr.com/wp-content/uploads/e5bd2c30808c6720a02935f47e13c97f.png') no-repeat center center;
  background-size: contain;
  transition: transform 0.3s ease;
  transform: translateY(-50%)  rotate(-90deg);
	z-index: 1;
}
.ewd-ufaq-faq-title-text.rotated::after {
  transform: translateY(-50%) rotate(0);
}
.ewd-ufaq-faq-body {
  padding: 0 !important;
  margin: auto 0 auto auto;
  margin-top: -10px;
  width: 98%;
  background-color: #e7e7e7;
  border: solid 1px #bfbfbf;
}

.ewd-ufaq-faq-post p {
  font-size: 11px !important;
  line-height: 20px !important;
  word-break: auto-phrase;
}

.ewd-ufaq-faq-category-inner {
	margin-bottom: 10px !important;
}
.wpcf7-not-valid-tip {
	color: #dcd032;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}