/*  フォントの指定   */
body{
font-family: sans-serif;
margin:10px auto;
padding:5px;
font-size:130%;
line-height:120%;
color:#000000;
}

/*  小さいフォント   */
.small{
font-family: sans-serif;
margin:10px auto;
padding:5px;
font-size:70%;
line-height:120%;
color:#000000;
}

/*  div内のフォント   */
.ddiivv{
font-family: sans-serif;
margin:1px auto;
/* padding:1px;  */
font-size:80%;
line-height:100%;
color:#000000;
background-color:#DDFFDD;
vertical-align: middle;
text-align: left;
}

/*  テーブル内のフォント   */
.table{
font-family: sans-serif;
margin:1px auto;
/* padding:1px;  */
font-size:90%;
line-height:120%;
color:#000000;
vertical-align: middle;
}

/*  テーブル内のフォント　少し小さめで   */
.table_s{
font-family: sans-serif;
margin:1px auto;
/* padding:1px;  */
font-size:80%;
line-height:120%;
color:#000000;
vertical-align: middle;
}

/*  テーブル内のフォント　もっと小さめで   */
.table_sm{
font-family: sans-serif;
margin:1px auto;
/* padding:1px;  */
font-size:70%;
line-height:120%;
color:#000000;
vertical-align: middle;
}

/*  テーブル内のフォント　もっともっと小さめで   */
.table_ss{
font-family: sans-serif;
margin:1px auto;
/* padding:1px;  */
font-size:60%;
line-height:120%;
color:#000000;
vertical-align: middle;
}

/*  テーブル内のフォント　少し大きめで   */
.table_b{
font-family: sans-serif;
margin:1px auto;
/* padding:1px;  */
font-size:110%;
line-height:120%;
color:#000000;
vertical-align: middle;
}

/* td内で、水平垂直真ん中表示 */

.td_center {
text-align: center;
vertical-align: middle;
}


/* テキストボックス */
.textbox {
  width: 180px;
  height : 50px;
  padding: 3px 7px;
  border-radius: 5px;
  border: 2px solid #ccc;
  font-size: 130%;
}

/* 長めのテキストボックス */
.long_textbox {
  width: 300px;
  height : 50px;
  padding: 3px 7px;
  border-radius: 5px;
  border: 2px solid #ccc;
  font-size: 130%;
}

/* 文字だけデカくするテキストボックス */
.big_textbox {
  /* width: 350px; */
  /*height : 50px; */
  /*padding: 3px 7px; */
  /*border-radius: 5px; */
  /*border: 2px solid #ccc; */
  font-size: 130%;
  width: 100%; /* 親要素の幅に合わせる */
  box-sizing: border-box; /* パディングやボーダーを含めて幅を計算 */
  max-width: 100%; /* 親要素より大きくならないようにする */
}

/* セレクトボックス */
.selectbox {
  /* width: 350px; */
  /*height : 50px; */
  /*padding: 3px 7px; */
  /*border-radius: 5px; */
  /*border: 2px solid #ccc; */
  font-size: 100%;
}

.feature {
  white-space: normal; /* 文字を折り返す */
/*   display       : inline-block;  */
border-radius : 19%;      /*     角丸       */
  font-size     : 120%;        /* 文字サイズ */
  text-align    : center;   /*    文字位置   */
 /* cursor        : pointer;      カーソル   */
   padding       : 4px 4px;    /* 余白       */
   background    : #FF4B23;  /*   背景色 */
   color         : #ffffff;   /*  文字色 */
 /* line-height   : 1em;        1行の高さ  */
 /* transition    : .3s;         なめらか変化 */
  box-shadow    : 2px 2px 2px #666666;  /* 影の設定 */
 /* border        : 2px solid #000066;    枠の指定 */
} 

.green {
  white-space: normal; /* 文字を折り返す */
/*   display       : inline-block;  */
border-radius : 19%;      /*     角丸       */
  font-size     : 120%;        /* 文字サイズ */
  text-align    : center;   /*    文字位置   */
 /* cursor        : pointer;      カーソル   */
   padding       : 4px 4px;    /* 余白       */
   background    : #3C6754;  /*   背景色 */
   color         : #ffffff;   /*  文字色 */
 /* line-height   : 1em;        1行の高さ  */
 /* transition    : .3s;         なめらか変化 */
  box-shadow    : 2px 2px 2px #666666;  /* 影の設定 */
 /* border        : 2px solid #000066;    枠の指定 */
} 

.hacchu {
  /*  white-space: normal;  文字を折り返す */
  /*   display       : inline-block;  */
  border-radius : 19%;      /*     角丸       */
    font-size     : 120%;        /* 文字サイズ */
    text-align    : center;   /*    文字位置   */
   /* cursor        : pointer;      カーソル   */
     padding       : 4px 4px;    /* 余白       */
     background    : #dddddd;   /*  背景色 */
   /* color         : #ffffff;     文字色 */
   /* line-height   : 1em;        1行の高さ  */
   /* transition    : .3s;         なめらか変化 */
    box-shadow    : 2px 2px 2px #666666;  /* 影の設定 */
   /* border        : 2px solid #000066;    枠の指定 */
  } 


.button {
  white-space: normal;  /* 文字を折り返す */
/*   display       : inline-block;  */
 border-radius : 19%;      /*     角丸       */
   font-size     : 120%;        /* 文字サイズ */
   text-align    : center;   /*    文字位置   */
  /* cursor        : pointer;      カーソル   */
    padding       : 4px 4px;    /* 余白       */
    background    : #a9a9a9;   /*  背景色 */
    color         : #000000;    /* 文字色  */
  /* line-height   : 1em;        1行の高さ  */
  /* transition    : .3s;         なめらか変化 */
   box-shadow    : 2px 2px 2px #666666;  /* 影の設定 */
  /* border        : 2px solid #000066;    枠の指定 */
} 

.login_button {
/*  white-space: normal;   文字を折り返す */
/*   display       : inline-block;  */
   border-radius : 10%;      /*     角丸       */
   font-size     : 150%;        /* 文字サイズ */
   text-align    : center;   /*    文字位置   */
  /* cursor        : pointer;      カーソル   */
    padding       : 8px 8px;    /* 余白       */
    background    : #dddddd;   /*  背景色 */
  /* color         : #ffffff;     文字色 */
  /* line-height   : 1em;        1行の高さ  */
  /* transition    : .3s;         なめらか変化 */
   box-shadow    : 2px 2px 2px #666666;  /* 影の設定 */
  /* border        : 2px solid #000066;    枠の指定 */
} 

.pass_button {
/*  white-space: normal;   文字を折り返す */
/*   display       : inline-block;  */
   border-radius : 10%;      /*     角丸       */
   font-family  : sans-serif; /* フォントファミリー */
   font-size     : 80%;        /* 文字サイズ */
   text-align    : center;   /*    文字位置   */
  /* cursor        : pointer;      カーソル   */
    padding       : 8px 8px;    /* 余白       */
    background    : #D9D9D9;   /*  背景色 */
  /* color         : #ffffff;     文字色 */
  /* line-height   : 1em;        1行の高さ  */
  /* transition    : .3s;         なめらか変化 */
  /* box-shadow    : 2px 2px 2px #666666;  影の設定 */
   border        : 0px solid #000066;   /* 枠の指定 */
} 

/* 画像のフチを丸くする */
.box img{
  border-radius: 9px;
}

/* セレクトボックスの幅の指定 */
.box2 select{
   width: 100px;
   }

.rounded-image {  /* submit image　の角を丸くする。 */
  border-radius: 10px; /* 角の丸みの度合いを調整 */
  /* 必要に応じて、画像のサイズも指定できます */
  /* width: 100px; */
  /* height: auto; */
}

.overflow{  /* 横スクロール */
                max-width: 220px;
                background-color: #ffffff;
                height: 60px;
                padding: 20px;
                margin: auto;
                border: 5px solid #99cc66;
              /* 文字の折り返し禁止    */
                white-space: nowrap; 
              /* 横にはみ出した要素をスクロールするプロパティ */
                overflow: scroll;
                /*-webkit-overflow-scrolling: touch;  iOSで重要 */
                position: relative;
                }