@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*,*::before,*::after{box-sizing:border-box}*{margin:0}body{line-height:1.5;-webkit-font-smoothing:antialiased}img{max-width:100%}picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}

/* base design --------------------------------------------*/

:root {
	--main-font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Segoe UI", "Meiryo", sans-serif;
/* ↓上部に表示されるメニュー */
.menu{ background-color: #fff;
 box-siziing: box-border;
 max-width: 100%;
 padding: 2em 2em;
 margin: 0px auto;
 border-radius: 0 0 30px 30px;
}
ul {
  padding: 0;
  list-style: none;
}
/* ↓上部に表示されるメニュー */
.menu{
background-color: #fff;
padding: 0.7rem;
margin: 1rem 0 0;
border-radius: 40px;
}
nav.nav ul.item{
display: flex;
flex-wrap: wrap;
}
nav.nav ul.item li.list{
padding-left: 1.5rem;
margin-left: 1.5rem;
position: relative;
}
nav.nav ul.item li.list a{
font-size: 1rem;
}
/* ページ上部へ戻る */
html {
    scroll-behavior: smooth;
}
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #008b8b;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #008b8b;
    border-right: 3px solid #008b8b;
    transform: translateY(20%) rotate(-45deg);
}
/* ↑ページ上部ここまで */


body {
	background:var(--main-bg-design);
	color: var(--main-text-color);
	font-family: var(--main-font-family);
	font-feature-settings: "palt" 1;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1.8;
	margin: 0 5vw;
	word-break: break-all;
}

h1{
	font-size: 1.5em;
             color: #5f9ea0;
}
h2{
	font-size: 1.3em;
             color: #5f9ea0;
	line-height: 2.5;
}

.ookm{
	font-size: 1.2em;
}

hr{
	margin: var(--margin-wide) 0;
	border-top: 1px dashed var(--main-text-color);
	border-bottom: none;
	height: 0px;
	clear: both;
}
section hr,
details hr{
	margin: 1.5em 0;
}
a{
  padding: 2px;
  font-weight: bold;
  position: relative;
  display: inline-block;
  transition: .3s;
  color: #4169e1;
  text-decoration: none;/*元々のアンダーラインを非表示にしておく*/
}

a:hover {
color: #7ebeab;
  background-color: #cce6ff;
}
em{
	font-style: normal;
	font-weight: bold;
	margin: 0 0.2em;
	padding: 0 0.2em;
	background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, var(--accent2) 50%);
}

/* ↓枠内 */
main{  max-width: 1000px;
  padding-right: 20px;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 16px;
  font-size: 0.9em;
    margin: 0px auto;
}

/* ↓ボックス */
.box{
  background: #FFF;
  border: 3px solid #66cdaa;
  padding: 1em;
  width: 80%;
  border-radius: 10px;
}

h4 {
  color: #4169e1;
  border-bottom: 2px solid #66cdaa;
  font-size: 1.2em;
  margin:0px;
}

/* header --------------------------------------------*/




/* main --------------------------------------------*/




/* footer -------------------------------------------- */

footer{
	margin: 0 auto;
	max-width: 900px;
	padding: 100px 0;
	text-align: center;
}


/* named parts --------------------------------------------*/


img.emoji {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    margin: 0 3px 3px;
}


/* responsive --------------------------------------------*/

@media (max-width: 900px) {
	.grid3{
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 800px) {
	.grid4{
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 600px) {
	body{
		font-size: 0.95rem;
		margin: 0 0;
	}
	header.prof .vi{
		aspect-ratio: 3 / 1;
	}
	.box{
		  width: 90%;
	}
	main.prof{
		margin: 0 5vw;
	}
	br.mini{
		display: inline;
	}
	.grid{
		grid-template-columns: 1fr;
		gap:var(--margin-wide);
	}
	.grid > *:first-child,
	.grid > *:last-child{
		grid-area: unset;
	}
	.grid4{
		grid-template-columns: 1fr 1fr;
	}
	.linkcards{
		gap: var(--margin-nallow);
	}
	main.prof div.linklist.panel a{
		text-align: left;
	}
	main.prof div.linklist.panel small{
		display: inline-block;
		font-size: 0.85rem;
		vertical-align: middle;
		padding-bottom: 0;
		text-align: left;
	}
}