@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/


/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/*アドミンバーを半透明に*/
#wpadminbar {
	background: rgba(29, 35, 39, 0.5);
}

/*--------------------------------
	全体
--------------------------------*/
@font-face {
	font-family: 'fonttitle';
	src: url('./CormorantInfant.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'fontserif';
	src: url('./NotoSerifJP-Regular.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'fontmono';
	src: url('./ZenMaruGothic-Regular.woff2') format('woff2');
	font-display: swap;
}

:root {
	--color_key: #004; /*ネイビー*/
	--color_sub: #D8D800; /*ゴールド*/
	--color_font: #202124;
	--color_link: #1D9BF0;
	--color_line: #E2E2E2;
	--color_red: #E83F5F;
	--color_shadow: 0px 3px 8px -2px rgba(0,0,0,0.2);
	--font_sans: "";
	--font_serif: "fontserif", serif;
	--fontspace: 0em;
	--listspace: 0.5em; /*番号と文字の隙間*/
	--padding_space: 12px;
}

/*ページのゆらゆらを防止*/
body.home #content,
body[class*="scrollable-sidebar"] #main {
	overflow-x: hidden;
}
@media screen and (max-width: 1104px) {
	.main, .sidebar, .sidebar-left .main, .sidebar-left .sidebar {
		margin: unset;
	}
}
/*行間*/
.entry-content > p {
	line-height: 2;
}
/*リンク*/
a, 
a:hover {
	color: var(--color_link);
	outline: unset;
	text-decoration: unset;
	/*text-underline-offset: 3px;*/
}
a[href*="https://nurseat.com/to/"]::after {
	font-family: 'Font Awesome 5 Free';
		content: '\f35d';
		font-weight: 900;
	margin: 0 0.3em;
	font-size: 0.5em;
}
/*リンク背景色を無効化（メニューやサイドバー）*/
.cf a:hover {
	background: transparent;
}
.fa-external-link-alt::before {
    font-size: 0.6em;
}
/*em斜体*/
em {
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", YuGothic, "Yu Gothic", sans-serif;
	font-style: italic;
}
/*固定ページの日付を非表示*/
.page .date-tags {
	display: none;
}
/*テーブルのCocoon装飾を無効化*/
table tr:nth-of-type(2n+1),
table th {
	background: unset;
}
@media screen and (max-width: 834px) {
	table th, table td {
		padding: 1px;
		font-size: unset;
	}
}
table th, 
table td {
	font-size: 14px;
}
.microcopy {
	display: flex;
	justify-content: center;
	color: var(--color_red);
	font-size: 0.8em;
	font-weight: bold;
}
/*グラフVegaChartの位置を上方修正*/
[id$="chart"] {
	margin-top: -16px;
}
/*Rentracksトラッキング用imgタグのせいで広告が下にズレるのを修正*/
img[src^="https://www.rentracks.jp/adx"] {
	display: none;
}


/*--------------------------------
	カラム横並び（おもに比較表に使うassy内のdata）
--------------------------------*/
@media screen and (max-width: 834px) {
	.flexrow .column-wrap {
		flex-direction: row;
	}
	.flexrow .column-2-3-1-2 .column-left {
		margin-bottom: unset;
    	width: 28% !important;
	}
	.flexrow .column-2-3-1-2 .column-right {
    	width: 71% !important;
	}
}
@media screen and (max-width: 480px) {
	[id$="data"] table caption,
	[id$="data"] table th, 
	[id$="data"] table td {
		font-size: 0.8em;
	}
}



/*--------------------------------
	サイト名
--------------------------------*/
.logo-text {
	padding-bottom: 2.5rem;
}
.site-name-text {
	position: relative;
	color: var(--color_key);
	font-size: 0.9rem !important;
	font-family: serif;
}
.site-name-text::before {
	position: absolute;
	content: "nurse@";
	background: linear-gradient(to right, var(--color_key) 75%, var(--color_sub) 75%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	font-family: "fonttitle";
	font-size: 5rem;
	height: 112px;
	top: -0.55em;
	left: -0.85em;
}
/*フッターのロゴnurse@位置調整*/
@media screen and (max-width: 1023px){
	.logo-footer .site-name-text::before {
		top: -0.15em;
	}
}
/*クレジットとの隙間調整*/
.logo-footer {
	margin-bottom: 4rem;
}
.footer-bottom {
	font-size: 0.5em;
}


/*--------------------------------
	フロントページ
--------------------------------*/
.appeal-content {
	background-color: transparent;
	padding: unset;
	margin: unset;
	text-align: unset;
}

.appeal-title {
	color: #fff;
	font-size: 3em;
	font-weight: normal;
	font-family: "fonttitle";
}
.appeal-message {
	color: #fff;
	font-family: serif;
	line-height: 1.5;
}
@media screen and (max-width: 480px) {
	.appeal-title {
		font-size: 1.5em;
	}
	.appeal-message {
		font-size: 0.7em;
	}
}




/*--------------------------------
	タイトル周り
--------------------------------*/
/*パンくずリスト*/
.breadcrumb {
	border-top: 1px solid var(--color_line);
	border-bottom: 1px solid var(--color_line);
}
.breadcrumb-home .fa-fw,
.breadcrumb-item .fa-fw {
	display: none;
}
/*アイキャッチを画面の幅いっぱいに*/
.eye-catch-wrap {
	margin-left: -32px; /*左の余白*/
	margin-right: -32px; /*右の余白*/
}
@media screen and (max-width: 834px){
	.eye-catch-wrap {
		margin-left: -20px; /*左の余白*/
		margin-right: -20px; /*右の余白*/
	}
}
/*h1見出しデザイン*/
h1.entry-title,
h1.archive-title {
	color: initial;
	font: normal 24px var(--font_serif);
	line-height: initial;
	padding: unset;
}
/*カテゴリーページの見出し*/
.archive-title span::before {
	content: '';
}
/*投稿日、更新日*/
.article-header {
	position: relative;
}
.date-tags {
	position: absolute;
	top: -32px;
	right: 0px;
}
.date-tags [class*="fa"]::before {
	content: "";
}
.post-date,
.post-update {
	color: var(--color_sub);
	font-family: var(--font_serif);
	font-size: inherit;
}


/*--------------------------------
	タググループ
--------------------------------*/
/*タググループ*/
.tagcloud-taggroup,
.widget-below-single-content-title {
	margin-bottom: 1rem !important;
}
.tagcloud-taggroup a {
	font-size: 0.9em;
	margin: 0.1em 0.3em;
	text-decoration: unset;
}
.tagcloud-taggroup a::before {
	content: "#";
}


/*--------------------------------
	目次
--------------------------------*/
/*Cocoon目次デザイン変更*/
#toc_container {
	background: linear-gradient(135deg, transparent 25%, rgba(73, 94, 105, 0.05 ) 25%, rgba(73, 94, 105, 0.05 ) 50%, transparent 50%, transparent 75%, rgba(73, 94, 105, 0.05 ) 75%, rgba(73, 94, 105, 0.05 )) !important;
	background-size: 4px 4px !important;
	background-clip: padding-box !important;
	border: unset !important;
	border-top: 4px double var(--color_line) !important;
	border-bottom: 4px double #E2E2E2 !important;
	margin-bottom: 2rem;
	width: 100% !important;
}
#toc_container p.toc_title {
	color: initial;
	font: normal 24px serif !important;
	margin-left: 0.5rem !important;
	text-align: unset !important;
}
#toc_container a {
	font-size: 15px;
	text-decoration: none !important;
}
#toc_container > ul {
	list-style: none;
	padding-left: unset !important;
}
#toc_container > ul > li {
	position: relative;
	list-style: none;
	padding-left: 1.25em !important;
}
#toc_container > ul > li::before {
	position: absolute;
	content: '\226b';
	display: inline-block;
	margin-right: 0.25rem;
	transform: rotate(90deg);
	left: 0;
}
#toc_container ul ul {
	padding-left: 1em;
	margin-left: unset !important;
}
#toc_container ul ul > li {
	list-style: circle !important;
}
#toc_container .toc_depth_2 {
	display: none;
}


/*--------------------------------
	見出し
--------------------------------*/
/*見出し上にスペース
やや広くスペースを空けることで、話題転換を意識できる*/
/*h2見出しデザイン*/
.article h2 {
	position: relative;
	border-bottom: 6px solid var(--color_key);
	border-radius: unset;
	background-color: unset;
	color: initial;
	font: normal 24px var(--font_serif);
	padding: 0.7em;
	margin: 12rem -16px 2.5rem;
}
.article h2:before {
	position: absolute;
	content: '';
	border-width: 21px 21px 0 0;
	border-style: solid;
	border-color: var(--color_key) transparent transparent transparent;
	left: 16px;
	bottom: -22px;
	width: 0;
	height: 0;
}
.article h2:after {
	position: absolute;
	content: '';
	border-width: 14px 14px 0 0;
	border-style: solid;
	border-color: #FFF transparent transparent transparent;
	left: 22px;
	bottom: -10px;
	width: 0;
	height: 0;
}
/*h3見出しデザイン*/
.article h3 {
	border: unset;
	border-top: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 6px solid var(--color_key);
	color: initial;
	font: normal 22px var(--font_serif);
	padding: 0.5em;
	margin: 1.5rem 0;
}
[class$="-box"] h3 {
	border: unset;
}



/*--------------------------------
	Cocoon スタイル > インライン
--------------------------------*/
/*太字のマーカー*/
.entry-content > p .bold {
	/*background: linear-gradient(transparent 60%, #F7F7CC 60%);*/
	color: #000;
}
/*赤太字*/
.entry-content > p .bold.red {
	background: unset;
	color: var(--color_red);
}
/*赤アンダーライン = コード*/
.red-under {
	background: transparent;
	border: solid 1px lightgray;
	border-radius: 3px;
	font-family: var(--font_mono);
	padding: 0.1em 0.2em;
	margin: 0 0.2rem;
}
/*青 = 小文字*/
.blue,
.small {
	display: inline-block;
	color: var(--color_font);
	font-size: 0.75em;
	line-height: 1.2em;
}
/*青太字 = 大文字*/
.bold.blue,
.large {
	display: inline-block;
	background: unset;
	color: inherit;
	display: inline-block;
	font-size: 1.2rem;
	line-height: 1.2;
	padding: 0.5rem 0;
}
/*キーボードキー*/
.keyboard-key {
	background: #333333;
	border: none;
	border-radius: 0.2em;
	box-shadow: none;
	color: white;
	font-family: 'MS Sans Serif', 'Helvetica', sans-serif;
	letter-spacing: 0.1em;
	margin: 0 0.2em;
	padding: 0.25em 0.5em;
}
/*本文中タイトル*/
.caption {
	display: block;
	font: normal 22px var(--font_serif);
	text-align: center;
}


/*--------------------------------
	ボックス
--------------------------------*/
/*引用blockquote*/
blockquote {
	background: #F3F6FF;
	border: unset;
	border-radius: 4px;
	font-family: "fontmono";
	padding: 15px;
}
blockquote::before {
	color: var(--color_key);
	font-size: 4rem;
	top: -20px;
	left: -9px;
}
blockquote::after {
	content: none;
}
blockquote p {
	margin-bottom: .5rem !important;
}
blockquote p + hr {
	border-width: 1px 0px 0px 0px;
	border-style: solid;
	color: #DDD;
	margin: 1rem;
}
/*スタイル > ボックス共通*/
[class$="box"] {
	background: transparent;
	color: inherit;
}
[class$="box"] > *:not(:last-child) {
	padding-bottom: var(--padding_space);
	margin-bottom: 0.5rem !important;
}
/*スタイル > ボックス（案内） > プライマリー*/
.primary-box {
	border: 2px solid var(--color_sub);
}
/*プライマリーボックスの中のリストは装飾*/
.primary-box ul {
	list-style: none;
}
.primary-box ul li {
	text-indent: calc(-1em - var(--listspace));
}
.primary-box ul li::before {
	padding-right: var(--listspace);
}
.primary-box :not(ul li){
	text-indent: initial;
}
.primary-box ul li::before {
	font-family: 'Font Awesome 5 Free';
		content: '\f00c';
		font-weight: 900;
	color: var(--color_sub);
}
/*スタイル > ボックス（案内） > セカンダリー*/
.secondary-box {
	position: relative;
	border: solid 1px var(--color_key);
}
.secondary-box p:first-child {
	position: absolute;
	display: lnline-block;
	background-color: #FFF;
	color: var(--color_key);
	font-weight: bold;
	padding: 0 1rem;
	white-space: nowrap;
	top: -1rem;
}
/*スタイル > ボックス（案内） > サクセス*/
.success-box {
	background: #F6F6F6;
	padding-top: 1.5rem;
	padding-bottom: 2rem;
	margin-left:-12px;
	margin-right:-12px;
}
.success-box p, 
.success-box h3 {
	max-width: 560px;
	margin: 0 auto;
}
.success-box p {
	border-radius: 0 0 8px 8px;
}
.success-box h3 {
	position: relative;
	margin-bottom: unset;
}
.success-box h3:not(:first-child) {
	margin-top: 3rem;
}
@media screen and (min-width: 560px) {
	.success-box h3 {
		padding-left: 15%;
	}
}
.success-box h3::before {
	color: var(--color_sub);
	padding-right: 0.5em;
}
.success-box h3:nth-of-type(1)::before {content: "STEP1";}
.success-box h3:nth-of-type(2)::before {content: "STEP2";}
.success-box h3:nth-of-type(3)::before {content: "STEP3";}
.success-box h3:nth-of-type(4)::before {content: "STEP4";}
.success-box h3:nth-of-type(5)::before {content: "STEP5";}
.success-box h3:nth-of-type(6)::before {content: "STEP6";}
.success-box h3:nth-of-type(7)::before {content: "STEP7";}
.success-box h3:nth-of-type(8)::before {content: "STEP8";}
.success-box h3:nth-of-type(9)::before {content: "STEP9";
}
.success-box p+h3::after {
	content: "▼";
	position: absolute;
		top: -40px;
		left: 50%;
	transform: scale(2, 1) translateX(-20%);/*位置調整*/
	-webkit-transform: scale(2, 1) translateX(-20%);
	color: var(--color_key);
}
/*スタイル > ボックス（案内） > インフォ
h3先頭に順番号が自動で付く
h2範囲をdivで囲うとh3に番号が付く*/
.info-box {
	border-radius: unset;
	margin-left:-12px;
	margin-right:-12px;
}
.info-box h3 {
	position: relative;
	background: none;
	font-family: var(--font_serif);
	margin-top: 4rem;
}
.info-box h3::before {
	position: absolute;
	color: var(--color_sub);
	font-size: 64px;
	font-style: italic;
	top: -48px;
	transform: translateX(-50%);
	z-index: -1;
}
.info-box h3:nth-of-type(1)::before {content: "1";}
.info-box h3:nth-of-type(2)::before {content: "2";}
.info-box h3:nth-of-type(3)::before {content: "3";}
.info-box h3:nth-of-type(4)::before {content: "4";}
.info-box h3:nth-of-type(5)::before {content: "5";}
.info-box h3::after {
	content: '';
	position: absolute;
		top: -2px;/*線の上下位置*/
		left: 50%;
	transform: translateX(-50%);/*位置調整*/
	-webkit-transform: translateX(-50%);
	background: linear-gradient(to right, #FFF 0%, var(--color_sub) 25%, var(--color_sub) 75%, #FFF 100%);/*線の色*/
	display: inline-block;
	width: 50%;/*線の長さ*/
	height: 1px;/*線の太さ*/
}


/*--------------------------------
	ブログカード
--------------------------------*/
.a-wrap {
	padding: 4px;
}
/*ブログカードの装飾*/
.blogcard {
	border: unset;
	padding: unset;
}
.blogcard-wrap {
	margin: unset;
	padding: unset;
}
/*内部ブログカード*/
.internal-blogcard-wrap {
	max-width: 400px;
}
.internal-blogcard {
	border: none;
	border-radius: 4px;
	box-shadow: var(--color_shadow);
	padding: 0.5rem;
	word-wrap: break-word;
	position: relative;
}
.internal-blogcard-title {
	color: var(--color_font);
}
.internal-blogcard-snippet {
	display: none;
}
/*続きを読む*/
.internal-blogcard-content::after {
	content: 'この記事を読む ≫';
	color: var(--color_link);
	font-size: 0.9em;
	position: absolute;
	right: 0.5rem;
	bottom: 0.3rem;
}

/*カードのサムネイル画像の大きさを調整
エントリー・関連・新着・人気に共通*/
[class*="card-thumb"] {
	margin: 0 8px 0 0 !important;
	width: 112px !important;
	height: 112px !important;
}
[class*="card-content"] {
	font-size: initial;
	margin: 0;
	padding: 0;
}
[class*="card-title"] {
	font: normal 1em var(--font_serif);
	line-height: 1.4;
	margin: 0 0 0.5em 0;
}
[class*="card-snippet"] {
	color: #888 !important;
	font-size: 0.9em;
	line-height: 1.4;
}
@media screen and (max-width: 560px){
	[class*="card-title"] {
		font-size: 0.95rem;
	}
	[class*="card-snippet"] {
		display: none;
	}
}
.entry-card-wrap {
	border-radius: 4px;
	box-shadow: var(--color_shadow);
}
/*カードラベル・フッターを非表示*/
.cat-label,
[class*="card-footer"] {
	display: none;
}





/*--------------------------------
	カラム
--------------------------------*/
@media screen and (max-width: 599px) {
	.entry-content > .column-wrap.column-2,
	.entry-content > .column-wrap.column-3 {
		flex-direction: unset;
		font-size: 0.9em;
	}
}


/*--------------------------------
	Preコードの装飾
--------------------------------*/
.entry-content pre {
	background: transparent;
	/*border-radius: 3px;*/
	line-height: initial;
	padding: 0.5em;
}


/*--------------------------------
	スピーチ
--------------------------------*/
.speech-icon img {
	max-width: 64px;
}


/*--------------------------------
	テーブル
--------------------------------*/
.article table th,
.article table td {
	border-left: none;
	border-right: none;
}
/*テーブルの装飾 横罫線のみのノート風
.article table tr:first-child th,
.article table tr:first-child td {
	border-top: 1px solid var(--color_key);
}
.article table tr:last-child th,
.article table tr:last-child td {
	border-bottom: 1px solid var(--color_key);
}
/*テーブル内の縦仕切り線
.article table th:not(:last-child),
.article table td:not(:last-child) {
	border-right: 1px solid #F0F0F0;
}*/
/*テーブル内のon off*/
table span.on {
	display: inline-block;
	background: var(--color_sub);
	border: solid 1px var(--color_sub);
	border-radius: 3px;
	color: #000;
	font-family: "fontmono";
	padding: 0 0.2em;
	margin: 1px;
}
table span.off {
	display: inline-block;
	border: solid 1px #CCC;
	border-radius: 3px;
	color: #CCC;
	font-family: "fontmono";
	padding: 0 0.2em;
	margin: 1px;
}


/*--------------------------------
	番号付きリスト黒丸
--------------------------------*/
:root {
	--listspace: 0.5em; /*番号と文字の隙間*/
}
ol {
	list-style: none;
}
ol li {
	text-indent: calc(-1.3em - var(--listspace));
}
ol li::before {
	color: var(--color_sub);
	font: 1.2em serif;
	padding-right: var(--listspace);
}
ol :not(li){
	text-indent: initial;
}
ol > li:nth-of-type(1)::before {content: '\2776';}
ol > li:nth-of-type(2)::before {content: '\2777';}
ol > li:nth-of-type(3)::before {content: '\2778';}
ol > li:nth-of-type(4)::before {content: '\2779';}
ol > li:nth-of-type(5)::before {content: '\277a';}
ol > li:nth-of-type(6)::before {content: '\277b';}
ol > li:nth-of-type(7)::before {content: '\277c';}
ol > li:nth-of-type(8)::before {content: '\277d';}
ol > li:nth-of-type(9)::before {content: '\277e';}
ol > li:nth-of-type(10)::before {content: '\277f';}


/*--------------------------------
	読んでおきたい関連記事
--------------------------------*/
.tagposts .tx {
	display: block;
	margin: 1rem auto;
}
.tagposts .tx::before {
	content: none;
}
.tagposts a {
	font-size: 0.95rem;
}


/*--------------------------------
	フッター周り
--------------------------------*/
/*ロゴ・ライセンス1024px以上での左右分割を無効化してセンタリング*/
.footer-bottom-logo {
	float: none;
    position: static;
}
.footer-bottom-logo .logo-image {
    margin: 0 auto;
}
.footer-bottom-content {
	float: none;
    text-align: center;
}


div.fullwidth {
	margin-left: calc(((100vw - 100%) / 2) * -1);
	margin-right: calc(((100vw - 100%) / 2) * -1);
}


/*--------------------------------
	tx内部リンク
--------------------------------*/
.tx {
	position: relative;
	font: normal 1em var(--font_serif);
	margin-left: 28px;
}
.tx::before {
	content: "@";
	position: absolute;
	display: inline-block;
	font: normal 2.5em "fonttitle";
	color: var(--color_sub);
	margin-right: 0.5em;
	top: -20px;
	left: -30px;
}


/*--------------------------------
	Assy
--------------------------------*/
/*[id$="assy"] {
	background: #FFF;
	border-radius: 16px;
	padding: 1rem 4px 2rem;
	margin-bottom: 3rem;
}*/
[id$="assy"] > h3 + span {
	position: relative;
	display: block;
	font-family: serif;
	opacity: 0.7;
	white-space: nowrap;
	margin-bottom: -1rem;
	top: -2.25rem;
	left: 1.25rem;
}
[id$="assy"] > h3 + span + img {
	/*margin-bottom: -1rem;*/
}
[id$="assy"] .red {
	color: var(--color_sub);
}
.buttonlink {
	text-align: center;
}
.buttonlink a {
	display: block;
	box-shadow: 0px 6px 4px -2px rgba(0,0,0,0.3);
	background: linear-gradient(to bottom, #8ECDF7 20%, #177CC0 100%) !important;
	border: 1px solid var(--color_link);
	border-radius: 64px;
	color: #FFF !important;
	text-align: center;
	text-decoration: unset;
	padding: 0.5em 1.5em;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
}
@media screen and (max-width: 599px) {
	.buttonlink a {
		font-size: 0.85em;
		width: 95%;
	}
}
.buttonlink .fas::before,
.buttonlink a::after {
	content: none;
}


/*--------------------------------
	Assy（affiliate）
--------------------------------*/
[id$="assy"] img+span {
	margin-bottom: 2rem;
}
[id$="data"] .column-left span {
	display: inline-block;
	line-height: 1.1 !important;
}
[id$="data"] .column-left span.small {
	opacity: 0.5;
}
[id$="data"] table th {
	width: 24%;
}


/*--------------------------------
	Assy（jobchange）
--------------------------------*/
.jobchange {
	padding: unset;
	margin: unset;
}
.jobchange .column-wrap {
	margin-bottom: 1rem;
}
.jobchange .column-right p:first-child {
	margin-bottom: 1rem;
}
.jobchange table caption {
	font-weight: bold;
	font-family: sans-serif;
	margin-bottom: 0.5em;
}
.jobchange table th {
	font-weight: normal;
	width: 20%;
}
	@media screen and (max-width: 834px) {
	.jobchange .column-left :last-child {
		margin-bottom: unset;
	}
}
@media screen and (max-width: 599px) {
	.jobchange .column-right {
		font-size: initial;
	}
}
.jobchange .column-right > * {
	margin-bottom: 1rem;
}


/*--------------------------------
	Assy
--------------------------------*/
/*3カラムボックスのフロー*/
.flow > div {
	position: relative;
	border: solid 1px var(--color_sub);
	padding: 1rem 2px 0;
	margin: 0 2px;
}
@media screen and (max-width: 480px){
	.flow {
		font-size: 12px;
	}
}
.flow div::before {
	position: absolute;
	background: #FFF;
	color: var(--color_key);
	font-family: serif;
	font-size: 24px;
	font-style: italic;
	top: -24px;
	left: 24px;
	padding-right: 0.2em;
	transform: translateX(-50%);
	z-index: 1;
}
.flow div:nth-of-type(1)::before {content: "1";}
.flow div:nth-of-type(2)::before {content: "2";}
.flow div:nth-of-type(3)::before {content: "3";}


/*--------------------------------
	年号シール（○○年度最新版）
--------------------------------*/
.yearstamp {
	display: inline-block;
	color: #fff;
	background-image: linear-gradient(to right, var(--color_key) 0%, var(--color_key) 5%, #FFF 6%, #FFF 8%, var(--color_key) 9%, #6E6EB7 50%, var(--color_key) 91%, #FFF 92%, #FFF 94%, var(--color_key) 95%, var(--color_key) 100%);
	padding: 0 1.4rem;
	-webkit-transform: skew(-15deg);
	transform: skew(-15deg);
}
/*#yearstamp {
	border: solid 2px var(--color_key);
	border-radius: 8px;
	color: var(--color_key);
	font-size: 1.2em;
	padding: 0.2rem 0.8rem;
	margin: 0.5rem;
}*/



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}