/* 見出し */
h1 {
  padding: 0.5em;/*文字周りの余白*/
  color: #010101;/*文字色*/
  background: #eaf3ff;/*背景色*/
  border-bottom: solid 3px #516ab6;/*下線*/
}

h2 {
  position: relative;
  padding: 0.6em;
  background: -webkit-repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
  background: repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
  border-radius: 7px;
}

h2:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #ffebbe;
  width: 0;
  height: 0;
}

h3 {
  padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #fffaf4;/*背景色*/
  border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
}


/* 4つ角すべて同じ丸み */
.box-maru {
 content: "\A" ;
 display:inline-block;
 padding: 0.5em 1em;
 margin: 2em 0;
 font-weight: bold;
 border: solid 2px #0000ff;
 border-radius: 10px;/*角の丸み*/
}
.box-maru p {
 margin: 0; 
 padding: 0;
}

footer {
  padding: 0.5em;/*文字周りの余白*/
  color: #E0FFFF;/*文字色*/
  background: #A9A9A9;/*背景色*/
  border-top: solid 3px #516ab6;/*上線*/
}

/*▼ボタン用▼*/
.btn-square-raised {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #668ad8;/*ボタン色*/
  color: #668ad8;/*ボタン色と同じに*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #627295;
  border-radius: 3px;/*角の丸み*/
  font-weight: bold;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
}

.btn-square-raised:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}
/*▲ボタン用▲*/


/*▼INPUTボタン用▼*/
input[type="button"] {
   /* input要素のうちtype属性値がbuttonのものに対して装飾 */
   background-image: linear-gradient(0deg, #a7d9f5, #eaf6fd); /* グラデーション */
   border: 1px solid #3c7fb1; /* 枠線 */
   border-radius: 0.3em;      /* 角丸 */
   
   font-size: 1.4em;    /* 文字サイズを1.4emに指定 */
   font-weight: bold;    /* 文字の太さをboldに指定 */
   padding: 10px 30px;   /* 縦方向に10px、横方向に30pxの余白を指定 */
}
/*▲INPUTボタン用▲*/


/*▼タブ切り替え用▼*/
.tab-wrap {
    display: flex;
    flex-wrap: wrap;
}
.tab-label {
    color: White;
    background: LightGray;
    margin-right: 5px;
    padding: 3px 12px;
    order:-1;
}
.tab-content {
    width: 100%;
    display: none;
}
.tab-switch:checked+.tab-label {
    background: DeepSkyBlue;
}
.tab-switch:checked+.tab-label+.tab-content {
    display: block;
}
.tab-switch {
    display: none;
}
/*▲タブ切り替え用▲*/