/* ============================================ */
/* RESET */
/* ============================================ */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{margin:0; padding:0;}
table{border-collapse:collapse; border-spacing:0;}
fieldset, img, hr{border:0;vertical-align: top;}
address, caption, cite, code, dfn, em, strong, th, var{font-style:normal; font-weight:normal;}
ol, ul{list-style:none;}
caption, th{text-align:left;}
h1, h2, h3, h4, h5, h6, button{font-size:100%; font-weight:normal;}
q:before, q:after{content:'';}
abbr, acronym{border:0;}
*{margin:0;padding:0;border:0;list-style-type:none;-webkit-text-size-adjust: none;}
*{text-decoration:none;color: inherit; line-height: inherit;}
*, *:before, *:after {
	box-sizing: border-box;
	-webkit-appearance: none;
}




/* ============================================ */
/* ROOT */
/* ============================================ */
:root{
	/* Base unit */
	--unit: 8px;
	
	/* Spacing */
	--gap: calc(var(--unit)*2);
	--baseline: calc(var(--unit)*3);
	--row: calc(var(--baseline)*2);
	
	/* Grid */
	/* 	--page-min-width: 767px; */
/* 	--page-max-width: 1152px; */
	--page-max-width: 1392px;
	--page-fluid-width: min(100vw, var(--page-max-width));
	
	--grid-columns: 6;
	--col-width: calc((var(--page-fluid-width) - calc(var(--gap)*7)) / var(--grid-columns));
	
	--col-1: calc(var(--col-width) * 1);
	--col-2: calc(var(--col-width) * 2 + var(--gap));
	--col-3: calc(var(--col-width) * 3 + var(--gap) * 2);
	--col-4: calc(var(--col-width) * 4 + var(--gap) * 3);
	--col-5: calc(var(--col-width) * 5 + var(--gap) * 4);
	--col-6: 100%;
	
	--col-0-5: calc(var(--col-width) * 0.5 - var(--gap) * 0.5);
	--col-1-5: calc(var(--col-width) * 1.5 + var(--gap) * 0.5);
	--col-2-5: calc(var(--col-width) * 2.5 + var(--gap) * 1.5);	
	--col-3-5: calc(var(--col-width) * 3.5 + var(--gap) * 2.5);	
	--col-4-5: calc(var(--col-width) * 4.5 + var(--gap) * 3.5);	
	--col-5-5: calc(var(--col-width) * 5.5 + var(--gap) * 4.5);	
	
	/* Typography */
	--f-size: calc(var(--unit)*1.75);/* font-size:14px */
	--f-size-3xl: calc(var(--unit)*3);/* font-size:24px */
	--f-size-2xl: calc(var(--unit)*2.5);/* font-size:20px */
	--f-size-xl: calc(var(--unit)*2.25);/* font-size:18px */
	--f-size-l: calc(var(--unit)*2);/* font-size:16px */
	--f-size-s: calc(var(--unit)*1.625);/* font-size:13px */
	--f-size-xs: calc(var(--unit)*1.5);/* font-size:12px */
	--f-size-2xs: calc(var(--unit)*1.375);/* font-size:11px */
	--f-size-3xs: calc(var(--unit)*1.25);/* font-size:10px */
	--leading: var(--baseline);
	
	--f-serif: "EB Garamond",'Times New Roman',"Zen Old Mincho",'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro W3',serif;
	--f-sans: "Inter","helvetica","Hiragino Kaku sans Pro W3","Hiragino Kaku sans Pro","ヒラギノ角ゴ Pro W3", sans-serif;
}


@media (max-width: 820px) {
	:root {
		--unit: clamp(6px, 2vw, 8px);
	}
}



body.debug .layout {
  --col-12: calc((100% - (var(--gap) * 13)) / 12);
  --unit-12: calc(var(--col-12) + var(--gap));

  /* 2カラム + gap = 6カラムの1単位 */
  --col-6: calc(var(--col-12) * 2 + var(--gap));
  --unit-6: calc(var(--col-6) + var(--gap));

  background-image:
    /* ===== 6カラム（赤・colだけ） ===== */
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent var(--gap),

      rgba(255,0,0,0.1) var(--gap),
      rgba(255,0,0,0.1) calc(var(--gap) + var(--col-6)),

      transparent calc(var(--gap) + var(--col-6)),
      transparent var(--unit-6)
    ),

    /* ===== 12カラム（青・colだけ） ===== */
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent var(--gap),

      rgba(0,0,255,0.1) var(--gap),
      rgba(0,0,255,0.1) calc(var(--gap) + var(--col-12)),

      transparent calc(var(--gap) + var(--col-12)),
      transparent var(--unit-12)
    ),
    
    repeating-linear-gradient(
      to bottom,
      rgba(0, 200, 0, 0.65) 0,
      rgba(0, 200, 0, 0.65) 1px,
      transparent 1px,
      transparent var(--row)
    );
}


/* ============================================ */
/* COMMON */
/* ============================================ */
html,body{
	font-size: var(--f-size);
	font-family: var(--f-serif);
	line-height: var(--leading);
	letter-spacing: 0.05em;
	color: #000;
}

body{
	min-height: 100vh;
	display: grid;
	gap: calc(var(--row) * 5);
	justify-items: center;
	padding-block: var(--row);
}

body.no-scroll {
	position: fixed;
	width: 100%;
}

.sp{
	display: none;
}

.pc{
	display: block;
}

@media screen and (max-width: 820px) {
	body{
		padding-block: var(--baseline);
		gap: calc(var(--row) * 3);
	}

	.sp{
		display: block !important;
	}
	
	.pc{
		display: none !important;
	}

}

/*________Layout_______*/
.layout{
/*
	display: grid;
	row-gap: calc(var(--row) * 4);
*/
	width: var(--page-fluid-width);
	padding-inline: var(--gap);
}

.ml-auto {
	margin-left: auto;
}
.mr-auto {
	margin-right: auto;
}
.mx-auto {
	margin-inline: auto;
}


.icon{
	display: block;
	width: var(--f-size);
	height: var(--f-size);
}

.icon:hover{
	opacity: .3;
}

img{
	width: 100%;
	height: auto;
}

a{
	transition: .2s;
}

a:hover{
	color: #ddd;
}

.link-blank{
	text-decoration: underline;
}

.link-blank:after {
	display: inline-block;
	content: "↗";
	margin-left: 0.5em;
	color: #999;
	text-decoration: none;
}

h1 img{
	width: auto;
	height: var(--baseline);
}


h2{
	font-size: var(--f-size-l);
/* 	writing-mode: vertical-lr; */

	position: sticky;
	margin-bottom: auto;
	top: var(--row);

}

.min{
	font-family: var(--f-serif);
}
.sans{
	font-family: var(--f-sans);
}

.list{
	padding-left: 1rem;
	margin-bottom: 2em;
}

.list__item{
	list-style-type: "・";
	list-style-position: outside;
}

.btn-more{
	display: block;
    width: fit-content;
    margin-left: auto;
	font-family: var(--f-sans);
	font-size: var(--f-size-xs);
	border-bottom: solid 1px currentcolor;
	margin-top: var(--baseline);
	grid-column: 1 / -1;
}

.btn-back{
    display: block;
    width: fit-content;
    font-family: var(--f-sans);
    font-size: var(--f-size-xs);
    border-bottom: solid 1px currentcolor;
    margin-top: calc(var(--row)*2);
}

.btn-submit{
	background: none;
	font-family: var(--f-serif);
    width: var(--col-1);
    height: var(--row);
    transition: .2s;
}

.btn-submit:hover{
	background: #333;
	color: #fff;
}


@media screen and (max-width: 820px) {
	.layout{
		padding-inline: var(--gap);
	}

	h2{
		font-size: var(--f-size-xl);
		writing-mode: unset;
		position: inherit;
	}
	
	.btn-submit{
	    width: var(--col-3);
	}
}



/* ============================================ */
/* Header */
/* ============================================ */
.header{
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), 1fr);
	column-gap: var(--gap);
	transition: .5s;
	
}

.header.is-scrolled{
	opacity: 0;
}

.logo{
	grid-column: 1 / span 2;
	font-size: var(--f-size-2xl);
}

.logo img{
	width: auto;
	height: var(--leading);
}

.header__nav{
    grid-column: 4 / span 3;
    font-size: var(--f-size-s);
    column-gap: var(--gap);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.header__list{
	white-space: nowrap;
}

.header__list:nth-child(2),
.header__list:nth-child(3){
	grid-column: span 2;
}

.header__item{
	line-height: 1em;
	height: var(--baseline); 
}

.yh{
	color: #ccc;
	pointer-events:none;
	cursor: default;
}

.yh_clickable{
	color: #ccc;
}


@media screen and (max-width: 820px) {
	.header.is-scrolled{
		opacity: 1;
	}
	
	
	/*________Hamburger Menu_______*/
	.header-btn {
		width: var(--row);
		height: var(--baseline);
		position: fixed;
		top: var(--baseline);
		right: var(--gap);
		background: none;
		z-index: 8888;
		cursor: pointer;
	}
	
	.header-btn span {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 100%;
		height: 1px;
		background-color: #000;
		transform-origin: center;
		transition: all .3s;
	}
	
	.header-btn span:nth-of-type(1) {
		transform: translate(-50%, -50%) translateY(calc(-0.5 * var(--baseline)));
	}
	
	.header-btn span:nth-of-type(2) {
		transform: translate(-50%, -50%);
	}
	
	.header-btn span:nth-of-type(3) {
		transform: translate(-50%, -50%) translateY(calc(0.5 * var(--baseline)));
	}
	
	
	.header-btn.is-active span:nth-of-type(1) {
		transform: translate(-50%, -50%) rotate(-26.565051deg);
	}
	
	.header-btn.is-active span:nth-of-type(2) {
		opacity: 0;
	}
	
	.header-btn.is-active span:nth-of-type(3) {
		transform: translate(-50%, -50%) rotate(26.565051deg);
	}

	/*________Mobile nav_______*/
	.header-nav{	
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		height: 100dvh;
		padding: var(--baseline) var(--gap);
		
		display: block;
		
		transition: all .3s;
		transform: translateY(-100%);
		background: #fff;
		z-index: 50;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.header-nav.is-active{
		transform: translateY(0);
	}

	.header-nav .header__list{
		width: 100%;
		margin-bottom: var(--row);
		font-size: var(--f-size);
	}
	
	.header__list:nth-child(2){
		margin-top: calc(var(--baseline)*4);
	}
	
	.header__list:nth-child(5){
		font-size: var(--f-size-s);
	}

	.header__item{
		line-height: 1em;
		min-height: calc(var(--baseline)*1.5); 
		height: auto;
	}
	
	.header__list:nth-child(5) .header__item{
		height: calc(var(--baseline)*1.5);
	}
	
	
	/*________Mobile nav sub_______*/
	.header__list__sub{
		margin: var(--gap) 0 var(--row);
		font-size: var(--f-size);
		text-indent: 1em;
	}
	
	.header__item__sub{
		margin-bottom: var(--gap);
	}
	
	.header__link__sub:before{
		content: "- ";
		display: inline;
	}
}


/* ============================================ */
/* Main */
/* ============================================ */
.main{
	display: grid;
	gap: var(--row);
}

.breadcrumb{
	font-size: var(--f-size-2xs);
	font-family: var(--f-sans);
	line-height: var(--leading);
	display: flex;
	justify-content: flex-end;
    position: fixed;
    line-height: 1.2em;
    right: var(--gap);
    top: calc(var(--row)*7);
}

.breadcrumb__list{
	display: flex;
	min-width: var(--col-1);
	writing-mode: vertical-rl;
}


.breadcrumb__item{
	overflow: hidden;
	white-space: nowrap; 
	max-width: var(--col-2);
	text-overflow: ellipsis;
}

.baseline-fix{
	margin-bottom: var(--baseline-offset, 0px);
}

.contents{
	display: grid;
	row-gap: calc(var(--row) * 4);
	margin-bottom: calc(var(--row) * 2);
}


.section{
	display: grid;
	gap: var(--gap);
}

.section--col-2{	
	grid-template-columns: repeat(2, 1fr);
}

.section--col-3{
    grid-template-columns: repeat(3, 1fr);

}

.content{
	gap: var(--gap);
	grid-column: span 2;
	display: grid;
	grid-template-columns: 1fr;
}


.textarea{
	display: grid;
	gap: var(--gap);
}

.textarea--col-1{	
	grid-template-columns: 1fr;
}

.textarea--col-2{
	grid-template-columns: repeat(2, 1fr);
}


.text{
	font-size: var(--f-size-l);
	line-height: 2;
	max-width: var(--col-3);
}

.text--sub{
	font-size: var(--f-size);
}

.text--en{
	font-size: var(--f-size);
}

.text p{
	margin-bottom: 2em;
}

.text img + img{
	margin-top: var(--unit);
}

.text span{
	font-size: var(--f-size-s)
}





@media screen and (max-width: 1000px) {
	.textarea--col-2{
		grid-template-columns: 1fr;
	}
	
	.text{
		width: 100%;
	}

	.text img{
	}

}

@media screen and (max-width: 820px) {
	.main{
/* 		gap: calc(var(--row)*2); */
	}

	.breadcrumb{
		position: relative;
		top: auto;
		right: var(--gap);
	}
	
	.breadcrumb__list{
		justify-content: flex-start;
		width: auto;
		writing-mode: inherit;
	}
	
	.breadcrumb__item{
		max-width: var(--col-3);
	}

	.breadcrumb__item + .breadcrumb__item:before{
		display: inline-block;
		content: ">";
		margin-inline: 0.5em;
		color: #999;
	}
	
	.section{
		grid-template-columns: 1fr;
		gap: var(--row);
	}
	
	.content{
		grid-column: 1;
		grid-template-columns: 1fr;		
	}
	
	.textarea--col-1{
		grid-column: 1;		
	}

	.textarea--col-2{
		grid-column: 1;		
	}

	.text{
		max-width: var(--col-5);
		font-size: var(--f-size);	
	}
}

@media screen and (max-width: 576px) {
	.text{
		max-width: 100%;	
	}
}


/* ============================================ */
/* Footer */
/* ============================================ */
.footer{
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), 1fr);
	gap: var(--gap);
	opacity: 0;
	transition:.6s;
}

.footer.is-visible{
	opacity: 1;
}

.footer .logo img{
	height: var(--f-size-xl);
}

.footer__nav{
	font-family: var(--f-sans);
	font-size: var(--f-size-xs);
	grid-column: 3 / span 4;
	display: grid;
	grid-template-columns: subgrid;
}

.footer__list{
	white-space: nowrap;
	width: var(--col-1);
}

.footer__item{
	line-height: 1em;
	height: var(--baseline); 
}

.copylight{
	font-size: var(--unit);
	line-height: 1.5;
}


@media screen and (max-width: 820px) {
	.footer{
		grid-template-columns: 1fr;
		gap: calc(var(--row) / 2) 0;
	}

	.footer__nav{
		grid-column: -1 / 1;
		grid-template-columns: repeat(4, 1fr);
		font-size: var(--f-size-2xs);
	}

	.footer__list{
		width: var(--col-1-5);
	}
	
	.copylight{
		grid-column: 1 /-1;
	}
}




/* ============================================ */
/* PAGE-top */
/* ============================================ */
.cover{
	padding-bottom: var(--row);
	align-items: flex-end;
	margin-top: calc(var(--row) * -2);
}

.cover-img{
	width: var(--col-2-5);
	height: auto;
}

.cover-news{
	margin-bottom: var(--baseline);
    position: sticky;
    bottom: var(--baseline);
}

.cover-news__link{
}

.cover-news__date{
	font-family: var(--f-sans);
	font-size: var(--f-size-2xs);
	margin-right: var(--gap);
	color: #666;
}

@media screen and (max-width: 820px) {
	.cover{
		margin-top: 0;
	}
	
	.cover-img{
		width: 100%;
		margin-bottom: var(--gap);
	}
	
	.cover-news{
		position: inherit;
	}
}



/* ============================================ */
/* PAGE-About */
/* ============================================ */
.googlemap{
	width: 100%;
	height: calc(var(--row)*10);
/* 	filter:grayscale(100%); */
}

.access-directions{
	font-family: var(--f-sans);
	font-size: var(--f-size-2xs);
}


/* ============================================ */
/* PAGE-News */
/* ============================================ */
.news{
}

.news__date{
	font-size: var(--f-size-2xs);
	font-family: var(--f-sans);
/* 	margin-bottom: var(--gap); */
	color: #999;
}

.news__content{
	grid-template-columns: repeat(4, 1fr);
}

.news__text{
	grid-column: span 3;
	margin-bottom: var(--row);
}

.news__text img{
	margin-bottom: var(--baseline);
}

.news__cat{
	font-size: var(--f-size-3xs);
	font-family: var(--f-sans);
	color: #999;
	width: var(--col-0-5);
}

.news__cat p{
	font-size: var(--f-size-xs);
	color: #666;
	font-style: italic;
}



.category{
	font-family: var(--f-sans);
	font-size: var(--f-size-xs);
	margin-bottom: var(--baseline);
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), 1fr);
	column-gap: var(--gap);
}

.category__heading{
	font-size: var(--f-size-3xs);
	color: #999;	
	grid-column: 3;
}

.category__cat{
	display: flex;
	column-gap: var(--gap);
	grid-column: span 3;
	color: #666;
	font-style: italic;
}

.category__cat .cat-item:before{
	content: "- ";
}


@media screen and (max-width: 820px) {
	.news__content{
		grid-template-columns: repeat(6, 1fr);
		display: flex;
        flex-direction: column-reverse;
	}
	
	.news__text{
		grid-column: span 5;
	}
	
	.news__cat{
		width: 100%;
	}

	.category{
		margin-bottom: 0;
	}
		
	.category__heading{
		grid-column: 1;
	}
}




/* ============================================ */
/* PAGE-Contact */
/* ============================================ */
.contact{
	line-height: 2;
	max-width: var(--col-3);
}

.contact dt{
	line-height: var(--baseline);
}

.contact dd{
	margin-bottom: var(--baseline);
}

.contact input{
	border: solid 1px #999;
	padding: var(--unit);
	width: 100%;
	font-size: var(--f-size-l);
	background: none;
	height: var(--row);
}

.contact textarea{
	border: solid 1px #999;
	padding: var(--unit);
	width: 100%;
	font-size: var(--f-size-l);
	resize: vertical;
	min-height: calc(var(--row)*7);
}

.contact input[type="submit"]{
	font-family: var(--f-serif);
	font-size: var(--f-size);
}



@media screen and (max-width: 1000px) {
	.contact{
		width: 100%;
	}


}

@media screen and (max-width: 820px) {
	.contact{
		max-width: var(--col-5);
		font-size: var(--f-size);	
	}

	.contact input{	
		font-size: max(var(--f-size-l), 18px);
	}
	
	.contact textarea{	
		font-size: max(var(--f-size-l), 18px);
	}
	
	.contact input[type="submit"]{
		font-size: var(--f-size);
		line-height: normal;
	}
}

@media screen and (max-width: 576px) {
	.contact{
		max-width: 100%;	
	}
}



/* ============================================ */
/* PAGE-Sitemap */
/* ============================================ */
ul.sitemap{
	font-size: var(--f-size-xl);
	line-height: 2;
}

ul.sitemap li{
	margin-bottom: calc(var(--row) * 2);
}

ul.sitemap li a{
	display: flex;
	align-items: center;
	width: fit-content;
}

ul.sitemap li a:before{
    display: inline;
    content: "";
    margin-inline: -1.5rem 0.5rem;
    background: currentColor;
    width: 1rem;
    height: 1px;
}

ul.sitemap li a:hover:before{
	background: #000;
}

ul.sitemap__sub{
	font-size: var(--f-size);
	margin-top: var(--unit);
}

ul.sitemap__sub li{
	margin-bottom: inherit;
}


@media screen and (max-width: 820px) {	
	ul.sitemap li{
		margin-bottom: var(--row);
	}
	ul.sitemap li a:before{
		margin-inline: 0 0.5rem;
	}
	ul.sitemap__sub{
		margin-inline: 1.5rem 0;
	}
	
		ul.sitemap__sub li{
		margin-bottom: inherit;
	}
}


/* ============================================ */
/* PAGE-Privacy-policy */
/* ============================================ */
.privacy-policy{
	display: grid;
	gap: calc(var(--gap)*3);
	grid-template-columns: 1fr;
	max-width: var(--col-3);
}

.privacy-policy p{
	margin-bottom: var(--unit);
}

.privacy-policy__section{
}

.privacy-policy__heading{
	font-weight: bold;
	margin-bottom: var(--unit);
	font-family: var(--f-sans);
}
.privacy-policy__list{
	
}

.privacy-policy__item{
	text-indent: -2em;
	padding-left: 2em;
}

.privacy-policy__dt{
	
}

.privacy-policy__dd{
	padding-left: 2em;
}

.privacy-policy__contact{
	padding: var(--baseline) calc(var(--baseline)*2);
	border: solid 1px currentColor;
}



@media screen and (max-width: 820px) {
	.privacy-policy{
		max-width: var(--col-5);
	}
}

@media screen and (max-width: 576px) {
	.privacy-policy{
		max-width: 100%;	
	}
}