@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p');


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

	TABLE CONTENTS
	---------------------------
		01. Globals
		02. balloon-2 bottom
		03. nav
		04. リストにフォントオーサム使用
		05. 囲み文字の基本形 インデント有
		06. ページ内リンク
		07. 画像上の文字
		08. border 追加
		09. heading center
		10. bootstrap 機能拡張
		11. 付箋風ボックス
		12. 丸い背景ボックス
		13. アコーディオン追加
		14. youtubeボタン
		15. 吹き出し
		16. order_btn
	---------------------------

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

/** 01. Globals
 **************************************************************** **/
.content_inner{
	padding:0 100px;
}
.alert {
	padding: 10px;
	margin-bottom: 5px;
	border-radius: 6px;
}
.alert-danger .line {
	border-bottom: 2px solid #fcc7cc;
	padding-bottom: 2px;
}
.alert-title{
	font-size: 1.2em;
	font-weight: bold;
}
.just {
	text-align: justify;
}
.news_box {
	margin: 10px 0;
	padding: 10px;
	border: 1px solid #cccccc;
	background: #fff;
}
#container h4[id] {
	margin-top: 20px;
	padding-top: 0px;
}
h4.box1{
	font-size:1.2em; 
	color: #505050;/*文字色*/
	padding: 0.5em 0.5em 0.5em 1.5em;/*文字周りの余白*/
	text-indent: -1.5em;
	line-height: 1.3;/*行高*/
	background: #e1f0fa;/*背景色*/
	vertical-align: middle;/*上下中央*/
	border-radius: 0px 0px 0px 0px;/*左側の角を丸く*/
	margin:5px 0;
	border-bottom: solid 1px #217dbb;
}
h4.box1:before {
	font-size:1.6em; 
	content: '●';
	color: white;
	margin:8px 5px;
	text-shadow: -1px -1px 1px #fff, -1px -1px 1px #414141;
}
h5 {
	font-size: 1.1em;
	padding: 0.7em 0 0.7em 0;
	border-left: 0px solid #217dbb;
	border-bottom: solid 0px #ccc;
	line-height: 2.0;
}
.marker.yellow.thin {
	color: inherit;
	background: linear-gradient(transparent 50%, #ffff66 50%);
}
.top_space10 {
	margin-top: 10px;
}
.top_space50 {
	margin-top: 50px;
}
.content_inner.frame_number p{
	padding-left: 1.2em;
	text-indent: -1.4em;
}
.content_inner.frame_number p i{
	text-indent: 0em;
}
.content_inner.frame_number p .btn.link_aqua{
	text-indent: 0em;
}

@media (max-width: 768px) {
	.content_inner{
		padding:0 2px;
	}
	h4 {
		font-size: 1.1em;
		margin-bottom: 20px;
		padding-bottom: 0.2em;
		border-bottom: solid 2px #005b9f;
	}
	.alert-title{
		font-size: 1.09em;
		font-weight: bold;
	}
	.text-right.sp{
		text-align: left;
	}
}
span.rev_ind {					/* spanブロック化 */
	display: block;
	padding: 0 0 0 0.5em;
	text-indent: -0.5em;
}



/** 02. balloon-2 bottom
 **************************************************************** **/
.balloon_bottom {
	position: relative;
	display: inline-block;
	padding:10px;
	width: auto;
	min-width: 115px;
	color: #F6F6F6;
	line-height: 40px;
	text-align: center;
	-webkit-border-radius: 5px;    /* Safari,Google Chrome */
	-moz-border-radius: 5px;   /* Firefox */
	border-radius: 5px;        /* CSS3 */
	background: #f24387;
	z-index: 0;
}
.balloon_bottom:after {
	content: "";
	position: absolute;
	bottom: -10px; left: 50%;
	margin-left: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #f24387 transparent transparent transparent;
}
.btn {
white-space: normal;
}





/** 03. nav
 **************************************************************** **/
.nav-pills > li > a {
	border-radius: 0px;
}
.nav > li > a {
	margin-left: 5px;
	margin-right: 5px;
	background-color: #FFFFFF;
	color: #545555;
}
.nav-tabs > li > a:hover {
	border-color: #FFFFFF;
}
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus{
	color: #323232;
	background-color: #FFFFFF;
	border-bottom: double 3px rgba(34,125,187,1.00);
	border-radius: 0px;
}
.nav > li > a {
	position: relative;
	display: block;
	padding: 10px 5px;
}
#content ul.nav li{
	line-height: 1.3;
}



.nav-tabs > li > a {
    position: relative;
    padding: 5px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
}


#content ul.nav-tabs > li {
    margin: 0;
    padding-left: 0em;
    display: block;
    width: 220px;
		float: left;
}
.nav-tabs > li> a, .nav-tabs > li > a:hover, .nav-tabs > li> a:focus {
  border: 1px solid #ddd;
}

@media (max-width: 768px) {
.nav > li {
	display: block;
	width: 50%;
}

.nav > li > a {
    padding: 5px 5px;
}
#content ul.nav-tabs > li {
    margin: 0;
    padding-left: 0em;
    display: block;
    width: 170px;
    font-size: 12.5px;
}
}

/* ----------------------------------------
 * top navの調整
 * --------------------------------------- */
.nav.nav-primary > li.row_center{
	vertical-align: middle;
}
.nav.nav-primary > li > a {
	display: table;
	width:95%;
	height: 55px;
}
.nav.nav-primary > li > a >span{
	display: table-cell;
	vertical-align: middle;
}
@media (max-width: 768px) {
	.nav.nav-primary > li > a {
		height: 50px;
	}
}
/* ----------------------------------------
 * header-nav
 * --------------------------------------- */
#content .container_nav ul li, #content .container_nav ol li {
	line-height: 1.2;
}
#content .container_nav ul, #content .container_nav ol {
	margin: 0;
	margin-bottom: 0;
}
#content .container_nav ul {
	margin: 0;
	padding-left: 0;
}
.container_nav {
	margin-right: auto;
	margin-left: auto;
	padding-right: 15px;
	padding-left: 15px;
}
.header-nav .container {
	margin-right: auto;
	margin-left: auto;
	padding-right: 15px;
	padding-left: 15px;
}
.header-nav ul {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	margin: 0;
	padding: 5px 0;
	list-style: none;
	-webkit-box-pack: justify;
	-moz-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.header-nav a, .header-nav a:link, .header-nav a:visited {
	text-decoration: none;
	color: #fff;
	background-color: #FF69B4;
}
.header-nav a {
	font-size: 1rem;
	font-weight: 500;
	position: relative;
	display: block;
	padding: 5px;
	text-align: center;
	background: #fff;
	box-sizing: border-box;
	text-decoration: none;
	margin: 0 5px;
	font-weight: 600;
	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
	-webkit-tap-highlight-color: transparent;
	transition: .3s ease-out;
}
.header-nav a:after, :before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-decoration: none;
}
.header-nav a:hover{
	background-color: #FF69B4;
	color: #fff;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}
.header-nav .container {
	padding-right: 12px;
	padding-left: 12px;
}
.header-nav a:after {
	display: block;
	height: 0px;
	margin-top: 3px;
	margin-bottom: 3px;
	content: '';
}
.header-nav li {
	padding: 5px 3px;
	text-align: center;
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
}
@media screen and (max-width: 979px){
	.header-nav a {
		font-size: 0.9rem;
		text-align: center;
	}
}
@media screen and (max-width: 767px){
	.header-nav li {
		width: 50%;
		-webkit-box-flex: initial;
		-moz-box-flex: initial;
		-ms-flex: initial;
		flex: initial;
	}
	.header-nav a:after {
		position: absolute;
		top: 50%;
		right: 5px;
		width: 10px;
		margin-top: -4px;
	}
}
@media screen and (max-width: 480px){
	.header-nav li {
		width: 50%;
		-webkit-box-flex: initial;
		-moz-box-flex: initial;
		-ms-flex: initial;
		flex: initial;
	}
	.header-nav a {
		font-size: 0.9rem;
		text-align: center;
	}
}





/** 04. リストにフォントオーサム使用
 **************************************************************** **/
#content .list_check ul {
	list-style: none;
	margin: 0;
	padding-left: 1em;
}
#content .list_check li{
	position: relative;
	padding-left: 0.4em;
	padding-bottom: 0.4em;
	font-weight: bold;
	font-size: 1.1em;
}
#content .list_check li:before {
	font-family: FontAwesome;
	content: '\f046'; /* アイコンのunicode */
	position: absolute;
	font-size: 1.2em;
	left: -0.8em; /* アイコンのスタート位置。左揃えの場合 ul のpadding-leftと同じ値 */
	top: -0.05em; /* アイコンの場所を変えたければ適宜変更 */
}




/** 05. 囲み文字の基本形 インデント有
 **************************************************************** **/
.maru {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	flex-flow: column; 
	vertical-align: top;
}
/* 円の大きさ */
.size_normal{
	width: 110px;
	height: 110px;
}
@media (max-width: 768px) {
	.size_normal{
		width: 80px;
		height: 80px;
	}
}
/* 四角の大きさ */
.content_inner .square {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	flex-flow: column; 
	margin-right: 0.2em;
}
.content_inner .square2 {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 20px;
	height: 20px;
	flex-flow: column; 
	margin-right: 0.2em;
}

/* 文字の大きさ */
.letter3 {
	font-size: 1.1em;
	line-height: 1.3em;
	text-indent: 0.1em;
}
.letter4 {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 3em;
	text-align: center;
}
/* 囲みと文字の色 */
.gray1 {
	color: #5F5F5F;
	border: 1px solid #5F5F5F;
	background: #fff;
}
.yellow1 {
	color: #C7B500;
	border: 1px solid #C7B500;
	background: #fff;
}
.purple1 {
	color: #8a2be2;
	border: 1px solid #8a2be2;
	background: #fff;
}
.blue1 {
	color: #fff;
	border: 1px solid #217dbb;
	background: #217dbb;
}
.lightblue1 {
	color: #fff;
	border: 1px solid #BBE0F2;
	background: #BBE0F2;
}
.pink1 {
	color: #E500B3;
	border: 1px solid #E500B3;
	background: #fff;
}
.red1 {
	color: #ea1c0d;
	border: 1px solid #ea1c0d;
	background: #fff;
}
.green1 {
	color: #008000;
	border: 1px solid #008000;
	background: #fff;
}






/** 06. ページ内リンク
 **************************************************************** **/
span.link-t-a {
	position: relative;
	top: 130px;/*左の数値を変えると、上下に調整します*/
	display: block;
}
@media (max-width: 768px) {
	span.link-t-a {
		position: relative;
		top: 120px;/*左の数値を変えると、上下に調整します*/
		display: block;
	}
}




/** 07. 画像上の文字
 **************************************************************** **/
.colorfilter-base {
	background-color: rgba(0,0,0,1.00); /* カラーフィルタ効果の色を指定 */
}
.colorfilter-image {
	opacity: 0.6;    /* カラーフィルタ効果の度合いを指定(※) */
	display: block;
}
.bg-inner {
	text-align: center;
	position: absolute;
	width: 100%;
}
#example {
	position: relative;
	margin: 0;
}
#example img {
	width: 100%;
}
#example h3{
	font-family: vdl-v7marugothic, sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size:2.5em;
	color: #fff;
	border-bottom: solid 0px #E1E2E1;
	margin-top: 0px;
	margin-bottom: 0px;
}
#example-in {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	margin: 0 auto;
	line-height: 1.7;
	padding: 20px 10px;
}

/* Opacity*/
#example{
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.box_yellow{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border: solid 8px rgba(208,218,55,0.50);
	width: 50%;
	height: 60%;
	margin: 0 auto;
	font-size: 1rem;
	line-height: 1.7;
}
@media (max-width: 1200px) {
	#example h3{
		font-size: 2.2em;
		color: #fff;
		border-bottom: solid 0px #E1E2E1;
		line-height: 1.5;
	}
	}

@media (max-width: 991px) {
	#example h3{
		font-size: 1.5em;
		color: #fff;
		border-bottom: solid 0px #E1E2E1;
		line-height: 1.5;
	}
	}
@media (max-width: 768px) {
	#example h3{
		font-size: 1.5em;
		color: #fff;
		border-bottom: solid 0px #E1E2E1;
		line-height: 1.5;
	}
	#example p{
		color: #494949;
		font-size: 3vw;
	}
	#example-in {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 100%;
		height: 100%;
		margin: 0 auto;
		line-height: 1.7;
		padding: 5px 10px;
	}
	.box_yellow{
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		border: solid 4px rgba(208,218,55,0.50);
		width: 60%;
		height: 60%;
		margin: 0 auto;
		font-size: 1rem;
		line-height: 1.7;
	}
}


@media (max-width: 480px) {
	#example h3{
		font-size: 1em;
		color: #fff;
		border-bottom: solid 0px #E1E2E1;
		line-height: 1.5;
	}
	}






/** 08. border 追加
 **************************************************************** **/
.border_bottom_dot {
	border-bottom: 4px dotted #FF69B4;
	margin: 0 10px 0px 10px;
}






/** 09. heading center
 **************************************************************** **/
#content .center-heading h6 {
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	font-size: 20px;
	letter-spacing: 0.17em;
	color: #333;
	line-height: 1.8;
}
@media(max-width:533px){
	#content .center-heading h6{
		font-size: 18px;
		letter-spacing: 0.10em;
	}
}
#content .center-heading h6:first-letter{
	text-transform: uppercase;
}






/** 10. bootstrap 機能拡張
 **************************************************************** **/
.row-center{
	letter-spacing:-0.4em;
}
.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;
}
.nav-tabs > li, .nav-pills > li {
	float:none;
	display:inline-block;
	/*display:inline; /* ie7 fix */
	 zoom:1; /* hasLayout ie7 trigger */
}
.nav-tabs, .nav-pills {
	text-align:center;
}





/** 11. 付箋風ボックス
 **************************************************************** **/
.box_fusen{
	position: relative;
	background: #BAE0F2;
	box-shadow: 0px 0px 0px 0px #BAE0F2;
	padding: 0.5em 1em;
	color: #454545;
	width: 100%;
	height: 120px;
	margin-top: 10px;
	display: table;
	text-align: center;
}
.box_fusen:after{
	position: absolute;
	content: '';
	right: -0px;
	top: -0px;
	border-width: 0 15px 15px 0;
	border-style: solid;
	border-color: #8FCAE6 #fff #8FCAE6;
	box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.box_fusen p {
	font-family: "M PLUS 1p";
	display: table-cell;
	vertical-align: middle;
	margin: 0; 
	padding: 0;
}







/** 12. 丸い背景ボックス
 **************************************************************** **/
.circle_text {	
	position: relative;
	display: inline-block;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: #BAE0F2;
}
.circle_text .c_text {
	position: absolute;
	display: inline-block;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	width :260px;
	text-align:center;
	font-family: "M PLUS 1p";
}
.circle_text .c_text .c_text_title {
	font-family: "M PLUS 1p";
	border-bottom: solid 2px #ffff;
	line-height: 4;
	font-size: 1.2em;
	font-weight: 700;
}







/** 13. アコーディオン追加
 **************************************************************** **/
article {
	overflow-x: hidden;
}
@media only screen and (max-width: 768px) {
	.faq_comment {
		padding: 0px;
	}

	.faq_comment {
		padding: 5px;
	}
}

.box.panel-title.accordion-toggle .list-group-item {
padding-right: 30px;
}

.box.panel-title.accordion-toggle a:after {
    right: 15px;
}


/** 14. youtubeボタン
 **************************************************************** **/
.youtube-btn {
	vertical-align: middle;
}
.youtube-btn::before {
	font-family: 'Font Awesome 5 Brands';
	content: "\f167";
	font-weight: 900;
	font-size: 30px;
	vertical-align: middle;
	margin-right: 0.1em;
}




/** 15. 吹き出し
 **************************************************************** **/
.fukidashi_bottom {
	position: relative;
	display: inline-block;
	margin: 1.5em 0;
	padding: 20px 40px;
	min-width: 120px;
	max-width: 100%;
	color: #393939;
	background: #fff;
	border-radius: 15px;
	border: 10px solid #F8FBAB;
}
.fukidashi_bottom:before {
  content: "";
  position: absolute;
  bottom: -44px;
  left: 50%;
  margin-left: -11px;
  border: 22px solid transparent;
  border-top: 22px solid #FFF;
  z-index: 2;
}
.fukidashi_bottom:after {
  content: "";
  position: absolute;
  bottom: -64px;
  left: 50%;
  margin-left: -21px;
  border: 32px solid transparent;
  border-top: 32px solid #F8FBAB;
  z-index: 1;
}
@media only screen and (max-width: 768px) {
	.fukidashi_bottom {
		padding: 10px 10px;
	}
}


/* -------------------------------------------------- *
 * 丸の中の画像
 * -------------------------------------------------- */
.comment_phoho {
	border-radius: 50%;
}


/** 04. module
 **************************************************************** **/
.module_inner {
	padding: 15px 20px;
}
@media screen and (max-width: 767px) {
	.module_inner {
	padding: 15px 20px;
	}
}
.module p {
	font-family: 'YakuHanJP' ,'M PLUS 1p', "Open Sans", "Helvetica Neue", Helvetica, "Arial","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "游ゴシック", YuGothic, sans-serif;
	margin: 0 0 0;
}


.content_inner .content_full {
	margin: 0 0;
}
@media screen and (max-width: 767px) {
	.content_inner {
		padding: 5px;
	}
	.content_inner .content_full {
	margin: 0 -15px;
	}
}

/* -------------------------------------------------- *
 * 追加　位置調整など
 * -------------------------------------------------- */
.setup {
	margin: 2em 0;
}
@media screen and (max-width: 768px) {
	.setup {
		margin: 0;
	}
}

.red1_1 {
	display: inline-block;
	padding: 0em 1em;
	margin: 1em;
	color: #ea1c0d;
	border: 1px solid #ea1c0d;
}
@media screen and (max-width: 991px) {
	.red1_1 {
		padding: .3em .5em;
		margin: 1em;
	}
}




/** 16. order_btn
 **************************************************************** **/


#order_btn {
	position: fixed;
	bottom: 100px;
	right: 0;
	font-size:1.1em;
	z-index:5;
}
#order_btn a {
	background: rgba(0,0,128,0.90);
	text-decoration: none;
	color: #fff;
	width: 200px;
	padding: 15px;
	text-align: center;
	display: block;
	-webkit-border-radius: 5px 0 0 5px;
	   -moz-border-radius: 5px 0 0 5px;
	        border-radius: 5px 0 0 5px;
}
#order_btn a:hover {
	text-decoration: none;
	background: #3131B1;
}
@media (max-width: 768px) {
	#order_btn {
		position: fixed;
		bottom: 100px;
		right: 10px;
		font-size: 0.8em;
	}
	#order_btn a {
		background: #000080;
		text-decoration: none;
		border: 1px solid #fff;
		color: #fff;
		width: 80px;
		height: 80px;
		padding: 14px;
		text-align: center;
		display: block;
		-webkit-border-radius: 50%;
		   -moz-border-radius: 50%;
		        border-radius: 50%;
	}
	#order_btn a:hover {
		text-decoration: none;
		background: #000080;
	}
	.menu-button {
	position: absolute;
	right: 0px;
	top: 0px;
	}
}