/*! このファイルを直接編集せず元のSCSSファイルを編集して下さい*/

/* ========================================
   📑 目次（Table of Contents）
   ========================================

   1. NORMALIZE & RESET CSS ...................... Line 30
   2. 共通設定 & 変数 ............................. Line 250
   3. FONT & ICON SETTINGS ........................ Line 280
   4. 基本スタイル（HTML要素） ................... Line 330
   5. 共通クラス .................................. Line 420
   6. コンポーネント
      - ボタン .................................... Line 550
      - リンク .................................... Line 630
   7. レイアウト
      - ヘッダー .................................. Line 660
      - フッター .................................. Line 770
      - 固定バナー ................................ Line 990
   8. トップページ ............................... Line 1040
   9. 広告媒体ページ
      - 電車広告 .................................. Line 2400
      - バス広告 .................................. Line 2330
      - その他広告 ................................ Line 2370
  10. サブページ
      - 広告事例一覧 .............................. Line 2440
      - 広告掲載の流れ ............................ Line 3840
      - お問い合わせ .............................. Line 2760
      - 資料請求 .................................. Line 2850
  11. レスポンシブ対応（767px以下） .............. Line 2900

======================================== */


/* ========================================
   1. NORMALIZE & RESET CSS
   ======================================== */
html {
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article,aside,footer,header,nav,section {
    display: block
}

h1 {
    font-size: 2em;
    /* margin: 0.67em 0 */
}

figcaption,figure,main {
    display: block;
    /* margin-top: 70px; */
}
main#main_content{
    margin-top: 0;
}

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,strong {
    font-weight: inherit
}

b,strong {
    font-weight: bolder
}

code,kbd,samp {
    font-family: monospace, monospace;
    font-size: 1em
}

dfn {
    font-style: italic
}

mark {
    background-color: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

audio,video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

img {
    border-style: none
}

svg:not(:root) {
    overflow: hidden
}

button,input,optgroup,select,textarea {
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,input {
    overflow: visible
}

input,textarea {
    -webkit-appearance: none;
    border-radius: 0
}

/* チェックボックスのスタイルをリセット */
input[type="checkbox"] {
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
}

button,select {
    text-transform: none
}

[type="reset"],[type="submit"],button,html [type="button"] {
    -webkit-appearance: button
}

[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner,button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring,button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: 0.35em 0.75em 0.625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    display: inline-block;
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type="checkbox"],[type="radio"] {
    box-sizing: border-box;
    padding: 0
}

[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {
    height: auto
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details,menu {
    display: block
}

summary {
    display: list-item
}

canvas {
    display: inline-block
}

template {
    display: none
}

[hidden] {
    display: none
}

*,*::before,*::after {
    box-sizing: border-box
}

h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,blockquote,hr,figure {
    margin: 0
}

h1,h2,h3,h4,h5,h6 {
    font-size: inherit
}

ul,ol {
    padding: 0;
    list-style: none
}

img {
    vertical-align: middle
}

address {
    font-style: normal
}

input,textarea,select {
    outline: none
}

[type="button"],[type="submit"],[type="reset"],select {
    cursor: pointer
}

@media (min-width: 768px) {
    a[href^="tel:"] {
        pointer-events:none;
        text-decoration: none;
        color: inherit
    }
}

/* ========================================
   2. 共通設定 & 変数
   ======================================== */

:root {
    /* テーマカラー */
    --color-train: #51bf7f;      /* 電車広告 - グリーン */
    --color-bus: #ef903f;        /* バス広告 - オレンジ */
    --color-other: #d9587b;      /* その他広告 - ピンク */
    --color-primary: #3056aa;    /* プライマリーカラー - ブルー */
    
    /* 電車広告 - 背景色バリエーション */
    --color-train-light: #edfff5;
    --color-train-medium: #d1f7e1;
    
    /* バス広告 - 背景色バリエーション */
    --color-bus-light: #fff5ed;
    --color-bus-medium: #f7dec8;
    
    /* その他広告 - 背景色バリエーション */
    --color-other-light: #fff0f4;
    --color-other-medium: #fad9e2;
}

/* ========================================
   3. FONT & ICON SETTINGS
   ======================================== */

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?nnk2y');
    src: url('../fonts/icomoon.eot?nnk2y#iefix') format('embedded-opentype'),
         url('../fonts/icomoon.ttf?nnk2y') format('truetype'),
         url('../fonts/icomoon.woff?nnk2y') format('woff'),
         url('../fonts/icomoon.svg?nnk2y#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-tel:before {
    content: "\e900"
}

.icon-close:before {
    content: "\e901"
}

.icon-download:before {
    content: "\e902"
}

.icon-arrow-right:before {
    content: "\e903"
}

.icon-arrow-left:before {
    content: "\e904"
}

/* ========================================
   4. 基本スタイル（HTML要素）
   ======================================== */

html {
    /* font-family: "Hiragino Kaku Gothic ProN", YuGothic, "Yu Gothic", Meiryo, sans-serif, Arial; */
    font-family: "Inter", "Noto Sans JP", sans-serif !important;
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    font-size: 62.5%;
    color: #101010;
    background: #fff
}

@media (max-width: 1240px) {
    html {
        font-size:calc(100vw / 124)
    }
}

body {
    line-height: 1.75;
    font-size: 1.6rem;
}

a {
    color: inherit;
    text-decoration: none
}

a:hover {
    opacity: 0.7;
    transition-property: opacity;
    transition-duration: 0.3s
}

figure {
    text-align: center
}

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

h1,h2,h3,h4,h5,h6 {
    line-height: 1.4
}

hr {
    clear: both;
    border: 0;
    margin: 60px 0;
    border-top: 1px solid
}

form [type="text"],form [type="number"],form [type="search"],form [type="email"],form [type="tel"],form [type="url"],form [type="password"],form [type="date"],form [type="datetime-local"],form [type="month"],form [type="week"],form [type="time"],form textarea,form select {
    width: 100%;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #9fa0a0
}

form [type="text"][disabled],form [type="number"][disabled],form [type="search"][disabled],form [type="email"][disabled],form [type="tel"][disabled],form [type="url"][disabled],form [type="password"][disabled],form [type="date"][disabled],form [type="datetime-local"][disabled],form [type="month"][disabled],form [type="week"][disabled],form [type="time"][disabled],form textarea[disabled],form select[disabled] {
    background-color: #ddd
}

form textarea {
    height: 100px;
    vertical-align: middle
}

form select::-ms-expand {
    display: none
}

form [type="button"],form [type="submit"],form [type="reset"] {
    font: inherit;
    background: transparent
}

form [type="button"]:hover,form [type="submit"]:hover,form [type="reset"]:hover {
    opacity: 0.8
}

/* ========================================
   5. 共通クラス
   ======================================== */

.sp {
    display: none
}

.clearfix::after,#content::after {
    content: "";
    display: block;
    clear: both
}

.right {
    text-align: right !important
}

.center {
    text-align: center !important
}

.aligncenter {
    display: block;
    margin: 0 auto
}

.col03:not(table) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch
}

.col03:not(table)>* {
    width: 32%;
    margin-right: 2%;
    margin-top: 4rem
}

.col03:not(table)>*:nth-child(3n) {
    margin-right: 0
}

.kome:not(ul),ul.kome>li {
    text-indent: -1em;
    padding-left: 1em
}

.kome:not(ul)::before,ul.kome>li::before {
    content: "※"
}

form [type="button"],form [type="submit"],form [type="reset"] {
    display: block;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    margin: 0 auto
}

form [type="button"]:hover,form [type="submit"]:hover,form [type="reset"]:hover {
    transition-property: opacity;
    transition-duration: 0.3s
}

.gmap {
    position: relative
}

.gmap::after {
    content: "";
    display: block;
    padding-top: 30px;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden
}

.gmap iframe,.gmap object,.gmap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

header>*,footer>*>*,body:not(#top) #content>*>*,#top #content>*>*,#base #base-mv>*>* {
    max-width: 1200px
}

header>* {
    /* max-width: 1340px */
}

footer>*>* {
    max-width: 1100px
}

body:not(#top) #content>*>* {
    max-width: 1000px
}

#top #content>*>* {
    max-width: 900px
}

#base #base-mv>*>* {
    max-width: 1100px
}

/* ========================================
   6. コンポーネント - ボタン
   ======================================== */

.btn01 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 2.6rem 4rem;
    background: #fff;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1;
    border-radius: 0.8rem;
    border: solid 1px #3056aa;
    color: #3056aa;
    padding: 2.4rem;
    min-width: 28rem
}

.btn01 i {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #3056aa;
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    border-radius: 50%;
    margin-left: 3.2rem;
    transition: transform 0.3s ease;
}

.btn02 ,
.btn03 ,
.btn04 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.8rem;
    padding: 12px 20px ;
    font-size: 1.3rem;
    font-weight: bold;
    color: #fff;
    line-height: 1;
    text-align: center;
    margin-left: 10px;
    border: none;
}
.btn02{
    background: #3056aa;
}
.btn03{
    background: #313131;
}
.btn04{
    background: #1791E0;
}

.btn02 i ,
.btn03 i ,
.btn04 i {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    width: 1.8rem;
    height: 1.8rem;
    font-size: 1rem;
    border-radius: 50%;
    margin-left: 3.2rem;
    transition: transform 0.3s ease;
}
.btn02 i {
    color: #3056aa;
}
.btn03 i {
    color: #fff;
}
.btn04 i {
    color: #3056aa;
}

.btn01:hover i ,
.btn02:hover i ,
.btn03:hover i ,
.btn04:hover i {
    transform: translateX(5px);
} 



/* ========================================
   6. コンポーネント - リンク
   ======================================== */

.link01 {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: bold
}

.link01 i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #3056aa;
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    border-radius: 50%;
    margin-left: 3.2rem
}

@media all and (-ms-high-contrast: none) {
    .btn01 span,.btn02 span,.btn03 span {
        margin-bottom: -5px
    }
}

/* ========================================
   7. レイアウト - ヘッダー
   ======================================== */

header {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    padding-top: 10px;
}

header>div {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

header .hd-logo {
    display: flex;
    width: 250px;
    margin-left: 180;
    margin-top: 8px;
}

header .hd-logo a:nth-of-type(1) {
    padding-right: 2rem;
    width: 17rem
}

header .hd-logo a:nth-of-type(2) {
    position: relative;
    padding-left: 2rem;
    width: 14rem
}

header .hd-logo a:nth-of-type(2)::after {
    content: "";
    display: block;
    width: 1px;
    height: 6.9rem;
    position: absolute;
    top: 0;
    left: 0;
    background: #919191
}

header .hd-control.pc .hd-cv {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

header .hd-control.pc .hd-cv .hd-contact {
    margin-right: 3.2rem;
    text-align: center;
    line-height: 1.2
}
header .hd-contact {
    margin-top: 10px;
    font-weight: bold;
}

header .hd-control.pc .hd-cv .hd-contact .tel {
    display: flex;
    align-items: center;
    font-size: 2.0rem;
    font-weight: bold
}

header .hd-control.pc .hd-cv .hd-contact .tel i {
    font-size: 2.2rem;
    color: #3056aa;
    margin-right: 0.8rem;
    position: relative;
    top: -0.1rem
}

header .hd-control.pc .hd-cv .hd-contact .time {
    font-size: 1.4rem;
    font-weight: normal;
}

header .hd-control.pc .hd-nav ul {
    display: flex
}

header .hd-control.pc .hd-nav ul li {
    position: relative;
    margin-right: 1.5rem
}

header .hd-control.pc .hd-nav ul li.current a {
    font-weight: bold;
    background: #3056aa;
    color: #fff;
    border-radius: 0.8rem 0.8rem 0 0
}

header .hd-control.pc .hd-nav ul li.current a:hover {
    cursor: auto;
    opacity: 1
}

header .hd-control.pc .hd-nav ul li:last-of-type {
    margin-right: 0
}

header .hd-control.pc .hd-nav ul li:last-of-type a {
    padding-right: 0
}

header .hd-control.pc .hd-nav ul li:last-of-type.current a {
    padding-right: 10px
}

header .hd-control.pc .hd-nav ul li a {
    display: block;
    padding: 5px 10px;
}

/* ========================================
   7. レイアウト - フッター
   ======================================== */

footer .footer-head {
    position: relative;
    width: 100%;
    height: 472px;
    background: #3056aa;
    margin-bottom: 80px;
    background-image: url(../img/top-bg01.png) ; 
    background-position: 0 20px;
    background-size: contain;
    background-repeat: no-repeat;
}

footer .footer-head h3 {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    font-size: 2.7rem;
    font-weight: 700;
    color: #fff;
}

footer .footer-head .footer-button-area {
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 1082px;
    width: 70%;
    height: 283px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    padding:  40px;
}
footer .footer-head .footer-button-area-inner {
    text-align: center;
}
footer .footer-head .footer-button-area-inner-divider {
    width: 1px;
    background-color: #333;
}
  

footer .footer-head .footer-button-area-inner h4 {
    font-size: 2.3rem;
    font-weight: 700;
    /* color: #1791E0; */
    color: #3056AA;
    background-color: #fff;
    margin: 0;
    margin-bottom: 20px;
    padding: 0;
    text-align: center;
}
footer .footer-head .footer-button-area-inner h4 img {
    margin-right: 20px;
}

footer .footer-head .footer-button-area-inner p {
    font-size: 18px;
    font-weight: 500;
    margin: 15px auto;
    width: 80%;
}
    
footer .btn01 ,
footer .btn02 ,
footer .btn03 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.8rem;
    padding: 20px ;
    font-size   : 1.5rem;
    font-weight: bold;
    color: #fff;
    line-height: 1;
    text-align: center;
    margin-left: 10px;
    width: 280px;
    border: none;
}
footer .btn01{
    background: #1791E0;
}
footer .btn02{
    background: #3056aa;
}
footer .btn03{
    background: #313131;
}

footer .btn01 i ,
footer .btn02 i ,
footer .btn03 i {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    width: 1.8rem;
    height: 1.8rem;
    font-size: 1rem;
    border-radius: 50%;
    margin-left: 3.2rem
}
footer .btn01 i {
    color: #3056aa;
}
footer .btn02 i {
    color: #3056aa;
}
footer .btn03 i {
    color: #313131;
}

footer .btn03:hover i {
    transform: translateY(5px);
}

footer #f-menu {
    display: flex;
    justify-content: space-between;
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 20px;
}

footer #f-menu .f-logo {
    display: flex;
    width: 250px;
    margin-left: 180;
    margin-top: 8px;
}

footer #f-menu .f-logo a:nth-of-type(1) {
    padding-right: 2rem;
    width: 17rem
}

footer #f-menu .f-logo a:nth-of-type(2) {
    position: relative;
    padding-left: 2rem;
    width: 14rem
}

footer #f-menu .f-logo a:nth-of-type(2)::after {
    content: "";
    display: block;
    width: 1px;
    height: 6.9rem;
    position: absolute;
    top: 0;
    left: 0;
    background: #919191
}

footer #f-menu .f-contact {
    margin-top: 1rem;
}

footer #f-menu .f-contact  p{
    font-size: 1.7rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

footer #f-menu .f-contact .tel {
    font-size: 2.1rem;
    font-weight: bold;
    color: #3056AA;
}

footer #f-menu .f-contact .tel i {
    font-size: 2rem;
    color: #3056aa;
    margin-right: 0.4rem
}

footer #f-menu .f-contact .time {
    margin-left: 5px;
    font-size: 1.2rem;
    color: #8F8F8F;
}

footer #f-btn {
    text-align: center;
    background: #ECF2F8;
    padding: 4rem 0
}

footer .site-map  .f-nav ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列にする */
    gap: 10px;
    list-style: none;
    padding: 0;
}

footer .site-map  .f-nav li {
    font-size: 1.7rem;
    font-weight: 400;
}

footer #f-btn .link01 {
    margin-top: 3rem
}

footer #f-copy {
    background: #ECF2F8;
}

footer #f-copy>div {
    text-align: center;
    font-size: 1.2rem;
    opacity: 0.5;
    padding: 1rem 0;
    margin: 0 auto;
}

/* ========================================
   7. レイアウト - 固定バナー
   ======================================== */

#f-bnr {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 2.6rem 3.4rem;
    z-index: 10;
    background: #3056aa url(../img/f-bnr-bg01.png) repeat left top;
    border-radius: 0.8rem;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.25)
}

#f-bnr .title {
    font-size: 1.7rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1.8rem;
    color: #fff
}

#f-bnr .btn-box .btn01 {
    min-width: 23rem;
    font-size: 1.3rem;
    padding: 1.8rem
}

#f-bnr i.icon-close {
    cursor: pointer;
    position: absolute;
    top: 1.3rem;
    right: 1.3rem;
    color: #fff
}

#f-bnr i.icon-close:hover {
    opacity: 0.7;
    transition-property: opacity;
    transition-duration: 0.3s
}

.cv-bnr {
    padding: 0 !important
}

.cv-bnr .inner.pc {
    max-width: 100% !important;
    width: 100% !important
}

.cv-bnr .inner.pc img {
    width: 100% !important;
    height: auto
}

/* ========================================
   8. トップページ
   ======================================== */

/* メインビジュアル */
.mainVisual-wrapper {
    position: relative;
}
.p-mainVisual {
    margin-top: 75px;
    z-index: 1;
}
.mainVisual-button {
    position: absolute;
    bottom: 5%;
    left: 10px;
    z-index: 10;
    width: 50%;
}
.mainVisual-button img {
    width: 30%;
}
.mainVisual-datalibrary {
    position: absolute;
    bottom: 0px;
    right:  0px;
    z-index: 10;
}
.mainVisual-datalibrary .datalibrary-btn {
    border-radius: 10px 0 0 0;
    padding: 16px 50px;
    font-size: 16px;
    font-weight: 700;
}
.mainVisual-datalibrary .datalibrary-btn:hover {
    opacity: 1;
}
.mainVisual-button-wrapper-sp {
    display: none;
}

/* 広告媒体メニュー */
.top-ad_menu {
    position: relative;
    padding: 60px 0;
    background: #ECF2F8;
    padding-top: 20px ;
}

.top-ad_menu .top-ad_menu-bg {
    background-image: url(../img/top-menu_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 200px;
}

.top-ad_menu-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.top-ad_menu h2,
.top-ad_case h2 {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    margin:30px 0;
    color: #3056AA;
}
.top-ad_menu h2::before,
.top-ad_case h2::before  {
    content: '[　　';
}
.top-ad_menu h2::after,
.top-ad_case h2::after {
    content: '　　]';
}

.top-ad_menu ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

.top-ad_menu ul li {
    background: #fff;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.top-ad_menu ul li:last-child {
    grid-column: 1 / -1;
    margin: 0 auto;
    width: 100%;
    padding: 0;
    background: #f8f9fa;
    cursor: pointer;
}

.top-ad_menu ul li:last-child a {
    padding: 30px;
}

.top-ad_menu ul li figure {
    margin: 0 0 0 0;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-ad_menu ul li figure img {
    object-fit: contain;
}

.top-ad_menu ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    color: #333;
    text-decoration: none;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 30px 20px;
}

.top-ad_menu ul li a span {
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-ad_menu ul li a span::after {
    content: '';
    font-size: 24px;
    font-weight: 700;
    transition: transform 0.3s ease;
}

/* 各カードの矢印の色 */
.top-ad_menu ul li:nth-child(1) a span::after {
    /* color: #4CAF50; 緑 - 電車広告 */
    background-image: url(../img/arrow_circle_right_green.svg);
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.top-ad_menu ul li:nth-child(2) a span::after {
    background-image: url(../img/arrow_circle_right_orange.svg);
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.top-ad_menu ul li:nth-child(3) a span::after {
    background-image: url(../img/arrow_circle_right_purple.svg);
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.top-ad_menu ul li:hover a span::after {
    transform: translateX(5px);
}

.top-ad_menu ul li:last-child:hover a span::after {
    transform: translateY(5px);
}

/* セールスシートダウンロード */
.top-ad_menu ul li:last-child a {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.top-ad_menu ul li:last-child a span {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.top-ad_menu ul li:last-child a span::after {
    content: '';
    background-image: url(../img/download.svg);
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 広告事例 */
.top-ad_case {
    max-width: 1080px;
    margin: 0 auto;
    margin-top: 60px;
    padding: 0 20px;
    background: #fff;
}
.top-ad_case p {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 40px;
}
.top-ad_case article  h3 {
    font-size: 13px;
    font-weight: 500;
    color: #333333;
    margin-bottom: 10px;
    margin: 0;
    margin-bottom: 20px;
    padding: 0;
    /* text-align: center; */
    background-color: #fff;
}
article .case-content .case-title::after {
    content: "  様";
}

.ad_case_btn {
    text-align: center;
    margin: 40px 0;
}

/* データライブラリ & 流れ */
.top-datalibrary-and-flow {
    width: 100%;
    background: #ECF2F8;
}
.top-datalibrary-and-flow-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    padding:  40px;
    max-width: 1080px;
    margin: 0 auto;
}
.top-datalibrary,
.top-flow {
    text-align: center;
}
.top-datalibrary-and-flow-divider {
    width: 1px;
    background-color: #3056AA;
}

.top-datalibrary-subtitle,
.top-flow-subtitle {
    font-size: 15px;
    font-weight: 500;
    color: #3056AA;
}
.top-datalibrary-subtitle::before,
.top-flow-subtitle::before {
    content: '＼　';
}
.top-datalibrary-subtitle::after,
.top-flow-subtitle::after {
    content: '　／';
}

.top-datalibrary h3, 
.top-flow h3 {
    font-size: 32px;
    font-weight: 700;
    color: #3056AA;
    background-color: #ECF2F8;
    margin: 0;
    margin-bottom: 20px;
    padding: 0;
    text-align: center;
}
.top-datalibrary img, 
.top-flow img {
    margin-bottom: 20px;
}

.top-datalibrary p, 
.top-flow p {
    font-size: 18px;
    font-weight: 500;
    margin: 0 auto;
    width: 80%;
}

.top-datalibrary a, 
.top-flow a {
    margin-top: 20px;
}

/* コンテンツセクション */


#content {
    padding-bottom: 0;
    max-width: 1080px;
}

#content>* {
    position: relative;
    /* padding-top: 8rem; */
    /* padding-bottom: 8rem */
}

#content .title01 {
    text-align: center;
    padding-bottom: 4rem
}

#content .title01 span {
    display: inline-block;
    position: relative;
    font-size: 3rem;
    color: #3056aa;
    padding: 0 7rem
}

#content .title01 span::after {
    content: "";
    display: block;
    width: 1rem;
    height: 3rem;
    background: url(../img/title-bg01.svg) center center/cover no-repeat;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

#content .title01 span::before {
    content: "";
    display: block;
    width: 1rem;
    height: 3rem;
    background: url(../img/title-bg01.svg) center center/cover no-repeat;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%) scale(-1, 1);
    transform: translateY(-50%) scale(-1, 1)
}

#content .title02 {
    text-align: center;
    padding-bottom: 4rem
}

#content .title02 span {
    display: inline-block;
    position: relative;
    font-size: 3rem;
    color: #fff;
    padding: 0 7rem
}

#content .title02 span::after {
    content: "";
    display: block;
    width: 1.6rem;
    height: 3.4rem;
    background: url(../img/title-bg02.svg) center center/cover no-repeat;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

#content .title02 span::before {
    content: "";
    display: block;
    width: 1.6rem;
    height: 3.4rem;
    background: url(../img/title-bg02.svg) center center/cover no-repeat;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%) scale(-1, 1);
    transform: translateY(-50%) scale(-1, 1)
}

#top-mv {
    position: relative;
    padding-bottom: 20rem;
    background: #ecf2f8 url(../img/top-bg01.png) bottom center repeat-x
}

#top-mv .lead {
    position: absolute;
    z-index: 2;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 8.4rem;
    left: 24%;
    padding-left: 2rem
}

#top-mv .lead h2 {
    font-size: 5rem;
    font-weight: bold;
    margin-bottom: 3rem;
    color: #3056aa
}

#top-mv .lead p {
    font-size: 1.6rem;
    margin-bottom: 6rem;
    line-height: 2
}

#top-mv .lead p span {
    font-weight: bold
}

#top-mv .lead .btn-box {
    display: inline-block
}

#top-mv .lead .btn-box .btn01 {
    box-shadow: 1px 1px 15px rgba(0,0,0,0.2)
}

#top-mv .slider {
    position: relative;
    top: 0;
    right: 0;
    z-index: 1;
    margin-left: auto;
    width: calc(700 / 1240 * 100vw)
}

#top-mv .slider .slick-box img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

#top-mv .slider .slick-box .slick {
    z-index: 1;
    max-height: 60rem;
    overflow: hidden;
    position: relative;
    border-bottom-left-radius: 5rem
}

#top-mv .slider .slick-box .slick .icon-arrow-left,#top-mv .slider .slick-box .slick .icon-arrow-right {
    cursor: pointer;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background: rgba(255,255,255,0.7);
    color: #3056aa;
    border-radius: 50%
}

#top-mv .slider .slick-box .slick .icon-arrow-left {
    left: 4rem;
    z-index: 2
}

#top-mv .slider .slick-box .slick .icon-arrow-right {
    right: 3rem;
    z-index: 2
}

#top-mv .slider .feature {
    display: flex;
    justify-content: center;
    margin-top: -6rem;
    position: relative;
    z-index: 2
}

#top-mv .slider .feature li {
    width: 16.8rem;
    margin: 0 2rem
}

#top-menu {
    background: #ecf2f8
}

#top-menu .col a {
    display: block
}

#top-menu .col li:nth-child(1),#top-menu .col li:nth-child(2),#top-menu .col li:nth-child(3) {
    position: relative;
    width: 32.5%;
    text-align: center
}

#top-menu .col li:nth-child(1) a,#top-menu .col li:nth-child(2) a,#top-menu .col li:nth-child(3) a {
    width: 100%;
    height: 100%;
    padding: 5rem 0 10rem 0;
    background: #fff
}

#top-menu .col li:nth-child(1) span,#top-menu .col li:nth-child(2) span,#top-menu .col li:nth-child(3) span {
    width: 100%;
    position: absolute;
    bottom: 4.5rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 2rem;
    font-weight: bold
}

#top-menu .col li:nth-child(1) span i,#top-menu .col li:nth-child(2) span i,#top-menu .col li:nth-child(3) span i {
    position: relative;
    top: -1px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-left: 2.4rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    font-size: 1rem;
    color: #fff
}

#top-menu .col li:nth-child(1) span i {
    background: #51bf7f
}

#top-menu .col li:nth-child(2) span i {
    background: #ef903f
}

#top-menu .col li:nth-child(3) span i {
    background: #d9587b
}

#top-menu .col li:nth-child(4),#top-menu .col li:nth-child(5) {
    width: 49.3%;
    text-align: center;
    font-weight: bold;
    margin-top: 1rem
}

#top-menu .col li:nth-child(4) a,#top-menu .col li:nth-child(5) a {
    width: 100%;
    height: 100%;
    padding: 4rem 0;
    background: #fff
}

#top-menu .col li:nth-child(4) a i,#top-menu .col li:nth-child(5) a i {
    position: relative;
    top: -1px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-left: 4.7rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    font-size: 1rem;
    color: #fff;
    background: #3056aa
}

#top-feedback {
    width: 100%;
    background: #3056aa;
    text-align: center;
    color: #fff;
    padding-top: 6rem;
    padding-bottom: 6rem
}

#top-feedback>p {
    padding-bottom: 2rem
}

#top-feedback .col img {
    box-shadow: 0px 3px 6px rgba(0,0,0,0.16)
}

#top-feedback>span {
    display: block;
    text-align: center;
    font-size: 1.2rem;
    margin-top: 2rem
}

#top-case {
    position: relative;
    overflow-x: hidden
}

#top-case .inner {
    position: relative;
    left: -2rem;
    max-width: auto !important;
    max-width: inherit !important;
    width: calc(100% + 4rem);
    margin: 0
}

#top-case .slick {
    z-index: 1;
    position: relative
}

#top-case .slick .slick-dots li button:before {
    font: "serif";
    font-size: 1.2rem
}

#top-case .slick .icon-arrow-left,#top-case .slick .icon-arrow-right {
    cursor: pointer;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.8rem;
    height: 6.8rem;
    background: #3056aa;
    color: #fff;
    border-radius: 50%;
    z-index: 1
}

#top-case .slick .icon-arrow-left::after,#top-case .slick .icon-arrow-right::after {
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    content: "";
    display: block;
    width: 7.8rem;
    height: 7.8rem;
    background: rgba(48,86,170,0.2);
    border-radius: 50%
}

#top-case .slick .icon-arrow-left {
    left: 4rem;
    z-index: 2
}

#top-case .slick .icon-arrow-right {
    right: 4rem;
    z-index: 2
}

#top-case .slick .slick-dots {
    z-index: 2;
    bottom: -45px
}

#top-case .slick .slick-dots li button:before {
    color: #3056aa
}

#top-case .slick .slick-dots li.slick-active button:before {
    opacity: 1
}

#top-case .slick .slider {
    padding-right: 2.5rem;
    padding-left: 2.5rem
}

#top-case .slick .slider>div {
    justify-content: space-between;
    display: flex;
    border-radius: 6px;
    box-shadow: 3px 3px 15px rgba(0,0,0,0.08);
    overflow: hidden
}

#top-case .slick .slider>div>figure {
    width: 48%
}

#top-case .slick .slider>div>figure img {
    width: 100%;
    height: 100% !important;
    max-width: auto !important;
    max-width: inherit !important;
    -o-object-fit: cover;
    object-fit: cover
}

#top-case .slick .slider>div>div {
    width: 52%;
    padding: 4rem;
    text-align: left
}

#top-case .slick .slider>div>div .name {
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-bottom: 1.6rem
}

#top-case .slick .slider>div>div .name span {
    display: inline-block;
    width: 12rem;
    height: 3.8rem;
    margin-right: 1.2rem;
    background: #e3e3e3
}

#top-case .slick .slider>div>div .title {
    font-size: 2.8rem;
    font-weight: bold;
    color: #3056aa;
    line-height: 1.4;
    margin-bottom: 1.2rem
}

#top-case .slick .slider>div>div .tag {
    display: flex;
    margin-bottom: 1.2rem
}

#top-case .slick .slider>div>div .tag li {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 1.4rem;
    color: #3056aa;
    background: #f5f5f5;
    margin-right: 0.4rem
}

#top-client {
    padding-top: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden
}

#top-client .inner {
    display: flex;
    max-width: 100% !important;
    margin: 20px 0
}

#top-client .slider {
    display: flex
}

#top-client .slider:nth-of-type(1) {
    -webkit-animation-name: loopSlide01;
    animation-name: loopSlide01;
    -webkit-animation-duration: 30s;
    animation-duration: 30s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

#top-client .slider:nth-of-type(2) {
    -webkit-animation-name: loopSlide02;
    animation-name: loopSlide02;
    -webkit-animation-duration: 30s;
    animation-duration: 30s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-delay: -20s;
    animation-delay: -20s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

#top-client .slider:nth-of-type(3) {
    -webkit-animation-name: loopSlide03;
    animation-name: loopSlide03;
    -webkit-animation-duration: 30s;
    animation-duration: 30s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-delay: -10s;
    animation-delay: -10s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

#top-client .slider>div {
    height: 40px;
    outline: none
}

#top-client .slider>div img {
    display: block;
    max-width: inherit !important;
    max-height: 100%;
    height: 40px !important;
    width: auto !important;
    margin: 0 2rem
}

@media all and (-ms-high-contrast: none) {
    #top-client .inner {
        max-width: 9999px !important;
        min-width: 9999px
    }
}

@-webkit-keyframes loopSlide01 {
    0% {
        -webkit-transform: translateX(200%);
        transform: translateX(200%)
    }

    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

@keyframes loopSlide01 {
    0% {
        -webkit-transform: translateX(200%);
        transform: translateX(200%)
    }

    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

@-webkit-keyframes loopSlide02 {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }

    to {
        -webkit-transform: translateX(-200%);
        transform: translateX(-200%)
    }
}

@keyframes loopSlide02 {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }

    to {
        -webkit-transform: translateX(-200%);
        transform: translateX(-200%)
    }
}

@-webkit-keyframes loopSlide03 {
    0% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }

    to {
        -webkit-transform: translateX(-300%);
        transform: translateX(-300%)
    }
}

@keyframes loopSlide03 {
    0% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }

    to {
        -webkit-transform: translateX(-300%);
        transform: translateX(-300%)
    }
}

#top-faq dl {
    max-width: 778px !important;
    border-bottom: solid 1px #d3d3d3
}

#top-faq dl:first-child dt {
    padding-top: 0
}

#top-faq dl.on dt span::after {
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
    transform: translate(-50%, -50%) rotate(90deg)
}

#top-faq dl dt {
    position: relative;
    padding-right: 2rem;
    padding-left: 3.6rem;
    font-size: 1.8rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    cursor: pointer
}

#top-faq dl dt:hover {
    opacity: 0.7;
    transition-property: opacity;
    transition-duration: 0.3s
}

#top-faq dl dt::before {
    content: "Q";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    background: #3056aa;
    color: #fff;
    font-size: 1.3rem;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%
}

#top-faq dl dt span {
    position: absolute;
    display: inline-block;
    width: 1.2rem;
    height: 0.2rem;
    background: #3056aa;
    right: 0.2rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

#top-faq dl dt span::after {
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
    content: "";
    position: absolute;
    display: inline-block;
    height: 1.2rem;
    width: 0.2rem;
    background: #3056aa;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

#top-faq dl dd {
    display: none;
    position: relative;
    padding-left: 3.6rem;
    padding-bottom: 3rem
}

#top-faq dl dd::before {
    content: "A";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    background: #f4f4f4;
    color: #3056aa;
    font-size: 1.3rem;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%
}

#top-faq .btn-box {
    margin-top: 5rem;
    text-align: center
}

#top-faq .btn-box .btn01 {
    box-shadow: 1px 1px 15px rgba(0,0,0,0.2)
}

#top-flow {
    text-align: center;
    background: #f4f4f4 url(../img/top-bg01.png) bottom center repeat-x
}

#top-flow>p {
    margin-bottom: 5rem
}

#top-flow .tel {
    margin-bottom: 5rem
}

#top-flow .tel .title {
    font-size: 2rem;
    font-weight: bold
}

#top-flow .tel .num {
    color: #3056aa;
    font-size: 4.6rem;
    font-weight: bold
}

#top-flow .tel .num i {
    font-size: 4rem;
    margin-right: 0.4rem
}

#top-flow>a {
    display: inline-block;
    font-size: 2rem;
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: 5rem
}

#top-flow .btn-box {
    text-align: center
}

#top-flow .btn-box .btn01 {
    box-shadow: 1px 1px 15px rgba(0,0,0,0.2)
}

/* ========================================
   9. 広告媒体ページ（ベースページ）
   ======================================== */

#base #content {
    background: #f4f4f4
}

#base #base-mv {
    position: relative;
    text-align: center;
    background: #fff;
    background-position: center right;
    background-size: cover
}

#base #base-mv::before {
    content: "";
    position: absolute;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.9
}

#base #base-mv .inner {
    position: relative;
    z-index: 2;
    padding: 8rem 2rem
}

#base #base-mv .inner .breadcrumb {
    display: flex;
    position: relative;
    top: -6rem;
    text-align: left
}

#base #base-mv .inner .breadcrumb li {
    position: relative;
    color: #fff;
    font-size: 1.4rem;
    margin-right: 2.4rem
}

#base #base-mv .inner .breadcrumb li:not(:last-of-type):before {
    position: absolute;
    right: -1.8rem;
    content: "＞"
}

#base #base-mv .inner .breadcrumb li a {
    font-weight: bold
}

#base #base-mv .inner figure {
    margin-bottom: 3rem
}

#base #base-mv .inner h2 {
    font-size: 3rem;
    margin-bottom: 3rem;
    color: #fff
}

#base #base-mv .inner p {
    color: #fff
}

#base .base-sec01 .price-box {
    border-radius: 2px;
    background: #fff;
    margin-bottom: 4rem
}

#base .base-sec01 .price-box:last-of-type {
    margin-bottom: 0
}

#base .base-sec01 h3 {
    text-align: center;
    color: #fff;
    font-size: 2.8rem;
    padding: 1.4rem
}

#base .base-sec01 .lead {
    font-size: 2rem;
    padding: 3rem 3rem 0 3rem
}

#base .base-sec01 .col {
    padding: 3rem
}

#base .base-sec01 .col>figure img:nth-child(n+2) {
    margin-top: 1.8rem
}

#base .base-sec01 .col>figure p {
    text-align: right;
    padding-top: 0.4rem
}

#base .base-sec01 .col>figure p .kome {
    display: inline-block;
    margin-left: auto;
    margin-right: 0;
    font-size: 0.8em
}

#base .base-sec01 .col>div h4 {
    padding: 0.8rem;
    background: #6e6e6e;
    color: #fff;
    font-size: 1.8rem;
    text-align: center
}

#base .base-sec01 .col>div h5 {
    padding: 0.4rem;
    background: #6e6e6e;
    color: #fff;
    text-align: center
}

#base .base-sec01 .col>div table {
    width: 100%;
    border-spacing: 0;
    border-top: solid 1px #dbdbdb;
    border-left: solid 1px #dbdbdb
}

#base .base-sec01 .col>div table:last-of-type {
    margin-bottom: 3rem
}

#base .base-sec01 .col>div table tr th,#base .base-sec01 .col>div table tr td {
    border-right: solid 1px #dbdbdb;
    border-bottom: solid 1px #dbdbdb;
    font-weight: normal;
    padding: 0.8rem 2rem;
    vertical-align: middle
}

#base .base-sec01 .col>div table tr th .small,#base .base-sec01 .col>div table tr td .small {
    display: block;
    font-size: 1rem
}

#base .base-sec01 .col>div table tr th {
    font-size: 1.6rem
}

#base .base-sec01 .col>div table tr td {
    text-align: center
}

#base .base-sec01 .col>div table tr .tax {
    display: block;
    font-size: 1.2rem;
    text-align: center
}

#base .base-sec01 .col>div table tr .price .in-tax span {
    font-size: 1.2rem
}

#base .base-sec01 .col>div table tr .price .ex-tax {
    font-size: 1rem
}

#base .base-sec01 .col>div .btn-box {
    text-align: center
}

#base .base-sec01 .col>div .btn-box .btn01 {
    position: relative;
    border-width: 2px
}

#base .base-sec01 .col>div .btn-box .btn01::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    display: block;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    border-style: solid;
    border-width: 1px;
    border-radius: 0.6rem
}

/* 電車広告（グリーン） */
#base.train .base-sec01 h3,
#base.train .base-sec01 .btn01 i,
#base.train .base-sec01 .col>div h5,
#base.train #base-mv::before {
    background: var(--color-train)
}

#base.train .base-sec01 .btn01,
#base.train .base-sec01 .btn01::after {
    border-color: var(--color-train);
    color: var(--color-train)
}

#base.train .base-sec01 .col>div table tr th {
    background: var(--color-train-light)
}

#base.train .base-sec01 .col>div table tr th.production {
    background: var(--color-train-medium)
}

#base.train #base-mv {
    background-image: url(../img/base-mv-train.jpg)
}

/* バス広告（オレンジ） */
#base.bus .base-sec01 h3,
#base.bus .base-sec01 .btn01 i,
#base.bus .base-sec01 .col>div h5,
#base.bus #base-mv::before {
    background: var(--color-bus)
}

#base.bus .base-sec01 .btn01,
#base.bus .base-sec01 .btn01::after {
    border-color: var(--color-bus);
    color: var(--color-bus)
}

#base.bus .base-sec01 .col>div table tr th {
    background: var(--color-bus-light)
}

#base.bus .base-sec01 .col>div table tr th.production {
    background: var(--color-bus-medium)
}

#base.bus #base-mv {
    background-image: url(../img/base-mv-bus.jpg)
}

/* その他広告（ピンク） */
#base.other .base-sec01 h3,
#base.other .base-sec01 .btn01 i,
#base.other .base-sec01 .col>div h5,
#base.other #base-mv::before {
    background: var(--color-other)
}

#base.other .base-sec01 .btn01,
#base.other .base-sec01 .btn01::after {
    border-color: var(--color-other);
    color: var(--color-other)
}

#base.other .base-sec01 .col>div table tr th {
    background: var(--color-other-light)
}

#base.other .base-sec01 .col>div table tr th.production {
    background: var(--color-other-medium)
}

#base.other #base-mv {
    background-image: url(../img/base-mv-other.jpg);
    background-position: center center
}

#base.other #base-mv::before {
    opacity: 0.9
}

/* ========================================
   10. サブページ
   ======================================== */

/* サブページ共通ヘッダー */
.main-header {
    width: 100%;
    margin-bottom: 4rem;
    padding-top: 7rem;
}
.main-header-ad_case {
    padding-top: 7rem;
}
.main-header .main-header-image {
    background: #ECF2F8;
    background-image: url(../img/__top-bg01.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    height: 350px; 
}
.main-header .breadcrumbs {
  margin-left: 180px;
  padding-top: 2rem;
}
.main-header h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #3056aa;
    margin-top: 100px;
    font-size: 30px;
    font-weight: 700;
}
.main-header .main-header-text {
    font-size: 18px;
    color: #333333;
    margin: 100px 0 80px 0;
    text-align: center;
}

/* 広告事例一覧ページ */
.site-main .container {
    max-width: 1100px;
    margin: 0 auto;
    margin-bottom: 50px;
}
/* サイドバー用カテゴリーリンク */
.ad-case-category-links {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ad-case-category-links .category-link-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #e8e8e8;
    transition: all 0.3s;
    font-size: 14px;
}

.ad-case-category-links .category-link-item:first-child {
    border-top: 1px solid #e8e8e8;
}

.ad-case-category-links .category-link-item:hover {
    background-color: #f7f7f7;
    padding-left: 20px;
}

.ad-case-category-links .category-link-item.active {
    background-color: #3056aa;
    color: #fff;
    font-weight: 600;
}

.ad-case-category-links .category-link-item.active:hover {
    background-color: #2847a0;
}

.ad-case-category-links .category-name {
    flex: 1;
}

.ad-case-category-links .category-count {
    font-size: 12px;
    opacity: 0.7;
}

.ad-cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

article .case-thumbnail {
    height: 220px;
    object-fit: cover;
    border-radius: 10px;
    overflow: hidden;
}
article .case-content .case-category {
    font-size: 13px;
    color: #3056aa;
    font-weight: 500;
    margin: 10px 0;
    padding: 5px 10px;
    background-color: #ECF2F8;
    border-radius: 5px;
    width: fit-content;
}
article .case-content h2 {
    font-size: 13px;
    font-weight: 500;
    color: #333333;
    margin-bottom: 10px;
}
article .case-content .case-title::after {
    content: "  様";
}
article .case-content .case-excerpt {
    font-size: 18   px;
    color: #333333;
    font-weight: 600;
}

/* 広告詳細ページ 共通スタイル */
.ad-header {
    width: 100%;
    margin-bottom: 2rem;
    padding-top: 7rem;
}
.ad-header .ad-header-image {
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    height: 370px; 
}
.ad-header .ad-header-image::before {
    content: "";
    position: absolute;
    z-index: 1;
    display: block;
    width: 100%;
    height: 370px;
    opacity: 0.9;
}

/* 電車広告のヘッダー背景 */
.ad-header-train .ad-header-image {
    background-image: url(../img/base-mv-train.jpg);
}

/* 電車広告のテーマカラー（グリーン） */
.ad-header-train .ad-header-image::before {
    background-color: var(--color-train);
}

/* バス広告のヘッダー背景 */
.ad-header-bus .ad-header-image {
    background-image: url(../img/base-mv-bus.jpg);
}

/* バス広告のテーマカラー（オレンジ） */
.ad-header-bus .ad-header-image::before {
    background-color: var(--color-bus);
}

/* その他広告のヘッダー背景 */
.ad-header-other .ad-header-image {
    background-image: url(../img/base-mv-other.jpg);
}

/* その他広告のテーマカラー（ピンク） */
.ad-header-other .ad-header-image::before {
    background-color: var(--color-other);
}

/* 電車広告詳細一覧 */
.ad-header .ad-header-inner {
    position: relative;
    z-index: 2;
}
.ad-header .breadcrumbs {
  margin-left: 10%;
  padding-top: 2rem;
  color: #fff;
}
.ad-header .ad-header-inner img {
    /* width: 60px;
    height: 100px; */
    margin: 0 auto;
    margin-top: 30px;
    fill: #fff;
}
.ad-header h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin-top: 20px;
    font-size: 30px;
    font-weight: 700;
}
.ad-header .ad-header-text {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 20px 0 0 0;
    text-align: center;
}

.ad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.ad-grid article {
    width: 340px;
}

.ad-grid article .thumbnail {
    height: 148px;
    border-radius: 10px;
    overflow: hidden;
}
.ad-grid article .thumbnail img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}
.ad-grid article .content h2 {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 10px;
    margin-top: 5px;
}

.ad-index-list {
    margin: 40px 0 60px;
}
.ad-index-list-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ad-index-list-item {
    margin: 0;
}
.ad-index-list-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #fff;
    border: 2px solid #3056AA;
    border-radius: 5px;
    text-decoration: none;
    color: #3056AA;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.5;
    min-height: 85px;
    transition: all 0.3s ease;
    position: relative;
}
.ad-index-list-link::after {
    content: '';
    width: 32px;
    height: 32px;
    background-image: url('../img/arrow_circle_right.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    margin-left: 12px;
    transition: transform 0.3s ease;
}

.ad-index-list-link:hover::after {
    transform: translateY(3px);
}

.train-ad-detail-list{
    /* max-width: 1000px; */
    width: 100%;
    margin: 0 auto;
    /* padding: 0 20px; */
    box-sizing: border-box;
}
.train-ad-detail-list article {
    margin-bottom: 50px;
    scroll-margin-top: 120px; /* 固定ヘッダーの高さ分だけオフセット */
}
.train-ad-detail-list article::before {
    content: "";
    display: block;
    height: 100px; /* ヘッダーの高さ分 */
    margin-top: -100px;
    visibility: hidden;
}

.train-ad-detail-list article .detail-item-title {
    background-color: var(--color-train);
    padding: 10px;
}
.train-ad-detail-list article .detail-item-title h2 {
    font-size: 2.8rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
}
.train-ad-detail-list article .detail-content {
    padding: 20px 20px 0 20px;
}
.train-ad-detail-list article .detail-content p {
    margin-bottom: 20px;
    font-size: 1.8rem;
}

/* PDFダウンロードボタン */
.detail-pdf-download {
    margin-left: 150px; 
}

.pdf-download-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 800;
    border: double 5px var(--color-train);
    color: var(--color-train);
}

.pdf-download-button .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* トップページ - ポイント画像 */
.top-point-img {
    max-width: 900px;
    margin: 0 auto;
    margin-bottom: 4rem;
}

#top-feedback .title02 {
    text-align: center;
    padding-bottom: 4rem;
}

#top-feedback .title02 span {
    display: inline-block;
    position: relative;
    font-size: 3rem;
    color: #fff;
    padding: 0 7rem;
}
#top-feedback .title02 span::before {
    content: "";
    display: block;
    width: 1.6rem;
    height: 3.4rem;
    background: url(../img/title-bg02.svg) center center / cover no-repeat;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%) scale(-1, 1);
    transform: translateY(-50%) scale(-1, 1);
}
#top-feedback .title02 span::after {
    content: "";
    display: block;
    width: 1.6rem;
    height: 3.4rem;
    background: url(../img/title-bg02.svg) center center / cover no-repeat;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.top-feedback p {
    font-size: 18px;
    font-weight: 500;
    margin: 0 auto;
    width: 80%;
}

/* 特徴セクション */
.features {
    max-width: 1080px;
    background-color: #fff;
    margin: 0 auto;
    margin-top: 50px;
}
.features h2 {
    text-align: center;
    color: #3056AA;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 50px;
}
.features img {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.features article {
    margin: 10px 10px 50px 10px;
}
.features article::before {
    content: "";
    display: block;
    height: 100px; /* ヘッダーの高さ分 */
    margin-top: -50px;
    visibility: hidden;
}

/* お問い合わせフォーム */
.contact-form {
    max-width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;
}

.contact-note {
    padding: 80px 50px 30px 50px;
    background-color: #ECF2F8;
    /* margin-bottom: 50px; */
    border-radius: 5px 5px 0 0;
}
.contact-note h3{
    text-align: center;
} 

.contact-form form {
    /* padding: 0 50px 0 50px; */
    /* background-color: #fff; */
    border-radius: 0 0 5px 5px;
}
.contact-form form .form-inner {
    background-color: #ECF2F8;
    padding: 10px 50px 50px 50px;
}

.contact-note h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #3056AA;
    margin: 0;
    margin-bottom: 20px;
    padding: 0;
    /* text-align: center; */
    background-color: #ECF2F8;
}
.contact-note ul {
    list-style: disc;
    padding-left: 20px;
}
.contact-note ul li {
    margin-bottom: 10px;
}
.contact-note ul li:last-child {
    margin-bottom: 0px;
}
.contact-note ul li ul li {
    margin-bottom: 0px;
}
.contact-note ul li::marker,
.contact-note ul li ul li::marker {
    color: #3056AA;
}
.form-checkbox {
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.form-checkbox .wpcf7-list-item {
    display: block;
}

.form-submit{
    text-align: center;
    margin-top: 30px;
}

.contact-form form label {
    font-size: 18px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    margin: 20px 0 10px 0;
}
.contact-form form label a {
    background-color:#DB0004;
    color: #fff;
    padding: 3px 6px;
    margin-left: 10px;
    font-size: 1rem;
    border-radius: 5px;
}
.contact-form form label span {
    margin-left: 10px;
}

.contact-form form input,
.contact-form form textarea,
.contact-form form select {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: none;
    font-size: 18px;
    font-weight: 500;
}
.contact-form form input::placeholder,
.contact-form form textarea::placeholder,
.contact-form form select::placeholder{
    color: #b5bcce;
}
.contact-form form input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1px solid #9fa0a0;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    position: initial;
}
.contact-form form input[type="submit"] {
    background-color: #3056AA;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    border: none;
    font-size: 18px;
    font-weight: 600;
    width: 200px;
    margin: 20px auto 20px auto;
}
.contact-form form select,
::picker(select) {
    appearance: base-select;
    text-align: center;
}
.contact-submit {
    margin-top: 30px;
    text-align: center;
}
.contact-form form select option {
    padding: 10px;
    font-weight: 500;
    color: #333;
}

/* 資料請求ページ */
.download-title {
    margin: 80px 0;
}
.download-title h2{
    font-size: 3rem;
    font-weight: 700;
    color: #3056AA;
    text-align: center;
    margin-bottom: 20px;
}
.download-title p{
    text-align: center;
    padding: 0 2rem;
}
.download-form{
    padding-top: 10px;
    margin-top: 80px;
}
.download-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 30px;
    align-items: start;
    overflow: visible;
    position: relative;
    background-color: #ECF2F8;
    padding: 0 50px 0 50px;
    border-radius: 5px 5px 0 0;
}

.download-note img {
    position: relative;
    top: -40px; /* 上方向に飛び出す */
}

.download-note ul {
    list-style: disc;
    padding-left: 20px;
    margin-top: 50px;
}

.download-note ul li {
    margin-bottom: 8px;
}

.download-note ul li::marker {
    color: #3056AA;
}

/* サンクスページ */
.thanks-content {
    text-align: center;
    padding: 50px 80px 10px 50px;
}
.thanks-content  .btn01{
    padding: 10px;
    margin-top: 30px;
}

/* ========================================
   11. レスポンシブ対応（767px以下）
   ======================================== */

@media only screen and (max-width: 767px) {
    html {
        font-size:calc(75vw / 30)
    }

    figcaption,figure,main {
        display: block;
        margin-top: 20px;
    }

    form [type="text"],form [type="number"],form [type="search"],form [type="email"],form [type="tel"],form [type="url"],form [type="password"],form [type="date"],form [type="datetime-local"],form [type="month"],form [type="week"],form [type="time"],form textarea,form select {
        font-size: 16px
    }

    .pc {
        display: none
    }

    .sp {
        display: block
    }

    img.sp,span.sp {
        display: inline
    }

    table.sp {
        display: table
    }

    .alignleft,.alignright {
        float: none;
        max-width: 100% !important;
        margin-bottom: 0
    }

    .alignleft {
        margin-right: 0
    }

    .alignright {
        margin-left: 0
    }

    .col:not(table) {
        display: block
    }

    .col:not(table)>* {
        width: auto !important;
        margin-left: 0 !important
    }

    .col:not(table)>table {
        width: 100% !important
    }

    .col03:not(table) {
        display: block
    }

    .col03:not(table)>* {
        width: auto !important;
        margin-right: 0 !important
    }

    .scroll {
        overflow-x: auto
    }

    .scroll::-webkit-scrollbar {
        height: 5px
    }

    .scroll::-webkit-scrollbar-track,.scroll::-webkit-scrollbar-thumb {
        border-radius: 5px
    }

    .scroll::-webkit-scrollbar-track {
        background: #cccccc
    }

    .scroll::-webkit-scrollbar-thumb {
        background: #666666
    }

    .scroll table {
        white-space: nowrap
    }

    *:hover {
        opacity: 1 !important
    }

    .hover {
        opacity: 0.7
    }

    header {
        /* padding-left: 1rem;
        padding-right: 0; */
        padding: 0 5px;
        background: #fff;
        box-shadow: 0 0 6px rgba(0,0,0,0.1)
    }

    header>div {
        padding-top: 0
    }

    header .hd-logo {
        align-items: center
    }

    header .hd-logo a:nth-of-type(1) {
        width: 8rem;
        padding-right: 1rem
    }

    header .hd-logo a:nth-of-type(2) {
        width: 8rem;
        padding-left: 1rem
    }

    header .hd-logo a:nth-of-type(2)::after {
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        height: 50%
    }

    header .hd-control.sp ul {
        width: 21rem;
        display: flex
    }

    header .hd-control.sp ul li {
        width: 7rem;
        text-align: center
    }

    header .hd-control.sp ul li button {
        display: block;
        background: #fff;
        border: none;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        outline: none
    }

    header .hd-control.sp ul li a,header .hd-control.sp ul li button {
        position: relative;
        display: block;
        width: 100%;
        height: 7rem;
        font-weight: bold
    }

    header .hd-control.sp ul li a {
        position: relative
    }

    header .hd-control.sp ul li a img {
        margin-top: 1rem;
        width: 3rem
    }

    header .hd-control.sp ul li .txt {
        position: absolute;
        bottom: 0.4rem;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        display: block;
        width: 100%;
        text-align: center;
        font-size: 1rem;
        letter-spacing: -0.05rem;
        line-height: 1.75
    }

    header .hd-control.sp ul .tel {
        background: #e6e6e6
    }

    header .hd-control.sp ul .contact {
        background: #3056aa
    }

    header .hd-control.sp ul .contact .txt {
        color: #fff
    }

    .hamburger-wrap {
        position: relative;
        display: block;
        width: 3rem;
        margin: -1rem auto 0 auto
    }

    .drawer-hamburger-icon {
        margin-top: 0;
        height: 0.3rem;
        background: #2e2e2e
    }

    .drawer-hamburger-icon:before {
        top: -1rem;
        height: 0.3rem;
        background: #2e2e2e
    }

    .drawer-hamburger-icon:after {
        top: 1rem;
        height: 0.3rem;
        background: #2e2e2e
    }

    .drawer-nav {
        height: 100vh !important;
        z-index: 50;
        padding: 7rem 1.5rem;
        background: rgba(255,255,255,0.9);
        display: flex;
        justify-content: center;
        align-items: center
    }

    /* オーバーレイをメニューの下に配置 */
    .drawer-open .drawer-overlay {
        z-index: 40 !important;
        display: none;
    }

    .drawer-nav .gnav {
        text-align: center
    }

    .drawer-nav .gnav ul li {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 3rem
    }

    footer #f-menu>div {
        display: block
    }

    footer #f-menu>div .f-logo {
        margin-bottom: 4rem
    }

    footer #f-menu>div .f-logo a {
        width: 50% !important
    }

    footer #f-menu>div .f-control .f-nav ul {
        flex-wrap: wrap;
        align-items: center;
        justify-content: center
    }

    footer #f-menu>div .f-control .f-contact {
        margin-top: 3rem;
        display: block;
        text-align: center
    }

    footer #f-menu>div .f-control .f-contact .time {
        margin-left: 0
    }

    footer #f-btn {
        width: 100%;
        max-width: 100%
    }

    footer #f-btn .col {
        padding-right: 2rem;
        padding-left: 2rem
    }


    footer #f-btn  .btn01, 
    footer #f-btn  .btn02, 
    footer #f-btn .btn03 {
        display: flex;
        width: 90%;
        margin: 0 auto;
        margin-bottom: 20px;
    }

    footer #f-btn .link01 {
        padding-right: 2rem;
        padding-left: 2rem;
        width: 100%
    }

    footer .footer-head {
        margin-bottom: 450px;
        background-size: 300%; /* お好みのサイズに調整してください（例: 120%, 150%, 200%など） */
        background-position: top;
    }

    footer .footer-head h3 {
        top: 20%;
        width: 80%;
        /* margin-bottom: 50px; */
    }
    footer .footer-head .footer-button-area {
        display: grid;
        grid-template-columns: 1fr;
        top: 110%;
        width: 90%;
        height: 650px;
        padding: 50px 0;
    }
    footer .footer-head .footer-button-area-inner{
        width: 100%;
        margin: 25px 0 25px 0;
        font-size: 15px;
        font-weight: 500;
    }
    footer .footer-head .footer-button-area-inner-divider {
        width: 80%;
        height: 1px;
        background-color: #333;
        margin: 0 auto;
    }

    footer #f-menu {
        display: block;
        padding-top: 0;
        width: auto;
    }
    footer #f-menu .f-logo {
        width: 100%;
    }
    footer #f-menu .f-contact {
        text-align: center;
        font-size: 13px;
    }
    footer #f-menu .site-map {
        margin-top: 30px;
        text-align: center;
        font-size: 13px;
    }
    footer #f-menu .f-nav ul {
        gap: 8px;
    }

    .ad-header {
        padding-top: 0;
    }

    .p-mainVisual {
        margin-top: 0;
    }
    .mainVisual-button-wrapper-sp {
        display: block;
    }
    .mainVisual-button-wrapper {
        display: none;
    }
    .mainVisual-button {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        left: 0;
        bottom: -10%;
    }
    .mainVisual-button img {
        width: 30%;
    }
    .mainVisual-datalibrary {
        right: 0;
        bottom: -30%;
        width: 100%;
    }
    .mainVisual-datalibrary .hd-btn {
        margin: 0 auto;
        text-align: center;
    }
    .mainVisual-datalibrary .datalibrary-btn {
        border-radius: 10px;
        right: 0;
    }
    .ad-case-category-links .category-link-item {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .ad-cases-grid {
        grid-template-columns: 1fr ;
    }
    .top-ad_case .ad-cases-grid {
        grid-template-columns: 1fr  1fr;
    }
    .ad-case-container {
        margin: 15px !important;
    }
    .top-ad_case .ad-cases-grid article .case-thumbnail {
        height: auto;
    }

    .top-datalibrary-and-flow-inner {
        display: grid;
        grid-template-columns: 1fr;
    }
    .top-datalibrary-and-flow-divider {
        width: 85%;
        height: 1px;
        margin: 20px auto ;
    }
    .top-datalibrary p {
        width: 100%;
    }
    .top-flow p {
        width: 100%;
    }




    #content .title01 span {
        font-size: 2.6rem;
        padding: 0 3rem
    }

    #content .title02 span {
        font-size: 2.6rem;
        padding: 0 3rem
    }

    .cv-bnr .inner {
        max-width: 100% !important;
        background: #3056aa url(../img/cv-bg01.png) repeat left center;
        padding: 0 2rem
    }

    .cv-bnr .inner>div {
        padding: 8rem 0;
        background: #3056aa
    }

    .cv-bnr .inner .col p {
        text-align: center
    }

    .cv-bnr .inner .col p span {
        display: inline-block;
        text-align: left;
        font-size: 2.8rem;
        font-weight: bold;
        color: #fff
    }

    .cv-bnr .inner .col .btn-box {
        text-align: center
    }

    .cv-bnr .inner .col .btn-box .btn01 {
        box-shadow: 1px 1px 15px rgba(0,0,0,0.2)
    }

    #top-mv {
        padding-bottom: 8rem
    }

    #top-mv .slider {
        width: 100%;
        margin-bottom: 2rem
    }

    #top-mv .slider .feature li {
        width: auto;
        margin: 0 1rem
    }

    #top-mv .lead {
        position: static;
        -webkit-transform: none;
        transform: none;
        padding-right: 2rem
    }

    #top-mv .lead h2 {
        font-size: 3.6rem
    }

    #top-mv .lead .btn-box {
        display: block;
        text-align: center
    }

    #top-menu .col li {
        margin-top: 2rem !important
    }

    #top-menu .col li:nth-child(1) span i,#top-menu .col li:nth-child(2) span i,#top-menu .col li:nth-child(3) span i {
        margin-left: 1.2rem
    }

    #top-menu .col li:nth-child(4) a i,#top-menu .col li:nth-child(5) a i {
        margin-left: 1rem
    }

    #top-case .slick .slick-list {
        padding-bottom: 1rem
    }

    #top-case .slick .slider>div {
        display: block
    }

    #top-case .slick .slider>div>figure {
        width: 100%
    }

    #top-case .slick .slider>div>figure img {
        width: 100% !important;
        height: auto !important
    }

    #top-case .slick .slider>div>div {
        width: 100%;
        padding: 2rem
    }

    #top-case .slick .slider>div>div .title {
        font-size: 2.6rem
    }

    #top-client .slider {
        display: flex
    }

    #top-client .slider:nth-of-type(1) {
        -webkit-animation: loopSlide01 60s linear infinite;
        animation: loopSlide01 60s linear infinite
    }

    #top-client .slider:nth-of-type(2) {
        -webkit-animation: loopSlide02 60s -40s linear infinite;
        animation: loopSlide02 60s -40s linear infinite
    }

    #top-client .slider:nth-of-type(3) {
        -webkit-animation: loopSlide03 60s -20s linear infinite;
        animation: loopSlide03 60s -20s linear infinite
    }

    #top-flow .tel .num {
        font-size: 3.8rem
    }

    #top-flow .tel .num i {
        font-size: 3.4rem
    }

    #base .base-sec01 .col {
        padding: 1.6rem 1.6rem 3rem 1.6rem
    }

    #base.train #base-mv,#base.bus #base-mv {
        background-position: center center
    }

    .ad-header .breadcrumbs {
        margin-left: 10px;
    }
    .ad-header .ad-header-text {
        font-size: 12px;
    }

    .ad-index-list {
        margin: 20px;
    }
    
    .ad-index-list-inner {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .ad-index-list-link {
        padding: 5px 16px;
        font-size: 1.3rem;
        min-height: 90px;
    }
    .ad-index-list-link-data-library {
        min-height: 90px;
    }
    
    .ad-index-list-link::after {
        width: 28px;
        height: 28px;
    }

    /* 電車広告一覧のレスポンシブ対応 */
    .site-main .container {
        margin: 0;
    }
    .archive-container {
        margin: 15px !important;
    }

    .ad-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ad-grid article {
        width: 100%;
    }

    /* 電車広告詳細一覧のレスポンシブ対応 */
    .train-ad-detail-list {
        width: 100%;
        padding: 0 20px;
    }

    .train-ad-detail-list article {
        margin-bottom: 30px;
        scroll-margin-top: 80px;
    }

    .train-ad-detail-list article .detail-item-title {
        padding: 8px;
    }

    .train-ad-detail-list article .detail-item-title h2 {
        font-size: 1.8rem;
    }

    .train-ad-detail-list article .detail-content {
        padding: 16px;
    }

    .train-ad-detail-list article .detail-content p {
        font-size: 1.4rem;
        margin-bottom: 16px;
    }

    .detail-pdf-download {
        margin-left: 16px;
    }

    /* WordPressカラムブロックのレスポンシブ対応 */
    .train-ad-detail-list .wp-block-columns {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .train-ad-detail-list .wp-block-column {
        flex-basis: 100% !important;
        margin-left: 0 !important;
    }

    /* テーブルのレスポンシブ対応 */
    .train-ad-detail-list table {
        width: 100% !important;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .train-ad-detail-list .detail-content img {
        max-width: 100% !important;
        height: auto !important;
    }

    .main-header {
        padding-top: 0;
    }

    .main-header .main-header-text {
        margin: 50px 10px ;
    }
    main#main_content{
        width: 90%;
        margin: 0 auto;
    }

    .contact-form {
        padding: 0 30px;
    }
    .thanks-content .btn01{
        min-width: 23rem;
    }
    

    .features {
        margin: 0 20px;
    }
    .features article::before {
        content: "";
        display: block;
        height: 50px; /* ヘッダーの高さ分 */
        margin-top: -10px;
        visibility: hidden;
    }
    #top-feedback {
        padding: 3rem 20px;
    }
}

@media print {
    body {
        padding-top: 0;
        -webkit-print-color-adjust: exact;
        zoom:0.9}

    header {
        position: relative
    }

    .drawer--top .drawer-nav {
        display: none
    }
}



/* レスポンシブ対応 */
@media (max-width: 768px) {

    .main-header .breadcrumbs {
        margin-left: 10px;
    }
    
    .detail-pdf-download {
        margin-top: 24px;
    }
    
    .pdf-download-button {
        padding: 14px 28px;
        font-size: 15px;
        gap: 10px;
    }
    
    .pdf-icon {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .pdf-download-button {
        padding: 12px 24px;
        font-size: 14px;
        gap: 8px;
        width: 100%;
        justify-content: center;
    }
    
    .pdf-icon {
        font-size: 18px;
    }
}

/* 電車広告のPDFボタン */
.train-ad-detail-list .pdf-download-button {
    border-color: var(--color-train);
    color: var(--color-train);
}

/* バス広告詳細一覧 */
.bus-ad-detail-list{
    /* max-width: 1000px; */
    width: 100%;
    margin: 0 auto;
    /* padding: 0 20px; */
    box-sizing: border-box;
}
.bus-ad-detail-list article {
    margin-bottom: 50px;
    scroll-margin-top: 120px; /* 固定ヘッダーの高さ分だけオフセット */
}
.bus-ad-detail-list article::before {
    content: "";
    display: block;
    height: 100px; /* ヘッダーの高さ分 */
    margin-top: -100px;
    visibility: hidden;
}
.bus-ad-detail-list article .detail-item-title {
    background-color: var(--color-bus);
    padding: 10px;
}
.bus-ad-detail-list article .detail-item-title h2 {
    font-size: 2.8rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
}
.bus-ad-detail-list article .detail-content {
    padding: 20px 20px 0 20px;
}
.bus-ad-detail-list article .detail-content p {
    margin-bottom: 20px;
    font-size: 1.8rem;
}

/* バス広告のPDFボタン */
.bus-ad-detail-list .pdf-download-button {
    border-color: var(--color-bus);
    color: var(--color-bus);
}

/* その他広告詳細一覧 */
.other-ad-detail-list{
    /* max-width: 1000px; */
    width: 100%;
    margin: 0 auto;
    /* padding: 0 20px; */
    box-sizing: border-box;
}
.other-ad-detail-list article {
    margin-bottom: 50px;
    scroll-margin-top: 120px; /* 固定ヘッダーの高さ分だけオフセット */
}
.other-ad-detail-list article::before {
    content: "";
    display: block;
    height: 100px; /* ヘッダーの高さ分 */
    margin-top: -100px;
    visibility: hidden;
}
.other-ad-detail-list article .detail-item-title {
    background-color: var(--color-other);
    padding: 10px;
}
.other-ad-detail-list article .detail-item-title h2 {
    font-size: 2.8rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
}
.other-ad-detail-list article .detail-content {
    padding: 20px 20px 0 20px;
}
.other-ad-detail-list article .detail-content p {
    margin-bottom: 20px;
    font-size: 1.8rem;
}

/* その他広告のPDFボタン */
.other-ad-detail-list .pdf-download-button {
    border-color: var(--color-other);
    color: var(--color-other);
}

/* レスポンシブ対応（バス広告・その他広告） */
@media (max-width: 768px) {
    /* バス広告詳細一覧のレスポンシブ対応 */
    .bus-ad-detail-list {
        width: 100%;
        padding: 0 20px;
    }

    .bus-ad-detail-list article {
        margin-bottom: 30px;
        scroll-margin-top: 80px;
    }

    .bus-ad-detail-list article .detail-item-title {
        padding: 8px;
    }

    .bus-ad-detail-list article .detail-item-title h2 {
        font-size: 1.8rem;
    }

    .bus-ad-detail-list article .detail-content {
        padding: 16px;
    }

    .bus-ad-detail-list article .detail-content p {
        font-size: 1.4rem;
        margin-bottom: 16px;
    }

    /* WordPressカラムブロックのレスポンシブ対応 */
    .bus-ad-detail-list .wp-block-columns {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .bus-ad-detail-list .wp-block-column {
        flex-basis: 100% !important;
        margin-left: 0 !important;
    }

    /* テーブルのレスポンシブ対応 */
    .bus-ad-detail-list table {
        width: 100% !important;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .bus-ad-detail-list .detail-content img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* その他広告詳細一覧のレスポンシブ対応 */
    .other-ad-detail-list {
        width: 100%;
        padding: 0 20px;
    }

    .other-ad-detail-list article {
        margin-bottom: 30px;
        scroll-margin-top: 80px;
    }

    .other-ad-detail-list article .detail-item-title {
        padding: 8px;
    }

    .other-ad-detail-list article .detail-item-title h2 {
        font-size: 1.8rem;
    }

    .other-ad-detail-list article .detail-content {
        padding: 16px;
    }

    .other-ad-detail-list article .detail-content p {
        font-size: 1.4rem;
        margin-bottom: 16px;
    }

    /* WordPressカラムブロックのレスポンシブ対応 */
    .other-ad-detail-list .wp-block-columns {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .other-ad-detail-list .wp-block-column {
        flex-basis: 100% !important;
        margin-left: 0 !important;
    }

    /* テーブルのレスポンシブ対応 */
    .other-ad-detail-list table {
        width: 100% !important;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .other-ad-detail-list .detail-content img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* 広告掲載までの流れページ */
.subpage-wrapper {
    max-width: 1080px;
    margin: 60px auto;
    padding: 0 20px;
}

.flow-step {
    display: flex;
    gap: 40px;
    margin-bottom: 50px;
}

.flow-step:last-child {
    margin-bottom: 0;
}

/* 左カラム */
.flow-step__left {
    flex-shrink: 0;
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* 左カラムの縦の点線 */
.flow-step__left::after {
    content: '';
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(100% + 20px); /* 100% + margin-bottom */
    border-left: 5px dotted #5FB3E9;
}


.flow-step__number {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #3056AA;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
    text-align: center;
    background-color: #fff;
}

.flow-step__number span {
    font-size: 24px;
    font-weight: 700;
    margin-top: 5px;
}

.flow-step__icon {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 最後のステップは点線を表示しない */
.flow-step:nth-child(6) .flow-step__left::after {
    display: none;
}

/* 期間表示 */
.flow-step__duration {
    position: absolute;
    top: 140px;
    left: 75px;
    font-size: 2rem;
    font-weight: 700;
    color: #5FB3E9;
    white-space: nowrap;
}

/* 右カラム */
.flow-step__right {
    flex: 1;
}

.flow-step__title {
    font-size: 24px;
    font-weight: 700;
    color: #3056AA;
    margin: 0 0 15px 0;
}

.flow-step__content {
    background-color: #ECF2F8;
    padding: 30px;
    border-radius: 20px;
}

.flow-step__content p {
    color: #333;
    font-size: 18px;
}

.flow-step__content p:last-child {
    margin-bottom: 0;
}

.poster {
    width: 100%;
    height: 100%;
    background-color: #ECF2F8;
    border: 1px solid #3056AA;
    padding: 50px;
    text-align: center;
}
.poster h2 {
    text-align: center;
}
.poster h3 {
    color: #3056AA;
    background-color: #ECF2F8;
    text-align: center;
}
.poster .poster-duration {
    color: #DB0004;
}
.poster .poster-duration-date {
    font-size: 2rem;
    font-weight: 700;
}
.poster table {
    width: 80%;
    border-collapse: collapse;
    margin-bottom: 20px;
    margin: 0 auto;
}
.poster table td {
    /* padding: 10px; */
    border-bottom: 1px solid;
}

.poster-size-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.poster-size-image img {
    width: 100%;
    height: auto;
}

.poster-contact-info {
    width: 100%;
    height: 100%;
    padding: 50px;
    text-align: center;
}
.poster-contact-info h2 {
    text-align: center;
}
.poster-contact-info h3 {
    /* font-size: 20px;
    font-weight: 700;
    color: #3056AA;
    margin: 20px 0; */
}
.poster-contact-info-tel {
    font-size: 18px;
    font-weight: 700;
    color: #3056AA;
    margin-top: 10px;
}

.flow-note {
    background-color: #F5F5F5;
}
.flow-note-container {
    max-width: 1080px;
    height: 100%;
    padding: 50px;
    text-align: left;
    margin: 0 auto;
} 
.flow-note h2 {
    font-size: 24px;
    font-weight: 700;
    color: #3056AA;
    margin-bottom: 10px;
    text-align: center;
}
.flow-note h3 {
    font-size: 2rem;
    font-weight: 700;
    margin: 20px 0;
    color: #333;
    padding: 0;
    background-color: #F5F5F5;
}
.flow-note p {
    font-size: 1.8rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 10px;
}
.flow-note ul {
    list-style: decimal;
    padding-left: 40px;
    margin-bottom: 10px;
}
.flow-note ul li {
    margin-bottom: 10px;
}

.flow-note-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}
.flow-note-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    margin: 0 auto;
}
.flow-note-table td {
    border-bottom: 1px solid;
    padding: 0.5rem 2rem;
}
.flow-note-table p{
    font-size: 15px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .subpage-wrapper {
        margin: 40px auto;
        padding: 0 15px;
    }

    .flow-step {
        gap: 25px;
        margin-bottom: 40px;
    }

    .flow-step__left {
        width: 90px;
    }

    .flow-step__left::after {
        top: 100px;
        height: calc(100% + 40px); /* 100% + margin-bottom */
    }

    .flow-step__number {
        font-size: 12px;
        margin-bottom: 12px;
        background-color: #fff;
    }

    .flow-step__number span {
        font-size: 22px;
    }

    .flow-step__icon {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }

    .flow-step__duration {
        top: 135px;
        left: 55px;
        font-size: 12px;
    }

    .poster-size-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .flow-step__title {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .flow-step__content {
        padding: 25px 20px;
    }

    .flow-step__content p {
        font-size: 14px;
    }

    .flow-note-grid {
        grid-template-columns: 1fr;
    }
}





/* レスポンシブ対応 */
@media (max-width: 768px) {
    .top-ad_menu {
        padding: 40px 0;
    }

    .top-ad_menu h2 {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .top-ad_menu ul {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .top-ad_menu ul li {
        padding: 0;
    }

    .top-ad_menu ul li figure {
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
    }

    .top-ad_menu ul li a {
        font-size: 18px;
    }

    .top-ad_menu ul li:last-child {
        grid-column: 1;
        font-size: 16px;
    }
}



/* レスポンシブ対応 */
@media (max-width: 768px) {
    .download-note {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .download-note img {
        top: -50px;
        /* max-width: 100px; */
    }

    .download-note ul {
        margin-top: -30px;
    }
}

/* ========================================
   カスタムメインビジュアル
   ======================================== */

/* 一旦コメントアウト - SWELLのデフォルトスタイルを使用 */
#main_visual {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

#main_visual .p-mainVisual__imgLayer img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

@media (max-width: 768px) {
    #main_visual.p-mainVisual.-height-img .p-mainVisual__inner {
        min-height: 300px;
    }
}

#content .l-content {
    padding: 0 !important;
    padding-top: 0 !important;
}

.l-content {
    padding: 0 !important;
}



@media (min-width: 600px) {
}

/* ========================================
   広告事例アーカイブページ カスタムスタイル
   ======================================== */

.custom-ad-case-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

@media (max-width: 1024px) {
    .custom-ad-case-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .custom-ad-case-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* 個別カードアイテム */
.custom-case-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease; */
}

/* .custom-case-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
} */

.custom-case-item .case-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* サムネイル */
.custom-case-item .case-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f5f5f5;
}

.custom-case-item .case-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.custom-case-item:hover .case-thumbnail img {
    transform: scale(1.05);
}

/* コンテンツエリア */
.custom-case-item .case-content {
    padding: 15px 20px 0 0;
}

/* カテゴリ */
.custom-case-item .case-content .case-category {
    font-size: 13px;
    color: #3056aa;
    font-weight: 500;
    margin: 0 0 10px 0;
    padding: 5px 10px;
    background-color: #ECF2F8;
    border-radius: 5px;
    width: fit-content;
}

/* タイトル */
.custom-case-item .case-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.6;
    margin: 0 0 10px 0;
    color: #333;
    background-color: #fff;
    padding: 0;
}

.custom-case-item .case-excerpt {
    font-size: 1.8rem;
    line-height: 1.7;
    color: #555;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.data-library-detail-list h3 {
    all: unset;
}

@media (max-width: 768px) {
    .custom-case-item .case-content {
        padding: 12px 15px 15px;
    }

    .custom-case-item .case-title {
        font-size: 15px;
    }

    .custom-case-item .case-excerpt {
        font-size: 13px;
    }
}

.wp-block-group__inner-container h2.wp-block-heading{
    font-size: 1em;
}

@media (max-width: 768px) {
    #sidebar{
        margin: 4rem 20px 0;
    }
}

/* タブレットサイズ */
@media screen and (min-width: 768px) and (max-width: 1100px){
    header{
        padding: 10px 10px 0 10px;
    }
    footer .footer-head .footer-button-area{
        width: 90%;
    }
    footer #f-menu{
        width: 600px;
    }
    footer #f-btn a{
        width: 200px;
        margin: 10px;
    }
    footer .footer-head{
        height: 350px;
    }
    footer .footer-head h3{
        top: 25%;
    }

    .p-mainVisual{
        margin-top: 30px;
    }
    .top-ad_menu ul{
        grid-template-columns: repeat(3, 1fr);
    }
    .top-ad_menu ul li:last-child{
        grid-column: 1 / 4 ;
    }


    .site-main .container{
        width: 90%;
        margin: 50px auto;
    }
    .ad-header{
        padding-top: 5rem;
    }
    .ad-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .main-header{
        padding-top: 5rem;
    }

    .top-point-img{
        width: 80%;
    }

    main#main_content{
        width: 90%;
        margin: 0 auto;
    }
     
}

h2{
    color: #3056AA;
  margin: 20px 0;
  font-size: 3.2rem;
  font-weight: 700;
  text-align: center;
  text-align: left;
}

h3{
  background-color: #3056AA;
  color: #fff;
  margin: 20px 0;
  padding: 15px;
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
  text-align: left;
}
h4{
  background-color: #ECF2F8;
  color: #3056AA;
  margin: 20px 0;
  padding: 15px;
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  text-align: left;
}
h5{
  background-color: #fff;
  color: #3056AA;
  margin: 20px 0;
  padding: 15px;
  border-bottom: 1px solid #3056AA;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  text-align: left;
}
h6{
  background-color: #fff;
  color: #3056AA;
  margin: 20px 0;
  padding: 15px;
  font-size: 1.9rem;
  font-weight: 700;
  text-align: center;
  text-align: left;
}

@media (max-width: 460px){
    .lum-lightbox-inner img{
        max-height: 88vh !important;
        max-width: 100vw !important;
    }

}

.data-library-link {
    padding-top: 80px;
    margin-top: -80px !important;
}

.wp-block-columns{
    width: 90%;
    margin: 0 auto;
}


h2.title01::before {
    content: "";
    display: block;
    width: 1.6rem;
    height: 3.4rem;
    background: url(../img/title-bg02.svg) center center/cover no-repeat;
    position: absolute;
    top: 8%;
    left: 200px;
    -webkit-transform: translateY(-50%) scale(-1, 1);
    transform: translateY(-50%) scale(-1, 1)
}
h2.title01::after {
    content: "";
    display: block;
    width: 1.6rem;
    height: 3.4rem;
    background: url(../img/title-bg02.svg) center center/cover no-repeat;
    position: absolute;
    top: 8%;
    right: 200px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}
h2.title02::before {
    content: "";
    display: block;
    width: 1.6rem;
    height: 3.4rem;
    background: url(../img/title-bg02.svg) center center/cover no-repeat;
    position: absolute;
    top: 52%;
    left: 110px;
    -webkit-transform: translateY(-50%) scale(-1, 1);
    transform: translateY(-50%) scale(-1, 1)
}
h2.title02::after {
    content: "";
    display: block;
    width: 1.6rem;
    height: 3.4rem;
    background: url(../img/title-bg02.svg) center center/cover no-repeat;
    position: absolute;
    top: 52%;
    right: 100px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

@media (max-width: 768px) {
    
    .data-library-link {
        padding-top: 80px;
        margin-top: -80px !important;
        margin: 0 10%;
    }
    h2{
        font-size: 3.0rem;
    }

    h2.title01,
    h2.title02 {
       font-size: 3rem;
       width: 60%;
       margin: 0 auto;
    }
    h2.title01::before {
         top: 15%;
        left: 50px;
     }
    h2.title01::after {
        top: 15%;
        right: 65px;
    }
    h2.title02::before {
        top: 55%;
        left: 50px;
    }
    h2.title02::after {
        width: 0.8rem;
        top: 55%;
        right: 65px;
    }

    .wp-block-group{
        margin: 0 5%;
        /* border-radius: 5%; */
    }
    .wp-block-heading-p{
        margin: 0 5%;
    }
    .wp-block-table{
        margin: 0 5%;
    }
}