@charset "utf-8";

html {
	font-size: 62.5%;
}
body {
	margin: 0; /*ページの余白なくし*/
#	text-align: center;
#	font-family: "Hiragino sans W2", "Hiragino Maru Gothic ProN", "Tsukushi A Round Gothic","筑紫A丸ゴシック", Meiryo, sans-serif;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-size: 16px;
	font-size: 1.6rem;
#	border: 1px solid #000000;
}

a:link	{color: blue;}
a:visited {color: purple;}
a:active {color: red;}

#wrapper {
#	max-width: 1282px;
#	margin: 0 auto;
#	border: 1px solid #000000;
}
nav {
	background: #000000;
#	box-shadow: 0px 3px 10px rgba(0,0,0,0.6);
	position: fixed;
	width: 100%;
#	border-bottom: 1px solid #ebebeb;
#	position: relative; /*ボックスの重なる順番指定。ボックスの影が下のボックスに乗るように。*/
	z-index: 1999;
}
.logo small {color:#a9bc56;FONT-SIZE:1.6rem;FONT-WEIGHT: normal;}

.top-image00 {display: block; padding-top: 44px;}
.top-image00 img{width: 100%; display: block;}
.top-image1 {display: none;}

.menu-bar {
	list-style: none;/*リストのマーカー消し*/
	margin: 0;/*リストのマーカー余白消し*/
	padding: 0;/*リストのマーカー余白消し*/
	display: flex;
#	border: 1px solid #000000;
}
/*.menu-bar li {flex: 1;}*/

.menu-bar a {
	margin: 0px;
#	border-radius: 3px;
	background: #000000;
	color: #fff;
	display: block;
	padding: 10px;
	transition: all 0.5s ease-out;
	text-decoration: none;
#	border: 1px solid #ffffff;
}
.menu-bar .logo {
	margin-left: 30px;
#	background: #4584b1;
	color: #FFFFFF;
	font-weight: bold;
}
.menu-bar li:first-child {margin-right: auto;}
.menu-bar a:hover {background: #F3F3F3;color: #000000;}
.menu-bar .logo:hover {background: #000000;color: #74A1CD;}
.menu-bar .mf7 a {margin-top: 1px; margin-right: 5px; margin-left: 5px; padding: 6.5px;}/*ツイッターロゴの位置設定*/
/*.menu-bar .mf7 a:hover {background: url("twitter-logo-blue1.png"); margin-top: 1px; margin-right: 5px; margin-left: 5px; padding: 6.5px;}*/

.space {
	display: none;
	padding-top: 10px;
	text-align: center;
#	border: 3px solid blue;
}
.space h1 {
#	border: 1px solid #000000;
	font-size: 2.0rem;
	margin: 5px;
	color: #898989;
}

.main {
#	border: 1px solid #000000;
	background: #FFFFFF;
}

.links a:hover img{border: 1px solid #30d00e;}

.block-0, .block-1, .block-2, .block-10 {
	display: flex;
	flex-wrap: wrap;
#	border: 3px solid #000000;
	margin: 0px 0px;
}

.block-0 section {
#	width: 250px;
	width: 210px;
#	height: 210px;
	margin: 8px;
	border-radius: 13px;
	background: rgba(185, 246, 34, 0.28);
	padding: 25px;
	padding-top: 15px;
#	box-shadow: 3px 5px 8px rgba(0,0,0,0.3);
	border: 1px solid #d3d3d3;
#	flex: 1;
	flex-direction: column;
	display: flex;
}
.block-1 section {
	margin: 5px;
	border-radius: 3px;
#	background-image: linear-gradient(#E3E77B, #DBC253);
#	background: #F5F0CF;/*元の色*/
#	background: #E3E681;/*少し濃い*/
#	background: #F6F3BE;
	background: rgba(185, 246, 34, 0.28);
	padding: 15px;
	flex: 1;/*sectionを等間隔に*/
	flex-direction: column;/*section中身を上から下に配置*/
	display: flex;
}
.block-2 section {
#	margin: 8px;
#	border-radius: 23px;
	background: rgba(69, 255, 172, 0.23);
	padding: 25px;
	flex: 1;
#	border-bottom: 1px solid green;
#	box-shadow: 3px 5px 8px rgba(0,0,0,0.3);
#	flex-direction: column;
#	display: flex;
}

.main h1 {
	margin: 5px 0px;
#	color: #E6AC27;
	color: #3D3D3D;
	font-size: 2.0rem;
	font-weight: 400;
	border-bottom: 1px solid #898989;
#	padding-bottom: 10px;
#	border: 1px solid #000000;
}
.main p {
	margin-top: 10px;
	margin-bottom: 8px;
#	border: 1px solid #000000;
}

.block-10 section {
	margin: 5px;
	border: 1px solid #1d1d1d;
#	border-radius: 10px;
#	box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.3);
	background: #e84382;
#	padding: 15px;
	flex: 1;/*sectionを等間隔に*/
	flex-direction: column;/*section中身を上から下に配置*/
	display: flex;
}

.item-4 h1, .item-5 h1, .item-4 p, .item-5 p {
	color: #ffffff;
}
.item-4 h1, .item-5 h1 {
	padding-bottom: 4px;
	border-bottom: 3px solid #ffffff;
	font-weight: bold
}
.block-10 a {
	padding: 25px;
	transition: all 0.5s ease-out;
	text-decoration: none;
}
.block-10 a:hover {
	background: rgba(255,255,255,0.4);
}

.links {
	width: 100%;
	margin: 10px 0 10px;
	text-align: center;
#	background: #000;
	order: 2;  
}
section img {
	width: 100%;
	border-radius: 20px;
	box-shadow: 5px 5px 20px rgba(0,0,0,0.4);
}
section small {color: #3d3d3d;}

.block-2 audio {min-width: 90%;}
.block-0 audio {width: 80%;padding-top: 5px;}

.item-s1 .box{
#	border: 2px solid red;
	display: flex;
}
.box .saga {
#	border: 1px solid #000000;
	flex: 1;
	margin-right: 20px;
}
.block-0 .item-a1 {flex: 1;}
.block-0 .item-a2 {flex: 2;}
.block-0 .item-a3 {flex: 1;}
.block-0 .item-w1, .block-0 .item-w2, .block-0 .item-w3, .block-0 .item-w4, .block-0 .item-w5, .block-0 .item-w6, .item-w7, .item-w8, .item-w9, .item-w10, .item-w11, .item-w12 {flex: 1;}

/*サウンドクラウド設定*/
.sc {
	display: flex;
	margin: 10px 5px 5px;
	padding: 5px;
#	border: 1px solid #000;
}
iframe {
	flex: 1;
	margin: 30px;
}

/*CD設定*/
.cd {
	margin: 20px auto;
	border: 1px solid #d3d3d3;
	border-radius: 8px;
	width: 590px;
	background: #f5f5f5;
}
.main .cd-a {
	display: flex;
	text-decoration: none;
	color: #000000;
}
.aco-1 {
	width:160px;
	height: 160px;
}
.aco-1 img {
	width: 160px;
	height: 160px;
	border-radius: 8px;
}
.aco-2 {
	width: 420px;
	padding-left: 10px;
	font-size: 14px;
	border-left: 1px solid  #d3d3d3;
}
.aco-2 h3 {
	margin: 10px 5px 3px;
}
.aco-2 p {
	margin: 5px 5px 8px;
}
.cd:hover {
	border: 1px solid #898989;
	border-radius: 8px;
	color: #000000;
}
.aco-2:hover {
	border-left: 1px solid #898989;
}

/*リンク設定*/
.block-link {
	display: flex;
	flex-wrap: wrap;
#	border: 1px solid red;
}
.btn-1 a {
	display: block;
	margin: 10px 5px 0px;
	width: 240px;
	padding: 15px;
	background: #000022;
	text-align: center;
	border-radius: 6px 6px 0px 0px;
	text-decoration: none;
	color: #fff;
	font-size: 1.4rem;
}
.btn-2 a {
	display: block;
	margin: 0px 5px 0px;
#	width: 300px;
	padding: 8px;
	background: #69A5C7;
	text-align: center;
	border-radius: 0px 0px 6px 6px;
	text-decoration: none;
	color: #fff;
	font-size: 1.4rem;
	font-weight: bold;
}
.block-link a:hover {
	background: red;
}

/*フッター設定*/
footer {
	border: 1px solid #f3f3f3;
	background: #f3f3f3;
}
footer p {color: #8d8d8d;text-align:center;}

.end-m {
#	border: 1px solid #000000;
	list-style: none;
	margin-top: 15px;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.end-m a {padding: 3px;}

.access {text-align: center;}
.access img {width: 50px;}

/*スマホ用のメニューバ内の文字表示。PCでは表示しない設定*/
.menu_title {
	display:none; 
#	visibility:hidden;
}


@media screen and (max-width: 700px) {
	.menu-bar {
	    flex-direction: column;
    }
    .block-0, .block-1, .block-10, .block-2 .box {
	    flex-direction: column;
    }
    .block-0 section {width: auto;}
    .block-link {justify-content: center;}
    /*スマホ用のメニューバー内の文字表示設定*/
    .menu_title {
	    display: block;
	    position:relative;
	    float:right;
	    height: 0em;
	    bottom:3.55rem;
	    margin-right:5.5rem;/*ライト配置用*/
	    color: #f3f3f3;
#	    font-size: 1.8rem;
	    font-weight: bold;
    }
    .menu-title small {color:#a9bc56;FONT-SIZE:1.6rem;FONT-WEIGHT: normal;}
    .menu_title a {color: #F3F3F3; font-weight: bold; text-decoration: none;}
    .top-image00 {display: none;}
    .top-image1 {display: block; padding-top: 46px;}
    .top-image1 img {width: 100%; display: block;}
    /*.space {padding-top: 55px;}*/
.sc {flex-direction: column; justify-content: center;}
}

@media screen and (max-width:600px) {
    .cd {margin:15px; width: auto;}
    .aco-1 img {width: 100%; height: 100%; border: 1px solid #d3d3d3;}
    .cd-a {flex-direction: column;}
    .aco-2 {width: auto; border: none;}
}