@charset "UTF-8";


/* ============お墓のリフォーム============== */
/*各ページ共通
----------------------------------*/
div#header div.h2 h2 {
	background: url(../images/reform_index_h2.jpg) top left no-repeat;
}
#main{
	font-size:93%;
}


/* ---PC・スマホ表示非表示--- */
@media screen and (min-width: 769px){
.sp {
	display: none;
}
.pc {
	display: block;
}
}

@media screen and (max-width: 768px) {
.sp {
	display: block;
}
.pc {
	display: none;
}
img {
max-width: 100%;
height: auto;
}
	}

/*テキストリンク
--------------*/
a:link {
	color:#2E76CE;
}
a:visited {
	color:#2E76CE;
}
a:hover {
	color:#FF6C00;
}
a:active {
	color:#FF6C00;
}
/* pタグ */
#main p.p1 {
	color: #4f5a60;
	clear:both;
	line-height:1.8em;
}


#main p.p1 span.red {
	color: #FF412E;
}
span.orenge_b {
	color: #F1752A;
	font-weight:bold;
}
span.orenge {
	color: #F1752A;
}
span.blue{
	color:#427290;
}
/*--------------------------------------------------------------------
(index.html)
(お墓のリフォームについて　index)
--------------------------------------------------------------------*/
.mainimg {
	width: 670px;
	margin: 0 0 20px 25px;
}
@media screen and (max-width: 768px) {
    .mainimg{
        width:100%;
        margin:0;
    }
    
}

#main div.box{
    position:relative;
	margin: 10px 30px 0 40px;
	padding-bottom: 10px;
}
@media screen and (max-width:768px){
#main div.box{
        position:relative;
        margin: 0 15px;
        padding-bottom: 10px;
    }
}
h3.index_h3_1 {
	width: 670px;
	height: 30px;
	text-indent: -9999px;
	margin: 0 0 20px 25px;
	background: url(../images/reform_index_h3_01.gif) no-repeat left top;
}
.h4-title{
    padding: 0 0 5px 15px;
    margin: 0 25px 10px 25px;
    border-bottom: 1px solid #a5a5a5;
    border-left: 4px solid #24860a;
}
@media screen and (max-width:768px){
    .h4-title{
        margin: 0 15px 10px 15px;
    }
    
}
.reform_photo{
	clear:both;
	margin:0 0 20px 40px;
	line-height:1.8em;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}
@media screen and (max-width:768px){
    .reform_photo{
        flex-wrap :wrap;
        margin:0 0 20px 0;
        padding: 0 15px;
    }
}
@media screen and (max-width:768px){
    .reform-img{width:100%;}
    .reform-img img{width:100%;}
}

.reform-text{
    padding:0 15px;
}
@media screen and (max-width:768px) {
    .reform-text{
        margin-top:10px;
    }
    
}
.reform-text p.reform_catch{
	font-size:150%;
	font-weight:bold;
	color: #F24026;
	margin:0 0 10px 0;
}

ol.index{
	width:640px;
	margin:0 0 0 40px;
	padding:0;
}
ol.index li{
	clear:both;
}
ol.index li img{
	float:left;
	width:100px;
	margin:0 10px 0 0;
}
ol.index li dl{
	float:left;
	width:525px;
	margin:0;
	padding:20px 0;
	float:left;
	border-top:dotted 1px #A6A6A6;
	line-height:1.8em;
}
ol.index li dl img{
	float:right;
	width:100px;
	padding:0;
}
ol.index li dl#top img{
	float:right;
	width:255px;
	padding:0;
}
ol.index li dl dt{
	color:#47667A;
	font-weight:bold;
	margin-bottom:10px;
}
ol.index li dl dd{
	width:400px;
}
ol.index li dl dd#top{
	width:260px;
}
ol.index li dl#top{
	width:525px;
	margin:0;
	padding:20px 0;
	float:left;
	line-height:1.8em;
	border-top:none;
}


@media screen and (max-width: 768px) {
.reform_flow_title{
	width:100%;
	color: #38545b;
	background-color: #e6f0f4;
	padding: 10px 0 10px 0;
	}
}

@media screen and (max-width: 768px) {
.reform_flow_title img{
	width: auto;
	height:23px;
	margin-bottom: -5px;
	}
}


@media screen and (max-width: 768px) {
.reform_flow_title p{
	font-size: 18px;
	text-align: left;
	padding-left: 15px;
	}
}

@media screen and (max-width: 768px) {
	.flow_number{
		margin:0 7px 0 13px;
	}
}

ul#other li{
	background-image: url(../images/reform_index_icon.gif);
	background-repeat: no-repeat;
	padding-left:20px;
	background-position: left center;
	margin-bottom:3px;
	color:#47667A;
}
p#other{
	clear:both;
	text-align:right;
	margin:0 30px 20px 0;
}
p#index_text{
	font-size:120%;
	clear:both;
	width:auto;
	margin:0 0 20px 40px;
	padding:10px 0;
	text-align:center;
	border-bottom: 3px double #F1752A;
	border-top: 3px double #F1752A;
	line-height:1.6em;
}
@media screen and (max-width:768px) {
    p#index_text{
        margin:10px;
    }    
}

p#link_nagare{
	clear:both;
	margin:10px 0 20px 0px;
    position:relative;
}
#link_nagare a{
    padding-left:5px;
}
#link_nagare a:before{
    content:"";
    position:absolute;
    border:6px solid transparent;
    border-left:7px solid #ff3902;
    top: 2px;
    left: 0px;
    
}


/*--------------------------------------------------------------------
(flow.html)
(お墓のリフォームの流れ　flow)
--------------------------------------------------------------------*/
h3.flow_h3_1 {
	width: 670px;
	height: 30px;
	text-indent: -9999px;
	margin: 0 0 30px 25px;
	background: url(../images/reform_flow_h3_01.gif) no-repeat left top;
}
ol.flow{
	width:640px;
	margin:0 0 0 40px;
	padding-bottom:40px;
}

@media screen and (max-width: 768px) {
ol.flow{
	width:auto;
	margin:0;
}
}

ol.flow li dl dt{
	clear:both;
}
ol.flow li dl dt {
	width:272px;
	margin:0 5px 0 0;
	padding:0;
	float:left;
}

@media screen and (max-width: 768px) {
ol.flow li dl dt {
	width: auto;
	float: none;
	margin: 0 0 20px 0;
}
}

@media screen and (max-width: 768px) {
.flow_illust{
	width: 25%;
	height: 100%;
	margin:0 5%;
}
}

@media screen and (max-width: 768px) {
.flow_illust2{
	width: 45%;
	height: 100%;
	margin-right: 5%;
	float: right;
}
}

@media screen and (max-width: 768px) {
.flow_container {
  display: flex;
}
}

@media screen and (max-width: 768px) {
	.flow_left{
	width: 60%!important;
	float: left!important;
	margin-left: 5%!important;
	padding: 0!important;
}	
	}

ol.flow li dl dd{
	width:360px;
	margin:0;
	padding:20px 0;
	float:left;
	border-top:dotted 1px #A6A6A6;
	line-height:1.8em;
}

@media screen and (max-width: 768px) {
ol.flow li dl dd{
	width:90%;
	margin-left:5%;
	float: none;
	border:none;
	padding: 0;
}
}

ol.flow li dl dd#flow05{
	width:360px;
	margin-top:25px;
	padding:20px 0;
	float:left;
	border-top:dotted 1px #A6A6A6;
	line-height:1.8em;
}

@media screen and (max-width: 768px) {
ol.flow li dl dd#flow05{
	width:90%;
	padding:0;
	float:none;
	border:none;
	margin: 0 auto;
}
}

ol.flow li dl dd#flow10{
	width:360px;
	margin:0;
	padding-bottom:20px;
	float:left;
	border-top:dotted 1px #A6A6A6;
	line-height:1.8em;
}
ol.flow li#top dl dd{
	width:360px;
	margin:0;
	padding:0;
	float:left;
	line-height:1.8em;
	border-top:none;
}

@media screen and (max-width: 768px) {
ol.flow li#top dl dd {
	width: 60%;
	float: left;
	margin-left: 5%;
}
}

@media screen and (max-width: 768px) {
	ol.flow li#top{
		margin-top: 5px;
	}
}

ol.flow li dl dd#end{
	width:360px;
	margin:0;
	padding:20px 0;
	float:left;
	border-top:dotted 1px #A6A6A6;
	border-bottom:dotted 1px #A6A6A6;
	line-height:1.8em;
}

@media screen and (max-width: 768px) {
ol.flow li {
	margin:20px 0 20px 0;
}