@import url("common.css");

ul{
display: table;
margin: 0 auto;
padding: 0;
width: 80%;
text-align: center;
}
ul li{
display: table-cell;
min-width: 50px;
}
ul li a{
display: block;
width: 100%;
padding: 10px 0;
text-decoration: none;
color: #555;
font-weight: bold;
}
ul li.current{
background-color: #DEEBF7;
}
ul li.current a{
color: #555;
}
ul li:hover{
background-color: #FFF2CC;
}




*{
  margin: 0;
  padding: 0;
}

.clear{
  clear: both;
}


.slide-toggle{
  display: none;
}

.slidemenu{
  font-family: arial, sans-serif;
  max-width: 600px;
  margin: 50px auto;
  overflow: hidden;
}

.slidemenu label{
  width: 25%;
  text-align: center;
  display: block;
  float: left;
  color: #333;
  opacity: 0.2;

}

.slidemenu label:hover{
  cursor: pointer;
  color: #666;
}

.slidemenu label span{
  display: block;
  padding: 10px;    
}

.slidemenu label .icon{
  font-size: 20px;
  border: solid 2px #333;
  text-align: center;
  height: 50px;
  width: 50px;
  display: block;
  margin: 0 auto;
  line-height: 50px;
  border-radius: 50%;
}

/*Bar Style*/

.slider{
  width: 100%;
  height: 5px;
  display: block;
  background: #ccc;
  margin-top: 10px;
  border-radius: 5px;
}

.slider .bar{
  width: 25%;
  height: 5px;
  background: #333;
  border-radius: 5px;
}

/*Animations*/
.slidemenu label, .slider .bar {
  transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
}

/*Toggle*/

.slidemenu .slide-toggle:checked + label{
  opacity: 1;
}



.slidemenu #slide-item-1:checked ~ .slider .bar{ margin-left: 0; }
.slidemenu #slide-item-2:checked ~ .slider .bar{ margin-left: 25%; }
.slidemenu #slide-item-3:checked ~ .slider .bar{ margin-left: 50%; }
.slidemenu #slide-item-4:checked ~ .slider .bar{ margin-left: 75%; }




@use postcss-preset-env {
  stage: 0;
}

/* helpers/accessibility.css */

.invisible {
  left: -999px;
  overflow: hidden;
  position: absolute;
  top: -999px;
}

/* helpers/align.css */

.align {
  display: grid;
  place-items: center;
}

/* layout/base.css */

:root {
  --body-background-color: #82a8ee;
  --body-color: #97adc6;
}

body {
  background-color: var(--body-background-color);
  color: var(--body-color);
  margin: 0;
  min-block-size: 100vh;
}

/* modules/anchor.css */

a {
  color: inherit;
  outline: 0;
}

/* modules/icon.css */

.icons {
  display: none;
}

.icon {
  block-size: 1em;
  display: inline-block;
  fill: currentcolor;
  inline-size: 1em;
  vertical-align: middle;
}

.icon--2x {
  font-size: 2rem;
}

/* modules/image.css */

svg {
  max-inline-size: 100%;
}

/* modules/navigation.css */

:root {
  --navigation-background-color: #f0f6ff;
  --navigation-border-radius: 0.25em;

  --navigation-anchor-padding: 1.5em;
}

.navigation {
  background-color: var(--navigation-background-color);
  border-radius: var(--navigation-border-radius);
  box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.3);
}

.navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation a {
  display: block;
  padding: var(--navigation-anchor-padding);
  position: relative;
  text-decoration: none;
}

.navigation a:focus::after,
.navigation a:hover::after {
  opacity: 1;
}

.navigation a::after {
  block-size: 100%;
  box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.3);
  content: '';
  inline-size: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.3s;
}

.navigation--inline ul {
  display: flex;
}





body {
color: #000000;
}
.content {
 margin: 64px auto 0 auto;
 padding: 32px;
 max-width: 820px;
 border-radius: 16px;
 background: rgba(225,225,225,0.85);
}

h1 {
 padding: 1em;
 color: Teal;
 font: bold 1em/1.6 Meiryo,"メイリオ",Osaka,Verdana,"ＭＳ ゴシック",sans-serif;}

#content {
 margin: 64px auto 0 auto;
 padding: 32px;
 max-width: 820px;
 border-radius: 16px;
 background: rgba(225,225,225,0.85);
 }

p {
 margin: 1em 0;}

.infobox {
      position: relative;
      border: 1px solid #d0d0d0;
      padding: 10px;
      width: 650px;
      background: #efe;
}
.thumbnail {
      margin-bottom: 10px;
      font-size: 0;
}
.thumbnail img {
      width: 100%;
}

.shape-outside .circle {
  shape-outside: circle(50%);
  float: right;
  width: 300px;
  shape-margin: 100px;
}

.shape-outside .text p {
  margin-bottom: 30px;
}