@charset "UTF-8";
/* Scss Document */
/* 変数 */
/* Scss Document */
/* 共通変数 */
/* 共通変数 */
/* ミックスイン */
/* Scss Document */
/* 共通ミックスイン */
/* 共通mixin */
/* css */
/*----------------------------------------------------
banner
----------------------------------------------------*/
@-webkit-keyframes ani-mouse { 0% { opacity: 1; top: 29%; }
  15% { opacity: 1; top: 50%; }
  50% { opacity: 0; top: 50%; }
  100% { opacity: 0; top: 29%; } }
@-moz-keyframes ani-mouse { 0% { opacity: 1; top: 29%; }
  15% { opacity: 1; top: 50%; }
  50% { opacity: 0; top: 50%; }
  100% { opacity: 0; top: 29%; } }
@keyframes ani-mouse { 0% { opacity: 1; top: 29%; }
  15% { opacity: 1; top: 50%; }
  50% { opacity: 0; top: 50%; }
  100% { opacity: 0; top: 29%; } }
.scroll-btn { position: absolute; left: 50%; bottom: 40px; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); text-align: center; }
.scroll-btn > * { line-height: 18px; font-size: 13px; color: #ffffff; letter-spacing: 2px; }
.scroll-btn > *:hover { color: #ffffff; opacity: 0.8; filter: alpha(opacity=80); }
.scroll-btn .mouse { position: relative; display: block; width: 30px; height: 55px; margin: 0 auto 10px; border: 3px solid #ffffff; border-radius: 23px; }
.scroll-btn .mouse > * { position: absolute; display: block; top: 29%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #ffffff; border-radius: 50%; -webkit-animation: ani-mouse 2.5s linear infinite; -moz-animation: ani-mouse 2.5s linear infinite; animation: ani-mouse 2.5s linear infinite; }
.scroll-btn p { margin-top: 35px; }

/*----------------------------------------------------
topics
----------------------------------------------------*/

.p-home_topics{width:100%;padding-top:60px}
.p-home_topics__inner{text-align:center}
.p-home_topics__link{display:inline-block;color:#333;transition:color .3s ease-in-out}
.p-home_topics__link:hover{color:#d75019}
.p-home_topics__link span{color:red}

/*----------------------------------------------------
intro
----------------------------------------------------*/
#intro { padding-top: 60px; margin-bottom: 100px; position: relative; }
#intro div.fix { position: absolute; bottom: 30px; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #ffffff; z-index: 1500; }
#intro div.fix h2 { font-size: 30px; font-weight: bold; text-shadow: 0px 0px 5px #000000; margin-bottom: 40px; }
#intro div.fix p { width: 550px; padding: 10px; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(0, 0, 0, 0.6)), color-stop(100%, rgba(0, 0, 0, 0))); background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); }
#intro .simply-scroll-container { position: relative; width: 100%; height: 400px; }
#intro .simply-scroll-container .simply-scroll-clip { position: relative; overflow: hidden; width: 100%; height: 400px; }
#intro .simply-scroll-container .simply-scroll-clip .simply-scroll-list { overflow: hidden; margin: 0; padding: 0; width: 100%; height: 400px; }
#intro .simply-scroll-container .simply-scroll-clip .simply-scroll-list li { float: left; width: 1000px; height: 400px; margin: 0; padding: 0; }
#intro .simply-scroll-container .simply-scroll-clip .simply-scroll-list li img { height: 400px; }

/*----------------------------------------------------
group
----------------------------------------------------*/
.group { width: 100%; min-width: 1000px; max-width: 2000px; margin: 0 auto 50px; }
.group ul { display: -webkit-flex; display: flex; margin-bottom: 50px; }
.group ul li { width: 100%; height: 100%; position: relative; }
.group ul li.list_01 { background: url(../img/root/group_01.jpg) no-repeat center; background-size: contain; }
.group ul li.list_02 { background: url(../img/root/group_03.jpg) no-repeat center; background-size: contain; }
.group ul li.list_03 { background: url(../img/root/group_02.jpg) no-repeat center; background-size: contain; }
.group ul li.list_04 { background: url(../img/root/group_04.jpg) no-repeat center; background-size: contain; }
.group ul li a { position: relative; width: 100%; background: rgba(0, 0, 0, 0.5); }
.group ul li a:before { content: ""; display: block; padding-top: 100%; }
.group ul li a .logo { width: calc(100% - 20px); height: 100px; position: absolute; border: 1px solid #ffffff; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -moz-transition: ease-in-out 0.5s; -o-transition: ease-in-out 0.5s; -webkit-transition: ease-in-out 0.5s; transition: ease-in-out 0.5s; }
.group ul li a .logo .table { width: 100%; height: 250px; position: absolute; top: 0; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); -moz-transition: ease-in-out 0.5s; -o-transition: ease-in-out 0.5s; -webkit-transition: ease-in-out 0.5s; transition: ease-in-out 0.5s; }
.group ul li a .logo .table h3 { text-align: center; font-size: 2vw; color: #ffffff; line-height: 1; margin: 20px 0; }
.group ul li a .logo .table h3 span { display: block; font-size: 14px; margin-top: 10px; }
.group ul li a .logo .table .circle { width: 40px; line-height: 40px; margin: 0 auto 30px; font-size: 24px; font-weight: bold; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; color: #ffffff; border: 1px solid #ffffff; text-align: center; opacity: 0; visibility: hidden; -moz-transition: ease-in-out 0.5s; -o-transition: ease-in-out 0.5s; -webkit-transition: ease-in-out 0.5s; transition: ease-in-out 0.5s; }
.group ul li a .logo .table p.img { width: 85%; text-align: center; margin: 0 auto; opacity: 0; visibility: hidden; -moz-transition: ease-in-out 0.5s; -o-transition: ease-in-out 0.5s; -webkit-transition: ease-in-out 0.5s; transition: ease-in-out 0.5s; }
.group ul li a .logo .table p.img.img_01 { padding-top: 35px; }
.group ul li a .logo .table p.img.img_02 { padding-top: 10px; }
.group ul li a .logo .table p.img.img_04 { max-width: 170px; }
.group ul li a:hover { /*background: none;*/ }
.group ul li a:hover .logo { height: calc(100% - 20px); }
.group ul li a:hover .logo .table { top: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.group ul li a:hover .logo .table .circle { opacity: 1; visibility: visible; }
.group ul li a:hover .logo .table p.img { opacity: 1; visibility: visible; }
.group .link_box { width: 100%; display: -webkit-flex; display: flex; margin-bottom: 50px; }
.group .link_box .g_link { margin: 0 auto; }

/*----------------------------------------------------
company
----------------------------------------------------*/
.company { width: 100%; background: url(../img/common/back_g.jpg) repeat; }
.company .c_inner { width: 1000px; margin: 0 auto 0px; padding: 50px 0 100px; }
.company .c_inner h3 { font-size: 35px; font-weight: bold; margin-bottom: 50px; }
.company .c_inner div { overflow: hidden; margin-bottom: 100px; }
.company .c_inner div .f_left { width: 450px; margin-bottom: 0; float: left; text-align: justify; }
.company .c_inner div .f_right { width: 480px; float: right; margin-bottom: 0; }
.company .c_inner div .f_right p { font-size: 10px; }
.company .c_inner div .f_right p + p { margin-left: 30px; }
.company .c_inner ul { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; }
.company .c_inner ul li h4 { font-size: 30px; -moz-transform: skewX(-25deg); -ms-transform: skewX(-25deg); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); line-height: 1; margin-bottom: 30px; }
.company .c_inner ul li h4 span { display: block; -moz-transform: skewX(25deg); -ms-transform: skewX(25deg); -webkit-transform: skewX(25deg); transform: skewX(25deg); font-family: bebas-neue, sans-serif; font-size: 20px; margin-top: 20px; margin-left: 15px; }
.company .c_inner ul li h4 + p { margin-bottom: 30px; }
.company .c_inner ul li p.img a { position: relative; width: 285px; }
.company .c_inner ul li p.img a:before { width: 15px; height: 260px; position: absolute; top: 15px; right: -15px; content: ''; background: rgba(0, 0, 0, 0.3); }
.company .c_inner ul li p.img a:after { width: 270px; height: 15px; position: absolute; bottom: -15px; left: 15px; content: ''; background: rgba(0, 0, 0, 0.3); }

/*----------------------------------------------------
recruit
----------------------------------------------------*/
#recruit { width: 100%; padding: 30px 0 60px; background: #c9d5ce; }
#recruit .r_inner { width: 1000px; margin: 0 auto 0px; }
#recruit .r_inner .ttl_under { text-align: center; -moz-transform: skewX(-15deg); -ms-transform: skewX(-15deg); -webkit-transform: skewX(-15deg); transform: skewX(-15deg); position: relative; font-size: 30px; letter-spacing: 0.1em; margin-bottom: 20px; }
#recruit .r_inner .ttl_under:before { content: ''; width: 100px; height: 3px; background: #333333; position: absolute; bottom: -5px; left: 50%; -moz-transform: translateX(-50%) skewX(15deg); -ms-transform: translateX(-50%) skewX(15deg); -webkit-transform: translateX(-50%) skewX(15deg); transform: translateX(-50%) skewX(15deg); }
#recruit .r_inner p { text-align: center; font-size: 20px; -moz-transform: skewX(-15deg); -ms-transform: skewX(-15deg); -webkit-transform: skewX(-15deg); transform: skewX(-15deg); letter-spacing: 0.1em; margin-bottom: 40px; }
#recruit .r_inner ul { width: 300px; margin: 0 auto; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; text-align: center; }
#recruit .r_inner ul li a { width: 300px; height: 80px; font-size: 30px; letter-spacing: 0.1em; color: #4d5250; background: #ffffff; line-height: 1; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; }
#recruit .r_inner ul li a:hover { opacity: 0.7; }
#recruit .r_inner ul li a .ttl { -moz-transform: skewX(-15deg); -ms-transform: skewX(-15deg); -webkit-transform: skewX(-15deg); transform: skewX(-15deg); }
#recruit .r_inner ul li a .ttl .small { display: block; font-size: 12px; }

/*----------------------------------------------------
contact
----------------------------------------------------*/
#contact { width: 1000px; margin: 0 auto 100px; padding-top: 100px; }
#contact table { width: 750px; margin-bottom: 50px; }
#contact table tr { padding: 15px 0; display: block; letter-spacing: -0.5em; font-size: 16px; }
#contact table tr th { width: 250px; display: inline-block; text-align: right; letter-spacing: normal; padding-right: 20px; vertical-align: middle; }
#contact table tr th .required { color: #0cad55; }
#contact table tr th .tel { font-size: 12px; display: block; }
#contact table tr td { width: 500px; display: inline-block; letter-spacing: normal; vertical-align: middle; overflow: hidden; 				/*input[type=radio] {
					display: none;
					
					&+ .radio {
						@include transition(0.2s ease-in-out);
						position: relative;
						display: block;
						vertical-align: middle;
						cursor: pointer;
						margin: 0 50px 8px 0;
						padding-left: 30px;
						
						&:after {
							@include transition(0.2s ease-in-out);
							position: absolute;
							top: 50%;
							left: 0px;
							display: block;
							margin-top: -7px;
							width: 12px;
							height: 12px;
							border: 1px solid #333333;
							@include border-radius(50%);
							content: '';
						}
						
						&:before {
							@include transition(0.2s ease-in-out);
							position: absolute;
							top: 50%;
							left: 2px;
							display: block;
							margin-top: -5px;
							width: 8px;
							height: 8px;
							@include border-radius(50%);
							border: 1px solid #333333;
							content: '';
						}
					}
					
					&:checked {
							
						&+ .radio {

							&:before {
								background: #333333;
							}
						}
					}
				}*/ }
#contact table tr td span.wpcf7-radio span.wpcf7-list-item { display: block; margin-left: 5px; }
#contact table tr td input[type="text"], #contact table tr td input[type="tel"], #contact table tr td input[type="email"], #contact table tr td textarea { width: 500px; padding: 10px 20px; background: #f0f0f0; border: none; font-size: 16px; }
#contact table tr td input[name="sei"], #contact table tr td input[name="mei"], #contact table tr td input[name="sei-kana"], #contact table tr td input[name="mei-kana"], #contact table tr td input[name="zipcode"], #contact table tr td input[name="tel"] { width: 240px; }
#contact table tr td input[name="sei"], #contact table tr td input[name="sei-kana"] { float: left; }
#contact table tr td input[name="mei"], #contact table tr td input[name="mei-kana"] { float: right; }
#contact table tr:first-child th, #contact table tr:first-child td, #contact table tr:last-child th, #contact table tr:last-child td { vertical-align: top; }
#contact #btn_center { text-align: center; }
#contact #btn_center input { width: 260px; line-height: 55px; border: 1px solid #05356b; background: #05356b; color: #ffffff; -moz-transition: ease-in-out 0.5s; -o-transition: ease-in-out 0.5s; -webkit-transition: ease-in-out 0.5s; transition: ease-in-out 0.5s; cursor: pointer; }
#contact #btn_center input:hover { background: #ffffff; color: #05356b; }
#contact #btn_center input.wpcf7-back { margin-right: 50px; }