@charset "UTF-8";
/*----- ResoponsiveTemplate02 -----*/
@import url("//share.cr-cms.net/hp_agency/hpagency.css");
@import url("//fonts.googleapis.com/css2?family=Open+Sans:wght@500;700&display=swap");
@import url("//use.fontawesome.com/releases/v5.6.1/css/all.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/* ==========================================================================
   Print (旧: printclear_hide.css / printclear_show.css)
   ========================================================================== */
.printClear {
  display: none;
}

@media print {
  .printClear {
    display: block;
    clear: both;
    width: 1px;
    height: 1px;
  }

  body {
    padding-top: 0 !important;
  }
  #toolbar {
    display: none;
  }
}

/* ==========================================================================
   Prepend (旧: prepend.css)
   ========================================================================== */
/** Parts
------------------------------ **/
/** main image **/
#slider {
  height: 0;
  opacity: 0;
}
#slider.mainImage-initialized {
  height: auto;
  opacity: 1;
}
#slider .slick-track {
  max-width: none !important;
}
#slider .slick-slide {
  display: flex;
  align-items: center;
}
#slider .slick-slide a,
#slider .slick-slide img {
  margin-left: auto;
  margin-right: auto;
}
/** blog comments **/
.mainBlogComments {
  margin-bottom: 20px;
}
.mainBlogComments .comments li {
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: solid 1px #999;
}
.mainBlogComments .comments li .title {
  margin-bottom: 5px;
}
.mainBlogComments .comments li .body {
  margin-bottom: 5px;
  padding-bottom: 5px;
  border-bottom: dotted 1px #ccc;
}
.mainBlogComments .comments li .data {
  overflow: hidden;
}
.mainBlogComments .comments li .poster {
  float: left;
}
.mainBlogComments .comments li .date {
  float: right;
}

/** blog comment form **/
.mainBlogCommentForm {
  margin-bottom: 20px;
}

/* ==========================================================================
   Common (旧: common.css)
   ========================================================================== */
/* Reset --------------------*/
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,
input,
textarea,
select {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

/* BasicSetting --------------------*/
@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Medium");
}
@font-face {
  font-family: YuGothicM;
  src: local("Yu Gothic Medium");
}
@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
* {
  margin: 0;
  padding: 0;
  font-family: inherit;
}

html {
  scroll-behavior: smooth;
}

body {
  font-size: 18px;
  line-height: 2;
  font-weight: 500;
  letter-spacing: 0.06em;
  font-family:
    "Open Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3",
    HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
    "BIZ UDGothic", "游ゴシック体", YuGothic, "Yu Gothic M",
    "游ゴシック Medium", "Yu Gothic Medium", "メイリオ", Meiryo, Osaka,
    "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.serif {
  font-family:
    Georgia, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3,
    "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro",
    "Hiragino Mincho Pro", "BIZ UDPMincho", "Yu Mincho", "游明朝体", "YuMincho",
    "游明朝", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

strong {
  font-weight: bold;
}

h2,
h3,
h4,
h5,
h6,
#name,
.article.concept,
.title,
.comment {
  font-feature-settings: "palt";
}

#wrap * {
  box-sizing: border-box;
}

table {
  margin: auto;
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  border: none;
  vertical-align: bottom;
}

ol,
ul {
  list-style: none;
}
ol li,
ul li {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

/* Links --------------------*/
a {
  text-decoration: none;
  font-weight: bold;
}

.article a {
  text-decoration: underline;
}

a:hover {
  font-weight: bold;
  text-decoration: none;
}

.footer a:hover,
.footer p a:hover {
  font-weight: bold;
}

.ams-build a,
.ams-build a:hover {
  font-weight: normal;
}

#mainArticles a:hover img,
#sideBanners a:hover img,
div.freeHtml a:hover img,
div.image img.gallery:hover {
  filter: alpha(opacity=75);
  -moz-opacity: 0.75;
  opacity: 0.75;
}

.sideBanner_body a:hover,
.thumb a:hover,
.image a:hover {
  filter: alpha(opacity=80);
  opacity: 0.8;
}

/* BasicLayout --------------------*/
#wrap {
  width: 100%;
  overflow: hidden;
}

#wrap_body {
  display: flex;
  flex-direction: column;
}
#wrap_body #title {
  order: 1;
}
#wrap_body #mainImage {
  order: 3;
}
#wrap_body #topMenu {
  order: 2;
}
#wrap_body #contents {
  order: 4;
  margin: auto;
  box-sizing: border-box;
}
#wrap_body #footer {
  order: 5;
}

#title,
#mainImage,
#topMenu,
#contents,
#sideContents,
#footer {
  width: 100%;
  position: relative;
}

#title_outer,
#topMenu_outer,
#mainArticles,
#mainTopics_outer,
#sideContents_outer,
#footer_outer,
#mainBlogComments,
#mainBlogCommentForm {
  max-width: 1200px;
  width: 80%;
  margin: auto;
}

#pankuz {
  padding: 0;
  margin: 0 auto;
  max-width: 1200px;
  width: 80%;
}
#pankuz p {
  margin: 16px 0;
  text-align: right;
  font-size: 0.78em;
  line-height: 1;
}
#pankuz a {
  text-decoration: underline;
}
#pankuz a:hover {
  text-decoration: none;
}

/*Header*/
#title #title_outer {
  background: url("") right center no-repeat;
  margin: auto;
  padding: 0;
  height: 104px;
  display: flex;
  align-items: center;
}
#title h1 {
  background: url("") no-repeat;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  height: clamp(54px, calc(42.46153846153847px + 3.205128205128205vw), 104px);
  float: left;
  font-size: 1.5em;

  text-align: left;
  width: clamp(160px, calc(135px + 7.8vw), 288px);
  background: url("../images/logo-header.png") center / contain no-repeat;
  background-size: contain;
  margin: 0;
}

/*GlobalMenu*/
#topMenu_outer {
  padding: 0;
  box-sizing: border-box;
}
#topMenu_outer .topMenu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
#topMenu_outer .topMenu li {
  letter-spacing: normal;
  background: none;
  box-sizing: border-box;
  width: auto;
  text-align: center;
  flex: 1 0 auto;
}
#topMenu_outer .topMenu li a {
  width: 100%;
  box-sizing: border-box;
  display: block;
  padding: 0 0.5em;
  line-height: 56px;
  font-weight: bold;
  letter-spacing: 0.03em;
  text-decoration: none;
  position: relative;
}

/*Main image*/
#mainImage_body {
  text-align: center;
}

.mainImage img {
  overflow: hidden;
  width: 100%;
  max-height: 880px;
  min-height: 240px;
  object-fit: cover;
  margin: auto;
}

/*Footer*/
#footer {
  font-size: 0.888em;
}

#footer_body {
  display: flex;
  justify-content: flex-start;
  padding: 32px 0 88px;
}
#footer_body .topMenu {
  margin: 8px;
  clear: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 35%;
}
#footer_body .topMenu li {
  box-sizing: border-box;
  border: none;
  margin-bottom: 5px;
  margin-right: 8px;
  float: none;
  height: auto;
  line-height: 32px;
}
#footer_body .topMenu li a {
  text-align: left;
  padding: 5px 15px;
  display: block;
}
#footer_body .topMenu li a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-weight: bold;
  margin-right: 8px;
}
#footer_body .topMenu li a:hover {
  text-decoration: none;
}
#footer_body .copyright {
  font-weight: bold;
  padding: 32px 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  clear: both;
  line-height: 18px;
  text-align: center;
}

/* ArticlesLayout --------------------*/
#mainContents {
  padding-bottom: 40px;
}

.mainArticles {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  justify-content: space-between;
}

/*LayoutOptions*/
.article,
.gallery {
  max-width: 1200px;
  width: 80%;
  margin: 48px auto 50px;
}
.gallery.full {
  width: 100vw;
  margin: 0 calc(50% - 50vw) 40px;
}
.article.full .article_body,
.gallery.full .article_body {
  max-width: 1200px;
  width: 80%;
  margin: auto;
}
.article.full.bg,
.article.full.theme,
.article.full.gray,
.gallery.full.bg,
.gallery.full.theme,
.gallery.full.gray {
  padding-top: 40px;
  padding-bottom: 40px;
}
.article.max,
.gallery.max {
  width: 100vw;
  margin: 0 calc(50% - 50vw) 40px;
}
.article.max .article_body,
.gallery.max .article_body {
  width: 100%;
}
.article.bg,
.article.theme,
.article.gray,
.gallery.bg,
.gallery.theme,
.gallery.gray {
  padding: 40px;
}
.article.bg h3,
.article.theme h3,
.article.gray h3,
.gallery.bg h3,
.gallery.theme h3,
.gallery.gray h3 {
  margin-top: 0;
  padding-top: 0;
}
.article.bg.section-target-conditions,
.article.bg.section-recruit-hiring-banner {
  padding-inline: 0;
  width: 94%;
}

.article.zero_margin,
.gallery.zero_margin {
  margin-bottom: 0;
  padding-bottom: 0;
}
#article777947.article {
  width: 100%;
}
.article p,
.gallery p {
  margin-bottom: 1em;
}

.article {
  /*MultipleColumn*/
  /*ImageLayout*/
}
.article.col2 {
  flex-basis: 44%;
}
.article.col3 {
  flex-basis: 32.5%;
}
.article.col4 {
  flex-basis: 24%;
}
.article.col5 {
  flex-basis: 19%;
}
.article.col2,
.article.col3,
.article.col4,
.article.col5 {
  margin: 0 auto 40px;
}
.article.col2.bg,
.article.col2.theme,
.article.col2.gray,
.article.col3.bg,
.article.col3.theme,
.article.col3.gray,
.article.col4.bg,
.article.col4.theme,
.article.col4.gray,
.article.col5.bg,
.article.col5.theme,
.article.col5.gray {
  padding: 40px;
}
.article.col2.bg h3,
.article.col2.theme h3,
.article.col2.gray h3,
.article.col3.bg h3,
.article.col3.theme h3,
.article.col3.gray h3,
.article.col4.bg h3,
.article.col4.theme h3,
.article.col4.gray h3,
.article.col5.bg h3,
.article.col5.theme h3,
.article.col5.gray h3 {
  margin-top: 0;
  padding-top: 0;
}
.article.col4.bg,
.article.col4.theme,
.article.col4.gray,
.article.col5.bg,
.article.col5.theme,
.article.col5.gray {
  padding: 20px;
}
.article.max {
  padding: 40px;
}
.article .image {
  width: auto;
  text-align: center;
  overflow: hidden;
}
.article .image img {
  max-width: 100%;
}
.article .article_left .image,
.article .article_right .image {
  max-width: 44%;
}
.article .article_left .image {
  float: left;
  margin-right: 2%;
}
.article .article_right .image {
  float: right;
  margin-left: 2%;
}
.article .article_center .image {
  margin-bottom: 1em;
}
.article.underImg .article_body {
  display: flex;
  flex-direction: column;
}
.article.underImg .article_body .image {
  order: 1;
}

/*Gallery*/
.gallery {
  /*MAX GALLERY*/
}
.gallery ul.galleryImages {
  display: flex;
  flex-wrap: wrap;
}
.gallery ul.galleryImages li {
  flex-basis: 20%;
  margin: 0 0 16px;
  padding: 4px;
  overflow: hidden;
}
.gallery ul.galleryImages li .image {
  margin-bottom: 8px;
  text-align: center;
}
.gallery ul.galleryImages li .image img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
}
.gallery ul.galleryImages li .title {
  text-align: center;
  line-height: 1;
  font-size: 0.78em;
  font-weight: bold;
}
.gallery ul.galleryGrids .comment {
  font-size: 0.78em;
  text-align: center;
  font-weight: bold;
}
.gallery.max {
  padding-left: 0;
  padding-right: 0;
}
.gallery.max.bg,
.gallery.max.theme,
.gallery.max.gray {
  padding: 40px 0;
}
.gallery.max ul.galleryGrids {
  display: flex;
}
.gallery.max ul.galleryGrids li * {
  margin: 0;
  padding: 0;
}
.gallery.max .gallery_grid2 li {
  width: 50%;
}
.gallery.max .gallery_grid3 li {
  width: 33.3333333333%;
}
.gallery.max .gallery_grid4 li {
  width: 25%;
}
.gallery.max .gallery_grid5 li {
  width: 20%;
}

/* Responsive --------------------*/
#toggle {
  display: none;
}

@media only screen and (max-width: 1200px) {
  #title_outer,
  #topMenu_outer,
  #pankuz,
  #mainArticles,
  #mainTopics_outer,
  #sideContents_outer,
  #footer_outer,
  #mainBlogComments,
  #mainBlogCommentForm {
    width: 100%;
  }
  #sideContents_outer {
    padding-left: 5%;
    padding-right: 5%;
  }
  .mainImage img,
  .mainImage #slider li img {
    min-width: 100%;
  }
  .article {
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
  }
  .article.col2,
  .article.col3,
  .article.col4,
  .article.col5 {
    margin: 0 0 40px;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }
  .article.col2 .article_body,
  .article.col3 .article_body,
  .article.col4 .article_body,
  .article.col5 .article_body {
    width: 100%;
  }
  .article.col4,
  .article.col5 {
    flex-basis: 44%;
  }
  .article.full,
  .article.max {
    margin: 0 auto 40px;
    width: 88%;
    padding-left: 5%;
    padding-right: 5%;
  }
  .article.full .article_body,
  .article.max .article_body {
    width: 100%;
  }
  .article.bg,
  .article.theme,
  .article.gray {
    padding-left: 5%;
    padding-right: 5%;
  }
  .gallery {
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
  }
  .gallery.bg,
  .gallery.theme,
  .gallery.gray {
    padding-left: 5%;
    padding-right: 5%;
  }
  .gallery.full,
  .gallery.max {
    width: 100%;
    margin: 0 0 40px;
    padding: 0;
  }
  .gallery.full {
    padding-left: 5%;
    padding-right: 5%;
  }
  .gallery.full .article_body {
    width: 100%;
  }
  #mainBlogComments_body,
  #mainBlogCommentForm_body {
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
  }
}
@media only screen and (max-width: 600px) {
  body {
    font-size: 16px;
  }
  .mainImage img {
    object-position: -1em 0;
  }
  #title #title_outer {
    height: 56px;
    background: none;
  }
  #pankuz p {
    font-size: 0.75em;
  }
  /*MENU*/
  #toggle {
    width: 56px;
    height: 56px;
    padding: 0;
    display: block;
    text-align: center;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10001;
  }
  #topMenu {
    position: unset;
    height: 0;
    min-height: 0;
    overflow: hidden;
    transition: all 0.5s;
  }
  body.active #topMenu {
    height: 245px;
  }
  #topMenu_outer {
    height: 0;
    padding: 0;
  }
  #topMenu_outer .topMenu {
    flex-direction: column;
  }
  #topMenu_outer .topMenu li a {
    padding: 0 0 0 4%;
    line-height: 1.25;
    min-height: 48px;
    text-align: left;
    display: flex;
    align-items: center;
  }
  /*Footer*/
  #footer_body {
    display: block;
    padding: 24px 0 0;
  }
  #footer_body .topMenu {
    width: 100%;
    margin: 0;
  }
  #footer_body .topMenu li {
    margin: 0;
  }
  #footer_body .copyright {
    position: unset;
  }
  /*Articles*/
  .article.col2,
  .article.col3,
  .article.col4,
  .article.col5 {
    flex-basis: 100%;
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
  .article .article_left .image,
  .article .article_right .image {
    max-width: 100%;
    margin: 0px auto 1em;
    float: none;
  }
  /*Gallery*/
  .gallery ul.galleryImages li {
    flex-basis: 50%;
  }
  .gallery .gallery_grid2 li.galleryGrid,
  .gallery .gallery_grid3 li.galleryGrid,
  .gallery .gallery_grid4 li.galleryGrid,
  .gallery .gallery_grid5 li.galleryGrid {
    width: 50%;
  }
  .gallery ul.galleryGrids .comment,
  .gallery ul.galleryImages li .title {
    font-size: 0.888em;
  }
}

/* ==========================================================================
   Contents Main (旧: contents_main.css)
   ========================================================================== */
/* Headline --------------------*/
/*h2*/
#mainArticles h2,
#listTopics h2 {
  font-size: 1.8em;
  font-weight: normal;
  margin: 0 calc(512px - 50vw) 16px;
  padding: 3vw 0;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.05em;
  border: none;
  position: relative;
  width: 100vw;
}
#mainArticles h2 > strong,
#listTopics h2 > strong {
  font-size: 45%;
  font-weight: normal;
  display: inline-block;
  margin-top: 0.5em;
}

#listTopics h2 {
  margin: 0 0 16px;
}

#mainArticles div[id^="blog"] h2 {
  margin: auto;
  padding: 24px 0;
  width: 100%;
}
#mainArticles div[id^="blog"] h2:after {
  margin: 16px auto;
}

/*h3*/
#mainTopics h2,
#mainArticles .article h2,
.article h3,
.gallery h3,
.freeHtml h3 {
  padding: 24px 0;
  line-height: 1.85;
  font-size: 1.55em;
  font-weight: normal;
  letter-spacing: 0.05em;
  text-align: center;
  margin: 0;
  width: 100%;
  position: relative;
  -webkit-font-smoothing: subpixel-antialiased;
}
#mainTopics h2:after,
#mainArticles .article h2:after,
.article h3:after,
.gallery h3:after,
.freeHtml h3:after {
  content: "";
  width: 40px;
  height: 4px;
  margin: 32px auto;
  display: block;
}

#mainTopics h2 {
  margin-top: 0;
  padding-top: 0;
}

.article h3 a,
.gallery h3 a {
  text-decoration: none;
  font-weight: normal;
}
.article h3 a:hover,
.gallery h3 a:hover {
  text-decoration: none;
}

/*h4 h5 h6*/
.article h4 {
  font-size: 1.15em;
  margin: 0 0 8px;
  display: flow-root;
  padding: 16px 16px 16px 32px;
  border-radius: 4px;
  font-weight: bold;
  line-height: 1.5;
  position: relative;
}
.article h4:before {
  content: "";
  width: 24px;
  height: 4px;
  margin: auto 8px auto 0;
  position: absolute;
  left: 0;
  top: 50%;
  bottom: 50%;
}
.article h5 {
  font-size: 1.15em;
  margin: 35px 0 20px;
  padding-left: 12px;
  line-height: 1.4;
  font-weight: bold;
  display: flow-root;
}
.article h6 {
  font-size: 1em;
  padding: 4px 8px;
  margin-bottom: 8px;
  font-weight: bold;
  display: flow-root;
}
.article h6:before {
  content: "▲";
  transform: rotate(90deg) scale(0.75);
  font-weight: bold;
  margin-right: 8px;
  display: inline-block;
}

/* Topics --------------------*/
#mainTopics {
  margin-bottom: 0;
  border-bottom: none;
  padding: 40px 0;
  overflow: hidden;
}
#mainTopics .listview {
  text-align: center;
  margin-top: 24px;
}
#mainTopics .listview a {
  color: #fff;
  text-indent: 0;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  display: inline-block;
  width: auto;
  height: auto;
  padding: 4px 16px;
  font-size: 1em;
  border: none;
}
#mainTopics .listview a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-weight: bold;
  margin-right: 8px;
}

ul.topics {
  max-width: 1200px;
  width: 80%;
  padding: 0;
  margin: auto;
}
ul.topics li {
  padding: 24px;
  margin: 0 0 8px;
  border-radius: 8px;
  position: relative;
  min-height: 160px;
}
ul.topics li p.date {
  font-size: 0.666em;
  line-height: 1;
  margin: 0 0 3px;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 4px;
}
ul.topics li h3 {
  padding-right: 128px;
}
ul.topics li p.description {
  font-size: 0.78em;
  line-height: 1.5;
  margin: 0;
  padding-right: 128px;
}
ul.topics li p.more {
  position: absolute;
  right: 24px;
  bottom: 24px;
}
ul.topics li p.more a {
  text-indent: 0;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  display: inline-block;
  width: auto;
  height: auto;
  padding: 4px 16px;
  font-size: 0.85em;
  border: none;
}
ul.topics li p.more a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-weight: bold;
  margin-right: 8px;
}
ul.topics li .thumb {
  width: auto;
  max-width: 160px;
  height: auto;
  max-height: 104px;
  float: left;
  overflow: hidden;
  margin-right: 24px;
}
ul.topics li .thumb img {
  max-width: 160px;
  max-height: 104px;
}

#listTopics ul.topics li {
  border-radius: 0;
}
#listTopics ul.topics li p.description {
  padding-right: 152px;
}

#Pagination {
  margin: auto;
}

/* Items --------------------*/
/* Buttons -----*/
a.btn {
  padding: 8px 16px;
  border-radius: 4px;
  display: flow-root;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  box-sizing: border-box;
}
a.btn:after {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-weight: bold;
  margin-left: 10px;
}
a.btn.anchor:after {
  font-family: "Font Awesome 5 Free";
  content: "\f107";
}

/* Tables -----*/
.article {
  /*DefaultTable*/
  /*NormalTable*/
  /*BGTable*/
  /*FlowTable*/
}
.article table:not(.contactTable) {
  border-collapse: collapse;
  border-left: 1px solid #ccc;
  border-spacing: 0;
  border-top: 1px solid #ccc;
  margin: 10px auto;
}
.article table:not(.contactTable) td,
.article table:not(.contactTable) th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  height: auto;
  padding: 10px;
  box-sizing: border-box;
  vertical-align: middle;
}
.article table:not(.contactTable) th {
  background-color: #f7f7f7;
  text-align: center;
}
.article table.normalTbl {
  width: 100%;
  border-left: none;
  font-size: 0.85em;
  margin-bottom: 24px;
}
.article table.normalTbl:last-child {
  margin-bottom: 0;
}
.article table.normalTbl td,
.article table.normalTbl th {
  padding: 16px;
  border-right: none;
}
.article table.normalTbl th {
  width: 25%;
  text-align: left;
}
.article table.normalTbl td {
  width: auto;
}
.article table.bgTbl {
  width: 100%;
  font-size: 0.85em;
  margin-bottom: 20px;
}
.article table.bgTbl:last-child {
  margin-bottom: 0;
}
.article table.bgTbl tr th,
.article table.bgTbl tr td {
  padding: 8px 15px;
}
.article table.bgTbl tr th {
  width: 20%;
  text-align: center;
}
.article table.bgTbl tr td {
  width: auto;
  text-align: left;
}
.article table.bgTbl tr:last-child th,
.article table.bgTbl tr:last-child td {
  padding: 10px;
}
.article table#flowTbl {
  width: 100%;
  margin-top: 0;
  border: none;
}
.article table#flowTbl strong {
  padding: 4px 16px;
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  font-size: 1.15em;
  line-height: 1.5;
}
.article table#flowTbl td {
  position: relative;
  display: block;
  margin-bottom: 40px;
  padding: 16px;
}
.article table#flowTbl td:after {
  font-family: "Font Awesome 5 Free";
  content: "\f107";
  font-weight: bold;
  margin-left: 10px;
  font-size: 40px;
  position: absolute;
  bottom: -64px;
  left: calc(50% - 20px);
}
.article table#flowTbl tr:last-of-type td {
  margin-bottom: 0;
}
.article table#flowTbl tr:last-of-type td:after {
  content: none;
}

/* Lists -----*/
/*CheckList*/
ul.check {
  display: flex;
  flex-direction: column;
  padding-left: 2em;
}
ul.check li {
  position: relative;
  font-weight: bold;
  font-size: 120%;
  line-height: 1.5;
  padding: 0.25em 0;
  display: block;
}
ul.check li:before {
  display: block;
  content: "";
  position: absolute;
  top: 0.4em;
  left: -1.5em;
  transform: rotate(-45deg);
}

/*NumberList*/
ol.number {
  counter-reset: number;
  list-style-type: none !important;
}
ol.number li {
  position: relative;
  padding-bottom: 0.75em;
  padding-left: 30px;
}
ol.number li:before {
  position: absolute;
  counter-increment: number;
  content: counter(number);
  display: inline-block;
  background: #15b393;
  color: white;
  font-weight: bold;
  font-size: 15px;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  top: 18px;
  transform: translateY(-50%);
}

/*FAQ*/
ul.faq {
  padding: 0 0 1em;
}
ul.faq li.qus,
ul.faq li.ans {
  display: block;
  font-size: 100%;
  margin-bottom: 1em;
  padding-left: 44px;
}
ul.faq li.qus:before,
ul.faq li.ans:before {
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  font-size: 100%;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin: 0 6px 0 -44px;
  text-align: center;
}
ul.faq li.qus::before {
  background-color: rgb(24, 24, 24);
  content: "Q";
}
ul.faq li.ans::before {
  background-color: #f69;
  content: "A";
}

/*PrivacyList*/
ol.pp {
  padding-left: 1.25em;
  font-size: 0.85em;
}
ol.pp li {
  list-style-type: decimal;
}

ul.notes {
  list-style-type: none;
  margin-left: 1em;
  font-size: 0.85em;
}
ul.notes li:before {
  content: "◆";
  margin-left: -1em;
}

ul.ps {
  list-style-type: none;
  margin-left: 1em;
  font-size: 0.85em;
}
ul.ps li:before {
  content: "※";
  margin-left: -1em;
}

ul.maru {
  list-style-type: none;
  margin-left: 1em;
  font-size: 0.85em;
}
ul.maru li:before {
  content: "●";
  margin-left: -1em;
}

ul.maru02 {
  list-style: none;
  margin-bottom: 16px;
  padding: 8px 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 0.85em;
}
ul.maru02 li {
  width: 48%;
  margin-bottom: 8px;
  line-height: 1.6;
  font-weight: bold;
  border-bottom: dotted 1px #dddddd;
  padding-bottom: 8px;
  padding-left: calc(1em + 8px);
}
ul.maru02 li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  margin-right: 8px;
  margin-top: 2px;
  font-size: 14px;
  margin-left: calc(-1em - 8px);
}

/* Contact --------------------*/
#mainArticles,
#mainBlogCommentForm {
  /*contactTable*/
}
/* hides the anti-spam honeypot field from sighted users while keeping it in the tab/DOM flow for bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.req-badge {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.1em 0.6em;
  font-size: 0.75em;
  font-weight: bold;
  color: #fff;
  background: #cc3300;
  border-radius: 3px;
  vertical-align: middle;
}
#contactFormMessage {
  margin-bottom: 20px;
  padding: 12px 15px;
  border-radius: 4px;
}
#contactFormMessage.is-success {
  background: #eef7ee;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}
#contactFormMessage.is-error {
  background: #fdecea;
  color: #c62828;
  border: 1px solid #f5b5b0;
}
#contactForm .button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
#mainArticles .notice_block h4,
#mainBlogCommentForm .notice_block h4 {
  background: none;
  font-size: 1em;
  color: #000000;
  margin: 20px 0 0px;
  padding: 0;
}
#mainArticles .notice_block .notice_address,
#mainBlogCommentForm .notice_block .notice_address {
  padding: 15px;
  background: #efefef;
  display: inline-block;
}
#mainArticles .contactTable .contact-note,
#mainBlogCommentForm .contactTable .contact-note {
  display: block;
  clear: both;
}
#mainArticles p.contact-note,
#mainArticles .validator-form .validator-message-invalid,
#mainBlogCommentForm p.contact-note,
#mainBlogCommentForm .validator-form .validator-message-invalid {
  margin-bottom: 0;
  font-size: 0.78em;
}
#mainArticles p.contact-note,
#mainBlogCommentForm p.contact-note {
  color: #999;
}
#mainArticles form,
#mainBlogCommentForm form {
  padding: 5px;
  background: #dde8d5;
  margin-bottom: 30px;
  width: 100%;
}
#mainArticles .envelope,
#mainBlogCommentForm .envelope {
  padding: 1em;
  margin-bottom: 15px;
  text-align: center;
}
#mainArticles table.contactTable,
#mainBlogCommentForm table.contactTable {
  border-bottom: none;
  width: 100%;
  font-size: 1em;
}
#mainArticles table.contactTable tr th,
#mainArticles table.contactTable tr td,
#mainBlogCommentForm table.contactTable tr th,
#mainBlogCommentForm table.contactTable tr td {
  padding: 1em;
  vertical-align: middle;
}
#mainArticles table.contactTable tr th,
#mainBlogCommentForm table.contactTable tr th {
  width: 30%;
  font-weight: bold;
  letter-spacing: 0;
  text-align: left;
}
#mainArticles table.contactTable tr.must th,
#mainBlogCommentForm table.contactTable tr.must th {
  background-position: 95% center;
  background-repeat: no-repeat;
  padding: 1em 56px 1em 16px;
  background-size: 32px;
}
#mainArticles table.contactTable tr td.th_headline,
#mainBlogCommentForm table.contactTable tr td.th_headline {
  text-align: center;
  font-size: 1em;
}
#mainArticles table.contactTable .textField,
#mainBlogCommentForm table.contactTable .textField {
  width: 100%;
}
#mainArticles table.contactTable input[type="text"],
#mainArticles table.contactTable input[type="email"],
#mainArticles table.contactTable input[type="password"],
#mainArticles table.contactTable textarea,
#mainArticles table.contactTable select,
#mainBlogCommentForm table.contactTable input[type="text"],
#mainBlogCommentForm table.contactTable input[type="email"],
#mainBlogCommentForm table.contactTable input[type="password"],
#mainBlogCommentForm table.contactTable textarea,
#mainBlogCommentForm table.contactTable select {
  padding: 8px;
  font-weight: normal;
  line-height: 1.25;
  border-radius: 2px;
}
#mainArticles table.contactTable label,
#mainBlogCommentForm table.contactTable label {
  display: block;
  float: none;
}
#mainArticles table.contactTable input.button,
#mainArticles table.contactTable input[type="button"],
#mainBlogCommentForm table.contactTable input.button,
#mainBlogCommentForm table.contactTable input[type="button"] {
  display: block;
  float: left;
  font-size: 1em;
  line-height: 40px;
  text-decoration: none;
  text-align: center;
  width: 30%;
  margin: 8px;
  padding: 8px 0;
  margin-bottom: 16px;
  border: none;
  border-radius: 100px;
  cursor: pointer;
}
#mainArticles table.contactTable input.button:hover,
#mainArticles table.contactTable input[type="button"]:hover,
#mainBlogCommentForm table.contactTable input.button:hover,
#mainBlogCommentForm table.contactTable input[type="button"]:hover {
  opacity: 0.75;
}
#mainArticles table.contactTable .validator-form .validator-message-invalid,
#mainArticles table.contactTable p.contact-note,
#mainBlogCommentForm
  table.contactTable
  .validator-form
  .validator-message-invalid,
#mainBlogCommentForm table.contactTable p.contact-note {
  padding: 0;
  margin: 0;
  font-size: 85%;
}
#mainArticles table.contactTable .validator-form .validator-message-invalid,
#mainBlogCommentForm
  table.contactTable
  .validator-form
  .validator-message-invalid {
  padding-left: 24px;
}

/* blog --------------------*/
#mainBlogComments h2,
#mainBlogCommentForm h2 {
  font-size: 1.15em;
  margin: 0 0 8px;
  display: flow-root;
  padding: 16px 16px 16px 32px;
  border-radius: 4px;
  font-weight: bold;
  line-height: 1.5;
  position: relative;
}
#mainBlogComments h2:before,
#mainBlogCommentForm h2:before {
  content: "";
  width: 24px;
  height: 4px;
  margin: auto 8px auto 0;
  position: absolute;
  left: 0;
  top: 50%;
  bottom: 50%;
}
#mainBlogComments h3,
#mainBlogCommentForm h3 {
  font-size: 1em;
  margin: 1em 0;
  line-height: 1.4;
  font-weight: bold;
}

/* Responsive --------------------*/
@media only screen and (max-width: 1200px) {
  #mainArticles h2,
  #listTopics h2 {
    margin: 0 0 16px;
  }
  #mainTopics {
    padding-left: 5%;
    padding-right: 5%;
  }
  ul.topics {
    width: 100%;
  }
  .formConfirmation #mainArticles form {
    margin: 0 4%;
  }
}
@media only screen and (max-width: 600px) {
  /*Headline*/
  #mainTopics h2,
  .article h3,
  .gallery h3,
  .freeHtml h3 {
    margin: 0;
  }
  #mainTopics h2:after,
  .article h3:after,
  .gallery h3:after,
  .freeHtml h3:after {
    content: "";
    width: 40px;
    height: 4px;
    margin: 16px auto;
  }
  /*Topics*/
  ul.topics li p.description,
  ul.topics li h3 {
    padding: 0;
  }
  ul.topics li h3 {
    font-size: 1em;
  }
  ul.topics li p.description {
    font-size: 0.888em;
  }
  ul.topics li p.more {
    position: unset;
  }
  ul.topics li p.more a {
    display: block;
    margin-top: 0.5em;
  }
  ul.topics li .thumb {
    max-width: 80px;
    max-height: 60px;
    margin-right: 8px;
  }
  ul.topics li .thumb img {
    max-width: 80px;
    max-height: 60px;
  }
  #listTopics ul.topics li p.description {
    padding: 0;
  }
  /*Lists*/
  ol.number li:before {
    top: 14px;
  }
  ul.maru02 {
    font-size: 1em;
  }
  ul.maru02 li {
    width: 100%;
  }
  ul.maru02 li:before {
    margin-top: 0;
  }
  ol.pp,
  ul.ps,
  ul.notes,
  ul.maru {
    font-size: 1em;
  }
  ul.maru li {
    text-align: left;
  }
  /*Table*/
  .article table.normalTbl {
    font-size: 1em;
  }
  .article table.normalTbl th,
  .article table.normalTbl td {
    display: block;
    width: 100%;
    padding: 10px;
    text-align: center;
  }
  .article table.normalTbl td {
    font-weight: normal;
    padding-top: 0px;
  }
  .article table.bgTbl {
    font-size: 1em;
    border-left: none !important;
  }
  .article table.bgTbl tr th,
  .article table.bgTbl tr td {
    font-size: 1em;
    display: block;
    width: 100%;
    border-right: none !important;
  }
  .article table.bgTbl tr td {
    font-weight: normal;
  }
  /*Contact*/
  #mainArticles table.contactTable tr th,
  #mainArticles table.contactTable tr td,
  #mainBlogCommentForm table.contactTable tr th,
  #mainBlogCommentForm table.contactTable tr td {
    display: block;
    width: 100%;
  }
  #mainArticles table.contactTable tr:last-child th,
  #mainBlogCommentForm table.contactTable tr:last-child th {
    display: none;
  }
  #mainArticles table.contactTable input.button,
  #mainArticles table.contactTable input[type="button"],
  #mainBlogCommentForm table.contactTable input.button,
  #mainBlogCommentForm table.contactTable input[type="button"] {
    float: none;
    margin: auto;
    width: 50%;
    margin-bottom: 1em;
  }
}

/* ==========================================================================
   Contents Side (旧: contents_side.css)
   ========================================================================== */
/*SideContents*/
.sideContents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: 24px 0;
}

.sideContents .freeHtml {
  width: 100%;
}

.sideContents ul,
.sideContents dl {
  padding: 8px 0;
  font-size: 0.78em;
  font-weight: bold;
}

.sideContents ul li,
.sideContents dl dt {
  margin: 0;
  line-height: 1.75;
}

.sideContents dd {
  margin: 0;
}

.sideContents dd ul {
  padding: 0;
}

.sideContents ul li a,
.sideContents dt a {
  padding: 8px 16px;
  display: block;
  text-decoration: none;
}

.sideContents ul li a:before,
.sideContents dt a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-weight: bold;
  margin-right: 8px;
}

.sideContents dl ul li a {
  font-size: 1.2em;
}

.sideContents #sideContact {
  display: none;
}

.sideContents #sideBanners {
  width: 100%;
}

.sideContents #sideBanners * {
  border: none;
}

.sideContents #sideBanners ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.sideContents #sideBanners ul li {
  margin: 8px;
  padding: 0;
  text-align: center;
}

.sideContents #sideBanners ul li a {
  padding: 0;
  margin: 0;
}

.sideContents #sideBanners ul li a:before {
  content: none;
}

.sideContents #sideBanners ul li a:hover {
  background: none;
}

.sideContents #sideBanners ul li a img {
  max-width: 240px;
}

@media only screen and (max-width: 600px) {
  .sideContents ul,
  .sideContents dl {
    font-size: 0.888em;
  }
  .sideContents dt a {
    font-size: 1em;
  }
  .sideContents dl ul li a {
    font-size: 1em;
  }
}

/* ==========================================================================
   White Theme (旧: wht.css)
   ========================================================================== */
:root {
  --rose-900: #4d3a40;
  --rose-800: #5d414d;
  --rose-700: #6f4657;
  --rose-600: #7c4d63;
  --pink-50: #fffafc;
  --pink-100: #fff5f9;
  --pink-200: #fbe9f1;
  --pink-300: #f7c9d8;
  --pink-400: #f0bfd1;
  --pink-500: #e7a5bb;
  --pink-600: #d98ca6;
  --pink-700: #c16b8d;
  --pink-800: #8a5368;
}

/* BasicSetting --------------------*/
body {
  color: var(--rose-900);
}

/* Links --------------------*/
a {
  color: #c16b8d;
}
a:hover {
  color: #8a5368;
}

/* BasicLayout --------------------*/
#pankuz {
  color: #7f646d;
}
#pankuz a {
  color: #6f4155;
}

/*GlobalMenu*/
#topMenu_outer .topMenu li a {
  color: #6f4657;
}
#topMenu_outer .topMenu li a:hover {
  opacity: 0.7;
}

/*Footer*/
#footer {
  background: rgba(244, 132, 159);
}
#footer * {
  color: #fff;
}

#footer_body .topMenu li a {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
#footer_body .topMenu li a:before {
  color: #fff;
}
#footer_body .topMenu li a:hover {
  background-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/*SideContents*/
.sideContents ul li,
.sideContents dl dt {
  border-top: solid 1px rgba(212, 164, 181, 0.45);
}
.sideContents ul li a,
.sideContents dt a {
  color: #4d3a40;
}
.sideContents ul li a:hover,
.sideContents dt a:hover {
  background: #fbe9f1;
  color: #7c4d63;
}
/* ArticlesLayout --------------------*/
/*LayoutOptions*/
.gallery.bg {
  background: #fff7fa;
}
.article.theme,
.gallery.theme {
  background: linear-gradient(135deg, #f7dfe8 0%, #efbfd0 100%);
  color: #fff;
}
.article.theme h3,
.gallery.theme h3 {
  color: #fff;
}
.article.theme h3:after,
.gallery.theme h3:after {
  background: rgba(255, 255, 255, 0.7);
}
.article.theme h5,
.gallery.theme h5 {
  border-left: solid 4px rgba(255, 255, 255, 0.7);
}
.article.gray,
.gallery.gray {
  background: #f8f3f5;
}

/* Headline --------------------*/
#mainArticles h2,
#listTopics h2 {
  color: rgba(244, 132, 159);
}

#mainArticles .article h2 {
  color: #5d414d;
  background: #fff;
}
#mainArticles .article h2:after {
  background: #eab6c7;
}

/*h3*/
#mainTopics h2,
.article h3,
.gallery h3,
.freeHtml h3 {
  color: #62444f;
}
#mainTopics h2:after,
.article h3:after,
.gallery h3:after,
.freeHtml h3:after {
  background: linear-gradient(90deg, #f09dbd 0%, #d88ca6 100%);
}

.article h3 a,
.gallery h3 a {
  color: #62444f;
}
.article h3 a:hover,
.gallery h3 a:hover {
  color: #7c4d63;
}

/*h4 h5 h6*/
.article h4 {
  color: #62444f;
  background: #fff;
  border: solid 1px rgba(214, 166, 183, 0.4);
}

.article h5 {
  border-left: solid 4px #e5a7bb;
}
.article h6 {
  color: #62444f;
  background: #fdf0f5;
}
.article h6:before {
  color: #d78ca5;
}

/* Topics --------------------*/
#mainTopics {
  background: #fff5f9;
}
#mainTopics .listview a {
  background: linear-gradient(135deg, #f0bfd1 0%, #d98ca4 100%);
  color: #fff;
}
#mainTopics .listview a:hover {
  background: linear-gradient(135deg, #e3a8ba 0%, #c77793 100%);
}

ul.topics li {
  background: #fff;
}
ul.topics li p.date {
  color: #fff;
  background: linear-gradient(135deg, #f0bfd1 0%, #d98ca4 100%);
}
ul.topics li h3 a {
  color: #c16b8d;
}
ul.topics li h3 a:hover {
  color: #8a5368;
}
ul.topics li p.more a {
  background: linear-gradient(135deg, #f0bfd1 0%, #d98ca4 100%);
  color: #fff;
}
ul.topics li p.more a:hover {
  background: linear-gradient(135deg, #eaa9bf 0%, #c87192 100%);
}

#listTopics ul.topics li {
  border-bottom: dashed 1px rgba(218, 170, 188, 0.65);
}

/* Items --------------------*/
/* Buttons -----*/
a.btn {
  color: #fff;
  background: linear-gradient(135deg, #f1bfd1 0%, #d98ca5 100%);
}
a.btn:hover {
  background: linear-gradient(135deg, #eaa9bf 0%, #cc7d98 100%);
}

/* Tables -----*/
.article {
  /*NormalTable*/
  /*BGTable*/
  /*FlowTable*/
}
.article table.normalTbl {
  border-top: solid 1px #ccc;
}
.article table.normalTbl td,
.article table.normalTbl th {
  border-bottom: dotted 1px #ccc;
}
.article table.normalTbl th {
  background: #fff;
}
.article table.normalTbl tr:last-child td,
.article table.normalTbl tr:last-child th {
  border-bottom: solid 1px #ccc;
}
.article table.bgTbl {
  border-top: solid 4px #fff;
  border-left: solid 4px #fff;
}
.article table.bgTbl tr th,
.article table.bgTbl tr td {
  border-bottom: solid 4px #fff;
  border-right: solid 4px #fff;
}
.article table.bgTbl tr th {
  background: #2ca9e1;
  color: #fff;
}
.article table.bgTbl tr td {
  background: #eaf4fc;
}
.article table.bgTbl tr:last-child th,
.article table.bgTbl tr:last-child td {
  border-bottom: solid 4px #fff;
}
.article table#flowTbl strong {
  background: #fff;
}
.article table#flowTbl td {
  border: solid 5px #89c3eb;
  background: #eaf4fc;
}
.article table#flowTbl td:after {
  color: #7e9fb1;
}
.article table#flowTbl tr:last-of-type td:after {
  content: none;
}

/* Lists -----*/
ul.maru02 li:before {
  color: #a0d8ef;
}

/* Contact --------------------*/
#mainArticles,
#mainBlogCommentForm {
  /*contactTable*/
}
#mainArticles .notice_block h4,
#mainBlogCommentForm .notice_block h4 {
  color: #000;
}
#mainArticles .notice_block .notice_address,
#mainBlogCommentForm .notice_block .notice_address {
  background: #efefef;
}
#mainArticles p.contact-note,
#mainBlogCommentForm p.contact-note {
  color: #999;
}
#mainArticles form,
#mainBlogCommentForm form {
  background: #89c3eb;
}
#mainArticles .envelope,
#mainBlogCommentForm .envelope {
  background: #ebf6f7;
}
#mainArticles table.contactTable,
#mainBlogCommentForm table.contactTable {
  border-top: solid 2px #fff;
  border-left: solid 2px #fff;
}
#mainArticles table.contactTable tr th,
#mainArticles table.contactTable tr td,
#mainBlogCommentForm table.contactTable tr th,
#mainBlogCommentForm table.contactTable tr td {
  border-bottom: solid 2px #fff;
  border-right: solid 2px #fff;
}
#mainArticles table.contactTable tr th,
#mainBlogCommentForm table.contactTable tr th {
  background: #89c3eb;
  color: #fff;
}
#mainArticles table.contactTable tr td,
#mainBlogCommentForm table.contactTable tr td {
  background: #eaf4fc;
}
#mainArticles table.contactTable tr td.th_headline,
#mainBlogCommentForm table.contactTable tr td.th_headline {
  background: #a0d8ef;
  color: #fff;
}
#mainArticles table.contactTable tr.must th,
#mainBlogCommentForm table.contactTable tr.must th {
}
#mainArticles table.contactTable .textField,
#mainBlogCommentForm table.contactTable .textField {
  background: #fff;
}
#mainArticles table.contactTable input[type="text"],
#mainArticles table.contactTable input[type="email"],
#mainArticles table.contactTable input[type="password"],
#mainArticles table.contactTable textarea,
#mainArticles table.contactTable select,
#mainBlogCommentForm table.contactTable input[type="text"],
#mainBlogCommentForm table.contactTable input[type="email"],
#mainBlogCommentForm table.contactTable input[type="password"],
#mainBlogCommentForm table.contactTable textarea,
#mainBlogCommentForm table.contactTable select {
  border: solid 1px #b6b6b6;
  background: #fff;
}
#mainArticles table.contactTable input.button,
#mainArticles table.contactTable input[type="button"],
#mainBlogCommentForm table.contactTable input.button,
#mainBlogCommentForm table.contactTable input[type="button"] {
  color: #fff;
  background: #aaa;
}
#mainArticles table.contactTable input.button,
#mainBlogCommentForm table.contactTable input.button {
  background: #a0d8ef;
}

/* blog --------------------*/
#mainBlogComments h2,
#mainBlogCommentForm h2 {
  color: #000;
  background: #fff;
  border: solid 1px #ccc;
}
#mainBlogComments h2:before,
#mainBlogCommentForm h2:before {
  background: #a0d8ef;
}

@media only screen and (max-width: 600px) {
  #toggle {
    background: #a0d8ef;
  }

  #toggle::before,
  #toggle::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: 27px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transform-origin: center;
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }

  #toggle::before {
    transform: translateY(-8px);
    box-shadow: 0 8px 0 #fff;
  }

  #toggle::after {
    transform: translateY(8px);
  }

  .active #toggle::before {
    transform: rotate(45deg);
    box-shadow: none;
  }

  .active #toggle::after {
    transform: rotate(-45deg);
  }
  #topMenu_outer .topMenu li {
    border: none;
    border-top: solid 1px #cadbe4;
  }
  #topMenu_outer .topMenu li:last-of-type {
    border: none;
    border-top: solid 1px #cadbe4;
    border-bottom: solid 1px #cadbe4;
  }
  #topMenu_outer .topMenu li a {
    color: #000;
  }
  #topMenu_outer .topMenu li a:hover {
    color: #fff;
  }
  /* Tables -----*/
  .article table.normalTbl {
    border-top: none;
    border-bottom: solid 1px #ccc;
  }
  .article table.normalTbl td,
  .article table.normalTbl th {
    border: none;
  }
  .article table.normalTbl th {
    border-top: solid 1px #ccc;
  }
  .article table.normalTbl td {
    border-top: dotted 1px #ccc;
  }
  .article table.normalTbl tr:last-child td,
  .article table.normalTbl tr:last-child th {
    border-bottom: none;
  }
}

/* ==========================================================================
   SP / Custom Overrides (旧: basic_sp.css)
   ========================================================================== */
/*レスポンシブ02 ホワイト*/
body {
  font-weight: normal;
  line-height: 1.8;
  font-family:
    "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ,
    "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic",
    YuGothic, "MS PGothic", Osaka, arial, sans-serif;
}
.article table.normalTbl,
.sideContents ul,
.sideContents dl {
  font-size: 100%;
  padding: 0 0 6px;
  color: #333;
}
.article .article_center .image {
  width: 100%;
  overflow: hidden;
}

.article .article_center .image img {
  display: block;
  width: 80%;
  margin-inline: auto;
  max-width: 100%;
  aspect-ratio: 328 / 200;
  object-fit: contain;
}
@media only screen and (max-width: 600px) {
  .article .article_center .image img {
    width: 77%;
  }
}

.article.col2.zero_margin {
  margin-bottom: 10px;
}
.mainImage #slider li {
  height: auto !important;
}
#mainTopics {
  background: transparent;
}
#mainContents {
  background: transparent;
}
.article.bg,
.gallery.bg {
  border-style: inset;
  border-width: 3px;
  border-radius: 24px;
  border-color: rgba(244, 132, 159, 0.4);
}
.sideContents dl ul li a,
ul.topics li p.description {
  font-size: 1em;
}
.notation {
  margin: 0 0 6px;
  font-size: 0.9em;
}
a,
ul.topics li h3 a {
  transition: 0.2s;
}
#topMenu_outer .topMenu li a {
  line-height: 2.2em;
  font-feature-settings: "palt";
  font-size: 1em;
}
#slider li.slick-slide {
  transition: opacity 1.4s ease 0s !important;
}
#info-link.max .gallery_grid li {
  margin: 10px;
  width: 23.5%;
}
.article.col2.bg p {
  margin: 0;
}
/*パーツ*/
#mainArticles .envelope {
  box-shadow: 0 1px 1px 0 inset rgba(204, 204, 204, 0.7);
}
#mainArticles .bg .envelope {
  margin: 0;
}
.align-c {
  text-align: center !important;
}
.link-wrap {
  margin: 14px 0 20px;
}
ol.pp,
ul.maru {
  font-size: 1em;
  margin-bottom: 12px;
}
ul.maru li {
  line-height: 1.4em;
  margin-bottom: 10px;
}
strong {
  background: linear-gradient(transparent 40%, rgba(255, 232, 182, 0.8) 40%);
}
#mainArticles .envelope {
  text-align: left;
}
.article.img300 .image {
  max-width: 300px;
}
.article.img128 .image {
  max-width: 128px;
}
.effect-articles {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2em;
  align-items: stretch;
}
.effect-articles > .article {
  margin: 0;
}

/*ヘッダー*/
#title #title_outer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 110px;
  background: none;
  padding: 18px 24px 14px;
  box-sizing: border-box;
  max-width: 1180px;
  margin: 0 auto;
}
#title_body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
}
#title h1:hover {
  opacity: 1;
}
#title h1 a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: auto;
  height: auto;
  overflow: visible;
  text-indent: 0;
  white-space: normal;
  font-size: 0;
  line-height: 1.2;
  width: 100%;
  height: 100%;
}
.header-contact {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-left: auto;
}
.header-contact__text {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1em;
}
.header-contact__text .phone-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.header-contact__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  color: rgba(244, 132, 159);
  font-size: 1.6em;
  margin-top: 0.2em;
  box-shadow: none;
  flex-shrink: 0;
}
.header-contact__text .phone {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-size: clamp(24px, calc(16px + 1.4vw), 44px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: #33363d;
  font-weight: 500;
}
.header-contact__text .meta {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 1px;
  font-size: 1em;
  line-height: 1.25;
  color: #4b4b4b;
  font-weight: 500;
}
.header-contact__text .meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.header-contact__text .meta-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 20px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 2px;
  background: rgb(176, 234, 236, 0.6);
  color: #16bfc7;
  font-size: 0.92em;
  font-weight: 500;
  letter-spacing: 0;
}
.header-contact__text .meta-value {
  color: #4d4f55;
  font-size: 1.02em;
  letter-spacing: -0.02em;
}
#wrap_body #topMenu {
  background: rgba(244, 132, 159, 0.1);
}
#topMenu_outer li a {
  overflow: hidden;
  font-size: 1.1em;
}
#topMenu_outer .topMenu li a:hover {
  color: #24b8b9;
}

@media only screen and (max-width: 920px) {
  #title #title_outer,
  #title h1 {
    margin-top: 0;
  }
  #title #title_outer {
    background-position: right top 20px;
    padding: 0 20px;
    min-height: 64px;
  }
}

/*headline*/
#mainArticles h2,
#listTopics h2,
#mainArticles .article h2,
.mainContents .article h3,
#mainTopics h2,
#listTopics h2,
.mainContents div.gallery h3,
.article h4,
#mainServices h2,
#topMenu_outer .topMenu li a,
.article table#flowTbl strong {
  font-family:
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,
    sans-serif;
  font-weight: 600;
}
#mainArticles h2,
#listTopics h2 {
  font-size: 2em;
  letter-spacing: 0.1em;
  padding: 20px 0;
}
#mainTopics h2,
#mainArticles .article h2,
.article h3,
.gallery h3,
.freeHtml h3 {
  font-size: 1.9em;
  line-height: 1.4em;
  background: none;
}
#mainTopics h2::after,
#mainArticles .article h2::after,
.article h3::after,
.gallery h3::after,
.freeHtml h3::after {
  height: 6px;
  border-radius: 999px;
  margin-top: 24px;
}
#mainArticles h2 span.sp-br {
  margin: 0;
}
#mainArticles div[id^="blog"] h2 {
  margin: 30px 0 0;
}
.mainContents .article h4 {
  border: none;
  background: none;
  font-size: 1.5em;
  line-height: 1.3em;
  margin: 20px 0;
  padding: 10px 0 0;
}
.article h4::before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  font-weight: bold;
  color: rgba(244, 132, 159);
  margin: 0;
  position: unset;
  background: none;
  padding-right: 10px;
}
.article.col2 h4 {
  border-bottom: solid 2px;
  border-radius: unset;
  padding-bottom: 6px;
}
.article.col2 h4::before {
  content: none;
}

.article h5 {
  border: none;
  border-bottom: solid 2px;
  padding: 8px 0;
  font-size: 1.25em;
  margin: 10px 0 12px;
  letter-spacing: 0.1em;
}

.article h6 {
  background: rgba(255, 255, 255, 0.8);
  font-size: 1.1em;
  border-radius: 40px;
  padding: 8px 20px 8px 44px;
  line-height: 1.4em;
  position: relative;
}
.article h6:before {
  font-family: "Font Awesome 5 Free";
  content: "\f06a";
  font-weight: bold;
  margin-right: 6px;
  transform: unset;
  position: absolute;
  left: 18px;
}

/*リンク*/
a.btn {
  border-radius: 8px;
  transition: all 0.2s linear;
  padding: 8px 0;
  max-width: 600px;
  margin: 10px auto 0;
}
a.btn:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
a.btn::after {
  content: "\f138";
}
.col3 a.btn {
  display: inline-block;
  width: 32.6%;
}
.freeHtml_body a.btn {
  max-width: 300px;
}
ul.topics li p.date,
ul.topics li p.more a {
  background: #666;
}

#mainTopics .listview a {
  background: #ff4b8e;
}
p.contact {
  max-width: 560px;
  margin: 0 auto 40px;
}
.icon.article .image {
  max-width: 64px;
  margin: 0 auto;
}
a.tel-link {
  font-size: 1.3em;
}
a.tel-link::before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  content: "\f095";
  font-weight: bold;
  transform: rotate(90deg);
  padding-right: 6px;
  vertical-align: middle;
  font-size: 0.9em;
  color: #007fe4;
}

/*サイト案内
--------------------*/
#info-link .gallery_grid li.galleryGrid .image a {
  box-sizing: border-box;
  border-radius: 100%;
  border: 3px solid rgba(244, 132, 159);
  max-width: 128px;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
  background: #fff;
  text-decoration: none;
}
#info-link .gallery_grid li.galleryGrid .image a i {
  font-size: 3em;
  line-height: 1;
  color: var(--pink-600);
  transition:
    transform 0.2s ease,
    color 0.2s ease;
}
#info-link .gallery_grid li.galleryGrid .image a:hover {
  border-color: var(--pink-600);
  background: var(--pink-100);
  box-shadow: 0 0 6px 1px rgba(190, 185, 177, 0.35);
}
#info-link .gallery_grid li.galleryGrid .image a:hover i {
  transform: translateY(-2px) scale(1.04);
  color: var(--pink-700);
}
#info-link .gallery_grid li.galleryGrid a:hover,
#info-link .gallery_grid li.galleryGrid a:hover img {
  opacity: 1;
}
#info-link .comment {
  font-size: 0.9em;
  font-feature-settings: "palt";
  margin-bottom: 10px;
}

#site-link .comment {
  font-size: 0.9em;
  color: #fff;
  font-weight: bold;
  text-align: center;
  display: block;
  width: calc(100% - 10px);
  position: absolute;
  bottom: 0;
  background: rgb(13 168 55 / 80%);
  margin-bottom: 0;
  padding: 7px 5px;
  border-radius: 0 0 4px 4px;
}
#site-link .galleryGrid_outer {
  padding: 0 5px 0;
}
#site-link .image {
  margin: 0;
}
#site-link .image img {
  border: solid 2px #0da837;
  border-radius: 4px;
}
#site-link li.galleryGrid {
  margin-bottom: 20px;
}
#contact .image img {
  max-width: 800px;
  width: 100%;
}

/*リスト*/
ul.faq li.qus,
ul.faq li.ans {
  margin-bottom: 8px;
}
ul.faq li.qus {
  color: #222;
}
ul.faq li.qus:before,
ul.faq li.ans:before {
  background: none;
  font-size: 1.4em;
  font-weight: bold;
  margin-left: -37px;
}
ul.faq li.qus::before {
  color: rgb(112, 111, 111);
}
ul.faq li.ans::before {
  color: rgba(244, 132, 159);
}
ul.check li {
  font-size: 1em;
  padding: 0 0 0 8px;
  margin-bottom: 6px;
  font-weight: normal;
}
ul.check li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.1em;
  transform: unset;
  color: rgb(240, 117, 146);
  width: auto;
  height: auto;
  padding: 2px;
  top: 0;
}
ul.check.col2,
ul.check.col3 {
  display: block;
  flex-wrap: unset;
}
ul.check.col2 li,
ul.check.col3 li {
  display: inline-block;
  width: 44%;
}
ul.check.col3 li {
  width: 30%;
}
.menubox {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.menubox li {
  width: 44%;
}
.menubox.col3 li {
  width: 32.2%;
}
.menubox.col4 li {
  width: 23%;
}
.menubox li a {
  display: block;
  background: #20486e;
  border-radius: 999px;
  text-align: center;
  padding: 6px;
  font-weight: normal;
  color: #fff;
  text-decoration: none;
}
.menubox li a:hover {
  background-color: #326ea6;
}
.menubox li a:before {
  padding-right: 6px;
  color: #fff33b;
  font-family: "Font Awesome 5 Free";
  content: "\f107";
  font-weight: bold;
}
ul.maru.col2,
ul.maru.col3 {
  display: flex;
  flex-wrap: wrap;
}
ul.maru.col2 li {
  width: 50%;
  font-feature-settings: "palt";
}
ul.maru.col3 li {
  width: 33%;
  font-feature-settings: "palt";
}
ul.maru li:before {
  margin-left: -16px;
  margin-right: 4px;
  font-size: 0.6em;
  vertical-align: middle;
  color: rgba(244, 132, 159);
}
.envelope ul.maru {
  margin-bottom: 0;
}
#mainArticles table.contactTable input.button {
  background: #ff4990;
}
#mainArticles table.contactTable input.button,
#mainArticles table.contactTable input[type="button"] {
  border-radius: 4px;
}

/*テーブル*/
.article table.normalTbl.half {
  width: 52%;
  margin-top: 0;
}
.article table.normalTbl,
.article table.normalTbl tr:last-child td,
.article table.normalTbl tr:last-child th {
  border: none;
}
.article table.normalTbl th,
.article table.normalTbl tr:last-child th {
  background: none;
  font-weight: 600;
}
.article.col2 table.normalTbl th {
  width: auto;
  line-height: 1.4em;
  padding-top: 0;
}
.article.col2 table.normalTbl th,
.article.col2 table.normalTbl td {
  font-size: 0.9em;
  font-feature-settings: "palt";
}
.article.col2 table.normalTbl th {
  white-space: nowrap;
}
.article table#flowTbl td {
  border: none;
  background: #fff;
  border-radius: 8px;
}
.article table#flowTbl strong {
  background: none;
  border-bottom: solid 1px #24b8b9;
  font-size: 1.3em;
  padding: 8px 0 6px;
}
.article table#flowTbl td:after {
  color: #cfcdc5;
  bottom: -1em;
  line-height: 1em;
}

.article table.normalTbl.price {
  font-size: 0.9em;
  text-align: center;
}
.article table.normalTbl.price th {
  width: auto;
  white-space: nowrap;
  text-align: center;
  font-feature-settings: "palt";
}
.article table.normalTbl.price td:nth-child(even) {
  background: rgb(255 255 255 / 0.5);
}
.article table.normalTbl.price td {
  font-feature-settings: "palt";
  background: #fff;
}

/*flow*/
.mainArticles .article.flow {
  position: relative;
  overflow: visible;
  padding-bottom: 20px;
  margin: 0;
}
.mainArticles .article.flow::after {
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  color: #bebab2;
  content: "\f107";
  font-size: 3em;
  position: absolute;
  text-align: center;
  bottom: -14px;
  left: 0;
  right: 0;
  margin: auto;
  line-height: 1em;
}

/*side Table*/
#sideContents table.normalTbl {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 10px auto;
  width: 100%;
}
#sideContents table.normalTbl th {
  height: auto;
  width: 25%;
  padding: 6px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: solid 1px #ccc;
}
#sideContents table.normalTbl td {
  border-bottom: solid 1px #ccc;
  background: none;
  height: auto;
  line-height: 1.6em;
  padding: 6px;
}

.sideContents ul.maru {
  margin-bottom: 0;
  padding: 0;
}
.sideContents ul.maru li {
  border: none;
  font-weight: normal;
  text-align: left;
}

.img600,
.img240 {
  margin: 0 0 20px;
}
#wrap .img600 img,
#wrap .img240 img {
  width: 100%;
  max-width: 600px;
  margin-bottom: 20px;
}
#wrap .img240 img {
  max-width: 240px;
}

/*contact*/

#mainArticles table.contactTable,
#mainArticles table.contactTable tr th,
#mainArticles table.contactTable tr td {
  border-color: #ccc;
  border-width: 1px;
}
#mainArticles form {
  background: none;
  padding: 0;
}
#mainArticles table.contactTable tr th {
  background-color: unset;
  border-right: none;
  color: #333;
}
#mainArticles table.contactTable tr td {
  background: #fff;
  border-right: none;
}
#mainArticles table.contactTable {
  border-left: none;
}

#mainArticles table.contactTable p.contact-note {
  color: #24b8b9;
  font-weight: bold;
  font-feature-settings: "palt";
  font-size: 14px;
  line-height: 1.4em;
  margin-top: 10px;
}

/*footer side*/
#sideContents {
  background: #fff;
  position: unset;
}
#wrap_body #contents {
  position: unset;
}
.side-logo {
  margin: 20px 0;
}
#wrap .side-logo img {
  max-width: 240px;
  width: 100%;
  margin: 0 auto 10px;
  display: block;
}
#footer * {
  color: #222;
}
#footer_body .topMenu li a:hover {
  background: none;
  color: #fff;
}
#footer_body .topMenu li a {
  background: none;
}
#wrap_body #footer {
  padding-top: 16px;
}
#footer_body .topMenu li a {
  color: #555;
}
#footer_body {
  padding: 0 0 46px;
}
#footer_body,
#footer_body .topMenu {
  display: block;
  width: 100%;
}
#footer_body .topMenu {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  flex-direction: unset;
  margin-bottom: 0;
}
#footer_body .topMenu li {
  margin-right: 20px;
}
#footer_body .copyright {
  padding: 14px 0;
}
#footer_body .copyright,
#footer_body .copyright a {
  font-weight: normal;
  color: #fff;
}

#footer_body .topMenu li a {
  padding: 0;
}

/*--------------------------------------------
--------------------------------------------*/
@media only screen and (min-width: 820px) {
  .sideContents #sideBanners ul {
    flex-wrap: inherit;
  }
  .sideContents #sideBanners ul li img {
    max-height: 100px;
  }
  .col2.article h3,
  .col3.article h3 {
    font-size: 1.6em;
    padding: 0 0 10px;
  }
  .article.col3 {
    flex-basis: 30%;
  }
}

@media only screen and (max-width: 980px) {
  ul.check.col3 li {
    min-width: 280px;
    width: auto;
  }
  .article table.normalTbl.half,
  ul.maru.col2 li,
  ul.maru.col3 li,
  ul.check.col2 li {
    width: 100%;
  }
}

@media only screen and (max-width: 700px) {
  #title #title_outer {
    background: none;
    height: 56px;
  }
}
@media only screen and (max-width: 540px) {
  #mainArticles .envelope.align-c.serif {
    font-size: 1em !important;
    text-align: left !important;
    font-feature-settings: "palt";
  }
}
@media only screen and (max-width: 600px) {
  #toggle,
  .active #toggle {
    background-color: #25b8ba;
  }
  .header-contact__text {
    display: none;
  }
  .article.col2.zero_margin,
  .article.col3.zero_margin {
    margin: 0;
  }
  #info-link .comment {
    font-size: 0.8em;
  }
  ul.check li {
    font-size: 18px;
  }
  .contact-img a {
    width: 100%;
    margin-bottom: 12px;
  }
  .menubox {
    display: block;
  }
  .menubox li {
    width: 100%;
    margin-bottom: 12px;
  }
  ul.faq li.qus:before,
  ul.faq li.ans:before {
    margin-left: -38px;
  }
  .col3 a.btn {
    width: 100%;
    display: block;
    margin-bottom: 8px;
  }
  ul.maru.col3 li {
    display: block;
    margin: 0 0 4px;
  }
  #wrap_body #topMenu {
    order: 1;
  }
  #sideContents table.normalTbl th,
  #sideContents table.normalTbl td {
    display: block;
    width: 100%;
    padding: 8px;
    text-align: center;
  }
  #sideContents table.normalTbl th {
    font-weight: bold;
  }
  #sideContents table.normalTbl td {
    border-bottom: solid 2px #222;
  }
  .sideContents #sideBanners ul li a img {
    max-width: 100%;
  }
  .col2 .btn {
    width: 100%;
    display: block;
    margin-bottom: 4px;
  }
  #info-link .gallery_grid li.galleryGrid .image img {
    width: 100%;
  }
  .article table.normalTbl td {
    border-top: none;
  }
  .article table.normalTbl.price td {
    text-align: center;
  }
  #title #title_outer {
    height: 52px;
  }
  #topMenu_outer .topMenu li a:hover::before {
    content: none;
  }
  #topMenu_outer .topMenu li a:hover:before {
    content: none;
  }
  #topMenu_outer .topMenu li a {
    line-height: 1.25em;
    font-weight: normal;
  }
  #mainArticles h2,
  #listTopics h2 {
    font-size: 1.5em;
    letter-spacing: 0.01em;
    line-height: 1.3em;
    padding: 14px 0;
  }
  #mainTopics h2::after,
  #mainArticles .article h2::after,
  .article h3::after,
  .gallery h3::after,
  .freeHtml h3::after {
    margin: 14px auto;
  }
  .mainContents .article h4 {
    font-size: 1.3em;
  }
  .mainContents .article.col2 h4 {
    padding-top: 0;
  }
  #mainTopics h2,
  #mainArticles .article h2,
  .article h3,
  .gallery h3,
  .freeHtml h3 {
    font-size: 1.4em;
    line-height: 1.4em;
    padding-bottom: 6px;
  }
  .menubox li,
  .menubox.col3 li,
  .menubox.col4 li {
    float: unset;
    width: 100%;
    display: block;
    margin: 6px 0;
    font-size: 0.9em;
    font-feature-settings: "palt";
  }

  #mainArticles table.contactTable tr.must th {
    padding: 1em;
    padding-right: 50px;
  }
  .article table.normalTbl th {
    text-align: center;
    font-weight: bold;
  }
  #footer_body .topMenu li,
  #footer_body .services li {
    width: 100%;
  }
  #footer_body .topMenu,
  #footer_body .services {
    display: block;
    margin-left: 4%;
    margin-bottom: 16px;
  }
  #footer_body .topMenu li,
  #footer_body .services li {
    margin-right: 4px;
  }

  #contact .gallery_grid li.galleryGrid {
    width: 100%;
    float: unset;
  }

  /*call*/
  #bottomLink {
    position: fixed;
    display: block;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 1000;
    height: 50px;
    overflow: hidden;
  }
  #bottomLink a {
    display: block;
    color: #fff;
    background: #00b836;
    text-decoration: none;
    line-height: 3.4em;
    height: 100%;
  }
  #bottomLink a::before {
    font-family: "Font Awesome 5 Free";
    content: "\f105";
    font-weight: bold;
    margin-right: 10px;
    color: yellow;
  }
  #wrap {
    margin-bottom: 4px;
  }
}

.section-recruit-hiring-banner h3::after {
  content: none;
}

/* 求人ページ「働くメリット」カード（独立コンポーネント、.article/.col2/.col3 に依存しない） */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2em;
  justify-content: center;
  max-width: 1200px;
  width: 88%;
  margin: 0 auto 40px;
}
.benefit-card {
  text-align: center;
}
.benefit-card__icon img {
  display: block;
  width: 80%;
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: 328 / 200;
  object-fit: contain;
}
.benefit-card__title {
  border: none;
  border-bottom: solid 2px;
  padding: 8px 0;
  font-size: 1.25em;
  margin: 10px 0 12px;
  letter-spacing: 0.1em;
}
.benefit-card__text {
  margin-bottom: 1em;
}
@media only screen and (max-width: 600px) {
  .benefits-grid {
    width: 100%;
    padding: 0 5%;
    gap: 24px;
  }
  .benefit-card__icon img {
    width: 77%;
  }
}

.section-work-styles .image {
  max-height: 220px;
}
.section-work-styles .image img {
  max-height: 220px;
  width: auto;
  object-fit: contain;
}