@charset "utf-8";



/*! destyle.css v3.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after{
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}
/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html{
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -webkit-tap-highlight-color: transparent;
  /* 3*/
}
/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body{
  margin: 0;
}
/**
 * Render the `main` element consistently in IE.
 */
main{
  display: block;
}
/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl{
  margin: 0;
}
/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6{
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}
/* Lists (enumeration) */
/* ============================================ */
ul,
ol{
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Lists (definition) */
/* ============================================ */
dt{
  font-weight: bold;
}
dd{
  margin-left: 0;
}
/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr{
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre{
  font-family: monospace, monospace;
  /* 1 */
  font-size: inherit;
  /* 2 */
}
address{
  font-style: inherit;
}
/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a{
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title]{
  text-decoration: underline dotted;
  /* 2 */
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong{
  font-weight: bolder;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp{
  font-family: monospace, monospace;
  /* 1 */
  font-size: inherit;
  /* 2 */
}
/**
 * Add the correct font size in all browsers.
 */
small{
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup{
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub{
  bottom: -0.25em;
}
sup{
  top: -0.5em;
}
/* Replaced content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
svg,
img,
embed,
object,
iframe{
  vertical-align: bottom;
}
/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */
button,
input,
optgroup,
select,
textarea{
  -webkit-appearance: none;
  /* 1 */
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit;
  /* 2 */
}
/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */
[type="checkbox"]{
  -webkit-appearance: checkbox;
  appearance: checkbox;
}
[type="radio"]{
  -webkit-appearance: radio;
  appearance: radio;
}
/**
 * Correct cursors for clickable elements.
 */
button,
[type="button"],
[type="reset"],
[type="submit"]{
  cursor: pointer;
}
button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled{
  cursor: default;
}
/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */
:-moz-focusring{
  outline: auto;
}
select:disabled{
  opacity: inherit;
}
/**
 * Remove padding
 */
option{
  padding: 0;
}
/**
 * Reset to invisible
 */
fieldset{
  margin: 0;
  padding: 0;
  min-width: 0;
}
legend{
  padding: 0;
}
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress{
  vertical-align: baseline;
}
/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea{
  overflow: auto;
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button{
  height: auto;
}
/**
 * 1. Correct the outline style in Safari.
 */
[type="search"]{
  outline-offset: -2px;
  /* 1 */
}
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration{
  -webkit-appearance: none;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */
::-webkit-file-upload-button{
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}
/**
 * Clickable labels
 */
label[for]{
  cursor: pointer;
}
/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details{
  display: block;
}
/*
 * Add the correct display in all browsers.
 */
summary{
  display: list-item;
}
/*
 * Remove outline for editable content.
 */
[contenteditable]:focus{
  outline: auto;
}
/* Tables */
/* ============================================ */
/**
1. Correct table border color inheritance in all Chrome and Safari.
*/
table{
  border-color: inherit;
  /* 1 */
  border-collapse: collapse;
}
caption{
  text-align: left;
}
td,
th{
  vertical-align: top;
  padding: 0;
}
th{
  text-align: left;
  font-weight: bold;
}









/* ------------------------------ */
/* --------------- base --------------- */
/* ------------------------------ */


body{
  font-family: "Yu Gothic Medium", "Yu Gothic", YuGothic,"Hiragino Kaku Gothic ProN",  "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  /* 画面最大1920pxで文字18px、画面1440pxで文字16px、画面960pxあたりで文字14px */
  font-size: clamp(0.875rem, calc(0.625rem + 0.416667vw), 1.125rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.75;
  color: rgb(51, 51, 51, 1);
  font-kerning: normal;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: rgb(255, 255, 255, 1);
}
@media (max-width: 1023px){
  /* 画面1023pxで文字16px、画面400pxあたりで文字14px。PCとTabSPとでサイズを分けます */
  body{
    font-size: clamp(14px, calc(12.7159px + 0.3210vw), 16px);
  }
}

a{
  text-decoration: none;
  color: rgb(51, 51, 51, 1);
}
img,svg {
  width: 100%;
  height: auto;
  vertical-align: middle;
  box-sizing: border-box;
}
button{
  display: block;
  letter-spacing: 0.08em;
}
*,
*::before,
*::after {
  box-sizing: boder-box;
}
.block{
  display: block;
}
.ib {
  display: inline-block;
}
.pc-none{
  display: none;
}
.sp-only{
  display: none;
}
.contents-relative{
  position: relative;
  z-index: 1;
}
.fit{
  width: fit-content;
}

@media (max-width: 1023px){
  .pc-none{
    display: inherit;
  }
  .pc-only{
    display: none;
  }
}

@media (max-width: 767px){
  .sp-none{
    display: none;
  }
  .sp-only{
    display: inherit;
  }
}

@media (max-width: 375px) {
  .sp-none {
    display: none;
  }
  .sp-only {
    display: inherit;
  }
}



/* --------------- type --------------- */

/* font-size */
.txt-99{
  font-size: 5.5em;
  letter-spacing: 0.1em;
  line-height: 1.35;
}
.txt-81{
  font-size: 4.5em;
  letter-spacing: 0.1em;
  line-height: 1.35;
}
.txt-68{
  font-size: 3.75em;
  letter-spacing: 0.1em;
  line-height: 1.35;
}
.txt-59{
  font-size: 3.25em;
  letter-spacing: 0.1em;
  line-height: 1.4;
}
.txt-54{
  font-size: 3em;
  letter-spacing: 0.1em;
  line-height: 1.45;
}
.txt-50{
  font-size: 2.75em;
  letter-spacing: 0.1em;
  line-height: 1.45;
}
.txt-45{
  font-size: 2.5em;
  letter-spacing: 0.1em;
  line-height: 1.5;
}
.txt-40{
  font-size: 2.25em;
  letter-spacing: 0.1em;
  line-height: 1.5;
}
.txt-36{
  font-size: 2em;
  letter-spacing: 0.1em;
  line-height: 1.6;
}
.txt-32{
  font-size: 1.75em;
  letter-spacing: 0.1em;
  line-height: 1.6;
}
.txt-27{
  font-size: 1.5em;
  letter-spacing: 0.1em;
  line-height: 1.7;
}
.txt-23{
  font-size: 1.25em;
  letter-spacing: 0.1em;
  line-height: 1.7;
}
.txt-20{
  font-size: 1.11111em;
  letter-spacing: 0.1em;
}
.txt-16{
  font-size: 0.88889em;
  letter-spacing: 0.1em;
}
.txt-14{
  font-size: 0.77778em;
  letter-spacing: 0.1em;
}
.txt-12{
  font-size: 0.66667em;
  letter-spacing: 0.1em;
}


@media (max-width: 1023px){
  .txt-99{
    font-size: 3.42857em;
  }
  .txt-81{
    font-size: 2.85714em;
  }
  .txt-68{
    font-size: 2.42857em;
  }
  .txt-59{
    font-size: 2.14285em;
  }
  .txt-54{
    font-size: 1.92857em;
  }
  .txt-50{
    font-size: 1.78571em;
  }
  .txt-45{
    font-size: 1.64286em;
  }
  .txt-40{
    font-size: 1.57143em;
  }
  .txt-36{
    font-size: 1.42857em;
  }
  .txt-32{
    font-size: 1.28571em;
  }
  .txt-27{
    font-size: 1.21429em;
  }
  .txt-23{
    font-size: 1.14286em;
  }
  .txt-20{
    font-size: 1.07143em;
  }
  .txt-16{
    font-size: 0.92857em;
  }
  .txt-14{
    font-size: 0.85714em;
  }
  .txt-12{
    font-size: 0.71429em;
  }
}

.oswald-regular{
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
/* Variableフォントで細かくウェイトを設定できたので、太さをDINに近づけたものです。少し太くさせたい時に使う↓ */
.oswald-w430{
  font-family: "Oswald", sans-serif;
  font-weight: 430;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
/* 大文字の英語はこれを適用 */
.en-upper{
  text-transform: uppercase;
}
.txt-bold{
  font-weight: 600;
}
.txt-center{
  text-align: center;
}
.txt-left{
  text-align: left;
}
.txt-right{
  text-align: right;
}
.txt-just{
  text-align: justify;
}
.txt-vertical{
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.txt-underline{
  text-decoration: underline;
}
/* 文字間、行間 個別指定する際は下記を使う */
/* 文字間 */
.ls-0_2 {
  letter-spacing: 0.2em;
}
.ls-0_18{
  letter-spacing: 0.18em;
}
.ls-0_15{
  letter-spacing: 0.15em;
}
.ls-0_12{
  letter-spacing: 0.12em;
}
.ls-0_08{
  letter-spacing: 0.08em;
}
.ls-0_05{
  letter-spacing: 0.05em;
}
.ls-0_02{
  letter-spacing: 0.02em;
}
/* 行間 */
.lh-2_2{
  line-height: 2.2;
}
.lh-2_1{
  line-height: 2.1;
}
.lh-2{
  line-height: 2;
}
.lh-1_75{
  line-height: 1.75;
}
.lh-1_6{
  line-height: 1.6;
}
.lh-1_5{
  line-height: 1.5;
}
.lh-1_45{
  line-height: 1.45;
}
.lh-1_4{
  line-height: 1.4;
}
.lh-1_35{
  line-height: 1.35;
}
.lh-1_3{
  line-height: 1.3;
}



@media (max-width: 1023px){
}
@media (max-width: 767px){
}


/* --------------- wrap --------------- */
.wrap-1548{
  width: min(92%,86em);
  margin: 0 auto;
}
.wrap-1548-left{
  width: min(96%,calc((100vw - 86em) / 2 + 86em));
}
.wrap-1548-right{
  width: min(96%,calc((100vw - 86em) / 2 + 86em));
  margin-left: auto;
}
.wrap-1350{
  width: min(80.232562%,75em);
  margin: 0 auto;
}
.wrap-1350-left{
  width: min(90.116281%,calc((100vw - 75em) / 2 + 75em));
}
.wrap-1350-right{
  width: min(90.116281%,calc((100vw - 75em) / 2 + 75em));
  margin-left: auto;
}
.wrap-1152{
  width: min(68.465116%,64em);
  margin: 0 auto;
}
.wrap-954{
  width: min(56.69768%,53em);
  margin: 0 auto;
}

@media (max-width: 1023px){
  .wrap-1548,
  .wrap-1350,
  .wrap-1152,
  .wrap-954{
    width: min(90%,52em);
  }
  .wrap-1548-left,
  .wrap-1548-right,
  .wrap-1350-left,
  .wrap-1350-right{
    width: min(95%,calc((100vw - 52em) / 2 + 52em));
  }
}
@media (max-width: 767px){
  .wrap-1548,
  .wrap-1350,
  .wrap-1152,
  .wrap-954{
    width: min(90%,40em);
  }
  .wrap-1548-left,
  .wrap-1548-right,
  .wrap-1350-left,
  .wrap-1350-right{
    width: min(95%,calc((100vw - 40em) / 2 + 40em));
  }
}



/* --------------- space --------------- */
/* デフォルト文字サイズ(18)基準 */
.space-324{
  padding-top: 18em;
}
.space-324-bottom{
  padding-bottom: 18em;
}
.space-288{
  padding-top: 16em;
}
.space-288-bottom{
  padding-bottom: 16em;
}
.space-252{
  padding-top: 14em;
}
.space-252-bottom{
  padding-bottom: 14em;
}
.space-216{
  padding-top: 12em;
}
.space-216-bottom{
  padding-bottom: 12em;
}
.space-180{
  padding-top: 10em;
}
.space-180-bottom{
  padding-bottom: 10em;
}
.space-162{
  padding-top: 9em;
}
.space-162-bottom{
  padding-bottom: 9em;
}
.space-144{
  padding-top: 8em;
}
.space-144-bottom{
  padding-bottom: 8em;
}
.space-126{
  padding-top: 7em;
}
.space-126-bottom{
  padding-bottom: 7em;
}
.space-108{
  padding-top: 6em;
}
.space-108-bottom{
  padding-bottom: 6em;
}
.space-90{
  padding-top: 5em;
}
.space-90-bottom{
  padding-bottom: 5em;
}
.space-72{
  padding-top: 4em;
}
.space-72-bottom{
  padding-bottom: 4em;
}

@media (max-width: 1023px){
  .space-324{
    padding-top: 9em;
  }
  .space-324-bottom{
    padding-bottom: 9em;
  }
  .space-288{
    padding-top: 8em;
  }
  .space-288-bottom{
    padding-bottom: 8em;
  }
  .space-252{
    padding-top: 7em;
  }
  .space-252-bottom{
    padding-bottom: 7em;
  }
  .space-216{
    padding-top: 6em;
  }
  .space-216-bottom{
    padding-bottom: 6em;
  }
  .space-180{
    padding-top: 5em;
  }
  .space-180-bottom{
    padding-bottom: 5em;
  }
  .space-162{
    padding-top: 4.6em;
  }
  .space-162-bottom{
    padding-bottom: 4.6em;
  }
  .space-144{
    padding-top: 4.2em;
  }
  .space-144-bottom{
    padding-bottom: 4.2em;
  }
  .space-126{
    padding-top: 3.8em;
  }
  .space-126-bottom{
    padding-bottom: 3.8em;
  }
  .space-108{
    padding-top: 3.4em;
  }
  .space-108-bottom{
    padding-bottom: 3.4em;
  }
  .space-90{
    padding-top: 3em;
  }
  .space-90-bottom{
    padding-bottom: 3em;
  }
  .space-72{
    padding-top: 2.6em;
  }
  .space-72-bottom{
    padding-bottom: 2.6em;
  }
}

/* 1 */
.space-1{
  padding-top: 1px;
}

/* margin-top */
.mt-3{
  margin-top: 3em;
}
.mt-2_5{
  margin-top: 2.5em;
}
.mt-2{
  margin-top: 2em;
}
.mt-1_5{
  margin-top: 1.5em;
}
.mt-1{
  margin-top: 1em;
}
.mt-0_5{
  margin-top: 0.5em;
}
@media (max-width: 1023px){
  .mt-3{
    margin-top: 1.9em;
  }
  .mt-2_5{
    margin-top: 1.7em;
  }
  .mt-2{
    margin-top: 1.3em;
  }
  .mt-1_5{
    margin-top: 1em;
  }
  .mt-1{
    margin-top: 0.8em;
  }
  .mt-0_5{
    margin-top: 0.4em;
  }
}
/* margin-bottom */
.mb-3{
  margin-bottom: 3em;
}
.mb-2_5{
  margin-bottom: 2.5em;
}
.mb-2{
  margin-bottom: 2em;
}
.mb-1_5{
  margin-bottom: 1.5em;
}
.mb-1{
  margin-bottom: 1em;
}
.mb-0_5{
  margin-bottom: 0.5em;
}
@media (max-width: 1023px){
  .mb-3{
    margin-bottom: 1.9em;
  }
  .mb-2_5{
    margin-bottom: 1.7em;
  }
  .mb-2{
    margin-bottom: 1.3em;
  }
  .mb-1_5{
    margin-bottom: 1em;
  }
  .mb-1{
    margin-bottom: 0.8em;
  }
  .mb-0_5{
    margin-bottom: 0.4em;
  }
}

/* padding-top */
.pt-3{
  padding-top: 3em;
}
.pt-2_5{
  padding-top: 2.5em;
}
.pt-2{
  padding-top: 2em;
}
.pt-1_5{
  padding-top: 1.5em;
}
.pt-1{
  padding-top: 1em;
}
.pt-0_5{
  padding-top: 0.5em;
}
@media (max-width: 1023px){
  .pt-3{
    padding-top: 1.9em;
  }
  .pt-2_5{
    padding-top: 1.7em;
  }
  .pt-2{
    padding-top: 1.3em;
  }
  .pt-1_5{
    padding-top: 1em;
  }
  .pt-1{
    padding-top: 0.8em;
  }
  .pt-0_5{
    padding-top: 0.4em;
  }
}

/* padding-bottom */
.pb-3{
  padding-bottom: 3em;
}
.pb-2_5{
  padding-bottom: 2.5em;
}
.pb-2{
  padding-bottom: 2em;
}
.pb-1_5{
  padding-bottom: 1.5em;
}
.pb-1{
  padding-bottom: 1em;
}
.pb-0_5{
  padding-bottom: 0.5em;
}
@media (max-width: 1023px){
  .pb-3{
    padding-bottom: 1.9em;
  }
  .pb-2_5{
    padding-bottom: 1.7em;
  }
  .pb-2{
    padding-bottom: 1.3em;
  }
  .pb-1_5{
    padding-bottom: 1em;
  }
  .pb-1{
    padding-bottom: 0.8em;
  }
  .pb-0_5{
    padding-bottom: 0.4em;
  }
}



/* --------------- color --------------- */
/* bg */
.bg-blue{
  background-color: #2162a3;
}
.bg-darkblue{
  background-color: #1c538e;
}
.bg-lightblue{
  background-color: #1f84c1;
}
.bg-darkgray{
  background-color: #acb9c1;
}
.bg-lightgray{
  background-color: #f3f4f5;
}
.bg-white{
  background-color: rgb(255, 255, 255, 1);
}
.bg-black{
  background-color: rgb(51, 51, 51, 1);
}
.bg-lightblack{
  background-color: #666;
}

/* txt */
.txt-blue, .txt-blue a{
  color: #2162a3;
}
.txt-darkblue, .txt-darkblue a{
  color: #1c538e;
}
.txt-lightblue, .txt-lightblue a{
  color: #1f84c1;
}
.txt-black, .txt-black a{
  color: rgb(51, 51, 51, 1);
}
.txt-lightblack, .txt-lightblack a{
  color: #666;
}
.txt-white, .txt-white a{
  color: rgb(255, 255, 255, 1);
}
.txt-darkwhite, .txt-darkwhite a{
  color: #eee;
}




/* --------------- 配色_採用 --------------- */