@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    word-break: keep-all;
    line-break: normal;
    overflow-wrap: break-word;
}

body {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN",
        "Hiragino Sans", Meiryo, sans-serif;
}

/* 改行br */
.sp-only {
    display: none;
}

/* 改行br */
.sp-only400px {
    display: none;
}

h4 {
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: bold;
    color: #FF6928;
    margin-bottom: 10px;
}

h3 {
    font-size: 32px;
    font-weight: 700;
    color: #222;
    margin-bottom: 25px;
}

.catch {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.6;
    color: #FF6928;
    margin-bottom: 25px;
}

.description {
    font-size: 16px;
    color: #444;
    line-height: 1.8;
    margin-bottom: 40px;

    line-break: strict;   /* 日本語禁則を厳密に */
    word-break: normal;   /* 単語を無理に割らない */
}

.btn {
    display: inline-block;
    background-color: #FF6928;
    color: white;
    padding: 16px 40px;
    border-radius: 40px;
    font-size: 18px;
    text-decoration: none;
    font-weight: 600;
}

.btn:hover {
    background-color: #FFF5EB;
    color: #FF6928;
}

/* --------------contact---------------- */
.contact {
    width: 100%;
    padding: 60px 0;
    text-align: center;
    position: relative;
    overflow: hidden;

    /* 背景画像 */
    background-image: url("image/contact-bg.webp");
    background-size: cover;
    background-position: center;
}

.contact::before {
    content: "";
    position: absolute;
    inset: 0;

    /* 黒フィルター */
    background-color: rgba(56, 56, 56, 0.6);
    z-index: 1;
}

/* 中身をフィルターより上に */
.contact>* {
    position: relative;
    z-index: 2;
}

.contact h4 {
    color: white;
    margin-bottom: 6px;

}

.contact h3 {
    color: white;
    margin-bottom: 12px;

}

.ct-cn-text {
    color: white;
    font-size: 16px;
    margin-bottom: 30px;
}

.ct-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px 0;
    background-color: white;

    display: flex;
}

.ct-left {
    width: 60%;
}

.cl-text {
    font-size: 18px;
    font-weight: 500;
}

.cl-phone {
    font-size: 30px;
    color: #FF6928;
    font-weight: 600;
}

.fa-phone {
    padding-right: 8px;
}

.ct-right {
    width: 40%;
    display: flex;
    text-align: center;
    align-items: center;
}



/* --------------------------------------
header
-------------------------------------- */
header {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 30px;
}

.company-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.company-name h1 a {
    color: black;
    text-decoration: none;
    font-size: 32px;
}

.company-name img {
    width: 80px;
    height: 80px;
}

.company-name h1 {
    font-family: "Inter", "Noto Sans JP", "Yu Gothic", sans-serif;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.pc-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding-top: 10px;

    /* 非表示 */
    display: block;
}

.pc-menu div {
    text-align: right;
}

.pc-menu div a {
    color: black;
    text-decoration: none;
    margin-right: 20px;
}

.pc-menu a i {
    font-size: 24px;
}

.pc-menu ul {
    display: flex;
    list-style: none;
    gap: 20px;
}

.pc-menu li {
    width: 100px;
    text-align: center;
}

.pc-menu ul a {
    color: black;
    text-decoration: none;
    font-size: 18px;

    display: block;

    width: 100%;

    height: 100%;
    padding: 8px 0;
}

.pc-menu a:hover {
    color: #FF6928;
    transition: 0.3s;
}


.sp-menu {
    display: none;
    margin-left: auto;
}

/* 三本線の設定 */
.sp-menu #open {
    font-size: 40px;
    line-height: 75px;
    cursor: pointer;
}

.overlay {
    position: fixed;
    /* inset: 0; */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(245, 245, 245, 0.911);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 999;
    /* 0.6秒かけて表示や非表示 */
    transition: opacity 1s;
}

/* ばつボタンの設定 */
.overlay #close {
    /* 配置 */
    position: absolute;
    right: 30px;
    line-height: 75px;
    font-size: 40px;
    cursor: pointer;
}

.overlay>div {
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 真ん中に配置 */
    text-align: center;
    /* アイコン・リンクを中央揃え */
}

.overlay a i {
    font-size: 24px;
    margin: 0 10px;
}

.overlay ul {
    list-style: none;
    padding: 0;
    margin-top: 60px;
    margin: 20px 0 0 0;
}

.overlay li {
    padding-top: 40px;
    /* 透明に */
    opacity: 0;
    /* 16px下に　下から上がってくるように見せるため */
    transform: translate(0, 16px);
    /* 0.3秒かけて表示非表示 */
    transition: transform.3s, opacity .3s;
}

.overlay a {

    text-decoration: none;
    color: black;
    font-size: 20px;
    cursor: pointer;
}

.overlay a:hover {
    color: #FF6928;
    transition: color 0.3s;
}

/* 表示させる */
.overlay.show {
    opacity: 1;
    visibility: visible;
    /* クリックできるよう規定値のautoをつける */
    pointer-events: auto;
}


/* .showがつくとmenuが動いて表示される */
.overlay.show li {
    opacity: 1;
    transform: none;
}


/* 順番に表示させる */
/* １番目 */
.overlay.show li:nth-child(1) {
    transition-delay: .1s;
}

/* ２番目 */
.overlay.show li:nth-child(2) {
    transition-delay: .3s;
}

/* 3番目 */
.overlay.show li:nth-child(3) {
    transition-delay: .5s;
}

/* 4番目 */
.overlay.show li:nth-child(4) {
    transition-delay: .7s;
}



/* --------------------------------------
main
-------------------------------------- */
/* --------------company---------------- */
.company {
    position: relative;
    width: 100%;
    /* videoと同じ高さ */
    height: 700px;
    overflow: hidden;
}

#bg-video {
    position: absolute;
    /* 背景として絶対配置 */
    top: 50%;
    left: 50%;
    /* 要素の幅の 50%、高さの 50% 分だけ左上からずらす */
    transform: translate(-50%, -50%);
    width: 100%;
    height: 700px;

    object-fit: cover;
    z-index: -1;
    /* クリックなど操作を無効化 */
    pointer-events: none;
}

.company div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    color: white;
}

.company h2 {
    font-size: 52px;
    padding: 10px 0;
    letter-spacing: 2px;
    text-shadow: 1px 2px 0.8px black;

    transform: translateX(-200px);
    opacity: 0;
    transition: all 1s ease;
}

.company h2.show {
    transform: none;
    opacity: 1;
}

.company p {
    font-size: 24px;
    text-shadow: 1px 2px 0.8px black;
    transform: translateX(200px);
    opacity: 0;
    transition: all 1s ease;
}

.company p.show {
    transform: none;
    opacity: 1;
}

/* --------------about---------------- */
#about {
    display: flex;
    margin-top: 50px;
    width: 100%;
    align-items: center;
    justify-content: center;
}

#about div img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 右側コンテンツ */
.explanation {
    width: 50%;
    padding: 60px 80px;
    opacity: 0;
    transform: translateX(-200px);
    transition: all 1s ease;
}

.explanation.show {
    opacity: 1;
    transform: none;
}



.about-list {
    border-left: 3px solid #ddd;
    padding-left: 20px;
}

.about-list p {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 1.8;
    color: #333;
}

/* ：の前 */
.about-label {
    min-width: 140px;
    font-weight: 600;
    color: #111;
    white-space: nowrap;
}

/* ：の後 */
.about-text {
    flex: 1;
}

/* --------------service---------------- */
.service {
    max-width: 1300px;
    margin: 50px auto 0;
    padding: 60px 20px;
}

.service-introduce {
    text-align: center;
    font-size: 16px;
    padding-bottom: 10px;
    border-bottom: 5px dotted #ddd;
}

.service-container {
    width: 100%;
    margin-top: 60px;
}

.service-container article {
    width: 90%;
    margin: 40px auto;
    padding: 40px 30px 0;
    border: 2px solid #FF6928;
    border-radius: 36px;
    position: relative;

    transition:
        box-shadow 0.4s ease,
        border-color 0.4s ease,
        transform 0.4s ease;
}

/* 長文の一つ目のservice-chのため */
/* .service-container article:nth-child(1) {
    padding: 50px 30px 0;
} */

.service-container article:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    border-color: #FF6928;
}

.service-ch {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.6;
    color: #FF6928;
    background-color: white;
    padding: 0 10px;
    position: absolute;
    top: -20px;
}

/* 長文のservice-chを選んで動かすCSS */
/* article:first-of-type .service-ch {
    top: -40px;
} */

.service-summary {
    font-size: 20px;
    line-height: 2;
    font-weight: 600;
    text-align: center;
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;

    border-bottom: 5px dotted #ddd;
    padding-bottom: 50px;
}

.service-summary::before {
    content: "★";
    /* 飾りを先頭に付ける */
    color: #FF6928;
    margin-right: 6px;
}

/* --------------INFORMATION---------------- */
.information {
    width: 100%;
    margin: 100px auto 0;
    padding: 100px 0;
    background-color: #FFF1E8;
}

.information h4 {
    text-align: center;
}

.information h3 {
    text-align: center;
    padding-bottom: 30px;
}

.job-detail a {
    text-decoration: none;
    color: inherit;
}

/* --------------news---------------- */
.news {
    max-width: 1100px;
    margin: 50px auto 0;
    padding: 60px 20px;
    display: flex;
    gap: 20px;
}

.news-container {
    width: 200px;
}

.news-list {
    width: 900px;
}

.news-list ul {
    list-style: none;
    padding: 0;
    border-top: 1px solid #ddd;
}

.news-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 10px;
    border-bottom: 1px solid #ddd;
}

.news-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.news-date {
    font-size: 16px;
    color: #555;
    min-width: 100px;
}

.news-tag {
    color: white;
    padding: 4px 10px;
    font-size: 14px;
    border-radius: 3px;
    white-space: nowrap;
    min-width: 80px;
    text-align: center;
}

.tag-orange {
    background: #FF6928;
}

.tag-blue {
    background: #143C8C;
}

.tag-red {
    background: #D82323;
}

.tag-green {
    background: #27AE60;
}


.news-title {
    font-size: 16px;
    color: #333;
    flex: 1;
}

/* --------------recruit---------------- */
#recruit {
    width: 100%;
    margin-top: 110px;
    position: relative;
    overflow: hidden;

    /* 背景画像 */
    background-image: url("image/recruit.webp");
    background-size: cover;
    background-position: center;

    /* 背景白フィルター */
    background-color: rgba(255, 255, 255, 0.719);
    background-blend-mode: lighten;
}

.recruit-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    position: relative;
    /* 背景の上に置く */
    z-index: 5;
    height: 500px;
}

.recruit-left {
    width: 55%;
    padding: 60px;
    z-index: 10;
    transform: translateX(-200px);
    opacity: 0;
    transition: all 1s ease;
}

.recruit-left.show {
    transform: none;
    opacity: 1;
}


/* 右側・斜め切りの写真 */
.recruit-image {
    width: 45%;
    height: 100%;
    position: relative;
    background-image: url("image/recruit2.webp");
    background-size: cover;
    background-position: center;

    /* 斜め切り */
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}


/* --------------------------------------
footer
-------------------------------------- */
footer {
    width: 100%;
    margin: 0 auto;
    padding: 30px 0;
    text-align: center;
}

.ft-company h1 a {
    display: block;
    color: black;
    text-decoration: none;
    font-size: 20px;
}

.ft-company img {
    width: 100px;
    height: 100px;
}

.ft-company h1 {
    font-family: "Inter", "Noto Sans JP", "Yu Gothic", sans-serif;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.company-pf {
    padding: 20px 0;
    font-size: 14px;
}

footer small {
    font-size: 12px;
    color: #CCCCCC;
}

/* ----------------------------------
pcサイズ
------------------------------------- */
@media (max-width: 1200px) {
    .btn {
        display: block;
        margin: 0 auto;
        width: fit-content;
    }

    /* --------------contact---------------- */
    .contact {
        padding: 70px 0;
    }

    .ct-container {
        max-width: 100%;
        margin: 0 20px;

        flex-direction: column;
    }

    .ct-left {
        width: 100%;
    }

    .cl-phone {
        font-size: 30px;
        color: #FF6928;
        font-weight: 600;
    }

    .ct-right {
        width: 100%;
        margin-top: 20px;
    }

    /* --------------about---------------- */
    #about {
        flex-direction: column;
    }

    #about div {
        width: 100%;
    }

    #about div img {
        width: 100%;
        max-height: 400px;
        object-fit: cover;
    }

    .explanation {
        width: 100%;
        padding: 40px 20px;
    }

    /* --------------news---------------- */
    .news {
        width: 100%;
        flex-direction: column;
        gap: 0;
    }

    .news-container {
        width: 100%;
    }

    .news-list {
        width: 100%;
    }

    /* --------------recruit---------------- */
    .recruit-container {
        height: 600px;
        align-items: center;
    }

    .recruit-left {
        width: 60%;
        padding: 40px 30px;
    }

    .recruit-image {
        width: 40%;
        clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
    }

}

@media (max-width:800px) {
    h3 {
        font-size: 24px;
    }

    .catch {
        font-size: 18px;
    }

    .description {
        font-size: 14px;
    }


    /* --------------------------------------
header
-------------------------------------- */
    header {
        height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0 30px;
    }

    .company-name h1 a {
        font-size: 26px;
        line-height: 80px;
    }

    .company-name img {
        width: 60px;
        height: 60px;
    }

    /* --------------------------------------
main
-------------------------------------- */
    .pc-menu {
        display: none;
    }

    .sp-menu {
        display: block;
    }

    /* --------------company---------------- */
    .company {
        /* videoと同じ高さ */
        height: 500px;
    }

    #bg-video {
        height: 500px;
    }

    .company h2 {
        font-size: 28px;
        /* 単語単位で折り返す */
        word-break: break-word;
        /* 長い単語でも折り返す */
        overflow-wrap: break-word;
        white-space: normal;

        transform: translateX(0px);
    }

    .company p {
        font-size: 18px;

        transform: translateX(0px);
    }

    /* --------------about---------------- */
    .explanation {
        transform: translateX(0px);
    }

    .about-list p {
        flex-direction: column;
        gap: 3px;
        margin-bottom: 28px;
        font-size: 16px;
        line-height: 1.6;
    }

    .about-label {
        width: 100%;
    }

    .about-text {
        /* text-indent: 10px; */
        padding-left: 10px;
    }

    /* --------------service---------------- */
    .service {
        width: 100%;
    }

    .service-container {
        width: 100%;
    }

    .service-container article {
        width: 100%;
        margin: 20px auto;
        padding: 30px 8px 0;
    }

    /* .service-container article:nth-child(1) {
        padding: 40px 30px 0;
    } */

    .service-container article:hover {
        /* hover時の動きをなくす */
        transform: none !important;
    }

    .service-ch {
        font-size: 22px;
        padding: 0;
        margin-bottom: 25px;
        /*  absolute を無効化 */
        position: static;
        top: auto;
        display: block;
        background-color: transparent;
    }

    .service-summary {
        font-size: 16px;
        line-height: 2;
        margin-top: 50px;

        padding-bottom: 40px;
    }

    /* --------------INFORMATION---------------- */
    .information {
        margin: 70px auto 0;
        padding: 70px 0;
    }

    /* --------------news---------------- */
    .news-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .news-top {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .news-date {
        font-size: 14px;
    }

    .news-tag {
        font-size: 12px;
    }

    .news-title {
        margin-top: 5px;
        font-size: 14px;
    }

    /* --------------recruit---------------- */
    .recruit-container {
        flex-direction: column;
        height: auto;
    }

    .recruit-left {
        width: 100%;
        padding: 30px 20px;

        transform: translateX(0px);

    }

    .recruit-image {
        width: 100%;
        height: 250px;
        margin-top: 10px;
        /* 斜め切りなし */
        clip-path: none;
    }
}

/* 改行を有効化  */
@media (max-width: 600px) {
    .sp-only {
        display: block;
    }
}

/* 改行を有効化  */
@media (max-width: 400px) {
    .sp-only400px {
        display: block;
    }

    /* --------------company---------------- */
    .company h2 {
        font-size: 24px;
    }
}

/* -----------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
ABOUT,RECRUIT共通
--------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------- */
.common-head {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
}

.common-head img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: top;
}

.common-head div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    color: white;
}

.common-head h5 {
    font-size: 26px;
    letter-spacing: 2px;
    text-shadow: 1px 2px 0.8px black;
    opacity: 0;
    transform: translateX(-100px);
    transition: all 1s ease;
}

.common-head h5.show {
    opacity: 1;
    transform: none;
}

.common-head h6 {
    font-size: 46px;
    letter-spacing: 2px;
    text-shadow: 1px 2px 0.8px black;
    opacity: 0;
    transform: translateX(100px);
    transition: all 1s ease;
}

.common-head h6.show {
    opacity: 1;
    transform: none;
}

/* ---------------------------リスト-------------------------------- */
.job-detail {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.job-detail dl {
    border-top: 1px solid #ccc;
    opacity: 0;
    transform: translateY(90px);
    transition: all 1s ease;
}

.job-detail dl.show {
    opacity: 1;
    transform: none;
}


.job-detail .row {
    display: flex;
    padding: 20px 10px;
    border-bottom: 1px solid #ccc;
}

.job-detail dt {
    width: 200px;
    font-weight: bold;
    /* 親が flex のとき、画面が狭くなってもこの要素は縮まない */
    flex-shrink: 0;
}

.job-detail dd {
    margin: 0;
    line-height: 1.8;
}

.job-detail ul {
    margin: 10px 0 0;
    padding-left: 20px;
}

.job-detail li {
    list-style: disc;
}

.job-detail .note {
    font-size: 14px;
    color: #666;
}


@media (max-width:800px) {
    .common-head {
        height: 200px;
    }

    .common-head img {
        height: 200px;
    }

    .common-head h5 {
        font-size: 18px;
        transform: none;
    }

    .common-head h6 {
        font-size: 38px;
        letter-spacing: 2px;
        text-shadow: 1px 2px 0.8px black;
        transform: none;
    }

    /* ---------------------------リスト-------------------------------- */
    .job-detail {
        width: 100%;
    }

    .job-detail dl {
        transform: none;
    }

    .job-detail .row {
        flex-direction: column;
        padding: 20px
    }

    .job-detail dd {
        padding: 10px 10px 0;
    }

    .job-detail ul {
        margin: 10px 0 0;
        padding-left: 20px;
    }
}


/* -----------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------

recruit.index

--------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------- */
/* --------------message---------------- */
.message {
    max-width: 1000px;
    margin: 60px auto;
    padding: 40px 20px;
}

.message h4,
.message h3 {
    text-align: center;
}

.message h3 {
    padding-bottom: 10px;
    border-bottom: 5px solid #FF6928;
    margin-bottom: 40px;
}

.message>div {
    padding: 10px 0;
    display: flex;
    gap: 40px;
    align-items: center;
}

.message-img {
    width: 50%;
    opacity: 0;
    transform: translateX(-100px);
    transition: all 2s ease;
}

.message-img.show {
    opacity: 1;
    transform: none;
}

.message-img img {
    width: 100%;
    height: auto;
    display: block;
}

.message-text {
    width: 50%;
    opacity: 0;
    transform: translateX(100px);
    transition: all 2s ease;
}

.message-text.show {
    opacity: 1;
    transform: none;
}

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

/* --------------guidelines---------------- */
.guidelines {
    width: 100%;
    margin: 100px auto 30px;
    padding: 100px 0;
    background-color: #F5F5F5;
}

.guidelines h4 {
    text-align: center;
}

.guidelines h3 {
    text-align: center;
    padding-bottom: 30px;
}



@media (max-width:800px) {
    .message {
        width: 100%;
        padding: 0;
        margin: 70px auto 0;
    }

    .message h3 {
        font-size: 22px;
    }

    .message>div {
        flex-direction: column;
        padding: 0 20px;
        gap: 20px;
    }

    .message-img {
        width: 100%;
        transform: none;
    }

    .message-text {
        width: 100%;
        transform: none;
    }

    .message-text p {
        font-size: 16px;
    }

    /* --------------guidelines---------------- */
    .guidelines {
        margin: 70px auto 30px;
        padding: 70px 0;
    }
}

/* -----------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------

about.index

--------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------- */
/* --------------ABOUT---------------- */
/* .ab-container {
    max-width: 600px;
    margin: 60px auto;
    padding: 40px 20px;
}

.ab-container h4,
.ab-container h3 {
    text-align: center;
}

.ab-container h3 {
    padding-bottom: 10px;
    border-bottom: 5px solid #FF6928;
    margin-bottom: 40px;
}

.ab-container>div {
    opacity: 0;
    transform: translateY(100px);
    transition: all 2s ease;
}

.ab-container>div.show {
    opacity: 1;
    transform: none;
}

.ab-img {
    max-width: 400px;
    max-height: 400px;
    margin: 0 auto;
}

.ab-img img {
    width: 100%;
    height: 100%;
}

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

.no-break {
    white-space: nowrap;
} */

/* --------------INFORMATION---------------- */
/* .information {
    width: 100%;
    margin: 100px auto 0;
    padding: 100px 0;
    background-color: #FFF1E8;
}

.information h4 {
    text-align: center;
}

.information h3 {
    text-align: center;
    padding-bottom: 30px;
}

.job-detail a {
    text-decoration: none;
    color: inherit;
} */

@media (max-width:800px) {

    /* --------------ABOUT---------------- */
    /* .ab-container {
        width: 100%;
        padding: 0;
        margin: 70px auto 0;
    }

    .ab-container h3 {
        margin-bottom: 20px;
    }

    .ab-container>div {
        transform: none;
    }

    .ab-img {
        max-width: 300px;
        max-height: 300px;
        padding: 0 20px;
    }

    .ab-text {
        padding: 0 20px;
    } */

    /* --------------INFORMATION---------------- */
    /* .information {
        margin: 70px auto 0;
        padding: 70px 0;
    } */
}


/* -----------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------

form.index

--------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------- */
/* --------------CONTACT---------------- */
.contact-page {
    max-width: 600px;
    margin: 0 auto;
    padding: 100px 0;
}

.ctpg-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 16px;
}

.radio-group input {
    margin-right: 6px;
}

.required {
    color: #007BFF;
}

.input,
.textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: 10px;
    border: none;
    background-color: #FFF5EB;
    font-size: 16px;
}

.textarea {
    min-height: 140px;
    /* サイズ変更を「上下だけ」にできる指定 */
    resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
    color: #C98A63;
}

.submit-btn {
    margin-top: 12px;
    padding: 14px;
    border: none;
    border-radius: 10px;
    background: #FF6928;
    color: white;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
}

.submit-btn:hover {
    background-color: #FFF5EB;
    color: #FF6928;
}

@media (max-width:800px) {

    /* --------------CONTACT---------------- */
    .contact-page {
        width: 100%;
        padding: 70px 0;
    }

    .form-group {
        max-width: 100%;
        margin: 0 20px;
    }

    .radio-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-size: 16px;
    }

    .radio-group input {
        margin-right: 6px;
    }

    .required {
        color: #007BFF;
    }

    .submit-btn {
        margin: 0 20px;
    }
}