@charset "UTF-8";

/* -------------------------------
スタイルの初期化 */
html {
	font-size: 62.5%;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

body{
	font-family: 'Zen Maru Gothic','Noto Sans JP','メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.65;
	letter-spacing: .025em;
	text-autospace:ideograph-alpha;
	background:#fff;
	position: relative;
	color: var(--black);
	overflow-x:unset;
}
body *{
	box-sizing: border-box;
}
a{
	text-decoration:none;
	color: var(--black);
	display: block
}
/*ボタンデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"],button {
	border-radius: 0;
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	border: none;
	box-sizing: border-box;
	cursor: pointer;
	font-family: 'Zen Maru Gothic',sans-serif;
	background: var(--sub_blue);
	color: #fff;
	width: 100%;
	font-weight: bold;
}
a img {
	border:0;
	outline:none;
}
img,svg {	vertical-align:top;}
img{
	max-width: 100%;
	height: auto;
}
ul, ol {	list-style-type:none;}
sup {
	position: relative;
	vertical-align: baseline;
	top: -0.9em;
	font-size: 0.5em;
}
hr {	display: none;}
h1,h2,h3,h4,h5,h6 {	font-size: 100%;}
th, caption{
	text-align: left;
	font-weight: normal;
}
th,td {	empty-cells:show;}
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea{
	-webkit-appearance: none;
	appearance: none;
	border-radius: 5px;
	padding: 12px 10px;
	border: 1px solid #ceccca;
	width: 80%;
	box-sizing: border-box;
	font-size: 15px;
}
input[type="submit"] {
	display:inline;
	margin:0;
}
input[type="checkbox"] {
	margin-right:0.2em;
	vertical-align: -2px;
}
input[type="radio"] {
	margin-right:0.2em;
	vertical-align: -2px;
}
textarea {	padding:2px;
font-family: "Zen Maru Gothic", sans-serif;}
select{	padding:2px 3px 5px;}
optgroup {	font-style:normal;}
option {	padding-right:10px;}
*:focus {outline: none;}
.hproduct{	display:none;}
.cf:before,
.cf:after{
	display: table;
	content: " ";
}
.cf:after{	clear: both;}
area{
	border:none;
	outline:none;
}
em{	font-style: normal;}


/* 共通 */
:root{
	--black:#222222;
	--main_blue:#2ea7e0;
	--sub_blue:#004f94;
	--orange:#f39700;
	--bg_blue: #d7effb;
	--bg_yellow: #fff6d8;
}
.image img{
	width: 100%;
	height: 100%;
}
.textarea{
	text-align: justify;
}

@media screen and (min-width:768px) {
	body{min-width:1200px;}
	a{transition: all 0.3s ease 0s;}
	.pc{display: block;}
	.sp,.sp-nav{display: none;}
	a[href*="tel:"] {
		pointer-events: none;
		cursor: default;
	}
	.flex-box {
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.btn a{
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		border-radius: 8px;
		position: relative;
		width: 280px;
		height: 50px;
		font-size: 16px;
	}
	.tel a{
		position: relative;
		display: flex;
		align-items: center;
		font-weight: bold;
		line-height: 1;
	}
	.tel a::before{
		content: "";
		width: 20px;
		height: 30px;
		background: url(/img/icon_tel_w.png) no-repeat;
		background-size: contain;
		margin-right: 10px;
		margin-top: 4px;
	}
	.btn a:hover{
		opacity: .8;
		transform: translateY(4px);
	}
}
@media screen and (max-width:767px) {
	body{font-size: 3.73vw;}
	.pc{display: none;}
	.sp{display: block;}

	.btn a,.tel a{
		display: flex;
		align-items: center;
		font-weight: bold;
		position: relative;
	}
	.btn a{
		width: 100%;
		justify-content: center;
		height: 13.33vw;
		font-size: 4.27vw;
		border-radius: 8px;
	}
	.tel a{
		font-size: 6.93vw;
		line-height: 1;
	}
	.tel a::before{
		content: "";
		width: 4vw;
		height: 5.87vw;
		background: url(/img/icon_tel_o.png) no-repeat;
		background-size: contain;
		margin-right: 2.13vw;
		margin-top: 0.8vw;
	}
}

/*------------------------
ヘッダー
------------------------*/
header .inner{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	z-index: 200;
	position: relative;
}
header .logo-wrap .sub{
	color: #fff;
	font-weight: bold;
	line-height: 1;
}
/* PC */
@media screen and (min-width:768px) {
	.top-bg{
		background: var(--main_blue) url(/img/fv_bg_hoshi_pc.png) bottom center no-repeat;
		background-size: cover;
	}
	header .inner{
		padding: 0px 0 0 60px;
	}
	header .logo-wrap,header .menu-ul{
		padding-top: 15px;
	}
	header .logo-wrap .sub{
		font-size: 16px;
		margin-bottom: 10px;
	}
	header .logo-wrap .image{
		width: 292px;
	}
	header .menu-inner {
		display: flex;
	}
	header .menu-ul {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	header .menu-ul .tel {
		margin-bottom: 20px;
	}
	header .menu-ul .tel a {
		font-size: 28px;
		color: #fff;
	}
	header .menu-ul .tel a::before{
		width: 16px;
		height: 24px;
	}
	header .menu-ul .nav-inner {
		display: flex;
	}
	header .menu-ul .nav-inner li a {
		font-size: 16px;
		margin-right: 30px;
		font-weight: bold;
		color: #fff;
		letter-spacing: 0.05em;
		padding-bottom: 10px;
		position: relative;
	}
	header .menu-ul .nav-inner li a::after{
		content: "";
		width: 0;
		height: 3px;
		background: #fdd23e;
		position: absolute;
		left: 0;
		bottom: 0;
		transform: scaleX(0);   
		transform-origin: center; 
		transition: transform 0.3s ease;
	}
	header .menu-ul .nav-inner li a:hover::after{
		transform: scaleX(1); 
		width: 100%; 
	}
	header .menu-ul .nav-inner li:last-child a{
		margin-right: 0;
	}
	header .btn.web{
		margin-left: 40px;
	}
	header .btn.web a {
		width: 160px;
		height: 110px;
		background: var(--orange);
		border-radius: 0 0 0 25px;
		color: #fff;
		font-size: 20px;
		flex-direction: column;
	}
	header .btn.web a::before{
		content: "";
		background: url(/img/icon_reserve_w.svg) no-repeat;
		background-size: contain;
		width: 40px;
		height: 40px;
		display: block;
		margin-bottom: 8px;
	}
}
/* SP */
@media screen and (max-width:767px) {
	.top-bg{
		background: var(--main_blue) url(/img/fv_bg_hoshi.png) bottom center no-repeat;
		background-size: cover;
		border-radius: 0 0 0 50px;
	}
	header .logo-wrap a{
		margin: 2.67vw 4vw 0;
	}
	header .logo-wrap .sub{
		font-size: 3.2vw;
		margin-bottom: 2.67vw;
	}
	header .logo-wrap .image{
		width: 42.67vw;
	}
		
	header .inner .right .menu {
		width: 17.33vw;
		height: 17.33vw;
		position: relative;
		background: var(--orange);
		border-radius: 0 0 0 20%;
		transition: all 0.3s ease 0s;
	}
	header .inner .right .menu.active{
		border-radius: 0;
	}
	header .menu > div {
		position: absolute;
		left: 0px;
		right: 0;
		margin: auto;
		width: 6.4vw;
		height: 2px;
		background: #fff;
		transition: .35s ease-in-out;
	}
	header .menu .menu1 {
		top: 5.33vw;
	}
	header .menu .menu2 {
		top: 8vw;
	}
	header .menu .menu3 {
		top: 10.67vw;
	}
	header .menu.active .menu1 {
		top: 8vw;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	header .menu.active .menu2,
	header .menu.active .menu3{
		top: 8vw;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
		
	/*------------------------
	ハンバーガーメニュー
	------------------------*/
	#menu-list {
		width: 100%;
		position: absolute;
		z-index: 150;
		top: 17.33vw;
		left: 0;
		transform: translateY(-200vh);
		transition: all .6s;
		padding: 10% 4.5%;
		background: var(--orange);
	}
	#menu-list.active {
		transform: translateY(0);
	}
	#menu-list .menu-ul{
		display: flex;
		flex-direction: column;
	}
	#menu-list .menu-ul .tel{
		order: 2;
	}
	#menu-list .menu-ul .nav-inner{
		order: 1;
	}
	#menu-list ul li a {
		display: flex;
		align-items: center;
		margin-bottom: 8vw;
		line-height: 1;
		color: #fff;
		font-size: 4.27vw;
		font-weight: 500;
	}
	#menu-list ul li a::before {
		content: '';
		display: block;
		width: 2.667vw;
		height: 1px;
		background: #fff;
		margin-right: 2vw;
	}

	#menu-list .tel a{
		margin-bottom: 4vw;
		color: #fff;
	}
	#menu-list .tel a::before{
		background: url(/img/icon_tel_w.png) no-repeat;
		background-size: contain;
	}
	#menu-list .btn.web a{
		background: #fff;
		font-size: 4.7vw;
	}
	#menu-list .btn.web a::before{
		content: "";
		width: 6vw;
		height: 6.27vw;
		background: url(/img/icon_reserve_o.svg) no-repeat;
		background-size: contain;
		position: absolute;
		left: 4vw;
	}
}

/*------------------------

------------------------*/

/* -----PC----- */
@media screen and (min-width:768px) {
}
/* -----SP----- */
@media screen and (max-width:767px) {
}


/*------------------------
ページトップ
------------------------*/
#page-top {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: 0.2s opacity ease-in-out, 0.2s visibility ease-in-out;
	transition: 0.2s opacity ease-in-out, 0.2s visibility ease-in-out;
	text-align: right;
	position: sticky;
	z-index: 100;
	opacity: 0;
}
#page-top a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	background: var(--orange);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#page-top a:after {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background: url(/img/arrow_sankaku.svg) no-repeat;
	background-size: contain;
}
#page-top.show {
	opacity: 1;
	visibility: visible;
}

/* -----PC----- */
@media screen and (min-width:768px) {
	#page-top {
		width: 60px;
		height: 60px;
		bottom: 100px;
		margin: 0 30px -30px auto;
	}
	#page-top a:after {
		width: 16px;
		height: 16px;
	}
	#page-top a:hover{
		transform: translateY(4px);
	}
}
/* SP */
@media screen and (max-width:767px) {
	#page-top {
		width: 10.67vw;
		height: 10.67vw;
		bottom: 27vw;
		margin: 0 3vw -6vw auto;
	}
	#page-top a:after {
		width: 2.67vw;
		height: 2.67vw;
	}
}

/*------------------------
フッター
------------------------*/
footer {
	background: #484848;
}

footer .nav {
	display: flex;
	flex-wrap: wrap;
}
footer .nav li a {
	color: #fff;
	font-weight: bold;
}
footer .logo-wrap .sub {
	color: #fff;
	font-weight: 500;
}
footer .company .tel a::before{
	content: "";
	background: url(/img/icon_tel_w.png) no-repeat;
	background-size: contain;
}
footer .company .min {
	color: #fff;
}
footer .company .web a{
	background: #fff;
}
footer .company .web a::before{
	content: "";
	background: url(/img/icon_mail_b.png) no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}
footer .copy {
	color: #fff;
	text-align: center;
}

/* 追従 */
.bottom-contact {
	position: sticky;
	left: 0;
	right: 0;
	z-index: 999;
}
.bottom-contact .btn-wrap .btn a {
	background: var(--sub_blue);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
}
.bottom-contact .btn-wrap .btn.web a::before {
	content: "";
	background: url(/img/icon_mail_w.png) no-repeat;
	background-size: contain;
	display: block;
}
.bottom-contact .btn-wrap .btn.tel a{
	background: var(--orange);
}
/* -----PC----- */
@media screen and (min-width:768px) {
	footer .inner {
		padding: 60px 0 80px;
		width: 1200px;
		margin: 0 auto;
	}
	footer .nav {
		margin-bottom: 35px;
	}
	footer .nav li {
		margin-right: 40px;
	}
	footer .nav li a {
		font-size: 18px;
		padding-bottom: 10px;
		position: relative;
	}
	footer .nav li a::after {
		content: "";
		width: 0;
		height: 3px;
		background: #fdd23e;
		position: absolute;
		left: 0;
		bottom: 0;
		transform: scaleX(0);
		transform-origin: center;
		transition: transform 0.3s ease;
	}
	footer .nav li a:hover::after{
		width: 100%;
		transform: scaleX(1);
	}
	footer .logo-wrap {
		margin-bottom: 30px;
	}
	footer .logo-wrap .sub {
		font-size: 18px;
		margin-bottom: 5px;
	}
	footer .logo-wrap .image {
		width: 225px;
	}
	footer .company {
		color: #fff;
	}
	footer .company .address {
		font-size: 18px;
		margin-bottom: 10px;
	}
	footer .company .min {
		display: flex;
		font-size: 16px;
	}
	footer .company .min p {
		margin-right: 20px;
	}
	footer .company .web a{
		margin-bottom: 10px;
		font-size: 18px;
	}
	footer .company .web a::before{
		width: 24px;
		height: 20px;
		left: 18px;
	}
	footer .copy {
		font-size: 14px;
		padding-bottom: 15px;
	}
	.bottom-contact{
		display: none;
	}
}
/* -----SP----- */
@media screen and (max-width:767px) {
	footer .inner {
		padding: 8vw 4vw 12vw;
	}
	footer .nav {
		margin-bottom: 8vw;
	}
	footer .nav li {
		margin-right: 10.67vw;
	}
	footer .nav li a {
		font-size: 4.27vw;
		margin-bottom: 2.67vw;
	}
	footer .logo-wrap {
		margin-bottom: 5.33vw;
	}
	footer .logo-wrap .sub {
		font-size: 3.43vw;
		margin-bottom: 1.33vw;
	}
	footer .logo-wrap .image {
		width: 42.67vw;
	}
	footer .company {
		color: #fff;
	}
	footer .company .address {
		font-size: 4vw;
		margin-bottom: 1.33vw;
	}
	footer .company .web a{
		margin-bottom: 2.67vw;
	}
	footer .company .web a::before{
		width: 6.67vw;
		height: 5.67vw;
		left: 4vw;
	}
	footer .company .min {
		display: flex;
		font-size: 3.43vw;
	}
	footer .company .min p {
		margin-right: 2.67vw;
	}
	footer .copy {
		font-size: 3.2vw;
		padding-bottom: 4vw;
	}

	/* 追従 */
	.bottom-contact .btn-wrap {
		background: rgba(0, 0, 0, 0.6);
		padding: 2.67vw;
	}
	.bottom-contact .btn-wrap .btn a {
		height: 13.33vw;
		font-size: 4.27vw;
	}
	.bottom-contact .btn-wrap .btn.web a::before {
		width: 5.07vw;
		height: 4.07vw;
		margin-right: 2.67vw;
	}
}



/*------------------------
エフェクト
------------------------*/
.fadein {
	opacity : 0;
	transform : translate(0, 30px);
	transition: all 800ms;
}
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}
.fadein.scrollin:nth-of-type(2) {
	-moz-transition-delay:200ms;
	-webkit-transition-delay:200ms;
	-o-transition-delay:200ms;
	-ms-transition-delay:200ms;
}
.fadein.scrollin:nth-of-type(3) {
	-moz-transition-delay:400ms;
	-webkit-transition-delay:400ms;
	-o-transition-delay:400ms;
	-ms-transition-delay:400ms;
}
.fadein.scrollin:nth-of-type(4) {
	-moz-transition-delay:600ms;
	-webkit-transition-delay:600ms;
	-o-transition-delay:600ms;
	-ms-transition-delay:600ms;
}
.img-animation {
	overflow: hidden;
	position: relative;
}
.img-animation.active::before {
	animation: img-animation 1.5s cubic-bezier(.4, 0, .2, 1) forwards;
	background: var(--purple01);
	content: '';
	pointer-events: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
}
@keyframes img-animation {
	100% {
		transform: translateX(100%);
	}
}