@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Hand:wght@400..700&display=swap");
div#sp-header {
  width: 100%;
  text-align: center;
  background: #fbfbf7 url("img/header-image-bg.png") repeat-x bottom;
  background-size: contain; }
  @media screen and (min-width: 1280px) {
    div#sp-header {
      height: 346px; } }
  div#sp-header p {
    display: inline-block;
    max-width: 1280px;
    width: 100%;
    padding-top: 19.7%;
    position: relative; }
    div#sp-header p img {
      width: 100%;
      height: auto;
      vertical-align: bottom;
      position: absolute;
      left: 0;
      top: 1px; }

/* メインイメージ */
div.sp-mainimage-cont {
  margin-top: 100px;
  position: relative; }
  div.sp-mainimage-cont div#sp-mainimage-copy {
    float: left;
    width: 40.2%; }
    div.sp-mainimage-cont div#sp-mainimage-copy div.spimg-cont {
      width: 25.1%;
      top: 13.9%;
      left: 9.9%;
      position: absolute; }
      div.sp-mainimage-cont div#sp-mainimage-copy div.spimg-cont img {
        width: 100%;
        height: auto; }
  div.sp-mainimage-cont div#sp-mainimage-image {
    float: right;
    width: 59.8%; }
    div.sp-mainimage-cont div#sp-mainimage-image img {
      width: 100%;
      height: auto; }
  div.sp-mainimage-cont div#sp-mainimage-encopy {
    width: 12.2%;
    position: absolute;
    bottom: 0;
    left: 34.3%; }
    div.sp-mainimage-cont div#sp-mainimage-encopy img {
      width: 100%;
      height: auto; }
  @media screen and (max-width: 1280px) {
    div.sp-mainimage-cont {
      margin-top: 20%; }
      div.sp-mainimage-cont div#sp-mainimage-copy {
        float: none;
        width: 40.2%; }
        div.sp-mainimage-cont div#sp-mainimage-copy div.spimg-cont {
          width: 35.1%;
          top: 0;
          left: 9.9%;
          position: absolute; }
      div.sp-mainimage-cont div#sp-mainimage-image {
        float: none;
        width: 100%;
        text-align: right;
        padding-top: 44%; }
      div.sp-mainimage-cont div#sp-mainimage-encopy {
        width: 32.2%;
        position: absolute;
        top: 0;
        right: 9.3%;
        left: inherit; } }

/* common */
.sp-bodycopy {
  color: #113b4e;
  font-size: 1rem;
  line-height: 2rem;
  letter-spacing: 0.15rem; }
  .sp-bodycopy p {
    margin-bottom: 2rem; }
  @media screen and (max-width: 1000px) {
    .sp-bodycopy {
      font-size: 0.8rem;
      line-height: 1.4rem; } }

.sp-encopy {
  color: #113b4e;
  font-family: "Edu AU VIC WA NT Hand", cursive;
  font-size: 0.5rem;
  line-height: 0.8rem; }
  @media screen and (max-width: 1000px) {
    .sp-encopy {
      font-size: 0.5rem;
      line-height: 0.8rem; } }

.sp-imagecont-wide {
  width: 100%;
  background-size: contain; }
  @media screen and (max-width: 1000px) {
    .sp-imagecont-wide {
      background-size: cover; } }

#sp-imagecont-wide1 {
  background-image: url("img/oki.jpg");
  margin-top: -19%;
  padding-top: 100%; }
  @media screen and (max-width: 1000px) {
    #sp-imagecont-wide1 {
      padding-top: 130%;
      margin: 0;
      background-position: 100%; } }

#sp-imagecont-wide2 {
  background-image: url("img/kiln_2x.jpg");
  padding-top: 87.5%; }
  @media screen and (max-width: 1000px) {
    #sp-imagecont-wide2 {
      margin-top: 20%; } }

#sp-imagecont-wide3 {
  background-image: url("img/products.jpg");
  padding-top: 53.09%; }

/*  */
div.sp-col2 {
  margin: 100px 0;
  display: table; }
  div.sp-col2 div.sp-col2-left {
    width: 40%;
    display: table-cell;
    text-align: right; }
    div.sp-col2 div.sp-col2-left img {
      width: 70%;
      height: auto; }
  div.sp-col2 div#harumi-cont {
    text-align: left;
    width: 60%; }
    div.sp-col2 div#harumi-cont img {
      width: 100%;
      margin-top: -100px; }
    @media screen and (max-width: 1280px) {
      div.sp-col2 div#harumi-cont {
        width: 90%; }
        div.sp-col2 div#harumi-cont img {
          margin-top: 10%; } }
  div.sp-col2 div.sp-col2-right {
    width: 60%;
    display: table-cell;
    vertical-align: middle;
    text-align: center; }
    div.sp-col2 div.sp-col2-right div.sp-bodycopy {
      display: inline-block;
      text-align: left;
      width: 70%;
      max-width: 520px; }
    div.sp-col2 div.sp-col2-right div.sp-encopy {
      display: inline-block;
      text-align: left;
      width: 70%;
      max-width: 520px; }
    @media screen and (max-width: 1280px) {
      div.sp-col2 div.sp-col2-right div.sp-bodycopy, div.sp-col2 div.sp-col2-right div.sp-encopy {
        width: 80%; } }
  div.sp-col2 div#harumi-cont-right {
    width: 40%; }
    div.sp-col2 div#harumi-cont-right h2 {
      margin: 5% 0;
      font-size: 1.3rem;
      font-weight: normal; }
    @media screen and (max-width: 1280px) {
      div.sp-col2 div#harumi-cont-right {
        width: 90%;
        border-radius: 10px;
        border: thin solid #ccc;
        margin: 0 auto;
        padding: 5% 0;
        margin-top: -5%;
        background-color: #fff; }
        div.sp-col2 div#harumi-cont-right div.sp-bodycopy, div.sp-col2 div#harumi-cont-right div.sp-encopy {
          margin: 0 auto; } }
  @media screen and (max-width: 1000px) {
    div.sp-col2 {
      display: block;
      margin: 0; }
      div.sp-col2 div.sp-col2-left {
        display: block;
        width: 60%;
        text-align: center;
        margin-bottom: 30px; }
        div.sp-col2 div.sp-col2-left img {
          width: 70%;
          height: auto; }
      div.sp-col2 div.sp-col2-right {
        display: block;
        width: 100%; } }

div.siome-image {
  width: 100%;
  padding-top: 50%;
  background-image: url("img/siome.jpg");
  background-size: contain;
  position: relative; }
  @media screen and (max-width: 1000px) {
    div.siome-image {
      padding-top: initial;
      background-size: cover;
      background-position: center;
      height: 100vh;
      margin-top: 20%; } }
  div.siome-image div.siome-image-cont {
    width: 40%;
    position: absolute;
    right: 10%;
    bottom: 10%; }
    @media screen and (max-width: 1000px) {
      div.siome-image div.siome-image-cont {
        width: 80%; } }
    div.siome-image div.siome-image-cont div.sp-imagecont {
      text-align: right;
      padding-bottom: 10%; }
      div.siome-image div.siome-image-cont div.sp-imagecont img {
        width: 30%;
        height: auto; }
    div.siome-image div.siome-image-cont div.sp-bodycopy, div.siome-image div.siome-image-cont div.sp-encopy {
      color: #fff;
      width: 70%;
      max-width: 520px; }

div.sp-block-cont {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding-top: 100px; }
  @media screen and (max-width: 1000px) {
    div.sp-block-cont {
      padding-top: 10%;
      width: 90%;
      margin: 0 auto;
      margin-bottom: 20%; } }
  div.sp-block-cont div.sp-imagecont {
    width: 100%;
    padding: 10% 0; }
    div.sp-block-cont div.sp-imagecont img {
      width: 100%;
      height: auto; }
  div.sp-block-cont div#logo-salt {
    width: 80%;
    margin: 0 auto; }

h2.ttl-vertical {
  font-size: 2rem;
  line-height: 3rem;
  text-align: center;
  font-weight: normal; }
  h2.ttl-vertical p {
    margin-bottom: 0 !important; }
  @media screen and (max-width: 1000px) {
    h2.ttl-vertical p {
      /* Vertical */
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      text-orientation: upright;
      display: inline-block;
      margin: 0; } }

h3.ttl-vertical-en {
  padding: 1rem 0 3rem 0;
  text-align: center;
  font-weight: normal; }

div#wrapper-yellow {
  margin: 50px 0 0 0;
  padding: 50px 0;
  background-color: #fbfbf7; }
  @media screen and (max-width: 1000px) {
    div#wrapper-yellow {
      margin: 5% 0 0 0;
      padding: 5% 0; } }

/* 沖の潮パッケージ */
div#pkg-okinosio {
  text-align: center; }
  div#pkg-okinosio img {
    width: 80%;
    height: auto; }

/* 商品紹介 */
div.prdinfo {
  margin-top: 5rem;
  position: relative;
  /* Structure */
  display: table;
  /* Style */ }
  div.prdinfo div.prdtxt, div.prdinfo div.prdimg {
    display: table-cell;
    vertical-align: middle; }
  div.prdinfo div.prdtxt {
    width: 30%; }
    div.prdinfo div.prdtxt div.prd-ttlbox {
      height: 65vw; }
  div.prdinfo div.prdimg {
    width: 70%;
    overflow: hidden; }
    div.prdinfo div.prdimg img {
      width: 120%;
      height: auto; }
  div.prdinfo div.img-left img {
    margin-left: -20%; }
  div.prdinfo div.img-right img {
    margin-left: 0%; }
  @media screen and (max-width: 1000px) {
    div.prdinfo {
      margin-bottom: 120%; }
      div.prdinfo div.prdtxt {
        width: 30%; }
        div.prdinfo div.prdtxt div.prd-ttlbox {
          height: 150vw; }
      div.prdinfo div.prdimg {
        width: 70%;
        overflow: hidden; }
        div.prdinfo div.prdimg img {
          width: 180%;
          height: auto; }
      div.prdinfo div.prd-dsp {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%; }
      div.prdinfo div.img-left img {
        margin-left: -90%; } }
  div.prdinfo div.prdtxt {
    /* 商品詳細説明 */ }
    div.prdinfo div.prdtxt div.prd-ttlbox h2.ttl-vertical {
      width: 100%;
      text-align: center; }
      div.prdinfo div.prdtxt div.prd-ttlbox h2.ttl-vertical p {
        text-align: left;
        -ms-writing-mode: tb-lr;
       
        text-orientation: upright;
        display: inline-block;
        font-size: 3rem;
        line-height: 4rem;
        width: 3rem; }
        div.prdinfo div.prdtxt div.prd-ttlbox h2.ttl-vertical p span {
          -webkit-text-combine: horizontal;
          -ms-text-combine-horizontal: all;
          text-combine-upright: all; }
        @media screen and (max-width: 1000px) {
          div.prdinfo div.prdtxt div.prd-ttlbox h2.ttl-vertical p {
            font-size: 2rem;
            line-height: 3.2rem;
            letter-spacing: 0.7rem; } }
    div.prdinfo div.prdtxt div.prd-ttlbox h3.ttl-vertical-en {
      width: 100%;
      text-align: center; }
      div.prdinfo div.prdtxt div.prd-ttlbox h3.ttl-vertical-en p {
        text-align: center;
        display: inline-block; }
    div.prdinfo div.prdtxt div.prd-ttlbox h3.prd-catch {
      color: #113b4e;
      font-size: 1rem;
      line-height: 1.9rem;
      letter-spacing: 0.2rem;
      font-weight: normal !important;
      margin-bottom: 2rem;
      text-align: center;
      width: 100%; }
      div.prdinfo div.prdtxt div.prd-ttlbox h3.prd-catch p {
        text-align: left;
        display: inline-block;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        text-orientation: upright; }
    div.prdinfo div.prdtxt div.prd-dsp div.prdosae {
      text-align: center;
      margin-bottom: 10%; }
      @media screen and (max-width: 1000px) {
        div.prdinfo div.prdtxt div.prd-dsp div.prdosae {
          margin-top: -10%; } }
      div.prdinfo div.prdtxt div.prd-dsp div.prdosae img {
        width: 50%;
        height: auto; }
    div.prdinfo div.prdtxt div.prd-dsp div.sp-bodycopy {
      text-align: left;
      position: relative; }
      div.prdinfo div.prdtxt div.prd-dsp div.sp-bodycopy h3 {
        font-size: 1.2rem;
        line-height: 2.2rem;
        font-weight: normal !important;
        margin-bottom: 2rem;
        text-align: center; }
      div.prdinfo div.prdtxt div.prd-dsp div.sp-bodycopy div.prd-colmn {
        border: thin solid #eeeff0;
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
        width: 90%;
        margin: 0 auto; }
        div.prdinfo div.prdtxt div.prd-dsp div.sp-bodycopy div.prd-colmn h4 {
          font-size: 1rem;
          text-align: center;
          background-color: #113b4e;
          font-weight: normal;
          color: #fff; }
        div.prdinfo div.prdtxt div.prd-dsp div.sp-bodycopy div.prd-colmn p {
          font-size: 0.8rem;
          line-height: 1.3rem;
          margin: 0;
          padding: 1rem 1.5rem; }
      div.prdinfo div.prdtxt div.prd-dsp div.sp-bodycopy::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 0;
        height: 0;
        margin-top: -14px;
        border-right: 8px solid transparent;
        border-left: 8px solid transparent;
        border-bottom: 8px solid #113b4e;
        border-top: 8px solid transparent;
        z-index: 1; }

div.prd-buy {
  text-align: center;
  padding: 1rem 0; }
  div.prd-buy a {
    font-family: "Edu AU VIC WA NT Hand", cursive;
    text-align: center;
    background-color: #fbfbf7;
    color: #113b4e;
    padding: 5px 10px 5px 31px;
    border-radius: 5px;
    background-image: url("img/icon-cart.svg");
    background-repeat: no-repeat;
    background-position: 5px;
    background-size: 1rem; }
    div.prd-buy a:hover {
      background-color: #fff; }