@charset "utf-8";
/*------------------------------------------------------------
	デフォルトスタイル
------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figcaption, figure, section, footer, header, main, hgroup, menu, nav, summary {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	outline: 0;
	font-size: 1em;	
	box-sizing: border-box;
}
html {
	font-size: 62.5%;
}

@media all and (min-width: 1000px) and (max-width: 1500px) {
	html {
		font-size: calc(1000vw / 1366);
	}
}
@media all and (min-width: 1501px) {
	html {
		font-size: 68.6%;
	}
}
@media all and (max-width: 999px) {
    html {
        font-size: calc(1000vw / 375);
    }
}
body, table, input, textarea, select, option {
	font-family: YakuHanMP, "Noto Serif JP",serif; 
}

.cormorant {
	font-family: "Cormorant", serif;
}

@font-face {
    font-family: 'cormorantInfantM';
    font-style: normal;
    font-weight: 100;
    src: url('/font/cormorantinfant-medium.ttf')  format('truetype');
}

.cormorantInfantM {
	font-family: 'cormorantInfantM';
}
article, aside, canvas, details, figcaption, figure, footer, header, main, hgroup, menu, nav, section, summary {
	display: block;
}
ol, ul {
	list-style: none;
	box-sizing: border-box;
}
blockquote, q {
	quotes: none;
}
chrome_annotation {
	border: none !important;
}
:focus {
	outline: 0;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
img {
	vertical-align: top;
	max-width: 100%;
    height: auto;
}
address {
	font-style: normal;
}
a,
a:link {
	color: #000;
	text-decoration: none;
	transition: 0.3s;
	-webkit-tap-highlight-color: transparent !important;
}
a:visited {
	color: #000;
}
a:hover {
	color: #000;
}
a:active {
	color: #000;
}
/*------------------------------------------------------------
	レイアウト
------------------------------------------------------------*/
body {
	color: #000;
	font-size: 1.5rem;
	line-height: 1.5;
	font-weight: 400;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	background-color: #FFF;
	-webkit-font-smoothing: antialiased; 
	font-feature-settings : "palt";
}

body:after {
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	transition: all 0.4s;
	z-index: 10000;
}
body.hideCover:after {
	opacity: 0;
	visibility: hidden;
}
#container {
	position: relative;
	text-align: left;
    word-break: break-word;
}
a[href^="tel:"] {
	cursor: default;
	pointer-events: none;
}
#main {
	margin-bottom: 5rem;
}
@media all and (min-width: 1000px) {
	.sp {
		display: none !important;
	}
}
@media all and (max-width: 999px) {
	body {
		min-width: inherit;
		font-size: 1.2rem;
	}
	a:hover,
	a:hover img {
		opacity: 1 !important;
	}
	.pc {
		display: none !important;
	}
	a[href^="tel:"] {
		cursor: pointer;
		pointer-events: auto;
	}
}
/*------------------------------------------------------------
	ヘッダー
------------------------------------------------------------*/
#gHeader {
	width: 100%;
}
#gHeader .hInner {
	align-items: flex-start;
}
#gHeader .lBox {
	position: fixed;
	top: 2.9rem;
	left: 4rem;
	z-index: 1000;
}
#gHeader .lBox a {
	display: flex;
	align-items: flex-start;
}
#gHeader h1 .txtImg {
	width: 1.7rem;
	margin: 0.7rem 2rem 0 0;
}
#gHeader .lBox .en {
	font-weight: 400;
	font-size: max(1.3rem,10px);
	letter-spacing: 0.25em;
	line-height: 1.77;
}
#gHeader .lBox .en a {
	display: block;
}
.menu {
	margin-right: -0.2rem;
	position: fixed;
	top: 3.3rem;
	right: 4rem;
	z-index: 1000;
}
.menu li {
	display: flex;
	gap: 0 1rem;
	cursor: pointer;
	font-size: max(1.2rem,10px);
	letter-spacing: 0.01em;
	align-items: flex-end;
}
.menu .cormorant {
	/* margin-bottom: -0.3rem; */
}
.menu .subSpan {
	line-height: 1.2;
}
.menu .cormorant {
	line-height: 0.9;
	letter-spacing: 0.04em;
	position: relative;
	font-size: 1.5rem;
}
.menu .cormorant .open {
	display: none;
}
.menu.on .cormorant .open {
	display: block;
}
.menu.on .cormorant .close {
	display: none;
}
.menuBox {
	position: fixed;
	top: 0;
	right: 0;
	width: 42.9rem;
	z-index: 800;
	height: 100%;
	overflow-y: auto;
	background: url(/img/common/menu_bg.jpg) repeat;
	background-size: 100% auto;
	transform: translateX(105%);
	transition: .5s;
}
.menuBox.open {
	transform: translateX(0);
}
.menuInner {
	min-height: 100%;
    padding: 8rem 5rem 8rem 9.1rem;
    display: flex;
    overflow-y: auto;
    align-items: center;
    box-sizing: border-box;
}
.menuBox .inner {
	width: 100%;
}
.menuBox .ttl {
	margin-bottom: 5.3rem;
	letter-spacing: 0.04em;
}
.menuBox .ttl a {
	display: inline-block;
}
.comLinkUl {
	margin: 0 4rem 6.5rem 0;
}
.comLinkUl li {
	margin-bottom: 2.2rem;
}
.comLinkUl li:last-child {
	margin-bottom: 0;
}
.comLinkUl a {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
}
.comLinkUl a .lSpan {
	margin-top: -0.5rem;
	font-size: 3rem;
	font-weight: 500;
	flex-shrink: 0;
	padding-right: 1rem;
	color: #333333;
}
.comLinkUl a .rSpan {
	flex: 1;
	font-weight: 400;
	display: flex;
	position: relative;
	align-items: center;
	justify-content: space-between;
	font-size: 1.3rem;
	letter-spacing: 0.15em;
	overflow: hidden;
}
.comLinkUl a .rSpan::before {
	height: 1px;
	margin-right: 0.5rem;
	background-color: rgba(0, 0, 0, 0.2);
	content: ""; 
	flex: 1;
}
.menuBox .comSnsBox {
	margin-left: 0.3rem;
}
.menuBox .comLinkP {
	margin-left: 0.3rem;
}
.menuBox .inner .comLinkP,
.menuBox .inner p,
.menuBox .inner li {
	opacity: 0;
	transform: translateY(100%);
	clip-path: inset(0 0 100% 0);
	transition: .8s;
	transition-delay: .5s;
}
.menuBox.open .comLinkP,
.menuBox.open .inner p,
.menuBox.open .inner li {
	opacity: 1;
	transform: translateY(0);
	clip-path: inset(0 0 0 0);
}
@media all and (min-width: 1000px) {
}

@media all and (max-width: 999px) {
	#gHeader .lBox {
		top: 1.6rem;
		left: 2rem;
	}
	#gHeader h1 .txtImg {
		margin: 0.7rem 1.3rem 0 0;
		width: 1.1rem;
	}
	#gHeader .lBox .en {
		padding-top: 0.1rem;
		line-height: 1.61;
	}
	.menu .cormorant {
		margin-bottom: -0.2rem;
		font-size: 1.4rem;
		letter-spacing: 0;
	}
	.menu {
		top: 2rem;
		right: 2rem;
		margin: 0.2rem -0.1rem 0 0;
	}
	.menu li {
		gap: 0 0.7rem;
		align-items: center;
	}
	.menuBox {
		width: 25rem;
	}
	.menuInner {
		padding: 5rem 2.9rem;
	}
	.comLinkUl {
		margin: 0 -0.4rem 7.8rem 0;
	}
	.comLinkUl a .lSpan {
		margin-top: -0.1rem;
		font-size: 2.4rem;
	}
	.menuBox .inner {
		padding-top: 8rem;
	}
	.comLinkUl li {
		margin-bottom: 2.7rem;
	}
	.comLinkUl a .rSpan::before {
		margin-right: 1rem;
	}
}

@media (hover: hover) {
	.menu li:hover,
	.menuBox .inner a:hover,
	#gHeader .lBox .en a:hover,
	.menuInner a:hover,
	.menu a:hover {
		opacity: 0.7;
	}
}
/*------------------------------------------------------------
	フッター
------------------------------------------------------------*/
#gFooter {
	position: relative;
	z-index: 10;
}
#gFooter .content {
	overflow: hidden;
	align-items: flex-end;
	max-width: 132rem;
}
#gFooter .lBox {
	padding-bottom: 3.3rem;
}
address {
	margin: 2.5rem 0 0 0.5rem;
	font-size: max(1.1rem,10px);
	letter-spacing: 0.04em;
	color: #434343;
}
#gFooter .comLinkP {
	margin-left: 0.5rem;
}
#gFooter .comLinkP a {
	letter-spacing: 0.04em;
	font-size: max(1.3rem,10px);
}
.pageTop {
	margin-bottom: -0.7rem;
}
.pageTop a {
	padding-bottom: 2.1rem;
	display: inline-block;
	position: relative;
	font-size: max(1.2rem,10px);
	letter-spacing: 0.04em;
}
.pageTop a:after {
	width: 1px;  
	height: 1.4rem;
	background-color: rgba(0, 0, 0, 0.3);
	position: absolute;  
	left: calc(50% - 0.2rem);
	bottom: 0;
	transform: translateX(-50%);
	content: ""; 
}
.pageTop span {
	width: 2rem;
	display: block;
	-webkit-writing-mode : tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

@media all and (min-width: 1000px) {
}
@media all and (max-width: 999px) {
	address {
		margin-top: 0.7rem;
		font-size: 1rem;
		letter-spacing: 0;
	}
	.pageTop {
		margin: 0 -0.7rem -0.4rem 0;
	}
	#gFooter {
		background: url(/img/common/menu_bg.jpg) repeat;
		background-size: 100% auto;
	}
	#gFooter .fInner {
		padding: 4.5rem 4.5rem 6.8rem;
	}
	#gFooter .fInner .lBox {
		margin-right: 5.3rem;
		width: 2.1rem;
	}
	#gFooter .fInner .rBox {
		margin-top: -0.7rem;
		flex: 1;
	}
	#gFooter .fInner .logoTxt {
		font-size: 2rem;
		margin-bottom: 6.3rem;
		line-height: 1.6;
		letter-spacing: 0.5em;
	}
	#gFooter .fInner .logoTxt a {
		display: inline-block;
	}
	#gFooter .comLinkUl li {
		margin: 0 0.9rem 1.9rem -0.2rem;
	}
	#gFooter .comLinkUl a .lSpan {
		font-size: 2.3rem;
		letter-spacing: -0.02em;
	}
	#gFooter .comLinkUl a .rSpan {
		font-size: 1.1rem;
		letter-spacing: 0.06em;
	}
	#gFooter .comLinkUl a .rSpan::before {
		margin: 0.2rem 0.8rem 0 0;
	}
	#gFooter .comSnsBox {
		margin-left: 0.1rem;
	}
	#gFooter .comLinkP {
		margin-left: 0;
	}
	#gFooter .comLinkP a {
		letter-spacing: 0.02em;
		font-size: 1.2rem;
	}
	#gFooter .content .lBox {
		padding-bottom: 2.1rem;
	}
}

@media (hover: hover) {
	.pageTop a:hover {
		opacity: 0.7;
	}
}

/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
/* 81-PSP */
/* clearfix */	
.clearfix:after {content: "";display: block;clear: both;}
/* flex */	
.flex,.flexA,.flexB,.flexC {display: flex;flex-wrap: wrap;}
.flexA {justify-content: space-around;}
.flexB {justify-content: space-between;}
.flexC {justify-content: center;}
/*------------------------------------------------------------
content
------------------------------------------------------------*/
.content {
	max-width: 122rem;
	margin: 0 auto;
	padding: 0 2rem;
	position: relative;
	z-index: 1;
}
@media all and (min-width: 1000px) {
}

@media all and (max-width: 999px) {
	.content {
		max-width: inherit !important;
	}
}

@media (hover: hover) {
}

/*------------------------------------------------------------
headLine01
------------------------------------------------------------*/
.headLine01 .en {
	margin-bottom: 3.3rem;
	display: block;
	font-size: 6rem;
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0.01em;
}
.headLine01 .jp {
	margin-left: 0.2rem;
	display: block;
	font-size: 1.8rem;
	letter-spacing: 0.45em;
	-webkit-writing-mode : tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: tb-rl;
	writing-mode: vertical-rl;
	width: 2rem;
	font-weight: 400;
}
.headLine01.style1 {
	display: flex;
	align-items: center;
}
.headLine01.style1 .en {
	margin: 0 4.4rem 0 0;
}
.headLine01.style2 .en {
	margin-bottom: 4rem;
	margin-left: -0.5rem;
	letter-spacing: 0;
	font-size: 5.7rem;
	-webkit-writing-mode : tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.headLine01.style2 .jp {
	letter-spacing: 0.1em;
}
@media all and (min-width: 1000px) {
}

@media all and (max-width: 999px) {
	.headLine01 .en {
		margin-bottom: 0.9rem;
		font-size: 4rem;
		letter-spacing: 0.01em;
	}
	.headLine01 .jp {
		margin: 0;
		width: auto;
		font-size: 1.3rem;
		letter-spacing: 0.2em;
		-webkit-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
		-moz-writing-mode: horizontal-tb;
		-ms-writing-mode: horizontal-tb;
		-o-writing-mode: horizontal-tb;
	}
	.headLine01.style1 {
		display: block;
		text-align: center;
	}
	.headLine01.style1 .en {
		margin: 0 0 0.65rem;
	}
	#main .bookSec .headLine01 .jp {
		margin: 0;
		letter-spacing: 0.5em;
		font-size: 1.4rem;
	}
	.headLine01.style2 .en {
		font-size: 4.8rem;
	}
	.headLine01.style2 .jp {
		width: 1.3rem;
		color: #fff;
		font-size: 1.5rem;
		margin-left: 0.5rem;
		-webkit-writing-mode : tb-rl;
		-webkit-writing-mode: vertical-rl;
		writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}
}

@media (hover: hover) {
	.headLine01 .en a:hover {
		opacity: 0.7;
	}
}

/*------------------------------------------------------------
newsList
------------------------------------------------------------*/
#main .newsList li {
	margin-bottom: 2.9rem;
	padding-bottom: 2.7rem;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.25);
}
#main .newsList li:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border: none;
}
#main .newsList li a {
	display: inline-block;
}
#main .newsList li .subSpan {
	font-size: 1.8rem;
	display: block;
	letter-spacing: 0.05em;
	line-height: 1.78;
}
#main .newsList dl {
	margin-top: 0.5rem;
	display: flex;
}
#main .newsList dt {
	width: 8rem;
	flex-shrink: 0;
	padding: 0 0.5rem 0 0.2rem;
	font-size: max(1.3rem,10px);
	font-weight: 500;
	letter-spacing: 0.06em;
	font-family: 'cormorantInfantM';
}
#main .newsList dd {
	flex: 1;
	font-size: max(1.3rem,10px);
	letter-spacing: 0.03em;
	font-weight: 700;
	font-style: italic;
	font-family: "Cormorant", serif;
}
#main .newsList dd .txtSpan {
	margin: 0 0.4rem 0.5rem 0;
}
@media all and (min-width: 1000px) {
}

@media all and (max-width: 999px) {
	#main .newsList li {
		border: none;
		margin-bottom: 0;
		padding-bottom: 4rem;
	}
	#main .newsList li .subSpan {
		font-size: 1.3rem;
		letter-spacing: 0.02em;
	}
	#main .newsList dt {
		padding-left: 0;
		width: 6rem;
		padding-right: 0.2rem;
		font-size: 1.1rem;
		letter-spacing: 0.06em;
	}
	#main .newsList dd {
		font-size: 1.1rem;
		letter-spacing: 0.03em;
	}
	#main .newsList dl {
		margin-top: 0;
	}
}

@media (hover: hover) {
	#main .newsList li a:hover {
		opacity: 0.7;
	}
}


/*------------------------------------------------------------
viewLink
------------------------------------------------------------*/
.viewLink a {
	font-size: 1.6rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-decoration: underline;
	text-underline-offset: 4px;
}
@media all and (min-width: 1000px) {
}

@media all and (max-width: 999px) {
	.viewLink {
		margin-right: 0.8rem;
		text-align: right;
	}
	.viewLink a {
		font-size: 1.4rem;
	}
}

@media (hover: hover) {
	.viewLink a:hover {
		opacity: 0.7;
	}
}


/*------------------------------------------------------------
bookList
------------------------------------------------------------*/
#main .bookList {
	display: flex;
	flex-wrap: wrap;
	gap: 6.6rem;
}
#main .bookList li {
	position: relative;
	width: calc((100% - 6.6rem * 3) / 4);
}
#main .bookList .newsSpan {
	position: absolute;
	top: -2.8rem;
	left: 0;
	font-size: 1.7rem;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.04em;
}
#main .bookList a {
	display: block;
}
#main .bookList .bookPhoto {
	overflow: hidden;
	position: relative;
	margin-bottom: 1.7rem;
}
#main .bookList .bookPhoto img {
	transition: 0.3s;
}
#main .bookList .borderStyle .bookPhoto:after {
	border: 1px solid #D8D8D8;
	position: absolute;  
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	content: ""; 
}
#main .bookList .bookPhoto img {
	aspect-ratio: 491 / 710;
	width: 100%;
	object-fit: cover;
}
#main .bookList .ttl {
	margin-bottom: 1.2rem;
	font-size: 1.6rem;
	letter-spacing: 0.05em;
}
#main .bookDl {
	display: flex;
	align-items: flex-start;
}
#main .bookDl dt {
	min-width: 3.6rem;
	font-size: max(1.1rem,10px);
	letter-spacing: 0.1em;
	padding-right: 0.5rem;
}
#main .bookDl dd {
	flex: 1;
	font-size: max(1.1rem,10px);
	letter-spacing: 0.02em;
}
#main .bookDl dd .txtSpan {
	margin: 0 0.3rem 0.3rem;
}
@media all and (min-width: 1000px) {
}

@media all and (max-width: 999px) {
	#main .bookList {
		padding: 0 1.6rem;
		display: block;
	}
	#main .bookList li {
		margin-right: 3.42rem;
		width: 20.8rem;
	}
	#main .bookList .newsSpan {
		top: -3.2rem;
	}
	#main .bookList .bookPhoto {
		margin-bottom: 1.3rem;
	}
	#main .bookList .ttl {
		font-size: 1.4rem;
	}
}

@media (hover: hover) {
	#main .bookList a:hover .bookPhoto img {
		transform: scale(1.1);
	}
}


/*------------------------------------------------------------
	common
------------------------------------------------------------*/
.comSnsBox .ttl {
	margin-bottom: 1rem;
	font-size: max(1.1rem,10px);
	letter-spacing: 0.07em;
	color: #4D4D4D;
	font-style: italic;
	font-weight: 500;
}
.snsUl li {
	margin-bottom: .8rem;
}
.snsUl li:last-child {
	margin-bottom: 0;
}
.comLinkP {
	margin-top: 1.7rem;
}
.comLinkP a {
	font-size: max(1.2rem,10px);
	font-weight: 500;
	letter-spacing: 0.02em;
}
@media all and (min-width: 1000px) {
}

@media all and (max-width: 999px) {
	.comSnsBox {
		margin: 0 0 0.4rem -0.7rem;
	}
	.snsUl li {
		font-size: 1.5rem;
	}
	.comLinkP {
		margin-top: 2.1rem;
	}
}

@media (hover: hover) {
	.comLinkP a:hover {
		opacity: 0.7;
	}
}


/*------------------------------------------------------------
	common
------------------------------------------------------------*/
#main .backLink {
	margin: 0 0.5rem 6.1rem;
}
#main .backLink a {
	display: inline-block;
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	padding-left: 1.5rem;
	color: #2B2B2B;
	background: url(/img/common/icon01.png) no-repeat left center;
	background-size: 0.7rem auto;
}
@media all and (min-width: 1000px) {
}

@media all and (max-width: 999px) {
	#main .backLink {
		margin: 0 0 7.7rem;
	}
	#main .backLink a {
		font-size: 1.3rem;
		letter-spacing: 0.02em;
	}

}

@media (hover: hover) {
	#main .backLink a:hover {
		opacity: 0.7;
	}
}


/*------------------------------------------------------------
	common
------------------------------------------------------------*/
#single .rBox {
	overflow-x: clip;
	margin-left: 14rem;
	padding-top: 7.8rem;
	width: 4.8rem;
	position: sticky;
	top: 10rem;
	right: 0;
	order: 2;
	z-index: 10;
}
#single .snsBox {
	width: 2.4rem;
	margin: 0 auto;
}
#single .snsBox p {
	margin-bottom: 2.3rem;
	font-size: max(10px,1.2rem);
	font-style: italic;
	writing-mode: vertical-rl;
	letter-spacing: 0.02em;
	line-height: 1.933;
}
#single .snsBox .snsList {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 1.7rem 0;
}
#single .snsBox .snsList a {
	font-size: 1.7rem;
	writing-mode: vertical-rl;
}
@media all and (min-width: 1000px) {
	#single .headLine01.style1 {
		margin-bottom: 13.3rem;
		display: block;
	}
	#single .headLine01.style1:last-child {
		margin-bottom: 0;
	}
	#single .headLine01.style1 .en {
		font-size: 5.7rem;
		line-height: 1;
		writing-mode: vertical-rl;
	}
}

@media all and (max-width: 999px) {
	#single .snsBox p {
		margin-left: 0.1rem;
		margin-bottom: 1.2rem;
		font-size: 1.2rem;
		font-style: normal;
		color: rgba(0, 0, 0, 0.49);
	}
	#single .snsBox .snsList {
		width: 1.7rem;
		margin: 0 auto;
		gap: 1.2rem 0;
	}
	#single .snsBox .snsList li {
		width: 100%;
	}
	#single .snsBox .snsList img {
		width: 100%;
	}
	#single .snsBox .snsList a {
		font-size: inherit;
		writing-mode: horizontal-tb;
	}
	#single .headLine01.style1 {
		margin-bottom: 0;
	}
}

@media (hover: hover) {
	#single .snsBox .snsList a:hover {
		opacity: 0.7;
	}
}

/*------------------------------------------------------------
comBtnList
------------------------------------------------------------*/
.comBtnList {
	margin-bottom: 5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: center;
}
.comBtnList li {
	width: 28.5rem;
}
.comLink a {
	letter-spacing: 0.1em;
	font-size: 1.8rem;
	font-weight: 500;
	font-style: italic;
	min-height: 4.3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #AFAFAF;
	border-radius: 5rem;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.comLink a:after {
	width: 0;  
	height: 100%;
	background-color: #E8E8E8;
	position: absolute;  
	top: 0;
	left: 0;
	z-index: -1;
	content: ""; 
	transition: 0.3s;
}
.comLink .subSpan {
	display: block;
	position: relative;
	z-index: 1;
}
@media all and (min-width: 1000px) {
}

@media all and (max-width: 999px) {
	.comBtnList {
		gap: 2rem 1rem;
		flex-direction: column;
	}

}

@media (hover: hover) {
	.comLink a:hover {
		border-color: #E8E8E8;
	}
	.comLink a:hover:after {
		width: 100%;
	}
}

.comBgBox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
/*------------------------------------------------------------
	common
------------------------------------------------------------*/

@media all and (min-width: 1000px) {
}

@media all and (max-width: 999px) {

}

@media (hover: hover) {
}
/*------------------------------------------------------------
	animate
------------------------------------------------------------*/
.animate .fadeIn {
	opacity: 0;
	transition: 1s ease;
}
.animate.isShow .fadeIn {
	opacity: 1;
}
.animate .blurIn {
	filter: blur(10px);
	opacity: 0;
	transition: 1s ease;
}
.animate.isShow .blurIn {
	filter: blur(0);
	opacity: 1;
}
.animate .fadeInUp {
	opacity: 0;
	transform: translateY(30px);
	transition: 1s ease;
}
.animate.isShow .fadeInUp {
	opacity: 1;
	transform: translateY(0);
}
.animate .zoomOut {
	opacity: 0;
	transform: scale(1.2);
	filter: blur(10px);
	transition: 1s ease;
}
.animate.isShow .zoomOut {
	opacity: 1;
	transform: scale(1);
	filter: blur(0);
}
.animate .maskShow {
	mask-image: linear-gradient(to right, #000 33.33%, transparent 66.66%);
	mask-position: right center;
	mask-size: 300% 100%;
	transition: 2s ease;
}
.animate.isShow .maskShow {
	mask-position: left center;
}
.dely01 {
	-webkit-transition-delay: 1s !important;
	transition-delay: 1s !important;
}

@media all and (min-width: 1000px) and (max-width: 1200px) {
	.menu li {
		font-size: 1.2rem;
	}
}

/*------------------------------------------------------------
	otherBox
------------------------------------------------------------*/
#main .otherBox {
	padding-top: 14.2rem;
}
#main .otherBox h2 {
	text-align: center;
	font-size: 2rem;
	font-style: italic;
	letter-spacing: 0.04em;
	margin-bottom: 6.2rem;
	font-weight: 300;
	font-family: "Cormorant Infant", serif;
}
#main .otherBox h2 span {
	display: block;
}
#main .otherBox .bookList .bookPhoto {
	margin-bottom: 1.1rem;
}
#main .otherBox .bookList .ttl {
	margin-right: -1rem;
}

@media all and (min-width: 1000px) {
	#main .otherBox .bookList {
		margin: 0 10.5rem;
		gap: 5.7rem;
	}
	#main .otherBox .bookList li {
		width: calc((100% - (5.7rem * 2 + 0.1rem)) / 3);
	}
}

@media all and (max-width: 999px) {
	
	#main .otherBox {
		padding: 10rem 0 10.5rem;
		position: relative;
	}
	#main .otherBox h2 {
		margin-bottom: 7rem;
		font-size: 1.8rem;
	}
	#main .otherBox .bookList {
		margin: 0 -4rem;
		display: block;
	}
	#main .otherBox .bookList li {
		width: 17rem !important;
		margin: 0 3rem;
	}
	#main .otherBox .bookList .ttl {
		margin: 2rem 0 0;
		font-size: 1.4rem;
		letter-spacing: 0.1em;
		line-height: 1.785;
	}
	#main .otherBox .bookDl {
		display: block;
	}
	#main .otherBox .bookDl dt {
		min-width: inherit;
		padding: 0 0 0.2rem;
		font-size: 0.9rem;
		letter-spacing: 0.1em;
	}
	#main .otherBox .bookDl dd {
		font-size: 0.9rem;
		letter-spacing: 0.02em;
	}
	#main .otherBox .bookList .bookPhoto {
		margin-bottom: 2.7rem;
	}
	#main .otherBox .otherBg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		z-index: -1;
		transition: 1s ease;
	}
	#main .otherBox .otherBg.isShow {
		opacity: 1;
	}
	#main .otherBox .otherBg:after {
		aspect-ratio: 1554 / 1927;
		background: url(/img/books/detail_bg02_sp.png) no-repeat;
		background-size: 100% auto;
		position: absolute;  
		top: 4.4rem;
		left: -10.3rem;
		right: -29.8rem;  
		content: "";
		transform: translateY(var(--para));
	}
}