/*!
Theme Name: advance by etto
Author: Tomoyuki Fumiyama
Author URI: https://etoblog.net/
Version: 1.0.0
*/
@charset "utf-8";

:root {
	--main-color: #7769ac;
}

@font-face {
	font-family: "NotoSansJP";
	src: url("./fonts/SourceHanSansJP-VF.otf.woff2") format("woff2"), url("./fonts/SourceHanSansJP-VF.otf") format("opentype");
}

@font-face {
	font-family: "icomoon";
	src: url("./fonts/icomoon.ttf?f67iz7") format("truetype"), url("./fonts/icomoon.woff?f67iz7") format("woff"),
		url("./fonts/icomoon.svg?f67iz7#icomoon") format("svg");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: "icomoon" !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
}

.icon-facebook:before {
	content: "\f082";
}
.icon-linkedin:before {
	content: "\f08c";
}
.icon-twitter:before {
	content: "\f099";
}
.icon-pinterest:before {
	content: "\f0d2";
}
.icon-youtube:before {
	content: "\f16a";
}
.icon-instagram:before {
	content: "\f16d";
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
a {
	text-decoration: none;
	color: inherit;
}
ol, ul {
	list-style: none;
}

body {
	line-height: 1.8;
	letter-spacing: 0.05em;
	font-family: "NotoSansJP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

.main-wrapper {
	padding-top: 5vw;
	padding-left: max(80px, 5vw);
}

.sp {
	display: none;
}
.pc {
	display: inherit;
}

@media screen and (max-width: 479px) {
	.sp {
		display: inherit;
	}
	.pc {
		display: none;
	}
}
/* グローバルメニュー */
.globalmenu {
	display: flex;
	align-items: center;
	height: 100vh;
	width: 100vw;
	position: fixed;
	top: 0;
	left: 0;
	padding-left: max(80px, 5vw);
	z-index: 9;
	overflow-y: hidden;
	transition: 0.3s ease-in-out;
	transform: translateX(-10%);
	opacity: 0;
	pointer-events: none;
}
.globalmenu.is-active {
	transform: translateX(0%);
	opacity: 1;
	pointer-events: auto;
}

.gmenu-company {
	width: 50%;
	height: 100%;
	padding: 10%;
	background-color: var(--main-color);
	color: #fff;
}

.gmenu-companyname {
	font-size: min(60px, 5vw);
	max-width: 250px;
	-webkit-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1);
}

.gmenu-companysub {
	font-size: clamp(14px, 20px, 1vw);
	margin-top: 1em;
}

.gmenu-location {
	font-size: clamp(14px, 20px, 1vw);
	position: relative;
	padding-top: 40px;
	margin-top: 40px;
}

.gmenu-location::before {
	position: absolute;
	content: "";
	width: 10%;
	min-width: 80px;
	height: 4px;
	background-color: #fff;
	top: 0;
	left: 0;
}

.gmenu-link {
	width: 50%;
	height: 100%;
	padding: 10%;
	background-color: #fff;
}

.gmenu-list {
	line-height: 2.2;
}

.gmenu-anchor {
	font-size: min(60px, 5vw);
}

.header-wrapper-sp {
	display: none;
}

.fa-brands {
	width: 1.6vw;
	font-size: 1.6vw;
	height: 1.6vw;
}

.hamburger-menu {
	display: flex;
	width: 100%;
	height: 100%;
}

.hamburger-menuline {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	cursor: pointer;
}

.hamburger-menuline::after {
	width: 50px;
	height: 2px;
	background-color: #000;
	content: "";
	display: block;
	position: absolute;
	transform: translateX(5px) rotate(90deg);
	animation: hamburger-Leave-2 0.6s cubic-bezier(0.83, 0, 0.17, 1) forwards;
}

.hamburger-menuline::before {
	width: 50px;
	height: 2px;
	background-color: #000;
	content: "";
	display: block;
	position: absolute;
	transform: translateX(-5px) rotate(90deg);
	transition: 1s;
	animation: hamburger-Leave-1 0.6s cubic-bezier(0.83, 0, 0.17, 1) forwards;
}

.hamburger-menu:hover .hamburger-menuline::after {
	background-color: black;
	animation: hamburger-Hover-2 0.6s cubic-bezier(0.83, 0, 0.17, 1) forwards;
}

.hamburger-menu:hover .hamburger-menuline:before {
	animation: hamburger-Hover-1 0.6s cubic-bezier(0.83, 0, 0.17, 1) forwards;
}

@keyframes hamburger-Hover-1 {
	0% {
		transform: translateX(-5px) rotate(90deg);
		width: 50px;
	}
	25% {
		transform: translateX(0) rotate(90deg);
		width: 50px;
	}
	to {
		transform: translateY(10px) rotate(305deg);
		width: 25px;
	}
}

@keyframes hamburger-Leave-1 {
	0% {
		transform: translateY(10px) rotate(305deg);
		width: 25px;
	}
	25% {
		transform: translateX(0) rotate(90deg);
		width: 50px;
	}
	to {
		transform: translateX(-5px) rotate(90deg);
		width: 50px;
	}
}

@keyframes hamburger-Hover-2 {
	0% {
		transform: translateX(5px) rotate(90deg);
		width: 50px;
	}
	25% {
		transform: translateX(0) rotate(90deg);
		width: 50px;
	}
	to {
		transform: translateY(-10px) rotate(55deg);
		width: 25px;
	}
}

@keyframes hamburger-Leave-2 {
	0% {
		transform: translateY(-10px) rotate(55deg);
		width: 25px;
	}
	25% {
		transform: translateX(0) rotate(90deg);
		width: 50px;
	}
	to {
		transform: translateX(5px) rotate(90deg);
		width: 50px;
	}
}

.hamburger-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: max(80px, 5vw);
	border-right: 1px solid #000;
	height: 100%;
	z-index: 10;
}

.hamburger-sns {
	position: absolute;
	bottom: 8vw;
	left: 0;
	right: 0;
}
.hamburger-list {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 1.4vw;
}
.hamburger-item {
	width: -moz-fit-content;
	width: fit-content;
}
.hamburger-sns-link {
	display: inline-block;
	width: -moz-fit-content;
	width: fit-content;
	height: -moz-fit-content;
	height: fit-content;
	font-size: 25px;
}

.header-wrapper {
	display: flex;
	padding: 100px 0px 0 5vw;
	justify-content: space-between;
	align-items: flex-end;
	padding: 0 max(80px, 5vw);
}
.header-logoimage {
	width: 100%;
}
.header-logo {
	max-width: 250px;
	padding-left: 30px;
	height: 100%;
}
.gnav-list {
	display: flex;
	gap: 53px;
	padding-top: 44px;
	font-size: 1vw;
}
.gnav-anchor::after {
	content: "";
	width: 10px;
	height: 10px;
	display: block;
	background-color: var(--main-color);
	border-radius: 50px;
	margin: 0 auto;
	opacity: 0;
	transition: opacity 0.3s;
}
.gnav-anchor:hover::after {
	opacity: 1;
}

.button-line {
	position: relative;
	display: flex;
	background: #fefefe;
	color: var(--main-color);
	width: 70%;
	padding: 20px;
	justify-content: center;
	margin-top: 40px;
	font-weight: 700;
	cursor: pointer;
	border: 2px solid var(--main-color);
	border-radius: 100px;
	font-size: min(3.6vw, 16px);
}
.button-line::after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 1.4vw;
	border-radius: 50%;
	border: 1px solid var(--main-color);
	transform: translateY(-50%);
	width: 2vw;
	height: 2vw;
}
.button-line::before {
	content: "";
	display: block;
	position: absolute;
	margin: auto;
	background-color: var(--main-color);
	top: 50%;
	right: 1.9vw;
	transform: translate(-50%, -50%);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	width: 0.5vw;
    height: 0.5vw;
    right: 1.8vw;
}
/* フッター */
.main-footer {
	padding: 140px 5.1vw 80px calc((220 / 1920) * 100%);
	background-color: #505b66;
	color: #fff;
}

.footer-top {
	display: flex;
}

.footer-locationwrapper {
	width: 40%;
	font-size: 0.8vw;
	color: #cdcdcd;
}

.footer-location {
	font-weight: 900;
	padding-bottom: 2em;
	font-size: 1vw;
}

.footer-address {
}

.footer-contactwrapper {
	width: 60%;
}

.footer-contact-sub {
	font-size: 1.2vw;
	font-weight: 900;
	margin: 0;
}
.footer-contact-sub::before {
	display: inline-block;
	content: "";
	width: max(0.8vw, 10px);
	height: max(0.8vw, 10px);
	border-radius: 50%;
	background-color: var(--main-color);
	margin-right: max(1vw, 8px);
}

.footer-contact-header {
	font-size: 6.5vw;
	font-weight: 700;
	line-height: 1.8;
	margin: 0;
}

.button-contact {
	width: 100%;
	max-width: 400px;
	padding: 1rem 2rem;
	background-color: #fff;
	border-radius: 100px;
	position: relative;
	color: #000000;
	cursor: pointer;
	margin-top: 40px;
}

.button-contact::before {
	content: "";
	background-color: #fff;
	border: 1px solid #aaaaaa;
	border-radius: 50%;
	width: 46px;
	height: 46px;
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.button-contact::after {
	content: "";
	border-top: 1px solid #aaaaaa;
	border-right: 1px solid #aaaaaa;
	width: 16px;
	height: 16px;
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

.footer-contact-text {
	font-size: min(3vw, 16px);
}

.footer-bottom {
	color: #cdcdcd;
	font-size: min(2.5vw, 14px);
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
}

.footer-policy {
}

.footer-copyrights {
}

@media screen and (max-width: 479px) {
	.main-wrapper {
		padding-left: 0;
	}
	/* ヘッダー */
	.globalmenu {
		padding-left: 0;
		flex-direction: column;
	}
	.gmenu-company {
		width: 100%;
		height: auto;
		padding: 36% 10% 20%;
	}
	.gmenu-link {
		width: 100%;
	}
	.gmenu-companyname {
		font-size: min(30px, 7vw);
		max-width: 140px;
	}

	.gmenu-anchor {
		font-size: min(30px, 7vw);
	}
	.bg-line {
		width: 43.5vw!important;
		right: 7vw!important;
	}
	.hamburger-wrapper {
		display: none;
	}
	.main-header {
		display: none;
	}
	.header-wrapper-sp {
		display: flex;
		border-bottom: 1px solid #eee;
		z-index: 9999;
		position: relative;
	}

	.hamberger-wrapper-sp {
		width: 14vw;
		height: 14vw;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.hamberger-menuline-sp {
		width: 18px;
		height: 1px;
		background-color: black;
		display: block;
	}

	.hamberger-menuline-sp-top {
		width: 18px;
		height: 1px;
		background-color: #000;
		display: block;
		transform: translateY(5px);
	}

	.hamberger-menuline-sp-bottom {
		width: 18px;
		height: 1px;
		background-color: #000;
		display: block;
		transform: translateY(-5px);
	}
	.headerlogo-wrapper-sp {
		width: 72vw;
		height: 14vw;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.headerlogo-wrapper-sp img {
		max-width: 130px;
	}

	.headercontact-wrapper-sp {
		width: 14vw;
		height: 14vw;
		background-color: var(--main-color);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.headercontact-image {
		width: 80%;
	}
	/* フッター */
	.main-footer {
		padding: 100px 7vw 80px;
	}
	.footer-top {
		flex-direction: column-reverse;
	}
	.footer-contact-header {
		font-size: 12vw;
	}
	.footer-contactwrapper,
	.footer-locationwrapper {
		width: 100%;
	}
	.footer-locationwrapper {
		margin-top: 60px;
		padding-top: 60px;
		font-size: min(2.5vw, 14px);
		border-top: 1px solid #707070;
	}
	.footer-location {
		font-size: min(3vw, 12px);
	}
	.button-line {
		width: 100%;
	}
	.button-line::before {
		width: 2vw;
        height: 2vw;
        right: 5vw;
	}
	.button-line::after {
		right: 4vw;
		width: 7vw;
		height: 7vw;
	}
	.footer-contact-sub {
		font-size: 3vw;
	}
}