@charset "UTF-8";

/*================================mainvisual================================*/
.mainvisual{
position: relative;
width: 100%;
max-width: 1920px;
margin: auto;
}
.mainvisual .inner{
position: relative;
min-width: 1200px;
height: auto;
margin: auto ;
}
.mainvisual .inner img{
width: 100%;
height: auto;
}
.mainvisual .scroll{
position: absolute;
right:20%;
bottom: -90px;
z-index: 1;
width: 182px;
height: 182px;
border-radius: 50%;
background: linear-gradient(180deg, #3EDADA -16.48%, #6CABE8 78.02%);
}
.mainvisual .scroll span{
content: "";
position: absolute;
top: 22px;
left: 50%;
transform: translateX(-50%);
display: inline-block;
text-align: center;
color: #FFF;
font-size: 1.4rem;
font-weight: 900;
line-height: 1.6;
letter-spacing: 0.7px;
animation: fadeInOut 2s infinite;
}
@keyframes fadeInOut {
  0%, 100% { opacity: 0.2; transform: translateX(-50%) translateY(0); }
  50% { opacity: 1; transform: translateX(-50%) translateY(8px); }
}
.mainvisual .scroll::after{
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 111px;
background: url(../images/parts-scroll.svg) no-repeat top center;
animation: fadeInOut 2s infinite;
}
.mainvisual .catch{
position: absolute;
bottom:10%;
left: 50%;
transform: translateX(-50%);
width: 70%;
}
.mainvisual .logo{
position: absolute;
top:96px;
left: 64px;
z-index: 1;
pointer-events: none;
}
@media only screen and (max-width: 767px) {
.mainvisual{
width: 100%;
max-width: 100%;
margin-top: 70px;
}
.mainvisual .inner{
aspect-ratio: 1/1;
min-width:100%;
}
.mainvisual .scroll{
position: absolute;
right:initial;
left: 50%;
bottom: -45px;
transform: translateX(-50%);
width: 90px;
height: 90px;
}
.mainvisual .scroll span{
content: "";
position: absolute;
top:12px;
left: 50%;
transform: translateX(-50%);
font-size: 1rem;
line-height: 1.4;
}
.mainvisual .scroll::after{
content: "";
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 30px;
}
@keyframes fadeInOut {
0%, 100% { opacity: 0.2; transform: translateX(-50%) translateY(0); }
50% { opacity: 1; transform: translateX(-50%) translateY(4px); }
}
.mainvisual .catch{
position: absolute;
top: 47%;
left: 50%;
bottom: initial;
transform: translate(-50%,-50%);
width: 90%;
}
.mainvisual .logo{
position: absolute;
top:96px;
left: 64px;
z-index: 1;
pointer-events: none;
}
}

/*=============================== intro ================================*/
#intro{
position: relative;
width: 100%;
max-width: 1920px;
height: 1645px;
margin: auto;
background:#fff url(../images/bg-intro.jpg) no-repeat top center;
}
#intro .inner{
position: relative;
display: flex;
gap: 90px;
width: 1220px;
margin: auto;
padding-top: 260px;
z-index: 1;
}
#intro .inner::before{
content: "";
position: absolute;
top: 20px;
left: 50%;
z-index: 2;
transform: translateX(-50%);
width: 1920px;
height: 1919px;
background:url(../images/parts-intro.png) no-repeat;
pointer-events: none;
}
#intro .wrap .catch{
margin-bottom: 30px;
}
#intro .wrap .catch span{
display: inline-block;
color: #1A489D;
font-size:2.3rem;
font-weight: 700;
background: rgba(255, 255, 255, 0.81);
padding: 8px;
margin-bottom: 20px;
}
#intro .wrap:nth-child(1){
position: relative;
width: 590px;
}
#intro .wrap:nth-child(2){
width: 540px;
}
#intro .wrap p{
position: relative;
z-index: 2;
width: 515px;
color: #FFF;
font-size: 2rem;
font-weight: 500;
line-height: 194%;
margin-bottom: 20px;
}
#intro .wrap figure:nth-child(1){
position: absolute;
top:-120px;
left: 130px;
z-index: 1;
width: 461px;
height: 573px;
filter: drop-shadow(6px 6px 11px rgba(0, 0, 0, 0.15));
border-radius: 100px 0px 0px 0px;
overflow: hidden;
}
#intro .wrap figure:nth-child(2){
position: absolute;
top:390px ;
left: 0;
z-index: 2;
width:488px;
height: 382px;
filter: drop-shadow(6px 6px 11px rgba(0, 0, 0, 0.15));
border-radius: 0px 0px 100px 0px;
overflow: hidden;
}
#intro .wrap figure:nth-child(3){
position: absolute;
top:860px ;
left: 175px;
z-index: 2;
width: 425px;
height: 280px;
filter: drop-shadow(6px 6px 11px rgba(0, 0, 0, 0.15));
border-radius: 0px 0px 0px 100px;
overflow: hidden;
}
#intro .wrap figure img{
width: 100%;
height: auto;
}
@media only screen and (max-width: 767px) {
#intro{
position: relative;
width: 100%;
max-width: 100%;
height: auto;
background:#fff url(../images/bg-intro.jpg) no-repeat top center;
}
#intro .inner{
display: flex;
flex-wrap: wrap;
gap: 30px;
width: 100%;
padding: 80px 0 80px;
}
#intro .inner::before{
content: "";
position: absolute;
top: initial;
bottom:70vw;
left: 50%;
z-index: 2;
transform: translateX(-50%);
width: 100%;
height: 120vw;
background:url(../images/parts-intro.png) no-repeat;
background-size: 240% auto;
pointer-events: none;
}
#intro .wrap .catch{
margin-bottom: 20px;
}
#intro .wrap .catch span{
font-size:1.6rem;
padding: 6px 10px;
line-height: 1.3;
margin-bottom: 10px;
}
#intro .wrap:nth-child(1){
width: 100%;
order: 2;
}
#intro .wrap:nth-child(2){
width: 100%;
order: 1;
padding: 0 20px;
}
#intro .wrap p{
width: 100%;
font-size: 1.5rem;
line-height: 150%;
margin-bottom: 0.8em;
}
/*
#intro .wrap p br{
display: none;
}
*/
#intro .wrap figure:nth-child(1){
position: initial;
width: 80%;
height: auto;
margin-bottom: 20px;
margin-left: auto;
}
#intro .wrap figure:nth-child(2){
position: initial;
width: 80%;
height: auto;
margin-right: auto;
margin-bottom: 20px;
}
#intro .wrap figure:nth-child(3){
position: initial;
width: 80%;
height: auto;
margin-left: auto;
}
}

/*=============================== career_step ================================*/
#career_step{
width: 100%;
max-width: 1920px;
min-width: 1280px;
padding-top: 100px;
margin: -100px auto 0;
}
#career_step .inner{
position: relative;
left: 50%;
transform: translateX(-50%);
width: 1920px;
margin:auto;
z-index: 1;
}
#career_step .layout_container{
display: flex;
gap:0 95px;
}
#career_step .wrap{
width: 540px;
}
#career_step  h2{
margin-bottom: 40px;
}
#career_step .wrap h2 > span:nth-child(1){
position: relative;
display: flex;
align-items: center;
color:  #1A489D;
font-size: 2rem;
font-weight: 700;
line-height: 1;
letter-spacing: 1px;
margin-bottom: 12px;
}
/*
#career_step .wrap h2 > span:nth-child(1)::before{
display: block;
content: "";
width: 15px;
height: 15px;
background: url(../images/icon/icon-h2.svg) no-repeat;
margin-right: 6px;
}
*/
#career_step .wrap h2 > span:nth-child(2) span{
font-size: 6rem;
font-weight: 700;
line-height: 100%;
background: linear-gradient(90deg, #2881B5 1.46%, #34B2C9 30.36%, #3EDADA 59.35%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
-webkit-text-stroke: 0.5px transparent;
transform: translateZ(0);
letter-spacing: 0.02em;
text-shadow: none;
}
#career_step .wrap p{
color: #000;
font-size: 16px;
font-weight: 400;
line-height: 207%;
margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
#career_step{
width: 100%;
max-width:100%;
min-width: 100%;
padding-top: 80px;
margin:  auto ;
}
#career_step .inner{
position: relative;
left: initial;
transform: initial;
width: 100%;
padding:  0 20px;
}
#career_step .layout_container{
flex-wrap: wrap;
gap:30px 0;
}
#career_step .layout_container figure{
order: 2
}
#career_step .layout_container img{
width: 100%;
height: auto;
}
#career_step .wrap{
width: 100%;
order: 1;
}
#career_step  h2{
margin-bottom: 40px;
}
#career_step .wrap h2 > span:nth-child(1){
font-size: 1.8rem;
margin-bottom: 12px;
}
/*
#career_step .wrap h2 > span:nth-child(1)::before{
display: block;
content: "";
width: 14px;
height: 18px;
background: url(../images/icon/icon-h2.svg) no-repeat bottom;
background-size: 14px;
margin-right: 6px;
}
*/
#career_step .wrap h2 > span:nth-child(2) span{
font-size: 4rem;
letter-spacing: 0;
}
#career_step .wrap p{
font-size: 1.4rem;
line-height: 150%;
margin-bottom: 0.8em;
}
}

/*=============================== about_company ================================*/
.about_company{
position: relative;
left: 50%;
transform: translateX(-50%);
z-index: 2;
width: 1400px;
min-width: 1200px;
margin: 200px 0;
padding: 0 100px 60px;
border-radius: 20px;
background: #FFF;
box-shadow: 0px 0px 16.9px 0px rgba(0, 0, 0, 0.10);
}
.about_company h3{
position: relative;
display: inline-block;
padding: 20px 0 20px 170px;
margin-left: -100px;
margin-top: -50px;
background: url(../images/parts-h3-question.svg) no-repeat left 70px center;
}
.about_company h3::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 8px;
width: 100%;
background: linear-gradient(to right, #2881B5 0%, #34B2C9 50%, #3EDADA 100%);
z-index: 1;
}
.about_company h3 span{
display: inline-block;
font-size: 4.8rem;
font-weight: 700;
line-height: 1;
letter-spacing: 2.4px;
background: linear-gradient(90deg, #1A489D 0%, #3AC8D3 49.4%, #3EDADA 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 12px;
}
.about_company h4{
color: #000;
font-size: 3.2rem;
font-weight: 700;
line-height: 199%;
letter-spacing: 4.8px;
margin-top: 40px;
margin-bottom: 28px;
}
.about_company .wrap p{
color: #000;
font-size: 1.6rem;
font-weight: 400;
line-height: 207%;
letter-spacing: 2.4px;
margin-bottom: 24px;
}
#career_step .about_company .wrap p:last-child{
margin-bottom: 0;
}
.about_company .photo{
margin-top: 80px;
}
.about_company .photo a{
transition: 0.3s;
}

.fancybox-button{
display: none;
}

.about_company .photo .slick-slide{
margin: 0 5px;
}
.about_company .photo a:hover{
opacity: 0.7;
}
.about_company .photo a img{
width: 100%;
height: auto;
}

@media only screen and (max-width: 767px) {
.about_company{
position: relative;
left: initial;
transform: initial;
width: calc(100% - 40px);
min-width: calc(100% - 40px);
margin: 80px auto 100px;
padding: 0 20px 30px;
border-radius: 10px;
}
.about_company h3{
position: relative;
display: inline-block;
padding: 4vw 0;
margin-left: 0;
margin-top: -7vw;
padding-left:10vw;
background: url(../images/parts-h3-question.svg) no-repeat left center;
background-size: auto 50%;
}
.about_company h3::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 4px;
width: 100%;
background: linear-gradient(to right, #2881B5 0%, #34B2C9 50%, #3EDADA 100%);
z-index: 1;
}
.about_company h3 span{
font-size: 6vw;
letter-spacing: 2px;
margin-bottom: 1vw;
}
.about_company h4{
font-size: 1.8rem;
line-height: 150%;
letter-spacing: 2px;
margin-top: 0;
margin-bottom: 10px;
}
.about_company .wrap{
margin-bottom: 20px;
}
.about_company .wrap p{
color: #000;
font-size: 1.4rem;
line-height: 180%;
letter-spacing: 2px;
margin-bottom: 0.8em;
}
.about_company .layout_container img{
width: 100%;
height: auto;
}
.about_company .photo{
display: flex;
flex-wrap: wrap;
gap:4px;
margin-top: 20px;
}
.about_company .photo li{
width: calc((100% - 4px) / 2);
}
.about_company .photo a{
text-decoration: none;
transition: 0.3s;
}
.about_company .photoa:hover{
opacity: 0.7;
}
.about_company .photo figure{
width: calc((100% -16px) / 5);
}
.about_company .photo figure img{
width: 100%;
height: auto;
}
}

/*=============================== annual_income ================================*/
.annual_income{
position: relative;
width: 100%;
max-width: 1920px;
height: auto;
background: linear-gradient(90deg, #FFF -20.78%, #DBFFFC 49.95%, #FFF 120.69%);
padding: 0 0 4px;
margin: auto;
}
.annual_income::after{
position: absolute;
top: 56px;
left: 50%;
transform: translateX(-50%);
content: "";
width: 100%;
max-width: 1920px;
height: auto;
background: url(../images/parts-annual_income.svg) no-repeat center top;
background-size: contain;
aspect-ratio: 1920 / 635;
}
.annual_income .inner{
position: relative;
top: -44px;
z-index: 1;
width: 1200px;
margin: auto;
}
.annual_income h3{
display: flex;
align-items: center;
justify-content: center;
color: #FFF;
font-size: 3.2rem;
font-weight: 700;
line-height: 172%;
width: 533px;
height: 88px;
border-radius: 44px;
background: linear-gradient(90deg, #2881B5 -19.23%, #34B2C9 53.78%, #3EDADA 127.02%);
margin: auto;
}
.annual_income .lead{
color: #1A489D;
text-align: center;
font-size: 1.6rem;
font-weight: 400;
line-height: 180%;
margin-top: 32px;
}
.annual_income figure{
width: 860px;
margin:36px auto 40px;
}
.annual_income ul{
display: flex;
justify-content: center;
gap: 46px;
}
.annual_income ul li{
width: 336px;
background: #FFF;
padding:16px 10px 0;
}
.annual_income ul li h4{
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.4rem;
font-weight: 900;
line-height: 172%; 
letter-spacing: 4.32px;
background: linear-gradient(93deg, #2881B5 15.15%, #34B2C9 56.76%, #3EDADA 98.49%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 30px;
}
.annual_income ul li h4::before{
display: block;
content: "";
width: 20px;
height: 2px;
background: #2881B5;
margin-right: 8px;
}
.annual_income ul li h4::after{
display: block;
content: "";
width: 20px;
height: 2px;
background: #3EDADA;
margin-left: 8px;
}
.annual_income ul li table {
width: 100%;
border-collapse:collapse;
}
.annual_income ul li table thead th{
padding: 0 0 28px 110px;
}
.annual_income ul li:nth-child(1) table thead th{
background: url(../images/icon/icon-annua-income01.svg) no-repeat left top;
}
.annual_income ul li:nth-child(2) table thead th{
background: url(../images/icon/icon-annua-income02.svg) no-repeat left top;
}
.annual_income ul li:nth-child(3) table thead th{
background: url(../images/icon/icon-annua-income03.svg) no-repeat left top;
}
.annual_income ul li table thead th span:nth-child(1){
display: block;
color:  #1A489D;
font-size: 2.4rem;
font-weight: 700;
line-height: 1;
letter-spacing: 4px;
}
.annual_income ul li table thead th span:nth-child(2){
color:  #1A489D;
font-size: 7rem;
font-weight: 700;
line-height: 1;
letter-spacing: 4px;
}
.annual_income ul li table thead th span:nth-child(3){
color:  #1A489D;
font-size: 2.4rem;
font-weight: 700;
line-height: 1;
letter-spacing: 4px;
}
.annual_income ul li table tbody th{
width: 50%;
color: #1A489D;
font-size: 1.6rem;
font-weight: 500;
line-height: 1;
letter-spacing: 0.48px;
padding: 12px 10px;
border-top: 2px solid #D9D9D9;
}
.annual_income ul li table tbody td{
width: 50%;
text-align: right;
color: #1A489D;
font-size: 2.4rem;
font-weight: 700;
line-height: 1;
letter-spacing: 1.92px;
padding: 12px 10px;
border-top: 2px solid #D9D9D9;
}
@media only screen and (max-width: 767px) {
.annual_income{
position: relative;
width: 100%;
max-width: 100%;
min-width: 100%;
height: auto;
background: linear-gradient(90deg, #FFF -20.78%, #DBFFFC 49.95%, #FFF 120.69%);
padding: 0 0 40px;
margin: auto;
}
.annual_income::after{
display: none;
}
.annual_income figure::after{
position: absolute;
top: -51px;
left: 0;
transform: none;
content: "";
width: 100%;
height: 40vw;
background: url(../images/parts-annual_income.svg) no-repeat center top;
background-size: 100% auto;
}
.annual_income .inner{
position: relative;
top: -7.5vw;
width: 100%;
padding: 0 20px;
}
.annual_income h3{
font-size: 5vw;
line-height: 150%;
width: 100%;
height: 15vw;
border-radius: 15vw;
}
.annual_income .lead{
text-align: left;
font-size: 1.4rem;
line-height: 150%;
margin-top: 30px;
}
.annual_income .lead br{
display: none;
}
.annual_income figure{
width: 100%;
margin:10vw auto 40px;
}
.annual_income figure img{
width: 100%;
height: auto;
}
.annual_income ul{
display: block;
}
.annual_income ul li{
width: 100%;
padding:6vw 10px 0;
margin-bottom: 16px;
}
.annual_income ul li h4{
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 5vw;
line-height: 150%;
letter-spacing: 3px;
margin-bottom: 6vw;
}
.annual_income ul li table thead th{
padding: 0 0 6vw 26vw;
}
.annual_income ul li:nth-child(1) table thead th{
background-size: auto 20vw;
}
.annual_income ul li:nth-child(2) table thead th{
background-size: auto 20vw;
}
.annual_income ul li:nth-child(3) table thead th{
background-size: auto 20vw;
}
.annual_income ul li table thead th span:nth-child(1){
font-size: 5vw;
}
.annual_income ul li table thead th span:nth-child(2){
font-size: 16vw;
letter-spacing: 2px;
}
.annual_income ul li table thead th span:nth-child(3){
font-size: 5vw;
}
.annual_income ul li table tbody th{
width: 40%;
font-size:4vw;
padding: 4vw 6vw;
}
.annual_income ul li table tbody td{
width: 60%;
font-size: 6vw;
letter-spacing: 1px;
padding: 4vw 6vw;
border-top: 2px solid #D9D9D9;
}
}

/*=============================== interview ================================*/
#interview{
position: relative;
width: 100%;
max-width: 1920px;
min-width: 1280px;
padding: 180px 0 180px;
margin: auto;
background: #fff;
}
#interview::after{
position: absolute;
bottom: -560px;
left: 0;
content: "";
width: 1920px;
height: 1619px;
background: url(../images/parts-line.svg) no-repeat;
}
#interview .inner{
position: relative;
z-index: 1;
width: 1200px;
margin: auto;
}
#interview h2{
margin-bottom: 40px;
}
#interview h2 > span:nth-child(1){
position: relative;
display: flex;
align-items: center;
color:  #1A489D;
font-size: 2rem;
font-weight: 700;
line-height: 1;
letter-spacing: 1px;
margin-bottom: 12px;
}
/*
#interview h2 > span:nth-child(1)::before{
display: block;
content: "";
width: 15px;
height: 15px;
background: url(../images/icon/icon-h2.svg) no-repeat;
margin-right: 6px;
}
*/
#interview h2 > span:nth-child(2){
font-size: 6rem;
font-weight: 700;
line-height: 100%;
background: linear-gradient(90deg, #2881B5 1.46%, #34B2C9 30.36%, #3EDADA 59.35%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
-webkit-text-stroke: 0.5px transparent;
transform: translateZ(0);
letter-spacing: 0.02em;
text-shadow: none;
}
#interview .lead{
color: #000;
font-size: 1.6rem;
font-weight: 400;
line-height: 180%;
margin-bottom: 80px;
}
#interview .staff{
margin-bottom: 100px;
}
#interview .staff .card{
position: relative;
width: 1200px;
height: 512px;
border-radius: 20px 20px 20px 0px;
padding: 88px 0 0 114px;
margin-bottom: 60px;
cursor: pointer;
transition: 0.3s;
}
/*広瀬さん*/
#interview .staff:nth-of-type(1) .card{
background: url(../images/staff-img01.jpg) no-repeat center;
background-size: cover;
}
/*野口さん*/
#interview .staff:nth-of-type(2) .card{
background: url(../images/staff-img02.jpg) no-repeat center;
background-size: cover;
}
#interview .staff .card:hover{
opacity: 1;
animation: card 0.6s 1;
}
@keyframes card {
  0%, 100% { opacity: 1;}
  50% { opacity: 0.5; }
}
#interview .card h3{
position: relative;
z-index: 1;
color: #FFF;
font-weight: 700;
letter-spacing: 5.76px;
margin-bottom: 12px;
}
#interview .card h3 > span:nth-child(1){
font-size: 4.8rem;
line-height: 170%;
}
#interview .card h3 > span:nth-child(2){
font-size: 24px;
line-height: 170%;
}
#interview .card > span{
display: inline-block;
position: relative;
z-index: 1;
}
#interview .card > span:nth-of-type(1),#interview .card > span:nth-of-type(2){
color: #FFF;
font-size: 2rem;
font-weight: 700;
line-height: 100%;
letter-spacing: 2.4px;
background: rgba(0, 0, 0, 0.44);
margin-bottom: 10px;
padding: 8px 20px;
}
#interview .card > span:nth-of-type(3){
color: #000;
font-size: 2rem;
font-weight: 500;
line-height: 100%;
letter-spacing: 2.4px;
background: rgba(255, 251, 251, 0.88);
padding:8px 20px;
}

#interview .staff h4.ttl{
position: absolute;
bottom: -2px;
left: 0;
display: flex;
align-items: flex-end;
z-index: 1;
width: 600px;
height: 100px;
color: #1A489D;
font-size: 3.5rem;
font-weight: 900;
line-height: 170%;
letter-spacing: 2.4px;
background: #fff;
border-radius: 0 30px 0 0;
margin-top: -99px;
}
#interview .staff .faq{
margin-bottom: 150px;
}
#interview .staff .faq .layout_container{
display: flex;
flex-wrap: wrap;
gap: 40px 52px;
}
#interview .staff .faq dl{
width: calc((100% - 52px) / 2);
}
#interview .staff .faq dl dt{
color: #FFF;
font-size: 2rem;
font-weight: 700;
line-height: 170%;
letter-spacing: 2.4px;
margin-bottom: 24px;
padding: 16px 20px;
background: linear-gradient(90deg, #2881B5 0%, #34B2C9 49.92%, #3EDADA 100%);
}
#interview .staff .faq dl dd{
color: #000;
font-size: 1.6rem;
font-weight: 400;
line-height: 170%;
letter-spacing: 2px;
}
#interview #accordion .card .brush{
display: block;
position: absolute;
top: 36px;
right: 71px;
width: 63px;
height: 63px;
background: url(../images/icon/icon-plus.svg) no-repeat center;
background-size: 63px;
transition: transform 0.5s ease;
transform: rotate(0deg);
}
#interview #accordion .card.open .brush{
background: url(../images/icon/icon-minus.svg) no-repeat center;
transform: rotate(180deg);
}
#interview .photo{
width: 1920px;
display: flex;
margin-top: 80px;
margin-left: -360px;
}
@media only screen and (max-width: 767px) {
#interview{
position: relative;
width: 100%;
max-width: 100%;
min-width: 100%;
padding: 80px 0 80px;
}
#interview::after{
position: absolute;
bottom: -30vw;
left: 0;
content: "";
width: 100%;
height: 78vw;
background: url(../images/parts-line.svg) no-repeat;
background-size: 100% auto;
}
#interview .inner{
width: 100%;
padding: 0 20px;
}
#interview h2{
margin-bottom: 40px;
}
#interview h2 > span:nth-child(1){
font-size: 1.8rem;
margin-bottom: 12px;
}
/*
#interview h2 > span:nth-child(1)::before{
display: block;
content: "";
width: 14px;
height: 18px;
background: url(../images/icon/icon-h2.svg) no-repeat bottom;
background-size: 14px;
margin-right: 6px;
}
*/
#interview h2 > span:nth-child(2){
font-size: 4rem;
letter-spacing: 0;
}
#interview .lead{
font-size: 1.4rem;
margin-bottom: 50px;
}
#interview .staff .card{
position: relative;
width: 100%;
height: auto;
border-radius: 20px 20px 20px 0px;
padding:30% 15px 120px 15px;
}
/*広瀬さん*/
#interview .staff:nth-of-type(1) .card{
background: url(../images/staff-img01.jpg) no-repeat top right 30%;
background-size: cover;
}
/*野口さん*/
#interview .staff:nth-of-type(2) .card{
background: url(../images/staff-img02.jpg) no-repeat top right 24%;
background-size: cover;
}
#interview .staff .card{
position: relative;
width: 100%;
height: auto;
border-radius: 20px 20px 20px 0px;
padding:30% 15px 120px 15px;
}
#interview .card h3{
letter-spacing: 3px;
margin-bottom: 8px;
}
#interview .card h3 > span:nth-child(1){
font-size: 3rem;
}
#interview .card h3 > span:nth-child(2){
font-size: 1.8rem;
}
#interview .card > span:nth-of-type(1),#interview .card > span:nth-of-type(2){
font-size: 1.3rem;
letter-spacing: 3px;
line-height: 1.3;
margin-bottom: 6px;
padding: 4px 8px;
}
#interview .card > span:nth-of-type(3){
font-size: 1.5rem;
letter-spacing: 3px;
padding: 6px 8px;
}
#interview .staff {
margin-bottom: 50px;
}
#interview .staff .card figure{
display: none;
}
#interview .staff .card figure img{
object-fit: cover;
width:100%;
height: 100%;
}

#interview .staff h4.ttl{
position: absolute;
align-items: center;
width: 90%;
height:80px;
font-size: 2rem;
line-height: 130%;
letter-spacing: 2px;
border-radius: 0 15px 0 0;
margin-top: -78px;
}
#interview .staff .faq{
margin-top: 30px;
margin-bottom: 30px;
}
#interview .staff .faq .layout_container{
display: block;
}
#interview .staff .faq dl{
width:100% ;
}
#interview .staff .faq dl dt{
font-size: 1.4rem;
line-height: 150%;
letter-spacing: 2px;
margin-top: 24px;
margin-bottom: 8px;
padding: 8px 10px;
}
#interview .staff .faq dl:first-of-type dt{
margin-top: 0;
}
#interview .staff .faq dl dd{
font-size: 1.4rem;
line-height: 150%;
}
#interview #accordion .card .brush {
top: 24px;
right: 24px;
width: 32px;
height: 32px;
background: url(../images/icon/icon-plus.svg) no-repeat center;
background-size: contain;
}
#interview #accordion .card.open .brush {
background: url(../images/icon/icon-minus.svg) no-repeat center;
background-size: contain;
}
#interview .photo{
width: calc(100% + 40px);
display: flex;
margin-top: 30px;
margin-left: -20px;
}
#interview .photo img{
width: auto;
height: 130px;
}
}

/*=============================== contact ================================*/
.contact{
width: 100%;
margin: auto;
background: url(../images/bg-contact.png) no-repeat top 50px center;
}
.contact .inner{
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 1200px;
height: 270px;
margin: auto;
border-radius: 30px;
background: linear-gradient(90deg, #4264D2 0%, #5B91E2 48.08%, #B3DEF5 100%);
background-blend-mode: darken;
}
.contact .inner h2{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 30px;
}
.contact .inner h2 span:nth-child(1){
width: 100%;
color: #8ECDEF;
text-align: center;
font-size: 1.6rem;
font-style: normal;
font-weight: 350;
line-height: 172%; 
letter-spacing: 1.92px;
}
.contact .inner h2 span:nth-child(2){
color: #FFF;
text-align: center;
font-size: 3.3rem;
font-weight: 700;
line-height: 172%;
letter-spacing: 8.91px;
}
.contact .inner ul{
width: 100%;
display: flex;
justify-content: center;
gap: 20px;
}
.contact .inner ul li{
width: 191px;
height: 65px;
}
.contact .inner ul li:nth-child(1){
background: url(../images/contact-requirements.svg) no-repeat;
}
.contact .inner ul li:nth-child(2){
background: url(../images/contact-entry.svg) no-repeat;
}
.contact .inner ul li a{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: #FFF;
font-size: 1.6rem;
font-weight: 500;
line-height: 150%;
letter-spacing: 0.96px;
text-decoration: none;
transition: 0.3s;
}
.contact .inner ul li a:hover{
opacity: 0.7;
}
@media only screen and (max-width: 767px) {
.contact{
width: 100%;
padding: 0 20px;
background: url(../images/bg-contact.png) no-repeat top 50px center;
}
.contact .inner{
display: block;
width: 100%;
height: auto;
border-radius: 15px;
padding: 40px 0 30px;
}
.contact .inner h2{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 40px!important;
}
.contact .inner h2 span:nth-child(1){
width: 100%;
font-size: 1.6rem;
line-height: 100%; 
letter-spacing: 2px;
margin-bottom: 12px;
}
.contact .inner h2 span:nth-child(2){
color: #FFF;
text-align: center;
font-size: 2rem;
font-weight: 700;
line-height: 100%; 
letter-spacing: 2px;
}
.contact .inner ul{
display:block;
}
.contact .inner ul li{
width: 191px;
height: 65px;
margin: auto;
margin-bottom: 10px;
}
.contact .inner ul li a{
font-size: 1.6rem;
}
}

/*=============================== numbers ================================*/
#numbers{
width: 100%;
margin: auto;
padding:180px 0;
}
#numbers .inner{
width: 1200px;
margin: auto;
}
#numbers h2{
margin-bottom: 60px;
}
#numbers h2 > span:nth-child(1){
position: relative;
display: flex;
align-items: center;
color:  #1A489D;
font-size: 2rem;
font-weight: 700;
line-height: 1;
letter-spacing: 1px;
margin-bottom: 12px;
}
/*
#numbers h2 > span:nth-child(1)::before{
display: block;
content: "";
width: 15px;
height: 15px;
background: url(../images/icon/icon-h2.svg) no-repeat;
margin-right: 6px;
}
*/
#numbers h2 > span:nth-child(2){
font-size: 6rem;
font-weight: 700;
line-height: 100%;
background: linear-gradient(90deg, #2881B5 1.46%, #34B2C9 30.36%, #3EDADA 59.35%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
-webkit-text-stroke: 0.5px transparent;
transform: translateZ(0);
letter-spacing: 0.02em;
text-shadow: none;
}
#numbers .parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 10px;
}
#numbers .grid{
position: relative;
border-radius: 10px;
color:  #1A489D;
font-size: 3.6rem;
font-weight: 700;
letter-spacing: 1.2px;
white-space: nowrap;
}
#numbers .grid::before{
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
content: "";
width: 102px;
height: 4px;
background: #2C68D5;
}
#numbers .parent .num_tx01{
display: block;
color: #000;
font-size: 2.4rem;
font-weight: 500;
line-height: 100%;
letter-spacing: 0.72px;
margin: 4px 0;
}
#numbers .parent .num_tx02{
display: inline-block;
color:  #1A489D;
font-feature-settings: 'vert' on;
font-size: 3.2rem;
font-weight: 700;
line-height: 100%;
letter-spacing: 0.96px;
writing-mode: vertical-rl;
margin-right: 8px;
}
#numbers .parent .num_tx03{
display: inline-block;
color:  #1A489D;
font-size: 8rem;
font-weight: 700;
line-height: 100%;
letter-spacing: 2.4px;
margin-right: 8px;
margin-bottom: 4px;
}

#numbers .parent .num_tx04{
display: inline-block;
width: 2.2em;
color:  #1A489D;
font-size: 2.9rem;
font-weight: 700;
line-height: 120%;
letter-spacing: 0.87px;
margin-right: 8px;
}
#numbers .parent .num_tx05{
display: inline-flex;
align-items: center;
color:  #1A489D;
font-size: 4rem;
font-weight: 700;
letter-spacing: 0.96px;
position: relative;
top: -12px;
margin-right: 0;
}

#numbers .grid01 {
position: relative;
height: 240px;
grid-column-start: 1;
grid-row-start: 1;
background: #E2EFEE url(../images/numbers-img01.svg) no-repeat left 64px center;
background-size: auto 204px;
}
#numbers .grid01 p{
position: absolute;
top: 50%;
right: 90px;
transform: translateY(-50%);
}

#numbers .grid02 {
  font-size: 3.2rem;
  position: relative;
  height: 500px;
  grid-row: span 2 / span 2;
  text-align: center;
  grid-column-start: 2;
  grid-row-start: 1;
  background: #E2EFEE url(../images/numbers-img02.svg) no-repeat center;
  background-size: auto 470px;
}
#numbers .grid02 p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  line-height: 1.2;
}
#numbers .grid02 .num_tx01 {
  display: block;
  color: #1A489D;
  font-size: 2.4rem;
}
#numbers .grid02 .line1 {
  display: block;
  font-size: 3rem;
  margin-bottom: 0.2em;
}
#numbers .grid02 .line2 {
  display: block;
  font-size: 6rem;
  font-weight: bold;
}

#numbers .grid03 {
height: 240px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
grid-column-start: 1;
grid-row-start: 2;
}
#numbers .grid03 .grid:nth-child(1){
position: relative;
background: #E2EFEE url(../images/numbers-img03.svg) no-repeat center;
background-size: auto 100%;
}
#numbers .grid03 .grid:nth-child(1) .num_tx01{
text-align: center;
}
#numbers .grid03 .grid:nth-child(1) p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

#numbers .grid03 .grid:nth-child(2){
position: relative;
background: #E2EFEE url(../images/numbers-img04.svg) no-repeat center;
background-size: auto 195px;
}
#numbers .grid03 .grid:nth-child(2) .num_tx01{
text-align: center;
}
#numbers .grid03 .grid:nth-child(2) .num_tx03{
margin-right: 0;
}

#numbers .grid03 .grid:nth-child(2) p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

#numbers .grid04 {
position: relative;
height: 500px;
grid-row: span 1 / span 2;
grid-column-start: 1;
grid-row-start: 3;
background: #E2EFEE url(../images/numbers-img05.svg) no-repeat bottom center;
background-size: 100% auto;
}
#numbers .grid04 p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
#numbers .grid04 .num_tx01{
text-align: center;
}

#numbers .grid05 {
position: relative;
grid-column-start: 2;
grid-row-start: 3;
background: #E2EFEE url(../images/numbers-img06.svg) no-repeat right 64px center;
background-size: auto 136px;
}
#numbers .grid05 p{
position: absolute;
top: 50%;
left: 90px;
transform: translateY(-50%);
}
#numbers .grid05 .num_tx01{
text-align: center;
}

#numbers .grid06 {
position: relative;
grid-column-start: 2;
grid-row-start: 4;
background: #E2EFEE url(../images/numbers-img07.svg) no-repeat left 64px center;
background-size: auto 120px;
}
#numbers .grid06 p{
position: absolute;
top: 50%;
right: 90px;
transform: translateY(-50%);
}
@media only screen and (max-width: 767px) {
#numbers{
width: 100%;
padding:80px 0 50px;
}
#numbers .inner{
width: 100%;
padding: 0 20px;
}
#numbers h2{
margin-bottom: 40px;
}
#numbers h2 > span:nth-child(1){
font-size: 1.8rem;
margin-bottom: 12px;
}
/*
#numbers h2 > span:nth-child(1)::before{
display: block;
content: "";
width: 14px;
height: 18px;
background: url(../images/icon/icon-h2.svg) no-repeat bottom;
background-size: 14px;
margin-right: 6px;
}
*/
#numbers h2 > span:nth-child(2){
font-size: 4rem;
letter-spacing: 0;
}
#numbers .parent {
display: block;
}
#numbers .grid{
aspect-ratio: 1/1;
border-radius: 10px;
font-size: 4.5vw;
line-height: 1.3;
margin-bottom: 20px;
}
#numbers .grid::before{
content: "";
width: 40%;
height: 3px;
}
#numbers .parent .num_tx01{
font-size: 4.5vw;
margin: 1vw 0;
}
#numbers .parent .num_tx02{
font-size: 7vw;
margin-right: 1vw;
}
#numbers .parent .num_tx03{
font-size: 15vw;
letter-spacing: 0;
margin-right: 1vw;
margin-bottom: 1vw;
}
#numbers .parent .num_tx04{
width: 2em;
font-size: 6vw;
margin-right: 1vw;
}
#numbers .parent .num_tx05{
font-size: 8vw;
top: -3vw;
}

#numbers .grid01 {
aspect-ratio: 2 / 1;
position: relative;
height: auto;
background: #E2EFEE url(../images/numbers-img01.svg) no-repeat  left 7vw center;
background-size: auto 80%;
}
#numbers .grid01 p{
position: absolute;
top: 50%;
right: 7vw;
transform: translateY(-50%);
}

#numbers .grid02 {
position: relative;
height: auto;
font-size: 16px;
background: #E2EFEE url(../images/numbers-img02.svg) no-repeat center;
background-size: 80% auto;
text-align: center;
}
#numbers .grid02 p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
line-height: 1.3;
width: 90%;
}
#numbers .grid02 .num_tx01 {
display: block;
color: #1A489D;
}
#numbers .grid02 .line2{
line-height: 1;
letter-spacing: 0;
font-size: 11vw;
}
	
#numbers .grid03 {
height: auto;
display: flex;
}
#numbers .grid03 .grid:nth-child(1){
width: 100%;
position: relative;
background: #E2EFEE url(../images/numbers-img03-sp.svg) no-repeat center;
background-size: auto 100%;
}
#numbers .grid03 .grid:nth-child(1) .num_tx01{
text-align: center;
}
#numbers .grid03 .grid:nth-child(1) p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

#numbers .grid03 .grid:nth-child(2){
width: 100%;
background: #E2EFEE url(../images/numbers-img04.svg) no-repeat center;
background-size: auto 70%;
}
#numbers .grid03 .grid:nth-child(2) .num_tx01{
text-align: center;
}
#numbers .grid03 .grid:nth-child(2) .num_tx03{
margin-right: 0;
}

#numbers .grid03 .grid:nth-child(2) p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

#numbers .grid04 {
height: auto;
background: #E2EFEE url(../images/numbers-img05.svg) no-repeat bottom center;
background-size: contain
}
#numbers .grid04 p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#numbers .grid04 .num_tx01{
text-align: left;
}

#numbers .grid05 {
aspect-ratio: 2 / 1;
background: #E2EFEE url(../images/numbers-img06.svg) no-repeat right 7vw center;
background-size: auto 58%;
}
#numbers .grid05 p{
position: absolute;
top: 50%;
left: 7vw;
right:initial ;
transform: translateY(-50%);
}
#numbers .grid05 .num_tx01{
text-align: left;
}

#numbers .grid06 {
aspect-ratio: 2 / 1;
background: #E2EFEE url(../images/numbers-img07.svg) no-repeat left 7vw center;
background-size: auto 48%;
}
#numbers .grid06 p{
position: absolute;
top: 50%;
right:7vw;
transform: translateY(-50%);
}
}

/*=============================== environment ================================*/
#environment{
width: 100%;
height: 1830px;
margin: auto;
padding:180px 0 80px;
background: url(../images/bg-enironment.jpg) no-repeat top center;
}
#environment .inner{
width: 1200px;
margin: auto;
}
#environment h2{
margin-bottom: 40px;
}
#environment h2 > span:nth-child(1){
position: relative;
display: flex;
align-items: center;
color:  #fff;
font-size: 2rem;
font-weight: 700;
line-height: 1;
letter-spacing: 1px;
margin-bottom: 12px;
}
/*
#environment h2 > span:nth-child(1)::before{
display: block;
content: "";
width: 15px;
height: 15px;
background: url(../images/icon/icon-h2-w.svg) no-repeat;
margin-right: 6px;
}
*/
#environment h2 > span:nth-child(2){
color: #FFF;
font-size: 6rem;
font-weight: 700;
line-height: 100%;
}
#environment .lead{
color: #fff;
font-size: 1.6rem;
font-weight: 500;
line-height: 180%;
letter-spacing: 2.4px;
margin-bottom: 80px;
}
#environment .inner ul.col3{
width: 891px;
display: flex;
flex-wrap: wrap;
gap: 36px;
margin:0 auto 120px;
}
#environment .inner ul.col4{
display: flex;
flex-wrap: wrap;
gap: 36px;
margin:0 auto 120px;
}
#environment .inner ul:nth-of-type(1) li{
width: 273px;
background: #fff;
padding: 0 24px 30px;
}
#environment .inner ul:nth-of-type(1) li figure{
display: flex;
align-items: center;
justify-content: center;
height:116px;
}
#environment .inner ul:nth-of-type(1) li h3{
color: #2C68D5;
font-size: 2rem;
font-weight: 700;
line-height: 100%;
letter-spacing: 3px;
margin-bottom: 24px;
text-align: center;
}
#environment .inner ul:nth-of-type(1) li p{
color: #000;
font-size: 1.4rem;
font-weight: 400;
line-height: 170%;
letter-spacing: 2px;
}
#environment .inner ul:nth-of-type(2){
display: flex;
flex-wrap: wrap;
gap: 35px;
margin-bottom: 120px;
}
#environment .inner ul:nth-of-type(2) li{
width: calc((100% - 105px) / 4);
}
#environment .inner ul:nth-of-type(2) li a{
text-decoration: none;
transition: 0.3s;
}
#environment .inner ul:nth-of-type(2) li a:hover{
opacity: 0.7;
}
#environment .inner ul:nth-of-type(2) li p{
color: #FFF;
font-size: 2rem;
font-weight: 700;
line-height: 100%;
letter-spacing: 3px;
text-align: center;
margin-top: 24px;
}
#environment .inner ul:nth-of-type(2) li img{
width: 100%;
height: auto;
}
@media only screen and (max-width: 767px) {
#environment{
width: 100%;
height: auto;
padding:70% 0 80px;
background:#9c9b96  url(../images/bg-enironment-sp.jpg) no-repeat top center;
background-size: 100% auto;
}
#environment .inner{
width: 100%;
padding: 0 20px;
}
#environment h2{
margin-bottom: 30px;
}
#environment h2 > span:nth-child(1){
font-size: 1.8rem;
margin-bottom: 12px;
}
/*
#environment h2 > span:nth-child(1)::before {
display: block;
content: "";
width: 14px;
height: 18px;
background: url(../images/icon/icon-h2-w.svg) no-repeat bottom;
background-size: 14px;
margin-right: 6px;
}
*/
#environment h2 > span:nth-child(2){
font-size: 3.6rem;
letter-spacing: 0;
}
#environment .lead{
font-size: 1.4rem;
margin-bottom: 60px;
}
#environment .inner ul.col3{
width: 100%;
gap: 10px;
margin:0 auto 80px;
}
#environment .inner ul.col4{
width: 100%;
gap: 10px;
margin:0 auto 80px;
}
#environment .inner ul:nth-of-type(1) li{
width: calc((100% - 10px) / 2);
background: #fff;
padding: 0 15px 15px;
}
#environment .inner ul:nth-of-type(1) li figure{
display: flex;
align-items: center;
justify-content: center;
}
#environment .inner ul:nth-of-type(1) li figure img{
width: auto;
height:60px;
}
#environment .inner ul:nth-of-type(1) li h3{
font-size: 1.6rem;
line-height: 100%;
letter-spacing: 2px;
margin-bottom: 16px;
}
#environment .inner ul:nth-of-type(1) li p{
font-size: 1.2rem;
line-height: 150%;
letter-spacing: 1px;
}
#environment .inner ul:nth-of-type(2){
width: 100%;
gap: 10px;
margin-bottom: 0;
}
#environment .inner ul:nth-of-type(2) li{
width:100%;
width: calc((100% - 10px) / 2);
}
#environment .inner ul:nth-of-type(2) li a{
text-decoration: none;
transition: 0.3s;
}
#environment .inner ul:nth-of-type(2) li a:hover{
opacity: 0.7;
}
#environment .inner ul:nth-of-type(2) li p{
font-size: 1.6rem;
margin: 10px 0 20px;
}
}

/*=============================== requirements ================================*/
#requirements{
width: 100%;
margin: auto;
padding:176px 0 0; 
background: linear-gradient(180deg,#FFF 0%, #FFF 252px,#DBFFFC 252px,#DBFFFC 50.88%, #FFF 100%);
}
#requirements .inner{
width: 1200px;
margin: auto;
}
#requirements h2{
text-align: center;
margin-bottom: 60px;
}
#requirements h2 > span:nth-child(1){
position: relative;
display: flex;
align-items: center;
justify-content: center;
color:  #1A489D;
font-size: 2rem;
font-weight: 700;
line-height: 1;
letter-spacing: 1px;
margin-bottom: 12px;
}
/*
#requirements h2 > span:nth-child(1)::before{
display: block;
content: "";
width: 15px;
height: 15px;
background: url(../images/icon/icon-h2.svg) no-repeat;
margin-right: 6px;
}
*/
#requirements h2 > span:nth-child(2){
font-size: 6rem;
font-weight: 700;
line-height: 100%;
background: linear-gradient(90deg, #2881B5 1.46%, #34B2C9 30.36%, #3EDADA 59.35%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
-webkit-text-stroke: 0.5px transparent;
transform: translateZ(0);
letter-spacing: 0.02em;
text-shadow: none;
}
#requirements table{
width: 100%;
}
#requirements table caption{
color: #000;
font-size: 2rem;
font-weight: 500;
line-height: 1;
letter-spacing: 3px;
margin-bottom: 50px;
}
#requirements table caption::before,
#requirements table caption::after {
content: "";
display: inline-block;
width: 15px;
height: 15px;
background: url(../images/icon/icon-caption.svg) no-repeat center center;
background-size: contain;
margin: 0 0.5em;
}
#requirements table tbody th{
position: relative;
color: #000;
font-size: 1.6rem;
font-weight: 500;
line-height: 100%;
letter-spacing: 2.4px;
text-align: left;
width:200px;
padding: 28px 0;
vertical-align: top;
}
#requirements table tbody th::before{
position: absolute;
top: 0;
left: 0;
content: "";
width: 200px;
height: 4px;
background: #2C68D5;
}
#requirements table tbody td{
position: relative;
color: #000;
font-size: 1.6rem;
font-weight: 400;
line-height: 194%;
letter-spacing: 1.6px;
padding: 24px;
vertical-align: top;
}
#requirements table tbody td::before{
position: absolute;
top: 2px;
left: 0;
content: "";
width: 100%;
height: 1px;
background: #B3CEFF;
}
#requirements table tbody tr:last-of-type th::after{
position: absolute;
bottom: 0;
left: 0;
content: "";
width: 200px;
height: 4px;
background: #2C68D5;
}
#requirements table tbody tr:last-of-type td::after{
position: absolute;
bottom: 2px;
left: 0;
content: "";
width: 100%;
height: 1px;
background: #B3CEFF;
}
@media only screen and (max-width: 767px) {
#requirements{
width: 100%;
margin: auto;
padding:80px 0 80px; 
background: linear-gradient(180deg,#FFF 0%, #FFF 230px,#DBFFFC 230px,#DBFFFC 50.88%, #FFF 100%);
}
#requirements .inner{
width: 100%;
}
#requirements h2{
text-align: center;
margin-bottom: 30px;
}
#requirements h2 > span:nth-child(1){
font-size: 1.8rem;
margin-bottom: 12px;
}
/*
#message h2 > span:nth-child(1)::before{
display: block;
content: "";
width: 14px;
height: 18px;
background: url(../images/icon/icon-h2.svg) no-repeat bottom;
background-size: 14px;
margin-right: 6px;
}
*/
#requirements h2 > span:nth-child(2){
font-size: 3.6rem;
letter-spacing: 0;
}
#requirements table{
width: 100%;
}
#requirements table caption{
font-size: 1.8rem;
letter-spacing: 3px;
margin-bottom: 30px;
}
#requirements table caption::before,
#requirements table caption::after {
content: "";
display: inline-block;
width: 18px;
height: 18px;
background: url(../images/icon/icon-caption.svg) no-repeat center center;
background-size: contain;
margin: 0 0.5em ;
}
#requirements table tbody th{
font-size: 1.2rem;
letter-spacing: 2.4px;
text-align: left;
width:30%;
padding: 20px 0 20px 20px;
vertical-align: top;
}
#requirements table tbody th::before{
position: absolute;
top: 0;
left: 0;
content: "";
width:100%;
height: 4px;
}
#requirements table tbody td{
font-size: 1.2rem;
line-height: 150%;
padding: 16px 20px 20px 10px;
}
#requirements table tbody tr:last-of-type th::after{
position: absolute;
bottom: 0;
left: 0;
content: "";
width:100%;
height: 4px;
}
}

/*=============================== entry ================================*/
#entry{
width: 100%;
margin: auto;
padding: 180px 0 0;
position: relative;
}
#entry .inner{
width: 1200px;
margin: auto;
overflow: visible;
position: relative;
z-index: 1;
}
#entry h2{
position: relative;
text-align: center;
margin-bottom: 60px;
}
#entry h2 > span:nth-child(1){
position: relative;
display: flex;
align-items: center;
justify-content: center;
color:  #1A489D;
font-size: 2rem;
font-weight: 700;
line-height: 1;
letter-spacing: 1px;
margin-bottom: 12px;
}
#entry h2 > span:nth-child(2){
font-size: 6rem;
font-weight: 700;
line-height: 100%;
background: linear-gradient(90deg, #2881B5 1.46%, #34B2C9 30.36%, #3EDADA 59.35%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
-webkit-text-stroke: 0.5px transparent;
transform: translateZ(0);
letter-spacing: 0.02em;
text-shadow: none;
}
#entry .formmailer-embed {
display: block;
width: 100%;
height: auto;
min-height: auto;
z-index: 1;
position: relative;
}
#entry iframe {
position: static !important;
/*margin-top: 100px;*/
}
/* 電話問い合わせボックス */
#entry .tel_box {
width: 100%;
max-width: 1015px;
display: flex;
margin: auto;
padding: 10px;
background: linear-gradient(90deg, #2881B5 1.46%, #34B2C9 30.36%, #3EDADA 59.35%);
}
#entry .tel_box_inner {
max-width: 1015px;
width: 100%;
margin: auto;
padding: 40px 50px 50px;
text-align: center;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background: #fff;
}
#entry h3.ttl {
width: 100%;
position: relative;
font-size: 2.4rem;
font-weight: 700;
line-height: 1.3;
padding-bottom: 15px;
margin: 0 0 30px;
text-align: left;
}
#entry h3.ttl::before {
position: absolute;
left: 0;
bottom: 0;
content: "";
width: 100%;
height: 5px;
background: linear-gradient(90deg,rgba(40, 129, 181, 1) 0%, rgba(40, 129, 181, 1) 5%, rgba(62, 218, 218, 1) 5%, rgba(62, 218, 218, 1) 100%);
}
#entry p.tel {
margin: 0 30px;
}
#entry p.tel a {
font-family: "Roboto Condensed", sans-serif;
background: url(../images/icon/icon-tel.svg) no-repeat 0 center;
background-size: 40px auto;
padding: 5px 5px 5px 60px;
font-size: 55px;
font-weight: bold;
color: #1A489D;
text-decoration: none;
letter-spacing: 0;
display: block;
line-height: 50px;
}
#entry p.adr {
text-align: left;
float: left;
width: 380px;
margin: 0px 15px;
}
/*
@media (max-width: 480px) {
#entry .tel_box_outer p.tel a {
font-size: 20px;    
padding-left: 30px; 
white-space: nowrap; 
}
}
*/
@media only screen and (max-width: 767px) {
#entry{
width: 100%;
margin: auto;
padding: 80px 0 0;
position: relative;
}
#entry .inner {
width: 100%;
}
#entry h2{
position: relative;
text-align: center;
margin-bottom: 30px;
}
#entry h2 > span:nth-child(1){
font-size: 1.8rem;
margin-bottom: 12px;
}
#entry h2 > span:nth-child(2){
font-size: 3.6rem;
letter-spacing: 0;
}
#entry .tel_box_outer {
padding: 0 20px;
box-sizing: border-box;
}
#entry .tel_box {
width: 100%;
box-sizing: border-box;
flex-direction: column; /* ← 追加（スマホでも保険として） */
}
#entry .tel_box_inner {
padding: 30px 20px;
width: 100%;
box-sizing: border-box;
}
#entry h3.ttl {
font-size: 1.8rem;
margin-bottom: 20px;
text-align: center;
}
#entry h3.ttl::before {
height: 3px;
}
#entry .tel_box_outer p.tel a {
font-size: 24px;
padding-left: 30px;
background-size: 20px auto;
line-height: 30px;
white-space: normal;
word-break: break-word;
box-sizing: border-box;
}
#entry p.tel {
margin: 0 10px 10px;
}
#entry .tel_box_outer {
overflow-x: hidden;
}
#entry p.adr {
width: 100%;
margin: 0;
float: none;
text-align: center;
font-size: 1.3rem;
}
}
/*=============================== message ================================*/
#message{
width: 100%;
max-width: 1920px;
min-width: 1280px;
margin: auto;
padding:180px 0 377px;
background: url(../images/bg-message.jpg) no-repeat top 262px center ,url(../images/bg-bottom-message.jpg) no-repeat bottom center;
}
#message .inner{
width: 1200px;
margin: auto;
}
#message .inner .ceo{
height: 712px;
}
#message h2{
margin-bottom: 60px;
}
#message h2 > span:nth-child(1){
position: relative;
display: flex;
align-items: center;
color:  #1A489D;
font-size: 2rem;
font-weight: 700;
line-height: 1;
letter-spacing: 1px;
margin-bottom: 12px;
}
/*
#message h2 > span:nth-child(1)::before{
display: block;
content: "";
width: 15px;
height: 15px;
background: url(../images/icon/icon-h2.svg) no-repeat;
margin-right: 6px;
}
*/
#message h2 > span:nth-child(2){
font-size: 6rem;
font-weight: 700;
line-height: 100%;
background: linear-gradient(90deg, #2881B5 1.46%, #34B2C9 30.36%, #3EDADA 59.35%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
-webkit-text-stroke: 0.5px transparent;
transform: translateZ(0);
letter-spacing: 0.02em;
text-shadow: none;

}
#message .lead{
margin-top: 280px;
}
#message .lead span{
display: inline-block;
color: #FFF;
font-size: 3.2rem;
font-weight: 700;
line-height: 100%;
letter-spacing: 4.8px;
background: #1A489D;
padding: 8px 12px;
margin-bottom: 20px;
}
#message .author span:nth-child(1){
color: #FFF;
font-family: "Noto Sans JP";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 194%; /* 31.04px */
letter-spacing: 1.6px;
margin-right:20px ;
}
#message .author span:nth-child(2){
color: #FFF;
font-family: "Noto Sans JP";
font-size: 27px;
font-style: normal;
font-weight: 500;
line-height: 194%; /* 52.38px */
letter-spacing: 2.7px;
}
#message .message_box{
width: 100%;
background: linear-gradient(122deg, #2881B5 -10.65%, #34B2C9 39.35%, #3EDADA 89.5%);
padding: 150px 0;
}
#message .layout_container{
margin-left: -110px;
margin-bottom: 80px;
}
#message .layout_container.rev{
margin-right: -130px;
margin-bottom: 0;
}
#message .message_box .wrap{
width: 600px;
color: #FFF;
font-family: "Noto Sans JP";
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
letter-spacing: 1.6px;
}
#message .message_box .wrap p{
line-height: 34px;
background: url(../images/bg-note.png) ;
}
#message .message_box figure{
width: 700px;
}
#message .message_box figure img{
width: 100%;
height: auto;
}
@media only screen and (max-width: 767px) {
#message{
width: 100%;
max-width: 100%;
min-width: 100%;
padding:80px 0 38%;
background: url(../images/bg-message-sp.jpg) no-repeat top 130px center ,url(../images/bg-bottom-message.jpg) no-repeat bottom center;
background-size: 100% auto,200% auto;
}
#message .inner{
width: 100%;
padding: 0 20px;
}
#message .inner .ceo{
position: relative;
height: 72vw;
}
#message h2{
white-space: nowrap;
margin-bottom: 0;
}
#message h2 > span:nth-child(1){
font-size: 1.8rem;
margin-bottom: 12px;
}
/*
#message h2 > span:nth-child(1)::before{
display: block;
content: "";
width: 14px;
height: 18px;
background: url(../images/icon/icon-h2.svg) no-repeat bottom;
background-size: 14px;
margin-right: 6px;
}
*/
#message h2 > span:nth-child(2){
font-size: 3.6rem;
letter-spacing: 0;
}
#message .lead{
position: absolute;
left: 0;
bottom: 50px;
margin-top: 0;
}
#message .lead span{
font-size:3vw;
letter-spacing: 3px;
padding: 2vw;
margin-bottom: 1vw;
}
#message .author{
position: absolute;
left: 0;
bottom: 20px;
}
#message .author span:nth-child(1){
font-size: 3vw;
line-height: 100%;
margin-right:2vw ;
}
#message .author span:nth-child(2){
font-size: 5vw;
line-height: 100%;
letter-spacing: 2px;
}
#message .message_box{
padding: 50px 0;
width: 100%;
background: linear-gradient(122deg, #2881B5 -10.65%, #34B2C9 39.35%, #3EDADA 89.5%);
}
#message .layout_container{
margin-left: 0;
margin-bottom: 50px;
}
#message .layout_container.rev{
margin-right: 0;
margin-bottom: 0;
}
#message .message_box .wrap{
width: 100%;
font-size: 1.4rem;
}
#message .message_box .wrap .fs18{
font-size: 1.6rem;
}
#message .message_box .wrap p{
line-height: 34px;
background: url(../images/bg-note.png) ;
}
/*
#message .message_box .wrap p br{
display: none;
}
*/
#message .message_box figure{
width: 100%;
}
}