/*
Theme Name: Mamiko Hirai Theme
Theme URI: http://www.hirai-mamiko.com/
Author: Brueno Design
Author URI: http://brueno.jp/
Description: This is "Mamiko Hirai" theme.
*/

/*
	 1: reset
	 2: common
	 3: header
	 4: footer
	 5: main
*/



/* --------------------------------------------------------------
    1: reset
-------------------------------------------------------------- */
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

article, aside, details, figcaption, figure, footer, header, hgroup,
main, menu, nav, section, summary {
    display: block
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden], template {
    display: none
}

a {
    background-color: transparent
}

a:active, a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b, strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

svg:not(:root) {
    overflow: hidden
}

hr {
    box-sizing: content-box
}

pre {
    overflow: auto
}

code, kbd, pre, samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button, select {
    text-transform: none
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled], html input[disabled] {
    cursor: default
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
    height: auto
}

input[type="search"] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid silver
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: 700
}

html {
    overflow-y: scroll
}

html, body, div, span {
    border: 0
}

html, body, div, span, object {
    margin: 0;
    padding: 0;
    outline: 0
}

iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite,
code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b,
i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer,
header, hgroup, menu, nav, section, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: 400
}

ul li {
    list-style: none
}

object, embed {
    border: 0;
    vertical-align: bottom;
    outline: none
}

blockquote, q {
    quotes: none
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none
}

a {
    margin: 0;
    padding: 0;
    border: 0;
    background: 0 0;
    outline: 0
}

a img {
    border: none;
    text-decoration: none;
    outline: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

caption, th {
    text-align: left
}

sup {
    vertical-align: text-top
}

sub {
    vertical-align: text-bottom
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0
}

input, select {
    vertical-align: middle
}

label {
    cursor: pointer
}

img {
    border: none;
    vertical-align: bottom
}



/* --------------------------------------------------------------
    2: common
-------------------------------------------------------------- */

@font-face {
    font-family: 'brueno_abc';
	src: url('common/font/devanagari.eot?') format('eot'),
	url('common/font/devanagari.woff') format('woff'),
	url('common/font/devanagari.otf') format('opentype');
}

html, body  {
	width: 100%;
	height: 100%;
}

body {
    /* font-family: 'brueno_abc',georgia,'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','Hiragino Mincho ProN',arial,MeiryoKe_PGothic,"メイリオ",Meiryo, serif; */
	font-family: 'brueno_abc', "AdobeGaramondW01-Regula", "GaramondPremrPro", "リュウミン R-KL", "Ryumin Regular KL", "RyuminPro-Regular", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-size: 14px;
	letter-spacing: 0.05em;
	line-height: 1.9;
	color: #000;
	background: #f2f2f2;
}

input, textarea, select {
    font-family: 'brueno_abc', "AdobeGaramondW01-Regula", "GaramondPremrPro", "リュウミン R-KL", "Ryumin Regular KL", "RyuminPro-Regular", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

* html body, * html input, * html textarea {
    font-family: 'brueno_abc', "AdobeGaramondW01-Regula", "GaramondPremrPro", "リュウミン R-KL", "Ryumin Regular KL", "RyuminPro-Regular", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

p a,
.textSpec a {
	position: relative;
	display: inline-block;
    -webkit-tap-highlight-color: rgba(189, 185, 185, .2);
    -webkit-transition: color .4s;
    transition: color .4s;
}

main p a::after,
.textSpec a::after {
	position: absolute;
	bottom: 4px;
	left: 50%;
	content: '';
	width: 0;
	height: 1px;
	background-color: #ccc;
	transition: .4s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.textSpec a::after {
	bottom: 1px;
}

main p a:hover::after,
.textSpec a:hover::after {
	width: 100%;
	/*background-color: #68abce;*/
	background-color: #000;
}


a:link {
    color: #989898;
    text-decoration: none;
}
a:visited {
    color: #989898;
}
a:hover {
    color: #000;
    text-decoration: none;
}
a:active {
    color: #000;
}


.linkSpec a:link {
    color: #000;
    text-decoration: none;
}
.linkSpec a:visited {
    color: #000;
}
.linkSpec a:hover {
    color: #000;
    text-decoration: none;
}
.linkSpec a:active {
    color:#000;
}


.linkMenu a:link {
    color: #000;
    text-decoration: none;
}
.linkMenu a:visited {
    color: #000;
}
.linkMenu a:hover {
    color: #989898;
    text-decoration: none;
}
.linkMenu a:active {
    color:#989898;
}


a.boxLink {
	display: block;
	height: 100%;
}
a.boxLink::after {
	position: absolute;
	bottom: -15px;
	left: 50%;
	content: '';
	width: 0;
	height: 1px;
	background-color: #ccc;
	transition: .4s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
a.boxLink:hover::after {
	width: 100%;
	/*background-color: #68abce;*/
	background-color: #000;
}
a.boxLink:link {
    color: #000;
    text-decoration: none;
	transition: 0.2s linear;
}
a.boxLink:visited {
    color: #000;
}
a.boxLink:hover {
    /*color: #6c6c6c;*/
	color: #000;
    text-decoration: none;
}
a.boxLink:active {
    color: #000;
}


::-moz-selection {
    background: rgba(200, 200, 200, .4);
}
::selection {
    background: rgba(200, 200, 200, .4);
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased
}


.textSpec {
	font-size: 11.4px;
	letter-spacing: 0.07em;
	line-height: 1.8;
}
.textSubtitle {
	font-size: 12px;
	letter-spacing: 0.15em;
	text-align: center;
}


/* ---- clearFix ---- */
.clearFix:before,
.clearFix:after{
	content:"";
	display: table;
}
.clearFix:after{
	clear:both;
}
.clearFix{
	*zoom:1; /*IE6,7対策（haslayout対策）*/
}



/* ---- pointer-events ---- */
.eventNone {
	pointer-events: none;
}


#container {
	visibility: hidden;
}





/* --------------------------------------------------------------
    3: header
-------------------------------------------------------------- */
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0 5%;
	z-index: 100;
	background: #f2f2f2;
	transition: 0.7s cubic-bezier(0.6, 0.1, 0.3, 1);
}
#mainMenu {
	display: block;
	position: relative;
	width: 100%;
	max-width: 1400px;
	height: 60px;
	margin: 0 auto;
	border-bottom: none;
	background: #f2f2f2;
	
}
#mainMenu h1 a {
	display: block;
	width: 182px;
	height: 47px;
	height: 30px;
	position: absolute;
	top: 7px;
	top: 16px;
	left: 50%;
	margin-left: -91px;
	text-indent: -9999px;
	background: url(common/img/header_h1.svg) left top no-repeat;
	background-size: contain;
	transition: 0.7s cubic-bezier(0.6, 0.1, 0.3, 1);
}
.top #mainMenu h1 a {
	margin-top: -50px;
	filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
}
.top #mainMenu h1 a.active {
	margin-top: 0;
	filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}
#mainMenu h1 a.off,
#mainMenu h1 a.active.off {
	margin-top: -50px;
	filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
}
#menuFlag {
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 14px;
	left: -3px;
	text-indent: -9999px;
	cursor: pointer;
}
#menuFlag span {
	position: absolute;
	left: 3px;
	width: 24px;
	height: 1px;
	background-color: #000;
	transition: all .3s;
}
#menuFlag span:first-child {
	bottom: 9px;
}
#menuFlag span:last-child {
	top: 10px;
}
#menuFlag.active span:first-child {
	webkit-transform: translateY(-5px) rotate(45deg);
	transform: translateY(-5px) rotate(45deg);
}
#menuFlag.active span:last-child {
	webkit-transform: translateY(5px) rotate(-45deg);
	transform: translateY(5px) rotate(-45deg);
}

#mainMenu #fb a {
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 14px;
	right: 30px;
	text-indent: -9999px;
	background: url(common/img/header_icon_fb.svg) left top no-repeat;
	background-size: contain;
}
#mainMenu #insta a {
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 13px;
	right: 0px;
	text-indent: -9999px;
	background: url(common/img/header_icon_insta.svg) left top no-repeat;
	background-size: contain;
}

#gMenu {
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	/* font-size: 4vmin; */
	/* letter-spacing: 0.05em; */
	background: #f2f2f2;
}
#gMenu li a{
	display: block;
	width: 60vmin;
	margin: 5px auto;
}
#gMenu li a img {
	width: 100%;
}


#gMenu li.sns {
	position: absolute;
	bottom: 10px;
	left: 50%;
	display: flex;
	-webkit-justify-content: center; /* Safari */
	justify-content: center;
	width: 120px;
	margin-left: -60px;
}
#gMenu li.sns a {
	display: block;
	width: 30px;
	height: 30px;
	text-indent: -9999px;
}
#gMenu li.sns a.fb {
	background: url(common/img/header_icon_fb.svg) left top no-repeat;
	-moz-background-size: contain;
	background-size: contain;
}
#gMenu li.sns a.insta {
	background: url(common/img/header_icon_insta.svg) left top no-repeat;
	-moz-background-size: contain;
	background-size: contain;
}
#gMenu li.sns a.twitter {
	background: url(common/img/header_icon_twitter.svg) left top no-repeat;
	-moz-background-size: contain;
	background-size: contain;
}

body.top header h1 a {
	display: none;
}

/* ↓↓↓ 1440px以上 ↓↓↓ */
@media only screen and (min-width: 1440px) {
	#gMenu {
		font-size: 3vw;
	}
	#gMenu li a {
		width: 50vmin;
		/* margin: 15px auto; */
	}
}
/* ↓↓↓ 740px以下 ↓↓↓ */
@media only screen and (max-width: 740px) {
	#mainMenu {
		height: 50px;
	}
	#mainMenu h1 a {
		top: 10px;
	}
	#mainMenu #menuFlag a {
		top: 10px;
	}
	#mainMenu #fb a {
		top: 10px;
	}
	#mainMenu #insta a {
		top: 10px;
	}
	#gMenu {
		font-size: 4vw;
	}
	#menuFlag {
		top: 10px;
	}
}
/* ↓↓↓ 400px以下 ↓↓↓ */
@media only screen and (max-width: 400px) {
	#mainMenu h1 a {
		top: 14px;
		width: 142px;
		height: 23px;
		margin-left: -71px;
		background: url(common/img/header_h1_s.svg) left top no-repeat;
		background-size: contain;
	}
	#mainMenu #menuFlag a {
		top: 15px;
		width: 20px;
		height: 20px;
	}
	#menuFlag span {
		width: 20px;
	}
	#mainMenu #fb a {
		top: 15px;
		right: 20px;
		width: 20px;
		height: 20px;
	}
	#mainMenu #insta a {
		top: 15px;
		width: 20px;
		height: 20px;
	}
}
/* ↓↓↓ 高さ360px以下 ↓↓↓ */
@media only screen and (max-height: 360px) {
	#gMenu li a {
		width: 70vmin;
		margin: -7px auto;
	}
	#gMenu li.sns {
		bottom: 0px;
	}
}




/* --------------------------------------------------------------
    4: footer
-------------------------------------------------------------- */
footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 70px;
	margin-top: 200px;
	padding: 0 5%;
	font-size: 12px;
	z-index: 10;
}
#footerArea {
	position: relative;
	top: 0px;
	width: 100%;
	max-width: 1400px;
	height: 70px;
	margin: 0 auto;
	border-top: 1px solid #cecece;
	background: #f2f2f2;
	transition: 0.4s cubic-bezier(0.6, 0.1, 0.3, 1);
}
footer p#copyRight {
	position: absolute;
	top: 14px;
	right: 0;
}
footer p#copyRight_s {
	display: none;
	position: absolute;
	top: 6px;
	right: 0;
}
footer #brueno {
	position: absolute;
	top: 32px;
	right: 0;
}

footer  #fb a {
	display: block;
	width: 28px;
	height: 28px;
	position: absolute;
	top: 19px;
	left: -10px;
	text-indent: -9999px;
	background: url(common/img/header_icon_fb.svg) left top no-repeat;
	-moz-background-size: contain;
	background-size: contain;
}
footer  #insta a {
	display: block;
	width: 28px;
	height: 28px;
	position: absolute;
	top: 19px;
	left: 20px;
	text-indent: -9999px;
	background: url(common/img/header_icon_insta.svg) left top no-repeat;
	-moz-background-size: contain;
	background-size: contain;
}
footer  #twitter a {
	display: block;
	width: 28px;
	height: 28px;
	position: absolute;
	top: 19px;
	left: 52px;
	text-indent: -9999px;
	background: url(common/img/header_icon_twitter.svg) left top no-repeat;
	-moz-background-size: contain;
	background-size: contain;
}


/* ↓↓↓ 740px以下 ↓↓↓ */
@media only screen and (max-width: 740px) {
}
/* ↓↓↓ 640px以下 ↓↓↓ */
@media only screen and (max-width: 640px) {
	footer {
		height: 50px;
	}
	#footerArea {
		top: 50px;
		height: 50px;
	}
	footer p#copyRight {
		top: 6px;
	}
	footer #brueno {
		top: 23px;
	}
	footer  #fb a,
	footer  #insta a,
	footer  #twitter a {
		top: 11px;
	}
}
/* ↓↓↓ 38px以下 ↓↓↓ */
@media only screen and (max-width: 380px) {
	footer p#copyRight {
		display: none;
	}
	footer p#copyRight_s {
		display: block;
	}
}




/* --------------------------------------------------------------
    5: main - top
-------------------------------------------------------------- */

main {
	/* max-width: 1400px; */
	margin: 0 auto;
	padding: 0 15%;
	overflow-x: hidden;
}

/* ↓↓↓ 1040px以上 ↓↓↓ */
@media only screen and (min-width: 1040px) {
	main {
		padding-top: 160px;
		padding-bottom: 210px;
	}
}
/* ↓↓↓ 1040px以下 ↓↓↓ */
@media only screen and (max-width: 1040px) {
	main {
		padding-top: 140px;
		padding-bottom: 190px;
	}
}
/* ↓↓↓ 840px以下 ↓↓↓ */
@media only screen and (max-width: 840px) {
	main {
		padding-top: 120px;
		padding-bottom: 170px;
	}
}
/* ↓↓↓ 740px以下 ↓↓↓ */
@media only screen and (max-width: 740px) {
	main {
		padding-top: 110px;
		padding-bottom: 160px;
	}
}
/* ↓↓↓ 640px以下 ↓↓↓ */
@media only screen and (max-width: 640px) {
	main {
		padding-top: 100px;
		padding-bottom: 150px;
	}
}
body.top main {
	padding-top: 0;
	padding-bottom: 0;
}


.inView {
	filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
	padding-top: 50px;
}

.conts .headerArea {
	width: 100%;
	/* margin-bottom: 95px; */
	margin-bottom: 70px;
}
.conts .headerArea h1 {
	width: 100%;
	height: 52px;
	text-align: center;
	text-indent: -9999px;
	background: url(common/img/top_schedule_h1.svg) center center no-repeat;
	-moz-background-size: contain;
	background-size: contain;
}




/* ↓↓↓ contsTop ↓↓↓ */
#contsTop {
	margin-top: 0px;
	padding-top: 100vh;
}

#contsTop h1 {
	display: block;
	position: fixed;
	top: 0;
	left: 15vw;
	width: 70vw;
	min-height: 100vh;
	margin: 0 auto;
	text-indent: -9999px;
}
#contsTop h1 img {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	display: block;
	width: 100%;
	/* max-width: 518px; */
	max-width: 450px;
	margin: auto;
	text-align:center;
}
#contsTop h1 img.small {
	display: none;
}


#contsTop h3 {
	display: block;
	max-width: 220px;
	height: 26px;
	margin: 33px auto 0 auto;
	text-indent: -9999px;
	background: url(common/img/contstop_h3.svg) left top no-repeat;
	-moz-background-size: contain;
	background-size: contain;
}
#contsTop h2 {
	display: block;
	max-width: 155px;
	height: 24px;
	margin: 74px auto 0 auto;
	text-indent: -9999px;
	background: url(common/img/contstop_h2.svg) left top no-repeat;
	-moz-background-size: contain;
	background-size: contain;
}
#contsTop .photoBox {
	/* max-width: 800px; */
	margin: 105px auto 0 auto;
}
#contsTop img {
	width: 100%;
}
#contsTop p.link_photo {
	/* max-width: 800px; */
	margin: 5px auto 0 auto;
	font-size: 12px;
}

/* ↓↓↓ 1440px以下 ↓↓↓ */
@media only screen and (max-width: 1440px) {
	#contsTop .photoBox {
		/* margin: 105px -12% 0 -12%; */
	}
	#contsTop p.link_photo {
		/* margin: 5px auto 0 -12%; */
	}
}
/* ↓↓↓ 1240px以下 ↓↓↓ */
@media only screen and (max-width: 1240px) {
	#contsTop .photoBox {
		margin: 105px -14.2% 0 -14.2%;
	}
	#contsTop p.link_photo {
		margin: 5px auto 0 -14.2%;
	}
}
/* ↓↓↓ 480px以下 ↓↓↓ */
@media only screen and (max-width: 480px) {
	/*
	#contsTop h1 {
		background: #FFF0F1 url(common/img/contstop_h1_full_s.svg) left top no-repeat;
		-moz-background-size: contain;
		background-size: contain;
	}
	*/
	#contsTop h1 img.large {
		display: none;
	}
	#contsTop h1 img.small {
		display: block;
	}
	#contsTop .photoBox {
		/* margin: 65px -18% 0 -18%; */
	}
}

main.topB #contsTop .photoBox {
	margin-top: 50vh;
}

/* ↑↑↑ contsTop ↑↑↑ */





/* ↓↓↓ contsFeature ↓↓↓ */
#contsFeature {
	height: 1800px;
	background: #ccc;
}
#contsFeature .headerArea h1 {
	background: url(common/img/top_feature_h1.svg) center center no-repeat;
	background-size: contain;
}
/* ↑↑↑ contsFeature ↑↑↑ */





/* ↓↓↓ contsProfile ↓↓↓ */
#contsProfile {
}
#contsProfile.conts .headerArea {
	margin-bottom: 75px;
}
#contsProfile .leftConts {
}
#contsProfile .headerArea h1 {
	background: url(common/img/top_profile_h1.svg) center center no-repeat;
	background-size: contain;
}
#contsProfile .profileArea h2 {
	width: 100%;
	max-width: 452px;
	margin-bottom: 32px;
}
#contsProfile .profileArea h2 img {
	width: 100%;
}
#contsProfile .profileArea h2 img.large {
	display: block;
}
#contsProfile .profileArea h2 img.small {
	display: none;
}
/* ↓↓↓ 540px以下 ↓↓↓ */
@media only screen and (max-width: 540px) {
	#contsProfile .profileArea h2 {
		width: 100%;
		max-width: 288px;
	}
	#contsProfile .profileArea h2 img.large {
		display: none;
	}
	#contsProfile .profileArea h2 img.small {
		display: block;
	}
}
#contsProfile .profileArea p {
	margin-top: 14px;
}
#contsProfile .profileArea p.en {
	margin-top: 30px;
}
#contsProfile .profileArea .photoBox {
	margin-top: 40px;
}
#contsProfile .profileArea .photoBox img {
	width: 100%;
}
#contsProfile p.link_photo {
	margin: 5px auto 0 auto;
	font-size: 12px;
}

.bioArea .conts {
	margin-top: 60px;
}
.bioArea h2 {
	/* margin-top: 150px; */
	/* margin-bottom: 50px; */
	margin-bottom: 30px;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 0.08em;
	text-align: center;
}
.bioArea ul.bioBox {
	display: flex;
	/* margin-top: 23px; */
	margin-top: 15px;
}
.bioArea ul.bioBox li {
	position: relative;
	box-sizing: border-box;
}
.bioArea ul.bioBox li.date {
	flex: 1;
}
.bioArea ul.bioBox li.jp {
	flex: 3;
	padding-right: 20px;
}
.bioArea ul.bioBox li.en {
	flex: 3;
	padding-left: 20px;
}
.bioArea ul.bioBox p {
	line-height: 1.3em;
}
.bioArea ul.bioBox p.tit {
	font-size: 18px;
}
.bioArea ul.bioBox p.tit {
	/* margin-bottom: 8px; */
	margin-bottom: 4px;
	font-size: 16px;
	line-height: 1.2em;
}
.bioArea ul.bioBox p.at {
	/* margin-top: 6px; */
	margin-top: 3px;
	font-size: 11px;
}
.bioArea ul.bioBox p.at.jp {
	font-size: 0.7em;
}
.bioArea ul.bioBox span.jp {
	font-size: 0.8em;
}
.bioArea ul.bioBox span.en {
	font-size: 1.2em;
}

.bioArea ul.bioBox.year {
	/* margin-top: 40px; */
	margin-top: 20px;
}
.bioArea ul.bioBox.year li::before {
	content: "";
	display: block;
	width: 15px;
	height: 10px;
	margin-bottom: 2px;
	border-top: 1px solid #A5A5A5;
}
/* ↓↓↓ 800px以下 ↓↓↓ */
@media only screen and (max-width: 800px) {
	.bioArea ul.bioBox li.date {
		flex: 1;
	}
	.bioArea ul.bioBox li.jp {
		flex: 2.5;
		padding-right: 20px;
	}
	.bioArea ul.bioBox li.en {
		flex: 2.5;
		padding-left: 20px;
	}
}
/* ↓↓↓ 540px以下 ↓↓↓ */
@media only screen and (max-width: 540px) {
	.bioArea .conts {
	}
	.bioArea h2 {
		/* margin-top: 120px; */
		/* margin-bottom: 30px; */
		margin-bottom: 0px;
	}
	.bioArea ul.bioBox {
		-webkit-flex-wrap: wrap;
  		flex-wrap: wrap;
	}
	.bioArea ul.bioBox li.date {
		flex: none;
		width: 100%;
	}
	.bioArea ul.bioBox.year {
		/* margin-top: 30px; */
		margin-top: 10px;
	}
	.bioArea ul.bioBox.year li.date {
		margin-top: 10px;
		/* margin-bottom: 20px; */
		margin-bottom: 10px;
	}
	.bioArea h2 + ul.bioBox li.date {
		margin-top: 0;
	}
	.bioArea ul.bioBox.year li::before {
		display: none;
		border-top: none;
	}
	.bioArea ul.bioBox.year li.date::before {
		content: "";
		display: block;
		width: 15px;
		height: 10px;
		border-top: 1px solid #A5A5A5;
	}
}

.bioArea .conts:first-of-type {
	margin-top: 0;
}


/* ↑↑↑ contsProfile ↑↑↑ */





/* ↓↓↓ contsPortfolio ↓↓↓ */
#contsPortfolio {
}
#contsPortfolio .headerArea h1 {
	background: url(common/img/top_portfolio_h1.svg) center center no-repeat;
	background-size: contain;
}
#contsPortfolio .thumArea {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#contsPortfolio .thumArea .thumBox {
	width: 22%;
}
#contsPortfolio .thumArea .thumBox img {
	width: 100%;
}
#contsPortfolio .thumArea .thumBox p.tit {
	margin-top: 20px;
	text-align: center;
	line-height: 1.2em;
	font-size: 1.2em;
	letter-spacing: 0.1em;
}
#contsPortfolio .thumArea .thumBox p.tit .jp {
	font-size: 0.9em;
}
#contsPortfolio .thumArea .thumBox p.sub {
	margin-top: 3px;
	text-align: center;
	font-size: 0.8em;
	line-height: 1.2em;
}
#contsPortfolio .thumArea .thumBox p.sub .jp {
	font-size: 0.7em;
}
#contsPortfolio .thumArea .thumBox a {
	color: #000;
}

body.top #remodalBox .portfoliotBase {
	height: 100%;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	background: #f2f2f2;
}
body.top #remodalBox .portfolioConts {
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0 auto;
	padding: 120px 15% 0 15%;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}
body.top #remodalBox .heightBox {
	height: 100px;
}
body.top #remodalBox .modalyou {
	max-width: 1400px;
}

#contsPortfolio .thumArea .thumBox {
	-webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    filter: grayscale(0%);
    transition: 0.4s linear;
}
#contsPortfolio .thumArea:hover .thumBox {
	-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
	filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    opacity: 0.3;
}
#contsPortfolio .thumArea .thumBox:hover {
	-webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    filter: grayscale(0%);
	filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
	/*transform: scale(0.95, 0.95);*/
}

/* ↓↓↓ 940px以下 ↓↓↓ */
@media only screen and (max-width: 1100px) {
	#contsPortfolio .thumArea {
		width: 75%;
		margin: 0 auto;
	}
	#contsPortfolio .thumArea .thumBox {
		width: 40%;
	}
	#contsPortfolio .thumArea .thumBox:nth-of-type(1),
	#contsPortfolio .thumArea .thumBox:nth-of-type(2) {
		margin-bottom: 60px;
	}
}
@media only screen and (max-width: 900px) {
	#contsPortfolio .thumArea {
		width: 85%;
		margin: 0 auto;
	}
	#contsPortfolio .thumArea .thumBox {
		width: 45%;
	}
	#contsPortfolio .thumArea .thumBox:nth-of-type(1),
	#contsPortfolio .thumArea .thumBox:nth-of-type(2) {
		margin-bottom: 60px;
	}
}
/* ↓↓↓ 640px以下 ↓↓↓ */
@media only screen and (max-width: 640px) {
	body.top #remodalBox .portfolioConts {
		padding: 100px 15% 0 15%;
	}
}
/* ↓↓↓ 540px以下 ↓↓↓ */
@media only screen and (max-width: 540px) {
	#contsPortfolio .thumArea .thumBox {
		width: 100%;
		margin-bottom: 60px;
	}
}


/* ↑↑↑ contsPortfolio ↑↑↑ */





/* ↓↓↓ contsProjects ↓↓↓ */
#contsProjects {
}
#contsProjects .headerArea h1 {
	background: url(common/img/top_projects_h1.svg) center center no-repeat;
	background-size: contain;
}
#contsProjects .selectContainer .leftConts {
}

/* ---- isotope btn ---- */
.selectIsoBtn {
	margin: 0px auto 20px auto;
	text-align: center;
}
.selectIsoBtn span {
	padding: 0 15px;
	filter: alpha(opacity=30);
	-moz-opacity: 0.3;
	opacity: 0.3;
	cursor: pointer;
	transition: 0.2s linear;
}
.selectIsoBtn span.active {
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}
.selectIsoBtn .cepa {
	display: inline-block;
	width: 1px;
	height: 100%;
	padding: 0;
	text-indent: -9999px;
	background: #cecece;
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}
.selectIsoBtn span:hover {
	filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}

/* ↓↓↓ 650px以下 ↓↓↓ */
@media only screen and (max-width: 650px) {
	.selectIsoBtn span {
		padding: 0 8px;
	}
}

/* ---- isotope ---- */
.isotope {
	width: calc(100% + 10px);
	left: -5px;
}
.element-item {
  position: relative;
  float: left;
  width: 20%;
  padding: 5px;
  box-sizing: border-box;
}
.element-item > * {
  margin: 0;
  padding: 0;
}
.element-item img {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

#contsProjects .isotope img {
	-webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    filter: grayscale(0%);
    transition: 0.4s linear;
}
#contsProjects .isotope:hover img {
	-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
	filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    opacity: 0.3;
}
#contsProjects .isotope img:hover {
	-webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    filter: grayscale(0%);
	filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
	/*transform: scale(0.95, 0.95);*/
}


/* ---- 171025 ---- */
#contsProjects .projectThumBox {
	position: relative;
	width: 100%;
	margin-top: 50px;
}
#contsProjects .projectThumBox:first-of-type {
	margin-top: 0;
}
#contsProjects .projectThumBox h1 {
	position: absolute;
	top: 0;
	left: 0;
	padding-right: 18px;
	font-size: 16px;
	border-right: 1px solid #cecece;
}
#contsProjects .projectThums {
	width: calc(100% - 150px);
	margin-left: 150px;
}
#contsProjects .projectThums a {
}
#contsProjects .projectThums img {
	display: block;
	height: 110px;
	width: auto;
	margin: 0;
	padding: 0 5px 5px 0;
	float: left;
}
#contsProjects .commercial .projectThums img {
	height: 80px;
}

#contsProjects .thumArea img {
	-webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    filter: grayscale(0%);
    transition: 0.4s linear;
}
#contsProjects .thumArea:hover img {
	-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
	filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    opacity: 0.3;
}
#contsProjects .thumArea img:hover {
	-webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    filter: grayscale(0%);
	filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
	/*transform: scale(0.95, 0.95);*/
}



/* ↓↓↓ 1740px以上 ↓↓↓ */
@media only screen and (min-width: 1740px) {
	.isotope {
		width: calc(100% + 10px);
		left: -4px;
	}
	.element-item {
	  width: calc(100% / 9);
	  padding: 4px;
	}
}
/* ↓↓↓ 1740px以下 ↓↓↓ */
@media only screen and (max-width: 1740px) {
	.isotope {
		width: calc(100% + 10px);
		left: -4px;
	}
	.element-item {
	  width: calc(100% / 8);
	  padding: 4px;
	}
}
/* ↓↓↓ 1440px以下 ↓↓↓ */
@media only screen and (max-width: 1440px) {
	.isotope {
		width: calc(100% + 10px);
		left: -3px;
	}
	.element-item {
	  width: calc(100% / 7);
	  padding: 3px;
	}
	#contsProjects .projectThums img {
		height: 105px;
	}
	#contsProjects .commercial .projectThums img {
		height: 75px;
	}
}
/* ↓↓↓ 1140px以下 ↓↓↓ */
@media only screen and (max-width: 1140px) {
	.isotope {
		width: calc(100% + 8px);
		left: -3px;
	}
	.element-item {
	  width: calc(100% / 6);
	  padding: 3px;
	}
	#contsProjects .projectThumBox h1 {
		font-size: 14px;
	}
	#contsProjects .projectThums img {
		height: 100px;
	}
	#contsProjects .commercial .projectThums img {
		height: 70px;
	}
}
/* ↓↓↓ 840px以下 ↓↓↓ */
@media only screen and (max-width: 840px) {
	.isotope {
		width: calc(100% + 6px);
		left: -2px;
	}
	.element-item {
	  width: calc(100% / 5);
	  padding: 2px;
	}
	#contsProjects .projectThums {
		width: calc(100% - 120px);
		margin-left: 120px;
	}
}
/* ↓↓↓ 740px以下 ↓↓↓ */
@media only screen and (max-width: 740px) {
	#contsProjects .projectThumBox h1 {
		border-right: none;
	}
	#contsProjects .projectThums {
		width: 100%;
		margin-left: 0;
		padding-top: 35px;
	}
	/*
	#contsProjects .projectThums img {
		height: 95px;
	}
	*/
	#contsProjects .projectThumBox {
		line-height: 0;
		-webkit-column-count: 6;
		-webkit-column-gap:   0px;
		-moz-column-count:    6;
		-moz-column-gap:      0px;
		column-count:         6;
		column-gap:           0px;
		padding-top: 30px;
	}
	#contsProjects .projectThumBox h1 {
		top: 10px;
	}
	#contsProjects .projectThums {
		padding-top: 0;
	}
	#contsProjects .projectThums img {
		width: calc(100%);
		height: auto;
		float: none;
	}
	#contsProjects .commercial .projectThums img {
		height: auto;
	}
}
/* ↓↓↓ 600px以下 ↓↓↓ */
@media only screen and (max-width: 600px) {
	.isotope {
		width: calc(100% + 4px);
		left: -2px;
	}
	.element-item {
	  width: calc(100% / 4);
	  padding: 2px;
	}
	
	#contsProjects .projectThumBox {
	   -webkit-column-count: 5;
	   -webkit-column-gap:   0px;
	   -moz-column-count:    5;
	   -moz-column-gap:      0px;
	   column-count:         5;
	   column-gap:           0px;
	}
}
/* ↓↓↓ 500px以下 ↓↓↓ */
@media only screen and (max-width: 500px) {
	#contsProjects .projectThumBox {
	   -webkit-column-count: 4;
	   -webkit-column-gap:   0px;
	   -moz-column-count:    4;
	   -moz-column-gap:      0px;
	   column-count:         4;
	   column-gap:           0px;
	}
}
/* ↓↓↓ 400px以下 ↓↓↓ */
@media only screen and (max-width: 400px) {
	#contsProjects .projectThumBox {
	   -webkit-column-count: 3;
	   -webkit-column-gap:   0px;
	   -moz-column-count:    3;
	   -moz-column-gap:      0px;
	   column-count:         3;
	   column-gap:           0px;
	}
}
/* ↑↑↑ contsProjects ↑↑↑ */





/* ↓↓↓ contsSchedule ↓↓↓ */
#contsSchedule {
	
}
/* ↑↑↑ contsSchedule ↑↑↑ */





/* ↓↓↓ contsNews ↓↓↓ */
#contsNews {
}
/* ↑↑↑ contsNews ↑↑↑ */





/* ↓↓↓ contsContact ↓↓↓ */
#contsContact {
}
#contsContact .headerArea h1 {
	background: url(common/img/top_contact_h1.svg) center center no-repeat;
	background-size: contain;
}
#contsContact p {
	text-align: center;
}
#contsContact p.en {
	margin-top: 10px;
	margin-bottom: 40px;
	line-height: 1.5em;
}
#contsContact p.mail a {
	font-size: 1.5em;
}

/* ↑↑↑ contsContact ↑↑↑ */







/* --------------------------------------------------------------
    5.5: news
-------------------------------------------------------------- */
body.news main {
}

#newsConts {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}
#contsNews .headerArea,
#newsConts .headerArea {
	width: 100%;
	/* margin-bottom: 95px; */
	margin-bottom: 75px;
	letter-spacing: 0.15em;
}
#contsNews .headerArea h1,
#newsConts .headerArea h1 {
	width: 100%;
	height: 52px;
	text-align: center;
	text-indent: -9999px;
	background: url(common/img/top_news_h1.svg) center center no-repeat;
	background-size: contain;
}


.selectBtn {
	/* margin: 80px auto 0 auto; */
	margin: 60px auto 0 auto;
	text-align: center;
}
.selectBtn span {
	filter: alpha(opacity=30);
	-moz-opacity: 0.3;
	opacity: 0.3;
	cursor: pointer;
	transition: 0.2s linear;
}
.selectBtn span.active {
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}
.selectBtn .leftBtn {
	padding-right: 15px;
}
.selectBtn .rightBtn {
	padding-left: 15px;
}
.selectBtn .cepa {
	display: inline-block;
	width: 1px;
	height: 100%;
	text-indent: -9999px;
	background: #cecece;
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}
.selectBtn span:hover {
	filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}

.selectContainer {
	width: 200%;
	overflow: hidden;
	transition: 0.7s cubic-bezier(0.6, 0.1, 0.3, 1);
}
.leftConts {
	width: 50%;
	float: left;
	transition: 0.7s cubic-bezier(0.6, 0.1, 0.3, 1);
}
.rightConts {
	width: 50%;
	margin-left: 50%;
	filter:alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
	transition: 0.7s cubic-bezier(0.6, 0.1, 0.3, 1);
}
/* ↓↓↓ 550px以下 ↓↓↓ */
@media only screen and (max-width: 550px) {
	.conts .headerArea {
		/* margin-bottom: 85px; */
		margin-bottom: 65px;
	}
	.selectBtn {
		/* margin-top: 70px; */
		margin-top: 60px;
	}
}
/* ↓↓↓ 500px以下 ↓↓↓ */
@media only screen and (max-width: 500px) {
	.conts .headerArea {
		/* margin-bottom: 75px; */
		margin-bottom: 65px;
	}
	.selectBtn {
		/* margin-top: 60px;/*/
		margin-top: 50px;
	}
}
/* ↓↓↓ 450px以下 ↓↓↓ */
@media only screen and (max-width: 450px) {
	.conts .headerArea {
		margin-bottom: 65px;
	}
	.selectBtn {
		margin-top: 40px;
	}
}
/* ↓↓↓ 400px以下 ↓↓↓ */
@media only screen and (max-width: 400px) {
	.conts .headerArea {
		margin-bottom: 55px;
	}
	.selectBtn {
		margin-top: 30px;
	}
}


.newsBox {
	display: flex;
	width: 100%;
	margin-bottom: 70px;
}
div .newsBox:last-of-type {
	margin-bottom: 0;
}
.newsBox div.dateArea {
	width: 100px;
	height: 25px;
	padding-right: 40px;
	font-size: 12px;
	letter-spacing: 0.07em;
	line-height: 1.3;
	white-space: nowrap;
	border-right: 1px solid #cecece;
}
.newsBox div.dateArea p {
	margin-bottom: 7px;
}
.newsBox div.dateArea .subCat {
	display: none;
}
.newsBox div.catArea {
	width: 120px;
	height: 25px;
	margin-left: 40px;
	padding-right: 40px;
	font-size: 12px;
	letter-spacing: 0.07em;
	line-height: 1.3;
	/* word-wrap: break-word; */
	/* -webkit-hyphens: auto; */
	/* -moz-hyphens: auto; */
	/* -ms-hyphens: auto; */
	/* hyphens: auto; */
	border-right: 1px solid #cecece;
}
.newsBox div.titleArea {
	flex: 1;
}
.newsBox div.titleArea h1 {
	position: relative;
	margin-left:40px;
	padding-right: 40px;
	font-size: 22px;
	line-height: 1.5;
}
.leftConts .newsBox div.titleArea h1 {
	font-size: 18px;
	line-height: 1.5;
}
.newsBox div.titleArea h1:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 25px;
	border-right: 1px solid #cecece;
}
.newsBox div.titleArea p.subDate {
	display: none;
	margin-bottom: 20px;
	font-size: 11.4px;
	letter-spacing: 0.07em;
}
.newsBox div.titleArea p.subDate span {
	margin-right: 15px;
	padding-right: 15px;
	border-right: 1px solid #cecece;
}
.newsBox div.contsArea {
	width: 500px;
	margin-left: 40px;
	line-height: 1.7;
}
.newsBox div.contsArea p {
	margin-top: 10px;
}
.leftConts .newsBox div.contsArea p {
	font-size: 13px;
	line-height: 1.8;
}
.newsBox div.contsArea p:first-child {
	margin-top: 0;
}

.newsBox .relatedArea {
	margin-top: 20px;
}
.newsBox .relatedArea .relatedBox {
	margin-top: 3px;
	padding-left: 30px;
	background: url(common/img/icon_arrow_2.svg)no-repeat;
	background-position: -15px 6px;
}
.newsBox .relatedArea .relatedBox p {
	font-size: 12px;
}
.leftConts .newsBox .relatedArea .relatedBox p {
	font-size: 11px;
}

.newsBox div.contsArea .photoArea {
	width: 100%;
	margin-bottom: 25px;
}
.newsBox .swiper-container {
    width: 100%;
    /*height: 325px;*/
}
.newsBox .swiper-slide {
	/* height: 300px; */
	padding: 0 1px;
	overflow: hidden;
	text-align: center;
	font-size: 18px;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: start;
	-ms-flex-align: flex-start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}
.newsBox .swiper-slide img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 590px;
	margin-right: auto;
	/* width: 100%; */
}

/* ↓↓↓ 1740px以上 ↓↓↓ */
@media only screen and (min-width: 1740px) {
	.newsBox {
		display: flex;
		margin-bottom: 70px;
	}
	.newsBox div.dateArea {
		padding-right: 60px;
	}
	.newsBox div.catArea {
		width: 120px;
		margin-left: 60px;
		padding-right: 60px;
	}
	.newsBox div.titleArea {
		flex: 1;
	}
	.newsBox div.titleArea h1 {
		margin-left: 60px;
		padding-right: 60px;
		font-size: 22px;
	}
	.leftConts .newsBox div.titleArea h1 {
		font-size: 18px;
	}
	#scheduleConts dl.specBox {
		margin-left: 60px;
	}
	.newsBox div.titleArea h1:after {
		border-right: 1px solid #cecece;
	}
	.newsBox div.contsArea {
		display: block;
		width: 500px;
		margin-left: 60px;
	}
}
/* ↓↓↓ 1740px以下 ↓↓↓ */
@media only screen and (max-width: 1740px) {
	.newsBox {
		display: flex;
		margin-bottom: 70px;
	}
	.newsBox div.dateArea {
		padding-right: 50px;
	}
	.newsBox div.catArea {
		width: 110px;
		margin-left: 50px;
		padding-right: 50px;
	}
	.newsBox div.titleArea {
		flex: 1;
	}
	.newsBox div.titleArea h1 {
		margin-left: 50px;
		padding-right: 50px;
		font-size: 22px;
	}
	.leftConts.newsBox div.titleArea h1 {
		font-size: 18px;
	}
	#scheduleConts dl.specBox {
		margin-left: 50px;
	}
	.newsBox div.titleArea h1:after {
		border-right: 1px solid #cecece;
	}
	.newsBox div.contsArea {
		display: block;
		width: 475px;
		margin-left: 50px;
	}
}
/* ↓↓↓ 1540px以下 ↓↓↓ */
@media only screen and (max-width: 1540px) {
	.newsBox {
		display: flex;
		margin-bottom: 70px;
	}
	.newsBox div.dateArea {
		padding-right: 40px;
	}
	.newsBox div.catArea {
		width: 100px;
		margin-left: 40px;
		padding-right: 40px;
	}
	.newsBox div.titleArea {
	}
	.newsBox div.titleArea h1 {
		margin-left: 40px;
		padding-right: 40px;
	}
	.leftConts .newsBox div.titleArea h1 {
		font-size: 18px;
	}
	#scheduleConts dl.specBox {
		margin-left: 40px;
	}
	.newsBox div.titleArea h1:after {
	}
	.newsBox div.contsArea {
		width: 400px;
		margin-left: 40px;
	}
}
/* ↓↓↓ 1400px以下 ↓↓↓ */
@media only screen and (max-width: 1400px) {
	.newsBox {
		display: flex;
		margin-bottom: 70px;
	}
	.newsBox div.dateArea {
		padding-right: 35px;
	}
	.newsBox div.dateArea .subCat {
		display: block;
	}
	.newsBox div.catArea {
		display: none;
	}
	.newsBox div.titleArea {
		flex: 1;
	}
	.newsBox div.titleArea h1 {
		margin-left: 35px;
		padding-right: 35px;
		font-size: 22px;
	}
	.leftConts .newsBox div.titleArea h1 {
		font-size: 18px;
	}
	#scheduleConts dl.specBox {
		margin-left: 35px;
	}
	.newsBox div.titleArea h1:after {
	}
	.newsBox div.contsArea {
		width: 400px;
		margin-left: 35px;
	}
}
/* ↓↓↓ 1240px以下 ↓↓↓ */
@media only screen and (max-width: 1240px) {
	.newsBox {
		display: flex;
		margin-bottom: 70px;
	}
	.newsBox div.dateArea {
		display: none;
	}
	.newsBox div.titleArea {
		flex: 1;
	}
	.newsBox div.titleArea h1 {
		margin-left: 0;
		font-size: 22px;
	}
	.leftConts .newsBox div.titleArea h1 {
		font-size: 18px;
	}
	#scheduleConts dl.specBox {
		margin-left: 0;
	}
	.newsBox div.titleArea p.subDate {
		display: block;
	}
	.newsBox div.titleArea h1:after {
	}
	.newsBox div.contsArea {
		width: 375px;
		padding-top: 38px;
	}
}
/* ↓↓↓ 1040px以下 ↓↓↓ */
@media only screen and (max-width: 1040px) {
	.newsBox {
		display: flex;
		margin-bottom: 70px;
	}
	.newsBox div.titleArea {
	}
	.newsBox div.titleArea h1 {
		font-size: 22px;
	}
	.leftConts .newsBox div.titleArea h1 {
		font-size: 18px;
	}
	.newsBox div.titleArea h1:after {
	}
	.newsBox div.contsArea {
		width: 50%;
	}
}
/* ↓↓↓ 840px以下 ↓↓↓ */
@media only screen and (max-width: 840px) {
	.newsBox {
		display: block;
		margin-bottom: 70px;
	}
	.newsBox div.titleArea {
		flex: none;
		width: 100%;
	}
	.newsBox div.titleArea h1 {
		margin: 0;
		padding: 0;
		font-size: 22px;
	}
	.leftConts .newsBox div.titleArea h1 {
		font-size: 18px;
	}
	.newsBox div.titleArea h1:after {
		border-right: none;
	}
	.newsBox div.contsArea {
		width: 100%;
		margin-left: 0;
	}
	.newsBox .relatedArea {
		margin-top: 35px;
	}
}
/* ↓↓↓ 740px以下 ↓↓↓ */
@media only screen and (max-width: 740px) {
	.newsBox {
		margin-bottom: 70px;
	}
	.newsBox div.titleArea {
		flex: 1;
	}
	.newsBox div.titleArea h1 {
		font-size: 22px;
	}
	.leftConts .newsBox div.titleArea h1 {
		font-size: 18px;
	}
	.newsBox div.titleArea h1:after {
	}
	.newsBox div.contsArea {
	}
}
/* ↓↓↓ 640px以下 ↓↓↓ */
@media only screen and (max-width: 640px) {
	.newsBox {
		margin-bottom: 70px;
	}
	.newsBox div.titleArea {
		flex: 1;
	}
	.newsBox div.titleArea h1 {
		font-size: 22px;
	}
	.leftConts .newsBox div.titleArea h1 {
		font-size: 18px;
	}
	.newsBox div.titleArea h1:after {
	}
	.newsBox div.contsArea {
	}
}





/* --------------------------------------------------------------
    5.5: Concert Schedule
-------------------------------------------------------------- */
body.schedule main {
}

#scheduleConts {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}
#contsSchedule .headerArea h1,
#scheduleConts .headerArea h1 {
	background: url(common/img/top_schedule_h1.svg) center center no-repeat;
	background-size: contain;
}
#contsSchedule .headerArea,
#scheduleConts .headerArea {
	letter-spacing: 0.15em;
}
#contsSchedule .headerArea,
#scheduleConts .headerArea {
	width: 100%;
	/* margin-bottom: 95px; */
	margin-bottom: 75px;
	letter-spacing: 0.15em;
}
#contsSchedule .headerArea h1,
#scheduleConts .headerArea h1 {
	width: 100%;
	height: 52px;
	text-align: center;
	text-indent: -9999px;
	background: url(common/img/top_schedule_h1.svg) center center no-repeat;
	background-size: contain;
}


#contsSchedule dl.specBox,
#scheduleConts dl.specBox {
	margin-top: 30px;
	margin-left: 50px;
	line-height: 1.5;
}
#contsSchedule dl.specBox.tour,
#scheduleConts dl.specBox.tour {
	margin-left: 65px;
}
#contsSchedule dl.specBox.tour dt.subDate,
#scheduleConts dl.specBox.tour dt.subDate {
	margin-left: -15px;
}

/* ↓↓↓ 1740px以上 ↓↓↓ */
@media only screen and (min-width: 1740px) {
	#contsSchedule dl.specBox,
	#scheduleConts dl.specBox {
		margin-left: 60px;
	}
	#contsSchedule dl.specBox.tour,
	#scheduleConts dl.specBox.tour {
		margin-left: 75px;
	}
}
/* ↓↓↓ 1740px以下 ↓↓↓ */
@media only screen and (max-width: 1740px) {
	#contsSchedule dl.specBox,
	#scheduleConts dl.specBox {
		margin-left: 50px;
	}
	#contsSchedule dl.specBox.tour,
	#scheduleConts dl.specBox.tour {
		margin-left: 65px;
	}
}
/* ↓↓↓ 1540px以下 ↓↓↓ */
@media only screen and (max-width: 1540px) {
	#contsSchedule dl.specBox,
	#scheduleConts dl.specBox {
		margin-left: 40px;
	}
	#contsSchedule dl.specBox.tour,
	#scheduleConts dl.specBox.tour {
		margin-left: 55px;
	}
}
/* ↓↓↓ 1400px以下 ↓↓↓ */
@media only screen and (max-width: 1400px) {
	#contsSchedule dl.specBox,
	#scheduleConts dl.specBox {
		margin-left: 35px;
	}
	#contsSchedule dl.specBox.tour,
	#scheduleConts dl.specBox.tour {
		margin-left: 50px;
	}
}
/* ↓↓↓ 1240px以下 ↓↓↓ */
@media only screen and (max-width: 1240px) {
	#contsSchedule dl.specBox,
	#scheduleConts dl.specBox {
		margin-left: 0;
	}
	#contsSchedule dl.specBox.tour,
	#scheduleConts dl.specBox.tour {
		margin-left: 15px;
	}
}

#contsSchedule dl.specBox:not(:nth-of-type(1)),
#scheduleConts dl.specBox:not(:nth-of-type(1)) {
	margin-top: 20px;
}




#contsSchedule dl.specBox dt,
#scheduleConts dl.specBox dt {
	float: left;
	/* clear: left; */
	margin-top: 5px;
}
#contsSchedule dl.specBox dt:first-child,
#scheduleConts dl.specBox dt:first-child {
	margin-top: 0px;
}
#contsSchedule dl.specBox dt.link,
#scheduleConts dl.specBox dt.link {
	margin-left: 2px;
	text-indent: -9999px;
	background: url(common/img/icon_arrow_2.svg)no-repeat;
	background-position: -4px 4px;
}
#contsSchedule dl.specBox dt.subDate span,
#scheduleConts dl.specBox dt.subDate span {
	margin-right: 15px;
	padding-right: 15px;
	border-right: 1px solid #cecece;
}
#contsSchedule dl.specBox dd,
#scheduleConts dl.specBox dd {
	margin-top: 5px;
	margin-left: 4.7em;
}
#contsSchedule dl.specBox dd:first-of-type,
#scheduleConts dl.specBox dd:first-of-type {
	margin-top: 0px;
}
#contsSchedule dl.specBox dd.link,
#scheduleConts dl.specBox dd.link {
	margin-left: 4.7em;
}
#contsSchedule dl.specBox dd.tit3,
#scheduleConts dl.specBox dd.tit3 {
	margin-left: 4.7em;
}
#contsSchedule dl.specBox dd.tit4,
#scheduleConts dl.specBox dd.tit4 {
	margin-left: 5.7em;
}
#contsSchedule dl.specBox dd.tit5,
#scheduleConts dl.specBox dd.tit5 {
	margin-left: 6.7em;
}
#contsSchedule dl.specBox dd.tit6,
#scheduleConts dl.specBox dd.tit6 {
	margin-left: 7.7em;
}
#contsSchedule dl.specBox dd.tit7,
#scheduleConts dl.specBox dd.tit7 {
	margin-left: 8.7em;
}
#contsSchedule dl.specBox dd.tit7h,
#scheduleConts dl.specBox dd.tit7h {
	margin-left: 9.2em;
}
#contsSchedule dl.specBox dd.tit8,
#scheduleConts dl.specBox dd.tit8 {
	margin-left: 9.7em;
}





/* --------------------------------------------------------------
    6: main - projects
-------------------------------------------------------------- */
body.project main {
	/* height: 1000px; センター*/
}

.projectBase {
	/* position: fixed; センター*/
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* display: flex; センター*/
	align-items: center;
	justify-content: center;
}
.projectConts {
	width: calc(100% - 200px);
	height: 70%;
	max-width: 1400px;
	padding: 0 5%;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}
.projectConts .titleArea {
	margin-bottom: 80px;
	letter-spacing: 0.15em;
}
.projectConts .titleArea h2 {
	text-align: center;
}
.projectConts .titleArea h1 {
	margin-top: 20px;
	font-size: 30px;
	line-height: 1.5;
	text-align: center;
}

.projectConts .photo-text-box_a {
	display: flex;
	flex-direction: row;
	/*justify-content: center;*/
}
.projectConts .photo-text-box_b {
	display: flex;
	flex-direction: row;
	/*justify-content: center;*/
}
.projectConts .photo-text-box_a .titleArea {
	margin-bottom: 35px;
}
.projectConts .photo-text-box_a .titleArea h1 {
	margin-top: 0px;
	font-size: 25px;
	line-height: 1.5;
	text-align: left;
}
.projectConts .photoArea {
	padding-right: 30px;
	padding-right: 20px;
	/* border-right: 1px solid #cecece; */
	overflow: hidden;
}
.projectConts .photo-text-box_a .photoArea {
}
.projectConts .photo-text-box_b .photoArea {
	width: 70%;
}
.movieArea{
	position:relative;
	width:100%;
	padding-top:56.25%;
}
.movieArea iframe{
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
}

.projectConts .textArea {
	padding-left: 30px;
	padding-left: 20px;
	flex: 1;
}

.projectConts .textArea dl.specBox {
	line-height: 1.5;
}
.projectConts .textArea dl.specBox dt {
	float: left;
	clear: left;
	margin-top: 5px;
}
.projectConts .textArea dl.specBox dt:first-child {
	margin-top: 0px;
}
.projectConts .textArea dl.specBox dt.link {
	margin-left: 2px;
	text-indent: -9999px;
	background: url(common/img/icon_arrow_2.svg)no-repeat;
	background-position: -4px 4px;
}
.projectConts .textArea dl.specBox dd {
	margin-top: 5px;
	margin-left: 4.7em;
}
.projectConts .textArea dl.specBox dd:first-of-type {
	margin-top: 0px;
}
.projectConts .textArea dl.specBox dd.link {
	margin-left: 4.7em;
}
.projectConts .textArea dl.specBox dd.tit3 {
	margin-left: 4.7em;
}
.projectConts .textArea dl.specBox dd.tit4 {
	margin-left: 5.7em;
}
.projectConts .textArea dl.specBox dd.tit5 {
	margin-left: 6.7em;
}
.projectConts .textArea dl.specBox dd.tit6 {
	margin-left: 7.7em;
}
.projectConts .textArea dl.specBox dd.tit7 {
	margin-left: 8.7em;
}
.projectConts .textArea dl.specBox dd.tit8 {
	margin-left: 9.7em;
}

.projectConts .textArea ul.musicBox {
	margin-top: 18px;
	margin-left: -10px;
}
.projectConts .textArea ul.musicBox li {
	margin-left: 13px;
	display: inline-block;
}
.projectConts .textArea ul.musicBox li.subTitle {
	margin-top: -8px;
	display: block;
}

.projectConts .textArea .textBox {
	margin-top: 35px;
}
.projectConts .textArea .textBox p {
	margin-top: 10px;
}

.projectConts .relatedArea {
	position: relative;
	border-top: 1px solid #cecece;
}
.projectConts .relatedArea > h1 {
	margin-top: -11px;
	margin-bottom: 30px;
}
.projectConts .relatedArea > h1 span {
	padding: 0 20px;
	background: #f2f2f2;
}


.projectConts .relatedArea .relatedBox {
	margin-top: 10px;
	padding-left: 30px;
	background: url(common/img/icon_arrow_2.svg)no-repeat;
	background-position: -15px 6px;
}
.projectConts .relatedArea .relatedBox h1 {
	font-size: 12px;
}
.projectConts .relatedArea .relatedBox p {
	margin-top: 5px;
	/*margin-left: 20px;*/
}
.projectConts .relatedArea .relatedBox ul {
	padding-left: 2px;
}
.projectConts .relatedArea .relatedBox ul li {
	display: inline-block;
	margin-right: 15px;
	padding-left: 22px;
	background: url(common/img/icon_arrow_2.svg)no-repeat;
	background-position: -18px 5px;
}
.projectConts .relatedArea .relatedBox.elise h1 {
	float: left;
}
.projectConts .relatedArea .relatedBox.elise p {
	margin-left: 5em;
	padding-top: 1px;
}
.projectConts .relatedArea .relatedBox.elise ul {
	margin-left: 5em;
}
.projectConts .relatedArea .relatedBox.printgakuhu h1 {
	font-size: 11px;
	letter-spacing: 0;
	float: left;
}
.projectConts .relatedArea .relatedBox.printgakuhu p {
	margin-left: 7.6em;
	padding-top: 1px;
}
.projectConts .relatedArea .relatedBox.printgakuhu ul {
	margin-left: 7.6em;
}

/* .relatedBox2 */
.projectConts .relatedArea .relatedBox2 {
	display: flex;
	flex-direction: row;
	margin-top: 12px;
}
.projectConts .relatedArea .relatedBox2 .photoArea {
	width: 35px;
	text-align: center;
	margin: 0;
	padding: 0;
	border: none;
}
.projectConts .relatedArea .relatedBox2 .photoArea img {
	display: none;
	-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    /* transition: 0.2s linear; */
}
.projectConts .relatedArea .relatedBox2:hover .photoArea img {
	-webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    filter: grayscale(0%);
}
.projectConts .relatedArea .relatedBox2 .textArea {
	margin: 0 0 0 18px;
	padding: 0 0 0 18px;
	border-left: 1px solid #cecece;
}

dl.acMenu dt {
    display: block;
    cursor: pointer;
	background: url(common/img/icon_accordion.svg) no-repeat;
	background-position: right calc(5px);
}
dl.acMenu dt.active {
	background: url(common/img/icon_accordion.svg) no-repeat;
	background-position: right calc(100% - 6px);
}
dl.acMenu dd {
    display: none;
	filter:alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
	transition: 0.1s linear;
}
.projectConts .relatedArea .relatedBox2 h1 {
	font-size: 12px;
	/* font-weight: bold; */
}
.projectConts .relatedArea .relatedBox2 p {
	margin-top: 5px;
	/*margin-left: 20px;*/
}
.projectConts .relatedArea .relatedBox2 ul {
	margin-top: 2px;
	padding-left: 2px;
	padding-bottom: 6px;
}
.projectConts .relatedArea .relatedBox2 ul li {
	display: inline-block;
	margin-right: 15px;
	padding-left: 22px;
	background: url(common/img/icon_arrow_2.svg)no-repeat;
	background-position: -18px 5px;
}
.projectConts .relatedArea .relatedBox2.elise h1 {
}
.projectConts .relatedArea .relatedBox2.elise p {
}
.projectConts .relatedArea .relatedBox2.elise ul {
}
.projectConts .relatedArea .relatedBox2.printgakuhu h1 {
	font-size: 11px;
	letter-spacing: 0;
}
.projectConts .relatedArea .relatedBox2.printgakuhu p {
}
.projectConts .relatedArea .relatedBox2.printgakuhu ul {
}
/* .relatedBox2 */


/* ↓↓↓ 1040px以上 ↓↓↓ */
@media only screen and (min-width: 1040px) {
	.projectConts .titleArea {
		margin-bottom: 110px;
	}
	.projectConts .titleArea h1 {
		margin-top: 30px;
		font-size: 45px;
	}
	.projectConts .photo-text-box_b .photoArea {
		width: 50%;
	}
	.projectConts .relatedArea {
		margin-top: 90px;
		margin-top: 60px;
	}
}
/* ↓↓↓ 1040px以下 ↓↓↓ */
@media only screen and (max-width: 1040px) {
	.projectConts .titleArea {
		margin-bottom: 90px;
	}
	.projectConts .titleArea h1 {
		margin-top: 25px;
		font-size: 40px;
	}
	.projectConts .photo-text-box_b .photoArea {
		width: 60%;
	}
	.projectConts .relatedArea {
		margin-top: 80px;
		margin-top: 60px;
	}
}
/* ↓↓↓ 840px以下 ↓↓↓ */
@media only screen and (max-width: 840px) {
	.projectConts .titleArea {
		margin-bottom: 75px;
	}
	.projectConts .titleArea h1 {
		margin-top: 20px;
		font-size: 30px;
	}
	.projectConts .photo-text-box_b .photoArea {
		width: 70%;
	}
	.projectConts .relatedArea {
		margin-top: 70px;
		margin-top: 60px;
	}
}
/* ↓↓↓ 740px以下 ↓↓↓ */
@media only screen and (max-width: 740px) {
	.projectConts .titleArea {
		margin-bottom: 60px;
	}
	.projectConts .titleArea h1 {
		margin-top: 15px;
		font-size: 30px;
	}
	.projectConts .photo-text-box_a {
		flex-direction: column;
		align-items: center;
	}
	.projectConts .photo-text-box_b {
		flex-direction: column;
		align-items: center;
	}
	.projectConts .photo-text-box_b .photoArea {
		width: 100%;
	}
	.projectConts .photoArea {
		padding-right: 0px;
		border-right: none;
	}
	.projectConts .textArea {
		width: 100%;
		margin-top: 50px;
		padding-left: 0px;
	}
	.projectConts .textArea ul.musicBox li {
		display: inline-block;
	}
	.projectConts .relatedArea {
		margin-top: 50px;
	}
}
/* ↓↓↓ 640px以下 ↓↓↓ */
@media only screen and (max-width: 640px) {
	.projectConts .titleArea {
		margin-bottom: 50px;
	}
	.projectConts .relatedArea {
		margin-top: 50px;
	}
}


.projectConts .swiper-container {
    width: 300px;
    /*height: 325px;*/
}
.projectConts .swiper-slide {
	/* height: 300px; */
	padding: 0 1px;
	overflow: hidden;
	text-align: center;
	font-size: 18px;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: start;
	-ms-flex-align: flex-start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}
.projectConts .swiper-slide img {
	/* width: auto; */
	/* height: auto; */
	/* max-width: 100%; */
	/* max-height: 100%; */
	/* margin-left: auto; */
	display: none;
}

.swiper-container-horizontal > .swiper-pagination-bullets {
	bottom: -10px;
}
.swiper-pagination {
	position: relative;
	margin-top: 0px;
}
.swiper-pagination-bullet {
	width: 5px;
	height: 5px;
	padding: 6px;
	display: inline-block;
	opacity: 0.2;
	background: none;
}
.swiper-pagination-bullet::after {
	content: '';
	display: block;
	width: 5px;
	height: 5px;
	margin-top: -3px;
	margin-left: -3px;
	border-radius: 100%;
	background: #000;
}
.swiper-pagination-bullet-active {
	opacity: 0.4;
	background: none;
}





/* --------------------------------------------------------------
    6: main - projects2
-------------------------------------------------------------- */
body.project main {
	/* height: 1000px; センター*/
}
.projectBase2 {
	position: fixed; /* センター*/
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding-top: 80px;
	display: flex; /* センター*/
	align-items: center;
	justify-content: center;
}
.projectConts2 {
	position: relative;
	width: calc(100% - 200px);
	max-width: 1000px;
	height: 70%;
	/*max-height: 70%;*/
	overflow: hidden;
}
.projectConts2 .wrap {
	height: 100%;
	min-height: 100%;
	overflow: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}
.projectConts2 .cover {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100px;
	z-index: 2;
	pointer-events: none;
	background: url(common/img/projectconts2_cover.png) left bottom repeat-x;
}
.projectConts2 .titleArea {
	height: 20px;
	margin-bottom: 80px;
	letter-spacing: 0.15em;
}
.projectConts2 .titleArea.categorySub {
	display: none;
}
.projectConts2 .titleArea h2 {
	text-align: center;
}
.projectConts2 .titleArea h1 {
	margin-top: 20px;
	font-size: 30px;
	line-height: 1.5;
	text-align: center;
}

.projectConts2 .photo-text-box_a {
	width: calc(100% + 20px); /* スクロールバー対策 */
	padding-right: 20px; /* スクロールバー対策 */
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}
.projectConts2 .photo-text-box_b {
	width: calc(100% + 20px); /* スクロールバー対策 */
	padding-right: 20px; /* スクロールバー対策 */
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}
.projectConts2 .photo-text-box_a .titleArea,
.projectConts2 .photo-text-box_b .titleArea {
	height: auto;
	margin-bottom: 35px;
}
.projectConts2 .photo-text-box_a .titleArea h1,
.projectConts2 .photo-text-box_b .titleArea h1 {
	margin-top: 0px;
	font-size: 25px;
	line-height: 1.5;
	text-align: left;
	word-wrap: break-word;
}
.projectConts2 .photoArea {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
/* img */
.projectConts2 .photo-text-box_a .photoArea {
	width: 100%;
	max-width: 300px;
	top: 55px;
}
/* YouTube */
.projectConts2 .photo-text-box_b .photoArea {
	width: 100%;
	/* max-width: 300px; */
	top: 55px;
}
.movieArea{
	position:relative;
	width:100%;
	padding-top:56.25%;
}
.movieArea iframe{
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
}

.projectConts2 .textArea {
	width: auto;
	margin-left: 300px;
	padding-left: 40px;
	padding-bottom: 100px;
}

.projectConts2 .textArea dl.specBox {
	line-height: 1.5;
}
.projectConts2 .textArea dl.specBox dt {
	float: left;
	clear: left;
	margin-top: 5px;
}
.projectConts2 .textArea dl.specBox dt:first-child {
	margin-top: 0px;
}
.projectConts2 .textArea dl.specBox dt.link {
	margin-left: 2px;
	text-indent: -9999px;
	background: url(common/img/icon_arrow_2.svg) no-repeat;
	background-position: -2px 4px;
	width: 4em;
}
.projectConts2 .textArea dl.specBox dd {
	margin-top: 5px;
	margin-left: 4.7em;
}
.projectConts2 .textArea dl.specBox dd:first-of-type {
	margin-top: 0px;
}
.projectConts2 .textArea dl.specBox dd.link {
	margin-left: 4.7em;
}
.projectConts2 .textArea dl.specBox dd.tit3 {
	margin-left: 4.7em;
}
.projectConts2 .textArea dl.specBox dd.tit4 {
	margin-left: 5.7em;
}
.projectConts2 .textArea dl.specBox dd.tit5 {
	margin-left: 6.7em;
}
.projectConts2 .textArea dl.specBox dd.tit6 {
	margin-left: 7.7em;
}
.projectConts2 .textArea dl.specBox dd.tit7 {
	margin-left: 8.7em;
}
.projectConts2 .textArea dl.specBox dd.tit8 {
	margin-left: 9.7em;
}

.projectConts2 .textArea ul.musicBox {
	margin-top: 18px;
	margin-left: -10px;
}
.projectConts2 .textArea ul.musicBox li {
	margin-left: 13px;
	display: inline-block;
}
.projectConts2 .textArea ul.musicBox li.subTitle {
	margin-top: -8px;
	display: block;
}

.projectConts2 .textArea .textBox {
	margin-top: 35px;
}
.projectConts2 .textArea .textBox p {
	margin-top: 10px;
}

.projectConts2 .relatedArea {
	position: relative;
	border-top: 1px solid #cecece;
}
.projectConts2 .relatedArea > h1 {
	margin-top: -11px;
	margin-bottom: 30px;
}
.projectConts2 .relatedArea > h1 span {
	padding: 0 20px;
	background: #f2f2f2;
}


.relatedArea .relatedBox2 {
	display: flex;
	flex-direction: row;
	margin-top: 12px;
}
.relatedArea .relatedBox2 .photoArea a::after {
	content:　none;
	transition: none;
	height: 0;
}
.relatedArea .relatedBox2 .photoArea a h1::after {
	position: absolute;
	bottom: 4px;
	left: 50%;
	content: '';
	width: 100px;
	height: 1px;
	background-color: #ccc;
	transition: .4s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

/*
.projectConts2 .relatedArea .relatedBox2 a {
	display: flex;
	flex-direction: row;
	margin-top: 12px;
}
.projectConts2 .relatedArea .relatedBox2 a::after {
	content:　none;
	transition: none;
	height: 0;
}
.projectConts2 .relatedArea .relatedBox2 a h1::after {
	position: absolute;
	bottom: 4px;
	left: 50%;
	content: '';
	width: 100px;
	height: 1px;
	background-color: #ccc;
	transition: .4s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
*/

.projectConts2 .relatedArea .relatedBox2 .photoArea {
	position: relative;
	top: 0;
	left: 0;
	width: 35px;
	text-align: center;
	margin: 0;
	padding: 0;
	border: none;
}
.projectConts2 .relatedArea .relatedBox2 .photoArea img {
	display: none;
	-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    /* transition: 0.4s linear; */
}
.projectConts2 .relatedArea .relatedBox2:hover .photoArea img {
	-webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    filter: grayscale(0%);
}
.projectConts2 .relatedArea .relatedBox2 .textArea {
	flex: 1;
	width: 100%;
	height: auto;
	margin: 0 0 0 18px;
	padding: 0 0 0 18px;
	border-left: 1px solid #cecece;
}

dl.acMenu {
	width: 100%;
}
dl.acMenu dt {
    display: block;
	width: 100%;
    cursor: pointer;
	background: url(common/img/icon_accordion.svg) no-repeat;
	background-position: right calc(5px);
}
dl.acMenu dt.active {
	background: url(common/img/icon_accordion.svg) no-repeat;
	background-position: right calc(100% - 6px);
}
dl.acMenu dd {
    display: none;
	filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
	transition: 0.1s linear;
}

.projectConts2 .relatedArea .relatedBox2 h1 {
	font-size: 12px;
	/* font-weight: bold; */
}
.projectConts2 .relatedArea .relatedBox2 p {
	margin-top: 5px;
	/*margin-left: 20px;*/
}
.projectConts2 .relatedArea .relatedBox2 ul {
	margin-top: 2px;
	padding-left: 2px;
	padding-bottom: 6px;
}
.projectConts2 .relatedArea .relatedBox2 ul li {
	display: inline-block;
	margin-right: 15px;
	padding-left: 22px;
	background: url(common/img/icon_arrow_2.svg)no-repeat;
	background-position: -18px 5px;
}
.projectConts2 .relatedArea .relatedBox2.elise h1 {
}
.projectConts2 .relatedArea .relatedBox2.elise p {
}
.projectConts2 .relatedArea .relatedBox2.elise ul {
}
.projectConts2 .relatedArea .relatedBox2.printgakuhu h1 {
	font-size: 11px;
	letter-spacing: 0;
}
.projectConts2 .relatedArea .relatedBox2.printgakuhu p {
}
.projectConts2 .relatedArea .relatedBox2.printgakuhu ul {
}


/* ↓↓↓ 1040px以上 ↓↓↓ */
@media only screen and (min-width: 1040px) {
	.projectConts2 {
		width: calc(100% - 400px);
	}
	.projectConts2 .titleArea {
		margin-bottom: 70px;
	}
	.projectConts2 .titleArea h1 {
		margin-top: 30px;
		font-size: 45px;
	}
	.projectConts2 .photo-text-box_a {
		height: calc(100% - 90px);
	}
	.projectConts2 .photo-text-box_b {
		height: calc(100% - 90px);
	}
	.projectConts2 .photo-text-box_a .photoArea {
		top: 95px;
	}
	.projectConts2 .photo-text-box_b .photoArea {
		top: 95px;
		width: 50%;
	}
	.projectConts2 .photo-text-box_b .textArea {
		margin-left: 50%;
		padding-left: 40px;
	}
	.projectConts2 .relatedArea {
		margin-top: 90px;
		margin-top: 60px;
	}
}
/* ↓↓↓ 1040px以下 ↓↓↓ */
@media only screen and (max-width: 1040px) {
	.projectConts2 {
		width: calc(100% - 300px);
	}
	.projectConts2 .titleArea {
		margin-bottom: 60px;
	}
	.projectConts2 .titleArea h1 {
		margin-top: 25px;
		font-size: 40px;
	}
	.projectConts2 .photo-text-box_a {
		height: calc(100% - 80px);
	}
	.projectConts2 .photo-text-box_b {
		height: calc(100% - 80px);
	}
	.projectConts2 .photo-text-box_a .photoArea {
		top: 85px;
	}
	.projectConts2 .photo-text-box_b .photoArea {
		top: 85px;
		width: 60%;
	}
	.projectConts2 .photo-text-box_b .textArea {
		margin-left: 60%;
		padding-left: 40px;
		padding-bottom: 50px;
	}
	.projectConts2 .relatedArea {
		margin-top: 80px;
		margin-top: 60px;
	}
}

/* ↓↓↓ 840px以下 ↓↓↓ */
@media only screen and (max-width: 840px) {
	.projectConts2 {
		width: calc(100% - 200px);
	}
	.projectConts2 .titleArea {
		margin-bottom: 50px;
	}
	.projectConts2 .titleArea h1 {
		margin-top: 20px;
		font-size: 30px;
	}
	.projectConts2 .photo-text-box_a {
		height: calc(100% - 70px);
	}
	.projectConts2 .photo-text-box_b {
		height: calc(100% - 50px);
		flex-direction: column;
		align-items: center;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.projectConts2 .photo-text-box_a .photoArea {
		top: 75px;
	}
	/*
	#remodalBox .projectConts2 .photo-text-box_a .photoArea {
		margin-top: 55px;
	}
	*/
	.projectConts2 .photo-text-box_b .photoArea {
		position: relative;
		top: 0;
		width: 100%;
		margin-top: 0;
	}
	.projectConts2 .photo-text-box_b .photoArea {
		position: relative;
		top: 0;
		width: 100%;
	}
	.projectConts2 .photo-text-box_b .textArea {
		width: 100%;
		height: auto;
		margin-top: 50px;
		margin-left: 0;
		padding-left: 0px;
		overflow: hidden;
	}
	.projectConts2 .relatedArea {
		margin-top: 70px;
		margin-top: 60px;
	}
}

/* ↓↓↓ 740px以下 ↓↓↓ */
@media only screen and (max-width: 740px) {
	.projectConts2 .titleArea.category {
		display: none;
	}
	.projectConts2 .titleArea.categorySub {
		display: block;
	}
	.projectConts2 .titleArea {
		margin-bottom: 30px;
	}
	.projectConts2 .titleArea h1 {
		margin-top: 15px;
		font-size: 30px;
	}
	.projectConts2 .photo-text-box_a {
		/* height: calc(100% - 50px); */
		height: 100%;
		flex-direction: column;
		align-items: center;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.projectConts2 .photo-text-box_b {
		height: 100%;
	}
	
	.projectConts2 .photo-text-box_a .photoArea {
		position: relative;
		top: 0;
		width: 100%;
		max-width: none;
		margin-top: 0;
	}
	/*
	#remodalBox .projectConts2 .photo-text-box_a .photoArea {
		margin-top: 0;
	}
	*/
	.projectConts2 .photo-text-box_a .textArea {
		width: 100%;
		height: auto;
		margin-top: 50px;
		margin-left: 0;
		padding-left: 0px;
		overflow: hidden;
	}
	.projectConts2 .photo-text-box_a .textArea ul.musicBox li {
		display: inline-block;
	}
	.projectConts2 .relatedArea {
		margin-top: 50px;
	}
}
/* ↓↓↓ 640px以下 ↓↓↓ */
@media only screen and (max-width: 640px) {
	.projectConts2 {
		width: calc(100% - 150px);
	}
	.projectConts2 .titleArea {
	}
	.projectConts2 .relatedArea {
	}
}
/* ↓↓↓ 540px以下 ↓↓↓ */
@media only screen and (max-width: 540px) {
	.projectConts2 {
		width: calc(100% - 120px);
	}
	.projectConts2 .titleArea {
	}
	.projectConts2 .relatedArea {
	}
}
/* ↓↓↓ 640px以下 ↓↓↓ */
@media only screen and (max-width: 440px) {
	.projectConts2 {
		width: calc(100% - 80px);
	}
	.projectConts2 .titleArea {
	}
	.projectConts2 .relatedArea {
	}
}

/* ↓↓↓ 高さ800px以下 ↓↓↓ */
@media only screen and (max-height: 800px) {
	.projectConts2 {
		height: 80%;
	}
	.projectConts2 .titleArea {
		margin-bottom: 30px;
	}
	.projectConts2 .photo-text-box_a {
		height: calc(100% - 50px);
	}
	.projectConts2 .photo-text-box_a .photoArea {
		top: 55px;
	}
	.projectConts2 .photo-text-box_b {
		height: calc(100% - 50px);
	}
	.projectConts2 .photo-text-box_b .photoArea {
		top: 55px;
	}
}
/* ↓↓↓ 高さ700px以下 ↓↓↓ */
@media only screen and (max-height: 700px) {
	.projectConts2 {
		height: 95%;
	}
}

/* ↓↓↓ 高さ800px以下 幅740px以下 ↓↓↓ */
@media only screen and (max-height: 800px) and  (max-width: 740px)
{
	.projectConts2 .photo-text-box_a .photoArea {
		top: 0;
	}
	.projectConts2 .photo-text-box_b .photoArea {
		top: 0;
	}
	.projectConts2 .photo-text-box_a .textArea {
		margin-top: 40px;
	}
	.projectConts2 .photo-text-box_b .textArea {
		margin-top: 40px;
	}
	.projectConts2 .photo-text-box_a .titleArea {
		margin-bottom: 25px;
	}
	.projectConts2 .photo-text-box_b .titleArea {
		margin-bottom: 25px;
	}
}

/* 固定用 */
.projectConts2.noScroll {
	height: auto;
}
.projectConts2.noScroll .wrap {
	height: auto;
}
.projectConts2.noScroll .textArea {
	padding-bottom: 0;
}
.projectConts2.noScroll .cover {
	display: none;
}



#topCover {
	display: flex;
	position: fixed;
	/* センター*/
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* センター*/
	align-items: center;
	justify-content: center;
	background: #f2f2f2;
	z-index: 50;
}
#topCover .spinner {
	/* opacity: 0; */
}

body.top #cover {
	display: none;
	position: fixed;
	/* センター*/
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* センター*/
	align-items: center;
	justify-content: center;
	background: #f2f2f2;
	z-index: 80;
}

/*
.spinner {
	width: 40px;
	height: 40px;
	margin: 100px auto;
	background-color: #333;
	
	border-radius: 100%;  
	-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
	animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
	0% {
		-webkit-transform: scale(0)
	}
	100% {
	  -webkit-transform: scale(1.0);
	  opacity: 0;
	}
}

@keyframes sk-scaleout {
	0% { 
	  -webkit-transform: scale(0);
	  transform: scale(0);
	} 100% {
	  -webkit-transform: scale(1.0);
	  transform: scale(1.0);
	  opacity: 0;
	}
}
*/

.spinner {
  margin: 60px auto;
  width: 60px;
  height: 60px;
  position: relative;
  text-align: center;
  
  -webkit-animation: sk-rotate 2.0s infinite linear;
  animation: sk-rotate 2.0s infinite linear;
}
.dot1, .dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #9ba6a7;
  border-radius: 100%;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}
.dot2 {
  top: auto;
  bottom: 0;
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}


#remodalBox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 90;
}

body.top .projectBase2 {
	/*
	position: relative;
	width: auto;
	height: 100%;
	display: block;
	*/
	display: none;
	cursor: pointer;
	background: #f2f2f2;
	z-index: 100;
}
body.top .projectConts2 {
	/*
	width: auto;
	max-width: none;
	height: 100%;
	display: block;
	*/
	cursor: auto;
}
body.top #remodalBox .closeBtn {
	position: fixed;
	top: 15px;
	right: 15px;
	display: block;
	width: 30px;
	height: 30px;
	cursor: pointer;
	transition: 0.2s linear;
	background: url(common/img/icon_close.svg) left top no-repeat;
	z-index: 9999;
}
body.top #remodalBox .closeBtn:hover {
	opacity: 0.3;
}
/* ↓↓↓ 幅500px以下 ↓↓↓ */
@media only screen and (max-width: 500px) {
	body.top .projectConts2 .closeBtn {
		width: 20px;
		height: 20px;
		background: url(common/img/icon_close.svg) left top no-repeat;
		-moz-background-size: contain;
		background-size: contain;
	}
}
/* ↓↓↓ 高さ600px以下 ↓↓↓ */
@media only screen and (max-height: 600px) {
	body.top .projectConts2 .closeBtn {
		width: 20px;
		height: 20px;
		background: url(common/img/icon_close.svg) left top no-repeat;
		-moz-background-size: contain;
		background-size: contain;
	}
}



.projectConts2 .swiper-container {
    max-width: 300px;
	width: 100%;
    /*height: 325px;*/
}
.projectConts2 .swiper-slide {
	/* height: 300px; */
	padding: 0 1px;
	overflow: hidden;
	text-align: center;
	font-size: 18px;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: start;
	-ms-flex-align: flex-start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}
.projectConts2 .swiper-slide img {
	/* width: auto; */
	/* height: auto; */
	/* max-width: 100%; */
	/* max-height: 100%; */
	/* margin-left: auto; */
	display: none;
}

.swiper-container-horizontal > .swiper-pagination-bullets {
	bottom: -10px;
}
.swiper-pagination {
	position: relative;
	margin-top: 0px;
}
.swiper-pagination-bullet {
	width: 5px;
	height: 5px;
	padding: 6px;
	display: inline-block;
	opacity: 0.2;
	background: none;
}
.swiper-pagination-bullet::after {
	content: '';
	display: block;
	width: 5px;
	height: 5px;
	margin-top: -3px;
	margin-left: -3px;
	border-radius: 100%;
	background: #000;
}
.swiper-pagination-bullet-active {
	opacity: 0.4;
	background: none;
}
.swiper-container {
	transition: 0.5s cubic-bezier(0.6, 0.1, 0.3, 1);
}




/* --------------------------------------------------------------
    6: main - portfolio
-------------------------------------------------------------- */
body.project main {
	/* height: 1000px; センター*/
}

.portfolioBase {
	/* position: fixed; センター*/
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* display: flex; センター*/
	align-items: center;
	justify-content: center;
}
.portfolioConts {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	/* padding: 0 8%; */
}
.portfolioConts .titleArea {
	width: 100%;
	margin-bottom: 80px;
	letter-spacing: 0.15em;
}
.portfolioConts .titleArea h2 {
	text-align: center;
}
.portfolioConts .titleArea h1 {
	width: 100%;
	margin-top: 10px;
	/* font-size: 30px;
	line-height: 1.5; */
	text-align: center;
}
.portfolioConts .titleArea h1 img {
	width: 80%;
	max-width: 550px;
}

.portfolioConts .photo-text-box {
	display: flex;
	flex-direction: row;
	/*justify-content: center;*/
}
.portfolioConts .photoArea {
	/* padding-right: 30px; */
	/* border-right: 1px solid #cecece; */
	overflow: hidden;
}
.portfolioConts .specArea {
	padding-left: 45px;
	padding-right: 35px;
	border-right: 1px solid #cecece; /* */
}
.portfolioConts .textArea {
	padding-left: 35px;
}

.portfolioConts dl.specBox {
	line-height: 1.5;
	padding-bottom: 25px; /* test */
	border-bottom: 1px solid #cecece; /* test */
}
.portfolioConts dl.specBox dt {
	float: left;
	clear: left;
	margin-top: 5px;
}
.portfolioConts dl.specBox dt:first-child {
	margin-top: 0px;
}
.portfolioConts dl.specBox dt.link {
	margin-left: 2px;
	text-indent: -9999px;
	background: url(common/img/icon_arrow_2.svg)no-repeat;
	background-position: -4px 4px;
}
.portfolioConts dl.specBox dd {
	margin-top: 5px;
	margin-left: 4.7em;
}
.portfolioConts dl.specBox dd:first-of-type {
	margin-top: 0px;
}
.portfolioConts dl.specBox dd.link {
	margin-left: 4.7em;
}
.portfolioConts dl.specBox dd.tit3 {
	margin-left: 4.7em;
}
.portfolioConts dl.specBox dd.tit4 {
	margin-left: 5.7em;
}
.portfolioConts dl.specBox dd.tit5 {
	margin-left: 6.7em;
}
.portfolioConts dl.specBox dd.tit6 {
	margin-left: 7.7em;
}
.portfolioConts dl.specBox dd.tit7 {
	margin-left: 8.7em;
}
.portfolioConts dl.specBox dd.tit8 {
	margin-left: 9.7em;
}


.portfolioConts dl.musicBox {
	margin-top: 30px;
	/* margin-top: 25px; test */
	line-height: 1.5;
}
.portfolioConts dl.musicBox dt {
	float: left;
	clear: left;
	margin-top: 10px;
}
.portfolioConts dl.musicBox dt:first-of-type {
	margin-top: 0px;
}
.portfolioConts dl.musicBox dd {
	margin-top: 10px;
	margin-left: 2em;
}
.portfolioConts dl.musicBox dd:first-of-type {
	margin-top: 0px;
}


.portfolioConts .textBox {
	margin-top: 0px;
}
.portfolioConts .textBox p {
	margin-top: 15px;
}
.portfolioConts .textBox p:first-child {
	margin-top: -3px;
}


.portfolioConts .relatedArea {
	position: relative;
	border-top: 1px solid #cecece;
}
.portfolioConts .relatedArea > h1 {
	margin-top: -11px;
	margin-bottom: 30px;
}
.portfolioConts .relatedArea > h1 span {
	padding: 0 20px;
	background: #f2f2f2;
}


.portfolioConts .relatedArea .relatedBox2 {
	display: flex;
	flex-direction: row;
	margin-top: 12px;
}
.portfolioConts .relatedArea .relatedBox2 .photoArea {
	position: relative;
	top: 0;
	left: 0;
	width: 35px;
	text-align: center;
	margin: 0;
	padding: 0;
	border: none;
}
.portfolioConts .relatedArea .relatedBox2 .photoArea img {
	display: none;
	-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    /* transition: 0.2s linear; */
}
.portfolioConts .relatedArea .relatedBox2:hover .photoArea img {
	-webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    filter: grayscale(0%);
}
.portfolioConts .relatedArea .relatedBox2 .textArea {
	flex: 1;
	width: 100%;
	height: auto;
	margin: 0 0 0 18px;
	padding: 0 0 0 18px;
	border-left: 1px solid #cecece;
}

.portfolioConts .relatedArea .relatedBox2 h1 {
	font-size: 12px;
	/* font-weight: bold; */
}
.portfolioConts .relatedArea .relatedBox2 p {
	margin-top: 5px;
	/*margin-left: 20px;*/
}
.portfolioConts .relatedArea .relatedBox2 ul {
	margin-top: 2px;
	padding-left: 2px;
	padding-bottom: 6px;
}
.portfolioConts .relatedArea .relatedBox2 ul li {
	display: inline-block;
	margin-right: 15px;
	padding-left: 22px;
	background: url(common/img/icon_arrow_2.svg)no-repeat;
	background-position: -18px 5px;
}
.portfolioConts .relatedArea .relatedBox2.elise h1 {
}
.portfolioConts .relatedArea .relatedBox2.elise p {
}
.portfolioConts .relatedArea .relatedBox2.elise ul {
}
.portfolioConts .relatedArea .relatedBox2.printgakuhu h1 {
	font-size: 11px;
	letter-spacing: 0;
}
.portfolioConts .relatedArea .relatedBox2.printgakuhu p {
}
.portfolioConts .relatedArea .relatedBox2.printgakuhu ul {
}



/* ↓↓↓ 1440px以上 ↓↓↓ */
@media only screen and (min-width: 1440px) {
	.portfolioConts .titleArea {
		margin-bottom: 110px;
	}
	.portfolioConts .titleArea h1 {
		margin-top: 15px;
	}
	.portfolioConts .titleArea h1 img {
		width: 60%;
	}
	.portfolioConts .photo-text-box {
	}
	.portfolioConts .photoArea {
		width: 50%;
	}
	.portfolioConts .specArea {
		flex: 3;
	}
	.portfolioConts .textArea {
		flex: 7;
	}
	.portfolioConts .relatedArea {
		margin-top: 90px;
	}
}
/* ↓↓↓ 1440px以下 ↓↓↓ */
@media only screen and (max-width:1440px) {
	.portfolioConts .titleArea {
		margin-bottom: 100px;
	}
	.portfolioConts .titleArea h1 {
		margin-top: 15px;
	}
	.portfolioConts .titleArea h1 img {
		width: 70%;
	}
}
/* ↓↓↓ 1040px以下 ↓↓↓ */
@media only screen and (max-width:1240px) {
	.portfolioConts .titleArea {
		margin-bottom: 90px;
	}
	.portfolioConts .titleArea h1 img {
		width: 80%;
	}
}
/* ↓↓↓ 1040px以下 ↓↓↓ */
@media only screen and (max-width: 1040px) {
	.portfolioConts .titleArea {
		margin-bottom: 85px;
	}
	.portfolioConts .titleArea h1 {
		margin-top: 15px;
	}
	.portfolioConts .titleArea h1 img {
		width: 80%;
	}
	.portfolioConts .photo-text-box {
		flex-wrap: wrap;
	}
	.portfolioConts .photoArea {
		flex: 1;
	}
	.portfolioConts .relatedArea .relatedBox2 .photoArea {
		flex: none;
	}
	.portfolioConts .specArea {
		width: 210px;
		padding-right: 0px;
		border-right: none;
	}
	.portfolioConts .textArea {
		width: 100%;
		padding-left: 0px;
		padding-top: 60px;
	}
	.portfolioConts .relatedArea {
		margin-top: 80px;
	}
}
/* ↓↓↓ 840px以下 ↓↓↓ */
@media only screen and (max-width: 840px) {
	.portfolioConts .titleArea {
		margin-bottom: 70px;
	}
	.portfolioConts .titleArea h1 img {
		width: 85%;
	}
	.portfolioConts .titleArea h1 {
		margin-top: 10px;
	}
	.portfolioConts .photo-text-box {
	}
	.portfolioConts .photoArea {
	}
	.portfolioConts .specArea {
	}
	.portfolioConts .textArea {
	}
	.portfolioConts .relatedArea {
		margin-top: 70px;
	}
}
/* ↓↓↓ 740px以下 ↓↓↓ */
@media only screen and (max-width: 740px) {
	.portfolioConts .titleArea {
		margin-bottom: 65px;
	}
	.portfolioConts .titleArea h1 {
		margin-top: 10px;
	}
	.portfolioConts .titleArea h1 img {
		width: 92%;
	}
	.portfolioConts .photo-text-box {
		flex-wrap: wrap;
	}
	.portfolioConts .photoArea {
		width: 100%;
		flex: none;
		margin-bottom: 50px;
		padding-right: 0px;
		border-right: none;
	}
	.portfolioConts .specArea {
		width: 200px;
		flex: none;
		padding-left: 0px;
		padding-right: 35px;
		/* padding-right: 0px;test */
		border-right: 1px solid #cecece; /* test*/
	}
	.portfolioConts .textArea {
		width: auto;
		flex: 1;
		padding-left: 35px;
		padding-top: 0px;
	}
	.portfolioConts .relatedArea {
		margin-top: 60px;
	}
}
/* ↓↓↓ 540px以下 ↓↓↓ */
@media only screen and (max-width: 540px) {
	.portfolioConts .photo-text-box {
		display: block;
	}
	.portfolioConts .titleArea {
		margin-bottom: 50px;
	}
	.portfolioConts .titleArea h1 {
		margin-top: 5px;
	}
	.portfolioConts .titleArea h1 img {
		width: 100%;
	}
	.portfolioConts .specArea {
		width: 100%;
		padding-right: 0;
		border-right: none;
	}
	.portfolioConts dl.musicBox {
		padding-bottom: 30px;
		border-bottom: 1px solid #cecece;
	}
	.portfolioConts .textArea {
		width: 100%;
		margin-top: 60px;
		padding-left: 0;
	}
	.portfolioConts .relatedArea {
		margin-top: 60px;
	}
}









/* ↓↓↓ photo-text-box2 ↓↓↓ */

.photo-text-box2 {
	display: flex;
	width: 100%;
	margin-bottom: 80px;
}
.photo-text-box2 div.specArea2 {
	width: 170px;
	height: 25px;
	padding-right: 40px;
	font-size: 12px;
	letter-spacing: 0.07em;
	line-height: 1.3;
	white-space: nowrap;
	border-right: 1px solid #cecece;
}

.photo-text-box2 dl.specBox {
	line-height: 1.5;
	padding-bottom: 0;
	border-bottom: none;
}
.photo-text-box2 dl.specBox dt {
	float: left;
	clear: left;
	margin-top: 5px;
}
.photo-text-box2 dl.specBox dt:first-child {
	margin-top: 0px;
}
.photo-text-box2 dl.specBox dt.link {
	width: 30px;
	margin-left: 2px;
	text-indent: -9999px;
	background: url(common/img/icon_arrow_2.svg)no-repeat;
	background-position: -4px 4px;
}
.photo-text-box2 dl.specBox dt.link.tit4{
	width: 60px;
	background-position: 0px 4px;
}
.photo-text-box2 dl.specBox dd {
	margin-top: 5px;
	margin-left: 4.7em;
}
.photo-text-box2 dl.specBox dd:first-of-type {
	margin-top: 0px;
}
.photo-text-box2 dl.specBox dd.link {
	margin-left: 4.7em;
}
.photo-text-box2 dl.specBox dd.tit3 {
	margin-left: 4.7em;
}
.photo-text-box2 dl.specBox dd.tit4 {
	margin-left: 5.7em;
}
.photo-text-box2 dl.specBox dd.tit5 {
	margin-left: 6.7em;
}
.photo-text-box2 dl.specBox dd.tit6 {
	margin-left: 7.7em;
}
.photo-text-box2 dl.specBox dd.tit7 {
	margin-left: 8.7em;
}
.photo-text-box2 dl.specBox dd.tit8 {
	margin-left: 9.7em;
}

.photo-text-box2 div.specArea p {
	margin-bottom: 7px;
}
.photo-text-box2 div.specArea .subCat {
	display: none;
}

.photo-text-box2 div.musicArea {
	flex: 1;
	width: 170px;
	height: 25px;
	padding-right: 40px;
	font-size: 12px;
	letter-spacing: 0.07em;
	line-height: 1.3;
	border-right: 1px solid #cecece;
}
.photo-text-box2 dl.musicBox {
	margin-top: 0;
	white-space: normal;
}
.photo-text-box2 div.musicArea .specBox.sub {
	display: none;
	padding-bottom: 25px;
	border-bottom: 1px solid #cecece;
}

.photo-text-box2 div.contsArea {
	width: 500px;
	margin-left: 40px;
}
.photo-text-box2 div.contsArea p {
	margin-top: 13px;
}
.photo-text-box2 div.contsArea p:first-child {
	margin-top: 0;
}



.photo-text-box2 div.contsArea .photoArea {
	width: 100%;
	margin-bottom: 40px;
}
.photo-text-box2 .swiper-container {
    width: 100%;
    /*height: 325px;*/
}
.photo-text-box2 .swiper-slide {
	/* height: 300px; */
	padding: 0 1px;
	overflow: hidden;
	text-align: center;
	font-size: 18px;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: start;
	-ms-flex-align: flex-start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}
.photo-text-box2 .swiper-slide img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 590px;
	margin-right: auto;
	/* width: 100%; */
}

.photo-text-subBox {
	display: none;
}

/* ↓↓↓ 1840px以上 ↓↓↓ */
@media only screen and (min-width: 2040px) {
	.photo-text-box2 {
		display: flex;
		margin-bottom: 80px;
	}
	.photo-text-box2 div.specArea2 {
		width: 220px;
		padding-right: 80px;
	}
	.photo-text-box2 div.musicArea {
		flex: 1;
		margin-left: 80px;
		padding-right: 80px;
	}
	.photo-text-box2 div.musicArea .specBox.sub {
		display: none;
	}
	.photo-text-box2 div.titleArea h1:after {
		border-right: 1px solid #cecece;
	}
	.photo-text-box2 div.contsArea {
		display: block;
		width: 700px;
		margin-left: 60px;
	}
	
	.photo-text-subBox {
		display: none;
	}
}
/* ↓↓↓ 1840px以上 ↓↓↓ */
@media only screen and (max-width: 2040px) {
	.photo-text-box2 {
		display: flex;
		margin-bottom: 80px;
	}
	.photo-text-box2 div.specArea2 {
		width: 200px;
		padding-right: 60px;
	}
	.photo-text-box2 div.musicArea {
		flex: 1;
		margin-left: 60px;
		padding-right: 60px;
	}
	.photo-text-box2 div.musicArea .specBox.sub {
		display: none;
	}
	.photo-text-box2 div.titleArea h1:after {
		border-right: 1px solid #cecece;
	}
	.photo-text-box2 div.contsArea {
		display: block;
		width: 600px;
		margin-left: 60px;
	}
	
	.photo-text-subBox {
		display: none;
	}
}
/* ↓↓↓ 1840px以下 ↓↓↓ */
@media only screen and (max-width: 1840px) {
	.photo-text-box2 {
		display: flex;
		margin-bottom: 80px;
	}
	.photo-text-box2 div.specArea2 {
		width: 190px;
		padding-right: 50px;
	}
	.photo-text-box2 div.musicArea {
		flex: 1;
		margin-left: 50px;
		padding-right: 50px;
	}
	.photo-text-box2 div.musicArea .specBox.sub {
		display: none;
	}
	.photo-text-box2 div.titleArea h1:after {
		border-right: 1px solid #cecece;
	}
	.photo-text-box2 div.contsArea {
		display: block;
		width: 550px;
		margin-left: 50px;
	}
	
	.photo-text-subBox {
		display: none;
	}
}
/* ↓↓↓ 1540px以下 ↓↓↓ */
@media only screen and (max-width: 1540px) {
	.photo-text-box2 {
		display: flex;
		margin-bottom: 80px;
	}
	.photo-text-box2 div.specArea2 {
		width: 180px;
		padding-right: 40px;
	}
	.photo-text-box2 div.musicArea {
		flex: 1;
		margin-left: 40px;
		padding-right: 40px;
	}
	.photo-text-box2 div.musicArea .specBox.sub {
		display: none;
	}
	.photo-text-box2 div.titleArea h1:after {
	}
	.photo-text-box2 div.contsArea {
		width: 500px;
		margin-left: 40px;
	}
	
	.photo-text-subBox {
		display: none;
	}
}
/* ↓↓↓ 1400px以下 ↓↓↓ */
@media only screen and (max-width: 1400px) {
	.photo-text-box2 {
		display: flex;
		margin-bottom: 80px
		
	}
	.photo-text-box2 div.specArea2 {
		width: 170px;
		padding-right: 35px;
	}
	.photo-text-box2 div.specArea .subCat {
		display: block;
	}
	.photo-text-box2 div.musicArea {
		flex: 1;
		margin-left: 35px;
		padding-right: 35px;
	}
	.photo-text-box2 div.musicArea .specBox.sub {
		display: none;
	}
	.photo-text-box2 div.titleArea h1:after {
	}
	.photo-text-box2 div.contsArea {
		width: 450px;
		margin-left: 35px;
	}
	
	.photo-text-subBox {
		display: none;
	}
}
/* ↓↓↓ 1240px以下 ↓↓↓ */
@media only screen and (max-width: 1240px) {
	.photo-text-box2 {
	}
	.photo-text-box2 div.specArea2 {
		width: 100px;
		padding-right: 35px;
	}
	.photo-text-box2 dl.specBox dt {
		float: none;
	}
	.photo-text-box2 dl.specBox dd,
	.photo-text-box2 dl.specBox dd.tit4 {
		margin-top: 0;
		margin-left: 0;
		margin-bottom: 15px;
	}
	
	.photo-text-box2 div.musicArea {
		flex: 1;
		margin-left: 35px;
		padding-right: 35px;
	}
	.photo-text-box2 div.musicArea .specBox.sub {
		display: none;
	}
	.photo-text-box2 div.contsArea {
		width: 400px;
		/* padding-top: 38px; */
	}
	
	.photo-text-subBox {
		display: none;
	}
}
/* ↓↓↓ 1040px以下 ↓↓↓ */
@media only screen and (max-width: 1040px) {
	.photo-text-box2 {
		display: flex;
		margin-bottom: 80px;
	}
	.photo-text-box2 div.specArea2 {
		display: none;
	}
	.photo-text-box2 dl.specBox dt {
		float: left;
	}
	.photo-text-box2 dl.specBox dd,
	.photo-text-box2 dl.specBox dd.tit4 {
		margin-top: 5px;
		margin-left: 5.7em;
		margin-bottom: 0;
	}
	
	.photo-text-box2 div.musicArea {
		order: 1;
		flex: none;
		width: 210px;
		height: auto;
		margin-left: 0;
		padding-left: 45px;
		padding-right: 0px;
		border-right: none;
	}
	.photo-text-box2 div.musicArea .specBox.sub {
		display: block;
	}
	.photo-text-box2 div.musicArea dl.musicBox {
		margin-top: 30px;
	}
	.photo-text-box2 div.contsArea {
		order: 0;
		flex: 1;
		width: 300px;
		margin: 0;
		padding: 0;
	}
	.photo-text-box2 div.contsArea .photoArea {
		margin: 0;
	}
	.photo-text-box2 div.contsArea .textBox {
		display: none;
	}
	
	.photo-text-subBox {
		display: block;
	}
	.photo-text-subBox .musicArea {
		display: none;
	}
}
/* ↓↓↓ 840px以下（920px） ↓↓↓ */
@media only screen and (max-width: 840px) {
	.photo-text-box2 {
		display: block;
		margin-bottom: 80px;
	}
	.photo-text-box2 div.musicArea {
		display: none;
	}
	.photo-text-box2 div.contsArea {
		width: 100%;
		margin-left: 0;
	}
	
	.photo-text-subBox {
		display: flex;
	}
	.photo-text-subBox .musicArea {
		display: block;
		width: 50%;
		padding-right: 30px;
		border-right: 1px solid #cecece;
	}
	.photo-text-subBox .contsArea {
		width: 50%;
		margin-top: 0px;
		margin-left: 30px;
	}
	
	.photo-text-box2 .relatedArea {
		margin-top: 35px;
	}
}
/* ↓↓↓ 740px以下 ↓↓↓ */
@media only screen and (max-width: 740px) {
	.photo-text-box2 {
		margin-bottom: 80px;
	}
	.photo-text-box2 div.contsArea {
	}
}
/* ↓↓↓ 540px以下 ↓↓↓ */
@media only screen and (max-width: 540px) {
	.photo-text-box2 {
		margin-bottom: 50px;
	}
	.portfolioConts2 div.contsArea {
	}
	
	.photo-text-subBox {
		display: block;
	}
	.photo-text-subBox .musicArea {
		width: 100%;
		padding-right: 0px;
		border-right: none;
	}
	.photo-text-subBox .contsArea {
		width: 100%;
		margin-top: 60px;
		margin-left: 0px;
	}
}
.photo-text-box2 dl.specBox dd:first-of-type {
	margin-top: 0px;
}

/* ↑↑↑ photo-text-box2 ↑↑↑ */




/* ↓↓↓ swiper ↓↓↓ */

.portfolioConts .swiper-container {
    width: 100%;
    /*height: 325px;*/
}
.portfolioConts .swiper-slide {
	/* height: 300px; */
	padding: 0 1px;
	overflow: hidden;
	text-align: center;
	font-size: 18px;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: start;
	-ms-flex-align: flex-start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}
.portfolioConts .swiper-slide img {
	/* width: auto; */
	/* height: auto; */
	/* max-width: 100%; */
	/* max-height: 100%; */
	/* margin-left: auto; */
	width: 100%;
}

.swiper-container-horizontal > .swiper-pagination-bullets {
	bottom: -10px;
}
.swiper-pagination {
	position: absolute;
	margin-top: 0px;
}
.swiper-pagination-bullet {
	width: 5px;
	height: 5px;
	padding: 6px;
	display: inline-block;
	opacity: 0.2;
	background: none;
}
.swiper-pagination-bullet::after {
	content: '';
	display: block;
	width: 5px;
	height: 5px;
	margin-top: -3px;
	margin-left: -3px;
	border-radius: 100%;
	background: #000;
}
.swiper-pagination-bullet-active {
	opacity: 0.4;
	background: none;
}

/* ↑↑↑ swiper ↑↑↑ */



/*
.fadein {
	opacity : 0.1;
    
	transform : translate(0, 200px);
    transition : all 1500ms;
	
}

.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

.fadein.scrollout {
    opacity : 1;
    transform : translate(0, 0);
	transition : all 0ms;
}

.fadein.fadeout {
    opacity : 0;
	transform : translate(0, 0);
}
*/



/* ↓↓↓ ancNav ↓↓↓ */
.ancNavArea {
	position: fixed;
	top: 50%;
	right: -20px;
	z-index: 10;
	transition: 0.7s cubic-bezier(0.6, 0.1, 0.3, 1);
}
.ancNavArea.active {
	right: 20px;
}
.ancNavArea.unSet {
	right: -20px;
}
.ancNavArea.hidden {
	overflow: hidden;
	width: 0;
	height: 0;
}
.ancNav {
	width: 10px;
}
.ancNav li {
	position: relative;
	width: 10px;
	height: 29px;
	/*font-size: 84.6%;
	line-height: 14px;*/
	font-size: 13px;
	line-height: 15px;
}
.ancNav li.hidden {
	overflow: hidden;
	width: 0;
}
.ancNav li a {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	overflow: hidden;
	float: right;
	width: 0;
	padding-left: 10px;
	border-bottom: none;
	background: url(common/img/icon-anc2.png) no-repeat left 0.2em;
	color: #333333 !important;
	white-space: nowrap;
}
.ancNav li.on a,
.ancNav li a:hover {
	background-image: url(common/img/icon-anc_ov2.png);
}
body.ie6 .ancNav li a {
	background-image: url(common/img/icon-anc2.gif);
}
body.ie6 .ancNav li.on a,
body.ie6 .ancNav li a:hover {
	background-image: url(common/img/icon-anc_ov2.gif);
}
.ancNav li a span {
	display: inline-block;
	padding-left: 8px;
}
/* ↑↑↑ ancNav ↑↑↑ */




/* ↓↓↓ audio js ↓↓↓ */

 /*　プレイヤー（再生バー）　*/
.audiojs {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: none;
	overflow: visible;
	font-family: monospace;
	font-size: 12px;  
	-webkit-box-shadow: none;
	-moz-box-shadow: none;  
	-o-box-shadow: none;
	box-shadow: none;
}
/*　再生・停止ボタン　*/
.audiojs .play-pause {
	display: none;
	position: absolute;
	left: -30px;
	top: -6px;
	width: 26px;
	height: 26px;
	padding: 0;
	margin: 0;
	float: none;
	overflow: hidden;
	border: none;
	border-radius: 0px;
}
/*　再生・停止ボタンなどの p 要素　*/
.audiojs p {
  display: none;
  width: 26px;
  height: 26px;
  margin: 0px;
  cursor: pointer;
}
.audiojs .play {
  display: block;
}
/*　進行状態・ロードの状態を表示する部分(グレー)　*/
.audiojs .scrubber {
  position: absolute;
  bottom:0;
  float: none;
  width: 100%;
  height: 100%;
  height: 10px;
  background: none;
  margin: 0px;
  border: none;
  overflow: hidden;
  z-index: 20;
}
/*　進行状態を表示するバーの部分(薄いグレー)　*/
.audiojs .progress {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 0px;
  background: none;
  border-bottom: 1px solid #3A3A3A;
  z-index: 1;  
/* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc),
  color-stop(0.5, #ddd), color-stop(0.51, #ccc), color-stop(1, #ccc));  
  background-image: -moz-linear-gradient(center top, #ccc 0%, #ddd 50%, #ccc 51%, #ccc 
  100%); */
}
/* ロード状態を表示するバーの部分（黒） */
.audiojs .loaded {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 0px; 
  background: none;
  border-bottom: 1px solid #cecece;
/* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222),
  color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222));
  background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222
  100%); */
}
/*　現在の再生時間/総再生時間　フォント　*/
.audiojs .time {
  float: left;
  height: 28px;
  line-height: 28px;
  margin: 0px 0px 0px 8px;
  padding: 0px 0px 0px 0px;
  border-left: none;
  color: #666;
  text-shadow: none;
  display: none;
}
/*　現在の再生時間　フォント　*/
.audiojs .time em {
  padding: 0px 2px 0px 0px;
  color: #666;
  font-style: normal;
  display: none;
}
/*　時間　/の部分　*/
.audiojs .time strong {
  padding: 0px 0px 0px 2px;
  font-weight: normal;
  display: none;
}
.audiojs .error-message {
  float: left;
  display: none;
  margin: 0px 10px;
  height: 26px;
  width: 200px;
  overflow: hidden;
  line-height: 26px;
  white-space: nowrap;
  color: #fff;  
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -icab-text-overflow: ellipsis;
  -khtml-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
}
.audiojs .error-message a {
  color: #eee;
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 1px solid #999;
  white-space: wrap;
}
/*　再生ボタン　*/
.audiojs .play {
  background: url(common/img/play-btn1.png) center center no-repeat;　/* ←playボタン */
  margin-left: 1.45px;
}
/*　読み込み中ボタン　*/
.audiojs .loading {
  /*background: url("$1") center center no-repeat;*/
  display: none;
}
/*　エラーボタン　*/
.audiojs .error {
  /*background: url("$1") center center no-repeat;*/
  display: none;
}
/*　停止ボタン　*/
.audiojs .pause {
  background: url(common/img/pause-btn1.png) center center no-repeat;　/* ←pauseボタン */
}
.playing .play, .playing .loading, .playing .error {
  display: none;
}
.playing .pause {
  display: block;
}
.loading .play, .loading .pause, .loading .error {
  display: none;
}
.loading .loading {
  display: block;
}
.error .time, .error .play, .error .pause, .error .scrubber, .error .loading {
  display: none;
}
.error .error {
  display: block;
}
.error .play-pause p {
  cursor: auto;
}
.error .error-message {
  display: block;
}
/*　再生している曲の情報　*/
.track-details {
  clear: both;
  height: 26px;
  width: 200px;
  padding: 0px 6px;
  background: none;
  color: #3A3A3A;
  font-size: 10px;
  line-height: 26px;
}
.track-details:before {
  content: '';
}

/* ↑↑↑ audio js ↑↑↑ */



/* ↓↓↓ audio js 追加 ↓↓↓ */

/*　再生・停止ボタンなどの p 要素　*/
.audioBtn {
	position: absolute;
	width: 160px;
	height: 90px;
	top: -15px;
	right: 0;
	/* visibility: hidden; */
	filter: alpha(opacity= 0);
    -moz-opacity: 0;
    opacity: 0;
	transition: 0.4s cubic-bezier(0.6, 0.1, 0.3, 1);
}
#audioCenter.on .audioBtn {
	top: -15px;
	visibility: visible;
	filter: alpha(opacity= 100);
    -moz-opacity: 1;
    opacity: 1;
}

.audioBtn p {
	display: none;
	width: 30px;
	height: 30px;
	margin: 0px;
	cursor: pointer;
}
/*　再生ボタン　*/
.audioBtn .play {
	position: absolute;
	top: 30px;
	left: 30px;
	background: url(common/img/audio-play-btn5.svg) center center no-repeat;
}
/*　停止ボタン　*/
.audioBtn .pause {
	position: absolute;
	top: 30px;
	left: 30px;
	background: url(common/img/audio-pause-btn5.svg) center center no-repeat;
}
/*　prev　*/
.audioBtn .prev {
	position: absolute;
	top: 30px;
	left: 0px;
	background: url(common/img/audio-prev-btn5.svg) center center no-repeat;
}
/*　next　*/
.audioBtn .next {
	position: absolute;
	top: 30px;
	left: 60px;
	background: url(common/img/audio-next-btn5.svg) center center no-repeat;
}
/*　prevDisk　*/
.audioBtn .prevDisk {
	position: absolute;
	top: 22px;
	right: -1px;
	width: 15px;
	height: 20px;
	background: #f2f2f2 url(common/img/audio-prevdisc-btn2.svg) center center no-repeat;
	z-index: 100;
}
/*　nextDisk　*/
.audioBtn .nextDisk {
	position: absolute;
	top: 48px;
	right: -1px;
	width: 15px;
	height: 20px;
	background: url(common/img/audio-nextdisc-btn2.svg) center center no-repeat;　/* ←pauseボタン */
}
.audioBtn .play, .audioBtn .prev, .audioBtn .next, .audioBtn .prevDisk, .audioBtn .nextDisk {
	display: block;
}
.playing .play, .playing .loading {
	display: none;
}
.playing .pause {
  display: block;
}


/*　audioCenter　*/
#audioCenter {
	position: relative;
	height: 60px;
	overflow: hidden;
}
#audioCenter .track-details {
	position: absolute;
	top: 64px;
	/* right: 135px; */
	left: 50%;
	margin-left: -25%;
	width: 50%;
	height: 40px;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #000;
	visibility: hidden;
	filter: alpha(opacity= 0);
    -moz-opacity: 0;
    opacity: 0;
	transition: 0.7s cubic-bezier(0.6, 0.1, 0.3, 1);
	
}
#audioCenter.on .track-details {
	top: 14px;
	visibility: visible;
	filter: alpha(opacity= 100);
    -moz-opacity: 1;
    opacity: 1;
}

#audioCenter .audioList {
	filter: alpha(opacity= 0);
    -moz-opacity: 0;
    opacity: 0;
	transition: 0.7s cubic-bezier(0.6, 0.1, 0.3, 1);
}
#audioCenter .audioList.on {
	filter: alpha(opacity= 100);
    -moz-opacity: 1;
    opacity: 1;
}
#audioCenter .audioList img {
	display: none;
	position: absolute;
	top: 12px;
	right: 0px;
	height: 36px;
	transition: 0.7s cubic-bezier(0.6, 0.1, 0.3, 1);
}
#audioCenter.on .audioList img {
	right: 20px;
}
#audioCenter .audioList.on img {
	display: inline;
}
#audioCenter .audioList ul {
	position: fixed;
	top: -999px;
	visibility: hidden;
}

.musicList {
	position: relative;
	margin-top: 5px;
	margin-left: -5px;
	padding: 5px 5px 0 5px;
	cursor: pointer;
	transition: 0.3s cubic-bezier(0.6, 0.1, 0.3, 1);
}
.musicList p {
	position: absolute;
	top: -5px;
	left: -5px;
	width: 30px;
	height: 30px;
	margin: 0px;
	filter: alpha(opacity= 0);
    -moz-opacity: 0;
    opacity: 0;
	transition: 0.3s cubic-bezier(0.6, 0.1, 0.3, 1);
}
.musicList p.play {
	background: url(common/img/play-btn5.svg) center center no-repeat;
}
.musicList p.pause {
	display: none;
	background: url(common/img/pause-btn5.svg) center center no-repeat;
}

.musicList.on {
}
.musicList.on p {
	filter:alpha(opacity= 100);
    -moz-opacity: 1;
    opacity: 1;
}
.musicList.on,
.musicList.playing {
	background: #fff;
}
.musicList.on dt,
.musicList.playing dt {
	filter: alpha(opacity= 0);
    -moz-opacity: 0;
    opacity: 0;
	transition: 0.3s cubic-bezier(0.6, 0.1, 0.3, 1);
}
.musicList.playing p.pause {
	display: block;
	filter:alpha(opacity= 100);
    -moz-opacity: 1;
    opacity: 1;
}




/* ↓↓↓ 740px以下 ↓↓↓ */
@media only screen and (max-width: 740px) {
	#audioCenter {
		height: 50px;
	}
	#audioCenter.on .audioBtn {
		top: -20px;
	}
	#audioCenter .track-details {
		left: 50px;
		margin-left: 0;
		width: calc(100% - 230px);
		text-align: left;
	}
	#audioCenter.on .track-details {
		top: 9px;
	}
	#audioCenter .audioList img {
		top: 7px;
	}
}
/* ↑↑↑ audio js 追加 ↑↑↑ */