@charset "UTF-8";
/*==============================================================================
1.ページタイトル・共通タイトル
2.intro
3.キトコノの3つの強み
4.ご依頼者さまの声
5.コラム
6.ロゴマーク
7.activity
==============================================================================*/

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

	1.ページタイトル・共通タイトル

==============================================================================================================================================================
============================================================================================================================================================*/
#title{
    background-image: url(../1_img/about/title.jpg);
}
section h2{
    padding-bottom: 15px;
    text-align: center;
    font-family: var(--font-ver1);
    font-weight: var(--weight-bold);
    font-size: 3.4rem;
    background-image: url(../1_img/base/deco-wave.svg);
    background-position: center bottom;
    background-repeat: no-repeat;
}
section h2 + .title_sub{
    margin-top: 50px;
    text-align: center;
    font-weight: var(--weight-bold);
    font-size: 2.2rem;
}
@media all and (max-width: 768px){
    section h2{
        font-size: 2.2rem;
    }
    section h2 + .title_sub{
        margin-top: 35px;
        font-size: 1.8rem;
    }
}


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

	2.intro

==============================================================================================================================================================
============================================================================================================================================================*/
#intro{
    padding-top: 100px;
    padding-bottom: max(32vw, 400px);
    position: relative;
    background-image: url(../1_img/about/intro-bg-pc.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
}
section#intro h2{
    padding-bottom: 0;
    font-family: var(--font-ver1);
    font-weight: var(--weight-medium);
    font-size: 2.8rem;
    background: none;
}
#intro p{
    margin-top: 40px;
    text-align: center;
    font-size: 1.6rem;
    line-height: 2;
    font-weight: var(--weight-medium);
}
/*==============================================================================

	intro スマホ

==============================================================================*/
@media all and (max-width: 768px){
    #intro{
        padding-top: 50px;
        padding-bottom: 60vw;
        background-image: url(../1_img/about/intro-bg-sp.jpg);
    }
    section#intro h2{
        padding-bottom: 0;
        font-size: 1.7rem;
    }
    #intro p{
        margin-top: 30px;
        font-size: 1.4rem;
    }
}

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

	3.キトコノの3つの強み

==============================================================================================================================================================
============================================================================================================================================================*/
#strengths{
    padding: 120px 0 150px;
    background-color: #eeecec;
}
#strengths .strengths-list{
    margin-top: 60px;
}
/* dt */
#strengths .strengths-list dt{
    text-align: center;
}
#strengths .strengths-list dt p:nth-child(1){
    font-size: 2.2rem;
    font-weight: var(--weight-bold);
}
#strengths .strengths-list dt p:nth-child(1) span{
    color: var(--color-yellow);
}
#strengths .strengths-list dt p:nth-child(2){
    margin-top: 10px;
    font-size: 1.6rem;
    font-weight: var(--weight-medium);
}
#strengths .strengths-list dt p:nth-child(3){
    margin-top: 25px;
}
/* dd */
#strengths .strengths-list dd{
    padding: 35px 50px 35px 100px;
    display: flex;
    align-items: center;
    position: relative;
    background-color: #fff;
    border-radius: 10px;
}
#strengths .strengths-list dd + dd{
    margin-top: 40px;
}
#strengths .strengths-list dd .strengths-item-num{/* 数字 */
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translate(-50%,-50%);
    font-family: var(--font-en);
    font-size: 8.4rem;
    letter-spacing: -0.02em;
    color: var(--color-yellow);
}
#strengths .strengths-list dd .strengths-item-img{/* イラスト */
    order: 1;
    width: 178px;
}
/* テキスト */
#strengths .strengths-list dd .strengths-item-content{
    order: 2;
    padding-left: 30px;
    width: calc(100% - 178px);
}
#strengths .strengths-list dd .strengths-item-content .strengths-item-title{
    font-size: 2.2rem;
    font-weight: var(--weight-bold);
}
#strengths .strengths-list dd .strengths-item-content .strengths-item-text{
    margin-top: 15px;
    font-size: 1.4rem;
}  
#strengths .strengths-list dd .strengths-item-content .strengths-item-text em{
    background-image: linear-gradient(transparent 60%, #eedeab 60%);
}

/*============ スライダー ============*/
.strengths-img{
    margin-top: 100px;
}
/* 吹き出し */
.strengths-img .fukidashi{
    text-align: center;
}
.strengths-img .fukidashi p{
    padding:  0 30px;
    display: inline-block;
    position: relative;
    font-size: 1.8rem;
    font-family: var(--font-ver1);
}
.strengths-img .fukidashi p::before,
.strengths-img .fukidashi p::after{
    content: "";
    position: absolute;
    top: 0;
    width: 17px;
    height: 32px;
    background-size: 100% auto;
}
.strengths-img .fukidashi p::before{
    left: 0;
    background-image: url(../1_img/about/fukidashi-left.svg);
}
.strengths-img .fukidashi p::after{
    right: 0;
    background-image: url(../1_img/about/fukidashi-right.svg);
}
/* スライダーの設定 */
.strengths-img-list{
    margin-top: 35px;
    display: none;
    gap: 20px;
}
.infiniteslide_wrap .strengths-img-list{
    display: block;
}

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

	キトコノの3つの強み スマホ

==============================================================================*/
@media all and (max-width: 768px){
    #strengths{
        padding: 90px 0;
    }
    #strengths .strengths-list{
        margin-top: 40px;
    }
    /* dt */
    #strengths .strengths-list dt p:nth-child(1){
        font-size: 1.8rem;
    }
    #strengths .strengths-list dt p:nth-child(2){
        font-size: 1.4rem;
    }
    #strengths .strengths-list dt p:nth-child(3){
        margin-top: 10px;
    }
    /* dd */
    #strengths .strengths-list dd{
        padding: 35px 20px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #strengths .strengths-list dd + dd{
        margin-top: 40px;
    }
    #strengths .strengths-list dd .strengths-item-num{/* 数字 */
        top: 0;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: 5.3rem;
    }
    #strengths .strengths-list dd .strengths-item-img{/* イラスト */
        margin-top: 20px;
        order: 3;
        width: 160px;
    }
    /* テキスト */
    #strengths .strengths-list dd .strengths-item-content{
        order: 2;
        padding-left: 0px;
        width: calc(100%);
    }
    #strengths .strengths-list dd .strengths-item-content .strengths-item-title{
        font-size: 1.8rem;
        text-align: center;
    }    
    /*============ スライダー ============*/
    .strengths-img{
        margin-top: 40px;
    }
    /* 吹き出し */
    .strengths-img .fukidashi p{
        font-size: 1.4rem;
    }
    .strengths-img .fukidashi p::before,
    .strengths-img .fukidashi p::after{
        top: unset;
        bottom: 0;
        width: 17px;
        height: 32px;
    }
    /* スライダーの設定 */
    .strengths-img-list{
        margin-top: 25px;
        gap: 10px;
    }
    .infiniteslide_wrap .strengths-img-list img{
        width: 100px;
    }
}





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

	4.ご依頼者さまの声

==============================================================================================================================================================
============================================================================================================================================================*/
#voice{
    padding: 100px 0 0;
}
#voice .voice-client{
    margin-top: 70px;
    display: flex;
    align-items: center;
}
#voice .voice-client img{
    width: 450px;
}
#voice .voice-client figcaption{
    padding-left: 60px;
    width: calc(100% - 450px);
}
#voice .voice-client figcaption p:nth-child(1){
    font-size: 1.8rem;
    font-weight: var(--weight-bold);
}
#voice .voice-client figcaption p:nth-child(2){
    margin-top: 30px;
    font-size: 3rem;
    font-family: var(--font-ver1);
    font-weight: var(--weight-light);
}
#voice .voice-client figcaption p:nth-child(2) span{
    margin-left: 0.5em;
    font-size: 1.8rem;
    font-family: var(--font-base);
    font-weight: var(--weight-bold);
}
/* 吹き出し */
#voice .fukidashi{
    margin-top: 50px;
    padding: 30px 50px 40px;
    position: relative;
    border-radius: 15px;
    background: url(../1_img/base/pattern-bg.jpg);
}
#voice .fukidashi::before{
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50%;
    top: -29px;
    background: url(../1_img/base/pattern-bg.jpg);
    transform: translateX(-50%);
    clip-path: polygon(0 100%, 100% 100%, 50% 0);
}
#voice .fukidashi .fukidashi-title{
    text-align: center;
    font-size: 2.2rem;
    font-weight: var(--weight-bold);
}
#voice .fukidashi .fukidashi-content{
    margin-top: 25px;
    font-size: 1.4rem;
    font-weight: var(--weight-medium);
}
/*==============================================================================

	voice スマホ

==============================================================================*/
@media all and (max-width: 768px){
    #voice{
        padding: 70px 0 0;
    }
    #voice .voice-client{
        margin-top: 30px;
        flex-direction: column;
    }
    #voice .voice-client img{
        margin-top: 35px;
        width: 100%;
        order: 2;
    }
    #voice .voice-client figcaption{
        padding-left: 0px;
        width: calc(100%);
        text-align: center;
        order: 1;
    }
    #voice .voice-client figcaption p:nth-child(1){
        font-size: 1.4rem;
    }
    #voice .voice-client figcaption p:nth-child(2){
        margin-top: 20px;
        font-size: 2.2rem;
    }
    #voice .voice-client figcaption p:nth-child(2) span{
        margin-left: 0.5em;
        font-size: 1.6rem;
    }
    /* 吹き出し */
    #voice .fukidashi{
        margin-top: 40px;
        padding: 30px 20px;
    }
    #voice .fukidashi::before{
        width: 20px;
        height: 15px;
        top: -14px;
    }
    #voice .fukidashi .fukidashi-title{
        font-size: 1.8rem;
    }
    #voice .fukidashi .fukidashi-content{
        margin-top: 20px;
        font-size: 1.4rem;
    }
}



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

	5.コラム

==============================================================================================================================================================
============================================================================================================================================================*/
#column{
    padding: 120px 0 100px;
}
#column h2{
    padding: 0;
    background: none;
}
/* リスト */
#column .column-list{
    margin-top: 50px;
    display: none;
}
#column .column-list.slick-initialized{
    display: block;
}
#column .column-list .column-posts{
    margin-left: 10px;
    width: 250px;
    display: block;
}
#column .column-list .column-posts a{
    padding: 30px;
    display: block;
    height: 100%;
    position: relative;
    background-color: #eeecec;
}
#column .column-list .column-posts a::after {
    content:"";
    width: 30px;
    height: 30px;
    position: absolute;
    right: 0;
    bottom: 0;
    background: url(../1_img/blog/icon-dogear.svg) no-repeat left 4px top 6px / 10px auto, linear-gradient(-45deg, rgba(255, 255, 255, 1) 50%, var(--color-yellow) 50%);
}
#column .column-list .column-posts a h3{
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-base);
}
#column .column-list .column-posts a h3 span{
    font-family: var(--font-ver1);
    font-weight: var(--weight-medium);
    font-size: 1.6rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
#column .column-list .column-posts a .excerpt{
    margin-top: 10px;
    height: 95px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}
#column .btn_wrap{
    margin-top: 30px;
    text-align: center;
}
/*==============================================================================

	column スマホ

==============================================================================*/
@media all and (max-width: 768px){
    #column{
        padding: 70px 0;
    }
    #column h2{
        padding: 0;
    }
    #column h2 img{
        width: 280px;
    }
    /* 画像 */
    #column .column-img{
        width: calc(100% + 40px);
        transform: translateX(-20px);
    }
    /* リスト */
    #column .column-list{
        margin-top: 25px;
        width: calc(100% + 40px);
        padding: 0;
        transform: translateX(-20px);
    }
    #column .column-list .column-posts{
        margin-left: 10px;
        width: 200px;
        height: 200px;
    }
    #column .column-list .column-posts a{
        padding: 30px 20px;
    }
    #column .column-list .column-posts a h3{
        font-size: 1.4rem;
    }
    #column .column-list .column-posts a .excerpt{
        height: 80px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
}

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

	6.ロゴマーク

==============================================================================================================================================================
============================================================================================================================================================*/
#logomark{
    padding: 130px 0 0;
    background-color: #ebe9e9;
}
#logomark .inner-s{
    padding: 80px 70px 80px 90px;
    position: relative;
    background-color: #fff;
}
#logomark .inner-s h2{
    position: absolute;
    top: calc(80px - 0.5em);
    left: calc(90px + 233px + 90px);
    background-position: left bottom;
}
#logomark figure{
    display: flex;
    align-items: flex-end;
}
#logomark figure img {
    flex-shrink: 0;
}
#logomark figure figcaption{
    margin-top: 80px;
    padding-left: 90px;
}
#logomark figure figcaption p:nth-child(1){
    font-size: 2.2rem;
    font-weight: var(--weight-bold);
}
#logomark figure figcaption p:nth-child(2){
    margin-top: 10px;
    font-weight: var(--weight-medium);
    line-height: 1.8;
}
/*==============================================================================

	logomark スマホ

==============================================================================*/
@media all and (max-width: 768px){
    #logomark{
        padding: 90px 20px 0;
    }
    #logomark .inner-s{
        padding: 50px 20px;
    }
    #logomark .inner-s h2{
        position: static;
        background-position: center bottom;
    }
    #logomark figure{
        margin-top: 40px;
        flex-direction: column;
        align-items: center;
    }
    #logomark figure img {
        width: 110px;
        flex-shrink: 0;
    }
    #logomark figure figcaption{
        margin-top: 30px;
        padding-left: 0;
    }
    #logomark figure figcaption p:nth-child(1){
        font-size: 1.6rem;
        text-align: center;
    }
    #logomark figure figcaption p:nth-child(2){
        margin-top: 15px;
    }
}

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

	7.activity

==============================================================================================================================================================
============================================================================================================================================================*/
#activity{
    padding: 130px 0;
    background-color: #ebe9e9;
}
#activity h2{
    padding-bottom: 25px;
    background: url(../1_img/base/deco-wave.svg) no-repeat bottom center;
    text-align: center;
    font-family: var(--font-ver1);
    font-size: 3.4rem;
    font-weight: var(--weight-medium);
    position: relative;
    z-index: 1;
}
#activity .activity-mainimg{
    margin-top: -140px;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#activity .activity-list{
    margin-top: -220px;
    display: flex;
    justify-content: space-between;
}
#activity .activity-list ul li{
    padding-left: 15px;
    position: relative;
    font-weight: var(--weight-medium);
}
#activity .activity-list ul li::before{
    content:"";
    position: absolute;
    width: 8px;
    height: 8px;
    left: 0;
    top: 0.55em;
    background-color: var(--color-yellow);
    border-radius: 100%;
}
#activity .activity-slder {
    margin-top: 90px;
    gap: 0 20px;
}
.activity-slder{
    display: none;
}
.infiniteslide_wrap .activity-slder{
    display: block;
}

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

	activity スマホ

==============================================================================*/
@media all and (max-width: 768px){
    #activity{
        padding: 70px 0;
    }
    #activity h2{
        font-size: 2.2rem;
    }
    #activity .activity-mainimg{
        margin-top: -3vw;
        height: auto;
    }
    #activity .activity-list{
        margin-top: 20px;
        gap: 0 14px;
    }
    #activity .activity-list ul {
        width: calc(50% - 7px);
    }
    #activity .activity-list ul li{
        padding-left: 15px;
        position: relative;
        font-weight: var(--weight-medium);
    }
    #activity .activity-slder {
        margin-top: 60px;
        gap: 0 10px;
    }
    #activity .activity-slder img{
        width: 170px;
    }
}

footer{
    margin-top: 0;
}