/*
Theme Name:inspirelab
Template: ystandard
*/


/* --------------------------------------------------------------------------------------------------------------
共通
-------------------------------------------------------------------------------------------------------------- */
@font-face {
    font-family: 'lineseedjp-eb';
    src: url('fonts/WOFF2/LINESeedJP_OTF_Eb.woff2') format('woff2'),
         url('fonts/WOFF/LINESeedJP_OTF_Eb.woff') format('woff'),
         url('fonts/EOT/LINESeedJP_TTF_Eb.eot') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'lineseedjp-bd';
    src: url('fonts/WOFF2/LINESeedJP_OTF_Bd.woff2') format('woff2'),
         url('fonts/WOFF/LINESeedJP_OTF_Bd.woff') format('woff'),
         url('fonts/EOT/LINESeedJP_TTF_Bd.eot') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body {
  font-family: "Poppins", 'Noto Sans Japanese', sans-serif;
  /*
  font-family: "Noto Serif", serif;
*/
  overflow: visible !important;
}
body:not(.has-sidebar) .site-content {
  overflow: visible!important;
}
a:hover {
  opacity: .7;
}
.main-top {
  position: relative;
  z-index: 4;
}
.top-section-inner  {
  margin: 0 auto;
  max-width: 1280px;
}
.top-section-inner-narrow  {
  margin: 0 auto;
  max-width: 1280px;
}
.content__main {
  margin: 0 auto;
  max-width: 1200px;
}
.sp-only {
  display: none;
}
.site-header button {
  color: #fff;
}
@media (max-width: 767px) {
  .sp-only {
    display: block;
  }
  .pc-only {
    display: none;
  }
}
@media screen and (max-width: 600px) {
}

/* --------------------------------------------------------------------------------------------------------------
ヘッダー
-------------------------------------------------------------------------------------------------------------- */
.site-header {
  background-color: rgba(255,255,255,0);
  position: absolute;
  top: 0;
  z-index: 5;
  width: 100%;
}
.site-header-single {
  background-color: #000;
  position: relative;
  margin: 0;
}
.site-header__content {
  justify-content: space-between;
}
.site-content {
  margin-top: 0;
}
.site-branding .custom-logo {
  width: 200px;
}
.site-title a {
  color: #fff !important;
  font-family: "Noto Serif", serif;
  font-weight: 300;
}

/* gnav */
#menu-gnav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}
#menu-gnav > li {
  position: relative;
}
#menu-gnav > li > a {
  color: #fff;
  display: block;
  padding: 10px 20px;
  text-decoration: none;
}
.menu-gnav-submenu {
  background-color: rgba(255,255,255,.9);
  border-radius: 10px;
  display: none;
  font-size: 14px;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 5px 0;
  margin: 0;
  list-style: none;
  width: 250px;
}
#menu-gnav > li:hover .menu-gnav-submenu {
  display: block;
}

.menu {
  display: flex;
  list-style: none;
  margin: 0;
}
.menu li a {
  color: #111;
  display: block;
  font-size: 13px;
  padding: 5px 10px;
  text-decoration: none;
}
.menu-gnav-submenu a {
  margin: 0 10px;
}
.menu-gnav-submenu a:hover {
  background-color: #ccc;
}
/* Bogo */
.bogo-language-switcher {
  display: flex;
  height: auto;
  margin: 4px 0 0;
  padding: 0;
}
.bogo-language-switcher a {
  color: #fff;
  display: inline-block;
  line-height: 1;
  padding: 8px 10px;
  text-decoration: none;
}
.bogo-language-switcher a.current {
  border-bottom: 4px solid #fff;
}

/* mobile menu */
.mobile-menu-frame {
  margin: 50px 0;
}
.mobile-menu-box a {
  display: block;
  padding: 10px 0;
}
.mobile-menu-box h2 {
  color: #fff;
  margin-bottom: 10px;
}


@media (max-width: 768px) {
  .menu {
    display: none;
  }
}

/* --------------------------------------------------------------------------------------------------------------
フッター
-------------------------------------------------------------------------------------------------------------- */
/*　フッターコンタクト　*/
.footer-contact {
  background-color: #f6f6f6;
  border-radius: 25px;
	max-width: 1280px;
  margin: 80px auto;
  padding: 20px 40px;
}
.footer-contact-midashi {
	font-size: 40px;
  margin: 10px 0 20px;
  text-align: center;
}
.footer-contact-frame {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-contact-box {
  padding-bottom: 60px;
  text-align: center;
  width: 50%;
}
.footer-contact-box h3 {
  font-style: normal !important;
  margin: 40px 0 30px !important;
}
.footer-company {
  border-right: 1px solid #ddd;
}
html[lang="en-US"] .footer-contact-box {
  width: 100%;
}
html[lang="en-US"] .footer-company {
  border-right: 0;
}
html[lang="en-US"] .footer-personal {
  display: none;
}


/* フッターメニュー */
#footer {
  background-color: #000;
}
.footer-logo {
  width: 300px;  
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto 30px;
  padding: 60px 0;
  width: 90%;
}
.footer-frame {
  display: flex;
  flex-wrap: wrap;
}
.footer-box {
  padding: 0 10px;
  width: 25%;
}
.footer-box-1st {
  width: 32%;
}
.footer-box-3rd {
  width: 18%;
}
.footer-box h2 {
  color: #fff;
  font-size: 16px;
  font-weight: 200;
  margin: 0 0 10px 10px;
  opacity: .85;
}
.footer-logo {
  margin-right: 60px;
  max-width: 300px;
  width: 100%;
}
.footer-logo a {
  color: #000;
  font-size: 30px;
  font-weight: 300;
}
.footer-bogo {
  margin-bottom: 30px;
}
.footer-nav {
  margin: 0 auto 30px;
  padding: 0;
  width: 100%;
}
.footer-nav ul,
.footer-nav ul.menu {
  display: block;
  margin: 0;
  padding: 0;
}
.footer-nav li,
.footer-nav .menu li {
  list-style: none;
  margin-bottom: 0;
  padding-left: 25px;
  position: relative;
}
.footer-nav li:before,
.footer-nav .menu li:before {
    border-top: 2px solid rgba(255,255,255,.75);
    border-right: 2px solid rgba(255,255,255,.75);
    content: "";
    display: block;
    height: 4px;
    margin-top: -3px;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: rotate(45deg);
    width: 4px;
}
.footer-nav a,
.footer-nav .menu a {
    color: #fff;
    display: block;
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
    text-align: left;
}

/*メールマガジンとInstagram*/
.footer-mailmag {
  margin: 20px 0;
}
.footer-mailmag a {
  border: 1px solid #fff;
  border-radius: 25px;
  color: #fff;
  display: block;
  padding: 5px 10px;
  text-align: center;
}
.footer-sns-instagram {
  margin: 20px 10px;
}
.footer-sns-instagram svg {
  fill: #fff;
}

@media screen and (max-width: 1280px) {
  .footer-contact {
    margin: 80px 20px;
  }
}
@media screen and (max-width: 767px) {
  .footer-contact {
    margin-right: 10px;
    margin-left: 10px;
    padding: 20px 20px 0;
  }
  .footer-contact-frame {
    display: block;
  }
  .footer-contact-box {
    width: 100%;
  }
  .footer-contact-box p {
    font-size: 15px;
  }
  .footer-company {
    border-right: 0;
    border-bottom: 1px solid #ddd;
  }
  .footer-logo {
    margin: 0 auto 30px;
  }
  .footer-box {
    margin-bottom: 30px;
    width: 100%;
  }
  .footer-box-1st {
    width: 100%;
  }
  .footer-box-3rd {
    width: 100%;
  }
}


/* --------------------------------------------------------------------------------------------------------------
パンくずリスト
-------------------------------------------------------------------------------------------------------------- */
.breadcrumbs__list {
  margin: 10px 10px 30px;
}
.breadcrumbs__item a {
  color: #2980b9;
  font-weight: bold;
}
.breadcrumbs__item:before {
  content: ">";
}
/* --------------------------------------------------------------------------------------------------------------
記事ページ・固定ページ
-------------------------------------------------------------------------------------------------------------- */
/* ヘッダー 背景画像ver */
.entry-header-eyecatch {
  background-image: url('https://www.inspire-lab.com/wp-content/themes/inspirelab/images/eyecatch-none.jpg');
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-bottom: 0;
  margin-right: -50vw;
  width: 100vw;
  background-size: cover;
}
.entry-header-eyecatch::before {
  content: '';
  background-color: rgba(0,0,0,.3);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.entry-header-inner {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  height: 50vh;
  position: relative;
  z-index: 3;
}
.entry-h1 {
  color: #fff;
  font-weight: 600;
  font-size: 60px;
  margin: 0;
}

/* ヘッダー グラデーションver */
.animated-gradient-frame {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}
.animated-gradient {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  width: 100vw;
  height: 40vh;
}
.animated-gradient-h1 {
  color: #fff;
  font-weight: 600;
  font-size: 60px;
  margin: 0;
}
.subtitle-en {
  color: #fff;
  font-weight: 200;
  font-size: 22px;
  font-style: italic;
  margin: 0;
  text-align: center;
  width: 100%;
}
.subtitle-ja {
  color: #fff;
  font-weight: 200;
  font-size: 26px;
  margin: 0;
  text-align: center;
  width: 100%;
}
#business .animated-gradient-frame {
  /* ブルー系
  background: radial-gradient(circle, #0045ff, #0096ff);
  */
  background: radial-gradient(circle, #a100ff, #460073);
  background-size: 300% 300%;
  animation: gradientAnimation 20s ease infinite;
}
#financial .animated-gradient-frame {
  background: linear-gradient(45deg, #2e20b9, #9623e0);
  background-size: 300% 300%;
  animation: gradientAnimation 20s ease infinite;
}
/*
#creative .animated-gradient-frame {
  background: radial-gradient(circle, #ff006a, #ff7800);
  background-size: 300% 300%;
  animation: gradientAnimation 20s ease infinite;
}
*/
#wellness .animated-gradient-frame {
  background: radial-gradient(circle, #08d1bf, #c3e15e);
  background-size: 300% 300%;
  animation: gradientAnimation 20s ease infinite;
  opacity: .85;
}
#education .animated-gradient-frame {
  background: radial-gradient(circle, #001b57, #0147f8);
  background-size: 300% 300%;
  animation: gradientAnimation 20s ease infinite;
}
@keyframes gradientAnimation {
    0% {
        background-position: 0% 0%;
    }
    25% {
        background-position: 50% 50%;
    }
    50% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 50% 50%;
    }
    100% {
        background-position: 0% 0%;
    }
}

/* 動画背景 */
#japan-market-entry-solutions .animated-gradient,
#inbound .animated-gradient,
#financial .animated-gradient,
#business .animated-gradient,
#creative .animated-gradient {
  background: none;
  display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
  height: 80vh;
  position: relative;
  width: 100%;
  z-index: 2;
}
.video-bg {
  height: 100%;
  overflow: hidden;
  position: absolute;
  width: 100%;
  z-index: -1; /* 背景として後ろに配置 */
}
.video-bg__media {
  display: block;
  height: 100%;
  min-width: 100%;
  object-fit: cover; /* アスペクト比を保ちつつ、はみ出し部分を切り取る */
  position: absolute;
    top: 50%;
    left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
}
.video-bg::before {
  background-image: url(./images/video-dotto.png);
  background-size: 3px auto;
  content: "";
  height: 100%;
  opacity: 0.5;
  position: absolute;
    top: 0;
    left: 0;
  width: 100%;
  z-index: 11;
}
#creative .video-bg::before {
  background-image: url(./images/video-dotto-fff.png);
}
#business .animated-gradient-h1,
#creative .animated-gradient-h1,
#financial .animated-gradient-h1,
#inbound .animated-gradient-h1 {
  color: #999;
  font-weight: 300;
  font-size: 2vw;
  letter-spacing: -2px;
  margin: 0;
}
#business .animated-gradient h2 {
  font-weight: 600;
  font-size: 8vw;
  font-style: normal;
  letter-spacing: -2px;
  line-height: 1.2;
  margin: 0;
}
#creative .animated-gradient h2 {
  color: #000;
  font-weight: 600;
  font-size: 10vw;
  font-style: normal;
  letter-spacing: -2px;
  line-height: 1.2;
  margin: 0;
}
#financial .animated-gradient h2 {
  font-weight: 600;
  font-size: 8vw;
  font-style: normal;
  letter-spacing: -2px;
  line-height: 1.2;
  margin: 0;
}
#inbound .animated-gradient h2 {
  font-weight: 600;
  font-size: 7.5vw;
  font-style: normal;
  letter-spacing: -2px;
  line-height: 1.2;
  margin: 0;
}
body#creative.ja .animated-gradient h2 {
  font-size: 7vw;
}
body#financial.ja .animated-gradient h2 {
  font-size: 7vw;
}
body#inbound.ja .animated-gradient h2 {
  font-size: 8vw;
}

/* コンテンツ */
.single-column {
  max-width: 800px;
}
.entry-header {
  margin: 10px auto;
  max-width: 960px;
}
.entry-header-title {
  color: #000;
  font-size: 32px;
  font-weight: 900;
}
.entry-date-box {
  margin-top: 8px;
}
.entry-date {
  color: #999;
  font-size: 14px;
}
.entry-content {
  margin: 2em auto;
  max-width: 960px;
}
.entry-content h2 {
  color: #000;
  border-bottom: 1px solid #000;
  font-size: 30px;
  font-weight: 700;
  margin-top: 100px;
  padding-bottom: 10px;
}
.entry-content h3 {
  border-left: 5px solid #000;
  color: #000;
  font-size: 24px;
  font-style: italic;
  font-weight: bold;
  padding-left: 10px;
}
.entry-content h4 {
  color: #000;
  font-size: 21px;
  font-weight: 500;
}
.entry-content p {
  font-size: 17px;
}
.entry-content li {
  margin: 0 0 15px;
}
.wp-block-table td,
.wp-block-table th {
  border-color: #eee;
  padding: 1em;
}
@media screen and (max-width: 767px) {
  .entry-h1 {
    font-size: 28px;
    padding: 0 20px;
  }
  .animated-gradient-h1 {
    font-size: 26px;
    padding: 0 20px;
  }
  #business .animated-gradient-h1,
  #creative .animated-gradient-h1,
  #financial .animated-gradient-h1 {
    font-size: 3vw;
    letter-spacing: 0;
  }
  #creative .animated-gradient h2 {
    font-size: 11vw;
  }
}
@media screen and (max-width: 489px) {
  body#creative.ja .animated-gradient h2,
  body#financial.ja .animated-gradient h2 {
    font-size: 9vw;
  }
}

/* --------------------------------------------------------------------------------------------------------------
　投稿ページの固有の設定
-------------------------------------------------------------------------------------------------------------- */
#business .entry-content h2,
#business .entry-content h3 {
  border: none;
}
#financial .entry-content h2,
#financial .entry-content h3 {
  border-color: #2e20b9;
}
#creative .entry-content h2,
#creative .entry-content h3 {
  border: none;
}
#wellness .entry-content h2,
#wellness .entry-content h3 {
  border-color: #08d1bf;
}
#education .entry-content h2,
#education .entry-content h3 {
  border-color: #001b57;
}

/* --------------------------------------------------------------------------------------------------------------
ボタン
-------------------------------------------------------------------------------------------------------------- */
.main-btn a,
.sub-btn a,
.line-btn a {
  background-color: #000;
  border-radius: 30px;
  color: #fff;
  display: block !important;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.4;
  margin: 0 auto;
  max-width: 320px;
  overflow: hidden;
  padding: 15px 10px;
  position: relative;
  text-align: center;
  text-decoration: none;
}
.main-btn {
  display: flex;
  justify-content: center;
}
.main-btn a {
  width: 100%;
}
.sub-btn a {
  background-color: #000;
  color: #fff;
}
.line-btn a {
  background-color: #06c755;
  color: #fff;
}
.top-column-btn a {
  background-color: #FF99AC;
  background-image: linear-gradient(270deg, #FF99AC 0%, #FF9A8B 36%, #FF6A88 100%);
  color: rgba(255,255,255,.9);
  margin: 30px auto;
}
.contact-form input[type=submit] {
  border-radius: 30px;
  border: 0;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1.4;
  margin: 0 auto;
  max-width: 320px;
  overflow: hidden;
  padding: 15px 10px;
  position: relative;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  width: 320px;
}
@media (max-width: 767px) {
}

/* --------------------------------------------------------------------------------------------------------------
アイキャッチ
-------------------------------------------------------------------------------------------------------------- */
/* パララックスコンテナ */
.parallax-container {
  position: relative;
  overflow: hidden;
  height: 100vh;
}
.parallax-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-position: center;
  background-size: cover;
}
.layer-back {
  background-image: url('./images/top-eyecatch-back.jpg'); /* 後ろの画像 */
  z-index: 1;
}
.layer-front {
  background-image: url('./images/top-eyecatch-front.png'); /* 前の画像 */
  z-index: 2;
}

/* トップページのアイキャッチ */
.top-eyecatch-frame {
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  position: relative;
  width: 100%;
  z-index: 3;
  background: none;
}
.eyecatch-frame {
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  position: relative;
  width: 100%;
}
#eyecatch-pc {
  background-image: url("./images/top-eyecatch.jpg");
}
.eyecatch-frame::before,
.top-eyecatch-frame::before {
  content: '';
  background-color: rgba(0,0,0,.2);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.eyecatch-text {
  color: #fff;
  font-size: 100px;
  font-weight: 600;
  line-height: 1.4;
  margin: 5px auto 0;
  text-align: center;
  text-shadow: 0 0 15px rgba(0,0,0,.15);
  z-index: 3;
  opacity: 0; /* アニメーションの初期状態 */
  transform: translateX(-100%); /* 横からスライドインの初期状態 */
  transition: opacity 2s ease, transform 1s ease; /* アニメーションのトランジション設定 */
}
.top-eyecatch-text {
  color: #fff;
  font-size: 100px;
  font-weight: 700;
  line-height: 1.4;
  margin: 5px auto 0;
  text-align: center;
  text-shadow: 0 0 15px rgba(0,0,0,.15);
  z-index: 3;
  opacity: 0; /* アニメーションの初期状態 */
  transform: translateX(-100%); /* 横からスライドインの初期状態 */
  transition: opacity 2s ease, transform 1s ease; /* アニメーションのトランジション設定 */
}
.inspirelab-eyecatch-txt {
  color: #fff;
  font-size: 64px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.4;
  margin: 0 auto;
  position: relative;
  padding: 60px 20px 40px;
  text-align: center;
  text-shadow: 0 0 10px rgba(0,0,0,.2);
  width: 100%;
  z-index: 4;
  opacity: 0; /* アニメーションの初期状態 */
  transform: translateY(100%); /* 下からスライドインの初期状態 */
  transition: opacity 2s ease, transform 1s ease; /* アニメーションのトランジション設定 */
}
.yssh-before-txt,
.your-success-starts-here-frame {
  opacity: 0; /* アニメーションの初期状態 */
  transform: translateY(100%); /* 下からスライドインの初期状態 */
  transition: opacity 2s ease, transform 1s ease; /* アニメーションのトランジション設定 */
}
/* アニメーションのためのクラス */
.top-eyecatch-text.active {
  opacity: 1;
  transform: translateX(0); /* 元の位置にスライド */
}
.inspirelab-eyecatch-txt.active {
  opacity: 1;
  transform: translateY(0); /* 元の位置にスライド */
}
.yssh-before-txt.active {
  opacity: 1;
  transform: translateY(0); /* 元の位置にスライド */
}

.your-success-starts-here-frame.active {
  opacity: 1;
  transform: translateY(0); /* 元の位置にスライド */
}


@media (max-width: 767px) {
  .top-eyecatch-frame {
    background-attachment: inherit;
    height: 500px;
  }
  .top-eyecatch-logo {
    font-size: 40px;
    margin-top: 20px;
  }
  .top-eyecatch-text {
    font-size: 8.5vw;
    font-weight: 700;
  }
  .inspirelab-eyecatch-txt {
    font-size: 6vw;
    font-weight: 700;
    padding: 80px 0 40px;
  }
}
/* --------------------------------------------------------------------------------------------------------------
トップページ
-------------------------------------------------------------------------------------------------------------- */
/* トップページの基本構造 */
.top-section {
  background-color: #fff;
  padding: 80px 0;
}
.top-section img {
  display: block;
}
.top-midashi-h2 {
  color: #000;
  display: inline-block;
  font-size: 60px;
  font-weight: 700;
  margin: 10px auto 0;
  padding: 0 20px;
  width: 100%;
}
.top-midashi-fff {
  color: #fff;
}
.top-midashi-h3 {
  color: rgba(0,0,0,.95);
  display: inline-block;
  font-size: 32px;
  font-weight: 600;
  font-style: normal;
  margin: 20px auto 5px;
  padding: 0;
  width: 100%;
}
.top-content-frame {
  display: flex;
  flex-wrap: wrap;
}
.top-content-text-left {
  order: 1;
}
.top-content-photo-right {
  order: 2;
}
.top-content-text-left,
.top-content-text-right {
  padding: 10px 30px;
  width: 50%;
}
.top-content-photo-left,
.top-content-photo-right {
  display: inline-block;
  position: relative;
  width: 50%;
}

/* トップページのINSPIRE LAB説明コーナー */
.top-inspirelab-frame {
  /*
  background-image: url("./images/top-bluesky.jpg");
  */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 16px;
  font-weight: 300;
  background-color: #000;
  padding: 50px 0;
  width: 100%;
}
.yssh-before-txt {
  color: #fff;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.4;
  margin: 20px auto 80px;
  max-width: 820px;
  padding: 0 20px;
  text-align: center;
}
.eyecatch-inspirelabgroup-en {
  display: block;
  font-size: 80px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
}
.eyecatch-inspirelabgroup-ja {
  display: block;
  font-size: 80px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
}

.your-success-starts-here-frame {
  display: flex;
    align-items: center;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1280px;
  width: 100%;
}
.your-success-starts-here-txt {
  width: 46%;
}
.your-success-starts-here-img {
  width: 54%;
}
.your-success-starts-here-title {
  color: #fff;
  font-weight: 700;
  font-size: 42px;
  font-style: italic;
  margin: 0 0 10px;
  padding-left: 20px;
  opacity: .85;
}
.your-success-starts-here-desc {
  color: #fff;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.4;
  margin: 0 auto;
  max-width: 800px;
  padding: 0 20px;
  position: relative;
  width: 100%;
  z-index: 4;
}
.your-success-starts-here-img {
  margin: 30px auto 0;
  max-width: 1280px;
}
.your-success-starts-here-img img {
  display: block;
}

/* 画像の装飾 */
.grad-frame {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.grad-box {
    position: relative;
    display: inline-block;
  margin-bottom: 30px;
}
.grad-box::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 20px;
    right: -20px;
    bottom: -20px;
    z-index: 2;
    border-radius: 20px; /* Optional: Add rounded corners */
}
#Business .grad-box::before {
  background: linear-gradient(45deg, #2e20b9, #9623e0);
}
#Financial .grad-box::before {
  background: linear-gradient(45deg, #2e20b9, #9623e0);
}
#Creative .grad-box::before {
  background: linear-gradient(45deg, #ff00a3, #ff7800);
}
#Wellness .grad-box::before {
  background: linear-gradient(45deg, #08d1bf, #c3e15e);
  opacity: .85;
}
#Education .grad-box::before {
  background: linear-gradient(45deg, #001b57, #0147f8);
}
.grad-box img {
  position: relative;
	z-index: 3;
}

/*ホリスティックインパクト*/
#impact {
  background-color: #1a1e3f;
  padding: 0;
}
.holistic-impact-frame {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1280px;
}
.holistic-impact-box {
  width: 50%;
}
.holistic-impact-subtitle {
  color: #fff;
  font-size: 14px;
  margin: 50px 0 0;
  padding: 0 15px;
}
.holistic-impact-title {
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  margin: 10px 0 20px;
  padding: 0 15px;
}
.holistic-impact-desc {
  color: #fff;
  font-size: 18px;
  padding: 0 15px;
}

/* トップページのニュース */
#top-news {
  background-color: #f6f6f6;
}
.top-card-frame {
  display: flex;
  flex-wrap: wrap;
  margin: 10px auto 0;
  padding: 0 20px;
}
.top-card-box {
  background-color: #fff;
  border-radius: 20px;
  margin-right: 2.6666%;
  margin-bottom: 30px;
  width: 23%;
}
.top-card-frame article:nth-child(4n) {
  margin-right: 0;
}
.top-card-box a {
  display: block;
  text-decoration: none;
}
.top-card-img img {
  border-radius: 20px 20px 0 0;
  height: 200px;
  object-fit: cover;
  width: 100%;
}
.top-card-meta {
  display: flex;
  align-items: center;
}
.top-card-cat {
  background-color: #000;
  color: #fff;
  display: inline-block;
  font-size: 11px;
  padding: 2px 5px;
  margin: 10px 10px 0;
}
.top-card-date {
  background-color: #fff;
  color: #222;
  font-size: 11px;
  margin: 10px 10px 0;
}
.top-card-title {
  color: #222;
  font-size: 15px;
  padding: 10px;
  margin: 0 0 10px;
}
/* トップページのアーカイブをアーカイブページに反映 */
.archive__item.is-card .archive__meta>div {
  align-items: center;
  background-color: #000;
  color: #fff;
  display: inline-block;
  font-size: 11px;
  padding: 2px 5px;
  margin: 0;
}
.archive__meta .ys-icon {
  display: none;
}
/* トップページのインサイト */
#top-insights {
  background-color: #f6f6f6;
  padding-top: 0;
}

/* 背景色を塗る */
#vibes {
  background-color: #d5e6ef;
}
#life {
  background-color: #fff;
}
/* トップページのボタン */
.top-btn a {
  background-color: #000;
  border-radius: 30px;
  color: #fff;
  display: block !important;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.4;
  margin: 40px 0;
  max-width: 320px;
  overflow: hidden;
  padding: 15px 10px;
  position: relative;
  text-align: center;
  text-decoration: none;
}
.top-btn-white a {
  background-color: #fff;
  color: #000;
}

/* トップページのservice */
.top-service-desc {
  margin-bottom: 40px;
  padding: 0 20px;
}
@media (max-width: 768px) {
  .eyecatch-inspirelabgroup-en,
  .eyecatch-inspirelabgroup-ja {
    font-size: 9vw;
  }
  .top-inspirelab-frame {
    padding: 40px 0;
  }
  .your-success-starts-here-txt,
  .your-success-starts-here-img {
    width: 100%;
  }
  .your-success-starts-here-title {
    font-size: 26px;
    margin: 0 0 20px;
  }
  .your-success-starts-here-desc {
    font-size: 16px;
  }
  .top-midashi-h2 {
    font-size: 36px;
    padding: 10px 20px;
  }
  .top-midashi-h3 {
    font-size: 36px;
  }
  .top-content-frame {
    display: block;
    margin-bottom: 20px;
  }
  .top-content-text-left,
  .top-content-text-right,
  .top-content-photo-left,
  .top-content-photo-right {
    width: 100%;
  }
  .top-btn {
    margin: 0 auto;
    max-width: 320px;
  }
  .top-card-frame {
    padding: 0 10px;
  }
  .top-card-frame article:nth-child(2n),
  .top-card-frame article:nth-child(4n) {
    margin-right: 0;
  }
  .top-card-box {
    width: 48.5%;
  }
  .holistic-impact-title {
    font-size: 26px;
    margin-top: 0;
    padding-top: 20px;
  }
  .holistic-impact-desc {
    margin: 20px 0;
  }
  .holistic-impact-frame {
    display: block;
    margin: 0 auto;
    max-width: 1280px;
  }
  .holistic-impact-box {
    padding-top: 20px;
    width: 100%;
  }
}
@media (max-width: 480px) {
  .top-card-box {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------------------------------------------
トップページ Pickup
-------------------------------------------------------------------------------------------------------------- */
#top-pickup {
  background-color: #f6f6f6;
  padding: 60px 0 80px;
}

/* --------------------------------------------------------------------------------------------------------------
トップページ service
-------------------------------------------------------------------------------------------------------------- */
#service .top-content-frame {
  margin: 30px 0 80px;
}
#service .top-content-text-left,
#service .top-content-text-right {
  padding: 10px 30px;
  width: 60%;
}
#service .top-content-photo-left,
#service .top-content-photo-right {
  padding: 10px 20px;
  width: 38%;
}
#service .top-content-photo-left img,
#service .top-content-photo-right img {
  border-radius: 20px;
  max-width: 480px;
  width: 100%;
}
#service .top-midashi-h3 {
  font-size: 40px;
  font-weight: 700;
  margin-top: 40px;
}
#service .top-midashi-subtitle {
  font-size: 24px;
  margin-top: 0;
}
#service ul {
  margin: 20px 0 40px;
}
#service li {
  font-weight: 500;
}
#Business li {
  color: #2e20b9;
}
#Financial li {
  color: #2e20b9;
}
#Creative li {
  color: #ea136c;
}
#Wellness li {
  color: #00d2bf;
}
#Education li {
  color: #001b57;
}
@media (max-width: 767px) {
  #service .top-content-text-left,
  #service .top-content-text-right {
    padding: 10px;
    width: 100%;
  }
  #service .top-content-photo-left,
  #service .top-content-photo-right {
    padding: 10px;
    width: 100%;
  }
  #service .top-content-photo-left img,
  #service .top-content-photo-right img {
    height: 360px;
    object-fit: cover;
  }
  #service .top-midashi-h3 {
    font-size: 30px;
    margin-top: 0; 
  }
}


@media (max-width: 767px) {
  .top-section {
    padding: 10px 10px 50px;
  }
  .top-section h2 {
    font-size: 42px;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------------------------------------------
ウェルネスハブとアカデミーに共通すること
-------------------------------------------------------------------------------------------------------------- */
.page-section {
  padding: 50px 10px;
}

/* --------------------------------------------------------------------------------------------------------------
ウェルネスハブ
-------------------------------------------------------------------------------------------------------------- */
#vibes-wellness-hub {
  background-color: #f9f1e6;
}
#hub-contents-a {
  background-image: url('./images/hub-contents-a.jpg');
  margin-right: 20px;
}
#hub-contents-b {
  background-image: url('./images/hub-contents-b.jpg');
}
#hub-contents-c {
  background-image: url('./images/hub-contents-c.jpg');
  margin-right: 20px;
}
#hub-contents-d {
  background-image: url('./images/hub-contents-d.jpg');
}

/* --------------------------------------------------------------------------------------------------------------
アカデミー
-------------------------------------------------------------------------------------------------------------- */
#life-science-academy {
  background-color: #000;
}
.aca-title {
  color: #fff;
}
.aca-description {
  color: #fff;
}
#aca-contents-a {
  background-image: url('./images/aca-contents-a.jpg');
  margin-right: 20px;
}
#aca-contents-b {
  background-image: url('./images/aca-contents-b.jpg');
}


/* --------------------------------------------------------------------------------------------------------------
　固定ページの固有設定
-------------------------------------------------------------------------------------------------------------- */
.page-about th {
  width: 120px;
}

/* 目次の役割を果たしている画像＋見出し(縦に積むパターン) */
.page-introduction-frame {
}
.page-introduction-box a {
  color: #111;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  text-decoration: none;
}
.page-introduction-img {
  padding: 10px 10px 10px 0;
  width: 50%;
}
.page-introduction-img img {
  border-radius: 25px;
}
.page-introduction-txt {
  font-size: 30px;
  font-weight: bold;
  padding: 0 10px;
  width: 50%;
}

/* 目次の役割を果たしている画像＋見出し(3つ横に並ぶパターン) */
.page-toc-frame {
  display: flex;
  flex-wrap: wrap;
  margin: 50px 0 0;
}
.page-toc-box {
  width: 33.3333%;
}
.page-toc-box a {
  color: #111;
  display: flex;
  flex-wrap: wrap;
  margin: 0 20px 20px 0;
  text-decoration: none;
}
.page-toc-img {
  width: 100%;
}
.page-toc-img video,
.page-toc-img img {
  display: block;
}
.page-toc-txt {
  width: 100%;
}
.page-toc-txt p {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
  margin: 10px 0 0;
  padding: 0 10px;
  text-align: center;
}
/* 目次の役割を果たしている画像＋見出し(2つ横に並ぶパターン) */
.page-toc-double-frame {
  display: flex;
  flex-wrap: wrap;
  max-width: 800px;
  margin: 50px auto 0;
}
.page-toc-double-box {
  margin-right: 5%;
  width: 47.5%;
}
.page-toc-double-frame div:nth-child(2n) {
  margin-right: 0;  
}
.page-toc-double-box a {
  color: #111;
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 20px;
  text-decoration: none;
}

/* カードスタイルの見せ方 */
.page-cardstyle-frame {
  display: flex;
  flex-wrap: wrap;
  margin: 50px 0 0;
}
.page-cardstyle-box {
  background-color: #fafafa;
  color: #111;
  display: flex;
  flex-wrap: wrap;
  margin: 0 20px 20px 0;
  width: calc(50% - 40px);
}
.page-cardstyle-img {
  width: 50%;
}
.page-cardstyle-img img {
  display: block;
  object-fit: cover;
  height: 300px;
  width: 220px;
}
.page-cardstyle-txt {
  font-size: 16px;
  font-weight: bold;
  margin: 20px 0 0;
  padding: 0 10px;
  width: 50%;
}
.page-cardstyle-txt p {
  font-size: 14px;
  font-weight: normal;
}

/*　会社情報トップページ　*/
.about-page-read-frame {
  margin: 50px auto;
  padding: 100px 0;
  position: relative;
  z-index: 1;
}
.about-page-read-frame::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background-color: #000;
    z-index: -1;
}
.about-page-read-box {
  color: #fff;
  font-size: 17px;
}
.about-page-read-h2 {
  border: 0 !important;
  color: #fff !important;
  font-size: 50px !important;
  margin: 0 0 40px !important;
  text-align: center;
}
#about .entry-content {
  margin-top: 10px;
  max-width: 1280px !important;
}
#about .breadcrumbs__list {
  margin-bottom: 10px;
}
.about-block-h2 {
  border: 0 !important;
  margin: 20px 0 0 !important;
}
.about-block-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.about-block-txt {
  padding: 5px 20px;
  width: 50%;
}
.about-block-img {
  width: 50%;
}
.about-block-img img {
  display: block;
  margin: 0;
}
.about-block-txt .main-btn {
  justify-content: flex-start !important;
}
.about-block-txt .main-btn a {
  margin: 0 !important;
}

/* ウェルネス */
.wellness-subtitle-subtxt {
  display: block;
  font-size: 18px;
  font-weight: 300;
}
.entry-split-frame {
  display: flex;
  align-items: center;
}
.wellness-news-txt {
  color: #f10d68;
  font-style: italic;
}
.entry-split-img {
  width: 50%;
}
.entry-split-txt {
  padding: 10px 20px;
  width: 50%;
}

/* お客様の声 */
.voice-section {
  clear: both;
}
.voice-subtitle {
  font-size: 14px !important;
  margin: 0 0 20px;
}
#voice h3 {
  border-left: 0 !important;
  font-size: 18px !important;
  font-style: italic !important;
  font-weight: 700 !important;
  margin: 30px 0 -10px !important;
  padding-left: 0 !important;
}
#voice h3:first-child {
  margin-top: 0;
}
#voice figure {
  float: left;
  margin-top: 15px;  
}
/* voiceで出た影響を再度上書き */
#contact h3 {
  font-style: normal !important;
  margin: 40px 0 30px !important;
}

@media screen and (max-width: 767px) {
  .about-block-box {
    display: block;
  }
  .about-block-txt {
    width: 100%;
    margin: 20px 0 50px;
  }
  .about-block-img {
    width: 100%;
  }
  .about-page-read-h2 {
    font-size: 8vw !important;
  }

  /* 目次の役割を果たしている画像＋見出し(縦に2つ積むパターン) */
  .page-introduction-img img {
    border-radius: 15px;
  }
  .page-introduction-txt {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
    padding: 15px 5px 0;
  }
  /* 目次の役割を果たしている画像＋見出し(2つ横に並ぶパターン) */
  .page-toc-box {
    margin: 0 2% 20px 0;
    width: 49%;
  }
  .page-toc-frame div:nth-child(2n) {
    margin-right: 0;
  }
  .page-toc-box a {
    margin: 0;
    padding: 0 0 10px;
  }
  .page-toc-img {
    width: 100%;
  }
  .page-toc-img img {
    object-fit: contain;
    height: auto;
    width: 100%;
  }
  .page-toc-txt {
    width: 100%;
  }
  /* カードスタイルの見せ方 */
  .page-cardstyle-box {
    margin: 0 0 20px;
    width: 100%;
  }
  .page-cardstyle-img {
    width: 100%;
  }
  .page-cardstyle-img img {
    object-fit: contain;
    height: auto;
    width: 100%;
  }
  .page-cardstyle-txt {
    width: 100%;
  }

  
  .entry-split-frame {
    display: block;
  }
  .entry-split-img,
  .entry-split-txt {
    padding: 10px 0;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------------------------------------------
　固定ページの固有設定 経営理念ページ .page-brand.php
-------------------------------------------------------------------------------------------------------------- */
/* 基本設計 */
.brand-container {
  margin: 0 0 150px;
}
.brand-section {
  max-width: 1280px;
  margin: 0 auto;
}
#brand .container {
  max-width: 1280px !important;
  padding: 0 !important;
}
#brand .content__main,
#brand .entry-content {
  max-width: 1280px !important;
}

/* ブランドのコア */
.brand-core {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 50px 0;
}
.brand-core-txt {
  width: 55%;
}
.brand-core h2 {
  border: 0;
  font-size: 80px;
  margin-top: 0;
}
.brand-core-logo {
  margin: 0 auto 30px;
  max-width: 600px;
  width: 45%;
}
.brand-core-logo img {
  width: 100%;
}

/* ブランドの哲学 */
.brand-philosophy {
  margin: 50px auto;
  padding: 100px 0;
  position: relative; /* 擬似要素が中に表示されるように相対位置を指定 */
  z-index: 1; /* コンテンツが擬似要素の上に来るように設定 */
}
.brand-philosophy::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%; /* 左右の中央を起点にする */
  right: 50%; /* 右側も同様に50% */
  transform: translateX(-50%); /* translateで中央寄せを実現 */
  width: 100vw; /* ビューポート幅いっぱいにする */
  height: 100%; /* 高さは要素に合わせる */
  background-color: #000; /* 背景色 */
  z-index: -1; /* 背景色が後ろに来るように設定 */
}
.brand-philosophy-inner {
  position: relative;
}
.brand-philosophy-inner::before {
  content: "";
  position: absolute;
  top: -35%; /* 多少はみ出してもいいので上にずらす */
  bottom: -35%; /* 下にも少しはみ出させる */
  left: 53%;
  width: 1px; /* 線の太さ */
  background-color: #fff; /* 白いボーダー */
  transform: rotate(35deg); /* 線を斜めに */
  z-index: 1;
}
.brand-philosophy-frame {
  display: flex;
  flex-wrap: wrap;
  padding: 0 20px;
}
.brand-philosophy-box {
  width: 50%;
}
.brand-philosophy h2 {
  border: 0;
  color: #fff;
  font-size: 80px;
  margin: 0 0 50px 20px;
}
.brand-philosophy h3 {
  border: 0;
  color: #fff;
  font-size: 50px;
  font-weight: 700;
  font-style: normal;
  margin: 0 0 20px;
  padding: 0;
  text-align: left;
}
.brand-philosophy p {
  color: #fff;
}

/* ブランドの価値 */
.brand-value {
  padding-bottom: 50px;
}
.brand-value-frame {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.brand-value-title {
  width: 40%;
    position: relative;
  z-index: 2;
  text-align: center;
}
.brand-value-title::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1500px; /* 円の幅 */
  height: 1500px; /* 円の高さ */
  border: 1px solid #000; /* ボーダーの色 */
  border-radius: 50%; /* 円形にする */
  transform: translate(-85%, -50%);
  z-index: -1; /* テキストの後ろに配置 */
}
.brand-value-content {
  width: 60%;
}
.brand-value-item2,
.brand-value-item4 {
  margin-left: 60px;  
}
.brand-value-item3 {
  margin-left: 120px;  
}
.brand-value h2 {
  border: 0;
  font-size: 80px;
  margin: 0;
}
.brand-value h3 {
  border: 0;
  font-size: 30px;
  font-weight: 900;
  margin-top: 60px;
  padding-left: 0;
}

/* ブランドのホリスティックインパクト */
.brand-holistic {
  margin: 50px auto;
  padding: 100px 0;
  position: relative; /* 擬似要素が中に表示されるように相対位置を指定 */
  z-index: 2; /* コンテンツが擬似要素の上に来るように設定 */
}
.brand-holistic::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%; /* 左右の中央を起点にする */
  right: 50%; /* 右側も同様に50% */
  transform: translateX(-50%); /* translateで中央寄せを実現 */
  width: 100vw; /* ビューポート幅いっぱいにする */
  height: 100%; /* 高さは要素に合わせる */
  background-color: #000; /* 背景色 */
  z-index: -1; /* 背景色が後ろに来るように設定 */
}
.brand-holistic-box {
  display: flex;
  flex-wrap: wrap;
}
.brand-holistic-txt {
  padding: 0 20px;
  width: 50%;
}
.brand-holistic-img {
  margin-top: 20px;
  width: 50%;
}
.brand-holistic h2 {
  color: #fff;
  font-size: 50px;
  font-weight: 900;
  margin-top: 0;
  margin-left: 20px;
}
.brand-holistic-subtitle {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 40px 20px;
}
.brand-holistic p {
  color: #fff;
}

/* ブランドスローガン */
.brand-slogan {
  padding: 50px 20px;
}
.brand-slogan h2 {
  border: 0;
  font-size: 50px;
  font-weight: 900;
  margin: 0;
}
.brand-slogan-txt-en {
  font-size: 8vw;
  font-weight: 700;
  margin: 15px 0;
  text-align: center;
}
.brand-slogan-txt-en-en {
  font-size: 7.5vw;
}
.brand-slogan-txt-ja {
  font-size: 6vw;
  font-weight: 700;
  margin: 15px 0;
  text-align: center;
}
/* ブランドステートメント */
.brand-statement {
  margin: 50px auto;
  padding: 100px 20px;
  position: relative; /* 擬似要素が中に表示されるように相対位置を指定 */
  z-index: 1; /* コンテンツが擬似要素の上に来るように設定 */
}
.brand-statement::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%; /* 左右の中央を起点にする */
  right: 50%; /* 右側も同様に50% */
  transform: translateX(-50%); /* translateで中央寄せを実現 */
  width: 100vw; /* ビューポート幅いっぱいにする */
  height: 100%; /* 高さは要素に合わせる */
  background-color: #000; /* 背景色 */
  z-index: -1; /* 背景色が後ろに来るように設定 */
}
.brand-statement h2 {
  border: 0;
  color: #fff;
  font-size: 50px;
  font-weight: 900;
  margin: 0 0 30px;
}
.brand-statement p {
  color: #fff;
  font-size: 19px;
}
.brand-statement-accent {
  font-size: 36px !important;
  font-weight: 700;
  margin: 50px 0 0;
}
@media screen and (max-width: 767px) {
/* ブランドのコア */
  .brand-core {
    display: block;
    padding-bottom: 10px;
  }
  .brand-core-txt {
    padding: 0 20px;
    width: 100%;
  }
  .brand-core h2 {
    font-size: 40px;
  }
  .brand-core-logo {
    width: 100%;
  }
  
  /* ブランドの哲学 */
  .brand-philosophy {
    padding-bottom: 50px;
  }
  .brand-philosophy-frame {
    display: block;
    padding: 0;
  }
  .brand-philosophy-box {
    width: 100%;
  }
  .brand-philosophy-inner::before {
    content: none;
  }
  .brand-philosophy h2 {
    font-size: 70px;
    padding: 0 20px;
    margin: 0 0 50px;
  }
  .brand-philosophy-title-en {
    font-size: 50px;
  }
  .brand-philosophy-box {
    margin-bottom: 50px;
    padding: 0 20px;
  }
  
  
  /* ブランドの価値 */
  .brand-value {
    padding-bottom: 40px;
  }
  .brand-value-frame {
    display: block;
    padding: 0 20px;
  }
  .brand-value-title {
    text-align: left;
    width: 100%;
  }
  .brand-value-content {
    width: 100%;
  }
  .brand-value-item2,
  .brand-value-item3,
  .brand-value-item4 {
    margin-left: 0;  
  }
  .brand-value-title::before {
    content: none;
  }
  .brand-value-content br {
    display: none;
  }

  /* ホリスティックインパクト */
  .brand-holistic {
    padding-bottom: 60px;
  }
  .brand-holistic-frame {
    display: block;
  }
  .brand-holistic h2 {
    font-size: 6.5vw;
  }
  .brand-holistic-txt  {
    margin-bottom: 40px;
    width: 100%;
  }
  .brand-holistic-img {
    width: 100%;
  }
  
  /* ブランドスローガン */
  .brand-slogan h2 {
    font-size: 9vw;
    font-weight: 900;
    margin: 0 0 50px;
  }
  .brand-slogan-txt-en {
    font-weight: 900;
    margin: 15px 0;
    text-align: left;
  }
  .brand-slogan-txt-ja {
    font-weight: 900;
    margin: 15px 0;
    text-align: left;
  }
  /* ブランドステートメント */
  .brand-statement h2 {
    font-size: 7.5vw;
    margin: 0 0 50px;
  }
  .brand-statement p {
    font-size: 17px;
  }
  .brand-statement-accent {
    font-size: 32px !important;
  }
}

@media screen and (min-width: 1380px) { /* 画面がある程度以上大きい時限定の指定 */
  .brand-slogan-txt-en {
    font-size: 110px;
  }
  .brand-slogan-txt-ja {
    font-size: 80px;
  }
}



/* --------------------------------------------------------------------------------------------------------------
　タイルの見せ方
-------------------------------------------------------------------------------------------------------------- */
.card-style-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* タイル間のスペース */
    max-width: 1200px;
    margin: 50px auto; /* 中央揃え */
}
.card-style-tile {
    background-color: #fff;
}
.card-style-thumbnail {
    width: 100%;
    height: 200px; /* 固定高さ */
    object-fit: cover;
}
.card-style-title {
  font-size: 22px !important;
    margin: .5em 0 .25em !important;
}
.card-style-description {
    margin: 0 15px 15px 15px;
}
@media (max-width: 992px) {
    .card-style-container {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .card-style-container {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------------------------------------------
 contact form
-------------------------------------------------------------------------------------------------------------- */
.page-contact .entry-content {
  margin: 10px auto;;
  max-width: 800px;
}
.contact-form-text {
  margin-top: 20px;
}
.contact-form-frame {
  border-radius: 5px;
  margin: 10px auto;;
  max-width: 600px;
  padding: 5px 15px;
  width: 100%;
}
.contact-form {
  display: flex;
  margin: 10px 0 50px;
}
.contact-form-label {
  color: #333;
  font-weight: normal;
  padding: 15px 0 0;
  width: 280px;
}
.contact-form-label p {
  margin: 0;
}
.contact-form-input {
  width: 100%;
}
/* placeholderの色を変更 */
::-webkit-input-placeholder {
  color: #ccc;
}
::-moz-placeholder {
  color: #ccc;
  opacity: 1;
}
:-ms-input-placeholder {
  color: #ccc;
}

/* 必須か任意か */
.contact-form-status-required {
  background-color: #cc3300;
  color: #fff;
  font-size: 10px;
  margin-left: 8px;
  padding: 2px 4px;
  vertical-align: middle;
}
.contact-form-status-optional {
  background-color: #a3a5a6;
  border-radius: 30px;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  margin-left: 8px;
  padding: 3px 6px;
  vertical-align: middle;
}

/* 入力欄 */
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea {
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
  color: #666;
  font-size: 14px;
  padding: 10px;
  vertical-align: bottom;
  -webkit-appearance: none;
}
.contact-form textarea {
  height: 160px;
}

/* 送信ボタン */
.contact-submit {
  margin: 0 auto;
  max-width: 300px;
}
.contact-submit button {
  border: 0;
  border-radius: 25px;
  cursor: pointer;
  padding: 15px 0;
  width: 300px;
}
.contact-submit button:hover {
  box-shadow: 0;
  opacity: .8;
}

@media screen and (max-width: 767px) {
  .contact-form-frame {
    margin: 10px 0;
  }
  .contact-form {
    display: block;
    margin-bottom: 30px;
  }
  .contact-form-label {
    line-height: 1;
    margin-bottom: 8px;
    padding: 20px 0 10px;
  }
  .contact-form-pc {
    display: none;
  }
}
@media screen and (max-width: 479px) {
  .contact-form input[type=date] {
      width: 120px;
  }
  .contact-submit {
    margin: 0 auto;
  }
}





/* --------------------------------------------------------------------------------------------------------------
一覧
-------------------------------------------------------------------------------------------------------------- */
.archive__container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}
.archive-release-date {
  background-color: #000;
  color: #fff;
  display: inline-block;
  font-size: 13px;
  line-height: 1.4;
  padding: 2px 10px 4px;
}
.news-archive-txt {
  margin: 50px 0 0;
}
.archive__date {
  background-color: #fff !important;
  color: #222 !important;
  order: 2;
}
.archive__category {
  order: 1;
}
@media (max-width: 767px) {
  .archive__container {
    gap: 0;
  }
}









/* --------------------------------------------------------------------------------------------------------------
固定ページの2025年5月デザインのテンプレート
-------------------------------------------------------------------------------------------------------------- */
.tpl-section {
  margin: 0;
  padding: 60px 0;
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
}
.content__wrap > section.tpl-section:nth-child(1 of .tpl-section) {
  padding-top: 10px;
}
.tpl-section-container {
  margin: 0 auto;
  max-width: 1200px;
}
.tpl-section h2 {
  border: 0;
  font-size: 24px;
  margin: 0;
  padding: 0;
}
.tpl-section h3 {
  border: 0;
  font-style: normal !important;
  margin: 0;
  padding: 0;
}
.tpl-layout-frame {
  display: flex;
  align-items: center;
  gap: 40px;
}
.tpl-layout-title-box {
  margin: 15px;
  width: 50%;
}
.tpl-layout-text-box {
  margin: 15px;
  width: 50%;
}
.tpl-layout-img-box {
  margin: 15px;
  position: relative;
  width: 50%;
}
.tpl-layout-img-box video,
.tpl-layout-img-box img {
  display: block;
  position: relative;
  z-index: 3;
}
.tpl-layout-img-box:before {
  background: linear-gradient(-45deg, #a100ff, #460073);
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  right: 20px;
  bottom: 20px;
  z-index: 2;
}
.tpl-layout-img-box-none .tpl-layout-img-box:before {
  content: none;
}
.tpl-layout-frame h2 {
  font-size: 28px;
}
#tpl-menu h2 {
  
}
.tpl-layout-subtitle {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 30px;
}
.tpl-layout-text-block {
  margin: 50px 0;
}

.tpl-cta h2,
.tpl-straight h2 {
  text-align: center;
}
.tpl-cta p,
.tpl-straight p {
  text-align: center;
}

/* 共通点をカスタマイズ */
.tpl-color-fff {
  background-color: #fff;
}
.tpl-color-f0f0f0 {
  background-color: #f0f0f0;
}
.tpl-color-000 {
  background-color: #000;
}
.tpl-color-000 h2,
.tpl-color-000 h3,
.tpl-color-000 p,
.tpl-color-000 li {
  color: #fff;
}
.tpl-reverse .tpl-layout-text-box {
  order: 1;
}
.tpl-reverse .tpl-layout-img-box {
  order: 2;
}
.tpl-layout-frame h2.tpl-font-36 {
  font-size: 36px;
}
.tpl-layout-frame h2.tpl-font-48 {
  font-size: 48px;
}
.tpl-layout-text-accent {
  font-size: 24px !important;
}

/* サービス */
.tpl-service-section {
  background: radial-gradient(circle, #a100ff, #460073);
  background-size: 300% 300%;
  animation: gradientAnimation 20s ease infinite;
  padding: 120px 0 80px;
}
@keyframes gradientAnimation {
    0% {
        background-position: 0% 0%;
    }
    25% {
        background-position: 50% 50%;
    }
    50% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 50% 50%;
    }
    100% {
        background-position: 0% 0%;
    }
}
.tpl-service-section .tpl-section-container {
  max-width: 1280px;
}
.tpl-service-section h2 {
  color: #fff;
  font-size: 48px;
  text-align: center;
}
.tpl-service-section p {
  color: #fff;
  padding: 10px;
  text-align: center;
}


/* 画像＋テキストボックス (3つ横並び＆4つ横並び) */
.tpl-imgtxt-3-boxes-frame,
.tpl-imgtxt-4-boxes-frame {
  display: flex;
  margin: 20px 0 0;
}
.tpl-imgtxt-3-boxes-box {
  width: 33.3333%;
}
.tpl-imgtxt-4-boxes-box {
  width: 25%;
}
.tpl-imgtxt-3-boxes-box img,
.tpl-imgtxt-4-boxes-box img {
  display: block;
  margin: 0 auto;
  padding: 10px;
}
.tpl-imgtxt-3-boxes-box h3,
.tpl-imgtxt-4-boxes-box h3 {
  font-size: 16px;
  margin-bottom: 15px;
  text-align: center;
}
.tpl-imgtxt-3-boxes-box p,
.tpl-imgtxt-4-boxes-box p {
  margin-top: 0;
  padding: 0 10px;
  text-align: center;
}

/* テキストボックス(4つ横並び) */
.tpl-four-boxes-frame {
  display: flex;
  padding: 15px;
}
.tpl-four-boxes-box {
  background-color: #fff;
  margin-right: 1%;
  padding: 15px;
  width: 24%;
}
.tpl-four-boxes-box img {
  padding: 10px;
}
.tpl-four-boxes-box h3 {
  color: #000;
  font-size: 20px;
  font-style: normal;
  margin: 0 0 15px;
}
.tpl-four-boxes-box p {
  color: #000;
  margin-top: 0;
}
.tpl-four-boxes-box a p {
  color: #2980b9;
  margin-bottom: 0;
}

/* 左右半分に割らないレイアウト */
.tpl-bothlayout-frame h2 {
  font-size: 48px;
  font-weight: 600;
}
.tpl-bothlayout-frame p {
  font-size: 20px;
  font-weight: 400;
  margin: 0 0 10px;
}
.tpl-bothlayout-text-box {
  margin: 30px 0;
  width: 100%;
}

/* tpl-framework */
.tpl-framework-center {
  margin: 80px auto 30px;
  text-align: center;
}
.tpl-framework-step-frame {
  display: flex;
  justify-content: center;
  gap: 0;       /* お好みの間隔 */
  max-width: 1200px;
  margin: 0 auto 50px;  /* 中央寄せ */
}
.tpl-framework-step-box {
  position: relative;      /* clip-path 適用の基準に */
  flex: 0 0 auto;          /* 横幅は下記 width に固定 */
  width: 320px;            /* お好みで調整してください */
  padding: 25px 40px 24px 74px;
  background: #a100ff;
  color: #fff;
  margin-left: -35px;

  /* 矢印六角形を clip-path で再現 */
  clip-path: polygon(0 0, calc(100% - 60px) 0, 100% 50%, calc(100% - 60px) 100%, 0 100%, 60px 50%);
  /* テキストが重なったときに前面に来るよう */
  z-index: 1;
}
.tpl-framework-step-frame div:first-child {
  margin-left: 0;
}
.tpl-framework-step-box h3 {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
  margin: 0 0 8px;
  padding: 0;
}
.tpl-framework-step-box-step {
  display: inline-block;
  font-size: 16px;
  font-weight: normal;
  margin-bottom: 5px;
}
.tpl-framework-step-box p {
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
  opacity: 0.9;
}


/* ビジネスコンサルティング -------------------------------------------------------------------------------*/
/*サービス日本語版で調整 */
#business {
  background-color: #000;
}
#business .breadcrumbs__item {
  color: #fff;
}
#business .entry-content>:first-child {
  padding-top: 0;
}
#business .tpl-service-section {
  background: #000;
}
#business-story .tpl-layout-frame h2 {
  font-size: 48px;
}
#business-philosophy .tpl-layout-frame h2 {
  font-size: 32px;
}
#tpl-framework h2 {
  font-size: 32px;
}
.business-service-h3 {
  font-size: 20px !important;
  font-style: normal !important;
  margin: 25px 0 0 !important;
  padding: 0 !important;
}
.business-service-p {
  margin-top: 0;
}
#business-services .tpl-section-container {
  max-width: 980px;
}
#business-services h2 {
  font-size: 60px !important;
}

/* クリエイティブエージェンシー ----------------------------------------------------------------------------------------------------*/
/* 共通項目を個別に調整 */
#creative .site-header {
  background-color: rgba(0,0,0,.2);
}
#creative-story .tpl-layout-frame h2,
#creative-mission .tpl-layout-frame h2,
#creative-clients .tpl-layout-frame h2 {
  font-size: 60px;
}
.ja #creative-clients .tpl-layout-frame h2 {
  font-size: 50px;
}
#creative .tpl-layout-img-box:before {
  background: linear-gradient(45deg, #ff00a3, #ff7800);
}
#creative .entry-content>:first-child {
  padding-top: 0;
}

/* Our Purpose */
#creative-purpose h2 {
  font-size: 60px;  
}
#creative-purpose .tpl-imgtxt-4-boxes-box img {
  max-width: 160px;
}
/* 日本語版 Our Purpose */
.creative-purpose-text-area {
  background-color: #f0f0f0;
  margin: 50px auto 0;
  max-width: 600px;
  padding: 5px 30px;
  text-align: left;
}

/* creative-services */
.our-creative-services-title {
  font-size: 24px !important;
  margin: 0 !important;
}
#creative-services h2 {
  font-size: 60px;
  margin: 0;
}
#creative .tpl-service-section {
  background: #000;
}
#creative-contents h2,
#creative-digital h2 {
  font-size: 28px;
}
.creative-services-title-area {
  text-align: center;
}
.creative-services-subtitle {
  font-size: 3.5vw !important;
  font-weight: 600;
}

#creative .tpl-framework-step-box {
  background: #ff00a3;
}

#creative-clients .tpl-framework-center h2 {
  font-size: 48px;  
}


/* インバウンド -------------------------------------------------------------------------------*/
#inbound {
  background-color: #000;
}
#inbound .breadcrumbs__item {
  color: #fff;
}
#inbound .entry-content>:first-child {
  padding-top: 0;
}
#inbound .tpl-service-section {
  background: #000;
}

@media (max-width: 767px) {
  #creative-fromjapan .tpl-section-container {
    padding: 20px;
  }
  .creative-services-subtitle {
    font-size: 24px !important;
  }
}
@media (max-width: 767px) {
  .tpl-layout-frame,
  .tpl-four-boxes-frame {
    display: block;
  }
  .tpl-four-boxes-box,
  .tpl-layout-title-box,
  .tpl-layout-text-box,
  .tpl-layout-img-box {
    margin: 0;
    width: 100%;
  }
  .tpl-four-boxes-box {
    margin-bottom: 15px;
  }
  .tpl-layout-title-box {
    margin: 15px 0 0;
  }
  .tpl-section {
    padding-right: 20px;
    padding-left: 20px;
  }
  .tpl-straight h2 {
    text-align: left;
  }
  .tpl-straight p {
    text-align: left;
  }

  .tpl-imgtxt-3-boxes-frame,
  .tpl-imgtxt-4-boxes-frame {
    display: block;
  }
  .tpl-imgtxt-3-boxes-box,
  .tpl-imgtxt-4-boxes-box {
    margin: 0;
    width: 100%;
  }
  .tpl-framework-step-frame {
    flex-wrap: wrap;
    gap: 12px;
    margin: 40px auto 40px;
  }
  .tpl-framework-step-box {
    clip-path: none; /* 既存の左右斜めカットをリセット */
    clip-path: polygon(
      0 0,
      calc(110% - 30px) 0,
      100% calc(100% - 30px),
      50% 100%,
      0 calc(100% - 30px)
    );
    height: auto;/* 縦方向に長くなるので高さを自動に */
    max-width: 360px;
    margin-left: 0;
    padding: 24px 24px 48px;
    width: 100%;
  }
}