@charset "utf-8";

/*=======================================================
	「がいし」ってなに？
=======================================================*/
/* 碍子 */
.character_meaning_cont{
	flex-direction: row-reverse;
	justify-content: space-between;
}
.character_meaning_cont img{
	margin-top: -15px;
}

/* どこにあるの */
.gaishi1_where_cont li{
	text-align: center;
}
.column_3_wrap > *{
	margin: 0 35px 0 0;
}
.box{
	overflow: hidden;
}
.box li{
	position: relative;
	opacity: 0;
	transition: 0.8s;
}
.box li.show{
	opacity: 1.0;
}
/* どんな働き */
.gaishi1_works_cont > div{
	margin: 0;
	padding: 0;
}
.works_img{
	margin: 0 auto 15px;
	position: relative;
}
.works_img img{
	border: 1px solid #ccc;
}
.work1:before,
.work2:before,
.work3:before,
.work4:before{
	content: ' ';
	margin: 0;
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
}
.work1:before{
	background-image: url(../img/gaishi1_works1_on.png);
}
.work2:before{
	background-image: url(../img/gaishi1_works2_on.png);
}
.work3:before{
	background-image: url(../img/gaishi1_works3_on.png);
}
.work4:before{
	background-image: url(../img/gaishi1_works4_on.png);
}
.play-stop_btn{
	padding: 10px;
	overflow: hidden;
	position: absolute;
	z-index: 10;
	bottom: 7px;
	left: 10px;
	display: block;
	text-indent: 150%;
	white-space: nowrap;
	overflow: hidden;
	width: 70px;
	height: 35px;
}
.play-stop_btn:hover{
	opacity: 0.8;
}
.play-stop_btn:before{
	content: '';
	width: 60px;
	height: 15px;
	background: url(../img/play.png) no-repeat left bottom;
	text-indent: 200%;
	white-space: nowrap;
	display: block;
	overflow: hidden;
	position: absolute;
}
.play-stop_btn.play-stop:before{
	content: '';
	background: url(../img/play.png) no-repeat left top;
	overflow: hidden;
}

/* tab */
.cp_tab *, .cp_tab *:before, .cp_tab *:after{
	box-sizing: border-box;
}
.cp_tab{
	margin: 1em auto;
	position: relative;
}
.cp_tabpanels{
	border: 1px solid #2298D9;
}
.cp_tabpanel{
	display: none;
}
.cp_tabpanel.active{
	display: block;
}
.tab_menu li{
	position: relative;
	display: inline-block;
	border-radius: 6px 6px 0 0;
	background-color: transparent;
}
.tab_menu li a{
	padding: 15px 35px 15px;
	display: block;
	color: #fff;
	background-color: #338ed1;
	border-radius: 6px 6px 0 0;
	background-color: #fafafa;
	color: #338ed1;
	position: relative;
	border: 1px solid #2298D9;
	border-bottom: none;
}
.tab_menu li a:after{
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	display: block;
	width:100%;
	height: 2px;
	background-color: transparent;
}
.tab_menu li.active a{
	background-color: #fff;
	color: #338ed1;
}
.tab_menu li.active a:after{
	background-color: #fff;
}
.tab_menu li a:hover{
	opacity: 0.8;
	text-decoration: none;
}
.tab_menu li.active a:hover{
	opacity: 1.0;
	cursor: default;
}
.tab_menu li a > span{
	border-bottom: 1px solid #8dbcde;
}
.tab_menu li a:hover > span{
	border-bottom: 1px solid #338ed1;
}
.tab_menu li a span span{
	font-size: 1.3em;
	font-weight: bold;
}
.tab_menu li.active a > span{
	border-bottom: 2px solid #338ed1;
}
.cp_tab .cp_tabpanel{
	padding: 0.5em 1em;
	background-color: #fff;
	border: 1px solid #fff;
}
@media (max-width: 480px){
	.cp_tab{
		width: 100%;
	}
	.tab_menu{
		letter-spacing:-0.4em;
	}
	.tab_menu li{
		letter-spacing: normal;
	}
	.tab_menu li:first-child{
		margin-right: 3px;
	}
	.tab_menu li a{
		padding: 10px 10px 10px;
		font-size: 0.75em;
	}
}
.cp_tabpanels .column_2_wrap{
	margin: 0 auto;
	justify-content: space-between;
	max-width: 880px;
}
.basic_section p.ttl_work{
	padding: 0;
	text-align: center;
	font-weight: bold;
	background-color: #fcee21;
	color: #2298D9;
	font-size: 1.6rem;
	position: relative;
	height: 44px;
	line-height: 44px;
	box-sizing: border-box;
	vertical-align: top;
}
.basic_section p.ttl_work:before, .basic_section p.ttl_work:after{
	position: absolute;
	content: ' ';
	width: 0;
	height: 0;
	z-index: 1;
}
.basic_section p.ttl_work:before{
	top: 0;
	left: 0;
	border-width: 22px 0 22px 11px;
	border-color: transparent transparent transparent #fff;
	border-style: solid;
}
.basic_section p.ttl_work:after{
	top: 0;
	right: 0;
	border-width: 22px 11px 22px 0;
	border-color: transparent #fff transparent transparent;
	border-style: solid;
}
/* trivia */
.gaishi1_trivia1{
	background: #338ed1 url(../img/gaishi1_trivia1_bg.png) no-repeat right center;
}
.gaishi1_trivia_hiragana{
	background: #338ed1 url(../img/gaishi1_trivia_hiragana_bg.png) no-repeat right center;
}


/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media screen and (min-width: 768px){
	/* 碍子 */
	.character_meaning_cont > *:first-child{
		margin: 0 0 0 25px;
	}
	.column_2_wrap .support{
		margin: 0;
		width: 70%;
	}
	.column_2_wrap .kuroko-kun{
		width: 30%;
	}

	/* どんな働き */
	.cp_tab .column_2_wrap > *{
		width: 48%;
	}
	.cp_tabpanels .column_2_wrap{
		padding: 20px 10px;
	}
	.gaishi1_works1 > div{
		width: 49%;
		max-width: 410px;
	}

	/* trivia */
	#gaishi_long .column_2_wrap > div{
		width: 69%;
	}
	#gaishi_long .column_2_wrap > p{
		width: 26%;
	}
}

/* スマホ----------------------------- */
@media screen and (max-width: 767px){
	/* 碍子 */
	.character_meaning_cont .column_2_wrap{
		display: flex;
	}
	.support{
		width: 72%;
	}
	.kuroko-kun{
		width: 25%;
	}
	.column_img{
		text-align: center;
	}

	/* どこにあるの */
	.gaishi1_where_cont li{
		width: 46%;
	}
	.gaishi1_where_cont li{
		margin: 0 2%;
	}
	.gaishi1_where_cont li:nth-child(3){
		margin: 5px 0 0;
	}
	.gaishi1_where_cont li:nth-child(3) .where_text{
		margin: 0 -50px;
	}
	.gaishi1_where_cont li p{
		font-size: 1.3rem;
		line-height: 1.5;
	}
	.gaishi1_where_cont li p span{
		font-size: 0.9em;
	}

	/* どんな働き */
	.column_2_wrap.gaishi1_works_cont{
		margin: 0;
		padding: 10px 0;
		display: block;
	}
	.gaishi1_works_cont > div{
		margin: 0 0 30px;
		padding: 0;
		width: 100%;
	}
	.gaishi1_works_cont div p{
		margin: 0 0 5px;
		font-size: 1.4rem;
		line-height: 1.5;
	}
	.works_img{
		margin: 0 auto 10px;
		}
	.gaishi1_works_cont .works_img img{
		width: 100%;
		height: auto;
	}
	.work1:before,
	.work2:before,
	.work3:before,
	.work4:before{
		padding: 0 0 66%;
		width: 100%;
		height: 0;
		background-size: 100% auto;
	}
	.cp_tab{
		width: 100%;
	}
	.tab_menu{
		letter-spacing:-0.4em;
	}
	.tab_menu li{
		letter-spacing: normal;
	}
	.tab_menu li:first-child{
		margin-right: 3px;
	}
	.tab_menu li a{
		padding: 10px 10px 10px;
		font-size: 0.75em;
	}
	.play-stop_btn{
		bottom: 4px;
	}

	/* trivia */
	.gaishi1_trivia1{
		background-size: 40% auto;
	}
	.cp_tab > label {
		padding: 10px 10px 5px;
	}
	#gaishi_long .column_2_wrap > p{
		margin-top: 15px;
		text-align: center;
	}
	.gaishi1_trivia_hiragana{
		background: #338ed1 url(../img/gaishi1_trivia_hiragana_bg.png) no-repeat right bottom;
			background-size: 40% auto;
	}
	.gaishi1_trivia_hiragana .trivia_ttl p{
		padding-right: 30%;
	}
}