@charset "UTF-8";
/*********************************************
	KM MUSIC Inc. Web Site's css

	ー base.css ー

*********************************************/

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

	clearfix

-------------------- */
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}


/*****************************************************/

body {
	line-height: 1.5;
	letter-spacing: 0.1em;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	background-color: #ff9900;
	-moz-box-sizing: border-box;
   	-webkit-box-sizing: border-box;
   	-o-box-sizing: border-box;
   	-ms-box-sizing: border-box;
	box-sizing: border-box;
	word-wrap: break-word; /* 2019.2.26 半角英数字をはみ出さないように */
}

#wrapper {
	width: 1024px;
	margin: 0 auto;
	position: relative;
	background: #fff;
}

#wrapper * {
	box-sizing: border-box;
}

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

	layout

-------------------- */
ul li, ol li {
	list-style-type: none;
}

 /* margin */
.marginTop1 {
	margin-top: 1.00em;
}

/* display */
.displayTable {
	display: table;
}
.displayTableCell {
	display: table-cell;
}

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

	decoration

-------------------- */
a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}


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

	text

-------------------- */
.colorRed { color: red !important; }

.fontBold { font-weight: bold !important; }

.font14 {
	font-size: 0.88em !important; /* 14px */
	padding-top: 0.2em;
}
.font12 { /* 2019.2.28 追加 */
	font-size: 0.75em !important; /* 12px */
	padding-top: 0.2em;
}

.textCenter { text-align: center !important; }


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

	height

----------------------- */
.imgHeight200 { height: 200px !important; }
.imgHeight250 { height: 250px !important; }
.imgHeight300 { height: 300px !important; }

.twitter-timeline { height: 100%!important; }

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

	header

-------------------- */
#wrapper header #headerContainer {
	position: absolute;
	top: 0;
	width: 220px;
	height: 100%;
	background: rgba(255,153,0,0.7);
	color: #fff;
	position: fixed;
	z-index: 2;
}
#wrapper header #headerContainer #headerPc1 {
	padding-top: 10px;
	width: 220px;
	/*height: 340px;*/
	background: rgba(255,153,0,1.0);
	text-align: center;
	line-height: 1.0;
}
/* ロゴ */
#wrapper header #headerContainer #headerPc1 h1 {
	margin: 0;
	padding: 0 10px;
}
#wrapper header #headerContainer #headerPc1 h1 img {
	width: 100%;
}
#wrapper header #headerContainer #headerPc1 h1 a:hover {
	opacity: 0.8;
}
/* navi */
#wrapper header #headerContainer #headerPc1 nav#nav1 {
	margin: 0 25px;
	padding-bottom: 25px;
	border-bottom: solid 1px #ffffcc;
}
#wrapper header #headerContainer #headerPc1 nav#nav1 li {
	padding-top: 25px;
	padding-left: 5px;
	text-align: left;
	font-weight: bold;
	letter-spacing: 0;
}
#wrapper header #headerContainer #headerPc1 nav#nav2 {
	margin: 0 25px;
	padding-bottom: 25px;
}
#wrapper header #headerContainer #headerPc1 nav#nav2 li {
	margin-top: 25px;
	padding-left: 10px;
	text-align: left;
	font-weight: bold;
	line-height: 1.0;
	letter-spacing: 0;
	border-left: 6px solid #fff;
}
#wrapper header #headerContainer #headerPc1 nav#nav2 li p {
	font-size: 0.71em; /* 10px */
	padding-bottom: 0.30em;
}
#wrapper header #headerContainer #headerPc1 nav ul li a {
    color: #fff;
}
#wrapper header #headerContainer #headerPc1 nav ul li a:hover {
	color: rgba(255,244,98,1);
	font-weight: bold;
	text-decoration: none;
}

/* twitter */
#wrapper header #headerContainer #headerPc2 {
	margin: 25px 20px;
	height: 450px;
}
#wrapper header #headerContainer #headerPc2 .twitter-timeline { height: 100%!important; }
#wrapper header #headerContainer #headerPc2 iframe {
  width: 220px !important;
}


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

	main

----------------------- */
main {
	min-height: 1000px;
}


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

	main [section]

----------------------- */
#wrapper main section {
	margin-left: 220px;
	background: #fff;
}
#wrapper main section .container {
	margin: 0 40px;
	padding: 30px 0;
	hanging-punctuation: allow-end;
	position: relative;
}
#wrapper main section .container .contentsTitle {
	border-bottom: 3px solid #eee;
	padding-bottom: 1.4px;
}
#wrapper main section .container .contentsTitle h2 {
	font-family: 'Montserrat', sans-serif;
	font-style: italic;
	font-size: 2.0em; /* 32px */
	color: #ff9900;
	letter-spacing: 0.05em;
	transform: scale( 1.0 , 1.2 );
	border-bottom: 3px solid #ff9900;
	display: inline-block;
}
#wrapper main section .container .contentsTitleJp {
	position: absolute;
	top: 3.4em;
	right: 0;
	color: #CCC;
	font-weight: normal;
	letter-spacing: 0.1em;
}

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

	main [Page Top]

----------------------- */
#page-top {
    position: fixed;
    right: 2em;
    font-size: 0.8em;
	opacity: 0.8;
}
#page-top i {
	display: block;
	color: #fff;
	font-size: 3em;
	text-align: center;
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    /*width: 4em;*/
	padding: 0.5em 1.00em;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}

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

	footer

------------- */
#wrapper footer {
	background: #333;
	color: #fff;
	font-size: 0.86em; /* 12px */
}

#wrapper footer nav {
	width: auto;
	margin-left: 260px;
	margin-right: 40px;
	padding: 1em 0 0.50em;
	border-bottom: 1px solid rgba(255,255,255,0.5);
}
#wrapper footer nav ul {
	text-align: center;
}
#wrapper footer nav ul li {
	display: inline-block;
	padding: 0 1.50em;
	margin-bottom: 0.50em;
	border-right: 1px #fff solid;
}
#wrapper footer nav ul li:last-child {
	border-right: none;
	padding-right: 0;
}
#wrapper footer nav ul li a {
	color: #fff;
}

#wrapper footer #copyright {
	font-size: 0.79em;
	margin-left: 260px;
	margin-right: 40px;
	text-align: center;
	padding: 1em 0;
}

.sp,
.tb {
	display: none !important;
}

/*-- 1005〜1399pxまでのタブレット向け表示に変更 --*/
@media all and (min-width: 1005px) and (max-width: 1399px) {
	.sp {
		display: none !important;
	}

  /* twitter */
  #wrapper header #headerContainer #headerPc2 {
  	margin: 25px 20px;
  	height: 200px;
  }

}


/*-- 1024pxまでスマホ・タブレット向け表示に変更 --*/
@media all and (min-width: 0) and (max-width: 1004px) {

	.sp,
	.tb {
		display: block !important;
	}

	.pc {
		display: none !important;
	}
	#wrapper {
		width: 100%;
	}

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

		header(〜1024px)

	-------------------- */
	#wrapper header #headerContainer {
		width: 100%;
		height: 50px;
	}
	#wrapper header #headerContainer #headerSp {
		padding-top: 0;
		width: auto;
		height: 50px;
		text-align: left;
		background: rgba(255,153,0,1.0);
	}
	/* ロゴ */
	#wrapper header #headerContainer #headerSp h1 {
		margin: 0;
		padding: 0;
	}
	#wrapper header #headerContainer #headerSp h1 img {
		width: auto;
		height: 50px;
	}
	#wrapper header #headerContainer #headerSp h1 a:hover {
		opacity: 1.0;
	}

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

		headerメニュー(〜1024px)　

	-------------------- */
	/** タップ前 **/
	.navToggle {
		display: block;
		position: fixed;    /* bodyに対しての絶対位置指定 */
		right: 13px;
		top: 12px;
		width: 42px;
		height: 45px;
		cursor: pointer;
		z-index: 3;
		/*background: #666;*/
		text-align: center;
	}
	.navToggle span {
		display: block;
		position: absolute;    /* .navToggleに対して */
		width: 30px;
		border-bottom: solid 4px #fff;
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
		left: 6px;
	}
	.navToggle span:nth-child(1) {
		top: 0px;
	}
	.navToggle span:nth-child(2) {
		top: 11px;
	}
	.navToggle span:nth-child(3) {
		top: 23px;
	}

	/** タップした後 **/
	.navToggle.active {
		background: #000;
	}
	/* 最初のspanをマイナス45度に */
	.navToggle.active span:nth-child(1) {
		top: 18px;
		left: 6px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	/* 2番目と3番目のspanを45度に */
	.navToggle.active span:nth-child(2),
	.navToggle.active span:nth-child(3) {
		top: 18px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	/** メニューリスト **/
	nav.globalMenuSp {
		position: fixed;
		z-index: 2;
		top: 0;
		left: 0;
		text-align: left;
		transform: translateY(-100%);
		transition: all 0.6s;
		width: 100%;
	}

	nav.globalMenuSp ul {
		background: rgba(0, 0, 0, 0.8);
		margin: 0 auto;
		padding: 0;
		width: 100%;
	}

	nav.globalMenuSp ul li {
		font-size: 1.1em;
		list-style-type: none;
		padding-left: 2.00em;
		width: 100%;
		border-bottom: 1px dotted #000;
	}

	/* 最後はラインを描かない */
	nav.globalMenuSp ul li:last-child {
		padding-bottom: 1.00em;
		border-bottom: none;
	}

	nav.globalMenuSp ul li a {
		display: block;
		color: #fff;
		font-weight: bold;
		padding: 1em 0;
	}

	/* このクラスを、jQueryで付与・削除する */
	nav.globalMenuSp.active {
		transform: translateY(0%);
	}

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

		main

	----------------------- */
	main {
		min-height: inherit;
		width: 100%;
		margin-bottom: 3em;
	}

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

		main [section](〜1024px)

	----------------------- */
	#wrapper main section {
		margin-left: 0;
	}
	#wrapper main section .container {
		margin: 0 1.25em;
		padding: 1.00em 0;
	}
	#wrapper main section .container .contentsTitle {
		padding-bottom: 1.0px;
	}
	#wrapper main section .container .contentsTitle h2 {
		font-size: 1.31em; /* 18px */
		line-height: 1.8;
	}
	#wrapper main section .container .contentsTitleJp {
		position: inherit;
		top: 0.5em;
		right: 0;
		color: #CCC;
		font-weight: bold;
	}



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

		main [Page Top](〜1024px)

	----------------------- */
	#page-top {
		right: 0.5em;
	}

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

		footer(〜1024px)　

	------------- */
	#wrapper footer {
		font-size: 0.75em; /* 12px */
	}

	#wrapper footer nav {
		width: auto;
		margin-left: 1.00em;
		margin-right: 1.00em;
	}
	#wrapper footer nav ul li {
		padding: 0 1.00em;
	}

	#wrapper footer #copyright {
		font-size: 0.79em;
		margin-left: 2.00em;
		margin-right: 2.00em;
		text-align: center;
		padding: 1em 0;
	}

}

/*********************************************

 1024pxまでスマホ・タブレット向け表示に変更

**********************************************/
@media all and (min-width: 768px) and (max-width: 1004px) {

	.sp {
		display: block !important;
	}

	.pc {
		display: none !important;
	}
	#wrapper {
		width: 100%;
	}
}