/* カスタマイズ用CSS */

@import 'https://use.fontawesome.com/releases/v5.15.4/css/all.css';



html { scroll-behavior: smooth; }

body {
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;!important;
}
.ec-headerNaviRole__left h1 a {
    font-family: Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif!important;
}


/* 全体設定 */
.css-carousel-slider3 {
    max-width: 1300px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
.css-carousel-slider3 img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* スライド設定 */
.css-carousel-slider3 .slide-wrap {
    width: 300%;
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider3 15s infinite;
    animation-delay: 2s;
}
.css-carousel-slider3 .slide-wrap-main {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main3 15s infinite;
    animation-delay: 2s;
}
.css-carousel-slider3 .slide {
    width: 100%;
}

/* スライダーアニメーションの設定 */
@keyframes css-carousel-slider3 {
    0% { transform: translateX(0); }

    27.3% { transform: translateX(calc(1 / 3 * -100%)); }
    33.3% { transform: translateX(calc(1 / 3 * -100%)); }

    60.6% { transform: translateX(calc(2 / 3 * -100%)); }
    66.6% { transform: translateX(calc(2 / 3 * -100%)); }

    94% { transform: translateX(calc(3 / 3 * -100%)); }
    100% { transform: translateX(calc(3 / 3 * -100%)); }
}

@keyframes css-carousel-slider-main3 {
    0% { transform: translateX(100%); }
    66.6% { transform: translateX(100%); }
    94% { transform: translateX(0%);}
}


/* PC */
@media screen and (min-width: 768px) {


#top_block_goods, #top_block_recommend, #top_block_news {
    padding-top: 80px;
    margin-top: -80px;
}


/*
.ec-headerNaviRole {
    margin: 0 auto 0.5em!important;
}
.ec-layoutRole__contentTop {
    background-color: #000;
    color: #FFF;
    font-size: 14px;
    text-align: center;
}

.ec-newsRole__newsHeading {
    width: 800px;
    margin: 0 auto;
}
.ec-newsRole__newsDate {
    color: #fff!important;
}
.ec-newsRole__newsTitle {
    text-decoration: underline;
}
.ec-newsRole__newsColumn {
    padding-left: 5em;
    text-align: left;
}
.ec-newsRole .ec-newsRole__newsDescription a {
    display: block;
    margin: 2em 0 1em;
    color: #fff;
    font-size: 110%;
    font-weight: bold;
    text-decoration: underline;
}
#news_readmore {
    float: none!important;
}
*/


.mainvisual {
    width: 1300px;
    margin: 1em auto 0;
    text-align: center;
}
.mainvisual img {
    width: 100%;
}
.mainvisual .copy {
    margin-top: 0.5em;
}
.mainvisual img {
    background: url(../img/top_ver21/mainvisual.jpg) no-repeat;
    background-size: cover;
}
.mainvisual .suplink span {
    display: inline-block;
    margin: 1em auto;
    padding-bottom: 0.3em;
    border-bottom: #000 1px solid;
    color: #000;
    padding-top: 5px;
	background: url(../img/top_ver21/arrow2.png) no-repeat;
    background-size: 20px;
    background-position-x: right;
    background-position-y: 6px;
    font-size: 18px;
    text-align: left;
}


.top_mainblock1_ver21 h2.top_v21 {
    margin: 1.5em;
    font-size: 28px;
    text-align: left;
}
.top_mainblock1_ver21 h2.top_v21 span {
    padding-left: 1.5em;
    font-size: 15px;
}

.top_mainblock1_ver21, .top_mainblock3_ver21 {
    width: 1300px;
    margin: 2em auto 0;
    color: #000;
    /*border: #999 1px solid;*/
}


.top_mainblock1_ver21 .inner {
    text-align: center;
    vertical-align: top;
}
.top_mainblock1_ver21 .inner a {
    color: #000;
}
.top_mainblock1_ver21 .inner .recoblock {
    display: inline-block;
    width: 300px;
    height: 470px;
    margin: 0 10px;
    padding: 2em 0 0.5em;
    background-color: #EFEFEF;
    vertical-align: top;
    /*border: #999 1px solid;*/
}
.top_mainblock1_ver21 .inner .recoblock img {
    width: 100%;
}
.top_mainblock1_ver21 .inner .recoblock .pid {
    margin: 1em 0;
    font-size: 16px;
    font-weight: bold;
}
.top_mainblock1_ver21 .inner .recoblock .pprice {
    margin: 1em;
    font-size: 20px;
    font-weight: bold;
}
.top_mainblock1_ver21 .inner .recoblock .pcategory {
    margin: 1em 0 0.75em;
    /*color: #A3A3A3;*/
    font-size: 15px;
}

.top_mainblock2_ver21 {
    max-width: 1200px;
    margin: 12em auto 2em;
    text-align: center;
}
.top_mainblock2_ver21 h2 {
    margin: 1em;
}
.top_mainblock2_ver21 .inner {
    color: #3A3A3A;
    font-size: 18px;
    line-height: 1.8em;
}
.top_mainblock2_ver21 .inner p.suptitle strong {
    font-family: Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif!important;
}

.top_mainblock3_ver21 {
    max-width: 1270px;
    margin: 10em auto 0;
}
.top_mainblock3_ver21 h2.top_v21 {
    margin: 1.5em 0 0.75em;
    padding-bottom: 0.25em;
    border-bottom: #555 2px solid;
    font-size: 32px;
    text-align: center;
}
.top_mainblock3_ver21 p.h2under {
    margin: -0.5em 0 3em;
    color: #555;
    font-size: 19px;
    line-height: 1.6em;
    text-align: center;
}

.top_mainblock3_ver21 .inner .supblock1 {
    display: inline-block;
    width: 450px;
    /*border: #656565 1px solid;*/
}
.top_mainblock3_ver21 .inner .supblock1 img {
    width: 100%;
}
.top_mainblock3_ver21 .inner .supblock1 .main1 img {
    background: url(../img/top_ver21/visual01.jpg) no-repeat;
    background-size: cover;
}
.top_mainblock3_ver21 .inner .supblock1 .main2 img {
    background: url(../img/top_ver21/visual02.jpg) no-repeat;
    background-size: cover;
}
.top_mainblock3_ver21 .inner .supblock1 img.p2 {
    margin: 1em 0 0.5em;
    /*border: #656565 1px solid;*/
}
.top_mainblock3_ver21 .inner .supblock2 {
    display: inline-block;
    width: 750px;
    margin-left: 50px;
    font-size: 18px;
    vertical-align: top;
}
.top_mainblock3_ver21 h4 {
    margin: 0 0 1.5em;
    font-size: 15px;
}
.top_mainblock3_ver21 h3 {
    margin: 0;
    font-size: 30px;
}
.top_mainblock3_ver21 .inner .supblock2 .suptitle {
    margin: 1.25em 0 2em;
    font-size: 18px;
}
.top_mainblock3_ver21 .inner .supblock2 .suptitle span {
    background-color: #000;
    color: #fff;
    padding: 0.2em;
    font-size: 14px;
}
.top_mainblock3_ver21 .inner .supblock2 .suptitle span.span2 {
    background-color: #f00;
}
.top_mainblock3_ver21 .inner .supblock2 .suptitle span.span3 {
    background-color: #fff;
    color: #f00;
    font-weight: bold;
}
.top_mainblock3_ver21 .inner .supblock2 .supcom {
    margin: 2.5em 0 2.5em;
    line-height: 1.75em;
    font-size: 17px;
}
.top_mainblock3_ver21 .inner .supblock2 .suplink {
    margin: 1.5em 0;
    font-size: 16px;
}
.top_mainblock3_ver21 .inner .supblock2 .suplink2 {
    margin: -0.75em 0;
    font-size: 13px;
}
.top_mainblock3_ver21 .inner .supblock2 .suplink a, .top_mainblock3_ver21 .inner .supblock2 .suplink span {
    padding-bottom: 0.5em;
    border-bottom: #000 1px solid;
    color: #000;
    padding-top: 5px;
	background: url(../img/top_ver21/arrow.png) no-repeat;
    background-size: 20px;
    background-position-x: right;
    background-position-y: 2px;
}
.top_mainblock3_ver21 .inner .supblock2 .suplink a:hover {
    text-decoration: none;
}






.toggle_title {
	cursor: pointer;
}
.toggle_title span {
    padding-top: 5px;
	background: url(../img/top_ver21/arrow.png) no-repeat;
    background-size: 20px;
    background-position-x: right;
    background-position-y: 2px;
    transition: all 0.5s 0s ease;
}
.toggle_box {
	display: none;
	margin-bottom: 1.5em;
    font-size: 14px;
    line-height: 1.75em;
}

.supblock2 .selected span {
    padding-top: 5px!important;
	background: url(../img/top_ver21/arrow2.png) no-repeat!important;
    background-size: 20px!important;
    background-position-x: right!important;
    background-position-y: 2px!important;
    transition: all 0.5s 0s ease;
}






.pc { display: block; }
.sp { display: none; }

}



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



.mainvisual {
    text-align: center;
}
.mainvisual .copy {
    margin: 0.5em;
    font-size: 11px;
}
.mainvisual img {
    background: url(../img/top_ver21/mainvisual.jpg) no-repeat;
    background-size: cover;
}
.mainvisual .suplink span {
    display: inline-block;
    margin: 1em auto;
    padding-bottom: 0.3em;
    border-bottom: #000 1px solid;
    color: #000;
    padding-top: 5px;
	background: url(../img/top_ver21/arrow2.png) no-repeat;
    background-size: 20px;
    background-position-x: right;
    background-position-y: 6px;
    font-size: 16px;
    text-align: left;
}


.top_mainblock1_ver21 {
    margin-top: -6em
}
.top_mainblock1_ver21 h2.top_v21 {
    margin: 2em 0 0.5em;
    font-size: 26px;
    text-align: center;
}

.top_mainblock1_ver21 .inner {
    text-align: center;
}
.top_mainblock1_ver21 .inner a {
    color: #000;
}
.top_mainblock1_ver21 .inner .recoblock {
    display: inline-block;
    width: 47.5%;
    margin: 4px 2px;
    padding: 2em 0 0.5em;
    background-color: #EFEFEF;
    /*border: #999 1px solid;*/
}
.top_mainblock1_ver21 .inner .recoblock img {
    width: 100%;
}
.top_mainblock1_ver21 .inner .recoblock .pid {
    margin: 1em 0;
    font-size: 14px;
    font-weight: bold;
}
.top_mainblock1_ver21 .inner .recoblock .pprice {
    margin: 1em;
    font-size: 16px;
    font-weight: bold;
}
.top_mainblock1_ver21 .inner .recoblock .pcategory {
    margin: 1em 0;
    color: #A3A3A3;
    font-size: 12px;
}

.top_mainblock2_ver21 {
    width: 90%;
    margin: 6em auto 1em;
    text-align: center;
}
.top_mainblock2_ver21 h2 {
    margin: 1em;
    font-size: 22px;
    font-weight: bold;
}
.top_mainblock2_ver21 .inner {
    color: #3A3A3A;
    font-size: 16px;
    line-height: 1.65em;
    text-align: left;
}

.top_mainblock3_ver21 {
    width: 90%;
    margin: 6em auto;
    text-align: center;
}
.top_mainblock3_ver21 p.h2under {
    margin: -0.5em 0 0.5em;
    color: #555;
    font-size: 14px;
    text-align: left;
}
.top_mainblock3_ver21 h2.top_v21 {
    margin: 1.5em 0 0.75em;
    padding-bottom: 0.5em;
    font-size: 22px;
    font-weight: bold;
    border-bottom: #555 1px solid;
}
.top_mainblock3_ver21 .inner .supblock1 {
    /*border: #656565 1px solid;*/
}
.top_mainblock3_ver21 .inner .supblock1 .main1 img {
    background: url(../img/top_ver21/visual01.jpg) no-repeat;
    background-size: cover;
}
.top_mainblock3_ver21 .inner .supblock1 .main2 img {
    background: url(../img/top_ver21/visual02.jpg) no-repeat;
    background-size: cover;
}
.top_mainblock3_ver21 .inner .supblock1 img.p2 {
    margin: 1em 0 0.5em;
    /*border: #656565 1px solid;*/
}

.top_mainblock3_ver21 .inner .supblock2 {
    width: 95%;
    margin: 2em auto;
    font-size: 16px;
}
.top_mainblock3_ver21 h4 {
    margin: 0 0 1.5em;
    font-size: 15px;
}
.top_mainblock3_ver21 h3 {
    margin: 0;
    font-size: 30px;
}

.top_mainblock3_ver21 .inner .supblock2 .suptitle {
    margin: 1.25em 0 2em;
    font-size: 22px;
    font-weight: bold;
}
.top_mainblock3_ver21 .inner .supblock2 .suptitle span {
    background-color: #000;
    color: #fff;
    padding: 0.2em;
    font-size: 15px;
}
.top_mainblock3_ver21 .inner .supblock2 .suptitle span.span2 {
    background-color: #f00;
}
.top_mainblock3_ver21 .inner .supblock2 .suptitle span.span3 {
    background-color: #fff;
    color: #f00;
    font-weight: bold;
}
.top_mainblock3_ver21 .inner .supblock2 .supcom {
    margin: 1.5em 0 2.5em;
    line-height: 1.75em;
    text-align: left;
}
.top_mainblock3_ver21 .inner .supblock2 .suplink {
    margin-bottom: 1.5em;
    font-size: 16px;
    text-align: left;
}
.top_mainblock3_ver21 .inner .supblock2 .suplink2 {
    margin: -0.75em 0 1em;
    font-size: 13px;
    text-align: left;
}
.top_mainblock3_ver21 .inner .supblock2 .suplink a, .top_mainblock3_ver21 .inner .supblock2 .suplink span {
    padding-bottom: 0.5em;
    border-bottom: #000 1px solid;
    color: #000;
    padding-top: 5px;
	background: url(../img/top_ver21/arrow.png) no-repeat;
    background-size: 20px;
    background-position-x: right;
    background-position-y: 2px;
}
.top_mainblock3_ver21 .inner .supblock2 .suplink a:hover {
    text-decoration: none;
}

.toggle_title {
	cursor: pointer;
}
.toggle_title span {
    padding-top: 5px;
	background: url(../img/top_ver21/arrow.png) no-repeat;
    background-size: 20px;
    background-position-x: right;
    background-position-y: 2px;
    transition: all 0.5s 0s ease;
}
.toggle_box {
	display: none;
	margin-bottom: 1.5em;
    font-size: 14px;
    line-height: 1.75em;
    text-align: left;
}

.supblock2 .selected span {
    padding-top: 5px!important;
	background: url(../img/top_ver21/arrow2.png) no-repeat!important;
    background-size: 20px!important;
    background-position-x: right!important;
    background-position-y: 2px!important;
    transition: all 0.5s 0s ease;
}

.ec-role {
    margin-top: -6em;
}




.pc { display: none; }
.sp { display: block; }

}