@charset "Shift-JIS";

/*========/ お問い合わせ /========*/
.contact .top-title{
	background: #fff5e7 url(../img/contact-title-bg.png) no-repeat bottom right 10px;
	background-size: 10rem;
}
.contact .contact-top{ margin: 3rem 2rem 0; }
.contact .contact-top h2 + p{ margin-top: 3rem; }
.contact .contact-top h2 + p span{ color: #ee7849; }
.contact .contact-list h3{ margin-top: 5rem; }
.contact .contact-list div{
	margin: 3rem 2rem 0;
	padding: 3rem 2rem;
	border: 2px solid #ccc;
}
.contact .contact-list h4{
	padding-left: 1.3em;
	text-indent: -1.3em
}
.contact .contact-list h4::before{
	content: "●";
	margin-right: .5rem;
	color: #20a991;
}
.contact .contact-list ul{
	margin-top: 2rem;
	padding-left: 1.3em;
}
.contact .contact-list ul li{
	display: flex;
	align-items: center;
}
.contact .contact-list ul li + li{ margin-top: 1rem; }
.contact .contact-list ul li::before{
	content: "";
	width: 2rem;
	height: 2rem;
	margin-right: .5rem;
	display: block;
	-webkit-mask-image: url(../img/arrow-icon.svg);
	mask-image: url(../img/arrow-icon.svg);
	-webkit-mask-size: cover;
	mask-size: cover;
	background: #ee7849;
}

/*========/ 初めての方へ /========*/
.beginner .top-title{
	background: #fff5e7 url(../img/top-title-bg.png) no-repeat center right 20px;
	background-size: 5rem;
}
/*==// メグリアネット会員の約束事 //==*/

.beginner-agreement{ margin: 3rem auto; }
.beginner-agreement div{ margin: 0 2rem; }
.beginner-agreement h3{
	margin-top: 4rem;
	padding: 1.5rem 2rem;
	font-size: 1.8rem;
	font-weight: bold;
	background: #fff5e7;
}
.beginner-agreement dl{ margin-top: 3rem; }
.beginner-agreement dl dt{
	display: flex;
	font-weight: bold;
}
.beginner-agreement dl dt::before{
	content: "●";
	margin-right: .5rem;
	color: #ee7849;
	font-size: 1.4rem;
}
.beginner-agreement dl dd{ margin-top: 2rem; }
.beginner-agreement ol li{
	padding-left: 1em;
	text-indent: -1em;
}
.beginner-agreement ol ol li{
	padding-left: 2.8em;
	text-indent: -2.8em;
}
.beginner-agreement ol li{ margin-top: 1rem; }
.beginner-agreement p{
	margin: 3rem 0;
}

/*==// 個人情報保護方針 //==*/

.beginner-privacy{
	margin: 3rem 2rem 0;
}
.beginner-privacy h3{
	margin-top: 4rem;
	padding: 1.5rem 2rem;
	font-size: 1.8rem;
	font-weight: bold;
	background: #fff5e7;
}
.beginner-privacy dl{
	margin-top: 3rem;
	display: flex;
}
.beginner-privacy dl ol{ margin-top: 2rem; }
.beginner-privacy dl dt{
	display: flex;
	font-weight: bold;
}
.beginner-privacy dl dd{ margin-left: 1rem; }
.beginner-privacy ol li{
	padding-left: 2.6em;
	text-indent: -2.6em;
}
.beginner-privacy ol li{ margin-top: 1rem; }
.beginner-privacy > p{ margin: 3rem 0; }
.beginner-privacy div{
	padding: 2rem;
	border: 2px solid #ccc;
}
.beginner-privacy div p + p{ margin-top: 2rem; }

/*==// ご利用に際して //==*/

.beginner-usage{ margin: 3rem auto; }
.beginner-usage div{ margin: 4rem 2rem 0; }
.beginner-usage > p{ margin-top: 4rem; }
.beginner-usage h3{
	margin-top: 4rem;
	padding: 1.5rem 2rem;
	font-size: 1.8rem;
	font-weight: bold;
	background: #fff5e7;
}
.beginner-usage dl{ margin-top: 3rem; }
.beginner-usage dl + dl{
	padding-top: 3rem;
	border-top: 1px solid #ccc;
}
.beginner-usage dt{
	display: flex;
	font-weight: bold;
}
.beginner-usage dl dt::before{
	content: "●";
	margin-right: .5rem;
	color: #ee7849;
	font-size: 1.4rem;
}
.beginner-usage dl dd{ margin-top: 2rem; }

/*==// 免責事項／著作権／電子認証について //==*/
.beginner-exemprion{ margin: 3rem auto; }
.beginner-exemprion div{ margin: 0 2rem; }
.beginner-exemprion dl{ margin-top: 4rem; }
.beginner-exemprion dl dt{
	padding: 1.5rem 2rem;
	font-size: 1.8rem;
	font-weight: bold;
	background: #fff5e7;
}
.beginner-exemprion dl dd{ margin-top: 3rem; }
.beginner-exemprion dl dd + dd{ margin-top: 2rem; }


/*==// 特定商取引法に基づく表示 //==*/

.beginner-houmon{ margin: 3rem auto; }
.beginner-houmon div{ margin: 0 2rem; }
.beginner-houmon div > dl > dt{
	margin-top: 4rem;
	padding: 1.5rem 2rem;
	font-size: 1.8rem;
	font-weight: bold;
	background: #fff5e7;
}
.beginner-houmon div > dl > dd:nth-of-type(1),
.beginner-houmon dl dl,
.beginner-houmon h4{ margin-top: 3rem; }
.beginner-houmon h3 + p,
.beginner-houmon h4 + p{ margin-top: 2rem; }
.beginner-houmon div dl dd strong,
.beginner-houmon dl dd{ margin-top: 1rem; }
.beginner-houmon div dl dd a{ color: #554b3e; }
.beginner-houmon div dl dd strong{
	padding-left: 1em;
	text-indent: -1em;
	display: block;
	color: #ee7849;
	font-weight: normal;
}
.beginner-houmon div dl dd strong::before{ content: "※"; }
.beginner-houmon h4,
.beginner-houmon dl dl{
	padding-top: 3rem;
	border-top: 1px solid #ccc;
}
.beginner-houmon dl dl dt{
	font-weight: bold;
	font-size: 1.8rem;
}
.beginner-houmon h3{
	display: flex;
	font-size: 1.8rem;
}
.beginner-houmon h3::before{
	content: "●";
	margin-right: .5rem;
	color: #ee7849;
	font-size: 1.4rem;
}
.beginner-houmon ol > li + li{ margin-top: 4rem; }
.beginner-houmon ul{
	margin-top: 2rem;
	padding: 2rem;
	border: 2px solid #ccc;
}
.beginner-houmon ul li{
	display: flex;
	align-items: center;
}
.beginner-houmon ul li + li{ margin-top: 1rem; }
.beginner-houmon ul li::before{
	content: "●";
	margin-right: .5rem;
	color: #554b3e;
	font-size: .6rem;
}

/*========/ よくある質問 /========*/

.beginner-faq{ margin: 3rem auto; }
.beginner-faq > div{ margin: 0 2rem; }
.beginner-faq > div > ul:nth-of-type(1){
	margin: 4rem auto 0;
	display: flex;
	align-items: stretch;
	line-height: 1.6rem;
	justify-content: space-between;
}
.beginner-faq > div > ul:nth-of-type(1) li{ width: calc(100% / 2 - .5rem); }
.beginner-faq > div > ul:nth-of-type(1) li + li{ margin-left: 1rem; }
.beginner-faq > div > ul:nth-of-type(1) li a{
	height: 100%;
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	color: #fff;
	text-align: center;
	line-height: 2rem;
	font-size: 1.4rem;
	font-weight: bold;
	background: #20a991;
}
.beginner-faq > div > ul + ul{ margin: 2rem auto 0; }
.beginner-faq > div > ul + ul li{
	padding: 2rem 0 2rem 2em;
	text-indent: -2em;
}
.beginner-faq > div > ul + ul li:last-child{ border-bottom: 1px dashed #ccc; }
.beginner-faq > div > ul + ul li + li{ border-top: 1px dashed #ccc; }
.beginner-faq > div > ul + ul li a{
	width: 100%;
	padding-left: 2em;
	color: #554b3e;
	position: relative;
}
.beginner-faq > div > ul + ul li a::before{
	content: "Q";
	width: 2.6rem;
	height: 2.6rem;
	display: block;
	color: #fff;
	text-indent: 0;
	font-weight: bold;
	font-family: 'Open Sans';
	position: absolute;
	top: 0;
	left: 0.7rem;
	z-index: 1;
}
.beginner-faq > div > ul + ul li a::after{
	content: "";
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 50%;
	display: block;
	background: #ee7849;
	position: absolute;
	top: 0;
	left: 0;
}
.beginner-faq > div > dl{ margin-top: 5rem; }
.beginner-faq > div > dl > dt{
	font-size: 1.8rem;
	font-weight: bold;
}
.beginner-faq > div > dl > dt,
.beginner-faq > div > dl > dd{
	padding-left: 2em;
	color: #554b3e;
	position: relative;
}
.beginner-faq > div > dl > dd{ margin-top: 2rem; }
.beginner-faq > div > dl > dt::before,
.beginner-faq > div > dl > dd::before{
	content: "Q";
	width: 2.6rem;
	height: 2.6rem;
	display: block;
	color: #fff;
	text-indent: 0;
	font-weight: bold;
	font-family: 'Open Sans';
	position: absolute;
	top: 0;
	left: 0.7rem;
	z-index: 1;
}
.beginner-faq > div > dl > dt::after,
.beginner-faq > div > dl > dd::after{
	content: "";
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 50%;
	display: block;
	background: #ee7849;
	position: absolute;
	top: 0;
	left: 0;
}
.beginner-faq > div > dl > dd::before{
	content: "A";
	left: 0.8rem;
}
.beginner-faq > div > dl > dd::after{ background: #20a991; }
.beginner-faq > div > dl p{ margin-top: 2rem; }
.beginner-faq > div > dl div{
	margin-top: 2rem;
	padding: 2rem;
	border: 2px solid #ccc;
}
.beginner-faq > div > dl div dl dt{ font-weight: bold; }
.beginner-faq > div > dl div dl dd{ margin-top: 1rem; }
.beginner-faq > div > dl dd > a{
	text-decoration: underline;
}
.beginner-faq > div > dl dd strong{
	display: block;
	color: #20a991;
}
.beginner-faq > div > dl dd strong:nth-child(n+2){ margin-top: 2rem; }
.beginner-faq > div > dl div dl dd img{
	max-width: 177px;
	margin-top: 1rem;
	display: block;
}
.beginner-faq > div > dl div dl dd + dd{ margin-top: 0; }
.beginner-faq > div > dl div ul li{ display: flex; }
.beginner-faq > div > dl div ul li + li{ margin-top: 1rem; }
.beginner-faq > div > dl div ul li::before{
	content: "●";
	margin-right: .5rem;
	color: #554b3e;
	font-size: .6rem;
}
.beginner-faq > div dl div a{ color: #554b3e; }
.beginner-faq .faq-address dl + dl{
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px dashed #ccc;
}
.beginner-faq .faq-address dd + dd{ margin-top: 0; }


/*========/ ポイントについて /========*/

.beginner-point{ margin: 3rem auto; }
.beginner-point > div{ margin: 0 2rem; }
.beginner-point strong{    font-weight: 400;
    color: #ff2929; }
.beginner-point p{ margin-top: 2rem; }
.beginner-point h3 + p{ margin-top: 3rem; }
.beginner-point .megliapoint,
.beginner-point .dreampoint{
	color: #20a991;
	font-weight: bold;
}
.beginner-point h3{
	margin-top: 4rem;
	padding: 1.5rem 2rem;
	font-size: 1.8rem;
	font-weight: bold;
	background: #fff5e7;
}
.beginner-point h4{
	margin-top: 4rem;
	display: flex;
	font-size: 1.8rem;
}
.beginner-point h4::before{
	content: "●";
	margin-right: .5rem;
	color: #ee7849;
	font-size: 1.4rem;
}
.beginner-point > div dl{
	margin-top: 2rem;
	padding: 2rem;
	border: 2px solid #ccc;
}
.beginner-point > div dl dt{
	color: #20a991;
	font-weight: bold;
}
.beginner-point > div dl dd{ margin-top: 1rem; }
.beginner-point .table-scroll{
	width: 100%;
	margin-top: 3rem;
	border: 1px solid #ccc;
	border-right: noen;
	display: block;
	overflow-x: scroll;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}
.beginner-point table{ width: 100%; }
.beginner-point table tr:nth-of-type(1){
	font-weight: bold;
	background: #fff5e7;
}
.beginner-point table tr + tr{ border-top: 1px solid #ccc; }
.beginner-point table th,
.beginner-point table td{
	padding: 1rem 1.4rem;
	vertical-align: middle;
}
.beginner-point table th,
.beginner-point table td{ border-right: 1px solid #ccc; }
.beginner-point .table-scroll table::-webkit-scrollbar {
	width: .8rem;
	height: .8rem;
}
.beginner-point .table-scroll table::-webkit-scrollbar-track {
	border-radius: 5px;
	background: #eee;
}
.beginner-point .table-scroll table::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background: #ccc;
}