/*
Theme Name: KID FRESINO
Author: KID FRESINO
Author URI: http://kidfresino.com/
Description: KID FRESINO
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,#header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,#header,hgroup,menu,nav,section{display:block}.clear{clear:both}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}.screen-reader-text{clip:rect(1px, 1px, 1px, 1px);position:absolute !important}

body {
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

body {
font-size: 100%;
font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color: #FFF;
min-height: 100%;
height: auto !important;
height: 100%;
background: #000;
}
html{
height: 100%;
overflow-x: hidden;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
#wrapper {
width: 100%;
height: auto;
margin: 0 auto;
overflow: hidden;
}
#inner {
width: 100%;
height: auto;
margin: 0 auto;
overflow: hidden;
}
div#main-image {
width: 100%;
height: auto;
z-index: -1;
}
#header {
width: 100%;
height: 80px;
background: transparent;
z-index: 9999999;
}

/*********************************************************
header menu
*********************************************************/
#header-menu {
z-index: 999999;
width: 100%;
background: #222;
height: 60px;
}
#header-menu ul {
position: absolute;
z-index: 999999;
top: 22px;
right: 4%;
}
#header-menu ul li {
float: left;
padding: 0 15px;
}
#header-menu ul li a {
color: #FFF;
font-size: 15px;
font-weight: bold;
}
#footer {
display: none;
height: 30px;
position: absolute;
bottom: 0;
line-height: 30px;
text-align: center;
z-index: 99999;
overflow: hidden;
width: 100%;
text-align: center;
}
div#sns-box {
width: 100%;
margin: 0px auto;
}
div#sns-box ul li {
width: 30px;
display: inline-block;
}
div#sns-box ul li a {
color: #FFF;
font-size: 13px;
}
#content {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000000;
}
#content h1 {
font-family: 'Assistant', sans-serif;
color: #FFF;
font-size: 18px;
font-weight: 400;
text-align: center;
margin: 20px auto;
}
/*** sp menu ***/
.menu-trigger,
.menu-trigger span{
display: inline-block;
transition: all .4s;
box-sizing: border-box;
cursor :pointer;
}
.menu-trigger{
position: absolute;
width: 50px;
height: 70px;
background: transparent;
z-index: 2;
top: 0;
}
.menu-trigger span{
position: absolute;
background: #FFF;
width: 20px;
height: 1px;
left: 0;
right: 0;
margin: auto;
}
.menu-trigger span:nth-of-type(1){
top: 30px;
}
.menu-trigger span:nth-of-type(2){
top: 0;
bottom: 0;
}
.menu-trigger span:nth-of-type(3){
bottom: 30px;
}
.menu-trigger.active span:nth-of-type(1){
-webkit-transform: translateY(6px) rotate(-45deg);
transform: translateY(6px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2){
opacity: 0;
}
.menu-trigger.active span:nth-of-type(3){
-webkit-transform: translateY(-7px) rotate(45deg);
transform: translateY(-3px) rotate(45deg);
}
/*********************************************************
about
*********************************************************/
section#content.about {
margin: 50px auto 150px auto;
width: 90%;
max-width: 1000px;
color: #222;
font-size: 15px;
}
section#content.about h2 {
font-size: 40px;
text-align: center;
font-weight: bold;
color: #333;
margin-bottom: 50px;
position: relative;
}
.background {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-image: url(img/sp-bg.jpg);
background-size: contain;
z-index: -1;
}
div#over-contents {
margin: 0 auto;
width: 160px;
text-align: center;
position: absolute;
top:50%;
left: 50%;
margin-top: -10px;
margin-left: -80px;
}
h1#top {
width: 100%;
height: auto;
margin: 0;
padding: 0;
animation-delay:1.5s;
animation-duration: 2s;
}
h1#top img {
width: 100%;
height: auto;
}

/* ==========================================================================
Navigation
========================================================================== */
.nav-toggle {
position: absolute;
top: 18px;
right: 18px;
z-index: 9999999;
padding: 10px 30px 10px 0px;
cursor: pointer;
}
.nav-toggle:focus {
outline: none;
}
.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {
content: '';
position: absolute;
display: block;
width: 22px;
height: 1px;
background: #fff;
cursor: pointer;
}
.nav-toggle span:before {
top: -7px
}
.nav-toggle span:after {
bottom: -7px
}
.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.nav-toggle.active span {
background-color: transparent
}
.nav-toggle.active span:before, .nav-toggle.active span:after {
top: -3px;
}
.nav-toggle.active span:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #FFF;
}
.nav-toggle.active span:after {
top: 7px;
-webkit-transform: translateY(-10px) rotate(-45deg);
-ms-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
background: #FFF;
}
.navicon {
position: relative;
height: 50px;
}
.navicon-fixed {
position: fixed;
top: 59px;
right: 143px;
}
/* ==========================================================================
Nav Overlay
========================================================================== */
/* Overlay style */

.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
z-index: 999999;
}
/* Menu style */
.overlay nav {
position: relative;
top: 50%;
height: auto;
text-align: center;
font-size: 20px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay ul {
position: relative;
display: inline-block;
margin: 0 auto;
padding: 0;
list-style: none;
}
.overlay ul li {
display: block;
}
.overlay ul li a {
text-align: center;
display: block;
padding: 20px 0;
color: #FFF;
text-transform: uppercase;
font-weight: 400;
font-size: 16px;
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
font-family: 'Assistant', sans-serif;
}
.overlay ul li a:hover, .overlay ul li a:focus {
color: #999;
}
.overlay-boxify {
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-boxify.open {
visibility: visible;
opacity: 1;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.overlay-boxify nav ul li {
opacity: 0;
-webkit-transform: translate3d(0px, 0px, 0);
transform: translate3d(0px, 0px, 0);
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}
.overlay-boxify.open nav ul:first-child li:first-child {
transition-delay: 0.6s;
}
.overlay-boxify.open nav ul:first-child li:nth-child(2) {
transition-delay: 0.7s;
}
.overlay-boxify.open nav ul:first-child li:nth-child(3) {
transition-delay: 0.8s;
}
.overlay-boxify.open nav ul:first-child li:nth-child(4) {
transition-delay: 0.9s;
}
.overlay-boxify.open nav ul:first-child li:nth-child(5) {
transition-delay: 1.0s;
}
.overlay-boxify.open nav ul:first-child li:nth-child(6) {
transition-delay: 1.1s;
}
.overlay-boxify.open nav ul:first-child li:nth-child(7) {
transition-delay: 1.2s;
}
.overlay-boxify.open nav ul li {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

/* ==========================================================================
biography
========================================================================== */
.bio-wrap {
width: 1000px;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
margin-top: -225px;
margin-left: -500px;
}
.bio-wrap .left {
width: 300px;
height: auto;
float: left;
margin-right: 50px;
}
.bio-wrap .left img {
width: 100%;
height: auto;
}
.bio-wrap .right {
width: 650px;
float: left;
}
.bio-wrap .right h2 {
font-family: 'Assistant', sans-serif;
color: #FFF;
font-size: 18px;
margin: 0 0 20px 0;
}
.bio-wrap .right h2 span {
color: #FFF;
font-size: 10px;
margin: 0;
line-height: 2.0em;
}
.bio-wrap .right p.jp {
font-size: 12px;
color: #FFF;
line-height: 1.5em;
margin-bottom: 20px;
}
.bio-wrap .right p.en {
font-family: 'Assistant', sans-serif;
font-size: 12px;
color: #FFF;
line-height: 1.5em;
margin-bottom: 20px;
}
/* ==========================================================================
store
========================================================================== */
.store {
margin: 0 auto;
}
.store-wrap {
width: 100px;
height: 14px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -7px;
text-align: center;
}
.store-wrap {
text-align: center;
}
.store-wrap p {
font-family: 'Assistant', sans-serif;
font-size: 15px;
color: #FFF;
text-align: center;
}
/*
#content.store {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: auto;
background: #000000;
}
*/
.os-wrap section {
width: 500px;
float: left;
}
.os-wrap section img {
width: 100%;
height: auto;
}

/* ==========================================================================
video
========================================================================== */
#content.video {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: auto;
background: #000000;
}
.video-wrap {
width: 100%;
margin: 0 auto;
max-width: 1000px;
}
.video-wrap ul {
list-style: none;
text-align: left;
font-size: 0;
}
.video-wrap ul li {
width: 28%;
display: inline-block;
list-style: none;
margin: 0 2.5%;
}
.video-wrap ul li iframe {
width: 100%!important;
height: 240px!important;
}
/* ==========================================================================
sound
========================================================================== */
#content.sound {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: auto;
background: #000000;
}
.sound-wrap {
width: 100%;
margin: 0 auto;
max-width: 1000px;
}
.sound-wrap h2 {
font-family: 'Assistant', sans-serif;
font-size: 18px;
color: #FFF;
text-align: left;
font-weight: 800;
margin-bottom: 20px;
}
.sound-wrap section {
margin: 0px auto 70px auto;
padding-bottom: 70px;
border-bottom: 1px solid #999;
}
.sound-image {
width: 270px;
height: auto;
float: left;
margin-right: 50px;
}
.sound-image img {
width: 100%;
height: auto;
}
.sound-description {
width: 680px;
float: left;
}
p.buy-link {
text-align: center;
padding: 10px 0;
background: #FFF;
margin-top: 10px;
}
p.buy-link a {
font-family: 'Assistant', sans-serif;
font-size: 15px;
color: #000;
text-align: center;
font-weight: 800;
}
p.sound-description {
font-size: 12px;
line-height: 1.5em;
}
.sound-wrap section:last-child {
border: none;
}
/*
.sound-wrap ul {
list-style: none;
text-align: center;
font-size: 0;
}
.sound-wrap ul li {
width: 100%;
display: inline-block;
list-style: none;
margin: 0 auto;
}
.sound-wrap ul li img {
width: 100%;
height: auto;
}
*/
/* ==========================================================================
sound
========================================================================== */
#content.live {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: auto;
background: #000000;
}
.live-wrap {
width: 100%;
margin: 0 auto;
max-width: 600px;
}
#content.live section {
margin: 0 auto 40px auto;
}
#content.live section h2 {
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
}
#content.live section .live-text {
font-size: 13px;
line-height: 1.5em;
}
#content.live section .live-text img {
width: 100%;
height: auto;
margin: 10px auto;
}
/* ==========================================================================
online store
========================================================================== */
.os-wrap {
width: 100%;
max-width: 1200px;
margin: 50px auto;
}
.os-wrap section {
width: 45%;
margin: 0 2.5%;
}


@media screen and (min-width: 769px) {
.sp {
display: none;
}
}

/*** sp ***/
@media screen and (max-width: 768px) {
.pc {
display: none;
}
.background {
background-image: url(img/sp-bg.jpg);
background-size: contain;
}
div#over-contents {
    width: 140px;
    margin-top: -10px;
    margin-left: -70px;
}
h1#top {
font-family: 'Assistant', sans-serif;
color: #FFF;
font-size: 20px;
font-weight: 400;
}
.overlay ul li a {
padding: 15px 0;
}
#content {
width: 92%;
margin: 0 4%;
}
/* bio */
#content.biography {
position: absolute;
top: 0px;
left: 0px;
height: auto;
background: #000000;
}
.bio-wrap {
width: 100%;
margin: 0 auto;
position: relative;
top: auto;
left: auto;
}
.bio-wrap .left {
width: 100%;
height: auto;
margin: 0 auto;
float: none;
}
.bio-wrap .left img {
width: 100%;
height: auto;
}
.bio-wrap .right h2 {
margin: 20px auto;
}
.bio-wrap .right {
width: 100%;
float: none;
}
/* sound */
#content.sound,
#content.live {
width: 92%;
}
.sound-wrap {
max-width: 100%;
}
.sound-image {
width: 100%;
height: auto;
float: none;
margin-right: 0px;
}
.sound-wrap h2 {
margin: 20px auto;
}
.sound-description {
width: 100%;
float: none;
}
.sound-wrap section {
margin: 0px auto 50px auto;
padding-bottom: 50px;
}
/* video */
#content.video {
width: 92%;
}
.video-wrap ul li {
width: 100%;
display: inline-block;
list-style: none;
margin: 0 auto 30px auto;
}
/* online */

}