/* Shared view and download icons */
.view-count,
.download-count {
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.stat-cat-icon {
  display:inline-block;
  width:18px;
  height:18px;
  flex:0 0 18px;
}

.stat-foot-icon {
  background-image: url("images/icon-view.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.stat-box-icon {
  background-image: url("images/icon-dl.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.popular-section .stat-cat-icon,
.sidebar-popular .stat-cat-icon {
  display:none;
}
:root{
  --paper:#f7f8f4;
  --white:#fff;
  --ink:#182b29;
  --muted:#62716b;
  --green:#205c49;
  --mint:#dcece2;
  --line:#dce2db;
  --radius:18px
}

*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  font-size:16px;
  line-height:1.8;
  overflow-wrap:anywhere
}

a{
  color:inherit;
  text-decoration:none
}

button,
input,
textarea,
select{
  font:inherit
}

button,
a,
input,
textarea{
  touch-action:manipulation
}

button{
  cursor:pointer
}

a:hover{
  color:var(--green)
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:0;
  outline-offset:4px
}

img{
  max-width:100%;
  height:auto;
  vertical-align:middle
}

h1,
h2,
h3,
p{
  margin-top:0
}

h1,
h2,
h3{
  line-height:1.45;
  letter-spacing:-.035em
}

h2{
  font-size:clamp(24px, 2.6vw, 32px)
}

h3{
  font-size:20px
}

.entry-content > p,
.update-card p,
h3,
h4,
h5,
h6,
ul,ol {
  margin-left: 30px;
  margin-right: 30px;
  text-align: justify;
}

@media (max-width:600px) {
  .entry-content > p,
  .update-card p,
  h3,
  h4,
  h5,
  h6,
  ul,ol {
  margin-left: 15px;
  margin-right: 15px;
  }
}

.container{
  width:min(1180px, calc(100% - 64px));
  margin-inline:auto
}

.screen-reader-text,
.skip-link:not(:focus){
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}

.skip-link:focus{
  position:fixed;
  top:8px;
  left:8px;
  z-index:100;
  background:#fff;
  padding:12px
}

.site-header{
  background:rgba(247, 248, 244, .97);
  border-bottom:1px solid var(--line)
}

.header-inner{
  display:flex;
  min-height:94px;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:850;
  letter-spacing:-1px;
  font-size:23px;
  white-space:nowrap
}

.brand b{
  font-size:18px;
  font-weight:450
}

.brand-icon{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  line-height:1;
  padding-bottom:6px
}

.custom-logo-link img{
  max-height:56px;
  width:auto
}

.menu {
  display:flex;
  align-items:center;
  gap:30px;
  list-style:none;
  margin:0;
  padding:0;
  font-size:14px;
  font-weight:600;
  color:var(--ink);
}

.menu a,
.menu a:link,
.menu a:visited {
  display:block;
  padding-block:12px;
  color:var(--ink);
  text-decoration:none;
  -webkit-text-fill-color:var(--ink);
}

.menu a:hover,
.menu a:focus-visible {
  color:var(--green);
}

.menu li {
  position:relative;
}

.sub-menu{
  list-style:none;
  padding:12px;
  background:var(--white);
  border:1px solid var(--line);
  min-width:190px;
  position:absolute;
  top:100%;
  right:0;
  z-index:5;
  display:none
}

.menu li:hover>.sub-menu,
.menu li:focus-within>.sub-menu{
  display:block
}

/* =====================================================
   MOBILE NAVIGATION
===================================================== */
.nav-toggle {
  display:none;
  position:relative;
  z-index:1002;
  width:46px;
  height:46px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
  appearance:none;
  -webkit-appearance:none;
}

.nav-toggle-line {
  position:absolute;
  left:10px;
  width:26px;
  height:1.5px;
  background:var(--ink);
  border-radius:10px;
  transition:transform .35s cubic-bezier(.22, 1, .36, 1), top .35s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}

.nav-toggle-line:nth-child(1) {
  top:14px;
}

.nav-toggle-line:nth-child(2) {
  top:22px;
}

.nav-toggle-line:nth-child(3) {
  top:30px;
}

.nav-toggle.is-open .nav-toggle-line:nth-child(1) {
  top:22px;
  transform:rotate(45deg);
}

.nav-toggle.is-open .nav-toggle-line:nth-child(2) {
  opacity:0;
  transform:scaleX(.3);
}

.nav-toggle.is-open .nav-toggle-line:nth-child(3) {
  top:22px;
  transform:rotate(-45deg);
}

.nav-backdrop {
  position:fixed;
  inset:0;
  z-index:998;
  background:rgba(24, 43, 41, .28);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  opacity:0;
  transition:opacity .35s ease;
}

.nav-backdrop.is-visible {
  opacity:1;
}

.mobile-nav-head {
  display:none;
}

@media (max-width:760px) {
  .header-inner {
	min-height:76px;
	padding-block:10px;
	flex-wrap:nowrap;
  }

  .nav-toggle:not([hidden]) {
	display:block;
	flex-shrink:0;
  }

  #primary-nav {
	position:fixed;
	top:0;
	right:0;
	z-index:999;
	width:min(86vw, 390px);
	height:100dvh;
	padding:calc(95px + env(safe-area-inset-top)) 32px 40px;
	background:linear-gradient(145deg, #fff 0%, #f7f8f4 65%, #edf3ed 100%);
	box-shadow:-20px 0 60px rgba(24, 43, 41, .12);
	overflow-y:auto;
	transform:translateX(105%);
	visibility:hidden;
	transition:transform .5s cubic-bezier(.22, 1, .36, 1), visibility .5s;
  }

  #primary-nav.is-open {
	transform:translateX(0);
	visibility:visible;
  }

  .mobile-nav-head {
	display:block;
	margin-bottom:24px;
	padding-bottom:14px;
	border-bottom:1px solid var(--line);
  }

  .mobile-nav-label {
	font-size:10px;
	font-weight:750;
	letter-spacing:.2em;
	color:var(--green);
  }

  #primary-nav .menu {
	display:block;
	margin:0;
	padding:0;
	list-style:none;
  }

  #primary-nav .menu > li {
	position:relative;
	border-bottom:1px solid rgba(24, 43, 41, .09);
	opacity:0;
	transform:translateX(18px);
	transition:opacity .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
  }

  #primary-nav.is-open .menu > li {
	opacity:1;
	transform:translateX(0);
  }

  #primary-nav.is-open .menu > li:nth-child(1) {
	transition-delay:.08s;
  }

  #primary-nav.is-open .menu > li:nth-child(2) {
	transition-delay:.12s;
  }

  #primary-nav.is-open .menu > li:nth-child(3) {
	transition-delay:.16s;
  }

  #primary-nav.is-open .menu > li:nth-child(4) {
	transition-delay:.20s;
  }

  #primary-nav.is-open .menu > li:nth-child(5) {
	transition-delay:.24s;
  }

  #primary-nav.is-open .menu > li:nth-child(6) {
	transition-delay:.28s;
  }

  #primary-nav .menu > li > a {
	position:relative;
	display:flex;
	align-items:center;
	min-height:64px;
	padding:12px 36px 12px 2px;
	color:var(--ink);
	font-size:16px;
	font-weight:650;
	letter-spacing:-.02em;
	-webkit-text-fill-color:var(--ink);
  }

  #primary-nav .menu > li > a::after {
	content:"→";
	position:absolute;
	right:3px;
	top:50%;
	color:var(--green);
	font-size:17px;
	font-weight:400;
	transform:translateY(-50%);
	transition:transform .25s ease;
  }

  #primary-nav .menu > li > a:hover::after, #primary-nav .menu > li > a:focus-visible::after {
	transform:translate(4px, -50%);
  }

  #primary-nav .sub-menu {
	position:static;
	display:block;
	min-width:0;
	margin:-4px 0 14px;
	padding:0 0 0 14px;
	border:0;
	border-left:1px solid var(--line);
	background:transparent;
  }

  #primary-nav .sub-menu a {
	padding:7px 10px;
	color:var(--muted);
	font-size:13px;
	font-weight:500;
	-webkit-text-fill-color:var(--muted);
  }

  body.nav-open {
    overscroll-behavior:none;
  }
  
  body.nav-open .site-header {
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  
  .nav-backdrop {
    touch-action:none;
  }

}

@media (min-width:761px) {
  .mobile-nav-head, .nav-backdrop {
	display:none;
  }

}

@media (prefers-reduced-motion:reduce) {
  .nav-toggle-line, #primary-nav, #primary-nav .menu > li, .nav-backdrop {
	transition:none;
  }

}

.home .site-header{border-bottom-color:transparent}



/* Mobile HERO content order */
@media(max-width:760px){
  .hero{
    row-gap:18px;
    padding-top:42px
  }

  .hero-copy{
    display:contents
  }

  .hero .eyebrow{
    order:1;
    width:100%;
    margin:0;
    text-align:center
  }

  .hero h1{
    order:2;
    width:100%;
    margin:0 auto 4px;
    text-align:center
  }

  .hero-device{
    order:3;
    margin-top:4px
  }

  .hero-description{
    order:4;
    width:100%;
    max-width:none;
    margin:2px 0 0
  }

  .hero-actions{
    order:5;
    margin-top:4px
  }

  .hero-stats{
    order:6;
    width:100%;
    margin-top:10px
  }
}
.hero-shell{position:relative;isolation:isolate;overflow:hidden;background:#fff}.hero-shell::before{content:"";position:absolute;inset:-55%;z-index:0;pointer-events:none;background:radial-gradient(circle at 22% 32%,rgba(255,224,137,.42) 0 8%,rgba(255,224,137,0) 35%),radial-gradient(circle at 76% 28%,rgba(72,190,157,.42) 0 10%,rgba(72,190,157,0) 39%),radial-gradient(circle at 66% 78%,rgba(111,169,232,.38) 0 9%,rgba(111,169,232,0) 39%),radial-gradient(circle at 30% 76%,rgba(244,158,132,.22) 0 7%,rgba(244,158,132,0) 37%),#f3f7f4;filter:blur(48px) saturate(105%);animation:hero-gradient-drift 18s linear infinite}.hero-shell::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(to bottom,#fff 0%,rgba(255,255,255,.82) 4%,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 76%,rgba(255,255,255,.72) 92%,#fff 100%)}@keyframes hero-gradient-drift{0%{transform:translate3d(-3%,-2%,0) rotate(0deg) scale(1)}33%{transform:translate3d(4%,-1%,0) rotate(120deg) scale(1.07)}66%{transform:translate3d(1%,5%,0) rotate(240deg) scale(1.03)}100%{transform:translate3d(-3%,-2%,0) rotate(360deg) scale(1)}}

.hero{
position:relative;
z-index:1;
display:grid;
grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
  align-items:center;
  gap:28px;
  min-height:620px;
  padding-block:64px
}

.hero-copy{
  position:relative;
  z-index:2;
  padding-block:20px
}

.eyebrow{
  font-size:11px;
  font-weight:750;
  letter-spacing:.16em;
  color:var(--green);
  margin-bottom:20px
}

.hero h1{
  max-width:600px;
  margin-bottom:24px;
  font-size:clamp(40px,5.4vw,68px);
  font-weight:800;
  line-height:1.36;
  letter-spacing:-.055em
}

.hero-description{
  max-width:520px;
  color:var(--muted);
  font-size:15px;
  font-weight: 600;
  line-height:1.5;
  text-align: justify!important;
}

.hero-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  width:100%;
  max-width:480px;
  margin-top:30px
}

.hero-actions .button{
  width:100%;
  min-width:0;
  justify-content:space-between
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  min-height:54px;
  padding:12px 20px;
  border:1px solid var(--green);
  border-radius:9px;
  background:var(--green);
  color:#fff;
  font-size:14px;
  font-weight:650
}

.button:hover{background:#163f33;color:#fff}
.button-light{background:#fff;color:var(--green);border-color:var(--line)}
.text-link{font-size:14px;font-weight:650;text-underline-offset:5px}
.text-link:hover{text-decoration:underline}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:560px;
  margin:34px 0 0
}

.hero-stats>div{
  min-width:0;
  padding:0 18px;
  border-left:1px solid var(--line)
}

.hero-stats>div:first-child{padding-left:0;border-left:0}
.hero-stats dt,.hero-stats dd{margin:0}
.hero-stats dt{display:flex;align-items:baseline;gap:2px;line-height:1.15}
.hero-stats dt strong{font-family:"Poppins",sans-serif;font-size:clamp(26px,2.6vw,38px);font-weight:700;letter-spacing:-.04em}
.hero-stats dt span{font-size:22px;font-weight:700}
.hero-stats dd{margin-top:5px;color:var(--muted);font-size:12px;white-space:nowrap}

/* HERO iPhone mock */
.hero-device{position:relative;display:grid;place-items:center;align-self:stretch;min-height:500px;margin:0}
.hero-phone{position:relative;width:260px;padding:9px;border:3px solid #142320;border-radius:48px;background:#142320;box-shadow:0 28px 55px rgba(20,45,37,.22);transform:rotate(5deg);animation:hero-phone-reveal 1.35s cubic-bezier(.22,.8,.3,1) both}
@keyframes hero-phone-reveal{from{opacity:0;transform:translateY(22px) rotate(5deg) scale(.97)}to{opacity:1;transform:translateY(0) rotate(5deg) scale(1)}}
.hero-phone::before{content:"";position:absolute;top:16px;left:50%;z-index:2;width:82px;height:22px;border-radius:999px;background:#101816;transform:translateX(-50%)}
.hero-phone__screen{min-height:520px;padding:22px 15px 18px;border-radius:37px;background:linear-gradient(155deg,#2c6f5c 0%,#173c33 58%,#102a25 100%);color:#fff;overflow:hidden}
.hero-phone__status{display:flex;justify-content:space-between;margin:1px 6px 34px;font:600 9px "Poppins",sans-serif;letter-spacing:.05em;opacity:.9}
.hero-phone__date{margin:0;text-align:center;font-size:10px;color:#d4e4dc}
.hero-phone__time{display:block;margin:0 0 24px;text-align:center;font:500 46px/1 "Poppins",sans-serif;letter-spacing:-.05em}
.hero-phone__widgets{display:grid;gap:12px}
.hero-phone__weather,.hero-phone__tool{display:grid;padding:17px;border:1px solid rgba(255,255,255,.16);border-radius:20px;background:rgba(10,28,24,.72);box-shadow:0 10px 24px rgba(0,0,0,.15)}
.hero-phone__weather>span,.hero-phone__tool>span{font-size:9px;color:#b9d6c8}
.hero-phone__weather>strong{font:600 38px/1.2 "Poppins",sans-serif}
.hero-phone__tool>strong{margin:6px 0;font-size:16px}
.hero-phone__weather>small,.hero-phone__tool>small{font-size:9px;color:#d6e4de}
.hero-device__note{position:absolute;right:40px;bottom:72px;padding:12px 16px;border:1px solid #c6d7cd;border-radius:11px;background:rgba(255,255,255,.92);color:var(--green);font-size:11px;font-weight:700;box-shadow:0 12px 30px rgba(24,60,50,.12);transform:rotate(-2deg)}
@media(max-width:980px){.hero-phone{width:230px}.hero-phone__screen{min-height:460px}.hero-device__note{right:-8px}}
@keyframes hero-phone-reveal-mobile{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:760px){.hero-device{height:340px;min-height:340px;place-items:start center;overflow:hidden}.hero-phone{width:225px;transform:none;animation-name:hero-phone-reveal-mobile}.hero-phone__screen{min-height:450px}.hero-device__note{display:none}}@media(max-width:480px){.hero-device{height:320px;min-height:320px}.hero-phone{width:205px;border-radius:40px}.hero-phone__screen{min-height:405px;border-radius:31px}.hero-phone__time{font-size:40px}}


.hero-photo{
  position:relative;
  align-self:stretch;
  min-height:490px;
  margin:0
}

.hero-photo::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,#f7f8f4 0%,rgba(247,248,244,.76) 8%,transparent 34%),linear-gradient(0deg,#f7f8f4 0%,transparent 15%);
  pointer-events:none
}

.hero-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:0 26px 26px 0;
  object-fit:cover;
  object-position:68% center
  }
  
  .library-section{
    border-bottom:1px solid var(--line);
    padding:60px 0 70px;
    background:#fff
  }

.section-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px
}

.section-heading h2{
  margin:0
}

.section-heading .eyebrow{
  margin-bottom:10px
}

.browse-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:30px
}

.search-form{
  display:flex;
  max-width:520px;
  width:100%;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
  overflow:hidden
}

.search-form input[type=search]{
  min-width:0;
  width:100%;
  background:transparent;
  border:0;
  padding:13px 16px;
  font-size:14px;
  color:var(--ink)
}

.search-form button{
  flex-shrink:0;
  border:0;
  background:transparent;
  padding:12px 16px;
  color:var(--green);
  font-size:14px;
  font-weight:700
}

.search-form:focus-within{
  outline:2px solid var(--green);
  outline-offset:2px
}

.category-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.pill{
  display:inline-block;
  background:#edf3ed;
  padding:4px 10px;
  border-radius:6px;
  font-size:11px;
  font-weight:600;
  color:var(--green)
}

.category-links .pill{
  font-size:12px;
  padding:8px 12px
}

.pill.active{
  background:var(--green);
  color:white
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px
}

.tool-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:white;
  transition:box-shadow .2s, transform .2s
}

.tool-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 25px #1f44380c
}

.card-visual{
  display:grid;
  place-items:center;
  aspect-ratio:1.65;
  background:#e7eee7;
  padding:26px
}

.card-visual:has(img){
  padding:0
}

.card-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:1.65
}

.tool-card:nth-child(3n+2) .card-visual{
  background:#ece9e1
}

.tool-card:nth-child(3n+3) .card-visual{
  background:#e4ebee
}

.mini-widget{
  display:block;
  width:230px;
  max-width:100%;
  padding:15px 18px;
  border-radius:15px;
  background:#fff;
  box-shadow:0 9px 18px #203b3410
}

.mini-widget .widget-label{
  font-size:7px;
  color:#5c7366
}

.widget-glyph{
  display:block;
  font-size:37px;
  line-height:1.7;
  text-align:center;
  color:#9bb8a6;
  font-family:monospace
}

.widget-glyph b{
  color:var(--green)
}

.widget-bottom{
  display:flex;
  justify-content:space-between;
  font-size:8px
}

.card-body{
  padding:23px
}

.card-body h3{
  font-size:19px;
  margin:12px 0 10px
}

.card-body p{
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  font-size:13px;
  color:var(--muted);
  margin-bottom:5px
}

.card-category-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

.card-category-row .like-button{
  flex:0 0 38px;
  width:38px;
  min-height:38px;
  height:38px;
  padding:0;
  border-radius:50%
}

.card-category-row .like-label,
.card-category-row .like-count{
  display:none
}

.card-category-row .like-cat,
.card-category-row .like-cat svg{
  width:24px;
  height:24px
}

.card-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-top:15px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:11px
}

.card-meta > span{
  display:inline-flex;
  align-items:center;
  min-width:0;
  white-space:nowrap
}

.stat-count-number,
.like-count{
  font-family:"Poppins", sans-serif;
  font-style:normal
}

.card-meta .stat-count-number{
  color:var(--ink);
  font-size:12px;
  font-weight:600;
  line-height:1
}

.card-meta .stat-label{
  font-size:11px;
  font-weight:400
}

.start-section{
  padding-block:68px 76px
}

.muted{
  color:var(--muted)
}

.small{
  font-size:12px
}

.section-heading>.muted{
  font-size:12px
}

.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:36px;
  margin-top:40px
}

.steps>div{
  padding-left:22px;
  border-left:1px solid #bdcec2
}

.step-number{
font:600 28px "Poppins", sans-serif;
color:#68927c;
  display:block;
  margin-bottom:18px
}

.steps h3{
  font-size:17px
}

.steps p{
  font-size:13px;
  color:var(--muted);
  margin:0
}

.site-footer{
  border-top:1px solid var(--line);
  padding:42px 0 20px
}

.footer-top,
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:20px
}

.footer-top p{
  font-size:12px;
  color:var(--muted);
  margin-top:12px
}

.footer-bottom{
  border-top:1px solid var(--line);
  margin-top:25px;
  padding-top:18px;
  font-size:11px;
  color:var(--muted)
}

.footer-top .menu{
  font-size:12px;
  flex-wrap:wrap;
  gap:20px
}

.archive-main{
  padding-block:56px 80px;
  min-height:70vh
}

.archive-heading{
  margin-bottom:38px
}

.archive-heading h1{
  font-size:clamp(28px, 4vw, 42px)
}

.archive-description{
  max-width:760px
}

.pagination{
  margin-top:40px
}

.nav-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.page-numbers{
  min-width:44px;
  min-height:44px;
  display:inline-grid;
  place-items:center;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:8px
}

.page-numbers.current{
  background:var(--green);
  color:white
}

.empty-state{
  padding:40px 24px;
  border:1px dashed var(--line);
  border-radius:var(--radius)
}

.empty-state h2{
  font-size:23px
}

.empty-state p{
  color:var(--muted)
}

.single-main{
  padding-block:28px 64px
}

.breadcrumbs{
  font-size:11px;
  color:var(--muted);
  margin-bottom:35px
}

.article-header{
  max-width:860px;
  margin-bottom:34px
}

.article-header h1{
  font-size:clamp(30px, 4vw, 44px);
  margin:16px 0 20px
}

.article-dates{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  font-size:12px;
  color:var(--muted)
}

.disclosure{
  font-size:11px;
  color:var(--muted);
  margin:14px 0 0
}

.article-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 280px;
  gap:56px
}

.article-body{
  min-width:0
}

.article-cover{
  width:100%;
  border-radius:var(--radius);
  margin-bottom:30px
}

.entry-content{
  font-size:16px;
  line-height:2
}

.entry-content h2{
  font-size:27px;
  padding-top:18px;
  margin:38px 0 20px;
  scroll-margin-top:24px
}

.entry-content h3{
  margin-top:28px;
  font-size:21px
}

.entry-content a{
  color:var(--green);
  text-decoration:underline;
  text-underline-offset:4px
}

.entry-content ul,
.entry-content ol{
  padding-left:1.5em
}

.entry-content li{
  margin:8px 0
}

.entry-content pre{
  background:#172d27;
  color:#e9f4ec;
  padding:24px;
  overflow:auto;
  border-radius:0 0 12px 12px;
  font-size:13px;
  line-height:1.8;
  white-space:pre;
  tab-size:2;
  max-width:100%;
  max-height:300px
}

.entry-content pre code{
  font-family:ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space:pre;
  display:block;
  overflow-wrap:normal
}

.code-wrapper{
  margin-block:26px;
  min-width:0
}

.code-wrapper pre{
  margin:0
}

.code-toolbar{
  background:#233e34;
  color:#cce1d2;
  border-radius:12px 12px 0 0;
  padding:9px 14px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  font:11px ui-monospace, monospace
}

.copy-button{
  border:1px solid #678377;
  border-radius:6px;
  background:transparent;
  color:#fff;
  min-height:40px;
  padding:8px 12px;
  font-size:12px
}

.copy-status{
  font-family:inherit;
  font-size:11px
}

.info-panel{
  background:#fff;
  border:1px solid var(--line);
  padding:24px;
  border-radius:14px;
  margin-bottom:20px
}

.info-panel .eyebrow{
  font-size:9px;
  margin-bottom:10px
}

.info-panel h2{
  font-size:17px
}

.info-panel dt{
  font-size:11px;
  color:var(--muted);
  margin-top:15px
}

.info-panel dd{
  font-size:13px;
  margin-left:0
}

.info-panel .text-link{
  font-size:12px
}

.toc ol{
  padding-left:18px;
  font-size:12px
}

.toc li{
  margin:10px 0
}

/* Article share */
.article-share{
  margin-top:54px;
  padding:26px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff
}

.article-share .eyebrow{margin-bottom:8px}
.article-share h2{margin:0 0 18px;font-size:22px}
.share-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.share-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 12px;border:1px solid #cbd8cf;border-radius:9px;background:#f7faf7;color:var(--ink);font-size:12px;font-weight:700;line-height:1.3;text-decoration:none;transition:background .2s,border-color .2s,color .2s,transform .2s}
.share-button:hover,.share-button:focus-visible{border-color:#9ebaaa;background:#e9f3ec;color:var(--green);transform:translateY(-1px)}
.share-instagram{appearance:none;cursor:pointer}
.share-status{min-height:0;margin:10px 0 0;color:var(--green);font-size:11px}
.share-status:empty{display:none}

@media(max-width:560px){
  .article-share{margin-top:42px;padding:20px}
  .share-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.affiliate-box{
  margin-top:48px;
  padding:28px;
  background:#edf1e8;
  border:1px solid #d2decc;
  border-radius:16px
}

.affiliate-box h2{
  font-size:23px
}

.affiliate-box>p{
  font-size:14px
}

.affiliate-box .small{
  font-size:11px;
  margin:16px 0 0
}

.tag-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-block:28px
}

.tag-links a{
  padding:5px 12px;
  background:white;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:12px
}

.related-section{
  margin-top:70px;
  padding-top:45px;
  border-top:1px solid var(--line)
}

.page-main{
  max-width:820px;
  padding-block:50px 80px;
  min-height:65vh
}

.error-page{
  text-align:center;
  padding-block:70px 100px;
  min-height:70vh
}

.error-number{
  font:70px ui-monospace, monospace;
  color:var(--green);
  margin-bottom:25px
}

.error-page h1{
  font-size:28px
}

.error-page .search-form{
  margin:28px auto
}

.home-extra{
  padding-bottom:64px;
  max-width:820px
}

.comments-area{
  margin-top:55px;
  max-width:820px
}

.comments-area input:not([type=checkbox]):not([type=submit]),
.comments-area textarea,
.post-password-form input[type=password]{
  display:block;
  max-width:100%;
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px;
  background:white
}

.comments-area input[type=submit],
.post-password-form input[type=submit]{
  padding:12px 20px;
  background:var(--green);
  color:white;
  border:0;
  border-radius:8px
}

.comment-list{
  padding-left:22px
}

.comment-body{
  margin-bottom:24px
}

.comment-meta{
  font-size:12px
}

.comment-author .avatar{
  border-radius:50%;
  margin-right:8px
}

.entry-content table{
  border-collapse:collapse;
  width:100%
}

.entry-content td,
.entry-content th{
  border:1px solid var(--line);
  padding:10px
}

.wp-block-table{
  overflow-x:auto
}

.entry-content blockquote{
  border-left:3px solid var(--green);
  padding-left:20px;
  margin-left:0;
  color:var(--muted)
}

.aligncenter{
  display:block;
  margin-inline:auto
}

.wp-caption-text,
.wp-element-caption{
  font-size:12px;
  color:var(--muted)
}

[hidden]{
  display:none!important
}

@media(max-width:980px){
  .hero{
  grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr);
  gap:18px;
  min-height:570px
}

.hero h1{
  font-size:60px
}

.hero-photo{
  min-height:450px
}

.hero-stats>div{
  padding-inline:12px
}

.hero-stats dd{
  font-size:11px
}

  .card-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px
  }

  .card-body{
	padding:18px
  }

  .article-layout{
	grid-template-columns:minmax(0, 1fr) 240px;
	gap:28px
  }

  .menu{
	gap:18px
  }

  .browse-bar .search-form{
	max-width:100%
  }

}

@media(max-width:760px){
  .container{
	width:calc(100% - 36px)
  }

  .header-inner{
	min-height:76px;
	gap:0
  }

  .brand{
	font-size:21px
  }

  .brand-icon{
	width:34px;
	height:34px;
	font-size:27px
  }

  .brand b{
	font-size:16px
  }

  .hero{
    grid-template-columns:1fr;
    padding:42px 0 0;
    gap:20px
  }
  
  .hero-copy{
    padding:0
  }

  .hero-description{
    font-size:14px
  }
  
  .hero-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    max-width:none
  }
  
  .hero-stats > div{
    text-align:center
  }
  
  .hero-stats dt{
    justify-content:center
  }
  
  .hero-photo{
    width:100%;
    min-height:360px
  }
  
  .hero-photo::before{
    background:linear-gradient(0deg,#f7f8f4 0%,transparent 16%)
  }
  
  .hero-photo img{
    border-radius:20px
  }

  .section-heading{
	align-items:start;
	flex-wrap:wrap
  }

  .section-heading h2{
	font-size:25px
  }

  .library-section{
	padding-block:40px 46px
  }

  .card-grid{
	grid-template-columns:repeat(2, minmax(0, 1fr))
  }

  .card-visual{
	padding:20px
  }

  .card-body h3{
	font-size:17px
  }

  .start-section{
	padding-block:45px
  }

  .steps{
	grid-template-columns:1fr;
	gap:28px;
	margin-top:26px
  }

  .steps>div{
	position:relative;
	padding-left:58px;
	border:0
  }

  .step-number{
	position:absolute;
	left:0;
	top:0
  }

  .steps h3{
	margin-bottom:8px
  }

  .footer-top, .footer-bottom{
	flex-direction:column;
	gap:12px
  }

  .article-layout{
	display:flex;
	flex-direction:column;
	gap:28px
  }

  .article-header h1{
	font-size:31px
  }

  .article-sidebar{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px
  }

  .info-panel{
	padding:18px
  }

  .entry-content{
	font-size:15px
  }

  .entry-content h2{
	font-size:24px
  }

  .entry-content pre{
	padding:18px;
	font-size:12px
  }

  .archive-heading h1{
	font-size:30px
  }

  .related-section{
	margin-top:38px
  }

  .hero .eyebrow{
	font-size:10px
  }

}

@media(max-width:480px){
  .card-grid{
	grid-template-columns:1fr
  }

  .card-visual{
	aspect-ratio:1.85
  }

  .card-visual img{
	aspect-ratio:1.85
  }

  .mini-widget{
	width:235px
  }

  .card-body{
	padding:22px
  }

  .card-body h3{
	font-size:20px
  }
  
  .hero-stats{
    margin-top:28px
  }
  
  .hero-stats>div{
    padding-inline:9px
  }
  
  .hero-stats dt strong{
    font-size:25px
  }
  
  .hero-stats dt span{
    font-size:17px
  }
  
  .hero-stats dd{
    font-size:9px
  }
  
  .hero-photo{
    min-height:290px
  }

  .article-sidebar{
	grid-template-columns:1fr
  }

  .copy-status{
	max-width:140px
  }

  .error-number{
	font-size:54px
  }

  .footer-bottom{
	font-size:10px
  }

  .hero-actions .button{
    gap:8px;
    padding-inline:10px;
    font-size:12px
  }

  .hero-actions{
    gap:8px
  }

  .hero-actions .text-link{
	font-size:12px
  }

}

@media(prefers-reduced-motion:reduce){
  html{
	scroll-behavior:auto
  }

  *, *:before, *:after{
	transition:none!important;
	animation:none!important
  }

}

/* =====================================================
   Contact Form 7
===================================================== */
.contact-form {
  max-width:720px;
  margin:40px auto 0;
}

/* 各項目 */
.contact-form .form-item {
  margin-bottom:28px;
}

/* ラベル */
.contact-form label {
  display:block;
  margin-bottom:10px;
  font-size:14px;
  font-weight:700;
  line-height:1.5;
  color:#222;
}

/* 必須・任意 */
.contact-form .required,
.contact-form .optional {
  display:inline-block;
  margin-left:8px;
  padding:2px 7px;
  border-radius:4px;
  font-size:10px;
  font-weight:700;
  line-height:1.5;
  vertical-align:1px;
}

.contact-form .required {
  background:#222;
  color:#fff;
}

.contact-form .optional {
  background:#eee;
  color:#777;
}

/* 入力欄 */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  box-sizing:border-box;
  width:100%;
  padding:14px 16px;
  border:1px solid #ddd;
  border-radius:8px;
  background:#fff;
  color:#222;
  font-size:16px;
  font-family:inherit;
  line-height:1.6;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
  appearance:none;
}

/* テキストエリア */
.contact-form textarea {
  min-height:200px;
  resize:vertical;
}

/* フォーカス */
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
  outline:none;
  border-color:#222;
  box-shadow:0 0 0 3px rgba(0, 0, 0, 0.06);
}

/* 送信エリア */
.contact-form .form-submit {
  margin-top:36px;
}

/* 送信ボタン */
.contact-form input[type="submit"] {
  display:block;
  width:100%;
  padding:16px 24px;
  border:0;
  border-radius:8px;
  background:#222;
  color:#fff;
  font-size:15px;
  font-family:inherit;
  font-weight:700;
  line-height:1.4;
  cursor:pointer;
  transition:opacity 0.2s ease, transform 0.2s ease;
}

.contact-form input[type="submit"]:hover {
  opacity:0.82;
}

.contact-form input[type="submit"]:active {
  transform:translateY(1px);
}

/* CF7 エラーメッセージ */
.contact-form .wpcf7-not-valid-tip {
  margin-top:7px;
  font-size:12px;
}

/* 送信結果 */
.wpcf7 form .wpcf7-response-output {
  margin:24px 0 0;
  padding:14px 16px;
  border-width:1px;
  border-radius:8px;
  font-size:13px;
  line-height:1.7;
}

/* スピナー */
.contact-form .wpcf7-spinner {
  display:block;
  margin:12px auto 0;
}

/* =====================================================
   SP
===================================================== */
@media (max-width:767px) {
  .contact-form {
	margin-top:28px;
  }

  .contact-form .form-item {
	margin-bottom:22px;
  }

  .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
	padding:13px 14px;
	font-size:16px;
  }

  .contact-form textarea {
	min-height:180px;
  }

  .contact-form .form-submit {
	margin-top:28px;
  }

}

/* =====================================================
   GET STARTED - GUIDE
===================================================== */
.start-guide {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  margin-top:48px;
  padding:32px 0;
  border-top:1px solid var(--border, #d8dedb);
  border-bottom:1px solid var(--border, #d8dedb);
}

.start-guide-copy strong {
  display:block;
  margin-bottom:6px;
  font-size:18px;
  font-weight:700;
  color:var(--ink, #172d2b);
}

.start-guide-copy p {
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:var(--muted, #6f7d79);
}

.start-guide-actions {
  display:flex;
  align-items:center;
  gap:28px;
  flex-shrink:0;
}

.start-guide-actions .text-link {
  white-space:nowrap;
  font-weight:700;
}

.start-guide-actions .button {
  white-space:nowrap;
}

/* =====================================================
   GET STARTED - SP
===================================================== */
@media (max-width:767px) {
  .start-guide {
	align-items:flex-start;
	flex-direction:column;
	gap:22px;
	margin-top:32px;
	padding:24px 0;
  }

  .start-guide-actions {
	align-items:flex-start;
	flex-direction:column;
	gap:18px;
	width:100%;
  }

  .start-guide-actions .button {
	box-sizing:border-box;
	width:100%;
	text-align:center;
  }

}

/* ========================================
   Scriptable App Store ボタン
======================================== */
.scriptable-app-link {
  margin:24px 0 40px;
}

.scriptable-app-link a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 28px;
  background:#dcefe6;
  border-radius:999px;
  color:#176b56;
  font-size:16px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  text-underline-offset:4px;
  transition:background-color 0.2s ease, transform 0.2s ease;
}

.scriptable-app-link a:hover {
  background:#cde7dc;
  transform:translateY(-2px);
}

.wp-block-separator {
  margin-top:40px;
  border-top:1px solid var(--line);
}

/* Reading, ranking and mobile controls */


.view-count{
  white-space:nowrap
}

.like-button{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:42px;
  padding:6px 13px 6px 10px;
  overflow:visible;
  border:1px solid #cfe0d4;
  border-radius:999px;
  background:#f3f8f3;
  color:var(--green);
  font-size:12px;
  font-weight:750;
  white-space:nowrap;
  transition:background .2s, border-color .2s, transform .2s
}

.like-button:hover{
  background:#e3f1e7;
  border-color:#9fc2aa;
  transform:translateY(-1px)
}

.like-button.is-liked {
    background: #225C49;
    border-color: #205c49;
    color: #fff;
}

.like-button:disabled{
  cursor:default;
  opacity:1
}

.article-dates{
  align-items:center
}

.article-dates .like-button{
  margin-left:auto
}

.popular-section{
  padding:58px 0 64px;
  background:#f1f5ef;
  border-block:1px solid var(--line)
}

.popular-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px
}

.popular-list li{
  display:grid;
  grid-template-columns:48px minmax(0, 1fr) auto;
  gap:18px;
  align-items:center;
  padding:17px 20px;
  background:white;
  border:1px solid var(--line);
  border-radius:12px
}

.popular-rank{
font:600 28px "Poppins", sans-serif;
color:var(--green)
}

.popular-list h3{
  font-size:17px;
  margin:7px 0 0
}

.popular-list h3 a:hover{
  text-decoration:underline
}

.popular-views{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap
}
.popular-views .stat-count-number {
  font-weight: 600;  
}

.start-guide-actions{
  gap:12px;
  flex-wrap:wrap
}

.start-guide-actions .button-light{
  background:white;
  color:var(--green);
  border:1px solid var(--line)
}

.start-guide-actions .button-light:hover{
  background:#edf3ed;
  color:var(--green)
}

@media(max-width:760px){
  .start-section .section-heading{
	gap:8px
  }

  .start-section .section-heading .muted{
	width:100%
  }

  .start-guide-actions{
	display:grid;
	grid-template-columns:1fr;
	gap:10px;
	align-items:stretch
  }

  .start-guide-actions .button{
	width:100%;
	min-height:52px;
	justify-content:space-between
  }

  .popular-section{
	padding-block:42px
  }

  .popular-list li{
	grid-template-columns:34px minmax(0, 1fr);
	gap:10px;
	padding:14px
  }

  .popular-rank{
	font-size:23px
  }

  .popular-views{
	grid-column:2
  }

  .article-dates .like-button{
	margin-left:0
  }

}

@media(max-width:400px){
  .card-meta{
	flex-wrap:wrap
  }

  .card-meta .like-button{
	margin-left:auto
  }

}

/* Popular thumbnails and the article sidebar */
.popular-list li{
  grid-template-columns:38px 96px minmax(0, 1fr) auto;
  gap:14px
}

.popular-thumb,
.sidebar-thumb{
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#e2ece5;
  color:var(--green);
  font-weight:800;
  letter-spacing:-.04em
}

.popular-thumb{
  width:96px;
  aspect-ratio:4/3;
  border-radius:9px;
  font-size:26px
}

.popular-thumb img,
.sidebar-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}

.popular-copy,
.sidebar-item-copy{
  min-width:0
}

.article-sidebar{
  position:sticky;
  top:18px;
  align-self:start;
  max-height:calc(100vh - 36px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin
}

.article-sidebar .info-panel:last-child{
  margin-bottom:0
}

.sidebar-popular h2{
  margin-bottom:14px
}

.sidebar-popular ol{
  list-style:none;
  margin:0;
  padding:0
}

.sidebar-popular li{
  display:grid;
  grid-template-columns:20px 56px minmax(0, 1fr);
  align-items:center;
  gap:8px;
  padding:11px 0;
  border-top:1px solid var(--line)
}

.sidebar-rank{
font:600 17px "Poppins", sans-serif;
color:var(--green)
}

.sidebar-thumb{
  width:56px;
  aspect-ratio:1;
  border-radius:7px;
  font-size:16px
}

.sidebar-item-copy a{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:12px;
  font-weight:700;
  line-height:1.5
}

.sidebar-item-copy a:hover{
  text-decoration:underline
}

.sidebar-item-copy small{
  display:block;
  margin-top:3px;
  font-size:10px;
  color:var(--muted)
}

@media(max-width:760px){
  .popular-list li{
	grid-template-columns:30px 76px minmax(0, 1fr);
	gap:10px
  }

  .popular-thumb{
	width:76px
  }

  .popular-views{
	grid-column:3
  }

  .article-sidebar{
	position:static;
	max-height:none;
	overflow:visible;
	display:grid;
	grid-template-columns:1fr
  }

}

@media(max-width:400px){
  .popular-list li{
	grid-template-columns:28px 64px minmax(0, 1fr)
  }

  .popular-thumb{
	width:64px
  }

}

.sidebar-popular li{
  grid-template-columns:28px 52px minmax(0, 1fr)
}

.sidebar-thumb{
  width:52px
}

.sidebar-rank{
  font-size:16px;
  white-space:nowrap
}

/* Featured popular article and compact ranks */
.popular-list{
  grid-template-columns:minmax(0, 1.12fr) minmax(0, .88fr);
  grid-template-rows:repeat(4, minmax(100px, auto));
  gap:12px
}

.popular-list li:first-child{
  grid-column:1;
  grid-row:1 / span 4;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  position:relative;
  padding:16px 18px 18px;
  min-width:0
}

.popular-list li:first-child .popular-rank{
  position:absolute;
  top:26px;
  left:28px;
  z-index:1;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:12px;
  background:var(--green);
  color:white;
  font-size:26px;
  line-height:1;
  box-shadow:0 4px 14px #0003
}

.popular-list li:first-child .popular-thumb{
  width:100%;
  aspect-ratio:16/9;
  border-radius:12px;
  font-size:64px
}

.popular-list li:first-child .popular-copy{
  padding-top:16px
}

.popular-list li:first-child .popular-copy h3{
  font-size:clamp(20px, 2vw, 26px);
  margin:8px 0 10px
}

.popular-list li:first-child .popular-views{
  margin-top:auto;
  padding-top:10px
}

.popular-list li:not(:first-child){
  grid-column:2;
  display:grid;
  grid-template-columns:30px 82px minmax(0, 1fr);
  grid-template-rows:auto auto;
  gap:2px 10px;
  align-items:center;
  padding:10px 12px;
  min-width:0
}

.popular-list li:not(:first-child) .popular-rank{
  grid-column:1;
  grid-row:1 / span 2;
  align-self:center;
  font-size:20px
}

.popular-list li:not(:first-child) .popular-thumb{
  grid-column:2;
  grid-row:1 / span 2;
  width:82px;
  aspect-ratio:1.15;
  border-radius:8px;
  font-size:22px
}

.popular-list li:not(:first-child) .popular-copy{
  grid-column:3;
  grid-row:1;
  align-self:end
}

.popular-list li:not(:first-child) .popular-copy h3{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:15px;
  line-height:1.45;
  margin:4px 0 0
}

.popular-list li:not(:first-child) .popular-views{
  grid-column:3;
  grid-row:2;
  align-self:start;
  font-size:11px
}

@media(max-width:760px){
  .popular-list{
	grid-template-columns:1fr;
	grid-template-rows:none
  }

  .popular-list li:first-child{
	grid-column:1;
	grid-row:auto
  }

  .popular-list li:not(:first-child){
	grid-column:1;
	grid-template-columns:30px 76px minmax(0, 1fr)
  }

  .popular-list li:not(:first-child) .popular-thumb{
	width:76px
  }

  .popular-list li:first-child .popular-thumb{
	aspect-ratio:16/9
  }

}

@media(max-width:400px){
  .popular-list li:not(:first-child){
	grid-template-columns:28px 64px minmax(0, 1fr)
  }

  .popular-list li:not(:first-child) .popular-thumb{
	width:64px
  }

  .popular-list li:not(:first-child) .popular-copy h3{
	font-size:14px
  }

}

.ranking-tabs{
  display:inline-flex;
  gap:4px;
  padding:4px;
  margin:0 0 22px;
  background:#eef3f0;
  border:1px solid #dce8e2;
  border-radius:12px
}

.ranking-tabs button{
  appearance:none;
  border:0;
  border-radius:9px;
  padding:10px 16px;
  background:transparent;
  color:#355149;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  transition:background .2s, color .2s, box-shadow .2s
}

.ranking-tabs button:hover,
.ranking-tabs button:focus-visible{
  background:#dce9e2;
  outline-offset:2px
}

.ranking-tabs button.is-active{
  background:#205649;
  color:#fff;
  box-shadow:0 2px 8px rgba(20, 61, 48, .15)
}

.sidebar-popular .ranking-tabs{
  display:flex;
  width:100%;
  margin:14px 0
}

.sidebar-popular .ranking-tabs button{
  flex:1;
  padding:9px 5px;
  font-size:12px
}

@media(max-width:600px){
  .ranking-tabs{
	display:flex;
	width:100%
  }

  .ranking-tabs button{
	flex:1;
	padding:10px 7px;
	font-size:13px
  }

}

/* Top page category filters */
.library-section .category-links button.pill{
  appearance:none;
  border:0;
  min-height:40px;
  line-height:1.3;
  cursor:pointer
}

.library-section .category-links button.pill:hover{
  background:#dcebe0
}

.library-section .category-links button.pill.active,
.library-section .category-links button.pill.active:hover{
  background:var(--green);
  color:#fff
}

.library-section .card-grid[aria-busy="true"]{
  opacity:.55;
  pointer-events:none
}

.library-section .card-grid[data-error="true"]::before{
  content:"読み込めませんでした。もう一度カテゴリを選んでください。";
  grid-column:1/-1;
  padding:12px;
  color:#92400e;
  background:#fff7e6;
  border-radius:8px
}

@media(max-width:600px){
  .library-section .category-links button.pill{
	min-height:44px
  }

}

/* Clear entry points on the home page */
.hero-actions .hero-guide-button{
  background:#fff;
  color:var(--green);
  border-color:#b8d2c2;
  box-shadow:0 3px 12px rgba(23, 67, 47, .06)
}

.hero-actions .hero-guide-button:hover{
  background:#e8f3eb;
  color:#164b3c;
  border-color:#8db79e
}

.library-more{
  display:flex;
  justify-content:center;
  margin-top:36px
}

.library-more .button{
  min-width:280px;
  justify-content:space-between;
  box-shadow:0 7px 18px rgba(32, 92, 73, .14)
}

@media(max-width:600px){
  .hero-actions .button{
    min-width:0;
    padding-inline:14px;
    font-size:13px;
    justify-content:space-between
  }

  .hero-actions .hero-guide-button{
	justify-content:space-between
  }

  .library-more{
	margin-top:28px
  }

  .library-more .button{
	width:100%;
	min-width:0
  }

}

/* Designed home introduction */
.home-about{
  padding:72px 0;
  background:#183c32;
  color:#fff
}

.home-about .eyebrow{
  color:#a9d2b8
}

.home-about-heading{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(280px, .9fr);
  gap:56px;
  align-items:end;
  margin-bottom:38px
}

.home-about-heading h2{
  font-size:clamp(28px, 3vw, 42px);
  margin:0;
  max-width:600px
}

.home-about-heading>p{
  margin:0;
  color:#c9dbd3;
  font-size:14px;
  line-height:2
}

.home-about-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px
}

.home-about-grid article{
  display:flex;
  flex-direction:column;
  min-height:280px;
  padding:28px;
  border:1px solid #ffffff24;
  border-radius:18px;
  background:#ffffff0b
}

.home-about-number{
  font:600 24px "Poppins", sans-serif;
  color:#9cc4ad;
  margin-bottom:5px
}

.home-about-grid h3{
  font-size:19px;
  margin-bottom:12px
}

.home-about-grid p{
  color:#c8d9d1;
  font-size:13px;
  line-height:1.9;
  margin-bottom:24px
}

.home-about-grid a{
  margin-top:auto;
  font-size:12px;
  font-weight:700;
  color:#fff
}

.home-about-grid a:hover{
  text-decoration:underline;
  color:#fff
}

.home-about-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  margin-top:16px;
  padding:28px;
  background:#edf4ef;
  color:var(--ink);
  border-radius:18px
}

.home-about-note .eyebrow{
  color:var(--green);
  margin-bottom:8px
}

.home-about-note h3{
  font-size:20px;
  margin-bottom:6px
}

.home-about-note p{
  margin:0;
  color:var(--muted);
  font-size:13px
}

.home-about-note .button{
  flex-shrink:0
}

@media(max-width:760px){
  .home-about{
	padding-block:48px
  }

  .home-about-heading{
	grid-template-columns:1fr;
	gap:14px
  }

  .home-about-grid{
	grid-template-columns:1fr
  }

  .home-about-grid article{
	min-height:0
  }

  .home-about-note{
	align-items:stretch;
	flex-direction:column;
	gap:20px
  }

  .home-about-note .button{
	width:100%;
	justify-content:space-between
  }

}

.home-about-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  flex-shrink:0
}

.home-about-actions .button{
  margin:0;
  white-space:nowrap
}

.home-about-actions .home-about-app{
  background:var(--green);
  color:#fff;
  border-color:var(--green)
}

.home-about-actions .home-about-app:hover{
  background:#163f33;
  color:#fff
}

@media(max-width:760px){
  .home-about-actions{
	display:grid;
	grid-template-columns:1fr;
	gap:10px;
	width:100%
  }

  .home-about-actions .button{
	width:100%;
	justify-content:space-between
  }

}

/* Free AI customization helper */
.code-toolbar{
  flex-wrap:wrap;
  justify-content:flex-start
}

.code-toolbar>span:first-child{
  margin-right:auto
}

.ai-consult-button{
  min-height:40px;
  padding:8px 12px;
  border:1px solid #9cc4ad;
  border-radius:6px;
  background:#dff2e7;
  color:#173e33;
  font:700 12px -apple-system, BlinkMacSystemFont, "Noto Sans JP", sans-serif
}

.ai-consult-button:hover{
  background:#cce8d7
}

.ai-consult-panel{
  padding:22px;
  background:#f2f7f3;
  border:1px solid #cbdacf;
  border-top:0;
  border-radius:0 0 12px 12px;
  color:var(--ink)
}

.ai-consult-panel[hidden]{
  display:none
}

.ai-consult-copy strong{
  display:block;
  font-size:16px
}

.ai-consult-copy p{
  margin:4px 0 14px;
  color:var(--muted);
  font-size:12px;
  line-height:1.7
}

.ai-consult-panel textarea{
  display:block;
  width:100%;
  min-height:110px;
  padding:13px 14px;
  border:none;
  border-radius:9px;
  background:#fff;
  color:var(--ink);
  font-size:16px;
  line-height:1.7;
  resize:vertical
}

.ai-consult-presets,
.ai-consult-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px
}

.ai-consult-presets button{
  min-height:38px;
  padding:7px 11px;
  border:1px solid #c7d6cb;
  border-radius:999px;
  background:#fff;
  color:var(--green);
  font-size:12px;
  font-weight:700
}

.ai-consult-presets button:hover{
  background:#e2eee6
}

.ai-consult-actions{
  align-items:center;
  margin-top:16px
}

.ai-prompt-copy,
.ai-consult-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:10px 17px;
  border-radius:8px;
  font-size:13px;
  font-weight:700;
  text-decoration:none
}

.ai-prompt-copy{
  border:1px solid var(--green);
  background:var(--green);
  color:#fff
}

.ai-consult-actions a{
  border:1px solid #b9c9be;
  background:#fff;
  color:var(--green)
}

.entry-content .ai-consult-actions a{
  text-decoration:none
}

.ai-consult-status{
  min-height:1.7em;
  margin:12px 0 0;
  color:var(--green);
  font-size:12px
}

@media(max-width:600px){
  .code-toolbar{
	gap:7px
  }

  .code-toolbar .copy-status{
	width:100%;
	order:4
  }

  .copy-button, .ai-consult-button{
	flex:1
  }

  .ai-consult-panel{
	padding:17px
  }

  .ai-consult-actions{
	display:grid;
	grid-template-columns:1fr
  }

  .ai-prompt-copy, .ai-consult-actions a{
	width:100%
  }

}

/* AI consultation flow refinement */
.ai-consult-actions{
  margin-top:12px
}

.ai-prompt-copy{
  width:100%;
  min-height:52px;
  font-size:14px;
  transition:transform .2s, box-shadow .2s, background .2s
}

.ai-prompt-copy:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none
}

.ai-consult-panel.is-ready .ai-prompt-copy{
  background:#174f3e;
  box-shadow:0 6px 16px rgba(23, 79, 62, .18);
  transform:translateY(-1px)
}

.ai-consult-status{
  padding:9px 11px;
  border-radius:7px;
  background:#e6f0e9;
  font-weight:700
}

@media(max-width:600px){
  .code-toolbar{
	align-items:center;
	padding:10px;
	gap:8px
  }

  .code-toolbar>span:first-child{
	order:1;
	flex:1;
	margin-right:0
  }

  .copy-button{
	order:2;
	flex:0 0 auto;
	min-width:82px
  }

  .ai-consult-button{
	order:3;
	flex:0 0 100%;
	width:100%;
	min-height:46px;
	font-size:13px
  }

  .code-toolbar .copy-status{
	order:4;
	width:100%;
	margin-top:-2px
  }

  .ai-consult-panel{
	padding:18px 15px
  }

  .ai-consult-panel textarea{
	min-height:124px
  }

  .ai-consult-next{
	margin-top:20px
  }

  .ai-consult-actions{
	display:block
  }

  .ai-prompt-copy{
	width:100%;
	min-height:54px;
	padding-inline:12px
  }

  .ai-consult-finish{
	padding:14px
  }

  .ai-consult-status{
	line-height:1.6
  }

}

/* AI result handoff */
.ai-consult-notice{
  margin-bottom:18px;
  padding:12px 14px;
  border-radius:10px;
  background:#e9f1ec
}

.ai-consult-notice strong{
  display:block;
  font-size:13px;
  color:var(--ink)
}

.ai-consult-notice p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.7
}

@media(max-width:600px){
  .ai-consult-notice{
	padding:11px 12px
  }

}

/* Rotating back-to-top control */
.back-to-top{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:40;
  width:82px;
  height:82px;
  padding:0;
  border:1px solid rgba(32, 92, 73, .2);
  border-radius:50%;
  background:rgba(247, 248, 244, .94);
  color:var(--green);
  box-shadow:0 10px 30px rgba(17, 55, 43, .18);
  opacity:0;
  visibility:hidden;
  transform:translateY(18px) scale(.9);
  transition:opacity .25s, visibility .25s, transform .25s, background-color .2s;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px)
}

.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1)
}

.back-to-top:hover{
  background:#fff;
  transform:translateY(-3px) scale(1.03)
}

.back-to-top-ring{
  position:absolute;
  inset:0;
  width:80px;
  height:80px;
  overflow:visible;
  transform:rotate(var(--ring-rotation, 0deg));
  transform-origin:center
}

.back-to-top-ring text {
  fill:currentColor;
  font-size:8px;
  font-weight:800;
  letter-spacing:2px;
}

.back-to-top-arrow {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
}

.back-to-top-cat {
  position:absolute;
  left:50%;
  bottom:28px;
  width:30px;
  height:auto;
  color:currentColor;
  transform:translateX(-50%);
}

.back-to-top-arrow-icon {
  position:absolute;
  left:50%;
  top:22px;
  width:15px;
  height:auto;
  color:currentColor;
  transform:translate(-50%, 0);
  transition:transform .2s ease-out;
}

.back-to-top.is-scrolling .back-to-top-arrow-icon {
  animation:back-to-top-bob .7s ease-in-out infinite;
}

@keyframes back-to-top-bob {
  0%, 100% {
	transform:translate(-50%, 0);
  }

  50% {
	transform:translate(-50%, -6px);
  }

}

@media(max-width:600px){
  .back-to-top{
	right:12px;
	bottom:calc(12px + env(safe-area-inset-bottom));
	width:66px;
	height:66px
  }

  .back-to-top-ring {
	inset:0;
	width:65px;
	height:65px
  }

  .back-to-top-ring text {
	font-size:8px;
	letter-spacing:2.3px;
  }

  .back-to-top-cat{
	width:26px;
	bottom:22px
  }

  .back-to-top-arrow-icon{
	width:14px;
	top:19px
  }

}

@media(prefers-reduced-motion:reduce){
  .back-to-top-ring{
	transform:none
  }

  .back-to-top{
	transition:none
  }

  .back-to-top.is-scrolling .back-to-top-arrow-icon{
	animation:none
  }

}

/* Dedicated Scriptable beginner guide */
.guide-page{
  background:#f7f8f4
}

.guide-hero{
  padding:76px 0 68px;
  background:#183c32;
  color:#fff
}

.guide-hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.25fr) minmax(280px, .75fr);
  gap:72px;
  align-items:center
}

.guide-hero .eyebrow{
  color:#a8d0b6;
  margin-bottom:16px
}

.guide-hero h1{
  font-size:clamp(36px, 5vw, 60px);
  line-height:1.4;
  max-width:700px;
  margin-bottom:22px
}

.guide-lead{
  max-width:650px;
  color:#d3e1da;
  font-size:15px;
  line-height:2
}

.guide-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:30px
}

.guide-actions .button{
  justify-content:space-between
}

.guide-actions .button-light{
  background:transparent;
  color:#fff;
  border-color:#ffffff55
}

.guide-actions .button-light:hover{
  background:#ffffff12;
  color:#fff
}

.guide-ready{
  padding:30px;
  border:1px solid #ffffff2b;
  border-radius:20px;
  background:#ffffff0d
}

.guide-ready h2{
  font-size:24px;
  margin-bottom:18px
}

.guide-ready ul{
  list-style:none;
  padding:0;
  margin:0 0 22px
}

.guide-ready li{
  position:relative;
  padding:10px 0 10px 27px;
  border-bottom:1px solid #ffffff1c;
  font-size:14px
}

.guide-ready li:before{
  content:'✓';
  position:absolute;
  left:0;
  color:#aad5b9;
  font-weight:800
}

.guide-ready>p:last-child{
  margin:0;
  color:#c7d9d1;
  font-size:12px
}

.guide-ready strong{
  color:#fff;
  font-size:17px;
  margin-left:5px
}

.guide-jump{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  margin-top:-1px;
  padding:0;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:0 0 16px 16px;
  overflow:hidden
}

.guide-jump a{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2px 12px;
  padding:20px;
  background:#fff
}

.guide-jump span{
grid-row:1/3;
color:#70907f;
font:600 22px "Poppins", sans-serif
}

.guide-jump strong{
  font-size:13px
}

.guide-jump small{
  color:var(--muted);
  font-size:10px
}

.guide-jump a:hover{
  background:#eef5f0;
  color:var(--green)
}

.guide-overview{
  padding-block:76px 70px
}

.guide-overview h2{
  margin-bottom:30px
}

.guide-overview-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px
}

.guide-overview-grid article{
  padding:27px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff
}

.guide-overview-grid article>span{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  margin-bottom:36px;
  border-radius:50%;
  background:#dcece2;
  color:var(--green);
  font-weight:800
}

.guide-overview-grid h3{
  margin-bottom:9px;
  font-size:19px
}

.guide-overview-grid p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.8
}

.guide-content{
  max-width:920px;
  padding-bottom:84px
}

.guide-content>header{
  padding-bottom:30px;
  border-bottom:1px solid var(--line)
}

.guide-content>header>p:last-child{
  color:var(--muted)
}

.guide-entry>h1:first-child{
  display:none
}

.guide-entry>h2{
  position:relative;
  margin:28px 0 0;
  padding:32px 32px 16px 82px;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:16px 16px 0 0;
  background:#fff;
  font-size:23px;
  counter-increment:guide-step
}

.guide-entry{
  counter-reset:guide-step
}

.guide-entry>h2:before{
  content:counter(guide-step, decimal-leading-zero);
  position:absolute;
  left:28px;
  top:31px;
  color:#6e9580;
    font:600 24px "Poppins", sans-serif
  }.guide-entry>h2+*{
  margin-top:0
}

.guide-entry>h2~p,
.guide-entry>h2~ul,
.guide-entry>h2~ol{
  padding-inline:32px
}

.guide-entry>h2+p{
  padding-top:4px
}

.guide-entry>h2+p,
.guide-entry>h2+ul,
.guide-entry>h2+ol{
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  background:#fff
}

.guide-entry>h2+p{
  padding-bottom:22px
}

.guide-entry>h2+p+*{
  margin-top:0
}

.guide-entry code{
  display:block;
  padding:16px 18px;
  border-radius:10px;
  background:#16342b;
  color:#fff;
  line-height:1.7
}

.guide-entry strong{
  color:#163f33
}

.guide-entry>h2:nth-of-type(7){
  margin-top:56px;
  border-color:#b9d2c2;
  background:#edf5ef
}

.guide-entry>h2:nth-of-type(8),
.guide-entry>h2:nth-of-type(9){
  margin-top:56px
}

.guide-final{
  padding:68px 0;
  background:#e2eee5;
  text-align:center
}

.guide-final h2{
  margin-bottom:12px
}

.guide-final p:not(.eyebrow){
  color:var(--muted)
}

.guide-final .button{
  margin-top:10px
}

@media(max-width:760px){
  .guide-hero{
	padding-block:48px
  }

  .guide-hero-grid{
	grid-template-columns:1fr;
	gap:30px
  }

  .guide-hero h1{
	font-size:36px
  }

  .guide-actions{
	display:grid
  }

  .guide-actions .button{
	width:100%
  }

  .guide-ready{
	padding:22px
  }

  .guide-jump{
	grid-template-columns:1fr 1fr;
	width:calc(100% - 36px);
	border-radius:14px;
	margin-top:18px
  }

  .guide-jump a{
	padding:15px
  }

  .guide-overview{
	padding-block:52px
  }

  .guide-overview-grid{
	grid-template-columns:1fr
  }

  .guide-overview-grid article{
	display:grid;
	grid-template-columns:44px 1fr;
	gap:0 14px;
	padding:20px
  }

  .guide-overview-grid article>span{
	grid-row:1/3;
	margin:0
  }

  .guide-overview-grid h3{
	margin:3px 0 5px
  }

  .guide-content{
	padding-bottom:55px
  }

  .guide-entry>h2{
	padding:24px 18px 12px 60px;
	font-size:20px
  }

  .guide-entry>h2:before{
	left:18px;
	top:24px;
	font-size:20px
  }

  .guide-entry>h2~p, .guide-entry>h2~ul, .guide-entry>h2~ol{
	padding-inline:18px
  }

  .guide-final{
	padding-block:48px
  }

  .guide-final .button{
	width:100%;
	justify-content:space-between
  }

}

/* Widget request above footer */
.widget-request{
  padding:72px 0;
  background:#e7efe9;
  border-top:1px solid #d2dfd6
}

.widget-request-grid{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  gap:72px;
  align-items:start
}

.widget-request-copy h2{
  max-width:520px;
  font-size:clamp(28px, 3vw, 42px);
  margin-bottom:20px
}

.widget-request-copy>p:not(.eyebrow){
  max-width:500px;
  color:var(--muted);
  font-size:14px;
  line-height:2
}

.widget-request-copy .widget-request-note{
  margin-top:26px;
  font-size:11px
}

.widget-request-policy{
  max-width:520px;
  margin-top:24px;
  padding:16px 18px;
  border:1px solid #d5dfd8;
  border-radius:8px;
  background:rgba(255, 255, 255, .55)
}

.widget-request-policy strong{
  display:block;
  margin-bottom:5px;
  color:var(--ink);
  font-size:13px
}

.widget-request-policy p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.8
}

.widget-request-form{
  position:relative;
  min-width:0;
  padding:28px;
  border:1px solid #ccdbd0;
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 30px rgba(31, 68, 56, .06)
}

.widget-request-form>label{
  display:block;
  margin:0 0 9px;
  font-size:13px;
  font-weight:750
}

.widget-request-form>label:not(:first-of-type){
  margin-top:18px
}

.widget-request-form label span{
  margin-left:6px;
  padding:2px 6px;
  border-radius:4px;
  background:#183c32;
  color:#fff;
  font-size:9px
}

.widget-request-form label small{
  margin-left:5px;
  color:var(--muted);
  font-weight:500
}

.widget-request-form textarea,
.widget-request-form>input[type=email]{
  display:block;
  width:100%;
  padding:13px 14px;
  border:1px solid #bdcec2;
  border-radius:9px;
  background:#fbfcfa;
  color:var(--ink);
  font-size:16px;
  line-height:1.7
}

.widget-request-form textarea{
  min-height:140px;
  resize:vertical
}

.widget-request-form textarea:focus,
.widget-request-form>input[type=email]:focus{
  border-color:var(--green);
  outline:3px solid rgba(32, 92, 73, .12)
}

.widget-request-form>button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:52px;
  margin-top:20px;
  padding:12px 18px;
  border:0;
  border-radius:9px;
  background:var(--green);
  color:#fff;
  font-weight:750
}

.widget-request-form>button:hover{
  background:#163f33
}

.widget-request-form>button:disabled{
  cursor:default;
  opacity:.65
}

.widget-request-status{
  min-height:1.8em;
  margin:10px 0 0;
  color:#8a3a28;
  font-size:12px
}

.widget-request-status.is-success{
  color:var(--green);
  font-weight:700
}

.request-honeypot{
  position:absolute!important;
  left:-10000px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important
}

@media(max-width:760px){
  .widget-request{
	padding-block:48px
  }

  .widget-request-grid{
	grid-template-columns:1fr;
	gap:28px
  }

  .widget-request-copy h2{
	font-size:28px
  }

  .widget-request-form{
	padding:20px
  }

  .widget-request-form textarea{
	min-height:150px
  }

}

/* Balanced Japanese text */
.hero-description,
.home-about-heading > p,
.widget-request-copy > p:not(.eyebrow),
.widget-request-policy p,
.guide-lead {
  text-align:justify;
  text-justify:inter-character;
}

/* Popup shown after the AI-consult copy button is pressed */
.ai-copy-modal{
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-items:center;
  padding:20px
}

.ai-copy-modal[hidden]{
  display:none
}

.ai-copy-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15, 30, 26, .55);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px)
}

.ai-copy-modal-card{
  position:relative;
  width:min(420px, 100%);
  padding:28px 24px 24px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 20px 60px rgba(15, 30, 26, .35);
  text-align:center;
  animation:ai-copy-modal-in .18s ease-out
}

.ai-copy-modal-close{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--muted);
  font-size:20px;
  line-height:1
}

.ai-copy-modal-close:hover{
  background:#eef2ee
}

.ai-copy-modal-icon{
  margin:0 0 6px;
  font-size:32px
}

.ai-copy-modal-card h3{
  margin:0 0 10px;
  font-size:18px
}

.ai-copy-modal-body{
  margin:0 0 10px;
  color:var(--ink);
  font-size:14px;
  line-height:1.7
}

.ai-copy-modal-next{
  margin:0 0 18px;
  padding:10px 12px;
  border-radius:8px;
  background:#eef5f0;
  color:var(--green);
  font-size:12px;
  font-weight:700;
  line-height:1.6
}

.ai-copy-modal-ok{
  width:100%;
  min-height:48px;
  border:1px solid var(--green);
  border-radius:8px;
  background:var(--green);
  color:#fff;
  font-size:14px;
  font-weight:700
}

.ai-copy-modal-ok:hover{
  background:#174a3b
}

@keyframes ai-copy-modal-in{
  from{
	opacity:0;
	transform:translateY(6px) scale(.98)
  }

  to{
	opacity:1;
	transform:none
  }

}

@media(prefers-reduced-motion:reduce){
  .ai-copy-modal-card{
	animation:none
  }

}

@media(max-width:600px){
  .ai-copy-modal-card{
	padding:24px 18px 18px
  }

}

/* AIカスタマイズボタン */
.ai-consult-button {
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.ai-consult-icon {
  display:block;
  width:28px;
  height:28px;
  flex:0 0 28px;
  fill:currentColor;
  overflow:visible;
}

.ai-consult-ai {
  fill:currentColor;
  font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size:9px;
  font-weight:900;
  letter-spacing:0;
}

/* Cat-ear iinya icon */
.like-button{
  gap:7px;
  padding-left:10px
}

.like-cat{
  display:grid;
  width:27px;
  height:27px;
  place-items:center;
  transform-origin:50% 85%
}

.like-cat svg{
  display:block;
  width:27px;
  height:27px;
  overflow:visible
}

.like-cat__ears{
  fill:currentColor;
  transform-box:fill-box;
  transform-origin:center bottom;
  transform:scale(.72)
}

.like-cat__rays,
.like-cat__heart{
  transform-box:fill-box;
  transform-origin:center
}

.like-cat__rays{
  fill:none;
  stroke:currentColor;
  stroke-width:20;
  stroke-linecap:round;
  opacity:1;
  transform:scale(1.16);
  transition:opacity .18s, transform .25s
}

.like-cat__heart{
  fill:currentColor;
  opacity:0;
  transform:scale(.25);
  transition:opacity .18s, transform .35s cubic-bezier(.2, .9, .25, 1.35)
}

.like-button.is-liked .like-cat__rays{
  opacity:0;
  transform:scale(.5)
}

.like-button.is-liked .like-cat__heart{
  opacity:1;
  transform:scale(1)
}

.like-button.is-celebrating .like-cat{
  animation:like-cat-nod .7s cubic-bezier(.2, .85, .25, 1.3)
}

.like-button.is-celebrating .like-cat__heart{
  animation:like-heart-pop .7s cubic-bezier(.2, .9, .25, 1.35)
}

@keyframes like-cat-nod{
  0%, 100%{
	transform:translateY(0) rotate(0)
  }

  35%{
	transform:translateY(-4px) rotate(-5deg)
  }

  65%{
	transform:translateY(0) rotate(4deg)
  }

}

@keyframes like-heart-pop{
  0%{
	opacity:0;
	transform:scale(.15) rotate(-15deg)
  }

  55%{
	opacity:1;
	transform:scale(1.28) rotate(8deg)
  }

  100%{
	opacity:1;
	transform:scale(1) rotate(0)
  }

}

/* Article H2 heading */
.single-post .entry-content > h2 {
  position:relative;
  display:flex;
  align-items:center;
  min-height:82px;
  margin:90px 0 24px;
  padding:20px 24px;
  overflow:visible;
  border:1px solid #cfddd5;
  border-left:6px solid var(--green);
  border-radius:14px;
  background:linear-gradient(105deg, #edf5f0 0%, #f9fbf9 72%);
  color:var(--ink);
  font-size:clamp(18px, 2.4vw, 25px);
  font-weight:800;
  line-height:1.45;
  box-shadow:0 8px 24px rgba(31, 68, 56, .06);
}

.single-post .entry-content > h2::before {
  content:"";
  position:absolute;
  left:2px;
  top:-24px;
  width:46px;
  height:28px;
  background-color:var(--green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 385.886 191.447'%3E%3Cpath d='M385.886 191.447c-5.455-24.287-18.637-50.506-36.802-69.416.868-28.131 1.273-115.6-26.937-121.732-19.593-4.259-56.095 37.912-77.878 65.956-16.311-3.47-33.465-5.327-51.173-5.327-16.376 0-32.277 1.591-47.476 4.573C123.774 37.463 87.749-3.922 68.33.3c-26.924 5.853-27.782 85.802-27.049 117.535C19.948 138.516 5.319 163.64 0 191.167'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 385.886 191.447'%3E%3Cpath d='M385.886 191.447c-5.455-24.287-18.637-50.506-36.802-69.416.868-28.131 1.273-115.6-26.937-121.732-19.593-4.259-56.095 37.912-77.878 65.956-16.311-3.47-33.465-5.327-51.173-5.327-16.376 0-32.277 1.591-47.476 4.573C123.774 37.463 87.749-3.922 68.33.3c-26.924 5.853-27.782 85.802-27.049 117.535C19.948 138.516 5.319 163.64 0 191.167'/%3E%3C/svg%3E") center / contain no-repeat;
}

.single-post .entry-content > h2::after {
  content:none;
}

@media(max-width:600px) {
  .single-post .entry-content > h2 {
    min-height:66px;
    margin:70px 0 20px;
    padding:15px 16px;
    border-left-width:4px;
    border-radius:12px;
    font-size:21px;
  }

  .single-post .entry-content > h2::before {
    left:2px;
    top:-20px;
    width:38px;
    height:23px;
  }
}


/* Sticky header, floating search and widget total */
.site-header{position:sticky;top:0;z-index:60;transition:box-shadow .25s,background-color .25s}
.site-header.is-scrolled{background:rgba(247,248,244,.92);box-shadow:0 8px 24px rgba(24,43,41,.09);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.site-header .header-inner{transition:min-height .25s}
.site-header.is-scrolled .header-inner{min-height:72px}
.browse-bar{align-items:center}
.widget-total {
  display:flex;
  align-items:baseline;
  gap:6px;
  margin:0;
  padding:5px 14px;
  border-bottom:1px solid #cbdcd1;
  border-radius:0;
  background:none;
  color:var(--green);
  font-size:12px;
  font-weight:650;
  white-space:nowrap
}
.widget-total strong{font-family:"Poppins",sans-serif;font-size:26px;line-height:1;font-weight:700}
.floating-search{position:fixed;left:22px;bottom:22px;z-index:40;width:82px;height:82px;padding:0;border:1px solid rgba(32,92,73,.2);border-radius:50%;background:rgba(247,248,244,.94);color:var(--green);box-shadow:0 10px 30px rgba(17,55,43,.18);opacity:0;visibility:hidden;transform:translateY(18px) scale(.9);transition:opacity .25s,visibility .25s,transform .25s,background-color .2s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.floating-search.is-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.floating-search:hover{background:#fff;transform:translateY(-3px) scale(1.03)}
.floating-search-ring{position:absolute;inset:0;width:80px;height:80px;overflow:visible;transform:rotate(var(--ring-rotation,0deg));transform-origin:center}
.floating-search-ring text{fill:currentColor;font-size:8px;font-weight:800;letter-spacing:1.65px}
.floating-search-icon{position:absolute;left:50%;top:50%;width:25px;height:25px;transform:translate(-50%,-50%)}
.floating-search-panel{position:fixed;inset:0;z-index:100;display:grid;place-items:end center;padding:20px;background:rgba(16,34,28,.46);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.floating-search-panel[hidden]{display:none}
.floating-search-dialog{position:relative;width:min(680px,100%);padding:28px;border-radius:20px;background:#fff;box-shadow:0 22px 60px rgba(15,35,28,.25)}
.floating-search-dialog .eyebrow{margin-bottom:8px}.floating-search-dialog h2{margin-bottom:20px}.floating-search-dialog .search-form{max-width:none}
.floating-search-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border:0;border-radius:50%;background:#edf3ed;color:var(--ink);font-size:24px;line-height:1}
body.search-panel-open{overflow:hidden}
@media(max-width:760px){.site-header.is-scrolled .header-inner{min-height:64px}.browse-bar{align-items:flex-start;flex-direction:column}.widget-total{align-self:flex-end}.floating-search{left:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:66px;height:66px}.floating-search-ring{width:65px;height:65px}.floating-search-ring text{font-size:8px;letter-spacing:1.7px}.floating-search-icon{width:21px;height:21px}.floating-search-panel{padding:12px}.floating-search-dialog{padding:24px 18px 18px;border-radius:16px}}
@media(prefers-reduced-motion:reduce){.floating-search-ring{transform:none}.floating-search,.site-header,.site-header .header-inner{transition:none}}


/* Responsive width containment */
html,
body{
  max-width:100%
}

.home-about-heading{
  grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr)
}

.hero > *,
.home-about-heading > *,
.home-about-grid > *,
.home-about-note > *,
.widget-request-grid > *,
.article-layout > *,
.browse-bar > *,
.footer-top > *,
.footer-bottom > *{
  min-width:0
}

.home-about-heading{
  gap:clamp(24px, 4vw, 56px)
}

.guide-hero-grid{
  grid-template-columns:minmax(0, 1.25fr) minmax(0, .75fr);
  gap:clamp(28px, 5vw, 72px)
}

@media(max-width:760px){
  .hero,
  .home-about-heading,
  .guide-hero-grid{
    grid-template-columns:minmax(0, 1fr)
  }
}



/* Header and mobile library controls */
.floating-search{
  width:52px;
  height:52px
}

.floating-search-ring{
  display:none
}

@media(max-width:760px){
  .browse-bar{
    width:100%;
    align-items:stretch
  }

  .library-section .category-links{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    gap:8px
  }

  .library-section .category-links button.pill{
    width:100%;
    min-width:0;
    padding-inline:8px;
    text-align:center
  }

  .widget-total{
    align-self:center;
    margin-inline:auto
  }

  .floating-search{
    width:50px;
    height:50px
  }
}


@media(max-width:760px){
  html{
    overflow-x:clip
  }
}

/* =====================================================
   NEW badge
===================================================== */

.card-visual-wrap{
  position:relative;
}

.card-new{
  position:absolute;
  left:12px;
  bottom:-48px;
  z-index:3;
  display:block;
  width:30px;
  height:30px;
  pointer-events:none;
}

/* PHP側のimgは非表示 */
.card-new img{
  display:none;
}

/* 猫本体：常時表示 */
.card-new::before{
  content:"";
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  background-color:var(--green);

  -webkit-mask:url("images/icon-news.svg") center / contain no-repeat;
  mask:url("images/icon-news.svg") center / contain no-repeat;
}

/* NEW! ＋ 左右の線：点滅 */
.card-new::after{
  content:"";
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  background-color:var(--green);

  -webkit-mask:url("images/icon-news-flash.svg") center / contain no-repeat;
  mask:url("images/icon-news-flash.svg") center / contain no-repeat;

  animation:new-badge-flash 1.4s ease-in-out infinite;
}

/* ゆっくり点滅 */
@keyframes new-badge-flash{
  0%,
  100%{
    opacity:1;
  }

  50%{
    opacity:.15;
  }
}

/* タブレット */
@media(max-width:980px){
  .card-new{
    left:7px;
    bottom:-43px;
  }
}

/* スマホ */
@media(max-width:480px){
  .card-new{
    left:11px;
    bottom:-47px;
  }
}

/* 動きを減らす設定の場合は点滅させない */
@media(prefers-reduced-motion:reduce){
  .card-new::after{
    animation:none;
  }
}

.setup-difficulty{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:2px 0 16px;
  color:var(--muted);
  font-size:9px
}
.setup-difficulty__label{font-weight:650}
.setup-difficulty__stars {
  font-family:"Poppins",sans-serif;
  font-size:11px;
  letter-spacing:.08em
}
.single-difficulty{display:flex;justify-content:flex-start;margin:0 0 24px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:#fff}
.single-difficulty .setup-difficulty{margin:0;font-size:12px}
.single-difficulty .setup-difficulty__stars{font-size:16px}

/* =====================================================
   記事メタ情報 - SP 2列レイアウト
===================================================== */
@media (max-width:600px) {

  .article-dates {
    display:grid;
    grid-template-columns:repeat(2, max-content);
    column-gap:36px;
    row-gap:12px;
    width:100%;
    align-items:center;
    justify-content:start;
  }

  .article-dates > span {
    min-width:0;
    white-space:nowrap;
  }

  .article-dates .view-count,
  .article-dates .download-count {
    display:inline-flex;
    align-items:center;
  }

  /* いいねは3段目 */
  .article-dates .like-button {
    grid-column:1 / -1;
    justify-self:start;
    margin:4px 0 0;
  }

}


.section-description {
  margin: 12px 0 0;
  max-width: 620px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
}

@media (max-width: 767px) {
  .section-description {
    margin-top: 10px;
    max-width: 100%;
    font-size: 14px;
    line-height: 1.7;
  }
}

/* =====================================================
   操作デモ セクション
===================================================== */

.demo-section {
  margin: 20px 0;
  padding: 20px ;
  background: #f1f2f3;
  border-radius: 24px;
}


/* =====================================================
   操作デモ 動画
===================================================== */

.demo-video {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}

.demo-video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
}


/* =====================================================
   スマホ
===================================================== */

@media (max-width: 600px) {

  .demo-section {
    margin: 20px 0;
    padding: 20px;
    border-radius: 18px;
  }

  .demo-video {
    max-width: 100%;
    margin: 24px auto;
  }

  .demo-video video {
    border-radius: 16px;
  }
}

/* HERO entrance: softly decelerating movement. */
@keyframes hero-copy-rise {
  from { opacity: 0; transform: translate3d(0, 90px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes hero-device-rise {
  from { opacity: 1; transform: translate3d(0, calc(100% + 160px), 0) rotate(5deg); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(5deg); }
}
@keyframes hero-device-rise-mobile {
  from { opacity: 1; transform: translate3d(0, 100%, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero .hero-device { clip-path: inset(-60px -100px -60px -100px); }
  .hero .eyebrow { animation: hero-copy-rise 2s cubic-bezier(.22, .61, .36, 1) .12s both; }
  .hero h1 { animation: hero-copy-rise 2.6s cubic-bezier(.22, .61, .36, 1) .35s both; }
  .hero .hero-phone { animation: hero-device-rise 4s cubic-bezier(.22, .61, .36, 1) .25s both; }
  .hero .hero-device__note { animation: hero-copy-rise 1s cubic-bezier(.22, .61, .36, 1) 3.4s backwards; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .hero .hero-phone { animation-name: hero-device-rise-mobile; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero h1, .hero .hero-phone, .hero .hero-device__note { animation: none; opacity: 1; }
}
/* Center each complete line, including compact punctuation. */
.hero-title-line {
  display: inline-block;
  white-space: nowrap;
  margin: 0;
  color: var(--green);
}
.hero-title-punctuation {
  position: static;
  display: inline-block;
  width: .5em;
  font-feature-settings: "halt" 1;
  letter-spacing: 0;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero-title-line {
    background: linear-gradient(120deg, #123f32 0%, #205c49 35%, #278b70 70%, #46aa8d 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
@media (max-width: 760px) {
  .hero h1 {
    width: 100%;
    min-width: 0;
    text-align: center;
    font-size: clamp(38px, 12.28vw, 55px);
  }
}
@media (forced-colors: active) {
  .hero-title-line {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}