@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400;500;700;800;900&display=swap');

/* ==========================================================================
   Color
   ========================================================================== */

:root {
  --mainColor: #C830CB;
  --textColor: #404040;
  --textColorP: #6D1EF1;
  --textColorW: #fff;
  --gradientColorA: linear-gradient(90deg, #C830CB 0%, #6D1EF1 100%);;
  --gradientColorB: linear-gradient(111deg, #EA1E63 0%, #6D1EF1 100%);
  --bgColor-p: rgba(200, 48, 203, 0.05);
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  color: var(--textColor);
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-feature-settings: 'palt' 1;
  font-feature-settings: 'palt' 1;
  letter-spacing: .1em;
}

* {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  margin: 0;
}

p {
  margin: 0;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

dl {
  margin: 0;
}

dd {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
}

a:hover {
  opacity: .8;
}

@media(max-width:767px) {
  .hidden-sm {
    display: none;
  }
}
@media(min-width:768px) {
  .hidden-lg {
    display: none;
  }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

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

.clearfix::before {
  content: "";
  display: block;
  clear: both;
}

.clearfix {
  display: block;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  width: min(100% - 60px, 1200px);
  margin: 0 auto;
}

.inner {
  max-width: 800px;
  margin: 0 auto;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: relative;
  background: #fff;
  padding: 14px 0;
  z-index: 10000;
}

.site-header__title {
  display: flex;
  align-items: center;
}

.site-header__container {
  width: min(100% - 60px, 1200px);
  margin: 0 auto;
}

.site-logo--link {
  display: flex;
  align-items: center;
  gap: 12px;
}
  
.site-icon {
  max-width: 68px;
  aspect-ratio: 68/74;
}
  
.site-name {
  font-size: clamp(20px, 3vw, 37px);
  font-weight: 700;
  color: var(--mainColor);
}

@media(max-width:767px) {
  .site-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
  }
  .site-icon {
    max-width: 42px;
  }
}

/* 検索フォーム */
.search-form_wrapper {
  position: relative;
  border: solid 1px var(--mainColor);
  padding: 12px 20px;
  display: flex;
  align-items: center;
}

.whole_search-wrapper .search-form_button {
  appearance: none;
  border: 0;
  background: var(--mainColor);
  color: #fff;
  border-radius: 999px;
  padding: .4em .8em;
  display: flex;
  align-items: center;
  gap: 4px;
  position: absolute;
  right: 20px;
  cursor: pointer;
}

.s-icon {
  display: block;
  background: url(../images/s-icon.svg) no-repeat center / contain;
  min-width: 16px;
  aspect-ratio: 1/1;
}

.search-form_input {
  font-size: 16px;
  appearance: none;
  border: 0;
  width: calc(100% - 90px);
}

.search-form_input::placeholder {
  color: #c1c1c1;
}

.search-form_input:focus {
  outline: none;
}

@media(max-width:767px) {
  .whole_search-wrapper .searchform {
    display: none;
  }
  #navbutton {
    position: relative;
    margin-left: auto;
    appearance: none;
    border: 0;
    background: none;
    min-width: 30px;
    height: 22px;
    padding: 0;
  }
  #navbutton .solid {
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 100px;
    background: var(--mainColor);
  }
  #navbutton .solid:first-of-type {
    top: 0;
    right: 0;
  }
  #navbutton .solid:nth-of-type(2) {
    top: calc(50% - 1px);
    right: 0;
  }
  #navbutton .solid:last-of-type {
    bottom: 0;
    right: 0;
  }
  #navbutton.is-active .solid:first-of-type {
    transform: rotate(320deg);
    top: 50%;
  }
  #navbutton.is-active .solid:nth-of-type(2) {
    display: none;
  }
  #navbutton.is-active .solid:last-of-type {
    transform: rotate(-320deg);
    top: 50%;
  }
}
@media(min-width:768px) {
  .whole_search-wrapper {
    width: 33%;
    margin-left: auto;
  }
  #navbutton {
    display: none;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--bgColor-p);
}

.site-footer__container {
  width: min(100% - 60px, 1200px);
  margin: 0 auto;
}

#menu-footer-menu li {
  font-size: 14px;
}

#menu-footer-menu li > a {
  color: var(--textColor);
}

.footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.footer-logo .site-icon {
  max-width: 42px;
}

.footer-logo .site-name {
  font-size: 14px;
  font-weight: 700;
}

.site-footer__copyright {
  background: #EEE;
  padding: 8px 0;
}

.site-footer__copyright p {
  font-size: clamp(10px, 3vw, 12px);
}

@media(max-width:767px) {
  .site-footer__contents {
    padding: 20px 0;
  }
  #menu-footer-menu li {
    text-align: center;
    margin: 0 0 1em 0;
  }
  .site-footer__copyright {
    letter-spacing: 0;
    text-align: center;
  }
}
@media(max-width:599px) {
  .site-footer__copyright p {
    font-size: 2.6vw;
  }
}
@media(min-width:768px) {
  .site-footer__contents {
    padding: 36px 0;
  }
  .site-footer__nav-area {
    padding-bottom: 32px;
  }
  #menu-footer-menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1em 0;
  }
  #menu-footer-menu li {
    display: flex;
  }
  #menu-footer-menu li:not(:last-of-type)::after {
    content: "";
    width: 1px;
    height: auto;
    background: var(--textColor);
    margin: 0 1em;
  }
  .site-footer__copyright {
    text-align: right;
  }
}

.scroll-footer {
  background: var(--gradientColorA);
}
.scroll-footer--link {
  display: block;
  text-align: center;
  padding: 20px 0;
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.breadcrumb-block {
  background: var(--bgColor-p);
  border-top: solid 1px #ccc;
}

.breadcrumb {
  padding: 1.5em 0;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #808080;
}

.breadcrumb__item--title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.breadcrumb__item:not(:last-child)::after {
  content: "›";
  margin-left: 8px;
}

.breadcrumb__link {
  color: var(--mainColor);
}
.breadcrumb__link > span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.breadcrumb__link .home-icon {
  display: inline-block;
  width: 16px;
  aspect-ratio: 1/1;
  background: url(../images/icon-bread-home.svg) no-repeat center / contain;
  margin: -.2em 0 0 0;
}

/* ==========================================================================
   Section (General)
   ========================================================================== */

.common-title {
  font-size: 40px;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 .5em;
  margin: 0 0 .8em 0;
}
.gradient-text {
  position: relative;
  z-index: 0;
  display: inline-block;
}
.gradient-text::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, #C830CB 0%, #6D1EF1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-transform: uppercase;
}
.shadow-text {
  text-shadow: 3px 3px 0 #FFF;
  color: transparent;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  text-transform: uppercase;
}
.sub-text {
  content: attr(data-name);
  font-size: 16px;
  color: var(--mainColor);
}

@media(max-width:767px) {
  .common-title {
    flex-direction: column;
    align-items: center;
  }
}
@media(max-width:768px) {
  .common-title {
    margin: 0 0 .6em 0;
  }
}

.category-tag {
  font-size: 14px;
  color: var(--textColorP);
  display: flex;
  align-items: center;
}
.icon-tag {
  display: block;
  min-width: 16px;
  aspect-ratio: 1/1;
  background: url(../images/icon-tag.svg) no-repeat center / contain;
}

.primary-btn,
.back-btn {
  position: relative;
  display: block;
  background: var(--mainColor);
  font-weight: 800;
  color: var(--textColorW);
  width: min(100%, 340px);
  margin-inline: auto;
  padding: 1em;
  border-radius: 999px;
  text-align: center;
}
.primary-btn::after,
.form-btn::after {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--textColorW);
  border-right: 2px solid var(--textColorW);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  right: 30px;
  top: calc(100% / 2 - 5px);
}
.form-btn {
  position: relative;
  width: min(100%, 340px);
  margin: 60px auto 0 auto;
}
.form-btn::after {
  top: calc(100% / 2 - 20px);
}
.back-btn::before {
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid var(--textColorW);
  border-left: 2px solid var(--textColorW);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  left: 30px;
  top: calc(100% / 2 - 5px);
}

/* 関連の記事 */
.related-block {
  margin: 40px 0 0 0;
}
@media (min-width: 768px) {
  .related-block .common-title {
      justify-content: flex-start;
  }
}

/* ==========================================================================
   Top Area
   ========================================================================== */

.hero-section {
  background: url(../images/main-bg.jpg) no-repeat center / cover;
  padding: 56px 0;
}

.hero-intro-title {
  position: relative;
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 700;
  z-index: 0;
  padding: 24px 1em 24px 0;
  color: var(--textColorW);
}
.hero-intro-title::after {
  content: "";
  width: calc(100% + 100vw); 
  height: 100%;
  background: var(--gradientColorB);
  border-radius: 0 999px 999px 0;
  position: absolute;
  top: 0;
  left: -100vw; 
  z-index: -1;
}

.hero-intro-text {
  margin-bottom: 1.5em;
}

.hero-intro-btn {
  color: var(--mainColor);
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.hero-intro-btn::after {
  content: "";
  display: inline-block;
  width: 8px;
	height: 8px;
	border-top: 1px solid var(--mainColor);
	border-right: 1px solid var(--mainColor);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

@media(max-width:840px) {
  .hero-section {
    padding: 30px 0;
  }
  .hero-intro-body {
    padding: 1.5em 0;
  }
  .hero-intro-text {
    display: none;
  }
}
@media(max-width:599px) {
  .hero-intro-title {
    font-size: 4.6vw;
  }
}
@media(min-width:841px) {
  .hero-flex {
    display: grid;
    grid-template-columns: 620fr 580fr;
  }
  .hero-intro-body {
    padding: 3.5em 0 0 0;
  }
  .hero-intro {
    padding: 0 56px 0 0;
  }
  .hero-pickup {
    position: relative;
    padding: 0 0 0 24px;
    overflow: hidden;
  }
}

.common-title.hero-pickup-title {
  margin: 0 0 .2em 0;
  justify-content: flex-start;
}

.pickup-slide-item {
  position: relative;
  overflow-x: hidden;
}

.pickup-slide-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pickup-slide-body {
  padding: 14px 20px;
}

.pickup-slide-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--textColor);
  margin: 8px 0 0 0;
}

@media(max-width:840px) {
  .slick-list {
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.10));
  }
  .slick-track {
    display: flex;
  }
  .pickup-slide-item.slick-slide {
    height: auto !important;
    background: #fff;
  }
  .pickup-slide-thumb {
    aspect-ratio: 350/234;
  }
}
@media(min-width:841px) {
  .pickup-slide-item {
    aspect-ratio: 560/410;
  }  
  .pickup-slide-thumb {
    width: calc(100% - 35px);
    aspect-ratio: 526/350;
  }
  .pickup-slide-body {
    width: calc(100% - 35px);
    background: #fff;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.10));
    position: absolute;
    bottom: 10px;
    right: 0;
  }
}

.slick-dots li {
  border: solid 1px var(--mainColor);
  width: 10px;
  height: 10px;
  border-radius: 999px;
}
.slick-dots li.slick-active {
  background: var(--mainColor);
}
.slick-dots button {
  appearance: none;
  border: 0;
  background: none;
  text-indent: -9999px;
  width: 10px;
  height: 10px;
}
@media(max-width:840px) {
  .slick-dots {
    display: flex;
    justify-content: center;
    gap: 1em;
    margin: 30px 0 0 0;
  }
}
@media(min-width:841px) {
  .slick-dots {
    display: flex;
    flex-direction: column;
    gap: .5em;
    position: absolute;
    bottom: 10px;
    left: -24px;
  }
}

.home-category-block {
  background: var(--bgColor-p);
  padding: 56px 0;
}
@media(max-width:767px) {
  .home-category-block {
    margin: 0 calc(50% - 50vw);
    padding: 30px calc(50vw - 50%);
  }
}
@media(min-width:768px) {
  .home-category-list {
    width: min(100% - 60px, 700px);
    margin-inline: auto;
  }
}

/* ==========================================================================
   Content Area
   ========================================================================== */

.content-wrapper {
  padding: 60px 0;
}

.main-list-wrapper:not(:last-of-type) {
  margin-bottom: 60px;
}

@media(max-width:767px) {
  .content-wrapper {
    padding: 30px 0;
  }
}
@media(min-width:768px) {
  .two-column-flex {
    display: grid;
    grid-template-columns: 16fr 7fr;
    gap: 4%;
  }
}

/* ==========================================================================
   Post Card (List View)
   ========================================================================== */

.card-post-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 30px;
}

.card-post-item {
  background: #FFF;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.10);
}

.card-post-thumb {
  aspect-ratio: 250/180;
}

.card-post-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-post-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--textColor);
  margin: 10px 0 0 0;
}

@media(max-width:840px) {
  .card-post-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media(max-width:599px) {
  .card-post-list {
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }
  .card-post-link {
    padding: 20px 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  .card-post-thumb {
    aspect-ratio: 120/90;
    width: 35%;
  }
  .card-post-body {
    flex: 1;
  }
  .post-card__category .icon-tag {
    min-width: 12px;
    margin-right: .5em;
  }
  .post-card__category.category-tag {
    font-size: 12px;
  }
  .card-post-title {
    margin: 5px 0 0 0;
  }
}
@media(min-width:600px) {
  .card-post-body {
    padding: 10px;
  }
}


/* ==========================================================================
   Category tag List
   ========================================================================== */

.home-category-list .category-block-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-block-item {
  background: #fff;
  border-radius: 5px;
  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.category-block-link {
  display: flex;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: background-color 0.3s;
  height: 100%;
}

.category-block-link:hover {
  background-color: #fafafa;
}

.category-block-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 47px;
  height: 100%;
  aspect-ratio: 1/1;
  background-color: var(--mainColor);
  color: #fff;
  flex-shrink: 0;
}
.category-block-name {
  font-weight: 400;
  flex-grow: 1;
  text-align: center;
  padding: .5em .5em;
  line-height: 1.4;
  letter-spacing: 0;
  display: grid;
  place-content: center;
}

@media (max-width: 840px) {
  .home-category-list .category-block-list {
      grid-template-columns: 1fr;
      gap: 15px;
  }
}

.cat-icon-at-home-montessori {
  display: block;
  background: url(../images/icon-home.svg) no-repeat center / contain;
  min-width: 24px;
  aspect-ratio: 1/1;
}
.cat-icon-basics {
  display: block;
  background: url(../images/icon-pen.svg) no-repeat center / contain;
  min-width: 30px;
  aspect-ratio: 1/1;
}
.cat-icon-development {
  display: block;
  background: url(../images/icon-growth.svg) no-repeat center / contain;
  min-width: 26px;
  aspect-ratio: 1/1;
}
.cat-icon-parenting {
  display: block;
  background: url(../images/icon-child.svg) no-repeat center / contain;
  min-width: 24px;
  aspect-ratio: 1/1;
}

/* ==========================================================================
   Post Article (Single View)
   ========================================================================== */


/* ==========================================================================
   Page Section
   ========================================================================== */

.page-contents h2 {
  font-size: 20px;
  font-weight: 500;
  background: var(--bgColor-p);
  padding: .2em .8em;
  margin: 0 0 1em 0;
  letter-spacing: 0;
}

.page-contents .wp-block-paragraph {
  margin: 0 0 1.6em 0;
}

.page-contents .wp-block-paragraph > a {
  color: var(--mainColor);
  text-decoration: underline;
}

.page-bg-wave {
  position: relative;
  background: url(../images/wave.jpg) no-repeat top left / calc(100% - 34%);
}
@media(max-width:767px) {
  .page-bg-wave {
    position: relative;
    background-size: contain;
  }
}
@media(min-width:768px) {
  .page-contents .common-title {
    justify-content: flex-start;
  }
}
@media(min-width:1301px) {
  .page-bg-wave {
    background-size: 64vw;
  }
}

/* About */
.page-section:not(:last-of-type) {
  margin-bottom: 60px;
}
.about-media-intro {
  display: grid;
  grid-template-columns: 3fr 1.8fr;
  align-items: center;
  gap: 30px 4%;
  margin-bottom: 30px;
}
.about-media-copy {
  font-size: 20px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0;
}
.text-line {
  background:linear-gradient(transparent 80%, rgba(200, 48, 203, 0.30)  80%);
}
@media(max-width:767px) {
  .about-media-intro {
    display: flex;
    flex-direction: column;
  }
  .about-media-copy {
    text-align: center;
  }
}

.about-feature-flex {
  display: flex;
  gap: 30px 4%;
  margin-bottom: 30px;
}
.about-feature-lead {
  font-weight: 500;
  margin: .6em 0;
}
.about-feature-lead,
.about-feature-text {
  letter-spacing: 0;
}
@media(max-width:767px) {
  .about-feature-flex {
    flex-direction: column;
  }
  .about-feature-visual img {
    margin-inline: auto;
  }
}
@media(min-width:768px) {
  .about-feature-flex {
    align-items: center;
  }
  .about-feature-flex.is-reverse {
    flex-direction: row-reverse;
  }
  .about-feature-body {
    flex: 3;
  }
  .about-feature-visual {
    flex: 1.8;
  }
}

.about-closing-section {
  background: var(--bgColor-p);
}
.about-closing-copy {
  text-align: center;
}
.about-closing-text {
  margin: 1.6em 0;
}
.about-closing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
}
.about-closing-btn {
  margin: 0;
}
@media(max-width:767px) {
  .about-closing-section {
    margin: 0 calc(50% - 50vw);
    padding: 32px calc(50vw - 50%);
  }
}
@media(min-width:768px) {
  .about-closing-section {
    padding: 32px 16px;
  }
}

/* Category */
.category-section .home-category-list {
  margin: 0;
}
@media(max-width:767px) {
  .category-list-container {
    padding-bottom: 24px;
  }
}

/* ==========================================================================
   Post List
   ========================================================================== */
.column-list {

}
.column-item {
  margin: 0 0 30px 0;
}
.column-link {
  color: var(--textColor);
}
.column-thumb {
  aspect-ratio: 3/2;
}
.column-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.column-date {
  display: block;
  font-size: 14px;
  color: #999;
  letter-spacing: 0;
}
.column-title {
  font-size: max(16px, min(3vw,20px) );
  font-weight: 500;
  margin: 0 0 .8em 0;
}
.column-excerpt {
  line-height: 1.8;
}
@media(max-width:767px) {
  .column-contents {
    padding: 1em 0 0 0;
  }
  .column-excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}
@media(min-width:768px) {
  .column-link {
    display: flex;
    gap: 4%;
  }
  .column-thumb {
    width: 36%;
  }
  .column-contents {
    flex: 1;
  }
  .column-date {
    margin: 0 0 1em 0;
  }
  .column-excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.page-numbers li {
  list-style: none;
}

.page-numbers a,
.page-numbers span {
  border: 1px solid var(--mainColor);
  color: var(--mainColor);
  text-align: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-content: center;
}

.page-numbers a:not(.next):not(.prev):hover,
.page-numbers .current {
  background-color: var(--mainColor);
  color: #fff;
}

.next.page-numbers,
.prev.page-numbers {
  border: 0;
}

.page-numbers .arrow {
  display: block;
  width: 7px;
  height: 7px;
}

.next.page-numbers .arrow {
  border-top: 1px solid var(--mainColor);
  border-right: 1px solid var(--mainColor);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.prev.page-numbers .arrow {
  border-bottom: 1px solid var(--mainColor);
  border-left: 1px solid var(--mainColor);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.sidebar-block {
  margin: 30px 0;
}

.widget-title {
  font-weight: 800;
  letter-spacing: 0;
  border-left: solid 10px var(--mainColor);
  padding: .8em;
  margin: 0 0 1em 0;
}

/* メニュー */
#menu-sidebar-nav li {
  margin: 0 0 10px 0;
}

#menu-sidebar-nav li > a {
  border: solid 1px var(--mainColor);
  color: var(--mainColor);
  font-weight: 800;
  display: flex;
  align-items: center;
  padding: .8em 1em;
}
#menu-sidebar-nav li > a::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--mainColor);
  border-right: 1px solid var(--mainColor);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-left: auto;
}
#menu-sidebar-nav li > a:hover {
  background: var(--mainColor);
  color: #fff;
}
#menu-sidebar-nav li > a:hover::after {
  border-top: 1px solid var(--textColorW);
  border-right: 1px solid var(--textColorW);
}

/* 検索 */
.sidebar-search_form .search-form_wrapper {
  border-radius: 5px;
  padding: 12px 1em;
}

.sidebar-search_form .search-form_input {
  flex: 1;
}

.sidebar-search_form .search-form_input::placeholder {
  opacity: 0;
}

.sidebar-search_form .search-form_button {
  appearance: none;
  border: 0;
  background: #fff;
}

.sidebar-search_form .s-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(54%) saturate(3176%) hue-rotate(280deg) brightness(86%) contrast(98%);
}

.sidebar-search_form .search-form_button > span {
  display: none;
}

/* タグ一覧 */
.search-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 15px 0 0 0;
}

.tags-link {
  font-size: 14px;
  font-weight: 300;
  color: var(--mainColor);
  display: block;
  border-radius: 5px;
  background: var(--bgColor-p);
  padding: .2em .5em;
  letter-spacing: 0;
}

/* カテゴリー */
.sidebar-category-list .category-block-item {
  margin-bottom: 10px;
}

.sidebar-category-list .category-block-name {
  justify-content: flex-start;
  padding: .5em 1em;
}

@media(max-width:767px) {
  .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: calc(100% - 30px);
    height: 100vh;
    background: #fff;
    overflow-y: scroll;
    transform: translateX(100%);
    transition: transform .8s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .js-slide-menu.is-active {
    transform: translateX(0);
    z-index: 1000;
  }
  .sidebar__container {
    padding: 90px 30px;
  }
  .layer {
    background: rgb(0 0 0 / 60%);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 999;
    visibility: hidden;
  }
  .layer.is-active {
    visibility: visible;
  }
}

/* ==========================================================================
   Single page
   ========================================================================== */

.post-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5em 2em;
}
.post-meta__date {
  font-size: 14px;
  color: #999;
  letter-spacing: 0;
}
.category-tag > a {
  color: var(--textColorP);
}

.post-article__title {
  font-size: 20px;
  font-weight: 500;
  border-bottom: solid 1px #ccc;
  padding: 10px 0;
}

/* シェアボタン */
.sns-share-block {
  position: relative;
  background: #EEE;
  font-size: 14px;
  width: max-content;
  margin: 8px 0 8px auto;
}
.is-open.sns-share-block,
.sns-share-block:hover {
  background: #FCF5FC;
}
.share-btn {
  padding: 1em;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.share-btn:hover {
  opacity: .8;
}
.icon-share {
  display: block;
  width: 16px;
  aspect-ratio: 1/1;
  background: url(../images/icon-share-solid.svg) no-repeat center / contain;
}
@media(max-width:767px) {
  .sns-share-block {
    margin: 16px 0 16px auto;
  }
}

.share-list {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  transform: translateY(10px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  width: 100%;
  padding-bottom: .5em;
}
.is-open .share-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  background: #FCF5FC;
}
.share-link {
  display: flex;
  align-items: center;
  gap: .4em;
  padding: .5em 1em;
  color: var(--textColor);
  letter-spacing: 0;
}
.share-icon {
  display: block;
  min-width: 16px;
  aspect-ratio: 1/1;
  filter: grayscale(1);
}
.link-icon {
  background: url(../images/icon-link.svg) no-repeat center / contain;
}
.line-icon {
  background: url(../images/icon-line.svg) no-repeat center / contain;
}
.insta-icon {
  background: url(../images/icon-insta.svg) no-repeat center / contain;
}
.x-icon {
  background: url(../images/icon-x.svg) no-repeat center / contain;
  height: 12px;
}
.mail-icon {
  background: url(../images/icon-mail.svg) no-repeat center / contain;
}
.share-link:hover .share-icon {
  filter: grayscale(0);
}
.share-link:hover {
  text-decoration: underline;
  color: var(--mainColor);
}

/* 記事内 */
.eye-catch {
  margin: 0 0 30px 0;
}
.post-article__content h1 {
  font-size: 20px;
  font-weight: 500;
  border-bottom: solid 1px #ccc;
  padding: 10px 0;
}
.post-article__content h2 {
  font-size: 20px;
  font-weight: 500;
  background: var(--bgColor-p);
  padding: .2em .8em;
  margin: 1em 0;
  letter-spacing: 0;
}
.post-article__content h3 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  border-left: solid 10px var(--mainColor);
  padding: .4em .8em;
  margin: 1.4em 0;
}
.post-article__content ul {
  list-style: disc;
  margin-left: 1.5em;
}
.post-article__content ul li {
  margin: .4em 0;
}
.post-article__content p {
  margin: 1em 0;
}
.post-article__content p + h2 {
  margin-top: 1.5em;
}
.post-article__content figure {
  margin: 1.5em 0;
}

/* 目次 */
#ez-toc-container {
  position: relative;
  margin: 0 0 30px 0;
  padding: 1em;
  border-radius: 0;
}
.ez-toc-title-container {
  text-align: center;
  padding: 0 0 1em 0;
}
#ez-toc-container nav {
    height: 8em;
    overflow-y: hidden;
}
.is-open#ez-toc-container nav {
  height: auto;
  overflow: visible;
}

.ez-toc-title-toggle {
  display: none;
}
.toc-toggle-btn {
  color: #868686;
  font-weight: 700;
  background: linear-gradient(180deg, transparent, #f9f9f9 50%, #f9f9f9);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 2em 1em 1em 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  cursor: pointer;
}
.is-open#ez-toc-container .toc-toggle-btn {
  position: static;
  padding: 1em 1em 0 1em;
}
#ez-toc-container .toggle-arrow {
  display: block;
  width: 8px;
  height: 8px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#ez-toc-container:not(.is-open) .toggle-arrow {
  border-right: 2px solid #868686;
  border-bottom: 2px solid #868686;
}
.is-open#ez-toc-container .toggle-arrow {
  border-left: 2px solid #868686;
  border-top: 2px solid #868686;
}

/* 前後の投稿 Nav */
.post-navigation {
  margin: 60px 0 0 0;
}
.post-navigation .nav-next,
.post-navigation .nav-prev {
  border-bottom: solid 1px #ccc;
  padding: 0 0 8px 0;
}
.post-navigation .nav-label {
  font-size: 20px;
  font-weight: 500;
  border-bottom: solid 1px #ccc;
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: .5em;
}
.nav-next .nav-label::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--textColor);
  border-right: 2px solid var(--textColor);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.nav-prev .nav-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-bottom: 2px solid var(--textColor);
  border-left: 2px solid var(--textColor);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.post-navigation .category-tag {
  margin: 8px 0;
}
.post-navigation .nav-title {
  color: var(--textColor);
}
.s-footer-btn {
  margin: 30px 0 0 0;
}
@media(max-width:767px) {
  .post-navigation {
    margin: 40px 0 0 0;
  }
}

/* ==========================================================================
   お問い合わせ
   ========================================================================== */

.form-container input[type="text"],
.form-container input[type="email"],
.form-container textarea {
  appearance: none;
  border-radius: 5px;
  border: 1px solid #CCC;
  width: 100%;
  font-size: 16px;
  padding: .5em;
}
.form-block {
  margin: 30px 0;
}
.form-text {
  margin: 0 0 1em 0;
}
.form-ck-text {
  letter-spacing: 0;
  line-height: 1.8;
}
.form-ck-text .wpcf7-list-item {
  margin: 0;
}
.form-ck-text > a {
  color: var(--mainColor);
  text-decoration: underline;
}
.form-btn .primary-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
}
.wpcf7-spinner {
  opacity: 0;
}

/* ==========================================================================
   Responsive Video (iframe)
   ========================================================================== */

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  margin: 30px 0;
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video iframe {
  width: 100%;
  height: 100%;
  border: none;
}