.bg1 {
	background-image: url(https://9383.jp/file/up/2-NMN_page1.png);
	background-repeat: no-repeat;
	background-size: 100%,100%;
	background-position:top,top;
	height: 892px;
}
.bg2 {
	background-image: url(https://9383.jp/file/up/2-NMN_page2.png);
	background-repeat: no-repeat;
	background-size: 100%,100%;
	background-position:top,top;
	height: 966px;
}
.bg3 {
	background-image: url(https://9383.jp/file/up/2-NMN_page3.png);
	background-repeat: no-repeat;
	background-size: 100%,100%;
	background-position:top,top;
	height: 970px;
}
.bg4 {
	background-image: url(https://9383.jp/file/up/2-NMN_page4.png);
	background-repeat: no-repeat;
	background-size: 100%,100%;
	background-position:top,top;
	height: 961px;
}
.bg5 {
	background-image: url(https://9383.jp/file/up/2-NMN_page5.png);
	background-repeat: no-repeat;
	background-size: 100%,100%;
	background-position:top,top;
	height: 679px;
}
.bg6 {
	background-image: url(https://9383.jp/file/up/2-NMN_page6.png);
	background-repeat: no-repeat;
	background-size: 100%,100%;
	background-position:top,top;
	height: 1028px;
}
.bg7 {
	background-image: url(https://9383.jp/file/up/2-NMN_page7.png);
	background-repeat: no-repeat;
	background-size: 100%,100%;
	background-position:top,top;
	height: 948px;
}
.bg8 {
	background-image: url(https://9383.jp/file/up/2-NMN_page8.png);
	background-repeat: no-repeat;
	background-size: 100%,100%;
	background-position:top,top;
	height: 927px;
}
.bg9 {
	background-image: url(https://9383.jp/file/up/2-NMN_page9.png);
	background-repeat: no-repeat;
	background-size: 100%,100%;
	background-position:top,top;
	height: 600px;
}
.main1 {
	font-size:24px;
	padding:80px 0 0 40px;
	line-height:1.3;
	font-weight:bold;
}


.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}

.button.before {
  position: relative;
  border: 1px solid #0360df;
  border-radius: 50px;
  padding: 8px 16px;
  min-width: 8em;
  background-color: #0360df;
  background-image:
    radial-gradient(75% 50% at 50% 0%, #f4feff, transparent),
    radial-gradient(75% 35% at 50% 85%, #8de3fc, transparent);
  box-shadow:
    inset 0 -2px 4px 1px rgba(17, 110, 231, .6),
    inset 0 -4px 4px 1px rgba(141, 227, 252, 1),
    inset 0 0 2px 1px rgba(255, 255, 255, .2),
    0 1px 4px 1px rgba(17, 110, 231, .2),
    0 1px 4px 1px rgba(0, 0, 0, .1);
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 1px #116ee7;
  transition-property: border-color, transform, background-color;
  transition-duration: .2s;
  
  &::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50px;
    width: 80%;
    height: 40%;
    background-image: linear-gradient(to bottom, #f4feff, transparent);
    opacity: .75;
  }
  
  &:hover {
    transform: scale(1.04);
  }
  
  &:active {
    border-color: #0048d5;
    transform: scale(.96);
    background-color: #0048d5;
  }
}

.button.after {
  position: relative;
  z-index: 0;
  border: 1px solid #3247cf;
  border-radius: 8px;
  padding: 30px 200px;
  min-width: 8em;
  background-image: linear-gradient(180deg, #4098ff, #4058ff 62%, #4075ff);
  box-shadow: 
    inset 0 1px 0px rgba(255, 255, 255, .2),
    inset 0 -1px 0px rgba(0, 0, 0, .2),
    0 1px 2px rgba(0, 0, 0, .2);
  font-family: 'Roobert', sans-serif;
  font-weight: 500;
  text-align: center;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 1px rgba(0, 0, 0, .2);
  transition-property: border-color, transform;
  transition-duration: .2s;
  will-change: transform;
  
  @media (hover: hover) {
    &:hover {
      transform: scale(1.04);
    }
  }
  
  &:active {
    border-color: #192ba1;
    transform: scale(.98);
  }
  
  &::before,
  &::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: 7px;
    opacity: 0;
    transition-property: opacity;
    transition-duration: .2s;
  }

  &::before {
    background-image: linear-gradient(180deg,#40a6ff,#4058ff 62%,#4075ff);
    box-shadow: (
      inset 0 1px 0px rgba(255, 255, 255, .2),
      inset 0 -1px 0px rgba(0, 0, 0, .2),
    );
    
    @media (hover: hover) {    
      @at-root .button.after:hover::before {
        opacity: 1;
      }
    }
  }
  
  &::after {
    background-image: linear-gradient(180deg, #0a40ce, #4058ff 38%, #40a0ff);
    box-shadow: inset 0 1px 1px #0b1c95;
    
    @at-root .button.after:active::after {
      opacity: 1;
    }
  }
}