/*
Theme Name: mysite
Theme URI: https://wordpress.org/themes/twentyfifteen
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple, straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentyfifteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

@font-face {
    font-family: 'liberation_sansbold';
    src: url('fonts/LiberationSans-Bold-webfont.eot');
    src: url('fonts/LiberationSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/LiberationSans-Bold-webfont.woff') format('woff'),
         url('fonts/LiberationSans-Bold-webfont.ttf') format('truetype'),
         url('fonts/LiberationSans-Bold-webfont.svg#liberation_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* @font-face kit by Fonts2u (http://www.fonts2u.com) */
@font-face {
	font-family:"Jellyka - Estrya's Handwriting";
	src:url("fonts/Jellyka_Estrya_Handwriting.eot?") format("eot"),
		url("fonts/Jellyka_Estrya_Handwriting.woff") format("woff"),
		url("fonts/Jellyka_Estrya_Handwriting.ttf") format("truetype"),
		url("fonts/Jellyka_Estrya_Handwriting.svg#JellykaEstryasHandwriting") format("svg");
	font-weight:normal;
	font-style:normal;
}

@import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic);
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body{
	font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

img{
	max-width: 100%;
}

#wrapper{
	display: none;
}

#concept_box{
	position: absolute;
	top: 50%;
	left: 50%;
	color: #FFF;
	margin-top: -120px;
	margin-left: -338.5px;
}

#concept_text{
	text-align:center;
	font-size: 10em;
	font-family: 'Noto Sans Japanese', serif;
	letter-spacing: -25px;
	text-shadow: 3px 3px 20px #000;
}

#header{
	background-color: rgba(0,0,0,0.4);
	overflow: hidden;
	height: 70px;
	padding: 10px;
	box-sizing: border-box;
	position: fixed;
	width: 100%;
	z-index: 999;
}

.logo img{
	width: 50px;
	height:auto;
	position: absolute;
}

.menu{
	color: #666;	
	overflow: hidden;
	line-height: 50px;
	float:right;
	font-family: 'liberation_sansbold';
}

.menu li{
	float: left;
	list-style:none;
	margin:  0 10px;
	font-size: 1.2em;
}

.menu li a{
	color: #fff;
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}

.menu li a:hover{
	padding-bottom: 8px;
	border-bottom: 4px solid #fc0;
}

#bg{
	width: 100%;
	height: 100%;
	background: url(images/top2.png) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#top_img{
	width: 100%;
	height: 100%;
	background: url(images/top.png) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#about_area{
	background-color: rgba(255,255,255,0.9);
	text-align: center;
	padding: 3%;
	box-sizing:border-box;
	font-size: 1.2em;
	overflow: hidden;
}

h2{
	font-size: 2.5em;
	font-family: 'liberation_sansbold';
	margin-bottom: 3%;
}

.min_font{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: 100;
}

.md{
	font-family: 'Noto Sans Japanese', serif;
	margin-bottom: 2%;
	font-size: 1.5em;
	font-weight: 100;
}

.sign_text{
	font-size: 8em;
	font-family:"Jellyka - Estrya's Handwriting";
	float: right;
	margin: 0 10% 0 0;
	-webkit-transform: rotate(-12deg);　 /* chrome、safari　*/
	-moz-transform: rotate(-12deg);　 /* firefox　*/
}

#work_area{
	background-color: rgba(0,0,0,0.9);
	text-align: center;
	padding: 3%;
	box-sizing:border-box;
	font-size: 1.2em;
	color: #f3f3f3;
	overflow: hidden;
}

#work_area h2{
	color: #FFC;
}

.work_box_wrap{
	overflow: hidden;
}

.work_box{
	width: 33.3%;
	float: left;
	padding: 1%;
	box-sizing: border-box;
}

.work_box img{
	-webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
}

.work_box img:hover{
	filter: alpha(opacity=50);
	-moz-opacity:0.50;
	opacity:0.50;
}

.work_more{
	padding: 1% 2%;
	text-align:center;
	margin: 3% 35%;
	background: #0CF;
}

#topics_area{
	background-color: rgba(255,255,255,0.9);
	text-align: center;
	padding: 3%;
	box-sizing:border-box;
	font-size: 1.2em;
	color: #333;
	overflow: hidden;
}

#topics_area h2{
	color: #360;
}

.topics_box{
	overflow: hidden;
	padding: 2%;
	text-align:left;
}

.topics_date_box{
	background: #666;
	color: #fff;
	float: left;
	border-right: 1px solid #fc0;
	padding: 0.5% 1.5%;
	box-sizing: border-box;
	text-align: center;
	margin-right: 2%;
}

.topics_year{
	font-size: 0.8em;
}

.topics_month{
	font-weight: bold;
	font-size: 1.2em;
	border-bottom: 2px solid #999;
	margin-bottom: 1px;
	color: #f9f9f9;

}

.topics_day{
	font-weight: bold;
	font-size: 1.2em;
	color: #dfdfdf;
}

.topics_content_area{
	padding: 1%;
}

.topics_content_area h3{
	margin-bottom: 1%;	
}

.topics_content_area p{
	font-size: 0.9em;
}

.andmore{
	text-align: right;
	padding: 0.8%;
	background: #666;
	float:right;
	color: #f3f3f3;
	font-size: 0.8em;
}

.topics_more{
	padding: 1% 2%;
	text-align:center;
	margin: 3% 35%;
	background: #fc0;
}

#company_area{
	background-color: rgba(33,33,33,0.9);
	padding: 3%;
	box-sizing:border-box;
	font-size: 1.2em;
	color: #f3f3f3;
	overflow: hidden;
	text-align: center;
}

.company_box{
	background-color: rgba(33,33,33,0.5);
	margin: 1% 15%;
	padding: 2%;
	box-sizing:border-box;
	text-align: center;
}

.company_box table{
	width: 500px;
	max-width: 100%;
	margin: 0 auto;
}

.company_box th{
	padding: 15px;
}

.company_box td{
	text-align: left;
	padding: 15px;
}

#contact_area{
	background-color: rgba(255,255,255,0.9);
	text-align: center;
	padding: 3%;
	box-sizing:border-box;
	font-size: 1.2em;
	color: #333333;
	overflow: hidden;
}

#contact_area h2{
	color: #c00;
}

.contact_box{
	background-color: rgba(33,33,33,0.5);
	margin: 1% 15%;
	padding: 2%;
	box-sizing:border-box;
	color: #f3f3f3;
}

#footer{
	background: #000000;
	color: #FFF;
	padding: 1%;
}

.footer_logo{
	text-align: center;
	font-weight: bold;
	letter-spacing:-2px;
	font-family: 'liberation_sansbold';
	font-size: 3em;
}

.copyright{
	font-size: 0.85em;
	text-align: center;
	margin-top: -1.5em;
}

#loading {
	width: 96px; /* gif画像の幅 */
	height: 96px; /* gif画像の高さ */
	margin: -68px 0 0 -68px; /* gif画像を画面中央に */
	padding: 20px; /* gif画像を大きく */
	position: fixed; /* gif画像をスクロールさせない */
	left: 50%; /* gif画像を画面横中央へ */
	top: 50%; /* gif画像を画面縦中央へ */
}

@media screen and (orientation: portrait) {

	#bg{
		background: url(images/port_top2.png) no-repeat center center fixed;
		width: 100%;
		height: 100%;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	#top_img{
		background: url(images/port_top.png) no-repeat center center fixed;
		width: 100%;
		height: 100%;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
}