@charset "utf-8";
/* =============================================================
　 ページ固有スタイル
   ============================================================= */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/* Font Awesome */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');


/* === Reset === */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, ol, ul, li,
    fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
      border: 0;
      font-family: inherit;
      font-size: 100%;
      font-style: inherit;
      font-weight: inherit;
      vertical-align: baseline;
    }
    :focus { outline: 0; }
    ol, ul { list-style: none; }
    table { border-collapse: separate; border-spacing: 0; }
    th, td { font-weight: normal; text-align: left; }
    a img { border: 0; }
    article, aside, details, figcaption, figure, footer, header, nav, section { display: block; }

    /* === Variables === */
    :root {
      --color-primary: #df8b04;
      --color-hover:   #f6a401;
      --color-text:    #333;
      --color-bg:      #fff;
      --color-subtle:  #f4f4f4;
      --color-border:  #dbdbdb;
      --font-main: verdana, /*"Kosugi Maru","Noto Sans JP",*/"ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN",
                   "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    }

    /* === Base === */
    body {
      color: var(--color-text);
      font: 14px/1.5 var(--font-main);
      background: var(--color-bg);
      border-block: 5px solid var(--color-primary);
      -webkit-text-size-adjust: none;
    }
    a { color: var(--color-primary); text-decoration: none; }
    a:hover { color: var(--color-hover); }

    /* === Layout === */
    #wrapper { margin: 20px auto; padding: 0 1%; width: 98%; position: relative; }
    .inner { margin: 0 auto; width: 100%; }

    /* === Read More === */
    .readmore a {
      padding: 3px 7px;
      border-radius: 3px;
      color: #fff;
      background: var(--color-primary);
    }
    .readmore a:hover {
      opacity: 0.3;
      transition: background-color .3s;
      background-color: rgb(70, 62, 62);
    }

    /* === Header === */
    h1 { font-size: 12px; line-height: 1.6; font-weight: normal; }
    #header { overflow: hidden; padding: 5px 0 0; }
    .logo span { font-size: 12px; font-weight: normal; }
    .info { float: right; padding: 20px 0; }

    /* === Top Navigation === */
    ul#topnav {
      clear: both;
      overflow: hidden;
      margin: 0 auto 30px;
      background: var(--color-primary);
    }
    ul#topnav li { float: left; }
    ul#topnav a {
      width: 175px;
      font-size: 12px;
      display: block;
      padding: 5px 0 20px 10px;
      color: #fff;
      border-left: 1px solid #fff;
    }
    ul#topnav li:first-child a { border: 0; }
    ul#topnav li.active a,
    ul#topnav a:hover { background: var(--color-hover); }

    /* === Main Banner === */
    #mainBanner { clear: both; line-height: 0; }
    #mainBanner .inner { position: relative; }
    #mainBanner img { max-width: 100%; height: auto; }
    .slogan {
      position: absolute;
      bottom: 10px;
      left: 10px;
      padding: 5px 10px;
      line-height: 1.4;
      z-index: 100;
      color: var(--color-primary);
      background: url(../img/tp.png);
    }
    .subImg .slogan { left: auto; right: 10px; }
    .slogan h2 { padding-bottom: 5px; font-size: 20px; }
    .slogan h3 { font-size: 14px; }

    /* === Grid === */
    .gridWrapper { clear: both; padding: 20px 0; overflow: hidden; }
    .grid { float: left; border-right: 1px solid #fff; }
    .colDark, .colLight { padding-bottom: 10px; }
    .colDark h3, .colLight h3 {
      text-align: center;
      padding: 5px 10px;
      font-size: 14px;
      color: #fff;
      background: var(--color-hover);
    }
    .colDark h3 { background: var(--color-primary); }
    .grid p { padding: 5px 10px; }
    .grid ul { margin: 5px 10px; }
    .grid li {
      padding: 5px 0;
      border-top: 1px dashed #fff;
      border-bottom: 1px dashed var(--color-border);
    }
    .grid li:first-child { border-top: 0; }
    .gridWrapper img { max-width: 100%; height: auto; }

    /* === Content === */
    section.content { margin-bottom: 20px; font-size: 14px; overflow: hidden; }
    section.content article {
      padding: 10px;
      overflow: hidden;
      border-radius: 0 0 12px 12px;
      background: var(--color-subtle);
    }
    section.content p { margin-bottom: 5px; }
    h3.heading, #sub .grid h3 {
      padding: 5px 10px;
      font-size: 14px;
      color: #fff;
      background: var(--color-hover);
    }
    #main h3.heading, #sub .col2 h3 { background: var(--color-primary); }
    .alignleft  { float: left;  clear: left;  margin: 3px 10px 10px 1px; }
    .alignright { float: right; clear: right; margin: 3px 1px 10px 10px; }

    /* === Table === */
    table.table { border-collapse: collapse; width: 100%; margin: 10px auto; }
    table.table th, table.table td { padding: 5px; border: 1px solid var(--color-hover); }
    table.table tr:first-child th,
    table.table tr:first-child td { border-top: 4px solid var(--color-hover); }
    table.table th {
      font-weight: bold;
      letter-spacing: 1px;
      white-space: nowrap;
      color: #fff;
      background: var(--color-primary);
    }

    /* === Footer === */
    #footer { margin: 30px auto; text-align: center; clear: both; }
    #footer .copyright { font-size: 11px; }

    /* === Utility === */
    .mb10 { margin-bottom: 10px; }
    .aki1 { margin-left: 1rem; }
    .atn {
      background: #FF9;
      padding: 15px;
      margin-bottom: 10px;
      color: #F00;
      font-size: 90%;
    }

    /* === PC (min 960px) === */
    @media (min-width: 960px) {
      #header .logo { float: left; padding: 20px 0; }
      #wrapper, .inner, ul#topnav { width: 940px; padding: 0; }
      #wrapper { padding-bottom: 20px; }
      #main { float: right; width: 690px; }
      #subpage #sub { float: left; width: 235px; overflow: hidden; }
      .grid { width: 234px; }
      .col2 { width: 292px; padding-bottom: 12px; }
      .col3 { width: 100%; }
      #gallery .grid { width: 230px; }
      #subpage #sub .grid { width: 100%; float: none; padding-bottom: 30px; }
    }

    /* === Tablet / Narrow (max 960px) === */
    @media (max-width: 960px) {
      #header h1, #header .logo { padding-left: 10px; text-align: center; }
      #header .info { padding-right: 10px; }
      ul#topnav { clear: both; width: 100%; }
      ul#topnav li {
        width: 33%;
        border-right: 1px solid var(--color-hover);
        border-bottom: 1px solid var(--color-hover);
      }
      ul#topnav li:nth-child(3n) { border-right: 0; width: 34%; }
      ul#topnav a { width: 100%; border: 0; }
      #mainBanner { width: 100%; }
      .grid { width: 100%; margin: 2px 0; }
      .col2 { float: none; width: 100%; margin: 0 0 20px; }
      .grid img { float: left; margin-right: 5px; }
      #gallery .grid { width: 31%; margin: 0 1%; padding: 0; }
      #gallery .grid img { float: none; }
      section.content { padding: 0 10px; }
      section.content img { max-width: 90%; height: auto; }
      #sub .grid { padding-bottom: 20px; }
      #footer { padding: 0; }
      #footer .grid { float: none; width: 100%; margin-bottom: 5px; text-align: center; }
    }

    /* === Smartphone Landscape (max 640px) === */
    @media (max-width: 640px) {
      .grid { width: 100%; }
      .grid img { float: none; margin: 20px auto 10px; }
      .grid p { text-align: left; }
      img.frame, #gallery img { border-width: 2px; }
      .alignleft, .alignright { float: none; display: block; margin: 0 auto 10px; }
      #footer .grid p { text-align: center; }
    }

    /* === Smartphone Portrait (max 480px) === */
    @media (max-width: 480px) {
      .info { padding: 10px 0; }
      ul#topnav li { width: 50%; }
      ul#topnav li:nth-child(3n) { border-right: 1px solid var(--color-hover); width: 50%; }
      ul#topnav li:nth-child(2n),
      ul#topnav li:nth-child(6n) { border-right: 0; }
      #mainBanner h2, #mainBanner h3 { font-size: 80%; }
    }

    /* === Desktop/Mobile toggle === */
    @media (max-width: 768px) { br.only_desktop, .only_desktop { display: none; } }
    @media (min-width: 768px) { br.only_mobile, img.only_mobile, .only_mobile { display: none; } }

    /* === Slogan mobile === */
    @media (max-width: 768px) {
      .slogan { bottom: 3px; left: 6px; padding: 3px 6px; }
    }