/* ------------ 変数 color  ------------ */
:root {
  /* 基本背景色 */
  --color-bg-body: #b0dcfa;
  --color-bg-wrapper: #fff;

  /* テキスト色 */
  --color-text-main: #000;
  --color-text-emphasis: #FF0000;
  --color-text-placeholder: #ccc;
  --color-text-footerlink: #666666;
  --color-text-headerh2: #000;
  --color-textshadow-headerh2: #fff;
  --color-text-headerh3: #3b82b2;

  /* STEP */
  --color-bg-step-th: #3597f2;
  --color-text-step-th: #fff;
  --color-bg-step-td: #f3f3f3;
  --color-bg-step-wht: #fff;

  /* テーブル */
  --color-bg-table-th: #b0dcfa;
  --color-table-border: #f6f6f6;
  --color-table-bordered: #909090;
  --color-text-tdnote: #999;

  /* 入力フォーム枠線 */
  --color-input-border: #808080;
  --color-input-focus: #3b82b2;
  
  /* エラー */
  --color-text-error: #FF3842;
  --color-bg-error: #ffe3e3;

  /* ラジオボタン ボタン化 */
  --color-bg-radbtn: #fff;
  --color-border-radbtn: #3b82b2;
  --color-text-radbtn: #000;
  --color-hover-radbtn: #e0f0ff;
  --color-bg-chk-radbtn: #3b82b2;
  --color-text-chk-radbtn: #fff;
  

  /* ボタンデフォルト (※現在はsubmitとコンビニ説明で使用) */
  --color-bg-default: #f0f0f0;
  --color-border-default: #ccc;
  --color-text-default: #000;
  --color-bg-hover-default: #e0e0e0;
  --color-border-hover-default: #999;

  /* ボタンメインカラー (※現在は住所検索で使用) */
   --color-text-btn: #fff;
   --color-bg-btn: #3b82b2;
   --color-bg-hover-btn: #2c6a94;

  /* マーク（注意/必須/任意）*/
  --color-mark-ctn: #F00;
  --color-mark-req: #66c;
  --color-mark-opt: #b6b6b6;
  --color-mark-text: #fff;

}

/* ------------ リセット ------------ */
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}



/* ------------ Browser Default Initialization ------------*/
html {overflow-y: scroll;}

body {
 width:100%;
 text-align:center;
 font-size:0.8em;
 font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
 line-height: 130%;
 background: var(--color-bg-body);
 color: var(--color-text-main);
}

img {border:0;vertical-align: bottom;}

header {}
footer {padding:20px;text-align:center;font-size:10px;color: var(--color-text-main);}



/* ------------ Header ------------ */
header h2 {
 text-align:center;
 font-size:2.8em;
 padding:40px 20px 10px;
 color: var(--color-text-headerh2);
 font-weight:normal;
 text-shadow: 2px 2px 1px var(--color-textshadow-headerh2);
 line-height:1.2;
}

header h2 img {
 width: 100%;
 max-width: 500px;
 height: auto;
}

@media only screen and (max-width:768px){
 header h2 {
 font-size:2.3em;
 }
}

header h3 {
 text-align: center;
 font-size: 1.8em;
 padding: 20px 0;
 color: var(--color-text-headerh3);
 font-weight: bold;
 line-height: 1.2;
}

header h3 .step {font-size: 0.6em; font-weight: bold; display: inline-block;}
header h3 .step_on{font-size: 1em; display: inline-block;}
header h3 .step-title {font-size: 1em;}

@media only screen and (min-width:769px){
 .step-title {margin-left:1em;}
}

@media only screen and (max-width: 768px) {
 .step-title {
  display:block;
  padding-top:10px;
  line-height:1.2;
  margin-left:0;
 }
}

header {
    position: relative;
}

.h2-subtitle {
    position: absolute;
    display: block;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1em;
    line-height: 1;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

/* ------------ bakimg ------------ */
header.bakimg{
 width: 100%;
 height: 0;
 padding-top: calc(300 / 1000 * 100%);
 background: url(images/bakimg.png) 0 0 no-repeat;
 background-size: contain;
 position: relative;
 padding-bottom:30px;
}

header.bakimg h3{
 width: 100%;
 text-align: center;
 bottom: 20%;
 position: absolute;
}

@media only screen and (max-width:768px){
 header.bakimg{padding-bottom:0;}
 header.bakimg h3{bottom:5%;}
}
@media only screen and (max-width:480px){
 header.bakimg{padding-bottom:0;}
 header.bakimg h3{bottom:-5px;}
}



/* ------------ wrapper&contents ------------ */
#wrapper {
 width:768px;
 margin:0 auto;
 text-align:left;
 background: var(--color-bg-wrapper);
 border-radius:10px;
}

#contents{width:700px;margin:0 auto;}

@media only screen and (max-width:768px){
 #wrapper, #contents {width:100%;border-radius:0px;}
}



/* ------------ spase01 ------------ */
div.spase01 {height:20px;width:1px;}



/* ------------ h ------------ */
h3.index{font-size:18px;font-weight:Bold;padding:0.5em 0.75em;background-color: #f6f6f6;}



/* ------------ br ------------ */
/* iizk レスポンシブ時改行 */
.display--sp{
 display: none;
}

@media only screen and (max-width:768px){
.display--sp {
 display: inline;
 }
}

/* iizk レスポンシブ時改行無効 */
.br-resp-none{
 display: inline;
}
@media (max-width: 768px) {
  .br-resp-none {
    display: none;
  }
}

/* ------------ mark------------ */
/* 注意 */
mark.ctn {font-size:10px;font-weight:normal;color: var(--color-mark-text);margin-right:6px;padding:0 3px;background: var(--color-mark-ctn);}
/* 必須 */
mark.req {font-size:10px;font-weight:normal;color: var(--color-mark-text);margin-right:6px;padding:0 3px;background: var(--color-mark-req);}
/* 任意 */
mark.opt {font-size:10px;font-weight:normal;color: var(--color-mark-text);margin-right:6px;padding:0 3px;background: var(--color-mark-opt);}



/* ------------ Section ------------ */
section {width:100%;margin:0 auto;margin-left:-0px;}

@media only screen and (max-width:768px){
 section {width:90%;margin:0 auto;}
}



/* ------------ Section P------------ */
section p{
 text-align: center;
 padding:30px 0 10px;
 line-height:1.6em;
}

/* iizk pレスポンシブ時左寄せ */
@media only screen and (max-width:768px){
 section p {text-align: left; padding-left:10px;}
}

/* iizk p左揃え */
.p-left{
text-align:left;
padding-left: 10px;
}

/* iizk p注釈強調 */
.p-note-red{
color: var(--color-text-emphasis);
}



/* ------------ Section Tabale items------------ */
/* urkw cmnt ﾌｫｰﾑ項目 */
section table.items {
 width: 95%;
}

/* urkw cmnt ﾌｫｰﾑ項目見出し */
section table.items th {
 background: var(--color-bg-table-th);
 font-weight:bold;
 text-align: left;
 width: 25%;
 vertical-align:top;
}

section table.items td {line-height:1.6em;}

section table.items th, 
section table.items td {
 padding: 10px;
 border-bottom: 1px solid var(--color-table-border);
 overflow-wrap: anywhere;
}

/* urkw cmnt ﾌｫｰﾑ項目見出し PC */
@media only screen and (min-width:769px){
 section table.items th {vertical-align:top;}
}
/* urkw cmnt ﾌｫｰﾑ項目見出し ｽﾏﾎ */
@media only screen and (max-width:768px){
 section table.items th {background: var(--color-bg-table-th);}
}

@media only screen and (max-width:768px){
 section table.items th, section table.items td {border-bottom:0px solid var(--color-table-border);}
 section table.items td {min-height: 20.5px;}
}

table.items tr:first-child th {border-top:1px solid var(--color-table-border);}
@media only screen and (max-width:768px){
 section table.items th, section table.items td{width:100%;display: block;border-top: none;}
}

/* iizk th注釈 */
section table.items th .sub-text {
  display: block;
  padding-left: 2em;
  font-weight: normal;
}

@media only screen and (max-width:768px){
 section table.items th .sub-text{
   display: inline-block;
   padding-left: 0;
 }
}

/* リスト */
section table.items td li {list-style-type: none;}

/* 注意書き */
section table.items td div.note {font-size:0.85em;padding:5px;color: var(--color-text-tdnote);}

/* 注意書き太字 */
section table.items td div.bold {color: var(--color-text-main);font-weight:Bold;}



/* ------------ Section Tabale mess------------ */
/* urkw cmnt ﾒｯｾｰｼﾞ */
section table.mess {width:100%;}
section table.mess td {padding:10px;}
@media only screen and (max-width:700px){
 section table.mess td {width:100%;display: block;}
}
section table.mess td span {color: var(--color-text-emphasis);font-size:0.9em;}



/* ------------ label inp------------ */
@media only screen and (max-width:768px){
 label.inp {display:block;}
 label.inp input{width:95%;}
}



/* ------------ input/select------------ */
input.ds-input {color: var(--color-text-main);}
input.ds-input::-webkit-input-placeholder {color: var(--color-text-placeholder);}
input.ds-input:-ms-input-placeholder {color: var(--color-text-placeholder);}
input.ds-input::-moz-placeholder {color: var(--color-text-placeholder);}

.ds-input {
ime-mode: disabled;
 border:0;
 padding:7px;
 font-size:1.0em;
 border: 1px solid var(--color-input-border);
 border-radius: 3px;
 font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}

section table.items td select.len_z02 {width:71px;}
section table.items td select.len_z03 {width:84px;}
section table.items td select.len_z04 {width:97px;}
section table.items td select.len_z05 {width:110px;}
section table.items td select.len_z06 {width:124px;}
section table.items td select.len_z07 {width:138px;}
section table.items td select.len_z08 {width:151px;}
section table.items td select.len_z09 {width:164px;}

/* iizk select */
select {
  border: 1px solid var(--color-input-border);
  border-radius: 3px;
  cursor: pointer;
}

input.ipt_name {width:150px;}

.w95{width:95%;}

.w100px {width: 100px;}
.w87px {width: 87px;}
.w58px {width: 58px;}
.w65px {width: 65px;}
.w76px {width: 76px;}

textarea.ds-input {color: var(--color-text-main);font-size:1.1em;}



/* ------------ Focus ------------ */
section table.items td .ds-input:focus,
section table.items td select:focus{
  outline: none;
  border: 2px solid var(--color-input-focus);
  box-shadow: 0 0 6px rgba(59, 130, 178, 0.4);
}


/* ------------ Error------------ */
.error-mess {
  color: var(--color-text-error);
  font-weight: bold;
  padding-left: 10px;
  margin-bottom: 5px;
  text-align: left;
  display: none;
}

.error-message  {
  color: var(--color-text-error);
  margin: 0;
}

input.error, select.error {
  background-color: var(--color-bg-error);
}



/* ------------ table conveni ------------ */
section table.conveni{
 width: 90%;
 border-collapse: collapse;
 margin: 0 auto;
 table-layout: fixed;
 padding-bottom: 30px;
 display: block;
}

section table.conveni th{
 background: var(--color-bg-table-th);
 font-weight: bold;
 text-align: left;
}

section table.conveni td {
 line-height: 1.6em;
}

section table.conveni th,
 section table.conveni td {
 padding: 10px;
 border: 1px solid var(--color-table-bordered);
 white-space: nowrap;
}

/* レスポンシブ時（幅768px以下など） */
@media only screen and (max-width: 768px) {
  section table.conveni {
    table-layout: auto;
    width: 100%;
  }

  section table.conveni th,
  section table.conveni td {
    white-space: normal;
  }
}



/* ------------ table-bordered ------------ */
section table.table-bordered {
 width: 95%;
 border-collapse: collapse;
 margin: 0 auto;
 padding-bottom: 30px;
 display: block;
}

section table.table-bordered th {
 background: var(--color-bg-table-th);
 font-weight:bold;
 text-align:left;
 width: 25%;
 vertical-align:top;
 }

section table.table-bordered td {line-height:1.6em;}

section table.table-bordered th,
section table.table-bordered td {
 padding:10px;
 border:1px solid var(--color-table-bordered);
}

@media only screen and (min-width:769px){
 section table.table-bordered th {vertical-align:top;}
}

@media only screen and (max-width:768px){
 section table.table-bordered th {
  background: var(--color-bg-table-th);
 }
}

table.table-bordered tr:first-child th {
 border-top:1px solid var(--color-table-bordered);
}
@media only screen and (max-width:768px){
 section table.table-bordered {
 margin: 0;
 }
 section table.table-bordered th,
 section table.table-bordered td{
 width: 100%;
 display: block;
 border-top: none;
 }
}



/* ------------ Button style------------ */
.ds-submit {
 border:solid 1px var(--color-border-default);
 background-color: var(--color-bg-default);
 padding:10px 0px;
 width: 200px;
 text-align: center;
 font-size:1.2em;
 font-weight:bold;
 color: var(--color-text-default);
 cursor:pointer;
 border-radius:5px;
 display: inline-block;
}

.ds-submit:hover {
  background-color: var(--color-bg-hover-default);
  border-color: var(--color-border-hover-default);
}

/* レイアウト表示用にグレーアウト? */
.lightgray {color:#999;}

/* iizk ボタン(現在は住所検索で使用) */
button {
  background-color: var(--color-bg-btn);
  color: var(--color-text-btn);
  font-size: 1em;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: background-color 0.3s, transform 0.2s;
  align-items: center;
  justify-content: center;
  margin: 0;
}

/* hover時 */
button:hover {
  background-color: var(--color-bg-hover-btn);
}



/* ------------Link Buttons ------------ */
/*ボタン*/
a.btn01,a.btn02,a.btn03{
text-align:center;
vertical-align:middle;
padding:40px 0;
font-size:18px;
font-weight:bold;
text-decoration:none;
border-radius:6px;
box-shadow:inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.2);
display:inline-block;
}
a.btn01:active,a.btn02:active,a.btn03:active{box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);}

a.btn01:hover,a.btn02:hover,a.btn03:hover{opacity:0.5;}

a.btn01{width:450px;}
a.btn02{width:339px;}
a.btn03{width:223px;}
@media only screen and (max-width:768px){
 a.btn01,a.btn02,a.btn03{width:100%;}
}

/*ボタン色*/
a.cl01{color: #fff;background:#3597f2;border-bottom: solid 2px #1d78cd;}/*青*/
a.cl01:active{border-bottom: solid 2px #3597f2;}
a.cl02{color: #fff;background:#e78932;border-bottom: solid 2px #c9701f;}/*オレンジ*/
a.cl02:active{border-bottom: solid 2px #e78932;}
a.cl03{color: #fff;background:#45d460;border-bottom: solid 2px #3fa852;}/*緑*/
a.cl03:active{border-bottom: solid 2px #45d460;}
    
/* ------------ Conveni button------------ */
/*↓ iizk コンビニ選択*/
.conveni {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.conveni .btn-conveni {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background-color: var(--color-bg-default);
  border: 2px solid var(--color-border-default);
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-text-default);
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}

.conveni .btn-conveni:hover {
  background-color: var(--color-bg-hover-default);
  border-color: var(--color-border-hover-default);
}

@media only screen and (max-width: 768px) {
  .conveni {
    flex-direction: column;
    align-items: flex-end; 
  }
  .conveni .btn-conveni {
    width: auto;
    max-width: 150px;
    margin-top: 2px;
  }
}



/* ------------ Radiobutton as Button------------ */
/* 通常ボタン */
.rad_button {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-border-radbtn);
  border-radius: 8px;
  background-color: var(--color-bg-radbtn);
  font-weight: bold;
  font-size: 16px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0,0,0,0.2);
  transition: 0.3s;
  cursor: pointer;
  overflow: hidden;
  color: var(--color-text-radbtn);
  width: auto; /* ←ここが重要 */
  min-width: 200px;
}

/* ラジオボタンを非表示にする */
.rad_button input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* テキスト */
.rad_button .btn_text {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; /* ←長文対応 */
  padding: 16px 0;
  text-align: center;
  line-height: 1.4;
}

/* left-text用 */
.left-text .btn_text {
  justify-content: flex-start;
  text-align: left;
  padding-left: 60px;
}

/* .card部分を少し小さく */
.btn_text .card {
  font-size: 0.85em;
  display: block;
  margin-top: 4px;
}

/* トグル：ベース */
.rad_button .btn_text::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background-color: #ccc;
  transition: background-color 0.25s ease;
}

/* トグル：つまみ */
.rad_button .btn_text::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 2px rgba(0,0,0,0.3);
  transition: left 0.25s ease;
}

/* hover時 */
.rad_button:hover {
  background-color: var(--color-hover-radbtn);
}

/* 選択時：背景と文字色変更 */
.rad_button input[type="radio"]:checked + .btn_text {
  background-color: var(--color-bg-chk-radbtn);
  color: var(--color-text-chk-radbtn);
}

/* 選択時：トグルON */
.rad_button input[type="radio"]:checked + .btn_text::before {
  background-color: #b0dcfa;
}

.rad_button input[type="radio"]:checked + .btn_text::after {
  left: 35px;
}

/* 横並び */
.radio-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.radio-horizontal .rad_button {
  flex: 1 1 200px;
  max-width: 250px;
  width: auto;
}

/* 縦並び */
.radio-vertical {
  display: grid;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.radio-vertical .rad_button {
  flex: 0 1 auto;
  width: 100%;
  height: auto;
}



/* ------------ Form button------------ */
/*iizk 次へ・戻るボタン配置*/
/*デフォルトは横並び */
.form-buttons {
  padding: 20px 0 40px 0;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 10px;
}

/*レスポンシブで縦並びにして順番を入れ替え */
@media only screen and (max-width: 768px) {
  .form-buttons {
    flex-direction: column; 
    align-items: center;
  }
  
  /* 次へを上に、戻るを下に */
  .form-buttons .ds-submit[name="submit"] {
    order: 1;
    /*padding指定でボタンサイズ変更*/
  }
  .form-buttons .ds-submit[name="prev"] {
    order: 2;
  }
}



/* ------------ Container ------------ */
/*iizk受験申請フォームボタン*/
.btn-container {
  text-align: center;
  margin: 20px 0 40px 0;
}

/*iizkコンテナ(決済方法選択で使用)*/
.container {
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
}



/* ------------ ul ------------ */
ul {padding-inline-start: 50px;}

@media only screen and (max-width: 768px) {
  ul {padding-inline-start: 10px}
}


ul.list{padding-left:50px;}
ul.list li{font-weight:Bold;padding-bottom:7px;}





/* ------------ Table step ------------ */
table.table_stp{width:100%;font-size:1.6em;margin-bottom:20px;}
table.table_stp span{font-size:0.6em;}
table.table_stp th{background-color: var(--color-bg-step-th);text-align:center;vertical-align: middle;padding:15px;color: var(--color-text-step-th);}
table.table_stp td{background-color: var(--color-bg-step-td);text-align:left;vertical-align: middle;padding:15px;color:var(--color-text-main);}
table.table_stp td.wht{background-color: var(--color-bg-step-wht);text-align:center;padding:15px;color: var(--color-bg-step-th);}
@media only screen and (max-width:480px){
 table.table_stp td{font-size:0.8em;}
}

/* iizk STEPの注釈 */
.step-note {
 font-size: 0.9em;
 display: block;
 padding-left:2em;
 text-indent:-1em;
}



/* ------------ Footerlink ------------ */
div.footerlink{width:100%;margin-top:50px;padding-bottom:20px;text-align:center;}
div.footerlink a{font-size:10px;padding:0 20px;text-decoration:none;color: var(--color-text-footerlink);}
div.footerlink a:hover{opacity:0.5;}

@media only screen and (max-width:480px){
 div.footerlink a{font-size:10px;display:block;padding:7px 0;}
}



label.rad, label.chk {width:100px;height:25px;display:block;float:left;align-items: center;}
label.rad, label.chk {height:25px;display:block;}
@media only screen and (max-width:700px){
 label.rad, label.chk {height:40px;padding-top:5px;}
}

/* urkw Add ﾗｼﾞｵﾎﾞﾀﾝ、ﾁｪｯｸﾎﾞｯｸｽ縦並び */
label.rad_vertical, label.chk_vertical {height:25px;display:block;gap: 1ch;}
@media only screen and (max-width:700px){
 label.rad_vertical, label.chk_vertical {height:35px;padding-top:5px;}
}

/* urkwﾒﾓ)ﾗｼﾞｵﾎﾞﾀﾝ,ﾁｪｯｸﾎﾞｯｸｽ */
.ds-rad,.ds-chk {transform:scale(1.2);}
select,select option {width:95%;height:38px;padding: 7px 0 10px 10px;}