@charset "UTF-8";

/*
Theme Name:アンケートLP
*/
/**********************************************
初期化
***********************************************/
*{box-sizing: border-box;}
html {font-size:16px;}
img,iframe,video{max-width: 100%; vertical-align: top;}
ul,ol{margin: 0; padding: 0; list-style: none;}
a{text-decoration: none;}

/**********************************************
LP用
***********************************************/
.lp{background-color: #BDEDFF; font-family: 'Noto Sans JP', sans-serif; font-size: 16px; text-align: center;}
.lp .inner{width: 100%; max-width: 500px; background-color: #fff; margin: 0 auto; position: relative;}
.lp .inner img{margin-right: auto; margin-left: auto;}
.lp .inner .fv-img{width: 100%; margin: 0 0 45px; text-align: center;}
.lp .inner .q-box{padding: 40px 0 0;}
.lp .inner .q-box.first-q{padding-top: 0;}
.lp .inner h2{font-size: 32px; color: var(--color_main); text-align: center; margin: 0;}
.lp .inner h2 img{margin-right: auto; margin-left: auto;}
.lp .inner h2 .num{display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background-color: var(--color_main); margin: 0 auto; padding: 0.25em 0 0.45em; border-radius: 50px; font-size: 0.7em; color: #fff; line-height: 1;}
.lp .inner .q-img{width: 100%; margin: 0px 0 0; text-align: center;}
.lp .inner .answer__block{padding: 20px 0 160px;}
.lp .inner .btns{display: flex; justify-content: space-between; flex-wrap:wrap; flex-direction: column; width: 90%; margin: 0 auto;}
.lp .inner a.btn{width: 100%; background-color: #E8451C; font-size: 1.2rem; font-weight: 700; line-height: 1.5; position: relative; display: inline-block; padding: 1rem; margin-bottom: 0.5em; cursor: pointer; user-select: none; transition: all 0.3s; text-align: center; vertical-align: middle; text-decoration: none; letter-spacing: 0.05em; color: #fff;  border-color: transparent; box-shadow: 0 3px 5px rgba(0, 0, 0, .3);}
.lp .inner a.btn:hover{opacity: 0.7;}

.lp .inner a.btn.custom{width: 100%; background-color: #2412e6; font-size: 1.2rem; font-weight: 700; line-height: 1.5; position: relative; display: inline-block; padding: 1rem; margin-bottom: 0.5em; cursor: pointer; user-select: none; transition: all 0.3s; text-align: center; vertical-align: middle; text-decoration: none; letter-spacing: 0.05em; color: #fff; border: 2px solid; border-color: transparent; box-shadow: 0 3px 5px rgba(0, 0, 0, .3);}



.lp .inner a.btn.selected{box-shadow: none;}
.lp .inner a.btn.not-selected{background-color: #7C7C7B; box-shadow: none;}

.lp .inner a.btn.loop-img,
.lp .inner a.btn.thanks-img{background-color: transparent; box-shadow: none;}
.lp .inner a.btn.thanks-img:hover{background-color: transparent !important; opacity: 0.7;}

.lp .inner .btns.check{flex-direction: column;}
.lp .inner a.btn.check{background-color: transparent; width: 100%; color: #333; border-bottom: 1px solid; border-color: #fff; padding-left: 2.5em; box-shadow: none; text-align: left; position: relative;}
.lp .inner a.btn.check:hover{background-color: transparent !important;}
.lp .inner a.btn.check:before{content: ""; width: 1em; height: 1em; border: 1px solid #333; position: absolute; top: 1em; left: 0.5em;}
.lp .inner a.btn.check.checked{position: relative;}
.lp .inner a.btn.check.checked:before{content: ""; width: 1em; height: 1em; background-color: #0085d2; border: none;}
.lp .inner a.btn.check.checked:after{content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 800; color: #fff; position: absolute; top: 0.7em; left: 0.5em;}

.lp .inner .btns.checks{display: block;}
.lp .inner .btns.checks ul{width: 100%;}
.lp .inner .btns.checks li{width: 48%; background-color: #E8451C; font-size: 1.2rem; font-weight: 700; line-height: 1.5; position: relative; display: inline-block; padding: 1rem; margin-bottom: 0.5em; cursor: pointer; user-select: none; transition: all 0.3s; text-align: center; vertical-align: middle; text-decoration: none; letter-spacing: 0.1em; color: #fff; border-radius: 0.5rem; box-shadow: 0 3px 5px rgba(0, 0, 0, .3);}
.lp .inner .btns.checks li:hover{opacity: 0.7;}
.lp .inner .btns.checks li.check-list{background-color: transparent; width: 100%; color: #333; padding-left: 2.5em; box-shadow: none; text-align: left; position: relative;}
.lp .inner .btns.checks li.check-list:before{content: ""; width: 1em; height: 1em; border: 1px solid #333; position: absolute; top: 1em; left: 0;}
.lp .inner .btns.checks li.check-list.checked{position: relative;}
.lp .inner .btns.checks li.check-list.checked:before{content: ""; width: 1em; height: 1em; background-color: #0085d2; border: none;}
.lp .inner .btns.checks li.check-list.checked:after{content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 800; color: #fff; position: absolute; top: 0.7em; left: 0.05em;}
.lp .inner .check-list__btn{margin: 2em 0; text-align: center;}

.lp .inner .ex-img{margin: 50px 0;}
.lp .inner .triangle{width: 100%; margin: 50px 0; text-align: center;}
.lp .inner .thanks{padding-bottom: 0px;}
.lp .thanks .q-img a{transition: 0.3s;}
.lp .thanks .q-img a:hover{opacity: 0.7;}
.lp .thanks__btn-block{padding: 2em 0;}
.lp .thanks__btn-block a.btn{width: 90%; margin-bottom: 0; font-size: 2.2em;}

.lp .fc__img{width: 100%; margin: 0; text-align: center;}
.lp .fc__btn-block{padding: 2em 0;}
.lp .fc__btn-block a.btn {width: 90%; margin-bottom: 0; font-size: 1.2em;}
.lp .fc__btn-block a.btn.custom{width: 90%; margin-bottom: 0; font-size: 1.2em;}
.lp .fc__btn-block a.btn.thanks-img{padding: 0;}
.lp .fc__btn-block.check{width: 90%; margin-right: auto; margin-left: auto; padding: 0;}
.lp .fc__btn-block a.btn.check{padding: 0 0 0 1.25em;}
.lp .fc__btn-block a.btn.check:before{top: 0.3em;}
.lp .fc__btn-block a.btn.check.checked:after{top: 0.1em;}
.lp .flexible-content:first-child .fc__img,
.lp .flexible-content:first-child .fc__btn-block{margin-top: 0; padding-top: 0;}
.lp .flexible-content:last-child .fc__img,
.lp .flexible-content:last-child .fc__btn-block{margin-bottom: 0; padding-bottom: 0;}

.lp .copy-btn{margin: 2em 0; text-align: center; cursor: pointer;}

/* .lp .return{position: absolute; bottom: 10px; left: 10px; color: #969696; cursor: pointer;} */
.lp .return{position: absolute; color: #dbdbdb; background-color: #7b7b7b; cursor: pointer; padding: 0px 40px; bottom: 80px; left: 40px;}
.lp .return p {margin: 10px 0;}
.lp .return:hover{opacity: 0.8;}

.lp .footer{width: 100%; padding: 50px 0; text-align: center;}
.lp .footer__logo{margin-bottom: 1em;}
.lp .footer__logo img{display: inline;}
.lp .footer__link a{color: #333;}
.lp .footer__logo img:hover,
.lp .footer__link a:hover{opacity: 0.8;}
.lp .copyright{font-size: 0.8em; padding: 20px 0; font-size: 0.8em; padding: 20px 0; margin: 0 auto; max-width: 500px;}
.lp .copyright p {margin: 0;}

.lp .float__btn{position: fixed; right: 30px; bottom: 30px;}

.lp .float-sns{width: calc((100% - 750px) / 2); position: fixed; top: 50%; right: 0; transform: translate(0, -50%); text-align: center;}
.float-sns__img img{display: inline; transition: 0.3s;}
.lp .float-sns ul{display: flex; justify-content: center; gap: 2%; margin-top: 20px;}
.lp .float-sns ul li{width: 23%; max-width: 54px; max-height: 54px; aspect-ratio: 1;}
.lp .float-sns ul li a{display: flex; justify-content: center; align-items: center; width: 100%;  height: 100%; background-color: var(--color_main); border-radius: 50%; font-size: 24px; color: #fff; transition: 0.3s;}
.float-sns__img img:hover{opacity: 0.7;}
.lp .float-sns ul li a:hover{background-color: #4549a6;}

.lp .float-footer{width: 100%; height: 106px; background-color: #000; display: flex; justify-content: center; align-items: center; padding: 5px 5%; position: fixed; bottom: 0; left: 0;}
.lp .float-footer ul{display: flex; justify-content: center; align-items: center; gap: 2%;}

.post-password-form{width: 90%; max-width: 900px; height: 100vh; margin: 0 auto; display: flex; justify-content: center; align-items: center; flex-direction: column;}



@media screen and (max-width: 1023px) {
	.lp .float-sns{display: none;}
}
@media screen and (max-width: 650px) {
	
 	/* .lp .inner h2{padding-right: 2%; padding-left: 2%;} */
	.lp .inner a.btn{font-size: 14px; padding: 0.75em 0.5em;}
	.lp .inner a.btn.custom{font-size: 15px; padding: 1.2em 0.5em;}
	.lp .inner .btns.checks .att{font-size: 0.8em;}
	.lp .inner .btns.checks li.check-list{font-size: 14px; padding: 0.75em 1.5em;}
}

@media screen and (max-width: 480px) {
	.lp .inner h2{font-size: 24px;}
	.lp .inner h2 .num{width: 2.8em; height: 2.8em; padding: 1em;}
	.lp .inner .q-box{padding: 30px 0 0}
	.lp .inner .q-box.first-q{padding-top: 0;}
	.lp .inner .q-img{margin: 10px 0 0;}
	.lp .inner .answer__block{padding: 20px 0 100px;}
	.lp .inner .triangle{margin: 25px auto;}
	.lp .inner .ex-img{margin: 25px 0;}
	.lp .inner a.btn.custom .lp .inner .thanks a.btn{font-size: 1.4em;}
	.lp .inner .thanks{padding-bottom: 50px;}
	.lp .return{font-size: 14px; padding: 0px 10px; bottom: 20px; left: 20px;}
	.lp .return p {margin: 8px 0;}
    .lp .footer{padding: 25px 0;}
	.lp .float-footer{height: 86px;}
	
/**********************************************
LP用 修正用の追加コード
***********************************************/
	.lp .fc__btn-block {padding: 1em 0;}
/**********************************************
LP用 修正用の追加コード ここまで
***********************************************/
}