:root{

  --bg-start:#dff4ff;

  --bg-end:#eadcff;

  --surface:rgba(255,255,255,0.84);

  --surface-strong:rgba(255,255,255,0.94);

  --card-border:rgba(255,255,255,0.78);

  --text-main:#22252f;

  --text-sub:#667085;

  --primary:#6c63ff;

  --primary-2:#4f8df7;

  --primary-soft:#f1efff;

  --shadow-sm:0 8px 20px rgba(43,53,88,0.08);

  --shadow-md:0 14px 35px rgba(43,53,88,0.12);

  --radius-xl:30px;

  --radius-lg:24px;

  --radius-md:18px;

  --radius-sm:14px;

  --nav-height:86px;

}

*{

  box-sizing:border-box;

  -webkit-tap-highlight-color:transparent;

}

html{

  height:100%;

  font-size:16px;

}

body{

  margin:0;

  min-height:100%;

  font-family:"Segoe UI","Hiragino Sans","Yu Gothic UI",sans-serif;

  color:var(--text-main);

  background:

    radial-gradient(circle at top left, rgba(255,255,255,0.6), transparent 35%),

    linear-gradient(180deg,var(--bg-start),var(--bg-end));

  -webkit-text-size-adjust:100%;

  text-size-adjust:100%;

  font-size:clamp(14px,2.5vw,18px);

}

button,

input,

select,

textarea{

  font:inherit;

}

button{

  border:none;

  background:none;

  cursor:pointer;

}

img{

  max-width:100%;

  display:block;

}

a,

a:visited,

a:hover,

a:active{

  text-decoration:none;

  color:inherit;

}

/* ===== レイアウト ===== */

.app-shell{

  width:100%;

  max-width:520px;

  min-height:100vh;

  margin:0 auto;

  position:relative;

  padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom) + 14px);

  background:

    radial-gradient(circle at top right, rgba(255,255,255,0.45), transparent 30%),

    linear-gradient(180deg,var(--bg-start),var(--bg-end));

}

.topbar{

  padding:18px 18px 10px;

  position:sticky;

  top:0;

  z-index:20;

  background:linear-gradient(

    180deg,

    rgba(223,244,255,0.9) 0%,

    rgba(223,244,255,0.72) 60%,

    rgba(223,244,255,0) 100%

  );

  backdrop-filter:blur(10px);

}

.main-content{

  padding:8px 18px 22px;

}

/* ===== ブランド ===== */

.brand{

  display:flex;

  align-items:center;

  gap:12px;

  padding:14px 16px;

  border-radius:24px;

  background:rgba(255,255,255,0.72);

  border:1px solid rgba(255,255,255,0.86);

  box-shadow:var(--shadow-sm);

}

.brand-logo{

  width:52px;

  height:52px;

  border-radius:18px;

  display:grid;

  place-items:center;

  font-size:24px;

  color:#fff;

  background:linear-gradient(135deg,var(--primary),var(--primary-2));

  box-shadow:0 10px 18px rgba(108,99,255,0.28);

  flex-shrink:0;

  overflow:hidden;

}

.brand-logo img{

  width:100%;

  height:100%;

  object-fit:cotain;

}

.brand h1{

  margin:0;

  font-size:clamp(18px,4.5vw,24px);

  line-height:1.2;

  font-weight:800;

  letter-spacing:0.01em;

}

.brand p{

  margin:4px 0 0;

  font-size:clamp(12px,3vw,14px);

  color:var(--text-sub);

  line-height:1.4;

}

/* ===== 見出し ===== */

.section-title{

  margin:6px 0 16px;

  font-size:clamp(20px,5vw,28px);

  line-height:1.25;

  font-weight:800;

  letter-spacing:0.01em;

}

/* ===== 設定カード ===== */

.settings-card,

.info-card{

  background:var(--surface);

  border:1px solid var(--card-border);

  box-shadow:var(--shadow-sm);

  border-radius:24px;

  padding:18px 16px;

  backdrop-filter:blur(12px);

}

.settings-card{

  display:grid;

  gap:0;

}

.setting-row{

  width:100%;

  display:grid;

  grid-template-columns:minmax(0,1fr) auto;

  align-items:center;

  column-gap:14px;

  padding:16px 10px;

  border:none;

  border-bottom:1px solid rgba(102,112,133,0.14);

  background:transparent;

  text-align:left;

}

.setting-row:last-child{

  border-bottom:none;

  padding-bottom:14px;

}

button.setting-row{

  cursor:pointer;

}

button.setting-row:hover,

.setting-row:hover{

  background:#f5f6ff;

  border-radius:12px;

}

button.setting-row:active{

  transform:scale(0.98);

}

.setting-row > span:first-child{

  min-width:0;

  font-size:14px;

  font-weight:700;

  color:var(--text-main);

  line-height:1.5;

  word-break:break-word;

}

.value{

  color:var(--text-sub);

  font-weight:700;

  text-align:right;

  white-space:nowrap;

}

/* ===== セレクト ===== */

.setting-row select{

  width:160px;

  max-width:100%;

  min-width:120px;

  padding:10px 12px;

  border-radius:12px;

  border:1px solid #d8dbe6;

  background:#fff;

  color:var(--text-main);

  font-size:14px;

  box-shadow:none;

  appearance:auto;

}

/* ===== ボタン ===== */

.setting-action-btn{

  min-width:110px;

  border:none;

  padding:10px 14px;

  border-radius:12px;

  background:linear-gradient(135deg,var(--primary),var(--primary-2));

  color:#fff;

  font-size:14px;

  font-weight:700;

  cursor:pointer;

  box-shadow:var(--shadow-sm);

}

.setting-action-btn:active{

  transform:scale(0.98);

}

/* ===== スイッチ ===== */

.switch{

  position:relative;

  display:inline-block;

  width:52px;

  height:30px;

  flex-shrink:0;

}

.switch input{

  position:absolute;

  opacity:0;

  width:0;

  height:0;

}

.slider{

  position:absolute;

  inset:0;

  background:#d6d6de;

  border-radius:999px;

  transition:.25s;

  cursor:pointer;

}

.slider::before{

  content:"";

  position:absolute;

  width:22px;

  height:22px;

  left:4px;

  top:4px;

  background:#fff;

  border-radius:50%;

  transition:.25s;

  box-shadow:0 2px 6px rgba(0,0,0,0.15);

}

.switch input:checked + .slider{

  background:var(--primary);

}

.switch input:checked + .slider::before{

  transform:translateX(22px);

}

/* ===== 情報カード ===== */

.info-card{

  margin-top:16px;

}

.info-card h3{

  margin:0 0 8px;

  font-size:18px;

  line-height:1.3;

  font-weight:800;

}

.info-card p{

  margin:0;

  color:var(--text-sub);

  font-size:14px;

  line-height:1.7;

}

/* ===== お問い合わせ ===== */

.contact-box{

  margin-top:20px;

  text-align:center;

  padding:20px 18px;

  border:1.5px solid rgba(79,70,229,0.18);

  border-radius:24px;

  background:rgba(255,255,255,0.9);

  box-shadow:0 10px 24px rgba(79,70,229,0.08);

}

.contact-box h3{

  margin:0 0 8px;

  font-size:18px;

  font-weight:800;

  color:#111827;

}

.contact-box p{

  margin:0;

  font-size:13px;

  line-height:1.8;

  color:#4b5563;

}

.contact-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-width:220px;

  margin-top:14px;

  padding:13px 20px;

  background:linear-gradient(135deg,#2563eb,#4f46e5);

  color:#fff !important;

  border-radius:14px;

  text-decoration:none;

  font-weight:700;

  font-size:14px;

  letter-spacing:.02em;

  box-shadow:0 8px 18px rgba(37,99,235,0.22);

  transition:transform .2s ease, opacity .2s ease, box-shadow .2s ease;

}

.contact-btn:hover{

  transform:translateY(-2px);

  opacity:.96;

  box-shadow:0 12px 22px rgba(37,99,235,0.28);

}

.contact-btn:active{

  transform:scale(.98);

}

.contact-note{

  font-size:11px !important;

  color:#6b7280 !important;

  margin-top:10px !important;

}

/* ===== 下部ナビ ===== */

.bottom-nav{

  position:fixed;

  left:0;

  right:0;

  bottom:0;

  z-index:30;

  width:100%;

  max-width:520px;

  margin:0 auto;

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:8px;

  padding:10px 12px calc(10px + env(safe-area-inset-bottom));

  background:rgba(255,255,255,0.9);

  backdrop-filter:blur(16px);

  border-top:1px solid rgba(50,60,90,0.08);

  box-shadow:0 -8px 30px rgba(43,53,88,0.06);

}

.nav-item{

  min-height:58px;

  border-radius:18px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:4px;

  color:#5f6475;

  transition:background .18s ease, color .18s ease, transform .18s ease;

}

.nav-item.active{

  background:var(--primary-soft);

  color:var(--primary);

  font-weight:800;

}

.nav-item:active{

  transform:scale(0.97);

}

.nav-icon{

  font-size:20px;

  line-height:1;

}

.nav-text{

  font-size:12px;

  line-height:1;

  letter-spacing:0.01em;

}

/* ===== その他 ===== */

.hidden{

  display:none !important;

}

:focus-visible{

  outline:3px solid rgba(79,141,247,0.35);

  outline-offset:3px;

  border-radius:18px;

}

/* ===== レスポンシブ ===== */

@media (max-width:480px){

  .setting-row{

    grid-template-columns:minmax(0,1fr) 140px;

    column-gap:10px;

  }

  .setting-row select{

    width:140px;

    min-width:100px;

    font-size:13px;

  }

  .setting-action-btn{

    min-width:96px;

    font-size:13px;

    padding:9px 12px;

  }

}

@media (max-width:360px){

  .brand h1{

    font-size:20px;

  }

  .setting-row{

    grid-template-columns:minmax(0,1fr) 120px;

  }

  .setting-row > span:first-child{

    font-size:13px;

  }

  .contact-btn{

    min-width:100%;

    width:100%;

  }

}

@media (min-width:768px){

  body{

    padding:18px 0;

    font-size:16px;

  }

  .app-shell{

    border-radius:34px;

    overflow:hidden;

    min-height:calc(100vh - 36px);

    box-shadow:0 18px 60px rgba(43,53,88,0.14);

  }

  .main-content{

    padding:10px 20px 24px;

  }

  .bottom-nav{

    border-radius:22px 22px 0 0;

  }

}