@charset "utf-8";

body{
    font-family: "Kosugi Maru", sans-serif;
    color: #969796;
    font-size: clamp(14px,3.0vw,22px);
    letter-spacing: 0.15rem;
    background-color: #ffffff;
}

img{
    max-width: 100%;  /* 画像が親要素の幅を超えないようにする */
    height: auto;  /* 画像の縦横比を保つ */
    vertical-align: bottom; /* 下側の余白を消す */
}


h1{
    margin: auto;
    width: 70%;
}

.fv{
    width: 100%;
}

/*
common
*/
.wrapper{
    padding: 0 20px;
    position: relative;
}
.contact-submit-btn{
    all: unset;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 24px;
}
.btn{
    width: 100%;
    max-width: 500px;
    margin: auto;
}
.btn:hover {
    opacity: 0.8;
    transform: scale(0.98,0.98);
}
.link{
    width: 100%;
    max-width: 600px;
    margin: auto;
    margin-bottom: 20px;
}
.link:hover {
    opacity: 0.8;
    transform: scale(0.98,0.98);
}
.half-space{
    margin-right: 5px;
}
.space{
    margin-right: 10px;
}

.bg-bubbles{
    background-image: url(img/service-bg.jpg);
    background-repeat:no-repeat; /*背景画像の繰り返しを解除*/
    background-size:cover; /*背景画像のサイズ指定*/
    background-position: center center;/*画像の位置指定（これは左右上下中央）*/
}
/*
service
*/
.service-title{
    width: 70%;
    margin: auto;
    padding: 15px 0;
}
.service-img{
    width: 100%;
}
.service-text{
    padding: 35px 0 70px;
}
.service{
    padding-bottom: 100px;
}


/*
cat
*/
.cat-img{
    width: 45%;
    max-width: 250px;
    position: absolute;
}
.cat1{
    top: -40%;
    right: 10px;
}
.cat2{
    bottom: -35%;
    left: 10px;
}


/*about*/
.about{
    padding: 100px 0 0;
    background-image: url(img/recruit-bg.png);
    background-repeat:no-repeat; /*背景画像の繰り返しを解除*/
    background-size:cover; /*背景画像のサイズ指定*/
    background-position: center top;/*画像の位置指定（これは左右上下中央）*/
}

/*
contact
*/
.contact{
    padding-bottom: 100px;
    background-image: url(img/contact-bg.png);
    background-repeat:no-repeat; /*背景画像の繰り返しを解除*/
    background-size:cover; /*背景画像のサイズ指定*/
    background-position: center center;/*画像の位置指定（これは左右上下中央）*/
}
.contact-title{
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    padding-top: 120px;
    margin: 30px 0;
}
.contact-text{
    text-align: center;
    padding: 0 5px;
}
.contact-text_small{
    color: #999999;
    font-size: 14px;
    text-align: center;
    padding-bottom: 50px;
}

/*
form
*/
.contact-form{
    width: 95%;
    margin: auto;
    max-width: 800px;
}
input,textarea{
    width: 95%;
    padding: 15px 20px;
    background-color: #ffffff;
    border: #ffffff;
    margin: 8px;
}
input{
    border-radius: 999px;
}
input[type="image"]{
    background-color: transparent;
}
textarea{
    height: 200px;
    border-radius: 20px;
}
input::placeholder,
textarea::placeholder{
    color: #cecece;
}
input,
textarea,
select {
    font-size: 16px;
}

/*
info
*/
.info{
    font-family: "Zen Kaku Gothic New", sans-serif;
    padding: 40px 0;
    background-color: #ffffff;
}
.info-title{
    font-size: larger;
    margin-bottom: 24px;
}
.info-table{
    font-size: 12px;
    color: #969796;
}

/*
gray
*/
.gray-circle{
    display: flex;
    gap: 20px;
    margin: 20px 40px;
}
.gray{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #808080;
}

/*
map
*/
.map {
    width: 100%;
    height: 220px;
}

/*
footer
*/
footer{
    background-color: #e6e6e6;
    padding: 10px;
    font-family: "Zen Kaku Gothic New", sans-serif;
}
footer p{
    text-align: center;
    font-size: 8px;
}



/*
thanks
*/
.thanks-wrapper{
    max-width: 800px;
    margin: auto;
    padding: 50px 20px;
    font-size: 16px;
    text-align: center;
}
.thanks-link{
    text-align: center;
    margin-top: 20px;
}
.thanks-link:hover{
    opacity: 0.8;
    text-decoration: underline #000000;
}


/***********************
下層ページ
************************/
/*
common
*/
.bg-blue {
    background-color: #dff2fb;
    background-image: none;
}
h2.title {
    font-size: 24px;
    text-align: center;
    margin-bottom: 24px;
}

/*************************
about.html
**************************/
/*
about
*/
.child-about{
    position: relative;
}
.about-bg_top{
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}
.about-bg_bottom{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}
.about-cat1{
    top: -17%;
    left: 0;
    z-index: 1;
}
.about-cat2{
    bottom: -12%;
    right: 0;
    z-index: 1;
    overflow: hidden;
}
.about-cat2 img{
    transform: rotate(20deg);
}
.about-wrapper {
    padding: 100px 5px;
    text-align: center;
}
p.about-text {
    padding: 2rem 0;
}

/*
flow
*/
.flow{
    padding: 50px 10px;
    max-width: 1200px;
    margin: auto;
}
.flow-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1rem;
    align-items: stretch;
    position: relative;
    padding-top: clamp(10px, 2.5vw, 20px);
    padding-bottom: clamp(12px, 3vw, 28px);
}
b.flow-sbtitle{
    font-size: 24px;
    margin-bottom: 1rem;
    display: block;
}
p.flow-sbtitle{
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 1rem;
}
p.flow-text {
    font-weight: normal;
}
small.flow-text {
    font-size: 12px;
    font-weight: normal;
    margin-top: 1rem;
    display: block;
}
.step.bg-orange {
    border-radius: 999px;
    background-color: #f7931e;
    color: #ffffff;
}
.step.bg-orange_last{
    background-color: #f7931e;
    color: #ffffff;
}
.step.non-data{
    opacity: 0;
}

    /* ===== レール（バー用） ===== */
.flow-rail{
    grid-row: 1 / -1;
    align-self: stretch;
    position: relative;
    z-index: 0;
}
.flow-rail--left  { grid-column: 1; }
.flow-rail--right { grid-column: 2; }

/* ← 高さは CSS 変数で。デフォルト0 */
.flow-rail::before{
    content:"";
    position:absolute;
    display:block;
    left:50%; transform:translateX(-50%);
    top: var(--bar-top, 0px);
    bottom: var(--bar-bottom, 0px);
    width:20px;                /* 端は角丸なし */
    background:#1ea6d1;
}
    /* ===== カード ===== */
.step {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    padding: 1rem 0.5rem;
    border: 4px solid #f7931e;
    text-align: center;
    z-index: 1; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 共通行（全幅） */
.step[data-path~="ab"] {
    grid-column: 1 / -1;
    text-align: center;
    font-weight: 700;
}
/* 共通行 (data-path="ab") にだけ 2 本出す */
.step[data-path~="ab"]::before,
.step[data-path~="ab"]::after{
    content:"";
    position:absolute;
    top:100%;
    width:20px;
    height: var(--line-height, 0); /* JSで計算した高さを入れる */
    background:#1ea6d1;
    z-index:0;
    transform: translateX(-50%);
}

/* 左のバーを全体の25%位置に */
.step[data-path~="ab"]::before{
    left:25%;
}

/* 右のバーを全体の75%位置に */
.step[data-path~="ab"]::after{
    left:75%;
}

/*************************
recruit.html
**************************/
section.recruit {
    padding: 50px 10px;
}
h2.recruit-title {
    font-size: 28px;
    margin-bottom: 24px;
    padding-left: 3rem;
}
table.recruit-table {
    text-align: left;
    width: 90%;
    margin: auto;
}
table.recruit-table th{
    background-color: #29abe2;
    color: #ffffff;
    padding: 0.5rem 1rem;;
}
table.recruit-table td{
    background-color: #ffffff;
    padding: 0.5rem 1rem;
}



/*モバイルファースト*/
@media screen and (min-width: 481px) {
	/* 481px以上に適用されるCSS（タブレット用） */
    /*
    common
    */
    .wrapper{
        max-width: 800px;
        margin: auto;
    }
    h1{
        width: 60%;
    }
    /*
    service
    */
    .service-title{
        width: 50%;
    }
    .service-img{
        width: 80%;
        margin: auto;
    }
    .service-text{
        width: 80%;
        margin: auto;
    }
    .service{
        padding-bottom: 100px;
    }

    /*
    cat
    */
    .cat1{
        top: -35%;
    }
    .cat2{
        bottom: -30%;
    }
    /*
    contact
    */
    .contact{
        padding-bottom: 100px;
    }
    .contact-title{
        font-size: 40px;
    }
    .contact-text_small{
        font-size: 18px;
    }

    /*
    form
    */
    input,textarea{
        padding: 20px 25px;
        font-size: 16px;
    }

    /*
    info
    */
    .info-table{
        font-size: 18px;
    }

    /*
    map
    */
    .map {
        width: 80%;
        height: 400px;
        margin: auto;
    }

    /*
    footer
    */
    footer p{
    font-size: 10px;
    }

    /***********************
    下層ページ
    ************************/
    h2.title {
        font-size: 40px;
    }

    /*************************
    about.html
    **************************/
    b.flow-sbtitle {
        font-size: 34px;
    }
    small.flow-text {
        font-size: 15px;
    }
    p.flow-sbtitle {
        font-size: 34px;
    }
    .flow-wrapper {
        gap: 2rem 1.5rem;
    }
    .step[data-path~="ab"]::before, .step[data-path~="ab"]::after {
        width: 30px;
    }

    /*************************
    recruit.html
    **************************/
    h2.recruit-title {
        font-size: 44px;
        padding-left: 8rem;
    }
    table.recruit-table{
        width: 80%;
    }
    table.recruit-table th {
        padding: 1rem 1.5rem;
    }
    table.recruit-table td {
        padding: 1rem 1.5rem;
    }


}
@media screen and (min-width: 960px) {
	/* 960px以上に適用されるCSS（PC用） */
    .wrapper{
        max-width: 900px;
    }
    h1{
        width: 40%;
    }
    /*
    service
    */
    .service-title{
        width: 30%;
    }
    .service-img{
        width: 100%;
    }
    .service-text{
        width: 100%;
    }
    .service{
        padding-bottom: 100px;
    }
    .text-pc{
        display: none;
    }
    /*
    footer
    */
    footer p{
    font-size: 12px;
    }

    /*************************
    about.html
    **************************/
    b.flow-sbtitle {
        font-size: 40px;
    }
    small.flow-text {
        font-size: 18px;
    }
    p.flow-sbtitle {
        font-size: 40px;
    }
    .flow-wrapper {
        gap: 2.5rem 2rem;
    }
    .step[data-path~="ab"]::before, .step[data-path~="ab"]::after {
        width: 40px;
    }

    /*************************
    recruit.html
    **************************/
    h2.recruit-title {
        padding-left: 15rem;
    }
    table.recruit-table{
        width: 70%;
    }

}