@charset "utf-8";
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden="until-found"])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light;tab-size:2;scrollbar-gutter:stable;interpolate-size:allow-keywords;line-height:1.5}:where(html:has(dialog:modal[open])){overflow:clip}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:inherit;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(button){all:unset}:where(input,button,textarea,select){font:inherit;color:inherit;letter-spacing:inherit;word-spacing:inherit;font-feature-settings:inherit;font-variation-settings:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role="button"],[role="option"]){cursor:pointer}:where(:disabled,label:has(>:disabled,+:disabled)){cursor:not-allowed}:where(a){color:inherit;text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg,video){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem);text-wrap:balance}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(dialog,[popover]){border:none;background:none;color:inherit;inset:unset;max-width:unset;max-height:unset;overflow:unset}:where(dialog:not([open],[popover]),[popover]:not(:popover-open)){display:none!important}:where(:focus-visible){outline:3px solid CanvasText;box-shadow:0 0 0 5px Canvas;outline-offset:1px}:where(:focus-visible,:target){scroll-margin-block:8vh}:where(.visually-hidden:not(:focus-within,:active)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important;user-select:none!important}


/*************************************************************************************************************/

body{	color: #000;}

#wrapper{
	font-size: 1.5vw;
	font-family: "WDXL Lubrifont JP N", sans-serif;
	font-weight: 400;
	font-style: normal;
	height: 100vh;
	padding: 5vh 0;
	display: flex;
	justify-content: space-around;	
	align-items: center;
	background-image:url("../img/back.png");
}

a{
	text-decoration: none;
	transition-duration: 0.4s;
}
a:hover {  opacity: 0.2; }

.sp{display: none;}

@media screen and (max-width: 768px) {
	.pc{display: none;}
	.sp{display: block;}	
	
	a{	transition-duration: 1;}
	a:hover {  opacity:inherit; }	
}
	
/*************************************************************************************************************/

#left,#right{
	position: relative;
	width: 5%;
	height: 90vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
	
/*************************************************************************************************************/

#left h1{	
	font-size: 2vw;
	position: absolute;
	width: 5em;
    transform:rotate(-90deg);
}


@media screen and (max-width: 768px) {
	#left h1 {	  
		text-indent: -9999px;
		bottom: -2vh;
		left: 0;
		transform:none;	
	}
	#left h1 a {	
		display: block;
		background-color: #000;
		width: 2em;
		height: 2em;
	}
}

/*************************************************************************************************************/

#right .menu{	width: 5%;}

#right .menu ul{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
    transform:rotate(90deg);
}

#right .menu li{	margin: 0 1em 0  0;}

#right  .sns {
	position: absolute;
	bottom: 0;
}
#right  .sns p {
	padding: 0.3em 0 0  0;
	width: 60%;
}

/*************************************************************************************************************/

#main{
	width: 90%;
	height: 90vh;
	border: 3px solid #000;
	background-color: #fff;
	margin: 0 auto;	
}
#main .title{
  display: flex;
  overflow: hidden;
  white-space: nowrap;
	border-bottom: 1px solid #000;
}
#main .title ul{
	display: flex;
	width: 100%;
	padding-right: 0.5em;
	animation: marquee 20s linear infinite;
}
#main .loop {	width: 100%; }

@keyframes marquee {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-70%); }
}



@media screen and (max-width: 768px) {

	#main{
		height: 86vh;
		margin: 2vh auto 0 auto;	
	}
}



/*************************************************************************************************************/

#main .page{
	width: 100%;
	display: flex;
	border-bottom: 1px solid #000;
	justify-content:space-between;
}
#main .page p{
	font-size: 1.2vw;
	padding:  0 0.2em;
}
#main .back,#main .next{
	margin:  -1px;    
	border: 1px solid #000;
}

@media screen and (max-width: 768px) {

	#wrapper{
		font-size: 3vw;
		padding: 0;
		margin: 0 auto;
		display: block;
	}
	#left,#right{
		width: 90%;
		height: 4vh;
		display: block;
		margin: 0 auto;
	}
	#right .menu{	width: 100%;}

	#right .menu ul{
		justify-content: flex-start;
		font-size: 3vw;
		padding: 0.5em 0 0 0 ;
		transform:none;
		}
	#right  .sns {
		display: flex;
		justify-content: flex-end;
		top: 0;
		right:  0;
	}
	#right  .sns p {
		padding: 0 0 0 0.3em;
		width: 16%;
	}
	#main .page p{		font-size: 3vw;	}

}

/*************************************************************************************************************/

#contents{
	padding: 1em 1em 0 1em ;
	width: 100%;
	height: calc(90vh - 5em);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #000 #fff; 
}
#contents .index{
	width: 100%;
	height: 100%;
	background-image: url("../img/index.jpg");
	background-repeat: no-repeat;
	background-position: center;
}


@media screen and (max-width: 768px) {

	#contents{		height: calc(86vh - 5em);	}
	
}