@charset "utf-8";

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("./css/inview.css");


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {

	--churros-main-color: #87cab0;			/*テーマカラー*/
	--primary-inverse-color: #fff;		/*上のprimary-colorの対となる色*/

	--churros-accent-color: #fff3e1;			/*サブカラー*/
	--secondary-inverse-color: #fff;	/*secondary-colorの対となる色*/
	
	--accent-color: #33b9b2;			/*アクセントカラー*/
	--accent-inverse-color: #fff;		/*accent-colorの対となる色*/

	/*余白の一括管理用。主に左右の余白に使っています。4rem＝4文字分。*/
	--content-space: 4rem;
	
}


/*animation11のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}


/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/* ---- 1. フォントの定義 ---- */
@font-face {
  font-family: 'NotoSansJP VF';
  src: url('./fonts/NotoSansJP-VF.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: 'NotoSerifJP VF';
  src: url('./fonts/NotoSerifJP-VF.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}




/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html,body {
	font-size: 14px;	/*基準となるフォントサイズ。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	html, body {
		font-size: 16px;	/*基準となるフォントサイズ。*/
	}

	}/*追加指定ここまで*/


body {
	margin: 0;padding:0;
	font-family: "NotoSansJP VF", "NotoSerifJP VF", "Meiryo", "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
	font-weight: 400;
	-webkit-text-size-adjust: none;
	background: #fff;
	color: white;
	line-height: 2;
	overflow-x: hidden;
	cursor: url('./images/STREET-CHURROS-cursorr.png'), auto;/*カーソルを変更*/
}

/*リンクにカーソルが乗った時のカーソルを変更*/
a:hover {
  cursor: url('./images/STREET-CHURROS-cursorr-ice.png') 16 16, auto;
}

p {
  font-family: 'NotoSansJP VF', sans-serif;
  font-weight: 300;
}


/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}

/*section*/
section {
	padding: var(--content-space);	/*section内の余白。css冒頭のcontent-spaceを読み込みます。*/
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: inherit;
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
	filter: brightness(1.1);	/*少しだけ明るくする*/
}


/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	position: relative;
	animation: opa1 1s 1s both;	/*1秒待機し、1秒かけてフェードイン*/
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0 auto;
}


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  position: fixed;
  padding: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: #87cab0;
  transition: transform 0.3s ease-in-out;
}

header a {color: inherit;}

header.hide {
  transform: translateY(-100%);
}
header.show {
  transform: translateY(0);
}

/*ロゴ*/
#logo,
#logo a {text-decoration: none;}
#logo img {
  padding: 0;
  line-height: 1;
  display: block;
  height: 50px;
  margin: 0.7rem 0rem 0.7rem 0rem;
}


/*header-box（ヘッダー右側にあるボタン）
---------------------------------------------------------------------------*/
/*ボックス全体*/
#header-box * {margin: 0 23px 0 0;padding: 0;}

.header-box {
  display: flex;
}


/*ボタンが入ったボックス*/
#header-box .btn {
	font-family: "NotoSansJP VF";
	font-weight: 500;
	font-size: 1.1rem;
	list-style: none;
	display: flex;
}

/*メニュー１個あたり（ここにない設定は、下の方にある「btn共通設定」にあります。）*/
#header-box .btn a {
	display: block;text-decoration: none;
	padding: 0.5rem 2.5rem;
	border-radius: 3px;
}



/*btn共通設定（ヘッダーと、フッターの上のボックス内にあるボタンの共通設定）
---------------------------------------------------------------------------*/
.btn a {
	display: block;text-decoration: none;
	background: var(--primary-inverse-color);
	color: var(--churros-main-color);
	text-align: center;
}

/*マウスオン時*/
.btn a:hover {
	background: var(--accent-inverse-color);
	color: var(--accent-color);
	cursor: url('./images/STREET-CHURROS-cursorr-drink.png'), pointer;
}

/*開閉メニュー
---------------------------------------------------------------------------*/
/*メニューブロック共通*/
#menubar {
	animation: animation1 0.2s both;
	position: fixed;overflow: auto;z-index: 100;
	right: 50px;
	top: 0px;
	width: 100%;
	height: 100%;
	padding: 100px var(--content-space) 50px;
	background: var(--churros-main-color);
	color: var(--primary-inverse-color);
}

/*メニュー１個あたり*/
#menubar a {
	display: block;text-decoration: none;
	color: inherit;
	border: 1px solid #fff;
	margin-bottom: 1rem;
	padding: 1rem 2rem;	
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
#menubar_hdr {
	display: flex;
	animation: opa1 0s 0.2s both;
	position: fixed;
	z-index: 101;
	cursor: pointer;
	right: 0px;
	top: 00px;
	width: 70px;
	height: 70px;
	background: #87cab0;
	border-radius: 0px 0px 0px 15px;
	transform-origin: right top;
	transform: scale(1);
}

/*バツ印が出ている時のボタン色*/
#menubar_hdr.ham {
	background: #ff0000;
}

/*ハンバーガーアイコンの線*/
#menubar_hdr span {
	display: block;
	position: absolute;
	left: 18px;
	width: 35px;
	height: 2px;
	background: #fff;
	transition: 0.3s;
}

#menubar_hdr span:nth-of-type(1) {
	top: 24px;
}
#menubar_hdr span:nth-of-type(2) {
	top: 34px;
}
#menubar_hdr span:nth-of-type(3) {
	top: 44px;
}

/* ハンバーガーメニュー展開時 */
#menubar_hdr.ham span:nth-of-type(1) {
	transform: translateY(10px) rotate(-45deg);
}
#menubar_hdr.ham span:nth-of-type(2) {
	opacity: 0;
}
#menubar_hdr.ham span:nth-of-type(3) {
	transform: translateY(-10px) rotate(45deg);
}


/*ヘッダーにある１行のお知らせ
---------------------------------------------------------------------------*/
.new-top {
  position: absolute;
  top: 80px;
  right: 2vw;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 5px;
  width: max-content;
  max-width: calc(100vw - 4vw);
  font-size: 16px;
  line-height: 1.5;
  color: #87cab0;
  overflow: hidden;
  height: 90px;
  height: auto; /* ← PCでは高さを自動に */
}

/* PC用に2行制御 */
.text-wrapper {
  height: 48px;   /* ← 行の高さ × 2 (24px × 2) */
  overflow: hidden;
  position: relative;
}
.text li {
  height: 24px;
  line-height: 24px;
}

.new-top h2 {
  font-size: 1em;
  font-weight: 400;
  background: #87cab0;
  color: #fff;
  border-radius: 3px;
  margin-right: 1rem; /* ← NEWS と内容の間 */
  padding: 0 1rem;
  white-space: nowrap;
}

/* ここからスマホ対応 */
@media (max-width: 768px) {
  .new-top {
    top: 60px;             
    padding: 0.8rem 0.8rem;    /* 上下に少し余白を追加 */
    flex-wrap: nowrap;
    height: 90px;               /* 全体の箱の高さを高く */
    box-sizing: border-box;     /* 高さに padding を含める */
  }

  .new-top h2 {
    margin-right: 0.8rem;
    padding: 0rem 0.8rem;
    font-size: 0.9em;
    white-space: nowrap;
    margin-top: 0;              /* NEWSは上に寄せずに標準位置 */
  }

  .text-wrapper {
    height: 48px;               /* 2行表示は維持 */
    overflow: hidden;
    position: relative;
    margin-top: 16px;           /* テキスト全体を少し下にずらす */
  }

  .text li {
    height: 24px;
    line-height: 24px;
    font-size: 0.85rem;
  }
}


/*ヘッダーのスマホサイズ
---------------------------------------------------------------------------*/


@media only screen and (max-width: 480px) {
　　
  /* ヘッダーのサイズを調整 */
	#header-box {
		margin-right: -30px;
	}

  /* 小さい画面でロゴ画像を小さくする */
  	#logo img {
    	height: 24px;
    	margin: 1rem;
  	}

	/*ヘッダーブロック*/
	header {
		display: flex;
		justify-content: space-between;
		gap: 2rem;
		align-items: center;
	}

  .header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-right: 5rem; /* ←これで右に詰めすぎを防ぐ */
  }

  /* 資料請求ボタンのサイズを調整 */
  #header-box .btn {
    margin-right: -60px;
  }

  #header-box .btn a {
    padding: 0.1rem 1rem;
    font-size: 0.8rem;
    border-radius: 4px;
  }

  /* ハンバーガーメニューのサイズを調整 */
  #menubar_hdr {
    width: 52px;
    height: 52px;
    border-radius: 0 0 0 10px;
  }

  #menubar_hdr span {
    left: 15px;
    width: 20px;
    height: 2px;
  }

  #menubar_hdr span:nth-of-type(1) {
    top: 16px;
  }
  #menubar_hdr span:nth-of-type(2) {
    top: 24px;
  }
  #menubar_hdr span:nth-of-type(3) {
    top: 32px;
  }

  /* 展開時のXマーク調整（念のため） */
  #menubar_hdr.ham span:nth-of-type(1) {
    transform: translateY(8px) rotate(-45deg);
  }
  #menubar_hdr.ham span:nth-of-type(3) {
    transform: translateY(-8px) rotate(45deg);
  }

 .new-top {
    flex-direction: column;
    align-items: center; /* 中央寄せ */
    justify-content: center;
    left: 50%;
    transform: translateX(-50%);
    right: auto; /* 上書きして無効化 */
    top: 80px; /* ← お好みで調整（元は80px） */
    padding: 0.8rem;
    font-size: 14px;
    max-width: 90vw;
    text-align: center;
  }

  .new-top h2 {
    font-size: 1rem;
    margin-right: 0;
    margin: 0 0 0.2rem 0; /* 上右下左を個別指定 */
    margin-bottom: -1rem; /* ← 改行代わりに下に余白 */
  }

  .text-wrapper {
    font-size: 0.8rem; /* 内容をやや大きく */
  }
}



/*top画像
---------------------------------------------------------------------------*/
.top * {margin: 0;padding: 0;}

/*背景画像*/
#top {
  min-height: 100vh;
  height: auto; 
  background: url("./images/top-bg2.webp") no-repeat top;
  background-size: cover;
  background-position: center top;
  background-color: #87cab0;
}

.top {
  width: 800px;
  max-width: 100%;
  margin: -3rem auto 15rem;
}

.top .what {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
  margin-top: 42rem;
  position: relative;
}

.top .what .what-img {
  width: clamp(200px, 60vw, 500px);
  height: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto 30px; 
}

.top .what .main-text {
  color: white;
  font-size: 20px;
  font-size: clamp(15px, 2vw, 20px);
  text-align: center;
  margin-bottom: 2rem;
  /* text-shadow: 1px 1px 3px black;*/ /*影つける*/
}

.top .what .box {
  position: relative;
  margin: 0 auto 30px;
  width: clamp(280px, 80vw, 560px);
  height: auto;
  background-color: white;
  color: #87cab0;
  font-weight: 800;
  font-size: clamp(14px, 2.3vw, 20px);
  line-height: 1.5;
  text-align: center;
  padding: clamp(10px, 2vw, 20px);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 10;
  display: block;
}

.highlight {
  font-size: 45px;
  font-weight: 900;
  font-size: clamp(30px, 5.5vw, 42px);
}

.slider-wrapper iframe {
  min-width: 100%;
  border: none;
  height: auto;              /* 高さは自動 */
  aspect-ratio: 16 / 9;      /* アスペクト比で制御 */
}

.top .what .triangle-down {
  position: absolute;
  bottom: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: clamp(10px, 2vw, 20px) solid transparent;
  border-right: clamp(10px, 2vw, 20px) solid transparent;
  border-top: clamp(10px, 2vw, 20px) solid white;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  width: 50px;   /* 横幅固定 */
  height: 50px;  /* 高さ固定 */
  border-radius: 50%; /* 正円にする */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}


/*main スマホレイアウト
---------------------------------------------------------------------------*/
@media (max-width: 480px) {
  #top {
    background-size: 150%; /* ← 背景を小さくする（100%より大きいと拡大、100%より小さいと縮小） */
    background-position: center top;
  }
  #top .what-img {
	margin-top: -300px;;
  }
	
  #top .main-text {
    font-size: 0.9rem;  /* ← 好きなサイズに調整 */
    line-height: 1.6;
	margin-bottom: 20px;
  }
	
  #top .titletext {
    display: block;        /* 幅いっぱいにするために block 要素化 */
    width: 100%;           /* 親要素の横幅に合わせる */
    max-width: 100%;       /* 念のため */
    box-sizing: border-box;
    white-space: normal;   /* 改行を許可（nowrap になっていた場合に備えて） */
    word-break: break-word;/* 長い単語や英数字があっても折り返す */
    font-size: clamp(0.8rem, 5vw, 1.2rem); /* 画面幅に応じて自動縮小 */
  }

  #top .box {
    font-size: 1rem;
    line-height: 1.6;
	margin-top: 1px;
	margin-bottom: 20px;
  }
}


/*main PC背景
---------------------------------------------------------------------------*/
@media (min-width: 481px) {
  #top {
    background-position: center -300px; /* ← 数値は調整してください */
  }
}



/*コンテンツ
---------------------------------------------------------------------------*/
/*コンテンツブロック*/
#contents {
	flex: 1;
}

/*トップページ以外のコンテンツ*/
body:not(.home) #contents {
	padding-top: 10rem;
	padding-bottom: 10rem;
}

/*コンテンツ内で使用するul,ol要素（リストタグ）*/
#contents ul,#contents ol {
	margin-left: 2rem;
	margin-right: 2rem;
}


/*p要素（段落タグ）
---------------------------------------------------------------------------*/
p {
	margin-left: 1rem;
	margin-right: 1rem;
}


/*main（メインコンテンツ）
---------------------------------------------------------------------------*/
/*h2見出し*/
main h2 {
	margin: 0;padding: 0;
	font-size: 2.4rem;
	font-weight: normal;
	margin-bottom: 1vw;
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
}

/*見出し内のspan（小さな装飾文字と上部のアクセントライン）*/
main h2 span.small {
	display: inline-block;
	border-top: 2px solid var(--churros-main-color);
	font-size: 0.9rem;
	opacity: 0.6;
	letter-spacing: 0.1rem;
	padding-top: 2rem;
}

/*見出しをセンタリングする場合*/
main h2.c {
	align-items: center;
}



/*title
---------------------------------------------------------------------------*/
.title{
  width: 500px;
  height: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  margin-bottom: -1rem;
}


.titletext {
  text-align: center;
  font-size: 2rem;
  color: white;
  font-weight: 700;
  margin-top: 1rem;
  font-family: 'NotoSansJP VF', sans-serif;
}



/*.list-merit　（FCtop-bg加入の３つのメリット）※900px未満では１カラム
---------------------------------------------------------------------------*/
.list-merit * {margin: 0;padding: 0; list-style: none;}


/*背景画像*/
#merit {
	background: url("./images/bg-merit2.webp") no-repeat center top / 100%;
    background-size: cover; 
}

/*カラムの幅*/
.list-merit {
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
  margin-top: 3rem;
}


/*２カラムを囲むブロック*/
.list-merit .list {
	display: flex;
	flex-direction: column;
	margin-bottom: 2rem;
}


/*ブロック内のh4見出し*/
.list-merit .list .text h4 {
  align-self: flex-start; 
	font-family: 'NotoSerifJP VF';
	font-weight: 900;
	color: white;
	font-size: 2.4rem;
	margin-bottom: 1rem;
	border-bottom: 2px solid white;
	text-align: left;
	width: auto;
    white-space: nowrap;
    min-width: 0;
}


/*ブロック内のサブタイトル*/
.list-merit .list .subtitle { 
    align-self: flex-start;
	background-color: white;
	color: #87cab0;
	/*opacity: 0.5; */	/*透明度50%*/
	padding-left: 0.5em;
	padding-right: 0.5em;
	font-family: 'NotoSansJP VF';
	font-weight: 700;
	font-size: 1.5em;
	letter-spacing: 0.1em;
	margin-bottom: 20px;
	z-index: 2;
}




/*ブロック内のtext*/
.list-merit .list .maintext {
  margin-top: 1rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  margin-bottom: 3rem;
}

.list-merit .list .text {
  position: relative;
  z-index: 2;
}

/*画像ブロック共通*/
.list-merit .image-merit img {
	/*border-radius: 0px;*/	/*角を丸くする指定。*/
	box-shadow: 10px 10px rgba(0,0,0,0.1);
	margin-top: -1.5rem;
    position: relative; /* relative を外す */
    z-index: auto;    /* z-indexもリセット */
	margin-left: 0.5rem;
	z-index: 1;
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*２カラムを囲むブロック*/
	.list-merit .list {
		/*flex-direction: row;*/			/*子要素を横並びにする*/
		justify-content: space-between;
		/*align-items: center;*/			/*垂直揃えの指定。天地中央に配置されるように。*/
	}

	/*画像ブロック共通*/
	.list-merit .image-merit {
		width: 100%;
	}
		
	/*テキストブロック*/
	.list-merit .text {
		flex: 1;
	}

	}/*追加指定ここまで*/



/*merit スマホレイアウト
---------------------------------------------------------------------------*/
@media (max-width: 600px) {

  /* タイトルテキスト */
  .titletext {
    font-size: 7vw; /* 画面幅に応じて変化 */
    white-space: nowrap; /* 改行させない */
  }

  /* h4見出し */
  .list-merit .list .text h4 {
    font-size: 6vw;
    white-space: nowrap;
  }

  /* サブタイトル */
  .list-merit .list .subtitle {
    font-size: clamp(1rem, 3.5vw, 1.3rem);
    white-space: nowrap;
  }
	
  /* メイン本文テキストを小さく＆可変に */
  .list-merit .list .maintext {
    font-size: clamp(0.9rem, 3.5vw, 1.1rem);  /* 自動調整しながら小さめに */
    line-height: 1.6;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
  }
}


/*list-menu
---------------------------------------------------------------------------*/
.list-menu * {margin: 0;padding: 0;}

.list-menu {
  max-width: 1000px;
  margin: 0 auto;
}

.rmenu-title2  {
  width: 500px;
  height: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto 1rem;
}

.menu-titletext {
  text-align: center;
  font-size: 2rem;
  color: white;
  font-weight: 700;
  margin-top: 1rem;
}


/* 画像＋テキストを重ねる親要素 */
.overlay-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: center;
}


/*ボックス１個あたり*/
.list-menu .list {
    display: grid;
	position: relative;
	border-radius: 0px;
	background: white;
	border: 1px solid white;
	padding: 0.3rem;
	margin-bottom: 1rem;
}


/*ボックス内のfigure画像*/
.list-results .list figure {
	margin: 0 auto;
	margin-bottom: 0.6rem;
}


	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*ブロック全体を囲むブロック*/
	.list-menu {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem
	}

	}/*追加指定ここまで*/





/*list-flow（出店までの流れ）
---------------------------------------------------------------------------*/
.list-flow * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.list-flow {
  width: 1000px;
  max-width: 100%;
  margin: 0rem auto 0;
  position: relative;
}

.list-flow .list {
  position: relative;
  background-image: url("./images/line2.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
  padding-top: -50px;
}

#flow .titletext {
  text-align: center;
  font-size: 2rem;
  color: #87cab0;
  font-weight: 700;
  margin-top: 1rem;
  font-family: 'NotoSansJP VF', sans-serif;
}

/* 縦の中央線 */
.longline {
  width: clamp(400px, 80%, 550px);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -70px;
  z-index: 0;
  pointer-events: none;
}

/* 各ブロック */
.image-flow {
  position: relative;
  margin-bottom: clamp(20px, 5vw, 50px); 
  z-index: 2;
}

/* 画像 */
.image-flow img {
  width: clamp(400px,80%, 1000px);
  height: auto;
  display: block;
  margin: 0 auto;
  box-shadow: 
    clamp(4px, 1vw, 10px) 
    clamp(4px, 1vw, 10px) 
    rgba(0, 0, 0, 0.1);
}

.image-flow .text {
  position: absolute;
  top: 50%;
  left: 58%;
  transform: translateY(-50%);
  text-align: left;
  z-index: 3;
  font-size: clamp(9px, 1.5vw, 14px);
  max-width: 100%;
  word-break: break-word;
  line-height: 1.5;
  color: white;
  font-weight: 500;
}

/* 最下部の画像 */
.open60 {
  width: clamp(150px, 25vw, 250px);
  display: block;
  margin-top: clamp(1rem, 4vw, 3rem);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
}

/* PC向け（800px以上） */
@media screen and (min-width: 800px) {
  .list-flow .list {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/*flow スマホレイアウト
---------------------------------------------------------------------------*/
@media screen and (max-width: 600px) {
  .image-flow .text {
    font-size: 8px;  /* より小さく調整 */
    font-weight: 400;                  /* 少し細めに */
    line-height: 1.4;                  /* 行間も少し詰める（お好みで） */
  }
}


/*list-results（販売実績）
---------------------------------------------------------------------------*/
.list-results * {margin: 0;padding: 0;}

.list-results {
  max-width: 1000px;
  margin: 0 auto;
}

.results-title2  {
  width: 500px;
  height: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto 1rem;
}

.results-titletext {
  text-align: center;
  font-size: 2rem;
  color: white;
  font-weight: 700;
  margin-top: 1rem;
}


/* 画像＋テキストを重ねる親要素 */
.overlay-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: center;
}

/* テキストのオーバーレイ */
.results-text1 {
  font-family: "NotoSansJP VF";
  font-weight: 700;
  color: white;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
}


/*ボックス１個あたり*/
.list-results .list {
    display: grid;
	position: relative;
	border-radius: 0px;
	background: #87cab0;
	color: white;
	border: 1px solid #ccc;
	padding: 0.3rem;
	margin-bottom: 1rem;
}

/*ボックス内のh5見出し*/
.list-results .list h5 {
	font-weight: 500;
	color: white;
	text-align: center;
	font-size: 1.2rem;
	margin-bottom: 0rem;
	color: var(--primary-inverse-color);
}


/*ボックス内のp要素*/
.list-results .list p {
	text-align: center;
	font-size: 1.3rem;
	line-height: 1.5;
	margin-bottom: 0.2rem;
}

/*ボックス内のfigure画像*/
.list-results .list figure {
	margin: 0 auto;
	margin-bottom: 0.6rem;
}


	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*ブロック全体を囲むブロック*/
	.list-results {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem
	}

	}/*追加指定ここまで*/

.results-text2 {
  font-size: 1rem;
  text-align: center;
  color: #87cab0;
  margin-top: 2rem;
  line-height: 1.6;
}


/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショーブロック全てを囲むブロック*/
.slide-thumbnail-box {
	overflow-x: hidden;
	padding-left: 0;
	padding-right: 0;
    margin-top: -4rem;
	background: var(--churros-accent-color);
}

/*各スライドショーブロックを囲むブロック*/
.slide-thumbnail {
  margin-bottom: 2vw;
  overflow: hidden;   /* 枠外を見せない */
  width: 100%;        /* 枠の幅を固定 */
  position: relative;
}

/*画像たちを囲むブロック（これを動かす）*/
.slide-thumbnail .img {
  display: flex;
  animation: slide-rtl 10s linear infinite;
}

/*画像*/
.slide-thumbnail .img img {
  padding: 0 0.5rem;
  width: 1000px;       /* 大きくしたい幅 */
  height: auto;
  flex: 0 0 auto;     /* 縮小も拡大も防ぐ */
}

/*右から左へ*/
@keyframes slide-rtl {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } 
  /* 画像の複製を使ってループさせるときは -50% くらいで止める */
}

@media screen and (max-width: 768px) {
  .slide-thumbnail .img img {
    padding: 0 0.2rem;   /* 左右の余白をさらに減らす */
    width: 300px;        /* 元が100pxなら1.5倍に */
    height: auto;        /* 縦横比を維持 */
  }
}






/*list-guidance（ガイダンス）
---------------------------------------------------------------------------*/
.list-guidance * {margin: 0;padding: 0;}


.list-guidance {
  max-width: 1000px;
  margin: 0 auto;
  margin-bottom: 5rem;
}

.list-guidance .list{
  margin-bottom: 3rem;
}

.guidance-title1  {
  font-size: clamp(1rem, 2vw, 1.3rem);
  width: 900px;
  height: auto;
  max-width: 100%;
  display: block;
  text-align: center;
  margin: 5rem auto;
  margin-bottom: -5rem;
}

.guidance-title2  {
  font-size: clamp(1.4rem, 2vw, 2rem);
  width: 900px;
  height: auto;
  max-width: 100%;
  display: block;
  text-align: center;
  margin: 5rem auto 0;
  padding-bottom: 5rem;
}


.guidance-text {
  display: block;
  background-color: #87cab0;
  color: white;
  opacity: 0.8;
  padding: 0.5em 3em;
  font-family: 'NotoSansJP VF';
  font-weight: 700;
  font-size: 1.2em;
  letter-spacing: 0.1em;
  
  width: 90%;
  max-width: 600px;
  min-width: 400px;
  
  margin: 2rem auto;
  text-align: center;
  box-sizing: border-box;
}

/* 小さい画面で文字サイズや余白を調整 */
@media (max-width: 480px) {
  .guidance-text {
    font-size: 1.2em;
    padding: 0.8em 1em;
    width: 95%;
    min-width: auto;
  }
}


.list-guidance .triangle-down {
  width: 0;
  height: 100%;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid white;
  margin: 100px  auto 0;
}





/*form（資料請求フォーム）
---------------------------------------------------------------------------*/
.form * {margin: 0;padding: 0;}


.form {
  max-width: 1000px;
  margin: 0 auto;
  margin-bottom: 5rem;
}

.form .list{
  margin-bottom: 3rem;
}

/*背景画像*/
#form {
	background: url("./images/bg-form.webp")  no-repeat center 500px;
    background-size: cover;
	background-color: #34c0b3;
}


.form-title2  {
  font-size: clamp(1rem, 2vw, 1rem);
  width: 600px;
  height: auto; 
  max-width: 100%;
  display: block;
  text-align: center;
  margin: 2rem auto 0;
  padding-bottom: 5rem;
}


.form-text {
  font-size: clamp(0.6rem, 2vw, 1rem);
  width: 650px;
  height: auto;
  max-width: 100%;
  display: block;
  text-align: left;
  font-weight: 300;
  margin: 2rem auto 0;
  padding-bottom: 0rem;
}

/* .contactに黒い半透明の枠を作る */
.contact {
  display: block;
  max-width: 700px; /* 枠の最大幅を設定 */
  margin: -50px auto 50px; /* 中央寄せ */
  padding: 20px; /* 内側の余白 */
  background-color: rgba(0, 0, 0, 0.7); /* 半透明の黒背景 */
  border: 2px solid rgba(0, 0, 0, 0.9); /* 半透明の黒い枠線 */
  border-radius: 10px; /* 角を丸める */
  box-sizing: border-box; /* パディングを含めたボックスサイズ */
}

.contactform {
  width: 100%;
  max-width: 700px;
  margin: 10 auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}


@media only screen and (max-width: 480px) {
.contactform input,
.contactform textarea,
.contactform select {
  box-sizing: border-box;
}

/* 通常のテキスト欄などは幅100% */
.contactform input[type="text"],
.contactform input[type="email"],
.contactform input[type="tel"],
.contactform textarea,
.contactform select {
  width: 100%;
}

/* ラジオボタン・チェックボックスは横並びに */
.contactform input[type="radio"],
.contactform input[type="checkbox"] {
  width: auto;
  display: inline-block;
  margin-right: 0.5em;
}
}

/* チェックボックスとラジオボタンのリスト全体を横並びにする */
.wpcf7-form-control.wpcf7-checkbox,
.wpcf7-form-control.wpcf7-radio {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.5em;
}

/* 各選択肢（チェックボックス＋ラベル）も横並び用 */
.wpcf7-list-item {
  display: inline-flex !important;
  align-items: center;
  margin-right: 1em;
  white-space: nowrap;
}

/* スマホでもこのまま横並びを維持 */
@media only screen and (max-width: 480px) {
  .wpcf7-form-control.wpcf7-checkbox,
  .wpcf7-form-control.wpcf7-radio {
    flex-wrap: wrap; /* 必要に応じて折り返しあり */
}
	  .wpcf7 form .wpcf7-submit {
  display: block;
  margin: 0 auto;
	  }
  }

.wpcf7 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
  width: 100%; /* 必要に応じて変更 */
  max-width: 600px; /* フォームの最大幅を設定 */
}

/* Contact Form 7 送信ボタン */
.wpcf7 input[type="submit"] {
  background-color: #34c0b3;     /* ボタンの背景色 */
  color: #fff;                   /* 文字色 */
  font-size: 1.2rem;             /* 文字サイズ */
  padding: 0.8em 2em;            /* 内側の余白 */
  border: none;                  /* 枠線なし */
  border-radius: 25px;            /* 角丸 */
  cursor: url('./images/STREET-CHURROS-cursorr-drink.png'), pointer;               /* マウスカーソルをポインターに */
  transition: background-color 0.3s ease;  /* ホバー時のアニメーション */
  display: inline-block;
  margin-top: 2em;               /* ボタン上の余白 */
  align-self: center;            /* 中央揃え */
}

/* ホバー時の変化 */
.wpcf7 input[type="submit"]:hover {
  background-color: #227C74;     /* ホバー時の背景色 */
}





/*お知らせブロック
---------------------------------------------------------------------------*/
/*ブロック全体*/
.new {
    display: grid;	/*gridを使う指定*/
    grid-template-columns: auto 1fr;	/*横並びの指定。日付とアイコン部分の幅は自動で、内容が入るブロックは残り幅一杯とる。*/
	max-width: 700px;	/*最大幅*/
	margin: 0 auto 0;
}

/*日付、記事（共通）*/
.new dt,.new dd {
	border-bottom: 1px solid rgba(255,255,255,0.3);	/*下線の幅、線種、255,255,255は白のことで0.3は色が30%出た状態。*/
	padding-top: 2rem;				/*上の余白*/
	padding-bottom: 2rem;			/*下の余白*/
}

/*日付*/
.new dt {
	padding-right: 4rem;			/*右の余白*/
}

/* ニュースリスト全体 */
.news-list {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ニュースアイテム */
.news-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  width: 100%;
  box-sizing: border-box;
}

/* 日付部分 */
.news-date {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 1rem;
  color: #fff;           /* 白文字 */
}

/* 本文部分 */
.news-title {
  display: block;
  font-size: 1rem;
  line-height: 1.5;
  color: #fff;           /* 白文字 */
  pointer-events: none;  /* クリック不可にする */
  text-decoration: none; /* リンク表示なし */
}


/* スマホ対応 */
@media (max-width: 500px) {
  .news-item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .news-date {
    margin-bottom: 0.5rem;
  }

  .news-list-top {
    position: static;
    margin-bottom: 1rem;
  }
}


/*ニュースの動画
---------------------------------------------------------------------------*/

#video-slider-box {
  padding: 20px 0;
}

.video-slider {
  width: 100%;
}

.video-track {
  display: flex;
  flex-wrap: wrap; /* 自動改行 */
  gap: 20px;
}

.video-item {
  flex: 0 0 calc(25% - 15px); /* PCで横4列、gap考慮 */
  background: #87cab0;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align: center;
}

.video-item p {
  margin: 2px;                  /* デフォルト余白なし */
  padding: 4px 0;             /* ちょっとだけ上下に余白 */
  height: 60px;               /* テキスト枠の高さ（調整可） */
  display: flex;              /* Flexで中央揃え */
  align-items: center;        /* 縦中央 */
  justify-content: center;    /* 横中央 */
  text-align: center;         /* 複数行でも中央 */
  line-height: 1.4;           /* 複数行の行間 */
}

.video-frame {
  border-radius: 8px;
  overflow: hidden;
}

.video-frame iframe {
  width: 100%;
  height: 169px; /* 16:9 */
  display: block;
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
  .video-item {
    flex: 0 0 100%; /* 1列表示 */
  }
}



/*recruit（求人）
---------------------------------------------------------------------------*/
.recruit * {margin: 0;padding: 0;}


.recruit {
  max-width: 1000px;
  margin: 0 auto;
  margin-bottom: 5rem;
}

.recruit .list{
  margin-bottom: 3rem;
}

/*背景画像*/
#recruit {
	background: url("./images/bg-recruit.webp")  no-repeat center;
    background-size: cover;
	background-color: #87cab0;
}


.recruit-title2  {
  font-size: clamp(1rem, 2vw, 1rem);
  width: 600px;
  height: auto; 
  max-width: 100%;
  display: block;
  text-align: center;
  margin: 2rem auto 0;
  padding-bottom: 1rem;
}


.recruit-text {
  font-size: clamp(0.6rem, 2vw, 1rem);
  width: 650px;
  height: auto;
  max-width: 100%;
  display: block;
  text-align: left;
  font-weight: 300;
  margin: 2rem auto 0;
  padding-bottom: 0rem;
}



/*フッター
---------------------------------------------------------------------------*/
#footer * {
  margin: 0;
  padding: 0;
}

#footer ul {
  list-style: none;
}

/* ブロック全体 */
#footer {
  background: var(--churros-main-color);
  color: var(--primary-inverse-color);

  /* ここで上下のpaddingを小さく指定 */
  padding-top: 2rem;
  padding-bottom: 1rem;

  /* 横のpaddingは元のまま */
  padding-left: var(--content-space);
  padding-right: var(--content-space);
}


.footer1 .sns {
  display: flex;
  justify-content: center; /* 中央寄せ */
  align-items: flex-start;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 20px; /* アイコン同士の間隔 */
}

.footer1 .sns li {
  text-align: center; /* アイコンとテキストを中央揃え */
  position: relative;
}

.footer1 .sns li a {
  text-decoration: none; /* 下線を消す */
  color: inherit;        /* 文字色は継承 */
  display: inline-block; /* アイコン＋テキストをまとめる */
}

/* アイコン */
.footer1 .sns li i {
  font-size: 24px;
  display: block;
}

/* 下に小さく Japan/Korea */
.footer1 .sns li span {
  display: block;
  font-size: 12px;
  margin-top: 4px;
}

/* Japan と Korea の間に縦線 */
.footer1 .sns li:nth-child(1)::after,
.footer1 .sns li:nth-child(3)::after{
  content: "";
  display: block;
  width: 1px;
  height: 30px;
  background: #ccc;
  position: absolute;
  right: -12px; /* アイコンと縦線の距離 */
  top: 0;
}

/* アイコンサイズを大きく */
#footer ul.sns li a i.fab {
  font-size: 2.5rem;
  color: inherit;
}

/* Copyright部分も中央寄せ */
#footer small {
  display: block;
  text-align: center;
  margin-top: 0rem;
  font-size: 0.7rem;
}

@media screen and (max-width: 600px) {
  .footer small {
    font-size: 0.4rem;  /* より小さく調整 */
  }
}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	animation: opa1 1s 0.4s both;
	position: fixed;
	right: 20px;
	bottom: 20px;
	color: #fff;
	font-size: 1.5rem;
	background: rgba(0,0,0,0.2);
	width: 60px;
	line-height: 60px;
	border-radius: 50%;
}


/*bg1
---------------------------------------------------------------------------*/
.bg1 {
	background: var(--churros-accent-color);	
	color: var(--secondary-inverse-color);
}

/*bg1
---------------------------------------------------------------------------*/
.bg2 {
	background: var(--churros-main-color);
	color: var(--primary-inverse-color);
}


/*背景画像が少しずつ上に移動する
---------------------------------------------------------------------------*/
/*共通設定*/
.bg-slideup {
    background-repeat: no-repeat;
    background-size: cover;
	width: 100%;
}


.slideup1 {
    background-image: url("./images/bg-guidance.webp");
	position: relative;
	background-position: center 0;
}

.slideup2 {
    background-image: url("./images/bg-news2.webp");
	position: relative;
	background-position: center 0;
}

/*slideupの上部にグラデーションをかけて、「よく頂く質問」ブロックとの境界をなめらかにする*/
.slideup1::before {
	content: "";
	position: absolute;
	left: 0%;
	top: 0;
	width: 100%;
	height: 50vh;
}

/*テキストのフェードイン設定
---------------------------------------------------------------------------*/
/*fadeInのキーフレーム設定*/
@keyframes fadeIn {
	0% {opacity: 0;transform: scale(0.1) rotate(-30deg);}
	100% {opacity: 1;transform: scale(1) rotate(0deg);}
}

/* 初期状態でテキストを非表示にする */
.fade-in-text {
    visibility: hidden;
}

/* 初期状態で画像を非表示にする */
.fade-in-img {
      opacity: 0;
      animation: fadeIn 1.5s ease-in-out forwards;
}

/* アニメーションを適用するクラス。
animationの行の「0.2s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。
１文字ずつの出現する際の時差は、js/main.jsの「テキストのフェードイン効果」の中にある「0.1」で調整できます。*/
.char {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 0.2s linear both;
}

/*スマホ幅調整
---------------------------------------------------------------------------*/

@media only screen and (max-width: 480px) {
  section {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  p,
  #contents ul,
  #contents ol,
  .formrun-embed,
  .list-merit .list .maintext {
    margin-left: 1rem;
    margin-right: 1rem;
    padding-left: 0;
    padding-right: 0;
  }
}

/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #ff0000 !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb5rem {margin-bottom: 5rem !important;}
.look {display: inline-block;padding: 0px 10px;background: #eee;border: 1px solid #ccc; color: #888; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	.ws {width: 48%;display: inline;}
	.sh {display: none;}
	.pc {display: block;}

	}/*追加指定ここまで*/