body{
  margin: 0;
}

/* ===========================
   MARKETING HEADER COMPONENT
   Root:   .marketing-header
   Prefix: mh-
=========================== */

.marketing-header {
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
  box-sizing: border-box;
}

.marketing-header *,
.marketing-header *::before,
.marketing-header *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.marketing-header a {
  text-decoration: none;
  color: inherit;
}

.marketing-header ul {
  list-style: none;
}

.mh-inner{
  box-shadow: 1px 1px 8px gray;
}


.mh-above{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
}
.above__image img{
  max-width: 100%;
}

/* ===========================
   NAVIGATION
=========================== */
.mh-nav {
  background: #f5f5f5;
  border: 1px solid #d0d0d0;
  /* box-shadow: 1px 1px 8px gray; */
  /* box-shadow: 1px 1px 8px gray; */
  /* box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 4px rgba(0,0,0,0.08); */
}
.mh-nav__list {
  display: flex;
  max-width: 100%;
}

.mh-nav__item {
  flex: 1;
  border-right: 1px solid #d8d8d8;
}

.mh-nav__item:first-child {
  border-left: 1px solid #d8d8d8;
}

.mh-nav__item a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  font-size: 13px;
  color: #555555;
  letter-spacing: 0.04em;
  transition: background 0.15s, color 0.15s;
  background: linear-gradient(to bottom, #fafafa 0%, #efefef 100%);
}

.mh-nav__item a:hover {
  background: linear-gradient(to bottom, #ffffff 0%, #d0d0d0 100%);
  color: #222222;
}

/* ホームアイコン */
.mh-nav__item--home a {
  gap: 0;
}

.mh-home-icon {
  width: 16px;
  height: 16px;
  color: #666666;
}

.mh-nav__item--home a:hover .mh-home-icon {
  color: #333333;
}

/* ===========================
   HERO
=========================== */
.mh-hero__title{
  background-color: #efefef;
  padding: 0 15px;
}
.mh-hero__title img{
  max-width: 100%;
  vertical-align: middle;
  /* width: 95%; */
}


/* ===========================
   Footer COMPONENT
   Root:   .idea-kobo
   Prefix: ik-
=========================== */

.idea-kobo {
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
  font-size: 14px;
  color: #333;
  background: #ebebeb;
  box-sizing: border-box;
}

.idea-kobo *,
.idea-kobo *::before,
.idea-kobo *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.idea-kobo a {
  text-decoration: none;
  color: inherit;
}

.idea-kobo ul {
  list-style: none;
}

/* ===========================
   HEADER
=========================== */
.ik-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-bottom: 1px solid #d8d8d8;
  padding: 0 20px 0 24px;
  height: 52px;
}

.ik-header__left {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.ik-header__label {
  font-size: 11px;
  font-weight: 700;
  color: #888;
  letter-spacing: 0.08em;
}

.ik-header__company {
  font-size: 20px;
  font-weight: 700;
  color: #222;
  letter-spacing: 0.02em;
}

.ik-header__right {
  display: flex;
  align-items: center;
}

.ik-rss-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #d0d0d0;
  color: #888;
  transition: color 0.2s, border-color 0.2s;
}

.ik-rss-btn:hover {
  color: #e8a020;
  border-color: #bbb;
}

.ik-rss-btn svg {
  width: 18px;
  height: 18px;
}

/* ===========================
   MAIN AREA
=========================== */
.ik-main {
  background: #ebebeb;
  padding: 48px 24px 56px;
}

/* ===========================
   COLUMNS
=========================== */
.ik-columns {
  display: flex;
  max-width: 1200px;
}

.ik-col {
  flex: 1;
  padding: 0 32px;
  border-right: 1px solid #d0d0d0;
}

.ik-col:first-child {
  padding-left: 8px;
}

.ik-col:last-child {
  border-right: none;
}

/* ===========================
   COLUMN TITLE
=========================== */
.ik-col__title {
  font-size: 14px;
  font-weight: 700;
  color: #3a82c4;
  margin-bottom: 22px;
  letter-spacing: 0.02em;
}

/* ===========================
   COLUMN LIST
=========================== */
.ik-col__list li {
  margin-bottom: 12px;
  line-height: 1.4;
}

.ik-col__list li a {
  font-size: 13px;
  color: #333;
  transition: color 0.15s;
}

.ik-col__list li a:hover {
  color: #3a82c4;
}

.ik-col__list--spaced {
  margin-top: 20px;
}

/* ===========================
   CONTACT
=========================== */
.ik-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ik-contact__row {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.ik-contact__row dt {
  font-size: 13px;
  color: #333;
  min-width: 32px;
}

.ik-contact__row dd {
  font-size: 13px;
  color: #333;
}


/* ===========================
   layout
=========================== */
.common-layout {
  display: flex;
  gap: 32px;
  max-width: 100%;
  margin: 0 auto;
  padding: 45px 16px;
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
  font-size: 13px;
  color: #333;
  background: #fff;
  line-height: 1.6;
  box-sizing: border-box;
}

.common-layout *,
.common-layout *::before,
.common-layout *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.common-layout a {
  text-decoration: none;
  color: #333;
}

.common-layout ul {
  list-style: none;
}

.common-layout img {
  display: block;
  max-width: 100%;
}


/* ===========================
  サイドバー
=========================== */
.common-sidebar {
  width: 300px;
  flex-shrink: 0;
  margin-bottom: 15px;
}
.common-sidebar__heading {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  background: #f0f0f0;
  padding: 8px 12px;
  border-left: 4px solid #555;
  letter-spacing: 0.03em;
}

.common-sidebar__item {
  padding: 10px;
  border-bottom: 1px solid #e8e8e8;
}

.common-sidebar__item:last-child {
  border-bottom: none;
}

.common-sidebar__link {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  /* margin-bottom: 6px; */
}

.common-sidebar__link img {
  width: 90px;
  height: 65px;
  object-fit: cover;
  flex-shrink: 0;
}

.common-sidebar__body {
  flex: 1;
  min-width: 0;
}

.common-sidebar__date {
  font-weight: 700;
  display: block;
  font-size: 11px;
  color: #555;
  margin-bottom: 4px;
}

.common-sidebar__title {
  font-size: 12px;
  color: #333;
  line-height: 1.5;
  transition: color 0.15s;
}

.common-sidebar__link:hover .common-sidebar__title {
  color: #1a5fa0;
  text-decoration: underline;
}

.common-sidebar__excerpt {
  font-size: 11px;
  color: #666;
  line-height: 1.6;
  padding-top: 6px;
}


/* ===========================
  見出し
=========================== */
.common-heading{
  font-size: 30px;
  position: relative;
  z-index: -1;
  font-size: 20px;
  text-align: center;
  background-color: #3a97c6;
  color: #fff;
  padding: 30px;
}
.common-heading *{
  font-size: 30px;
}





/* ===========================
  タイトルフレーム
=========================== */
.common-title {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  background: linear-gradient(to bottom, #ffffff 0%, #faf7f7 100%);
  padding: 8px 12px;
  border: 1px solid #e8e8e8;
  border-left: 4px solid #0077B3;
  margin-bottom: 5px;
  letter-spacing: 0.03em;
}


/* ===========================
   RESPONSIVE
=========================== */

/* Tablet (768px〜1023px): サイドバー幅を縮小 */
@media (max-width: 1023px) {
  .common-layout {
    gap: 20px;
  }
}

/* Mobile (〜767px) */
@media (max-width: 767px) {

  /* ヘッダー上部: ロゴ・バナーを縦並びに */
  .mh-above {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
  }

  /* ナビゲーション: 2列グリッドに */
  .mh-nav__list {
    flex-wrap: wrap;
  }

  .mh-nav__item {
    flex: 0 0 50%;
    border-bottom: 1px solid #d8d8d8;
  }

  .mh-nav__item:first-child {
    border-left: none;
  }

  /* メインレイアウト: 縦並びに */
  .common-layout {
    flex-direction: column;
    gap: 24px;
    padding: 16px 12px;
  }

  /* フッターヘッダー */
  .ik-header {
    height: auto;
    min-height: 52px;
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .ik-header__company {
    font-size: 16px;
  }

  /* フッターメインエリア */
  .ik-main {
    padding: 24px 16px 32px;
  }

  /* フッターカラム: 縦並びに */
  .ik-columns {
    flex-direction: column;
  }

  .ik-col {
    border-right: none;
    border-bottom: 1px solid #d0d0d0;
    padding: 0 8px 20px;
    margin-bottom: 20px;
  }

  .ik-col:first-child {
    padding-left: 8px;
  }

  .ik-col:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}