/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


body {
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content:center;
}

#defaultCanvas0 {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;  
}


.tab-switch {
  --tab-color:#0000FF;
  display: flex;
  flex-wrap: wrap;
  max-width: 300px;
  margin-inline: auto;
  gap: 0 5px;
}


.tab-switch input {
  display: none;
}

.tab-switch label {
  padding: 0.3em 0.5em;
  background:#0000FF;
  cursor: pointer;
  order: -1;
  text-align: center;
  display: block;
  width: 200px;
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: 200% auto;
  background-image: linear-gradient(
    to right,
    #0000FF 0%,
    #0000FF 50%,
    #000000 50%,
    #000000 100%
  );
  transition: background-position ease 0.4s;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
}

.tab-switch label:hover {
  background-position: 0 0;
  background-color:#fff;
}

/* コンテンツ非表示 */
.tab-content {
  background-color: #fff;
  display: none; 
  width: 100%;
  min-height: 200px;
}

/* 選択されたタブ＋コンテンツ表示 */
.tab-switch input:checked + label {
  background-color:#fff;
  color: #fff;
}
.tab-switch input:checked + label + .tab-content {
  display: block;
  background-color:#fff;
}

h2 {
  /*線の種類（実線） 太さ 色*/
  border-bottom: solid 3px black;
}


.sidebar{
  display:inline-block;
  position: fixed;  
  bottom: 100px;       
  right: 20px;       
  z-index: 9999;     
  text-align:right; 
  color:black; 
  background-color:#FFFFFF; 

 
}


#wrapper {
    width: 90%;
    max-width: 1400px;
    min-width: 800px;
    margin: 50px auto;
}

#columns {
    background: #FFFFFF;
    border: 2px solid #FAFAFA;
    margin: 0 2px 15px;
    padding: 40px;
    background: linear-gradient(45deg, #FFF, #F9F9F9);
    opacity: 0.98;
}

#columns h1, 
#columns h2 {
    margin-top: 0;
    margin-bottom: 20px;
}

#columns p {
    line-height: 1.8;
    margin-bottom: 1.2em;
}
 
#columns iframe {
    display: inline-block;
    max-width: 100%;
    margin: 30px auto;  
    border-radius: 8px;
}
 
.pin p {
    font: 12px/18px Arial, sans-serif;
    color: #333;
    margin: 0;
}
 
@media (min-width: 960px) {
    #columns {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}
 
@media (min-width: 1100px) {
    #columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}
 
#columns:hover .pin:not(:hover) {
    opacity: 0.4;
}