@charset "UTF-8";

:root {

  --sp: 360px;
  --spLarge: 480px;
  --tablet: 768px;
  --tabletLarge: 1024px;
  --pc: 1340px;
  --pcLarge: 1200px;

  --baseWidth: 1340px;
  --contentsWidth: 804px;
  --sideWidth: 500px;


  --colorBlack: #333333;
  --colorLightBlack: #555555;
  --colorGray: #cccccc;
  --colorLightGray: #eee;
  --colorPaleGray: #f3f3f3;
  
  --colorGold: #C69934;


  --colorDarkBase: #171A17;
  --colorLightBase: #268C1A;
  --colorPaleBase: #AFE4ED;

  --colorAccent: #DB3434;
  --colorPaleAccent: #FFD9D9;

  --colorSubAccent: #FF6D03;
  --colorPaleSubAccent: #FFEBDD;

  --colorSubAccent2: #8FC31F;
  --colorPaleSubAccent2: #E2F6B7;
}

html body.body{
  
  .relative{
      position:relative;
  }

  .w-8em{
    width: 8em;
  }
  .text-base{
    margin-bottom: 1em;
  }
  .text-underline{
    text-decoration: underline;
  }
  .text-underline:hover{
    text-decoration: none;
  }

  .font_mincho{
      font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝",sans-serif;
  }

  .bold{
      font-weight:bold;
  }

  .align-center{
      text-align: center;
  }
  .align-left{
      text-align: left;
  }

  .flex-start{
      display: flex;
      justify-content: flex-start;
  }
  .flex-center{
      display: flex;
      justify-content: center;
  }
  .flex-end{
      display: flex;
      justify-content: flex-end;
  }
  .flex-between{
      display: flex;
      justify-content: space-between;
  }
  .flex-align-start{
      display: flex;
      align-items: flex-start;
  }
  .flex-align-center{
      display: flex;
      align-items: center;
  }
  .gap20{
      gap:20px;
  }

  .pt-5px{
    padding-top: 5px;
  }
  .pt-10px{
    padding-top: 10px;
  }
  .pt-3per{
    padding-top: 3%;
  }
  @media screen and (min-width: 769px) {
    .pc-pt-3per{
      padding-top: 3%;
    }
  }

  .pr-3per{
    padding-right: 3%;
  }

  .ml-5px{
    margin-left: 5px;
  }
  .ml-10px{
    margin-left: 10px;
  }
  .mt-10px{
    margin-top: 10px;
  }
 
  .mt-2per{
    margin-top: 2%;
  }
  .mt-3per{
    margin-top: 3%;
  }
  .mt-5per{
    margin-top: 5%;
  }
  .mb-0{
    margin-bottom: 0!important;
  }
  .mb-2per{
    margin-bottom: 2%;
  }
  .mb-3per{
    margin-bottom: 3%;
  }
  .mb-4per{
    margin-bottom: 4%;
  }
  .mb-5per{
    margin-bottom: 5%;
  }
  .mb-8per{
    margin-bottom: 8%;
  }
  .mb-10per{
    margin-bottom: 10%;
  }
  .mt-8per{
    margin-top: 8%;
  }
  .mt-10per{
    margin-top: 10%;
  }
  .mr-10px{
    margin-right: 10px;
  }
  .mr-20px{
    margin-right: 20px;
  }
  .mr-3per{
    margin-right: 3%;
  }
  .mr-5per{
    margin-right: 5%;
  }

  .min-width-100px{
    min-width: 100px;
  }

}