/* =========================================================
   HEADER BASE
   基本 = スマートフォン
========================================================= */

#feel-site-header.site-header {
	--header-purple: #955c9f;
	--header-light-purple: #faf7fb;
	--header-dark: #382640;
	--header-text: #4f4852;
	--header-subtext: #746e77;
	--header-border: #e1d5e5;
	--header-blue: #5a80e6;

	position: fixed;
	top: 0;
	left: 0;

	z-index: 50;

	width: 100%;

	background: #fff;
}


#feel-site-header.site-header *,
#feel-site-header.site-header *::before,
#feel-site-header.site-header *::after {
	box-sizing: border-box;
}


#feel-site-header.site-header a {
	/* color: inherit; */
	text-decoration: none;
}


#feel-site-header.site-header button {
	font-family: inherit;
}


.site-header__inner {
	position: relative;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
}



/* =========================================================
   TOP BAR
   18px
========================================================= */

#feel-site-header::before {
	content: "";
	display: block;
	height: 5px;
	background: var(--header-purple);
    position: relative;
    z-index: 30;
}


/* =========================================================
   HEADER BAR
   52px

   TOP BAR 18px
   +
   HEADER BAR 52px
   =
   合計70px
========================================================= */

.site-header__bar {
	position: relative;
	z-index: 30;
	display: grid;
	grid-template-columns:1fr 57px 57px;
	grid-template-areas:"logo account menu";
	align-items: center;
	gap: 5px;
	height: 65px;
	min-height: 65px;
	padding: 0 8px;
	background: #fff;
	border-bottom:1px solid var(--header-border);
}



/* =========================================================
   LOGO
========================================================= */

.site-header__logo {
	grid-area: logo;
	display: block;
	width: fit-content;
}

.site-header__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 170px;
}

/* =========================================================
   LOGIN
========================================================= */

.site-header__account {
	position:relative;
	grid-area: account;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	height: 45px;
	width:57px;
	font-size: 9px;
	font-weight: bold;
	line-height: 1;
	border-radius: 10px;
}
.site-header__account.account_bt_login { color: #ffffff; background-color: var(--header-blue);}
.site-header__account.account_bt_logout { color: var(--header-blue); border:1px solid var(--header-blue);}


.site-header__login-icon {
	display: block;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}
.site-header__login-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.site-header__account.is-alert::before {
    content: "!";
    position: absolute;
    top: -7px;
    right: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e53935;
    border: 1px solid #fff;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    z-index: 2;
}

/* =========================================================
   HAMBURGER
========================================================= */

.site-header__menu-button {
	grid-area: menu;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	width: 57px;
	height: 45px;
	margin: 0;
	padding: 0;
	border: 1px solid #955c9f;
	border-radius: 10px;
	background: transparent;
	font-size: 9px;
	font-weight: bold;
	line-height: 1;
	color: #955c9f;
	cursor: pointer;
}


.site-header__hamburger {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 19px;
	padding-top: 2px;
}


.site-header__hamburger span {
	display: block;

	width: 23px;
	height: 2px;

	border-radius: 2px;

	background:	var(--header-purple);

	transition:
		transform .25s ease,
		opacity .25s ease;
}



/* ---------------------------------------------------------
   MENU OPEN
--------------------------------------------------------- */

#feel-site-header.site-header.is-menu-open
.site-header__hamburger
span:nth-child(1) {
	transform:
		translateY(6px)
		rotate(45deg);
}

#feel-site-header.site-header.is-menu-open
.site-header__hamburger
span:nth-child(2) {
	opacity: 0;
}

#feel-site-header.site-header.is-menu-open
.site-header__hamburger
span:nth-child(3) {
	transform:
		translateY(-6px)
		rotate(-45deg);
}

/* =========================================================
   DRAWER
========================================================= */

.site-header__drawer {
	position: fixed;

	top: 0;
	right: 0;
	bottom: 0;

	z-index: 20;

	display: flex;
	flex-direction: column;

	width:
		min(88vw, 390px);

	/*
		18px + 52px = 70px
	*/
	padding:
		70px
		20px
		30px;

	background: #fff;

	box-shadow:
		-8px 10px 30px
		rgb(0 0 0 / 12%);

	overflow-y: auto;

	overscroll-behavior: contain;

	visibility: hidden;

	pointer-events: none;

	transform:
		translateX(105%);

	transition:
		transform .3s ease,
		visibility .3s ease;
}


#feel-site-header.site-header.is-menu-open
.site-header__drawer {
	visibility: visible;

	pointer-events: auto;

	transform:
		translateX(0);
}



/* =========================================================
   OVERLAY
========================================================= */

.site-header__overlay {
	position: fixed;
	inset: 0;
	z-index: 10;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background:	rgb(0 0 0 / 40%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
	opacity .3s ease,
	visibility .3s ease;
}


#feel-site-header.site-header.is-menu-open
.site-header__overlay {
	opacity: 1;
	visibility: visible;

	pointer-events: auto;
}



/* =========================================================
   NAV
========================================================= */

.site-header__nav {
	order: 1;
}


.site-header__nav-list {
	display: block;

	margin: 0;
	padding: 0;

	list-style: none;
}


.site-header__nav-list
> li {
	margin: 0;
	padding: 0;

	border-bottom:
		1px solid var(--header-border);
}



/* ---------------------------------------------------------
   NAV LINK
--------------------------------------------------------- */

.site-header__nav-list
> li
> a {
	position: relative;

	display: flex;
	align-items: center;

	min-height: 54px;

	padding:
		10px
		28px
		10px
		4px;

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

	color: var(--header-dark);
}



/* 右矢印 */

.site-header__nav-list
> li
> a::after {
	content: "";

	position: absolute;

	top: 50%;
	right: 8px;

	width: 8px;
	height: 8px;

	border-top:
		1px solid var(--header-dark);

	border-right:
		1px solid var(--header-dark);

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

/* =========================================================
   FORTUNE
========================================================= */

.site-header__fortune-main {
	display: flex;

	width: 100%;
}


.site-header__fortune-main
> a {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
	min-height: 54px;
	padding:10px 12px 10px 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--header-dark);
}

/* ---------------------------------------------------------
   FORTUNE TOGGLE
--------------------------------------------------------- */

.site-header__fortune-toggle {
	position: relative;
	display: block;
	flex:0 0 52px;
	width: 52px;
	margin: 0;
	padding: 0;
	border: 0;
	border-left:1px solid var(--header-border);
	background: transparent;
	cursor: pointer;
}
.site-header__fortune-toggle span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-right:1px solid var(--header-dark);
	border-bottom:1px solid var(--header-dark);
	transform:translate(-50%, -70%) rotate(45deg);
	transition:	transform .2s ease;
}



/* =========================================================
   MEGA MENU
   SP = accordion
========================================================= */

.site-header__mega-menu {
	display: none;
	padding:18px 12px 22px;
	background:	var(--header-light-purple);
}

.site-header__fortune.is-submenu-open
.site-header__mega-menu {
	display: block;
}


.site-header__fortune.is-submenu-open
.site-header__fortune-toggle
span {
	transform:
		translate(-50%, -30%)
		rotate(225deg);
}



/* =========================================================
   MEGA SECTION
========================================================= */

.site-header__mega-section
+ .site-header__mega-section {
	margin-top: 22px;
}


.site-header__mega-title {
	margin:
		0 0 10px;

	padding-left: 9px;

	border-left:
		3px solid var(--header-purple);

	font-size: 13px;
	font-weight: 700;

	color:
		var(--header-purple);
}


.site-header__mega-list {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap:
		2px
		10px;

	margin: 0;
	padding: 0;

	list-style: none;
}


.site-header__mega-list li {
	margin: 0;
	padding: 0;

	border: 0;
}


.site-header__mega-list a {
	position: relative;

	display: block;

	padding:
		8px
		5px
		8px
		14px;

	font-size: 12px;

	color: var(--header-text);
}


.site-header__mega-list a::before {
	content: "";

	position: absolute;

	top: 50%;
	left: 2px;

	width: 5px;
	height: 5px;

	border-top:
		1px solid var(--header-purple);

	border-right:
		1px solid var(--header-purple);

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



/* =========================================================
   REGISTER
========================================================= */

.site-header__register {
	order: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	margin-top: 22px;
	padding:0 20px;
	border-radius: 999px;
	background:	var(--header-purple);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	gap: 7px;
}
/* 新規登録アイコン */

.site-header__register-icon {
	display: block;
	flex-shrink: 0;
	width: 19px;
	height: 19px;
}
.site-header__register-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}



/* =========================================================
   SUPPORT
========================================================= */

.site-header__support {
	order: 3;
	margin-top: 24px;
	padding: 20px 10px;
	text-align: center;
    background: #efefef;
}


.site-header__support-label {
	margin:
		0 0 5px;

	font-size: 12px;

	color:
		var(--header-subtext);
}


.site-header__tel {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
	font-size: 21px;
	font-weight: 700;
/*	color:var(--header-purple); */
}

.site-header__tel span {
	font-size: 11px;
	font-weight: 600;
}

.site-header__support-time {
	margin:4px 0 0;
	font-size: 11px;
	color:var(--header-subtext);
}

/* =========================================================
   KEYBOARD FOCUS
========================================================= */

#feel-site-header.site-header a:focus-visible,
#feel-site-header.site-header button:focus-visible {
	outline:	2px solid var(--header-purple);
	outline-offset: 3px;
}

/* =========================================================
   PC
   768px以上のみ上書き
========================================================= */

@media (min-width: 768px) {
	/* =====================================================
	   HEADER
	   PCではfixedにしない
	===================================================== */
#feel-site-header.site-header {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	height: auto;
}
#feel-site-header::before { height: 10px;}

	/* =====================================================
	   MAIN GRID
	===================================================== */

#feel-site-header .site-header__inner {
		display: grid;
		grid-template-columns:1fr auto auto;
		grid-template-areas:"logo support account" "nav  nav nav";
		align-items: center;
		column-gap: 20px;
		background: #fff;
        padding: 20px 0 5px;
	}
#feel-site-header .site-header__inner:has(.site-header__register) {
		grid-template-columns:1fr auto auto auto;
		grid-template-areas: "logo support account register" "nav nav nav nav";
	}


	/* =====================================================
	   WRAPPER
	   PCではレイアウト上の箱を消す
	===================================================== */

	.site-header__bar,
	.site-header__drawer {
		display: contents;
	}



	/*
		SP drawerの状態をPCで解除
	*/

	.site-header__drawer {
		visibility: visible;
		pointer-events: auto;
	}


	/* =====================================================
	   LOGO
	===================================================== */

	.site-header__logo {
		grid-area: logo;
        width: fit-content;
/*		padding:18px 20px; */
	}


	.site-header__logo img {
		max-width: 300px;
	}



	/* =====================================================
	   SUPPORT
	===================================================== */
.site-header__support {
	grid-area: support;
	margin: 0;
	padding: 0;
	border: 0;
	text-align: center;
	line-height: 22px;
	background:none;
}
	.site-header__support-label {
		margin:0 0 2px;
		font-size: 12px;
	}
	.site-header__tel {
		gap: 6px;
		font-size: 27px;
		pointer-events: none;
	}
	.site-header__tel span {
		font-size: 15px;
		font-weight: 600;
	}
	.site-header__support-time {
		margin: 0;
		font-size: 12px;
	}

	/* =====================================================
	   LOGIN
	===================================================== */

	.site-header__account {
		flex-direction: row;
		gap: 7px;
		min-width: 150px;
		height: 46px;
		padding:0 18px;
		border-radius: 999px;
		font-size: 15px;
		font-weight: 600;
		line-height: normal;
	}
	.site-header__account:hover {opacity:0.8;}

	.site-header__login-icon {
		width: 24px;
		height: 24px;
	}

	/* =====================================================
	   REGISTER
	===================================================== */

	.site-header__register {
		grid-area: register;
		min-width: 150px;
		min-height: 0;
		height: 46px;
		margin: 0;
		padding:0 24px;
		font-size: 15px;
		font-weight: 600;
	}
	.site-header__register:hover {opacity:0.8;}

	/* =====================================================
	   NAV
	===================================================== */
.site-header__nav {
	grid-area: nav;
	order: initial;
/*	border-top:1px solid var(--header-border);
	border-bottom:1px solid var(--header-border); */
	margin-top: 10px;
}
	.site-header__nav-list {
		display: grid;
		grid-template-columns:repeat(7, minmax(0, 1fr));
		width: 100%;
	}

	.site-header__nav-list
	> li {
		position: relative;
		border-bottom: 0;
        display: flex;
        min-height: 52px;
        align-items: center;
	}

	/* -----------------------------------------------------
	   区切り線
	----------------------------------------------------- */

.site-header__nav-list > li::before,
.site-header__nav-list > li:last-child::after {
		content: "";
		position: absolute;
		top: 50%;
		width: 1px;
		height: 20px;
		background:	var(--header-border);
		transform:translateY(-50%);
	}
.site-header__nav-list > li::before { left: 0;}
.site-header__nav-list > li:last-child::after { right:0;}

	/* -----------------------------------------------------
	   NAV LINK
	----------------------------------------------------- */
	.site-header__nav-list > li > a,
	.site-header__fortune-main > a {
        justify-content: center;
        width: 90%;
        min-height: 40px;
        padding: 0px;
        font-size: 15px;
        font-weight: normal;
        color: var(--header-dark);
        text-align: center;
        white-space: nowrap;
        margin: 0 auto;
        border-radius: 100px;
	}

	/* SP矢印を消す */
	.site-header__nav-list > li > a::after {
		display: none;
	}

	/* Hover */
.site-header__nav-list > li > a:hover,
.site-header__fortune-main > a:hover {
	color:var(--header-purple);
	background:	var(--header-light-purple);
}

/* SP時は表示消す */
	#feel-site-header .sp-only {
		display: none;
	}



	/* =====================================================
	   FORTUNE
	===================================================== */

	.site-header__fortune-main {
		display: block;

		width: 100%;
	}


	.site-header__fortune-toggle {
		display: none;
	}



	/* =====================================================
	   MEGA MENU
	   PC = hover
	===================================================== */

	.site-header__mega-menu {
		position: absolute;
		top: 100%;
		left: 50%;
		display: block;
		width:min(960px, calc(100vw - 40px));
		padding:28px 32px;
		border:1px solid var(--header-border);
		border-top: 0;
		border-radius:0 0 10px 10px;
		background: #fff;
		box-shadow:0 12px 30px rgb(0 0 0 / 12%);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform:translateX(-50%) translateY(8px);
		transition:	opacity .2s ease, transform .2s ease,visibility .2s ease;
		z-index: 100;
	}


	.site-header__fortune:hover
	.site-header__mega-menu,
	.site-header__fortune:focus-within
	.site-header__mega-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform:translateX(-50%) translateY(0);
	}

	/* =====================================================
	   MEGA CONTENT
	===================================================== */

	.site-header__mega-section
	+ .site-header__mega-section {
		margin-top: 26px;
	}


	.site-header__mega-title {
		margin:0 0 14px;
		padding-left: 10px;
		font-size: 15px;
		color:var(--header-dark);
	}

	.site-header__mega-list {
		grid-template-columns:repeat(5, minmax(0, 1fr));
		gap:
			2px
			18px;
	}


	.site-header__mega-list a {
		padding:
			7px
			8px
			7px
			18px;

		border-radius: 4px;

		font-size: 13px;
	}


	.site-header__mega-list a::before {
		left: 4px;
	}


	.site-header__mega-list a:hover {
		color:
			var(--header-purple);

		background:
			var(--header-light-purple);
	}



	/* =====================================================
	   SP ONLY
	===================================================== */

	.site-header__menu-button,
	.site-header__overlay {
		display: none;
	}

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

#feel-site-header.site-header *,
#feel-site-header.site-header *::before,
#feel-site-header.site-header *::after {
		transition-duration:
			.01ms !important;

		animation-duration:
			.01ms !important;

		animation-iteration-count:
			1 !important;
	}

}