/* ===== Base ===== */
:root{
  --lp-max: 1000px;
  /*--bg-soft: #e8f6d7;*/
  --orange: #ff7a00;
  --text: #1d1d1d;
  --muted: #4b4b4b;
  --radius: 18px;
}

body{
  margin: 0;
  background: #fff; /* 1000pxより外側は白 */
  color: var(--text);
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

.lp{
  max-width: var(--lp-max);
  margin: 0 auto;
}
main{
    background-image: url("../images/mikan/back_green.jpg");
    background-repeat:repeat-y;
}

/* 共通余白 */
.hero__inner,
.intro__inner,
.calendar__inner,
.varieties__inner,
.map__inner,
.shop__inner,
.contact__inner{
  padding: 28px 22px;
}

/* 見出し */
.section-title{
  margin: 0 0 10px;
  text-align: center;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.25;
  font-size: clamp(20px, 2.4vw, 30px);
}
.section-title--orange{
  color: #e95400;
}

.lead{
  margin: 0 0 16px;
  text-align: center;
  color: var(--muted);
  line-height: 1.8;
  font-size: 14px;
}

/* ===== 1) Hero ===== */
.hero-pc img{
  max-width: 1000px;
  min-width: 600px;
  width: 100%;
  height: auto;
  display: block;
  margin-top: 30px;
}
.hero-sm img{
    display: none;
}

.hero__badges{
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.badge{
  background: #ffd54a;
  border-radius: 999px;
  padding: 10px 12px;
  text-align: center;
  font-weight: 800;
  font-size: 12px;
  line-height: 1.2;
}
.badge--vit{
  background: #ffe680;
}

.hero__title{
  margin: 0;
  color: #fff;
  text-align: center;
  font-weight: 900;
  letter-spacing: .04em;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
  font-size: clamp(28px, 3.5vw, 44px);
  padding-bottom: 6px;
}

/* ===== 2) Intro ===== */

.section-title{
    margin-top: 50px;
}

.intro__text{
  margin-top: 0px;
  text-align: center;
  color: #2c2c2c;
  line-height: 1.9;
  font-size: 14px;
  max-width: 720px;
  margin-inline: auto;
}

/* ===== 3) Calendar ===== */

.calendar__figure{
  margin: 14px 0 0;
  display: grid;
  place-items: center;
}
.calendar__img{
  width: 100%;
  max-width: 860px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  background: #fff;
}
.calendar__note{
  margin: 12px 0 0;
  text-align: center;
  font-size: 13px;
  color: #2c2c2c;
}

/* ===== 4) Varieties ===== */

.cards{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* PC */
  gap: 18px;
}
.card{
  background: none;
  border-radius: var(--radius);
  padding: 14px 14px 16px;
  box-shadow: none;
}
.card__img{
  width: 110%;
  margin-left: -10px;
  height: auto;
  object-fit: contain;
  display: block;
}
.card__title{
  margin: -10px 0 4px;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
}
.card__meta{
  margin: 0;
  text-align: center;
  font-weight: 800;
  font-size: 12px;
  color: #0f7a2b;
}
.card__text{
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: #2a2a2a;
}

/* ===== 5) Map ===== */

.map__text{
  margin: 0 auto 14px;
  max-width: 820px;
  text-align: center;
  color: var(--muted);
  line-height: 1.9;
  font-size: 14px;
}
.map__box{
  background: rgba(255,255,255,.8);
  border-radius: var(--radius);
  min-height: 220px;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}
.map__box img,
.map__box iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.map__placeholder{
  margin: 0;
  color: #6b6b6b;
  font-weight: 700;
}

/* ===== 6) Shop ===== */
.shop{
    max-width: 1000px;
    margin: 0 auto;
}
.shop__inner{
    background-image: url("../images/mikan/back_green.jpg");
    background-repeat:repeat-y;
}
.shop__panel{
  background: rgba(255,255,255,.88);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}
.shop__title{
  margin: 0 0 12px;
  text-align: center;
  font-weight: 900;
  color: #0f7a2b;
  letter-spacing: .02em;
  font-size: clamp(16px, 2vw, 22px);
}
.shop__grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 14px;
  align-items: start;
}
.shop__photo{
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.shop__photo img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.shop__desc{
  color: #2a2a2a;
  line-height: 1.9;
  font-size: 14px;
}

/* ===== 7) Contact ===== */

/*********** お問い合わせ　[パソコン] ***********************************

        .contact {
            margin: 0 auto;
            max-width: 1000px;
            width: 100%;
            background-image: url("../images/mikan/back_green.jpg");
    background-repeat:repeat-y;
        }
.contact-button {
            display: flex;
            margin: 0 auto;
            flex-direction:row;/* 右方向に横並び *
            max-width: 1000px;
            width: 100%;
            background-image: url("../images/mikan/back_green.jpg");
    background-repeat:repeat-y;
        }
.contact__inner{
    margin-top: -30px;
            margin-bottom: 50px;
}



/* ===== Responsive ===== */
/* 600px以下（スマホ） */
@media (max-width: 600px){
  .hero__badges{
    grid-template-columns: 1fr;
  }
    
.hero-pc img{
  display: none;
}
.hero-sm img{
  max-width: 599px;
  width: 100%;
  height: auto;
  display: block;
  margin-top: 30px;
}
    
.intro{
  background:
    /*linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.60)),*/
    url("../images/mikan/sea-sm.jpg") center/cover no-repeat;
    height: auto;
}
  .cards{
    grid-template-columns: 1fr;
  }
  .shop__grid{
    grid-template-columns: 1fr;
  }
  .cta{
    grid-template-columns: 1fr;
  }
    
.card{
  background: rgba(255,240,116,0.88);
  border-radius: var(--radius);
  padding: 5px 14px 5px;
  box-shadow: 0 10px 18px rgba(0,0,0,.30);
}
.card__title{
  margin: -5px 0 4px;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
}
    
/*********** お問い合わせ　[スマートフォン] ***********************************/

    .contact{
        width: 100%;
        margin: 0 auto;
        background-image: url("../images/mikan/back_green.jpg");
    background-repeat:repeat-y;
    }
    .contact-button{
        display:flex;
        flex-direction: column;/* 右方向に横並び */
        align-items:center;
        width: 100%;
        margin: 0 auto;
    }

    .contact-tel {
        width: 100%;
        margin-left: 20px;
    }
    .contact-tel img {
        width: 90%;
    }

    .contact-web {
        width: 100%;
    }
    .contact-web img {
        width: 90%;
    }

}



/* 601〜800px（タブレット） */
@media (min-width: 601px) and (max-width: 850px){
    
    .hero-pc {
        margin-top: 80px;
    }
    .hero-sm {
        display: none;
    }
    
    .intro{
  background:
    /*linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.60)),*/
    url("../images/mikan/sea-pc.jpg") center/cover no-repeat;
    min-height: 500px;
}
    
  .cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

/*********** お問い合わせ　Contact Us 設定　[タブレット 600-850] *******************/

    .contact{
        width: 100%;
        margin: 0 auto;
    }
    .contact-button {
        display: flex;
        flex-direction:row;/* 右方向に横並び */
        margin: 0 auto;
        margin-bottom: 100px;
        justify-content: space-around;
    }
    
    .contact__inner{
        margin-top: -80px;
        margin-bottom: -130px;
        background-image: url("../images/mikan/back_green.jpg");
    background-repeat:repeat-y;
}

    .contact-tel {
        width: 40%;
    }
    .contact-tel img {
        width: 100%;
        /*flex-shrink: 0;*/
        max-width: none;
    }

    .contact-web {
        width: 40%;
    }
    .contact-web img {
        width: 100%;
        /*flex-shrink: 0;*/
        max-width: none;
    }
}


/* 801〜1000px（PC） */
@media (min-width: 800px){
  .hero__inner,
  .intro__inner,
  .calendar__inner,
  .varieties__inner,
  .map__inner,
  .shop__inner,
  .contact__inner{
    padding: 34px 28px;
  }
    
.intro{
  background:
    /*linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.60)),*/
    url("../images/mikan/sea-pc.jpg") center/cover no-repeat;
    min-height: 500px;
}
    
    .contact {
            margin: 0 auto;
            max-width: 1000px;
            width: 100%;
            background-image: url("../images/mikan/back_green.jpg");
    background-repeat:repeat-y;
        }
.contact-button {
            display: flex;
            margin: 0 auto;
            flex-direction:row;/* 右方向に横並び */
            max-width: 1000px;
            width: 100%;
            
        }
.contact__inner{
    margin-top: -30px;
            margin-bottom: 50px;
}
}