@import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@300&display=swap');
@font-face {
			font-family: 'IPA 明朝';
			font-display: swap;
			/* テキストが読み込まれてからフォントを適用する */
			src: url("https://cdn.leafscape.be/IPAfont/ipam_web.woff2") format("woff2");
			}

/*-------------------------------------------------
このフォントはIPAフォントライセンスv1.0の下で提供されています。

http://ipafont.ipa.go.jp/ipa_font_license_v1.html

-------------------------------------------------*/
/* all */
*{
	margin:0;
	padding:0; 
	border:0; 
	outline:0; 
	text-decoration:none; 
	list-style:none; 
	box-sizing:border-box; 
	font-weight:normal; 
	overflow-wrap:break-word; 
	word-wrap:break-word; 
	-webkit-appearance:none;
	}

*::before, *::after{
	position:absolute; 
	content:'';}

::selection{
	background:rgba(255,255,255,0.5);}

html{
	-moz-text-size-adjust:100%; 
	-webkit-text-size-adjust:100%; 
	-ms-text-size-adust:100%;}

/*ダークモード対応*/
:root {
  --main-text: rgba(48,48,48,0.8);
  --main-bg: #fff;
  /*mark*/
  --mark-color: rgba(48,48,48,0.8);
  --mark-line: linear-gradient(transparent 50%, #e4c4d4 0%);
  /*span*/
  --span-color: #5c74ac;
  --span-border: solid 1px #5c74ac;
  /*strong*/
  --strong-color: #98c7e6;
  /*nav*/
  --nav-bg: rgba(255,255,255,0.65);
  --nav-pic: url('index/flower02.png') center/cover;
}
@media (prefers-color-scheme: dark) {
  :root {
    --main-text: #f0f6f2;
    --main-bg: #294364;
    /*mark*/
    --mark-color: #fff;
    --mark-line: linear-gradient(transparent 50%, #994e67 0%);
    /*span*/
	  --span-color: #e4c4d4;
	  --span-border: solid 1px #e4c4d4;
	  /*strong*/
	  --strong-color: #a8cce7;
    /*nav*/
    --nav-bg: rgba(0,0,0,0.5);
    --nav-pic: url('index/flower02_b.png') center/cover;
  }
}

/* text, font */
/* headline */
h2{
	margin:auto; 
	text-align:justify; 
	width:80%;}
/* paragraph */
section p{
	margin:1em 0;}
/* font */
*{
	font:11px/2 'Montserrat Alternates', 'IPA 明朝', 游明朝, 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', serif; 
	letter-spacing:0.175em;}
h1, h1 a, h2, nav a{
	font:11px/2 'Julius Sans One', sans-serif;}
/* size */
h1 a{
	font-size:2.5em;}
h2{
	font-size:1.5em;}
nav ul li a{
	font-size:1.5em;}

/* color */
*{
	color:var(--main-text);
	transition: .5s;}
span{
	color: var(--span-color);}
mark{
	color: var(--mark-color);}
a:hover{
	color:transparent;}
/* etc */
span{
	padding:0.3em; 
	border: var(--span-border);}
mark{
	background: var(--mark-line);}
strong{
	color: var(--strong-color);}
small{
	font-size:0.9em;}

/* link */
a:hover{
	transition:0.3s; 
	cursor:pointer;
	background:url('index/chu1.jpg') center/cover; 
	-webkit-background-clip:text; 
	background-clip:text;}

/* body */
body{
	position:relative; 
	width:100%;
	background-color: var(--main-bg);
	transition: .5s;}
body::before{
	z-index:-1000; 
	left:50%; 
	transform:translateX(-50%); 
	margin:5vh auto; 
	width:90%; 
	height:90vh; 
	background:url('index/chu1.jpg') center/cover;}

/* header */
header{
	position:fixed; 
	z-index:1000; 
	top:0; left:0; 
	text-align:center; 
	width:100%;}

/* sectioning, contents group */
article{
	padding:3em 0; 
	text-align:center;
	 width:100%;}
section{
	margin:2.5em auto 2.5em auto; 
	text-align:justify; 
	width:80%;}
/* text-align */
.center{
	margin:auto; text-align:center;}
.right{
	margin-left:auto; text-align:right;}

/* pagetop */
#pagetop{
	position:relative; height:100vh;}
/* navigation */
nav{
	position:absolute; 
	top:50%; left:50%; 
	transform:translate(-50%, -50%); 
	padding:2.5em; 
	text-align:center; 
	width:80%; 
	max-width:230px; 
	background: var(--nav-bg);
	transition: .5s;}
nav ul{
	position:relative; 
	margin-bottom:7.5em;}
nav ul::after{
	bottom:-5em; left:50%; 
	transform:translateX(-50%); 
	width:44px; height:48px; 
	background: var(--nav-pic); 
	opacity:0.8;}
/* scroll box */
.scroll {
    position: relative;
    overflow-y: scroll;
    height: 30rem;
    width: 100%;
    margin: 0 auto 0rem;
    padding: 0;
    font-size: 11px;
    border-radius: 0px;
    border: 1px solid transparent;
    background: transparent;
    color: ;
	}

/* media queries */
/* horizontal */
@media screen and (orientation:landscape) and (min-width:1000px){

/* body */
body::before{
	position:fixed; 
	right:0;
	transform:none; 
	width:45vw;}

/* size */
*{font-size:12.5px;}

/* color */
h1 a{
	color:rgba(255,255,255,1);}

/* sectioning, contents group */
article{
	width:50vw; 
	min-height:100vh;}

/* header */
header{
	top:50%; left:75%; 
	transform:translate(-50%, -50%);}


}