@charset"UTF-8";

/* ◆◆リセット◆◆ */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, table {
	margin : 0;
	padding : 0;
}

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

ol, ul {
	list-style:none;
}

img {
	border:0;
	vertical-align : text-bottom;			/* 画像下の余白を無くす */
}

caption, th {
	text-align: left;
}

a {
	text-decoration : none;
}

a, .link_a, .link_b, .link_c, .link_d, .link_e, #worksVisual, input {
	tap-highlight-color: rgba(0, 0, 0, 0);
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		-moz-tap-highlight-color: rgba(0, 0, 0, 0);
		-ms-tap-highlight-color: rgba(0, 0, 0, 0);
		-o-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ◆◆基礎◆◆ */
html {
	font-size : 62.5%
}

body {
	background-color : #f90;
	font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
	color : #fff;
	text-shadow : 0 0 5px #fff;
}

header {
	color : #f90;
	text-shadow : 0 0 5px #fc6;
}

h1 {
	margin-bottom : 0.5em;
	padding-bottom : 0.5em;
	font-size : 1.8em;
	letter-spacing : 0.5px;
	border-bottom : dashed 2px #f90;
}

h2 {
	font-size : 1.6em;
	margin-bottom : 0.4em;
	padding-bottom : 0.2em;
	border-bottom : solid 1px #f90;
}

h3 {
	font-size : 1.4em;
	margin-bottom : 0.2em;
	padding-bottom : 0.1em;
	border-bottom : solid 1px #f90;
}

p {
	font-size : 1.3em;
	margin-bottom : 0.4em;
}

table {
	width : 100%;
	border-spacing : 0.5em;
	line-height : 1.45em;
}

th {
	padding : 0.4em;
	border-collapse : separate;
	background : linear-gradient(top, rgba(255,153,0,0.8), rgba(255,204,51,0.8));
		background : -webkit-linear-gradient(top, rgba(255,153,0,0.8), rgba(255,204,51,0.8));
		/* Android2.3対応用の旧記述 */
		background : -webkit-gradient(linear, left top, left bottom, from(rgba(255,153,0,0.8)), to(rgba(255,204,51,0.8)));
		background : -moz-linear-gradient(top, rgba(255,153,0,0.8), rgba(255,204,51,0.8));
		background : -ms-linear-gradient(top, rgba(255,153,0,0.8), rgba(255,204,51,0.8));
		background : -o-linear-gradient(top, rgba(255,153,0,0.8), rgba(255,204,51,0.8));
	box-shadow : 0 0 5px rgba(255,153,0,0.8);
	color : #fff;
	border-radius : 0.5em;
}

td {
	border-radius : 0.5em;
	padding : 0.2em;
}

.sp {
	color : rgba(255,102,0,0.6);
}

.cl {
	clear : both;
}

p.tourl {
	margin-bottom : 0;
	font-size : 0.75em;
	text-align : right;
}

/* ◆◆汎用◆◆ */
#fade {
	background-color : #fff;
	position : absolute;
	top : 0;
	left : 0;
	z-index : 200;
	width : 100%;
	height : 100%;
}

#loader {
	position : absolute;
	top : 50%;
	left : 50%;
	z-index : 200;
	margin-top : -14px;
	margin-left : -50px;
}

/* ◆SNS◆ */
#sns {
	position : absolute;
	top : 0;
	right : 0;
	padding : 5px;
	line-height : 0;
	margin-bottom : 0;
}

#sns p {
	margin-bottom : 0;
}

#sns p iframe.twitter-share-button {
	width: 85px !important;
}

#sns p iframe.facebook-button {
	width: 148px !important;
}

/* ◆上部メニュー◆ */
#headLinks {
	position : fixed;
	left : 0;
	bottom : 0;
	z-index : 100;
	width : 100%;
	text-align : center;
}

#headLinks {
	background : linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0.8));
		background : -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0.8));
		/* Android2.3対応用の旧記述 */
		background : -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(255,255,255,0.8)));
		background : -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0.8));
		background : -ms-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0.8));
		background : -o-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0.8));
	overflow : auto;
	line-height : 5em;
}

#headLinks li {
	float : left;
	width : 20%;
	-webkit-box-sizing : border-box;
	-moz-box-sizing : border-box;
	-ms-box-sizing : border-box;
	-o-box-sizing : border-box;
		box-sizing : border-box;
	border-left : solid 1px #fff;
}

#headLinks li:first-child {
}

.cont {
	-webkit-box-sizing : border-box;
	-moz-box-sizing : border-box;
	-ms-box-sizing : border-box;
	-o-box-sizing : border-box;
		box-sizing : border-box;
	background-color : rgba(255,153,0,0.6);
	color : #fff;
	text-shadow : 0 0 5px #e70;
	padding : 1em;
}

li, article.link_b{
	cursor : pointer;
}

/* ◇BOX-A◇ */
#cont_a {
	letter-spacing : 0.1em;
}

#cont_a article {
	position : relative;
	margin : 0 auto;
	width : 30%;
	min-width : 200px;
	max-width : 300px;
	text-align : center;
}

/* ◇BOX-B◇ */
#cont_b {
	background-color : rgba(255,179,64,0.5);
}

#cont_b #visuals {
	position : relative;
	min-width : 280px;
	margin-bottom : 1em;
	overflow : auto;
}

#cont_b #visuals p {
	margin-bottom : 0;
}

/* 説明文 */
#cont_b #explain {
	background : rgba(0,0,0,0.8);
	display : none;
	position : absolute;
	left : 0;
	bottom : 0;
	padding : 1em;
	width : 100%;
	-webkit-box-sizing : border-box;
	-moz-box-sizing : border-box;
	-ms-box-sizing : border-box;
	-o-box-sizing : border-box;
		box-sizing : border-box;
	text-shadow : 0 0 10px #fff;
}

#cont_b #explain a {
	text-decoration : underline;
}

#cont_b #explain a:link { color : #ff0; }
#cont_b #explain a:visited { color : #fff; }
#cont_b #explain a:hover { color : #fc0; }

/* 作品別サムネイル */
#cont_b ul#worksThumbs {
	min-width : 300px;
	overflow : auto;
}

#cont_b ul#worksThumbs li.thumbsNail {
	position : relative;
	float : left;
	margin : 0 5px 5px 0;
	line-height : 0;
}

#cont_b ul#worksThumbs li.thumbsNail:nth-child(5) {
	margin : 0 0 5px 0;
}

#cont_b ul#worksThumbs li.thumbsNail img {
	background : #ccc;
}

#cont_b ul#worksThumbs li.thumbsNail span.thumbsName {
	background : rgba(0,0,0,0.8);
	position : absolute;
	top : 0;
	left : 0;
	z-index : 50;
	display : none;
	text-align : center;
	line-height : 1.5em;
}

#cont_b ul#worksThumbs li.thumbsNail span.thumbsName span {
	position : absolute;
	bottom : 5px;
	left : 0;
	z-index : 50;
}

/* ◇BOX-C◇ */
#cont_c {
	background-color : rgba(255,204,128,0.5);
}

/* ◇BOX-D◇ */
#cont_d {
	background-color : rgba(255,230,191,0.5);
}

#cont_d #blog {
	background : url(../images/blog.jpg) left top no-repeat;
	background-size : 100% auto;
	height : 240px;
	border : solid 1px #ccc;
}

/* ◇BOX-E◇ */
#cont_e {
	background-color : rgba(255,255,255,0.5);
}

/* 背景BOX */
#box_a {
	background : #ffe9cc;
	position : absolute;
	z-index : -1000;
}

#box_b {
	background-color : #ffd399;
	position : absolute;
	z-index : -900;
}

#box_c {
	background-color : #ffbd66;
	position : absolute;
	z-index : -800;
}

#box_d {
	background-color : #ffa733;
	position : absolute;
	z-index : -700;
}

#box_e {
	background-color : #f90;
	position : absolute;
	z-index : -600;
}

#back_box {
	position : fixed;
	left : 0;
	top : 0;
	z-index : -10;
}

/* ◆テーブル◆ */
table.comp {
	background : rgba(255,255,255,0.7);
	border-radius : 1em;
	margin-bottom : 1em;
}

table.comp th {
	width : 30%;
}

table.comp td {
	color : #f90;
	text-shadow : 0 0 5px rgba(255,102,0,0.6);
}

table#access {
	position : relative;
}

table#access th {
	width : 22%;
}

/* 元の枠線背景色を消去 */
table#access td input[type="email"],
table#access td input[type="tel"],
table#access td input[type="text"],
table#access td textarea {
	border : none;
	background : none;
	color : #555;
}

/* 元枠線と同様フォーカス処理消去 */
table#access td input[type="email"]:focus,
table#access td input[type="tel"]:focus,
table#access td input[type="text"]:focus,
table#access td textarea:focus,
table#access td input[type="image"]:focus {
	outline : 0;
}

/* Firefoxの入力ミス赤線消去 */
table#access td input[type="email"]:invalid,
table#access td input[type="tel"]:invalid,
table#access td input[type="text"]:invalid,
table#access td textarea:invalid {
	box-shadow : none;
}

/* 例 */
placeholder {
	background-color : #fff;
}

table#access td.input {
	background-color : rgba(255,255,255,0.8);
	box-shadow : 1px 1px 0.5em #ccc inset;
}

table#access td input[type="email"],
table#access td input[type="tel"],
table#access td input[type="text"],
table#access td textarea {
	padding : 0.4em;
	width : 90%;
	color : #666;
}

table#access td.subm {
	text-align : center;
}

table#access td button,
table#access td input[type="image"] {
	margin-top : 0.4em;
}

/* スマホサイズ用の不要ブロック削除 */
.arrow_base, #arrow_ab, #arrow_bc, #arrow_cd, #arrow_de, header p, header nav h1, #links, #cont_b #visuals div, #cont_b #visuals section, #cont_b .thumbsNail span {
	display : none;
}



/* ◆◆◆メディアクエリ◆◆◆ */
/* タブレットより上のサイズで表示する：768px想定 */
@media screen and (min-width : 768px){

/* スマホサイズ用の削除ブロック復活 */
.arrow_base, #arrow_ab, #arrow_bc, #arrow_cd, #arrow_de, header p, header nav h1, #links, #cont_b #visuals div, #cont_b #visuals section, #cont_b .thumbsNail span {
	display : block;
}

/* ◆◆基礎◆◆ */
html {
	font-size : 62.5%
}

body {
	overflow-x : hidden;
	overflow-y : hidden;
	letter-spacing : 0.2em;
	min-width : 768px;
}

header {
	position : fixed;
	left : 3em;
	z-index : 100;
	width : 28%;
	min-width : 245px;
}

h1 {
	margin-bottom : 2em;
	padding-bottom : 2em;
	font-size : 1.2em;
	letter-spacing : 0px;
	border-bottom : dashed 2px #f90;
}

h2 {
	font-size : 2.4em;
	margin-bottom : 0.7em;
	padding-bottom : 0.5em;
}

h3 {
	font-size : 1.5em;
}

p {
	font-size : 1.4em;
	margin-bottom : 1em;
}

ul {
	font-size : 1.6em;
}

li {
	font-size : 0.5em;
}

table {
	font-size : 1.2em;
	border-spacing : 0.5em;
}

th {
	padding : 1em;
}

td {
	padding : 0.5em;
}

.page {
	background : #fff;
	width : 50%;
	margin : -2em auto 0;
	padding : 2em;
	text-align : center;
}

article.rightColumn {
	position : absolute;
	right : 4.25em;
	top : 2.5em;
	width : 60%;
	min-width : 400px;
	max-width : 950px;
	overflow-y : auto;
	overflow-x : hidden;
	padding-right : 1em;
}

article.rightColumn::-webkit-scrollbar-track {
    border-radius: 15px;
}

#wrap {
	position : relative;
}

.cont {
	position : absolute;
	top : 4.5em;
	left : 4.5em;
	z-index : 0;
	background-color : rgba(255,153,0,0.6);
	border-radius : 1em;
	border : solid 0.5em #fff;
	box-shadow : 0 0 5px #fff, 0 0 5px #fff inset;
	color : #fff;
	text-shadow : 0 0 5px #e70;
	padding : 0;
	min-width : 680px;
}

p.img {
	margin : 0;
}

p.tourl a:link { color : #06f; }
p.tourl a:visited { color : #26e; }
p.tourl a:hover {
	text-decoration : underline;
	color : #f63;
}


/* ◆テーブル◆ */
table.comp th {
	width : 32%;
	padding : 1em;
}

table#access th {
	width : 20%;
}

/* 例 */
table#access td.input:hover {
	background-color : rgba(255,255,200,0.8);
	box-shadow :1px 1px 0.5em #aaa inset;
}

table#access td input[type="email"],
table#access td input[type="tel"],
table#access td input[type="text"],
table#access td textarea {
	width : 93%;
}



/* 背景BOX */
#arrow_ab {
	position : absolute;
	z-index : -950;
}

#arrow_bc {
	position : absolute;
	z-index : -850;
}

#arrow_cd {
	position : absolute;
	z-index : -750;
}

#arrow_de {
	position : absolute;
	z-index : -650;
}

.arrow_base {
	position : absolute;
}

#back_box {
	z-index : -500;
}

#windowS {
	position : fixed;
}

#scrollS {
	position : fixed;
	top : 100px;
}

#bBoxS {
	position : fixed;
	top : 200px;
}

#testHr {
	position : fixed;
	left : 200px;
}

/* ◆左メニュー◆ */
#headLinks {
	position : static;
	background : none;
	margin-bottom : none;
	text-align : left;
}

#headLinks li {
	float : none;
	width : 100%;
	border-left : none;
	border-right : none;
	line-height : 2em;
}

#headLinks li:hover {
	text-decoration : underline;
	font-weight : bold;
}

/* ◆スムーススクロール◆ */
#links {
	position : fixed;
	right : 2em;
	width : 2.5em;
	padding-right : 1em;
	text-align : center;
}

#links li {
	position : relative;
	line-height : 30px;
}

#links li:hover {
	color : #fff;
	font-size : 1.8em;
	text-shadow : 0 0 10px #fff;
}

.title {
	display : none;

	font-size : 0.55em;
	position : absolute;
	left : -9em;
	top : -0.5em;
	width : 7em;
	background-color : rgba(255,255,200,1);
	box-shadow : 0 0 5px #fc6;
	padding : 0.5em;
	border-radius : 0.5em;

	color : #f90;
}

.title::before {
	content : "";
	position : absolute;
	left : 7.5em;
	top : 1em;
	z-index : -50;
	background-color : rgba(255,255,200,1);
	box-shadow : 0 0 5px #fc6;
	width : 1em;
	height : 1em;
	transform : rotate(45deg);
}

.title::after {
	content : "";
	position : absolute;
	left : 7.5em;
	top : 1em;
	z-index : 50;
	background-color : rgba(255,255,200,1);
	width : 1em;
	height : 1em;
	transform : rotate(45deg);
}
/* ◇スムーススクロール◇ */


/* ◆ページ別◆ */
/* ◇BOX-A◇ */
#cont_a article {
	min-width : 250px;
}

#cont_a article h1 {
	margin-bottom : 1em;
	padding-bottom : 1em;
	font-size : 2.4em;
}

#cont_a article p {
	letter-spacing : 0.4em;
}

/* ◇BOX-B◇ */

#cont_b #visuals {
	min-width : 500px;
}

#cont_b #visuals #worksVisual {
	float : left;
}

#cont_b #visuals div {
	float : left;
	width : 5px;
}

/* 詳細サムネイル */
#cont_b #visuals #worksText {
	float : left;
}

#cont_b #worksText {
	-webkit-box-sizing : border-box;
	-moz-box-sizing : border-box;
	-ms-box-sizing : border-box;
	-o-box-sizing : border-box;
		box-sizing : border-box;
}

#cont_b #worksText h1 {
	background : rgba(255,255,255,0.1);
	border : solid 1px #fff;
	box-shadow : 0 0 5px #fff, 0 0 5px #fff inset;
	margin-bottom : 5px;
	padding-bottom : 0;
	font-size : 1.4em;
	text-align : center;
}

#cont_b #worksText ul li {
	margin-bottom : 4px;
	line-height : 0;
}

#cont_b #worksText ul li:last-child {
	margin-bottom : 0;
}

/* 作品別サムネイル */
#cont_b ul#worksThumbs {
	min-width : 400px;
}

/* ◇BOX-D◇ */
#cont_d #blog {
	max-height : 400px;
}

/* スクロールバー */
::-webkit-scrollbar {
	width : 12px;
}

::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.5); 
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #6cf; 
    box-shadow: inset -1px -1px 6px rgba(51,153,204,0.5); 
}

::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,255,255,0.4); 
}

}
/* ◇◇◇メディアクエリ◇◇◇ */