@charset "utf-8";
/* otherMagazine */
.otherMagazine{
  position: relative;
  width: 94%;
  margin: 50px auto 0;
  border-radius: 17px;
}
.otherMagazine h2{
  position: absolute;
  top: -10%;
  left: 4%;
  width: 92%;
	text-align: center;
}
.otherMagazine ul{
	display: -webkit-box;/*--- Androidブラウザ用 ---*/
	display: -ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	display: box;
	display: flex;
	-webkit-box-pack: justify;/*--- Androidブラウザ用 ---*/
	-ms-flex-pack: justify;/*--- IE10 ---*/
	-webkit-justify-content: space-between;/*--- safari（PC）用 ---*/
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
  border: 3px solid #f4a466;
	padding: 8% 4% 2%;
	border-radius: 9px;
}
.otherMagazine ul li{
  width: 32%;
  margin: 0 0 10px 0;
}
.otherMagazine ul li:last-child{
	/*margin: 0 auto 10px 2%;*/
}
.otherMagazine ul li img{
	max-width: 100%;
}

#otherMovie{
	margin-bottom: 10px;
}
.otherMovieInner{
	display: none;
}
.otherMovieBox{
	position: relative;
	background: url(../images/bg_other_movie.png) no-repeat left top/100% auto;
	width: 70%;
	margin: 40px auto 5px auto;
	padding: 10.5% 4% 4% 3%;
}
.otherMovieBox.keyMaga02{
	padding-bottom: 4%;
}
.otherMovieBox.keyMaga03{
	padding-bottom: 3.5%;
}
.otherMovieBox h3{
	position: absolute;
	top: -10px;
	left: 5%;
	width: 90%;
}
.otherMovieBox .otherMovieBook{
	position: absolute;
	top: -30px;
	left: -10px;
	width: 20%;
}
.otherMovieBox .iframeBox{
	position: relative;
	width: 55%;
	padding-top: calc(100 / 200 * 50%);
}
.otherMovieBox .iFrame{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.otherMovieBox .flexBox{
	display: -webkit-box;/*--- Androidブラウザ用 ---*/
	display: -ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	display: box;
	display: flex;
	-webkit-box-pack: justify;/*--- Androidブラウザ用 ---*/
	-ms-flex-pack: justify;/*--- IE10 ---*/
	-webkit-justify-content: space-between;/*--- safari（PC）用 ---*/
	justify-content: space-between;
}

.otherMovieBox.keyMaga01 .otherMovieImg{
	width: 33%;
	margin-right: 4%;
}
.otherMovieBox.keyMaga02 .otherMovieImg{
	width: 40%;
}
.otherMovieBox.keyMaga03 .otherMovieImg{
	width: 20%;
	margin-right: 10%;
}
.otherMovieBox.keyMaga04 .otherMovieImg{
	width: 20%;
	margin-right: 10%;
}
.otherMovieBox.keyMaga05 .otherMovieImg{
	width: 30%;
}
.otherMovieBox.keyMaga06 .otherMovieImg{
	width: 30%;
	margin-right: 5%;
}

#otherPhrase{
	position: relative;
	margin: -33px 0 20px;
}
.top #otherPhrase{
	margin-bottom: 75px;
}
.keyMaga01 #otherPhrase{
	margin-bottom: 40px;
}

.otherPhraseInner{
	display: none;
}
.otherPhraseBox{
	position: relative;
	border: 2px solid #f4cc21;
	background: #fff9df;
	width: 82%;
	margin: 35px auto 0 auto;
	padding: 30px 6% 15px;
	border-radius: 6px;
}

.otherPhraseBox h3{
	position: absolute;
	top: -15px;
	left: 50%;
	width: 70px;
	margin-left: -35px;
}
.otherPhraseBox .otherPhraseBook{
	position: absolute;
	top: -30px;
	left: 20%;
	width: 45px;
}
.otherPhraseBox ul{
	display: -webkit-box;/*--- Androidブラウザ用 ---*/
	display: -ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	display: box;
	display: flex;
	-webkit-box-pack: justify;/*--- Androidブラウザ用 ---*/
	-ms-flex-pack: justify;/*--- IE10 ---*/
	-webkit-justify-content: space-between;/*--- safari（PC）用 ---*/
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.otherPhraseBox ul li{
	width: 48%;
}

.accordionBtn .on{ display: none;}
.accordionBtn .off{ display: inline-block;}
.accordionBtn.open .on{ display: inline-block;}
.accordionBtn.open .off{ display: none;}

.keyMaga01 .keyMaga01,
.keyMaga02 .keyMaga02,
.keyMaga03 .keyMaga03,
.keyMaga04 .keyMaga04,
.keyMaga05 .keyMaga05,
.keyMaga06 .keyMaga06,
.keyMaga07 .keyMaga07{
	display: none;
}

.spOnly{ display: block;}
.pcOnly{ display: none;}