* { 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:18px; line-height:1.5; }
body { background-color:#ededed; }
body.noscroll { overflow:hidden; }

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

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

.contImg { position:absolute; transform:translateX(-50%); opacity:0.3; }
.contTtl { font-family:'kaisei-tokumin'; font-weight:700; position:absolute; top:10%; font-size:3rem; display:flex; flex-direction:column; align-items:center; color:#fff; letter-spacing:0.5rem; line-height:1.25; padding:0.5rem 1rem; background-color:var(--gvt_lr); filter:drop-shadow(0.125rem 0.25rem 0.375rem #fff); outline:0.25rem solid var(--gvt_lr); outline-offset:0.5rem; }

header { position:fixed; width:100%; top:0; left:0; background-color:transparent; display:flex; justify-content:space-between; align-items:center; height:4rem; z-index:10; transition:0.5s; }
.noscroll header { background-color:#fff; }
#headerAnchor { height:80%; display:flex; justify-content:flex-start; align-items:center;  }
#siteTitle { font-size:2rem; letter-spacing:0.5rem; margin-left:1rem; text-shadow:1px 1px 0 #fff, 1px -1px 0 #fff,-1px 1px 0 #fff,-1px -1px 0 #fff,1px 0 0 #fff,-1px 0 0 #fff,0 1px 0 #fff,0 -1px 0 #fff; }
#mainLogo { display:block; margin-left:1rem; height:100%; }
#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; }
#menu { display:flex; flex-direction:column; align-items:flex-start; height:100%; padding:2rem 1rem; background-color:#6666; }
.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; }
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.5rem; 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%; }


#vMain, #vLead, #vGreeting, #vCont { width:100%; max-width:1920px; margin:0 auto; position:relative; }
#vMain > img { max-width:100%; filter:brightness(0.75); }
#vMainLead { position:absolute; top:0; right:0; transform:translate(-20%, 30%); font-size:5vw; font-family:montserrat; font-weight:400; text-align:center; letter-spacing:0.5rem; user-select:none; color:#fff; display:flex; align-items:flex-start; }
#G, #V, #T { display:inline-block; color:#fff; writing-mode:vertical-lr; line-height:1.25; text-shadow:0.125rem 0.25rem 0.375rem #0006; }
#G> span { color:var(--gvt_m); font-size:5vw; transform:rotate(-90deg) translateX(1rem); display:inline-block; font-weight:700; text-shadow:none; }
#V> span { color:var(--gvt_o); font-size:5vw; transform:rotate(-90deg) translateX(1rem); display:inline-block; font-weight:700; text-shadow:none; }
#T> span { color:var(--gvt_t); font-size:5vw; transform:rotate(-90deg) translateX(1rem); display:inline-block; font-weight:700; text-shadow:none; }

#vGreetingCont{ position:relative; width:65%; margin:-5rem 10% 3rem auto; padding:8.5rem 2rem 2rem 7.5rem; background-color:#fff; }
#grTtl { left:10%; transform:translate(-50%, -50%) rotate(-10deg); }
#grTtl > span { font-size:1.5rem; color:#fff; }
.grBoxArea { position:relative; z-index:1; text-shadow:0 0 0.5rem #fff; }
.grBox { margin-bottom:2rem; }
.grBox > p:first-child { font-size:1.5rem; margin-bottom:1rem; }
#gr { text-align:right; font-size:1.25rem; }
#gr > span { font-family:'shinryu'; transform:rotate(-1deg) translateY(-1px); padding-left:1rem; }
#boss { top:2rem; left:75%; height:12rem; } 

#vLeadCont { width:65%; margin:7.5rem auto 3rem 10%; padding:8.5rem 0 0; background-color:#fff; position:relative; z-index:1; }
#vLeadTtl { right:10%; transform:translate(50%, -50%) rotate(10deg); background-color:var(--gvt_lb); outline-color:var(--gvt_lb); }
#vLeadTtl > span { font-size:1.5rem; color:#fff; }
#vLeadTxt { position:relative; z-index:1; text-shadow:0 0 0.5rem #fff; padding:0 7.5rem 0 2rem; }
#vInterview { top:2rem; left:30%; height:15rem; }
#interview { display:flex; justify-content:space-between; margin-top:2rem; color:#fff; padding:0 2rem 2rem; background:linear-gradient(to bottom, transparent 0%, transparent 47.5%, var(--gvt_lb) 52.5%, var(--gvt_lb) 100%); }
.viPerson { position:relative; display:flex; flex-direction:column; width:32%; max-width:360px; align-items:center; filter:grayscale(1) blur(0.25rem); transition:0.5s; transform:translateY(0.5rem); }
.viPerson:hover { filter:none; transform:none; box-shadow:0.8rem 0.8rem 0.5rem #0006; }
.viCard { position:absolute; bottom:1rem; width:80%; display:flex; flex-direction:column; justify-content:center; align-items:center; background-color:#fff; padding:0.5rem 0; color:#333; outline:1px solid var(--gvt_lb); outline-offset:-0.25rem; box-shadow:0.8rem 0.8rem 0.5rem #0006; }
.viJtc { border-left:0.25rem solid var(--gvt_lr); border-right:0.25rem solid transparent; padding:0 0.5rem; }
.viDept { margin-bottom:0.5rem; }
.viName { font-size:1.25rem; font-weight:700; }

#copy { margin-top:auto; text-align:center; padding:1rem 0; }