/* CSS Document */
#mynumber_wap p,
#mynumber_wap ul{
	color: #000;
	font-size: 16px;
}
#mynumber_wap h3,
#mynumber_wap h4,
#mynumber_wap p,
#mynumber_wap ul{
	line-height: 160%;
}
#mynumber_wap img{
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
#mynumber_wap a:hover img{
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}
#mynumber_wap a{
	text-decoration: none;
	outline: none;
	display: block;
}
#mynumber_wap *:focus {
	outline: none;
}

#mynumber_wap{
	width: auto;
	height: auto;
	margin: 0 auto;
	text-align: center;
	outline: none;
	font-weight: bold;
}

h2{
	margin: 0;
}


/*****************************************************************************
****************** 共通 ******************************************************
*****************************************************************************/
.mynumber_contents .box{
	max-width: 1100px;
	width: auto;
	margin: 0 auto;
	text-align: center;
	height: auto;
}

.mynumber_contents.yellow{
	background-color: #ffff00;
}

.mynumber_contents.pink{
	background-color: #ff85a6;
	padding-bottom: 7rem;
}
.mynumber_contents.pink .box{
	position: relative;
}
.mynumber_contents.pink .box img.manga{
	position: absolute;
	right: 8%;
	top: -19%;
	width: 18% !important;
}
@media screen and (max-width: 991px) {
	.mynumber_contents.pink .box img.manga{
		top: -9%;
	}
}
@media screen and (max-width: 767px) {
	.mynumber_contents.pink .box img.manga{
		top: -7%;
		width: 25% !important;
	}
}


.mynumber_contents.pink .video{
	width:100%;              /*横幅いっぱいにwidthを指定*/
	padding-bottom: 56.25%;  /*高さをpaddingで指定(16:9)*/
	height:0px;              /*高さはpaddingで指定するためheightは0に*/
	position: relative;
	margin-bottom: 5rem;
}
.mynumber_contents.pink .video iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.mynumber_contents.pink .box img.step{
	width: 60% !important;
	margin-bottom: 3rem;
}
.mynumber_contents.pink .procedure{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}
.mynumber_contents.pink .procedure div{
	flex-basis: 21%;
	background-color: #fff;
	border-radius: 50%;
	padding: 3.3rem;
	text-align: center;
	position: relative;
}
.mynumber_contents.pink .procedure div:last-of-type{
	padding: 3.3rem 3rem;
}
.mynumber_contents.pink .procedure div p:first-of-type{
	font-size: 22px !important;
	margin-bottom: 0.5rem;
}
.mynumber_contents.pink .procedure div:last-of-type p:nth-of-type(2){
	font-size: 19px !important;
	color: #e84a7f !important;
}
.mynumber_contents.pink .procedure div:last-of-type p:last-of-type{
	font-size: 16px !important;
	font-weight: normal;
	margin-bottom: 1rem;
}
.mynumber_contents.pink .procedure div img{
	width: 85% !important;
	margin-bottom: 1rem;
}
.mynumber_contents.pink .procedure div a{
	background-image:	url(../img/subpage/mynumber/img_link-back.png);
	background-repeat: no-repeat;
	background-size: 9%;
	background-position: 92% center;
	color: #e84a7f !important;
	border: 1px solid #e84a7f;
	border-radius: 10px;
	border-radius: 20px;
	padding: 0.5rem;
}
.mynumber_contents.pink .procedure div a:hover{
	background-image:	url(../img/subpage/mynumber/img_link-back-on.png);
	color: #fff !important;
	background-color: #e84a7f;
}
.mynumber_contents.pink .procedure div img.arrow{
	position: absolute;
	top: 40%;
	right: -12%;
	width: 8% !important;
}
@media screen and (max-width: 991px) {
	.mynumber_contents.pink .procedure{
		display: block;
	}
	.mynumber_contents.pink .procedure div{
		width: 40%;
		margin: 0 auto;
	}
	.mynumber_contents.pink .procedure div:not(:last-of-type){
		margin-bottom: 3rem;
	}
	.mynumber_contents.pink .procedure div a{
		width: 70%;
		margin: 0 auto;
	}
	.mynumber_contents.pink .procedure div img.arrow{
		transform: rotate(90deg);
		top: unset;
		bottom: -24%;
		right: 46%;
	}
}
@media screen and (max-width: 767px) {
	.mynumber_contents.pink .box img.step{
		width: 90% !important;
	}
	.mynumber_contents.pink .procedure div{
		width: 60%;
	}
}
@media screen and (max-width: 373px) {
	.mynumber_contents.pink .procedure div p:first-of-type{
		font-size: 6vw !important;
	}
	.mynumber_contents.pink .procedure div:last-of-type p:nth-of-type(2){
		font-size: 5vw !important;
	}
	.mynumber_contents.pink .procedure div:last-of-type p:last-of-type{
		font-size: 4.2vw !important;
	}
}

.mynumber_contents.pink .reduction{
	background-image:	url(../img/subpage/mynumber/img_pink-back.png);
	background-repeat: no-repeat;
	background-size: 100%;
	margin-top: 5rem;
}
.mynumber_contents.pink .reduction .box {
	color: #fff !important;
}
.mynumber_contents.pink .reduction .box > p{
	color: #fff !important;
}
.mynumber_contents.pink .reduction .box > p:first-of-type{
	font-size: 25px !important;
}
.mynumber_contents.pink .reduction .box > p:last-of-type{
	font-size: 72px !important;
}
.mynumber_contents.pink .reduction .box img{
	width: 50% !important;
	margin: 3rem 0;
}
.mynumber_contents.pink .attention{
	background-color: #fff;
	border-radius: 50px;
	text-align: left;
	padding: 2% 11%;
	width: 60% !important;
	margin: 0 auto;
}
.mynumber_contents.pink .attention p{
	font-size: 24px !important;
}
.mynumber_contents.pink .attention ul{
	color: #000;
}
@media screen and (max-width: 991px) {
	.mynumber_contents.pink .reduction .box > p:last-of-type{
		font-size: 7vw !important;
	}
}
@media screen and (max-width: 767px) {
	.mynumber_contents.pink .reduction{
		background-position: center 25%;
	}
	.mynumber_contents.pink .reduction .box img{
		width: 70% !important;
	}
	.mynumber_contents.pink .reduction .box > p:first-of-type{
		font-size: 16px !important;
	}
	.mynumber_contents.pink .reduction .box > p:last-of-type{
		margin-bottom: 2rem;
	}
	.mynumber_contents.pink .attention{
		padding: 5%;
		width: 85% !important;
	}
	.mynumber_contents.pink .attention p{
		font-size: 5.3vw !important;
	}
}

.mynumber_contents.white{
	padding: 7rem 0;
}
.mynumber_contents.white h3{
	background-image:	url(../img/subpage/mynumber/img_pink-border.png);
	background-repeat: no-repeat;
	background-size: 32rem;
	background-position: bottom center;
	font-size: 32px;
	font-weight: bold;
	padding-bottom: 3rem;
	margin-bottom: 5rem;
}
.mynumber_contents.white .merit{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.mynumber_contents.white .merit div{
	flex-basis: 22%;
	border: 2px solid #e84a7f;
	border-radius: 20px;
	padding: 3rem;
	text-align: left;
	margin-bottom: 1rem;
}
.mynumber_contents.white .merit div h4{
	color: #e84a7f !important;
	font-size: 20px;
	background-color: #fffb8b;
	display: inline;
}
.mynumber_contents.white .merit div p{
	margin-top: 1rem;
}
.mynumber_contents.white .box > p{
	text-align: left;
}
@media screen and (max-width: 991px) {
	.mynumber_contents.white{
		padding: 7rem 1rem;
	}
	.mynumber_contents.white .merit div{
		flex-basis: 35%;
	}
}
@media screen and (max-width: 767px) {
	.mynumber_contents.white .merit{
		display: block;
	}
}

.mynumber_contents.cream{
	background-color: #fffdc9;
	padding: 7rem 0;
}
.mynumber_contents.cream h3{
	font-size: 36px;
	margin-bottom: 1rem;
}
.mynumber_contents.cream .title{
	background-image:
		url(../img/subpage/mynumber/img_pink-border.png),
		url(../img/subpage/mynumber/img_woman.png);
	background-repeat: no-repeat;
	background-size:
		32rem,
		13rem;
	background-position:
		center bottom,
		90% center;
	padding-bottom: 3rem;
	margin-bottom: 5rem;
}
.mynumber_contents.cream .title p{
	font-size: 162px !important;
	color: #e84a7f !important;
	line-height: unset !important;
}
.mynumber_contents.cream .title p span{
	font-size: 115px !important;
	color: #fff;
	text-shadow: 1px 1px 0 #231815, -1px -1px 0 #231815, -1px 1px 0 #231815, 1px -1px 0 #231815, 0px 1px 0 #231815, 0-1px 0 #231815, -1px 0 0 #231815, 1px 0 0 #231815;
	padding: 0 2rem;
}
.mynumber_contents.cream .question-box {
	text-align: left;
	width: 90%;
	margin: 0 auto;
}
.mynumber_contents.cream .qa {
	margin-bottom: 7rem;
}
.mynumber_contents.cream .qa .question-box:not(:last-of-type) {
	border-bottom: 1px solid #e84a7f;
	padding-bottom: 2rem;
	margin-bottom: 2rem;
}
.mynumber_contents.cream .question-box div{
	display: flex;
}
.mynumber_contents.cream .question-box div p:first-of-type{
	flex-shrink: 0;
	flex-basis: 4.5rem;
	font-family: 'Noto Sans JP', sans-serif;
}
.mynumber_contents.cream .question-box .question{
	align-items: center;
	margin-bottom: 0.5rem;
}
.mynumber_contents.cream .question-box .question p{
	font-size: 21px !important;
}
.mynumber_contents.cream .question-box .question p:first-of-type{
	background-image:	url(../img/subpage/mynumber/img_speech.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	font-size: 30px !important;
	color: #fff !important;
	font-weight: 900;
	padding: 0.5rem 0;
	padding-right: 0.3rem;
	text-align: center;
	margin-right: 1rem;
}
.mynumber_contents.cream .question-box .answer p:first-of-type{
	text-align: right;
	font-size: 25px !important;
	color: #e84a7f !important;
	margin-right: 1rem;
}
.mynumber_contents.cream .question-box .answer p:last-of-type{
	flex-basis: auto;
}
@media screen and (max-width: 991px) {
	.mynumber_contents.cream .title{
		background-position:
			center bottom,
			35rem center;
	}
}
@media screen and (max-width: 767px) {
	.mynumber_contents.cream{
		padding: 7rem 1rem;
	}
	.mynumber_contents.cream h3{
		font-size: 7vw;
	}
	.mynumber_contents.cream .title p{
		font-size: 30vw !important;
	}
	.mynumber_contents.cream .title p span{
		font-size: 26vw !important;
		padding-left: 0 1rem;
	}
	.mynumber_contents.cream .question-box div{
		display: block;
	}
	.mynumber_contents.cream .question-box .answer p:first-of-type{
		text-align: left;
	}
}

.mynumber_contents.cream .contact {
	/*margin-bottom: 7rem;*/
}
.mynumber_contents.cream .contact p{
	font-size: 29px !important;
	margin-bottom: 3rem;
}
.mynumber_contents.cream .contact br{
	display: none;
}
.mynumber_contents.cream .contact div{
	display: flex;
	justify-content: center;
}
.mynumber_contents.cream .contact a{
	color: #e84a7f !important;
	background-color: #fff;
	border: 1px solid #e84a7f;
	border-radius: 30px;
	padding: 0.5rem 0;
	flex-basis: 20%;
	font-size: 23px;
}
.mynumber_contents.cream .contact a:not(:last-of-type){
	margin-right: 1rem;
}
.mynumber_contents.cream .contact a:hover{
	color: #fff !important;
	background-color: #e84a7f;
}
@media screen and (max-width: 767px) {
	.mynumber_contents.cream .contact br{
		display: block;
	}
	.mynumber_contents.cream .contact a{
		flex-basis: 50%;
	}
}

.mynumber_contents.cream .banner{
	width: 70%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between
}
.mynumber_contents.cream .banner a{
	flex-basis: 48%;
}
@media screen and (max-width: 767px) {
	.mynumber_contents.cream .banner{
		width: 100%;
		display: block;
	}
	.mynumber_contents.cream .banner a:not(:last-of-type){
		margin-bottom: 1rem;
	}
}