@charset "utf-8";

#banar{margin:0; text-align:right;}
#banar img{}

p.image{margin-top:80px;}
p.howto{margin-top:0;}

/*リード文*/
p.read{background-color:#EEEEEE; color:#422213;}

h3.takano{border-left:4px solid #333333; padding-left:2px;}

div.takano{margin-bottom:30px;}
div.takanoP{float:left;}
div.takanoP_r{float:right;}
div.takanoT{float:right; width:67%;}

div.gel{border:2px solid #EBD58F; padding:8px; color:#846917; font-weight:bold; margin-bottom:60px;}

div.gel p{float:left; padding:0 2px;}


@media screen and (max-width:1080px) {
#Details div.takano img{width:auto;}

div.takanoT{width:65%;}
div.gel p{float:left; width:64%;}
div.gel p.ph{width:30%;}
div.gel p.ph img{width:100%;}
}

@media screen and (max-width:980px) {
div.takanoT{width:60%;}

}

@media screen and (max-width:880px) {
div.takanoT{width:67%;}
}

@media screen and (max-width:790px) {
div.takanoT{width:62%;}
}

@media screen and (max-width:700px) {
div.takanoT{width:57%;}
}

@media screen and (max-width:660px) {
h3 span{display:block;}
div.takanoP, div.takanoP_r{float:none; width:100%; text-align:center;}
div.takanoT{width:auto;}


}

@media screen and (max-width:600px) {
div.additem p span{display:block;}
div.takano img{float:none; display:block; margin:0 auto;}

div.comment{padding-bottom:60px;}

}

@media screen and (max-width:580px) {
select.dropdown{font-size:0.8em; padding:4px 2px;}
}


.grad-wrap {
  position: relative;
}

.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}

@media screen and (max-width:600px) {
/**************************/
/*続きを読む*/

.grad-btn {
  z-index: 2;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 16rem;
  margin: auto;
  padding: .5em 0;
  border-radius: 2px;
  background: #009e8f;
  color: #fff;
  font-size:0.8rem;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
border-radius: 20px;
background-color: rgba(27, 37, 56, 1);
}


.grad-btn::after {
  content: "続きを読む"
}

.grad-item {
  position: relative;
  overflow: hidden;
  height:100px;
}
.grad-item p + p {
  margin-top: 1em;
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 60px; /*グラデーションで隠す範囲*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
}


.grad-trigger:checked ~ .grad-btn {
  bottom: -3em;
}
.grad-trigger:checked ~ .grad-btn::after {
  content: "閉じる"
}
.grad-trigger:checked ~ .grad-btn .fa {
  transform: rotate(180deg);
}
.grad-trigger:checked ~ .grad-item {
  height: auto;
}
.grad-trigger:checked ~ .grad-item::before {
  display: none;
}
}