*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fbfaf8;color:#303942;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;line-height:1.75}a{color:#286d76;text-decoration:none}a:hover{text-decoration:underline}.shell{max-width:1120px;margin:auto;padding:0 22px}.site-header{background:#fff;border-bottom:1px solid #ecebe7;position:sticky;top:0;z-index:20}.nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:15px}.logo{font-weight:900;color:#34424a;font-size:19px}.nav nav{display:flex;align-items:center;gap:17px;flex-wrap:wrap;font-size:14px}.nav-login,.btn{background:#357f80;color:#fff!important;padding:10px 20px;border:0;border-radius:12px;cursor:pointer;font:inherit;font-weight:700;display:inline-block}.btn:hover,.nav-login:hover{background:#28696b;text-decoration:none}.btn.secondary{background:#fff;color:#357f80!important;border:1px solid #8ebaba}.hero{background:linear-gradient(130deg,#e8f4ef,#fff5e8 60%,#f9ebef);padding:70px 20px 55px;text-align:center}.hero .eyebrow{font-size:13px;letter-spacing:.22em;color:#748786;font-weight:800}.hero h1{font-size:clamp(27px,4.5vw,48px);line-height:1.45;margin:12px 0}.hero .lead{font-size:17px;max-width:650px;margin:15px auto 28px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:860px;margin:32px auto 0}.action-card{border-radius:22px;padding:28px 15px;background:#e0f2e7;border:2px solid #c4e5d0;box-shadow:0 12px 26px #4565a010;display:block;color:#28594b;transition:transform .2s,box-shadow .2s}.action-card.sorry{background:#fbe8e5;border-color:#f3d0cc;color:#87514b}.action-card:hover{transform:translateY(-5px);box-shadow:0 14px 30px #4c545025;text-decoration:none}.action-card .emoji{display:block;font-size:42px}.action-card strong{display:block;font-size:clamp(18px,2.5vw,27px)}.action-card small{display:block}.section{padding:48px 0}.section h2{font-size:25px;margin:0 0 18px}.about{background:#fff;border:1px solid #eee8e2;border-radius:22px;padding:28px 32px;max-width:900px;margin:auto}.about p{margin:0 0 15px}.about p:last-child{margin:0}.two-col{display:grid;grid-template-columns:1fr 1.6fr;gap:30px;align-items:start}.panel{background:#fff;border:1px solid #eee9e5;border-radius:20px;padding:22px;box-shadow:0 4px 18px #353e4510}.place-list{display:flex;flex-wrap:wrap;gap:10px}.place-pill{padding:9px 13px;background:#f2f8f6;border:1px solid #dcece6;border-radius:99px}.messages{display:grid;gap:18px}.message{max-width:100%;border-radius:18px;background:#fff;border:1px solid #ece9e6;padding:18px}.bubble-top{display:flex;align-items:center;gap:10px}.avatar{background:#f1f5f3;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:22px}.bubble-top small{display:block;font-size:11px;color:#8b9399}.bubble{margin:12px 0 9px 48px;background:#e6f4e9;border-radius:3px 16px 16px 16px;padding:14px 16px;white-space:normal;overflow-wrap:anywhere}.message.sorry .bubble{background:#fcebe7}.message-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:11px;font-size:12px;color:#788388;margin-left:48px}.tag{font-weight:700;color:#4e8470}.sorry .tag{color:#b56c62}.like,.share{margin-left:auto;border:0;background:#f3f5f4;border-radius:99px;padding:5px 11px;cursor:pointer;color:#65777b}.share{margin-left:0}.like.active{color:#d65c7e;background:#ffedf2}.form-wrap{max-width:700px;margin:45px auto;padding:0 20px}.form-panel{background:#fff;border-radius:20px;padding:30px;border:1px solid #ece9e6}.field{margin:0 0 22px}.field label{font-weight:800;display:block;margin-bottom:8px}.field input[type=text],.field textarea,.field select,.search-input{width:100%;padding:13px 14px;border:1px solid #cbd8d5;border-radius:10px;font:inherit;background:#fff}.field textarea{min-height:190px;resize:vertical}.radio-line{display:flex;gap:18px;flex-wrap:wrap}.notice{padding:13px 16px;background:#eef6f2;border-radius:12px;margin-bottom:18px}.error{background:#fff0ee;color:#a43e38}.more{display:block;margin:24px auto}.page-title{margin:35px 0 24px}.place-header{background:#edf6f2;border-radius:20px;padding:24px;margin:30px 0}.empty{color:#88959b}footer{text-align:center;color:#82918f;background:#f1f4f1;padding:32px 20px;margin-top:50px}footer small{font-size:12px}.admin-row{display:flex;gap:10px;align-items:center;justify-content:space-between;border-bottom:1px solid #eee;padding:13px 0}.danger{background:#bd4f4f}.oauth{display:grid;gap:12px;max-width:400px;margin:auto}.oauth a{text-align:center}.search-results{border:1px solid #ddd;border-radius:10px;max-height:200px;overflow:auto}.search-results button{display:block;width:100%;border:0;background:white;text-align:left;padding:9px 12px;cursor:pointer}.search-results button:hover{background:#eff7f4}@media(max-width:720px){.two-col,.actions{grid-template-columns:1fr}.hero{padding-top:45px}.nav{align-items:flex-start;padding-top:12px;padding-bottom:12px;flex-direction:column}.logo{font-size:16px}.about{padding:21px}.message-bottom,.bubble{margin-left:0}.form-panel{padding:20px}}
.report-link{font-size:12px;color:#8b6d6d;text-decoration:underline}.public-profile{display:flex;gap:22px;align-items:center;background:#fff;border:1px solid #eee9e5;border-radius:20px;padding:28px;margin-bottom:35px}.profile-avatar{font-size:48px}.public-profile h1{margin:0 0 14px}.profile-stats{display:flex;gap:15px;flex-wrap:wrap}.profile-stats>div{background:#f1f7f4;border-radius:14px;padding:12px 20px;min-width:140px}.profile-stats strong{font-size:27px;display:block;color:#357f80}.profile-stats span{font-size:12px;color:#65777b}@media(max-width:600px){.public-profile{align-items:flex-start;padding:18px;gap:10px}.profile-avatar{font-size:30px}.profile-stats>div{min-width:120px;padding:10px}}

.site-subtitle{display:block;font-size:11px;font-weight:normal;line-height:1.4;opacity:.75}.embed-code{width:100%;min-height:110px;font-size:12px;font-family:monospace}.embed-form{max-width:900px;margin:25px auto}

/* Header: primary title and quiet indented subtitle */
.site-header .logo{display:inline-flex;align-items:center;gap:8px;line-height:1.25}
.site-header .site-subtitle{display:block;margin-left:1em;margin-top:5px;color:#899398;opacity:1;font-size:11px;font-weight:400;letter-spacing:.015em}
/* Embed maker */
.maker-shell{max-width:1030px;margin:0 auto;padding:38px 20px 65px}
.maker-hero{background:linear-gradient(125deg,#e9f7f0,#f5fbf8 55%,#fff2e9);border:1px solid #e2eee7;border-radius:26px;padding:38px 38px 32px;margin-bottom:25px}
.maker-eyebrow{font-size:12px;letter-spacing:.14em;font-weight:800;color:#558573}
.maker-hero h1{font-size:clamp(26px,4vw,37px);line-height:1.4;margin:8px 0 12px}
.maker-hero p{color:#62746d;margin:0;max-width:760px}
.maker-steps{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.maker-steps span{background:#fff9;border:1px solid #e1eae4;border-radius:100px;padding:7px 15px;font-size:13px;font-weight:700;color:#517568}
.maker-card{background:white;border:1px solid #e4ebe6;border-radius:24px;box-shadow:0 14px 40px #3a665012;padding:28px;margin-bottom:22px}
.maker-card h2{margin:0 0 8px;font-size:22px}.maker-muted{font-size:13px;color:#73837c}
.maker-search-wrap{position:relative;max-width:720px}.maker-search-label{display:block;font-weight:800;margin:18px 0 9px}
.maker-search{display:block;width:100%;border:2px solid #c7dcd1;border-radius:14px;padding:17px 18px;font:inherit;font-size:17px;outline:0;background:#fff}
.maker-search:focus{border-color:#438e71;box-shadow:0 0 0 4px #5fb08b22}
.maker-suggestions{background:white;border:1px solid #d9e7de;border-radius:14px;box-shadow:0 12px 24px #2e604a22;max-height:270px;overflow-y:auto;margin-top:8px}
.maker-option{display:block;width:100%;text-align:left;padding:13px 16px;border:0;border-bottom:1px solid #edf1ed;background:white;cursor:pointer;font:inherit}
.maker-option:hover,.maker-option:focus{background:#eaf6ef}.maker-option:last-child{border-bottom:0}
.maker-selection{background:#ecf7f0;border:1px solid #b8dcc9;border-radius:13px;padding:13px 17px;margin-top:14px;font-weight:700;color:#356d53}
.maker-primary{display:inline-block;border:0;background:#368264;color:white;border-radius:12px;padding:15px 28px;font:inherit;font-weight:800;cursor:pointer;margin-top:18px}
.maker-primary:hover{background:#276b50}.maker-primary:disabled{background:#a5b9ae;cursor:not-allowed}
.maker-preview-link{display:inline-flex;align-items:center;gap:8px;border:1px solid #9dcab5;border-radius:12px;padding:12px 17px;color:#337657;background:white;font-weight:700}
.maker-code{display:block;width:100%;min-height:135px;border:1px solid #d4e1d9;border-radius:12px;padding:13px;background:#f8faf8;color:#44584b;font:12px/1.65 monospace;resize:vertical}
.maker-code-block{margin:23px 0}.maker-code-block h3{margin:0 0 9px}.maker-copy{border:1px solid #98c4ac;background:#eff9f2;color:#316d4d;border-radius:10px;padding:10px 17px;cursor:pointer;font-weight:700;margin-top:8px}
.maker-inline{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}
@media(max-width:700px){.maker-shell{padding:20px 13px}.maker-hero{padding:26px 20px}.maker-card{padding:20px}.maker-steps{gap:6px}.maker-steps span{font-size:11px}}

/* スマートフォン: ホームを左端、ログインを右端に配置 */
@media (max-width:720px) {
  .site-header .nav > nav {
    display:flex;
    width:100%;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .site-header .nav > nav > a[href="index.php"] {
    order:0;
    margin-right:auto;
  }
  .site-header .nav > nav > a.nav-login {
    order:1;
    margin-left:auto;
  }
  .site-header .nav > nav > a:not([href="index.php"]):not(.nav-login) {
    order:2;
  }
}

/* Mobile: Home left; company embed code next to Login at right */
@media (max-width:720px) {
  .site-header .nav > nav { flex-wrap:nowrap; gap:8px; font-size:12px; }
  .site-header .nav > nav > a[href="index.php"] { order:0; margin-right:0; white-space:nowrap; }
  .site-header .nav > nav > a:not([href="index.php"]):not([href="embed-maker.php"]):not(.nav-login) { order:1; }
  .site-header .nav > nav > a[href="embed-maker.php"] { order:2; margin-left:auto; white-space:nowrap; }
  .site-header .nav > nav > a.nav-login { order:3; margin-left:0; white-space:nowrap; padding:8px 11px; }
}