@charset "utf-8";

/************************
	All
************************/
*{
	margin:0;
	padding:0;
}
body{
	text-align:center;
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	height:100%;
	font-size:16px;
	line-height:1.6;
	color:#333;
	margin:0;
	padding:0;
}
#wrap{
	width:100%;
}
img{
	width:100%;
	height:auto;
}
input[type="submit"]:hover,
input[type="button"]:hover,
a:hover{
	opacity:0.8;
}
@media (max-width:768px){
	#wrap{
		overflow:hidden;
	}
}

/************************
	Page Width
************************/
#head div.clearfix,
#head ul.clearfix,
#main,
#foot dl{
	width:100%;
	max-width:900px;
	margin:0 auto;
}

/************************
	Layout
************************/
#side{
	width:24%;
	float:right;
	padding-top:28px;
}
#contents{
	width:74%;
	float:left;
	text-align:left;
}
h3{
	text-align:center;
}
h3.rb{
	position:relative;
	padding:10px;
	font-size:1.125em;
	background:#FFCB33;
	box-sizing:border-box;
	margin-bottom:10px;
	color:#8C4600;
}
h3.rb:after,
h3.rb:before {
    content:'';
    position:absolute;
    top:100%;
	border-style:solid;
	border-color:transparent;
}
h3.rb:before{
    left:0;
	border-width:0 10px 10px 0;
	border-right-color:#CC9900;
}
h3.rb:after{
    right:0;
	border-width:0 0 10px 10px;
	border-left-color:#CC9900;
}
h4{
	padding:10px;
	font-size:1.125em;
	margin-bottom:10px;
	color:#8C4600;
	border-bottom:1px solid #CC9900;
	text-align:center;
}
#main{
	padding:0 0 20px;
}
#main .bredcrumb{
	padding:5px;
	font-size:12px;
	line-height:18px;
}
@media (max-width:768px){
	#side,
	#contents{
		width:100%;
		float:none;
		display:block;
	}
}

/************************
	Head
************************/
#head h1{
	display:block;
	font-size:0.875em;
	color:#402000;
	padding:5px 0;
	text-align:center;
}
#head header.clearfix{
	background:#F7F4EE;
}
#head header.clearfix nav{
	background:#FFF;
}
#head .rt{
	width:46%;
	float:right;
}
#head .rt p{
	padding:10px 0;
}
#head .rt p a{
	display:inline-block;
	font-size:0.75em;
	padding:10px 5px;
}
#head .lt{
	width:52%;
	float:left;
}
#head h2 a{
	display:block;
	width:450px;
	height:85px;
	background:url("../img/logo.png") no-repeat center center;
	text-indent:-9999em;
}
#head nav{
	border-top:10px solid #664C00;
	padding:10px 0 0;
}
#head ul li{
	width:32%;
	float:left;
	margin-left:2%;
}
#head ul li.listtop{
	margin-left:0;
}
@media (max-width:768px){
	#head .rt,
	#head .lt{
		width:100%;
		float:none;
		display:block;
	}
	#head h1{
		display:block;
		text-align:left;
		padding:5px;
		color:#F60;
		font-size:0.75em;
	}
	#head h2 a{
		display:block;
		width:340px;
		height:64px;
		background:url("../img/logo.png") no-repeat center center;
		text-indent:-9999em;
		background-size:340px 72px;
		margin:0 auto;
	}
	#head .rt p{
		display:none;
	}
}
/************************
	SlideMenu
************************/
#l-wrapper{
	display:none !important;
}
@media (max-width:768px){
	#l-wrapper{
		display:inherit !important;
	}
	.m-nav-btn {
	  -webkit-transition: 0.3s;
			  transition: 0.3s;
	  position: fixed;
	  top:30px;
	  right:20px;
	  width: 40px;
	  height: 40px;
	  background-repeat: no-repeat;
	  background-position: 50%;
	  background:rgba(247,244,238,0.8) url("../img/nav.png");
	  text-indent: -9998em;
	  z-index: 12;
	}
	.m-nav-btn .is-active {
	  opacity: 0;
	}
	.m-nav-btn:hover {
	  background-color:#FCBA76;
	  background-image:url("../img/nav_on.png");
	}
	.m-nav{
	  -webkit-transition: 0.3s;
			  transition: 0.3s;
	  position:fixed;
	  top:0;
	  right:-50%;
	  width:50%;
	  height:100%;
	  padding-top:100px;
	  background-color:rgba(247,244,238,0.9);
	  z-index:13;
	}
	.m-nav.is-active{
	  right:0;
	}
	.m-nav-overlay{
	  display:none;
	  position:fixed;
	  width:100%;
	  height:100%;
	  top:0;
	  left:0;
	  z-index:11;
	}
	.m-nav-overlay.is-active{
	  display:block;
	}
	.m-nav__list{
	  text-align:center;
	}
	.m-nav__list__item{
	  display:table;
	  width:100%;
	}
	.m-nav__list__item a{
	  -webkit-transition:0.3s;
			  transition:0.3s;
	  display:table-cell;
	  height:40px;
	  vertical-align:middle;
	  color:#FF9326;
	  text-decoration:none;
	  font-weight:bold;
	  border-bottom:1px dotted #F9E1C6;
	}
	.m-nav__list__item a > span{
	  display:block;
	  font-weight:bold;
	  font-size:1em;
	}
	.m-nav__list__item a:hover{
	  background-color:#FFF;
	  color:#F60;
	  text-decoration:none;
	}
	.m-nav__btn {
	  margin-top:25px;
	  text-align:center;
	  font-size:0;
	}
	.m-nav__btn__item{
	  display:inline-block;
	  vertical-align:top;
	  margin-left:10px;
	  margin-right:10px;
	}
	.m-nav__btn__item a{
	  -webkit-transition:0.3s;
			  transition:0.3s;
	  display:block;
	  width:40px;
	  height:40px;
	  text-indent:-9998em;
	  background-image:url("../img/nav_infoicon.png");
	  background-color:#FF9326;
	  border-radius:50%;
	}
	.m-nav__btn__item a:hover{
		opacity:0.8;
	}
	.m-nav__btn__item--contact a{
	  background-position:-40px 0;
	}
	.nav_close{
	  -webkit-transition:0.3s;
			  transition:0.3s;
	  position:absolute;
	  right:20px;
	  top:30px;
	  width:40px;
	  height:40px;
	  background-position:50%;
	  background-repeat:no-repeat;
	  background-image:url("../img/nav_close.png");
	  text-indent:-9998em;
	  border-radius:50%;
	}
	.nav_close:hover{
	  background:#258FB5 url("../img/nav_close.png");
	}
}

/************************
	Side
************************/
#side dl{
	margin:0 10px 10px;
}
#side dt{
	text-align:left;
	font-weight:bold;
	border-bottom:1px solid #F60;
	padding:5px 0;
	color:#F60;
}
#side dd{
	text-align:left;
	padding:5px 10px;
}
#side .sbtn input{
	width:60%;
	margin:10px auto;
	display:block;
	-webkit-appearance: none;
	font-size:1em;
	text-align:center;
	padding:8px 5px;
	background:#FFCB33;
	color:#4A1505;
	display:block;
	border:1px solid #8C6900;
	border-radius:8px;
	font-weight:bold;
	box-shadow:2px 2px 2px 2px #CCC;
}
#side ul{
	margin-top:20px;
}
@media (max-width:768px){
	#side ul{
		margin-right:2%;
		margin-left:2%;
	}
	#side ul li{
		padding-bottom:10px;
	}
}

/************************
	Footer
************************/
#foot{
	background:#664C00;
}
#foot dl dt{
	float:right;
	width:25%;
	text-align:left;
	padding-top:20px;
}
#foot dl dt a{
	text-indent:-9999em;
	display:block;
	background:url("../img/logo_ft.png") no-repeat center center;
	background-size:190px 86px;
	width:190px;
	height:86px;
}
#foot dl dd{
	float:left;
	width:70%;
	padding:40px 0 20px;
	text-align:left;
}
#foot dl dd p{
	display:inline;
}
#foot dl dt,
#foot dl dd p a{
	color:#FFF;
}
#foot dl dd p a{
	font-size:0.875em;
	padding:0 5px;
}
#foot address{
	display:block;
	padding-bottom:20px;
	color:#FFF;
	font-style:normal;
	font-size:0.75em;
	text-align:center;
}
@media (max-width:768px){
	#foot dl dt{
		float:none;
		width:100%;
		text-align:center;
		font-family:"Arial Black", Gadget, sans-serif;
		font-size:1.25em;
		padding:20px 0;
	}
	#foot dl dd{
		float:none;
		width:100%;
		padding:10px;
		text-align:left;
	}
}

/************************
	Dog List
************************/

.front .content1,
.detail .relation{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.front .content1 dl,
.relation dl{
	float:left;
	width:22%;
	display:inline;
	margin-left:2.4%;
	margin-bottom:20px;
	padding:5px;
	border:1px solid #CFCFCF;
	border-radius:5px;
	box-shadow:0 1px 1px #DDD;
	box-sizing:border-box;
}
.front .content1 dt a,
.relation dt a{
	display:block;
	width:100%;
	overflow:hidden;
	position:relative;
}
.front .content1 dt a span,
.relation dt a span{
	position:absolute;
	top:2px;
	left:2px;
	font-size:0.75em;
	display:block;
	width:6em;
	background:#F00;
	color:#FFF;
	text-align:center;
}
.front .content1 dt img,
.relation dt img{
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
}
.front .content1 dt img:hover,
.relation dt img:hover{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
.front .content1 dd,
.relation dd{
	padding-bottom:10px;
	font-size:0.875em;
	text-align:center;
}
.front .content1 dd span,
.relation dd span{
	color:#F30;
}
.front .content1 dd strong,
.relation dd strong{
	color:#C00;
}
.front .family dt img:hover{
    -webkit-transform:none !important;
    -moz-transform:none !important;
    -o-transform:none !important;
    -ms-transform:none !important;
    transform:none !important;
}
.front .family dt span{
	display:block;
	text-align:center;
	color:#F60;
}
.front .family .pagelist{
	display:block;
	box-sizing:border-box;
	width:100%;
	border:none;
	box-shadow:none;
	margin-left:0;
	margin-bottom:10px;
}
.front .family .pagelist dd span,
.front .family .pagelist dd a{
	display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    border: 1px solid #CCC;
    background: #FFF;
    box-sizing: border-box;
    text-decoration: none;
}
.front .family .pagelist dd span.current{
    background: #EEE;
}
.front .family .searchlist{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

@media (max-width:768px){
	.front .content1 dl,
	.relation dl{
		float:left;
		width:47%;
		display:inline;
		margin-left:2%;
	}
}

/* ---------------------------------------------
	Detail Base
--------------------------------------------- */
.detail #contents{
	width:100%;
	float:none;
}
.detail #contents h4{
	text-align:left;
	border-left:5px solid #8C4600;
	border-bottom:1px solid #8C4600;
}
.detail .detailgraph{
	width:100%;
	box-sizing:border-box;
	border-collapse:collapse;
	border-top:1px dotted #CCC;
}
.detail .detailgraph th,
.detail .detailgraph td{
	padding:10px;
	box-sizing:border-box;
	border-bottom:1px dotted #CCC;
}
.detail .detailgraph th{
	width:10em;
	text-align:center;
	background:#FFEFBF;
}
.detail .detailgraph td img{
	width:auto;
	max-width:90%;
	display:block;
	margin-top:10px;
	height:auto;
}
.detail .detailgraph td select{
	height:24px;
	box-sizing:border-box;
}
.detail .detailgraph td li{
	list-style:disc inside;
}
.detail .inlineC input{
	display:block;
	width:60%;
	margin:20px auto;
	height:60px;
	border:4px solid #DEA303;
	border-radius:5px;
	-webkit-appearance: none;
	box-shadow:2px 2px 2px 2px #CCC;
	padding:0 10px;
	font-size:1.125em;
	color:#000;
	font-weight:bold;
	background:#F9C843;
	background: -webkit-gradient(linear,left top,left bottom,from(#FCE198),to(#F9C843));
	background : -webkit-linear-gradient(top, #FCE198, #F9C843);
	background : linear-gradient(to bottom, #FCE198, #F9C843);
}
.detail .btn2{
	padding:20px 0;
}
.detail .btn2 input{
	width:44% !important;
	margin:0 0 0 4% !important;
	float:left;
}

@media (max-width:768px){
	.detail .detailgraph{
		border:none;
	}
	.detail .detailgraph th,
	.detail .detailgraph td{
		padding:10px;
		box-sizing:border-box;
		border:none;
		display:block;
		width:100%;
	}
	.detail .inlineC input{
		width:90%;
		padding:0;
		font-size:1em;
	}
}

/* ---------------------------------------------
	Dog Detail
--------------------------------------------- */

.detail .detailimage{
	margin-top:20px;
	border:2px solid #300;
	padding:8px;
}
.detail .detailimage dt{
	float:left;
	width:79.5%;
}
.detail .detailimage dd{
	float:right;
	width:18%;
}
.detail .detailimage dd span{
	display:block;
	width:100%;
	border:1px solid #FFF;
	box-sizing:border-box;
	height:120px;
	overflow:hidden;
	font-size:0;
	text-align:center;
	margin-bottom:15px;
}
.detail p.clear{
	padding:10px;
}
.detail p.clear:before{
	content:url("../img/zoom.png");
	vertical-align:middle;
	margin-right:5px;
}
.detail .dogimage{
	max-width:50%;
	margin:0 auto 20px;
}
@media (max-width:768px){
	.detail .detailimage dt,
	.detail .detailimage dd{
		float:none;
		width:100%;
		box-sizing:border-box;
	}
	.detail .detailimage dd span{
		display:inline;
		width:25%;
		float:left;
		margin:0;
	}
}

/* ---------------------------------------------
	Contact
--------------------------------------------- */
.detail .contact th{
	width:14em;
	text-align:center;
	background:#ECE9E3;
	text-align:left;
}
.detail .detailgraph th span{
	float:right;
	color:#F00;
}
.detail .detailgraph td p.error{
	color:#F00;
	font-size:0.875em;
	padding-top:5px;
}
.detail .detailgraph td input[type="text"]{
	width:60%;
/*	font-size:1.125em;*/
	height:24px;
	box-sizing:border-box;
}
.detail .detailgraph td.short input{
	width:36%;
}
.detail .detailgraph td textarea{
	width:90%;
	min-height:160px;
}
.detail .rulecheck{
	text-align:center;
	padding:10px 0; 0
}

/* ---------------------------------------------
	Shop
--------------------------------------------- */
.detail .sitemap ul{
	width:45%;
}
.detail .sitemap ul.lt{
	float:left;
}
.detail .sitemap ul.rt{
	float:right;
}
.detail .sitemap ul li{
	padding:20px 0 0;
}
.detail .sitemap ul li a{
	display:block;
	background:#ECE9E3 url("../img/arrow.png") no-repeat right center;
	padding:8px;
	text-decoration:none;
	box-sizing:border-box;
	color:#000;
}
.detail .sitemap ul li a:hover{
	background:#CCC url("../img/arrow.png") no-repeat right center;
}
@media (max-width:768px){
	.detail .sitemap ul{
		float:none !important;
		display:block;
		width:96%;
		margin:0 auto !important;
	}	
}

/* ---------------------------------------------
	Shop
--------------------------------------------- */
.detail .shopinfo{
	width:100%;
	box-sizing:border-box;
	border-collapse:collapse;
	border-top:1px dotted #CCC;
}
.detail .shopinfo th,
.detail .shopinfo td{
	padding:10px;
	box-sizing:border-box;
	border-bottom:1px dotted #CCC;
}
.detail .shopinfo th{
	width:10em;
	text-align:center;
	background:#FFEFBF;
}
.detail .shopinfo td #map{
	width:100%;
	height:400px;
}
.detail .shopinfo td li{
	list-style:disc inside;
}

@media (max-width:768px){
	.detail .shopinfo{
		border:none;
	}
	.detail .shopinfo th,
	.detail .shopinfo td{
		padding:10px;
		box-sizing:border-box;
		border:none;
		display:block;
		width:100%;
	}
}

/* ---------------------------------------------
	Search
--------------------------------------------- */
.search .content1 .pagelist dt{
	padding:5px;
}
.search .content1 .pagelist dd{
	text-align:center;
}
.search .content1 .pagelist dd span,
.search .content1 .pagelist dd a{
	display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    border: 1px solid #CCC;
    background: #FFF;
    box-sizing: border-box;
    text-decoration: none;
}
.search .content1 .pagelist dd span.current{
    background: #EEE;
}
.search .content1 .searchlist dl{
	border:1px solid #CCC;
	margin-top:20px;
}
.search .content1 .searchlist dt{
	width:30%;
	padding:10px;
	float:left;
	box-sizing:border-box;
}
.search .content1 .searchlist dt a{
	display:block;
	position:relative;
}
.search .content1 .searchlist dt a span{
	position:absolute;
	top:2px;
	left:2px;
	font-size:0.75em;
	display:block;
	width:6em;
	background:#F00;
	color:#FFF;
	text-align:center;
}
.search .content1 .searchlist dd{
	width:68%;
	float:right;
	padding:10px;
	box-sizing:border-box;
}
.search .content1 .searchlist dd a.inlineC{
	display:block;
	margin-top:10px;
	width:8em;
	margin-left:auto;
	text-decoration:none;
	background:#FFFAE8;
	padding:5px 10px;
	color:#845A33;
	border:2px solid #FFCB33;
	border-radius:2px;
}
.search .content1 .searchlist dd a.inlineC:hover{
	color:#F30;
}
.search .content1 .searchlist dd strong{
	color:#C00;
	font-size:1.125em;
}
.search .content1 .searchlist dd span{
	color:#F30;
	font-size:1.125em;
}
.search .content1 .searchlist .nodata{
	padding:20px 0;
	color:#000;
	font-weight:bold;
	text-align:center;
}

/* ---------------------------------------------
	Policy
--------------------------------------------- */
.policy p{
	padding:10px 0;
}
.policy dt{
	font-weight:bold;
}
.policy dd{
	padding:0.25em 1em 1em 1em;
}

/* ---------------------------------------------
	Company
--------------------------------------------- */
.company p{
	padding:10px 0;
}
.company dt{
	font-weight:bold;
}
.company dd{
	padding:0.25em 1em 1em 1em;
}
.company .shopinfo th{
	width:auto;
	white-space:nowrap;
	text-align:left;
	background:#DDD;
}

/* ---------------------------------------------
	Step
--------------------------------------------- */
.step .content1{
	padding:20px 0 0;
}
.step dl{
	background:#DFC48A;
	border-radius:4px;
	margin-bottom:20px;
	padding:10px;
	position:relative;
}
.step dl:after{
	content:"";
	display:block;
	border:10px solid transparent;
	border-top-color:#DFC48A;
	border-bottom-width:0;
	position:absolute;
	width: 0px;
	height: 0px;
	bottom:-10px;
	left:50%;
	margin-left:-10px;
}
.step dl.last:after{
	display:none;
	border:none;
}
.step dt,
.step dd{
	padding:10px 20px;
	background:#FFF;
}
.step dd{
	padding-top:0;
}
.step dt{
	color:#F30;
	font-size:1.5em;
}

/* ---------------------------------------------
	Modal
--------------------------------------------- */
#head ul.clearfix li a{
	cursor:pointer;
}
#modal-content,
#modal-content2,
#modal-content3{
	width:80%;
	margin:0;
	padding:20px;
	background:#FFF;
	position:fixed;
	display:none;
	z-index:2;
}
#modal-overlay,
#modal-overlay2,
#modal-overlay3{
	z-index:1;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:120%;
	background:rgba( 0,0,0, 0.75 );
}
.modal-panel h4{
	color:#845B33;
	font-size:1.5em;
	border-bottom:1px solid #664C00;
}
.modal-panel dt{
	margin:20px 0 10px;
	border:1px solid #845B33;
	border-left-width:5px;
	background:#FFFAE8;
	padding:5px 10px;
	color:#845A33;
	text-align:left;
}
.modal-panel ul{
	padding:10px 0;
}
.modal-panel dd,
.modal-panel li{
	padding:10px 0;
	text-align:left;
}
.modal-panel dd label,
.modal-panel li label{
	background:#F0E3D2;
	border:1px solid #E6D0B3;
	padding:10px 10px 10px 0;
	margin-left:5px;
}
.modal-panel li label{
	padding:10px;
}
.modal-panel dd a{
	padding:0 10px;
}
.modal-panel table{
	width:100%;
	box-sizing:border-box;
}
.modal-panel th,
.modal-panel td{
	padding:10px;
	text-align:left;
	border-bottom:1px dotted #BCB08F;
}
.modal-panel th{
	color:#845B33;
}
.modal-panel p.inlineC{
	padding:20px 0;
}
.modal-panel p.inlineC input{
	width:60%;
	margin:10px auto;
	display:block;
	-webkit-appearance: none;
	font-size:1.125em;
	text-align:center;
	padding:10px 5px;
	background:#FFCB33;
	color:#4A1505;
	display:block;
	border:1px solid #8C6900;
	border-radius:8px;
	font-weight:bold;
	box-shadow:2px 2px 2px 2px #CCC;
}
.modal-panel dd input[type="checkbox"]{
	margin-right:5px;
	margin-left:10px;
}
.modal-panel dt input[type="checkbox"]{
	margin-right:5px;
}
.button-link{
	position:fixed;
	top:20px;
	right:20px;
	width:20px;
	height:20px;
	background:url("../img/close.png");
	text-indent:-9999em;
}
.button-link:hover{
	cursor:pointer;
	color:#f00;
}

/* ---------------------------------------------
	Pagetop
--------------------------------------------- */
body{
	position:relative;
}
#page-top{
	position:fixed;
	bottom:10px;
	right:20px;
}
#page-top a{
	width:56px;
	height:56px;
	display:block;
	text-indent:-9999px;
	overflow:hidden;
	background:url("../img/page-top.png") no-repeat left top;
	background-size:56px 56px;
}

@media (max-width:768px){
	#page-top{
		opacity:0.7;
		bottom:10px;
	}
}