@charset "utf-8";

#keyVisual{
	background: url("../img/keyvisual_pc.jpg") no-repeat right center / cover;
}

@media screen and (max-width: 1600px){
	#keyVisual{
		background-position: 50% center;
	}
}
@media screen and (max-width: 1024px){
	#keyVisual{
		background-position: 82% center;
	}
}
@media screen and (max-width: 768px){
	#keyVisual{
		background: url("../img/keyvisual_sp.jpg") no-repeat right center / cover;
	}
}

/* ------------------------------------------------------------------------ */

/* 共通

/* ------------------------------------------------------------------------ */
.contents,
.contents > section {
    text-align: left;
}

.contents > section {
    margin: 0 0 100px;
}

.contents > section > div{
    margin-bottom: 60px;
}

.contents > section > section > p,
.contents > section > p,
.contents > p,
.sideBox p{
    font-size: 1.6rem;
    line-height: 2.0;
}

.contents > section > div > p > span{
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

#lead{
	font-family: "Shippori Mincho", serif;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.0;
    text-align: left;
    margin: 60px 0;
}

.ulStyle01 {
	margin	: 30px 0px;
    font-size: 1.6rem;
}

	.ulStyle01 li {
		list-style	: disc;
		margin		: 0 15px 3px;
		padding		: 0;
		text-align	: left;
	}

.indent{
    padding: 0 0 0 1em;
    text-indent: -1em;
}

/* ------------------------------------------------------------------------ */

/* 葬儀後によくあるご相談・葬儀後に必要な手続き

/* ------------------------------------------------------------------------ */
.after_area{
    margin-bottom: 100px;
}

.after_area .flex{
    display: flex;
    justify-content: center;
    margin: 40px auto;
}
.after_area .flex li{
    margin: 0 10px;
}

.after_area .flex li a{
    display: block;
}
    .after_area .flex li a:hover{
        opacity: 0.8;
    }

.procedurebox{
    border: 1px solid #4d4497;
    padding: 32px;
    margin-bottom: 24px;
}
.procedurebox:first-of-type{
    margin: 47px auto 24px;
}
.procedurebox h3{
    font-size: 2.4rem;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.procedurebox h3 span{
    color: #fff;
    font-size: 2.2rem;
    font-family: "Roboto", sans-serif;
    text-align: center;
    margin-right: 20px;
}
.procedurebox h3 > span{
    background: url("../img/after_icon01.png") no-repeat;
    background-size: contain;
    width: 33px;
    height: 32px;
    display: inline-block;
}
.procedurebox ul{
	margin	: 0 55px;
    font-size: 1.6rem;
}
	.procedurebox ul li {
		list-style	: disc;
		margin		: 0 15px 3px;
		padding		: 0;
		text-align	: left;
        color: #4d4497;
	}
	.procedurebox ul li span{
        color: #282730;
        text-align: center;
	}


/* ------------------------------------------------------------------------ */

/* 忌明けまでにすること

/* ------------------------------------------------------------------------ */
.sideBox{
    display: flex;
    justify-content: space-between;
}

.sideBox > div{
    max-width: 668px;
}

.sideBox p{
    margin-bottom: 45px;
}


@media screen and (max-width: 767px) {
    .hd01{
        margin: 0 auto 20px;
    }
    
    .after_area .flex,
    .sideBox{
        flex-wrap: wrap;
    }
    
    .after_area .flex li{
        margin: 0 0 15px;
    }
    
    .procedurebox{
        padding: 20px;
    }
    
    .procedurebox h3{
        align-items: center;
        font-size: 1.8rem;
    }
    .procedurebox h3 span{
        font-size: 1.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .procedurebox ul{
        margin: 0 10px;
    }
    
    .sideBox p {
      margin-bottom: 15px;
    }
    
    .ulStyle01{
        margin: 15px 0px;
    }
    
}

@media screen and (max-width: 478px) {
    .contents > section > section > p,
    .contents > section > p,
    .contents > p,
    .sideBox p,
    .ulStyle01,
    .procedurebox ul{
        font-size: 1.4rem;
    }
    
    .procedurebox h3{
        font-size: 1.6rem;
    }
}