/*header
-----------------------------------------------------------*/

header {
    height: -webkit-calc(560px + 10vw);
    height: calc(560px + 10vw);
	background-color: transparent;
	position: relative;
	overflow: hidden;
	/*background-image: url("/sites/default/files/page/lp/youmeappli_new/img/bg_bottom_pw.png");*/
	background-image: url("/sites/default/files/page/lp/youmeappli_new/img/bg_bottom_pink.png");
	background-position: center bottom 48px;
	background-repeat: no-repeat;
	background-size: 100% 10vw;
}
/* 0324芝生追加 */
.green_wrap{
	width: 100%;
	position: relative;
}

.green_wrap::after{
	position: absolute;
	content: "";
	display: inline-block;
	background:  url("/sites/default/files/page/lp/youmeappli_new/img/lp_top_green.png");
	width: 100%;
	height: 500px;
	background-size: cover;
	bottom: 0;
	left: 0;
}

/* 前後関係 */

header h1 img,
scrollBtn img{
	position: relative;
}

header,
header .line,
header h1 img,
scrollBtn img,
#scroll #scrollBtn{
	z-index: 2;
}
/*////////////////////////////////////////*/

header h1 {
	position: absolute;
	top: 0;
	left: 50%;
	width: 1200px;
	margin-left: -600px;
}

header h2 {
	position: absolute;
	top: 552px;
	left: 50%;
	width: 720px;
	margin-left: -360px;
}

header .line {
	position: absolute;
	top: 0;
	width: 8px;
	height: 100%;
	background-color: #c60079;
}
header .lineLeft { left: 0; }
header .lineRight { right: 0; }

header .topArea {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
    width: 100%;
    height: 6px;
    background-color: #c60079;
}

header .bottomArea {
	position: absolute;
	bottom: 0;
	left: 0;
    width: 100%;
    height: 48px;
    background-color: #c60079;
}


@media screen and (max-width: 800px) {
	
	header {
		height: -webkit-calc(148px + 80vw);
        height: calc(148px + 80vw);
        background-size: 120vw 12vw;
		background-position: center top calc(52px + 75vw);
    }
	
	header h1 {
		top: 52px;
        left: 0;
        width: 100%;
        margin-left: 0;
    }

    header h2 {
		top: -webkit-calc(40px + 80vw);
		top: calc(40px + 80vw);
        width: 240px;
        margin-left: -120px;
    }
	
    header .line {
        width: 6px;
    }
	
	header .topArea {
		display: block;
	}
	
	header .bottomArea {
		height: 999px;
		bottom: inherit;
		top: calc(52px + 85vw);
	}
	
	/* 0324芝生追加 */
	.green_wrap::after{
		background:  url("/sites/default/files/page/lp/youmeappli_new/img/lp_top_green_sp.png");
		background-size: cover;
		bottom: -90px;
		z-index: -1;
		background-position: top center;
	}


}

/*scroll
-----------------------------------------------------------*/

#scroll {
	width: 100%;
	background-color: #c60079;
	padding-top: 12px;
}

#scroll #scrollBtn {
	width: 80px;
	margin: 0 auto;
	position: relative;
	top: -4vw;
	cursor: pointer;
}

@media screen and (max-width: 800px) {
	
	#scroll {
        padding: 16px 0 12px;
    }

    #scroll #scrollBtn {
        width: 60px;
        position: relative;
        top: 0;
    }
	
}


/*バナー
-----------------------------------------------------------*/

#banner {
	margin-top: -1.5vw;
	background-color: #c60079;
	background-image: url("/sites/default/files/page/lp/youmeappli_new/img/bg_bottom_white.png");
	background-position: center bottom -1px;
	background-repeat: no-repeat;
	background-size: 100% 10vw;
	padding-bottom: -webkit-calc(60px + 10vw);
	padding-bottom: calc(60px + 10vw);
}

#banner a {
	display: block;
	width: 800px;
	margin: 0 auto;
	background-color: #fff;
}

#banner a:last-of-type {
	margin-top: 20px;
}

@media screen and (max-width: 800px) {
	
    #banner {
        margin-top: 0;
        background-size: 120vw 12vw;
        padding-bottom: -webkit-calc(40px + 12vw);
        padding-bottom: calc(40px + 12vw);
		padding-top: 12px;
    }
	
	#banner a {
        width: 80%;
		max-width: 360px;
		min-width: 280px;
    }

    #banner a:last-of-type {
        margin-top: 16px;
    }
	
}


/*アプリの便利でおトクな機能
-----------------------------------------------------------*/

#spec h2 {
	width: 560px;
	margin: 12px auto 0;
}

#spec .pointBox {
	margin-top: 40px;
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

#spec .pointBox:first-of-type {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

#spec .pointBox:last-of-type {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

#spec .pointBox .point {
	width: 420px;
	background-color: #f7e3ee;
	border-radius: 24px;
	position: relative;
	padding-bottom: 96px;
}

#spec .pointBox:first-of-type .point { margin-right: 40px; }
#spec .pointBox:last-of-type .point { margin-left: 40px; }

#spec .pointBox .point .icon {
	width: 120px;
	margin: 0 auto;
	position: relative;
	z-index: 21;
}

#spec .pointBox .point .txtBox {
	margin-top: -60px;
	width: 100%;
	background-color: #f7e3ee;
	border-radius: 24px;
	padding: 80px 6% 0;
	position: relative;
	z-index: 20;
}

#spec .pointBox .point .txtBox h3 {
	text-align: center;
	font-size: 22px;
	font-size: 2.2rem;
	line-height: 150%;
	font-weight: 500;
	color: #c60079;
}

#spec .pointBox .point .txtBox p {
	margin-top: 8px;
}

#spec .pointBox .point .txtBox p.notes {
	margin-top: 4px;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 150%;
}

#spec .pointBox .point .txtBox .num {
	position: absolute;
	top: 12px;
	right: 18px;
	width: 64px;
}

#spec .pointBox .point .txtBox .pointIconBox {
	margin: 16px auto 0;
	width: 80%;
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

#spec .pointBox .point .txtBox .pointIconBox .pointIcon {
	width: 33%;
}

#spec .pointBox .point .txtBox .pointIconBox .pointIcon p {
	line-height: 150%;
	text-align: center;
	margin-top: 0;
}

#spec .pointBox .point .commonBtn {
	position: absolute;
	bottom: 28px;
}

#spec .pointBox .wcv {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 160px;
	background-color: #fff;
}

/*ここから11/26追記*/


.point {
    margin-top: 20px;
}

.point .point_acc {
    border-radius: 24px;
    background-color: #b40067;
    margin-bottom: 12px;
}

.point .point_acc .point_t {
	border-radius: 24px;
	background-color: #b40067;
	color: #fff;
	padding: 26px 100px 26px 92px;
	position: relative;
	cursor: pointer;
}

.point .point_acc .point_t .plusBox {
	position: absolute;
	top: 30px;
	right: 36px;
}

.point .point_acc .point_t .plusBox .tate,
.point .point_acc .point_t .plusBox .yoko {
	background-color: #fff;
}


.point .point_acc .point_inner {
	display: none;
	border-bottom-right-radius: 24px;
	border-bottom-left-radius: 24px;
	background-color: #fbf0f6;
	padding: 26px 0 26px;
}

.point .point_acc .point_inner .notes {
	margin-top: 4px;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 150%;
}

.point .point_acc .point_inner .next {
	margin-top: 10px;
}

.point .point_acc .point_inner a {
	color: #c60079;
	text-decoration: underline;
}

.point .point_acc .point_inner a:hover {
	text-decoration: none;
}

.point_inner h4{
	    margin: 16px auto 0;
    text-align: center;
}

.point_inner h4 span.txt{
	display: inline-block;
    min-width: 280px;
    min-height: 48px;
    border-radius: 24px;
    background-color: #c60079;
    color: #fff;
    text-align: center;
    font-size: 22px;
    font-size: 2.2rem;
    line-height: 150%;
    font-weight: 500;
    padding: 6px 24px;
}

.point_inner .udhd {
    width: 90%;
    max-width: 720px;
    margin: 24px auto;
    text-align: center;
}

.point_inner .uhd {
    width: 90%;
    max-width: 720px;
    margin: 0 auto 24px;
}

.point_inner .detailBox .udhd div {
    display: inline-block;
}

.point_inner .udhd .notes {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 150%;
    margin-top: 6px;
    text-align: left;
}
    
.point_inner .uiBox {
    margin-top: 32px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
}

.point_inner .uiBox .ui {
    margin: 0 20px;
    width: 280px;
}

.point_inner .uiBoxFour .ui {
    margin: 0 15px;
    width: 210px;
}


.point_inner .uiBoxThree .ui {
    width: 250px;
}

.point_inner .uiBox .ui .num {
    margin: 0 auto 8px;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background-color: #c60079;
    color: #fff;
    text-align: center;
    font-size: 26px;
    font-size: 2.6rem;
    line-height: 120%;
    font-weight: 500;
    padding-top: 4px;
}

.point_inner .uiBox .ui .imgBox {
    position: relative;
    overflow-x: visible;
}

.point_inner .uiBox .ui .imgBox .bow {
    width: 12px;
    position: absolute;
    top: 178px;
    right: -26px;
}

.point_inner .uiBoxFour .ui .imgBox .bow {
	top: 131px!important;
	right: -21px!important;
}

.point_inner .uiBox .ui .imgBox .bbow {
    width: 12px;
    position: absolute;
    top: 178px;
    left: -26px;
}

.point_inner .uiBox .ui p {
    margin-top: 16px;
}


.point_inner .detailBox {
    width: 90%;
    max-width: 1040px;
    margin: 0 auto 16px;
    border-radius: 24px;
    padding: 28px 0 36px;
    background-color: #fff;
}

.point_inner .detailBox .step {
    margin: 0 auto;
    width: 112px;
}

.point_inner .detailBox .appDl {
    margin: 24px auto 0;
    width: 180px;
}

.point_inner .detailBox .appDl a {
    display: block;
    margin-top: 6px;
}

@media screen and (max-width: 800px){
	
	.point .point_acc {
    border-radius: 25px;
}
	
	.point .point_acc .point_t {
    border-radius: 20px;
    padding: 18px 54px;
    background-position: 20px 20px;
    background-size: 24px 24px;
}
	.point .point_acc .point_t .plusBox {
    position: absolute;
    top: 22px;
    right: 20px;
}
	
	
	.point_inner .udhd {
    margin: 20px auto 0;
}
	.point_inner .uiFrame {
    width: 100%;
    height: auto;
    overflow-x: scroll;
    overflow-y: hidden;
}
	
	.point_inner .uiFrame::-webkit-scrollbar {
        height: 4px;
    }

    .point_inner .uiFrame::-webkit-scrollbar-thumb {
        background: rgba(198,0,121,0.3);
        border-radius: 0;
    }

    .point_inner .uiFrame::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.1);
    }
	
	.point_inner .uiFrame::-webkit-scrollbar {
        display: none;
    }
	
	.point_inner .uiBox {
    margin: 30px auto 0;
    padding: 0 30px;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
	.point_inner .uiBoxTwo {
    width: 510px;
}
	.point_inner .uiBoxThree {
    width: 750px;
}
	.point_inner .uiBoxFour {
    width: 990px;
}
	.point_inner .uiBoxSix {
		width: 1470px;
    }
	.point_inner .uiBox .ui {
    margin: 0;
    width: 210px;
}
	
	.point_inner .uiBox .ui .num {
    margin: 0 auto 6px;
    width: 36px;
    height: 36px;
    border-radius: 18px;
    font-size: 20px;
    font-size: 2.0rem;
    line-height: 125%;
    padding-top: 4px;
}
	
}
	
	
	

/*ここまで11/26追記*/

@media screen and (max-width: 800px) {
	
	#spec {
		margin-top: 72px;
	}
	
    #spec h2 {
        width: 77.78%;
		max-width: 350px;
		min-width: 280px;
    }
	
	#spec .pointBox {
        margin-top: 24px;
        display: block;
    }
	
	#spec .pointBox:last-of-type { margin-top: 16px; }

    #spec .pointBox .point {
        width: 100%;
        background-color: #fff;
        border-radius: 0;
		padding-bottom: 0;
    }
	
    #spec .pointBox:first-of-type .point { margin-right: 0; }
    #spec .pointBox:last-of-type .point { margin-left: 0; }
	
	#spec .pointBox .point:nth-of-type(2){
		margin-top: 16px;
	}

    #spec .pointBox .point .icon {
        width: 90px;
    }

    #spec .pointBox .point .txtBox {
        margin-top: -45px;
        border-radius: 20px;
        padding: 61px 6% 5vw;
    }

    #spec .pointBox .point .txtBox h3 {
        text-align: center;
        font-size: 20px;
        font-size: 2.0rem;
    }

    #spec .pointBox .point .txtBox p {
        margin-top: 8px;
    }

    #spec .pointBox .point .txtBox p.notes {
        margin-top: 3px;
        font-size: 12px;
        font-size: 1.2rem;
    }

    #spec .pointBox .point .txtBox .num {
        position: absolute;
        top: 10px;
        right: 16px;
        width: 48px;
    }

    #spec .pointBox .point .txtBox .pointIconBox {
		max-width: 300px;
		margin: 16px auto 0;
    }

    #spec .pointBox .point .txtBox .pointIconBox .pointIcon {
        max-width: 90px;
    }

    #spec .pointBox .point .commonBtn {
        position: relative;
        bottom: inherit;
		margin-top: 24px;
    }

    #spec .pointBox .wcv {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 160px;
        background-color: #fff;
    }	
	
}


/*ますますおトクに便利に
-----------------------------------------------------------*/

#more {
	margin-top: 100px;
	background-color: #c60079;
	background-image: url("/sites/default/files/page/lp/youmeappli_new/img/bg_bottom_pw.png"),url("/sites/default/files/page/lp/youmeappli_new/img/bg_bottom_rose.png");
	background-position: center top, center bottom;
	background-repeat: no-repeat, no-repeat;
	background-size: 100% 10vw, 100% 10vw;
	padding: 10vw 0;
}

#more h2 {
	width: 75%;
	max-width: 480px;
	margin: 0 auto 48px;
}

#more .moreBox {
	width: 100%;
	height: 280px;
	position: relative;
	padding-top: 32px;
	padding-left: 648px;
	margin-bottom: 36px;
}

#more .moreBox:nth-of-type(2){
	padding-left: 0;	
}

#more .moreBox:last-of-type {
	margin-bottom: 80px;
}

#more .moreBox .imgBox {
	position: absolute;
	top: 0;
	left: 0;
	width: 600px;
}

#more .moreBox:nth-of-type(2) .imgBox {
	left: inherit;
	right: 0;
}

#more .moreBox .txtBox img {
	display: inline-block;
	width: 60px;
}

#more .moreBox .txtBox p {
	margin-top: 8px;
	color: #fff;
	font-size: 22px;
	font-size: 2.2rem;
	line-height: 200%;
	font-weight: 500;
}

#more .moreBox .txtBox p.notes {
	margin-top: 6px;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 150%;
	font-weight: 400;
}

#more .moreBox .txtBox p span {
	display: inline-block;
}

@media screen and (max-width: 800px) {
	
    #more {
        margin-top: 12vw;
        background-size: 120vw 12vw, 120vw 12vw;
        padding: 12.5vw 0;
    }

    #more h2 {
        max-width: 280px;
    }
	
	#more .moreBox {
        width: 100%;
        height: auto;
        padding-top: 0;
        padding-left: 0;
        margin-bottom: 32px;
    }

    #more .moreBox:last-of-type {
        margin-bottom: 48px;
    }

    #more .moreBox .imgBox {
        position: relative;
        width: 100%;
    }

    #more .moreBox:nth-of-type(2) .imgBox {
        right: inherit;
    }

    #more .moreBox .txtBox {
		width: 70%;
		max-width: 400px;
		min-width: 240px;
		margin: 24px auto 0;
    }

    #more .moreBox .txtBox p {
		margin-top: 2px;
        font-size: 20px;
        font-size: 2.0rem;
    }
	
    #more .moreBox .txtBox p.notes {
		margin-top: 6px;
        font-size: 12px;
        font-size: 1.2rem;
    }
	
}


/*11/26追記*/

#more .more_acc {
    border-radius: 24px;
    background-color: #ffffff;
    margin-bottom: 12px;
}

#more .more_acc .more_t {
	border-radius: 24px;
    background-color: #ffffff;
	padding: 26px 100px 26px 92px;
	position: relative;
	cursor: pointer;
}

#more .more_acc .more_t .plusBox {
	position: absolute;
	top: 0;
    right: 36px;
    bottom: 0;
    margin: auto;
}

#more .more_acc .more_t .plusBox .tate,
#more .more_acc .more_t .plusBox .yoko {
	background-color: #c60079;
}


#more .more_acc .more_inner {
	display: none;
	border-bottom-right-radius: 24px;
	border-bottom-left-radius: 24px;
	background-color: #fbf0f6;
	padding: 26px 26px 26px;
}

#more .more_acc .more_inner .notes {
	margin-top: 4px;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 150%;
}

#more .more_acc .more_inner .next {
	margin-top: 10px;
}

#more .more_acc .more_inner a {
	color: #c60079;
	text-decoration: underline;
}

#more .more_acc .more_inner a:hover {
	text-decoration: none;
}

.more_inner h4{
	    margin: 16px auto 0;
	color: #c60079;
    font-size: 1.5em;
}

.more_inner h4 span.yellowline{
	    background: linear-gradient(transparent 70%, #faed3e 0%);
    display: inline;
    padding: 15px 2px 4px;
}

.more_inner .udhd {
    margin: 24px auto;
}

.column2 .column-box.fl-l {
    margin-right: 30px;
}

#shop_genkin, #shop_yumeka {
    position: relative;
    padding-left: 120px;
    min-height: 120px;
}

.font-xxlarge {
    font-size: 22px;
    line-height: 1.416;
}

.color-primary {
    color: #c70079;
}
.column2 .column-box {
    width: 475px;
    margin-bottom: 18px;
	    margin-top: 18px;
}

.column2 {
    display: flex;
	background: #fff;
}

.columnwrap{
	background: #fff;
	padding: 18px 0;
}

.columnwrap > *{
	width: 90%;
	margin: auto;
}

#shop_genkin:before, #shop_yumeka:before{
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    speak: none;
    overflow: hidden;
}


#shop_genkin::before {
    background: url(../../img/202111renew/shop_genkin_ico.png) no-repeat 0 0;
}

#shop_yumeka::before {
    background: url(../../img/202111renew/shop_yumeka_ico.png) no-repeat 0 0;
}

.line-bold {
    border-bottom: solid 4px #eee;
}

#more02 .imgBox{
	width: 240px;
}

.more03image {
	display: flex;
	margin-top: 20px;
}

.more03image img {
    width: 260px;
    margin-right: 18px;
}

a.button-medium-inline-gray{
	margin: 0.25em 0;
	    position: relative;
    box-sizing: border-box;
    display: block;
    text-align: center;
    color: #333!important;
	text-decoration: none!important;
    border-style: solid;
    border-width: 1px 1px 4px;
    border-color: #dedede;
    border-radius: 5px;
    background-color: #f2f2f2;
	padding-top: 0.145em;
    padding-bottom: 0.125em;
    padding-left: 40px;
    padding-right: 30px;
    font-size: 16px;
    line-height: 1.625;
}

a.button-medium-inline-gray::before{
	width: 30px;
    font-size: 13px;
	display: block;
    position: absolute;
    top: 0;
    left: 10px;
    bottom: 0;
    height: 12px;
    line-height: 1;
    text-align: center;
    margin: auto 0;
	font-weight: bold;
    content: ">";
    color: #f5a300;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    speak: none;
}


@media screen and (max-width: 800px){
	
	#more .more_acc {
    border-radius: 20px;
}
	
	#more .more_acc .more_t {
    border-radius: 20px;
        padding: 18px 54px 18px 15px;
    background-position: 20px 20px;
    background-size: 24px 24px;
}
	#more .more_acc .more_t .plusBox {
    position: absolute;
    right: 20px;
}
	
	
	.more_inner .udhd {
    margin: 20px auto 0;
}
	
	#more02 .imgBox{
	width: 100%;
}
	#shop_genkin:before, #shop_yumeka:before{
    display: inline-block;
    content: '';
    position: inherit;
    vertical-align: middle;
    margin-right: 0;
    width: 40px;
    height: 40px;
    background-size: contain;
}
	#shop_genkin, #shop_yumeka{
    position: inherit;
    padding-left: 0;
    min-height: inherit;
}
	
	#shop_genkin h3, #shop_yumeka h3{
    display: inline;
    vertical-align: middle;
}
	.column2 {
    flex-wrap: wrap;
}
	.column2 .column-box {
    margin-top: 0;
}
	.more03image {
    flex-wrap: wrap;
}
	.more03image img:nth-child(2) {
    margin-right: 0;
}
	
	.more03image img {
    width: calc((100% - 18px) / 2);
}
	
	

}


/*ここまで11/26追記*/

/*ますますおトクに便利に 動画
-----------------------------------------------------------*/

#moreMovie {
	background-color: #f7e3ee;
	background-image: url("/sites/default/files/page/lp/youmeappli_new/img/bg_bottom_white.png");
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 100% 10vw;
	padding-bottom: 10vw;
	position: relative;
	z-index: 20;
}

#moreMovie .yt {
	padding-bottom: 80px;
}

@media screen and (max-width: 800px) {
	
   #moreMovie {
        background-size: 120vw 12vw;
        padding-bottom: 12vw;
    }
	
    #moreMovie .yt {
        padding-bottom: 40px;
    }

}


/*アプリ新規会員登録
-----------------------------------------------------------*/

#app h2 {
	max-width: 560px;
	margin: 0 auto;
}

#app .easy {
	margin-top: 48px;
	text-align: center;
	font-size: 22px;
	font-size: 2.2rem;
	font-weight: 500;
}

#app #appBox {
	margin: 24px auto 0;
	width: 100%;
	max-width: 1040px;
}

#app #appBox .step {
	position: relative;
	width: 100%;
	background-color: #fff697;
	border-radius: 24px;
	min-height: 288px;
	padding: 48px 0 36px 216px;
	margin-bottom: 12px;
}

#app #appBox .step .num {
	position: absolute;
	top: 44px;
	left: 64px;
	width: 112px;	
}

#app #appBox .step .imgBox {
	position: absolute;
	top: 36px;
	right: 64px;
	width: 240px;
}

#app #appBox .step .txtBox {
	width: 480px;
}

#app #appBox .step .txtBox h3 {
	font-size: 22px;
	font-size: 2.2rem;
	font-weight: 500;
	line-height: 150%;
	margin-bottom: 8px;
	color: #c60079;
}

#app #appBox .step .txtBox p {
	margin-bottom: 6px;	
}

#app #appBox .step .txtBox p.notes {
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 150%;
}

#app #appBox .step .appBox {
	margin-top: 12px;
	font-size: 0;
}

#app #appBox .step .appBox .appBtn {
	display: inline-block;
	height: 60px;
	margin-right: 8px;
}

#app #appBox .step .appBox .appBtn img {
	height: 100%;
	width: auto;
}

#app #appBox .step .cardBox {
	margin-top: 12px;
	width: 399px;
}
	
#app .commonBtn {
	margin-top: 36px;
}

#app .yt {
	margin-top: 60px;
}

#app .yt p {
	margin-top: 12px;
	text-align: center;
}

#app .yt .ytBox:last-of-type {
	margin-top: 48px;
}


@media screen and (max-width: 800px) {
		
    #app h2 {
        width: 77.78%;
		max-width: 350px;
		min-width: 280px;
    }

    #app .easy {
        margin-top: 24px;
        font-size: 20px;
        font-size: 2.0rem;
    }

    #app #appBox {
		width: 100%;
		max-width: 100vw;
        margin: 16px 0 8px;
		overflow-y: hidden;
		overflow-x: scroll;
    }
	
	#app #appBox::-webkit-scrollbar {
      display: none;
    }
	
	#app #appBox #appBoxInner {
		width: 350%;
		max-width: -webkit-calc(1236px + 10vw);
		max-width: calc(1236px + 10vw);
		padding: 0 5vw;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: space-between;
        justify-content: space-between;
	}

    #app #appBox .step {
        position: relative;
		width: 24.25%;
        max-width: 300px;
        border-radius: 20px;
        padding: 20px 24px 24px;
        margin-bottom: 0;
    }

    #app #appBox .step .num {
        position: relative;
        top: 0;
        left: 0;
        width: 84px;
		margin: 0 auto;
    }

    #app #appBox .step .imgBox {
        position: relative;
        top: 0;
        left: 0;
		margin: 8px auto 0;
		width: 100%;
		max-width: 240px;
    }

    #app #appBox .step .txtBox {
        width: 100%;
		margin-top: 16px;
    }

    #app #appBox .step .txtBox h3 {
        font-size: 20px;
        font-size: 2.0rem;
        margin-bottom: 6px;
		text-align: center;
    }
	
	#app #appBox .step .txtBox h3 span {
		display: inline-block;
	}

    #app #appBox .step .txtBox p {
        margin-bottom: 6px;	
    }

    #app #appBox .step .txtBox p.notes {
        font-size: 12px;
        font-size: 1.2rem;
    }

    #app #appBox .step .cardBox {
        margin-top: 12px;
        width: 100%;
    }
	
	#app .appBox {
		margin: 24px auto 0;
		width: 140px;
    }

    #app .appBox .appBtn {
        display: block;
		margin-bottom: 6px;
    }
	
	#app .commonBtn {
		margin: 12px auto;
		width: 140px;
	}
	
	#app .commonBtn a {
		width: 140px;
	}
	
    #app .yt {
        margin-top: 48px;
    }

    #app .yt p {
        margin-top: 6px;
    }
	
    #app .yt .ytBox:last-of-type {
        margin-top: 20px;
    }
	
}	

/*11/26追記*/

#app{
	margin-bottom: 100px;
}


/*携帯電話番号のご登録が必要です
-----------------------------------------------------------*/

#entry {
	margin-top: 100px;
	background-color: #c60079;
	background-image: url("/sites/default/files/page/lp/youmeappli_new/img/bg_bottom_pw.png"),url("/sites/default/files/page/lp/youmeappli_new/img/bg_bottom_white.png");
	background-position: center top, center bottom;
	background-repeat: no-repeat, no-repeat;
	background-size: 100% 10vw, 100% 10vw;
	padding: 10vw 0;
}

#entry h2 {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	position: relative;
	z-index: 21;
}

#entry .txtBox {
	position: relative;
	margin-top: -24px;
	width: 100%;
	border-radius: 24px;
	background-color: #fff697;
	padding-top: 68px;
	padding-bottom: 56px;
	padding-right: 6.73%;
	padding-left: -webkit-calc(200px + 6.73%);
	padding-left: calc(200px + 6.73%);
	z-index: 20;
}

#entry .txtBox .iconBox {
	position: absolute;
	top: 48px;
	left: 6.73%;
	width: 160px;
}

#entry .txtBox .iconBox .icon {
	width: 120px;
	margin: 0 auto;
}

#entry .txtBox .iconBox h3 {
	margin-top: 16px;
	text-align: center;
	font-size: 22px;
	font-size: 2.2rem;
	line-height: 150%;
	font-weight: 500;
	color: #c60079;	
}

#entry .txtBox .explain {
	position: relative;
}

#entry .txtBox .explain p:first-of-type {
	margin-bottom: 12px;
	font-size: 18px;
	font-size: 1.8rem;
}

@media screen and (max-width: 800px) {
	
    #entry {
        margin-top: 12vw;
        background-size: 120vw 12vw, 120vw 12vw;
        padding: 12.5vw 0;
    }

    #entry h2 {
        max-width: 360px;
    }
	
    #entry .txtBox {
        margin-top: 45px;
        border-radius: 20px;
        padding: 0 6% 5vw;
    }

    #entry .txtBox .iconBox {
        width: 100%;
		position: relative;
		top: -45px;
		left: 0;
    }

    #entry .txtBox .iconBox .icon {
        width: 90px;
    }

    #entry .txtBox .iconBox h3 {
        font-size: 20px;
        font-size: 2.0rem;
    }

    #entry .txtBox .explain {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
		margin-top: -29px;
    }

    #entry .txtBox .explain p:first-of-type {
        margin-bottom: 8px;
        font-size: 16px;
        font-size: 1.6rem;
    }
	
}

#howto {
	margin-top: 32px;
	padding-bottom: 80px;
}

#howto .howtoBox {
	border-radius: 24px;
	background-color: #fff;
}

#howto .howtoBox:first-of-type {
	margin-bottom: 16px;
}

#howto .howtoBox .heading {
	height: 160px;
	background-color: #fff;
	position: relative;
	border-radius: 24px;
	cursor: pointer;
}

#howto .howtoBox .heading .card {
	position: absolute;
	top: 24px;
	left: 52px;
	width: 168px;
}

#howto .howtoBox .heading h4 {
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: 500;
	text-align: center;
	color: #c60079;
	position: absolute;
	top: 64px;
	left: 0;
	width: 100%;
}

#howto .howtoBox .heading .plusBox {
	position: absolute;
	top: 68px;
	right: 36px;
}

#howto .howtoBox .heading .plusBox .tate,
#howto .howtoBox .heading .plusBox .yoko {
	background-color: #c60079;
}

#howto .howtoBox .detail {
	display: none;
	padding: 24px 20px 36px;
	background-color: #fff697;
	border-bottom-right-radius: 24px;
	border-bottom-left-radius: 24px;
}

#howto .howtoBox .detail .select {
	font-size: 20px;
	font-size: 2.0rem;
	line-height: 150%;
	text-align: center;
}

#howto .howtoBox .detail .wayBox {
	margin-top: 74px;
	position: relative;
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
}

#howto .howtoBox .detail .wayBox .way {
	margin: 0 19px;
	width: 28%;
	background-color: #fff;
	border-radius: 24px;
	padding: 0 20px 20px;
	position: relative;
}

#howto .howtoBox .detail .wayBox .way .icon {
	margin: -50px auto 0;
	width: 100px;
}

#howto .howtoBox .detail .wayBox .way h3 {
	margin: 12px;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 150%;
	font-weight: 500;
	text-align: center;
	color: #c60079;
}

#howto .howtoBox .detail .wayBox .way a {
	color: #c60079;
	text-decoration: underline;
}

#howto .howtoBox .detail .wayBox .way a:hover {
	text-decoration: none;
}

#howto .howtoBox .detail .wayBox .way .notes {
	margin-top: 4px;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 150%;
}

#howto .howtoBox .detail .wayBox .way .or {
	position: absolute;
	top: -36px;
	right: -44px;
	width: 48px;
}

@media screen and (max-width: 1000px) {
	
	#howto .howtoBox .detail .wayBox .way {
        margin: 0 12px;
        width: 28%;
        padding: 0 16px 20px;
    }
	
}

@media screen and (max-width: 800px) {
	
	#howto {
        margin-top: 24px;
		padding-bottom: 48px;
    }

    #howto .howtoBox {
        border-radius: 20px;
    }

    #howto .howtoBox:first-of-type {
        margin-bottom: 12px;
    }

    #howto .howtoBox .heading {
        height: auto;
        border-radius: 20px;
		padding: 20px 0;
    }

    #howto .howtoBox .heading .card {
        position: relative;
        top: 0;
        left: 0;
        width: 120px;
		margin: 0 auto;
    }

    #howto .howtoBox .heading h4 {
        font-size: 18px;
        font-size: 1.8rem;
        position: relative;
        top: 0;
		margin-top: 16px;
    }
    #howto .howtoBox .heading .plusBox {
        top: inherit;
		bottom: 22px;
        right: 5%;
    }
	
    #howto .howtoBox .detail {
        padding: 20px 6% 32px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    #howto .howtoBox .detail .select {
        font-size: 16px;
        font-size: 1.6rem;
    }

    #howto .howtoBox .detail .wayBox {
        margin-top: 64px;
        display: block;
    }

    #howto .howtoBox .detail .wayBox .way {
        margin: 48px 0 0;
        width: 100%;
        border-radius: 20px;
        padding: 0 5% 20px;
    }

    #howto .howtoBox .detail .wayBox .way .icon {
        margin: 0 auto;
        width: 80px;
		position: relative;
		top: -40px;
    }

    #howto .howtoBox .detail .wayBox .way h3 {
		margin: -32px 0 8px;
        font-size: 16px;
        font-size: 1.6rem;
    }

    #howto .howtoBox .detail .wayBox .way .notes {
        margin-top: 3px;
        font-size: 12px;
        font-size: 1.2rem;
    }

    #howto .howtoBox .detail .wayBox .way .or {
        display: none;
    }
	
	#howto .howtoBox .detail .wayBox .orSp {
		margin: 24px auto;
		width: 36px;
		position: relative;
		top: -6px;
	}
	
}

/*よくあるご質問
-----------------------------------------------------------*/

#faq {
	padding-bottom: 80px;
}

#faq h3 {
	font-size: 32px;
	font-size: 3.2rem;
	line-height: 150%;
	font-weight: 500;
	text-align: center;
	color: #555;
}

#faq h4 {
	margin: 12px auto 36px;
	width: 60px;
}

#faq .qa {
	border-radius: 24px;
	background-color: #b40067;
	margin-bottom: 12px;
}

#faq .qa .q {
	border-radius: 24px;
	background-color: #b40067;
	color: #fff;
	padding: 26px 100px 26px 92px;
	background-image: url("/sites/default/files/page/lp/youmeappli_new/img/faq_q.png");
	background-position: 36px 28px;
	background-repeat: no-repeat;
	background-size: 28px 28px;
	position: relative;
	cursor: pointer;
}

#faq .qa .q .plusBox {
	position: absolute;
	top: 30px;
	right: 36px;
}

#faq .qa .q .plusBox .tate,
#faq .qa .q .plusBox .yoko {
	background-color: #fff;
}

#faq .qa .a {
	display: none;
	border-bottom-right-radius: 24px;
	border-bottom-left-radius: 24px;
	background-color: #fbf0f6;
	padding: 26px 48px 26px 92px;
	background-image: url("/sites/default/files/page/lp/youmeappli_new/img/faq_a.png");
	background-position: 36px 28px;
	background-repeat: no-repeat;
	background-size: 28px 28px;
}

#faq .qa .a .notes {
	margin-top: 4px;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 150%;
}

#faq .qa .a .next {
	margin-top: 10px;
}

#faq .qa .a a {
	color: #c60079;
	text-decoration: underline;
}

#faq .qa .a a:hover {
	text-decoration: none;
}

#faq a.others {
	margin: 48px auto 0;
	display: block;
	width: 320px;
	border-radius: 24px;
	background-color: #b40067;
	color: #fff;
	padding: 26px 0;
	text-decoration: none;
	text-align: center;
	display: none;
}

@media screen and (max-width: 800px) {
	
	#faq {
        padding-bottom: 64px;
    }

	#faq h3 {
        font-size: 28px;
        font-size: 2.8rem;
    }

    #faq h4 {
        margin: 10px auto 36px;
        width: 50px;
    }
	
    #faq .qa {
        border-radius: 20px;
    }

    #faq .qa .q {
        border-radius: 20px;
        padding: 18px 54px;
        background-position: 20px 20px;
        background-size: 24px 24px;
    }

    #faq .qa .q .plusBox {
        position: absolute;
        top: 22px;
        right: 20px;
    }

    #faq .qa .a {
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        padding: 18px 20px 18px 54px;
        background-position: 20px 20px;
        background-size: 24px 24px;
    }

    #faq .qa .a .notes {
        margin-top: 3px;
        font-size: 12px;
        font-size: 1.2rem;
    }

    #faq .qa .a .next {
        margin-top: 8px;
    }
	
    #faq a.others {
        margin: 36px auto 0;
        width: 100%;
		max-width: 360px;
        border-radius: 20px;
        padding: 18px 0;
    }
	
}


/*モーダル
-----------------------------------------------------------*/

#modalBg {
	display: none;
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 110vh;
	background-color: rgba(0,0,0,0.75);
	z-index: 99;
}

#modalBg #close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 48px;
	height: 48px;
	cursor: pointer;
}

#modalBg #close div {
	position: absolute;
	top: 22px;
	left: 12px;
	width: 24px;
	height: 4px;
	background-color: #fff;
}

#modalBg #close div:first-child { transform: rotate(45deg); }
#modalBg #close div:last-child { transform: rotate(135deg); }

#modal {
	display: none;
	position: relative;
	margin: 0 auto;
	padding: 48px 0;
	width: 720px;
	z-index: 100;
}

#modal #modalBox {
	width: 100%;
	padding-bottom: 12px;
	background-color: #fff;
	border-radius: 24px;
}

#modal #modalBox h3 {
	text-align: center;
	font-size: 20px;
	font-size: 2.0rem;
	line-height: 150%;
	font-weight: 500;
	color: #fff;
	background-color: #c60079;
	padding: 18px 0 16px;
	border-top-left-radius: 24px;
	border-top-right-radius: 24px;
}

#modal #modalBox #storeBox {
	padding: 30px 30px 0;
}

#modal #modalBox #storeBox .noets {
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 150%;
	padding: 0 20px;
}

#modal #modalBox #storeBox .noets span {
	display: inline-block;
}

#modal #modalBox #storeBox #stores {
	margin-top: 24px;
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: left;
    justify-content: left;
}

#modal #modalBox #storeBox #stores .store {
	margin: 0 20px 40px;
	width: 25%;
}

#modal #modalBox #storeBox #stores .store h4 {
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 150%;
	font-weight: 500;
	color: #c60079;
}

#modal #modalBox #storeBox #stores .store p {
	margin-top: 12px;
}

@media screen and (max-width: 800px) {

    #modalBg #close {
        top: 8px;
        right: 8px;
        width: 40px;
        height: 40px;
    }

    #modalBg #close div {
        top: 18px;
        left: 10px;
        width: 20px;
    }

    #modal {
        padding: 52px 0 40px;
        width: 90%;
    }

    #modal #modalBox {
        padding-bottom: 4px;
        border-radius: 20px;
    }

    #modal #modalBox h3 {
        text-align: center;
        font-size: 18px;
        font-size: 1.8rem;
        padding: 16px 0 14px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    #modal #modalBox #storeBox {
        padding: 24px 10% 0;
    }

    #modal #modalBox #storeBox .noets {
        font-size: 12px;
        font-size: 1.2rem;
        padding: 0;
    }

    #modal #modalBox #storeBox #stores {
        margin-top: 20px;
    }

    #modal #modalBox #storeBox #stores .store {
        margin: 0 24px 30px 0;
        width: 160px;
    }

    #modal #modalBox #storeBox #stores .store h4 {
        font-size: 17px;
        font-size: 1.7rem;
    }

    #modal #modalBox #storeBox #stores .store p {
        margin-top: 10px;
    }
	
	
}