@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');
@import url('https://fonts.googleapis.com/css2?family=MonteCarlo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');


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


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

	--base-inverse-color: #323232;		/*上のbase-colorの対となる色（主にテキストカラー）*/
	--primary-color: #FEEC37;			/*テンプレートのメインまたはアクセントカラー*/
	--primary-inverse-color: #323232;	/*上のprimary-colorの対となる色*/

	--space-large: 8vw;			/*主に余白の一括管理用。画面幅100%＝100vwです。*/
}


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


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


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}

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

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

	html, body {
		font-size: 14px;
	}

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

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

	html, body {
		font-size: 1vw;
	}

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


body {
	margin: 0;padding:0;
	font-family: 'Noto Sans JP', sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	-webkit-text-size-adjust: none;
	background: var(--base-color);		/*varは背景色のことで冒頭のbase-colorを読み込みます。*/
	color: var(--base-inverse-color);	/*文字色。冒頭で指定しているbase-inverse-colorを読み込みます。*/
	line-height: 2;		/*行間*/
}

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

/*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*/
input {font-size: 1rem;}

/*section*/
section {
	overflow-x: hidden;
	padding: var(--space-large);	
}


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

/*マウスオン時*/
a:hover {
	text-decoration: none;	/*下線を消す*/
	opacity: 0.9;			/*色を90%だけ出す*/
}


/*loading（ローディング）
---------------------------------------------------------------------------*/
@keyframes progress {
	0% {transform: scaleX(0);}
	100% {transform: scaleX(1);}
}

/*ロゴ画像*/
#loading img {
	width: 300px;	/*画像の幅*/
	margin-bottom: 20px;	/*ローディングバーとの間のスペース調整*/
}

/*ローディングブロック*/
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);	/*背景色*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeOut 1s ease 2s forwards;
}

/*プログレスバーの土台*/
.progress-container {
    width: 200px;		/*幅。お好みで。*/
    height: 4px;		/*高さ。お好みで。*/
    border-radius: 2px;	/*角をほんの少し丸くする*/
    background: #fff;	/*バーのベースカラー*/
    overflow: hidden;
}

/*プログレスバー*/
.progress-bar {
    width: 100%;
    height: 100%;
    background: #000;	/*進行中のバーの色*/
    animation: progress 2s linear;  /*#loadingのanimation時間に合わせて2秒に設定*/
    transform-origin: left;
}


/*container（サイト全体を囲むボックス）
---------------------------------------------------------------------------*/
#container {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
h1{
    font-size: 11px;
    font-weight: 100;
    color: #54362f;
}
/*ヘッダーブロック*/
header {
	position: absolute;z-index: 1;
	left: 0px;
	top: 0px;
	width: 100%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 60px;	/*ヘッダーの高さ*/
}

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

	header {
		height: 90px;	/*ヘッダーの高さ*/
	}

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

/*ロゴ画像*/
#logo img {
	display: block;
	width: 250px;	/*ロゴの幅*/
}
#logo {
	margin: 0;padding: 0;
	padding-left: 3vw;	/*ロゴの左側に空ける余白*/
}

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

	/*ロゴ画像*/
	#logo img {
		width: 300px;	/*ロゴの幅*/
	}

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




/*メイン画像
---------------------------------------------------------------------------*/
/*ブロック全体*/
#mainimg {
	width: 100%;	
}

@media screen and (max-width:980px) {
#mainimg {
	margin-top:60px;	
}

}


/*main（メインコンテンツ）
---------------------------------------------------------------------------*/
main {
	flex: 1 0 auto;
	overflow-x: hidden;
}

/*h2見出し（共通）*/
main h2 {
	margin: 0;
	padding: 0;
	font-size: 2rem;		/*文字サイズ。240%。*/
	font-weight: 800;		/*太字に*/
	margin-bottom: 5vw;		/*下にスペースを空ける*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	position: relative;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	line-height: 1.7;
	
}

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

	main h2 {
		font-size: 2.4rem;		/*文字サイズ。240%。*/
		
		
	}

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


/*テキストをセンタリングする場合*/
main h2.c {
	align-items: center;
	    color: #433827;
		
}


.heading01 {
	display: inline;
	background-image:linear-gradient(rgba(0, 0, 0, 0) 70%, rgb(255 212 0) 70%);
}



/* 親要素（コンテナ）の設定 */
.title-container {
    /* 子要素をFlexアイテム（横並び）にする */
    display: flex;
    /* 垂直方向（縦方向）の中央に揃える */
    align-items: center;
    /* <h2>と画像の間隔を少し開ける (例: 10px) */
    gap: 10px;
	width: fit-content;
	margin: 0 auto;
}



.heading04 {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.heading04::before,
.heading04::after {
	content: '';
	width: 3px;
	height: 40px;
	background-color:#433827;
}

.heading04::before {
	margin-right: 30px;
	transform: rotate(-35deg)
}
.heading04::after {
	margin-left: 30px;
	transform: rotate(35deg)
}
/*フッター
---------------------------------------------------------------------------*/
footer {
	background: #f7e2e2;		
	color: var(--primary-inverse-color);	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
	padding: 2rem;	/*フッター内の余白。2文字分。*/
	display: flex;
	flex-direction: column-reverse;
}

/*フッター直下の1つ目ブロック（ロゴやSNSアイコンが入ったブロック）*/
footer div:nth-of-type(1) {
    text-align: center;
}

/*フッター直下の２つ目ブロック（メニューブロック）*/
footer div:nth-of-type(2) {
    flex: 1;
    display: flex;
    gap: 2rem;	/*このブロック内の直下のブロック同士に空ける余白。４文字分。*/
}


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

	footer {
		flex-direction: row;
		gap: 4rem;		/*フッター内の直下のブロック同士に空ける余白。４文字分。*/
		padding: 4rem;	/*フッター内の余白。４文字分。*/
	}

	/*フッター直下の1つ目ブロック（ロゴやSNSアイコンが入ったブロック）*/
	footer div:nth-of-type(1) {
		text-align:cenert;
		width: 100%;	/*幅*/
	}

	/*フッター直下の２つ目ブロック（メニューブロック）*/
	footer div:nth-of-type(2) {
		justify-content: flex-end;	/*ブロックを右に寄せる。この行を削除すれば、ロゴ画像の方によります。*/
		gap: 4rem;	/*このブロック内の直下のブロック同士に空ける余白。４文字分。*/
	}

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


footer ul {
	margin: 0;padding: 0;list-style: none;
	margin-bottom: 2rem;
}


/*Copyright部分*/
footer small {
	display: block;
	padding-top: 2rem;	/*SNSアイコンとコピーライトの間の余白調整*/
}


 footer .logo {
	   width: 40%;
    margin: 0 auto;
}

	/*画面700px以下の追加指定*/
	@media screen and (max-width:700px) {
	
 footer .logo {
	   width: 100%;
  }


	}/*追加指定ここまで*/
/*フッター内にあるソーシャルメディアのアイコン
---------------------------------------------------------------------------*/
.icons {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	justify-content: center;
	gap: 1rem;	/*アイコン同士のマージン的な要素。１文字分。*/
}

	/*画面700px以上の追加指定*/
	@media screen and (min-width:700px) {
	
	.icons {
		justify-content: flex-start;
	}

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

.icons i {
	font-size: 30px;	/*アイコンサイズ*/
}


/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）
---------------------------------------------------------------------------*/
.pr a {
	text-decoration: none;
	display: block;
	background: rgba(0,0,0,0.9);
	text-align: right;
	padding: 0.5rem 1rem;
	color: #ccc;
}
.pr a::before {
	font-family: "Font Awesome 6 Free";
	content: "\e2ca";
	font-weight: bold;
	margin-right: 0.5em;
}




/*FAQ
---------------------------------------------------------------------------*/


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

	.faq {
		font-size: 1.2rem;	/*文字サイズを120%*/
	    max-width: 1000px;
        margin: 0 auto;
	}

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

/*質問*/
.faq dt {
	display: flex;
	align-items: flex-start;
	border-radius: 3px;		/*角を少しだけ丸く*/
	margin-bottom: 1rem;	/*下に空けるスペース。質問ブロック同士の余白です。*/
	background: #f76a0c;		/*背景色。冒頭のbase-colorを読み込みます。*/
	color: #FFF;	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	padding: 1rem;	/*ブロック内の余白。１文字分。*/
	border-radius: 50px;
}


.faq dt .fa-angle-down {
    margin-right: 0.5rem;
    color: #fff;
    border-radius: 50%;
    width: 30px;
    line-height: 30px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 0.2em;
    transition: transform 0.3s ease;
}

/* 開いている状態での回転 (例: is-openクラスがdtに付いたとき) */
.faq dt.is-open .fa-angle-down {
    transform: rotate(180deg);
}



/*回答*/
.faq dd {
	padding: 0 1rem 1rem 3.7rem;	/*ボックス内の余白。上、右、下、左への順番。*/
	    color: #433827;
}

/*opencloseを適用した要素のカーソル*/
.openclose {
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}



/*btn1（ボタン）
---------------------------------------------------------------------------*/
.btn1 a {
	text-shadow: none;display: block;text-decoration: none;
	padding: 0.5rem 2rem;	/*ボタン内の余白。上下、左右へ。*/
	text-align: center;		/*テキストをセンタリング*/
}





/*bg-primary-color
---------------------------------------------------------------------------*/
.bg-primary-color {
	background: #f67e7c;		/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
}


/*bg1
---------------------------------------------------------------------------*/
.bg1 {
	    background-color: #eddcc0;	/*背景色。冒頭のbase-inverse-colorを読み込みます。*/
	color: var(--base-color);	/*文字色。冒頭のbase-colorを読み込みます。*/
}


/*bg2
---------------------------------------------------------------------------*/
.bg2 {
	background: #f3f3e9;	/*背景色*/
}


/*bg3
---------------------------------------------------------------------------*/
.bg3 {
	background: #f7dada;/*背景色*/
}

/*bg4
---------------------------------------------------------------------------*/
.bg4 {
	background:#f9e9c4;;	/*背景色*/
}
/*パターン背景
---------------------------------------------------------------------------*/
/*bg-pattern1*/
.bg-pattern1 {
	background-image: url("../images/bg_pattern1.png");	/*背景パターンの読み込み*/
	background-repeat: repeat;
	background-position: center top;
	background-size: 10px;	/*サイズ*/
}

/*bg-pattern2*/
.bg-pattern2 {
	background-image: url("../images/bg_pattern2.png");	/*背景パターンの読み込み*/
	background-repeat: repeat;
	background-position: center top;
	background-size: 10px;	/*サイズ*/
}

/*bg-pattern3*/
.bg-pattern3 {
   background-image: repeating-linear-gradient(45deg, #fff8d7, #fff8d7 10px, transparent 10px, transparent 20px);
}
.inu {
    /* 背景画像として犬の画像を適用 */
    background-image: url("../images/inu.png");
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    min-height: 50px; /* 画像の高さに合わせて調整 */
}
/*画面幅980px以上の追加指定*/
	@media screen and (max-width:750px) {
	.inu {
    /* 背景画像として犬の画像を適用 */
    min-height: 450px; /* 画像の高さに合わせて調整 */
	margin-bottom: -100px;
}	
		
		
		}
/*ボックス下部を三角形（▼）にする場合。三角形の高さ自体はmask-imageのd=の中にある２つの「95」という数値で変更できます。小さいほど角度が大きくなります。
---------------------------------------------------------------------------*/
.arrow {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,0 L100,99 L50,100 L0,99 Z' fill='%23000000'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
}

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

	/*三角形の高さの再設定。95を90に変更しています。*/
	.arrow {
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,0 L100,90 L50,100 L0,90 Z' fill='%23000000'/%3E%3C/svg%3E");
		padding-bottom: 350px;
	}
	

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


/*背景色が切れているのが見えないように微調整*/
.arrow + section {
	padding-top: calc(var(--space-large) + 350px);
	margin-top: -350px;
}
/* --- ベースのコンテナ設定 --- */
.service-categories {
  max-width: 1200px;
  margin: 40px auto; /* ページの中央に配置し、上下に余白 */
  padding: 0 20px;
  display: grid;
  /* 5つのカテゴリをレスポンシブに表示（PCでは2〜3列） */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px; /* カテゴリ間のスペース */
}

/* --- カテゴリグループ (カード形式) --- */
.category-group {
  background-color: #f8f8f8; /* 薄い背景色でグループを区切る */
  border: 5px solid #c38787;
  border-radius: 12px;
  padding: 20px 50px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* 浮き上がったカード効果 */
  transition: transform 0.3s ease;
  max-width: 1200px;
    margin: 20px auto;
}

/* ホバーエフェクト（マウスを乗せた時） */
.category-group:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* --- カテゴリタイトル --- */
.category-title {
  font-family: "Zen Maru Gothic", sans-serif; /* 丸ゴシック体を使用 */
  font-size: 1.5rem;
  color: #54351a; /* 濃いめの色 */
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 5px;
  /* アイコンとタイトルの間に少しスペースを空ける */
  display: flex;
  align-items: center;
}

.category-title i {
    margin-right: 10px; 
}

/* --- サービスリスト --- */
.service-list {
  list-style: none; /* デフォルトの黒丸を削除 */
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap; /* サービスが多い場合に折り返す */
  gap: 8px; /* リストアイテム間のスペース */
}

.service-list li {
  /* サービス名をバッジ（タグ）のように見せる */
 background-color:#54351a; /* 明るい水色 (アクセントカラー) */
    color: #edff00;
  padding: 6px 12px;
  border-radius: 20px; /* 角を丸くする */
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  
  /* li 自体のマージンを解除し、gapで調整 */
  margin: 0; 
}


/*list-grid-simple（制作実績ブロック）
---------------------------------------------------------------------------*/
.list-grid-simple .list * {margin: 0;padding: 0;}

/*listブロック全体を囲むブロック*/
.list-grid-simple {
    display: grid;
    grid-template-columns: repeat(2, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
    gap: 3rem;	/*ブロックの間に空けるマージン的な指定*/
}

/*ボックス１個あたり*/
.list-grid-simple .list {
    display: grid;
	position: relative;
}

/*h4見出し*/
.list-grid-simple .list h4 {
	margin-top: 0.5rem;		/*上に0.5文字分のスペースを空ける*/
	font-weight: normal;	/*太さを標準に*/
}

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

	/*listブロック全体を囲むブロック*/
	.list-grid-simple {
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
	}

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


/*list-grid1（３カラムボックス）
---------------------------------------------------------------------------*/
.list-grid1 .list * {margin: 0;padding: 0;}

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

	/*listブロック全体を囲むブロック*/
	.list-grid1 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 3vw;	/*ブロックの間に空けるマージン的な指定*/
	}

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


/*ボックス１個あたり*/
.list-grid1 .list {
    display: grid;
	margin-bottom: 3rem;	/*ボックスの下に空けるスペース*/
	position: relative;
	border-radius: 5px;	/*角を少しだけ丸く*/
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
	box-shadow: 2px 5px 5px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.1は色が10%出た状態。*/
	padding: 2rem;	/*ボックス内の余白。２文字分。*/
}

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

	/*ボックス１個あたり*/
	.list-grid1 .list {
		margin-bottom: 0;	/*下に空けるスペースをなくす*/
	}

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


/*bg-black内のボックスへの追加設定*/
.list-grid1 .list.bg-black {
	    background: #fffefe;
    color: #433827;
	    border: 5px #745f3e solid;
    border-radius: 30px;
}

/*ナンバー（01〜03の飾り番号）*/
.list-grid1 .list .num {
	position: absolute;
	left: -20px;		/*左からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	top: -30px;			/*上からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	font-size: 60px;	/*文字サイズ*/
	line-height: 1;
	font-family: "MonteCarlo", cursive;	/*フォント指定*/
	opacity: 0.2;	/*透明度。色を20%出す。*/
}



/*ボックス内のh4見出し*/
.list-grid1 .list h4 {
	font-size: 1.4rem;	/*文字サイズを140%に*/
	line-height: 1.6;	/*行間*/
	margin-bottom: 1rem;	/*下に１文字分のスペースを空ける*/
	position: relative;
	text-align: center;
}

/*ボックス内のp要素*/
.list-grid1 .list p {
	font-size: 1rem;	/*文字サイズを90%に*/
	line-height: 1.6;	/*行間*/
	font-weight: 600;
}




/*ボックス内のfigure画像*/
.list-grid1 .list figure {
	margin: 0 auto;
	width: 100%;		/*画像サイズ*/
	    line-height: 1.6;
    margin-bottom: 2rem;
	}

/*ボックス内のfigure画像*/
.list-grid1 .list figure img{
border-radius: 30px;
}



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

	/*ボックス内のfigure画像*/
	.list-grid1 .list figure {
		width: 100%;
		
	}

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



/*list-c2（お問い合わせ）
---------------------------------------------------------------------------*/
.list-c2 > a {
    text-decoration: none;
    display: block;
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	
	/*２つのボックスを囲むボックス*/
	.list-c2 {
		display: flex;	/*横並びにする*/
		max-width: 1200px;
        margin: 50px auto;
	}

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


/*ボックス１個あたり*/
.list-c2 .list {
	text-align: center;
	position: relative;
	border-radius: 30px;	/*角を丸くする指定*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	
	.list-c2 > * {
		flex: 1;
	}
	.list-c2 .list {
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.list-c2 > a .list {
		height: 100%;
	}
	

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




/*h4見出し*/
.list-c2 h4 {
	line-height: 1.2;	/*行間を狭く*/
	font-family: "Jost", sans-serif;	/*フォント指定*/
	font-optical-sizing: auto;
	font-weight: 300;	/*フォントの太さ。100〜900の間で指定が可能。大きいほど太くなります。*/
}

/*h4見出し内のメインテキスト（main-text）*/
.list-c2 h4 .main-text {
	display: block;
	font-size: 3rem;		/*文字サイズ。3倍。*/
	padding-top: 1.5rem;	/*上に空ける余白*/
	padding-bottom: 3rem;	/*下に空ける余白*/
}

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

	.list-c2 h4 .main-text {
		font-size: 4rem;	/*文字サイズ。4倍。*/
	}

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


/*テキスト*/
.list-c2 .list .text {
	position: relative;
	font-size: 0.85rem;	/*文字サイズ85%*/
}







/*list-normal1（「お客様の声」ブロックで使用）
---------------------------------------------------------------------------*/
.list-normal1 * {margin: 0;padding: 0;}

.list-normal1 img{

}

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

	/*テキストブロック*/
	.list-normal1 .text {
		flex: 1;
	}
	
	/*画像とテキストの左右を入れ替えたい場合（600px以上のみ使用可能）*/
	.reverse {
		flex-direction: row-reverse;
		background-position: left bottom !important;
	}
	
	}/*追加指定ここまで*/


/*ブロック１個あたり*/
.list-normal1 .list {
	color: var(--base-inverse-color);	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	padding: 3rem;
	margin-bottom: 2rem;
	box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
	position: relative;
	    background: #fff;
}

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

	/*ブロック１個あたり*/
	.list-normal1 .list {
		display: flex;
		gap: 2rem;	/*画像とテキストの間のスペース。２文字分。画像がない場合はこれは適用されません。*/
	   max-width: 1200px;
    margin: 20px auto;
}
	
	
	}/*追加指定ここまで*/


/*画像ブロック*/
.list-normal1 figure {
	margin-bottom: 1rem;	/*下に空けるスペース*/
	     margin: 0 auto 20px;
		    width: 30%;
}

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

	/*画像の下マージンのリセット*/
	.list-normal1 figure {
		margin-bottom: 0;
		flex-basis: 200px;
        flex-shrink: 0;
	}

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


/*h4見出し*/
.list-normal1 h4 {
	font-size: 1.2rem;	/*文字サイズ200%*/
	line-height: 1.5;	/*行間*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
}

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

	.list-normal1 h4 {
		font-size: 1.7rem;	/*文字サイズ170%*/
		line-height: 1.8;	/*行間*/
	}

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


/*h4内にアイコンを配置した場合（制作の流れの見出し左のアイコン）*/
.list-normal1.flow h4 i {
	margin-right: 1rem;	/*アイコンとテキストとの間の余白*/
}

/*名前*/
.list-normal1 .name {
	text-align: right;	/*右寄せ*/
	margin-top: 1rem;	/*上に空けるスペース*/
}

/*制作の流れで使用しているブロック間の「▼」の矢印*/
.list-normal1.flow .list::after {
	content: "▼";	/*このテキストを出力します*/
	position: absolute;
	left: 50%;		/*左からの配置場所。厳密ではありませんが、文字が小さいので問題ないかと。*/
	bottom: -2rem;	/*下からの配置場所。マイナスがつくので本来の場所とは逆向きに移動。*/
	transform: scaleX(1.5);	/*横幅を150%に*/
	opacity: 0.5;			/*透明度。色が50%出た状態。*/
}

/*最後のボックスだけ下矢印を出さない*/
.list-normal1.flow .list:last-child::after {
	content: none;
}





/*調整用スタイル
---------------------------------------------------------------------------*/
.padding0 {
	padding: 0 !important;
}
.padding-lr0 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.eria
{
   color: #f76a0c;
    background: #fff;
    padding: 1% 5%;
    border-radius: 50px;
    border: solid 1px;
    font-size: 18px;
    font-weight: 100;
	letter-spacing: .01em;
  margin: 0 auto;
  position: relative;
  display: block; 
    width: fit-content;
	text-align:center;

	}
	

/*その他
---------------------------------------------------------------------------*/
.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;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb-space-large {margin-bottom: var(--space-large) !important;}
.look {line-height: 1.5 !important; display: inline-block;padding: 5px 10px;background: rgba(0,0,0,0.1);border: 1px solid rgba(0,0,0,0.3);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;}
.inline-block {display: inline-block !important;}
.relative {position: relative;}
.marker {background: linear-gradient(transparent 50%, yellow);}
pre {white-space: pre-wrap;word-wrap: break-word;overflow-wrap: break-word;}
.wh{ color: #fFf !important;}
.ye{ color: #ffef16 !important;}
.or{color: #ff7007!important;}
.b{ font-weight: 900;}
.fs50{font-size: 50px;}
.fs24{font-size: 24px;}
.mg0{margin: 0;}
.mr10{margin-right: 10px;}
.w65{width: 65%;}
.w30{width: 30%;}
.gr{background:#e57a7a !important;}

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

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

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


.img-sp {
    display: none;
}

@media screen and (max-width:980px) {
    .img-pc {
        display: none;
    }

    .img-sp {
        display: block;
    }
}

.br-sp {
  display: none;
}

@media screen and (max-width: 750px) {
  .br-pc {
    display: none;
  }

  .br-sp {
    display: inline-block;
  }
}

/* ---------------------------------------------------- */
/* 1. 全ての画面サイズで、要素をデフォルトで非表示にする */
/* ---------------------------------------------------- */
.fixed-btn-container {
    display: none; 
}


/* ---------------------------------------------------- */
/* 2. メディアクエリで、特定の画面幅以下でのみ表示させる */
/* ---------------------------------------------------- */

/* 画面幅が767px以下のデバイスに適用 (スマートフォンを想定) */
@media screen and (max-width: 767px) {
    
    /* ボタンコンテナを表示に戻す */
    .fixed-btn-container {
        display: flex; /* Flexboxで再表示させる */

        /* 前回の回答で提示した、固定するためのスタイルをここに記述 */
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 1000; 
        justify-content: space-around;
        align-items: center;
        background-color: white; 
        border-top: 1px solid #ddd;
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    }
    
    /* その他のボタンのスタイル（.fixed-btn, .call-btn, .contact-btn）は
       この @media ブロック内、またはブロックの外に記述してください。
    */
    .fixed-btn {
        display: block;
        flex-grow: 1; 
        padding: 8px 10px;
        text-align: center;
        /* ... 他のデザイン ... */
    }
    
    /* コンテンツがボタンに隠れないように body にパディングを追加 */
    body {
        padding-bottom: 60px; /* 固定ボタンの高さに合わせて調整 */
    }
}


/* 電話ボタンの専用スタイル */
.call-btn {
    background-color:#fd5a5a;
    color: white;
    border-right: 1px solid #fff; /* ボタン間に区切り線 */
}

/* お問い合わせボタンの専用スタイル */
.contact-btn {
    background-color: #4CAF50; 
    color: white;
}

.inst{
    max-width: 1000px;
    margin: 0 auto;
}
.inst2{
    width: 100%;
	height:600px;

}

/* 画面幅が767px以下のデバイスに適用 (スマートフォンを想定) */
@media screen and (max-width: 767px) {
    
	.inst2{
	height:400px;

}}
	
.insta_btn2{/*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  position: relative;
  display: inline-block;
  height: 50px;/*高さ*/
  width: 190px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 25px;/*文字のサイズ*/
  line-height: 50px;/*高さと合わせる*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.insta_btn2:before{/*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.insta_btn2 .fa-instagram{/*アイコン*/
  font-size: 35px;/*アイコンサイズ*/
  position: relative;
  top: 4px;/*アイコン位置の微調整*/
}

.insta_btn2 span {/*テキスト*/
  display:inline-block;
  position: relative;
  transition: .5s
}

.insta_btn2:hover span{/*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}	

承知いたしました。追従バナーを「右下」に固定し、780px以上のウィンドウサイズでのみ表示されるようにCSSを修正します。

右下に縦に並んで表示されるデザインに戻します。

💻 修正後のCSSコード（画面右下に固定）
HTMLは変更ありません。CSSのみを以下のように修正します。

CSS

/* ========================================= */
/* 追従バナーの基本設定 */
/* ========================================= */
#fixed-contact-banner {
    /* デフォルトでは非表示にする (モバイル対応) */
    display: none; 
    z-index: 9999; 
}

/* ========================================= */
/* PC表示（画面幅780px以上）での調整 */
/* ========================================= */
@media (min-width: 780px) {
    #fixed-contact-banner {
        /* 780px以上になったら表示する */
        display: flex; 
        
        /* 画面右下に固定 */
        position: fixed;
        bottom: 30px; /* 下からの距離 */
        right: -30px; /* 右からの距離 */
        
        /* 要素を縦に並べる設定 */
        flex-direction: column; 
        gap: 12px; /* アイテム間の隙間 */
    }

    /* 各ボタン共通のスタイル */
    .contact-item {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: opacity 0.3s;
        min-width: 150px; /* ボタンの最小幅を確保 */
    }
    
    .contact-item:hover {
        opacity: 0.8;
    }
    
   
    
    /* LINEボタンのスタイル */
    .line-item {
               flex-direction: row; 
    }
    

}