/*
Theme Name: OHH! Child
Template: twentythirteen
Version: 1.0
Author: Kanegae Takanori
Author URI: https://kanegaetakanori.com
Text Domain: ohh-child
*/

/* 選択時の背景色 */
::selection {
    background:  var(--hero-color, var(--top-page-color));
}
::-moz-selection {
    background:  var(--hero-color, var(--top-page-color));
}

/* -------------------------
   page fade
------------------------- */

#page.intro-loading {
  opacity: 0;
}

#page.intro-content {
  opacity: 1;
  transition: opacity 0.6s ease;
}

#page.intro-done {
  opacity: 1;
}


html:has(body.home),
body.home {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

body,
button,
input,
select,
textarea {
	font-family: 'Inter', 'Noto Sans JP', sans-serif;
}

body {
    color:var(--body-text-color);
    letter-spacing: 0.08em;
    font-size: 14px;
    line-height: 1.8;
}
a {
  color:var(--body-link-color);
  text-decoration: none;
}
a:visited {
  color:var(--body-link-color);
}
a:active,
a:hover {
  color:var(--body-link-hover-color);
}
a:hover {
	text-decoration: underline;
}
.entry-title a {
	color:var(--body-text-color);
}
.entry-title a:hover {
	color:var(--body-text-color);
}


h1, h2, h3, h4, h5, h6 {
    clear: both;
		font-family: 'Inter', 'Noto Sans JP', sans-serif;
    line-height: 1.3;
}
h1 {
    font-size: 16px;
    margin: 20px 0;
}
h2 {
    font-size: 14px;
    margin: 20px 0;
}
h3 {
    font-size: 11px;
    margin: 20px 0;
}
h4 {
    font-size: 10px;
    margin: 25px 0;
}
h5 {
    font-size: 10px;
    margin: 30px 0;
}
h6 {
    font-size: 10px;
    margin: 36px 0;
}
h2.entry-title {
	font-size: 18px;
}
/*=========================================================================
    Utility Classes & Clearfix
==========================================================================*/
/* マージントップのユーティリティクラス */
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px; }
.mt60 { margin-top: 60px; }
.mt70 { margin-top: 70px; }
.mt80 { margin-top: 80px; }
.mt90 { margin-top: 90px; }
.mt100 { margin-top: 100px; }
.mt110 { margin-top: 110px; }
.mt120 { margin-top: 120px; }
.mt130 { margin-top: 130px; }
.mt140 { margin-top: 140px; }
.mt150 { margin-top: 150px; }
.mt160 { margin-top: 160px; }
.mt170 { margin-top: 170px; }
.mt180 { margin-top: 180px; }
.mt190 { margin-top: 190px; }
.mt200 { margin-top: 200px; }

/* clearfix（IE対策含む） */
.clearfix:before {
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    content: ".";
}
.clearfix {
    min-height: 1px; /* IE6、7対策 */
}
* html .clearfix {
    height: 1px;
    /* MAC IE5.x対策 */
    height: auto;
    overflow: hidden;
}

.site-header .home-link {
	margin: 0;
	max-width: 100%;
	min-height: 1px;
	padding: 0;
}
.logo-area {
	width: 100%;
	max-width: clamp(200px, 20vw, 270px);;
}
ul.nav-menu, div.nav-menu > ul {
margin: 0;
padding: 0;
}
.site-footer {
background-color: transparent;
color: var(--top-page-color);
font-size: 14px;
text-align: left;
}
.site-footer a, .site-footer a:hover {
color: var(--top-page-color);
}


.logo-area{
	position:relative;
	display:inline-block;
	overflow:hidden;
}

.logo-svg{
	color:var(--top-page-color);
	display:block;
}

.logo-base{
	fill:currentColor;
}

.navbar {
background-color: transparent;
margin: 0 auto;
max-width: 1600px;
width: 100%;
}
.main-navigation {
max-width: 100%;
}
.nav-menu li:hover > a,
.nav-menu li a:hover,
.nav-menu li:focus > a,
.nav-menu li a:focus {
	background-color: transparent;
	color: var(--top-page-color);
}
.home .nav-menu li a{
	position:relative;
	color:transparent;
	display:block;
	font-size:15px;
	line-height:1;
	padding: 15px 26px 15px 6px;
	letter-spacing: 2px;
	text-decoration:none;

	background-image:linear-gradient(
		90deg,
		var(--top-page-color) 0%,
		var(--top-page-color) 42%,
		#fff 50%,
		var(--top-page-color) 58%,
		var(--top-page-color) 100%
	);
	background-size:300% 100%;
	background-position:100% 0;

	-webkit-background-clip:text;
	background-clip:text;

	animation:menu-text-shine 2.2s cubic-bezier(.4,0,.2,1) .2s 1;
}
.nav-menu li a{
	position:relative;
	color: var(--top-page-color);
	display:block;
	font-size:15px;
	line-height:1;
	padding: 15px 26px 15px 6px;
	letter-spacing: 2px;
	text-decoration:none;
	text-transform: capitalize;
}
.nav-menu li a:hover{
	animation:menu-text-shine-hover .8s ease-out 1;
}

@keyframes menu-text-shine{
	0%{
		background-position:100% 0;
	}
	100%{
		background-position:0 0;
	}
}

@keyframes menu-text-shine-hover{
	0%{
		background-position:100% 0;
	}
	100%{
		background-position:0 0;
	}
}
/*試し*/
.glitch-hover{
	position:relative;
	display:inline-block;
	overflow:hidden;
	cursor:pointer;
}

.glitch-hover img{
	display:block;
	width:100%;
	height:auto;
}

.glitch-hover canvas{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	display:none;
	pointer-events:none;
}

.glitch-wrap{
	position:fixed;
	width:100%;
	height:100vh;
	top:0;
	left:0;
	display:flex;
	align-items:center;
	justify-content:center;
}

/* center：横65%、中央 */
.glitch-wrap.hero-center .glitch-hover{
	width:65%;
}

.glitch-wrap.hero-center .glitch-hover img,
.glitch-wrap.hero-center .glitch-hover canvas{
	width:100% !important;
	height:auto !important;
}

/* vcenter：縦画像中央、切り抜きなし */
.glitch-wrap.hero-vcenter .glitch-hover img,
.glitch-wrap.hero-vcenter .glitch-hover canvas{
	max-width:100vw;
	max-height:100vh;
	width:auto !important;
	height:auto !important;
}

/*.glitch-wrap.hero-right{
	padding:10vh 10vw 10vh 0;
	box-sizing:border-box;
	justify-content:flex-end;
	align-items:center;
}*/

.glitch-wrap.hero-right {
	padding: 10vh 0;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
}

.glitch-wrap.hero-right .glitch-hover img,
.glitch-wrap.hero-right .glitch-hover canvas{
	max-width:100%;
	max-height:80vh;
	width:auto !important;
	height:auto !important;
	display:block;
}

/* right80：画像幅80%、右寄せ */
.glitch-wrap.hero-right80{
	justify-content:flex-end;
}

.glitch-wrap.hero-right80 .glitch-hover{
	width:80%;
}

.glitch-wrap.hero-right80 .glitch-hover img,
.glitch-wrap.hero-right80 .glitch-hover canvas{
	width:100% !important;
	height:auto !important;
}

/* cover：画面いっぱい */
.glitch-wrap.hero-cover{
	overflow:hidden;
}

.glitch-wrap.hero-cover .glitch-hover{
	width:100vw;
	height:100vh;
}

.glitch-wrap.hero-cover .glitch-hover img,
.glitch-wrap.hero-cover .glitch-hover canvas{
	width:100% !important;
	height:100% !important;
	object-fit:cover;
	display:block;
}


/* full：横100％・上下10％あけて中央 */
.glitch-wrap.hero-full{
	padding:10vh 0;
	box-sizing:border-box;
	overflow:hidden;
}

.glitch-wrap.hero-full .glitch-hover{
	width:100%;
	height:80vh;
}

.glitch-wrap.hero-full .glitch-hover img,
.glitch-wrap.hero-full .glitch-hover canvas{
	width:100% !important;
	height:100% !important;
	object-fit:cover;
	display:block;
}


/* fullsafe：横80％・上下10％あけて中央 */
.glitch-wrap.hero-fullsafe{
	padding:10vh 0;
	box-sizing:border-box;
	overflow:hidden;
}

.glitch-wrap.hero-fullsafe .glitch-hover{
	width:80%;
	height:80vh;
}

.glitch-wrap.hero-fullsafe .glitch-hover img,
.glitch-wrap.hero-fullsafe .glitch-hover canvas{
	width:100% !important;
	height:100% !important;
	object-fit:cover;
	display:block;
}


.site {
background-color: #fff;
border-left: 0 none;
border-right: 0 none;
margin: 0 auto;
max-width: 100%;
width: 100%;
}
header, footer {
	z-index: 1;
}

.home .site-footer{
	color:var(--hero-color, var(--top-page-color));
}

.home .site-footer a,
.home .site-footer a:hover{
	color:var(--hero-color, var(--top-page-color));
}

.home.hero-color-light .logo-svg{
	color:rgba(var(--hero-color-rgb, var(--top-page-color-rgb)),0.9);
}
.home .logo-svg{
	color:var(--hero-color, var(--top-page-color));
}

.home .nav-menu li:hover > a,
.home .nav-menu li a:hover,
.home .nav-menu li:focus > a,
.home .nav-menu li a:focus{
	color:var(--hero-color, var(--top-page-color));
}

.home .nav-menu li a{
	background-image:linear-gradient(
		90deg,
		var(--hero-color, var(--top-page-color)) 0%,
		var(--hero-color, var(--top-page-color)) 42%,
		#fff 50%,
		var(--hero-color, var(--top-page-color)) 58%,
		var(--hero-color, var(--top-page-color)) 100%
	);
}

.site-title {
	font-size: 60px;
	font-weight: bold;
	line-height: 1;
	margin: 0;
	padding: 0;
}
.home .site-header {
position: fixed;
	left: min(6vw, 100px);
	top: 45%;
	transform: translateY(-50%);
}
.site-info {
	margin: 0;
	max-width: 100%;
	padding: 0 0 30px;
	width: 100%;
}
.home .site-info {
	padding: 00;
}
.home .site-footer {
	text-align: left;
	position: fixed;
	bottom: 2vw;
	left: min(6vw, 100px);
}
.nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a {
color: var(--top-page-color);
font-style: normal;
}


/* =========================
   オーバーレイの設定
========================= */
.nav-overlay{
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
  z-index: 100;
}

.nav-open .nav-overlay{
  opacity: 1;
  visibility: visible;
}
.site-nav{
  position: fixed; /* 既にあるが念のため */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  padding: 60px 8% 40px;
  background: rgba(249,249,249,0.98);
  opacity: 0;
  visibility: hidden;
  transform: translateX(28px);
  z-index: 110;
  position: fixed; /* 既にあるが念のため */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-open .site-nav{
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.nav-toggle{
  position: fixed;
  top: 2vh;
  right: 2%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  z-index: 120;
  background-color: transparent;
}
.nav-toggle span {
  position: absolute;
  left: 50%;
  width: 50px;
  height: 2px;
  background: var(--top-page-color);
  transform: translateX(-50%);
  transition: transform .3s ease;
}
.home .nav-toggle span {
  background: var(--hero-color, var(--top-page-color));
}
.nav-toggle .top{
  top: 10px;
}

.nav-toggle .bottom{
  top: 24px;
}


html.nav-open,
body.nav-open,
html.intro-done.show-scroll.nav-open,
body.intro-done.show-scroll.nav-open{
  overflow: hidden !important;
}
/* イントロが動いてる間はメニューUIを出さない/触らせない */
.intro-loading .nav-toggle,
.intro-loading .site-nav,
.intro-loading .nav-overlay,
.intro-content .nav-toggle,
.intro-content .site-nav,
.intro-content .nav-overlay{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.nav-toggle{
  border: none;
}
.nav-toggle:focus,
.nav-toggle:focus-visible{
  outline: none;
}
.nav-open .nav-toggle .top{
  transform: translateX(-50%) rotate(30deg);
}

.nav-open .nav-toggle .bottom{
  transform: translateX(-50%) rotate(-30deg);
}
.nav-open .nav-toggle .top,
.nav-open .nav-toggle .bottom{
  top: 17px;
  right: 3%;
}
/* 2枚目（背面スライド板） */
.site-nav{
  transition: opacity .8s cubic-bezier(.4,0,.2,1),
            transform .8s cubic-bezier(.4,0,.2,1),
            visibility 0s linear .8s;
}

/* ✅ 開く時だけ “余韻” を足す */
.nav-open .site-nav{
  transition: opacity 1.0s cubic-bezier(.4,0,.2,1),
            transform 1.2s cubic-bezier(.4,0,.2,1),
            visibility 0s;
}
.site-nav::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(235,235,235,0.95);
  /*background:rgba(var(--hero-color-rgb, var(--top-page-color-rgb)),0.95);*/
  transform: translateX(34px); /* ✅ ずらし量を増やして “動いた感” */
  opacity: 1;                 /* ✅ 開く瞬間に背面板が少し見える */
  z-index: 0;
  transition:
    transform 1.2s cubic-bezier(0.25,0.1,0.25,1),
    opacity .55s ease;
}

/* ✅ 開く：背面板は少し遅れて消える（余韻） */
.nav-open .site-nav::before{
  transform: translateX(0);
  opacity: 0;
  transition-delay: 0s, .35s; /* transformはすぐ / opacityは少し余韻 */
}
/* メニュー中身を前面へ */
.site-nav > *{
  position: relative;
  z-index: 1;
}
.nav-open .site-nav{
  background-color: rgba(255,255,255,0.55);
}

html.nav-open,
body.nav-open,
html.intro-done.show-scroll.nav-open,
body.intro-done.show-scroll.nav-open{
  overflow: hidden !important;
}
button, input[type="submit"], input[type="button"], input[type="reset"] {
	background: transparent;
	border-bottom: 0 none;
	color: transparent;
	padding: 0;
	text-decoration: none;
}
button:hover, button:focus, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:focus, input[type="button"]:focus, input[type="reset"]:focus {
		background: transparent;
}
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
	background: transparent;
	border: none;
	border-top: 0 none;
	padding: 0;
}
/* home以外：ロゴ横にメニュー */
.is-sub-header{
  display: flex;
  align-items:flex-end;
  gap: 35px;
  padding: 40px 0;
}

.is-sub-header .logo-area{
  width: 100%;
  max-width: 160px;
}

.is-sub-header .navbar{
  margin: 0;
  width: auto;
}

.is-sub-header .nav-menu{
  display: flex;
  align-items: center;
}
.is-sub-header .nav-menu li a{
  padding-top: 0;
  padding-bottom: 0;
}
/*.is-sub-header .navbar{
  display: flex;
  align-items: center;
}
*/
.is-sub-header .main-navigation{
  display: flex;
  align-items:flex-end;
}

/*.is-sub-header .nav-menu{
  display: flex;
  align-items: center;
}*/

.page-in {
  width:min(90%, 1400px);
  margin:0 auto;
}
.entry-header, .entry-content, .entry-summary, .entry-meta {
	margin: 0 auto;
	max-width: 100%;
	width: 100%;
}
.info-line {
display: inline-block;
width: 25px;
height: 1px;
background:var(--body-text-color);
margin: 0 12px;
}

.info-post-list {
	width:min(90%, 1350px);
}
/* ===============================
   ohh GALLERY
   a有無で表示が変わらない完全版
================================ */
/* --------------------------------
   共通
-------------------------------- */
.ohh-gallery{
  display: grid;
  gap: 20px;
  margin: 20px 0;
}

.ohh-gallery__item{
  margin: 0;
}

/* 画像枠（ここだけ比率固定＆クロップ） */
.ohh-gallery__frame{
  width: 100%;
  overflow: hidden;
}

/* a があっても無くても同じ見た目 */
.ohh-gallery__link{
  display: block;
  width: 100%;
  height: 100%;
}
.item-hero .blocks-gallery-caption,
.item-hero figcaption{
  display:none;
}
/* 画像は枠を埋める */
.ohh-gallery__frame img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

/* キャプション（画像の外＝下に必ず出る） */
.ohh-gallery__caption{
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  line-height:1.6;
}
padding: 10px;

/* =====================================
   1 : FULL（横1枚）
===================================== */
.ohh-gallery--full{
  grid-template-columns: 1fr;
}
.ohh-gallery--full .ohh-gallery__frame{
  aspect-ratio: 2000 / 1333;
}

/* =====================================
   2 : 横2枚
===================================== */
.ohh-gallery--wide2{
  grid-template-columns: repeat(2, 1fr);
}
.ohh-gallery--wide2 .ohh-gallery__frame{
  aspect-ratio: 2000 / 1333;
}

/* =====================================
   3 : 縦2枚
===================================== */
.ohh-gallery--port2{
  grid-template-columns: repeat(2, 1fr);
}
.ohh-gallery--port2 .ohh-gallery__frame{
  aspect-ratio: 1333 / 2000;
}

/* =====================================
   4 : 正方形2枚
===================================== */
.ohh-gallery--sq2{
  grid-template-columns: repeat(2, 1fr);
}
.ohh-gallery--sq2 .ohh-gallery__frame{
  aspect-ratio: 1 / 1;
}

/* =====================================
   5 : 縦3枚
===================================== */
.ohh-gallery--port3{
  grid-template-columns: repeat(3, 1fr);
}
.ohh-gallery--port3 .ohh-gallery__frame{
  aspect-ratio: 1333 / 2000;
}

.page-in .entry-header {
	margin-bottom: 30px;
}

menu, ol, ul {
margin: 0;
padding: 0;
}
.side-location__title {
font-size: 16px;
letter-spacing: 0.12em;
margin-bottom: 20px;
font-weight: 500;
/*color:rgba(var(--hero-color-rgb, var(--top-page-color-rgb)),1);*/
}
/* ======================================
   side information
====================================== */

.side-info{
  margin-top: 140px;
}

.side-info__list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.side-info__item{
  margin: 0;
  padding: 0;
  border-bottom: 1px dotted #111;
}
.side-info__list li.side-info__item:last-child {
  border-bottom: none;
}
.side-info__link{
  display: grid;
  grid-template-columns: 60px 16px 180px 16px minmax(0, 1fr);
  align-items: center;
  column-gap: 0;
  padding: 14px 0;
  text-decoration: none;
  color: inherit;
}

.side-info__cat{
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  font-family: 'Inter', sans-serif;
  text-transform: capitalize;
}

.side-info__bar{
  text-align: center;
  font-size: 12px;
  line-height: 1;
  color: #888;
  font-family: 'Inter', sans-serif;
}

.side-info__date{
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
  text-align: center;
}

.side-info__title{
  min-width: 0;
  font-size: 14px;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 20px;
}

.side-info__more{
  margin-top:18px;
}

.side-info__more a{
  display: inline-block;
  padding: 5px 20px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-decoration: none;
  border: 1px solid rgba(var(--hero-color-rgb, var(--top-page-color-rgb)),1);
  border-radius: 999px;
  color: rgba(var(--hero-color-rgb, var(--top-page-color-rgb)),0.9);
  background: transparent;
  font-family: 'Inter', sans-serif;
  transition: all .25s ease;
}

.side-info__more a:hover{
  background:rgba(var(--hero-color-rgb, var(--top-page-color-rgb)),0.9);
  border-color:rgba(var(--hero-color-rgb, var(--top-page-color-rgb)),0.9);
  color: rgba(var(--hero-color-rgb, var(--top-page-color-rgb)),0.9);
}

.error404 main p {
font-size: 13px;
}
.side-info__item a {
	 color:var(--body-text-color);
}
.side-info__item a:hover {
	text-decoration: none;
	color: rgba(var(--hero-color-rgb, var(--top-page-color-rgb)),0.9);
}

.item-category__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.item-category__item {
  margin: 0;
}

.item-category__image img {
  width: 100%;
  height: auto;
  display: block;
}
.item-category-list {
	margin-top: 140px;
margin-bottom: calc(3 * var(--global--spacing-vertical));
}
h2.item-category__title {
font-size: 15px;
letter-spacing: 0.12em;
margin-bottom: 4px;
font-weight: normal;
}
.item-category {
margin-bottom: 40px;
overflow: hidden;
border-bottom: 1px solid #cdcdcd;
padding-bottom: 75px;
}
.item-category.item-category-last {
	border-bottom: 0 none;
}
.item-category__description p {
font-size: 13px;
}
/* =========================
   Footer menu
   - 1行のまま（縦積み禁止）
   - 塊ごと回転して左端fixed（Instagram / ORDINARY FITS方式）
   - spacer は横線（liで描く）
   - Login / Cart の「/」は menu-slash を付けた li だけ対象
========================= */

/* フッターメニューを左端に固定して縦に見せる（回転） */
.footer-navigation{
  position: fixed;
  left: 98%;
  top: 60%;
  transform: rotate(-90deg) translateX(-100%) translateY(-50%);
  transform-origin: left top;
  z-index: 99;
  font-size: 13px;
  letter-spacing: 0.2em;
  font-weight: 500;
}
/*.footer-navigation{
  position: fixed;
  right: 2%;
  top: 60%;
  transform: rotate(90deg) translateX(100%) translateY(-50%);
  transform-origin: right top;
  z-index: 99;
  font-size: 13px;
  letter-spacing: 0.2em;
  font-weight: 500;
}*/
/* “1行”を維持（縦積み禁止） */
.footer-navigation-wrapper{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  white-space: nowrap;
}
/* リンク見た目（共通） */
/* リンク見た目（共通） */
.footer-navigation-wrapper li a{
  display: inline-block;
  text-decoration: none;
  padding: 0;
  color:rgba(var(--hero-color-rgb, var(--top-page-color-rgb)),1);
  white-space: nowrap;
  text-transform: capitalize;
}

/* spacer（横線）：aは消して、liで線を描く */
.footer-navigation-wrapper .menu-spacer{
  width: 55px;
  height: 1px;
  background: rgba(var(--hero-color-rgb, var(--top-page-color-rgb)),1);
  margin: 0 12px;
  pointer-events: none;
}
.footer-navigation-wrapper .menu-spacer > a{
  display: none !important; /* 四角/文字の原因を断つ */
}

/* Login / Cart の「/」だけ（menu-slash を付けてる前提） */
.footer-navigation-wrapper .menu-slash{
  pointer-events: none;
}
.footer-navigation-wrapper .menu-slash a{
  text-decoration: none;
  margin: 0 6px;
}
.item-glitch-hover{
  position: relative;
  overflow: hidden;
}

.item-glitch-hover img{
  display: block;
  width: 100%;
  height: auto;
}

.item-glitch-hover canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.item-category.item-category--last {
	border-bottom: 0 none;
}
.home .site-header,
.home .nav-toggle,
.home .footer-navigation,
.home .site-footer,
.home .glitch-wrap {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.home.hero-ready .site-header,
.home.hero-ready .nav-toggle,
.home.hero-ready .footer-navigation,
.home.hero-ready .site-footer,
.home.hero-ready .glitch-wrap {
  opacity: 1;
}

.side-overlay-menu {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 30px;
}

.side-overlay-menu li {
  display: inline-flex;
  align-items: center;
  list-style: none;
}

.side-overlay-menu li:not(:last-child)::after {
  content: "/";
  margin: 0 10px;
  font-size: 16px;
}
.side-overlay-menu li a {
	color:var(--body-text-color);
	text-transform: capitalize;
	font-size: 16px;
letter-spacing: 0.12em;
font-weight: 500;
}
.side-overlay-menu li a:hover {
	color:var(--body-link-hover-color);
	text-decoration: none;
}

.related-items {
  margin: 60px 0;
}

.related-items__head {
  text-align: center;
  margin-bottom: 30px;
}

.related-items__title-en {
  font-size: 18px;
  letter-spacing: 0.12em;
  margin: 0 0 6px;
}

.related-items__title-ja {
  font-size: 13px;
  margin: 0;
}

.related-items__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.related-items__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* contact */
.contactbox-in {
    max-width: 70%;
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
padding-top: 130px;
}
.page-template-page-contact-php .contactbox-in input {
    border-style: none none solid;
    border-width: 1px;
    font-family: 'Rubik', sans-serif;
}
.page-template-page-contact-php .contactbox-in textarea {
	border: 1px solid #111;
}

.page-template-page-contact-php .contactbox-in input:focus,
.page-template-page-contact-php .contactbox-in textarea:focus {
    border: 1px solid #c5c5c5;
    outline: 0;
}
.contactbox-in .c-box {
    margin-bottom: 50px;
    overflow: hidden;
}
.c-box.c-ue .c-l {
    margin-bottom: 5px;
}
.c-box .c-l {
    float: left;
    width: 25%;
}
.c-box .c-r {
    float: right;
    width: 75%;
}
.page-template-page-contact-php .sen-yoko {
    border-bottom: 1.5px solid #000;
    width: 100%;
    max-width: 20px;
    margin-bottom: 40px;
}
.page-template-page-contact-php .contact-wrap {
    margin: 100px 0 60px;

}
.page-template-page-contact-php .contact-wrap h2 {
    font-weight: normal;
    text-transform: capitalize;
}
.page-template-page-contact-php .contact-wrap h2 span {
    font-weight: bold;

}
.page-template-page-contact-php .contact-wrap input {
    border-style: none none solid;
    border-width: 1px;
    font-family: 'Rubik', sans-serif;
}
.page-template-page-contact-php .contact-wrap input:focus,
.page-template-page-contact-php .contact-wrap textarea:focus {
    border: 1px solid #c5c5c5;
    outline: 0;
}
.contact-wrap .c-box {
    margin-bottom: 50px;
    overflow: hidden;
}
.c-box.c-ue {
    margin-top: 70px;
}
.c-box.c-ue.mtue {
    margin-top: 100px;
}
.mannaka {
    text-align: center;
}
div.wpcf7-mail-sent-ok {
    border: 2px solid #444;
}
div.wpcf7-mail-sent-ng {
    border: 2px solid #ff0000;
}
div.wpcf7-spam-blocked {
    border: 2px solid #444;
}
div.wpcf7-validation-errors {
    border: 2px solid #ff0000;
}
/* Buttons */
.sandbox {
    text-align: center;
}
.wpcf7-form input[type="submit"] {
    width:200px;
    margin: auto;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:focus {
    background: #cdcdcd!important; /* Old browsers */
    background: -webkit-linear-gradient(top, #000 0%, #000 100%)!important; /* Chrome 10+, Safari 5.1+ */
    background:   linear-gradient(to bottom, #000 0%, #000 100%)!important; /* W3C */
    border-bottom: 0px solid #000;
}
.page-template-page-contact-php .contactbox-in button,
.page-template-page-contact-php .contactbox-in input[type="submit"],
.page-template-page-contact-php .contactbox-in input[type="button"],
.page-template-page-contact-php .contactbox-in input[type="reset"] {
    background: #0068b6!important; /* Old browsers */
    background: -webkit-linear-gradient(top, #cdcdcd 0%, #cdcdcd 100%)!important; /* Chrome 10+, Safari 5.1+ */
    background:   linear-gradient(to bottom, #cdcdcd 0%, #cdcdcd 100%)!important; /* W3C */
    border: none;
    border-bottom: 0px solid #cdcdcd;
    border-radius: 0px;
    color: #fff;
    display: inline-block;
    padding: 11px 24px 10px;
    text-decoration: none;
    border-radius: 0 0 0 0;
}

.page-template-page-contact-php .contactbox-in button:hover,
.page-template-page-contact-php .contactbox-in button:focus,
.page-template-page-contact-php .contactbox-in input[type="submit"]:hover,
.page-template-page-contact-php .contactbox-in input[type="button"]:hover,
.page-template-page-contact-php .contactbox-in input[type="reset"]:hover,
.page-template-page-contact-php .contactbox-in input[type="submit"]:focus,
.page-template-page-contact-php .contactbox-in input[type="button"]:focus,
.page-template-page-contact-php .contactbox-in input[type="reset"]:focus {
    background: #cdcdcd!important; /* Old browsers */
    background: -webkit-linear-gradient(top, #000 0%, #000 100%)!important; /* Chrome 10+, Safari 5.1+ */
    background:   linear-gradient(to bottom, #000 0%, #000 100%)!important; /* W3C */
    border-bottom: 0px solid #000;
    outline: none;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

.page-template-page-contact-php .contactbox-in button:active,
.page-template-page-contact-php .contactbox-in input[type="submit"]:active,
.page-template-page-contact-php .contactbox-in input[type="button"]:active,
.page-template-page-contact-php .contactbox-in input[type="reset"]:active {
    background: #444!important; /* Old browsers */
    background: -webkit-linear-gradient(top, #cdcdcd 0%, #cdcdcd 100%)!important; /* Chrome 10+, Safari 5.1+ */
    background:   linear-gradient(to bottom, #cdcdcd 0%, #cdcdcd 100%)!important; /* W3C */
    border: none;
    border-top: 0px solid #cdcdcd;
    padding: 10px 24px 11px;
}
.page-template-page-contact-php .contactbox-in button, .page-template-page-contact-php .contactbox-in input, .page-template-page-contact-php .contactbox-in textarea {
    border-bottom: 1px solid #111;
    font-family: inherit;
    padding: 5px;
    width: 100%;
    background-color: transparent;
}
input:focus,
textarea:focus {
    border: 1px solid #cdcdcd;
    outline: 0;
    background-color: #fff;
}
.contactbox-all {
  overflow: hidden;
  width: 96%;
  background-color: #f5f5f5;
  padding: 2%;
}
.contact-txt {
  line-height: 2;
  margin-bottom: 150px;
}
.c-l span {
    display: block;
    opacity: .5;
    font-size: 12px;
    margin-top: 2px;
    font-weight: normal;
}
span.en-moji {
    display: block;
    opacity: .5;
    margin-bottom: 10px;
}
span.en-moji br {
    display: none;
}
.page-template-page-contact-php .box.shop-box {
margin-top: 20px;
margin-bottom: 100px;
overflow: hidden;
border-top: 1px solid #cdcdcd;
padding-top: 100px;
}
.wpcf7-spinner {
    display: none;
}
/*paging*/
.paging-navigation {
    background-color: transparent;
    padding: 40px 0;
}
.wp-pagenavi a, .wp-pagenavi span {
    border: 0 none;
    padding-left: 20px;
}
.wp-pagenavi .pages {
    margin-right: 15px;
    padding-left: 0;
}
.wp-pagenavi a {
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    color: var(--body-text-color);
}
.wp-pagenavi a:hover, .paging-navigation a:visited {
    color: var(--body-text-color);
    opacity: .4;
}
.wp-pagenavi span.current {
	text-decoration: line-through;
}
.info-pagination {
	margin-bottom: 40px;
}

.page-template-page-info .hentry {
padding: 100px 0;
border-top: 1px solid var(--body-text-color);
}
.page-template-page-info .hentry.last {
  padding-bottom: 0;
}
.page-template-page-info .hentry.first {
padding: 40px 0 100px;
border-top: 0 none;	
}


@media screen and (max-width: 767px) {
  .related-items__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .related-items__title-ja {
    font-size: 12px;
  }
}

@media (max-width: 900px){
  .side-info__link{
    grid-template-columns: 80px 14px 1fr;
    row-gap: 4px;
  }

  .side-info__bar:nth-of-type(2){
    display: none;
  }

  .side-info__title{
    grid-column: 1 / -1;
  }
}
@media (max-width: 820px) and (min-width: 781px) {
  .side-info__link {
    grid-template-columns: 1fr !important;
    row-gap: 2px !important;
  }
  .side-info__date {
    text-align: left;
  }
  .side-info__bar {
    display: none;
  }
  .side-info__title {
    padding-left: 0;
  }
}
@media (max-width: 820px){

  .info-post-list {
    width: 100%;
  }
.site-nav {
	padding: 40px 2% 40px;
}
  .footer-navigation {
    left: 96%;
  }
  .box-hako .ichiran {    grid-template-columns: repeat(3, minmax(0, 1fr));}
  .item-category__items {grid-template-columns: repeat(2, 1fr);}
  
}
@media (max-width: 820px){
  .side-info__link {
    grid-template-columns: 1fr !important;
    row-gap: 2px !important;
  }
  .side-info__date {
    text-align: left;
  }
  .side-info__bar {
    display: none;
  }
  .side-info__title {
    padding-left: 0;
  }
 }
@media (max-width: 643px) {
    .entry-title, .format-chat .entry-title, .format-image .entry-title, .format-gallery .entry-title, .format-video .entry-title {
        font-size: 16px;
        font-weight: 500;
    }
    /* 各コンテンツの左右パディングリセット */
    #content .entry-header,
    #content .entry-content,
    #content .entry-summary,
    #content footer.entry-meta,
    #content .featured-gallery,
    .search.sidebar .page-content,
    .blog.sidebar .page-content,
    .sidebar .post-navigation .nav-links,
    .paging-navigation .nav-links,
    #content .author-info,
    .comments-area .comments-title,
    .comments-area .comment-list,
    .comments-area .comment-navigation,
    .comment-respond,
    .sidebar .site-info,
    .sidebar .paging-navigation .nav-links {
        padding-left: 0;
        padding-right: 0;
    }
    /* サイトナビゲーション内ボタンのスタイル */
    #site-navigation button,
    #site-navigation input[type="submit"],
    #site-navigation input[type="button"],
    #site-navigation input[type="reset"] {
        display: inline-block;
    }
        ul.nav-menu, div.nav-menu > ul {
        display: block;
    }
  .is-sub-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 30px 0;
  }
  .navbar {
    display: none;
  }

  .home .navbar {
    display: block;
  }
  .glitch-wrap.hero-center .glitch-hover {
    width: 95%;
	}
  .ohh-gallery--port3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ohh-gallery--port3 > *:last-child {
    grid-column: 1 / -1;
  }
    .item-category__items {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
.ohh-gallery {
    display: grid;
    gap: 10px;
    margin: 0;
} 
.home .site-header {
position: fixed;
left: min(6vw, 100px);
top: 34%;
transform: translateY(-50%);
}
.home .site-header.is-home-header .nav-menu li {
display: block;
position: relative;
}
.home ul.nav-menu {
	padding-top: 20px;
}
.home .logo-area {
  width: 100%;
  min-width: clamp(140px, 45vw, 200px);
  max-width: 270px;
}
  .item-category-list {
    margin-top: 60px;
    margin-bottom: calc(3 * var(--global--spacing-vertical));
}
  .side-overlay-menu {
    display: block;
  }

  .side-overlay-menu li {
    display: block;
  }

  .side-overlay-menu li:not(:last-child)::after {
    content: none;
  }

  .side-overlay-menu li a {
    display: block;
    width: 100%;
    padding: 12px 0;
  }
    .side-info {
margin-top: 60px;
}
.c-box .c-l {
    float: left;
    width: 100%;
}
.c-box .c-r {
    float: right;
    width: 100%;
}
.contactbox-in {
max-width: 100%;
width: 100%;
overflow: hidden;
margin-bottom: 20px;
padding-top: 70px;
}
.ohh-gallery--port3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ohh-gallery--port3 > *:last-child {
    grid-column: 1 / -1;
  }
    .item-category__items {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
.ohh-gallery {
    display: grid;
    gap: 10px;
    margin: 0;
}
.ohh-gallery__item {
	margin-bottom: 10px;
}
}
@media (max-width: 600px) {

}