@charset "UTF-8";

/* CSS Document */

/* --------------
MODULE IMPORT
-------------- */

@import "navigation.css?20180330";
@import "right_navigation.css";

/* ----------------------------------------------------------------------------------
common
---------------------------------------------------------------------------------- */

* {
  margin: 0px;
  padding: 0px;
}

body {
	background: #fff url(../img/bg.gif) repeat-x left top;
	margin : 0;
	padding : 0;
	text-align : center;
	-webkit-text-size-adjust: 100%;
}

a:link { color: #006A65; text-decoration: none; }
a:visited { color: #006A65; text-decoration: none; }
a:hover { color: #96C215; text-decoration: underline; }
a:active { color: #006A65; }

img { border: 0px; }

li {
	list-style-type: none;
	display: block;
	margin: 0;
    padding: 0;
    list-style-position: outside;
}

body,td,div,li,dd,dt,dd	{
    font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #505050;
    line-height: 18px;
	font-size: 12px;
}

p {
	padding: 18px 1.1em;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.metacoGreen {
    color: #006A65;
}

.fs11 { font-size: 11px !important; }
.fs14 { font-size: 14px !important; }
.fs16 { font-size: 16px !important; }
.fs18 { font-size: 18px !important; }

.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }

/* ----------------------------------------------------------------------------------
header
---------------------------------------------------------------------------------- */

#header {
    position: relative;
	background: url(../img/navi_bg.jpg) no-repeat bottom;
 	width : 980px;
	height: 146px;
    margin: 0px auto;
    padding: 0px;
}

#logo {
    position: absolute;
    left: 0px;
    top: 13px;
}

#seoArea {
	width: 980px;
	text-align: left;
	color: #006A65;
	font-size: 11px;
	margin: 5px auto;
	padding: 0px;
	line-height: 100%;
}

#pankuzuArea {
	width: 980px;
	text-align: left;
	font-size: 11px;
	margin: 5px auto;
	padding: 0px;
	line-height: 100%;
}

/* ----------------------------------------------------------------------------------
slider
---------------------------------------------------------------------------------- */
.main-wrap {
    background: url(../img/dotted_bg.gif) repeat left top;
    border-top: 2px solid #006A65;
    border-bottom: 2px solid #006A65;
}
#mainImgArea {
	width: 100%;
	margin: 0px auto;
	padding: 1px 0px;
	border-top: 1px solid #006A65;
	border-bottom: 1px solid #006A65;
}

.fs_slide img {
	width:980px;
	display:block;
}

.slider {
    height: 350px; 
}

.fs_next {
	position: absolute; 
	display: block;
	background: url(../../img/index/next.png) no-repeat;
	width: 12px;
	height: 23px;
	font-size: 1px;
	top: 164px;
	right: 20px;
	z-index: 5; 
}
 
.fs_prev {
    position: absolute; 
	display: block;
	background: url(../../img/index/prev.png) no-repeat;
	width: 12px;
	height: 23px;
	font-size: 1px;
	top: 164px;
	left: 20px;
	z-index: 5; 
}

/* ----------------------------------------------------------------------------------
contents
---------------------------------------------------------------------------------- */

#titleArea {
	background: url(../img/dotted_bg.gif) repeat left top;
	width: 100%;
	text-align: center;
	margin: 0px auto;
	padding: 1px 0px;
	border-top: 1px solid #006A65;
	border-bottom: 1px solid #006A65;
}

#wrapperAll {
 	background: url(../img/body_bg.jpg) repeat-x left top;
	width: 100%;
	margin: 0px auto;
    padding: 0px;
}

#wrapper {
	overflow: hidden;
	background-color: #fff;
 	width: 940px;
	text-align: left;
	margin: 0px auto;
    padding: 18px 20px 0px 20px;
}

#mainTxt {
	overflow: hidden;
	font-size: 14px;
	font-weight: normal;
	margin: 0px auto;
	margin-bottom: 15px !important;
	padding: 0px;
	line-height : 150%;
	text-align: justify;
	text-justify: distribute;
}

#indexLeftArea {
    float: left;
    width: 685px;
    margin: 0px;
    padding: 0px;
}

#leftArea {
    float: left;
    width: 720px;
    margin: 0px;
    padding: 0px;
}

.indexPhotoR {
	float: right;
	margin: 0px 0px 0px 20px;
}

#info {
	clear: both;
	margin-bottom: 14px;	
}

.info dl {
	margin: 0px;
	padding: 0px;
	text-align: left;
}

.info dt {
	clear: left;
    float: left;
	font-size: 11px;
	font-weight: bold;
    padding: 9px 0px 9px 0.1em;
}

.info dd {
	font-size: 11px;
	margin-left: 0;
    padding: 9px 0.5em 9px 14em;
	border-bottom: 1px dotted #ccc;
}

.infoCon dl {
	margin: 0px;
	padding: 0px;
	text-align: left;
}

.infoCon dt {
	clear: left;
    float: left;
	font-weight: bold;
    padding: 9px 0px 9px 0.1em;
}

.infoCon dd {
	margin-left: 0;
    padding: 9px 0.5em 9px 14em;
	border-bottom: 1px dotted #ccc;
}

.infoConPhoto {
    overflow: hidden;
    margin: 0px auto;
	padding: 0px;
}

.red {
	color: #C00;
}

.redS {
	font-size: 11px;
	color: #C00;
}

.backnumber {
    text-align: right;
	font-size: 11px;
	margin: 9px 0px;
	padding: 0px 0.1em 0px 0px;
}

#indexRightArea {
    float: right;
    width: 237px;
    margin: 0px 0px 10px 0px;
    padding: 0px;
}

#rightArea {
    float: right;
    width: 200px;
    margin: 0px;
    padding: 0px;
}

.banner {
	margin: 0px 0px 7px 0px;
	padding: 0px;
}

.banner2 {
	margin: 7px 0px 0px 0px;
	padding: 0px;
}

.linksMark {
	background: url(../img/link_mark.png) no-repeat left;
	background-position: 0px 0.45em;
	padding-left: 9px;
}

#pageTopArea {
    clear: both;
    text-align: right;
	margin: 0px auto;
	padding: 10px 0px 0px 0px;
}

#pageTopAreaContents {
    clear: both;
	width: 980px;
    text-align: right;
	margin: 0px auto;
	padding: 40px 0px 0px 0px;
}

.imgR {
	float: right;
	margin: 0px 0px 20px 20px;
}

.imgR2 {
	float: right;
	margin: 0px 0px 20px 10px;
}

.imgR3 {
	float: right;
	margin: 0px 0px 0px 20px;
}

.imgR250 {
	float: right;
	font-size: 11px;
	width: 250px;
	margin: 0px 0px 20px 20px;
	padding: 0px;
	line-height: 22px;
}

.imgL {
	float: left;
	margin: 0px 20px 20px 0px;
}

.txtRightArea {
	text-align: right;
	margin: 0px auto;
	padding: 0px;
}

.smallTxt {
	font-size: 11px;
	line-height: 150%;
}

.subTitle {
	clear: both;
	font-size: 13px;
	color: #006A65;
	margin: 0px auto;
	padding: 8px 0px;
	border-top: solid 3px #006A65;	
	border-bottom: dotted 1px #ccc;
	line-height: 100%;
}

#pdfArea {
    clear: both;
    font-size: 11px;
	margin-top: 25px;
    padding-top: 15px;
    border-top: 1px dotted #ccc;
}

#pdfArea2 {
    clear: both;
    font-size: 11px;
	margin: 0px auto;
    padding-top: 15px;
    border-top: 1px dotted #ccc;
}

.pdf {
	background: url(../img/pdf.png) no-repeat;
	padding-left: 22px;
}

.headMach dl {
	margin: 0px;
	padding: 0px;
	text-align: left;
}

.headMach dt {
	clear: left;
    float: left;
    padding: 0px;
}

.headMach dd {
	margin-left: 0;
    padding: 0px 0px 0px 2em;
}

.headMach2 dl {
	margin: 0px;
	padding: 0px;
	text-align: left;
}

.headMach2 dt {
	clear: left;
    float: left;
    padding: 0px;
}

.headMach2 dd {
	margin-left: 0;
    padding: 0px 0px 0px 1.3em;
}

.headMach3 dl {
	margin: 0px;
	padding: 0px;
	text-align: left;
}

.headMach3 dt {
	clear: left;
    float: left;
    padding: 0px 0px 0px 1.1em;
}

.headMach3 dd {
	margin-left: 0;
    padding: 0px 0px 0px 2.3em;
}

.headMachS dl {
	margin: 0px;
	padding: 0px;
	text-align: left;
}

.headMachS dt {
	clear: left;
    float: left;
	font-size: 11px;
    padding: 0px;
}

.headMachS dd {
	font-size: 11px;
	margin-left: 0;
    padding: 0px 0px 0px 1.3em;
}

.infoCon dl {
	margin: 0px;
	padding: 0px;
	text-align: left;
}

.infoCon dt {
	clear: left;
    float: left;
	font-weight: bold;
    padding: 9px 0px 9px 0.5em;
}

.infoCon dd {
	margin-left: 0;
    padding: 9px 0px 9px 14em;
	border-bottom: 1px dotted #ccc;
}

.metacoGreenLarge {
	font-size: 14px;
	color: #006A65;
	border-bottom: 2px solid #006A65;
}

.metacoGreenLarge2 {
	font-size: 16px;
	color: #006A65;
}

.metacoGreenLarge3 {
	font-size: 13px;
	color: #006A65;
}

.imgCenterArea {
	text-align: center;
	margin: 0px auto;
	padding: 0px;
}

.clear {
	clear: both;
	margin: 10px auto;
	border-bottom: 1px dotted #ccc;
}

.clear2 {
	clear: both;
	margin: 20px auto;
	border-bottom: 1px dotted #ccc;
}

#storeCollectionButton {
	text-align: center;
	margin: 0px auto;
	padding: 10px 0px;
	border-top: 1px dotted #ccc;
	border-bottom: 1px dotted #ccc;
}

.newsPhoto {
	overflow: hidden;
	margin: 0px auto;
	padding: 0px;
}

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

#footer {
    clear: both;
	background-color: #006A65;
	width : 100%;
	margin: 0px auto;
    padding: 0px;
}

#footerArea {
 	width : 980px; 
	font-size: 11px;
	text-align: left;
	color: #fff;
	margin: 0px auto;
    padding: 20px 0px;
	line-height: 100%;
}

#footerArea a:link { color: #fff; text-decoration: none; }
#footerArea a:visited { color: #fff; text-decoration: none; }
#footerArea a:hover { color: #96C215; text-decoration: underline; }
#footerArea a:active { color: #fff; }


.linksMarkFooter {
	background: url(../img/link_mark_footer.png) no-repeat left;
	background-position: 0px 0.45em;
	padding-left: 9px;
}

.footerLinksArea {
	float: left;
	width: 175px;
	margin-right: 26px;
	padding: 0px;
}

#footerAreaBottom {
	clear: both;
	background: #333 url(../img/footer_bottom_bg.gif) repeat left top;
 	width : 100%;
	margin: 0px auto;
    padding: 0px;
}

#footerBottom {
 	width : 980px;  
	font-size: 10px;
	text-align: left;
	color: #fff;
	margin: 0px auto;
    padding: 10px 0px 15px 0px;
}

#copyrightTxt {
    font-family: Verdana, Arial, Helvetica, sans-serif;
	float: right;
	color: #fff;
	font-size: 10px;
}

#footerBottomContact {
	position: fixed;
    left: 50%;
	bottom: 0px;
    margin-left: -490px;
}

/* ----------------------------------------------------------------------------------
serach
---------------------------------------------------------------------------------- */

#srchArea {
    position: absolute;
    width: 445px;
	text-align: right;
	margin: 0px;
	padding: 0px;
	top: 60px;
	right: 0px;
}

#siteFormTxt {
    position: absolute;
    text-align: right;
    font-size: 11px;
	top: 3px;
	right: 256px;
	line-height: 14px;
}

.srch_mark {
    background: url(../img/srch_mark.png) no-repeat left;
	padding-left: 18px;
}

input#srchtxt{
    width:150px;
    height:13px;
    min-height:13px;
	margin-right:5px;
    padding:3px 5px;
    *width:150px;
    *height:13px;
    border:1px solid #c3c3c3;
    border-left-color:#7c7c7c;
    border-top-color:#7c7c7c;
    background: #fff;
}

input#srchbtn{
    width:80px;
    *height:20px;
    min-height:20px;
    padding:0px 0;
    text-align:center;
    vertical-align:top;
    cursor:pointer;
}

#siteFormArea {
    position: relative;
    background-color: #F8FFF6;
    text-align: center;
	margin: 0px auto;
    padding: 10px 0px 10px 70px;
	border: 1px dotted #ccc;
}

#siteFormTxtW {
    position: absolute;
    text-align: right; 
	line-height:120%;
    left: 280px;
    top: 14px;
	line-height: 14px;
}
#fadein{
    width: 980px;
    height: 350px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}
 
.main-wrap{
	background: url(../img/dotted_bg.gif) repeat left top;
	border-top: 2px solid #006A65;
    border-bottom: 2px solid #006A65;
}
#fadein{
	width: 980px;
    height: 350px;
/* 	background: url(/../img/movie/movie01.jpg) no-repeat left top; */
}
#fadein img {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	transition: 3s; /* フェードの時間(秒) */
}


#fadein .show {
	opacity: 1;
	z-index: 1;
}

.petFlex {
width: 100%;
margin: 8px auto;
display: flex;
justify-content: space-between;
}

.petFlex div {
width: 49%;
}

.petFlex div img {
width: 100%;
}