/** 共通設定 */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@property --depth {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

:root {
  --cube-color: #308dca;
  --cube-face-color: #308cca29;
  --background-color: #fff;
  --depth-progress: 0; /* 0 = 3D, 1 = 2D */
  --front-progress: 0; /* 0 = cube幅, 1 = 60vw(wideステージ) */

  /* ↓ 追加: dockステージ用の進捗変数 */
  --front-progress-2: 0; /* 0 = 60%(wideステージ), 1 = 100%(画面幅いっぱい) */
  --height-progress: 0;  /* 0 = cube本来の高さ, 1 = 60px */
  --pos-progress: 0;     /* 0 = 整列時の位置, 1 = 画面上端にドック */
  --dock-height: 60px;   /* #real-header の height と揃える */
}

.pin-wrap{
  height:100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.stage{
  position: absolute;
  inset:0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width:100%;
}

/** container query */
.container-wrap{
  --container-width: 640px;
  --container-bgcolor: #fff;
  --container-primary-color: currentColor;
  --container-secondary-color: #bbb;
  --window-color:#bbb;
  width: clamp(320px, 60vw, var(--container-width));
  max-width: 100%;
  container-type: inline-size;
  --container-cqw: calc(1cqw / (var(--container-width) / 100));
}

.container-wrap{
  color: var(--cube-color);
}

/** cube */
.cube {
  transform-style: preserve-3d;
}

.face {
  position: absolute;
  width: 100%; height: 100%;
  box-sizing: border-box;
  border:calc(1px * var(--container-cqw)) solid var(--cube-color);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: visible;
  overflow: hidden;
}

.face .label {
  font-size: calc(0.8rem * var(--container-cqw));
  position: relative;
  z-index: 3;
}

.face-fill {
  position: absolute;
  inset: 0;
  background: var(--cube-face-color);
  opacity: 0;
}

.front  { transform: translateZ(var(--depth)); }
.back   { transform: rotateY(180deg)  translateZ(var(--depth)); }
.right  { transform: rotateY(90deg)   translateZ(var(--depth)); }
.left   { transform: rotateY(-90deg)  translateZ(var(--depth)); }
.top    { transform: rotateX(90deg)   translateZ(var(--depth)); }
.bottom { transform: rotateX(-90deg)  translateZ(var(--depth)); }

/** フォント */
.lead{
  font-size: calc(1.75rem * var(--container-cqw));
}

.lead-sm{
  font-size: calc(1.25rem * var(--container-cqw));
}

.lead-xs{
  font-size: calc(0.9rem * var(--container-cqw));
}

/**
ウィンドウ
*/
.windows-wrap{
  --window-base-bgcolor: #fff;
  --window-base-main-color: currentColor;
  max-width: 100%;
  container-type: inline-size;
}

.window{
  position:relative;
  width: 100%;
}

.window-wrap{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  min-height: calc(30vh * var(--container-cqw));
  margin: calc(5rem * var(--container-cqw)) 0;
  position: relative;
  aspect-ratio: 16 / 9;
}

.window-inner{

  background:var(--container-bgcolor);
  border:1px solid var(--container-primary-color);
  border-radius: calc(16px * var(--container-cqw));
  width: 100%;
  height: 100%;
  position:relative;
}

.window-header{
  display: flex;
  gap: calc(8px * var(--container-cqw));
  align-items: center;
  font-size:calc(16px * var(--container-cqw));
  padding:calc(12px * var(--container-cqw));
  overflow: hidden;
}

.window-label{
  line-height:1;
  font-size:calc(0.85rem * var(--container-cqw));
}

.label-editor,
.label-publish{
  position:absolute;
  right:calc(12px * var(--container-cqw));
}

.label-publish{
  opacity:0;
}

.window-controll{
  display:flex;
  gap: calc(8px * var(--container-cqw));
}

.window-controll span{
  display:block;
  width: calc(12px * var(--container-cqw));
  height: calc(12px * var(--container-cqw));
  border-radius:50%;
  background:var(--container-primary-color);
}

.window-content{
  padding: calc(12px * var(--container-cqw)) calc(12px * var(--container-cqw));
}

.window-content svg{
  stroke-width:2.5;
}

/** エディター*/
.window-editor{
  position: absolute;
  width: 50%;
}

.window-editor .window-inner{
  background:#fff;
}

.window-editor .window-header{
  background:#fff;
  border-bottom: 1px solid var(--container-primary-color);
}

.window-editor code{
  background:transparent;
  line-height:1;
}

.window-editor-controll{
  line-height: 0;
}

.window-editor  .window-header{
  font-size:calc(0.875rem * var(--container-cqw));
}

.window-editor  .window-header svg{
  width:calc(1.25rem * var(--container-cqw));
  height: auto;
}

.code {
  font-size: calc(0.9rem * var(--container-cqw));
  gap:calc(0.2rem * var(--container-cqw));
  display: flex;
  flex-direction: column;
}

.code > code {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.code > code::before {
  content: '#';
  margin-right: calc(1em * var(--container-cqw));
  margin-left: calc(5px * var(--container-cqw));
  color: var(--container-primary-color);
  text-align: right;
  user-select: none;
}

/** 看板 */
.sign-wrap{
  --sign-base-bgcolor: #f2f2f2;
  --sign-base-main-color: #bbb;
  max-width: 100%;
}

.sign-inner{
  position:relative;
}

.sign-content{
  display: flex;
  align-items: center;
  justify-content: center;
  border:calc(3px * var(--container-cqw)) solid currentColor;
  border-radius: calc(16px * var(--container-cqw));
  padding:calc(1rem * var(--container-cqw));
  aspect-ratio: 16 / 9;
  flex-direction: column;
  height:100%;
  position: relative;
  gap:calc(1rem * var(--container-cqw));
}

.sign .lead-header{
  position: absolute;
  top:0;
  color:var(--background-color);
  background:var(--cube-color);
  padding:0.25rem 1.5rem;
  border-bottom-left-radius: calc(16px * var(--container-cqw));
  border-bottom-right-radius: calc(16px * var(--container-cqw));
}

.sign .lead{
  font-size: calc(1.75rem * var(--container-cqw));
}

.sign .check{
  line-height:0;
  background:color-mix(in srgb, var(--cube-color) 10%, transparent);
  border-radius: 50%;
  padding: 0.5rem;
}

.sign svg{
  width:calc(60px * var(--container-cqw));
  height:auto;
  stroke-width:1;
}

.sign-pole{
  width:calc(3px * var(--container-cqw));
  height:calc(100px * var(--container-cqw));
  background: currentColor;
  margin:auto;
}

.sign-base{
  width:calc(100px * var(--container-cqw));
  height:calc(3px * var(--container-cqw));
  background: currentColor;
  margin:auto;
}

/** カード型コンテンツ */
.cards-wrap{
  --card-base-bgcolor: #f2f2f2;
  --card-base-main-color: currentColor;
  max-width: 100%;
}

.card{
  position:relative;
  width: 100%;
}

.card-wrap{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap:calc(3rem * var(--container-cqw));
  margin: calc(3rem * var(--container-cqw)) 0;
  position: relative;
}

.card-inner{
  background: #fff;
  border:1px solid var(--container-primary-color);
  border-radius: calc(16px * var(--container-cqw));
  width: 100%;
  height: 100%;
  position:relative;
  overflow: hidden;
}

.card-content{
  height: 100%;
  position: relative;
}

.card-inner span.icon{
  position: absolute;
  right: calc(-3rem * var(--container-cqw));
  top: calc(-3rem * var(--container-cqw));
  z-index: 0;
}

.card-inner span.icon svg{
  stroke-width: calc(0.2 * var(--container-cqw));
  width: calc(200px * var(--container-cqw));
  height: auto;
}

.card-content a{
    display: flex;
    flex-direction: column;
    gap:calc(0.5rem * var(--container-cqw));
    height: inherit;
    padding:calc(1rem * var(--container-cqw));
    text-decoration: none;
    color: currentColor;
}

.card-content .title{
  font-size:calc(1.35rem * var(--container-cqw));
}

.card-content .sub-title{
  font-size:calc(1rem * var(--container-cqw));
  margin-bottom: calc(1rem * var(--container-cqw));
}

.card-content .link{
  display: flex;
  align-items: center;
  gap:calc(0.25rem * var(--container-cqw));
  margin-top:auto;
  font-size:calc(1.1rem * var(--container-cqw));
  text-decoration: none;
  line-height: 0;
}

.card-content .link svg{
  width:calc(1.5rem * var(--container-cqw));
  height: auto;
}

/** サイズとか */
.w-80{
  width: 80%;
}
.w-60{
  width: 60%;
}
.w-40{
  width: 40%;
}
.w-30{
  width: 30%;
}

.mb-20{
  margin-bottom:1rem;
}

.my-20{
  margin-top:1rem;
  margin-bottom:1rem;
}

.rect{
  height: calc(16px * var(--container-cqw));
  border-radius: calc(6px * var(--container-cqw));
}

.paragraph{
  height: calc(8px * var(--container-cqw));
  border-radius: calc(3px * var(--container-cqw));
}

.absolute{
  position: absolute;
}

.center{
  text-align: center;
}

.overflow-hidden{
  overflow: hidden;
}

.opacity-0{
  opacity: 0;
}

.justify-center{
  justify-content: center;
}

.justify-between{
  justify-content: space-between;
}

.stripe{
  background-image: linear-gradient(-45deg, transparent 25%, color-mix(in srgb, var(--cube-color) 50%, transparent) 25%, color-mix(in srgb, var(--cube-color) 50%, transparent) 50%, transparent 50%, transparent 75%, color-mix(in srgb, var(--cube-color) 50%, transparent) 75%, color-mix(in srgb, var(--cube-color) 50%, transparent));
  background-size: 4px 4px;
}

.dot-intro-bg {
  position: absolute;
  width: 100%; height: 100%;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--cube-color) 50%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  animation: dotFlow 4s linear infinite;
  opacity: 0;
}

.dot-bg {
  width: 100%; height: 100%;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--cube-color) 50%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  animation: dotFlow 4s linear infinite;
}

.grid-columns-1{
  grid-template-columns: repeat(1, 1fr);
}

.card-dot-bg::before{
  content: '';
  width: 100%; height: 100%;
  position: absolute;
  right:calc(-1rem * var(--container-cqw));
  bottom:calc(-1rem * var(--container-cqw));
  background-image: radial-gradient(circle, color-mix(in srgb, var(--cube-color) 50%, transparent) 1px, transparent 1px);
  background-size: calc(6px * var(--container-cqw)) calc(6px * var(--container-cqw));
  border-radius: calc(16px * var(--container-cqw));
  animation: dotFlow 4s linear infinite;
}

/** cube付きタイトル */
.cube-title{
  --cube-title-base-bgcolor: #f2f2f2;
  --cube-title-base-main-color: #bbb;
  text-align: center;
}

.cube-title-inner{
  position:relative;
}

.cube-title .lead{
  font-size: calc(2rem * var(--container-cqw));
}

.cubes{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(3.5rem * var(--container-cqw));
  margin-bottom: calc(2rem * var(--container-cqw));
}

.cube-wrap{
  perspective: 800px;
  transform-style: preserve-3d;
}

.cubes span{
  line-height: 0;
}

.cubes .front{
  background:#308cca29;
}

.cubes-intro{
  --perspective:1100px;
  position: relative;
}

.cube-intro{
  --cube-width:7.5rem;
  width: calc(var(--cube-width) * var(--container-cqw));
  height: calc(var(--cube-width) * var(--container-cqw));
  --depth: calc(var(--cube-width) * var(--container-cqw) / 2 * (1 - var(--depth-progress)));
  inset: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
  margin: auto;
}

.cube-header,
.cube-hero {

  width: calc(
    (
      (var(--cube-width) * var(--container-cqw)) * (1 - var(--front-progress))
      + 60% * var(--front-progress)
    )
    * (1 - var(--front-progress-2))
    + 100% * var(--front-progress-2)
  );

  height: calc(
    (var(--cube-width) * var(--container-cqw)) * (1 - var(--height-progress))
    + var(--dock-final-height) * var(--height-progress)
  );

}

.cube-header{
  --tx: 0;
  --ty: -25vh;
  --rx: -25deg;
  --ry: 35deg;

  --dock-final-height: var(--dock-height);
  --dock-final-ty: calc(var(--dock-height) / 2 - 50vh);

  transform:
    perspective(var(--perspective))
    translate(
      var(--tx),
      calc(
        (var(--ty) * var(--container-cqw)) * (1 - var(--pos-progress))
        + var(--dock-final-ty) * var(--pos-progress)
      )
    )
    rotateY(var(--ry))
    rotateX(var(--rx));
}

.cube-hero{
  --tx: 30vh;
  --ty: -12vh;
  --rx: 35deg;
  --ry: 25deg;

  --dock-final-height: calc(100vh - var(--dock-height));
  --dock-final-ty: calc(var(--dock-height) / 2); /* headerの半分だけ下にずらす = ちょうど下端が接する */

  transform:
    perspective(var(--perspective))
    translate(
      calc(var(--tx) * var(--container-cqw)),  /* heroはcqwスケールが必要 */
      calc(
        (var(--ty) * var(--container-cqw)) * (1 - var(--pos-progress))
        + var(--dock-final-ty) * var(--pos-progress)
      )
    )
    rotateY(var(--ry))
    rotateX(var(--rx));
}

.cube-features{
  --tx: -24vh;
  --ty: -13vh;
  --rx: 25deg;
  --ry: 35deg;

    width: calc(
    (
      (var(--cube-width) * var(--container-cqw)) * (1 - var(--front-progress))
      + 60% * var(--front-progress)
    )
    * (1 - var(--front-progress-2))
    + 100% * var(--front-progress-2)
  );

  transform: perspective(var(--perspective)) translate(calc(var(--tx) * var(--container-cqw)), calc(var(--ty) * var(--container-cqw))) rotateY(var(--ry)) rotateX(var(--rx));
}

.cube-cta{
  --tx: 24vh;
  --ty: 24vh;
  --rx: -15deg;
  --ry: 40deg;

    width: calc(
    (
      (var(--cube-width) * var(--container-cqw)) * (1 - var(--front-progress))
      + 60% * var(--front-progress)
    )
    * (1 - var(--front-progress-2))
    + 100% * var(--front-progress-2)
  );

  transform: perspective(var(--perspective)) translate(calc(var(--tx) * var(--container-cqw)), calc(var(--ty) * var(--container-cqw))) rotateY(var(--ry)) rotateX(var(--rx));
}

.cube-footer{
  --tx: -24vh;
  --ty: 16vh;
  --rx: -15deg;
  --ry: -40deg;

    width: calc(
    (
      (var(--cube-width) * var(--container-cqw)) * (1 - var(--front-progress))
      + 60% * var(--front-progress)
    )
    * (1 - var(--front-progress-2))
    + 100% * var(--front-progress-2)
  );

  transform: perspective(var(--perspective)) translate(calc(var(--tx) * var(--container-cqw)), calc(var(--ty) * var(--container-cqw))) rotateY(var(--ry)) rotateX(var(--rx));
}

.cube-s{
  --cube-width:2rem;
  width: calc(var(--cube-width) * var(--container-cqw));
  height: calc(var(--cube-width) * var(--container-cqw));
  --depth: calc(var(--cube-width) * var(--container-cqw) / 2);
}

.cube-m{
  --cube-width:3.5rem;
  width: calc(var(--cube-width) * var(--container-cqw));
  height: calc(var(--cube-width) * var(--container-cqw));
  --depth: calc(var(--cube-width) * var(--container-cqw) / 2);
}

.cube-title-left{
  transform: translate(0px, 0px) rotateY(-30deg) rotateX(25deg);
}

.cube-title-center{
  transform: translate(0px, 0px) rotateY(30deg) rotateX(22deg)
}

.cube-title-right{
  transform: translate(0px, 0px) rotateY(35deg) rotateX(-25deg);
}

.cube-s svg{
  stroke-width: calc(1.75 * var(--container-cqw));
  width: calc(1.5rem * var(--container-cqw));
  height: auto;
}

.cube-m svg{
  stroke-width: calc(1 * var(--container-cqw));
  width: calc(3rem * var(--container-cqw));
  height: auto;
}

/** dotFlowアニメーション */
@keyframes dotFlow {
  from { background-position: 0 0; }
  to   { background-position: -24px -24px; }
}

@keyframes Orbit {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* scene01 */
.scene {
  inset: 0;
  width: 100%;
  perspective: 2000px;
  overflow: hidden;
}

.scene-01-01,
.cube-object {
  opacity: 0;
}

.scene-01-01 .hero{
  display: flex;
  flex-direction: column;
  gap:calc(1rem * var(--container-cqw));
}

.scene-01-01 .hero .logo{
  width: calc(50% * var(--container-cqw));
  margin:auto;
}

.scene-01-01 .hero .logo svg{
  fill:currentColor;
  stroke-width: 8;
}

/* Observerがintroを操作している間、ページ本体のスクロールを止める */
body.intro-locked {
  overflow: hidden;
  height: 100vh;
}

#header,
.footer-bottom-right-content{
  opacity: 0;
}

.cube-object{
  position: fixed;
  bottom:0;
  right:0;
}

.scene-intro {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  perspective: 2000px;
  overflow: hidden;
  z-index: 10; /* scene-01-01より手前にしておく */
}

/* scene02 */
/** ウィンドウ */
.window-menu{
  top:-10px;
  transform: rotate(-15deg);
}

.window-widget{
  top:10px;
  transform: rotate(6deg);
}

.window-customizer{
  bottom:-10px;
  grid-column: 1 / -1;
  justify-self: center;
  transform: rotate(-5deg);
  width:50%;
}

/** メニュー */
.menu-items{
  display:flex;
  flex-direction:column;
  gap: calc(20px * var(--container-cqw));
}

.menu-item{
  display:flex;
  align-items:center;
  gap: calc(8px * var(--container-cqw));
  border-radius: calc(4px * var(--container-cqw));
}

.menu-item.sub{
  padding-left: calc(36px * var(--container-cqw));
}

.menu-item .icon{
  width: calc(16px * var(--container-cqw));
  height: calc(16px * var(--container-cqw));
  line-height: 0;
  flex-shrink: 0;
}

.menu-item .menu-name{
  flex:1;
  height: calc(16px * var(--container-cqw));
  background:var(--container-primary-color);
  border-radius: calc(4px * var(--container-cqw));
}

/** ウィジェット */
.widget-items{
  display:flex;
  flex-direction:column;
  gap: calc(16px * var(--container-cqw));
}

.widget-item{
  align-items:center;
  border:1px solid var(--container-primary-color);
  border-radius: calc(4px * var(--container-cqw));
}

.widget-item .icon{
  background: var(--cube-color);
  color:#fff;
  height: calc(20px * var(--container-cqw));
  display: flex;
  align-items: center;
  line-height:0;
  flex-shrink: 0;
}

.widget-item .icon svg{
  height: calc(12px * var(--container-cqw));
}

.widget-name{
  height: calc(8px * var(--container-cqw));
  background: var(--container-primary-color);
  margin: calc(8px * var(--container-cqw)) calc(12px * var(--container-cqw));
  border-radius: calc(4px * var(--container-cqw));
}

/** カスタマイザー */
.window-customizer .window-content{
  display:flex;
  gap: calc(16px * var(--container-cqw));
  padding: calc(12px * var(--container-cqw));
}

.customizer-items{
  display:flex;
  flex-basis: 40%;
  flex-direction:column;
  gap: calc(16px * var(--container-cqw));
}

.customizer-item{
  display:flex;
  gap: calc(8px * var(--container-cqw));
  justify-content: space-between;
}

.customizer-item .icon{
  width: calc(16px * var(--container-cqw));
  height: calc(16px * var(--container-cqw));
  line-height: 0;
}

.customizer-preview{
  flex:1;
  border:1px solid var(--container-primary-color);
  border-radius: calc(8px * var(--container-cqw));
}

.preview-content{
  padding: calc(12px * var(--container-cqw));
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--container-cqw));
}

.preview-l{
  width:100%;
  background: var(--container-primary-color);
  height: calc(20px * var(--container-cqw));
  border-radius: calc(4px * var(--container-cqw));
}

.preview-m{
  width:80%;
  background: var(--container-primary-color);
  height: calc(12px * var(--container-cqw));
  border-radius: calc(4px * var(--container-cqw));
}

.preview-s{
  width:60%;
  background: var(--container-primary-color);
  height: calc(8px * var(--container-cqw));
  border-radius: calc(4px * var(--container-cqw));
}

.customizer-name{
  height: calc(16px * var(--container-cqw));
  background: var(--container-primary-color);
  border-radius: calc(4px * var(--container-cqw));
}

.grid-wrap{
  --grid-base-bgcolor: #f2f2f2;
  --grid-base-main-color: #bbb;
  max-width: 100%;
  container-type: inline-size;
}

.grid-items{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: calc(1.5rem * var(--container-cqw)) 0;
}

.grid-items div{
  background:#eee;
  width: 100%;
  border:1px solid #000;
}

.grid-customizer {
  grid-column: 1 / -1;
  justify-self: center;
  width:50% !important;
  transform:rotate(10deg);
}

/* scene03 */
.scene-03-01 .window-wrap{
  margin: calc(7rem * var(--container-cqw)) 0;
}

/** エディターウィンドウ */
.editor-header-php{
    top:calc(-1rem * var(--container-cqw));
    left:calc(-4rem * var(--container-cqw));
    transform: rotate(-15deg);
}

.editor-footer-php{
    left: calc(15rem * var(--container-cqw));
    top: calc(-4rem * var(--container-cqw));
    transform: rotate(5deg);
}

.editor-archive-php{
  left: calc(10rem * var(--container-cqw));
  top: calc(3rem * var(--container-cqw));
  transform: rotate(-10deg);
}

.editor-404-php{
  right: calc(-4rem * var(--container-cqw));
  top: calc(2rem * var(--container-cqw));
  transform: rotate(15deg);
}

.editor-search-php{
  left: calc(4rem * var(--container-cqw));
  top: calc(13rem * var(--container-cqw));
  transform: rotate(-15deg);
}

/* scene04 */

.scene-04-02 .window{
  position: absolute;
}

/** エディターウィンドウ */
.block-editor-content{
  display: flex;
  flex-direction: column;
  gap:calc(1rem * var(--container-cqw));
  width: 100%;
}

.block-editor-content .rect{
  height:calc(80px * var(--container-cqw));
}

.block-editor-content .rect-s{
  position: relative;
  height:calc(32px * var(--container-cqw));
}

.block-editor-content .rect-m{
  height:calc(24px * var(--container-cqw));
}

.block-editor-controll{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.controll-right{
  font-size:calc(0.95rem * var(--container-cqw));
  padding: 0.1rem;
  background: var(--container-primary-color);
  border-radius: calc(6px * var(--container-cqw));
}

.controll-right span{
  color: #fff;
  padding: 0.2rem 0.5rem;
}

.block-editor-controll svg,
.block-editor-toolbar svg{
  stroke-width: 2;
  width: calc(24px * var(--container-cqw));
  height: calc(24px * var(--container-cqw));
  line-height: 0;
}

.block-editor-toolbar{
  position: absolute;
  top:calc(-50px * var(--container-cqw));
  fill:currentColor;
  background:#fff;
  display: flex;
  line-height: 0;
  border:calc(1px * var(--container-cqw)) solid currentColor;
}

.block-editor-toolbar > div{
  padding: calc(0.5rem * var(--container-cqw));
}

.block-editor-toolbar > div:not(:last-child){
  border-right:calc(1px * var(--container-cqw)) solid currentColor;
}  

.block-editor-toolbar .toolbar-center{
  display: flex;
  gap:calc(0.5rem * var(--container-cqw));
}

/* scene05 */

/** パターン */
.patterns{
  display: flex;
  flex-direction: column;
  gap: calc(1rem * var(--container-cqw));
  justify-content: space-between;
  font-size:calc(1rem * var(--container-cqw));
  position: relative;
}

.pattern{
  border:calc(1px * var(--container-cqw)) solid currentColor;
  border-radius: calc(12px * var(--container-cqw));
  background:#fff;
  padding:calc(0.5rem * var(--container-cqw));
}

.pattern-features{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:calc(1rem * var(--container-cqw));
}

.pattern-media-text{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap:calc(1rem * var(--container-cqw));
}

.pattern{
  width:100%;
}

.pattern-01{
  transform: translate(calc(-200vw * var(--container-cqw)), calc(-30vh * var(--container-cqw))) rotate(-5deg);
}

.pattern-01 .rect-s{
  height:calc(50px * var(--container-cqw));
}

.pattern-02{
  transform: translate(calc(-200vw * var(--container-cqw)), calc(60vh * var(--container-cqw))) rotate(-6deg);
}

.pattern-02 .rect-l{
  height:calc(70px * var(--container-cqw));
}

.pattern-03{
  transform: translate(calc(200vw * var(--container-cqw)), calc(40vh * var(--container-cqw))) rotate(18deg);
}

.pattern-03 .rect-l{
  height:calc(70px * var(--container-cqw));
}

.pattern-03 .right-col{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pattern-03 .paragraph{
  height:calc(16px * var(--container-cqw));
}

/* scene06 */

.cube-plugins-inner{
  perspective: 1100px;
  width: 100%;
}

.cube-group{
  transform-style: preserve-3d;
  transform: rotateY(30deg) rotateX(-22deg); /* 視点角度はここに残す */
}

/* 公転の軸。cube01と同じ原点(0,0,0)に置くのがポイント */
.orbit-wrap{
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateY(0deg); /* ← ここを手動で変えて確認する */
  width: 100%;
  animation: Orbit 30s linear infinite;
}

.cube-hakoniwa{
  transform: translate3d(0, 0, 0);
  animation: Orbit 50s linear infinite;
}

/* オフセット(軌道半径)はcube02側に残す */
.cube-tools{
  transform: translate3d(calc(400px * var(--container-cqw)), 0, 0);
}

.cube-blocks{
  transform: translate3d(calc(-400px * var(--container-cqw)), 0, 0);
}

/* scene07 */


/* scene08 */

/** カード型コンテンツ */
.cards-wrap.scroll-horizontal .card{
  flex: 0 0 auto;
  width: 80%; /* 1枚あたりの幅。お好みで */
}

.card-wrap.case{
  display: flex;
  flex-wrap: nowrap;
  min-height: calc(40vh * var(--container-cqw));
}

.card-inner{
  border:1px solid var(--container-primary-color);
  border-radius: calc(16px * var(--container-cqw));
  width: 100%;
  height: 100%;
  position:relative;
  overflow: hidden;
}

.card-content{
  height: 100%;
  position: relative;
}

.card-inner span.icon{
  position: absolute;
  right: calc(-4rem * var(--container-cqw));
  top: calc(-4rem * var(--container-cqw));
  z-index: 0;
}

.card-inner span.icon svg{
  stroke-width: calc(0.275 * var(--container-cqw));
  width: calc(200px * var(--container-cqw));
  height: auto;
}

.card-content a{
    display: flex;
    flex-direction: column;
    gap:calc(0.5rem * var(--container-cqw));
    height: inherit;
    padding:calc(1rem * var(--container-cqw));
    text-decoration: none;
}

.card-content .link{
  display: flex;
  align-items: center;
  gap:calc(0.25rem * var(--container-cqw));
  margin-top:auto;
  font-size:calc(1.1rem * var(--container-cqw));
  text-decoration: none;
  line-height: 0;
}

.card-content .link svg{
  width:calc(1.5rem * var(--container-cqw));
  height: auto;
}

.case-apply{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:calc(1rem * var(--container-cqw));
  height: 100%;
}

.site-thumb{
  aspect-ratio: 16 / 9;
  border-radius: calc(16px * var(--container-cqw));
  padding: calc(1rem * var(--container-cqw));
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-thumb img{
  max-width:240px;
}

/* scene09 */

/** pluginのシーン */
.cube-plugins-wrap{
  display: flex;
  min-height: calc(30vh * var(--container-cqw));
  margin: calc(5rem * var(--container-cqw)) 0;
  position: relative;
  justify-content: center;
  align-items: center;
}

.cube-hakoniwa{
  width: calc(10rem * var(--container-cqw));
  height: calc(10rem * var(--container-cqw));
  --depth: calc(10rem * var(--container-cqw) / 2);
  margin:auto;
  position: absolute;
  inset:0;
}

.cube-tools{
  width: calc(6rem * var(--container-cqw));
  height: calc(6rem * var(--container-cqw));
  --depth: calc(6rem * var(--container-cqw) / 2);
  margin:auto;
  position: absolute;
  inset:0;
}

.cube-blocks{
  width: calc(6rem * var(--container-cqw));
  height: calc(6rem * var(--container-cqw));
  --depth: calc(6rem * var(--container-cqw) / 2);
  margin:auto;
  position: absolute;
  inset:0;
}