@charset "UTF-8";

/*フォント読み込み*/
@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
@font-face{
	font-family:はれのそら明朝;
	src:url('https://cdn.leafscape.be/Harenosora/harenosora_web.woff2') format("woff2");}
	/*-------------------------------------------------
	このフォントはIPAフォントライセンスv1.0の下で提供されています。
	http://ipafont.ipa.go.jp/ipa_font_license_v1.html
	オリジナルのフォントは以下から取得できます。
	https://fontopo.com/?p=377
	http://ipafont.ipa.go.jp/
	-------------------------------------------------*/
@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(231,231,235,0.5);}

/*ダークモード対応*/
:root {
  --main-text: rgba(71, 74, 77, 0.9);
  --main-bg: #fff;
  --a-color: rgba(71,74,77,1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --main-text: #e8e8e8;
    --main-bg: #00334e;
    --a-color: #E9B5D2;
  }
}

/* text, font */
/* hedline, paragraph */
/* headline */
h2 {
	margin:2.5em auto;
	padding:1.35em 1.25em 1em 1em;
	position: relative;
	line-height: 1.1;
	font-weight: normal;
	color: rgba(0,0,0,0);
	background-image: url('titleback.jpg'); 
	-webkit-background-clip: text;}
/* paragraph */
p{
	margin:1em 0;}
/* font */
*{
	font:11px/2.25 'IPA 明朝','Lora', serif; 
	letter-spacing:0.2em;}
h2{
	font-family: 'はれのそら明朝', serif; 
	letter-spacing:0.5em;}
/* size */
h2{
	font-size:1.35em;}
aside p{
	font-size:0.9em;}
/* color */
*{
	color: var(--main-text);
	transition: .5s;}
/* etc */
span{
	display:inline-block; 
	border-bottom:solid 1px rgba(71,74,77,0.5);}
mark{
	background:linear-gradient(transparent 60%, rgba(255,255,255,0.8) 0%);}
strong{
	font-weight:600; 
	color:rgba(238,130,124,0.8);}
small{
	font-size:0.85em;}
/* link */
a{
	color: var(--a-color);}
a:hover{
	color:rgba(255,255,255,1); 
	transition:0.3s; 
	cursor:pointer;}
body > footer a{
	color:rgba(255,255,255,1);}
body > footer a:hover{
	color:rgba(32,55,68,0.5);}

/* body */
body{
	background-color:var(--main-bg);
	text-align:center; 
	width:100%;
	transition: .5s;}

/* sectioning and groping etc. */
article{margin:5em auto;}
section{margin:auto; text-align:justify; width:80%; max-width:580px;}
nav{margin:5em auto 2.5em auto; width:90%;}
article > aside{position:relative; margin:auto; padding:1em 1.5em; width:80%; max-width:320px; border-right:solid 1px rgba(255,255,255,0.8); border-left:solid 1px rgba(255,255,255,0.8);}
section > aside{margin:3.5em auto 5em auto; text-align:right;}
/* text-align */
.center{margin:auto; text-align:center;}
.right{margin-left:auto; text-align:right;}

/* hr */
hr{
border-bottom: 1px dashed #c9c9c4;
}

/* footer */
body > footer{
	display:inline-block; 
	margin:5em auto; 
	padding:0 1.5em; 
	border:solid 1px rgba(255,255,255,0.8);}

/* media queries */
/* tablet, PC */
/*700px以上*/
@media screen and (min-width:700px){

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

}
/*1000px以上*/
@media screen and (orientation:landscape) and (min-width:1000px){

	/* body */
	body::before{max-width:90%; background-position:center;}

	/* sectioning, contents group etc. */
	section{max-width:720px;}
	article > aside{max-width:540px;}

}