@charset "UTF-8";

/****************************************ページ全体の設定*/

/* 初期値として余白をつけないようにしている */
* {
	margin:0;
	padding:0;
}

body {
	line-height:140%;
	letter-spacing:0.05em;
}

/* すべてのリンク・ボタンでカーソル変更 */
a, input[type="submit"] {
	cursor:pointer;
	text-decoration:none;
}

/* 画像初期設定 */
img {
	border:none;
	vertical-align:bottom;
}

/* ロゴ画像設定 */
.logo {
	width:100%;
	max-width:150px;
}

/* ページ内リンクの位置調整 */
.plink {
	display:block;
	position:relative;
	top:-75px;
}

/* フレックス化 */
.to_flex {
	display:flex;
	flex-wrap:wrap;
}

/****************************************ヘッダの設定*/

header {
	z-index:9990;
	position:fixed;
	width:100%;
	background-color:rgb(0,0,0,0.4);/* 透過の色 */
	color:#ffffff;
}

.header_waku {
	margin:0px auto;
	padding:0px 30px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
}
.header_logo img {
	padding:0px 0px 4px 0px;
}
.header_logo span {
	font-size:90%;
	display:inline-block;
	padding:0px 0px 12px 20px;
}

/* スマホ対応 */
@media screen and (max-width:480px){
	.header_waku {
		padding:0px 10px;
	}
	.header_logo img {
		width:40%;
		padding:5px 0px 7px 0px;
	}
	.header_logo span {
		font-size:75%;
		padding:0px 0px 14px 10px;
	}
}


/****************************************ヘッダメニュー（PC）*/

.header_link {
	list-style:none;
	display:flex;
	flex-wrap:nowrap;
}
.header_link a {
	display:block;
	padding:10px 12px 9px 12px;
	color:#ffffff;
	text-align:center;
	transition:all 0.1s;
}
.header_link a:hover {
	background-color:rgba(255,255,255,0.3);
}

.header_contact {
	text-align:center;
	background-color:rgba(0,0,0,0.5);
	padding:7px 0px 5px 0px;
	font-size:120%;
	
}
.header_contact span {
	font-weight:bold;
	font-size:110%;
	
	color:#ea5532;
	
}

/* スマホ対応 */
@media screen and (max-width:480px){
	#nav_PC {
		display:none;
	}
}


/****************************************ヘッダメニュー（スマホ）*/

#nav_MOBILE {
	display:none;
}

/* ハンバーガーアイコン */
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* アイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 30px;
  width: 30px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #fff;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.nav_content {
  width:calc(100% - 100px);
  height: 100%;
  padding:100px 50px;
  position: fixed;
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background:rgba(0,0,0,0.8);
  transition: .5s;
}

/* メニュー黒ポチを消す */
.nav_list {
  list-style: none;
}

.nav_item {
	padding:10px;
	border-bottom:1px solid #ffffff;
}

.nav_item a {
	color:#ffffff;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0;/* メニューを画面に入れる */
}

/* スマホ対応 */
@media screen and (max-width:480px){
	#nav_MOBILE {
		display:block;
	}
}

/****************************************メインイメージ枠の設定*/

.main_image {
	background-image:url('../img/topimage.jpg');
	background-position:center;
	background-size:cover;
}

.main_image_content {
	margin:0px auto;
	height:620px;
}

.main_image_box {
	max-width:880px;
	margin:0px auto 100px auto;
	position:relative;
	top:140px;
	text-align:center;
	border:2px solid #ffffff;
	border-radius:15px;
	background:rgba(0,0,0,0.7);
}

.main_image_img {
	max-width:560px;
	padding:25px 40px 30px 40px;
	background:rgba(255,255,255,1);
	border-radius:13px 0px 0px 13px;
}

.main_image_img img {
	width:100%;
}

.main_image_message {
	width:240px;
	font-size:150%;
	font-weight:bold;
	margin:40px 0px 0px 0px;
	line-height:1.4em;
	color:#ffffff;
}
.main_image_message_st {
	font-size:120%;
	line-height:1.5em;
	color:#ea5532;
}

.main_image_overview {
	position:relative;
	top:15%;
	max-width:860px;
	margin:auto;
}

.main_image_overview div {
	width:33%;
	max-width:260px;
}

.main_image_overview div img {
	width:100%;
}

.dounyu {
	text-align:center;
	margin-top:75px;
	font-size:120%;
	line-height:1.5em;
}

.resp_br {
	display:block;
}

/* スマホ対応 */
@media screen and (max-width:480px){
	.main_image {
		padding-top:50px;
	}
	.main_image_content {
		height:300px;
	}
	.main_image_box {
		width:94%;
		top:35px;
		margin:0px auto;
	}
	.main_image_img {
		padding:15px 40px;
		border-radius:10px 10px 0px 0px;
	}
	.main_image_message {
		width:100%;
		font-size:95%;
		line-height:1.4em;
		margin:10px 0px 0px 0px;
		text-shadow:none;
	}
	.main_image_overview {
		width:92%;
		top:20%;
	}
	.main_image_overview div {
		max-width:110px;
	}
	.dounyu {
		width:94%;
		margin:40px auto 0px auto;
		font-size:90%;
		text-align:left;
	}
	.resp_br {
		display:inline;
	}
}


/****************************************本文を囲む枠の設定 */

.waku_inner {
	max-width:1000px;
	margin:0px auto;
	padding:60px 0px;
}

/* お問い合わせリンク */
.for_toiawase {
	display:block;
	border:4px solid #ea5532;
	border-radius:10px;
	width:80%;
	max-width:880px;
	padding:12px 0px 15px 0px;
	background-color:#ea5532;
	color:#ffffff;
	text-align:center;
	font-size:200%;
	position:fixed;
	bottom:20px;
	left:50%;
	transform: translateX(-50%);
	line-height:1em;
}
.for_toiawase span {
	font-size:70%;
}
.for_toiawase:hover {
	border:4px solid #1864A1;
	background-color:#4A9CC9;
}

.for_Gform {
	display:block;
	border:4px solid #ea5532;
	border-radius:10px;
	width:80%;
	max-width:600px;
	padding:8px 0px 10px 0px;
	background-color:#ea5532;
	color:#ffffff;
	text-align:center;
	font-size:100%;
    margin:30px auto 0px auto;
}
.for_Gform:hover {
	border:4px solid #1864A1;
	background-color:#4A9CC9;
}

/* スマホ対応 */
@media screen and (max-width:480px){
	.waku_inner {
		padding:50px 0px;
	}
	.flexbox {
		width:calc(90% - 40px);
	}
	.for_toiawase {
		width:90%;
		padding:16px 0px 14px 0px;
		font-size:140%;
		bottom:10px;
	}
}


/****************************************見出しの設定*/

h2 {
	text-align:center;
	font-weight:normal;
	font-size:180%;
	max-width:70%;
	margin:0px auto 50px auto;
	padding-bottom:15px;
	border-bottom:1px solid #1864A1;
}

h3 {
	font-weight:normal;
	margin:0px auto 20px auto;
	border-left:4px solid #1864A1;
	padding:5px 0px 3px 10px;
	font-size:140%;
}

/* スマホ対応 */
@media screen and (max-width:480px){
	h2 {
		max-width:80%;
		font-size:110%;
		padding-bottom:10px;
		margin:0px auto 30px auto;
	}
	h3 {
		width:94%;
		text-align:center;
		border-right:4px solid #1864A1;
		margin:0px auto 5px auto;
		padding:2px 0px 0px 0px;
		font-size:100%;
	}
}


/****************************************削減説明枠の設定*/

/* 両方を入れる枠 */
.sakugen_box {
	width:100%;
	margin:0px auto;
}

/* 画像側枠 */
.image_side {
	text-align:center;
	width:50%;
	min-width:340px;
	margin:0px auto;
}
.image_side img {
	width:100%;
}

/* 文章側枠 */
.text_side {
	width:47%;
	padding-left:30px ;
	margin:0px auto;
}

/* スマホ対応 */
@media screen and (max-width:480px){
	.image_side {
		width:96%;
	}
	.text_side {
		width:96%;
		margin-top:25px;
		padding-left:0px;
	}
}

/****************************************導入の流れの設定*/

.nagare_box {
	margin:0px auto;
	border:3px solid #1864A1;
	border-radius:10px;
	text-align:center;
}

.nagare_box.long {
	width:80%;
}

.nagare_box.short {
	width:50%;
	padding:20px 0px;
	text-align:center;
}

.nagare_leftbox {
	width:40%;
	padding:25px 0px;
	border-radius:8px 0px 0px 8px;
}

.nagare_rightbox {
	padding:20px 0px;
}

.nagare_rightbox ol {
	margin-left:40px;
	text-align:left;
}

.nagare_rightbox li {
	list-style:square !important;
}

.nagare_midashi {
	font-size:140%;
	font-weight:bold;
	line-height:1.3em;
	background:#4A9CC9;
	color:#ffffff;
}

.nagare_tsunagi {
	width:20%;
	margin:0px auto;
	padding:20px 0px;
	background-color:#dddddd;
}

/* スマホ対応 */
@media screen and (max-width:480px){
	.nagare_box.long {
		width:94%;
	}
	.nagare_box.short {
		width:94%;
	}
	.nagare_leftbox {
		width:100%;
		padding:10px;
		border-radius:8px 8px 0px 0px;
	}
	.nagare_rightbox {
		width:100%;
	}
	.nagare_rightbox ol {
		margin-left:30px;
	}
	.nagare_midashi {
		font-size:100%;
	}
	.nagare_tsunagi {
		width:40%;
		padding:10px 0px;
	}
}

/****************************************導入事例の設定*/

.jirei {
	width:32%;
	margin:0px auto;
}

.jirei tr:nth-child(2n+1) {
	background-color:#dddddd;
}

.jirei th {
	padding:10px 0px 7px 0px;
	background-color:#4A9CC9;
	color:white;
	font-size:110%;
}

.jirei td {
	padding:10px 0px 7px 10px;
}

.jirei td.jirei_img {
	padding:0px;
}

.jirei_img img {
	width:100%;
}

.jirei td.sakugen {
	font-weight:bold;
	color:red;
	font-size:large;
}

/* スマホ対応 */
@media screen and (max-width:480px){
	.jirei {
		width:96%;
		margin:0px auto 20px auto;
	}
}


/****************************************お問い合わせの設定*/
.hidden {
	display: none;
}
#otoiawase {
	width:70%;
	margin:0px auto;
	padding: 0 2% 3% 2%;
	z-index: 9997;
}
#otoiawase h3 {
	margin-bottom: 1%;
	color: white;
}
#otoiawase label, #otoiawase input {
	cursor: pointer;
}
#otoiawase ol, #otoiawase dt, #otoiawase dd {
	margin: 0;
	padding: 0;
	padding-inline-start: 0;
}
#otoiawase .consent {
	background-color: #E0E0E0;
	color: #111111;
	padding: 8px 0;
	border-radius: 0.4em;
	list-style-position: inside;
}
#otoiawase .consent ol {
	text-align: left;
	display: none;
}
#otoiawase .consent ol li {
	list-style: lower-alpha;
}
#otoiawase #consent:checked + .consent ol {
	font-size: 72%;
	display: block;
	background-color: rgba(255, 255, 255, 0.50);
	margin: 0 8px;
	padding: 16px 5%;
	height: 300px;
	overflow-y: scroll;
}
#otoiawase .consent li dt {
	display: inline;
}
#otoiawase .consent li dd {
	margin-left: 4px;
	padding-left: 4px;
	border-left: thin solid #555555;
}
#otoiawase .consent #consent_check {
	margin: 0 8px;
	text-align: center;
	display: block;
}
#otoiawase .consent #consent_check span {
	display: inline-block;
	width: 14px;
	height: 14px;
	line-height: 14px;
	color: rgba(21, 21, 21, 1.00);
	margin-top: -2px;
	margin-right: 8px;
	border: thin solid #555555;
	border-radius: 0.2em;
	background-color: #ffffff;
}
#otoiawase #consent:checked + .consent #consent_check {
	padding-bottom: 4px;
	border-bottom: thin solid #555555;
}
#otoiawase #consent:checked + .consent #consent_check span {
	color: rgba(21, 21, 21, 0.00);
}
#otoiawase #consent:checked + .consent + .form {
	pointer-events: none;
	opacity: 0.5;
}

/* スマホ対応 */
@media screen and (max-width:480px){
	#otoiawase {
		width:98%;
		padding:0;
	}
}

/****************************************フッターの設定*/
footer {
	background-color:#333333;
	padding:40px 0px 100px 0px;
}
footer .flex {
	display:flex;
	flex-wrap:wrap;
}
footer div {
	max-width:1200px;
	margin:0px auto;
	line-height:1.7em;
	color:#ffffff;
}
footer iframe {
	flex-basis:40%;
	flex-grow:1;
	padding-right:25px;
}
footer div address {
	flex-basis:50%;
	padding-left:25px;
}
footer dt {
	flex-basis:15%;
}
footer dd {
	flex-basis:84%;
}
footer .copyright {
	padding:30px 0px;
	font-size:small;
	text-align:center;
}


/* スマホ対応 */
@media screen and (max-width:480px){
	footer {
		min-width:inherit;
		padding:40px 0px 60px 0px;
	}
	footer div {
		width:90%;
		line-height:1.2em;
	}
	footer iframe {
		flex-basis:100%;
		padding:0px 0px 30px 0px;
	}
	footer div address {
		font-size:small;
		flex-basis:100%;
		width:1200px;
		padding-left:0px;
	}
}



/****************************************cookie同意表示の設定*/

.cookie-consent {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	bottom: 0;
	width: 100%;
	font-size: 12px;
	color: #fff;
	background: rgba(0,0,0,.7);
	padding: 1.2em;
	box-sizing: border-box;
	visibility: hidden;
}
.cookie-consent.is-show {
	visibility: visible;
}
.cookie-consent a {
	color: #fff !important;
}
.cookie-agree {
	color: #fff;
	background: dodgerblue;
	padding: .5em 1.5em;
}
.cookie-agree:hover {
	cursor: pointer;
}
/* パッと消える */
.cc-hide1 {
	display: none;
}
/* ゆっくり消える */
.cc-hide2 {
	animation: hide 1s linear 0s;
	animation-fill-mode: forwards;
}
@keyframes hide {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
		visibility: hidden;
	}
}

/* スマホ対応 */
@media screen and (max-width:480px){
	.cookie-consent {
		flex-direction: column;
	}
	.cookie-text {
		margin-bottom: 1em;
	}
}