@charset "UTF-8";

/* ====================================
	ベース
==================================== */
:root {
	--color-text: #222;
	--color-heading: #333;
	--color-link: #444;
	--color-yellow: #ffdf2c;
	--color-yellow-lt: #fffef2;
	--color-blue: #99d7db;
	--color-green: #aad26c;
	--color-orange: #fbb557;
	--color-pink: #f7acbb;
	--color-gray: #f2f2f2;
	--color-border: #e9e9e9;
	--base-w: calc(100% - 30px);
	--font-eng: "Josefin Sans";
	--font-num: "Poppins";
}
@media (min-width: 1025px) {
	:root {
		--base-w: 1000px;
	}
}

html {
	font-size: 62.5%;
	scroll-behavior: smooth;
	scroll-padding: 110px;
}
body {
	margin: 0;
	padding: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--color-text);
	background: #fff;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
main{ padding-top: 91px; }

address{ font-style: normal; }
*, *::before, *::after { box-sizing: border-box; }
ul,ol,li{ list-style: none; }
a {
	color: var(--color-link);
	text-decoration: none;
}
button{
	padding: 0;
	border: none;
	background-color: transparent;
	font-family: inherit;
	cursor: pointer;
	appearance: none;
}
summary {
	list-style: none;
	cursor: pointer;
}
summary::-webkit-details-marker{ display: none; }
img{
	max-width: 100%;
	height: auto;
}

.text--center{ text-align: center; }
.text--right{ text-align: right; }

[data-js-new]{ display: none; }

.pc-only{ display: none; }

@media (max-width: 1024px) {
	iframe{
		width: 100%;
		height: auto;
		aspect-ratio: 2 / 1;
	}
}
@media (min-width: 1025px) {
	.pc-only{ display: inherit !important; }
	.smt-only{ display: none !important; }
}


/*---------------------------------
	MTサイト検索
---------------------------------*/

.mt-site-search-form{
	display: flex;
}
.mt-site-search-form__query{
	width: 280px;
	padding: 0 10px;
	border: 1px solid var(--color-border);
	font-size: 1.2rem;
}
.mt-site-search-form__query::placeholder{
	font-weight: 400;
}
.mt-site-search-form__button{
	width: 40px;
	height: 40px;
	margin: 0;
	text-indent: -9999px;
	background: var(--color-link) url(../img/search-icon-white.svg) no-repeat center center / 20px;
}
@media (any-hover: hover) {
	.mt-site-search-form__button{
		transition: opacity .4s;
	}
	.mt-site-search-form__button:hover{
		opacity: .5;
	}
}


/*---------------------------------
	見出し
---------------------------------*/

.heading-main{
	display: flex;
	flex-direction: column;
	gap: 15px 0;
	letter-spacing: .1em;
	color: var(--color-heading);
}
.heading-text{
	line-height: 1;
	font-size: 5rem;
	font-family: var(--font-eng);
}
.heading-sub{
	display: flex;
	align-items: center;
	gap: 0 20px;
	letter-spacing: .06em;
	font-size: 1.4rem;
}
.heading-sub::before{
	content: "";
	width: 20px;
	height: 5px;
	display: block;
}
.heading-sub--yellow::before{
	background: var(--color-yellow);
}
.heading-sub--white::before{
	background: #fff;
}
.heading-main--center{
	text-align: center;
	justify-content: center;
}
.heading-main--center .heading-sub{
	justify-content: center;
}
.heading-bg{
	padding: 0 20px;
	height: 65px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 25px;
	font-size: 1.8rem;
	background: var(--color-yellow);
}
.heading-circle{
	padding-left: 20px;
	position: relative;
}
.heading-circle::before{
	content: "";
	width: 11px;
	height: 11px;
	background: var(--color-yellow);
	clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
	position: absolute;
	top: 7.5px;
	left: 0;
}
@media (min-width: 1025px) {
	.heading-text{
		font-size: 6.6rem;
	}
	.heading-sub{
		font-size: 1.6rem;
	}
	.heading-bg{
		font-size: 2.6rem;
	}
}


/*---------------------------------
	フェードインアニメーション
---------------------------------*/

/* 汎用 例：animation: fadeIn 0.5s ease; */
@keyframes fadeIn {
	from {
		opacity: 0;
		}
	to {
		opacity: 1;
	}
}

.fadein-up,
.fadein-left,
.fadein-right{
	opacity: 0;
	transition: opacity .6s ease, transform .6s ease;
}

/* 下から上 */
.fadein-up {
	transform: translateY(60px);
}

.fadein-up.is-active {
	opacity: 1;
	transform: translateY(0);
}

/* 左から右 */
.fadein-left {
	transform: translateX(-60px);
}

/* 右から左 */
.fadein-right {
	transform: translateX(60px);
}
.fadein-left.is-active,
.fadein-right.is-active {
	opacity: 1;
	transform: translateX(0);
}


/*---------------------------------
	ボタン
---------------------------------*/

.button{
	width: fit-content;
	display: flex;
	color: var(--color-link);
}
.button--center{
	margin-inline: auto;
}
.button--right{
	margin-left: auto;
}

/* 八角形アイコン */
.button-octagon{
	display: flex;
	align-items: center;
	gap: 0 20px;
	font-weight: bold;
}
.button-octagon .octagon{
	width: 56px;
	height: 56px;
}
.octagon{
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}
.octagon::before,
.octagon::after{
	content: "";
	margin: auto;
	display: block;
	clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
	position: absolute;
}
.octagon::before{
	width: 100%;
	height: 100%;
	z-index: -2;
	background: var(--color-yellow);
}
.octagon::after{
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	background: #fff;
	z-index: -1;
	transition: opacity .2s ease-in;
}
.octagon--yellow::after{
	opacity: 0;
}

/* 白背景 */
.button-default{
	height: 54px;
	border: 1px solid var(--color-border);
	align-items: center;
	justify-content: center;
	color: var(--color-text);
	background: #fff url(../img/arrow-icon1.svg) no-repeat center right 20px / 6px;
	position: relative;
}
.button-default img{
	position: absolute;
	top: 50%;
	left: 15px;
	transform: translateY(-50%);
}
/* 白背景_矢印下 */
.button-default__down{
	background: #fff url(../img/arrow-icon3.svg) no-repeat center right 20px / 12px;
}
/* 白背景_外部リンク用 */
.button-default__outlink{
	background: #fff url(../img/outlink-icon.svg) no-repeat center right 15px / 12px;
}
@media (any-hover: hover) {
	a:has(.octagon--yellow):hover .octagon--yellow::after{
		opacity: 1;
	}
	a:has(.octagon--white):hover .octagon--white::after{
		opacity: 0;
	}
	.button-default,
	.button-jump{
		transition: opacity .4s;
	}
	.button-default:hover,
	.button-jump:hover{
		opacity: .5;
	}
}

/*---------------------------------
	ヘッダー
---------------------------------*/
.header{
	width: 100%;
	padding: 10px;
	border-bottom: 1px solid var(--color-border);
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}
.header-inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0 20px;
}
.header-logo{
	width: 171px;
}
.header-flex{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0 20px;
}
.header-instagram{
	width: 40px;
}
.header-search{
	width: 36px;
}
.header-search__inner{
	width: 100vw;
	max-height: 0;
	padding: 30px 20px 20px 20px;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	background: #fff;
	position: absolute;
	top: 90px;
	right: 0;
	z-index: 10;
	opacity: 0;
	transition: max-height 0.3s ease, opacity 0.3s ease;
}
.header-search[open]:not(.is-closing) .header-search__inner{
	max-height: 200px;
	opacity: 1;
}
.header-search__close{
	width: 16px;
	height: 16px;
	color: var(--color-link);
	line-height: 0;
	font-size: 2rem;
	font-weight: 400;
	position: absolute;
	top: 15px;
	right: 15px;
}
.header-search__inner p{
	letter-spacing: .05em;
	color: var(--color-heading);
	font-family: var(--font-eng);
}
.gnav-wrapper{
	width: 70px;
}
.gnav-trigger{
	width: 70px;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-yellow);
	position: relative;
}
.gnav-trigger__bar{
	width: 34px;
	height: 24px;
	position: relative;
}
.gnav-trigger__bar span{
	width: 34px;
	height: 1px;
	display: block;
	background: var(--color-text);
	position: absolute;
	right: 0;
	transition: .3s;
}
.gnav-trigger__bar span:nth-of-type(2){
	width: 26px;
	top: 11px;
}
.gnav-trigger span:nth-of-type(3){
	width: 18px;
	top: 23px;
}
.gnav-wrapper[open] .gnav-trigger__bar span{
	width: 34px;
	transform: rotate(45deg);
	top: 12px;
}
.gnav-wrapper[open] .gnav-trigger__bar span:nth-of-type(2){
	opacity: 0;
}
.gnav-wrapper[open] .gnav-trigger__bar span:nth-of-type(3){
	transform: rotate(-45deg);
}
.gnav-inner{
	width: 100%;
	max-width: 80%;
	height: 100vh;
	padding: 20px 15px 130px;
	border: 1px solid var(--color-border);
	border-right: 0;
	background: #fff;
	position: absolute;
	top: 91px;
	right: 0;
	opacity: 0;
	transform: translateX(30px);
	visibility: hidden;
	transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
	z-index: 10;
	overflow: auto;
}
.gnav-wrapper[open]:not(.is-closing) .gnav-inner {
	opacity: 1;
	transform: translateX(0);
	visibility: visible;
}
.gnav-list__link{
	width: 100%;
	padding: 15px 0;
	border-bottom: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	gap: 0 30px;
	background: url(../img/arrow-icon1.svg) no-repeat center right / 6px;
}
.gnav-list__link .octagon{
	width: 45px;
	height: 45px;
}
.gnav-instagram{
	margin-top: 40px;
	display: flex;
	justify-content: flex-end;
}

@media (min-width: 1025px) {
	.header-search{
		position: relative;
	}
	.header-search__inner{
		width: fit-content;
		border: 1px solid var(--color-border);
		top: 63px;
		right: -10px;
	}
	.gnav-wrapper{
		margin-left: 10px;
	}
	.gnav-inner{
		width: 375px;
		padding: 40px 30px 130px;
	}
}

@media (any-hover: hover) {
	.header-logo a,
	.header-instagram,
	.header-search__trigger,
	.header-search__close{
		transition: opacity .4s;
	}
	.header-logo a:hover,
	.header-instagram:hover,
	.header-search__trigger:hover,
	.header-search__close:hover{
		opacity: .5;
	}
	.gnav-trigger:hover .gnav-trigger__bar span{
		width: 34px;
	}
}


/*---------------------------------
	フッター
---------------------------------*/

.footer-top{
	position: relative;
}
.footer-top__img{
	width: 100%;
	height: auto;
}
.footer-top__jump{
	width: 70px;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: -40px;
	left: 50%;
	transform: translateX(-50%);
}
.footer-top__jump::before{
	content: "";
	width: 9px;
	height: 15px;
	background: url(../img/arrow-icon1.svg) no-repeat center top / 9px;
	position: absolute;
	top: 15px;
	transform: rotate(-90deg);
	z-index: 2;
}
.footer-top__jump .octagon{
	width: 70px;
	height: 70px;
}
.footer-top__jump .octagon span{
	padding-top: 15px;
	font-size: 1.2rem;
}
.footer-middle{
	background: url(../img/illust-footer.png) no-repeat bottom right 30px / auto 132px;
}
.footer-flex{
	width: calc(100% - 30px);
	max-width: 1400px;
	margin-inline: auto;
	padding: 60px 0 150px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.footer-logo{
	width: 260px;
	margin-bottom: 10px;
}
.footer-info{
	margin-top: 40px;
}
.footer-info__desc{
	margin-top: 20px;
}
.footer-info__desc small{
	margin-top: 5px;
	display: block;
	font-size: 1.4rem;
	font-weight: 400;
}
.footer-info__instagram{
	display: flex;
	align-items: center;
	gap: 0 15px;
}
.footer-info__instagram img{
	width: 30px;
	height: auto;
}
.footer-flex__right{
	display: flex;
	flex-direction: column;
}
.footer-nav__link{
	width: 100%;
	padding: 15px 0;
	display: flex;
	align-items: center;
	background: url(../img/arrow-icon1.svg) no-repeat center right / 6px;
}
.footer-bottom{
	font-size: 1.4rem;
	background: var(--color-yellow);
}
.footer-bottom__inner{
	width: calc(100% - 30px);
	max-width: 1400px;
	margin-inline: auto;
	padding: 15px 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.footer-subnav{
	display: flex;
	flex-direction: column;
	gap: 10px 40px;
}
.footer-subnav__link{
	padding-right: 30px;
	background: url(../img/outlink-icon.svg) no-repeat center right / 12px;
}
.footer-copyright{
	color: var(--color-link);
}
@media (min-width: 1025px) {
	.footer-middle{
		background: url(../img/illust-footer.png) no-repeat bottom right 45px / 540px;
	}
	.footer-flex{
		width: calc(100% - 120px);
		max-width: 1400px;
		padding: 90px 0 140px;
		flex-direction: row;
		justify-content: space-between;
	}
	.footer-flex__left{
		width: 265px;
	}
	.footer-flex__right{
		width: 635px;
		flex-direction: row;
		justify-content: flex-end;
		gap: 0 50px;
	}
	.footer-nav{
		min-width: 160px;
	}
	.footer-nav__link{
		padding: 20px 0;
		line-height: 1;
	}
	.footer-bottom__inner{
		justify-content: space-between;
		flex-direction: row;
	}
	.footer-subnav{
		flex-direction: row;
	}
}
@media (min-width: 1400px) {
	.footer-middle{
		background: url(../img/illust-footer.png) no-repeat bottom right 45px / 609px;
	}
	.footer-flex{
		width: calc(100% - 400px);
	}
	.footer-nav{
		min-width: 195px;
	}
}

@media (any-hover: hover) {
	.footer-logo a,
	.footer-info__instagram,
	.footer-nav__link,
	.footer-subnav__link{
		transition: opacity .4s;
	}
	.footer-logo a:hover,
	.footer-info__instagram:hover,
	.footer-nav__link:hover,
	.footer-subnav__link:hover{
		opacity: .5;
	}
}