/* =========================
  基本カラー定義
========================= */
:root {
  --c1: #3B82F6; /* メイン */
  --c2: #2169DE; /* ホバー */

  --font_color: #0f172a;
  --bg_color: #ffffff;
  --border_color: #e5e7eb;
  --muted_color: #64748b;
}
li {list-style-type: none;}

.tac {text-align: center;}
/* =========================
  ベース
========================= */
body {
  margin: 0;
  padding: 0;
  background: var(--bg_color);
  color: var(--font_color);
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial;
  line-height: 1.6;
	background: url(../images/bg.webp) no-repeat;
  background-size: 100% auto;
	width: 100%; height: 100%;
font-size: 16px;
}

h1 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

h2 {
  font-size: 1.2rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

/* =========================
  リンク
========================= */
a {
  color: var(--c1);
  text-decoration: none;
}
a:hover {
  color: var(--c2);
}

/* =========================
  共通カード
========================= */
.card {
  border: 1px solid var(--border_color);
  border-radius: 8px;
  padding	alpha: 16px;
  padding: 16px;
  background: #fff;
  margin-bottom: 16px;
}

/* =========================
  ボタン風リンク（重要）
  ※ 指定いただいたCSSを
     マイページ用に安全に適用
========================= */

/* ボタンを並べる親（推奨） */
.action-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0;
}

/* 共通 */
.action-links a {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 6px;
  box-shadow: 3px 3px 4px 0 rgba(0,0,0,0.15);
  font-weight: bold;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.action-links a:hover {
  transform: translateY(1px);
  box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.15);
}

/* ===== 指定CSSここ ===== */
.action-links a:first-child {
  background: linear-gradient(180deg, #51C3D5 0%, #2B5AF4 100%);
  color: #fff;
}

.action-links a:last-child {
  background: linear-gradient(180deg, #FFF 0%, #E8E4E4 100%);
  color: #0f172a;
}
/* ========================= */

/* =========================
  フォーム
========================= */
input[type="text"],textarea{margin:0;padding:0;border:0;border-radius:0;background:none;font:inherit;color:inherit;outline:none;appearance:none;-webkit-appearance:none;}

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  width: 100%;
  max-width: 480px;
  padding: 16px;
  border-radius: 6px;
  border: 1px solid var(--border_color);
   background: #fff;
}

textarea {
  resize: vertical;
}
form label { display: block; margin-bottom: 16px;}
form button { position: relative; display: block; width: fit-content; margin: 0 auto 32px; padding: 16px 40px; background:linear-gradient(180deg,#51C3D5 0%,#2B5AF4 100%); box-shadow:3px 3px 4px 0 rgba(0,0,0,0.15); color:#fff; font-weight:bold; text-align: center; border-radius: 4px; transition: all .5s; border: none; font-size: 18px;}
form button span {  color: #fff; display: block; text-align: center;}
form button::after{content:"";position:absolute;top:40%;right:16px;width:10px;height:12px;background-repeat:no-repeat;background-position:center;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11.832'%20height='13.658'%20viewBox='0%200%2011.832%2013.658'%3E%3Cpath%20d='M6.831%2C0l0%2C0%2C0%2C0L5.064%2C3.053l0%2C0L3.416%2C5.917%2C0%2C11.833H3.525l3.3-5.722%2C3.3%2C5.722h3.525L11.888%2C8.768l0%2C0L10.247%2C5.917l-.118-.205L8.594%2C3.053Z'%20transform='translate(11.833)%20rotate(90)'%20fill='%23fff'/%3E%3C/svg%3E");pointer-events:none;}


/* =========================
  テーブル（管理画面にも流用可）
========================= */
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

th, td {
  border: 1px solid var(--border_color);
  padding: 8px;
  text-align: left;
}

th {
  background: #f8fafc;
}

body#login {width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center;}

















@media (max-width: 999px){
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #e6e7f3;
}

.logcard {width: 90%; padding: 33px; box-sizing: border-box; margin: 0 auto; text-align: center; background: rgba(255,255,255,.4); border-radius: 16px;}
/* ヘッダー全体 */
.cl-header{position:relative; /* 必要なければ fixed / static に変えてOK */ top:0; z-index:100; background:linear-gradient(to right,#f2f7ff,#ffffff); backdrop-filter:blur(10px); border-bottom:1px solid rgba(148,163,184,0.25);}
.cl-header-inner{max-width:1292px; margin:0 auto; padding:16px 0; display:flex; align-items:center; justify-content:center; flex-direction: column;}
/* ロゴ部分 */
.cl-logo{display:flex; align-items:center; gap:12px; margin-bottom: 24px;}
.cl-logo-mark{width:50px; height:50px;}
.cl-logo-mark svg{width:100%; height:100%; object-fit:contain;}
.cl-logo-text-main{font-weight:700; font-size:21px; color:#0f172a; font-weight:bold;}
.cl-logo-text-sub{font-size:12px; color:#64748b;}
/* ナビゲーション */
.status{display:flex; align-items:center; justify-content: center; flex-wrap: wrap; gap:12px;}
.status p {width: 45%; padding: 0; margin: 0; box-sizing: border-box; text-align: center;}
.status p span:first-child {background: var(--c1); display: block; padding: 4px 8px; text-align: center; color: #fff; margin-right: 8px; font-size: 12px; border-radius: 8px;}
.status p:last-child {width: 100%; text-align: center;}
main {width: 94%; margin: 40px auto 0;}
main .indexnavi { width: 100%; padding: 12px; box-sizing: border-box; margin: 0 auto; text-align: center; border-radius: 16px;}
main ul{width:100%; display:block; padding:0; margin:0;}
main li{position:relative; width: 100%; padding-left:40px; list-style-type:none; margin-bottom: 12px; display:block; display:flex; justify-content:flex-start; align-items:center; font-weight:bold; font-size: 97%; font-size: 18px; text-align: left;}
main li::before{content:""; position:absolute; left:0; top:0.15em; /* 行の中心にしたいなら 50% + translateY を使う（下に例） */ width:24px; /* ←アイコン表示サイズ */ height:24px; /* ←アイコン表示サイズ */ background-repeat:no-repeat; background-position:center; background-size:contain; background-image:url("data:image/svg+xml,%3Csvg%20width='38'%20height='38'%20viewBox='0%200%2038%2038'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cg%20filter='url(%23filter0_d_1_121)'%3E%3Ccircle%20cx='17'%20cy='15'%20r='15'%20fill='white'/%3E%3C/g%3E%3Cg%20filter='url(%23filter1_i_1_121)'%3E%3Ccircle%20cx='17'%20cy='15'%20r='13'%20fill='%23FAFAFA'/%3E%3C/g%3E%3Cpath%20d='M19.7332%2011.7311L15.2605%2016.3027L13.9641%2014.9775C13.4804%2014.4832%2012.695%2014.4832%2012.2114%2014.9775C11.7277%2015.4719%2011.7277%2016.2732%2012.2114%2016.769L14.3842%2018.9899C14.6267%2019.2378%2014.9429%2019.3603%2015.2605%2019.3603C15.5781%2019.3603%2015.8943%2019.2363%2016.1369%2018.9899L21.4859%2013.5225C21.9695%2013.0282%2021.9695%2012.2269%2021.4859%2011.7311C21.0022%2011.2367%2020.2169%2011.2367%2019.7332%2011.7311Z'%20fill='%233B82F6'/%3E%3Cdefs%3E%3Cfilter%20id='filter0_d_1_121'%20x='0'%20y='0'%20width='38'%20height='38'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3E%3CfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3E%3CfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'/%3E%3CfeOffset%20dx='2'%20dy='4'/%3E%3CfeGaussianBlur%20stdDeviation='2'/%3E%3CfeComposite%20in2='hardAlpha'%20operator='out'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.07%200'/%3E%3CfeBlend%20mode='normal'%20in2='BackgroundImageFix'%20result='effect1_dropShadow_1_121'/%3E%3CfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='effect1_dropShadow_1_121'%20result='shape'/%3E%3C/filter%3E%3Cfilter%20id='filter1_i_1_121'%20x='4'%20y='2'%20width='26'%20height='30'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3E%3CfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3E%3CfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3E%3CfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'/%3E%3CfeOffset%20dy='4'/%3E%3CfeGaussianBlur%20stdDeviation='2'/%3E%3CfeComposite%20in2='hardAlpha'%20operator='arithmetic'%20k2='-1'%20k3='1'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.12%200'/%3E%3CfeBlend%20mode='normal'%20in2='shape'%20result='effect1_innerShadow_1_121'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");}
fieldset {display: block; flex-wrap: wrap; gap:16px; padding: 32px;}
label {width: 100%; text-align: left;}

.submitselect { width: 100%; display: flex; justify-content: center; align-items: center; margin: auto;}


input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  width: 100%;
  box-sizing: border-box;
  max-width: 480px;
  padding: 16px;
  border-radius: 6px;
  border: 1px solid var(--border_color);
   background: #fff;
}




.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  font-size: 14px;
}

th, td {
  border: 1px solid #cacaca;
  padding: 8px;
  text-align: left;
  word-break: break-word;
width: 40%;
background: #fff;
}

th {
  background: #f8fafc;
}
.sptal {text-align: left!important;}

section .pricecell{width:100%; display:flex; justify-content:flex-start; flex-direction: column;gap:16px;}
section .pricecell .cell{position: relative; display:flex; justify-content:flex-start; align-items:center;flex-direction: column; flex-wrap:wrap; width:100%; padding: 16px; box-sizing:border-box;  background:rgba(255,255,255,.7); border-radius:8px; backdrop-filter:blur(12px);}
section .pricecell .cell .plangrade { position: relative; display: block; width: 100%; border-radius: 8px; background:#51C3D5; color: #fff; text-align: center; padding: 16px; font-size: 16px; margin-bottom: 16px; box-sizing: border-box;}
section .pricecell .cell:nth-of-type(1) .plangrade { background:#3B82F6;}
section .pricecell .cell:nth-of-type(2) .plangrade { background:#1C72FF;}
section .pricecell .cell:nth-of-type(3) .plangrade { background:#0357E0;}
section .pricecell .cell .price {font-size: 44px; display: block; width: 100%; font-weight: 700; text-align: center; margin: 0 auto 16px; padding-bottom: 24px; border-bottom: 1px dotted #94A3B8;}
section .pricecell .cell .price .lrg { display: inline; font-size: 21px; font-weight: normal; padding-left: 2px;}
section .pricecell .cell .price .sml {font-size: 16px; display: block; font-weight: 500; margin-top: 4px;}
section .pricecell .cell .price span {color: #0f172a!important;}
section .pricecell .cell ul { display: block; width: 100%; margin-bottom: 0; border-bottom: 1px dotted #94A3B8; padding-bottom: 16px; margin-bottom: 0; }
section .pricecell .cell ul li {margin-bottom: 8px; width: 100%; font-weight: normal; font-size: 14px;}
section .pricecell .cell ul li:last-child {margin-bottom: 0;}
section .pricecell .cell label {width: 100%; margin-top: 16px; background: #fafafa; padding: 4px; box-sizing: border-box; text-align: center; font-size: 18px; font-weight: bold;}
section .optionselect { width: 100%; display: block; padding: 16px; box-sizing:border-box;  background:rgba(255,255,255,.7); border-radius:8px;}
.optitem {width: 100%; display: flex;}
.sum { padding: 16px; box-sizing:border-box;  background:rgba(255,255,255,.7); border-radius:8px; margin-bottom: 16px;}
.sum .yen {margin: 0 auto; text-align: center; font-size: 32px; font-weight: bold;}


}


















@media (min-width: 1000px){
.logcard {width: 60%; padding: 33px; box-sizing: border-box; margin: 0 auto; text-align: center; background: rgba(255,255,255,.4); border-radius: 16px;}
/* ヘッダー全体 */
.cl-header{position:sticky; /* 必要なければ fixed / static に変えてOK */ top:0; z-index:100; background:linear-gradient(to right,#f2f7ff,#ffffff); backdrop-filter:blur(10px); border-bottom:1px solid rgba(148,163,184,0.25);}
.cl-header-inner{max-width:1292px; margin:0 auto; padding:16px 0; display:flex; align-items:center; justify-content:space-between;}
/* ロゴ部分 */
.cl-logo{display:flex; align-items:center; gap:12px;}
.cl-logo-mark{width:50px; height:50px;}
.cl-logo-mark svg{width:100%; height:100%; object-fit:contain;}
.cl-logo-text-main{font-weight:700; font-size:21px; color:#0f172a; font-weight:bold;}
.cl-logo-text-sub{font-size:12px; color:#64748b;}
/* ナビゲーション */
.status{display:flex; align-items:center; gap:24px;}
.status p span:first-child {background: var(--c1); display: inline-block; padding: 4px 8px; text-align: center; color: #fff; margin-right: 8px; font-size: 12px; border-radius: 8px;}

main {width: 80%; margin: 100px auto 0;}
main .indexnavi { width: 100%; padding: 33px; box-sizing: border-box; margin: 0 auto; text-align: center; background: rgba(255,255,255,.4); border-radius: 16px;}
main ul{width:100%; display:flex; justify-content:flex-start; flex-wrap:wrap; gap:32px 0; padding:0; margin:0 0 48px;}
main li{position:relative; width: 29%; padding-left:40px; list-style-type:none; height:24px; display:block; display:flex; justify-content:flex-start; align-items:center; font-weight:bold; font-size: 97%; font-size: 18px;}
main li::before{content:""; position:absolute; left:0; top:0.15em; /* 行の中心にしたいなら 50% + translateY を使う（下に例） */ width:24px; /* ←アイコン表示サイズ */ height:24px; /* ←アイコン表示サイズ */ background-repeat:no-repeat; background-position:center; background-size:contain; background-image:url("data:image/svg+xml,%3Csvg%20width='38'%20height='38'%20viewBox='0%200%2038%2038'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cg%20filter='url(%23filter0_d_1_121)'%3E%3Ccircle%20cx='17'%20cy='15'%20r='15'%20fill='white'/%3E%3C/g%3E%3Cg%20filter='url(%23filter1_i_1_121)'%3E%3Ccircle%20cx='17'%20cy='15'%20r='13'%20fill='%23FAFAFA'/%3E%3C/g%3E%3Cpath%20d='M19.7332%2011.7311L15.2605%2016.3027L13.9641%2014.9775C13.4804%2014.4832%2012.695%2014.4832%2012.2114%2014.9775C11.7277%2015.4719%2011.7277%2016.2732%2012.2114%2016.769L14.3842%2018.9899C14.6267%2019.2378%2014.9429%2019.3603%2015.2605%2019.3603C15.5781%2019.3603%2015.8943%2019.2363%2016.1369%2018.9899L21.4859%2013.5225C21.9695%2013.0282%2021.9695%2012.2269%2021.4859%2011.7311C21.0022%2011.2367%2020.2169%2011.2367%2019.7332%2011.7311Z'%20fill='%233B82F6'/%3E%3Cdefs%3E%3Cfilter%20id='filter0_d_1_121'%20x='0'%20y='0'%20width='38'%20height='38'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3E%3CfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3E%3CfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'/%3E%3CfeOffset%20dx='2'%20dy='4'/%3E%3CfeGaussianBlur%20stdDeviation='2'/%3E%3CfeComposite%20in2='hardAlpha'%20operator='out'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.07%200'/%3E%3CfeBlend%20mode='normal'%20in2='BackgroundImageFix'%20result='effect1_dropShadow_1_121'/%3E%3CfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='effect1_dropShadow_1_121'%20result='shape'/%3E%3C/filter%3E%3Cfilter%20id='filter1_i_1_121'%20x='4'%20y='2'%20width='26'%20height='30'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3E%3CfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3E%3CfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3E%3CfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'/%3E%3CfeOffset%20dy='4'/%3E%3CfeGaussianBlur%20stdDeviation='2'/%3E%3CfeComposite%20in2='hardAlpha'%20operator='arithmetic'%20k2='-1'%20k3='1'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.12%200'/%3E%3CfeBlend%20mode='normal'%20in2='shape'%20result='effect1_innerShadow_1_121'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");}
fieldset {display: flex; flex-wrap: wrap; gap:16px; padding: 32px;}
fieldset label {width: 45%; text-align: left;}

.submitselect { width: 480px; display: flex; justify-content: center; align-items: center; margin: auto;}

section .pricecell{width:100%; display:flex; justify-content:flex-start; gap:16px;}
section .pricecell .cell{position: relative; display:flex; justify-content:flex-start; align-items:center;flex-direction: column; flex-wrap:wrap; width:33%; padding: 24px; box-sizing:border-box;  background:rgba(255,255,255,.7); border-radius:8px; backdrop-filter:blur(12px);}
section .pricecell .cell .plangrade { position: relative; display: block; width: 100%; border-radius: 8px; background:#51C3D5; color: #fff; text-align: center; padding: 16px; font-size: 18px; margin-bottom: 16px; box-sizing: border-box;}
section .pricecell .cell:nth-of-type(1) .plangrade { background:#3B82F6;}
section .pricecell .cell:nth-of-type(2) .plangrade { background:#1C72FF;}
section .pricecell .cell:nth-of-type(3) .plangrade { background:#0357E0;}
section .pricecell .cell .price {font-size: 40px; display: block; width: 100%; font-weight: 700; text-align: center; margin: 0 auto 16px; padding-bottom: 16px; border-bottom: 1px dotted #94A3B8;}
section .pricecell .cell .price .lrg { display: inline; font-size: 14px; font-weight: bold; padding-left: 2px;}
section .pricecell .cell .price .sml {font-size: 12px; display: block; font-weight: 500; margin-top: 4px;}
section .pricecell .cell .price span {color: #0f172a!important;}
section .pricecell .cell ul { display: block; width: 100%; margin-bottom: 0; border-bottom: 1px dotted #94A3B8; padding-bottom: 16px; margin-bottom: 0; min-height:11em; }
section .pricecell .cell ul li {margin-bottom: 8px; width: 100%; font-weight: normal; font-size: 15px;}
section .pricecell .cell ul li:last-child {margin-bottom: 0;}
section .pricecell .cell label {width: 100%; margin-top: 16px; background: #fafafa; padding: 4px; box-sizing: border-box; text-align: center; font-size: 18px; font-weight: bold;}
section .optionselect { width: 100%; display: flex; flex-wrap: wrap; padding: 32px; box-sizing:border-box;  background:rgba(255,255,255,.7); border-radius:8px;}
.optitem {width: 33%; display: flex;}
.sum { padding: 24px; box-sizing:border-box;  background:rgba(255,255,255,.7); border-radius:8px; margin-bottom: 16px;}
.sum .yen {margin: 0 auto; text-align: center; font-size: 32px; font-weight: bold;}
}