@charset "utf-8";

/* style.css
* * * * * * * * * * * * * * * * * * * * */

/***** reset *****/

/* @group @viewport
--------------------------------------------------------*/

@-webkit-viewport{width:device-width;}
@-moz-viewport{width:device-width;}
@-ms-viewport{width:device-width;}
@-o-viewport{width:device-width;}
@viewport{width:device-width;}

/* @end @viewport */

/* @group nomalize.css */

/*! normalize.css v2.0.1 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/* Corrects `block` display not defined in IE 8/9. */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary {display: block}

/* Corrects `inline-block` display not defined in IE 8/9. */
audio,canvas,video {display: inline-block}

/* Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices. */
audio:not([controls]) {display: none;height: 0}

/* Addresses styling for `hidden` attribute not present in IE 8/9. */
[hidden] {display: none}

/* ==========================================================================
   Base
========================================================================== */

/* 1. Sets default font family to sans-serif.
 * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom. */

html {
    font-family: sans-serif; /* 1 */
    font-family: "Hiragino Kaku Gothic Pro","Yu Gothic","Meiryo",sans-serif;
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/* Removes default margin. */

body {margin: 0}
h1,h2,h3,h4,h5,h6,p,ul,ol,dl,table,pre { margin-top: 0}


/* ==========================================================================
   Links
========================================================================== */

/* Addresses `outline` inconsistency between Chrome and other browsers. */
a:focus { outline: thin dotted}

/* Improves readability when focused and also mouse hovered in all browsers. */
a:active, a:hover {outline: 0}

/* ==========================================================================
   Typography
========================================================================== */

html { font-size: 90%}

/* Addresses `h1` font sizes within `section` and `article` in Firefox 4+, Safari 5, and Chrome. */
h1 {font-size: 2em;}

p,li,dt,dd,th,td,pre{
-ms-line-break: strict;
line-break: strict;
-ms-word-break: break-strict;
word-break: break-strict}

/*
 * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
 */

abbr[title] {border-bottom: 1px dotted}

/* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.*/
b,strong {font-weight: bold}

/*Addresses styling not present in Safari 5 and Chrome.*/
dfn { font-style: italic}

/*Addresses styling not present in IE 8/9.*/
mark { background: #ff0;
color: #000}


/* Corrects font family set oddly in Safari 5 and Chrome.*/
code, kbd, pre, samp {
font-family: monospace, serif;
font-size: 1em}

/*Improves readability of pre-formatted text in all browsers.*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word}

/*Sets consistent quote types.*/
q {quotes: "\201C" "\201D" "\2018" "\2019";}

/*Addresses inconsistent and variable font size in all browsers.*/
small {font-size: 80%;}

/*Prevents `sub` and `sup` affecting `line-height` in all browsers.*/
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline}

sup {top: -0.5em}
sub {bottom: -0.25em}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/*Removes border when inside `a` element in IE 8/9.*/
img {
    max-width :100%;
    vertical-align: middle;
    border: 0}

/* .ie8 img{width: auto; height: auto} */

/* Corrects overflow displayed oddly in IE 9.*/
svg:not(:root) {overflow: hidden}

/* ==========================================================================
   Figures
   ========================================================================== */

/*Addresses margin not present in IE 8/9 and Safari 5.*/

figure {margin: 0}

/* ==========================================================================
   Forms
========================================================================== */

/*Define consistent border, margin, and padding.*/

fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em}

/* 1. Corrects color not being inherited in IE 8/9.
 2. Remove padding so people aren't caught out if they zero out fieldsets. */

legend {
border: 0; /* 1 */
padding: 0; /* 2 */}

/* 1. Corrects font family not being inherited in all browsers.
 * 2. Corrects font size not being inherited in all browsers.
 * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome */

button, input, select, textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
margin: 0; /* 3 */}

/*Addresses Firefox 4+ setting `line-height` on `input` using `!important` in  the UA stylesheet.*/

button,input {line-height: normal}

/* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`  and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type `input` and others. */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */}

/*Re-set default cursor for disabled elements. */
button[disabled],
input[disabled] {cursor: default}

/*
1. Addresses box sizing set to `content-box` in IE 8/9.
 2. Removes excess padding in IE 8/9.*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */}

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box}

/*
 * Removes inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none}

/* Removes inner padding and border in Firefox 4+. */

button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0}

/* 1. Removes default vertical scrollbar in IE 8/9.
 * 2. Improves readability and alignment in all browsers. */

textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */}

/* ==========================================================================
   Tables
========================================================================== */

/*Remove most spacing between table cells.*/
table {
border-collapse: collapse;
border-spacing: 0}

/* ==========================================================================
 @end normarize.css */



/* @group clearfix */

.cf:before,.cf:after{content: "";display: table}
.cf:after{clear: both}

/* @end */




/*----------------
@font setting
------------------*/
body{
	color: #0c3388;
}

/*^^^^^^^^^^^^^^^^^^^^^
@group link setting
-----------------------*/

a{
	color: #0c3388;
	text-decoration: none;
	position: relative;
	display: inline-block;
	transition: .3s;
	}

a::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	content: '';
	width: 0;
	height: 1px;
	background-color: #0076AB;
	transition: .3s;
	transform: translateX(-50%);
	}

a:hover::after{
	width: 100%;
	}

 a:hover {
	color:#0076AB;
	}

/*--------------------
@group contents
-----------------------*/

figure{

text-align: center;
}

body #footer {
	text-align:center;
	position: fixed;
	bottom: 0px;
	width:100%; 
	background-color: #FFE100;
}



/* @group home
--------------------*/

#index{
	background-color: #FFE100;
}

#home {
	height: 100%;
	width: 100%;
	text-align: center;
	background-color: #FFE100;
}

#home  #intro {
	padding-top: 60px;
	margin: auto;
}

#home  #intro img {
	margin: 20px;
}

#home  #intro div.contact {
	clear: both;
	margin: 40px auto;
	line-height: 2em;
}


/* @group links
--------------------*/
i {
	padding: 0.2em;
	}



/* @group Studio */

#top {
	background-color: #FFE100;
	width: 100%;
	height:80px;
}

#top img{
	float: left;
	padding-left: 10px;
}

#top ul{
	width: 270px;
	float: right;
	padding: 20px 0 0 0;
}

#top ul li{
	float: left;
	padding: 0 5px 0 5px;
	list-style-type: none;
	vertical-align: bottom;
}

#contents_studio{
	width: 97%;
	margin:auto;
	padding: 10px 0 0 0;
}

#contents_studio img{
	padding: 5px 0 5px 10px;
	float: left;
}

#space{
	width: 100%;
}

#contents_form{
	margin:auto;
	padding: 20px;
}

/* @end */

/* @group About */
#contents_about{
	width: 70%;
	margin:auto;
	padding: 20px;
}

#contents_about hr{

	border-top: 1px solid #0c3388;
	border-bottom: 1px solid #FFE100;
}


	

/* @end */

/* @group Form */

#contents_form{
	width: 70%;
	margin:auto;
	padding: 20px 0 50px 0;
}

	form{
		padding-bottom: 30px;
	}

	#contents_form dl{
		width: 80%;
		margin:auto;
	}


	#contents_form dt{
		border-left: 3px solid #FFE100;
		padding-left: 3px;
		margin-bottom: 5px;
	}

	#contents_form dd{
		margin-bottom: 20px;
	}	

	#contents_form .button{
		text-align: center;
		margin-bottom: 20px;
	}

	#contents_form input,
	#contents_form textarea{
		padding: 5px,
		font-size: 100%;
		border: 1px solid #C4CCF0;
	}

	#contents_form .require{
		background-color: #FFE100;
		padding: 2px;
		border-radius: 3px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		font-size: 80%;
		margin-left: 5px;
	}

	#contents_form p.info{
		text-align: center;
		margin-bottom: 0.3em;
	}

/* @end */

/* @group Links */

#contents_links ul{
	width:90%;
	margin: 0 auto;
	padding: 1em 0 1em 0;
	text-align: center;
}


	#contents_links ul li  {
		text-align: center;
		padding: 0.3em 0 0.3em 0;
		list-style-type: none;
	}

	#contents_links ul li a.elmambo {
		color: #7F258A;
		display: block;
		font-weight: bold;
		box-shadow: 1px 1px 1px #999999;
		background: linear-gradient(#f1f088, #e2e742);
	}
	#contents_links ul li a.dragonbar {
		color: #e43128;
		display: block;
		font-weight: bold;
		box-shadow: 1px 1px 1px #999999;
		background: linear-gradient(#526b75, #1c3d4a);
	}
	#contents_links ul li a.mambodega {
		color: #80611d;
		display: block;
		font-weight: bold;
		box-shadow: 1px 1px 1px #999999;
		background: linear-gradient(#f5e165, #efcc00);
	}
	#contents_links ul li a.barpancho {
		color: #0d100e;
		display: block;
		font-weight: bold;
		box-shadow: 1px 1px 1px #999999;
		background: linear-gradient(#9bdfe7, #47c4d3);
	}
	#contents_links ul li a.barbaricworks {
		color: #960404;
		display: block;
		font-weight: bold;
		box-shadow: 1px 1px 1px #999999;
		background: linear-gradient(#e7e3aa, #e0a815);
	}
	#contents_links ul li a.goldnbub {
		color: #be9357;
		display: block;
		font-weight: bold;
		box-shadow: 1px 1px 1px #999999;
		background: linear-gradient(#485a50, #001920);
	}
	#contents_links ul li a.jumbo {
		color: #000048;
		display: block;
		font-weight: bold;
		box-shadow: 1px 1px 1px #999999;
		background: linear-gradient(#ea5656, #df0000);
	}
	#contents_links ul li a.toto {
		color: #3f5380;
		display: block;
		font-weight: bold;
		box-shadow: 1px 1px 1px #999999;
		background: linear-gradient(#c0baa4, #a19777);
	}
	#contents_links ul li a.hinata {
		color: #f0d134;
		display: block;
		font-weight: bold;
		box-shadow: 1px 1px 1px #999999;
		background: linear-gradient(#563f1e, #3f2600);
	}
	#contents_links ul li a.riceandpeas {
		color: #2D1D07;
		display: block;
		font-weight: bold;
		box-shadow: 1px 1px 1px #999999;
		background: linear-gradient(#4a9f66, #007700);
	}
	#contents_links ul li a.oasis {
		color: #ffd700;
		display: block;
		font-weight: bold;
		box-shadow: 1px 1px 1px #999999;
		background: linear-gradient(#6ccdeb, #1991c9);
	}
	#contents_links ul li a.hanae {
		color: #589135;
		display: block;
		font-weight: bold;
		box-shadow: 1px 1px 1px #999999;
		background: linear-gradient(#e8e7dd, #c0bfa3);
	}
	#contents_links ul li a.kteaslab {
		color: #627535;
		display: block;
		font-weight: bold;
		box-shadow: 1px 1px 1px #999999;
		background: linear-gradient(#dbe7cb, #a2c17a);
	}
	#contents_links ul li a.donnet {
		color: #fff091;
		display: block;
		font-weight: bold;
		box-shadow: 1px 1px 1px #999999;
	background: linear-gradient(#3f3f53, #000000);
	}
	#contents_links ul li a.ichiban {
		color: #000000;
		display: block;
		font-weight: bold;
		box-shadow: 1px 1px 1px #999999;
	background: linear-gradient(#bfddd9, #88a4b9);
	}

#contents_links ul li a:hover {
	color: #ffffff;	
}


/* min-width: 769px
* * * * * * * * * * * * * * * * * * * * */

@media only screen and (min-width: 769px){

/* @group contents */

html{font-size: 100%}

.footer p{ width: 89.9%; /* 896px/992px=89.9% */ }

#home  #intro ul{
	width: 300px;
}

#home  #intro {
	padding-top: 80px;
}

#contents_links ul{
	width:600px;
}

#top ul{
	width: 300px;
	float: right;
	padding: 20px 0 0 0;
}


/* @end */