@charset "UTF-8";


/*! http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*! Yaku Han JP (Gothic - Small Amount) v2.0.0 SIL by Qrac / Based on Noto Sans CJK JP */
@font-face {
	font-family: "YakuHanJPs";
  font-style: normal;
  font-weight: 100;
  src: url("../fonts/YakuHanJPs/YakuHanJPs-Thin.eot");
  src: url("../fonts/YakuHanJPs/YakuHanJPs-Thin.woff2") format("woff2"), url("../fonts/YakuHanJPs/YakuHanJPs-Thin.woff") format("woff");
}

@font-face {
	font-family: "YakuHanJPs";
  font-style: normal;
  font-weight: 200;
  src: url("../fonts/YakuHanJPs/YakuHanJPs-Light.eot");
  src: url("../fonts/YakuHanJPs/YakuHanJPs-Light.woff2") format("woff2"), url("../fonts/YakuHanJPs/YakuHanJPs-Light.woff") format("woff");
}

@font-face {
	font-family: "YakuHanJPs";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/YakuHanJPs/YakuHanJPs-DemiLight.eot");
  src: url("../fonts/YakuHanJPs/YakuHanJPs-DemiLight.woff2") format("woff2"), url("../fonts/YakuHanJPs/YakuHanJPs-DemiLight.woff") format("woff");
}

@font-face {
	font-family: "YakuHanJPs";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/YakuHanJPs/YakuHanJPs-Regular.eot");
  src: url("../fonts/YakuHanJPs/YakuHanJPs-Regular.woff2") format("woff2"), url("../fonts/YakuHanJPs/YakuHanJPs-Regular.woff") format("woff");
}

@font-face {
	font-family: "YakuHanJPs";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/YakuHanJPs/YakuHanJPs-Medium.eot");
  src: url("../fonts/YakuHanJPs/YakuHanJPs-Medium.woff2") format("woff2"), url("../fonts/YakuHanJPs/YakuHanJPs-Medium.woff") format("woff");
}

@font-face {
	font-family: "YakuHanJPs";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/YakuHanJPs/YakuHanJPs-Bold.eot");
  src: url("../fonts/YakuHanJPs/YakuHanJPs-Bold.woff2") format("woff2"), url("../fonts/YakuHanJPs/YakuHanJPs-Bold.woff") format("woff");
}

@font-face {
	font-family: "YakuHanJPs";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/YakuHanJPs/YakuHanJPs-Black.eot");
  src: url("../fonts/YakuHanJPs/YakuHanJPs-Black.woff2") format("woff2"), url("../fonts/YakuHanJPs/YakuHanJPs-Black.woff") format("woff");
}

/*--------------------------------------------------------------------------------
	foundation
--------------------------------------------------------------------------------*/
html {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	font-size: 16px;
	visibility: hidden;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html.is-nav-open {
	background: #eee;
}

html.is-ready {
	visibility: visible;
}

html.is-fts-large {
	font-size: 18px;
}

html.is-fts-exception {
	font-size: 20px;
}

html.is-fts-exception.is-fts-large {
	font-size: 22px;
}

body {
	min-width: 1040px;
	margin: auto;
	font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ W6", "Hiragino Kaku Gothic W6", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic W3", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	color: #111;
	overflow-x: hidden;
}

.platform-desktop body.is-out {
	position: absolute;
	left: 0;
	right: 0;
	overflow: hidden;
}

.platform-mobile body.is-out {
	position: fixed;
	left: 0;
	right: 0;
}

.platform-desktop body.is-out.is-nav-open,
  .platform-mobile body.is-out.is-nav-open {
	position: absolute;
	left: 0;
	right: 0;
	height: 100%;
	overflow: hidden;
}

.platform-mobile body[data-namespace^="special-check"] {
	min-height: 100vh;
}

body[data-namespace^="special"] {
	background-color: #ebfcd4;
}

body[data-namespace="special-front"] {
	background-color: #ebfcd4;
}

body[data-namespace^="special-whats"] {
	background-color: #fff6cd;
}

body[data-namespace^="special-how"] {
	background-color: #ffe9e9;
}

body[data-namespace^="special-check"] {
	background-color: #d0f8ff;
}

main {
	display: block;
}

strong {
	font-weight: bold;
}

a {
	color: #2C99DE;
	text-decoration: none;
}

a[href^="tel"] {
	color: #111;
}

@media screen and (max-width: 1040px) {
	body {
		overflow-x: auto;
	}
}

@media screen and (max-width: 736px) {
	html, body {
		position: relative;
		overflow-x: hidden;
	}

	html {
		min-width: 320px;
	}

	html.is-fts-large {
		font-size: 16px;
	}

	html.is-fts-exception {
		font-size: 20px;
	}

	html.is-fts-exception.is-fts-large {
		font-size: 20px;
	}

	body {
		min-width: 320px;
	}

	.platform-mobile body[data-namespace^="special-check"] {
		min-height: 0;
	}
}

@media print {
	body {
		position: relative;
	}
}

/*--------------------------------------------------------------------------------
	header - 特設サイト
--------------------------------------------------------------------------------*/
.l-special-header__body {
	position: relative;
	z-index: 10;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
}

.l-special-header__primary {
	padding: 8px 0 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.l-special-header__primary:after {
	content: '';
	display: table;
	clear: both;
	line-height: 0;
}

.l-special-header__siteroot {
	float: left;
	position: relative;
	z-index: 1;
	width: 152px;
	padding: 5px 0 20px;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.l-special-header__siteroot .c-siteroot > a {
	display: block;
	padding-top: 36.66667%;
	background: url("../svg/logo_full_bg_w.svg") no-repeat;
	background-size: auto 100%;
	-webkit-transition: opacity 250ms;
	-o-transition: opacity 250ms;
	transition: opacity 250ms;
}

.platform-desktop .l-special-header__siteroot .c-siteroot > a:hover {
	opacity: 0.6;
	-webkit-transition: opacity 250ms;
	-o-transition: opacity 250ms;
	transition: opacity 250ms;
}

.l-special-header__util {
	position: relative;
	z-index: 1000;
	float: right;
	letter-spacing: -0.5em;
}

.l-special-header__toMainsite {
	display: inline-block;
	vertical-align: middle;
	letter-spacing: normal;
	margin: 0 15px 0 0;
}

.l-special-header__fontswitcher {
	display: inline-block;
	vertical-align: middle;
	letter-spacing: normal;
}

@media screen and (max-width: 736px) {
	.l-special-header {
		position: relative;
		padding-top: 64px;
	}

	.l-special-header__inner {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		width: auto;
	}

	.l-special-header__primary {
		padding: 14px 10px;
	}

	.l-special-header__siteroot {
		float: left;
		width: 130px;
		padding: 0;
	}

	.l-special-header__util {
		display: none;
	}
}

/*--------------------------------------------------------------------------------
	footer - 特設サイト
--------------------------------------------------------------------------------*/
.l-special-footer {
	position: relative;
	padding: 0 0 48px;
	background: #ebfcd4;
}

.l-special-footer:before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	padding-top: 77px;
}

.l-special-footer .c-siteroot > a {
	display: block;
	padding-top: 36.66667%;
	background: url("../svg/logo_full_bg_w.svg") no-repeat;
	background-size: auto 100%;
	-webkit-transition: opacity 250ms;
	-o-transition: opacity 250ms;
	transition: opacity 250ms;
}

.platform-desktop .l-special-footer .c-siteroot > a:hover {
	opacity: 0.6;
	-webkit-transition: opacity 250ms;
	-o-transition: opacity 250ms;
	transition: opacity 250ms;
}

.l-special-footer__primary {
	margin: 0 auto 22px;
	padding-top: 40px;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
}

.l-special-footer__secondary {
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
}

.l-special-footer__copyright {
	text-align: center;
}

[data-namespace="special-front"] .l-special-footer .l-special-footer__primary,
  [data-namespace="special-more"] .l-special-footer .l-special-footer__primary,
  [data-namespace="special-check-front"] .l-special-footer .l-special-footer__primary {
	border-top: 2px solid #2C99DE;
}

@media screen and (max-width: 736px) {
	.l-special-footer {
		margin-top: -2px;
		padding: 0;
		background: #fff;
	}

	.l-special-footer__primary {
		margin: 0 auto;
		padding: 0;
		border-top: 2px solid #2C99DE;
	}

	.l-special-footer__backtotop {
		margin-bottom: -1px;
		padding: 0 14px;
		background: #2C99DE;
	}

	.l-special-footer__backtotop .c-backtotop {
		position: relative;
		z-index: 10;
	}

	.l-special-footer__copyright {
		padding: 15px 14px;
		text-align: left;
	}
}

/*--------------------------------------------------------------------------------
	main structure - 特設サイト
--------------------------------------------------------------------------------*/
[data-namespace^="special"] .l-special-container {
	position: relative;
	margin-top: -124px;
	padding-top: 124px;
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: auto 75px;
}

[data-namespace^="special-whats"] .l-special-container {
	background-image: url(../img/special/bg_town_yellow.png);
}

[data-namespace^="special-how"] .l-special-container {
	background-image: url(../img/special/bg_town_red.png);
}

[data-namespace^="special-check"] .l-special-container {
	background-image: url(../img/special/bg_cloud.png), url(../img/special/bg_town_blue.png);
	background-position: center top, center bottom;
	background-repeat: no-repeat, repeat-x;
	background-size: auto 277px, auto 75px;
}

[data-namespace="special-check-front"] .l-special-container {
	background-image: url(../img/special/bg_cloud.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: auto 277px;
}

[data-namespace="special-check-front"] .l-special-container:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin-top: 600px;
	background: #ebfcd4;
}

[data-namespace="special-check-front"] .l-special-container:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin-top: 600px;
	padding-top: 75px;
	background: url(../img/special/bg_town_blue.png) repeat-x center bottom;
	background-size: auto 75px;
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-100%);
}

[data-namespace="special-check-front"] .l-special-container .l-structure {
	position: relative;
	z-index: 1;
}

[data-namespace^="special-check"] {
	height: 100vh;
}

[data-namespace^="special-check"] .l-special-container {
	min-height: calc(100% - 170px);
	min-height: -webkit-calc(100% - 170px);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

@media screen and (max-width: 736px) {
	[data-namespace^="special"] .l-special-container {
		margin-top: -63px;
		padding-top: 63px;
		background-size: auto 62px;
	}

	[data-namespace^="special"] .l-special-container:before {
		content: none;
		display: none;
	}

	[data-namespace="special-front"] .l-special-container {
		border-bottom: none;
	}

	[data-namespace^="special-check"] .l-special-container {
		background-image: url(../img/special/bg_town_blue.png);
		background-position: center bottom;
		background-repeat: repeat-x;
		background-size: auto 62px;
	}

	[data-namespace="special-check-front"] .l-special-container {
		background-image: none;
	}

	[data-namespace="special-check-front"] .l-special-container:after {
		top: auto;
		margin-top: 0;
		padding-top: 100px;
		background: #ebfcd4;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}

	[data-namespace^="special-check"] {
		height: auto;
	}

	[data-namespace^="special-check"] .l-special-container {
		min-height: 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
}

@media print {
	.trident [data-namespace^="special"] {
		background: none;
	}

	.trident [data-namespace^="special"] .l-structure__inner {
		display: block;
	}

	.trident [data-namespace^="special"] .l-main.is-fix-1000 {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
	}

	.trident [data-namespace="special-front"] .l-special-container,
  .trident [data-namespace="special-more"] .l-special-container {
		background-color: #ebfcd4;
	}

	.trident [data-namespace^="special-whats"] .l-special-container {
		background-color: #fff6cd;
	}

	.trident [data-namespace^="special-how"] .l-special-container {
		background-color: #ffe9e9;
	}

	.trident [data-namespace^="special-check"] {
		height: auto;
	}

	.trident [data-namespace^="special-check"] .l-special-container {
		min-height: 0;
		background-color: #d0f8ff;
	}
}

/*--------------------------------------------------------------------------------
	nav - 特設サイト
--------------------------------------------------------------------------------*/
.l-special-nav__toggle {
	display: none;
}

.l-special-nav__close {
	display: none;
}

.l-special-nav__close > a {
	display: block;
	padding: 22px 20px;
	text-align: right;
	font-size: 17px;
	font-size: 1.0625rem;
	line-height: 1;
	color: #111;
}

.l-special-nav__close > a i {
	margin: 0 0 0 6px;
	font-size: 14px;
	color: #2C99DE;
}

@media screen and (max-width: 736px) {
	.l-special-nav__toggle {
		display: block;
		position: absolute;
		top: 14px;
		right: 10px;
		width: 84px;
		height: 36px;
	}

	.l-special-nav__toggle > a {
		display: block;
		height: 100%;
		padding: 12px 0;
		color: #fff;
		font-weight: bold;
		font-size: 13px;
		font-size: 0.8125rem;
		line-height: 1;
		background: #76b027;
		border-radius: 4px;
		text-align: center;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-transition: background 250ms, color 250ms;
		-o-transition: background 250ms, color 250ms;
		transition: background 250ms, color 250ms;
	}

	.l-special-nav__toggle > a:after {
		content: '\0030e1\0030cb\0030e5\0030fc';
	}

	.platform-desktop .l-special-nav__toggle > a:hover {
		color: #111;
		background: #FFF9AA;
		-webkit-transition: background 250ms, color 250ms;
		-o-transition: background 250ms, color 250ms;
		transition: background 250ms, color 250ms;
	}

	.l-special-nav__toggle i {
		margin: 0 3px 0 0;
		padding: 2px;
		font-size: 12px;
	}

	.l-special-nav__toggle i:before {
		content: '\e917';
		display: inline-block;
	}

	.l-special-nav__toggle.is-active > a {
		background: #FFF9AA;
		color: #111;
	}

	.l-special-nav__toggle.is-active > a:after {
		content: '\009589\003058\00308b';
	}

	.l-special-nav__toggle.is-active i {
		color: #2C99DE;
	}

	.l-special-nav__toggle.is-active i:before {
		content: '\e916';
	}

	.l-special-nav__body {
		display: none;
		background: #eee;
		border-top: 2px solid #2C99DE;
	}

	.l-special-nav__close {
		display: block;
	}
}

/*--------------------------------------------------------------------------------
	localnav - 特設サイト
--------------------------------------------------------------------------------*/
.l-special-localnav {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.l-special-localnav__item {
	border-radius: 4px;
	background: #fff;
	-webkit-box-shadow: 0px 4px 0px -1px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 4px 0px -1px rgba(0, 0, 0, 0.2);
}

.l-special-localnav__item > a {
	position: relative;
	display: block;
	height: 0;
	padding-top: 50px;
	color: #111;
	text-align: center;
}

.l-special-localnav__item > a:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 0;
	margin: 3px;
	background: transparent;
	border-radius: 2px;
}

.l-special-localnav__item > a:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 1;
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 35px;
}

.platform-desktop .l-special-localnav__item > a:hover:before, .l-special-localnav__item > a.is-current:before {
	background: #FFF9AA;
	-webkit-transition: background 250ms;
	-o-transition: background 250ms;
	transition: background 250ms;
}

.l-special-localnav__item[data-index="0"] {
	width: 140px;
}

.l-special-localnav__item[data-index="0"] > a:after {
	background-image: url(../img/special/bg_localnav_01.png);
}

.l-special-localnav__item[data-index="1"] {
	width: 180px;
}

.l-special-localnav__item[data-index="1"] > a:after {
	background-image: url(../img/special/bg_localnav_02.png);
}

.l-special-localnav__item[data-index="2"] {
	width: 250px;
}

.l-special-localnav__item[data-index="2"] > a:after {
	background-image: url(../img/special/bg_localnav_03.png);
}

.l-special-localnav__item[data-index="3"] {
	width: 200px;
}

.l-special-localnav__item[data-index="3"] > a:after {
	background-image: url(../img/special/bg_localnav_05.png);
}

.l-special-localnav__item[data-index="4"] {
	width: 190px;
}

.l-special-localnav__item[data-index="4"] > a:after {
	background-image: url(../img/special/bg_localnav_04.png);
}

@media screen and (max-width: 736px) {
	.l-special-localnav {
		display: block;
	}

	.l-special-localnav__item {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		border-radius: 0;
		width: auto !important;
		background: #fff;
		-webkit-box-shadow: none;
		box-shadow: none;
		border-bottom: 1px solid #ddd;
	}

	.l-special-localnav__item > a {
		position: relative;
		display: block;
		height: 0;
		padding-top: 70px;
		color: #111;
		text-align: center;
	}

	.l-special-localnav__item > a:after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 1;
	}
}

.l-special-localnav-logo__inner {
	max-width: 165px;
	margin: 50px auto 20px;
}

@media screen and (max-width: 736px) {
	.l-special-localnav-logo__inner {
		max-width: 180px;
		margin: 20px auto 0;
	}
}

/*--------------------------------------------------------------------------------
	breadcrumbs
--------------------------------------------------------------------------------*/
.l-breadcrumbs {
	position: relative;
	padding: 24px 0 0;
}

.l-breadcrumbs__inner {
	max-width: 1000px;
	margin: 0 auto;
}

[data-namespace*="special"] .l-breadcrumbs {
	z-index: 1;
}

@media screen and (max-width: 736px) {
	.l-breadcrumbs {
		display: none;
	}
}

/*--------------------------------------------------------------------------------
	main structure
--------------------------------------------------------------------------------*/
.l-structure {
	position: relative;
	overflow: hidden;
}

.l-structure__inner {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 1000px;
	margin: 0 auto;
}

.l-structure--full .l-structure__inner {
	width: auto;
}

.l-structure--layoutA .l-structure__inner {
	padding: 0 0 50px;
}

.l-structure--layoutB .l-structure__inner {
	padding: 30px 0 80px;
}

.l-structure--layoutC .l-structure__inner {
	padding: 30px 0 114px;
}

.l-structure--layoutD .l-structure__inner {
	padding: 30px 0 75px;
}

.l-main {
	display: block;
	-webkit-box-flex: 1;
	-webkit-flex: 1 0 auto;
	-ms-flex: 1 0 auto;
	flex: 1 0 auto;
	-webkit-box-ordinal-group: 3;
	-webkit-order: 2;
	-ms-flex-order: 2;
	order: 2;
}

.l-main.is-fix-1000 {
	-webkit-box-flex: 1;
	-webkit-flex: 1 0 1000px;
	-ms-flex: 1 0 1000px;
	flex: 1 0 1000px;
}

.l-main.is-fix-720 {
	-webkit-box-flex: 1;
	-webkit-flex: 1 0 720px;
	-ms-flex: 1 0 720px;
	flex: 1 0 720px;
}

.l-article > *:last-child {
	margin-bottom: 0 !important;
}

.is-fts-exception .l-article [class*="c-"]:not(h1):not(h2):not(h3):not([class*="c-contactbanner"]) {
	font-size: 17px;
	font-size: 1.0625rem;
	line-height: 1.8;
}

.l-form > *:last-child {
	margin-bottom: 0 !important;
}

.l-banners {
	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	-webkit-box-ordinal-group: 4;
	-webkit-order: 3;
	-ms-flex-order: 3;
	order: 3;
	width: 100%;
	margin: 60px auto -30px;
}

.l-banners__container:not(:last-of-type) {
	margin: 0 auto 30px;
}

@media screen and (max-width: 1040px) {
	.l-structure__inner {
		width: auto;
	}

	.l-structure--full .l-structure__inner {
		width: auto;
	}

	.l-structure--layoutA .l-structure__inner, .l-structure--layoutB .l-structure__inner, .l-structure--layoutC .l-structure__inner, .l-structure--layoutD .l-structure__inner {
		padding-right: 20px;
		padding-left: 20px;
	}
}

@media screen and (max-width: 736px) {
	.l-structure__inner {
		display: block;
		padding: 0 14px;
	}

	.l-structure--layoutA .l-structure__inner, .l-structure--layoutB .l-structure__inner {
		padding: 0 14px 40px;
	}

	.l-structure--layoutC .l-structure__inner {
		padding: 0 14px 100px;
	}

	.l-structure--layoutD .l-structure__inner {
		padding: 0 14px 75px;
	}

	.l-main {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
	}

	.is-fts-exception .l-article [class*="c-"]:not(h1):not(h2):not(h3):not([class*="c-contactbanner"]) {
		font-size: 15px;
		font-size: 0.9375rem;
		line-height: 1.8;
	}

	.l-banners {
		width: auto;
		margin: 40px auto 0;
	}

	.l-banners__container:not(:last-of-type) {
		margin: 0 auto 40px;
	}
}

/*--------------------------------------------------------------------------------
	下層ページ用 レイアウトモジュール - カラム
--------------------------------------------------------------------------------*/
.l-columns {
	margin: 0 auto 60px;
	overflow: hidden;
}

.l-columns--twoUp .l-columns__inner {
	margin: 0 -20px -60px;
}

.l-columns--twoUp .l-columns__item {
	width: calc(50% - 40px);
	width: -webkit-calc(50% - 40px);
	margin: 0 20px 60px;
}

.l-columns__inner {
	overflow: hidden;
	letter-spacing: -0.5em;
}

.l-columns__item {
	display: inline-block;
	vertical-align: top;
	letter-spacing: normal;
}

.l-columns__item > *:first-child {
	margin-top: 10px;
}

.l-columns__item > *:last-child,
    .l-columns__item > a > *:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 736px) {
	.l-columns {
		margin: 30px auto 40px;
		overflow: hidden;
	}

	.l-columns--twoUp .l-columns__inner {
		margin: 0 -20px -60px;
	}

	.l-columns--twoUp .l-columns__item {
		width: calc(50% - 40px);
		width: -webkit-calc(50% - 40px);
		margin: 0 20px 60px;
	}

	.l-columns__inner {
		margin: 0 auto !important;
		letter-spacing: normal;
	}

	.l-columns__item {
		display: block;
		width: auto !important;
		margin: 0 auto 40px !important;
	}

	.l-columns__item:last-of-type {
		margin-bottom: 0 !important;
	}
}

/*---------------------------------------------------
	grid - gap 20/40
-----------------------------------------------------*/
.l-grid {
	margin: 0 auto 40px;
	overflow: hidden;
}

.l-grid--full {
    /*** fix to component ***/
}

.l-grid--full.l-grid--photolinkD .l-grid__inner {
	margin: 0 auto -14px;
}

.l-grid--full.l-grid--photolinkD .l-grid__item {
	display: block;
	width: auto;
	margin: 0 auto 14px;
}

#kss-node .l-grid--full.l-grid--photolinkD {
	max-width: 720px;
	margin: 0;
}

.l-grid--full.l-grid--photolinkE .l-grid__inner {
	margin: 0 auto -14px;
}

.l-grid--full.l-grid--photolinkE .l-grid__item {
	display: block;
	width: auto;
	margin: 0 auto 14px;
}

#kss-node .l-grid--full.l-grid--photolinkE {
	max-width: 720px;
	margin: 0;
}

.l-grid--twoUp {
    /*** fix to component ***/
}

.l-grid--twoUp.l-grid--gap40 .l-grid__inner {
	margin: 0 -20px -40px;
}

.l-grid--twoUp.l-grid--gap40 .l-grid__item {
	width: calc(50% - 40px);
	width: -webkit-calc(50% - 40px);
	margin: 0 20px 40px;
}

.l-grid--twoUp.l-grid--gap20 .l-grid__inner {
	margin: 0 -10px -20px;
}

.l-grid--twoUp.l-grid--gap20 .l-grid__item {
	width: calc(50% - 20px);
	width: -webkit-calc(50% - 20px);
	margin: 0 10px 20px;
}

.l-grid--twoUp.l-grid--gap20-10 .l-grid__inner {
	margin: 0 -10px -10px;
}

.l-grid--twoUp.l-grid--gap20-10 .l-grid__item {
	width: calc(50% - 20px);
	width: -webkit-calc(50% - 20px);
	margin: 0 10px 10px;
}

.l-grid--twoUp.l-grid--gap40-20 .l-grid__inner {
	margin: 0 -20px -20px;
}

.l-grid--twoUp.l-grid--gap40-20 .l-grid__item {
	width: calc(50% - 40px);
	width: -webkit-calc(50% - 40px);
	margin: 0 20px 20px;
}

.l-grid--twoUp.l-grid--photolink .l-grid__inner {
	margin: 0 -20px -40px;
}

.l-grid--twoUp.l-grid--photolink .l-grid__item {
	width: calc(50% - 40px);
	width: -webkit-calc(50% - 40px);
	margin: 0 20px 40px;
}

#kss-node .l-grid--twoUp.l-grid--photolink {
	max-width: 1000px;
	margin: 0;
}

.l-grid--twoUp.l-grid--photolinkB .l-grid__inner {
	margin: 0 -10px -20px;
}

.l-grid--twoUp.l-grid--photolinkB .l-grid__item {
	width: calc(50% - 20px);
	width: -webkit-calc(50% - 20px);
	margin: 0 10px 20px;
}

#kss-node .l-grid--twoUp.l-grid--photolinkB {
	max-width: 1000px;
	margin: 0;
}

.l-grid--twoUp.l-grid--photolinkC .l-grid__inner {
	margin: 0 -20px -40px;
}

.l-grid--twoUp.l-grid--photolinkC .l-grid__item {
	width: calc(50% - 40px);
	width: -webkit-calc(50% - 40px);
	margin: 0 20px 40px;
}

#kss-node .l-grid--twoUp.l-grid--photolinkC {
	max-width: 1000px;
	margin: 0;
}

.l-grid--twoUp.l-grid--photolinkF .l-grid__inner {
	margin: 0 -10px -40px;
}

.l-grid--twoUp.l-grid--photolinkF .l-grid__item {
	width: calc(50% - 20px);
	width: -webkit-calc(50% - 20px);
	margin: 0 10px 40px;
}

#kss-node .l-grid--twoUp.l-grid--photolinkF {
	max-width: 720px;
	margin: 0;
}

.l-grid--twoUp.l-grid--photolinkG {
	margin-bottom: 0;
}

.l-grid--twoUp.l-grid--photolinkG .l-grid__inner {
	margin: 0 -15px -28px;
}

.l-grid--twoUp.l-grid--photolinkG .l-grid__item {
	width: calc(50% - 30px);
	width: -webkit-calc(50% - 30px);
	margin: 0 15px 30px;
}

#kss-node .l-grid--twoUp.l-grid--photolinkG {
	max-width: 886px;
	margin: 0;
}

.l-grid--twoUp.l-grid--button .l-grid__inner {
	margin: 0 -10px -20px;
}

.l-grid--twoUp.l-grid--button .l-grid__item {
	width: calc(50% - 20px);
	width: -webkit-calc(50% - 20px);
	margin: 0 10px 20px;
}

.l-grid--twoUp.l-grid--button .l-grid__notes {
	margin-top: 20px;
}

.l-grid--twoUp.l-grid--buttonB .l-grid__inner, .l-grid--twoUp.l-grid--buttonC .l-grid__inner {
	margin: 0 -20px -20px;
}

.l-grid--twoUp.l-grid--buttonB .l-grid__item, .l-grid--twoUp.l-grid--buttonC .l-grid__item {
	width: calc(50% - 40px);
	width: -webkit-calc(50% - 40px);
	margin: 0 20px 20px;
}

.l-grid--threeUp.l-grid--buttonB .l-grid__inner, .l-grid--threeUp.l-grid--buttonC .l-grid__inner {
	margin: 0 -10px -20px;
}

.l-grid--threeUp.l-grid--buttonB .l-grid__item, .l-grid--threeUp.l-grid--buttonC .l-grid__item {
	width: calc(33.33% - 20px);
	width: -webkit-calc(33.33% - 20px);
	margin: 0 10px 20px;
}

.l-grid--threeUp.l-grid--card .l-grid__inner {
	margin: 0 -10px -60px;
}

.l-grid--threeUp.l-grid--card .l-grid__item {
	width: calc(33.33% - 20px);
	width: -webkit-calc(33.33% - 20px);
	margin: 0 10px 60px;
}

.l-grid--fourUp {
    /*** fix to component ***/
}

.l-grid--fourUp.l-grid--gap40 .l-grid__inner {
	margin: 0 -20px -40px;
}

.l-grid--fourUp.l-grid--gap40 .l-grid__item {
	width: calc(25% - 40px);
	width: -webkit-calc(25% - 40px);
	margin: 0 20px 40px;
}

.l-grid--fourUp.l-grid--gap20 .l-grid__inner {
	margin: 0 -10px -20px;
}

.l-grid--fourUp.l-grid--gap20 .l-grid__item {
	width: calc(25% - 20px);
	width: -webkit-calc(25% - 20px);
	margin: 0 10px 20px;
}

.l-grid--fourUp.l-grid--pictorial-dlist .l-grid__inner {
	margin: 0 -20px -40px;
}

.l-grid--fourUp.l-grid--pictorial-dlist .l-grid__item {
	width: calc(25% - 40px);
	width: -webkit-calc(25% - 40px);
	margin: 0 20px 40px;
}

#kss-node .l-grid--fourUp.l-grid--pictorial-dlist {
	max-width: 720px;
}

.l-grid--fiveUp.l-grid--pictorial-dlist .l-grid__inner {
	margin: 0 -20px -40px;
}

.l-grid--fiveUp.l-grid--pictorial-dlist .l-grid__item {
	width: calc(20% - 40px);
	width: -webkit-calc(20% - 40px);
	margin: 0 20px 40px;
}

#kss-node .l-grid--fiveUp.l-grid--pictorial-dlist {
	max-width: 720px;
}

.l-grid__inner {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	overflow: hidden;
}

.l-grid__item {
	-webkit-align-self: stretch;
	-ms-flex-item-align: stretch;
	align-self: stretch;
}

.l-grid__item > p {
	height: 100%;
}

.l-grid__item > p > [class*="c-button"] {
	height: 100%;
}

.l-grid__item > [class*="c-button"] {
	height: 100%;
}

.l-grid__lead {
	margin: 0 auto 20px;
}

@media screen and (max-width: 736px) {
	.l-grid {
		margin: 0 auto 30px;
    /*** fix to component ***/
	}

	.l-grid--onMobileCollapse .l-grid__item {
		margin-bottom: 0 !important;
	}

	.l-grid--onMobileGap30 .l-grid__item {
		margin-bottom: 30px !important;
	}

	.l-grid--photolinkC .l-grid__item, .l-grid--photolinkF .l-grid__item {
		margin-bottom: 30px !important;
	}

	.l-grid--photolinkG {
		overflow: visible;
	}

	.l-grid--photolinkG .l-grid__inner {
		overflow: visible;
	}

	.l-grid--photolinkG .l-grid__item {
		margin: 0 auto 17px !important;
	}

	.l-grid--pictorial-dlist .l-grid__item {
		margin-bottom: 0 !important;
	}

	.l-grid--card .l-grid__item {
		margin-bottom: 40px !important;
	}

	.l-grid__inner {
		display: block;
		margin: 0 auto !important;
		letter-spacing: normal;
	}

	.l-grid__item {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		display: block;
		width: auto !important;
		margin: 0 auto 10px !important;
	}

	.l-grid__item:last-of-type {
		margin-bottom: 0 !important;
	}

	.l-grid__item > p {
		height: auto;
	}

	.l-grid__item > p > [class*="c-button"] {
		height: auto;
	}

	.l-grid__item > [class*="c-button"] {
		height: auto;
	}

	.l-grid__notes {
		margin-top: 10px !important;
	}
}

/*--------------------------------------------------------------------------------
	header siteroot
--------------------------------------------------------------------------------*/
.c-siteroot > a {
	display: block;
	padding-top: 27.1%;
	background: url("../svg/logo_full.svg") no-repeat;
	background-size: auto 100%;
	-webkit-transition: opacity 250ms;
	-o-transition: opacity 250ms;
	transition: opacity 250ms;
}

.platform-desktop .c-siteroot > a:hover {
	opacity: 0.6;
	-webkit-transition: opacity 250ms;
	-o-transition: opacity 250ms;
	transition: opacity 250ms;
}

@media screen and (max-width: 736px) {
	.c-siteroot {
		-webkit-transition: none !important;
		-o-transition: none !important;
		transition: none !important;
		-webkit-transform: none !important;
		-ms-transform: none !important;
		transform: none !important;
	}
}

@media print {
	.trident .c-siteroot > a {
		background: url("../img/print/logo.png") no-repeat;
		background-size: auto 100%;
	}
}

/*--------------------------------------------------------------------------------
	header font-switcher
--------------------------------------------------------------------------------*/
.c-fontswitcher {
	min-width: 140px;
	height: 32px;
}

.is-shrink-transition .c-fontswitcher {
	-webkit-transition: opacity 250ms;
	-o-transition: opacity 250ms;
	transition: opacity 250ms;
}

.is-shrink-out .c-fontswitcher {
	opacity: 0;
}

.is-shrink-out.is-shrink-in .c-fontswitcher {
	display: none;
}

.c-fontswitcher > a {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 8px 5px;
	height: 100%;
	color: #fff;
	background: #576876;
	text-align: center;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1;
	border-radius: 4px;
	border: 1px solid #576876;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: background 250ms, color 250ms;
	-o-transition: background 250ms, color 250ms;
	transition: background 250ms, color 250ms;
}

.c-fontswitcher > a i {
	display: inline-block;
	vertical-align: middle;
	margin: 0 5px 0 0;
	padding: 2px;
	font-size: 12px;
}

.c-fontswitcher > a i:before {
	content: '\e914';
}

.c-fontswitcher > a:after {
	content: '\006587\005b57\003092\005927\00304d\00304f';
	font-weight: bold;
}

.c-fontswitcher > a:hover {
	background: #fff;
	color: #576876;
	-webkit-transition: background 250ms, color 250ms;
	-o-transition: background 250ms, color 250ms;
	transition: background 250ms, color 250ms;
}

.c-fontswitcher > a.is-active i:before {
	content: '\e912';
}

.c-fontswitcher > a.is-active:after {
	content: '\006587\005b57\003092\00623b\003059';
}

@media print {
	.trident .c-fontswitcher > a {
		display: block;
	}

	.trident .c-fontswitcher > a i {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
	}

	.trident .c-fontswitcher > a:after {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		display: inline-block;
		vertical-align: middle;
	}

	.is-shrink-out.is-shrink-in .c-fontswitcher {
		display: block;
		opacity: 1;
	}
}

/*--------------------------------------------------------------------------------
	footer back-to-top
--------------------------------------------------------------------------------*/
.c-backtotop {
	width: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.c-backtotop.is-stuck {
	-webkit-transform: none !important;
	-ms-transform: none !important;
	transform: none !important;
}

.c-backtotop.is-stuck .c-backtotop__body {
	position: fixed;
	bottom: 15px;
	right: 15px;
}

.is-out .c-backtotop {
	display: none;
}

.c-backtotop.is-active .c-backtotop__body > a {
	opacity: 1;
	-webkit-transition: opacity 250ms;
	-o-transition: opacity 250ms;
	transition: opacity 250ms;
}

.c-backtotop__inner {
	position: relative;
	margin: 0;
	text-align: right;
}

.c-backtotop__body {
	position: absolute;
	bottom: 15px;
	right: 15px;
	display: inline-block;
	vertical-align: bottom;
	width: 60px;
	height: 60px;
	z-index: 100;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.c-backtotop__body > a {
	position: relative;
	display: block;
	height: 100%;
	background: #2C99DE;
	border-radius: 50%;
	opacity: 0;
	-webkit-transition: background 250ms, opacity 250ms;
	-o-transition: background 250ms, opacity 250ms;
	transition: background 250ms, opacity 250ms;
}

.platform-desktop .c-backtotop__body > a:hover {
	background: #32A7F2;
	-webkit-transition: background 250ms;
	-o-transition: background 250ms;
	transition: background 250ms;
}

.c-backtotop__body > a i {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	width: 20px;
	height: 20px;
	margin: auto;
	font-size: 20px;
	color: #fff;
	-webkit-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

.c-backtotop__body > a span {
	display: block;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

@media screen and (max-width: 736px) {
	.c-backtotop {
		position: static;
		width: auto;
		height: 1px;
		margin: 0 -14px;
		background: transparent;
	}

	.c-backtotop.is-stuck .c-backtotop__body {
		bottom: 5px;
		right: 5px;
	}

	.c-backtotop__body {
		bottom: 5px;
		right: 5px;
	}

	[data-namespace^="special"] .c-backtotop__body {
		bottom: 10px;
	}

	.c-backtotop__body > a {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

/*--------------------------------------------------------------------------------
	footer copyright
--------------------------------------------------------------------------------*/
.c-copyright {
	font-size: 11px;
	line-height: 1;
}

.c-copyright span:not([class^="u-"]) {
	display: inline-block;
	vertical-align: bottom;
	height: 11px;
	margin: 0 5px 0 0;
	font-size: 16px;
	line-height: 11px;
}

@media screen and (max-width: 736px) {
	.c-copyright {
		font-size: 10px;
		line-height: 1.4;
	}

	.c-copyright small {
		display: block;
		margin-right: -2em;
		-webkit-transform-origin: 0 0;
		-ms-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scale(0.9);
		-ms-transform: scale(0.9);
		transform: scale(0.9);
	}

	.c-copyright span:not([class^="u-"]) {
		vertical-align: baseline;
		height: auto;
		font-size: 13px;
		line-height: normal;
		-webkit-transform: translateY(2px);
		-ms-transform: translateY(2px);
		transform: translateY(2px);
	}
}

/*--------------------------------------------------------------------------------
	breadcrumbs
--------------------------------------------------------------------------------*/
.c-breadcrumbs__item {
	display: inline;
	vertical-align: middle;
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1;
}

.c-breadcrumbs__item:not(:last-of-type):after {
	content: '>';
	margin: 0 5px;
}

.c-breadcrumbs__item a {
	color: #111;
}

.c-breadcrumbs__item a:hover {
	color: #2C99DE;
	-webkit-transition: color 250ms;
	-o-transition: color 250ms;
	transition: color 250ms;
}

.c-breadcrumbs__item span {
	font-weight: bold;
}

.c-button, .c-buttonB, .c-buttonC, .c-buttonD, .c-buttonE {
	display: inline-block;
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #111;
	padding: 8px 14px;
	border: 1px solid #ccc;
	background: none;
	text-align: left;
	letter-spacing: -0.5em;
	border-radius: 4px;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: border-color 250ms, color 250ms;
	-o-transition: border-color 250ms, color 250ms;
	transition: border-color 250ms, color 250ms;
}

.c-button i, .c-buttonB i, .c-buttonC i, .c-buttonD i, .c-buttonE i {
	vertical-align: middle;
	margin: 0 8px 0 0;
	font-size: 16px;
	vertical-align: middle;
	letter-spacing: normal;
	color: #2C99DE;
}

.c-button > span, .c-buttonB > span, .c-buttonC > span, .c-buttonD > span, .c-buttonE > span {
	vertical-align: middle;
	letter-spacing: normal;
}

.platform-desktop .c-button:hover, .platform-desktop .c-buttonB:hover, .platform-desktop .c-buttonC:hover, .platform-desktop .c-buttonD:hover, .platform-desktop .c-buttonE:hover {
	border-color: #2C99DE;
	color: #2C99DE;
	-webkit-transition: border-color 250ms, color 250ms;
	-o-transition: border-color 250ms, color 250ms;
	transition: border-color 250ms, color 250ms;
}

.c-button[disabled], .c-buttonB[disabled], .c-buttonC[disabled], .c-buttonD[disabled], .c-buttonE[disabled] {
	background: #bcbcbc !important;
	border-color: #bcbcbc !important;
	cursor: not-allowed !important;
}

.c-button[disabled]:hover, .c-buttonB[disabled]:hover, .c-buttonC[disabled]:hover, .c-buttonD[disabled]:hover, .c-buttonE[disabled]:hover {
	background: #bcbcbc !important;
	border-color: #bcbcbc !important;
	-webkit-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}

/*
タイプA

ボタン幅はテキスト量に依存します。a要素でもbutton要素でも使用可能です。<br>
モディファイアは複数組み合わせて使用することもできます。

Markup:
<a href="" class="c-button {{modifier_class}}">
	<i class="c-icon--arrowCircle"></i><span>ボタン</span>
</a>

c-button--xl - 文字サイズ 19px
c-button--lg - 文字サイズ 17px
c-button--md - 文字サイズ 15px
c-button--sm - 文字サイズ 13px
c-button--fill - 背景色あり

Styleguide 3.1
*/
/*
モバイル時にテキスト省略

モバイルサイズでテキストを「詳しく見る」に変更することができます。<br>
主に多めのテキスト量のあるボタンに使用します。

Markup:
<a href="" class="c-button c-button--md c-button--onMobileEllip">
	<i class="c-icon--arrowCircle"></i><span>長めのテキストが入ります長めのテキストが入ります</span>
</a>

Styleguide 3.1.1
*/
.c-button--xl {
	padding: 12px 14px;
	font-size: 19px;
	font-size: 1.1875rem;
	line-height: 1.5;
}

.c-button--lg {
	padding: 10px 14px;
	font-size: 17px;
	font-size: 1.0625rem;
	line-height: 1.5;
}

.c-button--md {
	padding: 8px 14px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.c-button--sm {
	padding: 5px 14px;
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.c-button--fill {
	background: #2C99DE;
	color: #fff;
	border-color: #2C99DE;
	-webkit-transition: background 250ms;
	-o-transition: background 250ms;
	transition: background 250ms;
}

.c-button--fill i {
	color: #fff;
}

.platform-desktop .c-button--fill:hover {
	background: #32A7F2;
	border-color: #32A7F2;
	color: #fff;
	-webkit-transition: background 250ms;
	-o-transition: background 250ms;
	transition: background 250ms;
}

.c-button--full {
	display: block;
	max-width: 450px;
	margin: 0 auto;
}

.c-paragraph + .c-button, .c-paragraph--alignRight + .c-button, .c-paragraph--imageBordered + .c-button {
	display: table;
	margin-top: -20px;
}

button.c-button {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 736px) {
	.c-button {
		display: inline-table;
		overflow: hidden;
	}

	.c-button i {
		display: table-cell;
		vertical-align: top;
		padding-top: 0.1em;
	}

	.c-button > span {
		display: table-cell;
		vertical-align: top;
		padding-left: 8px;
	}

	.c-paragraph + .c-button, .c-paragraph--alignRight + .c-button, .c-paragraph--imageBordered + .c-button {
		margin-top: -15px;
	}

	.c-button--onMobileEllip > span {
		display: none !important;
	}

	.c-button--onMobileEllip:after {
		content: '\008a73\003057\00304f\00898b\00308b';
		vertical-align: middle;
		letter-spacing: normal;
		margin-left: 8px;
	}

	.c-button--xl i {
		padding-top: 0.35em;
	}

	.c-button--lg i {
		padding-top: 0.3em;
	}

	.c-button--md i {
		padding-top: 0.25em;
	}

	.c-button--sm i {
		padding-top: 0.15em;
	}
}

/*
タイプB

ボタン幅は親要素のサイズに依存します。<br>
汎用タイプ同様、モディファイアは複数組み合わせて使用することもできます。

Markup:
<a href="" class="c-buttonB {{modifier_class}}">
	<i class="c-icon--arrowCircle"></i><span>ボタン</span>
</a>

c-buttonB--xl - 文字サイズ 19px
c-buttonB--lg - 文字サイズ 17px
c-buttonB--md - 文字サイズ 15px
c-buttonB--sm - 文字サイズ 13px
c-buttonB--fill - 背景色あり

Styleguide 3.2
*/
.c-buttonB {
	display: block;
	max-width: 450px;
	margin: 0 auto;
	padding: 12px 40px;
	font-size: 19px;
	font-size: 1.1875rem;
	line-height: 1.5;
	text-align: left;
}

.c-buttonB--xl {
	padding: 12px 14px;
	font-size: 19px;
	font-size: 1.1875rem;
	line-height: 1.5;
}

.c-buttonB--xl.c-buttonB--hasNotes {
	padding: 19px 14px;
}

.c-buttonB--xl.c-buttonB--hasNotes i {
	line-height: 1.5 !important;
}

.c-buttonB--lg {
	padding: 10px 14px;
	font-size: 17px;
	font-size: 1.0625rem;
	line-height: 1.5;
}

.c-buttonB--lg.c-buttonB--hasNotes {
	padding: 17px 14px;
}

.c-buttonB--lg.c-buttonB--hasNotes i {
	line-height: 1.5 !important;
}

.c-buttonB--md {
	padding: 9px 14px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.c-buttonB--md.c-buttonB--hasNotes {
	padding: 16px 14px;
}

.c-buttonB--md.c-buttonB--hasNotes i {
	line-height: 0.66667 !important;
}

.c-buttonB--sm {
	padding: 5px 14px;
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.c-buttonB--sm.c-buttonB--hasNotes {
	padding: 12px 14px;
}

.c-buttonB--sm.c-buttonB--hasNotes i {
	line-height: 1.5 !important;
}

.c-buttonB--fill {
	background: #2C99DE;
	color: #fff;
	border-color: #2C99DE;
	-webkit-transition: background 250ms;
	-o-transition: background 250ms;
	transition: background 250ms;
}

.c-buttonB--fill i {
	color: #fff;
}

.platform-desktop .c-buttonB--fill:hover {
	background: #32A7F2;
	border-color: #32A7F2;
	color: #fff;
	-webkit-transition: background 250ms;
	-o-transition: background 250ms;
	transition: background 250ms;
}

.c-buttonB--hasNotes i {
	float: left;
	line-height: 1.5 !important;
}

.c-buttonB--hasNotes > span {
	display: block;
	margin-left: 21px;
}

.c-buttonB--hasNotes > span:nth-of-type(2) {
	margin-top: 10px;
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1.5;
}

button.c-buttonB {
	width: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 736px) {
	.c-buttonB {
		max-width: none;
		padding: 9px 14px;
		font-size: 15px;
		font-size: 0.9375rem;
		line-height: 1.5;
		text-align: left;
	}

	.c-buttonB--hasNotes i {
		line-height: 22px !important;
	}
}

/*
サブテキストあり

フルサイズタイプの拡張版です。ボタン幅は親要素のサイズに依存し、サブテキストを持ちます。<br>
タイプBに「--hasNotes」モディファイアを付与します。<br>
汎用タイプ同様、モディファイアは複数組み合わせて使用することもできます。

Markup:
<a href="" class="c-buttonB c-buttonB--hasNotes">
	<i class="c-icon--arrowCircle"></i>
	<span>ボタン</span>
	<span>サブテキストですサブテキストですサブテキストです</span>
</a>

Styleguide 3.2.1
*/
/*
タイプC

ボタン幅は親要素のサイズに依存します。<br>
PCサイズではテキストが中央揃え、モバイルサイズでは左揃えになります。<br>
汎用タイプ同様、モディファイアは複数組み合わせて使用することもできます。

Markup:
<a href="" class="c-buttonC {{modifier_class}}">
	<i class="c-icon--arrowCircle"></i><span>ボタン</span>
</a>

c-buttonC--xl - 文字サイズ 19px
c-buttonC--lg - 文字サイズ 17px
c-buttonC--md - 文字サイズ 15px
c-buttonC--sm - 文字サイズ 13px
c-buttonC--fill - 背景色あり

Styleguide 3.3
*/
.c-buttonC {
	display: block;
	max-width: 450px;
	margin: 0 auto;
	padding: 12px 40px;
	font-size: 19px;
	font-size: 1.1875rem;
	line-height: 1.5;
	text-align: center;
}

.c-buttonC--xl {
	padding: 12px 14px;
	font-size: 19px;
	font-size: 1.1875rem;
	line-height: 1.5;
}

.c-buttonC--lg {
	padding: 10px 14px;
	font-size: 17px;
	font-size: 1.0625rem;
	line-height: 1.5;
}

.c-buttonC--md {
	padding: 9px 14px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.c-buttonC--sm {
	padding: 5px 14px;
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.c-buttonC--fill {
	background: #2C99DE;
	color: #fff;
	border-color: #2C99DE;
	-webkit-transition: background 250ms;
	-o-transition: background 250ms;
	transition: background 250ms;
}

.c-buttonC--fill i {
	color: #fff;
}

.platform-desktop .c-buttonC--fill:hover {
	background: #32A7F2;
	border-color: #32A7F2;
	color: #fff;
	-webkit-transition: background 250ms;
	-o-transition: background 250ms;
	transition: background 250ms;
}

.c-buttonC i {
	margin-left: -16px;
}

button.c-buttonC {
	width: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 736px) {
	.c-buttonC {
		max-width: none;
		padding: 9px 14px;
		font-size: 15px;
		font-size: 0.9375rem;
		line-height: 1.5;
		text-align: left;
	}

	.c-buttonC i {
		margin-left: 0;
	}
}

/*
タイプD

ボタン幅は親要素のサイズに依存します。<br>
テキストは常に中央揃えです。<br>
汎用タイプ同様、モディファイアは複数組み合わせて使用することもできます。

Markup:
<a href="" class="c-buttonD {{modifier_class}}">
	<i class="c-icon--arrowCircle"></i><span>ボタン</span>
</a>

c-buttonD--xl - 文字サイズ 19px
c-buttonD--lg - 文字サイズ 17px
c-buttonD--md - 文字サイズ 15px
c-buttonD--sm - 文字サイズ 13px
c-buttonD--fill - 背景色あり

Styleguide 3.4
*/
.c-buttonD {
	display: block;
	max-width: 450px;
	margin: 0 auto;
	padding: 12px 0;
	font-size: 19px;
	font-size: 1.1875rem;
	line-height: 1.5;
	text-align: center;
}

.c-buttonD--xl {
	padding: 12px 14px;
	font-size: 19px;
	font-size: 1.1875rem;
	line-height: 1.5;
}

.c-buttonD--lg {
	padding: 10px 14px;
	font-size: 17px;
	font-size: 1.0625rem;
	line-height: 1.5;
}

.c-buttonD--md {
	padding: 9px 14px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.c-buttonD--sm {
	padding: 5px 14px;
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.c-buttonD--fill {
	background: #2C99DE;
	color: #fff;
	border-color: #2C99DE;
	-webkit-transition: background 250ms;
	-o-transition: background 250ms;
	transition: background 250ms;
}

.c-buttonD--fill i {
	color: #fff;
}

.platform-desktop .c-buttonD--fill:hover {
	background: #32A7F2;
	border-color: #32A7F2;
	color: #fff;
	-webkit-transition: background 250ms;
	-o-transition: background 250ms;
	transition: background 250ms;
}

button.c-buttonD {
	width: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 736px) {
	.c-buttonD {
		position: relative;
		max-width: none;
		padding: 9px 14px;
		font-size: 15px;
		font-size: 0.9375rem;
		line-height: 1.5;
	}
}

/*
タイプE

ボタン幅は親要素のサイズに依存します。<br>
テキストは常に中央揃えです。<br>
アイコンがボタンの右端に配置されています。

Markup:
<a href="" class="c-buttonE {{modifier_class}}">
	<i class="c-icon--arrowCircle"></i><span>ボタン</span>
</a>

c-buttonE--xl - 文字サイズ 19px
c-buttonE--lg - 文字サイズ 17px
c-buttonE--md - 文字サイズ 15px
c-buttonE--sm - 文字サイズ 13px
c-buttonE--fill - 背景色あり

Styleguide 3.5
*/
.c-buttonE {
	position: relative;
	display: block;
	max-width: 450px;
	margin: 0 auto;
	padding: 12px 0;
	font-size: 19px;
	font-size: 1.1875rem;
	line-height: 1.5;
	text-align: center;
}

.c-buttonE--xl {
	padding: 12px 45px 12px 14px;
	font-size: 19px;
	font-size: 1.1875rem;
	line-height: 1.5;
}

.c-buttonE--lg {
	padding: 10px 45px 10px 14px;
	font-size: 17px;
	font-size: 1.0625rem;
	line-height: 1.5;
}

.c-buttonE--md {
	padding: 9px 45px 9px 14px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.c-buttonE--sm {
	padding: 5px 45px 5px 14px;
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.c-buttonE--fill {
	background: #2C99DE;
	color: #fff;
	border-color: #2C99DE;
	-webkit-transition: background 250ms;
	-o-transition: background 250ms;
	transition: background 250ms;
}

.c-buttonE--fill i {
	color: #fff;
}

.platform-desktop .c-buttonE--fill:hover {
	background: #32A7F2;
	border-color: #32A7F2;
	color: #fff;
	-webkit-transition: background 250ms;
	-o-transition: background 250ms;
	transition: background 250ms;
}

.c-buttonE i {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 16px;
	height: 16px;
	margin: auto 16px auto auto;
}

.c-buttonE span {
	display: inline-block;
	-webkit-transform: translateX(15px);
	-ms-transform: translateX(15px);
	transform: translateX(15px);
	padding-right: 7px;
}

button.c-buttonE {
	width: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 736px) {
	.c-buttonE {
		max-width: none;
		padding-top: 9px;
		padding-bottom: 9px;
		font-size: 15px;
		font-size: 0.9375rem;
		line-height: 1.5;
	}
}

/*
ボタンリスト

.l-gridモジュールと組み合わせることで、これらのボタンモジュールをグリッド状に整列することができます。

Styleguide 3.6
*/
/*
タイプBのボタンリスト

.l-gridモジュールと組み合わせることで、ボタンモジュールをグリッド状に整列することができます。
「--buttonB」モディファイアと「--xxxUp」モディファイアを使用してください。

Markup:
<div class="l-grid l-grid--twoUp l-grid--buttonB">
	<ul class="l-grid__inner">
		<li class="l-grid__item">
			<p><a href="" class="c-buttonB"><i class="c-icon--arrowCircle"></i><span>テキスト</span></a></p>
		</li>
		<li class="l-grid__item">
			<p><a href="" class="c-buttonB"><i class="c-icon--arrowCircle"></i><span>テキスト</span></a></p>
		</li>
		<li class="l-grid__item">
			<p><a href="" class="c-buttonB"><i class="c-icon--arrowCircle"></i><span>テキスト</span></a></p>
		</li>
		<li class="l-grid__item">
			<p><a href="" class="c-buttonB"><i class="c-icon--arrowCircle"></i><span>テキスト</span></a></p>
		</li>
	</ul>
</div>
<hr class="c-separator"/>
<div class="l-grid l-grid--threeUp l-grid--buttonB">
	<ul class="l-grid__inner">
		<li class="l-grid__item">
			<p><a href="" class="c-buttonB"><i class="c-icon--arrowCircle"></i><span>テキスト</span></a></p>
		</li>
		<li class="l-grid__item">
			<p><a href="" class="c-buttonB"><i class="c-icon--arrowCircle"></i><span>テキスト</span></a></p>
		</li>
		<li class="l-grid__item">
			<p><a href="" class="c-buttonB"><i class="c-icon--arrowCircle"></i><span>テキスト</span></a></p>
		</li>
		<li class="l-grid__item">
			<p><a href="" class="c-buttonB"><i class="c-icon--arrowCircle"></i><span>テキスト</span></a></p>
		</li>
	</ul>
</div>

Styleguide 3.6.1
*/
/*
タイプCのボタンリスト

.l-gridモジュールと組み合わせることで、ボタンモジュールをグリッド状に整列することができます。<br>
「--buttonC」モディファイアと「--xxxUp」モディファイアを使用してください。

Markup:
<div class="l-grid l-grid--twoUp l-grid--buttonC">
	<ul class="l-grid__inner">
		<li class="l-grid__item">
			<p><a href="" class="c-buttonC"><i class="c-icon--arrowCircle"></i><span>テキスト</span></a></p>
		</li>
		<li class="l-grid__item">
			<p><a href="" class="c-buttonC"><i class="c-icon--arrowCircle"></i><span>テキスト</span></a></p>
		</li>
		<li class="l-grid__item">
			<p><a href="" class="c-buttonC"><i class="c-icon--arrowCircle"></i><span>テキスト</span></a></p>
		</li>
	</ul>
</div>
<hr class="c-separator"/>
<div class="l-grid l-grid--threeUp l-grid--buttonC">
	<ul class="l-grid__inner">
		<li class="l-grid__item">
			<p><a href="" class="c-buttonC"><i class="c-icon--arrowCircle"></i><span>テキスト</span></a></p>
		</li>
		<li class="l-grid__item">
			<p><a href="" class="c-buttonC"><i class="c-icon--arrowCircle"></i><span>テキスト</span></a></p>
		</li>
		<li class="l-grid__item">
			<p><a href="" class="c-buttonC"><i class="c-icon--arrowCircle"></i><span>テキスト</span></a></p>
		</li>
	</ul>
</div>

Styleguide 3.6.2
*/
.l-grid.l-grid--twoUp > [class*="c-button"] {
	float: left;
	display: block;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.l-grid.l-grid--twoUp > [class*="c-button"]:nth-of-type(odd) {
	width: calc(50% - 10px);
	width: -webkit-calc(50% - 10px);
	margin: 0 10px 20px 0;
}

.l-grid.l-grid--twoUp > [class*="c-button"]:nth-of-type(even) {
	width: calc(50% - 10px);
	width: -webkit-calc(50% - 10px);
	margin: 0 0 20px 10px;
}

@media screen and (max-width: 736px) {
	.l-grid.l-grid--twoUp > [class*="c-button"] {
		float: none;
		display: block;
	}

	.l-grid.l-grid--twoUp > [class*="c-button"]:nth-of-type(odd) {
		width: auto;
		margin: 0 auto 20px;
	}

	.l-grid.l-grid--twoUp > [class*="c-button"]:nth-of-type(even) {
		width: auto;
		margin: 0 auto 20px;
	}
}

/*
アローリンク

アローアイコンを持つリンクです

Markup:
<p class="c-arrow {{modifier_class}}"><a href=""><span><i class="c-icon--arrowCircle"></i>リンクテキスト</span></a></p>

c-arrow--xl - 文字サイズ 19px
c-arrow--lg - 文字サイズ 17px
c-arrow--md - 文字サイズ 15px
c-arrow--sm - 文字サイズ 13px

Styleguide 5.1
*/
.c-arrow {
	position: relative;
	color: #111;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.5;
	-webkit-transition: color 250ms;
	-o-transition: color 250ms;
	transition: color 250ms;
}

.c-arrow--xl {
	font-size: 19px;
	font-size: 1.1875rem;
	line-height: 1.5;
}

.c-arrow--xl i {
	line-height: 1.5em !important;
}

.c-arrow--lg {
	font-size: 17px;
	font-size: 1.0625rem;
	line-height: 1.5;
}

.c-arrow--lg i {
	line-height: 1.5em !important;
}

.c-arrow--md {
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.c-arrow--md i {
	line-height: 1.5em !important;
}

.c-arrow--sm {
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.c-arrow--sm i {
	line-height: 1.5em !important;
}

.c-arrow span {
	position: relative;
	display: inline-block;
	padding: 0 0 0 23px;
}

.c-arrow i {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 16px;
	height: 16px;
	line-height: 1.5em !important;
	color: #2C99DE;
}

.platform-desktop .c-arrow:hover {
	color: #2C99DE;
	-webkit-transition: color 250ms;
	-o-transition: color 250ms;
	transition: color 250ms;
}

a .c-arrow {
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
}

.platform-desktop a:hover .c-arrow {
	color: #111;
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
}

p.c-arrow {
	margin: 0 auto 40px;
}

p.c-arrow a {
	color: #111;
}

p.c-arrow a:hover {
	color: #2C99DE;
	-webkit-transition: color 250ms;
	-o-transition: color 250ms;
	transition: color 250ms;
}

p.c-arrow + p.c-arrow,
  .c-file + p.c-arrow,
  [class*="c-paragraph"] + p.c-arrow {
	margin-top: -32px;
}

[class*="c-photolink"] p.c-arrow {
	margin: 0;
}

@media screen and (max-width: 736px) {
	p.c-arrow {
		margin: 0 auto 30px;
	}

	p.c-arrow + p.c-arrow,
    .c-file + p.c-arrow,
    [class*="c-paragraph"] + p.c-arrow {
		margin-top: -20px;
	}
}

/*
ファイルリンク

アイコンで表現されたフィルタイプへのリンクです。<br>
また、アローリンクと同様に「--sm/--md/--lg/--xl」モディファイアで文字サイズを指定することができます。


Markup:
<p class="c-file"><a href="xxx.pdf" target="_blank"><span><i></i>ファイルリンク [609KB]</span></a></p>
<p class="c-file"><a href="xxx.xls" target="_blank"><span><i></i>ファイルリンク [609KB]</span></a></p>
<p class="c-file"><a href="xxx.doc" target="_blank"><span><i></i>ファイルリンク [609KB]</span></a></p>

Styleguide 5.2
*/
.c-file {
	position: relative;
	color: #111;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.5;
	-webkit-transition: color 250ms;
	-o-transition: color 250ms;
	transition: color 250ms;
}

.is-fts-exception .c-file span {
	padding-left: 30px;
}

.is-fts-exception .c-file i {
	width: 20px;
	height: 20px;
}

.c-file--xl {
	font-size: 19px;
	font-size: 1.1875rem;
	line-height: 1.5;
}

.c-file--xl i {
	width: 19px;
	height: 19px;
	line-height: 1.5em !important;
}

.c-file--lg {
	font-size: 17px;
	font-size: 1.0625rem;
	line-height: 1.5;
}

.c-file--lg i {
	width: 17px;
	height: 17px;
	line-height: 1.5em !important;
}

.c-file--md {
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.c-file--md i {
	width: 15px;
	height: 15px;
	line-height: 1.5em !important;
}

.c-file--sm {
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.c-file--sm i {
	top: 0 !important;
	margin-top: 0 !important;
	line-height: 1.5em !important;
}

.c-file--pdf i {
	width: 16px;
	height: 16px;
	background-image: url(../svg/ico_pdf.svg);
}

.c-file--xls i {
	width: 16px;
	height: 16px;
	background-image: url(../svg/ico_xls.svg);
}

.c-file--doc i {
	width: 16px;
	height: 16px;
	background-image: url(../svg/ico_doc.svg);
}

.c-file span {
	position: relative;
	display: inline-block;
	padding: 0 0 0 23px;
}

.c-file i {
	display: block;
	position: absolute;
	top: 0.5em;
	left: 0;
	width: 16px;
	height: 16px;
	line-height: 1.5em !important;
	color: #2C99DE;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
	margin-top: -0.25em;
}

.c-file a[href$=".pdf"] i,
  .c-file[href$=".pdf"] i {
	background-image: url(../svg/ico_pdf.svg);
}

.c-file a[href$=".xls"] i,
  .c-file a[href$=".xlsx"] i,
  .c-file[href$=".xls"] i,
  .c-file[href$=".xlsx"] i {
	background-image: url(../svg/ico_xls.svg);
}

.c-file a[href$=".doc"] i,
  .c-file a[href$=".docx"] i,
  .c-file[href$=".doc"] i,
  .c-file[href$=".docx"] i {
	width: 16px;
	height: 16px;
	background-image: url(../svg/ico_doc.svg);
}

.platform-desktop .c-file:hover,
  .platform-desktop .c-file a:hover {
	color: #2C99DE;
	-webkit-transition: color 250ms;
	-o-transition: color 250ms;
	transition: color 250ms;
}

.c-file a {
	color: #111;
	-webkit-transition: color 250ms;
	-o-transition: color 250ms;
	transition: color 250ms;
}

a .c-file {
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
}

.platform-desktop a:hover .c-file {
	color: #111;
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
}

p.c-file {
	margin: 0 auto 40px;
}

p.c-file a:after {
	display: none !important;
}

p.c-file + p.c-file,
  .c-arrow + p.c-file,
  [class*="c-paragraph"] + p.c-file {
	margin-top: -30px;
}

[class*="acms-col"] p.c-file {
	margin-bottom: 10px;
}

a:not(.c-file)[href$=".pdf"]:after {
	content: '';
	display: inline-block;
	vertical-align: text-bottom;
	width: 16px;
	height: 16px;
	margin: 0 0 0 5px;
	background: url(../svg/ico_pdf.svg) no-repeat center;
	background-size: contain;
}

a:not(.c-file)[href$=".pdf"].no-file-icon:after {
	display: none !important;
}

a:not(.c-file)[href$=".xls"]:after,
a:not(.c-file)[href$=".xlsx"]:after {
	content: '';
	display: inline-block;
	vertical-align: text-bottom;
	width: 16px;
	height: 16px;
	margin: 0 0 0 5px;
	background: url(../svg/ico_xls.svg) no-repeat center;
	background-size: contain;
}

a:not(.c-file)[href$=".xls"].no-file-icon:after,
a:not(.c-file)[href$=".xlsx"].no-file-icon:after {
	display: none !important;
}

a:not(.c-file)[href$=".doc"]:after,
a:not(.c-file)[href$=".docx"]:after {
	content: '';
	display: inline-block;
	vertical-align: text-bottom;
	width: 16px;
	height: 16px;
	margin: 0 0 0 5px;
	background: url(../svg/ico_doc.svg) no-repeat center;
	background-size: contain;
}

a:not(.c-file)[href$=".doc"].no-file-icon:after,
a:not(.c-file)[href$=".docx"].no-file-icon:after {
	display: none !important;
}

@media screen and (max-width: 736px) {
	p.c-file {
		margin: 0 auto 30px;
	}

	p.c-file + p.c-file,
    .c-arrow + p.c-file,
    [class*="c-paragraph"] + p.c-file {
		margin-top: -20px;
	}
}

@media print {
	.trident .c-file--pdf i,
  .trident .c-file a[href$=".pdf"] i,
  .trident a:not(.c-file)[href$=".pdf"]:after {
		background: url("../img/print/ico_pdf.png") no-repeat center !important;
		background-size: contain;
	}

	.trident .c-file--xls i,
  .trident .c-file a[href$=".xls"] i,
  .trident .c-file a[href$=".xlsx"] i,
  .trident a:not(.c-file)[href$=".xls"]:after,
  .trident a:not(.c-file)[href$=".xlsx"]:after {
		background: url("../img/print/ico_xls.png") no-repeat center !important;
		background-size: contain;
	}

	.trident .c-file--doc i,
  .trident .c-file a[href$=".doc"] i,
  .trident .c-file a[href$=".doc"] i,
  .trident a:not(.c-file)[href$=".doc"]:after,
  .trident a:not(.c-file)[href$=".docx"]:after {
		background: url("../img/print/ico_doc.png") no-repeat center !important;
		background-size: contain;
	}
}

/*
タイプA

.l-grid--photolinkモジュールと併用します。

Markup:
<div class="l-grid l-grid--twoUp l-grid--photolink">
	<div class="l-grid__inner">
		<div class="l-grid__item">
			<div class="c-photolink u-bg-pastel-aqua">
				<a href="">
					<div class="c-photolink__detail">
						<p class="c-photolink__header">テキストテキスト</p>
					</div>
					<figure class="c-photolink__vis"><img src="http://via.placeholder.com/320x200"></figure>
				</a>
			</div>
		</div>
		<div class="l-grid__item">
		<div class="c-photolink u-bg-pastel-aqua">
			<a href="">
				<div class="c-photolink__detail">
					<p class="c-photolink__header">テキストテキスト</p>
				</div>
				<figure class="c-photolink__vis"><img src="http://via.placeholder.com/320x200"></figure>
			</a>
		</div>
		</div>
	</div>
</div>

Styleguide 4.1
*/
.c-photolink {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	-webkit-transition: opacity 250ms;
	-o-transition: opacity 250ms;
	transition: opacity 250ms;
}

.platform-desktop .c-photolink:hover {
	opacity: 0.6;
	-webkit-transition: opacity 250ms;
	-o-transition: opacity 250ms;
	transition: opacity 250ms;
}

.c-photolink:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 36px;
	height: 36px;
	background: url("../svg/arrow_corner.svg") no-repeat right bottom;
	background-size: 100% auto;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.c-photolink a {
	display: table;
	width: 100%;
	min-height: 114px;
	padding: 10px 10px 10px 20px;
	color: #111;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.c-photolink__detail {
	display: table-cell;
	vertical-align: middle;
	padding: 0 10px 0 0;
}

.c-photolink__vis {
	display: table-cell;
	vertical-align: middle;
	width: 33.3%;
}

.c-photolink__vis img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.c-photolink__header {
	font-weight: bold;
	font-size: 23px;
	font-size: 1.4375rem;
	line-height: 1.3;
}

.c-photolink__lead {
	margin: 5px auto 0;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

@media screen and (max-width: 736px) {
	.c-photolink {
		position: relative;
		border-radius: 4px;
		overflow: hidden;
		-webkit-transition: opacity 250ms;
		-o-transition: opacity 250ms;
		transition: opacity 250ms;
	}

	.platform-desktop .c-photolink:hover {
		opacity: 0.6;
		-webkit-transition: opacity 250ms;
		-o-transition: opacity 250ms;
		transition: opacity 250ms;
	}

	.c-photolink:after {
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		right: 0;
		width: 36px;
		height: 36px;
		background: url("../svg/arrow_corner.svg") no-repeat right bottom;
		background-size: 100% auto;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}

	.c-photolink a {
		padding: 18px 10px 18px 16px;
		min-height: 100px;
	}

	.c-photolink__detail {
		display: table-cell;
		vertical-align: middle;
		padding: 0 10px 0 0;
	}

	.c-photolink__vis {
		width: 40%;
		text-align: center;
	}

	.c-photolink__header {
		font-size: 19px;
		font-size: 1.1875rem;
		line-height: 1.3;
	}

	.c-photolink__lead {
		font-size: 13px;
		font-size: 0.8125rem;
		line-height: 1.5;
	}
}

/*
タイプB

.l-grid--photolinkBモジュールと併用します。

Markup:
<div class="l-grid l-grid--twoUp l-grid--photolinkB">
	<div class="l-grid__inner">
		<div class="l-grid__item">
			<div class="c-photolinkB">
				<a href="">
					<div class="c-photolinkB__vis"><img src="http://via.placeholder.com/200x200"></div>
					<div class="c-photolinkB__detail">
						<div class="c-photolinkB__header">
							<p class="c-arrow c-arrow--lg"><span><i class="c-icon--arrowCircle"></i>テキストテキスト</span></p>
						</div>
						<div class="c-photolinkB__lead">
							<p>サブテキストサブテキスト</p>
						</div>
					</div>
				</a>
			</div>
		</div>
		<div class="l-grid__item">
			<div class="c-photolinkB">
				<a href="">
					<div class="c-photolinkB__vis"><img src="http://via.placeholder.com/200x200"></div>
					<div class="c-photolinkB__detail">
						<div class="c-photolinkB__header">
							<p class="c-arrow c-arrow--lg"><span><i class="c-icon--arrowCircle"></i>テキストテキスト</span></p>
						</div>
						<div class="c-photolinkB__lead">
							<p>サブテキストサブテキスト</p>
						</div>
					</div>
				</a>
			</div>
		</div>
	</div>
</div>

Styleguide 4.2
*/
.c-photolinkB {
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-transition: color 250ms, border-color 250ms;
	-o-transition: color 250ms, border-color 250ms;
	transition: color 250ms, border-color 250ms;
}

.platform-desktop .c-photolinkB:hover {
	border-color: #2C99DE;
}

.c-photolinkB.pink a i {
	color: #e63361;
}

.platform-desktop .c-photolinkB.pink:hover {
	border-color: #e63361;
}

.platform-desktop .c-photolinkB.pink:hover p {
	color: #e63361 !important;
}

.c-photolinkB.yellow a i {
	color: #dea611;
}

.platform-desktop .c-photolinkB.yellow:hover {
	border-color: #dea611;
}

.platform-desktop .c-photolinkB.yellow:hover p {
	color: #dea611 !important;
}

.c-photolinkB a {
	display: table;
	width: 100%;
	min-height: 120px;
	padding: 10px;
	color: #111;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: opacity 250ms;
	-o-transition: opacity 250ms;
	transition: opacity 250ms;
}

.c-photolinkB a p {
	-webkit-transition: color 250ms;
	-o-transition: color 250ms;
	transition: color 250ms;
}

.platform-desktop .c-photolinkB a:hover {
	color: #2C99DE !important;
	-webkit-transition: color 250ms;
	-o-transition: color 250ms;
	transition: color 250ms;
}

.platform-desktop .c-photolinkB a:hover p {
	color: #2C99DE !important;
	-webkit-transition: color 250ms;
	-o-transition: color 250ms;
	transition: color 250ms;
}

.c-photolinkB__vis {
	display: table-cell;
	vertical-align: middle;
	width: 100px;
}

.c-photolinkB__vis img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.c-photolinkB__detail {
	display: table-cell;
	vertical-align: middle;
	padding: 0 0 0 10px;
}

.c-photolinkB__header {
	font-size: 17px;
	font-size: 1.0625rem;
	line-height: 1.5;
}

.c-photolinkB__lead {
	margin: 6px auto 0;
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1.5;
}

@media screen and (max-width: 736px) {
	.c-photolinkB a {
		min-height: 100px;
	}

	.c-photolinkB__vis {
		width: 80px;
	}
}

/*
タイプC

.l-grid--photolinkCモジュールと併用します。

Markup:
<div class="l-grid l-grid--twoUp l-grid--photolinkC">
	<ul class="l-grid__inner">
		<li class="l-grid__item">
			<div class="c-photolinkC">
				<a href="">
					<div class="c-photolinkC__vis"><img src="http://via.placeholder.com/300x300"></div>
					<div class="c-photolinkC__detail">
						<p class="c-photolinkC__header">テキストテキスト</p>
					</div>
				</a>
			</div>
			<div class="c-photolinkC-detail">
				<p class="c-photolinkC-detail__header">詳細見出し</p>
				<ul class="c-photolinkC-detail__items">
					<li class="c-photolinkC-detail__item"><a href="" class="c-arrow c-arrow--md"><span><i class="c-icon--arrowCircle"></i>詳細テキスト</span></a></li>
					<li class="c-photolinkC-detail__item"><a href="" class="c-arrow c-arrow--md"><span><i class="c-icon--arrowCircle"></i>詳細テキスト</span></a></li>
				</ul>
			</div>
		</li>
		<li class="l-grid__item">
			<div class="c-photolinkC">
				<a href="">
					<div class="c-photolinkC__vis"><img src="http://via.placeholder.com/300x300"></div>
					<div class="c-photolinkC__detail">
						<p class="c-photolinkC__header">テキストテキスト</p>
					</div>
				</a>
			</div>
			<div class="c-photolinkC-detail">
				<ul class="c-photolinkC-detail__items">
					<li class="c-photolinkC-detail__item"><a href="" class="c-arrow c-arrow--md"><span><i class="c-icon--arrowCircle"></i>詳細テキスト</span></a></li>
					<li class="c-photolinkC-detail__item"><a href="" class="c-arrow c-arrow--md"><span><i class="c-icon--arrowCircle"></i>詳細テキスト</span></a></li>
				</ul>
			</div>
		</li>
		<li class="l-grid__item">
			<div class="c-photolinkC">
				<a href="">
					<div class="c-photolinkC__vis"><img src="http://via.placeholder.com/300x300"></div>
					<div class="c-photolinkC__detail">
						<p class="c-photolinkC__header">テキストテキスト</p>
					</div>
				</a>
			</div>
			<div class="c-photolinkC-detail">
				<p class="c-photolinkC-detail__lead">詳細テキスト詳細テキスト詳細テキスト詳細テキスト詳細テキスト詳細テキスト詳細テキスト詳細テキスト詳細テキスト詳細テキスト</p>
			</div>
		</li>
		<li class="l-grid__item">
			<div class="c-photolinkC c-photolinkC--nolink">
				<div>
					<div class="c-photolinkC__vis"><img src="http://via.placeholder.com/300x300"></div>
					<div class="c-photolinkC__detail">
						<p class="c-photolinkC__header">テキストテキスト（リンクなし）</p>
					</div>
				</div>
			</div>
			<div class="c-photolinkC-detail">
				<p class="c-photolinkC-detail__header">詳細見出し</p>
				<ul class="c-photolinkC-detail__items">
					<li class="c-photolinkC-detail__item"><a href="" class="c-arrow c-arrow--md"><span><i class="c-icon--arrowCircle"></i>詳細テキスト</span></a></li>
					<li class="c-photolinkC-detail__item"><a href="" class="c-arrow c-arrow--md"><span><i class="c-icon--arrowCircle"></i>詳細テキスト</span></a></li>
				</ul>
			</div>
		</li>
	</ul>
</div>

Styleguide 4.3
*/
.c-photolinkC {
	position: relative;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.c-photolinkC.c-photolinkC--nolink > div {
	display: table;
	width: 100%;
	min-height: 180px;
	padding: 14px 15px;
	color: #111;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.c-photolinkC.c-photolinkC--nolink:after {
	display: none;
}

.platform-desktop .c-photolinkC.c-photolinkC--nolink:hover {
	border-color: #ccc;
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
}

.platform-desktop .c-photolinkC:hover {
	border-color: #2C99DE;
	-webkit-transition: border-color 250ms;
	-o-transition: border-color 250ms;
	transition: border-color 250ms;
}

.c-photolinkC a {
	display: table;
	width: 100%;
	min-height: 180px;
	padding: 14px 15px;
	color: #111;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: opacity 250ms, color 250ms;
	-o-transition: opacity 250ms, color 250ms;
	transition: opacity 250ms, color 250ms;
}

.c-photolinkC a:hover {
	color: #2C99DE;
	-webkit-transition: color 250ms;
	-o-transition: color 250ms;
	transition: color 250ms;
}

.c-photolinkC:after {
	content: '';
	display: block;
	position: absolute;
	bottom: -1px;
	right: -1px;
	width: 36px;
	height: 36px;
	background: url("../svg/arrow_corner.svg") no-repeat right bottom;
	background-size: 100% auto;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.c-photolinkC__vis {
	display: table-cell;
	vertical-align: middle;
	width: 33.7%;
}

.c-photolinkC__vis img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.c-photolinkC__detail {
	display: table-cell;
	vertical-align: middle;
	padding: 0 0 0 20px;
}

.c-photolinkC__header {
	font-size: 22px;
	font-size: 1.375rem;
	line-height: 1.5;
}

.c-photolinkC-detail {
	margin: 26px auto 0;
	padding: 0 20px;
}

.c-photolinkC-detail__header {
	font-size: 17px;
	font-size: 1.0625rem;
	line-height: 1.5;
}

.c-photolinkC-detail__lead {
	margin: 20px auto 0;
	font-size: 17px;
	font-size: 1.0625rem;
	line-height: 1.8;
}

.c-photolinkC-detail__items {
	margin: 20px auto 0;
}

.c-photolinkC-detail__item:not(:last-of-type) {
	margin: 0 auto 12px;
}

@media screen and (max-width: 736px) {
	.c-photolinkC {
		position: relative;
	}

	.c-photolinkC.c-photolinkC--nolink > div {
		padding: 10px;
		min-height: 120px;
	}

	.c-photolinkC a {
		padding: 10px;
		min-height: 120px;
	}

	.c-photolinkC__vis {
		width: 100px;
	}

	.c-photolinkC__detail {
		padding: 0 0 0 12px;
	}

	.c-photolinkC__header {
		font-size: 17px;
		font-size: 1.0625rem;
		line-height: 1.5;
	}

	.c-photolinkC-detail {
		margin: 15px auto 0;
		padding: 0 14px;
	}

	.c-photolinkC-detail__header {
		font-size: 15px;
		font-size: 0.9375rem;
		line-height: 1.5;
	}

	.c-photolinkC-detail__lead {
		margin: 10px auto 0;
		font-size: 15px;
		font-size: 0.9375rem;
		line-height: 1.8;
	}

	.c-photolinkC-detail__items {
		margin: 10px auto 0;
	}

	.c-photolinkC-detail__item:not(:last-of-type) {
		margin: 0 auto 12px;
	}
}

/*
タイプD

.l-grid--photolinkDモジュールと併用します。横幅100%での使用を想定しています。

Markup:
<div class="l-grid l-grid--full l-grid--photolinkD">
	<ul class="l-grid__inner">
		<li class="l-grid__item">
		<div class="c-photolinkD">
			<a href="">
				<div class="c-photolinkD__vis"><img src="http://via.placeholder.com/320x200"></div>
				<div class="c-photolinkD__detail">
					<div class="c-photolinkD__header">
						<p>テキストテキスト <span>ボタン見出し</span></p>
					</div>
				</div>
			</a>
		</div>
		</li>
	</ul>
</div>

Styleguide 4.4
*/
.c-photolinkD {
	position: relative;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.platform-desktop .c-photolinkD:hover {
	border-color: #2C99DE;
	-webkit-transition: border-color 250ms;
	-o-transition: border-color 250ms;
	transition: border-color 250ms;
}

.c-photolinkD a {
	display: table;
	width: 100%;
	min-height: 120px;
	padding: 10px 20px 10px 50px;
	color: #111;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: opacity 250ms, color 250ms;
	-o-transition: opacity 250ms, color 250ms;
	transition: opacity 250ms, color 250ms;
}

.platform-desktop .c-photolinkD a:hover {
	color: #2C99DE;
	-webkit-transition: color 250ms;
	-o-transition: color 250ms;
	transition: color 250ms;
}

.c-photolinkD:after {
	content: '';
	display: block;
	position: absolute;
	bottom: -1px;
	right: -1px;
	width: 36px;
	height: 36px;
	background: url("../svg/arrow_corner.svg") no-repeat right bottom;
	background-size: 100% auto;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.c-photolinkD__vis {
	display: table-cell;
	vertical-align: middle;
	width: 24.7%;
}

.c-photolinkD__vis img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.c-photolinkD__detail {
	display: table-cell;
	vertical-align: middle;
	padding: 0 0 0 40px;
}

.c-photolinkD__header {
	font-size: 17px;
	font-size: 1.0625rem;
	line-height: 1.5;
}

.c-photolinkD__header span {
	margin: 0 0 0 15px;
	font-weight: bold;
	font-size: 1.2em;
	color: #2C99DE;
}

#kss-node .c-photolinkD {
	max-width: 720px;
}

@media screen and (max-width: 736px) {
	.c-photolinkD a {
		padding: 10px 18px;
		min-height: 85px;
	}

	.c-photolinkD:after {
		width: 40px;
		height: 40px;
	}

	.c-photolinkD__vis {
		width: 100px;
	}

	.c-photolinkD__detail {
		padding: 0 0 0 10px;
	}

	.c-photolinkD__header {
		font-size: 13px;
		font-size: 0.8125rem;
		line-height: 1.5;
	}

	.c-photolinkD__header span {
		display: block;
		margin: 0;
		font-size: 17px;
		font-size: 1.0625rem;
		line-height: 1.5;
	}
}

/*
タイプE

.l-grid--photolinkEモジュールと併用します。横幅100%での使用を想定しています。

Markup:
<div class="l-grid l-grid--full l-grid--photolinkE">
	<ul class="l-grid__inner">
		<li class="l-grid__item">
			<div class="c-photolinkE {{modifier_class}}">
				<a href="/news/list.html">
					<dl class="c-photolinkE__body">
						<dt class="c-photolinkE__header"><span>ファイル名<br>[609KB]</span></dt>
						<dd class="c-photolinkE__detail">
							<ul class="c-photolinkE__list">
								<li class="c-photolinkE__listItem"><span>1.</span>詳細テキスト詳細テキスト</li>
							</ul>
						</dd>
					</dl>
				</a>
			</div>
		</li>
	</ul>
</div>

.c-photolinkE--new - 新着
.c-photolinkE--pdf - PDFファイル
.c-photolinkE--xls - Excelファイル
.c-photolinkE--doc - Wordファイル

Styleguide 4.5
*/
.c-photolinkE {
	position: relative;
	min-height: 110px;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.platform-desktop .c-photolinkE:hover {
	border-color: #2C99DE;
	-webkit-transition: border-color 250ms;
	-o-transition: border-color 250ms;
	transition: border-color 250ms;
}

.c-photolinkE--new:before {
	content: '';
	display: block;
	position: absolute;
	top: 9px;
	left: 9px;
	width: 36px;
	padding-top: 16px;
	background: url(../svg/ico_new.svg) no-repeat center;
	background-size: 100% auto;
}

.c-photolinkE--pdf .c-photolinkE__header > span:before {
	background: url(../svg/ico_pdf.svg) no-repeat center;
	background-size: 100% auto;
}

.c-photolinkE--xls .c-photolinkE__header > span:before {
	background: url(../svg/ico_xls.svg) no-repeat center;
	background-size: 100% auto;
}

.c-photolinkE--doc .c-photolinkE__header > span:before {
	background: url(../svg/ico_doc.svg) no-repeat center;
	background-size: 100% auto;
}

.c-photolinkE a {
	display: block;
	height: 100%;
	padding: 33px 17px 33px 40px;
	color: #111;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: opacity 250ms, color 250ms;
	-o-transition: opacity 250ms, color 250ms;
	transition: opacity 250ms, color 250ms;
}

.platform-desktop .c-photolinkE a:hover {
	color: #2C99DE;
	-webkit-transition: color 250ms;
	-o-transition: color 250ms;
	transition: color 250ms;
}

.c-photolinkE:after {
	content: '';
	display: block;
	position: absolute;
	bottom: -1px;
	right: -1px;
	width: 36px;
	height: 36px;
	background: url("../svg/arrow_corner.svg") no-repeat right bottom;
	background-size: 100% auto;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.c-photolinkE__body {
	display: table;
	width: 100%;
	height: 100%;
}

.c-photolinkE__header {
	display: table-cell;
	vertical-align: middle;
	width: 210px;
	padding: 0 10px 0 0;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.c-photolinkE__header > span {
	position: relative;
	display: block;
	padding: 0 0 0 44px;
}

.c-photolinkE__header > span:before {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	width: 24px;
	height: 24px;
	background: transparent;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.c-photolinkE__detail {
	display: table-cell;
	vertical-align: middle;
}

.c-photolinkE__list {
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.c-photolinkE__listItem {
	text-indent: -44px;
	margin-left: 44px;
}

.c-photolinkE__listItem:not(:last-of-type) {
	margin-bottom: 5px;
}

.c-photolinkE__listItem > span {
	display: inline-block;
	min-width: 22px;
	margin: 0 20px 0 0;
	font-weight: bold;
	text-align: right;
}

@media screen and (max-width: 736px) {
	.c-photolinkE {
		min-height: 114px;
	}

	.c-photolinkE[data-state="new"]:before {
		top: 10px;
		left: auto;
		right: 10px;
	}

	.c-photolinkE a {
		display: block;
		height: auto;
		padding: 15px 20px 15px 16px;
	}

	.c-photolinkE__body {
		display: block;
		width: auto;
		height: auto;
	}

	.c-photolinkE__header {
		display: block;
		width: auto;
		margin: 0 auto 12px;
		padding: 0 0 0 4px;
	}

	.c-photolinkE__header > span {
		padding: 0 0 0 34px;
	}

	.c-photolinkE__header > span:before {
		width: 20px;
		height: 20px;
	}

	.c-photolinkE__detail {
		display: block;
	}

	.c-photolinkE__list {
		font-size: 13px;
		font-size: 0.8125rem;
		line-height: 1.8;
	}

	.c-photolinkE__listItem {
		text-indent: -30px;
		margin-left: 30px;
	}

	.c-photolinkE__listItem > span {
		min-width: 22px;
		margin: 0 8px 0 0;
	}
}

/*
タイプF

.l-grid--photolinkFモジュールと併用します。

Markup:
<div class="l-grid l-grid--twoUp l-grid--photolinkF">
	<ul class="l-grid__inner">
		<li class="l-grid__item">
			<div class="c-photolinkF">
				<a href="/products/indivisual/">
					<div class="c-photolinkF__vis"><img src="http://via.placeholder.com/300x300"></div>
					<div class="c-photolinkF__detail">
						<p class="c-photolinkF__header">テキストテキスト</p>
					</div>
				</a>
			</div>
			<div class="c-photolinkF-detail">
				<p class="c-photolinkF-detail__header">詳細見出し</p>
				<ul class="c-photolinkF-detail__items">
					<li class="c-photolinkF-detail__item">詳細テキスト詳細テキスト</li>
					<li class="c-photolinkF-detail__item">詳細テキスト詳細テキスト</li>
					<li class="c-photolinkF-detail__item">詳細テキスト詳細テキスト</li>
					<li class="c-photolinkF-detail__item">詳細テキスト詳細テキスト</li>
				</ul>
			</div>
		</li>
		<li class="l-grid__item">
			<div class="c-photolinkF">
				<a href="/products/indivisual/">
					<div class="c-photolinkF__vis"><img src="http://via.placeholder.com/300x300"></div>
					<div class="c-photolinkF__detail">
						<p class="c-photolinkF__header">テキストテキスト</p>
					</div>
				</a>
			</div>
			<div class="c-photolinkF-detail">
				<p class="c-photolinkF-detail__header">詳細見出し</p>
				<ul class="c-photolinkF-detail__items">
					<li class="c-photolinkF-detail__item">詳細テキスト詳細テキスト</li>
					<li class="c-photolinkF-detail__item">詳細テキスト詳細テキスト</li>
					<li class="c-photolinkF-detail__item">詳細テキスト詳細テキスト</li>
					<li class="c-photolinkF-detail__item">詳細テキスト詳細テキスト</li>
				</ul>
			</div>
		</li>
	</ul>
</div>

Styleguide 4.6
*/
.c-photolinkF {
	position: relative;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.platform-desktop .c-photolinkF:hover {
	border-color: #2C99DE;
	-webkit-transition: border-color 250ms;
	-o-transition: border-color 250ms;
	transition: border-color 250ms;
}

.c-photolinkF a {
	display: table;
	width: 100%;
	min-height: 144px;
	padding: 10px;
	color: #111;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: opacity 250ms, color 250ms;
	-o-transition: opacity 250ms, color 250ms;
	transition: opacity 250ms, color 250ms;
}

.c-photolinkF a:hover {
	color: #2C99DE;
	-webkit-transition: color 250ms;
	-o-transition: color 250ms;
	transition: color 250ms;
}

.c-photolinkF:after {
	content: '';
	display: block;
	position: absolute;
	bottom: -1px;
	right: -1px;
	width: 36px;
	height: 36px;
	background: url("../svg/arrow_corner.svg") no-repeat right bottom;
	background-size: 100% auto;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.c-photolinkF__vis {
	display: table-cell;
	vertical-align: middle;
	width: 37.8%;
}

.c-photolinkF__vis img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.c-photolinkF__detail {
	display: table-cell;
	vertical-align: middle;
	padding: 0 0 0 20px;
}

.c-photolinkF__header {
	font-size: 21px;
	font-size: 1.3125rem;
	line-height: 1.5;
}

.c-photolinkF-detail {
	margin: 20px auto 0;
	padding: 0 20px;
}

.c-photolinkF-detail__header {
	margin: 0 auto 5px;
	font-weight: bold;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.7;
}

.c-photolinkF-detail__item {
	text-indent: -1em;
	margin-left: 1em;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.8;
}

.c-photolinkF-detail__item:before {
	content: '\0030fb';
}

@media screen and (max-width: 736px) {
	.c-photolinkF {
		position: relative;
	}

	.c-photolinkF a {
		padding: 10px;
		min-height: 120px;
	}

	.c-photolinkF__vis {
		width: 100px;
	}

	.c-photolinkF__detail {
		padding: 0 0 0 12px;
	}

	.c-photolinkF__header {
		font-size: 17px;
		font-size: 1.0625rem;
		line-height: 1.5;
	}

	.c-photolinkF-detail {
		margin: 15px auto 0;
		padding: 0 14px;
	}
}

/*
タイプG

.l-grid--photolinkGモジュールと併用します。（特設サイトでの使用を想定しています）

Markup:
<div class="l-grid l-grid--twoUp l-grid--photolinkG">
	<ul class="l-grid__inner">
		<li class="l-grid__item">
			<div class="c-photolinkG">
				<a href="">
					<p class="c-photolinkG__header">テキストテキスト</p>
					<figure class="c-photolinkG__vis"><img src="http://via.placeholder.com/277x220"></figure>
					<p class="c-photolinkG__notes">テキストテキストテキスト</p>
				</a>
			</div>
		</li>
		<li class="l-grid__item">
		<div class="c-photolinkG">
			<a href="">
				<p class="c-photolinkG__header">テキストテキスト</p>
				<figure class="c-photolinkG__vis"><img src="http://via.placeholder.com/277x220"></figure>
				<p class="c-photolinkG__notes">テキストテキストテキスト</p>
			</a>
		</div>
		</li>
	</ul>
</div>

Styleguide 4.7
*/
.c-photolinkG {
	position: relative;
	max-width: 850px;
	min-height: 160px;
	margin: 0 auto;
	border-radius: 10px;
}

.c-photolinkG > a {
	display: block;
	padding: 28px 23px 23px 18px;
	background: #fff;
	color: #111;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid transparent;
	border-radius: 5px;
	overflow: hidden;
	-webkit-box-shadow: 0px 4px 0px -2px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 4px 0px -2px rgba(0, 0, 0, 0.2);
}

.c-photolinkG > a:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 36px;
	height: 36px;
	background: url(../svg/arrow_corner.svg) no-repeat right bottom;
	background-size: 100% auto;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.platform-desktop .c-photolinkG > a:hover {
	border-color: #2C99DE;
	color: #2C99DE;
	-webkit-transition: border-color 250ms, color 250ms;
	-o-transition: border-color 250ms, color 250ms;
	transition: border-color 250ms, color 250ms;
}

.c-photolinkG__vis {
	float: left;
	width: 140px;
}

.c-photolinkG__vis img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.c-photolinkG__header {
	float: right;
	width: 222px;
	margin: 0 auto 10px;
	font-weight: bold;
	font-size: 21px;
	font-size: 1.3125rem;
	line-height: 1.28571;
}

.c-photolinkG__notes {
	margin-left: 160px;
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1.5;
}

@media screen and (max-width: 736px) {
	.c-photolinkG {
		min-height: 0;
	}

	.c-photolinkG > a {
		padding: 15px 15px 23px;
	}

	.c-photolinkG__vis {
		width: 42%;
	}

	.c-photolinkG__header {
		float: none;
		width: auto;
		margin: 0 auto 20px;
		font-size: 18px;
		font-size: 1.125rem;
		line-height: 1.27778;
	}

	.c-photolinkG__notes {
		float: right;
		width: 52%;
		margin: 0;
		font-size: 13px;
		font-size: 0.8125rem;
		line-height: 1.5;
	}
}

@media print {
	.trident .c-photolink:after,
  .trident .c-photolinkC:after,
  .trident .c-photolinkD:after,
  .trident .c-photolinkE:after,
  .trident .c-photolinkF:after {
		background: url("../img/print/arrow_corner.png") no-repeat right bottom;
		backgrond-size: contain;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}
}

/*
アイコンフォント

アイコンフォントを用いたアイコンです。

Markup:
<i class="c-icon--{{modifier_class}}"></i>

anker - コード：\e90b
arrow - コード：\e90c
arrowCircle - コード：\e90d
arrowDown - コード：\e90e
arrowUp - コード：\e911
close - コード：\e916
comment - コード：\e906
dirLeft - コード：\e90f
dirRight - コード：\e910
humburger - コード：\e917
info - コード：\e907
lock - コード：\e908
minus - コード：\e912
minusCircle - コード：\e913
note - コード：\e901
pause - コード：\e918
person - コード：\e900
piggy - コード：\e902
plus - コード：\e914
plusCircle - コード：\e915
question - コード：\e903
return - コード：\e905
search - コード：\e909
searchPlus - コード：\e90a
tel - コード：\e904
checkbox - コード：\e919

Styleguide 23.1
*/
/*
SVG

SVGを背景画像に使用したアイコンです。

Markup:
<i class="c-icon--{{modifier_class}}"></i>

required - 必須アイコン
toll - 有料アイコン

Styleguide 23.2
*/
@font-face {
	font-family: 'icons';
  src: url("../fonts/icons/icons.ttf") format("truetype"), url("../fonts/icons/icons.woff?34qpnh") format("woff"), url("../fonts/icons/icons.svg?34qpnh#icons") format("svg");
  font-weight: normal;
  font-style: normal;
}

i[class^="c-icon"], .l-special-nav__toggle i, .c-fontswitcher > a i, .p-special-component-overviewB__list li:before {
	font-family: 'icons' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.c-icon--anker:before {
	content: "\e90b";
}

.c-icon--arrow:before {
	content: "\e90c";
}

.c-icon--arrowCircle:before {
	content: "\e90d";
}

.c-icon--arrowDown:before {
	content: "\e90e";
}

.c-icon--arrowUp:before {
	content: "\e911";
}

.c-icon--close:before {
	content: "\e916";
}

.c-icon--comment:before {
	content: "\e906";
}

.c-icon--dirLeft:before {
	content: "\e90f";
}

.c-icon--dirRight:before {
	content: "\e910";
}

.c-icon--humburger:before {
	content: "\e917";
}

.c-icon--info:before {
	content: "\e907";
}

.c-icon--lock:before {
	content: "\e908";
}

.c-icon--minus:before {
	content: "\e912";
}

.c-icon--minusCircle:before {
	content: "\e913";
}

.c-icon--note:before {
	content: "\e901";
}

.c-icon--pause:before {
	content: "\e918";
}

.c-icon--person:before {
	content: "\e900";
}

.c-icon--piggy:before {
	content: "\e902";
}

.c-icon--plus:before {
	content: "\e914";
}

.c-icon--plusCircle:before {
	content: "\e915";
}

.c-icon--question:before {
	content: "\e903";
}

.c-icon--return:before {
	content: "\e905";
}

.c-icon--search:before {
	content: "\e909";
}

.c-icon--searchPlus:before {
	content: "\e90a";
}

.c-icon--tel:before {
	content: "\e904";
}

.c-icon--checkbox:before {
	content: "\e919";
}

.c-icon--required:before {
	content: '';
	display: inline-block;
	width: 36px;
	height: 16px;
	background: url(../svg/ico_required.svg) no-repeat center;
	background-size: 100% auto;
}

.is-fts-exception .c-icon--required:before {
	vertical-align: top;
	width: 50px;
	height: 23px;
}

.c-icon--toll:before {
	content: '';
	display: inline-block;
	width: 36px;
	height: 16px;
	background: url(../svg/ico_toll.svg) no-repeat center;
	background-size: 100% auto;
}

@media print {
	.trident .c-icon--required:before {
		background: url("../img/print/ico_required.png") no-repeat center;
		background-size: 100% auto;
	}

	.trident .c-icon--toll:before {
		background: url("../img/print/ico_toll.png") no-repeat center;
		background-size: 100% auto;
	}
}

.c-icon--wakaba:before {
	content: '';
	display: inline-block;
	width: 15px;
	height: 15px;
	background: url(../svg/ico_wakaba.svg) no-repeat center;
	background-size: 100% auto;
}

/*
スタイルなし

スタイルのないリストです。

Markup:
<ul class="c-list--unstyled {{modifier_class}}">
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
</ul>

.c-list--twoUp - 2カラム

Styleguide 6.1
*/
[class^="c-list"] li > *:last-child {
	margin-bottom: 0;
}

[class^="c-list"].c-list--twoUp {
	overflow: hidden;
}

[class^="c-list"].c-list--twoUp li:nth-of-type(odd) {
	clear: both;
	float: left;
	width: 48%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

[class^="c-list"].c-list--twoUp li:nth-of-type(even) {
	float: right;
	width: 48%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

@media screen and (max-width: 736px) {
	[class^="c-list"].c-list--twoUp li:nth-of-type(odd), [class^="c-list"].c-list--twoUp li:nth-of-type(even) {
		float: none;
		width: auto;
	}
}

.c-list--unstyled {
	margin: 0 auto 40px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.8;
}

.is-mbZero + .c-list--unstyled {
	margin-top: 40px;
}

.c-list--unstyled li:not(:last-of-type) {
	margin: 0 auto 8px;
}

@media screen and (max-width: 736px) {
	.c-list--unstyled {
		margin: 0 auto 30px;
	}

	.is-mbZero + .c-list--unstyled {
		margin-top: 30px;
	}
}

/*
サークル

サークル状のマーカーをもつリストです。

Markup:
<ul class="c-list--circled {{modifier_class}}">
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
</ul>

.c-list--twoUp - 2カラム


Styleguide 6.2
*/
.c-list--circled {
	margin: 0 auto 40px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.8;
}

.c-paragraph + .c-list--circled, .c-paragraph--alignRight + .c-list--circled, .c-paragraph--imageBordered + .c-list--circled,
  .c-list--dotted + .c-list--circled,
  .c-list--ordered + .c-list--circled,
  .c-list--circled + .c-list--circled {
	margin-top: -35px;
}

.is-mbZero + .c-list--circled {
	margin-top: 40px;
}

.c-list--circled li {
	position: relative;
	padding: 0 0 0 22px;
}

.c-list--circled li:not(:last-of-type) {
	margin: 0 auto 8px;
}

.c-list--circled li:before {
	content: '';
	position: absolute;
	top: 0.5em;
	left: 0;
	display: block;
	width: 10px;
	height: 10px;
	background: #ccc;
	border-radius: 50%;
}

@media screen and (max-width: 736px) {
	.c-list--circled {
		margin: 0 auto 30px;
	}

	.c-paragraph + .c-list--circled, .c-paragraph--alignRight + .c-list--circled, .c-paragraph--imageBordered + .c-list--circled,
    .c-list--dotted + .c-list--circled,
    .c-list--ordered + .c-list--circled,
    .c-list--circled + .c-list--circled {
		margin-top: -25px;
	}

	.is-mbZero + .c-list--circled {
		margin-top: 30px;
	}
}

/*
中黒記号

中黒記号をマーカーにもつリストです。

Markup:
<ul class="c-list--dotted {{modifier_class}}">
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
</ul>

.c-list--twoUp - 2カラム

Styleguide 6.3
*/
.c-list--dotted {
	margin: 0 auto 40px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.8;
}

.c-paragraph + .c-list--dotted, .c-paragraph--alignRight + .c-list--dotted, .c-paragraph--imageBordered + .c-list--dotted,
  .c-list--circled + .c-list--dotted,
  .c-list--ordered + .c-list--dotted,
  .c-list--dotted + .c-list--dotted {
	margin-top: -35px;
}

.is-mbZero + .c-list--dotted {
	margin-top: 40px;
}

.c-list--dotted li {
	position: relative;
	padding: 0 0 0 1em;
}

.c-list--dotted li:not(:last-of-type) {
	margin: 0 auto 8px;
}

.c-list--dotted li:before {
	content: '\0030fb';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 1em;
	text-align: center;
}

@media screen and (max-width: 736px) {
	.c-list--dotted {
		margin: 0 auto 30px;
	}

	.c-paragraph + .c-list--dotted, .c-paragraph--alignRight + .c-list--dotted, .c-paragraph--imageBordered + .c-list--dotted,
    .c-list--circled + .c-list--dotted,
    .c-list--ordered + .c-list--dotted,
    .c-list--dotted + .c-list--dotted {
		margin-top: -25px;
	}

	.is-mbZero + .c-list--dotted {
		margin-top: 30px;
	}
}

/*
チェック

チェックアイコンをもつリストです。

Markup:
<ul class="c-list--checked {{modifier_class}}">
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
</ul>

.c-list--twoUp - 2カラム

Styleguide 6.4
*/
.c-list--checked {
	margin: 0 auto 40px;
	font-size: 17px;
	font-size: 1.0625rem;
	line-height: 1.5;
}

.is-mbZero + .c-list--checked {
	margin-top: 40px;
}

.c-list--checked li {
	position: relative;
	padding: 0 0 0 34px;
}

.c-list--checked li:not(:last-of-type) {
	margin: 0 auto 8px;
}

.c-list--checked li:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 22px;
	height: 1.5em;
	background: url("../svg/ico_check.svg") no-repeat center;
	background-size: 100% auto;
}

@media screen and (max-width: 736px) {
	.c-list--checked {
		margin: 0 auto 30px;
	}

	.c-list--checked li {
		font-size: 15px;
		font-size: 0.9375rem;
		line-height: 1.5;
	}

	.is-mbZero + .c-list--checked {
		margin-top: 30px;
	}
}

@media print {
	.trident .c-list--checked li:before {
		background: url("../img/print/ico_check.png") no-repeat center;
		background-size: 100% auto;
	}
}

/*
番号付き

番号付きリストです。

Markup:
<ol class="c-list--ordered {{modifier_class}}">
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
</ol>

.c-list--twoUp - 2カラム

Styleguide 6.5
*/
.c-list--ordered {
	margin: 0 auto 40px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.8;
	counter-reset: number 0;
}

.c-media .c-list--ordered {
	line-height: 1.5;
}

.c-paragraph + .c-list--ordered, .c-paragraph--alignRight + .c-list--ordered, .c-paragraph--imageBordered + .c-list--ordered,
  .c-list--circled + .c-list--ordered,
  .c-list--dotted + .c-list--ordered,
  .c-list--ordered + .c-list--ordered {
	margin-top: -35px;
}

.is-mbZero + .c-list--ordered {
	margin-top: 40px;
}

.c-list--ordered li {
	position: relative;
	padding: 0 0 0 35px;
	list-style: none;
	counter-increment: number 1;
}

.c-list--ordered li:not(:last-of-type) {
	margin-bottom: 8px;
}

.c-list--ordered li:before {
	content: counter(number) ".";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 35px;
	font-weight: bold;
}

@media screen and (max-width: 736px) {
	.c-list--ordered {
		margin: 0 auto 30px;
	}

	.c-paragraph + .c-list--ordered, .c-paragraph--alignRight + .c-list--ordered, .c-paragraph--imageBordered + .c-list--ordered,
    .c-list--circled + .c-list--ordered,
    .c-list--dotted + .c-list--ordered,
    .c-list--ordered + .c-list--ordered {
		margin-top: -25px;
	}

	.is-mbZero + .c-list--ordered {
		margin-top: 30px;
	}
}

/*
番号付き（丸囲い）

番号付き（丸囲い）リストです。

Markup:
<ol class="c-list--numbered {{modifier_class}}">
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
</ol>

.c-list--twoUp - 2カラム

Styleguide 6.6
*/
.c-list--numbered {
	margin: 0 auto 40px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.8;
	counter-reset: number 0;
}

.is-mbZero + .c-list--numbered {
	margin-top: 40px;
}

.c-list--numbered li {
	position: relative;
	padding: 0 0 0 40px;
	list-style: none;
	counter-increment: number 1;
}

.c-list--numbered li:not(:last-of-type) {
	margin-bottom: 8px;
}

.c-list--numbered li:before {
	content: counter(number);
	display: block;
	position: absolute;
	top: 0.5em;
	left: 0;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ W6", "Hiragino Kaku Gothic W6", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic W3", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	background: #2C99DE;
	border-radius: 50%;
	-webkit-transform: translateY(-6px);
	-ms-transform: translateY(-6px);
	transform: translateY(-6px);
}

@media screen and (max-width: 736px) {
	.c-list--numbered {
		margin: 0 auto 30px;
		font-size: 15px;
		font-size: 0.9375rem;
		line-height: 1.5;
	}

	.is-mbZero + .c-list--numbered {
		margin-top: 30px;
	}
}

/*
日付リスト

日付とそれに対応するリストです。

Markup:
<div class="c-dateList" data-format="yymmdd">
	<ul class="c-dateList__items">
		<li class="c-dateList__item">
			<dl class="c-dateList__itemBody">
				<dt class="c-dateList__term">2017年01月24日</dt>
				<dd class="c-dateList__detail">テキストテキスト</dd>
			</dl>
		</li>
		<li class="c-dateList__item">
			<dl class="c-dateList__itemBody">
				<dt class="c-dateList__term">2016年12月15日</dt>
				<dd class="c-dateList__detail">テキストテキスト</dd>
			</dl>
		</li>
	</ul>
</div>
<div class="c-dateList" data-format="mmdd">
	<ul class="c-dateList__items">
		<li class="c-dateList__item">
			<dl class="c-dateList__itemBody">
				<dt class="c-dateList__term">01月24日</dt>
				<dd class="c-dateList__detail">テキストテキスト</dd>
			</dl>
		</li>
		<li class="c-dateList__item">
			<dl class="c-dateList__itemBody">
				<dt class="c-dateList__term">12月15日</dt>
				<dd class="c-dateList__detail">テキストテキスト</dd>
			</dl>
		</li>
	</ul>
</div>

Styleguide 6.7
*/
.c-dateList {
	margin: 0 auto 40px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.c-dateList[data-format="mmdd"] .c-dateList__term {
	width: 72px;
}

.is-fts-large .c-dateList[data-format="mmdd"] .c-dateList__term {
	width: 90px;
}

.c-dateList[data-format="yymm"] .c-dateList__term {
	width: 90px;
}

.is-fts-large .c-dateList[data-format="yymm"] .c-dateList__term {
	width: 110px;
}

.c-dateList[data-format="yymmdd"] .c-dateList__term {
	width: 120px;
}

.is-fts-large .c-dateList[data-format="yymmdd"] .c-dateList__term {
	width: 140px;
}

.c-dateList__item {
	padding: 16px 0 16px;
	border-bottom: 1px solid #ccc;
}

.c-dateList__item:first-of-type {
	padding-top: 0;
}

.c-dateList__itemBody {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}

.c-dateList__term {
	margin: 0 20px 0 0;
	white-space: nowrap;
}

.c-dateList__detail {
	-webkit-box-flex: 1;
	-webkit-flex: 1 1 0;
	-ms-flex: 1 1 0px;
	flex: 1 1 0;
}

@media screen and (max-width: 736px) {
	.c-dateList {
		margin: 0 auto 30px;
	}

	.c-dateList__item {
		padding: 10px 0 10px;
		font-size: 15px;
		font-size: 0.9375rem;
		line-height: 1.5;
	}

	.c-dateList__itemBody {
		display: block;
	}

	.c-dateList__term {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		margin: 0;
	}

	.c-dateList__category {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		margin: 5px 0 0;
	}

	.c-dateList__detail {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		margin: 5px auto 0;
	}
}

/*
イラスト付き定義リスト

イラスト付きの定義リストです。<br>
専用のグリッドモジュール（.l-grid--pictorial-dlist）と併用してください。

Markup:
<div class="l-grid l-grid--fourUp l-grid--pictorial-dlist">
	<ul class="l-grid__inner">
		<li class="l-grid__item">
			<div class="c-pictorial-dlist">
				<figure class="c-pictorial-dlist__vis"><img src="http://via.placeholder.com/300x300"></figure>
				<div class="c-pictorial-dlist__body">
					<dl>
						<dt class="c-pictorial-dlist__tag c-pictorial-dlist__tag"><span>タグ</span></dt>
						<dd class="c-pictorial-dlist__detail">テキストテキスト</dd>
					</dl>
				</div>
			</div>
		</li>
		<li class="l-grid__item">
			<div class="c-pictorial-dlist">
				<figure class="c-pictorial-dlist__vis"><img src="http://via.placeholder.com/300x300"></figure>
				<div class="c-pictorial-dlist__body">
					<dl>
						<dt class="c-pictorial-dlist__tag c-pictorial-dlist__tag--green"><span>タグ</span></dt>
						<dd class="c-pictorial-dlist__detail">テキストテキスト</dd>
					</dl>
				</div>
			</div>
		</li>
		<li class="l-grid__item">
			<div class="c-pictorial-dlist">
				<figure class="c-pictorial-dlist__vis"><img src="http://via.placeholder.com/300x300"></figure>
				<div class="c-pictorial-dlist__body">
					<dl>
						<dt class="c-pictorial-dlist__tag c-pictorial-dlist__tag--red"><span>タグ</span></dt>
						<dd class="c-pictorial-dlist__detail">テキストテキスト</dd>
					</dl>
				</div>
			</div>
		</li>
		<li class="l-grid__item">
			<div class="c-pictorial-dlist">
				<figure class="c-pictorial-dlist__vis"><img src="http://via.placeholder.com/300x300"></figure>
				<div class="c-pictorial-dlist__body">
					<dl>
						<dt class="c-pictorial-dlist__tag c-pictorial-dlist__tag--gray"><span>タグ</span></dt>
						<dd class="c-pictorial-dlist__detail">テキストテキスト</dd>
					</dl>
				</div>
			</div>
		</li>
	</ul>
</div>

Styleguide 6.8
*/
.c-pictorial-dlist__vis img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.c-pictorial-dlist__body {
	margin: 5px auto 0;
	text-align: center;
}

.c-pictorial-dlist__tag {
	margin: 0 auto 12px;
}

.c-pictorial-dlist__tag.c-pictorial-dlist__tag--green span {
	background: #34B8A3;
}

.c-pictorial-dlist__tag.c-pictorial-dlist__tag--red span {
	background: #EB603F;
}

.c-pictorial-dlist__tag.c-pictorial-dlist__tag--orange span {
	background: #FFC44E;
}

.c-pictorial-dlist__tag.c-pictorial-dlist__tag--gray span {
	background: #8695a1;
}

.c-pictorial-dlist__tag span {
	display: inline-block;
	min-width: 110px;
	padding: 5px 10px;
	color: #fff;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.3;
	background: #2C99DE;
	border-radius: 20px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.c-pictorial-dlist__detail {
	font-size: 17px;
	font-size: 1.0625rem;
	line-height: 1.41176;
}

@media screen and (max-width: 736px) {
	.c-pictorial-dlist {
		display: table;
		width: 100%;
		margin: 0 auto 25px;
		padding: 0 0 0 10px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.c-pictorial-dlist__vis {
		display: table-cell;
		vertical-align: middle;
		width: 100px;
	}

	.c-pictorial-dlist__body {
		display: table-cell;
		vertical-align: middle;
		margin: 0;
		padding: 0 0 0 30px;
		text-align: left;
	}

	.c-pictorial-dlist__body > dl {
		display: inline-block;
		width: 200px;
	}

	.c-pictorial-dlist__tag span {
		text-align: center;
	}
}

@media screen and (max-width: 360px) {
	.c-pictorial-dlist__body > dl {
		width: 150px;
	}

	.c-pictorial-dlist__vis img {
		width: 100px;
	}
}

/*
定義リスト

定義リストです。

Markup:
<dl class="c-dList">
	<dt>小見出し</dt>
	<dd>テキストテキストテキスト</dd>
	<dd>テキストテキストテキスト</dd>
</dl>

Styleguide 6.9
*/
.c-dList {
	margin: 0 auto 40px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.8;
}

.c-dList dt {
	margin: 0 auto 10px;
}

.c-dList dd:not(:last-of-type) {
	margin: 0 auto 10px;
}

@media screen and (max-width: 736px) {
	.c-dList {
		margin: 0 auto 30px;
	}
}

/*
余白なしリスト

リストアイテム同士が余白を持たないリストです。

Markup:
<div class="c-collapsedList">
	<div class="c-collapsedList__items">
		<div>テキストテキスト</div>
		<div>テキストテキストテキストテキスト</div>
		<div>
			<a href="" class="c-button">
				<i class="c-icon--arrowCircle"></i><span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</span>
			</a>
		</div>
		<div>
			<a href="" class="c-button">
				<i class="c-icon--arrowCircle"></i><span>テキストテキスト</span>
			</a>
		</div>
		<div>
			<a href="" class="c-button">
				<i class="c-icon--arrowCircle"></i><span>テキストテキスト</span>
			</a>
		</div>
		<div>
			<a href="" class="c-button">
				<i class="c-icon--arrowCircle"></i><span>テキストテキスト</span>
			</a>
		</div>
	</div>
</div>

Styleguide 6.10
*/
.c-collapsedList {
	margin: 0 auto 40px;
}

.trident .c-collapsedList .c-collapsedList__items {
	display: block;
	font-size: 0;
}

.trident .c-collapsedList .c-collapsedList__items > div {
	display: inline-block;
	vertical-align: top;
}

.c-collapsedList + .c-collapsedList {
	margin-top: -40px;
}

.c-collapsedList__items {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.c-collapsedList__items > div {
	width: 50%;
	padding: 18px 20px;
	margin-bottom: -1px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.5;
	border: 1px solid #ccc;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.c-collapsedList__items > div:nth-child(odd) {
	margin-right: -1px;
}

.c-collapsedList__items > div > span {
	display: block;
	border: 1px solid #ccc;
}

.c-collapsedList__items > div > a {
	position: relative;
	display: block;
	height: calc(100% + (19px*2));
	height: -webkit-calc(100% + (19px*2));
	margin: -19px -21px;
	padding: 14px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.5;
	border: 1px solid #ccc;
	border-radius: 0 !important;
}

.platform-desktop .c-collapsedList__items > div > a:hover {
	z-index: 10;
	border-color: #2C99DE;
}

@media screen and (max-width: 736px) {
	.c-collapsedList {
		margin: 0 auto 30px;
	}

	.trident .c-collapsedList .c-collapsedList__items {
		display: block;
	}

	.trident .c-collapsedList .c-collapsedList__items > div {
		display: block;
	}

	.c-collapsedList + .c-collapsedList {
		margin-top: -31px;
	}

	.c-collapsedList__items {
		display: block;
	}

	.c-collapsedList__items > div {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: auto;
		padding: 18px 20px;
		margin-bottom: -1px;
		border: 1px solid #ccc;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.c-collapsedList__items > div:nth-child(odd) {
		margin-right: 0;
	}

	.c-collapsedList__items > div > span {
		display: block;
		border: 1px solid #ccc;
	}

	.c-collapsedList__items > div > a {
		height: auto;
	}

	.c-collapsedList__items > div > a i {
		margin-top: 0.25em;
	}
}

/*
汎用テキスト

汎用テキストです。strongタグで太字にすることができます。

Markup:
<p class="c-paragraph">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら</p>

Styleguide 7.1
*/
/*
汎用テキスト(右揃え)

汎用テキスト内の画像は親要素のサイズに依存します。

Markup:
<p class="c-paragraph--alignRight">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら</p>

Styleguide 7.1.2
*/
/*
汎用テキスト + 画像(枠線なし)

汎用テキスト内の画像は親要素のサイズに依存します。

Markup:
<p class="c-paragraph"><img src="http://via.placeholder.com/1280x920"></p>

Styleguide 7.1.3
*/
/*
汎用テキスト + 画像(枠線/角丸あり)

汎用テキスト内の画像は親要素のサイズに依存します。

Markup:
<p class="c-paragraph--imageBordered"><img src="http://via.placeholder.com/1280x920/fff/"></p>

Styleguide 7.1.4
*/
.c-paragraph, .c-paragraph--alignRight, .c-paragraph--imageBordered {
	margin: 0 auto 40px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.8;
}

.c-paragraph + .c-paragraph, .c-paragraph--alignRight + .c-paragraph, .c-paragraph--imageBordered + .c-paragraph, .c-paragraph + .c-paragraph--alignRight, .c-paragraph--alignRight + .c-paragraph--alignRight, .c-paragraph--imageBordered + .c-paragraph--alignRight, .c-paragraph + .c-paragraph--imageBordered, .c-paragraph--alignRight + .c-paragraph--imageBordered, .c-paragraph--imageBordered + .c-paragraph--imageBordered,
  .c-list--dotted + .c-paragraph,
  .c-list--dotted + .c-paragraph--alignRight,
  .c-list--dotted + .c-paragraph--imageBordered,
  .c-list--circled + .c-paragraph,
  .c-list--circled + .c-paragraph--alignRight,
  .c-list--circled + .c-paragraph--imageBordered,
  .c-list--ordered + .c-paragraph,
  .c-list--ordered + .c-paragraph--alignRight,
  .c-list--ordered + .c-paragraph--imageBordered {
	margin-top: -35px;
}

.c-paragraph img, .c-paragraph--alignRight img, .c-paragraph--imageBordered img {
	display: block;
	width: 100%;
	height: auto;
	vertical-align: bottom;
	margin-bottom: 55px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

#kss-node .c-paragraph, #kss-node .c-paragraph--alignRight, #kss-node .c-paragraph--imageBordered {
	max-width: 720px;
}

[class*="acms-col"] .c-paragraph, [class*="acms-col"] .c-paragraph--alignRight, [class*="acms-col"] .c-paragraph--imageBordered {
	margin-bottom: 0;
}

.is-mbZero + .c-paragraph, .is-mbZero + .c-paragraph--alignRight, .is-mbZero + .c-paragraph--imageBordered {
	margin-top: 40px;
}

.c-paragraph.has-vis + .caption, .has-vis.c-paragraph--alignRight + .caption, .has-vis.c-paragraph--imageBordered + .caption {
	margin-top: -35px;
}

.c-paragraph--alignRight {
	text-align: right;
}

.c-paragraph--imageBordered img {
	border: 1px solid #ccc;
	border-radius: 4px;
}

@media screen and (max-width: 736px) {
	.c-paragraph, .c-paragraph--alignRight, .c-paragraph--imageBordered {
		margin: 0 auto 30px;
	}

	.c-paragraph img, .c-paragraph--alignRight img, .c-paragraph--imageBordered img {
		margin-bottom: 45px;
	}

	.c-paragraph + .c-paragraph, .c-paragraph--alignRight + .c-paragraph, .c-paragraph--imageBordered + .c-paragraph, .c-paragraph + .c-paragraph--alignRight, .c-paragraph--alignRight + .c-paragraph--alignRight, .c-paragraph--imageBordered + .c-paragraph--alignRight, .c-paragraph + .c-paragraph--imageBordered, .c-paragraph--alignRight + .c-paragraph--imageBordered, .c-paragraph--imageBordered + .c-paragraph--imageBordered,
    .c-list--dotted + .c-paragraph,
    .c-list--dotted + .c-paragraph--alignRight,
    .c-list--dotted + .c-paragraph--imageBordered,
    .c-list--circled + .c-paragraph,
    .c-list--circled + .c-paragraph--alignRight,
    .c-list--circled + .c-paragraph--imageBordered,
    .c-list--ordered + .c-paragraph,
    .c-list--ordered + .c-paragraph--alignRight,
    .c-list--ordered + .c-paragraph--imageBordered {
		margin-top: -25px;
	}

	.is-mbZero + .c-paragraph, .is-mbZero + .c-paragraph--alignRight, .is-mbZero + .c-paragraph--imageBordered {
		margin-top: 30px;
	}

	.c-paragraph.has-vis + .caption, .has-vis.c-paragraph--alignRight + .caption, .has-vis.c-paragraph--imageBordered + .caption {
		margin-top: -25px;
	}

	.c-paragraph--alignRight {
		margin: 0 auto 30px;
	}

	.c-paragraph--imageBordered {
		margin: 0 auto 30px;
	}
}

/*
補足テキスト

補足用のテキストです。

Markup:
<p class="c-note">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら</p>
<p class="c-note">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら</p>
<p class="c-note">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら</p>

Styleguide 7.2
*/
.c-note {
	margin: -35px auto 40px;
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1.8;
}

#kss-node .c-note:first-of-type {
	margin-top: 0;
}

.c-note + .c-note {
	margin-top: -32px;
}

.l-grid--pictorial-dlist + .c-note {
	margin-top: -20px;
}

@media screen and (max-width: 736px) {
	.c-note {
		margin: -25px auto 30px;
	}

	.l-grid--pictorial-dlist + .c-note {
		margin-top: -25px;
	}
}

/*
補足テキストセット

ヘッダーや詳細リンク付きの補足です。

Markup:
<div class="c-noteset">
	<dl>
		<dt class="c-noteset__header">信託相談所ご利用にあたっての個人情報の取り扱い</dt>
		<dd class="c-noteset__detail">
			<p>信託相談所では、円滑な相談・苦情等への対応を実施するため、みなさまからの相談・苦情などをお受けするにあたりまして、お名前、ご住所、電話番号等をお聞きする場合があります。これらの個人情報は、みなさまからの相談・苦情等への対応のために利用し、ご本人の同意を得ずに他の目的で利用することはいたしません。ご提供いただいた情報は、特定の個人を識別できる情報を除いて、統計資料、相談・苦情等の事例として利用させていただきます。</p>
			<p class="c-arrow c-arrow--sm"><a href=""><span><i class="c-icon--arrowCircle"></i>個人情報の取り扱いについて</span></a></p>
		</dd>
	</dl>
</div>

Styleguide 7.3
*/
.c-noteset {
	margin: -20px auto 40px;
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1.8;
}

.c-noteset__header {
	margin: 0 auto 10px;
	font-weight: bold;
}

.c-noteset__detail p + p {
	margin: 20px auto 0;
}

.c-noteset__detail + .c-noteset__detail {
	margin-top: 20px;
}

#kss-node .c-noteset {
	margin-top: 0;
}

@media screen and (max-width: 736px) {
	.c-noteset {
		margin: -20px auto 30px;
	}
}

/*
480 x 280

第２階層（横幅1000px）で使用します

Markup:
<div class="c-media {{modifier_class}}">
	<div class="c-media__inner">
		<figure class="c-media__vis"><img src="http://via.placeholder.com/960x640"></figure>
		<div class="c-media__detail">
			<p class="c-media__header">見出し見出し見出し見出し見出し見出し</p>
			<div class="c-media__notes"><p>説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p></div>
			<div class="c-media__toDetail">
				<p><a href="" class="c-button c-button--md c-button--fill"><i class="c-icon--arrowCircle"></i><span>ボタン</span></a></p>
			</div>
		</div>
	</div>
</div>

.c-media--onVisRight - 画像右
.c-media--onVisLeft - 画像左
.c-media--middle - 縦位置中央寄せ

Styleguide 11.1
*/
.c-media {
	margin: 0 auto 40px;
}

.c-media--onVisRight .c-media__inner {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.c-media--onVisRight .c-media__vis {
	padding-right: 0;
	padding-left: 4%;
}

.c-media--middle .c-media__inner {
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.c-media__inner {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.c-media__vis {
	width: 48%;
	padding-right: 4%;
	padding-left: 0;
	text-align: center;
}

.c-media__vis img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.c-media__detail {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.c-media__header {
	margin: 0 auto 24px;
	font-size: 23px;
	font-size: 1.4375rem;
	line-height: 1.56522;
}

.c-media__header br {
	display: none;
}

.c-media__notes {
	margin: 0 auto;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.8;
}

.c-media__notes > *:last-child {
	margin-bottom: 0;
}

.c-media__toDetail {
	margin: 24px auto 0;
}

#kss-node .c-media {
	max-width: 1000px;
	margin: 0;
}

@media screen and (max-width: 736px) {
	.c-media {
		margin: 0 auto 30px;
	}

	.c-media--onVis240 .c-media__vis {
		width: 82.2%;
		max-width: 420px;
		margin: 0 auto 12px;
	}

	.c-media__inner {
		display: block;
	}

	.c-media__vis {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: auto;
		margin: 0 -14px 24px;
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.c-media__vis img {
		max-width: 550px;
	}

	.c-media__detail {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: auto;
	}

	.c-media__header {
		margin: 0 auto 24px;
		text-align: center;
		font-size: 18px;
		font-size: 1.125rem;
		line-height: 1.5;
	}

	.c-media__header br {
		display: inline;
	}

	.c-media__notes:not(:last-of-type) {
		margin-bottom: 1em;
	}

	.c-media__toDetail {
		text-align: center;
	}
}

/*
240 x 160

第３階層以下（横幅750px）で使用します


Markup:
<div class="c-mediaB">
	<figure class="c-mediaB__vis {{modifier_class}}"><img src="http://via.placeholder.com/480x320"></figure>
	<div class="c-mediaB__detail">
		<p>説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p>
		<a href="" class="c-button c-button--md"><i class="c-icon--arrowCircle"></i><span>ボタン</span></a>
	</div>
</div>

.w-350 - 画像サイズ350px
.w-300 - 画像サイズ300px
.w-240 - 画像サイズ240px

Styleguide 11.2
*/
.c-mediaB {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin: 0 auto 40px;
}

.c-mediaB__vis {
	width: 240px;
	padding-right: 30px;
	padding-left: 0;
	text-align: center;
}

.c-mediaB__vis.w-350 {
	width: 350px;
}

.c-mediaB__vis.w-300 {
	width: 300px;
}

.c-mediaB__vis.w-240 {
	width: 240px;
}

.c-mediaB__vis img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

.c-mediaB__detail {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.c-mediaB__detail p {
	margin: 0 auto 24px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.8;
}

.c-mediaB__detail p:last-child {
	margin-bottom: 0;
}

.c-mediaB__header {
	margin: 0 auto 12px;
	font-size: 23px;
	font-size: 1.4375rem;
	line-height: 1.56522;
}

.c-mediaB__header br {
	display: none;
}

.c-mediaB__notes {
	margin: 0 auto 24px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.8;
}

.c-mediaB__notes p + p {
	margin-top: 1em;
}

#kss-node .c-mediaB {
	max-width: 720px;
	margin: 0;
}

@media screen and (max-width: 736px) {
	.c-mediaB {
		display: block;
		margin: 0 auto 30px;
	}

	.c-mediaB__vis {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: auto;
		max-width: 420px;
		margin: 0 auto 12px;
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.c-mediaB__vis.w-240 {
		width: 82.2%;
	}

	.c-mediaB__vis.w-300, .c-mediaB__vis.w-350 {
		width: 100%;
	}

	.c-mediaB__vis img {
		width: 100%;
	}

	.c-mediaB__detail {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: auto;
	}
}

/*
300 x 250

第２階層（横幅1000px）で使用します


Markup:
<div class="c-mediaC {{modifier_class}}">
	<div class="c-mediaC__inner">
		<figure class="c-mediaC__vis"><img src="http://via.placeholder.com/600x500"></figure>
		<div class="c-mediaC__detail">
			<p class="c-mediaC__header">見出し見出し見出し見出し見出し見出し</p>
			<div class="c-mediaC__notes">
				<p>説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p>
			</div>
			<div class="c-mediaC__toDetail">
				<p><a href="" class="c-button c-button--md"><i class="c-icon--arrowCircle"></i><span>ボタン</span></a></p>
			</div>
		</div>
	</div>
</div>

.c-mediaC--onVisRight - 画像右
.c-mediaC--onVisLeft - 画像左
.c-mediaC--middle - 縦位置中央寄せ

Styleguide 11.3
*/
.c-mediaC {
	margin: 0 auto 40px;
}

.c-mediaC--onVisRight .c-mediaC__inner {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.c-mediaC--onVisRight .c-mediaC__vis {
	padding-right: 0;
	padding-left: 40px;
}

.c-mediaC--middle .c-mediaC__inner {
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.c-mediaC__inner {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.c-mediaC__vis {
	width: 300px;
	padding-right: 40px;
	padding-left: 0;
	text-align: center;
}

.c-mediaC__vis img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.c-mediaC__detail {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.c-mediaC__header {
	margin: 0 auto 12px;
	font-size: 23px;
	font-size: 1.4375rem;
	line-height: 1.56522;
}

.c-mediaC__notes {
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.8;
}

.c-mediaC__notes > *[class*="c-"] {
	margin-bottom: 0;
}

.c-mediaC__notes > * + * {
	margin-top: 1em !important;
}

.c-mediaC__notes > *:last-child {
	margin-bottom: 0 !important;
}

.c-mediaC__notes hr {
	display: block;
	margin: 1.5em auto 0 !important;
	height: 0;
	background: transparent;
	border: none;
}

.c-mediaC__toDetail {
	margin: 24px auto 0;
}

#kss-node .c-mediaC {
	max-width: 720px;
	margin: 0;
}

@media screen and (max-width: 736px) {
	.c-mediaC {
		margin: 0 auto 30px;
	}

	.c-mediaC__inner {
		display: block;
	}

	.c-mediaC__vis {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: auto;
		width: 68.4%;
		max-width: 420px;
		margin: 0 auto 12px;
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.c-mediaC__detail {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: auto;
	}

	.c-mediaC__header {
		margin: 0 auto 12px;
		text-align: center;
		font-size: 18px;
		font-size: 1.125rem;
		line-height: 1.5;
	}

	.c-mediaC__toDetail {
		text-align: left;
	}
}

/*
110 x 158

第３階層以下（横幅750px）で使用します


Markup:
<div class="c-mediaD {{modifier_class}}">
	<div class="c-mediaD__inner">
		<figure class="c-mediaD__vis"><img src="http://via.placeholder.com/220x316"></figure>
		<div class="c-mediaD__detail">
			<p class="c-mediaD__header">見出し見出し見出し見出し見出し見出し <small>細目テキスト</small></p>
			<div class="c-mediaD__notes">
				<p>説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p>
			</div>
		</div>
	</div>
</div>

.c-mediaD--onVisRight - 画像右
.c-mediaD--onVisLeft - 画像左
.c-mediaD--middle - 縦位置中央寄せ

Styleguide 11.5
*/
.c-mediaD {
	margin: 0 auto 50px;
}

.c-mediaD--onVisRight .c-mediaD__inner {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.c-mediaD--onVisRight .c-mediaD__vis {
	padding-right: 0;
	padding-left: 40px;
}

.c-mediaD--middle .c-mediaD__inner {
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.c-mediaD__inner {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.c-mediaD__vis {
	width: 110px;
	padding-right: 40px;
	padding-left: 0;
	text-align: center;
}

.c-mediaD__vis img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.c-mediaD__detail {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.c-mediaD__header {
	margin: 0 auto 15px;
	font-weight: bold;
	font-size: 19px;
	font-size: 1.1875rem;
	line-height: 1.5;
}

.c-mediaD__header > small {
	font-weight: normal;
	font-size: 11px;
	font-size: 0.6875rem;
	line-height: 1;
}

.c-mediaD__notes {
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.8;
}

.c-mediaD__notes > * + * {
	margin-top: 1em;
}

.c-mediaD__notes > *:last-child {
	margin-bottom: 0 !important;
}

.c-mediaD__notes > ul + .u-color-red {
	margin-top: -30px;
}

.c-mediaD__toDetail {
	margin: 24px auto 0;
}

#kss-node .c-mediaD {
	max-width: 720px;
	margin: 0;
}

@media screen and (max-width: 736px) {
	.c-mediaD {
		margin: 0 auto 50px;
	}

	.c-mediaD__inner {
		display: block;
		overflow: hidden;
	}

	.c-mediaD__vis {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		float: left;
		width: 23.9%;
		margin: 0;
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.c-mediaD__detail {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: auto;
	}

	.c-mediaD__header {
		float: right;
		width: 69.1%;
		margin: 0;
		text-align: left;
		font-size: 17px;
		font-size: 1.0625rem;
		line-height: 1.5;
	}

	.c-mediaD__header > small {
		display: block;
		margin: 15px auto 0;
	}

	.c-mediaD__notes {
		clear: both;
		padding: 15px 0 0;
	}

	.c-mediaD__notes > ul + .u-color-red {
		margin-top: -10px;
	}

	.c-mediaD__toDetail {
		text-align: left;
	}
}

/*
110 x 158

特設コンテンツ（横幅375px）で使用します


Markup:
<div class="c-mediaE {{modifier_class}}">
	<div class="c-mediaE__inner">
		<figure class="c-mediaE__vis"><img src="http://via.placeholder.com/220x316"></figure>
		<div class="c-mediaE__detail">
			<p class="c-mediaE__header">見出し見出し見出し見出し見出し見出し <small>細目テキスト</small></p>
			<div class="c-mediaE__notes">
				<p>説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p>
			</div>
		</div>
	</div>
</div>

.c-mediaE--onVisRight - 画像右
.c-mediaE--onVisLeft - 画像左
.c-mediaE--middle - 縦位置中央寄せ

Styleguide 11.6
*/
.c-mediaE {
	margin: 0 auto 50px;
}

.c-mediaE--onVisRight .c-mediaE__inner {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.c-mediaE--onVisRight .c-mediaE__detail {
	padding-left: 0;
	padding-right: 20px;
}

.c-mediaE--middle .c-mediaE__inner {
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.c-mediaE--movie .c-mediaE__vis a {
	position: relative;
	display: block;
	-webkit-transition: opacity 250ms;
	-o-transition: opacity 250ms;
	transition: opacity 250ms;
}

.c-mediaE--movie .c-mediaE__vis a:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 30px;
	height: 30px;
	margin: auto;
	background: url(../svg/ico_play.svg) no-repeat center;
	background-size: 100% auto;
}

.c-mediaE--movie .c-mediaE__vis a:hover {
	opacity: 0.7;
	-webkit-transition: opacity 250ms;
	-o-transition: opacity 250ms;
	transition: opacity 250ms;
}

.c-mediaE__inner {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.c-mediaE__vis {
	width: 160px;
	text-align: center;
}

.c-mediaE__vis img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.c-mediaE__detail {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	padding-left: 20px;
	padding-right: 0;
}

.c-mediaE__header {
	margin: 0 auto 5px;
	font-weight: bold;
	font-size: 17px;
	font-size: 1.0625rem;
	line-height: 1.76471;
}

.c-mediaE__header > small {
	font-weight: normal;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1;
}

.c-mediaE__notes {
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.46667;
}

#kss-node .c-mediaE {
	max-width: 375px;
	margin: 0;
}

@media screen and (max-width: 736px) {
	.c-mediaE {
		margin: 0 auto 50px;
	}

	.c-mediaE--movie .c-mediaE__vis a:before {
		width: 50px;
		height: 50px;
	}

	.c-mediaE__inner {
		display: block;
	}

	.c-mediaE__vis {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: auto;
		max-width: 450px;
		margin: 0 auto 15px;
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.c-mediaE__detail {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: auto;
	}

	.c-mediaE__header {
		margin: 0 auto 5px;
		font-size: 17px;
		font-size: 1.0625rem;
		line-height: 1.76471;
	}

	.c-mediaE__header > small {
		font-weight: bold;
		font-size: 17px;
		font-size: 1.0625rem;
		line-height: 1.76471;
	}

	.c-mediaE__notes {
		padding: 0;
	}

	.c-mediaE__toDetail {
		text-align: left;
	}
}

/*
240 x 160

第２階層（横幅1000px）で使用します


Markup:
<div class="c-mediaF {{modifier_class}}">
	<div class="c-mediaF__inner">
		<figure class="c-mediaF__vis"><img src="http://via.placeholder.com/480x320"></figure>
		<div class="c-mediaF__detail">
			<p class="c-mediaF__header">見出し見出し見出し見出し見出し見出し</p>
			<div class="c-mediaF__notes">
				<p>説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p>
			</div>
			<div class="c-mediaF__toDetail">
				<p><a href="" class="c-button c-button--md c-button--fill"><i class="c-icon--arrowCircle"></i><span>ボタン</span></a></p>
			</div>
		</div>
	</div>
</div>

.c-mediaF--onVisRight - 画像右
.c-mediaF--onVisLeft - 画像左
.c-mediaF--middle - 縦位置中央寄せ

Styleguide 11.7
*/
.c-mediaF {
	margin: 0 auto 50px;
}

.c-mediaF--onVisRight .c-mediaF__inner {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.c-mediaF--onVisRight .c-mediaF__detail {
	padding-left: 0;
	padding-right: 30px;
}

.c-mediaF--middle .c-mediaF__inner {
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.c-mediaF__inner {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.c-mediaF__vis {
	width: 240px;
	text-align: center;
}

.c-mediaF__vis img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.c-mediaF__detail {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	padding-left: 30px;
	padding-right: 0;
}

.c-mediaF__header {
	margin: 0 auto 5px;
	font-weight: bold;
	font-size: 17px;
	font-size: 1.0625rem;
	line-height: 1.76471;
}

.c-mediaF__notes {
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.8;
}

.c-mediaF__toDetail {
	margin: 30px auto 0;
}

#kss-node .c-mediaF {
	max-width: 1000px;
	margin: 0;
}

@media screen and (max-width: 736px) {
	.c-mediaF {
		margin: 0 auto 50px;
	}

	.c-mediaF__inner {
		display: block;
	}

	.c-mediaF__vis {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: 82%;
		max-width: 450px;
		margin: 0 auto 15px;
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.c-mediaF__detail {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: auto;
		padding: 0;
	}

	.c-mediaF__header {
		margin: 0 auto 5px;
		font-size: 17px;
		font-size: 1.0625rem;
		line-height: 1.58824;
	}

	.c-mediaF__notes {
		padding: 0;
	}

	.c-mediaF__toDetail {
		text-align: center;
	}
}

/*
動画

リンク先に動画のURLを指定しください。

Markup:
<a href="/assets/video/movie/movie_01.mp4" class="c-magnific--movie js-movie">
	<img src="http://via.placeholder.com/640x360">
</a>

Styleguide 21.1
*/
.c-magnific--movie {
	position: relative;
	display: block;
}

.c-magnific--movie:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 60px;
	height: 60px;
	margin: auto;
	background: url(../svg/ico_play.svg) no-repeat center;
	background-size: 100% auto;
	pointer-events: none;
}

.c-magnific--movie img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

.c-magnific--movie:hover {
	opacity: 0.7;
	-webkit-transition: opacity 250ms;
	-o-transition: opacity 250ms;
	transition: opacity 250ms;
}

#kss-node .c-magnific--movie {
	max-width: 320px;
}

/*--------------------------------------------------------------------------------
	下層ページ用 汎用モジュール - モーダルウィンドウ本体
--------------------------------------------------------------------------------*/
.c-popup {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 100%;
	min-height: 320px;
	letter-spacing: -0.5em;
	text-align: center;
	background: rgba(0, 0, 0, 0.65);
	opacity: 0;
	-webkit-transition: opacity 100ms;
	-o-transition: opacity 100ms;
	transition: opacity 100ms;
}

.c-popup.is-visible {
	opacity: 1;
	-webkit-transition: opacity 100ms;
	-o-transition: opacity 100ms;
	transition: opacity 100ms;
}

.c-popup:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 0;
	height: 100%;
}

.c-popup__mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	margin: auto;
}

.c-popup__inner {
	position: relative;
	z-index: 2;
	display: inline-block;
	vertical-align: middle;
	width: 99%;
	height: 80%;
	max-width: 840px;
	padding: 0 10px;
	letter-spacing: normal;
	text-align: left;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.c-popup__container {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.c-popup__close {
	position: absolute;
	bottom: 100%;
	right: 0;
	padding: 3px 3px 12px;
	font-size: 42px;
	color: #fff;
	text-align: right;
	cursor: pointer;
}

.c-popup__vis {
	text-align: center;
}

.c-popup__vis img {
	display: block;
	margin: 0 auto;
	-webkit-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
}

.c-popup__vis video {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

.c-popup__vis.is-zoom img {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition: -webkit-transform 300ms ease-in-out;
	transition: -webkit-transform 300ms ease-in-out;
	-o-transition: transform 300ms ease-in-out;
	transition: transform 300ms ease-in-out;
	transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
}

.c-popup.is-vertical .c-popup__vis img, .c-popup.is-vertical .c-popup__vis video {
	max-width: 100%;
	height: auto;
}

.c-popup.is-horizontal .c-popup__inner {
	height: 80%;
}

.c-popup.is-horizontal .c-popup__container {
	height: 100%;
}

.c-popup.is-horizontal .c-popup__vis {
	height: 100%;
}

.c-popup.is-horizontal .c-popup__vis img, .c-popup.is-horizontal .c-popup__vis video {
	width: auto;
	height: 100%;
}

@media screen and (max-width: 736px) {
	.c-popup__close {
		bottom: 100%;
	}

	.c-popup__vis.is-zoom img {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}
}

@media screen and (max-height: 596px) {
	.c-popup__close {
		padding-bottom: 5px;
		font-size: 24px;
	}
}

.p-special-front-hero {
	height: 526px;
	padding: 70px 0 0;
	background: url(../img/special/front/bg_hero.png) no-repeat center bottom;
	background-size: 1109px auto;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.p-special-front-hero__inner {
	position: relative;
	height: 100%;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
}

.p-special-front-hero__heading {
	width: 411px;
	margin: 0 0 16px auto;
	padding: 0 60px 0 0;
}

.p-special-front-hero__heading:before {
	content: '';
	display: block;
	padding-top: 125px;
	background: url(../img/special/front/bg_header_hero.png) no-repeat center;
	background-size: contain;
}

.p-special-front-hero__lead {
	width: 416px;
	margin: 0 0 0 auto;
	padding: 0 60px 0 0;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.5;
	text-align: center;
}

.p-special-front-hero__icon:before {
	content: '';
	display: block;
	position: absolute;
	right: 446px;
	bottom: 160px;
	width: 24px;
	height: 28px;
	background: url(../img/special/front/q.png) no-repeat 0px 0px;
	background-size: 100% auto;
	-webkit-animation: sprite 1.5s steps(2, end) infinite;
	animation: sprite 1.5s steps(2, end) infinite;
}

.p-special-front-hero__icon:after {
	content: '';
	display: block;
	position: absolute;
	right: 334px;
	bottom: 166px;
	width: 24px;
	height: 28px;
	background: url(../img/special/front/q.png) no-repeat 0px 0px;
	background-size: 100% auto;
	-webkit-animation: sprite 1.5s steps(2, end) infinite;
	animation: sprite 1.5s steps(2, end) infinite;
}

.p-special-front-hero__icon > div:before {
	content: '';
	display: block;
	position: absolute;
	right: 236px;
	bottom: 160px;
	width: 24px;
	height: 28px;
	background: url(../img/special/front/q.png) no-repeat 0px 0px;
	background-size: 100% auto;
	-webkit-animation: sprite 1.5s steps(2, end) infinite;
	animation: sprite 1.5s steps(2, end) infinite;
}

.p-special-front-hero__icon > div:after {
	content: '';
	display: block;
	position: absolute;
	right: 117px;
	bottom: 166px;
	width: 24px;
	height: 28px;
	background: url(../img/special/front/q.png) no-repeat 0px 0px;
	background-size: 100% auto;
	-webkit-animation: sprite 1.5s steps(2, end) infinite;
	animation: sprite 1.5s steps(2, end) infinite;
}

@-webkit-keyframes sprite {
	0% {
		background-position: 0 0px;
	}

	100% {
		background-position: 0 -56px;
	}
}

@keyframes sprite {
	0% {
		background-position: 0 0px;
	}

	100% {
		background-position: 0 -56px;
	}
}

@media screen and (max-width: 736px) {
	.p-special-front-hero {
		height: auto;
		padding: 0;
		background: none;
	}

	.p-special-front-hero__inner {
		padding: 30px 0;
	}

	.p-special-front-hero__heading {
		width: auto;
		margin: 0 auto 35px;
		padding: 0;
	}

	.p-special-front-hero__heading:before {
		padding-top: 82px;
	}

	.p-special-front-hero__heading:after {
		content: '';
		display: block;
		padding-top: 218px;
		background: url(../img/special/front/bg_hero_sp.png) no-repeat center;
		background-size: contain;
	}

	.p-special-front-hero__lead {
		width: auto;
		margin: 0 auto;
		padding: 0;
	}

	.p-special-front-hero__icon:before, .p-special-front-hero__icon:after {
		display: none;
		-webkit-animation: none;
		animation: none;
	}

	.p-special-front-hero__icon > div:before, .p-special-front-hero__icon > div:after {
		display: none;
		-webkit-animation: none;
		animation: none;
	}
}

.p-special-front-whats {
	position: relative;
	float: left;
	width: 50%;
	text-align: center;
	background: #fff6cd;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.p-special-front-whats > a {
	position: relative;
	display: block;
	padding: 15px;
	color: #111;
}

.p-special-front-whats > a:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding-top: 208px;
	background: url(../img/special/front/bg_whats.png) no-repeat center bottom;
	background-size: auto 100%;
	-webkit-transition: all 250ms ease-out;
	-o-transition: all 250ms ease-out;
	transition: all 250ms ease-out;
}

.platform-desktop .p-special-front-whats > a:hover:after {
	padding-top: 220px;
	-webkit-transition: padding-top 250ms ease-out;
	-o-transition: padding-top 250ms ease-out;
	transition: padding-top 250ms ease-out;
}

.platform-desktop .p-special-front-whats > a:hover .p-special-front-whats__inner {
	border-color: #c7bf15;
	-webkit-transition: border-color 250ms;
	-o-transition: border-color 250ms;
	transition: border-color 250ms;
}

.p-special-front-whats__inner {
	position: relative;
	height: 420px;
	border: 2px solid #e6e18c;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.p-special-front-whats__heading {
	margin: 0 auto 22px;
	padding: 65px 0 0;
}

.p-special-front-whats__heading:after {
	content: '';
	display: block;
	padding-top: 46px;
	background: url(../img/special/front/bg_header_whats.png) no-repeat center;
	background-size: contain;
}

.p-special-front-whats__lead {
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.p-special-front-how {
	float: right;
	width: 50%;
	text-align: center;
	background: #ffe9e9;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.p-special-front-how + * {
	clear: both;
}

.p-special-front-how > a {
	position: relative;
	display: block;
	padding: 15px;
	color: #111;
}

.p-special-front-how > a:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding-top: 189px;
	background: url(../img/special/front/bg_how.png) no-repeat center bottom;
	background-size: auto 100%;
	-webkit-transition: all 250ms ease-out;
	-o-transition: all 250ms ease-out;
	transition: all 250ms ease-out;
}

.platform-desktop .p-special-front-how > a:hover:after {
	padding-top: 200px;
	-webkit-transition: all 250ms ease-out;
	-o-transition: all 250ms ease-out;
	transition: all 250ms ease-out;
}

.platform-desktop .p-special-front-how > a:hover .p-special-front-how__inner {
	border-color: #fb8c72;
	-webkit-transition: border-color 250ms;
	-o-transition: border-color 250ms;
	transition: border-color 250ms;
}

.p-special-front-how__inner {
	position: relative;
	height: 420px;
	border: 2px solid #f7cbc1;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.p-special-front-how__heading {
	margin: 0 auto 22px;
	padding: 45px 0 0;
}

.p-special-front-how__heading:after {
	content: '';
	display: block;
	padding-top: 85px;
	background: url(../img/special/front/bg_header_how.png) no-repeat center;
	background-size: contain;
}

.p-special-front-how__lead {
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

@media screen and (max-width: 736px) {
	.p-special-front-whats {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		float: none;
		width: auto;
		margin: 0 -15px;
	}

	.p-special-front-whats > a {
		padding: 10px;
	}

	.p-special-front-whats > a:after {
		padding-top: 140px;
	}

	.platform-desktop .p-special-front-whats > a:hover:after {
		padding-top: 150px;
	}

	.p-special-front-whats__inner {
		height: 350px;
	}

	.p-special-front-whats__heading {
		margin: 0 auto 23px;
		padding: 43px 0 0;
	}

	.p-special-front-whats__heading:after {
		padding-top: 35px;
	}

	.p-special-front-how {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		float: none;
		width: auto;
		margin: 0 -15px;
	}

	.p-special-front-how > a {
		padding: 10px;
	}

	.p-special-front-how > a:after {
		padding-top: 130px;
	}

	.platform-desktop .p-special-front-how > a:hover:after {
		padding-top: 140px;
	}

	.p-special-front-how__inner {
		height: 350px;
	}

	.p-special-front-how__heading {
		margin: 0 auto 23px;
		padding: 40px 0 0;
	}

	.p-special-front-how__heading:after {
		padding-top: 64px;
	}
}

.p-special-front-check {
	position: relative;
	background: #d0f8ff url(../img/special/bg_town_blue.png) repeat-x center bottom;
	background-size: auto 75px;
}

.p-special-front-check:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 0;
	margin: auto;
	padding-top: 277px;
	background: url(../img/special/front/bg_check.png) no-repeat center bottom;
	background-size: auto 100%;
	-webkit-transform: translateY(53px);
	-ms-transform: translateY(53px);
	transform: translateY(53px);
}

.p-special-front-check__inner {
	position: relative;
	z-index: 1;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
	padding: 44px 0 160px;
}

.p-special-front-check__lead {
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.8;
	text-align: center;
}

.p-special-front-check__heading {
	margin: 0 auto 22px;
}

.p-special-front-check__heading:before {
	content: '';
	display: block;
	padding-top: 103px;
	background: url(../img/special/front/bg_header_check.png) no-repeat center bottom;
	background-size: auto 100%;
}

.p-special-front-check__body {
	margin: 46px auto 0;
}

[class*="p-special-front-cloud"] {
	display: block;
	position: absolute;
	width: 128px;
	height: 80px;
	background: url(../img/special/front/cloud.png) no-repeat;
	background-size: contain;
}

[class*="p-special-front-cloud"][data-index="0"] {
	top: 100px;
	right: -220px;
}

[class*="p-special-front-cloud"][data-index="1"] {
	top: 170px;
	right: -55px;
}

[class*="p-special-front-cloud"][data-index="2"] {
	top: 210px;
	left: -10px;
}

[class*="p-special-front-cloud"][data-index="3"] {
	top: 120px;
	left: -225px;
}

@media screen and (max-width: 736px) {
	.p-special-front-check {
		margin: 0 -15px;
		background-color: #d0f8ff;
		background-image: url(../img/special/front/bg_cloud_sp.png), url(../img/special/bg_town_blue.png);
		background-repeat: no-repeat, repeat-x;
		background-position: center 28px, center bottom;
		background-size: auto 438px, auto 60px;
		-webkit-animation: none;
		animation: none;
	}

	.p-special-front-check:after {
		width: 100%;
		padding-top: 200px;
		background: url(../img/special/front/bg_check_sp.png) no-repeat center bottom;
		background-size: auto 100%;
		-webkit-transform: translateY(61px);
		-ms-transform: translateY(61px);
		transform: translateY(61px);
	}

	.p-special-front-check__inner {
		padding: 32px 0 160px;
	}

	.p-special-front-check__heading {
		margin: 0 auto 15px;
	}

	.p-special-front-check__heading:before {
		padding-top: 112px;
		background: url(../img/special/front/bg_header_check_sp.png) no-repeat center;
		background-size: contain;
	}

	.p-special-front-check__body {
		margin: 32px auto 0;
	}

	[class*="p-special-front-cloud"] {
		display: none;
	}
}

.p-special-front-relation {
	margin: 0 auto;
}

.p-special-front-relation__inner {
	max-width: 886px;
	margin: 0 auto;
	padding: 93px 0 64px;
}

.p-special-front-relation__heading {
	margin: 0 auto 37px;
	text-align: center;
	font-size: 23px;
	font-size: 1.4375rem;
	line-height: 1.17391;
}

.p-special-front-relation__heading > span {
	position: relative;
	display: inline-block;
}

.p-special-front-relation__heading > span:before {
	content: '';
	position: absolute;
	top: -2px;
	left: -16px;
	display: block;
	width: 2px;
	padding-top: 28px;
	background: #2C99DE;
	-webkit-transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	transform: rotate(-20deg);
	-webkit-transform-origin: 0 100%;
	-ms-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

.p-special-front-relation__heading > span:after {
	content: '';
	position: absolute;
	top: -2px;
	right: -16px;
	display: block;
	width: 2px;
	padding-top: 28px;
	background: #2C99DE;
	-webkit-transform: rotate(20deg);
	-ms-transform: rotate(20deg);
	transform: rotate(20deg);
	-webkit-transform-origin: 0 100%;
	-ms-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

@media screen and (max-width: 736px) {
	.p-special-front-relation__inner {
		padding: 85px 0 80px;
	}

	.p-special-front-relation__heading {
		margin: 0 auto 20px;
		text-align: center;
		font-size: 19px;
		font-size: 1.1875rem;
		line-height: 1.47368;
	}

	.p-special-front-relation__heading > span {
		position: relative;
		display: inline-block;
	}

	.p-special-front-relation__heading > span:before {
		content: '';
		position: absolute;
		top: 5px;
		left: -12px;
		display: block;
		width: 2px;
		padding-top: 46px;
		background: #2C99DE;
		-webkit-transform: rotate(-20deg);
		-ms-transform: rotate(-20deg);
		transform: rotate(-20deg);
		-webkit-transform-origin: 0 100%;
		-ms-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}

	.p-special-front-relation__heading > span:after {
		content: '';
		position: absolute;
		top: 5px;
		right: -12px;
		display: block;
		width: 2px;
		padding-top: 46px;
		background: #2C99DE;
		-webkit-transform: rotate(20deg);
		-ms-transform: rotate(20deg);
		transform: rotate(20deg);
		-webkit-transform-origin: 0 100%;
		-ms-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}
}

/*--------------------------------------------------------------------------------
	contents body
--------------------------------------------------------------------------------*/
.p-special-component-contentsbody {
	margin: 0 auto 50px;
	padding: 62px 75px 55px;
	background: #fff;
	border-radius: 10px;
	-webkit-box-shadow: 0px 4px 0px -1px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 4px 0px -1px rgba(0, 0, 0, 0.2);
}

.p-special-component-contentsbody > *:first-child {
	margin-top: 0 !important;
}

.p-special-component-contentsbody > *:last-child {
	margin-bottom: 0 !important;
}

@media screen and (max-width: 736px) {
	.p-special-component-contentsbody {
		position: relative;
		z-index: 1;
		margin: 0 -14px 27px;
		padding: 30px 14px;
	}
}

/*--------------------------------------------------------------------------------
	overview
--------------------------------------------------------------------------------*/
.p-special-component-overview {
	margin: 0 auto 17px;
}

.p-special-component-overview__header {
	position: relative;
	float: left;
	width: 424px;
	margin: 35px 0 40px;
	text-align: center;
}

.p-special-component-overview__header img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

.p-special-component-overview__vis {
	float: right;
	width: 576px;
	text-align: center;
}

.p-special-component-overview__vis > span {
	display: block;
	margin: 0 -15px 0 -45px;
}

.p-special-component-overview__vis > span img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.p-special-component-overview__lead {
	position: relative;
	margin-right: 576px;
	margin-bottom: 10px;
	text-align: center;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.8;
}

.p-special-component-overview__comment {
	margin-right: 576px;
}

.p-special-component-overview__comment figure {
	width: 100px;
	margin: 0 auto 27px;
}

.p-special-component-overview__comment figure img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.p-special-component-overview__comment p {
	position: relative;
	padding: 15px 20px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.8;
	background: #fff;
	border-radius: 10px;
	-webkit-box-shadow: 0px 4px 0px -1px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 4px 0px -1px rgba(0, 0, 0, 0.2);
}

.p-special-component-overview__comment p:before {
	content: '';
	display: block;
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	width: 0;
	height: 0;
	margin: auto;
	border: 7px solid transparent;
	border-bottom-color: #fff;
	border-top-width: 15px;
	border-bottom-width: 15px;
}

@media screen and (max-width: 736px) {
	.p-special-component-overview {
		margin: 0 auto 34px;
	}

	[data-namespace="special-check-front"] .p-special-component-overview {
		position: relative;
		z-index: 1;
	}

	[data-namespace="special-check-front"] .p-special-component-overview:before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 0;
		margin: 0 -14px -40px;
		padding-top: 200px;
		background: #ebfcd4;
	}

	[data-namespace="special-check-front"] .p-special-component-overview:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 0;
		margin: 0 -14px -40px;
		padding-top: 200px;
		background: url(../img/special/bg_town_blue.png) repeat-x center top;
		background-size: auto 62px;
		-webkit-transform: translateY(-62px);
		-ms-transform: translateY(-62px);
		transform: translateY(-62px);
	}

	[data-namespace="special-check-front"] .p-special-component-overview .p-special-component-overview__header {
		margin-bottom: 0;
	}

	[data-namespace="special-check-front"] .p-special-component-overview .p-special-component-overview__vis {
		margin: 0 -20px;
	}

	[data-namespace="special-check-front"] .p-special-component-overview .p-special-component-overview__vis span {
		padding-right: 7%;
	}

	.p-special-component-overview__inner {
		position: relative;
		z-index: 1;
	}

	.p-special-component-overview__header {
		float: none;
		width: auto;
		margin: 18px auto 27px;
	}

	.p-special-component-overview__vis {
		float: none;
		width: auto;
		margin: 0 auto 30px;
	}

	.p-special-component-overview__vis > span {
		margin: 0 auto;
	}

	.p-special-component-overview__vis > span img {
		max-width: 550px;
	}

	.p-special-component-overview__lead {
		width: auto;
		margin: 0 auto 10px;
	}

	.p-special-component-overview__comment {
		margin: 0 auto;
		padding: 0 5px;
	}
}

/*--------------------------------------------------------------------------------
	overview B
--------------------------------------------------------------------------------*/
.p-special-component-overviewB {
	position: relative;
	margin: 0 auto 30px;
}

.p-special-component-overviewB:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 1225px;
	margin: auto -112px;
	background-position: center 20px;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

[data-namespace="special-whats"] .p-special-component-overviewB:before {
	background-image: url(../img/special/whats/bg_overview.png);
}

[data-namespace="special-whats"] .p-special-component-overviewB .p-special-component-overviewB__header {
	color: #dea611;
}

[data-namespace="special-whats"] .p-special-component-overviewB .p-special-component-overviewB__list li:before {
	color: #d2a11d;
}

.p-special-component-overviewB__header {
	margin: 0 auto 35px;
	font-family: YakuHanJPs, -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ W6", "Hiragino Kaku Gothic W6", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic W3", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-weight: bold;
	font-size: 48px;
	font-size: 3rem;
	line-height: 1.25;
}

.p-special-component-overviewB__list {
	position: relative;
	width: 750px;
	margin: 0 0 34px;
	padding: 45px 45px 72px;
	font-weight: bold;
	color: #fff;
	border: 3px solid #000;
	background: #5a8166;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.p-special-component-overviewB__list:before {
	content: '';
	display: block;
	position: absolute;
	top: 25px;
	right: -250px;
	width: 214px;
	height: 374px;
	background: url(../img/special/pic_professor.png) no-repeat center bottom;
	background-size: 100% auto;
}

.p-special-component-overviewB__list:after {
	content: '';
	display: block;
	position: absolute;
	bottom: -15px;
	left: 0;
	right: 0;
	margin: 0 -10px;
	padding-top: 36px;
	background: url(../img/special/bg_blackboad_rail.png) no-repeat center bottom;
	background-size: auto 100%;
}

.p-special-component-overviewB__list li {
	font-size: 18px;
	font-size: 1.125rem;
	line-height: 1.5;
}

.p-special-component-overviewB__list li:not(:last-of-type) {
	margin-bottom: 18px;
}

.p-special-component-overviewB__list li:before {
	content: "\e919";
	vertical-align: text-bottom;
	margin: 5px 12px 0 0;
	font-size: 20px;
}

.p-special-component-overviewB__lead {
	width: 750px;
	margin: 0;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.8;
}

@media screen and (max-width: 736px) {
	.p-special-component-overviewB {
		margin: 0 auto 30px;
		padding: 18px 0 0;
		text-align: center;
		background-position: center 185px;
		background-repeat: no-repeat;
		background-size: 320px auto;
	}

	[data-namespace="special-whats"] .p-special-component-overviewB {
		background-image: url(../img/special/whats/bg_overview_sp.png);
	}

	.p-special-component-overviewB:before {
		content: none;
		display: none;
	}

	.p-special-component-overviewB__header {
		position: relative;
		max-width: 292px;
		margin: 0 auto 170px;
		padding: 50px 0;
		font-size: 30px;
		font-size: 1.875rem;
		line-height: 1.33333;
		color: #fff !important;
		text-align: center;
		border: 2px solid #000;
		background: #5a8166;
	}

	.p-special-component-overviewB__header:before {
		content: '';
		display: block;
		position: absolute;
		bottom: -150px;
		left: 0;
		right: 0;
		z-index: 2;
		width: 105px;
		height: 182px;
		margin: auto;
		background: url(../img/special/pic_professor.png) no-repeat center bottom;
		background-size: auto 100%;
	}

	.p-special-component-overviewB__header:after {
		content: '';
		display: block;
		position: absolute;
		bottom: -10px;
		left: 0;
		right: 0;
		z-index: 1;
		margin: 0 -10px;
		padding-top: 24px;
		background: url(../img/special/bg_blackboad_rail_sp.png) no-repeat center bottom;
		background-size: auto 100%;
	}

	.p-special-component-overviewB__list {
		display: inline-block;
		width: auto;
		margin: 0 auto 25px;
		padding: 0;
		border: none;
		background: none;
		text-align: left;
		color: #000;
	}

	.p-special-component-overviewB__list:before, .p-special-component-overviewB__list:after {
		content: none;
		display: none;
	}

	.p-special-component-overviewB__list li {
		text-indent: -33px;
		margin-left: 33px;
		font-size: 18px;
		font-size: 1.125rem;
		line-height: 1.38889;
	}

	.p-special-component-overviewB__list li:not(:last-of-type) {
		margin-bottom: 8px;
	}

	.p-special-component-overviewB__lead {
		width: auto;
		margin: 0 auto 10px;
		text-align: left;
	}
}

/*--------------------------------------------------------------------------------
	overview C
--------------------------------------------------------------------------------*/
.p-special-component-overviewC {
	position: relative;
	margin: 0 auto 35px;
}

[data-namespace="special-whats"] .p-special-component-overviewC .p-special-component-overviewC__header {
	color: #dea611;
}

[data-namespace="special-how"] .p-special-component-overviewC .p-special-component-overviewC__header {
	color: #e63361;
}

[data-namespace="special-more"] .p-special-component-overviewC .p-special-component-overviewC__header {
	color: #79b74a;
}

.p-special-component-overviewC__inner {
	position: relative;
}

.p-special-component-overviewC__header {
	margin: 0 auto 30px;
	font-family: YakuHanJPs, -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ W6", "Hiragino Kaku Gothic W6", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic W3", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-weight: bold;
	font-size: 45px;
	font-size: 2.8125rem;
	line-height: 1.33333;
}

.p-special-component-overviewC__vis {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: 250px;
}

.p-special-component-overviewC__vis > div {
	margin-left: -140px;
	-webkit-transform: translateY(10px);
	-ms-transform: translateY(10px);
	transform: translateY(10px);
}

.p-special-component-overviewC__vis > div img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.p-special-component-overviewC__list {
	position: relative;
	width: 750px;
	margin: 0 0 25px;
	padding: 33px 180px 28px 33px;
	font-weight: bold;
	border: 2px solid #BCBCBC;
	background: #fff;
	-webkit-box-shadow: 0 0 0 5px #e0e0e0 inset;
	box-shadow: 0 0 0 5px #e0e0e0 inset;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.p-special-component-overviewC__list p {
	margin: 0 auto 20px;
	font-size: 18px;
	font-size: 1.125rem;
	line-height: 1.11111;
}

.p-special-component-overviewC__list ul {
	margin-bottom: 0;
}

.p-special-component-overviewC__lead {
	clear: both;
	width: 750px;
	margin: 0;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.8;
}

@media screen and (max-width: 736px) {
	.p-special-component-overviewC {
		margin: 0 auto 35px;
		padding: 0;
	}

	.p-special-component-overviewC__header {
		margin: 0 auto 20px;
		padding: 14px 0 0;
		font-size: 30px;
		font-size: 1.875rem;
		line-height: 1.33333;
		text-align: center;
	}

	.p-special-component-overviewC__inner {
		display: block;
		margin: 0 auto;
	}

	.p-special-component-overviewC__vis {
		position: static;
		right: auto;
		bottom: auto;
		z-index: auto;
		width: auto;
		max-width: 450px;
		margin: 0 auto 20px;
		padding: 0 15px;
	}

	.p-special-component-overviewC__vis > div {
		margin: 0;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}

	.p-special-component-overviewC__list {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: auto;
		margin: 0 auto 25px;
		padding: 0;
		border: none;
		background: none;
		text-align: left;
		-webkit-box-shadow: none;
		box-shadow: none;
	}

	.p-special-component-overviewC__list p {
		margin: 0 auto 15px;
	}

	.p-special-component-overviewC__list li {
		font-size: 18px;
		font-size: 1.125rem;
		line-height: 1.38889;
	}

	.p-special-component-overviewC__lead {
		width: auto;
		margin: 0 auto 10px;
		text-align: left;
	}
}

/*--------------------------------------------------------------------------------
	secondaryHeading
--------------------------------------------------------------------------------*/
.p-special-component-secondaryHeading {
	margin: 0 auto 50px;
	padding: 0 0 20px;
	font-family: YakuHanJPs, -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ W6", "Hiragino Kaku Gothic W6", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic W3", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-weight: bold;
	font-size: 32px;
	font-size: 2rem;
	line-height: 0.84375;
	text-align: center;
	border-bottom: 2px solid #2C99DE;
}

[data-namespace="special-whats"] .p-special-component-secondaryHeading {
	border-color: #dea611;
}

[data-namespace="special-how"] .p-special-component-secondaryHeading {
	border-color: #e63361;
}

@media screen and (max-width: 736px) {
	.p-special-component-secondaryHeading {
		margin: 0 auto 35px;
		padding: 0 0 8px;
		font-size: 23px;
		font-size: 1.4375rem;
		line-height: 1.30435;
		text-align: left;
	}
}

.p-special-component-secondaryHeadingV2 {
	margin: 60px auto 30px;
	padding: 6px 0 10px;
	font-family: YakuHanJPs, -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ W6", "Hiragino Kaku Gothic W6", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic W3", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-weight: bold;
	text-align: center;
	font-size: 27px;
	font-size: 1.6875rem;
	line-height: 1.3;
	border-bottom: 1px solid #2C99DE;
}

.p-special-component-secondaryHeadingV2.yellow {
	border-color: #dea611;
}

.p-special-component-secondaryHeadingV2.pink {
	border-color: #e63361;
}

@media screen and (max-width: 736px) {
	.p-special-component-secondaryHeadingV2 {
		margin: 40px auto 20px;
		padding: 4px 0 8px;
		font-size: 21px;
		font-size: 1.3125rem;
		line-height: 1.5;
		text-align: left;
	}
}

/*--------------------------------------------------------------------------------
	tertiaryHeading
--------------------------------------------------------------------------------*/
.p-special-component-tertiaryHeading {
	margin: 10px auto 24px;
	margin-left: 32px;
	text-indent: -32px;
	font-family: YakuHanJPs, -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ W6", "Hiragino Kaku Gothic W6", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic W3", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-weight: bold;
	font-size: 21px;
	font-size: 1.3125rem;
	line-height: 1.5;
}

[data-namespace="special-whats"] .p-special-component-tertiaryHeading:before {
	border-color: #dea611;
}

[data-namespace="special-how"] .p-special-component-tertiaryHeading:before {
	border-color: #e63361;
}

.p-special-component-tertiaryHeading:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 22px;
	height: 22px;
	margin: 0 10px 0 0;
	border: 5px solid #2C99DE;
	border-radius: 50%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

@media screen and (max-width: 736px) {
	.p-special-component-tertiaryHeading {
		margin-top: 0;
		margin-bottom: 20px;
		font-size: 19px;
		font-size: 1.1875rem;
		line-height: 1.5;
	}
}

/*--------------------------------------------------------------------------------
	quaternaryHeading
--------------------------------------------------------------------------------*/
.p-special-component-quaternaryHeading {
	display: table;
	margin: 0 auto 20px;
	padding: 0 0 10px;
	font-family: YakuHanJPs, -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ W6", "Hiragino Kaku Gothic W6", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic W3", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-weight: bold;
	font-size: 20px;
	font-size: 1.25rem;
	line-height: 1.35;
	text-align: center;
	border-bottom: 2px solid #2C99DE;
}

[data-namespace="special-whats"] .p-special-component-quaternaryHeading {
	color: #dea611;
	border-color: #dea611;
}

[data-namespace="special-how"] .p-special-component-quaternaryHeading {
	color: #e63361;
	border-color: #e63361;
}

/*--------------------------------------------------------------------------------
	paragraph
--------------------------------------------------------------------------------*/
.p-special-component-paragraph, .p-special-component-paragraph--imageBordered {
	margin: 0 auto 45px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.66667;
}

.p-special-component-paragraph img, .p-special-component-paragraph--imageBordered img {
	display: block;
	margin: 0 auto;
	max-width: 660px;
	height: auto;
	vertical-align: bottom;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.p-special-component-paragraph--imageBordered img {
	border: 1px solid #ccc;
	border-radius: 4px;
}

@media screen and (max-width: 736px) {
	.p-special-component-paragraph, .p-special-component-paragraph--imageBordered {
		margin: 0 auto 25px;
	}

	.p-special-component-paragraph img, .p-special-component-paragraph--imageBordered img {
		max-width: 100%;
	}

	.p-special-component-paragraph--imageBordered {
		margin: 0 auto 25px;
	}

	.p-special-component-paragraph--imageBordered img {
		max-width: 100%;
	}
}

/*--------------------------------------------------------------------------------
	anchor
--------------------------------------------------------------------------------*/
.p-special-component-anchor {
	margin: 40px auto 35px;
	overflow: hidden;
}

[data-namespace="special-whats"] .p-special-component-anchor .p-special-component-anchor__item {
	background: #dea611;
}

[data-namespace="special-whats"] .p-special-component-anchor .p-special-component-anchor__item > a:hover {
	background: #efbc33;
	-webkit-transition: background 250ms;
	-o-transition: background 250ms;
	transition: background 250ms;
}

.p-special-component-anchor__items {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin: 0 -8px;
}

.p-special-component-anchor__item {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	margin: 0 8px;
	text-align: center;
	border-radius: 8px;
	overflow: hidden;
}

.p-special-component-anchor__item > a {
	display: block;
	padding: 4px;
	color: #fff;
	font-weight: bold;
	font-size: 17px;
	font-size: 1.0625rem;
	line-height: 1;
}

.p-special-component-anchor__item > a > span {
	display: block;
	padding: 14px 0;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: 6px;
}

.p-special-component-anchor__item > a > span i {
	margin: 0 9px 0 0;
}

@media screen and (max-width: 736px) {
	.p-special-component-anchor {
		margin: 0 auto 40px;
	}

	.p-special-component-anchor__items {
		display: block;
		margin: 0 auto;
	}

	.p-special-component-anchor__item {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		margin: 0 auto;
	}

	.p-special-component-anchor__item:not(:last-of-type) {
		margin-bottom: 15px;
	}

	.p-special-component-anchor__item > a {
		display: block;
		padding: 4px;
		color: #fff;
		font-weight: bold;
		font-size: 17px;
		font-size: 1.0625rem;
		line-height: 1;
	}

	.p-special-component-anchor__item > a > span {
		display: block;
		padding: 14px 0;
		border: 2px solid rgba(255, 255, 255, 0.4);
		border-radius: 6px;
	}

	.p-special-component-anchor__item > a > span i {
		margin: 0 9px 0 0;
	}
}

/*--------------------------------------------------------------------------------
	media
--------------------------------------------------------------------------------*/
.p-special-component-media {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin: 0 auto 70px;
}

[data-namespace="special-whats"] .p-special-component-media .p-special-component-media__detail [class*='c-button'][class$='--fill'] {
	background: #dea611;
	border-color: #dea611;
}

[data-namespace="special-whats"] .p-special-component-media .p-special-component-media__detail [class*='c-button'][class$='--fill']:hover {
	background: #efbc33;
	border-color: #efbc33;
}

[data-namespace="special-how"] .p-special-component-media .p-special-component-media__detail [class*='c-button'][class$='--fill'] {
	background: #e63361;
	border-color: #e63361;
}

[data-namespace="special-how"] .p-special-component-media .p-special-component-media__detail [class*='c-button'][class$='--fill']:hover {
	background: #ec6084;
	border-color: #ec6084;
}

.p-special-component-media__vis {
	width: 400px;
}

.p-special-component-media__vis img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.p-special-component-media__detail {
	width: 425px;
}

.p-special-component-media__detail [class*='c-button'] {
	max-width: 180px;
	margin: 0;
}

.p-special-component-media__header {
	margin: 0 auto 20px;
	font-size: 20px;
	font-size: 1.25rem;
	line-height: 1.5;
}

.p-special-component-media__subheader {
	margin: 0 auto 20px;
	font-weight: bold;
	font-size: 17px;
	font-size: 1.0625rem;
	line-height: 1.58824;
}

.p-special-component-media__notes {
	margin: 0 auto 20px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.66667;
}

@media screen and (max-width: 736px) {
	.p-special-component-media {
		display: block;
		margin: 0 auto 53px;
	}

	.p-special-component-media__vis {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: auto;
		max-width: 450px;
		margin: 0 auto 32px;
	}

	.p-special-component-media__detail {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: auto;
	}

	.p-special-component-media__detail [class*='c-button'] {
		margin: 0 auto;
	}

	.p-special-component-media__header {
		margin: 0 auto 25px;
		font-size: 20px;
		font-size: 1.25rem;
		line-height: 1.5;
	}

	.p-special-component-media__subheader {
		margin: 0 auto 10px;
	}

	.p-special-component-media__notes {
		margin: 0 auto 20px;
		font-size: 15px;
		font-size: 0.9375rem;
		line-height: 1.66667;
	}
}

/*--------------------------------------------------------------------------------
	media B
--------------------------------------------------------------------------------*/
.p-special-component-mediaB-Group {
	position: relative;
	margin: 0 0 87px;
	letter-spacing: -0.5em;
}

.p-special-component-mediaB-Group + .p-special-component-mediaB-Group {
	margin-top: -30px;
}

.p-special-component-mediaB-Group:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	width: 1px;
	margin: auto;
	border-left: 7px dotted #e5e5e5;
}

.p-special-component-mediaB {
	display: inline-block;
	vertical-align: top;
	width: 400px;
	text-align: center;
}

[data-namespace="special-whats"] .p-special-component-mediaB .p-special-component-mediaB__detail [class*='c-button'][class$='--fill'] {
	background: #dea611;
	border-color: #dea611;
}

[data-namespace="special-whats"] .p-special-component-mediaB .p-special-component-mediaB__detail [class*='c-button'][class$='--fill']:hover {
	background: #efbc33;
	border-color: #efbc33;
}

[data-namespace="special-how"] .p-special-component-mediaB .p-special-component-mediaB__detail [class*='c-button'][class$='--fill'] {
	background: #e63361;
	border-color: #e63361;
}

[data-namespace="special-how"] .p-special-component-mediaB .p-special-component-mediaB__detail [class*='c-button'][class$='--fill']:hover {
	background: #ec6084;
	border-color: #ec6084;
}

[data-namespace="special-more"] .p-special-component-mediaB .p-special-component-mediaB__detail [class*='c-button'][class$='--fill'] {
	background: #79b74a;
	border-color: #79b74a;
}

[data-namespace="special-more"] .p-special-component-mediaB .p-special-component-mediaB__detail [class*='c-button'][class$='--fill']:hover {
	background: #94c66e;
	border-color: #94c66e;
}

.p-special-component-mediaB-Group > .p-special-component-mediaB {
	letter-spacing: normal;
}

.p-special-component-mediaB-Group > .p-special-component-mediaB:nth-child(odd) {
	margin-right: 25px;
}

.p-special-component-mediaB-Group > .p-special-component-mediaB:nth-child(even) {
	margin-left: 25px;
}

.p-special-component-mediaB__vis {
	width: 400px;
	margin: 0 auto 25px;
}

.p-special-component-mediaB__vis img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.p-special-component-mediaB__detail [class*='c-button'] {
	max-width: 180px;
}

.p-special-component-mediaB__header {
	margin: 0 auto 25px;
	font-size: 24px;
	font-size: 1.5rem;
	line-height: 1.5;
	font-weight: bold;
}

.p-special-component-mediaB__notes {
	margin: 0 auto 20px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.66667;
}

@media screen and (max-width: 736px) {
	.p-special-component-mediaB-Group {
		margin: 0 auto 53px;
	}

	.p-special-component-mediaB-Group + .p-special-component-mediaB-Group {
		margin-top: 0;
	}

	.p-special-component-mediaB-Group:after {
		content: none;
		display: none;
	}

	.p-special-component-mediaB {
		display: block;
		width: auto;
	}

	.p-special-component-mediaB-Group > .p-special-component-mediaB {
		letter-spacing: normal;
	}

	.p-special-component-mediaB-Group > .p-special-component-mediaB:nth-child(odd) {
		margin-right: 0;
	}

	.p-special-component-mediaB-Group > .p-special-component-mediaB:nth-child(even) {
		margin-left: 0;
	}

	.p-special-component-mediaB-Group > .p-special-component-mediaB:not(:last-child) {
		margin-bottom: 53px;
	}

	.p-special-component-mediaB__vis {
		width: auto;
		max-width: 450px;
		margin: 0 auto 25px;
	}
}

/*--------------------------------------------------------------------------------
	media C
--------------------------------------------------------------------------------*/
.p-special-component-mediaC {
	margin: 0 auto 80px;
	padding: 0 70px 0 20px;
	overflow: hidden;
}

.p-special-component-mediaC + .p-special-component-mediaC {
	margin-top: -40px;
}

.p-special-component-mediaC__vis {
	float: left;
	width: 100px;
}

.p-special-component-mediaC__vis img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.p-special-component-mediaC__header {
	margin: 15px 0 20px 135px;
	font-size: 24px;
	font-size: 1.5rem;
	line-height: 1.125;
}

.p-special-component-mediaC__notes {
	margin: 0 0 0 135px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.66667;
}

@media screen and (max-width: 736px) {
	.p-special-component-mediaC {
		margin: 0 auto 45px;
		padding: 0;
		letter-spacing: -0.5em;
	}

	.p-special-component-mediaC + .p-special-component-mediaC {
		margin-top: -10px;
	}

	.p-special-component-mediaC__vis {
		float: none;
		display: inline-block;
		vertical-align: middle;
		margin: 0;
		width: 75px;
	}

	.p-special-component-mediaC__header {
		display: inline-block;
		vertical-align: middle;
		width: 98%;
		margin: 0 0 0 -70px;
		padding: 0 0 0 85px;
		font-size: 20px;
		font-size: 1.25rem;
		line-height: 1.5;
		letter-spacing: normal;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.p-special-component-mediaC__notes {
		display: block;
		margin: 10px auto 0;
		letter-spacing: normal;
		font-size: 15px;
		font-size: 0.9375rem;
		line-height: 1.5;
	}
}

/*--------------------------------------------------------------------------------
	media D
--------------------------------------------------------------------------------*/
.p-special-component-mediaD {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	margin: 0 auto 50px;
	overflow: hidden;
}

.p-special-component-mediaD + .p-special-component-mediaD {
	margin-top: -40px;
}

.p-special-component-mediaD__vis {
	width: 370px;
	padding: 0 20px;
}

.p-special-component-mediaD__vis img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.p-special-component-mediaD__detail {
	position: relative;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	background-image: url(../img/special/bg_mediaD.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.p-special-component-mediaD__detail:before {
	content: '';
	display: block;
	padding-top: 320px;
}

.p-special-component-mediaD__notes {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	padding: 0 75px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.66667;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

@media screen and (max-width: 736px) {
	.p-special-component-mediaD {
		display: block;
		margin: 0 auto 50px;
	}

	.p-special-component-mediaD__vis {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: auto;
		max-width: 450px;
		margin: 0 auto;
	}

	.p-special-component-mediaD__detail {
		position: static;
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: auto;
		max-width: 320px;
		margin: 0 auto 20px;
		padding: 100px 30px 70px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background-image: url(../img/special/bg_mediaD_sp_upper.png), url(../img/special/bg_mediaD_sp_lower.png);
		background-position: center top, center bottom;
		background-repeat: no-repeat, no-repeat;
		background-size: auto 100px, auto 70px;
	}

	.p-special-component-mediaD__detail:before {
		display: none;
	}

	.p-special-component-mediaD__notes {
		position: static;
		padding: 0;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}
}

/*--------------------------------------------------------------------------------
	media E
--------------------------------------------------------------------------------*/
.p-special-component-mediaE {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin: 0 auto 70px;
}

[data-namespace="special-whats"] .p-special-component-mediaE .p-special-component-mediaE__detail [class*='c-button'][class$='--fill'] {
	background: #dea611;
	border-color: #dea611;
}

[data-namespace="special-whats"] .p-special-component-mediaE .p-special-component-mediaE__detail [class*='c-button'][class$='--fill']:hover {
	background: #efbc33;
	border-color: #efbc33;
}

[data-namespace="special-how"] .p-special-component-mediaE .p-special-component-mediaE__detail [class*='c-button'][class$='--fill'] {
	background: #e63361;
	border-color: #e63361;
}

[data-namespace="special-how"] .p-special-component-mediaE .p-special-component-mediaE__detail [class*='c-button'][class$='--fill']:hover {
	background: #ec6084;
	border-color: #ec6084;
}

[data-namespace="special-more"] .p-special-component-mediaE .p-special-component-mediaE__detail [class*='c-button'][class$='--fill'] {
	background: #79b74a;
	border-color: #79b74a;
}

[data-namespace="special-more"] .p-special-component-mediaE .p-special-component-mediaE__detail [class*='c-button'][class$='--fill']:hover {
	background: #94c66e;
	border-color: #94c66e;
}

.p-special-component-mediaE__vis {
	width: 400px;
}

.p-special-component-mediaE__vis img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.p-special-component-mediaE__detail {
	width: 425px;
}

.p-special-component-mediaE__detail [class*='c-button'] {
	max-width: 180px;
	margin: 0;
}

.p-special-component-mediaE__header {
	margin: 0 auto 20px;
	font-weight: bold;
	font-size: 17px;
	font-size: 1.0625rem;
	line-height: 1.58824;
}

.p-special-component-mediaE__notes {
	margin: 0 auto 20px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.66667;
}

@media screen and (max-width: 736px) {
	.p-special-component-mediaE {
		display: block;
		margin: 0 auto 53px;
	}

	.p-special-component-mediaE__vis {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: auto;
		max-width: 450px;
		margin: 0 auto 32px;
	}

	.p-special-component-mediaE__detail {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: auto;
	}

	.p-special-component-mediaE__detail [class*='c-button'] {
		margin: 0 auto;
	}

	.p-special-component-mediaE__header {
		margin: 0 auto 10px;
	}

	.p-special-component-mediaE__notes {
		margin: 0 auto 20px;
		font-size: 15px;
		font-size: 0.9375rem;
		line-height: 1.66667;
	}
}

/*--------------------------------------------------------------------------------
	case
--------------------------------------------------------------------------------*/
.p-special-component-case {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	margin: 0 auto 30px;
}

.p-special-component-case__vis {
	width: 150px;
	padding: 0 20px 0 0;
}

.p-special-component-case__vis img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.p-special-component-case__detail {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.p-special-component-case__header {
	margin: 0 auto 15px;
	font-size: 24px;
	font-size: 1.5rem;
	line-height: 1.125;
	font-weight: bold;
}

.p-special-component-case__notes {
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.66667;
}

@media screen and (max-width: 736px) {
	.p-special-component-case {
		display: block;
		margin: 0 auto 45px;
	}

	.p-special-component-case__vis {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: 100px;
		margin: 0 auto 24px;
		padding: 0;
	}

	.p-special-component-case__detail {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
	}

	.p-special-component-case__header {
		margin: 0 auto 15px;
		font-size: 20px;
		font-size: 1.25rem;
		line-height: 1.35;
	}

	.p-special-component-case__notes {
		font-size: 15px;
		font-size: 0.9375rem;
		line-height: 1.66667;
	}
}

/*--------------------------------------------------------------------------------
	voice
--------------------------------------------------------------------------------*/
.p-special-component-voice {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	margin: 0 20px 75px;
}

.p-special-component-voice + .p-special-component-voice {
	margin-top: -75px;
}

.p-special-component-voice:not(.is-over) + .p-special-component-voice.is-over {
	margin-top: -55px;
}

.p-special-component-voice.is-over + .p-special-component-voice:not(.is-over) {
	margin-top: -55px;
}

.p-special-component-voice.is-over + .p-special-component-voice.is-over {
	margin-top: -55px;
}

.p-special-component-voice.yellow .p-special-component-voice__detail > span {
	background: #fff6cd;
}

.p-special-component-voice.yellow .p-special-component-voice__detail > span:after {
	border-right-color: #fff6cd;
}

.p-special-component-voice.pink .p-special-component-voice__detail > span {
	background: #ffe9e9;
}

.p-special-component-voice.pink .p-special-component-voice__detail > span:after {
	border-right-color: #ffe9e9;
}

.p-special-component-voice.p-special-component-voice--rightwards.yellow .p-special-component-voice__detail > span:after {
	border-left-color: #fff6cd;
}

.p-special-component-voice.p-special-component-voice--rightwards.pink .p-special-component-voice__detail > span:after {
	border-left-color: #ffe9e9;
}

.p-special-component-voice.p-special-component-voice--leftwards {
	text-align: left;
}

.p-special-component-voice.p-special-component-voice--leftwards:not(.is-over) + .p-special-component-voice.p-special-component-voice--leftwards:not(.is-over) {
	margin-top: -55px;
}

.p-special-component-voice.p-special-component-voice--leftwards.is-over + .p-special-component-voice.p-special-component-voice--leftwards:not(.is-over) {
	margin-top: -75px;
}

.p-special-component-voice.p-special-component-voice--rightwards {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.p-special-component-voice.p-special-component-voice--rightwards:not(.is-over) + .p-special-component-voice.p-special-component-voice--rightwards:not(.is-over) {
	margin-top: -55px;
}

.p-special-component-voice.p-special-component-voice--rightwards.is-over + .p-special-component-voice.p-special-component-voice--rightwards:not(.is-over) {
	margin-top: -75px;
}

.p-special-component-voice.p-special-component-voice--rightwards .p-special-component-voice__detail {
	margin: 0 20px 0 0;
	padding-left: 120px;
	padding-right: 0;
	text-align: right;
}

.p-special-component-voice.p-special-component-voice--rightwards .p-special-component-voice__detail > span:before, .p-special-component-voice.p-special-component-voice--rightwards .p-special-component-voice__detail > span:after {
	left: auto;
	right: 0;
}

.p-special-component-voice.p-special-component-voice--rightwards .p-special-component-voice__detail > span:before {
	border-left-color: rgba(0, 0, 0, 0.1);
	border-right-color: transparent;
	-webkit-transform: translateX(100%) translateY(2px);
	-ms-transform: translateX(100%) translateY(2px);
	transform: translateX(100%) translateY(2px);
}

.p-special-component-voice.p-special-component-voice--rightwards .p-special-component-voice__detail > span:after {
	border-left-color: #fff;
	border-right-color: transparent;
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
}

.p-special-component-voice__vis {
	width: 100px;
}

.p-special-component-voice__vis img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.p-special-component-voice__detail {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	margin: 0 0 0 20px;
	padding-right: 120px;
}

.p-special-component-voice__detail > span {
	position: relative;
	top: 50%;
	display: inline-block;
	max-width: 100%;
	padding: 15px 25px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.66667;
	text-align: left;
	background: #fff;
	border-radius: 10px;
	border-bottom: 2px solid rgba(0, 0, 0, 0.1);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.p-special-component-voice__detail > span:before, .p-special-component-voice__detail > span:after {
	content: '';
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	border: 7px solid transparent;
	border-left-width: 13px;
	border-right-width: 13px;
}

.p-special-component-voice__detail > span:before {
	border-right-color: rgba(0, 0, 0, 0.1);
	-webkit-transform: translateX(-100%) translateY(2px);
	-ms-transform: translateX(-100%) translateY(2px);
	transform: translateX(-100%) translateY(2px);
}

.p-special-component-voice__detail > span:after {
	border-right-color: #fff;
	-webkit-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
}

@media screen and (max-width: 736px) {
	.p-special-component-voice {
		display: block;
		margin: 0 auto 30px;
	}

	.p-special-component-voice + .p-special-component-voice {
		margin-top: 0 !important;
	}

	.p-special-component-voice:after {
		content: '';
		display: block;
		clear: both;
	}

	.p-special-component-voice.p-special-component-voice--leftwards .p-special-component-voice__vis {
		float: left;
	}

	.p-special-component-voice.p-special-component-voice--leftwards .p-special-component-voice__detail {
		margin-left: 70px;
		padding: 0;
	}

	.p-special-component-voice.p-special-component-voice--rightwards {
		text-align: left;
	}

	.p-special-component-voice.p-special-component-voice--rightwards .p-special-component-voice__vis {
		float: right;
	}

	.p-special-component-voice.p-special-component-voice--rightwards .p-special-component-voice__detail {
		margin-right: 70px;
		padding: 0;
	}

	.p-special-component-voice__vis {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		display: block;
		width: 60px;
	}

	.p-special-component-voice__detail {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
	}

	.p-special-component-voice__detail > span {
		max-width: none;
	}

	.p-special-component-voice__detail > span:before, .p-special-component-voice__detail > span:after {
		top: 24px;
		bottom: auto;
		border-width: 5px;
		border-left-width: 7px;
		border-right-width: 7px;
	}
}

/*--------------------------------------------------------------------------------
	voice V2
--------------------------------------------------------------------------------*/
.p-special-component-voiceV2 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	margin: 0 20px 75px;
}

.p-special-component-voiceV2.yellow .p-special-component-voiceV2__detail > span {
	background: #fff6cd;
}

.p-special-component-voiceV2.yellow .p-special-component-voiceV2__detail > span:after {
	border-right-color: #fff6cd;
}

.p-special-component-voiceV2.p-special-component-voiceV2--rightwards.yellow .p-special-component-voiceV2__detail > span:after {
	border-left-color: #fff6cd;
}

.p-special-component-voiceV2.pink .p-special-component-voiceV2__detail > span {
	background: #ffe9e9;
}

.p-special-component-voiceV2.pink .p-special-component-voiceV2__detail > span:after {
	border-right-color: #ffe9e9;
}

.p-special-component-voiceV2.p-special-component-voiceV2--rightwards.pink .p-special-component-voiceV2__detail > span:after {
	border-left-color: #ffe9e9;
}

.p-special-component-voiceV2.p-special-component-voiceV2--leftwards {
	text-align: left;
}

.p-special-component-voiceV2.p-special-component-voiceV2--rightwards {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.p-special-component-voiceV2.p-special-component-voiceV2--rightwards .p-special-component-voiceV2__detail {
	margin: 0 20px 0 0;
	text-align: right;
}

.p-special-component-voiceV2.p-special-component-voiceV2--rightwards .p-special-component-voiceV2__detail > span:before, .p-special-component-voiceV2.p-special-component-voiceV2--rightwards .p-special-component-voiceV2__detail > span:after {
	left: auto;
	right: 0;
}

.p-special-component-voiceV2.p-special-component-voiceV2--rightwards .p-special-component-voiceV2__detail > span:before {
	border-left-color: rgba(0, 0, 0, 0.1);
	border-right-color: transparent;
	-webkit-transform: translateX(100%) translateY(2px);
	-ms-transform: translateX(100%) translateY(2px);
	transform: translateX(100%) translateY(2px);
}

.p-special-component-voiceV2.p-special-component-voiceV2--rightwards .p-special-component-voiceV2__detail > span:after {
	border-left-color: #fff;
	border-right-color: transparent;
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
}

.p-special-component-voiceV2__vis {
	width: 220px;
}

.p-special-component-voiceV2__vis img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.p-special-component-voiceV2__detail {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	margin: 0 0 0 35px;
}

.p-special-component-voiceV2__detail > span {
	position: relative;
	top: 50%;
	display: inline-block;
	max-width: 580px;
	padding: 40px;
	font-weight: bold;
	font-size: 17px;
	font-size: 1.0625rem;
	line-height: 1.58824;
	text-align: left;
	background: #fff;
	border-radius: 10px;
	border-bottom: 2px solid rgba(0, 0, 0, 0.1);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.p-special-component-voiceV2__detail > span:before, .p-special-component-voiceV2__detail > span:after {
	content: '';
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	top: 30px;
	left: 0;
	margin: auto;
	border: 7px solid transparent;
	border-left-width: 13px;
	border-right-width: 13px;
}

.p-special-component-voiceV2__detail > span:before {
	border-right-color: rgba(0, 0, 0, 0.1);
	-webkit-transform: translateX(-100%) translateY(2px);
	-ms-transform: translateX(-100%) translateY(2px);
	transform: translateX(-100%) translateY(2px);
}

.p-special-component-voiceV2__detail > span:after {
	border-right-color: #fff;
	-webkit-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
}

@media screen and (max-width: 736px) {
	.p-special-component-voiceV2 {
		display: block;
		margin: 75px auto 30px;
		padding: 0 15px 35px;
		border-radius: 10px;
	}

	.p-special-component-voiceV2.yellow {
		background: #fff6cd;
	}

	.p-special-component-voiceV2.pink {
		background: #ffe9e9;
	}

	.p-special-component-voiceV2__vis {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		display: block;
		width: auto;
		max-width: 257px;
		margin: 0 auto 15px;
	}

	.p-special-component-voiceV2__vis img {
		display: block;
		margin: 0 auto -35px;
		-webkit-transform: translateY(-35px);
		-ms-transform: translateY(-35px);
		transform: translateY(-35px);
	}

	.p-special-component-voiceV2__detail {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		margin: 0 auto;
	}

	.p-special-component-voiceV2__detail > span {
		max-width: none;
		padding: 0;
		background: none !important;
		border: none;
		font-size: 15px;
		font-size: 0.9375rem;
		line-height: 1.66667;
		border-radius: 0;
	}

	.p-special-component-voiceV2__detail > span:before, .p-special-component-voiceV2__detail > span:after {
		display: none;
	}
}

@media print {
	.p-special-component-voice {
		display: block;
		overflow: hidden;
		margin-bottom: 20px !important;
	}

	.p-special-component-voice + .p-special-component-voice {
		margin-top: 0 !important;
	}

	.p-special-component-voice:not(.is-over) + .p-special-component-voice.is-over {
		margin-top: 0 !important;
	}

	.p-special-component-voice.is-over + .p-special-component-voice:not(.is-over) {
		margin-top: 0 !important;
	}

	.p-special-component-voice.is-over + .p-special-component-voice.is-over {
		margin-top: 0 !important;
	}

	.p-special-component-voice.p-special-component-voice--leftwards .p-special-component-voice__vis {
		float: left;
	}

	.p-special-component-voice.p-special-component-voice--leftwards .p-special-component-voice__detail {
		margin-left: 120px;
	}

	.p-special-component-voice.p-special-component-voice--leftwards:not(.is-over) + .p-special-component-voice.p-special-component-voice--leftwards:not(.is-over) {
		margin-top: 0 !important;
	}

	.p-special-component-voice.p-special-component-voice--leftwards.is-over + .p-special-component-voice.p-special-component-voice--leftwards:not(.is-over) {
		margin-top: 0 !important;
	}

	.p-special-component-voice.p-special-component-voice--rightwards .p-special-component-voice__vis {
		float: right;
	}

	.p-special-component-voice.p-special-component-voice--rightwards .p-special-component-voice__detail {
		margin-right: 120px;
	}

	.p-special-component-voice.p-special-component-voice--rightwards:not(.is-over) + .p-special-component-voice.p-special-component-voice--rightwards:not(.is-over) {
		margin-top: 0 !important;
	}

	.p-special-component-voice.p-special-component-voice--rightwards.is-over + .p-special-component-voice.p-special-component-voice--rightwards:not(.is-over) {
		margin-top: 0 !important;
	}

	.p-special-component-voice__vis {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		display: block;
		width: 100px;
	}

	.p-special-component-voice__detail {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		display: block;
	}

	.trident .p-special-component-voiceV2 {
		display: table;
		width: 100%;
	}

	.trident .p-special-component-voiceV2__vis {
		display: table-cell;
		vertical-align: middle;
		width: 220px;
	}

	.trident .p-special-component-voiceV2__detail {
		display: table-cell;
		vertical-align: top;
		padding: 0 0 0 35px;
	}
}

/*--------------------------------------------------------------------------------
	separator
--------------------------------------------------------------------------------*/
.p-special-component-separator {
	display: block;
	margin: 40px auto 50px;
	height: 1px;
	border: none;
	border-top: 7px dotted #e5e5e5;
	background: none;
}

@media screen and (max-width: 736px) {
	.p-special-component-separator {
		margin: 40px -7px;
	}
}

/*--------------------------------------------------------------------------------
	borderedbox
--------------------------------------------------------------------------------*/
.p-special-component-borderedbox {
	margin: 0 auto 75px;
}

.p-special-component-borderedbox__inner {
	position: relative;
	border: 2px solid #BCBCBC;
}

.p-special-component-borderedbox__body {
	padding: 23px 26px 23px;
	border: 5px solid #e0e0e0;
}

.p-special-component-borderedbox__body > *:last-child {
	margin-bottom: 0;
}

.p-special-component-borderedbox__header {
	margin: 0 auto 20px;
	font-weight: bold;
	font-size: 24px;
	font-size: 1.5rem;
	line-height: 1.125;
}

@media screen and (max-width: 736px) {
	.p-special-component-borderedbox__body {
		padding: 23px 18px 18px;
		border-width: 5px;
	}

	.p-special-component-borderedbox__header {
		font-size: 20px;
		font-size: 1.25rem;
		line-height: 1.25;
	}
}

/*--------------------------------------------------------------------------------
	more
--------------------------------------------------------------------------------*/
.p-special-component-more {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
	margin: 45px auto;
	padding: 15px 25px 0 15px;
	border-radius: 10px;
	background: #dcf8ff;
}

.p-special-component-more__vis {
	width: 273px;
	padding: 0 28px 0 25px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.p-special-component-more__vis img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: -15px;
}

.p-special-component-more__detail {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.p-special-component-more__header {
	margin: 30px auto 15px;
	font-weight: bold;
	font-size: 20px;
	font-size: 1.25rem;
	line-height: 1.35;
}

.p-special-component-more__notes {
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.5;
}

.p-special-component-more__toDetail {
	margin: 25px auto 0;
}

.p-special-component-more__toDetail a {
	padding-left: 50px;
	padding-right: 50px;
}

@media screen and (max-width: 736px) {
	.p-special-component-more {
		display: block;
		margin: 90px auto 35px;
		padding: 0 15px 40px;
	}

	.p-special-component-more__vis {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: auto;
		max-width: 256px;
		margin: 0 auto 18px;
	}

	.p-special-component-more__vis img {
		margin-bottom: -50px;
		-webkit-transform: translateY(-50px);
		-ms-transform: translateY(-50px);
		transform: translateY(-50px);
	}

	.p-special-component-more__detail {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
	}

	.p-special-component-more__header {
		margin: 0 auto 18px;
		font-size: 17px;
		font-size: 1.0625rem;
		line-height: 1.58824;
		text-align: center;
	}

	.p-special-component-more__notes {
		font-size: 16px;
		font-size: 1rem;
		line-height: 1.375;
	}

	.p-special-component-more__toDetail {
		margin: 18px auto 0;
		text-align: center;
	}

	.p-special-component-more__toDetail a {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/*--------------------------------------------------------------------------------
	pager
--------------------------------------------------------------------------------*/
.p-special-component-pager {
	position: relative;
	margin: 0 auto 45px;
	border-radius: 10px;
}

[data-namespace="special-whats"] .p-special-component-pager {
	background: #fff6cd;
}

[data-namespace="special-whats"] .p-special-component-pager .p-special-component-pager__toDetail a[class*="c-button"][class$="--fill"] {
	background: #dea611;
	border-color: #dea611;
}

[data-namespace="special-whats"] .p-special-component-pager .p-special-component-pager__toDetail a[class*="c-button"][class$="--fill"]:hover {
	background: #efbc33;
	border-color: #efbc33;
}

[data-namespace="special-how"] .p-special-component-pager .p-special-component-pager__toDetail a[class*='c-button'][class$='--fill'] {
	background: #e63361;
	border-color: #e63361;
}

[data-namespace="special-how"] .p-special-component-pager .p-special-component-pager__toDetail a[class*='c-button'][class$='--fill']:hover {
	background: #ec6084;
	border-color: #ec6084;
}

[data-namespace="special-more"] .p-special-component-pager .p-special-component-pager__toDetail a[class*='c-button'][class$='--fill'] {
	background: #79b74a;
	border-color: #79b74a;
}

[data-namespace="special-more"] .p-special-component-pager .p-special-component-pager__toDetail a[class*='c-button'][class$='--fill']:hover {
	background: #94c66e;
	border-color: #94c66e;
}

.p-special-component-pager__inner {
	display: table;
	width: 100%;
	padding: 0 45px;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.5;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	table-layout: fixed;
}

.p-special-component-pager__vis {
	display: table-cell;
	vertical-align: bottom;
	width: 290px;
	padding: 0 74px 0 25px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.p-special-component-pager__vis img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-top: -35px;
	vertical-align: bottom;
}

.p-special-component-pager__detail {
	display: table-cell;
	vertical-align: middle;
	padding: 40px 0 30px;
}

.p-special-component-pager__toDetail {
	margin: 25px auto 0;
}

.p-special-component-pager__toDetail a[class*="c-button"] {
	padding: 10px 32px;
	vertical-align: bottom;
}

@media screen and (max-width: 736px) {
	.p-special-component-pager {
		margin: 80px auto 45px;
	}

	.p-special-component-pager__inner {
		display: block;
		padding: 15px 20px 40px;
		text-align: center;
	}

	.p-special-component-pager__inner p {
		display: inline-block;
		text-align: left;
	}

	.p-special-component-pager__vis {
		display: block;
		width: auto;
		max-width: 204px;
		margin: 0 auto 15px;
		padding: 0 52px 0 19px;
	}

	.p-special-component-pager__vis img {
		margin-top: -75px;
	}

	.p-special-component-pager__detail {
		display: block;
		padding: 0;
	}

	.p-special-component-pager__toDetail {
		display: block !important;
		margin: 10px auto 0;
		text-align: center !important;
	}

	.p-special-component-pager__toDetail a[class*="c-button"] {
		padding: 15px;
	}
}

/*--------------------------------------------------------------------------------
	checkbanner
--------------------------------------------------------------------------------*/
.p-special-component-checkbanner {
	position: relative;
	margin: 94px auto 53px;
	padding: 10px;
	background: #fff;
	border-radius: 5px;
	-webkit-box-shadow: 0px 4px 0px -1px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 4px 0px -1px rgba(0, 0, 0, 0.2);
}

.p-special-component-checkbanner:before {
	content: '';
	position: absolute;
	left: -58px;
	bottom: -50px;
	display: block;
	width: 155px;
	height: 168px;
	background: url(../img/special/pic_girl.png) no-repeat center;
	background-size: 100% auto;
}

.p-special-component-checkbanner:after {
	content: '';
	position: absolute;
	right: 33px;
	bottom: -33px;
	display: block;
	width: 163px;
	height: 73px;
	background: url(../img/special/pic_dog.png) no-repeat center;
	background-size: 100% auto;
}

.p-special-component-checkbanner__inner {
	padding: 54px 75px 52px;
	background: #d0f8ff;
}

.p-special-component-checkbanner__container {
	margin: 0 auto;
}

.p-special-component-checkbanner__container + .p-special-component-checkbanner__container {
	margin-top: 40px;
}

.p-special-component-checkbanner__container + .p-special-component-checkbanner__container .p-special-component-checkbanner__vis:before {
	display: none;
	content: none;
}

.p-special-component-checkbanner__header {
	margin: 0 auto 40px;
	padding-top: 40px;
	background: url(../img/special/bg_checkbanner_header.png) no-repeat center;
	background-size: contain;
}

.p-special-component-checkbanner__header:before {
	content: '';
	display: block;
	position: absolute;
	top: -45px;
	left: 0;
	right: 0;
	width: 400px;
	margin: auto;
	padding-top: 88px;
	background: url(../img/special/bg_checkbanner_lead.png) no-repeat center;
	background-size: contain;
}

.p-special-component-checkbanner__subheader {
	margin: 0 auto 10px;
	font-weight: bold;
	font-size: 24px;
	font-size: 1.5rem;
	line-height: 1.125;
}

.p-special-component-checkbanner__notes {
	margin: 0 auto 25px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.66667;
}

.p-special-component-checkbanner__toDetail {
	margin: 0 0 30px;
	max-width: 250px;
}

.p-special-component-checkbanner__vis {
	position: relative;
	float: left;
	width: 297px;
}

.p-special-component-checkbanner__vis:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	width: 437px;
	height: 295px;
	margin: auto auto auto -110px;
	background: url(../img/special/bg_cloud_v2.png) no-repeat center;
	background-size: 100% auto;
}

.p-special-component-checkbanner__vis a {
	-webkit-transition: opacity 250ms;
	-o-transition: opacity 250ms;
	transition: opacity 250ms;
}

.p-special-component-checkbanner__vis a:hover {
	opacity: 0.8;
	-webkit-transition: opacity 250ms;
	-o-transition: opacity 250ms;
	transition: opacity 250ms;
}

.p-special-component-checkbanner__vis figure {
	position: relative;
	width: 172px;
	margin: 0 auto;
}

.p-special-component-checkbanner__vis figure img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.p-special-component-checkbanner__vis figure figcaption {
	position: absolute;
	top: -15px;
	left: -44px;
	display: block;
	width: 60px;
	height: 60px;
	background: url(../img/special/ico_uncompleted.png) no-repeat center;
	background-size: 100% auto;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.p-special-component-checkbanner__detail {
	float: right;
	width: 500px;
}

.p-special-component-checkbanner__about {
	width: 500px;
	margin: 10px 0 0 auto;
}

@media screen and (max-width: 736px) {
	.p-special-component-checkbanner {
		margin: 84px -14px 27px;
		padding: 7px;
		border-radius: 10px;
	}

	.p-special-component-checkbanner:before, .p-special-component-checkbanner:after {
		content: none;
		display: none;
	}

	.p-special-component-checkbanner__inner {
		padding: 54px 28px 45px;
		border-radius: 7px;
	}

	.p-special-component-checkbanner__header {
		margin: 0 auto;
		padding-top: 89px;
		background-image: url(../img/special/bg_checkbanner_header_sp.png);
	}

	.p-special-component-checkbanner__header:before {
		top: -23px;
		width: 288px;
		padding-top: 60px;
	}

	.p-special-component-checkbanner__subheader {
		margin: 0 auto 23px;
	}

	.p-special-component-checkbanner__toDetail {
		margin-left: auto;
		margin-right: auto;
		max-width: none;
	}

	.p-special-component-checkbanner__vis {
		position: relative;
		float: none;
		width: auto;
		margin: 0 -28px 28px;
		padding: 35px 0 0;
		background: url(../img/special/bg_cloud_v2_sp.png) no-repeat center 35px;
		background-size: auto 185px;
	}

	.p-special-component-checkbanner__vis:before {
		content: none;
		display: none;
	}

	.p-special-component-checkbanner__vis figure {
		width: 170px;
	}

	.p-special-component-checkbanner__detail {
		float: none;
		width: auto;
		max-width: 450px;
		margin: 0 auto;
	}

	.p-special-component-checkbanner__about {
		width: auto;
		max-width: 450px;
		margin: 8px auto 0;
	}
}

/*--------------------------------------------------------------------------------
	relational banner
--------------------------------------------------------------------------------*/
.p-special-component-relationalbanner {
	margin: 0 auto 53px;
	padding: 39px 50px 0;
	border-radius: 5px;
	background: #d0f8ff;
}

[data-namespace="special-whats"] .p-special-component-relationalbanner {
	background: #ffe9e9;
}

[data-namespace="special-whats"] .p-special-component-relationalbanner .p-special-component-relationalbanner__header > span:before, [data-namespace="special-whats"] .p-special-component-relationalbanner .p-special-component-relationalbanner__header > span:after {
	background: #e63361;
}

[data-namespace="special-whats"] .p-special-component-relationalbanner .p-special-component-relationalbanner__toDetail a {
	border-color: #e63361;
	background: #e63361;
}

[data-namespace="special-whats"] .p-special-component-relationalbanner .p-special-component-relationalbanner__toDetail a:hover {
	border-color: #ec6084;
	background: #ec6084;
}

[data-namespace="special-how"] .p-special-component-relationalbanner {
	background: #ebfcd4;
}

[data-namespace="special-how"] .p-special-component-relationalbanner .p-special-component-relationalbanner__header > span:before, [data-namespace="special-how"] .p-special-component-relationalbanner .p-special-component-relationalbanner__header > span:after {
	background: #79b74a;
}

[data-namespace="special-how"] .p-special-component-relationalbanner .p-special-component-relationalbanner__toDetail a {
	border-color: #79b74a;
	background: #79b74a;
}

[data-namespace="special-how"] .p-special-component-relationalbanner .p-special-component-relationalbanner__toDetail a:hover {
	border-color: #94c66e;
	background: #94c66e;
}

.p-special-component-relationalbanner__inner {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.p-special-component-relationalbanner__header {
	margin: 0 auto 30px;
	font-size: 20px;
	font-size: 1.25rem;
	line-height: 1.25;
	text-align: center;
}

.p-special-component-relationalbanner__header > span {
	position: relative;
	display: inline-block;
}

.p-special-component-relationalbanner__header > span:before {
	content: '';
	position: absolute;
	top: -2px;
	left: -16px;
	display: block;
	width: 2px;
	padding-top: 28px;
	background: #2C99DE;
	-webkit-transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	transform: rotate(-20deg);
	-webkit-transform-origin: 0 100%;
	-ms-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

.p-special-component-relationalbanner__header > span:after {
	content: '';
	position: absolute;
	top: -2px;
	right: -16px;
	display: block;
	width: 2px;
	padding-top: 28px;
	background: #2C99DE;
	-webkit-transform: rotate(20deg);
	-ms-transform: rotate(20deg);
	transform: rotate(20deg);
	-webkit-transform-origin: 0 100%;
	-ms-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

.p-special-component-relationalbanner__vis {
	width: 400px;
	padding: 0 15px 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.p-special-component-relationalbanner__vis img {
	display: block;
	margin-bottom: -14px;
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.p-special-component-relationalbanner__toDetail {
	width: 300px;
}

@media screen and (max-width: 736px) {
	.p-special-component-relationalbanner {
		margin: 0 auto 53px;
		padding: 30px 20px;
	}

	.p-special-component-relationalbanner__inner {
		display: block;
	}

	.p-special-component-relationalbanner__header {
		margin: 0 auto 20px;
		text-align: left;
		line-height: 1.5;
	}

	.p-special-component-relationalbanner__header > span:before, .p-special-component-relationalbanner__header > span:after {
		content: none;
		display: none;
	}

	.p-special-component-relationalbanner__vis {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: auto;
		max-width: 450px;
		margin: 0 auto 20px;
	}

	.p-special-component-relationalbanner__vis img {
		margin-bottom: 0;
	}

	.p-special-component-relationalbanner__toDetail {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: auto;
		max-width: 450px;
		margin: 0 auto;
	}
}

/*--------------------------------------------------------------------------------
	movie banner
--------------------------------------------------------------------------------*/
.p-special-component-moviebanner {
	margin: 0 auto 75px;
}

.p-special-component-moviebanner__header {
	margin: 0 auto 32px;
	padding-top: 98px;
	background: url(../img/special/bg_header_moviebanner.png) no-repeat center;
	background-size: contain;
}

.p-special-component-moviebanner__inner {
	display: table;
	width: 715px;
	margin: auto;
	table-layout: fixed;
}

.p-special-component-moviebanner__vis {
	display: table-cell;
	vertical-align: middle;
	width: 305px;
}

.p-special-component-moviebanner__vis a {
	border-radius: 10px;
	overflow: hidden;
}

.p-special-component-moviebanner__detail {
	display: table-cell;
	vertical-align: middle;
	padding: 0 0 0 35px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.66667;
}

.p-special-component-moviebanner__subheader {
	margin: 0 auto 20px;
	font-weight: bold;
	font-size: 24px;
	font-size: 1.5rem;
	line-height: 1.125;
}

@media screen and (max-width: 736px) {
	.p-special-component-moviebanner {
		margin: 0 auto 35px;
	}

	.p-special-component-moviebanner__header {
		margin: 0 auto 23px;
		padding-top: 80px;
		background-image: url(../img/special/bg_header_moviebanner_sp.png);
	}

	.p-special-component-moviebanner__inner {
		display: block;
		width: auto;
	}

	.p-special-component-moviebanner__vis {
		display: block;
		width: 80%;
		max-width: 450px;
		margin: 0 auto 25px;
	}

	.p-special-component-moviebanner__detail {
		display: block;
		padding: 0;
		font-size: 15px;
		font-size: 0.9375rem;
		line-height: 1.66667;
	}

	.p-special-component-moviebanner__subheader {
		margin: 0 auto 15px;
		font-weight: bold;
		font-size: 20px;
		font-size: 1.25rem;
		line-height: 1.35;
	}
}

/*--------------------------------------------------------------------------------
	category nav
--------------------------------------------------------------------------------*/
.p-special-component-categorynav {
	margin: 90px auto 53px;
	border-radius: 10px;
	background: #fff;
	-webkit-box-shadow: 0px 4px 0px -1px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 4px 0px -1px rgba(0, 0, 0, 0.2);
}

.p-special-component-categorynav.p-special-component-categorynav--twoUp .p-special-component-categorynav__inner {
	padding-bottom: 20px;
	overflow: hidden;
	letter-spacing: -0.5em;
}

.p-special-component-categorynav.p-special-component-categorynav--twoUp .p-special-component-categorynav__items {
	display: inline-block;
	vertical-align: top;
	margin: 0 0 10px;
	letter-spacing: normal;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.p-special-component-categorynav.p-special-component-categorynav--twoUp .p-special-component-categorynav__items:nth-of-type(odd) {
	width: 50%;
	padding: 0 70px 0 0;
}

.p-special-component-categorynav.p-special-component-categorynav--twoUp .p-special-component-categorynav__items:nth-of-type(even) {
	width: 50%;
	padding: 0 0 0 70px;
}

.p-special-component-categorynav__inner {
	padding: 50px 75px 35px;
}

.p-special-component-categorynav__header {
	position: relative;
	margin: 0 auto 35px;
	text-align: center;
	letter-spacing: normal;
}

.p-special-component-categorynav__header:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 2px;
	margin: auto;
	background: #2C99DE;
}

.p-special-component-categorynav__header > span {
	position: relative;
	display: inline-block;
	padding: 0 20px;
	font-size: 20px;
	font-size: 1.25rem;
	line-height: 1.2;
	background: #fff;
}

.p-special-component-categorynav__subheader {
	margin: 0 auto 5px;
	font-weight: bold;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.66667;
}

.p-special-component-categorynav p[class*="c-arrow"] {
	display: inline-block;
	vertical-align: top;
	margin: 0 20px 15px 0;
}

.p-special-component-categorynav p[class*="c-arrow"] + p[class*="c-arrow"] {
	margin-top: 0;
}

@media screen and (max-width: 736px) {
	.p-special-component-categorynav {
		margin: 60px -14px 50px;
	}

	.p-special-component-categorynav.p-special-component-categorynav--twoUp .p-special-component-categorynav__inner {
		padding-bottom: 20px;
		overflow: hidden;
		letter-spacing: -0.5em;
	}

	.p-special-component-categorynav.p-special-component-categorynav--twoUp .p-special-component-categorynav__items {
		display: block;
		width: auto !important;
		margin: 0 auto 20px;
		padding: 0 !important;
	}

	.p-special-component-categorynav.p-special-component-categorynav--twoUp p[class*="c-arrow"] {
		margin-bottom: 8px;
	}

	.p-special-component-categorynav__inner {
		padding: 30px 14px 35px;
	}

	.p-special-component-categorynav__header {
		margin: 0 auto 25px;
	}

	.p-special-component-categorynav__header > span {
		padding: 0 10px;
		font-size: 18px;
		font-size: 1.125rem;
		line-height: 1.5;
	}

	.p-special-component-categorynav__subheader {
		margin: 0 0 10px 0;
	}

	.p-special-component-categorynav p[class*="c-arrow"] {
		display: block;
		margin: 0 0 15px 0;
	}

	.p-special-component-categorynav p[class*="c-arrow"]:last-of-type {
		margin-bottom: 0;
	}
}

/*--------------------------------------------------------------------------------
	関連コンテンツ - カルーセル
--------------------------------------------------------------------------------*/
.p-check-carousel {
	position: relative;
	margin-top: -15px;
	padding-top: 15px;
}

.p-check-carousel__viewer {
	max-width: 650px;
	margin: 0 auto;
}

.p-check-carousel__item {
	float: left;
	width: 200px;
	margin-right: 35px;
}

.p-check-carousel__vis {
	margin: 0 15px;
	background: #fff;
}

.p-check-carousel__vis a {
	position: relative;
	display: block;
	margin: 0 auto 20px;
	-webkit-transition: -webkit-transform 250ms;
	transition: -webkit-transform 250ms;
	-o-transition: transform 250ms;
	transition: transform 250ms;
	transition: transform 250ms, -webkit-transform 250ms;
}

.p-check-carousel__vis a img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-transition: opacity 250ms;
	-o-transition: opacity 250ms;
	transition: opacity 250ms;
}

.p-check-carousel__vis a figcaption {
	content: '';
	position: absolute;
	top: -15px;
	left: -44px;
	display: block;
	width: 60px;
	height: 60px;
	background: url("../img/special/ico_uncompleted.png") no-repeat center;
	background-size: 100% auto;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.is-hidden .p-check-carousel__vis a {
	visibility: hidden;
}

.is-completed .p-check-carousel__vis a figcaption {
	background: url("../img/special/ico_completed.png") no-repeat center;
	background-size: 100% auto;
}

.platform-desktop .p-check-carousel__vis a:hover {
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
}

.p-check-carousel__header {
	position: relative;
	padding: 0 0 35px;
}

.p-check-carousel__heading {
	display: block;
	height: 2.75em;
	margin: 0 -15px;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.375;
	letter-spacing: -0.5em;
}

.p-check-carousel__heading:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 0;
	height: 100%;
}

.p-check-carousel__heading span {
	display: inline-block;
	vertical-align: middle;
	width: 99%;
	letter-spacing: normal;
}

.p-check-carousel__commentary {
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin-bottom: -40px;
	text-align: center;
}

.is-completed .p-check-carousel__commentary {
	display: block;
}

.p-check-carousel__changer {
	position: absolute;
	width: 60px;
	height: 60px;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 10;
	margin: 55px auto auto;
}

.p-check-carousel__changer.is-hidden {
	display: none;
}

.p-check-carousel__changer > a {
	position: relative;
	display: block;
	height: 100%;
	background: #fff;
	border-radius: 50%;
	-webkit-box-shadow: 0 4px 0 -1px rgba(0, 0, 0, 0.2);
	box-shadow: 0 4px 0 -1px rgba(0, 0, 0, 0.2);
	-webkit-transition: background 250ms;
	-o-transition: background 250ms;
	transition: background 250ms;
}

.platform-desktop .p-check-carousel__changer > a:hover {
	background: #2C99DE;
	-webkit-transition: background 250ms;
	-o-transition: background 250ms;
	transition: background 250ms;
}

.platform-desktop .p-check-carousel__changer > a:hover i {
	color: #fff;
}

.p-check-carousel__changer > a span {
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

.p-check-carousel__changer > a i {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 20px;
	height: 20px;
	margin: auto;
	font-size: 20px;
	color: #2C99DE;
}

.p-check-carousel__changer[data-direction="forwards"] {
	margin-right: 0;
}

.p-check-carousel__changer[data-direction="forwards"] > a i {
	-webkit-transform: translateX(3px);
	-ms-transform: translateX(3px);
	transform: translateX(3px);
}

.p-check-carousel__changer[data-direction="backwards"] {
	margin-left: 0;
}

.p-check-carousel__changer[data-direction="backwards"] > a i {
	-webkit-transform: scale(-1, 1) translateX(3px);
	-ms-transform: scale(-1, 1) translateX(3px);
	transform: scale(-1, 1) translateX(3px);
}

@media screen and (max-width: 736px) {
	.p-check-carousel__viewer {
		width: 185px;
		margin: 0 auto;
	}

	.p-check-carousel__items {
		width: 2000px;
	}

	.p-check-carousel__item {
		margin-right: 22px;
		padding: 0;
	}

	.p-check-carousel__item.is-completed:after {
		left: -25px;
	}

	.p-check-carousel__vis {
		margin: 0 18px;
	}

	.p-check-carousel__vis a {
		margin: 0 auto 17px;
	}

	.p-check-carousel__header {
		padding: 45px 0 0;
	}

	.p-check-carousel__heading {
		height: auto;
		min-height: 2.70833em;
		font-size: 19.2px;
		font-size: 1.2rem;
		line-height: 1.35417;
		opacity: 0;
		-webkit-transition: opacity 250ms;
		-o-transition: opacity 250ms;
		transition: opacity 250ms;
	}

	.p-check-carousel__heading:before {
		content: none;
		display: none;
	}

	.p-check-carousel__heading span {
		width: auto;
		vertical-align: top;
	}

	.is-active .p-check-carousel__heading {
		opacity: 1;
		-webkit-transition: opacity 250ms;
		-o-transition: opacity 250ms;
		transition: opacity 250ms;
	}

	.p-check-carousel__commentary {
		bottom: auto;
		top: 0;
		margin-left: -10px;
		margin-right: -10px;
	}

	.p-check-carousel__changer {
		width: 45px;
		height: 45px;
		margin-top: auto;
		margin-bottom: 22px;
	}

	.p-check-carousel__changer > a i {
		width: 16px;
		height: 16px;
		font-size: 16px;
	}

	.p-check-carousel__changer[data-direction="backwards"] {
		margin-left: 15px;
	}

	.p-check-carousel__changer[data-direction="forwards"] {
		margin-right: 15px;
	}
}

#app {
	max-width: 1000px;
	min-height: 300px;
	margin: 0 auto;
}

#app-includer {
	opacity: 1;
	-webkit-transition: opacity 250ms;
	-o-transition: opacity 250ms;
	transition: opacity 250ms;
}

#app-includer.is-hidden {
	opacity: 0;
	-webkit-transition: opacity 250ms;
	-o-transition: opacity 250ms;
	transition: opacity 250ms;
}

/*--------------------------------------------------------------------------------
	クイズ 見出し
--------------------------------------------------------------------------------*/
.p-special-check-header {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	margin: 0 0 22px;
}

.p-special-check-primaryHeader {
	font-weight: bold;
	font-size: 33px;
	font-size: 2.0625rem;
	line-height: 1;
}

.p-special-check-primaryHeader--bordered {
	margin: 0 auto 32px;
	padding: 0 0 15px;
	font-weight: bold;
	font-size: 33px;
	font-size: 2.0625rem;
	line-height: 1;
	border-bottom: 1px solid #2C99DE;
}

.p-special-check-secondaryHeader {
	margin: 0 auto 25px;
	font-weight: bold;
	font-size: 33px;
	font-size: 2.0625rem;
	line-height: 1;
}

.p-special-check-secondaryHeader > span {
	display: block;
	margin: 0 auto 10px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1;
	color: #2C99DE;
}

.p-special-check-secondaryHeader--tag {
	margin: 0 auto 15px;
	font-weight: bold;
	font-size: 20px;
	font-size: 1.25rem;
	line-height: 1.5;
	word-break: break-all;
}

.p-special-check-secondaryHeader--tag .tag {
	display: block;
	width: 88px;
	margin: 0 0 10px;
	padding: 6px 0 12px;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1;
	color: #fff;
	text-align: center;
	background: url("../svg/bg_tag.svg") no-repeat center;
	background-size: auto 100%;
}

@media screen and (max-width: 736px) {
	.p-special-check-header {
		display: block;
		margin: 0 auto 20px;
		padding: 15px 0 0;
	}

	.p-special-check-primaryHeader {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		font-size: 23px;
		font-size: 1.4375rem;
		line-height: 1.17391;
		text-align: center;
	}

	.p-special-check-primaryHeader--bordered {
		margin: 0 auto 25px;
		padding: 0 0 10px;
		text-align: center;
		font-size: 23px;
		font-size: 1.4375rem;
		line-height: 1.21739;
	}

	.p-special-check-secondaryHeader {
		margin: 0 auto 10px;
		font-size: 23px;
		font-size: 1.4375rem;
		line-height: 1.17391;
	}

	.p-special-check-secondaryHeader > span {
		font-size: 15px;
		font-size: 0.9375rem;
		line-height: 1;
	}

	.p-special-check-secondaryHeader--tag {
		margin: 0 auto 10px;
		font-size: 18px;
		font-size: 1.125rem;
		line-height: 1.33333;
	}

	.p-special-check-secondaryHeader--tag .tag {
		margin-left: -7px;
	}
}

/*--------------------------------------------------------------------------------
	出題画面 本体
--------------------------------------------------------------------------------*/
.p-special-check-body {
	position: relative;
	background: #fff;
	border-radius: 10px;
	-webkit-box-shadow: 0 4px 0 -1px rgba(0, 0, 0, 0.2);
	box-shadow: 0 4px 0 -1px rgba(0, 0, 0, 0.2);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.p-special-check-body.p-special-check-body--layoutA {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
	min-height: 300px;
	padding: 30px 55px 30px 24px;
}

.p-special-check-body.p-special-check-body--layoutB {
	position: relative;
	padding: 50px 75px 70px;
	min-height: 100vh;
}

.p-special-check-body.p-special-check-body--layoutB:after {
	content: '';
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 0;
	width: 1440px;
	height: 277px;
	margin-top: -50px;
	margin-left: -220px;
	margin-right: -220px;
	background: url(../img/special/bg_cloud.png) no-repeat center top;
	background-size: auto 277px;
}

.p-special-check-vis {
	width: 420px;
	padding: 0 50px 0 5px;
}

.p-special-check-vis.p-special-check-vis--intro {
	width: 312px;
	padding: 0 50px;
}

.p-special-check-vis img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
	background: rgba(0, 0, 0, 0.01);
	-webkit-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	transition: opacity 500ms;
}

.p-special-check-vis img.is-hidden {
	opacity: 0;
}

.p-special-check-vis figcaption {
	display: block;
	height: 0;
	overflow: hidden;
	font-weight: bold;
	color: #EB603F;
	opacity: 0;
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1.46154;
	-webkit-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	transition: opacity 500ms;
	-webkit-transition-delay: 800ms;
	-o-transition-delay: 800ms;
	transition-delay: 800ms;
}

.p-special-check-vis figcaption.is-rendered {
	height: auto;
	margin: 10px auto 0;
	opacity: 0;
}

.p-special-check-vis figcaption.is-rendered.is-show {
	opacity: 1;
	-webkit-transition-delay: 0ms;
	-o-transition-delay: 0ms;
	transition-delay: 0ms;
}

.p-special-check-detail {
	width: 490px;
	padding: 30px 0 0;
}

.p-special-check-detail.p-special-check-detail--intro {
	width: 470px;
}

@media screen and (max-width: 736px) {
	.p-special-check-body.p-special-check-body--layoutA {
		display: block;
		min-height: 300px;
		padding: 38px 15px 50px;
	}

	.p-special-check-body.p-special-check-body--layoutB {
		display: block;
		margin: 0 -14px;
		padding: 25px 14px 45px;
		border-radius: 0;
	}

	.p-special-check-body.p-special-check-body--layoutB:after {
		content: none;
		display: none;
	}

	.p-special-check-vis {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: auto !important;
		max-width: 350px;
		margin: 0 auto 38px;
		padding: 0 !important;
	}

	.p-special-check-detail {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: auto !important;
		padding: 0 !important;
	}
}

/*--------------------------------------------------------------------------------
	出題画面 イントロ
--------------------------------------------------------------------------------*/
.p-special-check-lead {
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.8;
}

.p-special-check-lead + hr {
	display: block;
	height: 1px;
	margin: 22px auto;
	border: none;
	background: #ddd;
}

.p-special-check-overview {
	margin: 0 auto 24px;
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1.84615;
	overflow: hidden;
}

.p-special-check-overview dt {
	clear: both;
	float: left;
	margin: 0 0 5px;
}

.p-special-check-overview dt:after {
	content: '\003a';
	margin: 0 0.5em;
}

.p-special-check-overview dd {
	float: left;
	margin: 0 0 5px;
}

@media screen and (max-width: 736px) {
	.p-special-check-overview {
		margin: 0 auto 15px;
	}
}

/*--------------------------------------------------------------------------------
	出題画面 問題と選択肢
--------------------------------------------------------------------------------*/
.p-special-check-choices {
	margin: 0 auto 20px;
}

.p-special-check-choices__item {
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.33333;
	border-bottom: 1px solid #ddd;
}

.p-special-check-choices__item .label,
    .p-special-check-choices__item label {
	position: relative;
	display: block;
	padding: 15px 15px 15px 15px;
	cursor: pointer;
	-webkit-transition: background 250ms;
	-o-transition: background 250ms;
	transition: background 250ms;
}

.platform-desktop .p-special-check-choices__item .label:hover, .platform-desktop
      .p-special-check-choices__item label:hover {
	color: #2C99DE;
	-webkit-transition: color 250ms;
	-o-transition: color 250ms;
	transition: color 250ms;
}

.p-special-check-choices__item .label span,
      .p-special-check-choices__item label span {
	position: relative;
	display: block;
	min-height: 20px;
	padding: 0 0 0 30px;
	word-wrap: break-word;
	word-break: break-all;
}

.p-special-check-choices__item .label span:before,
        .p-special-check-choices__item label span:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	border: 1px solid #2C99DE;
	border-radius: 4px;
	background: #fff;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.p-special-check-choices__item .label input[type="radio"],
      .p-special-check-choices__item label input[type="radio"] {
	display: none;
}

.p-special-check-choices__item .label input[type="radio"]:checked + span:before,
        .p-special-check-choices__item label input[type="radio"]:checked + span:before {
	background: #fff url("../svg/ico_check_nobordered.svg") no-repeat center;
	background-size: 100% auto;
}

.p-special-check-choices__item .label:after,
      .p-special-check-choices__item label:after {
	content: '';
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 20px;
	height: 20px;
	margin: auto 20px auto auto;
}

.p-special-check-choices__item.is-disabled .label,
    .p-special-check-choices__item.is-disabled label {
	cursor: default;
}

.platform-desktop .p-special-check-choices__item.is-disabled .label:hover, .platform-desktop
      .p-special-check-choices__item.is-disabled label:hover {
	color: #111;
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
}

.p-special-check-choices__item.is-disabled label input[type="radio"]:disabled + span:before {
	border-color: transparent;
	background-color: transparent;
	-webkit-transition: border-color 250ms;
	-o-transition: border-color 250ms;
	transition: border-color 250ms;
	-webkit-transition-delay: 700ms;
	-o-transition-delay: 700ms;
	transition-delay: 700ms;
}

.p-special-check-choices__item.is-correct .label,
    .p-special-check-choices__item.is-correct label {
	padding-right: 60px;
	background: #FFF9AA;
	cursor: default;
	-webkit-transition: background 250ms;
	-o-transition: background 250ms;
	transition: background 250ms;
}

.platform-desktop .p-special-check-choices__item.is-correct .label:hover, .platform-desktop
      .p-special-check-choices__item.is-correct label:hover {
	color: #111;
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
}

.p-special-check-choices__item.is-correct .label:after,
      .p-special-check-choices__item.is-correct label:after {
	display: block;
	background: url("../svg/ico_correct.svg") no-repeat center;
	background-size: 100% auto;
}

.p-special-check-choices__item.is-incorrect .label,
    .p-special-check-choices__item.is-incorrect label {
	padding-right: 60px;
	background: #ffe2e2;
	cursor: default;
	-webkit-transition: background 250ms;
	-o-transition: background 250ms;
	transition: background 250ms;
}

.platform-desktop .p-special-check-choices__item.is-incorrect .label:hover, .platform-desktop
      .p-special-check-choices__item.is-incorrect label:hover {
	color: #111;
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
}

.p-special-check-choices__item.is-incorrect .label:after,
      .p-special-check-choices__item.is-incorrect label:after {
	display: block;
	background: url("../svg/ico_incorrect.svg") no-repeat center;
	background-size: 100% auto;
}

.p-special-check-choices__item.is-checked .label span:before {
	background: #fff url("../svg/ico_check_nobordered.svg") no-repeat center;
	background-size: 100% auto;
}

.p-special-check-message {
	height: 1px;
	margin: 0 auto 20px;
	font-size: 17px;
	font-size: 1.0625rem;
	line-height: 1.41176;
	font-weight: bold;
	color: #34B8A3;
	text-align: center;
	overflow: hidden;
	opacity: 0;
	-webkit-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	transition: opacity 500ms;
}

.p-special-check-message.is-rendered {
	height: auto;
}

.p-special-check-message.is-rendered.is-incorrect, .p-special-check-message.is-rendered.is-correct {
	opacity: 1;
}

.p-special-check-message.is-incorrect {
	color: #e65656;
}

.p-special-check-counter {
	position: absolute;
	top: -64px;
	right: 0;
	width: 75px;
	height: 75px;
	background: url("../svg/bg_baloon.svg") no-repeat center;
	background-size: 100% auto;
}

.p-special-check-counter > span {
	position: relative;
	top: 50%;
	display: block;
	text-align: center;
	font-weight: bold;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1;
	color: #2C99DE;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.p-special-check-progress {
	margin: 0 86px 0 0;
	letter-spacing: -0.5em;
}

.p-special-check-progress__item {
	display: inline-block;
	vertical-align: middle;
}

.p-special-check-progress__item:not(:last-of-type):after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 10px;
	height: 3px;
	background: #2C99DE;
}

.p-special-check-progress__item span {
	display: inline-block;
	vertical-align: middle;
	width: 12px;
	height: 12px;
	text-indent: 100%;
	white-space: nowrap;
	border-radius: 50%;
	background: #fff;
	overflow: hidden;
	border: 1px solid #2C99DE;
}

.p-special-check-progress__item.is-current span {
	width: 15px;
	height: 15px;
	background: #2C99DE;
}

@media screen and (max-width: 736px) {
	.p-special-check-choices {
		margin: 0 auto 20px;
	}

	.p-special-check-choices__item {
		font-size: 15px;
		font-size: 0.9375rem;
		line-height: 1.33333;
	}

	.p-special-check-choices__item label {
		padding: 15px 8px 15px 8px;
	}

	.p-special-check-choices__item label span {
		position: relative;
		display: block;
		min-height: 20px;
		padding: 0 0 0 30px;
	}

	.p-special-check-choices__item label span:before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 20px;
		height: 20px;
		border: 1px solid #2C99DE;
		border-radius: 4px;
		background: #fff;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.p-special-check-choices__item label input[type="radio"] {
		display: none;
	}

	.p-special-check-choices__item label input[type="radio"]:checked + span:before {
		background: #fff url("../svg/ico_check_nobordered.svg") no-repeat center;
		background-size: 100% auto;
	}

	.p-special-check-choices__item.is-correct .label,
      .p-special-check-choices__item.is-correct label, .p-special-check-choices__item.is-incorrect .label,
      .p-special-check-choices__item.is-incorrect label {
		padding-right: 0;
	}

	.p-special-check-choices__item.is-correct .label span,
        .p-special-check-choices__item.is-correct label span, .p-special-check-choices__item.is-incorrect .label span,
        .p-special-check-choices__item.is-incorrect label span {
		padding-right: 45px;
	}

	.p-special-check-choices__item.is-correct .label:after,
        .p-special-check-choices__item.is-correct label:after, .p-special-check-choices__item.is-incorrect .label:after,
        .p-special-check-choices__item.is-incorrect label:after {
		margin-right: 13px;
	}

	.p-special-check-counter {
		top: -52px;
		right: -5px;
	}

	.p-special-check-progress {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		margin: 18px auto 0;
		text-align: center;
	}

	.p-special-check-progress__item span {
		width: 12px;
		height: 12px;
	}
}

/*--------------------------------------------------------------------------------
	解説画面
--------------------------------------------------------------------------------*/
.p-special-check-errata-container {
	margin: 0 auto;
}

.p-special-check-errata-container + .p-special-check-errata-container {
	margin-top: 40px;
}

.p-special-check-errata {
	position: relative;
	margin: 0 auto 40px;
	overflow: hidden;
}

.p-special-check-errata__header {
	width: 405px;
	margin: 0 0 20px;
}

.p-special-check-errata__vis {
	float: right;
	width: 360px;
	min-height: 400px;
	margin-top: -70px;
	padding: 0 22px 0 0;
}

.p-special-check-errata__vis img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.p-special-check-errata__choices {
	width: 405px;
	margin: 0 0 20px;
}

.p-special-check-errata__choices dt {
	border-bottom: 1px solid #ddd;
	color: #2C99DE;
	font-weight: bold;
	font-size: 17px;
	font-size: 1.0625rem;
	line-height: 2.35294;
}

.p-special-check-commentary {
	clear: both;
	padding: 25px 30px;
	border: 1px solid #2C99DE;
	border-radius: 10px;
}

.p-special-check-commentary__header {
	margin: 0 0 18px 30px;
	font-weight: bold;
	font-size: 20px;
	font-size: 1.25rem;
	line-height: 1.5;
	letter-spacing: -0.5em;
	text-indent: -30px;
}

.p-special-check-commentary__header i {
	display: inline-block;
	vertical-align: middle;
	width: 30px;
	height: 30px;
	background: url("../svg/ico_correct.svg") no-repeat center;
	background-size: 100% auto;
}

.p-special-check-commentary__header span {
	vertical-align: middle;
	letter-spacing: normal;
}

.p-special-check-commentary__detail {
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.66667;
}

.p-special-check-knowledge {
	padding: 25px 0 0;
}

.p-special-check-knowledge__toggle {
	max-width: 300px;
	margin: 0 auto;
}

.p-special-check-knowledge__header {
	margin: 0 auto 20px;
	font-weight: bold;
	font-size: 21px;
	font-size: 1.3125rem;
	line-height: 1.42857;
}

* + .p-special-check-knowledge__header {
	margin-top: 45px;
}

.p-special-check-knowledge__body {
	display: none;
	padding: 35px 0 48px;
	border-top: 1px solid #ddd;
}

/*--------------------------------------------------------------------------------
	関連コンテンツ
--------------------------------------------------------------------------------*/
.p-special-check-relation {
	margin: 62px auto 0;
	overflow: hidden;
}

.p-special-check-relation__header {
	margin: 0 auto 40px;
	text-align: center;
	font-size: 24px;
	font-size: 1.5rem;
	line-height: 1;
}

.p-special-check-relation__header > span {
	position: relative;
	display: inline-block;
}

.p-special-check-relation__header > span:before {
	content: '';
	position: absolute;
	top: -2px;
	left: -16px;
	display: block;
	width: 2px;
	padding-top: 28px;
	background: #2C99DE;
	-webkit-transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	transform: rotate(-20deg);
	-webkit-transform-origin: 0 100%;
	-ms-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

.p-special-check-relation__header > span:after {
	content: '';
	position: absolute;
	top: -2px;
	right: -16px;
	display: block;
	width: 2px;
	padding-top: 28px;
	background: #2C99DE;
	-webkit-transform: rotate(20deg);
	-ms-transform: rotate(20deg);
	transform: rotate(20deg);
	-webkit-transform-origin: 0 100%;
	-ms-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

.p-special-check-relation__toArchive {
	position: relative;
	margin: 35px auto 0;
	max-width: 400px;
}

@media screen and (max-width: 736px) {
	.p-special-check-errata {
		position: static;
		margin: 0 auto 25px;
		padding: 0 16px;
	}

	.p-special-check-errata__header {
		width: auto;
		margin: 0 auto 20px;
	}

	.p-special-check-errata__vis {
		float: none;
		position: static;
		width: auto;
		max-width: 450px;
		margin: 0 auto 30px;
		padding: 0;
	}

	.p-special-check-errata__choices {
		width: auto;
		margin: 0 auto -20px;
	}

	.p-special-check-commentary {
		padding: 25px 16px;
	}

	.p-special-check-commentary__header {
		margin-bottom: 15px;
	}

	.p-special-check-commentary__knowledge {
		margin: 0 -10px;
	}

	.p-special-check-knowledge {
		padding: 30px 0 0;
	}

	.p-special-check-knowledge__body {
		padding: 25px 15px 30px;
	}

	.p-special-check-knowledge__header {
		margin: 0 auto 15px;
	}

	.p-special-check-knowledge__toggle {
		max-width: 450px;
		padding: 0 15px;
	}

	.p-special-check-relation {
		margin: 50px -15px 0;
	}

	.p-special-check-relation__header {
		margin: 0 auto 33px;
		font-size: 19px;
		font-size: 1.1875rem;
		line-height: 1.5;
	}

	.p-special-check-relation__header > span {
		position: relative;
		display: inline-block;
	}

	.p-special-check-relation__header > span:before {
		content: '';
		position: absolute;
		top: 5px;
		left: -12px;
		display: block;
		width: 2px;
		padding-top: 46px;
		background: #2C99DE;
		-webkit-transform: rotate(-20deg);
		-ms-transform: rotate(-20deg);
		transform: rotate(-20deg);
		-webkit-transform-origin: 0 100%;
		-ms-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}

	.p-special-check-relation__header > span:after {
		content: '';
		position: absolute;
		top: 5px;
		right: -12px;
		display: block;
		width: 2px;
		padding-top: 46px;
		background: #2C99DE;
		-webkit-transform: rotate(20deg);
		-ms-transform: rotate(20deg);
		transform: rotate(20deg);
		-webkit-transform-origin: 0 100%;
		-ms-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}

	.p-special-check-relation__toArchive {
		margin: 30px auto 0;
		max-width: 212px;
	}

	.p-special-check-relation__toArchive > a {
		display: table;
		width: 100%;
	}

	.p-special-check-relation__toArchive > a i,
        .p-special-check-relation__toArchive > a span {
		display: table-cell;
		vertical-align: middle;
		text-align: left;
	}

	.p-special-check-relation__toArchive > a i {
		padding-right: 10px;
	}
}

/*--------------------------------------------------------------------------------
	margin / padding
--------------------------------------------------------------------------------*/
.u-mtZero {
	margin-top: 0 !important;
}

.u-mt10 {
	margin-top: 10px !important;
}

.u-mt20 {
	margin-top: 20px !important;
}

.u-mt30 {
	margin-top: 30px !important;
}

.u-mt40 {
	margin-top: 40px !important;
}

.u-mt50 {
	margin-top: 50px !important;
}

.u-mt60 {
	margin-top: 60px !important;
}

.u-mt70 {
	margin-top: 70px !important;
}

.u-mt80 {
	margin-top: 80px !important;
}

.u-mt90 {
	margin-top: 90px !important;
}

.u-mt100 {
	margin-top: 100px !important;
}

.u-mbZero {
	margin-bottom: 0 !important;
}

.u-mb10 {
	margin-bottom: 10px !important;
}

.u-mb20 {
	margin-bottom: 20px !important;
}

.u-mb30 {
	margin-bottom: 30px !important;
}

.u-mb40 {
	margin-bottom: 40px !important;
}

.u-mb50 {
	margin-bottom: 50px !important;
}

.u-mb60 {
	margin-bottom: 60px !important;
}

.u-mb70 {
	margin-bottom: 70px !important;
}

.u-mb80 {
	margin-bottom: 80px !important;
}

.u-mb90 {
	margin-bottom: 90px !important;
}

.u-mb100 {
	margin-bottom: 100px !important;
}

.u-ptZero {
	padding-top: 0 !important;
}

.u-pt10 {
	padding-top: 10px !important;
}

.u-pt20 {
	padding-top: 20px !important;
}

.u-pt30 {
	padding-top: 30px !important;
}

.u-pt40 {
	padding-top: 40px !important;
}

.u-pt50 {
	padding-top: 50px !important;
}

.u-pt60 {
	padding-top: 60px !important;
}

.u-pt70 {
	padding-top: 70px !important;
}

.u-pt80 {
	padding-top: 80px !important;
}

.u-pt90 {
	padding-top: 90px !important;
}

.u-pt100 {
	padding-top: 100px !important;
}

.u-pbZero {
	padding-bottom: 0 !important;
}

.u-pb10 {
	padding-bottom: 10px !important;
}

.u-pb20 {
	padding-bottom: 20px !important;
}

.u-pb30 {
	padding-bottom: 30px !important;
}

.u-pb40 {
	padding-bottom: 40px !important;
}

.u-pb50 {
	padding-bottom: 50px !important;
}

.u-pb60 {
	padding-bottom: 60px !important;
}

.u-pb70 {
	padding-bottom: 70px !important;
}

.u-pb80 {
	padding-bottom: 80px !important;
}

.u-pb90 {
	padding-bottom: 90px !important;
}

.u-pb100 {
	padding-bottom: 100px !important;
}

/*--------------------------------------------------------------------------------
	font-size / font weight
--------------------------------------------------------------------------------*/
.u-font50 {
	font-size: 0.5em !important;
}

.u-font60 {
	font-size: 0.6em !important;
}

.u-font70 {
	font-size: 0.7em !important;
}

.u-font80 {
	font-size: 0.8em !important;
}

.u-font90 {
	font-size: 0.9em !important;
}

.u-font100 {
	font-size: 1em !important;
}

.u-font110 {
	font-size: 1.1em !important;
}

.u-font120 {
	font-size: 1.2em !important;
}

.u-font130 {
	font-size: 1.3em !important;
}

.u-font140 {
	font-size: 1.4em !important;
}

.u-font150 {
	font-size: 1.5em !important;
}

.u-font160 {
	font-size: 1.6em !important;
}

.u-font170 {
	font-size: 1.7em !important;
}

.u-font180 {
	font-size: 1.8em !important;
}

.u-font190 {
	font-size: 1.9em !important;
}

.u-font200 {
	font-size: 2em !important;
}

.u-font210 {
	font-size: 2.1em !important;
}

.u-font220 {
	font-size: 2.2em !important;
}

.u-font230 {
	font-size: 2.3em !important;
}

.u-font240 {
	font-size: 2.4em !important;
}

.u-font250 {
	font-size: 2.5em !important;
}

.u-font260 {
	font-size: 2.6em !important;
}

.u-font270 {
	font-size: 2.7em !important;
}

.u-font280 {
	font-size: 2.8em !important;
}

.u-font290 {
	font-size: 2.9em !important;
}

.u-font300 {
	font-size: 3em !important;
}

.u-font-xs {
	font-size: 11px !important;
	font-size: 0.6875rem !important;
}

.u-font-sm {
	font-size: 13px !important;
	font-size: 0.8125rem !important;
}

.u-font-md {
	font-size: 15px !important;
	font-size: 0.9375rem !important;
}

.u-font-lg {
	font-size: 17px !important;
	font-size: 1.0625rem !important;
}

.u-font-xl {
	font-size: 19px !important;
	font-size: 1.1875rem !important;
}

.u-weightBold {
	font-weight: bold !important;
}

.u-weightNormal {
	font-weight: normal !important;
}

/*--------------------------------------------------------------------------------
	align
--------------------------------------------------------------------------------*/
.u-alignRight {
	text-align: right !important;
}

.u-alignLeft {
	text-align: left !important;
}

.u-alignCenter {
	text-align: center !important;
}

.u-alignTop {
	vertical-align: top !important;
}

.u-alignMiddle {
	vertical-align: middle !important;
}

.u-alignBottom {
	vertical-align: bottom !important;
}

/*--------------------------------------------------------------------------------
	color
--------------------------------------------------------------------------------*/
.u-bg-gray {
	background: #7D8E9B;
}

.u-bg-green {
	background: #34B8A3;
}

.u-bg-red {
	background: #EB603F;
}

.u-bg-orange {
	background: #FFC44E;
}

.u-bg-blue {
	background: #1D77BB;
}

.u-bg-pastel-yellow {
	background: #FFF4C0;
}

.u-bg-pastel-green {
	background: #CAF4EA;
}

.u-bg-pastel-yellowgreen {
	background: #DFF7BF;
}

.u-bg-pastel-aqua {
	background: #D3F6FF;
}

.u-bg-pastel-gray {
	background: #F4F4F4;
}

.u-color-gray {
	color: #7D8E9B;
}

.u-color-green {
	color: #34B8A3;
}

.u-color-red {
	color: #EB603F;
}

.u-color-orange {
	color: #FFC44E;
}

.u-color-blue {
	color: #1D77BB;
}

.u-color-pastel-yellow {
	color: #FFF4C0;
}

.u-color-pastel-green {
	color: #CAF4EA;
}

.u-color-pastel-yellowgreen {
	color: #DFF7BF;
}

.u-color-pastel-aqua {
	color: #D3F6FF;
}

.u-color-pastel-gray {
	color: #F4F4F4;
}

/*--------------------------------------------------------------------------------
 clearfix
--------------------------------------------------------------------------------*/
.u-clearfix, .c-buttonB--hasNotes, .p-special-component-overview__inner, .p-special-component-checkbanner__container, .p-check-carousel__items {
	display: block;
}

.u-clearfix:after, .c-buttonB--hasNotes:after, .p-special-component-overview__inner:after, .p-special-component-checkbanner__container:after, .p-check-carousel__items:after {
	content: "\2e";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}

/*--------------------------------------------------------------------------------
	visibilittyHidden
--------------------------------------------------------------------------------*/
.u-visibilittyHidden {
	position: absolute;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
}

/*--------------------------------------------------------------------------------
	font-normalizer
--------------------------------------------------------------------------------*/
.u-font-normalizer {
	font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ W6", "Hiragino Kaku Gothic W6", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic W3", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif !important;
}

/*--------------------------------------------------------------------------------
	break
--------------------------------------------------------------------------------*/
.u-break {
	display: block !important;
}

.u-break--desktop {
	display: block !important;
}

.u-break--mobile {
	display: inline !important;
}

@media screen and (max-width: 736px) {
	.u-break--desktop {
		display: inline !important;
	}

	.u-break--mobile {
		display: block !important;
	}
}

/*--------------------------------------------------------------------------------
	display
--------------------------------------------------------------------------------*/
.u-onlymobile {
	display: none !important;
}

.u-visible {
	display: block;
}

@media screen and (max-width: 736px) {
	.u-onlydesktop {
		display: none !important;
	}

	.u-onlymobile {
		display: block !important;
	}
}

/*--------------------------------------------------------------------------------
	inline
--------------------------------------------------------------------------------*/
.u-inline {
	display: inline-block !important;
}

.u-inline--desktop {
	display: inline-block !important;
}

.u-inline--mobile {
	display: block !important;
}

@media screen and (max-width: 736px) {
	.u-inline--desktop {
		display: block !important;
	}

	.u-inline--mobile {
		display: inline-block !important;
	}
}

/*--------------------------------------------------------------------------------
	upside-down
--------------------------------------------------------------------------------*/
.u-upside-down {
	display: table;
}

.u-upside-down > *:first-child {
	display: table-footer-group;
}

.u-upside-down > *:last-child {
	display: table-header-group;
}




/* ヘッダー：100周年特設ページ start */
.l-special-header .l-special-header__siteroot {
	width: 222px;
}
.l-special-header .l-special-header__siteroot .c-siteroot {
	width: 130px;
	float: left;
}
.l-special-header .l-special-header__siteroot .lp-100th {
	display: inline-block;
	width: 87px;
	margin-left: 5px;
}
@media (min-width: 768px) {
	.l-special-header .l-special-header__siteroot {
		width: 300px;
	}
	.l-special-header .l-special-header__siteroot .c-siteroot {
		width: 152px;
	}
	.l-special-header .l-special-header__siteroot .lp-100th {
		width: 100px;
		margin-left: 8px;
	}
	.l-special-header .l-special-header__siteroot .lp-100th a {
		transition: opacity 250ms;
	}
	.l-special-header .l-special-header__siteroot .lp-100th a:hover {
		opacity: .7;
	}
}
/* ヘッダー：100周年特設ページ end */