囲み記事テンプレート

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

.flowsheet お問い合わせの流れ

  1. 必要事項の入力  east 【確認する】
  2. 入力項目の確認  east 【送信する】
  3. 完了 east
    入力されたメールアドレスに確認のメールが届きます。
ソースはここをクリック

<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: 4.2rem;
	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;
	line-height: 1.6;
	}

.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: 6rem;
	height: 6rem;
	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;
		}
	}

CLOSE

.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: 6.8rem;
	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;
		}
	}

CLOSE

.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: 6.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;
		}
	}

CLOSE

.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: 1000;
	top: -4.4rem;
	left: -2rem;
	color:#0795d1;
	font-size: 6.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;
		}
	}

CLOSE

.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: 6.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;
		}
	}

CLOSE


TOP