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

	共通

* ============================================================= */

html{
  scroll-behavior: smooth;
}

body {
    font-family:'Noto Serif JP',游明朝体, "Yu Mincho", YuMincho, yu-mincho-pr6n, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", source-han-serif-japanese, serif;
    font-weight: 300;
    font-style: inherit;
    color: #000;
}


#page_homepage .ec-layoutRole{

    background: #f0f5f0;
}

a{
    color: #000;
}
a:hover{
    color: #000;
    text-decoration: none;
    opacity: 0.5;
}


.ec-layoutRole .ec-layoutRole__contents{
   max-width: 1200px;
}

.wrap{
    display: flex;
    flex-wrap: wrap;
}

img {
    display: block;
    margin: auto;
    width: 100%;
}

hr{
    margin: 94px 0 !important;
}



ul{
    list-style: none;
    padding: 0;
}

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

/*点線*/
.example {
  height: 1px;
  position: relative;
  margin: 8px 0;
}

.example::before {
    content: "";
    background-image: linear-gradient(to right, #000, #000 2px, transparent 2px, transparent 8px);
    background-size: 7px 1px;
    background-repeat: repeat-x;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/*moreボタン*/
.ec-inlineBtn--top{
display:block;
margin: 20px auto;
width: 200px;
}

@media only screen and (max-width: 850px){
hr{
    margin: 45px 0;
}
    
    
.pc{
    display: none;
}
.sp {
    display: block;
}
.ec-layoutRole .ec-layoutRole__mainWithColumn {
    width: 100%;
}
}



/* =============================================================

	HEADER

* ============================================================= */

#top-header{
    position: relative;
    display: block;
    animation-name: fade;
    animation-duration: 1s;
    background: #f0f5f0;
    padding: 50px 0 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    z-index: 1000;
}

#top-header .img{
    margin-bottom: 50px;
    width: 293px;
}

.ec-headerNaviRole__nav .ec-headerNav {
    padding: 0;
    margin-bottom: 0;
}

.ec-headerNaviRole .ec-headerNaviRole__right{
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: solid 1px;
    border-bottom: solid 1px;
    height: 100px;
    width: 100%;
}


.ec-headerNaviRole .ec-headerNaviRole__right .nav-l .nav-list,
.ec-headerNaviRole .ec-headerNaviRole__right .nav-r
{
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    
}

.ec-headerNaviRole .ec-headerNaviRole__right .nav-l .nav-list{
    list-style: none;
}

.ec-headerNaviRole .ec-headerNaviRole__right .nav-l .nav-list li{
    padding-right: 50px;
}



.ec-headerNaviRole .ec-headerNaviRole__right .nav-l .nav-list > li[class*=current] > a,
.ec-headerNaviRole .ec-headerNaviRole__right .nav-l .nav-list > li a:hover,
.ec-headerNaviRole .ec-headerNaviRole__right .nav-r .nav-list > li[class*=current] > a,
.ec-headerNaviRole .ec-headerNaviRole__right .nav-r .nav-list > li a:hover
{
      border-bottom: solid 2px #008045;
      padding-bottom: 5px;
      margin-top: 7px;
      opacity: 1;
}

/*検索窓*/

.ec-headerNaviRole .ec-headerNaviRole__left {
    position: absolute;
    top: 65px;
    right: 20px;
    max-width: 400px;
    width: 100%;
}

.ec-headerSearch .ec-headerSearch__keyword {
    background-color: #fff;
    border: none;
    border-radius: 50px;
    width: 100%;
}

#top-header .ec-headerSearch .ec-headerSearch__keyword {
    background-color: #fff;
    border: none;
    border-radius: 50px;
    width: 400px;
}
.ec-headerSearch .ec-headerSearch__keywordBtn {
    left: 5px;
    width: 22px
}

.ec-headerSearch .ec-headerSearch__keyword input[type="search"] {
    border-radius: 100px;
    padding: 0.5em 1em 0.5em 50px;    background: #fff;
}

.ec-headerNaviRole .ec-headerNaviRole__nav a{
    display: flex;
    align-items: center;
    margin-top: 5px;
}



.ec-headerNav .ec-headerNav__item img {
    display: inline-block;
    height: 19px;
    width: 20px;
}

.ec-cartNavi {
    background: none;
    min-width: auto;
}

.ec-cartNavi .ec-cartNavi__label{
    display: none;
}


/*ハンバーガーメニュー*/

#page_homepage .ec-headerNavSP{
    display: block !important;
}

.ec-headerNavSP {
    border-radius: 0;
    left: auto;
    right: 40px;
    top: 50px;
    background: none;
    background-image: url(/html/template/default/assets/icon/icon-nav-btn.svg);
    background-repeat: no-repeat;
    background-position: center;
    height: 80px;
    width: 60px;
}

.ec-headerNavSP .fas {
    display: none;
}

.ec-headerNaviRole{
    padding: 0;
}

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

.ec-drawerRoleClose.is_active {
    display: block;
    z-index: 1200;
}

.have_curtain .ec-overlayRole {
    display: block;
    z-index: 1100;
}

.ec-headerCategoryArea .ec-itemNav__nav {
    display: block;
}

.ec-headerCategoryArea .ec-itemNav__nav li {
    float: none;
    width: 100%;
}

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

.fa-times:before {
    content: "\f00d";
}

/*ロゴ*/
.ec-headerRole {
    display: none;
}

/*カテゴリナビ（SP）*/
.sp_nav li ul {
display: none ;
z-index: 0;
position: static;
}
.sp_nav li ul li {
height: auto;
}



/*下層ページヘッダー*/

.ec-headerTitle .ec-headerTitle__title {
    text-align: center;
    position: relative;
    height: 80px;
}

.ec-headerTitle .ec-headerTitle__title a {
    position: absolute;
    top: 20px;
    left: 23px;
    margin-bottom: 0;
    width: 138px;
}


@media only screen and (max-width: 1400px){
.ec-headerNaviRole .ec-headerNaviRole__right {
    display: block;
}

.ec-headerNaviRole .ec-headerNaviRole__right .nav-l{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
}

.ec-headerNaviRole .ec-headerNaviRole__right .nav-l .nav-list li {
    padding-right: 30px;
}
.ec-headerNaviRole .ec-headerNaviRole__right .nav-l .nav-list, .ec-headerNaviRole .ec-headerNaviRole__right .nav-r{
justify-content: center;
}
}

@media only screen and (max-width: 1200px){
.ec-headerNaviRole .ec-headerNaviRole__left {
    max-width: 250px;
}
#top-header .ec-headerSearch .ec-headerSearch__keyword {
    width: 250px;
}
}


@media only screen and (min-width: 850px){
.ec-headerNavSP {
    position: absolute;
}
}

@media only screen and (max-width: 850px){
.ec-headerRole {
    display: block;
    padding: 0;
}
.ec-headerNavSP {
    display: block;
    right: 20px;
    top: 20px;
    background-image: url(/html/template/default/assets/icon/icon-nav-btn2.svg);
    height: 42px;
    width: 42px;
}
#top-header{
display: none;
}
}




/* =============================================================

	FOOTER

* ============================================================= */
.ec-footerRole {
    background: #e9e9da;
    border-top: none;
    padding: 80px 0 45px;
}

.ec-footerRole .ec-footerRole__inner{
    padding-left: 0;
    padding-right: 0;
    margin: 0 auto;
    max-width: 1200px;
}


.ec-footerRole .footer_l{
width: 25%;
}

.ec-footerRole .footer_r{
    gap: 60px;
    width: 75%;
}

.ec-footerRole .footer_l .logo{
    margin: 0;
    width: 220px !important;
}

.ec-footerRole .footer_r .bnr{
    margin: 0;
    width: 159px !important;
}

.ec-footerRole .footer_r .nav dt{
    font-family: "游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
    color: #000;
}

.ec-footerRole .footer_r .nav ul{
    list-style: none;
    border-left: solid 1px;
    padding-left: 15px;
    margin: 0 0 0 30px;
    height: auto;
}

.ec-footerRole .footer_r .nav ul li a{
    font-weight: bold;
    background: url(/html/template/default/assets/img/common/arrow.png) no-repeat left top 2px;
    padding-left: 20px;
}

.ec-footerTitle{
    background: #000 !important;
    padding: 20px !important;
}

@media only screen and (max-width: 1200px){
    .ec-footerRole .ec-footerRole__inner{
    max-width: 768px;
}
.ec-footerRole .footer_l {
    width: 100%;
}

.ec-footerRole .footer_l .logo{
    margin: 0 auto 40px;
}

.ec-footerRole .footer_r {
    width: 100%;
}
}

@media only screen and (max-width: 850px){
.ec-footerRole .footer_r {
    justify-content: center;
}}
@media only screen and (max-width: 849px){
.ec-footerRole {
    padding: 40px 40px 0;
}
.ec-footerRole .footer_r{
    display: none;
}}

/* 23.10.11 追加 フッターInstagram周辺アイコン */
.ec-footerRole .footer_banner{
    display: flex;
    flex-wrap: wrap;
    width: 159px;
}

.ec-footerRole .footer_banner li{
    width:100%;
}

.ec-footerRole .footer_banner li.mb1em{
    margin-bottom:1em;
}
/* =============================================================

	TOP

* ============================================================= */

.top-main{
    height: 100vh;
}

.top-main .message{
    position: relative;
    width: 43%;
}

.top-main .message .logo {
    position: absolute;
    top:50px;
    left: 40px;
    display: inline-block;
}
.top-main .message .logo img{
    width: 138px;
}

.top-main .message .text{
    display: flex;
    background: #fff;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.top-main .message .text p{
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    font-size: 16px;
    font-weight: 500;
    line-height: 2.2;
    margin: 50px auto 70px;
}

.top-main .message .img {
    position: absolute;
    right: 78px;
    bottom: 90px;
    max-width: 250px;
}


.top-main .main_visual{
    width: 57%;
}

.top-main .main_visual .item{
    height: 100vh;
}


.top-main .shopping-btn{
    position: absolute;
    bottom: 40px;
    right: 40px;
}

.top-main .shopping-btn:hover{
    opacity: 1;
}


/*おすすめ商品*/

#pickup{
    margin: 197px auto 86px;
    position: relative;
    max-width: 1200px;
    width: 100%;
}

#pickup h2{
    position: absolute;
    top: -146px;
    z-index: 2; 
}


#pickup h2 img{
    width: auto;
}

#pickup .l-block,
#pickup .r-block{
    width: 50%;
}

#pickup a{
    position:relative;
}

#pickup a .text{
    position: absolute;
    left: 33px;
    bottom: 28px;
}

#pickup a .text h3{
    color: #fff;
    line-height: 0.7;
    margin: 0 0 38px;
}

#pickup a .text .setoka{
    font-size: 72px;
}

#pickup a .text .tomato,
#pickup a .text .buntan{
    font-size: 50px;
}


#pickup a .text .strawberry,
#pickup a .text .melon,
#pickup a .text .watermelon,
#pickup a .text .kiwi
{
    font-size: 48px;
    line-height: 1;
    margin: 0;
}

#pickup a .text p{
    font-size: 18px;
    color: #fff;
    position:relative;
}

#pickup a .text p::before{
content: "";
    display: block;
    background-color: #fff;
    position: absolute;
    left: 0px;
    top: -12px;
    height: 1px;
    width: 86px;
}


/*新着情報*/
.ec-newsRole{
    padding: 0;
}

.ec-newsRole .ec-newsRole__newsClose {
    z-index: 100;
}

#top-news .ec-newsRole .ec-secHeading{
position: relative;
}


#top-news .title img{
    width: 201px;
}

#top-news .ec-newsRole .ec-secHeading .bg-img{
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    left: 46%;
    transform: translateX(-46%);
   -webkit-transform: translateX(-46%);
    width: 178px;
}

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

#top-news .ec-newsRole .ec-newsRole__newsDate{
    display: flex;
    align-items: center;
    color: #969696;
}

#top-news .ec-newsRole .ec-newsRole__newsTitle{
    color: #000;
}

#top-news .ec-newsRole .ec-newsRole__newsItem:not(:last-of-type) {
    border-bottom: none;
    padding: 28px 0 0;
    position: relative;
}

#top-news .ec-newsRole .ec-newsRole__newsItem:not(:last-of-type)::after{
    content: "";
    background-image: linear-gradient(to right, #000, #000 2px, transparent 2px, transparent 8px);
    background-size: 7px 1px;
    background-position: bottom;
    background-repeat: repeat-x;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}


/*キャンペーン*/

#campaign{
    margin-bottom: 94px;
}

#campaign .ec-secHeading{
    position: relative;
}


#campaign .title{
    margin: 115px 0 53px;
}

#campaign .title img{
    width: 201px;
}

#campaign .ec-secHeading .bg-img{
    mix-blend-mode: multiply;
    position: absolute;
    top: 18%;
    left: 46%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    width: 178px;
}

#campaign .bnr{
    display: block;
    margin-bottom: 28px;
}
#campaign .kodawari{
    justify-content: space-between;
}
#campaign .kodawari a{
width: 47.2%;
}

/*人気ランキング*/
#ranking .title{
margin: 115px 0 0;
}

#ranking .ec-secHeading {
    position: relative;
}

#ranking .title img {
    width: 201px;
}

#ranking .ec-secHeading .bg-img {
    mix-blend-mode: multiply;
    position: absolute;
    top: -25px;
    right: 40%;
    transform: translateX(40%);
    -webkit-transform: translateX(40%);
    width: 178px;
}

#ranking .ranking-list{
    justify-content: space-between;
}
#ranking .ranking-list li{
    text-align: center;
    margin-bottom: 15px;
    width: 240px;
}
#ranking .ranking-list li .name{
    font-family: "游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}
#ranking .ranking-list li .price{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    margin-bottom: 10px;
}
#ranking .ranking-list li .price span{
    font-size: 12px;
    font-weight: bold;
    border: solid 1px;
    border-radius: 5px;
    padding: 1px 5px;
    margin-left: 12px;
}
#ranking .ranking-list li .list-tag{
    justify-content: center;
}


#ranking .ranking-list li .list-tag p{
    font-size: 14px;
    padding: 5px;
    margin-right: 10px;
}

#ranking .ranking-list li .list-tag p:last-child{
    margin-right: 0px;
}


#ranking .ranking-list li .list-tag .tag01{
    background-color: #bbf0ee;
}

#ranking .ranking-list li .list-tag .tag02{
    background-color: #82c9e4;
}

#ranking .ranking-list li a:hover{
    opacity: 1;
}
#ranking .ranking-list li a img:hover{
    background-color: #fff;
}

/*sns*/
#sns.wrap{
    justify-content: space-between;
}

#sns.wrap .facebook{
width: 47.2%;
}

.fb-page{
    width: 338px;
}

/* =============================================================

	左側ナビゲーション

* ============================================================= */
#side_nav{
    max-width: 253px;
    margin-top: 30px;
}

#side_nav h2{
    font-size: 18px;
    border-bottom: solid 1px;
    padding-bottom: 10px;
    margin: 75px 0 30px;
}

#side_nav ul{
    list-style: none;
    padding: 0;
    margin: auto;
    width: 205px;
}

#side_nav ul li{

}


#side_nav ul li:last-child{
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

#side_nav ul li a {
    font-weight: bold;
    background: url(/html/template/default/assets/img/common/arrow02.png) no-repeat left top 2px;
    padding-left: 20px;
}

#side_nav .bnr{
    margin-top: 75px;
}

#side_nav .bnr img{
    padding-bottom: 28px;
}

@media only screen and (max-width: 850px){
.ec-layoutRole .ec-layoutRole__left{
    display: none;
}
}

/* =============================================================

	モバイルナビゲーション

* ============================================================= */
#guide_nav{
    margin: 142px 15px 0;
}

#guide_nav h2{
    font-size: 21px;
    border-bottom: solid 2px;
    padding-bottom: 10px;
    margin: 75px 0 30px;
}

#guide_nav ul{
    list-style: none;
    padding: 0;
    margin: auto;
    width: 100%;
}

#guide_nav ul li{
    margin-bottom: 5px;
}
#guide_nav ul li:last-child{
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

#guide_nav ul li a {
    font-size: 18px;
    background: url(/html/template/default/assets/img/common/arrow02.png) no-repeat left top 3px;
    padding-left: 20px;
}

#guide_nav .bnr{
    margin-top: 75px;
}

#guide_nav .bnr img{
    padding-bottom: 28px;
}


@media only screen and (min-width:769px) and (max-width:1100px){
#pickup a .text .setoka,
#pickup a .text .tomato,
#pickup a .text .buntan,
#pickup a .text .strawberry,
#pickup a .text .melon,
#pickup a .text .watermelon,
#pickup a .text .kiwi
{
    font-size: 40px;
}

#pickup a .text h3 {
    margin: 0px 0px 28px;
}

#pickup a .text p{
    font-size: 14px;
}
}

@media only screen and (max-width: 1020px){
#ranking{
    margin: 0 15px;
}
#ranking .ranking-list li{
    width: 45%;
}
}

@media only screen and (max-width: 850px){
    
.top-main {
    height: auto;
}

.top-main .message {
    width: 100%;
}
.top-main .message .logo {
    top: 20px;
    left: 23px;
}

.top-main .message .title {
    margin-top: 120px;
}

.top-main .message .text p {
    font-size: 13px;
    margin: 37px auto 124px;
}

.top-main .message .img {
    right: 120px;
    bottom: 0px;
    max-width: 205px;
}

.top-main .main_visual {
    width: 100%;
}

.top-main .main_visual .item {
    height: 448px;
}

.slick-slider {
    height: 448px !important;
}


.top-main .shopping-btn {
    display: none;
}

#pickup h2 img {
    width: 90%;
}

#pickup .l-block,
#pickup .r-block{
    width: 100%;
}

#pickup .r-block .wrap .l-block,
#pickup .r-block .wrap .r-block{
    width: 50%;
}

#pickup {
    margin: 197px 15px 86px;
    width: auto;
}

#pickup a .text {
    left: 15px;
    bottom: 18px;
}

#pickup a .text .setoka,
#pickup a .text .tomato,
#pickup a .text .buntan{
    font-size: 36px;
}

#campaign{
    margin: 0 15px 94px;
}

#campaign .wrap{
    justify-content: space-between;
}

#campaign .wrap a{
        width: 45%;
}

#campaign .bnr{
    margin-bottom: 0;
}

#campaign .kodawari {
    gap: 45px;
}



#sns.wrap{
    display: block;
}

#sns.wrap .facebook{
width: 100%;
}

.fb-page{
    margin: auto;
    display: block !important;
}

#guide_nav .wrap{
    justify-content: space-between;
}
#guide_nav .wrap a{
    width: 45%;
}
}
@media only screen and (min-width:541px) and (max-width:850px){
    #pickup a .text p{
        font-size: 14px;
    }
}
@media only screen and (max-width: 540px){
    
.top-main .message .img {
    right: 7px;
    bottom: 0px;
    max-width: 205px;
}
    
#pickup {
    
    margin: 80px 15px 86px;
    width: auto;
}
#pickup h2 {
    position: absolute;
    top: -84px;
    z-index: 2;
    margin: 0;
}

#pickup a{
    height: auto;
}


#pickup a .text {
width: 300px;
}

#pickup a .text h3 {
    margin: 0px 0 26px;
}

#pickup a .text p {
    font-size: 11px;
}

#pickup a .text p::before{
    top: -9px;
    width: 50px;
}
#pickup a .text .strawberry,
#pickup a .text .melon,
#pickup a .text .watermelon,
#pickup a .text .kiwi {
    font-size: 27px;
}

#pickup .r-block .wrap .l-block .text,
#pickup .r-block .wrap .r-block .text {
    width: 150px;
}

#ranking .ec-secHeading .bg-img{
    right: 0%;
    transform: translateX(10%);
    -webkit-transform: translateX(10%);
}
#ranking .ranking-list li{
    width: 100%;
}

#ranking .ranking-list li .name{
    font-size: 24px;
}

#top-news .ec-newsRole .ec-newsRole__newsDate{
    margin: 0 10px 5px 0;
}

#top-news .ec-newsRole .ec-newsRole__newsHeading {
    display: flex;
}

.ec-newsRole .ec-newsRole__newsColumn {
    width: 100%;
}
#campaign .wrap a{
        width: 100%;
}
#campaign .bnr{
    margin-bottom: 28px;
}
#guide_nav .wrap a{
    width: 100%;
}
}


/*アンドロイド端末だけに適用されるコード*/

@media only screen and (max-width: 540px){
body.Android #pickup .l-block a .text,
body.Android #pickup .r-block a .text-sp
{
top: 100px;
bottom: 0;
}}


/* 23.10.11追加 左メニューバーInstagramアイコン */
.instagram_icon{
background: url(https://www.seikanohotta.jp/html/template/default/assets/icon/instagram_logo_wh.svg) no-repeat;
background-position: center center;
width: 18px;
display: inline-block;
aspect-ratio: 1 /1;
margin-right: 11px;
}