@charset "utf-8";

/* -------------------------------------------------------------------------
  p-home-top
  ------------------------------------------------------------------------- */
.p-home-top {
    position: relative;
    /* height: calc(100vh - var(--header-height)); */
    /* height: calc(100svh - var(--header-height)); */
    height: calc(100vh - 5rem);
    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
}

.p-home-top__bg-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--layer-bg-back);
}

.p-home-top__bg-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}

.p-home-top__bg-media::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(0, 172, 46, 0.05);
}

.p-home-top__kv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.p-home-top__logo {
    width: 22.5rem;
    filter: drop-shadow(0 0.3rem 0.6rem var(--color-green-500));

}

.p-home-top__title {
    font-size: 1.4rem;
    /*仮*/
    font-weight: 600;
    line-height: 1;
    text-shadow: 0 0.3rem 0.6rem var(--color-green-500), 0 0.3rem 0.6rem var(--color-green-500);
}

/* -------------------------------------------------------------------------
 p-sec-slogan
  ------------------------------------------------------------------------- */
.p-sec-slogan {
    height: 100vh;
    /* height: 100svh; */
    display: flex;
    align-items: center;
}

.p-sec-slogan__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.p-sec-slogan__icon {
    width: 4.5rem;
}

.p-sec-slogan__title {
    width: 100%;
}

.p-sec-slogan__desc {
    width: 100%;
}

/* -------------------------------------------------------------------------
 p-sec-service
 ------------------------------------------------------------------------- */
.p-sec-service {}

.p-sec-service__body {
    display: flex;
}

.p-sec-service__nav {
    width: 4.8rem;
    flex-shrink: 0;
}

@media screen and (min-width:744px) {
    .p-sec-service__nav {
        width: 14.5rem;
    }
}

.p-sec-service__nav {}

.p-sec-service__cont-wrapper {
    flex: 1 1 auto;
}

.p-card-service {
    padding-left: var(--layout-content-side);
}

.p-card-service__list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.p-card-service__list li {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.p-card-service__list p {
    font-size: 1.2rem;
}

/* -------------------------------------------------------------------------
 p-sec-strong
 ------------------------------------------------------------------------- */
.p-sec-strong__list {
    --gap: 5rem;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

@media screen and (min-width:744px) {
    .p-sec-strong__list {
        --gap: 4rem;
        flex-direction: row;
    }
}

@media screen and (min-width:744px) {
    .p-sec-strong__list__item {
        width: calc((100% - var(--gap) * 2) / 3);
    }
}

.p-sec-strong__title {
    margin-bottom: 1.5rem;
    letter-spacing: var(--letter-spacing-reset);
}

.p-sec-strong__desc {
    letter-spacing: var(--letter-spacing-sm);
}

/* -------------------------------------------------------------------------
 p-sec-point-of-view
 ------------------------------------------------------------------------- */
.p-sec-point-of-view__header p {
    letter-spacing: var(--letter-spacing-sm);
}

.p-sec-point-of-view__list {
    --gap: 5rem;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

@media screen and (min-width:744px) {
    .p-sec-point-of-view__list {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.p-sec-point-of-view__list>li {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media screen and (min-width:744px) {
    .p-sec-point-of-view__list>li {
        width: calc((100% - var(--gap)) / 2);



    }
}

.p-sec-point-of-view__check {
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-sm);

    padding: 0.5rem;
    background-color: var(--color-white);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;

    position: relative;
}

.p-sec-point-of-view__check::before {
    --icon-size: 1.6rem;
    content: "";
    display: block;
    width: var(--icon-size);
    height: var(--icon-size);
    background-image: url(../images/icon_check-mark.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    position: absolute;
    top: 1rem;
    left: 1rem;
}

.p-sec-point-of-view__check--col3 {
    aspect-ratio: 1 / 1;
}

@media screen and (min-width:744px) {
    .p-sec-point-of-view__check--col3 {
        aspect-ratio: 10 / 7;
    }
}

.p-sec-point-of-view__check--col2-4 {
    aspect-ratio: 2 / 1;
}

@media screen and (min-width:744px) {
    .p-sec-point-of-view__check--col2-4 {
        aspect-ratio: 1 / 1;
    }
}

.p-sec-point-of-view__check p {
    font-size: 1.2rem;
}

/* -------------------------------------------------------------------------
 p-sec-qa
 ------------------------------------------------------------------------- */
.p-sec-qa {}

.p-qa__list {
    --layout-space-v: 2.5rem;
    --layout-space-left: var(--layout-content-side);
    --layout-space-right: var(--layout-content-side);
    --gap-element: 0.5rem;
    --icon-size: 1.5rem;
    --layout-space-right--answer: calc(var(--layout-space-right) + var(--gap-element) + var(--icon-size));
}

@media screen and (min-width: 744px) {
    .p-qa__list {
        /* --layout-space-left: 5rem;
        --layout-space-right: 3rem; */
    }
}

.p-qa__item {
    position: relative;
}

.p-qa__item::before,
.p-qa__item::after {
    content: "";
    display: block;
    width: 100%;
    height: 0.1rem;
    background-color: currentColor;

    position: absolute;
    left: 0;
}

.p-qa__item::before {
    top: 0;
}

.p-qa__item::after {
    bottom: 0;
}

.p-qa__item+.p-qa__item::before {
    visibility: hidden;
}

/* animation */
.p-qa__item::before,
.p-qa__item::after {
    transform-origin: left top;
    transform: scaleX(0.618);
    transition: transform var(--duration-slow) var(--ease-out);
}

.js-ob-animation.p-qa__item.is-animation::before,
.js-ob-animation.p-qa__item.is-animation::after {
    transform: scaleX(1);
}

@media screen and (min-width:1024px) {

    .p-qa__item::before,
    .p-qa__item::after {
        transition-duration: 2.05s;
    }
}

/* -----------------------------------
  質問エリア（ボタン）
------------------------------------ */

.p-qa__head {
    font-size: 1em;
}

.p-qa__button {
    width: 100%;
    display: flex;
    align-items: center;
    /* 上下中央 */
    justify-content: space-between;
    gap: var(--gap-element);

    padding-top: var(--layout-space-v);
    padding-right: var(--layout-space-right);
    padding-bottom: var(--layout-space-v);
    padding-left: var(--layout-space-left);
    cursor: pointer;
}



/* 「Q」 */
.p-qa__icon-q {
    align-self: baseline;
}

.p-qa__title {
    flex: 1;
    /* 余白を埋める */
}

/* -----------------------------------
   +, - アイコン
 ------------------------------------ */
.p-qa__icon-arrow {
    position: relative;
    display: block;
    width: var(--icon-size);
    /* 少し大きさを調整 */
    height: var(--icon-size);
    transition: opacity 0.3s var(--ease-out);
}

@media screen and (min-width:1024px) {
    .p-qa__icon-arrow:hover {
        opacity: 0.5;
    }
}

.p-qa__icon-arrow::before,
.p-qa__icon-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 中央配置 */
    background-color: var(--color-white);

    transition:
        transform var(--duration-base) var(--ease-out),
        opacity var(--duration-base) var(--ease-out);
}

.p-qa__icon-arrow::before {
    width: 100%;
    height: 0.2rem;
    /* 線の太さ */
}

.p-qa__icon-arrow::after {
    width: 0.2rem;
    /* 線の太さ */
    height: 100%;
}

.p-qa__button[aria-expanded="true"] .p-qa__icon-arrow::after {
    /* 縦棒を90度回転させて横棒に重ねる（または透明にする） */
    /* ここでは「回転しながら消える」演出にしています */
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.p-qa__body {
    display: grid;
    grid-template-rows: 0fr;
    /* 閉じた状態：高さ0 */
    transition:
        grid-template-rows var(--duration-fast) var(--ease-out),
        padding var(--duration-fast) var(--ease-out);
    overflow: hidden;
}

.p-qa__body[aria-hidden="false"] {
    grid-template-rows: 1fr;
    /* 中身の高さに合わせて自動で開く */
    padding-bottom: var(--layout-space-v);
}

.p-qa__body-inner {
    min-height: 0;
    /* gridのバグ回避用 */
    display: flex;
    gap: var(--gap-element);
    /* ここにパディングをつけるとアニメーションがカクつくので、
     パディングは .p-qa__body 側で開閉時に制御するか、マージンで調整する */
    /* Qの左padding */
    margin-left: var(--layout-space-left);

    /* //Qの右padding+アイコン幅+アイコンとテキストの距離 */
    margin-right: var(--layout-space-right--answer);
    line-height: var(--line-height-snug);
}

/* -------------------------------------------------------------------------
  p-sec-company
  ------------------------------------------------------------------------- */
.p-company-info {
    --tile-gap-size: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: var(--tile-gap-size);
}

@media screen and (min-width:744px) {
    .p-company-info {
        --tile-gap-size: 0.8rem;
    }

}

.p-company-info__row {
    display: flex;
    gap: var(--tile-gap-size);
}

.p-company-info__row dt,
.p-company-info__row dd {
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-reset);
    padding: 1.2rem 0.8rem;
}

@media screen and (min-width:744px) {

    .p-company-info__row dt,
    .p-company-info__row dd {
        padding: 2.1rem 3.2rem;
    }
}

.p-company-info__row dt {
    color: var(--color-white);
    background-color: var(--color-green-400);

    width: 30%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.p-company-info__row dd {
    background-color: var(--color-white);
    flex-grow: 1;
}

.p-company-info ul>li+li {
    margin-top: 1.5rem;

}