@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;500&display=swap');
@charset "shift_jis";
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');
@font-face {
  font-family:'Noto Sans JP'
  src: local(HiraginoSans-W0);
  font-weight: 100;
}
@font-face {
  font-family:'Noto Sans JP'
  src: local(HiraginoSans-W1);
  font-weight: 200;
}
@font-face {
  font-family:'Noto Sans JP'
  src: local(HiraginoSans-W2);
  font-weight: 300;
}
@font-face {
  font-family:'Noto Sans JP'
  src: local(HiraginoSans-W3);
  font-weight: 400;
}
@font-face {
  font-family:'Noto Sans JP'
  src: local(HiraginoSans-W4);
  font-weight: 500;
}
@font-face {
  font-family:'Noto Sans JP'
  src: local(HiraginoSans-W5);
  font-weight: 600;
}
@font-face {
  font-family:'Noto Sans JP'
  src: local(HiraginoSans-W6);
  font-weight: 700;
}
@font-face {
  font-family:'Noto Sans JP'
  src: local(HiraginoSans-W7);
  font-weight: 800;
}
@font-face {
  font-family:'Noto Sans JP'
  src: local(HiraginoSans-W8);
  font-weight: 900;
}
@font-face {
  font-family:'Noto Sans JP'
  src: local(HiraginoSans-W9);
  font-weight: 900;
}

/*フォント設定*/
.he_italic{
	font-family: Helvetica;
  font-style: italic;
  font-weight: bold;
  line-height: 118%;
  text-align:left;
  font-size:300%;
  color:#343434;
}

.he_italic_white{
	font-family: Helvetica;
  font-style: italic;
  font-weight: bold;
  line-height: 118%;
  text-align:left;
  font-size:400%;
  color:#fff;
}

.he_italic_blue{
	font-family: Helvetica;
  font-style: italic;
  font-weight: bold;
  line-height: 118%;
  text-align:left;
  font-size:300%;
  color:#01a0c6;
}

.sub_title{
	letter-spacing: 0.12em;
	color:#6a6a6a;
	font-size: 80%;
  margin: 0;
}

.sub_title_white{
	letter-spacing: 0.12em;
	color:#fff;
	font-size: 110%;
  margin: 0;
}

.sub_title_blue{
	letter-spacing: 0.12em;
	color:#01a0c6;
	font-size: 80%;
  margin: 0;
}

/*index*/
.row{
	position: relative;
  width: 90%;
}

.row_re{
	position: relative;
  width: 100%;
}

.top_text{
	position: absolute;
  top: 0;
  left: 0;
  width: 85% !important;
  padding: 20px 50px !important;
  background-color: rgba(255,255,255,0.8);
  text-align: left;
  font-size: 1vw;
}

.top_text_re{
	position: absolute;
  top: -5vw;
  left: 0;
  width: 60% !important;
  padding: 20px 50px !important;
  text-align: left;
  font-size: 1vw;
	background: linear-gradient(90deg, rgb(1, 160, 198) 0%, rgba(79,190,215,0.28335084033613445) 100%);
}

.top_line{
	width: 100%;
  position: absolute;
  left: 0;
  top: 60vh;
}

.re_line{
	position: absolute;
  left: 0;
  top: 0;
	width: 100%;
	z-index:-1;
}

.news_info{
	width: 103px;
	background-color: #343434;
  color: #fff;
  text-align: center;
  border-radius: 50px;
  padding: 5px 10px;
  line-height: 110%;
}

.news_recruit{
	width: 103px;
	background-color: #01a0c6;
  color: #fff;
  text-align: center;
  border-radius: 50px;
  padding: 5px 10px;
  line-height: 110%;
}

/* アコーディオンメニュー クリックしたら開く*/
.ac-menu:last-child {
  margin-bottom: 60px;
}

.ac-menu > input {
  display: none;
}

.ac-menu > label {
  padding: 15px;
  margin: 0;
  cursor: pointer;
  position: relative;
}

.ac-menu > label:after {
  position: absolute;
  right: 20px; 
  top: 50%; 
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
  content: "▼"; 
}

.ac-menu > input:checked ~ label::after {
  content: "▲"; 
}

.ac-menu > div {
  height: 0;
  overflow: hidden;
  opacity: 0;
}

.ac-menu > input:checked ~ div {
  height: auto;
  opacity: 1;
  padding: 20px; 
	background-color: #f7f7f7;
}

/*アコーディオンメニュー クリックしたら閉じる*/
.open-menu:last-child {
  margin-bottom: 60px;
}

.open-menu > input {
  display: none;
}

.open-menu > label {
  padding: 15px;
  margin: 0;
  cursor: pointer;
  position: relative;
}

.open-menu > label:after {
  position: absolute;
  right: 20px; 
  top: 50%; 
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
  content: "▲"; 
}

.open-menu > input:checked ~ label::after {
  content: "▼"; 
}

.open-menu > div {
  opacity: 1;
}

.open-menu > input:checked ~ div {
  height: 0;
  overflow: hidden;
  opacity: 0;
	background-color: #f7f7f7;
}

.search-box_title {
    display: block;
    margin: 10px 0 10px 0;
    padding: 5px;
    text-align: center;
    font-size: 130%;
    color: #fff;
		background: #01a0c6;
    border-radius: 3px;
}

.search-box_title:hover {
	opacity:0.8;
}

/* タブメニューのスタイル */
.re_tab {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    margin-top: 40px;
}

.re_tab > label {
    flex: 1 1;
    order: -1;
    opacity: .5;
    min-width: 70px;
    padding: .6em 1em;
    border-radius: 5px 5px 0 0;
    background-color: #666;
    color: #fff;
    font-size: 120%;
    text-align: center;
    cursor: pointer;
}

.re_tab > label:hover {
    opacity: .8;
}

.re_tab input {
    display: none;
}

.re_tab > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
    background-color: #fff;
    border: 1px solid #666;
}

.re_tab label:has(:checked) {
    opacity: 1;
}

.re_tab label:has(:checked) + div {
    display: block;
}

.re_tab_2 {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    margin-top: 40px;
}

.re_tab_2 > label {
    flex: 1 1;
    order: -1;
    opacity: .5;
    min-width: 70px;
    padding: .6em 1em;
    border-radius: 5px 5px 0 0;
    background-color: #666;
    color: #fff;
    font-size: 120%;
    text-align: center;
    cursor: pointer;
}

.re_tab_2 > label:hover {
    opacity: .8;
}

.re_tab_2 input {
    display: none;
}

.re_tab_2 > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
    background-color: #fff;
    border: 1px solid #666;

}

.re_tab_2 label:has(:checked) {
    opacity: 1;
}

.re_tab_2 label:has(:checked) + div {
    display: block;
}

.re_tab_3 {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    margin-top: 40px;
}

.re_tab_3 > label {
    flex: 1 1;
    order: -1;
    min-width: 70px;
    padding: .6em 1em;
    border-radius: 5px 5px 0 0;
    background-color: #666;
    color: #fff;
    font-size: 120%;
    text-align: center;
    cursor: pointer;
}

.re_tab_3 input {
    display: none;
}

.re_tab_3 > div {
    display: block;
    width: 100%;
    padding: 1.5em 1em;
    background-color: #fff;
    border: 1px solid #666;
}


/*テーブル*/
.table_re {
    border-top: 0px #DDD solid;
    border-bottom: 0px #DDD solid;
    background-color: #01a0c6;
    border-spacing: 1px 1px;
    border-collapse: inherit;
}

.table_re th {
    border-bottom: 0px #FFF solid;
    background-color: #d8f1f6;
    text-align: center;
    font-size: 110%;
}

.table_re td {
    border-bottom: 0px #FFF solid;
    background-color: #FFF;
}

.table_re_2 {
		border: 1px #01A0C6 solid;
    font-size: 95%;
    line-height: 200%;
}

.table_re_2 tr{
		border-bottom: 1px #01A0C6 solid;
}

.table_re_2 th {
    border-bottom: 0px #FFF solid;
    background-color: #eefcff;
    text-align: center;
    font-size: 110%;
}

.table_re_2 td {
    border-bottom: 0px #FFF solid;
    background-color: #FFF;
}

.profile th,
.profile td {
  border-bottom: dotted 1px #343434;
  padding: 15px 0 14px;
}

/*ヘッダーのボタン*/
.entry_button{
	position: relative;
	display: block;
  padding-top: 15px !important;
	margin: auto;
	width: 180px;
	background: linear-gradient(90deg, rgba(1,160,198,1) 0%, rgba(79,190,215,1) 100%);
	color: #fff !important;
	font-size: 150% !important;
	text-align: center;
	text-decoration: none;
	border-radius: 50px;
	transition: .3s;
	line-height: 90%;
}

.entry_button::before,
.entry_button::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 40px;
	margin: auto;
	vertical-align: middle;
}

/*.entry_button::before {
	width: 32px;
	height: 32px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: #fff;
}*/

.entry_button::after {
  top: 2px;
  right: 35px;
  width: 10px;
  height: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.entry_button:hover {
  transform: scale(1.1);
}

/*ページ内のボタン*/
.entry_button_re{
	position: relative;
	display: block;
  padding: 20px !important;
	margin: 30px auto;
	width: 250px;
	height: 60px;
	background: linear-gradient(90deg, rgba(1,160,198,1) 0%, rgba(79,190,215,1) 100%);
	color: #fff !important;
	font-size: 150% !important;
	text-align: center;
	text-decoration: none;
	border-radius: 50px;
	transition: .3s;
	line-height: 90%;
}

.entry_button_re::before,
.entry_button_re::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 40px;
	margin: auto;
	vertical-align: middle;
}

.entry_button_re::after {
  top: 2px;
  right: 60px;
  width: 10px;
  height: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.entry_button_re:hover {
  transform: scale(1.1);
}

/*テキスト左から右*/
.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

/*左から右*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    top:10px;
    width: 100%;
    height: 100%;
    background-color: #01a0c6;/*伸びる背景色の設定*/
}

.bgLRextend_re::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    top:10px;
    width: 100%;
    height: 100%;
    background-color: #fff;/*伸びる背景色の設定*/
}


@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

.fadeUp {
    opacity: 0;
    transform: translateY(100px);
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

/* フェードインアニメーション */
@keyframes fadeIn {
    0% {
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}

/*基本body設定*/
html {
    scroll-behavior: smooth;
}

body {
	background-color:#DADFE4;
	margin:0px;
	padding:0px;
	color: #343434;
	font-size: 100%;
	line-height: 160%;
	color: #343434 !important;
	background-color:#FFFFFF;
}

body, textarea { font-family: 'Noto Sans JP', sans-serif !important;;}
input, select { font-family: 'Noto Sans JP', sans-serif;}

p {
 margin: 0px;
 padding: 0px;
}

/*見出し*/
.heading{
	margin:20px 60px 0 0;
}

/*共通リンク設定*/
a:link {
	text-decoration:none;
	color: #343434;
}

a:visited {
	text-decoration:none;
	color: #36728E;
}

a:active {
	text-decoration:none;
	color:#01A0C6;
}

a:hover {
	text-decoration:none;
	color:#01A0C6;
}

/*リンクアイコン設定*/
a.link_80{
	background:url('../image/link.jpg') no-repeat 0px 1px;
	padding-left:12px; padding-right:0px; padding-top:0px; padding-bottom:0px
}
a.link_80:hover{
	background:url('../image/link_on.jpg') no-repeat 0px 1px;
	padding-left:12px; padding-right:0px; padding-top:0px; padding-bottom:0px
}
a.link_90{
	background:url('../image/link_01.gif') no-repeat 0px 2px;
	font-size:90%; padding-left:12px; padding-right:0px; padding-top:0px; padding-bottom:0px
}
a.link_90:hover{
	background:url('../image/link_01_ul.gif') no-repeat 0px 2px;
	font-size:90%; padding-left:12px; padding-right:0px; padding-top:0px; padding-bottom:0px
}
.link_100{
	background:url('../image/link_01.gif') no-repeat 0px 3px;
	padding:0 0 0 12px;
}
.link_100:hover{
	background:url('../image/link_01_ul.gif') no-repeat 0px 3px;
	padding:0 0 0 12px;
}

a.download{
	background:url('../image/download.jpg') no-repeat 0px 0px;
	font-size:100%; padding-left:17px; padding-right:0px; padding-top:1px; padding-bottom:0px
}
a.download:hover{
	background:url('../image/download_on.jpg') no-repeat 0px 0px;
	font-size:100%; padding-left:17px; padding-right:0px; padding-top:1px; padding-bottom:0px
}

/*カラー無しリンク*/
a.color_none:link{
	text-decoration:none;
	color: #6D6D6D;
}
a.color_none:visited{
	text-decoration:none;
	color: #3C464D;
}
a.color_none:active{
	text-decoration:none;
	color: #3566C4;
}
a.color_none:hover{
	text-decoration:none;
	color: #6D6D6D;
}

/*TOPカラー無しリンク設定*/
a.top_color_none{
	display:block;
}
a.top_color_none:link{
	color: #3e3e3e;
}
a.top_color_none:visited{
	color: #3e3e3e;
}
a.top_color_none:hover{
	text-decoration: none;
	background-color:#f7f9ff;
	color: #1962e8;
}
a.top_color_none:active{
	color: #F95858;
}

/*カラー無し背景無しリンク設定*/
a.color_none_2{
	display:block;
}
a.color_none_2:link{
	color: #3e3e3e;
}
a.color_none_2:visited{
	color: #3e3e3e;
}
a.color_none_2:hover{
	text-decoration: none;
	color: #666;
}
a.color_none_2:active{
	color: #F95858;
}

a.color_none_3{
}
a.color_none_3:link{
	color: #3e3e3e;
}
a.color_none_3:visited{
	color: #3e3e3e;
}
a.color_none_3:hover{
	text-decoration: none;
	color: #1962e8;
}
a.color_none_3:active{
	color: #F95858;
}

span.link{
	text-decoration:none;
	color: #4B5F98;
	background:url('../image/link_01.gif') no-repeat 0px 3px;
	padding:0 0 0 12px;
}

span.link:hover{
	text-decoration:none;
	color: #F95858;
	background:url('../image/link_01_ul.gif') no-repeat 0px 3px;
	padding:0 0 0 12px;
}

span.link:visited{
	text-decoration:none;
	color: #3C464D;
	background:url('../image/link_01_ul.gif') no-repeat 0px 3px;
	padding:0 0 0 12px;
}

/*リンク画像透過設定*/
a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}
.navi-image a:hover img {
  opacity: 1.0;
  filter: alpha(opacity=100);
  -ms-filter: "alpha(opacity=100)";
}

/*リストタグ設定*/
ul#submenu{
	margin: 0px 0px 0px -7px;
	padding: 0px 0px 0px 0px;
	list-style: none;
	border-top: 1px solid #EEE; 
}
li#sub1_none{
	margin: 7px 0px 0px 0px;
	padding: 0px;
	list-style: none;
}
li#sub1{
	margin: 0px 0px 0px 0px;
	background: url(../image/link_01.gif) no-repeat 9px 14px;
	border-bottom: 1px solid #EEE; 
	line-height:110%;
}
li#sub1 a{
	padding: 13px 0px 0px 23px;
	display: block;
	height:25px;
}
li#sub1 a:hover{
	background: url(../image/link_01_ul.gif) no-repeat 9px 14px;
	background-color:#FFFFFF;
	display: block;
	height:25px;
}
li#sub1_ul{
	margin: 0px 0px 0px 0px;
	background: url(../image/link_01_ul.gif) no-repeat 9px 14px;
	border-bottom: 1px solid #EEE; 
	background-color:#FFFFFF;
	line-height:110%;
}
li#sub1_ul a{
	padding: 13px 0px 0px 23px;
	display: block;
	height:25px;
	color: #F23737;
}

li#sub2{
	margin: 0px 0px 0px 0px;
	background: url(../image/link_01.gif) no-repeat 20px 8px;
	border-bottom: 1px solid #EEE; 
	line-height:110%;
}

li#sub2 a{
	padding: 7px 0px 0px 35px;
	display: block;
	height:19px;
}

li#sub2 a:hover{
	background: url(../image/link_01_ul.gif) no-repeat 20px 8px;
	background-color:#FFFFFF;
	display: block;
	height:19px;
}

li#sub2_ul{
	margin: 0px 0px 0px 0px;
	background: url(../image/link_01_ul.gif) no-repeat 20px 8px;
	border-bottom: 1px solid #EEE; 
	background-color:#FFFFFF;
	line-height:110%;
}

li#sub2_ul a{
	padding: 7px 0px 0px 35px;
	display: block;
	height:19px;
	color: #F23737;
}

li#sub3{
	margin: 2px 0px 2px 18px;
	padding: 0px;
	list-style-position: outside;
	list-style-image: url(../image/link_v4.gif);
}
li#sub3_nl{
	margin: 2px 0px 2px 18px;
	padding: 0px;
	list-style-position: outside;
	list-style-image: url(../image/nlink_v4.gif);
}
li#sub3_ul{
	margin: 2px 0px 2px 18px;
	padding: 0px;
	list-style-position: outside;
	list-style-image: url(../image/ulink_v4.gif);
}

ul#topsubmenu{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style: none;
	border-top: 1px solid #EEE; 
}
li#topsub1{
	margin: 0px 0px 0px 0px;
	background: url(../image/link_01.gif) no-repeat 9px 14px;
	border-bottom: 1px solid #EEE; 
	line-height:110%;
}
li#topsub1 a{
	padding: 13px 0px 0px 23px;
	display: block;
	height:25px;
}
li#topsub1 a:hover{
	background: url(../image/link_01_ul.gif) no-repeat 9px 14px;
	background-color:#f7f9ff;
	display: block;
	height:25px;
}

li#topsub2{
	margin: 0px 0px 0px 0px;
	background: url(../image/link_01.gif) no-repeat 20px 8px;
	border-bottom: 1px solid #EEE; 
	line-height:110%;
}
li#topsub2 a{
	padding: 7px 0px 0px 35px;
	display: block;
	height:19px;
}
li#topsub2 a:hover{
	background: url(../image/link_01_ul.gif) no-repeat 20px 8px;
	background-color:#f7f9ff;
	display: block;
	height:19px;
}

ul#sitemap{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style: none;
}
li#smsub1{
	margin: 8px 0px 1px 0px;
	background: url(../image/link_01.gif) no-repeat 0px 8px;
	line-height:110%;
}
li#smsub1 a{
	padding: 7px 0px 6px 13px;
	display: block;
	height:14px;
		color:#222;
		text-decoration:none;
}
li#smsub1 a:hover{
	background: url(../image/link_01_ul.gif) no-repeat 0px 8px;
	display: block;
	height:14px;
	color:#e12828;
	background-color:#f7f9ff;
}

li#smsub1_2{
	margin: 3px 0px 1px 0px;
	background: url(../image/link_01.gif) no-repeat 0px 16px;
	line-height:140%;
}
li#smsub1_2 a{
	padding: 13px 0px 0px 12px;
	display: block;
	height:25px;
}
li#smsub1_2 a:hover{
	background: url(../image/link_01_ul.gif) no-repeat 0px 16px;
	display: block;
	height:25px;
	color:#e12828;
	background-color:#f7f9ff;
}

li#smsub2{
	margin: 0px 0px 0px 0px;
	background: url(../image/link_03.gif) no-repeat 9px 7px;
	line-height:110%;
}
li#smsub2 a{
	padding: 6px 0px 4px 22px;
	display: block;
	height:13px;
		color:#222;
		text-decoration:none;
}
li#smsub2 a:hover{
	background: url(../image/link_03_ul.gif) no-repeat 9px 7px;
	display: block;
	height:13px;
	color:#e12828;
	background-color:#f7f9ff;
}

li#smsub2_2{
	margin: 0px 0px 0px 0px;
	background: url(../image/link_03.gif) no-repeat 9px 6px;
	line-height:140%;
}
li#smsub2_2 a{
	padding: 5px 0px 5px 22px;
	display: block;
	height:27px;
		color:#222;
		text-decoration:none;
}
li#smsub2_2 a:hover{
	background: url(../image/link_03_ul.gif) no-repeat 9px 6px;
	display: block;
	height:27px;
	color:#e12828;
	background-color:#f7f9ff;
}

ul#list{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style: none;
}
li#list_1{
	margin: 0px 0px 9px 0px;
	padding: 0px 0px 0px 12px;
	background: url(../image/list_1.gif) no-repeat 0px 14px;
}

li#list_2{
	margin: 0px 0px 5px 0px;
	padding: 0px 0px 0px 12px;
	background: url(../image/list_2.gif) no-repeat 0px 14px;
}

ul.pankuzu{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

ul.pankuzu li{
	list-style: none;
	display: inline;
}

ul.tabs_1{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

ul.tabs_1 li{
	list-style: none;
	display: inline;
	word-wrap: normal;
//	padding:3px;
//	background-color:#DDD;
}

ul.mainmanu{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

ul.mainmanu li{
	list-style: none;
	float: left;
}

ol.decimal_1{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 24px;
}

ol.decimal_1 li{
	margin: 0px 0px 0px 0px;
	padding: 8px 0px 0px 0px;
}


ul#link{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style: none;
	border-top: 1px solid #EEE; 
}
li#link1_none{
	margin: 8px 0px 8px 0px;
	list-style: none;
}
li#link1{
	background: url(../image/link_01.gif) no-repeat 5px 10px;
	border-bottom: 1px solid #EEE; 
	line-height:110%;
}
li#link1 a{
	padding: 8px 0px 8px 19px;
	display: block;
}
li#link1 a:hover{
	background: url(../image/link_01_ul.gif) no-repeat 5px 10px;
	display: block;
}
li#link2_none{
	margin: 8px 0px 8px 0px;
	list-style: none;
}
li#link2{
	background: url(../image/link_01.gif) no-repeat 15px 10px;
	border-bottom: 1px solid #EEE; 
	line-height:110%;
}
li#link2 a{
	padding: 8px 0px 8px 28px;
	display: block;
}
li#link2 a:hover{
	background: url(../image/link_01_ul.gif) no-repeat 15px 10px;
	display: block;
}


li.drawer1{
	color:#000;
	padding: 0px 0px 0px 2px;
	border-bottom: 1px solid #ddd; 
	line-height:300%;
}
li.drawer1 a{
	color:#000;
	display: block;
	text-decoration:none;
}
li.drawer1 a:hover{
	display: block;
	color:#e12828;
	background-color:#f7f9ff;
}

ul.check_1{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style: none;
}
ul.check_1 li{
	padding-left: 30px;
	line-height:150%;
	margin-bottom: 10px;
	background: url(../solution/image/check_1.png) no-repeat 0px 0.2em;
	background-repeat: no-repeat;
	background-size:  auto 20px;
}

ul.check_2{
	margin: 0px 0px 0px 0px;
	padding: 0px 10px 10px 15px;
	list-style: none;
}
ul.check_2 li{
	padding-left: 30px;
	line-height:150%;
	margin-bottom: 10px;
	background: url(../solution/image/check_1.png) no-repeat 0px 0.2em;
	background-repeat: no-repeat;
	background-size:  auto 20px;
}


/*メイン親ボックス*/
div.mainbox{
	position: static;
	border-style: none;
	width: 100%;
	height: 100%;
	margin: 0px auto;
}

	div.black_1{
		position: absolute;
		border-style: none;
		top:0px;
		width: 100%;
		height: 70px;
		background-image:url('../image/rd_black_1.png');
		background-repeat: repeat-x;
	}

	div.contents_area_1{
		font-size: 110%;
		line-height: 190%;
		position: static;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		background-color:#fff;
//		background-image:url('../recruit/image/bg_1.png');
		background-repeat: no-repeat;
	}

	div.contents_area_2{
		font-size: 110%;
		line-height: 190%;
		position: static;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		background-color:#f2f2f2;
//		background-image:url('../recruit/image/bg_2.png');
		background-repeat: no-repeat;
	}

	div.contents_area_3{
		font-size: 110%;
		line-height: 190%;
		position: static;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		background-color:#f2f2f2;
		background-repeat: no-repeat;
		background-image:url('../image/breakout_main_image_9.png');
		background-position: top right;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}

	div.contents_area_4{
		font-size: 110%;
		line-height: 190%;
		position: static;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		background-color:#fff;
		background-repeat: no-repeat;
		background-image:url('../image/breakout_main_image_6.png');
		background-position: top right;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}
	
div.contents_area_blue {
    font-size: 120%;
    line-height: 190%;
    position: static;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    background-color: #01a0c6;
    background-repeat: no-repeat;
}

.top_div {
    padding: 9vw !important;
}

	div.top_left_box_1{
		margin:10px 15px 0px 0px;
		float: left;
	}

	div.top_news_box_1{
		width:100%;
		padding:0px 0px 15px 0px;
		margin:15px 0px 0px 0px;
		background-color:#fff;
	}

	div.top_news_box_2{
		margin:3px 0px 0px 0px;
		padding:12px 15px 0px 15px;
		width:260px;
		background-color:#fff;
	}

	div.top_image_box_1{
		margin:3px 0px 0px 0px;
		padding:0px 0px 0px 0px;
		width:290px;
		height:310px;
		background-color:#fff;
	}

	div.top_text_box_1{
		padding:15px;
	}

	div.top_find_1{
		padding:15px 15px 0px 15px;
	}

	div.top_news_1{
		padding:10px 15px 15px 15px;
		width:100%;
	}

	div.top_news_day_1{
		width:160px;
		padding:3px 5px 0px 10px;
		float:left;
	}

	div.top_news_icon_1{
		width:140px;
		padding:3px 20px 0px 0px;
		float:left;
	}

	div.top_news_text_1{
		padding:3px 0px 0px 0px;
		float:left;
		text-align:left;
	}

	div.re_1{
		width: 1000px;
		text-align: left;
	}
	
	div.re_2{
		width: 1200px;
		margin: 0 auto;
		padding:0 20px;
		text-align: left;
	}
	
div.re_3{
	position: relative;
  top: -4vh;
	width: 100%;
	text-align: left;
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(170,224,236,1) 50%, rgba(255,255,255,1) 100%);
}

	div.re_box_1{
		width: 515px;
		margin:0px 0px 0px 10px;
		padding:50px 10px 70px 40px;
		text-align: left;
		float: left;
//		background-color:#fff;
	}

	div.re_box_2{
		position: relative;
		width: 395px;
		margin:-45px 0px 0px 0px;
		float: left;
		text-align: center;
	}

	div.re_box_3{
		margin:0px 10px 0px 10px;
		padding:40px;
		text-align: left;
	}

	div.re_box_4{
		margin:0px 10px 0px 10px;
		padding:25px 40px 40px 40px;
		text-align: left;
	}

	div.re_box_5{
		margin:0px 10px 0px 10px;
		padding:25px 40px 40px 40px;
		text-align: left;
	}
	
	div.re_box_6{
    position: relative;
    top: -100px;
		padding:40px;
		text-align: left;
	}
	
	div.re_box_wb{
		margin:50px 10px 0px 10px;
		padding:20px 40px 40px 40px;
		text-align: left;
		background-color:#fff;
		float: left;
	}

	div.re_box_top_interview{
		position: relative;
		margin:0px 0px 0px 0px;
		padding:50px 0px 50px 0px;
		text-align: center;
	}

	div.re_image_1{
		position: relative;
		z-index:1;
	}
	div.re_image_2{
		position: relative;
		z-index:2;
	}
	
	div.caption{
		position: relative;
		margin: 13px 0px 0px 0px;
		padding: 4px 0px 0px 0px;
		line-height: 130%;
		font-size:60%;
		text-align: left;
    left: 6vh;
    top: 3vh;
    color: #6a6a6a;
	}

	div.inquiry{
		position: relative;
		margin: 13px 0px 0px 0px;
		padding: 0px 0px 0px 20px;
		width:150px;
		font-size: 90%;
		text-align: right;
		line-height: 0%;
		float: left;
	}


	div.guide{
		position: relative;
		font-size: 90%;
		height:29px;
		margin: 0px 0px 0px 0px;
		padding:7px 10px 0px 10px;
	}

	div.up_text{
		position: static;
		width: 548px;
		text-align: right;
		font-size: 80%;
	}

	.box_01{
		position: relative;
		text-align:justify;
		padding-left:10px;
	}
	.border_01{
		border:1px #445E93 solid;
	}
	

.pl5{
	padding-left:5px;
}

div.free{
	position: static;
}
div.free_re{
	position: relative;
}
div.free_ab{
	position: absolute;
}

div.free_left{
	position: static;
	float: left;
}
div.free_right{
	position: static;
	float: right;
}

div.free_left_re{
	position: relative;
	float: left;
}

div.free_left_ab{
	position: absolute;
	float: left;
}

div.free_p10{
	position: static;
	padding: 10px;
	width: 548px;
}
div.text_548{
	position: relative;
	width: 548px;
	margin: 0px 0px 10px 0px;
}

.form_text_area{
	font-size: 100%; 
	position: relative;
	margin: 0px 0px 0px 0px;
	border:1px #A9A9A9 solid;
	background-color:#FDFDFD;
}

div.privacy_text{
	background-color:#F6F6F6;
  border: solid 1px #CECECE;
  width: 548px;
  height: 150px;
  overflow: auto;
}
div.display_none{
	display: none;
}


.find_v5_1{
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 5px;
	font-weight: bold;
	border-left:2px #547ad9 solid;
}

.find_re_1{
	margin:0px 0px 0px 0px;
	padding:1px 2em 0em 2em;
	font-weight: bold;
	font-size: 130%;
//	line-height: 150%;
//	border-left:2px #547ad9 solid;
	color:#fff;
	background-color:#547ad9;
	display:table-cell;
	vertical-align:middle;
	height:30px;
	letter-spacing:0.2em;
}

.find_re_1_1{
	margin:0px 0px 0px 0px;
	padding:1px 2em 0em 2em;
	font-weight: bold;
	font-size: 130%;
//	line-height: 150%;
//	border-left:2px #547ad9 solid;
	color:#fff;
	background-color:#547ad9;
	display:table-cell;
	vertical-align:middle;
	height:30px;
}

.find_re_1_s{
	margin:0px 0px 0px 0px;
	padding:1px 2em 0em 2em;
	font-weight: bold;
	font-size: 110%;
	color:#fff;
	background-color:#547ad9;
	display:table-cell;
	vertical-align:middle;
	letter-spacing:0.2em;
}

.find_re_2{
	margin:15px 0px 10px 0px;
	padding:0px 0px 0px 0px;
	font-weight: bold;
	font-size: 120%;
	border-bottom:2px #547ad9 solid;
	display:inline-block;
}

.find_re_iv_1{
	position: relative;
	margin:0px 0px 0px 0px;
	padding:1px 2em 0em 2em;
	top:-34px;
	font-weight: bold;
	font-size: 110%;
//	line-height: 250%;
//	border-left:2px #547ad9 solid;
	color:#fff;
	background-color:#547ad9;
	display:table-cell;
	vertical-align:middle;
	letter-spacing:0.2em;
}

.find_re_ti_1{
	position: absolute;
	margin:0px 0px 0px 0px;
	padding:2px 0em 0em 2.8em;
	top:-14px;
	left:330px;
	width:150px;
	font-weight: bold;
	font-size: 110%;
	color:#fff;
//	background-color:#547ad9;
	display:table-cell;
	vertical-align:middle;
	letter-spacing:0.2em;
	background-image:url(../recruit/image/yajirusi.png);
	background-repeat:no-repeat;
}
.find_re_ti_2{
	position: absolute;
	margin:0px 0px 0px 0px;
	padding:2px 0em 0em 1.5em;
	top:-14px;
	left:0px;
	width:150px;
	font-weight: bold;
	font-size: 110%;
	color:#fff;
//	background-color:#547ad9;
	display:table-cell;
	vertical-align:middle;
	letter-spacing:0.2em;
	background-image:url(../recruit/image/yajirusi_2.png);
	background-repeat:no-repeat;
}
.find_re_time_1{
	width:100px;
	margin:0px 0px 0px 0px;
	padding:1px 0em 0em 0em;
	font-weight: bold;
	font-size: 110%;
	color:#fff;
	background-color:#547ad9;
	display:table-cell;
	vertical-align:middle;
	letter-spacing:0.2em;
}

.border_1{
	position: static;
	padding: 10px;
	max-width: 548px;
	border: 1px solid gray;
}

/*ページの上へ*/
div.up_text{
	position: static;
	width: 490px;
	text-align: right;
	font-size: 80%;
}
div.up_text_v4{
	position: static;
	width: 548px;
	text-align: right;
	font-size: 80%;
}
div.up_text_re{
	text-align: right;
}

div.pageup_v5{
	background-image:url(../image/pageup_v5.gif);
}

div.topmessage_box{
	display: none;
}

.tabs_1{
	position: static;
	font-size: 100%;
	padding:0px 0px 0px 0px;
}

div.tab{
	height: 400px;
	overflow: auto;
	clear: left;
}

.marker_blue_1{
	background-image:url('../solution/image/marker-11.gif');
}

.marker_yellow_1{
	background-image:url('../solution/image/marker_yellow.png');
}

div.ca_bg_1{
	margin:8px 0px 8px 0px;
	padding:10px;
	background-image:url('../case/image/ca_bg_1.gif');
	color:#28307e;
}

div.ca_bg_2{
	margin:8px 0px 8px 0px;
	padding:10px;
	background-image:url('../case/image/ca_bg_1.gif');
}

div.textbox_1{
	position: static;
	margin: 10px 0px 10px 0px;
	padding: 10px;
	border:solid 1px #DDDDDD;
	background-color:#FBFBFB;
	word-break: break-all;
}

table tr.even{
	background:#F5F5F5;
}

div.sitemap a{
		color:#222;
		text-decoration:underline;
}

div.so_list_alpha a{
		text-decoration:underline;
}

input_button_1{
	border-radius:3px;
	background-color:#eb8327;
	width:300px;
	margin-left:0px;
	padding:20px 5px 20px 5px;
	color:#ffffff;
	font-size:150%;
	text-align:center;
	border:none;
	letter-spacing: 0.2em;
	-webkit-appearance: none;
}

.input_button_1:hover{
	background-color:#ecb380;
}

.input_button_2{
	border-radius:3px;
	background-color:#547ad9;
	width:300px;
	margin-left:0px;
	padding:20px 5px 20px 5px;
	color:#ffffff;
	font-size:150%;
	text-align:center;
	border:none;
	letter-spacing: 0.2em;
	-webkit-appearance: none;
}

.input_button_2:hover{
	background-color:#82a1ee;
}

.c3_box_ul{
	margin:0px;
	padding:0px;
	letter-spacing:-.40em;
}
.c3_box_1{
	margin:10px;
	padding:0px;
	width: 220px;
	height:100%;
	background-color: #fafafa;
	box-sizing:border-box;
	border: solid 1px #eee;
	list-style: none;
	display:inline-block;
	vertical-align:top;
	letter-spacing:normal;
	text-align:left;
}
.c3_box_2{
	width: 220px;
	height:22em;
	height:100%;
//	background-color: #fff;
	box-sizing:border-box;
	border: solid 0px #fff;
	list-style: none;
	padding:0px;
	margin:10px;
	display:inline-block;
	vertical-align:top;
	letter-spacing:normal;
//	overflow:hidden;
	text-align:left;
}
.c3_box_top_1{
	width: 280px;
	height:100%;
	min-height:275px;
//	background-color: #fff;
	box-sizing:border-box;
	border: solid 1px #eee;
	list-style: none;
//	float: left;
	padding:0px;
	margin:10px;
	letter-spacing:normal;
	text-align:left;
	display:inline-block;
	vertical-align:top;
}
.c3_box_1 :hover{
}
.c3_box_top_1 :hover{
}
.c3_box_top_2{
	width: 300px;
	height:100%;
	min-height:275px;
	box-sizing:border-box;
	list-style: none;
	padding:0px;
	margin:10px 13px 10px 13px;
	letter-spacing:normal;
	text-align:left;
	display:inline-block;
	vertical-align:top;
}.c3_box_1 img{
	width: 100%;
	height:100%;
}
.c3_box_2 img{
	width: 100%;
	height:100%;
}
.c3_box_top_1 img{
	width: 100%;
	height:100%;
}


.c3_box_find_1{
	padding:10px 10px 10px 10px;
	font-size:140%;
	font-weight:bold;
}
.c3_box_text_1{
	margin:0px 0px 0px 0px;
	padding:0px 10px 10px 10px;
}
.c3_box_find_2{
	padding:10px 5px 10px 5px;
	font-size:120%;
	font-weight:bold;
}
.c3_box_find_3{
	padding:10px 5px 10px 5px;
	font-size:120%;
	font-weight:300;
	text-align:center;
}
.c3_box_find_4{
	padding:10px 5px 0px 5px;
	font-size:100%;
	font-weight:600;
	text-align:center;
}
.c3_box_text_2{
	margin:-5px 0px 0px 0px;
	padding:0px 5px 10px 5px;
}

.c3_box_bg_1,.c3_box_bg_2,.c3_box_bg_3,.c3_box_bg_4,.c3_box_bg_5,.c3_box_bg_6{
	margin:0px 0px 0px 0px;
	padding:5px 0px 5px 0px;
	color:#fff;
	font-size:80%;
	text-align:center;
	text-decoration:none;
}
.c3_box_bg_1{
	background-color:#547ad9;
}

.c3_box_bg_2{
	background-color:#86adea;
}

.c3_box_bg_3{
	background-color:#999;
}

.c3_box_bg_4{
	background-color:#d7a144;
}

.c3_box_bg_5{
	background-color:#90bf4c;
}

.c3_box_bg_6{
	background-color:#d85143;
}

.news_list{
}

.img_center{
	margin:20px 0px 30px 0px;
	text-align:center;
}
.text-center{
	text-align:center;
}

.more{
	text-align:center;
	font-size:110%;
	margin:0 auto;
	width:150px;
}
.more a{
	border: 1px solid #ccc;
	padding: 5px 0px 5px 0px;
	width:100%;
	color:#3e3e3e;
	display:block;
}
.more a:hover{
  	transition: 0.3s;
	color:#fff;
	background-color:#ccc;
}

.top_sub_image{
//	position: relative;
	position: absolute;
	top:100px;
	right:200px;
}

.table_base_1{
	border-top:0px #ccc solid;
	border-bottom:0px #ccc solid;
	border-spacing:1px 1px;
	color:#525252
}
.table_base_1 th{
	border-top:1px #ccc solid;
	border-bottom:0px #FFF solid;
	text-align:center;
	font-weight:bold;
}
.table_base_1 td{
	border-top:1px #ccc solid;
	border-bottom:0px #FFF solid;
}

.t_bg_1{
background-color:#0d6db7;
color:#fff;
}
.t_bg_2{
background-color:#305ae5;
color:#fff;
}
.t_bg_3{
background-color:#7392fb;
color:#fff;
}
.t_bg_4{
background-color:#b7c7ff;
color:#fff;
}
.t_bg_5{
background-color:#5f76ca;
color:#fff;
}
.t_bg_6{
background-color:#637acb;
color:#fff;
}
.t_bg_7{
background-color:#475eb0;
color:#fff;
}
.t_bg_w{
background-color:#fff;
}

.num{
font-family: "Ludica Sans Unicode","Arial","メイリオ","ＭＳ Ｐゴシック", "Osaka" ;
}

/*----- サブメニュー ------*/ 

.re_menu_a{
	margin: 0px 0px 0px 0px;
	padding: 0px;
	background-color: #555;
}
.re_menu_a ul{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style: none;
}
.re_menu_a li{
	list-style: none;
	display: inline; 
	float: left;
	text-align:center;
	border-bottom: 0px solid #ccc;
}
.re_menu_a li a{
	display: block; 
	color: #fff;
	margin: 0px;
	padding: 8px 0em;
}
.re_menu_a li a:hover{
	color:#547ad9;
	background-color: #fff;
    background-color: rgba(255,255,255,1);
    -webkit-transition: all .5s;
    transition: all .5s;
}

.re_menu_1 li{
	width: -moz-calc(100% / 1);
	width: -webkit-calc(100% / 1);
	width: calc(100% / 1);
}
.re_menu_2 li{
	width: -moz-calc(100% / 2);
	width: -webkit-calc(100% / 2);
	width: calc(100% / 2);
}
*::-ms-backdrop, .re_menu_2 li {
  width: 50%; /* IE11 */
}
.re_menu_3 li{
	width: -moz-calc(100% / 3);
	width: -webkit-calc(100% / 3);
	width: calc(100% / 3);
}
*::-ms-backdrop, .re_menu_3 li {
  width: 33.33%; /* IE11 */
}

/* ページの上へボタン設定 */
#pagetop{
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #000;
    border-radius: 50%;
    z-index: 2;
}

.pagetop_arrow{
    height: 10px;
    width: 10px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: translateY(20%) rotate(-45deg);
    position: fixed;
    right: 50px;
    bottom: 50px;
    z-index: 100;
}

#pagetop a{
    text-decoration: none;
    width: 50px;
    padding: 10px 0;
    text-align: center;
    display: block;
    border-radius: 0px;
}

#pagetop:hover {
    text-decoration: none;
    border: solid 2px #01a0c6;
}

#pagetop:hover>div{
    border-top: 3px solid #01a0c6;
    border-right: 3px solid #01a0c6;
}

/*-----hoverで画像拡大------*/ 
.re_link{
	width:220px;
	float:left;
	overflow: hidden;
	text-align:center;
}

.re_link img{
  	transition: 0.3s;
}
 
.re_link img:hover{
		-webkit-transform: scale(1.03);
		-moz-transform: scale(1.03);
		-ms-transform: scale(1.03);
		-o-transform: scale(1.03);
		transform: scale(1.03);
}

/*外部リンクアイコン除外設定*/
.link_none{
	background:none;
	padding-right:0px;
	margin-right:0px;
}
.link_none:hover{
	background:none;
	padding-right:0px;
	margin-right:0px;
}

.footer{
	position: relative;
	width: 100%;
	height: 380px;
	background-image: url("https://www.wonds.co.jp/image/footer_image.png");
	background-size: cover;
	z-index: 1;
	font-size: 85%;
	color:#343434;
}

.footer_re{
	position: relative;
	width: 100%;
	height: 380px;
	background-size: cover;
	z-index: 1;
	font-size: 85%;
	color:#343434;
}


.footer_area{
	position: relative;
	margin: 0 auto;
	padding: 30px 0px 0px 0px;
	width: 1200px;
	text-align:left;
}

.footer_line{
	position: relative;
	margin: 0px 0px 0px 0px;
	width: 1000px;
	height: 1px;
	background-image:url('../image/footer_line.gif');
	background-repeat: no-repeat;
}

.footer_menu{
	margin-left: 60px;
}

.footer_link_box_1{
	float: left;
	margin-right: 5px;
}

.footer_pageup{
	display: flex;
	margin: 20px;
	/*width: 100px;
	text-align: right;
	float: left;*/
}

.footer_pageup img{
	margin-right: 20px;
}

.footer_name{
	position: relative;
	margin: 2px 0px 5px 0px;
	width: 123px;
	font-size: 80%;
	float: left;
	display: none;
}

.copyright{
	float: left;
	margin: 5px 0 20px 0;
	width: 100%;
	font-size: 80%;
	_display: inline;
	text-align: center;
	color:#343434;
}

.footer_menu{
	position: relative;
	margin: 0;
	width: 100%;
	font-size: 100%;
	_display: inline;
	text-align:left;
}
	
.so_button{
	padding: 10px !important;
	font-size: 14px;
	border: 1px solid #fff;
}

.footer_icon{
	position: relative;
	padding: 15px;
	margin-left: 30px;
	color: #fff !important;
	font-size: 13px;
}

.footer_icon img{
	position: absolute;
	top: 10px;
	left: -35px;
}

.footer_icon a{
	color: #fff !important;
}

.footer_site{
	padding-left: 20px;
	margin-top: 30px;
	list-style: none;
	font-size: 10px;
	line-height: 300%;
}

/*外部リンクアイコン設定*/
.ex_link {
//	color: #fff !important;
}

.ex_link:hover{
}

a.ex_link[href^="http://www.wonds.ne.jp/"]{
	background:none;
	padding-right:0px;
	margin-right:0px;
//	color: #fff !important;
}

ul#footer_link{
	margin: 0px 0px 0px 40px;
	list-style: none;
}

li#footer1 a{
	line-height:300%;
	color: #343434;

}

li#footer1 a:hover{
	display: block;
	text-decoration: underline;
}

.flex{
	display:flex;
	justify-content: center;
}

.step{
	display:block;
	width:285px;
	padding:10px;
	margin:0 auto;
	border:2px solid #30488c;

}

.step:hover{
	color:#30488c;
	background-color: #fff;
	transition: .3s;
}

.privacy th,
.privacy td {
	padding: 13px 0 12px;
	vertical-align: top;
	border-bottom: dotted 1px #c8c8c8;
}

.privacy p{
	margin:0;
	padding-left: 10px;
}

/*TOPインタビュー*/
/*左右から線が伸びて枠線になる*/
.gnavi li{
  position: relative;
    padding:10px;
}

/*線の基点位置*/
.gnavi li::before,
.gnavi li::after{
  content:"";
  position: absolute;
  width: 0;
  height:2px;
  background:#01a0c6;
  transition: all 0.2s linear;
  transition-delay: 0.2s;
}

.gnavi li::before{
  right: 0;
  top: 0;
}
.gnavi li::after{
  left: 0;
  bottom: 0;
}

/*線の基点位置2 spanタグ*/

.gnavi li>span{
  display: block;
}

.gnavi li>span::before,
.gnavi li>span::after{
  content:"";
  position: absolute;
  width:2px;
  height:0;
  background: #01a0c6;
  transition: all 0.2s linear;
}

.gnavi li>span::before{
  left: 0;
  top: 0;
}
.gnavi li>span::after{
  right: 0;
  bottom: 0;
}

/*現在地とhoverした際の線の変化*/
.gnavi li:hover::before,
.gnavi li:hover::after{
  width: 100%;/*横幅を100%に*/
}

.gnavi li:hover span::before,
.gnavi li:hover span::after{
  height: 100%;/*縦幅を100%に*/
}

.people_flex {
    position: relative;
    z-index: 3;
    display: flex;
    margin: auto;
    /*justify-content: space-between;*/
    flex-wrap: wrap;
}

.box{
    width: 25%;
    position: relative;
    padding: 15px;
    margin:0;
}

.people_flex a {
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    z-index: 999;
}

.people_image {
	  max-height: 370px;
    overflow: hidden;
}

.people_image img {
	width:100%;
	transition: .3s ease-in-out;
}

.box:hover img{
	transform: scale(1.1);
	opacity: 1 !important;
}

.people_flex .name {
    align-items: baseline;
}

.people_flex .name p {
    font-size: 1.2rem;
    color:#fff;
}

/*インタビュースライダー*/
.re_slider {
    width:94%;
    margin:0 auto;
    padding:0;
}

.re_slider img {
  width:20vw;
  height:auto;
	transition: .3s ease-in-out;
}

.slider_block:hover img{
	transform: scale(1.1);
	opacity: 1 !important;
}

.mask{
  position: relative;
  transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
  display: block;/*画像をくくるspanタグをブロック要素にする*/
    line-height: 0;/*行の高さを0にする*/
    overflow:hidden;/*拡大してはみ出る要素を隠す*/
}

.re_slider .slick-slide {
	transform: scale(0.8);/*左右の画像のサイズを80%に*/
	transition: all .8s;
	opacity: 0.5;
}

.re_slider .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}


/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 3px solid #fff;/*矢印の色*/
    border-right: 3px solid #fff;/*矢印の色*/
    height: 20px;
    width: 20px;
    z-index: 1;
}

.slick-prev:hover, 
.slick-next:hover{
  border-top: 3px solid #01a0c6;/*矢印の色*/
  border-right: 3px solid #01a0c6;/*矢印の色*/
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: 5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: 5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
	position: relative;
	top: -7em;
  text-align:center;
	margin-left: -2.5em;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:12px;
    height:12px;
    display:block;
		cursor: pointer;
    border-style: none;
    background:#fff;
}

.slick-dots button:hover{
    background:#ddd;
}

.slick-dots .slick-active button{
    background:#01a0c6;
}

/*インタビュー名前*/
.re_interview_1{
		width:125px;
		position: relative;
		top:-10em;
		right:-2.6em;
		padding:25px 35px;
		margin:0px auto;
		color:#fff;
		text-align:center;
	  background-color: rgba(128, 179, 18, 0.8);
		z-index:2;
		font-size: 140%;
		line-height: normal;
		font-weight: bold;
}

.top_interview_1{
		padding:10px;
		color:#fff;
		text-align:center;
		background: linear-gradient(90deg, rgba(1,160,198,1) 0%, rgba(79,190,215,1) 100%);
		z-index:2;
		font-size: 120%;
		line-height: normal;
}

.re_interview_2{
		width:125px;
		position: relative;
		top:-10em;
		right:-2.5em;
		padding:25px 35px;
		margin:0px auto;
		color:#fff;
		text-align:center;
	  background-color: rgba(31, 151, 84, 0.7);
		z-index:2;
		font-size: 140%;
		line-height: normal;
		font-weight: bold;
}

.top_interview_2{
		padding:10px;
		color:#fff;
		text-align:center;
	  background-color: rgba(61, 187, 116, 0.7);
		z-index:2;
		font-size: 120%;
		line-height: normal;
		font-weight: bold;
}

.re_interview_3{
		width:125px;
		position: relative;
		top:-10em;
		right:-2.5em;
		padding:25px 35px;
		margin:0px auto;
		color:#fff;
		text-align:center;
	  background-color: rgba(193, 63, 33, 0.7);
		z-index:2;
		font-size: 140%;
		line-height: normal;
		font-weight: bold;
}

.top_interview_3{
		padding:10px;
		color:#fff;
		text-align:center;
	  background-color: rgba(255, 97, 60, 0.7);
		z-index:2;
		font-size: 120%;
		line-height: normal;
		font-weight: bold;
}

.re_interview_4{
		width:125px;
		position: relative;
		top:-10em;
		right:-2.5em;
		padding:25px 35px;
		margin:0px auto;
		color:#fff;
		text-align:center;
	  background-color: rgba(0, 174, 183, 0.7);
		z-index:2;
		font-size: 140%;
		line-height: normal;
		font-weight: bold;
}

.top_interview_4{
		padding:10px;
		color:#fff;
		text-align:center;
	  background-color: rgba(0, 174, 183, 0.7);
		z-index:2;
		font-size: 120%;
		line-height: normal;
		font-weight: bold;
}

.re_interview_5{
		width:125px;
		position: relative;
		top:-10em;
		right:-2.5em;
		padding:25px 35px;
		margin:0px auto;
		color:#fff;
		text-align:center;
	  background-color: rgba(176, 128, 13, 0.7);
		z-index:2;
		font-size: 140%;
		line-height: normal;
		font-weight: bold;
}

.top_interview_5{
		padding:10px;
		color:#fff;
		text-align:center;
	  background-color: rgba(227, 167, 22, 0.7);
		z-index:2;
		font-size: 120%;
		line-height: normal;
		font-weight: bold;
}

/*サブタイトル*/
.subtitle_white{
	width: 200px;
	margin: 0 auto;
	padding: 10px;
	text-align: center;
	font-size: 120%;
	line-height: 125%;
	color: #275ec3;
	background-color: #fff;
}

.subtitle_blue{
	width: 200px;
	margin: 0 auto;
	padding: 10px;
	text-align: center;
	font-size: 120%;
	line-height: 125%;
	color: #fff;
	background-color: #275ec3;
}

/*自動スライダー*/
.auto_slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

.slick-slider {
 padding:0;
 margin-bottom: 60px;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}

/*インタビューページ*/
.kv{
    position: relative;
		z-index:-100;
}

.kv__img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 0;
    padding-top: 44%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.kv__block {
    opacity: 100;/*アニメーション0にする*/
    /*max-width: 720px;*/
    /*width: 66.66vw;*/
    position: relative;
    right: 0;
    top: -400px;
    z-index: 1;
    padding: 207px 80px 0;
}

.kv__block.view {
    -webkit-animation: fadein 0.5s 0s cubic-bezier(0.77, 0, 0.175, 1), kv 1s 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    animation: fadein 0.5s 0s cubic-bezier(0.77, 0, 0.175, 1), kv 1s 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.kv__ttl-area-left {
    position: absolute;
    left: 100px;
    top: 0px;
    z-index: 1;
}

.kv__ttl-area-right {
    position: absolute;
    right: 100px;
    top: 0px;
    z-index: 1;
}

.kv__ttl {
    opacity: 0;
    margin-bottom: 30px;
    line-height: 1;
    color: #1e1e1e;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0.02em;
    -webkit-animation: fadein 0.5s 1s cubic-bezier(0.77, 0, 0.175, 1);
    animation: fadein 0.5s 1s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.kv__catch {
    overflow: hidden;
}

.kv__catch .img-wrap::before {
    opacity: 0;
    content: "";
    width: 100%;
    height: 100%;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
		background: #01a0c6;
    z-index: 2;
}

.kv__catch .img-wrap span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 8px;
    font-weight: 500;
    color: #fff;
    background: #01a0c6;
    letter-spacing: 0.1em;
    -webkit-font-feature-settings: 'palt';
    font-feature-settings: 'palt';
}

.kv__catch .img-wrap-1::before {
    opacity: 0;
    content: "";
    width: 100%;
    height: 100%;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #fff;
    z-index: 2;
}

.kv__catch .img-wrap-1 span{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 8px;
    font-weight: 500;
    background-color: #fff;
    letter-spacing: 0.1em;
    -webkit-font-feature-settings: 'palt';
    font-feature-settings: 'palt';
}

.kv__catch .img-wrap-se::before {
    opacity: 0;
    content: "";
    width: 100%;
    height: 100%;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #343434;
    z-index: 2;
}

.kv__catch .img-wrap-se span{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 8px;
    font-weight: 500;
    background-color: #343434;
    letter-spacing: 0.1em;
    -webkit-font-feature-settings: 'palt';
    font-feature-settings: 'palt';
}

/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in {
	overflow: hidden;
  display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}

/*左から右へのアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:1s;
	animation-fill-mode:forwards;
    opacity: 0;
}

.delay-time1{
	animation-delay: 0.3s;
}

.delay-time2 {
	animation-delay: 0.5s;
}

.delay-time3 {
	animation-delay: 0.7s;
}

.delay-time4 {
	animation-delay: 0.9s;
}

@keyframes slideTextX100 {
  from {
	transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:1s;
	animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

/*インタビュー文*/
.interview_box{
    max-width: 1920px;
    margin-top: 20px;
}

.interview_content1,
.interview_content2{
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    display:flex;
}

.interview_left{
    width: 45%;
    padding: 3% 5% 5% 5%;
    min-width: 500px;
}

.interview_last{
    width: 100%;
    padding: 0 7% 0 7%;
    min-width: 500px;
}

.num{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 50px;
    margin-bottom: 30px;
    font-family: Helvetica;
    font-weight: 600;
    font-size: 90%;
    color: #fff;
		background: #343434;
    line-height: 30px;
    letter-spacing: -0.02em;
    line-height: 1.75;
    letter-spacing: 1px;
}

.num_blue {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 50px;
    margin-bottom: 30px;
    font-family: Helvetica;
    font-weight: 600;
    font-size: 90%;
    color: #fff;
		background: linear-gradient(90deg, rgba(1,160,198,1) 0%, rgba(79,190,215,1) 100%);
    line-height: 30px;
    letter-spacing: -0.02em;
    line-height: 1.75;
    letter-spacing: 1px;
}

.interview_text {
  margin-bottom: 40px;
	font-size: 110%;
  line-height: 2rem;
  text-align: justify;
}

.interview_img {
    height: 90%;
}

.interview_img > div.view {
    -webkit-animation: fadein 0.5s 0s cubic-bezier(0.77, 0, 0.175, 1), blockIn 1s 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    animation: fadein 0.5s 0s cubic-bezier(0.77, 0, 0.175, 1), blockIn 1s 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* 下から */

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(100px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

.fadeUpTrigger{
	opacity: 0;
}

/*枠線が伸びて出現*/
.lineTrigger{
  position: relative; /* 枠線が書かれる基点*/
  opacity:0;
}

.lineTrigger.lineanime{
  animation-name:lineAnimeBase;
  animation-duration:0.3s;
  animation-fill-mode:forwards;
}

@keyframes lineAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*上下線*/
.lineTrigger::before,
.lineTrigger::after{
  position: absolute;
  content:"";
  width:0;
  height:1px;
  background:#333;/* 枠線の色*/
  z-index:-1;
}

/*左右線*/
.line2::before,
.line2::after{
  position: absolute;
  content:"";
  width: 1px;
  height:0;
  background:#333;/* 枠線の色*/
  z-index:-1;
}

/*上線*/
.lineTrigger::before {
  top:0;
  left:0;
}

.lineTrigger.lineanime::before {
  animation: lineAnime .3s linear 0s forwards;
}

/*右線*/
.line2::before{ 
  top:0;
  right:0;
}

.lineTrigger.lineanime .line2::before {
  animation: lineAnime2 .3s linear .3s forwards;
}

/*下線*/
.lineTrigger::after { 
  bottom:0;
  right:0;
}

.lineTrigger.lineanime::after {
  animation: lineAnime .3s linear .7s forwards;
}

/*左線*/
.line2::after{ 
  bottom:0;
  left:0;
}

.lineTrigger.lineanime .line2::after {
  animation: lineAnime2 .3s linear 1.2s forwards;
}

@keyframes lineAnime {
  0% {width:0%;}
    100%{width:100%;}
}

@keyframes lineAnime2 {
  0% {height:0%;}
    100%{height:100%;}
}

/*枠線内側の要素*/

.lineTrigger.lineanime .lineinappear{
  animation: lineInnerAnime .3s linear 1s forwards;
  opacity: 0;/*初期値を透過0にする*/ 
}

@keyframes lineInnerAnime{
  0% {opacity:0;}
    100% {opacity:1;}
}

.lineinappear img{
	width: 100%;
	position: relative;
	top: 10px;
	left: 10px;
}


/*画像の拡大＋テキスト*/

.zoomInText{/*テキストの基点となる位置を定義*/
  position: relative;
}

.zoomInText span.mask{
  position: relative;
  transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
  display: block;/*画像をくくるspanタグをブロック要素にする*/
    line-height: 0;/*行の高さを0にする*/
    overflow:hidden;/*拡大してはみ出る要素を隠す*/
}

.zoomInText:hover span.mask::before{/*hoverした時の変化*/
  content:"";
  position: absolute;
  z-index:2;
  top:10px;
  left:10px;
  width: calc(100% - 20px);
    height: calc(100% - 20px);
  background:rgba(255,255,255,0.5);/*背景色*/
}

.zoomInText img{
  transform: scale(1);
  filter: blur(0);
  transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomInText:hover img{/*hoverした時の変化*/
  transform: scale(1.2);/*拡大の値を変更したい場合はこの数値を変更*/
  filter: blur(2px);/*ぼかし具合を変更したい場合はこの数値を変更*/
}

.zoomInText span.cap{
  opacity:0;
  transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
  position: absolute;
  z-index:3;/*テキストを前面に出す*/
  top: 50%;
    left: 50%;
  transform: translate(-50%,-50%);
  color: #275ec3;/*テキストの色を変えたい場合はここを修正*/
    line-height: 1.5;/*行の高さを1.5にする*/
}

.zoomInText:hover span.cap{/*hoverした時の変化*/
  opacity:1;
}

/*フォーム*/
form {
  margin: 0 auto;
}
.form-row {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f2f4f5;
}
.form-row:last-child {
  border-bottom: none;
}
.form-label {
  display: flex;
  align-items: center;
  width: 250px;
}
.form-label label {
  font-weight: bold;
}
.form-label span {
  margin-left: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background-color: #01a0c6;
}

/* フォームパーツのデザイン */
input, textarea {
  background-color: #f2f4f5;
  border: none;
  border-radius: 3px;
  padding: 15px 20px;
  font-size: 16px;
  flex-grow: 1;
}

input::placeholder,
textarea::placeholder {
  color: #666;
  font-size: 14px;
}

select {
  background-color: #f2f4f5;
  border: none;
  border-radius: 3px;
  padding: 15px 20px;
  font-size: 16px;
  color: #333;
}

.form_button{
	width: 20%;
  cursor: pointer;
  padding: 15px 45px;
  border: none;
  color: #fff;
  font-weight: bold;
  background-color: #009fe8;
  text-align: center;
  margin: 0 auto;
  border-radius: 5px;
}

.form_button:hover {
	opacity:0.8;
}

.label_recruit{
	margin:10px 0;
}

.label_recruit:hover{
	cursor: pointer;
  color: #01a0c6;
}

.label_recruit input{
	margin-right:10px;
}

/*バリデーション*/
input:invalid,
textarea:invalid{
  border: 1px solid  #ea0000;
}

input:valid,
textarea:valid{
  border: 1px solid  #0fd09a;
}

/*受託開発*/
.page_link{
	padding: 10px 20px;
  margin: 0px 10px 60px 10px;
  border-radius: 5px;
  background-color: #01a0c6;
  text-align:center;
}

.page_link:hover{
  background-color: #49c2dd;
}

.page_link a{
	color: #fff;
}
  
.box_border {
  margin-top: 20px;
  background-color: #fff;
  padding: 40px 50px 50px;
	border: 2px solid #01a0c6;
}

.text_green {
    padding-bottom: 5px;
    font-weight: bold;
    font-size: 120%;
    color: #01a0c6;
}

.icon li{
    margin: 10px 5px;
    background-color: #ff961e;
    border-radius: 5px;
    padding: 5px 10px 4px;
    font-weight: bold;
    color: #fff;
    text-align:center;
}