html, body {
    margin       : 0;
    padding      : 0;
    font-family  : 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    background   : linear-gradient(to bottom, #dff6fa 0%, #ffffff 100%);
    color        : #1c1c1c;
	-webkit-overflow-scrolling: touch; /* iOSで慣性スクロール有効 */
  	touch-action: manipulation; /* スクロールやタップの反応を最適化 */    
 }

body {
	font-size    :1rem;
	line-height  :1.85;
	-webkit-font-smoothing  : antialiased;
	-moz-osx-font-smoothing : grayscale;
	-webkit-text-size-adjust: 100%; 
	word-wrap    : break-word;
}

/*==========================================
 ローディング画面
===========================================*/　



/*==========================================
 レイアウト
===========================================*/

/* ページ */
div.page {
	width          : 100%;
	margin         : 0 auto;
}

.sp-only {
    display        : none;
}


/* モバイル対応 */
@media screen and (max-width: 600px) {
  	.sp-only {
    	display: inline;
  	}
}

/*==========================================
 スクロールアップボタン
===========================================*/

.scrollTopButton img {
 	width           : 100%;
  	height          : 100%;
  	border-radius   : 50%;
  	box-shadow      : 0 4px 8px rgba(0,0,0,0.2);
}

#scrollTopButton {
  	position        : fixed;
  	display         : flex;
 /* bottom: 20px;
  right: 20px;*/
  	width           : 70px;
  	height          : 70px;
  	z-index         : 999;
  	cursor          : pointer;
  	border-radius   : 50%;
  	background-color: #fff8f8;
  	box-shadow      : 0 4px 12px rgba(0, 0, 0, 0.2);
  	justify-content : center;
  	align-items     : center;
  	transition      : transform 0.3s, opacity 0.3s;
  	opacity         : 0.9;
}
#scrollTopButton:hover {
  	transform       : scale(1.1);
  	opacity         : 1;
}

.scroll-icon {
  	width           : 60px;
  	height          : 60px;
  	object-fit      : contain;
  	overflow        : visible;
}

/*==========================================
 フォーム系
===========================================*/
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
input[type="password"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

input[type="radio"] {
  margin-right: 6px;
}

textarea {
  resize: vertical;
}

select {
  padding: 6px;
  margin: 6px 0 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  width: 60%;
}


/*画面遷移アニメーション*/
.splashbg1,
.splashbg2{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg1,
body.appear .splashbg2{
	display:block;
}

/*上に消えるエリア*/
body.appear .splashbg1{
	animation-name:PageAnime;
	animation-duration:1.4s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    bottom:50%;
	left:0;
    transform: scaleY(1);
    background-color:#97ebbc;
}

@keyframes PageAnime{
	0% {
		transform-origin:top;
		transform:scaleY(1);
	}

	100% {
		transform-origin:top;
		transform:scaleY(0);
	}
}

/*下に消えるエリア*/
body.appear .splashbg2{
    animation-name:PageAnime2;
	animation-duration:1.4s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    top: 50%;
	left:0;
    transform: scaleY(1);
    background-color:#97ebbc;
}

@keyframes PageAnime2{
	0% {
		transform-origin:bottom;
		transform:scaleY(1);
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}

/* アニメーション */
/* ふわっ（下から） */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* 波紋効果 */
.ripple-button {
  position: relative;
  overflow: hidden;
}
.ripple-button::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/*  iOS Safari のズーム抑制（ボタン押下などでの不意のズームを防止） */
input, select, button, textarea {
  font-size: 16px; /* iOSで勝手にズームされない最低値 */
}

/* Chrome / Android のカスタムスクロールバー */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(100, 100, 100, 0.3);
  border-radius: 4px;
}