@charset "utf-8";


/* ---------------------------------------
	min-width: 1500px
--------------------------------------- */

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

body {
	font-size: 106.25%; /* 17px base */
}

.c-header-logo > a {
	width: 100%;
}

.c-header-nav > li {
	margin-left: 5%;
}



}


/* ---------------------------------------
	max-width: 1280px
--------------------------------------- */

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

/* top-hero
--------------------------- */

.top-hero {
	max-height: 850px;
}

}

/* ---------------------------------------
	max-width: 1080px
--------------------------------------- */

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

/* top-hero
--------------------------- */

.top-hero {
	max-height: 700px;
}

}



/* ---------------------------------------
	max-width: 700px
--------------------------------------- */

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


/* =============================================================

	Base

* ============================================================= */

body {
	line-height: 1.8;
	min-width: 320px;
}

.c-wrapper {
	min-width: 320px;
	padding-top: 0;
	overflow: hidden;
}

body.spnav-open > .c-wrapper {
	position: fixed;
}

.c-body {
	border: 10px solid #fff !important;
	padding-top: 0px;
}
.c-body.top {
	padding-top: 0;
	margin-top: 65px;
}


/* =============================================================

	Layouts

* ============================================================= */


/* c-container
--------------------------- */

.c-container,
.c-container.wide,
.c-container.narrow {
	margin: 50px auto;
	padding-left: 7%;
	padding-right: 7%;
}

.c-container.inner-space {
	margin: 0 auto;
	padding-top: 50px;
	padding-bottom: 50px;
}


/* grid
--------------------------- */

.c-grids {
	margin-left: 0;
	margin-right: 0;
}

.c-grids > * {
	float: none;
	padding-left: 0;
	padding-right: 0;
	width: auto;
}
.c-grids.inline > * {
	display: block;
}

.c-sp-grids {
	margin-left: -2%;
	margin-right: -2%;
}

.c-sp-grids > * {
	width: 50%;
	float: left;
	padding-left: 2%;
	padding-right: 2%;
}

.c-sp-grids.inline > * {
	float: none;
	display: inline-block;
	vertical-align: top;
}
.c-sp-grids.inline.medium > * {
	vertical-align: middle;
}


/* =============================================================

	Typography

* ============================================================= */

.c-sp-tal-left { text-align: left !important; }
.c-sp-tal-center { text-align: center !important; }


/* c-title-A
--------------------------- */

.c-title-A {
	font-size: 24px; /* 31px */
	margin-bottom: 25px;
	text-align: left;
}

.c-title-A.small {
	font-size: 1.625em; /* 26px */
}

.c-title-A.xsmall {
	font-size: 1.3125em; /* 21px */
}

.c-title-A.c-zigzag {
	margin-bottom: 70px;
}


/* c-title-B
--------------------------- */

.c-title-B,
.c-title-B.large {
	font-size: 0.875em; /* 14px */
	padding: 13px 10px 11px;
	margin-left: -2%;
	margin-right: -2%;
}


/* c-subtitle-A
--------------------------- */

.c-title-A + .c-subtitle-A {
	margin-top: -15px;
	margin-bottom: 35px;
}


/* c-lead-A
--------------------------- */

.c-lead-A {
	line-height: 2;
	text-align: justify; /* for ff, webkit */
	text-justify: inter-ideograph; /* for IE */
}

.c-lead-A > br {
	display: none;
}



/* =============================================================

	Forms

* ============================================================= */

/* c-submit
--------------------------- */

.c-submit > input {
	line-height: 51px;
	min-width: 240px;
}


/* =============================================================

	Common

* ============================================================= */

.mt-0 { margin-top: 0 !important; }
.mt-10 { margin-top: 8px !important; }
.mt-20 { margin-top: 16px !important; }
.mt-30 { margin-top: 24px !important; }
.mt-40 { margin-top: 32px !important; }
.mt-50 { margin-top: 40px !important; }
.mt-60 { margin-top: 48px !important; }
.mt-70 { margin-top: 56px !important; }
.mt-80 { margin-top: 64px !important; }
.mt-90 { margin-top: 72px !important; }
.mt-100 { margin-top: 80px !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-10 { margin-bottom: 8px !important; }
.mb-20 { margin-bottom: 16px !important; }
.mb-30 { margin-bottom: 24px !important; }
.mb-40 { margin-bottom: 32px !important; }
.mb-50 { margin-bottom: 40px !important; }
.mb-60 { margin-bottom: 48px !important; }
.mb-70 { margin-bottom: 56px !important; }
.mb-80 { margin-bottom: 64px !important; }
.mb-90 { margin-bottom: 72px !important; }
.mb-100 { margin-bottom: 80px !important; }

.pt-0 { padding-top: 0 !important; }
.pt-10 { padding-top: 8px !important; }
.pt-20 { padding-top: 16px !important; }
.pt-30 { padding-top: 24px !important; }
.pt-40 { padding-top: 32px !important; }
.pt-50 { padding-top: 40px !important; }
.pt-60 { padding-top: 48px !important; }
.pt-70 { padding-top: 56px !important; }
.pt-80 { padding-top: 64px !important; }
.pt-90 { padding-top: 72px !important; }
.pt-100 { padding-top: 80px !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-10 { padding-bottom: 8px !important; }
.pb-20 { padding-bottom: 16px !important; }
.pb-30 { padding-bottom: 24px !important; }
.pb-40 { padding-bottom: 32px !important; }
.pb-50 { padding-bottom: 40px !important; }
.pb-60 { padding-bottom: 48px !important; }
.pb-70 { padding-bottom: 56px !important; }
.pb-80 { padding-bottom: 64px !important; }
.pb-90 { padding-bottom: 72px !important; }
.pb-100 { padding-bottom: 80px !important; }


/* c-island
--------------------------- */

.c-island,
.c-island.small,
.c-island.narrow {
	padding: 30px 10%;
	margin: 0 -2%;
}


/* c-badge
--------------------------- */

.c-badge,
.c-badge.small {
	font-size: 0.6875em !important; /* 11px */
	line-height: 1.4 !important;
	width: 66px;
	height: 66px;
}

.c-badge.absolute,
.c-badge.small.absolute {
	top: -33px;
	margin-left: -33px;
}

.c-badge.double > span {
	margin-top: -1.3em;
}


/* c-card
--------------------------- */

.c-card-list {
	margin-bottom: -25px;
}

.c-card {
	padding-bottom: 20px;
	margin-bottom: 25px;
}

.c-card.badge {
	margin-top: 33px;
}

.c-card > *,
.c-card > div > * {
	margin: 5px 5% 0;
}
.c-card > div {
	margin: 0;
}

.c-card > figure {
	margin-bottom: 20px;
}


/* c-aside-nav
--------------------------- */

.c-aside-nav.c-container {
	padding-top: 60px;
	padding-bottom: 50px;
}

.c-aside-nav > .c-title-A {
	margin-bottom: 30px;
}

.c-aside-nav > h2:after {
	top: -35px;
}


/* c-article
--------------------------- */

.c-article > header {
	margin-bottom: 20px;
}

.c-article > figure {
	margin: 0 -2% 25px;
}


/* c-contactbox
--------------------------- */

.c-contactbox {
	padding: 50px 7% 30px;
}

.c-contactbox > .phone {
	letter-spacing: 1px;
}


/* c-pulldown

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

.c-pulldown .c-button {
	color: #515759;
	font-weight: 600;
	background-color: #dad8c8;
	box-shadow: inset 0 0 0 #C8C5AF;
}
.c-pulldown .c-button:hover {
	box-shadow: inset 260px 0 0 #C8C5AF;
	background-color: #C8C5AF;
}
.c-pulldown:hover .c-button {
	background-color: #C8C5AF;
}

.c-pulldown .c-button:before,
.c-pulldown .c-button:after {
	background-position: -350px -200px;
}

.c-pulldown-item:after {
	background-position: -350px -200px;
}


/* =============================================================

	c-header

* ============================================================= */

.c-header {
	min-width: 0;
	height: auto;
	position: absolute;
	top: 0;
	padding-bottom: 0;
}


/* c-header-logo
--------------------------- */

.c-header-logo {
	float: left;
	width: 160px !important;
	height: 80px !important;
	position: absolute;
}

.c-header-logo > a > span {
	width: 74px !important;
	height: 53px !important;
	background-position: -350px -300px;
	margin-left: -37px;
	top: 13px;
	transition: none;
}

.c-header-logo > a > span:after {
	content: none;
}


/* c-header-spnav
--------------------------- */

.c-header-spnav {
	width: 0;
	height: 100%;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 500;
}
body.spnav-open .c-header-spnav {
	width: 280px;
}

.c-header-spnav-drawer {
	height: 100%;
	width: 280px;
	max-width: 350px;
	background: #fff;
	overflow-y: auto;
	position: absolute;
	right: 0;
	z-index: 2;
	transform: translate(100%, 0);
	transition: transform .4s;
	-webkit-overflow-scrolling: touch;
}

body.spnav-open .c-header-spnav-drawer {
	transform: translate(0, 0);
}



/* =============================================================

	c-footer

* ============================================================= */

.c-footer {
	padding: 40px 5% 30px;
}

/* c-footer-info
--------------------------- */

.c-footer-info {
	margin: 0 0 30px;
	padding: 0 0 30px;
}

/* c-footer-name
--------------------------- */

.c-footer-name {
	text-align: center;
	margin-bottom: 20px;
}

.c-footer-name > a > span {
	display: block;
	margin: 0;
}


/* c-footer-address
--------------------------- */

.c-footer-address {
	margin-right: 0;
	padding-right: 0;
	float: none;
}

.c-footer-address dt {
	text-align: center;
	margin-bottom: 0;
}

.c-footer-address dd {
	text-align: center;
	margin-bottom: 20px;
}

.c-footer-address dd > span {
	display: inline-block;
}


/* c-footer-contact
--------------------------- */

.c-footer-contact {
	width: auto;
	float: none;
	margin-top: 10px;
	padding-top: 30px;
	border-top: 1px solid rgba(255,255,255,0.2);
}


/* c-footer-nav
--------------------------- */

.c-footer-nav {
	margin-bottom: 0;
	padding: 0 5%;
}

.c-footer-nav-item {
	margin: 0;
}

.c-footer-nav-item > li {
	width: 50%;
	float: left;
}

.c-footer-nav-item > li > a {
	font-size: 0.75em; /* 12px */
	letter-spacing: 1px;
	display: inline-block;
	padding: 5px;
	margin-bottom: 3px;
}


/* c-footer-fb
--------------------------- */

.c-footer-fb {
	position: static;
	margin: 20px auto;
}


/* c-footer-copy
--------------------------- */

.c-footer-copy {
	text-align: center;
	font-size: 10px;
}





.comment_area h2 {
	font-weight: bold;
	padding-bottom: 30px;
	margin-bottom: 30px;
	border-bottom: 1px dotted #ccc;
	margin-top: 5px;
}


.comment_area {
	line-height: 1.5;
}


.member-article {
	width: 100%;
	margin: 0 auto;
}


.member-article dl {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px dotted #ccc;
}

.member-article dl.second {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #ccc;
}


.member-article dt {
	float: none;
	width: 100%;
	margin-bottom: 10px;
}

.member-article dt img {
	width: 100%;
}

.member-article dd {
	min-height: 175px;
}



.member-article dd h3{
	font-weight: bold;
	line-height: 1.3em;
	font-size: 14px;
}


.member-article dd h3 span{
	font-weight: normal;
	font-size: 11px;
}
.member-article dd p{
	font-size: 11px;
	font-weight: normal;
	line-height: 1.6em;
	margin-top: 6px;
}
.member-article .lead {
	font-weight: bold;
	font-size: 122%;
	letter-spacing: 0.3px;

}

.member-article > * + *  {
	margin-top: 1.5em;
}
.member-article > h2 + *  {
	margin-top: 0;
}
.member-article > h2 {
	margin: 2.5em 0 .3em;
}

.member-article > * > a {
	text-decoration: underline;
}

.member-article > h2 {
	font-weight: bold;
}


.comment_area p{
	font-size: 11px;
	font-weight: normal;
	line-height: 1.6em;
	margin-top: 6px;
}

.comment_area h2{
	font-size: 13px;
	font-weight: bold;
	line-height: 1.6em;
	margin-top: 6px;
}
.song_article {
	width: 100%;
	margin: 0 auto 50px ;
	border-bottom: 1px dotted #ccc;
	padding-bottom: 50px;
}


.song_lyrics {
	width: 100%;
	margin: 0 auto ;
}



.reference-article {
	width: 100%;
	margin: 0 auto;
}


.reference_article dl {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px dotted #ccc;
}



.reference_article dt {
	float: none;
	width: 100%;
	margin-bottom: 10px;
}

.reference_article dt img {
	width: 100%;
}

.reference_article h3{
	font-weight: bold;
	line-height: 1.3em;
	font-size: 112%;
	margin-bottom: 10px;
}


/* =============================================================

	privacy

* ============================================================= */

/* top-article
--------------------------- */

.top-article > * + *  {
	margin-top: 20px;
}

.top-article > h2 {
	margin-top: 30px;
}



.top-article {
	width: 100%;
	margin: 0 auto;
	line-height: 1.6em;
}


.top-article .lead {
	font-weight: normal;
	line-height: 18px;
	font-size: 11px;
	letter-spacing: 1.1px;


}

.top-article > * + *  {
	margin-top: 1.5em;
}
.top-article > h2 + *  {
	margin-top: 0;
}
.top-article > h2 {
	margin: 2.5em 0 .3em;
}

.top-article > * > a {
	text-decoration: underline;
}

.top-article > h2 {
	font-weight: bold;
}

}






/* ---------------------------------------
	max-width: 480px
--------------------------------------- */

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


/* c-grids
--------------------------- */
.c-sp-grids {
	margin-left: 0;
	margin-right: 0;
}

.c-sp-grids > * {
	float: none;
	padding-left: 0;
	padding-right: 0;
	width: auto;
}
.c-sp-grids.inline > * {
	display: block;
}


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

.contact-header > .c-grids {
	padding-bottom: 120px;
}




/* works-list
--------------------------- */

.works-list-item.clear {
	height: 8em !important;
}

.works-list-item.clear > .txt > .title,
.works-list-item.clear > .txt > .subtitle {
	line-height: 1.5;
}



}


/* ---------------------------------------
	max-width: 400px
--------------------------------------- */

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

/* about-studio
--------------------------- */

.about-studio > h1 {
	width: 233px;
	height: 67px;
}

.about-studio > h1 > span {
	height: 67px;
	background-position: -100px -200px;
}

body.load-end .about-studio > h1 > span {
	width: 233px;
	transition: width .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) .8s;
}


}


/* ---------------------------------------
	max-width: 380px
--------------------------------------- */

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

body {
	font-size: 10px; /* 15px base */
}


/* c-title-A
--------------------------- */

.c-title-A {
	font-size:18px; /* 32px */

}



/* c-title-B
--------------------------- */

.c-title-B > b,
.c-title-B[data-entitle]:before {
	font-size: 2.3em; /* 46px */
}



.profile {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	background: #fff;
	width: 100%;
	margin: 0 auto;
	margin-bottom: 30px;
}

.cont {
	padding: 20px;
}
.c-title-Ab {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 1.8em; /* 35px */
	line-height: 1.5;
	text-align:left;
	margin-bottom: 20px;
}
.c-title-Ab.small {
	font-size: 1.5em; /* 28px */
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px dotted #ccc;
}
.c-title-Ab.xsmall {
	font-size: 1.3em; /* 21px */
}


.c-title-A.c-zigzag {
	margin-bottom: 100px;
}

.c-container {
	padding-left: 15px;
	padding-right: 15px;
	margin: 7% auto;
	position: relative;
}

.lead {
	font-size: 10px;
}


}