@charset "UTF-8";
/* CSS Document */
*,*::before,
*::after{
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body{
	width: 100%;
	line-height: 1.5;
	background-image: url("../img/background-img.png");
	background-repeat: repeat;	
	font-family: "YuGothic", "Yu Gothic medium", "Hiragino Sans", "Meiryo", "sans-serif";
	font-size: 16px;
}

main {
	background: #FFFFFF;
}

 a:link,a:visited,a:hover,a:active {
	text-decoration: none;	
}

.main-view {
	padding-top: 100px;
	text-align: center;
}


.pc {
	display: none;
	text-align: center;
}

.sp{
	text-align: center;
}


/*-------------------------商品紹介ページ*/
.item-icon {
	text-align: center;
}

.item-icon p{
	text-align: left;
		margin: 0% 10% 0% 10% ;
}

.product{
	margin: 0% 5% 0% 5% ;
}

.product-center{
	display: flex;
	justify-content: center;
}

.product-right{
	text-align: left;
}

.product-right table{
	width: 100%;
	text-align: center;
	border: solid 1px #333;	
	border-collapse: collapse;
	margin: 5px auto;
}

th,
td{
	padding: 5px;
	border: solid 1px #333;
}

.product-left{
	align-content: center;
	text-align: center;
}

.product-right small{
	font-size: 80%;
}
/*-----------------------------------*/
/*----------（触るなゾーン）--------------*/
.js-header-inner{
	animation-name:anima-1;
	animation-duration: 5s;
    animation-fill-mode: both;

}

.anima-1 {
	animation-name:anima-1;
	animation-duration: 5s;
    animation-fill-mode: both
}

@keyframes anima-1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.js-header-site-menu {
	width: 100%;
	display: flex;
	background: #fff;
	align-items: center;
	position: fixed;
	z-index: 300;
	border-bottom: solid 5px #B5001E;
	box-shadow: 0 0 10px rgb(0,0,0,.5);
	transition: all 0.3s;
	padding: 10px 0;
}

.js-header-site-menu img {
	padding: 10px;
	margin: 0 15px;
}

.js-header-site-menu.change-color {
	background-color: #554135;
	box-shadow: 0 0 5px 0 #eee;
}

.none {
	text-transform: none;
}

.header-h1 {
	margin: 0 auto;
	padding-top: 100px;
}

.site-menu-a {
	display: block;
}

.site-menu-ul{
	list-style: none;
	display: flex;
	padding: 0;
	}

.site-menu-list{
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
	margin: auto 20px;
}

.site-menu-ul a {
	position: relative;
	color: #000;
}


.site-menu-a:hover {
	color: #fcd7a1;
	transition: 0.3s;
}

p{
	margin-left: 5px;
	margin-right: 5px;
}

h1 {
  position: relative;
  display: inline-block;
  padding: 0 65px;
	text-align: center;
align-content: center;
}

h1:before, h1:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 50px;
  height: 5px;
  border-radius: 3px;
  background-color: #B5001E;
}

h1:before {
  left:0;
}
h1:after {
  right: 0;
}

h3{
	margin-left: 5px;
	margin-right: 5px;
}

h2{
	text-align: center;
}

.product-right a {
	padding: 10px;
	text-align: center;
	align-content: center;
	box-shadow: 0 0 2px 0 #333;
	border-radius: 20px;
}

/*---------------------------------*/
/*****ハンバーガーメニュー（触るな）*****/	
.js-header {
	justify-content: space-between;
}
.site-menu-ul{
		position: fixed;
		right: -100%;
		width: 100%;
		height: 70%;
		margin-left: auto;
		/* メニューを縦に */
		display: flex;
		flex-direction: column;
		color: #000;
		background-color:rgba(255,255,255,0.85);
		transition: .3s;
		padding-top: 1rem;
}
.site-menu-list {
		width: 80%;
 		display: flex;		
		font-size: 1.2rem;
 		align-items: center;
		border-bottom:solid 3px #fff;
		margin: 20px auto;
}
.btn {
  		/* ボタンの配置位置  */
  		position: fixed;
		right: 28px;
		/* ボタンの大きさ  */
  		width: 30px;
  		height: 20px;
		background-color: #fff;
  		/* 最前面に */
  		z-index: 10;
}
.btn-line {
		display: block;
		position: relative;  /* バーガー線の位置基準として設定 */
		width: 100%;  /* 線の長さと高さ */
		height: 3px;
		background-color: #000;  /* バーガー線の色 */
		border-radius: 10px;
		transition: .3s;
	}
/****** 上下のバーガー線（触るな） *****/
.btn-line::before {
	  	content: "";
	  	position: absolute;
	  	right: 0;
		width: 100%;
	  	height: 100%;
		border-radius: 10px;
	  	background-color: #000;
	  	transition: .3s;	
}
.btn-line::after {
		content: "";
	  	position: absolute;	
		width: 100%;
	  	height: 100%;
		border-radius: 10px;
		background-color: #000;
		right: 0;
	  	transition: .3s;	
	}
.btn-line::before {
	  /* 上の線の位置 */
		transform: translateY(-9px);
	}
.btn-line::after {
	  /* 下の線の位置 */
		transform: translateY(9px);
}
.site-menu-ul.open {
		height: 100%;
		width: 100%;
		right: 0;
	}


/*----------------------------------footer*/

.footer {
	padding-top: 20px;
	font-size: 1.6rem;
	margin: 50px auto 50px;
	text-align: center;
}

.yeaster-link {
	color: #4F96F4;
	transition: 0.3s;
}

.yeaster-link:hover {
	text-decoration: underline;
}

summary {
	font-weight: bold;
	border-radius: 35px;
	cursor: pointer;
    transition: 0.2s; /* 変化を滑らかに */
	padding: 5px 25px;
	margin: 5px 0;
	font-size: 1.4rem;
}

.red {
	color: #b61c31;
}

.retriver-red:hover {
	 background-color: #b61c31;
	 color: #fff;
}

.retriver-red {
	font-size: 1.6rem;
	border: solid 2.5px #b61c31;
}

.retriver-1 {
    display: flex;
    align-items: center;
    padding: .5em .7em;
	margin: 0 5%;
    background-color: #f2f2f2;
    color: #333333;
}

.retriver-1::before {
    display: inline-block;
    width: 5px;
    height: 1.5em;
    margin-right: .5em;
    background-color: #b61c31;
    content: '';
}

.retriver-2 {
    text-align: center;
	background:#F9DDE1;
	padding: 5px;
	border-radius: 40px;
	margin: 5%;
}

.pink {
	color: #e50695;
}

.retriver-pink:hover {
	 background-color: #e50695;
	 color: #fff;
}

.retriver-pink {
	font-size: 1.6rem;
	border: solid 2.5px #e50695;
}

.retriver-3 {
    text-align: center;
	background:#FEDAF1;
	padding: 5px;
	border-radius: 40px;
	margin: 5%;
}

.green {
	color: #4C9C2E;
}

.shiba-green:hover {
	 background-color: #4C9C2E;
	 color: #fff;
}

.shiba-green {
	font-size: 1.6rem;
	border: solid 2.5px #4C9C2E;
}

.shiba-1 {
    display: flex;
    align-items: center;
    padding: .5em .7em;
	margin: 0 5%;
    background-color: #f2f2f2;
    color: #333333;
}

.shiba-1::before {
    display: inline-block;
    width: 5px;
    height: 1.5em;
    margin-right: .5em;
    background-color: #4C9C2E;
    content: '';
}

.shiba-2 {
    text-align: center;
	background:#E8F6E3;
	padding: 5px;
	border-radius: 40px;
	margin: 5%;
}

.orange {
	color: #FE3B1F;
}

.french-orange:hover {
	 background-color: #FE3B1F;
	 color: #fff;
}

.french-orange {
	font-size: 1.6rem;
	border: solid 2.5px #FE3B1F;
}

.french-1 {
    display: flex;
    align-items: center;
    padding: .5em .7em;
	margin: 0 5%;
    background-color: #f2f2f2;
    color: #333333;
}

.french-1::before {
    display: inline-block;
    width: 5px;
    height: 1.5em;
    margin-right: .5em;
    background-color: #FE3B1F;
    content: '';
}

.french-2 {
    text-align: center;
	background:#FED4CE;
	padding: 5px;
	border-radius: 40px;
	margin: 5%;
}

.purple {
	color: #410099;
}

.pug-purple:hover {
	 background-color: #410099;
	 color: #fff;
}

.pug-purple {
	font-size: 1.6rem;
	border: solid 2.5px #410099;
}

.pug-1 {
    display: flex;
    align-items: center;
    padding: .5em .7em;
	margin: 0 5%;
    background-color: #f2f2f2;
    color: #333333;
}

.pug-1::before {
    display: inline-block;
    width: 5px;
    height: 1.5em;
    margin-right: .5em;
    background-color: #410099;
    content: '';
}

.pug-2 {
    text-align: center;
	background:#E3CEFF;
	padding: 5px;
	border-radius: 40px;
	margin: 5%;
}

.skyblue {
	color: #3CB4E5;
}

.schnauzer-skyblue:hover {
	 background-color: #3CB4E5;
	 color: #fff;
}

.schnauzer-skyblue {
	font-size: 1.6rem;
	border: solid 2.5px #3CB4E5;
}

.schnauzer-1 {
    display: flex;
    align-items: center;
    padding: .5em .7em;
	margin: 0 5%;
    background-color: #f2f2f2;
    color: #333333;
}

.schnauzer-1::before {
    display: inline-block;
    width: 5px;
    height: 1.5em;
    margin-right: .5em;
    background-color: #3CB4E5;
    content: '';
}

.schnauzer-2 {
    text-align: center;
	background:#D2EDF9;
	padding: 5px;
	border-radius: 40px;
	margin: 5%;
}

.pinky {
	color: #F45197;
}

.jack-pinky:hover {
	 background-color: #F45197;
	 color: #fff;
}

.jack-pinky {
	font-size: 1.6rem;
	border: solid 2.5px #F45197;
}

.jack-1 {
    display: flex;
    align-items: center;
    padding: .5em .7em;
	margin: 0 5%;
    background-color: #f2f2f2;
    color: #333333;
}

.jack-1::before {
    display: inline-block;
    width: 5px;
    height: 1.5em;
    margin-right: .5em;
    background-color: #F45197;
    content: '';
}

.jack-2 {
    text-align: center;
	background:#FCD5E6;
	padding: 5px;
	border-radius: 40px;
	margin: 5%;
}

.brown {
	color: #774D28;
}

.beagle-brown:hover {
	 background-color: #774D28;
	 color: #fff;
}

.beagle-brown {
	font-size: 1.6rem;
	border: solid 2.5px #774D28;
}

.beagle-1 {
    display: flex;
    align-items: center;
    padding: .5em .7em;
	margin: 0 5%;
    background-color: #f2f2f2;
    color: #333333;
}

.beagle-1::before {
    display: inline-block;
    width: 5px;
    height: 1.5em;
    margin-right: .5em;
    background-color: #774D28;
    content: '';
}

.beagle-2 {
    text-align: center;
	background:#EEDDCE;
	padding: 5px;
	border-radius: 40px;
	margin: 5%;
}

.blue {
	color: #00ADBB;
}

.cavalier-blue:hover {
	 background-color: #00ADBB;
	 color: #fff;
}

.cavalier-blue {
	font-size: 1.6rem;
	border: solid 2.5px #00ADBB;
}

.cavalier-1 {
    display: flex;
    align-items: center;
    padding: .5em .7em;
	margin: 0 5%;
    background-color: #f2f2f2;
    color: #333333;
}

.cavalier-1::before {
    display: inline-block;
    width: 5px;
    height: 1.5em;
    margin-right: .5em;
    background-color: #00ADBB;
    content: '';
}

.cavalier-2 {
    text-align: center;
	background:#CCFBFF;
	padding: 5px;
	border-radius: 40px;
	margin: 5%;
}

.turquoise {
	color: #005E85;
}

.cocker-turquoise:hover {
	 background-color: #005E85;
	 color: #fff;
}

.cocker-turquoise {
	font-size: 1.6rem;
	border: solid 2.5px #005E85;
}

.cocker-1 {
    display: flex;
    align-items: center;
    padding: .5em .7em;
	margin: 0 5%;
    background-color: #f2f2f2;
    color: #333333;
}

.cocker-1::before {
    display: inline-block;
    width: 5px;
    height: 1.5em;
    margin-right: .5em;
    background-color: #005E85;
    content: '';
}

.cocker-2 {
    text-align: center;
	background:#D2F1FF;
	padding: 5px;
	border-radius: 40px;
	margin: 5%;
}

.tomato {
	color: #F5333F;
}

.shelty-tomato:hover {
	 background-color: #F5333F;
	 color: #fff;
}

.shelty-tomato {
	font-size: 1.6rem;
	border: solid 2.5px #F5333F;
}

.shelty-1 {
    display: flex;
    align-items: center;
    padding: .5em .7em;
	margin: 0 5%;
    background-color: #f2f2f2;
    color: #333333;
}

.shelty-1::before {
    display: inline-block;
    width: 5px;
    height: 1.5em;
    margin-right: .5em;
    background-color: #F5333F;
    content: '';
}

.shelty-2 {
    text-align: center;
	background:#FDDBDD;
	padding: 5px;
	border-radius: 40px;
	margin: 5%;
}

.grape {
	color: #863399;
}

.poodle-grape:hover {
	 background-color: #863399;
	 color: #fff;
}

.poodle-grape {
	font-size: 1.6rem;
	border: solid 2.5px #863399;
}

.poodle-1 {
    display: flex;
    align-items: center;
    padding: .5em .7em;
	margin: 0 5%;
    background-color: #f2f2f2;
    color: #333333;
}

.poodle-1::before {
    display: inline-block;
    width: 5px;
    height: 1.5em;
    margin-right: .5em;
    background-color: #863399;
    content: '';
}

.poodle-2 {
    text-align: center;
	background:#F3E5F6;
	padding: 5px;
	border-radius: 40px;
	margin: 5%;
}

.moss {
	color: #006937;
}

.pome-moss:hover {
	 background-color: #006937;
	 color: #fff;
}

.pome-moss {
	font-size: 1.6rem;
	border: solid 2.5px #006937;
}

.pome-1 {
    display: flex;
    align-items: center;
    padding: .5em .7em;
	margin: 0 5%;
    background-color: #f2f2f2;
    color: #333333;
}

.pome-1::before {
    display: inline-block;
    width: 5px;
    height: 1.5em;
    margin-right: .5em;
    background-color: #006937;
    content: '';
}

.pome-2 {
    text-align: center;
	background:#C7FFE4;
	padding: 5px;
	border-radius: 40px;
	margin: 5%;
}

.renga {
	color: #C1531B;
}

.duchs-renga:hover {
	 background-color: #C1531B;
	 color: #fff;
}

.duchs-renga {
	font-size: 1.6rem;
	border: solid 2.5px #C1531B;
}

.duchs-1 {
    display: flex;
    align-items: center;
    padding: .5em .7em;
	margin: 0 5%;
    background-color: #f2f2f2;
    color: #333333;
}

.duchs-1::before {
    display: inline-block;
    width: 5px;
    height: 1.5em;
    margin-right: .5em;
    background-color: #C1531B;
    content: '';
}

.duchs-2 {
    text-align: center;
	background:#F8DFD2;
	padding: 5px;
	border-radius: 40px;
	margin: 5%;
}

.yellow {
	color: #FFD600;
}

.chiwawa-yellow:hover {
	 background-color: #FFD600;
	 color: #fff;
}

.chiwawa-yellow {
	font-size: 1.6rem;
	border: solid 2.5px #FFD600;
}

.chiwawa-1 {
    display: flex;
    align-items: center;
    padding: .5em .7em;
	margin: 0 5%;
    background-color: #f2f2f2;
    color: #333333;
}

.chiwawa-1::before {
    display: inline-block;
    width: 5px;
    height: 1.5em;
    margin-right: .5em;
    background-color: #FFD600;
    content: '';
}

.chiwawa-2 {
    text-align: center;
	background:#FFF4BF;
	padding: 5px;
	border-radius: 40px;
	margin: 5%;
}

.click{
	display: flex;
	width: 60%;
	text-align: center;
	margin: auto;
}

.click a{
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
	margin: 0 10px;
}

.item {
  border-radius: 10px;
  padding: 15px;
  text-align: center;
}

.item img {
  max-width: 100%;
  height: auto;
}

/*レスポンシブ対応用-------------------------------------*/
@media (min-width: 700px){
	body{
		font-size: 14px;
	}
	main{
		width: 90%;
		text-align: center;
		margin: 0 auto;
	}
	.product{
	display: flex;
	justify-content: center;
	}
	.product-right{
		width: 100%;
	}
	.product-left{
		width: 100%;
	}
	.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
	.sp {
	display: none;
	}
	.pc {
	display: block;
	text-align: center;
	}
}
@media (min-width: 950px){
	body{
		font-size: 16px;
	}
	main{
		width: 60%;
		text-align: center;
		margin: 0 auto;
	}
	
	.product{
	display: flex;
	justify-content: center;
	}
	
	.product-right{
		width: 100%;
	}

	.product-left{
		width: 100%;
	}
	.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
	.sp{
		display: none;
	}
	
	.pc {
	display: block;
	text-align: center;
	}
}

/*----------------------------------------*/