@charset "utf-8";
/*
Template Name: Trealop
Author: <a href="https://www.os-templates.com/">OS Templates</a>
Author URI: https://www.os-templates.com/
Copyright: OS-Templates.com
Licence: Free to use under our free template licence terms
Licence URI: https://www.os-templates.com/template-terms
File: Layout CSS
*/

@import url("fontawesome-free/css/fontawesome-all.min.css");
@import url("framework.css");

/* ページ共通スタイル
--------------------------------------------------------------------------------------------------------------- */
/*場所：全般
----------------------------------------------------------------------------------*/
/*コメント
-------------------------------------------------------*/

/* Rows
--------------------------------------------------------------------------------------------------------------- */
.row1{border-bottom: 2px solid;}
.row2{
	background-position: top center;
	background-repeat  : no-repeat;
	background-size    : cover;
	height             : 50vw;
	width              : auto;
	max-height         : 228px;
	text-shadow        :1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;
	color              : #FFFFFF;
}

/* Header
--------------------------------------------------------------------------------------------------------------- */
#header #logo{margin: 10px 0 0 0;}

/* Content Area
--------------------------------------------------------------------------------------------------------------- */
.container{padding: 80px 0;}
.org-container{padding: 80px 0 20px 0;}

/* Content */
/*.content li:last-child dd:last-child{margin:0 0 1em 1em;}*/
.content .avatar{float: right; margin: 0 0 10px 10px; padding: 3px; border: 1px solid;}
.content address{font-weight: bold;}
.content time{font-size: smaller;}
.content .comcont{display: block; margin: 0; padding: 0;}
.content .comcont p{margin: 10px 5px 10px 0; padding: 0;}

.content form{
	display: block;
	width  : 100%;
}
.content input, .content textarea{
	width  : 100%;
	padding: 10px;
	border : 1px solid;
}
.content textarea{overflow: auto;}
.content div{margin-bottom: 15px;}
.content input[type="submit"], .content input[type="reset"]{
	display  : inline-block;
	width    : auto;
	min-width: 150px;
	margin   : 0;
	padding  : 8px 5px;
	cursor   : pointer;
}

/* Sidebar */
.sidebar .sdb_holder{margin-bottom: 50px;}
.sidebar .sdb_holder:last-child{margin-bottom: 0;}


/* Click to Action
--------------------------------------------------------------------------------------------------------------- */
.cta{padding: 50px 0;}
.cta > :first-child{margin-top: 10px;}
.cta > :last-child{margin-bottom: 0;}/* Used when elements stack in smaller viewports */

.cta footer{text-align: center;}
.cta footer a{display: block;}


/* CTA - Click to Action
--------------------------------------------------------------------------------------------------------------- */
#cta{border-top: 1px solid;}
#cta ul li div{
	position   : relative;
	min-height : 30px;
	padding    : 0;
	line-height: 1;
	text-align : center;
}
#cta ul li div i{
	top       : 0;
	left      : 0;
	width     : 25px;
	height    : 40px;
	font-size : 20px;
	text-align: center;
	font-size : 27px;
}
#cta ul li div span{display: block;}
#cta ul li div strong{
	display: block;
	margin : 0 0 8px 0;
}

/* Footer
--------------------------------------------------------------------------------------------------------------- */
#footer{padding: 30px 0;}

#footer .heading{
	margin-bottom: 20px;
	font-size    : 1.2rem;
}

#footer .linklist li{
	display      : block;
	margin-bottom: 15px;
	padding      : 0 0 15px 0;
	border-bottom: 1px solid;
}
#footer .linklist li:last-child{
	margin : 0;
	padding: 0;
	border : none;
}
#footer .linklist li::before, #footer .linklist li::after{
	display: table;
	content: "";
}
#footer .linklist li, #footer .linklist li::after{clear: both;}

#footer input, #footer button{border: 1px solid;}
#footer input{
	display: block;
	width  : 100%;
	padding: 8px;
}
#footer button{
	padding       : 8px 18px 10px;
	text-transform: uppercase;
	font-weight   : 700;
	cursor        : pointer;
}

/* Copyright
--------------------------------------------------------------------------------------------------------------- */
#copyright{padding: 20px 0;}
#copyright *{
	margin : 0;
	padding: 0;
}


/* Transition Fade
This gives a smooth transition to "ALL" elements used in the layout - other than the navigation form used in mobile devices
If you don't want it to fade all elements, you have to list the ones you want to be faded individually
Delete it completely to stop fading
--------------------------------------------------------------------------------------------------------------- */
*, *::before, *::after{transition: all .3s ease-in-out;}
#mainav form *{transition: none !important;}


/* Navigation
--------------------------------------------------------------------------------------------------------------- */
nav ul, nav ol{
	margin    : 0;
	padding   : 0;
	list-style: none;
}

#mainav, .sidebar nav{line-height: normal;}
#mainav .drop::after, #mainav li li .drop::after, .sidebar nav a::after{
	position   : absolute;
	font-family: "Font Awesome\ 5 Free";
	font-weight: 900;
	font-size  : 10px;
	line-height: 10px;
}

/* Top Navigation */
#mainav{
	position     : relative;
	margin-bottom: -2px;
	z-index      : 999;
}
#mainav ul{text-transform: uppercase;}
#mainav ul ul{position: absolute; width: 180px; text-transform: none;}
#mainav ul ul ul{left: 180px; top: 0;}
#mainav li{display: block; position: relative; float: left; margin: 0; padding: 0;}
#mainav li:last-child{margin-right: 0;}
#mainav li a{display: block; padding: 40px 15px; border-bottom: 2px solid;}
#mainav li li{width: 100%; margin: 0;}
#mainav li li a{border-width: 0 0 1px 0;}
#mainav .drop{padding-left: 20px;}
#mainav li li a, #mainav li li .drop{display: block; margin: 0; padding: 10px 15px;}
#mainav .drop::after, #mainav li li .drop::after{content: "\f0d7";}
#mainav .drop::after{top: 45px; left: 10px;}
#mainav li li .drop::after{top: 15px; left: 5px;}
#mainav ul ul{visibility: hidden; opacity: 0;}
#mainav ul li:hover > ul{visibility: visible; opacity: 1;}

#mainav form{display: none; width: 100%; margin: 0; padding: 0;}
#mainav form select, #mainav form select option{display: block; cursor: pointer; outline: none;}
#mainav form select{width: 100%; padding: 5px; border: none;}
#mainav form select option{margin: 5px; padding: 0; border: none;}

/* Sidebar Navigation */
.sidebar nav{display: block; width: 100%;}
.sidebar nav li{margin: 0 0 3px 0; padding: 0;}
.sidebar nav a{display: block; position: relative; margin: 0; padding: 5px 10px 5px 15px; text-decoration: none; border: solid; border-width: 0 0 1px 0;}
.sidebar nav a::after{top: 10px; left: 5px; content: "\f0da";}
.sidebar nav ul ul a{padding-left: 35px;}
.sidebar nav ul ul a::after{left: 25px;}
.sidebar nav ul ul ul a{padding-left: 55px;}
.sidebar nav ul ul ul a::after{left: 45px;}

/* Back to Top */
#backtotop{z-index: 999; display: inline-block; position: fixed; visibility: hidden; bottom: 20px; right: 20px; width: 36px; height: 36px; line-height: 36px; font-size: 16px; text-align: center; opacity: .2;}
#backtotop i{display: block; width: 100%; height: 100%; line-height: inherit;}
#backtotop.visible{visibility: visible; opacity: .5;}
#backtotop:hover{opacity: 1;}

/* Tables
--------------------------------------------------------------------------------------------------------------- */
/* table, th, td{border:1px solid; border-collapse:collapse; vertical-align:top;} */
table, th, td{
	border         : 1px solid;
	border-collapse: collapse;
	vertical-align : center;
}
table, th{table-layout: auto;}
table{
	width        : 100%;
	margin-bottom: 15px;
}
th, td{padding: 5px 8px;}
/* td{border-width:0 1px;} */
td{border-width: 1px 1px;}


/* Font Awesome Social Icons
--------------------------------------------------------------------------------------------------------------- */
.faico{margin: 0; padding: 0; list-style: none;}
.faico li{display: inline-block; margin: 8px 5px 0 0; padding: 0; line-height: normal;}
.faico li:last-child{margin-right: 0;}
.faico a{display: inline-block; width: 36px; height: 36px; line-height: 36px; font-size: 18px; text-align: center;}

.faico a{color: #FFFFFF; background-color: #161616;}

.faicon-dribble:hover    {background-color:#EA4C89;}
.faicon-facebook:hover   {background-color:#3B5998;}
.faicon-google-plus:hover{background-color:#DB4A39;}
.faicon-linkedin:hover   {background-color:#0E76A8;}
.faicon-twitter:hover    {background-color:#00ACEE;}
.faicon-vk:hover         {background-color:#4E658E;}


/* Colours
--------------------------------------------------------------------------------------------------------------- */
body{color:#474747; background-color:#FFFFFF;}
a{color:#1c943e;}
a:active, a:focus{background:transparent;}/* IE10 + 11 Bugfix - prevents grey background */
hr, .borderedbox{border-color:#D7D7D7;}
label span{color:#FF0000; background-color:inherit;}
input:focus, textarea:focus, *:required:focus{border-color:#1c943e;}
#toaccess{color:blue ; text-decoration:underline;}
a[href="security.html#anchor-contact"]{color:blue ; text-decoration:underline;}

/* 記事タイトルで利用予定 */
h2{background-color:#EEEEEE;}

/*.overlay{color:#FFFFFF; background-color:inherit;}
.overlay::after{color:inherit; background-color:rgba(0,0,0,.55);}
.overlay.gradient::before{background:linear-gradient(90deg,rgba(255,255,255,.6) 0%,transparent 100%);}
.overlay.light{color:#474747;}
.overlay.light::after{background-color:rgba(255,255,255,.7);}*/

.btn, .btn.inverse:hover{color:#FFFFFF; background-color:#1c943e; border-color:#1c943e;}
.btn:hover, .btn.inverse{color:inherit; background-color:transparent; border-color:inherit;}

.imgover:hover::before{background:rgba(255,255,255,.7);}
.imgover, .imgover:hover::after{color:#1c943e;}


/* Rows */
.row0{color:#474747; background-color:#F4F4F4;}
/*.row1{color:#FFFFFF; background-color:#1c943e; border-color:#55dd7b;}*/
.row1{color:#FFFFFF; background-color:#064703; border-color:#55dd7b;}
.row2{color:#474747; background-color:#F4F4F4;}
.row3{color:#474747; background-color:#FFFFFF;}
.row4{color:#9FA7AF; background-color:#e8e8e8;}
.row5, .row5 a{color:#9FA7AF; background-color:#161616;}

.coloured{color:#FFFFFF; background-color:#55dd7b;}

/* Header */

.red{color:#B12E52;}
.green{color:#00B900}
.blue{color:#359AFF}

/* CTA - Click to Action */
#cta{border-color:#D7D7D7;}

/* Footer */
#footer .heading{color:#FFFFFF;}
#footer hr, #footer .borderedbox, #footer .linklist li{border-color:rgba(255,255,255,.1);}

#footer input, #footer button{border-color:transparent;}
#footer input{color:#9FA7AF; background-color:#6b6b6b;}
#footer input:focus{border-color:#1c943e;}
#footer button{color:#FFFFFF; background-color:#1c943e;}

/* Navigation */
#mainav li a{color:inherit; border-color:transparent;}
#mainav .active a, #mainav a:hover, #mainav li:hover > a{color:#FFFFFF; background-color:#55dd7b; border-color:#FFFFFF;}
#mainav li li a, #mainav .active li a{color:#FFFFFF; background-color:rgba(83,211,222,.5);/* #1c943e */ border-color:rgba(0,0,0,.6);}
#mainav li li:hover > a, #mainav .active .active > a{color:#FFFFFF; background-color:#55dd7b; border-color:rgba(0,0,0,.6);}
#mainav form select{color:#474747; background-color:#FFFFFF;}

.container .sidebar nav a{color:inherit; border-color:#D7D7D7;}
.container .sidebar nav a:hover{color:#1c943e;}
.org-container .sidebar nav a{color:inherit; border-color:#D7D7D7;}
.org-container .sidebar nav a:hover{color:#1c943e;}

#backtotop{color:#FFFFFF; background-color:#1c943e;}


/* Tables + content */
table, th, td, .content .avatar, .content input, .content textarea{border-color:#D7D7D7;}
.content input:focus, .content textarea:focus, .content *:required:focus{border-color:#1c943e;}
th{color:#FFFFFF; background-color:#373737;}
tr, .content li, .content input[type="submit"], .content input[type="reset"]{color:inherit; background-color:#FBFBFB;}
/*tr:nth-child(odd), .content li:nth-child(odd){color:inherit; background-color:#F7F7F7;}*/
tr:nth-child(odd){color:inherit; background-color:#F7F7F7;}
table a, .content a{background-color:inherit;}

/* ------------------------------------------------------------------------------------------------------------ */

/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:1140px){
	.hoc{max-width:1140px;}
}

@media screen and (min-width:978px) and (max-width:1140px){
	.hoc{max-width:95%;}
}


/* Mobile Devices
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:978px){
	.hoc{max-width:90%;}

	#header{padding:30px 0;}
	#header #logo{margin-top:0;}

	#mainav ul{display:none;}
	#mainav form{display:block; margin-top:8px;}

	.content input[type="reset"]{margin-top:10px;}
	.pagination li{display:inline-block; margin:0 5px 5px 0;}
	#copyright p:first-of-type{margin-bottom:10px;}
}

@media screen and (max-width:750px){
	.imgl, .imgr{display:inline-block; float:none; margin:0 0 10px 0;}
	.fl_left, .fl_right{display:block; float:none;}
	.clear .clear > *:last-child{margin-bottom:0;}
	/* Experimental - Needs more testing in different situations, stops double margin when stacking */
	.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}

	#header{text-align:center;}
	#header #logo{margin:0 0 15px 0;}

	.cta > :first-child{margin-top:0; text-align:center;}
	.cta footer a{display:inline-block;}

	.prices li:nth-last-child(-n+3){margin-bottom:50px;}
	#latest ul li:nth-last-child(-n+3){margin-bottom:30px;}

	#footer{padding-bottom:50px;}/* Not required, just looks a little better */
}

/* Other
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:650px){
	.scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
	.scrollable table{margin:0; padding:0; white-space:nowrap;}

	.inline li{display:block; margin-bottom:10px;}
	.pushright li{margin-right:0;}

	.font-x2{font-size:1.4rem;}
	.font-x3{font-size:1.6rem;}
}

/* 以下オリジナル部分
--------------------------------------------------------------------------------------------------------------- */

/* index.htmlのスタイル
--------------------------------------------------------------------------------------------------------------- */
/*ヘッダ
----------------------------------------------------------------------------------*/
/*ロゴアニメ
-------------------------------------------------------*/
#logo-index{
	/*animation: logo-anime 20s ease-in-out infinite;*/
	animation: logo-anime1 50s ease-in-out infinite;
}
@keyframes logo-anime1 {
	/*0%   {transform: rotate(0);}
	25%  {transform: rotate(720deg);}
	50%  {transform: rotate(-720deg);}
	75%  {transform: rotate(360deg);}
	100% {transform: rotate(-360deg);}*/
	0%   {transform: rotate(0);}
	20%  {transform: rotate(185deg);}
	40%  {transform: rotate(-370deg);}
	55%  {transform: rotate(720deg);}
	70%  {transform: rotate(-365deg);}
	105% {transform: rotate(-225deg);}
}

/*スライドショー：ズームインあり
-------------------------------------------------------*/
/*ID：box部分*/
#box {
  position   : relative;
  margin     : auto;
  overflow   : hidden;
}

#box .bgImg {
  position   : absolute ;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 35s infinite;
  z-index    : -1;
}

/* 没：左上へズーム */
#box .bg-scroll {
  position   : absolute ;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
	animation  : bg-scroll 35s infinite;
  z-index    : -1;
}

/* 三枚、五秒ごと */
#box .src1 {
  background-image     : url(../images/indexhtml_fuji.jpg);
	background-position-x: center;
	background-position-y: 54%;
}
#box .src2 {
  background-image     : url(../images/indexhtml_glass.jpg);
	background-position-x: center;
	background-position-y: 40%;
	/*background-size      : 100% 256%;*/
  animation-delay      : 7s;
}
#box .src3 {
  background-image     : url(../images/indexhtml_typing.jpg);
	background-position  : center 45%;
  animation-delay      : 14s;
}
#box .src4 {
  background-image     : url(../images/indexhtml_trust_logo.jpg);
	background-position  : center 45%;
  animation-delay      : 21s;
}
#box .src5 {
  background-image     : url(../images/indexhtml_server.jpg);
	background-position  : center center;
  animation-delay      : 28s;
}

/* スライドアニメ */
@keyframes bgAnime {
	0%   { opacity: 0; transform: scale(1.0, 1.0);}
	3%   { opacity: 1; transform: scale(1.0, 1.0);}
	/* 100割るスライド画像の枚数％ */
	20%  { opacity: 1; transform: scale(2.5, 2.5);}
	/* 100割るスライド画像の枚数+5％ */
	25%  { opacity: 0; }
	100% { opacity: 0; }
}

/* パーセンテージを上のアニメと合わせる */
@keyframes bg-scroll {
	/* 旧スクロールズームイン */
	/*0%   { background-position-x: 40%;   background-position-y: 40%; opacity: 0; transform: scale(1.4, 1.4);}
	3%   { background-position-x: 40%;   background-position-y: 40%; opacity: 1; transform: scale(1.4, 1.4);}
	16%  { background-position-x: -120%; background-position-y: 20%; opacity: 1; transform: scale(2.2, 2.2);}
	21%  { background-position-x: -120%; background-position-y: 20%; opacity: 0;}
	100% { background-position-x: 40%;   background-position-y: 40%; opacity: 0;}*/
	/* 上下移動をなくすという事？ */
	/*0%   { background-position-y: 45%; opacity: 0; transform: scale(1.0, 1.0);}
	3%   { background-position-y: 45%; opacity: 1; transform: scale(1.0, 1.0);}
	20%  { background-position-y: 45%; opacity: 1; transform: scale(3.5, 3.5);}
	25%  { background-position-y: 45%; opacity: 0;}
	100% { background-position-y: 45%; opacity: 0;}*/
	0%   { opacity: 0; transform: scale(1.0, 1.0);}
	3%   { opacity: 1; transform: scale(1.0, 1.0);}
	20%  { opacity: 1; transform: scale(3.5, 3.5);}
	25%  { opacity: 0;}
	100% { opacity: 0;}
}

/*ヘッダ下部
----------------------------------------------------------------------------------*/
/*クラス：pageintro部分
-------------------------------------------------------*/
#pageintro{
	color     : #FFFFFF;
	padding   : 2rem 0;
	height    : 50vw;
	width     : auto;
	max-height: 228px;
}

#pageintro h3{
	text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;
}

#pageintro div{
	display  : inline-block;
	max-width: 75%;
}

#pageintro .headinge{
	margin-left  : 5px;
	margin-bottom: 00px;
	font-size    : 2rem;
}

#pageintro .heading{
	margin-bottom: 00px;
	font-size    : 3.7rem;
}

#pageintro p:first-of-type{
	margin        : 0 0 20px 0;
	text-transform: none;
	font-size     : 1.5rem;
	letter-spacing: 2px;
}

#pageintro ul{margin-top:10px;}

@media screen and (max-width:750px){
	#pageintro div{max-width:none;}
	#pageintro .heading{font-size:2rem;}
	#pageintro p:first-of-type{font-size:1rem;}
}

/*メイン
----------------------------------------------------------------------------------*/
/*クラス：sectiontitle部分
-------------------------------------------------------*/
.sectiontitle{
	display:block;
	max-width:90%;
	margin:0 auto 80px;
	text-align:center;
}

.sectiontitle p{
	display   : inline-block;
	text-align:left;
	font-size : 110%;
}

.sectiontitle *{margin:0;}

@media screen and (max-width:750px){
	.sectiontitle{
		max-width :none;
	}
	.sectiontitle p{
		display   : inline-block;
		text-align:center;
	}
}

/* services.htmlのスタイル
--------------------------------------------------------------------------------------------------------------- */
/*メイン
----------------------------------------------------------------------------------*/
/*ロゴアニメ
-------------------------------------------------------*/
#logo-services{
	animation: logo-anime2 60s steps(60) infinite;
}
@keyframes logo-anime2 {
	0%   {transform: rotate(0);}
	100% {transform: rotate(360deg);}
}

/*ヘッダ下画像
-------------------------------------------------------*/
.services-image{
	background-image     : url(../images/services_image.jpg);
	background-position-y: 90%;
}

/* 業務案内ページ用レイアウト
------------------------------------------------------- */
/* 共通 */
.special-layout{
	border             : double 4px #000;
}

.special-layout div{
	margin-bottom : 0;
}

.special-layout div:last-of-type{
	margin-bottom : 15px;
}

div.special-layout{
	margin-bottom : 60px;
}

.grid-icon{
	display         : grid;
	gap             : 5px;
	margin          : .2rem .2rem 0 .2rem;
	padding         : .6rem .4rem;
}

.grid-container{
	display         : grid;
	gap             : 5px;
	margin          : 1rem 0 .2rem 0;
	padding         : .6rem .4rem 2rem .4rem;
}

/* PC */
@media screen and (min-width:986px){
	.grid-icon{
		grid-template-columns: repeat(12, 1fr);
	}
	.grid-container{
		grid-template-columns: 1fr 2.8fr 1fr 2.8fr;
	}
}
/* タブレット */
@media screen and (max-width:985px) and (min-width:651px){
	.grid-icon{
		grid-template-columns: repeat(6, 1fr);
	}
	.grid-container{
		grid-template-columns:  1fr 2.8fr;
	}
}
/*スマホ */
@media screen and (max-width:650px){
	.grid-icon{
		grid-template-columns: repeat(4, 1fr);
	}
	.grid-container{
		grid-template-columns:  1fr 2.8fr;
	}
}

.grid-container p{
line-height: 110%;
text-align : left;
padding    : 0 1em;
}

.image-icon{
display      : block;
margin       : 0 auto;
height       : auto;
}

/* about.htmlのスタイル
--------------------------------------------------------------------------------------------------------------- */
/*メイン
----------------------------------------------------------------------------------*/
/*ロゴアニメ
-------------------------------------------------------*/
#logo-about{
	/*animation: logo-anime3 4s ease-in-out;*/
	animation: logo-anime3 4s ease-in-out;
}
@keyframes logo-anime3 {
  0%   {opacity: .2; transform: scale(0.1) translate(-500px, -75px) rotateY(-1080deg);}
  100% {opacity:  1; transform: scale(1) translate(0, 0);}
}

/*ヘッダ下画像
-------------------------------------------------------*/
.about-image{
	background-image     : url(../images/about_image.jpg);
	background-position-y: 90%;
}

/*本文
-------------------------------------------------------*/
#rinenn p, #aisatsu p{
	font-size: 120%;
}

/*テーブル内テーブル
-------------------------------------------------------*/
.nest-table ,.nest-table td{
	border-width: 0;
}

.nest-table td{
background-color: #F7F7F7;
margin          : 0;
padding         : 0;
}

@media screen and (max-width:820px){
	.left-col, .right-col{
		display : block;
	}
}

/* recruit.htmlのスタイル
--------------------------------------------------------------------------------------------------------------- */
/*メイン
----------------------------------------------------------------------------------*/
/*画像
-------------------------------------------------------*/
/*ロゴアニメ
-------------------------------------------------------*/
#logo-recruit{
	animation: logo-anime4 6s infinite;
}
@keyframes logo-anime4 {
	0%   {opacity: 1; transform: rotate(0) rotateX(0) rotateY(0);}
	25%  {opacity: 1; transform: rotate(0) rotateX(0) rotateY(0);}
	50%  {opacity: 0; transform: rotate(360deg) rotateX(360deg) rotateY(360deg);}
	75%  {opacity: 0; transform: rotate(360deg) rotateX(360deg) rotateY(360deg);}
	100% {opacity: 1; transform: rotate(0) rotateX(0) rotateY(0);}
}
/*ヘッダ下画像
-------------------------------------------------------*/
.recruit-image{
	background-image: url(../images/recruit_image.jpg);
}


/* その他の画像ボックス */
.image-box1 {
  height    : 5vw;
  width     : 100%;
	max-height: 100px;
	min-height: 80px;
}
.image-box2 {
  height    : 10vw;
  width     : 100%;
	max-height: 300px;
}
/* 画面上部 */
.recruit-image-ue{
	background-image     : url(../images/recruit.ue.jpg);
	background-size      : cover;
	background-position-y: 50%;
}

/* 画面中部 */
.recruit-image-naka{
	background-image     : url(../images/recruit.naka.jpg);
	background-size      : cover;
	background-position-y: 40%;
}
#employee2 a{
	/*text-decoration: underline;*/
	color: blue;
}

/*画面下部*/
.recruit-image-shita{
	background-image     : url(../images/recruit.shita.jpg);
	background-size      : cover;
	background-position-x: right;
}
.outer{
	display     : table;
	padding-left: 1rem;
}
.inner{
	display       : table-cell;
	vertical-align: middle;
	width         : 70%;
}
.inner h3{
	margin: .5rem auto;
}
/* innerクラス：レスポンシブ対応 */
@media screen and (min-width:651px){
	.inner{
		padding-right : 20%;
	}
}
@media screen and (max-width:650px){
	.inner{
		padding-right : 50%;
	}
}

/*ID：critical部分
-------------------------------------------------------*/
#critical p{font-size:1.2rem ;}

/*採用情報のテーブル
-------------------------------------------------------*/
/* 採用情報のテーブル：スマホ以外 */
@media screen and (min-width:651px){
	.recruit-table col{
		width: 125px;;
	}
	.recruit-table th[colspan="2"]{
		background-color: #373737;
		color           : #FFFFFF;
	}
	.recruit-table th{
		background-color: inherit;
		font-weight     : unset;
		color           : #373737;
	}
}

/* 採用情報のテーブル：スマホサイズ */
@media screen and (max-width:650px){
	.recruit-table{
		table-layout: fixed;
	}
	.recruit-table th{
		display   : block;
		text-align: left;
	}
	.recruit-table td{
		display: block;
	}
	#employee1 tr{
		background-color: #FFFFFF;
	}
}

/* contact.htmlのスタイル
--------------------------------------------------------------------------------------------------------------- */
/*メイン
----------------------------------------------------------------------------------*/
/*ロゴアニメ
-------------------------------------------------------*/
#logo-contact{
	animation: logo-anime5 4s;
}
@keyframes logo-anime5 {
  0%   {transform: scale(1) translate(0, -200px) rotateX(90deg);}
	25%  {transform: scale(1) translate(0, -100px);}
	50%  {transform: scale(1.6, 0.2) translate(0, 100px);}
  75%  {transform: scale(1);}
  100% {transform: scale(1);}
}

/*ヘッダ下画像
-------------------------------------------------------*/
.contact-image {
	background-image     : url(../images/contact_image.jpg);
	background-position-y: 90%;
}

/* 問い合わせフォーム用テーブル
------------------------------------------------------- */
/* タグ：table */
#contact-form .contact-table{
	border         : 0;
	border-collapse: collapse;
	vertical-align : middle;
	padding        : 5px 8px;
	border-width   : 0 1px;
}
/* チェックボックス表示のinline-block化 */
.content input[type="checkbox"], .content input[type="radio"]{
	display       : inline-block;
	width         : auto;
	vertical-align: bottom;
	margin        : 0 .5rem 0 0;
	position      : relative;
	bottom        : 0.3rem;
}
/* タグ：label */
.content label{text-align: center;}

/* 問合せフォームのテーブル：スマホ以外 */
@media screen and (min-width:651px){
	#contact-form .contact-table {
		width      : 90%;
		margin     : 1rem auto;
		margin-top : 0;
	}
	#contact-form th, #contact-form td {
		border-width    : 0 0 1px 0;
		background-color: #FFFFFF;
	}
	#contact-form th {
		text-align: right;
		padding   : 2em 1em 2em 6em;
		color     : #373737;
	}
	#contact-form td {
		padding: 0 4em;
	}
}

/* 問合せフォームのテーブル：スマホサイズ */
@media screen and (max-width:650px){
	#contact-form .contact-table{
		width:100%;
	}
	#contact-form th{
		display     : block;
		text-align  : left;
		border-width: 0;
	}
	#contact-form td{
		display     : block;
		text-align  : right;
		border-width: 1px 0;
		padding     : 10px 0;
	}
	#contact-form tr{background-color:#FFFFFF;}
}

/* 問合せフォーム：その他 */
.checkbox-plain{
	position: relative;
	bottom  : 0.5em;
}
textarea{
	height: 125px;
	margin: 0.5em 0;
}
/* 問い合わせ用：ボタン */
#submit-btn{
	background        : #EEEEEE;
	border-top-color  : #ffffff;
	border-left-color : #ffffff;
  border-right      : 2px solid;
  border-bottom     : 2px solid;
}
#submit-btn:hover{
	color       : inherit;
	background  : #CCCCCC;
	border-color: inherit;
	transform   : translate3d(0, 2px, 0);
}

/* security.htmlのスタイル
--------------------------------------------------------------------------------------------------------------- */
/*メイン
----------------------------------------------------------------------------------*/
/*ロゴアニメ
-------------------------------------------------------*/
#logo-security{
	animation: logo-anime6 6s infinite;
}
@keyframes logo-anime6 {
	0%   {transform: scale(1) translate(0, 0);}
	35%  {transform: scale(.6, 1.2) translate(-50px, 0);}
	50%  {transform: scale(1) translate(0, 0);}
	85%  {transform: scale(.6, 1.2) translate(50px, 0);}
	100% {transform: scale(1) translate(0, 0);}
}

/* ヘッダ下画像
------------------------------------------------------- */
.security-image {
	background-image   : url(../images/security_image.jpg);
	background-position: left;
}

/* セキュリティページ用レイアウト
------------------------------------------------------- */
.origin p {margin:0 0 0 1em;}
.origin ol{margin-left: 1em; padding:0;}
.origin ul{margin:0 0 0 1em; padding:0; list-style:none;}
.origin li{margin:0 0 0 1em;}
.origin dd{margin:0 0 0 1em;}
.origin dt{margin:.5em 0;}

/* JPN Hub: How to Use flow image */
.how-to-use-flow{
  margin: 30px 0 45px;
  padding: 0;
}
.how-to-use-flow img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* JPN Hub Japanese navigation: allow the six-item 利用案内 submenu to fit naturally */
#mainav ul ul{width: 220px;}
#mainav ul ul li a{white-space: nowrap;}
@media screen and (max-width: 900px){
  .how-to-use-flow{margin: 20px 0 30px;}
}

/* JPN Hub navigation revision: solid submenu background */
#mainav ul ul{
  background-color:#1c943e;
}
#mainav li li a, #mainav .active li a{
  background-color:#1c943e;
}
#mainav li li:hover > a, #mainav .active .active > a{
  background-color:#55dd7b;
}