@charset "utf-8";


.L {
	float:left;
}
.R {
	float:right;
}
a {
	outline:none;
}
a:focus{
	outline:none;
}
*{ box-sizing:border-box;}
html { -webkit-text-size-adjust: 100%;}

h1 { text-indent: -9999px; line-height:0;}
ul { list-style:none;}

/* =====================================================================
*	TOPページ
* =================================================================== */
body {
	position:relative;
	background-color: #fff6e6;
	color:#663300;
	font-size:20px;
	font-size:2.0rem;
}
html, body {
height: 100%;
min-height: 100%;
}

body > #menu {
  height: auto;
}
body > #wrapper {
  height: auto;
}
body > #wrapper-top {
  height: auto;
 }

body > .bg_subtitle_obi {
  height: auto;
 }

#wrapper-top { width: auto; min-width:1000px; height:100%; padding:0; margin:0 auto; position:relative;}
#wrapper-intro { width: auto; min-width:1000px; height: auto; padding:0; margin:0 auto; position:relative; min-height:100%;}
#wrapper-sub { width: auto; min-width:1000px; height: auto; padding:0; margin:0 auto; position:relative; min-height:100%;}
#wrapper2 { width: auto; min-width:640px; height:100%;  padding:0; margin:0 auto; position:relative;}
#wrapper-sp { width:640px; height: auto;  padding: 0 0; margin:0 auto; position:relative; min-height: 100%; }

#menu { width:100%; height:60px; padding:15px 0 10px; background: #00ada9; position: fixed; top:0; left:0; z-index:100; display:block; text-align:center !important; }
#menu ul { width:980px; margin:0 auto; padding:0; display:inline-block; font-size:0; }
#menu ul li { text-align:left; display: inline-block; margin:0; padding:0; line-height:1; font-size:1; position:relative;}

#spmenu { width:100%; height:60px; padding:0; background: #00ada9; position: fixed; top:0; left:0; z-index:100; display:block; text-align:center !important; }
#spmenu .logos { width: auto; height:60px; padding:10px; background: #00ada9; z-index:110; position:relative; text-align:left;}
#spmenu .hum { width: 60px; height:60px; padding:0; z-index:110; position: absolute; top:0; right:0;}
#spmenu ul { width:100%; margin:0 auto; padding: 70px 10px 10px; display:block; height: 100% ; overflow: auto; -webkit-overflow-scrolling: auto; }
#spmenu ul li { text-align: center; display: block; margin:0; padding:0; line-height:1; position:relative; border-bottom:1px dotted #fff;}
#spmenu ul li:first-child { border-top:1px dotted #fff;}
#spmenu ul li a { display: block; margin:0; padding:20px 15px; line-height:1; font-size:1.2em; color:#fff; text-decoration:none;}
#spmenu ul li span { display: block; margin:0; padding:15px; line-height:1; font-size:1.2em; color:#fff; text-decoration:none; opacity:0.5;}

.g-nav{
  display: none;
  position: fixed;
  top: 0;
  background: rgba(0,173,169,0.95);
  width: 100%;
  height: 100%;
  z-index:100;
}

.menu-trigger,
.menu-trigger span{
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
  cursor :pointer;
}
.menu-trigger{
  position: fixed;
  width: 60px;
  height: 60px;
  background: #00ada9;
  z-index: 110;
  right:0;
  top:0;
}
.menu-trigger span{
  position: absolute;
  background: #fff;
  width: 40px;
  height: 3px;
  left: 0;
  right: 0;
  margin: auto;
}
.menu-trigger span:nth-of-type(1){
  top: 15px;
}
.menu-trigger span:nth-of-type(2){
  top: 0;
  bottom: 0;
}
.menu-trigger span:nth-of-type(3){
  bottom: 15px;
}
.menu-trigger.active span:nth-of-type(1){
  -webkit-transform: translateY(14px) rotate(-45deg);
	transform: translateY(14px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2){
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3){
  -webkit-transform: translateY(-14px) rotate(45deg);
	transform: translateY(-14px) rotate(45deg);
}



.mfixed {
  position: fixed;
  width: 100%;
  height: 100%;
}











#contents { width: 1200px; height: auto; min-height:100%; padding: 0 10px 0 260px; margin:0 auto; text-align: left; position:relative; opacity:0; }

.toptab { position: fixed; top:30px; right:0; width:40px; height:130px; z-index:100; display:block;}
.sptoptab { display: none;}

.mainarea { width: auto;  padding: 0; margin:0 auto; text-align: center; position:relative; min-height:750px; height:auto; }
.spmainarea { width: auto;  padding: 60px 0 0; margin:0 auto; text-align: center; position:relative; height:840px; }

.mainarea .charamain { width:100%; display:block;  margin:0 auto; height:380px; background:url(../img/bg_chara_main.png) center bottom no-repeat; background-size: contain; position:absolute; bottom:0; z-index:10; }
.mainarea .copy { width: 100px; height:240px; padding: 0; margin: 0 auto; position: absolute; right:0; top:60px; z-index:10; background:url(../img/copy_mainichi.png) no-repeat;}
.mainarea .logo { width: 500px; height:350px; padding: 0; margin: auto; position: absolute; right:0; top:0; left:0; bottom:150px; z-index:25; background:url(../img/logol.png) no-repeat;}
.mainarea .blanco { width:100%; min-width:800px; display:block;  margin:0 auto; height:230px; background:url(../img/bg_chara_l_blanco.png) left top no-repeat; background-size: contain; position:absolute; top:60px; z-index:5; }
.mainarea .syagami { width:100%; display:block;  margin:auto; height:230px; background:url(../img/bg_chara_l_syagami.png) center center no-repeat; background-size: contain; position:absolute; top:27%;  z-index:5; }
.mainarea .yubisashi { width:100%; display:block;  margin:0 auto; height:320px; background:url(../img/bg_chara_l_yubisashi.png) left top no-repeat; background-size: contain; position:absolute; bottom:16%; z-index:5; }
.mainarea .syoka { width:100%; display:block;  margin:0 auto; height:235px; background:url(../img/bg_chara_r_syoka.png) center center no-repeat; background-size: contain; position:absolute; top:26%; z-index:5; }
.mainarea .inu { width:100%; display:block;  margin:0 auto; height:120px; background:url(../img/bg_chara_l_inu.png) center bottom no-repeat; background-size: contain; position:absolute; bottom:24%; z-index:5; }
.mainarea .bicycle { width:100%; display:block;  margin:0 auto; height:146px; background:url(../img/bg_chara_r_bicycle.png) right center no-repeat; background-size: contain; position:absolute; bottom:28%; z-index:5; }

.mainarea .hutari { width:160px; display:block;  margin:0 auto; height:166px; background:url(../img/bg_chara_t_hutari.png) right center no-repeat; background-size: contain; position:absolute; top:65px; right:20%; z-index:5; }
.mainarea .kick { width:90px; display:block;  margin:0 auto; height:132px; background:url(../img/bg_chara_t_kick.png) right center no-repeat; background-size: contain; position:absolute; top:70px; left:22%; z-index:5; }
.mainarea .korobu { width:176px; display:block;  margin:0 auto; height:125px; background:url(../img/bg_chara_t_korobu.png) right center no-repeat; background-size: contain; position:absolute; top:60px; left:40%; z-index:5; }


.subarea { width: 620px; padding: 70px 10px 20px; margin:0; text-align: left; position:relative; height: auto; font-size:1.1em; color:#000; }
.subarea h2{ width: auto;  padding: 0; margin:0; text-align: left; }
.subarea h3{ width: auto;  padding: 0; margin:0 0 30px; text-align: left; font-size:1.4em; color:#000; font-weight: bold; }
.subarea h4{ width: auto;  padding: 0; margin:40px 0 20px; text-align: left; font-size:1.3em; color:#000; font-weight: bold; }
.subarea h5{ width: auto;  padding: 0; margin:40px 0 20px; text-align: left; font-size:1.3em; color:#019c98; font-weight: bold; }
.subarea .texarea { width: auto;  padding: 10px 0 ; margin:0 auto 30px; text-align: left; position:relative; height:auto;  }
.subarea .texarea p { padding: 0; margin:0 0 1em; text-align: left; font-size:1em; color:#000;}

.subarea .texarea ul.comtex { }
.subarea .texarea ul.comtex li { color:#006666; display:block; width: auto; height: auto; line-height:1.5; vertical-align:top; margin:0 0 35px; padding:0; }

.subarea .photoarea { float:none; padding:0 0 14px;}
.subarea .photoarea img{ padding:0 2px; width:300px;}

.subarea .imgr { float: right; padding:0 0 15px 15px;}

.castarea { width:940px; height:340px; position:relative;}
.castarea .tex01 { position: absolute; width:500px; height:140px; top:160px; left:70px;}
.castarea .tex02 { position: absolute; width:500px; height:140px; top:160px; right:70px;}
.castarea .tex02 { position: absolute; width:540px; height:140px; top:150px; right:60px;}

.cbg1 { background:url(../img/cast01.png) no-repeat top right;}
.cbg2 { background:url(../img/cast02.png) no-repeat top left;}
.cbg3 { background:url(../img/cast03.png) no-repeat top right;}
.cbg4 { background:url(../img/cast04.png) no-repeat top left;}
.cbg5 { background:url(../img/cast05.png) no-repeat top right;}


.introbg { background: #a1d8d7; }


.info-area { width:100%; margin:0 auto; height: auto; position:relative; padding:10px 0 ; text-align:center; background:#23b8bc;  }

.info-area .fbtl { width: auto; height:350px; display:block; padding:10px 10px 10px 0;}
.info-area .billing { width: auto; height: auto; display:block; padding:20px; text-align:left; color:#fff; vertical-align:top; }
.info-area p { margin:0 0 1em; padding:0; line-height:1.4em !important; }
.info-area  .bold { font-size:1.1em; font-weight:bold;}
.info-area .billing .small { font-size:0.85em; line-height:1.3em; } 

.formarea { width: auto; max-width:800px; min-width:640px; padding: 30px 10px; margin:0 auto; text-align: left; position:relative; min-height:600px; height:auto; font-size:1.1em; }
.formarea p { padding:0; margin:0 0 1em;}
.oubotable { width:100%; border-bottom: solid 1px #663300; border-right: solid 1px #663300; margin-bottom:5px;}
.oubotable th, .oubotable td { margin:0; padding:10px; border-top: solid 1px #663300; border-left: solid 1px #663300; vertical-align:top; text-align:left; background:#fffffb;}

.oubotable .fwide input[type="text"], .oubotable textarea { width:100%; }
.oubotable .fwide input[type="email"] { width:100%; }
.formarea input[type="submit"] { font-size:1.1em !important; padding: 1em !important; margin-bottom:2em; border:1px solid #028380; background:#00ada9; color:#fff !important; }
.formarea input:hover[type="submit"] { background:#028380; color:#fff; }




.opa img:hover{
	opacity:0.75;
	filter:alpha(opacity=75);
}

.img100 img{ width:100%;}
.nonclick {
	pointer-events: none;
}
.nonclick3 {
	opacity:0.3;
	filter:alpha(opacity=30);
	pointer-events: none;
}

.cr { font-size:0.9em; display: block; text-align:center !important; padding:20px 0; width:100%; background:url(../img/cr.jpg);}
.subcr { font-size:0.9em; display: block; text-align:center !important; padding: 20px 0 20px; width:100%; }

.pd10 { padding:10px 0;}
.pr20 { padding:0 20px 0 0;}
.mb10 { margin-bottom:10px !important;}




/* =====================================================================
    theter
* =================================================================== */


#theaterBody {
	clear: both;
	width: auto;
	padding: 10px 0;
}

#theaterBody p {
	padding: 0 0 10px;
}

#theaterBody .area {
	padding: 10px 0 35px;
	text-align: left;
	font-size:1.2em;
}


#theaterBody .areasub {
	padding: 5px 0 5px 15px;
	text-align: left;
	color: #c4172e;
	border-left:2px solid #c4172e;
	font-size:1.2em;
}

#theaterBody th,
#theaterBody td {
	text-align: left;
	padding:20px 5px;
	border-bottom:solid 1px #00ada9;
	border-collapse: separate;
	line-height:1.2 !important;
	vertical-align:top;
}

#theaterBody td:nth-last-of-type(1) { text-align: center; }

#theaterBody th {
	border-collapse: separate;
	color:#00ada9;
	font-size:0.9em;
}

#theaterBody th.col1 {
	width:15%; 
}
#theaterBody th.col2 {
	width:15%; 
}
#theaterBody th.col3 {
	width:35%; 
}
#theaterBody th.col4 {
	width:20%; 
}
#theaterBody th.col5 {
	width:15%; 
}

#theaterBody a { line-height:1.1;
}
.ssmall { font-size:0.8em; line-height:1.1;}

#theaterBody table { width:100%;
}

.t_right { text-align:right;}


#supBody h2 { border-bottom:solid 1px #00ada9; font-size:1.1em; font-weight:bold; padding:100px 0 0; margin: -60px 0 0; color:#00ada9;}

#supBody th,
#supBody td {
	text-align: left;
	border-bottom:solid 1px #00ada9;
	border-collapse: separate;
	line-height:1.3;
	vertical-align: top; background:#fff;
}
#supBody th { padding:0.8em 0.6em 0.8em 0.6em; width:30%; text-align:right; }
#supBody td { padding:0.8em 0 0.8em; }
#supBody td a { line-height:1.3 !important; padding-right:0.5em; }
#supBody th.sup1 {

}
#supBody th.sup2 { }

#supBody th img {  }
#supBody td .tex { font-size:0.9em; padding:0.5em 0.5em 0 0; margin-top:0.5em; border-top:1px dotted #ccc; line-height:1.3;}

ul.listmenu { list-style: none; margin:0 0; padding:0; }
ul.listmenu li { padding:0 0 0 1.3em; background:url(../../img/baloon.png) no-repeat center left; background-size:12px 12px; }




/* =====================================================================
    NEWS
* =================================================================== */


.t_center { text-align:center !important;}

/* page-top */
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display:block;
}
#page-top a {
	text-decoration: none;
	width: 80px;
	height:auto;
	padding: 0;
	text-align: center;
	display: block;
	
}

.pconly { display:inherit; }
.sponly { display:none; }
.dnon { display:none; }
.pd10 { padding:0px 26px 0 0;}
.dvd_logo img { width:100%; max-width:800px;}
.dvd_box img { width:100%; max-width:800px;}
.dvd_box2 img { width:100%;}
.dvd_box3 img { width: auto; height:546px;}

.buy-btn { display:inline-block; padding:0; margin:20px 20px 30px ;}
.buy-btn a { padding:0.6em; margin: 0; background:#fff; border:1px solid #937941; font-size:0.9em; text-decoration:none;}



@media only screen and (device-width: 640px) and (-webkit-min-device-pixel-ratio: 2) {
  .twit-main iframe  {
   width: 538px !important;
  }
}