@charset "UTF-8";
/* ////////////////////////////////////////
PC,SP
//////////////////////////////////////// */
/*タイトル*/
#title-section{
	padding-top:130px;
	padding-bottom:40px;
}
/*文字長い時
#contents .main-title{
	max-width:500px;
}
*/
.main-title-wrap:before{
	position: absolute;
	z-index: 0;
	content:'';
	background-image: url("../img/guide/en-guide.png?ver250904");
	background-repeat: no-repeat;
	background-size: contain;
	width:697px;
	height:84px;
	left:50%;
	margin-left:-348.5px;
	top:-70px;
}
/*昆虫画像*/
.head-insect:before{
	position:absolute;
	content:'';
	background-image: url("../img/guide/head-insect.png");
	background-size: contain;
	background-repeat: no-repeat;
	width:98px;
	height:102.5px;
	right:0px;
	top:-80px;
}
/*サブメニュー*/
#submenu{
	padding-top:36px;
	padding-bottom:20px;
}
#submenu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* これで中央寄せOK */
  gap: 1.25%;              /* 要素間の余白を自動で調整 */
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}
#submenu li {
  flex: 0 0 32.5%; /* 3つで横幅いっぱい */
  margin-top: 10px;
  position: relative;
  background: #eee; /* 確認用 */
	border-radius:10px;
}
#submenu li:nth-child(3n){
	margin-right:0;
}
#submenu li .subtitle{
	display: block;
	background-color: #fff;
	color:#5EAF00;
	transition: 0.3s;
}
#submenu li .maintitle{
	display: block;
	background-image: url("../img/common/arrow-down-green.png");
	background-size: 24px 24px;
	background-repeat: no-repeat;
	background-position: center right 10px;
	padding:5px 36px 10px 10px;
	transition: 0.3s;
}
#submenu li a{
	height:100%;
	display: block;
	line-height: 1.5em;
	background-color: #5EAF00;
	border-radius:10px;
	border:3px solid #fff;
	padding:7px 7px 0 7px;
	text-align: center;
	color:#fff;
	transition: 0.3s;
}
#submenu li a:hover{
	background-color: #fff;
	border:3px solid #5EAF00;
	color:#5EAF00;
}
#submenu li a:hover .maintitle{
	background-image: url("../img/common/arrow-down-green-over.png");
}
#submenu li a:hover .subtitle{
	background-color: #5EAF00;
	color:#fff;
}
/*2カラム*/
.col2-wrap dd{
	margin-bottom:0;
}
.col2-wrap figure{
	max-width:355px;
	margin-left:auto;
	margin-right:auto;
}
/*コンテンツ枠*/
#guide .detail-box-normal{
	padding:0;
	margin-top:0;
	margin-bottom:20px;
}
#guide .detail-box-normal-inner1{
	padding:30px 30px 0 30px;
}
#guide .detail-box-normal-inner2{
	padding:0 30px 30px 30px;
}
#guide .detail-box-normal-inner3{
	padding:0 30px;
}
#guide .detail-box-normal-inner{
	padding:30px 30px 30px 30px;
}
#guide .subtitle{
	margin-bottom:10px;
	width:161px;
	text-align: center;
	padding:0 5px;
	display: inline-block;
	color:#fff;
	background-color: #E3002D;
}
/*飾り*/
.deco-wrap{
	text-align: center;
}
.deco-title{
	line-height: 1.5em;
	display: inline-block;
	background-image: url("../img/guide/deco-left.png");
	background-repeat: no-repeat;
	background-size: 31px 24.5px;
	background-position: bottom 2px left;
}
.deco-title span{
	display: inline-block;
	background-image: url("../img/guide/deco-right.png");
	background-repeat: no-repeat;
	background-size: 31px 24.5px;
	background-position: bottom 2px right 10px;
	padding:0 40px;
}
.voice-actor-img{
	max-width:354px;
	margin-left:auto;
	margin-right:auto;
}
.guide-table-wrap{
	max-width:590px;
	margin-left:auto;
	margin-right:auto;
}
.guide-table{
	width:100%;
	text-align: center;
	margin-bottom:10px;
}
.guide-table th{
	width:50%;
	padding:10px;
	background-color: #5EAF00;
	color:#fff;
	text-align: center;
	border:solid 2px #5EAF00;
}
.guide-table td{
	width:50%;
	padding:10px;
	border:solid 2px #5EAF00;
}
.sounds-box{
	margin-bottom:20px;
	padding:25px 10px;
	max-width:590px;
	margin-left:auto;
	margin-right:auto;
	text-align: center;
	border:1px solid #B7B7B7;
}
.app-box{
	margin-top:20px;
	margin-bottom:20px;
}
.app-btn{
	margin-right:20px;
	display: inline-block;
}
.app-btn img{
	height: 70px;
}
.small-box{
	max-width:987px;
	margin-left:auto;
	margin-right:auto;
}
.acoustiguide{
	max-width:347px;
}
.acoustiguide2{
	max-width:144px;
}
/*////////////////////////////////////////
印刷時　PC・タブレットのみ
//////////////////////////////////////// */
@media screen and (min-width:768px) , print{
	.acoustiguide-box{
		width:100%;
		display: table;
	}
	.acoustiguide-box dt{
		width:calc(100% - 144px);
		display: table-cell;
		vertical-align: top;
	}
	.acoustiguide-box dd{
		width:144px;
		display: table-cell;
		vertical-align: top;
	}
}
/* ////////////////////////////////////////
印刷時　PCのみ
//////////////////////////////////////// */
@media screen and (min-width:1100px) , print{	
	/*2カラム*/
	.col2-wrap {
		display: table;
		width:100%;
	}
	.col2-wrap>*{
		display: table-cell;
		vertical-align: top;
	}
	.col2-wrap dt{
		width:38%;
	}
	.col2-wrap dd{
		width:63%;
		padding-left:20px;
	}
}
@media screen and (min-width:1100px) and (max-width: 1600px) , print{
}
@media screen and (min-width:1600px) , print{
}
/* ////////////////////////////////////////
タブレット・SPのみ
//////////////////////////////////////// */
@media screen and (max-width: 1100px) {
	/*昆虫画像*/
	.head-insect:before{
		width:70px;
		height:72px;
		top:-50px;
	}
	/*タイトル*/
	.main-title-wrap:before{
		background-position: center bottom;
		width:100%;
		height:82px;
		margin-left:0;
		left:0;
		top:-50px;
	}
}
/* ////////////////////////////////////////
タブレットのみ
//////////////////////////////////////// */
@media screen and (min-width: 767px) and (max-width: 1100px) {
	/*タイトル*/
	.main-title-wrap:before{
		width:498px;
		height:60px;
		left:50%;
		margin-left:-249px;
		top:-52px;
	}
	/*サブメニュー*/
	#submenu li {
    	flex: 0 0 48%; /* タブレットでは2列 */
	}
}
/* ////////////////////////////////////////
SPのみ
//////////////////////////////////////// */
@media screen and (max-width: 767px){
	#title-section{
		padding-top:70px;
	}
	/*文字長い時
	#contents .main-title{
		max-width:350px;
	}*/
	/*サブメニュー*/
	#submenu{
		padding-top:20px;
		padding-bottom:20px;
	}
	#submenu li{
		flex: 0 0 100%; /* スマホでは1列 */
	}
	/*コンテンツ枠*/
	#guide .detail-box-normal-inner1{
		padding:15px 15px 0 15px;
	}
	#guide .detail-box-normal-inner2{
		padding:0 15px 15px 15px;
	}
	#guide .detail-box-normal-inner3{
		padding:0 15px;
	}
	#guide .detail-box-normal-inner{
		padding:15px 15px 15px 15px;
	}
	/*本文*/
	.app-box{
		text-align: center;
	}
	.app-box>*:last-child{
		margin-top:10px;
	}
	.sounds-box audio{
		width:100%;
	}
}
@media screen and (max-width: 410px){
}
/* ////////////////////////////////////////
スライド調整用　sm(540px以上)
//////////////////////////////////////// */
@media screen and (min-width:540px) {
}