*{ margin:0; padding:0;}
html {
  touch-action: manipulation;
}
body{
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
.full-width {
  max-width: 320px;
  position: relative;
  left: -10px;
}
 
@media screen and (min-width: 321px) {
.full-width {
  max-width: 100%;
  position: initial;
}
}
html,body { height : auto ;}
#contener{
	max-height: 999999px;
}

#header{
	background-color:#4c69bf;
	color: #ffffff;
	font-size: 18px;
	padding: 10px;
	line-height: 145%;
}
#moji-now{
	text-align: center;
	padding:15px;
}

#bottun{
    display: block;
    width: 60%;
    margin: 15px auto;
    font-size: 18px;
    color: #fff;
    border-radius: 10px;
    outline: 0;
    border: none;
    -webkit-appearance: none;
}
#bottun a{
    display: block;
    font-size: 18px;
    color: #fff;
    padding: 4%;
    text-align: center;
    text-decoration: none;
}
#bottun{
    background-color: #0082c8;
}
#bottun:hover{
    background-color: #e54b4b;
} 
/* セルごとの色変更 */
dl.number-waku:nth-child(even){
      background-color: #f5f5f5;
    }
 /* 最後のセルに背景色を指定 */

    /* 奇数行の背景色を変更 */
dl.number-waku:nth-child(odd){
      background-color: #e3e3e3;
}
.number_table{
   text-align: center;
   font-size: 16px;
   width: 100%;
   margin: 0 auto;
   color: #222222;
   border-collapse:collapse;
}
.number_table tr td{
   padding: 3%;
   margin-left : 0 ;
   margin-right : auto ;
}
td.time_stump_td{
    width: 15%;
}
.time_stump_span_design{
	font-size:16px;
	color: #666666;
	padding-right: 1%;
}

.number_table tr{
   background-color: #e3e3e3;
}

.number_table tr:nth-child(2n+1) {
   background-color: #f5f5f5;
}



span.name_design {
    display: block;
    position: relative;
	left: 13%;
    font-size:24px;
}
input::placeholder {
  color: #e3e3e3;
}
input::-webkit-input-placeholder { 
font-size: 24px;
padding-top: 0.7em;
}
#moji{
padding: 8px;
}
.massege_text_drivers {
    padding: 0.8em 1em;
    font-size: 16px;
    background-color: #ecf8ff;
    color: #101010;
}

.flex-waku {
  display: flex;
  justify-content: space-between; /* フレックスアイテムを均等に配置 */
  align-items: center;
  height: 75px;
}


.flex-waku-item{
    display: flex;
    width:14%;
    flex-direction: column;
    text-align: center;
    overflow-wrap: break-word;
    line-height: 118%;
}
.flex-waku-item-name {
    width:22%;
    text-align: center;
}
.flex-waku-item-bottun1 {
    width:16%;
    text-align: center;
}
.flex-waku-item-bottun2 {
    width:16%;
    text-align: center;
}


/* ボタンに対するスタイル */
.btn_01,.btn_02 {
    width: 90%; /* 幅を親要素の100%に設定 */
    margin: 0 auto;
    font-size:1rem;
    padding-top:10px;
    padding-bottom: 10px;
    max-width: 150px; /* 必要に応じて最大幅を設定 */
    text-align: center;
    border: none;
        appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 5px;
    color:#fff;
}
.btn_01{
	background-color: #0082C8;
	border: 3px outset #0082C8;
	transition: 0.5s;
}
.btn_02{
	background-color: #E54B4B;
	border: 3px outset #E54B4B;
	transition: 0.5s;
}
.btn_01:hover{
	background-color: #fff;
	color:#000;
	border: 2px solid #0082C8;
}
.btn_02:hover{
	background-color: #fff;
	color:#000;
	border: 2px solid #E54B4B;
}
span.flex-midashi {
	background-color: #d3d3d3;
    display: block;
    width: 55px;
    margin: 0 auto;
    margin-bottom: 5px;
    padding: 4px 4px;
    color: #000;
    font-size: 0.8rem;
}
span.flexname {
    font-size: 1.2rem;
    line-height: 118%;
    padding-left:5px;
}
span.flex-text {
    display: block;
    height: 18px;
}
@media screen and (min-width:480px) { 
    /*------------------------------------------------------------------------　画面サイズが480pxからはここを読み込む　*/
#contener{
   width: 100%;
}

.number_table{
    font-size: 21px;   
}
span.name_design {
    display: block;
    position: relative;
	left: 13%;
    font-size:24px;
}
input::placeholder{
  font-size: 24px;
}

}
@media screen and (min-width:768px) and ( max-width:1024px) {
    /*------------------------------------------------------------------------　画面サイズが768pxから1024pxまではここを読み込む　*/
#contener{
   width: 100%;
}

.number_table{
    font-size: 24px;   
}
input::placeholder{
  font-size: 24px;
}
}
@media screen and (min-width:1024px) {
    /*-------------------------------------------------------------------------　画面サイズが1024pxからはここを読み込む　*/
#contener{
   width: 1000px;
   margin: 0 auto;
}

.number_table{
    font-size: 32px;   
}
td.time_stump_td{
    width: 20%;
}
.time_stump_span_design{
	font-size:21px;
	padding-right: 4%;
}
span.name_design {
    display: block;
    position: relative;
	left: 7%;
    font-size:36px;
}
input::placeholder {
  font-size: 80px;
}
.massege_text_drivers {
    padding: 2%;
    font-size: 18px;
}
}