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

全体設定

 ---------------------------------------------------*/
body {
	font-family: "M PLUS 1p", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	width:100%;
	color: #000;
	font-size: 1.1111vw;
	-webkit-text-size-adjust: 100%;
	line-height:1.4;
}
a{
	color: #000;
	text-decoration: none;
	transition: 0.6s;
	cursor: pointer!important;
}
a:hover{
	opacity: 0.5;
}
img{
	width:100%;
	height: auto;
	vertical-align: bottom;
}
select{
 color: #333;
}
span, h1, h2, h3, h4, h5, h6, p, a{
	font-weight: 700;
}
@media screen and (max-width: 767px) {
	body{
		position: relative;
		font-size: 3.5897vw;
		padding-top: 18.4615vw;
	}
}

.container{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	overflow: visible;
}
.pagetop{
	position: fixed;
	bottom: 4.8611vw;
	right: 1.3888vw;
	z-index: 99;
}
body.side-right .pagetop{
	right: auto;
	left: 1.3888vw;
}
.pagetop a {
	display: block;
	width: 4.8611vw;
	transition: all .3s ease;
}
@media screen and (max-width: 767px) {
	.pagetop{
		bottom: 3.75vw;
		right: 3.75vw;
	}
	body.side-right .pagetop{
		left: 3.75vw;
	}
	.pagetop a {
		width: 10vw;
	}
}

/* トップ -----------------------------*/
#top{
	position: relative;
	height: 100svh;
	background:
		url("../images/top/bg_left.jpg") left center / auto no-repeat,
		url("../images/top/bg_right.jpg") right center / auto no-repeat;
	background-size:contain;
}
#top .wrap{
	position: absolute;
	display: flex;
	flex-direction: column;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#top .wrap img{
	width: auto;
	height: 100%;
}
#top .tit{
	/*width: 39.9305vw;*/
	height: 23.828125svh;
	margin: 0 auto;
}
#top .cap{
	display: flex;
	align-items: center;
	justify-content: center;
	color: #4F9B0C;
	font-size: 1.5277vw;
	font-weight: 800;
	text-align: center;
	margin: 1.4648svh 0;
}
#top .cap ruby{
	position: relative;
	display: inline-block;
	line-height: 1;
}
#top .cap rt{
	position: absolute;
	display: block;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%);
	font-size: 0.45em;
	line-height: 1;
	white-space: nowrap;
}
#top .cap:before,
#top .cap:after{
	content: "";
	display: block;
	width: 0.9722vw;
	height: 2.0833vw;
	margin: 0 0.9722vw;
	background: url("../images/top/icon_bar.png") no-repeat;
	background-size: cover;
}
#top .cap:after{
	transform: scaleX(-1);
}
#top .kv{
	/*width: 64.3055vw;*/
	height: 56.4453svh;
	margin: 0 auto;
}
#top .kv .smp{
	display: none;
}
#top .btn{
	display: block;
	/*width: 21.5277vw;*/
	height: 8.7890625svh;
	margin: -4.3945svh auto 0;
}
#top .copyright{
	position: absolute;
	display: block;
	color: #6C6C6C;
	font-size: 0.6944vw;
	text-align: center;
	bottom: 0.4166vw;
	left: 50%;
	transform: translateX(-50%);
}
@media screen 
  and (min-width: 600px) 
  and (max-width: 1024px) 
  and (orientation: portrait) {
	  #top{
		background:
		url("../images/top/bg_top.png") left top no-repeat,
		url("../images/top/bg_bottom.png") right bottom no-repeat;
		background-size:contain;
	  }
	  #top .wrap{
		  width: 100%;
		  top: 46%;
	  }
	  #top .tit{
		  height: 18.0451svh;
		  margin: 0 auto;
	  }
	  #top .cap{
		  font-size: 3.8461vw;
		  margin: 6.1538vw 0 2.0512vw;
	  }
	  #top .cap:before,
	  #top .cap:after{
		  width: 2.0512vw;
		  height: 4.6153vw;
		  margin: 0;
	  }
	  #top .kv{
		  height: 45.1127svh;
		  margin: 0 auto;
	  }
	  #top .kv .pc{
		  display: none;
	  }
	  #top .kv .smp{
		  display: block;
	  }
	  #top .btn{
		  height:6.6416svh;
		  margin: -3.7593svh auto 0;
	  }
	  #top .copyright{
		  font-size: 2.5641vw;
		  bottom: 6.5162vw;
	  }
}
@media screen and (max-width: 767px) {
	  #top{
		  padding: 0;
		background:
		url("../images/top/bg_top.png") left top no-repeat,
		url("../images/top/bg_bottom.png") right bottom no-repeat;
		background-size:contain;
	  }
	  #top .wrap{
		  width: 100%;
		  top: 46%;
	  }
	  #top .tit{
		  height: 18.0451svh;
		  margin: 0 auto;
	  }
	  #top .cap{
		  display: block;
		  font-size: 3.8461vw;
		  margin: 6.1538vw 0 2.0512vw;
		  text-align: center;
	  }
	  #top .cap:before,
	  #top .cap:after{
		  display: inline-block;
		  vertical-align: middle;
		  width: 2.0512vw;
		  height: 4.6153vw;
		  margin: 0;
	  }
	  #top .kv{
		  height: 45.1127svh;
		  margin: 0 auto;
	  }
	  #top .kv .pc{
		  display: none;
	  }
	  #top .kv .smp{
		  display: block;
	  }
	  #top .btn{
		  height:6.6416svh;
		  margin: -3.7593svh auto 0;
	  }
	  #top .copyright{
		  font-size: 2.5641vw;
		  bottom: 6.5162vw;
	  }
}

/* もくじ -----------------------------*/
#contents .top_wrap{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin: 1.4648vw 4.1992vw 0;
}
#contents .top_wrap .tit{
	width: 43.75vw;
	margin: 2.9296vw 0 auto 0;
}
#contents .top_wrap .character01{
	width: 22.65625vw;
}
#contents .top_wrap .character01 .txt{
	width: 16.015625vw;
}
#contents .top_wrap .character01 .img{
	width: 20.3125vw;
	margin: 0 0 0 auto;
}
#contents .top_wrap .character02{
	width: 18.1640625vw;
	margin: 0 2.9296vw 0 0;
}
#contents .list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 4.1992vw;
}
#contents .list li{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 21.09375vw;
	height: 23.828125vw;
	margin: 0 0 2.4414vw;
	background: url("../images/contents/bg_list_01.png") no-repeat;
	background-size: cover;
}
#contents .list li:nth-child(2){
	background-image: url("../images/contents/bg_list_02.png");
}
#contents .list li:nth-child(3){
	background-image: url("../images/contents/bg_list_03.png");
}
#contents .list li:nth-child(4){
	background-image: url("../images/contents/bg_list_04.png");
}
#contents .list li:nth-child(5){
	background-image: url("../images/contents/bg_list_05.png");
}
#contents .list li:nth-child(6){
	background-image: url("../images/contents/bg_list_06.png");
}
#contents .list li:nth-child(7){
	background-image: url("../images/contents/bg_list_07.png");
}#contents .list li:nth-child(8){
	background-image: url("../images/contents/bg_list_08.png");
}
#contents .list li .num{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.3945vw;
	height: 4.3945vw;
	color: #b55d60;
	font-size: 3.6132vw;
	font-weight: 800;
	top: 2.9296vw;
	left: -0.78125vw;
	background: #fcf8f8;
	border: 0.2929vw solid #e2acac;
	border-radius: 0.2929vw;
	box-sizing: border-box;
}
#contents .list li .inner{
	width: 19.0429vw;
	height: 19.0429vw;
	background: #fff;
	border-radius: 0.5859vw;
}
#contents .list li .inner .tit{
	font-size: 1.5625vw;
	line-height: 1.5;
	margin: 0.5859vw 0 0 3.515625vw;
}
#contents .list li .inner .tit ruby{
	position: relative;
	display: inline-block;
	line-height: 1;
}
#contents .list li .inner .tit rt{
	position: absolute;
	display: block;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%);
	font-size: 0.45em;
	line-height: 1;
	white-space: nowrap;
}
#top .cap .ruby-mid,
#contents .list li .inner .tit .ruby-mid,
#characters .wrap .cnt .name .ruby-mid{
	display: inline;
	position: relative;
	line-height: inherit;
	text-align: center;
}
#top .cap .ruby-mid__rt,
#contents .list li .inner .tit .ruby-mid__rt,
#characters .wrap .cnt .name .ruby-mid__rt{
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translate(-50%, 0.36em);
	font-size: 0.45em;
	line-height: 1;
	white-space: nowrap;
}
#top .cap .ruby-mid__rb,
#contents .list li .inner .tit .ruby-mid__rb,
#characters .wrap .cnt .name .ruby-mid__rb{
	display: inline;
	line-height: inherit;
}
#contents .list li .inner img{
	display: block;
	width: 17.0898vw;
	margin: 0.5859vw auto 0;
}
#contents .list li:nth-child(2) .num{
	color: #718555;
	background: #f7f9f7;
	border: 0.2929vw solid #ceddb1;
}
#contents .list li:nth-child(3) .num{
	color: #8f7e6d;
	background: #f9f9f7;
	border: 0.2929vw solid #c6bbb3;
}
#contents .list li:nth-child(4) .num{
	color: #857a8e;
	background: #fcf8f8;
	border: 0.2929vw solid #ccc4d6;
}
#contents .list li:nth-child(5) .num{
	color: #4d8c9c;
	background: #f7f7f9;
	border: 0.2929vw solid #bacace;
}
#contents .list li:nth-child(6) .num{
	color: #725f58;
	background: #f9f8f7;
	border: 0.2929vw solid #bab2af;
}
#contents .list li:nth-child(7) .num{
	color: #c47c32;
	background: #f9f8f7;
	border: 0.2929vw solid #d6bba3;
}
#contents .list li:nth-child(8) .num{
	color: #3f6590;
	background: #fcf8f8;
	border: 0.2929vw solid #b3c1ce;
}
#contents .link_wrap{
	display: flex;
	justify-content: space-between;
	margin: 0 4.1992vw;
}
#contents .link_wrap a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 29.296875vw;
	height: 8.7890625vw;
}
#contents .toc_top_btn_wrap{
	text-align: center;
	margin: 2.53906vw 0 2.34375vw;
}
#contents .toc_top_btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 8.3333vw;
	height: 2.7777vw;
	padding: 0 1.3889vw;
	color: #333;
	font-size: 0.9722vw;
	font-weight: 700;
	text-decoration: none;
	background: #fff;
	border: 2px solid #bbb;
	border-radius: 1.3889vw;
	box-sizing: border-box;
	transition: background 0.15s ease, border-color 0.15s ease;
}
#contents .toc_top_btn:hover{
	background: #F3F3F3;
	border-color: #999;
}
#contents .copyright{
	display: block;
	font-size: 0.9765vw;
	text-align: center;
	margin: 0 0 1.6601vw;
}
@media screen and (max-width: 767px) {
	#contents{
		padding: 0;
	}
	#contents .top_wrap{
		justify-content: space-between;
		margin: 1vw 0 0;
	}
	#contents .top_wrap .tit{
		width: 89.7435vw;
		margin: 0 auto;
	}
	#contents .list{
		display: block;
		margin: -2.0512vw 0 0;
	}
	#contents .list li{
		width: 79.4871vw;
		height: 89.7435vw;
		margin: 0 auto 7.6923vw;
	}
	#contents .list li .num{
		width:16vw;
		height: 16vw;
		font-size: 13.5vw;
		top: 12.3076vw;
		left: -3.0769vw;
		border: 2px solid #e2acac;
		border-width: 2px!important;
		border-radius: 0.7692vw;
	}
	#contents .list li .inner{
		width: 71.7948vw;
		height: 71.7948vw;
		border-radius: 1.5384vw;
	}
	#contents .list li .inner .tit{
		font-size: 5.8974vw;
		margin: 2.5641vw 0 1.5384vw 12.8205vw;
	}
	#contents .list li .inner img{
		width: 64.1025vw;
		margin: 0 auto;
	}
	#contents .link_wrap{
		display: block;
		width: 79.4871vw;
		margin: 0 auto;
	}
	#contents .link_wrap a{
		width: 79.4871vw;
		height: 23.5897vw;
		margin: 0 0 6.1538vw;
	}
	#contents .toc_top_btn_wrap{
		margin: 0;
	}
	#contents .toc_top_btn{
		min-width: 0;
		width: 25.64102vw;
		height: 7.6923vw;
		padding: 0;
		font-size: 3.0769vw;
		border-radius: 5.1282vw;
	}
	#contents .copyright{
		font-size: 2.5641vw;
		margin: 8.2051vw 0 6.6666vw;
	}
}

/* サイド -----------------------------*/
.side{
	position: sticky;
	top: 0;
	align-self: flex-start;
	width: 21.5277vw;
	max-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 2.0833vw 1.6666vw;
	background: url("../images/bg_side.png") no-repeat;
	box-sizing: border-box;
}
.side:before,
.side:after{
	content: "";
	position: absolute;
	display: block;
	width: 20.83333vw;
	height: 0.7638vw;
	top: 0.6944vw;
	left: 50%;
	transform: translateX(-50%);
	background: url("../images/bg_icon_side.png") no-repeat;
	background-size: cover;
}
.side:after{
	position: relative;
	top: auto;
	bottom: auto;
	margin: 0.6944vw 0 -1.3889vw;
}
.side .btn_page{
	display: flex;
	justify-content: space-between;
}
.side .btn_page a,
.side .btn{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 8.8888vw;
	height: 3.3333vw;
	font-size: 1.25vw;
	background: #fff;
	border: 2px solid #C6C6C6;
	border-radius: 0.3472vw;
	box-sizing: border-box;
}
.side .btn_page a:before,
.side .btn_page a:after,
.side .btn:before,
.side .btn:after{
	content: "";
	display: block;
	width: 0.6944vw;
	height: 0.6944vw;
	margin: 0 0.5555vw;
	background: url("../images/icon_screw.png") no-repeat;
	background-size: cover;
}
.side .list li{
	margin: 0.72916vw 0 0;
}
.side .list li a{
	display: flex;
	background: #fff;
	border: 1px solid #BF7171;
	border-radius: 0.3472vw;	
}
.side .list li a span{
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 2.5vw;
	width: 3.4722vw;
	border-radius: 0.2777vw 0 0 0.2777vw;
}
.side .list li a p{
	font-size: 1.041666vw;
	line-height: 1.4;
	width: calc(100% - 3.4722vw);
	padding: 0.72916vw 1.3888vw;
	box-sizing: border-box;
}
.side .list li.current a{
	color: #fff;
}
.side .list li:nth-child(1).current a,
.side .list li:nth-child(1) a span{
	background: #E28888;
}
.side .list li:nth-child(1) a span{
	border-right: 1px solid #BF7171;
}
.side .list li:nth-child(2) a{
	border: 1px solid #7BA833;
}
.side .list li:nth-child(2).current a,
.side .list li:nth-child(2) a span{
	background: #8CC63F;
}
.side .list li:nth-child(2) a span{
	border-right: 1px solid #7BA833;
}
.side .list li:nth-child(3) a{
	border: 1px solid #72655A;
}
.side .list li:nth-child(3).current a,
.side .list li:nth-child(3) a span{
	background: #8E7E6F;
}
.side .list li:nth-child(3) a span{
	border-right: 1px solid #72655A;
}
.side .list li:nth-child(4) a{
	border: 1px solid #745793;
}
.side .list li:nth-child(4).current a,
.side .list li:nth-child(4) a span{
	background: #8D68AF;
}
.side .list li:nth-child(4) a span{
	border-right: 1px solid #745793;
}
.side .list li:nth-child(5) a{
	border: 1px solid #4C7984;
}
.side .list li:nth-child(5).current a,
.side .list li:nth-child(5) a span{
	background: #578C9B;
}
.side .list li:nth-child(5) a span{
	border-right: 1px solid #4C7984;
}
.side .list li:nth-child(6) a{
	border: 1px solid #5E504B;
}
.side .list li:nth-child(6).current a,
.side .list li:nth-child(6) a span{
	background: #706059;
}
.side .list li:nth-child(6) a span{
	border-right: 1px solid #5E504B;
}
.side .list li:nth-child(7) a{
	border: 1px solid #A06733;
}
.side .list li:nth-child(7).current a,
.side .list li:nth-child(7) a span{
	background: #BF7F40;
}
.side .list li:nth-child(7) a span{
	border-right: 1px solid #A06733;
}
.side .list li:nth-child(8) a{
	border: 1px solid #3B5A7A;
}
.side .list li:nth-child(8).current a,
.side .list li:nth-child(8) a span{
	background: #43658E;
}
.side .list li:nth-child(8) a span{
	border-right: 1px solid #3B5A7A;
}
.side .btn{
	width: 100%;
	font-size: 1.1111vw;
	margin: 1.0416vw 0 0;
}
.side .btn.btn_quiz{
	height: auto;
	min-height: 3.3333vw;
	padding: 0.35vw 0;
}
.side .btn.btn_quiz .btn_quiz_inner{
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
	text-align: center;
}
.side .btn.btn_quiz .btn_external_note{
	display: block;
	font-size: 0.7vw;
	line-height: 1.3;
	color: #6c6c6c;
	margin-top: 0.15vw;
}
.side .btn .btn_label{
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}
.side .btn .btn_label ruby{
	display: inline-block;
	vertical-align: middle;
}
.side .btn.btn_characters{
	font-size: 1.04vw;
}
.side .btn.btn_characters .btn_label{
	align-items: baseline;
	line-height: 1;
	position: relative;
	top: -0.14em;
}
.side .btn.btn_characters .btn_label ruby{
	display: ruby;
	vertical-align: baseline;
}
.side .btn.btn_characters .btn_label rt{
	display: ruby-text;
	font-size: 0.45em;
	line-height: 1;
	white-space: nowrap;
}
.side .btn.current{
	background: #FFFEDE;
}
.side .btn_menu{
	margin: 1.0416vw 0 0;
}
.side .btn_menu .tit{
	font-size: 1.1805vw;
	text-align: center;
	text-shadow:
    -3px  0   0 white,
     3px  0   0 white,
     0   -3px 0 white,
     0    3px 0 white,
    -2px -2px 0 white,
     2px -2px 0 white,
    -2px  2px 0 white,
     2px  2px 0 white,
    -3px -1px 0 white,
    -3px  1px 0 white,
     3px -1px 0 white,
     3px  1px 0 white,
    -1px -3px 0 white,
     1px -3px 0 white,
    -1px  3px 0 white,
     1px  3px 0 white;
}
.side .btn_menu .wrap{
	display: flex;
	margin: 0.6944vw 0 0;
}
.side .btn_menu .wrap a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50%;
	height: 2.7777vw;
	color: #808080;
	font-size: 1.1805vw;
	background: #fff;
	border: 2px solid #C6C6C6;
}
.side .btn_menu .wrap a:first-of-type{
	border-radius: 1.3888vw 0 0 1.3888vw;
	border-right: none;
}
.side .btn_menu .wrap a:last-of-type{
	border-radius: 0 1.3888vw 1.3888vw 0;
	border-left: none;
}
.side .btn_menu .wrap a.current{
	color: #fff;
	background: #6DB72D;
	border: 2px solid #5B9324;
}
@media screen and (max-width: 767px) {
	.side:before,
	.side:after,
	.side .btn_page{
		display: none;
	}
	.side .list li{
		margin: 0 0 3.75vw;
	}
	.side .list li a{
		border-radius: 1.25vw;	
	}
	.side .list li a span{
		font-size: 9vw;
		width: 15.5vw;
		border-radius: 1vw 0 0 1vw;
	}
	.side .list li a p{
		font-size: 4.5vw;
		width: calc(100% - 15.5vw);
		padding: 1.5vw 5.25vw;
	}
	.side .btn{
		height: 12.5vw;
		font-size: 4.25vw;
		margin: 0 0 3vw;
	}
	.side .btn.btn_quiz{
		height: 12.5vw;
		min-height: 0;
		margin: 0 0 20vw;
	}
	.side .btn.btn_quiz .btn_external_note{
		font-size: 2.5vw;
		margin-top: 0.75vw;
	}
	.side .btn.btn_characters{
		font-size: 4.25vw;
	}
	.side .btn_menu{
		display: none;
	}
	.side .btn_page a:before,
	.side .btn_page a:after,
	.side .btn:before,
	.side .btn:after{
		width: 2.5vw;
		height: 2.5vw;
		margin: 0 2vw;
	}
}

/* スマホメニュー-----------------------------*/
.smp_menu{
	display: none;
}
@media screen and (max-width: 767px) {
	.smp_menu{
		position: fixed;
		display: block;
		width: 100%;
		height: 18.4615vw;
		top: 0;
		border-bottom: 2px solid #A9A9A9;
		background: url("../images/bg_smp_menu.png") no-repeat;
		background-size: cover;
		z-index: 9998;
	}
	.smp_menu .inner{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100%;
		padding: 0 6.1538vw;
		box-sizing: border-box;
	}
	.menu-trigger {
		position: relative;
		width: 12.3076vw;
		height: 12.3076vw;
		border: 2px solid #949293;
		background: #A9A9A9;
		border-radius: 1.28205vw;
		box-sizing: border-box;
	}
	.menu-trigger_inner{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 10vw;
	}
	.menu-trigger span {
		display: block;
		width: 8.2051vw;
		height: 0.7692vw;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 1.5384vw;
		transition: all .5s;
	}
	.menu-trigger span:nth-of-type(2) {
		margin: 1.5384vw auto;
	}
	.menu-trigger.active span:nth-of-type(1) {
		transform: rotate(45deg) translate(2vw, 2vw);
	}
	.menu-trigger.active span:nth-of-type(2) {
		opacity: 0;
	}
	.menu-trigger.active span:nth-of-type(3) {
		transform: rotate(-45deg) translate(1.25vw, -1.25vw);
	}	
	.smp_menu .btn_page{
		display: flex;
		justify-content: space-between;
	}
	.smp_menu .btn_page a{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 32.5641vw;
		height: 12.3076vw;
		font-size: 4.6153vw;
		background: #fff;
		border: 2px solid #C6C6C6;
		border-radius: 1.28205vw;
		box-sizing: border-box;
	}
	.smp_menu .btn_page a:before,
	.smp_menu .btn_page a:after{
		content: "";
		display: block;
		width: 2.5641vw;
		height: 2.5641vw;
		margin: 0 2.0512vw;
		background: url("../images/icon_screw.png") no-repeat;
		background-size: cover;
	}
	.smp_menu .btn_page a:last-of-type{
		margin: 0 0 0 3.8461vw;
	}
	.side{
		position: fixed;
		width: 100%;
		height: 100vh;
		top: 18.9743vw;
		right: 0;
		padding: 7.6923vw 10.2564vw;
		transform: translateX(100%);
		transition: all .5s;
		box-sizing: border-box;
		z-index: 9998;
		overflow-y: scroll;
	}
	.side.open {
		transform: translateZ(0);
	}
	body.open{
		overflow-y: hidden;
	}
}

/* メイン -----------------------------*/
.main{
	width: 65.2777vw;
	margin: 2.4305vw auto 4.1666vw;
}
.chapter_nav{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 4.1666vw 0 0;
	padding: 0 1.3889vw;
}
.chapter_nav--first{
	justify-content: flex-end;
}
.chapter_nav--last{
	justify-content: flex-start;
}
.chapter_nav_btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4166vw;
	min-width: 8.3333vw;
	height: 2.7777vw;
	padding: 0 1.1111vw;
	color: #333;
	font-size: 0.9722vw;
	font-weight: 700;
	text-decoration: none;
	background: #fff;
	border: 2px solid #bbb;
	border-radius: 1.3889vw;
	box-sizing: border-box;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.chapter_nav_btn:hover{
	background: #F3F3F3;
	border-color: #999;
}
.chapter_nav_arrow{
	display: block;
	flex-shrink: 0;
	width: 0.7638vw;
	height: 0.7638vw;
	border: solid #333;
	border-width: 0 0 2px 2px;
	box-sizing: border-box;
}
.chapter_nav_prev .chapter_nav_arrow{
	transform: rotate(45deg);
	margin-right: -0.0694vw;
}
.chapter_nav_next .chapter_nav_arrow{
	transform: rotate(-135deg);
	margin-left: -0.0694vw;
}
body.side-right .container .side{
	order: 2;
}
body.side-right .container .main{
	order: 1;
}
.main .tit_page{
	display: flex;
	margin: 0 0 2.5vw;
	background: #fff;
	border: 2px solid #BF7171;
	border-radius: 8px;	
}
.main .tit_page span.num{
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 2.7777vw;
	width: 4.7222vw;
	background: #E28888;
	border-right: 2px solid #BF7171;
	border-radius: 5px 0 0 5px;
}
.main .tit_page span.txt{
	font-size: 1.9444vw;
	line-height: 1.4;
	width: calc(100% - 4.7222vw);
	padding: 0.9027vw 2.5vw;
	box-sizing: border-box;
}
.comment_box{
	display: flex;
	align-items: flex-start;
	margin: 0.8333vw 0 0;
}
.comment_right{
	justify-content: flex-start;
}
.comment_left{
	flex-direction: row-reverse;
}
.comment_box .icon{
	width: 5.5555vw;
	text-align: center;
}
.comment_box .icon span{
	display: block;
	margin: 0.3472vw 0 0;
}
.comment_box .txt{
	position: relative;
	width: 50.6944vw;
	line-height: 2;
	padding: 0.9027vw 1.6666vw;
	margin: 0.6944vw 1.7361vw 0;
	background: #fff;
	border: 2px solid #EC9E9E;
	border-radius: 0.2777vw;
	box-sizing: border-box;
}
.comment_box .txt:before {
  content: "";
  position: absolute;
  top: 2.0833vw;
  left: 0;
  border-style: solid;
  border-width: 0.5555vw 1.0416vw 0.5555vw 0;
  border-color: transparent #EC9E9E transparent transparent;
  translate: -100% -50%;
}
.comment_box .txt:after {
  content: "";
  position: absolute;
  top: 2.0833vw;
  left: 0;
  border-style: solid;
  border-width: 0.4166vw 0.6944vw 0.4166vw 0;
  border-color: transparent #fff transparent transparent;
  translate: -100% -50%;
}
.comment_box.comment_left .txt:before {
  left: auto;
  right: 0;
  border-width: 0.5555vw 0 0.5555vw 1.0416vw;
  border-color: transparent transparent transparent #EC9E9E;
  translate: 100% -50%;
}
.comment_box.comment_left .txt:after {
  left: auto;
  right: 0;
  border-style: solid;
  border-width: 0.4166vw 0 0.4166vw 0.6944vw;
  border-color: transparent transparent transparent #fff;
  translate: 100% -50%;
}
.comment_box.rin .txt{
	border: 2px solid #E6D84F;
}
.comment_box.rin .txt:before{
  border-color: transparent #E6D84F transparent transparent;
}
.comment_box.comment_left.rin .txt:before {
  border-color: transparent transparent transparent #E6D84F;
}
.comment_box.puppy .txt{
	border: 2px solid #89CFF5;
}
.comment_box.puppy .txt:before{
  border-color: transparent #89CFF5 transparent transparent;
}
.comment_box.comment_left.puppy .txt:before {
  border-color: transparent transparent transparent #89CFF5;
}
.comment_box.other .txt{
	border: 2px solid #FFB200;
}
.comment_box.other .txt:before{
  border-color: transparent #FFB200 transparent transparent;
}
.comment_box.comment_left.other .txt:before {
  border-color: transparent transparent transparent #FFB200;
}
.main_catch{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4583vw;
	width: 51.0416vw;
	height: 4.0277vw;
	margin: 0 auto;
	background: linear-gradient(to right, #B0B0B0 0%, #E0E0E0 20%, #FFFFFF 50%, #E0E0E0 80%, #B0B0B0 100%);
	border: 4px solid #999;
	border-radius: 2.0833vw;
}
p.main_catch{
	margin-top: 2vw;
}
.think_box{
	width: 51.0416vw;
	margin: 0 auto;
	background: #FFFAC5;
	border: 2px solid #E6D84F;
	border-radius: 4px;
}
.think_box .tit{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 9.1666vw;
	height: 2.2222vw;
	color: #fff;
	font-size: 1.25vw;
	margin: -2px auto 0;
	background: #FF8800;
	border-radius: 0 0 5px 5px;
}
.think_box .wrap{
	display: flex;
	align-items: center;
	padding: 0 2.6388vw;
}
.think_box .wrap .icon{
	width: 4.8611vw;
	margin: 0 1.3888vw 0 0;
}
.think_box .wrap .txt{
	width: calc(100% - 4.8611vw);
	font-size: 1.4583vw;
	line-height: 1.9;
}
.think_box.puppy{
	background: #E2F5FF;
	border: 2px solid #89CFF5;
	padding: 0 0  1.9444vw;
}
.think_box.puppy .tit{
	background: #006A99;
}
.think_box.puppy .wrap{
	margin: 1.1111vw 0 0;
}
.btn_movie{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20.6444vw;
	height: 4.5833vw;
	font-size: 1.4583vw;
	background: #F3F3F3;
	border-radius: 2.2916vw;
	border: 2px solid #bbb;
	margin: 0 auto;
}
.btn_movie img{
	width: 2.9166vw;
	margin: 0 1.5277vw 0 0;
}
body.movie_modal_open{
	overflow: hidden;
}
.movie_modal{
	position: fixed;
	display: none;
	align-items: center;
	justify-content: center;
	inset: 0;
	z-index: 10000;
	padding: 4.1666vw;
	background: rgba(0,0,0,0.75);
	box-sizing: border-box;
}
.movie_modal.is-open{
	display: flex;
}
.movie_modal_overlay{
	position: absolute;
	inset: 0;
}
.movie_modal_body{
	position: relative;
	z-index: 1;
	width: 72.2222vw;
	max-width: 960px;
	background: #000;
	box-sizing: border-box;
}
.movie_modal_video{
	display: block;
	width: 100%;
	max-height: 80vh;
	background: #000;
}
.movie_modal_close{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.3333vw;
	height: 3.3333vw;
	top: -1.6666vw;
	right: -1.6666vw;
	color: #fff;
	font-size: 2.2222vw;
	line-height: 1;
	background: #000;
	border: 2px solid #fff;
	border-radius: 50%;
	cursor: pointer;
	z-index: 2;
}
@media screen and (max-width: 767px) {
	.main{
		width: 100%;
		margin: 0;
		padding: 6.1538vw 3.8461vw 10.2564vw;
		box-sizing: border-box;
	}
	.chapter_nav {
		margin: 10.1666vw 0 0;
	}
	.chapter_nav_btn {
		min-width: 30vw;
		height: 8vw;
		padding: 0 1.1111vw;
		font-size: 2.9722vw;
		border-radius: 4vw;
	}
	.chapter_nav_arrow {
		width: 1.7638vw;
		height: 1.7638vw;
	}
	.main .tit_page{
		margin: 0 0 7.6923vw;
		border-radius: 5px;	
	}
	.main .tit_page span.num{
		font-size: 5.6410vw;
		width: 9.2307vw;
		border-radius: 3px 0 0 3px;
	}
	.main .tit_page span.txt{
		font-size: 4.3589vw;
		width: calc(100% - 9.2307vw);
		padding: 2.5vw;
	}
	.comment_box{
		margin: 2.5641vw 0 0;
	}
	.comment_box .icon{
		width: 12.8205vw;
	}
	.comment_box .icon span{
		font-size: 2.5641vw;
		margin: 1.5vw 0 0;
	}
	.comment_box .txt{
		width: 75.8974vw;
		font-size: 3.5897vw;
		padding: 2.5641vw;
		margin: 0.6944vw 1.7361vw 0;
		border-radius: 1.0256vw;
	}
	.comment_box.comment_right .txt{
		margin: 0.6944vw 0 0 3.5897vw;
	}	
	.comment_box.comment_left .txt{
		margin: 0.6944vw 3.5897vw 0 0;
	}
	.comment_box .txt:before {
		top: 6.1538vw;
		border-width: 1.6666vw 2.8205vw 1.6666vw 0;
		translate: -100% -50%;
	}
	.comment_box .txt:after {
		top: 6.1538vw;
		border-width: 1.4102vw 2.5641vw 1.4102vw 0;
		translate: -78% -50%;
	}
	.comment_box.comment_left .txt:before {
		border-width: 1.6666vw 0 1.6666vw 2.8205vw;
	}
	.comment_box.comment_left .txt:after {
		border-width: 1.4102vw 0 1.4102vw 2.5641vw;
		translate: 78% -50%;
	}
	.main_catch{
		font-size: 3.5vw;
		line-height: 1.7;
		width: 100%;
		height: auto;
		padding: 2.5641vw;
		border: 3px solid #999;
		border-radius: 5.1282vw;
		box-sizing: border-box;
	}
	.think_box{
		width: 100%;
		border-radius: 1.25vw;
	}
	.think_box .tit{
		width: 30vw;
		height: 7.5vw;
		font-size: 4vw;
		border-radius: 0 0 1.25vw 1.25vw;
	}
	.think_box .wrap{
		padding: 1vw 3.5vw 0;
	}
	.think_box .wrap .icon{
		width: 12.5vw;
		margin: 0 3.5vw 0 0;
	}
	.think_box .wrap .txt{
		width: calc(100% - 12.5vw);
		font-size: 3.5vw;
	}
	.think_box.puppy{
		padding: 0 0 2vw 0;
	}
	.think_box.puppy .wrap{
		margin: 0;
	}
	.btn_movie{
		width: 50vw;
		height: 10vw;
		font-size: 3.5vw;
		border-radius: 5vw;
	}
	.btn_movie img{
		width: 5vw;
		margin: 0 3vw 0 0;
	}
.movie_modal{
	position: fixed;
	display: none;
	align-items: center;
	justify-content: center;
	inset: 0;
	z-index: 10000;
	padding: 4.1666vw;
	background: rgba(0,0,0,0.75);
	box-sizing: border-box;
}
.movie_modal.is-open{
	display: flex;
}
.movie_modal_overlay{
	position: absolute;
	inset: 0;
}
.movie_modal_body{
	position: relative;
	z-index: 1;
	width: 72.2222vw;
	max-width: 960px;
	background: #000;
	box-sizing: border-box;
}
.movie_modal_video{
	display: block;
	width: 100%;
	max-height: 80vh;
	background: #000;
}
.movie_modal_close{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.3333vw;
	height: 3.3333vw;
	top: -1.6666vw;
	right: -1.6666vw;
	color: #fff;
	font-size: 2.2222vw;
	line-height: 1;
	background: #000;
	border: 2px solid #fff;
	border-radius: 50%;
	cursor: pointer;
	z-index: 2;
}
}

/* 1章-----------------------------*/
#chapter1 .container{
	background: #FFF5F5;
}
#chapter1 .main_catch{
	margin: 2vw auto;
}
.img_chapter1_puppy{
	width: 51.0416vw;
	margin: 1.5vw auto 4.0277vw;
	text-align: center;
}
.img_chapter1_puppy_inner{
	position: relative;
	width: 100%;
}
.img_chapter1_puppy_preview img{
	display: block;
	width: 100%;
	height: auto;
}
.img_chapter1_puppy_game{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.img_chapter1_puppy.is-playing .img_chapter1_puppy_preview{
	display: none;
}
.img_chapter1_puppy.is-playing .img_chapter1_puppy_game{
	display: block;
	position: relative;
	top: auto;
	left: auto;
	height: auto;
}
.img_chapter1_puppy_game iframe{
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.img_chapter1_puppy.is-playing .img_chapter1_puppy_game iframe{
	height: auto;
	min-height: 0;
	aspect-ratio: 2057 / 1152;
}
.img_chapter1_puppy .btn_chapter1_game{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14.9vw;
	height: 3.3vw;
	margin: 1.3889vw auto 0;
	font-size: 1.06vw;
	font-weight: 700;
	color: #fff;
	background: #FF8C00;
	border: 2px solid #E67E00;
	border-radius: 1.65vw;
	box-sizing: border-box;
	cursor: pointer;
}
.img_chapter1_puppy .btn_chapter1_game:hover{
	background: #E67E00;
}
.img_chapter1_puppy.is-playing .btn_chapter1_game{
	display: none;
}
.chapter1-game-controls{
	display: none;
	margin-top: 1.1111vw;
	text-align: center;
}
.img_chapter1_puppy.is-playing .chapter1-game-controls{
	display: block;
}
.chapter1-game-playing-actions{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.9722vw;
	flex-wrap: wrap;
}
.chapter1-game-end-actions{
	display: none;
	justify-content: center;
	align-items: center;
	gap: 0.9722vw;
	flex-wrap: wrap;
}
.chapter1-game-controls.is-ended .chapter1-game-playing-actions{
	display: none;
}
.chapter1-game-controls.is-ended .chapter1-game-end-actions{
	display: flex;
}
.chapter1-show-answers-btn,
.chapter1-quit-btn,
.chapter1-game-replay-btn,
.chapter1-game-close-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 8.9vw;
	height: 3.3vw;
	padding: 0 1.15vw;
	font-size: 1.06vw;
	font-weight: 700;
	border-radius: 1.65vw;
	box-sizing: border-box;
	cursor: pointer;
}
.chapter1-show-answers-btn{
	color: #fff;
	background: #FF8C00;
	border: 2px solid #E67E00;
}
.chapter1-show-answers-btn:hover{
	background: #E67E00;
}
.chapter1-quit-btn{
	color: #6DB72D;
	background: #fff;
	border: 2px solid #6DB72D;
}
.chapter1-quit-btn:hover{
	background: #f5faf0;
}
.chapter1-game-replay-btn{
	color: #6DB72D;
	background: #fff;
	border: 2px solid #6DB72D;
}
.chapter1-game-replay-btn:hover{
	background: #f5faf0;
}
.chapter1-game-close-btn{
	color: #fff;
	background: #6DB72D;
	border: 2px solid #6DB72D;
}
.chapter1-game-close-btn:hover{
	background: #5a9a25;
	border-color: #5a9a25;
}
#chapter1.is-game-playing .img_chapter1_puppy.is-playing{
	position: relative;
	z-index: 9001;
}
.chapter1-game-overlay{
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.8);
	z-index: 9000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.45s ease, visibility 0s 0.45s;
}
#chapter1.is-game-playing .chapter1-game-overlay{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.45s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
	.chapter1-game-overlay,
	#chapter1.is-game-playing .chapter1-game-overlay{
		transition: none;
	}
}
@media screen and (max-width: 767px) {
	#chapter1 .main_catch{
		margin: 8vw 0 4vw;
	}
	.img_chapter1_puppy{
		width: 100%;
		margin: 6.1538vw 0;
	}
	.img_chapter1_puppy .btn_chapter1_game{
		width: 64.1025vw;
		height: 9.2307vw;
		margin: 4.6153vw auto 0;
		font-size: 3.0769vw;
		border-radius: 5.1282vw;
	}
	.chapter1-game-controls{
		margin-top: 3.0769vw;
	}
	.chapter1-show-answers-btn,
	.chapter1-quit-btn,
	.chapter1-game-replay-btn,
	.chapter1-game-close-btn{
		min-width: 25.64102vw;
		height: 6.6666vw;
		padding: 0 1.0256vw;
		font-size: 2.5641vw;
		border-radius:4.6153vw;
	}
}

/* 2章 -----------------------------*/
#chapter2 .container{
	background: #F8FFEF;
}
#chapter2 .main .tit_page{
	border: 2px solid #7BA833;
}
#chapter2 .main .tit_page span.num{
	background: #8CC63F;
	border-right:  2px solid #7BA833;
}
#chapter2 .main_catch{
	margin: 2vw auto 2.2222vw;
}
.main_catch.main_catch_ruby_fix .main_catch_label{
	display: inline-flex;
	align-items: baseline;
	position: relative;
	top: -0.10em;
}
#chapter2 .tit_cnt{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 51.0416vw;
	height: 3.6111vw;
	font-size: 1.25vw;
	margin: 2.9861vw auto 2.5694vw;
	background: #F3F3F3;
	border: 2px solid #D0D0D0;
	box-sizing: border-box;
}
#chapter2 .tit_cnt.tit_cnt_ruby_fix{
	top: 0;
}
#chapter2 .tit_cnt.tit_cnt_ruby_fix .tit_cnt_label{
	display: inline-flex;
	align-items: baseline;
	position: relative;
	top: -0.10em;
}
#chapter2 .img_wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 51.0416vw;
	margin: 0 auto 4.5138vw;
}
#chapter2 .img_wrap li{
	width: 15.7638vw;
	text-align: center;
}
#chapter2 .img_wrap:after {
	display: block;
	content:"";
	width: 15.7638vw;
}
#chapter2 .img_wrap li span{
	display: block;
	margin: 1.7361vw 0 0;
}
#chapter2 .img_wrap.ruby_caption_list li span{
	padding-top: 0.55em;
	box-sizing: border-box;
}
#chapter2 .img_wrap.ruby_caption_list li span.ruby_caption{
	padding-top: 0;
}
#chapter2 .think_box.rin{
	margin: 0 auto 2.9166vw;
}
#chapter2 .img_wrap.various_list{
	margin: 2.1527vw auto 0;
}
#chapter2 .img_wrap.various_list li{
	margin: 0 0 0.3472vw;
	width: 23.9583333vw;
}
#chapter2 .img_wrap.various_list li span{
	margin: 0.5556vw 0 0.4167vw;
	padding-top: 0.55em;
	min-height: 2.2em;
	line-height: 1.5;
	box-sizing: border-box;
}
#chapter2 .btn_movie{
	margin: 2.3611vw auto 3.1944vw;
}
#chapter2 .graph{
	width: 43.0555vw;
	margin: 3.6111vw auto 0;
}
@media screen and (max-width: 767px) {
	.main_catch.main_catch_ruby_fix .main_catch_label{
		display: block;
	}
	#chapter2 .main_catch{
		margin: 0 0 7.5vw;
	}
	#chapter2 .tit_cnt{
		width: 90%;
		height: 10vw;
		font-size: 3.25vw;
		margin: 7.5vw auto 3.75vw;
	}
	#chapter2 .img_wrap{
		width: 100%;
		margin: 0 auto 4vw;
	}
	#chapter2 .img_wrap li{
		width: calc(100% / 3);
		padding: 0 2vw;
		box-sizing: border-box;
	}
	#chapter2 .img_wrap:after {
		display: none;
	}
	#chapter2 .img_wrap li span{
		font-size: 3vw;
		margin: 1.7361vw 0 0;
	}
	#chapter2 .think_box.rin{
		margin: 0 auto 7.5vw;
	}
	#chapter2 .img_wrap.various_list{
		margin: 7.5vw auto 0;
	}
	#chapter2 .img_wrap.various_list li{
		margin: 0 0 5vw;
		width: 50%;
	}
	#chapter2 .img_wrap.various_list li span{
		margin: 3vw 0 2.5vw;
		font-size: 2.6vw;
		line-height: 1.5;
		padding-top: 0.55em;
		min-height: 2.4em;
		word-break: keep-all;
	}
	#chapter2 .btn_movie{
		margin: 4.5vw auto 7.5vw;
	}
	#chapter2 .graph{
		width: 100%;
		margin: 7.5vw auto 0;
	}
}

/* 3章 -----------------------------*/
#chapter3 .container{
	background: #FBF7F2;
}
#chapter3 .main .tit_page{
	border: 2px solid #72655A;
}
#chapter3 .main .tit_page span.num{
	background: #8E7E6F;
	border-right:  2px solid #72655A;
}
#chapter3 .main_catch{
	margin: 2vw auto 2.2222vw;
}
#chapter3 .think_box{
	margin: 1.25vw auto 0;
}
#chapter3 .img_steel_plant{
	width: 51.0416vw;
	margin: 3.3333vw auto 3.4722vw;
}
#chapter3 .img_place{
	width: 41.5277vw;
	margin: 1.6666vw auto 3.3333vw;
}
#chapter3 .img_wrap{
	display: flex;
	flex-direction: column;
	width: 36.458333vw;
	margin: 3.4722vw auto 2.7777vw;
}
#chapter3 .img_wrap li{
	width: 36.458333vw;
	text-align: center;
	margin-bottom: 2.7777vw;
}
#chapter3 .img_wrap li span{
	display: block;
	margin: 1.7361vw 0 0;
}
#chapter3 .flow{
	width: 51.0416vw;
	margin: 0 auto 2.7777vw;
}
#chapter3 .flow li{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 0 1.6666vw;
}
#chapter3 .flow li span{
	display: block;
	text-align: center;
	margin: 0.8333vw 0 0;
}
#chapter3 .flow li:after{
	content: "";
	display: block;
	border-style:solid;
	border-width: 1.3888vw 1.7361vw 0 1.7361vw;
	border-color: #F58300 transparent transparent transparent;
	margin: 1.0416vw 0 0;
}
#chapter3 .flow li:last-child:after{
	display: none;
}
#chapter3 .img_import_source{
	width: 51.0416vw;
	margin: 4.1666vw auto 0;
}
@media screen and (max-width: 767px) {
	#chapter3 .main_catch{
		margin: 7.5vw 0;
	}
	#chapter3 .think_box{
		margin: 7.5vw 0 3.75vw;
	}
	#chapter3 .img_steel_plant{
		width: 100%;
		margin: 0 0 7.5vw;
	}
	#chapter3 .img_place{
		width: 100%;
		margin: 7.5vw 0;
	}
	#chapter3 .img_wrap{
		width: 100%;
		margin: 5vw 0;
	}
	#chapter3 .img_wrap li{
		width: 100%;
		margin-bottom: 5vw;
	}
	#chapter3 .img_wrap li:last-child{
		margin: 0;
	}
	#chapter3 .img_wrap li span{
		margin: 2.5vw 0 0;
	}
	#chapter3 .flow{
		width: 100%;
		margin: 7.5vw 0;
	}
	#chapter3 .flow li{
		margin: 0 0 5vw;
	}
	#chapter3 .flow li span{
		margin: 2.5vw 0 0;
	}
	#chapter3 .flow li:after{
		border-width: 3.75vw 4.25vw 0 4.25vw;
		margin: 2vw 0 0;
	}
	#chapter3 .img_import_source{
		width: 100%;
		margin: 7.5vw auto 0;
	}
}

/* 4章 -----------------------------*/
#chapter4 .container{
	background: #FCF9FF;
}
#chapter4 .main .tit_page{
	border: 2px solid #745793;
}
#chapter4 .main .tit_page span.num{
	background: #8D68AF;
	border-right:  2px solid #745793;
}
#chapter4 .main_catch{
	margin: 2vw auto 1.7361vw;
}
#chapter4 .think_box.normal{
	border: 2px solid #8D68AF;
	background: #F6F1FB;
}
#chapter4 .think_box.normal .tit{
	width: 12.9166vw;
	background: #8D68AF;
}
#chapter4 .think_box.normal .wrap{
	justify-content: center;
	margin: 1.1805vw 0 1.6666vw;
}
#chapter4 .think_box.normal.box3{
	margin: 1.25vw auto 0;
}
#chapter4 .img_cnt{
	width: 51.0416vw;
	margin: 2.6388vw auto 3.2638vw;
}
#chapter4 .blast_furnace li:first-child{
	margin: 0 0 3.1944vw;
}
#chapter4 .img_cnt span{
	display: block;
	text-align: center;
	margin: 0.75vw 0 1.5vw;
}
#chapter4 .btn_movie{
	margin: 0 auto 4.1666vw;
}
#chapter4 .list_steel{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 51.0416vw;
	margin: 2.6388vw auto 3.2638vw;
}
#chapter4 .list_steel li{
	width: 24.7222vw;
	margin: 0 0 0.9722vw;
}
#chapter4 .list_steel li span{
	display: block;
	text-align: center;
	margin: 0.8333vw 0 0;
	padding-top: 0.55em;
	min-height: 2.2em;
	line-height: 1.5;
	box-sizing: border-box;
}
@media screen and (max-width: 767px) {
	#chapter4 .main_catch{
		margin: 7.5vw 0;
	}
	#chapter4 .think_box.normal{
		margin: 5vw 0;
	}
	#chapter4 .think_box.normal .tit{
		width: 50vw;
	}
	#chapter4 .think_box.normal .wrap{
		margin: 2vw 3.5vw;
	}
	#chapter4 .think_box.normal .wrap .txt{
		width: 100%;
		text-align: center;
	}
	#chapter4 .think_box.normal.box3{
		margin: 5vw 0;
	}
	#chapter4 .img_cnt{
		width: 100%;
		margin: 7.5vw 0;
	}
	#chapter4 .blast_furnace li:first-child{
		margin: 0 0 7vw;
	}
	#chapter4 .img_cnt span{
		margin: 2.5vw 0 0;
	}
	#chapter4 .btn_movie{
		margin: 0 auto 10vw;
	}
	#chapter4 .list_steel{
		display: block;
		width: 100%;
		margin: 7.5vw 0;
	}
	#chapter4 .list_steel li{
		width: 100%;
		margin: 0 0 5vw;
	}
	#chapter4 .list_steel li span{
		margin: 2.5vw 0 0;
		padding-top: 0.55em;
		min-height: 2.4em;
		line-height: 1.5;
		word-break: keep-all;
	}
}

/* 5章 -----------------------------*/
#chapter5 .container{
	background: #EEF7FA;
}
#chapter5 .main .tit_page{
	border: 2px solid #4C7984;
}
#chapter5 .main .tit_page span.num{
	background: #578C9B;
	border-right:  2px solid #4C7984;
}
#chapter5 .main_catch{
	margin: 2vw auto 1.7361vw;
}
#chapter5 .img_cnt{
	width: 51.0416vw;
	margin: 2.6388vw auto 3.2638vw;
}
#chapter5 .img_cnt.tit{
	width: 31.25vw;
}
#chapter5 .img_cnt span{
	display: block;
	text-align: center;
	margin: 0.75vw 0 0;
}
#chapter5 .img_cnt.clm_2{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#chapter5 .img_cnt.clm_2 a{
	width: 49%;
	margin: 0 0.5%;
}
#chapter5 .img_cnt.clm_2 a span{
	display: block;
	text-align: center;
	margin: 0.8333vw 0 0;
}
@media screen and (max-width: 767px) {
	#chapter5 .main_catch{
		margin: 0 0 7.5vw;
	}
	#chapter5 .img_cnt{
		width: 100%;
		margin: 7.5vw 0;
	}
	#chapter5 .img_cnt.tit{
		width: 90%;
		margin: 7vw auto;
	}
	#chapter5 .img_cnt span{
		margin: 2.5vw 0 0;
	}
	#chapter5 .img_cnt.clm_2 a{
		width: 50%;
		margin: 0;
	}
	#chapter5 .img_cnt.clm_2 a span{
		margin: 2.5vw 0 0;
	}
}

/* 6章 -----------------------------*/
#chapter6 .container{
	background: #F9F6F2;
}
#chapter6 .main .tit_page{
	background: #EDE9E8;
	border: 2px solid #5E504B;
}
#chapter6 .main .tit_page span.num{
	background: #706059;
	border-right:  2px solid #5E504B;
}
#chapter6 .main_catch{
	margin: 2vw auto 1.7361vw;
}
#chapter6 .img_cnt{
	width: 51.0416vw;
	text-align: center;
	margin: 2.6388vw auto 3.2638vw;
}
#chapter6 .img_cnt .tit{
	margin: 0 0 2.0833vw;
	font-size: 1.5625vw;
	border-bottom:1px solid #000;
}
#chapter6 .img_cnt .cap{
	font-size: 0.9722vw;
	margin:  0.6944vw 0 0;
	line-height: 1.6;
}
#chapter6 .img_cnt .note{
	font-size: 0.9722vw;
	text-align: right;
	margin: 0 0 0.5555vw;
}
#chapter6 .img_cnt.crude{
	margin: 4.1666vw auto 3.4722vw;
}
#chapter6 .img_cnt.crude .cap{
	display: flex;
	justify-content: flex-end;
	width: 45.4166vw;
	text-align: left;
	margin: 1.25vw 0 0 auto;
}
#chapter6 .img_cnt.carbon{
	margin: 3.4722vw auto 2.7777vw;
}
#chapter6 .img_cnt.carbon .cap{
	text-align: left;
}
#chapter6 .main .list{
	width: 51.0416vw;
	margin: 0 auto 4.1666vw;
}
#chapter6 .main .list li{
	margin: 0 0 3vw;
}
#chapter6 .main .list li span{
	display: block;
	text-align: center;
	margin: 0.75vw 0 0;
}
#chapter6 .think_box{
	margin: 5.4166vw auto 4.8611vw;
}
#chapter6 .high_performance{
	margin: 4.8611vw auto 0;
}
#chapter6 .high_performance .btn_movie{
	margin: 2.0833vw auto 0;
}
#chapter6 .high_performance .img_cnt .txt{
	margin: 1.25vw 0 0;
}
@media screen and (max-width: 767px) {
	#chapter6 .main_catch,
	#chapter6 .img_cnt.carbon,
	#chapter6 .think_box,
	#chapter6 .high_performance{
		margin: 7.5vw 0;
	}
	#chapter6 .img_cnt{
		width: 100%;
		margin: 7.5vw 0;
	}
	#chapter6 .img_cnt .tit{
		font-size: 3.5vw;
		line-height: 1.7;
		margin: 3vw 0 2vw;
		padding: 0 0 2vw;
	}
	#chapter6 .img_cnt .cap{
		font-size: 3vw;
		margin: 3vw 0 0;
	}
	#chapter6 .img_cnt .note{
		font-size: 2.5vw;
		margin: 0 0 2vw;
	}
	#chapter6 .main .list{
		width: 100%;
		margin: 7.5vw 0;
	}
	#chapter6 .main .list li{
		margin: 0 0 6.5vw;
	}
	#chapter6 .main .list li span{
		margin: 2.5vw 0 0;
	}
	#chapter6 .high_performance .btn_movie{
		margin: 7.5vw auto 0;
	}
	#chapter6 .high_performance .img_cnt .txt{
		margin: 2.5vw 0 0;
	}
}

/* 7章 -----------------------------*/
#chapter7 .container{
	background: #F8F4EE;
}
#chapter7 .main .tit_page{
	border: 2px solid #A06733;
}
#chapter7 .main .tit_page span.num{
	background: #BF7F40;
	border-right:  2px solid #A06733;
}
#chapter7 .main_catch{
	margin: 2vw auto 1.7361vw;
}
#chapter7 .img_cnt{
	width: 51.0416vw;
	margin: 0 auto 3.2638vw;
}
#chapter7 .img_cnt span{
	display: block;
	text-align: center;
	margin: 1.5277vw 0 0;
}
#chapter7 .life_cycle{
	margin: 4.8611vw 0 0;
}
#chapter7 .life_cycle .img_cnt{
	margin: 2.7777vw auto 0;
}
@media screen and (max-width: 767px) {
	#chapter7 .main_catch,
	#chapter7 .life_cycle .think_box.puppy{
		margin: 7.5vw 0;
	}
	#chapter7 .img_cnt{
		width: 100%;
		margin: 7.5vw 0;
	}
	#chapter7 .img_cnt span{
		margin: 2.5vw 0 0;
	}
	#chapter7 .life_cycle{
		margin: 0;
	}
	#chapter7 .life_cycle .img_cnt{
		margin: 0;
	}
}

/* 8章 -----------------------------*/
#chapter8 .container{
	background: #F8FBFF;
}
#chapter8 .main .tit_page{
	background: #EEF3F9;
	border: 2px solid #3B5A7A;
}
#chapter8 .main .tit_page span.num{
	background: #43658E;
	border-right:  2px solid #3B5A7A;
}
#chapter8 .img_cnt{
	width: 51.0416vw;
	margin: 2.7777vw auto 3.2638vw;
}
#chapter8 .img_cnt span{
	display: block;
	text-align: center;
	margin: 0.6944vw 0 0;
}
#chapter8 .future{
	margin: 2.5vw 0 0;
}
#chapter8 .future .btn_movie{
	margin: 2.6388vw auto;
}
#chapter8 .future .double{
	align-items: center;
	margin: 0;
}
#chapter8 .future .double .icon img:last-of-type{
	margin: 0.6944vw 0 0;
}
#chapter8 .future .double .txt{
	display: flex;
	align-items: center;
	height: 8.3333vw;
}
#chapter8 .future .double.comment_box .txt:before,
#chapter8 .future .double.comment_box .txt:after{
	top: 50%;
}
@media screen and (max-width: 767px) {
	#chapter8 .main_catch{
		margin: 7.5vw 0;
	}
	#chapter8 .img_cnt{
		width: 100%;
		margin: 7.5vw 0;
	}
	#chapter8 .img_cnt span{
		margin: 2.5vw 0 0;
	}
	#chapter8 .future{
		margin: 2.5vw 0 0;
	}
	#chapter8 .btn_movie{
		margin: 7.5vw auto 0;
	}
	#chapter8 .future .btn_movie{
		margin: 7.5vw auto;
	}
	#chapter8 .future .double{
		margin: 5vw 0 0;
	}
	#chapter8 .future .double .icon img:last-of-type{
		margin: 2vw 0 0;
	}
	#chapter8 .future .double .txt{
		height: 25vw;
	}
}

/* 登場人物紹介 -----------------------------*/
#characters .container{
	background:#FFFEEE
}
#characters .main .tit{
	width: 44.0277vw;
	margin: 0 auto 3.4722vw;
}
#characters .main .wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#characters .wrap .cnt{
	width: 30.9722vw;
	padding: 2.2916vw 2.7777vw 1.25vw;
	margin: 0 0 3.4722vw;
	background: #FFF2F3;
	border: 2px solid #EB828A;
	border-radius: 0.5555vw;
	box-sizing: border-box;
}
#characters .wrap .cnt .img{
	display: block;
	width: 12.6388vw;
	margin: 0 auto;
}
#characters .wrap .cnt .name{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 8.1944vw;
	height: 2.8vw;
	color: #fff;
	font-size: 1.4583vw;
	margin: 2.0833vw auto 1.1111vw;
	background: #EB828A;
	border-radius: 1.4vw;
}
#characters .wrap .cnt .txt{
	line-height: 2;
}
#characters .wrap .cnt.rin{
	background: #FFFCE0;
	border: 2px solid #E6D84F;
}
#characters .wrap .cnt.rin .name{
	background: #E5C822;
}
#characters .wrap .cnt.wide{
	width: 100%;
	display: flex;
	align-items: center;
	padding: 2.0833vw 2.7777vw 2.0833vw 7.2222vw;
}
#characters .wrap .cnt.wide .img{
	width: 13.8888vw;
	margin: 0 5.8333vw 0 0;
}
#characters .wrap .cnt.wide .name{
	margin: 0 0 1.25vw;
}
#characters .wrap .cnt.puppy{
	background: #E8F7FF;
	border: 2px solid #89CFF5;
}
#characters .wrap .cnt.puppy .name{
	background: #3B75C2;
}
#characters .wrap .cnt.worker{
	background: #E4F2F3;
	border: 2px solid #A9C7C9;
	margin: 0;
}
#characters .wrap .cnt.worker .name{
	width: 14.4444vw;
	overflow: visible;
	background: #6D9294;
}
.illust_credit{
	font-size: 0.9375vw;
	text-align:left;
	margin: 1.25vw 0 0;
}
@media screen and (max-width: 767px) {
	#characters .main .tit{
		width: 100%;
		margin: 0 auto 6.5vw;
	}
	#characters .main .wrap{
		display: block;
	}
	#characters .wrap .cnt,
	#characters .wrap .cnt.wide{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 1.25vw 6.25vw;
		margin: 0 0 4.5vw;
		border-radius: 1vw;
	}
	#characters .wrap .cnt .img,
	#characters .wrap .cnt.wide .img{
		width: 20vw;
		margin: 0;
	}
	#characters .wrap .cnt .inner{
		width: 52vw;
	}
	#characters .wrap .cnt .name,
	#characters .wrap .cnt.wide .name{
		width: 14.5vw;
		height: 4.5vw;
		font-size: 3vw;
		margin: 0 0 1.25vw;
		border-radius: 2.25vw;
	}
	#characters .wrap .cnt .txt{
		font-size: 3vw;
		line-height: 1.5;
	}
	#characters .wrap .cnt.worker .name{
		display: block;
		width: 27vw;
		height: 7.5vw;
		line-height: 7.5vw;
		text-align: center;
		overflow: visible;
		border-radius: 3.75vw;
	}
	.illust_credit{
		font-size: 3vw;
		text-align: left;
		margin: 1.25vw 0 0;
	}
}

/* もっと知りたい -----------------------------*/
#motto .main .tit{
	width: 44.0277vw;
	margin: 0 auto;
}
#motto .btn_wrap{
	display: flex;
	justify-content: space-between;
	margin: 3.6805vw 0 0;
}
#motto .btn_wrap a,
#motto .tit_cnt{
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FFFDA7;
	border: 2px solid #6C6B40;
	border-radius: 0.6944vw;
	box-sizing: border-box;	
}
#motto .btn_wrap a{
	width: 32.2916vw;
	height: 5.5555vw;
	font-size: 1.6666vw;
	font-weight: 800;
}
#motto .btn_wrap a .ruby-mid,
#motto .tit_cnt .ruby-mid{
	display: inline;
	position: relative;
	line-height: inherit;
	text-align: center;
}
#motto .btn_wrap a .ruby-mid__rt,
#motto .tit_cnt .ruby-mid__rt{
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translate(-50%, 0.36em);
	font-size: 0.45em;
	line-height: 1;
	white-space: nowrap;
}
#motto .btn_wrap a .ruby-mid__rb,
#motto .tit_cnt .ruby-mid__rb{
	display: inline;
	line-height: inherit;
}
#motto .btn_wrap a img,
#motto .tit_cnt img{
	width: 1.7361vw;
	margin: 0 0.8333vw 0 0;
}
#motto .btn_wrap a:last-of-type,
#motto #cnt02 .tit_cnt{
	background: #EAF3C8;
	border: 2px solid #73795C;
}
#motto .tit_cnt{
	height: 5.5555vw;
	font-size: 2.2222vw;
}
#motto .tit_cnt img{
	margin: 0 1.25vw 0 0;
}
#motto #cnt01{
	margin: 2.7777vw 0 4.8611vw;
}
#motto #cnt01 .list{
	margin-top: 2.5vw;
}
#motto #cnt01 .list li{
	display: flex;
	justify-content: space-between;
	padding: 2.9166vw 2.7777vw;
	margin: 0 0 3.0555vw;
	border: 2px solid #aaa;
	border-radius: 0.5555vw;
	box-sizing: border-box;
}
#motto #cnt01 .list li .img{
	width: 30.5555vw;
}
#motto #cnt01 .list li .inner{
	width: 26.25vw;
}
#motto #cnt01 .list li .inner .name{
	font-size: 1.5vw;
	text-align: center;
	background: #E8E8E8;
	padding: 0.6944vw 0;
}
#motto #cnt01 .list li .inner .txt{
	line-height: 2;
	margin: 2.5vw 1.1111vw 2.9166vw;
}
#motto #cnt01 .list li .inner a{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 17.7083vw;
	height: 3.125vw;
	font-size: 1.25vw;
	margin: 0 auto;
	background: #FFFEDE;
	border: 1px solid #000;
	border-radius: 1.7361vw;
	box-sizing: border-box;
}
#motto #cnt01 .list li .inner a:after{
	content: "";
	position: absolute;
	width: 0.7638vw;
	height: 1.0416vw;
	right: 1.7361vw;
	background: url("../motto/images/icon_arrow.png") no-repeat;
	background-size: contain
}
#motto #cnt01 .btn_online{
	display: block;
	width: 36.8055vw;
	margin: 3.4722vw auto 0;
}
#motto #cnt02 .info_wrap{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin: 2.5vw 0 1.0416vw;
}
#motto #cnt02 .info_wrap p{
	display: flex;
	align-items: center;
	margin: 0 0 0 1.0416vw;
}
#motto #cnt02 .info_wrap p img{
	height: 1.5277vw;
	width: auto;
	margin: 0 0.5555vw 0 0;
}
#motto #cnt02 table{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 0.5555vw 0.5555vw 0 0;
	border: 1px solid #aaa;
	overflow: hidden;
}
#motto #cnt02 .table_wrap{
	margin: 0 0 2.7777vw;	
}
#motto #cnt02 .table_wrap:first-of-type{
	margin: 0;
}
#motto #cnt02 table th{
	font-size: 1.25vw;
	font-weight: 700;
	text-align: left;
	padding: 0.6944vw 1.9444vw;
	background: #F9FFE2;
}
#motto #cnt02 table td{
	font-size: 0.9722vw;
	font-weight: 500;
	line-height: 1.6;
	padding: 1.6666vw 1.1111vw;
	border-top: 1px solid #aaa;
	border-right: 1px solid #aaa;
}
#motto #cnt02 table td.center{
	text-align: center;
}
#motto #cnt02 table td:last-of-type{
	border-right: none;
}
#motto #cnt02 table td a{
	display: block;
	font-weight: 500;
	margin: 1.1805vw 0 0;
}
#motto #cnt02 table td a img{
	width: 0.5555vw;
	height: auto;
	vertical-align: middle;
	margin: 0 0 0 0.4166vw;
}
#motto #cnt02 table td img{
	height: 1.0416vw;
	width: auto;
	margin: 0 0.5555vw 0 0;
	vertical-align: middle;
}
#motto #cnt02 table td span.small{
	font-size: 0.6944vw;
	font-weight: 500;
}
#motto #cnt02 table td.company{
	width: 16.49%;
}
#motto #cnt02 table td.branch{
	width: 16.38%;
}
#motto #cnt02 table td.address{
	width: 23.83%;
}
#motto #cnt02 table td.tel{
	width: 15.21%;
}
#motto #cnt02 table td.entry{
	width: 12.34%;
	padding: 1.6666vw 0;
}
#motto #cnt02 table td.participant{
	width: 16.38%;
	padding: 1.6666vw 0.6944vw;
}
#motto #cnt02 .notice{
	font-size: 0.6944vw;
	line-height: 1.8;
	margin: 1.3888vw 1.1805vw 0;
}
@media screen and (max-width: 767px) {
	#motto .main .tit{
		width: 100%;
	}
	#motto .btn_wrap{
		display: block;
		margin: 7.5vw 0 12.5vw;
	}
	#motto .btn_wrap a,
	#motto .tit_cnt{
		width: 100%;
		height: 12.5vw;
		font-size: 4vw;
		border-radius: 2.5vw;
	}
	#motto .btn_wrap a img,
	#motto .tit_cnt img{
		width: 4.5vw;
		margin: 0 2.5vw 0 0;
	}
	#motto .btn_wrap a:first-child{
		margin: 0 0 5vw;
	}
	#motto .tit_cnt{
		font-size: 5vw;
	}
	#motto #cnt01{
		margin: -20.4615vw 0 12.5vw;
        padding-top: 20.4615vw;
	}
	#motto #cnt01 .list{
		margin-top: 5vw;
	}
	#motto #cnt01 .list li{
		display: block;
		padding: 3.5vw 3.5vw 5vw;
		margin: 0 0 5vw;
		border-radius: 1.5vw;
	}
	#motto #cnt01 .list li .img,
	#motto #cnt01 .list li .inner{
		width: 100%;
	}
	#motto #cnt01 .list li .inner .name{
		font-size: 4vw;
		padding: 2vw 0;
		margin: 4vw 0;
	}
	#motto #cnt01 .list li .inner .txt{
		margin: 0;
	}
	#motto #cnt01 .list li .inner a{
		width: 45vw;
		height: 10vw;
		font-size: 3.5vw;
		border-radius: 5vw;
		margin: 4vw auto 0;
	}
	#motto #cnt01 .list li .inner a:after{
		width:2.5vw;
		height: 2.5vw;
		right: 3vw;
	}
	#motto #cnt02{
		margin: -20.4615vw 0 12.5vw;
        padding-top: 20.4615vw;
	}
	#motto #cnt02 .info_wrap{
		margin: 4vw 0 3vw;
	}
	#motto #cnt02 .info_wrap p{
		font-size: 3vw;
		margin: 0 0 0 3vw;
	}
	#motto #cnt02 .info_wrap p img{
		height: 3vw;
		margin: 0 1vw 0 0;
	}
	#motto #cnt02 .table_wrap{
		width: 100%;
		overflow-x: auto;
	}
	#motto #cnt02 table{
		width: 900px;
		border-radius: 2vw 2vw 0 0;
}
	#motto #cnt02 table th{
		font-size: 16px;
		padding: 10px;
	}
	#motto #cnt02 table td{
		font-size: 14px;
		padding: 12px;
	}
	#motto #cnt02 table td a{
		margin: 12px 0 0;
	}
	#motto #cnt02 table td a img{
		width: 8px;
		margin: 0 0 0 8px;
	}
	#motto #cnt02 table td img{
		height: 15px;
		margin: 0 10px 0 0;
	}
	#motto #cnt02 table td span.small{
		font-size: 10px;
	}
	#motto #cnt02 table td.entry{
		padding: 12px;
	}
	#motto #cnt02 table td.participant{
		padding: 12px;
	}
	#motto #cnt02 .notice{
		font-size: 2.5vw;
		margin: 5vw 5vw 0;
	}
}

.txt_hl{
	text-align: center;
}
.photo_rights{
	margin: 3.6458vw 0 0;
}
.photo_rights p{
	text-align: left;
	font-size: 0.5208333vw;
	line-height: 1.6;
	font-weight: normal;
}
@media print, screen and (max-width: 767px) {
	.photo_rights{
		margin: 12.5vw 0 0;
	}
	.photo_rights p{
		font-size: 2.5vw;
		overflow-wrap: anywhere;
	}	
}


/* -------------------------------------------

PC・スマホ

 ---------------------------------------------------*/
.smp_only{
	display: none;
}
@media print, screen and (max-width: 767px) {
	.pc_only{
		display: none;
	}
	.smp_only{
		display: block;
	}
}





/* Lightbox：拡大画像を画面の上下中央に配置 */
.lightbox {
	top: 50% !important;
	transform: translateY(-50%);
}

/*　上付き文字 */
sup {
  font-size: 0.6em;
  vertical-align: super; /* または top */
  line-height: 0;        /* 行の高さに影響させない */
}