/*
Theme Name: Custom IM Theme
Author: Your Name
Description: Custom WordPress Theme 
Version: 1.0
*/

/* テーマカラー　color: #6dbfa3; */
/* 全てに適応される記述 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
   }
:root {
   --base-color: #6dbfa3;
   --main-color: #f9f9f2;
   --main-r-color: rgba(249, 249, 242, 0.6);
   --bg-accent-color: #f1eeee;  
   --text-color: #585858;  
}
/* 記述例
color: var(--base-color);
color: var(--bg-accent-color);
*/
body {
   font-family: Arial, serif;
   color: var(--text-color);
font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

a {
   display: inline-block;
}
a:hover {
   opacity: 0.8;
   transition: color 0.3s ease;
}
p {
   line-height: 1.8em;
   letter-spacing: 0.03em;
}
img {
   width: 100%;
	height: auto;
   vertical-align: bottom;
   object-fit: cover;
}
.container {
   margin-top: 120px;
}
@media(max-width: 768px) {
.container {
   margin-top: 40PX;
}
}
.section__inner {
   max-width: 1025px;
   margin: 0 auto;
   padding: 0 25px;
	margin-bottom: 120px;
}
@media(max-width: 768px) {
.section__inner {
   margin-bottom: 60px;
   }
}
.section__inner-pcnly {
   max-width: 1025px;
   margin-inline: auto;
   padding-inline: 25px;
	margin-bottom: 120px;
}
@media(max-width: 768px) {
.section__inner-pcnly {
   max-width: none;
   margin-inline: 0;
   padding-inline: 0;
	margin-bottom: 60px;
}
}
.color__base {
   color: var(--base-color);
}
/* 余白セット */
.mt_20 { margin-top: 20px; }
.mt_40 { margin-top: 40px; }
.mt_70 { margin-top: 70px; }
.mt_200 {margin-top: 200px; }
.mt_300 { margin-top: 300px; }
.mb_18 { margin-bottom: 18px; }
.mb_10 { margin-bottom: 10px; }
.mb_80 {margin-bottom: 80px; }
.mb_10_inline_block {
   margin-bottom: 10px;
   display: inline-block;
}
.pt_20 { padding-top: 20px; }
.padding_10 { padding: 10px; }

.text-align-center {
   text-align: center;
}
.border-top {
   border-top: 1px solid #585858;
}
.pc-only {
	   display: block;
   }
.sp-only {
	   display: none;
   }
@media(max-width: 768px) {
   .pc-only {
	   display: none;
   }
   .sp-only {
	   display: block;
   }
}


/* 配下ページのコンテナー設定 */
.sub-container {
    padding-top: 110px;
    padding-inline: 20px;
    max-width: 680px;
	margin-inline: auto;
}
@media(max-width: 768px) {
.sub-container {
   padding-top: 90px;

	}
}
/* 要素が少ないとフッターが上がるのを防ぐ */
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.footer {
    margin-top: auto;
}
/* 要素が少ないとフッターが上がるのを防ぐ ここまで*/
/* ---------------------------------ヘッダー */
.header {
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 1000;
   height: 80px; /* 初期の高さ */
}
.main-header {
   transition: all 0.3s ease;
}
#menu {
  scroll-margin-top: 80px; 
}
@media(max-width: 768px) {
.main-header {
   height: 62px; 
   }
#menu {
  scroll-margin-top: 120px; 
}
}

.header-inner {
   height: inherit;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-left: 25px;
   padding-right: 25px;
   max-width: 1025px;
   margin: 0 auto;
   letter-spacing: 0.12em;
   font-size: 1.2em;
}
.contact-header {
   text-align: center;
}
.main-menu ul{
   display: flex;
   gap: 30px;
	font-family: "Cormorant Garamond", serif;
	 font-weight: 300;
	 font-style: normal;
}

/* ナビゲーションの文字色をトップとその他で条件分岐 */
/* バーガーメニューの色分け　TOPのみ */
.nav-front a {
   color: #eee;
}

/* 他のページ */
.nav-default a,
.main-header.scrolled .nav-front a {
   color: #585858;
}

.header-inner .logo img {
   width: 128px;
   height: 64px;
}
@media(max-width: 768px) {	
	.header-inner .logo img {
   		width: 84px;
   		height: 42px;
	}
   
	.mobile-menu ul {
		text-align: center;
   		line-height: 4em;
   		color: #6dbfa3;
   }	
}

/* ------ヘッダー スクロールアップ　start　*/

/* スクロール後のスタイル */
.main-header.scrolled {
   background-color: rgba(255,255,255,0.8);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 軽い影を追加 */
   padding: 0; /* スクロール後のパディングを少なく */
   height: 75px; /* スクロール後の高さを小さく */
   transition: all 0.3s ease; /* スムーズに変化 */
}

/* ヘッダーの縮小 */
.main-header .logo a {
   font-size: 1.5rem;
   transition: font-size 0.3s ease;
}

.main-header.scrolled .logo a {
   font-size: 1.2rem; /* 縮小後のサイズ */
}
/*-----ヘッダー スクロールアップ　end　*/
/* ---------------------------------ヘッダー (ロゴのみ)　*/
.contact-header {
   justify-content: center;
}
@media(max-width: 768px) {
   .header-inner.contact-header .logo {
	   display: block;
   }
   .header-inner.contact-header {
	   justify-content: center;
   }
   .main-header.scrolled {
	   height: 57px; /* スクロール後の高さを小さく */
   }
}

/* ---------------------------------トップページ */
/* ---------------------------------メインビュー */
.mainvview {

}
.mainvview__inner {
   display: flex;
   position: relative;
   object-fit: cover;
}
.mainvview__title-l {
   font-family: "Crimson Text", serif;
    font-weight: 400;
    font-style: normal;
   margin-bottom: 1em;
   font-size: 2.5em;
   letter-spacing: 0.3em;
}
.mainvview__title-s {
	font-family: "Crimson Text", serif;
    font-weight: 400;
    font-style: normal;
   font-size: 1.6em;
   line-height: 2.2em;
}
.mainvview__title {
   position: absolute;
   top: 50%;
   left: 25%;
   transform: translate(-50%, -50%);
   z-index: 10; /* スライダーの上に配置 */
   color: #eee; /* 文字色を白に */
   margin-top: 90px;
}
@media(max-width: 768px) {
	.mainvview__title {
		left: 50%;
   		top: 23%;
		width: 86%;
	}
	.mainvview__title-l {
        font-size: 2.2em;
}
	.mainvview__title-s {
   		font-size: 1.3em;
	}
}
/* スライダー */
.slider-pc,.slider-sp {
   width: 100%;
   height: auto;
}

.slider-pc img,.slider-sp img {
   width: 100%;
   height: 100svh;
   object-fit: cover;
   object-position: center; /* 通常は中央 */
   display: block;
}


/* ズームアウト */
.slider-pc img,
.slider-sp img {
  transform: scale(1.1);
  transition: transform 4s ease-out;
  transform-origin: center center;
}

.slick-active img {
  transform: scale(1);
}
/* 最初にゆっくり表示 */
.slider-pc,.slider-sp {
  opacity: 0;
  animation: fadeInSlider 2s ease-out forwards;
  animation-delay: 0.2s; /* 読み込み後、少し間を置いてから表示開始 */
}
@keyframes fadeInSlider {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------------------------------コンセプト */
.content {
   display: flex;
   justify-content: center;
}
.concept__container {
   padding-bottom: 10px;
}
.content .left {
   width: 50%;
   padding-right: 10px;
}
.content .right {
   width: 50%;
   padding-left: 10px;
}
.section__img {
   object-fit: cover;
   width: 100%;
}
.section__title {
   font-weight: 300;
   font-size: 1.5em;
   color: #6dbfa3;
   margin-bottom: 15px;
}
.section__title-en {
   font-family: "Cormorant Garamond", serif;
	 font-weight: 300;
	 font-style: normal;
   font-size: 0.8em;
   margin-bottom: 12px;
}
.img-sub {
   display: flex;
   gap: 20px;
   padding-left: 50px;
   position: relative;
}
.img-sub__inner-l img{
   object-fit: cover;
   width: 150px;
}
.img-sub__inner-r img{
   object-fit: cover;
   width: 200px;
}
.img-sub__inner-r2 img{
   object-fit: contain;
   width: 200px;
   height: auto;
   position: absolute;
   top: 15%;
   right: 5%;
	z-index: 10;
}
.lymp__container {
   flex-direction: row-reverse;
}
.lymp .left {
   padding-left: 10px;
}
.lymp .right {
   padding-right: 10px;
}
@media(max-width: 768px) {
   .content {
	   display: block;
   }
   .content .left {
	   width: 100%;
	   padding: 20px 0;
   }
   .content .right {
	   width: 100%;
	   padding-right: 0;
	   padding-left: 0;
	   padding-bottom:10px;
   }
   .img-sub {
	   padding-left: 0;
   }
   .img-sub__inner-l img {
	   width: 100px;
	   height: 140px;
   }
   .img-sub__inner-r img {
	   width: 140px;
	   height: 100px;
   }
   .img-sub__inner-r2 img {
	   width: 120px;
	   top: 32%;
	   right: 0;
   }
   .section__title {
	   font-size: 1.3em;
   }
   .section__img {
	   padding-left: 0;
   }
   .section__img {
	   padding-right: 0;
   }
}
/* -------------------------------------メニューのスライダー */

/* ドットのスタイル */
.slick-dots {
   display: flex !important;
   justify-content: center;
   align-items: center;
   gap: 2px; /* ドットの間隔 */
   list-style: none; /* デフォルトのリストスタイルを削除 */
   padding: 0;
   margin-top: 15px; /* 必要に応じて調整 */
}

.slick-dots li {
   display: inline-block;
}

.slick-dots li button {
   font-size: 0;  /* 数字を非表示 */
   width: 20px;
   height: 6px;
   background-color: #ccc; /* ドットの色 */
   border: none;
}

.slick-dots li.slick-active button {
   background-color: #666666; /* アクティブ時の色 */
}

.slider-front-menu {
   position: relative;
}

.front-menu__text {
   position: absolute;
   top: 50%;
   left: 5%;
   transform: translatey(-50%);
   width: 42%;
   background: rgba(255, 255, 255, 0.8);
   padding: 3em;
}
@media(max-width: 768px) {
.front-menu__text {
   left: 5%;
   width: 90%;
   padding: 1em;
   }
}

/* メニューページへのリンク */
.menu-link {
   width: 100%;
   text-align: right;

}
.arrow-link {
   padding-right: 120px;
	   position: relative;
}
.arrow-link::after {
   position: absolute;
   content: "";
   top: -8px !important;
   right: 32px !important;
   width: 58px;
   height: 28px;
   background-image: url(/wp-content/themes/custom_im_theme/images/arrow_common.svg);
   background-size: contain;
   background-repeat: no-repeat;
}
@media(max-width: 768px) {
.menu-link {
	padding-top: 40px
   }
}
/* -------------------------------------image-movie */
.image-movie video {
   width: 100%;
}
/* -------------------------------------map */
.info {
    background-color: #ebfcf3;	
    padding-block: 20px;
}
.info-left {
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;	
}
.imginfo img {
	width: 60%;
    height: auto;
	background-color: #fff;
}

.imginfo {
	text-align: center;
	
}
.info table {
	margin-inline: auto;
	line-height: 2em;
    letter-spacing: .2em;
}
.info table td {
	padding-left: 1.5em;
}
.info table th {
	font-weight: normal;
}
.item-map {
  /* グーグルマップをグレースケールにする */
  filter: grayscale(1);
}
/* -------------------------------------sns */
.sns__container {
	display: grid;
    grid-template-columns: repeat(2, 50px);
    gap: 60px;
    width: fit-content;
    margin-inline: auto;
    margin-block: 60px;
}
.contact__text {
	background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(./images/concept.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	padding-block: 80px;
}

.contact__text a {
font-size: 1.5em;
    padding: 10px 30px;
    background-color: #b4b1ab;
	color: #fff;

}

/* 右向き矢印（next） */
.more-link_arrow.top a::before {
  width: 93px;
  bottom: 0;
  left: 16px;
}
.more-link_arrow.top a::after {
  width: 18px;
	bottom: 6px;
    right: 20px;
  rotate: 40deg;
}

.more-link_arrow.top a:hover::after,
.more-link_arrow.top a:hover::before {
  translate: 20px 0;
}
/* -------------------------------------------------------トップページ ここまで */
/* -------------------------------------Aboutページ */
.mainvview-about {
   display: flex;
}
.aboutus {
   background-color: #cccccc;
   padding: 8% 5%;
   position: absolute;
   left: 2%;
   top: 70%;
}
.section__title.lymp {
   color: #333;
}
.ab_lymp {
   background-image: url("/wp-content/themes/custom_im_theme/images/imgab3.webp");
   background-repeat: no-repeat;
   background-size: cover;
   padding: 120px 50px;
   color: white;
}
.meritt {
   background-color: var(--main-color);
   padding: 0;
}
.meritt_number {
   display: flex;
   align-items: center;
   gap: 10px;
}
.meritt_numbers {
   width: 40px;
	 height: 40px;
	 padding-top: 10px;
	 border-radius: 50%;
   background-color: #cccccc;
   color: white;
	 text-align: center;
	 box-sizing: border-box;
}
.meritt__container {
   padding-left: 20%;
}
@media(max-width: 768px) {
   .meritt .right {
	   padding-bottom: 0;
   }
   .aboutus {
	   top: 64%;
   }
}
/* -------------------------------------Menu  */
.menu__container {
	position: relative;
	padding-top: 140px;
}
.menu__title {
	position: absolute;
	top: 32px;
    left: 50%;
	transform: translatex(-50%);
	font-size: 2.1em;
}
@media(max-width: 768px) {
	.menu__title {
	top: 70px;
}
}
.menu-section__items {
    position: relative;
}
.menu-section__img {
    object-fit: cover;
    width: 50%;
	margin-left: auto;
}
.menu-section__item {
   display: grid;
   grid-template-columns: 1fr;
   gap: 80px;
}
.menu__text {
	position: absolute;
    top: -35px;
    left: 0;
    z-index: -1;
    width: 60%;
    height: 230px;
    background-color: var(--bg-accent-color);
    line-height: 1.8em;
    padding: 32px 12% 32px 32px;
}
.menu__text p{
	padding-top: 1em;
}
.text-m {
    font-size: 1.2em;
    position: relative;
    display: inline-block;
}

.text-m::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px; /* テキストと線の間隔 */
    width: 100%;
    height: 1px;
    background-color: var(--text-color);
}

@media(max-width: 768px) {
	.menu__container {
		padding-top: 310px;
	}
	.menu-section__item {
    	gap: 224px;
	}
	.menu__text {
    	position: absolute;
    	top: -172px;
    	left: 0;
    	z-index: -1;
    	width: 86%;
    	height: 224px;
    	padding: 32px 32px 50px 32px;
}
	.menu-section__img {
    	width: 76%;
	}
}
/* ---------------------------------お問い合わせ */
label {
   display: inline-block;
   margin-bottom: 25px;
}
.hissu {
   background: #df6a6a;
   padding: 4px 4px;
   border-radius: 4px;
   font-size: 12px;
   color: #fff;
   margin-right: 10px;
}
.wpcf7-form-control {
   display: block;
   width: 100%;
   height: calc(1.5em + .75rem + 2px);
   padding: .375rem .75rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: #495057;
   background-color: #fff;
   background-clip: padding-box;
   border: 1px solid #ced4da;
   border-radius: .25rem;
   transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.container__inner {
   width: fit-content;
   margin-inline: auto;
}
/* ------------------------------------------home.php(投稿一覧ページ) */

.category-links {
   display: flex;
   justify-content: center;
}

.post-archive {
   padding: 20px;
}

.post-archive h1 {
   font-size: 2rem;
   margin-bottom: 20px;
}

.category-links__inner {
   padding-bottom: 20px;
}
.category-links__inner li {
   margin-bottom: 20px;
}
.post-archive .btn {
   padding: 15px 25px;
   background-color: #f9f9f2;
   display: block;
   border-radius: 10px;
   width: 200px;
}
.post-archive--li {
   padding: 25px;
border-bottom: 1px solid #ccc; /* 薄いグレーの線 */
}
.post-archive--li a {
	text-align:center;
	width: 100%;
}
/* .post-archive a {
   font-size: 1.2rem;
   text-decoration: none;
} */
.pagination a {
	font-size: 1.2rem;
   text-decoration: none;
}
.post-archive a:hover {
   opacity: 0.8;
}
@media(max-width: 768px) {
   .post-archive--li {
	   padding: 25px 0;
   }
}


/* ---------------------------------single.php(個別投稿ページ) */
.post-meta {
   font-size: 0.9rem;
   color: #666;
   margin-bottom: 20px;
}

.post-content {
   line-height: 1.6;
   font-size: 1rem;
}
.post__inner {
   padding: 20px 50px;
   max-width: 800px;
   margin: 75px auto;
}
@media (max-width: 600px) {
    .wp-block-media-text.is-stacked-on-mobile {
        grid-template-columns: 100% !important;
        gap: 20px;
        margin-bottom: 20px;
    }
}
/* -----------------ページネーション */
.post-navigation {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 20px;
   padding: 25px 0 25px 30px;
   border-top: 1px solid #ddd;
}

.post-navigation .nav-previous,
.post-navigation .nav-next,
.post-navigation .nav-home {
   flex: 1;
   text-align: center;
}

.post-navigation .nav-home {
   text-align: center;
   flex: 2;
}
/* もっと見るボタン */
.more-link {
  text-align: right;
  margin-top: var(--common-margin-top);
	width: fit-content;
    margin-left: auto;
	padding-right: 10px;
}
.more-link_arrow a {
  color: var(--mainDark-c);
  font-weight: 400;
  display: block;
  position: relative;
  box-sizing: border-box;
  max-width: 130px;
  text-align: center; 
  padding: 4px 31px 7px 2px;
  margin: 24px;
  margin-left: auto;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
}

.more-link_arrow a::before,
.more-link_arrow a::after {
  content: "";
  display: block;
  position: absolute;
  height: 1px;
  background: #333;
  transition: all 0.3s;
}

/* 右向き矢印（next） */
.more-link_arrow.next a::before {
  width: 81px;
  bottom: 0;
  left: -13px;
}
.more-link_arrow.next a::after {
  width: 18px;
  bottom: 5px;
  right: -3px;
  rotate: 40deg;
}

.more-link_arrow.next a:hover::after,
.more-link_arrow.next a:hover::before {
  translate: 20px 0;
}

/* 左向き矢印（prev） */
.more-link_arrow.prev a::before {
  width: 81px;
  bottom: 0;
  right: -13px;
}
.more-link_arrow.prev a::after {
  width: 18px;
  bottom: 5px;
  left: -3px;
  rotate: -40deg;
}


/* 投稿一覧へのボタンデザイン */
.more-link_arrow.prev a:hover::after,
.more-link_arrow.prev a:hover::before {
  translate: -20px 0;
}
.more-link_arrow.prev a::before {
  right: 12px;
}
.more-link_arrow.prev a::after {
  left: -29px;
}
/* prevがないとnextが左によってしまう対策 */
.more-link_arrow.empty {
  visibility: hidden;
  width: 100px; /* 適度な幅を指定（ボタンと同じ幅程度） */
}

.nav-home a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ccc;  
  border: 2px solid #ccc; 
  color: #fff;
  border-radius: 5px;         
  text-decoration: none;      
  transition: background-color 0.3s, color 0.3s;
}

.nav-home a:hover {
	border: 2px solid #ccc;
	color: #ccc; 
	background-color: transparent;
}
/* .nav-home a {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid #ccc; 
  border-radius: 5px;         
  text-decoration: none;      
  transition: background-color 0.3s, color 0.3s;
}

.nav-home a:hover {
  background-color: #ccc;  
  color: #fff;
} */

/* ---------------------------------フッター */
.footer {
   background-color: #cccccc;
   padding: 20px;
   color: white;
}
.footer__inner-text {
   text-align: center;	
}
.footer .main-menu ul {
	justify-content: center;
	padding-bottom: 10px;
	font-size: 1.2em;
}
/* ---------------------------------archive.phpのスタイル */
.archive-post-item a {
   display: inline;
}
.read-more {
   font-size: 0.8em;
}

/*----------------------------------- ハンバーガーメニュー */
/* スマホサイズのスタイル */
@media(max-width: 768px) {
   .hamburger-icon {
	   display: inline-block;
	   cursor: pointer;
	   position: relative;
	   width: 30px;
	   height: 24px;
	   z-index: 1000;
	}
   .hamburger-icon span {
	   display: block;
	   position: absolute;
	   width: 30px;
	   height: 3px;
	   background-color: #6dbfa3;
	   border-radius: 2px;
	   transition: all 0.3s ease-in-out;
   }
   .hamburger-icon span:nth-child(1) {
	   top: 0;
   }
   .hamburger-icon span:nth-child(2) {
	   top: 10px;
   }
   .hamburger-icon span:nth-child(3) {
	   top: 20px;
   }
	
   /* ハンバーガーメニューが開かれたとき */
   .hamburger-icon.active span:nth-child(1) {
	   top: 10px;
	   transform: rotate(45deg);
   }
   .hamburger-icon.active span:nth-child(2) {
	   opacity: 0; /* 真ん中の線を非表示 */
   }
   .hamburger-icon.active span:nth-child(3) {
	   top: 10px;
	   transform: rotate(-45deg);
   }

  .mobile-menu {
	     position: fixed;
    top: 0;
    right: -220px;
    width: 220px;
    height: 100svh;
/* 	display: none; */
	background-color: #fff;
	transition: transform 0.3s ease; /* ← 時間を長くしてゆっくりに */
	z-index: 999;
}

.mobile-menu.active {
/* 	display: block; */
	transform: translateX(-100%); /* 右からゆっくり出現 */
	transition: transform 0.3s ease; 
	display: flex;
    align-items: center;
    justify-content: center;
}


	/* バーガーメニューの色分け　TOPのみ */
	.burger-front span {
   		background-color: #eee;
	}
	/* 他のページとバーガー閉じる×ボタン */
	.burger-default span,
	.main-header.scrolled .burger-front span,
	.hamburger-icon.active span{
  		background-color: #6dbfa3;
	}
}
/* トップページに表示している投稿部分 */
.latest-posts {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
	width: fit-content;
    margin-inline: auto;
}
@media(max-width: 768px) {
	.latest-posts {
    	grid-template-columns: 1fr;
}
}
.latest-posts li {
  padding: 15px 0;
overflow: hidden;
}

.latest-posts a {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}

.latest-posts a:hover {
  opacity: 0.8;
}

.post-date {
  display: block;
  font-size: 0.85em;
  color: #999;
  margin-bottom: 5px;
}

.post-title {
 
}
.top-thumb {
  width: 300px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
	margin-bottom: 10px;
}

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

/*----------------------------------- フェードイン */

.fade-in {
    opacity: 0;
    transform: translateY(50px); /* 50px下から開始 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}
/* 遅延フェードイン専用クラス */
.fade-in.visible.delay {
    transition-delay: 0.2s;
}



/*-------------------------------背景色に伴う調整 */
.lymp {
	background-color: #ebfcf3;
    position: relative;
}
.bg-light {
	position: relative;
}
.bg-light::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(255, 255, 255) 0%, transparent 100%);
    top: -62%;
    left: 28%;
    z-index: -1;
    pointer-events: none;
}

.bg-light::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #c8f4dc 0%, transparent 70%);
    top: 106px;
    left: 6%;
    z-index: -1;
    pointer-events: none;
	opacity: 0.6;
}
.bg-light > * {
  position: relative;
  z-index: 2; /* 擬似要素より前面に表示 */
}
@media (max-width: 768px) {
.bg-light::before {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, transparent 100%);
    top: 15px;
    left: 38%;
    z-index: -1;
    pointer-events: none;
}

.bg-light::after {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, #c8f4dc 0%, transparent 70%);
        top: 48%;
        left: 29%;
    z-index: -1;
    pointer-events: none;
}
}

.lymp .content,
.info .content {
	    padding-bottom: 60px;
}
.lymp .section__inner,
.info .section__inner {
	    padding-top: 60px;
}
.news .section__inner,
.info .section__inner{
	margin-bottom: 0;
}

/*-------------------------------リーフのあしらい */
.common-leaf,
.common-leaf-s,
.common-leaf-xs {
	position: relative;
	    z-index: 10;
}
.common-leaf img {
  width: 160px;
  height: auto;
  position: absolute;
  top: -110px;
	left: 80%;
  transform: translateX(-50%);
}
@media(max-width: 768px) {
.common-leaf img {
  width: 120px;
	  top: -90px;
}
}
.common-leaf-s img {
  width: 150px;
  height: auto;
  position: absolute;
  top: -80px;
	left: 80%;
  transform: translateX(-50%);
	    opacity: 0.6;
}
@media(max-width: 768px) {
.common-leaf-s img {
  width: 110px;
}
}
.common-leaf-xs img {
  width: 150px;
  height: auto;
  position: absolute;
  top: -80px;
	left: 70%;
  transform: translateX(-50%);
	    opacity: 0.6;
}
@media(max-width: 768px) {
.common-leaf-xs img {
  width: 110px;
  left: 78%;
}
}
.common-leaf--reverse {
  position: relative;
  z-index: 10;
}
.common-leaf--reverse img {
  width: 160px;
  height: auto;
  position: absolute;
  top: -185px;
  left: 20%; /* 左寄せにする */
  transform: translateX(-50%) scaleX(-1); /* 左右反転 */
}

@media (max-width: 768px) {
  .common-leaf--reverse img {
    width: 120px;
	top: -127px;
  }
}

.news .section__title,
.faq .section__title{
	font-size: 2.1em;
}
.news {
	position: relative;
	z-index: 0;
	padding-block: 60px;
}

.news::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to bottom, rgba(255, 255, 255, 0.99), rgba(255, 255, 255, 0)),
		url('./images/bg/bg-spark-pc.webp');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-color: rgba(255, 255, 255, 0.3);
	mix-blend-mode: lighten;
	z-index: -1;
	pointer-events: none;
}


/* 中のコンテンツを前面に */
.news > * {
	position: relative;
	z-index: 1;
}

.common-leaf {
	position: relative;
	z-index: 1;
}

.common-leaf {
	position: relative;
	z-index: 1;
}
@media (max-width: 768px) {
.news::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to bottom, rgba(255, 255, 255, 0.99), rgba(255, 255, 255, 0)),
		url('./images/bg/bg-spark-sp.webp');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-color: rgba(255, 255, 255, 0.3); /* ← 白っぽくする */
	mix-blend-mode: lighten; /* 明るくなじませる */
	z-index: -1;
	pointer-events: none;
}
}

/* -------------------------------------Q&A  */
.faq {
	padding-block: 60px;
}
.faq__list {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 40px;
  padding-inline:  20px;
}
@media (max-width: 768px) {
	.faq__list {
  		padding-inline:  20px;
	}	
}
.faq__item {
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
}
.faq__question {
	padding-bottom: 15px;
}
.faq__question,
.faq__answer p {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}

.faq__q,
.faq__a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-weight: bold;
  flex-shrink: 0;
}

/* Q の丸 */
.faq__q {
  background-color: var(--base-color);
  color: #fff;
}

/* A の丸（枠線のみ） */
.faq__a {
  border: 2px solid var(--base-color);
  color: var(--base-color);
  background: transparent;
}

/* テキストの整え */
.faq__question span,
.faq__answer span {
  line-height: 1;
}
/* -------------------------------------Q&A　ここまで  */
/* -------------------------------------home.phpページネーション  */
.pagination {
	display: flex;
	justify-content: center;
	margin-top: 40px;
	gap: 10px;
}

.pagination ul {
	display: flex;
	gap: 8px;
	list-style: none;
	padding: 0;
}

.pagination li a,
.pagination li span {
	display: block;
	padding: 6px 12px;
	border: 1px solid #ccc;
	text-decoration: none;
}

.pagination li .current {
	background-color: #f0f0f0;
	font-weight: bold;
}

.navigation.pagination .nav-links {
	display:flex;
	gap: 10px;
}