body{ margin-top:0px; 
padding-top:0px;
margin-bottom:0px; 
padding-bottom:0px;
background:#FFF;}

.wrap_s{
background: #FFF;
width:1000px;
margin:0px auto;
}

.test {
  font-feature-settings: "palt";
  font-family: Meiryo, メイリオ, Verdana, Arial, sans-serif;;

}

table.input_form {
	margin: 1em auto;
	border-collapse: collapse;
	border-spacing: 0px;
	font-size:90%;
	background-color: #999999;
}
table.input_form th {
	/*font-size: 85%;*/
	line-height: 120%;
	font-weight: normal;
	/*font-weight: bold;*/
	text-align: left;
	/*vertical-align: top;*/
	color: #333333;
	background-color: #fce9ef;
	/*background-color: #f1f1f1;*/
	width: 140px;
	border:1px solid #999;
}
table.input_form td {
	font-size: 85%;
	line-height: 120%;
	font-weight: normal;
	text-align: left;
	color: #666666;
	background-color: #FFFFFF;
	border:1px solid #999;
}

div.submit_form {
	margin: 0px;
	padding: 0px;
	text-align: left;
}
div.submit_form input {
	margin: 0px;
	padding: 8px;
	width: 80px;
	
	font-size: 16px;
	text-align: center;
	
	border: 1px solid #B0B0B0;
	color: #000000;
	background-color: #E0E0E0;
}

a:link, a:visited{
	color: #06C;
	}
a:hover{
	color: #CC0000;
	}
.hoge{
	width: 60px;
    height: 60px;
    border-radius: 35px;
    background-color: #47899E;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px; /* 任意：文字が2行になる余裕を持たせる */
    box-sizing: border-box;
    text-wrap: balance; /* オプション：読みやすい改行を促す */
	line-height: 1.1;
}
	
.hoge2{
	color: #004AAD;
	border-bottom: 2px solid #004AAD;
	font-weight: bold;
	font-size:30px;
	padding-bottom: 10px;
}

.box   { 
	-webkit-border-radius:10px;
	-moz-border-radius:10px; 
	border-radius:10px;
	background: #f3be3a;
	height: 40px;
	width: 70px;
	line-height: 40px;
	color: #FFF;
	text-align: center;
	font-weight: bold;
}

.td_detail{
	width:60%;
}

#span_year{
	font-size:20px;line-height:140%;
}
#span_month{
	font-size:40px;
}
#span_day{
	font-size:40px;
}
#span_time{
	font-size:20px;
}

#summary{
	border-radius: 6px;
	width:100%; 
	margin-bottom:1.5em;
	padding: 1px; 
	box-sizing: border-box;
	background: #FFF;
	font-size: 22px;
	line-height: 160%;
	color: #755f42;
	font-weight: bold;
	text-align: center;
}

.summary_catch{
	font-size: 30px;
	margin-bottom: 0px;
}

.explan{
	font-size: 16px;
	margin: 0px 0.5em;
}
.explan_title{
	margin-bottom: 0px;
	color: #004AAD;
	font-size: 20px; 
	font-weight: bold;
}
.explan_text{
	line-height: 160%;
	margin-top: 10px;
}

#summary_point{
	padding:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px; 
	border-radius:10px;
	width: 80%;
	box-sizing: border-box;
	border:1px solid #E3CF1C;
	margin: 0 auto;
	margin-bottom:1em;
}

#summary_point p{
	font-size:14px;
	line-height:140%;
	color:#E3CF1C;
	margin: 0px;
}

#summary_point span{
	font-weight:bold;
	font-size:16px;
}

#image_area_smart{
	display:none;
}

#orner_smart{
	display: none;
}

#sche_smart{
	display: none;
}

#entry_form textarea{
	width: 80%; 
	max-width: 450px;
	height: 80px;
	font-size:16px;
	padding: 10px;
}

#entry_form input{
	/*height:70px;*/
	font-size:16px;
	width: 98%;
	padding: 10px;
}
#entry_form input.pos{
	/*width: 20%;*/
	width: 180px;
}

#entry_form input[type="file"] {
	width: auto;
}

/* 都道府県セレクトボックスのスタイル調整 */
#entry_form select {
  font-size: 16px;      /* 他の入力欄とフォントサイズを合わせる */
  padding: 10px;        /* 内側の余白を合わせる */
  width: 100%;          /* 幅を100%に設定 */
  height: 42px;         /* 高さを他の入力欄と視覚的に合わせる */
  background-color: #fff; /* 背景色を白に指定 */
  border: 1px solid #999; /* 枠線を他の要素と合わせるイメージで設定 */
  box-sizing: border-box; /* paddingとborderを高さと幅に含める */
}

#entry_form input.age{
	width: 8%;
}
#entry_form input[type="radio"] {
	width: auto;
}

.fm_button input[type='submit']{
		border:none;
		cursor: pointer;
		border-radius: 9999px;
		background: #231815;
		color: #FFF;
		text-align: center;
		/*padding: 0.8em 3rem;*/
		line-height: 1.2em;
		width: 16em;
	}
	.fm_button input[type='submit']:hover{
		opacity: 0.8;
	}


	.fm_button input[type='button']{
		border:none;
		cursor: pointer;
		border-radius: 9999px;
		color: #fff;
		text-align: center;
		/*padding: 0.8em 3rem;*/
		line-height: 1.2em;
		width: 16em;
		height: 3em;
		margin-top: 1em;
	}
	.fm_button input[type='button']:hover{
		opacity: 0.8;
	}
	
.fm_button input[type='button']#reset{
		background: #efefef;
		color: #000;
	}
.fm_button input[type='button']#back{
		background: #efefef;
		color: #000;
		margin-right: 1em;
	}

	.fm_button input[type='button']#check{
		background: #231815;
		color: #FFF;
	}
	.fm_button input[type='button']#send{
		background:#231815;
		color: #FFF;
	}
	
	button:hover {
    opacity: 0.8;
	}

.input_form{
	font-size: 16px;
}
.check_form{
	font-size: 16px;
}
.result_form{
	font-size: 16px;
	margin-top:1em; 
	text-align:center;
	line-height:140%;
}

.left_s{
	float: left;
	width: 85%;
	border-collapse: separate;
  border-spacing: 10px;   
}
.right_s{
	width:36%;
	float: right;
	vertical-align: bottom;
	text-align: right;
}
.right_s img{
	width: 100%;
}

.main{
	border-radius: 6px;
	border: 4px solid #47899E;
	padding: 1.5em;
	box-sizing: border-box;
	margin: 1em 0px;
	background: #EDF5F7;
}

.sp_br {
  display: none;
}

.text_01{
	font-weight:bold;
	color: red;
	font-size: 22px;
}
.text_02{
	font-size: 14px;
}

.td_date{
	font-size:18px;
}

#title_imagezone{
	text-align: center;
	width: 100%;
	background:#FED704;
}
#title_imagezone img{
	width:40%;
	max-width: 400px;
	margin: 4em auto 5em auto;
}
#black_overlay {
  width: calc(100% - 4em); /* 左右2emずつの余白を引いた幅 */
  margin: 0 auto;
  box-sizing: border-box;
  background: #000;
  height: 40px;
  margin-top: -20px; /* 黄色と少し重なる */
  z-index: 0;
  position: relative;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.form_inner{
	background:#FED704;
	width: 100%;
	padding:4em 2em;
	box-sizing: border-box;
	border-radius: 20px;
}

.copy{
	width:100%; 
	margin-top: 2em;
	color: #FFF;
	text-align: center;
}


.stair {
  position: absolute;
  width: calc(100% / 6); /* 6段均等幅 */
  height: 10px;
  background-color: #000;
  border: 1px #000 solid;
}

#stair_overlay {
  width: 100%;
  height: 80px;
  position: relative;
  background: transparent;
  margin-top: -21px;
  overflow: visible;
}

#stair_overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  clip-path: polygon(
    100% 0,
    calc(100% / 6 * 5) 0,
    calc(100% / 6 * 5) 15px,
    calc(100% / 6 * 4) 15px,
    calc(100% / 6 * 4) 30px,
    calc(100% / 6 * 3) 30px,
    calc(100% / 6 * 3) 45px,
    calc(100% / 6 * 2) 45px,
    calc(100% / 6 * 2) 60px,
    calc(100% / 6 * 1) 60px,
    calc(100% / 6 * 1) 75px,
    0 75px,
    0 100%,
    100% 100%
  );

  z-index: 1;
}

.stair_bottom_mask {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #000;
  pointer-events: none;
  z-index: 2;
}

.stair_runner {
  position: absolute;
  width: 40px !important;
  height: auto !important;
  /*left: calc(100% / 6 * 2);*/
  left: calc((100% / 6 * 2) + (100% / 6 * 0.7));
  top: -64px; /* ← 画像の高さに応じて微調整 */
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}

#loading_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 半透明の黒 */
  display: none;
  z-index: 9999;
}

.loading_text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}



.fm_button input[type='button']#check:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* ボタンのコンテナ */
.user-controls {
  margin-top: 0.5em;
  display: flex;
  flex-direction: column; /* 縦に並べる */
  gap: 1em; /* ボタン間の隙間 */
  align-items: flex-start; /* ★追加: 子要素が横に伸びるのを防ぐ */
}

/* 各ボタンとテキストの行 */
.control-item {
  display: flex;
  align-items: center; /* ボタンとテキストを中央揃え */
  gap: 0.8em; /* ボタンとテキストの間の隙間 */
}


/* 円形ボタンの共通スタイル */
.btn-circle {
  display: inline-flex; /* 中の文字を中央揃えにするため */
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%; /* これで正円になります */
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s; /* ホバー時のアニメーション */
  box-sizing: border-box;
  line-height: 1;
}

.control-item span {
    font-weight: bold;
	cursor: pointer;
}

.control-item:hover span {
  opacity: 0.8; /* 少し薄くしてクリックできる感を出す */
  
}

/* 追加ボタン（＋）のスタイル */
.btn-add {
  border: 2px solid #004AAD; /* 枠線の色 */
  color: #004AAD; /* 文字の色 */
  background-color: #fff; /* 背景色 */
}
.control-item:hover .btn-add {
  background-color: #004AAD; /* ホバー時の背景色 */
  color: #fff; /* ホバー時の文字色 */
}


/* 削除ボタン（－）のスタイル */
.btn-remove {
  border: 2px solid #CC0000; /* 枠線の色 */
  color: #CC0000; /* 文字の色 */
  background-color: #fff; /* 背景色 */
}
.control-item:hover .btn-remove {
  background-color: #CC0000; /* ホバー時の背景色 */
  color: #fff; /* ホバー時の文字色 */
}

/* 全角入力フィールドのスタイル */
.zenkaku-input {
  ime-mode: active; /* 対応ブラウザでIMEを自動的にオンにする */
}

/* 半角入力フィールドのスタイル */
.hankaku-input {
  ime-mode: inactive; /* 対応ブラウザでIMEを自動的にオフにする */
}

.hide.del {
  display: block;
  font-weight: normal;
}
div[class^="use"] .hide.del,
#ad_1 + .hide.del,
#ad_2 + .hide.del,
#ad_3 + .hide.del,
#ad_4 + .hide.del {
  padding-left: 1.5em; /* 左側にインデントを追加 */
}

.pc_label{
	cursor: pointer;
}
.user_label{
	cursor: pointer;
}

.info1{
	font-weight: bold;
	border-bottom: 1px solid #000;
	font-size: 24px;
}

.file_note{
	box-sizing: border-box;
	border-radius: 20px;
	border: 1px solid #FFF;
	padding: 10px;
	font-size: 16px;
	font-weight: bold;
	line-height: 180%;
	/*margin-top: 10px;*/
	margin-bottom: 1em;
	width: 80%;
	max-width: 650px;
}
.file_note_title{
	color: red;
}

@media screen and (max-width: 480px){
body{
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック','MS P Gothic', sans-serif;
}

h2{
font-size:4VW; 
}

.wrap_s{
background: #FFF;
width:100%; 
margin:0px auto;
}

.hoge {
    font-size: 3vw;
    width: 40px;
    height: 40px;
    border-radius: 20px; /* width,heightの半分 */
    background-color: #47899E; /* 円の色 */
    color: #FFF;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2px; /* 文字が2行になる余裕を持たせる */
    box-sizing: border-box;
    line-height: normal; /* 固定値を解除 */
    word-break: break-word; /* 長い単語の折り返し対策 */
	line-height: 1.1;
}

.hoge2{
	font-size:5vw;
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック','MS P Gothic', sans-serif;
	color: #004AAD;
	font-weight: bold;
	border-bottom: 2px solid #004AAD;
	padding-bottom: 0px;

}

#entry_form{
	font-size:4vw;
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック','MS P Gothic', sans-serif;
}

#entry_form input{
	font-size:4vw;
	width: 92%;
}
#entry_form input.pos{
	width: 92%;
}

#entry_form select {
  font-size: 4vw;   /* スマホ用のフォントサイズに合わせる */
  width: 99%;     /* 他の入力欄と幅を合わせる */
  height: auto;     /* 高さは自動調整に */
  
  -webkit-appearance: none; /* Safari, Chromeなど */
    -moz-appearance: none;    /* Firefox */
    appearance: none;         /* 標準仕様 */
    
    background-color: #fff;  /* 背景色を白に強制指定 */
    border: 1px solid #999;  /* 枠線を強制指定 */
    border-radius: 0;        /* 角丸をなくす */
    color: #000;             /* 文字色を黒に強制指定 */
    padding: 10px;           /* 内側の余白をinputと合わせる */
}

#entry_form input.age{
	width: 20%;
}
#entry_form input[type='checkbox']{
	font-size:4vw;
}

#entry_form textarea{
	width: 100%; 
	height: 80px;
	font-size:4vw;
	padding: 10px;
	box-sizing: border-box;
}

#site_title{
	font-size:36px;
}

.td_date{
	font-size:4vw;
}

#span_year{
	font-size:4vw;
	font-weight: bold;
}
#span_month{
	font-size:4vw;
	font-weight: bold;
}
#span_day{
	font-size:4vw;
	font-weight: bold;
}
#span_time{
	font-size:4vw;
	font-weight: bold;
}

.td_detail{
	width:100%;
}

#summary{
	font-size:4vw;
	padding:1px 0.5em;
}

.fm_button input[type='button']{
	font-size:4vw;
	width: auto;
}

.fm_button input[type='button']#back{
		width: 45%;
	}
.fm_button input[type='button']#send{
		width: 45%;
	}

.summary_catch{
	font-size: 5vw;
}

.explan{
	font-size: 3.5vw; 
	margin: 0px 0.5em;
}
.explan_title{
	font-size: 4vw; 
}
.explan_text{
	line-height: 160%;
	margin-top: 10px;
}

#summary_point{
	padding:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px; 
	border-radius:10px;
	width: 100%;
	box-sizing: border-box;
	border:1px solid #E3CF1C;
	margin: 0 auto;
	margin-bottom:1em;
}

#summary_point p{
	font-size:4vw;
	line-height:140%;
	color:#E3CF1C;
	margin: 0px;
}

#summary_point span{
	font-weight:bold;
	font-size:4vw;
}

#summary_point ul{
	font-size:4vw;
}

#image_area_pc{
	display: none;
}

#image_area_smart{
	display: block;
}

#orner_pc{
	display: none;
}

#orner_smart{
	margin-top:1em;
	display: block;
	font-size:4vw;
}

#orner_smart span.bold{
	font-weight: bold;
}

#orner_smart span.small{
	font-size:36px;
}

#sche_pc{
	display: none;
}

#sche_smart{
	margin-top:1em;
	display: block;
	font-size:2vw;
}

#sche_smart div{
	padding-left:1em;
}

#caution_ul{
	font-size:32px;
}

#download_p{
	font-size:32px;
}

.input_form{
	font-size: 4vw;
}
.check_form{
	font-size: 4vw;
}
.result_form{
	font-size: 4vw;
}

.left_s{
	float: left;
	width: 100%;
	border-collapse: separate;
  border-spacing: 4px;  
}

.main{
	padding: 0.5em;
}

.sp_br {
    display: inline;
  }
  
 .text_01{
	font-size: 4.5vw;
}
.text_02{
	font-size: 3vw;
}

}

/* 共通で非表示にしたい要素 */
.hide {
  display: none;
}



/* PC表示用 */
@media (min-width: 481px) {
  .fch_pc {
    display: block;
  }
  .fch_smart {
    display: none;
  }
  
  .fch-box {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 5em;
	  justify-content: center; /* 中央寄せで左右の空きも調整 */
	}

	.fch-col {
	  width: 380px; /* 長文に対応できる幅に拡張 */
	  min-width: 300px;
	}
	
	.copy{
		font-size: 14px;
	}
	
/* --- 1. 企業情報 --- */
  
  /* 法人名・フリガナ・請求書宛名 */
  #entry_form #corp, 
  #entry_form #corp_kana, 
  #entry_form #billing_ad {
    width: 80%;
    max-width: 500px;
  }
  
  /* 所在地（都道府県） */
  #entry_form #ad_1 {
    width: 200px;
  }
  
  /* 所在地（市区町村・町名番地・建物名） */
  #entry_form #ad_2, 
  #entry_form #ad_3, 
  #entry_form #ad_4 {
    width: 80%;
    max-width: 450px;
  }
  
  /* 代表電話番号 */
  #entry_form #corp_tel {
    width: 250px;
  }

  /* --- 2. 申し込み担当者情報 --- */

  /* 担当者氏名・フリガナ・所属部署 */
  #entry_form #name1, 
  #entry_form #name1_kana, 
  #entry_form #busho {
  	width: 80%;
    max-width: 450px;
  }
  
  /* 連絡用メールアドレス */
  #entry_form #mail, 
  #entry_form #mail_conf {
    width: 80%;
    max-width: 450px;
  }
  
  /* 担当者直通電話番号 */
  #entry_form #tel {
    width: 250px;
  }

  /* --- 3. 利用者情報 --- */
  
  /* 利用者情報の入力欄を一括指定 */
  #entry_form input[name^="use_name"] {
      width: 80%;
      max-width: 450px;
  }
  
  #entry_form select#purchase_count{
	width: 200px;
	}
	
}

/* スマホ表示用 */
@media (max-width: 480px) {
  .fch_pc {
    display: none;
  }
  .fch_smart {
    display: block;
  }
  
  .fch-box {
  display: flex;
  flex-wrap: wrap;
    flex-direction: column;
    gap: 1.5em;
  }

  .fch-col {
    width: 100%;
  }
  
  #title_imagezone img{
		width:60%;
	}
	
	.form_inner{
		padding:2em 1em;
	}
	
	.copy{
		font-size: 3vw;
	}

	#stair_overlay::before {
		clip-path: polygon(
		  100% 0,
		  calc(100% / 5 * 4) 0,
		  calc(100% / 5 * 4) 16px,
		  calc(100% / 5 * 3) 16px,
		  calc(100% / 5 * 3) 32px,
		  calc(100% / 5 * 2) 32px,
		  calc(100% / 5 * 2) 48px,
		  calc(100% / 5 * 1) 48px,
		  calc(100% / 5 * 1) 64px,
		  0 64px,
		  0 100%,
		  100% 100%
		);
	  }

	.stair_runner {
		left: calc((100% / 5 * 1) + (100% / 5 * 0.7)); /* 2段目の右端から70%内側 */
		top: -60px; /* 必要に応じて微調整 */
	  }
	  
	  .info1{
	  	font-size: 4.5vw;
	  }
	  
	  /* ボタンのコンテナ */
	.user-controls {
		margin-top: 0px;
	 	margin-bottom: 3em;
	}
	
	.file_note{
		width: 100%;
		font-size: 4vw;
	}



}