@charset "UTF-8";
/* ============================================================
 * 葬儀社側（invite/）共通レイアウト：画面幅ごとの調整
 *  スマートフォンは head の ViewportExtra により表示幅が 480px に固定されるため、
 *  スマートフォン向けの指定は max-width: 560px にまとめます。
 * ============================================================ */

/* メニューはPC・スマートフォンとも右上のハンバーガー（slicknav）にする */
@media screen {

	/* 帯：slicknav が body 直下に作る .slicknav_menu を白い帯にし、ロゴ・利用者名を重ねる */
	#header .slick-menu {
		position: static;
		display: block;
		height: 0;
		padding: 0;
		background: transparent;
		border: 0;
	}
	.header_fixed,
	.header_fixed.is-proxy-login {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		display: flex;
		align-items: center;
		gap: 10px;
		width: calc(100% - 76px);
		height: var(--iv-header-height);
		padding: 0 0 0 var(--iv-space-2);
	}
	.header_user {
		order: 5;
		margin-left: auto;
		font-size: 12px;
		line-height: 1.35;
	}
	.header_user p {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.s-navi {
		display: none;
	}

	.slicknav_menu {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		display: block;
		width: 100%;
		padding: 0;
		background: var(--iv-surface);
		border-bottom: 1px solid var(--iv-border-soft);
		font-size: 16px;
	}
	.slicknav_menu .slicknav_btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		float: right;
		width: 64px;
		height: var(--iv-header-height);
		margin: 0;
		padding: 0;
		border-radius: 0;
		background: transparent;
		text-shadow: none;
	}
	.slicknav_menu .slicknav_icon {
		order: 1;
		float: none;
		width: 22px;
		height: 16px;
		margin: 0;
	}
	.slicknav_menu .slicknav_icon:before {
		width: 22px;
		height: 16px;
	}
	.slicknav_menu .slicknav_icon-bar {
		width: 22px;
		height: 2px;
		border-radius: 2px;
		background-color: var(--iv-text);
		box-shadow: none;
	}
	.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {
		margin-top: 5px;
	}
	.slicknav_menu .slicknav_menutxt {
		order: 2;
		float: none;
		color: var(--iv-text-muted);
		font-family: var(--iv-sans);
		font-size: 10px;
		font-weight: 500;
		letter-spacing: 0.1em;
		line-height: 1;
		text-shadow: none;
	}
	/* 開いたメニュー */
	.slicknav_nav {
		clear: both;
		max-height: calc(100vh - var(--iv-header-height));
		margin: 0;
		padding: 8px 12px 16px;
		overflow-y: auto;
		color: var(--iv-text);
		background: var(--iv-surface);
		border-top: 1px solid var(--iv-border-soft);
		font-size: 15px;
	}
	.slicknav_nav li {
		margin: 0;
		padding: 0;
	}
	.slicknav_nav li.pdt20 {
		padding-bottom: 0;
	}
	.slicknav_nav a,
	.slicknav_nav .slicknav_row {
		display: block;
		margin: 0 !important;
		padding: 13px 10px;
		border-bottom: 1px solid var(--iv-border-soft);
		border-radius: 0;
		color: var(--iv-text);
		text-decoration: none;
		-webkit-text-size-adjust: 100%;
	}
	.slicknav_nav a:hover,
	.slicknav_nav .slicknav_row:hover {
		border-radius: 0;
		background: var(--iv-surface-soft);
		color: var(--iv-main-strong);
	}
	.slicknav_nav a.hr_more,
	.slicknav_nav a.hr_more2 {
		border-top: 0;
		border-bottom: 1px solid var(--iv-border-soft);
	}
	.slicknav_nav .s-navi-menu {
		margin: 12px 0 0;
		padding: 0;
		background: transparent;
		border-radius: 0;
	}
	.slicknav_nav .s-navi-menu a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		margin: 0 !important;
		padding: 8px 20px;
		border: 1px solid var(--iv-input-border);
		border-radius: var(--iv-radius-pill);
		color: var(--iv-text-muted);
		font-size: 14px;
	}
	.slicknav_nav .s-navi-menu a:hover {
		background: var(--iv-surface);
		border-color: var(--iv-main);
	}
	.slicknav_nav .s-navi-title {
		padding: 10px;
		color: var(--iv-text-muted);
		font-size: 13px;
	}
	.slicknav_nav li.edit a {
		padding-left: 24px;
	}
	.slicknav_nav li.mb_navi {
		display: none;
	}
	.slicknav_nav .s-navi-flex {
		display: flex;
		gap: 10px;
		padding: 8px 0;
	}
	.slicknav_nav .s-navi-flex .menu__item a {
		border: 0;
		padding: 12px 8px;
	}
}

/* PC幅：開いたメニューは画面幅いっぱいにせず、ハンバーガーの下に右寄せのパネルで出す */
@media screen and (min-width: 561px) {
	#header .slick-menu {
		padding: 0;
	}
	.header_fixed,
	.header_fixed.is-proxy-login {
		width: calc(100% - 88px);
		padding-left: var(--iv-space-3);
	}
	.header-title img {
		height: 26px;
	}
	.slicknav_menu .slicknav_btn {
		width: 72px;
	}
	.slicknav_nav {
		position: absolute;
		top: calc(var(--iv-header-height) + 8px);
		right: var(--iv-space-2);
		width: 320px;
		max-height: calc(100vh - var(--iv-header-height) - 24px);
		padding: 8px 12px 16px;
		border: 1px solid var(--iv-border-soft);
		border-radius: var(--iv-radius-lg);
		box-shadow: var(--iv-shadow-hover);
	}
	.slicknav_nav li:last-child a,
	.slicknav_nav li:last-child .slicknav_row {
		border-bottom: 0;
	}
}

/* スマートフォン */
@media screen and (max-width: 560px) {
	/* 代理ログイン中 */
	.header_fixed.is-proxy-login {
		gap: 6px;
	}
	.header_fixed.is-proxy-login .header-title img {
		height: 20px;
	}
	.proxy-login-label {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		padding: 4px 8px;
		border-radius: 8px;
		font-size: 10px;
	}
	.proxy-login-label span {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.proxy-login-end {
		min-height: 28px;
		padding: 0 10px;
		font-size: 10px;
	}
	.proxy-login-end__sub {
		display: none;
	}
	.header_fixed.is-proxy-login .header_user {
		max-width: 8em;
	}
	:root {
		--iv-header-height: 60px;
	}
	body {
		font-size: 15px;
	}
	#main-inner {
		padding: var(--iv-space-3) var(--iv-space-2) var(--iv-space-5);
	}
	.header-title img {
		height: 24px;
	}
	.header_user {
		max-width: 11em;
		font-size: 11px;
	}
	/* 見出しの左右線は幅が足りないため短くする */
	.title_form:before,
	.title__url .h1:before,
	.title__reform .t:before,
	.invitation__title__line .invitation__title:before,
	.title_template:before {
		left: -28px;
		width: 18px;
	}
	.title_form:after,
	.title__url .h1:after,
	.title__reform .t:after,
	.invitation__title__line .invitation__title:after,
	.title_template:after {
		right: -28px;
		width: 18px;
	}
	.title_form,
	.title__url .h1,
	.title__reform .t,
	.invitation__title__line .invitation__title,
	.title_template {
		max-width: calc(100% - 64px);
		font-size: 20px;
		line-height: 1.45;
	}
	.info {
		text-align: left;
	}

	/* ボタンは幅いっぱいに */
	.b-btn {
		width: 100%;
	}
	.btn-return a,
	.m-btn {
		width: 100%;
		max-width: 320px;
	}
	.br560 {
		display: block;
	}

	/* フッター */
	#footer-inner,
	#footer-inner .clearfix {
		flex-direction: column;
		gap: var(--iv-space-2);
	}
	#footer-inner .fl,
	#footer-inner .fr {
		width: 100%;
		max-width: none;
	}
	#footer-inner .fr {
		padding-top: var(--iv-space-2);
		border-top: 1px solid var(--iv-border-soft);
	}
	#footer-inner .fr .free .tel {
		font-size: 20px;
	}
	#footer-inner .mail .addr {
		font-size: 15px;
	}

	/* モーダル */
	.iziModal .in {
		padding: 16px;
	}

	/* 選択中のお知らせカード */
	#container_gift .in .img {
		flex-basis: 80px;
		width: 80px;
	}
}