/* project.css(jstork LP) を補完するサイト共通CSS（project.css の後に読み込む） */

/* ---- base（jstork親テーマと一致させる）---- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #fff;
  font-family: Helvetica, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 103%;
  line-height: 1.5;
  color: #545B63;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-wrap: break-word;
}
a { color: #1bb4d3; }

/* LP・フッターのリスト初期化（jstork親テーマ相当: ol,ul{padding:0;list-style:none}）。
   親テーマCSS未移植のため黒丸(disc)とpadding-left:40pxが出ていた。
   本文/ブログ(.page-content)のリストには影響させない。 */
.home ul, .home ol,
#footer ul, #footer ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- header nav（.header の青背景は project.css）---- */
#inner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 24px 22px;
  flex-wrap: wrap;
}
#logo { margin: 0; }
#logo img { height: 42px; width: auto; display: block; }
#g_nav .nav.top-nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
}
#g_nav .nav.top-nav a { color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; }
#g_nav .nav.top-nav a:hover { text-decoration: underline; }
@media only screen and (max-width: 768px) {
  #inner-header { padding: 0 4vw 4vw; gap: 12px; }
  #g_nav .nav.top-nav { gap: 6px 16px; }
}

/* ---- 導入方法スライダー: slick → CSS scroll-snap で置換 ---- */
.home .toInstalslider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: 30px;
}
.home .toInstalslider .list {
  flex: 0 0 calc((100% - 40px) / 3);
  margin: 0;
  scroll-snap-align: start;
}
.home .toInstalslider .list .img { text-align: center; }
.home .toInstalslider .list .img img { display: inline-block; }
@media only screen and (max-width: 768px) {
  .home .toInstalslider .list { flex: 0 0 86%; }
  .home .toInstalslider .list .img { min-height: auto; }
}

.home .mvWrap .btnArea .__btn img { max-width: 100%; }

/* フッターのコンテンツ幅を実サイトに合わせる（子テーマ jstork_custom/style.css 相当: #footer .inner{width:100%}）。
   未適用だと汎用 .inner{width:92%} で foot_contents が狭まり、右テキストが折り返していた。 */
#footer .inner { width: 100%; max-width: 100%; }
/* 最下部の濃紺バー(#inner-footer)を全幅に。子テーマ #footer.footer .inner{max-width:100%} 相当。
   max-width未指定だと汎用 .inner{max-width:1100px} で頭打ちになり中央寄せ＋両端余白になっていた。 */
/* 中間幅(769〜1340px)では r_area が狭く「テキスト＋ボタン」が窮屈に折り返すため、
   テキストとボタンを縦積み（各100%・中央寄せ）にして常に綺麗に表示する。
   実サイト(project.css)はこの帯域で折り返すが、ここを改善。 */
@media only screen and (min-width: 769px) and (max-width: 1340px) {
  #footer .foot_contents .r_area ul { flex-wrap: wrap; }
  #footer .foot_contents .r_area ul li { width: 100%; text-align: center; }
  #footer .foot_contents .r_area ul li + li { margin-top: 10px; }
}

/* ---- コンテンツページ本文（.entry-content）---- */
.page-content { padding: 40px 0 80px; }
.bare .page-content { padding-top: 28px; }    /* アプリ埋め込み(ヘッダー無し)用 */
.page-title {
  font-size: 1.8rem; line-height: 1.4; color: #1e3a5f;
  margin: 0 0 1.4rem; padding-bottom: .6rem; border-bottom: 3px solid #1e67d7;
}
.entry-content { font-size: 18px; line-height: 1.9; }
.entry-content h2, .entry-content h2.wp-block-heading {
  font-size: 1.45rem; line-height: 1.4; color: #fff; background: #1e67d7;
  padding: .5em .7em; border-radius: 6px; margin: 2.2em 0 1em;
}
.entry-content h3, .entry-content h3.wp-block-heading {
  font-size: 1.2rem; line-height: 1.45; color: #014099;
  border-left: 5px solid #1e67d7; padding-left: .6em; margin: 1.8em 0 .8em;
}
.entry-content h4 { font-size: 1.08rem; color: #014099; margin: 1.4em 0 .6em; }
.entry-content p { margin: 0 0 1.2em; }
.entry-content a { color: #1565c0; text-decoration: underline; }
.entry-content ul, .entry-content ol { margin: 0 0 1.2em; padding-left: 1.5em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin: .35em 0; }
.entry-content img { max-width: 100%; height: auto; }
.entry-content figure { margin: 1.4em 0; text-align: center; }
.entry-content table { border-collapse: collapse; width: 100%; margin: 1.4em 0; font-size: .95em; }
.entry-content th, .entry-content td { border: 1px solid #d0d7de; padding: .6em .8em; text-align: left; vertical-align: top; }
.entry-content th { background: #eef3fb; }
.entry-content .wp-block-buttons { gap: .8em; margin: 1.6em 0; }
.entry-content .wp-block-button__link, .entry-content .wp-element-button {
  background: #1e67d7; color: #fff; border-radius: 50px; padding: .7em 1.6em;
  text-decoration: none; display: inline-block; font-weight: 700;
}
.entry-content hr { border: 0; border-top: 1px solid #e3e8ee; margin: 2em 0; }

/* ---- ブログ一覧 ---- */
.post-list { list-style: none; padding: 0; }
.post-list li { padding: .55rem 0; border-bottom: 1px dashed #ddd; }
.post-list time { color: #888; margin-right: .6rem; font-variant-numeric: tabular-nums; }

/* ---- ブログ記事（カテゴリバッジ・日付・カテゴリリンク）---- */
.post .cat-badge { margin: 0 0 .6em; }
.post .cat-badge a {
  display: inline-block; background: rgb(230, 25, 170); color: #fff;
  font-size: .82rem; font-weight: 700; padding: .35em .9em; border-radius: 4px; text-decoration: none;
}
.post .cat-badge svg { width: 12px; height: 12px; vertical-align: -1px; margin-right: 5px; }
.post .post-meta { margin: 0 0 .4em; }
.post .post-meta time { color: #8a939b; font-size: .9rem; }
.post .post-title {
  font-size: 1.8rem; line-height: 1.45; color: #1e3a5f; margin: 0 0 1.2rem;
}
.post .post-cats { margin: 2.2em 0 1em; }
.post .cat-link {
  display: inline-block; border: 1px solid #6cb2eb; color: #1565c0;
  border-radius: 6px; padding: .45em 1.1em; text-decoration: none; font-size: .9rem; margin-right: .5em;
}
.post .cat-link svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }
.post .post-nav { display: flex; justify-content: space-between; gap: 16px; margin: 2.5em 0 0; border-top: 1px solid #e3e8ee; padding-top: 1.4em; }
.post .post-nav a { color: #1565c0; text-decoration: none; font-size: .92rem; max-width: 48%; }
.post .post-nav a:hover { text-decoration: underline; }
.post .post-nav .post-nav-right { margin-left: auto; text-align: right; }
.post .post-nav .arr { color: #1e67d7; font-weight: 700; }
@media only screen and (max-width: 600px) {
  .post .post-nav { flex-direction: column; }
  .post .post-nav a { max-width: 100%; }
  .post .post-nav .post-nav-right { margin-left: 0; text-align: left; }
}

/* ---- 2カラム（本文＋サイドバー）---- */
.page-layout { display: flex; gap: 40px; align-items: flex-start; }
.page-layout .entry-content { flex: 1 1 auto; min-width: 0; }
.sidebar { flex: 0 0 280px; }
.sidebar .widget { margin-bottom: 30px; border: 1px solid #e3e8ee; border-radius: 8px; overflow: hidden; }
.sidebar .widget-title { margin: 0; background: #1e67d7; color: #fff; font-size: 1rem; padding: .7em 1em; }
.sidebar .widget-list { list-style: none; margin: 0; padding: 0; }
.sidebar .widget-list li { border-bottom: 1px solid #eef1f5; }
.sidebar .widget-list li:last-child { border-bottom: 0; }
.sidebar .widget-list a {
  display: block; padding: .8em 2em .8em 1em; color: #1e3a5f; text-decoration: none;
  font-size: .95rem; position: relative;
}
.sidebar .widget-list a::after { content: "›"; position: absolute; right: 1em; color: #1e67d7; }
.sidebar .widget-list a:hover { background: #f4f8ff; }
@media only screen and (max-width: 900px) {
  .page-layout { display: block; }
  .sidebar { margin-top: 40px; }
}