/* ========================================
   ページ共通
======================================== */
/* ========================================
   viewlink
======================================== */
p.viewlink a {
	position: relative;
	color: var(--color-headline-color);
	width: fit-content;
	display: block;
	padding-block: 1em 0.65em;
	padding-inline: 2.5em 4em;
	border-bottom: 1px solid var(--color-headline-color);
	transition: all 0.5s ease;
	white-space: nowrap;

	&:hover {
		color: var(--color-accent-color);
		border-bottom-color: var(--color-accent-color);
	}

	/* ホバー時のアニメーション */
	&:hover::after {
		background-color: #d67b93;
		transition: all 0.5s ease;
	}
}

/* 矢印 */
p.viewlink a::after {
	content: "";
	display: block;
	width: 2.75em;
	height: 0.5em;
	position: absolute;
	top: 2em;
	right: 0.25em;
	background-color: var(--color-headline-color, #000);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 48 5" xmlns="http://www.w3.org/2000/svg"><path d="M1 4H47L40.2058 0.5" stroke="black" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>') no-repeat center / contain;
	mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 48 5" xmlns="http://www.w3.org/2000/svg"><path d="M1 4H47L40.2058 0.5" stroke="black" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>') no-repeat center / contain;
	clip-path: inset(0 0 0 12px);
	transition: all 0.5s ease;
}

/* 背景が暗い場合のスタイル調整 */
.is-dark-section {

	/* リンク */
	p.viewlink a {
		color: var(--color-accent-color);
		border-bottom-color: var(--color-accent-color);

		&:hover {
			color: var(--color-dark-color);
			border-bottom-color: var(--color-dark-color);
		}

		/* ホバー時のアニメーション */
		&:hover::after {
			background-color: var(--color-dark-color);
			transition: all 0.5s ease;
		}
	}

	/* 矢印 */
	p.viewlink a::after {
		background-color: var(--color-accent-color);
	}
}

/* ========================================
   FAQ
======================================== */
/* .faq */
div.faq-details {
	counter-reset: qanumber 0;
}

details.qa-details {
	counter-increment: qanumber 1;
	letter-spacing: 0.1em;
}

.faq-details>div {
	display: grid;
	gap: 1.5em;
	font-family: var(--font-family-base_mincho);

	summary {
		/* display: list-item;以外を指定してデフォルトの三角形アイコンを消します */
		display: block;
	}

	summary::-webkit-details-marker {
		/* Safariで表示されるデフォルトの三角形アイコンを消します */
		display: none;
	}

	.summary_inner {
		cursor: pointer;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 1.08em 1.5em;
		background-color: var(--color-faq-bg-color);
		color: var(--color-headline-color);

		.question::before {
			content: "Q" counter(qanumber) ".　";
		}
	}

	.icon {
		display: block;
		position: relative;
		width: 16px;
		margin-left: 1em;
		flex-shrink: 0;
		transform-origin: bottom;
		transition: transform 0.4s;
	}

	/* is-openedクラスが付与されたときのスタイル */
	details.is-opened .icon {
		transform: rotate(-180deg);
	}

	/* アイコンのバーのスタイル */
	.icon::before,
	.icon::after {
		content: "";
		position: absolute;
		display: block;
		width: 10.5px;
		height: 1.5px;
		background-color: var(--color-main-color);
	}

	.icon::before {
		left: 0;
		transform: rotate(55deg);
	}

	.icon::after {
		right: 0;
		transform: rotate(-55deg);
	}

	/* --------アコーディオンの中身のスタイル-------- */
	.qa-content {
		overflow: clip;
		background-color: var(--color-main-color);
		color: var(--color-dark-color);
		box-sizing: content-box;
		padding-block: 0;
		/* details直下のタグにpaddingを設定すると挙動がおかしくなるので、ここには指定しない */
	}

	.content_inner {
		font-size: var(--base-font-size);
		padding: 1.125em 1.5em 0.5em 1.5em;
		line-height: 2;
		display: flex;
		color: var(--color-dark-color);

		&::before {
			content: "A" counter(qanumber) ".　";
			display: inline-block;
		}
	}

	.qa-details .qa-content {
		height: 0;
		overflow: hidden;
		transition: height 0.3s ease, opacity 0.3s ease;
		opacity: 0;
	}

	.qa-details[open] .qa-content {
		height: var(--accordion-height, auto);
		transition: height 0.3s ease, opacity 0.3s ease;
		opacity: 1;
	}
}

@media(width <=1024px) {

	/* .faq */
	.faq-details>div {
		>div {
			padding-inline: 1em;
		}

		/* 
  .qa-summary {
   width:80%;
  } */

		.content_inner {
			/* width: 100%; */
			word-break: break-all;
		}
	}
}

@media(width <=823px) {

	/* .faq */
	.faq-details>div {
		width: 90%;
		margin-inline: auto;
	}
}


/* 内部で使用するお問い合わせのボタン設定 */
p:has(a.linkbtn) {
	position: relative;
}
a.linkbtn {
	font-family: inherit;
	display: block;
	color: var(--color-accent-color);
	background-color: var(--color-main-color);
	border: 1px solid var(--color-accent-color);
	opacity: inherit;
	visibility: inherit;
	transition: inherit;
	width: fit-content;
	padding: clamp(0.625em, 0.3em + 0.4vw, 0.875em) 6em clamp(0.625em, 0.3em + 0.4vw, 0.875em) 2em;
	display: flex;
	align-items: center;

	&:hover {
		background-color: var(--color-text);
		color: #d69dad;
	}
}

/* 矢印 */
a.linkbtn::after {
	content: "";
	display: block;
	width: 3em;
	height: 0.5em;
	position: absolute;
	right: 1.25em;
	background-color: var(--color-accent-color, #DAA7B5);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 48 5" xmlns="http://www.w3.org/2000/svg"><path d="M1 4H47L40.2058 0.5" stroke="black" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>') no-repeat center / contain;
	mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 48 5" xmlns="http://www.w3.org/2000/svg"><path d="M1 4H47L40.2058 0.5" stroke="black" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>') no-repeat center / contain;
	transition: transform 0.3s ease;
}

/* ホバー時のアニメーション */
a.linkbtn:hover::after {
	transform: translateY(-50%) translateX(0.5em);
	background-color: #d67b93;
}

.width-narrow{
	width: var(--contents-blocknarrow-width);
	margin-inline: auto;
}

.single.single-post main[class*="category-"]{
	.wp-block-table{
		margin-block-end:1em;
	}
	/* table{
		width: auto;
	} */
}

/* テーブル 固定ページ */
body.page{
.wp-block-table {
	tr {
		display: flex;
		gap: 2em;
	}

	td,
	th {
		line-height: 2.4;
		letter-spacing: 0.12em;
		display: block;
		padding-block: 1.4em;
		border: none;
		border-bottom: 1px solid var(--color-dark-color);
	}
}
/* テーブル２列　狭い　広い */
figure.table2column{
	tr:first-child td {
		border-top: 1px solid var(--color-dark-color);
	}

	tr td:nth-child(1) {
		width: 25%;
		white-space: nowrap;
	}

	tr td:nth-child(2) {
		width: 75%;
		padding-inline-start: 3em;
	}
}
/* テーブル３列　thあり　狭い　広い　狭い */
figure.table3columnth {
	width: 100%;

	thead {
		border: none;
	}

	th,
	td {
		padding-inline: 2em;
		text-align: start;
	}

	th {
		border-top: 1px solid var(--color-dark-color);
	}

	tr th:nth-child(1),
	tr th:nth-child(3),
	tr td:nth-child(1),
	tr td:nth-child(3) {
		white-space: nowrap;
		width: 18%;
	}

	tr th:nth-child(2),
	tr td:nth-child(2) {
		width: 64%;
		padding-inline-start: 3em;
	}
}
}


/* 基本スタイル */
div.conect-contact {
	position: fixed;
	right: 0;
	top: 40%;
	z-index: 1000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1s ease-in-out;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	width: 2em;

	a {
		display: block;
		padding: 1.5em 0.5em;
		background-color: var(--color-main-color);
		color: var(--color-dark-color);
		text-decoration: none;
		font-size: clamp(0.875rem, 0.765rem + 0.29vw, 1rem);
		letter-spacing: 0.1em;
	}
}
div.conect-contact.is-visible {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 600px) {
  div.conect-contact {
    display: none !important;
  }
}



@media(600px >=width){
	.concept-home,
	.feature-home,
	.service-home,
	.works-home,
	.access-home,
	.news-home,
	.product_item-home{
		padding-inline: 1.25rem;
	}
}


@media(1024px >=width){
	.concept-home,
	.feature-home,
	.service-home,
	.works-home,
	.access-home,
	.news-home,
	.product_item-home{
		padding-inline: 1.25rem;
	}
}