@charset "UTF-8";

* {-webkit-text-size-adjust:100%}

body {
  height:100%;
  font-size:12px;
  text-align:center;
  background-color:#FFFFFF;
  font-family:"游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  -webkit-font-smoothing:antialiased;
}

div {
  color:#000000;
  width:900px;
}
div.divRel {
  position:relative;
}

p.pAbs {
  white-space:nowrap;
  position:absolute;
}

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

th,td {
  text-align:left;
  vertical-align:top;
}

::placeholder {
  color:#BFBFBF;
}

input[type=checkbox],
input[type=radio]
{
  vertical-align:middle;
}

input[type=text],
input[type=password],
input[type=tel],
input[type=email],textarea
{
  border:1px solid #CCCCCC;
  border-radius:3px;
  color:#000000;
  padding:3px 5px;
}

input,
textarea,
select
{
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
}

select {
  border:1px solid #CCCCCC;
  border-radius:3px;
  background:#FFFFFF;
  color:#000000;
  padding:2px;
}

/* ============================== */
/* 文字色設定                     */
/* ============================== */
span.spanB {
  font-weight:bold;
}
span.spanRed {
  color:#FF0000;
}
span.spanBlue {
  color:#0000FF;
}

/* ============================== */
/* 枠                             */
/* ============================== */
div.divBar {
  background-image:url(../../image/bar.jpg);
  background-repeat:no-repeat;
  background-size:cover;
  height:76px;
}
div.divFrame1 {
  position:relative;
  background-repeat:no-repeat;
  background-size:cover;
  background-image:url(../../image/frame1.jpg);
  height:181px;
  z-index:10;
}
div.divFrame2 {
  position:relative;
  background-repeat:no-repeat;
  background-size:cover;
  background-image:url(../../image/frame2.jpg);
  height:181px;
  z-index:10;
}

/* ============================== */
/* リボンリンク設定               */
/* ============================== */
a.aRibbon {
  position:relative;
}
a.aRibbon:before, a.aRibbon:after {
  position:absolute;
  content:"";
  width:0px;
  height:0px;
  z-index:1;
}
a.aRibbon:before {
  top:0;
  left:-1px;
  border-width:15px 0px 15px 15px;
  border-color:transparent transparent transparent #FFFFFF;
  border-style:solid;
}
a.aRibbon:after {
  top:0;
  right:-1px;
  border-width:15px 15px 15px 0px;
  border-color:transparent #FFFFFF transparent transparent;
  border-style:solid;
}
a.aRibbonRed {
  position:relative;
  display:inline-block;
  background:#FF0000;
  color:#FFFFFF;
  font-size:14px;
  text-align:center;
  text-decoration:none;
  line-height:30px;
  height:30px;
  box-sizing:border-box;
}
a.aRibbonRed:hover {
  text-decoration:none;
  background:#FF7070;
  color:#000000;
}
a.aRibbonBlue {
  position:relative;
  display:inline-block;
  background:#3399FF;
  color:#FFFFFF;
  font-size:14px;
  text-align:center;
  text-decoration:none;
  line-height:30px;
  height:30px;
  box-sizing:border-box;
}
a.aRibbonBlue:hover {
  text-decoration:none;
  background:#33BBFF;
  color:#000000;
}

/* ============================== */
/* ページング                    */
/* ============================== */
a.aPaging {
  display:inline-block;
  border:1px solid #A757A8;
  border-radius:5px;
  background:#FFFFFF;
  color:#A757A8;
  font-size:12px;
  line-height:200%;
  text-align:center;
  vertical-align:middle;
  width:40px;
}
span.spanPaging1 {
  display:inline-block;
  border:1px solid #A757A8;
  border-radius:5px;
  background: #E6E6FA;
  color:#000000;
  font-size:12px;
  line-height:200%;
  text-align:center;
  vertical-align:middle;
  width:40px;
}
span.spanPaging2 {
  display:inline-block;
  background:#FFFFFF;
  color:#A757A8;
  font-size:12px;
  line-height:200%;
  text-align:center;
  vertical-align:middle;
  width:20px;
}

/* ============================== */
/* ヘッダー設定                   */
/* ============================== */
h1,h2 {
  font-size:1.5vw;
  display:none;
}
div.divHeader {
  position:relative;
}
/* ============================== */
/* ロゴ                           */
/* ============================== */
p.pLogo {
  border-top:solid;
  border-top-color:#CCCCCC;
  border-bottom:solid;
  border-bottom-color:#CCCCCC;
}
img.imgLogo {display:block; vertical-align:top; width:900px; height:auto;}

/* ============================== */
/* 会員様ログイン／ログアウト     */
/* ============================== */
p.pLogin {
  text-align:right;
  padding:0 10px;
}
a.aLogin {
  display:inline-block;
  border:1px solid #CCCCCC;
  border-radius:5px;
  background:#E6E6FA;
  color:#000000;
  font-size:10px;
  text-decoration:none;
  text-align:center;
  padding:7px 5px;
  width:120px;
}
a.aLogin:hover {
  text-decoration:none;
  color:#0000FF;
}
a.aLogin2 {
  width:85px;
}

/* ============================== */
/* トップ                         */
/* ============================== */
p.pTopRegNo   {font-size:14px;margin:10px;}
p.pTopAddress {font-size:20px;margin:10px;}
p.pTopType    {font-size:20px;margin:10px; width:800px;}
p.pTopName    {font-size:26px;margin:10px;}
figure.figContainer {
  position:relative;
  width:500px;
  height:375px;
}
figure.figContainer::after {
  position:absolute;
  content:'';
  top:0;
  bottom:0;
  left:0;
  right:0;
  box-shadow:inset 0 0 10px 10px white;
}
img.imgTop {display:block; vertical-align:top; width:500px; height:auto;}

/* ============================== */
/* SNS                            */
/* ============================== */
p.pTopSns a {
  display:inline-block;
  font-size:12px;
  margin:5px 20px;
  color:#000000;
  text-decoration:none;
}
img.imgSns {display:block; vertical-align:top; width:45px; height:45px;}

/* ============================== */
/* メニュー                       */
/* ============================== */
p.pManu {
  font-size:14px;
  line-height:200%;
}
p.pManu a {
  color:#000000;
  text-decoration:none;
}
p.pManu a:hover {
  color:#0000FF;
  text-decoration:none;
}

/* ============================== */
/* 詳細（ファイル読み込み）       */
/* ============================== */
div.divMain {
  position:relative;
  height:120px;
}
table.tblMain1 {
  position:absolute;
  top:40px;
  left:50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index:20;
}
td.tdMain1-1 {
  font-size:16px;
  letter-spacing:2px;
  line-height:150%;
  text-align:center;
  padding:20px;
}
td.tdMain1-2 {
  border:1px solid #CCCCCC;
  font-size:14px;
  line-height:150%;
}
td.tdMain1-2 div {
  overflow:auto;
  width:600px;
  height:300px;
  padding:5px;
}

/* ============================== */
/* 詳細（個別設定）               */
/* ============================== */
p.pTitle {
  font-size:16px;
  letter-spacing:2px;
  padding:5px;
}
p.pDetail {
  font-size:14px;
  line-height:150%;
  padding:5px;
}

/* ============================== */
/* ショップ概要                   */
/* ============================== */
td.tdHp2-1 {
  font-size:16px;
  letter-spacing:2px;
  line-height:150%;
  text-align:center;
  padding:20px;
}
td.tdHp2-2 {
  border:1px solid #CCCCCC;
  background:#FFFCEB;
  font-size:14px;
  letter-spacing:2px;
  line-height:150%;
  text-align:center;
  padding:5px;
}
td.tdHp2-3 {
  border:1px solid #CCCCCC;
  background:#FFFCEB;
  font-size:14px;
  letter-spacing:2px;
  line-height:150%;
  text-align:center;
  width:80px;
  padding:5px;
}
td.tdHp2-4 {
  border:1px solid #CCCCCC;
  font-size:14px;
  line-height:150%;
  width:520px;
  padding:5px;
}
td.tdHp2-5 {
  border:1px solid #CCCCCC;
  font-size:14px;
  line-height:150%;
}
td.tdHp2-5 div {
  overflow:auto;
  width:600px;
  height:200px;
  padding:5px;
}

/* ============================== */
/* 販売子猫一覧                   */
/* ============================== */
div.divHp3-1 {
  position:relative;
  height:270px;
}
p.pHp3-1 {
  font-size:14px;
  line-height:150%;
  text-align:left;
  vertical-align:middle;
  letter-spacing:2px;
  top:130px;
  left:50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
div.divHp3-1-2 {
  height:160px;
}
p.pHp3-1-2 {
  top:80px;
}
div.divHp3-2 a {
  width:300px;
}
p.pHp3-2 {
  white-space:nowrap;
  background: #E6E6FA;
  border:1px solid #CCCCCC;
  font-size:14px;
  padding:5px 0;
  margin:0px 20px;
}
p.pHp3-3 {
  white-space:nowrap;
  font-size:14px;
  line-height:150%;
  padding:10px 0;
  margin:0px 20px;
}
p.pHp3-3 a {
  color:#000000;
  text-decoration:none;
}
p.pHp3-3 a:hover {
  text-decoration:none;
  color:#0000FF;
}
table.tblHp3-1 {
  margin:0px auto;
}
table.tblHp3-1 a {
  color:#000000;
  text-decoration:none;
}
td.tdHp3-1-1 {
  border:3px solid #FFCCDD;
}
td.tdHp3-1-2 {
  border:3px solid #CCCCCC;
}
table.tblHp3-2 td {
  font-size:12px;
  line-height:130%;
  color:#000000;
  word-break:break-all;
  width:180px;
  padding:3px 5px;
}
img.imgList {width:180px; height:135px; object-fit:contain; background-color:#FFFFFF;}

/* ============================== */
/* お取引について                 */
/* ============================== */
div.divHp4-1 {
  position:relative;
  height:250px;
}
p.pHp4-1 {
  font-size:14px;
  line-height:150%;
  text-align:left;
  vertical-align:middle;
  letter-spacing:2px;
  top:110px;
  left:50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
div.divHp4-2 {
  position:relative;
  height:270px;
  z-index:20;
}
p.pHp4-2-1 {
  font-size:16px;
  text-align:center;
  letter-spacing:2px;
  top:-120px;
  left:50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
p.pHp4-2-2 {
  font-size:14px;
  line-height:150%;
  text-align:left;
  vertical-align:middle;
  letter-spacing:2px;
  top:-80px;
  left:180px;
}
div.divHp4-3 {
  position:relative;
  height:690px;
  z-index:20;
}
p.pHp4-3-2 {
  font-size:14px;
  line-height:150%;
  text-align:left;
  vertical-align:middle;
  letter-spacing:2px;
  top:-80px;
  left:150px;
//  left:135px;
//  border:1px solid #CCCCCC;
//  overflow:auto;
//  width:620px;
//  height:500px;
//  padding:5px;
}

/* ============================== */
/* 動物愛護管理法                 */
/* ============================== */
div.divHp10-1 {
  position:relative;
  height:100px;
}
p.pHp10-1 {
  font-size:14px;
  line-height:150%;
  text-align:left;
  vertical-align:middle;
  letter-spacing:2px;
  top:30px;
  left:50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
div.divHp10-2 a {
  width:300px;
}

/* ============================== */
/* お問い合わせ                   */
/* ============================== */
div.divHp11-1 {
  position:relative;
  height:440px;
}
p.pHp11-1 {
  font-size:14px;
  line-height:150%;
  text-align:left;
  vertical-align:middle;
  letter-spacing:2px;
  top:210px;
  left:50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
div.divHp11-1-2 {
  height:340px;
}
p.pHp11-1-2 {
  top:160px;
}
div.divHp11-2 a {
  width:300px;
}

/* ============================== */
/* 会員登録                       */
/* ============================== */
td.tdHp12-1-1 {
  font-size:14px;
  line-height:150%;
  letter-spacing:1px;
  text-align:left;
  padding:5px;
}
td.tdHp12-1-2 {
  border-top:1px solid #CCCCCC;
  border-bottom:1px solid #CCCCCC;
  border-left:1px solid #CCCCCC;
  background:#FFFCEB;
  text-align:left;
  vertical-align:middle;
  padding:5px;
}
td.tdHp12-1-2 span {
  border:1px solid #FF99BB;
  border-radius:5px;
  background:#FFFCEB;
  font-size:12px;
  padding:1px 2px;
}
td.tdHp12-1-3 {
  border-top:1px solid #CCCCCC;
  border-right:1px solid #CCCCCC;
  border-bottom:1px solid #CCCCCC;
  background:#FFFCEB;
  font-size:12px;
  line-height:150%;
  text-align:left;
  vertical-align:middle;
  letter-spacing:1px;
  padding:5px;
  width:120px;
}
td.tdHp12-1-4 {
  border:1px solid #CCCCCC;
  padding:3px 0px;
}
td.tdHp12-1-4-1 {
  font-size:12px;
  text-align:left;
  padding:3px 5px;
}
td.tdHp12-1-4-2 {
  font-size:12px;
  text-align:left;
  padding:3px 5px;
}
td.tdHp12-1-4-3 {
  font-size:12px;
  line-height:150%;
  text-align:left;
  padding:3px 5px;
}
td.tdHp12-1-5 {
  border:1px solid #CCCCCC;
  font-size:12px;
  line-height:150%;
  text-align:left;
  vertical-align:middle;
  padding:3px 5px;
}
td.tdHp12-2-1 {
  font-size:16px;
  line-height:150%;
  letter-spacing:2px;
  text-align:center;
  padding:5px;
}
td.tdHp12-2-2 {
  font-size:14px;
  line-height:150%;
  letter-spacing:1px;
  text-align:left;
  padding:5px;
}
td.tdHp12-2-3 {
  padding:5px 0;
}
td.tdHp12-2-3 span {
  border:1px solid #FF99BB;
  border-radius:5px;
  background:#FFFCEB;
  font-size:12px;
  padding:1px 2px;
}
td.tdHp12-2-4 div {
  border:1px solid #CCCCCC;
  font-size:14px;
  line-height:150%;
  text-align:left;
  letter-spacing:1px;
  padding:10px;
  overflow:auto;
  width:600px;
  max-height:100px;
}
td.tdHp12-2-5 {
  line-height:200%;
  text-align:right;
  vertical-align:middle;
  padding:5px;
}
td.tdHp12-2-6 {
  text-align:center;
  padding:5px;
}
td.tdHp12-2-6 a {
  width:300px;
}
input.inpname {
  font-size:12px;
  width:80px;
}
input.inptel {
  font-size:12px;
  width:120px;
}
input.inpmail {
  font-size:12px;
  width:200px;
}
select.inpselect {
  font-size:12px;
}
input.inpradio {
  position:relative;
  top:-1px;
  font-size:12px;
}
label.lblradio {
  font-size:12px;
}
input.inpcheck {
  position:relative;
  top:-1px;
  font-size:12px;
}
label.lblcheck {
  font-size:12px;
}
input.inptext1 {
  font-size:12px;
  width:80px;
}
input.inptext2 {
  font-size:12px;
  width:200px;
}
span.spanBirthday {
  display:none;
}
input.btnYubin {
  border:1px solid #CCCCCC;
  border-radius:5px;
  font-size:10px;
  padding:3px 8px;
}

/* ============================== */
/* 会員登録完了                   */
/* ============================== */
div.divHp13-1 a {
  width:300px;
}

/* ============================== */
/* 会員様ログイン                 */
/* ============================== */
td.tdHp14-1 {
  border:1px solid #CCCCCC;
  background:#FFFCEB;
  font-size:12px;
  line-height:150%;
  text-align:center;
  vertical-align:middle;
  letter-spacing:1px;
  padding:5px;
  width:100px;
}
td.tdHp14-2 {
  position:relative;
  border:1px solid #CCCCCC;
  font-size:12px;
  line-height:200%;
  text-align:left;
  padding:5px;
}
td.tdHp14-3 {
  font-size:12px;
  text-align:right;
  padding:5px;
}
input.inppass {
  font-size:12px;
  width:200px;
}
div.divHp14-1 {
  position:relative;
  height:120px;
}
p.pHp14-1 {
  font-size:14px;
  line-height:130%;
  letter-spacing:1px;
  text-align:left;
  top:35%;
  left:50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
p.pHp14-1 a {
  color:#0000FF;
  text-decoration:none;
}
p.pHp14-1 a:hover {
  text-decoration:underline solid #0000FF;
}
p.pHp14-2 {
  top:85%;
  left:50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
p.pHp14-2 a {
  width:300px;
}
img.imgEye1 {
  position:absolute;
  top:50%;
  right:5%;
  transform:translateY(-50%);
  width:15px;
}
img.imgEye2 {
  display:none;
  position:absolute;
  top:50%;
  right:5%;
  transform:translateY(-50%);
  width:15px;
}

/* ============================== */
/* フッター設定                   */
/* ============================== */
p.pFooter {
  border-top:solid;
  border-top-color:#CCCCCC;
  border-bottom:solid;
  border-bottom-color:#CCCCCC;
  background:#F8FFF1;
  font-size:12px;
  padding:5px;
}

/* ============================== */
/* ハンバーガーアイコン           */
/* ============================== */
div.hamburger {
  position:absolute;
  right:20px;
  top:45px;
  width:70px;
  height:70px;
  cursor:pointer;
  z-index:300;
}
span.hamburger__line {
  position:absolute;
  width:50px;
  height:5px;
  right:10px;
  background-color:#000000;
  transition:all 0.5s;
}
span.hamburger__line--1 {
  top:5px;
}
span.hamburger__line--2 {
  top:20px;
}
span.hamburger__line--3 {
  top:35px;
}
div.open div.hamburger {
  top:5px;
}
div.open span.hamburger__line--1 {
  transform:rotate(-45deg);
  top:36px;
}
div.open span.hamburger__line--2 {
  opacity:0;
}
div.open span.hamburger__line--3 {
  transform: rotate(45deg);
  top:36px;
}

/* ============================== */
/* sp-nav(ナビ)                   */
/* ============================== */
nav.sp-nav {
  position:fixed;
  right:-100%;
  top:0;
  width:70%;
  height:100%;
  background-color:#FFFFFF;
  transition:all 0.5s;
  z-index:200;
  overflow-y:scroll;
  font-size: calc((100vw - 320px) / 140 + 24px);
  text-align:left;
}
div.open nav.sp-nav {
  right:0;
}

/* ============================== */
/* sp-nav(タグ)                   */
/* ============================== */
nav.sp-nav ul {
  margin:0 auto;
  padding:0;
  width:100%;
}
nav.sp-nav ul li {
  list-style-type:none;
  padding:25px 10px;
  width:95%;
  border-bottom:1px solid #CCCCCC;
}
nav.sp-nav ul li:hover{
  background:#F8FFF1;
}
nav.sp-nav ul li a {
  display:block;
  color:#000;
  text-decoration:none;
}
li.lititle {
  background:#F8FFF1;
}

/* ============================== */
/* ハンバーガーメニュー解除用     */
/* ============================== */
div.black-bg {
  position:fixed;
  left:0;
  top:0;
  width:100vw;
  height:100vh;
  z-index:5;
  background-color:#000000;
  opacity:0;
  visibility:hidden;
  transition:all 0.5s;
  cursor:pointer;
  z-index:100;
}
div.open div.black-bg {
  opacity:0.3;
  visibility:visible;
}