/*
Theme Name: Lightning Child
Theme URI:
Template: lightning
Description:
Author:
Tags:
Version: 0.6.1
*/

@charset 'UTF-8';

/*
COLORS
================================================ */
:root {
    /* Color */
    --white: #fff;
    --black: #333;
    --purple: #AA75E3;
    --deep-purple: #8621A8;
    --bg-purple: #F6F3FF;
    --deep-blue: #333366;
    --light-grey: #E9E9EF;
    --tr-grey: #f7f7f7;


    /* Font/Space Size */
    --font-sm: 0.9rem;
    --font-md: 1rem;
    --font-lg: 1.25rem;
    --font-xl: 1.625rem;
    --font-xxl: 2.0rem;
    --font-xxxl: 3.25rem;

    --main-font: "Noto Sans JP", sans-serif;
    --en-font: "Roboto", sans-serif;
    --serif-font: "Noto Serif JP", serif;
}

.noto_serif_jp {
    font-family: var(--serif-font);
    letter-spacing: 4px;
}

.Roboto_en {
    font-family: var(--en-font);
    font-weight: 900;
}

/*
pagetop button
================================================ */
.page_top_btn {
  background-color: #8621a8ed;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .8), 0 0 0 2px #8621a8ed;
}

/* デフォルトで非表示 */
.grecaptcha-badge {
    display: none !important;
}

/* 問い合わせページのみ表示 */
.page-id-71 .grecaptcha-badge {
    display: block !important;
    bottom: 80px !important;
}

/*
home
================================================ */

body {
    color: var(--black);
    font-family: var(--main-font);
}

.home h1 {
    font-size: var(--font-xxxl);
    font-weight: 900;
    margin: 0 0 1.5rem;
    border: none;
    padding: 0;
}

.home h3 {
    font-size: var(--font-xl);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.home p {
    font-size: var(--font-md);
    line-height: 1.6;
    letter-spacing: 0.1em;

}

.home .en-title {
    font-family: var(--en-font);
    color: var(--purple);
    margin-bottom: 0;
    display: inline-block;
}

/* 中央寄せ共通コンテナ */
.home main .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 20px;
}

.home main .section {
    margin-top: 6rem;
}
.home .section-bg-purple {
    background-color: var(--bg-purple);
}

.home .section-title-area {
    text-align: center;
    margin-bottom: 50px;
}

.home .btn-area-center {
    text-align: center;
    margin-top: 40px;
}

/* button
================================================ */
.home .btn-purple {
    display: inline-block;
    background-color: var(--deep-purple);
    color: var(--white);
    padding: 12px 40px;
    font-size: var(--font-sm);
    text-decoration: none;
    transition: 0.3s ease;
}

.home .btn-purple:hover {
    transform: scale(1.1, 1.1);
}


.home .btn-outline {
    display: inline-block;
    font-size: var(--font-sm);
    padding: 10px 30px;
    margin-top: 1rem;
    border: 1px solid var(--deep-purple);
    background-color: transparent;
    color: var(--deep-purple);
    text-decoration: none;
    transition: 0.3s;
}

.home .btn-outline:hover {
    background-color: var(--deep-purple);
    color: var(--white);
}

.home .text-link-purple {
    color: var(--purple);
    font-size: var(--font-sm);
    transition: 0.3s;
}

.home .text-link-purple:hover {
    color: var(--deep-purple);
    text-decoration: none;
}

/*news-sub
================================================ */
.home .news-sub {
    font-size: var(--font-md);
    background-color: var(--white);
    padding: 10px 20px;
    position: relative;
    z-index: 0;
    top: -3em;
    max-width: 880px;
    width: 80%;
    margin: 0 auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: grid;
    gap: 20px;
    grid-template-columns: 0.3fr 1fr;
}

.home .news-sub-text {
    grid-column: 1 / 2;
    text-align: center;
}

.home .news-sub-text p {
    font-weight: 700;
    font-size: var(--font-lg);
    margin: 0;
}

.home .news-sub-text a {
    font-size: var(--font-sm);
    margin: 8px 0;
    padding: 5px 28px;
}

/*投稿ループ表示*/
.home .news-sub-list {
    display: grid;
    grid-template-columns: 0.4fr 0.3fr 1.4fr;
    align-items: center;
    padding: 4px 0px;
    background: linear-gradient(to right, rgba(0, 0, 0, .1)) no-repeat;
    background-size: 100% 1px;
    background-position: center;
}
.home .post-date {
    grid-column: 1 / 2;
}

.home .post-title {
    grid-column: 2 / 3;
}

.home .news-sub-list h4 {
    font-size: var(--font-md);
    margin: 0;
    padding-left: 1.2rem;
}

.home .post-categories {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.home .post-categories li {
    margin: 0;
}

.home .post-categories a {
    background-color: var(--deep-purple);
    color: var(--white);
    padding: 0px 20px;
    border-radius: 4px;
    display: inline-block;
    font-size: 0.9em;
    text-decoration: none;
}
.home .post-categories a:hover {
    text-decoration: none;

}

.home .post-title {
    grid-column: 3 / 4;
    margin: 0;
}

.home .news-sub-list .post-title a {
    color:  var(--black);
    

}.home .news-sub-list .post-title a:hover {
    color: var(--deep-purple);
}

/*bn
================================================ */
.home .top-bn-title h1 {
    font-size: clamp(22px, 6vw, 58px)!important;
}

.top-bn-subtitle h4 {
    font-size: clamp(18px, 2vw, 22px)!important;
}

.top-bn-p p {
    font-size: clamp(10px, 2vw, 18px)!important;
}


/*message
================================================ */
.home .message p {
    text-align: center;
    font-size: var(--font-xl);
    font-family: var(--serif-font);
    letter-spacing: 0.1rem;
    line-height: 1.7;
}

/*company
================================================ */

.home .company {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 0.5fr 1.5fr 1fr;
}

.home .company-img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    grid-column: span 4;
}

.home .company-text {
    grid-column: 6 / span 1;
}

/*business
================================================ */

.home .business {
    display: grid;
    grid-template-columns: 1fr 1.5fr 0.5fr 1fr 1fr 1fr 1fr;
}
.home .business-img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    grid-column: 4 / span 4;
}
.home .business-text {
    grid-column: 2 ;
}




/*development
================================================ */
.home .card-list {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}
.home .card-item {
    flex: 1;
    max-width: 340px;
}

.home .card {
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.home .card-image {
    width: 100%;
    height: 200px;
}

.home .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home .card-content {
    padding: 20px 24px 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.home .card-title {
    font-size: var(--font-lg);
    font-weight: 700;
    margin: 0 0 12px;
}

.home .card-text {
    font-size: var(--font-md);
    color: #555;
    margin: 0 0 20px;
    flex-grow: 1;
}

.home .card-link-container {
    text-align: right;
}

/*news
================================================ */
.home .news-main .container {
    max-width: 880px;
    margin: 0 auto;
}

.home .news-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid rgba(0, 0, 0, .1);
    padding-top: 1.7rem;
}

.home .news-list .post-date {
    grid-column: 1 / 2;
}

.home .news-list .post-categories {
    grid-column: 2 / 3;
    text-align: right;
}

.home .news-list .post-title {
    grid-column: 1 / 3;
    font-weight: 700;
    margin: 0.5rem 0;
}

.home .news-list .post-excerpt {
    grid-column: 1 / 3;
    color: var(--black);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    margin-bottom: 1.8rem;
}

.home .news-list .post-excerpt p {
    font-size: var(--font-sm);
    margin-bottom: 1.8rem;
}

.home .news-list .post-title a {
    color: var(--black);
}

.home .news-list .post-title a:hover {
    color: var(--deep-purple);
    text-decoration: none;
}

/*contact
================================================ */
.home .contact .btn-purple {
    border-radius: 10px;
    width: 60%;
}

.home .tel-num h2 {
    margin-bottom: 0px;
}


/*header
================================================ */
header .gMenu_description {
    color: var(--deep-purple);
    font-weight: 700;
    font-style: italic;
    font-size: var(--font-sm);
}

.navbar-header h1 {
    margin: 0;
}


/*footer
================================================ */
.home footer.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 20px;
}

.siteFooter {
    background-color: var(--white);
}

.footer-inner {
    padding: 4rem 0;
    display: grid;
    grid-template-columns: 0.7fr 1fr 0.7fr 0.7fr;
}

.footer-inner h4 {
    font-size: var(--font-lg);
    font-weight: 700;
    margin: 8px 0;
}

.footer-inner p {
    font-size: var(--font-sm);
}

.footer-address {
    padding-left: 2em;
}

.footer-contact a {
    text-decoration: none;
}

.footer-contact img {
    width: 100px;
    height: auto;
}

.footer-con-btn {
    background-color: var(--deep-purple);
    color: var(--white);
    font-size: var(--font-sm);
    padding: 0.2rem 1rem;
    border-radius: 4px;
}

.footer-con-btn:hover {
    background-color: var(--deep-purple);
    color: var(--white);
    text-decoration: none;
}

.footer-nav {
    margin-right: 4em;
    border-right: 1px solid rgba(0, 0, 0, .1);
    margin-right: 3em;
    padding-left: 1em;
}

.footer-nav a,
.mobile-privacypolicy a {
    color: var(--black);
    transition: 0.3s;
}

.footer-nav a:hover,
.mobile-privacypolicy a:hover {
    color: var(--deep-purple);
    text-decoration: none;
}

.footer-nav ul,
.mobile-privacypolicy ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    font-size: var(--font-sm);
}

.footer-nav li,
.mobile-privacypolicy li {
    margin-bottom: 0;
}

.footer-nav a.parent,
.mobile-privacypolicy a.parent {
    font-weight: 700;
    margin-top: 1rem;
    display: inline-block;
}

.footer-community img {
    width: 140px;
}

.footer-community-inner {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top:  1px solid rgba(0, 0, 0, .1);
}

.siteFooter .copySection p {
    font-size: var(--font-sm);
}

.mobile-privacypolicy {
    display: none;
}

/* media
================================================ */

/* 576px以下 */
@media (max-width: 575px) {
    .home main .company {
        margin-top: 0;
    }
    .footer-inner {
        display: block;
        padding: 4em 2em;
    }
    .footer-logo {
        padding-left:  2rem;
    }
    .footer-address {
        padding-left:  2rem;
        margin-top: 2em;
    }
    .footer-community img {
        height: 4em;
    }
    .footer-community {
        margin-top: 4em;
        border-top: 1px solid rgba(0, 0, 0, .1);
        margin: 1rem 0;
        padding: 1rem 0;
        border-left: none;
    }
    .home .card-list {
        flex-direction: column;
        align-items: center;
        gap: 20px;                
    }
    .home .card-item {
        flex: none;
        width: 100%;
        max-width: 340px;
        padding-inline: 12px;
    }
    .home .card-image {
        height: 180px;
    }
    .home .message p {
        font-size: clamp(var(--font-md), 2vw, var(--font-xl));
    }
    .home h1 {
        font-size: clamp(3rem, 2vw, var(--font-xxxl));
    }
    .top-bn-p-padding p {
        padding-left: 10px!important;
    } 

}

/* 768px以下 */
@media (max-width: 768px) {
    .home .news-sub {
        display: none;
    }
    .home .company {
        display: block;
    }
    .home .company-img {
        padding-right: 5em;
        height: 70%;
    }
    .home .company-text {
        padding: 2em 5em;
    }
    .home .business-img {
        padding-left: 5em;
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    .home .business-text {
        padding: 2em 5em;
    }
    .home .business {
        grid-template-columns: 1fr;
    }
    .home .business-img {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    .home .business-text {
        grid-column: 1;   
        grid-row: 2;     
    }
    .footer-community {
        padding-left: 2rem;
    }
}


/* 921px以下 */
@media (max-width: 921px) {
    .home .post-categories {
        display: none;
    }
    .home .news-sub-list {
        grid-template-columns: 0.4fr 1.4fr;
    }
    .home .post-title {
        grid-column: 2 / 3;
    }
    .mobile-privacypolicy {
        display: inline;
    }
    .footer-inner {
        grid-template-columns: 0.7fr 1fr 0.7fr;
    }
    .footer-nav {
        display: none;
    }
}

/* 768px以上 */
@media (min-width: 768px) {
    .footer-nav {
        margin-right: 2em;
    }
    .footer-address {
        padding: 0 2em;
    }
    .page .entry-full {
        padding: 0 3em;
    }
}


/* 固定ページ全体
================================================ */

.page h1.page-header_pageTitle,
.archive h1.page-header_pageTitle,
.single .page-header_pageTitle {
    font-size: var(--font-xxl);
    font-weight: 900;
    text-align: left;
    margin: 1.2em 0;
}

.page-header {
    color: var(--black);
    background-color :#ffffff;
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(249, 238, 255, 0.2)),url('images/bg-midashi.svg');
    background-repeat: repeat;
    background-size: 440px auto;
    background-attachment: fixed;
}


.breadSection {
    border-bottom: none;
}

.page h3 {
    font-size: var(--font-xl);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.wp-block-table table :where(tr>*:first-child) {
    background-color: var(--tr-grey);
}

.wp-block-table td, .wp-block-table th {
    border-color: var(--light-grey);
    padding: 0.7em;
}

.contact_form p {
    margin: 0;
}

/* お問い合わせページ
================================================ */
.page-id-71 .btn-primary.disabled, .page-id-71 .btn-primary:disabled {
    background-color: #6b6b6b;
    border-color: #6b6b6b;
}

.page-id-71 .btn-primary.disabled, .page-id-71 .btn-primary {
    margin: 40px 0 70px 0;
}

/* 採用ページ
================================================ */
.page-id-63 .siteContent {
    padding-top: 1rem;
}


/* 開発事例子ページ限定:カラム指定
================================================ */

body:is(.page-id-49, .page-id-57, .page-id-60, .page-id-53) .wp-block-column {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: clamp(16px, 2.4vw, 35px);
} 


body:is(.page-id-49, .page-id-57, .page-id-60, .page-id-53) .wp-block-column > p:first-child:first-of-type {
    margin-bottom: 8px;
}

body:is(.page-id-49, .page-id-57, .page-id-60, .page-id-53) .column-tag {
    background-color: var(--light-grey);
    display: inline;
    padding: 3px 10px;
    font-size: var(--font-sm);
    font-weight: 700;
}