@charset "utf-8";

*,
*::before,
*::after {
	box-sizing: border-box;
}
@media screen and (min-width: 768px){
	a[href^=”tel:”] {
	pointer-events: none;
	cursor: default;
	}
}
/*========================================
	root
==========================================*/
:root {
	--color-main: #64c8ff;
	--color-accent: #0073be;
	--color-text: #000;
	--color-bg: #fff;

	--font-base: "M PLUS 1", sans-serif;

	--content-width: 1440px;
	
	--font-poppins: "Poppins";
	--font-Oswald: "Oswald";
	
}
/*========================================
	focus
==========================================*/
:focus-visible {
	outline: 2px solid var(--color-main);
	outline-offset: 2px;
}
/*========================================
	reset
==========================================*/
html {
	scroll-behavior: smooth;
	margin: 0;
	padding: 0;
}
body {
	color: var(--color-text);
	font-family: var(--font-base);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.8;
	letter-spacing: 0.05em;
	background: var(--color-bg);
	
	margin: 0;
	padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-weight: normal;
	line-height: 1.4;
}
p {
	line-height: inherit;
}
ul,
ol,
dl,
dt,
dd {
	margin: 0;
	padding: 0;
	list-style: none;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
picture {
	display: block;
}
a {
	color: inherit;
	text-decoration: none;
}
button {
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}
/*=======================================
	font
=======================================*/
.font-poppins{
	font-family: var(--font-poppins);
}
/*=======================================
	PC none / SP none
=======================================*/
@media screen and (min-width:481px) {
.pc_none_s{ display: none !important; }
}
@media screen and (min-width:769px) {
.pc_none{ display: none !important; }
}
@media screen and (max-width:768px) {
.sp_none{ display: none !important; }
}
@media screen and (max-width:480px) {
.sp_none_s{ display: none !important; }
}
@media screen and (max-width:1199px) {
.sp_tb_none{ display: none !important; }
}

/*=======================================
	utility
=======================================*/
.u-indent { padding-left: 1em;text-indent: -1em; }/*1文字分*/

.u-mark-FFFF99-a a {
	text-decoration: none;
}
.u-mark-FFFF99-a a:hover {
	background:-moz-linear-gradient(transparent 50%, #ffff99 0);
	background:-webkit-linear-gradient(transparent 50%, #ffff99 0);
	background:-ms-linear-gradient(transparent 50%, #ffff99 0);
	background:-o-linear-gradient(transparent 50%, #ffff99 0);
	background:linear-gradient(transparent 50%, #ffff99 0);
}
.u-title-fff-000 {
	color: #fff;
	text-shadow:
		 1px 0 #000,
		-1px 0 #000,
		 0 1px #000,
		 0 -1px #000,
		 1px 1px #000,
		-1px -1px #000,
		 1px -1px #000,
		-1px 1px #000;
}
.u-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.u-font-size-large {
	font-size: 3.5rem;
}
	@media (min-width : 769px) {
	.u-font-size-large {
		font-size: 5rem;
	}
	}
	@media (min-width : 1200px) {
	.u-font-size-large {
		font-size: 7rem;
	}
	}
.u-font-size-middle {
	font-size: 2.5rem;
}
	@media (min-width : 769px) {
	.u-font-size-middle {
		font-size: 3rem;
	}
	}
	@media (min-width : 1200px) {
	.u-font-size-middle {
		font-size: 4.5rem;
	}
	}
/***　font color　***/
.u-color-e1f9ff {
	color: #e1f9ff;
}
.u-color-0f9beb-b {
	color: #0f9beb;
	font-weight: 850;
}
.u-color-64c8ff {
	color: #64c8ff;
}
/***　text align　***/
.u-text-center {
	text-align: center
}
/***　layout　***/
.u-center {
	align-items: center;
	vertical-align: middle;
}
.u-indent {
	margin: 0;
	text-indent: -1rem;
	padding-left: 1rem;
}
.u-banner:hover {
	opacity: .5;
	transition: .3s;
}
/***　画像の拡大　***/
.u-zoomIn img {
	transform: scale(1);
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}
.u-zoomIn a:hover img {/*hoverした時の変化*/
	transform: scale(1.05);/*拡大の値を変更したい場合はこの数値を変更*/
}
/*　画像のマスク　*/
.u-mask {
	display: block;
	line-height: 0;/*行の高さを0にする*/
	overflow: hidden;/*拡大してはみ出る要素を隠す*/
	border-radius: 10px;
}
/*　横幅　*/
.u-zoomIn {
	width:70%;
	margin: 0 auto;/*中央揃え*/
}
.u-shake-up {
	animation: shake-up 3s infinite ease-in-out;
}
@keyframes shake-up {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(15px);
	}
}
/***　拡大zoom　***/
.zoomTrigger{
	opacity: 0;
}
.zoomAnimation{
	animation-name:zoomAnimation;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	opacity: 1;
}
@keyframes zoomAnimation{
	from {
		opacity: 0;
		transform: scale(0.6);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}