@charset "utf-8";


.btn01 a {
    background:#000;
    border-radius: 50px;
    position:relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin:0 auto 25px;
    width:60%;
    padding: 10px 25px;
    color: #fff;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    z-index:1;
    font-size:11px;
}

@media screen and (min-width: 768px)
{
    .btn01 a {
        width:180px;
}
}

@media screen and (min-width: 992px),
    print {
    .btn01 a {
}
}


.btn01 a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}

@media screen and (min-width:768px),
    print {
     .btn01 a:after {
  right: 1rem;
}   
}


.btn01 a:hover {
  background:#DAC6C6;
  color: #FFF;
}

.btn02 a {
    background:#000;
    border-radius: 50px;
    position:relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin:0 auto 25px;
    width:60%;
    padding: 10px 25px;
    color: #fff;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    z-index:1;
    font-size:11px;
}

@media screen and (min-width: 768px)
{
    .btn02 a {
        width:180px;
}
}

@media screen and (min-width: 992px),
    print {
    .btn02 a {
        margin-bottom: 40px;
}
}


.btn02 a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}

@media screen and (min-width:768px),
    print {
     .btn02 a:after {
  right: 1rem;
}   
}


.btn02 a:hover {
  background:#DAC6C6;
  color: #FFF;
}

/*
+++++++++++++++++++++++++++++++

↓ここから旧css

+++++++++++++++++++++++++++++++
*/

.button01 a {
    background:#000;
    border-radius: 50px;
    position:absolute;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin:0 auto;
    width:60%;
    padding: 10px 25px;
    color: #fff;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    z-index:1;
    bottom:130px;
    left:0;
    right:0;
    font-size:11px;
}

@media screen and (min-width: 768px)
{
    .button01 a {
    margin:0 0 30px;
        bottom:220px;
    left:20px;
    right:auto;
        width:180px;
}
}

@media screen and (min-width:992px),
    print {
    .button01 a {
    margin:0 0 30px;
        bottom:300px;
    left:90px;
    right:auto;
}
}


.button01 a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}

@media screen and (min-width:768px),
    print {
     .button01 a:after {
  right: 1rem;
}   
}


.button01 a:hover {
  background:#DAC6C6;
  color: #FFF;
}
.button01 a:hover:after {
  right: 1.4rem;
}

.button02 a {
    background:#000;
    border-radius: 50px;
    position:relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin:0 auto;
    width:60%;
    padding: 10px 25px;
    color: #fff;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    z-index:1;
    font-size:11px;
}

@media screen and (min-width: 768px)
{
    .button02 a {
    margin:0 0 0 70px;
        width:180px;
}
}

@media screen and (min-width: 992px),
    print {
    .button02 a {
    margin:0 0 0 100px;
}
}


.button02 a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}

@media screen and (min-width:768px),
    print {
     .button02 a:after {
  right: 1rem;
}   
}


.button02 a:hover {
  background:#DAC6C6;
  color: #FFF;
}
.button02 a:hover:after {
  right: 1.4rem;
}


.btn-con{
		margin-bottom:70px;


		
}

@media screen and (min-width:768px),
print {
    .btn-con{
		max-width: 1000px;
		margin:0 auto 110px;
		display: flex;

		
}
}


.button03 a {
    background:#000;
    border-radius: 50px;
    position:relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin:0 auto 25px;
    width:60%;
    padding: 10px 25px;
    color: #fff;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    z-index:1;
    font-size:11px;
}

@media screen and (min-width: 768px)
{
    .button03 a {
        width:180px;
}
}

@media screen and (min-width: 992px),
    print {
    .button03 a {
}
}


.button03 a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}

@media screen and (min-width:768px),
    print {
     .button03 a:after {
  right: 1rem;
}   
}


.button03 a:hover {
  background:#DAC6C6;
  color: #FFF;
}
.button03 a:hover:after {
  right: 1.4rem;
}


/*
++++++++++++++++++++++++++++++++++++++++

@media screen and (min-width: 992px),
print {
    
}

@media screen and (min-width: 768px) and (max-width:991px)
{
}

++++++++++++++++++++++++++++++++++++++++
*/