@charset "utf-8";

/* ************************************************************************
* 
*   common.css
*
************************************************************************ */
/* -------------- Common Settings -------------- */

:root {
  --black: #14171A;
  --white: #B8B9BA;
}

body{
	background: var(--black);
	color: var(--white);
    position: relative;
    margin: 24px;
}

body > .container {
  position: absolute;
  inset: 0;
}

h1, h2, h3, h4, h5, p, div, ul, ol, dl{
	font-family: "太ゴB101", "Futo Go B101", serif;
	font-size: 12px;
	line-height: 1.7;
	letter-spacing: .04rem;
	font-feature-settings: "palt";
}

a{
	color: var(--white);
	}

a:hover{
	text-decoration: none;
}

.sticky-fade {
  position: fixed;
  z-index: 1000;
  transition: opacity 0.1s ease;
  pointer-events: auto;
}
	
.sticky-fade.hidden {
  opacity: 0;
  pointer-events: none;
}


@media screen and (min-width: 769px) {

.container {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(11, minmax(0, 1fr) 24px) 1fr;
	margin: 0 auto;
	height: 100vh;
}

header{
	grid-row: 1;
	grid-column: 1 / 4;
	position: relative;

	.inner{
		position:fixed;
	}

	h2{
		margin: 0 0 12px;
	}
	h1{
		margin: 0 0 12px;
	}
	p{ 
		margin: 0 0 40px;
	}
	dl{
		margin: 0 0 16px;
	}
	dd{
		letter-spacing: 0;
		line-height: 1.5;
	}

	.copy-email {
		cursor: pointer;
		color: var(--white);
		text-decoration: underline;
		margin: 40px 0 0;
		letter-spacing: 0;
	}
	
	.copy-email:hover {
		text-decoration: none;
	}
	
	.copy-notification {
		position: fixed;
		background: var(--black);
		color: var(--white)
		padding: 4px 8px;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.1s ease;
		z-index: 9999;
		letter-spacing: 0;
	}
		
	.copy-notification.show {
		opacity: 1;
		pointer-events: auto;
	}
	
}

.aboutLink{
	opacity: 0.2;
	top: 24px;
	right: 24px;
}

.externalLink::after {
  content: "↗︎";
  text-decoration: none;
  margin-left: 8px;
  font-size: 11px;
  display: inline-block;
}



/* -------------- コンテンツ -------------- */
	
.path{
    display: flex;

    li{
        margin: 0 8px 0 0;
    }
}



/* -------------- Footer -------------- */	

footer {
	margin: 160px 0 24px;

	p{
	letter-spacing: 0;
	}
	
}

}


/* -------------- SP View -------------- */

@media screen and (max-width: 768px) {
/*h1, h2, h3, h4, h5, p, div, ul, ol, dl{
	font-size: 11px;
	}*/

body { 
	display: block;
	grid-template-columns: none;
	}


/* -------------- コンテンツ -------------- */

#wrap { 
	}

/* -------------- Header -------------- */

header{

	h2{
		margin: 0;
	}
	h1{
		margin: 0;
	}
	p{ 
		margin: 0 0 24px;
	}
	dl{
		margin: 0 0 8px;
	}
	dd{
		letter-spacing: 0;
		line-height: 1.5;
	}
	br{
		display: none;
	}
	
	.copy-email {
		cursor: pointer;
		color: var(--white);
		text-decoration: underline;
		margin: 24px 0 0;
		letter-spacing: 0;
	}
	
	.copy-email:hover {
		text-decoration: none;
	}
	
	.copy-notification {
		position: fixed;
		background: var(--black);
		color: var(--white)
		padding: 4px 8px;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.1s ease;
		z-index: 9999;
		letter-spacing: 0;
	}
		
	.copy-notification.show {
		opacity: 1;
		pointer-events: auto;
	}
	
}

.aboutLink{
	position: absolute;
	opacity: 0.2;
	top: 0;
	right: 0;
}

.externalLink::after {
  content: "↗︎";
  text-decoration: none;
  margin-left: 4px;
  font-size: 10px;
  display: inline-block;
}

.path{
    display: none;

    li{
        margin: 0 8px 0 0;
    }
}
	
/* -------------- Footer -------------- */	

footer{ 
	margin: 160px 0 24px;

	p{
	letter-spacing: 0;
		padding: 0 0 24px;
	}

}
}