/* # =================================================================
   # 共通要素
   # ================================================================= */
html {
	/*font-size: 62.5%;*/
	font-size: 3.74vw;
	
}
body {
	font-family: 'Noto Sans JP', sans-serif, YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝";
	line-height: 1.6;
	max-width: 1024px;
	margin: 0 auto;
}


header {
	max-width: 1024px;
}

footer {
	max-width: 1024px;
}

img,video {
	max-width: 100%;
	height: auto;
}
a {
	color: inherit;
}
a:hover, a:active {
	text-decoration: none;
}



header {
	font-family: 'Noto Sans JP', sans-serif, YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝";
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}
.headerArea {
	font-size: 1.6rem;
	display: flex;
	justify-content: center;
	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: 3.6rem;
	padding: 0 5%;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.headerLinkR {
	display: flex;
    justify-content: flex-end;
	text-align: center;
	font-size: 0.78rem;
}
.headerLinkR img {
	height: 1.7rem;
}
.headerLinkR a {
	position: relative;
}

header .logo img {
	width: 12rem;
	vertical-align: baseline;
}

.headerLinkL, .headerLinkR {
	width: 20%;
}
.headerLinkL {
	color: #000!important;
	display: flex;
	padding: 0;
}
.headerLinkL::after {
	content: none;
}
.headerLinkL a {
	display: flex;
	align-items: center;
	font-size: 0.92rem;
	text-align: left;
	position: relative;
	background-color: #FFF;
	border-radius: 20px;
	padding: 0 8px 0 20px;
	height: 24px;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.headerLinkL a::after {
	content: '';
	width: 0.6rem;
	height: 0.6rem;
	border-left: 1px solid #AFAFAF;
	border-bottom: 1px solid #AFAFAF;
	position: absolute;
	top: calc(50% - 4px);
	left: 18%;
	transform: rotate(45deg);
}
.headerArea h1 {
	color: #000;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.14rem;
	font-weight: 500;
	text-align: center;
	white-space: pre;
	min-width: 60%;
	margin: 0;
}

main {
	min-height: calc(100vh - 50px);
	padding: 5.5rem 0 8.5rem;
	position: relative;
	overflow-x: hidden;
}
.scPa {
	padding-top: 10%;
	padding-bottom: 10%;
}
.scPt {
	padding-top: 10%;
}
.scPb {
	padding-bottom: 10%;
}

.shadow {
	box-shadow: 1px 2px 3px rgba(0,0,0,0.1);
}
.shadowTop {
	box-shadow: 1px -2px 4px rgba(0,0,0,0.1);
}

footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	font-family: 'Noto Sans JP', sans-serif, YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝";
	z-index: 10;
}
.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: 3px 25px;
}
.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;
}

/*================ ローディング ================*/
#loading-modal {
	background: #F7F7F7;
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0px;
	z-index: 11;
}
#loading-modal > div {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-family: 'Noto Sans JP', sans-serif, YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝";
	text-align: center;
	letter-spacing: 2px;
	z-index: 10;
}
.ball-pulse > div {
	width: 15px;
	height: 15px;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	background-color: #DEDEDE;
	border-radius: 100%;
	margin: 6px;
	display: inline-block;		
}
.ball-pulse > div:nth-child(1) {
	-webkit-animation: scale .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08);
	animation: scale .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08);
}
.ball-pulse > div:nth-child(2) {
	-webkit-animation: scale .75s -.12s infinite cubic-bezier(.2,.68,.18,1.08);
	animation: scale .75s -.12s infinite cubic-bezier(.2,.68,.18,1.08);
}
.ball-pulse > div:nth-child(3) {
	-webkit-animation: scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08);
	animation: scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08);
}
@keyframes scale {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	45% {
		transform: scale(0.1);
		opacity: 0.7;
	}
	80% {
		transform: scale(1);
		opacity: 1;
	}
}
#loading-modal p {
	color: #707070;
	line-height: 2;
	margin: 8% auto 25%;
}
#loading-modal img {
	max-width: 90%;
}


/* # =================================================================
   # ユーザー登録
   # ================================================================= */
.helpIcon {
	font-size: 1.14rem;
	margin-left: 2%;
}
.pageGuide {
	color: #6E5CF4;
	margin-bottom: 5%!important;
}
.btnFooterPrimary {
	display: block;
	font-size: 1.14rem;
	color: #FFF;
	background-color: #6E5CF4;
	padding: 2%;
}
.btnFooterPrimary img {
	max-height: 6.5vw;
}

.modal {
    display: none;
    /*height: 100vh;*/
    position: fixed;
    top: 0;
	bottom: 0;
    width: 100%;
	max-width: 1024px;
	background-color: rgba(0,0,0,0.75);
	z-index: 11;
}

.modalContent{
    background-color: #fff;
    left: 50%;
    position: absolute;
    top: 110%;
    transform: translate(-50%,0);
    width: 92%;
	border-radius: 5px;
	transition: 0.4s;
	box-shadow: 1px 2px 3px rgba(0,0,0,0.15);
}
.show .modalContent{
	top: 50%;
	transform: translate(-50%,-50%);
}
.modal > .modalClose {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}

.modalContent h2 {
	font-size: 1.43rem;
	text-align: center;
	color: #FFF;
	padding: 2% 0;
}
.modalContent > div {
	padding: 3% 8%;
}

.modalPhotoAdd img {
	width: 14%;
}
.modalWh {
	background-color: rgba(255,255,255,0.85);
}
.modal_box {display: none;}

.logInModal {
	background-color: rgba(0,0,0,0);
}
.logInModal > div {
	background-color: #fff;
    border-radius: 5px;
	padding: 3% 8%;
}
.logInModal .modalClose {
	color: #FFF;
	text-align: right;
}
.modal .mdi-close:before {
	font-size: 1.3em;
	transform: translateY(10%);
	margin-left: 1%;
}
.ttlLeft {
	font-size: 1.43rem;
	line-height: 1.5;
	margin-bottom: 3%;
}
.helpIcon::before {
	color: #707070;
}
.annotation {
	color: #6C6C6C;
	font-size: 0.8rem;
	background-color: #F8F8F8;
	padding: 5%;
}

/* # =================================================================
   # お報せしたいこと選択
   # ================================================================= */
.mainEntrance, .mainLogin {
	height: 100vh;
	position: relative;
	background: linear-gradient(135deg, rgba(251,242,245,1), rgba(251,242,245,0) 70%),
				linear-gradient(45deg, rgba(226,236,220,1), rgba(226,236,220,0) 70%),
				linear-gradient(315deg, rgba(235,241,246,1), rgba(235,241,246,0) 70%),
				linear-gradient(225deg, rgba(226,228,240,1), rgba(226,228,240,0) 70%);
}
.mainEntrance {
	padding: 4rem 0 1rem;
	min-height: auto;
	color: #727171;
}
.mainEntrance > section {
	margin-bottom: 35px;
}

h1 {
	font-size: 1.28rem;
}
main .logo {
	width: 11rem;
}
.copyright {
	color: #FFF;
	font-size: 0.7rem;
	letter-spacing: 1px;
}
.btnCate {
	display: block;
	color: #FFF;
	font-size: 1.28rem;
	font-weight: 500;
	width: 86%;
	padding: 3%;
	margin: 0 auto 2.5%;
}
.bgSceneA {
	background-color: #8B65AC;
}
.bgSceneB {
	background-color: #62C999;
}
.bgSceneC {
	background-color: #4B509B;
}
.bgSceneD {
	background-color: #E09D4F;
}
.modalHeadBorder {
	text-align: center;
	font-size: 1.43rem;
	color: #6E5CF4!important;
	font-weight: 500;
	padding: 1%;
	border-bottom: 3px solid #CCD0E6;
	margin-bottom: 4%;
}
.underline {
	text-decoration: underline;
}
.btnRound {
	display: block;
	color: #FFF;
	text-align: center;
	font-weight: 500;
	width: 100%;
	border-radius: 20px;
	padding: 3%;
	margin-bottom: 3%;
}
.bgPrimary {
	background-color: #6E5CF4;
}
.bgBl {
	background-color: #030303;
}

.ItemError {
	position: relative;
	color: #D10000;
	background-color: #FBDEDE;
	border: 1px solid #D10000;
	padding: 5px 5px 5px 30px;
}
.ItemError::before {
    content: "\F028";
    font: normal normal normal 24px/1 "Material Design Icons";
    font-size: 20px;
	position: absolute;
	top: calc(50% - 10px);
	left: 2.5%;
}
.copyrightArea {
    text-align: center;
}
.copyrightArea img {
	width: 85px;
}
.copyrightArea .copyright {
	text-align: center;
	color: #6C6C6C;
    font-size: 0.7rem;
	margin: 10px auto 0;
}
.mainEntranceFirst {
	padding: 2rem 0 1.5rem;
	color: #727171;
	background: linear-gradient(135deg, rgba(251,242,245,1), rgba(251,242,245,0) 70%),
				linear-gradient(45deg, rgba(226,236,220,1), rgba(226,236,220,0) 70%),
				linear-gradient(315deg, rgba(235,241,246,1), rgba(235,241,246,0) 70%),
				linear-gradient(225deg, rgba(226,228,240,1), rgba(226,228,240,0) 70%);
}
.mainEntranceFirst h1 {
	font-size: 1.21rem;
	line-height: 1.6;
}
.mainEntranceFirst .boxScene {
	font-size: 0.86rem;
	color: #A3A3A3;
	background-color: #FFF;
	border-radius: 10px;
	filter: drop-shadow(0 1px 4px rgb(0,0,0,0.15));
	margin: 25px auto;
}
.mainEntranceFirst .boxScene img {
	border-radius: 10px 10px 0 0;
}
.mainEntranceFirst .boxScene h2 {
	font-weight: bold;
	letter-spacing: 1px;
	display: flex;
	align-items: center;
	font-size: 1.4rem;
	margin-bottom: 3px;
}
.mainEntranceFirst .boxScene h2 span {
	color: #BEBEBE;
	font-size: 0.7rem;
	margin-right: 15px;
}
.mainEntranceFirst .btnOval {
	display: block;
	color: #FFF;
	padding: 5px;
	min-width: 150px;
	border-radius: 20px;
	margin: 0 auto;
}

/* # =================================================================
   # お報せを設定する
   # ================================================================= */
.mainNoticeSet, .mainEventSet, .mainMemoriesSet {
	background-color: #F4F4F4;
}
.designSelect {
	display: inline-flex;
}
.designSelect li {
	width: 96px;
	margin: 0.5% 2% 0 0.5%;
}
.designSelect li p {
	text-align: center;
}
.trSelect {
	overflow: hidden;
	margin: auto 0;
	text-align: center;
	position: relative;
	/*border: 1px solid #CCC;*/
	border-radius: 5px;
	background: #ffffff;
}
.trSelect select {
	width: 100%;
	padding-right: 1em;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	border: none;
	outline: none;
	background: transparent;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	padding: 1.5% 4%;
}
.trSelect select::-ms-expand {
	display: none;
}

.trSelect::before {
	position: absolute;
	top: calc(50% - 4px);
	right: 5%;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 9px solid #000;
	pointer-events: none;
	z-index: 1;
}

.bottomDotted {
	border-bottom: 1px dotted #7E7E7E;
	padding-bottom: 5%;
	margin-bottom: 5%;
}
.btnPrimary {
	background-color: #6E5CF4;
}
.containerSm {
	width: 100%;
    padding-right: 10%;
    padding-left: 10%;
}
.containerMd {
	width: 100%;
    padding-right: 7%;
    padding-left: 7%;
}
.btnRight {
	color: #FFF;
	font-size: 0.93rem;
	background-color: #4B509B;
	padding: 0.5% 4%;
	border: 1px solid #FFF;
	border-radius: 5px;
}
.formTtl {
	font-size: 1.07rem;
	font-weight: 500;
}
.formTtl .small {
	font-size: 70%;
}

.setFooter, .previewFooter {
	display: flex;
}
.setFooter li {
	color: #FFF;
	width: calc(100%/3);
}
.setFooter li a, .previewFooter li a {
	display: block;
	padding: 5% 0;
}
.setFooter .btnSfPrev {
	background-color: #727272;
}
.setFooter .btnSfPreview, .previewFooter .btnSfPrev {
	background-color: #A7A7A7;
}
.setFooter .btnSfNext, .previewFooter .btnSfNext {
	background-color: #6E5CF4;
}
.btnSfDone {
	background-color: #EB6767;
}
.setFooter i::before {
	color: #FFF;
}
.imgSelect:checked + label img {
	outline: 3px solid #6E5CF4;
}
.mainEventSet input.inputDay {
	width: 60%;
}
.mainEventSet input.inputTime {
	width: 33%;
}

/* # =================================================================
   # 例文を選ぶ
   # ================================================================= */
.mainExample {
	background-color: #F4F4F4;
	padding-bottom: 9rem;
}
.listExm {
	max-width: 900px;
	margin: 0 auto;
}
.listExm li {
	background-color: #FFF;
	padding: 6% 7%;
	margin-bottom: 3%;
}
.tagGroup {
	margin-bottom: 8px;
}
.tagGroup span {
	font-size: 0.8rem;
	color: #FFF;
	background-color: #AFAFAF;
	padding: 3px 10px;
	margin-right: 8px;
}
.listExm li p {
	border-bottom: 1px solid #4B509B;
	padding-bottom: 5%;
	margin-bottom: 6%;
}
.btnExm {
	display: inline-block;
	color: #FFF;
	background-color: #4B509B;
	border-radius: 5px;
	padding: 2px 12px;
	margin: 0 auto;
}
.btnExm i {
	font-size: 0.9em;
	font-weight: bold;
	margin-left: 4px;
}


/* # =================================================================
   # お報せのプレビュー
   # ================================================================= */
.previewFooter li {
	color: #FFF;
	width: 50%;
}
.previewFooter .btnSfPrev img {
	max-height: 12px;
	transform: translateY(-20%);
}
.btnClose {
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.2s;
	border-radius: 20px;
	min-width: 50px;
	height: 24px;
	background-color: #FFF;
	padding: 0 7px;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.btnClose span {
	display: none;
}
.btnClose i {
	font-size: 1.4em;
}

/* # =================================================================
   # イベント（催しもの）を設定する
   # ================================================================= */
.bgWhRound {
	background-color: #FFF;
	padding: 8%;
    border-radius: 5px;
	box-shadow: 1px 2px 3px rgba(0,0,0,0.1);
}
.dsbl {
	opacity: 0.3;
}
.btnMore {
	color: #FFF;
	background-color: #6C6C6C;
	position: fixed;
	right: 3.5%;
    bottom: 95px;
	display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    width: 70px;
    height: 70px;
    border-radius: 40px;
	margin: 0 auto;
	z-index: 10;
}
.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%;
}
.btnEventDel {
	display: flex;
	align-items: center;
	color: #FFF;
	font-size: 0.93rem;
	background-color: #999;
	border-radius: 5px;
	padding: 3px 10px;
	margin: 0 0 0 auto;
}
.btnEventDel img {
	width: 14px;
	filter: brightness(5);
	margin-right: 3px;
}
.optionAttend, .optionPaid1, .optionCapa1 {
	display: none;
}

/*=== 催しもの一覧 ===*/
.movieArea {
	height: 108vw;
	overflow: hidden;
}
.movieArea video {
	margin-top: -25px;
}
.eventSetting {
	margin: 0 auto 20px;
}
.listEvent > div {
	position: relative;
	background-size: 18%;
	background-position: right 10px bottom 15px;
	padding: 3%;
	box-shadow: 0 3px 4px rgba(0,0,0,0.1);
	margin-bottom: 14px;
}
.SceneA .listEvent > div {
	background-color: #F3EDF7;
	background-image: url("../img/bg-logo-A.svg");
}
.SceneB .listEvent > div {
	background-color: #F3F7F2;
	background-image: url("../img/bg-logo-B.svg");
}
.SceneC .listEvent > div {
	background-color: #F2F3F7;
	background-image: url("../img/bg-logo-C.svg");
}
.listEvent > div > span, .listEvent > div a, .listShopProduct > div a {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.eventLabel div {
	display: flex;
	align-items: center;
	color: #FFF;
	white-space: nowrap;
	background-color: #E4E4E4;
	border-radius: 0 0 6px 6px;
	padding: 3px 9px;
	margin-left: 5px;
}
.listEvent .status, .listShopProduct .status {
	font-size: 0.8rem;
	color: #FFF;
	background-color: #E4E4E4;
	position: relative;
	width: 84px;
	border-radius: 20px;
	padding: 5px 10px;
	z-index: 2;
	cursor: pointer;
}
.listEvent .status::after, .listShopProduct .status::after {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	position: absolute;
	top: calc(50% - 7px);
	right: 9px;
	background: url("../img/circle-outline-off.svg") no-repeat center / cover;
}
.status.accepting::after {
	background-image: url("../img/circle-outline.svg");
}
.SceneA .eventLabel div.active, .SceneA .listEvent .status.accepting {
	background-color: #8B65AC;
}
.SceneB .eventLabel div.active, .SceneB .listEvent .status.accepting {
	background-color: #62C999;
}
.SceneC .eventLabel div.active, .SceneC .listEvent .status.accepting {
	background-color: #4B509B;
}
.listEvent .date, .listShopProduct .date {
	font-size: 0.9em;
	margin-bottom: 5px;
}
.listEvent h2, .listShopProduct h2 {
	font-size: 1.07rem;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.listEvent .venue {
	font-size: 0.9em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 8px;
}
.listEvent .deadline, .listShopProduct .deadline {
	margin-bottom: 0;
}
.btnEventSet {
	color: #FFF;
	background-color: #727272;
	padding: 6px 36px 6px 18px;
	border-radius: 30px;
	margin: 0 auto;
	display: block;
	position: relative;
}
.btnEventSet::before {
	content: "";
	position: absolute;
	background-color: #FFF;
	top: calc(50% - 7px);
	right: 22px;
	width: 1px;
	height: 15px;
}
.btnEventSet::after {
	content: "";
	position: absolute;
	background-color: #FFF;
	top: 50%;
	right: 15px;
	width: 15px;
	height: 1px;
}
.dropShadow {
	filter: drop-shadow(0 1px 4px rgb(0,0,0,0.15));
}
.listPoint {
	font-size: 1.07rem;
	margin-bottom: 20px;
}
.listPoint li {
	padding: 6px 0;
}
.listPoint span {
	color: #FFF;
	font-size: 0.8rem;
	text-align: center;
	font-weight: bold;

	background-color: #6E5CF4;
	padding: 2px 8px;
	border-radius: 20px;
	margin-right: 8px;
}
.borderBottomDash {
	border-bottom: 1px dashed #707070;
}
/* # =================================================================
   # ヒストリー（想い出）を受け付ける
   # ================================================================= */
.memoriesSetting {
	display: none;
}
.memoriesSetting .radioStyle label {
	font-size: 1.07rem;
	font-weight: 500;
}
.memoriesMain {
	padding: 5.5rem 0 10.5rem;
}


/* # =================================================================
   # お報せ管理
   # ================================================================= */
.manageHeader h1 {
	min-width: 40%;
}
.manageHeader .headerLinkL, .manageHeader .headerLinkR {
	width: 30%;
}
.btnDel {
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.2s;
	border-radius: 20px;
	min-width: 50px;
	height: 24px;
	background-color: #FFF;
	padding: 0 7px;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.btnDel span {
	display: none;
	margin-right: 2px;
}
.btnDel img {
	width: 14px;
}
.mainNotice {
	padding-top: 3.5rem;
}
.noticeTtl {
	background-color: #F2F3F7;
	padding: 5%;
	margin-bottom: 5%;
}
.noticeTtl h2 {
	color: #4B509B;
	font-size: 1.07rem;
	line-height: 1;
	overflow: hidden;
	text-overflow: ellipsis;
    white-space: nowrap;
	margin: 0;
}
.bottomBorder {
	border-bottom: 1px solid #D5D5D5;
	padding: 5% 0;
}
.ttlNotice {
	font-size: 1.07rem;
	font-weight: 500;
	margin: 0;
}
.ttlNotice img {
	width: 1.3rem;
	margin-right: 4px;
}
.number {
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
}

.btnDs {
	color: #FFF;
	font-size: 1.28rem;
	line-height: 1.5;
	font-weight: bold;
	background-color: #CCCCCC;
	border: 2px solid #FFF;
	box-shadow: 0 0 7px rgba(98,201,153,0.6);
}
.btnDs, .btnPrimarySdw {
	display: flex;
    align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 5px;
	padding: 5px;
}
.btnDs:hover, .btnPrimarySdw:hover {
	filter: brightness(0.95);
}
.btnDs img {
	width: 24px;
	margin-right: 8px;
}

.btnRd {
	color: #FFF;
	font-size: 1.28rem;
	line-height: 1.5;
	font-weight: bold;
	background-color: #FF6699;
	border: 2px solid #FFF;
	box-shadow: 0 0 7px rgba(98,201,153,0.6);
}
.btnRd, .btnPrimarySdw {
	display: flex;
    align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 5px;
	padding: 5px;
}
.btnRd:hover, .btnPrimarySdw:hover {
	filter: brightness(0.95);
}
.btnRd img {
	width: 24px;
	margin-right: 8px;
}

.btnGr {
	color: #FFF;
	font-size: 1.28rem;
	line-height: 1.5;
	font-weight: bold;
	background-color: #62CA99;
	border: 2px solid #FFF;
	box-shadow: 0 0 7px rgba(98,201,153,0.6);
}
.btnPrimarySdw {
	color: #6E5CF4;
	font-size: 1.21rem;
	font-weight: 500;
	background-color: #FFF;
	box-shadow: 0 0 7px rgba(110,92,244,0.6);
}
.btnGr, .btnPrimarySdw {
	display: flex;
    align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 5px;
	padding: 5px;
}
.btnGr:hover, .btnPrimarySdw:hover {
	filter: brightness(0.95);
}
.btnGr img {
	width: 24px;
	margin-right: 8px;
}
.btnPrimarySdw img {
	height: 1.5rem;
	margin-right: 5px;
}
.txtPrtc {
	color: #357BAF;
	margin-left: 5px;
}
.txtNon {
	color: #C94439;
}
.btnCnfrm {
	display: block;
	position: relative;
	background-color: #F0F0F0;
	border: 1px solid #AFAFAF;
	border-radius: 5px;
	padding: 4px 8px;
}
.btnCnfrm::after {
	content: "";
	display: block;
	position: absolute;
	width: 10px;
	height: 10px;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	transform: rotate(45deg);
	top: calc(50% - 5px);
	right: 3%;
}

/* # =================================================================
   # ログインページ
   # ================================================================= */
.mainLogin {
	padding-bottom: 1rem;
}
.mainLogin h1 {
	font-weight: 400;
	line-height: 1.8;
}
.mainLogin .copyright {
	width: 100%;
	color: #6C6C6C;
	font-size: 0.7rem;
	text-align: center;
	margin-top: 10%;
}

/* # =================================================================
   # お報せを共有する
   # ================================================================= */
.publicUrl {
	padding: 3%;
	border: 1px solid #707070;
	border-radius: 5px;
	margin-bottom: 2%;
}
.publicUrl input {
	width: 100%;
}
.btnCopy {
	color: #AFAFAF;
	font-weight: 500;
}
.btnShare {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 500px;
	font-size: 1.14rem;
	font-weight: bold;
	color: #FFF;
	height: 40px;
	border-radius: 20px;
	margin: 0 auto 13px;
	box-shadow: 1px 2px 3px rgba(0,0,0,0.15);
}
.btnShare img {
	width: 1.8rem;
	margin-right: 5px;
}
.btnMail {
	background-color: #609CFD;
}
.btnLine {
	background-color: #39B04A;
}
.btnSms {
	background-color: #6C6C6C;
}


/* # =================================================================
   # 参加・不参加を確認
   # ================================================================= */
.mainAttendanceList {
	background-color: #F4F4F4;
	padding-top: 3.6rem;
}
.panelAtnd {
	display: block;
	margin-bottom: 4%;
}
.panelAtnd > div {
	background-color: #FFF;
	padding: 3.5%;
	box-shadow: 1px 2px 3px rgba(0,0,0,0.15);
}
.panelAtnd h3 {
	font-size: 1.07rem;
}
.atnd {
	display: flex;
}
.atnd > div {
	min-width: 30%;
	display: flex;
	margin-right: 5%;
}
.atnd img {
	width: 1.2rem;
	margin-right: 5px;
}
.atnd span {
	margin-left: 5px;
}

.mainAttendance {
	padding-top: 3.6rem;
}
/*タブ切り替え*/
.tabLabel {
	width: 50%;
	background-color: #AFAFAF;
	font-size: 1.14rem;
	color: #FFF;
	text-align: center;
	font-weight: 500;
	display: block;
	float: left;
	line-height: 2.4;
	transition: all 0.2s ease;
}
.tabLabel svg {
	max-width: 8%;
	transform: translateY(-1px);
	margin-right: 2%;
}
input#tab1, input#tab2 {
  display: none;
}
.tabContent {
	display: none;
	padding: 3% 10%;
	clear: both;
	overflow: hidden;
}
#tab1:checked ~ #tabContent1, #tab2:checked ~ #tabContent2 {
	display: block;
}
.tabs input#tab1:checked + .tabLabel {
	background-color: #357BAF;
}
.tabs input#tab2:checked + .tabLabel {
	background-color: #C94439;
}

/*参加者一覧*/
.listAttendance {
	padding: 0 10%;
}
.listAttendance li {
	position: relative;
	border-bottom: 1px solid #CCC;
	padding: 10px 0 10px 30px;
}
.listAttendance [type=checkbox], .radioStyle [type=radio] {
	display: none;
	box-sizing: border-box;
    padding: 0;
	position: absolute;
    left: -9999px;
    opacity: 0;
}
.listAttendance label, .radioStyle label {
	position: relative;
    cursor: pointer;
    display: inline-block;
    transition: .28s ease;
    user-select: none;
	width: 100%;
	position: relative;
	margin: 0;
}
.listAttendance [type=checkbox]+label:before, .radioStyle label:before {
	content: '';
	position: absolute;
	left: -30px;
	top: -2px;
	margin: 4px;
	width: 18px;
	height: 18px;
	z-index: 0;
	transition: .28s ease;
	background-color: #FFF;
	border: 1px solid #606060!important;
	border-radius: 50%;
}
.listAttendance [type=checkbox]+label:after, .radioStyle label:after {
	content: '';
	position: absolute;
	left: -29px;
	top: -1px;
	margin: 4px;
	width: 16px;
	height: 16px;
	transition: .28s ease;
	border-radius: 50%;
}
.listAttendance [type=checkbox]:checked+label:before, .radioStyle input:checked+label:before {
	animation: ripple 0.2s linear forwards;
	border-radius: 50%;
}
.listAttendance [type=checkbox]:checked+label:after, .radioStyle input:checked+label:after {
	background-color: #6E5CF4;
	animation: ripple 0.2s linear forwards;
	transform: scale(0.75);
	z-index: 0;
}

#tabContent2 .listAttendance li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 3px;
	display: block;
	background-color: #414141;
	position: absolute;
	top: calc(50% - 2px);
	left: 13px;
}
.btnContact {
	display: block;
	color: #FFF;
	font-size: 1.14rem;
	text-align: center;
	background-color: #6E5CF4;
	position: fixed;
	width: 100%;
	max-width: 1024px;
	bottom: -5rem;
	padding: 2.5% 0;
	transition: 0.3s;
	z-index: -1;
}
.btnContact svg, .btnSendMail svg {
	width: 7%;
	margin-right: 5px;
}


/* # =================================================================
   # メッセージを作成する
   # ================================================================= */
.mainSendMail {
	padding: 3.6rem 0 6.5rem;
}
.mainSendMail .noticeTtl {
	background-color: #4B509B;
}
.mainSendMail .noticeTtl h2 {
	color: #FFF;
}
.mainSendMail h3 {
	font-size: 1.07rem;
}
.btnSendMail {
	display: block;
	color: #FFF;
	font-size: 1.14rem;
	text-align: center;
	background-color: #6E5CF4;
	position: fixed;
	width: 100%;
	max-width: 1024px;
	bottom: 3.5rem;
	padding: 2.5% 0;
}
.bgLgr {
	background-color: #F4F4F4;
}


/* # =================================================================
   # シラセルとは
   # ================================================================= */
.mainAbout {
	padding: 3.6rem 0 3.6rem;
}
.mainAbout h2 {
	font-size: 1.14rem;
	line-height: 1.8;
}
.btnEdit {
	display: block;
	color: #FFF;
	font-size: 1.14rem;
	text-align: center;
	background-color: #6E5CF4;
	width: 100%;
	max-width: 1024px;
	padding: 2.5% 0;
}
.btnEdit svg {
	width: auto;
	height: 1.8rem;
	margin-right: 7px;
}


/* # =================================================================
   # お報せ一覧
   # ================================================================= */
.listNotice > a {
	display: block;
	margin-bottom: 14px;
}
.listNotice > a > div {
	position: relative;
	background-size: 18%;
	background-position: right 10px bottom 15px;
	padding: 3%;
	box-shadow: 0 3px 4px rgba(0,0,0,0.1);
}
.listNotice .SceneA {
	background-color: #F3EDF7;
	background-image: url("../img/bg-logo-A.svg");
}
.listNotice .SceneB {
	background-color: #F3F7F2;
	background-image: url("../img/bg-logo-B.svg");
}
.listNotice .SceneC {
	background-color: #F2F3F7;
	background-image: url("../img/bg-logo-C.svg");
}
.noticeLabel, .eventLabel, .listLabel {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	font-size: 0.8rem;
}
.noticeLabel div {
	display: flex;
	align-items: center;
	color: #FFF;
	white-space: nowrap;
	background-color: #E4E4E4;
	border-radius: 0 0 6px 6px;
	padding: 3px 9px;
	margin-left: 5px;
}
.noticeLabel div.active {
	background-color: #6E5CF4;
}
.noticeLabel img, .eventLabel img {
	height: 14px;
	filter: brightness(4);
	margin-right: 5px;
}
.listNotice h2 {
	font-size: 1.07rem;
	line-height: 1.5;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.listNotice svg {
	width: 1.2em;
	height: auto;
}
.listNotice .SceneA svg path {
	fill: #8B65AC;
}
.listNotice .SceneB svg path {
	fill: #62C999;
}
.listNotice .SceneC svg path {
	fill: #4B509B;
}
.listNotice .tagCate {
	display: inline-block;
	color: #FFF;
	font-size: 0.8rem;
	text-align: center;
	padding: 1px 6px;
	margin-bottom: 5px;
}
.listNotice .SceneA .tagCate {
	background-color: #8B65AC;
}
.listNotice .SceneB .tagCate {
	background-color: #62C999;
}
.listNotice .SceneC .tagCate {
	background-color: #4B509B;
}

.btnToPost {
    position: fixed;
    right: 3.5%;
    bottom: 65px;
    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;
}
.mainNoticeList .btnToPost {
	line-height: 2.2;
}
.btnToPost svg {
	width: 1.6rem;
	height: auto;
}
.txtDelete {
	padding: 1.3rem;
	margin-bottom: 5%;
	background-color: #4B509B;
	margin-top: -9rem;
	animation: deleted 4s linear forwards;
}
@keyframes deleted {
	0% { margin-top: -9rem; }
	30% { margin-top: 0; }
	70% { margin-top: 0; }
	100% { margin-top: -9rem; }
}
.txtDelete h2, .txtSave h2 {
	font-size: 1.07rem;
	line-height: 1;
	color: #FFF;
	margin: 0;
}
.txtDeleteTtl {
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 14em;
}
.vertLineL {
	border-left: 1px solid #ACACAC;
	padding-left: 6px;
	margin-left: 6px;
}
.fontSm {
	font-size: 0.86rem;
}
.fontS {
	font-size: 0.93rem;
}
.deadline {
	display: inline-block;
	font-size: 0.86rem;
	background-color: #FFF;
	padding: 2px 20px;
	border-radius: 5px;
	margin-bottom: 7px;
}
.deadline i {
	margin-right: 5px;
}

/* # =================================================================
   # お言葉を確認 一覧
   # ================================================================= */
.mainLetterList {
    padding-top: 3.6rem;
}
.mainLetterList .noticeTtl, .letterMain .noticeTtl {
	background-color: #4B509B;
}
.mainLetterList .noticeTtl h2, .letterMain .noticeTtl h2 {
	font-family: 'Noto Sans JP', sans-serif;
	color: #FFF;
}
.letterList {
	position: relative;
    padding: 6%;
}
.letterList a {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}
.letterList .letterDisplays {
	position: absolute;
	top: 2%;
	right: 4.5%;
	z-index: 2;
}
.letterDisplays input[type=checkbox] {
	display: none;
}
.letterDisplays label::before {
	display: block;
	content: "";
	background: url("../img/icon-eye-show.svg") no-repeat center center / contain;
	width: 2rem;
	height: 1.4rem;
}
.letterDisplays input[type=checkbox]:checked+label::before {
	background-image: url("../img/icon-eye-hide.svg");
}
.letterDisplays label {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0;
	background-color: #FFF;
	min-width: 40px;
	height: 24px;
	border-radius: 20px;
	padding: 0 7px;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.txtLimit {
	position: relative;
	height: 5em;
	overflow: hidden;
	text-align: justify;
}
.txtLimit::after {
	content: "…続きを読む";
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: #FFF;
	height: 1.8em;
	z-index: 1;
}
.hideTxt {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top: -6px;
	left: 0;
	right: 0;
	bottom: -6px;
	font-family: 'Noto Sans JP', sans-serif;
	color: #FFF!important;
	background-color: rgba(126,126,126,0.8);
	z-index: 2;
}

/* # =================================================================
   # お言葉全文
   # ================================================================= */
.letterMain {
    padding-top: 3.6rem;
}


/* # =================================================================
   # 想い出投稿確認
   # ================================================================= */
.timelineUl li > div {
	margin-bottom: 4%;
}
.memoriesContents {
	position: relative;
	margin-bottom: 2%;
}
.memoriesContents .hideTxt {
	top: 6px;
	right: -6px;
	bottom: 6px;
	left: -6px;
}
.memoriesDisplays label, .albumDisplays label {
	position: relative;
	font-family: 'Noto Sans JP', sans-serif;
	padding-left: 2rem;
	margin-bottom: 0;
}
.memoriesDisplays label::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	width: 2rem;
	height: 1.4rem;
	transform: translateY(-50%);
	background: url("../img/icon-eye-hide.svg") no-repeat center center / contain;
}

.memoriesDisplays input[type=checkbox]:checked+label::before {
	background-image: url("../img/icon-eye-show.svg");
}

/* # =================================================================
   # アルバム確認
   # ================================================================= */
.albumList li {
	position: relative;
}
.albumList li.private img {
	filter: brightness(0.7);
}
.albumList li .hideTxt {
	background-color: rgba(126,126,126,0);
	pointer-events: none;
}

.albumDisplays label::before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 2rem;
	height: 1.4rem;
	transform: translateY(-50%);
	background: url("../img/icon-eye-hide.svg") no-repeat center center / contain;
}
.albumDisplays input[type=checkbox]:checked+label::before {
	background-image: url("../img/icon-eye-show.svg");
}


/* # =================================================================
   # 贈りもの確認
   # ================================================================= */
.mainGiftList {
	padding-top: 3.6rem;
}
.listGroupGift li {
	padding: 3% 0;
	border-bottom: 1px dotted #7E7E7E;
}
.listGroupGift li a {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.listGroupGift li img {
	width: 24%;
}
.listGroupGift li img + div {
	width: 72%;
}
.listGroupGift li p {
	font-size: 0.8rem;
	padding-bottom: 3%;
	border-bottom: 1px dotted #7E7E7E;
}
.listGroupGift li p span {
	font-size: 1rem;
	font-weight: 500;
}
.listGroupGift .giftName {
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* # =================================================================
   # 出品商品購入一覧
   # ================================================================= */
.mainOrderList {
	padding-top: 3.6rem;
}
.listGroupOrder li {
	padding: 3% 0;
	border-bottom: 1px dotted #7E7E7E;
}
.listGroupOrder li a {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.listGroupOrder li img {
	width: 24%;
}
.listGroupOrder li img + div {
	width: 72%;
}
.listGroupOrder li p {
	font-size: 0.9rem;
	/*padding-bottom: 3%;*/
	/*border-bottom: 1px dotted #7E7E7E;*/
}
.listGroupOrder li p span {
	font-size: 1rem;
	font-weight: 500;
}
.listGroupOrder .userName {
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* # =================================================================
   # 新着情報
   # ================================================================= */
.mainInfo {
	background-color: #F2F3F7;
}
.listInfo li {
	background-color: #FFF;
	padding: 10px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	margin-bottom: 3%;
}
.listInfo h2 {
	font-size: 1.07rem;
	color: #888;
	line-height: 1.6;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.listInfo img {
	width: 35px;
}
.listInfo div p {
	margin: 0 0 0 5px;
}
.txtSceneA {
	color: #8B65AC!important;
}
.txtSceneB {
	color: #62C999!important;
}
.txtSceneC {
	color: #4B509B!important;
}
.txtSceneD {
	color: #E09D4F!important;
}

.notify {
	top: -28px;
	right: 6px;
}


/* # =================================================================
   # パスワードを忘れた
   # ================================================================= */
.mainPwReset h2 {
	font-size: 1.28rem;
	line-height: 1.8;
}
.btnRoundOutline {
	display: block;
	text-align: center;
	border: 2px solid #000;
	border-radius: 20px;
	padding: 7px;
}
.btnRoundPrimary {
	display: block;
	color: #FFF;
	text-align: center;
	background-color: #6E5CF4;
	border: 2px solid #6E5CF4;
	border-radius: 20px;
	padding: 7px;
}


/* # =================================================================
   # 登録情報(設定)
   # ================================================================= */
#anotherAddrInput {
	display: none;
}
.radioStyle label {
	margin-left: 30px;
}
#btnSave {
	display: block;
	width: 100%;
}
#btnSave img, .txtSave img {
	filter: brightness(3);
	width: 18px;
	transform: translateY(-2px);
	margin-right: 5px;
}
.btnOutline {
	font-size: 0.93rem;
	background-color: #FFF;
	border: 1px solid #414141;
	border-radius: 5px;
	padding: 3px 8px;
}
#userName {
	width: 50%;
}
.txtSave {
	padding: 1.3rem;
	margin-bottom: 5%;
	background-color: #6E5CF4;
	margin-top: -8rem;
}
.txtSave.saved {
	animation: saved 4s linear forwards;
}
@keyframes saved {
	0% { margin-top: -8rem; }
	30% { margin-top: 0; }
	70% { margin-top: 0; }
	100% { margin-top: -8rem; }
}


/* # =================================================================
   # パスワードの変更
   # ================================================================= */
.mainChangePass .formTtl {
	font-size: 1.21rem;
	margin-bottom: 0.7rem;
}


/* # =================================================================
   # 入金可能残高を確認
   # ================================================================= */
.mainPayment {
	background-color: #F2F3F7;
	padding: 3.5rem 0 7.5rem;
}
.remainder {
	font-size: 1.8rem;
}
.remainder + .txtGr {
	font-size: 0.8rem;
	color: #818181;
}
.btnArr {
	display: inline-block;
	color: #FFF;
	padding: 3px 24px;
	min-width: 140px;
	position: relative;
	background-color: #6E5CF4;
	border-radius: 5px;
}
.btnArr::after {
	content: "";
	position: absolute;
	top: calc(50% - 4px);
	right: 10px;
	width: 9px;
	height: 9px;
	transform: rotate(45deg);
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
}
.listPayment li {
	background-color: #FFF;
	padding: 12px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	margin-bottom: 3%;
}
.listPayment .ttlEvent {
	color: #FFF;
	font-size: 0.86rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 1px 6px;
	margin-right: 15px;
}
.listPayment .eventDate {
	font-size: 0.86rem;
}
.listPayment .payer {
	font-size: 1.14rem;
}
.listPayment .amount {
	color: #ACACAC;
	font-size: 1.28rem;
}
.listPayment .amount.deposited {
	color: #000;
}
.listPayment .amount.deposited span {
	color: #BE0000;
}

/* # =================================================================
   # 振込先口座の指定
   # ================================================================= */
.mainTransfer {
	background-color: #F2F3F7;
	padding: 3.5rem 0 7.5rem;
}

/* # =================================================================
   # 商品一覧（product-list）
   # ================================================================= */
.giftListMain {
	overflow: inherit;
}
.itemList .price {
	font-size: 0.93rem;
}
.searchMenu {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 6%;
}
.searchMenu > * {
	color: #FFF;
	width: 32%;
	text-align: center;
	background-color: #606060;
	padding: 0.5%;
	border: 1px solid #FFF;
	border-radius: 5px;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
	margin-right: 2.5%;
}
.searchMenu > *:last-child {
	margin-right: 0;
}
.itemList {
	color: #707070;
	width: 46.5%;
	margin-bottom: 3%;
	transition: all 0.3s ease;
	opacity: 1;
}
.itemList.isHidden {
	opacity: 0;
	height: 0;
	margin: 0;
	position: relative;
	z-index: -1;
}

.itemList h3 {
	font-size: 0.85rem;
	border-bottom: 1px solid #707070;
	padding-bottom: 3%;
	margin: 3% 0 0;
}
.giftBreadcrumb span {
	display: inline-block;
	font-size: 0.8rem;
	font-family: 'Noto Sans JP', sans-serif, YuMincho, "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝";
	background-color: #E8E8E8;
	border-radius: 5px;
	padding: 0.8% 4%;
	margin: 0 2% 2% 0;
}






.modalSearch.show .modalContent {
	top: auto;
    bottom: 0;
}
.modalSearch .modalContent > div {
    padding: 3% 12%;
}
.modalSearch .modalContent {
	width: 100%;
	top: auto;
	bottom: -110%;
	border-radius: 0;
}
.modalSearch.show .modalContent {
	bottom: 0;
	transform: translate(-50%,0);
}
.modalSearch h2 {
	background-color: #6E5CF4;
}
.modalSearch .modalContent > div {
	padding: 3% 12%;
}

.modalSearch .modalContent .modalClose{
	position: absolute;
	top: 0.6rem;
	right: 3%;
	color: #FFF;
}

.noHitMsg {
	border: 2px solid #AFAFAF;
	border-radius: 6px;
	padding: 10% 4%;
	margin: 10% auto;
}
.noHitMsg p {
	color: #AFAFAF;
	text-align: center;
	font-size: 1.43rem;
}
.conditionalSearch label {
	padding: 0!important;
}
.conditionalSearch [type=radio] {
	display: none;
	box-sizing: border-box;
    padding: 0;
}
.conditionalSearch [type=radio]:not(:checked) {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

.conditionalSearch [type=radio]:not(:checked)+label {
    position: relative;
    cursor: pointer;
    display: inline-block;
    -webkit-transition: .28s ease;
    -o-transition: .28s ease;
    transition: .28s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.conditionalSearch label {
	width: 100%;
	position: relative;
    min-width: 200px;
    margin-bottom: 20px;
}

.conditionalSearch [type=radio]:not(:checked)+label:before {
    border: 1px solid #606060;
	border-radius: 50%;
}
.conditionalSearch [type=radio]+label:before {
    content: '';
    position: absolute;
    right: 0;
    top: -2px;
    margin: 4px;
    width: 18px;
    height: 18px;
    z-index: 0;
    -webkit-transition: .28s ease;
    -o-transition: .28s ease;
    transition: .28s ease;
}
.conditionalSearch [type=radio]+label:after {
    content: '';
    position: absolute;
    right: 1px;
    top: -1px;
    margin: 4px;
    width: 16px;
    height: 16px;
    -webkit-transition: .28s ease;
    -o-transition: .28s ease;
    transition: .28s ease;
	border-radius: 50%;
}
.conditionalSearch [type=radio]:checked+label:before {
    -webkit-animation: ripple 0.2s linear forwards;
    animation: ripple 0.2s linear forwards;
	border-radius: 50%;
	border: 1px solid #6E5CF4;
}
.conditionalSearch [type=radio]:checked+label:after {
	-webkit-animation: ripple 0.2s linear forwards;
	animation: ripple 0.2s linear forwards;
	transform: scale(0.75);
	z-index: 0;
	background-color: #6E5CF4;
	border-color: #6E5CF4;
}


/* # =================================================================
   # 商品詳細
   # ================================================================= */
.headerCart {
	display: flex;
	align-items: center;
	font-size: 0.92rem;
	text-align: left;
	position: relative;
	background-color: #FFF;
	border-radius: 20px;
	padding: 0 15px;
	height: 24px;
	box-shadow: 1px 1px 2px rgb(0,0,0,0.1);
}
.headerCart img {
	height: 15px;
	filter: brightness(0.1);
}
.headerCart .countBadge {
	position: absolute;
	top: -6px;
	right: -3px;
	width: 17px;
	height: 17px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 10px;
	font-weight: 500;
	text-align: center;
	line-height: 1.2;
	color: #FFF;
	border: 2px solid #FFF;
	border-radius: 20px;
	background-color: #AF0000;
}
.pageImgTtl {
	text-align: center;
	font-size: 1.43rem;
	margin: 9% 0 0;
	position: relative;
}

.boxGiftDtl {
	padding: 6%;
}
.button {
	color: #FFF;
	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 rgba(0,0,0,0.15);
	margin: 0 auto 3%;
}
/*.btnTypeC {
	display: block;
	color: #333;
    text-align: center;
	text-shadow:none;
	background-color: #FFF!important;
	border: 1px solid #333;
    border-radius: 5px;
}*/
/*.btnTypeD {
	font-size: 1.21rem;
	background: linear-gradient(90deg, #A296B3, #341A57);
	border: 1px solid #FFF;
}*/
.btnBuy {
	background-color: #6E5CF4;
	border: 1px solid #FFF;
	box-shadow: 0 0 7px rgba(110,92,244,0.6);
}

.itemDescription {
	margin: 8% auto;
}
.itemDescription dt {
	font-size: 1.06rem;
	padding-bottom: 4%;
	border-bottom: 1px solid #000;
	margin-bottom: 6%;
}
.itemBox h2 {
	font-size: 1.06rem;
	font-weight: 300;
	line-height: 1.4;
	margin: 5% auto 3%;
}
.price {
	color: #AF0000;
	font-weight: 500;
}
.itemBox .price {
	font-size: 1.62rem;
}
.btSelect {
	overflow: hidden;
	margin: auto 0;
	text-align: center;
	position: relative;
	border: 1px solid #bbbbbb;
	border-radius: 5px;
	background: #ffffff;
}
.btSelect select {
	width: 100%;
	padding-right: 1em;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	border: none;
	outline: none;
	background: transparent;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.btSelect select::-ms-expand {
	display: none;
}
.btSelect::before {
	position: absolute;
	top: calc(50% - 3px);
	right: 7px;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 6px solid #FFF;
	pointer-events: none;
	z-index: 1;
}
.btSelect:after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 22px;
	content: '';
	background-color: #414141;
	pointer-events: none;
	z-index: 0;
}
.btSelect select {
	padding: 0 36px 0 10px;
}


/* # =================================================================
   # カート
   # ================================================================= */
.btnGrBuy {
	width: 70%;
	color: #FFF;
    text-align: center;
    font-size: 1.06rem;
    line-height: 1.4;
    display: inline-block;
    border-radius: 5px;
    font-weight: bold;
    background-color: #62CA99;
    border: 2px solid #FFF;
    box-shadow: 0 0 7px rgb(98,201,153,0.6);
    padding: 2%;
    margin: 0 auto;
}
.cartItemList {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	border-bottom: 1px solid #707070;
	padding: 3% 0 4%;
	margin-bottom: 3%;
}
.cartItemList a {
	width: 25%;
}
.cartItemTxt {
	width: 70%;
}
.cartItemTxt .itemName {
	font-size: 0.86rem;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 2%;
}
.cartItemTxt .itemDesc {
	font-size: 0.8rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 4%;
}

.subtotal {
	font-size: 0.8rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.subtotal .price {
	font-size: 1.07rem;
}
.subtotal .cancel {
	color: #8E8E8E;
}

.totalPrice {
	font-weight: 600;
	text-align: right;
	margin: 15px 0 5px;
}
.totalPrice .price {
	font-size: 1.62rem;
	font-weight: 600;
}
.helpIcon {
	width: 1.6rem;
}
.cc-inputmask {
	letter-spacing: 1px;
}
.form-control {
	min-height: auto;
}
.form-control:focus {
	color: #000;
}
.txtGr {
	color: #707070;
}
.attention {
    color: #AF0000;
    text-align: center;
    font-size: 0.93rem;
}
.cartMain .modalConfirm .btnSubmit {
	background-color: #6E5CF4;
}

/* # =================================================================
   # 特定商取引法にもとづく表記
   # ================================================================= */
.lawMain h2 {
	text-align: center;
	font-size: 1.21rem;
	margin-bottom: 20px;
}
.dlNotation {
	margin-bottom: 15px;
}
.dlNotation dt {
	margin-bottom: 3px;
}
.dlNotation dd {
	padding-left: 1em;
	margin: 0;
}
.dlNotation .notationList {
	padding-left: 2rem;
	position: relative;
}
.dlNotation .notationList::before {
	content: "・";
	position: absolute;
	left: 1em;
}

/* # =================================================================
   # 注文完了
   # ================================================================= */
.ttlCenter {
	text-align: center;
	font-size: 1.35rem;
	margin-bottom: 15px;
}

/* # =================================================================
   # フォーム
   # ================================================================= */
.formInput {
	display: block;
	color: #000;
	border: 1px solid #CCC;
	width: 100%;
	height: auto;
	min-height: auto;
	background-color: #FFF;
	border-radius: 5px;
	padding: 4px 8px;
}
.formSelect {
	position: relative;
	width: 60%;
}
.formSelect select {
	width: 100%;
	background-color: #FFF;
	border: 1px solid #CCC;
	border-radius: 5px;
	padding: 4px;
}
.formControl {
	border-color: #26c6da;
	background-color: rgba(188,237,243,0.1);
}

/* # =================================================================
   # モーダル
   # ================================================================= */
.modalHead {
	color: #FFF;
	text-align: center;
	background-color: #6E5CF4;
	border-radius: 5px 5px 0 0;
	padding: 1.5% 0;
}
.modalConfirm {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.btnBack {
	display: block;
	width: 70%;
	color: #414141;
	background-color: #FFF;
	border: 1px solid #414141;
	border-radius: 5px;
	padding: 5px;
	margin: 0 auto;
}
.btnRun {
	display: block;
	color: #FFF;
	text-align: center;
	background-color: #6E5CF4;
	border-radius: 5px;
	border: 1px solid #6E5CF4;
	padding: 5px;
}
.btnCancel {
	display: block;
	color: #FFF;
	text-align: center;
	background-color: #C0C0C0;
	border-radius: 5px;
	border: 1px solid #C0C0C0;
	padding: 5px;
}
.modalConfirm .btnBack, .modalConfirm .btnRun, .modalConfirm .btnSubmit {
	width: 48%;
	text-align: center;
	margin: 0;
}
.modalConfirm .btnRun {
	margin-left: 4%;
}
.modal.blur {
	background-color: rgba(255,255,255,0.75);
	backdrop-filter: blur(1px);
}
.show .modalExpl {
	top: 48%;
}
.modalExpl {
	background-color: rgba(0,0,0,0);
}
.modalExpl > div {
	background-color: #fff;
	border-radius: 5px;
	padding: 4% 7%;
}
.modalExpl .modalHeadBorder {
	font-size: 1.21rem;
}
.modalClose.above {
	color: #FFF;
	text-align: right;
}
.listExpl li {
	padding-left: 1rem;
	position: relative;
	margin-bottom: 2.5%;
}
.listExpl li::before {
	content: "・";
	position: absolute;
	left: 0;
}

.modalScroll {
	position: relative;
	overflow-y: scroll;
	height: 72vh;
	padding: 0 3% 8%;
}
.modalScroll::after {
	content: "";
	display: block;
	position: fixed;
	bottom: 20px;
	right: 32px;
	width: 34px;
	height: 34px;
	background: url("../img/arrow-down.svg") no-repeat center center / cover;
}
.modalScroll img {
	border: 1px solid #DBDBDB;
}
.modalScroll p {
	margin-bottom: 6%;
}
.modalAttention h2 {
	font-size: 1.27rem;
	line-height: 1.6;
}

/* # =================================================================
   # テキスト
   # ================================================================= */
.txtRed { color: #BE0000; }
.txtPrimary { color: #6E5CF4; }
.fontWeight600 { font-weight: 600; }

.ttlSizeS {
	font-size: 1.06rem;
}

/* # =================================================================
   # ショップ 商品登録
   # ================================================================= */
.cntntArea {
	background-color: #FFF;
	box-shadow: 1px 2px 3px rgba(0,0,0,0.1);
	padding: 20px;
	margin-bottom: 30px;
}
.itemImgArea {
	position: relative;
	width: calc(100vw - 70px);
	height: calc(100vw - 70px);
	background: url("../img/no-image.svg") no-repeat center center / cover;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	overflow: hidden;
}
.itemImgArea img, .productImgArea img {
	object-fit: cover;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.itemImgArea #upfile {
	position: absolute;
	opacity: 0;
	top: 0;
	left: 0;
	width: 100%;
	bottom: 0;
	z-index: 1;
}
.listGrDot {
	color: #868686;
	font-size: 0.93rem;
	display: flex;
	white-space: nowrap;
	margin: 3px 0;
}
.listGrDot dt {
	font-weight: normal;
	overflow: hidden;
	margin-right: 5px;
}
input.formClosingDay {
	width: 160px;
}
input.formClosingTime {
	width: 100px;
}

.headerShare {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	background-color: #000;
	width: 50px;
	padding: 5px;
}
.txtDelete {
	color: #FFF;
}

.btnSecondary {
	color: #FFF!important;
	font-size: 1.14rem;
	font-weight: bold;
    display: block;
    text-align: center;
	border: 2px solid #FFF;
    border-radius: 5px;
    padding: 5px;
	margin: 15px auto;
}
.btnSecondary {
    background-color: #62CA99;
    box-shadow: 0 0 7px rgb(98,201,153,0.6);
}
.btnSecondary span {
	position: relative;
}
.btnSecondary span::after {
	content: "";
	position: absolute;
	top: calc(50% - 6px);
	right: -18px;
	display: block;
	width: 12px;
	height: 12px;
	transform: rotate(45deg);
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
}
.btnSecondary.disabled {
	background-color: #DEDEDE;
	box-shadow: none;
}
.switchTtl {
	font-weight: 500;
	margin-bottom: 0;
}

/* # =================================================================
   # ショップ 利用規約
   # ================================================================= */
.disabled {
	pointer-events: none;
}
#mainUserPolicy {
	padding-bottom: 100px;
}
.policyFix {
	position: fixed;
	bottom: 0;
	background-color: rgba(248,248,248,0.85);
	backdrop-filter: blur(3px);
	text-align: center;
	width: 100%;
	max-width: 1024px;
	padding: 13px 0;
}

.inputRound input {
	opacity: 0;
	position: absolute;
}
.inputRound label {
	display: block;
    position: relative;
    cursor: pointer;
    transition: .28s ease;
    user-select: none;
	padding-left: 25px;
}
.inputRound input+label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	margin: 4px;
	width: 16px;
	height: 16px;
	border: 1px solid #606060;
	border-radius: 50%;
	transition: .28s ease;
}
.inputRound input+label:after {
	content: '';
	position: absolute;
	left: 1px;
	top: 1px;
	margin: 4px;
	width: 14px;
	height: 14px;
	transition: .28s ease;
	border-radius: 50%;
}
.inputRound input:checked+label:before {
    animation: ripple 0.2s linear forwards;
	border-radius: 50%;
	border: 1px solid #6E5CF4;
}
.inputRound input:checked+label:after {
	animation: ripple 0.2s linear forwards;
	transform: scale(0.75);
	z-index: 0;
	background-color: #6E5CF4;
	border-color: #6E5CF4;
}
.policyFix .btnSecondary {
	margin: 6px auto 0;
}
.dl {
	margin-bottom: 18px;
}
.dl dt {
	font-size: 1.07rem;
	font-weight: 500;
	padding-bottom: 5px;
	border-bottom: 1px solid #000;
	margin-bottom: 5px;
}
.dl dd {
	font-size: 0.93rem;
}

/* # =================================================================
   # ショップ 商品を共有する
   # ================================================================= */
.borderBottom {
	border-bottom: 1px solid #7E7E7E;
	padding-bottom: 20px;
	margin-bottom: 20px;
}

/* # =================================================================
   # ショップ 出品商品一覧
   # ================================================================= */
.listShopProduct {
	margin-bottom: 20px;
}
.listShopProduct > div {
	position: relative;
	background-size: 18%;
	background-position: right 10px top 30px;
	padding: 3%;
	box-shadow: 0 3px 4px rgba(0,0,0,0.1);
	margin-bottom: 14px;
	background-color: #FFF9F2;
	background-image: url("../img/bg-logo-D.svg");
}
.listLabel div {
	display: flex;
	align-items: center;
	color: #FFF;
	white-space: nowrap;
	background-color: #E4E4E4;
	border-radius: 0 0 6px 6px;
	padding: 3px 9px;
	margin-left: 5px;
}
.listLabel div.active {
	background-color: #FC5E24;
}
.listLabel img {
	height: 14px;
	filter: brightness(4);
	margin-right: 5px;
}
.listShopProduct h2 {
	margin-bottom: 0;
}
.listShopProduct .status.accepting {
	background-color: #E09D4F;
}
.listShopProduct .productPrice {
	font-size: 0.9em;
	margin-bottom: 3px;
}
.productPrice span {
	color: #FC5E24;
	font-size: 1.43rem;
}
.listShopProduct .stock {
	font-size: 0.9em;
}


/* # =================================================================
   # レスポンシブ
   # ================================================================= */
/* Small（モバイル横） */
@media screen and (min-width: 576px) {
	html {
		font-size:1.8vw;
	}
	/*================ ショップ 商品登録 ================*/
	.itemImgArea {
		width: 450px;
		height: 450px;
	}
}
/* タブレット */
@media screen and (min-width: 768px) {
	header .logo img {
		width: 14rem;
	}

	.modalContent {
		width: 600px;
	}
	/*================ ログイン ================*/
	.ItemError {
		padding: 5px 5px 5px 40px;
	}
	main .logo {
		width: 19rem;
	}
	/*================ お言葉を確認 一覧 ================*/
	.letterDisplays {
		top: 5%;
		right: 5%;
	}
	/*================ イベント（催しもの）を設定する ================*/
	.btnMore {
		bottom: 140px;
	}
	/*================ お報せ一覧 ================*/
	.btnToPost {
		bottom: 75px;
	}
}
/* タブレット横以上 */
@media screen and (min-width: 1024px) {
	html {
		font-size: 15px;
	}
	.mainSendMail, .mainAbout {
		padding: 3.6rem 0 9rem;
	}
	/*================ イベント（催しもの）を設定する ================*/
	.btnMore {
		right: calc(50% - 460px);
	}
}