@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);


/******** HTMLリセット ********/
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, pre, blockquote, th, td, form, fieldset, input, textarea {  margin: 0;  padding: 0;}h1, h2, h3, h4, h5, h6 {  margin: 5px 0;  font-weight: normal;}em, strong, code, address, th {  font-weight: normal;  font-style: normal;}ul, ol {  list-style: none;}q:before, q:after {  content: "";}abbr, acronym {  border: 0;}table {  border-collapse: collapse;  border-spacing: 0;}th {  text-align: left;}fieldset, img {  border: 0;}p {  margin: 1em 0;}


:root {
  --bg: #fff;
  --point: #002258;
  --green: #B3BAD0;
  --pale: #DCE0F2;
  --red: #BC8B94;
  --link: #586593;
  --top: #95BFBA;

  --moji: #222;
}

/********* HTML再定義 ********/

.gfont {font-family:  'century gothic', 'futura';}

html, body {  height: 100%;}
img {  border: 0;
  max-width: 100%;}

html {  overflow-y: scroll;}

body {  color: var(--moji);
  font-size: %;
  line-height: 200%;
  letter-spacing: 0.06em;
  font-family: 'Noto Sans JP',"ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "AvenirNext-Regular", "Lucida Grande", "Verdana","Century Gothic",  "segoe UI", Osaka, sans-serif;
  background-color: var(--bg);}


#top {  display: block;position:relative;
  font-size: 377%;color: var(--top);
  height:222px;letter-spacing:0.13em;
  font-family: 'century gothic', 'futura';background:var(--bg);
background-image: linear-gradient(to left, rgba(170, 180, 211, 1) 0%, rgba(220, 224, 242, 1) 99%);}

#top a:link, #top a:visited,#top a:hover, a:active
{color: var(--bg);}

.top {position:absolute;top:48%;left:50%;text-align:center;
-webkit-transform:translate(-48%,-50%);transform:translate(-48%,-50%);}

#pic {  display: block;position:relative;
  font-size: 180%;color: var(--bg);
  height:15vh;letter-spacing:0.1em;
  font-family: 'century gothic', 'futura';
background-image: linear-gradient(to left, rgba(170, 180, 211, 1) 0%, rgba(220, 224, 242, 1) 99%);}
  
.center {text-align:center;}

.r18 {color:var(--red);font-weight:bold;font-size:72%;border:1px solid var(--red);border-radius:6px;text-align:center;padding:1px 2px;}

.new {background:var(--red);color:var(--bg);font-weight:bold;font-size:72%;border:2px solid var(--red);border-radius:4px;text-align:center;padding:1px 2px;}


.pic {position:absolute;top:10%;right:10%;text-align:center;
-webkit-transform:translate(%,%);transform:translate(%,%);}

 footer a:visited, 
 footer a:hover,
 footer a:active,
 footer a:link,
 #top a:visited, 
 #top a:hover,
 #top a:active,
 #top a:link,
 #pic a:visited, 
 #pic a:hover,
 #pic a:active,
 #pic a:link
 { color: var(--bg);
border:none;}

.menu, #picture {
  margin: 3em auto 4.5em auto;width:90%;max-width:700px;font-size:%;letter-spacing:0.04em;
}

#picture .note {margin-bottom:1em;}
#picture {margin:4em auto 7em auto;}

#ss {
  margin: 3em auto 4.5em auto;width:90%;max-width:700px;font-size:115%;letter-spacing:0.03em;line-height:2.15;color:var(--moji);
}
#end {display:block;text-align:right;padding-top:10em;color:var(--moji);font-size:90%;}
#ss p{margin:1.16em auto;}
#title{font-size:140%;letter-spacing:0.15em;}
span.dash {letter-spacing: -0.06em;margin-right: 0.07em;margin-left: 0.07em;}

#caution{padding: 1.75em;font-size:95%;border-radius:10px;letter-spacing:0.03em;border:4px solid var(--point);margin-bottom:15em;}

footer {width:100%;
text-align: center;height:80px;
font-size: 200%;
  display: block;
  letter-spacing:0.25em;
  padding-top:36px;
  font-family: 'century gothic', 'futura';
  color: var(--bg);
background-image: linear-gradient(to left, rgba(170, 180, 211, 1) 0%, rgba(220, 224, 242, 1) 99%);}


.iro {color:var(--point);}

.about
{font-size:119%;
display:inline-block;width:100%;
border-bottom:6px double var(--point);
padding-bottom:.1em;
margin:.3em auto .44em auto;}

.foot { 
text-align: center;
font-size: 210%;
  margin:  1.5em auto 0 auto;
  display: block;
  letter-spacing:0.25em;
color: var(--point);
  font-family: 'century gothic', 'futura';}
  
 .foot a:visited, 
 .foot a:hover,
 .foot a:active,
 .foot a:link
 { color: var(--point);
border:none;}

.pager { 
text-align: center;
font-size: 155%;
  margin:  1.5em auto 0 auto;
  display: block;
  letter-spacing:0.25em;
color: var(--point);
  font-family: 'century gothic', 'futura';}
  
 .pager a:visited, 
 .pager a:hover,
 .pager a:active,
 .pager a:link
 { color: var(--point);
border:none;}

#wrap {  width: %;
  max-width: px;
  margin: px auto auto auto;
  padding-bottom: 30em;}



#information, #archive {margin: 2em auto auto auto;width:90%;max-width:700px;border-radius:0px;letter-spacing:0.04em;border:6px double var(--point);padding-bottom:.6em;}


.information { font-size: 222%;
  margin:  1em 0 0 0;
  display: block;letter-spacing:0.22em;
color: var(--point);text-align:center;
  font-family: "century gothic', 'futura";}

#information p, #archive p {margin:0 1.75em 1em 1.75em;display:block;}

.midasi {  font-size: 252%;
  margin: 1.5em auto 1em auto;width:280px;
  display: block;letter-spacing:0.14em;
color: var(--point); text-align:center;padding-left:.2em;
  font-family: 'century gothic', 'futura';
background: linear-gradient(transparent 55%, #fff 55%);}

.kugiri {border:none; border-top:3px double var(--point);}
.inside {border:none; border-top:3px solid var(--point);margin:3em auto;}



a {  text-decoration: none;
  border-bottom: 2px dotted var(--point);
  -webkit-transition: 0.08s;
  -moz-transition: 0.08s;
  -ms-transition: 0.08s;
  -o-transition: 0.08s;
  transition: 0.08s;}
a:link {  color: var(--moji);}
a:visited {  color: var(--link);}
a:hover, a:active {  color: #fff;}


.sp {  display: none;}



p.notes {  margin-top: -0.8em;}

a.note {  border: none;}

img.note {  max-width: px;
  margin-bottom: -0.5em;
  border:#fff 2px solid;}

a img {  border: none;}


.bn img{margin: .6em auto 0em auto;}


/***追従するトップへ戻るボタン***/
#page-top {
    position: fixed;
    right: 2%;
    bottom: 35px;
    font-size: 300%;opacity: 0.77;
color: var(--point);
 mix-blend-mode: multiply;
border:none; 
}
/***トップへ戻るボタンここまで***/