@charset "UTF-8";
/* ==========================================================================
   projectSettings[vars]
   ========================================================================== */
/* Support Setting
   ----------------------------------------------------------------- */
/* Media Query Break Point
   ----------------------------------------------------------------- */
/* Color
   ----------------------------------------------------------------- */
/* Backgound
   ----------------------------------------------------------------- */
/* Font
   ----------------------------------------------------------------- */
/* Link
   ----------------------------------------------------------------- */
/* SignatureSetting
   ----------------------------------------------------------------- */
/*
  Site Name:
  Description: style
  Version: 1.0
  Author: jun.watanabe
*/
/* ==========================================================================
   mixins
   ========================================================================== */
/* Media Query (http://davidwalsh.name/write-media-queries-sass)
   ----------------------------------------------------------------- */
/*****  padding  *****/
/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* ==========================================================================
   Base
   ========================================================================== */
/* Default Font Size
   ----------------------------------------------------------------- */
html {
  font-size: 62.5%; }

/* body
   ----------------------------------------------------------------- */
body {
  text-align: center;
  /* box centering */
  color: #4d4d4d;
  font-family: "Lucida Grande", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  margin: 0;
  padding: 0;
  background: #fafafa;
  width: 100%;
  height: 100%;
  position: relative;
  min-width: 980px;
  /* for iPad view */ }

/* link
   ----------------------------------------------------------------- */
a {
  color: #f00;
  text-decoration: underline; }
  a:link {
    color: #f00;
    text-decoration: underline; }
  a:visited {
    color: #e00;
    text-decoration: none; }
  a:hover {
    color: #f00;
    text-decoration: none; }
  a:active {
    color: #f00;
    text-decoration: none; }

/* button
   ----------------------------------------------------------------- */
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  font-size: inherit; }

/* for iOS , Android
   ----------------------------------------------------------------- */
/* ==========================================================================
   form
   ========================================================================== */
.label {
  width: 100%;
  display: inline-block;
  vertical-align: top; }

.label--radio {
  display: block;
  /* cancel '.label' value */
  width: auto;
  /* cancel '.label' value */
  position: relative;
  background: url(../img/bg_radio.png) 0 0 no-repeat;
  padding-left: 35px;
  height: 34px;
  line-height: 34px;
  margin-right: 30px;
  float: left; }
  .label--radio.is-selected {
    background-position: 0 -39px; }

.label--checkbox {
  margin: 0 auto;
  width: auto;
  /* cancel '.label' value */
  position: relative;
  background: url(../img/bg_checkbox.png) 0 0 no-repeat;
  height: 32px;
  line-height: 32px;
  padding-left: 35px; }
  .label--checkbox.is-selected {
    background-position: 0 -37px; }

.select__group {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  .select__group--birth {
    width: 100%;
    padding-left: 20px; }

.label--select--year {
  width: 100%;
  margin-bottom: 15px; }
.label--select--month {
  width: 50%;
  margin-left: -20px; }
.label--select--day {
  width: 50%;
  margin-left: 20px; }

input {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  input[type="text"], input[type="tel"], input[type="zip"], input[type="mail"], input[type="password"] {
    width: 100%;
    padding: 14px 10px;
    border-radius: 3px;
    border: 2px solid #4bb8ac;
    background: #fff; }
    .is-error input[type="text"], .is-error input[type="tel"], .is-error input[type="zip"], .is-error input[type="mail"], .is-error input[type="password"] {
      border-color: #ea412a;
      background-color: #fff3c3; }
  input[type="radio"] {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0; }
  input[type="checkbox"] {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0; }

textarea {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #d1d1d1;
  background: #fff;
  font-size: 16px;
  color: #333333;
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  .is-error textarea {
    border-color: #ea412a;
    background-color: #fff3c3; }

.select {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.placeholder {
  color: #999999; }

.customSelect {
  /* This is the default class that is used */
  /* Put whatever custom styles you want here */
  vertical-align: top;
  width: 100%;
  height: 46px;
  padding: 0 30px 0 20px;
  line-height: 46px;
  border-radius: 5px;
  border: 1px solid #bfbfbf;
  background: #fff url(../img/bg_select.png) 100% 50% no-repeat;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15); }
  .is-error .customSelect {
    border-color: #ea412a;
    background-color: #fff3c3; }

.customSelect.customSelectHover {
  /* Styles for when the select box is hovered */ }

.customSelect.customSelectOpen {
  /* Styles for when the select box is open */ }

.customSelect.customSelectFocus {
  /* Styles for when the select box is in focus */ }

.customSelectInner {
  /* You can style the inner box too */
  width: 100% !important;
  display: block; }

.fieldset {
  display: table;
  width: 100%;
  /* 1カラム用Modifier */ }
  .fieldset.is-error {
    color: #ea412a; }
  .fieldset__title {
    display: table-cell;
    text-align: left;
    width: 200px;
    padding-right: 10px;
    vertical-align: middle;
    line-height: 1.2;
    white-space: nowrap; }
  .fieldset__title--username {
    width: 60px; }
  .fieldset__body {
    display: table-cell;
    vertical-align: middle; }
  .fieldset__body p{
    word-break: break-all;
    word-wrap: break-word;
    min-height: 1.0em;
  }
  .fieldset__body--username {
    text-align: right; }
    .fieldset__body--username input[type=text] {
      width: 80%; }
  .fieldset__note {
    display: block;
    margin-top: 5px; }
  .fieldset__confirm {
    padding: 14px 10px;
    border-radius: 3px;
    border: 2px solid #ccc;
    background: #fff; }
  .fieldset--one-column {
    width: 60%;
    margin: 0 auto;
    /* fieldset__title幅ちょい広Modifier */ }
    .fieldset--one-column > .fieldset__title {
      width: 70px;
      padding-right: 10px; }
    .fieldset--one-column > .fieldset__title--l {
      width: 80px; }

/* fieldsetを横幅いっぱいで使うModifier */
.fieldset--block {
  display: block;
  width: 100%; }
  .fieldset--block > .fieldset__title {
    /* cancel '.fieldset__title' value */
    display: block;
    width: 100%;
    padding-right: 0; }
  .fieldset--block > .fieldset__body {
    /* cancel '.fieldset__title' value */
    display: block;
    margin-top: 5px;
    vertical-align: middle;
    width: 100%; }

/* 1カラム用のフィールドセットタイトルサイズ調整 */
.form__msg {
  display: block;
  margin-top: 10px; }
  .form__msg.is-error {
    color: #ea412a; }

.c-grid--full.p-zip-grid {
  margin-left: -15px;
  /* cancel '.c-grid--full' value */
  margin-right: -15px;
  /* cancel '.c-grid--full' value */ }

.p-zip-grid > .c-seperater--hyphen {
  left: 50%;
  /* cancel '.c-separater--hyphen' */ }

.p-zip-grid > .c-grid__item.has-gutter {
  padding-right: 15px;
  /* cancel '.c-grid__item.has-gutter' */
  padding-left: 15px;
  /* cancel '.c-grid__item.has-gutter' */ }

.c-grid--full.p-tel-grid {
  margin-left: -20px;
  /* cancel '.c-grid--full' value */
  margin-right: -20px;
  /* cancel '.c-grid--full' value */ }

.p-tel-grid > .c-separater--hyphen--1 {
  left: 33.33%;
  /* cancel '.c-separater--hyphen' */ }

.p-tel-grid > .c-separater--hyphen--2 {
  left: 66.66%;
  /* cancel '.c-separater--hyphen' */ }

.p-tel-grid > .c-grid__item.has-gutter {
  padding-right: 20px;
  /* cancel '.c-grid__item.has-gutter' */
  padding-left: 20px;
  /* cancel '.c-grid__item.has-gutter' */ }

.is-disabled__wrap {
  opacity: .50;
  /* Standard: FF gt 1.5, Opera, Safari */
  filter: alpha(opacity=50);
  /* IE lt 8 */
  -ms-filter: "alpha(opacity=50)";
  /* IE 8 */
  -khtml-opacity: .50;
  /* Safari 1.x */
  -moz-opacity: .50;
  /* FF lt 1.5, Netscape */ }

.is-disabled {
  display: none; }

/* ==========================================================================
   Footer
   ========================================================================== */
/* CSS Sticky Footer
   ----------------------------------------------------------------- */
html, body {
  height: 100%; }

#wrap {
  min-height: 100%; }

.ie7 #wrap {
  display: table;
  height: 100%; }

#main {
  overflow: hidden;
  padding-bottom: 80px; }

/* must be same height as the footer */
#footer {
  position: relative;
  margin-top: -80px;
  /* negative value of footer height */
  height: 80px;
  clear: both;
  background: #4bb8ac; }

body:before {
  /*Opera min-height 100% Fix*/
  content: "";
  height: 100%;
  float: left;
  width: 0;
  margin-top: -32767px;
  /*eliminate need for inner non clearing element*/ }

/* トップ用 */
/* CSS Sticky Footer
   ----------------------------------------------------------------- */
#main.main--top {
  padding-bottom: 135px; }

/* must be same height as the footer */
#footer.footer--top {
  margin-top: -135px;
  /* negative value of footer height */
  height: 135px; }

/* フォントサイズチェンジUI */
.p-fontsize-change {
  color: #fff;
  display: table;
  position: absolute;
  top: 25px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  width: 200px;
  width: 20rem; }

.p-fontsize-change__title {
  display: table-cell;
  text-align: center; }

.p-fontsize-change__body {
  display: table-cell;
  text-align: center; }

.p-fontsize-change__nav-outer {
  height: 34px;
  position: relative; }
  .p-fontsize-change__nav-outer > .c-separater {
    /* cancel '.c-separater' value */
    position: absolute;
    left: 49%;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 17px;
    width: 2px; }

.p-fontsize-change__nav {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 34px;
  height: 34px;
  line-height: 34px;
  margin: 0 8px;
  font-size: 0; }
  .p-fontsize-change__nav:link, .p-fontsize-change__nav:visited, .p-fontsize-change__nav:active, .p-fontsize-change__nav:hover {
    color: #fff;
    text-decoration: none; }
  .p-fontsize-change__nav:after {
    content: "";
    position: absolute;
    width: 34px;
    height: 34px;
    display: block;
    border-radius: 17px;
    border: 2px solid #69cabf;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; }
  .p-fontsize-change__nav.is-active:after {
    border-color: #fff; }

.f-nav {
  position: absolute;
  width: 100%;
  top: 20px;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center; }

.f-nav--top {
  top: 75px;
  /* cancel '.f-nav' value */ }

.f-nav__item:link, .f-nav__item:visited, .f-nav__item:active, .f-nav__item:hover {
  color: #fff;
  text-decoration: none; }

.copyright {
  color: #fff;
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: auto; }

/* ==========================================================================
   header
   ========================================================================== */
#header {
  position: relative;
  z-index: 100; }
  #header .sitename {
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -460px; }
  #header > header {
    background: #4bb8ac;
    height: 50px;
    margin: 0 auto;
    padding: 0;
    position: relative; }

#header.header--top {
  background: url(../img/bg_header_top.jpg) 0 0 repeat-x;
  height: 500px;
  overflow: hidden; }
  #header.header--top > header {
    background-color: transparent;
    height: 100%;
    padding: 0; }
  #header.header--top .sitename--top {
    padding-top: 84px;
    position: relative;
    z-index: 100; }

/* フォントサイズチェンジUI */
.p-fontsize-change--header {
  /* cancle 'p-fontsize-change' value */
  top: 0;
  /* cancle 'p-fontsize-change' value */
  bottom: 0;
  left: auto;
  /* cancle 'p-fontsize-change' value */
  right: 50%;
  margin: auto 0;
  /* cancle 'p-fontsize-change' value */
  margin-right: -480px; }

/* ==========================================================================
   g-nav
   ========================================================================== */
#g-nav {
  width: 960px;
  margin: 0 auto;
  padding: 0;
  height: 50px;
  background: #fff;
  z-index: 200;
  display: table;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.g-nav__item {
  text-align: center;
  display: table-cell;
  width: 14.29%;
  height: 50px; }
  .g-nav__item > a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    margin: 0 auto;
    text-align: center; }
    .g-nav__item > a:after {
      content: "";
      display: block;
      height: 20px;
      width: 1px;
      background: #e6e6e6;
      text-indent: -9999px;
      overflow: hidden;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto; }
    .g-nav__item > a .g-nav__btm-border {
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      height: 8px;
      width: 100%;
      background: #fff; }
  .g-nav__item:last-child > a:after {
    display: none; }
  .g-nav__item.is-active .g-nav__btm-border {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 8px;
    width: 100%;
    background: #fdc461; }

.g-nav__image {
  height: 50px;
  display: inline-block;
  vertical-align: middle;
  text-indent: -9999px;
  overflow: hidden;
  background: transparent 50% 40% no-repeat; }

.g-nav__item--1 .g-nav__image {
  background-image: url(../img/g_nav_order.png);
  width: 82px; }

.g-nav__item--2 .g-nav__image {
  background-image: url(../img/g_nav_shop.png);
  width: 83px; }

.g-nav__item--3 .g-nav__image {
  background-image: url(../img/g_nav_history.png);
  width: 83px; }

.g-nav__item--4 .g-nav__image {
  background-image: url(../img/g_nav_register.png);
  width: 84px; }

.g-nav__item--5 .g-nav__image {
  background-image: url(../img/g_nav_faq.png);
  width: 106px; }

.g-nav__item--6 .g-nav__image {
  background-image: url(../img/g_nav_top.png);
  width: 98px; }

.g-nav__item--7 .g-nav__image {
  background-image: url(../img/g_nav_logout.png);
  width: 94px; }

/* ==========================================================================
   h-nav
   ========================================================================== */
#h-nav {
  padding: 0; }

.h-nav__row {
  padding: 30px 0;
  margin: 0 auto;
  display: table; }

.h-nav__item {
  text-align: center;
  display: table-cell; }
  .h-nav__item > a {
    text-indent: -9999px;
    overflow: hidden;
    position: relative;
    display: block;
    margin: 0 auto; }
  .h-nav__item .is-notification:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0; }

.h-nav__row--1 {
  width: 400px; }

.h-nav__row--1 > .h-nav__item {
  width: 200px; }

.h-nav__row--2 {
  padding: 20px 0; }

.h-nav__row--2 > .h-nav__item {
  width: auto;
  padding: 0 10px;
  vertical-align: bottom; }

/* ==========================================================================
   main
   ========================================================================== */
/* sidebar
   ----------------------------------------------------------------- */
/* サイドバー用の背景設定 */
.wrap--sidebar {
  position: relative; }
  .wrap--sidebar:after {
    content: "";
    display: block;
    height: 100%;
    width: 290px;
    position: absolute;
    right: 50%;
    top: 0;
    margin-right: -480px;
    background: #c2e6ff;
    z-index: 0; }

#sidebar {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  z-index: 100;
  display: table-cell;
  vertical-align: top;
  width: 290px;
  padding: 20px;
  position: relative; }

/* サイドバー用c-tableview */
#sidebar .c-tableview {
  border: none;
  /* cancel '.c-tableview' value */ }
  #sidebar .c-tableview > .c-tableview__item {
    border: none;
    /* cancel '.c-tableview__item' value */ }
#sidebar .p-shopinfo__title {
  border-bottom-right-radius: 0;
  /* cancel '.c-tableview' value */
  border-bottom-left-radius: 0;
  /* cancel '.c-tableview' value */ }
#sidebar .p-shopinfo__body {
  border-top-right-radius: 0;
  /* cancel '.c-tableview' value */
  border-top-left-radius: 0;
  /* cancel '.c-tableview' value */ }

.p-sidebar-utility {
  /* cancel '.c-tableview' value */ }
  .p-sidebar-utility .c-tableview__target {
    /* cancel '.c-tableview__item' value */
    padding: 15px 10px;
    /* 余白設定 */
    text-decoration: none; }
    .p-sidebar-utility .c-tableview__target:link, .p-sidebar-utility .c-tableview__target:visited, .p-sidebar-utility .c-tableview__target:active, .p-sidebar-utility .c-tableview__target:hover {
      color: #4bb8ac; }

/* ==========================================================================
   contents
   ========================================================================== */
#contents {
  display: table;
  width: 960px;
  margin: 0 auto; }

#contents.contents--top {
  padding-bottom: 0;
  /* cancel '#contents' value */
  width: 100%; }

/* ==========================================================================
   logo
   ========================================================================== */
.c-logo {
  display: inline-block;
  background: url(../img/logo_x2.png) 0 0 no-repeat;
  background-size: 103px 37px;
  text-indent: -9999px;
  overflow: hidden;
  width: 103px;
  height: 37px; }
  .ie8 .c-logo {
    background: url(../img/logo.png) 0 0 no-repeat; }

.c-logo--header {
  width: 103px;
  height: 37px; }

.c-logo--top {
  display: inline-block;
  background: url(../img/logo_header_top.png) 0 0 no-repeat;
  width: 302px;
  height: 110px;
  margin: 0 auto; }

/* ==========================================================================
   button
   ========================================================================== */
.c-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  text-decoration: none;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  border: none; }

.c-btn--primary, .c-btn--order, .c-btn--arw-right, .c-btn--arw-right--small, .c-btn--polytank, .c-btn--hometank, .c-btn--petbottles, .c-btn--pet {
  border-radius: 25px;
  height: 50px;
  line-height: 48px;
  padding: 0 20px;
  text-align: center;
  color: #fff;
  background: #4bb8ac;
  border: 2px solid #4bb8ac;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15); }
  .c-btn--primary:link, .c-btn--order:link, .c-btn--arw-right:link, .c-btn--arw-right--small:link, .c-btn--polytank:link, .c-btn--hometank:link, .c-btn--petbottles:link, .c-btn--pet:link, .c-btn--primary:visited, .c-btn--order:visited, .c-btn--arw-right:visited, .c-btn--arw-right--small:visited, .c-btn--polytank:visited, .c-btn--hometank:visited, .c-btn--petbottles:visited, .c-btn--pet:visited, .c-btn--primary:active, .c-btn--order:active, .c-btn--arw-right:active, .c-btn--arw-right--small:active, .c-btn--polytank:active, .c-btn--hometank:active, .c-btn--petbottles:active, .c-btn--pet:active, .c-btn--primary:hover, .c-btn--order:hover, .c-btn--arw-right:hover, .c-btn--arw-right--small:hover, .c-btn--polytank:hover, .c-btn--hometank:hover, .c-btn--petbottles:hover, .c-btn--pet:hover {
    color: #fff;
    text-decoration: none; }

.c-btn--secondary, .c-btn--faq, .c-btn--arw-right--secondary, .c-btn--arw-right-down, .c-btn--cart, .c-btn--mail {
  border-radius: 25px;
  border: 2px solid #ccc;
  height: 50px;
  line-height: 48px;
  padding: 0 20px;
  text-align: center;
  color: #4d4d4d;
  background: #fff;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15); }
  .c-btn--secondary:link, .c-btn--faq:link, .c-btn--arw-right--secondary:link, .c-btn--arw-right-down:link, .c-btn--cart:link, .c-btn--mail:link, .c-btn--secondary:visited, .c-btn--faq:visited, .c-btn--arw-right--secondary:visited, .c-btn--arw-right-down:visited, .c-btn--cart:visited, .c-btn--mail:visited, .c-btn--secondary:active, .c-btn--faq:active, .c-btn--arw-right--secondary:active, .c-btn--arw-right-down:active, .c-btn--cart:active, .c-btn--mail:active, .c-btn--secondary:hover, .c-btn--faq:hover, .c-btn--arw-right--secondary:hover, .c-btn--arw-right-down:hover, .c-btn--cart:hover, .c-btn--mail:hover {
    color: #4d4d4d;
    text-decoration: none; }

/* よくある質問 */
.c-btn--faq {
  position: relative;
  padding-right: 40px; }
  .c-btn--faq:after {
    content: "";
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    margin: auto 0; }

.c-btn--faq--rev {
  /* アイコンを逆位置にするModifier */ }
  .c-btn--faq--rev:after {
    left: auto;
    /* cancel '.c-btn--faq:after' value */
    right: 6px; }

/* 注文する */
.c-btn--order {
  position: relative;
  padding-right: 35px; }
  .c-btn--order:after {
    content: "";
    position: absolute;
    right: 6px;
    top: 0;
    bottom: 0;
    margin: auto 0; }

/* 右矢印 */
.c-btn--arw-right {
  position: relative;
  padding-right: 35px; }
  .c-btn--arw-right:after {
    content: "";
    position: absolute;
    right: 6px;
    top: 0;
    bottom: 0;
    margin: auto 0; }

.c-btn--arw-right--small {
  position: relative;
  padding: 0 30px 0 20px;
  height: 36px;
  line-height: 34px; }
  .c-btn--arw-right--small:after {
    content: "";
    position: absolute;
    right: 6px;
    top: 0;
    bottom: 0;
    margin: auto 0; }

/* 右矢印 */
.c-btn--arw-right--secondary {
  position: relative;
  padding-right: 30px; }
  .c-btn--arw-right--secondary:after {
    content: "";
    position: absolute;
    right: 6px;
    top: 0;
    bottom: 0;
    margin: auto 0; }

/* 右矢印下向 */
.c-btn--arw-right-down {
  position: relative;
  padding-right: 30px; }
  .c-btn--arw-right-down:after {
    content: "";
    position: absolute;
    right: 6px;
    top: 0;
    bottom: 0;
    margin: auto 0; }

/* カートを見る */
.c-btn--cart {
  position: relative;
  padding-right: 30px; }
  .c-btn--cart:after {
    content: "";
    position: absolute;
    right: 6px;
    top: 0;
    bottom: 0;
    margin: auto 0; }

/* お問い合わせ */
.c-btn--mail {
  position: relative;
  padding-right: 30px; }
  .c-btn--mail:after {
    content: "";
    position: absolute;
    right: 6px;
    top: 0;
    bottom: 0;
    margin: auto 0; }

/* 商品選択灯油 */
.c-btn--polytank {
  position: relative; }
  .c-btn--polytank:before {
    content: "";
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    margin: auto 0; }

/* 商品選択ホームタンク */
.c-btn--hometank {
  position: relative; }
  .c-btn--hometank:before {
    content: "";
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    margin: auto 0; }

/* 商品選択ペットボトル */
.c-btn--petbottles {
  position: relative; }
  .c-btn--petbottles:before {
    content: "";
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    margin: auto 0; }

/* 商品選択ガス機器 */
.c-btn--gas {
  position: relative; }
  .c-btn--gas:before {
    content: "";
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    margin: auto 0; }

/* 商品選択ペット用品 */
.c-btn--pet {
  position: relative; }
  .c-btn--pet:before {
    content: "";
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    margin: auto 0; }

/* width full */
.c-btn--full {
  width: 100%; }

/* width 固定 315px */
.c-btn--fix {
  width: 315px;
  display: block;
  margin: 0 auto; }

/* width 固定 400px */
.c-btn--fix2 {
  width: 400px;
  display: block;
  margin: 0 auto; }

/* height mini 36px */
.c-btn--mini {
  height: 36px;
  line-height: 34px;
  border-radius: 18px; }

/* シャドウ */
.c-btn--shadow {
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15); }

/* フォントサイズ小さめModifier */
.c-btn--font-small {
  font-size: 14px !important;
  font-size: 1.4rem !important; }

/* ==========================================================================
   icon
   ========================================================================== */
.c-icon {
  display: inline-block; }

.c-icon--with-text {
  margin-right: 3px; }

/* よくある質問 */
.c-icon--a {
  background: url(../img/icon_a.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 17.5px;
  height: 17.5px; }

.c-icon--q {
  background: url(../img/icon_q.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 17.5px;
  height: 17.5px; }

/* 見出しなどに使用 */
.c-icon--question, .c-btn--faq:after {
  background: url(../img/icon_question.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 34px;
  height: 34px; }

/* ------------------- */
.c-icon--shop, .p-article__title--shop:after {
  background: url(../img/icon_shop.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 20px;
  height: 18.5px; }

/* ------------------- */
.c-icon--tel {
  background: url(../img/icon_tel.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 20px;
  height: 20px; }

.c-icon--locate {
  background: url(../img/icon_locate.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 20px;
  height: 20px; }

.c-icon--memo {
  background: url(../img/icon_memo.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 15px;
  height: 20px; }

.c-icon--pet, .c-btn--pet:before {
  background: url(../img/icon_pet.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 16px;
  height: 14px; }

.c-icon--petbottles, .c-btn--petbottles:before {
  background: url(../img/icon_petbottles.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 12px;
  height: 16px; }

.c-icon--watertank, .c-btn--watertank:before {
  background: url(../img/icon_watertank.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 15px;
  height: 14px; }

.c-icon--polytank, .c-btn--polytank:before {
  background: url(../img/icon_polytank.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 13px;
  height: 14px; }

.c-icon--hometank, .c-btn--hometank:before {
  background: url(../img/icon_hometank.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 16px;
  height: 18px; }

.c-icon--gas, .c-btn--gas:before {
  background: url(../img/icon_gas.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 12.5px;
  height: 19px; }

.c-icon--food, .c-btn--food:before {
  background: url(../img/icon_food.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 15px;
  height: 14px; }

.c-icon--drink, .c-btn--drink:before {
  background: url(../img/icon_drink.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 13px;
  height: 15px; }

.c-icon--liquor, .c-btn--liquor:before {
  background: url(../img/icon_liquor.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 12px;
  height: 16px; }

.c-icon--babygoods, .c-btn--babygoods:before {
  background: url(../img/icon_babygoods.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 15px;
  height: 15px; }

.c-icon--healthbeauty, .c-btn--healthbeauty:before {
  background: url(../img/icon_healthbeauty.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 15px;
  height: 15px; }

.c-icon--diy, .c-btn--diy:before {
  background: url(../img/icon_diy.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 15px;
  height: 15px; }

.c-icon--outdoorgear, .c-btn--outdoorgear:before {
  background: url(../img/icon_outdoorgear.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 14px;
  height: 15px; }

.c-icon--others, .c-btn--others:before {
  background: none;
  width: 16px;
  height: 16px; }

.c-icon--prohas, .p-section__header--prohas:after {
  background: url(../img/icon_prohas.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 20px;
  height: 16px; }

.c-icon--service, .p-section__header--other-service:after {
  background: url(../img/icon_service.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 20px;
  height: 18px; }

/* ユーティリティー */
.c-icon--notification, .h-nav__item .is-notification:after {
  background: url(../img/icon_notification.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 30px;
  height: 30px; }

/* トップページで使用 */
.c-icon--nav-home-faq {
  background: url(../img/icon_nav_home_faq.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 90px;
  height: 101px; }

.c-icon--nav-home-history {
  background: url(../img/icon_nav_home_history.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 81px;
  height: 102px; }

.c-icon--nav-home-logout {
  background: url(../img/icon_nav_home_logout.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 80px;
  height: 100px; }

.c-icon--nav-home-userinfo {
  background: url(../img/icon_nav_home_userinfo.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 81px;
  height: 102px; }

.c-icon--nav-home-login {
  background: url(../img/icon_nav_home_login.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 126px;
  height: 149px; }

.c-icon--nav-home-order {
  background: url(../img/icon_nav_home_order.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 127px;
  height: 151px; }

.c-icon--nav-home-register {
  background: url(../img/icon_nav_home_register.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 138px;
  height: 151px; }

.c-icon--nav-home-shop {
  background: url(../img/icon_nav_home_shop.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 127px;
  height: 151px; }

/* 主にUIで使用 */
/* ------------------- */
.c-icon--ui-add, .c-tableview__target--add:after {
  background: url(../img/icon_ui_add.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 20px;
  height: 20px; }

/* ------------------- */
/* ------------------- */
.c-icon--add-image {
  display: block;
  width: 35px;
  height: 35px;
  border-radius: 5px;
  border: 1px dashed #d1d1d1; }

/* ------------------- */
.c-icon--ui-arrow-right-primary, .c-btn--arw-right:after, .c-link--arrow--primary:after {
  background: url(../img/icon_ui_arrow_right_primary.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 30px;
  height: 30px; }

.c-icon--ui-arrow-right-secondary, .c-btn--arw-right--secondary:after, .c-tableview__target--arrow:after, .c-link--arrow--secondary:after {
  background: url(../img/icon_ui_arrow_right_secondary.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 24px;
  height: 24px; }

.c-icon--ui-arrow-right--small, .c-btn--arw-right--small:after {
  background: url(../img/icon_ui_arrow_right_small.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 26px;
  height: 26px; }

/* ------------------- */
.c-icon--ui-arrow-right-down, .c-btn--arw-right-down:after, .c-tableview__target--arrow-down:after {
  background: url(../img/icon_ui_arrow_right_down.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 25px;
  height: 25px; }

/* ------------------- */
/* ------------------- */
.c-icon--ui-cart, .c-btn--cart:after {
  background: url(../img/icon_ui_cart.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 25px;
  height: 25px; }

/* ------------------- */
/* ------------------- */
.c-icon--ui-edit, .c-tableview__target--edit:after {
  background: url(../img/icon_ui_edit.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 21px;
  height: 21px; }

/* ------------------- */
/* ------------------- */
.c-icon--ui-mail, .c-btn--mail:after {
  background: url(../img/icon_ui_mail.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 25px;
  height: 25px; }

/* ------------------- */
.c-icon--ui-order, .c-btn--order:after {
  background: url(../img/icon_ui_order.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 34px;
  height: 34px; }

/* ==========================================================================
   Dialog
   ========================================================================== */
.c-dialog {
  margin: 0;
  padding: 11px 16px;
  border-radius: 3px;
  border: 4px solid #ddd;
  color: #eee; }

/* alert */
.c-dialog--alert {
  color: #fe8b25;
  border-color: #faca78;
  background: #fff; }

/* ==========================================================================
   Grid
   ========================================================================== */
.c-grid {
  *zoom: 1;
  /* 子要素でfloatを使用するのでClearfix */
  position: relative; }
  .c-grid:before, .c-grid:after {
    display: table;
    content: "";
    line-height: 0; }
  .c-grid:after {
    clear: both; }

.c-grid--full {
  margin-left: -5px;
  /* 余白を指定 */
  margin-right: -5px;
  /* 余白を指定 */ }

.c-grid__item {
  float: left;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  .c-grid__item.has-gutter {
    padding-right: 5px;
    /* 余白を指定 */
    padding-left: 5px;
    /* 余白を指定 */ }

/* 12カラム用 */
.c-grid__item--1 {
  width: 8.33333%; }

.c-grid__item--2 {
  width: 16.66667%; }

.c-grid__item--3 {
  width: 25%; }

.c-grid__item--4 {
  width: 33.33333%; }

.c-grid__item--5 {
  width: 41.66667%; }

.c-grid__item--6 {
  width: 50%; }

.c-grid__item--7 {
  width: 58.33333%; }

.c-grid__item--8 {
  width: 66.66667%; }

.c-grid__item--9 {
  width: 75%; }

.c-grid__item--10 {
  width: 83.33333%; }

.c-grid__item--11 {
  width: 91.66667%; }

.c-grid__item--12 {
  width: 100%; }

/* 10カラム用 */
.c-grid10__item--1 {
  width: 10%; }

.c-grid10__item--2 {
  width: 20%; }

.c-grid10__item--3 {
  width: 30%; }

.c-grid10__item--4 {
  width: 40%; }

.c-grid10__item--5 {
  width: 50%; }

.c-grid10__item--6 {
  width: 60%; }

.c-grid10__item--7 {
  width: 70%; }

.c-grid10__item--8 {
  width: 80%; }

.c-grid10__item--9 {
  width: 90%; }

.c-grid10__item--10 {
  width: 100%; }

/* ==========================================================================
   media
   ========================================================================== */
/* floatで構成 */
.c-media--float {
  *zoom: 1;
  /* 子要素でfloatを使用するのでClearfixする */ }
  .c-media--float:before, .c-media--float:after {
    display: table;
    content: "";
    line-height: 0; }
  .c-media--float:after {
    clear: both; }

.c-media--float__image {
  float: left;
  margin-right: 10px;
  /* 任意の値 */
  /* marginはhtml上でuttilityクラスを使用して都度調整する */ }

.c-media--float__image > img {
  display: block; }

.c-media--float__image--rev {
  /* Reverse */
  float: right;
  margin-right: 0;
  margin-left: 10px;
  /* marginはProjectのElement指定で解決する */ }

.c-media--float__body {
  overflow: hidden;
  /* 画像下にテキストが回り込むのを防ぐ */ }

.c-media--float__body--middle {
  /* テキストを画像の上下中央揃え */
  vertical-align: middle; }

/* display: tableで構成 */
.c-media {
  display: table; }

.c-media__image {
  display: table-cell;
  padding-right: 10px;
  /* 任意の値 table-cellを使用するので余白をpaddingで調整 */
  /* paddingはProjectのElement指定で解決する */ }

.c-media__image--middle {
  vertical-align: middle;
  /* 画像を上下中央揃え */ }

/* 使用する画像が.c-iconを使用していた場合 */
.c-media__image--icon {
  padding-right: 5px;
  /* cancel '.c-media__image' */ }

.c-media__image > img {
  display: block; }

.c-media__body {
  display: table-cell;
  vertical-align: top;
  overflow: hidden;
  /* 画像下にテキストが回り込むのを防ぐ */ }

.c-media__body--middle {
  vertical-align: middle;
  /* テキストを画像の上下中央揃え */ }

/* ==========================================================================
   tableview
   ========================================================================== */
/*
ブロック型テーブルリスト
リンクがある場合は子要素の<a>に__targetを指定する
*/
.c-tableview {
  overflow: hidden;
  border-top: 2px solid #bfbfbf;
  border-bottom: 2px solid #bfbfbf;
  border-radius: 5px; }

/* 行の背景色を交互にするModirier */
.c-tableview--stripe .c-tableview__item:nth-child(odd) {
  background: #fff; }
.c-tableview--stripe .c-tableview__item:nth-child(even) {
  background: #f3f3f3; }

.c-tableview__item {
  background: #fff;
  padding: 10px 12px;
  /* ベースとなる余白指定 */
  border-left: 2px solid #bfbfbf;
  border-right: 2px solid #bfbfbf;
  *zoom: 1; }
  .c-tableview__item:before, .c-tableview__item:after {
    display: table;
    content: "";
    line-height: 0; }
  .c-tableview__item:after {
    clear: both; }

/* アイコン付きリンクリスト */
.c-tableview__target {
  display: block;
  margin: -10px -10px;
  /* paddingの相殺 */
  padding: 10px 10px;
  /* 余白設定 */
  text-decoration: none;
  position: relative;
  padding-right: 30px;
  /* アイコン分の余白を指定 */
  overflow: hidden; }
  .c-tableview__target:link, .c-tableview__target:visited, .c-tableview__target:active, .c-tableview__target:hover {
    color: #333;
    text-decoration: none; }
  .c-tableview__target:after {
    content: "";
    position: absolute;
    top: 0;
    /* topとbottom、対になるプロパティに値を持たせて、領域を作る */
    bottom: 0;
    /* topとbottom、対になるプロパティに値を持たせて、領域を作る */
    right: 10px;
    /* iconの位置調整 */
    margin: auto;
    /* 垂直中央配置 */ }

.c-tableview__target--add:link, .c-tableview__target--add:visited, .c-tableview__target--add:active, .c-tableview__target--add:hover {
  color: #4bb8ac;
  /* cancel '.c-tableview__item' value */ }

.c-tableview__target--repeat {
  padding: 15px 35px;
  /* cancel '.c-tableview__item' value */ }
  .c-tableview__target--repeat:link, .c-tableview__target--repeat:visited, .c-tableview__target--repeat:active, .c-tableview__target--repeat:hover {
    color: #4bb8ac;
    /* cancel '.c-tableview__item' value */ }

.c-tableview--no-border {
  border: none; }
  .c-tableview--no-border > .c-tableview__item {
    border: none; }

/* ==========================================================================
   inline-list
   ========================================================================== */
.c-inline-list__item {
  display: inline;
  margin-right: 30px; }

/* ==========================================================================
   block-list
   ========================================================================== */
.c-block-list__item {
  display: block;
  line-height: 1.2; }

/* ==========================================================================
   separator
   ========================================================================== */
.c-separater {
  display: inline-block;
  height: 10px;
  width: 1px;
  background: #fff;
  margin: 0 15px;
  text-indent: -9999px;
  overflow: hidden; }

.c-separater--hyphen {
  display: block;
  /* cancel '.c-separoter' value */
  height: 0;
  /* cancel '.c-separoter' value */
  width: 10px;
  /* cancel '.c-separoter' value */
  background: transparent;
  /* cancel '.c-separoter' value */
  margin: auto;
  /* cancel '.c-separoter' value */
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  margin-left: -5px;
  vertical-align: middle;
  border-bottom: 1px solid #4d4d4d;
  text-indent: -9999px;
  overflow: hidden; }

/* ==========================================================================
   hr
   ========================================================================== */
.c-hr {
  height: 0;
  font-size: 0;
  background: none;
  border: 0;
  border-bottom: 2px solid #ccc;
  display: block; }

.c-hr--dashed {
  border-style: dashed; }

/* ==========================================================================
   overlay
   ========================================================================== */
.c-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* 最後がアルファ値 */
  filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#B4000000, endcolorstr=#B4000000, gradienttype=0);
  /*for IE #__000000  __に00-FFでアルファ値を指定 */
  z-index: 100; }

/* ==========================================================================
   scroll-frame
   ========================================================================== */
.c-scroll-frame {
  border: 1px solid #4bb8ac; }

.c-scroll-frame__inner {
  overflow-y: scroll;
  padding: 15px 10px 15px 15px; }

.c-scroll-frame--term > .c-scroll-frame__inner {
  height: 20em;
  background: #fff; }

.c-scroll-frame--about-phone > .c-scroll-frame__inner {
  height: 60px;
  height: 6rem; }

/* ==========================================================================
   link
   ========================================================================== */
.c-link--td-n {
  text-decoration: none; }
  .c-link--td-n:visited, .c-link--td-n:active, .c-link--td-n:link, .c-link--td-n:hover {
    text-decoration: none; }

.c-link--arrow--primary {
  display: inline-block;
  position: relative;
  padding: 5px 30px 5px 0; }
  .c-link--arrow--primary:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto; }

.c-link--arrow--secondary {
  display: inline-block;
  position: relative;
  padding: 5px 30px 5px 0; }
  .c-link--arrow--secondary:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto; }

/* ==========================================================================
   p-artilce
   ========================================================================== */
.p-article {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: table-cell;
  width: 670px;
  padding: 20px;
  text-align: left;
  position: relative;
  z-index: 100; }
  .p-article__title {
    position: relative; }

/* 1カラム用modifier */
.p-article--one-column {
  display: block;
  width: 670px;
  margin: 0 auto; }

/* トップ用modifier */
.p-article--top {
  width: 100%;
  padding: 0;
  display: block; }

.p-article__title--shop {
  padding: 20px 20px 20px 50px; }
  .p-article__title--shop:after {
    content: " ";
    display: block;
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    margin: auto; }

/* ==========================================================================
   section
   ========================================================================== */
.p-section {
  padding: 15px 0;
  *zoom: 1;
  /* 子要素にfloatを使用することがあるので、clearfixを指定 */ }
  .p-section:before, .p-section:after {
    display: table;
    content: "";
    line-height: 0; }
  .p-section:after {
    clear: both; }
  .p-section--odd {
    background: #fafafa; }
  .p-section--even {
    background: #ffffff; }
  .p-section__title {
    text-align: left;
    margin-bottom: 4px; }
  .p-section__strong {
    color: #ea412a; }
  .p-section__lead {
    text-align: left;
    line-height: 1.6; }
  .p-section>.section__body {
    word-break: break-all;
    word-wrap: break-word; }

/* トップサービス用 */
.p-section--service {
  width: 65%;
  margin: 0 auto; }
  .p-section--service > .p-section__header {
    text-align: left;
    color: #d19b4f;
    position: relative;
    margin-bottom: 20px;
    z-index: 5; }
    .p-section--service > .p-section__header > .p-section__title {
      display: inline-block;
      background: #fff5dc;
      position: relative;
      z-index: 10;
      padding-right: 10px;
      padding-left: 25px; }
    .p-section--service > .p-section__header:before {
      content: "";
      position: absolute;
      border-top: 2px dashed #eacea4;
      width: 100%;
      height: 0;
      z-index: 0;
      top: -3px;
      bottom: 0;
      left: 0;
      margin: auto; }
    .p-section--service > .p-section__header:after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      background-color: #fff5dc;
      z-index: 10; }
  .p-section--service > .p-section__body {
    padding: 0 35px; }

.p-section__body--other-service img {
  width: 100%;
  height: auto; }

/* section 1カラム用Modifier */
.p-section--one-column {
  width: 60%;
  margin: 0 auto; }

/* ==========================================================================
   block-name
   ========================================================================== */
/* ==========================================================================
   gallery
   ========================================================================== */
/* homeのヘッダーメイン画像 */
.p-home-main {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 5; }

/* homeのプロハスバックナンバー */
.p-gallery--service {
  padding: 0 40px; }

/* 余白の設定 */
.p-gallery--service.c-grid--full {
  margin-left: -30px;
  /* cancel '.c-grid--full' .value */
  margin-right: -30px;
  /* cancel '.c-grid--full' .value */ }

.p-gallery--service > .c-grid__item {
  float: left;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 25px;
  width: 84px; }
  .p-gallery--service > .c-grid__item.has-gutter {
    margin-right: 30px;
    margin-left: 30px; }
  .p-gallery--service > .c-grid__item > a {
    text-align: left; }
    .p-gallery--service > .c-grid__item > a:link, .p-gallery--service > .c-grid__item > a:visited, .p-gallery--service > .c-grid__item > a:active, .p-gallery--service > .c-grid__item > a:hover {
      color: #666;
      text-decoration: none; }

.p-gallery--service__image {
  position: relative;
  z-index: 0;
  display: block; }
  .p-gallery--service__image > img {
    width: 100%;
    height: auto;
    border: 1px solid #d19b4f;
    box-shadow: 1px 5px 0 #d19b4f; }

.p-gallery--service__body {
  margin-top: 8px;
  display: block;
  position: relative;
  z-index: 5;
  line-height: 1.6; }

.p-gallery--service__border {
  border-top: 2px solid #d19b4f;
  border-bottom: 5px solid #fff5dc;
  height: 0;
  width: 9999px;
  position: absolute;
  bottom: -3px;
  margin-left: -200em;
  margin-right: -200em;
  z-index: 0; }

/* ==========================================================================
   block-name
   ========================================================================== */
/* ==========================================================================
   search
   ========================================================================== */
.p-search__header {
  background: #dfdfdf;
  padding: 6px; }

.p-search__item {
  text-align: left;
  line-height: 1.6;
  padding: 12px 10px;
  /* cancel '.c-tableview__item' value */ }
  .p-search__item > .tableview__target {
    padding: 12px 10px;
    /* cancel '.c-tableview__target' value */
    margin: -12px -10px;
    /* cancel '.c-tableview__target' value */ }

/* ==========================================================================
   p-shop-main
   ========================================================================== */
.p-shop-main {
  padding: 20px 0;
  background: #c2e6ff;
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: 0 0; }
  .p-shop-main__inner {
    background: #fff;
    padding: 20px 0 20px;
    border-radius: 5px;
    width: 670px;
    margin: 0 auto;
    position: relative;
    z-index: 5; }
  .p-shop-main__header {
    margin-bottom: 12px; }
  .p-shop-main__title {
    text-align: center; }
  .p-shop-main__body {
    padding: 5px 24px; }
  .p-shop-main__image img {
    width: 100%;
    height: auto; }
    
.p-shop-main.noimage{
  background-size:auto!important;
  background: #e1f3ff url(../img/bg_header_top.jpg) 0 0 repeat-x;
}

.p-shop-main .c-tableview {
  border: none;
  /* cancel '.c-tableview' value */ }

.p-shop-main .c-tableview__item {
  border: none;
  /* cancel '.c-tableview__item' value */
  padding: 15px 10px;
  /* cancel '.c-tableview__item' value */
  text-align: left;
  line-height: 1.4; }

.p-shop__link {
  text-align: center; }
  .p-shop__link a:visited, .p-shop__link a:link, .p-shop__link a:active, .p-shop__link a:hover {
    text-decoration: none; }
  .p-shop__link > .c-separater {
    background: #4bb8ac; }

/* ショップ登録用Modfier */
.p-shop-main--register {
  padding: 0;
  background: transparent; }
  .p-shop-main--register > .p-shop-main__inner {
    width: 100%; }

/* ==========================================================================
   p-shop
   ========================================================================== */
.p-shop {
  /* ブロック型テーブルリスト */
  line-height: 1.4; }

.p-shop__icon-image {
  padding-right: 5px;
  /* cancel '.c-media__image' value */ }

.p-shopinfo__table {
  /* ショップ画像下以外(別セクション内で使用する場合)い入れるショップの情報テーブル用。地図を見るなどのボタンが右に配置される場合に適用する */ }
  .p-shopinfo__table > .c-tableview__item {
    line-height: 1.4;
    /* cancel '.c-tableview__item' value */ }

/* ==========================================================================
   p-product
   ========================================================================== */
/* product一覧の編集可能Modirier */
.c-product--add {
  border-bottom: 1px dashed #d1d1d1;
  /* cancel '.c-tableview' value */ }
  .c-product--add .c-tableview__item:last-child {
    border-left: 1px dashed #d1d1d1;
    /* cancel '.c-tableview__item' value */
    border-right: 1px dashed #d1d1d1;
    /* cancel '.c-tableview__item' value */ }

/* product一覧のリピート注文Modirier */
.c-product--repeat .c-tableview__item {
  padding: 10px;
  /* cancel '.c-tableview__item' value */ }

/* メインコンテンツ部分のproduct一覧Modirier */
.p-product--main > .c-media__image {
  /* cancel '.c-media__image' value */
  width: 126px;
  text-align: center; }
  .p-product--main > .c-media__image > img {
    margin: 0 auto; }
  .p-product--main > .c-media__image .c-media__caption {
    display: block;
    margin-top: 10px; }
.p-product--main > .c-media__body {
  /* cancel '.c-media__body' value */
  padding: 5px 0; }

.p-product--main .c-tableview {
  /* cancel '.c-tableview' value */
  border-width: 2px; }

.p-product--main .c-tableview__item {
  /* cancel '.c-tableview__item' value */
  border-width: 2px; }

.p-product--main .c-tableview__target {
  /* cancel '.c-tableview__target' value */
  padding: 10px 30px 10px 20px; }

/* ==========================================================================
   p-user
   ========================================================================== */
.p-user__item {
  text-align: left;
  line-height: 1.6;
  padding: 12px 10px;
  /* cancel '.c-tableview__item' value */ }
  .p-user__item > .tableview__target {
    padding: 12px 10px;
    /* cancel '.c-tableview__target' value */
    margin: -12px -10px;
    /* cancel '.c-tableview__target' value */ }

/* ==========================================================================
   p-faq
   ========================================================================== */
.p-faq__item {
  text-align: left;
  line-height: 1.6;
  padding: 12px 10px;
  /* cancel '.c-tableview__item' value */ }
  .p-faq__item > .tableview__target {
    padding: 12px 10px;
    /* cancel '.c-tableview__target' value */
    margin: -12px -10px;
    /* cancel '.c-tableview__target' value */ }

.p-faq--stripe > .p-faq__item:nth-child(odd) {
  background: #fff; }
.p-faq--stripe > .p-faq__item:nth-child(even) {
  background: #faf5f5; }

/* ==========================================================================
   p-area
   ========================================================================== */
.p-area__item {
  text-align: left;
  line-height: 1.6;
  padding: 12px 10px;
  /* cancel '.c-tableview__item' value */ }
  .p-area__item > .tableview__target {
    padding: 12px 10px;
    /* cancel '.c-tableview__target' value */
    margin: -12px -10px;
    /* cancel '.c-tableview__target' value */ }

.p-area--stripe > .p-area__item:nth-child(odd) {
  background: #fff; }
.p-area--stripe > .p-area__item:nth-child(even) {
  background: #faf5f5; }

/* ==========================================================================
   p-price
   ========================================================================== */
.p-price {
  color: #ea412a;
  text-align: right; }

.p-price--cart {
  color: #4d4d4d;
  /* cancel '.p-price' value */
  text-align: center;
  /* cancel '.p-price' value */ }
  .p-price--cart strong {
    color: #ea412a; }

/* ==========================================================================
   p-step-arrow
   ========================================================================== */
.p-step-arrow {
  width: 100%;
  overflow: hidden; }
  .p-step-arrow__item {
    line-height: 1.2;
    background: #b3b3b3;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    position: relative; }
    .fontLarge .p-step-arrow__item {
      font-size: 1.4rem !important;
      font-size: 14px !important; }
    .p-step-arrow__item:before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: -5px auto;
      right: -25px;
      width: 0;
      height: 0;
      border: 25px solid #b3b3b3;
      border-right-color: transparent;
      border-left: 15px solid #fff;
      z-index: 5; }
    .p-step-arrow__item:after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: -5px auto;
      right: -22px;
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-left: 15px solid #b3b3b3;
      z-index: 5; }
    .p-step-arrow__item:last-child:before {
      border: 25px solid #fafafa;
      border-right-color: transparent;
      border-left: 15px solid #fff; }
    .p-step-arrow__item.is-active {
      background: #fe8b25; }
      .p-step-arrow__item.is-active:after {
        border-left-color: #fe8b25; }
      .p-step-arrow__item.is-active > span:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: -5px auto;
        left: -15px;
        width: 0;
        height: 0;
        border: 25px solid #fe8b25;
        border-left: 15px solid transparent;
        border-right-color: transparent;
        z-index: 10; }
    .p-step-arrow__item:last-child.is-active > span:after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: -5px auto;
      left: -15px;
      width: 0;
      height: 0;
      border: 25px solid #fe8b25;
      border-left: 15px solid transparent;
      border-right-color: transparent;
      z-index: 10; }
    .p-step-arrow__item > span {
      display: block;
      margin-left: -1em; }

/* ==========================================================================
   p-entry
   ========================================================================== */
.p-entry {
  text-align: left;
  line-height: 1.6;
  padding: 0 40px;
  /* イメージ用エフェクト */
  /* 強調 */
  /* フォント色指定 */
  /* フォントサイズ指定 */
  /* テキスト揃え */ }
  .p-entry img {
    box-shadow: 2px 4px 0 #bfbfbf;
    display: block;
    margin: 15px auto; }
  .p-entry em {
    font-style: normal; }
  .p-entry .black {
    color: #4d4d4d; }
  .p-entry .blue {
    color: #37a5de; }
  .p-entry .orange {
    color: #fa9160; }
  .p-entry .red {
    color: #f16a6a; }
  .p-entry .text-left {
    text-align: left; }
  .p-entry .text-right {
    text-align: right; }
  .p-entry .text-center {
    text-align: center; }
  .p-entry hr {
    height: 0;
    font-size: 0;
    background: none;
    border: 0;
    border-bottom: 2px solid #ccc;
    display: block;
    margin: 15px auto; }

/* ==========================================================================
   p-service
   ========================================================================== */
.p-service {
  text-align: center;
  background: #fff5dc; }

.p-service__header {
  background: url(../img/bg_service.png) 50% 0 no-repeat, url(../img/bg_service_border.png) 0 0 repeat-x;
  padding-top: 30px; }

.p-service__body {
  width: 960px;
  margin: 0 auto; }

.p-service__lead {
  margin: 20px auto 5px; }

/* ==========================================================================
   p-utility-link
   ========================================================================== */
.p-utility-link > a:link, .p-utility-link > a:visited, .p-utility-link > a:active, .p-utility-link > a:hover {
  text-decoration: none; }
.p-utility-link > .c-separater {
  background: #4bb8ac;
  /* cancle '.c-separater' value */ }

/* ==========================================================================
   font-color
   ========================================================================== */
.p-font-color--primary {
  color: #4bb8ac; }

.p-font-color--default {
  color: #4d4d4d; }

.p-font-color--notice {
  color: #ea412a; }

/* ==========================================================================
   font-size
   ========================================================================== */
/* ==========================================================================
   bg
   ========================================================================== */
.p-bg--white {
  background: #fff; }

.p-bg--gray {
  background: #fafafa; }

/* ==========================================================================
   align
   ========================================================================== */
.u-al {
  text-align: left; }

.u-ar {
  text-align: right; }

.u-ac {
  text-align: center; }

/* ==========================================================================
   clearfix
   ========================================================================== */
.u-clf {
  *zoom: 1; }
  .u-clf:before, .u-clf:after {
    display: table;
    content: "";
    line-height: 0; }
  .u-clf:after {
    clear: both; }

/* ==========================================================================
   Margin and Paddings
   ========================================================================== */
.u-mt00 {
  margin-top: 0px; }

.u-mt05 {
  margin-top: 5px; }

.u-mt10 {
  margin-top: 10px; }

.u-mt15 {
  margin-top: 15px; }

.u-mt18 {
  margin-top: 18px; }

.u-mt20 {
  margin-top: 20px; }

.u-mt25 {
  margin-top: 25px; }

.u-mt30 {
  margin-top: 30px; }

.u-mt35 {
  margin-top: 35px; }

.u-mt40 {
  margin-top: 40px; }

.u-mt50 {
  margin-top: 50px; }

.u-mr00 {
  margin-right: 0px; }

.u-mr05 {
  margin-right: 5px; }

.u-mr10 {
  margin-right: 10px; }

.u-mr15 {
  margin-right: 15px; }

.u-mr20 {
  margin-right: 20px; }

.u-mr25 {
  margin-right: 25px; }

.u-mr30 {
  margin-right: 30px; }

.u-mr35 {
  margin-right: 35px; }

.u-mr40 {
  margin-right: 40px; }

.u-mr50 {
  margin-right: 50px; }

.u-mb00 {
  margin-bottom: 0px; }

.u-mb05 {
  margin-bottom: 5px; }

.u-mb10 {
  margin-bottom: 10px; }

.u-mb15 {
  margin-bottom: 15px; }

.u-mb20 {
  margin-bottom: 20px; }

.u-mb25 {
  margin-bottom: 25px; }

.u-mb30 {
  margin-bottom: 30px; }

.u-mb35 {
  margin-bottom: 35px; }

.u-mb40 {
  margin-bottom: 40px; }

.u-mb50 {
  margin-bottom: 50px; }

.u-ml00 {
  margin-left: 0px; }

.u-ml05 {
  margin-left: 5px; }

.u-ml10 {
  margin-left: 10px; }

.u-ml15 {
  margin-left: 15px; }

.u-ml20 {
  margin-left: 20px; }

.u-ml25 {
  margin-left: 25px; }

.u-ml30 {
  margin-left: 30px; }

.u-ml35 {
  margin-left: 35px; }

.u-ml40 {
  margin-left: 40px; }

.u-ml50 {
  margin-left: 50px; }

/*****  padding  *****/
.u-pt00 {
  padding-top: 0px; }

.u-pt05 {
  padding-top: 5px; }

.u-pt10 {
  padding-top: 10px; }

.u-pt15 {
  padding-top: 15px; }

.u-pt20 {
  padding-top: 20px; }

.u-pt25 {
  padding-top: 25px; }

.u-pt30 {
  padding-top: 30px; }

.u-pt35 {
  padding-top: 35px; }

.u-pt40 {
  padding-top: 40px; }

.u-pt50 {
  padding-top: 50px; }

.u-pr00 {
  padding-right: 0px; }

.u-pr05 {
  padding-right: 5px; }

.u-pr10 {
  padding-right: 10px; }

.u-pr15 {
  padding-right: 15px; }

.u-pr20 {
  padding-right: 20px; }

.u-pr25 {
  padding-right: 25px; }

.u-pr30 {
  padding-right: 30px; }

.u-pr35 {
  padding-right: 35px; }

.u-pr40 {
  padding-right: 40px; }

.u-pr50 {
  padding-right: 50px; }

.u-pb00 {
  padding-bottom: 0px; }

.u-pb05 {
  padding-bottom: 5px; }

.u-pb10 {
  padding-bottom: 10px; }

.u-pb15 {
  padding-bottom: 15px; }

.u-pb20 {
  padding-bottom: 20px; }

.u-pb25 {
  padding-bottom: 25px; }

.u-pb30 {
  padding-bottom: 30px; }

.u-pb35 {
  padding-bottom: 35px; }

.u-pb40 {
  padding-bottom: 40px; }

.u-pb50 {
  padding-bottom: 50px; }

.u-pl00 {
  padding-left: 0px; }

.u-pl05 {
  padding-left: 5px; }

.u-pl10 {
  padding-left: 10px; }

.u-pl15 {
  padding-left: 15px; }

.u-pl20 {
  padding-left: 20px; }

.u-pl25 {
  padding-left: 25px; }

.u-pl30 {
  padding-left: 30px; }

.u-pl35 {
  padding-left: 35px; }

.u-pl40 {
  padding-left: 40px; }

.u-pl50 {
  padding-left: 50px; }

/* ==========================================================================
   postion
   ========================================================================== */
.u-pos--a {
  position: absolute; }

.u-pos--r {
  position: relative; }

.u-pos--s {
  position: static; }

.u-pos--f {
  position: fixed; }

.u-pos--center {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto; }

.u-pos--middle {
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto; }

/* ==========================================================================
   display
   ========================================================================== */
.u-inline {
  display: inline; }

.u-block {
  display: block; }

.u-inline-block {
  display: inline-block; }

/* ==========================================================================
   float
   ========================================================================== */
.u-fl--l {
  float: left; }

.u-fl--r {
  float: right; }

.u-clr {
  clear: both; }

/* ==========================================================================
   size
   ========================================================================== */
.u-size--full {
  width: 100%; }

/* ==========================================================================
   text
   ========================================================================== */
.u-fw-b {
  font-weight: bold; }

.u-fz05 {
  font-size: 5px;
  font-size: 0.5rem; }

.u-fz06, .u-fzXXS {
  font-size: 6px;
  font-size: 0.6rem; }

.u-fz08, .u-fzXS {
  font-size: 8px;
  font-size: 0.8rem; }

.u-fz09 {
  font-size: 9px;
  font-size: 0.9rem; }

.u-fz10, .p-font-size--s, .c-btn > small, .u-fzS {
  font-size: 10px;
  font-size: 1.0rem; }

.u-fz11, .f-nav__item {
  font-size: 11px;
  font-size: 1.1rem; }

.u-fz12, .p-fontsize-change, .p-fontsize-change__nav--small, .p-search__item, .p-shop-main .c-tableview__item, .p-faq__item, .p-price, .p-entry .font-size-s, .p-font-size--m, .u-fzM {
  font-size: 12px;
  font-size: 1.2rem; }

.u-fz13, .fieldset__note, .form__msg, .p-price strong, .p-price--cart {
  font-size: 13px;
  font-size: 1.3rem; }

.u-fz14, .c-btn--arw-right--small, .c-dialog, .p-article, .p-article__title, .p-section__lead, .p-search__header, .p-product, .p-user__item, .p-step-arrow__item, .p-entry, .p-entry em, .p-entry .font-size-m, .p-utility-link, .p-font-size--l, .u-fzL {
  font-size: 14px;
  font-size: 1.4rem; }

.u-fz15, .fieldset__title, .fieldset__confirm {
  font-size: 15px;
  font-size: 1.5rem; }

.u-fz16, .p-section__title, .p-section--service > .p-section__header, .p-product--main, .p-entry .font-size-l, .p-font-size--xl, .u-fzXL {
  font-size: 16px;
  font-size: 1.6rem; }

.u-fz17, .p-fontsize-change__nav--large, .p-fontsize-change--header {
  font-size: 17px;
  font-size: 1.7rem; }

.u-fz18, .customSelect, .fieldset__title--username, .c-btn--primary, .c-btn--order, .c-btn--arw-right, .c-btn--arw-right--small, .c-btn--polytank, .c-btn--hometank, .c-btn--petbottles, .c-btn--pet, .c-btn--secondary, .c-btn--faq, .c-btn--arw-right--secondary, .c-btn--arw-right-down, .c-btn--cart, .c-btn--mail, .p-price--cart strong, .p-price--total strong, .p-entry .font-size-xl, .u-fzXXL {
  font-size: 18px;
  font-size: 1.8rem; }

.u-fz19, .p-shop-main__title {
  font-size: 19px;
  font-size: 1.9rem; }

.u-fz20, input[type="text"], input[type="tel"], input[type="zip"], input[type="mail"], input[type="password"] {
  font-size: 20px;
  font-size: 2.0rem; }

.u-fz21 {
  font-size: 21px;
  font-size: 2.1rem; }

.u-fz22 {
  font-size: 22px;
  font-size: 2.2rem; }

.u-fz24 {
  font-size: 24px;
  font-size: 2.4rem; }

.u-fz27 {
  font-size: 27px;
  font-size: 2.7rem; }

.u-fz36 {
  font-size: 36px;
  font-size: 3.6rem; }

.u-fz40 {
  font-size: 40px;
  font-size: 4.0rem; }

.u-fz48 {
  font-size: 48px;
  font-size: 4.8rem; }

.u-fz50 {
  font-size: 50px;
  font-size: 5.0rem; }

.u-fz72 {
  font-size: 72px;
  font-size: 7.2rem; }

.u-fz85 {
  font-size: 85px;
  font-size: 8.5rem; }

.u-lh--1 {
  line-height: 1; }

.u-lh--s {
  line-height: 1.2; }

.u-lh--m {
  line-height: 1.4; }

.u-lh--l {
  line-height: 1.6; }

.u-lh--xl {
  line-height: 1.8; }

/* ==========================================================================
   box-shadow
   ========================================================================== */
.c-box-shadow, .c-product--add, .p-user--edit {
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15); }

/* ==========================================================================
   debug_styles
   ========================================================================== */
.d-comp {
  background: gray !important; }

.d-drop {
  background: darkgray !important; }

.d-rsv {
  background: lightblue !important; }

.d-act {
  background: orange !important; }

.d-em {
  color: red !important; }