/*
Theme Name: THE COMRADE SCRUM
Author: THE COMRADE SCRUM
Version: 1.0
Description: Minimal WordPress theme for THE COMRADE SCRUM
*/

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
}

:root{

  --cs-bg:#ffffff;
  --cs-ink:#111111;
  --cs-soft:#4a4a4a;

  /* typography */
  --cs-title:15px;
  --cs-text:14px;

  /* layout */
  --cs-wrap:540px;
  --cs-front-top:192px;
  --cs-front-side:20px;
  --cs-front-bottom:34px;

  /* logo */
  --cs-logo-w:118px;
  --cs-logo-gap:56px;

  /* spacing */
  --cs-text-gap:4px;
  --cs-block-gap:46px;
  --cs-enter-gap:50px;

  /* loading */
  --cs-loading-w:360px;
}

body{
  background:var(--cs-bg);
  color:var(--cs-ink);
  font-family:Arial, Helvetica, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img{
  display:block;
  max-width:100%;
  height:auto;
}

a{
  color:inherit;
  text-decoration:none;
}

/* =========================
   LOADING
========================= */

.cs-loading{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;
  opacity:1;
  visibility:visible;
  transition:
    opacity 1.6s ease,
    visibility 1.6s ease;
}

.cs-loading.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.cs-loading__inner{
  width:min(var(--cs-loading-w), calc(100vw - 48px));
}

.cs-loading__label{
  margin:0;
  font-family:'Cinzel', serif;
  font-weight:400;
  font-size:11px;
  line-height:1.4;
  letter-spacing:.14em;
  color:var(--cs-soft);
}

.cs-loading__line{
  position:relative;
  width:100%;
  height:1px;
  margin-top:10px;
  background:rgba(17,17,17,.08);
  overflow:hidden;
}

.cs-loading__line::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:100%;
  background:#111111;
  animation:csLineGrow 1.8s cubic-bezier(.22,.61,.36,1) forwards;
}

@keyframes csLineGrow{
  from{width:0;}
  to{width:100%;}
}

/* =========================
   FRONT PAGE
========================= */

.cs-front{
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:var(--cs-front-top) var(--cs-front-side) var(--cs-front-bottom);
}

.cs-inner{
  width:100%;
  max-width:var(--cs-wrap);
  text-align:left;
  padding-left:8px;
  transform:translateY(2px);
}

/* =========================
   LOGO
========================= */

.cs-logo{
  display:block;
  width:var(--cs-logo-w);
  margin:0 0 var(--cs-logo-gap);
  opacity:0;
  transform:translateY(6px);
  transition:
    opacity 1.2s ease,
    transform 1.2s ease;
}

.cs-logo.is-show{
  opacity:1;
  transform:none;
}

.cs-logo .custom-logo-link{
  display:block;
  width:var(--cs-logo-w);
}

.cs-logo img{
  width:var(--cs-logo-w);
  height:auto;
  opacity:.94;
}

/* =========================
   SECTION ANIMATION
========================= */

.cs-block{
  opacity:0;
  transform:translateY(10px);
  transition:
    opacity 1.25s ease,
    transform 1.25s ease;
}

.cs-block.is-show{
  opacity:1;
  transform:none;
}

.cs-block:first-of-type{
  margin-top:2px;
}

.cs-block + .cs-block{
  margin-top:var(--cs-block-gap);
}

/* =========================
   COPY
========================= */

.cs-title{
  margin:0;
  font-family:'Cinzel', serif;
  font-weight:400;
  font-size:var(--cs-title);
  line-height:1.22;
  letter-spacing:.18em;
  color:var(--cs-ink);
}

.cs-text{
  margin:var(--cs-text-gap) 0 0;
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  font-size:var(--cs-text);
  line-height:1.8;
  letter-spacing:.02em;
  color:var(--cs-soft);
  opacity:.92;
}

.cs-block:last-child .cs-title{
  letter-spacing:.16em;
}

/* =========================
   ENTER
========================= */

.cs-enter{
  margin-top:var(--cs-enter-gap);
}

.cs-enter-link{
  position:relative;
  display:inline-block;
  font-family:'Cinzel', serif;
  font-weight:400;
  font-size:11px;
  letter-spacing:.16em;
  padding-bottom:11px;
}

.cs-enter-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:182%;
  height:1px;
  background:rgba(17,17,17,.6);
  transform:scaleX(0);
  transform-origin:left center;
  animation:csEnterLine 1.6s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:1.8s;
}

@keyframes csEnterLine{
  from{transform:scaleX(0);}
  to{transform:scaleX(1);}
}

.cs-enter-link:hover{
  opacity:.72;
}

/* =========================
   MOBILE
========================= */

@media (max-width:767px){

  :root{
    --cs-wrap:360px;
    --cs-front-top:120px;
    --cs-front-side:24px;
    --cs-front-bottom:32px;

    --cs-logo-w:108px;
    --cs-logo-gap:44px;

    --cs-title:14px;
    --cs-text:13px;

    --cs-text-gap:4px;
    --cs-block-gap:38px;
    --cs-enter-gap:46px;

    --cs-loading-w:300px;
  }

  .cs-inner{
    padding-left:4px;
  }

  .cs-title{
    letter-spacing:.16em;
  }

  .cs-text{
    letter-spacing:.02em;
  }

  .cs-enter-link{
    font-size:10px;
    letter-spacing:.16em;
    padding-bottom:9px;
  }

  .cs-enter-link::after{
    width:176%;
  }

}

/* =========================
   SELECTION
========================= */

::selection{
  background:#111111;
  color:#ffffff;
}

/* =====================================================
  HAMBURGER MENU（2LINE + GLASS）
===================================================== */

/* -------------------------------
  BUTTON
-------------------------------- */

.cs-menu-btn{
  position:fixed;
  top:22px;
  right:22px;
  z-index:210;

  width:44px;
  height:44px;
  border:0;
  background:transparent;
  cursor:pointer;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}

/* 2本線 */

.cs-menu-btn__line{
  width:18px;
  height:1px;
  background:#111;
  display:block;
  transition:opacity .3s ease;
}

/* -------------------------------
  PANEL（GLASS）
-------------------------------- */

.cs-menu-panel{
  position:fixed;
  inset:0;
  z-index:220;

  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .6s cubic-bezier(.22,.61,.36,1),
    visibility .6s;
}

.cs-menu-panel.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* -------------------------------
  INNER
-------------------------------- */

.cs-menu-panel__inner{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* -------------------------------
  CLOSE（×）
-------------------------------- */

.cs-menu-close{
  position:absolute;
  top:22px;
  right:22px;
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  cursor:pointer;
}

.cs-menu-close__line{
  position:absolute;
  top:50%;
  left:50%;
  width:18px;
  height:1px;
  background:#111;
}

.cs-menu-close__line:first-child{
  transform:translate(-50%, -50%) rotate(45deg);
}

.cs-menu-close__line:last-child{
  transform:translate(-50%, -50%) rotate(-45deg);
}

/* -------------------------------
  NAV
-------------------------------- */

.cs-menu-nav__list{
  list-style:none;
  margin:0 auto;
  padding:0;

  /* 中央配置 */
  display:flex;
  flex-direction:column;
  justify-content:center;

  /* 左揃えで見せるための幅 */
  width:220px;

  /* 黄金比余白 */
  gap:34px;
}

.cs-menu-nav__list li{
  text-align:left;
  opacity:0;
  transform:translateY(6px);
  transition:
    opacity 1.1s cubic-bezier(.22,.61,.36,1),
    transform 1.1s cubic-bezier(.22,.61,.36,1);
}

.cs-menu-nav__list li.is-show{
  opacity:1;
  transform:translateY(0);
}

.cs-menu-nav__list a{
  display:inline-block;
  font-family:"Cinzel", serif;
  font-size:15px;
  line-height:1.2;
  letter-spacing:.26em;
  text-transform:uppercase;
  text-decoration:none;
  color:#111;
  opacity:.72;
  transition:opacity .3s ease;
}

.cs-menu-nav__list a:hover{
  opacity:1;
}

/* -------------------------------
  BODY LOCK
-------------------------------- */

body.is-menu-open{
  overflow:hidden;
}

/* -------------------------------
  SP
-------------------------------- */

@media (max-width:767px){

  .cs-menu-btn{
    top:18px;
    right:18px;
  }

  .cs-menu-close{
    top:18px;
    right:18px;
  }

  .cs-menu-nav__list{
    width:180px;
    gap:21px;
  }

  .cs-menu-nav__list a{
    font-size:14px;
    letter-spacing:.22em;
  }
}

/* ======================================
  MENU REVEAL
====================================== */

.cs-menu-nav__list li{
  opacity:0;
  transform:translateY(6px);

  transition:
    opacity 1.1s cubic-bezier(.22,.61,.36,1),
    transform 1.1s cubic-bezier(.22,.61,.36,1);
}

.cs-menu-nav__list li.is-show{
  opacity:1;
  transform:translateY(0);
}