/*
Website:KOEI-PRO
Author:THE CONDITIONER
*/

@charset "UTF-8";

/*html5doctor.com Reset Stylesheet v1.6.1 Last Updated:2010-09-17 Author:Richard Clark - http://richclarkdesign.com Twitter:@rich_clark */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var,b, i, dl, dt, dd, ol, ul, li,fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body{line-height:1;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}nav ul{list-style:none;}blockquote, q{quotes:none;}blockquote:before, blockquote:after,q:before, q:after{content:'';content:none;}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}*,*::before,*::after{box-sizing:border-box;}
/* change colours to suit your needs */
ins{background-color:#ff9;color:#000;text-decoration:none;}
/* change colours to suit your needs */
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}del{text-decoration:line-through;}abbr[title], dfn[title]{border-bottom:1px dotted;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
/* change border colour to suit your needs */
hr{display:block;height:1px;border:0; border-top:1px solid #ccc;margin:1em 0;padding:0;}
input, select{vertical-align:middle;}/* Reset is over */
ul{ list-style-type:none; }
input{ font-size:16px; }/*avoiding to zoom the area*/

/*==================================
	共通項目
==================================*/

body	{ font-family:"Noto Serif JP","游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;  /*font-size :14px; basefont size */
	color:rgba(0,0,0,0.9); line-height:1.5em; /*background:#faf8f5;*/
}

a		{ text-decoration:none;	color:#111; }
a:link		{ text-decoration:none;	color:#111; }
a:visited	{ text-decoration:none;	color:#111; }
a:active	{ text-decoration:none;	color:#F19337; }
a:hover		{ text-decoration:none;	color:#111; font-weight:900; }

/*body.home	{ background:url("img/bg.jpg") 0 600px repeat-y; background-size:cover; }
body:not(.home) { background:url("img/bg.jpg") 0 -30px fixed; background-size:cover;  }*/

.cf:after	{ content:" "; display:block; clear:both; height:0; visibility:hidden; }
.cf		{ min-height:1px; /*font-size:0.1em;*/ }
* html .cf	{ height:1px; /*¥*//*/
	height:auto; overflow:hidden; /**/
}


/*------------------------------
 ▼メニュー
 -------------------------------*/
body.home #header	{ width:90vw; margin:0 auto; display:flex; justify-content:space-between; align-items:center; height:80px; background:transparent; }
body:not(.home) header	{ width:100%; background:#444; }
body:not(.home) #header	{ width:90vw; margin:0 auto; display:flex; justify-content:space-between; align-items:center; height:80px; background:#444; }
#header .logo 		{ align-self:center; }
#header .logo > a,
body.home #header h1 > a{ display:block; width:300px; height:auto; background:url(img/logo.png) no-repeat 50% 50%; background-size:contain; white-space:nowrap; text-indent:100%; overflow:hidden; }
#header nav ul		{ display:flex; justify-content:flex-end; }
#header nav ul li	{ display:block; font-size:16px; padding:1rem; color:#fff; }
#header nav ul li:hover	{ background-color:#228b22; }
#header nav ul li a	{ color:#fff; }
#header .btn-gnavi	{ display:none; }

@media screen and (max-width:767px) {
body.home #header, body:not(.home) #header	{ height:65px!important;  }
#global-navi		{ display:block; position:relative; width:100vw;}
#header .logo a		{ position:absolute; display:block; top:0; right:10px; z-index:1; width:230px; height:60px; }
#wrapper nav		{ position:fixed; top:60px; left:-350px; width:300px; height:100%; padding-top:0; background:#fff; font-size:16px; box-sizing:border-box; z-index:2; }
#wrapper nav ul		{ display:block; }
#wrapper nav ul li	{ padding:20px 28px; border-bottom:1px solid #ddd; }
#wrapper nav ul li a	{ display:block; text-decoration:none; color:#333; }
#wrapper nav ul li a:hover { background-color:#ddd; }
body.home #wrapper .btn-gnavi	{ display:none; }
#wrapper .btn-gnavi	{ position:absolute; top:20px; left:20px; width:30px; height:24px; z-index:3; box-sizing:border-box; cursor:pointer; transition:all 400ms; display:block; }
#wrapper .btn-gnavi span{ position:absolute; width:30px; height:4px; background:#fff; border-radius:10px; transition:all 400ms }
#wrapper .btn-gnavi span:nth-child(1)	{ top:0; }
#wrapper .btn-gnavi span:nth-child(2)	{ top:10px; }
#wrapper .btn-gnavi span:nth-child(3)	{ top:20px; }
#wrapper .btn-gnavi.open	{ transform:rotate(180deg); }
#wrapper .btn-gnavi.open span	{ background:#fff;}
#wrapper .btn-gnavi.open span	{ width:24px;}
#wrapper .contents section p	{ position:absolute; top:50%; width:30%; line-height:1.4; font-size:20px; color:#fff; text-shadow:0 0 6px #666; }
#wrapper .contents section:nth-child(odd) p	{ left:10%; }
#wrapper .contents section:nth-child(even) p	{ right:10%; }
}



/*------------------------------
 ▼共通デザイン（モバイル向け）
 -------------------------------*/
#wrapper	{ width:100%; margin:0 auto; clear:both; }
#main		{ width:100%; }
#footer		{ width:100%; text-align:center; font-size:.7rem; color:#fff; background-color:#444; }
section		{ padding:0 0 1rem 0; margin:0 0 1rem 0; }
#container	{ padding:1vh 2vw; }

h2,h3,h4,h5,h6	{ display:block; padding:.3rem 0; margin:0 0 .5rem 0; font-weight:900; }
h2	{ font-size:1.2rem; }
h3	{ font-size:1.1rem; }
h4	{ border-left:2px solid beige;}
h5	{ font-size:1.1rem; margin:2rem 0; padding:.5rem; border-bottom:1px solid #444;}


body:not(.home) h1 { position:relative; display:inline-block; margin:1em auto 1em auto; text-align:center;width:100%; font-size:1.6rem; }
/*body:not(.home) h1:before { content:''; position:absolute; bottom:-20px; display:inline-block; width:4rem; height:5px; left:50%; transform:translateX(-50%); background-color:#228b22; border-radius: 2px; }*/
body:not(.home) h1 span	{ display:block; font-size:1rem; font-family:"Noto Serif JP", sans-serif; color:#333; margin:.5rem 0; }

.heading { position:relative; display:inline-block; margin:1em auto 1em auto; text-align:center;width:100%; font-size:1.5rem; }
.heading:before { content:''; position:absolute; bottom:-20px; display:inline-block; width:4rem; height:5px; left:50%; transform:translateX(-50%); background-color:#228b22; border-radius: 2px; }

.block-makerdetail	{ position:relative; }
.backhome a		{ position:absolute; left:0; top:1.5rem; padding:.5rem; z-index:1; cursor:pointer; }
.backhome a::before	{ font-family:"Font Awesome 5 Free"; content:"\f053"; font-weight:900; font-size:1.3rem;color:#444; width:2rem; height:2rem; }
.backhome a:hover	{ opacity:.5; }

.thin		{ font-weight:400; }
.bold, strong	{ font-weight:900; }
.center		{ text-align:center; }
.smaller	{ font-size:.6rem; }

.readmore a		{ display:block; margin:.5rem auto; padding:.5rem; text-align:center; border:1px solid #444; width:8rem; border-radius:5px; }
.readmore a::after	{ font-family:"Font Awesome 5 Free"; content:"\f054"; font-weight:900; font-size:1rem; color:#444; width:2rem; height:2rem; margin-left:.5rem; }

.frame-wrapper__video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  margin-bottom: 50px;
}

.frame-wrapper__video iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/*トップページ*/
.home			{  }
.mainvisual		{ height:70vh; margin-top:-6rem; margin-bottom:0; z-index:0; position:relative; /*background:url(img/bg.jpg);*/ background-size:cover; background-color: rgba(0,0,0,.3); background-blend-mode: overlay; }
.mainvisual .inner 	{ position:relative; width:90vw; padding-top:7rem; height:auto; top:50%; left:50%; transform:translateY(-50%) translateX(-50%); }
.mainvisual .inner h2 img	{ width:250px; height:auto; display:block; margin:0 auto; }
.mainvisual .inner .description	{ padding:.8rem; width:90vw; margin:0 auto; color:#fff; text-align:center; line-height:1.5; }

.block-maker	{ width:100vw; margin:0 auto; padding:3rem 10vw; text-align:center;  }
.block-maker h2	{  }
.block-maker h2 span	{ display:block; font-size:1rem; font-family:'Open Sans Condensed', sans-serif; color:#333; }
.block-maker h2 { position: relative; display: inline-block; padding: 0 55px; }
.block-maker h2:before,
.block-maker h2:after { content: ''; position: absolute; top: 50%; display: inline-block; width: 45px; height: 2px; border-top: solid 1px black; border-bottom: solid 1px black; }
.block-maker h2:before	{ left:0; }
.block-maker h2:after	{ right: 0; }

.flex		{ display:flex; justify-content:space-between; flex-wrap: wrap; margin:2rem 0; }
.maker		{ padding:1.5rem; width:100%; }
.maker i	{ margin:1rem auto; display:block; }
.maker h3	{  }
.maker p	{ text-align:left; }

.maker img.prof	{ width:150px; height:150px; object-fit:cover; object-position: 100% 10%; border-radius:50%; }
.maker h3 span	{ display:block; font-size:.8rem; }

.block-maker table.company	{ padding:0 0 15px 0; margin:0 auto; }
.block-maker table.company tr		{  }
.block-maker table.company tr th	{ white-space:nowrap; }
.block-maker table.company tr th,
.block-maker table.company tr td	{ padding:1rem; text-align:left; border-bottom:1px solid #ccc;  }

.block-maker .boxinbox ul { list-style-type:none; }
.block-maker .boxinbox li { padding:2px 2px 10px 0; margin:2px 0; background: url(img/li.gif) no-repeat; border-bottom:1px dotted #ccc; }
.block-maker .boxinbox li .date {	font-size:.8rem; text-align:left; }
.block-maker .boxinbox li .work{ text-align:left; }

dl.prof > div {
    display: flex;
    flex-wrap: wrap;
	width:100%;
	 text-align:left;
	margin:1rem 0;
	padding:.5rem ;
	border-bottom:1px dotted #ccc;
}
dt {
    width: 150px;
}
dd {
    width:calc (100% - 160px); text-align:left;
}

/*-------------------------------
 ▼大型画面向けデザイン（PCなど）
 --------------------------------*/
@media screen and (min-width:768px) {
	#header	{ position:relative; z-index:100; }
	.mainvisual	{ z-index:0; }
	.flex		{ flex-wrap: nowrap; }
	.block-maker .boxinbox li .date { text-align:center; }
	.block-maker .boxinbox li .work{ text-align:center; }

	.loader	{ }
	.maker	{ width:100%; margin:0 1%; float:left;  }
	.maker a	{ border:1px solid #ccc; }
	.maker .box-l		{ width:25%; }
	.maker .box-l img.pic	{ width:100px; height:100px; }

	.makerdetail .maker article	{ width:48%; margin:0 1%; float:left; margin-bottom:2rem; }
	.makerdetail .wom article	{ width:31%; margin:0 1%; float:left; margin-bottom:2rem; }

	body.genba .maker article img.pic,
	body.kuchikomi .maker article img.pic { width:50%; height:auto; margin:1rem 0; object-fit:cover; border:1px solid #ccc; transform:translateX(50%); }
	br.sp		{ display:none; }
}