@charset "utf-8";
@import url("column.css");

/* ===================================================================
 * 此処に集うすべてのエネルギーが応援です。
 　夢たちによって自在に編み出される次元が一つ。ここから始まる*:･'ﾟ☆
=================================================================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin:0;
   padding:0;
   border:0;
   font-size:100%;
   font:inherit;
   vertical-align:baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, main, menu, nav, section {
   display:block;
}

ol, ul { list-style:none; display:inline-block}
blockquote, q { quotes:none;}
textarea, img, video, audio { max-width: 100%; }

blockquote:before, blockquote:after,
q:before, q:after {
   content:'';
   content:none;
}
table {
   border-collapse:collapse;
   border-spacing:0;
   border:1px solid #999;
   margin-bottom:20px;
   max-width:100%;
}
td {
   border:1px solid #999; padding:5px;
}

/* INDEX ---------------------
 *  1. Default Style
 *  2. Link Style
 *  3. Structure Module
 *  4. Header Module
 *  5. Contents Module
 *  6. Sidemenu Module
 *  7. Footer Module
 *  8. Social Media
 */

/*================================================
 * 1. Default Style
 ================================================*/
html,body {
	overflow-x:hidden;
	font-size:14px;
	font-family: fantasy , "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	}
td { font-family: "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.center {text-align:center;}
.centering { margin-left:auto; margin-right:auto; width:80%;}
.left {text-align:left;}
.big {font-size: 120%;}
.small {font-size: 77%; font-weight: normal;}
.wing {font-family:Wingdings;}
.red {color:#b31; font-weight: bold;}
.green {color:#391; font-weight: bold;}
.black {color:#555;}
.star {color:#881;}
.up { background:transparent url(../images/up.gif) 100% 30% no-repeat; padding-right:16px;}
.f_left {float:left; margin-right:10px;}
.f_right {float:right; }
.m0 {margin-top:0px!important;}
.clear {clear:both;}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}
.border {border:solid 1px; color:#555;}
blockquote {font-family:"ＭＳ Ｐゴシック", "MS PGothic";}
iframe {max-width:100%;}

/*================================================
 * 2. Link Style
 ================================================*/
a,a img {-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	-o-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
	}
a { color:#000; position:relative; z-index:1; text-decoration:none;}
input { position:relative; z-index:1; }
a:hover,a:active { color:#453014; text-decoration:underline;}
main a, article a, #side a, footer a { color:#453014; text-decoration:underline; }
main a:hover, article a:hover,#side a:hover,footer a:hover { color:#773014; text-decoration:none; }

#social a:hover ,a:hover img ,a:active img { position:relative; top:1px; left:1px;}
.linktable a img {-webkit-transition: 0s ease-in-out;
	-moz-transition: 0s ease-in-out;
	-o-transition: 0s ease-in-out;
	transition: 0s ease-in-out;
	}

/*================================================
 * 3. Structure Module
 ================================================*/
#container { max-width:960px; margin:0 auto; }
header {width:100%; max-width:960px; margin:0 auto -186px; height:186px;
	position:fixed;z-index:2; top:0;
	background:#fff url(../images/0-back.png) 50% -69px no-repeat;
	background:url(../images/0-back.png) 50% -69px no-repeat, url(../images/l-san.png) 0 -30px no-repeat;
	background-color:rgba(255, 255,255, 1.0);
	}
#gallery {width:100%; max-width:960px; height:404px; margin:0 -12.5%; padding:0 12.5%;
	position:fixed; top:0;
	background:transparent url(../images/0-back.png) 50% -69px no-repeat;
	background-color:rgba(255,255,255, 0.0);
	}
#contents {width:100%; max-width:960px; margin:0 -12.5%; padding:170px 12.5% 0;
	background:#fff url(../images/0-side.png) 50% 0 repeat-y; overflow:hidden;
	background-size:1198px auto;
	min-height:400px;
	}

/*ﾒｲﾝ空間　幅の設定*/

main { float:left; width:61%; padding:40px 8% 0 8%; margin:0 0 250px; }
main.column1 { float:none; width:84%; padding:40px 8% 0 8%; margin:0 0 250px; }
#side { float:right; width:20%; margin:68px 2% 250px 0; padding:0 0; text-align:center; position:relative;z-index:1; }
footer { width:100%; clear:both; text-align:center; height:360px;
	margin:-250px -12.5% 0px; padding:0 12.5% 40px; position:relative;z-index:0;
	background:transparent url(../images/0-back.png) 50% -530px no-repeat;
	position:relative;
	}

#contents:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}



/*================================================
 * 4. Header Module
 ================================================*/
h1#title a { margin:28px 0 0 20px; font-weight:bold;
	display:inline-block; font-size:32px;
	color:#320; font-family: 'Sofia', cursive ,serif;
	text-shadow:3px 3px 6px #9fa;
	}
h1#title a span {color:#320; text-shadow:2px 2px 5px #fb8; margin:0 12px 0 0;}
h1#title a:hover { position:relative; text-decoration:none; text-shadow:3px 3px 16px #3c9,-3px -3px 16px #cf3;}

#headermenu {position:relative;}
#headermenu input { display:none;}

#headermenu ul { padding-left:40px; margin-top:15px;}
#headermenu li { display: inline-block; list-style-type:none;}
#headermenu li a { display:inline-block; height:60px; width:80px; text-indent:-9999px; }

a.blog { background:url(../images/icon-blog.png) 50% 0% no-repeat;}
a.material { background:url(../images/icon-material.png) 50% 0% no-repeat;}
a.story { background:url(../images/icon-story.png) 50% 0% no-repeat;}
a.memo { background:url(../images/icon-memo.png) 50% 0% no-repeat;}
a.mail { background:url(../images/icon-mail.png) 50% 0% no-repeat;}
a.link { background:url(../images/icon-link.png) 50% 0% no-repeat;}
a.odori { background:url(../images/icon-odori.png) 50% 0% no-repeat; background-size:44px auto;}

#headermenu a { display:inline-block; margin-bottom:20px; }
#headermenu a:after { display:inline-block; font-size:80%; position:relative; top:33px; text-align:center; width:100%;}
#headermenu a.blog:after { content:"《Blog》"; }
#headermenu a.material:after { content:"《素材》"; }
#headermenu a.story:after { content:"《物語》"; }
#headermenu a.memo:after { content:"《メモ》"; }
#headermenu a.mail:after { content:"《連絡》"; }
#headermenu a.link:after { content:"《特設》"; }

#headermenu li a:hover,.menulist dt a  { background-position: 50% 100%; text-decoration:none;}

#breadcrumb { font-size:92%; text-align:right; margin:53px 0 0 auto; list-style:none; display:block;}
main.column1 #breadcrumb { text-align:left; }
#breadcrumb li {display:inline-block; margin:0; line-height:12px;}
#breadcrumb li:after { content: ">>"; margin:0 4px; }
#breadcrumb li:last-child:after { content: ""; display: none; }

/*================================================
 * 5. Contents Module
 ================================================*/
main h1,article h1 
	{
	font-size:150%; text-align: center;
	color:#293; font-weight: 900;
	letter-spacing:1px;
	margin:30px 0; line-height:40px;
	font-family: 'Sofia', cursive ,serif;
	width:100%; background:url(../images/hr.png) 50% 100% no-repeat;
	padding:10px 0;
	}
main h1:first-letter, article h1:first-letter { font-size:180%; color:#048; }
main h2:first-letter { font-size:160%; color:#273; }
main h3:first-letter { font-size:140%; color:#123; letter-spacing:2px;}
main h2 {
   color:#550;
   font-size:130%;
   letter-spacing:6px;
   font-weight:900;
   margin:7% 0 10px;
   padding:10px 0 3px 28px;
   line-height:25px;
   background:url(../images/kanban.gif) 0% 50% no-repeat;
   border-bottom:1px solid #666;/*  ﾗｲﾝ設定　doubleダブル */
}
h1 + h2 {
   margin-top:-5px;
}

main h3 {
   font-size:120%;
   letter-spacing:1px;
   color:#350;
   font-weight:bold;
   margin:7% 0 7px;
   background:url(../images/bg_h3.png) 0% 50% no-repeat;
   padding:0 0 3px 24px;
   border-bottom:1px dashed #aaa;/*  ﾗｲﾝ設定 */
}

main h4 {
   font-size:120%;
   letter-spacing:1px;
   font-weight:bold;
   color:#885400;
   margin:30px 0 5px;
   padding:5px 0;
   border-bottom:1px dashed #aaa;/*  ﾗｲﾝ設定 */
}


main p
	{
	color:#777777;
	line-height:150%; text-align: left;
	padding-bottom: 15px; 
	}
main ul {list-style-type:square;}
main ol {list-style-type:decimal;}
main li {margin-left:20px;}
main textarea, main input {position:relative;}


.hidden_box label { margin:10px 0; padding:10px; font-weight:bold; border:solid 1px black; cursor:pointer; display:inline-block; border-radius:16px;}
.hidden_box label:hover {background:#293; color:#fff}
.hidden_box input {display:none;}
.hidden_box .hidden_show {height:0; overflow:hidden; opacity:0; transition:0.8s;}
.hidden_box input:checked ~ .hidden_show {height:auto; opacity:1;}

.hidden_box label:before {display:inline-block; content: '▶'; padding-right:10px; transition:0.2s;}
.hidden_box label:hover:before { content: '❁'; }
.hidden_box input:checked ~ label:before {  content: '▼'; transform:rotate(360deg); }


dl  { margin:5px 0 20px; width:100%;}
dt {
	clear:both;
	font-weight:bold;
	line-height:150%;
	padding:5px 0 0; 
	color:#660; 
}
main dt {float:left;}
dd {
	line-height:150%; padding-top:5px; 
}
dd:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}
dd a {margin:0 1%;}

.menulist dt {float:left;}
.menulist dt a { display:inline-block; height:80px; width:80px; border:1px solid #aaa; border-radius:100%; padding:8px 5px 2px; margin-right:15px; text-align:center; background-position:50% 20px; font-size:95%;}
.menulist dt a.odori { background-position:50% 30px;}
.menulist dd {
	margin:2% 0;
	padding: 5px 0px 5px 7.7em;
	line-height:160%;
}
.menulist a {font-size:110%; line-height:110%;} 






main aside { margin-top:5px; padding-top:20px; }
.imgtop {border-radius:16px;}

blockquote{
	border-left:5px solid #ddd;
	background: #eee;
	padding: 10px;
	margin:20px 0;
	font-style:italic;
	}

a.dl { font-weight:bold; text-decoration:none; padding:4px 15px;
	line-height:20px;
	color:#fff;
	display:block;
	width:200px;
	margin:10px auto;
	border-radius:5px;
	border:4px double #db5f32;
	background:#eb6f42;
	background:-webkit-gradient(linear, left top, left bottom, from(#eac345), to(#db3f22));
	background:-moz-linear-gradient(#eac345, #db3f22) repeat scroll 0 0 transparent;
	background:-o-linear-gradient(#eac345, #db3f22) repeat scroll 0 0 transparent;
	}
a.dl:hover {
	cursor:pointer;
	padding-left:32px;
	color:#555;
	background:#ddec0a url(../images/dl.png) 8px 50% no-repeat;
	background:-webkit-gradient(linear, left top, left bottom, from(#f2fa75), to(#7dac0a)) url(../images/dl.png) 8px 50% no-repeat;
	background:-moz-linear-gradient(#f2fa75, #7dac0a) url(../images/dl.png) 8px 50% no-repeat;
	background:-o-linear-gradient(#f2fa75, #7dac0a) url(../images/dl.png) 8px 50% no-repeat;
	}
	
/*================================================
 * 6. Sidemenu Module
 ================================================*/
#side {
	border:double 1px #000;
	font-family:fantasy;
	background-color:#fff;
	opacity:0.90;
	border-radius: 8px;
	}
aside#side div {margin:0 auto;}

#side h2{
	background: rgba(0,0,0,1);
	margin:10px 0;
	font-size:120%;
	font-weight:bold;
	padding:5px 0 3px 10px;
	color:#ffc;
	}

#side h2:first-child { margin:0 0 10px; border-radius:8px 8px 0 0;}

/* 更新履歴 */
dl.rss {width:96%;
	height:164px;
	margin:-10px 0 10px;
	padding:7px 2%;
	border-bottom:1px inset #ccc; 
	overflow-x:hidden; overflow-y:scroll;
}
dl.rss dt { padding:2px 0; font-size:11px; font-weight:bold; color:#660; background:none; }
dl.rss dd { margin-bottom:6px; 	padding: 5px; font-size:95%; border-bottom:1px solid #ccc;}

#side li:first-child h2{margin-top:0;}
	
#side h3 {
   text-align:center;
   font-size:110%;
   line-height:28px;
   letter-spacing:2px;
   color:#625200;
}
#side ul{text-align:left; margin:10px 0 25px 10px; font-size:110%;}
#side ul ul{ margin:0 0 0 5px; font-size:95%;}
#side ul ul li:last-child{ margin-bottom:5px;}
#side ul li { background:url("../images/bg_arrow.gif") 0px 6px no-repeat; line-height:170%; padding:0 0 0 15px;}
#side ul span {font-style:normal; color:#555; font-size:90%;}
aside ul {margin-top:10px;}

span.prof {
    background:url(../bnr_folder/akino.jpg) 50% 0% no-repeat;
    display:block; width:150px; background-size:100%;
    margin:0 0 10px; border-radius:16px; border:1px solid #ccc;
    max-width:90%;
}
#side span.prof { margin:0 auto 10px; }
span.prof:after {
	padding-top: 100%; /* width:150px height:150px */
	display: block;
	content: '';
}
#side #proftext:after {width:96%; margin:10px auto; display:block; font-size:80%; content:"《Linux + REAPER》でBGMを創作。ご依頼等はお問い合わせください。"; }

/*================================================
 * 7. Footer Module
 ================================================*/
#totop {clear:both; text-align:center; margin:0 auto; padding-top:50px;}
ul#footmenu {clear:both; text-align:center; margin:0 auto 30px; padding:100px 0 0; position:relative;right:20px; font-weight:bold; }
ul#footmenu li { display:inline; color:#aaa; padding-left:2px;}
ul#footmenu li:first-child:before {
	content:"｜";
	margin-right:1%;
}
ul#footmenu li:after {
	content:"｜";
	margin-left:1%;
}
#copyright {
	width:auto;
	text-align:center;
	max-width:960px;
	width:100%;
	margin:0 auto;
	position:absolute;
	bottom:60px;
	color:#6E6966;
	font-family: 'Sofia', cursive ,serif;
	font-size:100%;
}


/* 8. Social Media
 ================================================*/

.social { margin:20px 0; 
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
    -webkit-box-align: center;
    -moz-flex-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-flex-pack: center;
    -ms-flex-pack: center;
    justify-content: center
    }
.socialleft { margin:30px 0;
	-webkit-box-align: start;
    -moz-flex-align: flex-start;
    -ms-flex-align: flex-start;
    -webkit-box-pack: start;
    	justify-content: flex-start;
}

.btn-tw, .btn-fb {
    position:relative;
    display: inline-block;
    border-radius: 50%;
    margin-left: 1em;
    width: 36px;
    height: 36px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    align-items: center;
}
.btn-tw:first-child, .btn-fb:first-child { margin-left: 0; }
.btn-tw svg, .btn-fb svg {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.btn-tw span, .btn-fb span { position:absolute; left:50px; bottom:2px; white-space: nowrap; text-decoration:underline; font-size:110%;}

@media(min-width:768px){.btn-tw, .btn-fb {
        width: 40px;
        height: 40px
    }
}

.btn-tw { background-color: #55acee; }
.btn-tw:hover {background-color: #44ac00;}

.btn-fb { background-color: #3b5998; }
.btn-fb:hover { background-color: #005940; }


a.message {vertical-align:7px; padding:18px 10px 0px 35px; display:block;
	background:url("../images/bookmark.gif") 0% 0% no-repeat; height:30px;
	color:#777; font-weight:bold; text-decoration:none;}



/*================================================
* 9. ヘッダー固定解除
================================================*/
.column header, .column #gallery {position:absolute;}
/*
header,#gallery {position:absolute;}
*/