@charset "utf-8";
/*================================================
 CSS Ver.1.00
=================================================*/

/*------------------------------------------------
	Setting
-------------------------------------------------*/

html {
	font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Arial,Verdana,sans-serif;
	font-feature-settings: "palt";
	width: 100%;
	font-size: 16px;
}

body {
	color: #333333;
	background-color: #E7E7E7;
}

img {
	vertical-align: bottom;
}

#wrapper {
	background-color: #FFFFFF;
	max-width: 960px;
	margin: 0 auto;
	box-shadow: 0px 0px 10px -5px #777777; /* 左右のドロップシャドウが必要なければ削除 */
}


/*------------------------------------------------
	BG
-------------------------------------------------*/

.bg_image01 {
	background-image: url("../image/cta_bg.webp"); /* 背景画像 */
	background-size: 100%;
}

.bg_color01{
	background-color: #fffee6; /* 背景色 */
}


/*------------------------------------------------
	Header
-------------------------------------------------*/

header {
	width: 100%;
}

header img {
  width: 100%;
  height: auto;
}

/*------------------------------------------------
	Section
-------------------------------------------------*/

section {
	width: 100%;
	text-align: center;
}

.box_btn {
	padding: 40px 5%; /* ボタンの幅はここで変更 */
}


/*------------------------------------------------
	Footer
-------------------------------------------------*/

footer {
	text-align: center;
	padding: 0.5em 0 15em 0;
	color: floralwhite;
	background-color: #2359a3;
}

@media screen and (max-width: 768px) {
footer {
	padding-bottom: 90px; /* スマホ下部ボタンの高さに合わせて変更 */
}
}

small {
	font-size: 0.7em;
}


/*------------------------------------------------
	Bottom Btn
-------------------------------------------------*/

.side_btn {
	width: 180px;
	position: fixed;
	bottom: 1.0em;
	right: 1.5em;
	z-index: 9999;
}

@media screen and (max-width: 640px) {
.side_btn {
	display: none
}
}

/* PCでは非表示（今まで通り） */
.smp_btn {
  display: none;
}

/* スマホ表示 */
@media screen and (max-width: 640px) {
  .smp_btn {
    max-width: 100%;
    padding: 5px;
    position: fixed;
    bottom: 0;
    left: 0;
    display: inline-block;
    z-index: 9999;

    /* ▼追加：最初は非表示 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    pointer-events: none; /* 隠れてる時に押せないように */
  }

  /* ▼追加：スクロール後に表示 */
  .smp_btn.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/*------------------------------------------------
	Video
-------------------------------------------------*/

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-container iframe {
  width: 100%;
  height: 100%;
}


/*------------------------------------------------
	Calender
-------------------------------------------------*/

.calender {
}

.calender iframe {
	display: block;
	width: 100%;
	height: 470px; /* カレンダーページの高さに合わせて変更 */
	border: none;
	overflow: hidden;
}

@media screen and (max-width: 768px) {
.calender iframe {	
	height: 400px; /* カレンダーページの高さに合わせて変更 */
}
}



/*------------------------------------------------
	Anime
-------------------------------------------------*/

/*-- パルス --*/
.pulse {
	display: block;
	width: 100%;
	height: auto;
	transform-origin: center;
	animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse{
0%,100% { transform: scale(1); }
50% { transform: scale(1.04); }
}

/*-- スクワッシュ --*/
.squash {
	display: block;
	width: 100%;
	height: auto;
	transform-origin: center;
	animation: squash 1.8s ease-in-out infinite;
}

@keyframes squash {
	0%,100% { transform: scaleX(1)   scaleY(1); }
	50% { transform: scaleX(1.06) scaleY(0.96); }
}

/*-- バウンド --*/
.bounce {
	display: block;
	width: 100%;
	height: auto;
	transform-origin: center;
	animation: bouncePulse 1.6s ease-in-out infinite;
}

@keyframes bouncePulse {
	0% { transform: scale(1); }
	30% { transform: scale(1.06); }
	45% { transform: scale(0.99); }
	60% { transform: scale(1.03); }
	100% { transform: scale(1); }
}

/*-- フロート --*/
.float {
	animation: floatY 4s ease-in-out infinite;
}

@keyframes floatY{
	0%,100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}

/*-- ティルト --*/
.tilt {
	animation: tilt 5s ease-in-out infinite;
	transform-origin: center;
}

@keyframes tilt {
	0%,100% { transform: rotate(-1.2deg); }
	50% { transform: rotate(1.2deg); }
}

.pulse, .squash, .bounce, .float, .tilt {
	will-change: transform;
	backface-visibility: hidden;
	-webkit-transform: translateZ(0);
}