@charset "UTF-8";
/* common
---------------------------------------------------- */
* {
  margin: 0px;
  padding: 0px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
    Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  -webkit-text-size-adjust: 100%;
  background: url(../images/background.jpg) no-repeat center top / cover;
  background-attachment: fixed;
}

img {
  border: none;
  vertical-align: bottom;
}

/* ClearFIX */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/*-- Main_ID_CSS --*/
#wrapper {
  position: relative;
  margin: auto;
  width: 750px;
}
#wrapper::before,
#wrapper::after {
  content: "";
  position: absolute;
  top: 0px;
  width: 50px;
  height: 100%;
}
#wrapper::before {
  left: -50px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.6), transparent);
}
#wrapper::after {
  right: -50px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.6), transparent);
}
@media all and (width <= 850px) {
  #wrapper::before,
  #wrapper::after {
    content: none;
  }
}
#wrapper h1 {
  position: relative;
  background: url("../images/h1.png") no-repeat center;
  height: 633px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  z-index: 5;
}
#wrapper h1 a {
  display: block;
  height: 340px;
}

.illust img {
  display: block;
  width: 320px;
  height: 243px;
  margin: auto;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 20px;
  text-align: center;
  font-size: 18px;
  color: white;
}

/*-- Body bg_CSS --*/
#contents {
  margin-top: -33px;
  padding: 5px 0 155px;
  background: url("../images/bg_cont_foot.png") no-repeat bottom,
    url("../images/bg_contrep.jpg") repeat-y;
}

/*-- Side_Parts CSS --*/
#profile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  width: 677px;
  height: 325px;
  margin: auto;
  padding: 90px 45px 35px;
  background: url("../images/bg_profile.png") no-repeat;
  color: #a68445;
}
#profile ul {
  width: 300px;
}
#profile ul li {
  background-image: url("../images/icon_prof.png");
  background-repeat: no-repeat;
  background-position: left 6px;
  padding: 4px 0 4px 26px;
  list-style-type: none;
  font-size: 24px;
}
#profile ul li a {
  color: #a68445;
}

#archive {
  width: 669px;
  height: 546px;
  margin: auto;
  background: url("../images/bg_archive.png") no-repeat;
}
#archive h2 {
  height: 40px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
#archive ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 55px;
}
#archive ul li {
  width: 50%;
  margin: 10px 0;
  padding: 4px 0 4px 28px;
  background: url("../images/icon_arch.png") no-repeat left 8px;
  list-style-type: none;
  color: #99438d;
  font-size: 26px;
}
#archive ul li a {
  color: #99438d;
  text-decoration: none;
}

.entry_nextprev01 {
  width: 670px;
  margin: 30px auto;
  text-align: center;
}

.entry_nextprev02 {
  padding: 10px 0px 10px 40px;
  margin: auto;
  text-align: center;
}

.entry_nextprev01 ul,
.entry_nextprev02 ul {
  padding: 0;
  margin: 0;
}
.entry_nextprev01 ul li,
.entry_nextprev02 ul li {
  padding: 0;
  margin: 0;
  list-style-type: none;
  float: left;
}
.entry_nextprev01 ul li.entry_btn01,
.entry_nextprev01 ul li.entry_btn01,
.entry_nextprev02 ul li.entry_btn01,
.entry_nextprev02 ul li.entry_btn01 {
  width: 236px;
}
.entry_nextprev01 ul li.entry_btn02,
.entry_nextprev01 ul li.entry_btn02,
.entry_nextprev02 ul li.entry_btn02,
.entry_nextprev02 ul li.entry_btn02 {
  width: 171px;
  margin: 0 18px;
}
.entry_nextprev01 ul li.entry_btn03,
.entry_nextprev01 ul li.entry_btn03,
.entry_nextprev02 ul li.entry_btn03,
.entry_nextprev02 ul li.entry_btn03 {
  width: 227px;
}

.entry_archive {
  width: 670px;
  margin: 30px auto;
  text-align: center;
}

#pickup {
  width: 669px;
  height: 729px;
  margin: auto;
  background: url("../images/bg_pickup.png") no-repeat;
}
#pickup h2 {
  height: 40px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
#pickup ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 580px;
  margin: auto;
  padding: 55px 0;
}
#pickup ul li {
  padding: 15px;
  list-style-type: none;
}
#pickup ul li a img {
  width: 260px;
  height: 260px;
  border: 8px #fff solid;
}

/*-- entry_CSS --*/
.entry {
  width: 674px;
  margin: 20px auto;
  padding-bottom: 30px;
  background: url("../images/bg_entry_foot2.png") no-repeat center bottom;
}
.entry h3 {
  background: url("../images/bg_entry_h.png") no-repeat center top;
  font-size: 28px;
  height: 108px;
  padding-top: 40px;
  padding-left: 158px;
  color: #2b6f2e;
}
.entry .entry_base {
  background: url("../images/bg_entry_base_2.png") repeat-y center;
}
.entry .entry_body {
  background: url("../images/bg_entry_base_1.png") no-repeat center top;
  margin: 0;
  padding: 0 55px 30px 65px;
  color: #493b24;
  font-size: 24px;
  line-height: 1.4;
}
.entry .entry_body p,
.entry .entry_body span {
  font-size: 24px !important;
}
.entry .entry_body img {
  width: 100%;
  height: auto;
}
.entry .entry_date {
  text-align: right;
  font-size: 20px;
}
.entry .entry_foot {
  background: url("../images/bg_entry_foot.png") no-repeat center;
  height: 70px;
  padding: 16px 45px 0;
  text-align: right;
  color: #3e8240;
  font-size: 20px;
  font-weight: 600;
}
.entry .comment {
  position: relative;
  width: 594px;
  margin: auto;
  padding: 26px 0;
  color: #493b24;
}
.entry .comment::before,
.entry .comment::after {
  content: "";
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 26px;
}
.entry .comment::before {
  top: 0;
  background: url("../images/bg_comment_head.png") no-repeat;
}
.entry .comment::after {
  bottom: 0;
  background: url("../images/bg_comment_foot.png") no-repeat;
}
.entry .comment_bg {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-rows: 50px auto;
  grid-column-gap: 20px;
  padding: 10px 25px;
  background: url("../images/bg_comment_body.png") repeat-y;
}
.entry .comment_icon {
  grid-column: 1/2;
  grid-row: 1/3;
  width: 120px;
}
.entry .comment_icon img {
  border: solid 4px #a7dfa6;
  border-radius: 4px;
}
.entry .comment_layout {
  padding: 20px 0 10px 0;
}
.entry .comment_head {
  grid-column: 2/3;
  grid-row: 1/2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-right: 10px;
  background: url("../images/bg_comment_line.png") no-repeat left bottom;
}
.entry .comment_body {
  grid-column: 2/3;
  grid-row: 2/3;
  padding: 5px 0 0 0;
  line-height: 1.3;
  font-size: 24px;
}
.entry .com_name {
  line-height: 1;
  font-size: 26px;
}
.entry .com_date {
  line-height: 26px;
  font-size: 20px;
}

.category {
  padding-top: 30px;
}
.category li {
  margin-top: 10px;
  padding-left: 30px;
  background: url("../images/icon_categ.png") no-repeat left 5px;
  list-style: none;
  font-size: 24px;
}
.category li a {
  color: #2b6f2e;
  text-decoration: none;
}
.category li a:hover {
  color: #2b6f2e;
  text-decoration: underline;
}

.pagetop {
  position: fixed;
  right: 5px;
  bottom: -217px;
  -webkit-transition: bottom 0.5s cubic-bezier(0.52, -0.74, 0.4, 1.89);
  transition: bottom 0.5s cubic-bezier(0.52, -0.74, 0.4, 1.89);
  z-index: 10;
  cursor: pointer;
}
.pagetop.show {
  bottom: 30px;
}