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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* ログインページ、登録ページではサイドバー非表示 */
.page-id-368 #sidebar,
.page-id-369 #sidebar,
.page-id-394 #sidebar{
	display: none;
}
.page-id-368 #main,
.page-id-369 #main,
.page-id-394 #main{
    margin: 0 auto;
/* 	box-shadow: none; */
/*     width: 80%; */
    float: none; /* 他要素の影響を排除 */
}


/* htmlのフォントサイズを1rem→10pxに変更 */
html {
	font-size: 62.5%;
}
footer{
	position: relative;
}
/* 背景ボディ */
body{
	background-image: url("/media/space-bg.jpeg");
	background-size: 100%;
}

/*480px以下*/
/* スマホ・タブレットで固定背景 */
@media screen and (max-width: 1023px){
	body::before {
		content:"";
		display:block;
		position:fixed;
		top:0;
		left:0;
		z-index:-1;
		width:100%;
		height:100vh;
		background-repeat:no-repeat;
		background-position:50% 100%;
		background-image: url("/media/space-bg-sp.jpeg");
		background-size:cover;
	}
}


.star-area{
	position: fixed;
	top:0;
	left:0;
	width: 100vw; /* 星空の横幅 */
	height: 100vh; /* 星空の縦幅 */
	z-index: -1;
}

/* 星のスタイル */
.twinkle-star{
  position: absolute;
  display: block;
  background-color: #fff; /* 星の色 */
  border-radius: 50%;
  box-shadow: 0 0 4px 2px rgba(#fff, 0.2); /* 星の影 */
  opacity: 0;
  animation: twinkle 5s infinite;
}

/* 星がキラキラ光るアニメーション */
@keyframes twinkle {
  0% {
    opacity: 0;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}
/* recapcha */
.grecaptcha-badge { visibility: hidden; }

/* メイン・サイドバー */
main{
	padding-top: 16px !important;
}
main,
#sidebar{
	background-color: rgba(255,255,255,0.1) !important;
	text-shadow: 1px 1px 2px #000;
	box-shadow: 0 0 5px rgba(255,255,255,.5);
}
/*480px以下*/
@media screen and (max-width: 480px){
	main,
	#sidebar{
		background-color: rgba(255,255,255,0) !important;
		text-shadow: 1px 1px 2px #000;
		box-shadow: 0 0 0 rgba(255,255,255,.5);
	}
}
/* ヘッダー関連 */
.logo-image {
	padding: 0;
}

/* ヘッダー */
#header-container{
	position: sticky;
	top: 0;
	z-index: 100;
}

/* ヘッダー・フッターのバー */
.header-container,
.footer-container{
	background-image: linear-gradient(90deg, rgba(0, 98, 117, 1), rgba(26, 26, 111, 1) 30% 70%, rgba(0, 98, 117, 1));
}




h1.entry-title{
	position:relative;
	padding:0.5em 0;
	border-top:solid 3px #4472C4;
	border-bottom:solid 3px #4472C4;
	border-image: linear-gradient(to right, rgba(0,0,100,0), rgba(70,130,180, 0.7), rgba(0,0,100,0)) 1;
	background: linear-gradient(to right, rgba(0,0,100,0), rgba(70,130,180, 0.7), rgba(0,0,100,0));
	text-align:center;
}

h2.line-title{
	font-size: 1.2em;
	position: relative;
	padding: 0 .25em;
	background-color: rgba(255,255,255,0);
}

h2.line-title::after{
	content: "";
	display: block;
	height: 4px;
	margin-top: .25em;
	background: -webkit-linear-gradient(to right, rgb(150,150,230), transparent);
	background: linear-gradient(to right, rgb(150, 150, 230), transparent);
	box-shadow: 0px 0px 5px #808080;
}

.line-title span{
	font-size: 0.7em;
	margin-left: 1em;
}



/* リンク */
a {
	color: #fff;
		transition: .2s;

}

a:link{
	text-decoration: none;
}

a:hover{
  color: #fff;
  text-shadow: 0 0 10px #fff,0 0 15px #fff;
}

/* パンくずリスト */
.breadcrumb-item>.far,
.breadcrumb-item>.fas{
 	display:none;
}
.breadcrumb,
.breadcrumb a{
	color: #fff !important;
}

/* テーブル */
table,
table th,
table td{
	border-collapse: collapse;
}

table th{
/* 	background-color: #99cfff; */
	background-color: rgba(153,207,255,0.2);
}

table tbody th{
/* 	background-color: #f0f8ff;	 */
/* 	background-color: rgba(240,248,255,0.2); */
	
}

table td{
	background-color: rgba(255,255,255,0.2);
}

/* フッター */
#footer a:not(.sns-button):hover{
	background-color: rgba(0,0,0,0);
}

/* 投稿ページでの背景画像 */
.wp-block-post-content{
	background-color: #fff;
}
/******************** input *********************/
input[type="radio"]{
	background-color: red !important;
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea{
	color: #fff;
	background-color: rgba(0,0,0,.5) !important;
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder{
	color: rgba(255,255,255,.5);
}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px rgba(0,100,100,.5) inset;
  -webkit-text-fill-color: #ffffff;
}


/* Font Awesome */
.fa-icon{
	margin: 0 .5em;
}
/* タッチイベント無効化 */
.event-none{
	pointer-events: none;
}
/******************** プロフィール画像 *********************/
.profile-icon img{
	width: 100%;
	height: 100%;
	max-width: 150px;
	max-height: 150px;
	border-radius: 50%;
	object-fit: cover;
}

.profile-icon.small img{
	width: 100%;
	height: 100%;
	max-width: 1.6em;
	max-height: 1.6em;
	margin-bottom:.2em;
	border-radius: 50%;
	object-fit: cover;
}

/******************** ダイアログエリア *********************/
dialog[open]{
	position: fixed;
	border: none;
	border-radius: 0.5rem;
	top: 50%;
	left: 50%;
	width: 300px;
	padding: 0;
	color: #fff;
	background-color: rgba(200, 200, 200, .5);
	box-shadow: 0 2px 10px rgba(0,0,0,0.3);
	border-radius: 4px;
	transform: translate(-50%, -50%);
	z-index: 1001;
}

dialog .dialog-header{
	font-size: 18px;
	font-weight: bold;
	padding: .25em 1em;
	background-color:rgba(0,100,255,.5);
}
dialog .dialog-content{
	padding: .5em 1em;
	font-size: 16px;
}
dialog .dialog-footer{
	display: flex;
	padding: 0 1em 1em 1em;
	justify-content: space-between;
}

dialog i{
	margin-right: .5em;
	color: #ff0;
}

dialog button{
	font-size: 18px;
	padding: .25em 1em;
}

/* ダイアログの周り */
.dialog-background{
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	margin: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
}

.dialog-area{
	display: none;
}

/******************** ボタンエリア *********************/
button{
	cursor: pointer;
}
/* リストの点を消す */
ul.form-list{
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax(120px,1fr) ) ;
	list-style:none;
	padding: 0;
	justify-items: center;

}

ul.judgement-button-area{
	display: flex; /* フレックスボックスを利用 */
	justify-content: center; /* 横方向の中央配置 */
	align-items: center; /* 縦方向の中央配置 */
	list-style: none; /* liの箇条書きスタイルを削除 */
	padding: 0;
	margin: 0;
	font-size: .7em;
}
ul.judgement-button-area li{
	margin: 1em 2em;
}

.form-radio,
.form-checkbox{
	display: block;
	width: 6em;
	height: 2.2em;
	border-radius: 50px;
	padding: 2px 5px;
	margin: 1px;
	background-color: rgba(128,128,128,0.2);
	text-align: center;
	text-shadow: 1px 1px 5px #000;
	box-shadow: 0px 0px 5px #808080;
	
}
/* 2行のボタン */
.two-line{
	line-height: 1;
}

/* チェックになった時 */
.form-radio:has(input[type=radio]:checked),
.form-checkbox:has(input[type=checkbox]:checked){
	background-color: rgba(90,230,90,0.5);
}

/* inputボタン非表示 */
.form-radio input[type=radio],
.form-checkbox input[type=checkbox]{
	display: none;
}

/******************** 模擬試験のテーブル *********************/
.all-score-table tbody th{
    width: 36%;
}

.all-score-table tbody td:nth-of-type(2){
    width: 30%;
}

.all-score-table td{
    text-align: center;
}

.all-score-table td .small{
    position: absolute;
    bottom: 0;
    right: .5em;
    font-size: 0.7em;
}

.table-title{
	background-color: rgba(50,100,255,.5);
	font-size: 1.1em;
}

/* スコア表 */
.score-table{
	display: none;
	text-align: center;
}

.score-table .score-td{
	position: relative;
}

.score-td span{
	font-size: 1.5em;
}

.score{
	display: inline-block;
	font-size: 4em;
}
.max-score{
	position: absolute;
	right: 0;
	bottom: 0;
	margin-right: .5em;
	font-size: 1.6em;
}

.score-table .elapsed-time{
	width: 50%;
}

.score-table .pass-fail-td{
	height: 200px;
}

/* 合格・不合格スタンプ */
.pass-fail{
    display: flex;
    justify-content: center;
    align-items: center;
}
#passFail{
	display: none;
}

#thisTimeResult{
	display: none;
}

.gold-pass,
.red-pass,
.fail{
	width: 16em;
	height: 8.8em;
	transform: rotate(-5deg);
	overflow:hidden;
}

.gold-pass{
	background: url('/media/svg/gold-pass.svg') center / contain no-repeat;
	filter: drop-shadow(0 0 5px rgba(255,255,255,.5));
}
.red-pass{
	background: url('/media/svg/red-pass.svg') center / contain no-repeat;
	filter: drop-shadow(0 0 5px rgba(0,0,0,.5));
}
.fail{
	height: 9em;
	background: url('/media/svg/fail.svg') center / contain no-repeat;
	filter: drop-shadow(0 0 5px rgba(0,0,0,.5));
}

/* 金合格は光沢を出す */
.gold-pass::before,
.red-pass::before{
		content: "";
		display: block;
		position: absolute;
		background: linear-gradient(to right,rgba(255,255,255,0), rgba(255,255,255,0.9));
		width: 50px;
		height: 50px;
		top: -60px;
		left: -60px;
		animation-name:shine-run;
		animation-delay:0s;
		animation-duration: 10s;
		animation-timing-function: ease-in;
		animation-iteration-count: infinite; 
}

@keyframes shine-run {
	0%{
		transform: scale(0) rotate(50deg);
		opacity: 0;
	}
	30%{
		transform: scale(1) rotate(50deg);
		opacity: 1;
	}
	50%{
		transform: scale(100) rotate(50deg);
		opacity: 0;
	}
	100%{
		transform: scale(100) rotate(50deg);
		opacity: 0;
	}
}


/* 星 */
/* キラキラ部分 */
.star-piece{
	position: absolute;
	display: block;
	width: 15px;
	height: 15px;
	background-image: url('/media/svg/star.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	animation: glitter 1s;
	pointer-events: none;
	filter: drop-shadow(0 0 5px rgba(0,0,0,.5));
	transform: rotate(5deg) !important;
}

/* キラキラが発生するアニメーション */
@keyframes glitter {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}

/******************** 問題一覧へ・次の問題へのボタン *********************/
.move-button,
input[type=submit].move-button{
	/* position: relative;
	display: inline-block;
	font-weight: bold;
	padding: 5px 20px;
	text-decoration: none;
	color: #fff;
	background-color: rgba(0, 188, 212, 0.5);
	transition: .2s;
	text-shadow: 0px 0px 2px #000;
	box-shadow: 0px 0px 5px #808080; */
	width: auto;
	font-size: 1em;
	font-weight: bold;
	padding: .5em 1em;
	color: #fff;
	border: none;
	background-color: rgba(0, 188, 212, 0.5);
	transition: .2s;
}

.move-button:hover {
	box-shadow: 0px 0px 10px #fff;
}

/******************** tipsエリア *********************/
.tips-area{
    position: relative;
    margin: 2em 0;
    padding: 35px 10px 7px;
    border: solid 2px rgba(255,200,0,0.5);
	background-color: rgba(255,200,0,0.2);
	box-shadow: 0px 0px 5px #808080;
}
.tips-title{
    position: absolute;
    display: inline-block;
    top: 0px;
    left: 0px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: rgba(255,200,0,0.5);
    color: #ffffff;
    font-weight: bold;
}
.tips-area p{
	margin-bottom: .5em;
}
/* tipsアイコン */
.fa-lightbulb{
	margin-right: .5em;
	color: #ffff00;
}
/******************** トグルスイッチ *********************/
.toggle-switch{
    display: inline-block;
    position: relative;
    width: 50px;
    height: 26px;
    border-radius: 25px;
    margin-right: 1em;
    border: 2px solid rgba(255,255,255,1);
    background-color: rgba(0,0,0,0.5);
    box-sizing: content-box;
    cursor: pointer;
    transition: border-color .2s,
                background-color .2s;
}

.toggle-switch:has(:checked) {
    background-color: rgba(0, 255, 100, 0.8);

}

.toggle-switch::after {
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background-color: rgba(255,255,255,1);
    content: '';
    transition: left .2s;
}

.toggle-switch:has(:checked)::after {
    left: 25px;
}

.toggle-switch input{
    display: none;
}
/******************** 手書きパッド *********************/
.writing-tr.none{
    position: absolute;
}

.writing-area{
	margin-bottom: 1.4em;
	overflow: hidden;
	width: 100%;
	max-width:100%;
	position:relative;
}
.writing-pad{
	position:relative;
	width: 1000px;
	height: 160px;
	background-color: rgba(0,0,40,0.8);
	box-shadow: 0px 0px 5px #808080;
	cursor: crosshair;
}
/* 手書きパッドクリアボタン */
.writing-clear-button{
    width: 3em;
    height: 3em;
	margin: 0.5em;
	background: url('/media/trash-icon.svg') center no-repeat content-box rgba(0,0,30,0.5);
    background-size: 75%;
    border: none;
    cursor: pointer;
	box-shadow: 0px 0px 5px #808080;
	border-radius:5px;
	transition: 0.2s;
}
.writing-clear-button:hover{
	box-shadow: 0px 0px 10px #fff;
}
.pad-display-switch{
    display: flex;
    align-items: center;
    margin-bottom: 1.4em;
}

/* 手書きパッドの画像化 */
.answer-writing-area{
	background-color: rgba(0,0,40,0.8);
}
/******************** セッティングボタン *********************/
.header-icon{
	display: inline-flex;
	position: absolute;
	align-items: center;
	justify-content: center;
	top: 0;
	width: 3.5em;
	height: 100%;
	text-align: center;
	font-size: 1.2em;
	cursor: pointer;
	transition: text-shadow .2s;
}
.header-icon span{
	display: block;
	line-height:1;
	font-size: 0.5em;
}

.header-icon:hover{
	text-shadow: 0 0 10px #fff,0 0 15px #fff;
}

#setting.true i{
	animation: spin 5s linear infinite;	
}

@keyframes spin {
  from {
	transform: rotate(0deg);
  }
  to {
	transform: rotate(360deg);
  }
}
#setting{
	left: 0;
}

#login,
#account{
	right: 0;
}

/* フレックスボックス */
.flexbox{
	display:flex;
	flex-wrap: wrap;
}

/* 並び */
.between{
	justify-content: space-between;
}

.center{
	text-align:center;
}

/* 隠す */
/* スペースは開けたまま */
.hidden{
	visibility: hidden !important;
}
/* スペースは詰める */
.none{
	display: none !important;
}
/* スペースは詰める且つゆっくり消える */
.stealth{
    opacity: 0;
	max-width: 0;
	max-height: 0;
}
/* 取り消し線 */
.line-through{
	text-decoration: line-through;
	color: #808080;
}

/* カーソルポインター */
.pointer{
	cursor: pointer;
}

/* 画面を固定 */
.lock-screen{
	overflow: hidden;
/* 	position: fixed;
	width: 100%; */
/* 	height: 100%; */
}
/* 下線 */
.underline {
/* 	font-weight: bold; */
	font-size: 1.3em;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
	white-space: nowrap;
}





/* カスタム問題の同条件ボタン */
#sameCostomButton{
	cursor:pointer;
}

/* カスタムモードボタン */
#customModeButton,
#examModeButton{
	display: inline-block;
	width: 10em;
	font-weight: bold;
	padding: 1em 0;
	color: #fff;
	border-radius: 100vh;
	background: linear-gradient(0deg, rgba(12, 91, 115, 0.8) 50%, rgba(95, 183, 217, 0.8) 100%);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 0 5px 10px rgba(0, 0, 0, .1);
	text-decoration: none;
	text-align: center;
	font-size:1.2em;
	transition: 0.4s;
}

/* マウスオーバーした際のデザイン */
#customModeButton:hover,
#examModeButton:hover{
  background: linear-gradient(0deg, rgba(95, 183, 217, 0.8) 20%, rgba(12, 91, 115, 0.8) 100%);
  -webkit-box-shadow: 0 2px 3px rgb(0 0 0 / 10%);
  box-shadow: 0 2px 3px rgb(0 0 0 / 10%);
}




/* 自己採点の文章 */
.self-marking-text{
	display: none;
	padding: .5em;
	border:1px solid rgba(100,255,0,.5);
	background-color: rgba(100,255,0,.2);
	font-size: 1.2em;
}

.self-marking-text i{
	margin-right: .5em;
	color: #0f0;
}

.self-marking-text span{
	display: inline-block;
	font-size: .7em;
	vertical-align: middle;
	margin-bottom: .3em;
}

#scoringCompletedButton{
	display: none;
}
/******************** マーキング *********************/
/* マーキング */
.marking,
.select-marking,
.marking-button,
.result-marking{
	width: 1.5em;
    height: 1.5em;
	margin: auto;
    border: none;
    cursor: pointer;
	background-size: 100% !important;
	transition: 0.2s;
}

/* マーキングテーブル・マーキングボタン（カスタムモード） */
#markingTable .select-marking,
.marking-button{
	background-size: 80% !important;
	cursor:pointer;
}
/* マークのアイコン */
.marking.gray,
.select-marking.gray,
.marking-button.gray,
.result-marking.gray{
	background: url('/media/svg/square.svg') center no-repeat;
}

.marking.red,
.select-marking.red,
.marking-button.red,
.result-marking.red{
	background: url('/media/svg/circle.svg') center no-repeat;
}

.marking.green,
.select-marking.green,
.marking-button.green,
.result-marking.green{
	background: url('/media/svg/triangle.svg') center no-repeat;
}

.marking.blue,
.select-marking.blue,
.marking-button.blue,
.result-marking.blue{
	background: url('/media/svg/cross.svg') center no-repeat;
}

.marking:hover,
.select-marking:hover{
	filter:drop-shadow(0 0 10px #fff) invert(10%);
}

/* カラーリング */
.gray,
.marking.gray,
.select-marking.gray{
	color: #808080;
}

.red,
.marking.red,    
.select-marking.red{
	color:rgb(255, 50, 50);
}

.green,
.marking.green,
.select-marking.green{
	color:rgb(50, 255, 50);
}

.blue,
.marking.blue,
.select-marking.blue{
	color:rgb(50, 200, 255);
}



/* マーキングエリア */
#markingArea{
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	box-shadow: 0px 0px 5px #808080;
}

#markingArea.stealth{
	cursor:auto;	
}

/* マーキングテーブル */
#markingTable{
	width: 200px;
	table-layout: fixed;
	text-align: center;
	margin: 0 !important;
}

#markingTable td{
	padding: 2px;
	background-color: rgba(50,50,50,0.9);
	border-color:#323232 !important;
}

#markingTable td:hover{
	text-shadow: 0 0 10px #fff,0 0 15px #fff;
}

/******************** simple membership ********************/
.custom-swpm-form-area{
	max-width: 30em;
	margin: 2em auto;
}

.custom-swpm-form{
	background-color: rgba(255,255,255,.5) !important;
	border-radius: 5px;
	width: 100%;
	padding: 1em;
	margin-bottom: .5em !important;
}

.custom-swpm-form input[type="text"],
.custom-swpm-form input[type="password"],
.custom-swpm-form input[type="email"]{
	background-color: rgba(255,255,255,.5);
	color: #fff !important;
	text-shadow: 1px 1px 2px #000;
	font-size: 16px;
	padding: .5em 1em;
	width: 100%;
}

/* 新規登録 */
.custom-fieldset{
	border: none !important;
	background-color: rgba(255,255,255,0) !important;
	margin: 0 !important;
}

ul.swpm-section li label,
ul.swpm-section li p{
	color: #fff;
	text-shadow: 1px 1px 2px #000;
	font-size: 16px;
}
ul.swpm-section li label span.swpm-required-asterisk{
	text-shadow: none;
}
ul.swpm-section li.swpm-fb-membership-level{
	display: none;
}


.custom-swpm-form input[type="submit"],
.custom-swpm-form button{
	width: 10em;
	margin: auto;
	font-size: 1.2em;
	border-radius: 50px;
	color: #fff;
	background-color: rgba(0,100,255,.8);
}
.swpm-login-widget-action-msg{
	font-weight: normal !important;
}
.swpm-login-widget-action-msg a{
	font-weight: bold;
	color: rgb(50,200,255);
}

/* 新規会員登録はこちらボタン */
.registration-link-button{
	padding: .5em 1em;
	font-size: 1.2em;
	color: #fff;
	background-color: rgba(255,150,0,.8);
}
/* フォームのラベル */
.swpm-label{
	font-size: 16px;
	font-weight: bold;
}

/* 下に余白 */
.bottom-space{
	margin-bottom: 1.5em;
}

.swpm-legend{
	display:none;
}

.swpm-verification{
	margin: 0 !important;
	border: none !important;
	background-color: rgba(0,0,0,0) !important;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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