@charset "utf-8";

html { font-size:14px; overflow:auto; -webkit-text-size-adjust: 100%; }
body { margin:0; padding:0; height:100%;
	line-height:1.8; color:#333; overflow:hidden;
	font-family: "メイリオ", "Meiryo", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
	}

body, h1, h2, h3, h4, p, dl, dd, ul, a, form, textarea, figure { margin:0; padding:0; font-size:100%; box-sizing:border-box; }

img, input[type="image"] { max-width:100%; font-size:0; line-height:0; vertical-align:bottom; }
ul { list-style-type:none; }
fieldset { border:none; }
strong { font-size:1.2em; }
em { font-style:normal; font-weight:bold; }
th{ font-weight:normal; }
label { display:inline-block; }
table { border-collapse:collapse; border-spacing:0; }
input[type="radio"] { vertical-align:-1px; }
input[type="checkbox"] { vertical-align:middle; }
img{ border:0; vertical-align:bottom; }

article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; }
div,p,ul,li,dt,dd,h4{ box-sizing:border-box; }

/*回り込み解除clearfix*/
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

/* 共通 ------------------------ */
a { color:#333; text-decoration:none; }
a:active, a:hover { color:#c12e27; text-decoration:none; }
a img { border-width:0px; }

.serif {
	font-family:
		"游明朝体", "Yu Mincho", YuMincho,
		"ヒラギノ明朝 ProN W6", "HiraMinProN-W6",
		"ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; }
.left   { text-align:left; }
.center { text-align:center; }
.right  { text-align:right; }
.small  { font-size:0.85em; }
.big    { font-size:1.2em; }
.bold { font-weight:bold; }
.indent{ text-indent: -1em; padding-left: 1em; }
.attention{ color:#B20000; }
.clear { clear:both; }
.hide { display:none; }
.iblock { display:inline-block; }
.shadow{ box-shadow:3px 3px 3px rgba(0,0,0,0.3); }

.top_radius{ border-top-left-radius:10px; border-top-right-radius:10px; }

ul.disc, ul.square { padding-left:1.3em; }
.disc li { list-style-type:disc; }
.square li { list-style-type:square; }
.upper-alpha li { list-style-type:upper-alpha; }
ul.upper-alpha, ol { margin-left:1.5em; padding:0; }

ul.col3 li { float:left; width:33.33%; }

img.middle { vertical-align:middle; }

.bgGray{ background-color:#e0e0e0; }
.white { color:#FFF; }
.red { color:#af1a13; }
.blue { color:#0d5c81; }
.orange { color:#F75A0D; }
.yellow { color:#FFC40E; }

.fleft { float:left; }
.fright { float:right; }

.flex{ display: -webkit-flex; display: flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; }
.around{ justify-content:-webkit-space-around; justify-content:space-around; }/*横揃え*/
.between{ justify-content:-webkit-space-between; justify-content:space-between; }/*横揃え*/

.pc_none { display:none; }

.is-empty {
    height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

a, .anime {
	-ms-transition: all .6s;
	transition: all .6s;
}

#wrapper { margin:0; }
.inner{ position:relative; max-width:960px; margin:0 auto; }


/*loader------------------------*/
#loader{
    width: 54px;
    height: 55px;
    display: none;
    position: fixed;
    _position: absolute;     /* IE6対策 */
    top: 50%;
    left: 50%;
    margin-top: -40px;       /* heightの半分のマイナス値 */
    margin-left: -40px;      /* widthの半分のマイナス値 */
    z-index: 200;             /* #fadeより多い値を入れて下さい */
}
#fade{
    width: 100%;
    height: 100%;
    display: none;
    background-color: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;              /* #loaderより少ない値を入れて下さい */
}

/*header------------------------*/
header{ width:100%; height:80px; background:#fff; }
header .inner{ width:100%; min-width:1000px; }
.fixed{ position:fixed; top:0; left:0; z-index:100; width:100%; }
#logo{ position:absolute; top:21px; left:20px; width:220px; }

.header--clone {
  z-index: 1000!important;
  width:100%;

  /* Additional styles */
  background: #fff!important;
}

.header--clone
.header--clone #logo{ left:40px; }


/* gnav */
#gNav{ position:absolute; top:15px; right:174px; }
#gNav ul { height:55px; }
#gNav li { float:left; margin-right:9px; }
#gNav li a{ display:inline-block; position:relative; height:55px; }
#gNav li img { display:block; position:absolute; top:0; }

#gNav li.works a  { width:78px; }
#gNav li.concept a{ width:176px; }
#gNav li.produce a{ width:74px; }
#gNav li.flow a   { width:97px; }
#gNav li.company a{ width:81px; }
#gNav li.recruit a{ width:84px; }


#gNav li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  background-color: #176f98;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

#gNav li a:hover::after,
#gNav li.current a::after {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

.hbtn{ position:absolute; top:10px; right:20px; }
{ display:block; width:40px; height:36px; margin-right:10px; padding:12px 10px; background:#c12e27; }

.hbtn1 li{ float:left; }
.h_access a{ margin-right:5px; }
.h_access a,.h_contact a{ display:block; width:60px; height:60px; margin-right:10px; padding:12px 10px; background:#c12e27; }
.h_access a:hover,.h_contact a:hover{ background:#176f98; }

.hbtn{ float:right; }
.hbtn .sns-insta { margin-top:15px; }

#sp_h{ display:none; }

/*contetns------------------------*/
#contents{ box-sizing:border-box; background:#fff; border:solid 20px #fff; border-top:0; }
section{ position:relative; margin-bottom:20px; }
.secTtl,
.works_tlt{ position:relative; z-index:10; width:100%; max-width:536px; height:65px; margin:0 auto; text-align:center; background:url(../img/bg_ttl.png) no-repeat 0 0; background-size:contain; }
.secTtl_short{ position:relative; z-index:10; width:100%; max-width:415px; height:65px; margin:0 auto; padding:0 25px; background:url(../img/bg_ttl_short.png) no-repeat 0 0; background-size:contain; }

/*作品集*/
.worksList{ padding:60px 0; }
.worksList li{ width:33.3333%; padding:0 0 20px; text-align:center; border-left:1px solid #fff; border-bottom:1px solid #fff; box-sizing: border-box; }
.worksList li:not(:nth-child(-n+3)){ padding:20px 0; }
.worksList .con a{ display:block; width:93%; margin:0 auto; /*background:#fff;*/ box-sizing: border-box; }
.worksList .con a:hover{ color:#333; }
.worksList li img { width: 300px; }
.worksList .key{ padding:5px 10px 0; font-size:12px; text-align:left; color:#176f98; /*background:#fff;*/ /*border-top:1px solid #9a9a9a; */margin-top:10px; }
.worksList .name{ padding:0 10px 5px; text-align:left; border-bottom:1px solid #166e98; /*background:#fff;*/ }
.worksList .data{ font-size:12px; padding:5px 10px 0; text-align:right; /*background:#fff;*/ }

/*こだわり*/
.meritList{ padding-left:50px; text-align:center; }
.meritList dt,.meritList dd{ margin-bottom:20px; font-size:23px; font-weight:bold; }
.meritList dt{ float:left; width:367px; height:73px; padding:24px 13px 0 0; color:#0d5c81; background:url(../concept/img/merit.png) no-repeat; }
.meritList dd{ float:left; width:349px; height:73px; padding:24px 0 0 13px; color:#af1a13; background:url(../concept/img/result.png) no-repeat; }


/*お問合わせ*/
#contactBox .txt{ margin:30px 0; text-align:center; font-size:23px; }
.contactList li{ width:50%; padding:20px; border-top:1px solid #fff; border-bottom:1px solid #fff;box-sizing:border-box; }
.contactList li:first-child{ border-right:1px solid #fff; }

.contactList li.tel a{ display:block; width:100%; height:125px; padding:40px 0 30px; text-align:center; background:url(../img/arrow_blue.png) no-repeat 98% 91%; background-color:#fff; border-radius:5px; }
.contactList li.mail a{ display:block; width:100%; height:125px; padding:48px 0 30px; text-align:center; background:url(../img/arrow_blue.png) no-repeat 98% 91%; background-color:#fff; border-radius:5px; }
.contactList li.mail a:hover{ background-color:#f0f0f1; }

/*footer------------------------*/
footer{ position:relative; width:100%; background:#fff; }
#pagetop{ position:absolute; bottom:0; left:50%; margin-left:-75px; z-index:100; }

#fNav{ padding:25px 20px; font-size:13px; }
#fNav > ul > li{ float:left; width: 13%; padding-left:12px; background:url(../img/icon_fnav.png) no-repeat 0 7px; }
#fNav > ul > li:last-child{ margin-right:0; }
#fNav li.f_concept{ min-width:180px!important; }

#footerBottom{ padding:25px 0 10px; text-align:center; color:#fff; background:#176f98; }
#footerBottom .address{ padding:15px 0 10px; font-size:13px; }
#footerBottom .address a{ color:#fff; }
#copy{ font-size:10px; color:#7ba3bb; }

.f-policy { padding-top: .5em; }
.f-policy a { font-size: 13px; color: #dae6ed; }


/*アニメーション------------------------*/
.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-10px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


@media screen and (max-width: 1100px) {
#pc_h,
.header--clone{ display:none; }

header{ position:fixed; z-index:1000; }

#sp_h{ display:block; }
/*menu*/
.drawer-hamburger{
	top:20px!important;
	margin-right:20px;
	padding: 10px 8px 20px 8px!important;
	background-color:#176f98!important;
}
.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
	background-color: #fff!important;
}
.drawer-open .drawer-hamburger-icon {
    background-color: transparent!important;
}
.drawer-menu li{
	margin:0 10px 10px;
	padding-left:10px;
	background:url(../img/icon_fnav.png) no-repeat 0 50%;
	background-size:8px;
	border-bottom:1px solid #176f98;
}

}


@media screen and (max-width: 959px) {
.inner{ padding:0 10px; }

.contactList li.tel p { padding: 0; }
.contactList li.mail a{ padding:48px 20px 30px; }

#fNav{ display: none; }

}

@media screen and (max-width: 599px) {
.inner { padding:0; }
.sp_none { display:none; }
.pc_none { display:inline-block; }

header{ height:70px; }
#logo{ top:20px; left:10px; width:150px; }

.drawer-hamburger{ top:13px!important; margin-right:10px; }

#container,
#contents{ border:0!important; border-bottom:solid 20px #fff!important; }
.radio{ right:0!important; }

.secTtl, .works_tlt,
.secTtl_short{ max-width: none; height: 60px; background:#fff; }

.worksList li{ width:50%; padding: 0 0 12px; }
.worksList li:not(:nth-child(-n+2)){ padding:12px 0; }

.contactList li { width: 100%; }
.contactList li:first-child{ border-right:none; border-bottom:none; }

.contactList li.tel a{ height:102px;  padding: 36px 20px 19px; }
.contactList li.mail a { height:102px;  padding: 36px 20px 19px; }
#contactBox .txt{ font-size:15px; }


}