@charset "UTF-8";



/** 01. Buttons
 **************************************************************** **/
.btn.link-btn,
.link-btn {
	display: block;
	background: #db3561;
	color: #fff;
	border-radius: 50px;
	padding: 1em;
	text-align: center;
	font-size: 17px;
	border: 3px solid #db3561;
}

/* brown */
.btn.link-btn.btn-brown,
.link-btn.btn-brown {
	background: #CDBC9D;
	border: 3px solid #CDBC9D;
}

/* apua */
.btn.link-btn.btn-aqua,
.link-btn.btn-aqua {
	background: #2f98b7;
	border: 3px solid #2f98b7;
}

/* purple */
.btn.link-btn.btn-purple,
.link-btn.btn-purple {
	background: #C799E7;
	border: 3px solid #C799E7;
}

/* blue */
.btn.link-btn.btn-blue,
.link-btn.btn-blue {
	background: #7FADF1;
	border: 3px solid #7FADF1;
}

.btn.link-btn:hover,
.btn.btn-default.link-btn.disabled:hover {
	opacity: 0.8;
}

.btn-default.disabled.link-btn, .btn-default.link-btn.disabled:hover, .btn-default.link-btn.disabled:focus, .btn-default.link-btn.disabled.focus, .btn-default.link-btn.disabled:active, .btn-default.link-btn.disabled.active, .btn-default.link-btn[disabled], .btn-default.link-btn[disabled]:hover, .btn-default.link-btn[disabled]:focus, .btn-default.link-btn[disabled].focus, .btn-default.link-btn[disabled]:active, .btn-default.link-btn[disabled].active, fieldset[disabled] .btn-default.link-btn, fieldset[disabled] .btn-default.link-btn:hover, fieldset[disabled] .btn-default.link-btn:focus, fieldset[disabled] .btn-default.link-btn.focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.link-btn.active {
	background: #db3561;
	border-color: #db3561;
	color: #fff;
}

@media (max-width: 768px) {
	.btn.link-btn,.link-btn {
		font-size: 2vw;
	}

	.btn.link-btn.r20,.link-btn.r20 {
		border-radius: 20px;
		padding: 0.5em;
	}
}

@media (max-width: 650px) {
	.btn.link-btn,
	.link-btn {
		font-size: 2.5vw;
	}
}

@media (max-width: 480px) {
	.btn.link-btn,
	.link-btn {
		font-size: 3.5vw;
	}
}


/******************ボーダーボタン内のラベル*******************/
.btn.link-btn .bg-default.label-outline,
.link-btn .bg-default.label-outline {
	background-color:#fff;
	border: solid 0px #db3561;
	color: #db3561;
}

/* apua */
.btn.link-btn.btn-aqua .bg-default.label-outline,
link-btn.btn-aqua .bg-default.label-outline {
	background-color:#fff;
	border: solid 0px #2f98b7;
	color: #2f98b7;
}

/* brown */
.btn.link-btn.btn-brown .bg-default.label-outline,
.link-btn.btn-brown .bg-default.label-outline {
	background-color:#fff;
	border: solid 0px #CDBC9D;
	color: #A18B63;
}

/* purple */
.btn.link-btn.btn-purple .bg-default.label-outline,
.link-btn.btn-purple .bg-default.label-outline {
	background-color:#fff;
	border: solid 0px #C799E7;
	color: #C799E7;
}

/* blue */
.btn.link-btn.btn-blue .bg-default.label-outline,
.link-btn.btn-blue .bg-default.label-outline {
	background-color:#fff;
	border: solid 0px #7FADF1;
	color: #7FADF1;
}






/** 02. 矢印
 **************************************************************** **/
.down_yajirushi {
	margin: 30px auto -10px;
	position: relative;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #0097cf;
}

.down_yajirushi::after {
	position: absolute;
	content: '';
	top: -39px;
	left: -10px;
	width: 20px;
	height: 20px;
	background: #0097cf;
}


/******************矢印の色 brown*******************/
.down_yajirushi.brown {
	border-top-color: #CDBC9D;
}

.down_yajirushi.brown::after {
	position: absolute;
	content: '';
	top: -39px;
	left: -10px;
	width: 20px;
	height: 20px;
	background: #CDBC9D;
}


/* 矢印の長さ long */
.down_yajirushi.brown.long {
	margin: 220px auto -5px;
	position: relative;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #CDBC9D;
}

.down_yajirushi.brown.long::after {
	position: absolute;
	content: '';
	top: -230px;
	left: -10px;
	width: 20px;
	height: 210px;
	background: #CDBC9D;
}

/* 矢印の長さ long2 */
.down_yajirushi.brown.long2 {
	margin: 220px auto -5px;
	position: relative;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #CDBC9D;
}

.down_yajirushi.brown.long2::after {
	position: absolute;
	content: '';
	top: -230px;
	left: -10px;
	width: 20px;
	height: 210px;
	background: #CDBC9D;
}

@media (max-width: 480px) {
	.down_yajirushi.brown.long2 {
		margin: 170px auto -5px;
		position: relative;
		width: 0;
		height: 0;
		border: 20px solid transparent;
		border-top-color: #CDBC9D;
	}

	.down_yajirushi.brown.long2::after {
		position: absolute;
		content: '';
		top: -180px;
		left: -10px;
		width: 20px;
		height: 160px;
		background: #CDBC9D;
	}
}



/******************矢印の色 purple*******************/
.down_yajirushi.purple {
	border-top-color: #C799E7;
}

.down_yajirushi.purple::after {
	position: absolute;
	content: '';
	top: -39px;
	left: -10px;
	width: 20px;
	height: 20px;
	background: #C799E7;
}


/* 矢印の長さ long */
.down_yajirushi.purple.long {
	margin: 200px auto -5px;
	position: relative;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #C799E7;
}

.down_yajirushi.purple.long::after {
	position: absolute;
	content: '';
	top: -210px;
	left: -10px;
	width: 20px;
	height: 190px;
	background: #C799E7;
}

/* 矢印の長さ long2 */
.down_yajirushi.purple.long2 {
	margin: 200px auto -5px;
	position: relative;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #C799E7;
}

.down_yajirushi.purple.long2::after {
	position: absolute;
	content: '';
	top: -210px;
	left: -10px;
	width: 20px;
	height: 190px;
	background: #C799E7;
}

@media (max-width: 480px) {
	.down_yajirushi.purple.long2 {
		margin: 150px auto -5px;
		position: relative;
		width: 0;
		height: 0;
		border: 20px solid transparent;
		border-top-color: #C799E7;
	}

	.down_yajirushi.purple.long2::after {
		position: absolute;
		content: '';
		top: -160px;
		left: -10px;
		width: 20px;
		height: 140px;
		background: #C799E7;
	}
}



/******************矢印の色 blue*******************/
.down_yajirushi.blue {
	border-top-color: #7FADF1;
}

.down_yajirushi.blue::after{
	position: absolute;
	content: '';
	top: -39px;
	left: -10px;
	width: 20px;
	height: 20px;
	background: #7FADF1;
}


/* 矢印の長さ long */
.down_yajirushi.blue.long {
	margin: 190px auto -5px;
	position: relative;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #7FADF1;
}

.down_yajirushi.blue.long::after{
	position: absolute;
	content: '';
	top: -200px;
	left: -10px;
	width: 20px;
	height: 180px;
	background: #7FADF1;
}

/* 矢印の長さ long2 */
.down_yajirushi.blue.long2 {
	margin: 190px auto -5px;
	position: relative;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #7FADF1;
}

.down_yajirushi.blue.long2::after {
	position: absolute;
	content: '';
	top: -200px;
	left: -10px;
	width: 20px;
	height: 180px;
	background: #7FADF1;
}

@media (max-width: 480px) {
	.down_yajirushi.blue.long2 {
		margin: 150px auto -5px;
		position: relative;
		width: 0;
		height: 0;
		border: 20px solid transparent;
		border-top-color: #7FADF1;
	}
	
	.down_yajirushi.blue.long2::after {
		position: absolute;
		content: '';
		top: -160px;
		left: -10px;
		width: 20px;
		height: 140px;
		background: #7FADF1;
	}
}



/******************矢印の色 black*******************/
.down_yajirushi.black {
	border-top-color: #000000;
}

.down_yajirushi.black::after {
	position: absolute;
	content: '';
	top: -39px;
	left: -10px;
	width: 20px;
	height: 20px;
	background: #000000;
}





/** 03. bootstrap row 調整
 **************************************************************** **/
.row.mg3 {
	margin-right: -3px;
	margin-left: -3px;
}

.row.mg3 .col-7,
.row.mg3 .col-6,
.row.mg3 .col-5 {
	position: relative;
	min-height: 1px;
	padding-right: 3px;
	padding-left: 3px;
}








/** 04. module 色追加
 **************************************************************** **/
.module-brown {
	background-color: #e0d6c5;
}






/** 05. marker 色追加
 **************************************************************** **/
/* purple */
.marker.purple.thin {
	color: inherit;
	background: linear-gradient(transparent 70%, #cfbddc 70%);
}

/* blue */
.marker.blue.thin {
	color: inherit;
	background: linear-gradient(transparent 70%, #b0caf1 70%);
}


/** 06. snsアイコン
 **************************************************************** **/
.twitter a svg{
	background-color: #000000;
	position: relative;
	top:-2px;
}
.twitter a svg {
width:60px;
	height: 60px;
	padding: 12px;
}



/** 07. 吹き出し
 **************************************************************** **/
.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 2px #333333;
}

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

.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;
}



/** 08. card調整
 **************************************************************** **/
 
 
 .bg-dark {
 background-color: #595959!important;
 }
 .border-dark {
 border-color: #595959!important;
 }
 
.flow .border-info{
border-color: #2f98b7!important;
}

.flow .bg-info{
background-color: #2f98b7!important;
}

.flow .text-info{
color: #2f98b7!important;
}

.flow .btn-warning {
box-shadow: 5px 5px 0 0 #984909;
border: #984909 2px solid;
}

.flowbox .card {
    margin-top: 70px;
}
 
.flowbox .card-body {
    padding-top: 70px;
}

.flowbox .card-header {
	position: absolute;
	display: inline-block;
	    top: -10px;
    left: -10px;
}


.flowbox .header-icon8.content-icon .m-header-link-icon {
    background-image: url(/images/icon/header/icon_8.svg);
    width: 60px;
    height: 60px;
    display: inline-block;
    background-repeat: no-repeat;
}