:root {
	--pd-LR: 15px;
	--gurade: 
	linear-gradient(120deg, rgba(52, 8, 0, 0.8), rgba(255, 255, 255, 0)), linear-gradient(185deg, rgba(173, 79, 0, 0.8), rgba(255, 255, 255, 0)), linear-gradient(340deg, rgba(80, 80, 80, 1), rgba(255, 255, 255, 0));
}

.top-gradient-a {
  width: 100%;
  height: 15px;
  background: linear-gradient(to right, #87CEFA, #98FB98, #F5DEB3);
  position: fixed;
	z-index: 10;
}
.top-gradient-morning {
  width: 100%;
  height: 15px;
  background: linear-gradient(45deg, #87CEFA 3%, #87CEFA 10%, #FFDAB9, #FFB6C1);
  color: #000;
  position: fixed;
  z-index: 10;
}

.top-gradient-day {
  width: 100%;
  height: 15px;
  background: linear-gradient(to right, #ADD8E6, #90EE90, #F0FFF0);
  position: fixed;
  z-index: 10;
}


.top-gradient-evening {
  width: 100%;
  height: 15px;
  background: linear-gradient(to right bottom, #FFA07A, #FFD700, #FFB6C1);
  position: fixed;
  z-index: 10;
}


.top-gradient-night {
  position: relative;
  width: 100%;
  height: 15px;
  background: linear-gradient(to right, #191970, #4B0082, #2F4F4F);
  overflow: hidden;
  position: fixed;
  z-index: 10;
}

.footer-grade {
	position: relative;	
}

/* 星の点滅アニメーション */
@keyframes twinkle {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.2; }
}

.top-gradient-nightttt::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(white 1px, transparent 2px),
    radial-gradient(white 1px, transparent 2px),
    radial-gradient(white 1px, transparent 2px);
  background-size: 50px 10px, 30px 10px, 70px 10px;
  background-position: 10px 0, 25px 5px, 60px 3px;
  animation: twinkle 3s infinite ease-in-out;
  pointer-events: none;
  z-index: 1;
}




html {	
 }

 body {
	font-siez: 16px;
   font-family: "Helvetica Neue",
     Arial,
     "Hiragino Kaku Gothic ProN",
     "Hiragino Sans",
     Meiryo,
     sans-serif;
	 position: relative;

 }
 h1, h2, h3, h4, h5 {
 margin-bottom: 1em;
 }
 p {
 margin-bottom: 3rem;
 }


 header, footer, #footer-copyright {
 }
 
 #header-cm, footer, #footer-copyright {
 background-color: #000;
 background-image: url("/images/noise70.png");
 background-blend-mode: multiply;
 background-size: 170px;
 }

 header {
	 width: 100%;
	display: flex;
	flex-direction: rows;
	justify-content: center;
	background-color: none;
	min-height: 60px;
	max-height: 60px;
	background-size: 100%;
	background-position: bottom;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35));
	background-blend-mode:lighten;
	z-index: 100;
}

#common-header {
	position: fixed;
	bottom: 0;

}
 #mainnav {
	position: fixed;
	bottom: 60px;
	display: none;
	background-size: 100%;;
	background-position: 0 60px;
	background-color: rgba(0, 0, 0, 0.3);
	width: 100vw;
	height: 30vh;
	flex-direction: column;
	align-items:flex-end;
	justify-content:flex-end;
	padding: 3.5em 20px 20px 20px;
	font-size: 1.1rem;
	color: #fff;
 }
 #mainnav a {
	text-decoration: none;
	margin-bottom: .5em;
	line-height: 1;
 }
 
 #mainnav.show {
	display: flex;
}


nav {
	background-color: #fff;
}

#toggle-nav {
	font-size: 3rem;
	position: absolute;
	right: 10px;
	bottom: 0;
	line-height: 1;
	display: block;
	text-decoration: none;
	color: #fff;
}

#logo {
object-fit: contain;
}

#common-logo {
	object-fit: contain;
}

footer {
	color: #fff;
	background: rgba(65, 104, 60, 0.3), url("/images/noise70.png"), linear-gradient(150deg, rgba(193, 193, 193, 0) 10%, rgba(103, 103, 103, 0.65) 40%, rgba(161, 161, 161, 0.27) 68%, rgba(30, 30, 30, 0.34) 90%);
	background-blend-mode: multiply;
	padding: var(--pd-LR);
	padding-top: 0;
	padding-bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

#footer-main {
	margin-top: -2rem;
	display: flex;
	flex-direction: column;
	align-items:center;
	justify-content: center;
	z-index: 100;
}
#footer-main div > h2 + p {
	font-size: .8rem;
	margin-bottom: 1rem;
}

#footer-main ul {
	margin:0;
	padding: 0;
	list-style-type: none;
	text-decoration: none;
}
#footer-main div {
	display: inline-block;
	margin-bottom: 4rem;
	max-width: 20rem;
	min-width: 100%;
}
#footer-main h2 {
	position: relative;
	text-align: center;
	margin-bottom: .2rem;
}
#footer-main h2:before {
	position: absolute;
	content: " ";
	width: 1em;
	top: .5em;
	left: -2rem;
	border-bottom: 1px solid #000;
	
}

#footer-main h2:after {
	position: absolute;
	content: " ";
	width: 1em;
	top: .5em;
	right: -2rem;
	border-bottom: 1px solid #000;
	
}

 #footer-main a{
	list-style-type: none;
	text-decoration: none;
}

#common-footer {
	height: 100vh;
}

main {
	padding: 0 var(--pd-LR) 0 var(--pd-LR);
	scroll-snap-type: y mandatory;
}
section {
}

.common-section-wide {
	margin-left: calc(-50vw + 50%);
	margin-right: 0;
	width: 100vw;
	height: 500px;
}

.common-section-wide img {
	object-fit: cover;
	width: 100vw;
	height: 500px;
	
}
/**
 *
 * common main
*/
#common-main {
	margin-top: 0;
	padding-top: 3rem;
}

/**
 *
 * top page
 *
 */
#maincopy {
position: absolute;
color: #ffff0f;
padding: .5em .05em .5em .5em;
top: -60px;
left: -10px;
font-feature-settings: "palt";
font-family: "Shippori Antique B1", sans-serif;
  font-weight: 700;
  font-style: bold;
letter-spacing: -0.15em;
z-index: 10;
transform: rotate(-5deg);
background-color: #000;
background-image: url(/images/grangy.png);
mix-blend-mode: lighten;
width: 105%;
background-size: cover;

font-size: clamp(16px, 96vw, 92px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#maincopy.light {
color: #fff;
mix-blend-mode: multiply;
background-image: url(/images/grangy.png);
}

#maincopy p {
	margin: 0;
line-height: 1em;
}
#maincopy p + p {
	margin-top: .5rem;
	font-size: 1.4rem;
letter-spacing: 0;
}


.swiper-slide-active .coverimg_wrap,
.swiper-duplicate-active .coverimg_wrap,
.swiper-duplicate-prev .coverimg_wrap,
.coverimg_wrap
 {
}


.cover:first-child {
	display: block;
}

@keyframes zoomUp {
0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}



/**
 *
 * nextentries ichiran-page
 *
 */
#nextentries {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-height: unset;
	align-items: flex-start;
	padding: 0 0 0 0;
}
#nextentries > a {
	position: relative;
	font-weight: 400;
	display: flex;
	text-decoration: none;
	flex-direction: row-reverse;
	text-align: left;
	justify-content: left;
	align-items: flex-end;
	gap: .3rem;
	margin-bottom: .8rem;
}
#nextentries > a::after {
	content: " ";
	border-bottom: 1px solid #f3f3f3;
	width: calc(100% - (58px + .3rem));
	position: absolute;
	bottom: 0;
	right: 0;
}

#nextentries > a > h2 {
	font-weight: 400;
	font-size: 1rem;
	text-wrap: unset;
}

#nextentries img {
width: 58px;
object-fit: contain;	
}



/**
 *
 * encounter-list ichiran-page
 *
 */
#encounter-list {
	margin-inline: calc(-1 * var(--pd-LR));
	width: calc(100% + (var(--pd-LR) * 2));
}

.encounter-card {
	display: flex;
	flex-direction: column;
	margin-bottom: 2rem;
	gap: 1rem;
	background-color: #F0FFF0;
	padding: var(--pd-LR);
	width: 100%;
	margin-left: 0;
}
.encounter-card::after {
content: " ";
  width: 35px;
  height: 35px;
  border: 9px solid #8FBC8F;
  border-radius: 50%;
  box-sizing: border-box;
  background: white;
position: absolute;
top: -2px;
left: -1.1rem;
font-size: 3rem;
z-index: -1;
color: #c3ccc3;

}

.-encounter-card-thumb, .-encounter-card-thumb picture {
	width: 100%;
	max-width: 100%;
}
.-encounter-card-thumb {
	object-fit: cover;
}
.-encounter-card-a {
	display: block;
	text-decoration: none;
	color: inherit;
	margin-bottom: 1rem;
}	
.-encounter-card-desc p {
	margin-bottom: 0;
	font-size: 1rem;
	line-height: 1.4;
}
.-encounter-card-title {
	width: 100%;
	text-decoration: none;
	font-weight: 400;
	margin-bottom: 1.3rem;
	font-size: 1.3rem;
	word-break: break-all;
	text-wrap: auto;
	font-feature-settings: "palt";
}
p.encounter-card-tags {
	margin-top: .5rem;
	text-align: right;
 }
 .encounter-card-tag {
	font-size: .7rem;
	display: inline-block;
	text-decoration: none;
	color: #fff;
	background-color: rgb(182, 229, 236);
	margin-left: 1rem;
	padding: .1rem .8rem .1rem .8rem;
	border-radius: 5px;
 }
 
/**
 *
 * pc
 *
 */

@media (min-width: 1024px) {
	header {
		flex-direction: row;
		min-height: 120px;
		max-height: 120px;
		background-color: inherit;
		align-items:center;
		justify-content: space-between;
		background: none;
	}
	#common-header {
		height: 120px;
		position: relative;
		bottom: inherit;
	}
	#header-cm, footer, #footer-copyright {
		height: 15px;
	}
	#toggle-nav {
		display: none;
	}

	footer {
		min-height: 650px;
	  }
  
#footer-copyright {
	min-height: 15px;
}
#toppage, #subpage, footer {
	position: relative;
	padding: 0 1.5rem 1.5rem 1.5rem;
}

#mainnav {
	display: flex;
	justify-content: flex-end;
	position: relative;
	align-items: center;
	flex-direction: row;
	height: inherit;
	padding: 0;
	bottom: 0;
	color: #000;
	background-color: inherit;
	gap: 2rem;
	margin-top: 18px;
}


#nav-main a {
text-decoration: none;
margin-left: 1.3em;
font-size: 1.1em;
text-align: right;
margin-top: 1.3em;
margin-bottom: 1.3em;

}

#logo,  #common-logo {
	width: 80px;
	position: relative;
	left: 0;
	margin-top:15px;
	z-index: 30000;
	flex-srhink: 0;
}
#logo_sub {
	width: 80px;
}
header, main, .main-toppage-area, #header-main, #header-sub, #footer-main {
width: 980px;
margin: 0 auto;
}
.main-toppage-area {
padding-top: 4em;
padding-bottom: 4em;
font-size: 1.3em;
}
.main-toppage-area h2 {
font-size: 2.5rem;
text-align: center;
}

section {
margin-bottom: 5em;
min-height: 500px;
}
section.toppage {
	width: inherit;
	height: inherit;
}

section img, article img {
	display: block;
	 width: auto;
	 height: auto;
	 max-width: 100%;
	 max-height: 1000px;
	 object-fit: contain;
}

#wrap-covers {
background-color: #000;
position: relative;
overflow: hidden;
}

#covers, #subcovers {
width: 100%;
height: 800px;
padding-top: 60px;
padding-bottom: 60px;
overflow: hidden;
}
.cover {
max-height: 700px;
overflow: hidden;
}
#header-sub,　#subcovers .cover{
	height: 350px;
	max-height: 350px;
}

#covers img.coverimg {
width: 100%;
height: 700px;
object-fit: cover;
object-position: bottom;
}


#maincopy {
width: inherit;
position: absolute;
padding: .5em .1em .5em .7em;
top: inherit;
bottom: 13%;
right: -1.2em;
font-size: 3.8em;
z-index: 10;
transform: rotate(-5deg);
}

#maincopy.light {
color: #fff;
mix-blend-mode: multiply;
background-image: url(/images/grangy.png);
}

#maincopy p {
line-height: 1.15em;
}

#wrap-subcovers {
	height : 380px;
}
footer {
	padding: 0;

}
#footer-main {
	gap: 40px;
	flex-direction: row;
	padding-top: 120px;
	justify-content: space-between;
	text-align: left;
	align-items: unset;
}
#footer-main > div{
	flex: 1;
	width: unset;
	min-width: unset;
	max-width: unset;
	text-align: left;
}
#footer-main > div h2 {
	margin-bottom: 2rem;
  text-align: center;
  position: relative;
}
#footer-main > div h2:before {
	position: absolute;
	content: " ";
	width: 1.3rem;
	top: .8rem;
	left: 0;
	border-bottom: 1px solid #fff;
}

#footer-main > div h2:after {
	position: absolute;
	content: " ";
	width: 1.3rem;
	top: .8rem;
	right: 0;
	border-bottom: 1px solid #fff;
}

#footer-main > div:last-child {
  padding-right: 2em;
}


/**
 *
 * nextentries ichiran-page
 *
 */
#nextentries {
	display: flex;
flex-direction:column;
	flex-wrap: wrap;
	gap: 1rem;
	min-height: unset;
	align-items: flex-start;
}
#nextentries > a {
	position: relative;
	width: 66%;
	font-weight: 400;
	display: flex;
	text-decoration: none;
	flex-direction: row-reverse;
	text-align: left;
	justify-content: left;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 2rem;
}

#nextentries > a::after {
	content: " ";
	border-bottom: 1px solid #f3f3f3;
	width: calc(100% - (100px + 1rem));
	position: absolute;
	bottom: 0;
	right: 0;
}

#nextentries > a > h2 {
	font-weight: 400;
	font-size: 1.4rem;
	text-wrap: unset;
}

#nextentries img {
width: 100px;
object-fit: contain;	
}



/**
 * ichiran
 */

.encounter-card {
	display: flex;
	flex-direction: row;
	margin-bottom: 2rem;
	gap: 1rem;
	background-color: #F0FFF0;
	padding: 2rem;
}

.-encounter-card-thumb, .-encounter-card-thumb picture {
	width: 200px;
	max-width: 200px;
}s
.-encounter-card-thumb {
	object-fit: cover;
}
.-encounter-card-a {
	display: block;
	text-decoration: none;
	color: inherit;
}	
.-encounter-card-desc p {
	margin-bottom: 0;
	font-size: 1.2rem;
	line-height: 1.4;
}
.-encounter-card-title {
	text-decoration: none;
	font-weight: 400;
	margin-bottom: 1rem;
	font-size: 2.1rem;
	
}
 

.swiper-slide-active .coverimg_wrap,
.swiper-duplicate-active .coverimg_wrap,
.swiper-duplicate-prev .coverimg_wrap,
.coverimg_wrap
 {
animation: zoomUp 30s linear 0s normal both infinite;
}


.sp {
	display: none;
}

}


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

.bold {
	font-weight: 700;
}

.btn, .link, .linkbtn {
display: inline-block;
width: 100%;
padding: .6rem 1.2rem .6rem 1.2rem;
background-color: #87CEFA;
color: #fff;
text-decoration: none;
margin-bottom: 2rem;
}


/**
 *
 * .encounter-card
 *
 */
 #encounter-list {
 position: relative;
 padding-top: 3rem;
 height: 100%;
 margin-bottom:2rem;
 }

 .encounter-card {
 position: relative;
 width: calc(100% - 10px);
 background-color: unset;
 flex-direction: column;
 margin-left: 10px;
 margin-bottom: 8rem;
 z-index: 10;
 }

 .encounter-card::before {
 content: " ";
 position: absolute;
 border-bottom: 2px solid #dfe0df;
 width: 100%;
 height: 2rem;
 top: -1rem;
 left: 0;
 z-index: -2;
 }

 .-encounter-card-title::before, .-encounter-card-title::after {
 display: none;
 }

 .-encounter-card-title, .-encounter-card-title + p {
 padding-left: .5rem;
 }

 .-encounter-card-title {
 font-size: 1.2rem;
 position: relative;
 padding-bottom: 5px;
 margin-bottom: .1rem;
 margin-top: 1.3rem;
 font-weight: 700;
 }

 .-encounter-card-title::before {
 content: " ";
   width: 25px;
   height: 25px;
   border: 6px solid #8FBC8F;
   border-radius: 50%;
   box-sizing: border-box;
   background: white;
 position: absolute;
 bottom: -10px;
 left: -24px;
 font-size: 3rem;
 z-index: -1;
 color: #c3ccc3;
 }

 .encounter-card-tag {
 margin-left: .7rem;
 }

 .encounter-card-tags {
 position: absolute;
 top: -1.2rem;
 left: .8rem;
 } 
@media (min-width: 1024px) {
#encounter-list {
margin-bottom: 0;
padding-top: 3rem;
}
.encounter-card {
flex-direction: row;
padding-top: 2rem;
margin-bottom: 5.5rem;
}

.encounter-card::after {
  width: 35px;
  height: 35px;
top: -2px;
left: -1.1rem;
}


.-encounter-card-title {
font-size: 1.8rem;
}


.encounter-card-tags {
position: absolute;
top: -1.2rem;
left: .8rem;
}

}