@charset "utf-8";

.js-text {
  color: rgba(0, 0, 0, 0.7);
  letter-spacing: 0.06em;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  text-align: start;
}
.main-visual img{
	object-position: right bottom;
}
/* CSS Document */
#header{
	position: sticky;
}
.sec_mb{
	margin-bottom: 15vh;
}
.pl_EN{
	font-family: "Cinzel", serif;
}
/**/
.pl02{
	text-align: center;
}
.pl02 h2{
	font-size: var(--fs-40);
	margin-bottom: 2.5em;
}
.pl02 h3{
	font-size: var(--fs-35);
	text-transform: capitalize;
	margin-bottom: 2.5em;
}
.pl02 p{
	font-size: var(--fs-20);
	line-height: 1.8em;
	margin-bottom: 3.0em;
}
/*スライダー*/
.pl02 .slider {
  font-size: var(--fs-16);
  position: relative;
  margin-bottom: 5vh;
}
.pl02 .slider::before {
  content: "";
  width: 5.2em;
  height: 1px;
  background-color: #333333;
  position: absolute;
  top: 3.0em;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 5.0em;
}
.slider_container{
	margin-bottom: 10vh;
}
.pl02 h4{
  font-size: var(--fs-35);
  line-height: 1.6em;
	margin-bottom: 1.5em;
}
.pl02 .next_st{
	font-size: var(--fs-25);
	text-transform: capitalize;
}

/**/
.pl03{
	background-image: linear-gradient(45deg,rgba(248, 241, 182, 0.5) 0%, rgba(248, 209, 226, 0.5) 45%, rgba(186, 227, 249, 0.5) 48%, rgba(222, 199, 224, 0.5) 71%, rgba(221, 235, 194, 0.5) 100%);
	padding: 4.0em 0;
}
.pl03 h2{
	font-family: "Jost", sans-serif;
	font-size: var(--fs-35);
	text-transform: capitalize;
	white-space: nowrap;
}
.pl03 h2 span{
	text-transform: lowercase;
}
.pl03 p{
	font-size: var(--fs-20);
	margin-bottom: 2.5em;
}
.pl03_title{
	display: flex;
	column-gap: 1.5em;
}
.Howto{
	display: flex;
	justify-content: space-between;
}
.Howto li{
	flex-basis: 22%;
}
.Howto li:nth-child(2),.Howto li:nth-child(3),.Howto li:nth-child(4){
	position: relative;
}
.Howto li:nth-child(2)::before,.Howto li:nth-child(3)::before,.Howto li:nth-child(4)::before,
.Howto li:nth-child(2)::after,.Howto li:nth-child(3)::after,.Howto li:nth-child(4)::after{
  content: "";
  position: absolute;
  top: 25%;
  left:-16%;
  width: 1.4em;
  height: 2px;
  border-radius: 9999px;
  background-color: #333333;
  transform-origin: calc(100% - 1.25px) 50%;
}

.Howto li:nth-child(2)::before,.Howto li:nth-child(3)::before,.Howto li:nth-child(4)::before{
  transform: rotate(45deg);
}

.Howto li:nth-child(2)::after,.Howto li:nth-child(3)::after,.Howto li:nth-child(4)::after{
  transform: rotate(-45deg);
}
/**/
.pl04{
	text-align: center;
}
.pl04 h2{
	font-size: var(--fs-35);
	margin-bottom: 2.5em;
}
.pl04 h3{
	font-size: var(--fs-25);
	text-align: start;
	margin-bottom: 2.5em;
}
.pl04 p{
	font-size: var(--fs-14);
	text-align: start;
	line-height: 1.8em;
	margin-bottom: 3.0em;
}
.pl04 p span{
	text-transform: uppercase;
}
.pl04_list1 {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  grid-column-gap: 2.5em;
  margin-bottom: 10vh;
}
.pl04_list1 .pyramid{
	text-align: center;
	flex-shrink: 0;
}
.hinoki_containner{
  display: flex;
 justify-content: space-between;
	column-gap: 2.0em;
}
.hinoki_photo{
	flex-shrink: 1;
}
.hinoki_photo img{
	width: 95%;
	height:auto;
}
.pl04_list2 h3{
  font-size: var(--fs-16);
	margin-bottom: 0.6em;
}
.pl04_list2 ul {
	text-align: start;
  display: flex;
  column-gap: 1.0em;
  font-size: var(--fs-cap);
  margin-bottom: 0.5em;
  line-height: 1.2em;
	white-space: nowrap;
}
/**/
.pl05_innerwrap {
  border: solid 1px #333333;
  padding: 4.0em 0 3.0em 3.0em;
}
.pl05 h2{
	font-size: var(--fs-30);
	text-align: center;
	margin-bottom: 3.5em;
}
.pl05 h3{
	font-size: var(--fs-28);
	margin-bottom: 1.5em;
}
.pl05 p{
	font-size: var(--fs-16);
	margin-bottom: 2.0em;
}
.pl05 p span{
	text-transform: uppercase;
}
.pl05_list{
  display: grid;
	grid-template-columns: 1.2fr 1fr;
   align-items: start;
	column-gap: 1.0em;
	margin-bottom: 5vh;
}
.pl05_list2{
  display: grid;
	grid-template-columns: 1fr 1.2fr;
	align-items: start;
	column-gap: 2.0em;
}
.pl05_photo{
	text-align: center;
	flex-shrink: 1;
}
.pl05_photo img{
	width: 85%;
	height:auto;
}
/**/
.pl06_innerwrap {
  border: solid 1px #333333;
  padding: 3.0em;
}
.pl06 h2{
	font-size: var(--fs-25);
	margin-bottom: 1.5em;
}

.pl06 p{
	font-size: var(--fs-16);
	margin-bottom: 2.0em;
}
.pl06_list{
  display: grid;
	grid-template-columns: 1.2fr 1fr;
   align-items: end;
	column-gap: 1.0em;
}

/*スライダーcss*/
.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
}
.viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.track {
  display: flex;
  transition: transform 0.4s ease;
}
.track li {
  width: 20%;
  flex: 0 0 20%; /* 5枚表示 */
  list-style: none;
}
.track img {
  width: 100%;
  display: block;
  pointer-events: none;
}
/* ナビ共通 */
.navc {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 18%; /* ← 高さ基準に変更 */
  aspect-ratio: 1/1; /* 真円 */
  background: #333333;
  color: #ffffff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 1.2vw, 24px);
  cursor: pointer;
  z-index: 10;
  opacity: .85;
  font-size: var(--fs-cap);
}
/* 左右位置 */
.prev {
  left: 2%;
}
.next {
  right: 2%;
}
/*ドットナビ*/
.dots {
  text-align: center;
  margin-top: 15px;
}
.dots span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
}
.dots .active {
  background: #333;
}
/*フェードインアニメーション--------------*/
/* 基本フェードイン */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease, transform 1.2s ease;
  will-change: opacity, transform;
}
/* 表示されたら付くクラス */
.fade-in.in-view {
  opacity: 1;
  transform: translateY(0);
}
/* オプション：複数要素を順番に遅らせる（必要なら） */
.fade-in.delay-1 {
  transition-delay: 0.20s;
}
.fade-in.delay-2 {
  transition-delay: 0.40s;
}
.fade-in.delay-3 {
  transition-delay: 0.60s;
}
/* 表示されたら付くクラス */
.fade-in.in-view {
  opacity: 1;
  transform: translateY(0);
}

/*=========レスポンシブ=====================

=======SP対応・ブレイクポイント768px=========*/

@media (max-width: 1350px) {
.text-overlay {
  top:55%;
  left: 30%;
}
/*pl05*/
.pl05_innerwrap {
    padding: 4.0em;
	}
.pl05_list {
    display: block;
	margin-bottom: 8vh;
	}
.pl05_list2 {
    display: block;
	}
.pl05_photo img {
    width: 70%;
	height:auto;
	}
}

 @media (max-width: 1024px) {
	 /*pl04*/
.pl04_list1 {
    display: block;
	 }
	 .pyramid img{
		 width: 80%;
		 height:auto;
	 }	
}
@media (max-width: 768px) {
.sec_mb{
	margin-bottom: 10vh;
}

/**/
.hinoki_containner {
    display: block;
	}
	.hinoki_photo{
		display: flex;
	}
.hinoki_photo img {
    width: 50%;
    height: auto;
}
	/**/
  .track li {
    flex: 0 0 50%; /* スライダー2枚表示 */
  }
/**/
.pl06_list {
    display: block;
}
}
 
@media (max-width: 500px) {
	.text-overlay{
	left:40%;
	}
    .js-textA {
        font-size: 13px;
    }
.pl02 .slider {
    white-space: nowrap;
}
.pl02 .slider2::before {
  top: 5.0em;
}
.pl03_title {
    display: block;
}
.Howto {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 2.0em;
	}
.Howto li {
    flex-basis: 46%;
}	
.Howto li:nth-child(2)::before, .Howto li:nth-child(3)::before, .Howto li:nth-child(4)::before, .Howto li:nth-child(2)::after, .Howto li:nth-child(3)::after, .Howto li:nth-child(4)::after {
    width: 0.8em;
    height: 1px;
	left: -13%;
	}
    .pyramid img {
        width: 100%;
        height: auto;
    }
    .pl05_innerwrap,.pl06_innerwrap{
        padding: 1em;
    }
    .pl05_photo img {
        width: 100%;
        height: auto;
    }
    .last_sec {
        margin-bottom: 10vh;
    }
}