@charset "utf-8";
/* =============================== 
common
================================ */


/* =============================== 
header
================================ */
.header_box{
    display: none;                          /* 詳細ページでは非表示：h1対策のため */
}

.menu_decoration {
    width: 10.5rem;
    height: 10.5rem;
    background-image: url(../images/common/piece.svg);
    background-repeat: no-repeat;
    border-radius: 40% 70% 70% 70%;
  
    position: absolute;
    top: 1.4rem;
    right: 26rem;
}

.back_button{
    color: white;
    font-size: 6.4rem;
    font-weight: var(--fontExtraBold);
    line-height: 1;
    display: inline;
}

/* レスポンシブ */
/* tablet */
@media screen and (max-width: 1370px) {
    .menu_decoration {
        right: 10rem;
    }
}

/* sp コンテンツ幅を下回る時 */
@media screen and (max-width: 764px) {
    .menu_decoration {
        width: 13.7vw;
        height: 13.7vw;

        top: 1.8vw;
        right: 14vw;
    }

    .back_button{
        font-size: clamp(2rem ,8.4vw , 6.4rem);
    }
}

/* =============================== 
main
================================ */
/* 共通 */
.unit_box{
    width: 63rem;                       /* pc */
    height: auto;
    font-size: 1.6rem;
}

.indent{
    display: block;
    text-indent: 1em;
    margin-bottom: 2rem;
}

.line_gap{
    display: block;
    content: "";
    margin-bottom: 0.8rem;
}

.contents_image{
    padding: 2rem;
    border: 0.1rem solid var(--primary-darkGreen);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.topic_h3 {
    font-size: 2.0rem;
    margin-bottom: 1rem;
    color: var(--primary-darkGreen);
}

.items_box {
    font-size: 1.8rem;
    line-height: 2;
}

.link_decoration{
    color: var(--primary-linkBlue);
    text-decoration: underline;
}

.demo{
    font-size: 1.8rem;
}

/* skill */
.icons.skill{
    margin-bottom: 4rem;
}

.items.skill {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    margin-right: 2rem;
}

.items.logo {
    width: 23.6rem;                         /* pc */
    display: flex;
    margin: 0 0 0 auto;
}

.logo_box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.logo_item {
    width: 45.8%;
    aspect-ratio: 1/1;
    display: block;
    margin-bottom: 2rem;                    /* pc */
}

.logo_item:last-child {
    margin-bottom: 0;
}
.tech_logo{
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
}

/* contact */
/* encourege */
.sns_item_row{
    display: block;
    margin-bottom: 2rem;
}

.sns_item_row:last-child{
    margin-bottom: 0;
}

.sns_link{
    vertical-align: middle;
    display: flex;
    align-items: center;
}

.sns_icon {
    display: block;
    width: 5rem;                                    /* pc */
    height: 5rem;                                   /* pc */
    margin-right: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* レスポンシブ */
/* tablet */
@media screen and (max-width: 1370px) {
    .unit_box{
        width: 48.5%;
    }

    .items.logo {
        width: 50%;
    }
}

/* sp */
@media screen and (max-width: 922px) {
    .contents_text {
        margin-bottom: 2rem;
    }

    .unit_box{
        width: 100%;
    }

    .items.logo {
        width: 18.6rem;
    }
}

/* sp コンテンツ幅を下回る時 */
@media screen and (max-width: 764px) {
    .contents_text {
        font-size: clamp(1.2rem , 2.1vw, 1.6rem);
        margin-bottom: clamp(1rem, 2.6vw , 2rem);
    }

    .demo{
        font-size: clamp(1.3rem, 2.35vw, 1.8rem);
    }
}

/* aboutページのみブレイクポイント520px:ロゴの大きさ */
@media screen and (max-width: 520px) {
    .topic_h3 {
        font-size: clamp(1.6rem, 3.85vw, 2.0rem);
    }

    .items_box {
        font-size: clamp(1.4rem , 3.46vw, 1.8rem);
    }
    .items.logo {
        min-width: 40%;
    }
}