/* ------------------------------------------------
PAGE:会社案内ページ - about -
------------------------------------------------ */

/* Vision
-----------------------------------------*/

/* h2見出し (TOP見出しと同様)-------- */
.vision__title2 {
    text-align: center;
    margin-bottom: var(--space-2xl);
    font-weight: var(--fontWeight-bold);
    line-height: var(--lineHeight-2);
    letter-spacing: var(--letterSpacing-12);

    .en {
        --min-size: 37;
        --max-size: 50;
        font-size: var(--clamp-size);
        font-family: var(--fontFamily-en);
        font-weight: var(--fontWeight-medium);
        color: var(--color-sky);
        line-height: var(--lineHeight-1);
        letter-spacing: var(--tracking-40);
    }

    .jp {
        --min-size: 14;
        --max-size: 15;
        font-size: var(--clamp-size);
        letter-spacing: var(--tracking-120);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1em;
    }

    .jp::before,
    .jp::after {
        content: "";
        display: inline-block;
        width: min(10%, 80px);
        height: 1px;
        background-color: var(--color-black);
        vertical-align: middle;
    }
}

.vision__inner {
    --min-size: 66;
    --max-size: 94;
    padding: var(--clamp-size) var(--padding-container);
    background: url(../../img/common/bg_grey.avif
) center center / 100% repeat;


    .vision__title2 {
        --min-size: 42;
        margin-bottom: clamp(20px, 3.1vw, 40px);

    }
}

.vision__copy {
    --min-size: 18;
    --max-size: 36;
    font-size: var(--clamp-size);
    font-weight: var(--fontWeight-bold);
    line-height: var(--lineHeight-160);
    letter-spacing: var(--letterSpacing-16);
    text-align: center;
    margin-bottom: var(--space-sm);
}

.vision__text {
    line-height: var(--lineHeight-160);
    text-align: center;
}

@media (width < 768px) {
    .vision__head {
        background: url(../../img/common/bg_grey-sp.avif
) center center / 100% repeat;
    }

    .top__title3 span::before {
        top: 1%;
        right: -2.5vw;
        translate: 0;
        margin: 0 auto;
        width: fit-content;
        height: min-content;
        z-index: -10;
    }

    .vision__copy {
        line-height: var(--lineHeight-180);
    }

}

/* メッセージ
-----------------------------------------*/
.message {
    line-height: var(--lineHeight-180);
}

.message__header {
    text-align: center;
    --min-size: 32;
    --max-size: 45;
    margin-bottom: var(--clamp-size);
}

.message__title {
    --min-size: 26;
    --max-size: 32;
    font-size: var(--clamp-size);
    font-weight: var(--fontWeight-bold);
    color: #4ACBD0;
    letter-spacing: 0.2em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.85em;
}

.message__title::before,
.message__title::after {
    content: "";
    display: inline-block;
    --min-size: 42;
    --max-size: 84;
    width: var(--clamp-size);
    height: 1px;
    background: #4ACBD0;
}

.message__title::after {
    margin-left: -0.1em;
}

.message__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    --min-size: 60;
    --max-size: 110;
    row-gap: var(--clamp-size);
}

.message__flex {
    gap: 4vw;
}

/* 代表取締社長のコンテンツが上に来るように調整 */
.message__flex:nth-of-type(1) {
    z-index: 10;
    position: relative;
}

.message__flex:nth-child(2) {
    flex-direction: row-reverse;
    position: relative;
}

.message__flex:nth-child(2)::before {
    content: "Message";
    display: block;
    /* グラデーションの文字 */
    background: var(--gradient-light);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: var(--fontFamily-en);
    font-weight: var(--fontWeight-semi-bold);
    --min-size: 60;
    --max-size: 173;
    font-size: var(--clamp-size);
    letter-spacing: var(--leterSpacing-0);
    line-height: var(--lineHeight-2);
    margin-right: calc(50% - 50vw);

    position: absolute;
    right: 1px;
    top: 0;
    translate: 0 -70%;
    z-index: -1;
}


/* メッセージラベル */
.message__label {
    font-family: var(--fontFamily-serif);
    font-weight: var(--fontWeight-bold);
    --min-size: 16;
    --max-size: 20;
    font-size: var(--clamp-size);
    background: var(--gradient-reverse);
    color: var(--color-white);
    padding: 10px 20px;
    line-height: var(--lineHeight-180);
}

/* メッセージ名前 */
.message__name {
    --min-size: 21;
    --max-size: 24;
    font-size: var(--clamp-size);
    font-family: var(--fontFamily-serif);
    font-weight: var(--fontWeight-medium);
    margin-top: 10px;
    margin-bottom: 1em;

    span {
        --min-size: 14;
        --max-size: 16;
        font-size: var(--clamp-size);
        margin-right: 1em;
    }
}

/* 社長・副社長の画像 */
.message__image {
    position: relative;
    flex: 4.2;
    max-width: 500px;
    max-height: 548px;
    overflow: hidden;
}

/* 下28px分透けるエフェクト再現 */
.message__image::before {
    position: absolute;
    z-index: 1;
    content: "";
    width: 102%;
    height: 28px;
    background: linear-gradient(180deg, rgb(255 255 255 / 92%) 0%, rgb(255 255 255 / 95%) 30%, rgb(255 255 255 / 98%) 70%, rgb(255 255 255 / 100%) 100%);
    bottom: -1px;
    left: -1px;
}

.message {
    /* 写真下のエフェクト分paddingを減らしています */
    padding-bottom: calc(var(--space-4xl) - var(--space-xl));
}

.message__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* メッセージテキスト部分 */
.message__content {
    flex: 5.8;
}

.message__text {
    letter-spacing: var(--letterSpacing-6);
}

@media (width < 768px) {
    .message__flex:nth-child(2)::before {
        font-size: clamp(80px, 22vw, 140px);
    }
}

/* 沿革
-----------------------------------------*/
.history {
    background: url(../../img/common/bg_grey.avif) center center / 100% repeat;
}

.history__list {
    border-top: var(--border-grey);
    border-left: var(--border-grey);
    border-right: var(--border-grey);
}

.history__item {
    border-bottom: var(--border-grey);
    display: flex;
    align-items: center;
    font-weight: var(--fontWeight-medium);
}

.history__year {
    padding: 10px;
    background: var(--color-gray-light);
    width: clamp(5em, 20vw, 13em);
    border-right: var(--border-grey);
    text-align: center;
}

.history__event {
    padding: 10px;
    flex: 1;
    line-height: var(--lineHeight-160);
    background-color: var(--color-white);
}

@media (width < 768px) {

    .history {
        background: url(../../img/common/bg_grey-sp.avif) center center / 100% repeat;
    }

    .history__year {
        text-align: center;
    }
}

/* アクセス
-----------------------------------------*/
.access__locations {
    display: grid;
    gap: 60px;
}

.location {
    gap: var(--space-4xl);
    background: #F5F5F5;
    padding: var(--space-2xl) var(--space-3xl);
}

.location__content {
    display: flex;
    flex-direction: column;
}

.location__title {
    font-size: var(--fontSize-xl);
    font-weight: bold;
    margin-bottom: 0.5em;
}

.location__info {
    width: fit-content;
}

.location__item {
    display: block;
    border-bottom: 1px solid #B4B4B4;
    padding: 1em 0;
}

.location__tel,
.location__fax {
    padding-inline: 0.5em;
}

/* GoogleMapを見る */
.location__link {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* アイコン */
.location__link::before {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background: url("../../img/common/icon_map.svg") no-repeat center center;
}

.location__map {
    flex: 1;
    max-height: 377px;
    background: #f0f0f0;
    display: flex;
}

@media (width < 768px) {
    .location {
        padding: var(--space-2xl) 5vw;
    }
}

/* 会社概要
------------------------------------------------ */
.company {
    background: var(--gradient-reverse);
}

.company__title {
    /* 文字をグラデーションにする */
    background: var(--gradient-reverse);
    display: inline-block;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: var(--fontSize-xl);
    font-weight: var(--fontWeight-bold);
    margin-bottom: 16px;
}

.company__box {
    background: white;
    padding: clamp(40px, 5vw, 52px) clamp(1px, 5vw, 96px);
}

.company__item {
    display: flex;
    gap: 16px;
    padding: 1em 0;
    border-bottom: 1px solid #DDDDDD;
}

.company__item ul {
    margin: 0;
}

.company__item ul li {
    margin-left: 0.4em;
}

.company__item dt {
    --min-size: 82;
    --max-size: 180;
    width: var(--clamp-size);
    font-weight: var(--fontWeight-bold);
    letter-spacing: var(--letterSpacing-2);
}

.company__item dd {
    line-height: var(--lineHeight-160);
    flex: 1;
}

/* 取扱製品一覧*/
.company__item--product ul li a {
    display: flex;
    align-items: center;
}

.company__item--product ul li a::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background: url("../../img/common/icon_link-out_grey.svg") no-repeat center center;
    background-size: contain;
    margin-left: 1em;
}

/* 資格取得
-----------------------------------------*/
.license__box {
    background: #f4f4f4;
    padding: var(--space-xl) clamp(1px, 5vw, 42px) var(--space-2xl);
}

.license__box:first-of-type {
    margin-bottom: 6px;
}

.license__box h3 {
    font-size: var(--fontSize-lg);
    font-weight: var(--fontWeight-bold);
    margin-bottom: 0.5em;
}