@charset "utf-8";
/* CSS Document */

body{
	width:100%;
	color:#fff;
	font-family: 'Fjalla One', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height:1.05;
	text-align:left;
	padding:0;
	margin:0;
	background:#58003e;
	position:relative;
}
	
/* all */
h1,h2,h3,h4,h5,p,dt,dd,li,th,td,address,strong,em,table,dl,ul,ol,img,
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary
{
	padding:0;
	margin:0;
	background:transparent;
}

/* font */
h1,h2,h3,h4,h5,p,dt,dd,li,th,td,a,address,strong,em,form,input,textarea,select,submit,
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{
	color:inherit; line-height:inherit; font-family:inherit; font-size:inherit;
}

/* indivisual */
a{
	border:none; color:inherit; text-decoration:underline; word-wrap: break-word;
}
a:hover{
	text-decoration:none;
}
address,em{
	font-style:normal;
}
ul,ol{
	list-style:none none outside;
}
img{
	display:block; border:none;
}

/* jquery */
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{outline:0; z-index:9999}
    #cboxContent{margin-top:20px;background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{border:5px solid #000; background:#fff;}
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxLoadingGraphic{background:url(img//loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
        
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(img//controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(img//controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext:hover{background-position:bottom right;}
        #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(img//controls.png) no-repeat top center; width:31px; height:31px; text-indent:-9999px;}
        #cboxClose:hover{background-position:bottom center;}

/* common */
a:hover img{ opacity:0.64; }
.ac:after{ clear:both; content:""; display:block; }

/* contents */

.post *:first-child{
	margin-top:0;
}

.post *:last-child{
	margin-bottom:0;
}

.post h1{
}

.post h2{
	font-size:300%;
	letter-spacing:0.2em;
	text-align:center;
	text-indent:0.2em;
	margin:2em 0 0.5em 0;
}

.post h3{
	font-size:200%;
	letter-spacing:0.2em;
	text-align:center;
	text-indent:0.2em;
	margin:2em 0 0.5em 0;
}

.post h4{
	font-size:150%;
	letter-spacing:0.2em;
	text-align:center;
	text-indent:0.2em;
	margin:2em 0 0.5em 0;
}

.post p{
	line-height:1.75;
	margin:0 0 1rem 0;
}

.post table{
	width:100%;
	margin:0 0 1rem 0;
	border-top:1px solid #730051;
}

.post table th,
.post table td{
	line-height:1.5;
	padding:0.75em 0;
	border-bottom:1px solid #730051;
}

.post ul{
	margin:0 0 1em 1.5em;
	list-style:disc;
}

.post ol{
	margin:0 0 1em 1.75em;
	list-style:decimal;
}

.post .no-list{
	margin-left:0;
	list-style:none;
}

.post li{
	line-height:1.5;
	padding:0.125em 0;
}

.aligncenter{
	text-align:center;
}

.aligncenter img{
	margin-left:auto;
	margin-right:auto;
}

.date{
	display:block;
	font-size:50%;
	padding:0 0 1em 0;
}

.em3{
	width:3em !important;
}

.em4{
	width:4em !important;
}

.em5{
	width:5em !important;
}

.em6{
	width:6em !important;
}

.em7{
	width:7em !important;
}

.em10{
	width:10em !important;
}


/* form */

.need{
	color:#ff0000;	
}

.wpcf7-form dl{
	padding:1em 0;
	border-bottom:1px solid #730051;
}

.wpcf7-form dl:first-of-type{
	border-top:1px solid #730051;
}

.wpcf7-form dt{
	width:25%;
	float:left;
	padding:0.75em 0;
}

.wpcf7-form dd{
	width:75%;
	float:left;
	color:#000;	
}

.wpcf7-form dd span{
	display:block;
	line-height:1.5;
	padding:0.25em 0.375em;
	background:#fff;
	border:none;
	border-radius:0.25em;
	-moz-border-radius:0.25em;
	-webkit-border-radius:0.25em;
	-o-border-radius:0.25em;
	-ms-border-radius:0.25em;
}

.wpcf7-form dd input,
.wpcf7-form dd textarea{
	display:block;
	width:100% !important;
	background:transparent;
	border:none !important;
}

.wpcf7-form dd .wpcf7-radio span{
	display:inline !important;
}

.wpcf7-form dd .wpcf7-radio input{
	display:inline !important;
	width:auto !important;
}

.wpcf7-form p{
	text-align:left;
	padding:1em 0 0 0;
	margin:0 0 0 25% !important;
	position:relative;
}

.wpcf7-form p span{
	display:inline !important;
}

.wpcf7-form p input{
	width:8em;
	color:#fff;
	cursor:pointer;
	font-weight:bold;
	padding:0.5em;
	background:#000;
	border:none;
	border-radius:0.25em;
	-moz-border-radius:0.25em;
	-webkit-border-radius:0.25em;
	-o-border-radius:0.25em;
	-ms-border-radius:0.25em;
}

.wpcf7c-hide{
	display: none;
}

.wpcf7c-force-hide{
	display: none !important;
}

.wpcf7c-conf{
	color:#ce1222 !important;
	background-color:transparent !important;
	border:none !important;
}

.ajax-loader{
	display:block;
	max-width:1em !important;
	min-width:1em !important;
	position:absolute;
	top:1.875em;
	left:9em;
}

.screen-reader-response{
	display:none;
}

.wpcf7-not-valid-tip{
	color:#ff0000 !important;
	font-size:0.8em !important;
	margin-top:0.25em;
}

.wpcf7-validation-errors{
	display:block;
	color:#ff0000 !important;
	padding:0 !important;
	margin:1em 0 0 25% !important;
	border:none !important;
}

.wpcf7c-elm-step2.message{
	display:block;
	padding:0 !important;
	margin:1em 0 0 25% !important;
	border:none !important;
}

.wpcf7-mail-sent-ok{
	display:block;
	color:#4c863b !important;
	padding:0 !important;
	margin:1em 0 0 25% !important;
	border:none !important;
}


/* device */

	
	.main{
		position:relative;
	}
	
	.header nav{
		width:100%;
		background:#730051;
		position:relative;
	}
	
	.header nav ul{
	}
	
	.header nav li{
	}
	
	.header nav li a{
		display:block;
		text-decoration:none;
		padding:1.375em 2em 1.625em 2em;
		border-right:1px solid #58003e;
	}
	
	.header nav li a:hover{
		background:#58003e;
	}
	
	.header nav li a img{
		display:block;
		height:1.25em;
		margin:0 0 0.5rem 0;
	}
	
	.header nav li a span{
		display:block;
		padding:0 0 0 1px;
	}
	
	.header nav p a{
		display:block;
		color:#000;
		text-decoration:none;
		padding:1.5em 2em;
		background:#fff;
	}
	
	.header nav p img{
		display:block;
		width:auto;
		height:3em;
	}
	
	.footer{
		padding:1.25em 0;
		position:relative;
	}
	
	.footer address{
		line-height:1.5;
		margin:0 0 0 2em;
	}
	
	.footer p{
		line-height:1.5;
		position:absolute;
		top:1.25em;
		right:2em;
	}
	
	.contents{
		padding:4rem 0 3rem 0;
	}
	
	.ancestor{
		text-align:center;
		padding:0 0 1rem 0;
	}
	
	.ancestor strong{
		display:block;
		font-size:200%;
		letter-spacing:0.1em;
		margin:0 0 0.5em 0;
	}
	
	.ancestor span{
		display:block;
		font-size:800%;
	}
	
	/* index */
	
	#index{
		width:100%;
		height:100%;
	}
	
	#index .header h1{
		position:absolute;
		top:50%;
		left:50%;
		z-index:999;
	}
	
	#index .header h1 img{
		width:160px;
	}
	
	#indexContents01{
		width:100%;
		height:100%;
		position:relative;
	}
	
	#index .slide{
		width:100%;
		height:100%;
		background:#000;
		position:relative;
	}
	
	#index .slide .image li{
		width:100%;
		position:absolute;
		top:0px;
		left:0px;
		opacity:0.92;
	}
	
	#index .slide .image #image01{
		text-indent:-9999px;
		background:url(img/index/image01.jpg) no-repeat center;
		background-size:cover;
	}
	
	#index .slide .image #image02{
		text-indent:-9999px;
		background:url(img/index/image02.jpg) no-repeat center;
		background-size:cover;
	}
	
	#index .slide .image #image03{
		text-indent:-9999px;
		background:url(img/index/image03.jpg) no-repeat center;
		background-size:cover;
	}
	
	#index .slide .thum{
		position:absolute;
		top:4px;
		right:4px;
		z-index:999;
	}
	
	#index .slide .thum ul{
	}
	
	#index .slide .thum li{
		width:28px;
		height:28px;
		float:left;
		cursor:pointer;
		text-indent:-9999px;
		background:url(img/on.png) no-repeat center;
		opacity:0.48;
	}
	
	#index .slide .thum li.on,
	#index .slide .thum li:hover{
		opacity:1;
	}
	
	#index .info{
		display:block;
		width:100%;
		background:#58003e;
	}
	
	#index .footer{
		width:100%;
		position:absolute;
		top:0px;
		left:0px;
	}
	
	/* concept */
	
	#concept .contents p{
		font-size:200%;
		text-align:center;
		line-height:2;
		margin:0 0 1em 0;
	}
	
	#concept .contents p:last-of-type{
		margin-bottom:0;
	}
	
	#concept .contents img{
		max-width:100%;
		min-width:100%;
		height:auto;
	}
	
	/* business */
	
	#business .contents .image{
		margin:0 0 2rem 0;
	}
	
	#business .contents .image img{
		max-width:100%;
		min-width:100%;
		height:auto;
	}
	
	#business .contents .text{
		font-size:200%;
		text-align:center;
	}
	
	#business .contents .text strong{
		display:block;
		margin:2rem 0 0 0;
	}
	
	#business .contents .text span{
		display:block;
		font-weight:bold;
		margin:1rem 0 0 0;
	}
	
	#business h2{
		font-size:150%;
		text-align:center;
		padding:6rem 0 2rem 0;
	}
	
	#business h2 span{
		display:block;
		font-size:400%;
		margin:0 0 0.5rem 0;
	}
	
	.business01 .body dt{
		font-size:300%;
		font-weight:bold;
		line-height:1.25;
		text-align:center;
	}
	
	.business01 .body dd{
		font-size:150%;
		line-height:1.75;
		text-align:center;
		margin:1em 0 0 0;
	}
	
	/* works */
	
	#works .contents ul{
		list-style:none;
		margin:0;
	}
	
	#works .contents li{
		float:left;
		position:relative;
	}
	
	#works .contents li a{
		display:block;
		height:100%;
		padding:100% 0 0 0;
		text-indent:-9999px;
		background-repeat:no-repeat;
		background-position:center;
		background-size:cover;
	}
	
	#works .contents li a:hover{
		opacity:0.64;
	}
	
	#works .contents li span{
		display:block;
		color:#fff;
		width:80%;
		text-align:center;
		position:absolute;
		bottom:1em;
		left:10%;
	}
	
	/* coroporate */
	
	#corporate .contents .image{
		margin-left:1px;
	}
	
	#corporate .contents .image li{
		width:25%;
		float:left;
	}
	
	#corporate .contents .image li span{
		display:block;
		margin:1px 1px 0 0;
	}
	
	#corporate .contents .image img{
		max-width:100%;
		min-width:100%;
		height:auto;
	}
	
	#corporate .contents .post{
		margin-top:2rem;
	}
	
	/* moch */
	
	#moch nav p a{
		background:#f0f0f0;
	}
	
	#moch .contents{
		color:#222;
		background:#fff;
	}
	
	#moch .ancestor{
		margin-bottom:4em;
	}
	
	#moch .ancestor span{
		display:block;
		font-size:150%;
		margin:0 0 0.5em 0;
	}
	
	#moch .ancestor img{
		margin:0 auto;
	}

@media screen and (min-width:769px){
	
	html{
		width:100%;
		height:100%;
	}
	
	body{
		width:100%;
		height:100%;
		font-size:12px;
	}
	
	.header nav li{
		float:left;
	}
	
	.header nav li a:hover img{
		opacity:1;
	}
	
	.header nav li img.logo{
		height:calc(3em - 1px);
		margin:0;
	}
	
	@-moz-document url-prefix(){
		.header nav li img.logo{
			height:3em;
			margin:0;
		}
	}
	
	.header nav li img.text{
		display:none;
	}
	
	.header nav p{
		position:absolute;
		bottom:0px;
		right:0px;
		z-index:999;
	}
	
	.header nav p span{
		display:block;
		float:left;
		margin:1.5em 1.5em 0 0;
	}
	
	.header nav p img{
		float:left;
	}
	
	.contents{
		position:relative;
	}
	
	.post{
		max-width:960px;
		margin-left:auto;
		margin-right:auto;
	}
	
	/* index */
	
	#index .header h1 img{
		position:absolute;
		top:calc(-160px - 4.5em);
		left:-80px;
	}
	
	#index .slide .image li{
		height:calc(100% - 4.5em);
	}
	
	#index .header nav{
		position:absolute;
		bottom:36px;
		left:0px;
		z-index:999;
	}
	
	#index .header nav .home{
		display:none;
	}
	
	#index .info{
		position:absolute;
		bottom:0px;
		left:0px;
		z-index:999;
	}
	
	#index .info h2{
		width:9em;
		float:left;
	}
	
	#index .info h2 span{
		display:block;
		color:#fff;
		font-weight:normal;
		padding:0 2em;
		line-height:36px;
	}
	
	#index .info .text{
		float:left;
		color:#fff;
		line-height:36px;
	}
	
	#index .info .link{
		color:#fff;
		line-height:36px;
		position:absolute;
		top:0px;
		right:2em;
	}
	
	/* concept */
	
	#concept .post{
		max-width:1280px;
	}
	
	.concept01{
		width:50%;
	}
	
	.concept01.upper{
		margin-top:0;
	}
	
	#concept03 br{
		display:none;
	}
	
	/* business */
	
	.business01{
		max-width:960px;
		margin:0 auto;
	}
	
	.business01 .body{
		width:50%;
		float:left;
	}
	
	#business .contents .text strong{
		font-size:300%;
	}
	
	#business .contents .text span{
		font-size:200%;
	}
	
	.business01 .body:first-child dl{
		border-right:1px solid #fff;
	}
	
	/* works */
	
	#works .contents li{
		width:22%;
		margin:4% 4% 0 0;
	}
	
	#works .contents li:nth-child(4n){
		margin-right:0;
	}
	
	#works .contents li:nth-child(-n+4){
		margin-top:0;
	}
}

@media screen and (max-width:768px){
	
	html{
		width:100%;
		height:100%;
	}
	
	body{
		width:100%;
		height:100%;
		font-size:12px;
	}
	
	img{
		max-width:100%;
		min-width:100%;
		height:auto;
		margin:0 auto;
	}
	
	iframe{
		width:100%;
		height:96vw;
	}
	
	.header h1 img{
		max-width:inherit;
		min-width:inherit;
		height:auto;
	}
	
	.header nav li{
		width:33.333%;
		float:left;
	}
	
	.header nav li img.logo{
		display:none;
	}
	
	.header nav li img.text{
		display:block;
		height:1.2em;
	}
	
	.header nav li a{
		padding:1em;
		border-top:1px solid #58003e;
	}
	
	.header nav li:nth-child(-n+3) a{
		border-top:none;
	}
	
	.header nav li img{
		max-width:inherit;
		min-width:inherit;
		margin:0 auto !important;
	}
	
	.header nav li span{
		display:none !important;
	}
	
	.header nav p a{
		text-align:center;
	}
	
	.header nav p span{
		display:block;
		margin:0 0 1em 0;
	}
	
	.header nav p img{
		max-width:inherit;
		min-width:inherit;
		margin:0 auto;
	}
	
	.post{
		margin-left:3vw;
		margin-right:3vw;
	}
	
	.footer span{
		display:none;
	}
	
	/* index */
	
	#index .header h1 img{
		position:absolute;
		top:calc(-160px - 9em);
		left:-80px;
	}
	
	#index .slide .image li{
		height:calc(100% - 9em);
	}
	
	#indexContents01{
		width:100%;
		position:relative;
	}
	
	#index .header nav{
		position:absolute;
		bottom:3em;
		left:0px;
		z-index:999;
	}
	
	#index .info{
		display:block;
		padding:1em 0;
		position:absolute;
		bottom:0px;
		left:0px;
		z-index:999;
	}
	
	#index .info h2{
		width:8em;
		float:left;
	}
	
	#index .info h2 span{
		display:block;
		color:#fff;
		font-weight:normal;
		padding:0 1em;
	}
	
	#index .info .text{
		float:left;
	}
	
	#index .info .link{
		display:none;
	}
	
	/* business */
	
	#business .contents .text{
		line-height:1.75;
	}
	
	#business .contents .text strong{
		font-size:200%;
	}
	
	.business01 .body dl:first-child{
		margin-bottom:2rem;
	}
	
	/* works */
	
	#works .contents li{
		width:49%;
		margin:2% 2% 0 0;
	}
	
	#works .contents li:nth-child(2n){
		margin-right:0;
	}
	
	#works .contents li:nth-child(-n+2){
		margin-top:0;
	}
	
	/* moch */
	
	#moch .contents{
		padding-top:4em;
		padding-bottom:4em;
	}
	
	#moch .ancestor img{
		max-width:40%;
		min-width:40%;
	}
}

@media screen and (min-width:481px){
}

@media screen and (max-width:480px){
	
	.contents{
		padding:0 3vw;
	}
	
	iframe{
		width:100%;
		height:96vw;
	}
	
	#index .footer{
		display:none;
	}
	
	#index .header h1 img{
		position:absolute;
		top:calc(-120px - 9em);
		left:-60px;
	}
	
	#index .header h1 img{
		width:120px;
	}
	
	/* concept */
	
	#concept .contents p{
		text-align:left;
	}
	
	#concept .contents p br{
		display:none;
	}
	
	/* business */
	
	#business .contents .text{
		text-align:left;
	}
	
	#business .contents .text strong{
		font-size:125%;
		text-align:center;
	}
	
	#business .contents .text span{
		text-align:center;
	}
}