@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カスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
h1{
padding: 7px 5%;
font-size:12px;
color:#ffffff;
background-color:#0f3c65;
margin-bottom:0px;
}
:root {
	--base-color: #fff;
	--base-inverse-color: #323232;

	--primary-color: #FEEC37;
	--primary-inverse-color: #323232;

	--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: 16px;
	height: 100%;
}

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

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

}

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

/* 共通 */
li {
	list-style: none;
}

.sp-only {
	display: none;
}

@media screen and (max-width:600px) {
	p {
		font-size: 16px;
	}

}

/* 共通 ここまで*/


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

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

}

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


body {
	margin: 0;
	padding: 0;
	font-family: "Noto Sans JP", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", 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: 1.2;
	/*行間*/
	letter-spacing: 0.15em;
}

/*リセット他*/
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秒。*/
}

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




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










/*開閉メニュー
---------------------------------------------------------------------------*/
/*animation1のキーフレーム設定*/
@keyframes animation1 {
	0% {
		right: -100vw;
	}

	100% {
		right: 0px;
	}
}



/*メイン画像
---------------------------------------------------------------------------*/
/*ブロック全体*/
#mainimg {
	background: var(--base-color) url("../images/SP_3.webp") no-repeat center center / cover;
	width: 100%;
	padding-top: 180%;
	/*アスペクト比2:3（3÷2=1.5）*/
	position: relative;
	overflow: hidden;
	/* height: 1000px; */
	/* padding-bottom: 200px; */
}

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

	#mainimg {
		background: var(--base-color) url("../images/PC_3.webp") no-repeat center center / cover;
		padding-top: 56.25%;
		/*アスペクト比16:9（9÷16=0.5624）*/
	}

}

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

#mainimg>div {
	position: absolute;
	top: 60px;
	/*header分を確保*/
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 200px;

}

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

	#mainimg>div {
		/* left: var(--space-large); */
		align-items: flex-start;
		/* justify-content: center; */
	}

}

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


.mainvisual {
	padding-bottom: 50px;
}

/*テキストのブロック*/
.sub-title {
	color: #ffffff;
	font-size: 30px;
	text-align: center;
	padding-bottom: 20px;
	font-weight: 500;
}

.sub-text {
	color: #ffffff;
	font-size: 22px;
	text-align: center;
	font-weight: 500;
	margin-top: 30px;
}

.main-pics ul {
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
}

.main-pics li {
	padding-right: 10px;
}

.main-pics img {
	width: 150px;
}

.btns {
	position: absolute;
	bottom: 40px;
	left: 0;
	right: 0;
	margin: auto;
}

.mainvisual {
	position: relative;
}



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

	#mainimg .text {
		padding-top: 50px;
	}

	.sub-title {
		font-size: 20px;
	}

	.sub-text {
		font-size: 16px;
		margin-top: 0px;
	}

	#mainimg p {
		font-size: 35px;
	}

	.sp-only {
		display: block;
	}

	.main-pics {
		margin-top: 150px;
	}

	#mainimg .cat-btn {
		text-align: center;
		position: absolute;
		right: 0;
		left: 0;
		bottom: 60px;

	}

	#mainimg .cat-btn img {
		width: 80%;
		/* margin-top: 30px; */

	}
}

/* ボタンアニメーション */

.anim-box.poyopoyo {
	animation: poyopoyo 2s ease-out infinite;
	opacity: 1;
}

@keyframes poyopoyo {

	0%,
	40%,
	60%,
	80% {
		transform: scale(1.0);
	}

	50%,
	70% {
		transform: scale(0.95);
	}
}

.floating-banner {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 20;
}

@media screen and (max-width:600px) {
	.floating-banner {

		width: 50px;
		opacity: 0.9;
	}

}



#mainimg .text {
	font-size: 28px;
	/*文字サイズ。*/
	font-weight: 800;
	/*太字に*/
	line-height: 1.8;
	/*行間*/
	text-align: center;
	/*テキストをセンタリング*/
}




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

	#mainimg .text {
		text-align: left;
		/*テキストを左寄せ*/
		font-size: 3.6vw;
		/*文字サイズ。*/
		padding-left: 60px;
	}

	#mainimg .cat-btn {
		text-align: center;
		position: absolute;
		bottom: 50px;
		left: 0;
		right: 0;
	}

	#mainimg .cat-btn img {
		width: 60%;
		margin-top: 30px;
	}
}



/*ボタン*/
#mainimg .btn {
	font-size: 1rem;
	/*文字サイズ*/
	font-weight: 600;
	/*少し太字に*/
	/* margin-top: 3vw; */
	/*上のテキストとボタンの間のスペース。*/
	display: flex;
	flex-direction: column;
	/* gap: 1rem; */
	/*ボタン同士の余白*/
	margin: 0 aut;
	width: 100%;
}

#mainimg .btn a {
	display: block;
	text-decoration: none;
	padding: 0.8rem 2rem;
	/*ボタン内の余白。上下、左右へ。1rem=1文字分です。*/
	margin-bottom: 10px;
	/*ボタン同士の隙間*/
}

/*マウスオン時*/
#mainimg .btn a:hover {
	opacity: 1;
	transform: scale(1.05);
	/*105%に拡大*/
}

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

	/*ボタン*/
	#mainimg .btn {
		font-size: 1.4vw;
		/*文字サイズ*/
	}

	#mainimg .btn a {
		margin: 0;
		padding: 0.6rem 3rem;
		/*ボタン内の余白。上下、左右へ。1rem=1文字分です。*/
	}

}



#mainimg .btn a {
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	text-decoration: none;
	color: #ffffff !important;
	font-size: 18px;
	border-radius: 5px;
	width: 500px;
	height: 100px;
	font-weight: bold;
	transition: 0.3s;
	background-color: [object object];
	background-image: linear-gradient(180deg, rgba(169, 112, 112, 1), rgba(255, 255, 255, 1) 6%, rgba(112, 16, 16, 1) 23%, rgba(174, 23, 23, 1) 37%, rgba(152, 0, 0, 1));
	margin-top: 20px;
	margin-inline: auto;
	margin-bottom: 50px;
}

@media screen and (max-width:600px) {
	#mainimg .btn a {
		width: 80%;
		height: 60px;
	}

	#mainimg .btn {
		padding-bottom: 50px;
	}
}


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

/*h2見出し（共通）*/
main h2 {
	margin: 0;
	padding: 0;
	font-size: 1.4rem;
	/*文字サイズ。240%。*/
	font-weight: 800;
	/*太字に*/
	margin-bottom: 5vw;
	/*下にスペースを空ける*/
	display: flex;
	flex-direction: column-reverse;
	letter-spacing: 0.1em;
	/*文字間隔を少しだけ広く*/
	position: relative;
}

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

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

}


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

/*h2内のspan（小文字）*/
main h2 span {
	font-size: 0.85rem;
	/*文字サイズ85%*/
	opacity: 0.5;
	/*透明度。色を50%だけ出す。*/
	font-weight: normal;
	/*太字ではなく標準にする*/
}



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


.pr a {
	text-decoration: none;
	display: block;
	background: rgba(0, 0, 0, 0.9);
	text-align: center;
	padding: 0.5rem 1rem;
	color: #ccc;
	padding-block: 20px;
}




/*c2（２カラムレイアウト用）
---------------------------------------------------------------------------*/

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

	.c2 {
		display: flex;
		gap: 2rem;
		/* position: relative; */
	}

	/* 特典の背景 */
	.bg-benefit {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}

	.bg-benefit img {
		width: 700px;
	}

	/*左側のタイトルブロックの幅*/
	.c2 .title {
		width: 30%;
	}

	/*右側のテキストブロック*/
	.c2 .text {
		flex: 1;
	}

	.cat-btn {
		width: 40%;
		margin: 40px auto;

	}

}

@media screen and (max-width :600px) {
	.bg-benefit {
		position: absolute;
		top: -30;
		left: 0;
		right: 0;
	}

	.cat-btn {
		margin-bottom: 50px;
	}
}



/*特典
---------------------------------------------------------------------------*/


.achievements {
	margin-top: 50px;
}



.list-grid {
	display: flex;
	justify-content: space-between;
	margin-top: 50px;
}

.list-grid img {

	width: 96%;
}

#benefit .cat-btn img {
	margin-top: 40px
}

#benefit .project-text {
	margin-top: 40px;
	margin-bottom: 40px;
	text-align: center;
}




@media screen and (max-width:600px) {
	#benefit .section-title {
		color: #ffffff;
	}

	#benefit .section-subtitle {
		color: #ffffff;
	}

	.pc-only {
		display: none;
	}

	.list-grid {
		flex-direction: column;
		margin-bottom: 30px;
	}

	#benefit .list {
		margin-bottom: 30px;
	}

	#benefit .cat-btn img {
		margin-top: 0;
	}



	.benefit-text {
		text-align: center;
	}

}




/* <!--▼▼▼▼▼出店の流れ--> */
.store {
	text-align: center;
	color: #0C3B66;
}



.store img {
	width: 100%;
	padding: 0;
}

.store-contents {
	background-color: #D3E1EB;
	padding: 40px 50px;
	width: 80%;
	margin: 30px auto;

}

.section-title {
	text-decoration: underline;
	text-underline-offset: 9px;
	font-size: 48px;
	margin-bottom: 0;
}

.section-subtitle {
	font-size: 1.5 em;
	margin-top: 20px;
}

.store table {
	margin-top: 30px;
	text-align: left;

	line-height: 35px;
}

.store td {
	color: #3A3A3A;
}


.detail table {
	margin-top: 30px;
	text-align: left;
	margin: 0 auto;
	border-collapse: separate;
	table-layout: fixed;
	border-spacing: 0;
	padding-bottom: 60px;
	width: 80%;
	font-size: 20px;

}

.detail table tr:nth-of-type(3) td {
	border-bottom: none;
}

.detail-accent {
	color: #0C3B66;
}

.detail td {
	border-bottom: 1px solid #0C3B66;
	padding: 15px;
	vertical-align: top;

}




/* SP 出典の流れ */
#flow {
	padding: 0;
}


@media screen and (max-width:600px) {
	.section-title {
		font-size: 24px;
		color: #0C3B66;


	}

	.section-subtitle {
		text-align: center;
		color: #0C3B66;
		margin-bottom: 30px;
	}

	.store-sp {
		text-align: center;

	}

	.detail-accent {
		font-size: 16px;
		text-align: center;
		font-weight: 900;
	}

	.text {
		text-align: center;
		font-size: 16px;
	}

	.text-second {
		text-align: left;
		font-size: 16px;
	}

	#sp-detail {
		text-align: center;
	}

	#sp-detail .detail-accent {
		color: #0C3B66;
		text-decoration: underline;
		text-underline-offset: 9px;
	}

	.detail-price {
		font-size: 18px !important;
		font-weight: 700;
	}

	#sp-detail {
		font-size: 16px;
	}

	.detail-content {
		display: grid;
		grid-template-columns: 1fr;
		gap: 40px;

	}

	.detail-contens {
		border-bottom: 1px solid #000;
		padding-bottom: 15px;
	}

	.bold {
		font-weight: 800;
		display: block;
		margin-top: 15px;
	}

}

/*投資のポイント
---------------------------------------------------------------------------*/



.stpck {
	margin: 0;
}

#store-bg {
	background-image: url(../images/PCsection_5.webp);
	padding-block: 20px;
}

#store-bg h2 {
	color: #ffffff;
}

#store-bg .section-subtitle {
	text-align: center;
	color: #ffffff;
	margin-top: 50px;
}


#point-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 60%;
	margin: 30px auto;
	gap: 40px;
}

#point-grid img {
	width: 70%;
	margin-bottom: 20px;
}



#point-grid p {
	text-align: left;

}



@media screen and (max-width: 600px) {
	#point-grid {
		grid-template-columns: 1fr;
		width: 80%;
	}

	#store-bg {
		position: relative;
		height: 100px;
	}

	#store-bg h2 {
		position: absolute;
		font-size: 20px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
	}

}

/*お客様の声
---------------------------------------------------------------------------*/

#voice {
	text-align: center;
	color: #000000;
	background: #D3E1EB;
	position: relative;
}

.decoration {
	position: absolute;
	top: 0;
	left: 0;
}

#voice .section-title {

	color: #0C3B66
}

#voice .section-subtitle {
	margin-bottom: 50px;
	color: #0C3B66
}

.voice-title {
	font-size: 16px;
	border: 1px solid #5D7D95;
	color: #5D7D95;
	padding: 20px;
	width: 50%;
	margin: 0 auto;
}

.customer {
	display: flex;
	width: 90%;
	margin: 40px auto;
	align-items: center;
	padding: 50px;
}

#voice .project-text {
	text-align: left;
}

.flex-items {
	text-align: left;
}

.flex-items {
	width: 100%;
	margin: auto 20px;
}

@media screen and (max-width:600px) {
	.customer {
		flex-direction: column-reverse;
	}

	.voice-title {
		width: 100%;
	}

	.customer {
		width: 100%;

		padding: 0;
	}

	.flex-items {
		margin-bottom: 20px;
	}

}


/*株主を集める理由
---------------------------------------------------------------------------*/
#reason {
	text-align: center;
}



#reason h2 {
	text-decoration: underline;
	text-underline-offset: 17px;
	font-size: 48px;
	margin-bottom: 0;
	color: #0C3B66;
}

#reason .section-subtitle {
	color: #0C3B66;
	margin-bottom: 30px;
}

#reason {
	font-size: 24px;
}

#point-grid p {
	font-size: 20px;
}

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

	#reason h2 {
		text-decoration: none;
		font-size: 24px;
		margin-bottom: 0;
		color: #0C3B66;
	}

	.border {
		width: 60%;
		border-bottom: 2px solid #0C3B66;
		margin: 15px auto;

	}

	#reason {
		font-size: 16px;
	}

	#point-grid p {
		font-size: 16px;
	}
}

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


/*ロイヤルメルトグループとは
---------------------------------------------------------------------------*/
#common {
	width: 80%;
	margin: 0 auto;
	display: block;
}

.reason-title p {
	font-size: 24px;
	text-align: left;
}

.about {
	margin-bottom: 60px;
}



.about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	margin: 30px auto;
	gap: 40px;

}

.grid-items {
	background-color: #FFFFFF;
	padding: 30px;
}


.about-grid p {
	color: #000000;
	text-align: left;
}

.about-grid img {
	width: 100%;
	margin-bottom: 50px;

}

.common-list {
	display: flex;
	justify-content: space-between;
	margin: 60px auto;
}

.lists {
	border-right: 1px solid #ffffff;
	padding: 20px 60px;
	text-align: left;
	width: 100%;
}

.lists-right {
	border-right: none !important;
}


.cast {
	display: block;
}


.ttl_3d1 {
	font-weight: bold;
	border: 3px solid #4c9ac0;
	padding: 0.5em 1em;
	box-shadow: 5px -5px #4c9ac0;
	color: #4c9ac0;
	font-size: 14px;
	width: 60%;
	margin-left: auto;
	margin-bottom: 20px;

}





@media screen and (max-width:600px) {
	.about-grid {
		grid-template-columns: 1fr;
	}



	#common {
		width: 100%;
	}

	#common h2 {
		font-size: 20px;
	}


	#common p {
		font-size: 16px;
	}

	#common .section-title {
		color: #ffffff;

	}

	#common .section-subtitle {
		color: #ffffff;

	}

	.common-list {
		flex-direction: column;
	}

	.lists {
		border-right: none;
		border-bottom: 1px solid #ffffff;
	}

	.lists-right {
		border-bottom: none !important;
	}

	.ttl_3d1 {

		font-size: 14px;
		width: 80%;
		margin-left: auto;
		margin-bottom: 20px;
		margin-top: 0;

	}

	.about-grid img {
		margin-bottom: 10px;
	}
}


/*よくある質問
---------------------------------------------------------------------------*/
.Qa-Box span {
	color: #0C3B66;
}


.Qa-Box {
	width: 80%;
	margin: 0 auto;
	text-align: left;
}

.Qa-Box .Qa dt,
.Qa-Box .Qa dd {
	display: flex;
	align-items: baseline;
	margin: 30px 0;
	align-items: flex-start;
}

.Qa-Box .Qa dt {
	background-color: #ffffff;
}


.Qa-Box .Qa dt p {
	margin: 0;
	/* padding-left: 15px; */
	font-weight: bold;
	width: 100%;
	background-color: #ffffff;
	padding-block: 10px;
	font-size: 20px;
}

.Qa-Box .Qa dd p {
	margin: 0;
	padding-left: 15px;
	width: 100%;
	font-size: 20px;
}

.Qa-Box .Qa dt::before {
	content: "Q";
	align-items: center;
	color: #000;
	width: 30px;
	height: 35px;
	padding-inline: 10px;

	display: flex;
	align-items: center;
}

.Qa-Box .Qa dd::before {
	content: "A";
	display: flex;
	justify-content: center;
	align-items: center;
	background: #0C3B66;
	color: #fff;
	width: 35px;
	height: 35px;
}

@media screen and (max-width: 960px) {
	.Qa-Box {
		width: 95%;
	}
}

@media screen and (max-width: 600px) {
	.Qa-Box .Qa dt p {
		font-size: 14px;
	}

	.Qa-Box .Qa dd p {
		font-size: 14px;
	}

	/* .Qa-Box .Qa dt p::before {

		padding-inline: 10px;
	} */

	.Qa-Box .Qa dt::before {
		padding-right: 0;
	}


}



/* 共同スキーム */


#scheme {
	position: relative;
	padding: 0.5em 0.7em;
	margin-top: -100px;
	background: #5D7D95;
	color: #ffffff;
	width: 80%;
	margin: 0 auto;
	text-align: center;
	margin-top: -50px;
}

#scheme h2 {
	text-decoration: underline;
	margin-bottom: 0px;
	margin: 0;

}

#scheme::before {
	content: '';
	position: absolute;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 30px 0 30px;
	border-color: #5D7D95 transparent transparent transparent;
	left: 50%;
	transform: translateX(-50%) translateY(100%);
}

@media screen and (max-width :600px) {
	#scheme .section-title {
		color: #ffffff;
		font-size: 20px;
	}

	#scheme .section-subtitle {
		color: #ffffff;
		font-size: 16px;

	}

	#scheme {
		font-size: 22px;
	}

	#scheme {
		width: 90%;

	}
}



/*btn1（ボタン）
---------------------------------------------------------------------------*/

/*bg-primary-colorの上で使う場合*/
.bg-primary-color .btn1 a {
	background: var(--primary-inverse-color);
	/*背景色。冒頭のprimary-inverse-colorを読み込みます。*/
	color: var(--primary-color);
	/*文字色。冒頭のprimary-colorを読み込みます。*/
}


/*bg-primary-colorの上で使う場合*/
.bg-primary-color .btn1 a:hover {
	background: #fff;
	/*背景色*/
	color: #333;
	/*文字色*/
}



/*bg-primary-color
---------------------------------------------------------------------------*/
.bg-primary-color {
	background: #0C3B66;
	/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: #ffffff;
	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
	position: relative;
	/* 特典の背景 */
	text-align: center;
	z-index: -1;
}


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

@media screen and (max-width:600px) {
	.arrow {
		padding: 0px;
	}
}



/*bg2
---------------------------------------------------------------------------*/
@media screen and (max-width:600px) {


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


/*bg3
---------------------------------------------------------------------------*/
.bg3 {
	background: #F5F9FC;
	/*背景色*/
	margin-top: -38px;
}

.bg3 img {
	margin-top: 30px;
}

@media screen and (max-width:600px) {
	.bg3 img {
		margin-top: 15%;
	}
}


/*出店の流れ
---------------------------------------------------------------------------*/


/*プロジェクト背景
---------------------------------------------------------------------------*/
.bg-pattern1 {
	background-image: url("../images/PCsection_1.webp");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

.project {
	background-color: #213455;
	opacity: 0.6;
	padding: 40px 50px;
}

.project h2 {
	text-decoration: underline;
	font-size: 4.8vw;
}

.project-text {
	text-align: center;
	margin-top: -30px;
	font-size: 20px;
}

.project-text span {
	color: #D0A970;
}

@media screen and (max-width :600px) {
	.project-text {
		margin-top: 10px;
		font-size: 16px;


	}

	.project {
		margin: 20px 30px;
	}


	#voice .project-text {
		font-size: 16px;

	}

	#project .project-text {
		text-align: left;
	}

}


.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-grid２（１カラムボックス）
---------------------------------------------------------------------------*/
.list-grid2 {
	margin-top: 30px;
}


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc {
	display: block !important;
}

.sp {
	display: none !important;
}

.
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 600px) {
	.pc {
		display: none !important;
	}

	.sp {
		display: block !important;
	}
}

.achievements {
	margin: 30px auto;
	text-align: center;
}

.achievements span {
	font-size: 30px;
}

.achievements img {
	width: 130px;
}




/*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(2, 1fr);
		/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 3vw;
		/*ブロックの間に空けるマージン的な指定*/
	}

}



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


/*ボックス１個あたり*/
.list-grid1 .list {
	display: grid;
	margin-bottom: 3rem;
	/*ボックスの下に空けるスペース*/
	position: relative;
	border-radius: 5px;
	/*角を少しだけ丸く*/

	color: #333;
	/*文字色*/
	box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.1);
	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.1は色が10%出た状態。*/

}

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

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

}

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


/*bg-black内のボックスへの追加設定*/
.list-grid1 .list.bg-black {
	background: #111;
	/*背景色*/
	color: #fff;
	/*文字色*/
}


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

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

/*bg-black内のp要素への追加設定*/
.list-grid1 .list.bg-black p {
	color: #999;
	/*文字色*/
}

/*ボックス内のfigure画像*/
.list-grid1 .list figure.icon {
	margin: 0 auto;
	width: 100px;
	/*画像サイズ*/
	margin-top: -40px;
	/*本来の場所より上にずらす*/
}

/*bg1内のfigureへの追加設定*/
.bg1 .list-grid1 .list figure.icon {
	filter: grayscale(100%) brightness(90%);
	/*画像をグレースケールにし、明るさも少し暗くする。そのままの画像色を出したければこの１行を削除。*/
	margin-bottom: 1rem;
	/*下に１文字分のスペースを空ける*/
}

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

	/*ボックス内のfigure画像*/
	.list-grid1 .list figure.icon {
		width: 150px;
		/*画像サイズ*/
		margin-top: -50px;
		/*本来の場所より上にずらす*/
	}

}



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

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

	/*テキストブロック*/
	.list-normal1 .text {
		flex: 1;
	}


}



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

.list-normal1 .list2 {
	background: var(--base-color);
	color: var(--base-inverse-color);
	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	padding: 3rem;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
	position: relative;
	margin: 20px 25px 50px 25px;
}

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

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

	}


}

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


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

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

	/*画像の下マージンのリセット*/
	.list-normal1 figure {
		margin-bottom: 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: 2rem;
		/*文字サイズ200%*/
		line-height: 1.8;
		/*行間*/
	}

}

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

#container {
	all: unset;
}



.c {
	text-align: center !important;
}



.pc {
	display: none;
}



.benefit {
	font-size: 2vw;
	margin-bottom: 50px;

}

.accent {
	color: #FFE07A;
}

@media screen and (max-width :600px) {
	.benefit {
		margin-bottom: 20px;

	}


	pre {
		white-space: pre-wrap;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}
}