@charset "UTF-8";
/**************************************************************

共通　（微調整用のCSSは　一番下に記述）

**************************************************************/
/*---------------------------
コンテンツ全体を非表示
※Javascript読み込み後表示
---------------------------*/
header,.fixed_nav,#box_content,footer{
	visibility: hidden;
}
/*---------------------------*/
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html{
	font-family:tbchibirgothicplusk-pro, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 100%;/*16px*/
	color: #707070;
	text-shadow: 1px 1px 1px #FFFFFF; 
	line-height: 1.6;
	height: 100%;
}

body{
	margin: 0;
	height: 100%;
	width: 100%;
}

body::before{
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100%;
	background: url("../img/bg_note02.png") repeat 0 0/15px;
}
body.comp_loading::before{
	background: url("../img/background.jpg") repeat fixed 0 0/50%;
	background-size:133px 133px;
}

div#BOX{
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}


h1,h2,h3,h4,h5,h6{
	font-family: kan415typos-std, sans-serif;
	font-weight: 400;
	margin: 0;
}

#box_content{
	padding-top: 52px;/*headerの高さ*/
	margin-bottom: 80px;/*下部固定ナビの高さ*/
}

/*PC用（768px以上）設定*/
@media (min-width: 768px){
	#box_content{
		padding-top: 52px;
	}
}/*@mediaおわり*/


#box_content section{
	padding: 15px;
}

section{
	max-width: 1000px;
	margin: 3em auto;
}

#box_content section:first-of-type{
	margin-top: 0;
}

#box_content section:last-of-type{
	margin-bottom: 0;
}

p{
	margin: 0 0 1.5em;
}

a{
	text-shadow: none;
	color: #3A89A7;
	display: inline-block;
	text-decoration: underline;
}

a:active{
	opacity: 0.4;
}
figure{
	text-align: center;
	margin-bottom: 2rem;
}

img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
html textarea,
html input[type="text"]{
	font-family: inherit;
	font-size: inherit;
	margin: 0;
	border: 1px solid #B1C7D0;
	padding: 15px;
}

/* ========================================
Loding画面
======================================== */
.loading {
	position: fixed;
	z-index: 1000000;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("../img/bg_note02.png") repeat 0 0/15px;
}
.loading .flip {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 150px;
	height: 150px;
}

.loading .flip-inner {
	transform-style: preserve-3d;
	/*transition: transform .8s ease;*/
	height: 100%;
	width: 100%;
	animation-name: Flip;
	animation-duration: 1s; /* アニメーション時間*/
	animation-timing-function: ease-out; /* アニメーションさせるイージング*/
	animation-delay: 0s; /* アニメーション開始させる時間*/
	animation-iteration-count: 1 /*infinite*/; /* 繰り返し回数*/
	animation-direction: normal; /* 往復処理をするかどうか*/
	animation-fill-mode: forwards; /* アニメーション後のスタイルをどうするか*/
}

@keyframes Flip  {
	0% {
		transform: rotateY(0deg);
	}
	100% {
		transform: rotateY(180deg);
	}
}

.loading .flip-inner img{
	max-width: 150px;
	height: auto;
	border-radius: 100%;
}

.loading .front,
.loading .back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	overflow: hidden;
}
.loading .front {
	 transform: translateZ(1px);
}
.loading .back {
	transform: rotateY(180deg);
}
/* ========================================
アクセシビリティ対応（本文へ）
======================================== */
div#blockskip{
	margin: 0;
	padding: 0;
	overflow: visible;
	height: 0;
}
/* ========================================
IEサポート外
======================================== */
.no_support{display: none;}

@media all and (-ms-high-contrast:none) {
	.no_support{
		display: block;
		background: #FFFFFF;
		padding:15px;
		position: relative;
		top:70px;
		left: 0;
		margin: 15px;
		z-index: 3000;
		color: #E00081;
		text-align: center;
	}
}
/*PC用（768px以上）設定
@media (min-width: 768px){
	.no_support{
		top:120px;
	}
}/*@mediaおわり*/

/* ========================================
ヘッダー&メニュー
======================================== */
header{
	background: #FFFFFF;
	width: 100%;
	height: 52px;
	position: fixed;
	z-index: 2000;
	top:0;
	left: 0;
	box-shadow: 0 5px 5px -4px rgba(0,0,0,0.4);
}

#header_logo a{
	text-decoration: none;
}
#header_logo img{
	width: 130px;
	height: auto;
	margin: 5px 0 0 15px;
	
}

/* ========================================
下部固定ナビ(768px以上だとグローバルナビ)
======================================== */
/*--下部固定ナビ（767px以下の時）--*/
@media (max-width: 767px){
	.fixed_nav{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 80px;
		z-index: 2020;
		font-family: kan415typos-std, sans-serif;
		font-weight: 400;
	}
	.fixed_nav ul{
		background: #FFFFFF;
		width: 100%;
		display: flex;
		font-size: 0.75rem;
		border-top:1px solid #B1C7D0;
		text-align: center;
	}

	.fixed_nav ul li{
		border-right:1px solid #B1C7D0;
		width: 25%;
		height: 80px;
	}

	.fixed_nav ul li a{
		text-decoration: none;
		background:no-repeat center 30px/40px;
		display: block;
		width: 100%;
		height: 100%;
		padding-top: 5px;
	}
	.fixed_nav ul li.navi_home a{background-image:url("../img/ico_home.svg");}
	.fixed_nav ul li.navi_character a{background-image:url("../img/ico_cap.svg");}
	.fixed_nav ul li.navi_mechanism a{background-image:url("../img/ico_question.svg");}
	.fixed_nav ul li.navi_info a{background-image:url("../img/ico_bell.svg");}
	.fixed_nav ul li:last-child{
		border-right: none;
	}

	p#fixed_start{
		position: fixed;
		top:0px;
		right:5px;
		margin-bottom: 0;
		z-index: 2020;
		text-align: center;
	}
	p#fixed_start button {
		font-family: kan415typos-std, sans-serif;
		font-weight: 400;
		background: #3A89A7;
		border-radius: 50px;
		padding:0 30px 8px;
		box-shadow: 0 3px 0 rgba(177,199,208,1);
		border-bottom: 1px solid #3FABD5;
		color: #FFFFFF;
		position: relative;
		font-size: 19px;
		z-index: 2021;
		margin-top: 5px;
	}
	p#fixed_start button:active{
		opacity: 1;
		box-shadow: 0 -1px 0 rgba(49,115,141,1);
		position: relative;
		top:3px;
	}

}/*@mediaおわり*/

/*--グローバルナビ（768px以上の時）--*/
@media (min-width: 768px){
	.fixed_nav{
		position: fixed;
		top: 0;
		right: 0;
		height: 52px;
		z-index: 2000;
		font-family: kan415typos-std, sans-serif;
		font-weight: 400;
		width: calc(100vw - 200px);
		max-width: 600px;
	}
	
	.fixed_nav ul{
		background: #FFFFFF;
		display: flex;
		justify-content: flex-end;
		text-align: center;
		height: 52px;
		position: relative;
	}

	.fixed_nav ul li a {
		text-decoration: none;
	}
	
	.fixed_nav ul li.navi_home a{
		background: url("../img/ico_home.svg") no-repeat center center/30px 30px;
		display: block;
		height: 100%;
		width: 50px;
		border-left:1px solid #B1C7D0;
		
	}
	
	.fixed_nav ul li.navi_home a span{
		visibility: hidden;
	}
	
	.fixed_nav ul li.navi_character ,
	.fixed_nav ul li.navi_mechanism,
	.fixed_nav ul li.navi_info{
		border-left:1px solid #B1C7D0;
		width: 30%;
	}

	.fixed_nav ul li.navi_character  a,
	.fixed_nav ul li.navi_mechanism a,
	.fixed_nav ul li.navi_info a{
		background:no-repeat 10px 13px/25px;
		display: block;
		width: 100%;
		color: #707070;
		padding: 10px 20px;
		height: 52px;
		font-size: 16px;
	}
	
	.fixed_nav ul li.navi_character a span,
	.fixed_nav ul li.navi_mechanism a span,
	.fixed_nav ul li.navi_info a span{
		background:no-repeat 0 10px/25px;
		padding: 5px 0 5px 30px;
	}
	.fixed_nav ul li.navi_character a span{background-image:url("../img/ico_cap.svg");}
	.fixed_nav ul li.navi_mechanism a span{background-image:url("../img/ico_question.svg");}
	.fixed_nav ul li.navi_info a span{background-image:url("../img/ico_bell.svg");}
	
	p#fixed_start{
		order: 4;
		background: #FFFFFF;
		padding: 5px 10px 10px;
		position: fixed;
		top:52px;
		right:5px;
		z-index: 1999;
		box-shadow: 0 5px 5px -4px rgba(0,0,0,0.4) inset,
					0 0 4px 1px rgba(0, 0, 0, 0.2);
		border-radius: 0 0 10px 10px ;
		height: 60px;
		width: 200px;
		margin-bottom: 0;
		text-align: center;
	}
	p#fixed_start button {
		font-family: kan415typos-std, sans-serif;
		font-weight: 400;
		background: #3A89A7;
		border-radius: 50px;
		padding:0 40px 8px;
		box-shadow: 0 3px 0 rgba(177,199,208,1);
		border-bottom: 1px solid #3FABD5;
		color: #FFFFFF;
		position: relative;
		font-size: 19px;
		margin-top: 5px;
	}

	p#fixed_start button:active{
		opacity: 1;
		box-shadow: 0 -1px 0 rgba(49,115,141,1);
		position: relative;
		top:3px;
	}

	
}/*@mediaおわり*/
/* ========================================
フッター
======================================== */
/*ページ下部に固定メニューがある時に使用*/

footer{
	width: 100%;
	margin-top: auto;
	margin-bottom: 80px;
}

@media (min-width: 768px){
	footer{
		margin-bottom: 0;
	}
}/*@mediaおわり*/

div.footer_inner{
	background: #FFFFFF;
	padding: 15px;
}

p#page_top{
	background: #C7E2EB;
	margin-bottom: 0;
	text-align: center;
	text-shadow: none;
	padding:5px 10px;
	color: #3A89A7;
	font-size: 0.875rem;
	cursor: pointer;
}

p#page_top span::before{
	content: '';
	display:inline-block;
	height: 0.8rem;
	width: 0.8rem;
	background: url("../img/ico_page_top.svg") no-repeat center center/0.8rem;
	margin:0.4rem 5px 0 0;
}

p#page_top:active{
	color: #8DB8C9;
}
/*PC用（768px以上）設定*/
@media (min-width: 768px){
	p#page_top{
		background: none;
		margin-bottom: 0;
		padding:0;
		border-bottom:3px solid #C7E2EB; 
		text-align: right;
	}
	p#page_top span{
		display: inline-block;
		background: #C7E2EB;
		font-size: 0.875rem;
		padding:5px 15px;
		border-radius: 10px 10px 0 0;
		margin-right: 10px;
	}
}/*@mediaおわり*/

/* SNSボタン */
ul.footer_sns{
	text-align: center;
	font-size: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: -15px;
	
}
ul.footer_sns li{
	margin-right: 15px;
	margin-bottom: 15px;
}

ul.footer_sns li:last-child{
	margin-right: 0;
	
}
ul.footer_sns li a{
	text-decoration: none;
}
ul.footer_sns li img{
	width: 50px;
	height: 50px;
}

#box_content .box_explanation{
	padding-top:0;
	margin-top: 15px;
}

.network_area{
	background: #FFFFFF;
	height: 50vh;

}

ul.footer_navi{
	background: #FFFFFF;
	text-align: center;
	font-size:0;/*inline-blockの隙間防止*/
	padding:1rem 0 0.3rem;
}

ul.footer_navi li{
	display: inline-block;
	border-right:1px dotted #B1C7D0;
	font-size: 1rem;
	margin-bottom: 0.7rem;
}

ul.footer_navi li:last-child{
	border-right:none; 
}

ul.footer_navi li a{
	display: block;
	padding: 0 10px;
	text-decoration: none;
}

div.footer_txt{
	padding: 15px;
	font-size: 0.75rem;
	text-align: center;
}

div.footer_txt p:last-child{
	margin-bottom: 0;
}

p.copy_right{
	background: #3A89A7;
	font-size: 0.75rem;
	color: #FFFFFF;
	text-shadow: none;
	padding: 0.5rem 15px;
	text-align: center;
	margin-bottom: 0;
}
p.copy_right a{
	color: #FFFFFF;
	text-decoration: none;
}
/* ========================================
パンくずリスト
======================================== */
ol.breadcrumb{
	max-width: 1000px;
	padding: 15px 15px 0;
	margin: 0 auto;
	overflow: hidden;
	font-size: 0.875rem;
}

ol.breadcrumb li{
	background: url("../img/ico_arrow.svg") no-repeat right 0.5rem/0.5rem;
	float: left;
	padding-right: 1rem;
	margin-right: 0.5rem;
}

ol.breadcrumb li:last-child{
	background: none;
	padding-right: 0;
	margin-right: 0;
}
ol.breadcrumb li a{
	color: #707070;
	text-decoration: underline;
}

/*PC用（768px以上）設定*/
@media (min-width: 768px){
	ol.breadcrumb{
		padding:20px 250px 15px 15px;
	}
}/*@mediaおわり*/

/* ========================================
Heading
======================================== */
.h_type01 {
	background-image: -webkit-linear-gradient(left, rgba(255,255,255,0), #FFFFFF 25%, #FFFFFF 75%, rgba(255,255,255,0));
	background-image: -o-linear-gradient(left, rgba(255,255,255,0), #FFFFFF 25%, #FFFFFF 75%, rgba(255,255,255,0));
	background-image: linear-gradient(to right, rgba(255,255,255,0), #FFFFFF 25%, #FFFFFF 75%, rgba(255,255,255,0));
	position: relative;
	padding: 1.5em 15px;
	font-size: 1.25rem;
	margin-bottom: 1.5rem;
	text-align: center;
}

.h_type01::before,
.h_type01::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 6px;
  box-sizing: border-box;
}
.h_type01::before {
  top: 0;
  border-top: 2px solid #8DB8C9;
  border-bottom: 1px solid #8DB8C9;
}
.h_type01::after {
  bottom: 0;
  border-top: 1px solid #8DB8C9;
  border-bottom: 2px solid #8DB8C9;
}

.h_type02{
	font-size: 1.25rem;
	margin-bottom: 1.5rem;
	padding-bottom: 0.7rem;
	
	text-align: center;
	border-bottom: 2px solid #8DB8C9;
}

.h_type03{
	font-size: 1.25rem;
	margin-bottom: 1.5rem;	
	text-align: center;
}


/* ========================================
ボタン
======================================== */
.box_btn{
	text-align: center;
	max-width: 1000px;
	margin: 0 auto;
	border-top: 2px dotted #B1C7D0;
	padding-top:2em; 
}

.box_btn p:last-child{
	margin-bottom: 0;
}


ul.wrap_btn{
	display: flex;
	flex-direction: column-reverse;
	

}
ul.wrap_btn li{
	margin-bottom: 1rem;
}

@media (min-width: 768px){

ul.wrap_btn{
	flex-direction: row;
	justify-content: space-around;

}
	
}/*@mediaおわり*/

/*---- 楕円のボタン基本設定----*/
a.btn_next,
a.btn_prev,
a.btn_green,
a.btn_yellow,
a.btn_white{
	text-decoration: none;
}

.btn_next,
.btn_prev,
.btn_green,
.btn_yellow,
.btn_white{
	display: inline-block;
	background-size:1em 1em;
	font-family: kan415typos-std, sans-serif;
	font-weight: 400;
	font-size: 1.12rem;
	padding:0.2rem 3rem 0.5rem;
	min-width: 200px;
	border-radius: 50px;
	cursor: pointer;
	text-align: center;
	
}

.btn_next:active,
.btn_prev:active,
.btn_green:active,
.btn_yellow:active,
.btn_white:active{
	opacity: 1;
	box-shadow: 0 2px 0 rgba(49,115,141,1);
	position: relative;
	top:3px;
}

/*アイコン画像サイズ　指定*/
.btn_next img,
.btn_green img,
.btn_yellow img,
.btn_white img{
	width: 1rem;
	height: 1rem;
	margin-right: 1rem;
}

/*-- 個別設定--*/
.btn_next{
	background: #3A89A7;
	box-shadow: 0 6px 0 rgba(177,199,208,1);
	border-bottom: 1px solid #3FABD5;
	color: #FFFFFF;
	position: relative;
}

.btn_next:active{
	box-shadow: 0 2px 0 rgba(49,115,141,1);
}

.btn_next::after{
	content:'';
	display:block;
	width: 1em;
	height: 1em;
	background: url("../img/ico_arrow_next.svg") no-repeat 0 0;
	background-size:1em;
	position: absolute;
	right:20px;
	top:calc(50% - 0.5em);/*真ん中*/
}

.btn_prev{
	background: #FFFFFF;
	border: 1px solid #3A89A7;
	box-shadow: 0 6px 0 rgba(177,199,208,1);
	color: #3A89A7;	
	position: relative;
}
.btn_prev:active{
	box-shadow: 0 2px 0 rgba(177,199,208,1);
}

.btn_prev::before{
	content:'';
	display:block;
	width: 1em;
	height: 1em;
	background: url("../img/ico_arrow_prev.svg") no-repeat 0 0;
	background-size:1em;
	position: absolute;
	left:20px;
	top:calc(50% - 0.5em);/*真ん中*/
}


.btn_green{
	background: #3A89A7;
	color: #FFFFFF;
	border-bottom: 1px solid #3FABD5;
	box-shadow: 0 6px 0 rgba(49,115,141,1);
}
.btn_green:active{
	box-shadow: 0 2px 0 rgba(49,115,141,1);
}


.btn_yellow{
	background: #FFF500;
	border-bottom: 1px solid #F4C954;
	box-shadow: 0 6px 0 rgba(209,177,89,1);
	color: #4E4E4E;	
}
.btn_yellow:active{
	box-shadow: 0 2px 0 rgba(209,177,89,1);
}

.btn_white{
	background: #FFFFFF;
	border: 1px solid #3A89A7;
	box-shadow: 0 6px 0 rgba(177,199,208,1);
	color: #3A89A7;	
}
.btn_white:active{
	box-shadow: 0 2px 0 rgba(177,199,208,1);
}

/*----戻るボタン----*/
.link_prev{
	border-bottom: 1px dotted #3A89A7;
	padding-bottom: 0.5em;
	
}

.link_prev::before{
	content:'';
	display: inline-block;
	width: 1rem;
	height: 1rem;
	background: url("../img/ico_arrow_prev.svg") no-repeat 0 0;
	background-size:1rem;
	margin:0 0.5rem 0 0
}


/*----ホームに戻るボタン----*/
.link_home{
	border-bottom: 1px dotted #3A89A7;
	padding:0 0 0.5em 2rem;
	position: relative;
	text-decoration: none;
	
}

.link_home::before{
	content:'';
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	background: url("../img/ico_home_green.svg") no-repeat 0 0/1.5rem;
	margin:0 0.5rem 0 0;
	position: absolute;
	top: 0.1rem;
	left: 0;
}
/*----キャラクター一覧に戻るボタン----*/
.link_character{
	border-bottom: 1px dotted #3A89A7;
	padding:0 0 0.5em 2rem;
	position: relative;
	text-decoration: none;
}

.link_character::before{
	content:'';
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	background: url("../img/ico_cap_green.svg") no-repeat 0 0/1.5rem;
	margin:0 0.5rem 0 0;
	position: absolute;
	top: 0.1rem;
	left: 0;
}

/*----ボタン無効（：activeの動きを消す・薄くする）----*/
.btn_disabled{
	opacity: 0.5;
	box-shadow:none;
	cursor: default;
	position: static;
}
.btn_disabled:active{
	box-shadow: none;
	opacity: 0.5;
	position: static;
}

/* ========================================
ポップアップ共通設定
======================================== */
body.fixed{
	position: fixed;
	left: 0;
}
div.popup{
	display: none;
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	z-index: 100000;
	overflow: hidden;
}

div.popup_bg{
	width: 100%;
	height: 100%;
	background-color:  rgba(0,0,0,0.7)
}

div.wrap_popup_content{
	position: absolute;
	z-index: 100001;
	top:50%;
	left: 50%;
	transform:  translate(-50%,-50%);
	max-height: calc(100vh - 30px);
	max-width: calc(1000px - 30px);
	width: calc(100% - 30px);
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.6));
	
}

div.popup.fullscreen .wrap_popup_content{
	max-width: calc(100% - 30px);
}

div.wrap_popup_content div:first-child{
	border-radius: 10px 10px 0 0;
}

div.popup_title{
	background: #3A89A7;
	font-family: kan415typos-std, sans-serif;
	font-weight: 400;
	color: #FFFFFF;
	padding: 15px;
	width: 100%;
	text-align: center;
	font-size: 1.25rem;
}

div.popup_title h2{
	text-shadow: none;
}

div.popup_title p:last-child{
	margin-bottom: 0;
	text-shadow: none;
}

.popup_content{
	background: #FFFFFF;
	padding: 15px;
	width: 100%;
	overflow-y: auto;
}

.wrap_popup_btn{
	background: #FFFFFF;
	width: 100%;
	border-top:1px solid #B1C7D0;
	padding: 15px;
	text-align: center;
	border-radius: 0 0 10px 10px;
}

.wrap_popup_btn ul{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column-reverse;
}

.wrap_popup_btn ul li{
	margin-bottom: 1rem;
}

@media (min-width: 768px){
	.wrap_popup_btn ul{
	flex-direction: row;
	justify-content: space-around;
}
}/*@mediaおわり*/

/* ========================================
診断モード選択
======================================== */

div.wrap_select_mode{
	display: flex;
	flex-wrap: wrap;
}

div.easy_mode,
div.normal_mode{
	width:100%;
}

div.normal_mode{
	margin-right: 0;
}

div.easy_mode button,
div.normal_mode button{
	background: #1b7de6;
	font-family: kan415typos-std, sans-serif;
	font-weight: 400;
	display: block;
	width: 100%;
	border-radius: 100px;
	border-bottom: 1px solid #6cb1ff;
	text-align: center;
	box-shadow: 0 6px 0 rgba(0,77,165,1);
	position: relative;
	color: #FFFFFF;
	padding: 12px 15px 17px;
	margin-bottom: 1rem;
	font-size:1.7rem;
}

div.normal_mode button{
	background: #E23B9B;
	border-bottom: 1px solid #FF7EBE;
	box-shadow: 0 6px 0 rgba(193,30,131,1);
}

div.easy_mode button:active,
div.normal_mode button:active{
	opacity: 1;
	box-shadow: 0 2px 0 rgba(221,115,0,1);
	position: relative;
	top:3px;
}

div.normal_mode button:active{
	box-shadow: 0 2px 0 rgba(155,155,155,0.5);
}

div.easy_mode button span.shadow{
	filter: drop-shadow(0 2px 0px #0050ab);
}
div.normal_mode button span.shadow{
	filter: drop-shadow(0 2px 0px #b3136f);
}

/*---停止中----*/
div.normal_mode button{
	position: relative;
}
/*
div.normal_mode button::after{
	content: '';
	background: rgba(0,0,0,0.8);
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	border-radius: 100px;
	padding-top:0.5rem; 
	box-shadow: 0 6px 0 rgba(0,0,0,1);
	cursor: default;
}
*/

/*質問数と説明*/
p.NoQ {
	font-size: 0.875rem;
}

p.NoQ span{
	text-shadow: none;
	padding:5px 10px;
	border-radius: 10px;
	margin-right: 10px;
	display: inline-block;
}

div.easy_mode p.NoQ span{
	background: #d4e8ff;
}

div.normal_mode p.NoQ span{
	background: #FFD8EE;
}


@media (min-width: 768px),(orientation: landscape){

	div.wrap_select_mode{
		flex-wrap: nowrap;
	}
	div.easy_mode,
	div.normal_mode{
		width:calc(50% - 20px);
	}
	div.easy_mode{
		margin-right: 40px;
	}
}/*@mediaおわり*/
/* ========================================
ポップアップ　遊び方popup_detail
======================================== */
div.popup_HowToPlay div.wrap_popup_content ,
div.popup_detail div.wrap_popup_content{
	max-width: 400px;
}
div.popup_detail figure{
	text-align: center;
	margin-bottom: 1.5rem;
}

div.popup_HowToPlay div.wrap_popup_content img,
div.popup_detail div.wrap_popup_content img{
	border-radius: 10px;
	margin: 0 auto;
}

div.popup_detail figure.img_aruaru img{
	width: 90%;

}
p.HowToPlay{
	background: #D6F3FF;
	font-family: kan415typos-std, sans-serif;
	font-weight: 400;
	text-align: center;
	font-size: 1.125rem;
	padding: 8px 10px 10px;
	margin-bottom: 10px;
}

/* ========================================
SNS（URLを取得）ボタン
======================================== */
button.btn_get_URL{
	background: #3A89A7;
	box-shadow: 0 6px 0 rgba(177,199,208,1);
	font-family: kan415typos-std, sans-serif;
	font-size: inherit;
	margin:1em 0 1em;
	padding: 15px;
	border-radius: 5px;
	color: #FFFFFF;
}

button.btn_get_URL:active{
	box-shadow: 0 2px 0 rgba(177,199,208,1);
	position: relative;
	top:3px;
}

button.success_copy{
	color: #3A89A7;
	background:#FFFFFF;
	border: 1px solid #3A89A7;
}
/* ========================================
スクロールダウン 
======================================== */
/*---画面幅が767px以下の時---*/
@media (max-width: 767px){

	.scroll_anime{
		padding-top: 70px;
		position: absolute;
		right:10px;
		bottom: 20px;
	}

	.scroll_anime span:nth-of-type(1),
	.scroll_anime span:nth-of-type(2),
	.scroll_anime span:nth-of-type(3){
	position: absolute;
	top: 0;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	border-left: 3px solid #3A89A7;
	border-bottom: 3px solid #3A89A7;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb 2s infinite;
	animation: scroll_anime 2s infinite;
	opacity: 0;
	box-sizing: border-box;
	}

	.scroll_anime span:nth-of-type(1) {
		animation-delay: 0s;
		}
	.scroll_anime span:nth-of-type(2) {
		top: 16px;
		animation-delay: .15s;
	}
	.scroll_anime span:nth-of-type(3) {
		top: 32px;
		animation-delay: .3s;
	}
	
	.scroll_txt{
		background: #FFFFFF;
		padding: 5px;
		border-radius: 5px;
		font-size: 0.8rem;
		color: #3A89A7;
	}

}/*@mediaここまで*/

@-webkit-keyframes scroll_anime {
	0% {opacity: 0;}
	50% {opacity: 1;}
	100% {opacity: 0;}
}

/*---画面幅が768px以上の時は非表示---*/
@media (min-width: 768px){

	.scroll_anime{display: none;}
}

/**************************************************************

微調整用CSS

**************************************************************/
/* ========================================
スマホ表示だけ改行（768px以上は改行yしない）
======================================== */
.br{display: block;}
/*---画面幅が768px以上の時は非表示---*/
@media (min-width: 768px){
	.br{display: inline;}
}

/* ========================================
そのほか
======================================== */
/*--text--*/
.center{text-align: center !important;}
.right{text-align: right !important;}
.left{text-align: left !important;}

/*--width--*/
.w100per{width: 100% !important;}

/*--height:--*/
.h100per{height: 100% !important;}

/*--padding--*/
.pd_none{padding: 0 !important;}

/*--margin--*/
.m_none{margin: 0 !important;}

.mb_none{margin-bottom: 0 !important;}
.mb_0_5rem{margin-bottom: 0.5rem !important;}
.mb_1rem{margin-bottom: 1rem !important;}
.mb_2rem{margin-bottom: 2rem !important;}
.mb_3rem{margin-bottom: 3rem !important;}
.mb_4rem{margin-bottom: 4rem !important;}
.mb_5rem{margin-bottom: 5rem !important;}

.mt_none{margin-top: 0 !important;}
.mt_1rem{margin-top: 1rem !important;}
.mt_2rem{margin-top: 2rem !important;}
.mt_3rem{margin-top: 3rem !important;}
.mt_4rem{margin-top: 4rem !important;}
.mt_5rem{margin-top: 5rem !important;}

.mr_none{margin-right: 0 !important;}
.mr_1rem{margin-right: 1rem !important;}
.mr_2rem{margin-right: 2rem !important;}
.mr_3rem{margin-right: 3rem !important;}
.mr_4rem{margin-right: 4rem !important;}
.mr_5rem{margin-right: 5rem !important;}

/*--color--*/
.pink{color: #E00081 !important;}
.green{color: #3A89A7 !important;}
.yellow{color: #F29600 !important;}

/*--font_size--*/
.f_4plus{font-size: 1.25rem !important;}/*20px*/
.f_3plus{font-size: 1.1875rem !important;}/*19px*/
.f_2plus{font-size: 1.125rem !important;}/*18px*/
.f_1plus{font-size: 1.0625rem !important;}/*17px*/

.f_1minus{font-size: 0.93rem !important;}/*15px*/
.f_2minus{font-size: 0.875rem !important;}/*14px*/
.f_3minus{font-size: 0.8125rem !important;}/*13px*/
.f_4minus{font-size: 0.75rem !important;}/*12px*/

