*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}@supports not (min-block-size:100dvb){:where(html){block-size:100%}}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){block-size:100%;block-size:100dvb;line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(button){border-style:solid}:where(a){text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem)}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}
:root {font-size:62.5%;}
html,body {font-size:clamp(10px, 1.2vw, 15px);}
body {font-family:"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;height:100%;width:100%;background:#141414;background-color:#fff;color:aliceblue;background-size:cover;background-position:center;transition:background-image 0.5s ease-in-out;background-image:url('/image/bg.png');background-attachment:fixed;background-color:#141414;}

h1 {
    color:#ffffffed;
    font-size:3.2rem;
    text-shadow:0 0 10px #df8614, 0 0 20px #dbac0e, 0 0 30px #9c9c9c;
}

h2{color:#444;text-shadow:2px 2px 2px #fff,-2px 2px 2px #fff,-2px -2px 2px #fff,2px -2px 2px #fff;/*box-shadow:0px 5px 14px 1px #fff;*/position:sticky;font-size:3rem;top:2rem;z-index:2;}
h4{padding:2rem;}
#section1 h2{font-size:1.6rem;box-shadow:none;text-shadow:none;color:#fff;line-height:1.7;padding:2rem;}
/*.container{opacity:0;animation:fade-in 1.2s ease-out forwards;}*/
/* 背景のパーティクルアニメーション */
#section1::before {content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 80%, rgba(223, 134, 20, 0.3) 0%, transparent 50%),radial-gradient(circle at 80% 20%, rgba(219, 172, 14, 0.3) 0%, transparent 50%);animation:particle-float 8s ease-in-out infinite;}

@keyframes particle-float {0%, 100% { transform:translateY(0px) rotate(0deg); }50% { transform:translateY(-20px) rotate(180deg); }}

/* ヒーローテキストのアニメーション */
#section1 .header {opacity:0;transform:translateY(50px);animation:fadeInUp 1.2s ease-out forwards;}
#section1 .header .flip-logo {animation:logoEntrance 2s ease-out 0.5s both;}
#section1 .header h1 {animation:titleGlow 3s ease-in-out infinite alternate;}
@keyframes fadeInUp {to {opacity:1;transform:translateY(0) scale(1);}}
@keyframes logoEntrance {0% {opacity:0;transform:scale(0.3) rotate(-180deg);}100% {opacity:1;transform:scale(1) rotate(0deg);}}
@keyframes titleGlow {0% {text-shadow:0 0 10px #df8614, 0 0 20px #dbac0e, 0 0 30px #9c9c9c;}
	100% {text-shadow:0 0 20px #df8614, 0 0 30px #dbac0e, 0 0 40px #ffffff88, 0 0 50px #df8614;}}
/* 3D変形エフェクト */
#section1 .header h1 {transform-style:preserve-3d;animation:titleRotate 8s linear infinite;}
@keyframes titleRotate {0% { transform:rotateX(0deg) rotateY(0deg); }25% { transform:rotateX(5deg) rotateY(5deg); }}

        /* h2要素（タイピング対象）の初期状態とアニメーション設定 */
        .f {
            font-size:clamp(1.2rem, 3vw + 0.5rem, 2rem); /* レスポンシブなフォントサイズ */
            font-weight:400;
            margin:0.5rem auto;
            max-width:900px;
            
            /* タイピング表示のために初期は空にする */
            text-align:left; /* テキストが中央揃えだとカーソル位置がおかしくなるため左揃えに変更 */
            min-height:2.5rem; /* テキストがないときに要素が消えないように高さを確保 */
            padding-right:0.15em; /* カーソルを考慮したパディング */
        }
        
        /* 1文字ごとの span (スペースの表示を安定させる) */
        .f > span:not(.typing-cursor) {
            display:inline-block;
        }

        /* カーソル要素のスタイル */
        .typing-cursor {
            display:inline-block;
            width:0.2em; /* カーソルの幅 */
            background-color:#ab7700; /* カーソルの色 */
            animation:blink-caret 0.75s step-end infinite;
            /* 親要素の高さに合わせる */
            height:1.2em;
            vertical-align:middle;
            margin-left:2px;
            transform:translateY(-0.1em); /* 微調整 */
        }
        
        /* カーソル点滅アニメーション */
        @keyframes blink-caret {
            from, to { opacity:0 }
            50% { opacity:1 }
        }

        /* アニメーション終了時のカーソル非表示 */
        .f.finished .typing-cursor {
           display:none;
        }

/* 浮遊するキーワード */
#section1::after {content:'';position:absolute;top:20%;right:10%;width:200px;height:200px;background:linear-gradient(45deg, transparent 30%, rgba(223, 134, 20, 0.1) 70%);border-radius:50%;animation:float-keywords 6s ease-in-out infinite;opacity:0.6;}
@keyframes float-keywords {0%, 100% {transform:translateY(0px) rotate(0deg);}50% {transform:translateY(-30px) rotate(180deg);}}

.container {overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth;position:absolute;top:50px;bottom:1em;left:0;right:0;margin:0 0em;}
.header {
    display:flex;gap:1rem;align-items:center;font-size:clamp(1.2rem, 2.5vw, 2.5rem);
	.flip-logo{background-image:url('/image/logo.png');background-size:200px;height:200px;line-height:200px;background-repeat:no-repeat;
	width:200px;transform-style:preserve-3d;}
}
.section-item {
	line-height:1.7;padding:1rem 2rem 1rem;height:100%;max-height:91vh;91svh;scroll-snap-align:start;position:relative;
	img{filter:brightness(0.9) blur(68px);transform:rotateX(95deg);transition:.7s;box-shadow:1px 1px 12px 3px #0000009e;}
	.text{overflow:auto;border:1px solid #f6f6f64a;padding:1em;width:100%;background:#59595a52;
	  font-size:clamp(1.22rem, 1.1vw, 1.5rem);/* 最小1.22rem、最大1.5remで可変 */}
	h3{padding:1em;}
}
.client{
    height: 74vh;
    overflow-y: auto;
}
.grid2 {padding:1em 1px;max-height:calc(100vh - 12em);max-height:calc(100svh - 12em);/*overflow-y:auto;*/}
.show img{filter:brightness(1) blur(0);transform:rotateX(0);}
img{max-height:62vh;max-height:62svh}
#section1 {background-image:url('/image/1.png');display:block;background-size:cover;background-position:bottom;background-attachment:fixed;overflow:hidden;}
#section4 .grid{display:grid;align-items:center;grid-template-columns:1fr 1fr 1fr;gap:2em;}
p {color:#d6e7ff;border-bottom:4px solid #d2d2fd;display:table;}
.grid2 {display:grid;gap:1rem;grid-template-columns:1fr 1fr;justify-items:center;}
#headerLogo{display:flex;align-items:center;transform:translateY(-5em);transition:0.3s;position:absolute;left:5px;;}
#headerLogo.show{transform:translateY(0);}
.footer {
	color:#c0c0c0;font-size:1.15rem;position:fixed;bottom:0rem;width:100vw;text-align:center;
	span{display:inline-block;}
}
#pagetop {position:fixed;bottom:3rem;right:5rem;box-shadow:inset 0px 0px 15px #ffffff4f;padding:5px;border-radius:8px;transition:.6s;cursor:pointer;transform:translateY(12rem);}
#pagetop.show {transform:translateY(0);}
#pagetop:hover {background:#000;}
div[id*="section"].section-item{opacity:0;}
div[id*="section"].show{opacity:1;
.arrow-wrap{opacity:1;transition-delay: 3s;transition-property: opacity;animation:fade-in 2s ease-in-out 2s forwards;}

}

.business-content {
	ul {list-style:none;padding:0;}
	li {margin-bottom:20px;}
	h3 {color:#007BFF;font-size:1.8rem;margin-bottom:10px;}
}
.paypal-wrap {padding:0 2em 1em;margin:0 auto;max-width:300px;}
.subscription{margin:2em 0 1em;font-size:115%;}
a{color:aliceblue;text-decoration:none;}

.link-wrap {
	position:fixed;top:0;right:0;display:flex;gap:1rem;align-items:center;background:#000000ad;justify-content:flex-end;
	height:50px;padding-right:1rem;z-index:100;width:100%;
	a {position:relative;display:inline-block;overflow:hidden;transition:0.4s ease;border-bottom:5px solid #ffffff21;}
	a:hover{transform:scale(0.94);}
	a:hover::before {transform:translate(-50%, -50%) scale(1);}
	.active {border-bottom:5px solid #e99614db;transition:1s ease;}
	.block{display:none;}
}
.paypal-button-container .paypal-button-row .paypal-button-text, .paypal-button-container .paypal-button-row .paypal-button-space {
    font-size:10px;
}
.slider-container {
	width:100%;overflow:hidden;position:relative;margin:0 auto;padding-top:2em;
	.slider {display:flex;transition:transform 0.5s ease-in-out;touch-action:pan-y pinch-zoom;}
	.slide {min-width:100%;display:grid;justify-items:center;gap:1em;}
	.slide img {object-fit:cover;}
	.slide-anchor {display:grid;gap:9px;padding-top:2em;grid-template-columns:repeat(5, 1fr);}
	.slide-anchor div {cursor:pointer;opacity:0.6;transition:opacity 0.3s;}
	.slide-anchor div:hover {opacity:1;}
	.slide-anchor div.active {opacity:1;border:2px solid #fff;transform:scale(1.1);}
}
.section-inner{
    height:100%;overflow:hidden;
    position:relative;
}
.arrow-outer {width:100%;height:57px;position:sticky;bottom:0;display:flex;justify-content:center;
	.arrow-wrap {display:inline-block;width:51px;height:51px;background:#ffffff17;border-radius:50%;box-shadow:inset 0px 0px 15px #ffffff4f;
				position:sticky;align-items:center;bottom:30px;display:flex;justify-content:center;opacity:0;}
	.arrow {width:28px;height:28px;border-bottom:3px solid #60a5fa;border-right:3px solid #60a5fa;transform:rotate(45deg);animation:bounce 2s infinite;display:block;}
}

@keyframes bounce {0%, 20%, 50%, 80%, 100% {transform:translateY(0) rotate(45deg);}40% {transform:translateY(-10px) rotate(45deg);}60% {transform:translateY(-5px) rotate(45deg);}}
@keyframes fade-in {0% {opacity:0;}100% {opacity:1;}}

@media (max-width:600px) {
body {background-image:url('/image/bg_resize_600.png');}
	.header{
		.flip-logo {background-size:26.5vw;height:26.5vw;width:26.5vw;}
	}
	.grid2{grid-template-columns:auto;grid-template-rows:34% auto;}
	.grid2 > div{overflow:hidden;width:100%;height:100%;}
	#section4 .grid {grid-template-columns:1fr 1fr;gap:1em;}
	.link-wrap{
		span{display:none;}
		.block{display:inline-block;}
	}
	#pagetop {right:1rem;}
	.section-item {padding:1em 2em;grid-template-rows:6em auto;}
	.business-content li {margin:0;}
.grid2 img {
    object-fit:cover;
    width:93vw;
    height:276px;
    object-position:0 -20vw;
}
	#section5 .grid2 img {    object-position:0 -7vw;}
	#section6 .text {display:grid;grid-template-columns:5em auto;gap:10px 1em;}
	.footer{font-size:1.1rem;}
}

@media (orientation:landscape) {
}