@charset "utf-8";
/* CSS Document */

/* =======================================
  ここから各サイトごと
======================================= */
.site-content-contain {
	padding-top: 0;
}
.site-content-contain.second_page {
	padding-bottom: 50px;
}
#masthead.site-header.fixed {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	background: rgba(255, 255, 255, 1);
	z-index: 999;
	border-bottom: 1px solid #ededed;
}

#masthead{
	background: #fff;
}
#masthead .wrap_head {
	position: relative;
	max-width: 100%; 
	display: flex;
	justify-content: space-between;
	margin-left: auto;
	margin-right: auto;
	align-items: center;
	margin-top: 0;
	padding: 30px 0;
}
.site-branding-text {
	margin-left: 80px;
	padding-right: 5px;
	max-width: 600px;
}

.site-branding-text h1{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	color: #0f1111;
	font-size: 14px;
	font-weight: normal;
}
.site-branding-text h1 img{
margin-right: 30px;
}
.top_logo{
display: flex;
justify-content: flex-start;
align-items: center;

}
.top_nav {
	width: calc(100% - 700px - 150px);
}
.top_nav02{
margin-right: 50px;
margin-left: 25px;
display: flex;
align-items: center;
}
.top_nav02 .en{
font-size:18px;
font-weight: 500;
margin-left: 20px;
}
.top_nav ul{
	margin-left: 0;
	margin-bottom: 0;
	display: flex;
	justify-content: flex-end;
}
.top_nav ul li ul{
	margin-left: 0;
	margin-bottom: 0;
	display: block;
}

.wrap_topmain{
margin-left: auto;
margin-right: auto;
display: block;
width: 100%;
position: relative;
}
#contents_wrap{
padding: 40px 0 0 0;
}
.wrap_white{
padding: 100px 0;
}
.wrap_2color{
background: linear-gradient(to bottom, #F6F7F7 0%, #F6F7F7 70%, #fff 70%, #fff 100% );
padding: 80px 0;
}
.wrap_white02{
padding: 50px 0 120px 0;
}
.wrap_service{
padding: 0 0 100px 0;
}
.wrap_gray{
background: #F6F7F7;
padding: 100px 0;
}
/*-----------foot-----------*/
#foot_upper{
background: #F6F7F7;
padding:80px 0;
}
.foot_box{
background: #fff;
border-radius: 30px;
padding: 75px 70px;
display: flex;
justify-content: flex-start;
}
.foot_box .btn01{
padding: 25px 80px;
min-width: 160px;
font-size: 22px;

}
.foot_tel{
font-size:38px;
font-weight: 700;
display:block;
text-align: center;
}
.foot_tel span{
font-size:28px;
}
#footer{
background: #F6F7F7;
padding-bottom: 80px;
}
#foot_company {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding-bottom: 30px;
}
.foot_logo {
	width: 40%;
}
.foot_nav {
	display: flex;
	justify-content: flex-start;
	width: 55%;
	font-weight: 600;
}
.foot_nav ul.foot01 {
	width: 46%;
	line-height: 1.8;
}
.foot_name{
font-size:22px;
font-weight: 600;
}

#breadcrumb ol {
	margin: 0;
	padding-left: 0;
	float: right;
}
#breadcrumb::after{
content:"";
clear: both;
}

/* =======================================
  ここまで共通
======================================= */
@media screen and (max-width : 1079px) {
	.wrap{
		padding-left: 15px;
		padding-right: 15px;
	}
#navi ul.menu li a {
	font-size: 16px;
}
	/*1079*/
}

@media screen and (max-width : 959px) {/*タブレット*/
#masthead .wrap_head {
	position: relative;
	width: 100%;
	display: block;
}

.top_nav {
	width: 100%;
	display: inline-block;
}
}

/*topimage*/
#topmain_bg{
background: url("images/okada_topimg01.jpg") no-repeat;
width: 100%;
position: relative;

}

#topmain_text h2{
font-size:48px;
font-weight: 700;
line-height: 1.4;
}
#topmain_text h2.second{
margin-bottom: 60px;
}
#topmain_text p{
font-size:22px;
font-weight: 700;
}

/*subimage*/
#subimage {
min-height: 260px;
}
#subimage h1{ 
	font-family: "Bebas Neue", "Arial Black";
font-weight: 700;
font-size: 100px;
display: block;
line-height: 1.4;
margin-top: 60px;

text-transform:capitalize;
}
#subimage h1 span{
font-family: 'Noto Sans JP';
font-size: 22px;
font-weight: 600;
margin-left: 0;
display: flex;
justify-content: flex-start;
align-items: center;
}
#subimage h1 span::before{
content:"";
margin-right: 20px;
border-top: 2px solid #0f1111;
width: 28px;
}
#breadcrumb {

	padding: 0;

}
.topic_list{
margin-bottom: 20px;
border-bottom: 1px solid #BBBCBC;
padding-bottom: 20px;
}
/*title*/
h2.title{
font-family:"Bebas Neue", "Arial Black";
font-weight: 700;
font-size: 100px;
display: flex;
justify-content: flex-start;
align-items: center;
line-height: 1.4;
margin-bottom: 70px;
}
h2.title span{
font-family: 'Noto Sans JP';
font-size: 22px;
font-weight: 600;
margin-left: 40px;
display: flex;
align-items: center;
}
h2.title span::before{
content:"";
margin-right: 20px;
border-top: 2px solid #0f1111;
width: 28px;
}
h2.title.block{
display: block;
}
h2.title.block span{
margin-left: 0;
}
h2.lead{
font-size:38px;
font-weight: 600;
margin-bottom: 58px;
line-height: 1.5;
}
h3.title{
font-size:38px;
font-weight: 600;
margin-bottom: 60px;
}
h3.title::before{
content:"●";
font-size:18px;
color: #3EB5B9;
margin-right: 15px;
}
img.img_round{
border-radius: 30px;
}

.table-wrap {
  overflow-x: scroll;
}

.table-wrap > div.about_flex{
    width: 250%;
    display: flex;
}
.table-wrap > div.about_flex > div.about_waku{
    width: 340px;
    padding: 45px 40px;
    margin: 5px 20px;
    background: #fff;
}
.wrap_about{
padding: 0 80px;
}

.about_waku h3{
font-size:28px;
font-weight: 600;
margin-bottom: 35px;
}
.about_waku h3 span{
display: block;
font-size: 18px;
}
.about_waku p{
margin-bottom: 70px;
}
/*top_catch*/
.typing {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
 
.typing-effect {
  width: 28ch;
  animation: typing 3s steps(17), effect .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-size: 48px;
}
 
@keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes effect {
  50% {
    border-color: transparent
  }
}

/**/
.reb{
position: relative;
}
.wrap_nen{
background: #F6F7F7;
padding: 100px 0;
position: relative;
}
.side_nen {
	position: relative;
	margin-top: 1em;
}
.flex_history{
display: flex;
justify-content: space-between;
}
.wrap_history {
	width: calc(100% - 120px - 5%);
	margin-left: 5%;
}
.p-history-timeline {

}
.p-history-timeline__list {
	position: relative;
}
.p-history-timeline__item {
	font-size: 22px;
	line-height: 1;
}
.p-history-timeline__link {
	position: relative;
	color: #0f1111;
	font-weight: 600;
}
.p-history-timeline__link:hover{
color: #3EB5B9;
}
.p-history-timeline__link span {
	-webkit-transition: opacity .3s ease-out;
	-o-transition: opacity .3s ease-out;
	transition: opacity .3s ease-out;
}
.p-history-timeline__link:hover::after {
	background-color: #3EB5B9;
}
.p-history-timeline__link::after {
	content: "";
	position: absolute;
	top: 15px;
	width: 10px;
	height: 10px;
	background-color: #0f1111;
	border-radius: 50%;
	-webkit-transition: background-color .3s ease-in-out;
	-o-transition: background-color .3s ease-in-out;
	transition: background-color .3s ease-in-out;
}


.p-history-timeline {

}
.p-history-timeline__list::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 4px;
	width: 1px;
	height: calc(100% - 15px);
	background-color: #0F1111;
}
.p-history-timeline__item:not(:last-child) {
	padding-bottom: 60px;
}
.p-history-timeline__link {
	padding-left: 35px;
}
.p-history-timeline__link::after {
	left: 0;
}

/**/
.subvisual{
padding-left:80px;
}
.subvisual img{
border-radius: 30px 0 0 30px;
object-fit: cover;
}
/*product*/
.product figure img{
border-radius: 30px;
object-fit: cover;
margin-bottom: 50px;
}
.product li{
margin-bottom: 50px;
}
.product li h3{
font-size:38px;
font-weight: 600;
margin-bottom: 40px;
line-height: 1.4;
}
.product li h3 span{
color: #3EB5B9;
font-size: 18px;
font-family:"Bebas Neue", "Arial Black";
display: block;
}
.product li p{
font-weight: 500;
font-size:18px;
line-height: 2;
}


/*company*/
ul.bold li{
font-weight: 600;
margin-left: 15px;
}
.box_rinen .drop_box{
width: 31.4%;
}
.drop_box{
background: #fff;
border-radius: 30px;
box-shadow:0 0 10px #DBDCDC;
margin-bottom: 30px;
}
.drop_box.csr .inner{
padding: 90px 65px;
}
.box_rinen .drop_box .inner{
padding: 70px 40px;
}
.drop_box h3{
font-size: 42px;
font-weight: 600;
text-align: center;
color: #3EB5B9;
position: relative;
margin-bottom: 70px;
}
.drop_box h3::before{
 position: absolute;
  bottom: -10px;
  left: calc(50% - 40px);
  width: 80px;
  height: 1px;
  content: '';
  background: #707070;

}
.drop_box h4{
text-align: center;
font-weight: 600;
font-size: 22px;
margin-bottom: 55px;
}
.drop_box.csr{
margin-bottom: 50px;
}
ul.list{
padding-left: 15px;
}
h5.blue{
color: #3EB5B9;
font-weight: 600;
font-size:18px;
}
ul.list li{
margin-bottom: 15px;
}

/*strengs*/
.streng .box46{
margin-bottom: 40px;
}
.streng figure img{
border-radius: 30px;
}
.streng figure{
position: relative;
}
.streng figure .number{
position: absolute;
z-index: 99;
background: #3EB5B9;
border-radius: 30px 0 30px 0;
display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  color: #fff;
  font-weight: 600;
  font-size:32px;
}
.streng h3{
font-weight: 600;
font-size:28px;
margin: 35px 0;
}
.flow_left{
width: 35%;
}
.flow_right{
width: 60%;
}
.flow_left ul li{
border-bottom: 1px solid #BBBCBC;
padding: 25px 0;
font-size:22px;
font-weight: 700;
}
.flow_left ul li::before{
content:"▼";
margin-right: 15px;
color: #3EB5B9;
}
.flow_right h3{
color: #3EB5B9;
font-size:38px;
font-weight: bold;
margin-bottom: 40px;
}
.flow_right h4{
font-weight: 600;
font-size: 22px;
margin-bottom: 40px;
}
section.flow{
margin-bottom: 50px;
}

ul.maru li{
font-size:22px;
font-weight: 600;
margin-bottom: 15px;
}
ul.maru li::before{
content:"●";
color:#3EB5B9;
margin-right: 10px;
}
.recruit_left{
width:35%;
margin-bottom: 30px;
}
.recruit_right{
width:60%;
}
.recruit_left h3{
font-size:38px;
font-weight: 600;
}
.recruit_right h3{
font-size:22px;
font-weight: 600;
margin-bottom: 40px;
}
.recruit_right h4{
color: #3EB5B9;
font-size:22px;
font-weight: 600;
margin-bottom: 20px;
}
.recruit_right p{
margin-bottom: 45px;
}
.triangle {
  display: block;
  width: 30px;
  height: 20px;
  background: #3EB5B9;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
  margin: 40px auto;
  text-align: center;
}
.site-content-contain.second_page.mb0 {
	padding-bottom:0;
}
#content .entry-title {
	color: #0f1111;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.3em;
	margin-bottom: 0;
	border-bottom: 2px solid #0f1111;
	padding-bottom: 10px;
}
table.table-b.company ul li{
display: inline-block;
margin-right: 15px;
}