@charset "UTF-8";

/*------------------------------------------------------------
hover・・・ボタンホバー効果
-------------------------------------------------------------*/
.btn:hover {
	opacity: 0.7;
}

/*------------------------------------------------------------
clear・・・クリアフィックス解除
-------------------------------------------------------------*/
.clearfix {
	clear: both;
}

/*------------------------------------------------------------
align・・・文字の横位置
-------------------------------------------------------------*/
.al-c {
	text-align: center;
}

/*中央寄せ*/
.al-r {
	text-align: right;
}

/*右寄せ*/
.al-l {
	text-align: left;
}

/*左寄せ*/
/*------------------------------------------------------------
margin・・・周りのブロックからの距離
-------------------------------------------------------------*/

.m0 {
	margin: 0 !important;
}

/*周りからのmarginを0に*/
.m0-t {
	margin-top: 0 !important;
}

/*上からのmarginを0に*/
.m0-r {
	margin-right: 0 !important;
}

/*右からのmarginを0に*/
.m0-b {
	margin-bottom: 0 !important;
}

/*下からのmarginを0に*/
.m0-l {
	margin-left: 0 !important;
}

/*左からのmarginを0に*/
.m5 {
	margin: 5px !important;
}

.m5-t {
	margin-top: 5px !important;
}

.m5-r {
	margin-right: 5px !important;
}

.m5-b {
	margin-bottom: 5px !important;
}

.m5-l {
	margin-left: 5px !important;
}

.m10 {
	margin: 10px !important;
}

.m10-t {
	margin-top: 10px !important;
}

.m10-r {
	margin-right: 10px !important;
}

.m10-b {
	margin-bottom: 10px !important;
}

.m10-l {
	margin-left: 10px !important;
}

.m15 {
	margin: 15px !important;
}

.m15-t {
	margin-top: 15px !important;
}

.m15-r {
	margin-right: 15px !important;
}

.m15-b {
	margin-bottom: 15px !important;
}

.m15-l {
	margin-left: 15px !important;
}

.m20 {
	margin: 20px !important;
}

.m20-t {
	margin-top: 20px !important;
}

.m20-r {
	margin-right: 20px !important;
}

.m20-b {
	margin-bottom: 20px !important;
}

.m20-l {
	margin-left: 20px !important;
}

.m25 {
	margin: 25px !important;
}

.m25-t {
	margin-top: 25px !important;
}

.m25-r {
	margin-right: 25px !important;
}

.m25-b {
	margin-bottom: 25px !important;
}

.m25-l {
	margin-left: 25px !important;
}

.m30 {
	margin: 30px !important;
}

.m30-t {
	margin-top: 30px !important;
}

.m30-r {
	margin-right: 30px !important;
}

.m30-b {
	margin-bottom: 30px !important;
}

.m30-l {
	margin-left: 30px !important;
}

.m40 {
	margin: 40px !important;
}

.m40-t {
	margin-top: 40px !important;
}

.m40-r {
	margin-right: 40px !important;
}

.m40-b {
	margin-bottom: 40px !important;
}

.m40-l {
	margin-left: 40px !important;
}

.m50 {
	margin: 50px !important;
}

.m50-t {
	margin-top: 50px !important;
}

.m50-r {
	margin-right: 50px !important;
}

.m50-b {
	margin-bottom: 50px !important;
}

.m50-l {
	margin-left: 50px !important;
}

.m60 {
	margin: 60px !important;
}

.m60-t {
	margin-top: 60px !important;
}

.m60-r {
	margin-right: 60px !important;
}

.m60-b {
	margin-bottom: 60px !important;
}

.m60-l {
	margin-left: 60px !important;
}

.m70 {
	margin: 70px !important;
}

.m70-t {
	margin-top: 70px !important;
}

.m70-r {
	margin-right: 70px !important;
}

.m70-b {
	margin-bottom: 70px !important;
}

.m70-l {
	margin-left: 70px !important;
}

.m80 {
	margin: 80px !important;
}

.m80-t {
	margin-top: 80px !important;
}

.m80-r {
	margin-right: 80px !important;
}

.m80-b {
	margin-bottom: 80px !important;
}

.m80-l {
	margin-left: 80px !important;
}

.m90 {
	margin: 90px !important;
}

.m90-t {
	margin-top: 90px !important;
}

.m90-r {
	margin-right: 90px !important;
}

.m90-b {
	margin-bottom: 90px !important;
}

.m90-l {
	margin-left: 90px !important;
}

.m100 {
	margin: 100px !important;
}

.m100-t {
	margin-top: 100px !important;
}

.m100-r {
	margin-right: 100px !important;
}

.m100-b {
	margin-bottom: 100px !important;
}

.m100-l {
	margin-left: 100px !important;
}

/*------------------------------------------------------------
5、padding・・・周りのブロックからの距離（padding）
-------------------------------------------------------------*/

.p0 {
	padding: 0 !important;
}

.p0-t {
	padding-top: 0 !important;
}

.p0-r {
	padding-right: 0 !important;
}

.p0-b {
	padding-bottom: 0 !important;
}

.p0-l {
	padding-left: 0 !important;
}

.p5 {
	padding: 5px !important;
}

.p5-t {
	padding-top: 5px !important;
}

.p5-r {
	padding-right: 5px !important;
}

.p5-b {
	padding-bottom: 5px !important;
}

.p5-l {
	padding-left: 5px !important;
}

.p10 {
	padding: 10px !important;
}

.p10-t {
	padding-top: 10px !important;
}

.p10-r {
	padding-right: 10px !important;
}

.p10-b {
	padding-bottom: 10px !important;
}

.p10-l {
	padding-left: 10px !important;
}

.p15 {
	padding: 15px !important;
}

.p15-t {
	padding-top: 15px !important;
}

.p15-r {
	padding-right: 15px !important;
}

.p15-b {
	padding-bottom: 15px !important;
}

.p15-l {
	padding-left: 15px !important;
}

.p20 {
	padding: 20px !important;
}

.p20-t {
	padding-top: 20px !important;
}

.p20-r {
	padding-right: 20px !important;
}

.p20-b {
	padding-bottom: 20px !important;
}

.p20-l {
	padding-left: 20px !important;
}

.p25 {
	padding: 25px !important;
}

.p25-t {
	padding-top: 25px !important;
}

.p25-r {
	padding-right: 25px !important;
}

.p25-b {
	padding-bottom: 25px !important;
}

.p25-l {
	padding-left: 25px !important;
}

.p30 {
	padding: 30px !important;
}

.p30-t {
	padding-top: 30px !important;
}

.p30-r {
	padding-right: 30px !important;
}

.p30-b {
	padding-bottom: 30px !important;
}

.p30-l {
	padding-left: 30px !important;
}

.p40 {
	padding: 40px !important;
}

.p40-t {
	padding-top: 40px !important;
}

.p40-r {
	padding-right: 40px !important;
}

.p40-b {
	padding-bottom: 40px !important;
}

.p40-l {
	padding-left: 40px !important;
}

.p50 {
	padding: 50px !important;
}

.p50-t {
	padding-top: 50px !important;
}

.p50-r {
	padding-right: 50px !important;
}

.p50-b {
	padding-bottom: 50px !important;
}

.p50-l {
	padding-left: 50px !important;
}

.p60 {
	padding: 60px !important;
}

.p60-t {
	padding-top: 60px !important;
}

.p60-r {
	padding-right: 60px !important;
}

.p60-b {
	padding-bottom: 60px !important;
}

.p60-l {
	padding-left: 60px !important;
}

.p70 {
	padding: 70px !important;
}

.p70-t {
	padding-top: 70px !important;
}

.p70-r {
	padding-right: 70px !important;
}

.p70-b {
	padding-bottom: 70px !important;
}

.p70-l {
	padding-left: 70px !important;
}

.p80 {
	padding: 80px !important;
}

.p80-t {
	padding-top: 80px !important;
}

.p80-r {
	padding-right: 80px !important;
}

.p80-b {
	padding-bottom: 80px !important;
}

.p80-l {
	padding-left: 80px !important;
}

.p90 {
	padding: 90px !important;
}

.p90-t {
	padding-top: 90px !important;
}

.p90-r {
	padding-right: 90px !important;
}

.p90-b {
	padding-bottom: 90px !important;
}

.p90-l {
	padding-left: 90px !important;
}

.p100 {
	padding: 100px !important;
}

.p100-t {
	padding-top: 100px !important;
}

.p100-r {
	padding-right: 100px !important;
}

.p100-b {
	padding-bottom: 100px !important;
}

.p100-l {
	padding-left: 100px !important;
}

/*------------------------------------------------------------
font-size・・・フォントサイズの設定
-------------------------------------------------------------*/

.b {
	font-weight: bold !important;
}

/*太字*/
.normal {
	font-weight: normal !important;
}

/*太字を解除*/
.big {
	font-size: 1.2em !important;
}

.big2 {
	font-size: 1.5em !important;
}

.big3 {
	font-size: 1.8em !important;
}

.small {
	font-size: 0.8em !important;
}

.f08em {
	font-size: 0.8em;
}

.f09em {
	font-size: 0.9em;
}

.f10em {
	font-size: 1.0em;
}

.f11em {
	font-size: 1.1em;
}

.f12em {
	font-size: 1.2em;
}

.f13em {
	font-size: 1.3em;
}

.f14em {
	font-size: 1.4em;
}

.f15em {
	font-size: 1.5em;
}

.f16em {
	font-size: 1.6em;
}

.f17em {
	font-size: 1.7em;
}

.f18em {
	font-size: 1.8em;
}

.f19em {
	font-size: 1.9em;
}

.f20em {
	font-size: 2.0em;
}

.f21em {
	font-size: 2.1em;
}

.f22em {
	font-size: 2.2em;
}

.f23em {
	font-size: 2.3em;
}

.f24em {
	font-size: 2.4em;
}

/*------------------------------------------------------------
color・・・フォントカラーの設定
-------------------------------------------------------------*/

.red {
	color: #ff0000 !important;
}

/*赤*/
.blue {
	color: #0000dd !important;
}

/*青*/
.green {
	color: #008000 !important;
}

/*緑*/
.yellow {
	color: #ffff00 !important;
}

/*黄*/
.navy {
	color: #1F26A9 !important;
}

/*紺*/
.orange {
	color: #ff6f17 !important;
}

/*橙*/
.pink {
	color: #cc6699 !important;
}

/*ピンク*/
.purple {
	color: #660099 !important;
}

/*紫*/
.olive {
	color: #808000 !important;
}

/*黄土色*/
.lime {
	color: #00ff00 !important;
}

/*黄緑*/
.aqua {
	color: #167FA6 !important;
}

/*水色*/
.black {
	color: #000 !important;
}

/*黒*/
.gray {
	color: #ccc !important;
}

/*灰*/
.white {
	color: #fff !important;
}

/*白*/
/*------------------------------------------------------------
下線や取消線の設定
-------------------------------------------------------------*/

.underline {
	text-decoration: underline !important;
}

.del {
	text-decoration: line-through;
}

.noborder {
	border: 0 !important;
}

/*枠線を無くす*/

/*------------------------------------------------------------
吹き出しの設定
-------------------------------------------------------------*/


.fukidasi_mds {
	position: relative;
	display: inline-block;
	margin: 1.5em auto;
	padding: 1em;
	min-width: 120px;
	max-width: 100%;
	color: #fff;
	background: #D71313;
	border-radius: 15px;
	text-align: center;

}

.fukidasi:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #D71313;
}

/*------------------------------------------------------------
矢印の設定
-------------------------------------------------------------*/
/* 45度の矢印 */
.dli-chevron-down45 {
	display: inline-block;
	vertical-align: middle;
	color: #333;
	line-height: 1;
	width: 2em;
	height: 2em;
	border: 0.1em solid currentColor;
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: translateY(-20%) rotate(135deg);
}

/* 60度の矢印 */

.dli-chevron-down60 {
	position: relative;
	display: inline-block;
	width: 135.6px;
	height: 42px;
}

.dli-chevron-down60::before,
.dli-chevron-down60::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: calc(50% - 2px);
	/* 矢印を中央に配置 */
	width: 4px;
	/* 矢印の太さ */
	height: 80px;
	/* 矢印の長さ */
	border-radius: 9999px;
	/* 矢印の丸み */
	background-color: #E91E63;
	/* 矢印の色 */
	transform-origin: 50% calc(100% - 2px);
	/* 回転の基準点 */
}

.dli-chevron-down60::before {
	transform: rotate(60deg);
	/* 矢印の上部 */
}

.dli-chevron-down60::after {
	transform: rotate(-60deg);
	/* 矢印の下部 */
}




/* 動く矢印 */
.cp_arrows *,
.cp_arrows *:before,
.cp_arrows *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.cp_arrows {
	position: relative;
	display: flex;
	height: 100px;
	/*画面いっぱいにする場合100vh*/
	margin: 0 auto;
	justify-content: center;
	align-items: center;
}

.cp_arrows .cp_arrow {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	opacity: 0;
}

.cp_arrows .cp_arrowfirst {
	-webkit-animation: arrow-move08 2s ease-in-out infinite;
	animation: arrow-move08 2s ease-in-out infinite;
}

.cp_arrows .cp_arrowsecond {
	-webkit-animation: arrow-move08 2s 1s ease-in-out infinite;
	animation: arrow-move08 2s 1s ease-in-out infinite;
}

.cp_arrows .cp_arrow:before,
.cp_arrows .cp_arrow:after {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 50px;
	height: 3px;
	content: '';
	background: #E91E63;
}

.cp_arrows .cp_arrow:before {
	-webkit-transform: rotate(30deg) translateX(-39%);
	transform: rotate(30deg) translateX(-39%);
	-webkit-transform-origin: top left;
	transform-origin: top left;
}

.cp_arrows .cp_arrow:after {
	-webkit-transform: rotate(-30deg) translateX(39%);
	transform: rotate(-30deg) translateX(39%);
	-webkit-transform-origin: top right;
	transform-origin: top right;
}

@-webkit-keyframes arrow-move08 {
	0% {
		top: 20%;
		/*スタート地点（サンプルは[class:cp_arrows]height300pxの35%）*/
		opacity: 0;
	}

	70% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes arrow-move08 {
	0% {
		top: 20%;
		/*スタート地点（サンプルは[class:cp_arrows]height300pxの35%）*/
		opacity: 0;
	}

	70% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/* ---動く矢印ここまで--- */
/*------------------------------------------------------------
動く下線
-------------------------------------------------------------*/

.border_G {
	width: 280px;
	/* 下線の長さ */
	height: 3px;
	/* 下線の幅 */
	background: linear-gradient(45deg, #DAAF08 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #DAAF08 100%);
	background-size: 800% 400%;
	animation: gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;
	margin: 5px auto 20px auto;
	/* 上側の余白を5pxにして下線をh2に近づける */
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

/*------------------------------------------------------------
蛍光ペンのようなボックスの設定
-------------------------------------------------------------*/

.box-yellow {
	padding: 2px;
	background-color: #ff9 !important;
}

/*黄色*/
.box-aqua {
	padding: 2px;
	background-color: #9ff !important;
}

/*水色*/
.box-gray {
	padding: 2px;
	background-color: #eee !important;
}

/*灰色*/
.box-red {
	padding: 2px;
	background-color: #fcc !important;
}

/*赤色*/

/* -----蛍光ペン＿文字半分設定----- */
.box-yellow_half {
	background: linear-gradient(transparent 60%, #ff6 60%);
}

.box-red_half {
	background: linear-gradient(transparent 60%, #fcc 60%);
}

/*------------------------------------------------------------
入力フォームをハイライトする
-------------------------------------------------------------*/

input:focus,
textarea:focus,
input.focus,
textarea.focus {
	background-color: #ffffe4 !important;
}

/*------------------------------------------------------------
赤矢印の設置
-------------------------------------------------------------*/

.sales_triangle {
	width: 0;
	height: 0;
	border-left: 300px solid transparent;
	/* 底辺の半分 */
	border-right: 300px solid transparent;
	/* 底辺の半分 */
	border-bottom: 40px solid #ce1226;
	/* 三角形の色 */
	transform: rotate(180deg);
	/* 90度回転して右向きに */
	margin: auto;
	/* 中央揃え */
}

/*------------------------------------------------------------
画像を簡単に回り込ませる（スマホでは解除ver.）
-------------------------------------------------------------*/

.imgcenter_01,
.imgcenter_02 {
	clear: both;
}

/*左に画像、右に文章*/
.left_01,
.left_02 {
	float: left;
	margin: 10px 20px 20px 0 !important;
}

/*右に画像、左に画像*/
.right_01,
.right_02 {
	float: right;
	margin: 10px 0 20px 20px !important;
}

/*640pxで01の回り込み解除(02は解除しない)*/
@media only screen and (max-width : 768px) {

	.left_01,
	.right_01 {
		float: none;
		margin-right: 0 !important;
		margin-left: 0 !important;
		margin-bottom: 0 !important;
	}

	/*スマホ閲覧時に画像をセンターに寄せる(02は寄せない)*/
	.imgcenter_01,
	.imgcenter_02 {
		width: 100%;
		text-align: center;
	}

	.imgcenter_01 img {
		width: 80%;
	}

	.imgcenter_02 img {
		width: 30%;
	}
}

/*--------------------
 画像配置パターン2 
 -------------------*/

.kaiketu_container01,
.kaiketu_container02 {
	display: flex;
	align-items: center;
	/* 縦方向に中央揃え */
	position: relative;
	/* 子要素の位置調整の基準に */
	margin: 1em 0em;
}


.kaiketu_container02 {
	flex-direction: row-reverse;
	/* 要素を逆順にする */
}

.kaiketu_image img {
	width: 350px;
}

.kaiketu_text_lft {
	position: relative;
	z-index: 10;
	left: -2em;
	background-color: #fff;
	padding: 15px;
}

.kaiketu_text_rgt {
	position: relative;
	z-index: 10;
	right: -2em;
	background-color: #fff;
	padding: 15px;
}

.kaiketu_container01 h3,
.kaiketu_container02 h3 {
	margin: 0.5em;
	padding: 0.3em;
	font-size: 1.5em;
	font-weight: bold;
}

@media only screen and (max-width : 768px) {

	.kaiketu_container01,
	.kaiketu_container02 {
		flex-direction: column;
		/* 子要素を縦並びにする */
		align-items: center;
		/* 子要素を中央揃え */
		text-align: center;
		/* テキストの中央揃え */
	}


	.kaiketu_image img {
		width: 100%;
		/* 画像の幅を調整して画面に収まるようにする */
		max-width: 300px;
		/* 画像の最大幅を設定 */
		margin-bottom: -10px;
		/* テキストとの間隔を設定 */
		z-index: 100;

	}

	.kaiketu_text {
		position: static;
		/* 重なりを解除 */
		left: 0;
		/* 不要な左の配置をリセット */
		z-index: auto;
		/* z-indexをリセット */
		background-color: transparent;
		/* 必要に応じて背景色を透明に */
	}

	.kaiketu_text_lft {
		position: static;
		/* 重なりを解除 */
		left: 0;
		z-index: auto;
		margin: 1em;
		text-align: left;
	}

	.kaiketu_text_rgt {
		position: static;
		/* 重なりを解除 */
		right: 0;
		z-index: auto;
		margin: 1em;
		text-align: left;
	}

	.kaiketu_container01 h3,
	.kaiketu_container02 h3 {
		margin: 0.5em;
		padding: 0.3em;
		font-size: 1.5em;
		font-weight: bold;
	}


}


/*------------------------------------------------------------
ノートのような線を引く
-------------------------------------------------------------*/

.noteline {
	display: inline !important;
	padding-bottom: 0.3em !important;
	border-bottom: 1px dashed #7070ba !important;
	line-height: 2.1em !important;
}

.line_under {
	border-bottom: 1px dotted #ccc;
	padding-bottom: 10px;
	margin-bottom: 1em;
}


/*------------------------------------------------------------
スマホ改行コード(スマホ時のみ改行される)
-------------------------------------------------------------*/

.sp_br {
	display: none;
}

@media only screen and (max-width : 768px) {
	.sp_br {
		display: block;
	}
}
.sp_pc {
	display: block;
}

@media only screen and (max-width : 768px) {
	.sp_pc {
		display: none;
	}
}

/*------------------------------------------------------------
ボタンふわふわアニメーション※animate.css
-------------------------------------------------------------*/

.animated-img {
	animation-duration: 5s;
	animation-iteration-count: infinite;
}




/*------------------------------------------------------------
アニメーションで表示※JQueryを使用
-------------------------------------------------------------*/

/*フェードイン*/

.fadein {
	opacity: 0;
	transform: translateY(0px);
	transition: all 2s;
}

.fadeinleft {
	opacity: 0;
	transform: translateX(-40px);
	transition: all 2s;
}

/*右からフェードイン*/
.fadeinright {
	opacity: 0;
	transform: translateX(40px);
	transition: all 2s;
}

/*------------------------------------------------------------
光るエフェクト
-------------------------------------------------------------*/


.scroll_hint {
  position: relative;
  display: inline-block;
  padding: 0.5em 1em;
  font-weight: bold;
  border-radius: 0.5em;
  color: #e60000;
  overflow: hidden;
}

/* 光エフェクト */
.scroll_hint::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  transform: rotate(25deg);
  animation: shiny-effect 2.5s infinite;
}

/* アニメーション */
@keyframes shiny-effect {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}