* {
  font-family: 'Noto Sans';
}

body {
  position: relative;
}

body.no-scroll {
  overflow: hidden;
}

/* Header */

header.main {
  position: relative;
}

header.main > .content {
  padding: 1.0vw;
}

header.main > .content > h1 {
  width: 33.3333vw;
  margin: 0 auto;
}

header#header-fixed {
  background-color: rgba( 255, 255, 255, 0.5 );
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 11;
}

/* Global Menu */

#global-menu {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate( -50%, -50% );
}

#global-menu > label > img {
  width: 8vw;
}

#menu {
  background-color: #e8f3f9;
  font-size: 6.0vw;
  overflow: scroll;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
}

#menu > nav {
  margin: 10vh 0;
  padding: 0 20vw;
  display: flex;
  flex-direction: column;
}

#menu > .bottom {
  text-align: center;
  border-top: 0.5vw solid #333;
  padding-top: 4vw;
}

#menu > .close {
  position: absolute;
  top: 5vw;
  right: 5vw;
}

#menu > .close::before {
  background-color: #333;
  mask-image: url( 'data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M6.2253%204.81108c-.39053-.39052-1.02369-.39052-1.41422%200-.39052.39053-.39052%201.02369%200%201.41422L10.5858%2012l-5.77466%205.7747c-.39052.3905-.39052%201.0237%200%201.4142.39053.3905%201.02369.3905%201.41421%200L12%2013.4142l5.7747%205.7747c.3905.3905%201.0237.3905%201.4142%200%20.3905-.3905.3905-1.0237%200-1.4142L13.4142%2012l5.7748-5.7747c.3905-.39053.3905-1.02369%200-1.41422-.3905-.39052-1.0237-.39052-1.4142%200L12%2010.5858%206.2253%204.81108Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E' );
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url( 'data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M6.2253%204.81108c-.39053-.39052-1.02369-.39052-1.41422%200-.39052.39053-.39052%201.02369%200%201.41422L10.5858%2012l-5.77466%205.7747c-.39052.3905-.39052%201.0237%200%201.4142.39053.3905%201.02369.3905%201.41421%200L12%2013.4142l5.7747%205.7747c.3905.3905%201.0237.3905%201.4142%200%20.3905-.3905.3905-1.0237%200-1.4142L13.4142%2012l5.7748-5.7747c.3905-.39053.3905-1.02369%200-1.41422-.3905-.39052-1.0237-.39052-1.4142%200L12%2010.5858%206.2253%204.81108Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E' );
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  width: 5vw;
  aspect-ratio: 1 / 1;
  display: block;
  content: '';
}

/* Section */

div.section {
  margin-top: 1.0vw;
}

div.section > .content > img {
  width: 100%;
}

/* Main Visual */

#main-visual > img {
  width: 100%;
}

/* Column 01 */

div.section.cta-01 {
  margin-top: 0;
}

div.section.cta-01 > .content {
  background-image: url( '../images/cta/01/background.png' );
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 2.0vw;
  padding-bottom: 3.0vw;
}

/* Column 02 */

#column-02 > .content {
  margin: 3vw;
}

/* Column 03 */

#column-03 > .header > img {
  width: 100%;
}

#column-03 > .content {
  background-color: #fff;
  background-image: linear-gradient( 90deg, rgba( 236, 241, 253, .5 ) 50%, transparent 50% ),
                    linear-gradient( rgba( 241, 245, 253, .5 ) 50%, transparent 50% );
  background-size: 5.0vw 5.0vw;
  padding: 5.0vw 3.0vw;
}

#column-03 > .content > .things > img {
  width: 100%;
}

#column-03 > .content > .available_banks {
  margin: 0 7.0vw;
  margin-top: -5.0vw;
}

#column-03 > .content > .available_banks > .header > img {
  width: 64.0vw;
}

#column-03 > .content > .available_banks > .list {
  position: relative;
  cursor: pointer;
}

#column-03 > .content > .available_banks > .list > img {
  width: 100%;
}

#column-03 > .content > .available_banks > .list > .hand_cursor {
  background-image: url( '../images/columns/03/available_banks/hand_cursor.png' );
  background-size: contain;
  background-repeat: no-repeat;
  width: 16.0vw;
  aspect-ratio: 215 / 266;
  position: absolute;
  right: -11%;
  top: 67%;
  z-index: 10;
}

#column-03 > .content > .available_banks > .text {
  margin-top: 1.0vw;
}

#column-03 > .content > .available_banks > .text > img { 
  width: 68.0vw;
}

/* Column 04 */

#column-04 > .header {
  width: 95.0vw;
  margin: 0 auto;
}

#column-04 > .header > .top {
  margin-left: -1.5vw;
}

#column-04 > .header > :is( .top, .bottom ) > img {
  width: 100%;
}

#column-04 > .content {
  width: 95.0vw;
  margin: 0 auto;
  border: 1.0vw solid #00b900;
  border-top-width: 0;
}

#column-04 > .content > .screenshots {
  padding: 2.0vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2.0vw;
}

#column-04 > .content > .screenshots > .item {
  /*border: 1px solid #ddd;*/
  box-sizing: border-box;
  flex-basis: calc( ( 100% - ( 2.0vw * 1) ) / 2 );
}

#column-04 > .content > .screenshots > .item > img {
  width: 100%;
}

#column-04 > .content > .cta-01 {
  margin-top: 3.0vw;
  margin-bottom: 2.0vw;
}

/* Column 05 */

#column-05 {
  margin-top: 5.0vw;
}

/* Column 06 */



/* Footer */

#footer {
  background-image: url( '../images/footer/background.png' );
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  padding-top: 2.0vw;
  padding-bottom: 3.0vw;
}

#footer #signature {
  width: 35vw;
  margin: 0 auto;
  padding: 4.0vw 0;
  display: block;
}

/* CTA-01 */

.cta-01 .header {
  width: 87.0vw;
  margin: 0 auto;
}

.cta-01 .header > img {
  width: 100%;
}

.cta-01 .button {
  width: 80.0vw;
  margin: 0 auto;
}

.cta-01 .button > a {
  width: 100%;
  margin-right: -6.0vw;
  display: block;
}

.cta-01 .button > a > img {
  width: 100%;
}

.cta-01 .caution {
  width: 65.0vw;
  margin: 0 auto;
}

.cta-01 .caution > img {
  width: 100%;
}

/* CTA-02 */

.cta-02 {
  margin: 5.0vw 0;
}

.cta-02 .header {
  width: 64.0vw;
  margin-left: 7.0vw;
}

.cta-02 .header > img {
  width: 100%;
}

.cta-02 .button {
  width: 90.0vw;
  margin: 0 auto;
  margin-top: 1.0vw;
}

.cta-02 .button > a {
  display: block;
}

.cta-02 .button > a > img {
  width: 100%;
}

/* CTA Button */

.cta-ponyo {
  animation-name: cta;
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
}

@keyframes cta {
  0% {
    transform: scale( 100% );
  }
  20% {
    transform: scale( 115% );
  }
  25% {
    transform: scale( 100% );
  }
  35% {
    transform: scale( 105% );
  }
  40% {
    transform: scale( 100% );
  }
}

/* Modal */

.modal-box {
  width: 90vw;
  height: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50% );
  z-index: 9999;
}

.modal-box > .header {
  min-height: 1.5em;
  position: relative;
}

.modal-box > .header > .close {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate( -50%, -50% );
}

.modal-box > .header > .close::before {
  background-color: #eee;
  mask-image: url( 'data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M6.2253%204.81108c-.39053-.39052-1.02369-.39052-1.41422%200-.39052.39053-.39052%201.02369%200%201.41422L10.5858%2012l-5.77466%205.7747c-.39052.3905-.39052%201.0237%200%201.4142.39053.3905%201.02369.3905%201.41421%200L12%2013.4142l5.7747%205.7747c.3905.3905%201.0237.3905%201.4142%200%20.3905-.3905.3905-1.0237%200-1.4142L13.4142%2012l5.7748-5.7747c.3905-.39053.3905-1.02369%200-1.41422-.3905-.39052-1.0237-.39052-1.4142%200L12%2010.5858%206.2253%204.81108Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E' );
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url( 'data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M6.2253%204.81108c-.39053-.39052-1.02369-.39052-1.41422%200-.39052.39053-.39052%201.02369%200%201.41422L10.5858%2012l-5.77466%205.7747c-.39052.3905-.39052%201.0237%200%201.4142.39053.3905%201.02369.3905%201.41421%200L12%2013.4142l5.7747%205.7747c.3905.3905%201.0237.3905%201.4142%200%20.3905-.3905.3905-1.0237%200-1.4142L13.4142%2012l5.7748-5.7747c.3905-.39053.3905-1.02369%200-1.41422-.3905-.39052-1.0237-.39052-1.4142%200L12%2010.5858%206.2253%204.81108Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E' );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  width: 1em;
  aspect-ratio: 1 / 1;
  display: block;
  content: '';
}

.modal-box > .content > .preview > img {
  max-width: 100%;
  max-height: 80vh;
  margin: 0 auto;
}

@media ( orientation: landscape ) {

  .modal-box {
    width: auto;
    height: 90vh;
  }

}

/* Overlay */

.overlay {
  background-color: rgba( 0, 0, 0, 0.4 );
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9900;
}