@charset "utf-8";
/* CSS Document */
/* body
-------------------------------------------------- */
body {
	font-family: 'Sofia Sans', 'Noto Sans JP', sans-serif;
	/* font-family: 'Sofia Sans', sans-serif; */
	font-weight: 700;
	background: #fff;
}

img {
	width: 100%; height: auto;
}
a {
	color: #1E85FF;
	text-decoration: none;
}
a:hover {
	opacity: .7;
	text-decoration: none;
}

.inner {position: relative;}
@media (min-width: 768px) {
/* PC用 */
	body {
		background:#F5F5F7;
	}
}
@media (max-width: 767px) {
/* tablet用 */
	.inner { margin: 0 4.5%;}
}



/* header
-------------------------------------------------- */
.header {
	z-index: 12;
}
.header .logo img {}
@media (min-width: 768px) {
/* PC用 */
	.header {
		position: fixed;		
		left:calc(50% + 55px);
		top:0;
		width: min(25%, 375px);
		max-height:73px;
		padding:27px 0;
		box-sizing: border-box;
	}
}
@media (max-width: 767px) {
/* tablet用 */
	.header {
		position: fixed;
		width: 100%;
		padding: 25px 0;
		background: rgba(255,255,255,.7);
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
	}
	.header .logo img {
		width: auto;
		height: 20px;
	}
}

/* js__btn
-------------------------------------------------- */
.js__btn {}
.js__btn span {
	position: absolute;
	right: 0;
	top: 0;
	width: 30px;
	height: 1px;
	background: #000;
	transition: all 0.3s;
}
.js__btn span:nth-child(2) { 
	top: auto;
	right: auto;
	left: 0;
	bottom: 0;}

.open .js__btn span {
	top: 4px;
	transform-origin: center center;
	transform: rotate(-30deg) ;
}
.open .js__btn span:nth-child(2) {
	bottom: 4px;
	transform: rotate(30deg);}

@media (min-width: 768px) {
/* PC用 */	
	.js__btn { display:none;}
}
@media (max-width: 767px) {
/* tablet用 */
	.js__btn {
		position: absolute;
		right: 0;
		top: 6px;
		width: 30px;
		height: 8px;
	}
	.open .js__btn {
		/*height: 15px;*/
		/*top: -1.5px;*/
	}
}
/* 
-------------------------------------------------- */
.global-nav {
	position: absolute;
	right: 0;
	width: 100%;
	background: rgba(255,255,255,.7);
	-webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
	z-index: 11;
	transition: all 0.3s;
	
	opacity: 0;
	visibility: hidden;
}
.open .global-nav {
	opacity: 1;
	visibility: visible;
}

.ul--main--mav {
	
}
.ul--main--mav li {}
.ul--main--mav li a {
	display: block;
	padding: 0.34375em 0;
	font-size: 3.2em;
	font-weight: 500;
	color: #000;
	text-align: right;	
}
@media (min-width: 768px) {
/* PC用 */
	.global-nav {
		position: fixed;
		left:calc(50% + 55px);
		width: min(25%, 375px);
		padding: 110px 0 0 ;
		background: transparent;
		box-sizing: border-box;
		
		opacity: 1;
		visibility: visible;
	}
	.ul--main--mav li a { text-align:left;}
}
@media (max-width: 767px) {
/* tablet用 */
	.global-nav {
		position: fixed;
		top: 70px;
		height: calc(100% - 70px);
		padding: 34px 4.5% 0 4.5%;
	}
}


/* footer
-------------------------------------------------- */
.footer {
	padding: 6.5em 0;
	border-top:1px solid #D9D9D9;
}
@media (min-width: 768px) {
/* PC用 */
}
@media (max-width: 767px) {
/* tablet用 */
	.footer .inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

/* totop
-------------------------------------------------- */
.totop {
	width: 8.5px;
	height: 42px;
	margin-right: 10px;
}
.totop span {
	display: block;
	position: relative;
	width: 8.5px;
	height: 42px;
	border-left: 1px solid #000;
}
.totop span::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 17px;
	height: 1px;
	transform-origin: left top;
	transform: rotate(60deg);
	background: #000;
}
.totop:hover { cursor:pointer;}

@media (min-width: 768px) {
/* PC用 */
	.global-nav .totop {
		margin-top:10em;
		padding:0;
		background: transparent;
		box-sizing: border-box;
	}
	
	.totop span {
		display: block;
		position: relative;
		width: 13px;
		height:65px;
		border-left: 1px solid #000;
	}
	.totop span::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 26.2px;
		height: 1px;
		transform-origin: left top;
		transform: rotate(60deg);
		background: #000;
	}

	.footer .totop { display:none;}
}
@media (max-width: 767px) {
/* tablet用 */
	.global-nav .totop { display:none;}
}

/* main
-------------------------------------------------- */
main {}
@media (min-width: 768px) {
/* PC用 */
	.container {
		position: absolute;
		left:50%;
		top:0;
		transform: translateX(-100%);
		width:512px;
		padding:27px;
		background: #fff;
		box-sizing: border-box;
	}
	main {		
	}
}
@media (max-width: 767px) {
/* tablet用 */
	.container { overflow-x:hidden;}
	main { padding-top:70px;}
}

/* linkBtn
-------------------------------------------------- */
.linkBtn {
	margin:1.3em 0 0;
}
.linkBtn a {
	display: flex;
	align-items: center;
	font-size:1.4em;
	line-height: 2;
}
.linkBtn a span {
	position: relative;
	display: inline-block;
	width:24px;
	height:24px;
	margin-left: 14px;
	border-radius: 12px;
	border:2px solid #1E85FF;
}
.linkBtn a span::before {
	content: '';
	position: absolute;
	left: 50%;
	top:50%;
    transform: translate(-35%, -50%);
    width: 0px;
    height: 0px;
    border-left: 10px solid #1E85FF;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}
.linkBtn a span::after {
	content: '';
	position: absolute;
	left: 50%;
	top:50%;
    transform: translate(-36%, -50%);
    width: 0px;
    border-left: 5.5px solid #F5F5F7;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
	z-index: 2;
}
@media (min-width: 768px) {
/* PC用 */
}
@media (max-width: 767px) {
/* tablet用 */
}


/* 
-------------------------------------------------- */
@media (min-width: 768px) {
/* PC用 */
}
@media (max-width: 767px) {
/* tablet用 */
}

/* 
-------------------------------------------------- */
@media (min-width: 768px) {
/* PC用 */
}
@media (max-width: 767px) {
/* tablet用 */
}

/* 
-------------------------------------------------- */
@media (min-width: 768px) {
/* PC用 */
}
@media (max-width: 767px) {
/* tablet用 */
}

/* 
-------------------------------------------------- */
@media (min-width: 768px) {
/* PC用 */
}
@media (max-width: 767px) {
/* tablet用 */
}

/* 
-------------------------------------------------- */
@media (min-width: 768px) {
/* PC用 */
}
@media (max-width: 767px) {
/* tablet用 */
}