@charset "UTF-8";
/* ------------ common ------------ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, /*ol, ul, li,*/ fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}
/* Basic CSS */
html {
  -webkit-text-size-adjust: none; /* スマホ回転時の文字サイズ拡大防止 */
  -webkit-font-smoothing: antialiased; /* 文字を滑らかに表示（aliasedから修正） */
  font-size: 16px; /* 基本フォントサイズを16pxに設定 */
}
/* HTML5 display-role reset */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
/* box-sizingのモダン化（ベンダープレフィックス削除） */
*, *:before, *:after {
  box-sizing: border-box;
}
a {
  color: #4c99c5;
  text-decoration: none;
}
a:hover {
  color: #5872d4;
  text-decoration: underline;
}
/* --- body --- */
body {
  color: #333;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 0.95rem; /* 95%と同等の約15.2px */
  margin: 0;
  padding: 0;
  text-align: left;
  background: url(../images/bg-header.png) 0 0 repeat-x;
}
/* ---------- wrap ---------- */
/* ---------- common.css の修正 ---------- */

#wrap {
    margin: 0 auto;
    width: 1028px;
    position: relative;
    display: block;
}

#wrap::after {
    content: "";
    display: block;
    clear: both;
}

/* ---------- header ---------- */
header#header {
  width: 1028px;
  height: 124px;
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
h1 a#logo {
  display: block;
  width: 334px;
  height: 110px;
  background: url(../images/logo-qqka-senmoni-retina.png) 0 0 no-repeat;
  background-size: 334px 110px;
  margin: 2px 0 0 0;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  h1 a#logo {
    display: block;
    width: 334px;
    height: 110px;
    background: url(../images/logo-qqka-senmoni-retina.png) 0 0 no-repeat;
    background-size: 334px 110px;
    margin: 2px 0 0 0;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
  }
}
/* モダンなトランジションと透過指定 */
header h1 a:hover {
  opacity: 0.7;
  transition: 0.3s ease-in-out;
}
/* --- header-func --- */
#header-func {
  width: 600px;
  height: 124px;
  margin: 0;
}
#header-func form {
  margin: 0;
  padding: 0;
}
/* --- header-nav [ search + mmf contact ] --- */
#h-nav {
  display: flex; /* ナビゲーションもflex化 */
  justify-content: flex-end;
  width: 320px;
  height: 20px;
  font-size: 0.75rem; /* 12px -> 0.75rem */
  line-height: 1;
  margin: 0 0 0 280px;
  padding: 4px 0 0 0;
}
#h-nav a {
  text-decoration: none;
  margin-left: 20px;
  color: #666;
  padding: 4px 6px 4px 12px;
  background-color: white;
  border-radius: 0 0 5px 5px;
  box-shadow: 1px 1px 6px 1px rgba(0, 0, 0, 0.2);
  font-weight: normal;
}
#h-nav a i {
  color: #900010;
  font-size: 0.75rem; /* 12px -> 0.75rem */
  margin-left: 25px;
}
#h-nav a:hover {
  text-decoration: none;
}
/* searchbox */
#search {
  padding-top: 0;
  padding-bottom: 0;
}
/* 検索フォームもfloatを廃止しFlexbox化 */
.searchform {
  display: flex;
  align-items: center;
}
.searchform label {
  display: none;
}
.searchform input[type="text"] {
  width: 220px;
  height: 18px;
  padding: 0 12px 0 6px;
  background: #fff;
  border: 1px solid #ccc;
}
.searchform input[type="submit"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0 -20px; /* テキストボックスに重ねる指定を維持 */
  padding: 0;
  background: url(../images/icon-search.png) no-repeat;
  border: none;
  box-shadow: none;
  cursor: pointer;
  z-index: 1; /* 重なりを確実に */
}
.searchform input[type="submit"]:hover {
  opacity: 0.80;
}
#sd-search {
  margin: 30px 0;
  padding: 30px;
  background: #eee;
  border-radius: 6px;
}
#sd-search form select {
  font-size: 0.625rem; /* 10px -> 0.625rem */
  border: 1px;
}
/* ---------- mainimg-p ---------- */
#mainimg-p {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 182px;
  position: relative;
  background: #efefef;
  text-align: center;
  border-top: 1px solid #999;
  border-bottom: 1px solid #ccc;
}
#mainimg-p img {
  margin: 0 auto;
  width: 980px;
  height: 180px;
}
/* ---------- footer ---------- */
footer {
  width: 100%;
  height: 245px;
  margin: 0;
  padding: 20px 0 0 0;
  background: url(../images/bg-footer.png) 0 0 repeat-x;
}
#footer-link {
  width: 980px;
  margin: 0 auto;
  text-align: center;
}
#footer-link a img {
  display: inline-block;
  margin: 10px;
}
div#footer-menu {
  overflow: hidden;
  width: 800px;
  margin: 0 auto;
  color: #aaa;
  padding: 8px 0;
}
div#footer-menu a {
  color: #aaa;
  font-size: 0.75rem; /* 12px -> 0.75rem */
  line-height: 1;
}
/* footer-funcの不要なfloatを削除 */
ul#footer-func {
  font-size: 0.875rem; /* 14px -> 0.875rem */
  line-height: 2;
  margin-bottom: 30px;
  list-style: none;
  margin-left: 40px;
  margin-right: 40px;
}
ul#footer-func li {
  margin-left: -40px;
}
ul#footer-func li a {
  color: silver;
  text-decoration: none;
  list-style: none;
  margin-left: -30px;
}
ul#footer-func a:hover {
  text-decoration: none;
  color: white;
}
div.caution {
  font-size: 0.625rem; /* 10px -> 0.625rem */
  line-height: 1;
  margin: 10px 0;
  text-align: center;
  color: #aaa;
}
footer div.copyright {
  display: block;
  font-size: 0.75rem; /* 12px -> 0.75rem */
  text-align: center;
  color: silver;
}
footer div.copyright a {
  color: silver;
  text-decoration: none;
}
footer div.copyright a:hover {
  color: silver;
  text-decoration: underline;
}
/* --------- Brake on Mobile Phone ---------- */
.brmo {
  display: none;
}
/* --------- clearfix (レガシーレイアウト用として一応残置) ---------- */
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}
/* --- HPリンク --- */
a.siteLink {
  display: inline-block;
  margin: 0rem 0 0 0;
  word-break: break-all;
}
a.siteLink:after {
  content: '';
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
  margin-left: 0.3rem;
  background-image: url('data:image/svg+xml;utf-8,<svg fill="%23999" version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 841.9 595.3" enable-background="new 0 0 841.9 595.3" xml:space="preserve"><g><path d="M260.8,41.5v416h416v-416H260.8z M636.8,417.5h-336v-336h336V417.5z"/><polygon points="204.8,513.5 204.8,337.5 204.8,177.5 204.8,137.5 164.8,137.5 164.8,553.5 580.8,553.5 580.8,513.5 540.8,513.5"/><polygon points="397.6,354.4 515.5,236.5 515.5,321.3 555.5,321.3 555.5,168.2 402.4,168.2 402.4,208.2 487.2,208.2 369.4,326.1"/></g></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
a.siteLink:hover {
  text-decoration: underline;
}
a.siteLinkBtn {
  display: flex;
  justify-content: left;
  align-items: center;
  width: 80%;
  height: 2rem;
  padding: 0 1rem;
  margin: 0.5rem 0 0 0;
  word-break: break-all;
  font-size: 0.6rem; /* 既存のremのまま維持 */
  color: #fff !important;
  background: skyblue;
  border-radius: 0.3rem;
  position: relative;
}
a.siteLinkBtn:after {
  content: '';
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
  margin-left: 0.3rem;
  background-image: url('data:image/svg+xml;utf-8,<svg fill="%23fff" version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 841.9 595.3" enable-background="new 0 0 841.9 595.3" xml:space="preserve"><g><path d="M260.8,41.5v416h416v-416H260.8z M636.8,417.5h-336v-336h336V417.5z"/><polygon points="204.8,513.5 204.8,337.5 204.8,177.5 204.8,137.5 164.8,137.5 164.8,553.5 580.8,553.5 580.8,513.5 540.8,513.5"/><polygon points="397.6,354.4 515.5,236.5 515.5,321.3 555.5,321.3 555.5,168.2 402.4,168.2 402.4,208.2 487.2,208.2 369.4,326.1"/></g></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
a.siteLinkBtn:hover {
  background: #95E6FF;
  text-decoration: none !important;
}
/* ---------------------------------------- */
/* ------------- flex layout -------------- */
/* ---------------------------------------- */
.flexLayout {
  display: flex;
  width: 100%;
  height: auto;
}
/* --justify-content-- */
.jc-c {
  justify-content: center;
}
.jc-fs {
  justify-content: flex-start;
}
.jc-fe {
  justify-content: flex-end;
}
.jc-sa {
  justify-content: space-around;
}
.jc-sb {
  justify-content: space-between;
}
/* --align-items-- Align to the column*/
.ai-b {
  align-items: baseline;
}
.ai-c {
  align-items: center;
}
.ai-fe {
  align-items: flex-end;
}
.ai-fs {
  align-items: flex-start;
}
.ai-s {
  align-items: stretch;
}
/* --align-content-- Align to the row*/
.ac-c {
  align-content: center;
}
.ac-fe {
  align-content: flex-end;
}
.ac-fs {
  align-content: flex-start;
}
.ac-sa {
  align-content: space-around;
}
.ac-sb {
  align-content: space-between;
}
.ac-s {
  align-content: stretch;
}
/* --flex-direction-- */
.fd-c {
  flex-direction: column;
}
.fd-cr {
  flex-direction: column-reverse;
}
.fd-r {
  flex-direction: row;
}
.fd-rr {
  flex-direction: row-reverse;
}
.flexLayout div img, .flexLayout figure img, .flexLayout figure img.alignnone {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 !important;
  padding: 0;
}
.flexLayout div p:first-child {
  margin-top: 0 !important;
}
.flexLayout figure figcaption {
  font-size: 0.8rem;
  line-height: 1.4;
  margin-top: 0.5rem;
  text-align: center;
}
.item100 {
  width: 100%;
}
.item64 {
  width: 64%;
}
.item60 {
  width: 60%;
}
.item48 {
  width: 48%;
}
.item44 {
  width: 44%;
}
.item40 {
  width: 40%;
}
.item34 {
  width: 34%;
}
.item30 {
  width: 30%;
}