/*
Theme Name:marugo_yane
Theme URI: https://yane.marugo-group.com/
Description: pcbrain
Version: 1.0
Author: pcbrain.co.jp
*/

/* @import url("cssfonts-min.css"); */
/* default style - リセット及びbody基本設定
----------------------------------------------------------- */
@import url("default.css");
/* 色設定
----------------------------------------------------------- */
@import url("setting.css");

@charset "UTF-8";
body {
    /* min-width: 1280px; */
    /*コンテンツ横幅を指定する（スマホ閲覧時の背景欠けを防ぐ）*/
    font-size: 16px;
    word-break: break-all;
}
body *,
body *::before,
body *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.inner {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    padding: 0 40px;
}
.innerLtl{
    width: 980px;
    margin: 0 auto;
}

@font-face {
    src: url(./font/BAHNSCHRIFT.woff);
    font-family: 'Bahnschrift';
    font-style: normal;
}
/*----------------------------------------------------
    基本設定、リンクカラーなど
----------------------------------------------------*/

a:link,a:visited {
    color: #154a7d;
    text-decoration:underline;
    transition:0.7s;
}

a:hover {
    transition:0.7s;
    opacity:0.7;
    transition:0.7s;
}

a img{
    transition:0.7s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

a:hover img{
}


a:active {
}


/*----------------------------------------------------
    汎用class
----------------------------------------------------*/
.imgR {
    float: right;
    margin: 0 0 10px 10px;
}
.imgR20 {
    float: right;
    margin: 0 0 20px 20px;
}
.imgR30 {
    float: right;
    margin: 0 0 20px 30px;
}
.imgL {
    float: left;
    margin: 0 10px 10px 0;
}
.imgL20 {
    float: left;
    margin: 0 20px 20px 0;
}
.imgL30 {
    float: left;
    margin: 0 30px 20px 0;
}
.imgC {
    margin: 0 auto 10px auto;
    display:block;
}
.imgBox{
    border:#CCCCCC solid 1px;
    padding:3px;
}

.imgLayer {
    position: absolute;
}
.mt-25{
    margin-top: -25px !important;
}
.mt-20{
    margin-top: -20px !important;
}
.mt-20 p {
    margin: 0 !important;
}

.mt0{
    margin-top: 0 !important;
}
.mt10 {
    margin-top: 10px !important;
}
.mt30 {
    margin-top: 30px !important;
}
.mt50 {
    margin-top: 50px !important;
}
.mt70 {
    margin-top: 70px !important;
}
.mt100 {
    margin-top: 100px !important;
}
.mb0{
    margin-bottom: 0 !important;
}
.mb10{
    margin-bottom: 10px !important;
}
.mb20{
    margin-bottom: 20px !important;
}
.mb30{
    margin-bottom: 30px !important;
}
.mb50{
    margin-bottom: 50px !important;
}
.mb80{
    margin-bottom: 80px !important;
}
.mb100{
    margin-bottom: 100px !important;
}
.mr30{
    margin-right: 30px;
}

.ml30{
    margin-left: 30px;
}
.pt0{
    padding-top: 0 !important;
}
.pt50{
    padding-top: 50px !important;
}
.pb0{
    padding-bottom: 0 !important;
}

.overflowH{
    overflow:hidden;
}
.overflowA{
    overflow:auto;
}
.overflowV{
    overflow:visible;
}
.clearBoth{
    clear:both;
}
.textRight{
    text-align:right !important;
}
.textCenter{
    text-align:center !important;
    display:block;
}

.textLeft{
    text-align:left !important;
    display: block;
}
.textBold{
    font-weight:bold;
}

.remark_red{
    color:#ea2904;
}
.floatR{
    float:right;
}
.floatL{
    float:left;
}
.imgM{
    margin:0 auto;
}

.must{
    font-size:10px;
    color:#ea2904;
}

/* 外部リンクは別窓用の指定 */
.externalIcon {
    padding-left: 5px;
    vertical-align: middle;
}

/* clearfix */
.clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

/* ヘッダ固定を固定したことによるアンカーポイントへの位置ずれ調整
   ※アンカーポイントへのリンクを追加する際は要追加 */
#roof #main #flow { 
    /* padding-top: 190px;
    margin-top: -190px; */
}


/*----------------------------------------------------
    スマホ用
----------------------------------------------------*/
.spblock,
.spinline,
.sptr{
    display:none !important;
}

.spcut {
    display: block !important;
}

.tbblock {
    display:none !important;
}


/* common */
.logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo figcaption {
    line-height: 1;
    font-family: var(--en-font-family);
    font-weight: 900;
    letter-spacing: 0.05em;
    color: var(--white);
}
h1 {
    display: unset;
    font-size: unset;
    margin-block-start: unset;
    margin-block-end: unset;
    margin-inline-start: unset;
    margin-inline-end: unset;
    font-weight: unset;
    unicode-bidi: unset;
}
.btn {
    display: inline-block;
    padding: 15px;
    line-height: 1;
    background-color: var(--black);
    border: 3px solid;
    text-align: center;
    color: var(--white) !important;
    text-decoration: none !important;
}

.btn span {
    display: block;
}

.btn .en {
    margin-bottom: 5px;
    font-family: var(--en-font-family);
    font-weight: 900;
    font-size: 30px;
}

.btn .ja {
    font-weight: 700;
}

.btn.red {
    border-image: linear-gradient(to bottom, #e52525, #ff8686);
    border-image-slice: 1;
}

.btn.green {
    border-image: linear-gradient(to bottom, #06c755, #9ffec6);
    border-image-slice: 1;
}

.btn.red strong {
    color: var(--main-color01);
}

.btn.green strong {
    color: var(--light-green);
}

.tel > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    line-height: 1;
}

.tel p {
    font-size: 18px;
    line-height: 1;
    margin-bottom: 5px;
}

.tel .number {
    position: relative;
    display: inline-block;
    padding-left: 27px;
    font-family: var(--en-font-family);
    color: var(--main-color01);
    font-size: 40px;
    font-weight: 700;
    white-space: nowrap;
}

.tel .number::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 30px;
    background: url(../img/tel.png) no-repeat;
    top: 5px;
    left: 0;
}

.tel .time {
    font-size: 14px;
}

.title01 {
    color: var(--white);
    letter-spacing: -0.025em;
    font-family: var(--en-font-family);
    font-size: 220px;
    font-weight: 900;
    line-height: 0.85;

    width: fit-content;
    margin: 0 auto;
    padding: 0 40px;
}

.title01 img {
    width: 100%;
} 

.title01 strong,
.title01 span {
    display: inline-block;
}

.title01 > span {
    display: block;
    /* line-height: 1; */
}

.title01 strong {
    font-size: 300px;
}

.title01 .red {
    color: var(--main-color01);
}

.title05 {
    text-align: center;
    line-height: 1;
}

.title05 .en {
    display: block;
    margin-bottom: 10px;
    font-family: var(--en-font-family);
    font-size: 106px;
    font-weight: 600;
    color: var(--main-color01);
}

.title05 .ja {
    font-weight: 900;
    font-size: 40px;
    color: var(--white);
}

.title06 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;

    padding: 0 40px;
}

.title06 figure {
    width: fit-content;
}
.title06 figure img {
    width: 100%;
}

.title06 .en {
    line-height: 0.80;
    font-family: var(--en-font-family);
    color: #ececec;
    font-size: 106px;
    letter-spacing: -0.025em;
}

.title06 .en span {
    color: var(--main-color01);
}

.title06 .en strong {
    font-size: 146px;
}

.title06 .ja {
    padding: 5px 5px 10px;
    line-height: 1;
    font-size: 70px;
    font-weight: 900;
    color: var(--white);
    background-color: rgba(0, 0, 0, 0.7);
}

/* header */
header {
    position: absolute;
    /* min-width: 1280px; */
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    padding: 25px 35px;
    z-index: 9999;
}

body:not(.home) header {
    position: relative;
    background: var(--black);
}

header a:has(.logo) {
    display: flex;
    text-decoration: none;
    width: fit-content;
}

header .btn_area {
    display: flex;
    gap: 10px;
}

header .btn {
    width: 240px;
}

/* mainv */
.mainv {
    position: relative;
    width: 100%;
    max-height: 100vh;
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;

    font-size: clamp(10px, 1.2vw, 20px);
}
.mainv::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7),
        rgba(0, 0, 0, 0.3) 40%,
        transparent 70%
    );
    pointer-events: none;
}

.mainv video {
    width: 100%;
    max-height: 100vh;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.mainv img {
    width: 100%;
}

.mainv span {
    font-size: 5.5em;
    font-weight: 900;
    color: var(--white);
    line-height: 1.10;
    letter-spacing: -0.075em;
    position: absolute;
    left: 35px;
    bottom: 17%;
}

/* footer */
footer {
    width: 100%;
    background: url(../img/black_bg01.png) repeat;
    overflow: hidden;
}

footer .top {
    background-image: url(../img/group_photo.png);
    background-repeat: no-repeat;
    background-position: right top 100px;
    padding: 140px 0 200px;
    background-size: 55%;
    border-bottom: solid 1px var(--sub-color01);
}

footer .top dl {
    color: var(--white);
}

footer .top dt {
    position: relative;
    font-weight: 900;
    font-size: 50px;
}

footer .top dt::after {
    content: "";
    position: absolute;
    width: 95px;
    height: 2px;
    background-color: var(--main-color01);
    bottom: 0;
    left: 0;
}

footer .top dd {
    font-size: 20px;
    font-weight: 700;
    margin-top: 25px;
}

footer .top figure {
    position: relative;
    right: -230px;
}

footer .bottom {
    padding: 90px 0 145px;
    color: var(--white);
}

footer .bottom .logo_area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

footer .bottom .logo_area a:has(.logo) {
    text-decoration: none;
}

footer .bottom .logo_area figure:first-of-type {
    padding-right: 35px;
    margin-right: 35px;
    border-right: solid 1px var(--sub-color02);
}

footer .bottom .logo_area > figure {
    line-height: 1;
    font-weight: 600;
    font-size: 12px;
    text-align: center;
}

footer .bottom .logo_area > figure figcaption {
    margin-top: 3px;
}

footer .bottom .address {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 40px;
    font-size: 18px;
}

footer .bottom .address a {
    position: relative;
    color: var(--white);
    padding-left: 35px;
}

footer .bottom .address a::before {
    content: "";
    position: absolute;
    width: 27px;
    height: 33px;
    top: 0;
    left: 0;
    background: url(../img/map.png) no-repeat;
}

footer .bottom .copyright {
    margin-top: 80px;
    text-align: right;
    font-size: 14px;
}

/* footer_fixed */
.footer_fixed {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 15px 0;
    background-color: rgba(0, 0, 0, 0.7);
    color:var(--white);
    z-index: 9999;
}

.footer_fixed .inner {
    display: flex;
    gap: 40px;
    justify-content: space-between;
    align-items: center;
}

.footer_fixed .left, 
.footer_fixed .right {
    min-width: 0;
}

.footer_fixed .left {
    display: flex;
    gap: 40px;
    align-items: center;
}

.footer_fixed .sns {
    display: flex;
    gap: 10px;
}

.footer_fixed .sns a > p {
    font-size: 12px;
    color: var(--white);
    width: fit-content;
    background: #4a4a4a;
    margin: 5px auto 0;
    padding: 0px 10px;
    border-radius: 20px;
}

.footer_fixed .reqBtn-sp {
    display: none;
}

.footer_fixed .right a.btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.footer_fixed .right a.btn .en {
    margin-bottom: 0;
}

/* aboutus */
.aboutus {
    text-align: center;
    color: var(--white);
    background-image: url(../img/aboutus_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.aboutus .wrapper {
    position: relative;
    padding: 145px 0 130px;
    z-index: 1;
}

.aboutus .wrapper::before,
.aboutus .wrapper::after {
    content: "";
    position: absolute;
    z-index: -1;
}

.aboutus .wrapper::before {
    /* width: 872px;
    height: 906px; */
    background: url(../img/aboutus_left.png) no-repeat;
    left: 0;
    top: 40px;

    width: 53%;
    height: auto;
    aspect-ratio: 436 / 453;
    background-size: cover;
}

.aboutus .wrapper::after {
    /* width: 703px;
    height: 656px; */
    background: url(../img/aboutus_right.png) no-repeat;
    right: 0;
    bottom: 140px;

    width: 40%;
    height: auto;
    aspect-ratio: 703 / 656;
    background-size: cover;
}

.aboutus h3 {
    margin-top: 60px;
    font-size: 70px;
    font-weight: 900;
    line-height: 1.25;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.aboutus p {
    margin-top: 40px;
    font-size: 24px;
    font-weight: 500;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.aboutus figure {
    position: absolute;
    width: 25%;
    max-width: 480px;
    right: 7%;
    top: 17%;
}

.aboutus figure img {
    width: 100%;
}

/* build */
.build {
    position: relative;
    padding: 90px 0 50px;
    background-image: url(../img/build_bg.png);
}

.build::before,
.build::after {
    content: "";
    position: absolute;
    display: block;
    width: 40px;
    height: 100%;
    background-color: var(--main-color01);
    top: 0;
    z-index: 0;
}

.build::before {
    left: 0;
}

.build::after {
    right: 0;
}

.build .wrapper {
    overflow: initial;
    padding-bottom: 100px;
    background-image: url(../img/build_staff.png);
    background-repeat: no-repeat;
    background-position: right 10% bottom;
    background-size: 50%;
}

.build h3 {
    margin: 50px 0;
    font-size: 70px;
    font-weight: 900;
    line-height: 1.10;
    letter-spacing: -0.05em;
}

.build h3 span {
    color: var(--main-color01);
}

.build p {
    /* font-size: 24px; */
    font-size: 22px;
    font-weight: 500;
}

.build .slider {
    z-index: 1;
}

.build .slider li {
    margin: 0 10px;
}

.title02 {
    position: relative;
    text-align: center;
    line-height: 0.85;
    font-family: var(--en-font-family);
    font-size: 210px;
    font-weight: 900;
    letter-spacing: -0.05em;
    color: #e5e5e5;
    background: #FFF;
    -webkit-background-clip: text;
    text-shadow:
        2px 0 var(--main-color01),
        -2px 0 var(--main-color01),
        0 2px var(--main-color01),
        0 -2px var(--main-color01),
        2px 2px var(--main-color01),
        -2px 2px var(--main-color01),
        2px -2px var(--main-color01),
        -2px -2px var(--main-color01);
}

.build .title02 img {
    width: 90%;
}

/* numbers */
.numbers {
    padding: 120px 0 150px;
    background-image: url(../img/numbers_bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.title03 {
    line-height: 0.85;
    text-align: center;
}

.numbers .title03 img {
    width: 90%;
}

.numbers .time {
    position: relative;
    top: -35px;
    margin-bottom: -35px;
    text-align: center;
    font-size: 14px;
    color: var(--white);
}

.numbers ul {
    margin-top: 60px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.numbers li {
    /* width: 330px; */
    width: calc((100% - 40px * 3) / 4);
    text-align: center;
    background-color: var(--white);
    line-height: 1;
    padding-bottom: 25px;
}

.numbers h3 {
    padding: 15px;
    background-color: var(--main-color01);
    font-size: 24px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 25px;
}

.numbers .number {
    margin-top: 20px;
    font-size: 30px;
    font-weight: 700;
}

.numbers .number strong {
    font-size: 100px;
    font-weight: 900;
    color: var(--main-color01);
}

.numbers .number strong span {
    color: var(--body-text-color);
}

.numbers .info {
    margin-top: 10px;
    line-height: 1.35;
    font-size: 18px;
    font-weight: 700;
}

.numbers .info strong {
    color: var(--main-color01);
    font-size: 30px;
    font-weight: 900;
}

.title03 .en {
    display: block;
    font-family: var(--en-font-family);
    font-size: 210px;
    font-weight: 900;
    color: var(--main-color01);
}

.title03 .ja {
    position: relative;
    display: inline-block;
    top: -55px;
    margin-bottom: -55px;
    padding: 10px 10px 15px;
    background-color: rgba(0, 0, 0, 0.7);
    font-size: 70px;
    font-weight: 900;
    color: var(--white);
}

/* works */
.works {
    padding: 90px 0 140px;
    background: url(../img/black_bg01.png) repeat;
    border-bottom: solid 1px var(--sub-color01);
}

.works .inner {
    margin-top: 40px;
}

.works .wrapper {
    display: flex;
    gap: 40px;
    padding: 60px;
    background-color: var(--white);
}

.works h3 {
    font-size: 30px;
    font-weight: 900;
    line-height: 1.35;
}

.works h3 strong {
    font-size: 60px;
}

.works h3 strong span {
    color: var(--main-color01);
}

.works p {
    font-size: 18px;
    margin-top: 25px;
}

.title04 {
    text-align: center;
    line-height: 0.85;
    width: fit-content;
    margin: 0 auto;
    padding: 0 40px;
}

.works .title04 img {
    width: 96%;
    max-width: none;
}

.title04 img {
    display: block;
    margin: auto;
    width: 100%;
}

.title04 .ja {
    position: relative;
    display: inline-block;
    top: -55px;
    margin-bottom: -55px;
    font-size: 70px;
    font-weight: 900;
    color: var(--white);
}

.tabs {
    display: flex;
}

.tab-button {
    display: block;
    padding: 20px 5px;
    cursor: pointer;
    width: 25%;
    border: none;
    background-color: var(--black);
    color: #FFF;
    font-size: 20px;
    font-weight: 700;
    border: solid 1px #999999;
}

.tab-button.active {
    position: relative;
    background: var(--main-color01);
    font-weight: bold;
    border: none;
}

.tab-button.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    border-style: solid;
    border-width: 15px 10px 0 10px;
    border-color: var(--main-color01) transparent transparent;
    translate: -50% 100%;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}


/* instagram */
.instagram {
    padding: 90px 0;
    background: url(../img/black_bg01.png) repeat;
    border-bottom: solid 1px var(--sub-color01);
}

.instagram p {
    margin-top: 60px;
    text-align: center;
    color: var(--white);
    font-size: 18px;
}

#sb_instagram {
    margin-top: 60px;
}

#sb_instagram .sb_instagram_header,
.sb_instagram_header, 
#sb_instagram #sbi_load {
    display: none;
}

/* .instagram ul {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 60px;
}

.instagram li {
    width: calc((100% - 40px * 3) / 4);
    width: 330px;
    height: auto;
    aspect-ratio: 1 / 1;
}

.instagram li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
} */

.instagram .btn_area {
    text-align: center;
    margin-top: 40px;
}

.instagram .btn {
    position: relative;
    padding: 20px 60px 20px 70px;
}
.instagram .btn::before,
.instagram .btn::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.instagram .btn::before {
    width: 34px;
    height: 34px;
    background: url(../img/insta_logo.png) no-repeat;
    left: 20px;
}

.instagram .btn::after {
    width: 17px;
    height: 16px;
    background: url(../img/triangle01.png) no-repeat;
    right: 20px;
}

.instagram .btn .ja {
    color: var(--white);
    font-size: 20px;
}

/* interview */
.interview {
    position: relative;
    background: url(../img/black_bg01.png) repeat;
    border-bottom: solid 1px var(--sub-color01);
}

.interview .wrapper {
    padding: 90px 0 140px;
    position: relative;
    z-index: 1;
}

.interview .wrapper::before,
.interview .wrapper::after {
    content: "";
    position: absolute;
    z-index: -1;
    opacity: 0.75;
}

.interview .wrapper::before {
    /* width: 847px;
    height: 853px; */
    background-image: url(../img/interview_bg01.png);
    background-repeat: no-repeat;
    background-size: cover;
    right: 0;
    top: 10px;

    width: 50%;
    height: auto;
    aspect-ratio: 847 / 853;
}

.interview .wrapper::after {
    /* width: 711px;
    height: 636px; */
    background-image: url(../img/interview_bg02.png);
    background-repeat: no-repeat;
    background-size: cover;
    left: 0;
    bottom: 60px;

    width: 43%;
    height: auto;
    aspect-ratio: 237 / 212;
}

.interview .inner {
    overflow: initial;
}

.interview .slider {
    width: min(1280px, 100%);
    /* width: 1280px; */
    margin: 0 auto;
}

.interview .slider li {
    position: relative;
    /* width: 400px; */
    /* width: 385px; */
    /* margin: 0 30px; */
    margin: 0 15px;
    padding-top: 40px;
    cursor: pointer;
}

.interview .slider li figure {
    background: var(--black);
    overflow: hidden;
}

.interview .slider li img {
    width: 100%;
    height: auto;
    transition: all 0.3s;
}
.interview .slider li:hover img {
    transform: scale(1.1);
    opacity: 0.75;
}

.interview .slider li figcaption {
    position: absolute;
    display: inline-block;
    writing-mode: vertical-rl;
    padding: 20px 10px;
    background-color: rgba(0, 0, 0, 0.7);
    font-size: 26px;
    font-weight: 700;
    color: var(--white);
    top: 0;
    right: 15px;
}

.interview .profile {
    font-size: 18px;
    text-align: center;
    color: var(--white);
}

.interview .name span {
    font-size: 34px;
    font-weight: 700;
}

.interview .slick-prev,
.interview .slick-next {
    width: 110px;
    height: 110px;
    z-index: 1;
}

.interview .slick-prev {
    left: -120px;
    background: url(../img/arrow_left.png) no-repeat center;
}

.interview .slick-next {
    right: -120px;
    background: url(../img/arrow_right.png) no-repeat center;
}

@media screen and ( max-width:1574px) {
    .interview .slick-prev {
        left: 0;
    }
    .interview .slick-next {
        right: 0;
    }
}

.interview .slick-next::before,
.interview .slick-prev::before {
    display: none;
}

.interview .slick-prev:hover,
.interview .slick-prev:focus {
    background: url(../img/arrow_left.png) no-repeat center;
}

.interview .slick-next:hover,
.interview .slick-next:focus {
    background: url(../img/arrow_right.png) no-repeat center;
}

/* professional */
.professional {
    position: relative;
    background: url(../img/black_bg01.png) repeat;
}

.professional .mainArea {
    position: relative;
    padding: 100px 0 340px;
    background: url(../img/professional_bg.jpg) center bottom no-repeat;
    z-index: 1;
}
.professional .mainArea::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 60%;
    background: url("../img/black_bg01.png") center repeat;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent,
        #000 90%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent,
        #000 90%
    );
    z-index: -1;
}

.professional .mainArea .inner {
    text-align: center;
    color: var(--white);
}

.professional .mainArea h3 {
    margin-top: 80px;
    font-weight: 900;
    line-height: 1;
}

.professional .mainArea h3 strong {
    display: block;
    font-size: 90px;
}

.professional .mainArea h3 small {
    display: block;
    margin-top: 20px;
    font-size: 40px;
}

.professional .mainArea p {
    margin-top: 80px;
    font-size: 20px;
    line-height: 2.45;
    font-weight: 500;
}

.professional .mainArea p span {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px;
}

.contentArea {
    position: relative;
    top: -140px;
    overflow: hidden;
    z-index: 1;
}

.contentArea .inner {
    overflow: initial;
}

.contentArea .box {
    margin-top: 70px;
    position: relative;
    height: 510px;
}

.contentArea .box:first-of-type {
    margin-top: 0;
}

.contentArea h4, 
.contentArea p{
    width: 52%;
    max-width: 52%;
}

.contentArea .right h4, 
.contentArea .right p{
    margin-left: auto;
    margin-right: 0;
}

.contentArea h4 {
    padding-bottom: 30px;
    color: var(--white);
    font-size: 40px;
    font-weight: 900;
    line-height: 1.25;
    border-bottom: solid 3px var(--main-color01);
}

.contentArea h4 span {
    color: var(--main-color01);
}

.contentArea p {
    margin-top: 30px;
    color: var(--white);
    font-size: 18px;
    font-weight: 500;
}

.contentArea figure {
    position: absolute;
    inset: -100%;
    margin: auto;
    transform: translateX(62%) translateY(-10%);
    display: block;
    width: fit-content;
    height: 100%;
}

.contentArea .right figure {
    transform: translateX(-62%) translateY(-10%);
}

/* career */
.career {
    background: url(../img/black_bg01.png) repeat;
    padding-bottom: 150px;
}

.career .wrapper {
    position: relative;
    padding: 90px 0;
    width: 96%;
    /* min-width: 1280px; */
    margin: 0 auto;
    background: url(../img/black_bg02.png) repeat;
    z-index: 1;
}

.career .wrapper::before,
.career .wrapper::after {
    content: "";
    position: absolute;
    z-index: -1;
}

.career .wrapper::before {
    /* width: 920px;
    height: 364px; */
    background: url(../img/career_staff01.png) no-repeat;
    /* top: -100px; */
    left: 25px;

    width: 55%;
    height: auto;
    aspect-ratio: 230 / 91;
    background-size: cover;
    top: 0;
    transform: translateY(-30%);
}

.career .wrapper::after {
    width: 281px;
    height: 577px;
    background: url(../img/career_staff02.png) no-repeat;
    bottom: 60px;
    right: 60px;
}

.career .year {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 80px;
}

.career dl {
    width: calc((100% - 40px * 3) / 4);
    background-color: var(--white);
}

.career dt {
    padding: 10px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--white);
    background-color: var(--main-color01);
}

.career dd {
    padding: 20px 15px;
    font-size: 18px;
    font-weight: 500;
}

.career dd li {
    position: relative;
    margin-top: 10px;
    padding-left: 20px;
    line-height: 1.4;
}

.career dd li:first-of-type {
    margin-top: 0;
}

.career dd li::before {
    content: "■";
    position: absolute;
    left: 0;
}

.career h3,
.career .support,
.career p,
.career .btn_area {
    text-align: center;
    color: var(--white);
}

.career h3 {
    margin-top: 80px;
    font-size: 40px;
    font-weight: 900;
    color: var(--white);
    line-height: 1.30;
}

.career .support {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.career .support li {
    padding: 5px 15px;
    font-size: 24px;
    font-weight: 500;
    background-color: var(--main-color01);
}

.career p {
    margin-top: 40px;
    font-size: 24px;
    font-weight: 500;
}

.career .btn_area {
    margin-top: 40px;
}

.career .btn {
    padding: 20px 50px 50px 50px;
}

.career .btn .en {
    font-size: 40px;
}

.career .btn .ja {
    font-size: 18px;
}

.career .btn::after {
    content: "";
    position: absolute;
    width: 17px;
    height: 15px;
    background: url(../img/triangle02.png) no-repeat;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.title07 {
    line-height: 1;
    font-size: 106px;
    font-weight: 900;
    text-align: right;
    font-family: var(--en-font-family);
    letter-spacing: -0.025em;
    color: #EEE;
}

.imgBG {
    width: 100%;
    height: 560px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.imgBG.type01 {
    background-image: url(../img/type01_bg.jpg);
}

.imgBG.type02 {
    background-image: url(../img/type02_bg.jpg);
}

/* requirements */
.requirements {
    position: relative;
    padding: 140px 0;
    background-image: url(../img/requirements_bg.jpg);
    background-repeat: repeat;
}

.requirements::before,
.requirements::after {
    content: "";
    position: absolute;
    width: 672px;
    height: 100px;
}

.requirements::before {
    background: url(../img/req_shape01.png) no-repeat;
    top: 0;
    left: 0;
}
.requirements::after {
    background: url(../img/req_shape02.png) no-repeat;
    bottom: 0;
    right: 0;
}

.requirements .title04 .en {
    color: #e2e2e2;
    text-shadow:
        2px 0 var(--main-color01),
        -2px 0 var(--main-color01),
        0 2px var(--main-color01),
        0 -2px var(--main-color01),
        2px 2px var(--main-color01),
        -2px 2px var(--main-color01),
        2px -2px var(--main-color01),
        -2px -2px var(--main-color01);
}

.requirements .title04 .ja {
    color: var(--body-text-color);
}

.requirements ul {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.requirements li {
    width: calc((100% - 30px * 2) / 3);
    /* width: 460px; */
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.08);
    background-color: var(--white);
    line-height: 1;
}

.requirements figure img {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.requirements .info {
    padding: 30px 25px;
}

.requirements h3 {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    color: var(--main-color01);
}

.requirements .type {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 15px;
}

.requirements .type span {
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
    background-color: var(--black);
    padding: 5px 10px 8px;
}

.requirements p {
    font-size: 18px;
    line-height: 1.4;
    margin-top: 20px;
}

.requirements dl {
    margin-top: 10px;
    display: flex;
    gap: 45px;
    padding: 15px 0;
    font-size: 18px;
    border-top: solid 1px var(--black);
    border-bottom: solid 1px var(--black);
}

.requirements .btn_area {
    margin-top: 30px;
    text-align: center;
}

.requirements .btn {
    position: relative;
    padding: 20px 60px 20px 20px;
}

.requirements .btn::after {
    content: "";
    position: absolute;
    width: 17px;
    height: 16px;
    background: url(../img/triangle01.png) no-repeat;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
}

/* line */
.line {
    position: relative;
    background: url(../img/black_bg02.png) repeat;
    padding: 150px 0;
    line-height: 1;
}

.line::before,
.line .inner::before {
    content: "";
    position: absolute;
}

.line::before {
    /* width: 895px;
    height: 906px; */
    background: url(../img/line_staff.png) no-repeat;
    right: 0;
    top: 60px;

    width: 50%;
    height: auto;
    aspect-ratio: 895 / 906;
    background-size: cover;
}

.line .inner {
    overflow: initial;
}

.line .inner::before {
    width: 452px;
    height: 91px;
    background: url(../img/line_balloon.png) no-repeat;
    left: 0;
    top: -100px;
}

.line .title03 {
    width: fit-content;
    margin: 0 auto;
}
.line .title03 img {
    width: 90%;
}

.line .title03 .en {
    color: var(--sub-color02);
}

.line .title03 .en span {
    color: #06c755;
}

.line .box {
    margin: 40px 0 0 180px;
    text-align: center;
    display: inline-block;
    color: var(--white);
}

.line .box h3 {
    font-size: 40px;
    font-weight: 900;
}

.line .box h3 span {
    font-size: 60px;
    color: #06c755;
}

.line .box p {
    margin-top: 20px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.8;
}

.line ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 80px;
    padding: 30px 0;
    border-top: solid 1px var(--sub-color01);
    border-bottom: solid 1px var(--sub-color01);
}

.line li {
    width: calc(100% / 4);
    /* width: 360px; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    color: var(--white);
    padding: 0 20px;
    border-right: solid 1px var(--sub-color01);
}

.line li:last-of-type {
    border-right: none;
}

.line li h4 {
    font-size: 24px;
    font-weight: 700;
    color: #06c755;
}

.line li p {
    margin-top: 15px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.45;
}

.line .bnr {
    text-align: center;
    margin-top: 60px;
}

.line .bnr a {
    display: block;
    width: fit-content;
    margin: 0 auto;
}

.line .bnr img.pc {
    display: block;
    width: 100%;
}

.line .bnr img.sp {
    display: none;
}

/* モーダル用 */
/* 画面全体の黒背景（最初は非表示） */
.overlay {
    line-height: 1;
    position: fixed;
    inset: 0;
    background: rgba(17,17,17,0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* ポップアップ本体 */
.popup {
    position: relative;
    background: var(--white);
    padding: 60px 80px;
    width: 880px;
    max-height: 90vh;
    overflow-y: auto;

    /* スクロールバー非表示（Chrome / Edge / Safari） */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE, Edgeレガシー */
}

.popup::-webkit-scrollbar {
    display: none; /* Chrome / Safari / Edge */
}

.popup .en {
    font-family: var(--en-font-family);
    font-size: 80px;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.popup .title {
    text-align: center;
}

.popup .head {
    margin-top: 30px;
    font-size: 40px;
    font-weight: 700;
}

.popup .position {
    margin-top: 30px;
    display: inline-block;
    font-size: 18px;
    border-bottom: solid 2px var(--main-color01);
    padding: 0 20px 10px;
}

.popup .position strong {
    font-size: 24px;
    font-weight: 700;
    padding-right: 40px;
}

.popup figure {
    margin-top: 30px;
    text-align: center;
}

.popup figure img {
    width: 480px;
}

.popup .itemList {
    margin-top: 80px;
}

.popup .itemList .item {
    margin-top: 40px;
    padding-top: 40px;
    border-top: solid 1px var(--black);
}

.popup .itemList .item:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border: none;
}

.popup .itemHead {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

.popup p {
    font-size: 18px;
    line-height: 1.8;
}

.popup .btn_area {
    margin-top: 80px;
    text-align: center;
}

.popup button.closeBtn {
    background-color: var(--black);
    border: none;
    padding: 10px 25px;
    color: var(--white);
    font-size: 18px;
    font-weight: 700;
}

.overlay .icon {
    display: inline-block;
    position: absolute;
    top: calc(5vh - 35px);
    right: calc(50% - 475px)
}



body.single .requirements h3 {
    margin-bottom: 50px;
}
body.single .requirements .title04 {
    margin-bottom: 60px;
}

.requirementsDetail .inner > a, 
.requirements .contact .inner > a {
    display: inline-block;
    color: var(--main-color01);
}
.requirementsDetail .inner > a {
    margin-bottom: 20px;
}
.requirements .contact .inner > a {
    margin-top: 20px;
}

.requirementsDetail .imgList {
    justify-content: center;
    margin: 50px 0;
}
.requirementsDetail .imgList li {
    width: calc((100% - 30px*2) / 3);
    height: auto;
    aspect-ratio: 140 / 93;
}
.requirementsDetail .imgList li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.requirementsCaption {
    text-align: center;
    margin-bottom: 50px;
}

.requirements .contact {
    padding-top: 140px;
}

.requirementsSummary, 
.requirements .contact .form {
    background: var(--white);
    padding: 50px;
}

.requirementsSummary table, 
.form table {
    width: 100%;
    margin: 0 0 30px;
    box-sizing: border-box;
    border-top: 1px solid var(--black);
}
.requirementsSummary table th, 
.requirementsSummary table td, 
.form table th, 
.form table td {
    line-height: 1.5;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--black);
    box-sizing: border-box;
    padding: 15px 20px;
}
.requirementsSummary table th, 
.form table th {
    width: 25%;
}
.requirementsSummary table td, 
.form table td {
    width: 75%;
}
.requirementsSummary table p, 
.form table p {
    font-size: 16px;
}
.requirementsSummary table p:first-of-type, 
.form table p:first-of-type {
    margin-top: 0;
}

.form table th p, 
.form table td p:has(.wpcf7-radio) {
    padding: 15px 0;
}

.form table tbody td input[type="text"], 
.form table tbody td input[type="number"], 
.form table tbody td input[type="email"], select, 
.form table tbody td textarea {
    font-size: 16px;
    line-height: 1.4;
    width: 100%;
    margin: 0;
    padding: 15px;
    border: solid 1px #333;
    box-sizing: border-box;
}

.form table tbody td input[type="number"] {
    width: 80px;
    margin-right: 5px;
}

.form table tbody td:has(input[type="number"]) .wpcf7-not-valid-tip {
    position: absolute;
    white-space: nowrap;
}
.form table tbody td:has(input[type="number"]):has(.wpcf7-not-valid-tip) {
    padding-bottom: 40px;
}

.form table tbody th span.req, 
.form table tbody th span.any {
    display: inline-block;
    font-size: 12px;
    color: var(--white);
    text-align: center;
    margin-left: 10px;
    padding: 5px;
    background: #e10000;
    float: right;
}

.form table tbody th span.any {
    background: #ccc;
}

.form button {
    font-size: 16px;
    font-weight: 700;
    padding: 20px !important;
    transition: 0.7s;
    cursor: pointer;
}
.form button::after {
    content: none !important;
}
.form button:hover {
    opacity: 0.75;
}

.wpcf7-spinner {
    display: block;
    margin: 20px auto;
}


.cmp #main, 
.not-found #main {
    padding: 50px 20px;
}

.cmp #main .inner, 
.not-found #main .inner {
    text-align: center;
}

.cmp #main h2, 
.not-found #main h2 {
    font-size: 70px;
    font-weight: 900;
    text-align: center;
    margin-bottom: 30px;
}

.cmp #main .btn_area, 
.not-found #main .btn_area {
    margin-top: 30px;
}

.cmp #main .btn_area .btn, 
.not-found #main .btn_area .btn {
    font-weight: 700;
    position: relative;
    padding: 20px 20px 20px 60px;
}
.cmp #main .btn_area .btn::after, 
.not-found #main .btn_area .btn::after {
    content: "";
    position: absolute;
    width: 17px;
    height: 16px;
    background: url(../img/triangle01.png) no-repeat;
    top: 50%;
    transform: translateY(-50%) scale(-1, 1);
    left: 20px;
}

@media screen and ( max-width:1024px) {
    .tbblock {
        display:block !important;
    }

    header .logo img {
        width: 50%;
        max-width: 160px;
    }
    header .logo figcaption {
        font-size: 14px;
    }
    header .btn {
        width: 200px;
    }
    .btn .en {
        font-size: 24px;
    }
    .btn .ja {
        font-size: 14px;
    }
    .build .wrapper {
        padding-bottom: 60%;
        background-position: center bottom;
        background-size: 90%;
    }
    .numbers li {
        width: calc((100% - 40px) / 2);
    }
    .works .wrapper {
        display: block;
        gap: 40px;
    }
    .works figure img {
        width: 100%;
        height: auto;
    }
    .works h3 {
        margin-top: 25px;
    }
    .contentArea {
        position: relative;
        top: -100px;
        overflow: hidden;
    }
    .contentArea .inner {
        overflow: initial;
    }
    .contentArea .box {
        margin-top: 70px;
        position: relative;
        height: auto;
    }
    .contentArea .box:first-of-type {
        margin-top: 0;
    }
    .contentArea h4, 
    .contentArea p{
        width: 100%;
        max-width: 100%;
    }
    .contentArea .right h4, 
    .contentArea .right p{
        margin-left: auto;
        margin-right: 0;
    }
    .contentArea h4 {
        padding-bottom: 20px;
        font-size: 26px;
    }
    .contentArea p {
        margin-top: 20px;
        font-size: 16px;
    }
    .contentArea figure {
        position: static;
        inset: auto;
        margin: 20px auto 0;
        transform: translateX(0%) translateY(0%);
        height: 100%;
    }
    .contentArea .right figure {
        transform: translateX(0%) translateY(0%);
    }
    .contentArea figure img {
        width: 100%;
    }
    .career dl {
        width: calc((100% - 40px) / 2);
    }
    .career .wrapper::after {
        width: 100px;
        height: 200px;
        background-image: url(../img/career_staff02.png);
        background-size: contain;
        background-repeat: no-repeat;
        bottom: 120px;
        right: 5px;
    }
    .requirements li {
        width: calc((100% - 30px) / 2);
    }
    .line .box {
        margin: 40px 0 0 0;
    }
    .line ul {
        row-gap: 30px;
    }
    .line li {
        width: calc(100% / 2);
    }
    footer .top {
        background-position: right -60% bottom;
        padding: 80px 0 46%;
        background-size: 94%;
    }
    .footer_fixed .left, 
    .footer_fixed .inner {
        gap: 15px;
    }
    .tel p {
        font-size: 16px;
    }
    .tel .number {
        font-size: clamp(24px, calc(6.25vw - 24px), 40px);
        padding-left: 10%;
    }
    .tel .number::before {
        width: 10%;
        height: auto;
        aspect-ratio: 11 / 15;
        background-size: cover;
    }

    .popup {
        width: 92%;
    }
    .overlay .icon {
        display: none;
    }
}

@media screen and (max-width:768px) {
body {
    min-width: 100%;
}

.inner {
    width: 92%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    padding: 0;
}

/*----------------------------------------------------
    スマホ用
----------------------------------------------------*/
.spblock {
    display:block !important;
}

.spcut {
    display: none !important;
}

/* common */
.logo img {
    /* width: 50%; */
    max-width: 230px;
}

.btn span {
    display: block;
}

.btn .en {
    margin-bottom: 5px;
    font-size: 20px;
}

.btn .ja {
    font-size: 12px;
}

.tel {
    background-image: url(../img/tel_w.png);
    background-position: center;
    background-repeat: no-repeat;

    line-height: 1;
    background-color: var(--black);
    border: 3px solid;
    border-image: linear-gradient(to bottom, var(--white), var(--white));
    border-image-slice: 1;
    width: 50px;
    height: 50px;
} 

.tel > div {
    display: none;
}

.tel p {
    display: none;
}

.title01 {
    color: var(--white);
    letter-spacing: -0.025em;
    font-family: var(--en-font-family);
    font-size: 60px;
    font-weight: 900;
    line-height: 0.85;
}

.title01 strong,
.title01 span {
    display: inline-block;
}

.title01 > span {
    display: block;
    /* line-height: 1; */
}

.title01 strong {
    font-size: 100px;
}

.title01 .red {
    color: var(--main-color01);
}

.title05 {
    text-align: center;
    line-height: 1;
}

.title05 .en {
    font-size: 50px;
}

.title05 .ja {
    font-size: 20px;
}

.title06 {
    display: block;
    text-align: center;
}

.title06 .en {
    line-height: 0.80;
    font-family: var(--en-font-family);
    color: #ececec;
    font-size: 30px;
    letter-spacing: -0.025em;
}

.title06 .en span {
    color: var(--main-color01);
}

.title06 .en strong {
    font-size: 50px;
}

.title06 .ja {
    margin-top: 10px;
    display: inline-block;
    font-size: 30px;
}

/* header */
header {
    display: block;
    min-width: 0;
    padding: 15px;
    position: fixed !important;
}
header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.8),
        rgba(0,0,0,0)
    );
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
    z-index: -1;
}
header.is-scroll::after {
    opacity: 1;
}
body:not(.home) header {
    transition: 0.3s;
}
body:not(.home) header.is-scroll {
    background: rgba(0, 0, 0, 0);
}

header .btn_area {
    display: none;

    margin-top: 15px;
    gap: 2%;
}

header .btn {
    width: 49%;
}

body:not(.home) main {
    padding-top: 70px;
}

/* mainv */
.mainv {
    width: 100vw;
    max-height: none;
    aspect-ratio: 72 / 100;
    position: relative;
}

.mainv video {
    max-height: none;
    aspect-ratio: 72 / 100;
}

.mainv img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mainv span {
    font-size: 11.5vmin;
    bottom: 20px;
    left: 15px;
}

/* footer */
footer {
    width: 100vw;
}

footer .top dt {
    font-size: 30px;
}

footer .top dd {
    font-size: 16px;
}

footer .bottom {
    padding: 60px 0 100px;
    color: var(--white);
}

footer .bottom .logo_area {
    gap: 0 30px;
}

footer .bottom .logo_area figure:first-of-type {
    padding-right: 0;
    margin-right: 0;
    margin-bottom: 15px;
    border-right: none;
}

footer .bottom .logo_area figure:last-of-type {
    display: inline-block;
}

footer .bottom .address {
    margin-top: 40px;
    display: block;
    font-size: 16px;
}

footer .bottom .address a {
    display: inline-block;
    margin-top: 10px;
}

footer .bottom .copyright {
    margin-top: 60px;
    font-size: 12px;
}

/* footer_fixed */
.footer_fixed {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 15px 0;
    background-color: rgba(0, 0, 0, 0.7);
    color:var(--white);
    z-index: 9999;
}

.footer_fixed .inner {
    align-items: center;
    gap: 5px;
}

.footer_fixed .left {
    display: flex;
    gap: 10px;
}

.footer_fixed .sns {
    display: none;

    gap: 10px;
}

.footer_fixed .sns img {
    width: 50px;
}

.footer_fixed .sns a > p {
    font-size: 10px;
    margin-top: 3px;
    padding: 0 7px;
}

.footer_fixed .reqBtn-sp {
    display: block;
}

.footer_fixed .reqBtn-sp {
    width: calc((100% - 50px - 5px*2) * 0.4);
}

.footer_fixed .right {
    width: calc((100% - 50px - 5px*2) * 0.6);
}

.footer_fixed .right a.btn, 
.footer_fixed .reqBtn-sp a.btn {
    display: block;
    align-items: center;
    gap: 10px;
    padding: 7.5px;
}

.footer_fixed .right a.btn .en, 
.footer_fixed .reqBtn-sp a.btn .en {
    margin-bottom: 5px;
    font-size: 8px;
}

.footer_fixed .right a.btn .ja, 
.footer_fixed .reqBtn-sp a.btn .ja {
    font-size: 14px;
}

/* aboutus */
.aboutus {
    width: 100vw;
    text-align: center;
    color: var(--white);
    background-image: url(../img/black_bg01.png);
    background-repeat: repeat;
    background-size: auto;
    background-position: left bottom;
}

.aboutus .wrapper {
    padding: 100px 0 100px;
}

.aboutus .wrapper::before,
.aboutus .wrapper::after {
    content: "";
    position: absolute;
    z-index: -1;
}

.aboutus .wrapper::before {
    width: 300px;
    height: 310px;
    background-image: url(../img/aboutus_left.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: 20px;
}

.aboutus .wrapper::after {
    width: 35%;
    height: auto;
    aspect-ratio: 703 / 656;
    background-image: url(../img/aboutus_right.png);
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 20px;
}

.aboutus .title01 img {
    width: 90%;
}

.aboutus h3 {
    margin-top: 60px;
    font-size: 30px;
}

.aboutus p {
    margin-top: 40px;
    font-size: 18px;
}

.aboutus figure {
    position: absolute;
    width: 20%;
    max-width: 480px;
    right: 3%;
    top: 17%;
}

/* build */
.build {
    position: relative;
    padding: 80px 0 40px;
    background-image: url(../img/build_bg.png);
}

.build .title02 {
    font-size: 0;
}

.build::before,
.build::after {
    width: 10px;
}

.build h3 {
    margin: 40px 0;
    font-size: 28px;
}

.build p {
    font-size: 18px;
}

.build .slider {
    z-index: 1;
}

.build .slider li {
    margin: 0 5px;
    width: 160px;
}

.build .slider li img {
    width: 100%;
}

.title02 {
    text-align: center;
    line-height: 0.85;
    font-family: var(--en-font-family);
    font-size: 100px;
    font-weight: 900;
    letter-spacing: -0.05em;
}

/* numbers */
.numbers {
    padding: 80px 0 100px;
    background-image: url(../img/numbers_bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.numbers .time {
    top: 0;
    margin-bottom: 0;
}

.numbers ul {
    margin-top: 60px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.numbers li {
    width: 100%;
    text-align: center;
    background-color: var(--white);
    line-height: 1;
    padding-bottom: 25px;
}

.numbers h3 {
    padding: 15px;
    background-color: var(--main-color01);
    font-size: 24px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 25px;
}

.numbers .number {
    margin-top: 20px;
    font-size: 30px;
    font-weight: 700;
}

.numbers .number strong {
    font-size: 100px;
    font-weight: 900;
    color: var(--main-color01);
}

.numbers .number strong span {
    color: var(--body-text-color);
}

.numbers .info {
    margin-top: 10px;
    line-height: 1.35;
    font-size: 18px;
    font-weight: 700;
}

.numbers .info strong {
    color: var(--main-color01);
    font-size: 30px;
    font-weight: 900;
}

.title03 .en {
    font-size: 100px;
}

.title03 .ja {
    top: -10px;
    margin-bottom: -10px;
    font-size: 24px;
}

/* works */
.works {
    padding: 80px 0 100px;
    background: url(../img/black_bg01.png) repeat;
    border-bottom: solid 1px var(--sub-color01);
}

.works .inner {
    margin-top: 40px;
}

.works .wrapper {
    padding: 40px 20px;
    background-color: var(--white);
}

.works h3 {
    font-size: 18px;
    line-height: 1.25;
}

.works h3 strong {
    font-size: 26px;
}

.works p {
    font-size: 16px;
}

.title04 {
    text-align: center;
    line-height: 0.85;
}

.title04 .en {
    font-size: 100px;
}

.title04 .ja {
    top: -10px;
    margin-bottom: -10px;
    font-size: 24px;
}

.tab-button {
    padding: 15px 5px;
    font-size: 14px;
}

/* instagram */
.instagram {
    padding: 70px 0;
}

.instagram p {
    margin-top: 40px;
    text-align: center;
    color: var(--white);
    font-size: 16px;
}

.instagram ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 2%;
    margin-top: 60px;
}

.instagram li {
    width: calc((100% - 2%) / 2);
    /* width: 49%; */
    /* height: 180px; */
}

/* interview */
.interview {
    position: relative;
    background: url(../img/black_bg01.png) repeat;
    border-bottom: solid 1px var(--sub-color01);
}

.interview .wrapper {
    padding: 90px 0 140px;
    position: relative;
    z-index: 1;
}

.interview .wrapper::before,
.interview .wrapper::after {
    content: "";
    position: absolute;
    z-index: -1;
    opacity: 0.75;
    background-size: contain;
    background-repeat: no-repeat;
}

.interview .wrapper::before {
    width: 260px;
    height: 260px;
    top: 10px;
}

.interview .wrapper::after {
    width: 280px;
    height: 240px;
    bottom: 60px;
}

.interview .title04 img {
    width: 90%;
}

.interview .inner {
    overflow: initial;
}

.interview .slider {
    width: 100%;
    margin: 0 auto;
}

.interview .slider li {
    position: relative;
    width: 300px;
    margin: 0 30px;
}

.interview .slider li figcaption {
    font-size: 20px;
    right: 20px;
}

.interview .profile {
    font-size: 18px;
    text-align: center;
    color: var(--white);
}

.interview .name span {
    font-size: 34px;
    font-weight: 700;
}

.interview .slick-prev,
.interview .slick-next {
    width: 70px;
    height: 70px;
    background-size: contain;
    background-position: center;
}

.interview .slick-prev {
    left: -15px;
    background-image: url(../img/arrow_left.png);
}

.interview .slick-next {
    right: -15px;
    background-image: url(../img/arrow_right.png);
}

.interview .slick-prev:hover,
.interview .slick-prev:focus {
    background-image: url(../img/arrow_left.png);
    background-size: contain;
}

.interview .slick-next:hover,
.interview .slick-next:focus {
    background-image: url(../img/arrow_right.png);
    background-size: contain;
}


/* モーダル用 */
/* ポップアップ本体 */
.popup {
    padding: 25px;
    width: 92%;
    max-height: 95vh;
}

.popup .en {
    font-size: 60px;
}

.popup .head {
    margin-top: 30px;
    font-size: 30px;
    font-weight: 700;
}

.popup .position {
    font-size: 18px;
}

.popup .position strong {
    font-size: 18px;
    padding-right: 25px;
}

.popup figure {
    margin-top: 30px;
    text-align: center;
}

.popup figure img {
    width: 100%;
}

.popup .itemList {
    margin-top: 80px;
}

.popup .itemList .item {
    margin-top: 40px;
    padding-top: 40px;
    border-top: solid 1px var(--black);
}

.popup .itemList .item:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border: none;
}

.popup .itemHead {
    font-size: 20px;
    font-weight: 700;
}

.popup p {
    font-size: 16px;
}

.popup .btn_area {
    margin-top: 60px;
}

/* professional */
.professional {
    position: relative;
    background: url(../img/black_bg01.png) repeat;
}

.professional .mainArea {
    padding: 80px 0 200px;
    background: url(../img/professional_bg.jpg) center bottom no-repeat;
}

.professional .title06 img {
    width: 90%;
}

.professional .mainArea .inner {
    text-align: center;
    color: var(--white);
}

.professional .mainArea h3 {
    margin-top: 60px;
}

.professional .mainArea h3 strong {
    display: block;
    font-size: 34px;
}

.professional .mainArea h3 small {
    font-size: 20px;
}

.professional .mainArea p {
    margin-top: 60px;
    font-size: 18px;
    line-height: 2.55;
}

/* career */
.career {
    background: url(../img/black_bg01.png) repeat;
    padding-bottom: 100px;
}

.career .wrapper {
    position: relative;
    padding: 80px 0;
    width: 96%;
    min-width: 96%;
    margin: 0 auto;
    background: url(../img/black_bg02.png) repeat;
    z-index: 1;
}

.career .wrapper::before,
.career .wrapper::after {
    content: "";
    position: absolute;
    z-index: -1;
}

.career .wrapper::before {
    width: 300px;
    height: 120px;
    background-image: url(../img/career_staff01.png);
    background-repeat: no-repeat;
    background-size: contain;
    top: -60px;
    left: 0;
    transform: translateY(0);
}

.career .title07 img {
    width: 90%;
}

.career .year {
    gap: 25px;
    margin-top: 40px;
}

.career dl {
    width: 100%;
}

.career dd {
    font-size: 16px;
}

.career h3 {
    margin-top: 60px;
    font-size: 26px;
}

.career .support {
    margin-top: 25px;
    gap: 15px;
}

.career .support li {
    padding: 5px 10px;
    font-size: 20px;
}

.career p {
    margin-top: 25px;
    font-size: 20px;
}

.career .btn_area {
    margin-top: 40px;
}

.career .btn {
    padding: 20px 50px 50px 50px;
}

.career .btn .en {
    font-size: 40px;
}

.career .btn .ja {
    font-size: 18px;
}

.career .btn::after {
    content: "";
    position: absolute;
    width: 17px;
    height: 15px;
    background: url(../img/triangle02.png) no-repeat;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.title07 {
    font-size: 50px;
}

.imgBG {
    height: 280px;
}

/* requirements */
.requirements {
    padding: 100px 0;
}

.requirements::before,
.requirements::after {
    width: 320px;
    height: 60px;
}

.requirements::before {
    background-image: url(../img/req_shape01.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left top;
    top: 0;
    left: 0;
}
.requirements::after {
    background-image: url(../img/req_shape02.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right bottom;
    bottom: 0;
    right: 0;
}

.requirements .title04 img {
    width: 90%;
}

.requirements .title04 .ja {
    color: var(--body-text-color);
}

.requirements ul {
    margin-top: 40px;
    gap: 25px;
}

.requirements li {
    width: 100%;
}

.requirements figure img {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.requirements .info {
    padding: 30px 25px;
}

.requirements h3 {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    color: var(--main-color01);
}

.requirements .type {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 15px;
}

.requirements .type span {
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
    background-color: var(--black);
    padding: 5px 10px 8px;
}

.requirements p {
    font-size: 16px;
    line-height: 1.4;
    margin-top: 20px;
}

.requirements dl {
    margin-top: 10px;
    display: flex;
    gap: 45px;
    padding: 15px 0;
    font-size: 16px;
    border-top: solid 1px var(--black);
    border-bottom: solid 1px var(--black);
}

.requirements .btn .ja {
    font-size: 16px;
}

/* line */
.line {
    position: relative;
    background: url(../img/black_bg02.png) repeat;
    padding: 130px 0 100px;
    line-height: 1;
}

.line::before,
.line .inner::before {
    content: "";
    position: absolute;
}

.line::before {
    width: 200px;
    /* width: 320px;
    height: 320px; */
    background-image: url(../img/line_staff.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right top;
    top: 40px;
}

.line .inner {
    overflow: initial;
}

.line .inner::before {
    width: 300px;
    height: 60px;
    background-image: url(../img/line_balloon.png);
    background-repeat: no-repeat;
    background-size: contain;
    left: 0;
    top: -100px;
}

.line .title03 img {
    width: 90%;
}

.line .title03 .en span {
    color: #06c755;
}

.line .box {
    text-align: center;
    display: inline-block;
    color: var(--white);
}

.line .box h3 {
    font-size: 24px;
    font-weight: 900;
}

.line .box h3 span {
    font-size: 30px;
    color: #06c755;
}

.line .box p {
    font-size: 18px;
}

.line ul {
    margin-top: 60px;
    padding: 0 0;
}

.line li {
    width: 100%;
    gap: 20px;
    padding: 20px 0;
    border-right: none;
    border-bottom: solid 1px var(--sub-color01);
}

.line li:last-of-type {
    border: none;
}

.line li figure {
    width: 80px;
}

.line li > div {
    width: calc(100% - 100px);
}

.line li h4 {
    font-size: 24px;
}

.line li p {
    margin-top: 15px;
    font-size: 16px;
}

.line .bnr {
    text-align: center;
    margin-top: 60px;
}

.line .bnr img {
    width: 100%;
}

.line .bnr img.pc {
    display: none;
}

.line .bnr img.sp {
    display: block;
}


body.single .requirements .title04 {
    margin-bottom: 50px;
}
body.single .requirements h3 {
    font-size: 20px;
    margin-bottom: 20px;
}
.requirementsDetail .imgList {
    margin: 30px 0;
}
.requirementsDetail .imgList li {
    width: calc((100% - 25px) / 2);
}
.requirementsCaption {
    margin-bottom: 30px;
}
.requirements .contact {
    padding-top: 100px;
}
.requirementsSummary, 
.requirements .contact .form {
    padding: 20px;
}
.requirementsSummary table th, 
.requirementsSummary table td, 
.form table th, 
.form table td {
    display: block;
    border-bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
}
.form table th, 
.form table td {
    padding: 20px 10px;
}
.requirementsSummary table th, 
.form table th {
    padding-bottom: 0;
}
.requirementsSummary table td, 
.form table td {
    border-bottom: 1px solid var(--black);
}
.form table th p,
.form table td p:has(.wpcf7-radio) {
    padding: 0;
}

.cmp #main, 
.not-found #main{
    padding-top: 120px;
}
.cmp #main h2, 
.not-found #main h2 {
    font-size: 24px;
}

}