@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    0.0.5
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

@font-face {
	font-family: 'Madono';
    src: url( ./font/Madono.otf );
}
@font-face {
	font-family: 'pupupu';
    src: url( ./font/pupupu-free.otf );
}
@font-face {
	font-family: 'KodomoRounded';
    src: url( ./font/KodomoRounded-free.otf );
}

@font-face {
	font-family: 'nicomoji';
    src: url( ./font/nicomoji-plus_1.ttf );
}

/*必要ならばここにコードを書く*/

/*     */
.mat_1em {
    margin-top: 1em;
}
.s_box img {
    box-shadow: 11px 11px 25px 0px rgb(0 0 0 / 60%);
    padding: 1em;
    border-radius: 19px;
    margin-bottom: 10px;
}

.d_flex {
    display: flex;
}

.leva_button {
    margin-left: 20px;
    
}
.leva_button button {
    width: 30px;
}

.black_white {
    background:#000;
    color:#fff;
}
.c_black {
    color:#000;
}
.f8 {
    font-size:.8em;
}

.p10 {
    padding-left:10px;
    padding-right:10px;
    padding-top:10px;
    padding-bottom:10px;
}

#logArea {
    background: #EFEFEF;
    width:100%;
    border: 1px solid #000;
    height:250px;
    overflow: scroll;
    overflow-y: no-content;
}
/* 点滅 */
#recognizing {
  animation: Flash1 1s infinite;
}

/* アニメーション */
@keyframes Flash1 {
  50% {
    opacity: 0;
  }
}

/* カジノリンク */
#box_2 {
  border: 1px solid #000;
  width: 100%;
  max-width: 468px;
  height: 60px;
  
  background: #000;
  font-family: 'Noto Serif JP', serif;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  margin-top: 1px;
  margin-bottom: 2px;
  overflow: hidden;
}

.box_2_wrapper {
  	position: relative;
  	display: flex;
  	justify-content: center;
  	/*letter-spacing: -1.8em;*/
  	z-index: 10;
	width:90%;
	
	
}


.box_2_wrapper span {
  display: inline-block;
  font-size: 20px;
  line-height: 20px;
  animation: scaleIn;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  opacity: 0;
  animation-delay: 1.0s;
}


.box_2_wrapper span:nth-of-type(1) {
  animation: kotoTrans 2s ease-out 1s normal forwards;
  transform: scaleX(1.2);
  margin-top: 0.1em;
  font-size: 20px;
}
.box_2_wrapper span:nth-of-type(2) {
  margin-top: 1.3em;
  animation-delay: 1.1s;
  font-size: 25px;
}



@keyframes scaleIn {
  0% {
    transform: scale(1.5);
    filter: blur(10px);
    opacity: 0;
  }
  100% {
    transform: scale(1.0);
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes kotoTrans {
  0% {
    transform: scale(1.2) translate(-0.1em, -0.2em);
    filter: blur(8px);
    opacity: 0;
  }
  100% {
    transform: scale(1.0) translate(0);
    filter: blur(0);
    opacity: 1;
  }
}


/* SOLD OUT モーダル*/
#modal-content{
	width:500px;
	margin:10em auto 0;
	padding:10px 20px;
	border-radius: 20px;/*角丸*/
	background:#fff;
	z-index:2;
}

.modal-p{
	margin-top:1em;
}

.modal-p:first-child{
	margin-top:0;
}

.button-link{
	color:#00f;
	text-decoration:underline;
}

.button-link:hover{
	cursor:pointer;
	color:#f00;
}

#modal-overlay{
	z-index:1;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:120%;
	background-color:rgba(0,0,0,0.75);

	vertical-align: middle;
}


.blue_bottun {
	background:#4D9FEC;
	color:#fff;
	width:70%;
	height:50px;
	border-radius: 30px;/*角丸*/
	text-align:center;
	margin:.5em auto;
	line-height: 50px;
}

.gray_bottun {
	background:#989a9c;
	color:#fff;
	width:70%;
	height:50px;
	border-radius: 30px;/*角丸*/
	text-align:center;
	margin:.5em auto;
	line-height: 50px;
}

#selected_word {
	text-align:center;
}

@media screen and (max-width: 768px){
	#modal-content{
		width:80%;
		margin-top:45%;
	}

	.blue_bottun {
		width:90%;
		margin:1em auto;
	}

	.gray_bottun {
		width:90%;
		margin:1em auto;

	}
}

/*monte carlo*/

.mgleft_em {
	margin-left:.8em;
}

#ta_twitter {
	height:50px;
}

.tw_form_table {
	border:hidden;
}

.tw_form_table td {
	border:hidden;
	font-size:.85em;
}

.tw_form_table tr:nth-child(odd) {
	background-color:#dbe9ff;
}

.btn-square-pop_tw {
	width:100%;
	height: 40px;
	font-size:18px;
	position: relative;
	display: inline-block;
	padding: 0.25em 0.5em;
	text-decoration: none;
	color: #FFF;
	border-radius: 4px;/*角の丸み*/
	font-weight: bold;
	background-color:#4D9FEC;
}
.btn-square-pop_tw_sp {
	width:100%;
	height:40px;
	font-size:18px;
	position: relative;
	display: inline-block;
	padding: 0.25em 0.5em;
	text-decoration: none;
	color: #FFF;
	border-radius: 4px;/*角の丸み*/
	font-weight: bold;
	background-color:#4D9FEC;
}

.tweet_box_org {
	background-color:#000;
	border:solid 2px black;
	padding:0 15px;
	width: 100%;
	border-radius: 10px;
	margin-bottom: 10px;
}

.tweet_trxt {
	clear:both;
	font-size:.9em;
	color:#fff;
}

.tw_usr_name {
	float:left;
	margin-left:1em;
	width:79%;
	height:100%;
	margin-top:25px;
	margin-bottom:0;

}
@media screen and (max-width: 768px){
	.tw_usr_name {
		font-size:.8em;
	}
	.btn-square-pop_tw_sp {
		font-size:.7em;

	}
}


/*****************/
.mc_button_undo {
	width: 100px;
	height:40px;
	background:#5a5d61;
	border-radius: 30px;/*角丸*/
	font-size:16px;

	touch-action: none;
	color:#fff;
}

#winButton {
	width:100px;
	height:100px;
	background:#fc7b03;
	border-radius: 30px;/*角丸*/

	font-size:30px;

	touch-action: none;
	color:#fff;
}

#loseButton {
	width:100px;
	height:100px;
	background:#3786db;
	border-radius: 30px;/*角丸*/

	font-size:30px;

	touch-action: none;
	color:#fff;
}

.btn-square-pop {
	width: 100%;
	height: 65px;
    font-size: 28px;
    font-weight: bold;
    background-color: #ff5757;/*背景色*/
  	position: relative;
  	display: inline-block;
  	padding: 0.25em 0.5em;
  	text-decoration: none;
  	color: #FFF;

  	/*border-bottom: solid 2px #d27d00;少し濃い目の色に*/
  	border-radius: 4px;/*角の丸み*/
  	/*box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);*/
  	font-weight: bold;
}

.btn-square-pop:active {
  border-bottom: solid 2px #fd9535;
  /*box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);*/
}

.btn-mini {
	width:100%;
	border-bottom: solid 2px #000;/*少し濃い目の色に*/
  	border-radius: 4px;/*角の丸み*/
  	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
}

.mc_form {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #5d627b;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);

}


/**/

.kadomaru{
	border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	-o-border-radius: 0.5em;
	-ms-border-radius: 0.5em;
}
.clear-b {
	clear: both;
}
pre {
	background-color: #000000;
}

code {
	color:#ffffff;
  	font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  	word-wrap: break-word;
}
/************************************
** スクロールカードリンク
************************************/

.naviMenu {
	font-size:0.9em;
	font-weight:bold;
}
.naviTable{
	table-layout: fixed;
}

.naviTable td {
	border: none;
	width:221px;
}
.naviTable td a{
	text-decoration: none;
	color:#313131;
}
.scroll {
	width: 100%;
	overflow-y: hidden;
	overflow-x: auto;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
}

.scroll::-webkit-scrollbar{/*tableにスクロールバーを追加*/
	height: 5px;
}
.scroll::-webkit-scrollbar-track{/*tableにスクロールバーを追加*/
	background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {/*tableにスクロールバーを追加*/
	background: #BCBCBC;
}

.topNavi {
	width:200px;
	height:320px;
    white-space: normal;
    box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.6) ;
    }


.topNaviImg {
	height:200px;/*画像の高さ*/
	margin-bottom:0;
}
.topNaviImg  img {
	display: block;
	height: 200px;
  	object-fit: cover; /* トリミング */
  	margin: 0 auto;
}

.topNaviContents {
	font-size:.7em;
	margin-top:0;
	margin-left:5px;
	margin-right:5px;
}

.topNaviCTitle {
	font-weight:bold;
	color:#000000;
	font-size:1.2em;
}

/****/
.topNavi2 {
	width:200px;
	height:260px;
    white-space: normal;
    box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.6) ;
    }
    
.raku_item_Navi {
	width:200px;
	height: 300px;
    white-space: normal;
    box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.6) ;
    }

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

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

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

  body {
	margin-top:3em;
	}
  .naviTable td {
		width:155px;

	}
 	.topNavi {
		width:136px;
		height:248px;
    	box-shadow: 4px 4px 4px 4px rgba(0,0,0,0.6) ;
    }
    .topNaviImg {
		height:136px;/*画像の高さ*/
	}
	.topNaviImg  img {
		height: 136px;
	}


	.topNavi2 {
		width: 138px;
		height:174px;
    	box-shadow: 4px 4px 4px 4px rgba(0,0,0,0.6) ;
    	text-align:center;
    }


}

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


/* imgコンバーター */