@charset "UTF-8";

:root {
  --sph: clamp(3px, 2.4444px + 0.1389vw, 4px);
  --sp1: clamp(6px, 4.8889px + 0.2778vw, 8px);
  --sp2: clamp(12px, 9.7778px + 0.5556vw, 16px);
  --sp3: clamp(18px, 14.6667px + 0.8333vw, 24px);
  --sp4: clamp(24px, 19.5556px + 1.1111vw, 32px);
  --sp5: clamp(36px, 29.3333px + 1.6667vw, 48px);
  --sp6: clamp(48px, 39.1111px + 2.2222vw, 64px);
  --sp7: clamp(72px, 58.6667px + 3.3333vw, 96px);
  --sp8: clamp(96px, 78.2222px + 4.4444vw, 128px);
  --sp9: clamp(144px, 117.3333px + 6.6667vw, 192px);
  --sp10: clamp(192px, 156.4444px + 8.8889vw, 256px);

  --fz1: clamp(1.11rem, 0.1vw + 1.06rem, 1.18rem);
  --fz2: clamp(1.24rem, 0.24vw + 1.15rem, 1.42rem);
  --fz3: clamp(1.4rem, 0.42vw + 1.23rem, 1.7rem);
  --fz4: clamp(1.57rem, 0.65vw + 1.32rem, 2.04rem);
  --fz5: clamp(1.77rem, 0.94vw + 1.4rem, 2.45rem);
  --fz6: clamp(1.99rem, 1.31vw + 1.47rem, 2.94rem);
  --fz7: clamp(2.24rem, 1.78vw + 1.53rem, 3.53rem);
  --fz8: clamp(2.52rem, 2.37vw + 1.57rem, 4.23rem);
  --fz9: clamp(2.84rem, 3.11vw + 1.59rem, 5.08rem);
  --fz10: clamp(3.19rem, 4.03vw + 1.58rem, 6.09rem);
}

/* base */

:root {
  font-family: roboto,
    'Helvetica Neue',
    'Segoe UI',
    'BIZ UDPGothic',
    'Hiragino Sans',
    'Hiragino Kaku Gothic ProN',
    meiryo,
    sans-serif;
  font-weight: normal;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-spacing-trim: trim-start;
  line-break: strict;
}

html {
  font-size: 62.5%;
}

body {
  position: relative;
  min-height: 100vh;
  font-size: var(--fz3);
  color: #333;
}

:where(:any-link) {
  color: #3c61c2;
  text-decoration-line: none;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.25em;
  transition: color 0.2s;
}


b,
strong {
  font-weight: bold;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}


/* blog共通 */
.blog-title {
  text-align: center;
  background: url('/img/blog/bg_bloghead.webp');
}

#blog_container {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--sp4);
  max-width: 1168px;
  padding-inline: 24px;
  margin-inline: auto;
  margin-top: var(--sp4);
}

@media (max-width: 960px) {
  #blog_container {
    grid-template-columns: 1fr;
  }
}

/* Form
-------------------------------------------------------------- */

input[type="text"],
select {
  --_c-bg: #fafafa;
  --_c-bg-error: #fce7e7;
  --_c-bg-focus: #f2f8fe;
  --_c-border: #bbb;
  --_c-border-focus: #5e93c5;
  --_c-border-error: #c55e5e;
  --_c-placeholder: #999;
  --_padding: 0.5em;
  --_min-rows: 5;
  --_max-rows: 20;
  --_size-border: 1px;

  width: 100%;
  padding: var(--_padding);
  font-size: 16px;
  font-weight: 400;
  outline: none;
  background-color: var(--_c-bg);
  border: var(--_size-border) solid var(--_c-border);
  border-radius: 4px;
  box-shadow: 0 2px 3px rgb(0 0 0 / 8%) inset;
  transition: 0.2s;


  &:focus {
    background-color: var(--_c-bg-focus);
    border-color: var(--_c-border-focus);
    transition: 0.2s;
  }

}

select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='%23999' d='M0 5.9 1.87 4 8 10.22 14.13 4 16 5.9 8 14 0 5.9Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.blog_search {
  display: flex;
  flex-flow: wrap;
  gap: var(--sp1);
}

.blog_search__btn {
  background: #ccc;
  padding: 0.25em 1em;
  border-radius: var(--sph);
  display: inline-block;
}

/* search */

.widget_search {
  padding-bottom: var(--sp3);
}

/* Headeer/Footer
-------------------------------------------------------------- */


.blogHeader {
  padding: var(--sp1) var(--sp2) var(--sph);
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(255  255 255 / 80%);
}

.blogHeader::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 4px;
  content: '';
  background: linear-gradient(to right, #005bab 50%, #00b1c3);
}

.blogFooter {
  margin-top: var(--sp6);
  background: #204063;
  padding: var(--sp5);
  text-align: center;
}

.footerBlogMenu {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  gap: var(--sp1) var(--sp2);
  margin-top: var(--sp2);
}

.footerBlogMenu a {
  text-decoration: underline;
  color: #fff;
  transition: opacity 0.2s;
}

.footerBlogMenu a:hover {
  opacity: 0.8;
}

.copyright {
  margin-top: var(--sp4);
  color: #fff;
}

/* Content
-------------------------------------------------------------- */

#blog_content .post {
  position: relative;
  padding-bottom: var(--sp4);
  margin-bottom: var(--sp4);
}

/* カテゴリ */
.page-title {
  padding: 1em;
  font-weight: bold;
  color: #fff;
  background: #004693;
  border-radius: var(--sph);
}


.entry-title {
  padding: 0.8em;
  font-size: var(--fz4);
  font-weight: bold;
  line-height: 1.25em;
  color: #fff;
  background: #274fa7;
  border-bottom: 1px solid #fff;
  box-shadow: 0 6px 6px -2px rgb(45 86 176 / 30%);
}

.entry-title a {
  color: #fff;
  text-decoration: none;
}

.entry-title a:hover {
  color: #9abaff;
}

.entry-meta {
  margin-block: 1em;
  color: #696969;
  text-align: right;
}

.entry-content,
.entry-summary {
  margin-block: 1em;

  p,
  ul,
  ol,
  hr,
  table {
    margin-block: 1em;
    line-height: 1.75;
  }
}

.entry-utility {
  padding-top: 0.5em;
  margin-block: 1em;
  line-height: 1.25;
  color: #696969;
  text-align: right;
  border-top: 2px solid #f5f5f5;
}

.entry-meta a,
.entry-utility a {
  transition: color 0.2s;
}

.entry-meta a:hover,
.entry-utility a:hover {
  color: #3c9cc2;
}





.c-entry-item {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px dotted #ddd;
}

.c-entry-item__title {
  font-size: var(--fz3);
  font-weight: bold;
}

.c-entry-item__date {
  margin-left: 8px;
  font-size: var(--fz2);
  font-weight: normal;
  color: #696969;
}

.c-entry-item__content {
  margin-top: 8px;
  font-size: var(--fz2);
}

.c-entry-item__more {
  text-align: right;
}

/* =Navigation
-------------------------------------------------------------- */

.navigation {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  color: #104681;
}

.navigation a:link,
.navigation a:visited {
  color: #104681;
  text-decoration: none;
  transition: color 0.2s;
}

.navigation a:active,
.navigation a:hover {
  color: #3780d0;
}

/* =Widget Areas
-------------------------------------------------------------- */

.widget-area .post-date {
  font-size: var(--fz2);
  color: #808080;
}





.screen-reader-text {
  display: none;
}

.widget-container {
  padding-bottom: var(--sp4);
}

.widget-title {
  padding-top: var(--sp1);
  margin-bottom: var(--sp2);
  font-weight: bold;
  color: #1f577e;
  border-top: 2px solid #a5c8e0;
}

/* おすすめの記事 */

.list-cat-recommend li {
  margin-bottom: 5px;
}

.list-cat-recommend a {
  display: block;
  width: 240px;
  height: 50px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background-image: url('/img/blog/list_recommend.webp');
  box-shadow: 0 1px 2px rgb(0 0 0 / 30%);
  transition: 0.2s;
}

.list-cat-recommend a:hover {
  opacity: 0.6;
}

.list-cat-recommend .cat-rec01 {
  background-position: 0 0;
}

.list-cat-recommend .cat-rec02 {
  background-position: 0 -50px;
}

.list-cat-recommend .cat-rec03 {
  background-position: 0 -100px;
}

/* 製品についてボタン */

.list-cat-prod li {
  margin-bottom: 5px;
}

.list-cat-prod a {
  position: relative;
  display: block;
  width: 220px;
  height: 40px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background-image: url('/img/blog/list_products.webp');
  box-shadow: 0 1px 2px rgb(0 0 0 / 30%);
  transition: 0.2s;
}

.list-cat-prod a:hover {
  opacity: 0.6;
}

.list-cat-prod .cat-prod01 {
  background-position: 0 0;
}

.list-cat-prod .cat-prod02 {
  background-position: 0 -40px;
}

.list-cat-prod .cat-prod03 {
  background-position: 0 -80px;
}

.list-cat-prod .cat-prod04 {
  background-position: 0 -120px;
}

.list-cat-prod .cat-prod05 {
  background-position: 0 -160px;
}

/* 最近のエントリ */

.widget_recent_entries ul {
  padding-left: 1em;
}

.widget_recent_entries li {
  line-height: 1.25;
  list-style: disc;
}

.widget_recent_entries li+li {
  margin-top: 0.5em;
}