@charset "utf-8";

/*===========================================================
冒頭
===========================================================*/

.intro-wrapper {
    padding: 13rem 0 14rem;
}

.intro-inner {
    max-width: 155rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: auto;
}

.intro-area {
    max-width: 147rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
}

.intro-text-block {
    max-width: 40rem;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: flex-start;
    gap: 4rem;
    position: relative;
}

.intro-catch {
    line-height: 1em;
    letter-spacing: 0.275em;
    writing-mode: vertical-rl;
    position: relative;
    z-index: 9;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro-deco01 {
    max-width: 40rem;
    width: 100%;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
}

.intro-catch strong {
    font-size: 1.5em;
    font-weight: bold;
    font-family: var(--font-family03);
    line-height: 1em;
    letter-spacing: 0.166em;
}

.intro-catch02 {
    margin: 5rem 0 0;
}

.intro-catch03 {
    margin: 10rem 0 0;
}

.intro-img-block-left {
    max-width: 50rem;
    width: 100%;
}

.intro-img-block-right {
    max-width: 44rem;
    width: 100%;
    padding: 3rem 4rem 0 0;
    margin: 0 0 0 1rem;
    position: relative;
}

.intro-img-block-right:before {
    content: "";
    display: block;
    max-width: calc(100% - 4rem);
    width: 100%;
    height: calc(100% - 3rem);
    background: url(../../../../uploads/about_img_bg01.png) center top / cover;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -9;
}

.intro-text-area {
    margin: 6rem 0 0;
}

.intro-btn-group {
    max-width: 111rem;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3rem 5.4%;
    margin: 5rem auto 0;
}

.intro-btn {
    width: 29.72%;
}

/*===========================================================
こだわり
===========================================================*/

.concept-wrapper {
    padding: 12.4rem 0 15rem;
}

.concept-inner {
    max-width: 179rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: auto;
}

.concept-title {
    width: fit-content;
    text-align: center;
    margin: 0 15.08% 0 auto;
}

.concept-title strong {
    font-size: 1.5em;
    font-family: var(--font-family03);
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1.16em;
}

.concept-title-decoration:after {
    content: "";
    display: block;
    max-width: 37.8rem;
    width: 100%;
    height: 1rem;
    background: url(../../../../uploads/title_decoration04.png) no-repeat center / cover;
    margin: 4rem auto 0;
}

.concept-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin: -6.6rem 0 0;
}

.concept-card {
    position: relative;
}

.concept-card01 {
    max-width: 82rem;
    width: 100%;
}

.concept-card02 {
    max-width: 71.9rem;
    width: 100%;
    margin: 0 2.85% 0 auto;
}

.concept-card03 {
    max-width: 65rem;
    width: 100%;
    margin: 0 6.54% 0 auto;
}

.concept-card04 {
    max-width: 55rem;
    width: 100%;
    margin: 0 0 0 6.54%;
}

.concept-card05 {
    max-width: 52rem;
    width: 100%;
    margin: 0 0 0 auto;
}

.concept-block {
    max-width: 84rem;
    width: 48%;
    position: relative;
}

.concept-block02 {
    margin: 28.5rem 0 0;
}

.concept-block03 {
    margin: -13.8rem 0 0;
}

.concept-block04 {
    margin: 16rem 0 0;
}

.concept-block05 {
    max-width: 67.4rem;
    padding: 0 0 12rem 17.2rem;
    margin: -21.2rem 5.51% 0 auto;
}

.concept-btn {
    margin: 20rem auto 0 13.97%;
}

.concept-bg > img {
    object-fit: cover;
    width: 100%;
    height: 100% !important;
}

.concept-block-title-box {
    width: 17.1rem;
    height: 16.7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    margin: auto;
    position: absolute;
    top: -7.4rem;
    z-index: 99;
}

.concept-header {
    position: relative;
}

.concept-front {
    width: 100%;
    height: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.concept-front {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(0 0 0 / 50%);
    color: var(--white);
    padding: 9rem 1.5rem;
    transition: 0.3s;
}

.concept-card:hover .concept-front {
    opacity: 0;
    visibility: hidden;
}

.concept-front-title strong {
    font-size: 1.375em;
    font-weight: bold;
    font-family: var(--font-family03);
    letter-spacing: 0.06em;
    line-height: 1.16em;
}

.concept-body {
    width: 100%;
    height: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(28 29 86 / 80%);
    color: var(--white);
    text-shadow: 0 0.2rem 0.4rem rgb(0 0 0 / 50%);
    padding: 9rem 6rem;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 9;
}

.concept-card:hover .concept-body {
    opacity: 1;
    visibility: visible;
}

.concept-body-text {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    font-size: 1.125em;
    letter-spacing: 0.05em;
    line-height: 1.94em;
}

.concept-block05-img {
    max-width: 27.9rem;
    width: 50%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 9;
}

.concept-block-title-box01 {
    left: 9.9rem;
}

.concept-block-title-box02 {
    left: -7.5rem;
}

.concept-block-title-box03 {
    left: 0;
    right: 0;
}

.concept-block-title-box04 {
    right: -5.3rem;
}

.concept-block-title-box05 {
    right: -4rem;
}

/*===========================================================
魅力
===========================================================*/

.reason-wrapper {
    padding: 14rem 0 7.6rem;
    position: relative;
}

.reason-deco01 {
    max-width: 35rem;
    width: 100%;
    margin: auto;
    position: absolute;
    top: 27rem;
    left: 0;
}

.reason-deco02 {
    max-width: 80rem;
    width: 100%;
    position: absolute;
    top: 39.2rem;
    left: 0;
}

.reason-deco03 {
    max-width: 35rem;
    width: 100%;
    margin: auto;
    position: absolute;
    bottom: 37rem;
    right: 0;
}

.reason-deco04 {
    max-width: 80rem;
    width: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
}

.reason-inner {
    max-width: 125rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: auto;
    position: relative;
}

.reason-title-area {
    width: fit-content;
    writing-mode: vertical-rl;
    padding: 0 2rem;
    border-left: solid 0.1rem var(--primary);
    border-right: solid 0.1rem var(--primary);
    position: absolute;
    top: 0;
    right: 9.6%;
}

.reason-title {
    letter-spacing: 0.166em;
    line-height: 1.66em;
    border-left: dashed 0.1rem var(--primary);
    border-right: dashed 0.1rem var(--primary);
    padding: 0 2rem;
}

.reason-block {
    max-width: 70rem;
    width: 65%;
}

.reason-block:nth-child(even) {
    margin-left: auto;
}

.reason-area {
    display: flex;
    flex-direction: column;
    gap: 14rem;
    padding: 9rem 0 0;
}

.reason-block-header {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.reason-block-number {
    max-width: 7.4rem;
    width: 100%;
}

.reason-block-number > img {
    width: 100%;
}

.reason-block-title {
    flex: 1;
    color: #3D3125;
}

.reason-block-title strong {
    font-size: 1.33em;
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1.15em;
}

.reason-block-body {
    margin: 3rem 0 0;
}

.reason-btn {
    margin: 9rem auto 0;
}

/*===========================================================
代表ご挨拶
===========================================================*/

.greeting-wrapper {
    padding: 7.5rem 0 13rem;
}

.greeting-inner {
    max-width: 118rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: auto;
}

.greeting-frame {
    color: var(--white);
    padding: 7rem 5rem 9rem;
    position: relative;
    mask-image: url(../../../../uploads/about_shaggy_mask01.png) !important;
    mask-size: cover;
    mask-repeat: no-repeat;
}

.greeting-frame-inner {
    max-width: 95rem;
    width: 100%;
    margin: auto;
    position: relative;
}

.greeting-deco01 {
    max-width: 31.3rem;
    width: 100%;
    position: absolute;
    top: 11.6rem;
    left: 7.6rem;
}

.greeting-area {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}

.greeting-img-block {
    max-width: 40rem;
    width: 42.1%;
}

.greeting-text-block {
    max-width: 50rem;
    width: 52.63%;
    display: flex;
    justify-content: center;
}

.greeting-text-area {
    margin: 5rem 0 0;
}

.greeting-name {
    font-size: 2.5rem;
    letter-spacing: 0.06em;
    line-height: 1.16em;
    text-align: right;
    margin: 4rem 0 0;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 1920px) {


/*===========================================================

===========================================================*/



}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 1550px) {


/*===========================================================
こだわり
===========================================================*/

.concept-block-title-box01 {
    top: -11.4rem;
}

.concept-body-text {
    font-size: 1em;
}

.concept-block-title-box02 {
    left: -5.5rem;
}

.concept-title {
    margin: 0 7% 0 auto;
}

.concept-block05-img {
    bottom: -3%;
}

}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 1200px) {


/*===========================================================
こだわり
===========================================================*/

    .concept-card:hover .concept-front {
        opacity: 1;
        visibility: visible;
    }

    .concept-body {
        position: static;
        opacity: 1;
        visibility: visible;
        text-shadow: unset;
    }


}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 1024px) {

    /*===========================================================
    こだわり
    ===========================================================*/

    .concept-wrapper {
        padding: 10rem 0 10rem;
    }
    
    .concept-title {
        margin: auto;
    }
    
    .concept-area {
        margin: 0;
    }
    
    .concept-block {
        max-width: 100%;
        width: 95%;
        margin: 13rem 0 0;
    }
    
    .concept-card {
        max-width: 100%;
        width: 100%;
        margin: 0;
    }
    
    .concept-block-title-box {
        max-width: 13rem;
        height: 13rem;
        top: -6.5rem;
        left: 0;
        right: 0;
    }
    
    .concept-block-title {
        font-size: 6rem;
    }
    
    .concept-block-title-box:before {
        width: 13rem;
        height: 13rem;
    }
    
    .concept-bg {
        aspect-ratio: 3/2;
    }
    
    .concept-block:nth-child(odd) {
        margin: 13rem 0 0 auto;
    }

    .concept-block05 {
        padding: 0 0 16rem 5rem;
        
    }

    .concept-btn {
        margin: 6rem auto 0;
    }

    /* .concept-card:hover .concept-front {
        opacity: 1;
        visibility: visible;
    }

    .concept-body {
        position: static;
        opacity: 1;
        visibility: visible;
        text-shadow: unset;
    } */
    

    /*===========================================================
    魅力
    ===========================================================*/

    .reason-deco01 {
        max-width: 20rem;
        top: 8rem;
    }
    
    .reason-deco02 {
        max-width: 40rem;
        top: 45rem;
    }
    
    .reason-deco03 {
        max-width: 20rem;
        bottom: 25rem;
    }
    
    .reason-deco04 {
        max-width: 40rem;
    }
    
    .reason-block-number {
        max-width: 6rem;
        height: 6rem;
        font-size: 3rem;
    }
    
    .reason-block-title strong {
        font-size: 1.22em;
    }

} 


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 768px) {


    /*===========================================================
    冒頭
    ===========================================================*/
    
    .intro-wrapper {
        padding: 8rem 0;
    }
    
    .intro-area {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 5rem 0;
    }
    
    .intro-text-block {
        width: 100%;
        order: 1;
        gap: 2rem;
        margin: auto;
    }
    
    .intro-img-block-left {
        width: 50%;
        order: 2;
    }
    
    .intro-img-block-right {
        width: 45%;
        order: 3;
        padding: 2rem 2rem 0 0;
        margin: 7rem 0 0;
    }
    
    .intro-img-block-right:before {
        max-width: calc(100% - 2rem);
        height: calc(100% - 2rem);
    }
    
    .intro-text-area {
        margin: 4rem 0 0;
    }
    
    .intro-btn-group {
        flex-direction: column;
        gap: 2rem;
        margin: 3rem 0 0;
    }
    
    .intro-btn {
        width: 100%;
        margin: auto;
    }

    /*===========================================================
    こだわり
    ===========================================================*/

    .concept-card:hover .concept-front {
        opacity: 1;
        visibility: visible;
    }

    .concept-body {
        position: static;
        opacity: 1;
        visibility: visible;
        text-shadow: unset;
    }
    
    .concept-block:nth-child(odd) {
        margin: 13rem auto 0;
    }
    
    .concept-block {
        margin: 13rem auto 0;
    }
    
    .concept-front {
        /* color: var(--secondary); */
        /* background: 0; */
        /* padding: 0; */
        /* margin: 4rem 0 0; */
    }
    
    .concept-body {
        padding: 3rem 1.5rem;
    }
    
    .concept-block-title-box {
        top: -6rem;
    }
    
    .concept-block05 {
        padding: 0;
    }
    
    .concept-block05-img {
        position: static;
        margin: 4rem 0 0;
    }

    /*===========================================================
    魅力
    ===========================================================*/

    .reason-wrapper {
        padding: 10rem 0 0;
    }
    
    .reason-deco02 {
        top: 12rem;
    }
    
    .reason-title-area {
        padding: 0 1.5rem;
        position: static;
        margin: 0 7rem 0 auto;
    }
    
    .reason-title {
        padding: 0 1.5rem;
    }
    
    .reason-area {
        gap: 7rem;
    }
    
    .reason-block {
        max-width: 100%;
        width: 100%;
    }
    
    .reason-block-body {
        margin: 2rem 0 0;
    }
    
    .reason-btn {
        margin: 5rem auto 0;
    }

    /*===========================================================
    代表ご挨拶
    ===========================================================*/
    
    .greeting-wrapper {
        padding: 10rem 0 8rem;
    }
    
    .greeting-frame {
        padding: 5rem 3rem;
    }
    
    .greeting-deco01 {
        top: 4rem;
        left: 3rem;
    }
    
    .greeting-area {
        flex-direction: column;
    }
    
    .greeting-img-block {
        width: 100%;
    }
    
    .greeting-text-block {
        max-width: 100%;
        width: 100%;
        text-align: center;
        margin: 2rem 0 0;
    }
    
    .greeting-text-area {
        margin: 3rem 0 0;
    }
    
    .greeting-name {
        font-size: 2.2rem;
        margin: 2rem 0 0;
    }

} 


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 576px) {

    .intro-catch {
        width: 36%;
    }

    .concept-title {
        width: 70%;
    }

    .concept-block-title-box {
        max-width: 11rem;
        height: 11rem;
        top: -8rem;
    }

    .concept-block05-img {
        display: none;
    }

    /*===========================================================
    魅力
    ===========================================================*/

    .reason-title-area {
        margin: 0 auto;
    }
    
    .reason-deco02 {
        opacity: 0.5;
    }
    
    .reason-deco04 {
        opacity: 0.5;
    }



}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 414px) {


/*===========================================================

===========================================================*/



}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */