/*
Theme Name: MK Guide theme
Description: MK Guide WP theme
Version: 0.1.0
*/

@charset "utf-8";

/*-------------- reset -------------*/
* {
  box-sizing: border-box;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

b,
strong {
  font-weight: bold;
}

/* safariで自動付与されるスタイルの打ち消し */
select {
  border-radius: 0;
}

/*-------------- body -------------*/
html {
  font-size: 62.5%;
  overflow: auto;
}

body {
  position: relative;
  font-family: "miller-display", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Ｐゴシック", "MS P Gothic", "Osaka", Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.6em;
  font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%;
  color: #000;
  background-color: #f3eee8;
}

img {
  height: auto;
  vertical-align: bottom;
}

.pcNone {
  display: none;
}


/* グローバル変数宣言 */
:root {
  --font-w-light: 300;
  --font-w-regular: 400;
  --font-w-bold: 600;
  --font-w-black: 700;
}

/*-------------- a  -------------*/
a {
  text-decoration: none;
  color: #222;
}

/*-------------- 要素が少ない場合でもfooterを画面下部に固定する -------------*/
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin-top: auto;
}


/*-------------- formリセットCSS -------------*/
input,
button,
select,
textarea {
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font: inherit;
  border: none;
  border-radius: 0;
  outline: none;
  background: none;
}

textarea {
  resize: vertical;
}

input[type='checkbox'],
input[type='radio'] {
  display: none;
}

input[type='submit'],
input[type='button'],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

/*------------------------------------
	common
-------------------------------------*/
.sectionCommon {
  width: 1120px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .sectionCommon {
    width: 100%;
    padding: 0 20px;
  }
}

/* --------- background ----------- */
.bg1 {
  background: #222;
}

/* --------- button ----------- */
.button {
  padding: 17px 40px;
  background: #222;
  font-size: 2rem;
  font-weight: var(--font-w-bold);
  color: #fff;
  transition: .3s;
}

@media screen and (max-width: 767px) {
  .button {
    padding: 13px 25px;
    font-size: 1.5rem;
  }
}

.bg1 .button {
  background: #fff;
  color: #000;
}

.button:hover {
  background: #8d7454 !important;
  color: #fff;
}

/* --------- card ----------- */
.cardSection {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px 20px;
  margin-top: 30px;
}

@media screen and (max-width: 767px) {
  .cardSection {
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
  }
}

.cardTypeWrap {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
}

.cardType {
  padding: 3px 9px;
  background: #fff;
  font-size: 2rem;
  font-weight: var(--font-w-bold);
  font-style: italic;
  color: #a96c16;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .cardType {
    font-size: 1.9rem;
  }
}

@media screen and (max-width: 767px) {
  .sliderItem .cardType {
    font-size: 1.7rem;
  }
}

.cardType.stories {
  background: linear-gradient(0deg, rgb(229, 16, 131) 0%, rgb(246, 103, 46) 100%);
  color: #fff;
}

.cardItem {
  width: 360px;
  position: relative;
  background: #fff;
  box-shadow: 5px 0 10px 0 #ccc7c2;
}

@media screen and (max-width: 767px) {
  .cardItem {
    width: 100%;
  }
}

.cardLink {
  display: block;
  padding: 10px 10px 8px;
  transition: .3s;
}

.cardLink:hover {
  opacity: .7;
}

.cardImage {
  aspect-ratio: 400 / 300;
}

.cardImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cardInner {
  padding: 15px 10px 0;
}

.cardTitle {
  padding: 15px 10px 0;
  font-size: 2rem;
  font-weight: var(--font-w-bold);
  line-height: 1.4;
}

@media screen and (max-width: 767px) {
  .cardTitle {
    font-size: 1.9rem;
  }
}

.cardMetaWrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding-inline: 10px;
  font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
  .cardMetaWrap {
    margin-top: 10px;
    font-size: 1.3rem;
  }
}

.cardTagList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 14px 20px 20px;
}

@media screen and (max-width: 767px) {
  .storiesItem .cardTagList {
    padding: 10px 20px 20px;
  }
}

.storiesItem .cardTagList {
  padding-inline: 0;
}

.cardTag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  background: #b89b73;
  font-size: 1.5rem;
  font-weight: var(--font-w-bold);
  color: #fff;
  border-radius: 100px;
}

@media screen and (max-width: 767px) {
  .cardTag {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 767px) {
  .storiesItem .cardTag {
    font-size: 1.3rem;
  }
}

/* --------- pagination ----------- */
.pagination {
  margin: 100px 0 0
}

@media screen and (max-width: 767px) {
  .pagination {
    margin-top: 40px;
  }
}

.paginationStories {
  margin-top: 80px;
}

@media screen and (max-width: 767px) {
  .paginationStories {
    margin-top: 50px;
  }
}

.pagination .nav-links {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  background: #fff;
  font-size: 1.8rem;
  font-weight: var(--font-w-bold);
  border: solid 1px #222;
  transition: .3s;
}

.pagination .page-numbers:not(.current):hover {
  background: #222;
  color: #fff;
}

.pagination .page-numbers.current {
  background: #222;
  color: #fff;
}

.pagination .page-numbers.dots {
  border: none;
  background: transparent;
  min-width: auto;
  pointer-events: none;
}

.paginationItem.ellipsis span {
  align-items: flex-end;
  width: auto;
  background: transparent;
  border: none;
}

/* --------- slider ----------- */
.sliderWrap {
  margin: 50px 0 0;
}

@media screen and (max-width: 767px) {
  .sliderWrap {
    width: calc(100% + 20px);
    margin-top: 25px;
  }
}

.slider {
  position: relative;
}

.sliderItem {
  display: block;
  width: 300px;
  position: relative;
  background: #fff;
  text-align: center;
  transition: .3s;
}

.sliderItem:hover {
  opacity: .7;
}

.sliderImage {
  display: grid;
  place-items: center;
  aspect-ratio: 300 / 400;
  position: relative;
  overflow: hidden;
}

.sliderImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sliderInner {
  padding: 25px 30px 30px;
}

@media screen and (max-width: 767px) {
  .sliderInner {
    padding: 14px 20px 20px;
  }
}

.sliderTitle {
  padding: 25px 20px 0;
  font-size: 1.8rem;
  font-weight: var(--font-w-bold);
  line-height: 1.5;
}

@media screen and (max-width: 767px) {
  .sliderTitle {
    font-size: 1.6rem;
  }
}

.sliderItem .cardTagList,
.homeMainSliderItem .cardTagList {
  justify-content: center;
  padding-bottom: 30px;
}
@media screen and (max-width: 767px) {
  .sliderItem .cardTagList,
  .homeMainSliderItem .cardTagList {
    padding-bottom: 20px;
  }
}

@media screen and (max-width: 767px) {
  .sliderItem .cardTag {
    font-size: 1.3rem;
  }
}

.slick-list {
  overflow: hidden;
}

.slick-track {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.slick-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  width: 100%;
  position: absolute;
  top: -74px;
  right: 10px;
}

@media screen and (max-width: 767px) {
  .slick-dots {
    gap: 15px;
    top: -44px;
    right: 20px;
  }
}

.slick-dots li button {
  display: block;
  width: 8px;
  height: 8px;
  position: relative;
  background: #866c49;
  font-size: 0;
  border-radius: 50%;
}

.bg1 .slick-dots li button {
  background: #fff;
}

.slick-dots li.slick-active button::after {
  content: "";
  width: 26px;
  height: 26px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: solid 1px #866c49;
  border-radius: 50%;
}

@media screen and (max-width: 767px) {
  .slick-dots li.slick-active button::after {
    width: 20px;
    height: 20px;
  }
}

.bg1 .slick-dots li.slick-active button::after {
  border-color: #fff;
}

.sliderPrev,
.sliderNext {
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 230px;
  background: #d2b58e;
  border-radius: 50%;
  cursor: pointer;
  transition: .3s;
  z-index: 1;
}

.sliderPrev {
  left: -60px;
}

.sliderNext {
  right: -60px;
}

.sliderPrev:hover,
.sliderNext:hover {
  background: #8d7454;
}

.sliderPrev::before,
.sliderNext::before {
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  top: 13px;
}

.sliderPrev::before {
  left: 15px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.sliderNext::before {
  right: 15px;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: rotate(45deg);
}

.sliderButtonWrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 50px 0 0;
}

@media screen and (max-width: 767px) {
  .sliderButtonWrap {
    margin-top: 25px;
  }

  .homeMainSliderWrap .sliderButtonWrap {
    margin-top: 27px;
  }
}

/*------------------------------------
	header
-------------------------------------*/
.header {
  width: 100%;
  position: fixed;
  z-index: 999;
}

@media screen and (max-width: 767px) {
  .header {
    padding: 10px;
  }
}

.headerWrap {
  position: relative;
}

@media screen and (max-width: 767px) {
  .headerWrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 7px 20px;
    background: #fff;
    border-radius: 100px;
    box-shadow: 0 2px 10px 0 #999691;
  }
}

.headerInner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 48px;
  width: 726px;
  padding: 16px 0;
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 100px;
  box-shadow: 2px 0 10px #a9a298;
}

@media screen and (max-width: 767px) {
  .headerInner {
    flex: 1;
    justify-content: flex-end;
    gap: 15px;
    width: 100%;
    padding: 0;
    position: static;
    transform: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
}

.headerLogo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(243, 238, 232, .7);
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .headerLogo {
    width: auto;
    height: auto;
    position: static;
    background: transparent;
  }
}

.headerLogo a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.headerLogo img {
  width: 67px;
  position: relative;
  top: 4px;
}

@media screen and (max-width: 767px) {
  .headerLogo img {
    width: 42px;
    top: 0;
  }
}

@media screen and (max-width: 767px) {
  .headerNav {
    display: none;
  }
}

.spHeaderNav {
  display: none;
}

@media screen and (max-width: 767px) {
  .spHeaderNav {
    display: block;
  }
}

.headerNavList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
  position: relative;
}

@media screen and (max-width: 767px) {
  .headerNavList {
    display: none;
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
    padding: 80px 50px 70px;
    position: absolute;
    top: -10px;
    left: -10px;
    background: #fff;
    width: calc(100% + 20px);
  }
}

.headerNavList li {
  font-size: 1.9rem;
  font-weight: var(--font-w-bold);
}

@media screen and (max-width: 767px) {
  .headerNavList li {
    width: 100%;
    padding: 8px 0;
    font-size: 2.1rem;
  }

  .headerNavList li:last-child {
    padding-bottom: 0;
  }

  .headerNavList li>ul {
    margin-top: 8px;
    padding: 0 10px;
  }

  .headerNavList li>ul li {
    font-size: 1.9rem;
  }

  .headerNavList li.lineBottom {
    margin-bottom: 8px;
    padding-bottom: 16px;
    border-bottom: solid 1px #000;
  }
}

.headerNavList li .is-current,
.headerNavList li .is-current a {
  color: #866c49;
}

.navBtn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.navBtn::after {
  content: "";
  display: block;
  width: 16px;
  height: 7px;
  position: relative;
  top: 2px;
  background: url(assets/img/arrow.png) no-repeat;
  background-size: contain;
  z-index: 1;
}

.navBtnSp {
  display: none;
}

@media screen and (max-width: 767px) {
  .navBtnSp {
    display: block;
    width: 25px;
    height: 20px;
    position: relative;
    z-index: 1;
  }

  .navBtnSp span {
    display: inline-block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #000;
  }

  .navBtnSp span:nth-of-type(1) {
    top: 0;
  }

  .navBtnSp[aria-expanded="true"] span:nth-of-type(1) {
    transform: translateY(9px) rotate(-45deg);
  }

  .navBtnSp span:nth-of-type(2) {
    top: 9px;
  }

  .navBtnSp[aria-expanded="true"] span:nth-of-type(2) {
    opacity: 0;
  }

  .navBtnSp span:nth-of-type(3) {
    bottom: 0;
  }

  .navBtnSp[aria-expanded="true"] span:nth-of-type(3) {
    transform: translateY(-9px) rotate(45deg);
  }
}

.headerSearch {
  display: block;
  width: 17px;
  height: 17px;
  position: relative;
  background: url(assets/img/icon_search.svg) no-repeat;
  background-size: contain;
  z-index: 1;

}

@media screen and (max-width: 767px) {
  .headerSearch {
    display: block;
    width: 25px;
    height: 20px;
    background: url(assets/img/icon_search.svg) no-repeat;
    background-size: 20px;
    background-position: center;
    position: relative;
  }

  .headerSearch[aria-expanded="true"] span {
    display: inline-block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #000;
  }

  .headerSearch[aria-expanded="true"] span:nth-of-type(1) {
    top: 0;
    transform: translateY(9px) rotate(-45deg);
  }

  .headerSearch[aria-expanded="true"] span:nth-of-type(2) {
    bottom: 0;
    transform: translateY(-9px) rotate(45deg);
  }
}

.headerSearch[aria-expanded="true"] {
  width: 17px;
  height: 17px;
  background: url(assets/img/icon_close.png) no-repeat;
  background-size: contain;
}

@media screen and (max-width: 767px) {
  .headerSearch[aria-expanded="true"] {
    width: 25px;
    height: 20px;
    background: transparent;
  }
}

.headerNavOpen {
  position: relative;
}

.dropdown[hidden] {
  display: none;
}

.navMenu {
  padding: 20px 30px;
  position: absolute;
  top: 45px;
  left: -32px;
  background: #fff;
}

.navMenu ul {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 22px 30px;
}

.navMenu ul li a {
  transition: .3s;
}

.navMenu ul li a:hover {
  color: #866c49;
  border-bottom: solid 2px #866c49;
}

.navSearch {
  width: 100%;
  max-height: 80vh;
  padding: 25px 30px 30px;
  position: absolute;
  top: 60px;
  left: 0;
  background: #fff;
  overflow: auto;
}

@media screen and (max-width: 767px) {
  .navSearch {
    width: calc(100% + 20px);
    padding-top: 87px;
    top: -10px;
    left: -10px;
  }
}

.searchBox {
  position: relative;
}

.searchBox::before {
  content: "";
  display: block;
  width: 17px;
  height: 16px;
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  background: url(assets/img/icon_search.svg) no-repeat;
  background-size: contain;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .searchBox::before {
    width: 13px;
    height: 13px;
    left: 10px;
  }
}

.searchBox input[type=search] {
  width: 100%;
  padding: 16px 20px 14px 46px;
  position: relative;
  font-size: 1.7rem;
  border: solid 1px #000;
  border-radius: 5px;
}

@media screen and (max-width: 767px) {
  .searchBox input[type=search] {
    padding: 10px 20px 10px 34px;
    font-size: 1.3rem;
  }
}

.searchInner {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 44px;
  margin: 30px 0 0;
}

@media screen and (max-width: 767px) {
  .searchInner {
    gap: 35px;
    margin-top: 25px;
  }
}

.searchHead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 2.5rem;
  font-weight: var(--font-w-bold);
}

@media screen and (max-width: 767px) {
  .searchHead {
    gap: 6px;
    font-size: 1.8rem;
  }
}

.searchHead::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: #222;
}

@media screen and (max-width: 767px) {
  .searchHead::before {
    width: 9px;
    height: 9px;
  }
}

.searchList {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 15px;
  margin: 20px 0 0;
}

.searchList li {
  font-size: 2rem;
}

@media screen and (max-width: 767px) {
  .searchList li {
    font-size: 1.7rem;
  }
}

.searchList li a {
  text-decoration: underline;
  transition: .3s;
}

.searchList li a:hover {
  color: #866c49;
}

.searchTag {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 4px;
  margin: 14px 0 0;
}

@media screen and (max-width: 767px) {
  .searchTag {
    margin-top: 10px;
  }
}

.searchTag a {
  font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
  .searchTag a {
    font-size: 1.3rem;
  }
}

.searchTag a:hover {
  background: #b89b73;
  color: #fff;
}

/*------------------------------------
	home
-------------------------------------*/
/* --------- hero ----------- */
.heroInner {
  position: relative;
  z-index: 1;
}

.heroWrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 768px;
  position: relative;
}

@media screen and (max-width: 767px) {
  .heroWrap {
    width: 100%;
    height: 667px;
  }
}

.heroText {
  display: inline-block;
  font-size: 3.6rem;
  font-weight: var(--font-w-bold);
  font-style: italic;
  line-height: 1.3;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .heroText {
    display: block;
    font-size: 2rem;
    text-align: center;
  }
}

.heroText span {
  display: block;
}

.heroSearch {
  width: 500px;
  margin: 30px 0 0;
  position: relative;
}

@media screen and (max-width: 767px) {
  .heroSearch {
    width: 100%;
    margin-top: 18px;
  }
}

.heroSearch::before {
  content: "";
  display: block;
  width: 17px;
  height: 16px;
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  background: url(assets/img/icon_search.svg) no-repeat;
  background-size: contain;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .heroSearch::before {
    width: 13px;
    height: 13px;
    left: 10px;
  }
}

.heroSearch input[type=search] {
  width: 100%;
  padding: 12px 20px 12px 46px;
  position: relative;
  background: #fff;
  font-size: 1.7rem;
  border-radius: 5px;
}

@media screen and (max-width: 767px) {
  .heroSearch input[type=search] {
    padding: 9px 20px 9px 32px;
    font-size: 1.3rem;
  }
}

input::placeholder {
  color: #999;
}

.heroImageWrap {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.heroImage {
  display: grid;
  place-items: center;
  width: 100%;
  height: 768px;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .heroImage {
    height: 667px;
  }
}

.heroImage a {
  display: block;
  width: 100%;
  height: 100%;
}

.heroImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.heroImage::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .25);
  pointer-events: none;
}

.heroImageText {
  padding-left: 20px;
  position: absolute;
  bottom: 52px;
  right: 40px;
  font-size: 1.6rem;
  font-weight: var(--font-w-bold);
  color: #fff;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .heroImageText {
    bottom: 50px;
    right: 20px;
    font-size: 1.4rem;
  }
}

.heroSlider .slick-track {
  gap: 0;
}

.heroSliderDots {
  width: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
}

.heroSliderDots .slick-dots {
  gap: 8px;
  top: auto;
  bottom: 30px;
  right: 40px;
  z-index: 998;
}

@media screen and (max-width: 767px) {
  .heroSliderDots .slick-dots {
    bottom: 26px;
    right: 20px;
  }
}

.heroSliderDots .slick-dots li button {
  width: 10px;
  height: 10px;
  background: #b89b73;
  border: solid 1px #000;
}

@media screen and (max-width: 767px) {
  .heroSliderDots .slick-dots li button {
    width: 9px;
    height: 9px;
  }
}

.heroSliderDots .slick-dots li.slick-active button {
  background: #fff;
}

.heroSliderDots .slick-dots li.slick-active button::after {
  content: none;
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.15);
  }
}

.add-animation img {
  animation: zoomUp 13s linear 0s normal both;
}

/* --------- main ----------- */
.homeMain {
  padding: 80px 0 50px;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .homeMain {
    padding-top: 40px;
  }
}

.homeMainSectionTitle {
  font-size: 6rem;
  font-weight: var(--font-w-bold);
  font-style: italic;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .homeMainSectionTitle {
    font-size: 3.5rem;
  }
}

.homeMainContent {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px;
  margin: 50px 0 0;
}

@media screen and (max-width: 767px) {
  .homeMainContent {
    flex-direction: column;
    gap: 0;
    margin-top: 20px;
  }
}

.homeMainImageWrap {
  width: 430px;
  position: relative;
}

@media screen and (max-width: 767px) {
  .homeMainImageWrap {
    width: 100%;
  }
}

.homeMainImage1 {
  width: 430px;
  aspect-ratio: 43 / 50;
}
@media screen and (max-width: 767px) {
  .homeMainImage1 {
    width: 67%;
  }
}

.homeMainImage2 {
  width: 300px;
  aspect-ratio: 1 / 1;
  position: absolute;
  bottom: 26px;
  right: -224px;
  border: solid 10px #fff;
}

@media screen and (max-width: 767px) {
  .homeMainImage2 {
    width: 44%;
    bottom: 13px;
    right: 0;
    border-width: 5px;
  }
}

.homeMainImage1 img,
.homeMainImage2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.homeMainBody {
  flex: 1;
  padding: 24px 0 0;
}

@media screen and (max-width: 767px) {
  .homeMainBody {
    padding-top: 15px;
  }
}

.homeMainCategory {
  font-size: 1.5rem;
  font-weight: var(--font-w-bold);
  font-style: italic;
  color: #866c49;
}

@media screen and (max-width: 767px) {
  .homeMainCategory {
    font-size: 1.3rem;
  }
}

.homeMainTitle {
  margin: 5px 0 0;
  font-size: 3.6rem;
  font-weight: var(--font-w-bold);
  line-height: 1.4;
}

@media screen and (max-width: 767px) {
  .homeMainTitle {
    font-size: 1.9rem;
  }
}

.homeMainMeta {
  margin: 25px 0 0;
  padding: 0 0 0 224px;
  font-size: 1.5rem;
}

@media screen and (max-width: 767px) {
  .homeMainMeta {
    margin-top: 12px;
    padding: 0;
    font-size: 1.1rem;
  }
}

.homeMainDate::after {
  content: "/";
}

.homeMainExcerpt {
  margin: 10px 0 0;
  padding: 0 0 0 224px;
  font-size: 1.6rem;
  font-weight: var(--font-w-bold);
  line-height: 1.6;
  color: #666;
}

@media screen and (max-width: 767px) {
  .homeMainExcerpt {
    padding: 0;
    font-size: 1.3rem;
  }
}

.homeMainButtonWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 34px 0 0;
}

@media screen and (max-width: 767px) {
  .homeMainButtonWrap {
    justify-content: center;
    margin-top: 18px;
  }
}

.homeMainButtonWrap .button {
  padding: 19px 32px;
  background: #b69d71;
  font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
  .homeMainButtonWrap .button {
    font-size: 1.5rem;
  }
}

.homeMainSliderWrap {
  margin: 56px 0 0;
  padding: 60px 0 0;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .homeMainSliderWrap {
    margin-top: 65px;
    padding: 0;
    overflow: visible;
  }
}

.homeMainSlider {
  position: relative;
}

.homeMainSlider .slick-list {
  overflow: visible;
}

.homeMainSlider .slick-track {
  gap: 0;
}

@media screen and (max-width: 767px) {
  .homeMainSlider .slick-track {
    gap: 15px;
  }
}

.homeMainSlider .slick-dots {
  top: -48px;
}

@media screen and (max-width: 767px) {
  .homeMainSlider .slick-dots {
    justify-content: center;
    position: static;
    margin-top: 53px;
  }
}

.homeMainSliderItem,
.homeMainSlider .sliderItem {
  display: block;
  width: 420px;
  margin: 0 -10px;
  padding: 10px 10px 0;
  position: relative;
  top: -30px;
  background: #b69d71;
  text-align: center;
  transition: .3s;
  transform: scale(0.75);
}

@media screen and (max-width: 767px) {
  .homeMainSliderItem,
  .homeMainSlider .sliderItem {
    width: 320px;
    margin: -20px;
    top: -18px;
  }
}

.homeMainSliderItem.slick-center,
.homeMainSlider .sliderItem.slick-center {
  top: 0;
  transform: scale(1);
}

.homeMainSliderItem:hover {
  opacity: .7;
}

.homeMainSliderItem .cardMetaWrap {
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
}

.homeMainSliderImage,
.homeMainSlider .sliderImage {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  overflow: hidden;
}

.homeMainSliderImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.homeMainSlider .sliderTitle {
  font-size: 2.3rem;
  color: #fff;
}

.homeMainSlider .cardTagList {
  margin-top: 10px;
}

.homeMainSlider .cardTag {
  background: #fff;
  color: #866c49;
}

/* --------- category ----------- */
.homeCategory {
  padding: 50px 0 60px;
}

@media screen and (max-width: 767px) {
  .homeCategory {
    padding: 30px 0;
  }
}

.homeCategorySectionTitle {
  font-size: 5rem;
  font-style: italic;
  font-weight: var(--font-w-bold);
  text-align: center;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .homeCategorySectionTitle {
    font-size: 3.2rem;
  }
}

.homeCategoryContent {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  margin: 45px 0 0;
}

@media screen and (max-width: 767px) {
  .homeCategoryContent {
    justify-content: space-between;
    gap: 10px 0;
    margin-top: 34px;
  }
}

.homeCategoryItem {
  display: grid;
  place-items: center;
  width: 240px;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .homeCategoryItem {
    width: 48.5%;
    aspect-ratio: 325 / 160;
  }
}

.homeCategoryItem.tokyo {
  background: url(assets/img/cat_tokyo.jpg) no-repeat center / cover;
}

@media screen and (max-width: 767px) {
  .homeCategoryItem.tokyo {
    background: url(assets/img/cat_tokyo_sp.jpg) no-repeat center / cover;
  }
}

.homeCategoryItem.kyoto {
  background: url(assets/img/cat_kyoto.jpg) no-repeat center / cover;
}

@media screen and (max-width: 767px) {
  .homeCategoryItem.kyoto {
    background: url(assets/img/cat_kyoto_sp.jpg) no-repeat center / cover;
  }
}

.homeCategoryItem.osaka {
  background: url(assets/img/cat_osaka.jpg) no-repeat center / cover;
}

@media screen and (max-width: 767px) {
  .homeCategoryItem.osaka {
    background: url(assets/img/cat_osaka_sp.jpg) no-repeat center / cover;
  }
}

.homeCategoryItem.kobe {
  background: url(assets/img/cat_kobe.jpg) no-repeat center / cover;
}

@media screen and (max-width: 767px) {
  .homeCategoryItem.kobe {
    background: url(assets/img/cat_kobe_sp.jpg) no-repeat center / cover;
  }
}

.homeCategoryItem.sapporo {
  background: url(assets/img/cat_sapporo.jpg) no-repeat center / cover;
}

@media screen and (max-width: 767px) {
  .homeCategoryItem.sapporo {
    background: url(assets/img/cat_sapporo_sp.jpg) no-repeat center / cover;
  }
}

.homeCategoryItem.nagoya {
  background: url(assets/img/cat_nagoya.jpg) no-repeat center / cover;
}

@media screen and (max-width: 767px) {
  .homeCategoryItem.nagoya {
    background: url(assets/img/cat_nagoya_sp.jpg) no-repeat center / cover;
  }
}

.homeCategoryItem.shiga {
  background: url(assets/img/cat_shiga.jpg) no-repeat center / cover;
}

@media screen and (max-width: 767px) {
  .homeCategoryItem.shiga {
    background: url(assets/img/cat_shiga_sp.jpg) no-repeat center / cover;
  }
}

.homeCategoryItem.fukuoka {
  background: url(assets/img/cat_fukuoka.jpg) no-repeat center / cover;
}

@media screen and (max-width: 767px) {
  .homeCategoryItem.fukuoka {
    background: url(assets/img/cat_fukuoka_sp.jpg) no-repeat center / cover;
  }
}

.homeCategoryItem::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .7);
  transition: .3s;
}

.homeCategoryItem:hover::after {
  background: #f3eee8;
}

@media screen and (max-width: 767px) {
  .homeCategoryItem::after {
    background: rgba(0, 0, 0, .6);
  }
}

.homeCategoryItem p {
  font-size: 3.6rem;
  color: #fff;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .homeCategoryItem p {
    font-size: 2.5rem;
    text-shadow: 0px 0px 10px #000;
  }
}

.homeCategoryItem:hover p {
  color: #222;
  text-shadow: none;
}

/* --------- section common ----------- */
.homeSectionCommon {
  padding: 80px 0;
}

@media screen and (max-width: 767px) {
  .homeSectionCommon {
    padding: 40px 0;
  }
}

.homeSectionTitle {
  font-size: 4.6rem;
  font-weight: var(--font-w-bold);
  font-style: italic;
}

@media screen and (max-width: 767px) {
  .homeSectionTitle {
    font-size: 3rem;
  }
}

.bg1 .homeSectionTitle {
  color: #fff;
}

/* --------- stories ----------- */
.homeStories {
  padding: 60px 0 80px;
  background: #e8d9c6;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .homeStories {
    padding: 40px 0 65px;
  }
}

.homeStoriesTitle {
  font-size: 5rem;
  font-weight: var(--font-w-bold);
  font-style: italic;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .homeStoriesTitle {
    font-size: 3rem;
  }
}

.storiesSliderWrap {
  margin: 35px 0 0;
}

@media screen and (max-width: 767px) {
  .storiesSliderWrap {
    margin-top: 25px;
  }
}

.storiesSlider {
  padding: 0 0 64px;
  position: relative;
}

@media screen and (max-width: 767px) {
  .storiesSlider {
    padding-bottom: 40px;
  }
}

.storiesSlider .slick-list {
  overflow: visible;
}

.storiesSlider .slick-track {
  gap: 40px;
}

@media screen and (max-width: 767px) {
  .storiesSlider .slick-track {
    gap: 15px;
  }
}

.storiesSlider .slick-dots {
  justify-content: center;
  top: auto;
  bottom: 0;
  right: 0;
}

.storiesSlider .sliderPrev,
.storiesSlider .sliderNext {
  top: 203px;
}

.storiesSection {
  gap: 50px 32px;
}

@media screen and (max-width: 767px) {
  .storiesSection {
    gap: 30px;
  }
}

.storiesItem {
  display: block;
  width: 352px;
  position: relative;
  transition: .3s;
}

@media screen and (max-width: 767px) {
  .storiesItem {
    width: 100%;
  }
}

.storiesSlider .storiesItem {
  width: 400px;
}

@media screen and (max-width: 767px) {
  .storiesSlider .storiesItem {
    width: 300px;
  }
}

.storiesItem:hover {
  opacity: .7;
}

.storiesImage {
  display: grid;
  place-items: center;
  aspect-ratio: 400 / 300;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .storiesSlider .storiesImage {
    aspect-ratio: 300 / 200;
  }
}

.storiesImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.storiesInner {
  margin: 15px 0 0;
}

.storiesArea {
  display: inline-block;
  margin-top: 15px;
  padding: 5px 11px;
  background-image: linear-gradient(0deg, rgb(229, 16, 131) 0%, rgb(246, 103, 46) 100%);
  font-size: 1.4rem;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .storiesArea {
    font-size: 1.3rem;
  }
}

.storiesSlider .storiesArea {
  font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
  .storiesSlider .storiesArea {
    font-size: 1.7rem;
  }
}

.storiesTitle {
  margin: 6px 0 0;
  font-size: 2rem;
  font-weight: var(--font-w-bold);
  line-height: 1.6;
}

@media screen and (max-width: 767px) {
  .storiesTitle {
    font-size: 1.8rem;
  }
}

.storiesSlider .storiesTitle {
  font-size: 2.2rem;
}

@media screen and (max-width: 767px) {
  .storiesSlider .storiesTitle {
    font-size: 2rem;
  }
}

/*------------------------------------
	page
-------------------------------------*/
.pageMain {
  padding: 0 0 80px;
}

@media screen and (max-width: 767px) {
  .pageMain {
    padding-bottom: 50px;
  }
}

.pageHeroTitle {
  position: relative;
  font-size: 6rem;
  font-weight: var(--font-w-bold);
  font-style: italic;
  line-height: 1.2;
  color: #fff;
  text-align: center;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .pageHeroTitle {
    font-size: 3.5rem;
  }
}

/*------------------------------------
	tag
-------------------------------------*/
.tagWrap {
  margin-top: 62px;
  padding-bottom: 30px;
  position: relative;
}

@media screen and (max-width: 767px) {
  .tagWrap {
    margin-top: 40px;
    padding-bottom: 20px;
  }
}

.tagWrap::after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #222;
}

@media screen and (max-width: 767px) {
  .tagWrap::after {
    width: calc(100% - 40px);
  }
}

#popular-tags {
  scroll-margin-top: 150px;
}
@media screen and (max-width: 767px) {
  #popular-tags {
    scroll-margin-top: 110px;
  }
}

.tagTitle {
  margin: 0 0 30px;
  font-size: 3.6rem;
  font-weight: var(--font-w-bold);
  font-style: italic;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .tagTitle {
    margin-bottom: 16px;
    font-size: 2.3rem;
  }
}

.tagList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 5px;
}

@media screen and (max-width: 767px) {
  .tagList {
    gap: 8px 4px;
  }
}

.tagLink {
  display: flex;
  align-items: center;
  padding: 8px 18px;
  background: #fff;
  font-size: 1.8rem;
  color: #866c49;
  border: solid 1px #b89b73;
  border-radius: 100px;
  cursor: pointer;
  transition: .3s;
}

@media screen and (max-width: 767px) {
  .tagLink {
    padding: 6px 14px;
    font-size: 1.3rem;
  }
}

.tagLink::before {
  content: "#";
  display: block;
}

.tagLink:hover {
  background: #b89b73;
  color: #fff;
}

.tagSearch {
  max-width: 400px;
  margin: 40px auto 10px;
  background: #fff;
  border-radius: 5px;
}

@media screen and (max-width: 767px) {
  .tagSearch {
    max-width: 100%;
    width: 100%;
    margin: 20px 0 0;
  }
}

.tagSearch .searchBox::before {
  width: 14px;
  height: 14px;
  left: 20px;
}

@media screen and (max-width: 767px) {
  .tagSearch .searchBox::before {
    left: 13px;
  }
}

.tagSearch .searchBox input[type=search] {
  padding: 14px 20px 14px 46px;
  font-size: 1.9rem;
  border: none;
}

@media screen and (max-width: 767px) {
  .tagSearch .searchBox input[type=search] {
    padding: 9px 20px 9px 34px;
    font-size: 1.5rem;
  }
}

.tagMoreWrap {
  margin: 40px 0 0;
  position: relative;
  background: #fff;
  border-radius: 5px;
}

@media screen and (max-width: 767px) {
  .tagMoreWrap {
    margin-top: 25px;
    font-size: 1.3rem;
  }
}

.tagMoreText {
  padding: 14px 20px 18px 65px;
  position: relative;
  font-size: 2rem;
  font-weight: var(--font-w-bold);
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .tagMoreText {
    padding: 8px 20px 12px 36px;
    font-size: 1.5rem;
  }
}

.tagMoreText::before {
  content: "";
  width: 30px;
  height: 24px;
  position: absolute;
  top: 13px;
  left: 15px;
  background: url(assets/img/tag_more_icon.png) no-repeat;
  background-size: contain;
}

@media screen and (max-width: 767px) {
  .tagMoreText::before {
    width: 22.5px;
    height: 13px;
    top: 10px;
    left: 10px;
  }
}

.tagMoreText::after {
  content: "";
  width: 21px;
  height: 9px;
  position: absolute;
  top: 50%;
  right: 29px;
  transform: translateY(-50%);
  background: url(assets/img/arrow.png) no-repeat;
  background-size: contain;
}

@media screen and (max-width: 767px) {
  .tagMoreText::after {
    width: 16.5px;
    height: 6px;
    right: 15px;
  }
}

.tagMoreText.is-active::after {
  transform: translateY(-50%) rotate(180deg);
}

.tagMorePanel {
  display: none;
  padding: 20px;
}

.tagMorePanel .tagList {
  justify-content: flex-start;
}

/*------------------------------------
	result
-------------------------------------*/
.resultWrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: 40px auto;
}

@media screen and (max-width: 767px) {
  .resultWrap {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
    margin: 30px 0;
  }
}

.resultText {
  font-size: 1.8rem;
  font-weight: var(--font-w-bold);
}

@media screen and (max-width: 767px) {
  .resultText {
    font-size: 1.3rem;
  }
}

.resultText span {
  margin-right: .2em;
}

.resultSearch {
  width: 500px;
}

@media screen and (max-width: 767px) {
  .resultSearch {
    width: 100%;
  }
}

.resultSearch .searchBox input[type=search] {
  padding: 13px 20px 11px 46px;
  background: #fff;
  border: none;
}

@media screen and (max-width: 767px) {
  .resultSearch .searchBox input[type=search] {
    padding: 10px 20px 8px 32px;
  }
}

/*------------------------------------
	post
-------------------------------------*/
.postPage {
  padding: 0 0 100px;
}

@media screen and (max-width: 767px) {
  .postPage {
    padding-bottom: 55px;
  }
}

.postHero {
  width: 100%;
  height: 260px;
  background: #000;
}

@media screen and (max-width: 767px) {
  .postHero {
    height: 170px;
  }
}

.postHeroListing {
  background: #222;
}

.postHeroStories {
  background: #e8d9c6;
}

.postBody {
  width: 750px;
  margin: -45px auto 0;
}

@media screen and (max-width: 767px) {
  .postBody {
    width: 100%;
    margin-top: -36px;
  }
}

.postSlider {
  position: relative;
}

.postSliderItem {
  aspect-ratio: 3 / 2;
}

.postSlider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.postSlider .slick-track {
  gap: 0;
}

.postSlider .sliderPrev {
  left: -55px;
}

.postSlider .sliderNext {
  right: -55px;
}

@media screen and (max-width: 767px) {

  .postSlider .sliderPrev,
  .postSlider .sliderNext {
    display: none !important;
  }
}

.postSlider .slick-dots {
  justify-content: center;
  gap: 8px;
  top: auto;
  bottom: -20px;
  right: auto;
}

.postSlider .slick-dots li button {
  width: 10px;
  height: 10px;
  background: #b89b73;
}

.postSlider .slick-dots li.slick-active button {
  background: #fff;
  border: solid 1px #222;
}

.postSlider .slick-dots li.slick-active button::after {
  content: none;
}

.postMainImage {
  aspect-ratio: 3 / 2;
  position: relative;
}

.postMainImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.postListingTitle {
  margin: 75px 0 0;
  font-size: 4rem;
  font-weight: var(--font-w-bold);
  line-height: 1.2;
}

@media screen and (max-width: 767px) {
  .postListingTitle {
    margin-top: 60px;
    font-size: 2.7rem;
  }
}

.postStoriesTitle {
  margin: 50px 0 0;
  font-size: 4rem;
  font-weight: var(--font-w-bold);
  line-height: 1.2;
}

@media screen and (max-width: 767px) {
  .postStoriesTitle {
    margin-top: 30px;
    font-size: 2.5rem;
  }
}

.postMeta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin: 40px 0 0;
  font-size: 2rem;
}

@media screen and (max-width: 767px) {
  .postMeta {
    gap: 8px;
    margin-top: 25px;
    font-size: 1.5rem;
  }
}

.postTagWrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 5px;
  margin: 18px 0 0;
}

@media screen and (max-width: 767px) {
  .postTagWrap {
    margin-top: 10px;
  }
}

.postTag {
  display: inline-block;
  padding: 8px 20px;
  background: #b89b73;
  font-size: 1.8rem;
  font-weight: var(--font-w-bold);
  color: #fff;
  border-radius: 100px;
}

@media screen and (max-width: 767px) {
  .postTag {
    padding: 6px 15px;
    font-size: 1.35rem;
  }
}

.postTitle {
  margin: 100px 0 0;
  font-size: 4rem;
  line-height: 1.2;
}
@media screen and (max-width: 767px) {
  .postTitle {
    margin-top: 60px;
    font-size: 2.5rem;
  }
}

.postContent {
  margin: 55px 0 0;
}

@media screen and (max-width: 767px) {
  .postContent {
    margin-top: 30px;
  }
}

.postContent h2,
.postContent h3 {
  margin-bottom: 16px;
  font-size: 3rem;
  font-weight: var(--font-w-bold);
  line-height: 1.2;
}

@media screen and (max-width: 767px) {
  .postContent h2,
  .postContent h3 {
    margin-bottom: 10px;
    font-size: 2.2rem;
  }
}

.postContent p {
  margin-bottom: 40px;
  font-size: 1.8rem;
  line-height: 1.8;
}

@media screen and (max-width: 767px) {
  .postContent p {
    margin-bottom: 22px;
    font-size: 1.4rem;
    line-height: 1.6;
  }
}

.postContent ul {
  margin: 0 0 40px;
}

@media screen and (max-width: 767px) {
  .postContent ul {
    margin-bottom: 20px;
  }
}

.postContent ul li {
  padding: 0 0 0 12px;
  position: relative;
  font-size: 1.8rem;
  line-height: 1.8;
}

@media screen and (max-width: 767px) {
  .postContent ul li {
    padding-left: 10px;
    font-size: 1.4rem;
    line-height: 1.6;
  }
}

.postContent ul li::before {
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  top: 13px;
  left: 0;
  background: #000;
  border-radius: 50%;
}

@media screen and (max-width: 767px) {
  .postContent ul li::before {
    width: 4px;
    height: 4px;
    top: 9px;
  }
}

.postContent img {
  display: block;
  max-width: 100%;
  margin: 0 auto 20px;
}

.postContent figure {
  margin-bottom: 20px;
}

.storiesContent {
  margin: 55px 0 0;
}

.storiesContent h2 {
  margin-bottom: 14px;
  font-size: 2.6rem;
  font-weight: var(--font-w-bold);
  line-height: 1.3;
}
@media screen and (max-width: 767px) {
  .storiesContent h2 {
    font-size: 1.9rem;
  }
}

.storiesContent h3 {
  margin-bottom: 2px;
  font-size: 2.2rem;
  font-weight: var(--font-w-bold);
  line-height: 1.4;
}
@media screen and (max-width: 767px) {
  .storiesContent h3 {
    font-size: 1.7rem;
  }
}

.storiesContent p {
  margin-bottom: 40px;
  font-size: 1.8rem;
  line-height: 1.8;
}

@media screen and (max-width: 767px) {
  .storiesContent p {
    margin-bottom: 22px;
    font-size: 1.4rem;
    line-height: 1.6;
  }
}

.storiesContent ul {
  margin: 0 0 40px;
}

@media screen and (max-width: 767px) {
  .storiesContent ul {
    margin-bottom: 20px;
  }
}

.storiesContent ul li {
  padding: 0 0 0 12px;
  position: relative;
  font-size: 1.8rem;
  line-height: 1.8;
}

@media screen and (max-width: 767px) {
  .storiesContent ul li {
    padding-left: 10px;
    font-size: 1.4rem;
    line-height: 1.6;
  }
}

.storiesContent ul li::before {
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  top: 13px;
  left: 0;
  background: #000;
  border-radius: 50%;
}

@media screen and (max-width: 767px) {
  .storiesContent ul li::before {
    width: 4px;
    height: 4px;
    top: 9px;
  }
}

.storiesContent img {
  display: block;
  max-width: 100%;
  margin: 0 auto 20px;
}

.storiesContent figure {
  margin-bottom: 20px;
}

.storiesContent a {
  color: #866c49;
  text-decoration: underline;
}
.storiesContent a:hover {
  text-decoration: none;
}

/*-------------- WordPress専用CSS  -------------*/
/* 画像の位置調整 */
.aligncenter {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.alignright {
  float: right;
}

.alignleft {
  float: left;
}

.wp-caption,
[class*='wp-image'] {
  display: block;
  max-width: 100% !important;
  text-align: center;
}

.wp-caption-text {
  margin-top: 0;
}

/* コンテンツ自由入力欄画像のflot解除用 */
.postContent * {
  clear: both;
}

.postContent .alignright+* {
  clear: both;
}

.postContent .alignleft+* {
  clear: both;
}

.postContact {
  margin: 0 0 12px;
}

.postContact span {
  display: block;
  font-size: 1.8rem;
  line-height: 1.8;
}

@media screen and (max-width: 767px) {
  .postContact span {
    font-size: 1.4rem;
    line-height: 1.6;
  }
}

.postLink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.postLinkButton {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 9px 25px;
  background: #b89b73;
  font-size: 1.8rem;
  font-weight: var(--font-w-bold);
  color: #fff;
}

@media screen and (max-width: 767px) {
  .postLinkButton {
    font-size: 1.4rem;
  }
}

.postLinkButton.map::after {
  content: "";
  width: 18px;
  height: 16px;
  background: url(assets/img/icon_external.png) no-repeat;
  background-size: contain;
}

@media screen and (max-width: 767px) {
  .postLinkButton.map::after {
    width: 13px;
    height: 11px;
  }
}

.imageCredit {
  margin: 22px 0 0;
}

@media screen and (max-width: 767px) {
  .imageCredit {
    margin-top: 15px;
  }
}

.imageCredit span {
  font-size: 1.8rem;
  line-height: 1.8;
}

@media screen and (max-width: 767px) {
  .imageCredit span {
    font-size: 1.4rem;
    line-height: 1.6;
  }
}

span.imageCreditHead {
  display: block;
  font-size: 2.6rem;
  font-weight: var(--font-w-bold);
}

.postBox {
  margin: 42px 0 0;
  padding: 30px 40px 40px;
  background: linear-gradient(95deg, rgb(38, 38, 38) 0%, rgb(51, 51, 51) 80%, rgb(64, 64, 64) 100%);
  color: #fff;
}

@media screen and (max-width: 767px) {
  .postBox {
    width: calc(100% + 40px);
    margin: 40px 0 0 -20px;
    padding: 25px 20px;
  }
}

.boxListing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

@media screen and (max-width: 767px) {
  .boxListing {
    flex-direction: column-reverse;
    gap: 15px;
    margin-top: 25px;
    padding-bottom: 68px;
    position: relative;
  }
}

.boxListingImage {
  width: 300px;
  aspect-ratio: 300 / 200;
}

@media screen and (max-width: 767px) {
  .boxListingImage {
    width: 100%;
  }
}

.boxListingImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.boxListingInner {
  flex: 1;
}

p.boxListingTitle {
  margin: 0;
  font-size: 3rem;
  font-weight: var(--font-w-bold);
  color: #fff;
  line-height: 1.5;
}

@media screen and (max-width: 767px) {
  p.boxListingTitle {
    font-size: 2.1rem;
  }
}

.postBoxLink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 15px 0 0;
}

@media screen and (max-width: 767px) {
  .postBoxLink {
    gap: 5px;
    margin-top: 20px;
  }
}

@media screen and (max-width: 767px) {
  .boxListingLink {
    width: 100%;
    justify-content: center;
    margin: 0;
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
  }
}

.postBoxLink::before {
  content: "";
  width: 40px;
  height: 36px;
  background: url(assets/img/mk_logo.png) no-repeat;
  background-size: contain;
}

@media screen and (max-width: 767px) {
  .postBoxLink::before {
    width: 31px;
    height: 28px;
  }
}

a.postBoxLinkButton {
  padding: 9px 19.5px;
  background: #f2cb6f;
  font-size: 1.8rem;
  font-weight: var(--font-w-bold);
  color: #000;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  a.postBoxLinkButton {
    padding: 6px 12px;
    font-size: 1.6rem;
  }
}

.boxStoriesImage {
  margin: 20px 0 0;
  aspect-ratio: 16 / 9;
}

@media screen and (max-width: 767px) {
  .boxStoriesImage {
    margin-top: 18px;
    aspect-ratio: 3 / 2;
  }
}

.boxListingImage img,
.boxStoriesImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

p.boxStoriesHead {
  margin: 0;
  font-size: 3.2rem;
  font-weight: var(--font-w-bold);
  line-height: 1.4;
}

@media screen and (max-width: 767px) {
  p.boxStoriesHead {
    font-size: 2.1rem;
  }
}

.boxStoriesInner {
  margin-top: 22px;
}

@media screen and (max-width: 767px) {
  .boxStoriesInner {
    margin-top: 18px;
  }
}

.boxStoriesInner p {
  margin: 0;
}

.boxStoriesInner p.boxStoriesHead {
  margin-top: 30px;
}

@media screen and (max-width: 767px) {
  .boxStoriesInner p.boxStoriesHead {
    margin-top: 22px;
  }
}

.postShare {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin: 30px 0 0;
}

@media screen and (max-width: 767px) {
  .postShare {
    justify-content: center;
    gap: 18px;
    margin: 20px 0 60px;
  }
}

.postShare img {
  width: 20px;
  height: auto;
}

@media screen and (max-width: 767px) {
  .postShare img {
    width: 25px;
  }
}

.relatedSection {
  margin: 100px 0 0;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .relatedSection {
    margin-top: 50px;
  }
}

.relatedHead {
  font-size: 4.2rem;
  font-weight: var(--font-w-bold);
}

@media screen and (max-width: 767px) {
  .relatedHead {
    font-size: 2.8rem;
  }
}

.relatedSliderWrap {
  margin: 25px 0 0;
}

@media screen and (max-width: 767px) {
  .relatedSliderWrap {
    margin-top: 10px;
  }
}

.relatedSlider .slick-list {
  overflow: visible;
}

.relatedSlider .slick-track {
  gap: 30px;
}

@media screen and (max-width: 767px) {
  .relatedSlider .slick-track {
    gap: 20px;
  }
}

.relatedSlider .slick-dots {
  display: none !important;
}

.relatedSlider .sliderPrev,
.relatedSlider .sliderNext {
  top: 80px;
}

.relatedSliderItem {
  width: 300px;
  transition: .3s;
}

.relatedSliderItem:hover {
  opacity: .7;
}

.relatedSliderImage {
  aspect-ratio: 300 / 200;
}

.relatedSliderImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.relatedSliderTitle {
  margin: 10px 0 0;
  font-size: 1.8rem;
  line-height: 1.4;
}

.relatedButtonWrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 50px 0 0;
}

@media screen and (max-width: 767px) {
  .relatedButtonWrap {
    margin-top: 20px;
  }
}


/*------------------------------------
	pr
-------------------------------------*/
.prBox {
  width: 728px;
  margin: 50px auto 0;
}

@media screen and (max-width: 767px) {
  .prBox {
    width: 100%;
    max-width: 300px;
  }
}

.prBox a {
  transition: .3s;
}

.prBox a:hover {
  opacity: .7;
}

.prBox img {
  width: 100%;
}

.noPostMessage {
  margin-block: 80px;
  font-size: 1.8rem;
  font-weight: var(--font-w-bold);
  text-align: center;
}

.bg1 .noPostMessage {
  color: #fff;
}


/*------------------------------------
	footer
-------------------------------------*/
.footer {
  padding: 40px 0 35px;
  background: #fff;
  border-top: solid 1px #987d11;
}

@media screen and (max-width: 767px) {
  .footer {
    padding: 28px 0;
  }
}

.footerWrap {
  position: relative;
}

.footerCompanyName {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 3rem;
  font-weight: var(--font-w-bold);
}

@media screen and (max-width: 767px) {
  .footerCompanyName {
    position: static;
    font-size: 2.5rem;
  }
}

.footerInner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .footerInner {
    flex-direction: column-reverse;
  }
}

.footerFollow {
  margin: 80px 0 0;
}

@media screen and (max-width: 767px) {
  .footerFollow {
    margin-top: 6px;
  }
}

.footerFollowHead {
  font-size: 1.8rem;
}

@media screen and (max-width: 767px) {
  .footerFollowHead {
    font-size: 1.5rem;
  }
}

.footerFollowList {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 18px 0 0;
}

@media screen and (max-width: 767px) {
  .footerFollowList {
    margin-top: 15px;
    font-size: 1.5rem;
  }
}

.footerLink {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 60px;
}

@media screen and (max-width: 767px) {
  .footerLink {
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin: 16px 0 0;
  }
}

@media screen and (max-width: 767px) {
  .footerLinkItem {
    width: 100%;
    padding: 20px 0;
    border-bottom: solid 1px #000;
  }

  .footerLinkItem:last-child {
    border-bottom: none;
  }
}

.footerLinkList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footerLinkList li {
  position: relative;
  font-size: 2.6rem;
  font-weight: var(--font-w-bold);
  line-height: 1.2;
}

@media screen and (max-width: 767px) {
  .footerLinkList li {
    font-size: 2rem;
  }
}

.navBtnFooter {
  display: none;
}

@media screen and (max-width: 767px) {
  .navBtnFooter {
    display: block;
    position: absolute;
    top: 8px;
    right: 10px;
  }

  .navBtnFooter::after {
    content: "";
    display: block;
    width: 15px;
    height: 6px;
    background: url(assets/img/arrow.png) no-repeat;
    background-size: contain;
    z-index: 1;
  }

  .navBtnFooter[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }
}

.footerLinkListArea {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 16px 0 0;
}

@media screen and (max-width: 767px) {
  .footerLinkListArea {
    height: 0;
    overflow: hidden;
    margin-top: 4px;
    padding: 0 10px;
  }
}

.footerLinkListArea li {
  font-size: 2rem;
  font-weight: var(--font-w-regular);
}

@media screen and (max-width: 767px) {
  .footerLinkListArea li {
    padding: 8px 0;
  }

  .footerLinkListArea li:last-child {
    padding-bottom: 0;
  }
}

.footerLinkList li a:hover {
  color: #8d7454;
}

/* --------- ページトップボタン ----------- */
#gPagetop {
  visibility: hidden;
  cursor: pointer;
  transition: .3s;
}

#gPagetop .pagetopBtn {
  display: block;
  width: 40px;
  height: 40px;
  position: fixed;
  right: 30px;
  background: #b69d71;
  border-radius: 50%;
  box-shadow: 0 2px 6px 0 #999691;
  z-index: 998;
}

@media screen and (max-width: 767px) {
  #gPagetop .pagetopBtn {
    width: 35px;
    height: 35px;
    right: 20px;
  }
}

#gPagetop .pagetopBtn:hover {
  background: #8d7454;
}

#gPagetop .pagetopBtn::after {
  content: "";
  display: block;
  width: 18px;
  height: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(assets/img/pagetop_arrow.png) no-repeat;
  background-size: contain;
}

@media screen and (max-width: 767px) {
  #gPagetop .pagetopBtn::after {
    width: 19px;
    height: 7.5px;
  }
}