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


@keyframes fadezoom {
0% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}


@keyframes scroll-bar {
0% {
height: 0;
bottom: inherit;
top: 73px;
}
40% {
height: 73px;
bottom: inherit;
top: 73px;
}
41% {
height: 73px;
bottom: 0;
top: inherit;
}
80% {
height: 0;
bottom: 0;
top: inherit;
}
100% {
height: 0;
bottom: 0;
top: inherit;
}
}


@keyframes txtloop {
0% {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}

@keyframes txtloop2 {
0% {
transform: translateX(0);
}
to {
transform: translateX(-200%);
}
}
@keyframes zoomUp {
0% {
transform: scale(1);
}
100% {
transform: scale(1.15); /* 拡大率 */
}
}



/*PC*/
@media print, screen and (min-width: 769px) {

/* com
--------------------------------------------*/




/* mv
--------------------------------------------*/
#mv { position: relative; z-index: 1; background: #fba501; }

#mv .txtbox { position: absolute; bottom: 150px; left: 2%; z-index: 10; text-shadow: 0px 0px 8px rgba(0,0,0,0.6); }
#mv .txtbox p { display: block; font-size: 2.8rem; font-weight: 500; margin-bottom: 20px; color: #fff; }
#mv .txtbox p span {
font-size: 4.4rem;
font-weight: 700;
padding: 0 5px 0 10px;
color: #fba501;
}
#mv .txtbox h1 { font-size: 6.8rem; color: #fff; }


#mv .top-slide-wrap { width: 97%; margin: 0 0 0 auto; }



/* news
--------------------------------------------*/
#news {
position: relative;
width: 76%;
margin: 100px auto;
padding: 60px 60px;
box-sizing: border-box;
border-radius: 20px;
background-color: #f1f4f8;
}
#news .section_wrap { position: relative; width: 100%; margin: 0 auto; }
#news .section_wrap h2 {
font-size: 4.6rem;
margin-bottom: 40px;
background-image: linear-gradient(rgb(0, 0, 217) 0%, rgb(0, 124, 200) 100%);
color: transparent;
-webkit-background-clip: text;
}
#news .section_wrap h2 span {
display: table;
font-size: 2.4rem;
font-weight: 800;
color: #20293b;
}
#news .section_wrap .news_wrap {
width: 100%;
height: 200px;
overflow-x: hidden;
margin: 0 auto 60px;
}
#news .section_wrap .news_wrap dl {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
line-height: 1;
margin: 0 0 20px;
border-bottom: 1px solid rgba(0, 0, 0, .08);
padding-bottom: 16px;
box-sizing: border-box;
}
#news .section_wrap .news_wrap dl:last-child {
margin-bottom: 0;
}
#news .section_wrap .news_wrap dl dt {
position: relative;
width: 12%;
font-family: "Poppins", sans-serif;
font-weight: 500;
}
#news .section_wrap dl dd {
position: relative;
width: 88%;
}



/* read
--------------------------------------------*/
#read { position: relative; margin: 0 auto 0; }

#read .readtxt {
position: relative;
padding: 120px 0;
text-align: center;
background: url("../images/index/about_bg.png") no-repeat center bottom;
background-size: cover;
}
#read .readtxt::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../images/com/bg.jpg") center;
z-index: -1;
}
#read .readtxt p {
position: relative;
font-size: 6rem;
font-weight: 800;
line-height: 2.2;
display: inline-block;
color: #fff;
}
#read .readtxt p img { position: absolute; top: 130px; left: -50px; width: 230px; }

#read .flex_wrap {
width: 100%;
padding: 50px;
box-sizing: border-box;
background: url("../images/com/bg.jpg") center center;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#read .flex_wrap ul { position: relative; width: 50%; z-index: 2; }
#read .flex_wrap ul li {
width: 100%;
margin-bottom: 30px;
background: #08298b;
border-radius: 30px;
padding: 30px 30px 20px;
box-sizing: border-box;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
}
#read .flex_wrap ul li .img { position: relative; }
#read .flex_wrap ul li .img img { border-radius: 30px; }
#read .flex_wrap ul li h3 {
font-size: 2.2rem;
padding: 0px 25px 20px;
background: #08298b;
border-radius: 30px 0 0 0;
color: #fff;
position: absolute;
bottom: -40px;
right: 0;
}
#read .flex_wrap ul li h3 span {
font-size: 4.5rem;
padding: 0 0 0 5px;
text-align: right;
}
#read .flex_wrap ul li .txt { position: relative; padding: 10px 0 0; color: #fff; }
#read .flex_wrap ul li .txt p { font-size: 2.2rem; font-weight: 600; padding: 0 10px; }

#read .flex_wrap .map { position: relative; width: 45%; text-align: center; z-index: 2; }
#read .flex_wrap .map .sticky { position: sticky; top: 120px; }
#read .flex_wrap .map img { width: 80%; }
#read .flex_wrap .map p.center { font-size: 2rem; font-weight: 600; color: #fff; margin-top: 40px; }

#read .flex_wrap .illust { position: absolute; right: 0; bottom: 20px; width: 58%; z-index: 1; }



/* about
--------------------------------------------*/
#about {
position: relative;
margin: 0 auto;
padding: 250px 0 0;
box-sizing: border-box;
overflow: hidden;
}
#about article {
position: absolute;
top: -25px;
left: 0;
overflow: hidden;
}
#about article .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}
#about article .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 22rem;
font-weight: 500;
line-height: .9;
overflow: hidden;
color: #edf1f7;
}
#about article .loop_wrap div:nth-child(odd) {
animation: txtloop 100s -50s linear infinite;
}
#about article .loop_wrap div:nth-child(even) {
animation: txtloop2 100s linear infinite;
}

#about .flex_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 95%;
margin: 0 0 0 auto;
}
#about .flex_wrap .txtbox { width: 47%; }
#about .flex_wrap .txtbox h2 {
font-size: 5.2rem;
margin-bottom: 40px;
background-image: linear-gradient(rgb(0, 0, 217) 0%, rgb(0, 124, 200) 100%);
color: transparent;
-webkit-background-clip: text;
}
#about .flex_wrap .txtbox h2 span {
display: table;
font-size: 2.4rem;
font-weight: 800;
color: #20293b;
}
#about .flex_wrap .txtbox h3 { font-size: 2.4rem; }
#about .flex_wrap .txtbox p { font-size: 1.8rem; margin-top: 40px; line-height: 2; font-weight: 600; }
#about .flex_wrap .imgbox { width: 50%; position: relative; overflow: hidden; }
#about .flex_wrap .imgbox img { height: 720px; object-fit: cover; border-radius: 30px 0 0 30px; }



/* business
--------------------------------------------*/
#business { position: relative; margin: 150px auto 0; }
#business .bg { position: relative; padding: 100px 5% 150px; background: #0000d9; }

#business h2 {
font-size: 4.6rem;
margin: 0 auto 40px;
color: #fff;
position: relative;
z-index: 1;
}
#business h2 span {
display: table;
font-size: 2.4rem;
font-weight: 800;
}
#business p.txt { font-size: 2.2rem; margin: 40px auto 0; line-height: 2; font-weight: 600; color: #fff; position: relative; z-index: 1; }

#business ul { margin-top: 50px; position: relative; z-index: 1; }
#business ul li {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 50px 3%;
box-sizing: border-box;
background: #08298b;
border: 2px solid #fff;
border-radius: 30px;
margin-top: 30px;
color: #fff;
}
#business ul li h5 { width: 28%; font-size: 4.4rem; line-height: 1.6; }
#business ul li h5 span { display: block; width: 250px; margin: 30px 0 0; }

#business ul li .txtbox { width: 42%; line-height: 2; }
#business ul li .txtbox p { font-size: 1.8rem; font-weight: 600; }
#business ul li .txtbox p span { font-size: 1.6rem; margin-bottom: 10px; font-weight: 800; display: block; }
#business ul li .txtbox .common_btn_box a { border: 1px solid #fff; }

#business ul li .imgbox { width: 28%; }
#business ul li .imgbox img { border-radius: 10px; object-fit: cover; height: 280px; }

#business .illust { position: absolute; right: 0; top: 0px; width: 100%; z-index: 0; opacity: 0.4; }

#business .slider { position: relative; margin: auto; }
#business .slider .slick-slide { margin: 5px 5px 0; }
#business .slider .slick-slide img { border-radius: 20px; }



/* value
--------------------------------------------*/
#value {
position: relative;
margin: 150px auto 0 0;
background: url("../images/index/value_img.jpg") no-repeat center;
background-size: cover;
}
#value::after {
content: '';
background: rgba(77, 98, 165, 0.3);
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}

#value .txtbox {
width: 70%;
margin: auto;
text-align: center;
background: url("../images/com/bg.jpg") center center;
padding: 50px 0;
color: #fff;
position: relative;
z-index: 2;
}
#value .txtbox h2 {
font-size: 4.6rem;
line-height: 1.6;
margin-bottom: 30px;
background-image: linear-gradient(rgb(255, 255, 255) 0%, rgb(0, 124, 200) 100%);
color: transparent;
-webkit-background-clip: text;
}
#value .txtbox h2 span { display: block; font-size: 2.4rem; font-weight: 800; }
#value .txtbox h3 { font-size: 2.8rem; }
#value .txtbox p { font-size: 1.6rem; margin-top: 30px; line-height: 2; font-weight: 600; }

#value .txtbox ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 30px;
padding: 0 20px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
#value .txtbox ul li {
position: relative;
width: 25%;
font-size: 2.2rem;
font-weight: 600;
padding: 80px 20px;
background: #fba501ba;
border-right: 1px solid #fff;
box-sizing: border-box;
}
#value .txtbox ul li:first-child { border-left: 1px solid #fff; }

#value .txtbox ul li span {
font-size: 11rem;
font-weight: 600;
line-height: 1;
position: absolute;
bottom: 0;
right: 0;
color: rgba(255,255,255,0.1);
}



/* recruit
--------------------------------------------*/
#recruit {
position: relative;
margin: 0 auto 150px;
background: url("../images/index/bg_rec.jpg") center center no-repeat;
background-size: cover;
padding: 6.5% 5%;
box-sizing: border-box;
}
#recruit .section_wrap { position: relative; margin: 0; }
#recruit .section_wrap .txt_box { width: 100%; }
#recruit .section_wrap .txt_box h2 {
font-size: 3.2rem;
margin-bottom: 40px;
color: #fff;
}
#recruit .section_wrap .txt_box h2 span {
display: table;
font-size: 2rem;
font-weight: 800;
}
#recruit .section_wrap .txt_box .read_txt {
margin-bottom: 30px;
font-weight: 500;
color: rgba(255, 255, 255, 1);
font-size: 1.6rem;
letter-spacing: 1px;
}
#recruit .section_wrap .txt_box h5 {
display: inline-block;
padding: 20px 30px;
font-weight: 500;
background: rgba(255, 255, 255, 0.5);
border-radius: 5px;
font-size: 1.4rem;
backdrop-filter: blur(4px);
}
#recruit .section_wrap .txt_box .cm_btn { margin: 0 auto 0 0; }



	
}





/*sp*/
@media only screen and (max-width: 768px) {

/* com
--------------------------------------------*/




/* mv
--------------------------------------------*/
#mv { position: relative; z-index: 1; background: #fba501; }

#mv .txtbox { position: absolute; bottom: 100px; left: 2%; z-index: 10; text-shadow: 0px 0px 8px rgba(0,0,0,0.6); }
#mv .txtbox p { display: block; font-size: 2rem; font-weight: 500; margin-bottom: 20px; color: #fff; }
#mv .txtbox p span {
font-size: 3.4rem;
font-weight: 700;
padding: 0 5px 0 10px;
color: #fba501;
}
#mv .txtbox h1 { font-size: 4rem; color: #fff; }


#mv .top-slide-wrap { width: 96%; margin: 0 0 0 auto; }



/* news
--------------------------------------------*/
#news {
position: relative;
width: 90%;
margin: 60px auto;
padding: 30px 30px;
box-sizing: border-box;
border-radius: 20px;
background-color: #f1f4f8;
}
#news .section_wrap { position: relative; width: 100%; margin: 0 auto; }
#news .section_wrap h2 {
font-size: 2.8rem;
margin-bottom: 30px;
background-image: linear-gradient(rgb(0, 0, 217) 0%, rgb(0, 124, 200) 100%);
color: transparent;
-webkit-background-clip: text;
}
#news .section_wrap h2 span {
display: table;
font-size: 1.6rem;
font-weight: 800;
color: #20293b;
}
#news .section_wrap .news_wrap {
width: 100%;
height: 200px;
overflow-x: hidden;
margin: 0 auto 30px;
}
#news .section_wrap .news_wrap dl {
line-height: 1;
margin: 0 0 20px;
border-bottom: 1px solid rgba(0, 0, 0, .08);
padding-bottom: 10px;
box-sizing: border-box;
}
#news .section_wrap .news_wrap dl:last-child {
margin-bottom: 0;
}
#news .section_wrap .news_wrap dl dt {
position: relative;
font-family: "Poppins", sans-serif;
font-weight: 500;
margin-bottom: 10px;
}
#news .section_wrap dl dd {
position: relative;
}



/* read
--------------------------------------------*/
#read { position: relative; margin: 0 auto 0; }

#read .readtxt {
position: relative;
padding: 50px 0;
text-align: center;
background: url("../images/index/about_bg.png") no-repeat center bottom;
background-size: cover;
}
#read .readtxt::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../images/com/bg.jpg") center;
z-index: -1;
}
#read .readtxt p {
position: relative;
font-size: 7.6vw;
font-weight: 800;
line-height: 2.2;
display: inline-block;
color: #fff;
}
#read .readtxt p img {
position: absolute;
bottom: 100px;
left: -10px;
width: 25vw;
}

#read .flex_wrap {
width: 100%;
padding: 0px 5% 50px;
box-sizing: border-box;
background: url("../images/com/bg.jpg") center center;
}
#read .flex_wrap ul { position: relative; z-index: 2; }
#read .flex_wrap ul li {
width: 100%;
margin-bottom: 20px;
background: #08298b;
border-radius: 20px;
padding: 15px 10px;
box-sizing: border-box;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
}
#read .flex_wrap ul li .img { position: relative; }
#read .flex_wrap ul li .img img { border-radius: 20px; }
#read .flex_wrap ul li h3 {
font-size: 1.6rem;
padding: 0px 15px;
background: #08298b;
border-radius: 20px 0 0 0;
color: #fff;
position: absolute;
bottom: -20px;
right: 0;
}
#read .flex_wrap ul li h3 span {
font-size: 2.8rem;
padding: 0 0 0 5px;
text-align: right;
}
#read .flex_wrap ul li .txt { padding: 20px 0 0; color: #fff; }
#read .flex_wrap ul li .txt p { font-size: 1.8rem; font-weight: 600; padding: 0 10px; }

#read .flex_wrap .map { position: relative; text-align: center; z-index: 2; }
#read .flex_wrap .map p.center { font-size: 1.6rem; font-weight: 600; color: #fff; margin-top: 20px; }

#read .flex_wrap .illust { position: absolute; right: 0; bottom: 20px; width: 88%; z-index: 1; }



/* about
--------------------------------------------*/
#about {
position: relative;
margin: 0 auto;
padding: 80px 0 0;
box-sizing: border-box;
overflow: hidden;
}
#about article {
position: absolute;
top: -10px;
left: 0;
overflow: hidden;
}
#about article .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}
#about article .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 8rem;
font-weight: 500;
line-height: .9;
overflow: hidden;
color: #edf1f7;
}
#about article .loop_wrap div:nth-child(odd) {
animation: txtloop 100s -50s linear infinite;
}
#about article .loop_wrap div:nth-child(even) {
animation: txtloop2 100s linear infinite;
}

#about .flex_wrap {  }
#about .flex_wrap .txtbox { width: 90%; margin: 0 auto; margin-bottom: 50px; }
#about .flex_wrap .txtbox h2 {
font-size: 3rem;
margin-bottom: 30px;
background-image: linear-gradient(rgb(0, 0, 217) 0%, rgb(0, 124, 200) 100%);
color: transparent;
-webkit-background-clip: text;
}
#about .flex_wrap .txtbox h2 span {
display: table;
font-size: 1.8rem;
font-weight: 800;
color: #20293b;
}
#about .flex_wrap .txtbox h3 { font-size: 2rem; }
#about .flex_wrap .txtbox p { font-size: 1.4rem; margin-top: 40px; line-height: 2; font-weight: 600; }
#about .flex_wrap .imgbox { width: 95%; margin: 0 0 0 auto; position: relative; overflow: hidden; }
#about .flex_wrap .imgbox img { height: 250px; object-fit: cover; border-radius: 20px 0 0 20px; }



/* business
--------------------------------------------*/
#business { position: relative; margin: 100px auto 0; }
#business .bg { position: relative; padding: 60px 5% 100px; background: #0000d9; }

#business h2 {
font-size: 3rem;
margin: 0 auto 30px;
color: #fff;
position: relative;
z-index: 1;
}
#business h2 span {
display: table;
font-size: 1.8rem;
font-weight: 800;
}
#business p.txt { font-size: 1.4rem; margin: 40px auto 0; line-height: 2; font-weight: 600; color: #fff; position: relative; z-index: 1; }

#business ul { margin-top: 50px; position: relative; z-index: 1; }
#business ul li {
padding: 50px 3%;
box-sizing: border-box;
background: #08298b;
border: 2px solid #fff;
border-radius: 30px;
margin-top: 30px;
color: #fff;
}
#business ul li h5 { position: relative; font-size: 3.2rem; line-height: 1.6; margin-bottom: 20px; }
#business ul li h5 span {
display: block;
width: 40%;
position: absolute;
top: -20px;
right: 0;
z-index: 0;
opacity: 0.6;
}

#business ul li .txtbox { position: relative; line-height: 2; margin-bottom: 30px; }
#business ul li .txtbox p { font-size: 1.4rem; font-weight: 600; }
#business ul li .txtbox p span { font-size: 1.6rem; margin-bottom: 10px; font-weight: 800; display: block; }
#business ul li .txtbox .common_btn_box a { border: 1px solid #fff; }

#business ul li .imgbox {  }
#business ul li .imgbox img { border-radius: 10px; object-fit: cover; height: 200px; }

#business .illust { position: absolute; right: 0; top: 0px; width: 100%; z-index: 0; opacity: 0.4; }

#business .slider { width: 100%; position: relative; margin: auto; }
#business .slider .slick-slide { margin: 5px 5px 0; }
#business .slider .slick-slide img { width: 100%; height: auto; border-radius: 10px; }



/* value
--------------------------------------------*/
#value {
position: relative;
margin: 80px auto 0 0;
background: url("../images/index/value_img.jpg") no-repeat center;
background-size: cover;
}
#value::after {
content: '';
background: rgba(77, 98, 165, 0.3);
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}

#value .txtbox {
width: 80%;
margin: auto;
text-align: center;
background: url("../images/com/bg.jpg") center center;
padding: 30px 0;
color: #fff;
position: relative;
z-index: 2;
}
#value .txtbox h2 {
font-size: 3rem;
line-height: 1.6;
margin-bottom: 30px;
background-image: linear-gradient(rgb(255, 255, 255) 0%, rgb(0, 124, 200) 100%);
color: transparent;
-webkit-background-clip: text;
}
#value .txtbox h2 span { display: block; font-size: 1.8rem; font-weight: 800; }
#value .txtbox h3 { font-size: 2rem; }
#value .txtbox p { font-size: 1.4rem; margin-top: 30px; line-height: 2; font-weight: 600; }

#value .txtbox ul {
margin-top: 30px;
padding: 0 20px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
#value .txtbox ul li {
position: relative;
font-size: 1.8rem;
font-weight: 600;
padding: 40px 20px;
background: #fba501ba;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
box-sizing: border-box;
}
#value .txtbox ul li:first-child { border-top: none; }

#value .txtbox ul li span {
font-size: 8rem;
font-weight: 600;
line-height: 1;
position: absolute;
bottom: 0;
right: 0;
color: rgba(255,255,255,0.1);
}



/* recruit
--------------------------------------------*/
#recruit {
position: relative;
margin: 0 auto 100px;
background: url("../images/index/bg_rec.jpg") center center no-repeat;
background-size: cover;
padding: 6.5% 5%;
box-sizing: border-box;
}
#recruit .section_wrap { position: relative; margin: 0; }
#recruit .section_wrap .txt_box { width: 100%; }
#recruit .section_wrap .txt_box h2 {
font-size: 2.4rem;
margin-bottom: 40px;
color: #fff;
}
#recruit .section_wrap .txt_box h2 span {
display: table;
font-size: 1.6rem;
font-weight: 800;
}
#recruit .section_wrap .txt_box .read_txt {
margin-bottom: 30px;
font-weight: 500;
color: rgba(255, 255, 255, 1);
font-size: 1.4rem;
letter-spacing: 1px;
}
#recruit .section_wrap .txt_box h5 {
display: inline-block;
padding: 20px 30px;
font-weight: 500;
background: rgba(255, 255, 255, 0.5);
border-radius: 5px;
font-size: 1.3rem;
backdrop-filter: blur(4px);
}
#recruit .section_wrap .txt_box .cm_btn { margin: 0 auto 0 0; }



}