@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");*{margin:0;padding:0}html{font-size:62.5%;margin:0;padding:0;scroll-behavior:smooth;}body{width:100%;height:100%;background-color:#fff;font-family:'Roboto', 'Noto Sans JP',sans-serif;font-size:13px;font-size:1.3rem;font-weight:400;color:#000}img{border:none;vertical-align:bottom;-ms-interpolation-mode:bicubic;max-width: 100%;}
a:hover{text-decoration:none;}
a{
-webkit-transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-ms-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
text-decoration:none;
}
a:hover{opacity: 0.6;}
#Container{width:100%;height:100%;overflow: visible;margin:0 auto;padding:0;position:relative;}
.inner{
width: 90%;
margin: 0 auto;
padding: 50px 0 50px 0;
overflow: hidden;
clear: both;
}
span.red{color:#EC3E2F;}
span.blue{color:#002BFF;}
.pc{display: block;}
.ip{display: none;}
.sp{display: none;}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
.ip{display: block;}
.sp{display: none;}
}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
.pc{display: none;}
.ip{display: none;}
.sp{display: block;}
.inner{
padding:80px 0 80px 0;
}
}
/*--------------------------------
HEADER
---------------------------------*/
#pchead{
background-image: url("../img/mvbg.webp");
background-repeat:no-repeat;
background-size:cover;
overflow: hidden;
height: 100vh;
position:fixed;
width:100%; 

}
#pchead h1{
width:19%; 
position: absolute;
top:16%;
left:calc(25vw - 9.5%);
display: block;
}
#pchead h6 span{
font-family: "proxima-nova", sans-serif;
font-size:1.8rem;
font-weight:900;
letter-spacing: 0.1em;
}
#pchead h6{
font-family: 'Noto Sans JP',sans-serif;
font-size:1.6rem;
display: inline-block;
font-weight:900;
color: #fff;
padding:12px 0;
text-align: center;
border-radius:9999px;
background-color: #3F76D6;
position: absolute;
top: 42%;
left:calc(25vw - 9%);
width:18%;
-webkit-transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-ms-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
text-decoration:none;
line-height: 120%;
letter-spacing: 0.15em;
}
#pchead h6 a{color: inherit;display: block; }
#pchead h6:hover{opacity: 0.8;}
#pchead nav{
display: block;
position: absolute;
top:58%;
left:8%;
text-align: left;
}
#pchead h2{
font-size: 14px;
color: #000;
font-family: "proxima-nova", sans-serif;
display: inline-block;
font-weight: 900;
background-color: #fff;
padding: 2px 8px;
margin: 0 0 2vh 0;
}
#pchead nav li{
margin: 0 0 2vh 0;
}
#pchead nav li span{
color: #fff;
font-family: "proxima-nova", sans-serif;
font-size: 2.0rem;
font-weight: 900;
letter-spacing: 0.1em;
transition: font-size 0.3s ease, transform 0.3s ease;
line-height:100%;
}
#nav li.active span {
font-size:3.0rem;
}
#pchead #head_join{
display: block;
position: absolute;
bottom:4%;
left:calc(25vw - 135px);
text-align: left;
background-color: #D8D1B7;
padding: 10px 20px;
border-radius: 30px;
border: 5px solid #fff;
}
#pchead #head_join dl{
display: flex;
align-items: center;
gap: 10px;
}
#pchead #head_join dt{
width:50px;
}
#pchead #head_join dd{
width: 100%;
display: block;
}
#pchead #head_join h4{
font-family: "proxima-nova", sans-serif;
font-weight: 900;
font-size:1.9rem;
color: #000;
display: block;
}
#pchead #head_join h5{
font-family: "kozuka-gothic-pr6n", sans-serif;
font-size:1.2rem;
font-weight: 900;
line-height: 160%;
letter-spacing: 0.1em;
color: #000;
display: block;
}
/*--------SMALL TATEPC-------*/
@media screen and (min-width: 1280px) and (max-width: 1366px) and (max-height: 770px) {
#pchead h1{top:8%;}
#pchead h6{top:32%;}
#pchead nav{top:50%;}
#pchead h6{font-size:1.5rem;letter-spacing: 0.05em;}
}
@media (min-aspect-ratio: 15/9) and (max-aspect-ratio: 17/9) {
#pchead h1{top:8%;}
#pchead h6{top:32%;}
#pchead nav{top:50%;}
#pchead h6{font-size:1.5rem;letter-spacing: 0.05em;}
}


/*--------BIG PC-------*/
@media only screen and (min-width: 1800px) {
}
/*--------SMALL PC-------*/
@media only screen and (max-width: 1340px) {
#pchead nav{left:2%;}
#pchead h1{left:calc(25vw - 16%);width:25%;}
#pchead h6{left:calc(25vw - 16%);width:25%;top:33%;}
#nav li.active span {font-size:2.5rem;}
#pchead #head_join{left:calc(25vw - 175px);}
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
#pchead{display: none;}
}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
}
/* -------------------------- */
/* Trigger */
/* ------------------------- */
#menuhead{display: none;}
.overlay {
content: "";
display: block;
width: 0;
height: 0;
background: linear-gradient(to bottom, #568B79, #9FE3CC);
background: -webkit-linear-gradient(top, #568B79, #9FE3CC);
background: -moz-linear-gradient(top,#568B79, #9FE3CC);
position: absolute;
top: 0;
left: 0;
z-index:50;
opacity: 0;
transition: opacity .5s;
backdrop-filter: blur(6px);
}
.overlay.open {
width: 100vw;
height:100vh;
opacity: 1;
position: fixed;
left: 0; top: 0;
}
.menu-trigger {
display: inline-block;
width:30px;
height:16px;
vertical-align: middle;
cursor: pointer;
position: fixed;
top:calc(0.6vw + 20px);
right:3vw;
z-index: 100;
transform: translateY(0);
transition: all 0.4s ease;
}
#conte_header.isSmall .menu-trigger{top:calc(0.6vw + 15px)!important;transition: all 0.4s ease;}
.menu-trigger.active {
transform: translateY(0px);
}
.menu-trigger span {
display: inline-block;
box-sizing: border-box;
position: absolute;
left: 0;
width:30px;
height:4px;
background-size: cover;
background-repeat: no-repeat;
background-color: #fff;
animation:5.5s ease forwards;
}
.menu-trigger:hover{
opacity: 0.6;
}
.menu-trigger span:nth-of-type(1) {
transition: .2s;
top: 0;
}
.menu-trigger.active span:nth-of-type(1){
transform: rotate(328deg);
transition: .2s;
top: 10px;
background-color:#ccc;
}
.menu-trigger span:nth-of-type(2) {
transition: .2s;
top:10px;
}
.menu-trigger.active span:nth-of-type(2) {
transform: rotate(211deg);
background-color:#ccc;
}
#menuhead nav{
width:90vw;
height: 100vh;
padding-top:15vh;
position: fixed;
top: 0;
right:5%;
z-index:99;
transform: translateY(-110vh);
transition: all 0.0s;
}
#menuhead nav.open {transform: translateX(0);}
#menuhead nav li {
transition: all 5.5s;
}
/* ANIME */
.fade-in-text li span {
display:inline-block;
position: relative;
opacity: 0;
transform: translateY(50px);
}
.animate {
animation: slideIn 1.5s ease forwards;
}
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  20% {
    opacity: 0;
    transform: translateY(20px);
  }
100% {
    opacity: 1;
    transform: translateY(0); /* 最終状態：通常の位置に */
  }
}
.fade_in {
animation: fade_in 0.5s ease forwards;
}
@keyframes fade_in {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
100% {
    opacity: 1;
  }
}
/**/
#menuhead{position: relative;}
#menuhead h1{
position: absolute;
top:4.5vh;
left:40px;
width:20vh;
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
#menuhead{
height: 100vh;
background-image: url("../img/mvbg_sp.webp");
background-size: cover;
background-repeat: no-repeat;
position: relative;
display:block;
justify-content: center; /* 横方向中央 */
align-items: center; 
}
#menuhead h1{
position: absolute;
top:49%;
left: 50%;
transform: translate(-50%, -50%);
width: 75%;
text-align: center;
}
#menuhead h6{
position: absolute;
top:70%;
left: 50%;
transform: translate(-50%, -50%);
width:50%;
text-align: center;
font-family:'Noto Sans JP',sans-serif;
font-size: 1.6rem;
display: inline-block;
line-height:120%;
font-weight: 900;
color: #fff;
padding:10px 0px;
border-radius:9999px;
background-color: #3F76D6;
letter-spacing: 0.15em;
}
#menuhead h6 span{
font-family: "proxima-nova", sans-serif;
font-size:1.8rem;
font-weight:900;
letter-spacing: 0.1em;
}
#menuhead h6 a{color: inherit;display: block; }

#menuhead h2{
font-size:14px;
color: #000;
font-family: "proxima-nova", sans-serif;
display: inline-block;
font-weight: 900;
background-color: #fff;
padding:5px 10px;
margin: 0 0 20px 0;
text-align: left;
float: left;
}
#menuhead nav{
width:90%;
padding:20vh 0 0 0;
margin: 0 auto;
}
#menuup{
width: 100%;
padding:0px 0vw 0vh 0vw;
color: #fff;
font-family: "proxima-nova", sans-serif;
display: inline-block;
font-weight: 900;
font-size:25px;
}
#menuup li{
line-height: 250%;
text-align: left;
}
#menuup li a{
color: #fff;
}
#menuup li a::after,#menudown li a::after {display: none;}
#menuup::after{
}
#menuup::after{
width:70%;
height: 1px;
bottom: 0;
left:10vw;
}
#menuhead h3{
font-size:14px;
color: #fff;
font-family: "proxima-nova", sans-serif;
display: inline-block;
font-weight:lighter;
margin:3vh 0 3vh 0;
text-align:center;
}
#menusns{
float:none;
padding:0px;
margin: 0;
}
#menusns li{
display: inline-block;
text-align: left;
width:35px;
margin: 0 1px;
}
#menusns li:hover{filter:none;opacity:1;transform: translateY(0px);}
#menuhead h4{
display: inline-block;
position: absolute;
bottom: 25vw;
left:0;
right: 0;
margin: auto;
text-align:center;
width: 30%;
}
}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
.menu-trigger {
top:calc(1vw + 28px);
right:6vw;
}
#conte_header.isSmall .menu-trigger{top:calc(2.5vw + 15px)!important;}

#menuhead h6{
position: absolute;
top:78%;
left: 50%;
transform: translate(-50%, -50%);
width: 75%;
text-align: center;
line-height:140%;
font-weight: 900;
color: #fff;
padding:10px 0px;
border-radius:9999px;
background-color: #3F76D6;
}

}
/*--------------------------------
ARTICLE
---------------------------------*/
#rpt_article{
width: 640px;
position: relative;
display: block;
z-index: 2;
left:50vw;
}
/*--------SMALL PC-------*/
@media only screen and (max-width: 1340px) {
#rpt_article{left:42vw;width: 580px;}
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
#rpt_article{left:0vw;}
#rpt_article{width:100%;}
}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
}

/*--------------------------------
SECTION1 whatrpt
---------------------------------*/
#whatrpt{
background-color:#D6473F;
padding:100px 20px 150px;
min-height:calc(100vh + 20px);
}
#whatrpt h1{
font-family: "proxima-nova", sans-serif;
font-size:4.5rem;
line-height: 120%;
color: #fff;
font-weight: 900;
text-align: left;
position: relative;
z-index: 0;
overflow: visible;
}
#whatrpt h1 span{
font-weight:400;
color: #fff;
display: block;
z-index: 2;
letter-spacing: -0.05em;
}
#whatrpt h1::after{
content: '';
position: absolute;
top: 50%;
left:-20px;
transform: translateY(-50%);
width:90%; /* 横幅 */
height: 150px; /* 高さ */
background-color: #F44B42;
border-radius: 0 100px 100px 0; /* 右側に半円 */
z-index:-1;
}
#whatrpt h2{
font-family: "kozuka-gothic-pr6n", sans-serif;
font-size:2.2rem;
font-weight: 900;
color: #fff;
text-align: left;
margin:90px 0 50px 0;
}
#whatrpt p{
font-family: "kozuka-gothic-pr6n", sans-serif;
font-size:1.6rem;
font-weight: 600;
color: #fff;
line-height:240%;
text-align: left;
letter-spacing: 0.2em;
}
/*--------SMALL PC-------*/
@media only screen and (max-width: 1340px) {
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
#whatrpt h1{font-size: 3.5rem;}
#whatrpt h1::after{width:100%;height:150px;}
}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
#whatrpt h1::after{width:108%;height:150px;}
#whatrpt p{letter-spacing: 0.1em;}
}

/*--------------------------------
SECTION2 benefit
---------------------------------*/
#benefit{
display: block;
position: relative;
background-color: #568B79;
padding: 30px 0 0 0;
}
#benefit_tit{
position: relative;
z-index: 0;
overflow: visible;
margin: -50px auto 0;
}
#benefit_inner{
padding:100px 20px 0px;
}

#benefit_tit h1{
font-family: "proxima-nova", sans-serif;
font-size:3.5rem;
line-height: 120%;
color: #fff;
font-weight: 900;
text-align:center;
}
#benefit_tit h3{
font-family: "kozuka-gothic-pr6n", sans-serif;
font-size:1.2rem;
font-weight: 900;
line-height: 160%;
letter-spacing: 0.1em;
color: #fff;
text-align:center;
}
#benefit_tit::after{
content: '';
position: absolute;
top: 50%;
left:0px;
transform: translateY(-50%);
width:100%; /* 横幅 */
height: 150px; /* 高さ */
background-color: #000;
border-radius: 0 50px 0px 50px;
z-index:-1;
}
/**/
.benefit{
position: relative;
margin: 50px auto;
}
.benefit_no{
text-align: left;
position: absolute;
top: -50px;
z-index: 2;
}
.benefit_no h4{
font-family: "proxima-nova", sans-serif;
font-size:2.0rem;
line-height: 100%;
color:#fff;
text-shadow:2px 2px #000;
display:block;
}
.benefit_no h5{
font-family: "proxima-nova", sans-serif;
font-size:8.2rem;
line-height: 100%;
color:#fff;
font-weight: lighter;
font-style: italic;
text-shadow:3px 3px #000;
display: inline-block;
margin: -10px 0 0;
letter-spacing: -0.05em;
}
.benefit_box{
text-align: left;
position: relative;
}
.benefit_pic{
width:93%;
height:93%;
text-align: left;
box-shadow:20px 20px 0px rgba(0, 0, 0, 1.0);
display: block;
position: relative;
z-index: 0;
margin: 0 0 0 10px;
overflow: hidden;
}
.benefit_tit{
display:inline-block;
position: relative;
z-index: 1;
font-family: "kozuka-gothic-pr6n", sans-serif;
font-size:2.0rem;
font-weight: 900;
line-height: 160%;
color: #000;
padding:20px 20px;
background-color:#EDEEE9;
text-align: left;
letter-spacing: 0.3em;
margin: -20px 0 0 0;
}
.benefit_txt{
font-family: "kozuka-gothic-pr6n", sans-serif;
font-size:1.6rem;
font-weight:bold;
line-height: 180%;
color: #fff;
text-align: left;
margin:30px auto;
width:80%;
letter-spacing: 0.35em;
padding: 0 0 80px 0;
}
.benefit h6{
display: inline-block;
padding:10px 20px 10px 35px;
margin: 50px 0 0 0;
position:absolute;
bottom: 0;
right:40px;
text-align: right;
background-color: #9F9F9F;
color: #fff;
border-radius:20px;
}
.benefit h6 a{color: #fff;}
.benefit h6::before{
content: '';
position: absolute;
width: 15px;
height: 15px;
background-image: url("../img/link.webp");
background-repeat: no-repeat;
background-size: contain;
left:12px;
top:10px;
}
#benefit_bottom{
width: 100%;
}
.benefit_pic {
position: relative;
padding-top:100%;
overflow: hidden;
}
.benefit_pic img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 0;
}
.benefit_pic img.active {opacity: 1;z-index: 1;}
.benefit_box .dots {
text-align: center;
margin-top: 10px;
position: absolute;
top:10px;
z-index: 5;
left: 0;
right: 0;
margin: auto;
}

.dots span {
display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
}
.dots span.active {background: #000;}

/*--------SMALL PC-------*/
@media only screen and (max-width: 1340px) {
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
.benefit_pic{width: 90%;height: 90%;}
.benefit_txt{letter-spacing: 0.1em;width: 100%;}

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

/*--------------------------------
SECTION3 sponcer
---------------------------------*/
#sponcer{
display: block;
position: relative;
background-color: #fff;
padding: 50px 50px;
margin: -20px 0 0 0;
scroll-margin-top: 100px;
}
#sponcer_tit{
position: relative;
z-index: 0;
overflow: visible;
background-color: #D6473F;
border-radius: 9999px;
margin:0px auto;
text-align: center;
box-shadow:10px 10px 0px rgba(0, 0, 0, 1.0);
padding: 20px 50px;
}
#sponcer_tit h1{
font-family: "proxima-nova", sans-serif;
font-size:3.5rem;
line-height: 120%;
color: #fff;
font-weight: 900;
text-align:center;
}
#sponcer_tit h3{
font-family: "kozuka-gothic-pr6n", sans-serif;
font-size:1.2rem;
font-weight: 900;
line-height: 160%;
letter-spacing: 0.1em;
color: #fff;
text-align:center;
}
#sponcer ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
padding: 0 20px;
margin:20px auto;
gap: 20px;
max-width: 90%;
}
#sponcer li{
width: calc(45% - 0px);
box-sizing: border-box;
}

/*--------SMALL PC-------*/
@media only screen and (max-width: 1340px) {
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
#sponcer{padding: 50px 20px;margin: 50px auto 0px;}
#sponcer_tit h1{font-size:3.5rem;white-space: nowrap;}
#sponcer_tit{padding: 20px 0px;}
}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
}

/*--------------------------------
SECTION4 pickup
---------------------------------*/
#pickup{
display: block;
position: relative;
background-color: #fff;
padding: 50px 0px;
}
#pickup_tit{
position: relative;
overflow: visible;
margin:0px auto;
text-align: center;
padding: 20px 50px;
z-index: 3;
}
#pickup_tit::after {
content: "";
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left:105px solid transparent;
border-right: 105px solid transparent;
border-top: 125px solid #000;
z-index: 1;
}
#pickup_tit h1{
font-family: "proxima-nova", sans-serif;
font-size:1.8rem;
line-height: 120%;
color: #fff;
font-weight: 900;
text-align:center;
z-index: 2;
position: relative;
margin: -50px auto 0;
}
#pickup_tit h3{
font-family: "kozuka-gothic-pr6n", sans-serif;
font-size:1.2rem;
font-weight: 900;
line-height: 160%;
letter-spacing: 0.1em;
color: #fff;
text-align:center;
position: relative;
z-index: 2;
}
#pickup_bottom{
margin: 50px auto -50px;
overflow: hidden;
}
/*--------SMALL PC-------*/
@media only screen and (max-width: 1340px) {
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
}

/*--------------------------------
SECTION5 member
---------------------------------*/
#member{
background-color: #EDEEE9;
margin: -100px auto 0;
padding:0px 0 150px 0;
}
#member_tit{
position: relative;
z-index: 0;
overflow: visible;
padding:0px 0 0px 0;
margin:-50px 0 100px 0;
}
#member_tit h1{
font-family: "proxima-nova", sans-serif;
font-size:3.5rem;
line-height: 120%;
color: #fff;
font-weight: 900;
text-align:center;
}
#member_tit h3{
font-family: "kozuka-gothic-pr6n", sans-serif;
font-size:1.2rem;
font-weight: 900;
line-height: 160%;
letter-spacing: 0.1em;
color: #fff;
text-align:center;
}
#member_tit::after{
content: '';
position: absolute;
top: 50%;
left:0px;
transform: translateY(-50%);
width:100%; /* 横幅 */
height: 150px; /* 高さ */
background-color: #000;
border-radius: 0 50px 0px 50px;
z-index:-1;
}
.member_box{
background-color: #fff;
padding:30px;
margin:20px 20px;
border-radius: 20px;
}
.member_box h2{
font-family: "kozuka-gothic-pr6n", sans-serif;
font-size:2.0rem;
font-weight: 900;
line-height: 160%;
}
.member_box h3{
font-family: "kozuka-gothic-pr6n", sans-serif;
font-size:1.9rem;
font-weight: 900;
line-height: 160%;
letter-spacing: 0.2em
}
.member_box h3 span{
font-size:3.7rem;
letter-spacing: 0.1em
}
.member_box h4{
font-family: "kozuka-gothic-pr6n", sans-serif;
font-size:1.9rem;
font-weight: 900;
line-height: 160%;
letter-spacing: 0.1em;
margin: 0 0 20px 0;
}
.member_box h5{
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
font-size:0.9rem;
font-weight: bold;
line-height: 160%;
margin: 0 0 20px 0;
letter-spacing: 0.1em
}
.member_box h7{
font-family:'Noto Sans JP',sans-serif;; 
font-size:2.2rem;
font-weight:900;
line-height: 130%;
margin:30px 0 30px 0;
letter-spacing: 0.1em;
text-align: center;
color:#DB1313;
display: block;
}


.member_boxs{
overflow: hidden;
display: flex;
align-items: center;
margin: 0 auto 50px;
}
.member_boxl{
background-color: #438D79;
width: 114px;
height: 114px;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
border-radius: 50%;
font-family: "kozuka-gothic-pr6n", sans-serif;
font-size:1.2rem;
font-weight: 900;
color: #fff;
line-height: 160%;
}
.member_boxr{
font-family: "kozuka-gothic-pr6n", sans-serif;
font-size:1.8rem;
font-weight: 900;
line-height: 160%;
vertical-align: middle;
text-align: left;
width: auto;
flex-grow: 1;
margin: 0 0 0 50px;
letter-spacing: 0.2em;
}
#member h6{
margin: 50px 200px;
background-color: #438D79;
padding: 15px 50px;
font-family: "kozuka-gothic-pr6n", sans-serif;
font-size:1.6rem;
font-weight: 900;
color: #fff;
border-radius:9999px;
}
/*--------SMALL PC-------*/
@media only screen and (max-width: 1340px) {
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
#member h6{margin: 50px 50px;}
.member_boxl{width: 104px;height: 104px;}
#member_tit{margin:0vw 0 100px 0;}
}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
.member_boxr{font-size:1.5rem;}
.member_boxr{margin: 0 0 0 20px;letter-spacing: 0.05em;}
#member_tit{margin:20vw 0 100px 0;}
}
/**/
/*--------------------------------
SLIDE MODAL
---------------------------------*/
.pickup-slider {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  min-height: 400px;
}

.pickup-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(100%); /* 初期位置：右側に */
  transition: transform 0.6s ease, opacity 0.6s ease;
  z-index: 0;
}

.pickup-slide.active {
  opacity: 1;
  transform: translateX(0%); /* 表示位置にスライド */
  z-index: 1;
}

.pickup-slide img {
width: 100%;
height: auto;
display: block;
cursor: pointer;
}

.pickup-slide.active:hover {opacity: 0.5;}
.pickup-dots {
text-align: center;
margin-top: 10px;
position:absolute;
z-index: 5;
bottom:40px;
left: 0;
right: 0;
margin:auto;
}
.pickup-dots .dot {
display: inline-block;
width:40px; height:5px;
background: #ccc;
margin: 0 5px;
border-radius:9999px;
cursor: pointer;
}
.pickup-dots .dot.active {
background:#D6473F;
}
/* モーダル */
.modal {
display: none;
opacity: 0;
transition: opacity 0.4s ease;
position: fixed;
z-index:10000!important;
left: 0; top: 0;
width: 100%; height: 100%;
background-color: rgba(0,0,0,0.7);
justify-content: center;
align-items: center;
}
.modal.show {display: flex;opacity: 1;}
.modal-inner {
background: #fff;
padding: 30px 50px;
max-width:1080px;
width: 90%;
position: relative;
height:95vh;
}
.modal-inner h1{
font-family: "proxima-nova", sans-serif;
font-size:4.5rem;
line-height: 120%;
color: #000;
font-weight: 900;
text-align:center;
}
.modal-inner h3{
font-family: "kozuka-gothic-pr6n", sans-serif;
font-size:1.2rem;
font-weight: 900;
line-height: 160%;
letter-spacing: 0.1em;
color: #000;
text-align:center;
}
.modal .close {
position: absolute;
top:30px;
right:30px;
cursor: pointer;
}
.close-x {
position: relative;
width:50px;   /* 横幅（調整可） */
height:50px;  /* 高さ（調整可） */
display: inline-block;
}
.close-x::before,
.close-x::after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 100%;
  height:1px;
  background-color: black; /* 線の色 */
  transform-origin: center;
}
.close-x::before {transform: rotate(45deg);}
.close-x::after {
  transform: rotate(-45deg);
}
.close-text {font-size:1.6rem;}
.html-slide {display: none;}
.html-slide h2{
font-family: "kozuka-gothic-pr6n", sans-serif;
font-size:2.5rem;
font-weight: 900;
line-height: 160%;
margin: 0 0 5vh 0;
text-align: left;
width: 100%;
}
.html-slide.active {display: block;}
.html-nav {text-align: center;margin-top: 20px;}
.html-nav button {padding: 5px 20px;font-size: 16px;}
.modalbox{
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
align-items: center;
justify-content: center;
object-fit: contain;
}
.modalbox img{
max-height: 80vh;
height: auto;
width: auto;
max-width: 100%;
object-fit: contain;
display: block;
}
.modalbox_pic{
clear: both;
overflow:hidden;
display: block;
margin-bottom: 1em;
text-align: center;
}
.modalbox_pic img{width:60%;text-align: center;margin: 0 auto 5vh;}
.modalbox_txt{
display: block;
font-family: "kozuka-gothic-pr6n", sans-serif;
font-size:1.6rem;
line-height: 160%;
text-align: left;
font-weight: bold;
}
/*--------SMALL PC-------*/
@media only screen and (max-width: 1340px) {
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
.pickup-slider {height:500px;min-height:400px;}
.modal .close {
top:auto;
bottom: 10px;
right:0;
left: 0;
text-align: center;
margin: auto;
font-size: 30px;
}
.modal-inner {height:90vh;padding: 10px;}
.modalbox img{max-height:65vh;}

}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
.pickup-slider {height:300px;min-height:200px;}
}
/*--------------------------------
FOOTER
---------------------------------*/
footer {
position: relative;
height:auto;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: -120px auto 0px;
}
footer::before {
content: "";
position: absolute;
inset: 0;
background-image: url("../img/footerbg.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
}
.footer-inner {padding: 230px 0 10px 0;}
footer h1{
font-family: "proxima-nova", sans-serif;
font-size:3.0rem;
font-weight: 400;
color: #fff;
margin:0px auto 70px;
padding:0px 0 0 0;
position: relative;
}
footer ul{
text-align: center;
margin: 0 auto 70px;
}
footer li{
display: inline-block;
margin: 0 3px;
width: 38px;
height: 38px;
}
footer h2{
width:220px;
margin: 0 auto 70px;
}
footer h4{
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
color: #fff;
line-height: 160%;
font-size: 1.2rem;
margin: 0 auto 50px;
}
/*--------SMALL PC-------*/
@media only screen and (max-width: 1340px) {
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
footer{height:calc(900px - 5vw);margin:-120px auto 60px;}
}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
footer{height:calc(650px - 5vw);margin:-120px auto 60px;}
footer::before {background-image: url("../img/footerbg.webp");background-position: right;}
}
/*--------------------------------
FOOT_JOPIN
---------------------------------*/
#foot_join{display: none;}
/*--------SMALL PC-------*/
@media only screen and (max-width: 1340px) {
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
#foot_join{
width: 100%;
height: 65px;
background-color: #D8D1B7;
padding: 10px 20px;
position:fixed;
bottom: 0;
z-index: 3;
display: flex; /* ← flexにする */
justify-content: center; /* 横中央 */
align-items: center;     /* 縦中央 */
text-align: center;
}
#foot_join dl{
display: flex;
gap: 10px;
width:auto;
margin: 0;
align-items: center;
}
#foot_join dt{
width:70px;
}
#foot_join dd{
width: 100%;
display: block;
}
#foot_join h4{
font-family: "proxima-nova", sans-serif;
font-weight: 900;
font-size:1.9rem;
color: #000;
display: block;
text-align: left;
}
#foot_join h5{
font-family: "kozuka-gothic-pr6n", sans-serif;
font-size:1.2rem;
font-weight: 900;
line-height: 160%;
letter-spacing: 0.1em;
color: #000;
display: block;
text-align: left;
}
}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
}


/*--------------------------------
ANIMATION
---------------------------------*/
/*シンプル下フェードイン*/
.fade-in-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-up.visible {
opacity: 1;
transform: translateY(0);
}

.anim-boxl {
  animation: fadeupl 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.anim-boxr {
  animation: fadeupr 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes fadeupl {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeupr {
  0% {
    transform: translateX(200px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.slidein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.0s;
}
.slidein2 {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
}
.slidein3 {
    opacity: 0;
    transform: translate(0,0);
    transition: all 2.0s;
}
.slideinc {
    opacity: 0;
    transform: translate(0,0);
    transition: all 0.5s;
}

.slidein4 {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
}
.slidein42 {
    opacity: 0;
    transform: translate(0,0);
    transition: all 0.5s;
}
.slidein-left{
      transform: translate(-100%,0);
  }
.slidein-left2{transform: translate(-400%,0);}
.slidein-right{
      transform: translate(100%,0);
  }
.slidein-right2{transform: translate(70%,0);}
.slidein-up{
      transform: translate(0,100px);
  }
.slidein-bottom{
      transform: translate(0,100%);
  }
.scrollin{
    transform: translate(0, 0)!important;
    opacity: 1!important;
  }
.fuwa{
transform-origin: center bottom;
animation: yurayura 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes yurayura {
  0% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(2%);
  }
}
.fuwatxt{
transform-origin: center bottom;
animation: yurayuratxt 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes yurayuratxt {
  0% {
    transform: translateY(2%);
  }
  100% {
    transform: translateY(-2%);
  }
}