@charset "UTF-8";
@import url("../icomoon/style.css"); /* Icon fonts */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css2?family=Castoro&family=Oswald:wght@300&family=Vidaloka&display=swap');



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

TAKEO Official Website
Mod : 2022.06.19 MT

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

* {margin: 0;padding: 0;}

html {font-size: 62.5%;width: 100%;}

body{
font-size: 1.5rem;
font-family: 'Noto Sans JP', sans-serif;
background:#000;
color:#999;
}


div:after {/*for modern browser*/  
content: ".";  
clear: both;  
display: block;  
line-height: 0;  
height: 0;  
visibility: hidden;  
}  

.clearfix:after {content:".";height:0;clear:both;display: block;visibility:hidden;}


h2{
font-family: 'Castoro', serif;
font-size:3.6rem;
letter-spacing:10px;
margin:0 0 1em 0;
text-indent:1em;
color: #fff;
text-align:center;
text-shadow: 1px 1px 3px #000;
}


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

#container{background: #fff;}
#container_inner{width:1000px;margin:0 auto;}

#sidebar{float:right;width:300px;padding:30px 0 30px 0;}
#mainArea{float:left;width:640px;padding:30px 0 30px 0;}

a:hover img {
    filter:alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
}

a{color:#b9ac99;}
a:visited{color:#b9ac99;}
a:hover{color:#fff;}


/* WP img */
 
.aligncenter {display: block;margin: 0 auto 20px auto;}
.alignright { float: right; margin:0 0 20px 20px;}
.alignleft { float: left; margin:0 20px 20px 0;}
 
img[class*="wp-image-"],
img[class*="attachment-"] {
    height: auto;
    max-width: 100%;
}



/* animation
------------------------------------------------------------- */

.fadein {animation-name: fadein;animation-duration:1s;animation-fill-mode:forwards;opacity:0;}
@keyframes fadein {
  0% {transform: translateY(-10px);opacity: 0;}
  80% {opacity: 1;}
  100% {opacity: 1;transform: translateY(0);}
}

.fadeUp {animation-name: fadeUp;animation-duration:1s;animation-fill-mode:forwards;opacity:0;}
@keyframes fadeUp{
  from {opacity: 0;transform: translateY(-50px);}
  to {opacity: 1;transform: translateY(0);}
}



/* header
------------------------------------------------------------- */

header{width:100%;height:180px;background:#000;}
header .inner{width:1200px;height:180px;margin:0 auto;position:relative;}
header .inner h1 {position:absolute;top:40px;left:calc(50% - 130px);width:260px;}
header .inner h1 img {width:100%;}

header .inner h1 a:hover img {
filter:alpha(opacity=100);
-moz-opacity: 0.7;
opacity: 0.7;
}



/* globalNavi
------------------------------------------------------------*/

header ul#gnavi {width:100%;position:absolute;top:140px;left:0;display:flex;list-style:none;color:#fff;font-size:2rem;}
header ul#gnavi li {width:20%;position: relative;display:inline;margin: 0 10px 0 10px;text-align:center;font-family: 'Castoro', serif;letter-spacing:1px;}
header ul#gnavi li::after {position: absolute;bottom: -12px;left: 0;content: '';width: 100%;height: 3px;
background: #333;transform: scale(1, 1);transform-origin: center top;transition: transform .3s;}
header ul#gnavi li.on::after {position: absolute;bottom: -12px;left: 0;content: '';width: 100%;height: 3px;
background: #fff;transform: scale(1, 1);transform-origin: center top;transition: transform .3s;}
header ul#gnavi li:last-child {margin: 0 ;}
header ul#gnavi li:last-child:after {content:""}
header ul#gnavi a {color:#fff;position: relative;text-decoration: none;display:block;}
header ul#gnavi a:hover {color:#fff;} 
header ul#gnavi a:visited {color:#fff;}
header ul#gnavi a::after {position: absolute;bottom: -12px;left: 0;content: '';width: 100%;height: 3px;
background: #fff;transform: scale(0, 1);transform-origin: center top;transition: transform .3s;z-index:10;}
header ul#gnavi a:hover::after {transform: scale(1, 1);}

header ul#gnavi li:nth-child(1) {animation-duration: 0.2s;}
header ul#gnavi li:nth-child(2) {animation-duration: 0.4s;}
header ul#gnavi li:nth-child(3) {animation-duration: 0.6s;}
header ul#gnavi li:nth-child(4) {animation-duration: 0.8s;}
header ul#gnavi li:nth-child(5) {animation-duration: 1.0s;}



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

#titleheader {height:200px;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:1000px;margin:0 auto;padding:75px 0 0 0;color:#fff;}


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

footer{padding:50px 0 50px 0;background:#000 ;text-align:center;color:#b9ac99;border-top:1px solid #ccc;}
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:60px;}

footer a:hover{color:#960}



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

#top #mainvisual {position: relative; height:800px;osition:relative;box-shadow: 0 0 20px 0 rgba(0,0,0,0.4) inset;overflow: hidden;}

#top #mainvisual img {position: absolute; width:100%;height:800px;object-fit: cover;object-position: 0 0;}
#top #mainvisual .mv_bg {z-index:0;animation-name: mv_bg;animation-duration:3s;animation-fill-mode:forwards;opacity:0;pointer-events: none;}
#top #mainvisual .mv_takeo {z-index:1;animation-name: mv_takeo;animation-duration:1s;animation-fill-mode:forwards;opacity:0;pointer-events: none;}

@keyframes mv_takeo{
  from {opacity: 0;filter: blur(10px);}
  to {opacity: 1;filter: blur(0);}
}
@keyframes mv_bg{
  from {opacity: 0;transform: scale(2, 2);}
  to {opacity: 1;transform: scale(1, 1);}
}

#top .mainvisual_sp {width:100%;}




#top #mainvisual201310 img {display:block;width:100%;}




#top #bnrArea{padding:55px 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 30px 0 0;}
#top #bnrArea ul li:last-child{margin:0;}

#top #container{background: #000;}
#top #container_inner{width:1200px;margin:0 auto;padding:70px 0;}

#top #sidebar{float:right;width:350px;padding:0 70px 0 0;}
#top #mainArea{float:left;width:650px;padding:0 0 0 70px;}

#top h2{
font-size:3.0rem;
margin:0 0 5px 0;
text-align:left;
}

#top ul#topics{
list-style:none;
margin:0 0 20px 0;
}
#top ul#topics li{
position: relative;
padding:10px 0 10px 30px;
margin:0 0 10px 0;
border-bottom:1px solid #444;
}

#top ul#topics li a{color:#b9ac99;}
#top ul#topics li a:visited{color:#b9ac99;}
#top ul#topics li a:hover{color:#fff;}

#top ul#topics li::after,
#top ul#topics li::before {
display: block;
content: '';
position: absolute;
}
#top ul#topics li::after {
top: 13px;
left: 0;
width: 14px;
height: 14px;
background-color: #000;
border-radius: 100%;
}
#top ul#topics li::before {
z-index: 2;
top: 18px;
left: 3px;
width: 4px;
height: 4px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

#top ul#topics li .date{
font-size:1.1rem;
}

#top .movie {margin:0 0 20px 0;}

#top iframe#facebook{width:100% !important;}


#top #sidebar ul.pglist{margin:0 0 20px 0;font-size:1.5rem;list-style:none;}
#top #sidebar ul.pglist li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px dotted #ccc;}
#top #sidebar ul.pglist li em{font-size:1.2rem;}


/* INFORMATION
------------------------------------------------------------- */

#information #container_inner{
width:1000px;
padding:30px 0;
min-height:500px;color: #000;
line-height:2.0;
position:relative;
}

#information #sidebar{float:right;width:200px;padding:0 30px 30px 0;}
#information #mainArea{float:left;width:700px;padding:0 0 30px 30px;}

#information .entry{
padding:0 0 2em 0;
margin:0 0 2rem 0;
border-bottom:1px solid #ccc;
}

#information .entry-title{
font-size:1.8rem;
margin:0 0 2rem 0;
color:#000;
}
#information .entry-title a{color:#000;}
#information .entry-title a:visited{color:#000;}
#information .entry-title a:hover{color:#b9ac99;}


#information .entry .date{
text-align:right;
font-size:1.2rem;
}
#information .entry a{color:#000;}
#information .entry a:visited{color:#000;}
#information .entry a:hover{color:#b9ac99;}

#information .entry a .icon {
font-size:1.2rem;
font-family: 'Philosopher', sans-serif;
color:#fff;
padding:3px 6px;
background:#b9ac99;
text-decoration:none !important;
}
#information .entry a:visited .icon {background:#b9ac99;text-decoration:none !important;}
#information .entry a:hover .icon {color:#fff;text-decoration:none !important;}

#information .entry p{margin:0 0 1rem 0;}

#information #sidebar h4{padding:0 0 10px 0;margin:0 0 10px 0;border-bottom:2px solid #666;}
#information #sidebar ul{margin:0 0 20px 0;list-style:none;}
#information #sidebar ul li{padding:10px 0 10px 20px;border-bottom:1px dotted #ccc;}

#information #sidebar a{color:#000;}
#information #sidebar a:visited{color:#000;}
#information #sidebar a:hover{color:#b9ac99;}





/* profile
------------------------------------------------------------- */

#profile #container {background:#16151a;color:#fff;font-family :YuMincho, 'Yu Mincho',serif;}
#profile #container .inner {width:900px;margin:auto;padding:50px 0 50px 0;min-height:500px;line-height:2.0;position:relative;}
#profile #container .inner .pict{float:left;width:300px;margin:0 60px 30px 0;pointer-events: none;}
#profile #container .inner .detail{float:right;width:500px;margin:0 0 30px 0;}
#profile #container .inner h3{font-size:3rem;margin:70px 0 50px 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:900px;
padding:30px 0 50px 0;
min-height:500px;color: #b9ac99;
line-height:2.0;
position:relative;
}

#movie #container_inner .movie{width:860px;margin:0 auto;}

#movie #container_inner .left{float:left;width:48%;margin:0 0 30px 0;}
#movie #container_inner .right{float:right;width:48%;margin:0 0 30px 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;
}






/* contact
------------------------------------------------------------- */

#contact #container .inner {width:900px;padding:80px 0 50px 0;margin:auto;min-height:500px;color: #000;line-height:2.0;position:relative;}
#contact #container .inner h3 {font-size:2.2rem;padding:10px 0 10px 0;text-align:center;border-bottom:1px solid #000;}

#contact #container .inner a {padding:10px 30px;background:#ccc;color:#000;border:1px solid #ccc;border-radius:10px;text-decoration:none;}
#contact #container .inner a:hover {background:#666;color:#fff;}


/* shop
------------------------------------------------------------- */

#shop #container .inner {width:900px;padding:50px 0 50px 0;margin:auto;min-height:400px;color: #000;line-height:2.0;position:relative;display:flex;flex-direction: column;justify-content: center;align-items: center;}
#shop #container .inner h3 {font-size:2rem;font-weight:normal;letter-spacing:5px;padding:10px 0 10px 0;text-align:center;}

#shop #container .inner a {padding:10px 30px;background:#ccc;color:#000;border:1px solid #ccc;border-radius:10px;text-decoration:none;}
#shop #container .inner a:hover {background:#666;color:#fff;}



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

#discography #container_inner{
width:1000px;
padding:30px 0;
min-height:500px;color: #b9ac99;
font-family:'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
line-height:1.5;
position:relative;
}


#discography h3{
margin:0 0 20px 0;
}
#discography h4{
font-size:1.6rem;
font-weight:normal;
font-family:"Times New Roman", Times, serif;
margin:0 0 10px 0;
}
#discography h4 em{
font-size:12px;
color:#ccc;
font-style:normal;
font-weight:normal;
}

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

}
#discography ul.type li{
display:inline-block;
font-family: 'Carme', sans-serif;
font-size:1.8rem;
padding:5px 20px;
border:1px solid #666;
margin:0 0 0 10px;
}
#discography ul.type li a{text-decoration:none;}
#discography ul.type li a:hover{color:#000;}

#discography .tabbox {
display:none;
}

#discography h3 {
font-size:1.5rem;
font-weight:normal;
background:#444;
color:#fff;
padding:5px 0 5px 30px;
}

#discography .title {
font-size:1.8rem;
font-family: 'Carme', sans-serif;
}

#discography .jkt {
padding:2px;
border:1px solid #666;
}


#discography table.discotable{
border:none;
width:800px;
margin:0 auto;
border-collapse:collapse;
}
#discography table.discotable th{
width:200px;
vertical-align:top;
padding:20px;
text-align:center;
border-bottom:1px solid #666;
}
#discography table.discotable td{
vertical-align:top;
padding:20px;
border-bottom:1px solid #666;
}

#discography .jkt{
padding:3px;
border:1px solid #333;
margin:0 0 8px 0;
width:250px;
}

#discography p.amazon a{
display:block;
width:62px;
height:18px;
text-indent:-9999px;
margin :0 0 0 50px;
background:url(../img/discography/btn_amazon.gif) 0 0 no-repeat;
}
#discography p.amazon a:hover{
background-position:0 -18px;
}





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

#spmenu {display:none;}
ul#nav_sp {display:none;}

#nav_sp ul {list-style: none;margin-left: 0;}
#nav_sp > ul > li {position: relative;}

#nav_sp a {
color: #fff !important;
text-decoration: none !important;
display: block;
padding: 15px 0;
border-bottom:1px solid #666;
transition: background-color .3s linear;
}
#nav_sp a:hover {
text-decoration:none !important;
background: #900;
color:#fff !important;
}

/* sub-menu */
#nav_sp .sub-menu-nav {
position: fixed;
background: #033560;
color: #fff;
top: 0;
padding-top: 20px;
left: 260px;
width: 0;
height: 100%;
overflow: hidden;
transition: width .2s ease-out;
}
#nav_sp .sub-menu-nav a,
#nav_sp .sub-menu:hover .sub-menu-nav {
width: 230px;
}

/* nav-toggle */
#nav-toggle {
display: none;
position: fixed;
top: 20px;
right: 15px;
height: 32px;
cursor:pointer;
}
#nav-toggle > div {
position: relative;
width: 32px;
}
#nav-toggle span {
width: 100%;
height: 2px;
left: 0;
display: block;
background: #fff;
position: absolute;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
}

#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 11px;}
#nav-toggle span:nth-child(3) {top: 22px;}

#overlay {
display: none;
position: fixed;
background: rgba(0,0,0,.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}