@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&family=Shippori+Antique&family=Shippori+Antique+B1&display=swap');
:root {
    --primary-color: #0E2A46;
    --second-color: #A30E0E;
    --sub-color: #515E6F;

    --font-family-title: 'Shippori Antique', sans-serif;
    --font-family-bold-title: 'Shippori Antique B1', sans-serif;
    --font-family-paragraph: 'Noto Sans JP', sans-serif;
}

body {
    color: #333;
    font-family: var(--font-family-paragraph);
    line-height: 1.5;
    letter-spacing: 0.08em;
}

h1,h2,h3 {
    font-family: var(--font-family-title);
}

a {
    display: block;
    width: 100%;
    height: 100%;
}

img {
    width: 100%;
}

.container {
    width: 92%;
    margin: 0 auto;
}

header {
    width: 26%;
    z-index: 99;
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 4% 2%;
    background-color: #0e2a46da;
}

.mainVisual-wrapper {
    background: url(../img/mainVisual-img.png);
    width: 100%;
    height: 80vh;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    text-align: center;
    align-items: center;

}

h1 {
    color: #CDCDCD;
    font-size: clamp(48px,4.267vw,64px);
}

.mainVisual-title-wrapper {
    width: 100%;
}

.h1 {
    color: #fff;
}

.benefit-wrapper {
    background-color: var(--primary-color);
    height: 11vh;
    text-align: center;
    width: 100%;
    position: relative;
    background-color: var(--primary-color);
}

.benefit-title1 {
    font-family: var(--font-family-bold-title);
    color: #fff;
    background-color: var(--sub-color);
    line-height: 88px;
    font-size: clamp(18px,2vw,28px);
    width: 100%;
}

.benefit-title2 {
    font-family: var(--font-family-bold-title);
    color: #fff;
    background-color: var(--sub-color);
    line-height: 88px;
    font-size: clamp(18px,1.5vw,28px);
    width: 100%;
}

.benefit-text1 {
    font-family: var(--font-family-bold-title);
    color: #666;
    background-color: #fff;
    line-height: 88px;
    font-size: clamp(20px,4.267vw,24px);
    width: 100%;
}

.benefit-text2 {
    font-family: var(--font-family-bold-title);
    color: #666;
    background-color: #fff;
    line-height: 88px;
    font-size: clamp(20px,4.267vw,24px);
    width: 100%;
}

.benefit-bold {
    font-size: clamp(20px,2.267vw,37px);
    font-family: var(--font-family-bold-title);
    color: var(--second-color);
    margin: 0 1%;
}

.benefit-position {
    width: 80%;
    position: absolute;
    top: -2%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
}

.benefit-container{
	width: calc(100% / 3 - 14px);
}

.benefit-note {
    color: #fff;
    font-size: clamp(10px,2vw,12px);
    padding: 1% 6% 0 0; 
    text-align: right;
    background-color: var(--primary-color)
}

.cta {
    width: 100%;
    padding: 5% 0;
    background-color: var(--primary-color);
}

@keyframes shiny {
    0% {
        transform: scale(0) rotate(25deg);
        opacity: 0;
    }

    50% {
        transform: scale(1) rotate(25deg);
        opacity: 1;
    }

    100% {
        transform: scale(50) rotate(25deg);
        opacity: 0;
    }
}

.cta-btn {
    position: relative;
    width: 40%;
    height: 88px;
    margin: 0 auto;
    background-color: #d5d5d5;
    overflow: hidden;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fixed-btn {
    position: relative;
    width: 100%;
    height: 88px;
    margin: 0 0 0 auto;
    background-color: #d5d5d5;
    overflow: hidden;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center; 
}

.cta-arrow {
    width: 32px;
}

.cta-arrow img {
    width: 100%;
}

.cta-btn::after {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 50px;
    height: 50px;
    background-image: linear-gradient(100deg,  rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
    
    animation-name: shiny;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.cta-text {
    margin-right: 4%;
    font-size: clamp(20px,4.267vw,32px);
    font-family: var(--font-family-title);
    color: var(--primary-color);
    line-height: 88px;
}

.fixed-text {
    margin-right: 4%;
    font-size: clamp(18px,1.5vw,24px);
    font-family: var(--font-family-title);
    color: var(--primary-color);
    line-height: 88px;
}



.technology-wrapper {
    background-image: url(../img/technology-car-img.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 80vh;
    position: relative;
}

.tecnology-position {
    padding-left: 8%;
    color: #fff;
}

.technology-title {
    position: absolute;
    top: 12%;
    font-size: clamp(44px,4.267vw,50px);
    font-family: var(--font-family-title);
}

.technology-text {
    position: absolute;
    top: 38%;
    font-size: 18px;
    font-family: var(--font-family-paragraph);
}


.job-contents {
    width: 100%;
    padding: 8% 0;
}

.job-content-wrapper {
    display: flex;
    justify-content: space-around;
}

.job-img-wrapper {
    width: 48%;
}

.job-text-wrapper {
    text-align-last: left;
    width: 45%;
}

.job-text-title {
    font-size: 20px;
    width: 100%;
    padding: 1% 0 1% 4%;
    background-color: var(--sub-color);
    color: #fff;
}

.job-text {
    font-weight: 500;
    padding: 2% 0% 4% 4%;
    font-size: 16px;
    line-height: 1.6rem;
}

.job-text-red {
    font-weight: 500;
    padding-left: 2%;
    color: var(--second-color);
}

.job1 {
    margin-bottom: 6%;
}


.benefit2-wrapper {
    background-color: #EDF1F5;
    padding: 6% 0;
}

.benefit-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefit-img-wrapper {
    width: 88px;
}

.h2-benefit-title {
    font-family: var(--font-family-bold-title);
    font-size: 32px;
    margin-left: 2%;
}

.benefit-title-red {
    color: var(--second-color);
    font-weight: 600;
    font-size: 40px;
}

.benefit-text-wrapper {
    display: flex;
    margin-top: 5%;
    justify-content: space-between;
}

.benefit-text {
    width: clamp(16vw,4.267vw,20vw);
    font-size: clamp(14px,1.2vw,24px);
    font-weight: 500;
    text-align: center;
    line-height: 3;
    background-color: #fff;
}

.benefit-text-red {
    color: var(--second-color);
}

.benefit-size {
    width: 68%;
}


.life {
    padding: 4% 0;
}

.life-wrapper {
    width: 80%;
    margin: 0 auto;
    padding: 4% 0;
    display: flex;
    justify-content: space-around;
    flex-direction: row-reverse;
    align-items: center;
}

.life-wrapper2 {
    width: 80%;
    margin: 0 auto;
    padding: 4% 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.life-img-wrapper,.life-text-wrapper {
    width: 46%;
}

.life-img-wrapper img {
    width: 100%;
}

.life-img-text {
    text-align: right;
    padding-top: 1%;
    font-size: 13px;
}

.h2-life-title {
    color: #fff;
    font-family: var(--font-family-bold-title);
    font-size: clamp(24px,1.8vw,32px);
}

.life-title-bg {
    background-color: var(--primary-color);
    padding: 2% 8%;
}

.life-subtitle {
    padding: 6% 0 4%;
    font-size: 22px;
    color: #444;
    margin: 0 auto;
}

.life-text-red {
    color: var(--second-color);
    padding: 1% 0 1% 2%;
    border-bottom: 1px solid var(--second-color);
    width: 26vw;
    font-size: clamp(17px,1.3vw,24px);
    font-family: var(--font-family-title);
}

.life-text {
    padding: 4% 0 0;
    font-size: clamp(16px,1.3vw,20px);
    margin: 0 auto;
}


.voice {
    padding: 4% 0;
    background-color: #EDF1F5;
}

.h2-voice-title {
    width: 26vw;
    margin: 0 auto;
    padding: 4% 0 1%;
    font-size: clamp(32px,2vw,40px);
    color: var(--primary-color);
    text-align: center;
    border-bottom: 1px solid var(--primary-color);
}

.voice-wrapper {
    display: flex;
    padding: 8% 0;
    justify-content: space-around;
    width: 80%;
    margin: 0 auto;
    align-items: center;
}

.voice-text-wrapper {
    width: 46%;
}

.voice-img-wrapper {
    width: 50%;
    height: 50vh;
}

.voice-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h3-voice-title {
    padding: 4% 0;
    font-size: 30px;
    color: var(--primary-color)
}

.voice-tag-wrapper {
    display: flex;
    padding: 0 0 4%;
}

.tag {
    padding: 1% 2%;
    font-size: 14px;
    background-color: var(--primary-color);
    color: #fff;
    margin-right: 2%;
    border-radius: 3px;
}

.voice-text {
    font-weight: 500;
    font-size: clamp(16px,1.2vw,20px);
    color: #555;
}



.flow {
    padding: 4% 0 8%;
    background-color: #EDF1F5;
}

.h2-flow-title {
    text-align: center;
    font-size: clamp(32px,3vw,48px);
    padding: 4% 0;
    color: var(--primary-color)
}

.flow-wrapper {
    width: 80%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #fff;
    padding: 2%;
}

.flow-text-wrapper {
    width: 52%;
}

.flow-img-wrapper {
    width: 40%;
}

.h3-flow-text-title {
    font-size: clamp(22px,2vw,28px);
    color: var(--primary-color);
}

.flow-text {
    padding: 2% 0 0;
    font-size: clamp(15px,1.3vw,18px);
}

.flow-arrow-wrapper {
    width: 100px;
    margin: 0 auto;
    padding: 1% 0;
}


.support {
    padding-bottom: 8%;
}

.h2-support-title {
    padding: 5% 0;
    text-align: center;
    background-color: var(--primary-color);
    color: #fff;
    font-size: clamp(32px,4vw,48px);
}

.under-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 2.4vw 2vw 0 2vw;
    border-color: var(--primary-color) transparent transparent transparent;
    margin: 0 auto;
    padding-bottom: 4%;
}

.h3-support-subtitle {
    padding: 2% 0;
    font-size: clamp(32px,4vw,40px);
    text-align: center;
    border-top: 1px solid var(--second-color);
    border-bottom: 1px solid var(--second-color);
    width: 40%;
    margin: 0 auto;
    color: var(--second-color);
}

.support-text1 {
    padding: 4% 0 2%;
    text-align: center;
    font-size: 24px;
}

.support-text-red {
    color: var(--second-color);
    font-weight: 500;
}

.supporter-wrapper {
    display: flex;
    justify-content: space-around;
    width: 68%;
    margin: 0 auto;
    align-items: center;
}

.support-text2 {
    width: 50%;
    font-size: clamp(16px,1.4vw,20px);
}

.supporter-img-wrapper {
    width: 36%;
}

.area-list-wrapper {
    width: 78%;
    margin: 0 auto;
    border: 1px solid var(--primary-color);
}

.area-title-wrapper {
    background-color: var(--primary-color);
    padding: 2% 0;
    color: #fff;
    text-align: center;
    font-size: 24px;
}

.area-list {
    padding: 2%;
    font-size: clamp(16px,1.4vw,20px);
}



.recruit {
    background-color: #EDF1F5;
    padding: 4% 0 10%;
}

.h2-recruit-title {
    font-size: clamp(32px,3vw,48px);
    text-align: center;
    color: var(--primary-color);
    padding: 4% 0;
}

.recruit-wrapper {
    display: flex;
    width: 60%;
    padding: 1px 0;
    margin: 0 auto;
}

.recruit-title {
    background-color: var(--primary-color);
    color: #fff;
    width: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3% 0;
    font-size: clamp(16px,1.3vw,20px);
}

.recruit-text {
    background-color: #fff;
    width: 100%;
    padding: 3% 0;
    padding-left: 4%;
    font-size: clamp(15px,1.4vw,20px);
}

.last {
    padding-top: 2%;
    font-size: 14px;
}


footer {
    padding: 8% 0;
}

.h2-contact-title {
    font-size: clamp(32px,3vw,48px);
    text-align: center;
    color: var(--primary-color);
}

.tel-img-wrapper {
    width: 46%;
    margin: 0 auto;
    padding: 2% 0;
}

.work-hours-pc {
    font-size: clamp(18px,1.3vw,24px);
    padding: 4% 0;
    font-weight: 500;
    text-align: center;
}

.work-hours-sp {
    display: none;
}

.number {
    padding: 1%;
    background-color: #333;
    color: #fff;
    text-align: center;
    font-size: 24px;
    border-radius: 4px;
}

.contact-text {
    padding: 4% 0;
    text-align: center;
    font-weight: 500;
    font-size: clamp(18px,1.3vw,24px);
}

/* ===== フッターエントリー ===== */
#fixexentry {
    position: fixed;
    bottom: 0;
		right: 0;
		z-index: 1;

	}
#fixexentry .entryBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 6px;
	padding: 10px 20px;
	background-color: #D80000;
	color: #fefefe;
	border-radius: 4px;
	transition: .3s;

}
#fixexentry .entryImg{
	display: inline-block;
	width: 32px;
}

#fixexentry .entry-txt {
  margin: 0 0 0 2px;
  font-size: 20px;
  font-weight: 500;
  font-family: "Noto Sans CJK JP";
}

#fixexentry .lineWrap{
	transition: .3s;
}

#fixexentry .line{
	height: 52px;
}

#fixexentry a:hover {
	text-decoration: none;
}

#fixexentry .entryBtn:hover,
#fixexentry .lineWrap:hover{
	opacity: .7;	
}