/*------------------------------
theme name: base
version: 250820
author: yamabatosha
author uri: https://yamabatosha.com
------------------------------*/

/*------------------------------
base
------------------------------*/
html {font-size: 16px; overflow-x: hidden;}
.center {text-align: center!important;}
::selection {background: #6a93b7; color: #f8f8f0;}
* {outline: none;}
/*------------------------------
font
------------------------------*/
.bold {font-weight: 500;}
.sm {font-size: 0.813em;}
.lg {font-size: clamp(0.813rem, 0.699rem + 0.57vw, 1.125rem);} /* 13px-18px */
.indent {padding-left: 1.1em; text-indent: -1.1em;}
.mt0 {margin-top: 0!important;}
.mt1 {margin-top: 1em!important;}
.mt2 {margin-top: 2.5em!important;}
.pt0 {padding-top: 0!important;}
/*------------------------------
grid
------------------------------*/
.col-center, .col-2, .col-3, .col-1-2, .col-2-1 {
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 40px 0;
  margin-top: 2rem;
  align-items: start;
}

.col-2.annai {
  grid-template-columns: repeat(2, 1fr); grid-gap: 20px;
}

.col-3 {
  grid-template-columns: 90%;
  justify-content: center;
}

.col-3.intro {
  grid-template-columns: repeat(3, 1fr); grid-gap: 20px;
}

.align-center {
  align-items: center;
}

.align-end {
  align-items: end;
}

/* min-width 768px
------------------------------*/
@media (min-width: 768px) {
  .col-2 {
    grid-template-columns: repeat(2, 1fr); grid-gap: 40px;
  }
  .col-3 {
    grid-template-columns: repeat(3, 1fr); grid-gap: 40px;
  }
  .col-1-2 {
    grid-template-columns: 1fr 2fr;
  }
  .col-3.intro,
  .col-2.annai {
    grid-gap: 60px;
  }
  .order-1 {order: 1;}
  .order-2 {order: 2;}
}

/* min-width 1024px
------------------------------*/
@media (min-width: 1024px) {
  .col-center, .col-2, .col-3, .col-1-2, .col-2-1 {
    grid-gap: 2.5em 5em;
    margin-top: 4em;
  }
  .col-center {
    grid-template-columns: min(900px, 100%);
    justify-content: center;
  }
  .col-2 {grid-template-columns: repeat(2, 1fr);}
  .col-3 {grid-template-columns: repeat(3, 1fr); grid-gap: 56px;}
  .col-1-2 {grid-template-columns: 1fr 2fr;}
  .col-2-1 {grid-template-columns: 2fr 1fr;}

  .col-3.intro {
    grid-gap: 120px;
  }
}