@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : action.css
Description :　個人情報の取り扱い共通css
===================================================================== */

.inner h2 {
    margin-top: 4rem;
}

.dateBox {
    text-align: right;
    padding: 1rem;
}

.graybg3 {
    background-color: #efefef;
    padding: 2rem;
}

.fontB {
    font-weight: 700;
}

.privacyBase {
    margin-top: calc(80 / 940 * 100%);
}

.s-font {
    font-size: 1rem;
}

.privacyBase h4 {
    font-size: 2.2rem;
    font-weight: 700;
    padding-bottom: .15em;
    margin-bottom: 1em;
    border-bottom: 2px solid #d9d8d5;
}

.privacyBase h4::before {
    content: '';
    position: absolute;
    bottom: -.15em;
    left: 0;
    width: 4.8em;
    height: 2px;
    background-color: #ffb300;
}

.privacyBase-sub {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.8em;
}

.liTxt {
    margin-bottom: calc(40 / 940 * 100%);
}

.liTxt li {
    padding: 0 1rem 0 2rem;
    margin-bottom: 0.5rem;
    text-indent: -1.3rem;
}

ol.liTxt li {
    text-indent: 0;
    list-style-position: outside;
}

/* 数字リスト用 */
ol.liTxt.liTxt-decimal li {
    list-style-type: decimal;
    margin-left: 3rem;
}

/* collection_use ページのみ: ulのliでtext-indentを解除 */
.collection_use ul.liTxt li {
    text-indent: 0;
}

/* ※がoutsideになるリスト（他liのスタート位置に揃える） */
.liTxt-note {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.liTxt-note li {
    position: relative;
    padding: 0 1rem 0 2rem;
    margin-bottom: 0.5rem;
    list-style: none;
    text-indent: 0;
}

.liTxt-note li::before {
    content: "※";
    position: absolute;
    left: 0.5rem;
}

.mg2 {
    margin-left: 2em;
}

.wbg1 {
    padding: 2rem;
    border: 2px solid #efefef
}

.spPrivacy {
    margin-bottom: 6rem;
}

.spPrivacy li a {
    margin: 1rem auto;
}

.dataImg img {
    width: 100%;
    margin: 3rem auto;
}

.dataP {
    margin-bottom: calc(40 / 940 * 100%);
}
.dataP a {
    text-decoration: underline;
}

.request-form-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 0.5rem;
}

.request-form-links a {
    white-space: nowrap;
}

.link-color-blue {
    display: contents!important;
}

.in-block {
    display: inline-grid;
}

/* 2023.1.17 */
.ad-font1 {
    font-weight: 700;
    font-size:110%;
    line-height:160%;
    text-indent: 1em;
    display: block;
}
.ad-font2 {
        font-weight: 700;
        font-size: 110%;
        line-height: 160%;
        text-indent: 4em;
        display: block;
        padding-bottom: .2rem;
}
/* 2024.05.09 add movie */
.movies-article h4 {
    font-size: 2.2rem;
        font-weight: 700;
        margin-top: 3rem;
        padding-bottom: .15em;
        margin-bottom: 1em;
        border-bottom: 2px solid #d9d8d5;
}
.movies-article h4::before {
    content: '';
    position: absolute;
    bottom: -.15em;
    left: 0;
    width: 4.8em;
    height: 2px;
    background-color: #dc2201;
}
.movie-area iframe {
width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-width: 960px;
    display: block;
    margin: 3rem auto;
}

#main .p-title,
.p-title {
    margin-top: 2rem;
    color: #2f3c5b;
}

/* スマホ: プライバシーで改行(.p-title.sp内のbr) / タブレット以上: 一行表示 */
@media screen and (min-width: 768px) {
    #main .p-title.sp,
    .p-title.sp {
        display: inline !important;
    }
    #main .p-title.sp br,
    .p-title.sp br {
        display: none;
    }
}

.sp {
    display: block;
}

@media screen and (min-width: 768px) {
    .sp {
        display: none;
    }
    /* .p-title.sp は上で表示に戻しているため、.sp の none で隠れない */
    #main .p-title.sp,
    .p-title.sp {
        display: inline !important;
    }
    .spPrivacy {
        display: none;
    }
    .privacyBase h4::before {
        bottom: -.1em;
    }
    .s-font {
        font-size: 1.4rem;
    }
    .movies-article h4::before {
        bottom: -.1em;
    }
}

@media screen and (min-width: 1480px) {
    .privacyBase h4::before {
        bottom: -.05em;
    }
        .movies-article h4::before {
            bottom: -.05em;
        }
}

/* privacy_potal用: globalheader/footer カラー強制上書き */
#header,
#header.header {
    background-color: #FFBA00 !important;
}
#footer,
footer#footer {
    background-color: #FFBA00 !important;
}

/* privacy_potal用: .ja の文字色 */
#wrapper .ja {
    color: #2f3c5b;
}

/* =====================================================================
   .top / .groupbasic（youngと同様のセクションスタイル）
===================================================================== */

.top,
.groupbasic {
    /* youngと同様のセクション構造 */
}

/* privacy-top背景: icon_privacy（右上に表示） */
.privacy-top {
    position: relative;
}

.privacy-top .submv {
    background-color: transparent;
}

.privacy-top main {
    position: relative;
}

.privacy-top main::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/common/icon_privacy.png);
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: 25% auto;
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
}

@media screen and (max-width: 767px) {
    .privacy-top main::before {
        background-position: 115% 5rem;
        background-size: 30% auto;
    }
}

/* groupbasic背景: icon_privacy（privacy-topと同様） */
#wrapper.groupbasic {
    position: relative;
}

#wrapper.groupbasic .submv {
    background-color: transparent;
}

#wrapper.groupbasic main {
    position: relative;
}

#wrapper.groupbasic main::before {
    content: '';
    position: absolute;
    top: 0;
    right: -15rem;
    width: 100%;
    height: 100%;
    background-image: url(../images/common/img_group.png);
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: 50% auto;
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
}

@media screen and (max-width: 767px) {
    #wrapper.groupbasic main::before {
        background-position: 115% 5rem;
        background-size: 60% auto;
            right: -5rem;
    }
}


/* groupbasic: section下部・左に同じ画像を背景（スクロールに連動しfooterに被らない） */
section.groupbasic.set1 {
    position: relative;
}

.groupbasic-bg-bottom {
    position: absolute;
    bottom: 0;
    left: -15rem;
    width: 100%;
    height: 100%;
    min-height: 300px;
    background-image: url(../images/common/img_group.png);
    background-position: 0 10%;
    background-repeat: no-repeat;
    background-size: 50% auto;
    pointer-events: none;
    z-index: -3;
}

.groupbasic-nav a{
    color: #fff!important;
}
@media screen and (max-width: 767px) {
    .groupbasic-bg-bottom {
        background-size: 60% auto;
        left: -5rem;
        min-height: 100px;
        background-position: 0 10%;
    }
}

/* tvdata背景: 上部(main::before)・下部(section内) */
#wrapper.tvdata {
    position: relative;
}
#wrapper.tvdata .submv {
    background-color: transparent;
}
#wrapper.tvdata main {
    position: relative;
}
#wrapper.tvdata main::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/common/img_datapolicy.png);
    background-position: 110% 0;
    background-repeat: no-repeat;
    background-size: 40% auto;
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
}
@media screen and (max-width: 767px) {
    #wrapper.tvdata main::before {
        background-position: 135% 5rem;
        background-size: 60% auto;
    }
}
section.young.tvdata.set1,
section.tvdata.set1 {
    position: relative;
}
.tvdata-bg-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 300px;
    background-image: url(../images/common/img_datapolicy.png);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 50% auto;
    pointer-events: none;
    z-index: -3;
}
@media screen and (max-width: 767px) {
    .tvdata-bg-bottom {
        background-size: 60% auto;
    }
}

/* collection_use背景: 上部(main::before)・下部(section内) */
#wrapper.collection_use {
    position: relative;
}
#wrapper.collection_use .submv {
    background-color: transparent;
}
#wrapper.collection_use main {
    position: relative;
}
#wrapper.collection_use main::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/common/img_datalake.png);
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: 50% auto;
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
}
@media screen and (max-width: 767px) {
    #wrapper.collection_use main::before {
        background-position: 115% 10rem;
        background-size: 50% auto;
    }
}
section.young.collection_use.set1,
section.collection_use.set1 {
    position: relative;
}
.collection_use-bg-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 300px;
    background-image: url(../images/common/img_datalake.png);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 50% auto;
    pointer-events: none;
    z-index: -3;
}
@media screen and (max-width: 767px) {
    .collection_use-bg-bottom {
        background-size: 60% auto;
    }
}

/* connect（ytv Connect）背景: 上部(main::before)・下部(section内) */
#wrapper.connect {
    position: relative;
}
#wrapper.connect .submv {
    background-color: transparent;
}
#wrapper.connect main {
    position: relative;
}
#wrapper.connect main::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/common/img_connect.png);
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: 50% auto;
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
}
@media screen and (max-width: 767px) {
    #wrapper.connect main::before {
        background-position: 115% 10rem;
        background-size: 50% auto;
    }
}
section.young.connect.set1,
section.connect.set1 {
    position: relative;
}
.connect-bg-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 300px;
    background-image: url(../images/common/img_connect.png);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 50% auto;
    pointer-events: none;
    z-index: -3;
}
@media screen and (max-width: 767px) {
    .connect-bg-bottom {
        background-size: 60% auto;
    }
}
.sub_ttl_cap {
    margin-top: 0.25em;
    font-size: 0.95em;
    font-weight: 400;
    color: #333;
}

/* =====================================================================
   privacy TOP ページ
===================================================================== */

/* inner: 角丸なし・横幅90% */
.privacy-top .inner {
    width: 90%;
}

/* contents: スマホは横幅90%・角丸5rem、PCは左側のみ角丸5rem */
.privacy-top .contents {
    border-radius: 5rem;
}
@media screen and (max-width: 767px) {
    .privacy-top .contents {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}
@media screen and (min-width: 768px) {
    .privacy-top .contents {
        border-radius: 5rem 0 0 5rem;
    }
    .privacy-top .contents .inner {
        padding: calc(30 / 1560 * 100%) calc(50 / 1560 * 100%) calc(40 / 1560 * 100%) calc(30 / 1560 * 100%);
    }

}

/* お知らせセクション */
.privacy-top-news {
    border-radius: 1rem;
    padding: 3rem 2rem;
    margin-bottom: 4rem;
}
.privacy-top-news-ttl {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #2f3c5b;
}
.privacy-top-news-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.privacy-top-news-list li {
    border-bottom: 1px solid #efefef;
}
.privacy-top-news-list li:last-child {
    border-bottom: none;
}
.privacy-top-news-list li a {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 1.5rem 0;
    color: #2f3c5b;
    text-decoration: none;
    transition: opacity 0.3s;
}
.privacy-top-news-list li a:hover {
    opacity: 0.7;
}
.privacy-top-news-list .date {
    font-size: 1.4rem;
    margin-right: 1rem;
    flex-shrink: 0;
}
.privacy-top-news-list .badge {
    display: inline-block;
    background-color: #dc2201;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    margin-right: 1rem;
    border-radius: 0.2rem;
}
.privacy-top-news-list .txt {
    flex: 1;
    min-width: 0;
    font-size: 1.6rem;
}
.privacy-top-news-list .icon {
    flex-shrink: 0;
    width: 2rem;
    margin-left: 1rem;
}
.privacy-top-news-list .icon img {
    width: 100%;
    height: auto;
}

/* データの管理セクション */
.privacy-top-section-ttl {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #2f3c5b;
}
.privacy-top-datamgmt-txt {
    padding: 2rem;
}
.privacy-top-datamgmt-txt p {
    margin: 0;
    line-height: 1.8;
}

/* ytvが取り扱うパーソナルデータ カードグリッド */
.privacy-top-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}
.privacy-top-card {
    display: block;
    background-color: #fff;
    border-radius: 1rem;
    padding: 2rem;
    text-decoration: none;
    color: #2f3c5b;
    transition: box-shadow 0.3s, transform 0.3s;
}
.privacy-top-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}
.privacy-top-card-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: #efefef;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.privacy-top-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.privacy-top-card-ttl {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.5;
}

@media screen and (min-width: 768px) {
    .privacy-top-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1024px) {
    .privacy-top-card-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}

/* =====================================================================
   groupbasic ページ（ytvグループの個人情報基本方針）
===================================================================== */

/* inner/contents: TOP indexと同様の表示 */
.groupbasic .inner {
    width: 90%;
}

.groupbasic .contents {
    border-radius: 5rem;
}

@media screen and (max-width: 767px) {
    .groupbasic .contents {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (min-width: 768px) {
    .groupbasic .contents {
        border-radius: 5rem 0 0 5rem;
    }
    .groupbasic .contents .inner {
        padding: calc(90 / 1560 * 100%) calc(50 / 1560 * 100%) calc(40 / 1560 * 100%) calc(150 / 1560 * 100%);
    }
}

.groupbasic-ttl {
    font-size: 2.8rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 2rem;
    color: #2f3c5b;
}

.groupbasic-main {
    margin-bottom: 4rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.groupbasic-logo-area {
    margin-bottom: 2rem;
}

.groupbasic-logo-y {
    max-width: 15rem;
    height: auto;
}

.groupbasic-nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.groupbasic-nav a {
    display: flex;
    align-items: center;
    padding: 1.5rem 2rem;
    background-color: #2f3c5b;
    color: #fff;
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 700;
    border-radius: 0.5rem;
    transition: opacity 0.3s;
}

.groupbasic-nav a:hover {
    opacity: 0.8;
}

.tvdata-links {
    margin-top: 6rem;
}

.groupbasic-nav a::before {
    content: '≫';
    margin-right: 1rem;
    color: #fff;
}

.groupbasic-companies {
    background-color: #efefef;
    border-radius: 1rem;
    padding: 3rem 2rem;
    opacity: 0.7;
}

.groupbasic-companies-logo {
    margin-bottom: 2rem;
}

.groupbasic-companies-logo img {
    max-width: 15rem;
    height: auto;
}

.groupbasic-companies-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.groupbasic-company-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-color: #fff;
    border-radius: 1rem;
    text-decoration: none;
    color: #2f3c5b;
    transition: box-shadow 0.3s;
}

.groupbasic-company-card:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.groupbasic-company-card img {
    max-width: 12rem;
    max-height: 6rem;
    object-fit: contain;
    margin-bottom: 1rem;
}

.groupbasic-company-card span {
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
}

.logo-connect {
    width: 70%;
    margin: 1rem auto;
}

@media screen and (min-width: 768px) {
    .groupbasic-main {
        flex-direction: row;
        align-items: flex-start;
        gap: 8rem;
    }
    .groupbasic-logo-area {
        flex-shrink: 0;
        margin-left: 3rem;
        margin-bottom: 0;
    }
    .groupbasic-nav {
        flex: 1;
    }
    .groupbasic-companies-grid {
        grid-template-columns: repeat(3, 1fr);
    }
        .logo-connect {
            width: 340px;
            margin: 1rem auto 1rem 2rem;
        }
}

@media screen and (min-width: 1024px) {
    .groupbasic-companies-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}