@charset "UTF-8";

.tabs {
  display: flex;
  justify-content: center;
}
.tabs a {
  display: flex;
  font-weight: bold;
  color: #000;
  align-items: center;
  position: relative;
}

.tabs .li01 a { background:#fff3b1;}
.tabs .li02 a { background:#b1ddff;}
.tabs .li03 a { background:#84c6bc;}
.tabs a .text { padding: 5px 1em 5px 5px; box-sizing: border-box;}

.tabs li.on a::before {
  content: "";
  width: 40px;
  height: 40px;
  border: transparent 20px solid;
  border-top-color: #fff3b1;
  box-sizing: border-box;
  position: absolute;
  bottom: -40px;
  left: calc(50% - 20px);
}
.tabs li.on.li02 a::before { border-top-color:#b1ddff;}
.tabs li.on.li03 a::before { border-top-color:#84c6bc;}

@media only screen and (min-width: 783px) {
  .tabs {margin: 20px;}
  .tabs li:not(:first-child) { margin-left: 15px;}
  .tabs a .text { min-width: 260px;}
  .tabs .li03 a .text { padding-left: 20px;}
  .tabs a figure { width: 100px;}
  .tabs a .text { width: calc(100% - 100px);}
}

.vol01, .vol02, .vol03 {
  display: inline-block;
  padding: 0.5em 1em;
  background: #ffdd55;
  font-size: 10px;
}
.vol02 { background: #7bc0ff;}
.vol03 { background: #ace2db;}

.tabs a p { margin: 10px 0 0 0; font-size: 86%;}

@media only screen and (max-width: 650px) {
  .tabs a .text p { display: none;}
  .tabs .vol01, .tabs .vol02, .tabs .vol03 {
    font-size: 2vw;
  }
  .tabs li.on a::before {
    width: 30px;
    height: 30px;
    border-width: 15px;
    bottom: -30px;
    left: calc(50% - 15px);
  }
}

footer .tabs {
  margin-top: 5em;
}
footer .tabs li.on a::before {
  border: transparent 20px solid;
  border-bottom-color: #fff3b1;
  box-sizing: border-box;
  position: absolute;
  bottom: auto;
  top: -40px;
}
footer .tabs li.on.li02 a::before { border-top-color:transparent; border-bottom-color:#b1ddff;}
footer .tabs li.on.li03 a::before { border-top-color:transparent; border-bottom-color:#84c6bc;}
@media only screen and (max-width: 650px) {
  footer .tabs li.on a::before {
    width: 30px;
    height: 30px;
    border-width: 15px;
    top: -30px;
    left: calc(50% - 15px);
  }
}

.header1 p {
  font-weight: bold;
  font-size: 86%;
}
.header1 h1 {
  font-weight: bold;
  font-size: 5vw;
  line-height: 1.5;
  margin-top: 0.7em;
}
.header1 .thumb { text-align: center; margin-top: 1em;}
.h301 { text-align: center; margin-top: 2em}
.h301::before { content: "▼";}
.h301::after { content: "▼";}
@media only screen and (min-width: 783px) {
  .header1 {
    display: flex;
    justify-content: center;
  }
  .header1 h1 { font-size: 45px; margin-right: 20px;}
  .header1 .thumb { margin-top: 30px;}
}

.h501 { margin-top: 1em; font-size: min(140%, 3.7vw); font-weight: bold;}

.h402 {
  margin-top: 2em;
}
.h402 strong {
  color: #fff;
  background: #000;
  display: inline-block;
  padding: 8px 15px;
}

.hukidashi {
  margin-top: 1em;
  position: relative;
}
.hukidashi::before {
  content: "";
  box-sizing: border-box;
  width: 50px;
  height: 20px;
  border: transparent 10px solid;
  border-left: transparent 25px solid;
  border-right: #d5edff 25px solid;
  position: absolute;
  left: -45px;
  top: calc(50% - 10px);
}
.hukidashi .bg {
  display: inline-flex;
  background: #d5edff;
  padding: 12px 20px;
  font-weight: bold;
  align-items: center;
  border-radius: 30px;
  
}
.hukidashi .bg * + * { margin-left: 10px;}
.hukidashi .bg img { vertical-align: middle}

@media only screen and (min-width: 783px) {
  .pcflex {
    display: flex;
    justify-content: space-between;
  }
  
}

@media only screen and (max-width: 782px) {
  .hukidashi.pc { display: none;}
}

.face_hukidashi {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
.face_hukidashi .hukidashi {
  margin-top: 0;
  width: calc(100% - 60px);
}
.face_hukidashi .face { margin-right: 10px; width:60px;}
@media only screen and (min-width: 783px) {
  .face_hukidashi .hukidashi {width: calc(100% - 81px);}
  .face_hukidashi .face {  width:81px;}
}
.face_hukidashi .hukidashi::before {
  border-right: #f3e9e0 25px solid;
}
.face_hukidashi .hukidashi .bg,
.rev_hukidashi .hukidashi .bg {
  background: #f3e9e0;
  padding: 20px 25px;
}
.rev_hukidashi {
  display: flex;
  justify-content: flex-end;
}
.rev_hukidashi .hukidashi::before {
  border-right: transparent 25px solid;
  border-left: #f3e9e0 25px solid;
  left: auto;
  right: -45px;
}

.inner_02 {
  width: 900px;
  max-width: 100%;
  margin: 0 auto;
}

.icon {
  display: block;
  width: 50px;
  height: 50px;
  background: #16317f;
  border-radius: 8px;
  margin-right: 10px;
  position: relative;
}
.icon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: url("../img/tom.png") no-repeat calc(50% + 3px) -2px / 34px auto;
}

.icon .txt {
  z-index: 2;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.icon .txt { background: #ffe000;}
.icon.viewer .txt { background: #6EE06D;}
.icon .txt::before {
  color: #000;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: -1px;
}
.icon.subsc .txt::before { content: "サブスク";}
.icon.trial .txt::before { content: "お試し"; letter-spacing: 0;}
.icon.viewer .txt::before { content: "ビューア";}