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










/****************************************************
 * 共通｜アコーディオン（単体）
 ****************************************************/

.accordionSingle {
	max-width: 100%;
	margin: 0 auto 1.8em;
}
.accordionSingle-item {
	margin-bottom: 12px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
	background: #f7fafd;
	overflow: hidden;
	transition: box-shadow 0.3s ease;
}
.accordionSingle-item:hover {
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.accordionSingle-detail {
	width: 100%;
	transition: all 0.3s ease;
	background: transparent;
}
.accordionSingle-question {
	list-style: none;
	cursor: pointer;
	padding: 20px;
	position: relative;
	font-size: 17px;
	font-weight: 600;
	color: #2f3e4d;
	background-color: transparent;
}
.accordionSingle-question::after {
	content: "+";
	position: absolute;
	right: 20px;
	top: 20px;
	font-size: 20px;
	color: #5c738a;
	transition: transform 0.3s ease;
}
.accordionSingle-detail[open] .accordionSingle-question {
	border-bottom: 1px solid #c3d2e0;
}
.accordionSingle-detail[open] .accordionSingle-question::after {
	content: "−";
	transform: rotate(0deg);
}
.accordionSingle-answer {
	max-height: 0;
	overflow: hidden;
	padding: 0 20px;
	color: #4a4a4a;
	font-size: 15px;
	line-height: 1.6;
	background-color: #ffffff;
	transition: max-height 0.4s ease, padding 0.4s ease;
}
.accordionSingle-answer b {
	color: #0077CC;
}
.accordionSingle-answer ul,
.accordionSingle-answer ol,
.accordionSingle-answer table {
	margin-bottom: 0;
}
.accordionSingle-detail[open] .accordionSingle-answer {
	max-height: 100%;
	padding: 20px;
}
/* ▼ レスポンシブ調整 */
@media screen and (max-width: 600px) {
	.accordionSingle-question {
		font-size: 16px;
		padding: 18px 30px 16px 60px;
	}
	.accordionSingle-question::before {
		left: 12px;
		top: 16px;
		font-size: 14px;
		padding: 3px 8px;
	}
	.accordionSingle-question::after {
		right: 10px;
		top: 16px;
		font-size: 18px;
	}
	.accordionSingle-answer {
		font-size: 14px;
		padding: 0 16px;
	}
	.accordionSingle-detail[open] .accordionSingle-answer {
		padding: 16px;
	}
}















.comment .avatar {
/* 	width: auto!important; */
/* 	height: auto!important!; */
	width: 55px!important;
	height: 55px!important!;
}




caption {
	color: #FFF;
	background: var(--skin-grayish-site-sub-color);
	font-weight: bold;
	padding: .5em 0;
}



.affiliateTitle {
	font-size: 90%;
	text-align: center;
	margin-bottom: -4em;
}
@media screen and (min-width: 768px) {
	.affiliateTitle {
		text-align: right;
	}
}
.affiliateTitle::before {
	font-family: 'Font Awesome 5 Free';
	font-weight: bold;
	content: "\f05a";
	display: inline-block;
	padding-left: 7px;
}
.affiliateFirstHeader {
	position: relative;
	text-align: center;
	padding: 1.5em;
	background-image: repeating-linear-gradient(
		-45deg, 							/* ストライプ柄の角度 */
		#FAFAFA 0, #FAFAFA 2px,				/* ストライプの色1 */
		transparent 2px, transparent 4px	/* ストライプの色2 */
  );
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100%;
}
.affiliateFirstHeader:before,
.affiliateFirstHeader:after {
	position: absolute;
	content: "";
	border-color: var(--color_main);
	width: 2.25em;
	height: 2em;
	display: inline-block;
	box-sizing: border-box;
}
.affiliateFirstHeader:before {
	top: 0;
	left: 0;
	border-top: 1px solid;
	border-left: 1px solid;
}
.affiliateFirstHeader:after {
	right: 0;
	bottom: 0;
	border-right: 1px solid;
	border-bottom: 1px solid;
}
.affiliateFirstHeader-title:before {
	font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    content: "\f05a";
	padding-right: 7px;
}








.article h2,
.article h3,
.article h4 {
	margin-bottom: 1em;
}


mark {
	background: linear-gradient(transparent 60%, #C4DCEC 0%);
	font-weight: bold;
}




.related {
	text-decoration: none;
}
.related::before {
	content: "関連";
	color: #FFF;
	background: var(--skin-grayish-site-main-hover);
	padding: .3em .7em;
	margin-right: .7em;
}


.buttonShiny {
	display: block;
	position: relative;
	padding: 1em 1.5em;
	background: linear-gradient(to bottom right, #CE9FFC, #7367F0);
	box-shadow: 0 3px 0 0 #594DD6;
	border-radius: 50px;
	margin:30px auto;
	font-weight: bold;
	font-size: 16px;
	max-width:500px;
	color: #FFF;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
	transition: 300ms;
}
.buttonShiny::before {
	position: absolute;
	content: '';
	display: inline-block;
	top: -180px;
	left: 0;
	width: 30px;
	height: 100%;
	background-color: #B5E7FF;
	transition: 300ms;
	animation: shinyshiny 2.5s ease-in-out infinite;
}
.buttonShiny:hover {
	text-decoration: none;
	color: #FFF;
	box-shadow: none;
	-webkit-transform: translateY(3px);
}
@-webkit-keyframes shinyshiny {
	0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
	80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
	100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}








table td {
	text-align: center;
}
table .td-left {
	text-align: left;
}
table ul {
	margin-bottom: 0!important;
	padding-left: 20px!important;
	text-align: left;
}



/****************************************************
 * Google AdSense
 ****************************************************/

/* 記事下 */
.adsenseUnder p,
.adsenseUnder br {
	display: none;
}
.adsenseUnder-title {
	font-size: 80%;
	text-align: center;
}
.adsenseUnder-list {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: 1em;
}




/* テキスト（三原色） */
.textR,
.textG,
.textB {
	font-weight:bold;
}
.textR { color:red; }
.textG { color:green; }
.textB { color:blue; }

/* テキスト（点滅） */
.flash,
.flash-L,
.flash-R {
	animation: flashing 1s ease-in-out infinite alternate;
	color: #E6A014;
	font-weight: bold;
}
.flash-L { margin-left: 3px; }
.flash-R { margin-right: 3px; }
@keyframes flashing {
	0%		{opacity: 0;}
	100%	{opacity: 1;}
}

img {
	width: 100%;
}


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

.accordion {
	width: 100%;
	background-color: #E5F4FC;
	margin-bottom: 3em;
}
.accordion:not([open]) {
	margin-bottom: 3em;
}
.accordion summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding: 1em 2em;
	border-radius: 5px;
	background-color: #88ABDA;
	color: #FFF;
	font-weight: 600;
	cursor: pointer;
}
.accordion summary::-webkit-details-marker {
	display: none;
}
.accordion summary::before,
.accordion summary::after {
	width: 3px;
	height: .9em;
	border-radius: 5px;
	background-color: #FFF;
	content: '';
}
.accordion summary::before {
	position: absolute;
	right: 2em;
	rotate: 90deg;
}
.accordion summary::after {
	transition: rotate .3s;
}
.accordion[open] summary::after {
	rotate: 90deg;
}
.accordion p {
	transform: translateY(-10px);
	opacity: 0;
	margin: 0;
	padding: 1em 2em;
	color: #69788A;
	transition: transform .5s, opacity .5s;
}
.accordion[open] p {
	transform: none;
	opacity: 1;
}










.boxGray {
	background-color: #F5F5F5;
	padding: 1em;
}
.boxGray-title {
	font-weight: bold;
}
.boxGray-title::before {
	content: '✔ ';
	color: #88ABDA;
	font-size: 1.2em;
}
.boxGray ul,
.boxGray ol {
	margin-bottom: 0!important;
}
.boxGray li a {
	color: #6FB6C3;
	font-weight: bold;
	transition: all .3s;
}
.boxGray li a:hover {
	color: #A3EAF7;
}
.boxGray p {
	margin-bottom: 0!important;
}





 /* 関連記事 */
.related {
	color: #0044CC;
	font-weight: 500;
	text-decoration: none;
	transition: all .3s;
}
.related::before {
	content: "関連";
	color: #FFF;
	background: var(--skin-grayish-site-main-hover);
	padding: .3em .7em;
	margin-right: .7em;
}


 /* 参照サイトのリスト */
.referenceList::before {
	content: "参照サイト";
	margin-left: -1.8em;
	font-size: 90%;
}
.referenceList li a {
	font-size: 80%;
	font-style: italic;
	text-decoration: none;
}





/****************************************************
 * ぬぉーまん
 ****************************************************/

html {
	scroll-behavior: smooth; /* スムーススクロール */
}

/* スマホでの改行 */
@media screen and (min-width: 768px){
	.br-sp { display: none;}
}

/* 画像リンクのホバー設定 */
a img {
	transition-duration: 0.5s;
}
a img:hover {
	transition-duration: 0.5s;
	opacity: 0.7;
}




/************************************
 * ボックス関連
 ************************************/

/* リスト用 */
.box-list {
	border: 1px solid #77A8DB;
	padding: 1rem 1rem 1rem 3rem;
	font-size: 0.8em;
}
/* リスト用（タイトル付き） */
.box-list-memo {
	border: 1px solid #77A8DB;
	padding: 1rem;
	margin-bottom: 1.8em;
}
@media print, screen and (min-width: 768px) {
	.box-list-memo {
		padding: 1rem 2rem;
	}
}
.box-list-memo-title{
	color: #88ABDA;
	font-size: 100%;
	font-weight: bold;
}
.box-list-memo-title:before {
	font-family: "Font Awesome 5 Free";
	content: "\f304";
	font-size: 100%;
	margin-right: 0.5rem;
}
.box-list-memo ul,
.box-list-memo ol{
	margin-bottom: 0;
	padding-left: 2rem;
	font-size: 90%;
}

/* メモ付きのボックス */
.box-memo {
	margin: 1em 0;
	background-color: #DDEEEE;
	padding: 1em;
}
.box-memo-title{
	color: #88ABDA;
	font-size: 100%;
	font-weight: bold;
}
.box-memo-title:before {
	font-family: "Font Awesome 5 Free";
	content: "\f304";
	font-size: 100%;
	margin-right: 0.5rem;
}
.box-memo p {
	font-size: 90%;
	margin: 0;
	padding: 0;
}
.box-memo ul,
.box-memo ol{
	margin-bottom: 0;
	font-size: 90%;
}

/* インフォメーション */
.box-information {
	margin: 1em 0;
	background-color: #FFF7CC;
	padding: 1em;
}
.box-information-title{
	color: #CBA31A;
	font-size: 100%;
	font-weight: bold;
}
.box-information-title:before {
	font-family: "Font Awesome 5 Free";
	content: "\f05a";
	font-size: 100%;
	margin-right: 0.5rem;
}
.box-information p {
	font-size: 90%;
	margin: 0;
	padding: 0;
}
.box-information ul,
.box-information ol {
	margin-bottom: 0;
	font-size: 90%;
}

/* 注意喚起 */
.box-attention {
	margin: 1em 0;
	background-color: #FDF2F2;
	padding: 1em;
}
.box-attention-title{
	color: #F3ACA9;
	font-size: 100%;
	font-weight: bold;
}
.box-attention-title:before {
	font-family: "Font Awesome 5 Free";
	content: "\f071";
	font-size: 100%;
	margin-right: 0.5rem;
}
.box-attention p {
	font-size: 90%;
	margin: 0;
	padding: 0;
}
.box-attention ul,
.box-attention ol {
	margin-bottom: 0;
	font-size: 90%;
}

/* 背景ありの単純なやつ */
.box-background {
	border: 1px solid #BCC4CB;
	background-color: #F0F0F0;
	padding: 1rem;
	font-size: 0.8em;
}









/****************************************************
 * 公開求人用のデザイン
 ****************************************************/

/*===============================
	ライブラリ描画 - 完成形 (gap: 12px)
===============================*/

/* 基本設定 */
.rkf-wrapper {
	/* 	font-family: "Helvetica Neue", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; */
	line-height: 1.6;
}

.rkf-filters {
	background-color: #fff;
	border: 1px solid #ddd;
	padding: 20px;
	border-radius: 8px;
	margin-bottom: 24px;
}

/* ブロック */
.rkf-block {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.rkf-block p {
	display: none;
}

.rkf-block-title {
	font-weight: bold;
	margin-bottom: 1em;
	color: #333;
	border-left: 4px solid #0073aa;
	padding-left: .7em;
	font-size: 120%;
}

/* オプション列 */
.rkf-block-options {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-left: 0;
	margin-right: 0;
}

.rkf-block-options br {
	display: none;
}

/* ラベル単位 */
.rkf-label {
	flex: 0 0 calc((100% - 36px) / 4); /* gap12px x 3 */
	box-sizing: border-box;
}

@media screen and (max-width: 768px) {
	.rkf-label {
		flex: 0 0 calc((100% - 24px) / 3); /* gap12px x 2 */
	}
}

.rkf-label input[type="checkbox"] {
	display: none;
}

.rkf-label span {
	display: block;
	text-align: center;
	padding: 8px 0;
	border: 1px solid #ccc;
	border-radius: 10px;
	background-color: #fff;
	cursor: pointer;
	transition: all 0.2s;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	font-size: 100%;
	font-weight: bold;
}
@media screen and (max-width: 768px) {
	.rkf-label span {
		font-size: 80%;
	}
}

.rkf-label input[type="checkbox"]:checked + span {
	background-color: #0073aa;
	color: #fff;
	border-color: #0073aa;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.rkf-label span:hover {
	background-color: #f0f8ff;
}

.rkf-reset-btn {
	width: 100%;
	background-color: #ef5350;
	color: #fff;
	padding: 12px 16px;
	border: none;
	border-radius: 6px;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.2s;
	margin-top: 16px;
	font-size: 15px;
	box-sizing: border-box;
}

.rkf-reset-btn:hover {
	background-color: #d32f2f;
}

/*===============================
	オペレータ表示
===============================*/

.rkf-match-group {
	margin-bottom: 24px;
}

.rkf-match-group-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: flex-start;
}

.rkf-character {
	margin-bottom: 8px;
	background-color: #101010;
	position: relative;
	width: calc((100% - 84px) / 8); /* 8列, gap 12px x 7 */
}

.rkf-match-group.is-five-star .rkf-character {
	width: calc((100% - 36px) / 4); /* 4列, gap 12px x 3 */
}

@media screen and (max-width: 768px) {
	.rkf-match-group .rkf-character {
		width: calc((100% - 36px) / 4); /* 4列, gap 12px x 3 */
	}
	.rkf-match-group.is-five-star .rkf-character {
		width: calc((100% - 12px) / 2); /* 2列, gap 12px x 1 */
	}
}

.rkf-character img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}

.rkf-match-title {
	display: block;
	width: 100%;
	color: #222;
	font-weight: bold;
	background-color: #eef;
	padding: 8px;
	border-radius: 4px;
	margin-bottom: 12px;
}

.rkf-caption {
	color: #FFF;
	background: #101010;
	font-size: 80%;
	font-weight: bold;
	text-align: center;
	margin-top: .5em;
	padding-bottom: .4em;
}

/* レア度★表示 */
.rkf-rarity-stars {
	position: absolute;
	right: 2px;
	bottom: 2px;
	font-size: 7px;
	color: gold;
	text-shadow: 1px 1px 2px #000;
	background: rgba(0, 0, 0, 0.6);
	padding: 1px 3px;
	border-radius: 4px;
	pointer-events: none;
	z-index: 2;
}
/* レア度★表示（★5確定タグ） */
.is-five-star .rkf-rarity-stars {
	right: 5px;
	bottom: calc(25px + .5em); /* rkf-captionのmargin分 */
	font-size: 12px;
}