@charset "utf-8";


/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
  color: #333;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    Meiryo,
    sans-serif;

  line-height: 1.6;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0;
}

a {
  color: #0099c8;
  text-decoration: underline;
}


:root {
  --pc-bg-width: 100%;

  --white-panel-width: 1200px;
  --report-width: 1040px;

  --report-green: #078c42;
  --report-yellowgreen: #c0cc17;

  --overview-green: #009b0b;
}


/* =========================================================
   LP
   ========================================================= */

.lp {
  position: relative;

  width: min(100%, var(--pc-bg-width));

  margin: 0 auto;

  overflow: hidden;

  background: #09c7e7;
}


/* =========================================================
   背景
   既存
   ========================================================= */

.lp-bg {
  position: absolute;

  inset: 0;

  z-index: 0;

  background:
    url("../images/back.jpeg")
    top center / var(--pc-bg-width) auto no-repeat;

  pointer-events: none;
}


/* =========================================================
   MV
   ========================================================= */

.mv {
  position: relative;

  z-index: 1;

  width: 100%;
}

.mv__title {
  margin: 0;
}

.mv__title img {
  width: 100%;
}


/* =========================================================
   1200px 白半透明パネル
   ========================================================= */

.white-panel {
  position: relative;

  z-index: 1;

  width: var(--white-panel-width);
  max-width: 100%;

  margin: 0 auto 60px auto;

  padding:
    45px 80px
    70px;

  background:
    rgba(255, 255, 255, .60);
}


/* =========================================================
   開催御礼
   ========================================================= */

.report-intro {
  width: 100%;

  margin:
    0 auto
    42px;
}

.report-intro img {
  width: 100%;
}


/* =========================================================
   1040px 3色角丸レポート枠
   ========================================================= */

.report-box {
  position: relative;

  width: var(--report-width);
  max-width: 100%;

  margin: 0 auto;

  padding:
    55px 48px
    65px;

  background: #fff;

  border:
    5px solid
    var(--report-green);

  border-radius:
    42px;

  overflow: hidden;
}


/* 中間の黄緑 */

.report-box::before {
    content: "";
    position: absolute;
    inset: 0px;
    border: 12px solid #efd250;
    border-radius: 38px;
    pointer-events: none;
}


/* 内側緑 */

.report-box::after {
  content: "";

  position: absolute;

  inset: 12px;

  border:
    6px solid
    var(--report-yellowgreen);

  border-radius:
    27px;

  pointer-events: none;
}


.report-box > * {
  position: relative;

  z-index: 1;
}


/* =========================================================
   レポートタイトル画像
   ========================================================= */

.report-heading {
  width: 100%;

  margin:
    0 0
    35px;

  padding: 0;

  border: 0;
}

.report-heading img {
  width: 100%;
}


/* =========================================================
   各レポート
   ========================================================= */

.report-section {
  margin:
    0 0
    45px;
}

.report-section:last-child {
  margin-bottom: 0;
}


/* 青見出し画像 */

.report-section__title {
  width: 100%;

  margin:
    0 0
    18px;

  padding: 0;

  border: 0;

  background: none;
}

.report-section__title img {
  width: 100%;
}


/* 本文 */

.report-section__text {
  margin:
    0 0
    22px;

  color: #666;

  font-size: 26px;
  font-weight: 300;

  line-height: 1.65;
}


/* 写真 */

.report-image {
  width: 100%;

  margin:
    18px 0
    26px;
}

.report-image img {
  width: 100%;
}


/* =========================================================
   開催概要
   ========================================================= */

.overview {
  position: relative;

  width: var(--report-width);
  max-width: 100%;

  margin:
    65px auto
    0;

  padding: 0;

  background: transparent;
}

.overview::before {
  display: none !important;
}


/* 開催概要 */

.overview__title {
  margin:
    0 0
    30px;

  padding: 0;

  border: 0;

  color: #1dac43;

  font-size: 48px;
  font-weight: 300;

  line-height: 1.25;
}


/* 各ブロック */

.overview__item {
  width: 100%;

  margin:
    0 0
    28px;
}


/* 緑ラベル */

.overview__label {
  display: block;

  width: 445px;
  max-width: 48%;

  margin:
    0 0
    8px;

  padding:
    4px 12px;

  border: 0;

  background:
    var(--overview-green);

  color: #fff;

  font-size: 34px;
  font-weight: 300;

  line-height: 1.35;
}


/* 概要本文 */

.overview__text {
  margin: 0;

  padding-left: 10px;

  color: #292929;

  font-size: 40px;
  font-weight: 300;

  line-height: 1.45;
}


/* 注釈 */

.overview__note {
  margin:
    3px 0 0;

  padding-left:
    10px;

  color: #333;

  font-size: 16px;

  line-height: 1.5;
}


/* =========================================================
   HAPPY ROAD
   ========================================================= */

.overview__shop {
  margin-top:
    80px;

  text-align: center;
}

.overview__logo {
  display: block;

  width: 420px;
  max-width: 45%;

  margin:
    0 auto
    12px;

  transition:
    opacity .25s ease,
    transform .25s ease;
}

.overview__logo img {
  width: 100%;
}

.overview__logo:hover {
  opacity: .85;

  transform:
    translateY(-3px);
}

.overview__link {
  margin: 0;

  font-size: 25px;
  font-weight: 700;

  text-align: center;
}

.overview__link a {
  color: #00a5d6;

  text-decoration: none;
}

.overview__link a:hover {
  text-decoration: underline;
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {
  position: relative;

  z-index: 1;

  width: 100%;

  padding:
    42px 4%
    60px;

  background:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #fffef4 32%,
      #fff7b0 72%,
      #fff06a 100%
    );

  text-align: center;
}

.footer__inner {
  max-width: 1280px;

  margin: 0 auto;

  padding:
    55px 40px
    30px;
}

.footer__sns {
  display: flex;

  align-items: flex-start;
  justify-content: center;

  gap: 70px;

  margin: 0;

  padding: 0;

  list-style: none;
}

.footer__sns-item {
  width: 150px;
}

.footer__sns-item a {
  display: block;

  color: #222;

  text-decoration: none;
}

.footer__sns-label {
  display: inline-block;

  margin-bottom: 20px;

  color: #222;

  font-size: 36px;

  line-height: 1;

  text-decoration: underline;

  text-underline-offset: 6px;
}

.footer__sns-item img {
  width: 140px;

  margin: 0 auto;

  transition:
    opacity .2s ease,
    transform .2s ease;
}

.footer__sns-item a:hover img {
  opacity: .8;

  transform:
    translateY(-3px);
}

.footer__copyright {
  margin:
    35px 0 0;

  color: #222;

  font-size: 20px;

  line-height: 1;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1200px) {

  .white-panel {
    width:
      calc(100% - 60px);

    padding:
      40px 6%
      60px;
  }

  .report-section__text {
    font-size:
      clamp(18px, 2vw, 26px);
  }

  .overview__title {
    font-size:
      clamp(34px, 4vw, 48px);
  }

  .overview__label {
    font-size:
      clamp(24px, 2.8vw, 34px);
  }

  .overview__text {
    font-size:
      clamp(26px, 3.2vw, 40px);
  }

}


/* =========================================================
   SP
   ========================================================= */

@media (max-width: 768px) {


  /* 背景 */

  .lp-bg {
    background:
      url("../images/back_sp.jpeg")
      top center / 100% auto no-repeat;
  }


  /* 半透明白 */

  .white-panel {
    width: 92%;
    max-width: none;

    margin: 0 auto;

    padding:
      20px 14px
      35px;

    background:
      rgba(255, 255, 255, .60);
  }


  /* 開催御礼 */

  .report-intro {
    margin-bottom:
      18px;
  }


  /* レポート枠 */

  .report-box {
    width: 100%;

    padding:
      30px 18px
      38px;

    border-width:
      3px;

    border-radius:
      22px;
  }

  .report-box::before {
    inset: 3px;

    border-width:
      4px;

    border-radius:
      18px;
  }

  .report-box::after {
    inset: 7px;

    border-width:
      2px;

    border-radius:
      15px;
  }


  /* レポート見出し */

  .report-heading {
    margin-bottom:
      20px;
  }


  /* 各記事 */

  .report-section {
    margin-bottom:
      28px;
  }

  .report-section__title {
    margin-bottom:
      10px;
  }

  .report-section__text {
    margin-bottom:
      12px;

    font-size:
      clamp(11px, 3.2vw, 14px);

    line-height:
      1.7;
  }

  .report-image {
    margin:
      9px 0
      15px;
  }


  /* 開催概要 */

  .overview {
    width: 100%;

    margin-top:
      35px;
  }

  .overview__title {
    margin-bottom:
      18px;

    font-size:
      27px;
  }

  .overview__item {
    margin-bottom:
      20px;
  }

  .overview__label {
    width: 58%;
    max-width: none;

    margin-bottom:
      5px;

    padding:
      3px 8px;

    font-size:
      18px;
  }

  .overview__text {
    padding-left:
      5px;

    font-size:
      18px;

    line-height:
      1.5;
  }

  .overview__note {
    padding-left:
      5px;

    font-size:
      10px;
  }


  /* HAPPY ROAD */

  .overview__shop {
    margin-top:
      45px;
  }

  .overview__logo {
    width: 55%;
    max-width: none;
  }

  .overview__link {
    font-size:
      13px;
  }


  /* footer */

  .footer {
    padding:
      20px 4%
      30px;
  }

  .footer__inner {
    padding:
      35px 15px
      24px;
  }

  .footer__sns {
    gap:
      28px 18px;
  }

  .footer__sns-item {
    width:
      calc(33.333% - 12px);
  }

  .footer__sns-label {
    margin-bottom:
      10px;

    font-size:
      20px;
  }

  .footer__sns-item img {
    width:
      80px;
  }

  .footer__copyright {
    margin-top:
      28px;

    font-size:
      20px;
  }

}


/* =========================================================
   REPORT 内部レイアウト
   ========================================================= */

.report-section {
  margin-bottom: 45px;
}

.report-section:last-child {
  margin-bottom: 0;
}

.report-section__title {
  width: 100%;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: none;
}

.report-section__title img {
  width: 100%;
}

.report-section__text {
  margin: 0 0 18px;

  color: #666;

  font-size: 26px;
  font-weight: 300;
  line-height: 1.7;
}

.report-image {
  width: 100%;
  margin: 12px 0 20px;
}

.report-image img {
  width: 100%;
}


/* 2カラム部分 */

.report-grid {
  display: grid;
  gap: 12px;
}

.report-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.report-grid .report-image {
  margin: 0;
}


/* 人物＋本文 */

.report-profile {
  display: flex;
  align-items: flex-start;

  gap: 24px;
      margin-bottom: 30px;
    border-bottom: 1px solid #666;
    padding-bottom: 30px;
}

.report-profile01 {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 30px;
    border-bottom: 4px solid #00b2ef;
    padding-bottom: 30px;
}

.report-profile03 {
  display: flex;
  align-items: flex-start;

  gap: 24px;
}


.report-profile__image {
  flex: 0 0 34%;
}

.report-profile__image img {
  width: 100%;
}

.report-profile__body {
  flex: 1;
}

.report-profile__body p {
  margin: 0;

  color: #666;

  font-size: 20px;
  line-height: 1.7;
}



.report-interview__name {
  margin: 0 0 18px;
  color: #777;
  font-size: 28px !important;
  font-weight: 300;
  line-height: 1.4;
padding-bottom: 10px !important;  


}

.report-interview__name span {
  display: block;
  font-size: 22px;

}


.footer__sp {
  display: none;
}




/* SP */

@media (max-width: 768px) {

  .report-section {
    margin-bottom: 28px;
  }

  .report-section__title {
    margin-bottom: 8px;
  }

  .report-section__text {
    margin-bottom: 10px;

    font-size: 12px;
    line-height: 1.7;
  }

  .report-image {
    margin: 8px 0 12px;
  }

  .report-grid {
    gap: 6px;
  }

  .report-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .report-profile {
    gap: 10px;
  }

  .report-profile__image {
    flex-basis: 25%;
  }

  .report-profile__body p {
    font-size: 11px;
    line-height: 1.4;
  }

.report-profile01 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 30px;
    border-bottom: 4px solid #00b2ef;
    padding-bottom: 30px;
}

.report-interview__name {
font-size: 14px !important;

}

.report-interview__name span {

  display: block;

  font-size: 12px;

}
  /* PC用を非表示 */
  .footer__sns,
  .footer__copyright {
    display: none;
  }

  .footer__sp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .footer__sp-x {
    display: block;
    width: 80px;
    text-decoration: none;
  }

  .footer__sp-x img {
    display: block;
    width: 100%;
    height: auto;
  }

  .footer__sp-copyright {
    margin: 12px 0 0;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
  }
}


.report-section__title {
  width: 100%;
  margin: 0 0 20px;
  padding: 17px 30px 20px;

  border-radius: 999px;

  background: linear-gradient(
    to bottom,
    #5368ff 0%,
    #087bff 25%,
    #00aef2 65%,
    #00cbe8 100%
  );

  color: #fff;

  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;

  text-shadow:
    0 2px 2px rgba(0, 0, 0, .18);

  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, .35),
    0 2px 3px rgba(0, 0, 0, .18);
}

h4.text-center {
    text-align: center;
    font-size: 30px;
}

@media (max-width: 768px) {

  .report-section__title {
    margin-bottom: 10px;
    padding: 8px 12px 9px;

    font-size: clamp(14px, 4vw, 20px);
    line-height: 1.25;
  }

h4.text-center {
    text-align: center;
    font-size: 16px;
}
}