@charset "utf-8";

/*汎用**************************************************/
.br-pc { display:block; }
.br-sp { display:none; }

.hiddenPc{
visibility: hidden;
display: none;
width: 0px;
height: 0px;
}

.header__nav {display: block;}
.hamburger-menu__button {display: none;}

.MThigh{
	padding-top: 120px!important;
	padding-bottom: 30px!important;
}
.MTmid{
	padding-top: 60px!important;
	padding-bottom: 30px!important;
}
.MTsmall{
	padding-top: 30px!important;
	padding-bottom: 30px!important;
}

/*FLEX BOX*/
.container {
display: flex;
align-content: stretch;
flex-wrap: wrap;
}
.item {padding:1% 2%;}


.Box1000Wrap{
width: 1000px;
margin: 0 auto;
}

.titleH2{
width: 100%;
margin: 0% auto 68px auto;
padding:0%;
text-align: center;
}

.titleH2B{
width: 100%;
margin: 0% auto 68px auto;
padding:0%;
text-align: center;
}

.titleH2 h2{
position: relative;
display: inline-block;
margin: 0 auto 40px auto;
padding: 0;
font-size: 4em;/*64px;*/
font-weight: bold;
color:#0e1e7d;
}

.titleH2B h2{
position: relative;
display: inline-block;
margin: 0 auto 40px auto;
padding: 0;
font-size: 4em;/*64px;*/
font-weight: bold;
color:#0e1e7d;
}

.titleH2 .Mark{
position: relative;
display: block;
width: 100%;
margin: 0 auto;
padding:0 0 26px 0;
font-size: 1.5em !important;/*18px;4.8vw;*/
text-align: center;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
}

.titleH2B .Mark{
position: relative;
display: block;
width: 100%;
margin: 0 auto;
padding:0 0 26px 0;
font-size: 1.3em !important;/*18px;4.8vw;*/
text-align: center;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 500;
}

.titleH2 .Mark::after{
content: " ";
display: block;
position: absolute;
left: calc(50% - 15px);
width: 30px;
border-bottom: solid 6px #0e1e7d;
bottom: -3px;
margin: 0 auto;
padding:0 0 0 0;
}

.titleH2B .Mark::after{
content: " ";
display: block;
position: absolute;
left: calc(50% - 15px);
width: 30px;
border-bottom: solid 6px #0e1e7d;
bottom: -3px;
margin: 0 auto;
padding:0 0 0 0;
}


/* サブページ**************************************************/

.SubHeader{
width: 100%;
height: 120px;
margin:80px 0 0 0;
padding:0;
background: url(../new_img/bg_subheader.png) no-repeat right bottom;
background-size: contain;
}

.SubHeaderBox{
width: 100%;
margin:0 auto;
padding: 30px 30px 0 30px;
}

.SubHeaderBox p{
font-size: 72px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
color:#0e1e7d;
}

.SubTitleA{
margin: 0 0 50px 0;
}

.SubTitleA::after{
content:' ';
display: block;
width: 30px;
height: 6px;
background:#0e1e7d;
margin: 20px 0 0 0;
}

.SubTitleBox{
width: 100%;
max-width:1000px;
margin:0 auto;
padding:50px 25px;
}

.SubTitleBoxB{
width: 100%;
max-width:1000px;
margin:0;
padding:0 0 50px 0;
}

.SubTitleB,.SubTitleC{margin: 0;}

.SubTitleB span{
padding:15px 30px;
font-size:24px;
color:#0e1e7d;
background: #fff;
}
.SubTitleB span.bg02{
color:#FFF;
background: #0e1e7d;
}

.SubTitleC span{
padding:15px 30px;
font-size:24px;
color:#0e1e7d;
background: #fff;
}

.SubTitleD{
width: 100%;
text-align: center !important;
}

.SubTitleD span{
padding:15px 30px;
font-size:30px;
color:#0e1e7d;
text-align: center;
letter-spacing: -1px;
}

.SubContsBox{
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0;
}

.SubContsBoxI{
width: 50%;
margin: 20px 0;
padding: 0;
}

.SubContsBoxB{
width: 50%;
margin: 0;
padding: 0;
}

.SubContsBoxI p,.SubContsBoxB p{
width: 85%;
margin: 0;
padding: 0;
font-size: 14px;
line-height: 28px;
}

.Box1000Wrap.SubBox{
margin: 0 auto;
padding:45px 0 0 0;
}

.LeadtextA,.LeadtextB{
text-align: center;
margin: 0 auto;
padding: 20px 0;
font-size: 28px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 300;
}



/* スライダー */
.swiperbox {
position: relative;
width: 100%;
}


.swiper{
width: 100%;
height: 120px;
margin: 40px auto 0 auto;
}


.swiper-wrapper {transition-timing-function: linear;}

.swiper-slide {
width: 100%;
text-align: center;
}

.swiper-slide img {
width: 70%;
}


/*ヘッダー**************************************************/
/* header */
.header {
position: fixed;
top: 0%;
width: 100%;
height: 80px;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px 0;
z-index: 100;
}

.header__logo{
width: 282px;
}

.header__logo img{
margin: -10px 0 0 0;
}

.header__logo img:hover{
opacity: 0.7;
}

.header__inner {
width: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding:0 0 0 30px;
padding-bottom: 0;
}

.header__nav {
border-bottom: solid 8px #0e1e7d;
padding-top: 16px;
padding-bottom: 12px;
margin-bottom: -8px;
}

.header__nav-list {
display: flex;
gap: 40px;
}

.header__nav-item {
transition: transform 0.3s ease-out;
}

.header__nav-item:hover {
transform: translateY(-5px);
}

.header__nav-item a {
color: #333;
font-size: 16px;
font-weight: 500;
padding: 5px 0;
transition: color 0.3s ease;
font-family: 'Noto Sans JP', sans-serif;

}

.header__nav-item a:hover {
color: #007bff;
text-decoration: none;
}

.header__nav-list .header__nav-item:last-child a {
padding-right: 30px;
}

/* header */



/*FV**************************************************/
.FvImgWrap{
width: 100%;
margin: 80px auto 0 auto;
padding: 0;
}

.video-container {
position: relative;
width: 100%;
height: 100%;
max-height: 692px;
aspect-ratio: auto;
overflow: hidden;

}

.background-video {
width: 100%;
height: 100%;
max-height: 692px;
object-fit: cover;
z-index: 1;
}

.overlay-text {
position: absolute;
top: 0;
left: 50%; /* 親要素（この場合body/ビューポート）の50%の位置 */
transform: translateX(-50%); /* 要素自身の幅の半分だけ左に移動 */
text-align: center;
margin: 0 auto;
padding: 0;
z-index: 2;
}

.FVtextA ,.FVtextB {
display: flex;
justify-content: center;
align-items: center;
color: #0e1e7d;
font-size:10vw;
font-weight: 700;
text-transform: uppercase;
}

.FVtextA.is-active,.FVtextB.is-active {--x: 0;}

.char {overflow: hidden;}

.char-text {
display: inline-block;
transform: translateX(var(--x, -101%));
transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
transition-delay: calc(0.05s * var(--char-index));
font-weight: 900;
font-family: 'Noto Sans JP', sans-serif;
}

/* 初期CSS */
.FVcontainer {
width: 100%;
margin: 0 auto;
padding:120px 0 0 0;
/*display: flex;
justify-content: center;
align-items: center;*/
}

.visuallyHidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}

.FVheadline{
margin: 0 auto;
padding: 0;
}

.FVtextC{
position: absolute;
bottom:20%;
width: 100%;
text-align: center;
}

.FVtextD{
position: absolute;
bottom:30px;
width: 100%;
text-align: center;
}

.FVtextC p{
font-size: 3vw;
line-height: 4.5vw;
font-weight: 700;
letter-spacing: 1px;
font-family: 'Noto Sans JP', sans-serif;
}

/* 疑似矢印 */
.v-arrow-down {
position: relative;
width: 50px;
height: 30px;
display: inline-block;
}

.v-arrow-down::before,
.v-arrow-down::after {
content: '';
position: absolute;
top: 0;
width: 37px;
height: 3px;
background-color: #fff;
border-radius: 2px;
transform-origin: top left;
}

.v-arrow-down::before {left: 0;transform: rotate(45deg);}
.v-arrow-down::after {right: 0;transform-origin: top right;transform: rotate(-45deg);}



/* Index **************************************************/
#IndexAWrap{
background: url(../new_img/bg_01.png) no-repeat;
background-position: center top;
background-size: cover;
}

.IndexBox{
padding: 170px 0;
}

.IndexBox2{
padding: 170px 0 20px;
}

.IndexBoxReA{
position: relative;
width: 100%;
max-width: 1000px;
min-height:540px;
margin: 0 auto;
}

.IndexBoxReB{
min-height:300px;
margin: 0 auto;
}

.IndexBoxReC{
position: relative;
width: 100%;
max-width: 1000px;
min-height:300px;
margin: 0 auto;
padding: 0 0 40px 0;
}

#IndexBWrap{
background:#f4f4f4;
}


.TitleBox01{
position: absolute;
top: 0;
left: 0;
width: 500px;
margin: 0;
padding:0;
}

.TitleBox02{
top: 0;
width: 500px;
margin: 0;
padding:0;
}

.TitleBox01 p,.TitleBox02 p{
margin: 0 0 40px 0;
padding: 0;
font-size: 78px;
font-weight: bold;
color:#0e1e7d;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
letter-spacing: -2px;
}
.TitleBox01 h2,.TitleBox02 h2{
margin: 0 0 40px 0;
padding: 0;
font-size: 24px;
font-weight: bold;
color:#000;
}

/*read more*/
.TitleBox01 span,.TitleBox02 span{
margin: 0;
padding: 0;
font-size: 1.25em;
color:#0e1e7d;
letter-spacing: 2px;
}

.TitleBox01 span a,.TitleBox02 span a {
color: #0e1e7d;
text-decoration: none;
display: inline-flex;
align-items: center;
font-size: 16px;
font-weight: bold;
transition: transform 0.3s ease-out;
}

.icon-arrow-right {
display: inline-block;
width: 35px;
height: 2px;
background-color: #0e1e7d;
border-radius: 1px;
margin:10px 12px 0 12px;
position: relative;
vertical-align: middle;
}

.icon-arrow-right::before {
content: '';
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
width: 0;
height: 0;
margin:-3px 0 0 0;
border-top: 8px solid transparent;
border-bottom: 0px solid transparent;
border-left: 12px solid #0e1e7d;
}

.TitleBox01 span a:hover ,
.TitleBox02 span a:hover {transform: translateX(5px);}


.TextBox01{
width: 100%;
margin: 0;
padding:25px;
}

.TextBox01 p{
font-size: 14px;
line-height: 28px;
font-weight: bold;
}

.ImageBox01{
position: absolute;
top:0%;
right: 0%;
width: 560px;
height: 500px;
margin: 0 0 50px 0;
padding:0;
}

.ImageBox01 img{
width: 100%;
margin: 0;
padding:0;
}

.ImageBox02{
position: absolute;
top:3%;
right: 0%;
width: 560px;
margin: 0 0 50px 0;
padding:0;
}

.ImageBox02 img{
width: 100%;
margin: 0;
padding:0;
}

.BannerBox{
margin:0px auto 20px auto;
padding: 180px 0 0 0 ;
}


#SdgsOutWrap{
/*
background: #e2fffb;
*/
background: url(../new_img/bg_sdgs2.jpg) no-repeat;
background-position: center bottom;
background-size: cover;

padding-top: 40px;
}

.SdgsWrap {
width: 100%;
max-width: 1000px;
margin:0 auto;
padding:0 0 100px 0;
position: relative;
}

.BannerBoxI img{width: 80% !important;margin: 0 auto;}

.SdgsBox h2 {
width: 70%;
margin-bottom: 40px;
padding: 20px 20px 20px 0px;
background: #fff;
font-size: 32px;
color: #0f1c6d;
text-align: left;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
}

.SdgsBox div {
margin-bottom: 30px;
position: relative;
padding-top: 19px;
}

.SdgsBox div::before {
content: '';
display: block;
width: 30px;
height: 6px;
background-color: #101c6e;
position: absolute;
top: 0;
left: 0;
}

.SdgsBox .section p {
font-size: 14px;
color: #333;
line-height: 1.6;
margin: 0;
}


/* 3 */
.inlineBlock3{
	clear: both;
	margin: 40px auto 40px auto;
	text-align: center;
}
.inlineBlock3 .inlineBlockOne3{
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 310px;
	margin: 20px 10px;
	border-radius: 8px;
}
.inlineBlock3 .inlineBlockOne3 .inlineBlockText30{
	text-align: center;
	width: 40px;
	font-size: 28px;
	color: #222222;
	border-bottom: 3px solid #aaaaaa;
	font-weight: bold;
	margin: 0 auto;
	padding-bottom: 6px;
	font-family: 'Karla', serif;
}
.inlineBlock3 .inlineBlockOne3 h4.inlineBlockTitle3{
	text-align: center;
	font-size: 120%;
	color: #222222;
	font-weight: bold;
	margin: 30px auto;
}
.inlineBlock3 .inlineBlockOne3 .inlineBlockText3{
	font-size: 100%;
	color: #666;
	margin: 30px auto;
	padding-top: 20px;
	line-height: 180%;
	text-align: left;
}
.inlineBlock3 .inlineBlockOne3 .inlineBlockImg3{
	text-align: center;
	margin:0 auto 18px;
	width: 150px;
}
.inlineBlock3 .inlineBlockOne3 a.inlineBlockBtn{
	display: block;
	width: 170px;
	background:#666;
	color: #FFF;
	font-size: 12px;
	font-weight: normal;
	text-align: center;
	border-radius: 3px;
	padding: 8px 10px 8px 10px;
	margin: 0 auto 5px auto;
}
.inlineBlock3 .inlineBlockOne3 a.inlineBlockBtn:hover{
	text-decoration: none;
	background:#333;
}

.BTtech{
	border-top: #00cee8 solid 1px;
}
.BTsec{
	border-top: #d70068 solid 1px;
}
.BTdes{
	border-top: #22bf7f solid 1px;
}

/*ABOUT**************************************************/

/*沿革*/

.BgAbout{background: url(../new_img/bg_about.png) no-repeat;}

.AboutWrap{width:100%;margin:0 auto;padding:50px 0;background: #ecfaff;}

.timeline-container{
width: 1000px;
margin: 0 auto;
padding:30px 0 5px 0;
position: relative;
}

.timeline-container::before{
content: '';
position: absolute;
left: 105px;
top: 0;
bottom: 0;
width: 2px;
background-color: #000;

}

.timeline-item96,.timeline-item00,.timeline-item02,.timeline-item03,.timeline-item04
,.timeline-item06,.timeline-item07,.timeline-item08,.timeline-item09,.timeline-item10
,.timeline-item11,.timeline-item12,.timeline-item13,.timeline-item14,.timeline-item16
,.timeline-item17,.timeline-item22,.timeline-item23,.timeline-item25{
position: relative;
margin-bottom: 30px;
padding-left: 30px;
}

/*丸点*/
.timeline-item96::after {
content: '';
position: absolute;
left: 98px;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #00cee8;
}
.timeline-item00::after {
content: '';
position: absolute;
left: 98px;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #fe2635;
}
.timeline-item02::after {
content: '';
position: absolute;
left: 98px;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #d70068;
}
.timeline-item03::after {
content: '';
position: absolute;
left: 98px;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #00a8f0;
}
.timeline-item04::after {
content: '';
position: absolute;
left: 98px;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #0e1e7d;
}
.timeline-item06::after {
content: '';
position: absolute;
left: 98px;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #00cee8;
}
.timeline-item07::after {
content: '';
position: absolute;
left: 98px;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #fe2635;
}
.timeline-item08::after {
content: '';
position: absolute;
left: 98px;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #d70068;
}
.timeline-item09::after {
content: '';
position: absolute;
left: 98px;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #00a8f0;
}
.timeline-item10::after {
content: '';
position: absolute;
left: 98px;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #0e1e7d;
}
.timeline-item11::after {
content: '';
position: absolute;
left: 98px;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #00cee8;
}
.timeline-item12::after {
content: '';
position: absolute;
left: 98px;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #fe2635;
}
.timeline-item13::after {
content: '';
position: absolute;
left: 98px;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #d70068;
}
.timeline-item14::after {
content: '';
position: absolute;
left: 98px;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #00a8f0;
}
.timeline-item16::after {
content: '';
position: absolute;
left: 98px;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #0e1e7d;
}
.timeline-item17::after {
content: '';
position: absolute;
left: 98px;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #00cee8;
}
.timeline-item22::after {
content: '';
position: absolute;
left: 98px;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #fe2635;
}
.timeline-item23::after {
content: '';
position: absolute;
left: 98px;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #d70068;
}
.timeline-item25::after {
content: '';
position: absolute;
left: 98px;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #0e1e7d;
}

.timeline-item96 h4 span{background: #00cee8;}
.timeline-item00 h4 span,.timeline-item12 h4 span{background: #fe2635;}
.timeline-item02 h4 span{background: #d70068;}
.timeline-item03 h4 span{background: #00a8f0;}
.timeline-item06 h4 span{background: #00cee8;}


.timeline-year{width: 12%;}
.timeline-content{width: 88%;}

.timeline-container .timeline-year h3{
margin: 0 60px 0 0;
font-size: 20px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
color: #0e1e7d;
}

.timeline-container .timeline-content h4{
margin:0px 0 20px 0;
font-size: 16px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
color: #fff;
}

.timeline-container .timeline-content h4 span{
margin: 0;
padding: 8px 25px;
}

.timeline-content h5{
margin:0 0 15px 0;
padding: 0;
font-size: 16px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
}

.timeline-content p{
width: 100%;
margin:0;
font-size: 14px;
line-height: 18px;
}

.timeline-content p img{
width: 20%;
margin: 15px 0 0 0;
}

.timeline-content ul{
margin:0;
}

.timeline-content ul li{
list-style: disc;
list-style-position: inside;
font-size: 14px;
line-height: 28px;
}

/*リクルート**************************************************/

#RecruitmentWrap{
background: url(../new_img/255455634.jpg) no-repeat;
background-position: center -100px;
background-size: cover;
margin-bottom: 80px;
}

.RecruitmentBox{
padding: 70px 0;
}

.RecruitmentBoxReA{
position: relative;
width: 100%;
max-width: 1000px;
min-height:240px;
margin: 0 auto;
}
.RecruitmentBox01{
position:absolute;
bottom:0px;
right: 1%;
width: 650px;
margin: 0;
padding:25px;
}

.RecruitmentBox01 p{
font-size: 24px;
line-height: 28px;
font-weight: bold;
color: #333;
text-align: right;
}


.Reccontainer {
max-width: 1000px;
margin: 40px auto 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 20px 20px 0 20px;
flex-wrap: wrap;
}

.Reccontainer .content-left {
flex: 1;
padding-right: 40px;
min-width: 300px;
}

.Reccontainer .content-right {
flex: 1;
display: flex;
justify-content: center;
align-items: flex-start;
}

.Reccontainer .content-right img {
max-width: 80%;
height: auto;
}

.Reccontainer h2 {
color: #0e1e7d;
font-size: 18px;
border-left: 3px solid #0e1e7d;
padding-left: 10px;
margin-top: 30px;
margin-bottom: 15px;
}

.Reccontainer ul {
list-style:inside;
padding: 0;
margin-bottom: 20px;
}

.Reccontainer ul li {
font-size: 14px;
margin-bottom: 10px;
line-height: 18px;
}

.Reccontainer p {
font-size: 14px;
margin-bottom: 10px;
line-height: 18px;
}


.salary-section-container {
max-width: 1000px;
margin: 0 auto;
border: 1px solid #333;
box-sizing: border-box;
}

.salary-row {
display: flex;
border-bottom: 1px solid #333;
}

.salary-row:last-of-type {
border-bottom: none;
}

.salary-label-cell,
.salary-details-cell {
padding: 15px 20px;
box-sizing: border-box;
}

.salary-label-cell {
flex-basis: 150px;
flex-shrink: 0;
font-weight: bold;
color: #333;
border-right: 1px solid #333;
}

.salary-details-cell {
flex-grow: 1;
color: #555;
}

.salary-details-cell ul {
list-style: none;
padding: 0;
margin: 5px 0 0 0;
}

.salary-details-cell ul li {
margin-bottom: 5px;
position: relative;
padding-left: 1.2em;
}

.salary-details-cell ul li::before {
content: '・';
position: absolute;
left: 0;
color: #555;
}


.selection-container {
max-width: 1000px;
margin: 0 auto;
padding: 0px;
box-sizing: border-box;
}

/* --- 採用フローのスタイル --- */
.recruitment-flow {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
margin-bottom: 40px;
}

.flow-item {
display: flex;
align-items: center;
margin: 10px;
}

.recruitment-flow .circle {
width: 120px;
height: 120px;
border-radius: 50%;
background-color: #00bcd4;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.1em;
font-weight: bold;
text-align: center;
line-height: 1.3;
padding: 10px;
box-sizing: border-box;
}

.recruitment-flow .arrow {
font-size: 3em;
color: #0e1e7d;
margin: 0 10px;
text-align: center;
}

.flow-item.last-item .arrow {
display: none;
}

/* --- 問い合わせ情報テキスト --- */
.contact-info-text {
margin-top: 30px;
margin-bottom: 20px;
font-size: 14px;
}

/* --- 問い合わせ先テーブルのスタイル --- */
.contact-table-wrapper {
border: 1px solid #333;
border-collapse: collapse;
margin-top: 20px;
}

.contact-row {
display: flex;
border-bottom: 1px solid #333;
}

.contact-row:last-of-type {
border-bottom: none;
}

.contact-label,
.contact-value {
padding: 15px 20px;
border-right: 1px solid #333;
}
.title-Th{
	background: #e0e0e0;
	text-align: center;
}

.contact-label {
flex-basis: 150px;
flex-shrink: 0;
font-weight: bold;
color: #333;
}

.contact-value {
flex-grow: 1;
color: #555;
border-right: none;
}


/*ビジネス**************************************************/

/*事業領域*/
.BusinessImg{
width: 70%;
margin: 50px auto;
}

.BusinessBoxA dl dt{
width:244px;
margin: 0 0 17px 0;
padding: 20px 0;
color: #fff;
text-align: center;
font-size: 18px;
font-weight: 700;
font-family: 'Noto Sans JP', sans-serif;
}

.BusinessBoxA dl{
margin: 0 0 30px 0;
padding: 0;
}

.BusinessBoxA dd p{
font-size: 14px;
line-height: 30px;
font-weight: bold;
}

.BusinessBoxA dd ul li{
font-size: 14px;
line-height: 30px;
}

.BusinessBoxA dl dd ul li::before{
content: " ";
display: inline-block;
width: 24px;
height: 24px;
vertical-align: middle;
}

.BusinessBoxA .TechnologyWrap dd ul li::before{
margin: 0 10px 0 0;
background: url(../new_img/icon_business_03.png) no-repeat center center;
background-size: contain;
}

.BusinessBoxA .SecurityWrap dd ul li::before{
margin: 0 10px 0 0;
background: url(../new_img/icon_business_01.png) no-repeat center center;
background-size: contain;
}

.BusinessBoxA .DesignWrap dd ul li::before{
margin: -5px 10px 0 0;
background: url(../new_img/icon_business_02.png) no-repeat center center;
background-size: contain;
}

.TechnologyWrap dt{background: #00cee8;}
.SecurityWrap dt{background: #d70068;}
.DesignWrap dt{background: #22bf7f;}

/*サービス*/
.ServiceWrap{width:100%;margin:0 auto;padding:50px 0;}
.ServiceWrap2{width:100%;margin:0 auto;padding:0 0 100px 0;background: #ffffff;}


/*ドメイン*/
.brochureBox {
width: 1000px;
padding: 75px 0px;
}

.domain-keeperLogo {
width: 409px;
margin: 0 0 35px 0;
}

.domain-keeperLogo img {
width: 100%;
}

.title-technology {
width:244px;
background-color: #00b9e0;
color: #fff;
padding: 20px;
margin:0 0 50px 0;
font-size: 24px;
font-weight: bold;
text-align: center;
}

.title-security {
width:244px;
background-color: #d70068;
color: #fff;
padding: 20px;
margin:30px 0;
font-size: 24px;
font-weight: bold;
text-align: center;
}

.title-design {
width:244px;
background-color: #00c885;
color: #fff;
padding: 20px;
margin:30px 0;
font-size: 24px;
font-weight: bold;
text-align: center;
}

.domain-section {
display: flex;
align-items: flex-start;
padding: 20px 25px 30px 25px;
border-bottom: solid 2px #ccc;
}

.domain-left {
width: 200px;
margin-right: 65px;
flex-shrink: 0;
text-align: center;
}

.domain-right {
flex-grow: 1;
}

.domain-right dl dt {
margin:0 0 10px 0;
font-size: 16px;
font-weight: 700;
font-family: 'Noto Sans JP', sans-serif;
}

.domain-right dd {
margin:0 0 20px 0;
font-size: 14px;
line-height: 28px;
}

.service-button {
width: 160px;
background-color: #003366;
color: #fff;
padding: 5px 20px;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
transition: background-color 0.3s ease;
}

.service-button:link {
background-color: #003366;
color: #fff;
}

.service-button:hover ,.service-button:visited {
color: #fff;
text-decoration: none;
}


.service-button i{
margin:0 0 0 5px;
}

.service-button:hover {
background-color: #004488;
}




/*RESULT**************************************************/

/*実績*/
.inlineBlock2{
margin: 20px auto;
}
.inlineBlock2 .inlineBlockOne2{
display: inline-block;
vertical-align: top;
width: 230px;
margin: 10px 0px 30px 10px;
border-radius: 8px;
}
.inlineBlock2 .inlineBlockOne2 h4.inlineBlockTitle2{
text-align: left;
font-size: 16px;
color: #383838;
font-weight: bold;
margin: 0px auto 10px auto;
}
.inlineBlock2 .inlineBlockOne2 .inlineBlockImg2{
text-align: center;
width: 230px;
max-height: 156px;
overflow: hidden;
margin:0 auto 10px;
}
.inlineBlock2 .inlineBlockOne2 .inlineBlockImg22{
text-align: center;
width: 160px;
margin:0 auto 10px;
}
.inlineBlock2 .inlineBlockOne2 .inlineBlockText2{
width: 100%;
margin: 10px auto 0;
text-align: left;
font-size: 14px;
color: #8c8c8c;
line-height: 28px;
}
.inlineBlock2 .inlineBlockOne2 .inlineBlockText20{
width: 80%;
margin: 20px auto 0;
text-align: center;
font-size: 1.2em;
color: #383838;
line-height: 160%;
}

.ResultWrap{
margin: 0 auto;
padding:0 0 45px 0;
}

.ResultWrap h3{
margin: 0;
padding:0;
font-size: 24px;
color: #0e1e7d;
font-weight: 700;
font-family: 'Noto Sans JP', sans-serif;
}

.ServerWrap .container{
justify-content: space-between;
margin: 0 auto;
padding: 45px 0;
}

.ServerBox{width:calc(25% - 15px);text-align: center;}

.ServerBox h5{
margin: 0 auto;
padding: 10px;
border: solid 1px #0e1e7d;
text-align: center;
font-size: 18px;
}

.ServerBox .linkBox{
	display: block;
	width: 100%;
text-align: center;
}
.ServerBox .linkBox a{
margin: 10px auto!important;
}

.ServerBox img{
width: 80%;
margin: 0 auto;
}

.ServerBox p{
margin: 0 auto;
padding: 0;
font-size: 14px;
letter-spacing: -1px;
}

.SecurityBWrap{
margin: 0 auto;
padding:25px 0 0 0;
}

.SecurityBWrap .domain-section .domain-right p{
padding: 40px 0 0 0;
}

.SecurityBWrap .domain-section {
border-bottom:none !important;
}

.SSLWrap{
width: 80%;
margin: 0 auto;
padding: 0 0 30px 0;
justify-content: space-between;
}

.BBnone{
	border-bottom: none;
}

.SSLWrap .SSLBox{
width:calc(50% - 10px);
}

.SSLWrap .SSLBox img{
width:80%;
margin: 0 auto;
}

.SSLWrap .SSLBox p{
width: 65%;
margin: 0 auto;
padding: 20px 0 0 0;
font-size: 14px;
line-height: 28px;
text-align: center;
}

.ProduceWrap{
padding: 30px 0 0 0 ;
}

.ProduceWrap .domain-section{
padding: 30px 0 50px 0 !important;
}

.ProduceText{
margin: 40px 0 20px 0;
padding: 20px;
background: #f4f4f4;
}

.ProduceWrap p{
font-size: 14px;
line-height: 28px;
}

/*TEAM*/
.TeamWrap{
padding: 50px 0 70px 0;
}

.TeamWrap h3{
margin:30px 0 0 0;
font-size: 18px;
line-height: 36px;
font-weight: 700;
font-family: 'Noto Sans JP', sans-serif;
}

.TeamWrap p{
font-size: 14px;
line-height: 28px;
}

.WrapLightGreen{
width: 100%;
margin: 20px auto 40px auto;
padding:0 10px;
background: #FCFFF8;
}

.IotWrap{
margin: 0;
padding: 0;
}

.IotWrap .domain-section{
border-bottom: none !important;}

.IotWrap h3{
margin: 0;
padding:0;
font-size: 24px;
color: #0e1e7d;
font-weight: 700;
font-family: 'Noto Sans JP', sans-serif;
}

.indexText{
width: 90%;
margin: 10px auto 20px auto;
text-align: center;
line-height: 140%;
color: #333333;
font-size: 1.4em;	
}
.indexTel{
width: 95%;
margin: 10px auto 10px auto;
text-align: center;
line-height: 180%;
color: #333333;
font-size: 3.0em;	
font-family:Arial;
font-weight: bold;
}
.indexTel span{
margin-right: 12px;
line-height: 100%;
color: #333333;
}
.indexTelText{
width: 100%;
margin: 10px auto 60px auto;
text-align: center;
line-height: 100%;
color: #333333;
font-size: 1.4em;	
}

.inlineBlock1{
margin: 20px auto 20px auto;
text-align: center;
width: 100%;
}
.inlineBlock1 .inlineBlockOne1{
display: inline-block;
text-align: center;
vertical-align: top;
width: 100px;
margin: 0px 10px 10px 10px;
border-radius: 8px;
}
.inlineBlock1 .inlineBlockOne1 h4.inlineBlockTitle1{
text-align: center;
font-size: 0.75rem;
color: #333333;
font-weight: normal;
margin: 20px auto 10px auto;
}
.inlineBlock1 .inlineBlockOne1 .inlineBlockImg1{
text-align: center;
width: 100%;
margin:0 auto 10px;
}
.inlineBlock1 .inlineBlockOne1 .inlineBlockText1{
width: 100%;
margin: 10px auto 0;
text-align: left;
font-size: 14px;
color: #666666;
line-height: 180%;
}


/*SDGs*****************************************************/

.SdgsImg1 img{
width: 75%;
margin: 10px auto;
}

.SdgsWrapA{
width: 100%;
margin: 50px auto 0 auto;
padding: 50px 0 100px 0;
background-color:#daeaf7; 
}

.SdgsWrapA ul li{
width: 100%;
margin: 0 auto 50px auto;
padding: 30px;
border-radius: 10px;
background: #fff;
}

.SdgsWrapA ul li:last-child{
margin: 0 auto;
}

.SdgsWrapA ul li .SdgsTxt{
width: 50%;
padding: 0 40px 0 0;
}

.SdgsWrapA ul li .SdgsTxt p{
padding: 30px 0 0 0;
font-size: 18px;
color: #154a95;
font-weight: bold;
}

.SdgsWrapA ul li .SdgsIcon{width: 50%;}

.SdgsWrapA ul li .SdgsIcon div{width:25%;margin:0;}

.SdgsWrapA ul li .SdgsIcon img{width:90%;}


/*CONTACT**************************************************/
.CTAWrap{
width: 100%;
margin:0% auto;
padding:68px 0;
background:#f4f4f4;
}

.CTAText{
width: 100%;
margin: 0 auto;
padding:0 0 42px 0;
color: #000;
text-align: center;
font-size: 1.5em;
line-height: 2.25em;
font-weight: 700;
font-family: 'Noto Sans JP', sans-serif;
}

.CTABtn ul {
width: 100%;
max-width: 800px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
list-style: none;
margin: 0 auto;
}

.CTABtn ul ::after{
content: "";
display: block;
width: 50%;
}

.CTABtn ul li{
width: 50%;
margin: 0%;
padding: 0% 1.5%;
}

.CTABtn a{
display: block;
width: 370px;
margin: 0 auto;
padding: 27px 0%;
font-size: 1.5em;
text-align: center;
font-weight: 700;
font-family: 'Noto Sans JP', sans-serif;
}

.CTABtn a i{
margin: 0 10px 0 0;
padding:0%;
}

.CTATel{
background: #0e1e7d;
color: #fff !important;
}
.CTATel span{
background: #3F80EA;
color: #fff;
}

.CTADemo{
background: #3F80EA;
color: #fff !important;
}
.CTADemo span{
background: #FFEB00;
color: #3F80EA;
}

.CTATel:hover,.CTADemo:hover{
background: #285FCA;
color: #fff !important;
text-decoration: none;
}






/*NEWS **************************************************/
.NEWSWrap{
width: 100%;
margin:0% auto;
padding:0 0 68px 0;
background:#fff;
}


/*Why we are chosen **************************************************/
.WHYWrap{
width: 100%;
margin:0% auto;
padding:68px 0 120px 0;
background:#fff;
}
.WHYWrap h3{
margin: 28px 0 10px 0;
padding:0;
font-size: 24px;
color: #0e1e7d;
font-weight: 700;
font-family: 'Noto Sans JP', sans-serif;
}
.WHYWrap h4{
margin: 0 0 12px 0;
padding:0;
font-size: 18px;
color: #333;
font-weight: 700;
font-family: 'Noto Sans JP', sans-serif;
}
.noborder-B{
	border-bottom: none!important;
}



/* 会社概要 **************************************************/

.company-container {
width: 1000px;
margin: 0 auto;
padding: 0;
}

.company-profile {padding: 60px 0 115px 0;}

.profile-content {position: relative;}

.vertical-line-separator {
position: absolute;
left: 150px;
top: 0;
bottom: 0;
width: 5px;
background-color: #0e1e7d;
z-index: 1;
}

.profile-list {
list-style: none;
margin-bottom: 40px;
}

.profile-item {
display: flex;
align-items: flex-start;
margin-bottom: 25px;
position: relative;
z-index: 2;
}

.item-label{
font-size: 16px;
font-weight: 700;
font-family: 'Noto Sans JP', sans-serif;
}

.profile-item .item-label,
.profile-section .item-label {
flex-shrink: 0;
width: 150px;
padding-right: 60px;

}

.profile-item .item-value ,.profile-section .item-value{
flex-grow: 1;
padding-left: 60px;
font-size: 14px;
line-height: 28px;
}

.profile-item .item-value p, .profile-section .item-value p{
font-size: 14px;
line-height: 28px;
margin-left: 0px !important;
}


.profile-section {
display: flex;
align-items: flex-start;
margin-bottom: 25px;
padding-top: 10px;
}

.profile-list .profile-item:last-child {margin-bottom: 0;}
.profile-content .profile-section:last-child {margin-bottom: 0;}

@media (max-width: 768px) {
    .container {
        width: 100%;
        padding: 0 20px;
    }
    .profile-content {
        padding-left: 0;
    }
    .vertical-line-separator {
        display: none;
    }
    .profile-item, .profile-section {
        flex-direction: column;
        align-items: flex-start;
    }
    .profile-item .item-label,
    .profile-section .item-label {
        width: auto;
        padding-right: 0;
        margin-bottom: 5px;
        font-weight: 700;
    }
}

/*アクセス*/
.MapWrap{
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0 0 100px 0;
}

.MapWrap iframe{
width: 1000px;
height: 340px;
margin: 0 auto;
padding: 0;
}


/*プライバシーポリシー********************************************/
.privacy-container{
width: 1000px;
margin: 0 auto;
padding: 0;
}

.privacy-profile {padding: 60px 0 115px 0;}

.privacy-content {
position: relative;
max-width: 1000px;
margin: 0 auto;
padding: 0;
}

.privacy-content .date,.privacy-content p {
font-size: 14px;
line-height: 28px;
margin:0 0 10px 0;
}

.privacy-content .date {
margin: 0 auto 20px auto;
padding:20px 30px;
background: #f4f4f4;
}

.privacy-content .right-align {text-align: right;margin:15px 0;}

.privacy-content .pri-info{margin:15px 0;}

.privacy-content ol {margin-left: 20px;margin-bottom: 15px;}

.privacy-content ol li {margin-bottom: 15px;}

.privacy-content ol ol {margin:15px 0 5px 30px;}

.privacy-content ol ol li{list-style: none;}

.privacy-content a {color: #0e1e7d;text-decoration: none;}

.privacy-content a:hover {text-decoration: underline;}

.privacy-content a i {margin:0 0 0 10px;}

.privacy-content dl {
margin: 40px auto;
}
.privacy-content dl dt {
margin: 0 0 20px 0;
font-size: 14px;
font-weight: bold;
}
.privacy-content dl dd {
margin: 0;
font-size: 14px;
line-height: 28px;
}

.privacy-content .contact-table-wrapper {
border: 1px solid #333;
border-collapse: collapse;
margin-top: 20px;
}

.privacy-content .contact-row {
display: flex;
border-bottom: 1px solid #333;
}

.privacy-content .contact-row:last-of-type {
border-bottom: none;
}

.privacy-content .contact-label,
.privacy-content .contact-value {
padding: 15px 20px;
border-right: 1px solid #333;
font-size: 14px;
line-height: 28px;
}

.privacy-content .contact-label {
flex-basis: 250px;
flex-shrink: 0;
font-weight: bold;
color: #333;
}

.privacy-content .contact-value {
flex-grow: 1;
color: #555;
border-right: none;
}

/*recruit**************************************************/

.recruit-container{
width: 1000px;
margin: 0 auto;
padding: 50px 0 !important;
}

/*各ボックス*/
.RecruitWrapA{width:100%;margin:0 auto;padding:50px 0;background: #ffffff;}
.RecruitWrapB{width:100%;margin:0 auto;padding:50px 0;background: #eefbff;}
.RecruitWrapC{width:100%;margin:0 auto;padding:50px 0;background: #f0f0f0;}


/*お問い合わせ**************************************************/
.form-container {
width: 100%;
max-width: 500px;
margin: 100px auto;
padding:0;
}

.form-description {
font-size: 16px;
line-height: 32px;
margin-bottom: 30px;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
font-size: 1.1em;
color: #333;
margin-bottom: 8px;
font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
width: 100%;
padding: 12px 15px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
color: #aaa;
}

.select-wrapper {
position: relative;
}

.select-wrapper select {
width: 400px;
padding: 12px 15px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1em;
color: #333;
box-sizing: border-box;
background-color: #fff;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 40px;
}

.select-wrapper::after {
content: '▼';
font-size: 0.8em;
color: #555;
position: absolute;
right: calc(100% - 400px + 15px);
left: calc(400px - 25px);

right: calc(100% - (400px - 15px));
left: 375px;
top: 55px;
transform: translateY(calc(-50% + 4px));
pointer-events: none;
}

.form-group textarea {
resize: vertical;
min-height: 120px;
}

.form-checkbox {
margin-top: 30px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
}

.form-checkbox input[type="checkbox"] {
margin-right: 10px;
transform: scale(1.2);
}

.form-checkbox label {
font-size: 0.95em;
color: #333;
cursor: pointer;
}

.submit-button {
display: block;
width: 100%;
max-width: 300px;
padding: 15px 20px;
margin: 40px auto 0;
background-color: #003366;
color: #fff;
border: none;
border-radius: 5px;
font-size: 1.2em;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
}

.submit-button:hover {background-color: #004488;}

/* スマートフォンでの表示調整 */
@media screen and (max-width: 768px) {
    .form-container {
        padding: 20px;
    }


    .form-group label {
        font-size: 1em;
    }

    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"],
    .form-group textarea {
        padding: 10px;
        font-size: 0.9em;
    }
    
    .select-wrapper select {
        padding: 10px; /* モバイルでのパディング調整 */
        padding-right: 30px; /* アイコン分のスペース */
    }

    .select-wrapper::after {
        right: 10px; /* モバイルでのアイコン位置調整 */
        top: 40px; /* モバイルでのアイコン位置調整 */
    }


    .form-checkbox {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-checkbox input[type="checkbox"] {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .submit-button {
        padding: 12px 15px;
        font-size: 1.1em;
    }
}




/*フッター**************************************************/
footer{
width: 100%;
margin: 0% auto;
padding: 0;
background:#FFFFFF;
}

.FooterLinkA{
width: 100%;
height: 70px;
margin: 0 auto 35px auto;
background: #0e1f7e;
display: flex;
align-items: center;
}

.FooterLinkA ul{margin: 0 auto;}

.FooterLinkA ul li{padding: 0 35px;transition: transform 0.3s ease-out;}

.FooterLinkA ul li:hover {transform: translateY(-5px);}


.FooterLinkA ul li a{color: #fff;}
.FooterLinkA ul li a:hover{text-decoration: none;}

.FooterLinkB{
width: 100%;
margin: 0px auto 35px auto;
}

.FooterLinkB ul {
margin: 0 auto;
padding: 0;
display: flex;
justify-content: center;
}

.FooterLinkB ul li{padding: 0 10px;}

.FooterLinkB ul li a:hover{color: #999; text-decoration: none;}

.PrivacyLogo{
width: 100%;
margin: 0px auto 40px auto;
}

.PrivacyLogo img{
width: 80px;
margin: 0% auto;
}

.FooterLogo{
width: 100%;
margin: 0 0 35px 0;
}

.FooterLogo img{
width: 200px;
margin: 0% auto;
}

.Copyright{
margin: 0;
padding: 15px 0;
background: #000;
}

.Copyright p{
font-size: 0.875em;/*14px;3.733vw;*/
text-align: center;
color: #fff;
}


/*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;
  z-index: 100;
  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: 600px) {
  .cookie-consent {
    flex-direction: column;
  }
  .cookie-text {
    margin-bottom: 1em;
  }
}

/* page-top */
#pageTop {
	position: fixed;
	bottom: 100px;
	right: 30px;
	z-index: 100;
}
#pageTop a {
	display: block;
	background: url(../new_img/gotop.png);
	background-size: 68px 68px;
	width: 68px;
	height: 68px;
	text-indent: -9999px;
}
#pageTop a:hover {
	background: url(../new_img/gotop.png);
	background-size: 68px 68px;
}