/* カスタマイズ用CSS */
body {
    color     : #333333;
    background: #FFFFFF;
}

h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1 {
    color: #333333;
}
.ec-blockTopBtn{
    background-color: #FF6E1C;
}

.ec-headerTitle .ec-headerTitle__title h1,
.ec-headerTitle .ec-headerTitle__title .h1 {
    font-size: 14px;
}

.ec-layoutRole .ec-layoutRole__contents {
    max-width: 100%;
}

.ec-role {
    max-width: 1080px;
    padding  : 0;
    color    : #333333;
}

.ec-borderedDefs{
    margin-top: 15px;
}

.ec-headerNaviRole .ec-headerNaviRole__left {
    width      : 25%;
    display    : flex;
    align-items: center;
    flex-shrink: 0;
    gap        : 20px;
}

.ec-headerNavSP {
    position  : initial;
    background: none;
    padding   : 0;
    width     : 30px;
    height    : 30px;
    font-size : 30px;
}

.ec-headerNaviRole .fa-bars {
    position : initial;
    transform: none;
}

.ec-headerNaviRole .ec-headerNaviRole__right {
    width: 73%;
}

.ec-headerNaviRole {
    max-width: 1280px;
    padding  : 15px 10px;

}

.ec-headerRole {
    padding: 0;
}

.ec-drawerRole .ec-headerLinkArea {
    background: #FF6E1C;
}

.ec-headerTitle .ec-headerTitle__title {
    text-align: left;
}

.ec-headerTitle .ec-headerTitle__title a {
    margin-bottom : 0;
    font-size     : 14px;
    display       : flex;
    flex-direction: column;
    font-weight   : 400;
    white-space   : nowrap;
}

.ec-headerTitle .ec-headerTitle__title a img {
    width: 213px;
}

.ec-sliderRole {
    overflow: hidden;
    width   : 100%;
}

/* .main_visual .slick-slide {
    box-sizing: border-box;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center center;
}

.main_visual .slick-center {
    transform: scale(1);
    opacity: 1;
}

.main_visual .slick-slide img {
    width: 100%;
    height: 425px;       
    object-fit: cover;
    display: block;
} */

.ec-itemNav {
    max-width : 1280px;
    margin    : 0 auto;
    text-align: left;
}

.ec-categoryNaviRole {
    max-width       : 100%;
    background-color: #FF6E1C;
}

.ec-itemNav__nav>li>a {
    background: transparent;
    color     : #fff;
    transition: .15s;
    padding   : 16px 20px;
    font-size : 16px;
    min-width : 100px;
    width     : 100%;
}

.ec-itemNav__nav>li:hover>a {
    background: #F57F31;
}

.ec-itemNav__nav li ul li a {
    background: #FF6E1C;
}

.ec-itemNav__nav>li:hover li:hover>a {
    background: #F57F31;
}

.ec-categoryNaviRole a:hover {
    color: #fff !important;
}

@media only screen and (min-width: 768px) {
    .ec-categoryNaviRole a:hover {
        color: #2e3233;
    }
}

.ec-headerNaviRole .ec-headerNaviRole__search {
    margin-top: 0;
    max-width : 267px;
    width     : 100%;
}

.ec-headerSearch .ec-headerSearch__keyword {
    width        : 100%;
    border-radius: 19px;
    border       : 1px solid #F57F31;
    font-size    : 14px;
}

.ec-headerSearch .ec-headerSearch__keyword input::placeholder {
    color: #F57F31;
}

.ec-headerSearch .ec-headerSearch__keyword input[type=search] {
    font-size: 14px;
    color: #F57F31;
}

.ec-headerNav {
    max-width: 362px;
    width    : 100%;
}

.ec-headerNav .ec-headerNav__itemLink {
    font-size: 12px;
}

.ec-cartNavi {
    min-width : unset;
    background: transparent;
    padding   : 5px 10px;
    height    : auto;
}

.ec-headerNaviRole .ec-headerNaviRole__nav a {
    display    : flex;
    align-items: center;
}

.ec-sliderRole {
    padding-left : unset;
    padding-right: unset;
    max-width    : 100%;
}

.item.slick-slide{
        position: relative;
        padding-bottom: 60%;
    }

.ec-sliderRole img {
    position: absolute;
    width: 100%;
    height    : 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.ec-title__inner {
    margin-top   : 60px;
    margin-bottom: 40px;
    text-align   : center;
}

.ec-title__jp {
    font-size    : 30px;
    font-weight  : 700;
    margin-bottom: 5px;
}

.ec-title__en {
    font-size: 18px;
}

/* add css for search PC */
.ec-searchPc {
    background   : #F5F6F7;
    border-radius: 10px;
    padding      : 45px 100px;
    margin-bottom: 50px;
}

.ec-searchPc__body {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 20px;
    margin-bottom        : 20px;
}

.ec-searchPc__col {
    text-align: left;
}

.ec-searchPc__title {
    font-size    : 16px;
    margin-bottom: 15px;
    font-weight  : bold;
}

.ec-searchPc__check {
    display      : flex;
    align-items  : center;
    margin-bottom: 15px;
    font-size    : 15px;
    cursor       : pointer;
}

.ec-searchPc__check input {
    margin-right: 8px;
}

.ec-searchPc__note {
    font-size    : 13px;
    margin-bottom: 35px;
}

.ec-searchPc__btn {
    position       : relative;
    display        : flex;
    align-items    : center;
    justify-content: center;
    max-width      : 255px;
    width          : 100%;
    padding        : 15px 10px;
    background   : linear-gradient(to left, #FCDE91 0%, #FC9B4C 100%);
    color          : #fff !important;
    border         : none;
    font-size      : 16px;
    font-weight    : bold;
    cursor         : pointer;
    transition     : 0.3s;
    margin         : 0 auto;
    line-height    : 1;
}

.ec-searchPc__btn::before {
    content     : "";
    position    : absolute;
    right       : 20px;
    top         : 50%;
    width       : 10px;
    height      : 10px;
    border-top  : 3px solid #fff;
    border-right: 3px solid #fff;
    transform   : translateY(-50%) rotate(45deg);
}

.ec-searchPc__btn:hover {
    background: #FF6E1C;
}


.ec-newItemRole {
    padding: 0;
    width  : 100%;
}

.ec-newItemRole .ec-newItemRole__listItemImg {
    background: #F7F7F7;
    padding   : 40px 15px;

}

.ec-newItemRole .ec-newItemRole__listItemImg img {
    aspect-ratio: 226 / 198;
}

.ec-newItemRole .ec-newItemRole__listItemTitle {
    font-size: 18px;
    margin   : 10px 0 0;
}

.ec-newItemRole .ec-newItemRole__spec {
    font-size: 14px;
}

.ec-newItemRole .ec-newItemRole__ship {
    font-size : 14px;
    margin-top: 7px;
}

.ec-newItemRole .ec-newItemRole__listItemPrice {
    font-size  : 24px;
    color      : #E43243;
    font-weight: bold;
    margin-top : auto;
}

.ec-newItemRole .ec-newItemRole__listItemPrice span {
    font-size: 15px;
}

.ec-newItemRole .ec-newItemRole__list {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap                  : 20px;
    justify-content      : center;
    padding              : 0;
}

.ec-newItemRole .ec-newItemRole__listItem {
    max-width     : 255px;
    width         : 100%;
    justify-self  : center;
    margin        : 0 !important;
    color         : #333333;
    display       : flex;
    flex-direction: column;
}

.ec-newItemRole .ec-newItemRole__listItem .ec-searchPc__btn {
    margin-top: 20px;
}

.ec-imgBox {
    width     : 100%;
    margin-top: 80px;
}

.ec-imgBox img {
    display   : block;
    max-width : 844px;
    width     : 100%;
    margin-top: 30px;
}

.ec-imgBox img.center {
    margin-left : auto;
    margin-right: auto;
}

.ec-imgBox img.right {
    margin-left: auto;
}

.ec-newsRole .ec-newsRole__news {
    border : none;
    padding: 0;
}

.ec-newsRole .ec-newsRole__newsHeading {
    align-items: center;
}

.ec-newsRole .ec-newsRole__newsItem {
    border-bottom: 1px solid #CECECE;
    padding      : 20px 50px;
}

.ec-newsRole .ec-newsRole__newsDate {
    font-size  : 16px;
    font-weight: bold;
    color      : #FF6E1C;
}

.ec-newsRole .ec-newsRole__newsTitle {
    font-size  : 16px;
    color      : #333333;
    font-weight: 400;
}

.ec-newsRole .ec-newsRole__newsCloseBtn {
    width          : 25px;
    height         : 25px;
    background     : #FF6E1C;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.ec-newsRole__newsItem.is_active .ec-newsRole__newsCloseBtn i {
    transform: rotateX(180deg) translateY(0px);
}

.ec-footerRole {
    border    : none;
    background: #F5F6F7;
}

.ec-footerNavi {
    color: #333;
}

.ec-footerRole .ec-footerRole__inner {
    color: #333;
}

.ec-footerTitle {
    color: #333;
}

.footer__inner {
    max-width: 1080px;
    width    : 100%;
    margin   : 10px auto 0;
}

.footer__logo {
    margin-bottom: 30px;
}

.footer__logo img {
    max-width: 270px;
    height   : auto;
}


.footer__content {
    display              : grid;
    grid-template-columns: 1fr 2fr;
    gap                  : 20px;
    font-size            : 16px;
}

.footer__menu {
    display  : flex;
    flex-wrap: wrap;
    gap      : 60px;
}

.footer__menuItem {
    width: calc((100% - 120px) / 3);
}

.footer__menuItem h3 {
    color        : #FF6E1C;
    font-size    : 20px;
    font-weight  : bold;
    margin-bottom: 20px;
    margin-top   : 0;
}

.footer__menuItem ul {
    list-style  : none;
    padding-left: 0;
}

.footer__menuItem li {
    margin-bottom: 10px;
}

.footer__menuItem a {
    color          : #333;
    text-decoration: none;
    transition     : color 0.2s;
}

.copyright {
    text-align : center;
    margin-top : 50px;
    padding    : 7px;
    background : #FF6E1C;
    font-size  : 16px;
    font-weight: bold;
    color      : #fff;
}

.ec-shelfRole {
    max-width: 1080px
}

.ec-shelfRole__wrap {
    display        : flex;
    gap            : 30px;
    justify-content: space-between;

}

.sidebar {
    width      : 360px;
    flex-shrink: 0;
}

.filter-group {
    padding      : 15px 30px;
    background   : #F5F6F7;
    border-radius: 5px;
    margin-bottom: 20px;
}

.filter-group__title {
    font-size    : 16px;
    font-weight  : bold;
    margin-bottom: 15px;
}

.filter-group__list {
    display       : flex;
    flex-direction: column;
}

.ec-searchPc__check input[type="checkbox"] {
    margin-right: 12px;
    width       : 18px;
    height      : 18px;
    accent-color: #FF6E1C;
    cursor      : pointer;
}

.ec-searchPc__note strong {
    color: #e74c3c;
}

.ec-productRole {
    max-width : 1080px;
    margin-top: 70px;
    padding   : 0;
}

.ec-productRole .ec-productRole__title .ec-headingTitle {
    font-size  : 30px;
    font-weight: bold;
}

.ec-productRole .ec-productRole__description {
    margin-bottom : 0;
    margin-top    : 10px;
    padding-bottom: 14px;
    border-bottom : 1px solid #D3D3D3;
}

.ec-productRole .ec-productRole__description h3 {
    font-size  : 30px;
    font-weight: bold;
    color      : #FF6E1C;
    text-align : center;
}

.ec-productRole .ec-productRole__description h4 {
    font-size  : 26px;
    font-weight: bold;
    color      : #FF6E1C;
    text-align : center;
}

.ec-productRole .ec-productRole__description h5 {
    font-size  : 24px;
    font-weight: bold;
    color      : #FF6E1C;
    text-align : center;
}

.ec-productRole .ec-productRole__description h6 {
    font-size  : 20px;
    font-weight: bold;
    color      : #FF6E1C;
    text-align : center;
}

.ec-productRole__description.ec-productRole__descriptionList {
    padding-bottom: 0;
    border        : 0;
}

.ec-productRole .ec-productRole__tags {
    border        : 0;
    padding-bottom: 0;
    margin        : 10px 0;
}

.ec-productRole .ec-productRole__tag {
    font-size   : 14px;
    border-color: #FF6E1C;
    color       : #FF6E1C;
    background  : #fff;
}

.ec-productRole .ec-productRole__price,
.ec-productRole .ec-productRole__code,
.ec-productRole .ec-productRole__category {
    border-bottom: 1px solid #D3D3D3;
}

.ec-productRole .ec-productRole__option {
    font-size  : 30px;
    font-weight: bold;
    color      : #FF6E1C;
    margin-top : 50px;
}

.ec-productRole .ec-productRole__category {
    display: flex;
}

.ec-productRole .ec-productRole__category div {
    min-width: fit-content;
}

.ec-productRole .ec-productRole__category ul {
    display  : flex;
    flex-wrap: wrap;
    gap      : 5px;
}

.ec-price .ec-price__price {
    font-size: 30px;
}

.ec-price .ec-price__tax {
    font-size: 15px;
}

.ec-blockBtn--action {
    background   : linear-gradient(to bottom, #FCDE91 0%, #FC9B4C 100%);
    border-radius: 5px;
    border       : 0;
    font-size    : 20px;
    font-weight  : bold;
}

.ec-blockBtn--cancel {
    background-color     : unset;
    border               : 0;
    color                : #333333 !important;
    font-size            : 18px;
    text-decoration      : underline;
    text-underline-offset: 2px;
    display              : flex;
    align-items          : center;
    justify-content      : center;
    gap                  : 10px;
    transition           : all .3s ease-in;
    font-weight          : 400;
}

.ec-blockBtn--cancel:hover {
    color           : inherit;
    background-color: unset;
    border          : 0;
    text-decoration : none;
}

.ec-blockBtn--cancel img {
    width: 20px;
}

.ec-productRole .ec-productRole__actions .ec-select select {
    height   : 46px;
    min-width: 100%;
}

.ec-grid2 {
    gap: 30px;
}

.ec-grid2 .ec-grid2__cell.ec-productImage {
    width: 36%;
}

.ec-grid2 .ec-grid2__cell.ec-productInfo {
    width: 64%;
}

.ec-sliderItemRole .slideThumb {
    width        : 25%;
    padding      : 5px;
    margin-bottom: 0;
}

.ec-sliderItemRole .slideThumb img {
    width: 100%;
}

.ec-grid2 .ec-grid2__cell .ec-select .option_Label {
    display        : flex;
    justify-content: space-between;
}

.ec-grid2 .ec-grid2__cell .ec-select .form-label {
    margin-bottom: 3px;
    color        : #333;
}

.btn-check:checked+.ec-blockBtn--action:focus,
.btn-check:active+.ec-blockBtn--action:focus,
.ec-blockBtn--action:active:focus,
.ec-blockBtn--action.active:focus,
.show>.ec-blockBtn--action.dropdown-toggle:focus {
    box-shadow: none;
}

.ec-blockBtn--action:focus,
.ec-blockBtn--action.focus,
.ec-blockBtn--action:active:focus,
.ec-blockBtn--action:active.focus,
.ec-blockBtn--action.active:focus,
.ec-blockBtn--action.active.focus {
    outline: none;
}

.btn-check:checked+.ec-blockBtn--action,
.btn-check:active+.ec-blockBtn--action,
.ec-blockBtn--action:active,
.ec-blockBtn--action.active,
.show>.ec-blockBtn--action.dropdown-toggle {
    background: linear-gradient(to bottom, #2EACFD 0%, #034896 100%);
    border    : 0;
}

.ec-productRole .ec-productRole__btn {
    width: 100%;
}

.ec-searchnavRole__topicpath {
    max-width: 1080px;
    width    : 100%;
    margin   : 0 auto;
}

.ec-pageHeader h1,
.ec-pageHeader .h1 {
    margin: 10px 0 30px;
}

.spec-table {
    width          : 100%;
    border-collapse: collapse;
    font-size      : 14px;
    outline        : 1px solid #EBEBEB;
    border-radius  : 5px;
    overflow       : hidden;
    margin-top     : 15px;
}

.spec-table tr {
    border-bottom: 1px solid #F5F5F5;
}

.spec-table tr:last-child {
    border-bottom: 0;
}

.spec-table tr:last-child th {
    border-bottom: 0;
}

.spec-table th {
    background-color: #DADADA;
    color           : #333;
    text-align      : left;
    padding         : 10px 14px;
    width           : 30%;
    border-right    : 1px solid #ddd;
    border-bottom   : 1px solid #fff;
    vertical-align  : top;
}

.spec-table td {

    color         : #333;
    padding       : 10px 14px;
    vertical-align: top;
}

.ec-faq__wrap {
    width : 100%;
    margin: 60px auto;
}

/* ── Category buttons ── */
.ec-faq__cats {
    display      : flex;
    flex-wrap    : wrap;
    justify-content: center;
    gap          : 12px;
    margin-bottom: 60px;
}

.ec-faq__cat-btn {
    position: relative;
    padding       : 10px 20px;
    border        : 1px solid #5D5D5D;
    background    : #fff;
    font-size     : 14px;
    border-radius: 5px;
    font-weight   : 400;
    cursor        : pointer;
    transition    : background 0.2s, color 0.2s, border-color 0.2s;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 177px;
}

.ec-faq__cat-btn::after {
    content: "";
    background: url("../icon/arrow-orange2.svg") no-repeat;
    background-size: cover;
    width: 20px;
    height: 20px;
    margin-left: 10px;
}

.ec-faq__cat-btn:hover {
    background  : #FF6E1C;
    color       : #fff;
    border-color: #FF6E1C;
}

/* .ec-faq__cat-btn.active {
    background: #FF6E1C;
    color: #fff;
    border-color: #FF6E1C;
  } */

/* ── Section ── */
.ec-faq__section {
    margin-bottom: 50px;
}

.ec-faq__section-title {
    font-size    : 20px;
    font-weight  : bold;
    margin-bottom: 20px;
}

/* ── Accordion item ── */
.ec-faq__item {
    border       : 1px solid #ddd;
    margin-bottom: 20px;
    overflow     : hidden;
    transition   : border-color 0.2s;
    padding      : 0 50px;
    background   : #F5F6F7;
    border-radius: 10px;
}

.ec-faq__item.open {
    border-color: #999;
}

.ec-faq__question {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 15px 0;
    cursor         : pointer;
    user-select    : none;
    transition     : background 0.15s;
}

.ec-faq__question:hover {
    background: #f9f9f9;
}

.ec-faq__question-text {
    display       : flex;
    align-items   : center;
    gap           : 20px;
    font-size     : 16px;
    font-weight   : bold;
    letter-spacing: 0.03em;
    color         : #FF6E1C;
}

.ec-faq__question-text::before {
    content    : 'Q.';
    font-size  : 30px;
    font-weight: bold;
    color      : #FF6E1C;
    flex-shrink: 0;
}

.ec-faq__icon {
    width        : 25px;
    height       : 25px;
    position     : relative;
    border-radius: 50%;
    background   : #FF6E1C;
    transition   : .3s;
}


.ec-faq__icon::before,
.ec-faq__icon::after {
    content           : "";
    position          : absolute;
    width             : 14px;
    height            : 2px;
    background        : #fff;
    top               : 11px;
    left              : 5px;
    -webkit-transition: .3s;
    transition        : .3s;
}

.ec-faq__icon::after {
    -webkit-transform: rotate(90deg);
    -ms-transform    : rotate(90deg);
    transform        : rotate(90deg);
}

.ec-faq__item.open .ec-faq__icon {
    background: #333;
}

.ec-faq__item.open .ec-faq__icon::after {
    -webkit-transform: rotate(360deg);
    -ms-transform    : rotate(360deg);
    transform        : rotate(360deg);
}

.ec-faq__answer {
    max-height: 0;
    overflow  : hidden;
    transition: all .8s ease;
}

.ec-faq__answer-inner {
    padding    : 0;
    font-size  : 16px;
    line-height: 1.3;
    font-weight: 400;
    color      : #333;
    border-top : 1px dashed #8B8B8B;
    display    : flex;
    align-items: center;
    gap        : 20px;
}

.ec-faq__answer-inner::before {
    content    : 'A.';
    font-size  : 30px;
    font-weight: bold;
    color      : #333;
    flex-shrink: 0;
}

.ec-faq__item.open .ec-faq__answer {
    max-height: fit-content;
}

.ec-faq__item.open .ec-faq__answer-inner {
    padding: 15px 0;
}


/* ── Hero ── */
.hero {
    text-align: center;
    padding   : 60px 24px 48px;
}

.hero__title {
    font-size     : 28px;
    font-weight   : bold;
    letter-spacing: 0.06em;
    margin-bottom : 20px;
}

.hero__desc {
    line-height   : 2;
    letter-spacing: 0.03em;
}

/* ── CTA Banner ── */
.cta-banner {
    background     : #f0f0f0;
    padding        : 20px 32px;
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 24px;
    max-width      : 100%;
    margin         : 0 auto 60px;
}

.cta-banner__text .cta-banner__title {
    font-size    : 16px;
    font-weight  : bold;
    margin-bottom: 4px;
}

.cta-banner__text p {
    line-height: 1.6;
}

.cta-banner__btns {
    display  : flex;
    gap      : 12px;
    flex-wrap: wrap;
}

.cta-btn {
    display        : inline-flex;
    align-items    : center;
    gap            : 8px;
    padding        : 10px 20px;
    border         : 1px solid #222;
    background     : #fff;
    font-size      : 14px;
    font-weight    : 400;
    color          : #333;
    cursor         : pointer;
    text-decoration: none;
    letter-spacing : 0.03em;
    transition     : background 0.2s, color 0.2s;
    white-space    : nowrap;
}

.cta-btn:hover {
    background: #333;
    color     : #fff;
}

.cta-btn--line {
    border-color: #06C755;
    color       : #06C755;
}

.cta-btn--line:hover {
    background: #06C755;
    color     : #fff;
}

.cta-btn__icon {
    width      : 18px;
    height     : 18px;
    flex-shrink: 0;
}

/* ── Main content ── */
.content {
    width : 100%;
    margin: 0 auto;
}

/* ── Section heading ── */
.section-heading {
    font-size    : 30px;
    font-weight  : bold;
    margin-bottom: 20px;
    color        : #FF6E1C;
}

h3.section-heading {
    font-size : 24px;
    text-align: center;
}



/* ── Recommend list ── */
.recommend {
    margin-bottom: 60px;
    background   : #F5F6F7;
    border-radius: 10px;
    padding      : 30px;
}

.recommend__title {
    font-size  : 20px;
    font-weight: bold;
    text-align : center;
}

.recommend__list {
    list-style: none;
    max-width : 485px;
    width     : 100%;
    margin    : 15px auto 0;
    padding   : 0;
}

.recommend__list li {
    font-size    : 16px;
    padding      : 15px 50px;
    position     : relative;
    border-bottom: 1px solid #C9C9C9;
}

.recommend__list li::before {
    content        : '';
    position       : absolute;
    background     : url("../img/common/icon_check.svg") no-repeat;
    background-size: cover;
    width          : 30px;
    height         : 30px;
    left           : 0;
    top            : 50%;
    transform      : translateY(-50%);
}

/* ── Feature row (image + text) ── */
.feature {
    display              : grid;
    grid-template-columns: 1fr 540px;
    gap                  : 35px;
    margin-bottom        : 50px;
}

.feature--reverse {
    direction: rtl;
}

.feature--reverse>* {
    direction: ltr;
}

.feature__img {
    background     : #ccc;
    aspect-ratio   : 4/3;
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : #fff;
    font-size      : 15px;
    letter-spacing : 0.05em;
}

/* placeholder image icon */
.feature__img::before {
    content      : '';
    display      : block;
    width        : 48px;
    height       : 40px;
    background   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='M21 3H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 16H3V5h18v14zm-5-7-4 5-3-3.5L5 18h14z'/%3E%3C/svg%3E") center/contain no-repeat;
    margin-bottom: 10px;
}

.feature__img-wrap {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    background     : #ccc;
    aspect-ratio   : 540 / 344;
}

.feature__img-wrap span {
    color         : #fff;
    font-size     : 14px;
    margin-top    : 8px;
    letter-spacing: 0.05em;
}

.feature__text-point {
    font-size  : 24px;
    font-weight: bold;
    color      : #B4B4B4;
}

.feature__text-title {
    font-size    : 24px;
    font-weight  : bold;
    margin-bottom: 25px;
    margin-top   : 0;
    color        : #FF6E1C;
}

/* ── Pricing section ── */
.pricing {
    background   : #F5F6F7;
    padding      : 20px 30px;
    border-radius: 10px;
    margin-bottom: 40px;
}

.section-content {
    display        : flex;
    justify-content: center;
    gap            : 20px;
}

.section-content img {
    width: 50px;
}

/* ── Step flow ── */
.flow {
    margin-top: 50px;
}

.flow__heading {
    margin-bottom: 35px;
}

.step {
    position     : relative;
    display      : flex;
    align-items  : center;
    margin-bottom: 40px;
    background   : #F5F6F7;
    border-radius: 10px;
    padding      : 30px 70px;
    gap          : 70px;
}

.step+.step::before {
    position  : absolute;
    content   : "";
    background: url('../icon/arrow-orange.svg') no-repeat;
    width     : 40px;
    height    : 20px;
    top       : -30px;
    left      : 50%;
    transform : translateX(-50%);
}

.step__header {
    font-size    : 24px;
    font-weight  : bold;
    margin-bottom: 20px;
    color        : #FF6E1C;
}

.step__header span {
    margin-right: 30px;
    color       : #333333;
}

.step__img {
    width: 80px;
}

.step__text {
    line-height: 1.3;
}

/* ── ec-pageMv ─────────────────────────────────────────── */
.ec-pageMv {
    width   : 100%;
    overflow: hidden;
}

.ec-pageMv__wrap {
    position: relative;
    width   : 100%;
}

.ec-pageMv__img {
    display        : block;
    width          : 100%;
    height         : 425px;
    object-fit     : cover;
    object-position: center;
}

.ec-pageMv.ec-pageMvOrthers .ec-pageMv__img{
    height: 100px;
}

.ec-pageMv.ec-pageMvOrthers .ec-pageMv__title{
    font-size: 26px;
    margin-bottom: 0;
}

.ec-pageMv__overlay {
    position   : absolute;
    inset      : 0;
    display    : flex;
    align-items: center;
}

.ec-pageMv__inner {
    max-width: 1080px;
    width    : 100%;
    margin   : 0 auto;
}

.ec-pageMv__title {
    font-size    : 30px;
    font-weight  : bold;
    line-height  : 1.3;
    margin-bottom: 30px;
    color        : #fff;
    margin-top: 0;
}

.ec-pageMv__desc {
    font-size  : 20px;
    font-weight: 400;
    line-height: 1.5;
    color      : #fff;
}


.ec-ctaBanner {
    width          : 100%;
    background     : url('../img/common/img_bannercta.jpg') no-repeat;
    background-size: cover;
    position       : relative;
    overflow       : hidden;
}

.ec-ctaBanner::before {
    content       : "";
    position      : absolute;
    background    : rgba(88, 88, 88, 0.86);
    width         : 100%;
    height        : 100%;
    inset         : 0;
    mix-blend-mode: multiply;
}

.ec-ctaBanner__inner {
    position       : relative;
    z-index        : 1;
    max-width      : 1080px;
    margin         : 0 auto;
    padding        : 30px 0;
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 30px;
    flex-wrap      : wrap;
}

.ec-ctaBanner__text {
    color: #fff;
}

.ec-ctaBanner__title {
    font-size    : 30px;
    font-weight  : bold;
    margin-bottom: 8px;
    color        : #fff;
}

.ec-ctaBanner__sub {
    font-size  : 16px;
    font-weight: 400;
    color      : #fff;
}

.ec-ctaBanner__btns {
    display    : flex;
    gap        : 16px;
    flex-wrap  : wrap;
    align-items: center;
}

.ec-ctaBanner__btn {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    gap            : 10px;
    padding        : 10px 30px;
    font-size      : 18px;
    font-weight    : bold;
    text-decoration: none;
    cursor         : pointer;
    transition     : opacity 0.2s, transform 0.2s;
    white-space    : nowrap;
    border         : none;
    border-radius  : 5px;
    height         : 52px;
}

.ec-ctaBanner__btn:hover {
    opacity  : 0.85;
    transform: translateY(-1px);
}

/* LINE button */
.ec-ctaBanner__btn--line {
    background: #06C755;
    color     : #fff;
}

/* Mail button */
.ec-ctaBanner__btn--mail {
    background: #FF6E1C;
    color     : #fff;
}

.ec-ctaBanner__btn-icon {
    width      : 32px;
    height     : 32px;
    flex-shrink: 0;
}



.ec-article {
    padding: 30px 0;
}

.ec-article h2, .ec-article h3, .ec-article h4, .ec-article h5, .ec-article h6 {
    color: #FF6E1C;
}

.ec-article h2 {
    font-size    : 20px;
    font-weight  : bold;
    margin-top: 30px;
}

.ec-article h3 {
    font-size    : 18px;
    font-weight  : 700;
    margin-top: 30px;
}

.ec-article h4 {
    font-size    : 16px;
    font-weight  : bold;
    margin-top: 30px;
}

.ec-article p {
    margin-top: 10px;
}

.ec-article ul {
    margin-top: 10px;
}

.ec-article ul li {
    position    : relative;
    padding-left: 14px;
}

.ec-article ul li:after {
    content      : "";
    width        : 3px;
    height       : 3px;
    border-radius: 50%;
    background   : #333;
    position     : absolute;
    left         : 5px;
    top          : 11px;
}

.ec-productRole .ec-productRole__category a{
    color: #FF6E1C;
}

.ec-topicpath{
    color: #FF6E1C;
}

/* SP */
@media only screen and (max-width: 900px) {

    .ec-headerNaviRole .ec-headerNaviRole__left{
        width: 185px;
    }

    .have_curtain .ec-overlayRole{
        display: block;
    }

    .ec-drawerRole.is_active{
        display: block;
    }

    .ec-drawerRoleClose.is_active{
        display: inline-block;
    }

    .ec-itemNav__nav li{
        width: 100%;

    }

    .ec-itemNav__nav>li>a{
        text-align: left;
    }

    .ec-headerNaviRole .ec-headerNaviRole__search{
        display: none;
    }

    .ec-categoryNaviRole{
        display: none;
    }

    .ec-headerNavSP{
        display: block;
    }

    .ec-headerRole{
        width: 100%;
        flex-wrap: nowrap;
        align-items: center;
    }

    .ec-headerRole .ec-headerRole__navSP{
        display: block;
        position: unset;
    }

    .ec-imgBox{
        margin-top: 40px;
    }

    .ec-headerNaviRole {
        padding: 15px 20px;
    }

    .ec-headerNaviRole .ec-headerNaviRole__nav {
        display: none;
    }

    .ec-headerTitle .ec-headerTitle__title a {
        width    : 150px;
        font-size: 10px;
    }

    .ec-sliderRole {
        margin-bottom: 0;
    }

    /* .ec-sliderRole img {
        height: 300px;
    } */

    .ec-title__inner {
        margin-bottom: 30px;
        margin-top   : 30px;
    }

    .ec-title__jp {
        font-size: 24px;
    }

    .ec-title__en {
        font-size: 16px;
    }

    .ec-role {
        padding: 0 20px;
    }

    .ec-searchPc {
        padding      : 20px;
        margin-bottom: 30px;
    }

    .ec-searchPc__body {
        margin-bottom        : 10px;
        grid-template-columns: repeat(2, 1fr);
        gap                  : 10px;
    }

    .ec-searchPc__note {
        font-size    : 12px;
        margin-bottom: 20px;
    }

    .ec-newItemRole__listItemTitle {
        font-size: 16px;
    }

    .ec-newItemRole .ec-newItemRole__spec {
        font-size: 12px;
    }

    .ec-newItemRole .ec-newItemRole__ship {
        font-size: 12px;
    }

    .ec-newItemRole .ec-newItemRole__listItemPrice {
        font-size: 18px;
    }

    .ec-newItemRole .ec-newItemRole__listItemPrice span {
        font-size: 12px;
    }

    .ec-searchPc__btn {
        padding  : 10px;
        font-size: 14px;
    }

    .ec-newItemRole .ec-newItemRole__listItem .ec-searchPc__btn {
        margin-top: 10px;
    }

    .ec-newsRole .ec-newsRole__newsItem {
        padding: 0;
    }

    .ec-newsRole .ec-newsRole__newsDate {
        margin-top: 10px;
        font-size : 12px;
    }

    .ec-newsRole .ec-newsRole__newsTitle {
        font-size: 14px;
    }

    .ec-newsRole .ec-newsRole__newsCloseBtn {
        width : 20px;
        height: 20px;
    }

    .footer__inner {
        padding: 30px 20px;
    }

    .footer__content {
        grid-template-columns: 1fr;
        font-size            : 14px;
    }

    .footer__logo {
        margin-bottom: 15px;
    }

    .footer__menu {
        gap: 15px;
    }

    .footer__menuItem {
        width: calc((100% - 30px) / 2);
    }

    .footer__menuItem h3 {
        font-size    : 18px;
        margin-bottom: 10px;
    }

    .footer__menuItem li {
        margin-bottom: 5px;
    }

    .copyright {
        font-size : 12px;
        margin-top: 0;
    }

    .ec-shelfRole__wrap {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
    }

    .ec-productRole {
        padding   : 0 20px;
        margin-top: 40px;
    }

    .ec-grid2 {
        display       : flex;
        flex-direction: column;
        font-size     : 14px;
    }

    .ec-grid2 .ec-grid2__cell.ec-productInfo,
    .ec-grid2 .ec-grid2__cell.ec-productImage {
        width: 100%;
    }

    .ec-productRole .ec-productRole__title .ec-headingTitle {
        font-size: 24px;
    }

    .ec-price .ec-price__price {
        font-size: 24px;
    }

    .ec-productRole .ec-productRole__option {
        font-size : 24px;
        margin-top: 20px;
    }

    .ec-blockBtn--action {
        font-size: 16px;
    }

    .ec-blockBtn--cancel {
        font-size: 16px;
    }

    .ec-productRole .ec-productRole__description h3 {
        font-size: 22px;
    }

    .ec-productRole .ec-productRole__description h4 {
        font-size: 20px;
    }

    .ec-productRole .ec-productRole__description h5 {
        font-size: 18px;
    }

    .ec-productRole .ec-productRole__description h6 {
        font-size: 16px;
    }

    .cta-banner {
        padding: 20px;
    }

    .feature {
        grid-template-columns: 1fr;
        margin-bottom        : 40px;
        gap                  : 20px;
    }

    .ec-faq__wrap {
        padding: 0 20px;
    }

    .ec-pageMv__inner {
        padding: 0 20px;
    }

    .ec-pageMv__title {
        font-size    : 22px;
        margin-bottom: 10px;
        margin-top   : 0;
    }

    .ec-pageMv__desc {
        font-size: 16px;
    }

    .ec-pageMv__img {
        height: 300px;
    }

    .ec-ctaBanner__inner {
        flex-direction: column;
        padding       : 20px;

    }

    .ec-ctaBanner__title {
        font-size: 22px;
    }

    .ec-ctaBanner__sub {
        font-size: 14px;
    }

    .ec-ctaBanner__btns {
        justify-content: center;
    }

    .ec-ctaBanner__btn {
        font-size: 16px;
        min-width: 200px;
    }

    .ec-ctaBanner__btn-icon {
        width : 20px;
        height: 20px;
    }

    .recommend {
        margin-bottom: 40px;
        padding      : 20px;
    }

    .recommend__title {
        font-size: 16px;
    }

    .recommend__list li {
        font-size: 14px;
        padding  : 10px 0 10px 30px;
    }

    .recommend__list li::before {
        width : 20px;
        height: 20px;
    }

    .feature__text-title {
        font-size    : 18px;
        margin-bottom: 15px;
    }

    .feature__text {
        font-size: 14px;
    }

    .pricing {
        padding: 20px;
    }

    h3.section-heading {
        font-size : 20px;
        margin-top: 0;
    }

    .section-content {
        gap: 10px;
    }

    .pricing__sub {
        font-size: 14px;
    }

    .flow {
        margin-top: 40px;
    }

    .step {
        gap    : 10px;
        padding: 20px;
    }

    .step__header {
        font-size    : 18px;
        margin-top   : 0;
        margin-bottom: 10px;
    }

    .step__header span {
        font-size   : 16px;
        margin-right: 5px;
    }

    .step__body {
        font-size: 14px;
    }

         .ec-article h2 {
        font-size: 18px;
    }
    .ec-article h3 {
        font-size    : 16px;
    }
.ec-article h4 {
        font-size    : 14px;
    }
    .ec-article ul li:after {
        left: 7px;
    }

    .ec-faq__cats{
        margin-bottom: 40px;
    }

    .ec-faq__cat-btn{
        min-width: 100%;
    }

    .ec-faq__item{
        padding: 0 20px;
    }

    .ec-faq__question-text{
        font-size: 14px;
        gap: 5px;
        width: 92%;
    }

    .ec-faq__question-text::before{
        font-size: 20px;
    }

    .ec-faq__icon{
        width: 20px;
        height: 20px;
    }

    .ec-faq__icon::before, .ec-faq__icon::after{
        width: 11px;
        height: 1px;
        top: 9px;
        left: 4px;
    }

    .ec-faq__answer-inner{
        font-size: 14px;
        gap: 5px;
    }

    .ec-faq__answer-inner::before{
        font-size: 20px;
    }
}