/**********************************************************************/
/* base.css */
/**********************************************************************/


/**********************************************************************/
/* BASE */
/**********************************************************************/


/* SmartPhone setup -------------------------------------- */
html{-webkit-text-size-adjust: none;}
img,
video { max-width :100%; } 


/* BaseLayout -------------------------------------- */
body {
color: #333;
overflow-x:hidden;
overflow-y:auto;
background-color:#fff;
}

#container {
margin: 0 auto;
padding: 0;
}

.col-fluid{
margin: 0 auto;
padding: 0;
clear:both;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap:nowrap;
flex-wrap: wrap;
}

.col,
.col-item{
margin: 0 auto;
padding: 0;
clear:both;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap:nowrap;
flex-wrap: wrap;
}

.col{
width: 62.5rem;/* 1000px */
}

.col-item{
width: 50rem;/* 800px */
}

.clearfix:after {
content: "";
display: block;
clear: both;
}


/**********************************************************************/
/* CONTENTS */
/**********************************************************************/

/* Header ------------------------------------------------ */
#header {
padding: 3em 0 0 0;
}

#header-left {
float: left;
margin:0;
padding: 0 1em 0 1em;
width: 50%;
text-align: right;
line-height: 1;
}

#header-left img {
width: 158px;
}

#header-right {
float: right;
margin:0;
padding: 0 1em 0 1em;
text-align:left;
width: 50%;
}

#header-right img {
width: 265px;
}

.logo-catch {
text-align: right;
}

.tel-sp {
display: none;
}


/* gnav  ------------------------------------- */
#gnav {
text-align: center;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgb(255,255,255) 45%, rgb(255,250,249) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgb(255,255,255) 45%,rgb(255,250,249) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgb(255,255,255) 45%,rgb(255,250,249) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fffaf9',GradientType=0 ); /* IE6-9 */
border-bottom: 1px solid #c1593b;
}

#gnav-inner {
display: table;
margin: 0px auto;
padding: 2em 0 0.5em 0;
width: 75rem;/* 1200px */
font-size: 15px;
}

#gnav-inner ul li {
display: inline-block;
background-position: top center,right bottom;
background-repeat: no-repeat;
background-size: 18px,1px;
margin: 0 0 0 0;
padding:2em 1em 0 1em;
line-height: 1;
width:12.5%;
}

#gnav-inner ul li:nth-child(1) {
background-image:url(../img/svg/home.svg), url(../img/common/bg-gnav-right.png);
}

#gnav-inner ul li:nth-child(2) {
background-image:url(../img/svg/shop.svg), url(../img/common/bg-gnav-right.png);
}

#gnav-inner ul li:nth-child(3) {
background-image:url(../img/svg/altar.svg), url(../img/common/bg-gnav-right.png);
}

#gnav-inner ul li:nth-child(4) {
background-image:url(../img/svg/tomb.svg), url(../img/common/bg-gnav-right.png);
}

#gnav-inner ul li:nth-child(5) {
background-image:url(../img/svg/rosary.svg), url(../img/common/bg-gnav-right.png);
}

#gnav-inner ul li:nth-child(6) {
background-image:url(../img/svg/pet.svg), url(../img/common/bg-gnav-right.png);
}

#gnav-inner ul li:nth-child(7) {
background-image:url(../img/svg/cleaning.svg), url(../img/common/bg-gnav-right.png);
}

#gnav-inner ul li:nth-child(8) {
background-image:url(../img/svg/ec.svg);
}

#gnav-sp{
display: none;
}

/* Main -- 1 column  --------------------------------- */
.one-col-01 {
width: 100%;
}

/* Main -- 2 column  --------------------------------- */
.two-col-01 {
float: left;
width: 50%;
margin:0;
padding:0 1em 0 0;
}

.two-col-02 {
float: right;
width: 50%;
margin:0;
padding:0 0 0 1em;
}

/* Main -- 3 column  --------------------------------- */
.three-col-01 {
float: left;
width: 33.3%;
padding: 0 0 0 1em;
margin: 0 0.5em 0 -1em;
}

.three-col-02 {
float: left;
width: 33.3%;
padding: 0 0 0 1em;
margin: 0 0.5em 0 0;
}

.three-col-03 {
float: right;
width: 33.4%;
padding:0 0 0 1em;
}


/* Main -- 4 column  --------------------------------- */
.four-col-01 {
float: left;
width: 25%;
padding: 0 0 0 1em;
margin: 0 0.33em 0 -1em;
}

.four-col-02 {
float: left;
width: 25%;
padding: 0 0 0 1em;
margin: 0 0.33em 0 0;

}

.four-col-03 {
float: left;
width: 25%;
padding: 0 0 0 1em;
margin: 0 0.33em 0 0;

}

.four-col-04 {
float: right;
width: 25%;
padding: 0 0 0 1em;
}


/* Main -- COMMON STYLE  ----------------------------- */
h1 {
margin:0 0 0 0;
padding:0 0 0 0;
}

h2 {
margin:0 0 0.5em 0;
padding:0 0 0 0;
display: block;
text-align: center;
background-image: url(../img/common/h2-bg.png);
background-repeat:repeat-x;
background-position: bottom;
background-size: 5%;
line-height: 3;
}

h3 {
margin:0 0 0.5em 0;
padding: 0.8em 0.5em 0.5em 0.5em;
background-color: #ffeae6;
font-weight: normal;
}

h4{
margin:0 0 0 0;
padding:0 0 0 0.5em;
border-left: 0.5em solid #ff988d;
font-weight: normal;
font-size: 110%;
line-height: 1;
}

article {
margin: 0 0 0 0;
padding: 0 0 0 0;
clear:both;
}

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

.pb01 {
padding-bottom: 1em;
}

.pb02 {
padding-bottom: 2em;
}

.pb03 {
padding-bottom: 3em;
}

.mb01 {
margin-bottom: 1em;
}

.mb02 {
margin-bottom: 2em;
}

.mb03 {
margin-bottom: 3em;
}

/* footer ---------------------------------------- */
footer {
}

#totop {
text-align:right;
}

#totop:hover {
opacity: 0.8;
}

#copyright {
display: block;
text-align: center;
font-size: 80%;
}


/* footer-nav -- 4 column  ----------------------- */
#footer-nav {
background: rgb(255,235,231); /* Old browsers */
background: -moz-linear-gradient(top,  rgb(255,235,231) 0%, rgb(255,255,255) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgb(255,235,231) 0%,rgb(255,255,255) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgb(255,235,231) 0%,rgb(255,255,255) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffebe7', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
padding: 2em 0 0 0;
}

#footer-nav ul li {
background-image: url(../img/svg/arrow.svg);
background-repeat: no-repeat;
background-position: 0 9px;
background-size: 7%;
padding: 0 0 0 1em;
}
.footer-nav-01 {
float: left;
width: 25%;
padding:0 1em 0 0;
}

.footer-nav-02 {
float: left;
width: 25%;
padding:0 1em 0 1em;
}

.footer-nav-03 {
float: left;
width: 20%;
padding:0 1em 0 1em;
line-height: 1;
}

.footer-nav-04 {
float: right;
width: 30%;
padding:0 0 0 1em;
color: #ff2700;
text-align: right;
}

span.footer-address {
color: #333;
font-size: 80%;
}

/* footer: Always bottom of browser --------------------- */
html,body {
height: 100%;
}

#container {
min-height: 100%;
}

#main {
padding-bottom: 315px!important;
}

footer {
height: 315px;
margin-top:-315px;
}


/**********************************************************************/
/* LINK */
/**********************************************************************/

/* Link - main,index-bt --------------------------------------------- */
a {
text-decoration:underline;
}

.index-li-bt a {
text-decoration:none;
font-weight: bold;
}

a:link,
.index-li-bt a:link {
color: #ae2700;
}

a:visited,
.index-li-bt a:visited {
color:#ae2700;
}

a:hover,
.index-li-bt a:hover {
color:#ff4925;
}

a:active,
.index-li-bt a:active {
color:#ae2700;
}

/* Link - gnav,gnav-sp,footer ------------------------------------------ */
#gnav a,
#gnav-sp a,
footer a {
text-decoration:none;
}

#gnav a:link,
#gnav-sp a:link,
footer a:link {
color: #333;
}

#gnav a:visited,
#gnav-sp a:visited,
footer a:visited {
color:#333;
}

#gnav a:hover,
#gnav-sp a:hover,
footer a:hover {
color:#ff4925;
}

#gnav a:active,
#gnav-sp a:active,
footer a:active {
color:#333;
}

#gnav a {
font-weight: bold;
}


/* Link - SP-list ------------------------------------------------ */
#gnav-sp ul li a {
text-decoration:none;
}


/**********************************************************************/
/* max-width : 1200px ***** FOR TL or PC */
/**********************************************************************/
@media screen and (max-width : 1200px){
#header {
border-bottom: 1px solid #c1593b;
padding: 3em 0 1em 0;
}

.col,
.col-item {
width: 96%;
}

/* gnav  ------------------------------------- */
#gnav{
display: none;
}

#gnav-sp{
display: inline;
}

#menu{
display: none;
position: fixed;
top: 0px;
width: 100%;
z-index: 1000;
}

#gnav-sp ul {
margin: 0 0 0 0;
padding:2em 0 2em 0;
background-color: #f7f7f7;
}

#gnav-sp ul li {
display: block;
margin: 0 1em 0 1em;
padding:1.2em 1.2em 0.8em 1.6em;
border-bottom: 1px dotted #6b3800;
width: 90%;
background-image:url(../img/svg/arrow.svg);
background-repeat: no-repeat;
background-position: 0px 1.6em;
background-size: 18px;
}

#gnav-sp ul li:last-child {
border-bottom: none;
}

#gnav-sp ul li a {
display: inline-block;
width: 100%;
}

#gnav-sp ul li:nth-child(1) {
background-image:url(../img/svg/home.svg);
}

#gnav-sp ul li:nth-child(2) {
background-image:url(../img/svg/shop.svg);
}

#gnav-sp ul li:nth-child(3) {
background-image:url(../img/svg/altar.svg);
}

#gnav-sp ul li:nth-child(4) {
background-image:url(../img/svg/tomb.svg);
}

#gnav-sp ul li:nth-child(5) {
background-image:url(../img/svg/rosary.svg);
}

#gnav-sp ul li:nth-child(6) {
background-image:url(../img/svg/pet.svg);
}

#gnav-sp ul li:nth-child(7) {
background-image:url(../img/svg/cleaning.svg);
}

#gnav-sp ul li:nth-child(8) {
background-image:url(../img/svg/ec.svg);
}
}

/**********************************************************************/
/* max-width : 767px ***** FOR SP */
/**********************************************************************/
@media screen and (max-width : 767px){
/* Header ------------------------------------------------ */
#header {
border-bottom: 1px solid #c1593b;
padding: 1em 0 1em 0;
}

#header-left {
padding:0 1em 0 0;
text-align:left;
width:40%;
}

#header-right {
padding:0 0 0 0;
width:60%;
}

#header-left img {
width:100%;
}

#header-right img {
width:80%;
}

.logo-catch {
display: none;
}

.col,
.col-item {
width: 90%;
}

h2 {
background-size: 10%;
}


.two-col-01,
.three-col-01,
.three-col-02,
.footer-nav-01,
.footer-nav-02 {
float: left;
width: 100%;
padding: 0 0 1em 0;
margin: 0;
}

.two-col-02,
.three-col-03,
.footer-nav-03,
.footer-nav-04 {
float: left;
width: 100%;
padding: 0;
margin: 0;
}

.four-col-01 {
float: left;
width: 50%;
margin:0;
padding:0 1em 1em 0;
}

.four-col-02 {
float: left;
width: 50%;
margin:0;
padding:0 0 1em 1em;
}

.four-col-03 {
float: left;
width: 50%;
margin:0;
padding:0 1em 0 0;
}

.four-col-04 {
float: left;
width: 50%;
margin:0;
padding:0 0 0 1em;
}

.footer-nav-01,
.footer-nav-02 {
display: none;
}

.footer-nav-03 img {
width: 40%;
}

.footer-nav-04 img {
padding: 1em 0 0 0;
width: 100%;
}


#footer-nav ul {
margin:0 0 1em 0;
}

#footer-nav ul li {
padding:0px 0px 0px 0px;
}

#footer-nav ul li a {
line-height: 4;
display: block;
width: 100%;
border-bottom: 1px solid #9F9F9F;
}

#totop {
display: none;
}
}

/**********************************************************************/
/* max-width : 480px */
/**********************************************************************/
@media screen and (max-width : 480px){
	
h2 {
background-size: 20%;
}

.four-col-01,
.four-col-02,
.four-col-03 {
float: left;
width: 100%;
padding: 0 0 1em 0;
margin: 0;
}

.four-col-04 {
float: left;
width: 100%;
padding: 0 0 0 0;
margin: 0;
}

#header-left {
width: 50%;
}

#header-right {
width: 50%;
}

#header-right img {
width: 20%;
}

.tel {
display: none;
}

.tel-sp {
display: inherit;
}
}