body{margin-left: auto;
margin-right: auto;
width: 100%;}

img{border: none;webkit-backface-visibility: hidden;}

.erase2{display:none;}

.readmore{
    position: relative;
    box-sizing: border-box;}

.readmore-content{
    position: relative;
    overflow: hidden;
    /*以下お好み*/
    /*高さの初期値*/
    height: 200px;
}
.readmore-content::before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 15%;
    width: 70%;
    content: "";
    /*以下お好み グラデーションの色と高さ 高さはreadmoreのheight以下にすること*/
    height: 50px;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);
    background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);}

/* 続きを読むボタン */
.readmore-label{
    display: table;
    bottom: 5px;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    margin: 0 auto;
    z-index: 2;
    padding: 0 10px;
    background-color: #00cc00;
    border-radius: 10px;
    color: #FFF;}

.readmore-check{
    display: none;
}
/*チェック時にボタンを非表示*/
.readmore-check:checked ~ .readmore-label{
    position: static;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    /* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
    /* display: none; */
}

/*チェック時に高さを自動に戻す*/
.readmore-check:checked ~ .readmore-content{
    height: auto;
}
/*チェック時グラデーション等を削除*/
.readmore-check:checked ~ .readmore-content::before {
    display: none;}
    
#menu{width: 100%;}

#main{background-color: #004080;
padding: 5px 0px 5px 0px;width: 100%;}

#time_publish, #time_modify{font-size: 10px;text-align: right;width: 96%;}
#time_publish2{background-color: black; color: white;font-weight: bold;padding: 1px 5px 1px 5px;}
#time_modify{text-align: right;}

#box{width: 100%;
padding: 20px 0px 20px 0px;}

#box2, #box3{width: 88%;}

h1, h2{background-color: #004080;}

h1{
color: white;
font-size: 25px;}

h2{
color: yellow;
font-size: 21px;
margin-top: 0px;}

#beginning{margin: 5% 0px 0% 0px;width: 98%;}
#beginning, .explain, .left_box44, .right_box44{font-size: 15px;line-height: 2.0em; text-align: left;}

.back_blue{background-color: #00ffff;}
.back_yellow{background-color: #ffff00;}
.back_blue, .back_yellow{font-weight: bold;padding: 2px 20px 2px 20px;}

.paragraph, .explain{width: 96%;}
.explain2, .explain3{font-size: 13px;line-height: 1.5em;}
.explain3{margin-left: 13px;width: 96%;}

.title, .title2, .explain{margin-left: 0px;}

.title, .title2{margin-bottom: 1.0em;text-align: left;}
.title2{font-weight: bold;margin-top: 2.0em;}

#title_replica{color: yellow;}
#title_swingman{color: red;}
#title_replica, #title_swingman{background-color: black;font-weight: bold;padding: 5px 0px 5px 0px;text-align: center;}

#logo1{margin: 20px 0px 40px 0px;}

#logo2{margin-right: 20px;}

.brown{color: #cc0000;
font-weight: bold;}

hr{margin-bottom: 20%;
margin-top: 20%;}

.horizon{border-top: 4px dashed steelblue; width: 90%;}

.center, .center2, .center3, #left_maker, #right_maker, .explain2{text-align: center;margin-left: 0px;}
.center2, #right_maker, #left_maker, #left_neck, #right_neck, #left_hem, #right_hem{font-size: 20px;font-weight: bold;}
.center2{line-height: 2.5em;}
.center2, .center3, #right_maker, #left_maker{margin: 5% 0px 5% 0px;}

#left_maker, #right_maker{margin-left: 0px;width: 98%;}
#right_maker{padding-top: 35px;}

#right_replica, #right_swingman{margin-left: 0px;margin-top: 3em;text-align: center;width: 98%;}
#left_replica, #left_swingman{font-size: 15px;line-height: 2.0em;margin-left: 0px;margin-top: 3em;text-align: left;width: 98%;}

#right_picture_name, #left_picture_name{
margin-left: 0px;
margin-top: 3.0em;
font-weight: bold;
line-height: 2.0em;
font-size: 20px;
width: 98%;}

#left_official1, #left_official2{margin-left: 0px;margin-top: 2.0em;line-height: 2.0em;width: 98%;}
#left_official1{text-align: left;}
#left_official2{text-align: center;}

#right_official1, #right_official2{margin-left: 0px;padding-top: 10%;}

#left_official2, #right_official2{
margin-top: 2.0em;
font-size: 20px;
font-weight: bold;
width: 98%;}

#left_name_swingman, #right_name_swingman{
font-size: 20px;
font-weight: bold;
margin-left: 0px;
margin-top: 2.0em;
width: 98%;}

#left_neck, #right_neck, #left_hem, #right_hem{width: 98%;margin-top: 10%;margin-left: 0px;}

.left_appendix, .right_appendix{font-size: 13px;line-height: 1.5em;margin-top: 4.0em;width: 98%;}

.center_neck{font-size: 20px;font-weight: bold;margin-left: 0px;margin-top: 5%;width: 98%;}

.center_swingman, .center_swingman2{font-size: 13px;margin-bottom: 7%;margin-left: 0px;width: 98%;}

#picture_replica, #picture_size1, #picture_size2, #picture_cloth, .picture_name, #picture_size_jersey, #picture_size_jersey2, #picture_swingman, #picture_swingman1, #picture_swingman2, #picture_swingman3, .picture_swingman18, #picture_swingman21, #picture_swingman22, .picture_swingman23{width: 88%;height: auto;}

#picture_size2{margin-top: 3.0em;}

#picture_official1, #picture_official2{width: 29.6%;height: auto;}
#picture_official2{margin-left: 10%;}

#picture_official3, #picture_official4{width: 45%;height: auto;}
#picture_official4{margin-left: 4%;}
#picture_official5{width: 60%;height: auto;}

.picture_neck{width: 60.2%;height: auto;}

#picture_size_jersey, #picture_size_jersey2{margin-top: 2.0em;}
#picture_swingman{margin-top: 5%;}

#picture_swingman1{margin-top: 1%;}
#picture_swingman2, #picture_swingman3{margin-top: 5%;}
#picture_swingman4, #picture_swingman5{margin-top: 5%;width: 58.8%;height: auto;}

#picture_swingman6{margin-right: 5%;width: 34.4%;height: auto;}
#picture_swingman7{width: 51.6%;height: auto;}
#picture_swingman8{margin-top: 2%;margin-right: 1.5%;width: 28%;height: auto;}
#picture_swingman9{margin-top: 2%;margin-right: 1.5%;width: 37.2%;height: auto;}
#picture_swingman10{margin-top: 2%;width: 31%;height: auto;}

#picture_swingman11, #picture_swingman12{margin-top: 4%;width: 64.6%;height: auto;}
.picture_swingman13, .picture_swingman14{width: 70%;;height: auto;margin-bottom: 3%;}
.picture_swingman15{margin-top: %;width: %;height: auto;}
.picture_swingman16{margin-top: 8%;width: 94.4%;height: auto;}
#picture_swingman17{margin-top: 8%;width: 88%;height: auto;margin-bottom: 1.0em;}
.picture_swingman18{margin-bottom: 1.0em;}
.picture_swingman19{width: 99.6%;height: auto;margin-bottom: 1.0em;}
.picture_swingman20{width: 95.2%;height: auto;margin-bottom: 1.0em;}
#picture_swingman21, #picture_swingman22{margin-top: %;margin-bottom: 1.0em;}
.picture_swingman23{margin-bottom: 1.0em;}

.title, .title3, title4{font-size: 17px;
font-weight: bold;
padding: 3px;}

.title3{background-color: #ffff00;}
.title4{font-weight: bold;margin-left: 15px;}
#title5{margin-bottom: 1.0em;}

.makers{font-size: 23px;margin-top: 3.0em;font-weight: bold;}

#list_size1, #list_size3, #list_size5, #list_size6{float: left;}
#list_size2, #list_size4{float: right;}
#list_size1, #list_size2, #list_size3, #list_size4, #list_size5, #list_size6{margin-left: 10%;text-align: left;line-height: 1.5em;width: 40%;}
#list_size3, #list_size6{font-weight: bold;}

.right, .right2, .right3, #hem3, #right4{float: right;}
.right2{margin-right: 40px;}
.right3{padding-right: 20px;
padding-top: 105px;}
#right4{margin-right: 90px;}

.left, .name2, .name3, .neck2, .neck3, neck4, #hem2, .appendix, .left2, .size2 {float: left;}

.left2{margin-left: 40px;}

.size_tag{background-color: #0080c0;
color: white;}

.cloth{background-color: orange;
color: white;}

.name{background-color: lime;}
.name2, .name3{margin-left: 70px;}
.name3{padding-top: 17px;}

.official{background-color: red;
color: white;}

.neck{background-color: #00ffff;}
.neck2, .neck3{margin-right: 35px;}
.neck3{padding-top: 11px;}

.size{background-color: #ff80c0;
color: white;}

.hem{background-color: #ffff80;}
#hem2{margin-left: 35px;}
#hem3{margin-right: 20px;}

.appendix{margin-left: 40px;}

.size_tag, .cloth, .name, .official, .neck, .size, .hem, .maker{
font-size: 17px;
font-weight: bold;
padding: 3px 15px 3px 15px;}

.space1, .space0, .space4{clear: both;}
.space2{height: 50px;}
.space3{clear: both;
height: 50px;}

#replisome{width: 33%; height: auto;}

#right{margin-bottom: 2.0em;margin-top: 3.0em;text-align: right;}




#add{
border: 1px solid #999999;
font-size: 13px;
line-height: 1.5em;
margin-bottom: 50px;
margin-top: 50px;
padding: 0px 5px 5px 0px;
text-align: left;
width: 98%;}

#addition{background-color: black;color: white;font-weight: bold;padding: 1px 15px 1px 15px;}

#add2 A:link {color:#000000 ; text-decoration:under-line;}
#add2 A:visited {color:#000000 ;  text-decoration:under-line;}
#add2 A:active {color:#ff0000 ;  text-decoration:under-line;}
#add2 A:hover {color:#00ffff ;  text-decoration:under-line;}

.correct{color: #ff0000;
font-size: 14px;
font-weight: bold;
vertical-align: super;}

.correct A:link {color:#ff0000 ; text-decoration:none ;}
.correct A:visited {color: #ff0000 ; text-decoration:none ;}
.correct A:active {color:#ff0000 ; text-decoration:none ;}
.correct A:hover {color:#00ffff ; text-decoration:none ;}

#top{
background: rgba(204,204,204,0.5);
border: 1px solid #999999;
display: block;
font-weight: bold;
padding: 5px;

height: auto;
position: fixed;
padding: 3px;
bottom: 2%;
right: 1%;
text-align: center;
width: 40%;}

#top A:link {color:#000000 ; text-decoration:none;}
#top A:visited {color:#000000 ;  text-decoration:under-line;}
#top A:active {color:#ff0000 ;  text-decoration:under-line;}
#top A:hover {color:#00ffff ;  text-decoration:under-line;}

#close{
font-size: 20px;
font-weight: bold;
margin-bottom: 5%;
margin-left: 0px;
margin-top: 10%;
text-align: center;}

#close A:link {color:#000000 ;  text-decoration:underline ;display: block;width: 100%;}
#close A:visited {color:#800000 ;  text-decoration:underline ;}
#close A:active {color:#ff0000 ;  text-decoration:none ;}
#close A:hover {color: #ffffff;  background-color: #ff0000;text-decoration:none ;}

A:link {color:#000000 ; text-decoration:underline ;}
A:visited {color:#000000 ; text-decoration:underline ;}
A:active {color:#ff0000 ; text-decoration:none ;}
A:hover {color:#00ffff ; text-decoration:none ;}