/*
Theme Name: Clammbon Classic
Theme URI: http://www.clammbon.com/
Author: clammbon migration
Description: clammbon.com の見た目（画像マップによるホバーナビゲーション、2カラムレイアウト）を再現したクラシックWordPressテーマ。元サイトのCSS（reset/structure/header/footer/contents）を移植。
Version: 1.0
Requires PHP: 7.4
Text Domain: clammbon-classic
*/

/* ==== ported from clammbon.com /static/css/base/{reset,structure,header,footer,contents}.css ==== */


/*----------------------------------------------------------------
	
	Reset CSS
	
----------------------------------------------------------------*/

body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,
p,blockquote,table,th,td {
	margin: 0;
	padding: 0;
}

html,body {
	background: #FFF;
	color: #000;
}

body {
	font: 13px/1 "",sans-serif;
	
	
	/*font-family:"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Verdana","Arial","Helvetica","Osaka","ＭＳ Ｐゴシック";*/
	font-family: Verdana, Arial, Helvetica, sans-serif;



}
* html body {
	font-size: small;
}
*:first-child+html body {
	font-size: small;
}

img {
	vertical-align: top;
	border: 0;
}

h1,h2,h3,h4,h5,h6 {
	clear: both;
	font-size: 100%;
	font-weight: normal;
}

ul,dl,ol {
	text-indent: 0;
}
li {
	list-style: none;
}

address,caption,cite,code,dfn,em,strong,th,var {
	font-style: normal;
	font-weight: normal;
}

sup {
	vertical-align: text-top;
}
sub {
	vertical-align: text-bottom;
}

input,textarea,select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}
* html input,* html textarea,* html select {
	font-size: 100%;
}
*:first-child+html+input,*:first-child html+textarea,*:first-child+html select {
	font-size: 100%;
}

table {
	font-size: inherit;
	border-collapse: collapse;
	border-spacing: 0;
}
th,td {
	vertical-align: top;
	text-align: left;
}
caption {
	text-align: left;
}

pre,code,kbd,samp,tt {
	font-family: monospace;
}
* html pre,* html code,* html kbd,* html samp,* html tt {
	line-height: 100%;
	font-size: 100%;
}
*:first-child+html pre,*:first-child html+code,*:first-child html+kbd,*:first-child+html+samp,*:first-child+html tt {
	line-height: 100%;
	font-size: 108%;
}

input,select,textarea {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 100%;
}



/*----------------------------------------------------------------
	
	Structure CSS
	
----------------------------------------------------------------*/

body{
}
#wrapper{
	width: 800px;
	margin: 0 auto 10px;
}
/*shpooing layout only*/
#wrapperShopping{
	width: 820px;
	margin: 0 auto 10px;
}
#shopping #wrapper{
	width: 820px;
	margin: 0 auto 10px;
}
#header{
	clear:both;
	width:766px;
	margin: 0 auto 10px;
}
#globalNavi{
	clear:both;
	width:766px;
	margin: 0 auto 10px;
}
#container{
	clear:both;
	width: 712px;
	margin: 10px auto;
}
#container:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility:	hidden;
	font-size: 0;
}
#container #contents{
	float:right;
	width:514px;
	display:inline;
	margin: 10px 0;
}
#container #subContents{
	float:left;
	width:156px;
	margin-right:42px;
	display:inline;
	margin: 10px 0;
}
#footer{
	clear:both;
	width: 712px;
	margin: 10px auto;
}



/*----------------------------------------------------------------
	
	Header CSS
	
	1.header
	
	2.h1

	3.globalnavi
		

----------------------------------------------------------------*/

/* header
========================================== */
#header{
}

/* h1
========================================== */
h1{
}

/* globalNavi
========================================== */
#globalNavi{
	position: relative;
}
.menuLayer{
	position: absolute;
	left: 0;
	top: 0;
	width: 766px;
	height: 143px;
	visibility: hidden;
	z-index: 10;
	pointer-events:none;
}


/*----------------------------------------------------------------
	
	Footer CSS
	
	1.footer
	

----------------------------------------------------------------*/

/* address
========================================== */
#footer{
	text-align:right;
	font-size:10px;
}



/*----------------------------------------------------------------
	
	Contents CSS
	
	1.contents
	
	2.subContents
	
	3.topicPath
	
	
	
----------------------------------------------------------------*/



/* contents
========================================== */
#contents{
}
#contents:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility:	hidden;
	font-size: 0;
}
#contents a{
	color:#628270;
	text-decoration:none;
}
#contents a:hover{
	color:#628270;
	text-decoration:underline;
}
#contents p,
#contents div,
#contents dl{
	line-height:1.7;
}
#contents .section{
	width:514px;
	margin-bottom:30px;
}
#archives #contents .section{
	width:514px;
	margin-bottom:0px;
}
#contents .section:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility:	hidden;
	font-size: 0;
}
#contents .section .title{
	clear:both;
	border-bottom:1px solid #666;
	padding-bottom:10px;
	margin-bottom:10px;
	position:relative;
}
#contents .section .title:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility:	hidden;
	font-size: 0;
}
#contents .section .title h3{
	color:#e64639;
	font-weight:bold;
}
#contents .section .title span{
	position:absolute;
	top:0;
	right:0;
	font-size:10px;
}
#contents .section .unit{
	clear:both;
}
#contents .section .unit p{
	line-height:1.8;
}
#contents .section .unit .img{
	float:right;
	width:auto;
	margin-left:20px;
}
#contents .top{
	clear:both;
	text-align:right;
	margin:10px 0;
	font-size:10px;
}
#contents .toArchive{
	width:50px;
	margin:10px auto;
	font-size:12px;
}
#contents .archivePages{
	margin:20px auto;
	font-size:12px;
	text-align:center;
}
#contents .archivePages .page-numbers{
	display:inline-block;
	margin:0 4px;
}

/* subContents
========================================== */
#subContents{
}
#subContents:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility:	hidden;
	font-size: 0;
}
#subContents h2{
	font-weight:bold;
	margin-bottom:15px;
}
#subContents a{
color:#000;
text-decoration:none;
}
#subContents a:hover{
color:#000;
text-decoration:underline;
}

#subContents .localNavi{
	margin:10px;
}
#subContents .localNavi:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility:	hidden;
	font-size: 0;
}
#subContents .localNavi li{
	line-height:1.5;
	margin-bottom:5px;
}
#subContents .localNaviArrow{
}
#subContents .localNaviArrow li{
	line-height:1.5;
	margin-bottom:5px;
	background:url(assets/img/base/arrow_subnavi.gif) no-repeat;
	background-position:0px 6px;
	padding-left:13px;
}
#subContents .pv{
	margin:40px 0;
	position:relative;
}
#subContents .pv .play{
	position:absolute;
	top:54px;
	left:54px;
}
#subContents h4{
	margin-bottom:5px;
}
#topicPath{
	margin-bottom:15px;
}

#archiveMenu{
	float:right;
}
/* prof_disco #contents #history
========================================== */
#prof_disco #contents .section h3.title{
	font-weight:bold;
	margin:0 0 10px;
	border-bottom:none;
}
#prof_disco #contents #history .photo{
}
#prof_disco #contents #history .photo_copy{
	text-align:right;
}
#prof_disco #contents #history p.year{
	color:#e64639;
	font-weight:bold;
	clear:both;
	border-bottom:1px solid #666;
	padding-bottom:10px;
	margin-bottom:10px;
}
/*#prof_disco #contents #history p.txt{
	margin-bottom:10px;
	padding-bottom:10px;
	padding-left:30px;
}
#prof_disco #contents #history dl {
	margin-bottom:10px;
	padding-bottom:10px;
}
#prof_disco #contents #history .dl_last {
	border:0 none;
	margin-bottom:10px;
	padding-bottom:10px;
}
#prof_disco #contents #history dt {
	font-weight:bold;
	padding-left:30px;
}
#prof_disco #contents #history dd {
	padding-bottom:10px;
	padding-left:30px;
}*/
/*#prof_disco #contents #history ul.txt{
	width:500px;
	margin-left:14px;
}
#prof_disco #contents #history li {
	list-style:none;
	background:url(assets/img/base/list_dot.gif) no-repeat transparent;
	background-position:0px 10px;
	padding-left:10px;
}*/
ul.txt{
	width:500px;
	margin-left:14px;
}
ul.txt li {
	list-style:none;
	background:url(assets/img/base/list_dot.gif) no-repeat transparent;
	background-position:0px 10px;
	padding-left:10px;
}

/* prof_disco #contents #discography
========================================== */
#prof_disco #contents #discography .item{
	margin-bottom:10px;
	width:100%;
	clear:both;
}
#prof_disco #contents #discography .photo{
	float:left;
	padding:10px;
	width:170px;
}
#prof_disco #contents #discography .description{
	float:right;
	padding-top:10px;
	width:310px;
}
#prof_disco #contents #discography .description dt{
	font-weight:bold;
}
#prof_disco #contents #discography .description dd{
	margin-left:10px;
	font-size:10px;
}
#prof_disco #contents #discography .number{
	color:#999999;
	font-size:10px;
}
#prof_disco #contents #discography .itunes{
	padding-left:38px;
}
#prof_disco #contents #discography .ototoy{
	background:url(assets/img/profile/icon_ototoy.gif) no-repeat top left;
	padding-left:45px;
}

/* live #contents
========================================== */
#live #contents .section dt{
	float:left;
	margin-right:10px;
}

/* pageContact
========================================== */
#pageContact table{
	width:514px;
}
#pageContact table td{
	padding:5px;
}
#pageContact table td.menu{
	width:150px;
	text-align:right;
	font-size:12px;
}
#pageContact table td.menu span{
	font-size:10px;
}
#pageContact table input,
#pageContact table textarea{
	width:330px;
	border: 1px solid #999999;
}
#pageContact .submitButton{
	margin-left:160px;
	text-align:center;
}
/*	width:330px;
	margin-left:160px;
	text-align:center;
}*/
#pageContact .confirmButton{
	width:514px;
	margin:10px 0;
	text-align:center;
}

#form table{
	width:514px;
	border: 1px solid #999999;
}
#form table td{
	padding:5px;
}
#form table th{
	width:100px;
}
#form .confirmButton{
	width:514px;
	margin:10px 0;
	text-align:center;
}
/* pageShopping
========================================== */
#pageShopping table{
	margin: 0 auto;
}	
#pageShopping table td{
	background:#FFF;
}
/*#pageShopping table table table td p{
	padding:0 10px;
	line-height:1.8;
}*/
#pageShopping table table table td p,
#pageShopping table table table td span{
	line-height:1.8;
}

#pageShopping table table table td span.j12 strong{
	font-weight:bold;
}
/*#pageShopping table table table td span.j12 strong{
	font-weight:bold;
	font-size:12px;
}
#pageShopping table table table td span.j10{
	font-size:10px;
}*/

/* pageOther
========================================== */
#pageOther #container #contents .section .title{
	color:#e64639;
	font-weight:bold;
}
#pageOther #container #contents .section .unit{
	width:486px;
	border:1px solid #ccc;
	padding:8px;
	margin:5px 5px 10px;
}
#pageOther #container #contents .section .unit:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility:	hidden;
	font-size: 0;
}
#pageOther #container #contents .section .unit img{
	float:left;
	display:inline;
	width:120px;
	border:1px solid #000;
	margin:0 8px 0 0;
}
#pageOther #container #contents .section .unit div.txt{
	float:right;
	display:inline;
	width:356px;
	position:relative;
}
#pageOther #container #contents .section .unit div.txt strong{
	display:block;
	border-bottom:1px solid #CCC;
	margin-bottom:5px;
	padding-bottom:5px;
}
#pageOther #container #contents .section .unit div.txt span{
	position:absolute;
	right:0;
	top:0;
}
#pageOther #container #contents #movies .unit{
	position:relative;
}
#pageOther #container #contents #movies .unit .play{
	position:absolute;
	top:30px;
	left:46px;
}
#pageOther #container #contents #movies .unit .play img{
	width:48px;
	border:none;
	margin:0;
}

/* pageGallery
========================================== */
#pageGallery #container{
	width:712px;
	margin-bottom:40px;
}
#pageGallery #container a{
	color:#628270;
	text-decoration:none;
}
#pageGallery #container a:hover{
	color:#628270;
	text-decoration:underline;
}
#pageGallery .section{
	width:712px;
	margin:10px 0 20px;
}
#pageGallery .section:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility:	hidden;
	font-size: 0;
}
#pageGallery .section .title{
	clear:both;
	border-bottom:1px solid #666;
	padding-bottom:10px;
	margin-bottom:10px;
	position:relative;
}
#pageGallery .section .title:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility:	hidden;
	font-size: 0;
}
#pageGallery .section .title h3{
	color:#e64639;
	font-weight:bold;
}
#pageGallery .section img{
	width:160px;
	float:left;
	border:1px solid #000;
	margin:8px;
}
#pageGallery .section .photoBy{
	clear:both;
	font-size:10px;
	text-align:right;
	margin-bottom:40px;
}
/* imported gallery markup (.clammbon-gallery, from the galleries WXR)
   mapped onto the same layout: breadcrumb, red title, 4 x 160px thumbs
   (8px margin + 160px + 1px border = 178px, x4 = the 712px #container) */
#pageGallery .clammbon-gallery,
#pageGallery .clammbon-gallery-index{
	margin:10px 0 20px;
}
#pageGallery .clammbon-gallery > p:first-child{
	margin-bottom:15px;
	line-height:1.7;
}
#pageGallery .clammbon-gallery h3,
#pageGallery .clammbon-gallery-index h2{
	clear:both;
	color:#e64639;
	font-weight:bold;
	line-height:1.5;
	border-bottom:1px solid #666;
	padding-bottom:10px;
	margin:10px 0 10px;
}
#pageGallery .clammbon-gallery-photos{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
}
#pageGallery .clammbon-gallery-photos a{
	display:block !important;
	width:auto !important;
	margin:8px !important;
}
#pageGallery .clammbon-gallery-photos img{
	display:block !important;
	width:160px !important;
	height:auto !important;
	border:1px solid #000;
}
#pageGallery .clammbon-gallery > p:last-child{
	clear:both;
	font-size:10px !important;
	text-align:right;
	margin-bottom:40px;
}
#pageGallery .clammbon-gallery-index li{
	line-height:1.7;
	margin-bottom:5px;
}
#pageGallery #container .top{
	clear:both;
	text-align:right;
	margin:10px 0;
	font-size:10px;
}

/* works
========================================== */
#works #contents .section{
	width:514px;
	margin-bottom:10px;
}
#works #contents .section{
	
}
#works #contents .author{
	clear:both;
	border-bottom:1px solid #666;
	padding-bottom:10px;
	margin-bottom:10px;
	position:relative;
	color:#e64639;
	font-weight:bold;
}
#works #contents .author:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility:	hidden;
	font-size: 0;
}
#works #contents .section .title{
	clear:both;
	border-bottom:none;
	padding-bottom:0;
	margin-bottom:0;
	position:relative;
}
#works #contents .section .title h3{
	color:#000;
	font-weight:bold;
}

/* ==== additions for the WordPress recreation ==== */

a.skip-link.screen-reader-text{
	position:absolute;
	left:-9999px;
}

/* ported from the original contact page's inline <style> block */
.contact-mailtocontents{
	margin:55px auto 245px;
}
.contact-mailtocontents p{
	margin:0 0 1em;
}
.contact-mailtocontents p.mailto{
	font-size:14px;
}

/* ported from /static/css/base/top.css — homepage wrapper */
#contentsArea{
	width:800px;
	margin:0 auto;
	position:relative;
}
#cntBox{
	position:relative;
	width:800px;
	height:650px;
	margin:0 auto;
}
#cntBox .charLayer{
	position:absolute;
	left:0;
	top:0;
	width:800px;
	height:650px;
	visibility:hidden;
	z-index:10;
	pointer-events:none;
}
#cntBox #momentLink{
	display:block;
	position:absolute;
	left:53px;
	top:383px;
	width:202px;
	height:157px;
	z-index:100;
}

#globalNavi h1{
	margin:0;
}

.pagerNavi{
	clear:both;
	text-align:center;
	margin:20px 0;
	font-size:12px;
}
.pagerNavi a, .pagerNavi span{
	margin:0 6px;
}

#contents .entry-content img{
	max-width:100%;
	height:auto;
}
#contents .entry-title{
	color:#e64639;
	font-weight:bold;
}
#contents .entry-meta{
	font-size:10px;
	color:#999;
	margin-bottom:10px;
}

/* Responsive additions: keep the original 800px desktop layout intact.
   Everything below is inert above 768px; the mobile layout follows
   clammbon_sp_design.png (wordmark + hamburger, tab bar, single column). */
.responsiveNavi,
.frontMobileHero,
.mobileLogo,
.mobileMenu,
.pageTop{
	display:none;
}

@media (max-width: 768px){
	html{
		-webkit-text-size-adjust:100%;
	}
	body{
		margin:0;
		font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Helvetica Neue",Arial,"Noto Sans JP",sans-serif;
		font-size:15px;
		line-height:1.7;
	}
	#wrapper,
	#wrapperShopping,
	#shopping #wrapper{
		width:100%;
		max-width:800px;
		box-sizing:border-box;
		margin:0 auto;
		padding:0 16px;
	}
	#header,
	#globalNavi,
	#container,
	#footer,
	#pageGallery #container{
		width:100%;
		box-sizing:border-box;
	}

	/* header: cropped wordmark + hamburger
	========================================== */
	#header{
		margin:0;
	}
	#globalNavi{
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		justify-content:space-between;
		position:relative;
		z-index:30;
		margin:0;
		padding:14px 0 2px;
	}
	#globalNavi h1,
	#globalNavi .menuLayer{
		display:none;
	}
	/* header.jpg = wordmark (top ~100px) + nav labels; show only the wordmark */
	.mobileLogo{
		display:block;
		flex:1 1 0;
		min-width:0;
		max-width:300px;
		margin-right:16px;
		overflow:hidden;
		aspect-ratio:766 / 104;
	}
	.mobileLogo img{
		display:block;
		width:108%;
		max-width:none;
		height:auto;
		margin-left:-4%;
	}
	.mobileMenu{
		display:block;
		flex:0 0 auto;
	}
	.menuToggle{
		display:list-item;
		box-sizing:border-box;
		min-width:44px;
		min-height:44px;
		list-style:none;
		margin:0;
		padding:7px 2px 5px;
		color:#000;
		font-size:10px;
		font-weight:bold;
		line-height:1;
		letter-spacing:.02em;
		cursor:pointer;
		touch-action:manipulation;
		-webkit-tap-highlight-color:transparent;
		-webkit-user-select:none;
		user-select:none;
	}
	.menuToggle::marker{
		content:"";
		font-size:0;
	}
	.menuToggle::-webkit-details-marker{
		display:none;
	}
	.menuToggleInner{
		display:flex;
		flex-direction:column;
		align-items:center;
		gap:5px;
	}
	.menuToggleInner,
	.menuToggleInner *{
		pointer-events:none;
	}
	.menuToggleBars{
		display:block;
		position:relative;
		width:26px;
		height:18px;
	}
	.menuToggleBars span{
		position:absolute;
		left:0;
		width:100%;
		height:2px;
		background:#000;
		transition:transform .2s, opacity .2s;
	}
	.menuToggleBars span:nth-child(1){ top:0; }
	.menuToggleBars span:nth-child(2){ top:8px; }
	.menuToggleBars span:nth-child(3){ top:16px; }
	.mobileMenu[open] .menuToggleBars span:nth-child(1){
		transform:translateY(8px) rotate(45deg);
	}
	.mobileMenu[open] .menuToggleBars span:nth-child(2){
		opacity:0;
	}
	.mobileMenu[open] .menuToggleBars span:nth-child(3){
		transform:translateY(-8px) rotate(-45deg);
	}
	/* the menu drops down over the page from the bottom edge of #globalNavi */
	.globalTextNavi{
		display:none;
		position:absolute;
		left:0;
		right:0;
		top:100%;
		z-index:20;
		padding-bottom:8px;
		border-top:1px solid #ddd;
		border-bottom:1px solid #ddd;
		background:#fff;
		box-shadow:0 10px 16px rgba(0,0,0,.08);
	}
	.mobileMenu[open] .globalTextNavi{
		display:block;
	}
	.globalTextNavi ul{
		display:grid;
		grid-template-columns:repeat(2, minmax(0, 1fr));
		column-gap:16px;
	}
	.globalTextNavi a{
		display:block;
		padding:13px 4px 12px;
		border-bottom:1px solid #e5e5e5;
		color:#000;
		text-decoration:none;
		font-size:15px;
		line-height:1.3;
	}

	/* tab bar: #subContents h2 + .localNavi become one scrollable row,
	   the rest of the sidebar (SNS links, PVs) moves below the article
	========================================== */
	#container{
		position:relative;
		display:flex;
		flex-wrap:wrap;
		align-items:flex-start;
		margin:6px auto 0;
	}
	/* the clearfix pseudo is reused as the "»" scroll hint over the tab bar */
	#container:after{
		content:"\00bb";
		display:block;
		position:absolute;
		top:0;
		right:0;
		width:44px;
		height:39px;
		visibility:visible;
		color:#333;
		font-size:16px;
		line-height:37px;
		text-align:right;
		background:linear-gradient(to right, rgba(255,255,255,0), #fff 55%);
		pointer-events:none;
		transition:opacity .2s;
	}
	#container.is-navi-end:after{
		opacity:0;
	}
	#container #subContents{
		display:contents;
	}
	#subContents:after,
	#subContents > br{
		display:none;
	}
	#subContents h2{
		flex:0 0 auto;
		margin:0;
		padding:12px 10px 10px 0;
		border-bottom:2px solid transparent;
		font-size:15px;
		font-weight:bold;
		line-height:1;
	}
	#subContents h2.current{
		border-color:#e64639;
	}
	#subContents h2 a{
		color:#000;
		text-decoration:none;
	}
	#subContents .localNavi{
		flex:1 1 0;
		min-width:0;
		box-sizing:border-box;
		display:flex;
		margin:0;
		padding-right:36px;
		overflow-x:auto;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
	}
	#subContents .localNavi::-webkit-scrollbar{
		display:none;
	}
	#subContents .localNavi:after{
		display:none;
	}
	#subContents .localNavi li{
		flex:0 0 auto;
		margin:0;
	}
	#subContents .localNavi li a{
		display:block;
		padding:12px 10px 10px;
		border-bottom:2px solid transparent;
		font-size:15px;
		line-height:1;
		white-space:nowrap;
	}
	#subContents .localNavi li.current a{
		border-color:#e64639;
		font-weight:bold;
	}
	/* profile has two h2 + .localNavi pairs: a fixed basis (independent of
	   the viewport) keeps each pair on its own row */
	#prof_disco #subContents .localNavi{
		flex-basis:calc(100% - 130px);
	}

	/* article
	========================================== */
	#contents #topicPath{
		margin-bottom:10px;
		font-size:12px;
		color:#666;
	}
	#contents #topicPath p{
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
		line-height:1.5;
	}
	#container #contents{
		order:2;
		flex:0 0 100%;
		float:none;
		display:block;
		width:100%;
		box-sizing:border-box;
		margin:18px 0 0;
	}
	#contents .section,
	#archives #contents .section,
	#works #contents .section,
	#pageGallery .section{
		width:100%;
		box-sizing:border-box;
	}
	#contents .section{
		margin-bottom:36px;
	}
	#contents .section .title{
		display:flex;
		flex-direction:column;
		padding-bottom:12px;
		margin-bottom:14px;
	}
	#contents .section .title:after{
		display:none;
	}
	#contents .section .title h3{
		font-size:19px;
		line-height:1.4;
	}
	#contents .section .title span{
		position:static;
		order:-1;
		align-self:flex-end;
		margin-bottom:6px;
		font-size:12px;
		line-height:1.4;
	}
	/* archive index: compact title / date rows */
	#archives #contents .section .title{
		flex-direction:row;
		justify-content:space-between;
		align-items:baseline;
		gap:12px;
		padding-bottom:10px;
		margin-bottom:10px;
	}
	#archives #contents .section .title h3{
		font-size:14px;
		font-weight:normal;
	}
	#archives #contents .section .title span{
		order:1;
		flex:0 0 auto;
		margin:0;
	}
	#contents p,
	#contents div,
	#contents dl,
	#contents .section .unit p{
		line-height:1.75;
	}
	#contents img,
	#subContents img,
	#contents object,
	#contents embed,
	#contents iframe{
		max-width:100%;
		height:auto;
	}
	/* imported blog images: keep the float but cap it at ~half the column */
	#contents .mt-image-right,
	#contents .alignright,
	#contents img[style*="float: right"]{
		float:right !important;
		width:auto;
		max-width:46%;
		height:auto;
		margin:4px 0 10px 14px !important;
	}
	#contents .mt-image-left,
	#contents .alignleft,
	#contents img[style*="float: left"]{
		float:left !important;
		width:auto;
		max-width:46%;
		height:auto;
		margin:4px 14px 10px 0 !important;
	}
	#contents .mt-image-center,
	#contents .aligncenter{
		display:block;
		float:none !important;
		max-width:100%;
		height:auto;
		margin:8px auto 14px !important;
	}
	#contents .section .unit .img{
		max-width:46%;
		margin-left:14px;
	}
	#contents .section .unit .img img{
		max-width:100%;
		height:auto;
	}
	#live #contents .section dt,
	#archiveMenu{
		float:none;
	}
	/* the per-article ▲ links are replaced by one "ページトップへ" above the footer */
	#contents .top{
		display:none;
	}
	.pageTop{
		display:block;
		margin:28px 0 0;
		padding:14px 0 12px;
		border-top:1px solid #ccc;
		border-bottom:1px solid #ccc;
		color:#000;
		text-align:center;
		text-decoration:none;
		font-size:12px;
		line-height:1.4;
	}
	.pageTop span{
		display:block;
		margin-top:2px;
	}
	ul.txt{
		width:auto;
		margin-left:0;
	}

	/* sidebar leftovers below the article: PVs then SNS/related links
	========================================== */
	#subContents .pv{
		order:3;
		flex:0 0 calc(50% - 6px);
		position:relative;
		margin:12px 0 0;
	}
	#subContents > div.pv:first-of-type{
		flex:0 0 100%;
		margin-top:20px;
	}
	#subContents > div.pv:nth-of-type(odd):not(:first-of-type){
		margin-left:12px;
	}
	#subContents .pv h4{
		position:absolute;
		left:0;
		right:0;
		bottom:0;
		z-index:2;
		margin:0;
		padding:6px 8px;
		background:rgba(0,0,0,.72);
		color:#fff;
		font-size:13px;
		line-height:1.3;
		text-align:center;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		pointer-events:none;
	}
	#subContents .pv a{
		display:block;
		position:relative;
		overflow:hidden;
		aspect-ratio:16 / 9;
		background:#000;
	}
	#subContents .pv a img{
		display:block;
		width:100%;
		height:100%;
		object-fit:cover;
	}
	#subContents .pv a:not(.youtubeembed) img{
		object-fit:contain;
	}
	#subContents .pv .play{
		top:50%;
		left:50%;
		width:64px;
		height:64px;
		margin:-32px 0 0 -32px;
	}
	#subContents .pv .play img{
		width:100%;
		height:100%;
	}
	#subContents .localNaviArrow{
		order:4;
		flex:0 0 100%;
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		gap:8px 18px;
		margin:22px 0 0;
	}
	#subContents .localNaviArrow li{
		margin:0;
		font-size:13px;
		line-height:1.5;
	}
	#subContents .localNaviArrow li:has(> a > img){
		padding-left:0;
		background:none;
	}
	#subContents .localNaviArrow li img{
		vertical-align:middle;
	}

	/* footer
	========================================== */
	#footer{
		margin:16px auto 30px;
		text-align:center;
		font-size:10px;
		color:#666;
	}

	/* photo galleries: single column, 2 thumbnails per row
	========================================== */
	#pageGallery #container{
		display:block;
	}
	#pageGallery #container:after,
	#pageGallery #container .top{
		display:none;
	}
	#pageGallery .clammbon-gallery > p:first-child{
		font-size:13px;
	}
	#pageGallery .clammbon-gallery h3,
	#pageGallery .clammbon-gallery-index h2{
		font-size:17px;
		line-height:1.4;
		padding-bottom:12px;
		margin:0 0 6px;
	}
	#pageGallery .clammbon-gallery-photos a{
		box-sizing:border-box;
		width:50% !important;
		margin:0 !important;
		padding:8px;
	}
	#pageGallery .clammbon-gallery-photos img{
		box-sizing:border-box;
		width:100% !important;
	}
	#pageGallery .clammbon-gallery > p:last-child{
		font-size:11px !important;
		margin:8px 8px 20px;
	}

	/* other page templates
	========================================== */
	#pageOther #container #contents .section .unit{
		width:100%;
		box-sizing:border-box;
		margin:5px 0 12px;
	}
	#pageOther #container #contents .section .unit img,
	#prof_disco #contents #discography .photo,
	#prof_disco #contents #discography .description{
		float:none;
		display:block;
		width:auto;
		box-sizing:border-box;
	}
	#pageOther #container #contents .section .unit div.txt{
		float:none;
		display:block;
		width:auto;
	}
	#pageOther #container #contents .section .unit div.txt span{
		position:static;
		display:block;
		margin-top:4px;
	}
	#pageContact table,
	#form table,
	#form .confirmButton,
	#pageContact .confirmButton{
		width:100%;
		box-sizing:border-box;
	}
	#pageContact table,
	#pageContact table tbody,
	#pageContact table tr,
	#pageContact table td,
	#form table,
	#form table tbody,
	#form table tr,
	#form table th,
	#form table td{
		display:block;
		width:100%;
		box-sizing:border-box;
	}
	#pageContact table td.menu{
		width:100%;
		text-align:left;
	}
	#pageContact table input,
	#pageContact table textarea,
	#pageContact .submitButton{
		width:100%;
		box-sizing:border-box;
		margin-left:0;
	}

	/* front page: static hero + text links instead of the image map
	========================================== */
	#contentsArea{
		width:100%;
		box-sizing:border-box;
		padding:0 16px 24px;
	}
	#cntBox{
		display:none;
	}
	.frontMobileHero{
		display:block;
		position:relative;
		width:100%;
		max-width:800px;
		margin:0 auto;
	}
	.frontMobileHero > img{
		display:block;
		width:100%;
		height:auto;
	}
	/* same box as #cntBox #momentLink (53/383, 202x157 within 800x650) */
	.frontMobileMoment{
		display:block;
		position:absolute;
		left:6.625%;
		top:58.923%;
		width:25.25%;
		z-index:2;
	}
	.frontMobileMoment img{
		display:block;
		width:100%;
		height:auto;
	}
	.frontTextNavi{
		display:block;
		max-width:520px;
		margin:16px auto 0;
	}
	.frontTextNavi ul{
		display:grid;
		grid-template-columns:repeat(3, minmax(0, 1fr));
		gap:8px;
	}
	.frontTextNavi a{
		display:block;
		box-sizing:border-box;
		min-height:44px;
		padding:12px 6px;
		border:1px solid #ccc;
		color:#000;
		text-align:center;
		text-decoration:none;
		font-size:14px;
		line-height:1.35;
	}
	.frontTextNavi a:hover,
	.frontTextNavi a:focus{
		color:#628270;
		text-decoration:underline;
	}
}

@media (max-width: 480px){
	.mobileLogo{
		max-width:none;
	}
	.frontTextNavi ul{
		grid-template-columns:repeat(2, minmax(0, 1fr));
	}
}