.sp {display: block;}
.ssp {display: none;}

.page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #3fefee;
  opacity: 0.6;
}
.page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
.page_top a::before{
  font-family: FontAwesome;
  content: '\f062';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

@media screen and (max-width: 768px) {
.sp {display: none;}
.ssp {display: block;}
}

p{
margin-bottom: 0;
}
.row{
margin-right: 0;
margin-left: 0;}

.header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 32px;
background: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
position: fixed;
font-size: 16px;
z-index: 100;
top: 0;
height: 77px;
width: 100%;
}
.header .logo{
display: flex;
align-items: flex-end;
line-height: 1;
}
.header .logo img{
width: 70px;
margin-right: 10px;
}
.header nav a {
margin: 0 16px;
text-decoration: none;
color: #004080;
font-weight: bold;
}
.header nav a:hover{
border-bottom: 1px solid #004080;
}
.cta-btn {
background: #F5A623;
color: #fff;
padding: 9.6px 19.2px;
border-radius: 6px;
text-decoration: none;
}
.cta-btn:hover{
opacity: 0.5;
}
.sp-menu{
position: absolute;
}
.sp-menu__box {
position: fixed;
top: 60px;
right: 10px;
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 40px;
z-index: 100;
background-color: #3584bb;
border-radius: 5px;
}
.sp-menu__box span,
.sp-menu__box span:before,
.sp-menu__box span:after {
content: "";
display: block;
height: 3px;
width: 25px;
border-radius: 3px;
background-color: #ffffff;
position: absolute;
}
.sp-menu__box span:before {
bottom: 8px;
}
.sp-menu__box span:after {
top: 8px;
}
#sp-menu__check {
display: none;
}
#sp-menu__check:checked ~ .sp-menu__box span {
background: rgba(255, 255, 255, 0);
}
#sp-menu__check:checked ~ .sp-menu__box span::before {
bottom: 0;
transform: rotate(45deg);
}
#sp-menu__check:checked ~ .sp-menu__box span::after {
top: 0;
transform: rotate(-45deg);
}
#sp-menu__check:checked ~ .hamburger__content {
left: 0;
}
#sp-menu__check:checked ~ .hamburger-demo-cover{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
background: rgba(3,3,3,.5);
display: block;
}

.sp-menu__content {
width: 45%;
height: 65%;
position: fixed;
top: 6%;
left: 100%;
z-index: 90;
background-color: #f0ffff;
transition: all 0.5s;
}
.sp-menu__list {
padding: 60px 10px 0;
margin-bottom: 10%;
}
.sp-menu__item {
border-bottom: solid 1px #000000;
list-style: none;
font-size: 16px;
padding: 10px 0;
}
.sp-menu__content::backdrop {
background: rgba(0, 0, 0, 0.2);
}

#sp-menu__check:checked ~ .sp-menu__content {
left: 56%;
}
@media screen and (max-width: 1024px) and (min-width: 768px){
.header nav{
display: none;
}
}
@media only screen and (max-width: 767px) {
.header {
padding: 0.5rem 1rem;
height:55px;
}
.header .logo img {
width: 45px;
margin-right: 5px;
}
.header .logo{
font-size: 12px;
}
.header nav{
display: none;
}
.sp-menu .cta-btn {
margin-left: 5%;
}
}
@media screen and (min-width: 1024px) {
.sp-menu {
display: none;
}
}


.hero {
background: linear-gradient(180deg, #00267da3, #00267da3), url(https://stat.ameba.jp/user_images/20251010/11/choice-one/f0/df/j/o3205137415694022501.jpg) center / cover no-repeat;
color: #fff;
padding: 64px 0;
margin-top: 77px;
}
.hero .container {
max-width: 1100px;
width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 40px;
}
.hero .hero-copy {
flex: 1;
}
.hero h1 {
font-size: 30px;
margin-bottom: 12px;
line-height: 1.3;
}
.hero p {
font-size: 16px;
margin-bottom: 20px;
opacity: 0.95;
}
.hero .btns{
display: flex;
justify-content: space-around;
align-items: center;
}
.hero .btns a {
font-size: 16px;
display: inline-block;
padding: 12px 18px;
border-radius: 8px;
font-weight: 700;
width: 40%;
text-align:center
}
.hero .btn-primary {
background:#F5A623;
color: #082033;
}
.hero .btn-primary:hover{
background:#fff;
color: #F5A623;
}
.hero .btn-outline {
background: transparent;
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.18);
}
.hero .btn-outline:hover{
background: #fff;
color: #004080;
}
.hero .hero-visual{
min-width:320px;
max-width:360px
}
.hero .hero-visual img{
width:100%;
border-radius:12px;
box-shadow:0 8px 24px rgba(8,20,40,0.12)
}

@media screen and (max-width: 900px){
.hero .container{
flex-direction:column;
text-align:center
}
.hero .hero-copy {
width: 100%;
}
}
@media only screen and (max-width: 767px) {
.hero {
padding: 32px 0 10px;
margin-top: 55px;
background-position-x: 39%;
}
.hero .container {
gap: 10px;
}
.hero .hero-copy {
width: 100%;
}
.hero h1 {
font-size: 24px;
}
.hero .hero-copy span {
display: none;
}
.hero p {
font-size: 14px;
}
.hero .btns a {
padding: 6px 9px;
width: 45%;
font-size: 14px;
}
.hero .hero-visual img{
width:80%;
}
}
.campaign{
font-family: serif;
padding-top:10px;
margin-bottom: 30px;
}
.campaign .container{
max-width: 1920px;
width: 90%;
margin: 0 auto;
}
.campaign h2{
font-size: 30px;
font-weight: 700;
padding-top: 10px;
color: #00267da3;
text-align: center;
}
.campaign hr{
width: 8%;
margin: 0 auto 40px;
color: #00267da3;
}
.campaign ul{
padding-left: 0;
}
.campaign .slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:100%;
    margin:0 auto;
}

.campaign .slider img {
    width:25vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
}

.campaign .slider .slick-slide {
  transform: scale(0.8);/*左右の画像のサイズを80%に*/
  transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
  opacity: 0.5;/*透過50%*/
}

.campaign .slider .slick-slide.slick-center{
  transform: scale(1);/*中央の画像のサイズだけ等倍に*/
  opacity: 1;/*透過なし*/
}


/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.campaign .slick-prev, 
.campaign .slick-next {
    position: absolute;/*絶対配置にする*/
    top: 38%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.campaign .slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.campaign .slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.campaign .slick-dots {
    text-align:center;
  margin:10px 0 0 0;
}

.campaign .slick-dots li {
    display:inline-block;
  margin:0 5px;
}

.campaign .slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.campaign .slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}

.campaign .pic img{
display: block;
width: 30%;
margin: 10px auto 0;
}

@media only screen and (max-width: 768px) {
 .campaign{
margin-bottom: 0;
}
 .campaign h2{
font-size: 25px;
}
.campaign hr{
margin-bottom: 20px;
width: 25%;
}
.campaign .slider img {
width:65vw;
}
.campaign .slick-prev, 
.campaign .slick-next {
border-top: 0;
border-right: 0;
}
}

.section1{
padding: 10px 0 30px;
margin-top: 40px;
background-color: #f0f8ff;
}
.section1 .container {
max-width: 1200px;
width: 95%;
margin: 0 auto;
}
.section1 h2{
font-size: 22px;
font-weight: 700;
padding-top: 10px;
margin-bottom: 15px;
}
.section1 h2:before {
content: "";
display: inline-block;
vertical-align: sub;
margin-right: 8px;
background: url("https://stat.ameba.jp/user_images/20251020/17/choice-one/56/94/p/o1070102615700048495.png") no-repeat center;
width: 30px;
height: 30px;
background-size: cover;
}

.section1 .job-tabs{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.section1 .tab-button{
width: 18%;
position:relative;
}
.section1 .tab-button:before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: #00267d54;
transition: all .2s ease;
}
.section1 .tab-button:hover:before {
background: transparent;
}
.section1 .tab-button img{
width: 100%;
}
.section1 .tab-button p {
font-size: 22px;
font-weight: bold;
color: #fff;
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
line-height: 30px;
}

.section1 .cards {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 20px;
}
.section1 .card {
font-size: 16px;
font-weight: bold;
width: 20%;
background: #f4f7ff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
text-align: center;
padding: 15px;
cursor: pointer;
transition: 0.3s;
}

.section1 .card:hover,
.section1  .card.active {
background: #004aad;
color: #fff;
transform: translateY(-3px);
}
.section1 .details {
display: none;
margin-top: 10px;
background: #fff;
animation: fadeIn 0.4s ease;
}

.section1 .details.active {
display: block;
}

.section1 .job-content{
display: none;
background: #fff;
border-radius: 10px;
margin-top: 20px;
padding: 20px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.section1 .job-content.active {
display: block;
}
.section1 .job-description {
background: #EAF4FF;
padding: 20px;
border-radius: 8px;
max-width: 950px;
margin: 0 auto 20px;
}
.section1 .tag{
font-size: 16px;
color: #fff;
font-weight: 700;
background-color: #4B8BBE;
padding: 5px;
display: inline-block;
margin-left: 1%;
margin-bottom: 10px;
}
.section1 .job-description h3 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
color: #03396c;
}
.section1 h4 {
font-size: 20px;
font-weight: bold;
margin: 24px 0 10px;
}
.section1 .place{
margin: 24px 0;
}
.section1 .supplement{
font-size: 14px;
color: #555;
}
.section1 .job-info{
line-height: 1.7;
margin-top: 10px;
}
.section1 .job-info p{
font-size: 16px;
margin: 16px 0;
line-height: 1.5;
}
.section1 .content {
display: table;
width: 100%;
}
.section1 .col{
padding: 0 8px;
display: table-cell;
width: 33%;
float: left;
}
.section1 .min{
margin-bottom: 20px;
}
.section1 .body{
display: block;
padding: 10px;
box-shadow: 0 0 8px gray;
background-color: #fff;
}
.section1 .work-place{
display: inline-block;
padding: 5px;
background-color: #5ab4bd;
color: #fff;
font-size: 16px;
font-weight: 700;
}
.section1 .body_min{
display: table;
position: relative;
width: 100%;
}
.section1 .detail{
min-width: auto;
padding-top: 10px;
}
.section1 .detail_ho{
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
.section1 .detail_p{
font-size: 16px;
font-weight: 700;
color: #03396c;
width: 70px;
}
.section1 .wi{
height:90px;
}
.section1 .detail_ho p{
line-height: 1.5;
margin: 4px 0 4px 5px;
font-size: 15px;
width: 270px;
}
.section1 a {
margin-top: 10px;
display: inline-block;
text-decoration: none;
background: #ff8000;
color: #fff;
padding: 0.6rem 1.2rem;
border-radius: 5px;
font-weight: bold;
text-align: center;
width: 100%;
border: solid 1px #ff8000;
}
.section1 a:hover {
background: #fff;
color: #ff8000;
}


@media screen and (max-width: 1024px) and (min-width: 768px){
.section1 .col {
width: 50%;
}
.section1 .card {
width: 30%;
}
}


@media only screen and (max-width: 768px) {
.section1{
margin-top: 20px;
padding: 10px 0 ;
}
.section1 h2{
font-size: 18px;
padding-top: 5px;
margin-bottom: 5px;
}
.section1 h2:before {
width: 25px;
height: 25px;
}
.section1 .tab-button{
width: 30%;
margin-bottom: 5px;
}
.section1 .tab-button p {
font-size: 18px;
}
.section1 .cards {
gap: 10px;
}
.section1 .card {
font-size: 14px;
width: 45%;
padding: 10px;
}
.section1 .job-content {
margin-top: 20px;
padding: 10px;
}
.section1 .job-description {
padding: 10px 5px;
}
.section1 .job-description h3 {
font-size: 20px;
}
.section1 .supplement,
.section1 .tag{
font-size: 12px;
}
.section1 p,
.section1 .job-info p{
font-size: 14px;
margin: 8px 0;
}
.section1 .col{
width: 100%;
}
.section1 .min{
margin-bottom: 10px;
}
.section1 .work-place{
font-size: 14px;
}
.section1 .wi{
height:auto;
}
.section1 .detail_p{
font-size: 14px;
width: 20%;
}
.section1 .detail_ho p{
font-size: 14px;
width: 75%;
}

.section1 a {
margin-top: 10px;
display: inline-block;
text-decoration: none;
background: #ff8000;
color: #fff;
padding: 0.6rem 1.2rem;
border-radius: 5px;
font-weight: bold;
text-align: center;
width: 100%;
border: solid 1px #ff8000;
}
}


.footer {
padding-top: 20px;
font-family: serif;
}

.footer .wrap {
 max-width: 1280px;
 width: 90%;
 margin: 0 auto;
 display: flex;
 flex-wrap: wrap;
justify-content: space-around;
}
.footer .wrap .box {
 width: 48%;
}
.footer .gazou{
 width: 25%;
margin-bottom: 30px;
}
.footer img{
 width: 100%;
}
.footer .box .address{
font-size: 16px;
margin-bottom: 10px;
}
.footer .box p{
font-size: 14px;
margin: 0 0 5px;
}
.footer .box a{
color: #000;
}

@media screen and (max-width: 1024px) and (min-width: 768px){
.footer .wrap .box{
 width: 50%;
}
}
@media only screen and (max-width: 767px) {
.footer {
padding-top: 0;
}
.footer .wrap .box{
 width: 100%;
}
.footer .gazou{
 width: 30%;
margin-bottom: 15px;
}
}