@charset "utf-8";

/*共通*/

.button--arrowRight {
  box-sizing: border-box;
}

#monthly {
  width: 900px;
  margin: 0px auto 0 auto;
  padding: 0px;
  font-size:16px;
}
#monthly p {
  line-height: 1.6;
  letter-spacing:0.05em;
  text-indent:1em;
  margin-bottom:0.6em;
}
#monthly p.ketujyo {
  margin-bottom:10px;
  text-align:left;
  text-indent:0;
}
#monthly .midashi{
  width:900px;
}

#monthly table {
  border-collapse:collapse;
}

#monthly br.clear {
  clear: both;}

#monthly .cf:before,
.cf:after {
    content: " ";
    display: table;
}

#monthly .cf:after {
    clear: both;
}

#monthly a {
  text-decoration: underline;
}

#monthly a:hover {
  text-decoration: none;
}


/*各ページ*/


#monthly #racer1{
  position: relative;
  min-height:900px;
  background-image: url(img/new_gi_back1.jpg);
  background-position: bottom 0 right -60px ;
  background-repeat: no-repeat;
}

#monthly #racer1:before{
  content: "";
    display: inline-block;
    width:890px;
    height: 900px;
    background-image: url(img/new_gi_title.png),url(img/new_gi_back0.png);
    /*background-position: top right;*/
    background-position: left 260px top 0px,right 0 top 0;
    background-repeat: no-repeat;
}

#monthly #racer1 .name{
  position: absolute;
  top:100px;
  left:0;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 100px;
  color:#fff;
  text-shadow: -1px -1px 1px #c8308c,1px 1px 1px #c8308c, 0 0 12px #efc6df, 0 0 12px #efc6df;
}

#monthly #racer1 .toban{
  position: absolute;
  top:306px;
  left:30px;
  font-size: 16px;
}

#monthly #racer1 .eiji{
  position: absolute;
  top:200px;
  left:176px;
  font-size: 18px;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-family:serif;
}

#monthly #racer1 .prof-circle{
  position: absolute;
  top:286px;
  left:128px;
  min-height:200px;
  min-width:200px;
  display: flex;
}


#monthly #racer1 .prof-circle-inner{
  position: absolute;
  top:0px;
  left:30px;
  border-radius: 50%;
  background-color: #0092d8;
  width:60px;
  height:60px;
  line-height: 60px;
  text-align: center;
  font-style: italic;
  color: #fff;
  font-family:serif;
}

#monthly #racer1 .prof-circle:before{
  content: "";
  width: 40px;
  height: 1px;
  background-color: #333333;
  display: block;
  margin-top:30px;
}

#monthly #racer1 .prof-circle:after{
  content: "";
  width: 1px;
  height: 218px;
  background-color: #333333;
  display: block;
  margin-top:60px;
  margin-left:20px;
}

#monthly #racer1 .profile-box{
  position: absolute;
  top:410px;
  left:160px;
  width:460px;
  font-size: 12px;
}

#monthly #racer1 .profile-box .kana{
  position: absolute;
  top:0px;
  left:0px;
  background-color: #c8308c;
  color:#fff;
  height:100%;
  line-height: 2em;
  font-size: 14px;
  text-align: center;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  /*border-right: 1px solid #333;*/
}

#monthly #racer1 .profile-box .prof-text1{
  margin-left:36px;
  font-size: 12px;
}

#monthly #racer1 .profile-box .prof-text2{
  margin-left:36px;
  font-size: 12px;
  background: linear-gradient(to right, #fff 90%, transparent 100%);
  margin-top:10px;
  padding-right:40px;
}

#monthly #racer1 .comment-box{
  position: absolute;
  bottom:0px;
  left:0px;
  width:680px;
  padding:10px 0 10px 0;
  font-size: 14px;
}

#monthly #racer1 h4{
  font-size: 24px;
  margin-left: 2px;
  line-height: 1.2em;
  color: #c62986;
  transform: skewX(-10deg);
}

#monthly #racer1 .comment-inner{
  background: rgba(162,52,133, 0.8);
  color:#fff;
  width:100%;
  height:240px;
  padding:10px 0px 10px 20px;
  font-size: 14px;
}

#monthly #racer1 .comment-inner:after{
  content: "";
  display: inline-block;
  width: 100px;
  height: 260px;
  position: absolute;
  bottom:9.9px;
  right:-120px;
  clip-path: polygon(0% 100%, 60% 100%, 10% 0%,0% 0%);
  background: rgba(162,52,133, 0.8);
}

#monthly #racer2-3{
  position: relative;
  min-height:1000px;
  background-image: url(img/new_gi_back2.jpg);
  background-position: top left -50px;
  background-repeat: no-repeat;
  background-size: contain;
  /*border:1px solid red;*/
}



#monthly #racer2{
  position: relative;
  min-height:730px;
  /*background-image: url(img/new_gi_back2.jpg);*/
  background-position: top left -50px;
  background-repeat: no-repeat;
  background-size: contain;
}

#monthly #racer2 .name{
  position: absolute;
  top:20px;
  right:160px;
  font-size: 90px;
  color:#fff;
  text-shadow: -1px -1px 1px #c8308c,1px 1px 1px #c8308c, 0 0 12px #efc6df, 0 0 12px #efc6df;
}

#monthly #racer2 .toban{
  position: absolute;
  top:150px;
  right:430px;
  font-size: 16px;
}

#monthly #racer2 .eiji{
  position: absolute;
  top:50px;
  right:346px;
  font-size: 16px;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-family:serif;
  line-height: 0.8em;
  text-align: right;
}

#monthly #racer2 .prof-circle{
  position: absolute;
  top:130px;
  right:220px;
  min-height:200px;
  min-width:200px;
  display: flex;
}

#monthly #racer2 .prof-circle-inner{
  position: absolute;
  top:0px;
  left:30px;
  border-radius: 50%;
  background-color: #0092d8;
  width:60px;
  height:60px;
  line-height: 60px;
  text-align: center;
  font-style: italic;
  color: #fff;
  font-family:serif;
}

#monthly #racer2 .prof-circle:before{
  content: "";
  width: 40px;
  height: 1px;
  background-color: #333333;
  display: block;
  margin-top:30px;
}

#monthly #racer2 .prof-circle:after{
  content: "";
  width: 60px;
  height: 1px;
  background-color: #333333;
  display: block;
  margin-top:30px;
  margin-left:30px;
}

#monthly #racer2 .profile-box{
  position: absolute;
  top:160px;
  right:0px;
  width:290px;
  font-size: 12px;
  border-left:1px solid #333333;
}

#monthly #racer2 .profile-box .kana{
  position: absolute;
  top:0px;
  left:0px;
  background-color: #c8308c;
  color:#fff;
  width:160px;
  line-height: 2em;
  font-size: 14px;
  text-align: center;
  /*-ms-writing-mode: tb-rl;*/
  /*writing-mode: vertical-rl;*/
  /*border-right: 1px solid #333;*/
}

#monthly #racer2 .profile-box .prof-text1{
  margin-left:10px;
  font-size: 12px;
  margin-top:36px;
}

#monthly #racer2 .profile-box .prof-text2{
  margin-left:10px;
  font-size: 12px;
  background: linear-gradient(to right, #fff 90%, transparent 100%);
  margin-top:10px;
}

#monthly #racer2 .comment-box{
  position: absolute;
  bottom:0px;
  right:6px;
  width:471px;
  padding:10px 20px 10px 0;
  font-size: 14px;
}

#monthly #racer2 h4{
  position: absolute;
  top: 270px;
  right:302px;
  font-size: 22px;
  margin-left: 0px;
  line-height: 1.2em;
  color: #c62986;
  transform: skewX(-10deg);
  text-align: right;
  text-indent:1em;
}

#monthly #racer2 .comment-inner{
  background: rgba(162,52,133, 0.8);
  color:#fff;
  width:100%;
  padding:10px 20px 10px 6px;
  font-size: 14px;
}

#monthly #racer2 .comment-inner:before{
  content: "";
  display: inline-block;
  width: 100px;
  height: 350px;
  position: absolute;
  bottom:9.9px;
  left:-99.5px;
  clip-path: polygon(100% 0%, 40% 100%, 100% 100%,100% 0%);
  background: rgba(162,52,133, 0.8);
}



#monthly #racer3{
  position: relative;
  min-height:570px;
  /*background-image: url(img/new_gi_back2.jpg);*/
  background-position: top left -50px;
  background-repeat: no-repeat;
  background-size: contain;
}

#monthly #racer3 .name{
  position: absolute;
  top:20px;
  left:190px;
  font-size: 90px;
  color:#fff;
  text-shadow: -1px -1px 1px #c8308c,1px 1px 1px #c8308c, 0 0 12px #efc6df, 0 0 12px #efc6df;
}

#monthly #racer3 .toban{
  position: absolute;
  top:150px;
  left:140px;
  font-size: 16px;
  color:#fff;
}

#monthly #racer3 .eiji{
  position: absolute;
  top:60px;
  left:50px;
  font-size: 16px;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-family:serif;
  line-height: 0.8em;
  text-align: right;
  color:#fff;
}

#monthly #racer3 .prof-circle{
  position: absolute;
  top:130px;
  left:0px;
  min-height:200px;
  min-width:200px;
  display: flex;
}

#monthly #racer3 .prof-circle-inner{
  position: absolute;
  top:0px;
  left:30px;
  border-radius: 50%;
  background-color: #0092d8;
  width:60px;
  height:60px;
  line-height: 60px;
  text-align: center;
  font-style: italic;
  color: #fff;
  font-family:serif;
}

#monthly #racer3 .prof-circle:before{
  content: "";
  width: 1px;
  height:156px;
  background-color: #fff;
  display: block;
  margin-top:60px;
  margin-left:60px;
}

#monthly #racer3 .prof-circle:after{
  content: "";
  width: 40px;
  height: 1px;
  background-color: #fff;
  display: block;
  margin-top:30px;
  margin-left:30px;
}

#monthly #racer3 .profile-box{
  position: absolute;
  top:214px;
  left:60px;
  width:292px;
  font-size: 12px;
  border-left:1px solid #fff;
}

#monthly #racer3 .profile-box .kana{
  position: absolute;
  top:0px;
  left:0px;
  background-color: #c8308c;
  color:#fff;
  height:134px;
  line-height: 2em;
  font-size: 14px;
  text-align: center;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  /*border-right: 1px solid #333;*/
}

#monthly #racer3 .profile-box .prof-text1{
  margin-left:36px;
  color:#fff;
}

#monthly #racer3 .profile-box .prof-text2{
  margin-left:36px;
  font-size: 12px;
  margin-top:10px;
  color:#fff;
}

#monthly #racer3 .comment-box{
  position: absolute;
  bottom:0px;
  right:6px;
  width:471px;
  padding:10px 20px 10px 0;
  font-size: 14px;
}

#monthly #racer3 h4{
  position: absolute;
  top: 148px;
  left:410px;
  font-size: 22px;
  margin-left: 0px;
  line-height: 1.2em;
  color: #c62986;
  transform: skewX(-10deg);
}

#monthly #racer3 .comment-inner{
  background: rgba(162,52,133, 0.8);
  color:#fff;
  width:100%;
  padding:10px 20px 10px 6px;
  font-size: 14px;
}

#monthly #racer3 .comment-inner:before{
  content: "";
  display: inline-block;
  width: 100px;
  height: 360px;
  position: absolute;
  bottom:10px;
  left:-99.5px;
  clip-path: polygon(100% 0%, 40% 100%, 100% 100%,100% 0%);
  background: rgba(162,52,133, 0.8);
}

#monthly .comment-inner p:first-child{
  text-indent:0em;
  }