@charset 'UTF-8';

:root{
	--color: #000;
	/*イージング*/
	--easeInOutSine: cubic-bezier(.445, .050, .550, .950);
	--vh: 1vh;
}

/* ==========================================================================
   共通設定
========================================================================== */

.l-container{
	margin: 0;
}

footer .js-footer_btn_top{
	margin-top: 0;
}

.hakaseLp{
	font-family: '游ゴシック','游ゴシック体', 'YuGothic M', YuGothic,'Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif;
	font-weight: 500;
	overflow: hidden;
	color: #333;
}

.hakaseLp img{
	vertical-align: bottom;

	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
}

.hakaseLp a:hover{
	opacity: .8;
}

.hakaseLp .subTitle{
	position: relative;
	display: flex;
	height: 159px;
	margin-bottom: 60px;
	background: #ffed6f;

	align-items: center;
	justify-content: center;
}

.hakaseLp .subTitle::after{
	position: absolute;
	bottom: -70px;
	left: 50%;
	content: '';
	transform: translateX(-50%);
	border: 40px solid transparent;
	border-top: 30px solid #ffed6f;
}

.hakaseLp .secTop{
	text-align: center;
}

.hakaseLp .secTop p{
	line-height: 1.5;
	margin-top: 35px;
	letter-spacing: .05em;
}

.hakaseLp .numList{
	font-size: 18px;
	font-weight: bold;
	line-height: 1.6;
	margin-top: -1px;
	padding: 18px 29px;
	border: 1px solid #333;
	background: #fff;
	box-shadow: 2px 2px 0 #c8c5c4;
}

.hakaseLp .numList li{
	display: flex;
	text-align: left;

	align-items: center;
}

.hakaseLp .numList li::before{
	height: 37px;
	margin-right: 12px;

	flex: 0 0 37px;
}

.hakaseLp .numList li:nth-child(1)::before{
	content: url('../img/num1.png');
}

.hakaseLp .numList li:nth-child(2)::before{
	content: url('../img/num2.png');
}

.hakaseLp .numList li:nth-child(3)::before{
	content: url('../img/num3.png');
}

.hakaseLp .numList li+li{
	margin-top: 10px;
}

@media all and (-ms-high-contrast:none){
	*::-ms-backdrop,.hakaseLp{
		font-family: 'Noto Sans Japanese','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif;
		font-weight: normal;
	}
}

/* ==========================================================================
   MV
========================================================================== */

.hakaseLp .topNotice{
	font-size: 14px;
	line-height: 1.71;
	padding: 13px 0;
	text-align: center;
}

.hakaseLp .topNotice .red{
	color: #fb2636;
}

.hakaseLp .topNotice a{
	text-decoration: underline;
	color: #f09198;
}

.hakaseLp .mainImg{
	position: relative;
	background: url('../img/mv_back.jpg') no-repeat center bottom;
	background-size: 100% auto;
}

.hakaseLp .mainImg::before{
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 136px;
	content: '';
	background: #ffed6f;
}

.hakaseLp .mainImg::after{
	position: absolute;
	z-index: 1;
	top: 136px;
	left: 0;
	display: block;
	content: '';
	border-top: 36px solid #ffed6f;
	border-right: 50vw solid transparent;
	border-bottom: 36px solid transparent;
	border-left: 50vw solid #ffed6f;
}

.hakaseLp .mainImg .mvInner{
	position: relative;
	z-index: 2;
	width: 1060px;
	height: 495px;
	margin: 0 auto;
	padding-top: 24px;
}

.hakaseLp .mainImg .mvInner h2{
	line-height: 1;
}

.hakaseLp .mainImg .mvInner>p{
	line-height: 1;
	margin: 27px 0 0 30px;
}

.hakaseLp .mainImg .textBox{
	margin: 10px 0 0 30px;
	padding: 20px;
	background: #fff;
}

.hakaseLp .mainImg .textBox p{
	font-size: 16px;
	line-height: 1.75;
	max-width: 676px;
}

.hakaseLp .mainImg .spimg{
	position: absolute;
	z-index: 3;
	right: -153px;
	bottom: 0;
}

/* ==========================================================================
   about
========================================================================== */

.hakaseLp .about{
	padding: 40px 0;
	text-align: center;
	background: #fffbe2;
}

.hakaseLp .about h2{
	line-height: 1;
	margin-bottom: 15px;
}

.hakaseLp .about p{
	font-size: 20px;
	line-height: 1.75;
}

/* ==========================================================================
   3つの検索方法で候補名を見つけやすい
========================================================================== */

.hakaseLp .search3way .secInner{
	display: flex;
	width: 1200px;
	height: 710px;
	margin: 45px auto 0;

	align-content: flex-start;
	flex-flow: column wrap;
	justify-content: center;
}

.hakaseLp .search3way .secBox{
	display: flex;
	width: 361px;

	flex-flow: row wrap;
}

.hakaseLp .search3way .secBox>h2{
	line-height: 1;
	margin-bottom: 15px;

	flex: 0 0 100%;
}

.hakaseLp .search3way .secBox .answer{
	margin-right: 35px;

	flex: 0 1 185px;
}

.hakaseLp .search3way .secBox .answer h2{
	font-size: 18px;
	font-weight: bold;
	line-height: 1.5;
	margin-bottom: 10px;
	color: #f09198;
}

.hakaseLp .search3way .secBox .answer p{
	line-height: 1.5;
}

.hakaseLp .search3way .secBox .img{
	flex: 0 1 113px;
}

.hakaseLp .search3way .secBox1{
	margin-bottom: 35px;
}

.hakaseLp .search3way .secBox3{
	position: relative;
	margin-left: 35px;
}

.hakaseLp .search3way .secBox3::before{
	position: absolute;
	top: 50%;
	right: -57px;
	content: url('../img/arrow.png');
	transform: translateY(-50%);
}

.hakaseLp .search3way .result{
	width: 361px;
	margin-left: 81px;
}

.hakaseLp .search3way .result p{
	text-align: center;
}

/* ==========================================================================
   候補名の鑑定で姓に合う良運の名前がわかる
========================================================================== */

.hakaseLp .ryouun{
	margin-top: 100px;
}

.hakaseLp .ryouun .result{
	width: 428px;
	margin: 50px auto 0;
	text-align: center;
}

/* ==========================================================================
   100件まで候補名を登録でき、じっくり名前を検討できる
========================================================================== */

.hakaseLp .hyaku{
	margin-top: 100px;
}

.hakaseLp .hyaku .result{
	width: 428px;
	margin: 50px auto 0;
	text-align: center;
}

.hakaseLp .hyaku .numList{
	padding-right: 20px;
}

/* ==========================================================================
   faq
========================================================================== */

.hakaseLp .faq{
	margin-top: 100px;
}

.hakaseLp .faq>h2{
	line-height: 1;
	margin-bottom: 30px;
	text-align: center;
}

.hakaseLp .faq .faqBox{
	width: 750px;
	margin: 0 auto;
}

.hakaseLp .faq .faqBox header{
	font-size: 18px;
	font-weight: bold;
	display: flex;
	height: 56px;
	padding: 0 20px 0 23px;
	cursor: pointer;
	background: #ffed6f;

	align-items: center;
}

.hakaseLp .faq .faqBox header h2{
	flex: 1 1 auto;
}

.hakaseLp .faq .faqBox header::before{
	height: 35px;
	margin-right: 25px;
	content: url('../img/q.png');

	flex: 0 0 21px;
}

.hakaseLp .faq .faqBox header::after{
	height: 30px;
	margin-left: 25px;
	content: '';
	background-image: url('../img/faq_mark.png');
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% auto;

	flex: 0 0 30px;
}

.hakaseLp .faq .faqBox .open::after{
	background-position: center top;
}

.hakaseLp .faq .faqBox .hide{
	display: none;
}

.hakaseLp .faq .faqBox p{
	line-height: 1.5;
	display: flex;
	width: 680px;
	margin-top: 18px;
	padding-left: 23px;

	align-items: center;
}

.hakaseLp .faq .faqBox p::before{
	height: 31px;
	margin-right: 23px;
	content: url('../img/a.png');

	flex: 0 0 27px;
}

.hakaseLp .faq .faqBox p a{
	text-decoration: underline;
	color: #f09198;
}

.hakaseLp .faq .faqBox+.faqBox{
	margin-top: 25px;
}

/* ==========================================================================
   お問い合わせ
========================================================================== */

.hakaseLp .contact{
	margin-top: 100px;
	padding-bottom: 80px;
	background: #fdf2f2;
}

.hakaseLp .contact>h2{
	display: flex;
	height: 105px;
	margin-bottom: 40px;
	background: #f09198;

	align-items: center;
	justify-content: center;
}

.hakaseLp .contact .hotline header{
	margin-bottom: 30px;
	text-align: center;
}

.hakaseLp .contact .hotline header h2{
	line-height: 1;
	margin-bottom: 13px;
}

.hakaseLp .contact .hotline .tel{
	text-align: center;
}

.hakaseLp .contact .hotline .tel .number{
	margin-bottom: 28px;
}

.hakaseLp .contact .hotline .tel .kome{
	font-size: 14px;
}


		
.hakaseLp .contact .tejyun{
}
.hakaseLp .contact .tejyun .tejyun_box{
	padding-bottom:30px;
	text-align: center;
	font-size: 18px;
    font-weight: bold;
    line-height: 1.6;
}
.hakaseLp .contact .tejyun .tejyun_box .wrap{
	display:inline-block;
	text-align:left;
	background:#FFFBE1;
	padding: 30px;
}

.hakaseLp .contact .tejyun .tejyun_box .left,.hakaseLp .contact .tejyun .tejyun_box .right{
	display:inline-block;
	vertical-align:middle;
}
.hakaseLp .contact .tejyun .tejyun_box .left{
}
.hakaseLp .contact .tejyun .tejyun_box .right{
	box-sizing:border-box;
	padding-left:0.5em;
}
.hakaseLp .contact .tejyun .tejyun_box .right span{
	display: inline-block;
	width: 2.5em;
	position: relative;
	height: 1em;
}
.hakaseLp .contact .tejyun .tejyun_box .right span img{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	max-width:140px;
}
.hakaseLp .contact .tejyun .tejyun_box .yajirushi{
	width:0;
	height:0;
	border-left: 1em solid transparent;
	border-right: 1em solid transparent;
	border-top: 1em solid #F09198;
	margin:1.5em auto;
}


.hakaseLp .contact .kiyaku{
	width: 750px;
	margin: 40px auto;
	background: #fff;
}

.hakaseLp .contact .kiyaku>header{
	font-size: 18px;
	font-weight: bold;
	display: flex;
	height: 54px;
	padding: 0 20px;
	cursor: pointer;
	color: #fff;
	background: #f09198;

	align-items: center;
}

.hakaseLp .contact .kiyaku>header h2{
	text-align: center;

	flex: 1 1 auto;
}

.hakaseLp .contact .kiyaku>header::before{
	content: '';

	flex: 0 0 30px;
}

.hakaseLp .contact .kiyaku>header::after{
	height: 30px;
	content: '';
	background-image: url('../img/kiyaku_mark.png');
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% auto;

	flex: 0 0 30px;
}

.hakaseLp .contact .kiyaku .open::after{
	background-position: center top;
}

.hakaseLp .contact .topText{
	margin: 40px 0 30px;
	text-align: center;
}

.hakaseLp .contact .hideBox{
	display: none;
}

.hakaseLp .contact .kiyakuBox{
	width: 690px;
	margin: 0 auto;
	padding-bottom: 30px;
}

.hakaseLp .contact .kiyakuBox h2{
	font-weight: bold;
	display: flex;
	height: 45px;
	margin-bottom: 18px;
	background: #fce8e9;

	align-items: center;
	justify-content: center;
}

.hakaseLp .contact .kiyakuBox p,.hakaseLp .contact .kiyakuBox li{
	line-height: 1.75;
}

.hakaseLp .contact .kiyakuBox small{
	font-size: 14px;
	display: block;
}

.hakaseLp .contact .kiyakuBox h3{
	font-weight: bold;
}

.hakaseLp .contact .kiyakuBox address{
	font-style: normal;
}

.hakaseLp .contact .kiyakuBox .komeList li{
	margin-left: 1em;
	text-indent: -1em;
}

.hakaseLp .contact .ouboBtn{
	display: block;
	width: 400px;
	margin: 0 auto;
}

/* ==========================================================================
   固定ボタン
========================================================================== */

.hakaseLp .fixMenu{
	position: fixed;
	z-index: 2;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 25px 0;
	transition: opacity .6s ease;
	opacity: 1;
	background: rgba(240,145,152,.2);
}

.hakaseLp .fixMenu .kiyakuBtn{
	width: 750px;
	margin: 0 auto 10px;
}

.hakaseLp .fixMenu .kiyakuBtn a{
	font-size: 20px;
	font-weight: bold;
	display: flex;
	height: 50px;
	letter-spacing: .2em;
	color: #f09198;
	border: 2px solid #f09198;
	border-radius: 10px;
	background: url('../img/fix_arrow.png') no-repeat 713px center;
	background-color: #fff;
	background-size: 17px auto;

	align-items: center;
	justify-content: center;
}

.hakaseLp .fixMenu .ouboBtn{
	width: 400px;
	margin: 0 auto;
}

.hakaseLp .hideFixMenu{
	transition: opacity .6s ease;
	opacity: 0;
	z-index: -2;
}

/* ==========================================================================
   end
========================================================================== */