@charset "UTF-8";

/* Google font Icon */
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

html {
    scroll-behavior: smooth;
}


.hero {
    position: relative;
    width: 100%;
    height: 600px;
    /* 高さ600pxに変更 */
    overflow: hidden;
    background: #fff;
    /* 背景色を白に変更 */
}

.hero video,
.main_img,
.hero .catchcopy {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 1.5s ease;
}

/* 初期状態 */
#heroVideo {
    opacity: 1;
    z-index: 1;
}

#heroImage {
    opacity: 0;
    z-index: 0;
}

#catchcopy {
    position: absolute;
    opacity: 0;
    /* 最初は非表示 */
    z-index: 2;
    /* 動画の上に配置 */
    width: 100%;
    height: 100%;
    /* 高さを100%にして中央寄せを効かせる */
    display: flex;
    justify-content: center;
    align-items: center;
}

#catchcopy img {
    position: relative;
    width: 500px;
}

/* フェード用クラス */
.fade-in {
    opacity: 1 !important;
}

.fade-out {
    opacity: 0 !important;
}

/* 画像モードに切替えたら、hero を通常の高さに戻す */
.hero.image-mode {
    height: auto;
}

/* 画像を通常フローに戻して高さを画像に合わせる */
.hero.image-mode .main_img {
    position: relative;
    width: 100%;
    height: 100%;
}

/* メリット */

.merit {
    position: relative;
    display: block;
    background-color: #fff;
    border: #eaf4dc 30px solid;
    height: 480px;
}

.merit ul {
    display: flex;
    justify-content: center;
    position: relative;
}



.merit p {
    font-size: 35px;
    font-weight: bold;
    text-align: center;
    color: #32b4dc;
    margin: 0px;
    line-height: 1.4;
    letter-spacing: 0.1rem;
}

.marker_underline {
    background: linear-gradient(to top, #efea3a 30%, transparent 40%);
    padding: 0 0px;
    /* ← 左右に余白を追加して帯を長めに */
}

.anchorlink {
    display: block;
    width: 100%;
    background-color: #eaf4dc;
    height: 180px;
}

.anchorlink ul {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}

.anchorlink ul li {
    position: relative;
    display: block;
    width: 200px;
    height: 100px;
    background-color: #32b4dc;
    margin-left: 2px;
    box-shadow: #333333 0px 2px;
    transition: 0.3s;
}

.anchorlink ul li:hover {
    background-color: #96c850;
    box-shadow: #333333 0px 2px;
    transition: 0.3s;
}

.anchorlink ul li:first-child {
    margin-left: 0px;
    border-radius: 5px 0px 0px 5px;
}

.anchorlink ul li:last-child {
    border-radius: 0px 5px 5px 0px;
}

.anchorlink ul li img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.anchorlink ul li a {
    display: block;
    width: 100%;
    height: 100%;
}

/* スペーサー */

.spacer {
    display: block;
    width: 100%;
    height: 200px;
    background-color: #32b4dc;
    background-blend-mode: multiply;
    background-size: cover;
    margin-top: 80px;
}

.spacer.spacer_photo_1 {
    background-image: url(image/spacer_photo_1.jpg);
    background-position: center 60%;
}

.spacer.spacer_photo_2 {
    background-image: url(image/spacer_photo_2.jpg);
    background-position: center 50%;
}


/* 当社の特徴 */

/* 大阪のビル群 */
#features {
    margin: 0;
}

.features_title_img {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
}

.features_01 {
    margin: 20px 0px 0px 0px;
    position: relative;
}

.features_02,
.features_03 {
    margin: 80px 0px 0px 0px;
    position: relative;
}



.features_wrapper p {
    position: relative;
    margin: 20px 0px 0px 80px;
    font-size: 2rem;
    line-height: 35px;
    font-weight: bold;
    font-feature-settings: "palt";
    color: #333;
}

.no_01_outer {
    display: flex;
    align-items: center;
}

.no_02_outer {
    display: flex;
    align-items: center;
    margin-left: 300px;
}


.no_03_outer {
    display: flex;
    align-items: center;
}

.features_01 .features_lead,
.features_02 .features_lead,
.features_03 .features_lead {
    display: block;
    position: relative;
    font-size: 3rem;
    line-height: 1.2;
    font-weight: bold;
    font-feature-settings: "palt";
    margin: 0 0 0 30px;
    color: #333;
}

.features_01 ul {
    margin: 20px 0px 0px 90px;
    font-size: 1.6rem;
    line-height: 3.5rem;
    font-feature-settings: "palt";
}

.features_01 ul li {
    list-style-type: disc;
}


.features_02 .features_02_img {
    position: absolute;
    top: 0;
}



.features_wrapper .features_02 p:nth-child(4) {
    position: relative;
    margin: 20px 0px 0px 300px;
    font-size: 2rem;
    line-height: 35px;
    font-weight: bold;
    font-feature-settings: "palt";
    color: #333;
}


.features_02 ul {
    margin: 40px 0px 0px 90px;
    font-size: 1.6rem;
    line-height: 3.5rem;
    font-feature-settings: "palt";
}

.features_02 ul li {
    list-style-type: disc;
}

.bold_blue {
    font-size: 1.8rem;
    font-weight: bold;
    color: #32b4dc;
}

.features_03 .features_03_text {
    font-weight: normal;
    font-size: 1.6rem;
    margin: 30px 0px 0px 90px;
    line-height: 3.5rem;
    font-feature-settings: "palt";
    color: #333;
}

.features_03 .features_03_img {
    position: absolute;
    right: 0;
    top:0;
}


.business_partner {
    margin-top: 80px;
}

.business_partner_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: #32b4dc;
    letter-spacing: 5px;
}

.business_partner_title::before,
.business_partner_title::after {
    border: 1px solid #32b4dc;
    content: "";
    width: 30px;
}

.business_partner_title::before {
    margin-right: 10px;
}

.business_partner_title::after {
    margin-left: 10px;
}

.business_partner .cap {
    display: block;
    position: relative;
    font-size: 1.4rem;
    margin: 0px 0px 10px;
    top: -10px;
    text-align: center;
    font-weight: normal;
}

.business_partner_list {
    position: relative;
    font-size: 1.6rem;
    line-height: 3rem;
}


/* モーダル */


#openModalBtn {
    margin-top: 30px;
}


.modal-open {
    overflow: hidden;
    /* 背景スクロール禁止 */
}


.open-modal-btn {
    color: #fff;
    border: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    font-size: 20px;
    width: 300px;
    height: 80px;
    background-color: #32b4dc;
    box-shadow: #333333 0px 2px;
    transition: 0.3s;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}


.open-modal-btn:hover {
    background-color: #96c850;
    box-shadow: #333333 0px 2px;
    transition: 0.3s;
}

/* オーバーレイ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    /* ← ここで暗幕を管理 */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 9990;
}

.modal-overlay.show {
    opacity: 0.95;
    visibility: visible;
}

/* コンテンツエリアをスクロール可能にする */
.modal-content {
    text-align: center;
    background: #fff;
    /* 内側に白背景をつけてもOK */
    width: 60%;
    max-width: 800px;
    max-height: 90vh;
    /* 高さ制限 */
    overflow-y: auto;
    /* 縦スクロール可 */
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.modal-content_title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #32b4dc;
}

.modal-content p {
    font-size: 1.3rem;
    line-height: 2.5rem;
    margin: 0;
    font-weight: normal;
}

.modal-content p:nth-of-type(1),
.modal-content p:nth-of-type(12) {
    margin-top: 20px;
    color: #32b4dc;
    font-weight: bold;
}



/* 閉じるボタン */
.modal-close {
    position: absolute;
    top: 2%;
    right: 16%;
    width: 50px;
    height: 50px;
    border: none;
    background: transparent;
    font-size: 50px;
    cursor: pointer;
    color: #fff;
}
/* max(2%, env(safe-area-inset-top))
max(16%, env(safe-area-inset-right)) */


#features {
    margin-top: 60px;
    position: relative;
}

.features_title {
    height: 70px;
    display: block;
    border-bottom: 1px solid #32b4dc;
}

.features_title_translation {
    font-size: 20px;
    margin: 0px;
}

.features_title_text {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin: 20px 0 0;
    line-height: 3rem;
}


/* 業務内容 */

#description {
    margin-top: 60px;
}

.description_title {
    height: 70px;
    display: block;
    border-bottom: 1px solid #32b4dc;
}

.description_title_translation {
    font-size: 20px;
    margin: 0px;
}

.description_title_text {
    text-align: center;
    font-size: 20px;
    margin: 20px 0 0;
    line-height: 3rem;
    font-feature-settings: "palt";
}

.description_grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    grid-template-rows: 170px 170px 170px 180px;
    justify-content: center;
    background-color: #eaf4dc;
    width: 100%;
    padding: 50px 80px;
    margin: 50px 0;
}

.description_item {
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}


.description_itemx2.di_09 {
    margin-top: 30px;
    background-color: #fff;
    grid-column: 1/3;
    grid-row: 3 /5;
}

.description_itemx2.di_10 {
    margin-top: 30px;
    background-color: #fff;
    grid-column: 3/5;
    grid-row: 3 /5;
}


.description_itemx2 {
    display: grid;
    align-items: center;
}

.description_itemx2_title {
    text-align: center;
    font-size: 30px;
    line-height: 1.2em;
    font-weight: bold;
    color: #32b4dc;
    margin: 0;
}

.description_itemx2_text {
    margin-top: 30px;
    text-align: center;
    font-size: 16px;
    line-height: 1.6em;
    font-weight: normal;
    color: #333;
    font-feature-settings: "palt";
}


/* 応募要項 */


#recruitments {
    margin-top: 60px;

}

.recruitments_title {
    height: 70px;
    display: block;
    border-bottom: 1px solid #32b4dc;
}

.recruitments_title_translation {
    font-size: 20px;
    margin: 0px;
}

.recruitments_title_text {
    text-align: center;
    font-size: 20px;
    line-height: 3rem;
    margin: 20px 0 0;
    font-feature-settings: "palt";

}


/* 応募要項表 */

.requirements_table {
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 30px;
    width: 800px;
    font-feature-settings: "palt";
}

.requirements_table td {
    padding-top: 20px;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 20px;
    overflow: visible;
    line-height: 2.5rem;
    box-sizing: border-box;
    border-collapse: separate;
    font-size: 14px;
    border-bottom: 1px solid #808080;
    border-top: 1px solid #808080;
}

.requirements_table th {
    background-color: #32b4dc;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
    width: 18%;
    font-weight: bold;
    border-bottom: 1px solid #808080;
    border-top: 1px solid #808080;
    line-height: 2rem;
}


/* < !-- アコーディオン --> */

.construction {
    width: 800px;
    margin: 0 auto 50px;
    font-feature-settings: "palt";
}

.bl_accordionContent {
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.bl_accordionContent.open {
    opacity: 1;
    height: auto;
}

.bl_accordionTitle {
    position: relative;
    cursor: pointer;
    padding: 0 30px 0;
    border-radius: 5px;
    background-color: #96c850;
    transition: background-color 0.3s ease;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.bl_accordionTitle p {
    color: #fff;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.bl_accordionTitle.active {
    background-color: #66ac00;
    margin-bottom: 20px;
}

.bl_accordionTitle p::after {
    display: block;
    position: absolute;
    font-size: 30px;
    top: -6px;
    bottom: 0;
    right: 15px;
    content: "\e313";
    font-family: "Material Icons";
    transition: 0.5s;
    color: rgb(255, 255, 255);
}


.bl_accordionTitle.active p::after {
    display: block;
    position: absolute;
    font-size: 30px;
    top: -6px;
    bottom: 0;
    right: 15px;
    content: "\e316";
    font-family: "Material Icons";
    transition: 0.5s;
    color: rgb(255, 255, 255);
}


.construction_title {
    height: 25px;
    margin-bottom: 50px;
}

.construction_title p {
    font-size: 25px;
    text-align: center;
    font-weight: bold;
    color: #333;
}


/* アコーディオンテーブル */

.tg {
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    width: 700px;
}

.tg td {
    padding-top: 10px;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 20px;
    overflow: visible;
    line-height: 2.5rem;
    box-sizing: border-box;
    border-collapse: separate;
    font-size: 1.4rem;
    border-bottom: 1px solid #808080;
    border-top: 1px solid #808080;
}

.tg .midashi {
    background-color: #aaa;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
    width: 15%;
    font-weight: bold;
}

.tg .honbun {
    background-color: #ffffff;
    color: #333333;
    width: 85%;
}