/* CSS Document */
:root {
  --base-bg-color: #FAFAFA;
  --main-bg-color: #215F9A;
  --secondary-bg-color: #FF0000;
  --tertiary-bg-color: #FFFF00;
  --accent-bg-color: #61CBF4;
  --sub-bg-color: #B88C00;
  --sub-bg-color-2: #FFC000;
  --lightgreen-bg-color: #B4E5A2;
  --pink-bg-color: #D86ECC;
  --green-bg-color: #8FC31F;
  --green-bg-color-2: #47D45A;
  --base-text-color: #1A1A1A;
  --main-text-color: #215F9A;
  --secondary-text-color: #FF0000;
  --tertiary-text-color: #FFFF00;
  --accent-text-color: #61CBF4;
  --sub-text-color: #B88C00;
  --sub-text-color-2: #FFC000;
  --lightgreen-text-color: #B4E5A2;
  --pink-text-color: #D86ECC;
  --green-text-color: #8FC31F;
  --green-text-color-2: #47D45A;
}
.shop-nav {
  color: var(--main-text-color);
  background-color: var(--accent-bg-color);
}
.shop-nav:hover {
  color: var(--tertiary-text-color);
  background-color: var(--main-bg-color);
}
.main-bg-color {
  background: var(--main-bg-color);
}
.main-text-color {
  color: var(--main-text-color);
}
.secondary-bg-color {
  background: var(--secondary-bg-color);
}
.secondary-text-color {
  color: var(--secondary-text-color);
}
.green-bg-color {
  background: var(--green-bg-color);
}
.green-text-color {
  color: var(--green-bg-color);
}
.sub-bg-color-2 {
  background: var(--sub-bg-color-2);
}
.sub-text-color-2 {
  color: var(--sub-bg-color-2);
}
.green-bg-color-2 {
  background: var(--green-bg-color);
}
.green-text-color-2 {
  color: var(--green-bg-color);
}
/*
html {
  font-size: calc(62.5% * 2);
}
*/

body {
  color: var(--base-text-color);
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight:400;
  font-style: normal;
}
.bg-grad {
  background: rgb(250,250,250);
  background: linear-gradient(360deg, rgba(136,216,247,1) 0%, rgba(250,250,250,1) 70%, rgba(250,250,250,1) 100%);
}
.bg-all {
  background: rgb(250,250,250);
  background: linear-gradient(360deg, rgba(136,216,247,1) 0%, rgba(250,250,250,1) 20%, rgba(250,250,250,1) 50%);
}
h1 {
  font-size: 2.986rem;
}
h2 {
  font-size: 2.488rem;
}
h3 {
  font-size: 2.074rem;
}
h4 {
  font-size: 1.728rem;
}
h5 {
  font-size: 1.44rem;
}
h6 {
  font-size: 1.2rem;
}
p {
  font-size: 1rem;
}
small {
  font-size: 0.833rem;
}
small.small {
  font-size: 0.694rem;
}
footer h6 {
  font-size: 0.694rem;
}
footer p {
  font-size:  0.833rem;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
a {
  position: relative;
}
a.nav-link:after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: 20px; /*アンダーラインが現れ始める位置（aタグの下辺からの高さ）*/
opacity: 0;
visibility: hidden;
transition: 0.3s;
}
a.nav-link:hover::after {
visibility: visible;
bottom: 0.2rem; /*アニメーションが止まる位置*/
opacity: 1;
}

.mask-custom {
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, .15);
}

.mask-custom-black {
  backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, .095);
}

.mask-custom-top {
  backdrop-filter: blur(4px);
  background-color: rgba(255, 255, 255, .005);
}
.card-lenz {
  border-left: 1rem solid var(--sub-bg-color);
}
/* Icon 1 */

.animated-icon1 {
width: 30px;
height: 2px;
position: relative;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}

.animated-icon1 span {
display: block;
position: absolute;
height: 1px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}

.animated-icon1 span {
background: #2d7ef7;
}

.animated-icon1 span:nth-child(1) {
top: 0px;
}

.animated-icon1 span:nth-child(2) {
top: 10px;
}

.animated-icon1 span:nth-child(3) {
top: 20px;
}

.animated-icon1.open span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}

.animated-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}

.animated-icon1.open span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.bg-green {
  background: rgba(87,221,96,1.00);
}
.card-top-page-green {
  border: 0.1rem solid rgba(87,221,96,1.00);
  .card-title {
    color: var(--sub-text-color);
  }
  h6 {
    span.line-yellow {
      background:-webkit-linear-gradient(transparent 60%, var(--tertiary-bg-color) 60%);
      background:-o-linear-gradient(transparent 60%, var(--tertiary-bg-color) 60%);
      background:linear-gradient(transparent 60%, var(--tertiary-bg-color) 60%); 
    }
    span.line-green {
      background:-webkit-linear-gradient(transparent 60%, var(--green-bg-color) 60%);
      background:-o-linear-gradient(transparent 60%, var(--green-bg-color) 60%);
      background:linear-gradient(transparent 60%, var(--green-bg-color) 60%); 
    }
    span.line-pink {
      background:-webkit-linear-gradient(transparent 60%, var(--pink-bg-color) 60%);
      background:-o-linear-gradient(transparent 60%, var(--pink-bg-color) 60%);
      background:linear-gradient(transparent 60%, var(--pink-bg-color) 60%); 
    }
  }
}
.card-top-page-white {
  border: 0.1rem solid rgba(255,255,255,1.00);
  .card-title {
    color: var(--sub-text-color);
  }
  h6 {
    span.line-yellow {
      background:-webkit-linear-gradient(transparent 60%, var(--tertiary-bg-color) 60%);
      background:-o-linear-gradient(transparent 60%, var(--tertiary-bg-color) 60%);
      background:linear-gradient(transparent 60%, var(--tertiary-bg-color) 60%); 
    }
    span.line-green {
      background:-webkit-linear-gradient(transparent 60%, var(--green-bg-color) 60%);
      background:-o-linear-gradient(transparent 60%, var(--green-bg-color) 60%);
      background:linear-gradient(transparent 60%, var(--green-bg-color) 60%); 
    }
    span.line-pink {
      background:-webkit-linear-gradient(transparent 60%, var(--pink-bg-color) 60%);
      background:-o-linear-gradient(transparent 60%, var(--pink-bg-color) 60%);
      background:linear-gradient(transparent 60%, var(--pink-bg-color) 60%); 
    }
  }
}

h3 {
  font-weight: lighter;
  text-transform: uppercase;
}

@media screen and (min-width: 575.98px) {
  h3 {
    letter-spacing: .0rem;
    transform: scale( 0.75, 0.855);  
  }
}
@media screen and (min-width: 767.98px) {
  h3 {
    letter-spacing: .0rem;
    transform: scale( 0.75, 0.855);  
  }
}
@media screen and (min-width: 991.98px) {
  h3 {
    letter-spacing: .0rem;
    transform: scale( 0.75, 0.855);  
  }
}
@media screen and (min-width: 1199.98px) {
  h3 {
    letter-spacing: .50rem;
    transform: scale( 1.15, 1.25); 
  }
}
@media screen and (min-width: 1399.98px) {
  h3 {
    letter-spacing: .50rem;
    transform: scale( 1.15, 1.25); 
  }
}
.under-yellow {
  color: #FFFFFF;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .5rem;
  background-color: #222222;
  border-bottom: 0.5em solid var(--sub-bg-color);
  margin-top: 1.0rem
}
.under-pink {
  color: #FFFFFF;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .5rem;
  background-color: #222222;
  border-bottom: 0.5em solid var(--pink-bg-color);
  margin-top: 1.0rem
}
.under-red {
  color: #FFFFFF;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .5rem;
  background-color: #222222;
  border-bottom: 0.5em solid var(--secondary-bg-color);
  margin-top: 1.0rem
}
.under-aqua {
  color: #FFFFFF;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .5rem;
  background-color: #222222;
  border-bottom: 0.5em solid var(--accent-bg-color);
  margin-top: 1.0rem
}
.under-aqua-sm {
  color: #FFFFFF;
  font-weight: bold;
  text-transform: uppercase;
  background-color: #222222;
  border-bottom: 0.25em solid var(--accent-bg-color);
}
.under-line {
  width: 100%;
  border-bottom: solid 0.05rem var(--base-text-color);
  padding-bottom: 0.5rem;
}
.under-line-yellow {
  color: var(--base-text-color);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .5rem;
  border-bottom: 0.5em solid var(--sub-bg-color);
  margin-top: 0.5rem;
}
.under-line-yellow-2 {
  color: var(--base-text-color);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: -0.05rem;
  border-bottom: 0.5em solid var(--sub-bg-color-2);
  transform: scale( 1.00, 1.50);
}
.midashi-red {
  color: var(--secondary-text-color);
  transform: scale( 0.25, 0.85);  
}
.midashi-blue {
  color: var(--main-text-color);
  transform: scale( 0.25, 0.85);  
}
.midashi-yellow {
  color: var(--sub-text-color);
  transform: scale( 0.25, 0.85);  
}
.midashi-yellow-2 {
  color: var(--sub-text-color-2);
  transform: scale( 0.25, 0.85);  
}
.midashi-black {
  color: var(--base-text-color);
  transform: scale( 0.25, 0.85);  
}
.shape-easy {
  background-color: rgba(255,255,255,.5);
}
.bg-nothing {
  background-color: rgba(255,105,212,0.0);
}