/**
 * adplatform ページ専用スタイル
 *
 * 旧 adplatform-assets/css/style.css から移行。
 * .headerWrap / .footerWrap（旧専用ヘッダー・フッター）スタイルは廃止済み。
 * 共通ヘッダー・フッター（assets/css/base/main.css）に統一したため不要。
 */

/* ================================================================
   スコープ付きフォントサイズ基準（html への直接指定を廃止）
   ================================================================ */
.contents {
    font-size: 62.5%
}

/* ── adplatform コンテンツエリア用スコープ付きリセット（reset.css 代替） ── */
.contents ul,
.contents ol {
    margin: 0;
    padding: 0;
    list-style: none
}
.contents *,
.contents *::before,
.contents *::after {
    box-sizing: border-box
}

/* ================================================================
   body ベーススタイル（共通ヘッダーに影響しないようスコープ）
   ================================================================ */
body.adplatform-page {
    font-style: normal;
    margin: 0;
    padding: 0;
    color: #575757;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* sticky footer: フッターをページ最下部に固定 */
    display: flex;
    flex-direction: column;
    min-height: 100vh
}

body.adplatform-page .PageMain {
    flex: 1
}

body.adplatform-page .contents {
    font-weight: 100
}

/* ================================================================
   クリアフィックス
   ================================================================ */
.cf:before,
.cf:after {
    content: "";
    display: table
}

.cf:after {
    clear: both
}

.cf {
    zoom: 1
}

/* ================================================================
   テキストスタイル
   ================================================================ */
body.adplatform-page .contents p {
    font-weight: 400
}

a {
    background-color: transparent;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition: 0.3s linear;
    transition: 0.3s linear
}

.opa {
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition: 0.3s linear;
    transition: 0.3s linear
}

.opa:hover {
    opacity: 0.6
}

/* ================================================================
   ホームセクション
   ================================================================ */
.home {
    margin-bottom: 100px
}

.home h2 {
    font-size: 4.2em;
    text-align: center;
    margin: 60px 0 55px 0;
    font-family: 'Myriad W01', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: 100;
    letter-spacing: 2.2px
}

.home .copy {
    background-color: #b4c9c5;
    padding: 40px 0;
    margin-bottom: 70px
}

.home .copy p {
    color: #fff;
    font-size: 1.4em;
    line-height: 2.2;
    width: 860px;
    margin: 0 auto;
    font-weight: lighter
}

.home .home_links {
    overflow: hidden
}

.home .home_links .app {
    position: relative;
    width: 490px;
    height: 235px
}

.home .home_links .app .app_link {
    position: absolute;
    left: 273px;
    top: 75px
}

.home .home_blade {
    float: left;
    width: 50%
}

.home .home_blade img {
    margin-bottom: 25px
}

.home .home_compass {
    float: left;
    width: 50%
}

.home .home_compass img {
    margin-bottom: 25px
}

.home .link {
    text-align: center
}

.home .link a {
    width: 160px;
    display: inline-block;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    padding: 8px 0 10px 0;
    font-size: 1.2em;
    border-radius: 25px
}

.home .link a:hover {
    background-color: #dddddd;
    color: #000
}

/* ================================================================
   詳細ページセクション
   ================================================================ */
.detail .section {
    margin-bottom: 60px
}

.detail .kv {
    text-align: center;
    margin: 110px auto
}

.detail .kvuniverseads {
    text-align: center;
    margin: 80px auto 40px auto
}

.detail .obi {
    background-color: #b4c9c5
}

.detail .obi h2 {
    width: 980px;
    text-align: center;
    margin: auto auto 50px auto;
    padding: 25px 0;
    font-size: 2.2em;
    letter-spacing: 2px;
    color: #fff
}

.detail p.text {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.4em;
    font-weight: 400;
    color: #666666;
    line-height: 2
}

.detail .btn_contact {
    text-align: center;
    width: 400px;
    height: 70px;
    margin: 0 auto
}

.detail .btn_contact a {
    display: inline-block;
    width: 400px;
    height: 70px;
    margin: 0 auto;
    background-color: #e8b78c;
    color: #fff;
    text-decoration: none;
    font-size: 1.2em;
    padding-top: 20px;
    box-sizing: border-box;
    font-family: 'Myriad W01', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: 300;
    letter-spacing: 1px
}

.detail .btn_contact a :after {
    content: url('../../../adplatform-assets/images/common/arrow_fff.png');
    position: relative;
    padding-left: 6px;
    top: 5px
}

.detail .btn_contact a:hover {
    background-color: #000
}

.detail h4.related_service {
    text-align: center;
    margin-bottom: 20px
}

.detail h4.related_service span {
    color: #ffffff;
    background-color: #878787;
    border-radius: 16px;
    display: inline-block;
    padding: 10px 20px;
    box-sizing: border-box;
    font-size: 1.2em
}

.detail .links {
    text-align: center
}

.detail .tokuchoWrap {
    margin-bottom: 100px
}

.detail .tokuchoWrap .thumb {
    margin-bottom: 25px
}

.detail .tokuchoWrap .tokucho p {
    color: #61b4a8;
    font-size: 1.4em;
    line-height: 1.8;
    margin-bottom: 20px;
    min-height: 190px
}

.detail .tokuchoWrap .related {
    font-family: 'Myriad W01', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: 400;
    text-align: center;
    font-size: 2em
}

.detail .tokuchoWrap .related li {
    margin-bottom: 15px
}

.detail .tokuchoWrap .related a {
    color: #727171;
    text-decoration: none;
    position: relative;
    left: -10px
}

.detail .tokuchoWrap .related a:before {
    content: "\f0da";
    font-family: FontAwesome;
    margin-right: 10px;
    color: #fff
}

.detail .tokuchoWrap .related a:hover {
    color: #61b4a8
}

.detail .tokuchoWrap .related a:hover:before {
    color: #61b4a8
}

.detail .tokuchoWrap_blade .tokucho {
    width: 264px;
    margin: 0 30px;
    float: left
}

.detail .tokuchoWrap_blade .tokucho .networks {
    position: relative;
    left: -30px;
    margin-bottom: 35px
}

.detail .tokuchoWrap_compass {
    width: 800px;
    margin: 0 auto 60px auto
}

.detail .tokuchoWrap_compass .tokucho {
    width: 300px;
    margin: 0 50px;
    float: left
}

.detail .tokuchoWrap_compass .tokucho .networks {
    position: relative;
    left: -30px;
    margin-bottom: 35px
}

.detail .recommend h3 {
    margin-bottom: 10px;
    font-size: 1.6em
}

.detail .recommend h4 a {
    color: #666666;
    text-decoration: none;
    -webkit-transition-property: none;
    transition-property: none
}

.detail .recommend h4 a:hover {
    color: #61b4a8;
    text-decoration: underline
}

.detail .recommend .box {
    width: 900px;
    margin: 0 auto 40px auto;
    font-size: 1.4em;
    color: #666666;
    line-height: 1.8
}

.detail .recommend .box p {
    margin-bottom: 25px
}

.detail .recommend .box p a {
    color: #666666;
    text-decoration: none;
    -webkit-transition-property: none;
    transition-property: none
}

.detail .recommend .box p a:hover {
    color: #61b4a8;
    text-decoration: underline
}

.detail .recommend .indent {
    margin-left: 80px
}

.detail .partner h3 {
    margin-bottom: 35px;
    font-size: 1.6em;
    letter-spacing: 1px
}

.detail .partner .box {
    width: 860px;
    margin: 0 auto 60px auto;
    font-size: 1.4em;
    color: #666666;
    line-height: 1.8
}

.detail .partner .box_s {
    width: 750px;
    margin: auto
}

.detail .partner .text_r {
    text-align: right;
    font-size: 1.4em;
    margin-bottom: 130px
}

.detail .banners {
    width: 600px;
    margin: 0 auto;
    overflow: hidden
}

.detail .banners li {
    width: 240px;
    float: left;
    margin: 0 30px
}

/* ================================================================
   テーブル
   ================================================================ */
.shareTBL {
    width: 500px;
    margin: 0 auto 50px auto;
    font-size: 1.4em;
    color: #61b4a8
}

.shareTBL th {
    text-align: left;
    padding: 10px 10px 10px 15px;
    border: solid 1px #ddd
}

.shareTBL td {
    padding: 10px 10px 10px 15px;
    border: solid 1px #ddd
}

/* ================================================================
   ユーティリティ
   ================================================================ */
.inner {
    width: 980px;
    margin: 0 auto
}

.center {
    text-align: center
}

.mb20 { margin-bottom: 20px !important }
.mb30 { margin-bottom: 30px !important }
.mb40 { margin-bottom: 40px !important }
.mb60 { margin-bottom: 60px !important }
.mb80 { margin-bottom: 80px !important }
.mb100 { margin-bottom: 100px !important }

/* ================================================================
   レスポンシブ対応（共通ヘッダー移行後に追加）
   ================================================================ */

/* .inner の固定幅を解除してレスポンシブに */
.contents .inner {
    width: 100%;
    max-width: 980px;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px
}

/* .home .copy の固定幅を解除 */
.contents .home .copy p {
    width: 100%;
    max-width: 860px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box
}

/* .home .copy 帯を page-container を突き抜けてビューポート全幅に広げる */
.adplatform-page .contents .home .copy {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%)
}

/* タブレット以下（980px未満）: 2カラム→1カラム */
@media (max-width: 979px) {
    .contents .home h2 {
        font-size: 2.8em;
        margin: 40px 0 30px 0
    }

    .contents .home .copy {
        padding: 25px 0
    }

    .contents .home_blade,
    .contents .home_compass {
        float: none;
        width: 100%;
        margin-bottom: 40px
    }

    .contents .home_blade img,
    .contents .home_compass img {
        width: 100%;
        height: auto;
        max-width: 490px;
        display: block;
        margin-left: auto;
        margin-right: auto
    }

    .contents .home .link a {
        width: 140px
    }
}

/* スマートフォン（480px未満）: さらに縮小 */
@media (max-width: 479px) {
    .contents .home h2 {
        font-size: 2.0em;
        margin: 30px 0 20px 0;
        letter-spacing: 1px
    }

    .contents .home .copy p {
        font-size: 1.3em;
        line-height: 1.9
    }

    .contents {
        font-size: 55%
    }
}

/* ================================================================
   detail セクション レスポンシブ対応
   ================================================================ */

/* .obi 帯を page-container を突き抜けてビューポート全幅に広げる */
.adplatform-page .contents .detail .obi {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%)
}

/* 固定幅を fluid 化（全幅共通） */
.contents .detail .obi h2 {
    width: 100%;
    max-width: 980px;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px
}

.contents .detail p.text {
    width: 100%;
    max-width: 900px;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px
}

.contents .detail .recommend .box,
.contents .detail .partner .box {
    width: 100%;
    max-width: 900px;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px
}

.contents .detail .partner .box_s {
    width: 100%;
    max-width: 750px;
    box-sizing: border-box
}

/* 画像をレスポンシブに */
.contents .detail img {
    max-width: 100%;
    height: auto
}

/* タブレット以下（980px未満） */
@media (max-width: 979px) {
    /* KV マージン縮小 */
    .contents .detail .kv {
        margin: 50px auto
    }

    /* btn_contact を横幅いっぱいに */
    .contents .detail .btn_contact {
        width: 100%;
        max-width: 400px
    }

    .contents .detail .btn_contact a {
        width: 100%
    }

    /* tokuchoWrap_compass: 固定幅解除。親の .inner が padding: 0 20px を持つため追加パディング不要 */
    .contents .detail .tokuchoWrap_compass {
        width: 100%;
        box-sizing: border-box
    }

    /* tokucho: 2カラム → 1カラムへ */
    .contents .detail .tokuchoWrap_compass .tokucho {
        float: none;
        width: 100%;
        margin: 0 0 40px 0
    }

    /* tokucho p: min-height はデスクトップ2カラム整列用。1カラム表示では不要 */
    .contents .detail .tokuchoWrap .tokucho p {
        min-height: auto
    }

    /* 1カラム時の画像を中央揃え */
    .contents .detail .tokuchoWrap .tokucho .thumb {
        display: block;
        margin-left: auto;
        margin-right: auto
    }

    /* blade もついでに対応 */
    .contents .detail .tokuchoWrap_blade .tokucho {
        float: none;
        width: 100%;
        margin: 0 0 40px 0
    }

    /* partner .box 幅解除 */
    .contents .detail .partner .box {
        max-width: 100%
    }

    /* obi h2 フォントサイズ縮小 */
    .contents .detail .obi h2 {
        font-size: 1.8em;
        letter-spacing: 1px
    }
}

/* スマートフォン（480px未満） */
@media (max-width: 479px) {
    .contents .detail .kv {
        margin: 30px auto
    }

    .contents .detail .obi h2 {
        font-size: 1.4em;
        padding: 20px 16px;
        margin-bottom: 30px
    }

    .contents .detail p.text {
        font-size: 1.3em;
        line-height: 1.9
    }

    .contents .detail .btn_contact {
        width: 90%;
        height: auto
    }

    .contents .detail .btn_contact a {
        width: 100%;
        height: auto;
        padding: 18px 16px;
        font-size: 1.3em
    }

    .contents .detail .section {
        margin-bottom: 40px
    }

    .contents .detail .tokuchoWrap {
        margin-bottom: 60px
    }

    .contents .detail .tokuchoWrap .tokucho p {
        min-height: auto
    }

    .contents .detail .partner .box_s {
        padding-left: 16px;
        padding-right: 16px
    }

    .contents .detail .recommend .indent {
        margin-left: 20px
    }

    .contents .detail .shareTBL {
        width: 100%;
        box-sizing: border-box;
        padding: 0 16px
    }
}