@charset "UTF-8";

#section01 {
}
#section01 .inner01 > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
#section01 .inner01 > ul li { 
  width: 23%;
  margin: 0 2.6666% 5% 0;
}
#section01 .inner01 > ul li:nth-child(4n) { 
  margin-right: 0;
}
#section01 .inner01 > ul li a {
  display: block;
  text-align: center;
}
#section01 .inner01 > ul li a .img { 
  padding-top: 26em;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  transition: 0.7s;
}
#section01 .inner01 > ul li a .txtWrap01 { 
}
#section01 .inner01 > ul li a .txtWrap01 .ttl01 { 
  font-size: 87.5%;
  line-height: 1.5;
  margin-top: 1em;
}

/* --------------------------------------------------------------------------------- 詳細ページ */
#ContentsWrap.single .ContentsWrapInner #section01 .inner01 {
  position: relative;
}
#ContentsWrap.single .ContentsWrapInner #section01 .inner01 .left {
  width: 65%;
  position: relative;
}
#ContentsWrap.single.sp_design .ContentsWrapInner #section01 .inner01 .left a .img01 {
  max-width: 500px;
  margin: 0 auto;
}
#ContentsWrap.single .ContentsWrapInner #section01 .inner01 .right {
  width: 30%;
  position: -webkit-sticky;
  position: sticky;
  top: 5em;
}
#ContentsWrap.single .ContentsWrapInner #section01 .inner01 .right .ttlWrap01 {
  margin-bottom: 1em;
}
#ContentsWrap.single .ContentsWrapInner #section01 .inner01 .right .ttlWrap01 .tagWrap01 {
  line-height: 1;
  margin-bottom: 1em;
}
#ContentsWrap.single .ContentsWrapInner #section01 .inner01 .right .ttlWrap01 .tagWrap01 .cat03,
#ContentsWrap.single .ContentsWrapInner #section01 .inner01 .right .ttlWrap01 .tagWrap01 .cat02,
#ContentsWrap.single .ContentsWrapInner #section01 .inner01 .right .ttlWrap01 .tagWrap01 .cat01 {
  display: inline-block;
  color: #fff;
  font-size: 68.25%;
  line-height: 2;
  letter-spacing: 0;
  padding: 0 1em;
  margin-right: 0.25em;
  background: #444;
}
#ContentsWrap.single .ContentsWrapInner #section01 .inner01 .right .ttlWrap01 .tagWrap01 .cat01 {
}
#ContentsWrap.single .ContentsWrapInner #section01 .inner01 .right .ttlWrap01 .tagWrap01 .cat02 {
}
#ContentsWrap.single .ContentsWrapInner #section01 .inner01 .right .ttlWrap01 .tagWrap01 .cat03 {
}
#ContentsWrap.single .ContentsWrapInner #section01 .inner01 .right .ttlWrap01 .ttl01 {
  color: #333;
  font-size: 137.5%;
  line-height: 1.5;
  padding-bottom: 0.5em;
  border-bottom: 1px solid #333;
  position: relative;
}
#ContentsWrap.single .ContentsWrapInner #section01 .inner01 .right .ttlWrap01 .ttl01:after {
  display: block;
  content: '';
  width: 3em;
  height: 3px;
  background: #333;
  position: absolute;
  top: 100%;
  left: 0;
}
#ContentsWrap.single .ContentsWrapInner #section01 .inner01 .right .link01 {
  display: block;
  color: #666;
  font-size: 87.5%;
  text-decoration: underline;
  margin-bottom: 1em;
}
#ContentsWrap.single .ContentsWrapInner #section01 .inner01 .right .txtWrap01 {
}
#ContentsWrap.single .ContentsWrapInner #section01 .inner01 .right .txtWrap01 .txt01 {
  font-size: 87.5%;
  line-height: 1.5;
}

@media only screen and (max-width: 1400px) { /* ------------------------------------------------------- max 1400px */
}
@media only screen and (max-width: 1200px) { /* ------------------------------------------------------- max 1200px */
  #ContentsWrap.single .ContentsWrapInner #section01 .inner01 .right {
    top: 11em;
  }
}
@media only screen and (max-width: 900px) { /* ------------------------------------------------------- max 900px */
}

@media only screen and (min-width: 768px) { /* ------------------------------------------------------- min 768px */
  #section01 .inner01 > ul > li a:hover .img { 
  }
  /* --------------------------------------------------------------------------------- 詳細ページ */
  #ContentsWrap.single .ContentsWrapInner #section01 .inner01 .left ul li a:hover {
    opacity: 0.7;
    transition: 0.4s;
  }
}
@media only screen and (max-width: 767px) { /* ------------------------------------------------------- max 767px */
  #section01 .inner01 > ul li { 
    width: 48%;
    margin: 0 4% 8% 0 !important;
  }
  #section01 .inner01 > ul li:nth-child(2n) { 
    margin-right: 0 !important;
  }
  /* --------------------------------------------------------------------------------- 詳細ページ */
  #ContentsWrap.single .ContentsWrapInner #section01 .inner01 .left,
  #ContentsWrap.single .ContentsWrapInner #section01 .inner01 .right {
    width: 100%;
    position: static;
    float: none;
  }
  #ContentsWrap.single .ContentsWrapInner #section01 .inner01 .right {
    margin-bottom: 2em;
  }

}

@media (orientation: landscape) and (max-width: 767px){/* ------------------------------------------- landscape */
}