@charset "shift-jis";

:root {
	--bodyColor:#fafafa;				/*bodyの背景色*/
	--mainColor:#fff;					/*メインの背景色*/
	--subColor:#EADDD7;				/*ヘッダー/フッターなどの背景色*/
	--accentColor:#ce9b60;				/*アクセントカラー*/

	--btnColor-main:#C45A65;			/*ボタンの背景色など*/
	--btnColor-sub:#fff;				/*ボタンの文字など*/

	--btnColor-main-negativ:#b4b4b4;	/*disableボタンの背景色など*/
	--btnColor-sub-negativ:#919191;	/*disableボタンの文字など*/

	--navigationColor-main:#b4b4b4;	/*ナビゲーションの背景色など*/
	--navigationColor-sub:#C45A65;		/*ナビゲーションの文字など*/

	--textColor-title:#333;			/*タイトル文字色*/
	--textColor-main:#525252;			/*文字色*/
	--textLinkColor-main:#000;			/*テキストリンク*/
	--borderColor-main:#e5e5e5;		/*ボーダー*/

	--mailStatusColor-main:#477bc4;	/*未読*/
	--mailStatusColor-sub:#9B9B9B;		/*既読*/
}

body{
	color: var(--textColor-main);
	background: var(--bodyColor);
	font-family: "Helvetica Neue","Helvetica", "Arial", "Yu Gothic","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo", sans-serif;
	font-weight: 500;
}

p{
	font-size: 1.5rem;
	line-height: 1.75;
}

a{
	color: var(--textLinkColor-main);
}

/*----------------------------------------------
コンテナ
-----------------------------------------------*/

@media ( min-width : 980px ){
	.container{
		width: 480px;
	}
}

/*----------------------------------------------
リスト
-----------------------------------------------*/
.list{
	margin: 0 auto;
	width: 100%;
}

.list_item{
	padding: 8px;
	border-bottom: 1px solid var(--borderColor-main);
}

.list_item .item_left{
	width: 80px;
	height: 80px;
}

.list_item .item_right{
	padding: 0 16px 0 8px;
	width: calc(100% - 80px);
}

/*----------------------------------------------
表
-----------------------------------------------*/
.baseTable{
	table-layout: fixed;
	width: 100%;
	margin: 8px auto 16px;
	font-size: 1.3rem;
}

.baseTable th{
	width: 200px;
	padding: .5em;
	text-align: left;
	background: #fafdff;
	border-bottom: 1px solid var(--borderColor-main);
}

.baseTable td{
	padding: .2em;
	text-align: center;
	border-bottom: 1px solid var(--borderColor-main);
}

/*-----------------------------------------------
アイコン
-----------------------------------------------*/
.icon{
	display: block;
	width: 24px;
	height: 24px;
	-webkit-mask-size: cover;
	mask-size: cover;
}

.btn .icon{
	display: inline-block;
	vertical-align: bottom;
	background-color: var(--btnColor-sub);
}

.icon-home{
	-webkit-mask-image: url('../img/svg-home.svg');
	mask-image: url('../img/svg-home.svg');
}

.icon-search{
	-webkit-mask-image: url('../img/svg-search.svg');
	mask-image: url('../img/svg-search.svg');
}

.icon-chat{
	-webkit-mask-image: url('../img/svg-chat.svg');
	mask-image: url('../img/svg-chat.svg');
}

.icon-coin{
	-webkit-mask-image: url('../img/svg-coin.svg');
	mask-image: url('../img/svg-coin.svg');
}

.icon-coin{
	-webkit-mask-image: url('../img/svg-point.svg');
	mask-image: url('../img/svg-point.svg');
}

.icon-user{
	-webkit-mask-image: url('../img/svg-user.svg');
	mask-image: url('../img/svg-user.svg');
}

.icon-heart{
	-webkit-mask-image: url('../img/svg-heart.svg');
	mask-image: url('../img/svg-heart.svg');
}

.icon-crossmark{
	-webkit-mask-image: url('../img/svg-crossmark.svg');
	mask-image: url('../img/svg-crossmark.svg');
}

.icon-crossmark-thin{
	-webkit-mask-image: url('../img/svg-crossmark-thin.svg');
	mask-image: url('../img/svg-crossmark-thin.svg');
}

.icon-exclamation{
	-webkit-mask-image: url('../img/svg-exclamation.svg');
	mask-image: url('../img/svg-exclamation.svg');
}

.icon-info{
	-webkit-mask-image: url('../img/svg-info.svg');
	mask-image: url('../img/svg-info.svg');
}

.icon-camera{
	-webkit-mask-image: url('../img/svg-camera.svg');
	mask-image: url('../img/svg-camera.svg');
}

.icon-edit{
	-webkit-mask-image: url('../img/svg-edit.svg');
	mask-image: url('../img/svg-edit.svg');
}

.icon-mail{
	-webkit-mask-image: url('../img/svg-mail.svg');
	mask-image: url('../img/svg-mail.svg');
}

.icon-question{
	-webkit-mask-image: url('../img/svg-question.svg');
	mask-image: url('../img/svg-question.svg');
}

.icon-menuCircle{
	-webkit-mask-image: url('../img/svg-menuCircle.svg');
	mask-image: url('../img/svg-menuCircle.svg');
}

.icon-smartphone{
	-webkit-mask-image: url('../img/svg-smartphone.svg');
	mask-image: url('../img/svg-smartphone.svg');
}

.icon-send{
	-webkit-mask-image: url('../img/svg-send.svg');
	mask-image: url('../img/svg-send.svg');
}

.icon-close{
	-webkit-mask-image: url('../img/svg-crossmark.svg');
	mask-image: url('../img/svg-crossmark.svg');
}

.icon-reload{
	-webkit-mask-image: url('../img/svg-reload.svg');
	mask-image: url('../img/svg-reload.svg');
}

.icon-leftArrow{
	-webkit-mask-image: url('../img/svg-leftArrow.svg');
	mask-image: url('../img/svg-leftArrow.svg');
}

.icon-searchForm{
	-webkit-mask-image: url('../img/svg-searchForm.svg');
	mask-image: url('../img/svg-searchForm.svg');
}

.icon-checkMark-circle{
	-webkit-mask-image: url('../img/svg-checkMark-circle.svg');
	mask-image: url('../img/svg-checkMark-circle.svg');
}

.icon-edit-square{
	-webkit-mask-image: url('../img/svg-edit-square.svg');
	mask-image: url('../img/svg-edit-square.svg');
}

.icon-comments{
	-webkit-mask-image: url('../img/svg-comments.svg');
	mask-image: url('../img/svg-comments.svg');
}

.icon-settings{
	-webkit-mask-image: url('../img/svg-settings.svg');
	mask-image: url('../img/svg-settings.svg');
}

.icon-logout{
	-webkit-mask-image: url('../img/svg-logout.svg');
	mask-image: url('../img/svg-logout.svg');
}

.icon-arrowCircle-up{
	-webkit-mask-image: url('../img/svg-arrowCircle-up.svg');
	mask-image: url('../img/svg-arrowCircle-up.svg');
}

.icon-arrowCircle-down{
	-webkit-mask-image: url('../img/svg-arrowCircle-down.svg');
	mask-image: url('../img/svg-arrowCircle-down.svg');
}

.icon-file{
	-webkit-mask-image: url('../img/svg-file.svg');
	mask-image: url('../img/svg-file.svg');
}

.icon-svg-encrypted{
	-webkit-mask-image: url('../img/svg-svg-encrypted.svg');
	mask-image: url('../img/svg-svg-encrypted.svg');
}

.icon-creditCard{
	-webkit-mask-image: url('../img/svg-creditCard.svg');
	mask-image: url('../img/svg-creditCard.svg');
}

.icon-thumbsUp-stroke{
	-webkit-mask-image: url('../img/svg-thumbsUp-stroke.svg');
	mask-image: url('../img/svg-thumbsUp-stroke.svg');
}

.icon-thumbsUp-fill{
	-webkit-mask-image: url('../img/svg-thumbsUp-fill.svg');
	mask-image: url('../img/svg-thumbsUp-fill.svg');
}

.icon-msg{
	-webkit-mask-image: url('../img/svg-msg.svg');
	mask-image: url('../img/svg-msg.svg');
}

.icon-login{
	-webkit-mask-image: url('../img/svg-login.svg');
	mask-image: url('../img/svg-login.svg');
}

/*----------------------------------------------
見出し系
-----------------------------------------------*/
.contentsTitle{
	margin: 24px auto 8px;
	font-size: 1.6rem;
	font-weight: bold;
	color: var(--textColor-title)
}

/*----------------------------------------------
テキスト系
-----------------------------------------------*/
/*年月日時分表示*/
.date{
	font-size: 1.2rem;
	font-weight: normal;
	margin-bottom: 4px;
}

/*メール状態*/
.mailStatus{
	font-size: 1.1rem;
}

.unread{
	color:var(--mailStatusColor-main);
}

.read{
	color:var(--mailStatusColor-sub);
}

/*未読バッジ*/
.unreadCountBadge{
	position: absolute;
	top: 4px;
	right: 4px;
	display: block;
	width: 20px;
	height: 20px;
	line-height: 20px;
	font-size: 1rem;
	color:var(--btnColor-sub);
	background: var(--mailStatusColor-main);
	border-radius: 50%;
}

.msg{
	display: flex;
	align-items: center;
	margin: 8px auto;
	padding: 8px;
	font-weight: bold;
	background: #fcfcfc;
	border-radius: 8px;
}

.msg .icon{
	width: 20px;
	height: 20px;
	margin-right: 4px;
	background-color: #fff;
}

.msg-confirm{
	color: #fff;
	background: #44bea9;
}

.msg-completed{
	color: #fff;
	background: #449bd0;
}

.msg-error{
	color: #fff;
	background: #d93d22;
}

.msg-coinPurchase{
	padding: 16px;
	font-size: 1.3rem;
	text-align: center;
	background: #ffeec3;
}

.msg-noData{
	flex-direction: column;
	margin: 8% auto 0;
	width: 90%;
}

.msg-noData .icon{
	margin-bottom: 16px;
	width: 160px;
	height: 160px;
	background-color: #ff0040;
}

/*----------------------------------------------
ボタン系
-----------------------------------------------*/
.btn{
	width: 72%;
	margin: 32px auto;
	padding: 12px;
	font-size: 1.5rem;
	color:var(--btnColor-sub);
	background: var(--btnColor-main);
	border-radius: 24px;
	position: relative;
}

.holizontalBtnWrapper{
	display: flex;
}

.smoothScrollBtnWrapper{
	display: grid;
	position:fixed;
	right: 8px;
	bottom: 25%;
}

@media ( min-width : 980px ){
	.smoothScrollBtnWrapper{
		right: calc(50% - 240px);
	}
}

.smoothScrollBtn{
	width: 40px;
	height: 40px;
	mask-size: contain;
	mask-repeat: no-repeat;
	background-color:var(--navigationColor-sub);
	cursor: pointer;
}

#btnTop{
	mask-image: url(../img/svg-arrowCircle-up.svg);
}

#btnBottom{
	mask-image: url(../img/svg-arrowCircle-up.svg);
	transform: rotate(180deg);
}

#scrollToTop{
	width: 40px;
	height: 40px;
	right: 12px;
	bottom: 64px;
	background: url(../img/svg-arrowCircle-up.svg);
	background-size: contain;
	background-repeat: no-repeat;
}

#scrollToBottom{
	width: 40px;
	height: 40px;
	right: 12px;
	bottom: 64px;
	background: url(../img/svg-arrowCircle-up.svg);
	background-size: contain;
	background-repeat: no-repeat;
}

.btn-float{
	position:fixed;
	width: 64px;
	height: 64px;
	right: 12px;
	bottom: 12%;
	font-size: 1rem;
	color: #fff;
	background: rgba(255, 0, 85, 0.65);
	background-size: contain;
	background-repeat: no-repeat;
	border-radius: 50%;
	display: grid;
	place-items: center;
	align-content: center;
}

.btn-float .icon{
	margin: 0 auto;
	background-color: #fff;
}

@media ( min-width : 980px ){
	.btn-float{
		right: calc(50% - 246px);
	}
}

/*ページネーション*/
.pagination_item.nowPage{
	background: #c5d1ea;
}

/*スライドトグル用*/
.show{
	width: 100%;
	margin: 0 auto;
	padding: 8px;
	color: var(--textColor-main);
	text-align: left;
	background: none;
	border: none;
	border-radius: 0;
	position: relative;
	cursor: pointer;
}

.show::after{
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - 6px);
	right: 16px;
	width: 8px;
	height: 8px;
	border-right: 1px solid var(--textColor-main);
	border-bottom: 1px solid var(--textColor-main);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.show.is-active::after{
	-webkit-transform: rotate(225deg);
	transform: rotate(225deg);
}

.btn-showMore{
	width: 60%;
	margin: 16px auto;
	padding: 4px;
	font-size: 1.5rem;
	color:var(--btnColor-sub);
	background: var(--btnColor-main);
}

.btn-showMore::before{
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - 8px);
	left: 25%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--btnColor-main);
	border-bottom: 2px solid var(--btnColor-main);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/*-----------------------------------------------
モーダルウィンドウ
-----------------------------------------------*/
.modal{
	display: none;
}

.modalwindow{
	position: fixed;
	top:0; 
	left:0; 
	width:100%; 
	height:100%;
	height:100vh;
	background:rgba(0,0,0,.75);
	z-index: 9998;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin: 0 auto;
}

.modalwindowContents{
	width: 90%;
	max-width: 480px;
	max-height: 80vh;
	overflow-y: scroll;
	margin: 0 auto;
	padding: 16px;
	background:#fff;
	border-radius: 8px;
	position: relative;
	-ms-overflow-style: none;/*スクロールバー非表示（IE・Edge）*/
	scrollbar-width: none; /*スクロールバー非表示（Firefox）*/
}

.modalwindowContents .contentsTitle{
	margin-top: 0;
}

/*スクロールバー非表示（Chrome・Safari）*/
.modalwindowContents::-webkit-scrollbar{
	display:none;
}

.modalwindowContents .contentsTitle{
	text-align: center;
	border-bottom: 1px solid var(--borderColor-main);
}

.modalwindowContents .icon-close{
	position: absolute;
	right: 4px;
	top: 4px;
	width: 32px;
	height: 32px;
	background-color: var(--btnColor-sub-negativ);
	cursor: pointer;
}

/*----------------------------------------------
汎用BOX
-----------------------------------------------*/
.inBox{
	padding: 16px;
	box-shadow: 0 0 16px #e2e2e2;
	border-radius: 8px;
}

/*----------------------------------------------
エフェクト
-----------------------------------------------*/
@keyframes blinking {
	0% {
		opacity: .25;
	}
	100% {
		opacity: 1;
	}
}
.blink {
	animation: blinking 1s ease-in-out infinite alternate;
}

/*----------------------------------------------
ヘッダー
-----------------------------------------------*/
header{
	width: 100%;
	top: 0;
	position: fixed;
	z-index: 996;
}

.headerInner{
	padding: 0 8px;
	height: 56px;
	background: var(--subColor);
	border-bottom: 1px solid #eaeaea;
	box-shadow: 0 4px 8px -2px rgba(179, 179, 179, 0.2);
}

.headerInner_right,.headerInner_center,.headerInner_left{
	height: 100%;
	display: grid;
	place-items: center;
}

.btn-header{
	margin: 0 ;
	padding: 0;
	width: 100%;
	height: 100%;
	font-size: .8rem;
	color:var(--navigationColor-sub);
	background: none;
	border: none;
	border-radius: 0;
}

.btn-header .icon{
	display: block;
	margin: 0 auto;
	background-color: var(--navigationColor-sub);
}

.btn-header.pageBack .icon{
	width: 30px;
	height: 30px;
	margin: 4px auto;
}

.btnHolizontalBox .btn-header{
	width: 50%;
}

.pageTitle{
	color: var(--textColor-title);
	font-weight: bold;
	font-size: 1.5rem;
}

/*-----------------------------------------------
メイン
-----------------------------------------------*/
.container-main{
	padding-top: 56px;
	padding-bottom: 56px;
	min-height: 100dvh;
	background: var(--mainColor);
}

/*ログイン前他*/
#nonMemberPage .container-main{
	padding-bottom: 0;
	min-height: calc(100dvh - 47px);
}

/*ログイン前TOP*/
#nonMemberPage .topPageContainer-main{
	padding-top: 64px;
	background: var(--mainColor);
}

/*-----------------------------------------------
フッター
-----------------------------------------------*/
footer{
	width: 100%;
}

/*-----------------------------------------------
タブメニュー
-----------------------------------------------*/
.tabMenuList_item{
	display: grid;
	place-items: center;
	width: 49%;
	margin-bottom: 16px;
	text-align: center;
	font-weight: bold;
	border-bottom: 2px solid var(--btnColor-main-negativ);
}

.tabMenuList_item_link{
	display: block;
	width: 100%;
	padding: 8px;
	color: var(--btnColor-main-negativ);
}

.tabMenuList_item.active{
	color:var(--btnColor-main);
	border-bottom: 2px solid var(--btnColor-main);
}

/*-----------------------------------------------
ボトムナビゲーション
-----------------------------------------------*/
.bottomNavigationArea{
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	height: 56px;
	z-index: 996;
}

.bottomNavigation{
	background: var(--subColor);
	background: #fff;
	box-shadow:  0 -4px 8px -2px rgba(179, 179, 179, 0.2);
}

.bottomNavigation_item{
	display: grid;
	place-items: center;
	align-content: center;
	flex: 1;
	height: 56px;
	text-align: center;
	font-size: 1rem;
}

.bottomNavigation_item:last-child{
	border:none;
}

.bottomNavigation_item_link{
	display: block;
	padding: 6px 4px 0 4px;
	width: 100%;
	height: 100%;
	font-weight: bold;
	color:var(--navigationColor-main);
	position:relative;
}

.bottomNavigation_item_link .icon{
	margin: 4px auto;
	background-color:var(--navigationColor-main);
}

.bottomNavigation_item_link.active{
	color: var(--navigationColor-sub);
}

.bottomNavigation_item_link.active .icon{
	background-color: var(--navigationColor-sub);
}

/*-----------------------------------------------
入力フォーム
-----------------------------------------------*/
.formBox{
	padding: 0 16px
}

.birthItemsWrapper{
	gap: 4px;
}

input[type="number"].birth-year{
	width: 33%;
}

.birth-month,.birth-day{
	width: 20%;
}

.prefcture{
	width: 33%;
}

.altCheckBoxWrapper{
	display: flex;
	flex-wrap: wrap;
}

.altCheckBoxWrapper .altCheckBox{
	width: 49%;
	max-width:240px;
	margin: 8px auto;
	padding-left: 18px;
	font-weight: normal;
	font-size: 1.4rem;
	text-align: left;
}

/*チェックボックス枠*/
.altCheckBoxWrapper .altCheckBox:after {
	border-radius: 0;
	top: 0;
	margin: 0;
	background: #fafafa;
	border: 1px solid #ddd;
}

/*チェック時*/
.altCheckBoxWrapper input[type="checkbox"]:checked+.altCheckBox {
	color: #333;
	font-weight: normal;
}

.altCheckBoxWrapper input[type="checkbox"]:checked+.altCheckBox:before {
	display: block;
	top: 9px;
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
	z-index: 1;
}

.formBox_item input[type="checkbox"]:checked+.altCheckBox:after {
	border: 1px solid #333;
}

.altCheckBoxWrapper-agree .altCheckBox{
	width: auto;
	margin: 16px auto 0;
}

/*確認画面*/
.formBox-confirm .formBox_item_title{
	font-size: 1.3rem;
	color: #888;
	border-bottom: 1px solid #e5e5e5;
}

.formBox-confirm .holizontalBtnWrapper .btn{
	width: 48%;
}

.formBox-confirm .holizontalBtnWrapper .btn-cancel{
	color: var(--btnColor-sub);
	background: var(--btnColor-main-negativ);
}

/*-----------------------------------------------
ログイン前TOP
-----------------------------------------------*/
.logo{
	width: 160px;
}

.nonMemberTopPageHeaderBtns{
	display: flex;
}

.nonMemberTopPageHeaderBtns .btn-entry,
.nonMemberTopPageHeaderBtns .btn-login{
	display: grid;
	place-items: center;
	align-content: center;
	width: 64px;
	height: 56px;
	text-align: center;
	font-weight: bold;
	font-size: 1.1rem;
	color:var(--btnColor-main);
}

.nonMemberTopPageHeaderBtns .icon{
	background-color: var(--btnColor-main);
}

/*横幅フル*/
.fullWidthArea{
	width: 100%;
	background: #fde1de;
}

/*トップページ用コンテンツ*/
.topPageContensWrapper{
	padding:32px 6%;
	width: 100%;
}

/*横スクロールエリア*/
.scrollable-horizontal{
	margin-left: -6%;
	margin-right: -6%;
	padding: 0 16px;
	overflow-x: scroll;
}

.scrollable-horizontal::-webkit-scrollbar {
	width: 4px;
	height: 12px;
	border-radius: 8px;
	background: #dca5a8;
}

.scrollable-horizontal::-webkit-scrollbar-thumb {
	background: #ff8181;
	border-radius: 8px;
}

.topPageContensWrapper .contentsTitle{
	font-size: 3.2rem;
	margin: 0 auto 24px;
}

.topPageContensWrapper .contentsTitle .en{
	display: block;
	margin: -8px 0 0 4px;
	font-weight: bold;
	color: #fe6970;
	font-size: 1.4rem;
}

.mainVisualWrapper{
	width: 96%;
	margin: 0 auto;
	position: relative;
}

.mainVisual{
	display: block;
	border-radius: 16px;
	overflow: hidden;
}

.mainVisualWrapper .btn-entry{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	margin: 0 auto;
	width: 80%;
	font-size: 2rem;
	background: var(--btnColor-main);
	border-radius: 128px;
	box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.4);
}

.introduction .topPageContensWrapper{
	padding-bottom: 0;
}

.introduction_title{
	padding: 8px 0;
	font-weight: bold;
	font-size: 1.8rem;
	text-align: center;
	color: #C45A65;
}

/*特徴*/
.feartureList_item{
	padding: 8px;
}

.feartureList_item .tmb{
	width: 100%;
	margin-bottom: 8px;
	aspect-ratio: 1/1;
	border-radius: 8px;
}

.feartureList_item:not(:last-child){
	margin-bottom: 16px;
}

.feartureList_item_title{
	padding: 8px 0;
	font-weight: bold;
	font-size: 1.8rem;
	text-align: center;
	color: #C45A65;
}

/*使い方*/
.useFlowList{
	width: 720px;
	padding: 0 0 24px;
	display: flex;
}

.useFlowList_item{
	margin-right: 24px;
}

.useFlowList_item .balloon{
	margin-bottom: 16px;
	padding: 8px;
	text-align: center;
	font-weight: bold;
	background: #fff;
	border-radius: 8px;
	position: relative;
}

.useFlowList_item .balloon::after{
	content: "";
	display: block;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 0);
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 12px solid #fff;
	border-bottom: 8px solid transparent;
}

/*安心・安全*/
.safetyList{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.safetyList_item{
	margin-bottom: 16px;
}

.safetyList_item .tmbWrapper{
	margin: 0 auto;
	padding: 24px 8px;
	background: linear-gradient(135deg,#4682B4,#ADD8E6);
	border-radius: 16px;
}

.safetyList_item .tmb{
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: contain;
	border-radius: 8px;
}

.safetyList_item .title{
	padding: 16px 8px;
	font-size: 2rem;
	text-align: center;
	font-weight: bold;
}

.safetyList_item .text{
	padding: 8px;
}

/*料金表*/
.topPageContensWrapper .planListWrapper{
	padding: 0;
	background: none;
}

.topPageContensWrapper .planList_item{
	width: 90%;
	margin: 0 auto 8px;
	box-shadow: none;
}

.topPageContensWrapper .planeName{
	margin: 0 0 16px;
}

.topPageContensWrapper .planListWrapper-standard .planeName,
.topPageContensWrapper .planListWrapper-premium .planeName{
	border-radius: 128px;
}

/*みんなの声*/
.usersVoiceList_item{
	display: flex;
	justify-content: space-evenly;
	align-self: center;
	margin-bottom: 32px;
}

.usersVoiceList_item .userData{
	width: 20%;
	text-align: center;
}

.usersVoiceList_item .text{
	width: 70%;
	margin-top: 24px;
	padding: 8px;
	text-align: left;
	background: #fff6f1;
	border-radius: 0 8px 8px 8px;
}

.usersVoiceList_item:nth-child(even) .userData{
	order: 2;
}

.usersVoiceList_item:nth-child(even) .text{
	border-radius: 8px 0 8px 8px;
}

/*よくある質問*/
.faqList_item {
	margin-bottom: 16px;
	padding: 16px;
	border: 1px solid #DEDEDE;
	border-radius: 8px;
}

.question {
	position: relative;
	cursor: pointer;
}

.question::after {
	position: absolute;
	top: calc(50% - 6px);
	right: 8px;
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-top: 1px solid #7f8499;
	border-right: 1px solid #7f8499;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}

.question.is-open::after {
	border-top: none;
	border-top: 1px solid #7f8499;
	border-right: 1px solid #7f8499;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.question .text {
	width: calc(100% - 30px);
	font-size: 1.4rem;
	font-weight: bold;
}

.answer {
	display: none;
}

.answer .text {
	padding: 8px 0;
	font-size: 1.4rem;
}

#nonMemberPage .footerLinkList{
	padding-top: 24px;
}

#nonMemberPage .footerLinkList .list_item{
	padding: 0;
	width: 100%;
	border-bottom: none;
}

#nonMemberPage .footerLinkList .list_item_link{
	display: block;
	width: 100%;
	padding: 16px;
	font-weight: bold;
	font-size: 1.4rem;
}

/*スライドアップ*/
.slineUpContents{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	transform: translateY(100%);
	transition: transform 0.5s ease;
	z-index: 200;
}

.slineUpContents.is-show {
	transform: translateY(0);
}

.slineUpContents .container{
	padding: 8px 0;
	background: rgba(255,255,255,.5);
}

.slineUpContents .container .btn{
	margin: 8px auto;
}

/*-----------------------------------------------
プロフ写真登録
-----------------------------------------------*/
/*写真加工*/
.altRadioBtn-effect{
	width: 24%;
	border-radius: 4px;
}

input[type="radio"]:checked + .altRadioBtn{
	color:#fff;
	background: #60cea9;
}

/*-----------------------------------------------
年齢確認
-----------------------------------------------*/
.aboutAgeVerification{
	margin-bottom: 16px;
	padding: 16px;
}

.ageVerificationList{
	margin-bottom: 32px;
}

.ageVerificationList .list_item{
	width: 100%;
	margin-bottom: 16px;
	padding: 16px 8px;
	border: 1px solid #e5e5e5;
}

.ageVerificationList .list_item .btn{
	margin: 0 auto 16px;
}

.ageVerificationForm{
	padding: 24px;
}

.guideline{
	margin: 24px auto;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
}

.guideline_inner{
	display: none;
	color: #525252;
	padding: 8px;
	border-top: 1px solid #e5e5e5;
}

/*-----------------------------------------------
プロフィール関連
-----------------------------------------------*/
.userPic{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center;
	border-radius: 8px;
	cursor: pointer;
}

/*サムネイル*/
.tmb{
	display: block;
	margin: 0 auto;
	width: 96px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
}

.name,.area,.age,.sex{
	max-width: 33%;
	font-size: 1.2rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.female{
	color: #d00060;
}

.male{
	color: #0068d0;
}

.comment{
	font-size: 1.4rem;
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

/*-----------------------------------------------
プロフィール詳細
-----------------------------------------------*/
#userProfile{
	width: 94%;
	max-width: 480px;
	margin: 0 auto;
}

#userProfile .userPicList .userPicList_item{
	padding: 4px;
	width: 20%;
	overflow: hidden;
}

#userProfile .loginStatus{
	margin: 8px auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

#userProfile .loginStatus::before{
	content: "";
	display: inline-block;
	margin-right: 4px;
	width: 12px;
	height: 12px;
	background: #00d0bf;
	border-radius: 50%;
}

#userProfile .name{
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
	font-weight: bold;
	font-size: 1.7rem;
}

.userProfileDetailsList{
	padding: 8px 0;
}

.userProfileDetailsList .userProfileDetailsList_item{
	display: flex;
	align-items: flex-start;
}

.userProfileDetailsList .userProfileDetailsList_item .headline{
	font-weight: bold;
	padding-left: 8px;
	width: 20%;
	min-width: 64px;
	text-align: left;
	font-size: 1.3rem;
}

.btn-like,
.btn-msg,
.btn-likeAndMsg{
	display: grid;
	place-items: center;
	align-content: center;
	width: 96%;
	margin: 0 auto;
	font-size: 1.2rem;
	color: #fff;
	border-radius: 8px;
}

.btn-msg{
	background: #6d5eee;
}

.btn-like,
.btn-likeAndMsg{
	background: var(--btnColor-main);
}

.btn-like.disabled{
	background: #969595;
}

.btn-like .icon,
.btn-msg .icon,
.btn-likeAndMsg .icon{
	margin: 4px auto 0;
	background-color: #fff;
}

/*-----------------------------------------------
会員一覧関連
-----------------------------------------------*/
.item_right.details{
	padding: 0 16px 0 8px;
	width: calc(100% - 80px);
}

/*検索（画像一覧）*/
#sameAreaUserList .list_item{
	width: 33.333%;
	border: none;
}

/*-----------------------------------------------
いいね一覧
-----------------------------------------------*/
#likeUserList .list_item{
	width: 49%;
	margin-bottom: 2%;
	border: none;
	box-shadow: 0 0 16px #e2e2e2;
}

#likeUserList .userPicWrapper{
	position: relative;
}

#likeUserList .btn-showMsg{
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	background:rgba(199, 17, 18, 0.65);
	border-radius: 50%;
}

#likeUserList .btn-showMsg .icon{
	width: 20px;
	height: 20px;
	background-color: #fff;
}

#likeUserList .name{
	max-width: 100%;
	font-size: 1.5rem;
}

#likeUserList .age{
	font-size: 1.3rem;
}

#likeUserList .btn-like,
#likeUserList .btn-likeAndMsg{
	display: flex;
	align-items: center;
	padding: 4px 0 4px 8%;
}

#likeUserList .btn-like .icon,
#likeUserList .btn-likeAndMsg .icon{
	margin:0 8px 0 0;
}

#likeUserList .btn-like{
	margin-bottom: 8px;
}

/*-----------------------------------------------
トーク
-----------------------------------------------*/
.partnerName{
	display: block;
	width: 100%;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.messageList_item{
	margin-bottom: 16px;
	padding: 8px;
}

.messageArea{
	padding-left: calc(100% - 80%);
	width: 100%;
}

.messageArea .mailStatus{
	margin-right: 4px;
}

.messageArea .date{
	text-align: right;
}

.messageArea .btn-delete{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30%;
	max-width: 96px;
	margin: 4px 0 0 auto;
	padding: 2px 4px 2px 0;
	font-size: 1.2rem;
	color: var(--btnColor-sub-negativ);
	background: #d3d3d3;
	border-radius: 8px;
}

.messageArea .btn-delete .icon{
	background-color:  var(--btnColor-sub-negativ);
}

.messageList_item .balloon{
	margin: 0 0 8px 8px;
	padding:8px;
	background: #fafafa;
	border-radius: 8px;
	position: relative;
}

.messageList_item .balloon:before{
	display: block;
	content: " ";
	width: 12px;
	height: 12px;
	background: #fafafa;
	transform: rotate(45deg);
	position: absolute;
	top: 16px;
	right: -6px;
}

.messageList_item.fromPartner .tmb{
	width: 64px;
	height: 64px;
	aspect-ratio: 1/1;
}

.messageList_item.fromPartner .balloon:before{
	left: -6px;
}

.messageList_item.fromPartner .messageArea{
	padding-left: 0;
}

.messageList_item.fromPartner .messageArea .date{
	text-align: left;
	margin-left: 8px;
}

.messageList_item .messageArea .tmb{
	margin-left: calc(100% - 96px);
	width: 96px;
	height: auto;
	border-radius: 0;
}

.messageList_item.fromPartner .messageArea .tmb{
	width: 96px;
	height: auto;
	margin-left: 8px;
	border-radius: 0;
}

#messageSendForm{
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	z-index: 996;
}

#messageSendForm .container{
	padding: 8px;
	background: var(--subColor);
}

#messageSendForm .btn-upload{
	display: block;
	width: 40px;
	height: 40px;
	padding: 8px;
	border-radius: 50%;
	background: var(--btnColor-main);
	position: relative;
}

.btn-upload .icon{
	background-color: var(--btnColor-sub);
}

.btn-upload .icon.fileUpload{
	-webkit-mask-image: url('../img/svg-plus.svg');
	mask-image: url('../img/svg-plus.svg');
}

.btn-upload .icon.fileUpload.active{
	-webkit-mask-image: url('../img/svg-clip.svg');
	mask-image: url('../img/svg-clip.svg');
}

#messageSendForm input[type="file"]{
	display: none;
}

#messageSendForm textarea{
	width: 65%;
	margin: 0 4px;
}

#messageSendForm .btn-send{
	margin: 0;
	width: 96px;
}

/*-----------------------------------------------
掲示板
-----------------------------------------------*/
/*一覧*/
#bbsList .list_item{
	margin-bottom: 16px;
	padding: 8px;
	border-radius: 8px;
	box-shadow: 0 0 16px #e2e2e2;
}

#bbsList .list_item_link{
	padding: 8px;
}

#bbsList .tmb{
	margin: 0 4px 0 0;
	width: 40px;
	height: 40px;
}

.bbsTitle{
	margin-top: 8px;
	font-size: 1.8rem;
	font-weight: bold;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.postUserWrapper{
	padding-left: 8px;
	color: #8f8f8f;
}

.postUserWrapper p{
	font-size: 1.2rem;
}

/*スレッド*/
.threadList_item-first{
	background:#fffcf3;
	border: 1px solid #fff;
}

.threadList_item{
	margin-bottom: 16px;
	padding: 8px;
	border-radius: 8px;
	box-shadow: 0 0 16px #e2e2e2;
}

.threadList_item .tmb{
	display: block;
	margin: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

/*-----------------------------------------------
お知らせ一覧関連
-----------------------------------------------*/
.infomationTitle{
	display: inline-block;
	width: 85%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

/*-----------------------------------------------
プラン選択
-----------------------------------------------*/
.planListWrapper{
	padding: 0 12px 8px;
	width: 49%;
	background:#f3f8fc;
}

.planListWrapper-premium{
	background:#fff7f1;
}

.planeName{
	margin-right: -12px;
	margin-left: -12px;
	margin-bottom: 16px;
	padding: 8px;
	text-align: center;
	font-weight: bold;
	color: #fff;
	background:#4682B4;
}

.planListWrapper-premium .planeName{
	background:#CFA98D;
}

.planList{
	width: 100%;
}

.planList_item{
	margin-bottom: 16px;
	padding: 0;
	width: 100%;
	text-align: center;
	background: #fff;
	border: 1px solid var(--borderColor-main);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 4px 4px 8px #c4c4c4;
}

.planeDetails{
	padding-bottom: 8px;
}

.period{
	font-weight: bold;
	font-size: 3rem;
	color: #fff;
	background:#4682B4;
}

.period span{
	font-size: 1.4rem;
}

.planListWrapper-premium .period{
	background:#CFA98D;
}

.price{
	font-weight: bold;
	color: #141d55;
}

.price span{
	font-size: 2.4rem;
}

.totalPrice{
	margin-top: -8px;
	font-weight: bold;
	font-size: 1.2rem;
	color: #59595c;
	border-radius: 4px;
}

.btn-cupon{
	margin:0 0 0 8px;
	padding: 8px;
	border-radius: 4px;
	background: #6092ce;
}

/*-----------------------------------------------
マイページ
-----------------------------------------------*/
.userProfile-myPage{
	margin: -8px -8px 16px;
	padding: 16px;
	background: #fafafa;
}

.userProfile-myPage .tmb{
	width: 80px;
	height: 80px;
	border-radius: 50%;
}

.userProfile-myPage_inner{
	width: calc(100% - 80px);
	padding-left: 8px;
}

.userProfile-myPage_inner .name{
	width: 100%;
	font-weight: bold;
	font-size: 1.8rem;
}

.userProfile-myPage_inner .btn{
	margin: 0;
	width: 48%;
	max-width: 240px;
	padding: .25em;
	color: var(--btnColor-main);
	background: var(--btnColor-sub);
	border: 1px solid var(--btnColor-main);
}

.contentsTitle-myPage{
	padding-left: 4px;
	font-size: 1.8rem;
	color: #c9b7b0;
	border-bottom: 4px solid var(--subColor);
}

/*利用中のプラン*/
.planWrapper{
	margin: 0 auto 24px;
}

.plan_item{
	display: flex;
	align-items: center;
	margin-bottom: 8px;
	padding: 0 8px 8px;
	font-weight: bold;
	font-size: 1.8rem;
	text-align:left;
	border-bottom: 1px solid var(--borderColor-main);
}

.plan_item .headline{
	display: inline-block;
	width: 33%;
	max-width: 120px;
	margin-right: 16px;
	padding: 8px;
	font-size: 1.3rem;
	text-align: center;
	color: var(--textColor-title);
	background: #fafafa;
	border-radius: 128px;
}

.nextPlanName{
	font-size: 1.2rem;
}

.dialog{
	margin: 8px auto;
	border: 1px solid #ff2600;
	box-shadow: 0 0 16px #e2e2e2;
}

.dialog .msg{
	margin-top: 0;
	border-radius: 0;
}

.dialog .text{
	padding: 4px;
	text-align: center;
	font-size: 1.3rem;
}

.dialog .btn{
	display: flex;
	justify-content: end;
	align-items: center;
	margin: 0 0 0 auto;
	width: 50%;
	color: #ff2600;
	background: none;
}

.dialog .btn::after{
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-top: 1px solid #ff2600;
	border-right: 1px solid #ff2600;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.myPageMenuList{
	margin-bottom: 32px;
	padding-left: 8px;
}

.myPageMenuList .list_item{
	padding: 0;
}

.myPageMenuList .list_item_link{
	padding: 8px;
}

.myPageMenuList .icon{
	display: inline-block;
	vertical-align: bottom;
	margin-right: 16px;
	background-color: #b4b4b4;
}

.myPageMenuList .link_text{
	position: relative;
	display: inline-block;
}

.myPageMenuList .link_text .newArraivalsBadge{
	right: -24px;
	top: 0;
	left: auto;
}

/*-----------------------------------------------
写真変更
-----------------------------------------------*/
/*現在設定中の画像*/
.picWapper{
	display: block;
	margin: 0 auto 16px;
	padding: 8px;
	width: 90%;
	border: 1px solid var(--borderColor-main);
	overflow: hidden;
}

/*-----------------------------------------------
プラン変更
-----------------------------------------------*/
.changePlanWrapper{
	margin-bottom: 64px;
}

.changePlanWrapper-current{
	position: relative;
}

.changePlanWrapper-current::after{
	content: "";
	display: block;
	position: absolute;
	top: 120%;
	right: 0;
	left: 0;
	margin: auto;
	width: 48px;
	height: 48px;
	background: url(../img/svg-arrowDoubleDown.svg);
	background-size: contain;
	background-repeat: no-repeat;
}