@charset "utf-8";

ul {list-style:none}
img {vertical-align: middle;}
a { word-break: break-all; }

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

* { margin: 0; padding: 0; line-height:1.8em; font-size: 15px;}
ul {list-style:none}
img {vertical-align: middle;}

	/* 959px以下に適用されるCSS（タブレット用） */
* { margin: 0; padding: 0; line-height:1.5em; font-size: 16px;
	font-family: 'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Osaka', 'ＭＳ Ｐゴシック', sans-serif;}

html, body {
	background: url(../template/sp/sp_bg.jpg) no-repeat #fff;
}
.sp {
                                display: block;
}

img {
                                max-width: 100%;
}
img.photoframe {
                                display: block;
                                margin: 0 auto;
}
.migi {
	float: none;
	margin: 0 auto 1em;
}
.hidari {
	float: none;
	margin: 0 auto 1em;
}
img.migi {
	float: none;
	margin: 0 auto 1em;
}

#base {
	width: auto;
                                margin: 0 auto;
}
#main {
	width: auto;
	padding: 0 0 2em;
	background: none;
	text-align: left;
	min-height: auto;
}
#mainMasatoshi {
	width: auto;
	padding: 0 0 2em 0;
	background: url(../template/masatoshibg.jpg) no-repeat #fff;
	text-align: left;
}
#mainHiroko {
	width: auto;
	padding: 0 0 2em 0;
	background: url(../template/hirokobg.jpg) no-repeat #fff;
	text-align: left;
}
#mainMariko {
	width: auto;
	padding: 0 0 2em 0;
	background: url(../template/marikobg.jpg) no-repeat #fff;
	text-align: left;
}
#mainMasatoshi header h1,#mainHiroko header h1,#mainMariko header h1 {
                                margin: 0 0 160px;
}


header h1 {
                                display: block;
                                margin: 0 auto;
                                padding: 1.5rem 25vw 0;
}


main {
                                padding: 0 1.5rem;
                                min-height: 100vw;
}

#wrapp {
	margin: 0 auto 0;
	width: auto;
	text-align: left;
}

.content {
	margin: 0 auto;
	width: auto;
}
.mijikame {
	min-height: 300px;
}


/* 表紙　==================================*/

#index_header {
	width: auto;
	padding: 0;
	background: url(../template/sp/sp_bg.jpg) no-repeat #fff;
}
#index_header h1 {
	width: auto;
	padding: 5px 38px 0;
}
.index_header_sp {
                                padding: 20px;
                                text-align: center;
}
.index_photo {
                                margin: -50px 0 0;
}

dl#top {
	width: auto;
	height: auto;
	padding: 0;
                                margin: -50px 15px 2rem;
}

#IndexContent {
	margin: 0 auto;
	list-style: none;
                                padding:0;
}

#IndexContent div.index_block {
	margin: 0 auto 1rem;
                                width: auto;
                                padding: 2rem 0;
	border-top: 1px solid #deb1d2;
}
#IndexContent div.index_block img {
	display: block;
	margin: 0 auto;
}
#IndexContent div.LeftContents {
	margin: 0 auto;
                                width: 100%;
                                text-align: center;
}
#IndexContent div.LeftContents img {
	margin: 0 auto;
}
#index_mariko {
                                order: 3;
}
#index_center {
                                order: 2;
}
.single_info {
	margin: 3rem auto;
                                text-align: center;
	border-top: 1px solid #deb1d2;
                                padding: 0;
}


div#index_essay {
	margin: 0;
                                flex: none;
                                order: 1;
}
#index_facebook {
                                margin: 0 auto 2rem;
                                padding: 0;
                                min-height: 480px;
                                width: auto;
}
div.yuran {
                                margin: 0 auto;
                                text-align: center;
                                max-width: 286px
}

div.yuran img {
                                margin: 0 auto;
                                max-width: 280px
}


#IndexBottomContent {
	margin: 0;
	width: auto;
                                display: block;
}
#IndexBottomContent div.BottomContents {
	float: none;
	width: auto;
	min-height: auto;
	padding-top: 0;
	padding: 2rem 0;
	margin: 0 auto;
	display: block;
}
#IndexBottomContent div.bottom_jacket {
	margin: 0 auto 1rem;
}
#IndexBottomContent div.bottom_txt {
	margin: 0 15px;
	width: auto;
}

footer, footer#footerAll {
	width: auto;
	height: auto;
	padding: 0 30px 50px;
	margin: 0 auto;
                                background-size: 100%
}
#pagetop {
	margin: 0 auto;
	padding: 5px 0;
	width: auto;
	border-top: 1px solid #deb1d2;
	text-align: right;
}
small {
	padding: 10px 0 0 0;
	width: auto;
	margin: 0 auto;
}
footer#footerAll small {
	padding: 10px 0 0 0;
	border-top: 1px solid #deb1d2;
	width: auto;
	margin: 0 auto;
	font-size: smaller;
	line-height: 1;
	text-align: left;
}

div.infoCont {
	margin: 0 auto;
	line-height: 1.8em;
}
#IndexContent div.essay div.infoCont {
	margin: 0 auto;
}

/* エッセイ　==================================*/
pre {
                                white-space: normal;
                                text-align: justify;
                                margin: 1rem auto;
}
pre img.photoframe {
                                margin: 1rem auto;
                                display: block;
}
.essayTitle {
	width: auto;
	height: auto;
	margin: 44px 0 2em 0;
                                padding: 0 0 70px;
                                position: relative;
}
.essayTitle h1 {
	margin: 0;
}
.essayIco {
	float: none;
	margin: 0;
                                position: absolute;
                                bottom: 1px; right: 0;
}

#navbar {
	text-align: left;
	line-height: 25px;
	margin: 20px auto 0; 
	width: auto;
	height: auto;
}
#navbar dl {
	clear: both;
	margin: 0; 
	background: url(../template/nav.jpg) no-repeat;
}
#navbar dt {
	width: auto;
	height: 25px;
	padding: 3px 0 0 15px;
	background: url(../template/nav.jpg) no-repeat;
}
#navbar dd {
	float: none;
	margin: 0;
	text-align: right;
	height: 25px;
	padding: 3px 15px 0 0;
	background: url(../template/nav.jpg) right top-repeat;
}

dl.listIndex {
	width: auto;
	min-height: 500px;
}
dl.listIndex dt {
	margin: 2rem 0 0 0;
	width: auto;
	height: auto;
}
dl.listIndex dd {
	margin: 1rem 0 0;
	width: auto;
}
dl.listIndex dd h1 {
	text-align: center;
}


/* インフォメーション　==================================*/
.header .title {
	float: none;
	text-align: left;
}
ul.info li {
	margin: 0 0 2rem;
	border-bottom: 1px #dca293 dashed;
}
ul.info li h1 {
	font-size: 5vw;
	padding: 5px 0 3px 0;
}
dl.info {
                                margin: 2rem auto;
                                
}
dl.info dt {
	width: auto;
	height: auto;
	text-align: left;
                                display: block;
}
dl.info dd {
	margin: 0 0 1rem;
}

/* プロフィール　ディスコグラフィー===========================*/
.prof_photo {
	float: none;
                                margin: 0 auto 1rem;
                                text-align: center;
}

ul.profile {
	list-style: none;
	margin: 0 0 2em;
                                text-align: center;
}

table.list {
	width: 95%;
                                margin: 0 auto
}
table.list th {
	text-align: center;
}
table.list th,
table.list tr,
table.list td {
	display: inline-block;
}


}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
}