@charset "UTF-8";
body {
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Osaka", "MS PGothic"; 
	color: #333333;
	background-color: #fcfbf5;
}

img {
	/* 親要素のwidthの幅の割合に対して最大幅をとるよう100%に指定 */
max-width: 100%;
}

a {
	/* デフォルトCSSを打ち消す (下線のないリンクにする)*/
	text-decoration: none;
	color: #333333;
	font-size: 20px;
}

ul {
	/* デフォルトCSSを打ち消す */
    list-style-type: none;
}


/* -------------------------------------
	レイアウト
----------------------------------------*/

#service, #price, #events, #usersvoice, #access {
	/* 各セクション、上下に150pxの内側余白をつける */
	padding: 150px 0;
}

.section-inner {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}

.col-2 {
    display: flex;
    justify-content: space-between;
}

.col-2 .item {
    width:calc((100% - 24px)/2) ;
}

/* pcとspで表示を切り替えたい時のCSS */
.pc-only {
	/* pc時に表示 */
    display: block; 
}
.sp-only {
	/* pc時に非表示 */
	display: none; 
}

.tab_none {
	display: none;
}

.pc_none {
	display: block;
}

/** -----------------------------------
    テキスト 
-------------------------------------**/
h2.title-en {
	font-family: "Outfit" ,sans-serif;
	font-weight: bold;
	font-size: 40px;
	line-height: 0.7;
	letter-spacing: 0.03em;
	text-align: center;
}

h2.title-jp {
	font-weight: bold;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.13em;
	text-align: center;
}

h3.ex-large-num {
	color: #3d7329;
	font-weight: bold;
	font-size: 154px;
	line-height: 0.65;
	letter-spacing: 0em;
	opacity: 0.5;
	padding-bottom: 22px;
}

h3.ex-large {
	font-weight: bold;
	font-size: 80px;
	line-height: 1.125;
	letter-spacing: 0.03em;
	text-align: center;
}

h3.large {
	font-weight: bold;
	font-size: 22px;
	line-height: 1.6;
	letter-spacing: 0.03em;
	text-align: center;
}

h3.medium {
	font-weight: bold;
	font-size: 20px;
	line-height: 1.6;
	letter-spacing: 0.03em;
	text-align: center;
}

h3.small {
	font-weight: bold;
	font-size: 17px;
	line-height: 1.6;
	letter-spacing: 0.03em;
	text-align: center;
}

h3.sub {
	font-size: 16px;
	line-height: 1;
	letter-spacing: -0.02em;
	text-align: center;
}

p.large {
	font-size: 18px;
	line-height: 2;
	letter-spacing: 0.06em;
	text-align: center;
	margin-bottom: 80px;
}

p.medium {
	font-size: 17px;
	line-height: 2;
	letter-spacing: 0.03em;
}

p.small {
	font-size: 16px;
	line-height: 1.75;
	letter-spacing: 0.03em;
}

p.sub {
	font-size: 14px;
	line-height: 1.75;
	letter-spacing: 0.03em;
}

/** -----------------------------------
    見出しのレイアウト 
-------------------------------------**/

.section-title {
	text-align: center;
	padding-bottom: 150px;
	
}

.title-en {
	margin-bottom: 10px;
	position: relative;
}

.title-en::after {
    content: "";
    background-image: url("../images/titlebrush-pc.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 140px;
    height: 165px;
    position: absolute;
    top: -60px;
	left: 28%;
    color-interpolation-filters: 25%;
    z-index: -1;
}

/** -----------------------------------
    見出し下の本文大のレイアウト 
-------------------------------------**/
p.large.first {
	margin-bottom: 100px;
}

/** -----------------------------------
    ボタン 
-------------------------------------**/

.button-large {
	display: block;
	width: 350px;
	height: 100px;
	background-color: #3d7329;
	color: #fcfbf5;
	font-size: 20px;
	letter-spacing: 0.03em;
	font-weight: bold;
	line-height: 100px;
    display: flex;  /* フレックスボックスを使って中央揃え */
    justify-content: center;  /* 左右中央揃え */
    align-items: center;  /* 上下中央揃え */
    text-align: center;  /* テキストの中央揃え */
	border-radius: 50px;
	cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
	margin: 0 auto;
}

.button-large:hover {
    background-color: #ffe552;
    color: #3d7329; 
}


.button-small {
	width: 280px;
	height: 80px;
	background-color: #3d7329;
	color: #fcfbf5;
	font-size: 20px;
	letter-spacing: 0.03em;
	font-weight: bold;
	line-height: 80px;
    display: flex;  /* フレックスボックスを使って中央揃え */
    justify-content: center;  /* 左右中央揃え */
    align-items: center;  /* 上下中央揃え */
    text-align: center;  /* テキストの中央揃え */
	border-radius: 40px;
	cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
	margin: 0 auto;
}

.button-small:hover {
    background-color: #ffe552;
    color: #3d7329; 
}


.button-line {
    width: 350px;
    height: 100px;
    border-radius: 50px;
    background-color: #ffe552;

    /* ボタンの内側に表示される実線をoutlineプロパティで指定 */
    outline: 2px solid #3d7329;  /* 枠線の色・スタイル・太さ */
    outline-offset: -7px;  /* 枠線をボタンの内側に7pxオフセットして表示 */

    /* 文字の色・サイズ・太さ・文字間隔を設定 */
    color: #3d7329;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.03em;
    
    /* ボタン内の文字を上下左右中央に配置するための設定 */
    display: flex;  /* フレックスボックスを使って中央揃え */
    justify-content: center;  /* 左右中央揃え */
    align-items: center;  /* 上下中央揃え */
    text-align: center;  /* テキストの中央揃え */
    
    /* カーソルをボタンに合わせたときのポインタを指の形に変更 */
    cursor: pointer;

    /* /* トランジションの設定でカーソルを合わせたときの色変更を滑らかにする */
    transition: background-color 0.3s, color 0.3s, outline 0.3s;
	margin: 0 auto;
}

/* カーソルを合わせたときの色の反転 */
.button-line:hover {
    background-color: #3d7329;
    color: #ffe552; 
	outline: 2px solid #ffe552; 
}

/** -----------------------------------
    ヘッダー
-------------------------------------**/

#header {
	width: 100%;
	height: 100px;
	align-items: center;
	position: fixed;
	top: 0;
    z-index: 100;
}

.gnav-pc-wrap {
    display: flex;
    justify-content: flex-end;
	align-items: center;
}

ul.gnav-pc {
	display: block;
	margin-right: 30px;
}

ul.gnav-pc li{
    display: inline;
    margin-left: 3vw;
	align-items: center;

}

ul.gnav-pc li:first-child {
    margin-left: 0; /* 最初の項目の左余白を消す */
}

ul.gnav-pc li a{
    font-family: 'Outfit', sans-serif;
    font-weight: 500 ;
    letter-spacing: 0em;
}

ul.gnav-pc li a:hover{
    opacity: 0.7;
}

.button-square {
	display: flex;
	width: 17%;
	height: 100px;
	background-color: #3d7329;
	color: #fcfbf5;
	font-size: 20px;
	letter-spacing: 0.03em;
	font-weight: bold;
	margin-right: 0;
	justify-content: center; 
    align-items: center; 
    text-align: center;  
    transition: background-color 0.3s, color 0.3s;
}

.button-square:hover {
    background-color: #ffe552;
    color: #3d7329; 
}

#header.change-color {
	background-color: #fcfbf5;
}

.tab_none {
	display: none;
}
.sp_none {
	display: none;
}

.gnav-sp-wrap {
	display: none;
}

/* ------------------------------------------------------------------
	メインビジュアル
--------------------------------------------------------------------*/
#mainvisual {
	width: 100%;
	height: 100vh;
	position: relative;
}

.visual-wrap {
	width: 83%;
	height: 70%;
	position: relative;
	z-index: 2;
}

.mv-img {
	width: 100%;
	height: 100%;
}

/* 画像を縦横比を変えずに.visual-wrapを覆うように配置し、男性が常に映るようにする */
.mv-img img.main {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 75% 50%;
}

.main-wrap {
	width: 55%;
	height: 10vw;
	position: absolute;
	bottom: 0;

}

.maincopy {
	font-family: 'Outfit',sans-serif;
	font-weight: bold;
	font-size: 5.2vw;
	line-height: 0.97;
	letter-spacing: 0;
	top: 55%;
	position: relative;
	margin-left: 5vw;
	z-index: 1;
}

.titlebackground {
	position: absolute;
	bottom: -50%;
	width: 100%;
	/* 高さ70px */
	height: 10vw;
}

.titlebackground-inner {
	/* 配置の基準となる親要素を指定 */
	position: relative;
	width: 100%;
	height: 50%;
}

.titlebackground-inner span {
	/* ブロック要素にする */
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0.6;
}

.titlebackground-inner span:nth-child(1) {
	/* 上の線の配置 */
	background-color: #fcfbf5;
	top: 0;
}

.titlebackground-inner span:nth-child(2) {
	/* 下の線の配置 下側に配置するための記述 */
	background-color: #3d7329;
	bottom: -100%;
}

.concept-wrap {
	width: 80%;
	height: calc(30% - 5vw);
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	z-index: 3; /* 疑似要素の重なりを整えるため親要素同士で重なり指定 */
}

.concept-wrap::after {
    content: "";
    background-image: url("../images/leaf-mv-pc.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 25vw;
    height: 30vw;
    position: absolute;
    bottom: 30%;
    right: -21%;
    z-index: 2;
	/* キーフレームアニメーションを追加 */
	animation: sway 5s ease-in-out infinite;
	transform-origin: left bottom;
}

.subcopy {
	font-weight: 400;
	font-size: 20px;
	line-height: 1.6;
	letter-spacing: 0.06em;
	margin-left: 4.86vw;
	z-index: 3;
}

.button-square.responsive {
	display: none;
}

/* アニメーションを定義 */
@keyframes sway {
	0% {
	transform: rotate(0deg);
	}
	50% {
	transform: rotate(5deg);
	}
	100% {
	transform: rotate(0deg);
	}
}

/* ------------------------------------------------------------------
	サービス＆スペース
--------------------------------------------------------------------*/

#service {
	margin-top: 150px;
}

/* ===左側建物図============ */

.build-img {
	width: 100%;
}

#service .col-2.building {
	margin-bottom: 100px;
}

#service .col-2.building .item {
	display: inline-block;
	height: auto;
	margin-bottom: 50px;
}

.item.build {
	position: relative;
}

.building-diagram {
	width: 100%; 
	height: auto;
}

/* ボタンの配置を２行２列で調整 */
.area-buttons {
	position: absolute;
	top: 7%;
	left: 38%;
	width: 44.23%;
	height: 83.4%;
	display: grid;
	grid-template-columns: 43.5% 43.5%; 
	grid-template-rows: 41.7% 41.7%; 
	/* ボタン同士の間隔調整 */
	column-gap: 13%;
	row-gap: 16.6%;
}

.area-button img {
	width: 100%;
	height: auto;
}

.area-buttons a:hover{
    opacity: 0.7;
}

/* ===右側フロア案内============ */

.floors {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.floors li {
	display: flex;  /* 先頭寄せは初期値のためjustfy-contnetsは省略 */
	align-items: center; /* ボタンとテキストを上下中央に揃える */
}

.floors li:last-child {
    margin-bottom: 0; /* 一番下の項目の余白を消す */
}

.img-smallbutton {
	width: 50px; 
	height: 50px;
	margin-right: 1.74vw; /* ボタンとテキストの間に間隔を確保 */
}

.img-smallbutton img {
	width: 100%; 
	height: 100%;
}

.img-smallbutton:hover{
    opacity: 0.7;
}

/* =====各エリア紹介のレイアウト============== */
#service section.area {
	margin-bottom: 100px;
}
/* =====area詳細文章ブロック============== */
#service .item.text p.large {
	margin-top: 111px;
	text-align: left;
	margin-bottom: 0;
}

#service .item.text {
	position: relative;
}

.item.text::before {
	position: absolute;
	left: 0;
	top: 10px;
	content: "";
	/* 注意：以下のようにサイズ指定をしてあげないと要素として入らない */
	width: 100%;
	height: 368px;
	background: url('../images/servicetitle-left.png') no-repeat center;
	/* ショートハンドだとサイズが効かないので別記する */
	background-size: contain;
}

.item.text.rev::before {
	background: url('../images/servicetitle-right.png') no-repeat center;
	background-size: contain;
}

/* =====area詳細画像＋ボタンブロック============== */
#service .item.img {
	position: relative;
}

#service .item.img .img.first {
	width: 100%;
	height: auto;
	margin-top: 40px;
	text-align: left;
}

#service .item.img .img.first img {
	width: 96%;
	height: auto;
}

#service .item.img .img.second {
	width: 100%;
	height: auto;
	margin-top: -10px;
	text-align: right;
}

#service .item.img .img.second img{
	width: 81%;
	height: auto;
}

/* area02反転部分の配置 */
#service .item.img.rev .img.first {
	text-align: right;
}
#service .item.img.rev .img.second {
	text-align: left;
}

/* area04画像3つの配置 */
#area04 .item.img .img.first {
	margin-top: 30px;
	width: 100%;
	height: auto;
	text-align: right;
}

#area04 .item.img .img.second {
	margin-top: 30px;
	width: 100%;
	height: auto;
	text-align: left;
}

#area04 .item.img .img.third {
	margin-top: 30px;
	width: 100%;
	height: auto;
	text-align: right;
}

#area04 .item.img .img.third img{
	width: 81%;
	height: auto;
}

/* ボタンの配置 */
#service .item.img .button-large {
	margin-top: 40px;
}

#area03 .item.img .img.first {
	margin-top: 60px;
}
#area03 .item.img .button-large {
	margin-top: 50px;
}

/* 左右反転部分の配置入れ替え */
#service .col-2.rev {
	flex-direction: row-reverse;
}

/* area04セクションの末尾の空白を消す */
#service section.area.end {
	margin-bottom: 0;
}

/* --------葉っぱの装飾------------------- */

#service .section-title {
	position: relative;
	z-index: 1;
}

#service .section-title::before {
	position: absolute;
	top: -110px;
	left: 0;
	content: "";
	width: 26%;
	height: 174px;
	background: url('../images/leaf-service1.png') no-repeat;
	background-size: contain;
}

#service .item.area {
	position: relative;
}
#service .item.area::before {
	position: absolute;
	bottom: -90px;
	right: 0;
	content: "";
	width: 43.4%;
	height: 142px;
	background: url('../images/leaf-service2.png') no-repeat;
	background-size: contain;
}

/* ---------------------------------------------
	プライス＆システム
---------------------------------------------- */

#price .floor-title h3.ex-large-num {
	font-size: 80px;
	padding-bottom: 10px;
	text-align: center;
}

#price .floor-title h3.large {
	margin-top: -20px;
	width: 100%;
	height: auto;
	border-radius: 10px;
	background-color: #e0e7d7;
	padding: 33px 50px;
}

#price .floor-title {
	margin-bottom: 80px;
}

#price .col-2 .item .img-plan {
	width: 100%;
	height: auto;
	margin-bottom: 80px;
}

#price .col-2 .img-plan img {
	width: 100%;
	height: auto;
}

#price .secondfloor .col-2 {
	margin-bottom: 100px;
}

#price .img-studio {
	width: 100%;
	height: auto;
	margin-bottom: 80px;
}

#price .img-studio img {
	width: 100%;
	height: auto;
}

/* --------葉っぱの装飾------------------- */

#price .section-title {
	position: relative;
}

#price .section-title::before {
	position: absolute;
	top: -40px;
	left: 6.8%;
	content: "";
	width: 21%;
	height: 140px;
	background: url('../images/leaf-price-left.png') no-repeat;
	background-size: contain;
}

#price .section-title::after {
	position: absolute;
	top: -40px;
	right: 6.8%;
	content: "";
	width: 21%;
	height: 140px;
	background: url('../images/leaf-price-right.png') no-repeat;
	background-size: contain;
}
/* ---------------------------------------------
	イベント
---------------------------------------------- */

#events h2.title-en::after {
	left: 35%;
}

#events .copy-wrap {
	width: 80%;
	margin: 0 auto;
	position: relative;
}

#events p.backcopy {
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: 150px;
	font-weight: bold;
	color: #3d7329;
	line-height: 1;
	letter-spacing: -0.03em;
	opacity: 0.15;
}

#events p.backcopy.org {
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 120px;
	text-align: right;
}

#events p.large {
	margin: 80px 0 65px 0;
}

#orgnizer {
	margin-top: 100px;
}

#events .calender {
	width: 80%;
	height: 580px;
	margin: 0 auto 80px;
	text-align: center;
}

/* --以下、イベントのslickについての記述---------- */

/* カードのスタイル */
#events .slick-slider.slider-1 .card {
	width: 230px; /* 各カードの幅 */
	height: 315px; /* カードの高さ */
	background-color: #e0e7d7; /* カードの背景色 */
	transition: transform 0.3s ease; /* 中央に来たときの変化にスムーズさを与える */
	margin: 0 18.5px; /* 間隔をカードの左右に分ける */
}

  /* スライダーの横幅 */
#events .slick-slider.slider-1 {
	width: 796px; /* スライダー全体の幅 */
	height: 350px;
	margin: 0 auto 80px; /* スライダーを中央寄せ */
}

#events .slick-slider.slider-1 .slick-track {
	display: flex;
	align-items: center;
	height: 380px;
}

#events .slick-slider.slider-1 .slick-center {
	transform: scale(1.1);  /* 中央のカードを大きくする */
	z-index: 1;  /* 他のカードの上に表示 */
	opacity: 1;
	transform-origin: top center;
}

#events .slick-slider.slider-1 .slick-slide:not(.slick-center) {
	opacity: 0.7;  /* 他のカードを少し透明に */
}

#events .slick-slider.slider-1 .card .banner a img {
	width: 100%;
	height: auto;
}

#events .slick-slider.slider-1 .event-overview {
	margin-left: 18px;
}

#events .slick-slider.slider-1 .card h3.small {
	font-weight: bold;
	color: #fcfbf5;
	background-color: #333333;
	width: 130px;
	height: 27px;
	text-align: center;
	margin: 15px 0 6px;
}

#events .slick-slider.slider-1 .card p.sub {
	padding-bottom: 9px;
}

#events .slick-slider.slider-1 .card a:hover {
	opacity: 0.7;
}

#events .slick-slider.slider-1 .slide-arrow {
	bottom: 0;
	cursor: pointer;
	margin: 160px 0 150px 0;
	position: absolute;
	top: 0;
	width: 40px;
}

#events .slick-slider.slider-1 .slide-arrow:hover {
	opacity: 0.7;
}

#events .slick-slider.slider-1 .prev-arrow {
	left: -40px;
}

#events .slick-slider.slider-1 .next-arrow {
	right: -40px;
}
/* --------葉っぱの装飾------------------- */

#guest {
	position: relative;
}

#guest::before {
	position: absolute;
	top: 0;
	right: 0;
	content: "";
	width: 23%;
	height: 157px;
	background: url('../images/leaf-event1.png') no-repeat;
	background-size: contain;

	/* キーフレームアニメーションを追加 */
	animation: sway 5s ease-in-out infinite;
	transform-origin: right top;
}

/* アニメーションを定義 */
@keyframes sway {
	0% {
	transform: rotate(0deg);
	}
	50% {
	transform: rotate(7deg);
	}
	100% {
	transform: rotate(0deg);
	}
}

#orgnizer {
	position: relative;
}

#orgnizer::before {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	width: 20%;
	height: 140px;
	background: url('../images/leaf-event2.png') no-repeat;
	background-size: contain;
	/* キーフレームアニメーションを追加 */
	animation: sway 5s ease-in-out infinite;
	transform-origin: left center;
}

/* アニメーションを定義 */
@keyframes sway {
	0% {
	transform: rotate(0deg);
	}
	50% {
	transform: rotate(7deg);
	}
	100% {
	transform: rotate(0deg);
	}
}

/* ---------------------------------------------
ユーザーボイス
	【進捗】PC 60% TAB 50% SP 0%
---------------------------------------------- */
#usersvoice h2.title-en::after {
	left: 32%;
}

/* --以下、slickについての記述---------- */

#usersvoice .slick-slider .card {
	width: 230px; /* 各カードの幅 */
	height: 337px;
	border-radius: 20px;
	background-color: #e0e7d7; /* カードの背景色 */
	transition: transform 0.3s ease; /* 中央に来たときの変化にスムーズさを与える */
	margin: 0 18.5px; /* 27px間隔をカードの左右に分ける */
	display: flex;
	justify-content: center;
	position: relative;
}

  /* スライダーの横幅 */
#usersvoice .slick-slider.slider-2 {
	width: 796px; /* スライダー全体の幅 */
	height: 526px;
	margin: 0 auto; /* スライダーを中央寄せ */
}

#usersvoice .slick-slider.slider-2 .slick-center {
	transform: scale(1.1);  /* 中央のカードを大きくする */
	z-index: 1;  /* 他のカードの上に表示 */
	opacity: 1;
	transform-origin: top center;
}

#usersvoice .slick-slider.slider-2 .slick-slide:not(.slick-center) {
	opacity: 0.7;  /* 他のカードを少し透明に */
}

#usersvoice .slick-slider.slider-2 .slick-track {
	display: flex;
	align-items: center;
	height: 466px;
}

#usersvoice .slick-slider.slider-2 .wrap {
	height: 387px;
	display: flex;
	align-items: end;
}

#usersvoice .slick-slider.slider-2 .icon {
	position: absolute;
	top: -50px;
	width: 100px;
	height: 100px;
}

#usersvoice .slick-slider.slider-2 h3.small {
	margin: 75px 0 19px;
}

#usersvoice .slick-slider.slider-2 p.small {
	margin: 0 23px;
}

#usersvoice p.large.first {
	margin-bottom: 60px;
}

#usersvoice .slick-slider.slider-2 .slide-arrow {
	cursor: pointer;
	position: absolute;
	bottom: 0px;
	width: 40px;
	height: 40px;
	z-index: 5;
}

#usersvoice .slick-slider.slider-2 .slide-arrow:hover {
	opacity: 0.7;
}

#usersvoice .slick-slider.slider-2 .prev-arrow {
	left: 270px;
}

#usersvoice .slick-slider.slider-2 .next-arrow {
	right: 270px;
}

/* ドットの初期化 */
#usersvoice .slick-slider.slider-2 .dots-wrap button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

/* ドットを囲む親要素 */
#usersvoice .slick-slider.slider-2 .dots-wrap {
    display: flex;
    justify-content: center;
    margin-top: 35px;
}

 /* それぞれのドット */
#usersvoice .slick-slider.slider-2 .dots-wrap li {
    width: 10px;
    height: 10px;
    background-color: #fcfbf5;
    border: 2px solid #e0e7d7;
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
    transition: background-color 0.5s ease;
}
/*  今表示してるスライドのドット */
#usersvoice .slick-slider.slider-2 .dots-wrap li.slick-active {
    background-color: #9cb78f;
	border: 2px solid #9cb78f;
}
/* それぞれのドットのホバー時 */
#usersvoice .slick-slider.slider-2 .dots-wrap li:hover {
    background-color: #9cb78f;
	border: 2px solid #9cb78f;
}

#usersvoice .slick-slider.slider-2 .dots-wrap li:last-child {
    margin-right: 0;
}

/* ---------------------------------------------
アクセス
---------------------------------------------- */
#access h2.title-en::after {
	left: 32%;
}

#access .col-2 .item.way {
	background-color: #e0e7d7;
	margin-bottom: 80px;
}

#access .map {
	height: 500px;
	margin-bottom: 80px;
}

#access .item.ad {
	margin-bottom: 40px;
}

#access .item.ad.left {
	display: flex;
	align-items: center;
}

#access .item.ad.left p.medium {
	width: fit-content;
	margin: 0 auto;
}

#access {
    padding-bottom: 110px;
}

#access .item.way h3.large {
	padding-top: 43px;
	text-align: center;
}

#access .item.way ul {
	display: flex;
	justify-content: flex-start;
	padding-top: 22px;
}

#access .item.way ul li.icon {
	width: 60px;
	height: 60px;
	margin-left: 2.5vw;
}

#access .item.way ul li.text {
	margin-left: 8px;
	display: flex;
	align-items: center;
}

#access .item.way p.medium {
	margin-left: 7.3vw;
}

#access .item.way.right p.medium.end {
	padding-bottom: 42px;
}

/* --------葉っぱの装飾------------------- */

#access .item.way.left {
	position: relative;
}

#access .item.way.left::before {
	position: absolute;
	top: -152px;
	left: -6.4%;
	content: "";
	width: 53%;
	height: 175px;
	background: url('../images/leaf-access1.png') no-repeat;
	background-size: contain;
}

#access .item.way.right {
	position: relative;
}

#access .item.way.right::before {
	position: absolute;
	bottom: -64px;
	right: -4.7%;
	content: "";
	width: 38%;
	height: 127px;
	background: url('../images/leag-access2.png') no-repeat;
	background-size: contain;
}

/* ---------------------------------------------
フッター
---------------------------------------------- */
#footer {
	/* 背景色#333333 */
	background-color: #3d7329;
	/* 文字は左右中央揃え */
	text-align: center;
}

#footer ul.footer-link {
	display: flex;
	justify-content: center;
	padding-top: 150px;
}
#footer ul.footer-link li {
	margin: 0 1.53vw;
}

#footer ul.footer-link li a {
	color: #fcfbf5;
	font-size: 18px;
	line-height: 2;
	letter-spacing: 0.03em;
}

#footer ul.footer-link li a:hover {
	opacity: 0.7;
}

#footer p.large {
	color: #fcfbf5;
	margin: 50px 0;
}

#footer ul.footer-snslink {
	display: flex;
	justify-content: center;
	padding-bottom: 150px;
}

#footer ul.footer-snslink li {
	width: 63px;
	height: 63px;
	margin: 0 7px;
}

#footer ul.footer-snslink li a img {
	width: 100%;
	height: auto;
}

#footer ul.footer-snslink li a:hover {
	opacity: 0.7;
	transition: 0.3s
}

/*ここからメディアクエリで各デバイスサイズに書き分け*/

/*================================================
Tablet : 画面の横幅が900pxまで
==================================================*/

@media screen and (max-width: 960px) {
	/* ---------------------------------------------------
	レイアウト
	------------------------------------------------------ */
	#service, #price, #events, #usersvoice, #access {
		padding: 75px 0;
	}

	.section-inner {
		padding: 0 20px;
	}

	.gnav-pc-wrap {
		display: none;
	}

	.section-title {
		padding-bottom: 75px;
	}

	p.large.first {
		margin-bottom: 50px;
	}

	.button-large {
		display: block;
		width: 262px;
		height: 75px;
		font-size: 18px;
		letter-spacing: 0.03em;
		line-height: 75px;
	}

	/* ---------------------------------------------------
	文字
	------------------------------------------------------ */
	h2.title-en {
		font-size: 24px;
		margin-bottom: 7px;
	}
	
	h2.title-jp {
		font-size: 10px;
	}
	
	h3.ex-large-num {
		font-size: 110px;
		padding-bottom: 12px;
	}
	
	h3.ex-large {
		font-size: 8.3vw;
		line-height: 1.125;
	}
	
	h3.large {
		font-size: 20px;
	}
	
	h3.medium {
		font-size: 18px;
	}
	
	h3.small {
		font-size: 16px;
	}
	
	h3.sub {
		font-size: 13px;
	}
	
	p.large {
		font-size: 16px;
		margin-bottom: 40px;
	}
	
	p.medium {
		font-size: 14px;
	}
	
	p.small {
		font-size: 13px;
	}
	
	p.sub {
		font-size: 11px;
	}
	/* ---------------------------------------------------
	ヘッダー
	------------------------------------------------------ */
	#header {
		height: 60px;
		display: flex;
		justify-content: flex-end;
	}
	#menu-button {
		display: block;
		width: 60px;
		height: 60px;
		padding: 18px 16px;
	}
	
	.menu-button-inner {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	
	.menu-button-inner span {
		display: block;
		width: 100%;
		height: 2px;
		background-color: #333333;
		position: absolute;
	}
	
	.menu-button-inner span:nth-child(1) {
		top: 0;
	}
	
	.menu-button-inner span:nth-child(2) {
		top: 0;
		bottom: 0;
		margin: auto;
	}
	
	.menu-button-inner span:nth-child(3) {
		bottom: 0;
	}
	
	  /* スマホ用メニューのスタイル */
	.gnav-sp-wrap {
		display: none;
		width: 100vw;
		height: 100vh;
		background-color: #fcfbf5;
		position: fixed;
		z-index: 100;
		padding-top: 120px;
	}
	
	ul.gnav-sp li {
		text-align: center;
		margin-bottom: 50px;
	}
	
	ul.gnav-sp li a {
		font-family: 'Outfit', sans-serif;
		font-size: 20px;
		letter-spacing: 0;
		color: #333333;
		font-weight: 500;
	}

	ul.gnav-sp li a:hover {
		color: #3d7329;
	}

	/* ハンバーガーボタンをクリックしたら×にする */
	.close span:nth-child(1){
		width: 100%;
		/* 線を45度右下に傾ける */
		transform: rotate(45deg);
		/* 位置の微調整 */
		top: 10px;
	}
	.close span:nth-child(2){
		/* 2番目の線は見えなくする */
		opacity: 0;
	}
	.close span:nth-child(3){
		width: 100%;
		/* 線を45度右上に傾ける */
		transform: rotate(-45deg);
		/* 位置の微調整 */
		bottom: 11px;
	}

	/* ---------------------------------------------------
	MV
	------------------------------------------------------ */
	.visual-wrap {
		width: 100%;
		height: 40%;
	}
	.main-wrap {
		height: 80px;
	}
	.titlebackground {
		height: 80px;
	}
	.maincopy {
		font-size: 40px;
		line-height: 1;
	}
	.concept-wrap {
		width: 95%;
		height: auto;
		top: 50%;
		align-items: flex-start;
	}
	.subcopy {
		font-size: 18px;
		line-height: 2;
	}

	.pc_none {
		display: none;
	}

	.tab_none {
		display: block;
	}

	.sp_none {
		display: none;
	}

	.concept-wrap::after {
		position: absolute;
		bottom: 40%;
		right: 5%;
	}

	#meinvisual {
		position: relative;
	}
	.button-square.responsive {
		font-size: 18px;
		position: absolute;
		bottom: 0;
		display: block;
		width: 100%;
		display: flex;
		text-align: center;
		z-index: 5;
	}

	.button-small {
		width: 210px;
		height: 60px;
		font-size: 18px;
		line-height: 60px;
	}
	
	.button-line {
		width: 262px;
		height: 75px;
		font-size: 18px;
	}
	
	/* ---------------------------------------------------
	サービス
	------------------------------------------------------ */
	#service {
		margin-top: 75px;
	}

	#service .col-2.building {
		margin-bottom: 25px;
	}

	#service .item.text::before {
		top: -30px;
	}

	#service .item.text p.large {
		margin-top: 7.8vw;
	}

	#service section.area {
		margin-bottom: 50px;
	}
	/* ---------------------------------------------------
	プライス
	------------------------------------------------------ */
	#price .floor-title h3.ex-large-num {
		font-size: 60px;
		padding-bottom: 8px;
	}

	#price .floor-title {
		margin-bottom: 40px;
	}

	#price .col-2 .item .img-plan {
		margin-bottom: 40px;
	}

	#price .secondfloor .col-2 {
		margin-bottom: 50px;
	}

	#price .img-studio {
		margin-bottom: 40px;
	}
	/* ---------------------------------------------------
	イベント
	------------------------------------------------------ */
	#events p.large {
		margin: 40px 0 40px 0;
	}
	#guest::before {
		top: -50px;
	}

	#orgnizer {
		margin-top: 50px;
	}

	#events p.backcopy.org {
		font-size: 95px;
	}

	/* カードのスタイル */
	#events .slick-slider.slider-1 .card {
		height: 300px;
		margin: 0 18px; 
	}

	#events .slick-slider.slider-1 .card p.sub {
		font-size: 13px;
		padding: 5px 0 9px 0;
	}

	/* スライダーの横幅 */
	#events .slick-slider.slider-1 {
		width: 532px; /* スライダー全体の幅 */
		height: 300px;
		margin: 0 auto 40px; /* スライダーを中央寄せ */
	}

	#events .slick-slider.slider-1 .slick-track {
		height: 300px;
	}

	#events .slick-slider.slider-1 .slide-arrow {
		margin: auto 0;
		width: 30px;
	}

	#events .slick-slider.slider-1 .next-arrow {
		right: -30px;
	}

	#events .slick-slider.slider-1 .prev-arrow {
		left: -30px;
	}

	#events .slick-slider.slider-1 .slick-slide:not(.slick-center) {
		opacity: 1;  /* 他のカードを少し透明に */
	}

	#events .calender {
		margin: 0 auto 40px;
	}
	/* ---------------------------------------------------
	ユーザーボイス
	------------------------------------------------------ */
	#usersvoice p.large.first {
		margin-bottom: 0;
	}

	#usersvoice .slick-slider .card {
		width: 230px; 
		height: 300px; 
		margin: 0 18px; 
	}
	/* スライダーの横幅 */
	#usersvoice .slick-slider.slider-2 {
		width: 534px; 
		height: 447px;/* 調整する */
		margin: 0 auto; 
	}
	
	#usersvoice .slick-slider.slider-2 .slick-slide:not(.slick-center) {
		opacity: 1;  /* 他のカードを少し透明に */
	}
	
	#usersvoice .slick-slider.slider-2 .slick-track {
		height: 387px;/* 調整する */
	}
	
	#usersvoice .slick-slider.slider-2 .wrap {
		height: 387px;/* 調整する */
	}

	#usersvoice .slick-slider.slider-2 .prev-arrow {
		left: 152px;
	}
	
	#usersvoice .slick-slider.slider-2 .next-arrow {
		right: 152px;
	}

	/* ---------------------------------------------------
	アクセス
	------------------------------------------------------ */
	#access .item.way h3.large {
		padding-top: 19px;
	}

	#access .item.way ul {
		padding-top: 10px;
	}

	#access .item.way ul li.icon {
		width: 40px;
		height: 40px;
		margin-left: 1.5vw;
	}

	#access .item.way.right p.medium.end {
		padding-bottom: 18px;
	}

	#access .col-2 .item.way {
		margin-bottom: 40px;
	}

	#access .map {
		margin-bottom: 40px;
	}
	
	#access {
		padding-bottom: 35px;
	}

	/* ---------------------------------------------------
	フッター
	------------------------------------------------------ */
	#footer ul.footer-link {
		padding-top: 75px;
	}

	#footer ul.footer-link li a {
		font-size: 14px;
	}

	#footer p.large {
		font-size: 14px;
		color: #fcfbf5;
		margin: 40px 0;
	}

	#footer ul.footer-snslink {
		padding-bottom: 75px;
	}

	#footer ul.footer-snslink li {
		width: 60px;
		height: 60px;
	}
}

/*================================================
サブブレークポイント :  画面の横幅が800pxまで ※建物紹介のレイアウト崩れ対策
=================================================*/

/* スマホ ---【質問あり】------------------------------*/
@media screen and (max-width: 800px) {

	.area-buttons {
		top: 2vw;
		grid-template-columns: 43.5% 43.5%;
		grid-template-rows: 9vw 9vw;
		column-gap: 13%;
		row-gap: 2.5vw;
	}
	.floors p.medium {
		line-height: 1.6;
		z-index: 3;
	}

	.floors li{
		margin-bottom: 12px;
	}

	.item.build {
		margin: 5.2vw 0;
	}
}

/*================================================
Smartphone :  画面の横幅が640pxまで
=================================================*/

@media screen and (max-width: 640px) {

	.section-inner {
		padding: 0 24px;
		/* 最大横幅550px */
		max-width: 550px;
	}
	/* ---------------------------------------------------
	レイアウト
	------------------------------------------------------ */
	.col-2 {
		/* レスポンシブでは横並びを解除 */
		display: block;
	}

	.col-2 .item {
		width: 100%;
	}

	.title-en::after {
		width: 70px;
		height: 82px;
		top: -32px;
		left: 12%;
	}

	.pc-only {
		display: none;
	}
	.sp-only {
		display: block;
	}

	.pc_none {
		display: none;
	}
	.tab_none {
		display: none;
	}
	.sp_none {
		display: block;
	}

	/* ---------------------------------------------------
	MV
	------------------------------------------------------ */
	.main-wrap {
        width: 88%;
    }
	.subcopy {
        font-size: 16px;
        line-height: 1.75;
    }
	.concept-wrap::after {
        bottom: 33%;
        right: -2%;
        transform: rotate(12deg);
        transform-origin: left bottom;
        animation: sway 5s ease-in-out infinite;
    }

	/* ---------------------------------------------------
	サービス
	------------------------------------------------------ */
	#service .section-title::before {
		top: -40px;
		width: 20%;
		height: 60px;
	}
	.area-buttons {
        top: 2.5vw;
        grid-template-rows: 16vw 16vw;
        row-gap: 6.8vw;
    }

	.img-smallbutton {
		width: 35px;
		height: 35px;
		margin-right: 7px;
	}

	#service .item.area::before {
		bottom: -70px;
		width: 34%;
		height: 120px;
	}

	#service .item.text::before {
        top: -50px;
        left: 50%;
        transform: translateX(-50%);
        max-width: 340px;
    }

	h3.ex-large {
        font-size: 60px;
    }

	#service .item.text p.large {
        margin-top: 75px;
    }

	/* ---------------------------------------------------
	プライス
	------------------------------------------------------ */
	#price .title-en::after {
        left: 20%;
    }
	#price .section-title::before {
		top: -15px;
		left: 0;
		width: 20%;
		height: 80px;
	}
	#price .section-title::after {
		top: -15px;
		right: 0;
		width: 20%;
		height: 80px;
	}
	#price .floor-title h3.ex-large-num {
        font-size: 40px;
        padding-bottom: 5px;
    }

	#price .floor-title h3.ex-large-num {
        font-size: 40px;
        padding-bottom: 5px;
    }

	#price .floor-title h3.large {
		margin-top: -7px;
		padding: 21px 50px;
	}
	
	#price .secondfloor .col-2 .item.left {
        margin-bottom: 40px;
    }

	#price .planbox {
		border-radius: 10px;
		border: solid 4px #9cb78f;
	}

	#price .planbox .plan-head {
		background-color: #9cb78f;
		border-radius: 5px 5px 0 0;
		padding: 30px 0;
		position: relative;
	}

	#price .planbox .plan-head::after {
		content: "";
		background-image: url(../images/arrow-sp.png);
		background-position: center;
		background-size: contain;
		width: 20px;
		height: 12px;
		position: absolute;
		top: 45%;
		right: 8%;
	}
	#price .planbox .plan-head h3.medium {
		margin-left: 25px;
		text-align: left;
	}

	#price .planbox .plan-body {
		display: none;
	}

	#price .planbox .plan-body h3.medium {
		margin: 25px 0;
	}

	#price .planbox .plan-body ul li.dot {
		width: 14px;
		height: 14px;
		background-color: #9cb78f;
		border-radius: 7px;
		margin: 7px 0;
	}

	#price .planbox .plan-body ul li {
		margin-left: 15px;
	}

	#price .planbox .plan-body .fee {
		width: 90%;
		margin: 0 auto 25px;
	}
	#price .planbox .plan-body ul {
		display: flex;
	}

	#price .planbox .plan-body .fee p.medium.num {
		margin-left: 30px;
	}

	#price .planbox .plan-body .fee .plans {
		margin-bottom: 15px;
	}

	#price .planbox .plan-body .fee .option {
		margin: 0 auto 10px 20px;
	}

	#price .planbox .plan-body .fee p.small.num {
		margin-left: 30px;
	}

	#price .planbox .plan-body .option ul li.dot {
		width: 13px;
		height: 13px;
		background-color: #fcfbf5;
		border: solid 2px #9cb78f;
		border-radius: 7px;
		margin: 5px 0;
	}

	#price .planbox .plan-body .fee p.sub {
		text-align: center;
	}

	/* ---------------------------------------------------
	イベント
	------------------------------------------------------ */
	#events p.backcopy {
		top: -30px;
		font-size: 25vw;
	}

	#events .copy-wrap {
		width: 95%;
	}

	#guest::before {
		width: 26%;
		height: 75px;
	}

	#orgnizer::before {
		top: -42px;
		left: -10px;
		width: 22%;
		height: 70px;
	}

	/* カードのスタイル */
	#events .slick-slider.slider-1 .card {
		height: 300px;
		margin: 0 15px; 
	}


	/* スライダーの横幅 */
	#events .slick-slider.slider-1 {
		width: 266px; /* スライダー全体の幅 */
	}

	#events p.backcopy.org {
        font-size: 15vw;
		top: -20px;
    }

	#events .calender {
		width: 100%;
		height: 252px;
    }
	/* ---------------------------------------------------
	ユーザーボイス
	------------------------------------------------------ */
	#usersvoice .slick-slider.slider-2 {
		width: 320px; 
	}

	#usersvoice .slick-slider.slider-2 .slick-center {
		transform: scale(1);  /* 中央のカードを大きくする */
	}

	#usersvoice .slick-slider .card {
        margin: 0 10px;
    }


	#usersvoice .slick-slider.slider-2 .prev-arrow {
		left: 45px;
	}
	
	#usersvoice .slick-slider.slider-2 .next-arrow {
		right: 45px;
	}

	/* ---------------------------------------------------
	アクセス
	------------------------------------------------------ */
	#access .item.way ul li.icon {
        margin-left: 25px;
    }
	#access .item.way .pubtrans-wrap {
		padding-bottom: 25px;
	}

	#access .item.way.left::before {
		top: -60px;
		left: -1.4%;
		width: 30%;
		height: 100px;
	}

	#access .item.way.right::before {
		width: 25%;
		height: 100px;
	}

	#access .map {
		height: 270px;
        margin-bottom: 40px;
    }

	/* ---------------------------------------------------
	フッター
	------------------------------------------------------ */
	#footer ul.footer-link {
		display: block;
	}
	#footer ul.footer-link li {
		margin: 0 0 26px 0;
	}

}