@charset "utf-8";

/* ================================
  Pop & Student-friendly Theme
================================ */
:root{
    --lt-primary: #f7bf88;  
    --lt-secondary: #f97c00; 
    --lt-accent: #f1d105;   
    --lt-ink: #222;
    --lt-text: #3a3a3a;
    --lt-bg: #fff;
    --lt-soft: #f7f9ff;
    --lt-radius: 14px;
    --lt-shadow: 0 10px 24px rgba(0,0,0,.06);
    --space-large: 8vw;
    --topbar-height: 90px;
  }
  

  
  body{
    font-family: "Noto Sans JP","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    color: var(--lt-text);
    background: var(--lt-soft);
    line-height: 1.75;
    margin-left: 2%;
    margin-right: 2%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    margin-top: var(--topbar-height)
  }

  html {
    scroll-behavior: smooth;
  }
  
  /* 背景をうっすらポップに（最初のセクションだけ） */
  /* .alignfull:first-of-type{
    background:
      radial-gradient(1200px 500px at 85% -10%, #eaf1ff 0%, transparent 60%),
      radial-gradient(1000px 420px at -10% 20%, #fff0f6 0%, transparent 55%),
      var(--lt-bg);
  } */
  
  /* 上の選択バー　*/
  #topbar {
    display: flex;
    align-items: center;   /* 子要素(li)を上下中央に */
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(to right, #0A6847 20%,#F3CA52 50%, #F6E9B2);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
  }
  
  #topbar li {
    display: flex;          /* aやimgをflexで中央に */
    align-items: center;    /* 縦中央揃え */
    height: 60px;           /* ナビバーの高さ */
  }
  
  #topbar li a {
    display: flex;          /* a内部もflex */
    align-items: center;    /* 中央揃え */
    color: white;
    text-align: center;
    padding: 10px 16px;        /* 左右の余白 */
    text-decoration: none;
    height: 100%;           /* liの高さに合わせる */
  }
  
  #topbar li a:hover {
    background-color: rgba(0, 0, 0, 0.2);
  }
  
  /* ロゴ画像 */
  .logo_bar {
    height: 50px;  /* 高さを固定 */
    width: auto;
    margin-left: 20px;
  }
  

/* メイントップ　*/
#mainimg{
    background-image: url("../image/top_fig.png");
    background-size: 1200px auto;
    background-repeat: no-repeat;
    background-position: center;
    /* background-size: cover; */
    background-color: transparent; /* 任意 */
    width: 100%;
    padding-top: 60%;
    position: relative;
    overflow: hidden;
  }
  
  /* 中の要素を背景の上に重ねる */
  #mainimg > .hero {
    position: absolute;
    top: 290px; 
    left: 60px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;  /* ← 左寄せ */
    color: var(--lt-primary);
  }
  #mainimg .topbutton {
    position: absolute;
    top: 75%;   /* 好きな位置に */
    left: 25%;
    transform: translateX(-50%);
    text-align: center¥;
  }
  
   /* #mainimg > div {
    position: absolute;
    top: 60px; 
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  
    font-weight: 800;
    letter-spacing: .02em;
    margin-bottom: .6rem;

    color: var(--lt-primary);
  }  */
  
  /* 画面420px以上の追加指定 */
  @media screen and (min-width:420px) {
    #mainimg > div {
      left: var(--space-large);
      align-items: flex-start;
      justify-content: center;
    }
  }
  
  
  .mainimg.text {
    font-weight: 800;
    letter-spacing: .02em;
    margin-bottom: .6rem;
    color: #f97c00 !important;
    text-align: center;   /* 中央寄せ */
    font-size: 8vw;       /* 画面幅に応じて大きさ調整 */
    line-height: 1.2;     /* 行間を少し詰める */
  }
  
  /* 画面420px以上の追加指定 */
  @media screen and (min-width:420px) {
    .mainimg.text {
      font-size: 4vw;     /* PC画面では少し小さくして見やすく */
      text-align: left;   /* 大画面では左寄せに変更 */
    }
  }
  
  /* 段落 */
  .wp-block-paragraph {
    font-size: 1.06rem;
    color: #494949;
  }
  
  /* ボタン（カラフルな pill） */
  .button__link {
    display: inline-flex; 
    align-items: center; 
    gap: .5em;
    background: linear-gradient(135deg, var(--lt-primary), var(--lt-secondary) 70%);
    color: #fff !important;
    padding: .9em 1.4em;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .2px;
    box-shadow: var(--lt-shadow);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  
  .button__link::after {
    content: "→";
    font-weight: 800; 
    transform: translateX(0);
    transition: transform .18s ease;
  }
  
  .button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(94,139,255,.18);
    filter: saturate(1.1);
  }
  
  .button__link:hover::after {
    transform: translateX(2px);
  }

  .hero {
    display: flex;              /* 横並び */
    align-items: center;        /* 縦位置を中央に */
    gap: 10px;                  /* テキストと画像の間隔 */
  }
  
  .main-title {
    font-weight: 800;
    font-size: 5vw;             /* 画面幅に応じた大きさ */
    background: linear-gradient(90deg, #f97c00, #f1d105);
    -webkit-background-clip: text;   /* Webkit系ブラウザ用 */
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
  }
  
  .hero-img {
    width: 500px;               /* 画像サイズ調整 */
    height: auto;
    border-radius: 8px; 
    margin-left: auto;         /* 角丸にするなら */
  }
  
  .hero {
    display: flex;
    flex-direction: column;     /* デフォルトは縦並び */
    align-items: center;
  }
  
  @media screen and (min-width: 768px) {
    .hero {
      flex-direction: row;      /* PCでは横並び */
      justify-content: flex-start;
    }
  }

  /* .problems {
    text-align: center;
    padding: 60px 20px;
  } */

  .problems {
    text-align: center;
    position: relative;   /* 擬似要素の基準にする */
    background: #11111100;     /* セクション背景 */
    color: #0f0c0c;
    padding: 20px 20px;
  }
/* 
  .problems::after {
    content: "";
    position: absolute;
    bottom: -0px;    
    left: 50%;
    transform: translateX(-50%); 
    width: 0;
    height: 0;
  
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 40px solid #fca000; 
  } */

  .problems::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -40px;                   /* セクションの外に出す */
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 40vw solid transparent;
    border-right: 40vw solid transparent;
    border-top: 60px solid #F3CA52;  /* ↓次セクションの色に合わせる */
    pointer-events: none;
    z-index: 2;
  }
  
  .problems .c {
    font-size: 30px;
    margin-bottom: 40px;
  }
  
  .problems-list {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap; /* スマホでは縦並び */
  }
  
  .list.fuki {
    flex: 1;
    min-width: 280px; /* スマホ対応 */
    background: #8a89881d;
    padding: 30px 20px;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.3);
    position: relative;
    text-align: left;
  }
  
  .list.fuki h4 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
  }
  
  .list.fuki h4 span {
    color: #f33; /* 強調部分 */
  }
  
  .list.fuki p {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
  }
  
  .list.fuki .num {
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 30px;
    font-weight: 800;
    color: #9a9a9a;
    pointer-events: none; 
  }

 .solutions {
    text-align: center;
    padding: 10px 20px;
    /* background: linear-gradient(135deg, #f7bf88, #f97c00, #f1d105) */
  }

.solutions .c {
    font-size: 30px;
    margin-bottom: 40px;
  }

  .solutions .c .logo {
    display: inline-block;
    height: 4em;          /* 見出し文字と揃える */
    vertical-align: middle; /* テキストと縦位置をそろえる */
    margin-right: 0.3em;
    vertical-align: -1em;  
  }

  .solutions .solution-list {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
  }
  
  .solutions.list.fuki {
    flex: 1;
    min-width: 280px;
    background: #F6E9B2;
    padding: 40px 25px;
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    position: relative;
  
    transition: transform .25s ease, box-shadow .25s ease;
  }
  
  .solutions.list.fuki h4 {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center; 
  }
  
  .solutions.list.fuki h4 span {
    background: linear-gradient(transparent 60%, #fa9735 60%); 
    color: inherit;
  }
  
  .solutions.list.fuki p {
    font-size: 17px;
    line-height: 1.6;
    color: #333;
  }

  .solutions.list.fuki p:last-child {
    margin-bottom: 0;   /* 最後の段落の余白も消す */
  }
  
  .solutions.list.fuki .num {
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 42px;
    font-weight: 900;
    color: #F3CA52;
    pointer-events: none;
  }
  
  .solutions.list.fuki:hover {
    transform: translateY(-15px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.18);
  }
  
  /* アイコンを丸背景で装飾 */
  .solution-icon {
    width: 250px;
    height: 250px;
    margin: 0 auto 10px auto;
    /* margin-bottom: -20px; */
    /* border-radius: 50%; */
    /* background: linear-gradient(135deg, #f7bf88, #f97c00); */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* box-shadow: 0 4px 12px rgba(0,0,0,0.15); */
  }
  
  .solution-icon img {
    width: 105%;      /* 丸の中に収める */
    height: auto;
    object-fit: contain;
  }

  .achievement {
    text-align: center;
    padding: 10px 20px;
    background-image: url("../image/mesh_bg.png");
    background-size: cover;   /* 1枚を全体に敷きたい場合 */
    background-repeat: no-repeat;
  }
  
  .achievement .c {
    font-size: 50px;
    margin-bottom: 40px;
  }
  
  /* Swiper全体 */
  .swiper {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
  }
  
  /* 各スライド */
  .swiper-slide {
    display: flex;
    justify-content: center;
  }
  
  /* カードデザイン */
  .achievement.list.fuki {
    display: flex;
    align-items: center;   
    gap: 20px;             /* 画像とテキストの間隔 */
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    transition: transform .25s ease, box-shadow .25s ease;
    text-align: left;      /* テキストを左寄せ */
  }
  
  
  .achievement.list.fuki:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.2);
  }
  
  /* アイコン */
  .achievement-icon {
    width: 400px;
    height: auto;
    flex-shrink: 0;  /* 画像が縮まないよう固定 */
    margin: 0;
  }


.card-iframe {
    flex: 0 0 auto;        /* iframeの幅を固定 */
  }
  
 .card-text h4 {
    display: inline-block;   /* 吹き出しとして独立 */
    position: relative;
    background: #F3CA52;     /* 吹き出しの背景色 */
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 30px;
    font-weight: bold;
    font-weight: bold;
    text-align: center; 
  }
  
  /* 吹き出しの三角形 */
  .card-text h4::after {
    content: "";
    position: absolute;
    bottom: -12px;      /* 吹き出しの下に配置 */
    left: 20px;         /* 横位置を調整 */
    width: 0;
    height: 0;
    border-width: 12px 10px 0 10px; /* 三角形のサイズ */
    border-style: solid;
    border-color: #F3CA52 transparent transparent transparent;
  }

  /* 見出しのマーカー */
  .achievement.list.fuki h4 span {
    position: relative;
    z-index: 1;
  }
  .achievement.list.fuki h4 span::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.1em;
    width: 100%;
    height: 40%;
    background: #F3CA52; /* 蛍光ペン風 */
    z-index: -1;
  }

  .card-text {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    justify-content: flex-start;
    align-items: flex-start; /* 左揃え */
  }
  
  
  /* Swiperのドット */
  .swiper-pagination-bullet {
    background: #f97c00;
    opacity: 0.6;
  }
  .swiper-pagination-bullet-active {
    background: #f33;
    opacity: 1;
  }

  .dis-more {
    text-align: right;
    margin-top: 20px;
  }
  
  .btn-more_dis {
    display: inline-block;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: bold;
    color: #0A6847;
    border: 2px solid #0A6847;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  
  .btn-more_dis:hover {
    background: #7ABA78;
    color: #fff;
  }

  .explain {
    background-color: #7ABA78;
    text-align: center;
    width: 100%;
    padding: 10px 0px;
    color: #fff;
    border-radius: 20px; /* ← 角丸 */
  }
  
  .explain h4 {
    font-size: 29px;
    margin-bottom: 20px;
    font-weight: bold;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
  }
  
  .explain h4::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60%;             /* 線の長さ */
    height: 3px;            /* 線の太さ */
    background-color: #fff; /* 線の色 */
    border-radius: 2px;
  }
  
  .explain h4::before { left: 0; }
  .explain h4::after { right: 0; }
  
  .explain-text {
    max-width: 1100px;     /* 横幅を制限して読みやすく */
    margin: 0 auto 1.5em; /* 中央寄せ＋段落ごとに余白 */
    font-size: 1.2rem;
    line-height: 1.8;
  }



  .explain .button_link {
    display: inline-flex;
    margin: 0 auto; /* 中央寄せ */
    gap: .5em;
    background: #F3CA52;
    color: #fff !important;
    padding: .9em 1.4em;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .2px;
    box-shadow: var(--lt-shadow);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  
  .explain.button_link::after {
    content: "→";
    font-weight: 800; 
    transform: translateX(0);
    transition: transform .18s ease;
  }
  
  .explain .button_link:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(94,139,255,.18);
    filter: saturate(1.1);
  }
  
  .explain .button_link:hover::after {
    transform: translateX(2px);
  }

  .explain .topbutton {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .news {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .news-inner {
    display: flex;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    gap: 60px;             /* タイトルとリストの間隔 */
  }
  
  /* 左側タイトル */
  .news-title {
    flex: 0 0 200px;       /* 幅固定 */
    text-align: center;
  }
  
  .news-title span {
    display: block;
    font-size: 14px;
    color: #aaa;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
  }
  
  .news-title h2 {
    font-size: 28px;
    font-weight: bold;
    margin: 0;
  }

  .news-content {
    flex: 1;
    margin-left: 60px; 
  } 

  /* 右側リスト */
  .news-list {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .news-list li {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
  }
  
  .news-list .date {
    flex: 0 0 120px;
    font-size: 14px;
    color: #555;
  }
  
  .news-list .label {
    display: inline-block;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 4px;
    margin-right: 15px;
  }
  
  .news-list .label.other {
    background: #fff;
    border: 1px solid #ccc;
    color: #333;
  }
  
  .news-list .label.important {
    background: #d40000;
    color: #fff;
  }
  
  .news-list .label.service {
    background: #ffe100;
    color: #333;
  }
  
  .news-list .text {
    flex: 1;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
  }
  
  /* 📱 スマホ対応 */
  @media (max-width: 768px) {
    .news-inner {
      flex-direction: column; /* タイトルの下にリスト */
      align-items: flex-start;
    }
  
    .news-title {
      margin-bottom: 20px;
    }
  
    .news-list li {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .news-list .date {
      margin-bottom: 5px;
    }
  
    .news-list .label {
      margin: 0 0 8px 0;
    }
  }
  

  /* もっと見るボタン */
.news-more {
    text-align: right;
    margin-top: 20px;
  }
  
  .btn-more {
    display: inline-block;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: bold;
    color: #f97c00;
    border: 2px solid #f97c00;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  
  .btn-more:hover {
    background: #f97c00;
    color: #fff;
  }
  
/* したフッター */
  .site-footer {
    background:#7ABA78;
    color: #fff;
    padding: 20px 40px;
    width: 100vw;       /* 画面幅いっぱい */
    margin-left: calc(50% - 50vw); /* 中央寄せ解除して端まで広げる */
    box-sizing: border-box; /* padding込みで幅を計算 */
  }
  
  .footer-inner {
    display: flex;
    justify-content: space-between; /* 左右に配置 */
    align-items: center;
    width: 100%;         
  }
  
  .footer-logo img {
    height: 60px;   /* ロゴの高さ調整 */
    width: auto;
  }
  
  .footer-nav a {
    color: #fff;
    margin-left: 20px;
    text-decoration: none;
  }
  
  .footer-nav a:hover {
    text-decoration: underline;
  }



  /* researchのページ */


  .intro-section {
    background-color: #0A6847;       
    color: #fff;      
    padding: 60px 10%;
    margin-left: -30px;
    margin-bottom: 10px;
  }
  
  .intro-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  
  .intro-title {
    flex: 1;
    min-width: 280px;
    margin-left: -20px;
  }
  
  .intro-title h2 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.3;
  }
  
  .intro-title h2 span {
    color: #F3CA52;  /* 強調：オレンジ */
  }
  
  .intro-text {
    flex: 1;
    min-width: 280px;
    max-width: 1000px;
    font-size: 1.2rem;
    line-height: 1.8;
    color: #ddd;
  }
  

  /* 全体のセクション */
.first {
    background: #f7f7f7;          /* 背景色（薄いグレー） */
    padding: 40px 20px;           /* 上下の余白を大きめに */
  }
  
  /* コンテナ */
  .first_container {
    max-width: 1000px;            /* 横幅を制限 */
    margin: 0 auto;               /* 中央寄せ */
    text-align: center; 
  }
  
  /* タイトル */
  .first_title h2 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 30px;
    color: #0A6847;             
    position: relative;
    display: inline-block;
  }
  
  /* タイトル下にアクセント線 */
  .first_title h2::after {
    content: "";
    display: block;
    width: 200px;
    height: 4px;
    background: #F3CA52;          /* アクセントカラー */
    margin: 10px auto 0;
    border-radius: 2px;
  }
  
  /* 説明テキスト */
  .first_text p {
    font-size: 20px;
    line-height: 1.8;             /* 行間を広く */
    color: #333;
    max-width: 800px;
    margin: 0 auto;               /* 中央寄せ */
  }


  .points {
    text-align: center;
    padding: 10px 20px;
    /* background: linear-gradient(135deg, #f7bf88, #f97c00, #f1d105) */
  }

.points .c {
    font-size: 30px;
    margin-bottom: 40px;
  }

  .points .c .logo {
    display: inline-block;
    height: 4em;          /* 見出し文字と揃える */
    vertical-align: middle; /* テキストと縦位置をそろえる */
    margin-right: 0.3em;
    vertical-align: -1em;  
  }

  .points-list {
    display: flex;
    flex-direction: column; /* 縦方向に並べる */
    gap: 20px;              /* 各カードの間隔 */
  }
  
  .points.list.fuki {
    width: 80%;            /* 横幅いっぱい */
    background: #F6E9B2;
    padding: 40px 25px;
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  
  .points.list.fuki h4 {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center; 
  }
  
  .points.list.fuki h4 span {
    background: linear-gradient(transparent 60%, #fa9735 60%); 
    color: inherit;
  }
  
  .points.list.fuki p {
    font-size: 17px;
    line-height: 1.6;
    color: #333;
    text-align: center; 
  }

  .points.list.fuki p:last-child {
    margin-bottom: 0;   /* 最後の段落の余白も消す */
  }
  
  .points.list.fuki .num {
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 42px;
    font-weight: 900;
    color: #F3CA52;
    pointer-events: none;
  }
  
  .points.list.fuki:hover {
    transform: translateY(-15px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.18);
  }
  

  .box8 {
    padding: 20px 20px;
    margin: 0 auto;
    color: #232323;
    background: #fff8e8;          /* 柔らかい背景色 */
    border-left: solid 10px #ffc06e; /* 左側に太いライン */
    border-radius: 8px;           /* 角を少し丸めるとやわらかい印象に */
    box-shadow: 0 6px 16px rgba(0,0,0,0.08); /* 浮かせる効果 */
    width: 90%;                  /* 画面幅に応じて広がる */
    max-width: 800px;            /* 最大幅を制限 */
  }
  
  .box8 h4 {
    margin-top: 0;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .box8 p {
    margin: 0;
    padding: 0;
    line-height: 1.6;
    font-size: 16px;
  }

  .box8 ul {
    list-style-position: inside; /* マーカーをテキスト内側に */
    padding-left: 1em;           /* 左余白を小さめに調整 */
    margin: 0;                   /* 余白を消す */
  }
  
  .box8 li {
    margin: 0.3em 0;             /* 上下に少しだけ余白 */
    line-height: 1.6;            /* 行間 */
  }
 
  .box8 h4 {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center; 
  }
  
  .box8 h4 span {
    background: linear-gradient(transparent 60%, #fa9735 60%); 
    color: inherit;
  }
   
 /* ===============================
   スマホ用レイアウト調整
   幅768px以下のときに適用
================================= */
@media screen and (max-width: 768px) {

  /* 余白を少しだけにして読みやすく */
  body {
    margin-left: 4%;
    margin-right: 4%;
    line-height: 1.7;
  }

  /* トップバー：高さとロゴを少し小さめに */
  #topbar {
    height: 56px;
  }

  #topbar li {
    height: 56px;
  }

  #topbar li a {
    padding: 8px 10px;
    font-size: 14px;
  }

  .logo_bar {
    height: 32px;
    margin-left: 8px;
  }

  /* メインビジュアル：縦長にして中身を上のほうに */
  #mainimg {
    padding-top: 120%;      /* 縦長にする */
    background-size: cover; /* 画面いっぱいに */
  }

  #mainimg > .hero {
    top: 120px;   /* 290px → スマホでは上に寄せる */
    left: 20px;
    width: calc(100% - 40px);
  }

  .main-title {
    font-size: 8vw;   /* スマホでは少し大きめの可変サイズ */
  }

  .hero {
    flex-direction: column;   /* 画像と文字を縦並びに */
    align-items: flex-start;
  }

  .hero-img {
    width: 80%;
    max-width: 320px;
    margin: 24px 0 0 0;
  }

  #mainimg .topbutton {
    top: auto;
    bottom: 40px;        /* 画面下寄せに */
    left: 50%;
    transform: translateX(-50%);
  }

  /* 「課題」「解決」などのカード類は縦に並べる */
  .problems-list,
  .solutions .solution-list,
  .points-list {
    flex-direction: column;
    gap: 16px;
  }

  .list.fuki,
  .solutions.list.fuki,
  .points.list.fuki {
    width: 100%;
    min-width: auto;
  }

  /* achievement スライダーのカード：縦積みに */
  .achievement.list.fuki {
    flex-direction: column;
    align-items: flex-start;
  }

  .achievement-icon,
  .card-iframe {
    width: 100%;
    max-width: 100%;
  }

  /* explanation ボックスは幅いっぱいに */
  .explain {
    border-radius: 0;
    padding: 20px 10px;
  }

  .explain-text {
    max-width: 100%;
    font-size: 1rem;
  }

  /* News セクション：縦並びにして余白少なめ */
  .news {
    padding: 40px 10px;
  }

  .news-inner {
    flex-direction: column;
    gap: 20px;
  }

  .news-content {
    margin-left: 0;
  }

  .news-list li {
    flex-direction: column;
    align-items: flex-start;
  }

  .news-list .text {
    margin-top: 4px;
  }

  /* research ページヘッダ */
  .intro-section {
    margin-left: 0;
    padding: 40px 5%;
  }

  .intro-title {
    margin-left: 0;
  }

  /* firstセクション・box8もスマホ幅優先に */
  .first {
    padding: 32px 10px;
  }

  .first_text p {
    font-size: 16px;
  }

  .box8 {
    width: 100%;
    max-width: 100%;
    padding: 16px 12px;
  }

  /* フッターの中身は縦並びに */
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}