@charset "utf-8";
/* CSS Document */

/* ========= Theme ========= */
:root{
  --green:#0f5a3f;
  --brown:#9a7b61;
  --ink:#222;
  --muted:#666;
  --border:#d8d8d8;
  --bg:#fff;
  --accent:#0b8a5a;
  --max:1180px;
  --r:12px;
}

/* ========= Base ========= */
/* 
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p{margin:0 0 .6em}
small{font-size:.86em;color:var(--muted)}
 */

.container{max-width:var(--max);margin:auto;padding:clamp(16px,3vw,28px)}

/* ========= Section Label (Ribbon) ========= */
.ribbon{
   display: inline-block;
    background-color: #014026;
    color: #fff;
    padding: 8px 18px;
    font-size: 1.2rem;
    font-weight: bold;
    clip-path: polygon(100% 0, 93% 50%, 99% 100%, 0% 100%, 0 51%, 0% 0%);
}

/* ========= Grid (main 2 columns) ========= */
.layout{
  display:grid;grid-template-columns:1fr 320px;gap:clamp(18px,3vw,28px);
  align-items:start;
}

/* ========= Left: Content Blocks ========= */
.box{
  border:1px solid var(--border);
  padding:clamp(14px,2.4vw,22px);
  background:#fff;
	font-family: "Noto Serif JP", serif;
}
.box02{
  padding:clamp(0px,2.4vw,0px);
  background:#fff;
}
.flex2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,24px)}
.hr{height:1px;background:var(--border);margin:18px 0}

/* Pricing block */
.price-ja p {
    margin: 2px 0 2px;
    line-height: 1.3;
}
.price-ja h3{font-size:clamp(18px,2.2vw,20px);font-weight:700;color:var(--muted)}
.price-ja .big{
    color: #014026;
    font-weight: bold;
    font-size: 1.8rem;
}
.price-ja .p-small {
    font-size: 1.0rem;
    line-height: 1.3;
}
.price-ja .price02 {
    color: #014026;
    font-weight: bold;
}
.price-ja .big .yen{font-size:.8em}
.price-notes{color:var(--muted);font-size:.92rem;line-height:1.7}
.price-en h3{font-size:clamp(18px,2.2vw,20px);font-weight:700;color:var(--muted)}
.price-en .big{font-size:clamp(24px,3.8vw,30px);font-weight:900;color:var(--green)}
.list{margin:0;padding-left:1.1em}
.list li{margin:.35em 0}

/* Time and inclusion */
ul.clean{margin:.3em 0 0;padding-left:1.2em;list-style-type: disc;}
ul.clean li{margin:.3em 0}

.timegrid{display:grid;grid-template-columns:1fr;gap:10px}
.badge{
  display:inline-grid;place-items:center;font-weight:800;color:#fff;background:var(--green);
  width:28px;height:28px;border-radius:999px;margin-right:8px
}
.time-line{display:flex;align-items:center;font-size:clamp(18px,2.4vw,21px);margin:.15em 0}
.note{color:var(--muted);font-size:.92rem;line-height:1.7;margin-top:10px; padding:5px;}

/* ========= Right: Instructor Card ========= */
.card{
  border:1px solid var(--border);padding:16px;display:grid;gap:12px;background-color: #e5d7c5;	
}
.card .photo{overflow:hidden;}
.card h3{font-size:20px;line-height:1.3}
.card .en{color:#333}
.card .org{font-weight:800}
.card .mail{word-break:break-all}
.qr{width:90%;aspect-ratio:1/1;overflow:hidden;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;
  background:var(--accent);color:#fff;text-decoration:none;font-weight:800
}

/* ========= Responsive ========= */
@media (max-width:980px){
  .layout{grid-template-columns:1fr}
}
@media (max-width:680px){
  .flex2{grid-template-columns:1fr}
}