@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:"Helvetica Neue",Arial, "Hiragino Kaku Gothic ProN","Hiragino Sans", Meiryo, sans-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; }

#sticky01 { position: fixed; right: 0; top: 90px; width: 50px; height: 230px; z-index: 2; }
#sticky01 a { display: block; width: 100%; height: 100%; background: #ff9900; color: #fff; font-size: 2.0rem; font-weight: 600; writing-mode: vertical-lr; display: flex; justify-content: center; align-items: center; border-radius: 1rem 0 0 1rem; text-shadow: 2px 3px 3px rgba(112, 47, 0, 0.47); box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4); }
#sticky01 a:hover { opacity: 1; background: rgb(253, 203, 129); color: #000; }
@media only screen and (max-width: 766px) {
    #sticky01 { top: 50%; width: 40px; height: 200px; z-index: 5; }
    #sticky01 a { font-size: 1.6rem; }

}
.headerFirst { width: 100%; height: auto; background: #231815; padding: 2rem; }
.headerFirst p { color: #fff; font-size: 1.8rem; font-weight: 800; }
.headerFirst p span { padding: 0.2rem 1rem; background: #fff; margin: 1rem; text-align: center; color: #231815; }
@media only screen and (max-width: 766px) {
    .headerFirst { padding:1rem 1rem 0.5rem; }
    .headerFirst p { font-size: 1.3rem; line-height: 2; }
    .headerFirst p span { margin: 1rem 1rem 0 0;  }
}

.headerSecond { width: 100%; background: url(../images/mainVisual.jpg) no-repeat; background-size: cover; padding: 4rem 0 18rem; position: relative; }
.headerSecond h1 { width: 70%; height: auto; margin: 0 auto; }
.headerSecond h1 img { width: 100%; height: auto; margin-top: 15%; }
.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: 23%; height: auto; position: absolute; bottom: 0; right: 5%; z-index: 4; }
.headerSecond h2 img { width: 100%; height: auto; }
.headerSecond h3 { width: 100%; height: 60px; position: relative; }
.headerSecond h3 img { width: 40%; height: auto; position: absolute; bottom: 5%; left: 30%; }
.headerSecond .sankafree { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
@media only screen and (max-width: 766px) {
    .headerSecond { background-size:contain; padding: 4rem 0 8rem; }
    .headerSecond h1 { width: 100%;}
    .headerSecond h1 img { margin-top: 8%; }
    .headerSecond .photo01 { width: 30%; left: 2%; }
    .headerSecond h2 { width: 30%; bottom: 50%; right: 2px; }
    .headerSecond .sankafree { width: 60%; } 
    .headerSecond img { width: 100%; }
}

.headerSecondDash { width: 100%; background: #005FB0; padding: 4rem 0; position: relative; }
.headerSecondDashInner { width: 86%; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; }
.headerSecondDashInner p { width: 100px; height: 120px; font-size: 1.8rem; font-weight: 600; color: #fff; display: flex; align-items: center; justify-content: center; border: solid 2px #fff; }
.headerSecondDashInner div { width: calc(100% - 130px); height: 120px; overflow-y: scroll; padding: 2rem; background: #fff; }
.headerSecondDashInner dl { display: flex; justify-content: flex-start; align-items: flex-start; width: 100%; margin: 0 auto 1rem; border-bottom: dotted 1px #ccc; }
.headerSecondDashInner dl dt { width: 100px; font-size: 1.4rem; font-weight: 500; color:#005BAC; }
.headerSecondDashInner dl dd { width: calc(100% - 100px); font-size: 1.5rem; font-weight: 400; line-height: 1.6; color:#231815; }
.headerSecondDashInner dl dd a { text-decoration: underline; color: #0087d4; }
@media only screen and (max-width: 766px) {
    .headerSecondDashInner { flex-wrap: wrap; }
    .headerSecondDashInner p { width: 100%; height: auto; }
    .headerSecondDashInner div { width: 100%; height: 200px; }
    .headerSecondDashInner dl { flex-wrap: wrap; }
    .headerSecondDashInner dl dt { width: 100%; }
    .headerSecondDashInner dl dd { width: 100%; }

}


.headerSecondDashDash { width: 100%; padding: 2rem 0; position: relative; }
.headerSecondDashDashInner { width: 86%; margin: 0 auto; display: block; }
.headerSecondDashDashInner a.btn { width: 80%; max-width: 770px; display: block; margin: 0 auto 1rem; background: #ff9900; border-radius: 5rem; color: #fff; text-shadow: 2px 3px 3px rgba(112, 47, 0, 0.47); box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4); text-align: center; font-size: 3.0rem; font-weight: 600; }
.headerSecondDashDashInner a.btn:hover { opacity: 1; background: rgb(253, 203, 129); color: #000; box-shadow: none; }
.headerSecondDashDashInner p { display: block; text-align: center; color: #333; }
@media only screen and (max-width: 766px) {
    .headerSecondDashDashInner a.btn { width: 90%; }

}

.headerThird { padding: 4rem 0; background: #ecf9ff; margin-bottom: 4rem; }
.headerThirdInner { width: 86%; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; }
.headerThirdInner .column { width: 50%; padding: 0 2rem; color: #231815; }
.headerThirdInner h3 { display: inline-block; font-size: 3rem; color: #fff; background: #000000; background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(130, 130, 130) 100%); padding: 0.7rem 1.4rem; margin-bottom: 1rem; 
border: 4px solid #333;}
.headerThirdInner .column:nth-of-type(1) { border-right: solid 1px #231815; }
.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: 4vw; }
.headerThirdInner .column:nth-of-type(1) p:nth-of-type(1) span:nth-of-type(3) { font-size: 2.0vw; background: #e60012; border-radius: 20px; color:#fff; padding: 0.5rem 1.4rem; margin-left: 1rem; }
.headerThirdInner .column:nth-of-type(1) p:nth-of-type(2) { font-size: 2.2vw; }
.headerThirdInner .column:nth-of-type(1) p:nth-of-type(2) span:nth-of-type(1) { border: solid 1px #231815; 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 #231815; margin: 0 1rem; padding: 0.5rem; } 
.headerThirdInner .kitaeelu { line-height: 1; margin: 2rem 0; }
.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.8vw; }
.headerThirdInner .column:nth-of-type(2) p:nth-of-type(2) { font-size: 2.4vw; border-top:1px solid #000; }
.headerThird .otherAdd { margin-top: 3rem; padding: 0 2rem; display: block; }
.headerThird .otherAdd p { font-size: 2.7rem; }
.headerThird .otherAdd span { font-size: 2rem; }

@media only screen and (max-width: 766px) {
    .headerThird { padding: 0; margin-bottom: 2rem; }
    .headerThirdInner { width: 100%; display: block; text-align: center; }
    .headerThirdInner .column { width: 100%; padding: 2rem;}
    .headerThirdInner h3 { width: 100%; text-align: center; font-size: 2rem; padding: 0rem; }
    .headerThirdInner .column:nth-of-type(1) { border-right: none; }
    .headerThirdInner .column:nth-of-type(2) { padding-left: 2rem; }
    .headerThirdInner .column:nth-of-type(1) p:nth-of-type(1) span:nth-of-type(1) { font-size: 6vw; margin-right: 1rem; }
    .headerThirdInner .column:nth-of-type(1) p:nth-of-type(1) span:nth-of-type(2) { font-size: 9vw; }
    .headerThirdInner .column:nth-of-type(1) p:nth-of-type(1) span:nth-of-type(3){ font-size: 4vw; }
    .headerThirdInner .column:nth-of-type(1) p:nth-of-type(2) { font-size: 5vw; margin-top: 1rem; line-height:1;}
    .headerThirdInner .column:nth-of-type(1) p:nth-of-type(2) span:nth-of-type(3)  { margin-left: 0;}
    .headerThirdInner .column:nth-of-type(2) p:nth-of-type(1) { font-size: 6vw; margin: 1rem; }
    .headerThirdInner .column:nth-of-type(2) p:nth-of-type(1) span { font-size: 5vw; }
    .headerThirdInner .column:nth-of-type(2) p:nth-of-type(2) { font-size: 5vw; }
    .headerThird img { width: 100%; }
    .headerThird .otherAdd { text-align: left; padding-bottom: 4rem; }
    .headerThird .otherAdd p { font-size: 2rem; }
}

main { width: 100%; margin: 0 auto; }

.figArea { width: 100%; margin: 0 auto; }
.figArea .flex { width: 86%; align-items: center; margin: 0 auto; padding: 0 0 4rem; }
.figArea .flex .column { width: 50%; padding: 0 0 0 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 .taisyouTitle { font-size: 2.5rem; font-weight: bold; margin-bottom: 1rem; border: 2px solid #2c323f; display: inline-block; padding: 0 1rem; }
.figArea .taisyoArea p { padding: 1rem 0; border-bottom: 3px dotted #9fa0a0; font-size: 2.2rem; margin-bottom: 1rem;line-height: 2; }
.figArea .taisyoArea p:last-child { border-bottom:none; }
.figArea .kyoucyou  { font-size: 2.8rem; background:linear-gradient(transparent 60%, #ff6 60%); border-bottom: 3px dotted #9fa0a0; }
.figArea .yoyakuArea { border: 1px solid #e60012; text-align: center; width: 70%; margin: 5rem auto 0; }
.figArea .yoyakuArea p { font-weight: bold; font-size: 2.5rem; padding: 1rem; }
.figArea .yoyakuTitle  { background:#e60012; color: #fff; }

@media only screen and (max-width: 766px) {
    .figArea { margin: 2rem auto 0; }
    .figArea .flex { width: 95%; display: block }
    .figArea .flex .column { width: 100%; padding: 2rem 0 0; }
    .figArea .flex .column:nth-of-type(1) img:nth-of-type(1) { width: 100%; margin: 0; }
    .figArea .taisyouTitle { font-size: 2rem; display: block; text-align: center; }
    .figArea .taisyoArea p { font-size: 1.8rem; margin-bottom: 0; }
    .figArea .taisyoArea p:last-child { border-bottom:none; }
    .figArea .kyoucyou  { font-size: 2.2rem; }
    .figArea .yoyakuArea { width: 100%; margin: 3rem auto 0; }
    .figArea .yoyakuArea p { font-size: 2.2rem; }
}

.corpArea { width: 100%; margin: 0 auto; background-image: linear-gradient(90deg, #0087d4, #aee1f3); 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 { background-image: linear-gradient(#e0bc2d, #7d5c08 50%); padding: 1rem; height: 6vw; display: flex; align-items: center; justify-content: center; }
.corpAreaInner article h4 a { font-size:1.1vw; color: #fff; }
.corpAreaInner article h4 a span { font-size: 0.7em; }
.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: 20vw; }
    .corpAreaInner article h4 a { font-size:1.8rem; color: #fff; }
    .corpAreaInner .margeLeft { width: 98%; padding-right:2rem;margin-bottom:0; }
    .corpAreaInner .margeRight{ width: 98%; padding-left:2rem; margin-left: auto; margin-top:0; }
}

footer { background: #005bac; 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 #68b9e7; display: flex; align-items: center; }
footer .add { font-size: 2rem; }
@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; }
    .footerInner a { color: #fff!important; }
}