@charset "utf-8";

/* ----------------------------------------------
    reset
---------------------------------------------- */
*, ::before, ::after {
	box-sizing: border-box;
	border-width: 0;
	border-style: solid;
}
html {
	/*line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;*/
}
body {
	margin: 0;
}
main {
	display: block;
}
p, table, blockquote, address, pre, iframe, form, figure, dl {
	margin: 0;
} 
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}
ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
dd {
	margin-left: 0;
}
hr {
	height: 0;
	margin: 0;
	color: inherit;
	border-top-width: 1px;
	box-sizing: content-box;
	clear: both;
	overflow: visible;
}
pre {
	font-size: inherit;
	font-family: monospace, monospace;
}
address {
	font-style: inherit;
}
a {
	color: inherit;
	word-break: break-all;
	text-decoration: none;
	background-color: transparent;
}
abbr[title] {
	text-decoration: underline dotted;
}
b, strong {
	font-weight: bolder;
}
code, kbd, samp {
	font-size: inherit;
	font-family: monospace, monospace;
}
small {
	font-size: 80%;
}
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sub {
	bottom: -0.25em;
}
sup {
	top: -0.5em;
}
svg, img, embed, object, iframe {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
button, input, optgroup, select, textarea {
	margin: 0;
	padding: 0;
	color: inherit;
	background: transparent;
	border-radius: 0;
	font: inherit;
	text-align: inherit;
	text-transform: inherit;
	vertical-align: middle;
	appearance: none;
	-webkit-appearance: none;
}
button, [type="button"], [type="reset"], [type="submit"] {
	cursor: pointer;
}
button:disabled, [type="button"]:disabled, [type="reset"]:disabled, [type="submit"]:disabled {
	cursor: default;
}
:-moz-focusring {
	outline: auto;
}
select:disabled {
	opacity: inherit;
}
option {
	padding: 0;
}
fieldset {
	margin: 0;
	padding: 0;
	min-width: 0;
}
legend {
	padding: 0;
}
progress {
	vertical-align: baseline;
}
textarea {
	overflow: auto;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}
[type="search"] {
	outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
::-webkit-file-upload-button {
	font: inherit;
	-webkit-appearance: button;
}
[type="number"] {
	/*-moz-appearance: textfield;*/
}
label[for] {
	cursor: pointer;
}
details {
	display: block;
}
summary {
	display: list-item;
}
[contenteditable]:focus {
	outline: auto;
}
table {
	border-color: inherit;
	border-collapse: collapse;
}
caption {
	text-align: left;
}
td, th {
	padding: 0;
	font-weight: 500;
    text-align: left;
	vertical-align: top;
}
i {
    display: flex;
}

/* ----------------------------------------------
    base
---------------------------------------------- */
:root {
	--color-Black:  #212121;
	--color-GrayP:  #fafafa;
	--color-GrayL:  #f5f5f5;
	--color-GrayS:  #eeeeee;
	--color-GrayM:  #bdbdbd;
	--color-GrayD:  #9e9e9e;
	--color-GrayB:  #616161;
	--color-Red:    #c73e3e;
	--color-Blue:   #0065aa;
	--color-Green:  #28a745;
	--color-Gold:   #d4ac5a;
	--color-Orange: #ec9700;
	--font-Sans:    "Noto Sans JP", sans-serif;
}
html {
	font-size: 62.5%;
    scroll-behavior: smooth; 
    touch-action: manipulation;
}
body {
	color: var(--color-Black);
	font: 400 1.5rem / 1.75 var(--font-Sans);
	font-feature-settings: "path";
}
#wrap {
	width: 100%;
    max-width: 1920px;
    min-width: 1200px;
    margin: 0 auto;
	padding: 60px 0 0;
}
@media (hover: hover) {
	a {
		transition: opacity ease .3s;
	}
	a:hover {
		opacity: .6;
	}
}
@media screen and (max-width: 768px) {
	body {
		font-size: 1.4rem;
	}
	#wrap {
	    min-width: 100%;
	}
}
/* ------------------------------------------- */
.w-90 {
	/*width: 90%;*/
	padding: 0 2em;
}
.w-100 {
	width: 100%;
}
.max-w-280 {
	max-width: 280px;
}
.max-w-500 {
    max-width: 500px;
}
.max-w-1160 {
	max-width: 1160px;
}
.max-w-1600 {
	max-width: 1600px;
}
.mx-auto {
	margin-left: auto;
	margin-right: auto;
}
.mb-1 {
	margin-bottom: 1em;
}
.mb-2 {
	margin-bottom: 2em;
}
.mb-3 {
	margin-bottom: 3em;
}
.mb-4 {
	margin-bottom: 4em;
}
.pt-2 {
	padding-top: 2em;
}
.pb-2 {
	padding-bottom: 2em;
}
.pt-4 {
	padding-top: 4em;
}
.pb-4 {
	padding-bottom: 4em;
}
.text-12 {
	font-size: 1.2rem;
}
.text-14 {
	font-size: 1.4rem;
}
.text-18 {
	font-size: 1.8rem;
}
.text-20 {
	font-size: 2.0rem;
	line-height: 1.6;
}
.text-22 {
	font-size: 2.2rem;
	line-height: 1.5;
}
.text-24 {
	font-size: 2.4rem;
	line-height: 1.4;
}
.text-28 {
	font-size: 2.8rem;
}
.text-32 {
	font-size: 3.2rem;
}
.text-40 {
	font-size: 4.0rem;
	line-height: 1.3;
}
.text-48 {
	font-size: 4.8rem;
	line-height: 1.2;
}
.text-white {
	color: #fff;
}
.text-graym {
	color: var(--color-GrayM);
}
.text-grayd {
	color: var(--color-GrayD);
}
.text-grayb {
	color: var(--color-GrayB);
}
.text-black {
	color: var(--color-Black);
}
.text-red {
	color: var(--color-Red);
}
.text-blue {
	color: var(--color-Blue);
}
.text-green {
	color: var(--color-Green);
}
.text-gold {
	color: var(--color-Gold);
}
.back-white {
	background: #fff;
}
.back-grayp {
	background: var(--color-GrayP);
}
.back-grayl {
	background: var(--color-GrayL);
}
.back-grays {
	background: var(--color-GrayS);
}
.back-graym {
	background: var(--color-GrayM);
}
.back-grayd {
	background: var(--color-GrayD);
}
.back-black {
	background: var(--color-Black);
}
.back-gold {
	background: var(--color-Gold);
}
.back-red {
	background: var(--color-Red);
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}
.fw-700 {
    font-weight: 700;
}
.radius-sm {
	border-radius: .3em;
}
.radius-md {
	border-radius: .5em;
}
.radius-lg {
	border-radius: 1em;
}
.pos-relative {
	position: relative;
}
.z-1 {
	z-index: 1;
}
.shadow {
    box-shadow: 0 .1em .4em rgb(0 0 0 / 5%);
}
.pagelink {
    margin-top: -60px;
    padding-top: 60px;
    display: block;
    pointer-events: none;
}
@media screen and (max-width: 768px) {
	.w-90 {
		padding-left: 5%;
		padding-right: 5%;
	}
	.text-10-sm {
		font-size: 1.0rem;
	}
	.text-12-sm {
		font-size: 1.2rem;
	}
	.text-14-sm {
		font-size: 1.4rem;
	}
	.text-16-sm {
		font-size: 1.6rem;
	}
	.text-18-sm {
		font-size: 1.8rem;
	}
	.text-20-sm {
		font-size: 2.0rem;
		line-height: 1.6;
	}
	.text-30-sm {
		font-size: 3.0rem;
		line-height: 1.4;
	}
}
/* ------------------------------------------- */
@media screen and (min-width: 769px) {
	.desk-hidden {
		display: none !important;
	}
}
@media screen and (max-width: 768px) {
	.mobile-hidden {
		display: none !important;
	}
}
/* ------------------------------------------- */
.title01 {
    display: flex;
    gap: .5em 1em;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
}
.title01 .sup {
    display: flex;
    gap: .5em;
    align-items: baseline;
}
.title01 .sup .text-20-sm {
    line-height: 1;
}
.title02 {
    padding: 0 0 1em;
    border-bottom: 2px solid var(--color-Gold);
}
.title03 {
    display: grid;
    gap: .5em;
    place-items: center;
}
.title04 {
    padding: 0 0 0 .5em;
    border-left: .5em solid;
}
@media screen and (max-width: 768px) {
	.title01 {
		text-align: center;
	    justify-content: center;
	}
	.title01 .sup {
		width: 100%;
	    text-align: center;
	    justify-content: center;
	}
}
/* ------------------------------------------- */
.btn01 {
    display: grid;
    gap: .5em;
    align-items: center;
}
.btn01 :is(a, button) {
	height: 50px;
    padding: 0 .5em;
    display: flex;
    gap: .5em;
    align-items: center;
    justify-content: center;
}
.btn01 button.border {
    border: 2px solid;
}
@media screen and (max-width: 768px) {
}
/* ------------------------------------------- */
.table01 > div {
    border-bottom: 1px solid var(--color-GrayS);
    display: grid;
    grid-template-columns: 190px 1fr;
}
.table01 > div dt {
    padding: 1em;
    background: var(--color-GrayL);
    font-weight: 700;
}
.table01 > div dd {
    padding: 1em;
}
.table02 tr {
    border-bottom: 1px solid var(--color-GrayS);
}
.table02 :is(th, td) {
    padding: 1em;
    vertical-align: middle;
}
.table03 tr {
    border-bottom: 1px solid var(--color-GrayS);
}
.table03 :is(th, td) {
    padding: 1em;
    vertical-align: middle;
}
.table03 thead th {
    color: #fff;
    background: var(--color-Black);
    font-weight: 700;
}
.table03 thead th.back-gold {
    background: var(--color-Gold);
}
@media screen and (max-width: 768px) {
	.table-scroll {
	    overflow-x: scroll;
	}
	.table-scroll table {
	    width: max-content;
	}
	.table01 > div {
	    grid-template-columns: 100px 1fr;
	}
	.table02 :is(th, td) {
	    padding: .5em 1em;
	}
}
/* ------------------------------------------- */
.modal {
	display: grid;
	place-items: center;
	position: fixed;
	inset: 0;
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}
.modal.is-visible {
	opacity: 1;
	pointer-events: auto;
}
.modal .overlay {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 60%);
}
.modal .box {
    width: 90%;
    max-height: 90vh;
    overflow-y: scroll;
    position: relative;
}
.modal .box::-webkit-scrollbar {
	width: .8em;
}
.modal .box::-webkit-scrollbar-thumb {
	background: #b8b8bb;
	background-clip: content-box;
	border-radius: 100vmax;
	border: .2em solid transparent;
}
.modal .close {
	margin: 0 0 0 auto;
	cursor: pointer;
}
.modal .title {
    padding: 1em 2em;
    display: flex;
    gap: 1em;
    align-items: center;
    position: sticky;
    top: 0;
}
.modal.buy .box .box01 {
    padding: 1em;
}
.modal.buy .box .box01 .tag {
    width: fit-content;
    margin-top: .5em;
    padding: .5em 1em;
    border-radius: 100vmax;
    line-height: 1;
}
.modal.buy .box .box02 {
    padding: 1em;
    border-left: 3px solid var(--color-Gold);
}
.modal.buy .box .box02 dl div dt {
    display: flex;
    gap: .5em;
    align-items: center;
}
.modal.buy .box .box02 dl div dd {
    padding: 0 0 0 1.8em;
}
.modal.buy .box .box02 dl div dd ul {
    padding: 0 0 0 1.5em;
    list-style: disc;
}
.modal.buy .box .box03 {
    padding: 2em 0 0;
    border-top: 1px solid var(--color-GrayS);
    display: flex;
    gap: 1em;
    justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
	.modal {
		transition: none;
	}
}
@media screen and (max-width: 768px) {
}

/* ----------------------------------------------
    header
---------------------------------------------- */
#header header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}
#header header .inner {
	height: 60px;
    display: flex;
    gap: 1em;
    align-items: center;
    justify-content: space-between;
}
#header header .inner .logo {
    flex-shrink: 0;
}
#header header .inner .gnav {
    display: flex;
    gap: 2em;
    align-items: center;
}
#header header .inner .gnav nav > ul {
    display: flex;
    gap: 2em;
    align-items: center;
}
#header header .inner .gnav nav > ul > li a {
    display: flex;
    gap: .3em;
    align-items: center;
}
#header header .inner .menu {
	margin: 0 0 0 auto;
    display: flex;
    gap: 1em;
    align-items: center;
}
#header header .inner .menu .login a {
    width: 40px;
    aspect-ratio: 1;
    border-radius: 100vmax;
    display: grid;
    place-items: center;
}
@media screen and (min-width: 769px) {
	#header header {
	    min-width: 1200px;
	}
	#header header .inner .gnav nav > ul > li a {
	    padding: .5em 0;
	}
    #header header .inner .gnav nav ul .dropdown {
        width: fit-content;
        max-height: 0;
        opacity: 0;
        white-space: nowrap;
        overflow: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        transform: translateY(-10px);
        z-index: 1000;
        transition: all 0.3s ease;
        pointer-events: none;
    }
    #header header .inner .gnav nav ul .dropdown ul li a {
	    padding: .5em 3em .5em 1em;
	}
    #header header .inner .gnav nav ul .dropdown ul li.highlight a {
	    background: rgb(212 172 90 / 10%);
	    border-top: 1px solid var(--color-Gold);
    }
	#header header .inner .menu .contact a {
	    width: 100px;
	    height: 40px;
	    color: #fff;
	    background: var(--color-Black);
	    border-radius: .3em;
	    font-weight: 700;
	    display: flex;
	    gap: .5em;
	    align-items: center;
	    justify-content: center;
	}
}
@media (hover: hover) and (pointer: fine) {
	#header header .inner .gnav nav ul li > a > .fa-chevron-down {
		transition: transform 0.3s;
	}
	#header header .inner .gnav nav ul li:has(.dropdown):hover > a > .fa-chevron-down {
		transform: rotate(180deg);
	}
	#header header .inner .gnav nav ul li:hover > .dropdown,
	#header header .inner .gnav nav ul li:focus-within > .dropdown {
		max-height: 1000px;
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
	#header header .inner .gnav nav ul .dropdown a:hover {
		background: var(--color-GrayL);
		opacity: 1;
	}
}
@media screen and (max-width: 768px) {
	#header header {
	    min-width: 100%;
	}
	#header header .inner {
		padding: 0 0 0 5%;
	}
	#header header .inner .menu .search {
	    order: 1;
	}
	#header header .inner .menu .contact {
	    order: 2;
	}
	#header header .inner .menu .login {
	    order: 3;
	}
	#header header .inner .menu .search button,
	#header header .inner .menu .contact a {
		display: grid;
	}
	#header header .inner .hamburger {
        height: 60px;
        aspect-ratio: 1;
        border: none;
        cursor: pointer;
        display: flex;
        gap: 8px;
        flex-shrink: 0;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }
	#header header .inner .hamburger .bar {
	    width: 25px;
	    height: 2px;
	    border-radius: 100vmax;
	    display: block;
	    transition: transform 0.3s ease, opacity 0.3s ease;
	}
	#header header .inner .hamburger.open .bar:nth-child(1) {
	    transform: rotate(45deg) translate(7px, 7px);
	}
	#header header .inner .hamburger.open .bar:nth-child(2) {
	    opacity: 0;
	}
	#header header .inner .hamburger.open .bar:nth-child(3) {
	    transform: rotate(-45deg) translate(7px, -7px);
	}
	#header header .inner .gnav {
		width: 100%;
		height: calc(100dvh - 60px);
        padding: 0 5% 4em;
        color: #fff;
        background: rgb(0 0 0 / 90%);
        align-items: flex-start;
        overflow-y: scroll;
        position: fixed;
        top: 60px;
	    right: 0;
	    z-index: 1;
	    transform: translateX(500px);
	    transition: transform 0.3s ease, opacity 0.3s ease;
	}
	#header header .inner .gnav.open {
	    transform: translateX(0);
	}
	#header header .inner .gnav nav {
		width: 100%;
		gap: 2em;
	    flex-direction: column;
	}
	#header header .inner .gnav nav > ul {
	    width: 100%;
	    margin: 0;
        gap: 0;
	    flex-direction: column;
    }
    #header header .inner .gnav nav > ul > li {
	    width: 100%;
	    border-bottom: 1px solid var(--color-GrayB);
	}
	#header header .inner .gnav nav > ul > li > a {
	    padding: 1em 0;
	}
	#header header .inner .gnav nav > ul > li .dropdown {
	    background: none;
	}
	#header header .inner .gnav nav > ul > li .dropdown ul {
	    padding: 1em 0;
	    border-top: 1px dashed var(--color-GrayB);
	    display: grid;
	    gap: .5em;
	    grid-template-columns: 1fr 1fr;
	}
	#header header .inner .gnav nav > ul > li .dropdown ul li a span {
	    font-size: 1.2rem;
	}
}

/* ----------------------------------------------
    pagehead
---------------------------------------------- */
#pagehead {
    height: 200px;
    display: grid;
    gap: 1em;
    place-items: center;
    align-content: center;
}
@media screen and (max-width: 768px) {
	#pagehead {
	    gap: .5em;
	}
}

/* ----------------------------------------------
    breadcrumb
---------------------------------------------- */
#breadcrumb nav ol {
	padding: 1em 0;
    display: flex;
    gap: 0 1em;
    flex-wrap: wrap;
}
#breadcrumb nav ol li {
    display: flex;
    gap: 1em;
    align-items: center;
}
#breadcrumb nav ol li:not(:last-child)::after {
    content: "";
    width: .5em;
    aspect-ratio: 1;
    border-top: 1px solid;
    border-right: 1px solid;
    transform: rotate(45deg);
}

/* ----------------------------------------------
    contents
---------------------------------------------- */
#contents:has(#side) {
    display: grid;
    gap: 4em 2em;
    align-content: flex-start;
    grid-template-columns: 280px 1fr;
}
#contents #main {
    order: 2;
    overflow: hidden;
}
#contents #side {
    order: 1;
    max-height: calc(100vh - 60px - 4em);
    overflow-y: auto;
    position: sticky;
    top: calc(60px + 2em);
}
#contents #side::-webkit-scrollbar {
	width: .8em;
}
#contents #side::-webkit-scrollbar-thumb {
	background: #b8b8bb;
	background-clip: content-box;
	border-radius: 100vmax;
	border: .2em solid transparent;
}
@media screen and (max-width: 768px) {
	#contents:has(#side) {
	    display: flex;
        flex-direction: column;
	}
	#contents #main {
	    order: 1;
	    overflow: initial;
	}
	#contents #side {
	    order: 2;
	}
}
/* ------------------------------------------- */
#contents #side .inner .box {
    padding: 1.5em 1em;
}
#contents #side .inner .login {
    border-bottom: 2px solid var(--color-Gold);
}
#contents #side .inner .login .label {
	margin: 0 0 .3em;
    display: flex;
    gap: .3em;
    align-items: center;
}
#contents #side .inner .login .link {
    display: grid;
    gap: .5em;
}
#contents #side .inner .login .link a {
    display: flex;
    gap: .3em;
    align-items: center;
}
#contents #side .inner .search .block {
    margin: 0 0 .5em;
    display: flex;
    overflow: hidden;
}
#contents #side .inner .search .block input {
    background: none;
    border: none !important;
    outline: none !important;
    border-radius: 0;
}
#contents #side .inner .search .block button {
    padding: 0 .5em;
    flex-shrink: 0;
}
#contents #side .inner .cate {
    border-top: 1px solid var(--color-GrayL);
}
#contents #side .inner .cate ul {
    display: grid;
    gap: .5em;
}
#contents #side .inner .cate ul li a {
    display: flex;
    border: 1px solid var(--color-GrayS);
    line-height: 1.5;
    padding: 1em;
    gap: .5em;
    align-items: center;
}
#contents #side .inner .cate ul li a .icon {
    width: 2.5em;
    aspect-ratio: 1;
    border-radius: 100vmax;
    display: grid;
    flex-shrink: 0;
    place-items: center;
}
#contents #side .inner .cate ul li a .arrow {
    margin: 0 0 0 auto;
    flex-shrink: 0;
}
#contents #side .inner .filter .box {
    border-top: 1px solid var(--color-GrayL);
}
#contents #side .inner .filter .check {
    gap: .5em;
    flex-direction: column;
}
#contents #side .inner .filter .check li label {
    font-size: 1.4rem;
}
#contents #side .inner .filter .check li label .number {
	margin: 0 0 0 auto;
    padding: .1em .6em;
    color: var(--color-GrayD);
    background: var(--color-GrayL);
    border-radius: .5em;
    flex-shrink: 0;
}
@media screen and (max-width: 768px) {
	#contents #side .inner .cate ul {
	    grid-template-columns: 1fr 1fr;
	}
	#contents #side .inner .cate ul li a {
	    padding: 1em .5em;
	    line-height: 1.2;
	}
	#contents #side .inner .cate ul li a .icon {
	    width: 2em;
	}
	#contents #side .inner .cate ul li a .arrow {
	    display: none;
	}
}
/* ------------------------------------------- */
@media screen and (max-width: 768px) {
	#contents #side {
		width: 100%;
		max-height: calc(100dvh - 60px);
		padding: 0 0 2em;
		border-radius: 0;
		scrollbar-width: none;
		-ms-overflow-style: none;
		position: fixed;
        top: 60px;
	    right: 0;
	    z-index: 9998;
	    transform: translateY(-100vh);
	    transition: transform 0.3s ease, opacity 0.3s ease;
	}
	#contents #side::-webkit-scrollbar {
		display: none;
	}
	#contents #side.open {
		transform: translateY(0);
	}
	#contents #side .menu {
		padding: 1em;
        display: grid;
        gap: .5em;
        grid-template-columns: 1.5fr 1fr 1fr;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 1;
	}
	#contents #side .menu button {
	    padding: .3em;
	}
	#contents #side .inner .box.btn01 {
	    display: none;
	}
	body.is-locked {
		overflow: hidden;
	}
}

/* ----------------------------------------------
    footer
---------------------------------------------- */
#footer footer .inner .info {
    display: flex;
    gap: 2em;
    justify-content: space-between;
}
#footer footer .inner .info .fnav nav dl {
    display: flex;
    gap: 0 4em;
}
#footer footer .inner .info .fnav nav dl div dd {
    color: var(--color-GrayD);
    font-size: 1.4rem;
}
#footer footer .inner .copy {
    color: var(--color-GrayD);
    border-top: 1px solid var(--color-GrayB);
}
@media screen and (max-width: 768px) {
	#footer footer .inner .info {
	    flex-direction: column;
	}
	#footer footer .inner .info .fnav nav dl {
	    gap: 0 1em;
	    justify-content: space-between;
	}
	#footer footer .inner .info .fnav nav dl div :is(dt, dd) {
	    font-size: 1.2rem;
	}
}

/* ----------------------------------------------
    form
---------------------------------------------- */
.form-layout {
    padding: 1.5em 0 0;
    border-top: 1px solid var(--color-GrayS);
    display: grid;
    gap: 1.5em;
}
.form-layout .form-item {
    padding: 0 0 1.5em;
    border-bottom: 1px solid var(--color-GrayS);
    display: flex;
    gap: 1em;
    align-items: center;
}
.form-layout .form-item .left {
    width: 100%;
    max-width: 200px;
    font-weight: 600;
    flex-shrink: 0;
}
.form-layout .form-item .left .required {
    margin-left: .5em;
    padding: .3em .5em;
    border-radius: .3em;
    font-size: 1.2rem;
    line-height: 1;
    display: inline-block;
}
.form-layout .form-item .right {
    width: 100%;
}
.form-layout .form-item .right :is(.name, .tel) {
    display: flex;
    gap: .5em;
    align-items: center;
}
.form-layout .form-item .right .name input {
    max-width: 200px;
}
.form-layout .form-item .right .tel input {
    max-width: 100px;
}
@media screen and (max-width: 768px) {
	.form-layout .form-item {
	    flex-direction: column;
	}
	.form-layout .form-item .left {
	    max-width: 100%;
	}
}
/* ------------------------------------------- */
form :is(input, select, textarea) {
    width: 100%;
    max-width: 500px;
    height: 45px;
    padding: .2em .5em;
    background: #fff;
	border: 1px solid var(--color-GrayM);
    border-radius: .3em;
    cursor: pointer;
}
:is(#profile, #post) form :is(input, select, textarea) {
    background: var(--color-GrayP);
}
form textarea {
    max-width: 100%;
    min-height: 180px;
}
form input:focus-visible,
form select:focus-visible,
form textarea:focus-visible {
    outline: none;
    border: 1px solid var(--color-GrayB);
}
form input::placeholder,
form select::placeholder,
form textarea::placeholder {
	color: var(--color-GrayM);
}
form input[type="file"] {
    height: auto;
    padding: 0;
    background: none !important;
    border: none;
}
form .select {
	width: 100%;
    max-width: 500px;
	display: flex;
    align-items: center;
    position: relative;
}
form .select::after {
    content: "";
    width: .4em;
    aspect-ratio: 1;
    border-right: 1px solid var(--color-GrayM);
    border-bottom: 1px solid var(--color-GrayM);
    position: absolute;
    right: 1em;
    transform: rotate(45deg);
    pointer-events: none;
}
form .select select {
    padding-right: 2.5em;
}
form .check,
form .radio {
    display: flex;
    gap: .5em 1.5em;
    flex-wrap: wrap;
}
form .check li input[type="checkbox"],
form .radio li input[type="radio"] {
	display: none;
}
form .check li label,
form .radio li label {
	display: flex;
	gap: 0 .5em;
    align-items: center;
	cursor: pointer;
}
form .check li label .icon,
form .radio li label .icon {
	width: 1.3em;
    aspect-ratio: 1;
	background: none;
    border: 1px solid var(--color-GrayM);
	border-radius: .2em;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    transition: border 0.2s linear;
    -webkit-transition: border 0.2s linear;
	transition: background 0.2s linear;
	-webkit-transition: background 0.2s linear;
}
form .radio li label span {
	border-radius: 100vmax;
}
form .check li label .icon::before,
form .radio li label .icon::before {
    content: "";
    width: .5em;
    aspect-ratio: 7 / 10;
    margin: 0 0 .2em;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transition: opacity 0.2s linear;
    -webkit-transition: opacity 0.2s linear;
    opacity: 0;
}
form .radio li label .icon::before {
    aspect-ratio: 1;
    margin: 0;
    background: #fff;
    border-right: none;
    border-bottom: none;
	border-radius: 100vmax;
    transform: rotate(0deg) translate(0);
    -ms-transform: rotate(0deg) translate(0);
    -webkit-transform: rotate(0deg) translate(0);
    transition: opacity 0.2s linear;
    -webkit-transition: opacity 0.2s linear;
    opacity: 0;
}
form .check li input:checked + label span,
form .radio li input:checked + label span {
	background: var(--color-Gold);
	border-color: var(--color-Gold);
}
form .check li input:checked + label .icon::before,
form .radio li input:checked + label .icon::before {
	opacity: 1.0;
}
form .agree .check {
    width: fit-content;
    margin: 0 auto;
    gap: 1em;
    flex-direction: column;
}
form .submit {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width: 768px) {
}

/* ----------------------------------------------
    home
---------------------------------------------- */
#home #contents {
	max-width: 1600px;
	margin: 0 auto;
	padding: 2em;
	background: var(--color-GrayP);
}
#home #signup-modal.modal .box form .label {
    margin: 0 0 .3em;
    display: flex;
    gap: .3em;
    align-items: center;
}
@media screen and (max-width: 768px) {
}
/* ------------------------------------------- */
#home .sec01 .inner .swiper.mv .swiper-slide {
    height: 520px;
	text-shadow: 0 .1em .4em rgb(0 0 0 / 5%);
}
#home .sec01 .inner .swiper.mv .swiper-slide .text {
    height: 100%;
    display: grid;
    align-content: center;
}
#home .sec01 .inner .swiper.mv .swiper-slide .text .info {
    display: flex;
    gap: 2em;
}
#home .sec01 .inner .swiper.mv .swiper-slide .text .info .item {
    padding: 1em 1.5em;
    background: rgb(0 0 0 / 50%);
    border: 1px solid var(--color-Gold);
    display: grid;
    gap: .5em;
}
#home .sec01 .inner .swiper.mv .swiper-slide .back {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
#home .sec01 .inner .swiper.mv .swiper-slide .back::before {
	content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgb(0   0   0  / 85%) 0%, 
        rgb(33  33  33 / 80%) 50%,
        rgb(184 134 11 / 15%) 100%);
	position: absolute;
    top: 0;
    left: 0;
}
#home .sec01 .inner .swiper.mv .swiper-slide .back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#home .sec01 .inner .swiper.mv .swiper-pagination {
    display: flex;
    gap: .5em;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
	position: absolute;
    top: auto;
    bottom: 1em;
}
#home .sec01 .inner .swiper.mv .swiper-pagination .swiper-pagination-bullet {
    width: 1em;
    height: auto;
    aspect-ratio: 3 / 2;
    margin: 0;
    background: var(--color-GrayB);
    border: 1px solid var(--color-GrayD);
    border-radius: 0;
    opacity: 1;
}
#home .sec01 .inner .swiper.mv .swiper-pagination .swiper-pagination-bullet-active {
    background: var(--color-Gold);
    border: 1px solid var(--color-Gold);
    opacity: 1;
}
#home .sec01 .inner .box02 {
    display: grid;
    gap: .5em 1em;
    grid-template-columns: repeat(3, 1fr);
}
#home .sec01 .inner .box02 .item a {
    padding: 1.5em;
    border-left: .3em solid var(--color-Gold);
    line-height: 1.4;
    display: flex;
    gap: 1em;
    align-items: center;
}
#home .sec01 .inner .box02 .item a :is(.num, .arrow) {
    width: 2.5em;
    aspect-ratio: 1;
    background: rgba(255 255 255 / 5%);
    border: 1px solid;
    display: grid;
    flex-shrink: 0;
    place-items: center;
}
#home .sec01 .inner .box02 .item a .arrow {
    margin: 0 0 0 auto;
}
#home .sec01 .inner .swiper.menu .item .img::after {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgb(0 0 0 / 10%) 0%, rgb(0 0 0 / 40%) 100%);
    position: absolute;
    top: 0;
    left: 0;
}
#home .sec01 .inner .swiper.menu .item .img img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
#home .sec01 .inner .swiper.menu .item .text {
    padding: 2em;
    display: grid;
    gap: 1em;
}
#home .sec01 .inner .swiper.menu .item .text .icon {
    padding: 1em;
    line-height: 1;
}
#home .sec01 .inner .swiper.menu .item .text .btn a {
    max-width: 160px;
    padding: 1em;
    display: flex;
    gap: .5em;
    align-items: center;
    justify-content: center;
}
@media (hover: hover) {
	#home .sec01 .inner .box02 .item a {
		transition: box-shadow ease .3s;
	}
	#home .sec01 .inner .box02 .item a:hover {
		opacity: 1;
		box-shadow: 0 .1em .5em rgb(0 0 0 / 30%);
	}
	#home .sec01 .inner .box02 .item a :is(.num, .arrow) {
		transition: color ease .3s, border ease .3s;
	}
	#home .sec01 .inner .box02 .item a:hover :is(.num, .arrow) {
		color: #fff;
	}
}
@media screen and (min-width: 769px) {
	#home .sec01 .inner .swiper.menu .swiper-wrapper {
	    display: grid;
	    gap: 1.5em;
	    grid-template-columns: repeat(3, 1fr);
	}
}
@media screen and (max-width: 768px) {
    #home #contents {
        padding-top: 0;
    }
	#home .sec01 .inner .swiper:is(.mv, .menu) {
	    width: 100vw;
	    margin-left: calc(50% - 50vw);
	    margin-right: calc(50% - 50vw);
	}
	#home .sec01 .inner .swiper.menu .swiper-pagination {
	    margin: 1.5em 0 0;
	    display: flex;
	    gap: .5em;
	    flex-wrap: wrap;
	    align-items: center;
	    justify-content: center;
	    position: static;
	}
	#home .sec01 .inner .swiper.menu .swiper-pagination .swiper-pagination-bullet {
	    margin: 0;
	    background: var(--color-GrayS);
	    opacity: 1;
	}
	#home .sec01 .inner .swiper.menu .swiper-pagination .swiper-pagination-bullet-active {
	    background: var(--color-Gold);
	    opacity: 1;
	}
	#home .sec01 .inner .swiper.mv .swiper-slide {
	    height: 420px;
	}
	#home .sec01 .inner .swiper.mv .swiper-slide .text .info {
	    gap: 1em;
	}
	#home .sec01 .inner .swiper.mv .swiper-slide .text .info .item {
	    padding: 1em;
	    gap: 0;
	}
	#home .sec01 .inner .box02 {
	    grid-template-columns: repeat(1, 1fr);
	}
	#home .sec01 .inner .box03 .text h3 {
	    margin: 0 0 1em;
	    text-align: center;
	}
}
/* ------------------------------------------- */
#home .sec03 .inner .box01 {
    border: 2px solid var(--color-Gold);
}
#home .sec03 .inner .box01 .popular {
    width: fit-content;
    padding: .5em 1em;
    border-radius: 100vmax;
    line-height: 1;
}
#home .sec03 .inner .box01 .popular span {
    display: block;
}
#home .sec03 .inner .box01 .menu ul {
    padding: 1.5em 0 0;
    border-top: 1px solid var(--color-GrayS);
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(4, 1fr);
}
#home .sec03 .inner .box01 .menu ul li {
    padding: 1.5em 1em;
    border: 1px solid var(--color-GrayS);
    display: grid;
    gap: .5em;
    align-content: flex-start;
}
#home .sec03 .inner .box01 .menu ul li .icon {
	width: 60px;
    aspect-ratio: 1;
    margin-bottom: .5em;
    border-radius: 100vmax;
    display: grid;
    place-items: center;
}
#home .sec03 .inner .box01 .menu ul li .text {
    display: grid;
    gap: .5em;
}
#home .sec03 .inner .box02 .box {
    display: flex;
    gap: 2em 1em;
    align-items: center;
    justify-content: space-between;
}
#home .sec03 .inner .box02 .box .right button {
    padding: 1em 2em;
    display: flex;
    gap: .5em;
    align-items: center;
}
#home .sec .inner .product-list .swiper-slide {
    height: auto;
}
#home .sec .inner .product-list .item {
    height: 100%;
    padding: 1.5em;
    border: 1px solid var(--color-GrayS);
    display: flex;
    flex-direction: column;
}
#home .sec .inner .product-list .item:has(.pickup) {
    border: 2px solid var(--color-Gold);
}
#home .sec .inner .product-list .item .img {
    aspect-ratio: 3 / 1.5;
    display: grid;
    place-items: center;
}
#home .sec .inner .product-list .item .img .pickup {
    padding: .5em 1em;
    border-radius: 100vmax;
    line-height: 1;
    position: absolute;
    top: -.5em;
    right: -.5em;
}
#home .sec .inner .product-list .item .img .pickup span {
    display: block;
}
#home .sec .inner .product-list .item .icon {
    width: 6em;
    aspect-ratio: 1;
    border-radius: 100vmax;
    display: grid;
    place-items: center;
}
#home .sec .inner .product-list .item .tag {
    display: flex;
    gap: .5em;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
#home .sec .inner .product-list .item .tag li {
    padding: .2em .5em;
    border-radius: 100vmax;
}
#home .sec .inner .product-list .item .cate {
    width: fit-content;
    padding: .5em 1em;
    line-height: 1;
}
#home .sec .inner .product-list .item .cate span {
    display: block;
}
#home .sec .inner .product-list .item .title {
	margin: 0 0 .5em;
}
#home .sec .inner .product-list .item .price {
    line-height: 1;
}
#home .sec .inner .product-list .item .btn01 {
    margin: auto 0 0;
}
#home .sec .inner .product-list .item .btn01 button.back-black {
    border: 2px solid var(--color-Black);
}
#home .sec .inner .product-list .item .btn01 button.back-gold {
    border: 2px solid var(--color-Gold);
}
#home .sec .inner .product-list .item.prep {
    opacity: .6;
    pointer-events: none;
}
#home .sec .inner .product-list .item.prep::after {
    content: "準備中";
    padding: .2em 1em;
    color: #fff;
    background: var(--color-GrayD);
    border-radius: 100vmax;
    font-size: 1.4rem;
    font-weight: 600;
    position: absolute;
    top: 1.5em;
    right: 1.5em;
}
#home .sec .inner .product-list .item.prep .back-gold {
    background: var(--color-GrayM);
}
#home .sec .inner .product-list .item.prep .text-gold {
    color: var(--color-GrayM);
}
#home .sec .inner .product-list .item.prep .btn01 button.back-gold {
    border: 2px solid var(--color-GrayM);
}
@media screen and (min-width: 769px) {
	#home .sec .inner .product-list .swiper-wrapper {
	    display: grid;
	    gap: 1.5em;
	    grid-template-columns: repeat(3, 1fr);
	}
}
@media screen and (max-width: 768px) {
	#home .sec03 .inner .box01 .popular {
	    margin: 0 auto .5em;
	}
	#home .sec03 .inner .box01 .menu ul {
		gap: .5em;
	    grid-template-columns: repeat(1, 1fr);
	}
	#home .sec03 .inner .box01 .menu ul li {
	    padding: 1em;
	    text-align: left;
	    display: flex;
        gap: 1em;
        align-items: center;
	}
	#home .sec03 .inner .box01 .menu ul li .icon {
	    margin: 0;
	    flex-shrink: 0;
	}
	#home .sec03 .inner .box01 .menu ul li .text {
	    gap: 0;
	}
	#home .sec03 .inner .box02 .box {
	    flex-direction: column;
	}
	#home .sec03 .inner .box02 .box .left {
	    display: grid;
	    gap: 1em;
	}
	#home .sec .inner .product-list {
		width: 100vw;
        margin: 0 calc(50% - 50vw);
	    overflow: hidden;
	}
	#home .sec .inner .product-list .swiper .swiper-slide {
	    height: auto !important;
	}
	#home .sec .inner .product-list .swiper .swiper-slide .item {
	    height: 100%;
	    display: flex;
        flex-direction: column;
	}
	#home .sec .inner .product-list .swiper .swiper-slide .item .btn01 {
	    margin-top: auto;
	}
	#home .sec .inner .product-list .swiper .swiper-pagination {
	    margin: 1.5em 0 0;
	    display: flex;
	    gap: .5em;
	    flex-wrap: wrap;
	    align-items: center;
	    justify-content: center;
	    position: static;
	}
	#home .sec .inner .product-list .swiper .swiper-pagination .swiper-pagination-bullet {
	    margin: 0;
	    background: var(--color-GrayS);
	    opacity: 1;
	}
	#home .sec .inner .product-list .swiper .swiper-pagination .swiper-pagination-bullet-active {
	    background: var(--color-Gold);
	    opacity: 1;
	}
}
/* ------------------------------------------- */
#home .sec07 .inner .box {
    border: 1px solid var(--color-GrayS);
}
#home .sec07 .inner .box .catch {
    margin: 0 0 .5em;
}
#home .sec07 .inner .box .data {
    padding: 1em 0 1.5em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
@media screen and (min-width: 769px) {
	#home .sec07 .inner .swiper.case .swiper-wrapper {
		display: grid;
		gap: 1.5em;
	}
}
@media screen and (max-width: 768px) {
	#home .sec07 .inner .swiper.case {
		width: 100vw;
        margin: 0 calc(50% - 50vw);
	    overflow: hidden;
	}
	#home .sec07 .inner .swiper.case .swiper-slide {
	    height: auto !important;
	}
	#home .sec07 .inner .swiper.case .swiper-slide .item {
	    height: 100%;
	}
	#home .sec07 .inner .swiper.case .swiper-slide .item .w-90 {
	    height: 100%;
	    display: flex;
	    flex-direction: column;
	}
	#home .sec07 .inner .item .data {
	    margin: auto 0 0;
	}
	#home .sec07 .inner .swiper.case .swiper-pagination {
	    margin: 1.5em 0 0;
	    display: flex;
	    gap: .5em;
	    flex-wrap: wrap;
	    align-items: center;
	    justify-content: center;
	    position: static;
	}
	#home .sec07 .inner .swiper.case .swiper-pagination .swiper-pagination-bullet {
	    margin: 0;
	    background: var(--color-GrayS);
	    opacity: 1;
	}
	#home .sec07 .inner .swiper.case .swiper-pagination .swiper-pagination-bullet-active {
	    background: var(--color-Gold);
	    opacity: 1;
	}
}
/* ------------------------------------------- */
#home .sec08 .inner .box01 ul {
    display: flex;
    gap: 0 2em;
    flex-wrap: wrap;
    justify-content: center;
}
#home .sec08 .inner .box01 ul li {
    display: flex;
    gap: .5em;
    align-items: center;
}
@media screen and (min-width: 769px) {
	#home .sec08 .inner .box01 .btn01 {
	    max-width: 600px;
	    display: flex;
	}
}
@media screen and (max-width: 768px) {
	#home .sec08 .inner .box01 ul {
	    width: fit-content;
	    margin: 0 auto;
	    flex-direction: column;
	}
}

/* ----------------------------------------------
    
---------------------------------------------- */
@media screen and (max-width: 768px) {
}

/* ----------------------------------------------
    
---------------------------------------------- */
@media screen and (max-width: 768px) {
}

/* ----------------------------------------------
    crm
---------------------------------------------- */
#crm .sec01 .inner .label {
    width: fit-content;
    padding: 1em 1.5em;
    border-radius: 100vmax;
    display: flex;
    gap: .5em;
    align-items: center;
}
#crm .sec01 .inner h2 {
    display: grid;
    gap: .5em;
}
#crm .sec01 .inner ul {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width: 768px) {
	#crm .sec01 .inner .label {
	    padding: .5em 1em;
	}
	#crm .sec01 .inner ul {
	    width: fit-content;
	    gap: .3em;
	    align-items: flex-start;
	    flex-direction: column;
	}
}
/* ------------------------------------------- */
#crm .sec02 .inner .box01 {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(4, 1fr);
}
#crm .sec02 .inner .box01 .item {
	padding: 2em 1.5em;
    display: grid;
    gap: 1em;
    align-content: flex-start;
}
#crm .sec02 .inner .box01 .item .icon {
    width: 4em;
    aspect-ratio: 1;
    border-radius: 100vmax;
    display: grid;
    place-items: center;
}
@media screen and (max-width: 768px) {
	#crm .sec02 .inner .box01 {
	    gap: .5em;
	    grid-template-columns: repeat(1, 1fr);
	}
}
/* ------------------------------------------- */
#crm .sec03 .inner .box01 {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(4, 1fr);
}
#crm .sec03 .inner .box01 .item {
	padding: 2em 1.5em;
    display: grid;
    gap: 1em;
    align-content: flex-start;
}
#crm .sec03 .inner .box01 .item .num {
    line-height: 1;
    position: absolute;
    top: -2em;
    left: 1em;
}
#crm .sec03 .inner .box01 .item .icon {
    width: 4em;
    aspect-ratio: 1;
    border-radius: 100vmax;
    display: grid;
    place-items: center;
}
#crm .sec03 .inner .box01 .item ul {
    display: grid;
    gap: .3em;
}
@media screen and (max-width: 768px) {
	#crm .sec03 .inner .box01 {
	    gap: 2.5em;
	    grid-template-columns: repeat(1, 1fr);
	}
}
/* ------------------------------------------- */
#crm .sec04 .inner .box01 {
    display: flex;
    gap: 4em;
    justify-content: center;
}
@media screen and (max-width: 768px) {
	#crm .sec04 .inner .box01 {
	    display: grid;
	    gap: .5em;
	    grid-template-columns: repeat(2, 1fr);
	}
}
/* ------------------------------------------- */
#crm .sec05 .inner .box01 {
    display: grid;
    gap: 1.5em;
}
#crm .sec05 .inner .box01 .box {
    border: 1px solid var(--color-GrayS);
}
#crm .sec05 .inner .box01 .box dl {
    display: grid;
    gap: 1em;
}
#crm .sec05 .inner .box01 .box dl div dt {
    margin: 0 0 .2em;
    display: flex;
    gap: .5em;
    align-items: center;
}
#crm .sec05 .inner .box01 .box .catch {
    margin: 0 0 .5em;
}
#crm .sec05 .inner .box01 .box .data {
    padding: 1em 0 1.5em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 768px) {
	#crm .sec05 .inner .box01 .box .title01 {
        justify-content: space-between;
    }
    #crm .sec05 .inner .box01 .box .title01 .sup {
	    margin: 0 0 0 auto;
	}
}
/* ------------------------------------------- */
#crm .sec06 .inner .box01 {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(4, 1fr);
}
#crm .sec06 .inner .box01 .item {
	padding: 2em 1.5em;
    display: grid;
    gap: 1em;
    align-content: flex-start;
}
#crm .sec06 .inner .box01 .item .icon {
    width: 4em;
    aspect-ratio: 1;
    border-radius: 100vmax;
    display: grid;
    place-items: center;
}
@media screen and (max-width: 768px) {
	#crm .sec06 .inner .box01 {
	    gap: .5em;
	    grid-template-columns: repeat(1, 1fr);
	}
}
/* ------------------------------------------- */
#crm .sec07 .inner .box01 {
    overflow: hidden;
}
#crm .sec07 .inner .box03 ul {
	width: fit-content;
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(4, 1fr);
}
#crm .sec07 .inner .box04 {
    padding: 1.5em 0;
    border-top: 1px solid var(--color-GrayS);
    border-bottom: 1px solid var(--color-GrayS);
    display: flex;
    gap: 2em;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
#crm .sec07 .inner .box01 .btn01 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width: 768px) {
	#crm .sec07 .inner .box03 ul {
	    width: 100%;
	    display: flex;
	    gap: .5em 1em;
	    flex-wrap: wrap;
	}
	#crm .sec07 .inner .box04 {
	    gap: .5em;
	    flex-direction: column;
	}
}
/* ------------------------------------------- */
#crm .sec08 .inner .box01 {
    display: grid;
    gap: 1em;
}
#crm .sec08 .inner .box01 details {
    overflow: hidden;
    border: 1px solid var(--color-GrayS);
}
#crm .sec08 .inner .box01 details summary {
    padding: 1em 1.5em;
    cursor: pointer;
    list-style: none;
    display: flex;
    gap: 1em;
    align-items: center;
    justify-content: space-between;
}
#crm .sec08 .inner .box01 details summary::marker {
	content: "";
}
#crm .sec08 .inner .box01 details summary::-webkit-details-marker {
	display: none;
}
#crm .sec08 .inner .box01 details summary .fa-chevron-down {
    transition: transform 0.3s;
}
#crm .sec08 .inner .box01 details[open] summary .fa-chevron-down {
    transform: rotate(180deg);
}
#crm .sec08 .inner .box01 details .answer {
    padding: 1em 1.5em;
}
@media screen and (max-width: 768px) {
}
/* ------------------------------------------- */
#crm .sec09 .inner .box01 {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(5, 1fr);
}
#crm .sec09 .inner .box01 .item {
	padding: 2em 1.5em;
    display: grid;
    gap: .5em;
    align-content: flex-start;
}
#crm .sec09 .inner .box01 .item .icon {
    width: 4em;
    aspect-ratio: 1;
    border: 2px solid;
    border-radius: 100vmax;
    display: grid;
    place-items: center;
}
#crm .sec09 .inner .box01 .item .arrow {
    position: absolute;
    top: 50%;
    right: -1.4em;
    transform: translateY(-50%);
    z-index: 1;
}
@media screen and (max-width: 768px) {
	#crm .sec09 .inner .box01 {
	    grid-template-columns: repeat(1, 1fr);
	}
	#crm .sec09 .inner .box01 .item .arrow {
	    top: auto;
	    left: 50%;
	    right: auto;
	    bottom: -1.5em;
	    transform: translateX(-50%) rotate(90deg);
	}
	#crm .sec09 .inner .box01 .item p {
	    text-align: center;
	}
}
/* ------------------------------------------- */
#crm .sec10 {
	border-bottom: 1px solid var(--color-GrayB);
}
#crm .sec10 .inner .form-layout {
    border-top: none;
}
#crm .sec10 .inner .box01 {
    display: grid;
    gap: .5em;
}
@media screen and (max-width: 768px) {
}

/* ----------------------------------------------
    subsc
---------------------------------------------- */
#subsc #contents {
    background: var(--color-GrayP);
}
#subsc .sec01 .inner .box01 {
    display: flex;
    gap: 1em;
    align-items: center;
    justify-content: center;
}
#subsc .sec01 .inner .box01 .item {
    padding: 1em 1.5em;
    display: flex;
    gap: .5em;
    align-items: center;
    justify-content: center;
}
#subsc .sec01 .inner .box02 .block01 {
    border-bottom: 1px solid var(--color-GrayS);
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#subsc .sec01 .inner .box02 .block02 ul {
    display: grid;
    gap: .5em;
    grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 768px) {
	#subsc .sec01 .inner .box01 {
	    gap: .5em;
	    flex-direction: column;
	}
	#subsc .sec01 .inner .box01 .item {
	    width: 100%;
	}
}
/* ------------------------------------------- */
#subsc .sec02 .inner .box01 {
    display: grid;
    gap: 1.5em;
    grid-template-columns: repeat(3, 1fr);
}
#subsc .sec02 .inner .box01 .item {
    padding: 2em 1.5em;
    display: flex;
    flex-direction: column;
}
#subsc .sec02 .inner .box01 .item .icon {
    width: 5em;
    aspect-ratio: 1;
    border-radius: 100vmax;
    display: grid;
    place-items: center;
}
#subsc .sec02 .inner .box01 .item p {
    margin: 0 0 .5em;
}
#subsc .sec02 .inner .box01 .item ul {
    margin: auto 0 0;
}
@media screen and (max-width: 768px) {
	#subsc .sec02 .inner .box01 {
	    gap: .5em;
	    grid-template-columns: repeat(1, 1fr);
	}
}
/* ------------------------------------------- */
#subsc .sec03 .inner .box01 {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(5, 1fr);
}
#subsc .sec03 .inner .box01 .item {
	padding: 2em 1.5em;
    display: grid;
    gap: .5em;
    align-content: flex-start;
}
#subsc .sec03 .inner .box01 .item .icon {
    width: 4em;
    aspect-ratio: 1;
    border: 2px solid;
    border-radius: 100vmax;
    display: grid;
    place-items: center;
}
#subsc .sec03 .inner .box01 .item .arrow {
    position: absolute;
    top: 50%;
    right: -1.4em;
    transform: translateY(-50%);
    z-index: 1;
}
@media screen and (max-width: 768px) {
	#subsc .sec03 .inner .box01 {
	    grid-template-columns: repeat(1, 1fr);
	}
	#subsc .sec03 .inner .box01 .item .arrow {
	    top: auto;
	    left: 50%;
	    right: auto;
	    bottom: -1.5em;
	    transform: translateX(-50%) rotate(90deg);
	}
	#subsc .sec03 .inner .box01 .item p {
	    text-align: center;
	}
}
/* ------------------------------------------- */
#subsc .sec04 .inner .box01 {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(3, 1fr);
}
#subsc .sec04 .inner .box01 .item {
	padding: 2em 1.5em;
    display: grid;
    gap: 1em;
    align-content: flex-start;
}
#subsc .sec04 .inner .box01 .item .num {
    line-height: 1;
    position: absolute;
    top: -2em;
    left: 1em;
}
#subsc .sec04 .inner .box01 .item .icon {
    width: 4em;
    aspect-ratio: 1;
    border-radius: 100vmax;
    display: grid;
    place-items: center;
}
#subsc .sec04 .inner .box01 .item ul {
    display: grid;
    gap: .3em;
}
@media screen and (max-width: 768px) {
	#subsc .sec04 .inner .box01 {
	    gap: 2.5em;
	    grid-template-columns: repeat(1, 1fr);
	}
}
/* ------------------------------------------- */
@media screen and (max-width: 768px) {
}
/* ------------------------------------------- */
#subsc .sec06 .inner .box01 {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(4, 1fr);
}
#subsc .sec06 .inner .box01 .item {
    padding: 2em 1.5em;
    display: flex;
    flex-direction: column;
}
#subsc .sec06 .inner .box01 .item .icon {
    width: 5em;
    aspect-ratio: 1;
    border-radius: 100vmax;
    display: grid;
    place-items: center;
}
#subsc .sec06 .inner .box01 .item p {
    margin: 0 0 .5em;
}
@media screen and (max-width: 768px) {
	#subsc .sec06 .inner .box01 {
	    display: grid;
	    gap: .5em;
	    grid-template-columns: repeat(1, 1fr);
	}
}
/* ------------------------------------------- */
#subsc .sec07 .inner .box01 {
    display: grid;
    gap: 1em;
}
#subsc .sec07 .inner .box01 details {
    overflow: hidden;
    border: 1px solid var(--color-GrayS);
}
#subsc .sec07 .inner .box01 details summary {
    padding: 1em 1.5em;
    cursor: pointer;
    list-style: none;
    display: flex;
    gap: 1em;
    align-items: center;
    justify-content: space-between;
}
#subsc .sec07 .inner .box01 details summary::marker {
	content: "";
}
#subsc .sec07 .inner .box01 details summary::-webkit-details-marker {
	display: none;
}
#subsc .sec07 .inner .box01 details summary .fa-chevron-down {
    transition: transform 0.3s;
}
#subsc .sec07 .inner .box01 details[open] summary .fa-chevron-down {
    transform: rotate(180deg);
}
#subsc .sec07 .inner .box01 details .answer {
    padding: 1em 1.5em;
    border-top: 1px solid var(--color-GrayS);
}
@media screen and (max-width: 768px) {
}
/* ------------------------------------------- */
#subsc .sec08 .inner .box01 .box02 {
    display: flex;
    gap: 1em;
    align-items: center;
    justify-content: center;
}
#subsc .sec08 .inner .box01 .box02 .item {
    padding: .5em 1em;
    border: 1px solid;
    display: flex;
    gap: .5em;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width: 768px) {
	#subsc .sec08 .inner .box01 .box02 {
	    gap: .5em;
	    flex-direction: column;
	}
	#subsc .sec08 .inner .box01 .box02 .item {
	    width: 100%;
	}
}

/* ----------------------------------------------
    service
---------------------------------------------- */
#service #contents {
	background: var(--color-GrayP);
}
#service .sec01 .inner .list {
    display: grid;
    gap: 1em;
    grid-template-columns: 1fr 1fr 1fr;
}
#service .sec01 .inner .list dl {
    display: grid;
    gap: 1em;
    align-content: flex-start;
}
#service .sec01 .inner .list dl > div {
    padding: 1em;
}
#service .sec01 .inner .list dl > div dt {
    margin: 0 0 .5em;
    padding: 0 0 .5em;
    border-bottom: 2px solid var(--color-Gold);
    display: flex;
    gap: .5em;
    align-items: center;
}
#service .sec01 .inner .list dl > div dd:not(:last-of-type) {
    border-bottom: 1px solid var(--color-GrayS);
}
#service .sec01 .inner .list dl > div dd a {
    padding: .3em;
    display: flex;
    gap: .5em;
    align-items: center;
    justify-content: space-between;
}
#service .sec01 .inner .list dl > div dd i {
    color: var(--color-GrayM);
}

@media (hover: hover) {
	#service .sec01 .inner .list dl > div dd a {
		transition: background ease .3s;
	}
	#service .sec01 .inner .list dl > div dd a:hover {
		opacity: 1;
		background: var(--color-GrayL);
	}
}
@media screen and (max-width: 768px) {
	#service .sec01 .inner .list {
	    grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------
    case
---------------------------------------------- */
#case .sec01 .inner .box01 {
    display: flex;
    gap: 3em;
    align-items: center;
    justify-content: center;
}
#case .sec01 .inner .box02 .btn {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(4, 1fr);
}
#case .sec01 .inner .box02 .btn button {
    padding: .5em 1em;
    border: 1px solid var(--color-GrayM);
    display: flex;
    gap: .5em;
    align-items: center;
}
#case .sec01 .inner .box03 {
    display: grid;
    gap: 1.5em;
}
#case .sec01 .inner .box03 .item {
    display: grid;
    gap: 2em;
}
#case .sec01 .inner .box03 .item .block01 {
    display: grid;
    gap: 2em;
    grid-template-columns: 2fr 3fr;
}
#case .sec01 .inner .box03 .item .block01 .left {
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
#case .sec01 .inner .box03 .item .block01 .right {
    display: grid;
    gap: 1em;
    align-content: flex-start;
}
#case .sec01 .inner .box03 .item .block01 .right .cate ul {
    display: flex;
    gap: .5em;
    flex-wrap: wrap;
    align-items: center;
}
#case .sec01 .inner .box03 .item .block01 .right .cate ul li {
    padding: .2em .5em;
    border: 1px solid var(--color-GrayS);
    border-radius: .3em;
    display: flex;
    gap: .5em;
    align-items: center;
}
#case .sec01 .inner .box03 .item .block01 .right .effect {
	padding: 1em 0 0;
	border-top: 1px solid var(--color-GrayS);
}
#case .sec01 .inner .box03 .item .block01 .right .effect ul {
    display: flex;
    gap: 0 1em;
    flex-wrap: wrap;
    align-items: center;
}
#case .sec01 .inner .box03 .item .block01 .right .effect ul li {
    display: flex;
    gap: .2em;
    align-items: center;
}
#case .sec01 .inner .box03 .item .block02 .name {
	margin: .5em 0 0;
    display: flex;
    gap: .5em;
    align-items: center;
    justify-content: flex-end;
}
#case .sec01 .inner .box03 .item .block02 .name::before {
    content: "";
    width: 2em;
    height: 1px;
    background: var(--color-Black);
}
@media screen and (max-width: 768px) {
	#case .sec01 .inner .box01 {
	    gap: 2em;
	}
	#case .sec01 .inner .box02 .btn {
		gap: .5em;
	    grid-template-columns: repeat(2, 1fr);
	}
	#case .sec01 .inner .box03 .item .block01 {
	    grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------
    contact
---------------------------------------------- */
#contact .sec01 .inner .box01 {
    display: grid;
    gap: .5em 1em;
    grid-template-columns: repeat(3, 1fr);
}
#contact .sec01 .inner .box01 .item {
    padding: 1.5em;
    line-height: 1;
    display: grid;
    gap: .5em;
    align-content: flex-start;
}
#contact .sec01 .inner .box01 .item .icon {
    width: 4em;
    aspect-ratio: 1;
    border-radius: 100vmax;
    display: grid;
    place-items: center;
}
#contact .sec01 .inner .box01 .item .hours {
    margin: auto 0 0;
}
@media screen and (max-width: 768px) {
	#contact .sec01 .inner .box01 {
	    grid-template-columns: repeat(1, 1fr);
	}
	#contact .sec01 .inner .box01 .item .icon {
	    width: 3em;
	}
}

/* ----------------------------------------------
    price
---------------------------------------------- */
#price .sec01 .inner .box01 {
    padding: 2em;
}
#price .sec01 .inner .box01 .block {
    display: flex;
    gap: 1em 4em;
    justify-content: center;
}
#price .sec01 .inner .box01 .block .right ul {
    display: grid;
    gap: .3em 1em;
    grid-template-columns: repeat(2, 1fr);
}
#price .sec01 .inner .box01 .block .right ul li {
    display: flex;
    gap: .3em;
    align-items: baseline;
}
@media screen and (max-width: 768px) {
	#price .sec01 .inner .box01 .block {
	    flex-direction: column;
	}
	#price .sec01 .inner .box01 .block .right ul {
	    grid-template-columns: repeat(1, 1fr);
	}
}
/* ------------------------------------------- */
#price .sec02 .inner .table02 a {
    width: fit-content;
    padding: .5em 1em;
    border: 1px solid var(--color-GrayM);
    display: block;
}
@media screen and (max-width: 768px) {
}
/* ------------------------------------------- */
#price .sec03 .inner .box01 {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(4, 1fr);
}
#price .sec03 .inner .box01 .item {
    padding: 2em;
}
#price .sec03 .inner .box01 .item .icon {
    width: 4em;
    aspect-ratio: 1;
    border-radius: 100vmax;
    display: grid;
    place-items: center;
}
@media screen and (max-width: 768px) {
	#price .sec03 .inner .box01 {
	    grid-template-columns: repeat(1, 1fr);
	}
}
/* ------------------------------------------- */
#price .sec04 .inner .box01 {
    padding: 2em;
}
@media screen and (max-width: 768px) {
}
/* ------------------------------------------- */
#price .sec05 .inner dl {
    display: grid;
    gap: 1em;
}
#price .sec05 .inner dl > div {
    padding: 1em;
    display: grid;
    gap: .5em;
}
#price .sec05 .inner dl div dt {
    display: flex;
    gap: 1em;
    align-items: baseline;
}
#price .sec05 .inner dl div dt .mark {
    width: 2em;
    aspect-ratio: 1;
    border-radius: 100vmax;
    display: grid;
    flex-shrink: 0;
    place-items: center;
}
@media screen and (max-width: 768px) {
}

/* ----------------------------------------------
    security
---------------------------------------------- */
#security .sec01 .inner .box01 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
}
#security .sec01 .inner .box01 .item {
    padding: 1.5em;
    display: grid;
    gap: .5em;
    align-content: flex-start;
}
#security .sec01 .inner .box01 .item .icon {
    width: 4em;
    aspect-ratio: 1;
    margin-bottom: .5em;
    border-radius: 100vmax;
    display: grid;
    place-items: center;
}
#security .sec01 .inner .box03 {
    border: 1px solid var(--color-GrayS);
    display: grid;
    gap: .5em;
}
#security .sec01 .inner .box03 dl {
    display: grid;
    gap: .3em;
}
#security .sec01 .inner .box03 dl div {
    display: flex;
}
@media screen and (max-width: 768px) {
	#security .sec01 .inner .box01 {
	    gap: .5em;
	    grid-template-columns: repeat(1, 1fr);
	}
	#security .sec01 .inner .box01 .item .icon {
	    width: 3em;
	    margin-bottom: 0;
	}
	#security .sec01 .inner .box03 dl div {
        flex-direction: column;
	}
}

/* ----------------------------------------------
    cookie
---------------------------------------------- */
#cookie .sec01 .inner .box01 {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(2, 1fr);
}
#cookie .sec01 .inner .box01 .item {
    padding: 1.5em;
    border: 2px solid var(--color-GrayS);
    display: grid;
    gap: .5em;
    align-content: flex-start;
}
#cookie .sec01 .inner .box01 .item .head {
    display: flex;
    gap: .5em;
    align-items: center;
    justify-content: space-between;
}
#cookie .sec01 .inner .box01 .item .head .title {
    display: flex;
    gap: .3em;
    align-items: center;
}
#cookie .sec01 .inner .box01 .item .head .title .badge {
    padding: 0 .5em;
}
#cookie .sec01 .inner .box01 .item .head .title .badge span {
    display: block;
}
#cookie .sec01 .inner .box01 .item .head .switch {
    width: 40px;
    height: 20px;
    padding: 0 3px;
    border-radius: 100vmax;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
}
#cookie .sec01 .inner .box01 .item .head .switch .slider {
    content: "";
    width: 14px;
    aspect-ratio: 1;
    background: #ffffff;
    border-radius: 100vmax;
    transition: transform 0.2s;
}
#cookie .sec01 .inner .box01 .item .head .switch:has(input:checked) {
	background: var(--color-Blue);
}
#cookie .sec01 .inner .box01 .item .head .switch:has(input:checked) .slider {
	transform: translateX(20px);
}
#cookie .sec01 .inner .box01 .item .head .switch.disabled {
	cursor: not-allowed;
}
#cookie .sec01 .inner .box01 .item ul {
    padding: 0 0 0 1.5em;
    list-style: disc;
}
#cookie .sec01 .inner .btn01 {
    display: flex;
    justify-content: center;
}
@media screen and (max-width: 768px) {
	#cookie .sec01 .inner .box01 {
	    gap: .5em;
	    grid-template-columns: repeat(1, 1fr);
	}
	#cookie .sec01 .inner .box01 .item {
	    padding: 1.5em 1em;
	}
	#cookie .sec01 .inner .btn01 {
	    flex-direction: column;
	}
}
/* ------------------------------------------- */
#cookie .sec02 .inner .box01 {
    display: grid;
    gap: .5em 1em;
    grid-template-columns: repeat(4, 1fr);
}
#cookie .sec02 .inner .box01 .item {
    padding: 2em 1.5em;
    display: grid;
    gap: 1em;
    align-content: flex-start;
}
#cookie .sec02 .inner .box02 ul {
    padding: 0 0 0 1.5em;
    list-style: disc;
}
#cookie .sec02 .inner .box03 {
    display: grid;
    gap: .5em;
}
#cookie .sec02 .inner .box03 dl {
    display: grid;
    gap: .3em;
}
#cookie .sec02 .inner .box03 dl div {
    display: flex;
}
@media screen and (max-width: 768px) {
	#cookie .sec02 .inner .box01 {
	    grid-template-columns: repeat(1, 1fr);
	}
	#cookie .sec02 .inner .box03 dl div {
        flex-direction: column;
	}
}

/* ----------------------------------------------
    faq
---------------------------------------------- */
#faq .sec01 .inner dl {
    display: grid;
    gap: 2em;
}
#faq .sec01 .inner dl > div {
    display: grid;
    gap: 1em;
}
#faq .sec01 .inner dl div dt {
    padding: 1em;
    display: flex;
    gap: 1em;
    align-items: baseline;
}
#faq .sec01 .inner dl div dt .mark {
    width: 2em;
    aspect-ratio: 1;
    border-radius: 100vmax;
    display: grid;
    flex-shrink: 0;
    place-items: center;
}
#faq .sec01 .inner dl div dd {
    padding: 0 1em;
}
@media screen and (max-width: 768px) {
}

/* ----------------------------------------------
    terms
---------------------------------------------- */
#terms .sec01 .inner ol {
    padding: 0 0 0 1.5em;
    list-style: auto;
    display: grid;
    gap: .3em;
}
#terms .sec01 .inner .box01 {
    border: 1px solid var(--color-GrayS);
    display: grid;
    gap: .5em;
}
#terms .sec01 .inner .box01 dl {
    display: grid;
    gap: .3em;
}
#terms .sec01 .inner .box01 dl div {
    display: flex;
}
@media screen and (max-width: 768px) {
	#terms .sec01 .inner .box01 dl div {
        flex-direction: column;
	}
}

/* ----------------------------------------------
    legal
---------------------------------------------- */
@media screen and (max-width: 768px) {
	#legal .sec01 .inner .table01 > div {
	    grid-template-columns: 1fr;
	}
	#legal .sec01 .inner .table01 > div dt {
	    padding: .5em 1em;
	}
	#legal .sec01 .inner .table01 > div dd {
	    padding: .5em 1em 1em;
	}
}

/* ----------------------------------------------
    privacy
---------------------------------------------- */
#privacy .sec01 .inner ol {
    padding: 0 0 0 1.5em;
    list-style: auto;
    display: grid;
    gap: .3em;
}
#privacy .sec01 .inner .box01 {
    border: 1px solid var(--color-GrayS);
    display: grid;
    gap: .5em;
}
#privacy .sec01 .inner .box01 dl {
    display: grid;
    gap: .3em;
}
#privacy .sec01 .inner .box01 dl div {
    display: flex;
}
@media screen and (max-width: 768px) {
	#privacy .sec01 .inner .box01 dl div {
        flex-direction: column;
	}
}

/* ----------------------------------------------
    product
---------------------------------------------- */
#product .content-wrapper {
    display: grid;
    gap: 2em;
    grid-template-columns: 280px 1fr;
    align-items: flex-start;
}
#product #sidebar {
    padding: 1.5em;
    position: sticky;
    top: 1em;
}
#product #sidebar .sidebar-title {
    padding: 0 0 1em;
    border-bottom: 2px solid var(--color-Gold);
    display: flex;
    gap: .5em;
    align-items: center;
}
#product #sidebar .sidebar-nav ul {
    display: grid;
    gap: .3em;
}
#product #sidebar .sidebar-nav ul li a {
    padding: .8em 1em;
    border-radius: .3em;
    display: flex;
    gap: .5em;
    align-items: center;
    transition: background 0.3s;
}
#product #sidebar .sidebar-nav ul li a.active {
    background: var(--color-GrayL);
    font-weight: 700;
}
@media (hover: hover) {
    #product #sidebar .sidebar-nav ul li a:hover {
        background: var(--color-GrayL);
    }
}
@media screen and (max-width: 768px) {
    #product .content-wrapper {
        grid-template-columns: 1fr;
    }
    #product #sidebar {
        position: static;
    }
}
/* ------------------------------------------- */
#product .sec01 {
    padding: 4em 0;
}
#product .sec01 .hero-stats {
    display: flex;
    gap: 3em;
    align-items: center;
    justify-content: center;
}
#product .sec01 .hero-stats .item {
    display: grid;
    gap: .3em;
    text-align: center;
}
#product .sec01 .hero-cta {
    display: flex;
    gap: 1em;
    align-items: stretch;
    justify-content: center;
}
#product .sec01 .hero-cta .btn01 {
    display: flex;
}
#product .sec01 .hero-cta .btn01 a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5em;
}
@media screen and (max-width: 768px) {
    #product .sec01 .hero-stats {
        gap: 1.5em;
    }
    #product .sec01 .hero-cta {
        flex-direction: column;
    }
}
/* ------------------------------------------- */
#product .sec02 .inner .box01 {
    display: grid;
    gap: 1.5em;
    grid-template-columns: repeat(4, 1fr);
}
#product .sec02 .inner .box01 .item {
    padding: 2em 1.5em;
    display: grid;
    gap: .5em;
    align-content: flex-start;
}
#product .sec02 .inner .box01 .item .icon {
    width: 4.5em;
    aspect-ratio: 1;
    border-radius: 100vmax;
    display: grid;
    place-items: center;
}
@media screen and (max-width: 768px) {
    #product .sec02 .inner .box01 {
        gap: .5em;
        grid-template-columns: repeat(1, 1fr);
    }
}
/* ------------------------------------------- */
#product .sec03 .tab-navigation {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(4, 1fr);
}
#product .sec03 .tab-navigation .tab-button {
    padding: 1em 1.5em;
    border: none;
    cursor: pointer;
    display: flex;
    gap: .5em;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
#product .sec03 .tab-navigation .tab-button[aria-selected="true"] {
    background: var(--color-Gold);
    color: var(--color-White);
}
#product .sec03 .tab-navigation .tab-button[aria-selected="true"] i {
    color: var(--color-White);
}
#product .sec03 .tab-content .tab-panel {
    display: none;
}
#product .sec03 .tab-content .tab-panel:not([hidden]) {
    display: block;
}
#product .sec03 .feature-list {
    display: grid;
    gap: 1em;
}
#product .sec03 .feature-list .feature-item {
    display: flex;
    gap: 1em;
    align-items: flex-start;
}
#product .sec03 .feature-list .feature-item .icon {
    width: 2em;
    aspect-ratio: 1;
    border-radius: 100vmax;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}
#product .sec03 .feature-list .feature-item .text {
    flex: 1;
}
@media screen and (max-width: 768px) {
    #product .sec03 .tab-navigation {
        gap: .5em;
        grid-template-columns: repeat(2, 1fr);
    }
    #product .sec03 .tab-navigation .tab-button {
        padding: .8em 1em;
        flex-direction: column;
    }
}
/* ------------------------------------------- */
#product .sec04 .inner .box02 {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(2, 1fr);
}
#product .sec04 .inner .box02 .item {
    padding: 2em 1.5em;
    display: flex;
    gap: 1.5em;
    align-items: flex-start;
}
#product .sec04 .inner .box02 .item .icon {
    width: 4em;
    aspect-ratio: 1;
    border-radius: 100vmax;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}
#product .sec04 .inner .box02 .item .text {
    flex: 1;
}
@media screen and (max-width: 768px) {
    #product .sec04 .inner .box02 {
        gap: .5em;
        grid-template-columns: repeat(1, 1fr);
    }
}
/* ------------------------------------------- */
#product .sec05 .case-list {
    display: grid;
    gap: 1.5em;
}
#product .sec05 .case-list .case-item {
    padding: 2em;
}
#product .sec05 .case-list .case-item .stats {
    display: flex;
    gap: 2em;
    align-items: center;
    justify-content: flex-start;
}
#product .sec05 .case-list .case-item .stats .stat-item {
    display: grid;
    gap: .3em;
    text-align: center;
}
@media screen and (max-width: 768px) {
    #product .sec05 .case-list .case-item {
        padding: 1.5em;
    }
    #product .sec05 .case-list .case-item .stats {
        gap: 1em;
    }
}
/* ------------------------------------------- */
#product .sec06 .faq-list {
    display: grid;
    gap: 1em;
}
#product .sec06 .faq-list .faq-item {
    padding: 1.5em;
}
#product .sec06 .faq-list .faq-item h3 {
    display: flex;
    gap: .5em;
    align-items: baseline;
}
/* ------------------------------------------- */
#product .sec07 .cta-buttons {
    display: flex;
    gap: 1em;
    align-items: center;
    justify-content: center;
}
#product .sec07 .trust-badges .badges {
    display: flex;
    gap: 1.5em;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
#product .sec07 .trust-badges .badge {
    display: flex;
    gap: .3em;
    align-items: center;
}
@media screen and (max-width: 768px) {
    #product .sec07 .cta-buttons {
        flex-direction: column;
    }
    #product .sec07 .trust-badges .badges {
        gap: 1em;
        flex-direction: column;
    }
}

/* ----------------------------------------------
    news
---------------------------------------------- */
#news #contents,
#news-detail #contents {
	background: var(--color-GrayP);
}
/* カテゴリタグ共通（news / news-detail） */
:is(#news, #news-detail) .tag {
    padding: .3em .8em;
    border-radius: .3em;
    line-height: 1;
    display: inline-block;
    flex-shrink: 0;
}
:is(#news, #news-detail) .tag.cat-news {
    color: #fff;
    background: var(--color-Gold);
}
:is(#news, #news-detail) .tag.cat-press {
    color: #fff;
    background: var(--color-Blue);
}
:is(#news, #news-detail) .tag.cat-maintenance {
    color: #fff;
    background: var(--color-Red);
}
:is(#news, #news-detail) .tag.cat-event {
    color: #fff;
    background: var(--color-Green);
}
:is(#news, #news-detail) .tag.cat-update {
    color: #fff;
    background: var(--color-GrayB);
}
/* ------------------------------------------- */
#news .sec01 .inner .box01 .filter {
    display: flex;
    gap: .5em;
    flex-wrap: wrap;
    justify-content: center;
}
#news .sec01 .inner .box01 .filter li a {
    padding: .6em 1.2em;
    background: #fff;
    border: 1px solid var(--color-GrayS);
    border-radius: 100vmax;
    display: block;
}
#news .sec01 .inner .box01 .filter li a.current {
    color: #fff;
    background: var(--color-Black);
    border-color: var(--color-Black);
}
@media (hover: hover) {
	#news .sec01 .inner .box01 .filter li a {
		transition: background ease .3s;
	}
	#news .sec01 .inner .box01 .filter li a:hover {
		opacity: 1;
		background: var(--color-GrayL);
	}
	#news .sec01 .inner .box01 .filter li a.current:hover {
		background: var(--color-Black);
	}
}
@media screen and (max-width: 768px) {
	#news .sec01 .inner .box01 .filter {
	    gap: .3em;
	}
	#news .sec01 .inner .box01 .filter li a {
	    padding: .5em 1em;
	}
}
/* ------------------------------------------- */
#news .sec02 .inner .box01 {
    display: grid;
    gap: .8em;
}
#news .sec02 .inner .box01 .item a {
    padding: 1.2em 1.5em;
    display: flex;
    gap: 1em;
    align-items: center;
}
#news .sec02 .inner .box01 .item .date {
    flex-shrink: 0;
}
#news .sec02 .inner .box01 .item .title {
    flex: 1;
    line-height: 1.5;
}
#news .sec02 .inner .box01 .item .arrow {
    color: var(--color-GrayM);
    flex-shrink: 0;
}
@media (hover: hover) {
	#news .sec02 .inner .box01 .item a {
		transition: background ease .3s;
	}
	#news .sec02 .inner .box01 .item a:hover {
		opacity: 1;
		background: var(--color-GrayL);
	}
}
@media screen and (max-width: 768px) {
	#news .sec02 .inner .box01 .item a {
	    padding: 1em;
	    gap: .5em;
	    flex-wrap: wrap;
	}
	#news .sec02 .inner .box01 .item .title {
	    width: 100%;
	    order: 3;
	}
	#news .sec02 .inner .box01 .item .arrow {
	    display: none;
	}
}
/* ------------------------------------------- */
#news .sec03 .inner .pagination {
    display: flex;
    gap: .3em;
    align-items: center;
    justify-content: center;
}
#news .sec03 .inner .pagination li a {
    min-width: 2.5em;
    padding: .5em .8em;
    background: #fff;
    border: 1px solid var(--color-GrayS);
    border-radius: .3em;
    line-height: 1;
    display: flex;
    gap: .3em;
    align-items: center;
    justify-content: center;
}
#news .sec03 .inner .pagination li a.current {
    color: #fff;
    background: var(--color-Black);
    border-color: var(--color-Black);
}
#news .sec03 .inner .pagination li:is(.prev, .next) a {
    padding: .5em 1em;
}
@media (hover: hover) {
	#news .sec03 .inner .pagination li a {
		transition: background ease .3s;
	}
	#news .sec03 .inner .pagination li a:hover {
		opacity: 1;
		background: var(--color-GrayL);
	}
	#news .sec03 .inner .pagination li a.current:hover {
		background: var(--color-Black);
	}
}
@media screen and (max-width: 768px) {
	#news .sec03 .inner .pagination {
	    gap: .2em;
	    flex-wrap: wrap;
	}
	#news .sec03 .inner .pagination li a {
	    min-width: 2.2em;
	    padding: .5em;
	}
	#news .sec03 .inner .pagination li:is(.prev, .next) a {
	    padding: .5em .8em;
	}
}

/* ----------------------------------------------
    news-detail
---------------------------------------------- */
#news-detail .sec01 .inner .box01 .meta {
    display: flex;
    gap: 1em;
    align-items: center;
}
#news-detail .sec01 .inner .box01 h3 {
    line-height: 1.4;
}
@media screen and (max-width: 768px) {
	#news-detail .sec01 .inner .box01 .meta {
	    gap: .5em;
	    flex-wrap: wrap;
	}
}
/* ------------------------------------------- */
#news-detail .sec02 .inner .box01 {
    padding: 2.5em 2em;
}
#news-detail .sec02 .inner .box01 .body {
    display: grid;
    gap: 1.5em;
}
#news-detail .sec02 .inner .box01 .body p {
    line-height: 1.8;
}
#news-detail .sec02 .inner .box01 .body h4 {
    padding: 0 0 .5em .7em;
    border-left: .4em solid var(--color-Gold);
    border-bottom: 1px solid var(--color-GrayS);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.4;
}
#news-detail .sec02 .inner .box01 .body ul {
    padding: 0 0 0 1.5em;
    list-style: disc;
    display: grid;
    gap: .3em;
}
#news-detail .sec02 .inner .box01 .body ol {
    padding: 0 0 0 1.5em;
    list-style: decimal;
    display: grid;
    gap: .3em;
}
#news-detail .sec02 .inner .box01 .body blockquote {
    padding: 1em 1.2em;
    background: var(--color-GrayL);
    border-left: 3px solid var(--color-Gold);
    line-height: 1.7;
}
#news-detail .sec02 .inner .box01 .body figure img {
    max-width: 100%;
    height: auto;
}
#news-detail .sec02 .inner .box01 .body a {
    color: var(--color-Blue);
    text-decoration: underline;
}
@media screen and (max-width: 768px) {
	#news-detail .sec02 .inner .box01 {
	    padding: 1.5em 1.2em;
	}
	#news-detail .sec02 .inner .box01 .body {
	    gap: 1.2em;
	}
	#news-detail .sec02 .inner .box01 .body h4 {
	    font-size: 1.6rem;
	}
}
/* ------------------------------------------- */
#news-detail .sec03 .inner .box01 {
    display: grid;
    gap: .5em;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}
#news-detail .sec03 .inner .box01 li a {
    display: flex;
    gap: .5em;
    align-items: center;
}
#news-detail .sec03 .inner .box01 .prev a {
    justify-content: flex-start;
}
#news-detail .sec03 .inner .box01 .list a {
    padding: .8em 1.5em;
    justify-content: center;
}
#news-detail .sec03 .inner .box01 .next a {
    justify-content: flex-end;
}
@media (hover: hover) {
	#news-detail .sec03 .inner .box01 .list a {
		transition: background ease .3s;
	}
	#news-detail .sec03 .inner .box01 .list a:hover {
		opacity: 1;
		background: var(--color-GrayL);
	}
}
@media screen and (max-width: 768px) {
	#news-detail .sec03 .inner .box01 {
	    gap: .8em;
	    grid-template-columns: 1fr;
	}
	#news-detail .sec03 .inner .box01 .prev a,
	#news-detail .sec03 .inner .box01 .next a {
	    justify-content: center;
	}
	#news-detail .sec03 .inner .box01 .list {
	    order: -1;
	}
}

/* ----------------------------------------------
    signup
---------------------------------------------- */
:is(#signup, #signup-confirm, #signup-complete) #contents {
	background: var(--color-GrayP);
}
/* ステップインジケーター */
:is(#signup, #signup-confirm, #signup-complete) .steps {
    max-width: 600px;
    margin: 0 auto;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, 1fr);
}
:is(#signup, #signup-confirm, #signup-complete) .steps .item {
    padding: .5em;
    display: grid;
    gap: .5em;
    place-items: center;
    position: relative;
}
:is(#signup, #signup-confirm, #signup-complete) .steps .item:not(:last-child)::after {
    content: "";
    width: calc(100% - 3em);
    height: 2px;
    background: var(--color-GrayS);
    position: absolute;
    top: 1.5em;
    left: calc(50% + 1.5em);
    transform: translateY(-50%);
    z-index: 0;
}
:is(#signup, #signup-confirm, #signup-complete) .steps .item.done:not(:last-child)::after {
    background: var(--color-Gold);
}
:is(#signup, #signup-confirm, #signup-complete) .steps .item .num {
    width: 3em;
    aspect-ratio: 1;
    background: #fff;
    border: 2px solid var(--color-GrayS);
    border-radius: 100vmax;
    color: var(--color-GrayD);
    font-weight: 700;
    display: grid;
    place-items: center;
    position: relative;
    z-index: 1;
}
:is(#signup, #signup-confirm, #signup-complete) .steps .item.current .num {
    color: #fff;
    background: var(--color-Gold);
    border-color: var(--color-Gold);
}
:is(#signup, #signup-confirm, #signup-complete) .steps .item.done .num {
    color: #fff;
    background: var(--color-Gold);
    border-color: var(--color-Gold);
}
:is(#signup, #signup-confirm, #signup-complete) .steps .item .label {
    color: var(--color-GrayD);
}
:is(#signup, #signup-confirm, #signup-complete) .steps .item.current .label,
:is(#signup, #signup-confirm, #signup-complete) .steps .item.done .label {
    color: var(--color-Black);
}
@media screen and (max-width: 768px) {
	:is(#signup, #signup-confirm, #signup-complete) .steps .item .num {
	    width: 2.4em;
	}
	:is(#signup, #signup-confirm, #signup-complete) .steps .item:not(:last-child)::after {
	    top: 1.2em;
	    left: calc(50% + 1.2em);
	    width: calc(100% - 2.4em);
	}
}
/* ------------------------------------------- */
/* 入力フォーム */
#signup .sec01 .inner .box01 {
    padding: 2.5em 2em;
}
#signup .sec01 .inner .box01 .title02 {
    padding: 0 0 .5em;
}
#signup .sec01 .inner .box01 .title02 h3 i {
    margin-right: .3em;
}
#signup .sec01 .inner .box01 .form-item .right .note {
    margin: .3em 0 0;
}
#signup .sec01 .inner .agree .check {
    display: grid;
    gap: .5em;
    justify-content: center;
}
#signup .sec01 .inner .agree .check li label .required {
    margin-left: .5em;
    padding: .3em .5em;
    border-radius: .3em;
    font-size: 1.2rem;
    line-height: 1;
    display: inline-block;
}
#signup .sec01 .inner .submit {
    display: flex;
    gap: 1em;
    justify-content: center;
}
#signup .sec01 .inner .submit button {
    height: 55px;
    display: flex;
    gap: .5em;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
@media screen and (max-width: 768px) {
	#signup .sec01 .inner .box01 {
	    padding: 1.5em 1.2em;
	}
	#signup .sec01 .inner .submit {
	    gap: .5em;
	    flex-direction: column;
	    align-items: center;
	}
}
/* ------------------------------------------- */
/* 確認画面 */
#signup-confirm .sec01 .inner .box01 {
    padding: 2.5em 2em;
}
#signup-confirm .sec01 .inner .box01 .title02 {
    padding: 0 0 .5em;
}
#signup-confirm .sec01 .inner .box01 .title02 h3 i {
    margin-right: .3em;
}
#signup-confirm .sec01 .inner .submit {
    display: flex;
    gap: 1em;
    justify-content: center;
}
#signup-confirm .sec01 .inner .submit button {
    height: 55px;
    display: flex;
    gap: .5em;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
@media screen and (max-width: 768px) {
	#signup-confirm .sec01 .inner .box01 {
	    padding: 1.5em 1.2em;
	}
	#signup-confirm .sec01 .inner .submit {
	    gap: .5em;
	    flex-direction: column-reverse;
	    align-items: center;
	}
}
/* ------------------------------------------- */
/* 完了画面 */
#signup-complete .sec01 .inner .box01 {
    max-width: 720px;
    margin: 0 auto;
    padding: 3em 2em;
}
#signup-complete .sec01 .inner .box01 .icon {
    width: 5em;
    aspect-ratio: 1;
    border-radius: 100vmax;
    display: grid;
    place-items: center;
}
#signup-complete .sec01 .inner .box01 .btn01 a {
    height: 55px;
    display: flex;
    gap: .5em;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width: 768px) {
	#signup-complete .sec01 .inner .box01 {
	    padding: 2em 1.2em;
	}
	#signup-complete .sec01 .inner .box01 .icon {
	    width: 4em;
	}
}

/* ----------------------------------------------
    service-category
---------------------------------------------- */
#service-category #contents {
	background: var(--color-GrayP);
}
#service-category .sec01 .inner .box01 {
    padding: 2em;
    display: flex;
    gap: 1.5em;
    align-items: center;
}
#service-category .sec01 .inner .box01 .icon {
    width: 5em;
    aspect-ratio: 1;
    border-radius: 100vmax;
    display: grid;
    flex-shrink: 0;
    place-items: center;
}
#service-category .sec01 .inner .box01 .text {
    flex: 1;
}
@media screen and (max-width: 768px) {
	#service-category .sec01 .inner .box01 {
	    padding: 1.5em;
	    gap: 1em;
	    flex-direction: column;
	    text-align: center;
	}
}
/* ------------------------------------------- */
#service-category .sec02 .inner .box01 {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(2, 1fr);
}
#service-category .sec02 .inner .box01 .item {
    padding: 1.5em;
    display: flex;
    flex-direction: column;
    gap: .8em;
}
#service-category .sec02 .inner .box01 .item .head {
    padding: 0 0 .8em;
    border-bottom: 2px solid var(--color-Gold);
    display: flex;
    gap: .8em;
    align-items: center;
}
#service-category .sec02 .inner .box01 .item .head h4 {
    flex: 1;
}
#service-category .sec02 .inner .box01 .item p {
    flex: 1;
    line-height: 1.6;
}
#service-category .sec02 .inner .box01 .item .link {
    padding: .5em 0 0;
    border-top: 1px solid var(--color-GrayS);
    display: flex;
    gap: .5em;
    align-items: center;
    justify-content: space-between;
}
#service-category .sec02 .inner .box01 .item .link i {
    color: var(--color-GrayM);
}
@media (hover: hover) {
	#service-category .sec02 .inner .box01 .item {
		transition: background ease .3s;
	}
	#service-category .sec02 .inner .box01 .item:hover {
		opacity: 1;
		background: var(--color-GrayL);
	}
}
@media screen and (max-width: 768px) {
	#service-category .sec02 .inner .box01 {
	    grid-template-columns: 1fr;
	}
}
/* ------------------------------------------- */
#service-category .sec03 .inner .box01 {
    padding: 2em;
}
#service-category .sec03 .inner .box01 .cate-list {
    display: grid;
    gap: .5em;
    grid-template-columns: repeat(5, 1fr);
}
#service-category .sec03 .inner .box01 .cate-list li a {
    padding: 1em .5em;
    border: 1px solid var(--color-GrayS);
    border-radius: .3em;
    line-height: 1.4;
    display: flex;
    gap: .5em;
    align-items: center;
    justify-content: center;
}
@media (hover: hover) {
	#service-category .sec03 .inner .box01 .cate-list li a {
		transition: background ease .3s;
	}
	#service-category .sec03 .inner .box01 .cate-list li a:hover {
		opacity: 1;
		background: var(--color-GrayL);
	}
}
@media screen and (max-width: 768px) {
	#service-category .sec03 .inner .box01 {
	    padding: 1.5em;
	}
	#service-category .sec03 .inner .box01 .cate-list {
	    grid-template-columns: repeat(2, 1fr);
	}
}



				
.top-gold-service-link {
  display: grid;
  grid-template-columns: 40px 1fr 30px;
  align-items: center;
  gap: 15px;
  width: 100%;
  max-width: 400px;
  padding: 18px 25px;
  text-decoration: none;
  border-radius: 10px;
  
  background: linear-gradient(135deg, 
    #ad8c32 0%,
    #b39541 45%, 
    #c6ae4d 100% 
  );
  
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.3), 
    0 4px 15px rgba(0, 0, 0, 0.15);

  color: #ffffff;
  transition: transform 0.2s, filter 0.2s;
}

.gold-service-link:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.top-gold-service-link .btn-icon svg {
  width: 32px; 
  height: 32px;
  opacity: 0.9;
}

.top-gold-service-link .btn-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
      margin-top: 5px;
}

.top-gold-service-link .main-text {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

.top-gold-service-link .sub-text {
  font-size: 1.25rem;
  margin-top: 4px;
  font-weight: 500;
}

.top-gold-service-link .btn-arrow svg {
  width: 20px;
  height: 20px;
}