@charset "utf-8";

body{
margin: 0 auto;
font-family: "Noto Sans", sans-serif;
color: #464E53;
font-size: 16px;
line-height: 1.5;
letter-spacing: 3px;
}

.pc_none{display: none;}

.font--sizeS{font-size: 24px;}
.font--sizeM{font-size: 28px;}
.font--sizeL{font-size: 34px;}

.marker{
display: inline-block;
line-height: 1;
}
.marker--yellow{
background: linear-gradient(transparent 50%, #FFF34B 50%);
}

/* header */
header{
width: 100%;
margin: 0 auto;
padding: 10px 40px;
background: #31B5E4;
color: #ffffff;
.innerBoxH{
display: grid;
grid-template-columns: 1fr auto  auto 240px;
column-gap: 15px;
justify-content: space-around;
align-items: center;
&.comp{
grid-template-columns: 1fr auto;
}
.logoBox{
.logo{
font-size: 28px;
font-weight: bold;
a,
a:link,
a:visited{
display: inline-block;
color: #ffffff;
}
}
}
.catchBox{
.catch{
font-size: 16px;
font-weight: bold;
}
.secondline {
      display: inline;
    }
.secondline-sp {
      display: none;
    }
}
.buttonBox{
width: 250px;
}
}
}


/* main */
.mainBox{
width: 100%;
.innerBox.Main{
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
max-width: 1220px;
height: 500px;
margin: 0 auto;
position: relative;
.imgBox{
.imgOccupation{
li{
width: 260px;
position: absolute;
bottom: 0;
&.imgOcc-sales{
top: 40px;
left: 0px;
}
&.imgOcc-life{
top: 90px;
left: 225px;
z-index: 10;
}
&.imgOcc-event{
width: 230px;
top: 30px;
left: 445px;
}
}
}
}

/* 250809 */
ul.imgOccupation::before{
    z-index: 1;
    position: absolute;
    content: "";
    width: 190px;
    height: 70px;
    background-image: url(../images/limited20.svg);
    background-repeat: no-repeat;
    background-size: contain;
    top: 10px;
    left: 240px;
}

.pointBox{
z-index: 20;
.point{
display: block;
width: 130px;
position: absolute;
top: 12%;
right: 2%;
z-index: 10;
}
.pointList{
width: 560px;
height: 338px;
background-image: url(../images/section_main-point_bg.webp);
background-size: 100%;
background-repeat: no-repeat;
background-position: left top;
position: absolute;
bottom: 7%;
right: 0;
dt{
width: 268px;
height: 45px;
margin: 10% auto 2%;
}
dd{
ul{
display: grid;
row-gap: 6px;
width: 506px;
margin: 0 auto;
li{
width: 506px;
}
}
}
}
}
}
}

/* section--CTA */
.sectionBox{
&.cta{
margin: 0 auto;
padding: 16px 0;
background: #FFF;
background-image: url(../images/bg_cta.webp);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
}

.sectionBox.cta .campaign{
  max-width: 830px;
  margin: 0 auto;
}

.downicon{
    position:relative;
}

.downicon::before{
    position: absolute;
    content: "";
    z-index: 10;
    background-image: url(../images/down.svg);
    background-repeat: no-repeat;
    background-size: contain;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 90px;
    width: 40px;
    top: 24px;
}

.sectionBox.cta .campaign picture img{
  width: 100%;
}

.sectionBox.cta .campaign p{
  text-align: center;
  margin: 0 auto;
  padding: 6px 0;
  letter-spacing: 0;
}

.sectionBox.cta .campaign .small{
    text-align: center;
    font-size: 0.875rem;
    font-weight: bold;
    padding-top: 8px;
    padding-bottom: 8px;
    letter-spacing: 0;
}

.sectionBox.cta .campaign .fst{
    padding-bottom: 0;
}

.sectionBox.cta .campaign .second{
    padding-top: 0;
}

.sectionBox.cta .campaign .small .sp-br{
    display: none;
}

/* section--1 */
.sectionBox{
&.first{
margin: 0 auto;
padding: 144px 0;
background: #FFFEE9;
text-align: center;
}
.innerBox{
width: 1000px;
margin: 0 auto;
.catch{
width: 470px;
margin: 0 auto 25px;
}
.headline{
display: grid;
grid-template-columns: auto auto;
justify-content: center;
align-items: center;
margin: 0 auto 30px;
img{
&.firstline{
width: 230px;
}
&.secondline{
width: 381px;
}
}
}
.questionBox{
width: 900px;
margin: 0 auto;
padding: 30px 0 40px;
background: #ffffff;
border-radius: 13px;
h2{
color: #31B5E4;
font-weight: bold;
font-size: 24px;
margin: 0 auto 20px;
}
.catchBox{
display: grid;
grid-template-columns: 30px auto 30px;
column-gap: 10px;
align-items: center;
justify-items: center;
justify-content: center;
&::before,
&::after{
content: "";
display: inline-block;
width: 2px;
height: 40px;
background: #464E53;
border-radius: 100px;
}
&::before{
transform: rotate(-20deg);
}
&::after{
transform: rotate(20deg);
}
.catch{
width: auto !important;
margin: 0 !important;
font-size: 20px;
font-weight: 600;
.firstline{
display: inline-block;
}
}
}
.choice-workplaceBox{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
width: 720px;
margin: 40px auto;
input{
display: none;
}
input[type="radio"]:checked + label{
background-color: #31B5E4;
color: #ffffff;
}
label{
display: block !important;
padding: 20px;
background: #D9D9D9;
color: #464E53;
font-weight: bold;
border-radius: 13px;
cursor: pointer !important;
}
}
.buttonBox{
margin: 0 auto;
&.line{
width: 70%;
}
}
}
}
}
/* section--2 */
.sectionBox{
&.second{
margin: 0 auto;
padding: 60px 0;
background: #ffffff;
text-align: center;
.innerBox{
width: 900px;
margin: 0 auto;
.point--1{
margin-bottom: 80px;
.workPlace{
display: grid;
grid-template-rows: auto;
grid-template-columns: auto auto;
justify-content: center;
justify-items: center;
gap: 15px 0;
margin-bottom: 40px;
li{
padding: 10px 20px;
background: #31B5E4;
border-radius: 100px;
color: #ffffff;
font-weight: bold;
&:first-child{
margin-right: 10px;
}
&:last-child{
grid-row: 2 / 2;
grid-column: span2 / 1;
}
}
}
h2{
font-size: 32px;
.firstline,
.secondline,
.thirdline{
display: block;
margin-bottom: 10px;
}
.secondline{
display: grid;
grid-template-columns: 30px auto 30px;
justify-items: center;
justify-content: center;
align-items: center;
column-gap: 10px;
color: #31B5E4;
font-weight: bold;
font-size: 48px;
&::before,
&::after{
content: "";
display: inline-block;
width: 2px;
height: 50px;
background: #31B5E4;
border-radius: 100px;
}
&::before{
transform: rotate(-20deg);
}
&::after{
transform: rotate(20deg);
}
}
.thirdline{
font-size: 38px;
}
}
img{
width: 280px;
margin: 40px auto 0;
}
}
.point--2{
margin-bottom: 40px;
.catchBox{
margin-bottom: 30px;
font-weight: bold;
}
h2{
margin-bottom: 30px;
font-size: 42px;
font-weight: bold;
.firstline,
.secondline{
display: block;
}
}
img{
width: 480px;
margin: 40px auto 0;
}
}
}
}
}
/* section--3 */
.sectionBox{
&.third{
margin-bottom: 40px;
.innerBox{
width: 900px;
h2{
background-image: url(../images/point_title_bg.webp);
background-size: 20%;
background-repeat: repeat;
background-position: left top;
margin: 0 auto 80px;
padding: 30px 0;
border-radius: 13px 13px 0px 0px;
img{
width: 500px;
margin: 0 auto;
}
}
.point--1{
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr;
justify-items: center;
justify-content: center;
align-items: center;
row-gap: 30px;
.pointBox{
display: grid;
grid-template-columns: 1fr auto;
justify-items: start;
align-items: center;
column-gap: 20px;
&._b,
&._d{
.number{
order: 2;
}
.contents{
order: 1;
}
}
.number{
display: grid;
grid-template-rows: auto;
grid-template-columns: auto;
justify-content: center;
justify-items: center;
gap: 0px;
color: #31B5E4;
font-weight: bold;
.firstline{
font-size: 26px;
line-height: 1;
}
.secondline{
font-size: 100px;
line-height: 1;
}
}
.contents{
display: grid;
grid-template-rows: auto auto;
font-size: 24px;
font-weight: bold;
}
}
}
}
}
}
/* section--catch */
.sectionBox{
&.catch{
margin: 0 auto 40px;
padding: 40px 0;
background: #FFFEE9;
.innerBox{
width: 900px;
background-image: url(../images/point_img-01.webp),url(../images/point_img-01.webp);
background-size: 5%;
background-repeat:  no-repeat;
background-position: 17% 90%, 82% 90%;
.catchBox{
display: grid;
grid-template-columns: auto;
justify-content: center;
justify-items: center;
row-gap: 10px;
font-size: 28px;
font-weight: bold;
.thirdline{
font-size: 40px;
}
}
}
}
}
/* section--4 */
.sectionBox{
&.fourth{
margin: 0 auto 60px;
.innerBox{
width: 900px;
.occupationBox{
display: grid;
grid-template-columns: auto auto;
align-items: center;
justify-items: center;
column-gap: 20px;
margin-bottom: 40px;
.illust{
width: 280px;
height: auto;
object-fit: cover;
}
.contents{
width: 600px;
.occ--mark{
display: inline-block;
margin: 0 auto 20px;
padding: 4px 20px 2px;
background: #31B5E4;
border-radius: 100px;
color: #ffffff;
font-size: 18px;
line-height: normal;
font-weight: bold;
letter-spacing: 3px;
}
.occ--contents{
.catch{
margin: 0 0 5px 0;
font-weight: bold;
}
h3{
font-size: 28px;
margin: 0 0 10px 0;
}
.cmnt{
line-height: 2;
}
}
}
&.event-staff{
.illust{
order: 2;
}
.contents{
order: 1;
}
}
}
}
}
}
/* section--5 */
.sectionBox{
&.fifth{
margin: 0 auto 40px;
.innerBox{
h2{
img{
width: 414px;
margin: 0 auto 25px;
}
}
img{
width: 350px;
margin: 0 auto;
}
.catchBox{
margin: 60px auto;
text-align: center;
.firstline,
.secondline{
display: block;
font-weight: bold;
}
.firstline{
font-size: 24px;
margin-bottom: 10px;
}
.secondline{
font-size: 38px;
}
}
}
}
}
/* section--6 */
.sectionBox{
&.sixth{
margin: 0 auto 60px;
padding: 40px 0;
background: #FFFEE9;
.innerBox{
width: 900px;
h2{
display: grid;
grid-template-columns: 30px auto 30px;
grid-template-rows: auto auto;
justify-items: center;
justify-content: center;
align-items: center;
column-gap: 10px;
font-weight: bold;
text-align: center;
&::before,
&::after{
content: "";
display: inline-block;
width: 2px;
height: 70px;
background: #464E53;
border-radius: 100px;
}
&::before{
transform: rotate(-20deg);
}
&::after{
transform: rotate(20deg);
}
.firstline{
display: block;
font-size: 22px;
}
.secondline{
font-size: 32px;
}
}
.syoukaiBox{
display: grid;
grid-template-columns: auto auto;
justify-content: center;
align-items: center;
column-gap: 10px;
margin: 20px auto;
.persondata{
width: 350px;
.person{
width: 60%;
margin: 0 auto;
text-align: center;
}
.data{
width: 70%;
margin: 0 auto;
text-align: center;
}
}
.contents{
padding: 20px 30px;
background: #ffffff;
border-radius: 13px;
.cmnt{
font-size: 15px;
line-height: 2;
letter-spacing: 1px;
}
}
}
}
}
}
/* section--7 */
.sectionBox{
&.seventh{
margin: 0 auto 60px;
.innerBox{
width: 900px;
h2{
background-image: url(../images/point_title_bg.webp);
background-size: 20%;
background-repeat: repeat;
background-position: left top;
margin: 0 auto 80px;
padding: 30px 0;
border-radius: 13px 13px 0px 0px;
img{
width: 500px;
margin: 0 auto;
}
}
.process{
li{
position: relative;
&::after{
content: "";
display: block;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #97D5EE;
position: absolute;
bottom: -20px;
left: 50%;
}
&:last-child::after{
display: none;
}
}
.processBox{
display: grid;
grid-template-columns: 300px auto;
justify-items: center;
align-items: center;
margin-bottom: 40px;
padding: 30px;
background: #F5F5F5;
border-radius: 13px;
}
h3{
text-align: center;
.firstline{
display: block;
}
}
}
}
}
}
/* section--FAQ */
.sectionBox{
&.FAQ{
margin-bottom: 100px;
border-top: #464E53 dashed 1px;
.innerBox{
width: 900px;
h2{
margin: 40px auto 20px;
font-size: 28px;
font-weight: bold;
text-align: center;
}
.qusetionBox{
display: grid;
grid-template-rows: auto auto;
row-gap: 20px;
h3{
display: grid;
grid-template-columns: auto auto;
justify-content: start;
align-items: center;
column-gap: 10px;
padding: 8px 20px;
background: #D4EFF9;
border-radius: 13px 13px 0 0;
.questionmark{
font-size: 30px;
}
.questiontit{
font-size: 16px;
}
}
.answer{
padding: 20px 30px;
font-size: 14px;
}
}
}
}
}
/* section--ending */
.sectionBox{
&.ending{
margin: 0 auto;
padding: 40px 0;
background: #FFFEE9;
.innerBox{
width: 900px;
h2{
margin-bottom: 30px;
img{
width: 325px;
margin: 0 auto;
}
}
.catchBox{
font-size: 22px;
font-weight: bold;
text-align: center;
position: relative;
.firstline{
display: block;
}
img{
width: 140px;
position: absolute;
bottom: 140px;
right: 120px;
}
}
}
}
}

/* button */
.buttonBoxQ.line{
margin: 0 auto;
a,
a:link{
display: block;
width: 40%;
margin: 0 auto;
padding: 15px 20px;
background: #ffffff;
border: #06C755 3px solid;
border-radius: 100px;
box-shadow: 0px 2px 0px 2px #06C755;
font-size: 22px;
font-weight: bold;
color: #06C755;
}

/* 250809 */
a strong,
a:link strong{
color: #ffffff;
background-color: #06C755;
padding: 2px 8px;
margin-right: 5px;
border-radius: 6px;
font-size: 16px;
}
p {
/* font-size: 14px; */
font-weight: bold;
color: #F94242;
margin-top: 20px;
}



a:hover{
display: block;
transition: 0.3s all;
transform: translateY(4px);
box-shadow: none;
}
}
.js-link{
animation: breathing 1s ease-in-out infinite;
will-change: transform; /* ← スムーズさUP */
}
@keyframes breathing {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.07);
}
}
/* fixed button */
.buttonBox.fixed{
width: 100%;
margin: 0 auto;
position: fixed;
bottom: 0;
z-index: 100;
a,
a:link{
display: block;
width: 300px;
margin: 0 auto;
opacity: 10;
position: absolute;
bottom: 30px;
right: 20px;
}
&.hidden{
opacity: 0;
visibility: hidden;
}
}

/* footer */
footer{
margin: 0 auto;
padding: 0;
border-top: #464E53 dashed 1px;
text-align: center;
letter-spacing: 2px;
a,
a:link{
color: #464E53;
}
a:hover{
text-decoration: underline;
}
.innerBoxF{
display: grid;
row-gap: 20px;
padding: 30px 0 20px;
.logoBox{
margin: 0 auto;
text-align: center;
.logo{
margin-right: 8px;
/*
font-size: 32px;
font-weight: bold;
color: #368DF6;
*/
}
}
.linkBox,
.addressBox{
font-size: 14px;
font-weight: bold;
}
}
.copyrightBox{
padding: 5px 0;
background: #464E53;
color: #ffffff;
small{
font-size: 10px;
}
}
}

/* tablet1 ================ */
@media screen and (min-width:821px) and (max-width:1024px){
.pc_none{display: none;}

.font--sizeS{font-size: 22px;}
.font--sizeM{font-size: 24px;}
.font--sizeL{font-size: 32px;}

/* header */
header{
padding: 10px 15px;
.innerBoxH{
display: grid;
grid-template-columns: 1fr auto auto 200px;
column-gap: 10px;
justify-content: space-around;
align-items: center;
.logoBox{
.logo{
font-size: 22px;
}
}
.catchBox{
.catch{
font-size: 14px;
}
}
.buttonBox{
width: 200px;
}
}
}

/* main */
.mainBox{
.innerBox.Main{
display: grid;
grid-template-columns: 1fr 1fr;
width: 95%;
max-width: 1024px;
height: 400px;
margin: 0 auto;
position: relative;
.imgBox{
.imgOccupation{
li{
width: 22%;
position: absolute;
bottom: 0;
&.imgOcc-sales{
top: 10%;
left: 0px;
}
&.imgOcc-life{
top: 20%;
left: 17%;
z-index: 10;
}
&.imgOcc-event{
width: 19%;
top: 8%;
left: 38%;
}
}
}
}

/* 250809 */
ul.imgOccupation::before {
    width: 130px;
    top: 2%;
    left: 20%;
}

.pointBox{
width: 100%;
position: static;
top: 0;
.point{
display: block;
width: 100px;
top: 15%;
}
.pointList{
width: 392px/*364px*/;
height: 243px/*226px*/;
background-image: url(../images/section_main-point_bg.webp);
background-size: 100%;
background-repeat: no-repeat;
background-position: left top;
dt{
width: 188px;
height: 28px;
}
dd{
ul{
display: grid;
row-gap: 5px;
width: 354px/*329px*/;
margin: 0 auto;
li{
width: 354px;
}
}
}
}
}
}
}

/* section--1 */
.sectionBox{
&.first{
margin: 0 auto;
padding: 120px 0;
background: #FFFEE9;
text-align: center;
}
.innerBox{
width: 80%;
margin: 0 auto;
.catch{
width: 400px;
margin: 0 auto 25px;
}
.headline{
display: grid;
grid-template-columns: auto auto;
column-gap: 3px;
justify-content: center;
align-items: center;
margin: 0 auto 30px;
img{
&.firstline{
width: 190px;
}
&.secondline{
width: 290px;
}
}
}
.questionBox{
width: 100%;
margin: 0 auto;
padding: 30px 0 40px;
background: #ffffff;
border-radius: 13px;
h2{
color: #31B5E4;
font-weight: bold;
font-size: 24px;
}
.catchBox{
display: grid;
grid-template-columns: 50px auto 50px;
column-gap: 10px;
align-items: center;
justify-items: center;
justify-content: center;
&::before,
&::after{
content: "";
display: inline-block;
width: 2px;
height: 60px;
background: #464E53;
border-radius: 100px;
}
&::before{
transform: rotate(-20deg);
}
&::after{
transform: rotate(20deg);
}
.catch{
width: auto !important;
margin: 0 !important;
font-size: 20px;
font-weight: 600;
.firstline{
display: block;
}
}
}
.choice-workplaceBox{
width: 80%;
}
}
}
}
/* section--2 */
.sectionBox{
&.second{
.innerBox{
width: 90%;
margin: 0 auto;
.point--1{
h2{
font-size: 32px;
.secondline{
font-size: 48px;
}
.thirdline{
font-size: 38px;
}
}
img{
width: 280px;
}
}
.point--2{
margin-bottom: 40px;
.catchBox{
margin-bottom: 30px;
font-weight: bold;
}
h2{
font-size: 42px;
}
img{
width: 480px;
}
}
}
}
}
/* section--3 */
.sectionBox{
&.third{
.innerBox{
width: 90%;
h2{
margin: 0 auto 80px;
padding: 30px 0;
img{
width: 420px;
margin: 0 auto;
}
}
.point--1{
row-gap: 30px;
.pointBox{
column-gap: 20px;
.number{
gap: 0px;
.firstline{
font-size: 26px;
line-height: 1;
}
.secondline{
font-size: 100px;
line-height: 1;
}
}
.contents{
font-size: 24px;
}
}
}
}
}
}
/* section--catch */
.sectionBox{
&.catch{
padding: 40px 0;
.innerBox{
width: 90%;
background-image: url(../images/point_img-01.webp),url(../images/point_img-01.webp);
background-size: 5%;
background-repeat:  no-repeat;
background-position: 17% 90%, 82% 90%;
.catchBox{
row-gap: 10px;
font-size: 28px;
font-weight: bold;
.thirdline{
font-size: 34px;
}
}
}
}
}
/* section--4 */
.sectionBox{
&.fourth{
.innerBox{
width: 80%;
.occupationBox{
column-gap: 10px;
.illust{
width: 200px;
height: auto;
object-fit: cover;
}
.contents{
width: auto;
.occ--mark{
margin: 0 auto 20px;
padding: 4px 20px 2px;
color: #ffffff;
font-size: 18px;
letter-spacing: 3px;
}
.occ--contents{
.catch{
margin: 0 0 5px 0;
}
h3{
font-size: 28px;
margin: 0 0 10px 0;
}
.cmnt{
line-height: 2;
}
}
}
}
}
}
}
/* section--5 */
.sectionBox{
&.fifth{
margin: 0 auto 40px;
.innerBox{
h2{
img{
width: 414px;
margin: 0 auto 25px;
}
}
img{
width: 350px;
}
.catchBox{
margin: 60px auto;
.firstline{
font-size: 24px;
margin-bottom: 10px;
}
.secondline{
font-size: 38px;
}
}
}
}
}
/* section--6 */
.sectionBox{
&.sixth{
padding: 40px 0;
.innerBox{
width: 90%;
h2{
display: grid;
grid-template-columns: 30px auto 30px;
column-gap: 10px;
&::before,
&::after{
content: "";
display: inline-block;
width: 2px;
height: 70px;
background: #464E53;
border-radius: 100px;
}
&::before{
transform: rotate(-20deg);
}
&::after{
transform: rotate(20deg);
}
.firstline{
display: block;
font-size: 20px;
}
.secondline{
font-size: 28px;
}
}
.syoukaiBox{
column-gap: 10px;
margin: 20px auto;
.persondata{
width: 350px;
.person{
width: 60%;
margin: 0 auto;
text-align: center;
}
.data{
width: 70%;
margin: 0 auto;
text-align: center;
}
}
.contents{
padding: 20px;
border-radius: 13px;
.cmnt{
font-size: 15px;
line-height: 2;
letter-spacing: 1px;
}
}
}
}
}
}
/* section--7 */
.sectionBox{
&.seventh{
margin: 0 auto 60px;
.innerBox{
width: 90%;
h2{
margin: 0 auto 80px;
padding: 30px 0;
border-radius: 13px 13px 0px 0px;
img{
width: 450px;
margin: 0 auto;
}
}
.process{
li{
position: relative;
&::after{
content: "";
display: block;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #97D5EE;
position: absolute;
bottom: -20px;
left: 50%;
}
&:last-child::after{
display: none;
}
}
.processBox{
display: grid;
grid-template-columns: 300px auto;
justify-items: center;
align-items: center;
margin-bottom: 40px;
padding: 30px;
background: #F5F5F5;
border-radius: 13px;
}
h3{
text-align: center;
.firstline{
display: block;
}
}
}
}
}
}
/* section--FAQ */
.sectionBox{
&.FAQ{
.innerBox{
width: 90%;
h2{
margin: 40px auto 20px;
font-size: 28px;
}
.qusetionBox{
row-gap: 20px;
h3{
column-gap: 10px;
padding: 8px 20px;
.questionmark{
font-size: 30px;
}
.questiontit{
font-size: 16px;
}
}
.answer{
padding: 20px 30px;
font-size: 14px;
}
}
}
}
}
/* section--ending */
.sectionBox{
&.ending{
margin: 0 auto;
padding: 40px 0;
background: #FFFEE9;
.innerBox{
width: 90%;
h2{
margin-bottom: 30px;
img{
width: 325px;
margin: 0 auto;
}
}
.catchBox{
font-size: 22px;
font-weight: bold;
text-align: center;
position: relative;
.firstline{
display: block;
}
img{
width: 140px;
position: absolute;
bottom: 140px;
right: 120px;
}
}
}
}
}

/* button */
.buttonBoxQ{
margin: 0 auto;
&.line{
width: 100% !important;
a,
a:link{
display: block;
width: 50%;
font-size: 22px;
}
}
}
.js-link{
animation: breathing 1s ease-in-out infinite;
will-change: transform; /* ← スムーズさUP */
}
@keyframes breathing {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.07);
}
}
/* fixed button */
.buttonBox.fixed{
width: 100%;
margin: 0 auto;
padding: 30px 0;
a,
a:link{
display: block;
max-width: 300px;
margin: 0 auto;
}
}


/* footer */
footer{
.innerBoxF{
.logoBox{
.logo{
font-size: 24px;
}
}
.linkBox,
.addressBox{
font-size: 12px;
}
}
.copyrightBox small{
font-size: 10px;
}
}
}

/* tablet2 ================ */
@media screen and (min-width:768px) and (max-width:820px){
.pc_none{display: none;}

.font--sizeS{font-size: 22px;}
.font--sizeM{font-size: 24px;}
.font--sizeL{font-size: 32px;}

/* header */
header{
padding: 10px 15px;
.innerBoxH{
display: grid;
grid-template-columns: 200px auto auto 200px;
column-gap: 10px;
justify-content: space-around;
align-items: center;
.logoBox{
.logo{
font-size: 22px;
}
}
.catchBox{
.catch{
font-size: 14px;
.firstline{
display: block;
}
}
}
.buttonBox{
width: 200px;
}
}
}

/* main */
.mainBox{
.innerBox.Main{
display: grid;
grid-template-columns: 1fr 1fr;
width: 95%;
height: 360px;
margin: 0 auto;
position: relative;
.imgBox{
.imgOccupation{
li{
width: 20%;
position: absolute;
bottom: 0;
&.imgOcc-sales{
top: 10%;
left: 0px;
}
&.imgOcc-life{
top: 20%;
left: 17%;
z-index: 10;
}
&.imgOcc-event{
width: 17%;
top: 8%;
left: 35%;
}
}
}
}

/* 250809 */
ul.imgOccupation::before {
    width: 90px;
    top: 4%;
    left: 20%;
}

.pointBox{
width: 100%;
position: static;
top: 0;
.point{
display: block;
width: 100px;
top: 15%;
}
.pointList{
width: 392px/*364px*/;
height: 243px/*226px*/;
background-image: url(../images/section_main-point_bg.webp);
background-size: 100%;
background-repeat: no-repeat;
background-position: left top;
dt{
width: 188px;
height: 28px;
}
dd{
ul{
display: grid;
row-gap: 5px;
width: 354px/*329px*/;
margin: 0 auto;
li{
width: 354px;
}
}
}
}
}
}
}
/* section--1 */
.sectionBox{
&.first{
margin: 0 auto;
padding: 120px 0;
background: #FFFEE9;
text-align: center;
}
.innerBox{
width: 90%;
margin: 0 auto;
.catch{
width: 100%;
max-width: 400px;
margin: 0 auto 25px;
}
.headline{
display: grid;
grid-template-columns: auto auto;
column-gap: 3px;
justify-content: center;
align-items: center;
margin: 0 auto 30px;
img{
&.firstline{
width: 190px;
}
&.secondline{
width: 290px;
}
}
}
.questionBox{
width: 100%;
margin: 0 auto;
padding: 30px 0 40px;
background: #ffffff;
border-radius: 13px;
h2{
color: #31B5E4;
font-weight: bold;
font-size: 24px;
}
.catchBox{
display: grid;
grid-template-columns: 50px auto 50px;
column-gap: 10px;
align-items: center;
justify-items: center;
justify-content: center;
&::before,
&::after{
content: "";
display: inline-block;
width: 2px;
height: 60px;
background: #464E53;
border-radius: 100px;
}
&::before{
transform: rotate(-20deg);
}
&::after{
transform: rotate(20deg);
}
.catch{
width: auto !important;
margin: 0 !important;
font-size: 20px;
font-weight: 600;
.firstline{
display: block;
}
}
}
.choice-workplaceBox{
width: 80%;
font-size: 18px;
}
}
}
}
/* section--2 */
.sectionBox{
&.second{
.innerBox{
width: 90%;
margin: 0 auto;
.point--1{
h2{
font-size: 28px;
.secondline{
font-size: 42px;
}
.thirdline{
font-size: 32px;
}
}
img{
width: 240px;
}
}
.point--2{
margin-bottom: 40px;
.catchBox{
margin-bottom: 30px;
font-weight: bold;
}
h2{
font-size: 34px;
}
img{
width: 420px;
}
}
}
}
}
/* section--3 */
.sectionBox{
&.third{
.innerBox{
width: 90%;
h2{
margin: 0 auto 80px;
padding: 30px 0;
img{
width: 400px;
margin: 0 auto;
}
}
.point--1{
row-gap: 30px;
.pointBox{
column-gap: 20px;
.number{
gap: 0px;
.firstline{
font-size: 26px;
line-height: 1;
}
.secondline{
font-size: 90px;
line-height: 1;
}
}
.contents{
font-size: 22px;
}
}
}
}
}
}
/* section--catch */
.sectionBox{
&.catch{
padding: 40px 0;
.innerBox{
width: 90%;
background-image: url(../images/point_img-01.webp),url(../images/point_img-01.webp);
background-size: 5%;
background-repeat:  no-repeat;
background-position: 17% 90%, 82% 90%;
.catchBox{
row-gap: 10px;
font-size: 28px;
font-weight: bold;
.thirdline{
font-size: 34px;
}
}
}
}
}
/* section--4 */
.sectionBox{
&.fourth{
.innerBox{
width: 90%;
.occupationBox{
column-gap: 10px;
.illust{
width: 200px;
height: auto;
object-fit: cover;
}
.contents{
width: auto;
.occ--mark{
margin: 0 auto 20px;
padding: 4px 20px 2px;
color: #ffffff;
font-size: 18px;
letter-spacing: 3px;
}
.occ--contents{
.catch{
margin: 0 0 5px 0;
font-size: 18px;
}
h3{
font-size: 28px;
margin: 0 0 10px 0;
}
.cmnt{
line-height: 2;
}
}
}
}
}
}
}
/* section--5 */
.sectionBox{
&.fifth{
margin: 0 auto 40px;
.innerBox{
h2{
img{
width: 380px;
margin: 0 auto 25px;
}
}
img{
width: 300px;
}
.catchBox{
margin: 60px auto;
.firstline{
font-size: 20px;
margin-bottom: 10px;
}
.secondline{
font-size: 34px;
}
}
}
}
}
/* section--6 */
.sectionBox{
&.sixth{
padding: 40px 0;
.innerBox{
width: 90%;
h2{
display: grid;
grid-template-columns: 30px auto 30px;
column-gap: 10px;
&::before,
&::after{
content: "";
display: inline-block;
width: 2px;
height: 70px;
background: #464E53;
border-radius: 100px;
}
&::before{
transform: rotate(-20deg);
}
&::after{
transform: rotate(20deg);
}
.firstline{
display: block;
font-size: 20px;
}
.secondline{
font-size: 28px;
}
}
.syoukaiBox{
column-gap: 10px;
margin: 20px auto;
.persondata{
width: 250px;
.person{
width: 70%;
margin: 0 auto;
text-align: center;
}
.data{
width: 80%;
margin: 0 auto;
text-align: center;
}
}
.contents{
padding: 20px;
border-radius: 13px;
.cmnt{
font-size: 15px;
line-height: 2;
letter-spacing: 1px;
}
}
}
}
}
}
/* section--7 */
.sectionBox{
&.seventh{
margin: 0 auto 60px;
.innerBox{
width: 90%;
h2{
margin: 0 auto 80px;
padding: 30px 0;
border-radius: 13px 13px 0px 0px;
img{
width: 450px;
margin: 0 auto;
}
}
.process{
li{
position: relative;
&::after{
content: "";
display: block;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #97D5EE;
position: absolute;
bottom: -20px;
left: 45%;
}
&:last-child::after{
display: none;
}
}
.processBox{
display: grid;
grid-template-columns: 300px auto;
justify-items: center;
align-items: center;
margin-bottom: 40px;
padding: 30px;
background: #F5F5F5;
border-radius: 13px;
}
h3{
text-align: center;
.firstline{
display: block;
}
}
}
}
}
}
/* section--FAQ */
.sectionBox{
&.FAQ{
.innerBox{
width: 90%;
h2{
margin: 40px auto 20px;
font-size: 28px;
}
.qusetionBox{
row-gap: 20px;
h3{
column-gap: 10px;
padding: 8px 20px;
.questionmark{
font-size: 28px;
}
.questiontit{
font-size: 16px;
}
}
.answer{
padding: 20px 30px;
font-size: 14px;
}
}
}
}
}
/* section--ending */
.sectionBox{
&.ending{
margin: 0 auto;
padding: 40px 0;
background: #FFFEE9;
.innerBox{
width: 90%;
h2{
margin-bottom: 30px;
img{
width: 325px;
margin: 0 auto;
}
}
.catchBox{
font-size: 22px;
font-weight: bold;
text-align: center;
position: relative;
.firstline{
display: block;
}
img{
width: 140px;
position: absolute;
bottom: 140px;
right: 120px;
}
}
}
}
}

/* button */
.buttonBoxQ{
margin: 0 auto;
&.line{
width: 100% !important;
a,
a:link{
display: block;
width: 50%;
font-size: 22px;
}
}
}
.js-link{
animation: breathing 1s ease-in-out infinite;
will-change: transform; /* ← スムーズさUP */
}
@keyframes breathing {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.07);
}
}
/* fixed button */
.buttonBox.fixed{
width: 100%;
margin: 0 auto;
padding: 30px 0;
a,
a:link{
display: block;
max-width: 300px;
margin: 0 auto;
}
}

/* footer */
footer{
.innerBoxF{
.logoBox{
.logo{
font-size: 24px;
}
}
.linkBox,
.addressBox{
font-size: 12px;
}
}
.copyrightBox small{
font-size: 10px;
}
}
}

/* SP ================ */
@media screen and (max-width:767px){
.sp_none{display: none !important;}

.font--sizeS{font-size: 14px;}
.font--sizeM{font-size: 18px;}
.font--sizeL{font-size: 26px;}

/* header */
header{
width: 100%;
padding: 10px 5px;
.innerBoxH{
display: grid;
grid-template-columns: 140px auto 40px !important;
column-gap: 5px;
justify-content: space-around;
align-items: center;
.logoBox{
.logo{
font-size: 18px;
}
}
.catchBox{
.catch{
font-size: 12px;
text-align: right;
.firstline{
display: block;
}
}
}
.buttonBox{
display: none !important;
}
}
}

/* main */
.mainBox{
.innerBox.Main{
display: block;
width: 90%;
height: 700px;
margin: 0 auto;
.imgBox{
.imgOccupation{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
margin: 5% auto 0;
position: static;
top: 0;
left: 0;
li{
width: 100%;
&.imgOcc-sales{
position: static;
}
&.imgOcc-life{
margin-top: 20%;
position: static;
z-index: 10;
}
&.imgOcc-event{
width: 92%;
position: static;
}
}
}
}

/* 250809 */
ul.imgOccupation::before {
    width: 170px;
    top: -3%;
    left: 35%;
}

.pointBox{
width: 100%;
position: relative;
top: 0;
.point{
display: block;
width: 90px;
position: absolute;
top: -40px;
right: 0;
}
.pointList{
width: 100%;
/*max-width: 560px;
max-height: 338px;*/
height: 450px !important;
background-image: url(../images/section_main-point_bg.webp);
background-size: 100%;
background-repeat: no-repeat;
background-position: left top;
position: absolute;
top: 0;
dt{
width: 188px;
height: 28px;
}
dd{
ul{
display: grid;
row-gap: 4px;
width: 90%;
margin: 0 auto;
li{
width: 100%;
}
}
}
}
}
}
}

/* cta */
.sectionBox{
&.cta{
    background-image: url(../images/bg_cta_sp.webp);
    margin-top: 30%;
}

@media screen and (max-width:400px){
   &.cta{
    margin-top: 24%;
} 
}
}

.sectionBox.cta .campaign .small{
    font-size: 0.6rem;
}

.sectionBox.cta .campaign .small .sp-br{
    display: block;
}

.downicon::before{
    width: 27px;
    }
@media screen and (max-width:400px){
.downicon::before{
    width: 24px;
}
}

/* section--1 */
.sectionBox{
&.first{
margin: 0 auto;
padding: 20% 0;
background: #FFFEE9;
text-align: center;
}
.innerBox{
width: 90%;
margin: 0 auto;
.catch{
width: 300px;
margin: 0 auto 15px;
}
.headline{
display: grid;
grid-template-columns: auto auto;
column-gap: 5px;
justify-content: center;
align-items: center;
margin: 0 auto 30px;
img{
&.firstline{
width: 130px;
}
&.secondline{
width: 195px;
}
}
}
.questionBox{
width: 100%;
margin: 0 auto;
padding: 30px 0 40px;
background: #ffffff;
border-radius: 13px;
h2{
color: #31B5E4;
font-weight: bold;
font-size: 22px;
}
.catchBox{
display: grid;
grid-template-columns: 30px auto 30px;
column-gap: 10px;
align-items: center;
justify-items: center;
justify-content: center;
&::before,
&::after{
content: "";
display: inline-block;
width: 2px;
height: 60px;
background: #464E53;
border-radius: 100px;
}
&::before{
transform: rotate(-20deg);
}
&::after{
transform: rotate(20deg);
}
.catch{
width: auto !important;
margin: 0 !important;
font-size: 18px;
font-weight: 600;
.firstline{
display: block;
}
}
}
.choice-workplaceBox{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 20px;
width: 90%;
margin: 30px auto;
input{
display: none;
}
input[type="radio"]:checked + label{
background-color: #31B5E4;
color: #ffffff;
}
label{
display: block !important;
padding: 20px;
background: #D9D9D9;
color: #464E53;
font-weight: bold;
border-radius: 13px;
}
}
}
}
}
/* section--2 */
.sectionBox{
&.second{
.innerBox{
width: 90%;
margin: 0 auto;
.workPlace{
margin-bottom: 40px;
li{
font-size: 14px;
letter-spacing: 0.5px;
}
}
.point--1{
h2{
font-size: 24px;
.secondline{
font-size: 30px;
}
.thirdline{
font-size: 28px;
}
}
img{
width: 220px;
}
}
.point--2{
margin-bottom: 40px;
.catchBox{
margin-bottom: 20px;
font-weight: bold;
}
h2{
font-size: 26px;
}
img{
width: 300px;
}
}
}
}
}
/* section--3 */
.sectionBox{
&.third{
.innerBox{
width: 90%;
h2{
margin: 0 auto 40px;
padding: 30px 0;
img{
width: 80%;
margin: 0 auto;
}
}
.point--1{
row-gap: 30px;
.pointBox{
column-gap: 20px;
.number{
gap: 0px;
.firstline{
font-size: 13px;
line-height: 1;
}
.secondline{
font-size: 45px;
line-height: 1;
letter-spacing: 0.5px;
}
}
.contents{
row-gap: 5px;
font-size: 16px;
letter-spacing: 3px;
}
}
}
}
}
}
/* section--catch */
.sectionBox{
&.catch{
padding: 40px 0;
.innerBox{
width: 90%;
background-image: url(../images/point_img-01.webp),url(../images/point_img-01.webp);
background-size: 7%;
background-repeat:  no-repeat;
background-position: 3% 60%, 97% 60%;
.catchBox{
row-gap: 7px;
font-size: 18px;
font-weight: bold;
.thirdline{
font-size: 28px;
}
}
}
}
}
/* section--4 */
.sectionBox{
&.fourth{
.innerBox{
width: 80%;
.occupationBox{
display: grid;
grid-template-columns: none;
row-gap: 10px;
.illust{
width: 100%;
height: auto;
object-fit: cover;
}
.contents{
width: auto;
.occ--mark{
margin: 0 auto 20px;
padding: 4px 20px 2px;
color: #ffffff;
font-size: 18px;
letter-spacing: 3px;
}
.occ--contents{
.catch{
width: 100%;
margin: 0 0 5px 0;
}
h3{
font-size: 24px;
margin: 0 0 10px 0;
}
.cmnt{
line-height: 1.5;
}
}
}
&.event-staff{
.illust{
order: 1;
}
.contents{
order: 2;
}
}
}
}
}
}
/* section--5 */
.sectionBox{
&.fifth{
margin: 0 auto 40px;
.innerBox{
h2{
img{
width: 80%;
margin: 0 auto 25px;
}
}
img{
width: 70%;
}
.catchBox{
margin: 60px auto;
.firstline{
font-size: 16px;
margin-bottom: 10px;
}
.secondline{
font-size: 26px;
}
}
}
}
}
/* section--6 */
.sectionBox{
&.sixth{
padding: 40px 0;
.innerBox{
width: 90%;
h2{
display: grid;
grid-template-columns: 30px auto 30px;
column-gap: 10px;
&::before,
&::after{
content: "";
display: inline-block;
width: 2px;
height: 70px;
background: #464E53;
border-radius: 100px;
}
&::before{
transform: rotate(-20deg);
}
&::after{
transform: rotate(20deg);
}
.firstline{
display: block;
font-size: 18px;
}
.secondline{
font-size: 24px;
}
}
.syoukaiBox{
display: inherit;
margin: 20px auto;
.persondata{
width: 100%;
margin: 0 auto 20px;
.person{
width: 60%;
}
.data{
width: 70%;
}
}
.contents{
.cmnt{
font-size: 14px;
line-height: 2;
letter-spacing: 1px;
}
}
}
}
}
}
/* section--7 */
.sectionBox{
&.seventh{
margin: 0 auto 40px;
.innerBox{
width: 90%;
h2{
margin: 0 auto 20px;
padding: 30px 0;
border-radius: 13px 13px 0px 0px;
img{
width: 320px;
margin: 0 auto;
}
}
.process{
li{
position: relative;
&::after{
content: "";
display: block;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #97D5EE;
position: absolute;
bottom: -20px;
left: 40%;
}
&:last-child::after{
display: none;
}
}
.processBox{
display: block;
margin-bottom: 40px;
padding: 30px;
background: #F5F5F5;
border-radius: 13px;
}
h3{
text-align: center;
margin-bottom: 15px;
.firstline{
display: block;
}
}
.processcmnt{
font-size: 14px;
}
}
}
}
}
/* section--FAQ */
.sectionBox{
&.FAQ{
.innerBox{
width: 90%;
h2{
margin: 40px auto 20px;
font-size: 24px;
}
.qusetionBox{
row-gap: 20px;
h3{
column-gap: 10px;
padding: 8px 20px;
.questionmark{
font-size: 28px;
}
.questiontit{
font-size: 14px;
line-height: 1.2;
}
}
.answer{
padding: 20px 30px;
font-size: 14px;
}
}
}
}
}

/* section--ending */
.sectionBox{
&.ending{
padding: 40px 0;
.innerBox{
width: 90%;
h2{
margin-bottom: 30px;
img{
width: 200px;
margin: 0 auto;
}
}
.catchBox{
font-size: 16px;
img{
width: 100px;
position: absolute;
bottom: 110px;
right: 10px;
}
}
}
}
}

/* button */
.buttonBoxQ{
margin: 0 auto;
&.line{
width: 100% !important;
a,
a:link{
display: block;
width: 80%;
font-size: 22px;
}
}
}
.js-link{
animation: breathing 1s ease-in-out infinite;
will-change: transform; /* ← スムーズさUP */
}
@keyframes breathing {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.07);
}
}
/* fixed button */
.buttonBox.fixed{
width: 100%;
margin: 0 auto;
padding: 10px 0;
background: rgb(255 255 255 / 70%);
z-index: 100;
a,
a:link{
display: block;
max-width: 300px;
margin: 0 auto;
position: static;
}
}

/* footer */
footer{
width: 100%;
.innerBoxF{
row-gap: 20px;
padding: 30px 0 20px;
.logoBox{
.logo{
width: 80%;
margin: 0 auto;
}
}
.linkBox,
.addressBox{
font-size: 12px;
}
}
.copyrightBox small{
font-size: 10px;
}
}
}

/* 250809 */
@media screen and (max-width:498px){
    
header{
    .innerBoxH{
display: grid;
grid-template-columns: 140px auto 40px !important;
column-gap: 5px;
justify-content: space-around;
align-items: center;
    
.catchBox{
    .firstline{
        font-size: 10px;
    }
  .secondline {
    display: none!important;
    font-size: 10px;
  }
  .secondline-sp {
    display: inline!important;
    font-size: 10px;
  }
}
}
}


.mainBox .innerBox.Main{
display: block;
width: 90%;
height: 370px;
margin: 50px auto 0;
}

.mainBox .innerBox.Main .imgBox ul.imgOccupation::before{
    width: 110px;
    top: -10%;
    left: 30%;
}
/* button */
.buttonBoxQ .js-link .button_round{
    font-size: 14px;
}
.questionBox .buttonBoxQ .js-link .button_round strong{
    font-size: 13px;
}
.buttonBoxQ p small{
    font-size: 12px;
}
}