/*
	Theme Name: WerkStatt Child Theme
	Theme URI: http://themeforest.net/user/fuelthemes
	Description: <strong>A Premium theme for magazine, editor, community and more! WordPress Theme by <a href="http://www.themeforest.net/user/fuelthemes">fuelthemes</a></strong> – Update notifications available on Twitter and Themeforest <a href="http://twitter.com/anteksiler">Follow us on twitter</a> – <a href="http://themeforest.net/user/fuelthemes">Follow us on Themeforest</a>
	Version: 1.0.0
	Author: fuelthemes
	Template: werkstatt
	Text Domain: werkstatt
*/
/*
#about{
	background-image:url(http://localhost:8888/wordpress2/wp-content/uploads/2025/08/back.png);
	background-repeat:no-repeat;
	background-position: right -100px bottom -160px!important;
	background-size: 500px;
	background-color: rgba(255, 255, 255, 0.8);
	background-blend-mode: overlay;
	animation: blurLoop 4s infinite ease-in-out;
}
*/

/* ================================
   Butterfly Cursor — Full CSS
   ================================ */
 /* 既存のカーソルを消す（ページ全体に適用が嫌ならラッパー要素に） */
html, body, * {
}

:root{
  --butterfly-size: 70px;      /* 基準サイズ */
  --butterfly-perspective: 900px;
  --hinge-overlap:-4px;        /* ← 内側の重なり量。離れるなら増やす */
  --wing-height: 70%;
}

.shiga-logo{
	position:absolute;
	left:50px;
	bottom:20px;
	margin-bottom:0!important;
}

.shiga-logo img{
	width:75px;
	height:auto;
}

.credit{
	position:absolute;
	left:130px;
	bottom:20px;
	margin-bottom: 0 !important;
}

body .credit p{
	color:#fff;
	font-size:14px;
}

.butterfly{
  position: fixed;
  left: 0; top: 0;
  width: var(--butterfly-size);
  height: var(--butterfly-size);
  /* ここで translate(-50%,-50%) は入れない（JSで入れる） */
  pointer-events: none;
  z-index: 2147483647;
  perspective: var(--butterfly-perspective);
  contain: layout paint;
  will-change: transform;
}

.wings{
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
}

.wing{
  position: absolute;
  top: 50%;
  width: 50%;
  height: var(--wing-height);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.wing img{
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
}

/* 左右の“胴体側の端”をヒンジにして、内側へ数px食い込ませる */
.wing.left{
  right: 50%;
  transform-origin: 100% 50%;
  translate: calc(var(--hinge-overlap) * -1) -50%;
}
.wing.right{
  left: 50%;
  transform-origin: 0% 50%;
  translate: var(--hinge-overlap) -50%;
}

/* デバッグ：中心点がずれていないか確認したい時に有効化
.butterfly::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:6px; height:6px; border-radius:50%;
  background:#ff0066; translate:-50% -50%;
}
*/

/* 動きを無効化したい人の配慮 */
@media (prefers-reduced-motion: reduce){
  .butterfly{ display:none; }
}


.hero-copy{
	position: absolute;
    right: 18%;
    bottom: 16vh;
    width: auto;
    height: 60vh;
}


.hero-copy figure, .hero-copy div{
	height:100%;
}

.hero-copy img{
	height:100%!important;
	width:auto;
}

a.sbi_header_link::after{
	display:none;l
}

body .high-light-row a{
	color:  #fff!important;
	line-height:1.4;
}

body .high-light-row a::after{
	border-color:#fff!important;
}

body .high-light-row a::after{
	border-bottom:1px solid #fff!important;
	transform: scale(1, 1);
}

body .high-light-row a::after {
  transform: scaleX(1);
  transform-origin: right center; /* 最初は右基準 */
  transition: transform 0.3s ease;
}


body .high-light-row a:hover::after{
	border-bottom:1px solid #fff!important;
	animation: underline-reverse 0.6s forwards;
}

@keyframes underline-reverse {
  0% {
    transform: scaleX(1);
    transform-origin: right center;
  }
  49% {
    transform: scaleX(0);
    transform-origin: right center;
  }
  50% {
    transform: scaleX(0);
    transform-origin: left center;
  }
  100% {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

body .high-light-row a::after{
	color:#fff!important;
}

body .high-light-row a:hover{
	color:#fff!important;
}

.top-margin{
	margin-top:100px;
}

.mobile-toggle{
	margin-top:-5px;
}

#mobile-menu .menu-footer p{
	color:#fff!important;
}

#mobile-menu{
	background: linear-gradient(160deg, #bf75a6 0%, #345aa0 100%)!important;
}

.footer{
	background: linear-gradient(160deg, #bf75a6 0%, #345aa0 100%)!important;
	padding:80px 0 0 0;
}

.right-margin{
	margin-right:30px;
}

.left-margin{
	margin-left:30px;
}

.gradation-back{
	position:relative;
}

.gradation-back img{
}

.gradation-back::before{
	content:"";
	width:100%;
	height:100%;
	position:absolute;
	left:12px;
	top:12px;
	background: linear-gradient(160deg, #bf75a6 0%, #345aa0 100%);
	z-index:-1;
}

.gradation-text{
 background: linear-gradient(90deg, #bf75a6 0%, #345aa0 100%);
  background: -webkit-linear-gradient(90deg, #bf75a6 0%, #345aa0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.vertical-text{
	writing-mode: vertical-rl; /* 右から左に縦書き */
	display: inline-block;
	text-align:start;
}

.vertical-text h2{
	font-size:48px;
}

/* === animatable custom properties === */
@property --p1x { syntax: '<percentage>'; initial-value: 96%; inherits: false; }
@property --p1y { syntax: '<percentage>'; initial-value: 96%; inherits: false; }
@property --p2x { syntax: '<percentage>'; initial-value: 5%;  inherits: false; }
@property --p2y { syntax: '<percentage>'; initial-value: 90%; inherits: false; }
@property --p3x { syntax: '<percentage>'; initial-value: 57%; inherits: false; }
@property --p3y { syntax: '<percentage>'; initial-value: 73%; inherits: false; }
@property --p4x { syntax: '<percentage>'; initial-value: 20%; inherits: false; }
@property --p4y { syntax: '<percentage>'; initial-value: 4%;  inherits: false; }
@property --p5x { syntax: '<percentage>'; initial-value: 74%; inherits: false; }
@property --p5y { syntax: '<percentage>'; initial-value: 15%; inherits: false; }

@property --r1 { syntax: '<percentage>'; initial-value: 5%;  inherits: false; }
@property --r2 { syntax: '<percentage>'; initial-value: 13%; inherits: false; }
@property --r3 { syntax: '<percentage>'; initial-value: 3%;  inherits: false; }
@property --r4 { syntax: '<percentage>'; initial-value: 22%; inherits: false; }
@property --r5 { syntax: '<percentage>'; initial-value: 13%; inherits: false; }

/* === base colors === */
:root {
  --A: #bf75a6; /* purple */
  --B: #345aa0; /* blue   */
  --a1: color-mix(in oklab, var(--A) 90%, white 10%);
  --a2: color-mix(in oklab, var(--B) 80%, white 20%);
  --a3: color-mix(in oklab, var(--A) 55%, var(--B) 45%);
  --a4: color-mix(in oklab, var(--A) 85%, white 15%);
  --a5: color-mix(in oklab, var(--A) 60%, var(--B) 40%);
}

.gradation_hero{
  position: relative;
  width: 100%;
  height: 100vh;

  /* 背景タイルを少し大きくして、ズームで呼吸感を出す */
  background-color: color-mix(in oklab, var(--A) 35%, var(--B));
  background-image:
    radial-gradient(circle at var(--p1x) var(--p1y), color-mix(in oklab, var(--a1) 100%, transparent 15%) var(--r1), transparent 86%),
    radial-gradient(circle at var(--p2x) var(--p2y), color-mix(in oklab, var(--a2) 100%, transparent 15%) var(--r2), transparent 65%),
    radial-gradient(circle at var(--p3x) var(--p3y), color-mix(in oklab, var(--a3) 100%, transparent 10%) var(--r3), transparent 89%),
    radial-gradient(circle at var(--p4x) var(--p4y), color-mix(in oklab, var(--a4) 100%, transparent 20%) var(--r4), transparent 56%),
    radial-gradient(circle at var(--p5x) var(--p5y), color-mix(in oklab, var(--a5) 100%, transparent 15%) var(--r5), transparent 57%);
  background-repeat: no-repeat;
  background-size: 160% 160%;

  /* ← ここを小さくすると全体が速くなります */
  --t: 6s;

  /* ...（他のプロパティはそのまま）... */

  animation:
    move1   calc(var(--t) * 0.6)  linear   infinite,
    move2   calc(var(--t) * 1.0)  linear   infinite reverse,
    move3   calc(var(--t) * 0.8)  linear   infinite,
    move4   calc(var(--t) * 1.3)  linear   infinite reverse,
    move5   calc(var(--t) * 1.1)  linear   infinite,
    breathe calc(var(--t) * 0.9)  ease-in-out infinite;
}

.high-light-row{
	background: linear-gradient(160deg, #bf75a6 0%, #345aa0 100%);
}

.high-light-row h2, .high-light-row h3, .high-light-row p{
	color:#fff!important;
	  -webkit-background-clip: none;
  -webkit-text-fill-color: nonet;
}

/* === positions（擬似リサージュ軌道）=== */
@keyframes move1{
  0%   { --p1x: 92%; --p1y: 88%; --r1: 6%; }
  25%  { --p1x: 65%; --p1y: 35%; --r1: 9%; }
  50%  { --p1x: 20%; --p1y: 80%; --r1: 4%; }
  75%  { --p1x: 80%; --p1y: 15%; --r1: 7%; }
  100% { --p1x: 92%; --p1y: 88%; --r1: 6%; }
}
@keyframes move2{
  0%   { --p2x: 8%;  --p2y: 88%; --r2: 12%; }
  33%  { --p2x: 30%; --p2y: 60%; --r2: 16%; }
  66%  { --p2x: 12%; --p2y: 20%; --r2: 10%; }
  100% { --p2x: 8%;  --p2y: 88%; --r2: 12%; }
}
@keyframes move3{
  0%   { --p3x: 55%; --p3y: 70%; --r3: 3%; }
  20%  { --p3x: 70%; --p3y: 40%; --r3: 5%; }
  60%  { --p3x: 35%; --p3y: 30%; --r3: 2%; }
  100% { --p3x: 55%; --p3y: 70%; --r3: 3%; }
}
@keyframes move4{
  0%   { --p4x: 18%; --p4y: 6%;  --r4: 20%; }
  40%  { --p4x: 40%; --p4y: 20%; --r4: 24%; }
  80%  { --p4x: 10%; --p4y: 35%; --r4: 18%; }
  100% { --p4x: 18%; --p4y: 6%;  --r4: 20%; }
}
@keyframes move5{
  0%   { --p5x: 72%; --p5y: 18%; --r5: 12%; }
  25%  { --p5x: 85%; --p5y: 35%; --r5: 14%; }
  75%  { --p5x: 60%; --p5y: 10%; --r5: 10%; }
  100% { --p5x: 72%; --p5y: 18%; --r5: 12%; }
}

/* === 全体ズーム（“呼吸感”）=== */
@keyframes breathe{
  0%,100% { background-size: 150% 150%; }
  50%     { background-size: 200% 200%; }
}


.top_title h2{
	font-size:32px;
}

body{
	font-family: "times-new-roman", "hiragino-mincho-pron", serif;
	font-weight: 300;
}

.menu-item a{
	letter-spacing: 0.1em;
	font-family: "times-new-roman", "hiragino-mincho-pron", serif;
	font-weight: 300;
}

h1, h2, h3, h4, h5, h6{
	font-family: "times-new-roman", "hiragino-mincho-pron", serif;
	font-weight: 600;
	color:#09111f;
}

h1, h2, h3, h4, h5, h6{
	letter-spacing: 1px;
	line-height: 1.6;
}


h1{
	font-size: 48px;
}

h2{
	font-size: 36px;
}

h3{
	font-size: 28px;
}

h4{
	font-size: 24px;
}

h5{
	font-size: 18px;
}

h6{
	font-size: 16px;
}

li{
	font-size: 14px;
	line-height: 2;
}

footer p, .widget p, .widget{
	font-size: 14px;
}

p, .portfolio-title h4 div{
	font-size: 16px;
	line-height: 2;
	font-family: "kepler-std", "hiragino-mincho-pron", serif;
	font-weight: 300;
}

label{
	font-size: 14px;
}

body .wpcf7-spinner{
	display:none;
}

body input[type="submit"], body .button, body .btn{
	border: 2px solid #111;
}

body input[type="submit"]:hover, body .button:hover, body .btn:hover{
	background-color: #fff;
	color: #111;
}

p:has(input[type="submit"]){
	text-align: center;
}

body .vc_btn3.vc_btn3-color-black, body .vc_btn3.vc_btn3-color-black.vc_btn3-style-flat{
	color: #fff;
	background-color: #111;
	border: 2px solid #111;
}

body .vc_btn3.vc_btn3-color-black.vc_btn3-style-flat:focus, body .vc_btn3.vc_btn3-color-black.vc_btn3-style-flat:hover, body .vc_btn3.vc_btn3-color-black:focus, body .vc_btn3.vc_btn3-color-black:hover{
	color: #111;
	background-color: #fff;
	border: 2px solid #111;
}

#sb_instagram .sb_instagram_header, .sb_instagram_header{
	padding: 0 0 12px 0;
}

body #sb_instagram #sbi_load .sbi_load_btn, body #sb_instagram .sbi_follow_btn a{
	color: #fff!important;
}

.blog-container .thb-page-header{
	margin-top: 60px;
}

.crown_img img{
	width: 50px;
	height: 50px;
}

body #scroll_to_top{
	border-color: #111;
}

body #scroll_to_top svg{
	fill: #111;
}

body #scroll_to_top:hover{
	border-color: #111;
	background-color: #111;
}

body .vc_btn3.vc_btn3-color-inverse.vc_btn3-style-outline{
	color: #111;
	border-color: #111;
	font-weight: 500;
	min-width:150px;
}

input[type="submit"].thb-border-style, .button.thb-border-style, .btn.thb-border-style{
	font-weight: 500;
}

body .vc_btn3.vc_btn3-color-inverse.vc_btn3-style-outline:focus, body .vc_btn3.vc_btn3-color-inverse.vc_btn3-style-outline:hover{
	border-color: #111;
	background-color: #111;
}

h1,h2,h3{
	letter-spacing: 2px;
}

.overlay_text a::after{
	display:none;
}

.overlay_text a:hover{
	color: #d3cab2;
}

.link_wrapper:hover .overlay_text a{
	color: #d3cab2;
}

.link_wrapper .wpb_wrapper{
	display: table;
	position: relative;
}

.white_text a{
	color: #ffffff;
}

.overlay_text{
    position: absolute;
    display: table-cell;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
	text-align: center;
}

.overlay_text h2{
	font-size: 3rem;
}

#mobile-menu .thb-close path{
	stroke: rgba(0, 0, 0);
}

#mobile-menu .menu-footer{
	color: #111111;
}

.thb-portfolio .type-portfolio.title-center .portfolio-link{
	background: rgba(211, 202, 178, 0.7);
}

#mobile-menu{
	background: #d3cab2;
}

.thb-mobile-menu a{
	color: #111111;
}

#scroll_to_top{
	border: 1px solid #777777;
}

#scroll_to_top svg{
	fill: #777777;
}

.pc{
	display: block;
}

.sp{
	display: none!important;
}

.hero_title p{
	font-size: 9vw;
	font-weight: 500;
	color:#222222;
	width: 100%;
	text-align: left;
	line-height: 1;
	margin-left:30px;
	letter-spacing: 0.05em;
}

.padding-1 .portfolio-holder{
	    padding-bottom: 100%;
}

.padding-2 .portfolio-holder{
	    padding-bottom: 200%;
}

.thb-page-header h1{
	font-size:32px;
}

.grecaptcha-badge{
	z-index:-9999;
}

.presskit a{
	background: linear-gradient(160deg, #bf75a6 0%, #345aa0 100%) !important;
	color:#fff!important;
	padding:30px!important;
}

.presskit a:hover{
	opacity:0.5;
}

@media screen and (max-width: 1024px) {
	.butterfly{
		display:none!important;
	}
	html, body, * {
  cursor: auto !important;
	}
	.wings, .wing, .wing img{
		display:none!important;
	}
}

@media screen and (max-width: 768px) {
	.pc{
		display: none!important;
	}

	.sp{
		display: block!important;
	}

	.hero_title p{
		font-size: 15vw;
		width: 100%;
		text-align: left;
		padding-left: 20px;
		box-sizing: border-box;
		margin-left: 0;
		letter-spacing: 0.05em;
	}
	
	.type-portfolio.medium-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
	
	.mobile-menu-top ul li{
		margin-bottom: 10px;
	}
	
	.thb-portfolio .type-portfolio:hover .portfolio-link, .thb-portfolio .type-portfolio.swiper-slide-active .portfolio-link, .thb-portfolio .type-portfolio.current .portfolio-link{
		opacity:0;
	}
	
	.top_title h2{
		font-size:28px;
	}
	
	#footer .column, #footer .columns{
		padding-left: 8.5%;
		padding-right: 8.5%;
	}
		
	.right-margin{
		margin-right:0px;
	}

	.left-margin{
		margin-left:0px;
	}
	
	.hero-copy h1{
	font-size:48px;
		line-height:1.5;
}
	
	.hero-copy{
	right:12%;
	top:18%;
}
	
	
.hero-copy{
	position: absolute;
    right: 25vw;
    bottom: auto;
    width: 50vw;
    top: 45%;
    transform: translateY(-50%);
	height:auto;
}


.hero-copy figure, .hero-copy div{
	height:auto;
	width:100%;
}

.hero-copy img{
	height:auto!important;
	width:100%;
}
	
	.top-margin{
	margin-top:0px;
}
	.vertical-text{
		display:flex;
		margin:0 auto;
	}
	
	.vertical-text h2{
		font-size:36px;
	}
	
	#about{
	background-image:none;
}
	
	.shiga-logo{
	position:absolute;
	left:50%;
	bottom:60px;
	margin-bottom:0!important;
	margin-left:-38px;
}

.shiga-logo img{
	width:65px;
	height:auto;
}

.credit{
	position:absolute;
	left:0;
	bottom:20px;
	margin-bottom: 0 !important;
	width:100%;
}

body .credit p{
	color:#fff;
	font-size:14px;
	width:100%;
	text-align:center;
}

}

@media screen and (max-width: 640px) {
		.blog-container .small-12{
		padding-left: 10%;
		padding-right: 10%;
	}
}

@media only screen and (min-width: 90.0625em) {
    .thb-mobile-menu a {
        font-size: 48px;
    }
}