@charset "utf-8";

/*---------------------------------
import fonts
---------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap&subset=japanese');


/*---------------------------------
Variable
---------------------------------*/
:root{
    --color-primary: #007A63;
    --color-primary-rgb: 0, 122, 99;

    --color-secondary: #60B8A8;
    --color-secondary-rgb: 96, 184, 168;

    --color-tertiary: #2D5B52;
    --color-tertiary-rgb: 45, 91, 82;

    --color-link: #F5843C;
    --color-link-rgb: 245, 132, 60;

    --color-bk: #000;
    --color-bk-rgb: 0,0,0;

    --color-gray: #B8C4CE;

    --color-medium: #E6ECDC;

    --color-light: #F1F3EE;

    --color-wh: #fff;
    --color-wh-rgb: 255,255,255;
}


/*---------------------------------
Reset
---------------------------------*/
html {
    margin: 0;
    padding: 0;
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    width: 100%;
    height: 100%;
}
body {
    margin: 0;
    font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
    color: var(--color-bk);
    height: 100%;
    width: 100%;
    font-size: 1.6rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
div {
    box-sizing: border-box;
}
a {
    color: unset;
    font-weight: 700;
}
a:hover {
    color: unset;
}
a:visited {
    color: var(--color-link-shade);
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
ol {
    padding-left: 1.6rem;
}
img {
    max-width: 100%;
}
p {
    font-size: 1.6rem;
    margin: 0;
    font-weight: 500;
}
li {
    font-size: 1.6rem;
}


/*---------------------------------
Common
---------------------------------*/
#wrapper {
    position: relative;
    min-height: 100%;
    height: auto;
    box-sizing:border-box;
    padding-top: 70px;
}
.container {
    margin: 0 25px;
}
.image img {
    max-width: 100%;
}
.display_pc {
    display: none;
}
.display_sp {
    display: block;
}
@media (min-width: 768px) {
    #wrapper {
        padding-top: 100px;
    }
    .display_pc {
        display: block;
    }
    .display_sp {
        display: none;
    }
    .container {
        max-width: 1280px;
        padding: 0 40px;
        margin: 0 auto;
    }
    .container.-narrow {
        max-width: 880px;
    }
}


/*---------------------------------
Header Footer
---------------------------------*/
/*
Header
---------------------------------*/
.header {
    background: var(--color-wh);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    box-shadow: 0 0 20px 0 rgba(var(--color-bk-rgb) , .16 );
    height: 70px;
}
.header_inner {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 25px;
}
.header_logo {
    width: 230px;
    font-size: 0;
    transition: opacity .3s;
}
.header_logo img {
    height: 100%;
    width: auto;
    margin: 0 auto;
}
@media (min-width:  769px) {
    .header {
        height: 100px;
    }
    .header_inner {
        padding: 0 30px;
    }
    .header_logo {
        width: 284px;
    }
    .header_logo:hover {
        opacity: 0.7;
    }
}


/*
Footer
---------------------------------*/
.footer {
    background: var(--color-primary);
    padding: 10px 0;
    width: 100%;
    text-align: center;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;
    transform: translateY(100%);
    transition: .3s;
}
.footer.scroll {
    transform: translateY(0);
    box-shadow: 0 0 20px 0 rgba(var(--color-bk-rgb) , .16 );
}
a.footer_btn {
    font-weight: 700;
    display: block;
    margin: 0 25px;
    border-radius: 3px;
    color: var(--color-wh);
    text-align: center;
    text-decoration: none;
    padding: 10px;
    background: url(../img/icon_dl.svg) no-repeat left 20px top 10px;
    background-size: 22px auto;
    background-color: var(--color-link);
    color: var(--color-wh);
    font-size: 1.7rem;
    box-sizing: border-box;
    border: 1px solid var(--color-link);
}
@media (min-width: 768px) {
    a.footer_btn {
        max-width: 640px;
        margin: 0 auto;
        font-size: 3.2rem;
        background: url(../img/icon_dl.svg) no-repeat left 40px top 24px;
        background-size: 30px auto;
        background-color: var(--color-link);
        border-radius: 4px;
        padding: 16px;
        transition: background-color .3s, color .3s ,border .3s;
    }
    a.footer_btn:hover {
        background: url(../img/icon_dl_ore.svg) no-repeat left 40px top 24px;
        background-size: 30px auto;
        background-color: var(--color-wh);
        border: 1px solid var(--color-link);
        color: var(--color-link);;
    }
}


/*---------------------------------
Main
---------------------------------*/
/*
Main Visual
---------------------------------*/
.main_visual_wrap {
    position: relative;
    border-top: solid 8px var(--color-primary);
}
.main_visual {
    background: var(--color-wh);
    border-top: solid 8px var(--color-secondary);
    border-bottom: solid 8px var(--color-secondary);
}
.main_visual_inner {
    padding: 16px 0;
    margin: 0 25px;
}
.main_visual .left h1 {
    width: 200px;
    margin: 0 auto;
}
.main_visual .left .copy {
    border: solid 2px var(--color-secondary);
    padding: 12px;
    border-radius: 4px;
    text-align: center;
    margin-top: 12px;
}
.main_visual .left .copy .title {
    color: var(--color-primary);
    font-size: 2rem;
    font-weight: 700;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 6px;
    font-feature-settings: "palt";
}
.main_visual .left .copy p {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 2px solid var(--color-primary);
    color: var(--color-tertiary);
    font-size: 1.3rem;
}
.main_visual .right {
    margin-top: 16px;
}
.main_visual_btn {
    background: var(--color-primary);
    padding: 20px 0;
}
.main_visual_btn a {
    font-weight: 700;
    display: block;
    margin: 0 25px;
    border-radius: 3px;
    color: var(--color-wh);
    text-align: center;
    text-decoration: none;
    padding: 18px;
    background: url(../img/icon_dl.svg) no-repeat left 32px top 16px;
    background-size: 22px auto;
    background-color: var(--color-link);
}
@media (min-width: 768px) {
    .main_visual_wrap {
        border-width: 16px 0 0 0;
    }
    .main_visual_inner {
        display: flex;
        align-items: center;
        max-width: 1280px;
        padding: 80px 40px 64px;
        margin: 0 auto;
    }
    .main_visual .left {
        width: 50%;
    }
    .main_visual .left h1 {
        width: 380px;
    }
    .main_visual .left .copy {
        border-radius: 8px;
        padding: 24px;
    }
    .main_visual .left .copy .title {
        font-size: 3.6rem;
        padding-bottom: 12px;
    }
    .main_visual .left .copy p {
        font-size: 2.2rem;
        margin-top: 8px;
        padding-top: 16px;
    }
    .main_visual .right {
        width: 50%;
    }
    .main_visual_btn {
        padding: 48px;
    }
    .main_visual_btn a {
        max-width: 480px;
        margin: 0 auto;
        font-size: 2.4rem;
        padding: 20px;
        background: url(../img/icon_dl.svg) no-repeat left 32px top 20px;
        background-size: 30px auto;
        background-color: var(--color-link);
        border: 1px solid var(--color-link);
        transition: background-color .3s, color .3s ,border .3s;
    }
    .main_visual_btn a:hover {
        background: url(../img/icon_dl_ore.svg) no-repeat left 32px top 20px;
        background-size: 30px auto;
        background-color: var(--color-wh);
        border: 1px solid var(--color-link);
        color: var(--color-link);;
    }
}


/*
Section
---------------------------------*/
.section {
    padding: 40px 0;
}
.sec_toc {
    background: var(--color-light);
}
.sec_01,
.sec_03,
.sec_05,
.sec_07 {
    background: var(--color-medium);
}
.sec_01 {
    padding-bottom: 0;
}
.sec_02 img {
    margin: 0 auto;
}
.section_title {
    text-align: center;
    margin: 0 0 32px;
    position: relative;
    padding: 0 0 12px;
}
.section_title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 60px;
    height: 3px;
    background: var(--color-secondary);
}
.section_title h2 {
    font-size: 1.9rem;
    margin: 0;
}
@media (min-width: 768px) {
    .section {
        padding: 112px 0;
    }
    .sec_toc {
        padding: 96px 0;
    }
    .sec_01 {
        padding-bottom: 0;
    }
    .section_title {
        margin: 0 0 64px;

    }
    .section_title h2 {
        font-size: 3.2rem;
        padding-bottom: 16px;
    }

}

/*
Toc
---------------------------------*/
.toc_title {
    text-align: center;
}
.toc_title span {
    position: relative;
    font-size: 1.6rem;
    font-weight: 500;
    display: inline-block;
    padding-left: 40px;
}
.toc_title span::before {
    content: url(../img/icon_toc.svg);
    display: inline-block;
    top: 0;
    bottom: 0;
    position: absolute;
    margin: auto;
    left: 0;
}
.toc_list {
    margin-top: 16px;
}
.toc_list li + li {
    margin-top: 10px;
}
.toc_list li a {
    display: block;
    text-align: center;
    border: solid 1px var(--color-gray);
    border-radius: 2px;
    text-decoration: none;
    font-size: 1.4rem;
    padding: 17px;
    font-weight: 500;
    background: url(../img/icon_bottom.svg) no-repeat left 20px top 22px;
    background-size: 12px auto;
    background-color: var(--color-wh);
    transition: color .3s;
}
@media (min-width: 768px) {
    .toc_title span {
        font-size: 2.4rem;
    }
    .toc_title span::before {
        top: 4px;
    }
    .toc_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        max-width: 1080px;
        padding: 0 20px;
        margin: 32px auto 0;
    }
    .toc_list li + li {
        margin-top: 0;
    }
    .toc_list li:nth-of-type(-n+3) {
        width: 31.5%;
    }
    .toc_list li:nth-of-type(n+4) {
        width: 23%;
        margin-top: 32px;
    }
    .toc_list li a {
        font-size: 1.6rem;
        background: url(../img/icon_bottom.svg) no-repeat center bottom 16px;
        background-size: 12px auto;
        background-color: var(--color-wh);
        padding: 16px 16px 40px;
        height: 100%;
        border-radius: 4px;
    }
    .toc_list li a:hover {
        color: var(--color-primary);
    }
}

/*
Check list
---------------------------------*/
.check_list li {
    background: var(--color-wh);
    position: relative;
    padding: 16px 16px 16px 64px;
    font-size: 1.5rem;
    font-weight: 700;
    height: 80px;
    display: flex;
    align-items: center;
    border-radius: 2px;
    font-feature-settings: "palt";
}
.check_list li + li {
    margin-top: 16px;
}
.check_list li::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 24px;
    margin: auto;
    background: var(--color-medium);
    height: 26px;
    width: 26px;
    border-radius: 2px;
}
.check_list li::after {
    content: "";
    position: absolute;
    top: 26px;
    left: 30px;
    height: 12px;
    width: 26px;
    border-left: solid 4px var(--color-primary);
    border-bottom: solid 4px var(--color-primary);
    transform: rotate(-45deg);
}
@media (min-width: 768px) {
    .check_list {
        display: flex;
        flex-wrap: wrap;
        max-width: 1080px;
        padding: 0 20px;
        margin: 0 auto;
        justify-content: space-between;
    }
    .check_list li {
        width: calc( ( 100% - 32px ) /2 );
        border-radius: 4px;
        font-size: 2rem;
        height: 126px;
        padding: 16px 16px 16px 96px;
    }
    .check_list li + li {
        margin-top: 0;
    }
    .check_list li:nth-of-type(n+3) {
        margin-top: 32px;
    }
    .check_list li::before {
        left: 40px;
        height: 40px;
        width: 40px;
    }
    .check_list li::after {
        top: 40px;
        left: 48px;
        height: 20px;
        width: 40px;
        border-left: solid 8px var(--color-primary);
        border-bottom: solid 8px var(--color-primary);
    }
}

/*
Resolution
---------------------------------*/
.sec_resolution {
    padding: 64px 0 40px;
    background: var(--color-primary);
    text-align: center;
    color: var(--color-wh);
    margin-top: 40px;
    position: relative;
}
.sec_resolution::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 0;
    width: 72px;
    border-color: var(--color-medium) transparent transparent transparent;
    border-width: 32px 36px 0 36px;
    border-style: solid;
}
.resolution {
    display: inline-block;
    position: relative;
    font-weight: 700;
    font-size: 1.8rem;
    padding: 0 24px;
}
.resolution::before,
.resolution::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 2px;
    background: var(--color-wh);
}
.resolution::before {
    left: 0;
    transform: rotate(-20deg);
}
.resolution::after {
    right: 0;
    transform: rotate(20deg);
}
@media (min-width: 768px) {
    .sec_resolution {
        padding: 104px 0 96px;
        margin-top: 56px;
    }
    .resolution {
        font-size: 3.2rem;
    }
    .resolution::before,
    .resolution::after {
        height: 88px;
        margin: auto;
    }
}

/*
Flow
---------------------------------*/
.flow_item {
    position: relative;
}
.flow_item + .flow_item {
    margin-top: 32px;
}
.flow_item .txt h3 {
    color: var(--color-primary);
    font-size: 1.7rem;
    display: flex;
    align-items: center;
    padding: 0 0 8px;
    border-bottom: solid 1px var(--color-primary);
    margin: 0 0 16px;
}
.flow_item .txt h3 span {
    font-size: 2.8rem;
    margin-right: 12px;
    white-space: nowrap;
}
.flow_item .txt .img {
    background: var(--color-wh);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    height: 51vw;
    border-radius: 4px;
}
.flow_item .txt .img img {
    width: 54%;
}
.flow_item .txt p {
    margin: 16px 0 0;
}
.flow_item > .img {
    display: none;
}
@media (min-width: 768px) {
    .flow_item + .flow_item {
        margin-top: 56px;
    }
    .flow_item {
        display: flex;
        max-width: 1080px;
        padding: 0 20px;
        margin: 0 auto;
        justify-content: space-between;
        align-items: center;
    }
    .sec_03 .flow_item:nth-of-type(1),
    .sec_03 .flow_item:nth-of-type(3) {
        flex-direction: row-reverse;
    }
    .flow_item .txt {
        width: 46.15%;
    }
    .flow_item .txt h3 {
        font-size: 2.4rem;
        padding: 0 0 16px;
        margin: 0 0 24px;
    }
    .flow_item .txt h3 span {
        font-size: 4rem;
    }
    .flow_item .txt p {
        font-size: 2rem;
    }
    .flow_item .txt .img {
        display: none;
    }
    .flow_item > .img {
        display: block;
        background: var(--color-wh);
        width: 46.15%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        height: 280px;
        border-radius: 8px;
    }
    .flow_item > .img img {
        max-width: 220px;
    }
}


/*
Scene
---------------------------------*/
.scene_list li + li {
    margin-top: 32px;
}
.scene_list li h3 {
    text-align: center;
    color: var(--color-primary);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-gray);
    margin: 0 0 16px;
}
.scene_list li a {
    display: block;
}
@media (min-width: 768px) {
    .scene_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .scene_list li {
        width: 31.33%;
    }
    .scene_list li + li {
        margin-top: 0;
    }
    .scene_list li:nth-of-type(n+4){
        margin-top: 64px;
    }
    .scene_list li h3 {
        font-size: 2.4rem;
        padding-bottom: 16px;
        margin-bottom: 24px;
    }
    .scene_list li a {
        transition: opacity .3s;
    }
    .scene_list li a:hover {
        opacity: .7;
    }
}

/*
Example
---------------------------------*/
.sec_05 .section_title {
    margin-bottom: 0;
}
.example_swiper {
    padding: 32px 0;
}
.example_slide {
    background: var(--color-wh);
    text-align: center;
    font-feature-settings: "palt";
    box-shadow: 0 0 8px rgba( var(--color-tertiary-rgb) , .3 );
}
.example_slide a {
    text-decoration: none;
}
.example_slide h3 {
    color: var(--color-primary);
    font-size: 1.7rem;
    margin: 0;
    padding: 8px 0;
}
.example_slide .name {
    padding: 16px 8px;
    font-size: 1.2rem;
}
.swiper-button-next,
.swiper-button-prev {
    display: none;
}
.example_swiper .swiper-pagination-bullets {
    bottom: 0;
    line-height: 1;
}
.example_swiper .swiper-pagination-bullets .swiper-pagination-bullet {
    background: var(--color-gray);
    opacity: 1;
    margin: 0 6px;
}
.example_swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
    background: var(--color-primary);
}
@media (min-width: 768px) {
    .example_container {
        max-width: 1280px;
        padding: 0 20px;
        margin: 0 auto;
        position: relative;
    }
    .example_swiper {
        padding: 80px 20px 64px;
        position: static;
    }
    .example_slide {
        border-radius: 4px;
        box-shadow: 0 0 16px rgba( var(--color-tertiary-rgb) , .3 );
    }
    .example_slide a {
        transition: opacity .3s;
        display: block;
    }
    .example_slide a:hover {
        opacity: .7;
    }
    .example_slide h3 {
        font-size: 2rem;
        padding: 20px 0;
    }
    .example_slide .name {
        padding: 16px 8px;
        font-size: 1.6rem;
    }
    .swiper-button-next,
    .swiper-button-prev {
        display: block;
    }
    .swiper-button-next {
        right: 0;
        background: url(../img/icon_next.svg) no-repeat center/100%;
        height: 28px;
        width: 24px;
    }
    .swiper-button-prev {
        left: 0;
        background: url(../img/icon_prev.svg) no-repeat center/100%;
        height: 28px;
        width: 24px;
    }
    .swiper-button-next::after,
    .swiper-button-prev::after {
        content: none;
    }
    .example_swiper .swiper-pagination-bullets .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        margin: 0 8px;
    }
}

/*
FAQ 
---------------------------------*/
.sec_07 {
    padding-bottom: 112px;
}
.sec_07 h3 {
    text-align: center;
    margin: 40px 0 32px;
    font-size: 1.6rem;
}
.faq_list {
    font-weight: 700;
}
.faq_list dt {
    background: var(--color-wh);
    padding: 12px 16px 8px;
    font-size: 1.6rem;
    color: var(--color-primary);
    border-radius: 2px 2px 0 0;
}
.faq_list dd + dt {
    margin-top: 24px;
}
.faq_list dd {
    background: var(--color-wh);
    margin: 0;
    padding: 0 16px 12px;
    font-size: 1.4rem;
    border-radius: 0 0 2px 2px;
}
@media (min-width: 768px) {
    .sec_07 {
        padding-bottom: 200px;
    }
    .sec_07 h3 {
        margin: 80px 0 64px;
        font-size: 2.4rem;
    }
    .faq_list dt {
        padding: 24px 40px 16px;
        font-size: 2rem;
        border-radius: 4px 4px 0 0;
    }
    .faq_list dd + dt {
        margin-top: 32px;
    }
    .faq_list dd {
        background: var(--color-wh);
        padding: 0 40px 28px;
        font-size: 1.6rem;
        border-radius: 0 0 4px 4px;
    }
}