@charset "utf-8";
/* -------------------- 下層共通 -------------------- */
#lower{
    background-color: #F4F4F4;
}
#lower-kv {
    width: 100%;

}
.lower-kv-wrap{
   width: 100%;
   height: 40%;
   text-align: right;
    background-image: url(/wp-content/uploads/2024/12/bg01.webp);
    background-position: center;
    background-size: cover;
    position: relative;
}
.h1-wrap{
     position: absolute;
     transform: translateY(-50%);
     top:50%;
     left: min(4.1666vw, 50px);;
}
#lower-kv h1{
    font-size: clamp(42px, 7.9166vw, 95px);
    line-height: 1;
    color: #000;
    text-align: left;
    font-weight: 900;
    position: relative;
}
#lower-kv .h1-sub{
    line-height: 1.8;
    display: block;
    font-size: clamp(11px, 2vw, 24px);
    color: #000;
    font-weight: 500;
    margin-left: 0.6vw;
}
#lower-kv .h1-en{

   position: absolute;
   left: clamp(40px, 6vw, 80px);
   top: clamp(44px, 7.6vw, 90px);
   width: clamp(160px, 38vw, 470px);
}

@media screen and (max-width: 767px) {

}
@media screen and (max-width: 600px) {
.h1-wrap {
    top: 60%;
}
}
/* -------------------- breadcrumbs -------------------- */
.breadcrumbs-wrap{
    width: 100%;
    text-align: left;
    padding-top:  min(0.8333vw, 10px);
    padding-left: min(4.1666vw, 50px);
    padding-bottom: min(1.666vw, 20px);
}
.breadcrumbs{
    font-size: clamp(10px, 1vw, 12px);
    line-height: 1;
        vertical-align: middle;
        color: #121212;
}
img.arrow02{
    width: clamp(4px, 0.4166vw, 5px);
    margin: 0 8px;
}
/* -------------------- business -------------------- */

/* ----- section business01 ----- */
#business01{
    padding-top: min(8.333vw,100px);
    padding-bottom: min(8.333vw,100px);
   background-color: #fff;
}
.busi-wrap01, .busi-wrap02{
   display: flex;
   flex-wrap: wrap;
}
.busi01-45{
   width:45%;
   position: relative;
}
.busi01-55{
   width:55%;
}
img.busi-img{
    width: 100%;
}
.num{
    font-size: min(12.5vw,150px);
    line-height: 1;
    position: absolute;
    top:0;
    left: min(2.5vw, 30px);
    display: inline-block;
    font-family: 'Anton', sans-serif;
    color: transparent;
    -webkit-text-stroke: 1px #FFE7A5;
    text-stroke: 1px #FFE7A5;
}
h2.lower-h2{
    color: #121212;
   font-size: clamp(24px, 2.666vw, 32px);
}
.lower-h2-en{
    color: #121212;
    font-size: clamp(10px, 1vw, 12px);
    font-weight: 400;
    line-height: 1.2;
}

#business p{
   font-size: clamp(14px, 1.25vw, 15px);
   width: clamp(240px, 26.666vw, 320px);
   margin-top: min(1.666vw,20px);
}
#business .text-wrap{
    text-align: left;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translateY(-50%)translateX(-50%);
}
#business .btn01{
    margin-top: min(1.666vw,20px);
}

.busi01-mid{
    padding-top: clamp(40px, 6.666vw, 80px);
    padding-right: clamp(20px,10vw,200px);
}
img.busi01{
    aspect-ratio: 5 / 3;
    object-fit: cover;
    object-position: center;
}
.busi01-low{
    display: flex;
   flex-wrap: wrap;
   margin-top: clamp(40px, 6.666vw, 80px);
   row-gap: 20px;
}
.busi01-low-left{
    text-align: left;
    width: 50%;
}
.busi01-low-right{
    text-align: left;
    width: 50%;
}
.works-title{
    font-size: clamp(16px, 1.666vw, 20px);
    font-weight: 500;
    color: #000;
	text-align: left;
}

.works-title:before{
    content: '■';
    color: #F3BE00;
    margin-right: 4px;
}
.flow-wrap li{
   background-color: #000;
   width:  min(41.666vw,500px);
   height: clamp(28px, 3.6vw, 46px);
   display: block;
   text-align: left;
   margin-top: clamp(4px, 0.666vw, 8px);
   display: flex;
   align-items: center;
}
.b-num{
   font-size: clamp(15px, 1.5vw, 18px);
   color: #999;
   width: clamp(24px, 3.333vw, 40px);
   display: inline-block;
   margin-left: clamp(10px, 1.666vw,20px);
   font-family: 'Anton', sans-serif;
   letter-spacing: 0.05em;
}
.flow{
    font-size: clamp(14px, 1.25vw, 15px);
    color: #fff;
}
#business01 ul.img-wrap{
   display: flex;
   flex-wrap: wrap;
   gap: 5%;
   row-gap: 20px;
}
.img-wrap li{
    width: 47.5%;
}
#business sub{
    font-size: clamp(11px, 1.25vw, 14px);
    line-height: 1.4;
}

@media screen and (max-width: 600px) {
.busi01-45{
   width:100%;
   margin-top: 30px;
   display: flex;
   justify-content: center;
}
.busi01-55{
   width:100%;
}
.busi-wrap01{
    flex-direction: column-reverse;
}
#business .text-wrap{
    position: relative;
    top:initial;
    left:initial;
    transform: initial;
}
.busi01-low-left{
    width: 100%;
}
.busi01-low-right{
    width: 100%;
}
.flow-wrap li{
   width:  100%;
}
}
/* ----- section business02 ----- */
#business02{
    padding-top: min(8.333vw,100px);
    padding-bottom: min(8.333vw,100px);
}


/* ----- section business03 ----- */
#business03{
    padding-top: min(8.333vw,100px);
    padding-bottom: min(8.333vw,100px);
   background-color: #fff;
}

/* ----- section business04 ----- */
#business04{
    padding-top: min(8.333vw,100px);
    padding-bottom: min(8.333vw,100px);
}


/* -------------------- price -------------------- */

/* ----- section price01 ----- */
#price01{
    padding-top: min(8.333vw,100px);
}
#price table{
    width: 100%;
    margin-top: min(2.5vw,30px);
}

#price th{
    font-size: clamp(12px, 1.25vw, 15px);
    font-weight: 500;
    padding: clamp(6px, 1vw,12px);
    background-color: #121212;
    border: 1px solid #121212;
    color: #fff;
    line-height: 1.3;
    vertical-align: middle;
}
#price td{
    font-size: clamp(12px, 1.25vw, 15px);
    font-weight: 500;
    padding: clamp(6px, 1vw,12px);
    background-color: #fff;
    border: 1px solid #ccc;
    line-height: 1.3;
      vertical-align: middle;
}
.td01{
    text-align: left;
}
.td02{
    text-align: right;
}

@media screen and (max-width: 600px) {

.table-wrap {
    overflow-x: auto;
    display: block;
}

.table-wrap table th,
.table-wrap table td {
    white-space: nowrap;
}
.table-wrap::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.table-wrap::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

.table-wrap::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

.table-wrap::-webkit-scrollbar-thumb:hover {
    background: #555;
}
}
/* ----- section price02 ----- */
#price02{
    padding-top: min(8.333vw,100px);
}

/* ----- section price03 ----- */
#price03{
    padding-top: min(8.333vw,100px);
}

/* ----- section price04 ----- */
#price04{
    padding-top: min(8.333vw,100px);
    padding-bottom: min(8.333vw,100px);
}

/* -------------------- archive -------------------- */

/* ----- section archive01 ----- */
#archive01{
    padding-top: min(8.333vw,100px);
    padding-bottom: min(8.333vw,100px);
    background-color: #fff;
}

.archive-wrap{
    display: flex;
    gap: min(3.333vw, 40px);
    margin-top: min(3.333vw,40px);
}



#archive .category-item{
    width: min(22.5vw, 270px);
    text-align: left;

}
.m-space{
    margin-top: min(5vw,60px);
}
.w-archive-wrap{
	margin-top: min(1.666vw, 20px);
}
img.archive-img{
    width: 100%;
    aspect-ratio: 27 / 19;
    object-fit: cover;
    object-position: center;
}
.arc-title{
    font-size: clamp(13px, 1.25vw, 15px);
    line-height: 1.4;
    color: #121212;
    margin-top: clamp(4px, 0.666vw,8px);
	font-weight: 500;
}
.arc-category{
    font-size: clamp(10px, 0.916vw, 11px);
    margin-top: min(0.333vw,4px);
}
#archive .btn01-wrap {
    margin-top: clamp(30px, 4.166vw, 50px);
}
#archive .slick-dots li button:before {
    color: #000 !important;
}
.slider .slick-slide {
  margin: 0 10px; /* 各スライドの両サイドに10pxずつ余白 */
  box-sizing: border-box;
}

.slider .slick-list {
  margin: 0 -10px; /* 外側の余白を相殺して中央揃え */
  padding: 0;
}


/* ----- section archive02 ----- */
#archive02{
    padding-top: min(8.333vw,100px);
    padding-bottom: min(8.333vw,100px);
}


/* ----- section archive03 ----- */
#archive03{
    padding-top: min(8.333vw,100px);
    padding-bottom: min(8.333vw,100px);
    background-color: #fff;
}

/* ----- section archive04 ----- */
#archive04{
    padding-top: min(8.333vw,100px);
    padding-bottom: min(8.333vw,100px);
}

/* -------------------- category -------------------- */

/* ----- section category01 ----- */
#category01{
    padding-top: min(8.333vw,100px);
    padding-bottom: min(8.333vw,100px);
    background-color: #211F27;
}

.content900{
    width: 900px;
    display: inline-block;
}
img.arc-new-img{
    width: 100%;
    aspect-ratio: 10 / 7;
    object-fit: cover;
    object-position: center;
}
.cat01-wrap{
    display: flex;
    flex-wrap: wrap;
    gap:5%;
    row-gap: 4vw;
    position: relative;
}
.cat01-left{
    width: 60%;
}
.cat01-right{
    width: 35%;
    display: flex;
    align-items: flex-end;
    text-align: left;
}
#category01 p{
    font-size: clamp(14px, 1.25vw, 15px);
    color: #fff;
    text-align: justify;
    margin-top: min(1vw,12px);
}
h3.cat-title{
    font-size: clamp(16px, 1.666vw, 20px);
    line-height: 1.4;
    color: #fff;
    margin-top: clamp(10px, 1vw,12px);
}
.cat-category{
    font-size: clamp(11px, 1.083vw, 13px);
    margin-top: min(0.5vw,6px);
    color: #ccc;
    margin-top: min(0.5vw,6px);
    text-align: left;
}
.arc-new-title{
    position: absolute;
    top: clamp(-5vw, -3.333vw,-40px);
    left: clamp(-11vw, -7.5vw,-90px);
    font-size: clamp(20px, 2.333vw, 28px);
    font-weight: 500;
    writing-mode: vertical-rl;
    vertical-align: initial;
    color: #F3BE00;
    -ms-writing-mode: tb-rl;
}
@media screen and (max-width: 600px) {
.cat01-left{
    width: 100%;
}
.cat01-right{
    width: 100%;
}
}

/* ----- section category02 ----- */
#category02{
    padding-top: min(8.333vw,100px);
}

.category-wrap{
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: min(3.333vw,40px);

}
.category-item{
    width: 270px;
    text-align: left;
}
.pagination{
    display: inline-flex;
    padding-top: min(8.333vw,100px);
    gap: clamp(4px, 0.5vw,6px);
}
.page{
    width: clamp(20px, 2.5vw, 30px);
    height: clamp(20px, 2.5vw, 30px);
    font-size:clamp(10px, 1.166vw, 14px);
    display: inline-flex;
    align-items: center;
    justify-content: center;

}
.active{
    background-color: #F3BE00;
    color: #fff;
}
.passive{
    background-color: #fff;
    color: #121212;
}
img.prev, img.next{
    width: clamp(4px, 0.5vw, 6px);
}



@media screen and (max-width: 1200px) {
.category-wrap{
    gap:3.333%;
    row-gap: 3vw;
}
.category-item{
    width: 22.5%;
}
}
@media screen and (max-width: 1000px) {
.content900{
    width: 80%;
    margin: 0 5% 0 15%;
}

}
@media screen and (max-width: 900px) {
.category-wrap{
    gap:4%;
        row-gap: 3vw;
}
.category-item{
    width: 30.666%;
}
}
@media screen and (max-width: 600px) {
.category-wrap{
    justify-content: center;
row-gap: clamp(20px,3vw, 30px);
}
.category-item {
    width: 270px;
    }
}

/* ----- section btn-area ----- */
#btn-area{
    padding-top: min(8.333vw,100px);
    padding-bottom: min(8.333vw,100px);
}
#btn-area ul{
    display: flex;
    gap: 2.083%;
}
#btn-area li{
    position: relative;
    display: inline-block;
     width: 18.333%;
}
.btn02{
    width: 100%;
    aspect-ratio: 11 / 3;
    display: inline-flex;
    align-items: center;
        font-size:clamp(10px, 1.166vw, 14px);
        line-height: 1.3;
    padding-left: min(1vw,12px);
    padding-top: 4px;
    padding-bottom: 4px;
    text-align: left;
}
.btn-passive{
    background-color: #121212;
    color: #fff;

}
.btn-active{
    background-color: #F3BE00;
    color: #121212;

}
.btn02-arrow{
    position: absolute;
    transform: translateY(-50%);
    top:50%;
    right: min(1vw,12px);
    width: clamp(4px, 0.4166vw, 5px);
}

/* -------------------- single -------------------- */

/* ----- section single01 ----- */
#single01{
    padding-top: min(3.333vw,40px);
    padding-bottom: min(3.333vw,40px);
    background-color: #211F27;
}

.content800{
    width: 800px;
    display: inline-block;
}
.arc-cat{
    font-size: clamp(16px, 1.666vw, 20px);
    color: #fff;
}
#single01 .arc-title{
    font-size: clamp(20px, 2.666vw, 32px);
    color: #F3BE00;

}
@media screen and (max-width: 800px) {
.content800{
    width: 90%;
    margin: 0 5%;
}
}
/* ----- section single02 ----- */
#single02{
    padding-top: min(5vw,60px);
    padding-bottom: min(6.666vw,80px);
}
#single02 h3{
    margin-top: min(2.5vw,30px);
    font-size: clamp(16px, 2vw, 24px);
    font-weight: 600;
    color: #000;
	line-height: 1.4;
}
#single02 p{
    margin-top: min(1.333vw, 16px);
    font-size: clamp(13px, 1.875vw, 15px);
}
#single02 .img-wrap{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 3.75%;
    padding-top: min(3.75vw,30px);
}

.single-img01{
    width: 66.25%;
}
.single-img02{
    width:30%;
}
.single-img02-inner{
    display: flex;
    flex-wrap: wrap;
    row-gap: 36px;
}
.return{
    width: clamp(100px,13.333vw,160px);
    height: clamp(20px, 2.5vw, 30px);
    font-size:clamp(10px, 1vw, 12px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #121212;
    color: #fff;

}    
@media screen and (max-width: 800px) {
.single-img02-inner{
    gap: 5%;
    row-gap: 4vw;
}
}

@media screen and (max-width: 600px) {
.single-img01{
    width: 100%;
}
.single-img02{
    width:100%;
     gap:5%;
}
.single-img02-inner .voice-img{
    width: 47.5%;

}
.single-img02-inner .archive-img{
    width: 47.5%;

}
#single02 .img-wrap{
    row-gap: 4vw;
}
}
/* -------------------- voice -------------------- */

/* ----- section voice01 ----- */


#voice01{
    padding-top: min(8.333vw,100px);
    padding-bottom: min(8.333vw,100px);
    background-color: #211F27;
}

img.voice-new-img{
    width: 100%;
    aspect-ratio: 10 / 7;
    object-fit: cover;
    object-position: center;
}
.voice01-wrap{
    display: flex;
    flex-wrap: wrap;
    gap:5%;
    row-gap: 4vw;
    position: relative;
}
.voice01-left{
    width: 60%;
}
.voice01-right{
    width: 35%;
    display: flex;
    align-items: flex-end;
    text-align: left;
}
#voice01 p{
    font-size: clamp(14px, 1.25vw, 15px);
    color: #fff;
    text-align: justify;
    margin-top: min(1vw,12px);
}
h3.voice-title{
    font-size: clamp(16px, 1.666vw, 20px);
    line-height: 1.4;
    color: #fff;
    margin-top: min(1vw,12px);;
}

.voice-new-title{
    position: absolute;
    top: clamp(-5vw, -3.333vw,-40px);
    left: clamp(-11vw, -7.5vw,-90px);
    font-size: clamp(20px, 2.333vw, 28px);
    font-weight: 500;
    writing-mode: vertical-rl;
    vertical-align: initial;
    color: #F3BE00;
    -ms-writing-mode: tb-rl;
}


@media screen and (max-width: 600px) {
.voice01-left{
    width: 100%;
}
.voice01-right{
    width: 100%;
}
}
/* ----- section voice02 ----- */
#voice02{
    padding-top: min(8.333vw,100px);
    padding-bottom: min(8.333vw,100px);
}

.voice-wrap{
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: min(3.333vw,40px);

}
.voice-item{
    width: 270px;
    text-align: left;
}
img.voice-img{
    width: 100%;
    aspect-ratio: 27 / 19;
    object-fit: cover;
    object-position: center;
}
h3.voice-title{
    font-size: clamp(14px, 1.333vw, 16px);
    line-height: 1.4;
    color: #121212;
    margin-top: clamp(10px, 1vw,12px);
}
.voice-category{
    font-size: clamp(10px, 1vw, 12px);
    margin-top: min(0.5vw,6px);
}
@media screen and (max-width: 1200px) {
.voice-wrap{
    gap:3.333%;
    row-gap: 3vw;
}
.voice-item{
    width: 22.5%;
}
}
@media screen and (max-width: 900px) {
.voice-wrap{
    gap:4%;
    row-gap: clamp(20px,3vw, 30px);
}
.voice-item{
    width: 30.666%;
}
}
@media screen and (max-width: 600px) {
.voice-wrap{
    justify-content: center;
}
.voice-item {
    width: 270px;
    }
}
/* -------------------- recruit -------------------- */
/* ----- section recruit01 ----- */
.recruit01-wrap{
    position: relative;
}
img.recruit-img{
    width: 100%;
}
img.recruit-copy{
    position: absolute;
    left: 50%;
    bottom: 10px;
     transform: translateX(-50%) ;
    width: min(70.833vw, 850px);
}
.overlay04{
    position: absolute;
    width: 100%;
    aspect-ratio: 20 / 7;
    background-color: #000;
    opacity: .3;
}
/* ----- section recruit02 ----- */
#recruit02{
    padding-top: min(8.333vw,100px);
    padding-bottom: min(8.333vw,100px);
}
.recruit02-wrap{
    background-color: #fff;
    padding-top: min(8.333vw,100px);
    padding-left: min(8.333vw,100px);
    padding-right: min(8.333vw,100px);
    padding-bottom: min(1.666vw,20px);
}
#recruit02 table{
    width: 100%;
    margin-top: min(1vw,30px);
    margin-bottom: min(6.666vw,80px);
}

#recruit02 th{
    font-size: clamp(12px, 1.25vw, 15px);
    font-weight: 500;
    padding: clamp(6px, 1vw,12px);
    background-color: #121212;
    border: 1px solid #ccc;
    color: #fff;
    text-align: left;
    width: 26%;
    line-height: 1.3;
    vertical-align: middle;
}
#recruit02 td{
    font-size: clamp(12px, 1.25vw, 15px);
    font-weight: 500;
    padding: clamp(6px, 1vw,12px);
    background-color: #fff;
    border: 1px solid #ccc;
    text-align: left;
    width: 74%;
    line-height: 1.3;
    vertical-align: middle;
}
@media screen and (max-width: 600px) {
.recruit02-wrap{
    padding-left: min(4.166vw,50px);
    padding-right: min(4.166vw,50px);
}
}

/* -------------------- company -------------------- */

/* ----- section company01 ----- */
#company01{
    padding-top: min(6.666vw,80px);
    padding-bottom: min(8.333vw,100px);
}
.company01-wrap{
    background-color: #fff;
    padding-top: min(8.333vw,100px);
    padding-left: min(8.333vw,100px);
    padding-right: min(8.333vw,100px);
}
#company01 dl{
    margin-top: min(3.333vw,40px);
    padding-bottom: min(8.333vw,100px);
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    font-size: clamp(14px, 1.333vw, 16px);
    line-height: 1.4;
    font-weight: 500;
}
#company01 dt{
    width: 25%;
     font-size: clamp(12px, 1.333vw, 16px);
    padding: clamp(12px,1.666vw, 20px);
    border-bottom: 1px solid #ccc;
}
#company01 dd{
    width: 75%;
    font-size: clamp(14px, 1.333vw, 16px);
    padding: clamp(12px,1.666vw, 20px);
    border-bottom: 1px solid #ccc;
    color: #121212;

}
@media screen and (max-width: 600px) {
.company01-wrap{
    padding-left: min(4.166vw,50px);
    padding-right: min(4.166vw,50px);
}
#company01 dt{
    width: 100%;
    border-bottom: 0;
    padding-bottom: 4px;
}
#company01 dd{
    width: 100%;
    padding-top: 0;
}
}

/* -------------------- contact -------------------- */

/* ----- section contact01 ----- */
#contact01{
    padding-top: min(6.666vw,80px);
    padding-bottom: min(8.333vw,100px);
}
.contact01-wrap{
    background-color: #fff;
    padding: min(8.333vw,100px);
}
#contact01 dl{
    margin-top: min(3.333vw,40px);
    padding-bottom: min(5vw,60px);
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    font-size: clamp(14px, 1.333vw, 16px);
    line-height: 1.4;
     font-weight: 500;
}
#contact01 dt{
    width: 30%;
    padding: min(1.666vw, 20px);
    display: flex;
    align-items: center;
    white-space: nowrap;
}
#contact01 dd{
    width: 70%;
    font-size: clamp(14px, 1.333vw, 16px);
    padding: min(1.666vw, 20px);
    color: #121212;
}
.text-area{
    width: 100%;
    height: 50px;
    border-radius: 4px;
    background-color: #EFEFEF;
    border: 0;
}
.text-area01{
    height: 50px;
}
.text-area02{
    height: 200px;
}
.select01{
        width: 100px;
        text-align: center;
    height: 50px;
        border-radius: 4px;
    background-color: #EFEFEF;
        border: 0;
}
.required{
    font-size: 12px;
    color: #fff;
    background-color: #F3BE00;
    width: 50px;
    text-align: center;
    padding: 3px 0 1px 0;
    border-radius: 2px;
    margin-right: 20px;
	display: inline-block;
}
.any{
    font-size: 12px;
    color: #fff;
    background-color: #211F27;
    width: 50px;
    text-align: center;
    padding: 3px 0 1px 0;
    border-radius: 2px;
    margin-right: 20px;
	display: inline-block;
}
.space{
    width: 70px;
	display: inline-block;
}
.submit01{
    color: #fff;
        background-color: #F3BE00;
    width: clamp(200px, 22.5vw, 270px);
    height: clamp(50px, 5vw, 60px);
    border: 0;
}
.submit01:hover{
    cursor:pointer;
    background-color: #211F27;
}
 .wpcf7 p {
display: inline;
}
div.wpcf7 .wpcf7-spinner {
    display: block;
}
@media screen and (max-width: 900px) {
#contact01 dt{
    width: 100%;

}
#contact01 dd{
    width: 100%;
    padding-top: 0;
}
}

@media screen and (max-width: 600px) {
.contact01-wrap{
    background-color: #fff;
    padding-left: min(4.166vw,50px);
    padding-right: min(4.166vw,50px);
}
.text-area01 {
        height: 40px;
    }
.select01{
    height: 40px;
}
}