/*
Theme Name: VIP Edition
Theme URI: https://olliewp.com
Description: A child theme for Ollie.
Author: Mike McAlister
Author URI: https://olliewp.com
Template:     ollie
Version: 1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         blog, portfolio, entertainment, grid-layout, one-column, two-columns, three-columns, four-columns, block-patterns, block-styles, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, rtl-language-support, style-variations, template-editing, theme-options, translation-ready, wide-blocks
Text Domain: ollie-child
*/
.nav-shadow{
    box-shadow: 0px 1px 0px rgba(17,17,26,0.05), 0px 0px 8px rgba(17,17,26,0.1);
}

    /* 水平スクロールボタン for 金額表 モバイル対応 */
    @media (width <= 1180px) {

        /* 使うガター変数を一元化（存在しないときのフォールバックも用意） */
        :root {
          /* 好きな方に合わせてOK。まずはご要望の padding-medium を優先 */
          --vip-scroll-gutter: var(--wp--preset--spacing--medium,
                                var(--wp--preset--spacing--40, 16px));
        }
      
        .button-scroll-wrap {
          /* 既存プロパティはそのまま */
          justify-content: flex-start !important;
          flex-wrap: nowrap;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          scroll-behavior: smooth;
          text-align: left;
          padding-block: 0.2rem;
      
          /* 左だけガターを与える */
          padding-inline-start: var(--vip-scroll-gutter);
          scroll-padding-inline-start: var(--vip-scroll-gutter);
    
        }
      
        .button-scroll-wrap.is-content-justification-right,
        .button-scroll-wrap.is-content-justification-center,
        .button-scroll-wrap.is-content-justification-space-between {
          justify-content: flex-start !important;
        }
      
        .button-scroll-wrap .wp-block-button {
          flex: 0 0 auto;
          scroll-snap-align: start;
        }
      
        /* スクロールバー非表示（Safari/Chrome系） */
        .button-scroll-wrap::-webkit-scrollbar { display: none; }
      }
  
      @media (width <= 800px) {
        .button-scroll-wrap .ollie-animate,
        .button-scroll-wrap .ollie-animate-on-scroll {
          animation: none !important;
          transition: none !important;
          transform: none !important;
          opacity: 1 !important;
        }
      }


@supports (view-transition-name: none) {
    @view-transition { navigation: auto; } 
}

  /* ウェルカムスライド */
.welcome-slide{
    position: relative;
}
/* 手描きコメント */
/* .welcome-slide::before{
    content: "";
    position: absolute;
    top: -24px;
    left: -40px;
    width: 240px;
    height: 100px;
    z-index: 10;
    background-image: url("https://jadeclinic.local/wp-content/uploads/2025/08/support-white2.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
}
.welcome-slide:hover::before{
    transform: scale(.85) rotate(5deg);
} */
/* メガメニューの不要な水平スクロールを無効化 */
body:has(.wp-block-navigation .wp-block-ollie-mega-menu ) {
	overflow-x: hidden;
}
/* 画像のradius無効 */
.br0 img{
    border-radius: 0;
}
.jet-smart-filters-pagination jet-filter{
    font-weight:bold;
}
/* 診療日カレンダー */
.wp-block-table .has-fixed-layout td, .wp-block-table .has-fixed-layout th {
    word-break: break-word;
    text-align: center;
    font-size: 13px;
}
.wp-block-table td, .wp-block-table th {
    border: .5px solid rgba(0, 0, 0, .05);
    padding: .5em;
}
.wp-block-table .has-fixed-layout {
    width: 99%;
    border-spacing: 0;
}


table.has-main-accent-background-color {
    color: var(--wp--preset--color--secondary);
}


.cellWorkday{
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--primary-accent);
}
table.has-main-accent-background-color .cellWorkday {
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--base-accent);
}
.cellWorkday-half {
    background: var(--wp--preset--color--main-accent);
}
/* 背景色付きのとき */
table.has-main-accent-background-color .cellWorkday-half {
    background: var(--wp--preset--color--tertiary);
}

.cellSunday, .cellHoliday {
    background: #ECC6C7;
}
 .cellSaturday {
    background: #BDE2E8;
}

.z-index-10 {
    position: relative;
    z-index: 10;
}
.vertical-rl {
    display: flex;
    flex-direction: column;
    writing-mode: vertical-rl;
    height: 420px;
}
/* マーカー */
h1.marker mark,
h2.marker {
	position: relative;
}

h1.marker mark::after,
h2.marker mark::after {
	content: " ";
	display: block;
	width: 100%;
	height: 22px;
	background-image: url('assets/src-images/underline.svg');
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	bottom: -.9rem;
	left: 50%; 
	transform: translateX(-50%);
	z-index: -1;
  }


/* グラデーションテキスト */
.text-gradient2 {
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(45deg, #4D35FA, #FF4AC2);
    -webkit-background-clip: text;
    -webkit-box-decoration-break: clone;
    color: #4D35FA;
    display: inline;
}
/* グラデーション文字 */
.text-gradient {
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(45deg, var(--wp--preset--color--primary-alt), var(--wp--preset--color--main-accent));
    -webkit-background-clip: text;
    -webkit-box-decoration-break: clone;
    color: var(--wp--preset--color--main);
    display: inline;
}
/* Mike Cover */
.mike-cover section {
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
} 

/* インスタDM スクロール */
.chat-container{
    max-height: 620px;
    overflow: hidden
}
@keyframes scrollchat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-45%);
    }
	100% {
		transform: translateY(0);
	}
}
.chat-scroll{
    height: 200%;
    scrollbar-width: none;
    -ms-overflow-style: none; 
    -webkit-overflow-scrolling: touch;
    animation: scrollchat 10s linear infinite;
    animation-play-state: running;
    position: relative;
    z-index: 20;
}

/* Ollie Hero スクロール */
.hero-container {
    max-height: 1200px;
}

.hero-scroll-container {
    transform: rotate(-28deg) skew(10deg, 10deg);
}
@keyframes scrollhero {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-45%);
    }
	100% {
		transform: translateX(0);
	}
}
.hero-scroll {
    width: 200%;
    -webkit-overflow-scrolling: touch;
    animation: scrollhero 100s linear infinite;
    animation-play-state: running;
    position: relative;
    z-index: 20;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

.hero-scroll img {
    border-radius: 5px;
    transition: .3s ease;
    box-shadow: 0px 38px 11px 0px rgba(162, 129, 146, 0.00), 0px 24px 10px 0px rgba(162, 129, 146, 0.01), 0px 14px 8px 0px rgba(162, 129, 146, 0.05), 0px 6px 6px 0px rgba(162, 129, 146, 0.09), 0px 2px 3px 0px rgba(162, 129, 146, 0.10);
    z-index: 5;
     /* スナップポイントを設定 */
     scroll-snap-align: start;
}

.hero-scroll img:hover {
    transform: scale(1.05);
    box-shadow: 0px 240px 67px 0px rgba(162, 129, 146, 0.00), 0px 154px 62px 0px rgba(162, 129, 146, 0.01), 0px 87px 52px 0px rgba(162, 129, 146, 0.05), 0px 38px 38px 0px rgba(162, 129, 146, 0.09), 0px 10px 21px 0px rgba(162, 129, 146, 0.10);
    z-index: 10;
}

/* Ollie はみ出し画像 */

.overflow-hidden {
	overflow: hidden;
}

.relative {
	position: relative;
}

.meet-wordpress,
.meet-ollie,
.road-of-jade {
	position: relative;
	overflow: hidden;
}

@media only screen and (min-width: 782px) {
	.meet-wordpress:hover .site-editor-image img,
	.meet-ollie:hover .ollie-collage img {
		transform: scale(1.04);
	}

	.site-editor-image img {
		max-width: 160% !important;
		transition: .5s ease;
	}
}

@media only screen and (max-width: 781px) {
	.site-editor-image img {
		margin-bottom: 5%;
	}
}

/* Marquee エフェクト */
.vip-no-shrink{
    flex-shrink: 0;
}
@media only screen and (min-width: 782px) {
	.road-of-jade:before {

        content: "";
        position: absolute;
        bottom: -8%;
        left: 0;
        width: 240px;                  /* 横幅を決める */
        aspect-ratio: 799 / 1200;           /* 元画像に近い比率（または height: auto; は不可） */
        background-image: url(http://jadeclinic.local/wp-content/uploads/2025/08/doctor-person.avif);
        background-size: contain;      /* 枠に収める */
        background-repeat: no-repeat;
        background-position: bottom left;
        z-index: 5;
        pointer-events: none; 
    }
    .road-of-jade:after {

        content: "";
        position: absolute;
        bottom: -8%;
        right: 0;
        width: 240px;                  /* 横幅を決める */
        aspect-ratio: 799 / 1200;           /* 元画像に近い比率（または height: auto; は不可） */
        background-image: url(http://jadeclinic.local/wp-content/uploads/2025/08/team-people.avif);
        background-size: contain;      /* 枠に収める */
        background-repeat: no-repeat;
        background-position: bottom right;
        z-index: 5;
        pointer-events: none; 
    }
}

@keyframes scrollwide {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-150%);
    }
	100% {
		transform: translateX(0);
	}
}

.pattern-scroll {
	-webkit-overflow-scrolling: touch;
	animation-play-state: running;
}



.pattern-scroll img {
	max-height: 420px;
	width: auto;
	border-radius: 10px;
	transition: .240s ease;}

.pattern-scroll img:hover {
	transform: scale(1.03);
}

@media only screen and (max-width: 781px) {

	
	.pattern-scroll img {
		max-height: 300px;
        scroll-snap-align: start;
	}
}

/* Beginner スクロール */
	.beginner-scroll {
        -webkit-overflow-scrolling: touch;
	    animation-play-state: running;
		animation: none !important;
		overflow-x: scroll;
		position: relative;
		scrollbar-width: none;
  		-ms-overflow-style: none; 
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scroll-padding: 0 var(--wp--preset--spacing--medium);;
	}

	.beginner-scroll-container {
		position: relative;
	}

	.beginner-scroll ::-webkit-scrollbar {
		display: none;
	}
	
	.beginner-scroll-container:after,
	.beginner-scroll-container:before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 30px;
		pointer-events: none;
		background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
	}

	.beginner-scroll-container:before {
		right: auto;
		left: 0;
		background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
		z-index: 5;
	}

	.beginner-scroll > div {
		width: 85% !important;
        scroll-snap-align: center;
	}

    .beginner-scroll img {
        max-height: 420px;
        width: auto;
        border-radius: 10px;
        transition: .240s ease;}
    
    .beginner-scroll img:hover {
        transform: scale(1.03);
    }

.beginner-scroll:hover {
	animation-play-state: paused !important;
}

/* Testimonial スクロール */
.testimonial-scroll {
	animation: scrollwide 100s linear infinite !important;
}

@media only screen and (max-width: 781px) {
	.testimonial-scroll {
		animation: none !important;
		overflow-x: scroll;
		position: relative;
		scrollbar-width: none;
  		-ms-overflow-style: none; 
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scroll-padding: 0 var(--wp--preset--spacing--medium);;
	}

	.testimonial-scroll-container {
		position: relative;
	}

	.testimonial-scroll ::-webkit-scrollbar {
		display: none;
	}
	
	.testimonial-scroll-container:after,
	.testimonial-scroll-container:before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 30px;
		pointer-events: none;
		background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
	}

	.testimonial-scroll-container:before {
		right: auto;
		left: 0;
		background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
		z-index: 5;
	}

	.testimonial-scroll > div {
		width: 85% !important;
        scroll-snap-align: center;
	}
}

.testimonial-scroll:hover {
	animation-play-state: paused !important;
}
/*--------------------------------------------------------------
# 基本設定
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# スムーズスクロール
--------------------------------------------------------------*/
html {
    scroll-behavior: smooth;
}

/* アクセシビリティ対応：ユーザーが動きを減らす設定を選択している場合 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* 日本語の文字詰め調整（見出しH、段落P）*/
.wp-block-heading,
.entry-content p,
.wp-block-post-content p,
.wp-block-post-title {
    font-feature-settings: "palt" 1;
    word-break: auto-phrase;
    text-wrap: balance;
}


/*--------------------------------------------------------------
# モーションアニメーション
--------------------------------------------------------------*/
/* 基本設定 */
[data-motion] {
    opacity: 0;
    will-change: transform, opacity;
    pointer-events: none;
    transform-origin: center;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* アニメーション開始時の状態 */
[data-motion].is-animated {
    animation-duration: var(--motion-duration, 0.8s);
    animation-timing-function: cubic-bezier(0.44, 0, 0.56, 1);
    animation-delay: var(--motion-delay, 0s);
    animation-fill-mode: forwards;
    pointer-events: auto;
}

/* Reduced Motion対応 */
@media (prefers-reduced-motion: reduce) {
    [data-motion] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* 通常のアニメーション */
@media (prefers-reduced-motion: no-preference) {
    /* フェードイン */
    [data-motion="fadeIn"].is-animated {
        animation-name: fadeIn;
    }

    /* 下からフェードイン */
    [data-motion="fadeInUp"].is-animated {
        animation-name: fadeInUp;
    }

    /* 左からフェードイン */
    [data-motion="fadeInLeft"].is-animated {
        animation-name: fadeInLeft;
    }

    /* 右からフェードイン */
    [data-motion="fadeInRight"].is-animated {
        animation-name: fadeInRight;
    }

    /* ズームイン */
    [data-motion="zoomIn"].is-animated {
        animation-name: zoomIn;
    }

    /* 下からズームイン */
    [data-motion="zoomInUp"].is-animated {
        animation-name: zoomInUp;
    }
}

/* アニメーションキーフレーム */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(8px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 8px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-8px, 0, 0) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(8px, 0, 0) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomInUp {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(8px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/*--------------------------------------------------------------
# エディタスタイル
--------------------------------------------------------------*/
/* エディタ画面でのアニメーション要素 */
.editor-styles-wrapper [data-motion] {
    transition: all 0.8s cubic-bezier(0.44, 0, 0.56, 1);
}

.editor-styles-wrapper .has-motion-animation {
    position: relative;
}

.editor-styles-wrapper .wp-block[data-motion] {
    opacity: 1;
    transform: none;
    transition: all 0.8s linear(0, 0.402 7.4%, 0.711 15.3%, 0.929 23.7%, 1.008 28.2%, 1.067 33%, 1.099 36.9%, 1.12 41%, 1.13 45.4%, 1.13 50.1%, 1.111 58.5%, 1.019 83.2%, 1.004 91.3%, 1);
}

/* ホバー時のアウトライン */
.editor-styles-wrapper [data-motion]:hover,
.editor-styles-wrapper .wp-block[data-motion]:hover {
    outline: 2px dashed #007cba;
    outline-offset: 2px;
}

/* エディタでのプレビューアニメーション */
.editor-styles-wrapper .motion-preview {
    opacity: 0;
    transform: var(--preview-transform);
    transition: all var(--preview-duration) var(--preview-ease) var(--preview-delay) !important;
    will-change: transform, opacity;
}

.editor-styles-wrapper .motion-preview.is-animating {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}

.editor-styles-wrapper .motion-preview-wrapper {
    position: relative;
    width: 100%;
    will-change: transform, opacity;
    pointer-events: auto;
}

/* エディタレイアウト調整 */
.editor-styles-wrapper .block-editor-block-list__layout [data-block] {
    position: relative;
}

.editor-styles-wrapper .block-editor-block-list__layout {
    position: relative;
    z-index: 1;
}

/* ブロックツールバー */
.block-editor-block-toolbar {
    z-index: 10;
}

/*--------------------------------------------------------------
# Ollie Pro アニメーションのカスタマイズ
--------------------------------------------------------------*/

/* フェード系アニメーションにスプリングイージングを適用 */
.ollie-animate:not(.ollie-animate-on-scroll):not(.ollie-animate-scaleOnHover)[class*="ollie-animate-fadeIn"],
.ollie-animate-on-scroll.ollie-animated[class*="ollie-animate-fadeIn"] {
    animation-timing-function: var(--spring-easing) !important;
    animation-duration: var(--animation-duration, var(--spring-duration, 1s)) !important;
}

/*--------------------------------------------------------------
# テキストリンク ホバーエフェクト
--------------------------------------------------------------*/

/* すべてのテキストリンク（ボタン除く） - 下線エフェクト */
a:not(.wp-block-button__link):not(.wp-element-button) {
  background: linear-gradient(0deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary)) no-repeat right bottom / 0 var(--bg-h);
  transition: background-size 350ms;
  --bg-h: 2px;
  padding-bottom: 2px;
  text-decoration: none;
}



/* ナビゲーションメニュー内のリンクは除外 */
.wp-block-navigation a {
  background: none;
  transition: none;
}

.wp-block-navigation a:hover {
  color: inherit;
}

/* アクセシビリティ対応 */
@media (prefers-reduced-motion: reduce) {
  a:not(.wp-block-button__link):not(.wp-element-button) {
    transition: background-size 150ms ease;
  }
}

/*--------------------------------------------------------------
# アイコン回転アニメーション
--------------------------------------------------------------*/

/* 基本: 90度回転 */
.icon-rotate-90 svg,
.icon-rotate-90 img,
.icon-rotate-90 i {
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

.icon-rotate-90:hover svg,
.icon-rotate-90:hover img,
.icon-rotate-90:hover i,
.wp-block-cover:hover .icon-rotate-90 svg,
.wp-block-cover:hover .icon-rotate-90 img,
.wp-block-cover:hover .icon-rotate-90 i {
  transform: rotate(90deg);
}

/* バリエーション: 180度回転 */
.icon-rotate-180 svg,
.icon-rotate-180 img,
.icon-rotate-180 i {
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

.icon-rotate-180:hover svg,
.icon-rotate-180:hover img,
.icon-rotate-180:hover i,
.wp-block-cover:hover .icon-rotate-180 svg,
.wp-block-cover:hover .icon-rotate-180 img,
.wp-block-cover:hover .icon-rotate-180 i {
  transform: rotate(180deg);
}

/* バリエーション: 360度回転 */
.icon-rotate-360 svg,
.icon-rotate-360 img,
.icon-rotate-360 i {
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.5s ease;
}

.icon-rotate-360:hover svg,
.icon-rotate-360:hover img,
.icon-rotate-360:hover i,
.wp-block-cover:hover .icon-rotate-360 svg,
.wp-block-cover:hover .icon-rotate-360 img,
.wp-block-cover:hover .icon-rotate-360 i {
  transform: rotate(360deg);
}

/* バリエーション: ゆっくり回転 */
.icon-rotate-slow svg,
.icon-rotate-slow img,
.icon-rotate-slow i {
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.6s ease;
}

.icon-rotate-slow:hover svg,
.icon-rotate-slow:hover img,
.icon-rotate-slow:hover i,
.wp-block-cover:hover .icon-rotate-slow svg,
.wp-block-cover:hover .icon-rotate-slow img,
.wp-block-cover:hover .icon-rotate-slow i {
  transform: rotate(90deg);
}

/* バリエーション: 素早く回転 */
.icon-rotate-fast svg,
.icon-rotate-fast img,
.icon-rotate-fast i {
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.15s ease;
}

.icon-rotate-fast:hover svg,
.icon-rotate-fast:hover img,
.icon-rotate-fast:hover i,
.wp-block-cover:hover .icon-rotate-fast svg,
.wp-block-cover:hover .icon-rotate-fast img,
.wp-block-cover:hover .icon-rotate-fast i {
  transform: rotate(90deg);
}

/* バリエーション: 常に回転し続ける */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.icon-spin svg,
.icon-spin img,
.icon-spin i {
  display: inline-block;
  vertical-align: middle;
  animation: spin 2s linear infinite;
}

/* アクセシビリティ対応: アニメーション無効化 */
@media (prefers-reduced-motion: reduce) {
  .icon-rotate-90 svg,
  .icon-rotate-90 img,
  .icon-rotate-90 i,
  .icon-rotate-180 svg,
  .icon-rotate-180 img,
  .icon-rotate-180 i,
  .icon-rotate-360 svg,
  .icon-rotate-360 img,
  .icon-rotate-360 i,
  .icon-rotate-slow svg,
  .icon-rotate-slow img,
  .icon-rotate-slow i,
  .icon-rotate-fast svg,
  .icon-rotate-fast img,
  .icon-rotate-fast i,
  .icon-spin svg,
  .icon-spin img,
  .icon-spin i {
    transition: none;
    animation: none;
  }

  .icon-rotate-90:hover svg,
  .icon-rotate-90:hover img,
  .icon-rotate-90:hover i,
  .icon-rotate-180:hover svg,
  .icon-rotate-180:hover img,
  .icon-rotate-180:hover i,
  .icon-rotate-360:hover svg,
  .icon-rotate-360:hover img,
  .icon-rotate-360:hover i,
  .icon-rotate-slow:hover svg,
  .icon-rotate-slow:hover img,
  .icon-rotate-slow:hover i,
  .icon-rotate-fast:hover svg,
  .icon-rotate-fast:hover img,
  .icon-rotate-fast:hover i {
    transform: none;
  }
}