@charset "utf-8";
article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section{display:block}a,hr{padding:0}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}ins,mark{background-color:#ff9;color:#000}body{line-height:1}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;font-size:100%;vertical-align:baseline;background:0 0}ins{text-decoration:none}mark{font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}

input,
button,
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
border: none;
border-radius: 0;
font: inherit;
outline: none;
}

.BIZ_UDMinchoB {
font-weight: 700;
font-family: 'BIZ UDMincho', serif;
}
.Noto_Sans_JPB {
font-weight: 700;
font-family: 'Noto Sans JP', sans-serif;
}
.Noto_Sans_JPM {
font-weight: 500;
font-family: 'Noto Sans JP', sans-serif;
}

:root {
--color-main: #2ed3f9;
--color-sub1: #fb7675;
--color-sub2: #ffe85b;
--color-sub3: #82e5fb;
--space-mini: 4px;
--space-inline: 8px;
--space-block: 16px;
--radius-inline: 3px;
--radius-block: 10px;
--radius-circle: 9999px;
--time-hover: 0.3s;
}


@keyframes fish {
0% {transform:translate(0,-50%);}
50% {transform:translate(20%,-50%);}
100% {transform:translate(0,-50%);}
}
@keyframes fish2 {
0% {transform:translate(0,0);}
50% {transform:translate(20%,0);}
100% {transform:translate(0,0);}
}
@keyframes fish_back {
0% {transform:translate(0,-50%) rotate(-180deg);}
50% {transform:translate(20%,-50%) rotate(-180deg);}
100% {transform:translate(0,-50%) rotate(-180deg);}
}
@keyframes head {
0% {opacity: 0;transform: scale(0.5);}
80% {transform: scale(1.1);}
100% {opacity: 1;transform: translateX(1);}
}
@keyframes img_left {
0% {opacity: 0;transform: translateX(-20%);}
100% {opacity: 1;transform: translateX(0%);}
}
@keyframes img_right {
0% {opacity: 0;transform: translateX(20%);}
100% {opacity: 1;transform: translateX(0%);}
}
@keyframes img_bottom {
0% {opacity: 0;transform: translateY(20%);}
100% {opacity: 1;transform: translateY(0%);}
}
@keyframes img_top {
0% {opacity: 0;transform: translateY(-20%);}
100% {opacity: 1;transform: translateY(0%);}
}
@keyframes sct_bottom_sp {
0% {opacity: 0;transform: translateY(50px);}
100% {opacity: 1;transform: translateY(0%);}
}
@keyframes sct_bottom_pc {
0% {opacity: 0;transform: translateY(100px);}
100% {opacity: 1;transform: translateY(0%);}
}
@keyframes sct_bottom_sp2 {
0% {opacity: 1;transform: translateY(50px);}
100% {opacity: 1;transform: translateY(0%);}
}
@keyframes sct_bottom_pc2 {
0% {opacity: 1;transform: translateY(100px);}
100% {opacity: 1;transform: translateY(0%);}
}

/* COMMON */
#page_top {
display: none;
}
body {
position: relative;
background-color: var(--color-main);
font-feature-settings: "palt";
-webkit-font-feature-settings: "palt";
font-weight: 500;
font-family: 'Noto Sans JP', sans-serif;
margin: 0;
padding: 0;
font-size: 14px;
line-height: 2;
color: #000;
letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
	body {
	min-width: 1200px !important;
	font-size: 16px;
	}
}

a:link,
a:active,
a:visited { 
color: #222;
text-decoration: underline;
text-underline-offset: 3px;
}
a:hover { 
color: #222;
text-decoration: none;
}

ul,
ol {
list-style: none;
}

.sp {display: inherit;}
.pc {display: none;}
@media screen and (min-width: 768px) {
	.sp {display: none;}
	.pc {display: inherit;}
}

#container {
overflow: hidden;
}

/* PAGETOP */
@media screen and (max-width: 767px) {
	#pageTop {
	height: 0;
	}
	#header {
	transform: translateX(-50%);
	z-index: 10;
	position: fixed;
	left: 50%;
	top: 15px;
	background-color: #fff;
	border-radius: 9999px;
	width: calc(100% - 20px);
	height: 40px;
	}
	#header .logo {
	position: absolute;
	left: 22px;
	top: 8px;
	}
	#header .logo img {
	width: 66px;
	height: auto;
	}
	#header .trigger {
	position: absolute;
	right: 17px;
	top: 0;
	width: 40px;
	height: 40px;
	cursor: pointer;
	}
	#header .trigger::before {
	content: 'MENU';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	font-weight: 700;
	font-family: 'BIZ UDMincho', serif;
	font-size: 10px;
	text-align: center;
	}
	#header .trigger.active::before {
	content: 'CLOSE';
	}
	#header .trigger span {
	transition: all var(--time-hover) ease;
	display: inline-block;
	box-sizing: border-box;
	position: absolute;
	background-color: #000;
	left: 11px;
	width: 18px;
	height: 2px;
	}
	#header .trigger span:nth-of-type(1) {
	top: 9px;
	}
	#header .trigger span:nth-of-type(2) {
	top: 14px;
	}
	#header .trigger span:nth-of-type(3) {
	top: 19px;
	}
	#header .trigger.active span:nth-of-type(1) {
	transform: translateY(5px) rotate(-30deg);
	}
	#header .trigger.active span:nth-of-type(2) {
	opacity: 0;
	}
	#header .trigger.active span:nth-of-type(3) {
	transform: translateY(-5px) rotate(30deg);
	}
	#header .global ul {
	transform: translateX(-50%);
	display: none;
	position: fixed;
	top: 60px;
	left: 50%;
	padding: 0 20px;
	width: 275px;
	background-color: #fff;
	border-radius: var(--radius-block);
	}
	#header .global li {
	border-bottom: solid 1px #2ed3f9;
	font-weight: 700;
	font-size: 14px;
	line-height: 48px;
	text-align: center;
	}
	#header .global li:last-child {
	border-bottom: none;
	}
	#header .global li a {
	text-decoration: none;
	}
}
@media screen and (min-width: 768px) {
	#pageTop {
	height: 0;
	}
	#header {
	transform: translateX(-50%);
	z-index: 10;
	position: fixed;
	right: auto;
	left: 50%;
	top: 20px;
	background-color: #fff;
	border-radius: 9999px;
	width: 1080px;
	height: 60px;
	}
	#header .logo {
	position: absolute;
	left: 74px;
	top: 13px;
	}
	#header .logo img {
	width: 99px;
	height: auto;
	}
	#header .global ul {
	display: flex;
	flex-wrap: wrap;
	position: absolute;
	right: 50px;
	top: 0;
	}
	#header .global li {
	width: 122px;
	font-weight: 700;
	font-size: 14px;
	text-align: center;
	line-height: 60px;
	}
	#header .global li:first-child {
	width: 192px;
	}
	#header .global li a {
	text-decoration: none;
	}
}

/* PAGEBODY */
.backLink {
position: relative;
box-sizing: border-box;
margin: 50px auto 0 auto;
background-color: #fff;
border-radius: 9999px;
width: 272px;
height: 68px;
overflow: hidden;
}
.backLink a {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
height: 68px;
font-weight: 700;
font-family: 'BIZ UDMincho', serif;
font-size: 15px;
line-height: 1;
letter-spacing: 0.05em;
color: var(--color-base);
cursor: pointer;
text-decoration: none;
}
.backLink a::after {
transform: translateY(-50%) rotate(-180deg);
content: '';
display: block;
background: url("../img/arw_fish.svg") no-repeat center center;
background-size: 25px auto;
position: absolute;
left: 25px;
top: 50%;
width: 25px;
height: 25px;
}
.backLink a:hover::after {
animation: fish_back 0.7s linear infinite;
}
@media (min-width: 768px) {
	.backLink {
	margin: 60px auto 0 auto;
	width: 320px;
	height: 80px;
	}
	.backLink a {
	transition: all 0.5s ease;
	background-color: rgba(255,255,255,1);
	font-size: 18px;
	height: 80px;
	}
	.backLink a::after {
	background-size: 29px auto;
	left: 30px;
	width: 29px;
	height: 29px;
	}
	.backLink a:hover {
	background-color: rgba(255,255,255,0);
	}
}

/* PAGEBOTTOM */
#pageBottom {
background-color: #c0f2fd;
}
#footer {
padding: 40px 0 15px 0;
}
#footer .logo {
margin: 0 0 25px 0;
}
#footer .logo img {
display: block;
margin: 0 auto;
width: 170px;
height: auto;
}
#footer .global {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 38px;
margin-bottom: 20px;
font-weight: 700;
font-size: 14px;
}
#footer .global li {
margin-bottom: 4px;
}
#footer .global li:last-child {
margin-bottom: 0;
}
#footer .global .sns {
display: flex;
flex-wrap: wrap;
gap: 0 8px;
}
#footer .global .sns img {
width: 24px;
height: 24px;
}
#footer .global a {
position: relative;
display: inline-block;
padding: 0 40px 4px 0;
text-decoration: none;
}
#footer .global li:not(.sns) a::after {
content: '';
transform: translateY(-50%);
display: block;
position: absolute;
right: 0;
top: 50%;
background: url("../img/arw_fish.svg") no-repeat center right;
background-size: contain;
width: 30px;
height: 30px;
}
#footer .global .sns a {
display: block;
background: none;
padding: 0;
width: 24px;
height: 24px;
overflow: hidden;
}
#footer .contact {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 30px;
margin-bottom: 48px;
}
#footer .contact h4 {
font-weight: 700;
font-size: 14px;
}
#footer .contact .tel {
padding-top: 3px;
}
#footer .contact .number {
font-weight: 700;
font-family: 'BIZ UDMincho', serif;
font-size: 24px;
line-height: 1.3;
letter-spacing: 0.15em;
}
#footer .contact .note {
font-size: 13px;
}
#footer .copyright {
font-weight: 400;
font-size: 10px;
text-align: center;
}
@media screen and (min-width: 768px) {
	#footer {
	padding: 80px 0 20px 0;
	}
	#footer .cont {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 64px;
	margin-bottom: 90px;
	}
	#footer .logo img {
	width: 200px;
	}
	#footer .global {
	gap: 0 48px;
	padding-top: 28px;
	margin-bottom: 0;
	}
	#footer .global li {
	margin-bottom: 4px;
	}
	#footer .global li:last-child {
	margin-bottom: 0;
	}
	#footer .global .sns {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	}
	#footer .global .sns img {
	width: 24px;
	height: auto;
	}
	#footer .global a:hover::after {
	animation: fish 0.7s linear infinite;
	}
	#footer .global .sns a {
	background: none;
	padding: 0;
	}
	#footer .contact {
	display: block;
	padding-top: 28px;
	margin-bottom: 0;
	}
	#footer .contact h4 {
	margin-bottom: 3px;
	font-weight: 700;
	font-size: 14px;
	}
	#footer .contact .tel {
	padding-top: 3px;
	}
	#footer .contact .number {
	margin-bottom: -3px;
	font-size: 32px;
	}
	#footer .copyright {
	font-weight: 400;
	font-size: 10px;
	text-align: center;
	}
}