h1 {
  position: relative;
  padding: 0.2em 0.5em;
  background: -webkit-linear-gradient(to right, rgb(95, 195, 245), #96d1ee);
  background: linear-gradient(to right, rgb(95, 195, 245), #96d1ee);
  color: white;
  font-weight: bold;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.56);
}

/* h2 {
  background: linear-gradient(transparent 70%, #a7d6ff 70%);
} */

h3 {
  display: block;
  font-size: 1.17em;
  margin-block-start: 0.1em;
  margin-block-end: 0.1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}

h4 {
  margin-block-start: 0.75em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

p {
  margin-block-start: 0.5em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.s-title {
  position: relative;
  display: inline-block;
  margin: 0 0 0px;
  padding: 8px 15px 8px 30px;
  border: 2px solid currentColor;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.8em;
  letter-spacing: 1px;
  text-transform: none;
}
  .s-title:before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    width: 0;
    height: 0;
    margin: -4px 0 0;
    border-width: 4px;
    border-style: solid;
    border-radius: 50%; }

.s-message{
  position: relative;
}

.btn-buy-stitch {
  display: inline-block;
  position: relative;
  font-size: 1.75vh;
  padding: 0.5em 0.5em;
  margin: auto;
  text-decoration: none;
  background: #FF9900;
  color: #FFF;
  border-radius: 6px;
  box-shadow: 0px 0px 0px 5px #FF9900;
  border: dashed 1px #FFF;
}

.btn-buy-stitch:hover {
  border: solid 2px #FFF;
  cursor : pointer;
}

.genre{
  margin-block-start: 2em;
  margin-block-end: 0.1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.price-table{
  position: relative; 
  text-align: center;
}
.price-table:hover{
  opacity: 0.7;
  cursor : pointer;
}

.portal {
  text-align: right;
  margin-right: 1%;
}

#member-message {
  font-family: "Hiragino Sans",'Arial','Hannotate SC','メイリオ', Meiryo,'ヒラギノ角ゴシック',sans-serif;
  font-size: 1em;
  margin-top: 0;
  margin-bottom: 0;
}

#mypage {
  display: inline-block;
  padding: 0em 0.5em;
  text-decoration: none;
  background:white;
  color: #67c5ff;
  border: solid 2px #67c5ff;
  border-radius: 3px;
  transition: .4s;
}

#mypage:hover {
  background: #67c5ff;
  color: white;
}

#accountpage {
  display: inline-block;
  padding: 0em 0.5em;
  text-decoration: none;
  background:white;
  color: #67c5ff;
  border: solid 2px #67c5ff;
  border-radius: 3px;
  transition: .4s;
}

#accountpage:hover {
  background: #67c5ff;
  color: white;
}

ul, ol {
  background: #f1f8ff;
  box-shadow: 0px 0px 0px 10px #f1f8ff;/*線の外側*/
  border: dashed 2px #668ad8;/*破線*/
  border-radius: 9px;
  margin-left: 10px;/*はみ出ないように調整*/
  margin-right: 10px;/*はみ出ないように調整*/
  padding: 0.5em 0.5em 0.5em 2em;
}

ul li, ol li {
  line-height: 1.5;
  padding: 0.5em 0;
}

.cssgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.8em;
  /* border: 1px solid #ddd; */
  /* padding: 0.8em; */
  /* margin: 0 0 2em; */
}

/* .cssgrid > div { */
  /* background: #ddd; */
  /* overflow: auto; */
  /* min-width: 0; */
  /* padding: 1em; */
/* } */

.box30 {
  margin: 0.5em 0;
  background: #f1f1f1;
  box-shadow: 0 2px 4px rgba(95, 48, 48, 0.22);
  position: relative;
}
.box30 .box-title {
  font-size: 1.2em;
  background: #5fc2f5;
  padding: 4px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.box30 p {
  padding: 15px 20px;
  margin: 0 0 5% 0;
  /* position: relative; */
}

.box-title-security {
  background: #F64849;
  font-size: 1.2em;
  padding: 4px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.box-title-compute {
  background: #F38906;
  font-size: 1.2em;
  padding: 4px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.box-title-netoworking {
  background: #8F59EE;
  font-size: 1.2em;
  padding: 4px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.box-title-storage {
  background: #569A32;
  font-size: 1.2em;
  padding: 4px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.box-title-database {
  background: #435ADD;
  font-size: 1.2em;
  padding: 4px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.box-title-ba {
  background: #4155D7;
  font-size: 1.2em;
  padding: 4px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.box-title-saa {
  background: #36C2B4;
  font-size: 1.2em;
  padding: 4px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
}

#Start {
  border-bottom: dashed 2px #24292E;
}
#Security {
  border-bottom: dashed 2px #CD1B25;
}
#Compute {
  border-bottom: dashed 2px #D05A17;
}
#Networking {
  border-bottom: dashed 2px #5932B4;
}
#Storage {
  border-bottom: dashed 2px #2D761A;
}
#Database {
  border-bottom: dashed 2px #435ADD;
}
#BA {
  border-bottom: dashed 2px #4155D7;
}
#SAA {
  border-bottom: dashed 2px #36C2B4;
}

.btn {
  transition: .4s;
  font-size: 1em;
  position: absolute; top:75%; left: 75%;
}

.btn-stitch {
  display: inline-block;
  /* font-weight: bold; */
  /* padding: 0.25em 0.5em; */
  /* text-decoration: none; */
  /* color: #FFF; */
  /* background: #00bcd4; */
  transition: .4s;

  /* display: inline-block; */
  /* padding: 0.25em 0.75em; */
  /* text-decoration: none; */
  font-size: 1em;
  /* letter-spacing: 0.2em; */
  /* background: #5fc2f5; */
  /* color: #FFF; */
  /* border-radius: 4px; */
  /* box-shadow: 0px 0px 0px 5px #5fc2f5; */
  /* border: dashed 1px #FFF; */
  position: absolute; top:75%; left: 75%;

}

/* .btn-stitch:hover { */
  /* background: #1ec7bb; */
  /* border: solid 2px #FFF;
  cursor : pointer; */
/* } */

.btn-stitch-none-check {
  display: inline-block;
  /* padding: 0.25em 0.75em; */
  /* text-decoration: none; */
  font-size: 1em;
  /* letter-spacing: 0.2em; */
  /* background: #5fc2f5; */
  /* color: #FFF; */
  /* border-radius: 4px; */
  /* box-shadow: 0px 0px 0px 5px #5fc2f5; */
  /* border: dashed 1px #FFF; */
  position: absolute; top:75%; left: 75%;

}

/* .btn-stitch-none-check:hover { */
  /* border: solid 2px #FFF; */
  /* cursor : pointer; */
/* } */

.video_cancel {
  text-align: center;
  font-weight: bold;
  color: #E70235;
}