@charset "UTF-8";
@import url("global.css");
/* ------------------------------
 Category-Navi
------------------------------ */
.catnavi {
  padding: 35px 0;
  background-color: #f3f3f3;
  margin-bottom: 60px;
  /* ---------- Arrows ---------- */
}
.catnavi p {
  text-align: center;
  margin-bottom: 15px;
}
.catnavi p::before, .catnavi p::after {
  content: "";
  width: 70px;
  height: 1px;
  background-color: #111;
  display: inline-block;
  margin: 0 15px;
  vertical-align: 6px;
}
.catnavi #catnavi {
  margin: 0 -10px;
}
.catnavi #catnavi li {
  padding: 0 10px;
  box-sizing: border-box;
}
.catnavi #catnavi li a {
  display: block;
  text-align: center;
}
.catnavi #catnavi li a span {
  display: block;
  line-height: 1.3;
}
.catnavi #catnavi li a .icon {
  width: 50px;
  margin: 0 auto 3px;
}
.catnavi #catnavi li .en {
  font-size: 18px;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}
.catnavi #catnavi li .ja {
  font-size: 13px;
}
.catnavi ul.carousel .slick-prev {
  right: -60px;
}
.catnavi ul.carousel .slick-next {
  left: -60px;
}

/* ------------------------------
 Index-page
------------------------------ */
ul.list {
  margin: 0 -25px;
  display: flex;
  flex-wrap: wrap;
}
ul.list li {
  width: 33.33333%;
  box-sizing: border-box;
  padding: 0 25px;
  margin-bottom: 50px;
}
ul.list li a {
  display: block;
  position: relative;
}
ul.list li a figure {
  height: 0;
  padding-top: 66%;
  overflow: hidden;
  z-index: 1;
  position: relative;
}
ul.list li a figure img {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
ul.list li a::before {
  content: "";
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(45deg, #374360, rgba(55, 67, 96, 0) 50%);
  mix-blend-mode: multiply;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
ul.list li a .title {
  position: absolute;
  bottom: 15px;
  left: 20px;
  color: #fff;
  line-height: 1.5;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 3;
}
ul.list li a:hover figure img {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}
ul.list li a:hover::before {
  opacity: 0;
}
ul.list li a:hover .title {
  opacity: 0;
  transform: translateX(-20px);
}

/* ------------------------------
 Entry-page
------------------------------ */
.postpage .posttitle {
  text-align: center;
  margin-bottom: 30px;
  line-height: 1.6;
  font-size: 32px;
  font-weight: 700;
}
.postpage .add {
  text-align: center;
  margin-bottom: 60px;
  line-height: 1.4;
}
.postpage .slidearea {
  margin: 80px 0;
}
.postpage .fotorama__wrap {
  margin: 0 auto;
}
.postpage .fotorama__stage {
  padding-bottom: 40px;
}
.postpage .fotorama__caption__wrap {
  display: block;
  text-align: center;
  background: rgba(255, 255, 255, 0.6);
  padding: 10px 10px;
  font-family: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-size: 14px;
}
.postpage .fotorama__arr {
  position: absolute;
  width: 48px;
  height: 48px;
  top: 50%;
  margin-top: -24px;
  background: none;
}
.postpage .fotorama__arr.fotorama__arr--prev::before, .postpage .fotorama__arr.fotorama__arr--next::before {
  content: "\f054";
  color: #BED1DC;
  width: 48px;
  height: 48px;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1;
  font-size: 48px;
  font-weight: 900;
  font-family: "Font Awesome 5 free";
  text-align: center;
}
.postpage .fotorama__arr.fotorama__arr--prev::before {
  transform: scale(-1, 1);
}
.postpage .dataarea {
  width: 90%;
  margin: 0 auto 120px;
  display: flex;
  justify-content: space-between;
}
.postpage .dataarea .data {
  width: 48%;
}
.postpage .dataarea .data dl {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #111;
}
.postpage .dataarea .data dl:first-of-type {
  border-top: #111 1px solid;
}
.postpage .dataarea .data dl dt {
  width: 6em;
  flex-shrink: 0;
  padding: 15px 20px;
  font-weight: 700;
}
.postpage .dataarea .data dl dd {
  flex-grow: 1;
  padding: 15px 20px;
}
.postpage .commentarea {
  background: #f3f3f3;
  margin: 100px 0 0;
}
.postpage .commentarea .image {
  height: 480px;
}
.postpage .commentarea .wrapper {
  padding-top: 100px;
  padding-bottom: 100px;
  position: relative;
  text-align: center;
}
.postpage .commentarea .wrapper .postbody {
  display: inline-block;
  text-align: justify;
}

/* ------------------------------
 Category-page
------------------------------ */
.catselect {
  padding: 35px 0;
  background-color: #f3f3f3;
  margin-bottom: 60px;
}
.catselect p {
  text-align: center;
  margin-bottom: 12px;
}
.catselect p::before, .catselect p::after {
  content: "";
  width: 70px;
  height: 1px;
  background-color: #111;
  display: inline-block;
  margin: 0 15px;
  vertical-align: 6px;
}
.catselect .placeselect {
  border: #ccc 3px solid;
  border-radius: 2px;
  background-color: #fff;
  padding: 5px 20px 8px;
  font-size: 18px;
  font-family: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  color: #374360;
}

.cattitle {
  margin-bottom: 30px;
  line-height: 1.4;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .1em;
}
.cattitle span {
  display: block;
  font-size: 50px;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: #fff;
  -webkit-text-stroke: 1px #111;
  text-stroke: 1px #111;
  line-height: 1;
}

#grid-box {
  padding: 0 80px 60px;
}

.grid-item_sizer {
  width: 25%;
}

.grid ul li {
  box-sizing: border-box;
  padding: 12px;
  width: 25%;
}
.grid ul li a {
  display: block;
  border-radius: 1px;
  overflow: hidden;
  position: relative;
  color: #fff;
}
.grid ul li a figure {
  z-index: 1;
  position: relative;
}
.grid ul li a figure img {
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.grid ul li a::before {
  content: "";
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(45deg, #374360, rgba(55, 67, 96, 0) 50%);
  mix-blend-mode: multiply;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.grid ul li a .title {
  position: absolute;
  font-size: 14px;
  bottom: 12px;
  left: 15px;
  right: 15px;
  text-align: justify;
  color: #fff;
  line-height: 1.5;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  text-shadow: 0 0 5px #374360;
  z-index: 3;
}
.grid ul li a:hover figure img {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}
.grid ul li a:hover::before {
  opacity: 0;
}
.grid ul li a:hover .title {
  opacity: 0;
  transform: translateX(-20px);
}

ul.photo li {
  opacity: 0;
}

/* ---------- Infinite-Scroll Setting ---------- */
#infscr-loading {
  text-align: center;
  z-index: 100;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 20px 0;
  background: #374360;
  opacity: 0.8;
  color: #fff;
}

.navigation {
  clear: both;
  text-align: center;
  box-sizing: border-box;
}
.navigation a {
  margin-top: 30px;
  color: #fff;
  text-decoration: none;
  position: relative;
  font-weight: bold;
}
.navigation a::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-left: #fff 1px solid;
  border-bottom: #fff 1px solid;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 (1500px)
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1500px) {
  /* ------------------------------
   Category-Navi
  ------------------------------ */
  .catnavi ul.carousel .slick-prev {
    right: -40px;
  }
  .catnavi ul.carousel .slick-next {
    left: -40px;
  }

  /* ------------------------------
   Index-page
  ------------------------------ */
  ul.list {
    margin: 0 -1vw;
  }
  ul.list li {
    padding: 0 1vw;
    margin-bottom: 2vw;
  }

  /* ------------------------------
   Category-page
  ------------------------------ */
  #grid-box {
    padding: 0 20px 60px;
  }

  .grid-item_sizer {
    width: 33.33333%;
  }

  .grid ul li {
    width: 33.33333%;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1.5 (1320px)
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1320px) {
  /* ------------------------------
   Entry-page
  ------------------------------ */
  .postpage .posttitle {
    font-size: 26px;
  }
  .postpage .dataarea {
    width: auto;
  }
  .postpage .commentarea .image {
    height: 400px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  /* ------------------------------
   Category-Navi
  ------------------------------ */
  .catnavi {
    margin-bottom: 50px;
  }
  .catnavi #catnavi {
    margin: 0 -5px;
  }
  .catnavi #catnavi li {
    padding: 0 5px;
  }
  .catnavi #catnavi li .en {
    font-size: 16px;
  }
  .catnavi ul.carousel .slick-prev {
    right: -15px;
  }
  .catnavi ul.carousel .slick-next {
    left: -15px;
  }

  /* ------------------------------
   Index-page
  ------------------------------ */
  ul.list {
    margin: 0 -2vw;
  }
  ul.list li {
    width: 50%;
    padding: 0 2vw;
    margin-bottom: 4vw;
  }
  ul.list li a .title {
    font-size: 15px;
    left: 15px;
    bottom: 10px;
  }
  ul.list li a:hover figure img {
    transform: none;
  }
  ul.list li a:hover::before {
    opacity: 1;
  }
  ul.list li a:hover .title {
    opacity: 1;
    transform: none;
  }

  /* ------------------------------
   Entry-page
  ------------------------------ */
  .postpage .posttitle {
    font-size: 24px;
  }
  .postpage .add {
    margin-bottom: 40px;
  }
  .postpage .slidearea {
    margin: 60px -3vw;
  }
  .postpage .dataarea {
    margin: 0 auto 90px;
    font-size: 14px;
  }
  .postpage .dataarea .data dl dt {
    width: 5em;
    padding: 15px 15px;
  }
  .postpage .dataarea .data dl dd {
    padding: 15px 10px;
  }
  .postpage .commentarea {
    margin: 90px 0 0;
  }
  .postpage .commentarea .image {
    height: 320px;
  }
  .postpage .commentarea .wrapper {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  /* ------------------------------
   Category-page
  ------------------------------ */
  .catselect {
    margin-bottom: 50px;
  }

  .cattitle {
    margin-bottom: 30px;
  }
  .cattitle span {
    font-size: 42px;
  }

  #grid-box {
    padding: 0 20px 60px;
  }

  .grid-item_sizer {
    width: 50%;
  }

  .grid ul li {
    padding: 10px;
    width: 50%;
  }
  .grid ul li a .title {
    font-size: 13px;
    bottom: 10px;
    left: 12px;
    right: 12px;
  }
  .grid ul li a:hover figure img {
    transform: none;
  }
  .grid ul li a:hover::before {
    opacity: 1;
  }
  .grid ul li a:hover .title {
    opacity: 1;
    transform: none;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  /* ------------------------------
   Category-Navi
  ------------------------------ */
  .catnavi {
    padding: 35px 0;
    margin-bottom: 40px;
    /* ---------- Arrows ---------- */
  }
  .catnavi p::before, .catnavi p::after {
    width: 40px;
    margin: 0 10px;
  }
  .catnavi #catnavi {
    margin: 0 0;
  }
  .catnavi #catnavi li {
    padding: 0 4px;
  }
  .catnavi #catnavi li a .icon {
    width: 40px;
  }
  .catnavi #catnavi li .en {
    font-size: 16px;
  }
  .catnavi ul.carousel .slick-prev,
  .catnavi ul.carousel .slick-next {
    top: 50%;
    margin-top: -20px;
  }
  .catnavi ul.carousel .slick-prev {
    right: -20px;
  }
  .catnavi ul.carousel .slick-next {
    left: -20px;
  }

  /* ------------------------------
   Index-page
  ------------------------------ */
  .cattitle {
    font-size: 24px;
    margin-bottom: 20px;
  }

  ul.list li a .title {
    font-size: 12px;
    font-weight: 700;
    bottom: 2vw;
    left: 2vw;
    right: 2vw;
    line-height: 1.3;
  }

  /* ------------------------------
   Entry-page
  ------------------------------ */
  .postpage .posttitle {
    margin-bottom: 30px;
    line-height: 1.5;
    font-size: 18px;
  }
  .postpage .add {
    margin-bottom: 40px;
  }
  .postpage .slidearea {
    margin: 40px -20px;
  }
  .postpage .fotorama__stage {
    padding-bottom: 40px;
  }
  .postpage .fotorama__caption__wrap {
    font-size: 12px;
  }
  .postpage .fotorama__arr {
    width: 40px;
    height: 40px;
    margin-top: -20px;
  }
  .postpage .fotorama__arr.fotorama__arr--prev::before, .postpage .fotorama__arr.fotorama__arr--next::before {
    width: 40px;
    height: 40px;
    font-size: 40px;
  }
  .postpage .dataarea {
    display: block;
    margin: 0 auto 60px;
    font-size: inherit;
  }
  .postpage .dataarea .data {
    width: auto;
  }
  .postpage .dataarea .data dl:first-of-type {
    border-top: #111 1px solid;
  }
  .postpage .dataarea .data dl dt {
    padding: 12px 15px;
  }
  .postpage .dataarea .data dl dd {
    padding: 12px 10px 12px 0;
  }
  .postpage .dataarea .data + .data dl:first-of-type {
    border-top: none;
  }
  .postpage .commentarea {
    margin: 60px 0 0;
  }
  .postpage .commentarea .image {
    height: 0;
    padding-top: 50%;
    position: relative;
  }
  .postpage .commentarea .image img {
    position: absolute;
    top: 0;
    left: 0;
  }
  .postpage .commentarea .wrapper {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  /* ------------------------------
   Category-page
  ------------------------------ */
  .catselect {
    padding: 28px 0 30px;
    margin-bottom: 40px;
  }
  .catselect p::before, .catselect p::after {
    width: 40px;
    margin: 0 10px;
  }
  .catselect .placeselect {
    font-size: 16px;
  }

  .cattitle {
    margin-bottom: 20px;
    font-size: 16px;
  }
  .cattitle span {
    font-size: 36px;
  }

  #grid-box {
    padding: 0 10px;
  }

  .grid-item_sizer {
    width: 50%;
  }

  .grid ul li {
    padding: 2.4vw;
    width: 50%;
  }
  .grid ul li a .title {
    font-size: 12px;
    bottom: 8px;
    left: 10px;
    right: 10px;
  }
}