@charset "utf-8";
/* CSS Document */
/*
Theme Name: 旭川市 求人企業説明会 2025秋
Theme URI: 
Description: 
Version: 1.0
Author: SUDA WEB TEAM and WEB PROJECT
Author URI: http://www.suda.co.jp
Tags:
*/

/*commonにない共通もの*/

body { background: #fff; font-family: "Noto Serif JP", serif; font-weight: 900; }

.borderRadiusA30 { border-radius: 30px; }
.borderRadiusA20 { border-radius: 20px; }

.fs13 { font-size: 1.3rem!important; }
.fs14 { font-size: 1.4rem!important; }
.fs16 { font-size: 1.6rem!important; }
.fs18 { font-size: 1.8rem!important; }
.fs20 { font-size: 2.0rem!important; }
.fs24 { font-size: 2.4rem!important; }
.fs30 { font-size: 3.0rem!important; }
.fs36 { font-size: 3.6rem!important; }
.fs40 { font-size: 4.0rem!important; }
.fs42 { font-size: 4.2rem!important; }
.fs50 { font-size: 5.0rem!important; }
.fs60 { font-size: 6.0rem!important; }
.fs80 { font-size: 8.0rem!important; }

@media only screen and (max-width: 766px) {
    .fs16 { font-size: 1.4rem!important; }
    .fs24 { font-size: 1.8rem!important; }
    .fs30 { font-size: 2.0rem!important; }
    .fs36 { font-size: 2.4rem!important; }
    .fs40 { font-size: 2.6rem!important; }
    .fs50 { font-size: 2.6rem!important; }
    .fs80 { font-size: 3.0rem!important; }
}


.fcGreen { color: #319a4b; }
.fcBlack { color: #231815; }
.fcGray { color: #cccccc; }
.fcwhite { color: #ffffff; }
.fcBlue { color: #0081CC; }
.fcRed { color: #910000; }
.fcRed2 { color: #E60012; }

.tShadow { text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8); }

.fw900 { font-weight: 900;}

.bgGreen { background: #319a4b; }
.bgBlack { background: #231815; }
.bgGray { background: #cccccc; }
.bgwhite { background: #ffffff; }
.bgBlue { background: #005BAC; }
.bgRed { background: #910000; }
.bgRed2 { background: #E60012; }


.w100per { width: 100%; }
.w90per { width: 90%; }

.h100per { height: 100%; }

.posR { position: relative; }

.btn { display: block; text-align: center; padding: 1.6rem 0; margin: 1.5rem auto; cursor: pointer; width: 80%; max-width: 500px; border-radius: 30px; position: relative; }
.btn:hover { opacity: 0.5;}
.btn::after { content: ''; position: absolute; right: 3rem; top: 40%; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
@media only screen and (max-width: 766px) {
    .btn { width: 100%; max-width: 100%; }

}

/*** PARTS ***/
header { width: 100%; height: auto; }

.headerFirst { width: 100%; height: auto; background: url(../images/yellowBg.jpg) no-repeat; background-size: cover; padding: 2rem; }
.headerFirst p { color: #231815; font-size: 1.6rem; font-weight: 800; }
.headerFirst p span { border: solid 4px #C59600; padding: 0.7rem 0.7rem 0.7rem 1.4rem; letter-spacing: 1rem; background: #fff; margin: 1rem; text-align: center; }
@media only screen and (max-width: 766px) {
    .headerFirst { padding: 2rem 0; }
    .headerFirst p { font-size: 1.3rem; }
}

.headerSecond { width: 100%; background: url(../images/mainVisual.jpg) no-repeat; background-size: cover; padding: 4rem 0 0; position: relative; }
.headerSecond h1 { width: 80%; height: auto; margin: 0 auto 3rem; }
.headerSecond h1 img { width: 100%; height: auto; }
.headerSecond .photo01 { width: 25%; height: auto; transform: rotate(-5deg); border: solid 7px #fff;  box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4); position: absolute; bottom: 0; left: 5%; z-index: 3; }
.headerSecond h2 { width: 18%; height: auto; position: absolute; bottom: 2%; right: 5%; z-index: 4; }
.headerSecond h2 img { width: 100%; height: auto; }
.headerSecond h3 { width: 100%; height: 60px; background: #231815; position: relative; }
.headerSecond h3 img { width: 30%; height: auto; position: absolute; bottom: 5%; left: 35%; }
@media only screen and (max-width: 766px) {
    .headerSecond .photo01 { width: 30%; left: 2%; }
    .headerSecond h2 { width: 30%; bottom: 2%; right: 2%; }
}

.headerThird { background: url(../images/blueBg.jpg) repeat-y; background-size: contain; padding: 4rem 0; }
.headerThirdInner { width: 86%; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; }
.headerThirdInner .column { width: 50%; padding: 0 2rem; color: #fff; }
.headerThirdInner .column h3 { display: inline-block; font-size: 2.0rem; color: #231815; background: #fff; padding: 0.7rem 1.4rem; margin-bottom: 1rem; border:solid 1px #A7CBDF; }
.headerThirdInner .column:nth-of-type(1) { border-right: solid 1px #fff; }
.headerThirdInner .column:nth-of-type(1) p:nth-of-type(1) span:nth-of-type(1) { font-size: 3.0vw; margin-right: 1rem; }
.headerThirdInner .column:nth-of-type(1) p:nth-of-type(1) span:nth-of-type(2) { font-size: 5.8vw; }
.headerThirdInner .column:nth-of-type(1) p:nth-of-type(1) span:nth-of-type(3) { font-size: 3.0vw; background: #fff; border-radius: 50px; color:#0081CC; padding: 0.5rem 1.4rem; margin-left: 1rem; }
.headerThirdInner .column:nth-of-type(1) p:nth-of-type(2) { font-size: 1.6vw; margin-top: 1rem; }
.headerThirdInner .column:nth-of-type(1) p:nth-of-type(2) span:nth-of-type(1) { border: solid 1px #fff; margin-right: 1rem; padding: 0.5rem; } 
.headerThirdInner .column:nth-of-type(1) p:nth-of-type(2) span:nth-of-type(3) { border: solid 1px #fff; margin: 0 1rem; padding: 0.5rem; } 
.headerThirdInner .column:nth-of-type(2) { padding-left: 6rem; }
.headerThirdInner .column:nth-of-type(2) p:nth-of-type(1) { font-size: 3.5vw; }
.headerThirdInner .column:nth-of-type(2) p:nth-of-type(1) span { font-size: 2.0vw; }
.headerThirdInner .column:nth-of-type(2) p:nth-of-type(2) { font-size: 2.4vw; }
@media only screen and (max-width: 766px) {
    .headerThirdInner { width: 95%; display: block; }
    .headerThirdInner .column { width: 100%; padding: 2rem; display: flex; }
    .headerThirdInner .column h3 { margin: 0 2rem 0 0; width: 30%; text-align: center; }
    .headerThirdInner .column:nth-of-type(1) { border-right: none; }
    .headerThirdInner .column:nth-of-type(2) { padding-left: 2rem; }
}

main { width: 100%; margin: 0 auto; background: url(../images/whiteBg.jpg) repeat-y; background-size: contain; }

.figArea { width: 100%; margin: 0 auto; }
.figArea h3 { width: 100%; height: auto; background: url(../images/yellowBg.jpg) no-repeat; background-size: cover; padding: 2rem; font-size: 3.0rem; text-align: center; }
.figArea h3 span { border: solid 1px #C59600; padding: 0.5rem 1rem; background: #fff; margin-right:2rem; }
.figArea .flex { width: 86%; align-items: center; margin: 0 auto; padding: 0 0 4rem; }
.figArea .flex .column { width: 50%; padding: 2rem; }
.figArea .flex .column img { width: 100%; }
.figArea .flex .column:nth-of-type(1) img:nth-of-type(1) { width: 120%; max-width: 120%; margin-left: -15%; }
.figArea .flex .column h4 { display: inline-block; font-size: 2.0rem; color: #fff; background: #005BAC; padding: 0.7rem 1.4rem; margin-bottom: 1rem; border:solid 1px #A7CBDF; }
.figArea .flex .column p { font-size: 2.0rem; margin-bottom: 1rem; }
@media only screen and (max-width: 766px) {
    .figArea h3 { font-size: 1.8rem; text-align: center; }
    .figArea h3 span { display: inline-block; }
    .figArea .flex { width: 95%; display: block }
    .figArea .flex .column { width: 100%; padding: 2rem 0; }
    .figArea .flex .column:nth-of-type(1) img:nth-of-type(1) { width: 100%; margin: 0; }
}

.corpArea { width: 100%; margin: 0 auto; background: url(../images/blueBg.jpg) repeat-y; background-size: contain; padding: 4rem 0; text-align: center; }
.corpArea h3 { display: inline-block; font-size: 2rem; color: #231815; background: #fff; padding: 0.7rem 1.4rem; margin: 0 auto 1rem; border:solid 1px #A7CBDF; }
.corpAreaInner { width: 85%; margin: 4rem auto; display: flex; flex-wrap: wrap; }
.corpAreaInner article { width: calc( 94% / 3 ); margin: 1%; padding: 2rem; background: rgba(255,255,255,0.6); }
.corpAreaInner article h4 { color: #fff; background: #005BAC; font-size:1.5vw; padding: 1rem; height: 6vw; display: flex; align-items: center; justify-content: center; }
.corpAreaInner article dl { margin: 1rem auto; color: #231815; display: flex; justify-content: space-between; }
.corpAreaInner article dl dt { width: 30%; padding: 0.5rem; font-size: 1.4rem; line-height: 1.4; background: #333; color: #fff; display: flex; align-items: center; justify-content: center; }
.corpAreaInner article dl dd { width: 70%; padding: 0.5rem 1rem; font-size: 1.4rem; font-weight: 700; line-height: 1.4; display: flex; justify-content: flex-start; align-items: center; text-align: left; }
.corpAreaInner article h5 { color: #000; border-top: solid 1px #333; padding: 1rem;  }
.corpAreaInner article a { display: block; font-size: 1.4rem; width: 100%; padding: 0.5rem 1rem; margin: 0.5rem auto; background: #910000; color: #fff; border-radius: 10px; text-align: left; }
.corpAreaInner .margeLeft{ margin-right:0;padding-right:2%; width: calc( 97% / 3 ); }
.corpAreaInner .margeRight{ margin-left:0;padding-left:2%; width: calc( 97% / 3 );}
@media only screen and (max-width: 766px) {
    .corpAreaInner { width: 95%; }
    .corpAreaInner article { width: 100%; margin: 1%; }
    .corpAreaInner article h4 { font-size:1.8rem; height: 18vw; }
    .corpAreaInner article h4 a { font-size:1.8rem; color: #fff;  }
}

footer { background: #231815; border-top: solid 5px #910000; padding: 4rem 0; }
.footerInner { width: 85%; margin: 0 auto; color: #fff; display: flex; }
.footerInner h3 { color: #231815; background: #fff; padding: 2rem; margin-right: 2rem; border: solid 1px #ccc; display: flex; align-items: center; }
@media only screen and (max-width: 766px) {
    .footerInner { width: 95%; display: block; }
    .footerInner h3 { padding: 0.5rem 1rem; margin: 0 0 2rem 0; }
    .footerInner p { font-size: 1.4rem; font-weight: 500; }

}