@charset "utf-8";

:root {
	--main-bg-color: #38B6FF;
}
/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
html {
	scroll-behavior: smooth;
}
body {
	color: #666;	/*全体の文字色*/
	margin: 0px;
	padding: 0px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 15px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #666;	/*リンクテキストの色*/
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
a:hover {
	color: #757474;			/*マウスオン時の文字色（全体）*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}

/*コンテナー（HPを囲むブロック）
---------------------------------------------------------------------------*/
#container {
	max-width: 1200px;	/*サイトの最大幅*/
	padding: 0 4%;	/*上下、左右へのボックス内の余白*/
	margin: 0 auto;
}

/*ヘッダー
---------------------------------------------------------------------------*/
header {
	padding: 30px 20px;	/*上下、左右へのヘッダー内の余白*/
}
/*ロゴ画像*/
header #logo img {
	width: 150px;
	height: auto;
	max-width: 100%;
}

/* 上部のメインメニュー
--------------------------------------------------------------------------- */
/* メニューブロック全体の設定 */
#menubar {
	background: #FFF;		   /* 背景色 */
	min-height: 20px;			/* メニューの高さ */
	margin-bottom: 30px; 		/* 下の余白 */
	width: 100%; 				/* 幅を100%に設定 */
	box-sizing: border-box; 	/* パディングとボーダーを幅に含める */
}
/* メニューの設定 */
#menubar ul {
	display: flex; 		/* 横並び */
	list-style: none;	/* リストのスタイルをなくす */
	padding: 0;			/* 内側の余白をなくす */
	margin: 0;			/* 外側の余白をなくす */
	width: 100%;		/* 幅を100%に設定 */
}
/* メニュー１個ごとの設定 */
#menubar li {
	flex: 1;											 /* 各アイテムが均等にスペースを取るようにする */
	border-right: 1px solid rgba(255, 255, 255, 0.3);	/* 右側の境界線 */
	text-align: center;									 /* テキストを中央に */				
	position: relative;									 /* 相対的に配置 */
	z-index: 1;											 /* 要素を重ねる */
}
/* メニューアイテムの最後の子要素 */
#menubar li::after {
	background: var(--main-bg-color);				 /* 背景色 */
	position: absolute;								 /* 絶対的に配置 */
	top: 0;											 /* 垂直位置 */
	left: 0;										 /* 水平位置 */
	content: '';									 /* 置換要素 */
	width: 100%;									 /* 幅100% */
	height: 100%;									 /* 高さ100% */
	transform: scale(0, 1);							 /* 拡縮する座標変換 */
	transform-origin: left top;						 /* 左上を原点とする */
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);  /* 2秒間のアニメーション */
	z-index: -1;									 /* 要素を重ねる */
}
/* メニューアイテムのマウスオーバー */
#menubar li a:hover {
	color: #fff;	/* 文字の色 */
}
/* メニューアイテムの最後の子要素のマウスオーバー */
#menubar li:hover::after {
	transform: scale(1, 1);		/* 拡縮する座標変換 */
}
/* メニューのリンクの設定 */
#menubar li a {
	text-decoration: none;		/* 下線を消す */
	font-size: large;			/* 文字の大きさ */
	font-weight: bold;			/* 文字の太さ */
	color: var(--main-bg-color);/* 文字色 */
	padding: 0 20px;			/* 上下、左右への余白 */
	display: flex;				/* Flexboxを使う */
	align-items: center;		/* 縦方向の中央揃え */
	justify-content: center;	/* 横方向の中央揃え */
	height: 100%;				/* 高さを親要素に合わせる */
}
/* メニューのアイテムの間の分割線 */
#menubar .divider {
	background-color: #DCDCDC;		/* 背景色 */
	flex: none;						 /* divideのみflexを解除 */
	width: 1px;						 /* 幅を細くする */
}
/*スマホ用メニューを表示させない*/
#menubar-s {display: none;}
/*３本バーアイコンを表示させない*/
#menubar_hdr {display: none;}

/*コンテンツ（main,sub,footerを囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	clear: left;
}

/*トップページのメイン画像
---------------------------------------------------------------------------*/
#mainimg {
	position: relative;
}
#mainimg img {
	width: 100%;
	height: auto;
	margin-bottom: 30px;	/* 画像の下に空けるスペース */
}
/* 画像を少し暗くする */
#mainimg::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 30px; 							/* 画像の下に空けるスペース分 */
	background-color: rgba(0, 0, 0, 0.2); /* 最後の引数で暗さを調節 */
}
/* 画像の上にある文字の位置以外のデザイン */
#mainimg p {
	/* 文字の位置を決定 */
	position: absolute;
	font-weight: bold;					/* 文字の太さ */
	font-size: 10vw; 					/* 画面の大きさによってフォントの大きさを変更 */
	color: #FFF;					   /* 文字の色 */
}
/* 画像の上にある文字の一番上の文字 */
#mainimg .img_text_top {
	top: 10%;
	left: 10%
}
/* 画像の上にある文字の真ん中の文字 */
#mainimg .img_text_middle {
	top: 35%;
	left: 35%
}
/* 画像の上にある文字の一番下の文字 */
#mainimg .img_text_bottom {
	top: 60%;
	left: 60%
}

/*メインコンテンツ
---------------------------------------------------------------------------*/
/*１カラム利用時*/
body.c1 #main {
	float: none;
	width: auto;
}
/*mainコンテンツのh2タグ*/
#main h2 {
	font-size: 3em; 							/* 文字サイズを画面に合わせる */
	text-decoration: #DCDCDC underline 2px;   /* 下線の色と太さ */
	text-underline-offset: 13px;				/* 下線と文字の距離 */
	text-align: center;							/* 文字位置を真ん中 */
	color: var(--main-bg-color);				/* 文字色 */
	
}
/*mainコンテンツの段落タグ設定*/
#main p {
	padding: 0px 20px 15px;	/*上、左右、下への余白*/
}
#main h2 + p,
#main h3 + p {
	margin-top: -10px;
}

/* Newsコンテンツ設定 
---------------------------------------------------------------------------*/
#news_contents {
	margin-bottom: 50px;
	max-height: 200px;					/* 最大の高さ */
	overflow-y: auto;					/* スクロールあり */
	font-family: Arial, sans-serif;		/* フォント */
}

#news_contents ul {
	list-style: none;	/*・などをつけないようにする*/
	padding: 0;
	margin: 0;
}

#news_contents li {
	display: flex;
	flex-direction: row;					/* 横並び */
	align-items: flex-start;				/* フレックスアイテムを先頭にまとめる */
	padding: 5px;
	border-bottom: 1px solid #DCDCDC;	   /* 下線 */
}
/* 日付の設定 */
date {
	margin-right: 10px;
	font-weight: bold;
	color: #333;
	flex-basis: 130px;	/* flex-basisを設定して幅を固定する */
	flex-shrink: 0;		/* テキストを縮めないようにする */
}
/* ラベル全体の設定 */
.label {
	padding: 2px 8px;
	margin-right: 5px;
	border-radius: 5px;
	color: #fff;
	font-size: 0.8em;
	white-space: nowrap;
}

.new {
	background-color: #F22323;		/* 新規NEWSの背景色 */
	margin-left: 5px;				 /* 隣のラベルとの間隔 */
}

.hpUpdate {
	background-color: #7EB31C;		/* NEWSのHP更新の際の背景色 */
}

.recruit {
	background-color: #1C81C9;		/* NEWSの採用の際の背景色 */
}

.app {
	background-color: #E36276;		/* NEWSの採用の際の背景色 */
}

/* メディアクエリで780px以下のデバイスの調整 */
@media (max-width: 780px) {
	#news_contents li {
		flex-wrap: wrap;	/* アイテムが折り返すように設定 */
	}

	date,
	.label {
		flex-basis: auto;	/* 自然な幅に */
		order: 1;			/* flex順序を1にして上に配置 */
	}

	.news_text {
		flex-basis: 100%;	/* ニューステキストの幅を100%にして改行させる */
		order: 2;			/* flex順序を2にして下に配置 */
		margin-top: 5px;	
	}
}
/* 事業内容設定 
---------------------------------------------------------------------------*/
#businessContentContainer h3 {
	margin-bottom: 20px;
	color: var(--main-bg-color);
	font-size:3vw;
	text-decoration: #DCDCDC underline 2px;	/* 下線の色と太さ */
	text-underline-offset: 10px;			     /* 下線と文字の距離 */
}
#businessContentContainer p {
	color: #10171d;
	font-size: 2vw;
	padding: 0;
} 
.businessContent {
	margin-bottom: 40px;
}
.problemSolving, .appDev  {
	display:flex;			/* 横並び */
	flex-basis: 130px;		/* flex-basisを設定して幅を固定する */
	flex-shrink: 0;			/* テキストを縮めないようにする */
	
}
.problemSolving img, .appDev img{
	margin: 0 0 0 auto;		/* 画像を右に配置 */
}


/* Responsive adjustments */
@media (max-width: 768px) {
	#businessContentContainer {
		flex-direction: column;
		align-items: center;
	}

	.businessContent {
		width: 100%;
	}

	.businessContentIcon {
		position: static;
		margin: 10px auto;
		display: block;
	}
}
@media (max-width: 480px) {
	.businessContent img {
		display: none;
	}
	.problemSolving, .appDev {
		display: block;
		width: 100%;
		flex-basis: 0;
	}
	#businessContentContainer p {
		color: #10171d;
		font-size: 2vh;
		padding: 0;
	}
	.businessContent {
		margin-bottom: 10px;
	}
}
/* 会社概要設定
---------------------------------------------------------------------------*/
#company_contents ul {
	list-style: none;		/*・などをつけないようにする*/
	padding: 0;
	margin: 0;
}

#company_contents li {
	display: flex;
	flex-direction: row;				 /* 横並び */
	align-items: flex-start;			 /* フレックスアイテムを先頭にまとめる */
	padding: 5px;
	border-bottom: 1px solid #DCDCDC;
}

#company_contents li span {
	margin: 10px 10px 10px 0;
}
#company_contents li span img {
	width: 160px;
}

.company_th {
	font-weight: bold;
	color: #333;
	flex-basis: 25%;		/* flex-basisを設定して幅を固定する */
	flex-shrink: 0;			/* テキストを縮めないようにする */
}

/*フッター設定
---------------------------------------------------------------------------*/
footer {
	margin-top: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	clear: both;
	text-align: center;
	background-color: var(--main-bg-color);
	
}
footer a {
	text-decoration: none;
	color:#FFF;
}
footer .pr {
	display: block;
	font-size: 80%;
}

/*ページの上部へ（↑）ボタン
---------------------------------------------------------------------------*/
@keyframes scroll {
0% {opacity: 0;}
100% {opacity: 1;}
}

body .nav-fix-pos-pagetop a {display: none;}
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 100;
	animation-name: scroll;	/*上のアニメーションで指定しているkeyframesの名前（scroll）*/
	animation-duration: 1S;	/*アニメーションの実行時間*/
	animation-fill-mode: forwards;	/*アニメーションの完了後、最後のキーフレームを維持する*/
	width: 50px;		/*幅*/
	line-height: 50px;	/*高さ*/
	position: fixed;	/*固定表示*/
	bottom: 50px;	/*下から50pxの場所に配置*/
	right: 3%;		/*右から3%の場所に配置*/
	background: #000;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.6);	/*背景色。0,0,0は黒の事で0.6は透明度60%の事。*/
	color: #fff;	/*文字色*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
}
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
	background: #999;	/*マウスオン時の背景色*/
}

/*その他
---------------------------------------------------------------------------*/
.look {background: #dcdcdc;}
.mb15,.mb1em {margin-bottom: 15px !important;}
.clear {clear: both;}
ul.disc {padding: 0em 25px 15px;list-style: disc;}
.color1, .color1 a {color: #e44747;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
img.fr {float: right;margin-left: 10px;margin-bottom: 10px;}
img.fl {float: left;margin-right: 10px;margin-bottom: 10px;}
.big1 {font-size: 20px;}
.mini1 {font-size: 11px;display: inline-block;line-height: 1.5;}
.sh {display: none;}



/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

/*main,subコンテンツ
---------------------------------------------------------------------------*/
#main, #sub {
	float: none;
	width: auto;
}

/*メインメニュー
---------------------------------------------------------------------------*/
/*アニメーションのフレーム設定。全100コマアニメーションだと思って下さい。透明度(opacity)0%から透明度100%にする指定。*/
@keyframes menu1 {
0% {opacity: 0;}
100% {opacity: 1;}
}
/*スマホ用メニューブロック*/
#menubar-s {
	display: block;overflow: hidden;
	position: absolute;
	top: 90px;	/*上から90pxの場所に配置*/
	border-top: 1px solid #fff;		/*上の線の幅、線種、色*/
	width: 94%;
	z-index: 10;
	animation-name: menu1;		/*上のkeyframesの名前*/
	animation-duration: 0.5S;	/*アニメーションの実行時間。0.5秒。*/
	animation-fill-mode: both;	/*待機中は最初のキーフレームを、完了後は最後のキーフレームを維持*/
}
/*メニュー１個あたりの設定*/
#menubar-s li a {
	display: block;							/* ブロック状 */
	text-decoration: none;   				/* 線なし */
	padding: 15px 10px 15px 20px;			/*上、右、下、左へのメニュー内の余白*/
	font-weight:bold;						/* 太文字 */
	font-size: large;						/* フォントサイズ */
	border: 1px solid var(--main-bg-color);	/* 下の線の幅、線種、色 */
	background: #fff;			   		   /* 背景色 */
	color: var(--main-bg-color);			/* 文字色 */
}
/* メニューアイテムの最後の子要素 */
#menubar-s li::after {
	background: var(--main-bg-color);					/* 背景色 */
	position: absolute;									/* 絶対的に配置 */
	top: 0;												/* 垂直位置 */
	left: 0;											/* 水平位置 */
	content: '';										/* 置換要素 */
	width: 100%;										/* 幅100% */
	height: 100%;										/* 高さ100% */
	transform: scale(0, 1);								/* 拡縮する座標変換 */
	transform-origin: left top;							/* 左上を原点とする */
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);		/* 2秒間のアニメーション */
	z-index: -1;										/* 要素を重ねる */
}

/* メニューアイテムのマウスオーバー */
#menubar-s li a:hover {
	color: #fff;					           /* 文字の色 */
	background-color: var(--main-bg-color);		/*背景色*/
}

/* メニューアイテムの最後の子要素のマウスオーバー */
#menubar-s li:hover::after {
	transform: scale(1, 1);		/* 拡縮する座標変換 */
}
/*英語表記（飾り文字）*/
#menubar-s li a span {
	display: block;		/* ブロック */
	font-size: 12px;	/* 文字サイズ */
}
/*PC用メニューを非表示にする*/
#menubar {
	display: none;
}

/*３本バーアイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
	display: block;
	position: absolute;
	top: 20px;	/*上から20pxの場所に配置*/
	right: 3%;	/*右から3%の場所に配置*/
}
/*アイコン共通設定*/
#menubar_hdr.close,
#menubar_hdr.open {
	width: 50px;	/*幅*/
	height: 50px;	/*高さ*/
}
/*三本バーアイコン*/
#menubar_hdr.close {
	background: #fff url(../images/icon_menu.png) no-repeat center top/50px;
}
/*閉じるアイコン*/
#menubar_hdr.open {
	background: #fff url(../images/icon_menu.png) no-repeat center bottom/50px;
}

/*その他
---------------------------------------------------------------------------*/
body.s-n #sub,body.s-n #footermenu,.m-n {display: none;}
.sh {display:block;}
.pc {display:none;}

}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*全体の設定
---------------------------------------------------------------------------*/
body {
	font-size: 12px;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*ヘッダー
---------------------------------------------------------------------------*/
header {
	padding: 30px 0px;	/*上下、左右へのヘッダー内の余白*/
}

/*mainコンテンツ
---------------------------------------------------------------------------*/
#main h2 {
	padding: 10px;
	margin-bottom: 10px;
}
#main h3 {
	font-size: 14px;
	padding: 6px 10px;
}
/*段落タグ設定*/
#main p {
	padding: 0px 10px 15px;	/*上、左右、下への余白*/
}
#company_contents li span img {
	width: 130px;
}
}

/*画面幅400px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:400px){

	/*ヘッダー
	---------------------------------------------------------------------------*/
	/*ロゴ画像*/
	header #logo img {
		width: 100px;	/*画像幅*/
	}
}


/* 問い合わせフォーム
--------------------------------------------------------------------------*/
#contact_form {
	width: 100%;
	margin: 0 5%;
	margin: auto;
	font-family: Arial, sans-serif;
}

.form_row {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	margin-bottom: 15px;
}

.form_row input[type="text"],
.form_row .gender_options {
	flex-grow: 1;
}
.gender_options {
	display: flex;
}

.gender_options label {
	margin-right: 10px;
	display: block;
}

.gender_options input {
	margin-right: 5px;
}

.label_text {
	font-size: 0.8em;
	padding: 2px 5px;
	border-radius: 3px;
	color: #fff;
	vertical-align: middle;
	flex-basis: auto;
	order: 0;
	width: fit-content;
}
.label_row {
	display: flex;
	flex-direction: row;
	margin: 5px 0;
	width: 100%;
}
.label_row label, .hide_text {
	font-weight: bold;
	width: 150px;
}
/* 必須ラベル */
.required {
	background-color: #E36276;
}
/* 任意ラベル */
.optional {
	background-color: var(--main-bg-color);
}
/* 注意テキスト */
.attention_text {
	color: #7E7E7E;
}
/* inputフォームの設定 */
.form_row input[type="text"] {
	flex-grow: 1;
	padding-left: 5px;
	border: 1px solid #cccccc;
	border-radius: 3px;
}
/* お問い合わせ内容のみ高さをつける */
input#contact {
	height: 200px
}