@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Zen+Old+Mincho:wght@400;700&display=swap');
* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	list-style-type: none;
	word-break: break-all;
}

html,body{
	width: 100%;
	height: 100%;
}

/* common
---------------------------------------------*/
* {margin:0;padding:0;}

a:link,a:visited {
	color: #fff;
	text-decoration:underline;
}
a:hover,a:active {
	color: #fff;
	text-decoration:underline;
}

body {
	position: relative;
	font-family: 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif;
	-webkit-text-size-adjust: 100%;

	font-weight: normal;
	font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	letter-spacing: 0.05em;
	font-size: 3.7vw;
	line-height: 6.8vw;
	color: #272727;
	
	background: #fff;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	animation: fadeIn 2s ease 0s;
}

/* 初期状態ではスマホ用ヘッダーを非表示 */
.header-pc {
    display: none;
}

.header-sp {
    display: block;
    width: 100%; /* 画面幅いっぱいにする場合 */
}

 /* 表示領域が1001px以上の場合に適用するスタイル（パソコン向け） */
@media screen and (min-width: 780px) {
.pc{
	display: block;
}
.sp{
	display: none;
}
	
}

/* 画面幅が780px以上ならPC用を表示、スマホ用を非表示 */
@media screen and (min-width: 780px) {
    .header-pc {
        display: block;
        width: 100%; /* 画面幅いっぱいにする場合 */
    }

    .header-sp {
        display: none;
    }
	
	body {
	font-size: 20px;
	line-height: 36px;

}
}


ul,
ol {
  padding: 0;
  margin: 0;
}
li {
  list-style-type: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

a,
a img {
	color: #163c52;
  text-decoration: none;
}
img{
	display:block;
	width: 100%;
	height: auto;
}

.float-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.float-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.float-right {
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.8s ease-out;
}

.float-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.float-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.8s ease-out;
}

.float-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}


.pc{
	display: block;
}
.sp{
	display: none;
}
	
	
}
.yellow{
	color: #fffc50!important;
}
.red{
	color: #ea2218!important;
}


.container {
    width: 100%;
    max-width: 1010px; /* PCで最大1010pxに */
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background-size: cover;
}

.container2 {
    width: 100%;
    max-width: 2000px; 
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background-size: cover;
}

@media screen and (max-width: 780px) {
    .container2 {
        max-width: 1010px; /* PCで最大1010pxに */
    }

}

.delta{
	width: 10%;
	margin: 0% auto 0;
}


/* ヘッダー全体 */
.bg_top{
  width: 100%;
  background: url("../images/top_bar.png") center/cover no-repeat;
  position: relative;
  z-index: 9999;
  min-height: 84px;
  padding: 0;
　overflow: visible;
}

/* ヘッダー専用の中身ラッパー */
.topbar-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;

  min-height: 84px;
  display: flex;
  align-items: center;              /* ←縦中央 */
  justify-content: space-between;
  gap: 16px;

  overflow: visible;                /* ←containerのhiddenの影響を遮断 */
}

/* ロゴ */
.toplogo{
  height: 34px;
  width: auto;
  display: block;
}

/* ボタン */
.bg_top a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

.btn_top{
  height: 44px;
  width: auto;
  display: block;
  position: relative;
  z-index: 1;
}


.btn_top:hover{
		opacity: 0.7;
		transition: 0.5s;
	}

/* フローティング時 */
.bg_top.is-fixed{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

/* モバイル */
@media (max-width: 768px){
  .bg_top{ min-height: 70px; }
  .topbar-inner{
    min-height: 70px;
    padding: 0 12px;
  }
 .toplogo{ height: 28px; }
  .btn_top{ height: 38px; }
}

@media (max-width: 768px){
  .bg_top{ min-height: 70px; }

}


.wrap_black {
	width: 100%;
	margin:0% auto 0;
	background-color: rgba(0, 0, 0, 0.32);
	background-repeat: repeat-y;
	background-position:center top;
	padding-top:30px;
	padding-bottom:30px;
}

.box_form {
    width: 95%;
    margin: 0% auto 0;
    background-color: rgba(12, 12, 30, 0.49); 
    background-repeat: repeat-y;
    background-position: center top;
    border: 2px solid #f8f2b7; 
    border-radius: 10px; 
	margin-bottom:30px;
}

.box_merit {
    width: 95%;
    margin: 5% auto 0;
    background-color: #f8f8f8; 
    background-repeat: repeat-y;
    background-position: center top;
    padding:30px;
    border-radius: 10px;
	margin-bottom:0px;
}


 .wrap_form {
    width: 100%;
    margin: -5% auto 0;
    background: url("../images/form.jpg") no-repeat top center;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 5%;
    padding-bottom: 70%; /* 画像の縦横比を維持 */
}

/* 上部画像 */
.ft {
    width: 90%;
    margin: 0 auto;
    display: block;
}



.form-note {
    text-align: center;
    font-size: clamp(20px, 2.5vw, 25px); 
    color: #00f9ff;
    margin: 20px 0;
}
.confirm-box {
    margin-top: 30px;
    color: white;
    font-size: 20px; 
	margin-bottom:30px;
}

.confirm-title {
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.confirm-list {
    list-style: none;
    padding: 0 20px;
    margin: 0;
}

.confirm-list li {
    margin-bottom: 4px; 
    line-height: 1.3;  
    text-align: left;
}

.confirm-list .warning {
    color: #ff4071;
    font-weight: bold;
}

@media screen and (max-width: 780px) {
    .form-note {
        font-size: clamp(16px, 4vw, 20px); 
    }

    .confirm-box {
        font-size: 10px; 
        margin-bottom: 20px;
    }

    .confirm-list li {
        margin-bottom: 3px;
        line-height: 1.2; 
    }
}






#wrap {
	width: 100%;
	margin:0% auto 0;
	padding-top:30px;
	background-color: white;
	background-repeat: repeat-y;
	background-position:center top;
}

#wrap2 {
	width: 100%;
	margin:0% auto 0;
	padding-top:20px;
	background-color: white;
	background-repeat: repeat-y;
	background-position:center top;
}

#wrap_re {
	width: 95%;
	margin: -3% auto 0;
	background-color: white;
	background-repeat: repeat-y;
	background-position:center top;
	border-radius:10px;
	border: 3px solid #005fa8;
	padding-bottom:15px;
	margin-bottom:40px;
}

#wrap_re2 {
	width: 95%;
	margin:5% auto 0;
	background-color: white;
	background-repeat: repeat-y;
	background-position:center top;
	border-radius:10px;
	border: 3px solid #005fa8;
}

#wrap_q {
	width: 90%;
	margin:4%  auto 0% auto;
	background-color: #be0c15;
	background-repeat: repeat-y;
	background-position:center top;
	border-radius:10px;

}
#wrap_a {
	width: 90%;
	margin:1%  auto 0% auto;
	background-color: white;
	background-repeat: repeat-y;
	background-position:center top;
	border-radius:0px 0px 10px 10px;
}


.bg_head {
    background-image: url("../images/bg_head.jpg");
    padding-bottom: 0px;
    padding-top: 0px;
    background-position: center top;
    background-repeat: repeat;
    background-attachment: fixed;
}

/* スマホ（768px以下）だけ画像を切り替える */
@media screen and (max-width: 768px) {
    .bg_head {
        background-image: url("../images/bg_head.jpg");
        background-attachment: scroll;
    }
}


.bg_shikumi {
    background-image: url("../images/bg_shikumi.jpg");
    padding-bottom: 50px;
    padding-top: 0px;
    background-position: center top;
    background-repeat: repeat;
    background-attachment: fixed;
}

/* スマホ（768px以下）だけ画像を切り替える */
@media screen and (max-width: 768px) {
    .bg_shikumi {
        background-image: url("../images/bg_shikumi.jpg");
        background-attachment: scroll;
    }
}

.bg_glay {
    background-color: #d3d5dd;
    background-attachment: scroll;
	padding-bottom:0px;
}

.bg_glay2 {
    background-color: #eff0f5;
    background-attachment: scroll;
	padding-bottom:60px;
}

.bg_blue{
  background-image: url("../images/bg_blue.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;   /* 画面にフィット */
  padding: 40px 0;          /* 背景が見える余白 */
}


/* スマホ（768px以下）だけ画像を切り替える */
@media screen and (max-width: 768px) {
    .bg_blue {
		
        background-image: url("../images/bg_blue.jpg");
        background-attachment: scroll;
    }
}




.bg_point {
    background-image: url("../images/bg_point.jpg");
   background-attachment: scroll;
}

/* スマホ（768px以下）だけ画像を切り替える */
@media screen and (max-width: 768px) {
    .bg_point {
		
        background-image: url("../images/bg_point.jpg");
        background-attachment: scroll;
    }
}

.bg_ichiran {
    background-image: url("../images/bg_ichiran.jpg");
   background-attachment: scroll;
	padding-bottom:60px;
}

/* スマホ（768px以下）だけ画像を切り替える */
@media screen and (max-width: 768px) {
    .bg_ichiran {
		
        background-image: url("../images/bg_kaitori_sp.jpg");
        background-attachment: scroll;
    }
}



.bg_about {
    background-image: url("../images/bg_about.jpg");
   background-attachment: scroll;
}

.bg_buy {
    background-image: url("../images/bg_buy.jpg");
   background-attachment: scroll;
	padding-bottom:40px;
}


/* スマホ（768px以下）だけ画像を切り替える */
@media screen and (max-width: 768px) {
    .bg_buy { background-color:#f5f5f5;
		      padding-bottom:40px;
    }
}

.bg_evi {
    background-image: url("../images/bg_evi.jpg");
    background-attachment: scroll;
    padding-bottom: 40px;
    background-size: cover;
    background-position: center;
}

/* スマホ（768px以下）のときに別画像を指定 */
@media screen and (max-width: 768px) {
    .bg_evi {
        background-image: url("../images/bg_evi_sp.jpg");
        padding-bottom: 40px;
    }
}

.bg_ad {
    background-image: url("../images/bg_ad.jpg");
    background-attachment: scroll;
    background-size: cover;
    background-position: center;
}

/* スマホ（768px以下）のときに別画像を指定 */
@media screen and (max-width: 768px) {
    .bg_ad {
        background-image: url("../images/bg_ad_sp.jpg");  /* ← ここが大事！ */
        background-color: #edf4f2;
        padding-bottom: 0px;
    }
}

.bg_use {
    background-image: url("../images/bg_use.jpg");
    background-attachment: scroll;
    background-size: cover;
    background-position: center;
    padding-bottom: 40px;
}

/* スマホ（768px以下）のときに .bg_use に対して別画像を指定 */
@media screen and (max-width: 768px) {
    .bg_use {
        background-image: url("../images/bg_use_sp.jpg"); 
        background-color: white;
        padding-bottom: 40px;
    }
}

.bg_voice {
    background-image: url("../images/bg_voice.jpg");
    background-attachment: scroll;
    background-size: cover;
    background-position: center;
    padding-bottom: 40px;
}

/* スマホ（768px以下）のときに .bg_use に対して別画像を指定 */
@media screen and (max-width: 768px) {
    .bg_voice {
        background-image: url("../images/bg_voice_sp.jpg"); 
        background-color: white;
        padding-bottom: 40px;
    }
}

.bg_qa {
    background-image: url("../images/bg_qa.jpg");
    background-attachment: scroll;
    background-size: cover;
    background-position: center;
    padding-bottom: 20px;
}

/* スマホ（768px以下）のときに .bg_use に対して別画像を指定 */
@media screen and (max-width: 768px) {
    .bg_qa {
        background-image: url("../images/bg_qa.jpg"); 
        background-color: #f5f5f5;
        padding-bottom: 40px;
    }
}



.bg_white{
background-color:white;
padding-bottom:0px;
padding-top: 20px;}


.bg_white2{
background-color:white;
padding-bottom:50px;
padding-top: 20px;}



/* 画面サイズによって表示を切り替える */
.pc-only {
    display: block;
}

.sp-only {
    display: none;bg
}

/* スマホサイズ（768px以下）の場合 */
@media screen and (max-width: 780px) {
    .pc-only {
        display: none;
    }

    .sp-only {
        display: block;
    }
}


.nayami {
    width: 100%;
    margin: 6% auto 0;
}

.nayami2 {
    width: 100%;
    margin: 0% auto 0;
}




/* スマホ（768px以下） */
@media screen and (max-width: 768px) {
   .nayami{
	width: 90%;
	margin: 5% auto 0
}
	}

.point_top {
    width: 60%;
    margin: 10% auto 5%;
}

.point {
    width: 100%;
    margin: 2% auto 0;
}

/* スマホ（768px以下） */
@media screen and (max-width: 768px) {
	.point_top {
    width: 80%;
    margin: 10% auto 0;
}
	
   .point {
	width: 90%;
	margin:6% auto 0
}
	}

.kaiketsu {
    width: 90%;
    margin: 0% auto 0;
}

/* スマホ（768px以下）だけ画像を切り替える */
@media screen and (max-width: 768px) {
    .kaiketsu {
		
    width: 70%;
    margin: 0% auto 0;
    }
}


.step {
    width: 100%;
    margin: 5% auto 0;
}

.step_sp {
    width: 60%;
    margin: 5% auto 0;
}

.kaitori_top {
    width: 100%;
    margin: 5% auto 0;
}


.kaitori {
    width: 98%;
    margin: 10% auto 0;
}

/* スマホ（768px以下）だけ画像を切り替える */
@media screen and (max-width: 768px) {
    .kaitori_top {
		
    width: 40%;
    margin: 10% auto 0;
    }
}


.q_top {
    width: 25%;
    margin: 10% auto 0;
}


.q {
    width: 100%;
    margin: 3% auto 0;
}

/* スマホ（768px以下）だけ画像を切り替える */
@media screen and (max-width: 768px) {
.q_top {
    width: 40%;
    margin: 10% auto 6%;
}


.q {
    width: 100%;
    margin: 3% auto 0;
}

}


.recomend {
    width: 60%;
    margin: 5% auto 0;
}

/* スマホ（768px以下） */
@media screen and (max-width: 768px) {
.recomend {
    width: 90%;
    margin: 5% auto 0;
	}
	}

/* スマホ（768px以下） */
@media screen and (max-width: 768px) {
   .step{
	width: 90%;
	margin: 10% auto 0
}
	}



.shikumi_top {
    width: 70%;
    margin: 5% auto 0;
}


.shikumi {
    width: 100%;
    margin: 5% auto 0;
}


/* スマホ（768px以下） */
@media screen and (max-width: 768px) {
   .shikumi_top{
	margin: 10% auto 5%;
	width: 90%;
}
	
	
.shikumi {
    width: 90%;
    margin: 5% auto 0;
}
	}

.step {
    width: 100%;
    margin: 5% auto 0;
}

.step_u {
    width: 70%;
    margin: 5% auto 0;
}

.about {
    width: 100%;
    margin: 5% auto 0;
}


/* スマホ（768px以下） */
@media screen and (max-width: 768px) {
	
	.step_u {
    width: 80%;
    margin: 10% auto 0;
}
	
   .about{
	width: 96%;
	margin: 5% auto 0
}
	
	}

.uv_top {
    width: 20%;
    margin: 5% auto 0;
}

.uv {
    width: 70%;
    margin: 5% auto 0;
}

/* スマホ（768px以下） */
@media screen and (max-width: 768px) {
.uv_top {
    width: 30%;
    margin: 5% auto 0;
}

.uv {
    width: 90%;
    margin: 5% auto 0;
}
	}


.use {
    width: 80%;
    margin: 5% auto 0;
}


/* スマホ（768px以下） */
@media screen and (max-width: 768px) {
   .use{
	width: 80%;
	margin: 5% auto 0
}
	}

.qa {
    width: 80%;
    margin: 5% auto 0;
}


/* スマホ（768px以下） */
@media screen and (max-width: 768px) {
   .qa{
	width: 90%;
	margin: 5% auto 0
}
	}

.sub {
    width: 40%;
    margin: 5% auto 0;
}

.ad_right {
    width: 80%;
    margin: 5% 0 0 auto;  
}

.ad_left {
    width: 80%;
    margin: 5% auto 0 0;
}

.ad {
    width: 80%;
    margin: 5% auto 0;
}
/* =========================
   form top image
========================= */
.form_top {
  width: 25%;
  margin: 2% auto 40px;
}
	


.form-table{
  width: 75%;
  max-width: 700px;     /* PCで広がりすぎ防止（任意） */
  margin: 0 auto;
  background: #fff;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 0 8px rgba(0,0,0,0.05);
}


.form-row{
  display: grid;
  grid-template-columns: 260px minmax(320px, 1fr);
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-bottom: 22px;
}

/* 左側（必須ピル＋項目名） */
.form-label{
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 16px;
  color: #222;
}

/* 必須ピル */
.required{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 30px;
  border-radius: 999px;
  background: #215cbb;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

/* 項目名 + small */
.label-text{
  display: inline-block;
}
.label-text small{
  display: block;
  font-size: 12px;
  color: #666;
  margin-top: 4px;
  font-weight: 500;
}

/* 右側の入力領域 */
.form-field{
  width: 100%;
}

/* =========================
   入力欄の統一（枠＆フォーカス）
========================= */
.form-field input,
.form-field select{
  width: 100%;                 /* ←75%は使わない */
  height: 44px;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #d6d6d6;
  border-radius: 2px;
  background: #fff;
  outline: none;
  box-sizing: border-box;
}

.form-field input:focus,
.form-field select:focus{
  border-color: #9db7e7;
  box-shadow: 0 0 0 3px rgba(33,92,187,0.12);
}

/* selectの見た目（インライン指定を潰したい場合） */
.form-field select{
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff !important;
  border: 1px solid #d6d6d6 !important;
  border-radius: 2px !important;
  color: #000 !important;
  padding: 10px 40px 10px 12px !important;

  background-image:
    linear-gradient(45deg, transparent 50%, #9a9a9a 50%),
    linear-gradient(135deg, #9a9a9a 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 18px,
    calc(100% - 12px) 18px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* =========================
   ラジオ（買取方法/買取商品/給料日休日）
========================= */
.form-field.radios{
  display: grid;
  grid-auto-rows: 44px;   /* 1行の高さを固定して揃える */
  align-items: center;
  column-gap: 28px;
  row-gap: 5px;
  min-height: 44px;
}

/* 2択（買取方法など）は2列 */
.form-field.radios:not(.radios-3){
  grid-template-columns: repeat(2, max-content);
}

/* 3択（買取商品）は2列で2段 */
.form-field.radios.radios-3{
  grid-template-columns: repeat(2, max-content);
}

/* ラジオ1項目：行高に合わせて中央揃え */
.form-field.radios .radio{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  color: #333;
  white-space: nowrap;
  line-height: 1;
  height: 30px;
}

/* ラジオ本体（完全に正円固定） */
.form-field.radios input[type="radio"]{
  appearance: none;
  -webkit-appearance: none;

  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;

  border: 2px solid #cfcfcf;
  border-radius: 50%;
  background: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  vertical-align: middle;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.form-field.radios input[type="radio"]::after{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #215cbb;
  transform: scale(0);
  transition: transform .12s ease;
}

.form-field.radios input[type="radio"]:checked{
  border-color: #215cbb;
}
.form-field.radios input[type="radio"]:checked::after{
  transform: scale(1);
}


/* =========================
   スマホ：縦積み（全幅）
========================= */
@media screen and (max-width: 768px){
  .form_top{
    width: 50%;
    margin: 10px auto 40px;
  }

  .form-table{
	width: 90%;
    padding: 22px 16px 26px;
  }

  .form-row{
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: 10px;
    margin-bottom: 16px;
  }

  .form-field.radios{
    gap: 12px 18px;
  }

  /* 3択（買取商品）はスマホで1列にする */
  .form-field.radios.radios-3{
    grid-template-columns: 1fr;
  }

  /* テキストの改行を許可（はみ出し防止） */
  .form-field.radios.radios-3 .radio{
    white-space: normal;
  }
	
  .form-field input[type="date"]{
    max-width: 90%;
    min-width: 0;
  }
}

/* =========================
   submit / checkbox（あなたの既存を維持）
========================= */
.form-submit {
  text-align: center;
  margin-top: -40px;
}

.submit-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(to right, #006a4e, #24b383);
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  padding: 18px 40px;
  border-radius: 40px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}

.submit-button:hover {
  transform: translateY(-2px);
}

.submit-button .icon { font-size: 26px; }
.submit-button .main-text { margin-left: 4px; }
.submit-button .strong-text { margin-left: 4px; font-weight: 900; font-size: 26px; }
.submit-button .arrow { margin-left: 8px; font-size: 20px; }

.submit-note {
  font-size: 13px;
  color: #333;
  margin-top: -40px;
  line-height: 1.6;
}

@media screen and (max-width: 768px) {
  .submit-note  { margin-top: 40px; }
}

.checkbox-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 40px;
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  font-weight: bold;
  font-size: 15px;
  gap: 12px;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  appearance: none;
  width: 23px;
  height: 23px;
  border: 2px solid #0060ff;
  border-radius: 6px;
  background-color: white;
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"]::before {
  content: "";
}

.checkbox-label input[type="checkbox"]:checked::before {
  content: "✔";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  font-size: 16px;
  color: #0060ff;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .checkbox-label { font-size: 13px; gap: 8px; }
  .checkbox-label input[type="checkbox"] { width: 24px; height: 24px; }
  .checkbox-label input[type="checkbox"]:checked::before { font-size: 12px; }
}

.error-message {
  color: red;
  text-align: center;
  font-size: 14px;
  margin-top: -40px;
}

@media screen and (max-width: 768px) {
  .error-message  { margin-top: -33px; }
}



.sub01{
	width: 85%;
	margin: 5% auto 0;
}

.sub01_sp{
	width: 75%;
	margin: 5% auto 0;
	}

.fl{
	width: 7%;
	margin: 1% auto 1%;
}

@media screen and (max-width: 768px) {
  .fl{
	width: 20%;
	margin: 1% auto 1%;
}
}


.footer {
  background-color: black;
  color: white;
  text-align: center;
  padding: 20px 20px;
}

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;      /* ← 折り返さないように */
  gap: 20px;               /* ← 3つの間の余白 */
  font-size: 16px;
  margin-bottom: 5px;
}

.footer-links a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  white-space: nowrap;     /* ← 長いテキストで改行しないように */
}

.footer-license {
  font-size: 14px;
  color: #ccc;
}

/* スマホ表示（768px以下）でも横並びにしたい場合 */
@media screen and (max-width: 768px) {
  .footer-links {
    flex-wrap: nowrap;       /* ← ここもwrapではなくnowrapに */
    justify-content: center;
    gap: 16px;
    font-size: 10px;
  }

  .footer-links a {
    width: auto;             /* ← 固定幅は不要 */
    font-size: 10px;
  }
}


/* ===== top bar 内のボタンだけ .btn の影響を無効化 ===== */
.bg_top img.btn,
.bg_top img.btn_top{
  width: auto !important;
  height: 38px !important;   /* スマホ時の狙い */
  max-width: none !important;
}

@media (min-width: 769px){
  .bg_top img.btn,
  .bg_top img.btn_top{
    height: 44px !important; /* PC時 */
  }
}

/* ロゴも念のため */
.bg_top .toplogo{
  width: auto !important;
  height: 28px !important;
}
@media (min-width: 769px){
  .bg_top .toplogo{ height: 34px !important; }
}