@charset "UTF-8";

/* 共通 */
.section_container {
    margin: 0 auto;
    padding: 40px 20px;
    width: min(100%, 1280px);
}
.hero__title {
    text-align: center;
    margin-bottom: 50px;
    font-size: 2.5rem;
    font-weight: bold;
    color: #fff;
}
.hero__title span {
    display: inline-block;
    background: #2B38D3;
    padding: 2px 7px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.section_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 35px;
}
.section_title .c-head01 {
    margin-bottom: 0px;
}
.section_title .c-head01.-blue {
    color: #2b38d3;
}
.more-link a {
    color: #2b38d3;
    padding-left: 54px;
    text-decoration: none;
    font-size: 1rem;
    -webkit-transition: 0.3s cubic-bezier(0.59, 0.18, 0.13, 0.76);
    -webkit-transition-property: all;
    font-weight: 700;
    line-height: 1.6;
    padding-left: 42px;
    position: relative;
    transition: 0.3s cubic-bezier(0.59, 0.18, 0.13, 0.76);
    transition-property: all;
}
.more-link.-white a {
    color: #fff
}
.more-link a .p-index-hero-mv__ttl-txt-link-arw {
    background: #2B38D3;
    height: 16px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 5px;
    width: 32px;
}
.more-link.-white a .p-index-hero-mv__ttl-txt-link-arw {
    background: #fff;
}
.more-link a .p-index-hero-mv__ttl-txt-link-arw::after {
    -webkit-clip-path: polygon(0 100%, 0 0, 100% 50%);
    background: #fff;
    clip-path: polygon(0 100%, 0 0, 100% 50%);
    content: "";
    display: block;
    height: 6px;
    left: 18px;
    position: absolute;
    top: 5px;
    width: 6px;
    z-index: 1;
}
.more-link.-white a .p-index-hero-mv__ttl-txt-link-arw::after {
    background: #2B38D3;
}
@media screen and (max-width: 767px){
    .hero__title {
        font-size: 1.55rem;
        margin-bottom: 30px;
    }
    .section_container {
        padding: 0px 15px;
    }
    .section_title {
        flex-direction: column;
        gap: 10px;
        justify-content: center;
    }
    .c-head01 .c-head01__ttl {
        font-size: 1.55rem;
    }
}
@media (768px <= width < 1024px) {
    .hero__title {
        font-size: 1.75rem;
    }
}
/* FV */
.p-index-hero .p-index-hero-mv {
    padding: 70px 0 70px;
}
.p-index-hero .p-index-hero-mv__ttl-txtArea {
    margin-top: 35px;
}
.p-index-hero .p-index-hero-mv__ttl-txt {
    font-size: 1.55rem;
}
.p-index-hero-cv__btnArea {
    display: flex;
    gap: 20px;
}
.p-index-hero .btn-green .p-index-hero-mv__ttl-txt-link {
    background: #16CBA8;
    border: 1px solid #16CBA8;
    color: #fff;
}
.p-index-hero .btn-green .p-index-hero-mv__ttl-txt-link-arw {
    background: #fff;   
}
.p-index-hero .btn-green .p-index-hero-mv__ttl-txt-link-arw::after {
    background: #16CBA8;
}
.p-index-hero .btn-blue .p-index-hero-mv__ttl-txt-link {
    background: #1d97ff;
    border: 1px solid #1d97ff;
    color: #fff;
}
.p-index-hero .btn-blue .p-index-hero-mv__ttl-txt-link-arw {
    background: #fff;   
}
.p-index-hero .btn-blue .p-index-hero-mv__ttl-txt-link-arw::after {
    background: #1d97ff;
}
@media screen and (min-width: 1025px){
    .p-index-hero .p-index-hero-mv::before {
        top: -90px;
    }
    .p-index-hero .p-index-hero-mv__feature {
        margin-top: 0px;
        padding-left: 0px;
        position: absolute;
        top: 70px;
        right: 0px;
    }
    .p-index-hero .p-index-hero-mv__feature-contents-item:nth-child(1) {
        bottom: 220px;
        left: 380px;
        z-index: 1;
    }
    .p-index-hero .p-index-hero-mv__feature-contents-item:nth-child(2) {
        display: none;
    }
    .p-index-hero .p-index-hero-mv__feature-contents-item:nth-child(3) {
        right: -220px;
        top: 170px;
        height: 430px;
        width: 370px;
    }
}
@media screen and (min-width: 1440px){
    .p-index-hero .p-index-hero-mv__feature-container::before {
        width: 960px;
        right: -40px;
        top: -350px;
    }
    .p-index-hero .p-index-hero-mv__feature-container-item:nth-child(1) {
        top: 15px;
    }
    .p-index-hero .p-index-hero-mv__feature-container-item:nth-child(2) {
        top: 140px;
    }
    .p-index-hero .p-index-hero-mv__feature-container-item:nth-child(3) {
        top: 265px;
    }
    .p-index-hero .p-index-hero-mv__scroll {
        display: none;
    }
}
@media screen and (max-width: 767px){
    .p-index-hero .p-index-hero-mv {
        padding: 30px 0 40px;
    }
    .p-index-hero .p-index-hero-mv__ttl-txtArea {
        margin-top: 20px;
    }
    .p-index-hero .p-index-hero-mv__ttl-txt {
        font-size: 1.25rem;
    }
    .p-index-hero-cv__btnArea {
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
    }
    .p-index-hero .p-index-hero-mv__ttl-txt-des {
        font-size: 0.85rem;
    }
    .p-index-hero .p-index-hero-mv__ttl-txt-link {
        width: 100%;
        text-align: center;
        font-size: 0.85rem;
    }
    .p-index-hero .p-index-hero-mv__ttl-txt-btn {
        margin-top: 0px;
    }
    .p-index-hero .p-index-hero-mv__feature {
        margin-top: -15px;
    }
    .fixed_cta {
        z-index: 99;
    }
}
@media (768px <= width < 1024px) {
    .p-index-hero .p-index-hero-mv__feature {
        margin-top: 0px;
        padding-left: 0px;
        position: absolute;
        top: -140px;
        right: 0px;
    }
    .p-index-hero .p-index-hero-mv__feature-contents {
        height: 400px;
        width: 420px;
    }
    .p-index-hero .p-index-hero-mv__feature-contents-item:nth-child(1) {
        bottom: 125px;
        left: 170px;
    }
    .p-index-hero .p-index-hero-mv__feature-contents-item:nth-child(2) {
        right: -106px;
        top: auto;
        bottom: 0;
    }
    .p-index-hero .p-index-hero-mv__feature-contents-item:nth-child(3) {
        right: -33px;
        top: 113px;
    }
    .p-index-hero .p-index-hero-mv__feature-contents-item:nth-child(4) {
        left: 100px;
    }
    .p-index-hero .p-index-hero-mv__feature-contents-item:nth-child(5) {
        left: 243px;
    }
}
/* 解決できる領域 */
.p-index-hero__solution {
    background: #DEF0FF;   
    padding: 100px 0px;
    clip-path: polygon(
        0 0,
        50% 70px,
        100% 0,
        100% calc(100% - 70px),
        50% 100%,
        0 calc(100% - 70px)
    );
    margin-top: 0px;
    margin-bottom: -70px;
    position: relative;
    z-index: 1;
}
.solution_box {
    display: flex;
    gap: 30px;
}
.solution_box h3 {
    font-size: 1.2rem;
    text-align: center;
    font-weight: bold;
    margin: 5px 0px 0px;
}
.solution_box ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 0px 5px;
    flex-wrap: wrap;
}
.solution_box ul li span {
    color: #2B38D3;
    font-weight: bold;
}
.solution_link {
    text-align: center;
    margin: 10px 0px 0px;
}
.solution_link a {
    color: #2b38d3;
    padding-left: 54px;
    text-decoration: none;
    font-size: 1rem;
    -webkit-transition: 0.3s cubic-bezier(0.59, 0.18, 0.13, 0.76);
    -webkit-transition-property: all;
    font-weight: 700;
    line-height: 1.6;
    padding-left: 42px;
    position: relative;
    transition: 0.3s cubic-bezier(0.59, 0.18, 0.13, 0.76);
    transition-property: all;
}
.solution_link a .c-card01__btn-arw {
    background: #2B38D3;
    height: 16px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 5px;
    width: 32px;
}
.solution_link a .c-card01__btn-arw::after {
    -webkit-clip-path: polygon(0 100%, 0 0, 100% 50%);
    background: #fff;
    clip-path: polygon(0 100%, 0 0, 100% 50%);
    content: "";
    display: block;
    height: 6px;
    left: 18px;
    position: absolute;
    top: 5px;
    width: 6px;
    z-index: 1;
}
@media screen and (max-width: 767px){
    .p-index-hero__solution {
        clip-path: polygon(
            0 0,
            50% 70px,
            100% 0,
            100% calc(100% - 70px),
            50% 100%,
            0 calc(100% - 70px)
        );
    }
    .solution_box {
        flex-direction: column;
    }
}
/* 悩み */
.p-index-hero .p-index-hero__intro-ttl, 
.p-index-hero .p-index-hero__intro-ttl-btm {
    background: #2B38D3;
}
.p-index-hero .p-index-hero__intro-bg {
    display: none;
}
.p-index-hero .p-index-hero__intro-contents {
    display: block;
}
.p-index-hero .p-index-hero__intro-contents .p-index-hero__intro-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    gap: 40px;
    margin-top: 70px;
    width: 100%;
}
.p-index-hero .p-index-hero__intro-contents-item {
    background: #F0F8FF;
}
.p-index-hero .p-index-hero__intro-contents-item-list-item {
    padding: 12px 20px;
}
.p-index-hero .p-index-hero__intro-contents-item.-film .p-index-hero__intro-contents-item-list-item {
    background: #D7E8FF;
}
.p-index-hero .p-index-hero__intro-contents-item.-packaging .p-index-hero__intro-contents-item-list-item {
    background: #D5EBFF;
}
.p-index-hero .p-index-hero__intro-contents-item-list-item span {
    font-weight: 700;
}
@media screen and (max-width: 767px){
    .p-index-hero .p-index-hero__intro-ttl,
    .p-index-hero .p-index-hero__intro-ttl-btm {
        font-size: 1.55rem;
    }
    .p-index-hero .p-index-hero__intro-contents .p-index-hero__intro-box {
        flex-direction: column;
        gap: 20px;
        margin-top: 30px;
    }
    .p-index-hero .p-index-hero__intro-contents-item {
        padding: 20px 20px 20px;
    }
}
@media (768px <= width < 1024px) {
    .p-index-hero .p-index-hero__intro-inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    .p-index-hero .p-index-hero__intro-contents::before {
        z-index: 10;
    }
    .p-index-hero::before {
        background: none;
    }
}
/* 商品・ソリューション */
.p-index-hero::before {
    filter: brightness(0) invert(1);
}
.p-index-product {
    background: #2B38D3;
}
.p-index-product__contents {
    display: flex;
    gap: 35px;
    margin: 50px 0px;
}
.p-index-product .p-index-product__contents-ttl {
    font-size: 1.625rem;
    padding: 2px 8px;
    background: #fff;
    color: #2B38D3;
    display: inline-block;
    font-weight: 700;
    line-height: 1.6;
}
.p-index-product__contents-txt {
    font-size: 1.125rem;
    margin: 40px 0px;
    color: #fff;
}
.p-index-product-cv__btnArea {
    display: flex;
    gap: 30px;
}
.p-index-case__column-contents {
    display: flex;
    gap: 40px;
}
.p-index-product__contents-img {
    width: 45%;
}
.p-index-product .p-index-product__contents-txtArea {
    width: 55%;
}
.white-background-btn .cv-contact__txt-btn-link {
    border: 1px solid #fff;
    background: #fff;
    color: #2B38D3;
    width: 215px;
}
.white-background-btn .cv-contact__txt-btn-link .cv-contact__txt-btn-link-arw {
    background: #2B38D3;
}
.white-background-btn .cv-contact__txt-btn-link .cv-contact__txt-btn-link-arw::after {
    background: #fff;
}
.p-index-product__column-contents {
    display: flex;
    gap: 30px;
}
.p-index-product__column-contents-item {
    text-align: center;
}
.p-index-product__column-contents-item h3 {
    display: inline-block;
    color: #fff;
    padding-left: 54px;
    text-decoration: none;
    font-size: 1rem;
    -webkit-transition: 0.3s cubic-bezier(0.59, 0.18, 0.13, 0.76);
    -webkit-transition-property: all;
    font-weight: 700;
    line-height: 1.6;
    padding-left: 42px;
    position: relative;
    transition: 0.3s cubic-bezier(0.59, 0.18, 0.13, 0.76);
    transition-property: all;
    margin: 10px 0px 0px;
}
.p-index-product__column-contents-item h3 .c-card01__btn-arw {
    background: #fff;
    height: 16px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 5px;
    width: 32px;
}
.p-index-product__column-contents-item h3 .c-card01__btn-arw::after {
    -webkit-clip-path: polygon(0 100%, 0 0, 100% 50%);
    background: #2B38D3;
    clip-path: polygon(0 100%, 0 0, 100% 50%);
    content: "";
    display: block;
    height: 6px;
    left: 18px;
    position: absolute;
    top: 5px;
    width: 6px;
    z-index: 1;
}
.p-index-product__column-contents-item .c-card01__meta {
    background: transparent;
    padding: 0px;
    border-left: 0px solid #2b38d3;
    margin-top: 5px;
}
.p-index-product__column-contents-item .c-card01__meta ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0px 5px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.p-index-product__column-contents-item .c-card01__meta ul li {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
}
.p-index-product__column-contents-item .c-card01__meta ul li span {
    color: #ffffff;
}
.p-index-product__contents-searchArea {
    width: 100%;
}
.p-index-product__contents-search {
    margin: 70px 0px 0px;
}
.c-tab01 .c-tab01__btn {
    background: #D5EBFF;
}
.c-tab01 .c-tab01__btn[aria-selected=true] {
    background: #4AA2F2;
}
.c-tab01 .c-tab01__contents {
    background: #fff;
    padding: 40px 50px 50px;
}
.p-index-product .c-common-btn-area-prtext {
    color: #fff;
}
.p-index-product .c-common-btn-area-prtext::before,
.p-index-product .c-common-btn-area-prtext::after {
    background-color: #fff;
}
.c-accordion01 .c-accordion01__titleWrap {
    background: #D5EBFF;
}
.c-accordion01 .c-accordion01__item[open] .c-accordion01__title {
    background: #4AA2F2;
}
@media screen and (min-width: 1440px){
    .p-index-product .p-index-product__inner {
        padding-top: 50px;
    }
}
@media screen and (max-width: 767px){
    .p-index-product {
        padding: 80px 0 60px;
    }
    .p-index-product__contents {
        flex-direction: column;
    }
    .p-index-product__contents-img {
        width: 100%;
    }
    .p-index-product .p-index-product__contents-txtArea {
        width: 100%;
    }
    .p-index-product .p-index-product__contents-ttl {
        font-size: 1.2rem;
    }
    .p-index-product__contents-txt {
        font-size: 1rem;
        margin: 20px 0px;
    }
    .p-index-product-cv__btnArea {
        flex-direction: column;
        gap: 10px;
    }
    .white-background-btn .cv-contact__txt-btn-link,
    .white-btn .cv-contact__txt-btn-link {
        width: 100%;
        text-align: center;
    }
    .p-index-product__column-contents {
        flex-direction: column;
    }
    .p-index-product__contents-search {
        margin: 50px 0px 0px;
    }
}
@media (768px <= width < 1024px) {
    .p-index-product .p-index-product__inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    .p-index-product {
        clip-path: polygon(0 0, 50% 70px, 100% 0, 100% 100%, 0 100%);
    }
    .white-background-btn .cv-contact__txt-btn-link,
    .white-btn .cv-contact__txt-btn-link {
        width: auto;
    }
}
/* 提案事例 */
.p-index-case {
    padding: 30px 0 60px;
    background: #fff;
}
.p-index-case .c-head01.-white .c-head01__ttl::before {
    background: #2b38d3;
}
.p-index-case .p-index-case__column-contents {
    margin-top: 0px;
}
.p-index-case .p-index-search .p-index-search__contentsWrap {
    padding: 40px 50px 50px;
}
.p-index-case .p-index-search {
    padding: 0px 0 0px;
    margin-top: 60px;
    background: transparent;
}
.p-index-case .p-index-case__column-contents-item-txtArea {
    padding: 5px 0px 0px;
    text-align: center;
}
.p-index-case .p-index-case__column-contents-item-txt {
    margin-right: 0px;
}
.p-index-case .p-index-case__column-contents-item-arw {
    top: 3px;
}
.p-index-case .p-index-case__column-contents-item-tag {
    top: 0px;
}
.p-index-case .p-index-search .p-index-search__inner {
    padding-left: 0px;
    padding-right: 0px;
}
.p-index-gallery {
    background: transparent;
}
@media screen and (max-width: 767px){
    .p-index-case .p-index-case__column-contents-item-txt {
        margin-top: 5px;
        text-align: center;
        display: inline-block;
    }
    .p-index-case .p-index-search {
        margin-top: 40px;
    }
    .p-index-case .p-index-search .p-index-search__contentsWrap {
        padding: 20px 40px 25px;
    }
}
/* 選ばれる理由 */
.p-index-feature .p-index-feature__container-item {
    padding: 30px 30px 50px;
    overflow: hidden;
}
.p-index-feature .p-index-feature__container-item-ttlArea {
    margin-bottom: 30px;
}
.p-index-feature .p-index-feature__item-contents-ttl {
    margin-top: 10px;
}
.p-index-feature .p-index-feature__item-contents-txt {
    margin-top: 5px;
}
@media screen and (min-width: 1024px){
    .p-index-feature {
        padding: 120px 0 40px;
    }
    .p-index-feature .p-index-feature__container-item.-feature02,
    .p-index-feature .p-index-feature__container-item.-feature03 {
        padding: 30px 30px 50px;
    }
}
@media screen and (min-width: 1440px){
    .p-index-feature .p-index-feature__container-item-ttlArea,
    .p-index-feature .p-index-feature__container-item.-feature03 .p-index-feature__container-item-ttlArea {
        margin-left: -70px;
    }
    .p-index-feature .p-index-feature__item-feature-img {
        width: 500px;
    }
}
@media screen and (max-width: 767px){
    .p-index-feature {
        padding: 40px 0 50px;
    }
    .c-head03 .c-head03__ja {
        font-size: 1.55rem;
    }
    .p-index-feature .p-index-feature__container-item {
        padding: 30px 30px 30px;
    }
    .p-index-feature .p-index-feature__container-item-num {
        top: 0px;
    }
}
@media (768px <= width < 1024px) {
    .p-index-feature .p-index-feature__inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    .p-index-case .p-index-case__column-contents {
        grid-template-columns: repeat(3, 1fr);
    }
    .p-index-feature .p-index-feature__container-item-num {
        top: 0px;
    }
    .p-index-feature .p-index-feature__container-item-contents {
        -ms-flex-wrap: wrap;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    .p-index-feature .p-index-feature__container-item-contents-item {
        -ms-flex-preferred-size: calc(33.33% - 13.3333333333px);
        flex-basis: calc(33.33% - 13.3333333333px);
    }
    .p-index-feature .p-index-feature__container-item-feature {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        flex-direction: row;
        gap: 40px;
    }
    .p-index-feature .p-index-feature__item-feature-img {
        width: 300px;
    }
    .p-index-feature .p-index-feature__container-item-feature-txtArea {
        width: calc(100% - 340px);
    }
    .p-index-feature .p-index-feature__container-item-contents-item:nth-child(n+2) {
        margin-top: 0px;
    }
}
/* ご依頼の流れ */
@media screen and (max-width: 767px){
    .p-index-flow {
        padding: 0px 0;
    }
}
@media (768px <= width < 1024px) {
    .p-index-flow .p-index-flow__inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    .p-index-flow .p-index-flow__contents {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        -ms-flex-wrap: wrap;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 40px;
    }
    .p-index-flow .p-index-flow__contents-item {
        -ms-flex-preferred-size: calc(50% - 20px);
        flex-basis: calc(50% - 20px);
        padding: 50px 60px;
    }
}
/* コラム */
.p-index-column .p-index-column__contents-item-archive-ttl {
    font-size: 1.1rem;
    font-weight: 700;
}
@media screen and (min-width: 1024px){
    .p-index-column {
        padding: 60px 0 100px;
    }
}
@media screen and (min-width: 1440px){
    .p-index-column .p-index-column__contents {
        gap: 100px;
        padding-right: 60px;
    }
}
@media (768px <= width < 1024px) {
    .p-index-column .p-index-column__contents {
        gap: 50px;
        padding-right: 0px;
    }
    .p-index-column .p-index-column__contents {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        flex-direction: row;
        gap: 50px;
        padding-left: 0;
        padding-right: 90px;
    }
    .p-index-column .p-index-column__contents-img {
        margin-left: 0;
        width: 300px;
    }
    .p-index-column .p-index-column__contents-item {
        -ms-flex-preferred-size: calc(100% - 300px);
        flex-basis: calc(100% - 300px);
    }
}