@charset "UTF-8";
body{
  position: relative;
}

p {
  color: #fff;
  font-size: 16px;
  line-height: 1.9;
}
@media screen and (min-width: 769px) {
  p {
    font-size: 18px;
  } 
}
img{
  width: 100%;
}

@media screen and (max-width: 769px) {
  .container, .logo-section {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
@media screen and (min-width: 1160px) {
  .container, .logo-section {
    padding-right: calc((100vw - 1120px) / 2);
    padding-left: calc((100vw - 1120px) / 2);
  }
}
h3 {
  padding-bottom: 3rem;
}
h4 {
  color: #3b3b3b;
  font-size: 6rem;
  padding-bottom: 2rem;
  font-family: 'Sawarabi Mincho', serif;
}
@media screen and (min-width: 769px) {
  h4 {
    font-size: 10rem;
    padding: 7rem 0rem 5rem;
  }
}
#merit h3,#merit h4, #method h3, #method h4, #contents h3, #contents h4, #special h3, #special h4 {
  filter: drop-shadow(0px 0px 10px black)drop-shadow(0px 0px 6px rgba(0,0,0,0.3));
}
.c-red{
  color: rgb(230, 15, 15);
}
.bg-red{
  background: rgb(230, 15, 15);
}
.c-black{
  color: rgb(0, 0, 0);
}
.bg-black{
  background: rgb(0, 0, 0);
}
.c-white{
  color: rgb(255, 255, 255);
}
.bg-white{
  background: rgb(255, 255, 255);
}
.c-main{
  color: #c6a620;
}
.bg-main{
  background: #c6a620;
}
.bg-green{
  background: #1cb541;
}
.bg-blue{
  background: #010185;
}
.bg-lblue{
  background: #0387f6;
}
.fs-l{
  font-size: 1.2em;
}
.fw-bold{
  font-weight: bold;
}
.td-underline{
  text-decoration: underline;
}
.section-container {
  background-size: cover;
  padding: 6rem 0 2rem;
}
@media screen and (min-width: 769px) {
  .section-container {
    padding: 10rem 0;
  }
}
.container .text-container {
  padding: 2.5rem 1.5rem;
  margin-bottom: 3rem;
  background: rgba(0, 0, 0, 0.8);
}
@media screen and (min-width: 769px) {
  .container .text-container {
    padding: 10%;
  }
}
/*----------------------------------------
  .logo-section
----------------------------------------*/
.logo-section {
  padding: 6rem 0;
  background: #fff;
}
.logo-section img {
  display: block;
  width: 80vw;
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .logo-section img {
    width: 650px;
  }
}
/*----------------------------------------
  #return
----------------------------------------*/
#return {
  background-color:hsla(0,100%,50%,1);
  background-image:
  radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0px, transparent 50%),
  radial-gradient(at 80% 0%, hsla(59,100%,56%,1) 0px, transparent 50%),
  radial-gradient(at 0% 50%, hsla(18,100%,61%,1) 0px, transparent 50%),
  radial-gradient(at 0% 100%, hsla(22,100%,77%,1) 0px, transparent 50%),
  radial-gradient(at 80% 99%, hsla(24,100%,37%,1) 0px, transparent 50%),
  radial-gradient(at 0% 0%, hsla(343,100%,76%,1) 0px, transparent 50%);
}
@media screen and (min-width: 769px) {
  #return {
    background: url(../images/return_image_0.jpg) no-repeat center top fixed;
    background-size: cover;
  }
}

/*----------------------------------------
  #merit
----------------------------------------*/
#merit {
  background: #000000;
}
@media screen and (min-width: 769px) {
  #merit {
    background: url(../images/merit_image_0.jpg) no-repeat center top fixed;
    background-size: cover;
  }
}

#merit .container .text-container {
  background: rgba(0, 0, 0, 0.8);
  border: 9px solid #ffffff;
}
#merit .container .text-container img {
  border: 9px solid #ffffff;
}
/*----------------------------------------
  #intro
----------------------------------------*/

#intro {
  background: rgb(2,0,36);
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(255,255,255,1) 0%, rgba(228,228,228,1) 100%);
}
@media screen and (min-width: 769px) {
  #intro {
    background: url(../images/intro_image_0.jpg) no-repeat center top fixed;
    background-size: cover;
  }
}
#intro br {
  display: block;
}
#intro .container .text-container {
  background: rgb(255 255 255 / 45%);
  border: 9px solid #cdac12;
}
#intro .container .text-container p {
  color: #000;
}
#intro img.floatRight {
  width: 34%;
  margin-left: 16px;
  float: right;
}
.intro-flex {
  display: flex;
  flex-direction: column;
}
.intro-flex h4 {
  width: 100%;
  color: #000;
  font-size: 3.2rem;
  padding: 0;
  line-height: 1;
  display: inline-block;
}
.intro-flex h4 .goldNavi {
  color: #333;
  background: #cdac12;
  display: inline-block;
  font-size: .4em;
  font-weight: 800;
  padding: .75rem;
  margin-bottom: 1rem;
}
.intro-flex h4 .enName {
  display: inline-block;
  color: #5b5b5b;
  font-size: .65em;
  font-weight: 800;
  transform: translateY(-6px);
}
.intro-image {
  width: 100%;
}
.intro-flex img {
  width: 100%;
  display: block;
  margin-left: auto;
}
@media screen and (min-width: 769px) {
  .intro-flex {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
  }
  .intro-image {
    width: 40%;
  }
  .intro-flex h4 {
    width: 60%;
    font-size: 7rem;
  }
  .intro-flex h4 .enName {
    transform: translateY(-12px);
  }
}
#intro .list-blue {
  background: #c6a620;
  padding: 8%;
}
#intro .list-blue li,#intro ul.list-blue li:before {
  color: #fff;
  font-size: 1.8rem;
}
@media screen and (min-width: 769px) {
  #intro .list-blue li,#intro ul.list-blue li:before {
    font-size: 2.2rem;
  }
}
#intro .list-blue li {
  padding-left: 3.5rem;
}

/*----------------------------------------
  #method
----------------------------------------*/

#method {
  background-color:hsla(0,92%,22%,1);
  background-image:
  radial-gradient(at 53% 83%, hsla(27,100%,50%,1) 0px, transparent 50%),
  radial-gradient(at 100% 12%, hsla(26,100%,6%,1) 0px, transparent 50%),
  radial-gradient(at 18% 23%, hsla(160,87%,42%,1) 0px, transparent 50%);
}
@media screen and (min-width: 769px) {
  #method {
    background: url(../images/method_image_0.jpg) no-repeat center top fixed;
    background-size: cover;
  }
}
#method .container .text-container {
  background: rgba(0, 0, 0, 0.8);
  border: 9px solid #fdc51d;
}
/*----------------------------------------
  #step
----------------------------------------*/

#step {
  background: rgba(255,255,255,1);
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,248,172,1) 100%);
}
@media screen and (min-width: 769px) {
  #step {
    background: url(../images/step_image_0.jpg) no-repeat center top fixed;
    background-size: cover;
  }
}
#step p {
  color: #000;
}
#step .container .text-container {
  background: rgba(255, 255, 255, .75);
  border: 9px solid #cdac12;
}
#step .container .text-container img {
  border: 9px solid #cdac12;
}
/*----------------------------------------
  #ready
----------------------------------------*/
#ready {
  background: rgb(2,0,36);
background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(76,87,115,1) 0%, rgba(4,1,32,1) 100%);
}
@media screen and (min-width: 769px) {
  #ready {
    background: url(../images/ready_image_0.jpg) no-repeat center top fixed;
    background-size: cover;
  }
}
/*----------------------------------------
  #contents
----------------------------------------*/

#contents {
  background-color:hsla(227,96%,10%,1);
  background-image:
  radial-gradient(at 87% 26%, hsla(24,0%,26%,1) 0px, transparent 50%),
  radial-gradient(at 18% 23%, hsla(49,55%,53%,1) 0px, transparent 50%);
}
@media screen and (min-width: 769px) {
  #contents {
    background: url(../images/contents_image_0.jpg) no-repeat center top fixed;
    background-size: cover;
  }
}
@media screen and (max-width: 768px) {
  #contents .text-container p {
    color: #fff;
  }
  dl#contents1-cw dt {
    margin-bottom: 1rem;
}
  #contents .curriculum h5 {
    padding: .8em 1em;
    font-size: 10px;
    font-size: 2.7vw;
    color: #fff;
    text-align: center;
    font-family: "Noto Serif JP", "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;
    letter-spacing: .1em;
    background: #000;
  }
  #contents .curriculum ul {
    margin-bottom: 30px;
  }
  #contents .curriculum li {
    margin-bottom: 0;
    padding: 1rem;
    font-size: 12px;
    font-size: 3.2vw;
    color: #fff;
    font-weight: normal;
    display: block;
    line-height: 160%;
    background: #5a001e;
    border-bottom: 1px solid #fff;
  }
  #contents .curriculum li:last-child {
    border-bottom: none;
  }
  #contents .curriculum li span {
    margin-right: 0.5em;
    padding: 0 .5em;
    color: #5a001e;
    background: #fff;
    display: inline-block;
    border-radius: .5rem;
  }
}
@media screen and (min-width: 769px) {

  #contents .container .text-container p {
    color: #fff;
  }
  #contents .container:last-child {
    margin-bottom: 0;
  }
  #contents .curriculum ul {
    margin-bottom: 30px;
  }
  #contents .curriculum li {
    margin-bottom: 0;
    padding: 20px;
    font-size: 20px;
    font-size: 2rem;
    color: #fff;
    font-weight: normal;
    display: block;
    background: #5a001e;
    border-bottom: 1px solid #fff;
  }
  #contents .curriculum li:last-child {
    border-bottom: none;
  }
  #contents .curriculum li span {
    margin-right: 0.5em;
    padding: 0 .5em;
    color: #5a001e;
    background: #fff;
    display: inline-block;
    border-radius: .5rem;
  }
  dl#contents1-cw dt {
    margin-bottom: 3rem;
  }
}
/*----------------------------------------
  #cspecial
----------------------------------------*/

#special {
  background: rgb(2,0,36);
  background-color:hsla(33,77%,15%,1);
  background-image:
  radial-gradient(at 87% 26%, hsla(44,100%,39%,1) 0px, transparent 50%),
  radial-gradient(at 18% 23%, hsla(47,100%,50%,1) 0px, transparent 50%);}
@media screen and (min-width: 769px) {
  #special {
    background: url(../images/special_image_0.jpg) no-repeat center top fixed;
    background-size: cover;
  }
}
/*----------------------------------------
  #price
----------------------------------------*/
#price {
  background: hsla(47,100%,50%,1);
}
@media screen and (min-width: 769px) {
  #price {
    background: url(../images/price_image_0.jpg) no-repeat center fixed;
    background-size: cover;
  }
}
.skew-container {
  display: block;
  transform: skewX(-10deg);
}
.price-container {
  color: #cdac12;
  display: inline-block;
  background: linear-gradient(90deg, #ffe6c5 0%, #e7c76d 11%,  #e7c76d 33%, #ffe6c5 62%, #e3c05d 83%, #9d874e 100%);
  background: -webkit-linear-gradient(0deg,  #ffe6c5 0%, #e7c76d 11%, #a38131 20%, #e7c76d 33%, #ffe6c5 62%, #e3c05d 83%, #9d874e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 7em;
  font-weight: 800;
  margin-bottom: 30px;
  font-family: 'Sawarabi Mincho', serif;
}
@media screen and (min-width: 769px) {
  .price-container {
    font-size: 12em;
    padding-bottom: 2rem;
  }
}
.price-container span {
  font-size: 1em;
  font-family: 'Sawarabi Mincho', serif;
}
.price-container .tax {
  font-size: .2em;
  margin-left: -1em;
}
.product .price {
  font-size: 19vw;
  line-height: .8;
}
.product .price-container .tax {
  font-size: .2em;
  display: block;
  margin-left: 0;
  margin-top: 0.3em;
}
.product .price br {
  display: block;
}
@media screen and (min-width: 769px) and (max-width: 1169px) {
  .product .price {
    font-size: 10rem;
  }
}
@media screen and (min-width: 1170px) {
  .product .price {
    font-size: 16rem;
  }
}
/*----------------------------------------
  #qa
----------------------------------------*/
#qa {
  background: rgb(2,0,36);
  background: linear-gradient(135deg, rgba(2,0,36,1) 0%, rgba(255,254,248,1) 0%, rgba(212,212,212,1) 100%);
}
@media screen and (min-width: 769px) {
  #qa {
    background: url(../images/qa_image_0.jpg) no-repeat center top fixed;
    background-size: cover;
  }
}

#qa .container .text-container {
  background: rgb(215 183 2 / 80%);
}
/*----------------------------------------
  #message
----------------------------------------*/

#message {
  background: rgb(2,0,36);
  background: linear-gradient(135deg, rgba(2,0,36,1) 0%, rgba(255,254,248,1) 0%, rgba(182,231,228,1) 100%);
}
@media screen and (min-width: 769px) {
  #message {
    background: url(../images/message_image_0.jpg) no-repeat center top fixed;
    background-size: cover;
  }
}
#message .container .text-container {
  background: rgba(255, 255, 255, 0.85);
  border: 9px solid rgb(244 0 68 / 100%);
}
#message .container .text-container p {
  color: #333;
}
.name {
  text-align: right;
  font-family: 'Sawarabi Mincho', serif;
  font-size: 3rem;
}
/*----------------------------------------
  #ps
----------------------------------------*/
#ps {
  background: hsla(47,100%,50%,1);
}
@media screen and (min-width: 769px) {
  #ps {
    background: url(../images/ps_image_0.jpg) no-repeat center fixed;
    background-size: cover;
  }
}
#ps .container .text-container {
  background: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.395));
}
#ps .container .text-container p {
  color: #333;
}
#ps h4 {
  color: rgb(255, 255, 255);
  text-align: center;
  font-size: 5rem;
  padding: 1.5rem 0rem;
}
@media screen and (min-width: 769px) {
  #ps h4 {
    font-size: 8rem;
    padding: 3.5rem 0rem;
    margin-top: 10rem;
  }
}
  .c-accordion__wrap {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .c-accordion {
    width: 100%;
    margin: 0 auto;
  }
  
  .ac {
    margin-top: 2rem;
    box-sizing: border-box;
    background-color: white;
  }
  @media only screen and (min-width: 767px) {
    .ac {
      margin-top: 3.4rem;
    }
    .ac:first-child {
      margin-top: 0;
    }
  }
  .ac-q {
    padding: 1.6rem 4rem 1.6rem 2rem;
    margin: 0;
    text-decoration: none;
    display: block;
    cursor: pointer;
    position: relative;
    background-color: white;
    transition: all 0.3s ease;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.875;
    color: #07264e;
  }
  @media only screen and (min-width: 767px) {
    .ac-q {
      padding: 2rem 5rem;
      font-size: 1.8rem;
      font-weight: 400;
      line-height: 1.6666666667;
    }
  }
  .ac-q:after, .ac-q:before {
    content: "";
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #07264e;
    z-index: 10;
  }
  .ac-q:before {
    width: 20px;
    height: 2px;
    right: 10px;
  }
  @media only screen and (min-width: 767px) {
    .ac-q:before {
      right: 20px;
    }
  }
  .ac-q:after {
    width: 2px;
    height: 20px;
    right: 19px;
  }
  @media only screen and (min-width: 767px) {
    .ac-q:after {
      right: 29px;
    }
  }
  .ac-q:hover {
    background: #07264e;
    color: white;
  }
  .ac-q:hover:after, .ac-q:hover:before {
    background: white;
  }
  .ac-a {
    overflow: hidden;
    transition-property: all;
    transition-timing-function: ease;
  }
  .ac-a p {
    margin: 0;
    padding: 1.6rem 2rem;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.875;
    color: black;
  }
  .ac-a ul {
    margin: 0 2rem;
  }
  @media only screen and (min-width: 767px) {
    .ac-a p {
      padding: 2rem 5rem;
      font-size: 1.8rem;
      font-weight: 400;
      line-height: 1.6666666667;
    }
    .ac-a ul {
      margin: 0 5rem;
    }
  }
  
  .ac.js-enabled > .ac-a {
    visibility: hidden;
  }
  
  .ac.is-active > .ac-a {
    visibility: visible;
  }
  
  .ac.is-active > .ac-q {
    background: #07264e;
    color: white;
  }
  .ac.is-active > .ac-q:after, .ac.is-active > .ac-q:before {
    background: white;
  }
  .ac.is-active > .ac-q::after {
    display: none;
  }
  
  .ac-q:focus {
    outline: 0;
  }
  .product  {
    background: rgb(2,0,36);
    background-color:hsla(33,77%,15%,1);
    background-image:
    radial-gradient(at 87% 26%, hsla(44,100%,39%,1) 0px, transparent 50%),
    radial-gradient(at 18% 23%, hsla(47,100%,50%,1) 0px, transparent 50%);}
  @media screen and (min-width: 769px) {
    .product {
      background: url(../images/special_image_0.jpg) no-repeat center top fixed;
      background-size: cover;
    }
  }
@media only screen and (max-width: 767px){
  .productHead {
    border-top: 1px solid #b7b7b7;
  }
  .productPrice {
    padding: 3% 0;
    text-align: center;
  }
  .productContent {
    margin-bottom: 1em;
  }
  .productContent ul {
    border-bottom: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .productContent ul li {
    width: 48%;
  }


}
@media only screen and (min-width: 767px) {

  .productPrice {
    padding: 3% 0;
    text-align: center;
  }
  .productContent ul {
    margin-bottom: 2%;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px 5px;
  }
  .productContent ul li {
    width: 32%;
    display: block;
  }
}
.product .attention {
  margin: 0 auto 5%;
  padding: 3%;
  width: 100%;
  min-width: none;
  text-align: left;
  background: #fff;
  border: 1px dotted #333;
}
.product .attention dt {
  margin-bottom: 10px;
  padding: 5px;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff;
  background: #000;
}
.product .attention dd {
  margin-bottom: 30px;
}
.product .attention p {
  margin-bottom: .8em;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 160%;
  color: #000;
}
.product .attention .ifrm-container {
  width: 100%;
  height: 100px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: inline-block;
  border: solid 1px #bbb;
}
.product .attention .ifrm-container iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}
/*----------------------------------------
  footer
----------------------------------------*/
footer {
  color: #fff;
  background: #000;
  padding: 2rem;
}
footer .container {
  text-align: center;
}
footer .container a {
  font-size: 1.4rem;
  display: inline-block;
  text-decoration: underline;
  margin-bottom: 1rem;
}
footer .container p {
  font-size: 1.25rem;
}
#loading {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 1s;
  background-color: #000;
}
#logoAnime {
  width: 33vw;
}
@media screen and (min-width: 769px){
  #logoAnime {
    width: 10vw;
  }
}
.loaded {
  opacity: 0;
  visibility: hidden;
}



.logo-wrapper,.drawer__btn {
  filter: drop-shadow(0px 0px 1px rgb(42 2 104 / 33%));
}
.logo-wrapper{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 43%;
  padding-top: 15%;
  margin: 3%;
  background-repeat: no-repeat;
}
.drawer__btn {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  width: 45px;
  height: 45px;
  margin: 3%;
  border: 4px solid #fff;
  cursor: pointer;
  background: rgb(42 2 104 / 33%);
}
@media screen and (max-width: 820px){
  .logo-wrapper{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: 43%;
    padding-top: 15%;
    margin: 3%;
    background-repeat: no-repeat;
  }
  .drawer__btn {
    width: 45px;
    height: 45px;
    margin: 3%;
  }
}
@media screen and (min-width: 821px){
  .logo-wrapper{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: 15%;
    padding-top: 15%;
    margin: 1.5%;
    background-repeat: no-repeat;
  }
  .drawer__btn {
    width: 60px;
    height: 60px;
    margin: 1.5%;
  }
}
.drawer__btn span {
  display: block;
  width: 50%;
  height: 3px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: 0.3s;
}
.drawer__btn span:nth-child(1) {
  transform: translate(-50%, -12px);
}
.drawer__btn span:nth-child(2) {
  transform: translate(-50%, -50%);
}
.drawer__btn span:nth-child(3) {
  transform: translate(-50%, 10px);
}
.drawer__btn.active span:nth-child(1) {
  transform: translate(-50%, 0) rotate(45deg);
}
.drawer__btn.active span:nth-child(2) {
  transform: translate(100%, 0);
  opacity: 0;
}
.drawer__btn.active span:nth-child(3) {
  transform: translate(-50%, 0) rotate(-45deg);
}
.drawer__menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99;
  width: 75vw;
  height: 100vh;
  padding: 2rem 0;
  overflow-y: auto;
  background-color: #000;
  transition: 0.3s;
  transform: translateX(100%);
  opacity: 0;
}

.drawer__menu.active {
  transform: translateX(0);
  opacity: 1;
}
.drawer__bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 98;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.395);
  transition: 0.3s;
  transform: translateX(100%);
  opacity: 0;
  cursor: pointer;
}
.drawer__bg.active {
  transform: translateX(0);
  opacity: .7;
}
.drawer__menu a.contents {
  color: #fff;
  font-size: 2rem;
  text-align: center;
  width: 48%;
  padding: 2rem;
  border: 3px solid #fff;
  margin-bottom: 2rem;
  margin-left: 2rem;
}


.btn-container {
  margin-bottom: 5rem;
}
.btn-container .sp {
  display: block;
}
.btn-container .pc {
  display: none;
}
@media screen and (min-width: 769px){
  .btn-container .sp {
    display: none;
  }
  .btn-container .pc {
    display: block;
  }
}

.btn-container a {
  display: block;
  color: #fff;
  background: #DCE35B;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #45cc15, #1c8b20);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #45cc15, #1c8b20); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  border-bottom: 16px solid #056b1b;
  border-radius: 3px;
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
@media screen and (min-width: 769px){
  .btn-container a {
    font-size: 3.5rem;
    padding: 2.5rem;
  }
}
  
.btn-container a:hover {
  color: #fff;
  margin-top: 9px;
  border-bottom: 8px solid #056b1b;
  transition: .5s;
}

.btn-container a::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -20%;
    width: 40px;
    height: 100%;
    transform: scale(2) rotate(20deg);
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .5) 100%, rgba(255, 255, 255, 0) 0%);
    
    /* アニメーション */
    animation-name: shiny;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes shiny {
  0% { left: -20%; }
  20% { left: 140%; }
  100% { left: 140%; }
}
#btn-fixed {
  padding: 0 5%;
  width: 100%;
  position: fixed;
  bottom: 10px;
}
#btn-fixed .btn-container {
  margin-bottom: 0;
}
#btn-fixed .btn-container a {
  font-size: 2rem;
}
@media screen and (min-width: 769px){
  #btn-fixed {
      padding: 0;
      width: 180px;
      position: fixed;
      right: 20px;
      bottom: 20px;
  }
} 
#btn-fixed.btnF {
  opacity: 1;
  transition: 1s;
}
#btn-fixed.btnF.none {
  opacity: 0;
  transition: 1s;
}