@charset "utf-8";
/* CSS Document */
:root {
  --main:  #ce0365;
  --navy: #0d032f;
}


/*===共通部分==============
====================================================================*/
html{
	font-size: 100%;
}
body{
	font-family:"Noto Sans JP", sans-serif;
	font-weight: 400;
	color: #333;
	font-size: clamp(16px,2vw,18px);
	background: #fff;
	-webkit-font-smoothing: antialiased;/*アンチエイリアスを滑らかに*/
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.7;
}
p{
	letter-spacing: 0.1em;
}
h1,h2,h3,h4,h5,h6{
	font-weight: 600;
	line-height: 1.7;
}
a{
	text-decoration: none;
	color: #333;
	transition: .4s;
}
ul,ol{
	list-style: none;
	padding: 0;
}
main{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

section {
	padding: clamp(60px,8vw,100px) 0 ;
	position: relative;
}
table{
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;/*隙間なし*/
}

/*改行　-------*/
@media (min-width: 451px){
	br.only450{
		display: none;
	}
}

@media (max-width: 450px){
	br.not450{
		display: none;
	}
}

span.ib{
	display: inline-block!important;
}

/*PC・SP表示-----------------------*/
.sp{
	display: none;
}
.pc{
	display: block;
}

@media (max-width: 767px) {
	.sp{
		display: block;
	}
	.pc{
		display: none;
	}
}

/*幅・高さ調整-------*/
.inner{
	width: 96%;
	max-width: 1200px;
	margin: 0 auto;
}
.inner.wide{
	max-width: 1400px;
}
.inner.max{
	max-width: none;
}
.inner.w960{
	max-width: 960px;
}
/*高さ*/

.mg100{
	margin-bottom: 100px !important;
}
.mg80{
	margin-bottom: 80px !important;
}
.mg60{
	margin-bottom: 60px !important;
}
.mg50{
	margin-bottom: 50px !important;
}
.mg40{
	margin-bottom: 40px !important;
}
.mg30{
	margin-bottom: 30px !important;
}
.mg20{
	margin-bottom: 20px !important;
}
.mg10{
	margin-bottom: 10px !important;
}
.mg0{
	margin-bottom: 0 !important;
}

.pmg5 p{
	margin-bottom: 5px;
}
.pmg p{
	margin-bottom: 10px;
}
.pmg15 p{
	margin-bottom: 15px;
}
.pmg20 p{
	margin-bottom: 20px;
}
.pmg5 p:last-child,
.pmg p:last-child,
.pmg15 p:last-child,
.pmg20 p:last-child{
	margin-bottom: 0;
}

.t_center{
	text-align: center;
}
.t_left{
	text-align: left;
}
/* 画像　-------------------------- */
img{
	width: 100%;
	height: auto;
}
.obj-in{
	width: 100%;
	height: 100%;
	object-fit: contain
}
.obj-cov{
	width: 100%;
	height: 100%;
	object-fit: cover;	
}
/*------------------------------*/
h1.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
}


/*==背景=============================================*/


/*==見出し=============================================*/
.sec-head{
	display: flex;
	flex-direction: column;
	align-items: center;
	font-weight: 600;
}
.sec-head-en{
	color: var(--main);
	font-size: clamp(14px, 1.8vw, 22px);
}
.sec-head-ja{
	font-size: clamp(24px, 3.2vw, 35px);
	margin-bottom: 30px;
}
.sec-head.left{
	align-items: flex-start;
} 

/*==btn=============================================*/



/* =========================================
	header
========================================= */

#header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:80px;
	display:flex;
	align-items:center;
	background:#fff;
	z-index:999;
	transition:
		height .4s ease,
		box-shadow .4s ease;
}


/* logo
----------------------------------------- */

#header .logo{
	width:260px;
	height:100%;
	display:flex;
	align-items:center;
	padding-left:20px;
	box-sizing:border-box;
}

#header .logo a{
	display:flex;
	align-items:center;
	height:100%;
}

#header .logo img{
	display:block;
	width:200px;
	height:auto;
}


/* nav
----------------------------------------- */

#header .nav{
	margin-left:auto;
	height:100%;
	display:flex;
	align-items:center;
}

#header .nav > ul{
	height:100%;
	display:flex;
	align-items:center;
	margin:0;
	padding:0;
	list-style:none;
}

#header .nav > ul > li{
	height:100%;
	position:relative;
}

#header .nav > ul > li > a{
	position:relative;
	height:100%;
	display:flex;
	align-items:center;
	padding:0 20px;
	font-size:14px;
	font-weight:500;
	color:#111;
	text-decoration:none;
	white-space:nowrap;
}


/* 現在地・hoverのライン */

#header .nav > ul > li > a::after{
	content:"";
	position:absolute;
	left:50%;
	bottom:20px;
	width:0;
	height:1px;
	background:#e5007e;
	transform:translateX(-50%);
	transition:width .3s ease;
}


/* hover */

#header .nav > ul > li > a:hover::after{
	width:42px;
}


/* 現在地 */

#header .nav > ul > li.current > a::after{
	width:42px;
}


/* hover時は少しだけ強調 */

#header .nav > ul > li > a:hover{
	color:#111;
}


/* CTA
----------------------------------------- */

#header .h-cta{
	height:100%;
	display:flex;
	align-items:stretch;
	margin-left:8px;
}


/* 電話 */

#header .htel{
	min-width:170px;
	padding:0 12px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	box-sizing:border-box;
	color:#111;
	font-size:18px;
	line-height:1.3;
	text-decoration:none;
	white-space:nowrap;
	font-weight: 600;
	letter-spacing:.05rem;
}

#header .htel span{
	margin-top:2px;
	font-size:10px;
	line-height:1;
	font-weight: 400;
	letter-spacing:0;
}


/* お問い合わせ */

#header .hmail{
	width:120px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#c83a83;
	color:#fff;
	font-size:14px;
	font-weight:600;
	text-decoration:none;
	transition:background .3s ease;
}

#header .hmail:hover{
	background:#a92769;
}


/* スクロール後
----------------------------------------- */

#header.is-scrolled{
	height:52px;
	box-shadow:0 3px 15px rgba(0,0,0,.08);
}

#header.is-scrolled .nav > ul > li > a::after{
	bottom:10px;
}


/* =========================================
	responsive
========================================= */

@media screen and (max-width:1024px){

	#header .logo{
		width:220px;
	}

	#header .logo img{
		width:180px;
	}

	#header .nav > ul > li > a{
		padding:0 14px;
	}

	#header .htel{
		min-width:155px;
		font-size:18px;
	}

	#header .hmail{
		width:110px;
	}

}


@media screen and (max-width:819px){

	#header{
		height:60px;
	}

	#header .logo{
		width:auto;
		padding-left:15px;
	}

	#header .logo img{
		width:170px;
	}

	#header .nav > ul{
		display:none;
	}

	#header .htel{
		display:none;
	}

	#header .hmail{
		width:110px;
		height:60px;
	}

}
/* =========================================
	SP MENU
========================================= */

.menu-btn{
	display:none;
}


/* SP NAV */

.sp-nav{
	display:none;
}


@media screen and (max-width:819px){

	/* -----------------------------------------
		header
	----------------------------------------- */

	#header{
		height:60px;
	}

	#header .logo{
		width:auto;
		padding-left:15px;
	}

	#header .logo img{
		width:170px;
	}


	/* -----------------------------------------
		PC NAV hide
	----------------------------------------- */

	#header .nav{
		display:none;
	}


	/* -----------------------------------------
		menu button
	----------------------------------------- */

	.menu-btn{
		position:relative;
		z-index:10001;

		width:72px;
		height:60px;

		margin-left:auto;
		padding:0;

		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;

		border:0;
		background:#c83a83;

		color:#fff;

		cursor:pointer;
	transition:
		height .4s ease,
		box-shadow .4s ease;
	}
	#header.is-scrolled .menu-btn{
		height:52px;
		width: 52px;
	}


	.menu-btn__text{
		font-size:9px;
		font-weight:600;
		letter-spacing:.12em;
		line-height:1;
		margin-bottom:6px;
	}


	.menu-btn__icon{
		width:25px;
		height:13px;

		position:relative;

		display:block;
	}


	.menu-btn__icon i{
		position:absolute;
		left:0;

		width:25px;
		height:1px;

		background:#fff;

		transition:
			transform .4s ease,
			top .4s ease;
	}


	.menu-btn__icon i:first-child{
		top:2px;
	}


	.menu-btn__icon i:last-child{
		top:10px;
	}


	/* -----------------------------------------
		menu open button
	----------------------------------------- */

	.menu-btn.is-open .menu-btn__icon i:first-child{
		top:6px;
		transform:rotate(45deg);
	}


	.menu-btn.is-open .menu-btn__icon i:last-child{
		top:6px;
		transform:rotate(-45deg);
	}


	/* -----------------------------------------
		SP NAV
	----------------------------------------- */

	.sp-nav{
		position:fixed;
		top:0;
		right:0;

		width:100%;
		height:100vh;

		display:block;

		background:#0d062c;

		z-index:10000;

		visibility:hidden;
		opacity:0;

		transform:translateY(-20px);

		pointer-events:none;

		transition:
			opacity .4s ease,
			transform .4s ease,
			visibility .4s ease;
	}

	/* open */

	.sp-nav.is-open{
		visibility:visible;
		opacity:1;

		transform:translateY(0);

		pointer-events:auto;
	}


	/* -----------------------------------------
		inner
	----------------------------------------- */

	.sp-nav__inner{
		position:relative;

		width:100%;
		height:100%;

		padding:
			100px
			30px
			30px;

		box-sizing:border-box;

		display:flex;
		flex-direction:column;

		overflow-y:auto;
	}


	/* -----------------------------------------
		label
	----------------------------------------- */

	.sp-nav__label{
		margin:0 0 35px;

		color:#fff;

		font-size:11px;
		font-weight:600;

		letter-spacing:.2em;
	}


	.sp-nav__label::after{
		content:"";

		display:block;

		width:35px;
		height:2px;

		margin-top:10px;

		background:#e5007e;
	}


	/* -----------------------------------------
		menu list
	----------------------------------------- */

	.sp-nav__list{
		display:flex;
		flex-direction:column;
	}


	.sp-nav__list a{
		position:relative;

		display:flex;
		align-items:center;

		padding:20px 0;

		border-bottom:1px solid rgba(255,255,255,.18);

		color:#fff;

		text-decoration:none;

		transition:padding-left .3s ease;
	}


	.sp-nav__list a::after{
		content:"";

		position:absolute;

		right:0;
		top:50%;

		width:8px;
		height:8px;

		border-top:1px solid #e5007e;
		border-right:1px solid #e5007e;

		transform:
			translateY(-50%)
			rotate(45deg);
	}


	/* number */

	.sp-nav__list .num{
		width:45px;

		color:#e5007e;

		font-size:11px;
		font-weight:600;
		letter-spacing:.1em;
	}


	/* Japanese */

	.sp-nav__list .jp{
		font-size:20px;
		font-weight:500;
		letter-spacing:.08em;
	}


	/* English */

	.sp-nav__list .en{
		margin-left:12px;

		color:rgba(255,255,255,.45);

		font-size:9px;
		letter-spacing:.12em;
	}


	/* current */

	.sp-nav__list a.current{
		padding-left:10px;
	}


	.sp-nav__list a.current::before{
		content:"";

		position:absolute;

		left:0;
		top:50%;

		width:2px;
		height:28px;

		background:#e5007e;

		transform:translateY(-50%);
	}


	/* hover */

	.sp-nav__list a:hover{
		padding-left:10px;
	}


	/* -----------------------------------------
		bottom CTA
	----------------------------------------- */

	.sp-nav__bottom{
		margin-top:auto;
		padding-top:35px;

		display:grid;
		grid-template-columns:1fr 1fr;
		gap:10px;
	}


	.sp-tel,
	.sp-contact{
		min-height:72px;

		display:flex;
		flex-direction:column;
		justify-content:center;

		padding:12px 15px;

		box-sizing:border-box;

		text-decoration:none;
	}


	.sp-tel{
		background:#fff;

		color:#111;
	}


	.sp-tel span{
		font-size:8px;
		letter-spacing:.1em;
	}


	.sp-tel strong{
		margin-top:4px;

		font-size:15px;
		font-weight:500;
	}


	.sp-tel small{
		margin-top:3px;

		font-size:7px;
	}


	.sp-contact{
		background:#c83a83;

		color:#fff;

		font-size:13px;
		font-weight:600;
	}


	.sp-contact span{
		margin-top:4px;

		font-size:8px;
		font-weight:400;

		letter-spacing:.12em;
	}


	/* -----------------------------------------
		decorations
	----------------------------------------- */

	.sp-nav::before{
		content:"";

		position:absolute;

		right:-80px;
		top:120px;

		width:260px;
		height:260px;

		border:1px solid rgba(200,58,131,.35);

		transform:rotate(45deg);
	}


	.sp-nav::after{
		content:"";

		position:absolute;

		right:25px;
		bottom:150px;

		width:100px;
		height:1px;

		background:#e5007e;

		transform:rotate(-35deg);

		opacity:.7;
	}

}

@media screen and (max-width:359px){

	.sp-nav__bottom{
		grid-template-columns:1fr;
	}

}
/* =========================
   FOOTER
========================= */

.footer {
	background: #fff;
	color: #111;
}

.footer-main {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.foot-info {
	flex: 1;
	padding: 40px 0 25px;
}


.footmap{
	flex: 1;
}
.footmap iframe{
	height: 100%;
	width: 100%;
	object-fit: cover;
}

/* =========================
   会社情報
========================= */

.footer-company {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.footer-logo {
	display: block;
	width: min(100%, 280px);
	margin-bottom: 12px;
}

.footer-logo img {
	display: block;
	width: 100%;
	height: auto;
}

.footer-info {
	font-size: clamp(11px, 1.2vw, 12px);
	line-height: 1.8;
}

.footer-address,
.footer-contact {
	margin: 0;
}

.footer-contact {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 12px;
}


/* =========================
   ナビゲーション
========================= */

.footer-nav {
	margin-top: 20px;
}

.footer-nav ul {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-nav li {
	position: relative;
}

.footer-nav li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 1px;
	height: 13px;
	background: #d5d5d5;
	transform: translateY(-50%);
}

.footer-nav a {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 8px 24px;
	color: #111;
	font-size: clamp(12px, 1.3vw, 13px);
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.3s ease;
}

.footer-nav__arrow {
	color: #111;
	font-size: 17px;
	line-height: 1;
	transition:
		color 0.3s ease,
		transform 0.3s ease;
}

.footer-nav a:hover {
	color: var(--main);
}

.footer-nav a:hover .footer-nav__arrow {
	color: var(--main);
	transform: translateX(4px);
}



/* =========================
   コピーライト
========================= */

.footer-copy {
	padding: 11px 20px;
	background: #0b022b;
	color: #fff;
	text-align: center;
}

.footer-copy p {
	margin: 0;
	font-size: 9px;
	line-height: 1.5;
}


/* =========================
   タブレット
========================= */

@media screen and (max-width: 768px) {
	.foot-info {
		padding: 35px 0 22px;
	}
	.footer-main {
		grid-template-columns: repeat(1, 1fr);
	}
	.footer-logo {
		width: min(80%, 260px);
	}

	.footer-nav a {
		padding: 8px 16px;
	}
}


/* =========================
   スマートフォン
========================= */

@media screen and (max-width: 600px) {
		.foot-info{
		padding: 38px 0 28px;
	}

	.footer-logo {
		width: min(82%, 250px);
		margin-bottom: 15px;
	}

	.footer-info {
		font-size: 11px;
		line-height: 1.75;
	}

	.footer-contact {
		flex-direction: column;
		gap: 0;
	}

	.footer-nav {
		width: 100%;
		margin-top: 25px;
		border-top: 1px solid #ddd;
	}

	.footer-nav ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
	}

	.footer-nav li {
		border-bottom: 1px solid #ddd;
	}

	.footer-nav li:nth-child(odd) {
		border-right: 1px solid #ddd;
	}

	.footer-nav li:not(:last-child)::after {
		display: none;
	}

	.footer-nav a {
		justify-content: space-between;
		width: 100%;
		padding: 14px 15px;
		font-size: 12px;
	}

	.footer-copy {
		padding: 10px 15px;
	}

	.footer-copy p {
		font-size: 8px;
	}
}

/*==========================
 PAGE TOP
==========================*/

.pagetop{
	position: fixed;
	right: 35px;
	bottom: 35px;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--main);
	display:flex;
	align-items:center;
	justify-content:center;
	text-decoration:none;
	z-index:999;

	box-shadow:0 10px 25px rgba(0,0,0,.15);

	opacity:0;
	visibility:hidden;
	transform:translateY(20px);

	transition:
		opacity .35s,
		transform .35s,
		background .3s;
}

/* 表示 */

.pagetop.show{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}

/* 矢印 */

.pagetop span{
	position:relative;
	width:18px;
	height:18px;
	display:block;
}

.pagetop span::before,
.pagetop span::after{
	content:"";
	position:absolute;
	background:#fff;
	border-radius:2px;
}

.pagetop span::before{
	width:2px;
	height:16px;
	left:7px;
	top:2px;
}

.pagetop span::after{
	width:10px;
	height:10px;
	border-top:2px solid #fff;
	border-left:2px solid #fff;
	background:none;

	transform:rotate(45deg);

	left:3px;
	top:2px;
}

/* Hover */

.pagetop:hover{
	background:#c90061;
	transform:translateY(-4px) scale(1.08);
}

.pagetop:hover span{
	animation:topArrow .6s ease;
}

@keyframes topArrow{

	0%{
		transform:translateY(5px);
	}

	50%{
		transform:translateY(-3px);
	}

	100%{
		transform:translateY(0);
	}

}

/* SP */

@media (max-width:768px){

	.pagetop{
		width:48px;
		height:48px;
		right:18px;
		bottom:18px;
	}

}