﻿/* フォント指定 */
body {
    font-family: Hiragino Kaku Gothic ProN, Yu Gothic, YuGothic, meiryo, sans-serif
}

/* ユーティリティ */
.u-hide {
    display: none
}

@media only screen and (min-width: 769px) {
    .pcBlock {
        display:block
    }

    .spBlock {
        display: none
    }

    .pcBlock-i {
        display: inline-block
    }

    .spBlock-i {
        display: none
    }

    .pcNone {
        display: none
    }

    .spNone {
        display: block
    }

    .pcNone-i {
        display: none
    }

    .spNone-i {
        display: inline
    }
}

@media only screen and (max-width: 768px) {
    .pcBlock {
        display:none
    }

    .spBlock {
        display: block
    }

    .pcBlock-i {
        display: none
    }

    .spBlock-i {
        display: inline-block
    }

    .pcNone {
        display: block
    }

    .spNone {
        display: none
    }

    .pcNone-i {
        display: inline
    }

    .spNone-i {
        display: none
    }
}

@media only screen and (min-width: 769px) {
    .sp {
        display:none !important
    }
}

@media only screen and (max-width: 768px) {
    .pc {
        display:none !important
    }
}

/* OurChallenges各セクションごとのインナー幅 */
.c-inner {
    margin: 0 auto;
    position: relative;
}

@media only screen and (min-width: 769px) {
    .c-inner {
        max-width:1080px;
        padding: 0 20px
    }
}

@media only screen and (max-width: 768px) {
    .c-inner {
        padding:0 40px
    }
}

@media only screen and (max-width: 768px) and (max-width: 374px) {
    .c-inner {
        padding:0 20px
    }
}

/* OurChallengesタイトル部 */
.c-pageheader {
    color: #fff;
    background-color: #00a8a9
}

.c-pageheader .c-pageheader_title {
    line-height: 1
}

.c-pageheader .c-pageheader_title .c-pageheader_title_main {
    font-weight: bold
}

.c-pageheader .c-pageheader_title .c-pageheader_title_sub {
    border: 1px solid #fff
}

.c-pageheader .c-pageheader_en {
    position: relative
}

.c-pageheader .c-pageheader_en span,.c-pageheader .c-pageheader_en img {
    position: relative;
    left: 50%;
    display: block;
    width: auto;
    max-width: none;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.c-pageheader .c-pageheader_en img {
    opacity: 0
}

.c-pageheader .c-pageheader_en span {
    width: 100vw;
    background: repeat-x center bottom;
    background-size: auto 100%
}

@media only screen and (min-width: 769px) {
    .c-pageheader.-large .c-inner {
        height:274px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 0;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .c-pageheader.-large .c-pageheader_title {
        padding: 0
    }

    .c-pageheader.-large .c-pageheader_title .c-pageheader_title_main {
        font-size: 64px
    }

    .c-pageheader .c-pageheader_title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        padding: 50px 0
    }

    .c-pageheader .c-pageheader_title .c-pageheader_title_main {
        font-size: 36px
    }

    .c-pageheader .c-pageheader_title .c-pageheader_title_sub {
        margin-left: 15px;
        padding: 10px 15px;
        font-size: 16px
    }
}

@media only screen and (max-width: 768px) {
    .c-pageheader.-large .c-pageheader_title {
        padding:45px 0 85px
    }

    .c-pageheader.-large .c-pageheader_title .c-pageheader_title_main {
        font-size: 32px
    }
}

@media only screen and (max-width: 768px) and (max-width: 374px) {
    .c-pageheader.-large .c-pageheader_title .c-pageheader_title_main {
        font-size:8.55615vw
    }
}

@media only screen and (max-width: 768px) {
    .c-pageheader .c-pageheader_title {
        padding:45px 0 45px
    }

    .c-pageheader .c-pageheader_title .c-pageheader_title_main {
        font-size: 28px
    }
}

@media only screen and (max-width: 768px) and (max-width: 374px) {
    .c-pageheader .c-pageheader_title .c-pageheader_title_main {
        font-size:7.48663vw
    }
}

@media only screen and (max-width: 768px) {
    .c-pageheader .c-pageheader_title .c-pageheader_title_sub {
        display:inline-block;
        margin-top: 15px;
        padding: 7px 12px;
        font-size: 14px
    }
}

@media only screen and (max-width: 768px) and (max-width: 374px) {
    .c-pageheader .c-pageheader_title .c-pageheader_title_sub {
        font-size:3.74332vw
    }
}

/* OurChallengesメインビジュアル部 */

.c-visual {
    position: relative;
    z-index: 1
}

.c-visual .c-visual_text {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}

.c-visual .c-visual_text:before {
    position: absolute;
    display: block;
    width: 200vw;
    height: 100%;
    content: '';
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% auto;
    right: 0;
    top: 0;
    background-color: #fff
}

.c-visual .c-visual_text .c-visual_text_inner {
    position: relative;
    z-index: 2;
    background-color: #fff
}

.c-visual .c-visual_text .c-visual_text_en {
    font-weight: bold;
    line-height: 1;
    color: #00a8a9
}

.c-visual .c-visual_text .c-visual_text_catch {
    font-weight: bold;
    overflow-wrap: anywhere;
}

.c-visual .c-visual_text .c-visual_text_catch small {
    font-size: 76%
}

.c-visual .c-visual_catinfo {
    font-weight: bold;
    line-height: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.c-visual .c-visual_catinfo>* {
    font-size: inherit
}

.c-visual .c-visual_catinfo .c-visual_catinfo_title {
    color: #000;
    overflow-wrap: anywhere;
}

.c-visual .c-visual_effortinfo {
    font-weight: bold;
    line-height: 1;
    display: table;
    color: #fff;
    background-color: #00a8a9
}

.c-visual .c-visual_effortinfo>* {
    display: table-cell
}

.c-visual .c-visual_effortinfo .c-visual_effortinfo_title {
    border-left: 1px solid #fff
}

.c-visual .c-visual_photo {
    position: relative;
    z-index: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.c-visual .c-visual_photo img {
    position: relative;
    z-index: 0
}

@media only screen and (min-width: 769px) {
    .c-visual {
        margin-bottom:80px;
        padding-top: 69px;
        background-color: #00a8a9
    }

    .c-visual.-large {
        padding-top: 0
    }

    .c-visual.-large .c-visual_photo {
        margin-top: 0;
        margin-left: -60%
    }

    .c-visual.-large .c-visual_photo_inner {
        overflow: hidden
    }

    .c-visual.-noOver {
        overflow: hidden;
        margin-bottom: 50px
    }

    .c-visual.-noOver .c-visual_inner {
        display: block
    }

    .c-visual.-noOver .c-visual_text {
        position: static;
        display: block;
        min-height: inherit;
        margin-top: 50px
    }

    .c-visual.-noOver .c-visual_text:before {
        display: none
    }

    .c-visual.-noOver .c-visual_text_inner {
        background-color: transparent
    }

    .c-visual.-noOver .c-visual_photo {
        position: relative;
        z-index: 1;
        margin-left: 0
    }

    .c-visual.-noOver .c-visual_photo:before {
        position: absolute;
        display: block;
        width: 200vw;
        height: 1000%;
        content: '';
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100% auto;
        left: 50%;
        top: 50%;
        z-index: 0;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        background-color: #fff
    }

    .c-visual.-noOver .c-visual_photo:after {
        position: absolute;
        display: block;
        width: 100%;
        height: 0;
        content: '';
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100% auto;
        left: 0;
        bottom: 0;
        z-index: 2;
        height: 200px;
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.8)));
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%)
    }

    .c-visual.-noOver .c-visual_photo img {
        position: relative;
        z-index: 1;
        margin: -4.85% 0
    }

    .c-visual .c-visual_inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }

    .c-visual .c-visual_text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 60%;
        min-height: 260px
    }
}

@media only screen and (min-width: 769px) and (min-width: 768px) and (max-width: 1079px) {
    .c-visual .c-visual_text {
        min-height:0
    }
}

@media only screen and (min-width: 769px) {
    .c-visual .c-visual_text:before {
        margin-top:-80px;
        padding-top: 80px
    }

    .c-visual .c-visual_text--smallPadding:before {
        margin-top: 0
    }

    .c-visual .c-visual_text--transparent {
        width: 100%
    }

    .c-visual .c-visual_text .c-visual_text_inner {
        padding-right: 50px
    }

    .c-visual .c-visual_text .c-visual_text_en {
        padding-bottom: 15px;
        margin-top: -11px;
        font-size: 18px
    }

    .c-visual .c-visual_text .c-visual_text_catch {
        line-height: 1.6;
        font-size: 40px
    }
}

@media only screen and (min-width: 769px) and (min-width: 768px) and (max-width: 1079px) {
    .c-visual .c-visual_text .c-visual_text_catch {
        font-size:3.2vw
    }
}

@media only screen and (min-width: 769px) {
    .c-visual .c-visual_text .c-visual_text_lead {
        margin-top:20px;
        font-size: 18px
    }
}

@media only screen and (min-width: 769px) and (min-width: 768px) and (max-width: 1079px) {
    .c-visual .c-visual_text .c-visual_text_lead {
        margin-top:20px;
        font-size: 16px
    }
}

@media only screen and (min-width: 769px) {
    .c-visual .c-visual_catinfo {
        margin-bottom:20px;
        font-size: 18px
    }

    .c-visual .c-visual_catinfo .c-visual_catinfo_title {
        -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
        margin-left: 20px;
        font-size: 24px;
    }

    .c-visual .c-visual_effortinfo {
        margin-bottom: 25px;
        padding: 10px 15px;
        font-size: 18px
    }

    .c-visual .c-visual_effortinfo .c-visual_effortinfo_year {
        padding-right: 10px
    }

    .c-visual .c-visual_effortinfo .c-visual_effortinfo_title {
        padding-left: 10px
    }

    .c-visual .c-visual_photo {
        -ms-flex-item-align: end;
        align-self: flex-end;
        margin-top: -10px;
        margin-right: -160px
    }

    .c-visual .c-visual_photo.is-large {
        margin-top: -113px
    }
}

@media only screen and (min-width: 769px) and (min-width: 768px) and (max-width: 1079px) {
    .c-visual .c-visual_photo {
        margin-right:-80px
    }
}

@media only screen and (max-width: 768px) {
    .c-visual {
        margin-bottom:30px
    }

    .c-visual.-large .c-visual_text {
        padding-top: 120px
    }

    .c-visual.-large .c-visual_photo {
        z-index: 1;
        display: block;
        margin-top: -1px;
        margin-left: -40px;
        padding-left: 40px;
        background-color: #00a8a9
    }
}

@media only screen and (max-width: 768px) and (max-width: 374px) {
    .c-visual.-large .c-visual_photo {
        margin-left:-20px;
        padding-left: 20px
    }
}

@media only screen and (max-width: 768px) {
    .c-visual.-large .c-visual_photo img {
        z-index:1;
        margin-bottom: -40px
    }

    .c-visual .c-visual_text {
        margin-top: -40px;
        padding-top: 40px
    }

    .c-visual .c-visual_text .c-visual_text_en {
        padding-bottom: 10px;
        font-size: 12px
    }
}

@media only screen and (max-width: 768px) and (max-width: 374px) {
    .c-visual .c-visual_text .c-visual_text_en {
        font-size:3.20856vw
    }
}

@media only screen and (max-width: 768px) {
    .c-visual .c-visual_text .c-visual_text_catch {
        line-height:1.6;
        font-size: 22px
    }
}

@media only screen and (max-width: 768px) and (max-width: 374px) {
    .c-visual .c-visual_text .c-visual_text_catch {
        font-size:5.88235vw
    }
}

@media only screen and (max-width: 768px) {
    .c-visual .c-visual_text .c-visual_text_lead {
        margin-top:20px;
        font-size: 13px
    }
}

@media only screen and (max-width: 768px) and (max-width: 374px) {
    .c-visual .c-visual_text .c-visual_text_lead {
        font-size:3.47594vw
    }
}

@media only screen and (max-width: 768px) {
    .c-visual .c-visual_catinfo {
        margin-bottom:15px;
        font-size: 13px
    }
}

@media only screen and (max-width: 768px) and (max-width: 374px) {
    .c-visual .c-visual_catinfo {
        font-size:3.47594vw
    }
}

@media only screen and (max-width: 768px) {
    .c-visual .c-visual_catinfo .c-visual_catinfo_title {
        -ms-flex-item-align:center;
        -ms-grid-row-align: center;
        align-self: center;
        margin-left: 10px
    }

    .c-visual .c-visual_effortinfo {
        margin-bottom: 15px;
        padding: 10px 15px;
        font-size: 13px
    }
}

@media only screen and (max-width: 768px) and (max-width: 374px) {
    .c-visual .c-visual_effortinfo {
        font-size:3.47594vw
    }
}

@media only screen and (max-width: 768px) {
    .c-visual .c-visual_effortinfo .c-visual_effortinfo_year {
        padding-right:10px
    }

    .c-visual .c-visual_effortinfo .c-visual_effortinfo_title {
        padding-left: 10px
    }

    .c-visual .c-visual_photo {
        display: none;
        margin-right: -40px
    }
}

@media only screen and (max-width: 768px) and (max-width: 374px) {
    .c-visual .c-visual_photo {
        margin-right:-20px
    }
}