@charset "UTF-8";
/*書式設定
----------------------------------*/
@media only screen and (max-width: 990px) {

}/*990px end*/

@media only screen and (max-width: 640px) {

.left { float: none; }
.right { float: none; }
.pc { display: none; }
.sp-i {display: inline-block;}
.sp{ display: block;}

.title_size {font-size: 8vw; line-height:1.2em; }
.title_size2 {font-size: 8vw; line-height:1.2em;}
.title_size3 {font-size: 8vw; line-height:1.2em; }
.title_size4 {font-size: 6vw; line-height:1.2em; }
.title_size5 {font-size: 8vw; line-height:1.2em; }

.container{ width: 100%; min-width: 100%; }

#contentWrap {
	max-width:640px;
	width: 100%;
	margin: 0 auto;
}
#contentWrap img{
	 width: 100%;
	 height: auto;
}
#contentWrap .content {
	max-width:640px;
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}


#titleBox {width: 100%; max-width:640px; margin: 0 auto;}
#titleBox li {width: 100%; max-width:640px; height: 175vw; background-size: 100% !important;}
#titleBox li.sl01 {background: url(../images/sp/top_slide01sp.jpg) top center no-repeat;}
#titleBox li.sl02 {background: url("../images/sp/top_slide02sp_200302.jpg") top center no-repeat;}/*200302画像変更*/
#titleBox li.sl03 {background: url(../images/sp/top_slide03sp.jpg) top center no-repeat;}
#titleBox li.sl04 {background: url(../images/sp/top_slide04sp.jpg) top center no-repeat;}
#titleBox li.sl05 {background: url(../images/sp/top_slide05sp.jpg) top center no-repeat;}

#titleBox .leadBox,#titleBox .leadBox .absl {position: static; height: auto;}
#titleBox .leadBox .posi01 {width: 50%; margin: 0 auto 10px;}
#titleBox .leadBox .posi02 {width: 80%; margin: 0 auto 10px;}
#titleBox .leadBox .posi03 {width: 80%; margin: 0 auto;}
#titleBox .leadBox .posi04 {width: 80%; margin: 0 auto 10px;}
#titleBox .leadBox .fade {opacity: 1;}

#box01 {margin: 20px auto 0;}
#box01 h2 {padding: 15px 0; background: url(../images/bg/bg02.jpg) top center repeat; }
#box01 .onsenBoxWrap {padding: 0 20px 20px; box-sizing: border-box; background: url(../images/bg/bg03.jpg) top center no-repeat;}
#box01 .onsenBoxWrap .onsenTab {max-width: 640px; margin: 20px auto 10px; justify-content: flex-start; flex-wrap: wrap; border-bottom: solid 1px #a87f00;}
#box01 .onsenBoxWrap .onsenTab li {width: 30%; margin:0 5% 5% 0;}
#box01 .onsenBoxWrap .onsenTab li:nth-child(3) {margin: 0;}
#box01 .onsenBoxWrap .onsenTab li:hover {transform: none;}

#box01 .onsenBoxWrap .tabBox {width: 100%; height: auto; padding: 0; box-sizing: border-box; position: static;}
#box01 .onsenBoxWrap .tabBox .absl {position: static;}
#box01 .onsenBoxWrap .tabBox .name {width: 90%; margin: 0 auto; }
#box01 .onsenBoxWrap .tabBox .thumb {width: 100%; top:0; left: 0; right: 0; margin: 0 auto 10px; }
#box01 .onsenBoxWrap .tabBox .thumb li {width: 30%;}
#box01 .onsenBoxWrap .tabBox .thumb li.arrow2 {width: 5%;}
#box01 .onsenBoxWrap .tabBox .thumb li.active::after {width: 100%; bottom:-5px;}
#box01 .onsenBoxWrap .tabBox .title {top:0; left: 0; z-index: 499;}
#box01 .onsenBoxWrap .tabBox .onsenSlideBox,#box01 .onsenBoxWrap .tabBox .onsenSlideBox .onsenSlide {height: auto; margin: 0 auto; position: static;}
#box01 .onsenBoxWrap .tabBox .onsenSlideBox .onsenImg {bottom:0; left: 0;}
#box01 .onsenBoxWrap .tabBox .onsenSlideBox .onsenTxt {bottom:0; right: 0; width: 90%; margin: 0 auto;}
#box01 .onsenBoxWrap .tabBox .onsenSlideBox .deco {top:20vw; bottom:unset; left: 0; position: absolute; width: 30%;}
#box01 .onsenBoxWrap .tabBox  .arrow {display: none;}

#box02 h2 {padding: 15px 0; background: url(../images/bg/bg04.jpg) top center repeat; }
#box02 .absl {position: static;}
#box02 .dramaBoxWrap {height: auto; }
#box02 .dramaBoxWrap .dramaBox {height: auto; position: static; margin: 20px auto 0;}
#box02 .dramaBoxWrap .dramaBox .title {width: 100%;}
#box02 .dramaBoxWrap .dramaBox .txt {width: 100%; margin: 10px auto; padding: 10px; top:0; right: 0; font-size: 14px; background: #d7ebef;}
#box02 .dramaBoxWrap .dramaBox .img {top:0; left: 0; width: 50%; margin: 0 auto;}

#box02 .dramaBoxWrap .dramaBox2 .title h3 {color:#00add2; padding: 40px 0 10px; text-align: center;}
/* #box02 .dramaBoxWrap .dramaBox2 h3:after {margin: 0 auto; width: 100%; display: block; background-position: center;} */
#box02 .dramaBoxWrap .dramaBox2 .title .data {top:0; width: 50%; margin: 0 auto 20px;}
#box02 .dramaBoxWrap .dramaBox2 .txt {padding-right: 0;}
#box02 .dramaBoxWrap .dramaBox2 .linkBoxWrap {display: flex; justify-content: space-between; flex-direction: column; align-items: center; margin: 20px auto 0; padding-bottom: 0;}
#box02 .dramaBoxWrap .dramaBox2 .linkBoxWrap .link {position: static; margin: 0 auto 30px;}
#box02 .dramaBoxWrap .dramaBox2 .linkBoxWrap .link:last-child {margin-bottom: 0;}
#box02 .dramaBoxWrap .dramaBox2 .linkBoxWrap .link a {position: static; width: 70%; margin: -10vw auto 0; }

#box03 {margin: 20px auto 0; padding: 0 20px 20px; box-sizing: border-box; background-repeat: repeat;}
#box03 h2::before {
	content: '明智光秀';
	font-size: 8vw;
	display: inline;
	text-align: center;
}
#box03 .tabNav {margin: 20px auto; padding: 0;}
#box03 .tabNav ul {display: flex; justify-content: flex-start; flex-wrap: wrap;}
#box03 .tabNav ul li {position: static; width: 30%; margin:0 5% 0 0;}
#box03 .tabNav ul li:nth-child(3) {margin: 0;}

#box03 .spotBox {height: auto; position: static; margin-bottom: 25px; padding: 20px;}
#box03 .spotBox .absl {position: static;}
#box03 .spotBox .img {top:0; left:0; padding-bottom: 10px;}
#box03 .spotBox .txt {top:0; right: 0;}
#box03 .spotBox .btn {width: 70%; bottom:0; right: 0; margin: -30px auto 0;}
#box03 .spotBtn {width: 100%; margin: 0 auto;}

#box04 {padding: 0 20px 20px;height: auto; background: unset; }
#box04 h2 {padding: 20px 0 ;}
#box04 .absl {position: unset;}
#box04 .seasonBox {position: unset;}
#box04 .seasonBox .img {top:0; left: 0;}
#box04 .seasonBox .posi01 {top: 0; right: 0;}
#box04 .seasonBox .posi02 {top: 0; left: 0;}
#box04 .seasonBox .posi03 {top: 0; right: 0;}
#box04 .seasonBox .posi01 a {  width: 100%; margin: 10px auto 40px;}
#box04 .seasonBox .posi02 a { width: 100%; margin: 10px auto 40px;}
#box04 .seasonBox .posi03 a { margin: 10px auto 0;}

#box05 {height: auto;}
#box05 h2 {padding: 20px 0; font-size: 7vw;}
#box05 .absl {position: static;}
#box05 .planBox {position: static; height: auto;}
#box05 .planBox a {margin: 10px auto; width: 80%;}
#box05 .planBox .posi01 {width: 90%; top:0; left: 0; margin: 0 auto 40px;}
#box05 .planBox .posi02 {width: 90%; top:0; right: 0; margin: 0 auto 40px;}
#box05 .planBox .posi03 {width: 90%; top:0; left: 0; margin: 0 auto 40px;}
#box05 .planBox .posi04 {width: 90%; top:0; right: 0; margin: 0 auto 40px; position: relative;}
#box05 .planBox .posi04 a {width: 80%;  bottom:30px; margin: 0 auto;}
#box05 .planBox .posi04 .tips {width: 90%; bottom: 10px; margin: 0 auto;}
#box05 .planBox .posi04 .deco {position: absolute; top:-20px; left: 0; right: 0; width: 20%; transform: rotate(90deg); margin: 0 auto;}

#box05 .cpnBoxWrap {width: 100%; margin: 0 auto; padding: 0 20px 20px; box-sizing: border-box;}
#box05 .cpnBoxWrap h3 {color:#a87f00; padding: 0px 0 20px; text-align: center;font-size: 6vw;}
#box05 .cpnBoxWrap h3::before {width: 10vw; height: 8vw; margin-bottom: 0;}
#box05 .cpnBoxWrap h3:after {width: 10vw; height: 8vw; margin-bottom: 0;}
#box05 .cpnBoxWrap .cpnBox01 {height: auto; flex-direction: column;}
#box05 .cpnBoxWrap .leftBtn {top:0; left: 0; width: 90%; margin: 0 auto 20px;}
#box05 .cpnBoxWrap .rightBtn {top:0; right: 0; width: 90%; margin: 0 auto;}
#box05 .cpnBoxWrap .csCover2 {position: absolute; width: 100%; top:-4vw; left: 0;}
#box05 .cpnBoxWrap p {padding-top: 10px;}
#box05 .cpnBoxWrap .cpnBox02 {margin: 30px auto 0;}
#box05 .cpnBoxWrap .cpBtn {margin: 30px auto 0;}

/* navi_sp */
#navi_sp {position: fixed; right:20px; bottom:20px; width: 40px; line-height:1em; z-index:9999; transition: .3s; }
#navi_sp .name { 
	vertical-align:middle; 
	text-align:center; 
	color:#00add2; 
	font-size:7.3px; 
	font-weight: bold; 
	line-height: 1em; 
	height: 1em;
	text-shadow: 1px 1px 1px #fff,
			-1px 1px 1px #fff,
			1px -1px 1px #fff,
			-1px -1px 1px #fff;
}
#navi_sp .menuBtn {
	display: inline-block; position: relative; width: 40px; height:40px; 
	background-color:#00add2; border-radius: 10px; padding:10px 0px 0px;
	box-shadow: 1px 1px 1px #fff,
			-1px 1px 1px #fff,
			1px -1px 1px #fff,
			-1px -1px 1px #fff;
}
.menu-icon {display: block; position: absolute; top: 50%; left: 50%; width: 24px; height: 2px; margin: -1px 0 0 -12px; background: #fff; transition: .2s;}
.menu-icon:before,.menu-icon:after {display: block; content: ""; position: absolute; top: 50%; left: 0; width: 24px; height: 2px; background: #fff; transition: .3s;}
.menu-icon:before {margin-top: -8px;}
.menu-icon:after {margin-top: 6px;}
.menuBtn:hover .menu-icon:before {margin-top: -10px;}
.menuBtn:hover .menu-icon:after {margin-top: 8px;}

#navi_sp.close .name {overflow: hidden; }
#navi_sp.close .name:before { display: inline-block; width: 100%; content: 'CLOSE';}
#navi_sp.close .menuBtn .menu-icon { background-color: #00add2; }
#navi_sp.close .menuBtn .menu-icon:before, #navi_sp.close .menuBtn .menu-icon:after {margin-top: 0;}
#navi_sp.close .menuBtn .menu-icon:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
#navi_sp.close .menuBtn .menu-icon:after { -webkit-transform: rotate(-135deg); transform: rotate(-135deg);}

/* menu_sp */
#menu_sp {
	position: fixed; 
	top:-100%; left: 0; z-index:1000; display: block; width: 100%; height: 250px; background-color: #fff;;
	padding: 0;
	transition: 0.6s ease-in-out;
	margin:0;
	z-index: 9999;
}
#menu_sp li {height: 50px; border-bottom: 1px solid #00add2;}
#menu_sp li a {display: block; vertical-align: middle; text-align: center; width: 100%; height: 100%; text-decoration: unset; color:#000;}
#menu_sp li a img{width: auto; height: 100%;}
#menu_sp li a p {line-height: 50px; text-align: left; padding-left: 30px; font-weight: 600;}
#menu_sp li a p::after {
	content: '';
	display: inline-block;
	width: 30px;
	height: 45px;
	background-image: url(../images/menu_btn.jpg);
	background-position:center ;
	background-size: contain;
	vertical-align: middle;
	float: right;
    margin-right: 20px;
}
#menu_sp.open {top: 0;}

.globalFooter__link {padding-bottom: 60px;}

}/*640px end*/

@media only screen and (max-width: 380px) {
	.content p {font-size:14px; line-height: 1.5em; }

}/*380px end*/