@charset "UTF-8";

html {
font-size: 115%;
}
html,body{
height:100%;
margin:0;
padding:0;
}

img {
    max-width: 100%;
  }

* {
box-sizing:border-box;
max-width: 100%;
}

.split-box {
position:absolute;
width:50%;
height:115%;
padding:1em;
}

.left-box {
left:0;
background:#fff;
color:#000;
}

.right-box {
right:0;
/*overflow-y: scroll*/
background: #1F73B7;
}

.left-box a{
color: #1F73B7;
display: inline;
}

.T-4OO-logo {
display: flex;
flex: 1;
justify-content: center;
margin: 18px 0 5px 0;
}

#log-in_English {
list-style: none;
text-align: right;
margin-right: 7%;
margin-top: 0.3%;
font-size: 16px;
}

.T-4OO-logo_New {
width: 30%;
position: center;
margin-bottom: 2%;
}

h3 {
font-size: 16px;
margin-top: 3px;
color: #164B9F;
}


#menu {
display: block;
margin: auto;
margin-top: 10px;
width: 300px;
font-size: 80%;
}
#menu1 {
border: solid 2px #1b9cc6;
border-radius: 3px;
background-color: #ffffff;
padding: 12px;
}

#menu1 span {
display: inline-block;
font-size: 110%;
text-indent: 3.7em;
}

#menu1 a {
color: #484848;
}

#c_manager {
position: transY(-1px);
}

.check {
display: block;
margin: 1em 0;
font-size: 12px;
}

p{
margin: 5px 0;
}

.section .tag01 {
border: solid 2px #dcdcdc;
width: 80%;
margin: 8px auto;
border-radius: 3px;
padding: 2px;
display: flex;
}

#c_id #c_login #c_pass {
width: 100%;
}

.btn {
display: flex;
flex: 1;
justify-content: center;
margin-top: 2%;
padding: 8px;
}

.btn01 {
width: 150px;
padding: 5px 10px;
background-color: #1F73B7;
border-color: transparent;
border-radius: 3px;
color: #fff;
}

footer {
  bottom: 0;
}

#fnavi {
  width: 100%;
    background-color: #f5f5f5;
    color: #000;
    text-align: center;
    margin-top: 3%;
    padding: 0.7% 0;
    font-size: 65% ;
}

#copyright {
  width: 100%;
    background-color: #164a84;
    color: #fff;
    text-align: center;
    padding: 0.7% 0;
    font-size: 75% ;
}

.right-inner {
margin: 2% 3% 1%

}

.content {
border: solid 1px #1b9cc6;
padding: 5px;
padding-bottom: 10px;
margin: 5px 0;
margin-top: 10px;
background-color: #ffffff;
}

.tabs {
display: block;
margin-top: 50px;
padding-bottom: 20px;
background-color: #fff;
box-shadow: 5px 25px 30px rgba(0, 0, 0, 0.2);
width: 100%;
margin: 0 auto;
font-size: 10px;
}

/*タブのスタイル*/
.tab_item {
width: calc(99.99%/3);
height: 0px;
border-bottom: 30px solid gainsboro;
border-left: 8px solid #1F73B7;
border-right: 8px solid #1F73B7;
background-color: #FFF;
line-height: 30px;
font-size: 120%;
color: slategray;
display: block;
float: left;
text-align: center;
font-weight: bold;

box-shadow: inset 0 -15px 10px -6px rgb(0 0 0 / 10%)
}

.tab_item:hover {
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
display: none;
padding: 20px 20px 0;
clear: both;
overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#info:checked ~ #info_content,
#ex-info:checked ~ #ex-info_content,
#tips:checked ~ #tips_content
/*#help:checked ~ #help_content
 #user-site:checked ~ #user-site_content */ {
display: block;
}

.info1 {
border: solid 2px #1b9cc6;
border-radius: 3px;
background-color: #ffffff;
padding: 12px;
}

#info1 span {
display: inline-block;
font-size: 110%;
text-indent: 3.7em;
}

#info1 a {
color: #484848;
}

.info2{
border: solid 2px #1b9cc6;
border-radius: 3px;
background-color: #ffffff;
padding: 12px;
height: 670px;
border: 2px solid #1b9cc6;
border-radius: 3px;
overflow-y: scroll;
}

#info2 span {
display: inline-block;
font-size: 110%;
text-indent: 3.7em;
}

#info2 a {
color: #484848;
}

.info3{
border: solid 2px #1b9cc6;
border-radius: 3px;
background-color: #ffffff;
padding: 12px;
height: 670px;
border: 2px solid #ff0000;
border-radius: 3px;
overflow-y: scroll;
}

#info3 span {
display: inline-block;
font-size: 110%;
text-indent: 3.7em;
}

#info3 a {
color: #484848;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
border-bottom: 30px solid #FFF;
color: #565656;
}

.info_title {
margin-top: 5%;
margin-bottom: 0.6%;
font-weight: 600;
color: #164b9f;
font-weight: bold;
font-size: 138%;
}

.date {
font-weight: 400;
color: grey;
font-size: 80%;
}

.grid {
  display: grid;
  gap: 5px;
/*  grid-gap: 5px; */
/*grid-template-columns: repeat(3, 1fr); */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  justify-content:space-evenly;
  margin-bottom: 1%;
  margin-top: 4%;
  border: solid 2px #dcdcdc;
  border-radius: 3px;
  background-color: #ffffff;
  padding-top: 2%;
  padding-bottom: 1%;
  object-fit: cover;
}

.item {
  /*display: block;*/
  text-align: center;
  margin-top: 4%;
  margin-bottom: 2%;
  padding-bottom: 3%;
  font-size: 102%;

}

.item img {
/*  display: grid;*/
  width: 50%;
}

.item p {
/*  display: grid;*/
/*  justify-content:space-around; */

}
.info_text_main {
  width: 94%;
  height: 100px;  /*文字ボリューム多い際に使用予定*/
  border: 2px solid #708090;  /*文字ボリューム多い際に使用予定*/
  border-radius: 3px; /*文字ボリューム多い際に使用予定*/
  padding-top: 0.2%;
  padding-left: 2%;
  margin-bottom: 1%;
  overflow-y: scroll; /*文字ボリューム多い際に使用予定*/
  font-size: 110%;
}

.info_text {
  width: 94%;
  padding-top: 0.2%;
  padding-left: 2%;
  margin-bottom: 1%;
  font-size: 110%;
  /* border: 1px solid #000;*/
}

.info_text_tips {
  width: 94%;
  padding-top: 0.2%;
  padding-left: 2%;
  margin-top: 1%;
  margin-bottom: 1%;
  font-size: 130%;
  /* border: 1px solid #000;*/
}

.info_text_tips2 {
  width: 94%;
  padding-top: 0.2%;
  padding-left: 2%;
  margin-top: 4%;
  margin-bottom: 1%;
  font-size: 130%;
  /* border: 1px solid #000;*/
}

.info_text_tips3 {
  width: 94%;
  padding-top: 0.2%;
  padding-left: 2%;
  margin-top: 1%;
  margin-bottom: 1%;
  font-size: 125%;
  /* border: 1px solid #000;*/
}

.b-field {
    display: block;
    background: #f0f8ff;
    font-size: 13px;
    padding: 10px 0px;
}


@media (max-width:750px) {
.split-box {
display: block;
position: inherit;
width: auto;
}
.right-box {
display: block;
width: auto;
}
.left-box {
position: inherit;
width: auto;
}
}

@media all and (-ms-high-contrast:none) {
.grid {
display: -ms-flexbox;
gap: 5px;
}
.item p {
font-size: 90%;
}
}

_:-ms-lang(x)::-ms-backdrop, .grid {
display: -ms-flexbox;
gap: 5px;
}

_:-ms-lang(x)::-ms-backdrop, .item p {
font-size: 90%;
}