@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/bg_01.webp"); /* 背景画像 */
	background-size: 100%;
}

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


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

header {
	width: 100%;
}


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

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

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


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

footer {
	text-align: center;
	padding: 1.0em 0;
	background-color: #FFFFFF;
}

@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
}
}

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


/*------------------------------------------------
	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);
}