@charset "utf-8";

/*====================================================================================================
  HERO
====================================================================================================*/
.hero {
	position: relative;
	width: 100%;
	padding-top: 80px;
	display: flex;
	gap: clamp(1rem, calc(-32.06rem + 32.08vw), 93px);
	justify-content: center;
	margin-bottom: 80px;
}
.hero::before {
	position: absolute;
	content: "";
	top: 0;
	left: -10px;
	height: auto;
	width: 20vw;
	max-width: 190px;
	min-width: 100px;
	aspect-ratio: 190 / 239;
	background-image:
		url("../../images/hero-deco-tree-l.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
	z-index: 10;
	pointer-events: none;
	animation: hero-float-slow 8s ease-in-out infinite;
	transition: left 0.6s ease-out, opacity 0.6s ease-out;
    opacity: 1;
}
@keyframes hero-float-slow {
    0% {
        transform: translateY(0);
    }
    50% {
        /* 上に8pxふわっと浮かせる */
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0);
    }
}
.hero::after {
	position: absolute;
	content: "";
	bottom: -250px;
	right: 0;
	height: auto;
	width: 25vw;
	max-width: 249px;
	min-width: 120px;
	aspect-ratio: 249 / 441;
	background-image:
		url("../../images/hero-deco-tree-r.png");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
	z-index: 10;
	pointer-events: none;
	animation: hero-float-slow-right 9s ease-in-out infinite;
}
@keyframes hero-float-slow-right {
    0% {
        transform: translateY(0);
    }
    50% {
        /* 上に10px程度ふわっと浮かせる */
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}
/*** mainimg *******************************************************/
.mainimg_wrap {
	position: relative;
    width: 65.625%;
    max-width: 1260px;
	aspect-ratio: 1260 / 930;
}
/* FV画像の形 */
.mainimg_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    clip-path: url(#roundedPolygon); /* 形はこの「親」で固定 */
    overflow: hidden; /* 中身がはみ出さないように */
    z-index: 1;
}

/* 画像（中身）の指定 */
.mainimg_inner {
    width: 100%;
    height: 100%;
    background-image: url(../../images/hero-image.webp);
    background-position: center bottom;
    background-size: cover;
    animation: zoomInner 10.0s ease-out forwards;
}

/* 中身だけが拡大 */
@keyframes zoomInner {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.15); /* 1.15倍までじわっと拡大 */
    }
}

.catch {
	font-family: 'Roboto Serif';
	position: absolute;
	z-index: 2;
	font-weight: 600;
	font-size: clamp(1rem, 0.606rem + 1.68vw, 2.625rem); /* 16:375 42:1920 */
	line-height: 1.5;
	letter-spacing: 0.11em;
	color: var(--primary-color);
}
.catch span {
	display: block;
	font-weight: 500;
	font-size: clamp(0.875rem, 0.689rem + 0.36vw, 1.125rem); /* 14:375 18:1920 */
	line-height: 2.5;
}
/*** side *******************************************************/
.side {
	display: flex;
	flex-direction: column;
	width: 320px;
	text-align: center;
	justify-content: center;
}
.side_logo_wrap {
	display: flex;
	flex-direction: column;
}
.side_logomark {
	margin-bottom: 1.5rem;
	width: 100px;
	height: auto;
	aspect-ratio: 1 / 1;
	margin-inline: auto;
}
.side_logotype {
	margin-bottom: 4rem;
	width: 219px;
	height: auto;
	aspect-ratio: 219 / 56;
	margin-inline: auto;
}
.side_nav_wrap {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;

}
.side_nav_list {
	width: 100%;
	display: flex;
	flex-direction: column;
	padding-block: 45px;
	gap: 2.5rem;
	font-size: clamp(1.063rem, 0.958rem + 0.14vw, 1.125rem); /* 17:1200 18:1920 */
	font-weight: 600;
	background: linear-gradient(156.03deg, rgba(255, 255, 255, 0.8) 12.57%,
	 rgba(211, 246, 198, 0.30) 41.63%, rgba(255, 255, 255, 0.15) 68.09%, 
	 rgba(255, 255, 255, 0.6) 88.59%);
	border-radius: 10px;
}
.side_nav_wrap span {
	display: block;
	font-size: clamp(0.875rem, 0.667rem + 0.28vw, 1rem); /* 14:1200 16:1920 */
}
.side_nav_list a {
	display: flex;
	flex-direction: column;
	gap: 5px;
	color: var(--primary-color);
}
.side_nav_list a:hover {
	color: var(--accent-color);
}
.side_nav_list span {
	margin-top: 5px;
}
.side_btn {
	width: 100%;
	height: 90px;
	background: var(--primary-color);
	border-radius: 10px;
	text-align: center;
	line-height: 1.2;
}
.side_btn a {
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
	gap: 5px;
    width: 100%;
    height: 100%;
	font-size: clamp(1.063rem, 0.958rem + 0.14vw, 1.125rem); /* 17:1200 18:1920 */
    color: #fff;
}
.side_btn span.tel {
	font-size: clamp(1.5rem, 0.875rem + 0.83vw, 1.875rem); /* 24:1200 30:1920 */
}
.side_btn span.tel::before {
	content: "";
    display: inline-block;
    width: 32px;
    height: 23px;
    background-image: url(../../images/basic/icon-tel.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin-right: 8px; 
    line-height: inherit;
}
.side_btn span {
	font-size: clamp(0.875rem, 0.667rem + 0.28vw, 1rem); /* 14:1200 16:1920 */
}
.sns_group {
	margin-top: 1rem;
	width: 100%;
	display: flex;
	justify-content: flex-start;
	gap: 1rem;
}
.instagram {
	height: 32px;
	aspect-ratio: 1 / 1;
}
.map {
	height: 32px;
	aspect-ratio: 20 / 25;
}
/*====================================================================================================
  MAIN
====================================================================================================*/
/*** MAIN 共通 ********************************************************************/
.wide {
	position: relative;
  	left: 50%;
 	transform: translateX(-50%);
  	width: 100vw;
}
.section_inner {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
}
h2 {
	width: 100%;
	font-family: 'Roboto Serif', sans-serif;
	font-size: clamp(2rem, 1.515rem + 2.07vw, 4rem); /* 64:1920 32:375 */
	color: var(--primary-color);
	font-weight: 600;
	text-align: left;
	line-height: 1em;
	padding-left: 2rem;
}
h2 span {
	margin-left: 2.9375rem;
	display: block;
	font-size: clamp(1.063rem, 1.047rem + 0.06vw, 1.125rem); /* 18:1920 17:375 */
	line-height: 2.5em;
}
h2::before {
	content: "";
	display: inline-block;
	width: 47px;
	height: 59px;
	vertical-align: middle;
	background-image: url(../../images/deco-leaf.gif);
    background-size: 180%;
    background-repeat: no-repeat;
	background-position: center top;
}
.come_wrap {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	width: fit-content;
	text-align: center;
	margin-inline: auto;
}
.come_title {
	color: var(--accent-color);
	font-size: clamp(1.25rem, 0.947rem + 1.29vw, 2.5rem); /* 40:1920 20:375 */
	font-family: 'Roboto Serif', sans-serif;
	line-height: 1.5em;
}
.come {
	line-height: 2.8125;
}
/*** aboutus ルーツテラムラについて ****************************************************/
#aboutus {
	padding-top: 3rem;
	position: relative;
	background-image: 
        linear-gradient(180deg, rgba(251, 246, 240, 1) 0%, rgba(251, 246, 240, 0) 100%),
        linear-gradient(182deg, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0) 15%, #FFFFFF 75%),
        url(../../images/aboutus-bg-noise.svg);
	background-repeat: no-repeat;
    background-position: top center, bottom center, bottom center;
    background-size: 100% 165px, 100% 355px, 100% auto;
	z-index: 1;
}
#aboutus .section_inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: auto 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 3rem;
	position: relative;
	z-index: 1;
}
#aboutus h2 {
	grid-area: 1 / 1 / 2 / 2;
}
#aboutus .section_inner::before {
	top: 0;
	left: 0;
	position: absolute;
	content: url(../../images/aboutus-deco-window.png);
	transform: translate(-250px, 120px);
	z-index: -1;
}
.aboutus_wrap_left {
	grid-area: 2 / 1 / 3 / 2; 
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3rem;
	z-index: 1;
}
#aboutus .come_title {
	font-size: clamp(1.25rem, 1.159rem + 0.39vw, 1.625rem); /* 26:1920 19:375 */
}
.aboutus_wrap_right {
	grid-area: 1 / 2 / 3 / 3;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.aboutus_image1 {
    width: 350px;
	aspect-ratio: 350 / 319;
	height: auto;
	object-fit: contain;
	margin-inline: auto;
	display: block;
}
.aboutus_image2 {
	top: 0;
	left: 0;
	width: clamp(400px, 50vw, 676px); /* 560/1200*/
	max-width: none;
	height: auto;
	aspect-ratio: 676 / 620;
	margin-right: -10vw;
	margin-left: auto;
    display: block;
}
.aboutus_image3 {
	top: 0;
	left: 0;
	width: clamp(180px, 33.41vw, 401px); /* 401/1200 */
	aspect-ratio: 401 / 388;
	transform:translateY(clamp(-200px, -8.5vw, 0px));
}
/*** service サービス ********************************************************/
#service {
	padding-top: 3rem;
	position: relative;
	background-image: url(../../images/service-bg.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	margin-bottom: 160px;
	}
#service::before {
	position: absolute;
	content: "";
	bottom: -120px;
	left: 0;
	width: 14vw;
	height: auto;
	max-width: 270px;
	min-width: 100px;
	aspect-ratio: 270 / 335;
	background-image:
		url("../../images/service-deco-tree.png");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
	z-index: 10;
	pointer-events: none;
	animation: leaf-float 5s ease-in-out infinite;
}
@keyframes leaf-float {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        /* 揺れ幅調整 */
        transform: translateY(-13px) rotate(1.5deg); 
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}
#service h2 {
	grid-area: 1 / 1 / 2 / 2;
}
#service .section_inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: auto 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 3rem;
}
.service_wrap_left {
	grid-area: 2 / 1 / 3 / 2;
	display: flex;
	flex-direction: column;
	gap: 3rem;
}
.service_wrap_left .come_wrap {
	margin-inline: 2rem auto;
}
.service_wrap_right {
	grid-area: 1 / 2 / 3 / 3;
	display: flex;
	flex-direction: column-reverse;
	gap: 3rem;
	align-self: start;
	margin-top: 60px;
}
.service_wrap_right .come_wrap {
	margin-inline: auto 2rem;
}
.service_image1 {
	max-width: none;
	width: clamp(300px, 44vw, 863px); /* 863/1920 */
	aspect-ratio: 863 / 786;
	margin-left: -10vw;
	transform: translateY(130px);
}
.service_image2 {
	max-width: none;
	width: clamp(300px, 42vw, 809px); /* 809/1920 */
	height: auto;
	aspect-ratio: 809 / 726;
	margin-right: -15vw;
}


/*** information 会社概要 ****************************************************/
.information_roof {
	position: relative;
	display: flex;
	align-items: end;
	height: 288px;
	background: linear-gradient(180deg, rgba(197, 230, 221, 0) 0%, rgba(197, 230, 221, 0.3) 39.42%, rgba(184, 225, 213, 0.5) 81.73%);
	z-index: 0;
}
.information_roof img {
	width: 100%;
}
#information {
	position: relative;
	padding-block: 32px 218px;
	background-image: url(../../images/information-image.png);
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: right 20% bottom 60px;
	background-size: min(974px, 60%) auto;
	z-index: 1;
}
#information::before {
	position: absolute;
	content: "";
	top: -150px;
	right: 0;
	/* width: clamp(150px, 22.4vw, 269px); 269/1200 */
	width: 22vw;
	height: auto;
	max-width: 269px;
	min-width: 120px;
	aspect-ratio: 262 / 269;
	background-image:
		url("../../images/information-deco-tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain;
	z-index: 10;
	pointer-events: none;
	animation: info-leaf-float 7s ease-in-out infinite;
}
@keyframes info-leaf-float {
    0% {
        transform: translateY(0);
    }
    50% {
        /* 上に 12px ほど、ふわふわと浮かせる */
        transform: translateY(-12px);
    }
    100% {
        transform: translateY(0);
    }
}
#information .section_inner {
	width: 100%;
	min-height: 500px;
}
.information_wrap {
	margin-left: 2rem;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}
#information .come {
	text-align: left;
}
#information .come a {
	color: var(--accent-color);
	opacity: 1;
}
#information .come a:hover {
	color: var(--primary-color);
}
#information .side_btn {
	height: 43px;
	width: 203px;
}

/*** rootsclip ルーツ日記 ****************************************************/
#rootsclip {
	padding-block: 160px 282px;
	background-color: var(--base-color);
    background-image: 
        linear-gradient(rgba(251, 246, 240, 0.85), rgba(251, 246, 240, 0.85)), 
        url(../../images/rootsclip_bg.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	}
#rootsclip h2 {
	margin-bottom: 80px;
}
.instagram_area {
	height: fit-content;
	padding: 8px;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
    align-items: center;
    justify-content: center;
}
.instagram_area iframe {
    display: block;
    width: 100% !important;
}

/*====================================================================================================
  ANIMATION（極めてゆっくり中心から拡大）
====================================================================================================*/
/*** 画像をふわっと大きく ****************************************************/
.fade-up-center {
    opacity: 0;
    /* 0.85倍から開始（ゆっくり動く分、小さすぎない方が綺麗です） */
    transform: scale(0.85); 
    
    /* 3秒かけて変化。cubic-bezierの数値を調整し、後半に余韻が残るようにしました */
    transition: 
        opacity 3.0s ease-out, 
        transform 3.5s cubic-bezier(0.1, 0.8, 0.2, 1);
    
    will-change: opacity, transform;
}
.fade-up-center.is-visible {
    opacity: 1;
    transform: scale(1);
}

/*** 落ち葉アニメーション ****************************************************/
/* aboutusの右からleaf1*/
.falling-leaf {
    position: absolute;
    top: 100px;
    right: 5%;
    width: 4vw;
	height: auto;
    max-width: 47px;
	min-width: 25px;
	aspect-ratio: 47 / 53;
    background-image: url("../../images/leaf1.png");
    background-repeat: no-repeat;
    background-size: contain;
	z-index: 100;
	pointer-events: none;
    animation: leaf-fall-curve 18s linear infinite;
	animation-delay: -18s;
}

@keyframes leaf-fall-curve {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translate(-60vw, 40vh) rotate(-300deg);
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(-100vw, 100vh) rotate(-600deg);
        opacity: 0;
    }
}

/* serviceの左からleaf2*/
.falling-leaf-reverse {
    position: absolute;
	bottom: -100px;
	left: 5%;
    width: 3.5vw;
    height: auto;
	max-width: 34px;
	min-width: 20px;
	aspect-ratio: 34 / 39;
    background-image: url("../../images/leaf2.png");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 100;
    pointer-events: none;
    animation: leaf-fall-from-deco 12s linear infinite;
}

@keyframes leaf-fall-from-deco {
    0% {
        /* 起点：装飾画像のあたりから少し浮き上がるような予備動作 */
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }
    10% {
        /* ふわっと現れる */
        opacity: 1;
        transform: translate(10px, -15px) rotate(10deg);
    }
    100% {
        /* 右下方向へ、画面外まで落ちていく */
        transform: translate(90vw, 50vh) rotate(360deg);
        opacity: 0;
    }
}