@charset "utf-8";
/*汎用**************************************************/

h1,h2,h3,h4,div,dl,dt,dd,ul,li,span,nav,p{box-sizing: border-box;}

.br-pc { display:none; }
.br-sp { display:block; }

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







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


.Box1000Wrap{
width: 100%;
margin: 0 auto;
padding: 5% 3%;
}

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

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

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

.titleH2B h2{
position: relative;
display: inline-block;
margin: 0 auto;
padding: 0;
font-size: 1.5em;
font-weight: bold;
color:#0e1e7d;
}

.titleH2 .Mark{
position: relative;
display: block;
width: 100%;
margin: 0 auto;
padding:0 0 3% 0;
font-size: 1em !important;
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 3% 0;
font-size: 1em !important;
text-align: center;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
}

.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%;
margin:5% auto;
padding: 3%;
background: url(../new_img/bg_subheader.png) no-repeat right bottom;
background-size: contain;
}

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

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

.SubTitleA{
margin: 0 0 8% 0;
padding: 0;
}

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

.SubTitleA{
font-size: 1.125em !important;
}

.SubTitleBox{
width: 100%;
margin:0 auto;
padding:2% 0;
}

.SubTitleBoxB{
width: 100%;
margin:0;
padding:0;
}

.SubTitleB,.SubTitleC{margin: 0 0 5% 0;}

.SubTitleB span{
padding:3% 5%;
font-size:1em;
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:0 0 15px 0;
font-size:18px;
color:#0e1e7d;
text-align: center;
}

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

.SubContsBox{
width: 100%;
margin: 0 auto 10% auto;
padding: 0 5%;
}

.SubContsBoxI{
width: 100%;
margin: 0;
padding: 0;
}

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

.SubContsBoxI p,.SubContsBoxB p{
width: 100%;
margin: 0 0 5% 0;
padding: 0;
font-size: 0.85em;
line-height: 2em;
}

.Box1000Wrap.SubBox{
margin: 0 auto;
padding:5%;
}

.LeadtextA{
text-align: center;
margin: 0 auto;
padding: 5% 2% 1% 2%;
font-size: 1.2em;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 300;
}

.LeadtextB{
text-align: center;
margin: 0 auto;
padding: 5% 2% 1% 2%;
font-size: 0.95em;
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%;
background-color: rgba(255, 255, 255, 0.8);
padding: 3% 0;
z-index: 100;
}

.header__logo{
width: 50%;
}

.header__logo img{
margin: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 3%;
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 */


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


/*FV**************************************************/
.FvImgWrap{
width: 100%;
margin: 15% 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: 8.5vw;
line-height: 1vw;
font-weight: 700;
margin: 0;
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:10% 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;
top:55%;
width: 100%;
text-align: center;
}

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

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

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

.v-arrow-down::before,
.v-arrow-down::after {
content: '';
position: absolute;
top: 0;
width: 19px;
height: 2px;
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: 10% 0%;
}

.IndexBox2{
padding: 30px 0 10px;	
}

.IndexBoxReA{
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}

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

#IndexBWrap{
width: 100%;
margin: 0;
padding: 0;
background:#f4f4f4;
}


.TitleBox01{
top: 0;
left: 0;
width:100%;
margin: 0 0 3% 0;
padding:0 5%;
}

.TitleBox02{
top: 0;
width: 100%;
margin: 0 auto;
padding:0;
}

.TitleBox01 p,.TitleBox02 p{
margin: 0 0 2% 0;
padding: 0;
font-size: 6vw;
font-weight: bold;
color:#0e1e7d;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
text-align: center;
}
.TitleBox01 h2,.TitleBox02 h2{
margin: 0;
padding: 0;
font-size: 1em;
font-weight: bold;
color:#000;
text-align: center;
}

/*read more*/
.TitleBox01 span,.TitleBox02 span{
display: block;
width: 50%;
text-align: center;
margin: 1% auto;
padding: 0;
font-size: 1em;
color:#0e1e7d;
letter-spacing: 2px;
}

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

.icon-arrow-right {
display: inline-block;
width: 15px;
height: 1px;
background-color: #0e1e7d;
border-radius: 1px;
margin:10px 0 0 0;
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: 6px solid transparent;
border-bottom: 0px solid transparent;
border-left: 10px solid #0e1f7e;
}

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


.TextBox01{
width:100%;
margin: 0;
padding:5%;
background: #fff;
}

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

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

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

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

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

.BannerBox{
position: relative;
margin: 10% auto;
}

.BannerBox div img{
width: 100%;
}


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

padding-top: 20px;
}

.SdgsWrap {
width: 100%;
margin:0 auto;
padding: 120px 0;
}

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

.SdgsBox h2 {
width: 100%;
margin-bottom: 40px;
padding:10px 20px;
background: #fff;
font-size: 18px;
color: #0f1c6d;
text-align: center;
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: 50%;
transform: translateX(-50%);
}

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


/* 3 */
.inlineBlock3{
	clear: both;
	margin: 20px auto 20px auto;
	text-align: center;
}
.inlineBlock3 .inlineBlockOne3{
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 300px;
	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**************************************************/

/*沿革*/
.AboutWrap{width:100%;margin:0 auto;padding:10% 5%;background: #ecfaff;}

.timeline-container{
width: 100%;
margin: 3% auto;
padding:10% 0;
position: relative;
}

.timeline-container .container{
width: 100%;
margin:0 !important;
}

.timeline-container::before{
content: '';
position: absolute;
left: 14%;
top: 0;
bottom: 0;
width: 1px;
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: 10%;
padding-left: 0;
}

/*丸点*/
.timeline-item96::after {
content: '';
position: absolute;
left:calc(14% - 3px);
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #00cee8;
}
.timeline-item00::after {
content: '';
position: absolute;
left:calc(14% - 3px);
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #fe2635;
}
.timeline-item02::after {
content: '';
position: absolute;
left:calc(14% - 3px);
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #d70068;
}
.timeline-item03::after {
content: '';
position: absolute;
left:calc(14% - 3px);
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #00a8f0;
}
.timeline-item04::after {
content: '';
position: absolute;
left:calc(14% - 3px);
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #0e1e7d;
}
.timeline-item06::after {
content: '';
position: absolute;
left:calc(14% - 3px);
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #00cee8;
}
.timeline-item07::after {
content: '';
position: absolute;
left:calc(14% - 3px);
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #fe2635;
}
.timeline-item08::after {
content: '';
position: absolute;
left:calc(14% - 3px);
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #d70068;
}
.timeline-item09::after {
content: '';
position: absolute;
left:calc(14% - 3px);
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #00a8f0;
}
.timeline-item10::after {
content: '';
position: absolute;
left:calc(14% - 3px);
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #0e1e7d;
}
.timeline-item11::after {
content: '';
position: absolute;
left:calc(14% - 3px);
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #00cee8;
}
.timeline-item12::after {
content: '';
position: absolute;
left:calc(14% - 3px);
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #fe2635;
}
.timeline-item13::after {
content: '';
position: absolute;
left:calc(14% - 3px);
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #d70068;
}
.timeline-item14::after {
content: '';
position: absolute;
left:calc(14% - 3px);
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #00a8f0;
}
.timeline-item16::after {
content: '';
position: absolute;
left:calc(14% - 3px);
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #0e1e7d;
}
.timeline-item17::after {
content: '';
position: absolute;
left:calc(14% - 3px);
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #00cee8;
}
.timeline-item22::after {
content: '';
position: absolute;
left:calc(14% - 3px);
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #fe2635;
}
.timeline-item23::after {
content: '';
position: absolute;
left:calc(14% - 3px);
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #d70068;
}
.timeline-item25::after {
content: '';
position: absolute;
left:calc(14% - 3px);
top: 8px;
width: 8px;
height: 8px;
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: 20%;}
.timeline-content{width: 80%;}

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

.timeline-container .timeline-content h4{
margin:0px 0 8% 0;
font-size: 0.85em;
line-height: 0.85em;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
color: #fff;
}

.timeline-container .timeline-content h4 span{
margin: 0;
padding: 2%;
}

.timeline-content h5{
margin:0 0 4% 0;
padding: 0;
font-size: 0.85em;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
}

.timeline-content p{
width: 100%;
margin:0;
font-size: 0.85em;
line-height: 1.85em;
}

.timeline-content p img{
width: 50%;
margin: 3% 0 0 0;
}

.timeline-content ul{
margin:0;
}

.timeline-content ul li{
list-style: disc;
list-style-position: inside;
font-size: 0.85em;
line-height: 1.85em;
}


/*リクルート**************************************************/	
#RecruitmentWrap{	
background: url(../new_img/255455634.jpg) no-repeat;	
background-position: center top;	
background-size: cover;	
}	
.RecruitmentBox{	
padding: 30px 0;	
}	
.RecruitmentBoxReA{
width: 100%;
margin: 0 auto;	
}	
.RecruitmentBox01{	
width: 80%;
margin: 0 auto;
padding:10px;	
}	
.RecruitmentBox01 p{	
font-size: 24px;	
line-height: 32px;	
font-weight: bold;	
color: #333;	
text-align: center;	
}

.Reccontainer {
flex-direction: column;
align-items: center;
}

/* スマートフォン版で写真を上に配置するためのorderプロパティを追加 */
.Reccontainer .content-right {
order: -1;
margin-bottom: 20px;
margin-top: 0;
}

.Reccontainer .content-left {
padding-right: 0;
margin-bottom: 30px;
}

.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: 100%;
margin: 0 auto;
border: none;
box-sizing: border-box;
}

.salary-row {
flex-direction: column;
border: 1px solid #333;
margin-bottom: 10px;
}

.salary-row:last-of-type {
margin-bottom: 0;
}

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

.salary-label-cell {
flex-basis: auto;
border-right: none;
border-bottom: 1px solid #333;
padding-bottom: 10px;
font-weight: bold;
}

.salary-details-cell {
flex-grow: 1;
color: #333;
font-size: 14px;
line-height: 18px;
}

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

.salary-details-cell ul li {
margin-bottom: 5px;
position: relative;
padding-left: 1.2em;
font-size: 14px;
line-height: 18px;
}

.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: 0px;
}

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

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

.recruitment-flow .arrow {
font-size: 1.5em;
color: #0e1e7d;
margin: 0 5px;
}

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

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

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

.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;
}




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

/*事業領域*/
.BusinessBoxA dl dt{
width:50%;
margin: 0 auto 5% auto;
padding: 2% 0%;
color: #fff;
text-align: center;
font-size: 1em;
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: -5px 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: -5px 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;background: #f4f4f4;}
.ServiceWrap2{width:100%;margin:0 auto;padding:50px 0;background: #ffffff;}


/*ドメイン*/
.brochureBox {
width: 100%;
padding:0;
}

.domain-keeperLogo {
width:100%;
margin: 0 auto 5% auto;
}

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

.title-technology {
width:50%;
background-color: #00b9e0;
color: #fff;
padding:2% 0;
margin:10% auto 5% auto;
font-size: 1em;
font-weight: bold;
text-align: center;
}

.title-security {
width:50%;
background-color: #d70068;
color: #fff;
padding:2% 0;
margin:10% auto 5% auto;
font-size: 1em;
font-weight: bold;
text-align: center;
}

.title-design {
width:50%;
background-color: #00c885;
color: #fff;
padding:2% 0;
margin:10% auto 5% auto;
font-size: 1em;
font-weight: bold;
text-align: center;
}

.domain-section {
padding:12% 0;
border-bottom: solid 1px #ccc;
}

.domain-left {
width:100%;
margin:0 auto 5% auto;
flex-shrink: 0;
text-align: center;
}

.domain-left img{
width:80%;
margin:0 auto;
text-align: center;
}

.domain-right {
width:100%;
}

.domain-right dl dt {
margin:0 0 10px 0;
font-size: 1em;
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:60%;
background-color: #003366;
color: #fff;
margin: 0 auto;
padding: 3% 5%;
font-size: 14px;
cursor: pointer;
display: block;
align-items: center;
transition: background-color 0.3s ease;
text-align: center;
}

.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:100%;
margin: 10px 0px 30px 0px;
}
.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:100%;
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 5% 0;
}

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

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


.ServerBox{width:calc(50% - 15px);text-align: center; margin-bottom: 10%;}

.ServerBox h5{
margin: 0 auto;
padding: 1%;
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;
width: 100%;	
}

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

.ServerBox p{
margin: 0 auto;
padding: 0;
font-size: 14px;
text-align: center;
}

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

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

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

.SSLWrap{
width: 100%;
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:100%;
margin: 0 auto;
}

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

.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;
text-align: center;
}

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

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

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

.IotWrap h3{
font-size: 18px;
line-height: 36px;
font-weight: 700;
font-family: 'Noto Sans JP', sans-serif;
text-align: center;
}

.IotWrap .domain-right p{
margin: 30px 0 0 0;
padding: 0;
font-size: 14px;
line-height: 28px;
}

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

.IotWrap h3{
margin: 0;
padding:0;
font-size: 18px;
color: #0e1e7d;
text-align: center;
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: 40%;
margin: 0px 10px 10px 10px;
border-radius: 8px;
}
.inlineBlock1 .inlineBlockOne1 h4.inlineBlockTitle1{
text-align: center;
font-size: 1.0rem;
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: 90%;
margin: 10px auto;
}

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

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

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

.SdgsWrapA ul li .SdgsTxt{
width: 100%;
padding:0;
}

.SdgsWrapA ul li .SdgsTxt p{
padding:0 0 3% 0;
font-size:1em;
color: #154a95;
font-weight: bold;
}

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

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

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




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

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

.CTABtn ul {
width: 100%;
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: 100%;
margin: 0% auto 5% auto;
padding: 0% 3%;
}

.CTABtn a{
display: block;
width: 80%;
margin: 0 auto;
padding: 3% 0%;
font-size: 1.125em;
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:10% 5%;
background:#fff;
}

/*Why we are chosen **************************************************/
.WHYWrap{
width: 100%;
margin:0% auto;
padding:34px 0 10px 0;
background:#fff;
}
.WHYWrap h3{
margin: 14px 0 0px 0!important;
padding:0;
font-size: 22px;
color: #0e1e7d;
font-weight: 700;
font-family: 'Noto Sans JP', sans-serif;
text-align: center;
}
.WHYWrap h4{
margin: 0 0 6px 0;
padding:0;
font-size: 16px;
color: #333;
font-weight: 700;
font-family: 'Noto Sans JP', sans-serif;
}
.noborder-B{
	border-bottom: none!important;
}



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

.company-container {
width: 100%;
margin: 0 auto;
padding: 0 5%;
}

.company-profile {padding: 5% 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 {
padding: 5% 0;
list-style: none;
margin:0;
}

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

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

.profile-item .item-label,
.profile-section .item-label {
flex-shrink: 0;
width: 10%;
padding:0;

}

.profile-item .item-value {
flex-grow: 1;
padding:0;
font-size: 0.85em;
font-size: 0.85em;
}

.profile-item .item-value p{
font-size: 1em;
line-height: 1.75em;
}

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

.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%;
    }
    .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: 0;
        font-weight: 700;
    }
}

/*アクセス*/
.MapWrap{
width: 100%;
margin: 0 auto;
padding: 0 5% 10% 5%;
}

.MapWrap iframe{
width: 100%;
height: 340px;
margin: 0 auto 5% auto;
padding: 0;
}


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

.privacy-profile {padding: 0% 5%;}

.privacy-content {
position: relative;
margin: 0 auto;
padding: 0;
}

.privacy-content .date,.privacy-content p {
font-size: 0.85em;
line-height: 1.85em;
margin:0 0 3% 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: 30%;
flex-shrink: 0;
font-weight: bold;
color: #333;
}

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


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

.recruit-container{
width: 100%;
margin: 0 auto;
padding:5%;
}

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


/*お問い合わせ**************************************************/
.form-container {
width: 100%;
margin:0% 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: 100%;
padding: 2%;
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% + 15px);
left: calc(100% - 25px);

right: calc(100% - 15px);
right: 0;
top: 50%;
transform: translateY(calc(-50% + 15px));
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:0% 5% 10% 5%;
    }


    .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: #0e1e7d;
display: flex;
align-items: center;
}

.FooterLinkA ul{margin: 0 auto;}

.FooterLinkA ul li{
font-size: 0.85em;
padding: 0 2%;
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{
font-size: 0.85em;
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;
  }
}















/*　ハンバーガーメニュー　*/

 .header__inner {
display: flex;
justify-content: space-between;
align-items: center;
}

.header__nav {
display: none; /* 初期状態ではメニューを非表示 */
position: absolute;
top: 0px; /* ヘッダーの高さに合わせて調整 */
right: 0;
width: 100%;
background-color: #fff; /* メニューの背景色 */
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
z-index: 1000;
}

  .header__nav.is-open { /* JavaScriptで追加されるクラス */
    display: block; /* メニューが開いているときは表示 */
  }

  .header__nav-list {
    flex-direction: column; /* 縦並びにする */
    padding: 20px;
  }

  .header__nav-item {
    margin: 10px 0;
    text-align: center;
  }

  /* ハンバーガーメニューボタンのスタイル */
  .hamburger-menu__button {
    display: block; /* スマートフォンでは表示 */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 0;
    position: relative;
    z-index: 1001; /* メニューより手前に表示 */
  }

  .hamburger-menu__icon {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #333;
    position: relative;
    transition: background-color .3s ease-in-out;
  }

  .hamburger-menu__icon::before,
  .hamburger-menu__icon::after {
    content: '';
    display: block;
    width: 30px;
    height: 3px;
    background-color: #333;
    position: absolute;
    transition: transform .3s ease-in-out, top .3s ease-in-out;
  }

  .hamburger-menu__icon::before {
    top: -8px;
  }

  .hamburger-menu__icon::after {
    top: 8px;
  }

  /* ハンバーガーメニューが開いたときのアイコンの変化 */
  .hamburger-menu__button.is-active .hamburger-menu__icon {
    background-color: transparent; /* 真ん中の線を透明に */
  }

  .hamburger-menu__button.is-active .hamburger-menu__icon::before {
    transform: rotate(45deg);
    top: 0;
  }

  .hamburger-menu__button.is-active .hamburger-menu__icon::after {
    transform: rotate(-45deg);
    top: 0;
  }






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

.titleH2 h2{
position: relative;
display: inline-block;
padding: 0% 12%;
font-size: 1.25em;/*20px*/
color:#3F80EA;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
}

.titleH2 h2:before, .titleH2 h2:after {
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 30px;
height: 5px;
border-top: solid 2px #3F80EA;
border-bottom: solid 2px #3F80EA;
}

.titleH2 h2:before {left:0;}
.titleH2 h2:after {right: 0;}

.titleH2 .Mark{
display: block;
width: 30%;
margin: 2% auto 0% auto;
padding:0px 5px;
font-size: 1.125em !important;/*18px;4.8vw;*/
text-align: center;
color: #cccccc;
background: #fff;
border:solid 1px #CCCCCC;
border-radius: 50px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
}

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

.swiperbox2 {
position: relative;
width: 100%;
margin: -8% auto 2% auto;
background: #fff;
}

.swiper {
width: 100%;
height: 50px;
margin: 10% auto 0% auto;
background: #fff;
}


.swiper-wrapper {
/* wrapperのサイズを調整 */
width: 100%;
height: 50px;
background: #fff;
}

.swiper-slide {
/* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
width: 100%;
height: 50px;
text-align: center;
background: #fff;
}



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