/* SimiSiteBuilder (SSB) — Generated CSS */

*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;overflow-x:hidden;}
img{max-width:100%;}
a{color:inherit;}
.site-table{width:100%;height:100%;border-collapse:collapse;table-layout:fixed;background:#fff;color:#333;font-size:14px;font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;}
.site-table td{border:1px solid #9aa7b8;padding:6px 8px;vertical-align:middle;overflow:hidden;word-break:break-word;line-height:1.45;}
.site-table .table-head td{background:#eef3fb;font-weight:bold;}

/* レスポンシブ対応 */
/* overflow-x は clip を優先（hidden はスクロールコンテナを作るため
   position:sticky（固定表示）が効かなくなる。clip は切り取りのみ） */
html,body{margin:0;padding:0;overflow-x:hidden;overflow-x:clip;width:100%;}
#page-outer{
  width:100%;
  position:relative;
  overflow-x:hidden;
  overflow-x:clip;
  overflow-y:visible;
  /* position:absolute なキャンバスを包む。高さはJSが設定 */
}
.ssb-fixed-layer{position:fixed;left:0;top:0;pointer-events:none;transform-origin:top left;overflow:hidden;overflow:clip;}
.ssb-fixed-layer>*{pointer-events:auto;}
.ssb-fixed-layer.ssb-fixed-active{
  filter:none;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.ssb-fixed-layer [data-fixed-palette-bg],
.ssb-fixed-layer [data-fixed-palette-text]{transition:background .35s ease,color .35s ease,border-color .35s ease,filter .25s ease;}
.ssb-fixed-layer.ssb-fixed-active [data-fixed-palette-bg]{
  box-shadow:none!important;
}
.ssb-anchor-link-active-host{filter:invert(1);transition:filter .25s ease;}
.site-canvas{
  transform-origin:top left;
  display:block;
  /* position:absolute なのでドキュメント幅に影響しない */
}
.pc-layout{display:block;}
.sp-layout{display:none;}
.single-layout{display:block;}
@media(max-width:767px){
  .pc-layout{display:none!important;}
  .sp-layout{display:block!important;}
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInUp{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInDown{from{opacity:0;transform:translateY(-60px)}to{opacity:1;transform:translateY(0)}}
@keyframes zoomIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes zoomOut{from{opacity:0;transform:scale(1.4)}to{opacity:1;transform:scale(1)}}
@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.95)}100%{transform:scale(1)}}
@keyframes bounceInUp{0%{opacity:0;transform:translateY(80px)}60%{opacity:1;transform:translateY(-16px)}80%{transform:translateY(6px)}100%{transform:translateY(0)}}
@keyframes flipIn{from{opacity:0;transform:perspective(400px) rotateY(-90deg)}to{opacity:1;transform:perspective(400px) rotateY(0)}}
@keyframes flipInX{from{opacity:0;transform:perspective(400px) rotateX(-90deg)}to{opacity:1;transform:perspective(400px) rotateX(0)}}
@keyframes rotateIn{from{opacity:0;transform:rotate(-200deg)}to{opacity:1;transform:rotate(0)}}
@keyframes rollIn{from{opacity:0;transform:translateX(-100%) rotate(-120deg)}to{opacity:1;transform:translateX(0) rotate(0)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes heartBeat{0%,100%{transform:scale(1)}14%,42%{transform:scale(1.12)}28%,70%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-6px)}20%,40%,60%,80%{transform:translateX(6px)}}
@keyframes tada{0%,100%{transform:scale(1)}10%,20%{transform:scale(.95) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.05) rotate(3deg)}40%,60%,80%{transform:scale(1.05) rotate(-3deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes swing{0%,100%{transform:rotate(0)}20%{transform:rotate(12deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}80%{transform:rotate(-4deg)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
@keyframes mascotBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes peekaboo{0%,100%{transform:translateY(0)}20%{transform:translateY(0)}45%{transform:translateY(-12px) rotate(-2deg)}70%{transform:translateY(-5px) rotate(1deg)}}
@keyframes hop{0%,100%{transform:translateY(0) scale(1,1)}35%{transform:translateY(-18px) scale(1.03,.97)}55%{transform:translateY(-5px) scale(.98,1.03)}70%{transform:translateY(0) scale(1.04,.96)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes rubberBand{0%,100%{transform:scale(1,1)}30%{transform:scale(1.25,.75)}40%{transform:scale(.75,1.25)}50%{transform:scale(1.15,.85)}65%{transform:scale(.95,1.05)}75%{transform:scale(1.05,.95)}}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 4px rgba(233,69,96,.3))}50%{filter:drop-shadow(0 0 18px rgba(233,69,96,.9))}}

/* 「スクロール時発動」を選んだ要素だけ、画面に入るまで隠す。 */
[data-anim]{transition:opacity .1s;}
[data-anim][data-anim-scroll="1"]{opacity:0;}
[data-anim].sb-visible,[data-anim].anim-now{opacity:var(--anim-final-opacity,1);animation-name:var(--anim-name);animation-duration:var(--ad,.6s);animation-delay:var(--adl,0s);animation-iteration-count:var(--ai,1);animation-fill-mode:both;animation-timing-function:var(--ae,ease);}

/* Hover effects */
.hover-grow{transition:transform .2s ease;}
.hover-grow:hover{transform:scale(1.06);}
.hover-shadow{transition:box-shadow .3s ease;}
.hover-shadow:hover{box-shadow:0 10px 30px rgba(0,0,0,.2)!important;}
.hover-lift{transition:transform .2s ease,box-shadow .2s ease;}
.hover-lift:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.2)!important;}
.hover-glow{transition:filter .3s ease;}
.hover-glow:hover{filter:drop-shadow(0 0 12px rgba(233,69,96,.7));}
.hover-shake:hover{animation:shake .4s ease;}

/* ===== SLIDESHOW ===== */
.ss-wrap{position:absolute;overflow:hidden;}
.ss-slide{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;}
.ss-prev,.ss-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.38);color:#fff;border:none;padding:10px 14px;cursor:pointer;font-size:20px;z-index:20;border-radius:4px;line-height:1;transition:background .2s;}
.ss-prev{left:10px;}
.ss-next{right:10px;}
.ss-prev:hover,.ss-next:hover{background:rgba(0,0,0,.65);}
.ss-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:20;}
.ss-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);border:none;cursor:pointer;padding:0;transition:background .3s,transform .3s;}
.ss-dot.ss-dot-active{background:#fff;transform:scale(1.25);}
@keyframes ss-kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.18) translate(-2%,-2%)}}