@charset "utf-8";

/***************　共通　***************/
img {
max-width: 100%;
height: auto;
width: auto;
}
h1 {
padding: 10px;
color : white;
background-color : rgb(13, 176, 255);
text-align : center;
font-weight : bolder;
font-size : 16px;
}
.margin-lr {
margin-left : 10px;
margin-right : 10px;
}
.bg-color {
background-color : rgb(239, 239, 239);
padding: 3px 10px 20px 10px;
}
.lead_renraku {
background-color : rgb(213, 213, 213);
padding-top : 6px;
padding-left : 10px;
padding-bottom : 5px;
}
.lead_common {
background-color : rgb(213, 213, 213);
padding-top : 6px;
padding-left : 10px;
padding-bottom : 5px;
margin-top : 20px;
}
.hissu {
color : white;
background-color : red;
padding: 1px 3px 1px 5px;
margin-left : 5px;
margin-right : 5px;
font-weight : bold;
}
.m-top_triangle {
margin-top : 20px;
margin-right: 10px; 
margin-left: 20px;
padding-left: 20px; /*  折り返し行だけ右にずらす */
text-indent: -20px; /*  折り返し行だけ右にずらす */
}
.m-left_box {
margin-left : 20px;
}
.block {
display : block;
}
.hr_white {
border-width : 1px;border-style : solid;border-color : white;
margin: 15px 5px 15px 5px;
clear : both;
}
/***************　text　***************/
/* 高さ調整 */
input[type="text"] {
height: 30px;
box-sizing: border-box;
}
/***************　select 　***************/
/* 矢印を消さず、背景白＋黒文字だけを適用 */
select {
background-color: #fff !important;
min-width: 95px;          /* 幅統一（柔軟＋半固定） */
box-sizing: border-box;   /* 内側計算を安定させる */
padding: 6px 28px 6px 6px; /* 右側は矢印分 */
-webkit-appearance: auto;  /* iPhone Safari */
-moz-appearance: auto;     /* Firefox */
border: 1px solid #ccc;
}
/***************　ラジオボタン　***************/
/* ラジオボタン拡大 */
input[type="radio"] {
transform: scale(1.5);
margin-top: -2px;  /* テキストとのズレ回避 */
margin-right: 6px;
}
/***************　E-mail 　***************/
.m-bottom_mail {
margin-bottom : 7px;
}
/***************　電話の種類　***************/
/* 横並び */
.side_phone {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-bottom: 10px;
}
/* ラジオボタンと文字の距離を近づける */
.side_phone label {
display: flex;
align-items: center;
gap: 1px;
}
/***************　人数　***************/
/* 横並び */
.side_people {
display: flex;
gap: 30px; /* 間隔 */
}
.side_people select {
min-width: 95px;
padding-right: 20px;
}
.side_people > div {
display: flex;
flex-direction: column;
}
/* テキスト間隔専用スペーサー */
.people-space_otona,
.people-space_kodomo,
.people-space_youji {
margin-left : 4px;
}
/***************　空港　***************/
/* 横並び */
.side_air {
display: inline-flex; 
gap: 30px;     /* 項目の間隔 */
}
/***************　便の時間　***************/
/* 横並び */
.side_time {
display: flex;
flex-wrap: wrap;
gap: 30px;    /* 項目の間隔 */
margin-bottom: 10px;
}
/* ラジオボタンと文字の距離を近づける */
.side_time label,
.side_out {
display: flex;
align-items: center;
gap: 1px;
}
  /* ラジオと便名入力の間隔 */
.binmei {
display: flex;
align-items: center;
gap: 10px; 
}
/***************　第2希望　***************/
/* 横並び */
.side_second {
display: flex;
gap: 30px;     /* 項目の間隔 */
}
.side_second-in p {
margin: 0 0 6px 0;
}
/***************　送信ボタン　***************/
.btn {
display: flex; /* 横並び */
justify-content: flex-start; /* 左寄せ */
gap: 12px;                   /* 間隔 */
margin-top: 20px;
margin-left : 26px;
}
/* 「送信内容を確認する」ボタン（submit） */
.btn input[type="submit"] {
background-color: rgb(85, 174, 255);
color: white;
border: 1px solid black;
padding: 8px 20px;
cursor: pointer;
}
/* 「入力内容をリセット」ボタン（reset） */
.btn input[type="reset"] {
background-color: rgb(213, 213, 213);
color: black;
border: 1px solid black;
padding: 8px 20px;
cursor: pointer;
}
/***************　placeholder　***************/
/* Webkit 半調が消えるタイミングをIEに合わせる*/
:focus::-webkit-input-placeholder {
color: transparent;
}
/* Firefox 18 以前 */
:focus:-moz-placeholder {
	color: transparent;
}
/* Firefox 19 以降 */
:focus::-moz-placeholder {
color: transparent;
}

/* Webkit 半調の色を統一*/
::-webkit-input-placeholder {
color : rgba(255, 0, 0, 0.6);
opacity: 1;
}
/* Firefox 18 以前 */
:-moz-placeholder {
	color : rgba(255, 0, 0, 0.6);
}
/* Firefox 19 以降 */
::-moz-placeholder {
color : rgba(255, 0, 0, 0.6);

/* Firefox 19 以降のデフォルトでは */
/* color ではなく opacity で色合いを調整しているため */
/* 文字色を指定する場合、opacity を 1 にする必要がある */
opacity: 1;
}
/* IE 10 以降 */
:-ms-input-placeholder {
	color : rgba(255, 0, 0, 0.6);
}
/*==========================================================================
●●●tablet.css 画面の横幅が768pxまで●●●
===========================================================================*/
@media screen and (max-width: 768px) {
/***************　text　***************/
/* 高さ調整 */
input[type="text"] {
height: 35px;
box-sizing: border-box;
}
/***************　select 　***************/
/* select 共通色指定 */
select {
-webkit-appearance: none; /* iOS / Safari / Chrome */
-moz-appearance: none;    /* Firefox */
appearance: none;
color: #000000;
border-radius: 4px;
font-size: 14px;          /* iOSの自動拡大防止 */
background-image:   /* selectの▼矢印を残す */
linear-gradient(45deg, transparent 50%, #333 50%),
linear-gradient(135deg, #333 50%, transparent 50%);
background-position:
calc(100% - 18px) 50%,
calc(100% - 12px) 50%;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
}
/***************　ラジオボタン　***************/
input[type="radio"] {
margin-top: 1px;   /* テキストとのズレ回避 */
margin-right: 8px;
}
/***************　電話の種類　***************/
/* 横並び */
.side_phone {
gap: 25px;
}
/***************　空港　***************/
  /* 縦並びに戻す */
.side_air {
display: block;
}
/***************　便の時間　***************/
.side_time {
column-gap: 20px; /* 横の間隔 */
row-gap: 17px;    /*  行間 */
}
/* 4分割 */
.side_time label {
flex: 0 0 calc((100% - 60px) / 4);
}
  /* sideとoutの間隔を詰める */
.side_time label:last-child {
margin-bottom: 0;
}
/***************　送信ボタン　***************/
.btn input[type="submit"],
.btn input[type="reset"] {
font-size: 14px;
line-height: 2.5;
}
/***************　囲み　***************/
}
/*==========================================================================
●●●smart.css  画面の横幅が570pxまで●●●
===========================================================================*/
@media screen and (max-width:570px) {
/***************　共通　***************/
.m-top_triangle {
margin-left: 12px; /*  折り返し行だけ右にずらす */
padding-left: 12px; /*  折り返し行だけ右にずらす */
text-indent: -12px; /*  折り返し行だけ右にずらす */
}
.m-left_box {
margin-left : 12px;
}
/***************　電話の種類　***************/
.side_phone {
display: grid;
grid-template-columns: max-content max-content;
column-gap: 30px; /* 横の間隔 */
row-gap: 17px;   /*  行間 */
}
.side_phone label {
display: flex;
align-items: center;
}
/***************　人数　***************/
  /* 縦並びに戻す */
.side_people {
display: block;
}
.side_people > div {
display: block;  /*  横並び阻止 */
margin-bottom: 20px; /*  行間 */
}
/* テキスト間隔専用スペーサー */
.people-space_otona {
margin-right : 62px;
margin-left : 0px;
}
.people-space_kodomo {
margin-right : 10px;
margin-left : 0px;
}
.people-space_youji {
margin-right : 13px;
margin-left : 0px;
}
/***************　便の時間　***************/
.side_time {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 25px;; /* 横の間隔 */
}
.side_time label {
display: flex;
align-items: center;
}
/* 7個目：3列グリッドの1列目 */
.side_time label:nth-child(7) {
grid-column: 1 / 2;
}
/* 8個目：3列グリッドの2列目 */
.side_time label:nth-child(8) {
grid-column: 2 / 3;
}
/* 9個目：1列（全幅） */
.side_time label:nth-child(9) {
grid-column: 1 / -1;
}
/***************　第2希望　***************/
  /* 縦並びに戻す */
.side_second {
display: block;
}
.m-top_no2 {
margin-top : 20px;
}
/***************　送信ボタン　***************/
.btn {
margin-left: 0; /* ← 26px を打ち消す */
justify-content: space-evenly; /* 間隔を同じに */
}
/* 「送信内容を確認する」ボタン（submit） 「入力内容をリセット」ボタン（reset） */
.btn input[type="submit"],
.btn input[type="reset"] {
padding: 8px 18px;
}
/***************　囲み　***************/
}