
/* --------------------- fonts */



/* --------------------- common */

html,
body { font-size: 16px; color: #555555; font-family: "Noto Sans JP", sans-serif; }

a { transition: 0.5s; cursor: pointer; color: #555555; }
a:hover { opacity: 0.7; }

figure { margin: 0; }

.txt { line-height: 180%; }
.vertical_txt { writing-mode: vertical-rl; text-orientation: upright; }

.font-mincho { font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif; font-weight: 400; font-style: normal; }
.font-cormorant { font-family: "Cormorant Infant", serif; }
.font-serif { font-family: "Noto Serif JP", serif; }

.box-shadow1 { box-shadow: 5px 8px 15px #cecece; }

.inner { width: 94%; max-width: 1200px; margin: auto; }
.max700 { max-width: 700px; }
.max900 { max-width: 900px; }
.max1000 { max-width: 1000px; }
.max1100 { max-width: 1100px; }
.max1300 { max-width: 1300px; }
.max1600 { max-width: 1600px; }

/* --------------------- bg */

.bg-gold { background-color: #c4ae73; color: #fff; }
.bg-green { background-color: #218c57; color: #fff; }
.bg-offwhite { background-color: #edebe2; }
.bg-gray { background-color: #eeeeee; }
.bg-gray2 { background-color: #f7f7f7; }

.bg-gradient1 { background: url(../../img/recruit/common/bg-gradient1.jpg) no-repeat center center; background-size: cover; }

.center_all { width: 100%; padding: 100% 0 0; margin: 0; position: relative; overflow: hidden; box-sizing: border-box; }
.center_all img { top: 50%; left: 50%; transform: translate(-50%, -50%); height: 101%; width: auto; position: absolute; transition: 0.5s; z-index: 0; }


/* --------------------- colors */

.color-gold { color: #c4ae73; }
.color-green { color: #218c57; }

/* --------------------- buttons */

.btn_wrap .btn { min-width: 210px; display: inline-block; height: 47px; line-height: 47px; font-size: 1rem; position: relative; border-radius: 50px; box-sizing: border-box; text-align: center; }
.btn_wrap .btn .icn-wrap { justify-content: center; }
.btn_wrap .btn .icn-wrap .icon { margin-right: 0.25rem; }


.btn_wrap .btn.hover_anim { overflow: hidden; transition: 0.5s; opacity: 1 !important; }
.btn_wrap .btn.hover_anim span { position: relative; z-index: 1; }
.btn_wrap .btn.hover_anim i::before { transition: 0.5s; filter: brightness(0) invert(1); }
.btn_wrap .btn.hover_anim::before { background-color: #fff; width: 0%; height: 100%; left: 0; top: 0; transition: 0.5s; z-index: 0; }
.btn_wrap .btn.hover_anim:hover::before { width: 100%; }
.btn_wrap .btn.hover_anim.bg-green { border: 1px solid #218c57; }
.btn_wrap .btn.hover_anim.bg-gold { border: 1px solid #C5B074; }
.btn_wrap .btn.hover_anim.bg-gold:hover { color: #C5B074; }
.btn_wrap .btn.hover_anim.bg-green:hover { color: #218c57; }
.btn_wrap .btn.hover_anim:hover i::before { filter: none; }

/* --------------------- head_style */

.head_style1 .lead { font-weight: 100; font-size: 2.5rem; }
.head_style1 .icon { width: 2.5rem; }
.head_style1 .sub { font-size: 1.5rem; text-transform: lowercase; }

.head_style2 { font-size: 1.75rem; padding: 2rem 0 1rem; }

/* --------------------- logo */

.logo span { margin-left: 1rem; border-radius: 5px; height: 25px; line-height: 25px; padding: 0 0.5rem; }
.logo a { display: block; }
.logo a img { width: 100%; height: auto; }
.logo-text { font-size: 14px; border: 1px solid #c4ae73; height: 28px; line-height: 28px; border-radius: 0.5rem; }

/* --------------------- header */

header { position: fixed; top: 0; left: 0; width: 100%; z-index: 9; background-color: #fff; transition: 0.5s;  }
.header_wrap { padding: 0; padding-right: 1rem; transition: 0.5s; }
header .logo { padding: 1rem; }
header .logo a { max-width: 240px; }

header .time { font-size: 0.8rem; padding-left: 20px; }
header .btn_wrap .btn.bg-green { margin-left: 0.75rem; }
header .btn_wrap .btn .icon { width: 20px; margin-right: 0.25rem; }

header.active { box-shadow: 0px 0px 12px -6px #bbb; }
header.active .logo a { max-width: 200px; }

.header-nav { padding-right: 0.5rem; }
.header-nav ul li a { font-weight: 600; display: block; padding: 0.5rem 1.25rem; font-size: 14px; }
.header-nav ul li a::before { left: 0; top: 0; bottom: 0; height: 50%; width: 1px; background-color: #cbcbcb; }
.header-nav ul li a::after { transition: 0.5s; width: 0%; height: 2px; bottom: 0; left: 0; background-color: #218c57; }
.header-nav ul li a:hover { color: #218c57; }
.header-nav ul li a:hover::after { width: 100%; }

main { padding: 88px 0 0; }

footer { padding: 4rem 0 0; }
footer .logo { padding: 0 0 4rem; }
footer .logo a { width: 287px; margin-bottom: 1rem; }

footer .btn_wrap .btn { height: 54px; line-height: 54px; }
footer .btn_wrap .btn::after { width: 15px; height: 10px; }
footer .logo span { margin-left: 0; }

footer .copyright { padding-top: 2rem; }

.footer-bot { padding: 1rem 0 2rem; border-top: 1px solid #e5e5e4; }
.footer-bot p { font-size: 12px; }
.footer-bot .address span { display: block; font-weight: 500; font-size: 15px; padding-bottom: 0.25rem; }
.footer-bot .address p { padding-top: 1rem; padding-right: 3rem; }

@media screen and (max-width: 1300px) {
    .header-nav { display: none; }
}

@media screen and (max-width: 1100px) {

    html,
    body { font-size: 14px; }

    header .logo a { max-width: 170px !important; }
    header .logo span { font-size: 12px; }
    header .btn_wrap .btn { font-size: 14px; min-width: 180px; height: 40px; line-height: 40px; }
    header .btn_wrap .btn .icon { width: 18px; }

   /* header .btn_wrap .btn { width: 180px; height: 60px; line-height: 60px; font-size: 16px; }
    header .common_tel { font-size: 1.6rem; height: 25px; line-height: 25px; padding-left: 20px; }

    header.active .logo a { max-width: 150px; }
    header.active .btn_wrap .btn { height: 50px; line-height: 50px; }
 */

    main { padding: 66px 0 0; }

    .tablet-none { display: none; }

    .head_style1 .lead { font-size: 2rem; }
    .head_style1 .sub { font-size: 1.5rem; }
}

@media screen and (min-width: 797px) {
    .pc-none { display: none; }
}

@media screen and (max-width: 797px) {

    .sp-none { display: none; }
    .inner { width: 88%; }
    .sp-block { display: block; }

    .head_style1 .icon { width: 2rem; }
    .head_style1 .lead { font-size: 1.75rem; }

    .head_style2 { font-size: 1.5rem; }

    /* header .logo { max-width: 130px; }
    header .menu_btn { width: 40px; }
    header .common_tel { padding-left: 15px; font-size: 1.25rem; height: 20px; line-height: 20px; letter-spacing: 0; }
    header .btn_wrap .btn { padding-right: 12px; height: 70px; line-height: 70px; width: 110px; font-size: 12px; } */

    header .logo a { width: 140px; }
    .logo span { height: 18px; line-height: 18px; font-size: 10px; }

    header .btn_wrap { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #fff; }
    header .btn_wrap .btn { min-width: 0; width: 50%; border-radius: 0; font-size: 13px; transition: none; }
    header .btn_wrap .btn.bg-green { margin: 0; }
    header .btn_wrap .btn .icon { width: 18px; }


    .btn_wrap .btn-type2 { width: 100%; min-width: 0; }

    main { padding-top: 60px; }

    .btn_wrap .btn { font-size: 1rem; }
    .btn_wrap .btn .icon { width: 1.25rem; }

    .f_entry { padding: 1.5rem 0; }
    .f_entry .wrap { padding: 3rem 0; }
    .f_entry .wrap .txt { font-size: 1rem; }
    .f_entry .wrap .arw { font-size: 3rem; height: 45px; line-height: 45px; padding-left: 4rem; }

    footer { padding: 2rem 0; }
    footer .inner { display: block; }
    footer .logo { padding: 0 0 2rem; display: block; text-align: center; width: 88%; max-width: 220px; margin: auto; }
    footer .logo a { width: 100%; }
    footer .logo span { margin: 8px auto 0; display: inline-block; }
    footer .btn_wrap { text-align: center; padding-bottom: 2rem; }
    footer .btn_wrap .btn { height: 45px; line-height: 45px; width: 180px; font-size: 1rem; }
    footer .copyright { text-align: center; padding: 1rem 0 0; }

    .footer-bot .address p { padding-bottom: 1rem; }
}