@charset "UTF-8";



/* お葬式 */

.top_contents{ text-align: center; background-color: white; padding: 25px; border-radius: 20px; margin-top: 70px; line-height: 2.0;}
.top_text p{ text-align: left;}
.top_text img{ text-align: right; width: 250px;}
h3{font-size: 20px; margin-bottom: 20px;}


.stepbar { margin: 0 auto; width: 80%;}
.stepbar .stepbarwrap { margin: 2em 0; position: relative;}
.stepbar .stepbarwrap .steptitle { display: inline-flex; align-items: center;}
.stepbar .stepbarwrap .steptitle .stepcircle { display: inline-block; width: 150px; height: 50px; content: ""; border-radius: 60px; background-color: rgba(152,143,134); color: #fff; text-align: center; z-index: 1; margin-bottom: 20px;}
.stepbar .stepbarwrap .steptitle .stepcircle span { display: inline-block; line-height: 1.2em; font-size: 18px; position: relative; top: 13px;}
.stepbar .stepbarwrap .steptitle .title { margin: 28px; font-weight: bold; font-size: 22px;}
.stepbar .stepbarwrap .steptxt { padding-left: 120px;}
.stepbar .stepbarwrap .steptxt .txt {}
.stepbar .stepbarwrap .stepline { width: 1px; height: calc(100% + 2em); background-color: rgba(152,143,134); position: absolute; top: 1em; left: 2.5em; z-index: 0;}
.stepbarwrap:last-of-type .stepline:last-of-type { display: none;}

.cp_qa *, .cp_qa *:after, .cp_qa *:before {-webkit-box-sizing: border-box; box-sizing: border-box;}
.cp_qa .cp_actab {position: relative; overflow: hidden; width: 100%; margin: 20px 0;}
.cp_qa .cp_actab input {position: absolute; opacity: 0;}
/* 質問 */
.cp_qa .cp_actab label {font-weight: bold; position: relative; display: block; margin: 0 0 0 0; padding: 1em 2em 1em 2.5em; cursor: pointer; text-indent: 1em; border-radius: 0.5em; background: #dcd8d8;}
.cp_qa .cp_actab label::before {font-family: serif; font-size: 1.5em; margin-left: -1.5em; padding-right: 0.5em; content: 'Q';}
.cp_qa .cp_actab label:hover {transition: all 0.3s; color: #1a3866;}
/* --質問の＋アイコン */
.cp_qa .cp_actab label::after {font-size: 1.8em; font-weight: bold; line-height: 2em; position: absolute; top: 0; right: 0; content: '+'; display: inline-block; width: 2em; height: 2em; -webkit-transition: transform 0.4s; transition: transform 0.4s;}
/* 答え */
.cp_qa .cp_actab .cp_actab-content {position: relative; overflow: hidden; max-height: 0; padding: 0 0 0 2.5em;
	-webkit-transition: max-height 0.2s; transition: max-height 0.2s; border-radius: 0 0 0.5em 0.5em;}
.cp_qa .cp_actab .cp_actab-content::before {font-family: serif; font-size: 1.5em; position: absolute; margin: 0.4em 0 0 -1em; padding: 0; content: 'A';}
.cp_qa .cp_actab .cp_actab-content p {margin: 1em 1em 1em 0;}
/* 質問を開いた時の仕様 */
/* --答えの高さ */
.cp_qa .cp_actab input:checked ~ .cp_actab-content {max-height: 40em; border: 10px solid rgba(218,215,215); background-color: white;}
/* 質問をクリックした時のアイコンの動き */
.cp_qa .cp_actab input:checked ~ label {color: #1a3866; border-radius: 0.5em 0.5em 0 0;}
/* 質問をクリックした時の+の動き */
.cp_qa .cp_actab input[type=checkbox]:checked + label::after {-webkit-transform: rotateZ(45deg); transform: rotateZ(45deg);
	-webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;}

.important{ background-image: url("../images/back.png"); background-repeat: no-repeat; background-size: contain; text-align: center; line-height: 2.0; margin: 0 10px; padding: 70px 0; text-shadow: 0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;}

@media (min-width: 768px) {
.top_text{display: flex; justify-content: space-around;}
.top_text p{ margin-top: 50px;}
.steptxt img{width: 190px; margin-right: 0; margin-left: auto; margin-top: 10px; display: block;}
}
@media screen and (max-width: 960px) {
.top_contents{margin-top: 40px;}
 h3{font-size: 17px;}
.stepbar { width: 100%;}
.stepbar .stepbarwrap .steptitle .stepcircle{width: 140px; height: 30px;}
.stepbar .stepbarwrap .steptitle .title{font-size: 17px; margin: 15px;}
.stepbar .stepbarwrap .steptitle .stepcircle span{font-size: 13px; line-height: 1em; top: 3px;}
.stepbar .stepbarwrap .steptxt { padding-left: 55px;}
.stepbar .stepbarwrap .stepline{left: 1.5em;}
	
.important{background-position: bottom; text-align: left; padding: 20px 0 115px;}
.steptxt img{width: 200px; margin: 10px auto; display: block;}
}