@charset "UTF-8";
/* common.css */
/* -------------------------------- 
共通
-------------------------------- */
/*mediaquery*/
/* header */
.header {
  position: relative;
  margin: 0 auto;
  width: 100%; }
  .header div.headerflex {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding: 20px 30px;
    max-width: 1260px; }
    @media screen and (max-width: 640px) {
      .header div.headerflex {
        display: block;
        justify-content: center;
        width: 100%;
        padding: 20px; } }
    .header div.headerflex div.left {
      margin-top: 0.5em;
      width: 55%; }
      @media screen and (max-width: 640px) {
        .header div.headerflex div.left {
          width: 100%; } }
      .header div.headerflex div.left h1 {
        margin: 0;
        max-width: 500px; }
      @media screen and (max-width: 640px) {
        .header div.headerflex div.left {
          text-align: center;
          margin: 0 auto; } }
      .header div.headerflex div.left a img {
        vertical-align: baseline; }
    .header div.headerflex div.right {
      width: auto; }
      @media (max-width: 768px) and (min-width: 641px) {
        .header div.headerflex div.right {
          margin-left: 1.5em; } }
      @media screen and (max-width: 640px) {
        .header div.headerflex div.right {
          margin-top: 1em;
          text-align: center;
          width: 100%; } }
      .header div.headerflex div.right div#headnav {
        margin-bottom: .5em; }
        .header div.headerflex div.right div#headnav img#order {
          width: auto;
          height: 90%; }
          @media (max-width: 768px) and (min-width: 641px) {
            .header div.headerflex div.right div#headnav img#order {
              width: 55%; } }
        .header div.headerflex div.right div#headnav img#trader {
          width: auto;
          height: 90%; }
          @media (max-width: 768px) and (min-width: 641px) {
            .header div.headerflex div.right div#headnav img#trader {
              width: 39%; } }
      .header div.headerflex div.right img {
        width: auto; }
        @media (max-width: 768px) and (min-width: 641px) {
          .header div.headerflex div.right img {
            width: 90%; } }
      .header div.headerflex div.right p {
        font-size: 16px;
        margin: .3em 0 0 1.8em; }

/*tel＿none */
@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none; } }
/* pc_gnav */
.pc_gnav .nav {
  padding: 24px 0; }
  .pc_gnav .nav li a img {
    width: auto;
    height: 90%;
    opacity: 1; }
  .pc_gnav .nav li img {
    width: auto;
    height: 90%;
    opacity: 0.5; }

/* nav */
#navigation {
  position: absolute;
  display: none;
  width: 100%; }

/* nav spmenu */
@media screen and (max-width: 640px) {
  #navigation {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: relative; }
    #navigation .navigation_inner {
      width: 100%; }

  .wrap {
    margin: 0 auto;
    padding: 0;
    max-width: 100%;
    overflow: hidden; }

  .flexnav {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    transition: none;
    -webkit-transform-style: preserve-3d;
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    max-height: 0;
    padding: 0; }

  .flexnav.opacity {
    opacity: 0; }

  .flexnav.flexnav-show {
    max-height: 2000px;
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out; }

  .flexnav.flexnav-show ul li {
    margin: 0; }

  .flexnav li {
    font-size: 100%;
    position: relative;
    overflow: hidden;
    margin: 0; }
    .flexnav li a {
      position: relative;
      display: block;
      padding: .96em;
      z-index: 2;
      overflow: hidden;
      color: #222222;
      text-align: center;
      background: #fddbdb;
      border-bottom: 1px solid rgba(0, 0, 0, 0.15); }

  .flexnav li ul.flexnav-show li {
    overflow: visible; }
    .flexnav li ul.flexnav-show li .touch-button:hover {
      cursor: pointer; }

  .menu-button {
    position: relative;
    display: block;
    padding: 1em;
    cursor: pointer;
    background: #dc0000;
    color: #fff;
    text-align: center;
    border-bottom: none; }
    .menu-button .touch-button {
      background: transparent;
      position: absolute;
      z-index: 999;
      top: 0;
      right: 0;
      width: 50px;
      height: 50px;
      display: inline-block;
      text-align: center; }
    .menu-button .touch-button .navicon {
      color: #fff;
      font-size: 14px;
      position: relative;
      top: 1.1em; } }
/* pagetop */
.pagetop {
  display: block;
  padding: 5px;
  position: fixed;
  bottom: 80px;
  right: 20px;
  cursor: pointer;
  border-radius: 50% 50%;
  height: 50px;
  width: 50px;
  background: #dc0000; }
  @media screen and (max-width: 640px) {
    .pagetop {
      display: none; } }

/* -------------------------------- 
footer components 
--------------------------------- */
footer {
  color: #fff;
  padding: 0;
  text-align: center; }
  footer p.copy {
    background: #754c24;
    font-size: 11px;
    margin: 0;
    padding: 40px 0 30px; }
    @media screen and (max-width: 640px) {
      footer p.copy {
        font-size: 10px;
        padding: 20px 0; } }
  footer .inner {
    margin: 0 auto;
    padding: 0; }
    footer .inner a {
      color: #fff; }
  footer div#back-img {
    background: url(../img/foot_back.png) center 0 no-repeat; }
  footer img {
    margin-top: 48px;
    max-width: 15%; }
    @media screen and (max-width: 640px) {
      footer img {
        margin-top: 32px;
        max-width: 25%; } }
  footer .inner p {
    font-size: 1.1em;
    line-height: 1.5;
    margin: 0;
    padding-top: 24px; }
    @media screen and (max-width: 640px) {
      footer .inner p {
        font-size: .9em;
        line-height: 1.5;
        margin: 0;
        padding-top: 16px; } }

/* -------------------------------- 
index components 
--------------------------------- */
/* flex */
.main section.index_top-1 .inner .mainflex,
.main section.index_top-2 .inner .mainflex,
.main section.index_info-1 .inner .mainflex,
.main section.index_info-2 .inner .mainflex {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0; }

/* hタイトル */
.main section.index_top-1 .inner h2,
.main section.index_top-2 .inner h2,
.main section.index_info-1 .inner h2,
.main section.index_info-2 .inner h2 {
  color: #754c24;
  text-align: center;
  margin: 0 0 40px 0;
  font-size: 1.8em; }

/* アイコン:さくらんぼ */
.main section.index_top-1 .inner div.h2-ic_che,
.main section.index_top-2 .inner div.h2-ic_che,
.main section.index_info-1 .inner div.h2-ic_che,
.main section.index_info-2 .inner div.h2-ic_che {
  display: block;
  background: url(../img/ic_cherry.png) center no-repeat;
  height: 32px; }

/* アイコン:会社概要 */
.main section.index_top-1 .inner div.h2-ic_pro,
.main section.index_top-2 .inner div.h2-ic_pro,
.main section.index_info-1 .inner div.h2-ic_pro,
.main section.index_info-2 .inner div.h2-ic_pro {
  display: block;
  background: url(../img/ic_profile.png) center no-repeat;
  height: 36px; }

/* アイコン:注文方法 */
.main section.index_top-1 .inner div.h2-ic_ord,
.main section.index_top-2 .inner div.h2-ic_ord,
.main section.index_info-1 .inner div.h2-ic_ord,
.main section.index_info-2 .inner div.h2-ic_ord {
  display: block;
  background: url(../img/ic_order.png) center no-repeat;
  height: 32px; }

@media (max-width: 768px) and (min-width: 641px) {
  .main section.index_info-1 .inner .mainflex,
  .main section.index_info-2 .inner .mainflex {
    display: block;
    justify-content: center; }

  .main section.index_top-1 .inner h1 {
    display: none; } }
@media screen and (max-width: 640px) {
  .main section.index_top-1 .inner .mainflex,
  .main section.index_top-2 .inner .mainflex,
  .main section.index_info-1 .inner .mainflex,
  .main section.index_info-2 .inner .mainflex {
    display: block;
    justify-content: center; }

  .main section.index_top-1 .inner h1 {
    display: none; } }
.owari {
  color: #f00; }

/*  会社概要
-------------------------------- */
.main section.index_top-1 .inner .mainflex div.profile {
  background: #faf0e6;
  margin: 0 auto;
  line-height: 1.6;
  padding: 20px; }
  @media screen and (max-width: 640px) {
    .main section.index_top-1 .inner .mainflex div.profile {
      padding: 10px 20px; } }
  .main section.index_top-1 .inner .mainflex div.profile dl {
    border: 0;
    padding: 0;
    margin: 0; }
  .main section.index_top-1 .inner .mainflex div.profile dt {
    display: block;
    padding: 10px 0;
    width: 6em;
    clear: left;
    float: left; }
    @media screen and (max-width: 640px) {
      .main section.index_top-1 .inner .mainflex div.profile dt {
        float: none;
        padding: 10px 0 0 0; } }
  .main section.index_top-1 .inner .mainflex div.profile dd {
    display: block;
    padding: 10px 0;
    /*width: calc(100% - 6em);*/
    float: left; }
    @media screen and (max-width: 640px) {
      .main section.index_top-1 .inner .mainflex div.profile dd {
        float: none;
        margin: 0;
        padding: 5px 0 10px; } }
    .main section.index_top-1 .inner .mainflex div.profile dd ul {
      padding: 0; }
      .main section.index_top-1 .inner .mainflex div.profile dd ul li {
        margin: 0;
        padding: 0;
        line-height: 1.6; }
      .main section.index_top-1 .inner .mainflex div.profile dd ul li::before {
        padding: 0;
        text-indent: -1em;
        width: 0; }

/* ギャラリー */
.main section.index_top-1 .inner .mainflex div.gal_img {
  margin: 10px; }

/*  ご注文について
-------------------------------- */
.main section.index_info-2 {
  background: url(../img/back_3dot.png) 0 0 repeat;
  padding: 20px 0 40px; }

.main section.index_top-1 .inner p,
.main section.index_info-2 .inner p {
  line-height: 1.8; }

.main section.index_top-1 .inner .mainflex div.left,
.main section.index_info-2 .inner .mainflex div.left {
  width: 50%;
  /* (左)；画像 */ }
  .main section.index_top-1 .inner .mainflex div.left img,
  .main section.index_info-2 .inner .mainflex div.left img {
    display: block;
    margin: 10px auto;
    max-width: 85%; }

.main section.index_top-1 .inner .mainflex div.right,
.main section.index_info-2 .inner .mainflex div.right {
  width: 50%;
  /* (右)：注文方法 */
  /* (右)：ダウンロード画像サイズ */ }
  .main section.index_top-1 .inner .mainflex div.right ul,
  .main section.index_info-2 .inner .mainflex div.right ul {
    list-style: none;
    margin-top: 20px;
    padding-left: 0; }
  .main section.index_top-1 .inner .mainflex div.right ul li,
  .main section.index_info-2 .inner .mainflex div.right ul li {
    list-style: none;
    line-height: 2.0;
    padding: .5em; }
  .main section.index_top-1 .inner .mainflex div.right ul li:before,
  .main section.index_info-2 .inner .mainflex div.right ul li:before {
    width: 0;
    height: 0; }
  .main section.index_top-1 .inner .mainflex div.right ul li img,
  .main section.index_info-2 .inner .mainflex div.right ul li img {
    max-width: 50%; }
  .main section.index_top-1 .inner .mainflex div.right img,
  .main section.index_info-2 .inner .mainflex div.right img {
    max-width: 80%; }

/* お支払い */
.main section.index_top-1 .inner h3,
.main section.index_info-2 .inner h3 {
  background: #754c24;
  color: #fff;
  padding: .4em .8em;
  margin-top: 40px; }

.main section.index_top-1 .inner ul,
.main section.index_info-2 .inner ul {
  padding: 0 0 0 1em; }

.main section.index_top-1 .inner ul li,
.main section.index_info-2 .inner ul li {
  list-style: none;
  line-height: 2.0;
  padding: .1em .5em;
  position: relative; }

.main section.index_top-1 .inner ul li:before,
.main section.index_info-2 .inner ul li:before {
  background-color: #dc0000;
  /* 円の色 */
  border-radius: 50%;
  content: '';
  position: absolute;
  top: .7em;
  /* 円の上側位置調整 */
  left: -.5em;
  /* 円の左側位置調整 */
  width: 12px;
  /* 円の幅 */
  height: 12px;
  /* 円の高さ */ }

/* 送料表 */
.main section.index_top-1 .inner #ryokin-area,
.main section.index_info-2 .inner #ryokin-area {
  margin: 0 auto;
  width: 100%; }
  .main section.index_top-1 .inner #ryokin-area p.yen,
  .main section.index_info-2 .inner #ryokin-area p.yen {
    font-size: 14px;
    text-align: right;
    margin-bottom: .5em; }

/* 見出し */
/* sp */
.main section.index_top-1 .inner #ryokin-area p#sp-ti,
.main section.index_info-2 .inner #ryokin-area p#sp-ti {
  display: none; }

.main section.index_top-1 .inner #ryokin-area table#ryokin,
.main section.index_info-2 .inner #ryokin-area table#ryokin {
  border-collapse: collapse;
  margin: 0 auto;
  width: 100%; }

.main section.index_top-1 .inner #ryokin-area table#ryokin th,
.main section.index_top-1 .inner #ryokin-area table#ryokin td,
.main section.index_info-2 .inner #ryokin-area table#ryokin th,
.main section.index_info-2 .inner #ryokin-area table#ryokin td {
  border: solid 1px black;
  padding: .2em .5em; }

.main section.index_top-1 .inner #ryokin-area table#ryokin tr th,
.main section.index_info-2 .inner #ryokin-area table#ryokin tr th {
  background: #68ae3a;
  color: #fff;
  font-weight: normal; }

.main section.index_top-1 .inner #ryokin-area table#ryokin td.size,
.main section.index_info-2 .inner #ryokin-area table#ryokin td.size {
  background: #f8c0c1;
  font-weight: normal;
  text-align: left; }

.main section.index_top-1 .inner #ryokin-area table#ryokin td,
.main section.index_info-2 .inner #ryokin-area table#ryokin td {
  background: #fff;
  text-align: right; }

.main section.index_top-1 .inner #ryokin-area p.fc-cool,
.main section.index_info-2 .inner #ryokin-area p.fc-cool {
  color: #dc0000;
  font-size: 1.1em;
  margin: .4em; }

@media (max-width: 768px) and (min-width: 641px) {
  .main section.index_top-1 .inner,
  .main section.index_info-2 .inner {
    padding-bottom: 0; }
    .main section.index_top-1 .inner p,
    .main section.index_info-2 .inner p {
      margin: 0; }
    .main section.index_top-1 .inner .mainflex div.left,
    .main section.index_info-2 .inner .mainflex div.left {
      margin: 0 auto;
      width: 50%; }
    .main section.index_top-1 .inner img,
    .main section.index_info-2 .inner img {
      max-width: 100%; }
    .main section.index_top-1 .inner .mainflex div.right,
    .main section.index_info-2 .inner .mainflex div.right {
      margin: 0 auto;
      width: 50%;
      /* (右)：ダウンロード画像サイズ */ }
      .main section.index_top-1 .inner .mainflex div.right ul li img,
      .main section.index_info-2 .inner .mainflex div.right ul li img {
        max-width: 80%; }
      .main section.index_top-1 .inner .mainflex div.right img,
      .main section.index_info-2 .inner .mainflex div.right img {
        max-width: 90%; } }
@media screen and (max-width: 640px) {
  .main section.index_top-1 .inner p,
  .main section.index_info-2 .inner p {
    margin: 0; }

  .main section.index_top-1 .inner .mainflex div.left,
  .main section.index_info-2 .inner .mainflex div.left {
    margin: 0 auto;
    width: 100%; }
    .main section.index_top-1 .inner .mainflex div.left img,
    .main section.index_info-2 .inner .mainflex div.left img {
      max-width: 70%; }

  .main section.index_top-1 .inner .mainflex div.right,
  .main section.index_info-2 .inner .mainflex div.right {
    margin: 0;
    width: 100%;
    /* (右)：ダウンロード画像サイズ */ }
    .main section.index_top-1 .inner .mainflex div.right ul li,
    .main section.index_info-2 .inner .mainflex div.right ul li {
      margin-left: 20px;
      width: 70%; }
      .main section.index_top-1 .inner .mainflex div.right ul li img,
      .main section.index_info-2 .inner .mainflex div.right ul li img {
        margin: 0 auto;
        max-width: 100%; }
    .main section.index_top-1 .inner .mainflex div.right img,
    .main section.index_info-2 .inner .mainflex div.right img {
      display: block;
      margin: 20px auto;
      max-width: 90%; }

  /* 送料表 */
  /* 見出し */
  .main section.index_top-1 .inner #ryokin-area p#sp-ti,
  .main section.index_info-2 .inner #ryokin-area p#sp-ti {
    display: block;
    background: #68ae3a;
    color: #fff;
    border: solid 1px black;
    padding: .2em .5em; }

  /* 見出し行を消す */
  .main section.index_top-1 .inner #ryokin-area table#ryokin th,
  .main section.index_info-2 .inner #ryokin-area table#ryokin th {
    display: none; }

  /* セルをブロックとして表示 */
  .main section.index_top-1 .inner #ryokin-area table#ryokin td,
  .main section.index_info-2 .inner #ryokin-area table#ryokin td {
    display: block;
    border-top: solid 0px black;
    text-align: left;
    padding: .5em; }

  /* 最初の項目に背景色を付ける */
  .main section.index_top-1 .inner #ryokin-area table#ryokin td:nth-child(1),
  .main section.index_info-2 .inner #ryokin-area table#ryokin td:nth-child(1) {
    margin-top: 0;
    background-color: #f8c0c1;
    border-top: solid 0px black;
    text-align: left; }

  /* セルに見出し代わりの文字を付加 */
  .main section.index_top-1 .inner #ryokin-area table#ryokin td:nth-child(2):before,
  .main section.index_info-2 .inner #ryokin-area table#ryokin td:nth-child(2):before {
    content: '北海道：'; }

  .main section.index_top-1 .inner #ryokin-area table#ryokin td:nth-child(3):before,
  .main section.index_info-2 .inner #ryokin-area table#ryokin td:nth-child(3):before {
    content: '東北・関東・信越：'; }

  .main section.index_top-1 .inner #ryokin-area table#ryokin td:nth-child(4):before,
  .main section.index_info-2 .inner #ryokin-area table#ryokin td:nth-child(4):before {
    content: '北陸・中部：'; }

  .main section.index_top-1 .inner #ryokin-area table#ryokin td:nth-child(5):before,
  .main section.index_info-2 .inner #ryokin-area table#ryokin td:nth-child(5):before {
    content: '関西：'; }

  .main section.index_top-1 .inner #ryokin-area table#ryokin td:nth-child(6):before,
  .main section.index_info-2 .inner #ryokin-area table#ryokin td:nth-child(6):before {
    content: '中国・四国：'; }

  .main section.index_top-1 .inner #ryokin-area table#ryokin td:nth-child(7):before,
  .main section.index_info-2 .inner #ryokin-area table#ryokin td:nth-child(7):before {
    content: '九州：'; }

  .main section.index_top-1 .inner #ryokin-area table#ryokin td:nth-child(8):before,
  .main section.index_info-2 .inner #ryokin-area table#ryokin td:nth-child(8):before {
    content: '沖縄：'; } }
/* コロナ対策 */
/* (左) */
.main section.index_top-1 .inner .mainflex div.corona_left {
  width: 60%; }
  @media screen and (max-width: 640px) {
    .main section.index_top-1 .inner .mainflex div.corona_left {
      width: 100%; } }
  .main section.index_top-1 .inner .mainflex div.corona_left ul {
    font-size: 18px; }

/* (右) */
.main section.index_top-1 .inner .mainflex div.corona_right {
  width: 40%; }
  @media screen and (max-width: 640px) {
    .main section.index_top-1 .inner .mainflex div.corona_right {
      width: 100%; } }
  .main section.index_top-1 .inner .mainflex div.corona_right img.corona {
    display: block;
    border-radius: 20px;
    margin: 20px auto;
    max-width: 75%; }
    @media screen and (max-width: 640px) {
      .main section.index_top-1 .inner .mainflex div.corona_right img.corona {
        max-width: 60%; } }

/* 注文書ダウンロード */
/* (中央) */
.main section.index_top-1 .inner img.downlord {
  display: block;
  margin: 80px auto 0;
  max-width: 55%; }
  @media screen and (max-width: 640px) {
    .main section.index_top-1 .inner img.downlord {
      max-width: 90%; } }