@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: #ff6600!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;
	}
}

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


/*------------------------------------------------------------
蛍光ペンのようなボックスの設定
-------------------------------------------------------------*/
.box-yellow {
	display: inline-block; /* 必須：テキスト幅に合わせる */
	background: linear-gradient(transparent 50%, #ff9 50%); /* 上半分は透明、下半分は黄色 */
	padding: 0 4px; /* 水平方向の余白を調整 */
  }
  
.box-aqua {
	padding: 2px;
	background-color: #9ff!important;
}/*水色*/
.box-gray {
	padding: 2px;
	background-color: #eee!important;
}/*灰色*/
.box-red {
	padding: 2px;
	background-color: #fcc!important;
}/*赤色*/
/*------------------------------------------------------------
入力フォームをハイライトする
-------------------------------------------------------------*/

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

/*------------------------------------------------------------
画像を簡単に回り込ませる（スマホでは解除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%;
}
}


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

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

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

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

/*ふわふわアニメーション*/
.animation{
	animation: fuwafuwa 2s linear infinite;
	scale: 1;
  }
  
  @keyframes fuwafuwa{
   0%{transform:translateY(0)}
   50%{transform:translateY(-10px)}
   100%{transform:translateY(0)}
  }

/* キラッと光エフェクト */
.shiny {
    position: relative;
    display: flex; /* フレックスボックスを使う */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    overflow: hidden;
    border-radius: 10px; /* 必要に応じて削除可能 */
}

/* 光エフェクトのスタイリング */
.shiny::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -50%;
    width: 150%;
    height: 300%;
    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(45deg);
    animation: shiny-effect 2.5s ease-in-out infinite;
}

/* アニメーション定義 */
@keyframes shiny-effect {
    0% {
        top: -100%;
        left: -50%;
        transform: rotate(45deg);
    }
    50% {
        top: 50%;
        left: 150%;
    }
    100% {
        top: 200%;
        left: 250%;
    }
}
/* ゆらゆらアニメーション */
.yurayura {
	animation: yurayura 2s linear infinite;
	scale: 1;
  }
  
  @keyframes yurayura {
	0% {
	  transform: rotate(0deg);
	}
	25% {
	  transform: rotate(-2deg);
	}
	50% {
	  transform: rotate(0deg);
	}
	75% {
	  transform: rotate(2deg);
	}
	100% {
	  transform: rotate(0deg);
	}
  }
  





/*------------------------------------------------------------
アニメーションで表示※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;
}