@charset "utf-8";

html {
  font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size: 12.5pt;
  color: #1b2350;
  scroll-behavior: smooth;
}
body {
  background-image: url("https://marco-pet.com/amarico/images/pattern-amarico-check-w80.jpg");
  background-repeat: repeat;
  position: relative;
}
h1, h2, h3, h4 {
  font-weight: bold;
}
p {
  line-height: 2em;
}
a:hover img {
  opacity: 0.8;
}
.clear {
  clear: both;
}
.pc-no {
  display: none;
}
.sp-no {
  display: auto;
}





/* リスト・flex
------------------------------------------ */
.li-flex {
  display: flex;
}
.li-flex img {
width: 100%;
}


/* 横幅設定
------------------------------------------ */
.w-100 {
  width: 100%;
}
.w-98 {
  width: 98%;
}
.w-97 {
  width: 97%;
}

.w-90-pc {
  width: 90%;
}
.w-80-pc {
  width: 80%;
}
.w-70-pc {
  width: 70%;
}
.w-60-pc {
  width: 60%;
}
.w-55-pc {
  width: 55%;
}
.w-45-pc {
  width: 45%;
}
.w-20 {
  width: 20%;
}


/* 画像関連
------------------------------------------ */
.img-blk {
  display: block;
}
.img-il-blk {
  display: inline-block;
}
.img-w100 {
  width: 100%;
}

.img-va-bottom {
  vertical-align: bottom;
}
.img-va-middle {
  vertical-align: middle;
}
.img-va-top {
  vertical-align: top;
}


/* フロート
------------------------------------------ */
.float-l {
  float: left;
}
.float-r {
  float: right;
}


/* 行間
------------------------------------------ */
.line-h120 {
  line-height: 120%;
}
.line-h130 {
  line-height: 130%;
}
.line-h140 {
  line-height: 140%;
}
.line-h150 {
  line-height: 150%;
}
.line-h200 {
  line-height: 200%;
}


/* 余白調整
------------------------------------------ */
.mar-t0 {
  margin-top: 0;
}
.mar-t5 {
  margin-top: 5px;
}
.mar-t10 {
  margin-top: 10px;
}
.mar-t15 {
  margin-top: 15px;
}
.mar-t20 {
  margin-top: 20px;
}
.mar-t25 {
  margin-top: 25px;
}
.mar-t30 {
  margin-top: 30px;
}
.mar-t40 {
  margin-top: 40px;
}
.mar-t50 {
  margin-top: 50px;
}
.mar-t60 {
  margin-top: 60px;
}
.mar-t70 {
  margin-top: 70px;
}
.mar-t100 {
  margin-top: 100px;
}

.mar-b0 {
  margin-bottom: 0;
}
.mar-b5 {
  margin-bottom: 5px;
}
.mar-b10 {
  margin-bottom: 10px;
}
.mar-b15 {
  margin-bottom: 15px;
}
.mar-b20 {
  margin-bottom: 20px;
}
.mar-b25 {
  margin-bottom: 25px;
}
.mar-b30 {
  margin-bottom: 30px;
}
.mar-b35 {
  margin-bottom: 35px;
}
.mar-b40 {
  margin-bottom: 40px;
}
.mar-b50 {
  margin-bottom: 50px;
}
.mar-b80 {
  margin-bottom: 80px;
}
.mar-b100 {
  margin-bottom: 100px;
}

.mar-0 {
  margin: 0 !important;
}
.mar-tb10 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.mar-tb15 {
  margin-top: 15px;
  margin-bottom: 15px;
}
.mar-tb20 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.mar-tb25 {
  margin-top: 25px;
  margin-bottom: 25px;
}

.mar-l5 {
  margin-left: 5px;
}
.mar-l10 {
  margin-left: 10px;
}
.mar-l15 {
  margin-left: 15px;
}
.mar-l20 {
  margin-left: 20px;
}

.mar-r5 {
  margin-right: 5px;
}
.mar-r7 {
  margin-right: 7px;
}
.mar-r10 {
  margin-right: 10px;
}
.mar-r15 {
  margin-right: 15px;
}
.mar-r20 {
  margin-right: 20px;
}

.mar-lr-auto {
  margin-left: auto;
  margin-right: auto;
}
.mar-lr10 {
  margin-left: 10px;
  margin-right: 10px;
}
.mar-lr15 {
  margin-left: 15px;
  margin-right: 15px;
}

.pd-5 {
  padding: 5px;
}
.pd-10 {
  padding: 10px;
}
.pd-15 {
  padding: 15px;
}
.pd-20 {
  padding: 20px;
}
.pd-25 {
  padding: 25px;
}

.pad-lr5 {
  padding-left: 5px;
  padding-right: 5px;
}
.pad-lr10 {
  padding-left: 10px;
  padding-right: 10px;
}
.pad-lr15 {
  padding-left: 15px;
  padding-right: 15px;
}
.pad-lr20 {
  padding-left: 20px;
  padding-right: 20px;
}
.pad-lr50-pc {
  padding-left: 50px;
  padding-right: 50px;
}
.pad-lr70-pc {
  padding-left: 70px;
  padding-right: 70px;
}
.pad-lr80-pc {
  padding-left: 80px;
  padding-right: 80px;
}
.pad-lr100-pc {
  padding-left: 100px;
  padding-right: 100px;
}

.pad-b10 {
  padding-bottom: 10px;
}
.pad-b20 {
  padding-bottom: 20px;
}
.pad-b30 {
  padding-bottom: 30px;
}
.pad-b40 {
  padding-bottom: 40px;
}
.pad-b50 {
  padding-bottom: 50px;
}
.pad-b60 {
  padding-bottom: 60px;
}
.pad-b70 {
  padding-bottom: 70px;
}
.pad-b80 {
  padding-bottom: 80px;
}
.pad-b100 {
  padding-bottom: 100px;
}


/* テキスト
------------------------------------------ */
.txt-marker {
  background: linear-gradient(transparent 60%, #ff6 60%);
}
.txt-marker-lblue {
  background: linear-gradient(transparent 60%, #dcedfe 60%);
}
.txt-marker-gold {
  background: linear-gradient(transparent 65%, #f9ee8d 60%);
}
.txt-marker-lgreen {
  background: linear-gradient(transparent 65%, #bdf663 60%);
}
.txt-marker-pink {
  background: linear-gradient(transparent 65%, #fab2f4 60%);
}

.txt-l-through {
  text-decoration: line-through;
}

.txt-ctr {
  text-align: center;
}
.txt-ctr-pc {
  text-align: center;
}
.txt-r {
  text-align: right;
}
.txt-l {
  text-align: left;
}
.txt-l-sp {
  text-align: left !important;
}


.font-b {
  font-weight: bold;
}

.font-s80 {
  font-size: 0.8em;
}
.font-s90 {
  font-size: 0.9em;
}
.font-s110 {
  font-size: 1.1em;
}
.font-s120 {
  font-size: 1.2em;
}
.font-s140 {
  font-size: 1.4em;
}
.font-s150 {
  font-size: 1.5em;
}

.font-black {
  color: #333 !important;
}
.font-wht {
  color: #fff !important;
}
.font-org {
  color: #ffa200 !important;
}


/* Amarico カラー
------------------------------------------ */
.font-amrc-gold {
  color: #e3c624;
}
.font-amrc-grn {
  color: #add433;
}
.font-amrc-red {
  color: #ec4f8d;
}
.font-amrc-blue {
  color: #31a2db;
}


.bg-amrc-gold {
  background-color: #edd44a;
}
.bg-amrc-gold:hover {
  background-color: #f5df68;
}
.bg-amrc-grn {
  background-color: #add433;
}
.bg-amrc-grn:hover {
  background-color: #c0e354;
}
.bg-amrc-red {
  background-color: #ec4f8d;
}
.bg-amrc-red:hover {
  background-color: #f1669d;
}
.bg-amrc-blue {
  background-color: #31a2db;
}
.bg-amrc-blue:hover {
  background-color: #4cb3e7;
}


/* テーブル
------------------------------------------ */
.tbl-style1 {
width: 94%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
border: solid 1px #CCCFD7;
font-size: 0.87em;
}
.tbl-style1 th {
border-collapse: collapse;
border: solid 1px #CCCFD7;
padding: 10px 2;
font-weight: normal;
background-color: #EAEDEF;
text-align: center;
}
.tbl-style1 td {
border-collapse: collapse;
border: solid 1px #CCCFD7;
padding: 10px 2px;
text-align: center;
vertical-align: middle;
}

.td-2 td {
  width: 50%;
}
.td-3 td {
  width: 33.3333%;
}
.td-20 {
  width: 20%;
}
.td-40 {
  width: 40%;
}

.tbl-w100 {
  width: 100%;
}
.tbl-scroll {
  overflow-x: scroll;
}


/* テーブル Amarico 4色
------------------------------------------ */
.tbl-amarico {
  border: solid 1px #e5e5e5;
  border-collapse: collapse;
}
.tbl-amarico th {
  border: solid 1px #e5e5e5;
  width: 25%;
  text-align: center;
}
.tbl-amarico th a {
  display: block;
  padding: 8px 10px;
}
.tbl-amarico td {
  border: solid 1px #e5e5e5;
  padding: 8px 10px;
  text-align: center;
}


/* ボタン
------------------------------------------ */
.btn-r50 {
  text-align: center;
}
.btn-r50 a {
  border-radius: 2em;
  padding: 13px 25px;
  display: inline-block;
  color: #fff;
  font-size: 0.9em;
  font-weight: bold;
  letter-spacing: 1px;
}

.btn-gold { /* 金 */
 background-color: #edd44a;
}
.btn-gold:hover {
 background-color: #f5df68;
}
.btn-lgreen { /* 黄緑 */
 background-color: #add433;
}
.btn-lgreen:hover {
 background-color: #c0e354;
}
.btn-red { /* 赤 */
 background-color: #ec4f8d;
}
.btn-red:hover {
 background-color: #f1669d;
}
.btn-lblue { /* 青 */
 background-color: #31a2db;
}
.btn-lblue:hover {
 background-color: #4cb3e7;
}


/* ボーダー
------------------------------------------ */
.bor-dot-top {
  border-top: dotted 1px #ededed;
}
.bor-dblue-btm {
  border-bottom: solid 9px #1b2350;
}
.bor-org-top {
  border-top: solid 4px #fbab16;
}


/* フッター
------------------------------------------ */
footer {
  background-color: #f7f8f4;
  padding-top: 50px;
  box-shadow: 0 -7px 10px -10px rgba(3, 0, 0, 0.22);
}
.ft-shop {
  width: 1400px;
  margin: 0 auto;
  padding: 0 2%;
  overflow: hidden;
}
footer .logo {
  float: left;
  width: 20%;
}
footer .shop-info {
  float: right;
  width: 75%;  
  display: flex;
  flex-wrap: nowrap;
}
footer .shop-info li {
  width: 30.333%;
  margin: 0 1.5%;
}
footer .shop-info li img {
  width: 100%;
  border: solid 1px #f1f3ea;
}
.marco-pet-nav {
  clear: both;
  width: 1400px;
  margin: 0 auto;
  padding: 40px 0 0 0;
  text-align: center;
}
.marco-pet-nav li {
  display: inline-block;
  border-right: 1px dotted #004274;
  margin-bottom: 20px;
}
.marco-pet-nav li a {
  color: #1b2350;
  font-size: 0.87em;
  padding: 8px 17px 8px 10px;
}
.marco-pet-nav li a:hover {
  color: #888;
}
.marco-pet-nav li:last-child {
  border: none;
}
.copyright {
  background-color: #f7f8f4;
  display: block;
  text-align: center;
  padding: 16px 0;
}

/* PAGE TOP
------------------------------------------ */
.page_top_btn {
  position: fixed;
  bottom: 10px;
  right: 10px;
  transition: 0.3s0;
}



/*-----------------------------------------------------*/
/* for -1400px                  */
/*-----------------------------------------------------*/
@media screen and (max-width: 1400px) {

footer {
  padding: 50px 2% 0 2%;
}
.ft-shop {
  width: 100%;
}
.marco-pet-nav {
  width: 100%;
}
.marco-pet-nav li a {
  font-size: 0.86em;
  padding: 8px 10px 8px 4px;
}
.copyright {
  padding: 14px 0;
}


} /* 閉じタグ削除禁止 */



/*-----------------------------------------------------*/
/* for -1200px                  */
/*-----------------------------------------------------*/
@media screen and (max-width: 1200px) {

html {
  font-size: 11.5pt;
}
footer {
  padding: 50px 1.5% 0 1.5%;
}
.ft-shop {
  width: 100%;
}
footer .logo {
  width: 22.5%;
}
.marco-pet-nav {
  width: 100%;
}
.marco-pet-nav li a {
  font-size: 0.84em;
  padding: 8px 8px 8px 4px;
}
.copyright {
  padding: 14px 0;
}


} /* 閉じタグ削除禁止 */



/*-----------------------------------------------------*/
/* for -768px                  */
/*-----------------------------------------------------*/
@media screen and (max-width: 768px) {

html {
  font-size: 13pt;
}
.pc-no {
  display: block;
}
.sp-no {
  display: none;
}
.sp-blk {
  display: block;
}




/* 横幅設定
------------------------------------------------------- */
.w-90-pc, .w-80-pc, .w-70-pc, .w-60-pc, .w-55-pc, .w-45-pc {
width: 100%;
}

.img640 {
display: block;
width: 97%;
margin-left: 1.5%;
margin-right: 1.5%;
}
.img600, .img550, .img500, .img450 {
max-width: 94%;
}


/* 余白調整
------------------------------------------------------- */
.line-h160-sp {
  line-height: 160% !important;
}

.mar-t10-sp {
margin-top: 10px !important;
}
.mar-t20-sp {
margin-top: 20px !important;
}
.mar-t30-sp {
margin-top: 30px !important;
}
.mar-t40-sp {
margin-top: 40px !important;
}
.mar-t50-sp {
margin-top: 50px !important;
}
.mar-b0-sp {
margin-bottom: 0 !important;
}
.mar-b5-sp {
margin-bottom: 5px !important;
}
.mar-b10-sp {
margin-bottom: 10px !important;
}
.pad-lr50-pc, .pad-lr70-pc, .pad-lr80-pc, .pad-lr100-pc {
  padding-left: 0;
  padding-right: 0;
}
.pad-lr5px-sp {
  padding-left: 5px;
  padding-right: 5px;
}
.pad-lr10px-sp {
  padding-left: 10px;
  padding-right: 10px;
}
.pad-lr18px-sp {
  padding-left: 18px;
  padding-right: 18px;
}
.pad-lr20px-sp {
  padding-left: 20px;
  padding-right: 20px;
}


/* テキスト
------------------------------------------ */
.font-s90-sp {
font-size: 0.9em;
}
.font-s95-sp {
font-size: 0.95em;
}
.font-s112-sp {
font-size: 1.12em !important;
}
.txt-ctr-pc {
text-align: left;
}
.txt-sp-left {
text-align: left !important;
padding: 0 10px;
}

.line-h120-sp {
line-height: 120%;
}
.line-h135-sp {
line-height: 135%;
}
.line-h140-sp {
line-height: 140%;
}
.line-h200-sp {
line-height: 200%;
}


/* フッター
------------------------------------------ */
footer {
  text-align: center;
  padding: 25px 0 0 0;
}
.ft-shop {
  width: 100%;
}
footer .logo {
  float: none;
  width: 63%;
  margin: 0 auto 20px auto;
}
footer .shop-info {
  float: none;
  width: 87%;  
  margin: 0 auto;
  flex-wrap: wrap;
}
footer .shop-info li {
  width: 100%;
  margin: 0 0 10px 0;
}
.marco-pet-nav {
  width: 100%;
  font-size: 0.85em;
  padding: 20px 0 0 0;
}
.marco-pet-nav li {
  margin-bottom: 18px;
}
.marco-pet-nav li a {
  font-size: 0.88em;
}
.copyright {
  padding: 0 0 15px 0;
}

/* PAGE TOP
------------------------------------------ */
.page_top_btn {
  bottom: 5px;
}
.page_top_btn img {
  width: 40px;
}

} /* 閉じタグ削除禁止 */