/*=============================================================
  common.css
---------------------------------------------------------------

01. common layout
02. header
03. footer
04. home
05. profile
06. music
07. movie
08. beauty fashion
09. photo gallery
10. contact
11. thanks
12. mobile
13. media query
14. helper

===============================================================
01. common layout
=============================================================*/

.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
}

.pc,
.pc-alt {
	display: inline-block;
}

.sp {
	display: none;
}

img.for-preload {
    width: 1px;
    height: 0;
    visibility: hidden;
}

.central {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    -webkit-transform: translateX( -50% ) translateY( -50% );
    -moz-transform: translateX( -50% ) translateY( -50% );
    -ms-transform: translateX( -50% ) translateY( -50% );
    transform: translateX( -50% ) translateY( -50% );
}

.central-vertical {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    -webkit-transform: translateY( -50% );
    -moz-transform: translateY( -50% );
    -ms-transform: translateY( -50% );
    transform: translateY( -50% );
}

.inner {
    width: 86%;
    margin: 0 auto;
}

.tit-text {
    margin-bottom: 5px;
    font-size: 38px;
    letter-spacing: 6px;
}

.text-link {
    color: #000;
}

/*
* loading layer
*/

#loading-layer {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background: #d4dce6;
    transition: all ease 1000ms;
    transition-delay: 200ms;
}

.loaded #loading-layer {
    opacity: 0;
    visibility: hidden;
}

/*
* basic motion
*/

.elem-01,
.elem-02,
.elem-03,
.elem-04,
.elem-05 {
    transition: all ease 1000ms;
    transform: translateY( 35px );
    opacity: 0;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.active .elem-01,
.active .elem-02,
.active .elem-03,
.active .elem-04,
.active .elem-05 {
    transform: translateY( 0 );
    opacity: 1;
}

.elem-02 {
    transition-delay: 200ms;
}

.elem-03 {
    transition-delay: 400ms;
}

.elem-04 {
    transition-delay: 600ms;
}

.elem-05 {
    transition-delay: 800ms;
}

/*
* contents
*/

#contents {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    font-size: 18px;
    line-height: 2;
}

#contents p {
    margin-bottom: 20px;
}

#contents p.mb-minus {
    margin-bottom: 7px;
}

/*
* visual
*/

#visual {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

#visual img {
    display: block;
    background: rgba( 255,255,255,0.00001 );
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#visual #text-vertical {
    width: 15%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

#visual #text-vertical p {
    width: 26px;
    top: 47%;
    left: 53%;
}

#visual #text-vertical p img {
    animation: wave-highlight ease infinite 2800ms;
    opacity: 0.5;
}

#visual #text-vertical p img:nth-of-type( 2 ) {
    animation-delay: 100ms;
}

#visual #text-vertical p img:nth-of-type( 3 ) {
    animation-delay: 200ms;
}

#visual #text-vertical p img:nth-of-type( 4 ) {
    animation-delay: 300ms;
}

#visual #text-vertical p img:nth-of-type( 5 ) {
    animation-delay: 400ms;
}

#visual #text-vertical p img:nth-of-type( 6 ) {
    animation-delay: 500ms;
}

#visual #text-vertical p img:nth-of-type( 7 ) {
    animation-delay: 600ms;
}

#visual #text-vertical p img:nth-of-type( 8 ) {
    animation-delay: 700ms;
}

#visual #text-vertical p img:nth-of-type( 9 ) {
    animation-delay: 800ms;
}

#visual #text-vertical p img:nth-of-type( 10 ) {
    animation-delay: 900ms;
}

#visual #text-vertical p img:nth-of-type( 11 ) {
    animation-delay: 1000ms;
}

#visual #text-vertical p img:nth-of-type( 12 ) {
    animation-delay: 1100ms;
}

#visual #text-vertical p img:nth-of-type( 13 ) {
    animation-delay: 1200ms;
}

@keyframes wave-highlight {
    0%{ opacity: 0.5; }
    70%{ opacity: 0.5; }
    82%{ opacity: 1; }
    87%{ opacity: 1; }
    100%{ opacity: 0.5; }
}

#visual #visual-contents-wrapper {
    width: 40%;
    height: 100%;
    padding-right: 30px;
    position: absolute;
    top: 0;
    left: 15%;
    z-index: 1;
    overflow: hidden;
}

#visual #visual-contents-wrapper #visual-tit {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    line-height: 0;
}

#visual #visual-contents-wrapper #visual-tit > img {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    transition: all ease 2000ms;
    transition-delay: 3000ms;
    opacity: 0;
}

.loaded #visual #visual-contents-wrapper #visual-tit > img {
    opacity: 1;
}

#visual #visual-contents-wrapper #visual-tit #visual-tit-motion-deco img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: all ease 800ms;
    transform: translateX( 50px );
    opacity: 0;
}


#visual #visual-contents-wrapper #visual-tit #visual-tit-motion-deco img:nth-of-type( 1 ) {
    transition-delay: 1000ms;
}

#visual #visual-contents-wrapper #visual-tit #visual-tit-motion-deco img:nth-of-type( 2 ) {
    transition-delay: 1100ms;
}

#visual #visual-contents-wrapper #visual-tit #visual-tit-motion-deco img:nth-of-type( 3 ) {
    transition-delay: 1200ms;
}

#visual #visual-contents-wrapper #visual-tit #visual-tit-motion-deco img:nth-of-type( 4 ) {
    transition-delay: 1300ms;
}

#visual #visual-contents-wrapper #visual-tit #visual-tit-motion-deco img:nth-of-type( 5 ) {
    transition-delay: 1400ms;
}

#visual #visual-contents-wrapper #visual-tit #visual-tit-motion-deco img:nth-of-type( 6 ) {
    transition-delay: 1500ms;
}

#visual #visual-contents-wrapper #visual-tit #visual-tit-motion-deco img:nth-of-type( 7 ) {
    transition-delay: 1600ms;
}

#visual #visual-contents-wrapper #visual-tit #visual-tit-motion-deco img:nth-of-type( 8 ) {
    transition-delay: 1700ms;
}

#visual #visual-contents-wrapper #visual-tit #visual-tit-motion-deco img:nth-of-type( 9 ) {
    transition-delay: 1800ms;
}

#visual #visual-contents-wrapper #visual-tit #visual-tit-motion-deco img:nth-of-type( 10 ) {
    transition-delay: 1900ms;
}

#visual #visual-contents-wrapper #visual-tit #visual-tit-motion-deco img:nth-of-type( 11 ) {
    transition-delay: 2000ms;
}

#visual #visual-contents-wrapper #visual-tit #visual-tit-motion-deco img:nth-of-type( 12 ) {
    transition-delay: 2100ms;
}

#visual #visual-contents-wrapper #visual-tit #visual-tit-motion-deco img:nth-of-type( 13 ) {
    transition-delay: 2200ms;
}

#visual #visual-contents-wrapper #visual-tit #visual-tit-motion-deco img:nth-of-type( 14 ) {
    transition-delay: 2300ms;
}

.loaded #visual #visual-contents-wrapper #visual-tit #visual-tit-motion-deco img {
    transform: translateX( 0 );
    opacity: 1;
}

#visual #visual-contents-wrapper .line-v {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

#visual #visual-contents-wrapper .line-v > img {
    width: 2px;
    height: 0;
    position: absolute;
    top: 0;
    left: 4%;
    z-index: 1;
    transition: all ease 700ms;
}

#visual #visual-contents-wrapper #line-v-01 > img {
    transition-delay: 700ms;
}

#visual #visual-contents-wrapper #line-v-02 > img {
    transition-delay: 1800ms;
}

.loaded #visual #visual-contents-wrapper #line-v-01 > img {
    height: 84%;
}

.loaded #visual #visual-contents-wrapper #line-v-02 > img {
    height: 100%;
}

#visual #icon-scroll {
    position: absolute;
    bottom: 20%;
    left: 7%;
    z-index: 1;
}

#visual #icon-scroll img {
    display: inline-block;
    width: auto;
    height: 13px;
    transition: all ease 800ms;
    transform: translateX( 30px );
    opacity: 0;
}

#visual #icon-scroll img:nth-of-type( 1 ) {
    transition-delay: 2100ms;
}

#visual #icon-scroll img:nth-of-type( 2 ) {
    transition-delay: 2200ms;
}

#visual #icon-scroll img:nth-of-type( 3 ) {
    transition-delay: 2300ms;
}

#visual #icon-scroll img:nth-of-type( 4 ) {
    transition-delay: 2400ms;
}

#visual #icon-scroll img:nth-of-type( 5 ) {
    transition-delay: 2500ms;
}

#visual #icon-scroll img:nth-of-type( 6 ) {
    transition-delay: 2600ms;
}

.loaded #visual #icon-scroll img {
    transform: translateX( 0 );
    opacity: 1;
}

/*
* bg
*/

#bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

/*
* video
*/

#video-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

#video {
    min-width: 100%;
    min-height: 100%;
    background: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    -webkit-transform: translateX( -50% ) translateY( -50% );
    -moz-transform: translateX( -50% ) translateY( -50% );
    -ms-transform: translateX( -50% ) translateY( -50% );
    transform: translateX( -50% ) translateY( -50% );
}

/*
* row divi
*/

.row-divi {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

.row-divi .box-slide {
    width: 55%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

.row-divi .box-slide-mini {
    width: 100%;
    padding-top: 35%;
    margin-bottom: 25px;
    position: relative;
    top: 0;
    left: -30%;
    z-index: 1;
    overflow: hidden;
}

.row-divi .box-slide div,
.row-divi .box-slide-mini div {
    width: 100%;
    height: 100%;
    background-position: top center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transform: scale( 1.25 );
}

.row-divi .box-text {
    width: 39%;
    padding: 60px 0;
    margin-left: 58%;
}

.row-divi .box-text h1 {
    margin-bottom: 40px;
    position: relative;
    top: 0;
    left: -30%;
    z-index: 1;
}

.row-divi .box-text h1 img {
    width: auto;
    height: 100px;
}

/*
* slide animation
*/

.box-slide {
    background: #fff;
}

.box-slide div:nth-of-type(1),
.box-slide-mini div:nth-of-type(1) {
    animation: slide-motion-01 linear infinite 20000ms;
}

.box-slide div:nth-of-type(2),
.box-slide-mini div:nth-of-type(2) {
    opacity: 0;
    animation: slide-motion-02 linear infinite 20000ms;
}

.box-slide div:nth-of-type(3),
.box-slide-mini div:nth-of-type(3) {
    opacity: 0;
    animation: slide-motion-03 linear infinite 20000ms;
}

@keyframes slide-motion-01 {
    0% { transform: scale( 1.25 ) translateX( -6% ); }
    33% { transform: scale( 1.25 ) translateX( 0 ); }
    36% { transform: scale( 1.25 ) translateX( 0 ); }
    93% { transform: scale( 1.25 ) translateX( -7% ); }
    100% { transform: scale( 1.25 ) translateX( -6% ); }
}

@keyframes slide-motion-02 {
    0% { opacity: 0; transform: scale( 1.25 ) translateX( -7% ); }
    30% { opacity: 0; transform: scale( 1.25 ) translateX( -7% ); }
    33% { opacity: 1; transform: scale( 1.25 ) translateX( -6.5% ); }
    63% { opacity: 1; transform: scale( 1.25 ) translateX( 0 ); }
    66% { opacity: 0; transform: scale( 1.25 ) translateX( 0 ); }
    100% { opacity: 0; transform: scale( 1.25 ) translateX( 0 ); }
}

@keyframes slide-motion-03 {
    0% { opacity: 0; transform: scale( 1.25 ) translateX( -7% ); }
    60% { opacity: 0; transform: scale( 1.25 ) translateX( -7% ); }
    63% { opacity: 1; transform: scale( 1.25 ) translateX( -6.5% ); }
    96% { opacity: 1; transform: scale( 1.25 ) translateX( 0 ); }
    99% { opacity: 0; transform: scale( 1.25 ) translateX( 0 ); }
    100% { opacity: 0; transform: scale( 1.25 ) translateX( 0 ); }
}

/*
* btn 01
*/

.btn-01 {
    display: inline-block;
    width: 100%;
    padding: 10px 0;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
    text-decoration: none;
    color: #000;
}

.btn-01 img {
    display: inline-block;
    width: auto;
    height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.btn-01:hover img {
    animation: wave-vertical ease forwards 400ms;
}

.btn-01 img:nth-of-type( 2 ) {
    animation-delay: 100ms;
}

.btn-01 img:nth-of-type( 3 ) {
    animation-delay: 200ms;
}

.btn-01 img:nth-of-type( 4 ) {
    animation-delay: 300ms;
}


@keyframes wave-vertical {
    0%{ transform: translateY( 0 ) }
    50%{ transform: translateY( -6px ) }
    100%{ transform: translateY( 0 ) }
}

.btn-01 .line {
    display: inline-block;
    width: calc( 100% - 135px );
    height: 1px;
    background: rgba( 0,0,0,0.2 );
    position: absolute;
    top: 62%;
    right: 0;
    z-index: 1;
}

.btn-01 .line::before {
    display: inline-block;
    content: "";
    width: 0;
    height: 1px;
    background: rgba( 0,0,0,0.6 );
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: all ease 600ms;
}

.btn-01:hover .line::before {
    width: 100%;
}

/*
* btn 02
*/

.btn-02 {
    display: inline-block;
    width: 100%;
    padding: 15px 0;
    border-radius: 100px;
    background: rgba( 255,255,255,0.5 );
    text-decoration: none;
    color: #000;
    text-align: center;
    transition: all ease 400ms;
}

.btn-02:hover {
    background: rgba( 255,255,255,0.85 );
    box-shadow: 0 0 10px rgba( 0,0,0,0.1 );
}

/*
* icon sns
*/

aside.icon-sns ul li,
aside.icon-sns ul li a {
    display: inline-block;
}

aside.icon-sns ul li:nth-of-type( 3 ) a {
    padding: 0 3px;
}

aside.icon-sns ul li a img {
    width: auto;
    height: 34px;
}

/*
* pages
*/

.pages #bg {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.pages #visual #visual-contents-wrapper {
    width: 50%;
}

.pages #visual #visual-contents-wrapper #visual-tit {
    top: 5px;
}

.pages .tit {
    margin-bottom: 100px;
}

.pages .tit img {
    width: auto;
    height: 100px;
}

.pages #visual {
    margin-bottom: 100px;
}

.pages .belt-gold {
    padding: 2px;
    background: url( /common/img/shared/belt-gold.jpg ) center center no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    text-align: center;
}

.pages .belt-gold span {
    display: inline-block;
    width: 100%;
    padding: 5px 0;
    border: solid 1px #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/*=============================================================
02. header
=============================================================*/

#main-header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

#main-header > h1 {
    width: 270px;
    position: absolute;
    top: 40px;
    right: 105px;
    z-index: 1;
}

#main-header > h1 a {
    display: block;
}

/*
* icon nav
*/

#main-header #icon-nav {
    width: 140px;
    height: 140px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
    cursor: pointer;
}

#main-header #icon-nav img {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    transition: all ease 600ms;
}

#main-header #icon-nav img:nth-of-type( 1 ) {
    opacity: 0.8;
}

#main-header #icon-nav img:nth-of-type( 3 ) {
    opacity: 0;
}

.nav-open #main-header #icon-nav img:nth-of-type( 1 ) {
    width: 0;
    opacity: 0;
}

.nav-open #main-header #icon-nav img:nth-of-type( 2 ) {
    opacity: 0;
}

.nav-open #main-header #icon-nav img:nth-of-type( 3 ) {
    width: 100%;
    opacity: 1;
    transition-delay: 600ms;
}

/*
* global nav
*/

#main-header #nav-wrapper {
    width: 100%;
    height: 100%;
    background: url( /common/img/shared/nav-bg.jpg ) center center no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: all ease 800ms;
}

.nav-open #main-header #nav-wrapper {
    opacity: 1;
    visibility: visible;
}

#main-header #nav-wrapper #close-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#main-header #nav-wrapper nav {
    left: 49%;
}

#main-header #nav-wrapper nav ul li {
    display: block;
    transition: all ease 600ms;
    transform: translateX( 35px );
    opacity: 0;
    white-space: nowrap;
}

.nav-open #main-header #nav-wrapper nav ul li {
    transform: translateX( 0 );
    opacity: 1;
}

.nav-open #main-header #nav-wrapper nav ul li:nth-of-type( 1 ) {
    transition-delay: 500ms;
}

.nav-open #main-header #nav-wrapper nav ul li:nth-of-type( 2 ) {
    transition-delay: 600ms;
}

.nav-open #main-header #nav-wrapper nav ul li:nth-of-type( 3 ) {
    transition-delay: 700ms;
}

.nav-open #main-header #nav-wrapper nav ul li:nth-of-type( 4 ) {
    transition-delay: 800ms;
}

.nav-open #main-header #nav-wrapper nav ul li:nth-of-type( 5 ) {
    transition-delay: 900ms;
}

.nav-open #main-header #nav-wrapper nav ul li:nth-of-type( 6 ) {
    transition-delay: 1000ms;
}

.nav-open #main-header #nav-wrapper nav ul li:nth-of-type( 7 ) {
    transition-delay: 1100ms;
}

#main-header #nav-wrapper nav ul li a {
    display: inline-block;
    padding: 20px 0;
}

#main-header #nav-wrapper nav ul li a img {
    width: auto;
    height: 52px;
}

#main-header #nav-wrapper nav ul li a span {
    display: inline-block;
    padding-right: 15px;
    transform: scale( 0.75 ) translateX( -30px );
    opacity: 0;
    transition: all ease 600ms;
}

#main-header #nav-wrapper nav ul li a:hover span {
    transform: scale( 0.75 ) translateX( 0 ) rotateX( 180deg );
    opacity: 1;
}

/*=============================================================
03. footer
=============================================================*/

#main-footer {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

#main-footer p {
    margin-bottom: 0;
    padding: 90px 0;
    text-align: center;
}

#main-footer p img {
    width: 240px;
}

/*=============================================================
04. home
=============================================================*/

#home #main-header h1 {
    display: none;
}

#home #bg #box-light-ball {
    display: none;
}

#home #visual {
    background: url( /common/img/home/visual-white-gradation.png ) right bottom no-repeat;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
}

#home #visual #person {
    width: 100%;
    height: 100%;
    background: url( /common/img/home/visual-rie.png ) top center no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    transition: all ease 2000ms;
    transform: translateX( 20px );
    transition-delay: 2000ms;
    opacity: 0;
}

#home.loaded #visual #person {
    transform: translateX( 0 );
    opacity: 1;
}

#home #part-01 {
    padding-top: 160px;
}

#home #part-01 .row-divi .box-slide div:nth-of-type( 1 ) {
    background-image: url( /common/img/home/img-slide-01.jpg );
}

#home #part-01 .row-divi .box-slide div:nth-of-type( 2 ) {
    background-image: url( /common/img/home/img-slide-02.jpg );
}

#home #part-01 .row-divi .box-slide div:nth-of-type( 3 ) {
    background-image: url( /common/img/home/img-slide-03.jpg );
}

#home #part-01 .row-divi .box-slide-mini div:nth-of-type( 1 ) {
    background-image: url( /common/img/home/img-slide-mini-01.jpg );
}

#home #part-01 .row-divi .box-slide-mini div:nth-of-type( 2 ) {
    background-image: url( /common/img/home/img-slide-mini-02.jpg );
}

#home #part-01 .row-divi .box-slide-mini div:nth-of-type( 3 ) {
    background-image: url( /common/img/home/img-slide-mini-03.jpg );
}

#home #part-01 .row-divi .box-text aside.icon-sns {
    margin-bottom: 6px;
}

/*=============================================================
05. profile
=============================================================*/

#profile #bg {
    background-image: url( /common/img/profile/bg.jpg );
}

#profile #visual #visual-contents-wrapper {
    width: 60%;
}

#profile .row {
    margin-bottom: 5%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

#profile .row:last-of-type {
    margin-bottom: 0;
}

#profile .row .box-text {
    width: 47%;
    padding: 10% 0;
}

#profile .row.img-left .box-text {
    margin-left: 53%;
}

#profile .row .box-text .tit-text {
    margin-bottom: 13px;
}

#profile .row .box-text .row-sns {
    margin-bottom: 30px;
}

#profile .row .box-text .row-sns p,
#profile .row .box-text .row-sns aside.icon-sns {
    display: inline-block;
}

#profile .row .box-text .row-sns p {
    margin-right: 17px;
    position: relative;
    font-style: italic;
    font-size: 20px;
    letter-spacing: 3px;
    color: rgba( 0,0,0,0.5 );
}

#profile .row .box-text .row-sns p::after {
    display: inline-block;
    content: "";
    width: 100px;
    height: 1px;
    background: rgba( 0,0,0,0.2 );
    position: relative;
    top: -6px;
    left: 12px;
    z-index: 1;
}

#profile .row .box-text .row-sns aside.icon-sns {
    position: relative;
    top: -1px;
    left: 0;
    z-index: 1;
}

#profile .row .box-text p {
    margin-bottom: 30px;
}

#profile .row .box-text p:last-of-type {
    margin-bottom: 0;
}

#profile .row .box-img {
    width: 47%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
    overflow: hidden;
}

#profile .row.img-left .box-img {
    left: 0;
}

#profile .row.img-right .box-img {
    right: 0;
}

#profile .row .box-img div {
    width: 100%;
    height: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}
#profile .row .box-img div:nth-of-type(2) {
	animation: slide-simple-02 18000ms linear infinite;
}

#profile .row .box-img div:nth-of-type(3) {
	animation: slide-simple-03 18000ms linear infinite;
}

@keyframes slide-simple-02 {
	0% { opacity: 1; }
	63% { opacity: 1; }
	66% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes slide-simple-03 {
	0% { opacity: 1; }
	30% { opacity: 1; }
	33% { opacity: 0; }
	97% { opacity: 0; }
	100% { opacity: 1; }
}

#profile .row:nth-of-type( 1 ) .box-img div:nth-of-type( 1 ) {
    background-image: url( /common/img/profile/img-01.jpg );
}

#profile .row:nth-of-type( 1 ) .box-img div:nth-of-type( 2 ) {
    background-image: url( /common/img/profile/img-02.jpg );
}

#profile .row:nth-of-type( 1 ) .box-img div:nth-of-type( 3 ) {
    background-image: url( /common/img/profile/img-03.jpg );
}

#profile .row:nth-of-type( 2 ) .box-img div:nth-of-type( 1 ) {
    background-image: url( /common/img/profile/img-04.jpg );
}

#profile .row:nth-of-type( 2 ) .box-img div:nth-of-type( 2 ) {
    background-image: url( /common/img/profile/img-05.jpg );
}

#profile .row:nth-of-type( 2 ) .box-img div:nth-of-type( 3 ) {
    background-image: url( /common/img/profile/img-06.jpg );
}

/*=============================================================
06. music
=============================================================*/

#music #bg {
    background-image: url( /common/img/music/bg.jpg );
}

#music #contents {
    padding-bottom: 5%;
}

#music .tit {
    margin-bottom: 10%;
}

#music #releaced .row-songs.neo-classicsa {
    margin-bottom: 21%;
}

#music #releaced .row-songs.neo-classics {
    margin-bottom: 20%;
}

#music #releaced .row-songs.i-see-you {
    margin-bottom: 20%;
}

#music #releaced .row-songs.sunrise {
    margin-bottom: 32%;
}

#music #releaced .row-songs.drowse {
    margin-bottom: 20%;
}

#music #releaced .row-songs.feel-the-forest {
    margin-bottom: 20%;
}

#music .i-see-you a.btn-02 {
    margin-bottom: 30px;
}

#music .qr {
    width: 100px;
}

#music .row-qr {
    width: 400px;
    background: rgba( 255,255,255,0.5 );
}

#music .qr,
#music .row-qr p {
    float: left;
}

#music .row-qr p {
    width: calc( 100% - 100px );
    padding: 18px 10px 0 15px;
    margin-bottom: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1.8;
}

#music #releaced .row-songs {
    margin-bottom: 10%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: visible;
}

#music #releaced .row-songs .lefter {
    width: 58%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#music #releaced .row-songs .lefter .box-jacket {
    width: 100%;
}

#music #releaced .row-songs .lefter .box-jacket img {
    display: block;
    width: 70%;
}

#music #releaced .row-songs .lefter .box-jacket .frame,
#music #releaced .row-songs .lefter .box-jacket .volum-01,
#music #releaced .row-songs .lefter .box-jacket .volum-02,
#music #releaced .row-songs .lefter .box-jacket .round,
#music #releaced .row-songs .lefter .box-jacket .reflection {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    transform: scale( 0.88 );
}

#music #releaced .row-songs .lefter .box-jacket .volum-01 {
    animation: volum-01 linear infinite 14000ms;
}

#music #releaced .row-songs .lefter .box-jacket .volum-02 {
    animation: volum-02 linear infinite 14000ms;
}

@keyframes volum-01 {
    0%{ transform: scale( 0.88 ) rotate( 0deg ); }
    10%{ transform: scale( 0.7 ) rotate( 36deg ); }
    20%{ transform: scale( 0.82 ) rotate( 72deg ); }
    22%{ transform: scale( 0.75 ) rotate( 77deg ); }
    24%{ transform: scale( 0.88 ) rotate( 82deg ); }
    30%{ transform: scale( 0.6 ) rotate( 108deg ); }
    40%{ transform: scale( 0.88 ) rotate( 144deg ); }
    50%{ transform: scale( 0.78 ) rotate( 180deg ); }
    60%{ transform: scale( 0.8 ) rotate( 216deg ); }
    62%{ transform: scale( 0.65 ) rotate( 220deg ); }
    64%{ transform: scale( 0.9 ) rotate( 224deg ); }
    70%{ transform: scale( 0.7 ) rotate( 252deg ); }
    80%{ transform: scale( 0.73 ) rotate( 288deg ); }
    90%{ transform: scale( 0.79 ) rotate( 324deg ); }
    100%{ transform: scale( 0.88 ) rotate( 360deg ); }
}

@keyframes volum-02 {
    0%{ transform: scale( 0.88 ) rotate( 0deg ); }
    10%{ transform: scale( 0.7 ) rotate( 36deg ); }
    20%{ transform: scale( 1.1 ) rotate( 72deg ); }
    22%{ transform: scale( 0.75 ) rotate( 77deg ); }
    24%{ transform: scale( 0.88 ) rotate( 82deg ); }
    30%{ transform: scale( 0.6 ) rotate( 108deg ); }
    40%{ transform: scale( 0.88 ) rotate( 144deg ); }
    50%{ transform: scale( 0.6 ) rotate( 180deg ); }
    60%{ transform: scale( 0.88 ) rotate( 216deg ); }
    62%{ transform: scale( 0.65 ) rotate( 220deg ); }
    64%{ transform: scale( 0.58 ) rotate( 224deg ); }
    70%{ transform: scale( 0.7 ) rotate( 252deg ); }
    80%{ transform: scale( 0.88 ) rotate( 288deg ); }
    90%{ transform: scale( 0.83 ) rotate( 324deg ); }
    100%{ transform: scale( 0.88 ) rotate( 360deg ); }
}

#music #releaced .row-songs .lefter .box-jacket .frame,
#music #releaced .row-songs .lefter .box-jacket .volum-01,
#music #releaced .row-songs .lefter .box-jacket .volum-02 {
    opacity: 0.55;
}

#music #releaced .row-songs .lefter .box-jacket .flow {
    opacity: 0.65;
}

#music #releaced .row-songs .lefter .box-jacket .frame,
#music #releaced .row-songs .lefter .box-jacket .round {
    transform: scale( 0.88 );
    animation: go-round linear infinite 18000ms;
}

@keyframes go-round {
    0%{ transform: scale( 0.88 ) rotate( 0deg ); }
    100%{ transform: scale( 0.88 ) rotate( 360deg ); }
}

#music #releaced .row-songs .lefter .box-jacket .icon-music {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

#music #releaced .row-songs .lefter .box-jacket .jacket {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    box-shadow: 0 0 30px rgba( 0,0,0,0.2 );
}

#music #releaced .row-songs .righter {
    width: 40%;
    margin: 0 0 30px 60%;
}

#music #releaced .row-songs .righter ul li {
    margin-bottom: 10px;
}

#music #releaced .row-songs .righter ul li:last-of-type {
    margin-bottom: 0;
}

#music #releaced .row-songs .righter ul li a.btn-01 .line {
    width: calc( 100% - 150px );
    top: 50%;
}

#music #ivent .row-ivent {
    margin-bottom: 13%;
}

#music #ivent .row-ivent:last-of-type {
    margin-bottom: 0;
}

#music #ivent .lefter,
#music #ivent .righter {
    float: left;
}

#music #ivent .lefter {
    width: 40%;
    max-width: 700px;
    position: relative;
    top: 100px;
    left: 0;
    z-index: 2;
}

#music #ivent .righter {
    width: 60%;
    padding: 5%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: visible;
}

#music #ivent .righter::before {
    display: inline-block;
    content: "";
    width: 130%;
    height: 100%;
    background: rgba( 255,255,255,0.5 );
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

#music #ivent .righter-inner {
    position: relative;
    left: 0;
    z-index: 1;
}

#music #ivent .righter .tit-text {
    margin-bottom: 20px;
    font-size: 50px;
    line-height: 1.3;
}

#music #ivent .righter .tit-text span.mini {
    font-size: 40px;
}

/*=============================================================
07. movie
=============================================================*/

#movie #bg {
    background-image: url( /common/img/movie/bg.jpg );
}

#movie .mass {
    margin-bottom: 5%;
}

#movie #contents p {
    margin-bottom: 6px;
}

#movie #contents p:last-of-type {
    margin-bottom: 0;
}

#movie .tit-text {
    margin-bottom: 16px;
    line-height: 1.5;
}

#movie .mass:last-of-type {
    margin-bottom: 0;
}

#movie .row .box-video-thumb,
#movie .row .box-text {
    float: left;
    width: 50%;
}

#movie .row .box-text {
    padding-left: 5%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#movie .row .box-text p:last-of-type {
    margin-bottom: 0;
}

#movie .row .box-video-thumb {
    padding-top: 35%;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

#movie .row .box-video-thumb a,
#movie .row .box-video-thumb .box-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#movie .row .box-video-thumb a {
    display: block;
    overflow: hidden;
}

#movie .row .box-video-thumb .box-img {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    transition: all ease 800ms;
}

#movie .row .box-video-thumb a:hover .box-img {
    transition: all linear 7000ms;
    transform: scale( 1.2 );
}

#movie .row .box-video-thumb .icon-play {
    width: 12%;
}

#movie .row .box-video-thumb p.time {
    display: inline-block;
    padding: 12px 14px;
    margin-bottom: 0;
    border-radius: 3px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 1;
    background: rgba( 0,0,0,0.6 );
    line-height: 1;
    color: #fff;
    font-size: 13px;
}

#movie #part-01 .box-img {
    background-image: url( /common/img/movie/thumb-01.jpg );
}

#movie #part-02 .box-img {
    background-image: url( /common/img/movie/thumb-02.jpg );
}

#movie #part-03 .box-img {
    background-image: url( /common/img/movie/thumb-03.jpg?v1 );
}

#movie #part-04 .box-img {
    background-image: url( /common/img/movie/thumb-04.jpg?v1 );
}

#movie #part-05 .box-img {
    background-image: url( /common/img/movie/thumb-05.jpg );
}

#movie #part-06 .box-img {
    background-image: url( /common/img/movie/thumb-06.jpg );
}

#movie #part-07 .box-img {
    background-image: url( /common/img/movie/thumb-07.jpg );
}

#movie #part-08 .box-img {
    background-image: url( /common/img/movie/thumb-08.jpg );
}

#movie #part-09 .box-img {
    background-image: url( /common/img/movie/thumb-09.jpg );
}

#movie #part-10 .box-img {
    background-image: url( /common/img/movie/thumb-10.jpg );
}

/*=============================================================
08. beauty fashion
=============================================================*/

#beauty-fashion #bg {
    background-image: url( /common/img/beauty-fashion/bg.jpg );
}

#beauty-fashion #visual #visual-contents-wrapper {
    width: 65%;
}

#beauty-fashion .mass {
    margin-bottom: 10%;
}

#beauty-fashion .mass:last-of-type {
    margin-bottom: 1%;
}

#beauty-fashion .row {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

#beauty-fashion .row .box-img {
    width: 50%;
    padding-top: 50%;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    float: left;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

#beauty-fashion .sold-out .row .box-img::after,
#beauty-fashion .few-left .row .box-img::after {
    display: inline-block;
    content: "";
    width: 140px;
    height: 140px;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#beauty-fashion .sold-out .row .box-img::after {
    background-image: url( /common/img/beauty-fashion/icon-sold-out.png );
}

#beauty-fashion .few-left .row .box-img::after {
    background-image: url( /common/img/beauty-fashion/icon-few-left.png );
}

#beauty-fashion .row .box-text {
    width: 50%;
    float: left;
    overflow: visible;
}

#beauty-fashion .row .box-text h1.tit-text {
    padding: 8% 0;
    margin-bottom: 0;
    position: relative;
    top: 0;
    left: -10%;
    z-index: 1;
    font-size: 70px;
    line-height: 1.4;
}

#beauty-fashion .row .box-text .white-base {
    width: 95%;
    margin-left: 5%;
    padding: 10%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: rgba( 255,255,255,0.6 );
}

#beauty-fashion #part-piercing .row .box-img {
    background-image: url( /common/img/beauty-fashion/fortune-heart-piercing.jpg );
}

#beauty-fashion #part-earrings .row .box-img {
    background-image: url( /common/img/beauty-fashion/fortune-heart-earrings.jpg );
}

#beauty-fashion #part-necklace .row .box-img {
    background-image: url( /common/img/beauty-fashion/fortune-heart-necklace.jpg );
}

#beauty-fashion #part-ring .row .box-img {
    background-image: url( /common/img/beauty-fashion/fortune-heart-ring.jpg );
}

/*=============================================================
09. photo gallery
=============================================================*/

#photo-gallery #bg {
    background-image: url( /common/img/photo-gallery/bg.jpg );
}

#photo-gallery #visual #visual-contents-wrapper {
    width: 60%;
}

#photo-gallery #contents {
    width: 100%;
    overflow: hidden;
}

#photo-gallery .list-photo {
    padding-bottom: 100px;
    margin-bottom: 10%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

#photo-gallery .list-photo:last-of-type {
    margin-bottom: 0;
}

#photo-gallery .list-photo li {
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    vertical-align: bottom;
    transition: all ease 1200ms;
    transform: translateY( 40px );
    opacity: 0;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

#photo-gallery .list-photo.active li {
    transform: translateY( 0 );
    opacity: 1;
}

#photo-gallery .list-photo li:nth-of-type( 2 ) {
    transition-delay: 200ms;
}

#photo-gallery .list-photo li:nth-of-type( 3 ) {
    transition-delay: 400ms;
}

#photo-gallery .list-photo li:nth-of-type( 4 ) {
    transition-delay: 600ms;
}

#photo-gallery .list-photo li:nth-of-type( 5 ) {
    transition-delay: 800ms;
}

#photo-gallery .list-photo li a {
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: all ease 600ms;
}

#photo-gallery .list-photo li.colomn-three a:hover {
    transform: rotateX( 6deg ) rotateY( 9deg ) scale( 0.98 );
}

#photo-gallery .list-photo li.colomn-two a:hover {
    transform: rotateX( 5deg ) rotateY( 5deg ) scale( 0.98 );
}

#photo-gallery .list-photo li.colomn-two.lefter {
    width: 58%;
    left: -9%;
}

#photo-gallery .list-photo li.colomn-two.righter {
    width: 54%;
    position: absolute;
    bottom: 0;
    right: -9%;
    z-index: 1;
}

#photo-gallery .list-photo li.colomn-two a {
    padding-top: 70%;
}

#photo-gallery .list-photo li.colomn-three {
    width: 33.33333%;
    padding: 0 3%;
}

#photo-gallery .list-photo li.colomn-three.top-plus {
    margin-top: 100px;
    margin-bottom: 100px;
}

#photo-gallery .list-photo li.colomn-three.top-minus {
    top: -200px;
    left: 0;
}

#photo-gallery .list-photo li.colomn-three a {
    padding-top: 145%;
}

#photo-gallery .list-photo:nth-of-type( 1 ) li:nth-of-type( 1 ) a {
    background-image: url( /common/img/photo-gallery/img-01.jpg );
}

#photo-gallery .list-photo:nth-of-type( 1 ) li:nth-of-type( 2 ) a {
    background-image: url( /common/img/photo-gallery/img-02.jpg );
}

#photo-gallery .list-photo:nth-of-type( 1 ) li:nth-of-type( 3 ) a {
    background-image: url( /common/img/photo-gallery/img-03.jpg );
}

#photo-gallery .list-photo:nth-of-type( 1 ) li:nth-of-type( 4 ) a {
    background-image: url( /common/img/photo-gallery/img-04.jpg );
}

#photo-gallery .list-photo:nth-of-type( 1 ) li:nth-of-type( 5 ) a {
    background-image: url( /common/img/photo-gallery/img-05.jpg );
}

#photo-gallery .list-photo:nth-of-type( 2 ) li:nth-of-type( 1 ) a {
    background-image: url( /common/img/photo-gallery/img-06.jpg );
}

#photo-gallery .list-photo:nth-of-type( 2 ) li:nth-of-type( 2 ) a {
    background-image: url( /common/img/photo-gallery/img-07.jpg );
}

#photo-gallery .list-photo:nth-of-type( 2 ) li:nth-of-type( 3 ) a {
    background-image: url( /common/img/photo-gallery/img-08.jpg );
}

#photo-gallery .list-photo:nth-of-type( 2 ) li:nth-of-type( 4 ) a {
    background-image: url( /common/img/photo-gallery/img-09.jpg );
}

#photo-gallery .list-photo:nth-of-type( 2 ) li:nth-of-type( 5 ) a {
    background-image: url( /common/img/photo-gallery/img-10.jpg );
}

#photo-gallery .list-photo:nth-of-type( 3 ) li:nth-of-type( 1 ) a {
    background-image: url( /common/img/photo-gallery/img-11.jpg );
}

#photo-gallery .list-photo:nth-of-type( 3 ) li:nth-of-type( 2 ) a {
    background-image: url( /common/img/photo-gallery/img-12.jpg );
}

#photo-gallery .list-photo:nth-of-type( 3 ) li:nth-of-type( 3 ) a {
    background-image: url( /common/img/photo-gallery/img-13.jpg );
}

#photo-gallery .list-photo:nth-of-type( 3 ) li:nth-of-type( 4 ) a {
    background-image: url( /common/img/photo-gallery/img-14.jpg );
}

#photo-gallery .list-photo:nth-of-type( 3 ) li:nth-of-type( 5 ) a {
    background-image: url( /common/img/photo-gallery/img-15.jpg );
}

/*=============================================================
10. contact
=============================================================*/

#contact #bg {
    background-image: url( /common/img/contact/bg.jpg );
}

#contact #visual #visual-contents-wrapper {
    width: 65%;
}

#contact #visual #visual-contents-wrapper #line-v-02 > img {
    padding-top: 3%;
}

#contact.loaded #visual #visual-contents-wrapper #line-v-02 > img {
    height: 97%;
}

#contact .row-desc {
    margin-bottom: 30px;
}

#contact .no-mb {
    margin-bottom: 0;
}

#contact .white-wrapper,
#contact .white-inner {
    background: rgba( 255,255,255,0.4 );
}

#contact .white-wrapper {
    padding: 6px;
}

#contact .row {
    padding: 5%;
}

#contact .lefter,
#contact .righter {
    width: 48%;
    float: left;
}

#contact .lefter {
    padding-right: 2%;
}

#contact .righter {
    padding-left: 2%;
}

#contact table tr {
    display: inline-block;
    width: 100%;
    margin-bottom: 30px;
}

#contact table tr:last-of-type {
    margin-bottom: 0;
}

#contact table th,
#contact table td {
    display: inline-block;
    width: 100%;
    text-align: left;
}

#contact table th {
    margin-bottom: 6px;
    font-size: 24px;
}

#contact table th span {
    font-size: 12px;
}

#contact table td > div {
    font-size: 14px;
    color: #666;
    font-style: italic;
}

#contact form table input,
#contact form table textarea {
    width: 100%;
    border: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: rgba( 255,255,255,0.5 );
    font-size: 18px;
    transition: all ease 400ms;
}

#contact form table input:focus,
#contact form table textarea:focus {
    background: rgba( 255,255,255,0.7 );
    box-shadow: 0 0 20px rgba( 0,0,0,0.1 );
}

#contact form table input {
    padding: 20px;
    line-height: 1;
}

#contact form textarea  {
    padding: 24px 20px;
    line-height: 1.8;
}

#contact form .btns {
    clear: both;
    display: inline-block;
    width: 100%;
    padding: 5% 0;
    background: rgba( 255,255,255,0.5 );
    text-align: center;
    vertical-align: bottom;
}

#contact form .btns input {
    width: 30%;
    padding: 20px 0;
    border-radius: 200px;
    border: solid 1px #bbb;
    background: rgba( 255,255,255,0.2 );
    text-align: center;
    font-size: 18px;
    font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    cursor: pointer;
    transition: all ease 400ms;
}

#contact form .btns input:hover {
    border: solid 1px #000;
    background: rgba( 255,255,255,1 );
}

/*=============================================================
11. thanks
=============================================================*/

#thanks #bg {
    background-image: url( /common/img/thanks/bg.jpg );
}

#thanks main {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

#thanks #part-01 {
    width: 40%;
    max-width: 500px;
    top: 49%;
}

#thanks #part-01 h1 img,
#thanks #part-01 .row {
    display: block;
    transition: all ease 600ms;
    transform: translateY( 70px );
    opacity: 0;
}

#thanks.loaded #part-01 h1 img,
#thanks.loaded #part-01 .row {
    transform: translateY( 0 );
    opacity: 1;
}

#thanks #part-01 h1 {
    margin-bottom: 10%;
}

#thanks #part-01 h1 img {
    overflow: hidden;
}

#thanks #part-01 h1 img:nth-of-type( 1 ) {
    margin-bottom: 7%;
    transition-delay: 900ms;
}

#thanks #part-01 h1 img:nth-of-type( 2 ) {
    transition-delay: 1000ms;
}

#thanks.loaded #part-01 .row {
    transition-delay: 1100ms;
}

#thanks #part-01 a.btn-02 {
    padding: 30px 0;
    font-size: 18px;
    letter-spacing: 3px;
}

#thanks #main-footer {
    width: 100%;
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    z-index: 1;
}

#thanks #main-footer p {
    padding: 0 0 50px 0;
}

/*=============================================================
12. mobile
=============================================================*/

#home.mobile #bg {
    background-image: url(/common/img/home/tab-bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

#home.mobile #bg #box-light-ball {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

#home #bg #box-light-ball span {
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: absolute;
    top: 0;
    z-index: 1;
}

#home #bg #box-light-ball span:nth-of-type( 1 ),
#home #bg #box-light-ball span:nth-of-type( 2 ),
#home #bg #box-light-ball span:nth-of-type( 3 ),
#home #bg #box-light-ball span:nth-of-type( 4 ),
#home #bg #box-light-ball span:nth-of-type( 5 ),
#home #bg #box-light-ball span:nth-of-type( 6 ) {
    background-image: url( /common/img/home/light-red.png );
}

#home #bg #box-light-ball span:nth-of-type( 7 ),
#home #bg #box-light-ball span:nth-of-type( 8 ),
#home #bg #box-light-ball span:nth-of-type( 9 ),
#home #bg #box-light-ball span:nth-of-type( 10 ),
#home #bg #box-light-ball span:nth-of-type( 11 ),
#home #bg #box-light-ball span:nth-of-type( 12 ),
#home #bg #box-light-ball span:nth-of-type( 13 ) {
    background-image: url( /common/img/home/light-white.png );
}

#home #bg #box-light-ball span:nth-of-type( 1 ) {
    width: 40%;
    padding-top: 40%;
    animation: light-01 linear infinite 20000ms;
}

#home #bg #box-light-ball span:nth-of-type( 2 ) {
    width: 70%;
    padding-top: 70%;
    animation: light-02 linear infinite 20000ms;
}

#home #bg #box-light-ball span:nth-of-type( 3 ) {
    width: 75%;
    padding-top: 75%;
    animation: light-03 linear infinite 20000ms;
    animation-delay: -3000ms;
}

#home #bg #box-light-ball span:nth-of-type( 4 ) {
    width: 80%;
    padding-top: 80%;
    animation: light-04 linear infinite 20000ms;
    animation-delay: -14000ms;
}

#home #bg #box-light-ball span:nth-of-type( 5 ) {
    width: 90%;
    padding-top: 90%;
    animation: light-05 linear infinite 20000ms;
    animation-delay: -12000ms;
}

#home #bg #box-light-ball span:nth-of-type( 6 ) {
    width: 50%;
    padding-top: 50%;
    animation: light-06 linear infinite 20000ms;
    animation-delay: -7000ms;
}

#home #bg #box-light-ball span:nth-of-type( 7 ) {
    width: 30%;
    padding-top: 30%;
    animation: light-07 linear infinite 20000ms;
}

#home #bg #box-light-ball span:nth-of-type( 8 ) {
    width: 10%;
    padding-top: 10%;
    animation: light-08 linear infinite 20000ms;
}

#home #bg #box-light-ball span:nth-of-type( 9 ) {
    width: 15%;
    padding-top: 15%;
    animation: light-09 linear infinite 20000ms;
    animation-delay: -2000ms;
}

#home #bg #box-light-ball span:nth-of-type( 10 ) {
    width: 20%;
    padding-top: 20%;
    animation: light-10 linear infinite 20000ms;
    animation-delay: -16000ms;
}

#home #bg #box-light-ball span:nth-of-type( 11 ) {
    width: 30%;
    padding-top: 30%;
    animation: light-11 linear infinite 20000ms;
    animation-delay: -17000ms;
}

#home #bg #box-light-ball span:nth-of-type( 12 ) {
    width: 40%;
    padding-top: 40%;
    animation: light-12 linear infinite 20000ms;
    animation-delay: -9000ms;
}

#home #bg #box-light-ball span:nth-of-type( 13 ) {
    width: 20%;
    padding-top: 20%;
    animation: light-13 linear infinite 20000ms;
    animation-delay: -10000ms;
}

@keyframes light-01 {
    0%{ top: -30%; left: 5%; opacity: 0.7; }
    50%{ top: 60%; left: 20%; opacity: 0.8; }
    100%{ top: 130%; left: 5%; opacity: 0.7; }
}

@keyframes light-02 {
    0%{ top: -30%; left: 80%; opacity: 0.7; }
    50%{ top: 60%; left: 40%; opacity: 0.8; }
    100%{ top: 130%; left: 90%; opacity: 0.7; }
}

@keyframes light-03 {
    0%{ top: -45%; left: -30%; opacity: 0.7; }
    50%{ top: 60%; left: 4%; opacity: 0.8; }
    100%{ top: 145%; left: -30%; opacity: 0.7; }
}

@keyframes light-04 {
    0%{ top: -50%; left: 30%; opacity: 0.7; }
    50%{ top: 60%; left: 20%; opacity: 0.8; }
    100%{ top: 150%; left: 40%; opacity: 0.7; }
}

@keyframes light-05 {
    0%{ top: -50%; left: -50%; opacity: 0.7; }
    45%{ top: 30%; left: -40%; opacity: 0.8; }
    100%{ top: 150%; left: -70%; opacity: 0.7; }
}

@keyframes light-06 {
    0%{ top: -40%; left: 10%; opacity: 0.7; }
    50%{ top: 50%; left: 30%; opacity: 0.8; }
    100%{ top: 140%; left: 10%; opacity: 0.7; }
}

@keyframes light-07 {
    0%{ top: -20%; left: 25%; opacity: 0.1; }
    45%{ top: 60%; left: 10%; opacity: 0.2; }
    100%{ top: 120%; left: 15%; opacity: 0.1; }
}

@keyframes light-08 {
    0%{ top: -20%; left: 45%; opacity: 0.1; }
    45%{ top: 60%; left: 70%; opacity: 0.2; }
    100%{ top: 120%; left: 45%; opacity: 0.1; }
}

@keyframes light-09 {
    0%{ top: -25%; left: -5%; opacity: 0.1; }
    45%{ top: 65%; left: 10%; opacity: 0.2; }
    100%{ top: 125%; left: -5%; opacity: 0.1; }
}

@keyframes light-10 {
    0%{ top: -25%; left: 10%; opacity: 0.1; }
    45%{ top: 65%; left: 20%; opacity: 0.2; }
    100%{ top: 125%; left: 5%; opacity: 0.1; }
}

@keyframes light-11 {
    0%{ top: -25%; left: 40%; opacity: 0.1; }
    45%{ top: 55%; left: 60%; opacity: 0.2; }
    100%{ top: 125%; left: 45%; opacity: 0.1; }
}

@keyframes light-12 {
    0%{ top: -25%; left: 40%; opacity: 0.1; }
    45%{ top: 50%; left: 60%; opacity: 0.2; }
    100%{ top: 125%; left: 45%; opacity: 0.1; }
}

@keyframes light-13 {
    0%{ top: -25%; left: 30%; opacity: 0.1; }
    50%{ top: 43%; left: 50%; opacity: 0.2; }
    100%{ top: 125%; left: 40%; opacity: 0.1; }
}

.mobile .btn-01:hover img {
    animation: none;
}

.mobile .btn-01 .line::before {
    display: none;
}

.mobile .btn-02:hover {
    background: rgba( 255,255,255,0.5 );
    box-shadow: none;
}

.mobile #main-header #nav-wrapper nav {
    left: 50%;
}

.mobile #main-header #nav-wrapper nav ul li a {
    width: 100%;
}

.mobile #main-header #nav-wrapper nav ul li a span {
    display: none;
}

#movie.mobile .row .box-video-thumb .box-img,
#movie.mobile .row .box-video-thumb a:hover .box-img {
    transition: none;
    transform: none;
}

#photo-gallery.mobile .list-photo li.colomn-three a:hover,
#photo-gallery.mobile .list-photo li.colomn-two a:hover {
    transform: none;
}

#contact.mobile .white-inner {
    background: rgba( 255,255,255,0.25 );
}

#contact.mobile form table input,
#contact.mobile form table textarea {
    transition: none;
}

#contact.mobile form table input:focus,
#contact.mobile form table textarea:focus {
    box-shadow: none;
}

#contact.mobile form .btns input:hover {
    border: solid 1px #bbb;
    background: rgba( 255,255,255,0.2 );
}

/*=============================================================
13. media query
=============================================================*/

@media screen and (min-width: 1700px) {

    #music #releaced .row-songs .righter {
        padding: 3% 0;
    }

    #music #releaced .row-songs.i-see-you {
        margin-bottom: 18%;
    }

    #music #releaced .row-songs.sunrise {
        margin-bottom: 28%;
    }

}

@media screen and (min-width: 1550px) {

    #profile .inner {
        width: 80%;
    }

}


@media screen and (min-width: 700px) {

    #home #bg #box-light-ball span:nth-of-type( 1 ) {
        width: 25%;
        padding-top: 25%;
    }

    #home #bg #box-light-ball span:nth-of-type( 2 ) {
        width: 30%;
        padding-top: 30%;
    }

    #home #bg #box-light-ball span:nth-of-type( 3 ) {
        width: 40%;
        padding-top: 40%;
    }

    #home #bg #box-light-ball span:nth-of-type( 4 ) {
        width: 40%;
        padding-top: 40%;
    }

    #home #bg #box-light-ball span:nth-of-type( 5 ) {
        width: 50%;
        padding-top: 50%;
    }

    #home #bg #box-light-ball span:nth-of-type( 6 ) {
        width: 30%;
        padding-top: 30%;
    }

    #home #bg #box-light-ball span:nth-of-type( 7 ) {
        width: 15%;
        padding-top: 15%;
    }

    #home #bg #box-light-ball span:nth-of-type( 11 ) {
        width: 20%;
        padding-top: 20%;
    }

    #home #bg #box-light-ball span:nth-of-type( 12 ) {
        width: 20%;
        padding-top: 20%;
    }

    #home #bg #box-light-ball span:nth-of-type( 13 ) {
        width: 17%;
        padding-top: 17%;
    }

}



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

    #main-header #nav-wrapper nav ul li a {
        padding: 20px 0;
    }

    #main-header #nav-wrapper nav ul li a img {
        height: 45px;
    }

    #music .tit {
        margin-bottom: 9%;
    }

    #music #releaced .row-songs {
        margin-bottom: 7%;
    }

    #music #releaced .row-songs.i-see-you {
        margin-bottom: 18%;
    }

    #music #releaced .row-songs.sunrise {
        margin-bottom: 32%;
    }

    #music #releaced .row-songs.feel-the-forest {
        margin-bottom: 20%;
    }

}

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

    #main-header #nav-wrapper nav ul li a {
        padding: 17px 0;
    }

    #main-header #nav-wrapper nav ul li a img {
        height: 40px;
    }

}

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

    .inner {
        width: 88%;
    }

    #music .tit {
        margin-bottom: 7%;
    }

    #music #releaced .row-songs {
        margin-bottom: 5%;
    }

    #music #releaced .row-songs.i-see-you {
        margin-bottom: 12%;
    }

    #music #releaced .row-songs.sunrise {
        margin-bottom: 26%;
    }

    #music #releaced .row-songs.feel-the-forest {
        margin-bottom: 16%;
    }

    #beauty-fashion .row .box-text h1.tit-text {
        padding: 7% 0;
        font-size: 60px;
        line-height: 1.4;
    }

    #beauty-fashion .row .box-text p.mb-flex {
        margin-bottom: 0;
    }

}

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

    #main-header #nav-wrapper nav ul li a {
        padding: 16px 0;
    }

    #main-header #nav-wrapper nav ul li a img {
        height: 35px;
    }

    #profile .row .box-text {
        padding: 5% 0;
    }

    #profile .row .box-text p.mb-adjuster {
        margin-bottom: 0;
    }

    #beauty-fashion .sold-out .row .box-img::after,
    #beauty-fashion .few-left .row .box-img::after {
        width: 110px;
        height: 110px;
    }
}

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

	.pc-alt {
		display: none;
    }

    #main-footer p img {
        width: 200px;
    }

    .tit-text {
        font-size: 36px;
    }

    .pages #contents .belt-gold {
        margin-bottom: 30px;
    }

    #music #contents {
        padding-bottom: 0;
    }

    #music .row-qr {
        width: 360px;
    }

    #music #releaced .row-songs.sunrise {
        margin-bottom: 22%;
    }

    #music #ivent .righter .tit-text {
        margin-bottom: 25px;
        font-size: 40px;
        line-height: 1.6;
    }

    #music #ivent .righter .tit-text span.mini {
        font-size: 30px;
    }

    #beauty-fashion .row .box-text .white-base {
        padding: 8%;
    }

    #beauty-fashion .row .box-text h1.tit-text {
        padding: 5% 0;
        font-size: 50px;
        line-height: 1.3;
    }

    #beauty-fashion .row .box-text p {
        margin-bottom: 8px;
        font-size: 16px;
    }

}

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

    #movie .mass {
        margin-bottom: 60px;
    }

    #movie .row .box-video-thumb,
    #movie .row .box-text {
        width: 100%;
        float: none;
    }

    #movie .row .box-video-thumb {
        padding-top: 65%;
        margin-bottom: 30px;
    }

    #movie .row .box-video-thumb .icon-play {
        width: 10%;
    }

    #movie .row .box-text {
        padding-left: 0;
    }

    #movie .tit-text {
        margin-bottom: 10px;
    }

}

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

	.pc {
		display: none;
    }

	.sp {
		display: inline-block;
    }

    .inner {
        width: 86%;
    }

    .btn-01 img {
        height: 17px;
    }

    .btn-01 .line {
        width: calc( 100% - 105px );
        top: 63%;
    }

    #visual #text-vertical {
        width: 13%;
    }

    #visual #text-vertical p {
        width: 15px;
        left: 57%;
    }

    #visual #visual-contents-wrapper .line-v > img {
        width: 1px;
    }

    .loaded #visual #visual-contents-wrapper #line-v-01 > img {
        height: 92%;
    }

    #visual #icon-scroll {
        left: 11%;
    }

    .row-divi .box-slide,
    .row-divi .box-text {
        width: 100%;
    }

    .row-divi .box-slide {
        width: 92%;
        padding-top: 85%;
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .row-divi .box-text {
        padding: 22% 0 0 0;
        margin-left: 0;
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .row-divi .box-text .inner-alt {
        width: 87%;
        margin: 0 auto;
    }

    .row-divi .box-text h1 {
        margin-bottom: 30px;
        left: 0;
    }

    .row-divi .box-text h1 img {
        height: 50px;
    }

    .row-divi .box-slide-mini {
        width: 77%;
        padding-top: 26%;
        margin-bottom: 0;
        position: absolute;
        top: 31%;
        top: -11%;
        left: auto;
        right: 0;
        z-index: 1;
    }

    #home #visual #visual-contents-wrapper,
    #profile #visual #visual-contents-wrapper,
    #music #visual #visual-contents-wrapper,
    #movie #visual #visual-contents-wrapper,
    #beauty-fashion #visual #visual-contents-wrapper,
    #photo-gallery #visual #visual-contents-wrapper,
    #contact #visual #visual-contents-wrapper {
        width: 80%;
        padding-right: 7%;
        left: 13%;
    }

    .pages #visual {
        margin-bottom: 0;
    }

    .pages #visual #visual-contents-wrapper #visual-tit {
        top: 0;
    }

    .pages #visual #text-vertical p {
        top: 49.5%;
    }

    .pages #visual #visual-contents-wrapper #line-v-01 > img {
        top: 116px;
    }

    .pages.loaded #visual #visual-contents-wrapper #line-v-01 > img {
        height: calc( 95% - 116px );
    }

    .pages .tit img {
        height: 45px;
    }

    #main-header > h1 {
        width: 230px;
        top: 30px;
        left: 30px;
        right: auto;
    }

    #main-header #icon-nav {
        width: 110px;
        height: 110px;
    }

    #main-header #nav-wrapper {
        background-image: url( /common/img/shared/sp-nav-bg.jpg );
    }

    #home #part-01 {
        padding-top: 70px;
    }

    #home #visual #person {
        display: none;
    }

    #home #visual {
        background-image: url( /common/img/home/sp-visual.png?v1 );
        background-position: top center;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
    }

    #home #bg,
    #home.mobile #bg {
        width: 100%;
        height: 100%;
        background-image: url( /common/img/home/sp-bg.jpg?v1 );
        background-position: center center;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
    }

    #home #part-01 .row-divi .box-text aside.icon-sns {
        margin-bottom: 2px;
    }

    #profile #bg {
        background-image: url(/common/img/profile/sp-bg.jpg);
    }

    #profile .row .box-img,
    #profile .row .box-text {
        width: 100%;
        margin-bottom: 35px;
    }

    #profile .row:nth-of-type( 1 ) .box-img {
        margin-bottom: 28px;
    }

    #profile .row .box-img {
        padding-top: 140%;
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
    }

    #profile .row:last-of-type .box-text {
        margin-bottom: 0;
    }

    #profile .row .box-text,
    #profile .row.img-left .box-text {
        padding: 0;
        margin-left: 0;
    }

    #profile .row .box-text .tit-text {
        margin-bottom: 2px;
    }

    #profile .row .box-text p {
        margin-bottom: 20px;
    }

    #profile .row .box-text .row-sns {
        margin-bottom: 24px;
    }

    #music .tit {
        margin-bottom: 50px;
    }

    #music #visual #visual-contents-wrapper {
        width: 75%;
        padding-right: 12%;
    }

    #music #releaced .row-songs {
        padding-bottom: 13%;
        border-bottom: solid 1px rgba( 0,0,0,0.2 );
        margin-bottom: 13%;
    }

    #music #releaced .row-songs.i-see-you,
    #music #releaced .row-songs.sunrise,
    #music #releaced .row-songs.feel-the-forest {
        margin-bottom: 14%;
    }

    #music #releaced .tit-text {
        margin-bottom: 14px;
        font-size: 34px;
        letter-spacing: 3px;
        line-height: 1.6;
    }

    #music #releaced .row-songs .lefter,
    #music #releaced .row-songs .righter {
        width: 100%;
    }

    #music #releaced .row-songs .lefter {
        margin-bottom: 25px;
        position: relative;
    }

    #music #releaced .row-songs .righter {
        margin: 0;
    }

    #music #releaced .row-songs .lefter .box-jacket {
        width: 105%;
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
        transform: none;
    }

    #music #bg {
        background-image: url(/common/img/music/sp-bg.jpg);
    }

    #music #ivent .lefter {
        margin-bottom: 40px;
        top: 0;
    }

    #music #releaced .row-songs .lefter .box-jacket {
        overflow: hidden;
    }

    #music #releaced .row-songs .lefter .box-jacket .jacket {
        box-shadow: none;
    }

    #music #ivent .row-ivent {
        padding-bottom: 12%;
        border-bottom: solid 1px rgba( 0,0,0,0.2 );
        margin-bottom: 15%;
    }

    #music #ivent .lefter,
    #music #ivent .righter {
        width: 100%;
    }

    #music #ivent .righter {
        padding: 0;
    }

    #music #ivent .righter::before {
        display: none;
    }

    #music #ivent .righter .tit-text {
        margin-bottom: 20px;
        font-size: 37px;
    }

    #music #ivent .righter .tit-text span.mini {
        font-size: 25px;
    }

    #music #ivent .righter p:last-of-type {
        margin-bottom: 0;
    }

    #movie #visual #visual-contents-wrapper {
        width: 75%;
        padding-right: 12%;
    }

    #beauty-fashion #bg {
        background-image: url(/common/img/beauty-fashion/sp-bg.jpg?v1);
    }

    #beauty-fashion .row {
        margin-bottom: 90px;
    }

    #beauty-fashion .mass:last-of-type .row {
        margin-bottom: 0;
    }

    #beauty-fashion .row .box-img,
    #beauty-fashion .row .box-text {
        width: 100%;
        float: none;
    }

    #beauty-fashion .row .box-img {
        padding-top: 100%;
        margin-bottom: 10px;
    }

    #beauty-fashion .row .box-text h1.tit-text {
        margin-bottom: 10px;
        font-size: 42px;
        letter-spacing: 4px;
        left: 0;
    }

    #beauty-fashion .row .box-text .white-base {
        width: 100%;
        margin-left: 0;
    }

    #photo-gallery #bg {
        background-image: url(/common/img/photo-gallery/sp-bg.jpg?v1);
    }

    #contact #bg {
        background-image: url(/common/img/contact/sp-bg.jpg?v2);
    }

    #contact .tit-text {
        margin-bottom: 10px;
        font-size: 29px;
        letter-spacing: 2px;
    }

    #contact .row {
        padding: 7%;
    }

    #contact .lefter,
    #contact .righter {
        width: 100%;
        padding: 0;
        float: none;
    }

    #contact .lefter {
        margin-bottom: 25px;
    }

    #contact table th {
        font-size: 20px;
    }

    #contact .righter textarea {
        height: 300px;
    }

    #contact form .btns input {
        width: 42%;
        font-size: 16px;
    }

    #thanks #bg {
        background-image: url(/common/img/thanks/sp-bg.jpg);
    }

}

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

    #main-header #nav-wrapper nav ul li a img {
        height: 30px;
    }

    #profile .row .box-text .row-sns p {
        font-size: 14px;
        letter-spacing: 2px;
    }

    #profile .row .box-text .row-sns p::after {
        width: 30px;
        top: -4px;
    }

    #profile aside.icon-sns ul li a img {
        height: 30px;
    }

    #music .row-qr {
        width: 100%;
    }

    #music .row-qr p {
        padding-top: 22px;
        font-size: 16px;
    }

    #photo-gallery .inner {
        width: 95%;
    }

    #photo-gallery .list-photo {
        padding-bottom: 30px;
    }

    #photo-gallery .list-photo li.colomn-three {
        padding: 0 2%;
    }

    #photo-gallery .list-photo li.colomn-three.top-plus {
        margin: 80px 0 40px;
    }

    #photo-gallery .list-photo li.colomn-three.top-minus {
        top: -80px;
    }

    #photo-gallery .list-photo li.colomn-two.lefter,
    #photo-gallery .list-photo li.colomn-two.righter {
        width: 51%;
    }

    #photo-gallery .list-photo li.colomn-two.lefter {
        left: -3%;
    }

    #photo-gallery .list-photo li.colomn-two.righter {
        right: -3%;
    }

    #contact form table input {
        padding: 15px;
    }

    #contact form textarea {
        padding: 17px 15px;
    }

}

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

    #main-header #nav-wrapper nav ul li a img {
        height: 25px;
    }

    #main-footer p {
        padding: 54px 0 60px;
    }

    #main-footer p img {
        width: 190px;
    }

    #music #releaced .row-songs {
        padding-bottom: 16%;
        margin-bottom: 16%;
    }

    #music #releaced .row-songs.i-see-you,
    #music #releaced .row-songs.sunrise,
    #music #releaced .row-songs.feel-the-forest {
        margin-bottom: 16%;
    }

    #music #releaced .row-songs.sunrise {
        padding-bottom: 13%;
    }

    #movie .mass {
        margin-bottom: 40px;

    }

    #movie .row .box-video-thumb {
        padding-top: 100%;
    }

    #movie .row .box-video-thumb .icon-play {
        width: 18%;
    }

    #movie .row .box-video-thumb p.time {
        padding: 8px 10px;
        bottom: 7px;
        right: 7px;
        font-size: 12px;
    }

    #movie .tit-text {
        font-size: 27px;
    }

    #beauty-fashion .row .box-text .white-base {
        padding: 9% 8% 10% 8%;
    }

    #beauty-fashion .row .box-text p:last-of-type {
        margin-bottom: 0;
    }

    #beauty-fashion .row .box-text .white-base .btn-01 {
        padding: 5px 0 10px;
    }

    #thanks #part-01 h1 img,
    #thanks #part-01 .row {
        transform: translateY( 40px );
    }

}

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

    #main-header #nav-wrapper nav ul li a img {
        height: 21px;
    }

    #home #visual {
        background-image: url( /common/img/home/sp-visual-long.png );
        background-position: center center;
    }

    #profile .row .box-text p {
        font-size: 17px;
    }

    #music #ivent .righter .tit-text {
        font-size: 32px;
        letter-spacing: 2px;
    }

    #contact .row {
        padding-bottom: 30px;
    }

    #contact form .btns {
        padding: 26px 0;
    }

    #thanks #part-01 {
        width: 67%;
    }

}

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

    #music .qr {
        width: 76px;
    }

    #music .row-qr p {
        width: calc( 100% - 76px );
        padding-top: 12px;
        font-size: 15px;
        letter-spacing: 0;
    }

    #music #releaced .tit-text {
        font-size: 30px;
    }

    #contact table th {
        font-size: 17px;
    }

    #contact table th span {
        font-size: 10px;
    }

    #contact table td > div {
        font-size: 13px;
    }

}

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

    #main-header #nav-wrapper nav ul li a img {
        height: 17px;
    }

}

/*=============================================================
14. helper
=============================================================*/

.clr {
	clear: both;
}

/*
* clear fix
*/

.cf:before,
.cf:after {
	content:"";
	display: block;
	height: 0;
	overflow: hidden;
}

.cf:after {
	clear: both;
}