@charset "UTF-8";
*,*::before,*::after{box-sizing:border-box}
ul[class],ol[class]{padding:0}
body,h1,h2,h3,h4,p,ul[class],ol[class],figure,blockquote,dl,dd{margin:0}
html{scroll-behavior:smooth}
body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}
ul[class],ol[class]{list-style:none}
a:not([class]){text-decoration-skip-ink:auto}
img,picture{max-width:100%;display:block}
article>*+*{margin-top:1em}
input,button,textarea,select{font:inherit}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
/* addition */
main{display:block}
img,picture{width:100%;height:auto}
table{border-collapse:collapse;border-spacing:0}
a{color:inherit;word-break:break-all;cursor:pointer}
/* base
   ========================================================================== */
html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
}
body {
  background: #e8ece5;
  color: #181818;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 1.6rem;
  line-height: 1.8;
}
a { color: #1a0dab;}
a:visited {}
a:hover, a:active {}

/* global menu
   ========================================================================== */
nav.gm { display: none; }
@media print, screen and (min-width: 768px) {
  nav.gm { display: block; }
}

/* main
   ========================================================================== */

header {
	display: flex;
	align-items: center;
    margin: 3% auto 0;
	padding: 0 0 0 90px;
	height: 102px;
    width: 96%;
	max-width: 960px;
	background: url("../assets/title_monsuke.png") no-repeat left center;
  }

header h1 { font-size: 2.6rem; line-height: 1.2; letter-spacing: 1px;}
header h1 span {font-size: 1.6rem; letter-spacing: 0px; }

main {
  width: 100%;
  max-width: 960px;
  margin: 3% auto;
  background: #fff;
  padding: 6%;
}

.description_box h2:first-child {
  margin: 0 0 15px;
}
.description_box h2 {
  margin: 15px 0;
  padding: 0 0 5px 0 ;
  color: #000;
  font-size: 1.8rem;
  letter-spacing: 0.2rem;
  font-weight: bold;
	border-bottom: double 3px #cccccc;
}

.sending_before h2 , .sending_after h2{
	padding: 1% 3%;
	margin: 0 auto 2%;
	font-size: 1.8rem;
}

.sending_before p , .sending_after p{
	font-weight: bold;
}

.sending_before h2{
	color: #AD0E11;
	border: double 3px #AD0E11;
}
.sending_after h2{
	color: #1F450B;
	border: double 3px #1F450B;
}

/* form
   ========================================================================== */
table {
  width: 100%;
  table-layout: fixed;
}
tr {
  display: flex;
  flex-wrap: wrap;
  margin-top: 6%;
  text-align: left;
}
th, td {
  width: 100%;
}
th {
  background: #d8dbd4;
  text-align: left;
  vertical-align: top;
  padding: 3%;

}
td {
  padding: 3%;
}
tr:last-child {
  border-bottom: none;
}

/*parts*/

.required_txt {
  color: #fff;
  margin: 0 0 0 5%;
  padding: 1% 2% 1.5% 2%;
  background: #c83838;
  font-size: 0.7em;
  letter-spacing: 0;
  border-radius: 3px;
}

.info_sub_txt {
	margin: 3% auto;
	font-size: 1.4rem;
	color: #c83838;
}

.warning_sentence_txt {
	margin: 6% auto 3%;
	text-align: center;
	font-weight: bold;
}

/*parts*/
input, textarea, select {
  padding: 8px;
  border: 1px solid #666666;
  background: #f8f8f8;
  font-size: 1.6rem;
}

.width_size_s { width: 90%; }
.width_size_l { width: 100%; }

.daytime_b{	margin: 3% auto 0;}

.daytime_a select, .daytime_b select{
	margin: 0 5px auto 0;
}

/*submit*/
.submit_btn_area {
  display: flex;
  justify-content: center;
}

.btn {
  display: block;
  padding: 0.5em 1.5em;
  text-decoration: none;
  border-radius: 5px;
  width: 200px;
  font-size: 1.8rem;
  background: #c3293e;
  color: #fff;
  margin: 2%;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
}
.btn:active {
  border-bottom: solid 2px #666666;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
.check {
  background: #e38311;
  color: #fff;
}

.fix{
	background: #eae8e6;
	color: #000;
}


@media print, screen and (min-width: 640px) {
  header { width: 90%; }
  header h1 { font-size: 2.8rem;}
  header h1 span {font-size: 1.8rem; }
  main { width: 90%; }
  tr {
    justify-content: space-between;
    margin-top: 3%;
  }
  th { width: 35%; padding: 5px 7px; }
  td { width: 62%; padding: 3px 0; }
  .sending_before h2 , .sending_after h2{ padding: 5px 7px; }

}
@media print, screen and (min-width: 960px) {
  header { width: 70%; }
  header h1 { font-size: 3rem;}
  header h1 span {font-size: 2rem; }
  main { width: 70%;  padding: 3%; }
  th { padding: 8px 10px; }
  td { padding: 5px 0; }
  .sending_before h2 , .sending_after h2{ padding: 8px 10px; }

}

/* footer
   ========================================================================== */
footer {
  padding: 15px 0;
  background: #292929;
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
}
.hbc-back {
  width: 130px;
  margin: 1% auto 2%;
  padding: 10px;
  background: #fff;
}
address {
  padding: 10px 0 0;
  font: inherit;
  line-height: 20px;
}
@media print, screen and (min-width: 768px) {
  .hbc-back { display: none; }
  address {  padding: 10px 0; }
}

/* 以下、項目間仕切りの追加用 */

/* フォームセクション見出し */
.form-section {
    padding: 15px;
    margin: 20px 0 10px;
    background: #f5f5f5;
    border-left: 5px solid #4a90e2;
}

.form-section h3 {
    margin: 0 0 5px 0;
    color: #333;
    font-size: 1.2em;
}

.form-section p {
    margin: 5px 0 0 0;
    color: #666;
}

/* セクションのスタイルバリエーション */
.form-section.highlight {
    background: #e8f4ff;
    border-left-color: #4a90e2;
}

.form-section.warning {
    background: #fff8e1;
    border-left-color: #ffb300;
}

/* フォーム注釈 */
.form-note {
    padding: 10px 15px;
}

.note-content {
    font-size: 0.95em;
    line-height: 1.5;
    color: #555;
}

/* 注釈のスタイルバリエーション */
.form-note.info {
    background: #e8f4fd;
    border-left: 4px solid #2196F3;
    padding: 10px 15px;
}

.form-note.warning {
    background: #fff8e1;
    border-left: 4px solid #ffb300;
    padding: 10px 15px;
}

.form-note.success {
    background: #e8f5e9;
    border-left: 4px solid #4caf50;
    padding: 10px 15px;
}

/* 区切り線 */
.form-separator {
    height: 1px;
    background: #e0e0e0;
    padding: 0;
    margin: 15px 0;
}

/* 区切り線のスタイルバリエーション */
.form-separator.dashed {
    background: repeating-linear-gradient(to right, #e0e0e0, #e0e0e0 5px, transparent 5px, transparent 10px);
}

.form-separator.dotted {
    background: repeating-linear-gradient(to right, #e0e0e0, #e0e0e0 2px, transparent 2px, transparent 6px);
}

.form-separator.thick {
    height: 3px;
}