@charset "UTF-8";

html {
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
/*	font-family: "Hiragino Kaku Gothic ProN", sans-serif;*/
	font-family: "Hina Mincho", serif;
	font-weight: 400;
  	font-style: normal;
	color: #4E3C3C;
	line-height: 1.5;
	font-size: 1.8rem;
	
/*	background-color: #FFFBF0;*/
	padding: 100px 5%;
	
	background-image: url(../assets/paper.jpeg);
	background-repeat: repeat;
    background-size: 1500px 1500px;
    background-color: rgba(255, 251, 240, 0.85);
    background-blend-mode: lighten;

}

/*.body_bg {*/
/*	opacity: 0.25;*/
/*	background-color: #FFFBF0;*/
/*	background-image: url(/JavaWeb1601/assets/paper.jpeg);*/
/*	background-size: 35px 35px;*/
/*	background-repeat: repeat;*/
/*}*/

header {
	background-color: transparent;
	color: #4E3C3C;
	box-shadow: none;
	padding: 15px 5% 25px;
	
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	
	/** マスクレイヤーにグラデーションを指定 */
	mask-image:
	  linear-gradient(to bottom, rgb(0 0 0 / 100%) 0%,rgb(0 0 0 / 100%) 80%,rgb(0 0 0 / 90%) 80%, rgb(0 0 0 / 0%) 100%);
	
	/** マスクの合成モードを設定 */
	mask-composite: intersect;
}

.logo {
	font-family: "Hina Mincho", serif;
	font-size: 4.0rem;
	display: flex;
    align-items: center;
    text-wrap-mode: nowrap;
}

.logo a {
	text-decoration: none;
    color: #4E3C3C;
}

.logo_icon {
	height: 80px;
}

.latestDate {
/*	color: white;*/
/*	background-color: #2d4b3a;*/
	color: #2d4b3a;
	text-align: center;
	font-size: 1.4rem;
    padding: 10px;
/*    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);*/
/*    border: 1px solid transparent;*/
/*    box-shadow: 0 0 0 2px #FFFBF0, 0 0 0 3px #2d4b3a;*/
}

ul {
	margin-block-start: 0em;
    margin-block-end: 0em;
    padding-inline-start: 0px;
}

nav ul li a {
	font-family: "Hina Mincho", serif;
	font-size: 1.8rem;
    color: #4E3C3C;
    transition: 0.3s ease;
}

nav ul li a:hover {
	text-shadow: 0px 6px 16px rgba(78, 60, 60, 0.50);
}

.nav_pc {
	display: flex;
}

.nav_sp {
	display: none;
}

.nav_sp_menu_wrapper {
	display: none;
}

.section_line {
	background-image: url(../assets/bookline5.png);
	background-size: contain;
	background-repeat: no-repeat;
	height: 50px;
	max-width: 1220px;
    margin: 0 auto;
}

section {
	background: transparent;
	box-shadow: none;
	
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	padding: 80px 0;
	gap: 8px;
	
	width: 95%;
}

h2 {
	writing-mode: vertical-rl;
	border-bottom: none;
	margin: 0 auto;
	padding-bottom: 80px;
	
	font-family: "Hina Mincho", serif;
	font-size: 2.8rem;
	letter-spacing: 0.5rem;
	color: #4E3C3C;
}

.blur-text {
  filter: blur(8px);
  opacity: 0.1;
  transition: filter 2s ease, opacity 2s ease;
}

.blur-text.visible {
  filter: blur(0);
  opacity: 1;
}

h3 {
/*	font-family: "Hiragino Kaku Gothic ProN", sans-serif;*/
	font-family: "Hina Mincho", serif;
	font-weight: bold;
	margin-block-start: 0;
	margin-block-end: 0;
}

p {
/*	font-family: "Hiragino Kaku Gothic ProN", sans-serif;*/
	font-family: "Hina Mincho", serif;
	font-size: 1.8rem;
	margin-block-start: 0;
	margin-block-end: 0;
	/*padding-bottom: 16px;*/
	
	overflow-wrap: anywhere;
	cursor: default;
}

iframe{
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  position: relative;
}

ul {
	list-style: none;	
}

.shopInfo {
	display: flex;
	flex-direction: row;
	margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
}

.shopTextList {
	width: 50%;
}

.shopText {
	padding: 8px;
}

.shopTextDetail {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
}

.sTParking {
	border-bottom: 1px solid #4E3C3C;
/*	text-decoration: solid 1px #4E3C3C;*/
	transition: 0.3s ease;
}

.sTParking:hover {
	background-color: rgba(78, 60, 60, 0.80);
	color: #FFFBF0;
}

.icon {
	width: 28px;
/*	aspect-ratio: 1/1;*/
}

.shopMap {
	width: 50%;
	position: relative;
}

/*.shopMap::before {
    content: "";
    background: linear-gradient(0deg, rgba(2, 57, 31, 0.30) 0%, rgba(2, 57, 31, 0.30) 100%), linear-gradient(0deg, rgba(245, 245, 245, 0.30) 0%, rgba(245, 245, 245, 0.30) 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}*/


.toggle-button {
	background-color: transparent;
	border: none;
	box-shadow: none;
	
	transition: 0.3s ease;
}

.toggle-button:hover {
	background-color: transparent;
	border: none;
	box-shadow: none;
}

.news-header {
	align-items: center;
}

.news-date {
	color: #2d4b3a;
	display: inline-block;
	min-width: 85px;
	margin-right: 5vw;
}

.news-arrow {
	width: 24px;
	vertical-align: unset;
	transition: transform 0.8s ease;		
}

.news-arrow.open {
  	transform: rotate(180deg);
}

.news-body {
	margin-left: 85px;
    padding: 0 0 8px 5vw; 
}

.news-body p {
	font-size: 1.6rem;
}


.detail-title {
	font-size: 2.2rem;
    margin-top: 40px;
}

.red {
	color: #BF555C;
	font-weight: bold;
}

h4 {
	font-weight: bold;
}

h5 {
	margin-left: 2rem;
	font-weight: bold;
}

h6 {
	margin-left: 4rem;
}

.details-content ul {
	margin-left: 2rem;
/*	margin: 0;*/
	padding: 0;
}

.indent1 {
	margin-left: 2rem;
}

.indent2 {
	margin-left: 4rem;
}

.indent3 {
	margin-left: 6rem;
}

.order_text {
	text-align: center;
}

.toggle-btn-wrapper {
	text-align: center;
	margin: 0 auto;
}

.toggle-btn {
	width: fit-content;
	border-radius: 0;
	border: 1px solid #2d4b3a;
	padding: 6px 32px;
	transition: 0.3s ease;
}

.toggle-btn:hover {
/*	background-color: #FFFBF0;*/
/*	border: 1px solid #2d4b3a;*/
/*	color: #2d4b3a;*/
/*	background-color: #4E3C3C;*/
/*	border: 1px solid #4E3C3C;*/
	background-color: transparent;
}

input[type="text"] {
	font-size: 1.6rem;
	width: 100%;
	margin: 8px 0 30px;
	padding: 8px;

	outline: 1px solid #2d4b3a;
	border: 0.1px solid #FFF;
	border-radius: 0;
	background-color: #FFF;
}

input[type="text"]:forcus {
	border: none;
	border-radius: 0;
}

input[type="checkbox"] {
	accent-color: #2d4b3a;
	transform: scale(1.5);
	border-radius: 0;
	margin-right: 8px;
	appearance: auto;
    vertical-align: unset;
/*  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid #2d4b3a;
  
  vertical-align: -5px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;*/
}

/*
input[type="checkbox"]:checked:before {
  position: absolute;
  top: 1px;
  left: 4px;
  transform: rotate(50deg);
  width: 4px;
  height: 8px;
  border-right: 2px solid #2d4b3a;
  border-bottom: 2px solid #2d4b3a;
  content: '';
}*/

#genre-options label {
	margin-right: 16px;
	font-size: 1.8rem;
}

#genre-options {
    display: flex;
	flex-wrap: wrap;
}

button,.button {
	background-color: #2d4b3a;
	font-family: "Hina Mincho", serif;
	font-size: 1.8rem;
	margin: 2px;
	padding: 6px 24px;
	border: none;
	border-radius: 0;
	
	border: 1px solid #2d4b3a;
  	box-shadow: 0 0 0 2px #FFFBF0, 0 0 0 3px #2d4b3a;
  	
  	transition: 0.3s ease;
}

button:hover {
/*	background-color: #FFFBF0;*/
/*	border: 1px solid #2d4b3a;*/
/*	color: #2d4b3a;*/
/*	background-color: #4E3C3C;*/
/*	border: 1px solid #4E3C3C;*/
	background-color: transparent;
	color: #2d4b3a;
/*	font-weight: bold;*/
}

.search_btn_wrapper {
	text-align: center;
	margin: 30px auto 50px;
}

.search_btn {
	padding: 6px 56px;
}

.table {
	border-top: 0.5px solid #2d4b3a;
	border-bottom: 0;
    border-left: 0;
    border-right: 0;
    font-size: 1.6rem;
}

.tr_th {
	display: none;
}

.tr_td {
	display: flex;
	flex-direction: column;
	border-bottom: 0.5px solid #2d4b3a;
	padding: 16px 8px;
	overflow-wrap: anywhere;
}

.tr_td td {
	border: none;
/*	padding: 0;*/
}

.row1 {
	display: flex;
	gap: 16px;
	padding: 2px 0;
}

.td_bookId {
/*	font-size: 1.6rem;*/
}

.td_genre {
/*	font-size: 1.6rem;*/
}

.row2 {
	padding: 6px 0;
}

.td_title {
	color: #2d4b3a;
	font-size: 2.0rem;
	font-weight: bold;
	line-height: 150%;
}

.td_titleText {

}

.td_soldOut {
	 color: #BF555C;
	 font-weight: bold;
	 font-size: 1.8rem;
}

.td_subTitle {
	color: #2d4b3a;
	font-size: 1.6rem;
	padding-left: 16px;
	line-height: normal;
}

.row3{
	display: flex;
	flex-wrap: wrap;
    gap: 0 16px;
    padding: 2px 0;
}

table td {
	padding: 0;	
}

.row4 {
	display: flex;
	justify-content: space-between;
/*	padding: 2px 0;*/
}

.row_left {
	width: 80%;
}

.td_price {
	color: #2d4b3a;
	font-size: 2.0rem;
	padding: 4px 0;
}

.memo_btn {
	display: flex;
    justify-content: flex-start;
    align-items: center;
    
    background-color: transparent;
    color: #4E3C3C;
    border: none;
    box-shadow: none;
    
    width: 100%;
    padding: 4px 4px 0px 0;
    margin: 0;
    gap: 10px;
}

.memo_btn:hover {
	background-color: transparent;
	border: none;
}

.memo_arrow {
    width: 16px;
    height: fit-content;	
    /* vertical-align: unset; */
    transition: transform 0.8s ease;
    display: inline-block;
}

.memo_arrow.open {
	transform: rotate(180deg);
}

/*.td_memo {*/
/*	padding: 2px 0 6px;*/
/*	display: none;*/
/*	opacity: 0;*/
/*	transition: opacity 0.8s ease;*/
/*}*/

/*.td_memo.open {*/
/*	display: flex;*/
/*	opacity: 1;*/
/*}*/

/*.td_memo {*/
/*  padding: 2px 0 6px;*/
/*  display: flex;*/
/*  transform: scaleY(0);*/
/*  transform-origin: top;*/
/*  opacity: 0;*/
/*  transition: transform 0.8s ease, opacity 0.8s ease;*/
/*}*/

/*.td_memo.open {*/
/*  transform: scaleY(1);*/
/*  opacity: 1;*/
/*}*/

/*.td_memo {*/
/*  padding: 2px 0 6px;*/
/*  display: flex;*/
/*  transform: scaleY(0);*/
/*  transform-origin: top;*/
/*  opacity: 0;*/
/*  transition: transform 0.8s ease, opacity 0.8s ease;*/
/*}*/

/*.td_memo.open {*/
/*  transform: scaleY(1);*/
/*  opacity: 1;*/
/*}*/

/*.td_memo {*/
/*  padding: 2px 0 6px;*/
/*  display: flex;               最初から flex */
/*  flex-direction: column;*/
/*  max-height: 0;               閉じた状態 */
/*  opacity: 0;*/
/*  overflow: hidden;*/
/*  transition: max-height 0.8s ease, opacity 0.8s ease;*/
/*}*/

/*.td_memo.open {*/
/*  opacity: 1;*/
/*}*/

.td_memo {
  padding: 2px 0 6px;
}

.td_memo_inner {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.8s ease, opacity 0.8s ease;
}

.td_memo_inner.open {
  opacity: 1;
}



.td_add {
	text-align: right;
/*	margin: -50px 0 0;*/
	display: flex;
    align-items: flex-end;
    float: right;
    
    margin-top: 4px;
    margin-left: 4px;
}

.add_btn {
	font-size: 2.0rem;
	
	background-color: transparent;
	color: #2d4b3a;
/*	font-size: 1.6rem;*/
	width: max-content;
	transition: 0.3s ease;
}

.add_btn:hover {
	background-color: #2d4b3a;
	color: white;
}

footer {
	background-color: transparent;
	color: #2d4b3a;
}

.copyright {
	font-size: 1.4rem;
}

@media screen and (max-width:768px) {
	body {
		font-size: 1.4rem;
		padding: 80px 5%;
	}
	
	header {
		padding: 8px 5% 12px;
	}
	
	.logo {
		font-size: 2.8rem;
		text-wrap-mode: wrap;
	}
	
	nav ul {
		flex-wrap: nowrap;
	}
	
	nav ul li {
	    margin-left: 8px;
	}
	
	.nav_pc {
		display: none;
	}
	
	.nav_sp {
		display: flex;
		transition: 0.3s ease;
	}
	
	.nav_sp.close {
	    display: flex;
	    background: #FFF;
	    
	    position: fixed;
	    height: 100%;
	    width: 100vw;
	    top: 55px;
	    z-index: 300;
	
	    align-items: center;
	    justify-content: center;
	}
	
	.nav_sp::after {
	    content: "";
	    width: 100%;
	    height: calc(100vh - 55px);;
	    left: 0;
	    top: 0;
	    background: linear-gradient(315deg, rgba(175, 217, 197, 0.80) 0%, rgba(219, 236, 214, 0.40) 50%);
	    clip-path: polygon(0 70%, 100% 40%, 100% 100%, 0 100%);
	    position: absolute;
	}
	
	.nav_sp_list {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.nav_search {
		width: 26px;
	}
	
	.nav_cart {
		width: 30px;
	}
	
	.nav_btn {
	    display: flex;
	    width: 28px;
	    height: 28px;
	    flex-direction: column;
	    align-items: center;
	    gap: 8px;
	    justify-content: center;
	}
	
	.nav_bar {
	    width: 28px;
	    height: 1px;
	
	    background-color: #2d4b3a;
	
	    transition: 0.5s ease;
	}
	
	.nav_bar.close:nth-child(1) {
	    width: 32px;
	    rotate: 45deg;
	    transform: translate(3px, 4px);
	}
	
	.nav_bar.close:nth-child(2) {
	    display: none;
	}
	
	.nav_bar.close:nth-child(3) {
	    width: 32px;
	    rotate: -45deg;
	    transform: translate(2px, -4px);
	}
	
	.nav_sp_menu_wrapper {
		display: flex;
		transition: opacity 0.5s ease;
		opacity: 0;
	}
	
	.nav_sp_menu_wrapper.close {
		display: flex;
		z-index: 300;
		opacity: 1;
		
		width: 100%;
		height: 100vh;
		background-image: url(../assets/paper.jpeg);
		background-repeat: repeat;
	    background-size: 1500px 1500px;
	    background-color: rgba(255, 251, 240, 0.85);
	    background-blend-mode: lighten;
/*		background-color: #2d4b3a;*/
/*		width: 80%;*/
/*        height: 70vh;*/
		
		position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
		
/*		clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);*/
	}
	
	.nav_sp_menu_wrapper.close::after {
/*		content: "";*/
/*		background-color: #FFFBF0;*/
/*		width: 100%;*/
/*		height: 100%;*/
/*		border: solid 1px #2d4b3a;*/
/*		clip-path: polygon(20% 0.2%, 80% 0.2%, 99.8% 20%, 99.8% 80%, 80% 99.8%, 20% 99.8%, 0.2% 80%, 0.2% 20%);*/
/*		clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);*/
/*		background-image: url(/JavaWeb1601/assets/paper.jpeg);*/
/*		background-repeat: repeat;*/
/*	    background-size: 1500px 1500px;*/
/*	    background-color: rgba(255, 251, 240, 0.85);*/
/*	    background-blend-mode: lighten;*/

/*		content: "";*/
/*		background-color: #2d4b3a;*/
/*		width: 80%;*/
/*        height: 70vh;*/
		
/*		position: fixed;*/
/*        top: 50%;*/
/*        left: 50%;*/
/*        transform: translate(-50%, -50%);*/
		
/*		clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);*/
/*		clip-path:polygon(20% 0%, 80% 0%, 100% 15%, 100% 85%, 80% 100%, 20% 100%, 0% 85%, 0% 15%)*/


	}
	
	
/*	.nav_sp_menu_inner {*/
/*		display: flex;*/
/*		transition: opacity 0.5s ease;*/
/*		opacity: 0;*/
/*	}*/
	
/*	.nav_sp_menu_inner.close {*/
/*		display: flex;*/
/*		z-index: 300;*/
/*		opacity: 1;*/
		
/*		width: 100%;*/
/*		height: 100vh;*/
/*		background-image: url(/JavaWeb1601/assets/paper.jpeg);*/
/*		background-repeat: repeat;*/
/*	    background-size: 1500px 1500px;*/
/*	    background-color: rgba(255, 251, 240, 0.85);*/
/*	    background-blend-mode: lighten;*/
		
/*		position: fixed;*/
/*        top: 50%;*/
/*        left: 50%;*/
/*        transform: translate(-50%, -50%);*/
		
/*	}*/
	
/*	.nav_sp_menu_inner.close::after {*/
/*		content: "";*/
/*		background-color: #2d4b3a;*/
/*		width: 80%;*/
/*        height: 70vh;*/
		
/*		position: fixed;*/
/*        top: 50%;*/
/*        left: 50%;*/
/*        transform: translate(-50%, -50%);*/
        
/*		clip-path:polygon(20% 0%, 80% 0%, 100% 15%, 100% 85%, 80% 100%, 20% 100%, 0% 85%, 0% 15%)*/


/*	}*/
	
	.nav_sp_menu {
		display: none;
		transition: 0.5s ease;
	}
	
/*	.nav_sp_menu.close {*/
/*		display: flex;*/
/*		flex-direction: column;*/
/*		align-items: center;*/
/*	    justify-content: center;*/
/*	    gap: 5%;*/
		
/*		clip-path: polygon(20% 0.2%, 80% 0.2%, 99.8% 15%, 99.8% 85%, 80% 99.8%, 20% 99.8%, 0.2% 85%, 0.2% 15%);*/

/*		background-image: url(/JavaWeb1601/assets/paper.jpeg);*/
/*		background-repeat: repeat;*/
/*	    background-size: 1500px 1500px;*/
/*	    background-color: rgba(255, 251, 240, 0.85);*/
/*	    background-blend-mode: lighten;*/
	
/*	    position: fixed;*/
/*		width: 80%;*/
/*        height: 70vh;*/
/*        top: 50%;*/
/*        left: 50%;*/
/*        transform: translate(-50%, -50%);*/
/*	    z-index: 300;*/
/*	}*/
	
	.nav_sp_menu.close {
		display: flex;
		flex-direction: column;
		align-items: center;
	    justify-content: center;
	    gap: 5%;
		
		background-image: url(../assets/octagon.png);
		background-repeat: no-repeat;
        background-size: contain;
/*        background-color: rgba(255, 251, 240, 0.85);*/
        background-position: center;
        
        position: fixed;
        width: 80%;
        min-width: 230px;
        height: 70vh;
        max-height: 670px;
        min-height: 300px;
        
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
	    z-index: 300;
	    

	}
	
	.nav_sp_menu_item {
		font-size: 1.6rem;
	}
	
	.nav_sp_menu_item a {
		transition: 0.3s ease;
	}
	
	.nav_sp_menu_item a:hover {
		text-shadow: 0px 6px 16px rgba(78, 60, 60, 0.50);
	}
	
	h2 {
		font-size: 2.0rem;
	}
	
	p {
		font-size: 1.4rem;
	}
	
	button {
		font-size: 1.4rem;
	}
	
	.shopInfo {
		flex-direction: column;
		gap: 32px;
	}
	
	.shopTextList {
		width: 100%;
	}
	
	.shopText {
		padding: 4px;
	}

	.shopTextDetail {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 4px 0;
	}


	.icon {
		width: 20px;
	/*	aspect-ratio: 1/1;*/
	}
	
	.shopMap {
		width: 100%;
	/*	max-height: 300px;*/
	}
	
	.shopMap iframe {
		max-height: 300px;
	}
	
	h4 {
		font-size: 1.6rem;
		padding-bottom: 2px;
	}
	
	h5 {
		margin-left: 0;
		font-size: 1.6rem;
		padding-bottom: 2px;
	}
	
	h6 {
		margin-left: 0;
		font-size: 1.6rem;
		padding-bottom: 2px;
	}
	
	.details-content ul {
		margin-left: 0;
	/*	margin: 0;*/
		padding: 0;
	}
	
	.indent1 {
		margin-left: 0rem;
	}
	
	.indent2 {
		margin-left: 0rem;
	}
	
	.indent3 {
		margin-left: 0rem;
	}
	
	input[type="text"] {
		font-size: 1.4rem;
	}
	
	input[type="checkbox"] {
	    transform: scale(1.1); 
	    margin-right: 4px;
	}
	
	#genre-options label {
		font-size: 1.4rem;
		margin-right: 8px;
		align-items: center;
		text-align: center;
	}
	
	.table {
		font-size: 1.4rem;
	}
	
	.td_title {
		font-size: 1.8rem;
	}
	
	.td_subTitle {
		font-size: 1.5rem;
	}
	
	.td_soldOut {
		 font-size: 1.6rem;
	}
	
	.row4 {
		display: flex;
		flex-direction: column;
	}
	
	.row_left {
		width: 100%;
	}
	
	.td_price {
		font-size: 1.8rem;
	}
	
	.td_add {
		margin-left: auto;
	}
	
	.add_btn {
		font-size: 1.4rem;
	}
	
	.news-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  cursor: pointer;
	  padding: 0.5em;
	}
	
/*	.news-header::after {*/
/*	  content: "▼";*/
/*	  transition: transform 0.2s ease;*/
/*	}*/
	
	.toggle-button {
		margin: 0;
		padding: 0;
	}
	
	
	.news-date {
	    min-width: 70px;
	    margin-right: 2vw;
	}

	.news-body {
	    margin-left: 0;
	}
	
}