/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, 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;
}

p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

#root, #__next {
  isolation: isolate;
}@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

.dotgothic16-regular {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
}



/*body---------------------------------------------------------*/
body{
background: #bfe5e9;
}




/*header-----------------------------------------------------*/
header{
outline: #b5c6c8 2px solid;
background-color: #bfe5e9;
background-image: linear-gradient(45deg, #d5eff380 25%, transparent 25%, transparent 75%, #d5eff380 75%), linear-gradient(45deg, #d5eff380 25%, transparent 25%, transparent 75%, #d5eff380 75%);
background-position: 10px 10px, 40px 40px;
background-size: 60px 60px;
}

header a{
font-family:"DotGothic16";
text-decoration: none;
color: white;
border:none;
}




/*links---------------------------------------------------*/
a{
font-family:"DotGothic16";
color:#719b9f;
text-decoration: none;
border-bottom:1px dashed #94bdc1;
}

a:hover{
font-family:"DotGothic16";
color: #4d8c92;
background: #fdeff2;
}




/*class----------------------------------------------------*/
.pagetop{
color:white;
text-align:right;
text-decoration:underline;
border:none;
}

.right{
text-align:right;
width:95%;
margin:-8px 0 0 0;
}

.footer{
text-align:right;
width:95%;
padding:0 0 5px 0;
}





/*ul basic---------------------------------------------------------*/
ul{margin:5px;padding:5px;}

li{margin:0 5px;padding:0 5px;list-style-type: none!important;}



/*ul header---------------------------------------------------------*/
header ul{
text-align: center;
}

header li{
display: inline-block;
}

.contents{
display: inline-block;
margin-right: 10px;
}

ul.contents{
margin:0;
padding:0;
}



/*ul line----------------------------------------------------------*/
ul.line{
  list-style: none;
}

ul li.line{
display: inline-block;
  margin-left: 0.5em;
}







b{
font-family:"DotGothic16";
margin:10px;
}



p{
font-family:"DotGothic16";
color:black;
margin:20px 10px;
padding:0 10px;
}








h1{
font-family:"DotGothic16";
 font-size: 200%;
	padding-top: 5px; /*文字上部に余白*/
	padding-bottom: 5px; /*文字下部に余白*/
	padding-left: 5px; /*文字左側に余白*/
	padding-right: 5px; /*文字右側に余白*/
 text-align: center;
}







h2{
font-family:"DotGothic16";
color:white;
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 10px auto;
padding: 5px 10px;
}









h3 {
font-family:"DotGothic16";
  position: relative;
  display: inline-block;
  padding: 0 65px;
  text-align: center;
}

h3:before,
h3:after {
  position: absolute;
  top: calc(50% - 3px);
  width: 50px;
  height: 6px;
  content: '';
  border-top: solid 2px #000;
  border-bottom: solid 2px #000;
}

h3:before {
  left: 0;
}

h3:after {
  right: 0;
}





h4 {
position: relative;
display: flex;
align-items: center;
justify-content: center;
  padding: 1rem 2rem;
  border-top: 6px double #000;
  border-bottom: 6px double #000;
  font-size:125%;
}






h5{
font-family:"DotGothic16";
border-bottom:solid 3px #b5c6c8;
background:#d4e1e2;
padding:5px 7px;
}





.bar{
font-family:"DotGothic16";
border-bottom:solid 2px #b5c6c8;
background:#d4e1e2;
padding:4px;
}

.button1{
font-family:"DotGothic16";
color:#99a9ab;
font-size:0.6em;
border:solid 1px #99a9ab;
background:#d4e1e2;
padding:3px 6px;
 float:right;
 margin-left:3px;
}

.button2{
font-family:"DotGothic16";
color:#99a9ab;
font-size:0.6em;
border:solid 1px #99a9ab;
background:#d4e1e2;
padding:3px 6px;
 float:right;
  margin-left:3px;
}

.button3{
font-family:"DotGothic16";
color:#99a9ab;
font-size:0.6em;
border:solid 1px #99a9ab;
background:#d4e1e2;
padding:3px 8px;
 float:right;
  margin-left:3px;
}

.dot{
color:#99a9ab;
margin-left:3px;
margin-right:3px;
}


.deco{
border:1px solid yellow;
position:relative;
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
width:400px;
height: 3px;
border:0;
background: linear-gradient(to right, #563b00, #fdcf00, #563b00);
}





.center{
position:relative;
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
}



hr{border-top: 1px dashed #8c8b8b;width:75px;}










article{
background-color: #f2f7f8;
margin: 20px auto;
width: 90%;
border: #b5c6c8 2px solid;

}





dl{
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	flex-wrap: wrap;
	align-items: stretch;	
	width: 100%;
	border: 1px solid #ccc;
	border-bottom: none;
	margin: 0 0 20px 0;
}
dl dt{
	background: #f5f5f5;
	padding: 10px;
	width: 100px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
dl dd{
	background: #fff;
	padding: 5px;
	width: calc(100% - 100px);
	border-bottom: 1px solid #ccc;
}

.profile_dt{
background: #f5f5f5;
	padding: 10px;
	width: 200px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.profile_dd{
background: #fff;
	padding: 5px;
	width: calc(100% - 200px);
	border-bottom: 1px solid #ccc;
}






article ul{
text-align: left;
margin: 0 10px;
padding:10px;
}






details{
margin:0 10px;
}






table {
/*margin:10px auto;*/
vertical-align:middle;
width:40%;
background-color:#e7f9fb;
border:#b5c6c8 1px solid;
/*    border-collapse:  collapse; /* セルの線を重ねる */
}

tr:nth-child(odd) {
background-color:  #e7f9fb;    /* 背景色指定 */
}

th,td {
font-family:"DotGothic16";
padding: 5px 10px;          /* 余白指定 */
}





.centerprof{
width:100%;
margin-left:auto;
margin-right:auto;
}


.standL{
width:45%;
vertical-align: middle;
display: inline-block;margin:0 0 0 5%;
}

.standR{
width:40%;
vertical-align: middle;
display: inline-block;
}


@media only screen and (max-width: 767px){
.standL{width:100%;   vertical-align: middle;
    display: inline-block;
}

.standR{width:80%;margin:0 10% 40px;display:inline-block;}
}


.centerprof{
width:100%;
margin-left:auto;
margin-right:auto;
padding:0;}
}










.clear{
background-color:transparent;
border:none;
}





footer{
background:#d4e1e2;
padding: 10px 0 0 0;
outline: #b5c6c8 2px solid;
margin:10px 0 0 0;
}