@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Prata&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&text=0123456789');
@import url('https://fonts.googleapis.com/css2?family==M+PLUS+1p&display=swap');


* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Prata', 'Noto Serif JP', serif;
  font-family: 'Noto Serif JP', serif;
  overflow-wrap: break-word;
  letter-spacing: 0.08em;
  color: #000;

  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


img {
  max-width: 100%;
}

a img {
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

a:hover,
a:active,
a:focus {
  opacity: 0.8;

}

ul {
  list-style: none;
}

header {
  padding: 0;
  margin: 0;
}


/*gallery*/
.gallery {
  background-image: url("/oceanrich/oceanrich_tea/img/gallery_bg3.jpg");
  background-repeat: repeat;
  background-position: top center;
}

.gallery .sec-inner {
  padding: 70px 0 50px;
}

.gallery_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery .gallery_list .pic {
  width: 19%;
  margin: 0 3px;
}

.gallery .gallery_p {
  margin-top: 20px;
  text-align: center;
  color: #fff;
  font-size: 0.9em;
  font-weight: 700;
}

.gallery_g1 .gallery_g1_p {
  width: 50%;
  font-size: 16px;
  padding: 10px 0;
  margin-left: auto;
  margin-right: 0;
}

/*背景の画像*/
.bg1 {
  background-image: url("/oceanrich/oceanrich_tea/img/background1.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  height: 300px;
  background-size: cover;
  background-attachment: fixed;
}

.bg2 {
  background-image: url("/oceanrich/oceanrich_tea/img/background2.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  height: 300px;
  background-size: cover;
  background-attachment: fixed;
}

.bg3 {
  background-image: url("/oceanrich/oceanrich_tea/img/background3.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  height: 300px;
  background-size: cover;
  background-attachment: fixed;
}


.pagetop {
  background-color: #6a8131;
  height: 10px;
  margin: 0 auto;
  padding: 30px 2px 20px;
  text-align: right;
  font-size: 12px;
  padding-bottom: 3em;
  color: #fff;
}

.pagetop a {
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  padding-right: 20px;
}

/* clearfix */
.clearfix {
  display: block;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/*footer*/
footer .inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 0;
}

footer a {
  text-decoration: none;
  color: #313131;
}

footer a:hover {
  text-decoration: underline;
}

footer ul {
  overflow: hidden;
}

footer ul li {
  float: left;
  list-style: none;
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif !important;
}

#footer-logo {
  text-align: right;
  margin: 1em 0;
  width: 100%;
}

#footer-logo img {
  width: 20%;
  margin-top: 1em;
  margin-right: 1em;
}

address {
  margin-right: 1em;
  font-style: normal;
  font-size: 12px;
  margin-bottom: 0;
  margin-top: 1em;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif !important;
}

/* 4th anniversary */
.or_4th_anniversary {
  background-image: url("/oceanrich/oceanrich_g2/img/background2.jpg");
  background-size: cover;
  background-position: top center;
  padding: 2em 0;
}

.or_4th_anniversary_container {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  max-width: 1000px;
  margin: 0 auto;
}

.or_4th_anniversary_pic {
  width: 50%;
  padding: 2em;
}

.or_4th_img {
  width: 100%;
}

.or_4th_textbox {
  width: 50%;
  padding: 2em;
  font-family: 'M PLUS 1p', sans-serif;
  line-height: 1.8;
}

.or_4th_text {
  margin-top: 1em;
}

/* cp_banner */
.cp_banner {
  margin: 2em auto;
  max-width: 1000px;
  text-align: center;
  font-size: 14px;
}

.cp_banner:hover img {
  opacity: 0.8;
}

.cp_banner a {
  text-decoration: none;
  color: #333;
}

.cp_banner a:hover {
  text-decoration: underline;
}


/*---------------------------------
  pagetop
---------------------------------*/
.scroll-top {
  background-color: #6a8131;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  color: #fff;
  display: none;
}

#js-button {
  position: fixed;
  right: 30px;
  bottom: 30px;
}


@media screen and (min-width:600px) {

  /* header */
  header .banner1 {
    padding: 0;
    margin: 0;
    background-image: url("/oceanrich/oceanrich_tea/img/or_tea_topimg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 650px;
    max-height: 650px;
    background-color: #000;
  }

  header .banner1 .logo {
    position: absolute;
    left: 10px;
    top: 10px;
    max-width: 20vw;
    width: 180px;
  }

  header .top_or_logo {
    width: 35%;
    position: relative;
    top: 225px;
    left: 10px;
  }

  header .top_or_copy {
    width: 27%;
    position: absolute;
    right: 0;

  }

  header .banner1-inner {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
  }

  /* section style */

  .sec-inner {
    max-width: 960px;
    margin: 0 auto;
  }

  /* sec1 */
  .sec1 {
    padding: 80px 40px;
    background-image:
      url("/oceanrich/oceanrich_tea/img/bg1.jpg");
  }

  .sec1 .sec-inner {
    position: relative;
  }

  .sec1 .sec-inner .sec1_img {
    margin: 20px auto;
    text-align: center;
  }

  .sec1-title {
    color: #6a8131;
    font-size: 1.6em;
    width: 600px;
    margin: 0 auto;
    border-bottom: solid 1px #754b45;
    padding: 0 10px 5px;
    text-align: center;
  }

  .sec1 .sec-text {
    width: 600px;
    display: block;
    padding: 20px;
    margin: 0 auto;
    font-size: 1.2em;
    line-height: 1.6em;
  }

  .sec1 .content1 {
    margin-top: 40px;
  }

  .sec1-con1_figure {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
  }

  .sec1-con1_img {
    width: 48%;
    margin: 5px;
  }

  /* wfp */
  .wfp {
    width: 90%;
    background-image: url("/oceanrich/oceanrich_tea/img/wfp_bg.jpg");
    margin: 40px auto 0;
  }

  .wfp:hover {
    opacity: 0.8;
  }

  .wfp a {
    text-decoration: none;
    color: #333;
  }

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

  .wfp_imgBox {
    width: 50%;
    padding: 15px;
  }

  .wfp_imgBox_text {
    font-weight: 700;
    margin: 7px 0;
  }

  .wfp_textBox {
    padding: 18px 13px;
    width: 50%;
  }

  .wfp_textBox_title {
    font-size: 1.4em;
  }

  .wfp_textBox_title span {
    font-size: 0.8em;
  }

  .wfp_textBox_text {
    font-weight: 700;
    font-size: 0.9em;
  }


  /*sec2*/
  .sec2 {
    padding: 100px 0;
    background-image: url("/oceanrich/oceanrich_tea/img/bg1.jpg");
  }

  .sec2 .sec-inner {
    position: relative;
  }

  .sec2 .sec2-title {
    color: #6a8131;
    font-size: 1.6em;
    border-top: solid 1px #754b45;
    border-bottom: solid 1px #754b45;
    padding: 10px 40px;
    text-align: center;
    display: inline;
    letter-spacing: 0.08em;
    background-color: #fffdeb;
  }

  .sec2 .content1_sec-title_wrap {
    text-align: center;
    margin-bottom: 70px;
  }

  .sec2 .content1a {
    display: flex;
    width: 85%;
    margin: 50px auto 10px;
  }

  .sec2 .content1_textBox {
    padding: 20px;
    width: 400px;
    line-height: 1.8;
  }

  .sec2 .content1_text {
    margin-bottom: 10px;
  }

  .sec2 .content1_img {
    margin: 0 auto;
  }

  .sec2 .content1_img1 {
    width: 400px;
  }

  .sec2 .content1b {
    text-align: center;
    width: 90%;
    margin: 0 auto 100px;
  }

  .sec2 .content1b_img2 {
    width: 46%;
  }

  .sec2 .content1b_img3 {
    width: 48%;
    margin-left: 5px;
  }

  /* sec2 content2 */
  .sec2 .content2a {
    display: flex;
    align-items: center;
    width: 93%;
    margin: 20px auto;
  }

  .sec2 .content2a_textBox {
    padding: 20px 20px 20px 10px;
    width: 400px;
    line-height: 1.8;
  }

  .sec2 .content2a_img1 {
    width: 500px;
  }

  .sec2 .content2b {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 40px auto;
  }

  .sec2 .content2b_textBox {
    padding: 20px 10px 20px 20px;
    width: 55%;
    line-height: 1.8;
    order: 2;

  }

  .sec2 .content2b_img1 {
    width: 430px;
    order: 1;
    padding-left: 10px;
  }

  .sec2 .content2c {
    text-align: center;
    margin-top: 50px;
  }

  .sec2 .content2c_img10 {
    width: 46%;
    margin-right: 70px;
  }

  .sec2 .content2c_img11 {
    width: 25%;
  }

  .sec2 .content3 {
    width: 80%;
    margin: 100px auto 0;
  }

  .content3_textBox {
    line-height: 1.8;
    width: 90%;
    margin: 0 auto;
    display: block;
  }

  .sec2 .content3 table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 50px 0 10px;
  }

  .sec2 .content3 table th:first-child {
    border-radius: 5px 0 0 0;
  }

  .sec2 .content3 table th:last-child {
    border-radius: 0 5px 0 0;
    border-right: 1px solid #3c6690;
  }

  .sec2 .content3 table th {
    text-align: center;
    color: white;
    background: linear-gradient(#8fa558, #54662f);
    border-left: 1px solid #6a8131;
    border-top: 1px solid #8fa558;
    border-bottom: 1px solid #555;
    width: 25%;
    padding: 10px 0;
  }

  .sec2 .content3 table td {
    text-align: center;
    border-left: 1px solid #a8b7c5;
    border-bottom: 1px solid #a8b7c5;
    border-top: none;
    width: 25%;
    padding: 10px 0;
  }

  .sec2 .content3 table td span {
    color: #6a8131;
    font-weight: 700;
  }

  .sec2 .content3 table td:last-child {
    border-right: 1px solid #a8b7c5;
  }

  .sec2 .content3 table tr:last-child td:first-child {
    border-radius: 0 0 0 5px;
  }

  .sec2 .content3 table tr:last-child td:last-child {
    border-radius: 0 0 5px 0;
  }

  .sec2 .content3_caption1 {
    font-size: 0.9em;
  }

  .sec2 .content3_caption2 {
    font-size: 0.9em;
    text-align: center;
  }

  .sec2 .sec2_analysisTitle {
    margin-top: 40px;
    color: #54662f;
    border-bottom: solid 1px #54662f;
  }

  /* sec3 */
  .sec3 {
    background-color: #6a8131;
    padding: 100px 0;
  }

  .sec3 .content1_sec-title_wrap {
    text-align: center;
    margin-bottom: 50px;
  }

  .sec3 .content1 .sec3-title {
    color: #fff;
    font-size: 1.6em;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
    padding: 10px 40px;
    text-align: center;
    display: inline;
    letter-spacing: 0.08em;
  }

  .sec3_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .sec3_itemBox {
    position: relative;
    width: 26%;
    margin: 20px 0;
    color: #fff;
  }

  .sec3_img1-2 {
    position: absolute;
    top: 0px;
    left: -100px;
  }

  .sec3 .sec3_text1 {
    background-image: url("/oceanrich/oceanrich_tea/img/sec3_no1.png");
    padding-left: 43px;
    background-position: top left;
    background-size: 33px;
    background-repeat: no-repeat;
  }

  .sec3 .sec3_text2 {
    background-image: url("/oceanrich/oceanrich_tea/img/sec3_no2.png");
    padding-left: 43px;
    background-position: top left;
    background-size: 33px;
    background-repeat: no-repeat;
  }

  .sec3 .sec3_text3 {
    background-image: url("/oceanrich/oceanrich_tea/img/sec3_no3.png");
    padding-left: 43px;
    background-position: top left;
    background-size: 33px;
    background-repeat: no-repeat;
  }

  .sec3 .sec3_text4 {
    background-image: url("/oceanrich/oceanrich_tea/img/sec3_no4.png");
    padding-left: 43px;
    background-position: top left;
    background-size: 33px;
    background-repeat: no-repeat;
  }

  .sec3 .sec3_text5 {
    background-image: url("/oceanrich/oceanrich_tea/img/sec3_no5.png");
    padding-left: 43px;
    background-position: top left;
    background-size: 33px;
    background-repeat: no-repeat;
  }

  .sec3 .sec3_text6 {
    background-image: url("/oceanrich/oceanrich_tea/img/sec3_no6.png");
    padding-left: 43px;
    background-position: top left;
    background-size: 33px;
    background-repeat: no-repeat;
  }

  .sec3 .sec3_text7 {
    background-image: url("/oceanrich/oceanrich_tea/img/sec3_caution.png");
    padding-left: 59px;
    background-position: left;
    background-size: 45px;
    background-repeat: no-repeat;
    width: 500px;
    color: #fff;
    margin: 0 auto;
  }

  .sec3 .content2_sec-title_wrap {
    text-align: center;
    margin: 100px 0 80px
  }

  .sec3 .content2 .sec3-title {
    color: #fff;
    font-size: 1.6em;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
    padding: 10px 40px;
    text-align: center;
    display: inline;
    letter-spacing: 0.08em;
  }

  .sec3 .content2 .movieBox {
    width: 90%;
    margin: 0 auto;
  }

  /* sec4 */
  .sec4 {
    background-image: url("/oceanrich/oceanrich_tea/img/bg1.jpg");
    padding-bottom: 100px;
  }

  .sec4 .content1 .sec4-title {
    color: #6a8131;
    font-size: 1.6em;
    border-top: solid 1px #754b45;
    border-bottom: solid 1px #754b45;
    padding: 10px 40px;
    text-align: center;
    display: inline;
    letter-spacing: 0.08em;
    background-color: #fffdeb;
  }

  .sec4 .content1 .content1_sec-title_wrap {
    text-align: center;
    margin: 100px 0 80px;
  }

  .sec4 .content1 .sec-inner {
    position: relative;
  }

  .sec4 .content1 .features_icon {
    width: 120px;
  }

  .sec4 .content1 .features_box {
    display: flex;
    align-items: center;
  }

  .sec4 .content1 .features_title {
    color: #6a8131;
  }


  .sec4 .content1 .features_container {
    display: flex;
  }

  .sec4 .content1 .featurex_text {
    width: 60%;
    padding: 20px;
  }

  .sec4 .content1 .features_imgBox {
    width: 26%;
    margin-left: 20px;
  }

  /* sec4 content2 */
  .sec4 .content2_sec-title_wrap {
    text-align: center;
  }

  .sec4 .content2 .sec4-title {
    color: #6a8131;
    font-size: 1.6em;
    border-top: solid 1px #754b45;
    border-bottom: solid 1px #754b45;
    padding: 10px 40px;
    text-align: center;
    display: inline;
    letter-spacing: 0.08em;
    background-color: #fffdeb;
  }

  .sec4 .content2 .content2_sec-title_wrap {
    text-align: center;
    margin: 100px 0 50px;
  }

  .sec4 .content2 .clean_container {
    display: flex;
    align-items: center;
  }

  .sec4 .content2 .cleanBox1 {
    width: 50%;
    padding: 30px 20px 30px 30px;
  }

  .sec4 .content2 .cleanBox2 {
    width: 50%;
    padding: 30px 30px 30px 20px;
  }

  .sec4 .content2 .cleanImg1 {
    margin: 0 auto;
    display: block;
    width: 65%;

  }

  .sec4 .content2 .cleanImg2 {
    display: block;
    margin: 3em auto;
    display: block;
    margin: 65px auto 0;
    width: 65%;
  }

  .sec4 .content2 .cleanText {
    margin-top: 30px;
  }

  .sec4 .content2 .clean_ul {
    padding: 20px;
    width: 80%;
    margin: 20px auto;
    color: #6a8131;
    border-radius: 8px;
    color: #6a8131;
    border: solid 1px #6a8131;
  }

  /* sec5 */
  .sec5 {
    background-image: url("/oceanrich/oceanrich_tea/img/bg1.jpg");
    padding-bottom: 80px;
  }

  .sec5 .content1 {
    text-align: center;
    width: 100%;
    padding: 100px 0 20px;
  }

  .sec5 .content1_sec-title_wrap {
    text-align: center;
    margin-bottom: 50px;
  }

  .sec5 .sec5-title {
    color: #6a8131;
    font-size: 1.6em;
    border-top: solid 1px #754b45;
    border-bottom: solid 1px #754b45;
    padding: 10px 40px;
    text-align: center;
    display: inline;
    letter-spacing: 0.08em;
    background-color: #fffdeb;
  }

  .sec5 .content1 .sec5_img1 {
    width: 40%;
  }

  .sec5 .content1 .sec5_img2 {
    width: 40%;
    vertical-align: top;
    margin-top: 40px;
  }

  .sec5 .sec5_img3 {
    width: 70%;
    display: block;
    margin: 50px auto 0;
  }

  .sec5 .spec table {
    margin-left: auto;
    margin-right: auto;
  }

  .sec5 .spec {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .sec5 .spec th {
    width: 40%;
    padding: 0.5em;
    border: none;
    background-color: #6a8131;
    color: #fff;
  }

  .sec5 .spec .caution {
    margin-top: 1em;
    font-size: 0.9em;
  }

  .sec5 .spec td {
    width: 60%;
    padding: 1em;
    border: none;
    border-bottom: 1px solid #6a8131;
  }

  /*sec6*/
  .sec6 {
    background-image: url("/oceanrich/oceanrich_tea/img/bg1.jpg");
    padding: 40px 0;
  }

  .sec6 .content1_sec-title_wrap {
    text-align: center;
    margin: 50px 0;
  }

  .sec6 .sec6-title {
    color: #6a8131;
    font-size: 1.6em;
    border-top: solid 1px #754b45;
    border-bottom: solid 1px #754b45;
    padding: 10px 40px;
    text-align: center;
    display: inline;
    letter-spacing: 0.08em;
    background-color: #fffdeb;
  }

  .sec6 .content1 .store_lineup {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
  }

  .sec6 .content1 .store_lineup2 {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 50px;
  }

  .sec6 .content1 .store_lineup2 .bt-cart {
    position: relative;
    display: inline-block;
    padding: 1em 0.5em;
    text-align: center;
    text-decoration: none;
    background: #6a8131;
    color: #f0f0f0;
    transition: .4s;
    font-size: 18px;
    width: 100%;
    border-radius: 5px;
    margin: 0.5em;
    width: 350px;
    font-weight: 700;
  }

  .sec6 .content1 .store_lineup2 .bt-cart2 {
    position: relative;
    display: inline-block;
    padding: 1em 0.5em;
    text-align: center;
    text-decoration: none;
    background: #999;
    color: #ddd;
    transition: .4s;
    font-size: 18px;
    width: 100%;
    border-radius: 5px;
    margin: 0.5em;
    width: 350px;
    font-weight: 700;
  }

  .sec6 .sec6_annotation {
    text-align: center;
  }

  .sec6 .store_lineup2::after {
    content: "";
    width: 350px;
    margin: 0.5em;

  }


  /* sec7 */
  .sec7 {
    padding: 80px 0 120px;
    background-image: url("/oceanrich/oceanrich_tea/img/bg1.jpg");
  }

  .sec7 .banner2 {
    padding: 0;
    margin: 0 auto;
    background-image: url("/oceanrich/oceanrich_tea/img/sec7_topimg@2x.jpg");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    max-width: 1200px;
    height: 470px;
  }

  .sec7 .banner2 .sec-inner {
    text-align: center;
    position: relative;
  }

  .sec7 .banner2_logoBox {
    background-color: #ffffffc2;
    width: 50%;
    padding: 50px;
    position: relative;
    top: 60px;
    left: 0;
  }

  .sec7 .banner2_copy {
    position: absolute;
    right: 0;
    top: 0;
    width: 7%;
  }

  .sec7 .content1 .sec7_title {
    color: #6a8131;
    text-align: center;
  }

  .sec7_text {
    width: 600px;
    display: block;
    margin: 30px auto;
    line-height: 1.8;

  }

  .sec7 .button {
    display: block;
    position: relative;
    background: #e7437a;
    width: 300px;
    padding: 13px 13px 13px 0;
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: .5s;
    margin: 35px auto 0;
    border-radius: 5px;
    line-height: 1.5;
    text-align: center;
    font-weight: 700;
  }

  .sec7 .button:before {
    content: "";
    position: absolute;
    top: 43%;
    right: 12px;
    width: 10px;
    height: 2px;
    background: #fff;
    transform: rotate(45deg);
  }

  .sec7 .button:after {
    content: "";
    position: absolute;
    top: 55%;
    right: 12px;
    width: 10px;
    height: 2px;
    background: #fff;
    transform: rotate(-45deg);
  }

  /* sec8 */
  .sec8 {
    background-color: #6a8131;
    padding-bottom: 3em;

  }

  .sec8 .content1 {
    width: 100%;
    margin-top: 1em;
    display: flex;
    flex-wrap: wrap;
  }

  .sec8 .or_series_link {
    padding-top: 50px;
  }

  .sec8 .or_series_linkTitle {
    color: #fff;
    border-bottom: solid 2px #fff;
    text-align: center;
    padding-bottom: 5px;
  }

  .sec8 .series_or1,
  .series_or2,
  .series_or3,
  .series_or4 {
    width: 47.5%;
    margin: 0.5em;
  }

  .sec8 .series_or1 img,
  .series_or2 img,
  .series_or3 img,
  .series_or4 img {
    width: 100%;
  }

  .sec8 .series_text1,
  .series_text2 {
    width: 100%;
  }

  .sec8 .content2 {
    width: 100%;
    margin-top: 1em;
    display: flex;
    flex-wrap: wrap;
  }

  .sec8 .content2 h2 {
    margin-bottom: -0.5em;
  }

  .sec8 .content2 .gift_link {
    margin: 0.5em;
    width: 47.5%;
    text-align: center;
  }

  .sec8 .gift_linkTitle {
    color: #fff;
    border-bottom: solid 2px #fff;
    text-align: center;
    padding-bottom: 5px;
  }

  .sec8 .gift_link img {
    width: 100%;
    margin-top: 1em;
  }

  .sec8 .content2 .magazine_link {
    margin: 0.5em;
    width: 47.5%;
    text-align: center;
  }

  .sec8 .magazine_linkTitle {
    color: #fff;
    border-bottom: solid 2px #fff;
    text-align: center;
    padding-bottom: 5px;
  }

  .sec8 .magazine_link img {
    width: 100%;
    margin-top: 1em;
  }

  .sec8 .content2 .bistro_link {
    margin: 0.5em;
    width: 48%;
    text-align: center;
  }

  .sec8 .bistro_link img {
    width: 100%;
    margin-top: 1em;
  }

  .sec8 .bistro_linkTitle {
    color: #fff;
    border-bottom: solid 2px #fff;
    text-align: center;
    padding-bottom: 5px;
  }

}


@media screen and (max-width:599px) {

  header .banner1 {
    padding: 0;
    margin: 0;
    background-image: url("/oceanrich/oceanrich_tea/img/or_tea_topimg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 300px;
    max-height: 300px;
  }

  header .banner1 .logo {
    position: absolute;
    left: 10px;
    top: 10px;
    max-width: 20vw;
    width: 180px;
  }

  header .top_or_logo {
    width: 35vw;
    position: relative;
    top: 115px;
    left: 5px;
  }

  header .top_or_copy {
    width: 30vw;
    position: absolute;
    right: 0;

  }

  header .banner1-inner {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
  }

  /* 4th anniversary */
  .or_4th_anniversary {
    background-image: url("/oceanrich/oceanrich_g2/img/background_sp_fall.jpg");
  }

  .or_4th_anniversary_container {
    display: block;
    margin: 0 auto;
  }

  .or_4th_anniversary_pic {
    width: 100%;
    padding-bottom: 0;
  }

  .or_4th_textbox {
    width: 100%;
    padding-top: 0;
    font-size: 14px;
  }


  /* sec1 */
  .sec1-title {
    color: #6a8131;
    font-size: 1.3em;
    width: 90vw;
    margin: 40px auto 0;
    border-top: solid 1px #754b45;
    border-bottom: solid 1px #754b45;
    padding: 10px;
    text-align: center;
    background-color: #fffdeb;
  }

  .sec1 .sec-text {
    width: 100vw;
    display: block;
    padding: 20px;
    margin: 0 auto;
    line-height: 1.6em;
  }

  .sec1 .sec1_img1 {
    width: 80vw;
    margin: 35px auto;
    display: block;
  }

  .sec1 .sec1_img2 {
    width: 85vw;
    margin: 0 auto 40px;
    display: block;
  }

  .sec1 .sec1-con1_figure {
    width: 90vw;
    margin: 0 auto;
  }

  .sec1-con1_img {
    margin-bottom: 20px;
  }

  /* wfp */
  .wfp {
    width: 90%;
    background-image: url("/oceanrich/oceanrich_tea/img/wfp_bg.jpg");
    margin: 40px auto 0;
  }

  .wfp:hover {
    opacity: 0.8;
  }

  .wfp a {
    text-decoration: none;
    color: #333;
  }

  .wfp_imgBox {
    padding: 12px;
  }

  .wfp_imgBox_text {
    font-weight: 700;
    margin: 7px;
  }

  .wfp_textBox {
    padding: 0 13px 18px;
  }

  .wfp_textBox_title {
    font-size: 1.3em;
  }

  .wfp_textBox_title span {
    font-size: 0.8em;
  }

  .wfp_textBox_text {
    font-weight: 700;
    font-size: 0.9em;
  }


  /* sec2 */
  .sec2 {
    padding: 30px 0 50px;
    background-image: url("/oceanrich/oceanrich_tea/img/bg1.jpg");
  }

  .sec2 .content1_sec-title_wrap {
    text-align: center;
  }

  .sec2 .sec2-title {
    color: #6a8131;
    font-size: 1.3em;
    width: 90vw;
    border-top: solid 1px #754b45;
    border-bottom: solid 1px #754b45;
    padding: 10px;
    text-align: center;
    background-color: #fffdeb;
    display: block;
    margin: 0 auto;
  }

  .sec2 .content1_textBox {
    padding: 20px;
    line-height: 1.8;
    margin: 20px 0 0;
  }

  .sec2 .content1_img {
    width: 90vw;
    margin: 0 auto;
  }

  .sec2 .content1b {
    text-align: center;
    margin-bottom: 40px;
  }

  .sec2 .content1b_img2 {
    width: 95vw;
    margin: 20px auto 0;
    display: block;
  }

  .sec2 .content1b_img3 {
    width: 90vw;
    margin: 0 auto;
    display: block;
  }

  .sec2 .content2a_textBox {
    width: 90vw;
    line-height: 1.8;
    margin: 20px auto;
  }

  .sec2 .content2a_img1 {
    width: 90vw;
    margin: 0 auto;
    display: block;
  }

  .sec2 .content2b_text {
    width: 90vw;
    line-height: 1.8;
    margin: 20px auto;
  }

  .sec2 .content2b_img1 {
    width: 90vw;
    margin: 0 auto;
    display: block;
  }

  .sec2 .content2c_img10 {
    width: 90vw;
    margin: 40px auto 30px;
    display: block;
  }

  .sec2 .content2c_img11 {
    width: 60vw;
    margin: 0 auto;
    padding-left: 30px;
    display: block;
  }

  .sec2 .content3 {
    margin: 100px auto 0;
    padding: 0 5vw;
  }

  .content3_textBox {
    margin: 20px auto 0;
    line-height: 1.8;
  }

  .sec2 .content3 table {
    border-collapse: separate;
    border-spacing: 0;
    margin: 20px auto 10px;
    font-size: 0.9em;
  }

  .sec2 .content3 table th:first-child {
    border-radius: 5px 0 0 0;
  }

  .sec2 .content3 table th:last-child {
    border-radius: 0 5px 0 0;
    border-right: 1px solid #3c6690;
  }

  .sec2 .content3 table th {
    text-align: center;
    color: white;
    background: linear-gradient(#6a8131, #54662f);
    border-left: 1px solid #6a8131;
    border-top: 1px solid #3c6690;
    border-bottom: 1px solid #555;
    width: 25%;
    padding: 10px 0;
  }

  .sec2 .content3 table td {
    text-align: center;
    border-left: 1px solid #a8b7c5;
    border-bottom: 1px solid #a8b7c5;
    border-top: none;
    width: 25%;
    padding: 10px 0;
  }

  .sec2 .content3 table td span {
    color: #6a8131;
    font-weight: 700;
  }

  .sec2 .content3 table td:last-child {
    border-right: 1px solid #a8b7c5;
  }

  .sec2 .content3 table tr:last-child td:first-child {
    border-radius: 0 0 0 5px;
  }

  .sec2 .content3 table tr:last-child td:last-child {
    border-radius: 0 0 5px 0;
  }

  .sec2 .content3_caption1 {
    font-size: 0.9em;
    width: 90vw;
    margin: 0 auto;
  }

  .sec2 .content3_caption2 {
    font-size: 0.9em;
    width: 90vw;
    margin: 0 auto;
  }

  .sec2 .sec2_analysisTitle {
    margin-top: 40px;
    color: #54662f;
    border-bottom: solid 1px #54662f;
  }

  .sec2 .sec2_analysisImg {
    margin-top: 20px;
  }


  /* sec3 */
  .sec3 {
    background-color: #6a8131;
    padding: 50px 0 40px;
  }

  .sec3 .content1_sec-title_wrap {
    text-align: center;
    margin-bottom: 50px;
  }

  .sec3 .content1 .sec3-title {
    color: #fff;
    font-size: 1.3em;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
    padding: 10px;
    text-align: center;
    letter-spacing: 0.08em;
    display: block;
    width: 90vw;
    margin: 0 auto;
  }

  .sec3_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

  .sec3_itemBox {
    position: relative;
    width: 40%;
    color: #fff;
  }

  .sec3_img1-2 {
    position: absolute;
    top: 0px;
    left: -63px;
  }

  .sec3_img3-2 {
    position: absolute;
    top: -17px;
    left: 100px;
    width: 80px;
  }

  .sec3 .sec3_text1 {
    background-image: url("/oceanrich/oceanrich_tea/img/sec3_no1.png");
    padding-left: 26px;
    background-position: top left;
    background-size: 20px;
    background-repeat: no-repeat;
    font-size: 0.9em;
  }

  .sec3 .sec3_text2 {
    background-image: url("/oceanrich/oceanrich_tea/img/sec3_no2.png");
    padding-left: 26px;
    background-position: top left;
    background-size: 20px;
    background-repeat: no-repeat;
    font-size: 0.9em;
  }

  .sec3 .sec3_text3 {
    background-image: url("/oceanrich/oceanrich_tea/img/sec3_no3.png");
    padding-left: 26px;
    background-position: top left;
    background-size: 20px;
    background-repeat: no-repeat;
    font-size: 0.9em;
  }

  .sec3 .sec3_text4 {
    background-image: url("/oceanrich/oceanrich_tea/img/sec3_no4.png");
    padding-left: 26px;
    background-position: top left;
    background-size: 20px;
    background-repeat: no-repeat;
    font-size: 0.9em;
  }

  .sec3 .sec3_text5 {
    background-image: url("/oceanrich/oceanrich_tea/img/sec3_no5.png");
    padding-left: 26px;
    background-position: top left;
    background-size: 20px;
    background-repeat: no-repeat;
    font-size: 0.9em;
  }

  .sec3 .sec3_text6 {
    background-image: url("/oceanrich/oceanrich_tea/img/sec3_no6.png");
    padding-left: 26px;
    background-position: top left;
    background-size: 20px;
    background-repeat: no-repeat;
    font-size: 0.9em;
  }

  .sec3 .sec3_text7 {
    background-image: url("/oceanrich/oceanrich_tea/img/sec3_caution.png");
    padding-left: 59px;
    background-position: left;
    background-size: 45px;
    background-repeat: no-repeat;
    width: 90vw;
    color: #fff;
    margin: 30px auto;
    font-size: 0.9em;
  }

  .sec3 .content2_sec-title_wrap {
    text-align: center;
    margin: 50px 0 30px;
  }

  .sec3 .content2 .sec3-title {
    color: #fff;
    font-size: 1.3em;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
    padding: 10px;
    text-align: center;
    letter-spacing: 0.08em;
    display: block;
    width: 90vw;
    margin: 0 auto;
  }

  .sec3 .content2 .movieBox {
    width: 95vw;
    margin: 0 auto;
  }

  /* sec4 */
  .sec4 {
    background-image: url("/oceanrich/oceanrich_tea/img/bg1.jpg");
    padding: 50px 0;
  }

  .sec4 .sec4-title {
    color: #6a8131;
    font-size: 1.3em;
    width: 90vw;
    border-top: solid 1px #754b45;
    border-bottom: solid 1px #754b45;
    padding: 10px;
    text-align: center;
    background-color: #fffdeb;
    display: block;
    margin: 0 auto 30px;
  }

  .sec4 .content1 {
    margin-bottom: 50px;
  }

  .sec4 .content1 .sec-inner {
    position: relative;
  }

  .sec4 .content1 .features_icon {
    width: 30vw;
  }

  .sec4 .content1 .features_box {
    display: flex;
    align-items: center;
  }

  .sec4 .content1 .features_title {
    color: #6a8131;
    font-size: 1em;
  }

  .sec4 .content1 .features_text {
    padding-right: 15px;
  }

  .sec4 .content1 .features_imgBox {
    text-align: center;
    margin-top: 30px;
  }

  .sec4 .content1 .features_img {
    width: 60%;
  }

  .sec4 .content2 .clean_container {
    display: flex;
    align-items: center;
  }

  .sec4 .content2 .cleanBox1 {
    width: 50%;
    padding: 20px 10px 20px 20px;
  }

  .sec4 .content2 .cleanBox2 {
    width: 50%;
    padding: 20px 20px 20px 10px;
  }

  .sec4 .content2 .cleanImg1 {
    margin: 0 auto;
    display: block;
  }

  .sec4 .content2 .cleanImg2 {
    display: block;
    margin: 42px auto 0;
  }

  .sec4 .content2 .cleanText {
    margin-top: 30px;
  }

  .sec4 .content2 .clean_ul {
    padding: 15px;
    width: 90vw;
    margin: 20px auto;
    color: #6a8131;
    border-radius: 8px;
    color: #6a8131;
    border: solid 1px #6a8131;
  }

  /* sec5 */
  .sec5 {
    background-image: url("/oceanrich/oceanrich_tea/img/bg1.jpg");
    padding-bottom: 80px;
  }

  .sec5 .sec5-title {
    color: #6a8131;
    font-size: 1.3em;
    width: 90vw;
    border-top: solid 1px #754b45;
    border-bottom: solid 1px #754b45;
    padding: 10px;
    text-align: center;
    background-color: #fffdeb;
    display: block;
    margin: 0 auto;
  }

  .sec5 .content1 {
    text-align: center;
    padding-top: 70px;
  }

  .sec5 .content1 .sec5_img1 {
    margin-top: 40px;
    padding-right: 10vw;
    margin: 40px auto 0;
    display: block;
  }

  .sec5 .sec5_img2 {
    width: 90vw;
  }

  .sec5 .sec5_img3 {
    width: 95vw;
    display: block;
    margin: 50px auto 0;
  }

  .sec5 .spec table {
    margin-left: auto;
    margin-right: auto;
  }

  .sec5 .spec {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .sec5 .spec th {
    width: 50%;
    padding: 0.5em;
    border: none;
    background-color: #6a8131;
    color: #fff;
    font-weight: 400;
  }

  .sec5 .spec .caution {
    margin-top: 1em;
  }

  .sec5 .spec td {
    width: 50%;
    padding: 1em 0.5em;
    border: none;
    border-bottom: 1px solid #6a8131;
  }

  /* sec6 */
  .sec6 {
    background-image: url("/oceanrich/oceanrich_tea/img/bg1.jpg");
    padding: 50px 0 0;
  }

  .sec6 .sec6-title {
    color: #6a8131;
    font-size: 1.3em;
    width: 90vw;
    border-top: solid 1px #754b45;
    border-bottom: solid 1px #754b45;
    padding: 10px;
    text-align: center;
    background-color: #fffdeb;
    display: block;
    margin: 0 auto;
  }

  .sec6 .content1 .store_lineup {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
  }

  .sec6 .content1 .store_lineup2 {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 40px 0;
  }

  .sec6 .content1 .store_lineup2 .bt-cart {
    position: relative;
    display: inline-block;
    padding: 1em 0.5em;
    text-align: center;
    text-decoration: none;
    background: #6a8131;
    color: #f0f0f0;
    transition: .4s;
    font-size: 18px;
    width: 100%;
    border-radius: 5px;
    margin: 0.5em;
    width: 350px;
    font-weight: 700;
  }

  .sec6 .content1 .store_lineup2 .bt-cart2 {
    position: relative;
    display: inline-block;
    padding: 1em 0.5em;
    text-align: center;
    text-decoration: none;
    background: #999;
    color: #ddd;
    transition: .4s;
    font-size: 18px;
    width: 100%;
    border-radius: 5px;
    margin: 0.5em;
    width: 350px;
    font-weight: 700;
  }

  .sec6 .sec6_annotation {
    text-align: center;
    margin-bottom: 2em;
  }

  /* sec7 */
  .sec7 {
    padding: 10px 0 75px;
    background-image: url("/oceanrich/oceanrich_tea/img/bg1.jpg");
  }

  .sec7 .banner2 {
    padding: 0;
    background-image: url("/oceanrich/oceanrich_tea/img/sec7_topimg_sp.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 211px;
  }

  .sec7 .banner2_logoBox {
    background-color: #ffffffc2;
    width: 50%;
    padding: 50px;
    position: relative;
    top: 65px;
    left: 0;
  }

  .sec7_text {
    width: 90vw;
    display: block;
    margin: 0 auto;
  }

  .sec7 .content1 .sec7_title {
    color: #6a8131;
    text-align: center;
    font-size: 1.4em;
  }

  .sec7 .button {
    display: block;
    position: relative;
    background: #e7437a;
    width: 300px;
    padding: 13px 13px 13px 0;
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: .5s;
    margin: 35px auto 0;
    border-radius: 5px;
    line-height: 1.5;
    text-align: center;
    font-weight: 700;
  }

  .sec7 .button:before {
    content: "";
    position: absolute;
    top: 43%;
    right: 12px;
    width: 10px;
    height: 2px;
    background: #fff;
    transform: rotate(45deg);
  }

  .sec7 .button:after {
    content: "";
    position: absolute;
    top: 55%;
    right: 12px;
    width: 10px;
    height: 2px;
    background: #fff;
    transform: rotate(-45deg);
  }

  /* sec8 */
  .sec8 {
    background-color: #6a8131;
    padding-bottom: 2em;
  }

  .sec8 .or_series_link {
    padding-top: 50px;
  }

  .sec8 .or_series_linkTitle {
    color: #fff;
    border-bottom: solid 2px #fff;
    text-align: center;
    padding-bottom: 5px;
    width: 90vw;
    margin: 0 auto 20px;
  }

  .sec8 .series_or1,
  .series_or2,
  .series_or3,
  .series_or4 {
    width: 90vw;
    margin: 10px;
    margin: 0 auto;
  }

  .sec8 .content2 .gift_link {
    padding-top: 30px;
  }

  .sec8 .gift_linkTitle {
    color: #fff;
    border-bottom: solid 2px #fff;
    text-align: center;
    padding-bottom: 5px;
    width: 90vw;
    margin: 20px auto 20px;
  }

  .sec8 .gift_link img {
    width: 90vw;
    margin: 0 auto;
    display: block;
  }

  .sec8 .magazine_linkTitle {
    color: #fff;
    border-bottom: solid 2px #fff;
    text-align: center;
    padding-bottom: 5px;
    width: 90vw;
    margin: 20px auto 20px;
  }

  .sec8 .content2 .magazine_link {
    padding-top: 30px;
  }

  .sec8 .magazine_link img {
    width: 90vw;
    margin: 0 auto;
    display: block;
  }

  .sec8 .bistro_linkTitle {
    color: #fff;
    border-bottom: solid 2px #fff;
    text-align: center;
    padding-bottom: 5px;
    width: 90vw;
    margin: 20px auto 20px;
  }

  .sec8 .content2 .bistro_link {
    padding: 30px 0;
  }

  .sec8 .bistro_link img {
    width: 90vw;
    margin: 0 auto;
    display: block;
  }

  /*gallery*/
  .gallery {
    background-image: url("/oceanrich/oceanrich_tea/img/gallery_bg3.jpg");
    background-position: top center;
  }

  .gallery .sec-inner {
    padding: 40px 0 30px;
  }

  .gallery_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

  .gallery .gallery_list .pic {
    width: 42%;
    margin: 5px 0;
  }

  .gallery .gallery_p {
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.9em;
    width: 90vw;
    margin: 0 auto;

  }

  /*背景の画像*/
  .bg1 {
    height: 200px;
    background-attachment: inherit;
  }

  .bg2 {
    height: 200px;
    background-attachment: inherit;
  }

  .bg3 {
    height: 200px;
    background-attachment: inherit;
  }

  .bg4 {
    height: 200px;
    background-attachment: inherit;
  }

  .pagetop a {
    text-decoration: none;
    color: #fff;
    padding-right: 20px;
  }

  /*footer*/
  footer {
    background: #f0f0f0;
  }

  footer .inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px 0;
  }

  footer a {
    text-decoration: none;
    color: #313131;
  }

  footer a:hover {
    text-decoration: underline;
  }

  footer ul {
    overflow: hidden;
  }

  #footer-link {
    padding-left: 1em;
  }

  #footer-logo img {
    width: 50%;
  }

  footer ul li {
    float: left;
    list-style: none;
    font-size: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif !important;
  }

  address {
    font-style: normal;
    font-size: 12px;
    margin-bottom: 0;
    margin-top: 1em;
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif !important;
  }

  /* pagetop */
  .scroll-top {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    color: #fff;
  }

  #js-button {
    position: fixed;
    right: 10px;
    bottom: 20px;
  }

  .top_scroll {
    margin-top: 0;
  }

}


@media screen and (min-width:960px) {

  /* 画面外にいる状態 */
  .fadein {
    opacity: 0.0;
    -webkit-transform: translate(0, 100px);
    transform: translate(0, 100px);
    -webkit-transition: all 800ms;
    transition: all 800ms;
  }

  /* 画面内に入った状態 */
  .fadein.scrollin {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

.banner {
  width: 90%;
  margin: 0 auto 50px;
  max-width: 900px;
}

.banner a img {
  width: 100%;
}

.banner a:hover img {
  opacity: 0.9;
}

.banner a:link,
.banner a:visited {
  color: #666666;
  text-decoration: none;
}

.banner p {
  text-align: center;
}

/*---------------------------------
  PC/スマホ別表示
---------------------------------*/
@media screen and (min-width:600px) {
  .-sp {
    display: none;
  }
}

@media screen and (max-width:599px) {
  .-pc {
    display: none;
  }
}