/* INTRODUCTION */
#introduction{
  margin-top:55px;
}
#introduction > div{
  display: flex;
  justify-content: space-between;
  -js-display: flex;
  display: -ms-flexbox;
  -ms-flex-pack:justify;
  line-height:1.75;
}
#introduction #detail{
  width:calc(94% - 280px);
  max-width:800px;
  font-size:18px;
}

#introduction ul.sns{
  margin-top:25px;
}


#detail p + p{
  margin-top:1em;
}

#detail div#data{
  padding:25px 0;
  border:1px solid #eee;
  margin-top:25px;
}

#data dl{
  line-height:1.4;
  margin-left:25px;
  margin-right:25px;
}
#data dl dt{
  padding-top:.75em;
  font-weight: 700;

}

#data dl dd span.free{
  display: inline-block;
  margin-left:.5em;
  margin-right:.5em;
  font-size:14px;
  line-height:1;
  background-color: #f0037f;
  color:#fff;
  padding:6px 0.75em;
}

a.question{
  position: relative;
  height:100%;
  }
a.question img{
  position: absolute;
  top: calc(50% - 11px);
  transition:all 0.2s ease 0s;
}

a:hover.question img{
  opacity: 0.5;
}

#data dl + a{
  margin-top:25px;
}


#introduction aside#profile{
  max-width:280px;
}

#profile > dl > dt{
  font-size:24px;
  font-weight:700;
  text-align: center;
  line-height: 1.25;
}

#profile > dl > dd:nth-child(2){
  text-align: center;
  line-height: 1.25;
}

#profile > dl > dd:nth-child(3){
  margin-top:35px;
}

#profile > dl > dd:nth-child(4){
  margin-top:20px;
}

#profile dl dl{
  padding:.75em 0 0;
  border-top:1px dotted #222;
  font-size:16px;
  line-height:1.75;
}

#profile dl dl dt{
  margin-top:.5em;
  line-height:1;
}

#profile .profile-contact {
    margin-top: 20px;
}

/* TAB */
#tab {
  margin-top:40px;
  background-color: #f4f4f4;
  height:90px;
  border-bottom:1px solid #ddd;
  position:relative;
}

#tab ul{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  margin:0 auto;
  display:flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  -js-display: flex;
  display: -ms-flexbox;
  -ms-flex-direction: row-reverse;
  -ms-flex-pack:justify;
}

#tab ul li{
  width:calc(50% - 5px);
  height:60px;
  background-color: #ddd;
  border-bottom:3px solid transparent;
  border-radius: 5px 5px 0 0;
  box-sizing: border-box;
  text-align: center;
  font-size:18px;
  font-weight: 700;
  line-height: 60px;
  cursor: pointer;
  color: #222;
  transition: all .3s 0s ease;
  box-sizing: border-box;
}

#tab ul li:hover{
    height:70px;
    margin-top:-10px;
}

#tab ul li.active{
  background-color: #fff;
  border-bottom:4px solid #fff;
  border-top:1px solid #ddd;
  border-left:1px solid #ddd;
  border-right:1px solid #ddd;
  color:#f0037f;
}

#tab ul li a{
  display: block;
}

/* 切り替え処理 */
#switch{
  overflow: hidden;
  display: block;
  margin: 0;
  padding:0;
}

#switch > *{
  box-sizing: border-box!important;
  display:block;
}

/* BACKNUMBER */

#backnumber footer{
  margin-top:20px;
  background-color: #fff;
}

#backnumber footer .button{
  font-size:18px;
  min-width:300px;
}

/* SAMPLE */
#sample{
  font-size:18px;
}

#sample article{
  margin-top:40px;
  border:1px solid #ddd;
  margin-bottom:20px;
}

#sample article pre{
  white-space: pre-wrap;
  display: block;
  float: none;
  margin-top: 2em;
  margin-left: calc(50% - 18em);
  margin-right: calc(50% - 16.5em);
  line-height: 1.65;
}

/* for mobile devices -767px ----------------------------------------*/

@media screen and (max-width:767px){

  #main-title h1{
    margin-top:15px;
  }

  /* INTRODUCTION */
  #introduction{
    margin-top:20px;
  }
  #introduction > div.narrow{
    width:100%;
    flex-direction: column;
    -ms-flex-direction: column;
  }

  #introduction #detail{
    width:100%;
    font-size:16px;
  }

  #introduction #detail > p{
    padding-left:4%;
    padding-right:4%;
    box-sizing: border-box;
  }

  #detail div#data{
    margin-left:4%;
    margin-right:4%;
    font-size: 16px;
    margin-top:20px;
    border:none;
  }

  #data dl{
    margin-left:0;
    margin-right:0;
  }

  #introduction aside#profile{
    max-width: 100%;
    margin-top:20px;
    padding:40px 4% 20px;
    box-sizing: border-box;
    background-color: #f4f4f4;
  }

  aside#profile img.mobile-only{ /* writer photo for mobile only */
    display: block;
    margin:0 auto;
    width:180px;
    height:180px;
    border-radius: 50%;
    background-color: #fff;
  }

  #profile > dl{
    margin-top:15px;
  }

  #profile > dl > dt{
    font-size:22px;
  }


  #profile > dl > dd:nth-child(3){
    margin-top:20px;
  }

  #profile > dl > dd:nth-child(4){
    margin-top:20px;
  }

  #profile dl dl dt{
    float:left;
    clear:left;
    margin-top:0;
    line-height:1.75;
    font-weight: 400;
  }
  #profile dl dl dt:after{
    content:":";
    margin-left:.25em;
    margin-right:.25em;
  }

  #profile dl dl dd{
      text-align: left;
  }

  /* TAB */
  #tab {
    margin-top:25px;
    padding-top:10px;
  }

  #tab ul li{
    width:calc(50% - 2px);
    font-size: 16px;

  }

  #tab ul li:hover{
      height:65px;
      margin-top:-5px;
  }

  /* SAMPLE */
  #sample{
    font-size:16px;
  }

  #sample article{
    border: none;
    margin-top:20px;
    margin-bottom:20px;
  }

  #sample article pre{
    padding-top:20px;
    white-space: pre-wrap;
    margin:0 auto;
  }

}

/* for mobile devices -500px -----------------------------------------*/

@media screen and (max-width:500px){
  #detail table{
      border:none;
      margin-left:0;
      margin-right:0;
  }
  #detail table th{
      border-top:2px solid #222;
      font-weight:700;
  }
  #detail table th,
  #detail table td{
    display:block;
    box-sizing: border-box;
    border-right: none;
    width:100%!important;
  }
    #detail table td{
    padding-bottom:1em;
  }
  #tab {
    margin-top:0;
    height:65px;
  }
}