@charset "utf-8";

/*=========================
　　　　　基本設定
　=========================*/
*,*:after,*:before{
	box-sizing: border-box;
}
/*|||||||| 色の設定   	||||||||*/
:root{
    --cl-b_1 :rgb(238, 249, 255);
    --cl-b_2 :rgb(189, 232, 255);
    --cl-b_3 :rgb(124, 216, 255);
    --cl-b_5 :rgb(26, 153, 216);
    --cl-b_7 :rgb(17, 95, 133);

    --cl-p_1 :rgb(255, 243, 249);
    --cl-p_3 :rgb(253, 182, 213);
    --cl-p_5 :rgb(255, 132, 187);
    --cl-p_7 :rgb(255, 75, 183);

    --cl-g_1 :rgb(238, 255, 237);
    --cl-g_3 :rgb(187, 255, 222);
    --cl-g_5 :rgb(26, 167, 99);

    --cl-0 :rgba(255, 255, 255);
    --cl-0_5 :rgba(255, 255, 255, 0.5);
    --cl-0_7 :rgba(255, 255, 255, 0.7);
    --cl-0_0 :rgba(255, 255, 255, 0); /*透明*/

    --cl-r_7 :rgb(237, 31, 37);
    --cl-bl_5 :rgba(0, 0, 0, 0.8);
    --cl-bl_7 :rgba(30, 30, 30, 0.8);
}

/*背景色*/
.bgc-b_1{
    background-color: var(--cl-b_1);
}
.bgc-b_2{
    background-color: var(--cl-b_2);
}
.bgc-b_3{
    background-color: var(--cl-b_3);
}
.bgc-p_1{
    background-color: var(--cl-p_1);
}
.bgc-p_3{
    background-color: var(--cl-p_3);
}
.bgc-g_1{
    background-color: var(--cl-g_1);
}
.bgc-0_5{
    background-color: var(--cl-0_5);
}
.bgc-0_7{
    background-color: var(--cl-0_7);
}
.bgc-0{
    background-color: var(--cl-0);
}


/*|||||||| 文字の設定   	||||||||*/
html{
    font-size: 62.5%;
    color: rgb(30, 30, 30);
    scroll-behavior: smooth;
}
body{
    font-size: 16px;
}

h1,h2,h3,h4{
	line-height: 1.3em;
    margin: 0.8em 0;
}
h1{
    font-size: 3.6rem;
    letter-spacing: 0.2em;
    text-align: center;
    margin: 0 0 0.8em;
}
h2{
    font-size: 3rem;
    border-bottom: solid 4px;
    padding: 0 0.5em;
}
h3{
	font-size: 2.6rem;
	border-left: double 14px var(--cl-b_3);
    background-color: rgba(255, 255, 255, 0.8);
	padding: 0.3em 10px;
}
h4{
	font-size: 2.4rem;
    padding: 0.3em 0.5em;
	border-left: solid 6px var(--cl-b_3);
    background-color: rgba(255, 255, 255, 0.8);
}
.bgc-b_1 .rounded,.bgc-b_1 h2{
    border-bottom-color: var(--cl-b_5);
}
.bgc-p_1 .rounded,.bgc-p_1 h2{
    border-bottom-color: var(--cl-p_5);
}
.bgc-g_1 .rounded,.bgc-g_1 h2{
    border-bottom-color: var(--cl-g_5);
}

.rounded{
    border-radius: 30px;
    background-color: var(--cl-0_7);
    margin-left: -16px;
    padding: 1.6rem;
}
h1.rounded{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom: solid 6px;
    padding: 0.2em ;
    width: 80%;
}
@media screen and (max-width:768px){
    h1.rounded{
        width: 100%;
    }
}
h2.rounded{
    margin: 0 2rem 2rem;
    padding: 6px;
    text-align: center;
    letter-spacing: 0.2em;
}



section > h1,section > h2,section > h3,section > h4{
    margin-top: 0;
}
.sticky h2{
    font-size: 2rem;
    border-bottom: none;
    margin: 0;
    padding: 0 0.5em;
}
.rounded > h2{
    margin: 0;
    text-align: center;
    letter-spacing: 0.15em;
}
dl + h2{
    margin-top: 3rem;
    margin-bottom: 2rem;
}
.grid-inview-a h2,.grid-inview-b h2{
    margin-bottom: 1rem;
}


@media screen and (max-width:980px){
    h2.letter-title{
        font-size: 2.6rem;
    }
}

.rounded > li h3,.rounded h4{
    margin-top: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    text-align: center;
}
#statistic + section h3{
    border: none;
    text-align: center;
    background-color: transparent;
    margin: 0;
    font-size: 2rem;
}
.area h4{
    border: none;
    background-color: var(--cl-0_0); 
}
.card h3{
    margin: 0;
}
.bgc-p_1 h3{
    border-left: double 14px var(--cl-p_3);
}

p{
    font-size: 16px;
    line-height: 1.8em;
    margin: 1rem 0;
}
.lead_text,.lead_text p{
    font-size: 1.1em;
    font-weight: bold;
}
.lead_text{
    margin: 1.5em 1rem;
}
.card-row3 p,.card-row4 p{
    margin: 10px;
}
dd p{
    margin: 1rem 0;
}
dd p:last-of-type{
    margin-bottom: 0;
}
.dashed > p{
    margin-top: 0;
}
.marker {
    background: linear-gradient(transparent 10%, rgba(255, 255, 0, 0.7) 70%);
    border-radius: 20px 20px 10px 10px;
}
.double{
    border-bottom: double 5px var(--cl-r_7);
    width: fit-content;
    font-weight: bold;
}
.incline{
    transform: rotate(-4deg);
}
.red{
    color: red;
    font-weight: bold;
}
.title{
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.12em;
    margin-bottom: 0.5em;
    line-height: 1.2em;
}
.right{
	text-align: right;
}
.syokusyu{
    margin-left: 0.5em;
    font-weight: bold;
}
.news_category,.news_category2{
	background-color: var(--cl-g_3);
	border-radius: 4px;
	width: 6em;
	text-align: center;
	font-size: small;
	line-height: 2em;
}
.news_category2{
	background-color: var(--cl-p_3);
}


.numeral {/*数字の装飾・数字で見るともかわさき*/
	text-align: center;
	font-size: 4rem;
	font-weight: bold;
    margin-bottom: 30px;
}
.data .numeral{
    font-size: 1.5em;
    line-height: 1em;
    margin-bottom: 0;
}
.unit{/*単位等を小文字*/
	font-size: 0.6em;
	padding: 0 0.2em;
}
.time.area1{
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.2em;
	color: rgb(255, 255, 255);
    text-align: center;
    height: 80px;
    background-color: var(--cl-b_3);
    border-radius: 50%;
    margin: 0 14px;
    align-content: center;
}
.task{
    font-weight: bold;
    font-size: 2rem;
}

/*最小値:1.1rem → 可変（0.9rem + 0.625vw（画面幅320px:2px, 800px:5px, 1200px:7.5px））→ 最大値:1.6rem*/
.font-size-S {
    font-size: clamp(1.1rem, calc(0.9rem + 0.625vw), 1.6rem);
}
.font-size-M {
    font-size: clamp(1.2rem, calc(1rem + 0.625vw), 1.7rem);
}
.font-size-L {
    font-size: clamp(2.4rem, calc(1.8rem + 0.625vw), 2.9rem);
}
.font-size-LL {
    font-size: clamp(2rem, calc(1.8rem + 1.83vw), 4rem);
}
.font-size-XL {
    font-size: clamp(2rem, calc(1.6rem + 3vw), 7rem);
}

/*---webフォント---*/
.zen-maru-gothic-regular
,*{
	font-family: "Zen Maru Gothic", serif;
	font-weight: 400;
	font-style: normal;
}
.zen-maru-gothic-bold
,h1,h2,h3,h4 {
	font-family: "Zen Maru Gothic", serif;
	font-weight: 700;
	font-style: normal;
}
.zen-kurenaido-regular {
	font-family: "Zen Kurenaido", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.zen-old-mincho-regular
,.zen-old-mincho-regular p {
	font-family: "Zen Old Mincho", serif;
	font-weight: 400;
	font-style: normal;
}
.rocknroll-one-regular {
    font-family: "RocknRoll One", sans-serif;
    font-weight: 400;
    font-style: normal;
}




/*|||||||| リンクの設定   	||||||||*/
a{
    text-decoration: none;
    color: rgb(30, 30, 30);
}
a.anchor{
    display: block;
    padding-top: 78px;
    margin-top: -78px;
}
li a{
    display: block;
}
.grid-column1_row3 a.btn{
    margin: 0;
}

/*|||||||| 枠の設定 	||||||||*/
/*=== ヘッダー ===*/
#header{
    display: grid;
    grid-template-columns: 180px 1fr 160px 60px;
    grid-template-areas: 
    "area1 area2 area3 area4";
    column-gap: 10px;
	padding: 0 10px 4px;
    height: 78px;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(238, 249, 255, 0.9);
    z-index: 2;
}
/*エントリーボタン*/
#entry{
    background-color: var(--cl-b_3);
    border-radius: 0 0 10px 10px;
    box-shadow: 2px 3px 3px var(--cl-p_3);
    margin: 0 0 20px;
    padding: 6px 0 8px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: var(--cl-b_7);
}
.entry2{
    display: none;
}
@media screen and (max-width:580px){
    /*エントリーボタン*/
    #entry{
        display: none;
    }
}
/*=== メイン ===*/
main{
    margin-top: 78px;
    padding: 0 2vw 4vw;
}
main#index,main#recruit{
    padding: 0;
}
/*=== フッター ===*/
footer{
    margin: 0 auto;
    padding: 4vw 1vw 1vw;
    border-top: solid 1px var(--cl-b_3);
}

.top-page footer{
    border: none;
    padding-top: 0;
}
footer .copy{
    text-align: center;
    margin: 20px 0 4px;
}

section{
    margin: 2vw 0;
    padding: 1.6rem;
}
#index > section
,.boundary + section{
    margin: 0;
}
.slide_container + section{
    padding-top: 40px;
}
#recruit > section{
    margin: 0;
}
section section{
    margin: 6rem 0 0;
}
section > section{
    margin-top: 4rem;
}
section:has(+ a.anchor){
    margin-bottom: 60px;
}
.anchor + section{
    margin-top: 0;
}
.inner{
    max-width: 1080px;
    margin: 0 auto;
    padding: 2vw;
}
.in-bl{
    display: inline-block;
}
.dashed{
    border: 2px dashed var(--cl-b_3);
    border-radius: 6px;
    margin-top: 10px;
    padding: 0.5em;
}
.bgc-p_1 .dashed{
    border-color: var(--cl-p_3);
}
.dashed:has(ul){
    padding: 0 0.5rem 0 0;
}
.dashed li{
    line-height: 1.2em;
    margin-bottom: 0.5em;
}
.dashed li:last-child{
    margin-bottom: 0;
}

.rounded-padding_l{
    padding: 3vw;
    border-radius: 30px;
}


/*|||| グリッドレイアウト ||||*/

/*=== レスポンシブ ===*/


/*=== 3カラムレイアウト ===*/
/*grid-column3_row1 3列1行 写真を横並び*/
.grid-column3_row1{
    margin-bottom: 3rem;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-areas: 
    "area1 area2 area3";
    gap: 10px;
}
@media screen and (max-width:580px) { /*1行目１列　2行目2列*/
    .grid-column3_row1{
        grid-template-columns: repeat(2,1fr);
        grid-template-areas: 
        "area1 area1"
        "area2 area3";
        gap: 10px;
    }
}

/*=== 2カラムレイアウト ===*/
.grid-column2{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-areas:
    "area1 area2";
    gap: 20px;
    margin: 0 20px 20px;
}
.grid-column2.column1-4{
    grid-template-columns: 1fr 4fr;
}

/*1日仕事体験 求人票*/
.grid-table,#trial + section .grid-column2{
    display: grid;
    grid-template-columns: max-content 1fr;
    margin-top: 2vw;
    gap: 0;
}
@media screen and (max-width:580px) {
    .grid-table,#trial + section .grid-column2{
        grid-template-columns: 1fr;
        grid-template-areas: 
        "area1"
        "area2";
    }
    dd dl{
        display: flex;
    }
    dd dt{
        background-color: transparent;
    }
}
h2 + dl.grid-table{
    margin-top: 2rem;
}

/* サイド－本文　*/
.page_layout{
    display: grid;
    grid-template-columns: 290px minmax(auto,980px);
    grid-template-rows: repeat(2,max-content);
    column-gap: 24px;
    grid-template-areas:
    "area1 area2"
    "area3 area3";
    column-gap: 2vw;
    max-width: 1280px;
    margin: 0 auto;
}
@media screen and (max-width:980px) {
    .page_layout{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3,max-content);
        row-gap: 30px;
        grid-template-areas:
        "area1"
        "area2"
        "area3";
    }
    footer.page_layout{
        grid-template-columns: 290px minmax(auto,980px);
        grid-template-rows: repeat(2,auto);
        grid-template-areas: 
        "area1 area2"
        "area3 area3";
    }
}
@media screen and (max-width:768px) {
    footer.page_layout{
        grid-template-columns: 1fr;
        grid-template-areas: 
        "area2"
        "area1"
        "area3";
    }
}
@media screen and (max-width:580px) {
    .page_layout{
        grid-template-areas:
        "area1"
        "area2"
        "area3";
    }
}

/*inview ランディングページで使用*/
h1 + .grid-inview-a,h1 + .grid-inview-b,
.lead_text + .grid-inview-a,.lead_text + .grid-inview-b{
    margin-top: 40px;
}
.card .lead_text{
    margin: 0 1rem;
}



/*=== 1カラムレイアウト ===*/
.grid-column1{
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
}
.sticky{
    position:sticky;
    top: 90px;
}

/*ページ内メニュー*/
.box-page_menu{
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 6px 0;
    border-top: solid 6px var(--cl-b_3);
    border-bottom: solid 6px var(--cl-b_3);
    border-radius: 7px;
    position:sticky;
    top: 90px;
    background-color: rgba(208, 239, 255, 0.9);
}
.box-page_menu li{
    background-color: white;
    border: 1px solid var(--cl-b_3);
    border-radius: 4px;
    width: 98%;
    margin: 0 auto;
}
.box-page_menu li a{
    display: block;
    padding: 8px 10px;
    font-weight: bold;
    font-size: 16px;
}
@media screen and (max-width:980px) {
    .box-page_menu{
        grid-template-columns: 1fr 1fr;
    }
    #letter .box-page_menu{
        grid-template-columns: 1fr;
    }
    #letter .box-page_menu li{
        width: 100%;
    }
}
@media screen and (max-width:580px) {
    .box-page_menu{
        grid-template-columns: 1fr;
    }
}
#letter .box-page_menu li a{
    padding: 0px 20px;
}

/*grid-column1_row3 1列3行 カード*/
.grid-column1_row3
,address{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3,max-content);
    gap: 16px;
    grid-template-areas: 
    "area1"
    "area2"
    "area3";
}
.grid-column1_row3 .title{
    margin-bottom: 0;
    font-size: 2.4rem;
    text-align: center;
    font-weight: bold;
    border-bottom: solid 3px var(--cl-b_3);
}

@media screen and (max-width:980px) {
    address{
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: auto;
        grid-template-areas: 
        "area1 area1"
        "area2 area3";
        column-gap: 40px;
    }
    address .area1{
        justify-self: center;
    }
    address .area2{
        justify-self: end;
    }
    address .area3{
        justify-self: start;
    }
}
@media screen and (max-width:768px) {
    address{
        grid-template-columns: 1fr;
        grid-template-areas: 
        "area1"
        "area2"
        "area3";  
    }
    address .area2,address .area3{
        justify-self: center;
    }
}

.box-data,.card{
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    border-radius: 20px;
    padding: 1em 2vw;
}
.box-data{
    border: solid 2px var(--cl-b_3);
}

/*グリッドの位置　共用*/
.area1{grid-area: area1;}
.area2{grid-area: area2;}
.area3{grid-area: area3;}
.area4{grid-area: area4;}
.area5{grid-area: area5;}
.area6{grid-area: area6;}
.main{grid-area: main;}
.side{grid-area: side;}

.page_layout > .area2{
    container-type: inline-size;
}
.timetable{
    position: relative;
}
.timetable > li{
    display: grid;
    grid-template-columns: 110px 1fr 1fr;
    grid-template-rows: 26px 1fr;
    grid-template-areas: 
    "area1 area2 area4"
    "area1 area3 area4";
    gap: 20px;
    margin: 2vw;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 2rem 2rem 2rem 0;
    border-radius: 15px;
}
@container (max-width: 768px) {
    .timetable > li{
        grid-template-columns: 110px 1fr;
        grid-template-rows: 26px auto auto;
        grid-template-areas: 
        "area1 area2"
        "area1 area3"
        "area1 area4";
    }
}
@container (max-width: 580px) {
    .time.area1{
        position: absolute;
        top: -16px;
        width: 80px;
        height: 70px;
        border-radius: 50%;
        font-size: 1.8rem;
    }
    .timetable > li{
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        grid-template-areas: 
        "area2"
        "area3"
        "area4";
        row-gap: 12px;
        padding: 2rem;
    }
    .timetable > li .area2{
        margin-left: 90px;
    }
}



/*|||| フレックスレイアウト ||||*/
.data,.data-flex{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-evenly;
    margin-top: 1em;
}
.data dl,.data dt,.data dd
,.data-flex dl,.data-flex dt,.data-flex dd{
    border: none;
    background-color: transparent;
    padding: 0;
}

.data dl,.data-flex dl{
    width: calc((100% - 20px) / 3);
}
.data dt{
    text-align: center;
    line-height: 1.1em;
    background-color: transparent;
}

.flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}
.flex.between{
    justify-content: space-between;
}
.flex.right{
    justify-content: right;
}
.flex.pic{
    gap: 10px;
}

.item2{
    width: calc((100% - 10px)/2);
}
.item3{
    width: calc((100% - 20px)/3);
}

/*|||||||| リストの設定   	||||||||*/
td,li{
	line-height: 1.8em;
}
ul{
    list-style: none;
    font-size: 1.6rem;
    margin: 1rem 0;
}
ul.disc{
    list-style: disc;
    margin-left: 2em;
}
ul.circle{
    list-style: circle;
    margin-left: 2em;
}
.rounded > ul{
    margin-bottom: 0;

}
.rounded > li{
    border-radius: 24px;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 3px 3px 4px var(--cl-b_3);
    padding: 2rem;
    margin-right: 4px;
}
.rounded li ul{
    margin-top: 1em;
}
.rounded li li{
    padding: 0;
}
li ul.rounded > li{
    padding: 1em;
    background-color: var(--cl-b_1);
    box-shadow: none;
}
.box ul{
    margin-top: 0;
    margin-bottom: 0;
}
.grid-column2 li{
    background-color: var(--cl-0_7);
    border-radius: 10px;
}

.nav.grid-column2{
    gap: 6px;
}
.nav.grid-column2 li{
    box-shadow: 2px 2px 2px var(--cl-b_3);
}

li a.part::before{
    content: "パ";
    color: white;
    font-weight: bold;
    background-color: var(--cl-p_3);
    border-radius: 2px;
    padding: 1px 4px;
    margin-right: 6px;
}
dl{
    background-color: var(--cl-0_7);
    border-radius: 12px;
    border: solid 1px var(--cl-b_3);
}
dt{
    padding: 0.8em 2em;
    letter-spacing: 0.2em;
    text-align: center;
    font-weight: bold;
    border-right: solid 1px var(--cl-b_3);
    border-bottom: solid 1px var(--cl-b_3);
    background-color: rgb(189, 232, 255);
}
dd{
    padding: 0.8em 1em;
    border-bottom: solid 1px var(--cl-b_3);
}
dt:last-of-type,dd:last-of-type{
    border-bottom: none;
}
dd dl.grid-table,dd dl,dd dt,dd dd{
    border: none;
    margin: 0;
    padding: 0;
    line-height: 1.8em;
}
dd dt{
    font-weight: normal;
    text-align: left;
    background-color: transparent;
    margin-right: 1rem;

}
dl.wide dt{
    padding: 0.8em 2em;
}
@media screen and (max-width:768px) {
    dd dd{
        padding-left: 1em;

    }
}

@media screen and (max-width:580px) {
    dl{
        margin: auto 2vw 0;
    }
    dt{
        border-right: none;
    }
    dt:first-of-type{
        border-radius: 12px 12px 0 0;
    }
    dt:last-of-type{
        border-bottom: solid 1px var(--cl-b_3);
    }
    dd dt:last-of-type{
        border: none;
    }
}
th{
    vertical-align: top;
}


/*|||||||| 画像・写真の設定 ||||||||*/
img{
    width: 100%;
    vertical-align:top;/*写真の下の隙間を無くす*/
}
.pic_list_h img {
    height: 40vh;
    object-fit: cover;
}
/*写真サイズ*/
.aspect16_9{
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
}
.aspect16_9_contain{
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: contain;
}
.aspect3_2{
	width: 100%;
	aspect-ratio: 3/2;
	object-fit: cover;
}
.bnr{
    height: 80px;
    width: auto;
}

img.rounded{
    border-radius: 30px;
    padding: 1rem;
}

/*写真の配置*/
figure.right{
    float: right;
    width: 40%;
}
figure.letter_pic-right{
	width: 40%;
	float: right;
	margin: 0 0 10px 1em;
}
figure.letter_pic-right.w35{
	width: 35%;
}
figure.letter_pic-right.w25{
	width: 25%;
}
figcaption{
    text-align: center;
}
.center{
    margin: 0 auto;
    text-align: center;
}

/*写真を横並び*/
.pic_list,.pic_list-2,.pic_list-3,.pic_list-4{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 10px;
	width: 100%;
}
.pic_list figure{
	height: 80%;
}
.pic_list-2 li{
	width: calc((100% - 10px)/2);
}
.pic_list-3 li{
	width: calc((100% - 20px)/3);
}
.pic_list-4 li{
	width: calc((100% - 30px)/4);
}
@media screen and (max-width:768px){
	.pic_list-4 li.parts-2{
		width: calc((100% - 10px)/2);
	}
}
@media screen and (max-width:580px){
    figure.right{
        float: none;
        width: 100%;
    }
    figure.right figcaption{
        margin-top: -36px;
        text-align: right;
        margin-right: 40px;
    }
	.pic_list-3,.pic_list-4{
		flex-wrap: wrap;
		gap: 10px;
	}
	.pic_list-3 li.parts-1{
		width: 100%;
	}
	.pic_list-3 li.parts-2
	,.pic_list-4 li.parts-2{
		width: calc((100% - 10px)/2);
	}
}
.pic_container1-2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 10px;
    grid-template-areas:
    "area1 area2"
    "area1 area3";
}
.pic_container1-2 img.area2{
    object-fit: cover;
}

/*画像の背景を斜めに*/
.box-img{
    position: relative;
    margin: 10px auto;
    width: 90%;
    height: fit-content;
    align-self: center;
}
.box-img::after{
    content: "";
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color:var(--cl-b_3);
    transform: rotate(-5deg);
    border-radius: 6px;
    z-index: 0;
}
.bgc-p_1 .box-img::after{
    background-color:var(--cl-p_3);
}
.bgc-g_1 .box-img::after{
    background-color:var(--cl-g_3);
}
.box-img img{
    position: relative;
    border-radius: 10px;
    z-index: 1;
}
@media screen and (max-width:768px){
    .box-img:has(ul.grid_container-2_2){
        width: 60%;
    }
}
@media screen and (max-width:580px){
    .box-img:has(ul.grid_container-2_2){
        width: 80%;
    }
}
.icon-sns{
    gap: 2rem;
}

.icon-sns img,img.icon-sns{
	height: 40px;
	width: auto;
}

.thumbnail{
    position: relative; 
    background-color: var(--cl-0);
    border-radius: 10px;
    border: solid 1px rgba(0, 0, 0, 0.1);;
    z-index: 1;
}
.group{
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 100%;
    text-align: center;
}

/*=== 法人ロゴ ===*/
/*ロゴ*/
.box-logo,.box-logo_recruit{
    display: grid;
    grid-template-columns: 52px 116px;
    grid-template-rows: repeat(2,max-content);
    grid-template-areas:
    "area1 area2"
    "area1 area3";
    column-gap: 10px;
    margin: 6px 0;
    align-self: center;
}
img.logo{
    grid-area: area1;
}
.upper{
    grid-area: area2;
    color: var(--cl-b_5);
    font-size: 12px;
    letter-spacing: 0.15em;
    padding-left: 3px;
}
.lower{
    grid-area: area3;
    color: var(--cl-p_7);
    font-size: 18px;
    font-weight: bold;
    position: relative;
    top: -1px;
}
/*ロゴ 採用サイト*/
.box-logo_recruit{
    grid-template-rows: 16px 23px 21px;
    grid-template-areas:
    "area1 area2"
    "area1 area3"
    "area4 area4";
}
.logo2{
    grid-area: area4;
    color: var(--cl-g_5);
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.12em;
    text-align: center;
    position: relative;
    top: -2px;
}
/*size-l*/
.box-logo.size-l,.box-logo_recruit.size-l{
    grid-template-columns: 68px 150px;
    grid-template-rows: 20px 28px;
}
.upper.size-l{
    font-size: 18px;
    letter-spacing: 0.15em;
    padding-left: 3px;
}
.lower.size-l{
    font-size: 24px;
}

/*=== 終 法人ロゴ ===*/

/*|||||||| ボタンの設定 ||||||||*/
.box-btn{
    padding-bottom: 20px;
}
/*== ボタン共通設定 */
.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	overflow: hidden;
	/*ボタンの形状*/
	display: grid;
    place-content: center;
    outline: none;
	background-color: var(--cl-b_3);
    border-radius: 30px;
	max-width: 280px;
	min-width: 180px;
    min-height: 46px;
    justify-self: center;
    margin: 10px 10px 0;
    /*アニメーションの指定*/   
    transition: ease .2s;
}

.bgc-p_1 .btn{
    background-color: var(--cl-p_3);
}
.bgc-g_1 .btn{
    background-color: var(--cl-g_3);
}
.btn.pink{
    background-color: var(--cl-p_3);
}

/*ボタン内spanの形状*/
.btn span {
	position: relative;
    color: var(--cl-bl_7);
	font-weight: bold;
    font-size: 1.6rem;
    margin-right: 40px;
    margin-left: 20px;
}
.btn:hover span{
	color:var(--cl-bl_5);
    font-size: large;
}
.btn a{
    display: block;
    width: 100%;
}
/*== 背景が流れる（斜め） */
.bgskew::before {
	content: '';
    /*絶対配置で位置を指定*/
	position: absolute;
	top: 0;
	left: -130%;
    /*色や形状*/
	background:var(--cl-b_5);
	width:120%;
	height: 100%;
	transform: skewX(-25deg);
}
.bgc-p_1 .bgskew::before{
	background:var(--cl-p_5);
}
.bgc-g_1 .bgskew::before{
	background:var(--cl-g_5);
}
.pink.bgskew::before{
	background:var(--cl-p_5);
}

/*hoverした時のアニメーション*/
.bgskew:hover::before ,.sitemap a:hover{
	animation: skewanime .5s forwards;/*アニメーションの名前と速度を定義*/
}
@keyframes skewanime {
	100% {
		left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
	}
}

.btn.square{
    background-color: var(--cl-0);
    border: solid 1px var(--cl-b_3);
	border-radius: 8px;
	height: 3em;
    width: calc((100% - 8rem)/3);
}
.btn.square a{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.btn.square a span,.btn.square a div{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	text-align: center;
	letter-spacing: 0.1em;
    margin: 0;
    padding-right: 24px;

}
.btn.square a div{
	line-height: 1.2em;
}
.btn.square.new::before{
	content: "NEW";
	position: absolute;
	top: -1px;
	left: -1px;
	bottom: -1px;
	border-radius: 8px 0 0 8px;
	padding: 5px 6px;
	font-size: 12px;
	line-height: 1em;
	letter-spacing: 1px;
	writing-mode:vertical-rl;
	text-orientation:upright;
	background-color: var(--cl-r_7);
	color: var(--cl-0);
}
.btn.square.pdf::after{
	content: "PDF";
	position: absolute;
	top: 0;
	right: -1px;
	border-radius: 0 8px 8px 0;
	height: 100%;
	padding: 5px 6px;
	font-size: 12px;
	line-height: 1em;
	letter-spacing: 1px;
	writing-mode:vertical-rl;
	text-orientation:upright;
	background-color: var(--cl-b_3);
	color: var(--cl-0);
}

p + a.btn{
    margin: 32px auto;
}
.card-row4 .btn,.card-row3 .btn{
    margin: 0 auto 10px;
}


/*ボタン内の矢*/
.arrow{
    position: relative;
    padding: 10px;
}
.arrow::after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 20px;
	width: 10px;
	height: 10px;
    border-top: solid 2px var(--cl-bl_7);
    border-right: solid 2px var(--cl-bl_7);
    transform: rotate(45deg);
}
.arrow:hover:after{
    border-top: solid 2px var(--cl-bl_7);
    border-right: solid 2px var(--cl-bl_7);
}
.bgc-p_3 .arrow:hover:after{
    border-top: solid 2px var(--cl-p_7);
    border-right: solid 2px var(--cl-p_7);
}

.box-page_menu .arrow:hover:after{
    border-top: solid 2px var(--cl-b_7);
    border-right: solid 2px var(--cl-b_7);
}
.bgc-p_3 .btn{
    background-color: var(--cl-p_5);
    padding-right: 2em;
}

/*下向き▼*/
.arrow-bottom > li,.timetable > li{
    position: relative;
    margin: 50px 2vw;
}
.arrow-bottom > li::after,.timetable > li::after{
    content: "";
    position: absolute;
    left: 50%;
    translate: -50%;
    bottom: -52px;
    border: 16px solid transparent;
    border-top: 16px solid var(--cl-b_3);
}
.arrow-bottom > li:last-child::after,.timetable > li:last-child::after{
    content: none;
    margin-bottom: 0px;
}
.arrow-bottom > li:last-child,.timetable > li:last-child{
    margin-bottom: 0px;
}


/* == 楕円形のボタン map,問い合わせ ==*/
.btn-ellipse{
	background-color: var(--cl-b_3);
	border-radius: 20px;
    min-width: 80px;
    max-width: fit-content;
    text-align: center;
    padding: 0 0 2px;
    margin: 8px auto 0;
}
.btn-ellipse:hover{
    background-color: var(--cl-b_5);
}
.btn-ellipse a:hover{
    color: white;
    font-weight: bold;
}

.btn-ellipse a{
    display: block;
    width: 100%;
    height: 100%;
    padding: 3px 14px;
    font-size: 12px;
}
dl .btn-ellipse{
    margin-left: 1rem;
}


/*-------contact.htmlの設定-----------*/
#formWrap {
	margin:0 auto;
}
input,textarea{
	border: solid 1px var(--cl-b_3);
	padding: 3px 5px;
    width: 100%;
}
input[type="checkbox"],input[type="radio"]{
    width: fit-content;
}
.required{
	border: solid 1px var(--cl-p_7);
	border-radius: 3px;
	color: var(--cl-p_7);
	margin-left: 0.5em;
	padding: 0 3px;
	font-size: small;
    font-weight: bold;
	text-align: center;
	display: inline-block;
}
.box-input_btn{
	display: flex;
	flex-flow: row wrap;
	gap: 15px;
	justify-content: center;
	margin-top: 2em;
}
input.btn{
	letter-spacing: 0.5em;
	height: 2em;
	padding: 0;
}

/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:768px) {
	#formWrap {
		width:95%;
		margin:0 auto;
	}
	form input[type="text"], form textarea {
		width:100%;
		padding:5px;
		font-size:110%;
		display:block;
	}
	form input[type="submit"], form input[type="reset"], form input[type="button"] {
		display:block;
		margin: 0;
		width: 40%;
		font-size: 20px;
	}
    .grid-table{
        grid-template-columns: 1fr;
        grid-template-areas: 
        "area1"
        "area2";
    }
}