@charset "utf-8";
/* CSS Document */


/*
  Made by Elly Loel - https://ellyloel.com/
  参考記事:
    - Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
    - Andy Bell - https://piccalil.li/blog/a-modern-css-reset/
    - Adam Argyle - https://unpkg.com/open-props@1.3.16/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE
  メモ:
    - :where()は簡単に上書きできるように詳細度を低くするために使用しています。
*/

* {
    /* すべてのデフォルトのマージンを削除 */
    margin: 0;
    /* すべてのデフォルトのパディングを削除 */
    padding: 0;
    /* line-heightをemベースでcalc()で計算。font-sizeを小さくするとline-heightは大きくなり、font-sizeを大きくするとline-heightは小さくなります。参考: https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/ */
    line-height: calc(0.35rem + 1em + 0.35rem);
  }
  
  /* より直感的なボックスサイズのモデルを使用 */
  *,
  ::before,
  ::after {
    box-sizing: border-box;
    /* 要素のはみ出しを確認 */
    /*outline: 2px red solid;*/
  }
  
  /* fieldset, progress, meter以外のすべての要素でボーダーを削除し、背景に適切なデフォルトを設定 */
  *:where(:not(fieldset, progress, meter)) {
    border-width: 0;
    border-style: solid;
    background-origin: border-box;
    background-repeat: no-repeat;
  }
  
  html {
    /* アプリケーションでパーセントによる高さを許可する  */
    block-size: 100%;
    /* テキストのサイズはfont-sizeのみで制御されるようにする */
    -webkit-text-size-adjust: none;
    
  }
  
  /* 減速を好まないユーザーのためにスムーズなスクロールを実現 */
  @media (prefers-reduced-motion: no-preference) {
    html:focus-within {
      scroll-behavior: smooth;
    }
  }
  
  body {
    /* テキストのレンダリングを改善 */
    -webkit-font-smoothing: antialiased;
    /* https://marco.org/2012/11/15/text-rendering-optimize-legibility */
    text-rendering: optimizeSpeed;
    /* アプリケーションでパーセントによる高さを許可する */
    min-block-size: 100%;
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter#example_2 */
    /* scrollbar-gutter: stable both-edges; バグが修正されるまで削除: https://bugs.chromium.org/p/chromium/issues/detail?id=1318404#c2 */
    color: #000;
    /* text-align: justify; */
  }
  
@supports (-webkit-touch-callout: none) {
  body {
    /* The hack for Safari */
    height: -webkit-fill-available;
  }
}
  /* 各メディア要素のデフォルトを改善 */
  :where(img, svg, video, canvas, audio, iframe, embed, object) {
    display: block;
  }
  :where(img, svg, video) {
    block-size: auto;
    max-inline-size: 100%;
  }
  
  /* ストロークを削除し、fillの塗りつぶしカラーはフォントカラーを継承 */
  :where(svg) {
    stroke: none;
    fill: currentColor;
  }
  
  /* fill属性のないSVG */
  :where(svg):where(:not([fill])) {
    /* fillを取り除き、ストロークのカラーはフォントカラーを継承 */
    stroke: currentColor;
    fill: none;
    /* 丸みを帯びたストローク */
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  /* width属性のないSVGのサイズを設定 */
  :where(svg):where(:not([width])) {
    inline-size: 5rem;
  }
  
  /* フォーム内のタイポグラフィのスタイルを削除 */
  :where(input, button, textarea, select),
  :where(input[type="file"])::-webkit-file-upload-button {
    color: inherit;
    font: inherit;
    font-size: inherit;
    letter-spacing: inherit;
  }
  
  /* textareaのサイズ変更は垂直のみにし、ブラウザがサポートしている場合にのみblockにします */
  :where(textarea) {
    resize: vertical;
  }
  @supports (resize: block) {
    :where(textarea) {
      resize: block;
    }
  }
  
  /* テキストのオーバーフローを回避 */
  :where(p, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
  }
  
  /* article、aside、nav、section内のh1フォントサイズを修正 */
  h1 {
    font-size: 2em;
  }
  
  /* リストの役割をするul、ol要素のリストスタイルを削除。デフォルトのスタイルが削除されることを示唆しています */
  :where(ul, ol)[role="list"] {
    list-style: none;
  }
  
  /* クラスを持たないアンカータグに、より読みやすい下線スタイルを設定。アンカータグに設定することもできますが、コンフリクトを引き起こす可能性があります */
  a:not([class]) {
    text-decoration-skip-ink: auto;
  }
  
  /* インタラクティブな要素は適切なカーソルを設定して操作できることを明確にする */
  :where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
    cursor: pointer;
    touch-action: manipulation;
  }
  :where(input[type="file"]) {
    cursor: auto;
  }
  :where(input[type="file"])::-webkit-file-upload-button,
  :where(input[type="file"])::file-selector-button {
    cursor: pointer;
  }
  
  /* フォーカスのアウトラインをアニメーション化 */
  @media (prefers-reduced-motion: no-preference) {
    :focus-visible {
      transition: outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1);
    }
    :where(:not(:active)):focus-visible {
      transition-duration: 0.25s;
    }
  }
  :where(:not(:active)):focus-visible {
    outline-offset: 5px;
  }
  
  /* ユーザーがボタンのテキストを選択できないようにする */
  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"]),
  :where(input[type="file"])::-webkit-file-upload-button,
  :where(input[type="file"])::file-selector-button {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    text-align: center;
  }
  
  /* 無効化されたボタンには無効化されたカーソルを表示 */
  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"])[disabled] {
    cursor: not-allowed;
  }

  summary::-webkit-details-marker {
    /* Safariで表示されるデフォルトの三角形アイコンを消します */
    display: none;
  }





/*===================================================================
//  共通設定
//=================================================================*/

.txt {
  font-family: "游ゴシック",YuGothic;
  font-weight: 500;
  font-style: normal;
}
a {text-decoration: none; color: #000;}
a:hover,
a:hover img,
button:hover {opacity:0.7 !important; transition:all .3s; cursor: pointer;}

.left  {float:left;}
.right {float:right;}

.alignc {text-align:center;}
.alignl {text-align:left;}
.alignr {text-align:right;}

.none         {display:none;}
.block        {display:block;}
.inline-block {display:inline-block;}
.inline       {display:inline;}
.flex         {display:flex; width: 100%;}

.hidden  {overflow:hidden;}
.visible {overflow:visible;}

.vertical-t {vertical-align:top;}
.vertical-m {vertical-align:middle;}
.vertical-b {vertical-align:bottom;}

.font-bold     {font-weight:bold;}
.font-normal   {font-weight:normal;}
.gothic        {font-family: "游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic","Hiragino Kaku Gothic Pro",Osaka,sans-seri; font-weight: 500; letter-spacing: 0.05rem;}
.mincho        {font-family: dnp-shuei-shogomincho-std, sans-serif, "ヒラギノ明朝 Pro W3","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif; font-weight: 700; font-style: normal;}
.mincho2       {font-family: dnp-shuei-4go-std, sans-serif, "ヒラギノ明朝 Pro W3","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif; font-weight: 500; font-style: normal;}
.mincho3       {font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;}
.alpha         {font-family: open-sans, sans-serif; letter-spacing: .02em; font-weight: 700; font-style: normal;}

.radius-5 {border-radius:5px;}

.box {box-sizing:border-box;}
.relative {position:relative;}

.anime {transition:all .3s;}
a:hover img.alpha {opacity:0.7;}
.wide             {width:100%; height:auto;}

.no-margin-t  {margin-top:0!important;}
.no-margin-b  {margin-bottom:0!important;}
.no-margin-l  {margin-left:0!important;}
.no-margin-r  {margin-right:0!important;}
.no-padding-t {padding-top:0!important;}
.no-padding-b {padding-bottom:0!important;}
.no-padding-l {padding-left:0!important;}
.no-padding-r {padding-right:0!important;}

.space-top          {padding-top: 2.5em;}
.space-btm          {padding-bottom: 2em;}
.contents-space-top {padding-top: 5em;}
.contents-space-btm {padding-bottom: 4.5em;}
.contents-most-top  {padding-top: 10em;}
.contents-most-btm  {padding-bottom: 10em;}

.after-arrow:after                     {content:" ≫";}
.after-endmark:not(:last-child):after  {content: " / ";}
.ellipsis                              {width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; display:block;}

.noscroll {position: fixed; overflow-y: scroll;}
.bg-c     {background-position: center top; background-repeat: no-repeat;}

ul,ol {
  list-style: none;
}
.appear-contents,
.appear-delay > li {position: relative; opacity: 0; top: 20px; -webkit-transform: translate3d(0,0,0);}

table.base-table     {width: 100%; border-collapse: collapse;}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}