:root{
  --main-color: #ffee7d;
  --accent:#f49c2d;
  --asort: #c4d700;
  --title: #4b3724;
  --muted: #7c5f46;
  --ink:#1b1f23;    
  --panel:#f7f7f9;
  --border:#e5e7eb;
  --main-width: 1000px;
}

/* header */
header {position: relative;display: flex;align-items: center;justify-content: space-between;background-color: white;padding: 10px 20px;z-index: 1001;margin: 0;}
.logo-area {display: flex;align-items: center;text-decoration: none;}
.logo-area img {height: 50px;}
.site-name {font-size: 24px;font-weight: bold;margin-left: 10px;color: black;text-decoration: none;}
.paw {font-size: 24px;margin-left: 5px;}
.nav-link {margin-left: clamp(10px, 2vw, 20px);font-size: clamp(14px, 2vw, 20px);text-decoration: none;color: black;font-weight: bold;}
.sns-links {margin-left: clamp(10px, 2vw, 40px);}
.sns-links img {width: 30px;height: 30px;margin: auto 5px;cursor: pointer;transition: transform 0.2s ease;}
.sns-links img:hover {transform: scale(1.1);}

html,body{height:100%;margin:0;background:#fff;color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto}
.flex-column{display: flex; flex-direction: column;}
.flex-row{display: flex; flex-direction: row;}

.Ads-Container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: start;
}

.vert-ads-region1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 300px;
  height: 1300px;
  margin-top: 20px;
  /* border: solid 1px red; */
}

.hori-ads-region1 {
  display: none;
}

.hori-ads-region2 {
  display: none;
}

@media (max-width: 1500px) {
  .Ads-Container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .vert-ads-region1 {
    display: none;
  }
  .hori-ads-region1 {
    display: block;
    margin-top: 20px;
    width: 728px;
    height: 90px;
    /* border: solid 1px red; */
  }
  .hori-ads-region2 {
    display: none;
  }
}

@media (max-width: 728px) {
  .Ads-Container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .vert-ads-region1 {
    display: none;
  }
  .hori-ads-region1 {
    display: none;
  }
  .hori-ads-region2 {
    display: block;
    margin-top: 20px;
    width: 300px;
    height: 100px;
    /* border: solid 1px red; */
  }
}

.site-header{width: 100%;justify-content: start;align-items: center;background-color: var(--asort);color: white;}
.site-header a{justify-content: start;align-items: center;color: white;text-decoration: none;}
.site-header img{width: clamp(30px, 5vw, 50px);height: clamp(30px, 5vw, 50px);margin: 0 10px;}
.site-header h1{font-weight: 900; margin: 10px 0;font-size: clamp(20px,5vw,40px);}

.main-container{padding: 10px;width: 80%;max-width: var(--main-width);}
.title-font{font-size: clamp(15px, 3vw, 24px);color: var(--title);font-weight: 800;}

aside{padding:16px;border-right:1px solid var(--border);background:var(--panel)}
main{position:relative}
canvas{display:block;width:100%;height:100%}

.panel{position:relative;display:flex;gap:8px;align-items:center;justify-content: center;margin-top: 10px;margin-bottom: 10px;
  background:#ffffffcc;backdrop-filter:blur(6px);padding:10px 12px;border-radius:12px;border:1px solid var(--border)}
button{  all:unset;cursor:pointer;padding:6px 10px;border-radius:10px;background:var(--accent);color:#fff;
  height: clamp(20px, 4vw, 50px);width: 18%;justify-content: center;text-align: center;font-size: clamp(10px, 2vw, 20px);}
button:active{transform:translateY(1px)}
button:disabled,
button.btn-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

h2{margin:4px 0 10px 0;font-size:18px}
.step{padding:8px 10px;border-radius:8px;background:#fff;border:1px solid var(--border);margin-bottom:8px;cursor:pointer}
.step.active{outline:2px solid var(--accent);outline-offset:1px}
.row{display:flex;gap:8px;align-items:center;margin-top:10px}
.label{color:var(--muted);font-size:12px}

.footer {display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 20px;background-color: var(--asort);
  color: white;margin-top: 40px;height: clamp(100px, 12vw, 150px);font-size: clamp(12px, 2vw, 22px);font-weight: 800;}
.footer a {color: white;text-decoration: none;}

.desc {
  color: var(--muted);
  font-weight: 700;
  font-size: clamp(14px, 2vw ,20px)
}

.rope-frame{--rope-w: 10px;--rope-angle: 45deg;border: 8px solid transparent;border-radius: 18px;     
  background:
    linear-gradient(#fff, #fff) padding-box,
    repeating-linear-gradient(
      var(--rope-angle),
      var(--accent) 0 calc(var(--rope-w) * 1),
      var(--asort)  calc(var(--rope-w) * 1) calc(var(--rope-w) * 2)
    ) border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    0 6px 16px rgba(16,24,40,.10);
  box-sizing: border-box;
}

/* セクション間の“ロープ仕切り” */
.rope-divider{
  width: 100%;
  max-width: var(--main-width);  
  height:7px; margin:28px 0;
  border-radius:999px;
  background:
    repeating-linear-gradient(45deg,
      var(--accent) 0 10px, var(--asort) 10px 20px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 10px rgba(2,6,23,.06);
  opacity:.9;
  margin: 0 auto;
}