@charset "UTF-8";


/** ************************************* **

	TABLE CONTENTS
	---------------------------
		01. Globals
		02. Fukidashi
		03. 蛍光マーカー風　追加
		04. topボタン関係
		05. bootstrap 機能拡張
		06. Tab
		07. 行間調整
		08. 文字のサイズ変更
	---------------------------

 ** ************************************* **/

/** 01. Globals
 **************************************************************** **/
img.bd {
	margin: 10px 0 10px 0;
}

#content .panel ul {
	margin-bottom: 0px;
}

.str {
	color: #dc143c;
	font-size: 120%;
	font-weight: bold;
	text-align: center;
}

@media only screen and (max-width: 768px) {
	h3, .h3 {
		font-size: 17px;
	}
	
	h4, .h4 {
		font-size: 15px;
		font-weight: bold;
	}
}

.meiryo {
	font-family: "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/*===== 余白調整 =====*/
.main-inner{
	margin: 0px 5px;
}

/*===== dl =====*/
#content dl {
	margin: 1em 0.5em;
}

#content dl.sprt dt {
	color: #ff4a72;
	font-size: 110%;
	font-weight: bolder;
	margin: 12px 0 0;
}

#content dl.sprt dd {
	line-height: 1.5;
	margin-bottom: 0.6em;
	padding-top: 0.5em;
	padding-left: 1em;
}

/*===== faq Customize =====*/
.faq_list {
	padding: 0px;
}

.list-group .col-sm-6 {
	padding-bottom: 0.75em;
}

.faq_list:before {
	content: "";
}

.faq_comment {
	padding: 10px;
}

.icon_img {
	height: auto;
	margin-right: 20px;
	margin-left: 17px;
	overflow: hidden;
	width: 90px;
}

@media only screen and (max-width: 768px) {
	.faq_comment {
		padding: 5px;
	}

	.faq_list {
		font-weight: normal;
		line-height: 1.5em;
		margin-top: -1px;
		padding-right: 0px;
		size: small;
	}

	.icon_img {
		height: auto;
		margin-right:5px ;
		width: 60px;
	}

	.panel-title {
		font-size: small;
	}
}

.contact.backpink {
	border:solid #FFF0F8 2px;
	background-color: #FFF0F8;
	color: inherit;
}


#content table th {
	white-space: nowrap;
}



/** 02. Fukidashi
 **************************************************************** **/
.fukidashi_bottom {
	position: relative;
	background: #fff;
	border-radius: 15px;
	color: #393939;
	display: inline-block;
	font-size: 14px;
	margin: 1.5em 0;
	min-width: 120px;
	max-width: 100%;
	padding: 15px 13px;
	border: solid 1.5px #333;
}

.fukidashi_bottom::before {
	position: absolute;
	top: 100%;
	left: 50%;
	border: 15px solid transparent;
	border-top: 15px solid #fff;
	content: "";
	margin-left: -15px;
	z-index:2;
}
.fukidashi_bottom::after {
	position: absolute;
	top: 100%;
	left: 50%;
	border: 17px solid transparent;
	border-top: 17px solid #333;
	content: "";
	margin-left: -17px;
}

.fukidashi_top {
	position: relative;
	background: #fff;
	border-radius: 15px;
	box-sizing: border-box;
	color: #393939;
	display: inline-block;
	font-size: 14px;
	margin: 1.5em 0;
	min-width: 120px;
	max-width: 100%;
	padding: 15px;
	border: solid 1.5px #333;
}

.fukidashi_top::before {
	position: absolute;
	top: -30px;
	left: 50%;
	border: 15px solid transparent;
	border-bottom: 15px solid #fff;
	content: "";
	margin-left: -15px;
	z-index:2;
}
.fukidashi_top::after {
	position: absolute;
	top: -32px;
	left: 50%;
	border: 15px solid transparent;
	border-bottom: 15px solid #333;
	content: "";
	margin-left: -15px;
}


.fukidashi_right {
	position: relative;
	background: #fff;
	border-radius: 15px;
	color: #393939;
	display: inline-block;
	font-size: 14px;
	margin: 0 15px 0 0;
	min-width: 120px;
	max-width: 100%;
	padding: 7px 10px;
	border: solid 1.5px #333;
}

.fukidashi_right::before {
	position: absolute;
	top: 50%;
	left: 100%;
	border: 15px solid transparent;
	border-left: 15px solid #fff;
	content: "";
	margin-top: -15px;
	z-index:2
}
.fukidashi_right::after {
	position: absolute;
	top: 50%;
	left: 100%;
	border: 17px solid transparent;
	border-left: 17px solid #333;
	content: "";
	margin-top: -17px;
}

.fukidashi_right2 {
	position: relative;
	background: #fff;
	border-radius: 15px;
	color: #393939;
	display: inline-block;
	font-size: 14px;
	margin: 15px -100px 15px 0;
	padding: 15px;
	min-width: 120px;
	max-width: 100%;
	border: solid #333;
}

.fukidashi_right2::before {
	position: absolute;
	top: 50%;
	left: 100%;
	border: 15px solid transparent;
	border-left: 15px solid #fff;
	content: "";
	margin-top: -15px;
	z-index:2;
}
.fukidashi_right2::after {
	position: absolute;
	top: 50%;
	left: 100%;
	border: 17px solid transparent;
	border-left: 17px solid #333;
	content: "";
	margin-top: -17px;
}

.fukidashi_left {
	position: relative;
	background: #ffffff;
	border-radius: 15px;
	color: #393939;
	display: inline-block;
	font-size: 14px;
	margin: 15px;
	padding: 15px;
	min-width: 120px;
	max-width: 100%;
	border: solid 1.5px #333333;
}

.fukidashi_left::before {
	position: absolute;
	top: 50%;
	left: -30px;
	border: 15px solid transparent;
	border-right: 15px solid #ffff;
	content: "";
	margin-top: -15px;
	z-index:2
}
.fukidashi_left::after {
	position: absolute;
	top: 50%;
	left: -31px;
	border: 15px solid transparent;
	border-right: 15px solid #333333;
	content: "";
	margin-top: -15px;
}

.fukidashi_left2 {
	position: relative;
	background: #fff2cc;
	border-radius: 15px;
	color: #393939;
	display: inline-block;
	font-size: 14px;
	margin: 15px 0 15px -70px;
	padding: 15px;
	min-width: 120px;
	max-width: 100%;
}

.fukidashi_left2::before {
	position: absolute;
	top: 50%;
	left: -30px;
	content: "";
	border: 15px solid transparent;
	border-right: 15px solid #fff2cc;
	margin-top: -15px;
}

.fukidashi_left3 {
	position: relative;
	background: #fff2cc;
	border-radius: 15px;
	color: #393939;
	display: inline-block;
	font-size: 14px;
	margin: -3px 0 1.5em 20px;
	padding: 15px;
	min-width: 120px;
	max-width: 100%;
}

.fukidashi_left3::before {
	position: absolute;
	top: 50%;
	left: -30px;
	border: 15px solid transparent;
	border-right: 15px solid #fff2cc;
	content: "";
	margin-top: -15px;
}

.fukidashi_left4 {
	position: relative;
	background: #fff2cc;
	border-radius: 15px;
	color: #393939;
	display: inline-block;
	font-size: 14px;
	padding: 15px;
	margin: 40px 0 1.5em -60px;
	min-width: 120px;
	max-width: 100%;
}

.fukidashi_left4::before {
	position: absolute;
	top: 50%;
	left: -30px;
	border: 15px solid transparent;
	border-right: 15px solid #fff2cc;
	content: "";
	margin-top: -15px;
}




/** 03. 蛍光マーカー風　追加
 **************************************************************** **/
.marker.orange {
	background: linear-gradient(transparent 0%, #EF8000 0%);
	display: block;
	padding: 0.5em;
	position: relative;
	margin: 20px 0;
	color: white;
}

.marker.orange::before {
	position: absolute;
	top: 100%;
	left: 50%;
	border: 10px solid transparent;
	border-top: 10px solid #EF8000;
	content: "";
	margin-left: -15px;
}






/** 04. topボタン関係
 **************************************************************** **/
.btn-grayblue {
	position: relative;
	background: #ECECEC;
	color: #6facd6;
	display: inline-block;
	font-weight: bold;
	padding: 0.9em 0.5em;
	text-decoration: none;
	transition: .4s;
}

.btn-grayblue.active {
	background: #6facd6;
	color: white;
}

.btn-grayblue:hover {
	background: #6facd6;
	color: white;
}

.btn-darkblue {
	position: relative;
	background: #6facd6;
	color: #ECECEC;
	display: inline-block;
	font-weight: bold;
	padding: 0.25em 0.5em;
	text-decoration: none;
	transition: .4s;
}

.btn-darkblue:hover {
	background: #ECECEC;
	color: #6facd6;
}

.btn-grayblue2 {
	position: relative;
	background: #ECECEC;
	color: #6facd6;
	display: inline-block;
	font-weight: bold;
	padding: 1.8em 0.5em;
	text-decoration: none;
	transition: .4s;
}

.btn-grayblue2:hover {
	background: #6facd6;
	color: white;
}

.btn-darkblue2 {
	position: relative;
	display: inline-block;
	font-weight: bold;
	padding: 0.25em 0.5em;
	text-decoration: none;
	color: #ECECEC;
	background: #6facd6;
	transition: .4s;
}

.btn-darkblue2:hover {
	background: #ECECEC;
	color: #6facd6;
}

.top_btnmenu .btn {
	height: 70px;
	padding: 5px;
}

.top_btnmenu {
	display: table;
	width: 100%;
}

.top_btnmenu .row_center {
	display: table-cell;
	vertical-align: middle;
}

@media (max-width: 768px) {
	.row.top_space {
		margin-top: 15px;
	}
	
	.top_btnmenu .btn {
		height: 45px;
	}
}







/** 05. bootstrap 機能拡張
 **************************************************************** **/
.row-center {
	letter-spacing: -0.4em;
}

.row-center.center {
	text-align: center;
}

.row-center > [class*='col-'] {
	display: inline-block;
	letter-spacing: 0;
	vertical-align: top;
	float: none !important;
}

.row-center.va-middle > [class*='col-'] {
	vertical-align: middle;
}

.row-center.va-bottom > [class*='col-'] {
	vertical-align: bottom;
}

.row-center .label {
	display: block;
}






/** 06. Tab
 **************************************************************** **/
/* .nav > li {
  position: relative;
  display: block;
	width: 100%;
}*/
.nav > li > a {
  position: relative!important;
  display: block!important;
  padding: 10px 15px;
}
.nav > li > a:hover, .nav > li > a:focus {
  text-decoration: none;
  background-color: #eee;
}
.nav > li.disabled > a {
  color: #777;
}
.nav > li.disabled > a:hover, .nav > li.disabled > a:focus {
  color: #777;
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
}
 .nav-pills > li {
  float: left;
}
.nav-pills > li > a {
  border-radius: 6px;
}
.nav-pills > li + li {
  margin-left: 2px;
}
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
  color: #fff;
  background-color: #3b536b;
}


.nav-tabs.back_orange  > a,
.nav-tabs.back_orange  > a:hover,
.nav-tabs.back_orange > a:focus {
	color: #fff;
	cursor: default;
	background-color: #EF8000;
	border: 1px solid #EF8000;
	border-bottom-color: transparent;
}

.nav-tabs.back_orange  > a.active,
.nav-tabs.back_orange  > a.active:hover,
.nav-tabs.back_orange > a.active:focus {
	color: #fff;
	cursor: default;
	background-color: #EF8000;
	border: 1px solid #EF8000;
	border-bottom-color: transparent;
}

#content ul.nav-tabs.back_orange a {
	margin-bottom: -1px;
}

.nav-tabs.back_orange {
	border-bottom: 1px solid #EF8000;
}

.nav.back_orange >  a,
.nav-pills.back_orange > li > a,
.nav-pills.back_orange .nav-link
{
	color: #EF8000;
	border: 1px solid #EF8000;
	margin-left: 2px;
	margin-right: 2px;
	margin-top: 4px;
	background-color: #ececec;
}

.nav > li > a {
	color: #6facd6;
	margin-left: 2px;
	margin-right: 2px;
	margin-top: 4px;
	background-color: #ececec;
	border: 1px solid #ececec;
	font-weight: 800;
}


.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #EF8000;
		}


.nav-tabs.back_orange >  a:hover,
.nav-tabs.back_orange >  a:focus,
.nav-pills.back_orange > li > a:hover,
.nav-pills.back_orange > li > a:focus {
	color: #fff;
	cursor: default;
	background-color: #EF8000;
	border: 1px solid #EF8000;
	border-bottom-color: transparent;
}

.nav.nav-stacked > li:first-child > a {
	margin-left: 2px;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
	color: #fff;
	background-color: #6facd6;
}

.nav-pills.back_orange > li.active > a,
.nav-pills.back_orange > li.active > a:hover,
.nav-pills.back_orange > li.active > a:focus {
	color: #fff;
	background-color: #EF8000;
}




/** 07. 行間調整
 **************************************************************** **/

/*行間調整*/
#content .lh10 {
	line-height: 1.0;
}
#content .lh11 {
	line-height: 1.1;
}
#content .lh12 {
	line-height: 1.2;
}
#content .lh13 {
	line-height: 1.3;
}
#content .lh14 {
	line-height: 1.4;
}
#content .lh15 {
	line-height: 1.5;
}
#content .lh16 {
	line-height: 1.6;
}
#content .lh17 {
	line-height: 1.7;
}
#content .lh18 {
	line-height: 1.8;
}
#content .lh19 {
	line-height: 1.9;
}
#content .lh20 {
	line-height: 2.0;
}



/** 08. 文字のサイズ変更
**************************************************************** **/

#content .md {
	font-size: 150%;
}

#content .bg {
	font-size: 400%;
}

#content .sm {
	font-size: 130%;
}

#content .ssm {
	font-size: 120%;
}

@media all and (max-width: 515px) {


#content .bg {
	font-size: 5.6vw;
}

#content .md {
	font-size: 4.7vw;
}

#content .sm {
	font-size: 4.0vw;
}

#content .ssm {
	font-size: 3.0vw;
}

}