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

/* COMMON */
body{ font-family:"メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; line-height:100%; margin:0; padding:0; min-width:980px;}
html{ margin:0; padding:0;}
input{ color:; text-decoration:;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;}
a{ text-decoration:none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
color:#000000;
}
.alpha a:hover { color:#333333;}
.alpha a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
     -webkit-transition: 0.3s ease-in-out;
     -moz-transition: 0.3s ease-in-out;
     -o-transition: 0.3s ease-in-out;
     transition: 0.3s ease-in-out;
}
.kadomaru{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;}
.kadomaru-l{
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-o-border-radius: 12px;
-ms-border-radius: 12px;}
.circle-120{
-moz-border-radius: 120px;
-webkit-border-radius: 120px;
-o-border-radius: 120px;
-ms-border-radius: 120px;}

.skip-link{ display:none;}
.nodisplay{ display:none;}
.left{ float:left;}
.right{ float:right;}
img.noborder{ border:none!important;}
.clearfix:after {
  overflow: hidden;/* 隙間対応 */
  font-size: 0.1em;/* 隙間対応 */
  line-height: 0;/* 隙間対応 */
}
.min{ font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;text-shadow: 0px 0px 1px rgba(0, 0, 0, .1);}
@import url(//fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);
.serif{
font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
text-shadow: 0px 0px 1px rgba(0, 0, 0, .1);}
.red{ color:#ff0000;}
#menu-toggle{ display:none;}

/*FLEXSLIDER設定*/
.flexslider{ border: none!important; margin:0px!important; height:100%}
.flex-control-nav{ bottom: 10px!important; right:0!important; z-index:10; width:100px;}

/*スクロールボタン設定*/
#home a {
	padding-top: 70px;
}
#home a span {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb 1.5s infinite;
	animation: sdb 1.5s infinite;
	box-sizing: border-box;
}
@-webkit-keyframes sdb {
	0% {
		-webkit-transform: rotate(-45deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		-webkit-transform: rotate(-45deg) translate(-20px, 20px);
		opacity: 0;
	}
}
@keyframes sdb {
	0% {
		transform: rotate(-45deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: rotate(-45deg) translate(-20px, 20px);
		opacity: 0;
	}
}




/*背景設定*/
body{background-image: url(images/bg_body.png); background-position:center; background-repeat:repeat-y; background-color:#d3d3d4}


/*ヘッダー*/
#start{ position:fixed;z-index:1000; width:100%; height:108px; background-color: #ffffff;}
#top { max-width:1200px; margin:0 auto;}
#top a{ display: inline-flex; align-items: center; font-size:25px; padding-top:10px}
#top a strong{font-weight:bold}
#top a img{ width:90px; height:auto; display: block; margin-right:5px}
#top .title{ height: 30px; display: block;}
#top i{ height:100%; display: inline-flex; align-items: center; font-size:14px; font-weight: bold; white-space: nowrap; background-color: #ec1b2f; color: #ffffff; padding:0 15px; border-radius:0 0 10px 10px}
/*#top .title::after{ content: ""; display: block; width:100%; height: 1px; background-color: #ec1b2f;}*/
.title-sp {display: flex; justify-content: center; align-items: center; font-size:14px; font-weight: bold; white-space: nowrap; background-color: #ec1b2f; color: #ffffff; padding:5px 0; margin-bottom: 10px;}
.header { position: relative; height:100px; width:100%;}
.header .navigation ul{ display: flex; position:absolute; top:0; right:0; justify-content: flex-end; max-width:768px; height: 100px;}
.header .navigation li{ border-bottom:8px solid #ec1b2f; margin:0 15px; height: 100px; display: flex; align-items: center;}
.header .navigation li:last-child{ margin-right:0; color: #ffffff; background-color: #ec1b2f; text-align:center}
.header .navigation li:last-child a{ padding:10px 15px 0 15px; color: #ffffff;}
.header .navigation li:last-child i{ display: block;}
.header .navigation li a{ font-weight:bold; display: flex; align-items: center; justify-content: center; height: 100%; flex-direction: column;}
.header .navigation li a:hover{ background-color: rgba(255, 0, 0, .05);}
.header .navigation li:last-child a:hover{ background-color: rgba(0, 0, 0, .05); color: #ffdddd;}
.eyecatch{ padding-top:108px; border-bottom:25px solid #ec1b2f}
.eyecatch img{ width:100%; display: block;}
.introduction { border-bottom:25px solid #ec1b2f; padding-bottom:50px}
.introduction .image{ max-width:1000px; text-align: center; margin:50px auto}
.introduction .image figcaption{ width:640px; margin:25px auto; text-align: justify; font-size:21px; line-height:1.8}
.introduction ul{ width:930px ; display: flex; margin:25px auto; justify-content: space-between; padding-top:100px}
.introduction li{ width:290px; background-color:#d3d3d4; position: relative;}
.introduction li i{ position: absolute; top:-120px;}
.introduction li figure{ width:235px; margin:15px auto}
.introduction li figure img{ display: block; width:100%}
.introduction li figcaption{ font-size:21px; font-weight:bold; color:#ffffff; padding:10px 0; text-align:center; background-color:#ec1b2f} 
.introduction li .text{ display:block; font-size:13px; width:235px; margin:15px auto; line-height:1.5;}
.introduction li .text strong{ display: block; font-size:18px; font-weight:bold; margin-bottom:10px}
.work { border-bottom:25px solid #9fa0a0}
.work .block{ max-width:1600px; position: relative; overflow: hidden; height:500px; margin:0 auto}
.work .block:first-child figure img{ position:absolute; right:calc(50% - 140px)}
.work .block:first-child figcaption{ position:absolute; left:calc(50% + 140px)}
.work .block:last-child figure img{ position:absolute; left:calc(50% - 140px)}
.work .block:last-child figcaption{ position:absolute; right:calc(50% + 140px)}
.work .block figcaption{ width:340px; padding-top:175px}
.work .block figcaption strong{ display: block; font-weight: bold; color:#ec1b2f; padding:15px; font-size:36px; border-bottom:5px solid #4b4a54}
.work .block figcaption .text{ display: block; line-height:1.8; font-size:16px; padding:15px}
.staff{ border-bottom:25px solid #9fa0a0; padding:50px 0;}
.staff .block{ max-width:1300px; margin:0 auto; position: relative;}
.staff .block figure{ max-width:1300px; width:100%; height:626px; position: relative;}
.staff .block figure img{position: relative; width:100%}

.staff .block h2{ top:-125px; left:-75px; position:absolute}
.career { border-bottom:25px solid #9fa0a0}
.career .block{ width:900px; margin:50px auto; position: relative; padding:50px 0 0 0}
.career .block h2{ top:-100px; left:-275px; position:absolute}
.career .block p{ width:800px; padding:15px; border:2px solid #000000; font-size:23px; line-height: 1.8; text-align:center; margin:0 auto}
.career .block p i{background: linear-gradient(transparent 60%, #ec1b2f 60%);}
.career .block figure{ text-align:center; padding:50px 0}
.career .block figure:last-child{ border-top:1px solid #000000}
.youkou .block{ width:750px; margin:50px auto; position: relative;}
.youkou .block h2{ top:-125px; left:-325px; position:absolute}
.youkou .block .midashi{ font-weight:bold; font-size:24px; margin-bottom:25px}
.youkou .block h3{ border-left:30px solid #ec1b2f; background-color: #e2e2e2; font-size:24px; font-weight:bold; padding:15px; margin-bottom:25px}
.youkou .block .syokusyu{ width: calc(100% - 30px); margin-left:30px; line-height:1.5; margin-bottom:25px; font-size:15px}
.youkou .block .syokusyu tr{ border-bottom:1px dotted #000000}
.youkou .block .syokusyu tr:last-child{ border-bottom:none}
.youkou .block .syokusyu th{ padding:15px; border-right:1px solid #000000; width:90px}
.youkou .block .syokusyu td{ padding:15px; }
.youkou .block .kyoutsu{ width: calc(100% - 30px); margin-left:30px; line-height:1.5; margin-bottom:25px; font-size:15px}
.youkou .block .kyoutsu tr{ border-top:1px dotted #000000}
.youkou .block .kyoutsu tr:last-child{ border-bottom:1px dotted #000000}
.youkou .block .kyoutsu th{ padding:15px;}
.youkou .block .kyoutsu td{ padding:15px; }
.youkou .block .note{ margin-left:45px; padding:15px 0; font-size:15px; text-indent:-15px; line-height: 1.5;}
section.entry {padding:0 0 50px 0; border-bottom:25px solid #9fa0a0}
.entry form{ width:900px; margin:0 auto; background-color:#efefef; padding:0 0 50px 0; border-bottom:25px solid #ec1b2f}
.entry form h2{ font-size:48px; color:#ffffff; text-align: center; font-weight:bold; padding: 35px 0 25px 0; background-color:#ec1b2f; line-height:1px}
.entry form .arrow{ text-align:center}
.entry form .lead{ font-size:13px; text-align:center; padding:15px 0}
.entry form table{ width:730px; margin:0 auto; border-top:1px dotted #000000;}
.entry form tr{ border-bottom:1px dotted #000000;}
.entry form th{ padding:25px 0; text-align:right; font-size:14px; color:#3187fa; vertical-align: middle; white-space: nowrap;}
.entry form th i{ display: inline-block; padding:10px; background-color: #000000; color:#ffffff; margin-left:5px}
.entry form td{ padding:25px 0 25px 15px; vertical-align: middle;}
.entry form .middle{ width:40%; padding:5px 0}
.entry form .short{ width:30%; padding:5px 0}
.entry form .long{ width:90%; padding:5px 0}
.entry form textarea{ width:90%!important; height:120px!important}
.entry form .set{ padding:10px 0}
.entry form .set select{ padding:5px 0}
.entry form .check{ padding:15px 0; text-align: center;}
.entry form .submit {padding-top:25px}
.entry form .submit button{ width:300px; padding:15px 0; text-align: center; border:none; background-color:#ec1b2f; color:#ffffff; margin:0 auto; font-size:21px; display: block;cursor: pointer;}
.about { padding:50px 0;}
.about .block{ width:730px; margin:0 auto; position: relative;}
.about .block h2{ top:-100px; left:-325px; position:absolute}
.about .block h3{ font-weight:bold; font-size:24px; margin-bottom:25px}
.about .block table{ margin-bottom:50px; width:100%; font-size:14px}
.about .block th{ padding:15px; border:1px solid #000000; width:200px; background-color:#efefef}
.about .block td{ padding:15px; border:1px solid #000000}
.footer { border-bottom:25px solid #9fa0a0;}
.footer .block{ width:820px; margin:50px auto; display: flex; justify-content: space-between; }
.footer figure { display: inline-flex; align-items: center;}
.footer figure img{ width:110px;}
.footer figcaption{ font-size:40px; color:#595755; font-weight:bold}
.footer table{ font-size:12px;}
.footer th{ padding:5px 0}
.footer th i{ display: inline-block; padding:5px; font-size:14px; color: #ffffff; background-color:#595755; margin-right:5px; width:80px; text-align:center}
.footer td{ padding:5px 0 0 5px}
.footer td strong{ font-size:16px; font-weight:bold}

.thankspage .thanks{ padding:250px 0; text-align:center}
.thankspage .thanks h1{ font-size:40px; font-weight:bold; margin:25px 0 50px 0}
.thankspage .thanks figure img{ width:200px;}
.thankspage .thanks figcaption{ font-size:28px; font-weight:bold; padding:25px 0}
.thankspage .thanks .text{ max-width:600px; margin: auto; font-size:18px; line-height:1.8; text-align:left; padding:25px 0; width:90%}
.thankspage .thanks .button a{ width:300px; padding:15px 0; text-align: center; border:none; background-color:#ec1b2f; color:#ffffff; margin:0 auto; font-size:21px; display: block;cursor: pointer;}

.mfp_element_submit, .mfp_element_reset, .mfp_element_button, button.mfp_next, button.mfp_prev{ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, from(#ec1b2f), to(#ec1b2f)); text-shadow: none;}

div#mfp_phase_confirm div#mfp_phase_confirm_inner {max-width: 750px!important; width:95%!important; margin: 0 auto!important;}
div#mfp_phase_confirm h4{ margin-bottom:25px}
table#mfp_confirm_table tr th, table#mfp_confirm_table tr td {font-size: 16px!important;padding: 15px 10px!important;}
.mfp_element_submit, .mfp_element_reset, .mfp_element_button, button.mfp_next, button.mfp_prev{ color:#ffffff}

/*===============================================
●各種ギミック
===============================================*/

/* 画面外にいる状態 */
.fadein {
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 1000ms;
    }

/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }

/*===============================================
●PC版非表示
===============================================*/
.sp{ display:none!important;}
.sp-navi{ display:none;}
.contactblock p.tel a{ pointer-events:none;}

/*===============================================
●レスポンシブ  画面の横幅が900pxまで
===============================================*/
@media screen and (max-width:900px){
.header .navigation li{ margin:0 5px; font-size:14px}
}

/*===============================================
●レスポンシブ  画面の横幅が740pxまで
===============================================*/
@media screen and (max-width:740px){
body{min-width:320px; overflow:hidden;}
img{
max-width: 520px;
height: auto;
width /***/:auto;
}
.pc{ display: none!important;}
.sp{ display:block!important;}
#header .sp{ text-align:center;}
#header .sp strong{ margin-left:10px; font-size:32px; vertical-align:middle:;}

#top{ display:none;}
.menu-collapser { height:70px!important}
.menu-collapser img{ height:60px}
.menu-collapser .logo{ display: flex; color: #000000; font-size:21px; align-items: center; font-weight:bold}
.menu-collapser .logo{ text-shadow: none;}
ul.slimmenu{ background-color:#4b4a54; font-weight:bold}
ul.slimmenu a{ color:#ffffff!important;}
.introduction .image{ max-width:520px;}
.introduction .image img{ width:90%;}
.introduction .image figcaption{ width:90%; margin:25px auto; font-size:16px; line-height: 1.6;}
.introduction ul{ width:80%; display:block; padding-top:0}
.introduction li{ width:100%; background-color: #ffffff; margin-bottom:25px}
.introduction li figure{ width:100%}
.introduction li figure img{ width:50%}
.introduction li i{ display:block; width:50%; top:0; right:-15px}
.introduction li i img{ width:100%}
.introduction li .text{ width:100%}
.introduction li .text strong{ margin-bottom:0}
.work { padding-bottom:100px}
.work .block{ width:100%; height:auto}
.work .block figure img{ width:100%}
.work .block figcaption{ padding:15px 0; width:90%; margin:0 auto}
.work .block:first-child figure img{ position: relative; right:auto}
.work .block:first-child figcaption{ position: relative; left:auto}
.work .block:last-child figure img{ position: relative; left:auto}
.work .block:last-child figcaption{ position: relative; right:auto}
.work .block figcaption strong{ font-size:28px}
.staff .block{ width:100%}
.staff .block h2 {left:-70px}
.staff .block h2 img{ width:70%}
.staff .block figure{ height:auto; width:100%; margin-bottom:25px}
.staff .block figure img{ width:100%}
.career .block{ padding-top:0}
.career .block h2{ left:-70px}
.career .block h2 img{ width:70% }
.career .block{ width:100%}
.career .block p{ width:85%; font-size:18px}
.career .block figure{ width:90%; margin:0 auto; padding:25px 0}
.career .block figure img{ width:100%}
.youkou .block{ width:90%;}
.youkou .block h2{left:-110px}
.youkou .block h2 img{ width:70%}
.youkou .block .syokusyu{ width:100%; margin-left:0; font-size:13px}
.youkou .block .kyoutsu{ width:100%; margin-left:0; font-size:13px}
.youkou .block .syokusyu th{ padding-left:0}
.youkou .block .syokusyu td{ padding-right:0}
.youkou .block .note{ margin-left:15px; font-size:14px}
.entry form{ width:90%}
.entry form .lead{ padding:15px}
.entry form table{ width:100%}
.entry form th,.entry form td{ display: block;}
.entry form th{ padding:15px 0 0 15px; text-align:left; position: relative;}
.entry form th i{ position: absolute; right:0; top:0}
.entry form td{ padding:15px 0 25px 15px}
.entry form td label{ display: block; margin-bottom:15px}
.entry form td input[type="email"]{ width:90%}
.entry form td .set i{display: block; margin-bottom:5px}
.entry form td .set select{ margin-bottom:5px; width:90%}
.entry form .check{ line-height:1.5}
.about .block{ width:90%}
.about .block h2{ left:-90px}
.about .block h2 img{ width:70% }
.about .block table{ font-size:13px}
.about .block th{ width:70px}
.footer .block{ width:90%; display: block;}
.footer figcaption{ font-size:30px;}
.footer table{ margin:25px auto}
.footer th,.footer td{ display: block;}













}