@charset "UTF-8";

:root{
  --color-w:#ffffff;
  --color-blue_accent:#2A70D9;
  --color-bk_text:#121721;
  --color-blgr_text:#54585F;
  --color-blgr_line:#d3d9dd;
  --color-wgr_bg:#F2F4F5;
  --color-blue_img_hover:#274277;
  --color-blgr_line-blbg:#B7D1E5;
  --color-bl_bg:#E6EEFA;

  --grd_bottom: linear-gradient(to bottom, #3C63B0, #3AA4CA);
  --grd_bottom_075: linear-gradient(to bottom, rgba(60, 99, 176, 0.75), rgba(58, 164, 202, 0.75));

  --grd_right: linear-gradient(to right, #3C63B0, #3AA4CA);
  --grd_right_075: linear-gradient(to right, rgba(60, 99, 176, 0.75), rgba(58, 164, 202, 0.75));

  --easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
	
  --inner_max-width: 1200px;
}

/* common */
body{
  font-family: "Roboto","Zen Kaku Gothic New",YuGothic,'Yu Gothic medium','Hiragino Sans',Meiryo,'sans-serif';
  color: var(--color-bk_text);
  letter-spacing: 0.04em;
  font-weight: 400;
	background: var(--grd_bottom);
	-webkit-text-stroke-width: .1px !important;	
}
@media screen and (max-width:768px) {
	body{
		background: var(--grd_right);
	}
}
::selection{
  background-color:var(--color-blue_accent);
  color:var(--color-w);
}


.text_head{
	margin: 40px auto 40px;
	max-width: 800px;
	padding: 0 0 40px;
	border-bottom: solid 1px var(--color-blgr_line);
}
.text_info{
	margin: 12px 0 0;
}
.text_head_sub{
  font-size: 13px;
  letter-spacing: 0.08em;
	color: var(--color-blgr_text);
}

@media screen and (max-width:768px) {
	.text_head{
		margin: 16px auto 24px;
		padding: 0 0 24px;
	}
	.text_head_sub{
		font-size: 13px;
	}
	.text_info{
		margin: 8px 0 0;
	}
}






/*card+tag*/
@counter-style k-dot {
  system: cyclic;
  symbols: ・;
  suffix: " ";
  fallback: disc;
}

hr{
	margin: 40px auto;
	border-top: 1px solid var(--color-blgr_line);
}
@media screen and (max-width:768px) {
hr{
		margin: 24px auto;
	}
}

a{
  color:var(--color-bk_text);
  text-decoration:none;
}

/* header footer */
@media screen and (max-width:768px){
	header{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		pointer-events: auto;
		background: var(--grd_right);
		width: 100%;
		height: 72px;
	}
}

.header_navigation,
.header_navigation_nav,
.footer_navigation{
  display: flex;
	align-content:flex-start;
  flex-wrap: wrap;
  row-gap: 32px;
  column-gap: 24px;
}

.header_navigation{
	position: fixed;
	align-items: flex-start;
	flex-wrap: nowrap;
	flex-direction: column;
	height: 100%;
	margin: 120px auto 0;
	padding: 0 24px 168px;
	width: 216px;
	overflow-y: scroll;
}

.footer_navigation{
	display: none;
}
.header_navigation_narrow,
.header_navigation_nav{
  display: flex;
	flex-direction: column;
  row-gap: 24px;
	width: 100%;
}

@media screen and (max-width:768px){
	.header_navigation,
	.header_navigation_nav,
	.footer_navigation{
		align-content: center;
		row-gap: 8px;
		column-gap: 24px;
	}
	.header_navigation{
		flex-wrap: wrap;
		flex-direction: row;
		height: 72px;
		margin: 0 auto;
		padding: 0;
		left: 136px;
		justify-content: end;
		width: calc(100% - 184px - 32px);
	}
	.header_navigation_narrow{
		align-items: flex-end;
	}
  .header_navigation_nav{
		display: none;
	}
	.footer_navigation{
		display: flex;
		justify-content: flex-start;
		width: 100%;
		height: auto;
		margin: 48px auto 0;
		max-width: 1270px;
		border-top: 1px solid var(--color-blgr_line-blbg);
		align-content: flex-start;
		padding: 32px 16px 40px;
		row-gap: 4px;
		column-gap: 40px;
	}
}

.header_4log{
	position: fixed;
	font-style: italic;
	font-size: 107px;
	font-weight: 500;
	letter-spacing: 0.05em;
  color: var(--color-w);
	top: -0.25em;
	transition: opacity 0.2s var(--easeOutCubic);
}
.header_4log:hover{
	opacity: 0.6;
}
@media screen and (max-width:768px){
	.header_4log{
		position: fixed;
		font-size: 80px;
		top: -0.25em;
	}
}

.header_navigation a{
  color: var(--color-w);
}
.footer_navigation a{
  color: var(--color-blue_accent);
}

.navigation_link{
  display: block;
  font-size: 14px;
  letter-spacing: 0.1em;
	transition: opacity 0.2s var(--easeOutCubic);
}
.navigation_link:hover,
.header_navigation_category:hover{
	opacity: 0.6;
}
.footer_navigation .flog{
	font-size: 20px;
}
@media screen and (max-width:768px){
  .navigation_link{
		padding: 8px 0;
	}
}
.header_navigation_category{
	display: inline-block;
  position: relative;
  font-size: 14px;
	padding: 0 24px 8px 0;
  border-bottom: 1px solid var(--color-blgr_line-blbg);
	transition: opacity 0.2s var(--easeOutCubic);
}
.header_navigation_category::before{
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  width: 8px;
  height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translate(-50%, -20%) rotate(-45deg);
}

.header_navigation .navigation_line{
	height: 0;
	width: 100%;
	border-top: solid 1px var(--color-blgr_line-blbg);
	margin: 4px auto;
}
.footer_navigation .navigation_line{
	height: 20px;
  border-left: solid 1px var(--color-blgr_line-blbg);
}

@media screen and (max-width:768px){
	.header_navigation_category{
		max-width: 160px;
	}
  .header_navigation .navigation_line{
		display: none;
	}
	.footer_navigation .navigation_line{
		height: 0;
		width: 100%;
		border-top: solid 0 var(--color-blgr_line-blbg);
		margin: 4px auto;
	}
	.header_navigation_category::before{
		transform: translate(-50%, -60%) rotate(45deg);
	}
}


/*category */
.filter_panel{
  position: absolute;
  top: 0;
  z-index: 100;
  border-radius: 24px;
	width: 360px;
	height: 100%;
  transform: translate(-100%, 0);
  background: var(--grd_bottom_075);
  backdrop-filter: blur(16px);
  /* animation */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 32px 40px;
	opacity: 0;
  pointer-events: none;
  transition:
    padding 0.3s var(--easeOutCubic),
    opacity 0.3s var(--easeOutCubic),
    transform 0.3s var(--easeOutCubic);
}
body.is-filter-open .filter_panel{
	height: 100%;
  transform: translate(-40px, 0);
	opacity: 1;
	pointer-events: auto;
}
@media screen and (max-width:768px) {
	.filter_panel{
		border-radius: 0;
		width: 100%;
		height: auto;
		transform: translate(-16px, 0);
		background: var(--grd_right_075);
		/* animation */
		max-height: 0;
		padding: 0 16px;
		transition:
			max-height 0.3s var(--easeOutCubic),
			padding 0.3s var(--easeOutCubic),
			opacity 0.3s var(--easeOutCubic),
			transform 0.3s var(--easeOutCubic);
	}
	body.is-filter-open .filter_panel{
		transform: translate(-16px, 0);
		padding: 24px 16px;
		max-height: 100%;
		height: auto;
	}
}

.filter_row{
  display: flex;
	flex-direction: column;
  gap: 16px;
  padding: 16px 0;
	margin: 0 auto;
}
@media screen and (max-width:768px) {
	.filter_row{
		display: flex;
		flex-direction: row;
		gap: 16px;
		padding: 12px 0;
		max-width: var(--inner_max-width);
		margin: 0 auto;
	}
}


.filter_label{
  width: 48px;
  flex: 0 0 auto;
	font-size: 18px;
	font-weight: 500;
  font-style: italic;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,.9);
  padding-top: 6px;
}

.filter_chips{
  display: flex;
	align-items: center;
  column-gap: 8px;
  row-gap: 12px;
  flex-wrap: wrap;
}
.text_head .filter_chips{
  row-gap: 8px;
}
@media screen and (max-width:768px) {
	.text_head .filter_chips{
		gap: 6px;
	}
}


.chip{
  border: 1px solid var(--color-blgr_line-blbg);
  color: var(--color-w);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
  line-height: 130%;
	letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    background 0.2s var(--easeOutCubic),
    border-color 0.2s var(--easeOutCubic),
    color 0.2s var(--easeOutCubic),
    opacity 0.2s var(--easeOutCubic);
}
.chip:hover{
  background: rgba(255,255,255,0.2)
}
.chip.is-on{
  background: var(--color-w);
  color: var(--color-blue_accent);
  border-color: transparent;
}
.filter_chips a{
  color: var(--color-w);
}

/* php_tag */
.filter_chips {
  list-style: none !important;
  padding: 0 !important;
}
.filter_chips li.chip {
  list-style: none !important;
  padding: 0 !important;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}
.filter_chips li.chip a {
  display: block;
  padding: 6px 10px;
  text-decoration: none;
  color: inherit;
  width: 100%;
  height: 100%;
}
.filter_chips li.chip.is-on {
  background-color: var(--color-w);
}
.filter_chips li.chip.is-on a {
  color: var(--color-blue_accent);
}




/* memo_tag */
.memo_container .chip{
  color: var(--color-blue_accent);
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 12px;
	font-weight: 300;
	line-height: 130%;
	letter-spacing: 0.02em;
}
.memo_container .chip:hover{
  background: var(--color-bl_bg);
  border-color: var(--color-blue_accent);
}
@media screen and (max-width:768px) {
	.memo_container .chip{
		border-radius: 4px;
		padding: 1px 4px;
		font-size: 11px;
	}
}

.text_info .chip{
  color: var(--color-blue_accent);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
}
.text_info .chip:hover{
  background: var(--color-bl_bg);
  border-color: var(--color-blue_accent);
}
@media screen and (max-width:768px) {
	.text_info .chip{
		color: var(--color-blue_accent);
		border-radius: 4px;
		padding: 3px 4px 2px;
		font-size: 12px;
	}
}




/* layout */

.clip{
	background: var(--color-w);
  border-radius: 24px;
  overflow: hidden;
  margin: 8px 8px 8px 216px; 
  max-height: calc(100vh - 16px);
	position: relative;
}
.inner{
  width: 100%;
  margin: 0 auto;
	height: calc(100vh - 16px);
  padding: 40px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
@media screen and (max-width:768px){
	.clip{
		border-radius: 0;
		margin: 72px auto 0; 
		max-height: none;
	}
  .inner{
		height: calc(100vh - 72px );
		padding: 16px 16px 0;
	}
}

.scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.scrollbar::-webkit-scrollbar {
	display: none;
}

/* pagination */
.pagination{
  display: flex;
  align-items: center;
	justify-content: center;
  gap: 12px;
	margin: 56px auto 24px;
}

.pagenumber,
.nav_pagination{
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  text-decoration: none;
  font-size: 18px;
  color: var(--color-bk_text);
  transition: border 0.2s var(--easeOutCubic);
}
@media screen and (max-width:768px){
	.pagination{
		gap: 4px;
		margin: 40px auto 0;
	}
	.pagenumber,
	.nav_pagination{
		width: 40px;
		height: 40px;
		font-size: 16px;
	}
}

.pagenumber{
  border: 1px solid transparent;
}

.pagenumber:hover{
  border-color: var(--color-blue_accent);
  color: var(--color-blue_accent);
}

.pagenumber.is-current{
  background: var(--color-blue_accent);
  color: var(--color-w);
  pointer-events: none;
}

.nav_pagination{
  color: var(--color-bk_text);
}

.nav_pagination::before,
.nav_pagination::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.nav_pagination.prev::before,
.nav_pagination.prev::after{
  transform-origin: 0% 50%;
}
.nav_pagination.prev::before{
  transform: translate(-50%, -50%) rotate(-45deg);
}
.nav_pagination.prev::after{
  transform: translate(-50%, -50%) rotate(45deg);
}

.nav_pagination.next::before,
.nav_pagination.next::after{
  transform-origin: 100% 50%;
}
.nav_pagination.next::before{
  transform: translate(-50%, -50%) rotate(45deg);
}
.nav_pagination.next::after{
  transform: translate(-50%, -50%) rotate(-45deg);
}

.nav_pagination:hover{
  color: var(--color-blue_accent);
}

/*@media screen and (max-width:768px){
	.pagination :nth-child(4),
	.pagination :nth-last-child(4){
		display: none;
	}
}*/

/* search */
.searchbox{
  position: relative;
  display: inline-block;
}

.searchbox__icon{
  position: absolute;
  left: 8px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2220px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2220px%22%20fill%3D%22%23FFFFFF%22%3E%3Cpath%20d%3D%22M762.69-160.92%20524.46-399.16q-30%2022.77-65.79%2035.27-35.79%2012.5-73.87%2012.5-93.49%200-159.07-65.57-65.57-65.58-65.57-159.04t65.57-159.04q65.58-65.57%20159.04-65.57t159.04%2065.57q65.57%2065.58%2065.57%20159.07%200%2039.23-12.88%2075.02-12.89%2035.8-34.89%2064.64l238.23%20238.23-37.15%2037.16ZM384.77-403.38q72.31%200%20122.46-50.16%2050.16-50.15%2050.16-122.46t-50.16-122.46q-50.15-50.16-122.46-50.16t-122.46%2050.16Q212.15-648.31%20212.15-576t50.16%20122.46q50.15%2050.16%20122.46%2050.16Z%22%2F%3E%3C%2Fsvg%3E")
		no-repeat center / 20px 20px;
}

.searchbox__input{
  width: 100%;
	max-width: 320px;
  height: 32px;
  padding: 0 0 0 32px;
  border-radius: 8px;
  border: 1px solid var(--color-blgr_line-blbg);
  background: transparent;
  color: var(--color-w);
  outline: none;
  font-size: 14px;
  line-height: 1;  
	font-family: "Roboto","Zen Kaku Gothic New",YuGothic,'Yu Gothic medium','Hiragino Sans',Meiryo,'sans-serif';
}

.searchbox__input::placeholder{
  color: var(--color-blgr_line-blbg);
}

.searchbox__input::-webkit-search-cancel-button{
  -webkit-appearance: none;
  appearance: none;
  display: none;
}


@media screen and (max-width:768px){
.searchbox{
		display: none;
	}
}



/* grid-container */

.gallery_container,
.memo_container{
  display: grid;
  width: 100%;
  height: auto;
  max-width: var(--inner_max-width);
  gap:24px;
  margin: 0px auto 0;
}
.gallery_container{
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.memo_container{
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.page_wrap_navigation .memo_container{
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}


@media screen and (max-width:768px){
  .gallery_container{
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
	.memo_container{
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}


.gallery_container > a{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  border-radius: 16px;
  overflow: hidden;
}

.memo_card{
  aspect-ratio: 1 / 1;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  transition: 0.3s var(--easeOutCubic);
	border: solid 1px var(--color-blgr_line);
	padding: 20px 20px 0;
  position: relative;
}
.memo_card:hover{
  background: var(--color-wgr_bg);
}

@media screen and (max-width:768px){
  .memo_card{
		border-radius: 16px;
		padding: 12px 12px 0;
	}
	.gallery_container > a{
		border-radius: 12px;
	}
}



.category_text{
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 auto 24px;
	max-width: var(--inner_max-width);
}
.category_text_h1{
  font-size: 28px;
	font-weight: 500;
	line-height: 130%;
  letter-spacing: 0.06em;
	font-style: italic;
}
.category_text .filter_label{
	width: auto;
	color: var(--color-bk_text);
	margin: 0 0 0 24px;
	font-size: 16px;
}
.category_text .filter_label::after{
	content: ":";
	margin: 0 0 0 10px;
}
.category_text_select{
	font-size: 14px;
	margin: 6px 0 0 8px;
}
.category_filter{
	display: flex;
	justify-content: center;
  align-items: center;
}
@media screen and (max-width:768px){
	.category_text{
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		margin: 0 auto 16px;
	}
	.category_text .filter_label{
		margin: 0;
	}
.category_text_select{
	margin: 8px 0 0 8px;
}
}


/* top */

.gallery_container > a::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--grd_bottom);
  z-index: 3;
  mix-blend-mode: overlay;
  opacity: 0;
  transition: 0.3s var(--easeOutCubic);
}
.gallery_container > a::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-wgr_bg);
  mix-blend-mode: multiply;
  opacity: 0.5;
  transition: background 0.3s var(--easeOutCubic),
	opacity 0.3s var(--easeOutCubic);
  z-index: 1;
}

@media screen and (max-width:768px){
	.gallery_container > a::before{
		background: var(--grd_right);
	}
}

.img_thu{
	width: 100%;
	height: auto;
	transition: 0.3s var(--easeOutCubic);
	z-index: 1;
}

.gallery_container > a:hover .img_thu{
	scale:1.1;
}
.gallery_container > a:hover::before{
	opacity:1;
}
.gallery_container > a:hover::after{
  background: var(--color-blue_img_hover);
	opacity:0.3;
}



/* gallery topnav */
.gallery_nav_top .page_wrap_navigation{
	display: flex;
  margin: 0 auto;
}
.gallery_nav_top .page_wrap_navigation a{
	color: var(--color-blue_accent);
}
@media screen and (max-width:768px){
	.gallery_nav_top .page_wrap_navigation{
	flex-direction: row;
		margin: 0 auto;
	}
}

.gallery_nav_top .page_wrap_navigation {
  justify-content: space-between;
}

.gallery_nav_top .page_wrap_navigation:has(.page_wrap_navigation_prev):not(:has(.page_wrap_navigation_next)) {
  justify-content: flex-start;
}

.gallery_nav_top .page_wrap_navigation:has(.page_wrap_navigation_next):not(:has(.page_wrap_navigation_prev)) {
  justify-content: flex-end;
}


/* page_editor */

.text_head h1,
.page_contents h2,
.page_contents h3 {
	font-weight: 500;
  letter-spacing: 0.06em;
}

.text_head h1{
  font-size: 30px;
	line-height: 150%;
}

.page_contents h2{
  font-size: 26px;
	line-height: 150%;
	margin: 48px auto 0;
}

.page_contents h3{
  font-size: 20px;
	line-height: 160%;
	margin: 24px auto 0;
}

.page_contents p{
	font-size: 16px;
	line-height: 190%;
	margin: 20px auto 0;
  letter-spacing: 0.04em;
}

@media screen and (max-width:768px) {
	.text_head h1{
		font-size: 22px;
	}

	.page_contents h2{
		font-size: 20px;
		margin: 40px auto 0;
	}

	.page_contents h3{
		font-size: 18px;
		line-height: 150%;
	}

	.page_contents p{
		line-height: 180%;
	}

	hr{
		margin: 24px auto 0;
	}
}

.page_contents ul,
.page_contents ol {
	font-size: 15px;
	margin: 24px 0 0 0;
  padding: 0;
}

.page_contents ul,
.memo_card_text ul {
  list-style: none;
}

.page_contents li ul{
	margin: 0 auto;
}
.page_contents ul > li,
.page_contents ol > li {
	line-height: 170%;
	margin-top: 0.3em;
}
.page_contents ol > li{
	line-height: 166%;
}

.page_contents ul > li,
.memo_card_text ul > li {
	list-style-position: inside;
  position: relative;
	padding-left: 1.4em;
}
.memo_card_text ul > li {
	padding-left: 1.2em;
}

.page_contents ul > li:before,
.memo_card_text ul > li:before {
  content: '';
  position: absolute;
  top: 0.6em;
  left: 0.3em;
  width: 5px;
  height: 5px;
  background-color: var(--color-blue_accent);
  border-radius: 50%;
}
.memo_card_text ul > li:before{
  width: 4px;
  height: 4px;
}
@media screen and (max-width:768px) {
	.memo_card_text ul > li:before{
		top: 0.3em;
	}
	.memo_card_text ul > li {
		padding-left: 1.1em;
	}
}

.page_contents ol,
.memo_card_text ol {
  list-style: none;
  padding-left: 0;
  display: table;
  counter-reset: table-ol;
}

.page_contents ol > li,
.memo_card_text ol > li {
  display: table-row;
  counter-increment: table-ol;
  margin-bottom: 0.5em;
}

.page_contents ol > li::before,
.memo_card_text ol > li::before {
  content: counter(table-ol) ".";
  display: table-cell;
  padding-right: 0.4em;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
	color: var(--color-blue_accent);
}

.page_contents ol > li::after,
.memo_card_text ol > li::after {
  content: "";
  display: block;
  margin-bottom: 0.5em;
}

.page_contents ol li:last-of-type::after,
.memo_card_text ol li:last-of-type::after {
  margin-bottom: 0;
}

@media screen and (max-width:768px) {
	.page_contents ul > li,
	.page_contents ol > li {
		margin: 8px 0 0 0;
	}
}


.page_contents strong{
	font-weight: 500;
}

.page_contents a{
	text-decoration: underline;
	color: var(--color-blue_accent);
}
.page_contents a:hover{
	opacity: 0.6;
}



.page_contents figure{
	width: calc(100vw - 216px - 80px - 16px);
	max-width: var(--inner_max-width);
	height: auto;
	margin: 32px 0;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
.page_contents figure img{
	width: auto;
	max-width: 100%;
	height: 100%;
	max-height: min(calc(100vh - 72px - 48px), 1000px);
	object-fit: contain;
	display: block;
}
.page_contents iframe{
	aspect-ratio: 16 / 9;
	width: calc(100vw - 216px - 80px - 16px);
	max-width: var(--inner_max-width);
	height: auto;
	max-height: min(calc(100vh - 72px - 48px), 1000px);
	margin: 32px 0;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
.page_contents iframe[src*="open.spotify.com"] {
  max-width: 100% !important;
  height: 152px !important;
}
@media screen and (max-width:768px) {
	.page_contents figure{
		width: calc(100vw - 32px);
		margin: 24px 0;
		left: 50%;
		transform: translateX(-50%);
	}
	.page_contents iframe {
	width: calc(100vw - 32px);
	max-height: calc(100vh - 72px - 8px - 80px);
	margin: 24px 0;
	}
}

.memo .page_contents figure,
.memo .page_contents iframe{
	max-width: 900px;
}
.memo .page_contents figure img{
	max-height: min(calc(100vh - 72px - 48px), 9000px);
}

.page_contents hr{
	margin: 40px auto;
	border-top: 1px solid var(--color-blgr_line);
}

@media screen and (max-width:768px) {
	.page_contents hr{
		margin: 24px auto 0;
	}
}


.page_contents h2,
.page_contents p,
.page_contents ul,
.page_contents ol {
	overflow-wrap: break-word;
}





/* gallery_page */
#gallery_main{
	margin: 40px auto 0;
	text-align: center;
}
.gallery_mainimg img{
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100vh - 80px - 16px - 24px);
	margin: 0 auto;
	display: block;
}
@media screen and (max-width:768px) {
	#gallery_main{
		margin: 64px auto 0;
	}
	.gallery_mainimg img{
		max-height: calc(100vh - 72px - 8px - 80px);
	}
}

.gallery_mainimg iframe {
	width: min(calc(100vw - 216px - 80px - 16px), var(--inner_max-width));
	height: auto;
	max-height: calc(100vh - 80px - 16px - 24px);
	aspect-ratio: 16 / 9;
	margin: 0;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
@media screen and (max-width:768px) {
	.gallery_mainimg iframe {
		width: auto;
		max-height: calc(100vh - 72px - 8px - 80px);
	}
}

.page_wrap{
	margin: 16px auto 0;
	max-width: 800px;
}
@media screen and (max-width:768px) {
	.page_wrap {
	margin: 0 auto;
	}
}
.page_contents{
	margin: 32px auto 0;
}
@media screen and (max-width:768px) {
	.page_contents{
		margin: 24px auto 0;
	}
}

.page_contents img{
	margin: 0 auto 16px;
}

.page_wrap_navigation{
	display: flex;
	margin: 56px auto 0;
  justify-content: space-between;
  align-items: flex-start;
  gap: 56px;
	max-width: var(--inner_max-width);
}

.page_wrap_navigation > div{
  flex: 0 0 calc((100% - 56px) / 2);
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.page_wrap_navigation > .nav_next:only-child{
  margin-left: auto;
}

.page_wrap_navigation .gallery_container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  margin: 0;
}

.page_wrap_navigation .gallery_container > a{
  border-radius: 16px;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.page_wrap_navigation .gallery_container > a .img_thu{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Prevは常に左 */
.page_wrap_navigation .nav_prev{
  align-items: flex-start;
}

/* Nextは常に右 */
.page_wrap_navigation .nav_next{
  align-items: flex-end;
}

/* Nextのサムネを右から詰める */
.page_wrap_navigation .nav_next .gallery_container{
  direction: rtl;
}

.page_wrap_navigation .nav_next .gallery_container > a{
  direction: ltr;
}

@media screen and (max-width:768px) {
	.page_wrap_navigation{
		flex-direction: column-reverse;
		gap: 32px;
		margin: 40px auto 0;
	}
	.page_wrap_navigation .button_medium {
	flex-direction: row-reverse;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 24px;
	}
	.page_wrap_navigation .button_medium_text {
		font-size: 16px;
	}
	
  .page_wrap_navigation .gallery_container,
	.page_wrap_navigation .memo_container{
    gap: 8px;
  }
}

.page_wrap_navigation_prev,
.page_wrap_navigation_next{
  position: relative;
	font-size: 14px;
	margin: 0 0 8px;
	padding: 0 0 0 16px;
}
.page_wrap_navigation_next{
	text-align: right;
	padding: 0 16px 0 0;
}

.page_wrap_navigation_prev::before,
.page_wrap_navigation_next::before{
  content: "";
  position: absolute;
  top: 25%;
  left: 6px;
  width: 8px;
  height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translate(-50%, 0%) rotate(135deg);
}
.page_wrap_navigation_next::before{
  left: inherit;
  right: 0;
  transform: translate(-50%, 0%) rotate(-45deg);
}



/* memo */

.memo_card h2{
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0.04em;
}

.memo_card_text h3{
  font-size: 14px;
  font-weight: 500;
  line-height: 140%;
  margin: 0 auto 6px;
  letter-spacing: 0.04em;
}
.memo_card_text h4{
  font-size: 13px;
  font-weight: 500;
  line-height: 140%;
  margin: 0 auto 6px;
  letter-spacing: 0.04em;
}

.memo_card_text p{
  font-size: 13px;
  line-height: 150%;
  margin: 0 auto 8px;
  letter-spacing: 0.04em;
}
.memo_card_text hr{
  margin: 16px auto;
}

@media screen and (max-width:768px){
  .memo_card h2{
    font-size: 14px;
    line-height: 120%;
  }
  .memo_card_text h3{
    font-size: 13px;
    line-height: 130%;
    margin: 0 auto 4px;
	}
	.memo_card_text h4{
		font-size: 12px;
		line-height: 140%;
		margin: 0 auto 4px;
	}
  .memo_card_text p{
    font-size: 12px;
    line-height: 140%;
  }
}

.memo_card_text ul,
.memo_card_text ol {
  font-size: 13px;
	margin: 12px 0 0 0;
}

.memo_card_text ul > li,
.memo_card_text ol > li {
  line-height: 150%;
	margin-top: 0.3em;
}

@media screen and (max-width:768px) {
	.memo_card_text ul,
	.memo_card_text ol {
		font-size: 11px;
		margin: 6px 0 0 0;
	}
	.memo_card_text ul > li,
	.memo_card_text ol > li {
		line-height: 130%;
		margin: 2px 0 0 0;
	}
}
.memo_card_text,
.memo_card_text * {
  pointer-events: none;
}


.page_wrap_navigation .memo_container h2{
  font-size: 14px;
  line-height: 120%;
}
.memo_card h2 a:before{
  content: '';
  position: absolute;
  inset: 0;
}
.page_wrap_navigation .memo_card_text h3{
  font-size: 13px;
  line-height: 130%;
  margin: 0 auto 4px;
}
.page_wrap_navigation .memo_card_text h4{
  font-size: 12px;
  line-height: 140%;
  margin: 0 auto 4px;
}
.page_wrap_navigation .memo_card_text p{
  font-size: 12px;
  line-height: 140%;
}


.memo_card_head{
	margin: 0 auto 12px;
}
@media screen and (max-width:768px) {
	.memo_card_head{
		margin: 0 auto 8px;
	}
}

.memo_card,
.memo_card_tags a {
  position: relative;
}

.memo_card_tags li{
	list-style: none;
}

.memo_card_tags{
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
	margin: 8px auto 0;
}
@media screen and (max-width:768px) {
	.memo_card_tags{
		gap: 2px;
		margin: 2px auto 8px;
	}
}

.memo_card_text .memo_img_thu,
.memo_card_text iframe{
	display: block;
	width: calc(100% + 40px);
	margin: 12px -20px 0;
	height: auto;
}
@media screen and (max-width:768px) {
	.memo_card_text .memo_img_thu,
	.memo_card_text iframe{
		width: calc(100% + 24px);
		margin: 8px -12px 0;
	}
}
.memo_card_text iframe[src*="open.spotify.com"] {
  display: none !important;
}

.memo_card_text p:has(iframe[src*="open.spotify.com"]) {
  display: none !important;
}

.nav_block.nav_next.is-single .memo_card {
  grid-column: 2;
}

.nav_block.nav_next.is-single .page_wrap_navigation_next {
  text-align: right;
}


/*about*/
.about{
	display: flex;
	justify-content: center;
	gap: 96px;
	margin: 96px auto 112px;
}
.about_h1{
	font-size: min(104px, calc(28vw - 216px));
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1;
	font-style: italic;
	background: var(--grd_right);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	padding: 0 0 0 0.05em;
	width: auto;
	display: block;
}

@media screen and (max-width:1250px) {
	.about{
	gap: 56px;
	}
	.about_h1{
		font-size:56px;
		width: 3em;
	}
}
@media screen and (max-width:1100px) {
	.about{
	flex-direction: column;
	gap: 24px;
	margin: 0;
	}
}
@media screen and (max-width:768px) {
	.about{
		flex-direction: column;
	}
}


.about_web_autor{
	display: flex;
	gap: 80px;
}

@media screen and (max-width:1250px) {
	.about_web_autor{
	gap: 48px;
	}
}
@media screen and (max-width:1100px) {
	.about_web_autor{
		flex-direction: column;
		gap: 32px;
	}
}
.about_h2{
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--color-blue_accent);
	margin:0 0 12px 0;
}
.about_label{
	font-size: 32px;
	font-weight: 500;
	letter-spacing: 0.04em;
	margin:0 0 16px 0;
	font-style: italic;
}
@media screen and (max-width:768px) {
	.about_label{
		margin:0 0 8px 0;
	}
}


.about_text{
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.04em;
}

.about_web{
	display: flex;
	gap: 16px;
}

.about_web a{
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	margin: 14px 0 0;
  transition: opacity 0.2s var(--easeOutCubic);
}
.about_web a:hover{
	opacity: 0.6;
}


.about_other{
  margin: 72px 0 0;
}
@media screen and (max-width:1100px) {
	.about_other{
		margin: 40px 0 0;
	}
}

.about_other_container{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  width: 100%;
}
@media screen and (max-width:768px) {
	.about_other_container{
		grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	}
}

.about_other_link{
	display: flex;
	justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
	padding: 16px;
	background: var(--color-w);
	border: solid 1px var(--color-blgr_line-blbg);
	border-radius: 16px;
	text-align: center;
	transition: background 0.2s var(--easeOutCubic);
}
.about_other_link:hover{
	background: var(--color-bl_bg);
}
.about_other a{
	font-size: 16px;
	font-weight: 500;
	line-height: 100%;
	color: var(--color-blue_accent);
	display: block;
}
.about_mail{
	font-size: 16px;
	font-weight: 500;
	line-height: 130%;
	color: var(--color-blue_accent);
	text-decoration: underline;
  transition: opacity 0.2s var(--easeOutCubic);
}
.about_mail:hover{
	opacity: 0.6;
}
@media screen and (max-width:768px) {
	.about_other a{
		font-size: 14px;
	}
	.about_other_link{
		padding: 12px;
	}
}
.about_banner{
	display: flex;
	flex-direction: row;
	gap: 16px;
	flex-wrap: wrap;
	max-width: 430px;
}
.about_banner a{
  transition: opacity 0.2s var(--easeOutCubic);
}
.about_banner a:hover{
	opacity: 0.6;
}


/* memo pin */
.memo_pin_badge {
  position: absolute;
  top: 21px;
  left: 3px;
  width: 16px;
  height: 16px;
  z-index: 10;
}
.memo_pin_badge svg {
  width: 100%;
  height: 100%;
  display: block;
}
@media screen and (max-width:768px) {
	.memo_pin_badge {
		top: 12px;
		left: -1px;
		width: 14px;
		height: 14px;
	}
}



/* sp-header */
.spnav {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
}

.spnav > summary {
  pointer-events: auto;
  list-style: none;
  position: fixed;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 1301;
}
.spnav > summary::-webkit-details-marker {
	display: none;
}

.spnav > summary::before,
.spnav > summary::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 1px;
  background: var(--color-w);
  transition: transform 0.3s var(--easeOutCubic);
}

.spnav:not([open]) > summary::before {
  transform: translateY(-4px) rotate(0deg);
}
.spnav:not([open]) > summary::after {
  transform: translateY(4px) rotate(0deg);
}

.spnav[open] > summary::before {
  transform: rotate(45deg);
}
.spnav[open] > summary::after {
  transform: rotate(-45deg);
}

.spnav-panel {
  pointer-events: auto;
  position: fixed;
  inset: 0;
  display: grid;
  align-content: start;
	justify-items: start;
  gap: 32px;
  padding: 64px 20px 28px;
  background:var(--grd_bottom_075);
  backdrop-filter: blur(24px);
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  transition:
    opacity 0.3s var(--easeOutCubic),
    transform 0.3s var(--easeOutCubic),
    visibility 0s linear 0.3s;
  z-index: 1290;
}

.spnav[open] .spnav-panel {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition:
    opacity 0.3s var(--easeOutCubic),
    transform 0.3s var(--easeOutCubic),
    visibility 0s;
}

.spnav-panel a {
  color: var(--color-gray_bk);
  text-decoration: none;
	display: inline-block;
}
.spnav-panel .label {
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 100%;
	font-style: italic;
  font-size: 32px;
	color: var(--color-w);
}

.spnav[open] {
	pointer-events: auto;
}

body:has(.spnav[open]) {
	overflow: hidden;
}

.spnav {
	display: none;
}

@media (max-width: 768px) {
	.spnav {
		display: block;
	}
}

/* spheader_search */
@media screen and (max-width:768px){
	.spnav .searchbox{
		display: block;
		width: 100%;
		margin-top: 8px;
	}
	.searchbox__input{
		max-width: 420px;
		height: 48px;
		font-size: 16px;
	}
}



/* カテゴリのバッジ */
.gallery_container .gallery_card {
  position: relative;
  z-index: 0;
}

.gallery_count_badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  background-color: #27427775;
  backdrop-filter: blur(16px);
  padding: 8px 10px;
  border-bottom-left-radius: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

.badge_icon {
  display: flex;
  align-items: center;
}

.badge_icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.badge_number {
  color: var(--color-w);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}
@media screen and (max-width:768px){
	.gallery_count_badge {
		padding: 5px 6px;
  border-bottom-left-radius: 12px;
		gap: 3px;
	}
	.badge_icon svg {
		width: 14px;
		height: 14px;
	}
	.badge_number {
		font-size: 10px;
    margin-top: 1px;
	}
}