@charset "utf-8";

/*********************
COMMON STYLES
*********************/
/* 文字色 ＆ 字下げリストのマーカー色 */
.fc-default, .fl-default li:after { color: #3f1b83 !important; }
.fc-secondary, .fl-secondary li:after { color: #dd660e !important; }
.fc-success, .fl-success li:after { color: #49cea2 !important; }
.fc-alert, .fl-alert li:after { color: #c60f13 !important; }
.fc-warning, .fl-warning li:after { color: #f59a12 !important; }

/* 汎用色 */
.fc-main { color: #3f1b83; }
.fc-pink { color: #ED8399; }
.fc-bgren { color: #62BFA9; }
.fc-dgren { color: #659933; }
.fc-purple { color: #3f1b83; }
.fc-yellow { color: #F5AD56; }
.fc-water { color: #5CB7E7; }
.fc-sred { color: #C70852; }
.fc-gray { color: #999; }

.bg-main { background-color: #3f1b83; }
.bg-pink { background-color: #ED8399; }
.bg-bgren { background-color: #43919D; }
.bg-dgren { background-color: #659933; }
.bg-purple { background-color: #3f1b83; }
.bg-yellow { background-color: #F5AD56; }
.bg-water { background-color: #5CB7E7; }
.bg-sred { background-color: #C70852; }
.bg-white { background-color: #fff; }
.bg-gray { background-color: #999; }

.bdr-main { border-color: #7c62ad; }
.bdr-pink { border-color: #ED8399; }
.bdr-bgren { border-color: #46a6b5; }
.bdr-dgren { border-color: #659933; }
.bdr-purple { border-color: #A587BD; }
.bdr-yellow { border-color: #F5AD56; }
.bdr-water { border-color: #5CB7E7; }
.bdr-sred { border-color: #C70852; }
.bdr-gray { border-color: #999; }


/* 文字サイズ */
.fs-xhuge {
	font-size: 180%; }
.fs-huge {
	font-size: 150%; }
.fs-xlarge {
	font-size: 125%; }
big, .fs-large {
	font-size: 112.5%; }
.fs-medium {
	font-size: 100%; }
.fs-small {
	font-size: 87.5%; }


.txCenter { text-align: center; }
.txRight { text-align: right; }
.txLeft { text-align: left; }

img.alignleft {
  margin-right: 1.5em;
	margin-bottom: 1em;
  display: inline;
  float: left; }

img.alignright {
  margin-left: 1.5em;
	margin-bottom: 1em;
  display: inline;
  float: right; }

img.aligncenter {
  margin-right: auto;
  margin-left: auto;
	margin-bottom: 1em;
  display: block;
  clear: both; }

img.dropshadow {
	box-shadow: 0 1px 4px #ccc;
}
a:hover img.dropshadow {
	box-shadow: 0 1px 4px #999;
}

.im-caption { text-align:center; font-size: .875em; margin-bottom: 1rem; }
.im-caption img { margin-bottom:.5rem; }


@media (max-width: 40em) {
img.alignleft, img.alignright {
	float: none;
	display: block;
  margin-right: auto;
  margin-left: auto;
  clear: both; }
}

/***** margin *****/
/* bottom */
.mgb00 { margin-bottom: 0 !important; }
.mgb05 { margin-bottom: 0.5em !important; }
.mgb10 { margin-bottom: 1em !important; }
.mgb15 { margin-bottom: 1.5em !important; }
.mgb20 { margin-bottom: 2em !important; }
.mgb30 { margin-bottom: 3em !important; }
.mgb40 { margin-bottom: 4em !important; }
.mgb50 { margin-bottom: 5em !important; }
.mgb60 { margin-bottom: 6em !important; }
.mgb70 { margin-bottom: 7em !important; }
.mgb80 { margin-bottom: 8em !important; }
.mgb100 { margin-bottom: 10em !important; }

/* top */
.mgt00 { margin-top: 0 !important; }
.mgt05 { margin-top: 0.5em !important; }
.mgt10 { margin-top: 1em !important; }
.mgt15 { margin-top: 1.5em !important; }
.mgt20 { margin-top: 2em !important; }
.mgt25 { margin-top: 2.5em !important; }
.mgt30 { margin-top: 3em !important; }
.mgt40 { margin-top: 4em !important; }
.mgt50 { margin-top: 5em !important; }

.mgt-05 { margin-top: -0.5em !important; }
.mgt-10 { margin-top: -1em !important; }
.mgt-15 { margin-top: -1.5em !important; }
.mgt-20 { margin-top: -2em !important; }

/* left */
.mgl00 { margin-left: 0 !important; }
.mgl05 { margin-left: 0.5em !important; }
.mgl10 { margin-left: 1em !important; }
.mgl15 { margin-left: 1.5em !important; }
.mgl20 { margin-left: 2em !important; }
.mgl30 { margin-left: 3em !important; }

/* リスト間隔 */
.mgblist10 li {
	margin-top: 1em;
	margin-bottom: 1em;
}
.mgblist05 li {
	margin-top: .5em;
	margin-bottom: .5em;
}

/* 括弧番号リスト */
ol.kakkonum {
	list-style: none;
	margin-left: 0 !important;
}
ol.kakkonum > li{
  counter-increment: cnt;
	position:relative;
	padding-left: 2em;
}
ol.kakkonum > li:before{
  display: inline-block;
	position:absolute;
	top:0; left:0;
	width: 2em;
  content: "(" counter(cnt) ") ";
}

/* ○数字 */
ol.marunum { list-style: none; margin-left: 0 !important; }
ol.marunum > li { position: relative; padding-left: 1.5em; }
ol.marunum > li:before { position:absolute;top:0;left:0em; }
ol.marunum > li:nth-child(1):before { content:'\2460'; }
ol.marunum > li:nth-child(2):before { content:'\2461'; }
ol.marunum > li:nth-child(3):before { content:'\2462'; }
ol.marunum > li:nth-child(4):before { content:'\2463'; }
ol.marunum > li:nth-child(5):before { content:'\2464'; }
ol.marunum > li:nth-child(6):before { content:'\2465'; }
ol.marunum > li:nth-child(7):before { content:'\2466'; }
ol.marunum > li:nth-child(8):before { content:'\2467'; }
ol.marunum > li:nth-child(9):before { content:'\2468'; }
ol.marunum > li:nth-child(10):before { content:'\2469'; }

/* 2桁数字 */
ol.keta2num { list-style: none; margin-left: 0 !important; }
ol.keta2num > li { margin-bottom: .3em; padding-left: 2.35rem; text-indent: -2.35rem; }
ol.keta2num > li > em { font: normal 600 1.8em/1 'Barlow Condensed', sans-serif; display: inline-block; width: 2.2rem; text-indent: 0; position: relative; top: .1em; color: #3f1b83; }

/* 字下げリスト */
.jisage-list { margin-left:0; list-style:none; }
.jisage-list > li { padding-left: 1em; text-indent:-1em; margin-bottom: .5em; }
.jisage-list .fa,
.jisage-list > li:first-letter { display:inline-block; width: 1em; }

/* インラインリスト */
.list-inline {
	margin-left: 0;
	list-style: none; }
.list-inline li {
	display: inline-block;
	margin: 0 1.2em .5em 0; }


/*
<ul class="dot-list">	・リスト
<ul class="kaku-list">	■リスト
<ul class="maru-list">	●リスト
<ul class="kome-list">	※リスト
<ul class="pdf-list">	PDFリスト
<ul class="doc-list">	書類リスト
<ul class="bow-list">	矢印リスト
<ul class="inn-list">	●矢印リスト
<ul class="ext-list">	外部リンクリスト
<ul class="none-list">	リストマークなし
<ul class="icon-list">
<li class="li-pdf"><a href="#">PDF</a></li>
<li class="li-doc"><a href="#">文書</a></li>
<li class="li-bow"><a href="#">矢印リンク</a></li>
<li class="li-inn"><a href="#">●矢印リンク</a></li>
<li class="li-ext"><a href="#">外部リンク</a></li>
</ul>
*/
.dot-list, .kaku-list, .maru-list, .kome-list,
.icon-list, .pdf-list, .doc-list,
.inn-list, .bow-list, .ext-list, .none-list {
	margin-left: 0;
	list-style: none; }
.dot-list > li, .kaku-list > li, .maru-list > li, .kome-list > li,
.icon-list > li, .pdf-list > li, .doc-list > li,
.inn-list > li, .bow-list > li, .ext-list > li {
	position: relative; padding-left:1.5em; }
.dot-list > li:after, .kaku-list > li:after, .maru-list > li:after, .kome-list > li:after,
.icon-list > li:after, .pdf-list > li:after, .doc-list > li:after,
.inn-list > li:after, .bow-list > li:after, .ext-list > li:after {
	display:inline-block; width: 1.2em; position: absolute; top:-1px; left:0; text-align: right; }
.kaku-list > li:after, .maru-list > li:after,
.icon-list > li:after, .pdf-list > li:after, .doc-list > li:after,
.inn-list > li:after, .bow-list > li:after, .ext-list > li:after {
	font-family: FontAwesome; }
.dot-list > li:after { content: '・'; }
.maru-list > li:after { content:'\f111'; }
.kome-list > li:after { content:'\203B'; }
.kaku-list > li:after { content:'\25A0'; }
.li-pdf:after, .pdf-list > li:after { content:'\f1c1'; color: #EB3323 !important; }
.li-doc:after, .doc-list > li:after { content:'\f15c'; }
.li-bow:after, .bow-list > li:after { content:'\f0da'; }
.li-inn:after, .inn-list > li:after { content:'\f138'; }
.li-ext:after, .ext-list > li:after { content:'\f14c'; }
.list-outer > li { padding-left: 0 !important; }
.list-outer > li:after { left: -1.5em !important; }


/* 段組リスト */
ul.col-list { margin-left: 0; list-style:none;}
@media (min-width: 40em) {
ul.col-list > li { float: left; }
ul.col-50p li { width:50%; }
ul.col-33p li { width:33.3%; }
ul.col-25p li { width:25%; }
}

/* Inline Box リスト */
.inline {
	margin-left: 0;
	list-style: none; }
.inline li {
	display: inline-block;
	margin: 0 1.2em .5em 0; }

/* 段組DL */
@media (min-width: 640px) {
	dl.col-list { display: flex; flex-wrap: wrap; }
	dl.col-list.col-dtr > dt { text-align:right; }
	dl.col-list > dd { margin-bottom: .3em; }
	dl.col-3em > dt { width: 3em; margin-right: .6em; }
	dl.col-3em > dd { width: calc( 100% - 3.6em ); }
	dl.col-4em > dt { width: 4em; margin-right: .6em; }
	dl.col-4em > dd { width: calc( 100% - 4.6em ); }
	dl.col-5em > dt { width: 5em; margin-right: .8em; }
	dl.col-5em > dd { width: calc( 100% - 5.8em ); }
	dl.col-8em > dt { width: 8em; margin-right: 1em; }
	dl.col-8em > dd { width: calc( 100% - 9em ); }
	dl.col-10em > dt { width: 10em; margin-right: 1.4em; }
	dl.col-10em > dd { width: calc( 100% - 11.4em ); }
	dl.col-12em > dt { width: 12em; margin-right: 1.4em; }
	dl.col-12em > dd { width: calc( 100% - 13.4em ); }
}
@media (max-width: 639px) {
	dl.col-list > dt { font-weight: 700; color: #444; }
}

/* TABLE .yokoline */
table.yokoline tbody, table.yokoline thead, table.yokoline tfoot {
	border-width: 1px 0 0;
}
table.yokoline tr,
table.yokoline tbody tr:nth-child(even) {
	border-bottom: solid 1px #ddd;
}
table.yokoline tbody tr:nth-child(even) {
	background: none;
}

/* TABLE .va-top */
table.va-top th, table.va-top td {
	vertical-align: top;
}

/* TABLE .stack */
@media (max-width: 63.9375em) {
	.stack tr {
		padding: 7px 0;
	}
	.stack th, .stack td {
		padding: 4px 8px;
	}
	.stack.yokoline th {
		background-color: #f7f7f7;
	}
}

/* ぶちぬき */
.full-width-text {
	box-sizing: border-box;
	margin-left: calc(((100vw - 100%) / 2) * -1);
	margin-right: calc(((100vw - 100%) / 2) * -1);
	padding-left: calc((100vw - 100%) / 2);
	padding-right: calc((100vw - 100%) / 2);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	clear: both;
}
.full-width-text>*:last-child {
	margin-bottom: 0;
}
.full-width-images {
	margin-left: calc(((100vw - 100%) / 2) * -1);
	margin-right: calc(((100vw - 100%) / 2) * -1);
	text-align:center;
	clear: both;
}
.full-width-images>img {
	width:100%;
	height:auto;
}
.full-width-images>iframe {
  width: 100%;
  display: block;
}



.nakalef {
  display: flex;
  justify-content: center;
  text-align: left;
}

/********* Foundation ＋α *********/
/* グリッド */
.row {
	width:95%;
	max-width: 61.875rem; }
.row .row {
	width: auto; }
.row .row.sema { /* 間隔狭め */
	margin-left: -.3125rem;
	margin-right: -.3125rem; }
.row.sema .column, .row.sema .columns {
	padding-left: .3125rem;
	padding-right: .3125rem; }
.row.sema .column-block {
	margin-bottom: .625rem;
}
.row .row.ssma { /* 間隔もっと狭め */
	margin-left: -.1875rem;
	margin-right: -.1875rem; }
.row.ssma .column, .row.ssma .columns {
	padding-left: .1875rem;
	padding-right: .1875rem; }
.row.ssma .column-block {
	margin-bottom: .375rem;
}

/* ボタンにFontawesomeアイコン（左 / 右） */
.button.btn-fa-l, .button.btn-fa-r {
	position: relative;
	padding: 1.2em 5em; }
.button.btn-fa-l:before,
.button.btn-fa-r:before {
	position: absolute;
	width:1em;
	text-align:center;
	top: 50%; margin-top: -.53em;
	display: inline-block;
	font: 100 120%/1 FontAwesome; }
.button.btn-fa-l:before {
	left: .8em; }
.button.btn-fa-r:before {
	right: .8em; }
@media (max-width: 40em) {
.button.btn-fa-l, .button.btn-fa-r {
	padding-left: 3.6em;
	padding-right: 3.6em; }
}

/* ボタンに汎用背景色をセットした時のHover */
.button.bg-pink:focus,
.button.bg-pink:hover {
	background-color: #DB6079;
}
.button.bg-bgren:focus,
.button.bg-bgren:hover {
	background-color: #3AAF93;
}
.button.bg-dgren:focus,
.button.bg-dgren:hover {
	background-color: #46a6b5;
}
.button.bg-purple:focus,
.button.bg-purple:hover {
	background-color: #6A5AA7;
}
.button.bg-yellow:focus,
.button.bg-yellow:hover {
	background-color: #EC9730;
}
.button.bg-water:focus,
.button.bg-water:hover {
	background-color: #34A0D9;
}
.button.bg-sred:focus,
.button.bg-sred:hover {
	background-color: #AB0244;
}

.button.lab-btn-ras,
.button.lab-btn-dot {
	display:block;
	font-weight: 700;
	padding: 20px 10px;
	line-height: 1.4;
	border-radius: 4px;
	position:relative; }
.button.lab-btn-ras { background-image: url(../images/raster.png); }
.button.lab-btn-dot { background-image: url(../images/raster_dot.png); }
.button.lab-btn-ras:after,
.button.lab-btn-dot:after {
	content: '';
	position:absolute;
	top:5px; right:5px; bottom:5px; left: 5px;
	border-radius: 2px;
	border: solid 1px #fff; }


.button.r-bow {
  font-size: .875rem;
  padding: .85em 3em;
  color: #000;
  border-radius: 0;
  border: solid 1px #ccc;
  background: none;
  position: relative;
  transition: all, .3s;
}
.button.r-bow:before, .button.r-bow:after {
  display: inline-block;
  content: '';
  position: absolute;
  bottom: 1.2em;
  right: -2em;
  height: 1px;
  background: #ccc;
  transform-origin: right bottom;
  transition: all, .3s;
}
.button.r-bow:before {
  width: 3.5em;
}
.button.r-bow:after {
  width: 10px;
  transform: rotate(45deg);
}
.button.r-bow:hover {
  border-color: #222;
}
.button.r-bow:hover:before, .button.r-bow:hover:after {
  background: #222;
  right: -2.5em;
}

.button.r-bow.hanten {
  border-color: #fff;
  color: #fff;
}
.button.r-bow.hanten:before, .button.r-bow.hanten:after {
  background: #fff;
}
.button.r-bow.hanten:hover {
  border-color: #fff;
  background: rgba(255,255,255,.2);
}
.button.r-bow.hanten:hover:before, .button.r-bow.hanten:hover:after {
  background: #fff;
}

@media (max-width:639px) {
  .button.r-bow { padding: .85em 2em;}
  .button.r-bow:before, .button.r-bow:after { right: -1.2em; }
  .button.r-bow:before { width: 2.35em; }
  .button.r-bow:hover:before, .button.r-bow:hover:after { right: -1.5em; }
}

.button.thbow {
	padding: .5em 2.8em;
  border-radius: 8px;
	font-size: 1.25rem;
	font-style: normal;
	background-color: rgba(0,0,0,0.6);
	white-space: nowrap;
	position: relative;
	transition: all, .3s;
}
.button.thbow:after {
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(../images/bow-icon.svg) center center no-repeat;
	background-size: 100% auto;
}
.button.thbow:hover {
  text-decoration: none;
	background-color: rgba(0,0,0,0.7);
}


/* callout card */
.callout, .card {
  background: #fff;
  border: none;
  box-shadow: 2px 2px 7px rgba(0,0,0,.26);
}
.callout {
	padding: 1.5rem;
}
@media (min-width:40em) {
	.callout {
    padding: 2.5rem;
  }
}