@charset "UTF-8";

/*
==================================================

   会社説明会

==================================================
*/



/*
==================================================
  ボディヘッダー
==================================================
*/

#bodyheader {
background: var(--accent1-col) url(../../image/header/briefing.jpg) no-repeat center / cover;
}

/* 英語表記 */
#bodyheader p.en {
color: rgba(255, 255, 255, 0.6);
}



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {


}
/* ----- /899 ----- */



/*
==================================================
  コンテンツ
==================================================
*/

#contents section {

}

/* ----- イントロ ----- */
#intro {
position: relative;
margin: 0 0 60px;
padding: 100px 0 40px;
background: url(../../recruit/briefing/image/intro.jpg) no-repeat calc(53vw + 40px) center / 50vw;
}
#intro::after {
content: '';
position: absolute;
bottom: -30px;
right: 0;
border-width: 0 0 240px 150px;
border-style: solid;
border-color: transparent transparent var(--accent1-col) transparent;
opacity: 0.8;
}

#intro div.wrap {
width: 53%;
}

/* ----- 説明会内容 ----- */
#detail {
padding: 100px 0 80px;
background: var(--light-bgcol);
}

#contents #detail ul.photo-list-border-text {
margin: 80px 0 0;
}
#detail ul.photo-list-border-text li {
position: relative;
background: #ffffff;
border: 1px var(--accent2-col) solid;
}
#contents #detail ul.photo-list-border-text dl dt {
min-height: 3rem;
background: var(--accent2-col);
color: #ffffff;
}
#detail ul.photo-list-border-text dl dt span.en {
position: absolute;
top: -2.4rem;
font-size: 4rem;
color: var(--accent2-col);
-webkit-text-stroke: 6px #ffffff;
text-stroke: 6px #ffffff;
paint-order: stroke;
z-index: 1;
}

/* ----- 説明会のポイント ----- */
#point {
padding: 100px 0 80px;
}

#point div.wrap {
display: flex;
flex-wrap: wrap;
gap: 50px 50px;
margin: 40px 0 0;
}
#point div.wrap section {
width: calc(50% - 25px);
}

#point section h3 {
display: flex;
align-items: center;
min-height: 6rem;
}
#point section h3 span.en {
margin: 0 15px 0 0;
font-size: 4rem;
color: var(--accent2-col);
white-space: nowrap;
}
#point section h3 span.text {
font-size: 1.5rem;
font-weight: 900;
line-height: 1.3;
}

#point section div.img {
margin: 0 0 20px;
}
#point section p {
margin: 0;
}

/* ----- よくある質問 ----- */
#faq {
padding: 100px 0 80px;
background: var(--light-bgcol);
}

#faq ul.faq {
margin: 60px 0 0;
}

/* ----- 開催日程 ----- */
#schedule {
padding: 100px 0 80px;
}

/* 開催概要 */
#schedule div.wrap {
display: flex;
flex-direction: row-reverse;
column-gap: 30px;
margin: 50px 0 60px;
}
#schedule div.place {
width: calc(50% - 15px);
}
#schedule div.place table {
margin: 0 0 20px;
}
#schedule div.place table th {
background: var(--accent1-col);
color: #ffffff;
vertical-align: middle;
}
#schedule div.place table a.tel {
font-size: 1.4rem;
font-weight: bold;
color: currentColor;
text-decoration: none;
pointer-events: none;
cursor: text;
}
#schedule div.map {
width: calc(50% - 15px);
}
#schedule div.map div.map-inc {
height: 300px;
}
#schedule div.map div.map-inc iframe {
width: 100%;
height: 100%;
}
#schedule div.map p {
margin: 10px 0 0;
text-align: center;
}

/* 日程の一覧 */
#schedule div.list table {
margin: 0 0 10px;
}
#schedule div.list table td {
padding: 15px 10px;
vertical-align: middle;
}
#schedule div.list table td.disp {
word-break: normal;
}
#schedule div.list table td:last-child {
width: 18em;
}

/* 申し込みボタン */
#schedule div.list table div.btn {
width: 12rem;
margin: 0 auto;
background: var(--accent2-col);
}
#schedule div.list table div.btn a {
padding: 15px 5px;
border: 1px var(--accent2-col) solid;
font-size: 1rem;
font-weight: bold;
color: #ffffff;
text-align: center;
transition: 0.2s;
}
#schedule div.list table div.btn a:hover {
background: #ffffff;
color: var(--accent2-col);
}
#schedule div.list table div.btn a.disabled {
background: #999999;
border: 1px #999999 solid;
color: #ffffff;
}
#schedule div.list table div.btn a.arrow-ku-u::before {
right: 20px;
}
#schedule div.list table div.btn a.disabled.arrow-ku-u::before {
border: none;
}

#schedule ul.note {
margin: 30px 0 0 1.2em;
list-style-type: disc;
}
#schedule ul.note li {
margin: 0 0 15px;
line-height: 1.6;
}
#schedule ul.note li:last-child {
margin: 0;
}

/* ----- 申し込みフォーム ----- */
#form {
padding: 100px 0 80px;
background: var(--light-bgcol);
}

#form form {
margin: 50px 0 0;
}



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

/* ----- イントロ ----- */
#intro {
margin: 0 0 50px;
padding: 50px 0 350px;
background: url(../../recruit/briefing/image/intro.jpg) no-repeat center bottom / 320px;
}
#intro::after {
border-style: none;
}

#intro div.wrap {
width: auto;
}

/* ----- 説明会内容 ----- */
#detail {
padding: 50px 0;
}

#contents #detail ul.photo-list-border-text {
margin: 60px auto 0;
}
#detail ul.photo-list-border-text dl dt span.en {
top: -1.5rem;
font-size: 3rem;
-webkit-text-stroke: 4px #ffffff;
text-stroke: 4px #ffffff;
}

/* ----- 説明会のポイント ----- */
#point {
padding: 50px 0;
}

#point div.wrap {
display: block;
margin: 40px 0 0;
}
#point div.wrap section {
width: auto;
max-width: 500px;
margin: 0 auto 50px;
}
#point div.wrap section:last-child {
margin: 0 auto;
}

#point section h3 {
min-height: 0;
margin: 0 0 15px;
}
#point section h3 span.en {
margin: 0 10px 0 0;
font-size: 2.4rem;
}
#point section h3 span.text {
font-size: 1.1rem;
line-height: 1.4;
}

#point section div.img {
margin: 0 0 15px;
}

/* ----- よくある質問 ----- */
#faq {
padding: 50px 0;
}

#faq ul.faq {
margin: 40px 0 0;
}

/* ----- 開催日程 ----- */
#schedule {
padding: 50px 0;
}

/* 開催概要 */
#schedule div.wrap {
display: block;
margin: 40px 0 50px;
}
#schedule div.place {
width: auto;
margin: 0 0 30px;
}
#schedule div.place table a.tel {
color: var(--link-col);
text-decoration: underline;
pointer-events: auto;
cursor: pointer;
}
#schedule div.map {
width: auto;
}
#schedule div.map div.map-inc {
max-width: 500px;
margin: auto;
}

/* 日程の一覧 */
#schedule div.list table td {
padding: 15px 10px;
}
#schedule div.list table td:last-child {
width: 11em;
}

/* 申し込みボタン */
#schedule div.list table div.btn {
width: 8.5rem;
}
#schedule div.list table div.btn a {
padding: 13px 5px;
}
#schedule div.list table div.btn a:hover {
background: var(--accent2-col);
color: #ffffff;
}
#schedule div.list table div.btn a.disabled {
background: #999999;
}
#schedule div.list table div.btn a.arrow-ku-u::before {
right: 15px;
}

#schedule ul.note {
margin: 20px 0 0 1.2em;
}

/* ----- 申し込みフォーム ----- */
#form {
padding: 50px 0;
}

#form form {
margin: 40px 0 0;
}

}
/* ----- /899 ----- */