@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

html {
  height: 100%;
}

body {
	background-color: #ffffff;
}

img {
	-webkit-user-select: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-drag: none;
}

@media (min-width: 769px) {
  img.is-large-portrait {
    max-width: 440px;
    height: auto;
  }
}

/* 写真アニメーション */
img.fadeUp-target:not(.disableFadeUp) {
  opacity: 0;
}

img.fadeUp-active:not(.disableFadeUp) {
  animation: fadeUpAnime 2.5s forwards;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.l-header {
  display: none;
}

.l-footer {
    display: none;
}

.top #content {
    padding-top: 0!important;
}

@media (min-width: 600px) {
    .l-content {
        padding-top: 0!important;
    }
}
.l-content {
    margin:  0 auto!important;
    padding-top:  0!important;
}
.l-container {
    max-width: calc(var(--container_size, 0px) + var(--swl-pad_container, 0px) * 2);
    padding-left:  0!important;
    padding-right:  0!important;
}

.post_content ul ul {
  list-style: none;
}
.post_content ol, .post_content ul {
  padding-left: 0!important;
}
.post_content li {
  line-height: 1;
  margin: 0!important;
}

body {
  font-family: "EB Garamond", serif;
}

.l-article {
    max-width: 0!important;
    padding-left: 0;
    padding-right: 0;
}

.l-article {
    max-width: 1080px!important;
}

.l-mainContent__inner>.post_content {
    margin: 0!important;
    padding: 0!important;
}

.p-breadcrumb,
.c-pageTitle {
    display: none;
}

.sp-adjust {
  @media screen and (max-width: 767px) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
  }
}

.container {
  max-width: 1080px;
  margin: 132px auto 0;

  @media screen and (max-width: 767px) {
    margin: 0 auto;
    padding: 98px 0 0;
	  background-color: #ffffff;
    max-width: 100%;
  }
}

@media screen and (max-width: 767px) {
	main.top > .container {
		margin: 0 auto;
		padding: 0;
		background-color: transparent;
	}
}

.container__title {
  font-weight: 600!important;
  line-height: 1!important;
  margin-bottom: 47px!important;
  color: #2B2B2B!important;
  letter-spacing: 3px!important;
  font-family: "EB Garamond", serif;
  white-space: nowrap;
}

.container__titleLink {
	color: #2B2B2B;
	font-size: 18px!important;
}

.container__subTitle {
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  margin-top: 5px;
  margin-left: 11px;
  color: #2B2B2B;
}

.container__inner {
  display: flex;
  justify-content: flex-start;
  gap: 60px;
  margin-bottom: 8px;
  padding: 0 20px;
  
  @media screen and (max-width: 767px) {
    display: block;
  padding: 0;
  }
}

.container__content {
  display: flex;
  flex-direction: column;
	height: calc(100vh - 337px);
	justify-content: space-between;
  position: sticky;
  top: 132px;
  align-self: flex-start;

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

.container__list {
	display: inline-flex;
	flex-direction: column;
	gap: 16px;
	letter-spacing: 0.1em;
	list-style: none;
	font-size: 12px;
	padding-left: 0px!important;
}

.container__item {
  line-height: 1!important;
  margin: 0!important;
}

.container__itemLink-wrapper {
	min-width: 60px;
}

.container__itemLink {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #2B2B2B;
  position: relative;
  display: inline-block;
  transition: color 0.3s;
}
.container__itemLink::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #2B2B2B;
  transition: width 0.3s ease;
  flex-shrink: 0; 
}
.container__list:hover .container__itemLink {
  color: #aaa;
}
.container__list:hover .container__itemLink:hover {
  color: #2B2B2B;
}
.container__list:hover .container__itemLink:hover::after {
  width: 100%;
}

.container__list:hover .container__item--hasChild.is-active .container__itemLink-wrapper .container__itemLink {
  color: #2B2B2B !important;
}

.container__list:hover .container__item--hasChild.is-active .container__itemLink {
  color: #2B2B2B;
}

.container__item--hasChild {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.container__item.container__item--hasChild.is-active .container__itemLink {
	color: #2B2B2B;
}

.container__item--hasChild.is-active .container__itemLink::after {
  width: 100%;
}

.container__subList {
  margin-left: 24px;
  display: flex;
  flex-direction: column;
  list-style: none!important;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  max-height: 0;
  gap: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease-out, gap 0.4s ease-out, opacity 0.4s ease-out;

  &.is-visible {
    max-height: 500px; 
    gap: 12px;
    opacity: 1;
  }
  &:last-child {
    padding-bottom: 2px;
  }
}

.container__subItem {
  line-height: 1;
  opacity: 0;
  transform: translateY(-15px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.container__subList.is-visible .container__subItem {
  opacity: 1;
  transform: translateY(0);
}

.container__subItemLink {
  color: #2B2B2B;
  font-size: 14px;
  letter-spacing: 0.1em;
  position: relative;
  display: inline-block;
  transition: color 0.3s;
  &::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #2B2B2B;
    transition: width 0.3s ease;
  }
  &:hover::after {
    width: 100%;
  }
}
.container__subList:hover .container__subItemLink {
  color: #aaa;
}
.container__subList:hover .container__subItemLink:hover {
  color: #2B2B2B;
}
// 現在のページのサブメニュー：アクティブなものは黒＋下線、それ以外はグレー
.container__subList.has-current {
  .container__subItemLink {
    color: #aaa; // 全サブリンクをグレー
  }
  .container__subItemLink.is-current {
    color: #2B2B2B; // 現在のページのみ黒
    &::after {
      width: 100%; // 下線を表示
    }
  }
  .container__subItemLink:hover {
    color: #2B2B2B; // ホバー時は黒に戻す
  }
}
// 現在のページがある場合：全トップレベルリンクをグレー、アクティブのみ黒
.container__list.has-current {
  .container__itemLink {
    color: #aaa; // About / Works / Contact → グレー
  }
  .container__item--hasChild.is-active .container__itemLink {
    color: #2B2B2B; // Personal など現在ページの親 → 黒
    &::after {
      width: 100%; // 下線を表示
    }
  }
  .container__item > .container__itemLink.is-current {
    color: #2B2B2B; // About / Contact が現在ページの場合 → 黒
    &::after {
      width: 100%;
    }
  }
  .container__itemLink:hover {
    color: #2B2B2B; // ホバー時は黒に戻す
  }
}

.container__image {
  max-width: 660px;
  width: 100%;
  padding-top: 43px;

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

.container__image img {
  @media screen and (max-width: 767px) {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

.container__imageTitle {
  font-size: 12px;
  line-height: 1;
  color: #2B2B2B;
  margin-bottom: 5px;
  letter-spacing: 0.1em;

    @media screen and (max-width: 767px) {
      margin-bottom: 16px;
    }
}

.container__imageText {
  font-size: 12px;
  line-height: 1;
  color: #2B2B2B;
  margin-bottom: 12px;
  letter-spacing: 0.1em;
  font-family: "Zen Old Mincho", serif;
}

.footer {
  position: absolute;
}

.container__icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
	transition: ease scale .6s;
	&:hover {
		scale: 1.25;
	}
}

.container__copyrigtht {
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  color: #2B2B2B;
  margin-top: 24px;
}


/* ===============================================
# SP Hamburger Menu
=============================================== */

/* SP Header — mobile only */
.sp-header {
  display: none;
}

@media screen and (max-width: 767px) {
  .sp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 40px 20px;
    z-index: 200;
    mix-blend-mode: difference;
	color: #ffffff;
  }
}

.sp-header__title {
  font-family: "EB Garamond", serif;
  font-size: 18px;
  letter-spacing: 0.2em;
/*   color: #2B2B2B; */
	color: #ffffff;
  line-height: 1;
  font-weight: 400;
}

.sp-header__subTitle {
  margin-left: 12px;
  font-size: 10px;
/*   color: #2B2B2B; */
	color: #ffffff;
}

/* Hamburger Button */
.sp-hamburger-btn {
  width: 32px;
  height: 16px;
  position: relative;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sp-hamburger-btn span {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #fff;
  transition: transform 0.35s ease, opacity 0.35s ease;
  transform-origin: center center;
}

.sp-hamburger-btn.is-active span:nth-child(1) {
  transform: rotate(26deg) translate(5.5px, 5.5px);
  background-color: currentColor;
}

.sp-hamburger-btn.is-active span:nth-child(2) {
	opacity: 0;
	transform: translateX(3px);
}

.sp-hamburger-btn.is-active span:nth-child(3) {
  transform: rotate(-26deg) translate(5.5px, -5.5px);
  background-color: currentColor;
}

/* SP Nav Overlay */
.sp-nav {
  display: none;
}

@media screen and (max-width: 767px) {
  .sp-nav {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.97);
    z-index: 199;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 80px 89px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
  }

  .sp-nav.is-open {
    opacity: 1;
    visibility: visible;
  }
}

.sp-nav__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  width: 100%;
}

.sp-nav__item {
  line-height: 1;
  border-bottom: 1px solid #BFBFBF;
  padding: 11px 0;
  display: flex;
  justify-content: space-between;

  &:first-child {
    padding-top: 0;
  }

  &:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

.sp-nav__link {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #2B2B2B;
  text-decoration: none;
  font-family: "EB Garamond", serif;
  display: inline-block;
  transition: color 0.3s;
}

.sp-nav__subList {
  display: flex;
  flex-direction: column;
  list-style: none;
  min-width: 88px;
}

.sp-nav__subItem {
  line-height: 1;
  border-bottom: 1px solid #BFBFBF;
  padding: 11px 0;

  &:first-child {
    padding-top: 0;
  }

  &:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

.sp-nav__subLink {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #2B2B2B;
  text-decoration: none;
  font-family: "EB Garamond", serif;
  transition: color 0.3s;
}

.sp-nav__icon {
  margin-top: 46px;
}

.sp-nav__iconImg {
  width: 100%;
  width: 16px;
  height: 16px;
}

.sp-footer {
  display: none;

  @media screen and (max-width: 767px) {
    display: block;
    padding: 40px 20px;
  }
}

.sp-footer__copyrigtht {
  display: none;
  
  @media screen and (max-width: 767px) {
    display: block;
    font-size: 10px;
    line-height: 1;
    color: #2B2B2B;
    font-family: "EB Garamond", serif;
  }
}

/* ===============================================
# TOP
=============================================== */

.top {
  .sp-header__title,
  .sp-header__subTitle {
    color: #fff;
  }

  .sp-hamburger-btn span {
    background-color: #fff;
  }

  .sp-hamburger-btn.is-active span:nth-child(1),
  .sp-hamburger-btn.is-active span:nth-child(3) {
    background-color: #2B2B2B;
  }
  .container {
    @media screen and (max-width: 767px) {
      margin-top: 0px;
    }
  }

  .container__image img {
    @media screen and (max-width: 767px) {
      width: 100%;
      height: 100vh;
      object-fit: cover;
    }
  }
}

/* ===============================================
# about
=============================================== */

.container__about {
    padding: 60px 0 0;
  @media screen and (max-width: 767px) {
    padding: 60px 35px 0;
  }
}

.container__aboutContent {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.container__aboutContentinner {
  display: flex;
  flex-direction: column;
}

.container__aboutTitle {
  font-size: 12px;
  line-height: 2;
  color: #2B2B2B;
  font-family: "Zen Old Mincho", serif;
  font-weight: 900;
  letter-spacing: 0.05rem;
}

.container__aboutText {
  font-size: 12px;
  line-height: 2;
  color: #2B2B2B;
  font-family: "Zen Old Mincho", serif;
  font-weight: normal;
  display: inline-flex;
  gap: 12px;
}

/* ===============================================
# aridagawa
=============================================== */
.customPostContent {
  margin: 64px 0 130px;
  @media screen and (max-width: 767px) {
    margin: 0 20px;
  }
}

.customPostContent__inner {
  max-width: 660px;
  width: 100%;

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

.customPostContent__title {
  font-size: 14px;
  line-height: 1;
  color: #2B2B2B;
  font-family: "EB Garamond", serif;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 10px;

  @media screen and (max-width: 767px) {
    margin-bottom: 13px;
  }
}

.customPostContent__text > p {
  font-size: 12px;
  line-height: 1;
  color: #2B2B2B;
  font-family: "EB Garamond", serif;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 12px;

  @media screen and (max-width: 767px) {
    margin-bottom: 16px;
  }
}

.wp-block-image {
  margin-bottom: 64px;
  max-width: 100%;
  height: auto;

  &:last-child {
    margin-bottom: 0;
  }

  @media screen and (max-width: 767px) {
    margin-bottom: 16px;
  }
}


/* ===============================================
# contact
=============================================== */

.wpcf7-form.init {
  width: 100%;
  min-width: 330px;

  @media screen and (max-width: 767px) {
    padding: 0 20px;
    min-width: 350px;
  }
} 

.contact__heading {
  font-size: 14px;
  line-height: 1;
  margin-bottom: 16px;
  color: #2B2B2B;
  letter-spacing: 0.1em;
  font-family: "EB Garamond", serif;
  font-weight: 500;
}

.contact__field {
  margin-bottom: 20px;
}

.contact__title {
  font-size: 14px;
  line-height: 1;
  margin-bottom: 24px;
  color: #2B2B2B;
  letter-spacing: 0.1em;
  font-family: "EB Garamond", serif;
  font-weight: 500;
}

.contact__messageTitle {
  font-size: 12px;
  line-height: 2;
  color: #2B2B2B;
  font-family: "Zen Old Mincho", serif;
  font-weight: 900;
}

.contact__messageText {
  font-size: 12px;
  line-height: 2;
  color: #2B2B2B;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
}

.wpcf7 {
  margin-top: 64px;
  max-width: 330px;
  width: 100%;

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

.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
  font-size: 12px;
  line-height: 2;
  color: #2B2B2B;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  padding: 4px 10px;
  width: 100%;
  display: inline-block;
  background-color: #ffffff;
  border: 1px solid #2B2B2B;
  margin-top: 0;

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

.wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required {
  font-size: 12px;
  line-height: 2;
  color: #2B2B2B;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  padding: 4px 10px;
  width: 100%;
  display: inline-block;
  background-color: #ffffff;
  border: 1px solid #2B2B2B;
  height: 100%;
  max-height: 190px;

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

.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required::placeholder,
.wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required::placeholder {
  color: #BFBFBF;	
}

textarea {
  margin-top: 8px;
}

.wpcf7-form-control.wpcf7-submit.has-spinner {
  background-color: #2B2B2B;
  padding: 7px 16px;
  font-size: 14px;
  line-height: 1;
  margin-top: 24px;
  color: #fff;
  letter-spacing: 0.1em;
  font-family: "EB Garamond", serif;
  font-weight: 500;
}

.required {
  color: #DB372D;
}

.splide {
  width: 100%!important;
  margin: 66px 0 0 !important;
  max-width: 660px;

  @media screen and (max-width: 767px) {
    margin: 0!important;
    max-width: 100%;
  }
}

.splide__slide {
  picture {
    display: block;
    width: 100%;
  }

  img {
    width: 100%;
    height: auto;
    display: block;

    @media screen and (max-width: 767px) {
      height: 100vh;
      object-fit: cover;
    }
  }
}

.container__list.has-current .container__itemLink,
.container__list.has-current .container__subItemLink {
  color: #aaa;
}

.container__item.container__item--hasChild.is-active > .container__itemLink {
  color: #2B2B2B!important;
}

.container__subItemLink.is-current {
  color: #2B2B2B!important;
  position: relative;
  display: inline-block;
  transition: color 0.3s;
}

.container__subItemLink.is-current::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #2B2B2B;
    transition: width 0.3s ease;
    flex-shrink: 0;
}

.no-transition {
  transition: none !important;
}

/* .sp-hamburger-btn__bar.over-image {
  background-color: #d0d0d0!important;
}

.sp-header__title.over-image {
  color: #d0d0d0!important;
}

.sp-header__subTitle.over-image {
	color: #d0d0d0!important;
} */