@charset "utf-8";

@import "./Reboot.css";

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');


/* basic */
html, body {
	padding: 0;
	margin: 0;
	overflow-x: hidden;
}

body {
	font-family: "Zen Maru Gothic", sans-serif; font-weight: 400;
	background-color: #fbf0d5;
	color: #111;
}

.inner { position: relative; }

.head {
	position: relative;
	z-index: 1000;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1;
	margin: 0;
}

h2 { font-weight: 600; }

h3, h4, h5, h6 { font-weight: 500; }

p { line-height: 1.725; margin: 0; }

em, i { font-style: normal; }

dl, dd { margin-bottom: 0; }

img {
	width: 100%;
	height: auto;
	display: block;
}


/* color */
.bg-orange { background-color: #ff5a00; }

.bg-denim { background-color: #293855; }

.txt-orange, p > strong { color: #ff5a00; }

.txt-denim { color: #293855; }


/* font */
.ann {
	font-size: .5rem;
	position: relative;
	top: -.725em;
}

.note {
	font-size: .725rem;
	color: #666;
}

.font-lato { font-family: "Lato", sans-serif; }

.font-kakugo { font-family: "Hiragino Kaku Gothic Pro", "MS PGothic", sans-serif; }

.writing-vertical {
	writing-mode: vertical-rl;
	text-orientation: mixed;
}


/* plan */
.icon_plan-light { background-color: #70c7c1; }

.icon_plan-standard { background-color: #003e8d; }

.icon_plan-premium { background-color: #ec740f; }

.plan-box_light h3 { background-color: #70c7c1; }

.plan-box_light .plan-index_item_block { background-color: #f2f7f6; }

.plan-box_light .plan-index_item_fee,
.plan-box_light .plan-index_item_usage_corres span { color: #70c7c1;  }
.plan-box_light .plan-index_item_usage_corres span { -webkit-text-stroke: 3px #70c7c1; }

.plan-box_standard h3 { background-color: #003e8d; }

.plan-box_standard .plan-index_item_block { background-color: #eaecf2; }

.plan-box_standard .plan-index_item_fee,
.plan-box_standard .plan-index_item_usage_corres span { color: #003e8d; }
.plan-box_standard .plan-index_item_usage_corres span { -webkit-text-stroke: 3px #003e8d; }

.plan-box_premium h3 { background-color: #ec740f; }

.plan-box_premium .plan-index_item_block { background-color: #fdf9ee; }

.plan-box_premium .plan-index_item_fee,
.plan-box_premium .plan-index_item_usage_corres span { color: #ec740f; }
.plan-box_premium .plan-index_item_usage_corres span { -webkit-text-stroke: 3px #ec740f; }


/* gmap */
.gmap {
	width: 100%;
	padding: 0;
	margin: 0;
	display: block;
}


/* following-bn */
.following-bn {
	background-color: #ff5a00;
	border-radius: 10px;
	z-index: 100;
}

.following-bn a {
	color: #fff;
	font-weight: 500;
	display: block;
	position: relative;
}

.following-bn a:hover { text-decoration: none; }

.following-bn.is-show { transform: translateX(0); }


/* fadein */
.fadein {
	opacity: 0;
	transition: opacity 1.3s ease;
}

.fadein.is-show { opacity: 1; }

/* slidein */
.slidein-right {
	opacity: 0;
	transform: translateX(100px);
	transition: opacity .6s ease, transform .6s ease;
}

.slidein-right.is-show {
	opacity: 1;
	transform: translateX(0);
}

/* shake */
.shake {
	transform-origin: center bottom;
	animation: shake 1.6s ease-in-out infinite;
}

@keyframes shake {
	0%, 68%, 100% { transform: rotate(0deg); }
	72% { transform: rotate(2deg); }
	78% { transform: rotate(-2deg); }
	84% { transform: rotate(1.5deg); }
	90% { transform: rotate(-1.5deg); }
	94% { transform: rotate(0deg); }
}

/* swaying */
.swaying {
	animation: swaying 1.2s ease-in-out infinite alternate;
	transform-origin: center center;
}

@keyframes swaying {
	0% { transform: translateX(-10px) rotate(-3deg); }
	100% { transform: translateX(10px) rotate(3deg); }
}

.pop { animation: pop 2s ease-in-out infinite; }

@keyframes pop {
	0%, 100% { transform: translateY(0); }
	10% { transform: translateY(-6px); }
	20% { transform: translateY(0); }
	30% { transform: translateY(-3px); }
	40% { transform: translateY(0); }
}



/* =================================
   KV floating animation
================================= */

.kv_image figure {
	margin: 0;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.kv_image_photo_1 { animation: kv-float-photo1 3.2s ease-in-out infinite alternate; }

.kv_image_photo_2 { animation: kv-float-photo2 3.6s ease-in-out infinite alternate; }

.kv_image_photo_3 { animation: kv-float-photo3 3.4s ease-in-out infinite alternate; }

.kv_image_photo_s1 { animation: kv-float-small1 2.8s ease-in-out infinite alternate; }

.kv_image_photo_s2 { animation: kv-float-small2 3s ease-in-out infinite alternate; }

.kv_image_ball_1 { animation: kv-float-ball1 2.4s ease-in-out infinite alternate; }

.kv_image_ball_2 { animation: kv-float-ball2 2.7s ease-in-out infinite alternate; }

.kv_image_ball_3 { animation: kv-float-ball3 2.5s ease-in-out infinite alternate; }

.kv_image_ball_4 { animation: kv-float-ball4 2.8s ease-in-out infinite alternate; }


/* Animation */

@keyframes kv-float-photo1 {
	0% { transform: translate(0, 0) rotate(0deg); }
	100% { transform: translate(16px, -28px) rotate(1deg); }
}

@keyframes kv-float-photo2 {
	0% { transform: translate(0, 0) rotate(0deg); }
	100% { transform: translate(-18px, -23px) rotate(-1.3deg); }
}

@keyframes kv-float-photo3 {
	0% { transform: translate(0, 0) rotate(0deg); }
	100% { transform: translate(18px, -30px) rotate(1.2deg); }
}

@keyframes kv-float-small1 {
	0% { transform: translate(0, 0) rotate(0deg); }
	100% { transform: translate(-18px, -26px) rotate(-2deg); }
}

@keyframes kv-float-small2 {
	0% { transform: translate(0, 0) rotate(0deg); }
	100% { transform: translate(16px, -24px) rotate(2deg); }
}

@keyframes kv-float-ball1 {
	0% { transform: translate(0, 0) rotate(0deg); }
	100% { transform: translate(22px, -35px) rotate(18deg); }
}

@keyframes kv-float-ball2 {
	0% { transform: translate(0, 0) rotate(0deg); }
	100% { transform: translate(-20px, -32px) rotate(-20deg); }
}

@keyframes kv-float-ball3 {
	0% { transform: translate(0, 0) rotate(0deg); }
	100% { transform: translate(18px, -34px) rotate(16deg); }
}

@keyframes kv-float-ball4 {
	0% { transform: translate(0, 0) rotate(0deg); }
	100% { transform: translate(-22px, -30px) rotate(-18deg); }
}

.kv_catch-copy { opacity: 0; }

.kv_catch-copy.is-show { animation: kv-catch-pop .3s cubic-bezier(.2, 1.2, .4, 1) both; }

@keyframes kv-catch-pop {
	0% { opacity: 0; transform: translateX(-50%) scale(.7); }
	60% { opacity: 1; transform: translateX(-50%) scale(1.05); }
	100% { opacity: 1; transform: translateX(-50%) scale(1); }
}



/* --- loading --- */
.loading {
	width: 100%;
	height: 100vh;
	background-color: #fff;
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	visibility: visible;
	transition: opacity .6s ease, visibility .6s ease;
}

.loading.is-loaded {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.loading_content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #293855;
}

.loading_content figure {
	width: 180px;
	margin: 0;
}

.loading_content p {
	font-size: 16px;
	font-weight: 500;
	margin: 1rem 0 0;
}