@charset "utf-8";
/* CSS Document */

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

#entry {
	margin-top: 100px;
	background-color: #c60079;
	background-image: url("/sites/default/files/page/lp/youmeappli_new/img/bg_bottom_pw.png");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 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;
	}
	
}

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

#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;
	width: 100%;
}

#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 {
		margin-top: 72px;
        padding: 0 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;
		margin-top: 0;
		margin-bottom: 0;
    }

    #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;
    }
	
	
}