@charset "UTF-8";

/* color */

.color_green {
    color: #379e49 !important;
}

.color_yellow {
    color: #f7ba00 !important;
}

.color_blue {
    color: #0076c0 !important;
}

.btnColor_red {
    background-color: #ff0000;
}

.btnColor_green {
    background-color: #379e49;
}

.btnColor_yellow {
    background-color: #f7ba00;
}

.btnColor_blue {
    background-color: #0076c0;
}

@media screen and (max-width: 812px) {
    .pc_only {
        display: none;
    }
}

@media screen and (min-width: 813px) {
    .sp_only {
        display: none;
    }
}


/* container ：L3以下ページ共通部分*/

.container {
    width: 100%;
    padding: 0 4vw;
    margin-bottom: calc((190/750)*100vw);
}


/* L3_cover：L3ページ共通部分(ページタイトルからlead部分まで) */

.L3_cover {
    margin-top: calc((63/750)*100vw);
}

.L3_cover.under_enButton {
    display: inline-block;
    margin-top: calc((23/750)*100vw);
}

.L3_cover .cover_mainTtl {
    font-size: calc((108/750)*100vw);
    line-height: calc((110/750)*100vw);
    font-weight: 500;
    letter-spacing: .02em;
    margin-bottom: calc((-17/750)*100vw);
}

.L3_cover .cover_subTtl {
    font-size: calc((56/750)*100vw);
    margin-top: calc((50/750)*100vw);
    line-height: calc((82/750)*100vw);
    letter-spacing: .07em;
}

.L3_cover .cover_logo_wrapper {
    display: flex;
    align-items: flex-end;
    margin-top: calc((50/750)*100vw);
}

.L3_cover .cover_logo_inner {
    height: calc((50/750)*100vw);
    margin-left: calc((40/750)*100vw);
}

.L3_cover .cover_logo_uniqlo img {
    width: calc((50/750)*100vw);
}

.L3_cover .cover_ogo_gu img {
    width: calc((50/750)*100vw);
    margin-left: calc((14/750)*100vw);
}

.cover_logo_wrapper .cover_subTtl {
    margin-top: 0;
}

.L3_cover .cover_lead {
    font-size: calc((29/750)*100vw);
    font-weight: 700;
    letter-spacing: .184em;
    margin-top: calc((80/750)*100vw);
    line-height: calc((48/750)*100vw);
    text-align: justify;
}

.L3_cover .cover_lead_sub {
    font-size: calc((25/750)*100vw);
    font-weight: 700;
    letter-spacing: .08em;
    margin-top: calc((40/750)*100vw);
    line-height: calc((48/750)*100vw);
    text-align: justify;
}


/* main_container：各ページによって記載内容やレイアウトが違う箇所 */

.local_container {
    width: 100%;
    margin-top: calc((50/750)*100vw);
}


/* mainImg_container */

.mainImg_container {
    width: 100%;
}

.mainImg_container .mainImg {
    width: 100%;
}

.mainImg_container .mainImg_ttl {
    margin-top: calc((80/750)*100vw);
    font-size: calc((36/750)*100vw);
    line-height: calc((50/750)*100vw);
    letter-spacing: .063em;
}

.mainImg_container .mainImg_lead {
    margin-top: calc((50/750)*100vw);
    font-size: calc((22/750)*100vw);
    line-height: calc((36/750)*100vw);
    font-weight: 500;
}


/* subImg_container タイトルの文字サイズと上下のmarginが大きいバージョン*/

.subImg_container_large {
    width: 100%;
    margin-top: calc((50/750)*100vw);
    /* margin-top: calc((80/750)*100vw); */
}

.subImg_container_large .subImg {
    width: calc((332/750)*100vw);
    /* margin-top: calc((50/750)*100vw); */
}

.subImg_container_large .subImg_ttl {
    margin-top: calc((80/750)*100vw);
    /* margin-top: 0; */
    font-size: calc((36/750)*100vw);
    line-height: calc((50/750)*100vw);
    letter-spacing: .063em;
    font-weight: normal;
}

.subImg_container_large .small_txt {
    font-size: calc((22/750)*100vw);
}

.subImg_container_large .subImg_lead {
    margin-top: calc((50/750)*100vw);
    font-size: calc((22/750)*100vw);
    line-height: calc((36/750)*100vw);
    font-weight: 500;
}


/* subImg_container タイトルの文字サイズと上下のmarginが小さいバージョン*/

.subImg_container_small {
    width: 100%;
    margin-top: calc((50/750)*100vw);
}

.subImg_container_small .subImg {
    width: calc((332/750)*100vw);
}

.subImg_container_small .subImg_ttl {
    margin-top: calc((30/750)*100vw);
    font-size: calc((30/750)*100vw);
    line-height: calc((48/750)*100vw);
    letter-spacing: .03em;
}

.subImg_container_small .subImg_lead {
    margin-top: calc((22/750)*100vw);
    font-size: calc((22/750)*100vw);
    line-height: calc((36/750)*100vw);
    font-weight: 500;
}


/* article_container */

.article_container {
    margin-top: calc((80/750)*100vw);
}

.article_list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.article_container .article_wrap {
    margin-top: calc((50/750)*100vw);
    list-style: none;
}

@media screen and (max-width: 812px) {
    .article_list {
        justify-content: space-between;
    }
    .article_container .article_wrap {
        margin-right: 0;
        width: calc((332/690)*100%);
    }
}

.article_container .article_wrap:nth-child(even) {
    margin-right: 0;
}

.article_container .article_wrap:nth-child(-n+2) {
    margin-top: 0;
}

.article_container .article_img {
    width: 100%;
    height: auto;
}

.article_container .article_mainTtl {
    font-size: calc((30/750)*100vw);
    line-height: calc((36/750)*100vw);
    letter-spacing: 0.03em;
    margin-top: calc((30/750)*100vw);
    font-weight: normal;
}

.article_container .article_subTtl {
    font-size: calc((22/750)*100vw);
    line-height: calc((30/750)*100vw);
    letter-spacing: 0.053em;
    font-weight: 600;
    margin-top: calc((22/750)*100vw);
}

.article_container .article_lead {
    font-size: calc((20/750)*100vw);
    line-height: calc((34/750)*100vw);
    letter-spacing: .098em;
    margin-top: calc((22/750)*100vw);
}


/* contentsLink*/

.contentsLink {
    width: 100%;
    height: calc((71/750)*100vw);
    margin-top: calc((50/750)*100vw);
}

.contentsLink .contentsLink_btn {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
}

.contentsLink .contentsLink_txt {
    color: #fff;
    font-size: calc((24/750)*100vw);
    letter-spacing: .110em;
    font-weight: 600;
    line-height: calc((30/750)*100vw);
    margin: auto 0;
}


/* 右側のマークが四角と矢印 */

.contentsLink .arrow_transition {
    width: calc((21/750)*100vw);
    margin: auto 0;
    margin-left: calc((19/750)*100vw);
}


/*右側のマークが四角と矢印*/

.contentsLink .arrow_right {
    position: relative;
}

.contentsLink .arrow_right::after {
    content: "";
    position: absolute;
    top: 20%;
    right: calc((-24/750)*100vw);
    width: calc((18/750)*100vw);
    height: calc((18/750)*100vw);
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg);
}

.br_only_sp {
    display: block;
}

.br_only_pc {
    display: none;
}

@media screen and (max-width: 450px) {
    .contentsLink .arrow_right::after {
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
    }
}


/* 以下PCレイアウト */

@media screen and (min-width: 813px) {
    /* container */
    .container {
        max-width: 1226px;
        padding: 0 25px;
        margin-bottom: 152px;
    }
    /* L3_cover：L3ページ共通部分(ページタイトルからlead部分まで) */
    .L3_cover {
        margin-top: 69px;
    }
    .L3_cover.under_enButton {
        margin-top: 69px;
    }
    .L3_cover .cover_mainTtl {
        display: block;
        font-size: 130px;
        line-height: 133px;
        letter-spacing: .021em;
        margin-bottom: -21px;
    }
    .L3_cover .cover_subTtl {
        font-size: 65px;
        margin-top: 64px;
        line-height: 83px;
        letter-spacing: .045em;
    }
    .L3_cover .cover_logo_wrapper {
        margin-top: 64px;
        align-items: flex-end;
    }
    .L3_cover .cover_logo_inner {
        height: 70px;
        margin-top: -15px;
        margin-bottom: 0;
        margin-left: 40px;
    }
    .L3_cover .cover_logo_uniqlo img {
        width: 70px;
    }
    .L3_cover .cover_ogo_gu img {
        width: 70px;
        margin-left: 26.26px;
    }
    .cover_logo_wrapper .cover_subTtl {
        margin-top: 0;
    }
    .L3_cover .cover_lead {
        font-size: 30px;
        font-weight: 700;
        letter-spacing: .05em;
        margin-top: 90px;
        line-height: 55px;
    }
    .L3_cover .cover_lead_sub {
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0.05em;
        margin-top: 30px;
        line-height: 35px;
    }
    /* main_container：各ページによって記載内容やレイアウトが違う箇所 */
    .local_container {
        margin-top: 64px;
    }
    .mainImg_container .mainImg {
        width: calc((576/1176)*100%);
    }
    .mainImg_container .mainImg_ttl {
        margin-top: 110px;
        font-size: 52px;
        line-height: 75px;
        letter-spacing: .138em;
    }
    .mainImg_container .mainImg_lead {
        margin-top: 41px;
        font-size: 23px;
        line-height: 45px;
        letter-spacing: .095em;
    }
    /* subImg_container タイトルの文字サイズと上下のmarginが大きいバージョン*/
    .subImg_container_large {
        margin-top: 64px;
    }
    .subImg_container_large .subImg {
        width: calc((355/1176)*100%);
    }
    .subImg_container_large .subImg_ttl {
        margin-top: 110px;
        font-size: 52px;
        line-height: 75px;
        letter-spacing: .138em;
    }
    .subImg_container_large .subImg_lead {
        margin-top: 41px;
        font-size: 23px;
        line-height: 45px;
        letter-spacing: .095em;
    }
    .subImg_container_large .small_txt {
        font-size: 38px;
    }
    /* subImg_container タイトルの文字サイズと上下のmarginが小さいバージョン*/
    .subImg_container_small {
        margin-top: 64px;
        display: flex;
        flex-direction: row;
    }
    .subImg_container_small .subImg_wrap {
        width: calc((355/1176)*100%);
        margin-right: calc((55/1176)*100%);
    }
    .subImg_container_small .subImg {
        width: 100%;
    }
    .subImg_container_small .subImg_cnt {
        width: calc((751/1176)*100%);
    }
    .subImg_container_small .subImg_ttl {
        margin-top: 0;
        font-size: 37px;
        line-height: 60px;
        letter-spacing: .118em;
    }
    .subImg_container_small .subImg_lead {
        margin-top: 29px;
        font-size: 18px;
        line-height: 30px;
        letter-spacing: .150em;
        font-weight: 500;
    }
    /* article_container */
    .article_container {
        margin-top: 64px;
    }
    .article_container .article_wrap {
        margin-top: 90px;
        margin-right: calc((55.5/1176)*100%);
        width: calc((1/3)*(100% - ((55.5/1176)*100%)*2));
    }
    .article_container .article_wrap:nth-child(even) {
        margin-right: auto;
    }
    .article_container .article_wrap:nth-child(3n) {
        margin-right: 0;
    }
    .article_container .article_wrap:nth-child(-n+3) {
        margin-top: 0;
    }
    .article_container .article_mainTtl {
        font-size: 31px;
        line-height: 40px;
        letter-spacing: .039em;
        margin-top: 29px;
    }
    .article_container .article_subTtl {
        font-size: 23px;
        line-height: 32px;
        letter-spacing: 0.060em;
        font-weight: 600;
        margin-top: 18px;
    }
    .article_container .article_lead {
        font-size: 18px;
        line-height: 30px;
        letter-spacing: .078em;
        margin-top: 15px;
    }
    /* contentsLink*/
    .contentsLink_area {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
    .contentsLink {
        width: calc((561/1176)*100%);
        height: calc((60/1176)*100vw);
        max-height: 60px;
        margin-top: 64px;
    }
    .contentsLink_area .contentsLink:nth-child(2n) {
        margin-left: calc((52/1176)*100%);
    }
    .contentsLink .contentsLink_btn {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
    }
    .contentsLink .contentsLink_txt {
        font-size: calc((22/1226)*100vw);
        line-height: calc((19/1226)*100vw);
        letter-spacing: .068em;
        font-weight: 600;
        margin: auto 0;
    }
    /* 右側のマークが四角と矢印 */
    .contentsLink .arrow_transition {
        width: calc((21/1226)*100vw);
        max-width: 21px;
        margin: auto 0;
        margin-left: calc((19/1226)*100vw);
    }
    /*右側のマークが矢印*/
    .contentsLink .arrow_right::after {
        top: 0;
        right: calc((-26/1226)*100vw);
        width: calc((18/1226)*100vw);
        height: calc((18/1226)*100vw);
        max-width: 18px;
        max-height: 18px;
    }
    .br_only_sp {
        display: none;
    }
    .br_only_pc {
        display: block;
    }
}

@media screen and (min-width:1226px) {
    .contentsLink .contentsLink_txt {
        font-size: 22px;
        line-height: 19px;
    }
    .contentsLink .arrow_transition {
        margin-left: 19px;
    }
    .contentsLink .arrow_right::after {
        right: -26px;
    }
}

@media all and (-ms-high-contrast: none) {
    .contentsLink_txt {
        height: 19px;
    }
    .contentsLink .arrow_transition {
        height: calc((21/750)*100vw);
    }
}

@media all and (-ms-high-contrast: none) and (min-width:813px) {
    .contentsLink_txt {
        padding-top: 5px;
    }
    .cover_subTtl {
        margin-top: 74px;
        margin-bottom: -10px;
    }
    .contentsLink .arrow_transition {
        height: calc((21/1226)*100vw);
        max-height: 21px;
    }
}