@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: #8793B8;
  --red: #BC8B94;
  --link: #586593;
  --top: #95BFBA;

  --moji: #111;
}

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

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

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

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


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

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

.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;}


.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;}


.menu, #picture {
  margin: 3em auto 4.5em auto;width:90%;font-size:82%;letter-spacing:0.1em;
}

#picture {margin:4em auto 7em auto;}

#information, #archive {margin: 1.5em auto auto auto;width:90%;font-size:82%;border-radius:0px;
padding-bottom:.6em;letter-spacing:0.15em;border:6px double var(--point);}


#ss {
  margin: 3em auto 4.5em auto;width:88%;font-size:93%;letter-spacing:0.095em;line-height:2;color:var(--moji);
}
#ss p{margin:1.16em auto;}
#title{font-size:140%;letter-spacing:0.15em;}
span.dash {letter-spacing: -0.06em;margin-right: 0.09em;margin-left: 0.0em;}
#end {display:block;text-align:right;padding-top:10em;color:var(--moji);font-size:92%;}
#caution{padding: 1em 1.5em 1em 1.5em;font-size:92%;border-radius:10px;letter-spacing:0.08em;border:4px solid var(--point);margin-bottom:15em; color: var(--moji);}

footer {width:100%;
text-align: center;height:80px;
font-size: 200%;
  display: block;
  letter-spacing:0.2em;
  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%);}

html {  overflow-y: scroll;}

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

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

body {  color: var(--moji);
  line-height: 174%;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "AvenirNext-Regular", "Lucida Grande", "Verdana","Century Gothic",  "segoe UI", Osaka, sans-serif;
  
  font-feature-settings: "palt" 1;
    -webkit-text-size-adjust: 100%;
  background-color: var(--bg);}

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

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

.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;}

.kugiri {border:none; border-top:3px double var(--point);}

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

.pc {  display: none;}



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

a.note {  border: none;}

img.note {  
  max-width: 100%;
  max-height: ;
  margin-bottom: -0.5em;
  border:#fff 0px solid;}

a img {  border: none;}


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