@charset "UTF-8";

/*--------------------------------------------------
**************************************************
  ボックスレイアウト（基本）
**************************************************
--------------------------------------------------*/

* {
	-webkit-box-sizing:border-box !important;
	-moz-box-sizing:border-box !important;
	box-sizing:border-box !important;
	border:0px none;
	margin:0px;
	padding:0px;
}

.block { display:block; }

.block_center { display:block; margin-left:auto; margin-right:auto; }	/* width の指定が必要 */

.br:before { content:"\A"; white-space:pre; }	/* CSSで改行 */

/* フロート */
.float_l { float:left; }
.float_r { float:right; }

/* フロート解除 */
.clearfix:before, .clearfix:after { content:""; display:table; }
.clearfix:after { clear:both; }
/* For IE 6/7 (trigger hasLayout) */
.clearfix { zoom:1; }

/* Flexbox(フロート系) */
.flexbox{
	display:-webkit-flex;	/*--- Safari,iOS,android ---*/
	display:flex;
	-webkit-flex-direction:row;	/*--- Safari,iOS,android ---*/
	flex-direction:row;	/*--- 左から右に水平方向に配置 ---*/
}
.flex-wrap{ -webkit-flex-wrap:wrap; flex-wrap:wrap; }	/*--- 横複数行(折り返し有り)の配置 ---*/
.flex-space-between{ -webkit-justify-content:space-between; justify-content:space-between; }	/*--- 最初と最後は端に、残りは等間隔 ---*/

/*--------------------------------------------------
**************************************************
  テキスト・フォント
**************************************************
--------------------------------------------------*/

.bold { font-weight:bold; }

strong { font-size:130%; }

.small { font-size:85%; }

.line_through { text-decoration:line-through; }	/* 打消し線 */

.italic { font-style:italic; }

.center{ text-align:center; }
.right { text-align:right; }
.left  { text-align:left; }

.fs50  { font-size:50%; }
.fs60  { font-size:60%; }
.fs70  { font-size:70%; }
.fs80  { font-size:80%; }
.fs90  { font-size:90%; }
.fs100 { font-size:100%; }
.fs110 { font-size:110%; }
.fs120 { font-size:120%; }
.fs130 { font-size:130%; }
.fs140 { font-size:140%; }
.fs150 { font-size:150%; }
.fs160 { font-size:160%; }
.fs170 { font-size:170%; }
.fs180 { font-size:180%; }
.fs190 { font-size:190%; }
.fs200 { font-size:200%; }


/* -- 文字幅 letter-spacing -- */
.ls01 { letter-spacing:0.1em !important; }
.ls005 { letter-spacing:0.05em !important; }
.ls002 { letter-spacing:0.02em !important; }
.ls001 { letter-spacing:0.01em !important; }


/*--------------------------------------------------
**************************************************
  その他
**************************************************
--------------------------------------------------*/
ul { list-style-type:none; }
.ul { list-style-type:disc; list-style-position:inside; }

a { outline: none;}
a:focus { outline: none;}

a.underline {
	text-decoration: underline;
}

/*--------------------------------------------------
**************************************************
  コンテンツ
**************************************************
--------------------------------------------------*/
#topicsPathDetail {
	font-size: 13px !important;
}
#main_contents {
	font-family: 'Noto Sans JP';
}
.catch {
	margin: 30px 0 0;
	text-align: center;
	line-height: 2.0;
	font-size: 21px;
	font-weight: bold;
	letter-spacing: 0.2em;
}
.nav-tabs-outer {
	margin-top: 30px;
	width: 100%;
}
.nav-tabs {
	display: table !important;
  table-layout: fixed !important;
  width: 100% !important;
}
.nav-tabs li {
	width: 100%;
	display: table-cell !important;
	float: none !important;
	font-size: 13px;
	border-left: 1px solid #FFF;
	border-right: 1px solid #FFF;
	vertical-align: middle;
}
.nav-tabs li:nth-child(1) {
	border-left: none;
}
.nav-tabs li:nth-child(6) {
	border-right: none;
}
.nav-tabs li a {
	padding: 15px !important;
	background: #e3e3e3;
	display: block;
	color: #000;
	font-weight: bold;
	letter-spacing: 0.15em;
}
.nav-tabs li:nth-child(6) a {
	margin-right: 0 !important;
}

.nav-tabs li a:hover,
.nav-tabs li.active a {
	background: #000 !important;
	color: #FFF;
	position: releative;
	-webkit-transition-duration: .8s;
	transition-duration: .8s;
}
.nav-tabs li a:hover::before,
.nav-tabs li.active a::before { /* 三角の部分 */
	content: '';
	position: absolute; /* 位置固定 */
	bottom: -12px; /* 線幅の2倍 */
	left: 50%;
	margin-left: -6px; /* 線幅だけずらす */
	border: 6px solid transparent; /* 線幅の設定 */
	border-top-color: #000; /* 吹き出しの地と同じ色 */
	-webkit-transition-duration: .8s;
	transition-duration: .8s;
}


.tab-content {
	padding: 40px;
	background: url(../imgs/tab_bg.jpg) no-repeat center top;
	background-size: cover;
}
.tab_inner ul li {
	width: 31%;
	text-align: center;
	margin: 10px 3.5% 10px 0;
}
.tab_inner ul li:nth-child(3n) {
	margin-right: 0;
}
.tab_inner ul li a {
	font-size: 15px;
	letter-spacing: 0.15em;
	background: #FFF;
	width: 100%;
	display: block;
	color: #000;
	font-weight: bold;
	height: 70px;
	line-height: 64px;
	border-radius: 35px;
	border: 3px solid;
	position: relative;
	box-shadow: 4px 4px rgba(0,0,0,.15);
}
.tab_inner ul li a::after {
	content:"";
	position: absolute;
	width: 6px;
	height: 6px;
	right: 20px;
	top: 29px;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.tab_inner ul li a:hover {
	background: #fffccc;
	text-decoration: none;
	-webkit-transition-duration: .8s;
	transition-duration: .8s;
}
.tab_inner ul li a:hover::after {
	right: 16px;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
}