@charset "utf-8";
/* メインイメージ */
#main {
    background: url("../images/pic_top_01.jpg") no-repeat right center;
    background-size: cover;
    padding: 4% 0 3% 0;
	font-family: 'Noto Serif JP', serif;
	font-weight: 900;
}
.shadow_w {
    text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
}
.shadow_b {
}

.grd_yel_a,.grd_yel_b,.grd_yel_c{
  position: relative;
  text-shadow: 0px 0px 3px black, 0px 0px 3px black, 0px 0px 3px black, 0px 0px 3px black, 0px 0px 3px black, 0px 0px 3px black, 0px 0px 3px black, 0px 0px 3px black, 0px 0px 3px black, 0px 0px 3px black;
}

 .grd_yel_a::before,.grd_yel_b::before,.grd_yel_c::before{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: rgba(0,0,0,0);
    background: linear-gradient(0deg, #f3c326 1%, #ffffd7 50%, #f3c326 100%);
    -webkit-background-clip: text;
    text-shadow: none;
  }
 .grd_yel_a::before{
    content:"仏壇修理";
  }
 .grd_yel_b::before{
    content:"・クリーニング";
  }
 .grd_yel_c::before{
    content:"仏壇修理・クリーニング";
  }

.grd_red {
    background: -webkit-linear-gradient(top, #c60100, #7d0005);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.txt_3l {
    font-size: 10rem;
    line-height: 10rem;
}
#main .txt_lg {
    letter-spacing: 2px;
}
.cir_red > div {
    color: #fff;
    text-align: center;
    position: relative;
    display: inline-block;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: solid 6px #c70200;
    background: #810004;
    margin: 0 2%;
}
.cir_red > div span {
    position: absolute;
    display: inline-block;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width : 160px;
    text-align: center;
    font-size: 4rem;
    line-height: 4.6rem;
    font-weight: bold;
}
@media screen and (max-width: 768px) {
	#main .flex-container > div.w60,
	#main .flex-container > div.w40,
	#main .flex-container > div.w33,
	#main .flex-container > div.w66{
    margin: 0%;
		padding: 0;
}
	}
/* コンタクト */
#contact {
    background: url("../images/img_butudan_01.jpg") no-repeat center center;
    background-size: cover;
    color: #fff;
    padding: 5% 0 3% 0;
    text-align: center;
}
.box_link > div a {
    display: inline-block;
    border: 1px solid #9e9e9e;
    width: 100%;
    text-decoration: none;
    color: #000;
    text-align: left;
    font-weight: bold;
	background: #fff;
}
.box_link > div a .list {
    border-top: 1px solid #9e9e9e;
    background: url("../images/list_02.png") no-repeat center right 10px, -moz-linear-gradient(top, #f7f7f7 0%, #ffffff 100%);
    background: url("../images/list_02.png") no-repeat center right 10px, -webkit-linear-gradient(top, #f7f7f7 0%, #d8d8d8 100%);
    padding: 3%;
}
.box_link .line {
    background: #01b901;
    text-align: center;
    height: 70px;
    box-sizing: border-box;
    padding: 17.5px;
    display: block;
}
.box_link .tel {
    background: #fff;
    height: 70px;
    box-sizing: border-box;
    padding: 4%;
    display: block;
}
.box_link .tel .txt_lg {
    font-size: 3.0rem !important;
}
/* トップページ */
.ttl_style_a {
    background: url("../images/img_butudan_02.jpg") repeat-x top left;
    padding: 1% 0;
    border-bottom: 1px solid #9a9a9a;
}
.ttl_style_a > span {
    border-left: 3px solid #812a2a;
    padding-left: 2%;
}
.box_beige {
    background: #f7f1d5;
    width: 100%;
    padding: 5%;
    box-sizing: border-box;
}
.box_enji > div {
    border: 1px solid #812a2a;
    background: #fff;
}
.box_enji > div .ttl {
    background: #812a2a;
    text-align: center;
    color: #fff;
    padding: 8px;
    font-size: 110%;
    font-weight: bold;
}
.btn_org a {
    background: url("../images/list_01.png") no-repeat center right 10px #ff9900;
    display: block;
    color: #fff;
    font-weight: bold;
    padding: 4%;
    border-radius: 3px;
    text-decoration: none;
}
.ttl_style_b {
    /* background: url("../images/img_butudan_03.jpg"); */
    text-align: center;
    color: #fff;
    font-weight: bold;
    padding: 4% 0 3% 0;
}

@media screen and (max-width: 768px) {
.ttl_style_a > span {
    display: block;
    margin: 2% 0 1% 0;
}
#main img {
    width: 65%;
    margin-top: -1%;
}
.cir_red > div {
    width: 90px;
    height: 90px;
    border: solid 3px #c70200;
}
.cir_red > div span {
    width : 90px;
    font-size: 2.4rem;
    line-height: 2.4rem;
}
#main {
    background: url("../images/pic_top_01_sp.jpg") no-repeat right top #fff;
    padding: 4% 0 2% 0;
	background-size: 100% auto;
}
.box_link .tel {
    padding: 1%;
	text-align: center;
}
	.box_link .tel .flex-container{
    justify-content: center;
	}
	.box_link > div a {
    text-align: center;
}
}
@media screen and (max-width: 400px) {
	.box_link .tel {
    padding: 3%;
}
}
/* 共通 */
#page_top a {
    position: fixed;
    right: 10px;
    bottom: 10px;
    background: url("../images/img_butudan_05.jpg") top left;
    color: #fff;
    padding: 10px;
    font-size: 12px;
    letter-spacing: 1px;
    display: inline-block;
    text-decoration: none;
    line-height: 12px;
    border: 1px solid #fff;
}
header, footer {
    background: url("../images/img_butudan_04.jpg") top left;
    margin: 0;
    padding: 1% 0;
}
.grobalnav {
    background: url("../images/img_butudan_05.jpg") top left;
    padding: 1.5% 0;
}
footer li{
    display: inline-block;
    font-size: 90%;
    margin: 1%;
    padding: 1%;
}
@media screen and (max-width: 768px) {
header .flex-container.col2 > div:nth-child(1) {
    width: 35%;
}
header .flex-container.col2 > div:nth-child(2) {
    width: 65%;
}
header .icon {
    width: 28px;
}
.grobalnav.hd {
    display: none;
}
header .txt_xl {
    font-size: 2.6rem;
}
}
/* grobalnav */

.header {
    display: flex;
    justify-content: space-around;
}
.nav-button {
    display: none;
}
.nav a {
    color: #fff;
    text-decoration: none;
	    display: block;
    width: 100%;
}

@media screen and (max-width: 768px) {
.header {
    display: block;
    text-align: right;
}
.nav-button {
    display: block;
    cursor: pointer;
}
.nav-wrap {
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    z-index: 10;
    width: 100%;
    height: 100%;
}
.fot .nav-wrap {
    position: inherit;
    display: block;
}
.nav-wrap .nav {
    height: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
}
.nav-wrap li {
    display: block;
    width: 100%;
    border: none;
    margin-top: 4%;
}
.nav-wrap li a {
    color: #fff;
}
/*メニューボタンのエフェクト*/
.nav-button, .nav-button span {
    display: inline-block;
    transition: all 0.4s;
    box-sizing: border-box;
}
.nav-button {
    z-index: 20;
    position: relative;
    width: 35px;
    height: 30px;
}
.nav-button span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #fff;
    border-radius: 4px;
}
.nav-button span:nth-of-type(1) {
    top: 0;
}
.nav-button span:nth-of-type(2) {
    top: 13px;
}
.nav-button span:nth-of-type(3) {
    bottom: 0;
}
.nav-button.active span:nth-of-type(1) {
    -webkit-transform: translateY(13px) rotate(-45deg);
    transform: translateY(13px) rotate(-45deg);
}
.nav-button.active span:nth-of-type(2) {
    opacity: 0;
}
.nav-button.active span:nth-of-type(3) {
    -webkit-transform: translateY(-13px) rotate(45deg);
    transform: translateY(-13px) rotate(45deg);
}
footer img {
    max-width: 50%;
}
.fot .nav li {
    width: 47%;
    padding: 1%;
    box-sizing: border-box;
    display: inline-block;
    margin: 1%;
    border: 1px solid #666;
}
}