@charset "utf-8";
/* CSS Document */
/*===============================================================
   # 共通要素
===============================================================*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;500;600;700&display=swap');
html {
    font-size: 3.74vw;
}
body{
    line-height: 1.6;
    max-width: 1024px;
    margin: 0px auto;
    font-family: 'Noto Serif JP', serif, YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝";
    font-size: inherit;
    color: #000000;
}
@supports (-webkit-touch-callout: none) {
    html{
        height: -webkit-fill-available
    }
  body {
    min-height: 100vh;
    height: -webkit-fill-available;
  }
}
.font-g{font-family: 'Noto Sans JP', sans-serif;}
a {color: inherit;}
a:hover{
    text-decoration: none;
    cursor: pointer;
}
::-webkit-scrollbar {width: 4px;}
::-webkit-scrollbar-thumb{
    background-color:#cccccc;
    border-radius: 50px;
}
h2{font-size: 1.5rem;}
p{margin-bottom: 0!important;}
.bgImg::before {
    content:"";
    position:fixed;
    top:0;
    bottom: 0;
    z-index:-1;
    width:100%;
    max-width: 1024px;
    height:100vh;/*高さ指定しないとスクロールで余白出る*/
    background-repeat:no-repeat;
    background-position:right bottom;
    background-size:cover;
}
.boxBgImg {
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100%;
}
img,video {
	max-width: 100%;
	height: auto;
}
header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
    max-width: 1024px;
}
.headerArea {
	font-size: 1.6rem;
	display: flex;
	justify-content:space-between;
	align-items: center;
	position: relative;
	background: -webkit-linear-gradient(left, #EAF1EC, #FFF, #F2EEF5);
	background: -o-linear-gradient(left, #EAF1EC, #FFF, #F2EEF5);
	background: linear-gradient(to right, #EAF1EC, #FFF, #F2EEF5);
	height: 3rem;
	padding: 0 5%;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.headerLinkL, .headerLinkR {width: 20%;}
.headerLinkL {
    font-size: 0.7rem;
    color: #696969;
    left: 10px;
    text-align: left;
}
.headerLinkL .headerback-btn{
    width: 53px;
    opacity: .7;
    margin-bottom: 3px;
}
.headerLinkL a{display: block;}
.headerLinkL a:hover{color:#696969; }
.headerArea .no-after{padding-left: 0;}
.headerArea .no-after::after{display: none;}
.headerArea h1 {
	font-size: 1.14rem;
	font-weight: 500;
	text-align: center;
	width: 60%;
	margin: 0;
    vertical-align: baseline;
}
.headerArea h1 a{display: block;}
.headerArea .img{
    width: 7rem;
    margin: 0 auto;
}
main {
	padding: 3.5rem 0 5.5rem;
    min-height: 100vh;
}
.container{
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}
footer {
	max-width: 1024px;
    position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 1;
}
.footerArea {
	text-align: center;
	background-color: #FFF;
	padding: 0;
	box-shadow: 0 -2px 4px rgba(0,0,0,0.2);
}
.footerLinks {
	display: flex;
	justify-content: space-between;
	position: relative;
	padding: 5px 10px 3px;
}
.footerLinks li {
	position: relative;
	text-align: center;
	font-size: 0.8rem;
	line-height: 1.9;
	color: #555;
	width: 20%;
}
.footerLinks li a {display: block;}
.footerLinks img {height: 20px;}
.hr {
	position: relative;
	height: 2px;
	margin: 3% auto 9%;
}
.pageImgTtl {
	font-size: 1.1rem;
    margin-top: 5%;
    padding:0 0 5px 8%;
    border-bottom: 1px solid #cccccc;
	position: relative;
    color: #555555;
    letter-spacing: 2px;
}
.Ttlannotation{
    margin: 10px 0 5px!important;
    padding: 2.5%;
    font-size: .8rem;
    color: #3b3b3b;  
    background-color: #f9f9f9;
    box-shadow: 1px 2px 3px rgb(0 0 0 / 10%);
    border-radius: 5px 5px 0 0;
    border-top: 1px solid #e7e7e7;
    border-left: 1px solid #e7e7e7;
    font-family: 'Noto Sans JP', sans-serif;
}
.pageImgTtl + .hr {margin: 3% 12% 9%;}
.hr::before, .hr::after {
	content: "";
	position: absolute;
	top: -2px;
	width: 6px;
	height: 6px;
	transform: rotate(45deg);
}
.hr::before {left: 0;}
.hr::after {right: 0;}
.ttlLeft {
	color: inherit;
	font-size: .9rem;
    line-height: 1.4rem;
	margin-bottom: 0.2rem;
    padding-left: 5px;
}
.pageImgTtl::before {
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    top: -3%;
    left: 3.5%;
    display: inline-block;
    background-size: contain;
    transform: translateX(-50%);
}
.red{
    color: #FF0000;
    font-size: .8rem;
}
.no-hissu{
    color: #949494;
    font-size: .8rem;
}
.formError.inline .formErrorContent{margin:0 .5rem .5rem 0;}
.pos-r{position: relative;}
.formError{
    z-index: 9;
    left: 0!important;
}
.annotation {
	color: #6C6C6C;
	font-size: 0.8rem;
	background-color: #F8F8F8;
	padding: 5%;
    font-family: 'Noto Sans JP', sans-serif;
}
/*ベース白背景*/
.bgWhRound {
	background-color: #FFF;
	padding: 5%;
    border-radius:0 0 5px 5px;
	box-shadow: 1px 2px 3px rgba(0,0,0,0.1);
}
/*角丸変形*/
.radius-top{border-radius: 5px}
.bk-l-gray{
    background-color: #f6f6f6;
    border-bottom: 1px solid #e5e5e5;
}
/*ヘルプモーダル*/
.helpIcon {
    width: 1.6rem;
	font-size: 1.14rem;
	margin-left: 2%;
    margin-top: -3px;
}
.help-modal{padding: 5%;}
.help-modal p{
    font-size: 1.4rem;
    margin-bottom: 20px;
    border-bottom: 1px dotted #888888;
}
.help-modal li{
    list-style-type: none;
    text-align: left;
    font-size: .9rem;
    margin-left: 20px;
    position: relative;
}
.help-modal li::before{
    position: absolute;
    top: 10px;
    left: -12px;
    display: inline-block;
    width: 4px;
    height: 4px;
    content: '';
    border-radius: 100%;
    background: #6C6C6C;
}
/*入力フォーム*/
.formInput {
	display: block;
	color: #000;
	border: 1px solid #CCC;
	width: 100%;
	height: auto;
	min-height: auto;
	background-color: #FFF;
	padding: 8px;
}
.button {
	color: #FFF;
	text-align: center;
	font-size: .9rem;
	line-height: 1.4;
	display: inline-block;
	padding: 2%;
	border-radius: 5px;
	width: 70%;
	background-color: #414141;
	box-shadow: 1px 2px 3px rgba(0,0,0,0.15);
	margin: 0 auto 3%;
}
.button:hover{color: #ffffff;}
::placeholder {
    font-size: .8rem;
    color: #cccccc;
}
.sharebutton {
	border-radius: 25px;
	box-shadow: 1px 2px 3px rgba(0,0,0,0.15);
    color: #ffffff;
    padding: 7px 2.5%;
	text-shadow: none;
	border: 1px solid #FFF;
    position: absolute;
    top: .5rem;
    right: 10px;
    z-index: 100;
}
.sharebutton img{
    width: 20px;
    margin:-3px 3px 0 0;
    filter: brightness(1) invert(0);
}
.backbtn {
	border-radius: 50px;
	box-shadow: 1px 2px 3px rgba(0,0,0,0.15);
    background-color:#bbbbbb;
    color: #ffffff;
    padding: 2% 9%;
	text-shadow: none;
	border: 1px solid #FFF;
    position: absolute;
    top: -1rem;
    left: -10px;
    z-index: 100;
}
.backbtn img{
    width: 6px;
    margin: -4px 4px 0 3px;
}
.no-border{
    border-bottom: none!important;
    margin-bottom: 0;
}
.h2-border-bottom{border-bottom: 1px solid #cccccc;}

.sharebutton .btnTypeE:focus{outline: none;}
label{
    margin-bottom: .2rem;
    font-size: .9rem;
}
.btnTypeD {
	font-size: 1.21rem;
	border: 1px solid #FFF;
}
.btnTypeD img{
    width: 15px;
    margin:-3px 5px 0 0; 
    filter: brightness(0) invert(1);
}
.button.btnTypeE {
	color: #3F3F3F;
	font-weight: 500;
	text-shadow: none;
	background: linear-gradient(90deg, rgba(255,255,255,0.4), rgba(255,255,255,0.8));
	border: 1px solid #FFF;
}
.button.btnTypeE:focus{outline: none;}
.button.btnTypeE:hover{color: #3F3F3F;}
.btnTypeF {
	color: #FFF;
	width: 40%!important;
	padding: 1.3%;
}
.postPlus {
	position: relative;
	width: 1.5rem;
	height: 1.5rem;
	display: inline-block;
}
.postPlus::before, .postPlus::after {
	position: absolute;
	content: '';
	background-color: #FFF;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.postPlus::before {
    width: 100%;
    height: 1px;
}
.postPlus::after {
    width: 1px;
    height: 100%;
}
.b-radius{border-radius: 20px;}
/*トグルボタン*/
input[type=checkbox]{display: none;}
.togglebtnLabel{
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 80px;
    background: #d0d2d9; 
    cursor: pointer;
    transition: .2s ease; 
    margin-bottom: 0;
}

.togglebtnLabel:before{
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 80px;
    width: 16px;
    height: 16px;
    background: #fff;
    transition: .2s ease; /* 円が動くスピードを指定 */
}
.formTtl:checked + .togglebtnLabel:before{left: 18px;}
.item-count{
    color: #ffffff;
    padding: 2px 8px;
    margin-right: 5px;
    border-radius: 25px;
    font-size: .7rem
}
.menu-arrow{
    width: 10px;
    margin:-4px 5px 0 0;
}
/*===============================================================
   # 405,500エラー
 =============================================================== */
.notFound{
    height: 100vh;
    position: relative;
}
.notFoundbg{
    width: 90%;
    max-width: 400px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #ffffff;
    border-radius: 3px;
    box-shadow: 1px 2px 3px rgb(0 0 0 / 10%);
}
.notFound .boxBgImg{
    background-size: 80%!important;
    background-position: right bottom;
}
.notFoundbg .nothing-line{
    border: none;
    padding-bottom: 2rem;
}
.notFoundbg .nothing-line .ttlUnderline{
    display: flex;
    justify-content: center;
}
.notFoundbg .nothing-line .ttlUnderline h2{
    font-size: 1rem;
    margin-bottom: 0;
}
.notFoundbg .nothing-line .ttlUnderline img{
    width: 20px;
    margin-right: 5px;
    filter: invert(0%) sepia(86%) saturate(420%) hue-rotate(299deg) brightness(225%) contrast(60%);
}
.notFoundbg .nothing-line .text{
    font-size: .9rem!important;
    line-height: 2rem;
    background-color: hsl(0deg 0% 100%);
    padding: 2rem 1rem;
    border: 1px solid hsl(0deg 0% 80%);
    border-radius: 3px;
    margin: 2rem 2rem 1rem 2rem;
}
.notFoundbg .icon{
    width: 30px;
    opacity: .6;
}
.notFoundbg .notfound{
    font-size: 1.2rem;
    text-align: center;
    position: relative;
    letter-spacing: 1.5px;
}
.notFoundbg .notfound::after,
.notFoundbg .notfound::before{
    position: absolute;
    content: '';
    top: 50%;
    display: inline-block;
    width: 20px;
    height: 1px;
}
.notFoundbg .notfound::before{left: 70px;}
.notFoundbg .notfound::after{right: 70px;}
.notFoundbg .text{
    text-align: center;
    padding:20px 0 10px;
    line-height: 26px;
}
.notFoundbg .nothing-line .img{
    width: 60px;
    margin:  10px auto;
    opacity: .6;
}
.notFoundbg .button{
    font-size: .8rem;
    width: 40%;
    margin-bottom: 40px;
}
.serverbusy{padding-top: 70px!important;}
.openNotofound{padding-top: 65px!important;}
body.pc-error{
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    background-repeat: no-repeat, no-repeat;
    background-position: right bottom, left top 8vh;
    background-size: 25%, 25%;
    background-attachment: fixed;
    position: relative;
    background-color: #f8f6f6;
    background-image: url(../../img/bg-img.png), url(../../img/bg-02r.png);
}
body.pc-error header{max-width: 100%;}
body.pc-error header .headerArea{
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    padding: 7px 0;
    z-index: 100;
    background: #ffffff;
    height: 75px;
}
body.pc-error header .headerArea img{
    height: 6vh;
    width: auto;
}
body.pc-error .headerArea .headerArea-con{
    max-width: 1200px;
    width: 100%;
    padding: 0 3.5%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.error-panel{
    width: 700px;
    margin: 0 auto;
    padding:0 0 50px 0;
    border-bottom: 1px solid #dbdbdb;
    background-color: #ffffff;
}
.error-panel{margin-top: 100px;}
.error-panel .header-bggr{
    padding: 3px;
    background: #927ab5;
}
.error-panel h3{
    margin: 50px 0 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.error-panel h3 img{
    width: 20px;
    filter: invert(0%) sepia(86%) saturate(420%) hue-rotate(299deg) brightness(225%) contrast(60%);
    margin-right: 5px;
}
/*===============================================================
   # ownerトップページ
 =============================================================== */
/*スプラッシュ画面*/
.wrap{display: none;}
.loader-first {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
    max-width: 1024px;
    margin: 0 auto;
    background-color: #ffffff;
    background-size:cover;
    background-position: right bottom;
	z-index: 100;
}
.loader {
	position: fixed;
    width: 50%;
    max-width: 300px;
	top: 50%;
	left: 50%;
    transform: translate(-50%,-50%)!important;
	text-align: center;
	color: #fff;
	z-index: 2;
    background-color: rgba(255,255,255,0.5);
    box-shadow: 3px 3px 10px 10px rgba(255,255,255,0.5);
    padding: 40px 0;
    border-radius: 6px;
}
.loader .img{
    width: 55%;
    margin: 0 auto;
}
.loader .deco-line-u{margin-bottom: 10px;}
.loader .deco-line-b{margin-top: 10px;}
.loader h1{
    color: #737373;
    font-size: 1.1rem;
}
/*ownerトップ*/
.mainEntranceFirst{padding: 1.5rem 0 0;}
.mainEntranceFirst .setting{
    text-align: center;
    width: 90%;
    margin: 20px auto 30px;
    background-color: rgba(255,255,255,0.9);
    box-shadow: 3px 3px 8px 8px rgba(255,255,255,0.9);
    position: relative;
}
.mainEntranceFirst .setting::after{
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    width: 80%;
    height: 10px;
    left: 50%;
    transform: translateX(-50%);
    bottom: -15px;
}
.mainEntranceFirst .setting h2{
    font-size: 1.1rem;
    margin-bottom: 0;
    color: #3F3F3F;
}
.mainEntranceFirst .setting p{
    font-size: .9rem;
    color: #787878;
}
.mainEntranceFirst .menu-list{
    justify-content: space-between;
    width: 95%;
    margin: 0 auto 3%;
}
.mainEntranceFirst .bgWhRound{
    width: 95%;
    margin: 0 auto;
}
.mainEntranceFirst .boxBgImg {
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 70%;
}
main .logo{width: 11rem;}
.mainEntranceFirst h1 {
	font-size: 1rem;
	line-height: 1.6;
    position: relative;
}
.mainEntranceFirst .hr{
    position: relative;
    height: 2px;
    margin: 3% auto;
}
.mainEntranceFirst .Ttlannotation{
    width: 95%;
    margin: 4% auto 2%;
}
.mainEntranceFirst .Ttlannotation h2{
    position: relative;
    font-size: .9rem;
    padding-left: 30px;
    margin:0 0 0 .5rem;
}
.mainEntranceFirst .Ttlannotation h2:before{
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    top: -15%;
    left: 12.5%;
    display: inline-block;
    background-size: contain;
    transform: translateX(-50%);
    background-image:url( "../img/icon-palette.svg");
}
.mainEntranceFirst .flow-text{
    margin-left: 3px;
    color: #ffffff!important;
}
.theme-info{
    display: flex;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #cccccc;
}
.theme-info .img{
    width: 30%;
    margin-right: 10px;
    height: 50px;
    object-fit:contain;
}
.theme-info .text{margin-top: 5px;}
.mainEntranceFirst .theme-info .text{
    position: relative;
    white-space: pre;
}
.mainEntranceFirst .theme-info .text::after{position: absolute;}
.copyrightArea {text-align: center;}
.copyrightArea img {width: 85px;}
.copyrightArea .copyright {
	text-align: center;
	color: #ffffff;
    font-size: 0.7rem;
	margin: 10px auto 0;
}
.flow-link{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .8rem 0;
    border-top: 4px double #cccccc;
    border-bottom: 4px double #cccccc;
    font-size: 1.1rem;
}
.mainEntranceFirst .flow-menu{height: 70px;}
.mainEntranceFirst .flow-menu h2{color: #ffffff!important;}
.mainEntranceFirst .flow-menuicon{
    width: 60px;
}
.mainEntranceFirst .flow-menuicon .menu-icon-logo{
    width: 30px;
    height: 30px;
    margin: auto;
}
.mainEntranceFirst .flow-menu .arrow img{
    filter: brightness(4);
}
.mainEntranceFirst .menu-list .arrow {
    width: 10px;
    margin-right: 10px;
}
.mainEntranceFirst .flow-menu::before {border-style: none;}
/*2023.8.10追加*/
.mainEntranceFirst .funeral-title{
    margin: -10px 0 25px;
    text-align: center;
}
.mainEntranceFirst .funeral-title span{
    font-size: 1.6rem;
    color: #7f7c7c;
}
.mainEntranceFirst .funeral-title p{
    position: relative;
    font-size: 1rem;
}
.mainEntranceFirst .funeral-title p::after{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
    width: 80%;
}
/*===============================================================
   # openトップページ
 =============================================================== */
.splash-logo{
    position: absolute;
    top: 50px;
	left: 50%;
    transform: translate(-50%)!important;
    width: 70%;
}
.introWindow {
	text-align: center;
	border-radius: 6px;
	position: relative;
	width: 84%;
	height: 33vh;
	background-color: rgba(255,255,255,0.5);
	margin: 0 auto 22%;
}
.introWindow > div {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
}
.introWindow hr {
	position: relative;
	width: 64%;
	height: 2px;
	margin: 0 auto;
}
.introWindow hr::before, .introWindow hr::after {
	content: "";
	position: absolute;
	top: -2px;
	width: 6px;
	height: 6px;
	transform: rotate(45deg);
}
.introWindow hr::before {left: 0;}
.introWindow hr::after {right: 0;}
.introWindow h1 {
	font-size: 1.28rem;
	line-height: 2.1;
	letter-spacing: 1px;
	margin: 7% auto;
}
.introWindow h1 span {font-size: 1.5rem;}
.introImg{
    width: 80%!important;
    height: auto;
    left: 50%;
    transform: translateX(-50%)!important;
    margin-top: 80px;
 }
.introLogo {width: 35%;}
.copyright {
    color: #FFF;
    font-size: 0.7rem;
    letter-spacing: 1px;
}
/*===============================================================
   #訃報
 ==============================================================*/
.funeralreportMain{position: relative;}
.funeralreportMain .pageImgTtl::before{
    background-image: url("../img/icon-fuho.svg");
    top: -13%;
    left: 0;
}
.funeralreportMain .designSelect2::before{left: 3%;}
/*本文*/
.funeralreportMain h3,
.openfuneralreportMain h3{
    font-size: 1.3rem;
    line-height: 1.9rem;
}
.funeral-body h3{
    position: relative;
    margin:0 auto 20px;
}
.funeral-body h3::after{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -13px;
    width: 100%;
}
.funeral-body h3.no-after::after{content:none;}
.funeral-body h4,
.order-accounts h4{
    font-size: 1.1rem;
    position: relative;
    display: inline-block;
    width: 80%;
    margin-bottom: 15px;
}
.funeral-body h4::after,
.order-accounts h4::after{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -12px;
    width: 100%;
}
.lh-50{line-height: 50px;}
.funeral-body p{font-size: .9rem;}
.funeral-body .map-btn{
    width: 80%;
    margin: .5rem 2px;
    padding: 3% 2%;
    text-decoration: none;
}
.funeral-body .file-btn{
    padding: 3%;
    margin: 0 2px;
    text-decoration: none;
    width: 80%;
}
.funeral-body .map-btn img{
    width: 12px;
    margin:-4px 5px 0 0;
}
.funeralrep-btn{
    padding: 3%;
    text-decoration: none!important;
}
.funeral-body img{
    width: 12px;
    margin-top: -5px;
}
.funeral-body a {
    font-size: .9rem;
    text-decoration: underline;
}
.text-link img{filter: brightness(50%);}
.order-limit{
    width: 70%;
    margin: 20px auto;
    border: 1px solid #dddddd;
    padding: 15px;
 }
.order-limit.attend{
    border: none;
    width: 80%;
    margin: 0 auto;
    color: #000000;
}
.order-limit.attend img{
    width: 12px;
    margin-top: -5px;
}
.order-limit .ttl{
    border-bottom: 1px dotted #cccccc;
    margin-bottom: 10px!important;
    padding-bottom: 3px;
}
.order-limit li{
    font-size: .9rem;
    line-height: 26px;
}
/*シェアボタン*/
.share-btn-ttl{
    padding: 0 0 3px 4%;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 0.5rem;
}
.share-btn-ttl h2{padding: 0 0 5px 4%;}
.share-btn{
    color: #ffffff;
    text-align: center;
    font-size: .8rem;
    padding: 1.3% 5%;
    width: 40%;
    border-radius: 5px;
    box-shadow: 1px 2px 3px rgb(0 0 0 / 15%);
}
.share-btn:hover{color: #ffffff!important;}
/*訃報本文デザイン*/
.funeralBgImg {
	background-repeat: no-repeat , no-repeat;
	background-position: center bottom , center top;
	background-size: 100% , 100%;
    background-color: #FFF;
	padding: 5%;
	box-shadow: 1px 2px 3px rgba(0,0,0,0.1);
    border-radius: 5px;
}
.funeralBgImg h2,
.funeralBgImg h3,
.funeralBgImg h4{font-weight: 500;}
.funeralBgImg-2 {background-image: url(../img/theme_2/bg-02.png);}
.funeralBgImg-3 {background-image: url(../img/theme_3/bg-02.png);}
.funeralBgImg-4 {background-image: url(../img/theme_4/bg-02.png);}
.funeralBgImg-5 {background-image: url(../img/theme_5/bg-02.png);}
.funeralBgImg-6 {background-image: url(../img/theme_6/bg-02.png);}
.funeralreportMain .funeral-icon,
.openfuneralreportMain .funeral-icon{
    background-repeat: no-repeat;
    width: 100px;
    height: 30px;
    margin: 20px auto;
}
.offhours{background-color: #6C6C6C!important;}
.sct-link{
    display: flex;
    justify-content: center;
    margin: 30px 0;
}
.sct-link img{
    width: 20px;
    margin:2px 5px 0 0;
}
.funeral-body .funeral-day{
    margin-bottom: 5px;
}
/*===============================================================
   #open訃報
 ==============================================================*/
.openMain{padding: 3.5rem 0 2rem;}
.funeralreportMain .pc-col-2 .button{width: 80%;}
.opennoticeMain{padding: 1.8rem 0 .5rem;}
.openfuneralreportMain{
    position: relative;
    padding: 1.8rem 0 0rem;
}
/*=============================================================== 　    # 御礼状
==============================================================*/
.noticeMain .pageImgTtl::before,
.noticeEdit .pageImgTtl::before{
    background-image: url("../img/icon-event.svg");}
.noticeTxt h2{font-weight: 500;}
.noticeTxt{padding-bottom: 35px!important;}
.noticeMain .designSelect2::before{left: 3%;}
.noticeMain .frame-1 {
    border: 5px solid #000;
    padding: 0.5em;
}
.noticeMain .frame-2 {
    border: 1px solid #000;
    padding: 0em 0.5em 1.5em;
    margin: 0;
}
.noticeMain .frame-2 h3{
    text-align: center;
    font-size: 1.6em;
    margin: 1em 0;
}
.noticeMain .frame-2 p{padding: 0 10px;}
/*御礼状のプレビュー*/
.noticeMain .noticeTxt p{
    font-size: 1rem;
    white-space: normal;
}
.noticeMain .formInput{padding: 10px;}
/*御礼状の伝達*/
.shareMain .pageImgTtl::before{background-image: url("../img/icon-notice-share.svg");}
.shareMain .btnPrimarySdw {
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    color: #6E5CF4;
    font-size: 1.21rem;
    font-weight: 500;
    background-color: #FFF;
    box-shadow: 0 0 7px rgb(110 92 244 / 60%);
}
.publicUrl {
	padding: 3%;
	border: 1px solid #707070;
	border-radius: 5px;
	margin-bottom: 2%;
}
.publicUrl input {width: 100%;}
.btnShare {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 500px;
	font-size: 1rem;
	color: #FFF;
	height: 40px;
	border-radius: 20px;
	margin: 0 auto 13px;
	box-shadow: 1px 2px 3px rgba(0,0,0,0.15);
    margin: 0 3px;
}
.btnShare img {
	width: 1.8rem;
	margin-right: 5px;
}
.btnMail {
    background-color: #5383c3;
    text-decoration: none!important;
}
.btnLine {
    background-color: #3eb370;
    text-decoration: none!important;
}
.btnSms {
    background-color: #6C6C6C;
    text-decoration: none!important;
}
.btnCopy {
	color: #AFAFAF;
	font-weight: 500;
}
.btnCopy:focus{outline: none;}
.btnCopy img{width: 15px;}
.setting input[type=radio]{display: none;}

.imgSelect + label {
    position: relative;
    border-radius: 50px;
}
.imgSelect [type=checkbox]{
	display: none;
	box-sizing: border-box;
    padding: 0;
	position: absolute;
    left: -9999px;
    opacity: 0;
}
.imgSelect + label::after {
    content: '';
    position: absolute;
    left: -1px;
    bottom: -1px;
    width: 24px;
    height: 24px;
    border: 2px solid #CCC;
    border-radius: 50px;
    box-sizing: content-box;
    opacity: 0;
    transition: 0.2s;
}
input[type=radio].imgSelect:checked + label::after {opacity: 1;}
.DesignSelect {
    margin-top: 10px;
    display: flex;
    justify-content:center;
    align-items: center;
}
.DesignSelect li {
    width: 25px;
    margin:0 13px;
}
.DesignSelect img{border-radius: 50px;} 
/*=============================================================== 　    
# お悔み品の確認
==============================================================*/
.giftMain .pageImgTtl::before{
    background-image: url("../img/icon-gift.svg");
}
/*お悔み品の確認*/
.gift-list{
    background-color: #ffffff;    
    margin:0 auto 3%;
    color: #3a3a3a;
    position: relative;
}
.giftMain .tagArea{
    font-size: .7rem;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 3%;
    border-bottom: 1px solid #eff2f7;
}
.gift-list .tagArea p{
    font-size: .7rem;
    letter-spacing: 1px;
    color: #939191;
}
.jointName{
    border-radius: 0 0 5px 5px;
    color: #ffffff!important;
    margin-right: 5px;
    padding: 3px 9px;
    display: none;
    margin-top: -8px;
}
.add-jointName{display: block!important;}
.gift-list .famenameGroup{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem;
    border-bottom: 1px solid #eff2f7;
}
.gift-list .nameArea{padding: 1.5% 3% 0;}
.gift-list .companyName{
    font-size: .9rem;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gift-list .companyGroup{
    font-size: .8rem;
    line-height:1.1rem; 
}
.gift-list .userName{margin: 5px 0;}
.gift-list h3{
    font-size: .9rem;
    padding-bottom: 1.5%;
    margin-bottom: 0;
    letter-spacing: 2px;
}
.gift-list h3 > span{font-size: 1.1rem;}
.item-list{
    width: 100%;
    padding: 0 3%;
    margin:3% 0 1%;
}
.gift-list .giftNamearea{
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.gift-list .giftNamearea .salesType{margin-right: 10px;}
.item-list li{
    font-size: 1rem;
    border-bottom: 1px solid #dee2e6;
    line-height: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.item-list .product-thumbnail {
    height: 70px;
    width: 70px;
    background-color: #ffffff;
    margin-right: 0;
    border: none;
    border-right: 1px solid #d5d5d5;
    position: relative;
}
.item-list .product-thumbnail img {
    width: 70px;
    height: 70px;
    display: block;
    object-fit: cover;
}
.salesType{
    width: 12%;
    height: 22px;
    border-radius: 3px;
    line-height:18px;
    text-align: center;
    font-size: .7rem;
}
.Type-A {/*供花*/
    border: 1px solid #c53d43;
    color: #c53d43;
}
.Type-B {/*供物*/
    border: 1px solid #c89932;
    color: #c89932;
}
.Type-C {/*香典代行*/
    border: 1px solid #2a4073;
    color: #2a4073;
}
.Type-D {/*弔文*/
    border: 1px solid #9fa0a0;
    color: #595857;
}
.gift-list .menu-arrow{margin: 0}
.gift-list .giftName{
    width: 80%;
    font-size: .8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #3F3F3F;
}
.gift-list .giftCount{font-size:.8rem; }
.gift-list .user-link{
    color: #939191;
    font-size: .7rem;
    padding-right: 3%;
    text-align: right;
    width: 100%;
    display: inline-block;
}
.gift-list .user-link a{
    padding-left: 50px;
}
.gift-list .salesType{width: 40px;}
.user-link img{
    width: 6px;
    margin: -4px 0 0 5px;
}
/*お悔み品ないとき*/
.giftMain .boxBgImg {
    background-size: 50%!important;
    background-position: right bottom;
}
.nothingMsg {
	text-align: center;
	background-color: #FFF;
	border-radius: 5px;
	box-shadow: 1px 2px 3px rgba(0,0,0,0.1);
	padding: 5%;
    width: 90%;
    height: 280px;
    margin: 0 auto;
 }
.nothingMsg > div{text-align: center;}
.nothingMsg .img {
    width: 150px;
    opacity: 0.5;
    margin: 50px auto 30px;
}
.nothingMsg p {
	font-size: 1rem;
	letter-spacing: 1px;
    color: #3F3F3F;
}

/*お悔み品の詳細*/
.userInfo .pageImgTtl::before{
    background-image: url( "../img/icon-gift.svg");
    left: -2px;
    top: 1px;
}
.user-info{
    color: #3a3a3a;
    padding: 0;
}
.userInfo .day {
    font-size: .7rem;
    letter-spacing: 1px;
    color: #939191;
    padding:0 0 1% 1.5%;
    margin-left: 0;
    border-bottom: 1px solid #eff2f7;
}
.user-info h3{
    font-size: 1rem;
    line-height: 1.3!important;
    margin-bottom: 1%;
    letter-spacing: 2px;
}
.user-info > div > div{margin-bottom: 1.5rem;}
.user-info > div > div:last-child{margin-bottom: 20px;}
.user-info p{
    font-size: .9rem;
    line-height: 1.3rem;
    margin-left: 10px;
}

.furigana{font-size: .8rem!important}
.posisionName{
    font-size: .8rem!important;
    line-height: 1rem!important;
}
.companyName{font-size: 1rem;}
.userInfo .h3-ttl{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid #cccccc;
}
.userInfo .giftName{
    font-size: .8rem;
    line-height: 1.1rem;
    padding-bottom: 2px;
}
.userInfo .giftCount{font-size: .85rem;}
.userInfo .menu-list .giftselect{
    position:absolute;
    bottom: 5px;
}
.userInfo .menu-list .giftselect .price-area{width: 100%;}
.giftList h3{
    font-size: 1.1rem;
    line-height: 1.3!important;
    color: #3F3F3F;
    margin-bottom: 0;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sendMail .pageImgTtl::before{
    background-image: url("../img/icon-notice-share.svg");
    top: 10%;
}
.userInfo .menu-list{
    width: 100%;
    position: relative;
}
.userInfo .menu-list .text{border-left: none;}
/*owner側参列者リスト*/
.attendance-list{
    background-color: #ffffff;
    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03);
    margin-bottom: 10px;
}
.attendance-list .attendance-ceremony{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 5px;
    padding: 5px;
}
.attendance-list .attendance-ceremony p{
    display: flex;
    align-items: center;
    margin-right: 15px;
}
.attendance-list .attendance-ceremony span{
    height: 15px;
    width: 15px;
    border-radius: 7px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    margin-right: 5px;
}
.attendance-list .attendance-ceremony span.attend{background-color: #7F8BA0;}
.attendance-list  .namearea{padding: 5px 5px 15px;}
.attendance-list .companyName{
    font-size: .9rem;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 3px!important;
    color: #3a3a3a;
}
.attendance-list .companyGroup {
    font-size: .8rem;
    line-height: 1.1rem;
    color: #3a3a3a;
}
.attendance-list .userName {
    margin: 5px 0 0 10px;
    font-size: 1.2rem;
}
.attendance-list .userName span{font-size: .9rem}
/*香典帳*/
.koden-list{padding-bottom: 70px;}
.editKoden .pageImgTtl::before{background-image: url("../img/icon-edit.svg");}
.btnToPost {
    position: fixed;
    right: 3.5%;
    bottom: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.8rem;
    color: #FFF;
	background-color: #6E5CF4;
    width: 70px;
    height: 70px;
    border-radius: 40px;
	z-index: 5;
}
.btnToPost:hover{color: #ffffff!important;}
.openbtnToPost{bottom: 30px;}
.mainNoticeList .btnToPost {line-height: 2.2;}
.btnToPost svg {
	width: 1.6rem;
	height: auto;
}
/*画像共有*/
.chatMain .pageImgTtl::before{
    background-image: url("../img/icon-chat.svg");
}
.openchat{
    display: block;
    padding-top: 10px;
}
.openchat img{
    width: 40px;
    margin-bottom: 3px;
}
.reload-link{
    font-size: .9rem;
    letter-spacing:normal;
    position: absolute;
    right: 0;
    bottom: 5px;
    color: #939191;
}
/*チャット*/
.chat-area{
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    padding: 3%;
    overflow: auto;
    min-height: 81vh;
}
.chat-conversation .delete-msg{
    text-align: center;
    width: 80%;
    padding-bottom: 2px;
    margin: 15px auto;
    font-size: 12px;
    color: #404040;
    background-color: #eeeeee;
    border-radius: 10px;
}
.chat-conversation .font-size-11{font-size: 11px;}
.message .upper-btn .bx-rotate-left{
    font-size: 16px;
    margin: -4px 3px 0 0;
}
.chat-conversation li{clear: both;}
.chat-conversation .conversation-list{
    margin-bottom: 24px;
    max-width: 600px;
    width: 93%;
}
.chat-conversation .conversation-list img{width: 100%;}
.chat-conversation .conversation-list .ctext{width: 88%;}
.chat-conversation .right .conversation-list .ctext{width: auto;}
.chat-conversation .conversation-list .ctext-wrap{
    background-color: #ffffff;
    border: 1px solid #EAEAEA;
    border-radius: 0 8px 8px 8px;
    padding: 8px;
    width: fit-content;
    word-break: break-all;
    font-size: .9rem;
    color: #3b3b3b;
}
.chat-conversation .conversation-list .ctext-wrap > div{
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    font-size: 10px;
}
.chat-conversation .conversation-list .ctext-wrap .file{
    display: flex;
    align-items: center;
}
.chat-conversation .conversation-list .ctext-wrap .file a{max-width: 94%;}
.chat-conversation .conversation-list .ctext-wrap .file a > div{max-width: 100%;}
.chat-conversation .conversation-list .ctext-wrap h5{
    font-size: 11px;
    margin:0 3px 0 0;
    font-weight: bold;
    white-space: nowrap;
}
.chat-conversation .conversation-list .ctext-wrap .chat-time{
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.chat-conversation .conversation-list .ctext-wrap .chat-time i{
    font-size: 12px;
    margin-right: 0.1rem!important;
}
.chat-conversation .conversation-list .ctext-wrap .file i{
    font-size: 20px;
    color:#2a3042;
    margin-right: 3px;
}
.chat-conversation .conversation-list .ctext-wrap .file .file-ttl{
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    word-break: break-all;
}
.chat-conversation .conversation-list .ctext-wrap .file .file-size{
    font-size: 11px;
    text-align: left;
}
.chat-conversation .conversation-list .ctext-wrap a{
    margin:0 3px;
    display: flex;
    align-items: center;
}
.chat-conversation .conversation-list .ctext-wrap a i{
    font-size: 14px;
    margin-right: 0;
}
.chat-conversation .conversation-list .ctext-wrap .read,
.chat-conversation .conversation-list .ctext-wrap .read i{
    color: #556ee6;
    white-space: nowrap;
}
.chat-conversation .conversation-list .ctext-wrap .read{margin-right: 5px;}
.chat-conversation .conversation-list .ctext-wrap a.delete,
.chat-conversation .conversation-list .ctext-wrap a.delete i{
    color: #f46a6a;
    white-space: nowrap;
}
.chat-conversation .right .conversation-list{float: right;}
.chat-conversation .right .conversation-list .ctext-wrap {
    border-radius: 8px 0 8px 8px;
    background-color: #fffff4;
    float: right;
}
.chat-input-section{
    padding: 10px;
    background-color: #ffffff;
    border-top: 1px solid #eeeeee;
    width: 100%;
    position:absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: fixed;
    bottom: 0;
}
.chat-input-section .form-control{
    display: block;
    width: 100%;
    padding: .47rem .75rem;
}
.chat-input-section .col{padding: 0;}
.chat-input-section .chat-input-links {
    position: absolute;
    right: 16px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.chat-input-section .chat-input-links ul,
.chat-input-section .chat-input-links label{margin-bottom: 0;}
.chat-input-section .chat-input-links i {font-size: 18px;}
.chat-input-section .btn-rounded{border-radius: 50%;}
.chat-input-section .chat-input {
    border-radius: 30px;
    background-color: #eff2f7!important;
    border-color: #eff2f7!important;
    padding-right: 50px;
}
.chat-input-section label.btnUpfile{
    background: none;
    box-shadow: none;
    color: #495057;
}
.chat-input-section .btn-success{
    padding: .47rem .75rem;
    margin-left: 10px;
    color: #ffffff;
}
/*返礼対象*/
.trSelect {
    border: 1px solid #CCC;
    padding: 8px;
    font-size: .9rem;
}
.trSelect[disabled]{
    cursor: not-allowed;
    background-color: #eee;
    opacity: 1;
    appearance: none;
}
/*お礼メール*/
.sendMail h3{
    font-size: 1rem;
    color: #3F3F3F;
}
.sendMail h3 > span{font-size: 1.2rem}
.sendMail .famenameGroup{
    margin-bottom: .5rem;
    line-height: 1.4rem;
    color: #3F3F3F;
}
.sendMail .famenameGroup .companyName{font-size: 1rem;}
.sendMail .famenameGroup .companyGroup{font-size: .9rem;}

/*入力フォームh2タイトル*/
.ttlUnderline {
	font-size: 1rem!important;
    text-align: center!important;
	padding: 2.5% 0!important;
    color: #3F3F3F!important;
	letter-spacing: 2px!important;
	margin-bottom: 4%;
}
.ttlUnderline span{
    font-size: .75rem;
    letter-spacing: 1px;
}

/*=============================================================== 　    
# 商品の手配
==============================================================*/
.orderList .pageImgTtl::before,
.giftListMain .pageImgTtl::before, 
.cartMain .pageImgTtl::before, 
.orderCompletedMain .pageImgTtl::before, 
.giftDetailMain .pageImgTtl::before {
	background-image: url("../img/icon-okuyami.svg");
}
/*葬儀用商品のご手配*/
.funeralorder .pageImgTtl::before,
.funeralcart .pageImgTtl::before,
.funeralconfirm .pageImgTtl::before{
	background-image: url( "../img/icon-okuyami.svg");
    top: -20%;
}
/*自宅用商品のご手配*/
.funeralhomeorder .pageImgTtl::before,
.funeralhomecart .pageImgTtl::before,
.funeralhomeconfirm .pageImgTtl::before{
	background-image: url( "../img/icon-home-okuyami.svg");
    top: -5%;
}
/*返礼品のご手配*/
.tabLabel{width:calc(100% / 3) ;}
.funeralreturnorder .pageImgTtl::before {background-image:url( "../img/icon-returnitem.svg");}
/*香典代行のご手配*/
.funeralgiftorder .pageImgTtl::before,
.funeralgiftcart .pageImgTtl::before,
.funeralgiftreturnconfirm .pageImgTtl::before{
	background-image:url( "../img/icon-koden.svg");
}

/*タブ切替*/
.tab-content > .tab-pane {display: none;}
.tab-content > .active {display: block;}
.transaction-link{
    font-size: .7rem;
    letter-spacing:normal;
    position: absolute;
    right: 0;
    bottom: 5px;
    color: #939191;
}
.transaction-link img{
    width: 7px;
    margin:-3px 0 0 5px;
}
/*ご手配画面トップ・商品一覧*/
.menu-list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    border-radius: 0;
    margin-bottom: 2%;
    color: #3F3F3F;
    background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 50%, #ffffff 50%, #ffffff 100%);
    box-shadow: 1px 2px 3px rgb(0 0 0 / 10%);
}
.orderList .menu-list{position: relative;}
.orderList .menu-list ,
.orderList .menu-list .menu-icon{height: 70px;}
.orderList .menu-list .giftselect{
    position: absolute;
    bottom: 3px;
    width: 85%;
}
.orderList .menu-list .text{
    padding:2px 0 0 0;
    margin-left: 5px;
    border-left: none;
}
.orderList .menu-list .giftName{margin-top: 3px;}
.menu-list .menu-icon{
    width: 60px;
    border-left: 1px solid #eae6e6;
    border-bottom: 1px solid #eae6e6;
    margin-right: 1%;
    position: relative;
}
.menu-list .menu-icon::before {
    border-style: solid;
    border-width: 50px 50px 0 0;
    bottom: 0;
    right: 0;
    content: "";
    height: 0;
    position: absolute;
}
.menu-list .menu-icon img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 35%;
}
.menu-list .product-thumbnail{
    height: 70px;
    width: 70px;
    background-color: #ffffff;
    margin-right: 0;
    border: none;
    border-right: 1px solid #d5d5d5;
    position: relative;
}
.menu-list .product-thumbnail::after{
    position: absolute;
    content: url("../img/icon-search.svg");
    bottom: 10px;
    right: 5px;
    width: 15px;
    height: 15px;
    display: inline-block;
}
.menu-list .product-thumbnail::before{border: none;}
.menu-list .product-thumbnail img{
    width: 100%;
    height: 70px;
    display: block;
    object-fit: cover;
}
.menu-list .text{
    width: 82%;
    padding:2px 0 4px 0;
}
.menu-list h2{
    font-size: 1.1rem;
    margin-bottom: 0;
    padding:5px 5px 5px 8px;
}
.menu-list p{
    font-size: .9rem;
    margin:5px 0 5px 10px;
    color: #787878;
    width: 100%;
}
.menu-list .menu-arrow{
    width: 15px;
    margin-right: 10px;
    opacity: .7;
}
.searchzip-btn{
    color: #ffffff;
    padding: 5px 8px;
    margin-bottom: 0.5rem;
    font-size: .8rem;
}
.input-area label{
    position: relative;
    display: inline-block;
    padding: 0 5px;
}
/*香典返し*/
.giftReturn .pageImgTtl::before,
.funeralgiftreturncart .pageImgTtl::before,
.funeralgiftconfirm .pageImgTtl::before{
	background-image: url("../img/icon-returnitem.svg");
    top: -3px;
}
.return{
    border-radius:0 0 5px 5px;
    letter-spacing: 1px;
    color: #ffffff!important;
    font-size: .7rem!important;
    margin-right: 5px;
    padding: 3px 9px;
    display: none;
    position: absolute;
    right:0;
    top: -3px;
}
.return-day{
    font-size: .7rem;
    letter-spacing: 1px;
    color: #939191;
    display: none;
    right: 65px;
    top: 0;
}
.returned{display: block!important;}
.giftReturn .nameArea{
    padding-bottom: 5px;
    border-bottom: 1px solid #dee2e6;
}
.giftReturn .companyName{width: 80%;}
.return-info{
    width: 100%;
    padding: 1% 3% 0;
    font-size: .85rem;
    line-height: 1.3rem;
}
.return-info .koden{
    border: 1px solid #cccccc;
    border-radius: 3px;
    padding: 4px 3px;
    width: 25%;
    font-size: .75rem;
    color: #939191;
    text-align: center;
}
.return-info .select-item{width: 73%;}
.return-info .select-item select{width: 100%;}
.return-info .koden img{
    width: 10px;
    margin:-3px 5px 0 0;
}
.show-add{display: none;}
.returnGift .name{
    width: 90%;
    float: left;
    margin-bottom: 5px;
    font-size: .6rem;
    color: #939191;
}
.show-add-label{
    position: relative;
    width: 10%;
    float: right;
}
.show-add-label:after{
    content:url( "../img/menu-downarrow.svg");
    width: 15px;
    position: absolute;
    right: 0;
    top:15px;
}
.address-content{
    display: block;
    height: 0;
    opacity: 0;
    transition: .5s;
    clear: both;
    visibility: hidden;
    color: #939191;
    font-size: .8rem;
    line-height: 1.1rem;
    padding-right: 5%;
}
.show-add:checked + .show-add-label:after{
    content:url( "../img/menu-downarrow.svg");
    transform: rotateX(180deg);
}
.show-add:checked + .show-add-label + .address-content{
    height:auto;
    opacity: 1;
    visibility: visible;
}
.btnArea{
    margin-top: 2rem;
    display: flex;
    justify-content:center;
}
.btnArea a{color: #3F3F3F;}
.btnArea .contactbtn{
    text-align: center;
    line-height: 1.4;
    display: inline-block;
    padding: 2%;
    border-radius: 5px;
    width: 70%;
    background-color: #3F3F3F;
    box-shadow: 1px 2px 3px rgb(0 0 0 / 15%);
    margin: 0 auto 3%;
    color: #3F3F3F;
    text-shadow: none;
    background: linear-gradient(90deg, rgba(255,255,255,0.4), rgba(255,255,255,0.8));
    border: 1px solid #FFF;
    cursor: pointer;
}
.btnArea .contactbtn.disabled {
    background-color: #c7c3c3;
    color: #ffffff;
    cursor: default;
}
.funeralorder .menu-list::before,
.funeralhomeorder .menu-list::before{
    border-style:none;
}
.menu-list .giftName {
    padding-left: 5px;
    font-size: .9rem;
    line-height: 1.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 0 0 2px;
}
.menu-list .salesType{
    padding: 2px 8px 3px;
}
.menu-list .giftselect{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 5px;
    padding-top: 3px;
    padding: 3px 0 1px 5px;
}
.menu-list .trSelect{
    padding: 2px 6px;
    font-size: .8rem;
    z-index: 1;
}
.menu-list .price{
    font-size: .8rem;
    color: #666666;
    letter-spacing: 1px;
}
.giftselect .select-area{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    margin-top: 4px;
}
.menu-list .giftselect .order-num{
    width: 30%;
    border: 1px solid #cccccc;
    padding: 1px 0 0 0;
    font-size: .8rem;
    border-radius: 3px;
    text-align: center;
}
.menu-list .giftselect .order-num:focus{
    border: 1px solid #cccccc;
    outline: none;
}
.giftselect .price-area{width: 60%;}
.giftselect .select-area{width:40%;}
.giftselect .select-area .plus,
.giftselect .select-area .minus{
    color: #ffffff;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    margin-right: 5px;
    position: relative;
}
.giftselect .select-area .plus img,
.giftselect .select-area .minus img{
    width: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.giftselect .select-area .plus{margin-left: 5px;}
.giftselect .select-area .minus{margin-left: 5px;}
.giftselect .select-area .plus:focus,
.giftselect .select-area .minus:focus{
    border: none;
    outline: none;
}
.giftselect .select-area .btnSelect{
    color: #ffffff;
    font-size: .7rem;
    text-align:center;
    padding: 3px 10px;
    border-radius: 3px;
    margin-left: 5px;
}
/*サムネイルモーダル*/
.modal {
    display: none;
    position: fixed;
    top: 0;
	bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
	max-width: 1024px;
	background-color: rgba(0,0,0,0.75);
	z-index: 11;
}
.modalWh {background-color: rgba(255,255,255,0.85);}
.modalContent {
    background-color: #fff;
    left: 50%;
    position: absolute;
    top: 110%;
    transform: translate(-50%,0);
    width: 94%;
    border-radius: 5px;
    box-shadow: 1px 2px 3px rgb(0 0 0 / 15%);
}
.modalContent .boxBgImg{
    background-size: 68%;
    background-position: right bottom;
}
.modalContent .headerArea{position: relative;}
.modalContent .Closebtn{
    color: #BBBBBB;
    font-size: 2rem;
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    right: 10px;
}
.modalContent .ttlUnderline{
    display: flex;
    justify-content: center;
}
.modalContent .ttlUnderline img{
    width: 20px;
    filter: invert(0%) sepia(86%) saturate(420%) hue-rotate(299deg) brightness(225%) contrast(60%);
    margin-right: 5px;
    margin-top: -2px;
}
.modalContent .alert{margin-bottom: 0;}
.modalContent .alert .ttlUnderline img{ filter:none;}
.modalContent .text{
    font-size: 1rem!important;
    line-height: 2rem;
    background-color: #ffffff;
    padding: 2rem 1rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin: 2rem 2rem 1rem 2rem;
}
.modalContent .btn-area{
    padding: 5% 8% 8%!important;
}
.modalContent h2 {
    font-size: 1rem;
    letter-spacing: 2px!important;
    text-align: center;
    margin-bottom: 0;
}
.modalContent .alert .ttlUnderline{
    background-color: #fde1e1!important;
    color: #924040!important;
}
.modalContent .alert .text{
    color: #924040;
    border: 1px solid #924040;
}
.modalContent .alert .btnSubmit{
    background-color:#f46a6a;
    width: 70%!important;
}

.form-group{margin-bottom:0rem;}
.modalContent p{font-size: .9rem;}
.modalConfirm {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.modalConfirm button, .modalContent .modalConfirm .button {
    width: 48%;
    min-width: 48%;
    margin: 0;
}
.modalConfirm button:nth-child(even), .modalContent .modalConfirm .button:nth-child(even) {margin-left: 4%;}
.modalConfirm .btnBack {
    color: #74788d;
    background-color: #FFF;
    border: 1px solid #74788d;
}
.modalConfirm .btnalert {
    color: #ffffff;
    background-color: #f46a6a;
    width: 70%!important;
}
.modalContent .attention {
    color: #AF0000;
    text-align: center;
    font-size: 0.93rem;
}
.show .modalContent{
	top: 50%;
	transform: translate(-50%,-50%);
}
.modal > .modalClose {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}
.modalContent > div {padding: 3% 8% 5%;}
/*情報入力画面*/
.input-zip{
    width: 30%;
    margin-right: 3px;
}
.funeralcart,
.funeralhomecart,
.funeralgiftcart{
    color: #3F3F3F;
}
.cancel {
    font-size: .8rem;
    width: 17px;
    height: 17px;
    background-color: #cccccc;
    color: #ffffff;
}
.cancel:focus {outline: none;}
.order-list li{border-bottom: 1px solid #dee2e6;}
.listGroupGift .giftName{
    font-size: .9rem;
    line-height: normal;
}
.listGroupGift .name{
    font-size: .6rem;
    color: #939191;
}
.listGroupGift .salesType{
    margin-right: 15px;
    width: 40px;
}
.listGroupGift .name span{font-size: .85rem;}
.subtotal {
	font-size: 0.85rem;
    letter-spacing: 1px;
	display: flex;
	align-items: center;
	justify-content:space-between;
    padding: 8px 0 5px;
}
.subtotal .salesType{
    width: 25%;
    padding: 1px 6px 3px;
}
.mt-m3{margin-top: -3px;}
.totalPrice {
	text-align: right;
    padding-top: 2px;
    position: relative;
}
.totalPrice .price {
    font-size: 1.2rem;
    letter-spacing: 1px;
}

/*カテゴリセレクトラジオ*/
.category-select{
    display: flex;
    justify-content:space-around;
}
.category-select input[type=radio] {display: none;}
.category-select label {
    position: relative;
    padding-left: 24px;
    line-height:30px;
    border-left: none!important;
}
.category-select input[type=radio] + label::before {
    position: absolute;
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ccc;
    left: 0;
    top: 6px;
}
.category-select input[type=radio] + label::after {
    position: absolute;
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    left: 4px;
    top: 10px;
    opacity: 0;
    transition: .3s;
}
.category-select input[type=radio]:checked + label::after {opacity: 1;}
.category-select input[type=radio]:checked + label::before{border-color: #666;}
.select-pay{margin: 20px 0 10px;}
.select-pay p{
    padding: 0 10px;
    font-size: .9rem;
}
.select-pay .receipt-check{margin: 10px 0 0 10px;}
.select-pay .receipt-check input[type="checkbox"] + label{
    cursor: pointer;
    padding-left: 30px;
    vertical-align: middle;
    position: relative;
}
.select-pay .receipt-check input[type="checkbox"]+ label::before,
.select-pay .receipt-check input[type="checkbox"]+ label::after {
    content: "";
    display: block; 
    position: absolute;
}
.select-pay .receipt-check input[type="checkbox"]+ label::before {
    background-color: #fff;
    border-radius: 0%;
    border: 1px solid #666464;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    top: 50%;
    left: 5px;
}
.select-pay .receipt-check input[type="checkbox"]:checked+ label::after {
    border-bottom: 2px solid #666464;
    border-left: 2px solid #666464;
    opacity: 0;
    height: 8px;
    width: 11px;
    transform: rotate(-45deg);
    top: 5px;
    left: 10px;
    opacity: 1;
}
.select-pay li{
    list-style-type:none;
    margin-left: 15px;
    position: relative;
}
.select-pay li::before{
    position: absolute;
    top: 7px;
    left: -12px;
    display: inline-block;
    width: 4px;
    height: 4px;
    content: '';
    border-radius: 100%;
    background: #6C6C6C;
}
.bank-accounts,
.order-accounts{
    font-size: .9rem;
    background-color: #ffffff;
    width: 95%;
    margin: 20px auto;
    padding: 10px;
    border: 1px solid #eeeeee;
    border-radius: 5px;
}
.order-accounts{padding: 20px 10px;}
.bank-accounts dl{
    display: flex;
    margin-bottom: 3px;
}
.bank-accounts dt{
    font-weight: normal;
    width: 20%;
}
.bank-accounts dd{width: 80%;}
.bank-accounts p{
    text-align: center;
    padding-bottom: 5px;
    margin-bottom: 10px;
    border-bottom: 1px solid #dddddd;
}
.payment-warning{
    color: #6C6C6C;
    font-size: 0.8rem;
    background-color: #f5f5f5;
    padding: 10px;
    margin-bottom: 10px;
    border: 4px double #f46a6a;
    box-shadow: 0 0.75rem 1.5rem rgba(255,176,176,.05);
}
.payment-warning p{
    color: #f46a6a;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}
.payment-warning img{
    width: 15px;
    margin-right: 3px;
}
.payment-warning span{font-size: 11px;}
.select-pay dl{
    display: flex;
    margin-bottom: 3px;
}
.select-pay dt{
    width: 8.5%;
    font-weight: normal;
}
.btnTypeG{
    font-size: .8rem;
    color: #FFF;
    width: auto;
    padding: 1% 3%;
    margin: 0;
}
/*swal（アラート）カスタマイズ*/
.swal-text:first-child{margin-top: 30px;}
.swal-overlay--show-modal .swal-modal{
    -webkit-animation: showSweetAlert 0s;
    animation: showSweetAlert 0s;
}
.swal-button-container{margin: 0;}
.swal-button{
    padding: 5px 20px;
    outline: none;
    border: none;
    border-radius: 3px;
    font-size: 12px;
}
.swal-modal:focus{
    outline: none;
    border: none;
}
.swal-text{font-size: 1rem;}
.swal-footer{
    margin-top: 0;
    padding: 10px 16px 15px;
}
/*送付先選択*/
.radioStyle [type=radio] {
	display: none;
	box-sizing: border-box;
    padding: 0;
	position: absolute;
    left: -9999px;
    opacity: 0;
}
.radioStyle label {
	position: relative;
    cursor: pointer;
    display: inline-block;
    transition: .28s ease;
    user-select: none;
	width: 100%;
	margin: 0;
    padding-left: 25px;
}
.radioStyle label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 1px;
	margin: 4px;
	width: 18px;
	height: 18px;
	z-index: 0;
	transition: .28s ease;
	background-color: #FFF;
	border: 1px solid #606060!important;
	border-radius: 50%;
}
.radioStyle label:after {
	content: '';
	position: absolute;
	left: 1px;
	top: 2px;
	margin: 4px;
	width: 16px;
	height: 16px;
	transition: .28s ease;
	border-radius: 50%;
}
.radioStyle input:checked+label:before {
	animation: ripple 0.2s linear forwards;
	border-radius: 50%;
}
.radioStyle input:checked+label:after {
	animation: ripple 0.2s linear forwards;
	transform: scale(0.75);
	z-index: 0;
}
.memoriesSetting .radioStyle label {font-size: 1.07rem;}
.other-address{display: none;}
/*個人情報の取扱について欄*/
.privacy-policy-h3{
    color: #000000!important;
    text-align: center;
    width: 100%!important;
    margin-bottom: 0.5rem!important;
    font-size: 1.1rem!important;
}
.privacy-policy-text {
    border: 1px solid #b9b9b9;
    height: 140px;
    overflow-y: scroll;
    padding: 10px 10px 0 10px;
    font-size: .9rem;
}
.privacy-policy-text ul{margin: 10px 0 20px 20px;}
.privacy-policy-text li{
    margin-bottom: 5px;
    list-style-type: decimal;
}
/*参列する、同意するチェックボタン*/
.join-btns{
    display: flex;
    align-items: center;
    margin-right: 15px;
}
.input-area .join-btns label{border: none;}
.join-btns .checkbox-label {margin-left: 0!important;}
.agree-btns input,
.join-btn input[type=checkbox]{display: none;}
.agree-btns .checkbox-label,
.join-btns .checkbox-label{
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 0px 0 0 25px;
    position: relative;
    width: auto;
    margin-left: 15px;
    margin-bottom: 0;
}
.agree-btns .checkbox-label::before,
.join-btns .checkbox-label::before{
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    content: '';
    display: block;
    height: 20px;
    width: 20px;
    position: absolute;
    left: -1px;
    top: 2px;
}
.agree-btns .checkbox-label::after,
.join-btns .checkbox-label::after{
    content: '';
    display: block;
    height: 12px;
    width: 12px;
    border-radius: 10px;
    left: 3px;
    top: 6px;
    opacity: 0;
    position: absolute;
}
.agree-btns input[type=checkbox]:checked + .checkbox-label::before,
.join-btns input[type=checkbox]:checked + .checkbox-label::before{border-color: #666;}
.agree-btns input[type=checkbox]:checked + .checkbox-label::after,
.join-btns input[type=checkbox]:checked + .checkbox-label::after {opacity: 1;}
.join-btns .checkbox-label::after{background-color: #A296B3;}
.agree{
    display: flex;
    justify-content: center;
    align-items: center;
}
.agree span{padding-top: 5px;}
.btnarea .contactbtn{
    text-align: center;
    font-size: 1.06rem;
    line-height: 1.4;
    display: inline-block;
    padding: 2%;
    border-radius: 5px;
    width: 70%;
    background-color: #414141;
    box-shadow: 1px 2px 3px rgb(0 0 0 / 15%);
    margin: 0 auto 3%;
    color: #414141;
    text-shadow: none;
    background: linear-gradient(90deg, rgba(255,255,255,0.4), rgba(255,255,255,0.8));
    border: 1px solid #FFF;
    cursor: pointer;
}
.contactbtn.disabled {
    background-color: #c7c3c3;
    color: #ffffff;
    cursor: default;
}
/*open側弔文の手配*/
.condolence-example .pageImgTtl::before,
.condolence-preview .pageImgTtl::before{
    background-image: url("../img/icon-fuho.svg");
    top: -13%;
}
.funeral_message-example-aera{
    height: 300px;
    overflow-y: scroll;
}
.condolence-example-list{
    background-color: #ffffff;
    font-size: .9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem!important;
    border-radius: 0;
    margin: 0 .5rem;
    color: #3F3F3F;
    border-bottom: 1px solid #cccccc;
}
.condolence-example-list .text{
    text-align: justify;
    line-height:normal;
    border:none;
    padding: 0 30px 0 0;
    margin: 0;
}
.condolence-example-list .select-btn{width: 12px;}

/*弔文プレビュー*/
.tategaki-wrap {
    border: 1px solid #bbbbbb;
    margin: 0 auto;
    width: 70%;
    color: #3F3F3F;
}
.box-out{
    width: 100%;
    height:55vh;
    padding:2em;
    margin: 1em auto;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background-image:url("../img/condolence/image_1.jpg");
}
.box-out-1{
    background-image:url("../img/condolence/image_1.jpg");
    width: 100%;
    height:55vh;
    padding:2em;
    margin: 1em auto;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.box-out-2{
    background-image: url( "../img/condolence/image_2.jpg");
    width: 100%;
    height:55vh;
    padding:2em;
    margin: 1em auto;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.box-out-3{
    background-image: url( "../img/condolence/image_3.jpg");
    width: 100%;
    height:55vh;
    padding:2em;
    margin: 1em auto;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.box-out-4{
    background-image: url( "../img/condolence/image_4.jpg");
    width: 100%;
    height:55vh;
    padding:2em;
    margin: 1em auto;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.box-out-5{
    background-image: url( "../img/condolence/image_5.jpg");
    width: 100%;
    height:55vh;
    padding:2em;
    margin: 1em auto;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.box-out-6{
    background-image: url( "../img/condolence/image_6.jpg");
    width: 100%;
    height:55vh;
    padding:2em;
    margin: 1em auto;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.box-out-7{
    background-image: url( "../img/condolence/image_7.jpg");
    width: 100%;
    height:55vh;
    padding:2em;
    margin: 1em auto;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.box-out-8{
    background-image: url( "../img/condolence/image_8.jpg");
    width: 100%;
    height:55vh;
    padding:2em;
    margin: 1em auto;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.tate {writing-mode: vertical-rl;}
.tate-right{padding:0 1em 0 0;}
.tate-left{
    position: absolute;
    left:0em;
    bottom:10em;
    font-size: 12px;
}
.company_name{font-size:1.375em;}
.atena{
    font-size:1em;
    padding-left:30px;
    color:#000;
    white-space: pre-wrap;
}
.honbun {
    font-size:.9em;
    padding-top:20px;
    padding-left:30px;
    line-height:1.6em;
    white-space: pre-wrap;
}
.after_company_name {
    padding-top:80px;
}
.after_position {
    font-size:1.375em;
    padding-top:40px;
    display: inline;
    margin-bottom: 1em;
}
.after_name {
    font-size:1.375em;
    padding-top:108px;
}
@media ( max-width : 700px ) {
    .box-out{
        width: 100%;
        height:60vh;
        padding:0;
        margin: 0 auto;
        background-image: url( "../img/condolence/image_1.jpg");
        background-position: center center;
        background-size:100%;
        background-repeat: no-repeat;
        position: relative;
    }
    .box-out-1{
        background-image: url( "../img/condolence/image_1.jpg");
        background-position: center center;
        width: 100%;
        height:55vh;
        padding:0;
        margin: 0 auto;
        background-size:100%;
        background-repeat: no-repeat;
        position: relative;
    }
    .box-out-2{
        background-image: url( "../img/condolence/image_2.jpg");
        background-position: center center;
        width: 100%;
        height:55vh;
        padding:0;
        margin: 0 auto;
        background-size:100%;
        background-repeat: no-repeat;
        position: relative;
    }
    .box-out-3{
        background-image: url( "../img/condolence/image_3.jpg");
        background-position: center center;
        width: 100%;
        height:55vh;
        padding:0;
        margin: 0 auto;
        background-size:100%;
        background-repeat: no-repeat;
        position: relative;
    }
    .box-out-4{
        background-image: url( "../img/condolence/image_4.jpg");
        background-position: center center;
        width: 100%;
        height:55vh;
        padding:0;
        margin: 0 auto;
        background-size:100%;
        background-repeat: no-repeat;
        position: relative;
    }
    .box-out-5{
        background-image: url( "../img/condolence/image_5.jpg");
        background-position: center center;
        width: 100%;
        height:55vh;
        padding:0;
        margin: 0 auto;
        background-size:100%;
        background-repeat: no-repeat;
        position: relative;
    }
    .box-out-6{
        background-image: url( "../img/condolence/image_6.jpg");
        background-position: center center;
        width: 100%;
        height:55vh;
        padding:0;
        margin: 0 auto;
        background-size:100%;
        background-repeat: no-repeat;
        position: relative;
    }
    .box-out-7{
        background-image: url( "../img/condolence/image_7.jpg");
        background-position: center center;
        width: 100%;
        height:55vh;
        padding:0;
        margin: 0 auto;
        background-size:100%;
        background-repeat: no-repeat;
        position: relative;
    }
    .box-out-8{
        background-image: url( "../img/condolence/image_8.jpg");
        background-position: center center;
        width: 100%;
        height:55vh;
        padding:0;
        margin: 0 auto;
        background-size:100%;
        background-repeat: no-repeat;
        position: relative;
    }
    .tate-right{padding:0em 0em 0 0;}
    
    .company_name{font-size:.9em;line-height: 1em;}
    .atena{padding:20px;white-space: pre-wrap;}
    .honbun {
        font-size: 12px;
        padding-top:40px;
        padding-left:30px;
        line-height:1.4em;
        white-space: pre-wrap;
    }
    .after_company_name {font-size: 12px;padding-top:80px;padding-bottom: 20px;line-height:1.4em;}
    .after_position {
        font-size: 12px;
        padding-top: 40px;
        display: inline;
        margin-bottom: 1em;
    }
    .after_name {font-size: 12px;padding-top:108px;line-height: 1.2em;}
}

/*情報内容確認*/
.funeralconfirm,
.funeralhomeconfirm,
.funeralgiftconfirm{
    color: #3F3F3F;
}
.funeralconfirm-con p{
    font-size: .9rem;
    line-height: 1.3rem;
    margin-left: 10px;
}
.funeralconfirm-con dl{
    padding: 0 5px;
    border-left:solid 3px #c9b2c5;
    border-bottom: 1px dotted #dee2e6;
    margin-bottom: 10px;
    padding-bottom: 3px;
}
.funeralconfirm-con dt{
    font-weight:normal;
    font-size: .8rem;
    color: #696969;
}
.funeralconfirm-con dd{
    font-size: .9rem;
    padding: 0 5px;
}


/*ご手配完了*/
.completeMsg {
	background-color: #FFF;
	border-radius: 5px;
	box-shadow: 1px 2px 3px rgba(0,0,0,0.1);
	padding: 5%;
    width: 90%;
    margin: 0 auto;
 }
.funeralcomplete .boxBgImg {
    background-size: 80%!important;
    background-position: right bottom;
}
.completeMsg .img {
    width: 150px;
    opacity: 0.5;
    margin: 50px auto 20px;
}
.completeMsg .msg-txt {
	font-size: .9rem;
	letter-spacing: 1px;
    color: #3F3F3F;
    margin-bottom: 25px;
    text-align: center;
}
/*payment-error*/
.payment-error .ttlUnderline img{
    width: 20px;
    margin-right: 5px;
}
.payment-error{
    text-align: center;
    background-color: hsl(0deg 0% 100%);
    border-radius: 5px;
    box-shadow: 1px 2px 3px rgb(0 0 0 / 10%);
    padding: 5%;
    width: 90%;
    margin: 3rem auto 2rem;
    background-size: 60%;
}
.payment-error .boxBgImg{
    background-size: 68%;
    background-position: right bottom;
}
.payment-error .ttlUnderline img{ filter:none;}
.payment-error .ttlUnderline{
    background-color: #fde1e1!important;
    color: #924040!important;
}
.payment-error .text{
    font-size: .9rem!important;
    line-height: 2rem;
    background-color: #ffffff;
    color: #924040;
    padding: 2rem 1rem;
    border: 1px solid #924040;
    border-radius: 3px;
    margin: 2rem 2rem 1rem 2rem;
}
.payment-error .btn-area{
    padding: 5% 8% 8%!important;
}
.payment-error .btnSubmit{
    background-color:#f46a6a;
    width: 70%!important;
}
/*ご手配履歴*/
.funeralhistory .pageImgTtl::before {background-image:url( "../img/icon-history.svg");}
.funeral-history{
    background-color: #ffffff;
    max-width: 400px;
    margin:0 auto 3%;
    padding-bottom: 2%;
    color: #3a3a3a;
    box-shadow: 1px 2px 3px rgb(0 0 0 / 10%);
}
.funeral-history .tagArea {
    font-size: .7rem;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3%;
    border-bottom: 1px solid #eff2f7;
}
.funeral-history .tagArea p {
    font-size: .7rem;
    letter-spacing: 1px;
    color: #939191;
}
.funeral-history h3{
    font-size: 1.1rem;
    padding-bottom: 3%;
    margin: 5% 0 0;
    text-align: center;
    border-bottom: 1px solid #dee2e6;
}
.funeral-history .listGroupGift{border-bottom: 1px solid #dee2e6;}
.funeral-history .salesType{margin-right: 0;}
.funeral-history .subtotal{
    margin-top: 0;
    padding-top: 0;
    border-top:none;
}
.funeral-history .totalPrice{
    border-bottom: none;
    font-size: .9rem;
}
.funeral-history .totalPrice .price{
    font-size: 1.1rem;
    letter-spacing: 1px;
}
.funeral-history .giftName {
    width: 55%;
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #3F3F3F;
}
.funeral-history .giftCount {font-size: .85rem;}
/*お問い合せ先*/
.contact-info{
    position: relative;
    width: 80%;
    margin: 25px auto 20px;
    padding: 10% 5%;
    font-size: .8rem;
    background-color: #ffffff;
    box-shadow: 1px 2px 3px rgb(0 0 0 / 10%);
    border-radius: 5px;
    text-align: center;
}
.contact-info::before,
.contact-info::after{
    position: absolute;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
}
.contact-info::before{top: 8px;}
.contact-info::after{bottom: 8px;}
.contact-info a{
    font-size: .9rem;
    text-decoration: underline;
}
.contact-info img{
    width: 12px;
    margin-right: 5px;
    margin-top: -5px;
}
.Ltd{
    color: #ffffff;
    font-size: .7rem;
    position:relative;
    width: 100%;
    bottom: 0;
    text-align: center;
}
/*===============================================================
   # アルバム
===============================================================*/
.postMemoriesMain .pageImgTtl::before, 
.postLetterMain .pageImgTtl::before{
	background-image: url("../img/icon-memory.svg");
}
.albumSetting{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    padding: 3%;
    border-bottom: 1px solid #eff2f7;
    color: #555555;
}
.scEventAnnounce {
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
}
.scEventAnnounce h3 {
	font-size: 1.78rem;
	text-align: center;
	letter-spacing: 1rem;
	text-indent: 1rem;
	margin-bottom: 9%;
}
.timeline{margin-bottom: 10px;}
.timelineUl li {
	position: relative;
	padding: 0 0 10% 5%;
}
.timelineUl li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.4rem;
	height: 100%;
	width: 1px;
}
.timelineUl li:last-child::before {content: none;}
.timelineUl li h2 {
	position: relative;
	font-size: 2rem;
	transform: translateX(-5.8%);
	margin-bottom: 2%;
    padding-left: 14px;
}
.timelineUl li h2 span{
    font-size: 1.2rem;
}
.timelineUl li h2::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -2px;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	border-radius: 10px;
}
.timelineUl li a {
	display: inline-block;
	text-align: center;
	width: 100%;
	margin-bottom: 4%;
    user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}
.timelineUl li img {
	box-shadow: 2px 3px 7px rgba(0,0,0,0.6);
	max-height: 380px;
    user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}
.timelineTopic {
	color: #6C6C6C;
    font-size: 0.8rem;
    background-color: #f2f2f2;
    border-bottom: 1px solid #d0d0d0;
    border-right: 1px solid #d0d0d0;
    padding:3% 5% 5%;
    font-family: 'Noto Sans JP', sans-serif;
    position: relative;
}
.timelineTopic::after{
    position: absolute;
    content: "";
    border-style: solid;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid #f2f2f2;
    border-left: 0;
    top: 10px;
    left: -5%;
}
.timelineTopic h3{
    text-align: center;
    font-size: 1rem;
    position: relative;
    font-family: 'Noto Serif JP', serif, YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝";
}
.timelineTopic h3::after{
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    width: 80%;
    height: 10px;
    left: 50%;
    transform: translateX(-50%);
    bottom: -13px;
}
.timelineTopic p{
    margin-top: 15px;
}
.timelineUl .post-area{
    padding: 7% 5%;
    margin-top: 15px;
    position: relative;
    border-bottom: 1px solid #d0d0d0;
    border-right: 1px solid #d0d0d0;
}
.timelineUl .owner-post-area{padding: 5% 5% 3%;}
.timelineUl .open-post-area{padding: 7% 5%;}
.timelineUl .post-area::after{
    position: absolute;
    content: "";
    border-style: solid;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 0;
    top: 10px;
    left: -5%;
}
.memoriesContents {
    margin-bottom: 4px;
    position: relative;
}
.memoriesContents .postName {
	font-size: 1.2rem;
    letter-spacing: 2px;
    color: #555555;
    position: absolute;
    right: 0;
}
.memoriesContents .postTxt {
	padding: 2% 0;
    color: #555555;
}
.memoriesContents .owner-btn-area{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 10px;
    border-top: 1px solid #cccccc;
}

.hideTxt {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -6px;
    left: 0;
    right: 0;
    bottom: -6px;
    color: #FFF!important;
    background-color: rgba(126,126,126,0.8);
    z-index: 2;
}
.memoriesContents .hideTxt {
    top:0;
    right: -6px;
    bottom: 6px;
    left: -6px;
}
/*ヒストリーモード投稿*/
label.btnUpfile {
    color: #ffffff;
    border-radius: 5px;
    text-align: center;
    font-size: .9rem;
    padding: 1.5%;
    box-shadow: 1px 2px 3px rgb(0 0 0 / 15%);
    width: 70%;
    line-height: 1.4rem;
    margin-top: 5px;
    border-left: none!important;
}
label.btnUpfile::before{display: none;}
.postMemoriesMain .pageImgTtl + .hr {margin: 3% 8% 9%;}
label.btnUpfile::after {
    width: 2px;
    height: 20px;
}
.btnUpfile input {display: none;}
.upfileView {
	overflow-x: auto;
    overflow-y: hidden;
	width: 100%;
    margin: 0 auto;
}
#preview,
#preview2,
#preview3{
    display: inline-flex;
    align-items: center;
}
#preview img,
#preview2 img,
#preview3 img{
    width: 60%;
    margin: 0 auto;
    height: auto;
}
/*ヒストリーモード非表示*/
.memoriesDisplays{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.memoriesDisplays label {
    position: relative;
    padding-left: 45px;
    cursor: pointer;
}
.memoriesDisplays label::before,
.memoriesDisplays label::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    border-radius: 50%;
    transition: .2s;
}
.memoriesDisplays label::before {
    background: #d0d2d9;
    border-radius: 12px;
    height: 24px;
    width: 40px;
    top: 50%;
    left: 0;
}
.memoriesDisplays label::after {
    background-color: #fff;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    top: 50%;
    left: 2px;
}
.memoriesDisplays input:checked + label::after {left: 18px;}
.memoriesContents {
	position: relative;
	margin-bottom: 2%;
}
.memoriesContents .hideTxt {
	top:0;
	right: -6px;
	bottom: 6px;
	left: -6px;
}
.btnDel {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.8rem;
	transition: 0.2s;
	border-radius: 20px;
	min-width: 50px;
	height: 24px;
	background-color: #7d0624!important;
	padding: 0 7px;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    color: #ffffff;
}
.btnDel span {
	display: none;
	margin-right: 2px;
}
.btnDel img {
	width: 14px;
    box-shadow: none!important;
    filter: brightness(4);
    margin-left: 5px;
}

/*==============================================================
   # 特定商取引法に基づく表記
============================================================== */
.transaction .pageImgTtl::before{
    background-image:url( "../img/icon-exclamation.svg");
    top: -7%;
}
.transaction dl{
    padding: 0 5px;
    border-bottom: 1px dotted #dee2e6;
    margin-bottom: 10px;
    padding-bottom: 3px;
    font-family: 'Noto Sans JP', sans-serif;
}
.transaction dt{
    font-weight: normal;
    font-size: .8rem;
    color: #696969;
}
.transaction dd{
    padding: 0 0 5px 5px;
    font-size: .9rem;
}
.transaction dd img{
    width: 15px;
    margin-right: 5px;
}
.transaction li{
    list-style-type: none;
    margin-left: 10px;
    position: relative;
}
.transaction li::before{
    position: absolute;
    top: 7px;
    left: -10px;
    display: inline-block;
    width: 4px;
    height: 4px;
    content: '';
    border-radius: 100%;
    background: #6b6b6b;
}
/*==============================================================
   # ご利用の流れ
============================================================== */
.flow .pageImgTtl::before{
    background-image:url("../img/logo-mark.svg");
    width: 30px;
    height: 30px;
    top: -20%;
}
a.anchor{
    display: block;
    padding-top: 40px;
    margin-top: -40px;
}
.flow .Ttlannotation .img{
    width: 10px;
    margin: 2px 2px 0 2px;
    font-family: 'Noto Sans JP', sans-serif;
}
.flow .flowContents{
    width: 95%;
    margin: 10px auto 25px;
    position: relative;
}
.flowTtl{
    text-align: center;
    border-bottom: 4px double #cccccc;
    padding-bottom: 5px;
    margin: 1rem 0 1.5rem;
}
.flow .flowContents h4{
    position: relative;
    margin-bottom: 2px;
    font-size: 1rem;
}
.flow .flowContents h4{
	position:relative;
	padding:2px 0 2px 45px;
	border-bottom:1px solid #cccccc;
	font-weight:lighter;
}
.flow .flowContents h4:before, h4:after{
	content:"";
	display:block;
	position:absolute;
}
.flow .flowContents h4:before{
	width:30px;
    height:30px;
	border-radius:50%;
	border:1px solid #ddd;
	bottom:-16px;
	left:8px;
}
.flow .flowContents h4:after{
	height:60px;
	border-left:1px solid #ddd;
	bottom:-32px;
	left:22px;
}
.flow .flowContents h4 span{
    font-size: 1.3rem;
    margin-right: 3px;
}
.flow .flowContents ul{
    display: flex;
    flex-wrap: wrap;
    font-size: .9rem;
    line-height: 1.8rem;
    margin-left: 45px;
}
.flow .flowContents li{
    position: relative;
    padding:0 25px 0 15px;
    display: inline-block;
}
.flow .flowContents li:last-child{padding-right: 0;}
.flow .flowContents li::before{
    position: absolute;
    width: 12px;
    top: 2px;
    left: 0;
}
.flow .partition-img{
    width: 130px;
    margin: 0 auto;
}
.flow .timelineUl li{
    color: #3a3a3a;
    padding:0 0 0 0;
}
.flow .flowContents li:last-child::after{content: none;}
.flow .timelineUl li .img{
    width: 100%;
    margin: 1% 0 5%; 
    border: 1px solid #cccccc;
}
.flow .timelineUl li .img img{
    width: 100%!important;
    box-shadow: none;
}
.flow .timelineUl li::before{top:0;}
.flow .timelineUl li > div{
    padding-bottom: 2rem;
    padding-left: 20px;
}
.flow .flow-arrow img{
    width: 30px;
    box-shadow: none;
}
.flow .timelineUl li h3{
    position: relative;
    border-radius: 20px 0 0 20px;
    padding: 1% 2% 1.5% 10%;
    color: #ffffff;
    font-size: 1rem;
    margin-left:-3%;
}
.flow .timelineUl li h3 span{
    position: absolute;
    width: 15px;
    top: 50%;
    transform: translateY(-50%);
    left: 2%;
}
.flow .timelineUl li h4{
    position: relative;
    font-size: 1rem;
    padding:0 0 3px 20px;
    margin-left: -20px;
}
.flow .timelineUl li h4 img{
    width: 8px;
    margin:-3px 5px 0 0;
}
.flow .timelineUl li h4::before {
	content: "";
	position: absolute;
	top: 103%;
	left: -2%;
	transform: translateY(-50%);
	width: 15px;
	height: 15px;
	border-radius: 10px;
}
.flow .timelineUl li p{
    font-size: .8rem;
    text-align: justify;
    font-family: 'Noto Sans JP', sans-serif;
}
/*上へ戻る*/
#page_top{
    width: 50px;
    height: 50px;
    position: fixed;
    right: 10px;
    bottom:20px;
    border-radius: 50%;
    z-index: 100;
}
#page_top a{
    position: relative;
    font-family: 'Noto Serif JP', serif, YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝";
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
    color: #ffffff;
    font-size: 12px;
    text-align: center;
    padding: 21px 10px;
}
#page_top a::before{
    content:url( "../img/menu-uparrow.svg");
    font-size: 30px;
    color: #fff;
    position: absolute;
    width: 15px;
    height: 15px;
    top: -67px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}
/* # =================================================================
   #葬儀検索
   # ================================================================= */
.topbgImg::before {
    content:"";
    position:fixed;
    top:0;
    bottom: 0;
    z-index:-1;
    width:100%;
    height:100vh;/*高さ指定しないとスクロールで余白出る*/
    background-repeat:no-repeat;
    background-position:right bottom;
    background-size:cover;
}
.topbgImg::before {background-image:url("../img/theme_1/bg-01.jpg")}
@media screen and (min-width: 751px) {
	.topbgImg::before {background-image:url("../img/theme_1/bg-01-top.jpg")}
}
.searchbgImg::before {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    max-width: 1024px;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
    background-image:url("../img/theme_1/searchbk.jpg");
}
.funeralsearchMain{
    max-width: 900px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: -30px;
}
.funeralsearchMain .boxBgImg{
    background-size: 30%;
}
.funeralsearchMain .Ttlannotation h2{
    text-align: center;
    font-size: 1.1rem;
    color: #555555;
    padding: 2.5% 0;
    letter-spacing: 2px;
    background-color: #f2eef8!important;
    font-family: 'Noto Serif JP', serif, YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝";
}
.funeralsearchMain .Ttlannotation{
    margin: 0 auto 5px;
    border-bottom: 2px solid #a289a2; 
    background-color: #f9f9f9;
    font-family: 'Noto Sans JP', sans-serif;
}
.funeralsearch{
    padding: 4% 3%!important;
    background-color: #ffffff;
    color: #3a3a3a;
    border-radius: 3px;
    max-width: 500px;
    margin:0 auto;
}
.funeralsearch p{font-size: 1rem;}
.funeralsearch-area,
.no-search,
.funeralhall-list{
    background-color: #ffffff;
    padding:3.2%;
    border-radius: 0 0 3px 3px;
    margin-bottom: 20px;
}
.funeralhall-list{padding: 3% 3% 0}
.search-Ttl{
    text-align: center;
    position: relative;
}
.search-Ttl::after{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -15px;
    width: 50%;
    content: url(../img/theme_1/deco-line-u.svg);
}
.funeralsearch-area .input-area{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 70%;
    margin: 30px auto 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #cccccc;
}
.funeralsearch-area .input-area div{width: 50%;}
.funeralsearch-area .formInput{
    width: 80%;
    margin: 0 auto;
}
.funeralsearch-area .funeralsearch-btn{text-align: center;}
.funeralsearch-area .funeralsearch-btn .button{
    margin-bottom: 0;
    padding: 2.5%;
    width: 60%;
    margin: 0 auto;
}
.funeralsearch-form{text-align: center;}
.funeralsearch-form span{
    margin: 0 0 0 10px;
    padding: 1px 10px 2px;
    border-radius: 1.6rem;
    font-weight: normal;
    color: #ffffff;
    letter-spacing: .1em;
    display: inline-block;
    font-size: .7rem;
}
.funeralsearch .funeraltitle{
    padding: 10px 13px 5px;
    font-size: .9rem;
    text-align: center;
    position: relative;
    border-bottom: 1px solid #dadada;
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}
.funeralsearch .funeraltitle .funeral-orderbtn{
    position: absolute;
    right: 10px;
    top: 8px;
}
.funeralsearch .funeraltitle img{
    width: 26px;
    height: 26px;
    margin: -10px 5px 0 0;
}
.funeralsearch .funeraltitle .name{
    font-size: 1.3rem;
    margin-right: 3px;
}
.funeralsearch .funeraltitle p{
    font-size: .9rem;
    color: #a77ca0;
}
.funeralsearch .funeraltitle p span{
    margin-top: 3px;
    color: #3a3a3a;
}
.funeralsearch .funeral-info .ceremony{
    border-bottom: 1px solid #eeeeee;
}
.funeralsearch .funeral-info .hall-name p{
    font-size: .8rem;
    line-height: 1.5rem;
    float: right;
    padding-left: 15px;
    background-image: url("../img/icon-location.svg");
    background-size: 15px;
    background-position: center left;
}
.funeralsearch .funeral-info .funeral-day li{
    padding-left: 17px;
    background-size: 14px;
    background-position: center left;
    margin-bottom: 2px;
}
.funeralsearch .funeral-info .funeral-day .day{background-image: url("../img/icon-calendar.svg");}
.funeralsearch .funeral-info .funeral-day .time{background-image: url("../img/icon-clock.svg");}
.funeralsearch .funeral-info{
    margin: 0 auto;
    font-size: .83rem;
    padding: 10px 10px 30px;
}
.funeralsearch .funeral-info dt{
    font-weight: normal;
    font-size: 1.1rem;
    color: #696969;
    border-bottom: 2px solid #c9b2c5;
    text-align:left;
    padding: 1px 0;
    overflow: auto;
}
.funeralsearch .funeral-info dd{
    font-size: .9rem;
    margin-top: 5px;
}
.funeralsearch .funeral-orderbtn{
    margin-bottom: 5px;
    text-align: right;
    width: 30%;
}
.funeralsearch .funeral-orderbtn .button{
    width: 80%;
    margin-bottom: 0;
    padding: 7px;
    font-size: .8rem;
}
.funeralsearchMain .no-search-text{
    padding: 15px 15px 10px 15px;
    width: 80%;
    background-color: #ffffff;
    margin: 20px auto 15px;
    font-size: .9rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    line-height: 2rem;
    text-align: center;
}
/*葬儀ない時の表示*/
.funeralsearchMain .funeralhall-list.bg-gray{
    background-color: #f9f9f9;
    margin-bottom: 10px;
    padding-bottom: 3%;
    font-size: 16px;
}
.funeralsearchMain .funeralhall-list .ttl{
    padding: 15px;
    text-align: center;
    background-color: #f2eef8;
    color: #3f3f3f;
    font-size: 17px;
    width: 90%;
    margin: 0 auto;
    border-bottom: 1px solid #e6e6e6;
}
.funeralsearchMain .funeralhall-list .funeral-hall{
    display: flex;
    flex-wrap: wrap;
    width: 97%;
    margin: 30px auto;
}
.funeralsearchMain .funeralhall-list .funeral-hall .funeral-hall-con{
    width: 50%;
    padding: 0 30px;
    margin-bottom: 40px;
}
.funeralsearchMain .funeralhall-list .funeral-hall .funeral-hall-con .hall-name{
    font-size: 16px;
    color: #6b5b84;
    border-bottom: 2px solid #c9b2c5;
    margin-bottom: 10px;
}
.funeralsearchMain .funeralhall-list .funeral-hall .funeral-hall-con li{
    padding-left: 25px;
    line-height: 25px;
    font-size: 14px;
}
.funeralsearchMain .funeralhall-list .funeral-hall .funeral-hall-con li.hall-add{
    background:url("../img/icon-location.svg") ;
    background-size:18px;
    background-repeat: no-repeat;
    background-position: left top 5px;
}
.funeralsearchMain .funeralhall-list .funeral-hall .funeral-hall-con li.hall-tel{
    background:url("../img/icon-tel2.svg");
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: left top 2px;
}
.funeralsearchMain .funeralhall-list .funeral-hall .funeral-hall-con img{
    width: 15px;
    margin-right: 5px;
}
.funeralsearchMain .funeralhall-list .funeral-hall .funeral-hall-con .zip{margin-right: 10px;}
.funeralsearchMain .funeralhall-list .funeral-hall .funeral-hall-con .line{
    border-bottom: 4px double #ebebeb;
    margin-top: 10px;
}
.funeralsearch-Ttl{
    width: 30%;
    padding: 20px 0 1px;
    margin: 0 auto 20px;
    text-align: center;
}
.funeralsearch-Ttl img{
    width: 150px;
    margin: 0 auto;
}
.funeralsearch-Ttl h2{
    font-size: 1.3rem;
    color: #555555;
    letter-spacing: 2px;
    font-weight: normal;
    margin: 15px 0 30px;
    position: relative;
}
.funeralsearch-Ttl h2::after{
    position: absolute;
    content: url( "../img/theme_1/deco-line-b.svg");
    width: 100%;
    height: 10px;
    left: 50%;
    transform:translateX(-50%);
    bottom: 0;
}
.funerallist-Ttl{
    max-width: 1400px;
    margin: 0 auto 10px;
    border-bottom: 1px solid #cccccc;
}
.funeralsearch{
    max-width: 100%;
    padding: 0!important;
}
.funeral-info{display: flex;}
.funeral-info dl{
    width:32%;
    margin: 0 6px;
}
.funeralsearch .funeral-info dl{
    display: block;
    padding: 0 3px;
}

.funeraltitle{
    text-align: left;
    padding-top: 5px;
    border-bottom: 1px solid #dadada;
}
/* # =================================================================
   #共通トップページ
   # ================================================================= */
#topbody{max-width: 100%!important;}
.Main .top-logo{
    width: 25%;
    margin: 0 auto 20px;
}
.Main p.top-title{
    margin: 20px 0 10px;
    font-size: 26px;
    color: #a07a9b;
}
.Main .message{
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
}
.square{width: 45%;}
.square{
    position:relative;
    transition: all .3s;
}
.square:hover {top:-5px;}
.square-in{
    width: 100%;
    padding-top: 100%;
    background-image: url("../img/Main-top.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.square-in p{
    position: absolute;
    font-size: 1.2rem;
    top: 47%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #a07a9b;
    width: 50%;
    text-align: center;
}
.square-in p::after{
    position: absolute;
    content:url( "../img/top-titleline.svg");
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}
.delay-time02{animation-delay: 0.2s;}
.delay-time04{animation-delay: 0.4s;}
.delay-time08{animation-delay: 0.8s;}
.Main .fadein{
    animation-name: fadein;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes fadein{
    from {
        opacity: 0;
        transform: translateY(0);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}
.square-in p span{
    font-size: 1.8rem
}
#forowner .top-logo{
    margin-bottom: 30px;
}
.Main h2{
    font-size: 26px;
    color: #a07a9b;
    position: relative;
    display: inline-block;
    padding: 0 30px;
}
.Main h3{
    margin: 10px 0;
    margin: 10px 0;
}
.ownerline-u{
    width: 13%;
    margin: 30px auto 10px;
}
.ownerline{
    width: 75%;
    margin-bottom: 50px;
}
.note{
    background-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 97%,
      #ddd 97%,
      #ddd 100%
    );
    background-size:100% 2em;
    line-height:2;
    background-repeat:repeat-y;
    text-align: center;
}
.note p{margin-bottom:2em;}
.element {
    line-height: 30px;
    /*transform: translateY(0);
    opacity: 0;
    visibility: hidden;
    transition: transform 1s, opacity 1s, visibility 1s;*/
    margin-bottom: 50px;
    text-align: center;
}
/* フェードイン時に入るクラス */
.is-fadein {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}
/* # =================================================================
   #設定
   # ================================================================= */
.allsetting  .pageImgTtl::before {
    background-image: url(../img/icon-gear.svg);
    top: -2px;
}
.allsetting input[type=radio] {
    display: none;
}
.allsetting .imgSelect + label {
    position: relative;
    border-radius:0;
    width: 45px;
    height: 45px;
}
.allsetting .imgSelect [type=checkbox]{
	display: none;
	box-sizing: border-box;
    padding: 0;
	position: absolute;
    left: -9999px;
    opacity: 0;
}
.allsetting .imgSelect + label::after {
    content: '';
    position: absolute;
    left: -1px;
    bottom: -1px;
    width: 44px;
    height: 44px;
    border: 2px solid #CCC;
    border-radius: 0;
    box-sizing: content-box;
    opacity: 0;
    transition: 0.2s;
}
.allsetting .DesignSelect {
    margin-top: 5px;
    display: flex;
    justify-content:center;
    align-items: center;
}
.allsetting .DesignSelect li {
    width: 15%;
    margin:0 5px;
}
.allsetting .DesignSelect img{border-radius: 0;}
.allsetting .settingcheck{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    color: #555555;
}
.allsetting .settingcheck p{
    font-size: .9rem;
    padding: 0 5px;
}
.allsetting .togglebtnLabel:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 80px;
    width: 16px;
    height: 16px;
    background: #fff;
    transition: .2s ease;
}
/* # =================================================================
   # レスポンシブ
   # ================================================================= */
/* Small（モバイル横） */
@media screen and (max-width: 360px) {
    .pageImgTtl{padding: 0 0 5px 9%;}
    .pageImgTtl::before{
        width: 23px;
        height: 23px;
    }
    .flow .timelineUl li h4{padding:0 0 3px 15px;}
    .flow .timelineUl li h4::before{left: -2.5%;}
    .mainEntranceFirst .Ttlannotation h2:before{top: 8%;}
    .notFoundbg .notfound::before{left: 55px;}
    .notFoundbg .notfound::after{right: 55px;}
    .transaction .pageImgTtl::before{top: -13%;}
    .agree-btns .checkbox-label::before{top: 0;}
    .agree-btns .checkbox-label::after{top: 4px;}
    .notFoundbg .nothing-line{
        padding: 40px 0px 40px;
    }
    .notFoundbg .text{line-height: 22px;}
    .serverbusy{padding-top: 50px!important;}
    .openNotofound{padding-top: 50px!important;}
    .menu-list .text{width: 80%!important;}
    .menu-list .menu-icon,
    .mainEntranceFirst .menu-icon-logo{width: 60px;}
    .DesignSelect li{margin: 0 8px;}
    .menu-list .giftName{line-height: 1.8rem;}
    .menu-list .salesType{padding: 2px 5px 3px;}
    .giftselect .select-area .btnSelect{padding: 3px 5px;}
    .mainEntranceFirst .flow-menu{height: 60px;}
    .orderList .menu-list .text{margin-left: 0;}
}
@media screen and (max-width: 400px) {
    .mainEntranceFirst .Ttlannotation,
    .mainEntranceFirst .menu-list{width: 100%;}
    .mainEntranceFirst .Ttlannotation{display: block;}
    .mainEntranceFirst .Ttlannotation h2{
        padding-left: 20px;
        margin:10px 0 10px 10px;
    }
    .mainEntranceFirst .Ttlannotation h2:before{
        left: 6.5%;
        top: -6%;
    }
    .theme-info{
        margin-top: 3px;
        padding-top: 3px;
    }
    .funeral-history .giftName{
        width: 50%;
        margin-left: 5px;
    }
    .menu-list .text{width: 77%;}
    .subtotal .salesType{width: 30%;}
    .allsetting .imgSelect + label{
        width: 36px;
        height: 36px;
    }
    .allsetting .imgSelect + label::after{
        width: 35px;
        height: 35px;
    }
}
@media screen and (min-width: 576px) {
    html {font-size:1.8vw;}
    .introImg{width: 40%!important;}
    .mainEntranceFirst .boxBgImg{background-size: 50%;}
    .boxBgImg {
        background-size: 50%;
        background-position: right bottom;
    }
    .funeralrep-btn{padding: 2%;}
    .funeral-body .file-btn{padding: 2%;}
    .funeral-body .map-btn{padding: 2%;}
    .funeralsearch .title br{display: none;}
    .funeralsearch .title .hall-name{margin-left: 10px;}
    .menu-list .text{width:84%;}
    .menu-list .giftselect .order-num{
        width: 15%;
        max-width: 40px;
    }
    .menu-list .giftName{line-height: 1.7rem;}
    .menu-list .giftName{width: 70%;}
    .funeraltitle .no-br{display: none;}
    .allsetting .imgSelect + label{
        width: 60px;
        height: 60px;
    }
    .allsetting .imgSelect + label::after{
        width: 59px;
        height: 59px;
    }
    .share-btn{width: 27%;}
    .funeralsearch .mob-btn{display: none;}
    .funeral-info .mob-hall-name{display: none;}
}
@media screen and (max-width: 1023px) {
    .select-pay dt{width: 11.5%}
}
@media screen and (max-width: 575px) {
    .orderList .menu-list .giftName{margin-top: 0;}
    .orderList .menu-list .giftselect{width: auto;}
    .giftMain .boxBgImg{background-size: 80%!important;}
    .select-pay dt{width: 16%;}
    .tategaki-wrap{width: 100%;}
    .funeralsearch-area{width: 100%;}
    .funeralsearch-area div{width: 100%;}
    .funeralsearch-btn{
        width: 77%!important;
        margin: 0 auto;
    }
    .funeralsearch .funeral-info{width: 100%;}
    .funeral-info{display: block;}
    .funeral-info dl{width: 100%;}
    .funeral-info dt{
        border-bottom: none;
        font-size: .8rem;
    }
    .funeralsearch .funeral-info dl{
        margin-bottom: 12px;
        border-left: 3px solid #c9b2c5;
        border-bottom: 1px solid #dddddd;
    }
    .gift-list .giftNamearea{width: 75%;}
    .funeralsearch .funeraltitle .hall-name{float: right;}
    .funeralsearch .funeral-orderbtn{
        text-align: center;
        width: 70%;
        margin: 0 auto;
    }
    .funeralsearch .funeral-info dt{
        font-size: .9rem;
        border-bottom: none;
    }
    .funeralsearch-area .input-area{display: block;}
    .funeralsearch-area .input-area div{width: 100%;}
    .funeralsearch-area .funeralsearch-btn{margin-top: 10px;}
    .funeralsearch-area, .no-search{padding: 5% 3%;}
    .funeralhall-list{padding: 5% 3% 0;}
    .funeralsearch-area .funeralsearch-btn .button{width: 80%;}
    .funeralsearchMain .no-search-text{
        width: 100%;
        line-height: 1.6rem;
    }
    .funeralsearchMain .no-search-text{line-height: 1.6rem;}
    .search-Ttl::after{width: 70%;}
    .funeraltitle .pc-btn{display: none;}
    .funeral-info .hall-name{display: none;}
    .funeral-info .mob-hall-name{
        font-size: .8rem;
        line-height: 1rem;
        margin-top: 5px;
        background-image: url("../img/icon-location.svg");
        background-size: 12px;
        background-position: center left;
        padding-left: 14px;
    }
    .funeralsearch .funeral-info .ceremony{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .funeralsearch .funeral-info .ceremony .ceremony-name{width: 25%;}
    .funeralsearch .funeral-info dd{margin-left: 10px;}
    .funeralsearchMain .boxBgImg{
        background-size: 70%;
        background-position: right bottom;
    }
    .funeralsearch .funeral-info dd{font-size: .8rem;}
    .funeralsearch .funeraltitle img{
        width: 30px;
        height: 30px;
    }
    .funeralsearch .funeral-info dl{padding-bottom: 3px;}
    .funeralsearch-Ttl{width: 60%;}
    .funeralsearch .funeral-info .ceremony{border-bottom: 1px dotted #dddddd;}
    .funeralsearchMain .funeralhall-list .funeral-hall .funeral-hall-con{
        width: 95%;
        margin: 0 auto 35px;
        font-size: 14px;
        padding: 0!important;
    }
    .funeralsearchMain .funeralhall-list.bg-gray{
        font-size: 12px;
        padding-bottom: 5%;
    }
    .funeralsearchMain .funeralhall-list .ttl{
        font-size: 15px;
        padding: 12px;
    }
    .funeralsearchMain .funeralhall-list .funeral-hall .funeral-hall-con .hall-name{font-size: 14px;}
    .funeralsearchMain .funeralhall-list .funeral-hall .funeral-hall-con li{
        font-size: 12px;
        line-height: 20px;
    }
    .funeralsearchMain .funeralhall-list .funeral-hall .funeral-hall-con li{padding-left: 20px;}
    .funeralsearchMain .funeralhall-list .funeral-hall .funeral-hall-con li.hall-tel,
    .funeralsearchMain .funeralhall-list .funeral-hall .funeral-hall-con li.hall-add{background-size: 16px;}
}
@media screen and (max-width: 700px) {
    .funeralsearch .funeraltitle .funeral-orderbtn{top: 0;}
    .funeralsearch .funeral-orderbtn .button{
        width: 90%;
        margin: 10px auto;
    }
    .funeralsearch .funeral-info{padding: 10px 10px 20px;}
}
@media screen and (max-width: 767px) {
    .funeralsearchMain .funeralhall-list .ttl{width: 95%;}
    .funeralsearchMain .funeralhall-list .funeral-hall{width: 100%;}
    .funeralsearchMain .funeralhall-list .funeral-hall .funeral-hall-con{padding: 0 20px;}
    .error-panel{
        width: 100%;
        padding: 0 0 20px 0;
    }
    .error-panel p{padding:20px 20px 0;}
}
@media screen and (max-width: 930px) {
    .funeralsearchMain{padding: 0 10px;}
}

/* タブレット */
@media screen and (min-width: 768px) {
    .modalContent {width: 600px;}
    .sharebutton{
        top:.5rem;
        padding: 7px 2%;
    }
    .backbtn{
        left: -35px;
    }
    /*================ 訃報 ================*/
    .funeralBgImg{
        background-size: 50% , 50%;
        background-position: right bottom , left top;
    }
    .funeral-body h4{margin-bottom: 18px;}
    .funeral-body h4::after{
        bottom: -17px;
        width: 50%;
    }
	/*================ 皆様のお言葉 ================*/
	.btnToPost {bottom: 100px;}
	/*================ お言葉（コメント）一覧 ================*/
	.outsetMsg {padding: 35px 20px;}
	.outsetMsg img {max-height: 33vw;}
	/*================ 贈りものを探す ================*/
	.modalSearch .modalContent .modalClose {top: 25%;}
    .flow .timelineUl li h4::before{left: -1.5%;}
    .gift-list .giftName{width:75%;}
    .timelineTopic::after{
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
        border-right: 30px solid #f2f2f2;
    }
    .timelineUl .post-area::after{
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
    }
}
@media screen and (min-width: 992px) {
    .menu-list .text{width: 88%;}
    .allsetting .imgSelect + label{
        width: 100%;
        height: 90px;
    }
    .allsetting .imgSelect + label::after{
        width: 99%;
        height: 68px;
        top: 0;
    }
}


/* タブレット横以上 */
@media screen and (min-width: 1024px) {
	html {font-size: 15px;}
	header .logo img {width: 230px;}
	/*================ イントロページ ================*/
	.introWindow h1 {margin: 3% auto;}
	.introLogo {width: 26%;}
	/*================ お言葉（コメント）一覧 ================*/
	.outsetMsg img {max-height: 320px;}
	/*================ 皆様のお言葉 ================*/
	.btnToPost {right: calc(50% - 460px);}
}