@charset "UTF-8";
@import url("global.css");
/* ---------- Category-List ---------- */
#categorynavi {
  margin-bottom: 100px;
}
#categorynavi ul.shopnavi {
  width: fit-content;
  margin: 0 auto;
  background-color: #E5DED3;
  padding: 10px 50px;
  -webkit-border-radius: 99px;
  border-radius: 99px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
#categorynavi ul.shopnavi li {
  letter-spacing: -.4em;
  overflow: hidden;
}
#categorynavi ul.shopnavi li + li::before {
  content: "/";
  display: inline-block;
  margin: 0 10px;
  color: #A49375;
}
#categorynavi ul.shopnavi li a {
  display: inline-block;
  letter-spacing: 1px;
  padding: 5px 10px;
  font-weight: 500;
  text-decoration-color: rgba(164, 147, 117, 0.6);
  text-decoration-line: underline;
  text-decoration-thickness: 6px;
  text-underline-offset: 16px;
}
@media (any-hover: hover) {
  #categorynavi ul.shopnavi li a:hover {
    text-underline-offset: -2px;
  }
}
.cat-all #categorynavi ul.shopnavi li.all a, .cat-satsumasendai #categorynavi ul.shopnavi li.satsumasendai a, .cat-izumi #categorynavi ul.shopnavi li.izumi a, .cat-yatsushiro #categorynavi ul.shopnavi li.yatsushiro a {
  cursor: default;
  text-underline-offset: -2px;
}

.selectarea {
  margin-block: 30px 0;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  justify-content: center;
  display: flex;
  align-items: center;
  border-top: #777 1px solid;
  border-bottom: #777 1px solid;
  padding-block: 30px;
  gap: min(60px,4.5vw);
}
.selectarea dl {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: min(20px,1.5vw);
}
.selectarea dl dt {
  font-family: "Outfit", "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;
}
.selectarea dl dd {
  position: relative;
}
.selectarea dl dd::after {
  content: "\f078";
  font-family: 'Font Awesome 6 free','Font Awesome 6 Brands';
  font-weight: 900;
  position: absolute;
  right: 10px;
  top: 50%;
  pointer-events: none;
  transform: translateY(-50%);
  font-size: 85%;
  color: #5A5657;
}
.selectarea dl dd form select {
  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;
  background-color: #F5F3F0;
  border-radius: 2px;
  padding: 12px 35px 12px 12px;
  vertical-align: middle;
  box-shadow: none;
  letter-spacing: 1px;
  -webkit-appearance: none;
  appearance: none;
}

/* ---------- Index-Page ---------- */
.list {
  --gap: 25px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(-1 * var(--gap)) 120px;
  row-gap: 70px;
}
.list li {
  width: 25%;
  box-sizing: border-box;
  padding-inline: var(--gap);
  container-type: inline-size;
}
.list li a {
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media (any-hover: hover) {
  .list li a:hover .image::before {
    opacity: .6;
  }
  .list li a:hover .image::after {
    opacity: 1;
    translate: 0 -20px;
  }
  .list li a:hover .image img {
    filter: blur(3px);
  }
}
.list li .image {
  position: relative;
  height: auto;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 8px;
}
.list li .image img {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.list li .image::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(48, 48, 48, 0.5);
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
}
.list li .image::after {
  content: "記事を読む";
  font-size: .85em;
  font-weight: 500;
  position: absolute;
  z-index: 2;
  top: 50%;
  translate: 0;
  left: 3vw;
  right: 3vw;
  margin: 0 auto;
  width: fit-content;
  padding: 3px 15px;
  border: #FFF solid 1px;
  color: #FFF;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
}
.list li .data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -14px 5px 15px 10px;
  position: relative;
  z-index: 1;
}
.list li .data .office {
  background-color: #fff;
  border: #C9C9CB 1px solid;
  width: 120px;
  border-radius: 5px;
  text-align: center;
  padding-block: 5px;
  font-size: 13px;
  font-weight: 500;
}
.list li .data .author {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.list li .data .author .name {
  font-size: 12px;
  font-weight: 500;
}
.list li .data .author .photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}
.list li .title {
  line-height: 1.5;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 500;
}
.list li .sub {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 12px;
  font-weight: 500;
}
.list li .sub .tags {
  color: #A49375;
}
.list li .sub .tags span {
  display: inline-block;
  margin-right: 8px;
  letter-spacing: 0;
}
.list li .sub .tags span::before {
  content: "#";
  padding-right: 2px;
}
.list li .sub .date {
  font-family: "Outfit", "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: #C9C9CB;
}
@container (width <= 300px) {
  .list li .data .office {
    width: 90px;
  }
}
@container (width <= 250px) {
  .list li .data {
    margin: -10px 0 10px;
  }
  .list li .data .office {
    width: 70px;
    padding-block: 3px;
    font-size: 11px;
  }
  .list li .data .author .name {
    font-size: 11px;
  }
  .list li .data .author .photo {
    width: 30px;
    height: 30px;
  }
  .list li .title {
    margin-bottom: 12px;
    font-size: 14px;
  }
  .list li .sub {
    font-size: 11px;
  }
}
@container (width <= 200px) {
  .list li .sub {
    display: block;
    line-height: 1.5;
  }
  .list li .sub .date {
    text-align: right;
  }
}
.cattitle {
  text-align: center;
  margin-block: -20px 80px;
  font-size: clamp(18px, 3.5vw, 36px);
  font-weight: 500;
  text-decoration-color: #A49375;
  text-decoration-line: underline;
  text-decoration-thickness: 7px;
  text-underline-offset: -1px;
  text-decoration-skip-ink: none;
}

/* ---------- Entry-Page ---------- */
.post .post-title {
  margin-bottom: 100px;
  line-height: 1.5;
}
.post .post-title .data {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}
.post .post-title .data .office a {
  display: block;
  background-color: #fff;
  border: #C9C9CB 1px solid;
  box-sizing: border-box;
  width: 120px;
  border-radius: 5px;
  text-align: center;
  padding-block: 7px;
  font-size: 13px;
  font-weight: 500;
}
.post .post-title .data .author a {
  display: flex;
  align-items: center;
  gap: 10px;
}
.post .post-title .data .author a .name {
  font-size: 12px;
  font-weight: 500;
}
.post .post-title .data .author a .photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}
.post .post-title .title {
  font-size: clamp(17px, 3.5vw, 32px);
  font-weight: 700;
  margin-bottom: 30px;
}
.post .post-title .sub {
  display: flex;
  gap: 30px;
}
.post .post-title .sub .date {
  display: block;
  font-family: "Outfit", "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: #C9C9CB;
}
.post .post-title .sub ul.cat {
  display: flex;
  gap: 5px 10px;
}
.post .post-title .sub ul.cat li a {
  color: #A49375;
  display: block;
}
.post .post-title .sub ul.cat li a::before {
  content: "#";
  margin-right: 2px;
}
.post #postbody {
  font-weight: 500;
}
.post #authorarea {
  margin-top: 90px;
  padding-block: 40px;
  padding-inline: min(60px,5vw) 20px;
  display: flex;
  align-items: center;
  gap: 40px;
  border-top: #777 1px solid;
  border-bottom: #777 1px solid;
}
.post #authorarea .auth_main .title {
  font-size: 24px;
  font-weight: 500;
  font-family: "Outfit", "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;
  margin-bottom: 50px;
}
.post #authorarea .auth_main .title::before {
  content: "";
  width: 5px;
  height: 5px;
  background-color: #E6001A;
  display: inline-block;
  margin-right: 10px;
  vertical-align: 5px;
}
.post #authorarea .auth_main .author {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 50px;
}
.post #authorarea .auth_main .author .photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
}
.post #authorarea .auth_main .author .data .office {
  border: #C9C9CB 1px solid;
  box-sizing: border-box;
  width: 120px;
  border-radius: 5px;
  text-align: center;
  padding-block: 5px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 500;
}
.post #authorarea .auth_main .author .data .name {
  padding-left: 5px;
  font-size: 22px;
  font-weight: 500;
}
.post #authorarea .auth_main .link a {
  display: block;
  margin: 0 auto;
  background-color: #E3E3E3;
  padding: 15px 50px 15px 20px;
  max-width: 180px;
  box-sizing: border-box;
  border-radius: 99px;
  font-size: .825em;
  line-height: 1;
  font-weight: 500;
  position: relative;
}
@media (any-hover: hover) {
  .post #authorarea .auth_main .link a:hover {
    transform: translateY(3px);
  }
}
.post #authorarea .auth_main .link a::after {
  content: "\f061";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 1px;
  line-height: 1;
  font-family: 'Font Awesome 6 free','Font Awesome 6 Brands';
  font-weight: 900;
  font-size: 1em;
}
.post #authorarea .author_posts {
  flex-grow: 1;
  justify-content: center;
  display: flex;
  gap: min(60px,4vw);
}
.post #authorarea .author_posts li {
  max-width: 260px;
  flex: 1;
}
.post #authorarea .author_posts li a {
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media (any-hover: hover) {
  .post #authorarea .author_posts li a:hover .image::before {
    opacity: .6;
  }
  .post #authorarea .author_posts li a:hover .image::after {
    opacity: 1;
    translate: 0 -20px;
  }
  .post #authorarea .author_posts li a:hover .image img {
    filter: blur(3px);
  }
}
.post #authorarea .author_posts li .image {
  position: relative;
  height: auto;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 5px;
}
.post #authorarea .author_posts li .image img {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.post #authorarea .author_posts li .image::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(48, 48, 48, 0.5);
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
}
.post #authorarea .author_posts li .image::after {
  content: "記事を読む";
  font-size: .85em;
  font-weight: 500;
  position: absolute;
  z-index: 2;
  top: 50%;
  translate: 0;
  left: 3vw;
  right: 3vw;
  margin: 0 auto;
  width: fit-content;
  padding: 3px 15px;
  border: #FFF solid 1px;
  color: #FFF;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
}
.post #authorarea .author_posts li .title {
  line-height: 1.5;
  margin-block: 15px 10px;
  font-size: 14px;
  font-weight: 500;
}
.post #authorarea .author_posts li .sub {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 12px;
  font-weight: 500;
}
.post #authorarea .author_posts li .sub .tags {
  color: #A49375;
}
.post #authorarea .author_posts li .sub .tags span {
  display: inline-block;
  margin-right: 8px;
  letter-spacing: 0;
}
.post #authorarea .author_posts li .sub .tags span::before {
  content: "#";
  padding-right: 2px;
}
.post #authorarea .author_posts li .sub .date {
  font-family: "Outfit", "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: #C9C9CB;
}

#cat_posts {
  background-color: #F5F3F0;
  padding-block: 80px;
  margin-top: 100px;
}
#cat_posts .h {
  text-align: center;
  margin-bottom: 60px;
  font-size: clamp(18px, 4vw, 22px);
  font-weight: 500;
}
#cat_posts .list {
  --gap: 25px;
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(-1 * var(--gap));
  margin-block: 0;
}
#cat_posts .list li {
  width: 33.3333333333%;
}

.pageback {
  text-align: center;
}

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

 Responsive-Breakpoint-1 ( 1600px )
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  #categorynavi ul.shopnavi {
    padding: 8px 45px;
  }

  /* ---------- Index-Page ---------- */
  .list {
    --gap: 1.8vw;
  }
  .list li {
    width: 33.3333333333%;
  }

  /* ---------- Entry-Page ---------- */
  .post #authorarea {
    padding-inline: 20px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  #categorynavi {
    margin-bottom: 60px;
  }
  #categorynavi ul.shopnavi {
    padding: 8px 40px;
  }
  #categorynavi ul.shopnavi li + li::before {
    margin: 0 8px;
  }

  .selectarea {
    padding-block: 25px 30px;
  }
  .selectarea dl {
    display: block;
  }
  .selectarea dl dt {
    font-size: 16px;
    margin-bottom: 3px;
  }

  /* ---------- Index-Page ---------- */
  .list {
    --gap: 2vw;
  }
  .list li {
    width: 50%;
  }

  .cattitle {
    margin-block: -60px 60px;
    text-decoration-thickness: 5px;
  }

  /* ---------- Entry-Page ---------- */
  .post .post-title {
    margin-bottom: 70px;
  }
  .post #authorarea {
    margin-top: 80px;
    padding-block: 40px;
    padding-inline: 10px;
  }
  .post #authorarea .auth_main {
    flex-grow: 1;
  }
  .post #authorarea .auth_main .title {
    margin-bottom: 40px;
  }
  .post #authorarea .auth_main .author {
    display: block;
    text-align: center;
    margin-bottom: 30px;
  }
  .post #authorarea .auth_main .author .photo {
    margin: 0 auto 10px;
  }
  .post #authorarea .auth_main .author .data .office {
    margin-inline: auto;
  }
  .post #authorarea .auth_main .author .data .name {
    padding-left: 0;
    font-size: 2.4vw;
  }

  #cat_posts {
    padding-block: 60px;
    margin-top: 80px;
  }
  #cat_posts .h {
    margin-bottom: 40px;
  }
  #cat_posts .list {
    --gap: 2vw;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  /* ---------- Category-List ---------- */
  #categorynavi {
    margin-bottom: 45px;
  }
  #categorynavi ul.shopnavi {
    padding: 7px 35px;
  }
  #categorynavi ul.shopnavi li + li::before {
    margin: 0 5px;
  }
  #categorynavi ul.shopnavi li + li:nth-child(2)::before {
    display: none;
  }
  #categorynavi ul.shopnavi li:first-child {
    width: 100%;
    text-align: center;
  }
  #categorynavi ul.shopnavi li a {
    letter-spacing: 0;
    padding: 3px 6px;
    text-decoration-thickness: 4px;
    text-underline-offset: 14px;
  }
}
@media only screen and (max-width: 644px) and (any-hover: hover) {
  #categorynavi ul.shopnavi li a:hover {
    text-underline-offset: 0px;
  }
}
@media only screen and (max-width: 644px) {
  .cat-all #categorynavi ul.shopnavi li.all a, .cat-satsumasendai #categorynavi ul.shopnavi li.satsumasendai a, .cat-izumi #categorynavi ul.shopnavi li.izumi a, .cat-yatsushiro #categorynavi ul.shopnavi li.yatsushiro a {
    text-underline-offset: 0px;
  }

  .selectarea {
    display: block;
    padding-block: 20px;
  }
  .selectarea dl {
    display: flex;
    justify-content: flex-start;
    gap: 0;
    margin-block: 8px;
    padding-right: 10px;
  }
  .selectarea dl dt {
    box-sizing: border-box;
    text-align: right;
    flex-shrink: 0;
    width: 110px;
    margin-bottom: 0;
    padding-right: 15px;
  }
  .selectarea dl dd {
    width: 100%;
  }
  .selectarea dl dd form select {
    width: 100%;
  }

  /* ---------- Index-Page ---------- */
  .list {
    display: block;
    margin-bottom: 80px;
  }
  .list li {
    width: auto;
    margin-bottom: 50px;
  }

  .cattitle {
    margin-block: -20px 40px;
    text-decoration-thickness: 5px;
    text-underline-offset: 0;
  }

  /* ---------- single ---------- */
  .post .post-title {
    margin-bottom: 50px;
  }
  .post .post-title .data {
    margin-bottom: 20px;
  }
  .post .post-title .data .office a {
    width: 100px;
    padding-block: 5px;
  }
  .post .post-title .data .author a {
    gap: 8px;
  }
  .post .post-title .title {
    margin-bottom: 20px;
  }
  .post .post-title .sub {
    gap: 20px;
  }
  .post .post-title .sub ul.cat {
    font-size: 12px;
  }
  .post #authorarea {
    margin-top: 60px;
    padding-block: 40px;
    padding-inline: 10px;
    display: block;
  }
  .post #authorarea .auth_main {
    margin-bottom: 30px;
  }
  .post #authorarea .auth_main .title {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
  }
  .post #authorarea .auth_main .author {
    display: flex;
    text-align: center;
    justify-content: center;
    margin-bottom: 20px;
    gap: 20px;
  }
  .post #authorarea .auth_main .author .photo {
    width: 100px;
    height: 100px;
    margin: 0;
  }
  .post #authorarea .auth_main .author .data .office {
    width: 120px;
    margin-bottom: 10px;
  }
  .post #authorarea .auth_main .author .data .name {
    font-size: min(5vw,20px);
  }
  .post #authorarea .author_posts li .title {
    margin-block: 10px 10px;
    letter-spacing: 0;
    font-size: 13px;
  }
  .post #authorarea .author_posts li .sub {
    display: block;
    font-size: 11px;
    line-height: 1.5;
  }
  .post #authorarea .author_posts li .sub .date {
    text-align: right;
  }

  #cat_posts {
    padding-block: 50px;
    margin-top: 60px;
  }
  #cat_posts .h {
    margin-bottom: 30px;
  }
  #cat_posts .list {
    --gap: 2vw;
    display: flex;
    flex-wrap: wrap;
    margin-inline: calc(-1 * var(--gap));
    margin-block: 0;
  }
  #cat_posts .list li {
    width: 50%;
    margin-bottom: 0;
  }
  #cat_posts .list li:nth-of-type(n+3) {
    display: none;
  }
}

/*# sourceMappingURL=blog.css.map */