/*
Theme Name: OLTANA-002 Child
Version: 1.0.0
Template: oltana-002
Author: CROOVER inc.
Author URI: https://croover.co.jp
*/

.ol-header {
    padding-top: clamp(25px, 2vw, 35px);
}

.ol-firstview__image::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .3);
    background-image: url(https://plusplus.moo.jp/wp-content/uploads/2024/12/bg_dot.png);
    background-size: 3px;
    z-index: 1;
}

.ol-firstview__image-inner img {
    object-position: left center;
}

.ol-firstview__image-inner img:nth-child(1) {}

.ol-firstview__title-maincopy span {
    font-weight: 600;
}

.ol-card-item {
    background-color: #FCFCFC;
    padding: 0;
}

.ol-card-item-image:not(.ol-thumbnail-original) {
    aspect-ratio: 3 / 2;
}

.ol-card-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ol-card-item-info-wrap {
    padding-bottom: clamp(20px, 2vw, 25px);
}

.ol-card-item-info,
.ol-card-item-title,
.ol-card-item-tags {
    padding: 0 clamp(20px, 2vw, 25px);
}

.ol-article__meta {
    flex-wrap: wrap;
}

.ol-card-item-tags {
    margin-top: clamp(6px, 0.0113636364rem + 0.5681818182vw, 10px);
}

.ol-tag {
    font-size: clamp(10px, 0.8125rem + 0vw, 11px);
    color: #888888;
    border: 1px solid;
    border-radius: 20px;
    padding: 3px 12px 4px;
    margin-right: 0.6em;
    letter-spacing: 0.15em;
}

.wp-block-columns {
    position: relative;
    gap: 4em;
}

@media (max-width: 781px) {
    .wp-block-columns {
        gap: 2em;
    }
}

.wp-block-columns::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 40px;
    top: 60%;
    left: 0px;
    right: 0;
    margin-inline: auto;
    transform: translateY(-50%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background-color: #0083e9;
}

@media (max-width: 781px) {
    .wp-block-columns::before {
        width: 40px;
        height: 30px;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        top: 55%;
    }
}

.wp-block-column img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 3 / 2;
}

.wp-block-image {
    margin-block: 20px;
}

.primary-color {
    color: #0083e9;
}

.ol-article__tag {
    margin-block: 0;
}

#oltanaPostTitle {
    font-size: clamp(20px, 2vw, 30px);
    margin-top: clamp(30px, 3vw, 40px);
}

@media (max-width: 781px) {
    #oltanaPostTitle {
        margin-top: clamp(20px, 3vw, 40px);
    }
}

.ol-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.wpcf7 p:last-of-type {
    max-width: 450px;
    margin-inline: auto;
}

.wpcf7 input[type="submit"] {
    -webkit-transition: color .3s ease, background .3s ease;
    background-color: #0083e9;
    border: 2px solid #0083e9;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    overflow: hidden;
    padding: 16px 20px;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: color .3s ease, background .3s ease;
    z-index: 1;
    width: 100%;
}

@media (min-width: 1729px) {
    .wpcf7 input[type="submit"] {
        font-size: 18px;
    }
}

@media screen and (min-width: 841px) {
    .wpcf7 input[type="submit"]:focus, .wpcf7 input[type="submit"]:hover {
        background: #fff;
        color: #0083e9;
        outline: 0;
    }
}

.wpcf7-form .p-form-icon {
    background: #888;
    color: #fff;
    font-size: .8em;
    margin-left: 20px;
    padding: 2px 12px 3px;
}

.wpcf7-form .p-form-icon.p-form-icon--required {
    background-color: #0083e9;
}

.page:not(.home) p {
    margin-block: 20px;
}

@media (max-width: 540px) {
    .ol-article__inner {
        padding-top: clamp(16px, -0.4545454545rem + 2.2727272727vw, 32px);
    }
}

.ol-article__inner.ol-header__thumbnail-adjust {
    padding-top: 40px;
}

.wpcf7 textarea {
    min-height: 180px;
}

.ol-content div:has(+ #olMessage) {
    padding-bottom: 0;
}

.works-images {
    display: flex;
    gap: 25px;
}

@media (max-width: 781px) {
    .works-images {
        flex-direction: column;
        gap: 15px;
    }
}

.works-images__item {
    position: relative;
    display: block;
	flex: 1;
}

.works-images__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 20px;
    font-size: clamp(15px, 1.5vw, 20px);
    font-weight: bold;
    color: #FFF;
    z-index: 1;
}

.works-images__item--before::before {
    content: 'Before';
    background-color: #555;
}

.works-images__item--after::before {
    content: 'After';
    background-color: #0083e9;
}

.works-images__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 3 / 2;
}