@charset "utf-8";

/*
 * File    : advertisement.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * ADVERTISEMENT
 * HOVER
 */



/* **************************************** *
 * ADVERTISEMENT
 * **************************************** */
/* LAYOUT */
body.page-template-advertisement .main-container { padding-bottom: 0; }

.advertisement__head { text-align: center; margin-bottom: 60rem; }
.advertisement__valid { display: block; margin-top: 8rem; color: #DF0000; }
.advertisement__slider { margin: 0 -16rem; overflow: visible; }
.advertisement__item { width: 316rem; margin: 0 16rem; }
.advertisement__label { cursor: pointer; -webkit-user-select: none; user-select: none; }
.advertisement__label input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; padding: 0; border: 0; }
.advertisement__thumb { position: relative; overflow: hidden; }
.advertisement__thumb:after { content: ''; position: absolute; inset: 0; border: 3rem solid var(--color-black); opacity: 0; transition: opacity .3s; }
.advertisement__thumb .jt-lazyload { padding-top: 136.7%; transition: transform .7s; }
.advertisement__content { margin-top: 16rem; }
.advertisement__name { position: relative; }
.advertisement__name:before { content: ''; position: absolute; left: 0; top: calc(var(--font-lineheight-primary-06) / 2); width: 24rem; height: 24rem; border-radius: 50%; background: var(--color-black); margin-top: -12rem; opacity: 0; }
.advertisement__name:after { content: ''; position: absolute; left: 9rem; top: 6rem; width: 4rem; height: 8rem; border-bottom: 2rem solid var(--color-white); border-right: 2rem solid var(--color-white); opacity: 0; transform: rotate(45deg); }
html.ios .advertisement__name:before { left: 1rem; }
html.ios .advertisement__name:after { left: 10rem; }
.advertisement__desc { margin-top: 4rem; color: var(--color-gray-600); }

/* FORM */
#advertisement-form .article__section { padding-bottom: 80rem; }

/* CHECKED */
.advertisement__label:has(input:checked) .advertisement__thumb:after { opacity: 1; }
.advertisement__label:has(input:checked) .advertisement__name { padding-left: 32rem; }
.advertisement__label:has(input:checked) .advertisement__name:before { opacity: 1; transform: scale(1); }
.advertisement__label:has(input:checked) .advertisement__name:after { opacity: 1; transform: scale(1) rotate(45deg); }

/* MEDIA KIT */
.media-kit.article__section { background: var(--color-gray-100); padding: 80rem 0; }
.media-kit__container { text-align: center; }
.media-kit__desc { margin-top: 24rem; }
.media-kit__list { margin-top: 36rem; display: grid; grid-template-columns: repeat(2, 240rem); gap: 16rem 32rem; justify-content: center; }
.media-kit__list > a { display: flex; align-items: center; justify-content: center; gap: 6rem; border: 2rem solid var(--color-black); padding: 8rem 18rem; border-radius: 20rem; transition: color .3s, background .3s; }
.media-kit__list > a .jt-icon { width: 12rem; }
.media-kit__list > a .jt-icon path { fill: currentColor; }
.media-kit__contact { margin-top: 60rem; }
.media-kit__contact-list { display: flex; gap: 8rem; margin-top: 24rem; justify-content: center; }
.media-kit__contact-list > a { transition: opacity .3s; }



/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) {

    /* LAYOUT */
    .advertisement__label:hover .advertisement__thumb .jt-lazyload { transform: scale(1.05); }

    /* MEDIA KIT */
    .media-kit__list > a:hover { background: var(--color-black); color: var(--color-white); }
    .media-kit__contact-list > a:hover { opacity: .8; }

}