@charset "utf-8";

/* -------------------------------------------------- 
 * core_system.css
 * 
 * 基幹システム　LP用CSS
-------------------------------------------------- */
:root {
    /*ベースとなるカラー*/
    --u-color: #07256c;
    --u-color_light: #2349a4;
    --u-color_soft: #6593bd;
    --u-color_plan01: #008bcd;
    --u-color_plan02: #00bb78;
  }
  .u-color { color: var(--u-color);}
  .u-color_soft { color: var(--u-color_soft);}
  .u-color_light { color: var(--u-color_light);}
  .u-bg-color { background-color: var(--u-color);}
  .u-bg-color_soft { background-color: var(--u-color_soft);}
  .u-bg-color_light { background-color: var(--u-color_light);}

.p-tsukushi_r {
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.p-tsukushi_b {
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
}
.font_din {
    font-family: "din-2014", sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 1px;
  }
p {
    line-height: 1.7;
}
img {
    margin: 0 auto;
    display: block;
}
.c-button__01 a{ 
    background: var(--u-color);
    color: rgb(255, 255, 255);
  }
  .c-button__01 a:hover {
    background-color: #000000;
    color: #ffffff!important;
  }
/* .p-g_nav .l-inner {
    padding: 0;
} */
.p-first_view {
    min-height: 360px;
    z-index: 1;
    background-color: #fdf9e8;
}
.p-first_view::before {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    left: 0;
    top: 0;
    clip-path: polygon(100% 0, 0 0, 0 100%);
    background-color: #dde6eb;
    z-index: -1;
}
.p-first_view::after {
    content: "";
    position: absolute;
    width: 70px;
    height: 70px;
    right: 0;
    bottom: 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    background-color: var(--u-color);
    z-index: -1;
}
.p-nav__cvp {
    background: var(--u-color);
}
.p-gnav__menu .p-gnav__menu-link a {
    color: #fff;
    filter: drop-shadow(0px 0px 3px rgba(176, 53, 4, 0.6));
}
.p-g_nav.scrolled .p-gnav__menu .p-gnav__menu-link a {
    filter: none;
}
.p-g_nav.scrolled .p-nav__cvp {
    background: var(--u-color);
  }
.section_heading {
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
}
@media (min-width: 768px){
    .p-first_view {
        min-height: 360px;
        background: url(/wp-content/themes/eccube/img/lp/core-system/first_view.png);
        background-size: cover;
        background-position: calc(50% + 90px) 23%;
        z-index: 1;
        background-color: #fad230;
    }
    .p-first_view::before {
        width: 560px;
        height: 330px;
        background-color: white;
    }
    .p-first_view::after {
        width: 230px;
        height: 145px;
        background-color: var(--u-color);
    }
}
.p-first_view h3 {
    font-size: 3.6rem;
    line-height: 1;
}
.p-first_view h2 {
    font-size: 5.7rem;
    line-height: 1;
    margin: 13px 0 0 0;
    color: var(--u-color);
}
.p-first_view > div {
    width: 100%;
    height: 100vh;
    max-height: 670px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.p-first_view .p-flex_left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
@media (min-width:769px){
    .p-first_view > div {
        height: 420px;
        flex-direction: column;
        justify-content: center;
        align-items: unset;
    }
    .p-first_view .p-flex_left {
        width: 63%;
    }
}
.p-first_view .c-button__01 {
    width: 100%;
}
.p-first_view .p-cevron {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    right: 12px;
    width: 25px;
    height: 25px;
}
@media (min-width:769px){
.p-first_view .c-button__01 {
    width: 430px;
}
}
/* .p-intro */
.p-intro {
    background-color: white;
    z-index: 1;
}
.p-intro_bottom {
    position: absolute;
    bottom: calc(0px - var(--u-length__m));
    left: 0;
    width: 100%;
    height: calc(var(--u-length__m) + 1px);
    background-color: #ffffff;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    z-index: 1;
}
.p-intro .p-emphasis {
    background: var(--u-color);
    border-radius: 50px;
    min-height: 100px;
    max-width: 926px;
    margin: 0 auto;
}
/* .p-about */
.p-about {
    background: rgb(231,240,243);
    background: radial-gradient(circle, #ffffff 32%, #aad6e8 93%);
}
.p-about .p-box {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.2));
}


/* .p-best_practices */
.p-best_practices {
    background-color: #f0f2f8;
}
.p-best_practices .p-flex_left {
    margin: 25px 0 0 0;
}
.p-best_practices .p-flex_right {
    margin: 25px 0 0 0;
}
@media (min-width:1050px){
    .p-practice {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .p-best_practices .p-flex_left {
        width: 50%;
        margin: 0;
    }
    .p-best_practices .p-flex_right {
        width: calc(50% - 25px);
        margin: 0 0 30px 0;
    }
    .p-about .p-box {
        background-color: rgba(255, 255, 255, 0.6);
        border-radius: 4px;
        filter: unset;
    }
}
.p-best_practices .p-flex_right h4 {
    border-bottom: 2px solid var(--u-color_light);
    color: var(--u-color_light);
}
.p-best_practices .p-flex_right div {
    display: flex;
}
.p-best_practices .p-flex_right dl {
    display: flex;
    margin-right: 20px;
}
.p-best_practices .p-flex_right dl:last-child {
}
.p-best_practices .p-flex_right dt {
    font-weight: bold;
    margin-right: 8px;
    color: var(--u-color_light);
}
.p-best_practices .p-flex_right dd {
    
}
.p-best_practices .p-flex_right p {
    
    border-top: 1px solid #aaa;
}
/* .p-recommend */
.p-recommend {
    z-index: 1;
}
.p-recommend::before {
    content: "";
    position: absolute;
    width: 35vw;
    height: 35vw;
    background: url(/wp-content/themes/eccube/img/lp/core-system/recommend_triangle01.png)  no-repeat;
    left: 0;
    top: 0;
    background-size: contain;
    z-index: -1;
}
.p-recommend::after {
    content: "";
    position: absolute;
    width: 55vw;
    height: 55vw;
    background: url(/wp-content/themes/eccube/img/lp/core-system/recommend_triangle02.png) no-repeat;
    background-size: contain;
    right: 0;
    bottom: 0;
    z-index: -1;
}
.p-eccube_arc {
    width: 90%;
}
.p-collaboration {
    align-items: baseline;
    margin: 0 auto 20px auto;
    display: block;
    background: #f5f5f5;
    padding: 13px 0;
}
.p-collaboration p:first-child {
    /* padding: var(--u-length__xxs) var(--u-length__xs); */
    /* background-color: var(--u-color); */
    color: white;
    color: var(--u-color);
    border-radius: 6px;
    align-items: end;
}
.p-tsuhan_ace {
    width: 50%;
    margin-top: 25px;
}
.p-tsuhan_ace_figure {
    margin-top: 25px;
    max-width: 800px;
    width: 100%;
}
.p-recommend .p-emphasis {
    border-radius: 20px;
    padding: 8px 40px;
}
.p-recommend .p-flex_left {
    margin: 25px 0 0 0;
}
.p-recommend .p-flex_right {
    margin: 25px 0 0 0;
}
@media (min-width:1050px){
    .p-collaboration {
        margin: 0;
        display: flex;
        background: unset;
        padding: 0;
    }
    /* .p-recommend .p-flex_container {
        justify-content: space-between;
    } */
}
@media (min-width:769px){
    .p-recommend .p-flex_left {
        width: 70%;
        margin: 0;
    }
    .p-recommend .p-flex_right {
        width: calc(30% - 50px);
        margin: 0 0 30px 50px;
    }
    .p-tsuhan_ace {
        width: 100%;
        margin: 0;
    }
    .p-eccube_arc {
        max-width: 350px;
        position: absolute;
        top: 44px;
        right: 50px;
    }
    .p-tsuhan_ace_figure {
        margin-top: 25px;
    }
}
/* .p-cvp */
.p-cvp {
    background-color: #fdde00;
    z-index: 1;
}
.p-cvp .section_heading_en {
    color: rgba(255, 255, 255, 0.5);
    font-size: 2.6em;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: -1;
}
.p-cvp a {
    display: flex;
    padding:20px;
}
.p-cvp a div {
    max-width: 900px;
    padding: 10px;
    background: linear-gradient(180deg, #ff4300, #dd0000 90%, #ff2727);
    border-radius: 8px;
    width: 100%;
    justify-content: center;
}
.p-cvp a div p {
    font-size: 22px;
    line-height: 1.55;
}
.p-cvp a div img {
    width: 44px;
    height: 44px;
    margin: 6px auto;
}
@media (min-width:769px){
    .p-cvp a div {
        align-items: center;
        margin: 0 auto;
        padding: 20px;
    }
    .p-cvp a div p {
        font-size: 18px;
        line-height: 1.55;
        filter: var(--u-drop-shadow__01);
    }
    .p-cvp a div img {
        margin: 0 0 0 8px;
        filter: var(--u-drop-shadow__01);
    }
}
/* .l-footer */
.l-footer .l-inner{
    height: 280px;
  }
  .l-footer .l-inner::before {
    content: "";
    position: absolute;
    height: 100%;
    background: url(/wp-content/themes/eccube/img/lp/core-system/footer_img.png);
    background-size: cover;
    background-position: bottom;
    width: 100%;
    z-index: -1;
  
  }
.l-footer .p-logo {
    width: 250px;
}