@charset "UTF-8";
/* ==========================================================================
   Cross eSIM Custom Header & Footer
   Loaded at priority 100 to override SWELL parent theme styles.
   All selectors prefixed with #body_wrap for specificity boost.
   ========================================================================== */

/* --- Scroll lock --- */
html.ce-no-scroll,
body.ce-no-scroll {
	overflow: hidden;
}

/* --- Disabled link --- */
#body_wrap .is-disabled {
	opacity: 0.4;
	pointer-events: none;
	cursor: default;
}

/* --- Container --- */
#body_wrap .ce-inner1460 {
	max-width: 1460px;
	margin: 0 auto;
	padding: 0 40px;
}

/* ==========================================================================
   Base resets for custom header/footer elements
   ========================================================================== */
#body_wrap .ce-header,
#body_wrap .ce-footer,
#body_wrap .ce-foot-btn-block,
#body_wrap .ce-nav__wrap {
	font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	font-weight: 300;
	color: #182e69;
	line-height: 1.5;
	font-feature-settings: "palt";
	word-break: break-all;
	-webkit-font-smoothing: antialiased;
}

#body_wrap .ce-header *,
#body_wrap .ce-footer *,
#body_wrap .ce-foot-btn-block *,
#body_wrap .ce-nav__wrap * {
	box-sizing: border-box;
}

#body_wrap .ce-header img,
#body_wrap .ce-foot-btn-block img,
#body_wrap .ce-footer img {
	vertical-align: middle;
	pointer-events: none;
	border: 0;
}

#body_wrap .ce-header a,
#body_wrap .ce-foot-btn-block a {
	text-decoration: none;
	transition: all 0.5s ease 0s;
}

#body_wrap .ce-header a:hover {
	text-decoration: none;
	opacity: 1;
}

#body_wrap .ce-foot-btn-block a:hover {
	text-decoration: underline;
}

#body_wrap .ce-header ul,
#body_wrap .ce-footer ul,
#body_wrap .ce-foot-btn-block ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#body_wrap .ce-foot-btn-block figure {
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   Header
   ========================================================================== */
#body_wrap .ce-header {
	width: 100%;
	padding: 0 50px;
	height: 100px;
	box-sizing: border-box;
	position: relative;
	top: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #1360ea;
	z-index: 100;
	transition: all 0.5s;
}

/* --- Logo --- */
#body_wrap .ce-header__logo {
	line-height: 1;
}

#body_wrap .ce-header__logo a {
	transition: all 0.5s ease 0s;
	display: block;
}

#body_wrap .ce-header__logo a:hover {
	text-decoration: none;
	opacity: 0.7;
}

#body_wrap .ce-header__logo img {
	width: 247px;
	height: auto;
	transition: all 0.5s;
}

/* --- Right area (PC) --- */
#body_wrap .ce-header__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

/* --- PC Navigation --- */
#body_wrap .ce-header__right nav {
	display: flex;
	align-items: center;
	margin: 30px 0 0;
}

#body_wrap .ce-header__right nav > ul {
	margin-top: 2px;
}

#body_wrap .ce-header__right nav > ul > li {
	margin-right: 30px;
	display: inline-block;
}

#body_wrap .ce-header__right nav > ul > li:last-child {
	margin-right: 0;
}

#body_wrap .ce-header__right nav > ul > li > a,
#body_wrap .ce-header__right nav > ul > li > span {
	font-size: 15px;
	font-weight: 500;
	padding: 0;
	letter-spacing: 0.1em;
	position: relative;
	display: block;
	line-height: 1.5;
	cursor: pointer;
	transition: all 0.5s;
	color: #fff;
}

#body_wrap .ce-header__right nav > ul > li > a:hover {
	text-decoration: none;
	color: #fff;
}

/* --- Light blue button (Login) --- */
#body_wrap .ce-btn-light-blue {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 160px;
	height: 40px;
	border: 1px solid #5ab3e1;
	border-radius: 5px;
	background: #5ab3e1;
	cursor: pointer;
	position: relative;
	transition: all 0.5s;
	margin: 0 0 0 30px;
	text-decoration: none;
}

#body_wrap .ce-btn-light-blue:hover {
	background: #fff;
	text-decoration: none;
}

#body_wrap .ce-btn-light-blue + .ce-btn-light-blue {
	margin-left: 20px;
}

#body_wrap .ce-btn-light-blue__icon {
	display: block;
	margin-right: 10px;
}

#body_wrap .ce-btn-light-blue__icon::before {
	content: '';
	display: block;
}

#body_wrap .ce-login-icon {
	width: 15px;
	height: 17px;
	background: url(https://cross-esim.com/images/common/icon_login_white.svg) no-repeat center/contain;
}

#body_wrap .ce-btn-light-blue:hover .ce-login-icon {
	background: url(https://cross-esim.com/images/common/icon_login_lightblue.svg) no-repeat center/contain;
}

#body_wrap .ce-btn-light-blue__txt {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: #fff;
	text-align: center;
	position: relative;
	top: 2px;
}

#body_wrap .ce-btn-light-blue:hover .ce-btn-light-blue__txt {
	color: #5ab3e1;
}

/* --- Sticky header --- */
#body_wrap .ce-header.is-scrolled {
	position: fixed;
	height: 70px;
	z-index: 100;
}

#body_wrap .ce-header.is-scrolled .ce-header__logo img {
	width: 200px;
}

#body_wrap .ce-header.is-scrolled nav {
	margin: 5px 0 0;
}

#body_wrap .ce-header.is-scrolled nav > ul > li {
	margin-right: 10px;
}

#body_wrap .ce-header.is-scrolled nav > ul > li > a,
#body_wrap .ce-header.is-scrolled nav > ul > li > span {
	font-size: 12px;
}

#body_wrap .ce-header.is-scrolled .ce-btn-light-blue {
	width: 110px;
	height: 30px;
	margin: 0 0 0 20px;
}

#body_wrap .ce-header.is-scrolled .ce-btn-light-blue__icon {
	margin-right: 7px;
}

#body_wrap .ce-header.is-scrolled .ce-btn-light-blue__txt {
	font-size: 11px;
}

/* --- PC/SP toggle --- */
#body_wrap .ce-sp {
	display: none !important;
}

#body_wrap .ce-pc {
	display: block !important;
}

/* --- Desktop <=1200px --- */
@media only screen and (max-width: 1200px) {
	#body_wrap .ce-header {
		padding: 0 20px;
	}

	#body_wrap .ce-header__logo img {
		width: 200px;
	}

	#body_wrap .ce-header__right nav {
		margin-top: 15px;
	}

	#body_wrap .ce-header__right nav > ul > li {
		margin-right: 10px;
	}

	#body_wrap .ce-header__right nav > ul > li > a,
	#body_wrap .ce-header__right nav > ul > li > span {
		font-size: 12px;
	}

	#body_wrap .ce-btn-light-blue {
		width: 110px;
		height: 30px;
		margin: 0 0 0 20px;
	}

	#body_wrap .ce-btn-light-blue__icon {
		margin-right: 7px;
	}

	#body_wrap .ce-btn-light-blue__txt {
		font-size: 11px;
		position: static;
	}
}

/* --- Desktop <=1000px --- */
@media only screen and (max-width: 1000px) {
	#body_wrap .ce-header {
		z-index: 100;
	}

	#body_wrap .ce-header__logo img {
		width: 170px;
	}

	#body_wrap .ce-header__right nav > ul {
		margin-top: 0;
	}

	#body_wrap .ce-header__right nav > ul > li {
		margin-right: 10px;
	}

	#body_wrap .ce-header__right nav > ul > li > a,
	#body_wrap .ce-header__right nav > ul > li > span {
		letter-spacing: 0;
	}

	#body_wrap .ce-btn-light-blue {
		margin: 0 0 0 10px;
	}

	#body_wrap .ce-btn-light-blue + .ce-btn-light-blue {
		margin-left: 10px;
	}

	#body_wrap .ce-header.is-scrolled .ce-header__logo img {
		width: 150px;
	}
}

/* ==========================================================================
   Mobile Header (<=768px)
   ========================================================================== */
@media only screen and (max-width: 768px) {
	#body_wrap .ce-pc {
		display: none !important;
	}

	#body_wrap .ce-sp {
		display: block !important;
	}

	#body_wrap .ce-header {
		padding: 0 20px;
		height: 65px;
		position: relative;
	}

	#body_wrap .ce-header.is-scrolled {
		position: fixed;
	}

	#body_wrap .ce-header.is-scrolled nav {
		margin: 0;
		position: fixed;
		top: 0;
		right: 0;
	}

	#body_wrap .ce-header__logo {
		margin: 0;
	}

	#body_wrap .ce-header__logo img {
		width: 148px;
	}

	#body_wrap .ce-header.is-scrolled .ce-header__logo {
		margin: 0;
	}

	#body_wrap .ce-header.is-scrolled .ce-header__logo img {
		width: 148px;
	}

	/* --- Hamburger toggle --- */
	/* position: relative にして flex flow に乗せる。
	   絶対配置だと nav.ce-sp の他の flex 子 (購入ボタン) と右端で重なる。 */
	#body_wrap #ce-toggle {
		display: block;
		width: 65px;
		height: 65px;
		position: relative;
		z-index: 101;
		background: #1360ea;
		border: none;
		padding: 0;
		cursor: pointer;
	}

	#body_wrap .ce-header.is-open #ce-toggle {
		background-color: #1360ea;
	}

	#body_wrap .ce-line1,
	#body_wrap .ce-line2,
	#body_wrap .ce-line3 {
		width: 25px;
		height: 1px;
		left: 20px;
		background-color: #fff;
		position: absolute;
		transition: all 0.5s ease-out;
	}

	#body_wrap .ce-line1 { top: 22px; }
	#body_wrap .ce-line2 { top: 32px; }
	#body_wrap .ce-line3 { top: 42px; }

	#body_wrap .ce-header.is-open .ce-line1 {
		top: 24px;
		transform: translateY(7px) rotate(45deg);
	}

	#body_wrap .ce-header.is-open .ce-line2 {
		transform: translateX(100px);
		opacity: 0;
	}

	#body_wrap .ce-header.is-open .ce-line3 {
		top: 38px;
		transform: translateY(-7px) rotate(-45deg);
	}

	#body_wrap .ce-menu-label {
		top: 32px;
		position: absolute;
		width: 100%;
		text-align: center;
		display: block;
		font-size: 9px;
	}

	/* --- Drawer navigation --- */
	#body_wrap .ce-nav__wrap {
		position: fixed;
		width: 100%;
		left: auto;
		right: 0;
		border: none;
		z-index: 100;
		top: 0;
		box-sizing: border-box;
		height: 100%;
		overflow-x: hidden;
		overflow-y: scroll;
		pointer-events: none;
		display: none;
	}

	#body_wrap .ce-nav__wrap.is-open {
		display: block;
		pointer-events: auto;
		animation: ceSlideDown 0.3s ease-out;
	}

	#body_wrap .ce-nav__wrap.is-closing {
		animation: ceSlideUp 0.3s ease-out forwards;
	}

	@keyframes ceSlideDown {
		from { max-height: 0; overflow: hidden; }
		to   { max-height: 100vh; overflow: hidden; }
	}

	@keyframes ceSlideUp {
		from { max-height: 100vh; overflow: hidden; }
		to   { max-height: 0; overflow: hidden; }
	}

	#body_wrap .ce-nav__inner {
		background-color: #1360ea;
		padding: 0 0 60px;
		position: absolute;
		top: 65px;
		width: 100%;
		pointer-events: auto;
	}

	/* Generic link rule inside drawer (matches Nuxt: .nav__inner a) */
	#body_wrap .ce-nav__inner a {
		display: block;
		letter-spacing: 0.1em;
		position: relative;
		height: auto;
	}

	#body_wrap .ce-nav__inner a:hover {
		text-decoration: none;
	}

	/* Generic ul inside drawer (applies to ALL > ul including .ce-white-btn-list) */
	#body_wrap .ce-nav__inner > ul {
		margin: 25px auto 0;
		padding: 0 40px;
		list-style: none;
	}

	#body_wrap .ce-nav__inner > ul > li {
		margin-right: 0;
		display: block;
	}

	#body_wrap .ce-nav__inner > ul > li + li {
		margin-top: 19px;
	}

	/* Nav link items (specificity 1-1-3, beats generic a at 1-1-1) */
	#body_wrap .ce-nav__inner > ul > li > a,
	#body_wrap .ce-nav__inner > ul > li > span {
		font-size: 15px;
		color: #fff;
		border-bottom: 1px solid #5ab3e1;
		padding: 0 0 8px 10px;
	}

	#body_wrap .ce-nav__inner > ul > li > a::after {
		content: '';
		display: block;
		width: 6px;
		height: 6px;
		border-top: 1px solid #fff;
		border-right: 1px solid #fff;
		transform: rotate(45deg);
		position: absolute;
		top: 9px;
		right: 10px;
		transition: all 0.5s ease 0s;
	}

	/* Drawer login button area */
	#body_wrap .ce-btn-light-blue-wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
		margin: 0 auto;
		padding: 0 40px;
	}

	#body_wrap .ce-btn-light-blue-wrap .ce-btn-light-blue {
		display: flex;
		width: calc(50% - 5px);
		height: 35px;
		margin: 0;
	}

	#body_wrap .ce-btn-light-blue-wrap .ce-btn-light-blue .ce-btn-light-blue__txt {
		font-size: 12.1px;
	}

	#body_wrap .ce-btn-light-blue-wrap .ce-btn-light-blue:hover {
		background: #5ab3e1;
	}

	#body_wrap .ce-btn-light-blue-wrap .ce-btn-light-blue:hover .ce-btn-light-blue__txt {
		color: #fff;
	}

	#body_wrap .ce-btn-light-blue-wrap .ce-login-icon {
		width: 13px;
		height: 14.5px;
	}

	#body_wrap .ce-btn-light-blue-wrap .ce-btn-light-blue:hover .ce-login-icon {
		background: url(https://cross-esim.com/images/common/icon_login_white.svg) no-repeat center / contain;
	}

	/* White card list — overrides generic > ul (specificity 1-2-1 beats 1-1-1) */
	#body_wrap .ce-nav__inner > .ce-white-btn-list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 30px -20px 0;
	}

	#body_wrap .ce-nav__inner > .ce-white-btn-list > li {
		width: 48%;
		background: #fff;
		border-radius: 10px;
		overflow: hidden;
	}

	#body_wrap .ce-nav__inner > .ce-white-btn-list > li + li {
		margin-top: 0;
	}

	#body_wrap .ce-nav__inner > .ce-white-btn-list > li:nth-child(n+3) {
		margin-top: 30px;
	}

	/* White card link — overrides generic a and > ul > li > a (specificity 1-3-2) */
	#body_wrap .ce-nav__inner > .ce-white-btn-list > li > .ce-white-btn {
		padding: 15px 0 14px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		border: none;
		text-decoration: none;
		color: inherit;
		border-bottom: none;
		font-size: inherit;
	}

	/* Remove arrow pseudo-element inherited from generic a::after */
	#body_wrap .ce-nav__inner > .ce-white-btn-list > li > .ce-white-btn::after {
		display: none;
	}

	#body_wrap .ce-white-btn__icon {
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		margin: 0 auto;
		background: #5ab3e1;
	}

	#body_wrap .ce-white-btn__icon img {
		width: 26px;
		height: auto;
	}

	#body_wrap .ce-white-btn__tit {
		font-size: 12px;
		line-height: 1.4;
		font-weight: 500;
		letter-spacing: 0.1em;
		text-align: center;
		color: #182e69;
		display: block;
		margin: 6px auto 0;
	}

	#body_wrap .ce-white-btn__desc {
		font-size: 8px;
		line-height: 1.4;
		font-weight: 500;
		letter-spacing: 0.1em;
		text-align: center;
		color: #182e69;
		display: block;
		margin: 6px auto 0;
	}

	#body_wrap .ce-white-btn__link-txt {
		font-size: 10px;
		line-height: 1.4;
		font-weight: 500;
		letter-spacing: 0.1em;
		text-align: center;
		color: #4a79f7;
		display: table;
		margin: 5px auto 0;
		position: relative;
		padding-left: 9px;
	}

	#body_wrap .ce-white-btn__link-txt::before {
		content: '';
		display: block;
		width: 3px;
		height: 3px;
		border-top: 1px solid #4a79f7;
		border-right: 1px solid #4a79f7;
		transform: rotate(45deg);
		position: absolute;
		top: 5px;
		left: 0;
		transition: all 0.5s ease 0s;
	}

	#body_wrap .ce-white-btn__big-txt {
		font-family: "din-2014-narrow", sans-serif;
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: 0;
		text-align: center;
		color: #4a79f7;
		display: block;
		margin: 3px auto 0;
	}

	#body_wrap .ce-white-btn__big-txt.ce-tel-txt {
		font-size: 20px;
		transform: scale(1.2, 1);
	}

	/* --- Nav background overlay --- */
	.ce-nav__bg {
		background: rgba(0, 0, 0, 0.7);
		opacity: 0;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99;
		pointer-events: none;
		transition: opacity 0.3s ease;
	}

	.ce-nav__bg.is-visible {
		opacity: 0.9;
		pointer-events: auto;
	}

	#body_wrap .ce-header a:hover {
		text-decoration: none;
	}
}

/* Desktop: hide nav__wrap and bg */
@media only screen and (min-width: 769px) {
	#body_wrap .ce-nav__wrap {
		display: none !important;
	}

	.ce-nav__bg {
		display: none !important;
	}
}

/* ==========================================================================
   Footer Contact Block
   ========================================================================== */
#body_wrap .ce-foot-btn-block {
	padding: 120px 0;
}

#body_wrap .ce-foot-btn-block__lead {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.4;
	color: #387BFE;
	text-align: center;
	margin-bottom: 50px;
}

#body_wrap .ce-foot-btn-block__lead-logo {
	height: 1.4em;
	width: auto;
	vertical-align: -0.25em;
	margin-right: 0.1em;
}

#body_wrap .ce-foot-btn-block__list {
	display: flex;
	justify-content: space-between;
	list-style: none;
	padding: 0;
	margin: 0;
}

#body_wrap .ce-foot-btn-block__list > li {
	width: 21.75%;
	border: 1px solid #dce7ea;
	border-radius: 20px;
	padding: 30px 10px 28px;
}

#body_wrap .ce-foot-btn-block__list .ce-img-box {
	width: 80px;
	margin: 0 auto;
}

#body_wrap .ce-foot-btn-block__list .ce-img-box img {
	width: 100%;
	height: auto;
}

#body_wrap .ce-foot-btn-block__list-title {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-align: center;
	color: #182e69;
	margin-top: 16px;
}

#body_wrap .ce-foot-btn-block__list-desc {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-align: center;
	color: #182e69;
	margin-top: 16px;
}

#body_wrap .ce-foot-btn-block__list-link {
	font-size: 16.3px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-align: center;
	display: table;
	margin: 16px auto 0;
	color: #4a79f7;
	position: relative;
	padding-left: 20px;
}

#body_wrap .ce-foot-btn-block__list-link-txt {
	color: #4a79f7;
}

#body_wrap .ce-foot-btn-block__list-link::before {
	content: '';
	display: block;
	width: 9px;
	height: 9px;
	border-top: 1px solid #4a79f7;
	border-right: 1px solid #4a79f7;
	transform: rotate(45deg);
	position: absolute;
	top: 7px;
	left: 0;
	transition: all 0.5s ease 0s;
}

#body_wrap .ce-foot-btn-block__list-tel {
	font-family: "din-2014-narrow", sans-serif;
	font-weight: 500;
	font-size: 40px;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	color: #4a79f7;
	display: block;
	margin: 8px auto 0;
	transform: scale(1.2, 1);
	white-space: nowrap;
	pointer-events: none;
	text-decoration: none;
}

/* --- Footer contact: <=1300px --- */
@media only screen and (max-width: 1300px) {
	#body_wrap .ce-foot-btn-block__list-title {
		font-size: 20px;
	}

	#body_wrap .ce-foot-btn-block__list-tel {
		font-size: 30px;
	}
}

/* --- Footer contact: <=1100px --- */
@media only screen and (max-width: 1100px) {
	#body_wrap .ce-foot-btn-block__list-tel {
		font-size: 25px;
		transform: scale(1, 1);
	}
}

/* --- Footer contact: tablet --- */
@media only screen and (max-width: 1024px) {
	#body_wrap .ce-foot-btn-block {
		padding: 80px 0;
	}

	#body_wrap .ce-foot-btn-block__lead {
		font-size: 20px;
		margin-bottom: 40px;
	}

	#body_wrap .ce-foot-btn-block__list {
		flex-wrap: wrap;
		justify-content: center;
		gap: 30px;
	}

	#body_wrap .ce-foot-btn-block__list > li {
		width: 45%;
	}

	#body_wrap .ce-foot-btn-block__list-title {
		font-size: 18px;
	}

	#body_wrap .ce-foot-btn-block__list-tel {
		font-size: 28px;
		transform: scale(1.1, 1);
	}
}

/* --- Footer contact: mobile --- */
@media only screen and (max-width: 768px) {
	#body_wrap .ce-foot-btn-block {
		padding: calc((120 / 750) * 100vw) 0;
	}

	#body_wrap .ce-foot-btn-block__lead {
		font-size: calc((28 / 750) * 100vw);
		margin-bottom: calc((40 / 750) * 100vw);
	}

	#body_wrap .ce-foot-btn-block__list {
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 0;
	}

	#body_wrap .ce-foot-btn-block__list > li {
		width: 48%;
		border-radius: calc((30 / 750) * 100vw);
		padding: calc((30 / 750) * 100vw) calc((10 / 750) * 100vw);
	}

	#body_wrap .ce-foot-btn-block__list > li:nth-child(n+3) {
		margin-top: calc((60 / 750) * 100vw);
	}

	#body_wrap .ce-foot-btn-block__list .ce-img-box {
		width: calc((80 / 750) * 100vw);
	}

	#body_wrap .ce-foot-btn-block__list-title {
		font-size: calc((24 / 750) * 100vw);
		margin-top: calc((16 / 750) * 100vw);
		letter-spacing: 0.05em;
	}

	#body_wrap .ce-foot-btn-block__list-desc {
		font-size: calc((16 / 750) * 100vw);
		margin-top: calc((12 / 750) * 100vw);
		letter-spacing: 0;
	}

	#body_wrap .ce-foot-btn-block__list-link {
		font-size: calc((20 / 750) * 100vw);
		padding-left: calc((20 / 750) * 100vw);
		margin-top: calc((10 / 750) * 100vw);
	}

	#body_wrap .ce-foot-btn-block__list-link::before {
		width: calc((5 / 750) * 100vw);
		height: calc((5 / 750) * 100vw);
		top: calc((11 / 750) * 100vw);
	}

	#body_wrap .ce-foot-btn-block__list-tel {
		font-size: calc((40 / 750) * 100vw);
		transform: scale(1.2, 1);
		pointer-events: inherit;
	}

	#body_wrap .ce-inner1460 {
		padding: 0 calc((40 / 750) * 100vw);
	}
}

/* ==========================================================================
   Footer Navigation
   ========================================================================== */
#body_wrap .ce-footer {
	position: relative;
	padding: 55px 0 47px;
	background: rgb(32, 117, 247);
}

#body_wrap .ce-footer a {
	text-decoration: none;
	color: #fff;
}

#body_wrap .ce-footer a:hover {
	text-decoration: none;
	color: #fff;
}

#body_wrap .ce-copyright {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	letter-spacing: 0.07em;
	color: #fff;
	margin-top: 90px;
}

/* --- Footer nav grid (desktop) --- */
#body_wrap .ce-footer-nav {
	margin: 0 auto;
	display: grid;
	grid-template-columns: 21fr 22fr 21fr 24fr 12fr;
	column-gap: 2%;
	white-space: nowrap;
	list-style: none;
	padding: 0;
}

#body_wrap .ce-footer-nav > ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* 2nd column sub-list side-by-side (desktop) */
#body_wrap .ce-footer-nav > ul:nth-child(2) > li {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#body_wrap .ce-footer-nav > ul:nth-child(2) > li > a {
	width: 100%;
	box-sizing: border-box;
}

#body_wrap .ce-footer-nav > ul:nth-child(2) > li > ul:nth-child(2) {
	width: 47%;
	margin-right: 1%;
}

#body_wrap .ce-footer-nav > ul:nth-child(2) > li > ul:nth-child(3) {
	width: 52%;
	margin-right: 0;
}

#body_wrap .ce-footer-nav > ul > li + li {
	margin-top: 16px;
}

#body_wrap .ce-footer-nav > ul > li > a,
#body_wrap .ce-footer-nav > ul > li > span {
	display: block;
}

#body_wrap .ce-footer-nav > ul > li > a:hover {
	color: #fff;
}

#body_wrap .ce-footer-nav .ce-link-txt {
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 0.1em;
	display: block;
	color: #fff;
}

#body_wrap .ce-footer-nav > ul > li > ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#body_wrap .ce-footer-nav > ul > li > ul > li {
	margin-top: 16px;
}

#body_wrap .ce-footer-nav > ul > li > ul > li > a:hover {
	color: #fff;
}

#body_wrap .ce-footer-nav > ul > li > ul > li .ce-link-txt {
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.1em;
	line-height: 1.6;
	display: block;
	text-indent: -0.5em;
	padding-left: 0.5em;
	color: #fff;
}

/* --- Footer nav: <=1200px --- */
@media only screen and (max-width: 1200px) {
	#body_wrap .ce-footer-nav {
		white-space: normal;
	}
}

/* --- Footer nav: tablet (3+2 columns) --- */
@media only screen and (max-width: 1024px) {
	#body_wrap .ce-footer {
		padding: 40px 0;
	}

	#body_wrap .ce-copyright {
		margin-top: 60px;
		font-size: 14px;
	}

	#body_wrap .ce-footer-nav {
		grid-template-columns: repeat(6, 1fr);
		column-gap: 0;
		row-gap: 30px;
	}

	#body_wrap .ce-footer-nav > ul {
		padding-left: 20%;
	}

	#body_wrap .ce-footer-nav > ul:nth-child(1) { grid-column: 1 / span 2; }
	#body_wrap .ce-footer-nav > ul:nth-child(2) { grid-column: 3 / span 2; }
	#body_wrap .ce-footer-nav > ul:nth-child(3) { grid-column: 5 / span 2; }
	#body_wrap .ce-footer-nav > ul:nth-child(4) { grid-column: 1 / span 2; }
	#body_wrap .ce-footer-nav > ul:nth-child(5) { grid-column: 3 / span 2; }

	/* Reset 2nd column side-by-side */
	#body_wrap .ce-footer-nav > ul:nth-child(2) > li {
		display: block;
	}

	#body_wrap .ce-footer-nav > ul:nth-child(2) > li > ul:nth-child(2),
	#body_wrap .ce-footer-nav > ul:nth-child(2) > li > ul:nth-child(3) {
		width: auto;
		margin-right: 0;
	}

	#body_wrap .ce-footer-nav .ce-link-txt {
		font-size: 14px;
	}

	#body_wrap .ce-footer-nav > ul > li > ul > li .ce-link-txt {
		font-size: 12px;
	}
}

/* --- Footer nav: mobile (2 columns) --- */
@media only screen and (max-width: 768px) {
	#body_wrap .ce-footer {
		padding: calc((56 / 750) * 100vw) 0 calc((66 / 750) * 100vw);
	}

	#body_wrap .ce-footer .ce-inner1460 {
		padding: 0 calc((80 / 750) * 100vw);
	}

	#body_wrap .ce-copyright {
		font-size: calc((20 / 750) * 100vw);
		margin-top: calc((102 / 750) * 100vw);
	}

	#body_wrap .ce-footer-nav {
		grid-template-columns: 1fr 1fr;
		column-gap: 3vw;
		row-gap: 0;
	}

	#body_wrap .ce-footer-nav > ul {
		padding-left: 0;
	}

	#body_wrap .ce-footer-nav > ul:nth-child(1) { grid-column: 1; grid-row: 1; }
	#body_wrap .ce-footer-nav > ul:nth-child(2) { grid-column: 1; grid-row: 2; margin-top: calc((50 / 750) * 100vw); }
	#body_wrap .ce-footer-nav > ul:nth-child(3) { grid-column: 1; grid-row: 3; margin-top: calc((50 / 750) * 100vw); }
	#body_wrap .ce-footer-nav > ul:nth-child(4) { grid-column: 2; grid-row: 1; }
	#body_wrap .ce-footer-nav > ul:nth-child(5) { grid-column: 2; grid-row: 2; margin-top: calc((50 / 750) * 100vw); }

	#body_wrap .ce-footer-nav > ul > li + li {
		margin-top: calc((12 / 750) * 100vw);
	}

	#body_wrap .ce-footer-nav .ce-link-txt {
		font-size: calc((24 / 750) * 100vw);
	}

	#body_wrap .ce-footer-nav > ul > li > ul > li .ce-link-txt {
		font-size: calc((22 / 750) * 100vw);
		line-height: 0.5;
	}
}

/* ==========================================================================
   Page Top Button
   ========================================================================== */
#body_wrap .ce-pagetop {
	position: fixed;
	width: 71px;
	right: 50px;
	bottom: 50px;
	text-align: right;
	z-index: 99;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

#body_wrap .ce-pagetop img {
	width: 100%;
	height: auto;
}

#body_wrap .ce-pagetop.is-visible {
	opacity: 1;
	pointer-events: auto;
}

#body_wrap .ce-pagetop.is-absolute {
	position: absolute;
	bottom: 100%;
}

@media only screen and (max-width: 768px) {
	#body_wrap .ce-pagetop {
		width: 35px;
		height: 34px;
		right: 0;
		bottom: 20px !important;
	}

	#body_wrap .ce-pagetop.is-absolute {
		bottom: 100% !important;
	}
}

/* ==========================================================================
   Breadcrumb — Nuxt Breadcrumb.vue design
   ========================================================================== */
.ce-breadcrumb {
	margin: 0 auto;
	padding: 8px 0;
	position: relative;
}

.ce-inner1180 {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 4vw;
}

.ce-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}

.ce-breadcrumb__item {
	display: flex;
	align-items: center;
	font-size: 12px;
	letter-spacing: 0.05em;
	color: #999;
}

.ce-breadcrumb__item::before {
	content: '>';
	margin: 0 8px;
	color: #ccc;
}

.ce-breadcrumb__item:first-child::before {
	display: none;
}

.ce-breadcrumb__link {
	color: #999;
	text-decoration: none;
	transition: color 0.3s;
}

.ce-breadcrumb__link:hover {
	color: #4a79f7;
	text-decoration: underline;
}

.ce-breadcrumb__current {
	color: #182e69;
}

@media (min-width: 960px) {
	.ce-inner1180 {
		padding: 0 32px;
	}
}

@media (min-width: 1200px) {
	.ce-inner1180 {
		padding: 0 48px;
	}
}

/* ==========================================================================
   Purchase button (CTA) — mirrors Nuxt .btn-purchase
   ========================================================================== */
#body_wrap .ce-btn-purchase {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 8px 20px;
	background-color: #3ece09;
	color: #fff;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0px 0px 15px -10px #20488e;
	margin-left: 16px;
	text-decoration: none;
	transition: all 0.3s ease;
}

#body_wrap .ce-btn-purchase:hover {
	opacity: 0.75;
	color: #fff;
	text-decoration: none;
}

@media only screen and (max-width: 768px) {
	/* .ce-sp ユーティリティ (line 404) の `display: block !important` を打ち消す。 */
	#body_wrap .ce-header nav.ce-sp {
		display: flex !important;
		align-items: center;
		justify-content: flex-end;
		gap: 10px;
	}

	#body_wrap .ce-header nav.ce-sp .ce-btn-purchase {
		display: inline-block;
		padding: 8px 16px;
		font-size: 13px;
		margin-left: 0;
	}
}
