@charset "UTF-8";
*{
	margin: 0;
	padding: 0;
	font-family: "Shippori Mincho", serif;
	font-weight: 400;
	font-style: normal;
}

*, *:before, *:after {
	box-sizing: border-box;
}

ul{
	list-style: none;
}

/*========= 基本スタイル========= */

body,
html {
  margin: 0 auto;
  letter-spacing: 2px;
  font-size: 13px;
}


/*========= トップ =========*/

.top{
	background-image: url("../images/top2.jpg");
	background-position: center center;
	background-size: cover;
	height: 100vh;
}

h1{
	position: absolute;
	top:40vh;
	left: 7vw;
	font-size: 20px;
	color: #fff;
}

.top p{
	position: absolute;
	top:50vh;
	left: 6vw;
	font-size:max(4vw,24px);
	color: #fff;
}


/*========= ローディング画面 =========*/

#loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:#fff;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 99999;
	color:#333;
	transition: opacity 1s ease-out; /* 透明度が変化するアニメーション */
	opacity: 1; /* 初期状態の透明度は1（完全に不透明） */
  }

.clock {
	position: relative;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: solid 4px silver;
	text-align: center;
  }
  
  .clock::after {
	content: "";
	position: absolute;
	top: calc(50% - 5.33px);
	left: calc(50% - 5.33px);
	border-radius: 50%;
	width: 10.66px;
	height: 10.66px;
	background-color: silver;
  }
  
  .dials {
	position: relative;
	width: 100%;
	height: 100%;
  }
  
  .dials > div {
	position: absolute;
	top: 0;
	left: calc(50% - 2px);
	width: 4px;
	height: 50%;
	transform-origin: bottom;
  }
  .dials > div::after {
	position: absolute;
	top: 0;
	content: "";
	width: 4px;
	height: 10px;
	background-color: silver;
  }
  
  .dials div:nth-child(1) { transform: rotate(30deg); }
  .dials div:nth-child(2) { transform: rotate(60deg); }
  .dials div:nth-child(3) { transform: rotate(90deg); }
  .dials div:nth-child(4) { transform: rotate(120deg); }
  .dials div:nth-child(5) { transform: rotate(150deg); }
  .dials div:nth-child(6) { transform: rotate(180deg); }
  .dials div:nth-child(7) { transform: rotate(210deg); }
  .dials div:nth-child(8) { transform: rotate(240deg); }
  .dials div:nth-child(9) { transform: rotate(270deg); }
  .dials div:nth-child(10) { transform: rotate(300deg); }
  .dials div:nth-child(11) { transform: rotate(330deg); }
  .dials div:nth-child(12) { transform: rotate(359.5deg); }
  
  .hand {
	position: absolute;
	bottom: 50%;
	left: 50%;
	background-color: silver;
	transform-origin: 50% 100%;
  }
  
  .hour.hand {
	width: 4px;
	height: 60px;
  }
  
  .minute.hand {
	width: 2.66px;
	height: 93.34px;
  }


  .rolling-image {
	width: 100px; /* 画像のサイズ */
	height: 100px;
	border-radius: 50%; /* 画像を丸くする */
	position: absolute;
	bottom: 20px;
	animation: roll 6s infinite linear;
	animation-fill-mode: backwards; /* アニメーション開始前のスタイルを適用 */
  }
  
  /* 最初の画像のアニメーション */
  .rolling-image:first-child {
	animation-delay: 0s; /* 最初の画像に遅延はなし */
  }
  
  /* 2番目の画像のアニメーション */
  .rolling-image:nth-child(2) {
	animation-delay: 0.5s; /* 2番目の画像は少し遅れて開始 */
  }

  .rolling-image:nth-child(3) {
	animation-delay: 1s; /* 2番目の画像は少し遅れて開始 */
  }

  .rolling-image:nth-child(4) {
	animation-delay: 1.5s; /* 2番目の画像は少し遅れて開始 */
  }

  .rolling-image:nth-child(5) {
	animation-delay: 2s; /* 2番目の画像は少し遅れて開始 */
  }
  
/* レスポンシブ対応 (max-width: 768px) */
@media (max-width: 768px) {
	.rolling-image {
		width: 100px; /* 画像のサイズ */
		height: 100px;
		border-radius: 50%; /* 画像を丸くする */
		position: absolute;
		bottom: 20px;
		animation: roll 5.5s infinite linear;
		animation-fill-mode: backwards; /* アニメーション開始前のスタイルを適用 */
	}

	.rolling-image:first-child {
	  animation-delay: 0s; /* 最初の画像に遅延 */
	}
  
	.rolling-image:nth-child(2) {
	  animation-delay: 0.9s; /* 2番目の画像はもっと遅れて開始 */
	}
  
	.rolling-image:nth-child(3) {
	  animation-delay: 2.2s; /* 3番目の画像はもっと遅れて開始 */
	}
  
	.rolling-image:nth-child(4) {
	  animation-delay: 3.7s; /* 4番目の画像はもっと遅れて開始 */
	}
  
	.rolling-image:nth-child(5) {
		animation-delay: 4.8s; /* 5番目の画像はもっと遅れて開始 */
	}
  }

  @keyframes roll {
	from {
	  left: -120px; /* 画面の外からスタート */
	  transform: rotate(0deg);
	}
	to {
	  left: 100%; /* 画面の右端まで移動 */
	  transform: rotate(1040deg);
	}
  }
  
/*========= ナビ ===============*/

header{
	position: fixed;/*header固定*/
	height: 80px;/*Headerの高さ設定*/
	width:100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background:#ffffff;
	color:#333;
	z-index: 10000;
}

header img{
	height: 80px;
	margin: 0 auto 0 80px;
}


/* 以下はレイアウトのための CSS*/

nav{
	margin: 0 30px 0 auto;
}

nav ul{
    list-style: none;
    display: flex;
	justify-content: flex-end;
	align-items: center; /* 縦の中央揃え */
}

nav ul li a{
    display: block;
    text-decoration: none;
    color: #666;
    padding:10px;
    transition:all 0.3s;
}

nav ul li a:hover{
    color:#c5c5c5;
}

@media screen and (max-width:768px) {
    nav ul li a:hover{
    color: #666;
    }

    nav ul li.current a {
    color:#c5c5c5;
    }

	header img{
		height: 80px;
		margin: 0 auto 0 0;
	}

	nav{
		font-size: 10px;
		margin: 0 10px 0 auto;
	}

	
}

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


	#g-nav li:nth-child(5){
	display: block;
	}

}

.external-link-btn {
    display: block;
    text-decoration: none;
    color: #fff; /* 文字色 */
    background-color: #989898; /* 背景色 */
    padding: 10px; /* パディング */
    border-radius: 5px; /* ボーダーラジアス */
    transition: all 0.3s; /* トランジション効果 */
	margin: 0 0 0 10px;
}


.external-link-btn:hover {
    background-color: #666; /* ホバー時の背景色 */
    color: #ffffff; /* ホバー時の文字色 */
}



.eat-in-btn {
    background-color: #fff;           /* 背景を白に */
    color: #989898;                   /* 文字色を元の背景色に */
    border: 1px solid #989898;        /* 枠線を追加 */
}

/* ホバー時 */
.eat-in-btn:hover {
    background-color: #f0f0f0;        /* ホバー時の背景色（少しグレー） */
    color: #666;                      /* ホバー時の文字色 */
    border-color: #666;              /* ホバー時の枠線 */
}



@media screen and (max-width:768px) {
	.external-link-btn {
		display: block;
		text-decoration: none;
		color: #fff; /* 文字色 */
		background-color: #989898; /* 背景色 */
		padding: 5px; /* パディング */
		border-radius: 5px; /* ボーダーラジアス */
		transition: all 0.3s; /* トランジション効果 */
		margin: 6px 0 0 10px;
	}

	.eat-in-btn {
		background-color: #fff;
		color: #989898;
		border: 1px solid #989898;
	}
	.eat-in-btn:hover {
		background-color: #f0f0f0;
		color: #666;
		border-color: #666;
	}
	
}



/* インスタ */

/* Instagramだけ表示を調整 */
nav ul li a.insta-link {
    display: inline-flex !important; /* これでSVGが潰れない */
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin-left: 10px;
    color: #989898;
    background-color: transparent;
    vertical-align: middle;
}

/* ホバーで色変更 */
nav ul li a.insta-link:hover {
    color: #666;
}

/* SVGアイコンのサイズを固定 */
nav ul li a.insta-link svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
}





/*=== 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:-50px;
	left:10%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:110px;
    /*テキストの形状*/
	color: #666;
	font-size: 12px;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-6px;
    /*丸の形状*/
	width:15px;
	height:15px;
	border-radius: 50%;
	background:#666;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:140px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:2px;
	height: 150px;
	background:#666;
}  


/*============= メイン ===============*/

h2{
	font-size:max(1.2vw,13px);
	margin: 10px 0 20px 0;
}

h3{
	font-size:max(1.2vw,13px);
	margin: 0 0 50px 0;
}




/*============= イートイン ===============*/

.center-title {
	display: block !important;
	width: fit-content !important;
	margin: 200px auto 0 !important;
	text-align: center !important;
  }

.center-text {
	text-align: center;
	line-height: 1.8;
	margin: 4em auto;
	width: 80%;
}


.box-container {
	display: flex;
	justify-content: center; /* 中央揃え */
	gap: 40px; /* ボックス間のスペース */
	flex-wrap: wrap; /* 画面が狭くなったら縦並びに */
	margin-top: 50px;
	margin-bottom: 230px;
}


.box5-2 {
	width: 700px;
	margin: 0; /* 自動マージン削除 */
	border: 1px solid #989898;
	transition: box-shadow 0.3s ease;
}


.box5-2:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* 枠と影が一体化する */
  }



.box-link {
	text-decoration: none;
	color: inherit;
	display: block;

  }
  
  


.box-title {
	background-color: #fff;
    padding: 0 .5em;          /* タイトルの余白 */
    line-height: 1;             /* タイトルの行の高さ */
    margin-top: -.5em;          /* 上からの距離 (ボックスから浮かせる) */
    margin-left: 1em;           /* 左からの距離 */
    width: fit-content;         /* タイトル幅を内容に合わせる */
}

.box-content {
    padding: 1em;               /* コンテンツ内の余白 */
}

.box5-2 p {
    margin: 0;
}

.box5-2 p:nth-child(1){
	padding: 0px 0 10px 0;
}


.box5-2 p:nth-child(4){
	padding: 20px 0 10px 0;
}

.box-content.with-image {
	display: flex;
	align-items: flex-start;
	gap: 15px; /* 画像とテキストの間の余白 */
  }
  

  .text-block p {
	margin: 0 0 5px 0; /* 上下の余白調整 */
  }


  .donut-img {
	max-width: 200px;
	max-height: 200px;
	width: auto;
	height: auto;
	display: block;
  }


  @media (max-width: 1039px) {
	.box5-2 {
	  margin-top: 60px;
	}
  
	.box5-2:first-child {
	  margin-top: 0;
	}
  }





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

	.box5-2 {
		width: 70vw;
	 }

	 .box-title {
		margin-left: auto;
		margin-right: auto;
		width: fit-content;
		/* 以下は変化がなければ不要 */
		text-align: center;
	  }

	.box-content.with-image {
	  flex-direction: column;
	  align-items: center; /* 中央寄せにしたい場合 */
	  text-align: center;  /* テキストも中央にしたい場合（お好み） */
	}
  
	.donut-img {
		max-width: 400px;
		max-height: 200px;
		width: 40vw;
	  height: auto;
	}

  .box5-2 p:nth-child(2){
	font-size: 12px;
}

.box5-2 p:nth-child(3){
	font-size: 12px;
}

}

.newstore{
	margin: 150px 0 150px 0;
	text-align: center;

}


.ct-1 {
    background-image: url(../images/object.png);
    background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 500px;
	height: 300px; /* 高さを追加 */
	margin: 0 auto;
}

@media (max-width: 1030px) {
    .ct-1 {
		width: 300px;
		height: 100px;
    }
}


.newstore p{
	width: 80%;
	max-width: 550px;
	text-align: center;
	margin: 20px auto;
	font-size: 16px;
}


.content{
	display: flex;
	justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
	padding: 80px 0;
	margin: 100px 0;
}

#area-1{
	margin: 0 100px 0 0 ;
}

.content img{
	width: 30%;
	height: auto;
	object-fit: contain;
	margin: 0 0 0 10px;
}

.aa{
	margin: 0 0 0 100px;
}

#area-3{
	padding: 0px 0 100px 0;
	text-align: center;
}

#area-3 p{
	width: 80%;
	max-width: 550px;
	text-align: center;
	margin: 0 auto;
}

#area-3 p:nth-child(3){
	padding: 0 0 20px 0;
}

#area-3 p:nth-child(4){
	padding: 0 0 30px 0;
}

#area-3 .mm{
	width: 80%;
	min-width: 400px;
	margin: 70px 0 0 0;
}

#area-3 .nn{
	display: none;
}

#area-4{
	margin: 150px auto 200px auto;
	text-align: center;
}

#area-4 p:nth-child(3){
	font-size: 18px;
	padding: 20px 0 10px 0;
}

@keyframes fadeInUp {
	from {
	  opacity: 0;
	  transform: translateY(20px);
	}
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }
  
  #area-4 p:nth-child(3):before {
	content: "1. "; /* ここに表示させたい数字を設定 */
	font-family: "Cookie"; /* フォントファミリーを変更 */
	font-size: 40px;
  }
  
  #area-4 p:nth-child(3) {
	font-size: 18px;
	padding: 20px 0 10px 0;
  }

  #area-4 p:nth-child(5):before {
	content: "2. "; /* ここに表示させたい数字を設定 */
	font-family: "Cookie"; /* フォントファミリーを変更 */
	font-size: 40px;
  }

#area-4 p:nth-child(5){
	font-size: 18px;
	padding: 80px 0 10px 0;

}

#area-4 p:nth-child(8):before {
	content: "3. "; /* ここに表示させたい数字を設定 */
	font-family: "Cookie"; /* フォントファミリーを変更 */
	font-size: 40px;
  }

#area-4 p:nth-child(8){
	font-size: 18px;
	padding: 80px 0 10px 0;
}


#area-5{
	position: relative; /* これは絶対位置指定された子要素の基準点になります */
    text-align: center;
	background-image: url(../images/omoi1.jpg);
	background-position: center center;
	background-size: cover;
	width: 65%;
	height: 120vh;
	margin: 0 auto;
}

#area-5 .text-container {
    position: absolute; /* #area-5に対して絶対位置指定 */
    top: 10%; /* 上辺からの位置 */
    left: 10%; /* 左辺からの位置 */
    width: 50%; /* コンテナの幅、必要に応じて調整 */
    padding: 20px; /* テキスト周りの余白 */
    background-color: rgba(255, 255, 255, 0.3); /* 背景色と透明度、内容が読みやすいように調整 */
    color: #333; /* テキストの色 */
    text-align: left; /* テキストを左揃え */
}

/* レスポンシブデザインの調整 */
@media screen and (max-width: 768px) {
    #area-5 .text-container {
        top: 5%;
        left: 5%;
        width: 90%; /* スマートフォン表示ではより幅を広げる */
    }
}

#area-6{
	text-align: center;
	margin: 200px auto 50px auto;
	width: 80vw;
}

/*========= 線が伸びる =========*/
.border {
	position: relative;
	display: inline-block;
}

/* アニメーションをトリガーするためのクラス */
.animate-border:before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0%;
	border-bottom: solid 1px #333;
	animation: border_anim 2s linear forwards;
}

@keyframes border_anim {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
}





/*768px以下の見え方*/

@media screen and (max-width:768px){
#main-area{
	width:100%;
}

#sub-area{
	width:100%;
	padding: 20px;
}

#sub-area .subnav{
	position:relative;/*stickyからrelativeに戻す*/	
    top:0;
}
}



  /*======== クラファン ======== */

#kekka{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 100vw;
	margin: 0 auto;
	background: linear-gradient(to right, rgba(255, 252, 233, 0), rgb(255, 252, 233), rgba(255, 252, 233, 1), rgba(255, 252, 233, 0));	
	font-size:max(1.3vw,20px);
	padding: 5px 0;
}

#kekka p:nth-child(2){
	font-size: 13px;
	padding: 10px 0 0px 0;
}

/* レスポンシブデザインの調整 */
@media screen and (max-width: 768px) {

    #kekka span{
        display: block;
    }
}


#orei{
	text-align: center;
	width: 80vw;
	margin: 0 auto;
	padding: 80px 0 50px 0;
	line-height: 1.8;
}

#orei p:nth-child(3){
	padding: 50px 0 0px 0;
}

#orei p:nth-child(5){
	font-size: 13px;
	padding: 50px 0 0px 0;
}

.chuui{
	text-align: center;
	margin: 10px 0 100px 0;
	font-size: 12px;
}

/* CSS Gridを使用したレイアウト調整 */
.info-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 20px; /* 列間の間隔 */
	align-items: start; /* アイテムを上端揃えに */
	margin: 50px 0 0 0;
  }
  
  .funding-usage, .schedule {
	padding: 0 10vw; /* 両側のパディングを設定 */
  }
  
  .funding-usage {
	position: relative; /* 絶対位置指定の基準点 */
  }
  
  .funding-usage::after {
	content: '';
	position: absolute;
	right: 0; /* 右端に縦棒を配置 */
	top: 0;
	bottom: 0;
	width: 1px; /* 縦棒の幅 */
	background-color: #ccc; /* 縦棒の色 */
  }
  
  @media screen and (max-width: 768px) {
	.info-container {
	  grid-template-columns: 1fr; /* 画面幅が768px以下では列を1つに */
	}
  
	.funding-usage::after {
	  display: none; /* 縦棒を非表示に */
	}

	.info-container h2{
		font-size: 19px;
	}

	.funding-usage{
		margin: 0 0 80px 0; 
 	}

  }




  /* スケジュールのコンテナのスタイリング */
  .schedule {
	flex-basis: 48%; /* コンテナの幅を約半分に設定 */
	padding: 0 0 0 10vw;
	box-sizing: border-box; /* パディングを含めた幅で計算 */
	/* 必要な追加スタイリング */
  }

  .funding-usage p:nth-child(4){
	padding: 20px 0 0 0;
  }

  .funding-usage p:nth-child(5){
	padding: 10px 0 0 0;
  }

  .funding-usage p:nth-child(7){
	padding: 10px 0 0 0;
  }

  .schedule li{
	padding: 0 0 20px 0;
  }





/*======== footer ======== */

.footer__social a {
    display: inline-block;
    width: 30px;
    opacity: 0.7;
	color: #666;
	margin: 5px 0 0 0;
}

.footer__social a:not(:last-child) {
    margin-right: 16px;
}
  
.footer {
	padding: 2rem;
	font-size: 12px;
	color: #989898;
	background: #fff;
	border-top: 1px solid #cdcdcd;
	margin: 50px 0 0 0;
}

.pp {
	color: #989898;
	text-decoration: none;
	margin: 0 0 10px 0;

}

.footer p:nth-child(2){
	margin: 20px 0  0 0px;
	color: #666;
}

.footer a:hover {
	color: #000;
}
  
  @media (min-width: 768px) {
	.footer {
	  display: flex;
	  justify-content: space-between;
	}
  
	.md-flex {
	  display: flex;
	}
  
	.md-flex li + li {
	  margin-left: 16px;
	}

	.footer p:nth-child(2){
		text-align: right;
		margin: 0 0 0 auto;
		padding: 10px 0 0 0;

	}
	
	.footer {
		margin: 50px 0 0 0;
	}

	.footer__social a {
		margin: 5px 10px 0 10px;
	}
	


  }


/*======== ボタン ======== */

.btn-container {
	display: flex; /* Flexbox コンテナを使います */
	justify-content: center; /* 水平方向に中央揃えにします */
	align-items: center; /* 垂直方向に中央揃えにします */
	margin: 100px 0 0 0;
  }

  .btn,
  a.btn,
  button.btn {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.5;
	position: relative;
	display: inline-block;
	padding: 1rem 4rem;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0.1em;
	color: #212529;
	border-radius: 0.5rem;
  }
  
  a.btn-malformation {
	font-size:min(3vw,20px);
	padding: 3rem 1rem;
	color: #fff;
	border-radius: 100% 90px / 90px 100%;
	background-color: #989898;
  }
  
  a.btn-malformation:hover {
	color: #fff;
	border-radius: 60% 80% / 100% 80%;
  }



/*====== ふわっと出現 =======*/
/* ふわっと表示させるための初期状態 */
.fadeIn {
	opacity: 0;
	transform: translate3d(0, 20px, 0);
	transition: opacity 4s ease-out, transform 4s ease-out;
  }
  
  /* スクロールで画像が表示範囲に入った時の状態 */
  .fadeInVisible {
	opacity: 1;
	transform: none;
  }


/*====== メディアクエリ =======*/
  @media (max-width: 768px) {

	.newstore p{
		font-size: 13px;
		
	}


	#area-5{
		width: 100%;
		height: 120vh;
		margin: 0 auto;
	}
	.content{
		display: block;
		justify-content: center; /* 水平方向の中央揃え */
		align-items: center; /* 垂直方向の中央揃え */
		padding: 10px 0;
		margin: 20px auto 10px auto;
		text-align: center;
	}
	.content img{
		width: 50%;
		height: auto;
		object-fit: contain;
		margin: 0 0 0 10px;
	}
	
	#area-1{
		margin: 50px auto 30px auto;
		width: 80%;
	}

	.aa{
		margin: 30px auto 200px auto;
		width: 80%;
	}

	#area-4{
		width: 80%;
		text-align: center;
		margin: 0 auto 200px auto;
	}

	#area-3 .mm{
	display: none;
	}

	#area-3 .nn{
		display: block;
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}

	.top p{
		position: absolute;
		top:50vh;
		left: 1vw;
	}

  }