@charset "UTF-8";

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

TAKEO Official Website
Mod : 2022.06.19 MT

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

html{
overflow-x : hidden;
overflow-y : auto;
}

.sp {display: none; }
.slicknav_menu {display:none;}


@media screen and (min-width: 500px), screen and (orientation: landscape) and (min-width: 750px) {

}



@media screen and (max-width: 768px), screen and (orientation: landscape) and (max-width: 830px) {

.pc {display: none !important;}
.sp {display: block !important;}

.nav {display:none !important;}
#gnavi {display:none;}

header ul#gnavi {display:none;}

#container_inner{width:100%;}
#sidebar {float:none;width:90%;padding:20px;}
#mainArea{float:none;width:90%;padding:20px;}

h2 {font-size:3.0rem;}
h2 em {font-size:2.0rem;}



/* spmenu [SP MENU]
------------------------------------------------------------- */

#spmenu {
display:block !important;
position: fixed;
right: -300px;
top: 0;
height: 100%;
width: 300px;
color: #fff;
transition: .35s ease-in-out;
overflow-y:auto;
font-size: 1.5rem;
padding-top: 80px;
background: #000;
text-align: center;
}

#nav_sp {margin:0 0 100px 0;}

/* サブメニューは開けない */
#nav_sp .sub-menu-head:after,
#nav_sp .sub-menu-nav {display: none;}
#nav-toggle {display: block;}

/* nav open */
.open {/*overflow: hidden;*/}
.open #overlay {display: block;}
.open #spmenu  {transform: translate3d(-300px,0,0);}

/* #nav-toggle close */
.open #nav-toggle span:nth-child(1) {top: 11px;transform: rotate(45deg);}
.open #nav-toggle span:nth-child(2) {width: 0;left: 50%;}
.open #nav-toggle span:nth-child(3) {top: 11px;transform: rotate(-45deg);}

/* z-index */
#overlay {z-index: 10;}
#spmenu {z-index: 300;}
#nav-toggle {z-index: 400;}



/* Header
------------------------------------------------------------- */

header{width:100%;height:auto;background:none #000;}
header .inner{width:100%;height:auto;}
header .inner h1{position:static;text-align:center;width:50%;max-width:200px;margin:0 auto;padding:20px 0 0 0;}



/* titleheader
------------------------------------------------------------*/

#titleheader{height:100px;background:url(../img/common/titleheader.jpg) 80% top / cover ;box-shadow: 0 0 20px 0 rgba(0,0,0,0.8) inset;}
#titleheader h2{text-align:left;width:100%;margin:0 auto;padding:30px 0 0 0;font-size:2.2rem;}


/* footer
------------------------------------------------------------- */

footer {font-size:1.3rem;padding:30px 20px 30px 20px;}

footer ul.snsicon {list-style:none;display: table;margin:0 auto 20px auto;}
footer ul.snsicon li{float:left;margin:0 20px 0 0;}
footer ul.snsicon li:last-child{margin:0;}
footer ul.snsicon li img{width:40px;}



/* TOP
------------------------------------------------------------- */


#top #mainvisual{
height:200px;
background:#260e01 url(../img/top/mainvisual.jpg) center -40px  / cover no-repeat;
text-align:center;
}
#top #mainvisual img{
height:90%;
position:static;
display:block;
margin:0 auto 0 auto;
padding:10px 0 0 0;
}

#top #bnrArea {padding:20px 0;background:url(../img/top/bnrArea_bg.jpg) 0 0 repeat ;text-align:center;}
#top #bnrArea ul {list-style:none;}
#top #bnrArea ul li {display:inline;margin:0 10px 0 0;}
#top #bnrArea ul li img {width:28%;}
#top #bnrArea ul li:last-child {margin:0;}

#top #container {background: #000;}
#top #container_inner {width:100%;margin:0 auto;padding:30px 0;}

#top #sidebar {float:none;width:90%;padding:0 5%;}
#top #mainArea {float:none;width:90%;padding:0 5%;}

#top h2 {font-size:2.0rem;padding:0 0 5px 0;border-bottom:1px solid #fff;}

#top #sidebar {text-align:center;}
#top #sidebar img{display:block;width:100%;max-width:350px;margin:0 auto 10px auto;}
#top #sidebar .twitter-timeline {width:90% !important;margin:10px auto !important;}

#top iframe#facebook{display:none;}



/* News
------------------------------------------------------------- */

#information #container_inner{width:90%;padding:20px;min-height:500px;}
#information #sidebar{float:none;width:100%;padding:0;}
#information #mainArea{float:none;width:100%;padding:0;}




/* Biography
------------------------------------------------------------- */

#biography #container_inner{width:90%;padding:20px;min-height:500px;}
#biography #container_inner .pict{position:static;width:90%;}



/* Profile
------------------------------------------------------------- */

#profile #container {background:#16151a;color:#fff;font-family :YuMincho, 'Yu Mincho',serif;}
#profile #container .inner {width:90%;padding:20px;min-height:500px;}
#profile #container .inner .pict{float:none;width:80%;display:block;margin:0 auto 20px auto;}
#profile #container .inner .detail{float:none;width:100%;margin:0 0 30px 0;}
#profile #container .inner h3{font-size:2.4rem;margin:30px 0 20px 0;}
#profile #container .inner ul {margin:0;list-style:none;}
#profile #container .inner ul li {border-bottom:1px solid #666;padding:15px 0;}


/* movie
------------------------------------------------------------ */

#movie #container_inner{width:90%;padding:20px;}

#movie #container_inner .movie{width:90%;margin:0 5%;}
#movie #container_inner .left{float:none;width:100%;margin:0 0 20px 0;}
#movie #container_inner .right{float:none;width:100%;margin:0 0 20px 0;}

#movie #container_inner h3{
font-size:1.6rem;
font-weight:normal;
background:#444;
color:#fff;
padding:5px 0 5px 20px;
margin:0 0 20px 0;
}



/* Discography
------------------------------------------------------------- */

#discography #container_inner{width:90%;padding:20px;}

#discography ul.type{
display:block;
margin:0 auto 20px auto;
list-style:none;
text-align: center;

}
#discography ul.type li{
display:block;
font-size:1.8rem;
padding:5px 20px;
border:1px solid #666;
margin:0;
}

#discography table.discotable{
border:none;
width:100%;
margin:0 auto;
border-collapse:collapse;
}
#discography table.discotable th{
width:90%;
padding:5%;
display:block;
vertical-align:top;
text-align:center;
border-bottom:none;
}
#discography table.discotable td{
width:90%;
padding:5%;
display:block;
vertical-align:top;
border-bottom:1px solid #666;
}


#discography #container_inner .jkt{
float:none;
margin:0 auto 20px auto;
}



/* Contact
------------------------------------------------------------- */

#contact #container .inner {width:90%;padding:20px;min-height:500px;}
#contact #container .inner dl {width:200px;float:none;margin:0 auto 20px auto !important;}


/* Shop
------------------------------------------------------------- */

#shop #container .inner {width:90%;padding:20px;min-height:initial;}
#shop #container .inner dl {width:200px;float:none;margin:0 auto 20px auto !important;}
#shop #container .inner h3 {font-size:2rem;font-weight:normal;padding:30px 0 30px 0;text-align:center;}



/* END
------------------------------------------------------------- */
}