囲み記事テンプレート

サイト内の伝言板的なやつ

.pageIndex 長いページの目次

Lorem ipsum dolor sit amet
Fuga reprehenderit
Excepteur sint occaecat cupidatat Excepteur sint occaecat cupidatat Excepteur sint occaecat cupidatat Excepteur sint occaecat cupidatatExcepteur sint occaecat cupidatat Excepteur sint occaecat cupidatat

ソースはここをクリック


<div class="pageIndex">
	<h3> .pageIndex 長いページの目次</h3>
	<i class="indexCircle"> </i>
	<ol>
		<li><a href="#">Lorem ipsum dolor sit amet</a></li>
		<li><a href="#">Fuga reprehenderit</a></li>
		<li><a href="#">Excepteur sint occaecat cupidatat</a></li>
	</ol>
</div>


/*====================================================
*	ページ目次
====================================================*/
.pageIndex {
	position: relative;
	overflow: visible;
	background: #f5f5f5;
	display: block;
	width: 90%;
	max-width: 1024px;
	margin: 2rem auto;
	padding: 2rem;
	border-radius: 1rem;
	}
.pageIndex:before {
	position: absolute;
	z-index: 10;
	top: -1.8rem;
	left: -.8rem;
	color: #17927f;
	font-size: 3.9rem;
	font-family: 'Material Symbols Outlined';
	content: '\e896';
	display: inline-flex !important;
	align-items: center !important;
	vertical-align: -5px !important;
	}
.pageIndex h3 {
	margin: .5rem;
	margin-left: 4rem;
	font-size: 2.8rem;
	font-weight: 500;
	line-height: 1.2;
	}
.pageIndex ol {
	margin: 1rem 2rem;
	}
.pageIndex ol li {
	padding: .5rem 0;
	line-height: 1.2;
	border-bottom: dotted 1px #999;
	text-indent:-3.5rem;
	padding-left:1rem;
	}
.pageIndex ol li:nth-child(1) {
	border-top: dotted 1px #999;
	}

.pageIndex ol li span,
.pageIndex ol li:before {
	font-size: 3rem;
	color: #17927f;
	font-family: 'Material Symbols Outlined';
	padding-right: 0.5rem;
	vertical-align: -10px;
	}
.pageIndex ol li:nth-child(1):before { content: "filter_1";}
.pageIndex ol li:nth-child(2):before { content: "filter_2";}
.pageIndex ol li:nth-child(3):before { content: "filter_3";}
.pageIndex ol li:nth-child(4):before { content: "filter_4";}
.pageIndex ol li:nth-child(5):before { content: "filter_5";}
.pageIndex ol li:nth-child(6):before { content: "filter_6";}
.pageIndex ol li:nth-child(7):before { content: "filter_7";}

.pageIndex li .material-symbols-outlined {
	vertical-align: -6px;
	}

.indexCircle {
	position: absolute;
	top: -1rem;
	left: -1.5rem;
	display: inline-block;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	ext-align:center;
	line-height: 80px;
	border: solid 3px #17927f;
	}

/*[ Media Query ] --------------------------- */
@media screen and (max-width: 639.9px) {
	.pageIndex {
		width: 96%;
		margin-left: 2rem;
		padding-left: 1rem;
		}
	.pageIndex h3 {
		margin: 1rem 0 0 3rem;
		font-size: 5.1vw;
		}
	.pageIndex ol {
		margin-left: 1rem;
		}
	.pageIndex ol li {
		margin-left: 1rem;
		font-size: 16px;
		}
	}

.flowsheet お問い合わせの流れ

必要事項の入力 ➡【確認する】
入力項目の確認 ➡ 【送信する】
完了 ➡
入力されたメールアドレスに確認のメールが届きます。
Excepteur sint occaecat cupidatatExcepteur sint occaecat cupidatat Excepteur sint occaecat cupidatat

ソースはここをクリック


<div class="flowsheet">
	<h3> .flowsheet お問い合わせの流れ</h3>
	<i class="flowCircle"> </i>
	<ol>
		<li>必要事項の入力 &nbsp;<span class="material-symbols-outlined">east</span> 【確認する】</li>
		<li>入力項目の確認 &nbsp;<span class="material-symbols-outlined">east</span> 【送信する】</li>
		<li>完了 <span class="material-symbols-outlined">east</span> 入力されたメールアドレスに確認のメールが届きます。</li>
	</ol>
</div>


.flowsheet {
	position: relative;
	overflow: visible;
	background: #eee;
	display: block;
	width: 90%;
	max-width: 1024px;
	margin: 2rem auto;
	padding: 2rem;
	border-radius: 1rem;
	}
.flowsheet:before {
	position: absolute;
	z-index: 10;
	top: -1.8rem;
	left: -.8rem;
	color: #9d50bb;
	font-size: 3.6rem;
	font-family: 'Material Symbols Outlined';
	content: '\e0ae';
	display: inline-flex !important;
	align-items: center !important;
	vertical-align: -5px !important;
	}
.flowsheet h3 {
	margin: .5rem;
	margin-left: 4rem;
	font-weight: 500;
	line-height: 1.2;
	}
.flowsheet ol {
	margin: 1rem 2rem;
	}
.flowsheet ol li {
	padding: 1rem 0 0 5rem;
	line-height: 1.6;
	text-indent: -6rem;
	}

.flowsheet ol li span,
.flowsheet ol li:before {
	font-weight: bold;
	color: #9d50bb;
	}
.flowsheet > ol > li:nth-child(1):before { content: "STEP1 : ";}
.flowsheet > ol > li:nth-child(2):before { content: "STEP2 : ";}
.flowsheet > ol > li:nth-child(3):before { content: "STEP3 : ";}
.flowsheet > ol > li:nth-child(4):before { content: "STEP4 : ";}
.flowsheet > ol > li:nth-child(5):before { content: "STEP5 : ";}
.flowsheet > ol > li:nth-child(6):before { content: "STEP6 : ";}
.flowsheet > ol > li:nth-child(7):before { content: "STEP7 : ";}

.flowsheet li .material-symbols-outlined {
	vertical-align: -6px;
	}

.flowCircle {
	position: absolute;
	top: -1rem;
	left: -1.5rem;
	display: inline-block;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	ext-align:center;
	line-height: 80px;
	border: solid 3px #9d50bb;
	}

/*[ Media Query ] --------------------------- */
@media screen and (max-width: 639.9px) {
	.flowsheet {
		width: 96%;
		margin-left: 2rem;
		padding-left: 1rem;
		}
	.flowsheet h3 {
		margin: 1rem 0 0 3rem;
		}
	.flowsheet ol {
		margin-left: 1rem;
		}
	.flowsheet ol li {
		margin-left: 1rem;
		font-size: 16px;
		}
	}

.item 項目

Lorem ipsum dolor sit amet
Fuga reprehenderit
Excepteur sint occaecat cupidatat

ソースはここをクリック


<div class="item">
	<h3> .item 項目</h3>
	<ul>
		<li>Lorem ipsum dolor sit amet</li>
		<li>Fuga reprehenderit </li>
		<li>Excepteur sint occaecat cupidatat</li>
	</ul>
</div>


.item {
	position: relative;
	overflow: visible;
	background: rgba(133,216,203,.2);/*#85d8cb*/
	display: block;
	width: 90%;
	max-width: 1024px;
	margin: 2rem auto;
	padding: 2rem;
	border-radius: 1rem;
	}
.item:before {
	position: absolute;
	z-index: 10;
	top: -4.4rem;
	left: -2rem;
	color: #17927f;
	font-size: 5.5rem;
	font-family: 'Material Symbols Outlined';
	content: '\e2e6';
	display: inline-flex !important;
	align-items: center !important;
	vertical-align: -5px !important;
	}
.item h2 {
	margin: .5rem;
	margin-left: 3rem;
	font-weight: 500;
	}
.item h3,
.item h4 {
	margin: 1rem 3rem;
	}
.item ul {
	margin: 1rem 2rem 1rem 4rem;
	}
.item ul li {
	list-style-type: square;
	padding: .5rem 1rem .3rem 0;
	}
.item ul li::marker {
	color: #17927f;
	}

/*[ Media Query ] --------------------------- */
@media screen and (max-width: 639.9px) {
	.item {
		width: 96%;
		margin-left: 2rem;
		padding-left: 1rem;
		}
	.item h2 {
		margin: 1rem 0 0 5rem;
		}
	.item ul {
		margin-left: 3rem;
		}
	}

.information 情報・お知らせ

Lorem ipsum dolor sit amet
Fuga reprehenderit
Excepteur sint occaecat cupidatat

ソースはここをクリック


<div class="information">
	<h3> .information 情報・お知らせ</h3>
	<ul>
		<li>Lorem ipsum dolor sit amet</li>
		<li>Fuga reprehenderit </li>
		<li>Excepteur sint occaecat cupidatat</li>
	</ul>
</div>


.information {
	position: relative;
	overflow: visible;
	background: rgba(204,232,181,.2);/*#cce8b5*/
	display: block;
	width: 90%;
	max-width: 1024px;
	margin: 2rem auto;
	padding: 2rem;
	border-radius: 1rem;
	}
.information:before {
	position: absolute;
	z-index: 10;
	top: -4.4rem;
	left: -2rem;
	color:#a8e874;
	font-size: 5.8rem;
	font-family: 'Material Symbols Outlined';
	content: '\e88e';
	display: inline-flex !important;
	align-items: center !important;
	vertical-align: -5px !important;
	}
.information h3 {
	margin: .5rem;
	margin-left: 3rem;
	font-weight: 500;
	}
.information h4 {
	margin: 1rem 3rem;
	}
.information p {
	margin: 1rem 3rem 2rem;
	}
.information ul {
	margin: 1rem 2rem 1rem 3rem;
	}
.information ul li {
	list-style-type: none;
	padding: .5rem 1rem .3rem;
	border-bottom: dotted 1px #999;
	}
.information ul li:nth-child(1) {
	border-top: dotted 1px #999;
	}

/*[ Media Query ] --------------------------- */
@media screen and (max-width: 639.9px) {
	.information {
		width: 96%;
		margin-left: 2rem;
		padding-left: 1rem;
		}
	.information h3 {
		margin: 1rem 0 0 5rem;
		}
	}

.question 疑問・質問

演奏音たてへぶんへぐるぐる野たですると大きなたたというセロた。

Lorem ipsum dolor sit amet ?
Fuga reprehenderit ?
Excepteur sint occaecat cupidatat ?

ソースはここをクリック


<div class="question">
	<h3> .question 疑問・質問</h3>
	<p>演奏音たてへぶんへぐるぐる野たですると大きなたたというセロた。</p>
	<ul class="square">
		<li>Lorem ipsum dolor sit amet ?</li>
		<li>Fuga reprehenderit ?</li>
		<li>Excepteur sint occaecat cupidatat ?</li>
	</ul>
</div>


.question {
	position: relative;
	overflow: visible;
	background: rgba(193,221,244,.6);/*#c1ddf4*/
	display: block;
	width: 90%;
	max-width: 1024px;
	margin: 2rem auto;
	padding: 2rem;
	border-radius: 1rem;
	}
.question:before {
	position: absolute;
	z-index: 300;
	top: -4.4rem;
	left: -2rem;
	color:#0795d1;
	font-size: 5.8rem;
	font-family: 'Material Symbols Outlined';
	content: '\e887';
	display: inline-flex !important;
	align-items: center !important;
	vertical-align: -5px !important;
	}
.question h3 {
	margin: .5rem;
	margin-left: 3rem;
	font-weight: 500;
	}
.question h4 {
	margin: 1rem 3rem;
	}
.question p {
	margin: 1rem 3rem 2rem;
	}
.question ul li::marker {
	color: #0795d1;
	}

/*[ Media Query ] --------------------------- */
@media screen and (max-width: 639.9px) {
	.question {
		width: 96%;
		margin-left: 2rem;
		padding-left: 1rem;
		}
	.question h3 {
		margin: 1rem 0 0 5rem;
		}
	}

.notice 注意・注釈

演奏音たてへぶんへぐるぐる野たですると大きなたたというセロた。

Lorem ipsum dolor sit amet !
Fuga reprehenderit !
Excepteur sint occaecat cupidatat !

ソースはここをクリック


<div class="notice">
	<h3> .notice 注意・注釈</h3>
	<p>演奏音たてへぶんへぐるぐる野たですると大きなたたというセロた。</p>
	<ul class="square">
		<li>Lorem ipsum dolor sit amet !</li>
		<li>Fuga reprehenderit !</li>
		<li>Excepteur sint occaecat cupidatat !</li>
	</ul>
</div>


.notice {
	position: relative;
	overflow: visible;
	background: rgba(255,0,0,.1);
	display: block;
	width: 90%;
	max-width: 1024px;
	margin: 2rem auto;
	padding: 2rem;
	border-radius: 1rem;
	}
.notice:before {
	position: absolute;
	z-index: 1000;
	top: -4.4rem;
	left: -2rem;
	color: #c00;
	font-size: 5.8rem;
	font-family: 'Material Symbols Outlined';
	content: '\e000';
	display: inline-flex !important;
	align-items: center !important;
	vertical-align: -5px !important;
	}
.notice h3 {
	margin: .5rem;
	margin-left: 3rem;
	font-weight: 500;
	}
.notice h4 {
	margin: 1rem 3rem;
	}
.notice p {
	margin: 1rem 3rem 2rem;
	}
.notice ul li::marker {
	color: #c00;
	}

/*[ Media Query ] --------------------------- */
@media screen and (max-width: 639.9px) {
	.notice {
		width: 96%;
		margin-left: 2rem;
		padding-left: 1rem;
		}
	.notice h3 {
		margin: 1rem 0 0 5rem;
		}
	}