@charset "UTF-8";
/* 共通 */
/*
ハンバーガーメニュー、アクセス文言追加_テキスト色設定
-----------------------------------------------*/
@media screen and (max-width:768px) {
	.sp_menu_wrap .sp_access_btn a { color: #55ADEA; }
	.sp_menu_wrap .sp_menu_btn div { color: #55ADEA; }
}

.akka { color: #ff0000 !important; }

/* Button_CSS */
#mosiko a {
	display: block;
	margin: 2em auto 4em auto;
	padding: 49px 0;
	font-size: 29px;

	box-shadow: 0px 10px 0px 0px #cb0051;
}
#mosiko a {
	width:55%;
	max-width: 820px;
	background-color: #ff418d;
	border-radius: 10px;
	text-align: center;
	color: #fff;
	font-weight: bolder;

	padding: 50px;
	/* text-align: center; */
	font-size: 26px;
	margin: 0 auto;
}
#mosiko a:hover {
	transition: background-color 0.1s;
	-webkit-transform: translate3d(0px, 5px, 0);
	transform: translate3d(0px, 5px, 0);
	box-shadow: 0px 5px 0px 0px #cb0051 !important;
}
/* Green */
#mosiko.bg_green {}
#mosiko.bg_green a {
box-shadow: 0px 10px 0px 0px #1f9005;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #01b701), color-stop(0, #249509));
background: -webkit-linear-gradient(top, #249509 0%, #01b701 100%);
background: -moz-linear-gradient(top, #249509 0%, #01b701 100%);
background: -ms-linear-gradient(top, #249509 0%, #01b701 100%);
background: linear-gradient(to bottom, #249509 0%, #01b701 100%);
}
#mosiko.bg_green a:hover {
	transition: background-color 0.1s;
	-webkit-transform: translate3d(0px, 5px, 0);
	transform: translate3d(0px, 5px, 0);
	box-shadow: 0px 5px 0px 0px #1f9005 !important;
}

/*Orange*/
#mosiko.bg_orange a {
  box-shadow: 0px 10px 0px 0px #de501f;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #ff8330), color-stop(0, #e65a2b));
  background: -webkit-linear-gradient(top, #e65a2b 0%, #ff8330 100%);
  background: -moz-linear-gradient(top, #e65a2b 0%, #ff8330 100%);
  background: -ms-linear-gradient(top, #e65a2b 0%, #ff8330 100%);
  background: linear-gradient(to bottom, #e65a2b 0%, #ff8330 100%);
}
#mosiko.bg_orange a:hover {
	box-shadow: 0px 5px 0px 0px #de501f !important;
}

/*Blue*/
#mosiko.bg_blue a {
  box-shadow: 0px 10px 0px 0px #035a8c;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #0ec3ff), color-stop(0, #0a86e6));
  background: -webkit-linear-gradient(top, #0a86e6 0%, #0ec3ff 100%);
  background: -moz-linear-gradient(top, #0a86e6 0%, #0ec3ff 100%);
  background: -ms-linear-gradient(top, #0a86e6 0%, #0ec3ff 100%);
  background: linear-gradient(to bottom, #0a86e6 0%, #0ec3ff 100%);
}
#mosiko.bg_blue a:hover {
	box-shadow: 0px 5px 0px 0px #035a8c !important;
}

@media screen and (max-width:768px) {
	#mosiko a {
		padding: 25px 0;
		font-size: 19px;
		width: 90%;
	}
}

/*
申し込み id_2
----------------------------------*/
#mosiko2 a {
	display: block;
	margin: 2em auto 4em auto;
	padding: 49px 0;
	font-size: 29px;

	box-shadow: 0px 10px 0px 0px #cb0051;
}
#mosiko2 a {
	width:55%;
	max-width: 820px;
	background-color: #ff418d;
	border-radius: 10px;
	text-align: center;
	color: #fff;
	font-weight: bolder;

	padding: 50px;
	/* text-align: center; */
	font-size: 26px;
	margin: 0 auto;
}
#mosiko2 a:hover {
	transition: background-color 0.1s;
	-webkit-transform: translate3d(0px, 5px, 0);
	transform: translate3d(0px, 5px, 0);
	box-shadow: 0px 5px 0px 0px #cb0051 !important;
}
/* Green */
#mosiko2.bg_green {}
#mosiko2.bg_green a {
box-shadow: 0px 10px 0px 0px #1f9005;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #01b701), color-stop(0, #249509));
background: -webkit-linear-gradient(top, #249509 0%, #01b701 100%);
background: -moz-linear-gradient(top, #249509 0%, #01b701 100%);
background: -ms-linear-gradient(top, #249509 0%, #01b701 100%);
background: linear-gradient(to bottom, #249509 0%, #01b701 100%);
}
#mosiko2.bg_green a:hover {
	transition: background-color 0.1s;
	-webkit-transform: translate3d(0px, 5px, 0);
	transform: translate3d(0px, 5px, 0);
	box-shadow: 0px 5px 0px 0px #1f9005 !important;
}

/*Orange*/
#mosiko2.bg_orange a {
  box-shadow: 0px 10px 0px 0px #de501f;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #ff8330), color-stop(0, #e65a2b));
  background: -webkit-linear-gradient(top, #e65a2b 0%, #ff8330 100%);
  background: -moz-linear-gradient(top, #e65a2b 0%, #ff8330 100%);
  background: -ms-linear-gradient(top, #e65a2b 0%, #ff8330 100%);
  background: linear-gradient(to bottom, #e65a2b 0%, #ff8330 100%);
}
#mosiko2.bg_orange a:hover {
	box-shadow: 0px 5px 0px 0px #de501f !important;
}

/*Blue*/
#mosiko2.bg_blue a {
  box-shadow: 0px 10px 0px 0px #035a8c;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #0ec3ff), color-stop(0, #0a86e6));
  background: -webkit-linear-gradient(top, #0a86e6 0%, #0ec3ff 100%);
  background: -moz-linear-gradient(top, #0a86e6 0%, #0ec3ff 100%);
  background: -ms-linear-gradient(top, #0a86e6 0%, #0ec3ff 100%);
  background: linear-gradient(to bottom, #0a86e6 0%, #0ec3ff 100%);
}
#mosiko2.bg_blue a:hover {
	box-shadow: 0px 5px 0px 0px #035a8c !important;
}

@media screen and (max-width:768px) {
	#mosiko2 a {
		padding: 25px 0;
		font-size: 19px;
		width: 90%;
	}
}

/*
ani
----------------------------------*/
.ani {
	transition: 1s all;
	opacity: 0;
	position: relative;
	top: 300px;
}
.ani.move {
	animation: up3 1s;
	animation-fill-mode: forwards;
	opacity: 1;
	top: 0;
}
.ani2 {
	top: 0;
}
.ani2.move {
	animation: fade 2s;
	animation-fill-mode: forwards;
}

@keyframes up {
	0% {
		opacity: 0;
		transform: translateY(0);
	}
	100% {
		opacity: 1;
		transform: translateY(30%);
	}
}
@keyframes up2 {
	80% {
		opacity: 0;
		transform: translateY(0) rotate(10deg);
	}
	100% {
		opacity: 1;
		transform: translateY(100%) rotate(-8deg);
	}
}

@keyframes up3 {
	0% {
		opacity: 0;
		transform: translateY(20%);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
/*
@keyframes poyoyon2 {
	0% {
		transform: scale(0.5, 0.5) translate(0, 0);
	}
	15% {
		transform: scale(0.98, 0.9) translate(0, 5px);
	}
	30% {
		transform: scale(1.02, 1.0) translate(0, 8px);
	}
	50% {
		transform: scale(0.98, 1.05) translate(0, -8px);
	}
	70% {
		transform: scale(1.0, 0.9) translate(0, 5px);
	}
	100% {
		transform: scale(1.0, 1.0) translate(0, 0);
	}
	0%, 100% {
		opacity: 1;
	}
}
*/
@keyframes fade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/*
共通 / End
------------------------------------------------*/
/*260318 floating banner*/
/* PC・基本サイズ */
.floating-banner {
  position: fixed !important;
  z-index: 2147483647; /* 最大値 */
  bottom: 20px;
  right: 20px;
  width: 180px;

  pointer-events: auto;

  /* 念のためレイヤー最前面に引き上げ */
  transform: translateZ(0);

  /* ふわっと表示（任意） */
  transition: opacity 0.3s ease;
}

.floating-banner:hover {
  opacity: 0.85;
}

/* スマホ用の設定 (画面幅が768px以下の時) */
@media screen and (max-width: 768px) {
    .floating-banner {
        width: 120px;
        bottom: 70px;
        right: 10px;
    }

    .close-btn {
        width: 28px;
        height: 28px;
        top: -10px;
        right: -10px;
        font-size: 18px;
    }
    
    /* スマホでは震えないようにする（操作性の低下防止） */
    .floating-banner img:hover {
        animation: none;
    }
}

/* バナー画像 */
.floating-banner img {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
    /* 影をつけて背景と切り離す */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
}

/* 閉じるボタン */
.close-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 24px;
    height: 24px;
    background-color: #000;
    color: #fff;
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    z-index: 10000;
    text-shadow: none;
}

/* 閉じるボタンのホバー時は震えさせない */
.close-btn:hover {
    animation: none !important;
}

.is-hidden {
    display: none;
}

/