/*
Theme Name:HumanResouces
Description:GVT 人財
Author:GVT　Co., Ltd.
Version:0.1
License:GNU General Public License v2 or later
License URI:http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:HR
*/

/* common */
* { color:#333; font-family:montserrat, "uddigikyokasho-pro", "Hiragino Kaku Gothic Pro",HiraKakuPro-W3,"ヒラギノ角ゴ Pro W3","メイリオ", Meiryo,"MS P ゴシック",verdana,sans-serif; text-align:justify; }
html, body { font-size:16px; line-height:1.5; }
body.noscroll { overflow:hidden; }
a, span { text-align:justify; }

.pc {display:block; }
.sp { display:none; }

main { width:100%; max-width:1920px; margin:0 auto; }

:root{
    --bgcol:#666;
    --gicons:'Material Symbols Outlined';

    --gvt_m:#ff1493;
    --gvt_o:#0063B5;
    --gvt_t:#00a474;
    --gvt_lr:#c84094;
    --gvt_lb:#3450a4;
}

header { display:flex; justify-content:space-between; align-items:center; height:4rem; border-bottom:2px solid var(--bgcol); }
#headerAnchor { height:80%; display:flex; justify-content:flex-start; align-items:center;  }
#siteTitle { font-size:2rem; letter-spacing:0.5rem; margin-left:1rem; }
#mainLogo { display:block; margin-left:1rem; height:100%; }
/*#logInOut { margin-left:auto; margin-right:2rem; display:flex; align-items:center; }
#login::before { content:'\ea77'; font-family:var(--gicons); padding-right:0.5rem; }
#logout::before { content:'\e9ba'; font-family:var(--gicons); padding-right:0.5rem; }*/
#logInOut { padding:0 1rem; }
#login, #logout { display:flex; align-items:center; font-size:1.25rem; color:#fff; }
#login::before { content:'\ea77'; font-family:var(--gicons); padding-right:1rem; font-size:2rem; }
#logout::before { content:'\e9ba'; font-family:var(--gicons); padding-right:1rem; font-size:2rem; }
#loginForm { position:fixed; top:540px; left:1rem; background-color:#fff; border-radius:0.5rem; filter:drop-shadow(1px 2px 0.375rem #999); padding:1rem; display:none; z-index:2; }
.login-username, .login-password { display:flex; flex-direction:column; }
.login-username > label, .login-password > label { display:inline-block; letter-spacing:1px; }
#user_login, #user_pass { border:1px solid #ddd; outline:none; background-color:#fff; border-radius:0.5rem; padding:0.25rem 0.5rem; margin-bottom:1rem; }
#loginForm .login-submit { position:relative; width:100%; text-align:center; background-color:#333; color:#fff; }
#loginForm .login-submit::before { content:'\e536'; font-family:var(--gicons); font-size:2rem; opacity:1; position:absolute; left:1rem; top:50%; transform:translateY(-50%); transition:all 0.5s; }
#loginForm .login-submit:hover::before { left:calc(100% - 1rem); opacity:0; transform:translate(-100%, -50%); }
#loginForm .login-submit::after { content:'\e566'; font-family:var(--gicons); font-size:2rem; opacity:0; position:absolute; left:1rem; top:50%; transform:translateY(-50%); transition:all 0.5s; }
#loginForm .login-submit:hover::after { left:calc(100% - 1rem); transform:translate(-100%, -50%); opacity:1; }
#loginForm #wp-submit { width:100%; height:100%; padding:0.5rem 0; }
#loginClose { position:absolute; top:1rem; right:0.5rem; transition:0.5s; cursor:pointer; display:flex; justify-content:center; align-items:center; }
#loginClose:hover { transform:rotate(180deg); }
#loginClose::after { content:'\e5cd'; font-family:var(--gicons); font-size:1.5rem; line-height:0; color:#666; }
#loginClose:hover::after { content:'\e5c9'; color:#333; }
#loginOverLay { position:fixed; top:0; left:0; width:100%; height:100%; background-color:#9996; z-index:1; display:none; }
.loginFormErr { position:absolute; left:2rem; width:16rem; background-color:#fff; border:1px solid #9996; border-radius:0.5rem; padding:1rem; color:#F00; cursor:pointer; }
#newPost { margin-right:2rem; letter-spacing:2px; display:flex; justify-content:space-between; align-items:center; padding:0 1rem; border:2px solid #333; border-radius:0.5rem; box-shadow:1px 2px 0.375rem #3339; }
#newPost::before { content:'\e745'; font-family:var(--gicons); font-size:2rem; padding-right:0.5rem; }

main { display:flex; justify-content:flex-start; align-items:stretch; width:100%; min-height:calc(100vh - 4rem); }
nav { background-color:var(--bgcol); }
#menu { display:flex; flex-direction:column; align-items:flex-start; padding:2rem 1rem; }
.menuList { white-space:nowrap; margin-top:2rem; line-height:2; }
.menu { display:flex; align-items:center; }
.menu > span{ font-size:1.25rem; color:#fff; padding-left:1rem; }
.menuIcons { width:2rem !important; height:auto !important; }
.menuIcons path, .menuIcons rect { fill:#fff !important; stroke:#fff !important; }
#ip { position:fixed; left:2rem; bottom:1rem; color:#fff; }

#contents { padding:4rem 2rem 0; display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; width:100%; }
#contTitle { display:flex; justify-content:space-between; align-items:baseline; font-size:1.5rem; margin-bottom:2rem; padding-left:2.5rem; position:relative; }
#contTitle::before { content:''; background-size:cover; background-position:center center; width:2rem; height:2rem; position:absolute; top:50%; left:0; transform:translateY(-50%); }

footer { margin-top:auto; text-align:center; padding:1rem 0; }
/* common */

/* index */
.infoArea { margin-bottom:2rem; }
.catTitle { border-bottom:1px solid var(--bgcol); padding-bottom:0.5rem; margin:1rem 0; font-size:0.85rem; position:relative; font-weight:700; letter-spacing:0.875rem; display:flex; justify-content:space-between; flex-direction:row-reverse; align-items:center; }
.catTitle > span { font-size:1.25rem; font-weight:bold; letter-spacing:10px; text-shadow:2px 2px 4px #999; }
.catTitle > span::before, .catTitle > span::after { content:'〜'; padding:0.5rem 0; }
.infoList { margin-bottom:2rem; }
.titleRow { display:flex; justify-content:flex-start; align-items:center; }
.infoTitle { font-size:1.125rem; }
.infoTitle.hasFiles::before { content:'\e226'; font-family:var(--gicons); padding-right:0.5rem; }
.infoTitle.noFile::before { content:'　'; font-family:var(--gicons); padding-right:0.5rem; }
.classify.open::after { content:'\e898'; font-family:var(--gicons); padding-right:0.5rem; }
.classify.close::after { content:'\e897'; font-family:var(--gicons); padding-right:0.5rem; }
.infoDate { margin-left:auto; }
.infoCont { margin-top:0.5rem; }

.catArchives { text-align:center; }
.catArchives > a { display:inline-block; border:1px solid #666; padding:0.5rem 3rem; position:relative; }
.catArchives > a::after { content:'\e5cc'; font-family:var(--gicons); position:absolute; right:0.5rem; top:50%; transform:translateY(-50%); }
/* index */

/* 個別ページ */
#contTitle.infoTitle::before { background-image:url('./images/info.svg'); }
#contTitle.artTitle::before { background-image:url('./images/docs.svg'); }
#contTitle > span { font-size:1rem; margin-right:2rem; }
#contTitle > span::before, #contTitle > span::after { content:'〜'; }

#att { margin-top:2rem; display:flex; justify-content:flex-start; flex-wrap:wrap; }
#attTitle { border-bottom:1px dotted var(--bgcol); width:100%; padding-bottom:0.5rem; }
#attTitle::before { content:'\e226'; font-family:var(--gicons); padding-right:0.5rem; }
.fileLink { display:flex; justify-content:flex-start; align-items:center; margin:0.5rem 0 0 1rem; }
.fileLink.imgs::before { content:'\e3f4'; font-family:var(--gicons); padding-right:0.5rem; }
.fileLink.pdfs::before { content:'\e415'; font-family:var(--gicons); padding-right:0.5rem; }
.fileLink.files::before { content:'\ef42'; font-family:var(--gicons); padding-right:0.5rem; }

#backBtn { color:#fff; background-color:#666c; padding:0.5rem 1rem; border-radius:0.5rem; margin:5rem 0 2rem auto; }

/* archives */
#arcTitle { font-size:1.5rem; }

nav.navigation.pagination { background-color:transparent; }
.nav-links ul { list-style:none; display:flex; justify-content:center; gap:8px; }
.nav-links li > * { display:flex; align-items:center; justify-content:center; font-size:14px; height:45px; }
.nav-links li > *:not(.dots) { width:45px; border-radius:50%; background:#efefef; transition:color 0.3s ease, background 0.3s ease; }
.nav-links li > .current, .nav-links li > a:hover { color:#ffffff; background:#666; }
/* archives */
/* 公開資料・お知らせ */

/* お問い合わせ */
#contTitle.contactTitle::before { background-image:url('./images/contact.svg'); }
#contactForm { width:90%; margin:0 auto; }
.formRow { margin-bottom:1rem; background-color:#eee; border-radius:3rem; overflow:hidden; position:relative; }
.formRow.alert:after { content:'\e002'; font-family:var(--gicons); position:absolute; top:50%; right:2rem; transform:translateY(-50%); font-size:2rem; color:#f00; }
.formLabel { display:flex; justify-content:center; align-items:center; color:#fff; background-color:#666; padding:1rem 2rem; transition:all 0.5s ease-out; width:100%; height:100%; text-align:center; position:absolute; }
.formRow.hover .formLabel, .formRow.hasValue .formLabel, .formRow.focus .formLabel { width:20%;  }
#txtCont { resize:none; transition:all 0.3s ease-in; }
#txtCont.focused { padding-bottom:10rem; }
.formItem { width:80%; padding:1rem; outline:none; margin-left:20%; }
.btnRow { display:flex; justify-content:center; align-items:center; }
.submit, .clear { width:8rem; position:relative; text-align:center; margin:3rem 2rem; padding:0.5rem 0; border:2px solid #666; border-radius:0.5rem; transition:all 0.3s ease-in; }
.submit:before { content:'\e5ca'; font-family:var(--gicons); position:absolute; top:50%; left:0.5rem; transform:translateY(-50%); }
.submit:hover { background-color:#666; color:#fff; }
.clear { background-color:#666; color:#fff; }
.clear:before { content:'\e92b'; font-family:var(--gicons); position:absolute; top:50%; left:0.5rem; transform:translateY(-50%); }
.clear:hover { background-color:transparent; color:inherit; }
/* お問い合わせ */

@media screen and (max-width:600px){
    .pc {display:none; }
    .sp { display:block; }

    header { position:fixed; width:100%; background-color:#fff; z-index:10; }
    #siteTitle { font-size:1.5rem; }
    #newPost { display:none; }
    nav#global { position:fixed; width:100vw; height:calc(100% - 4rem); bottom:-100%; transition:0.5s; z-index:10; }
    nav#global.active { bottom:0; }

    #menuBtn { position:relative; background-color:#666; cursor:pointer; width:50px; height:50px; border-radius:0.5rem; margin-right:1rem; z-index:100; }
    #menuBtn span { display:inline-block; transition:0.5s; position:absolute; }
    #menuBtn span:nth-of-type(1), #menuBtn span:nth-of-type(3) { height:2px; background-color:#fff; width:62%; left:9px; }
    #menuBtn span:nth-of-type(1) { top:13px; }
    #menuBtn span:nth-of-type(2) { top:19px; left:11px; font-size:0.6rem; text-transform:uppercase; color:#fff; }
    #menuBtn span:nth-of-type(3) { top:36px; }
    #menuBtn.active span:nth-of-type(1) { top:18px; left:18px; transform:translateY(6px) rotate(-45deg); width:30%; }
    #menuBtn.active span:nth-of-type(2) { opacity:0; }
    #menuBtn.active span:nth-of-type(3) { top:30px; left:18px; transform:translateY(-6px) rotate(45deg); width:30%; }
    #loginForm { top:50%; left:50%; transform:translate(-50%, -50%); }
    #ip { bottom:0; left:0; width:100%; background-color:#666c; padding:0.5rem; text-align:center; }

    footer#rulesCopy { margin-bottom:3rem; }

    #contents { padding-top:6rem; }
    .catTitle { flex-direction:column-reverse; }
    .catTitle > span { font-size:1rem; letter-spacing:0.5rem; }
    .titleRow { flex-wrap:wrap; }

    #contTitle { flex-wrap:wrap; font-size:1.25rem; padding-left:2rem; }
    #contTitle::before { top:0; transform:none; margin-top:0.25rem; width:1.5rem; height:1.5rem; }
    #contTitle > span { margin:0.5rem 1rem 0 auto; }
    .contBody { margin-bottom:5rem; }

    #backBtn { margin:0 auto 2rem 0; }

    #contactForm { width:100%; }
    .formRow { border-radius:0; }
    .formRow.hover .formLabel, .formRow.hasValue .formLabel, .formRow.focus .formLabel { width:100%; height:1rem; white-space:pre; }
    .formItem { width:100%; transition:0.5s; margin-left:0; }
    .formRow.hover .formItem, .formRow.hasValue .formItem, .formRow.focus .formItem { margin-top:2rem; }
    .formRow.alert::after { transition:0.5s ease-in;}
    .formRow.hover.alert::after { margin-top:1rem; }
}