@charset 'UTF-8';

@font-face {
font-family: "NotoSansJP";
src: url("../font/NotoSansJP-ExtraLight.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "NotoSansJP";
src: url("../font/NotoSansJP-Light.ttf") format("truetype");
font-weight: 500;
}
@font-face {
font-family: "NotoSansJP";
src: url("../font/NotoSansJP-Regular.ttf") format("truetype");
font-weight: 600;
}
@font-face {
font-family: "NotoSansJP";
src: url("../font/NotoSansJP-Medium.ttf") format("truetype");
font-weight: 700;
}
@font-face {
font-family: "NotoSansJP";
src: url("../font/NotoSansJP-Bold.ttf") format("truetype");
font-weight: 800;
}

body {
box-sizing: border-box;
position: relative;
background-color: #FFFFFF;
color: #535353;
font-size: 14px;
font-family: "Noto Sans JP";
line-height: 1.5;
font-weight: 600;
text-align: left;
}
h1:not(.staticPageTitle) {
position: relative;
padding: 14px 20px;
font-size: 16px;
font-weight: 600;
color: #AF9B77;
border-bottom: 1px solid #AF9B77;
}
h1.staticPageTitle {
background-color: #FAF8F5;
padding: 30px;
text-align: center;
font-size: 18px;
}
h2 {
position: relative;
margin: 30px 0 20px;
font-size: 20px;
font-weight: 800;
padding-left: 10px;
letter-spacing: 1px;
}
h2:before {
content: "";
position: absolute;
top: 0;
left: 20px;
display: inline-block;
height: 100%;
width: 4px;
background-color: #F5A21B;
}
h2 span {
display: inline-block;
padding-left: 10px;
}
h3 {
font-size: 16px;
font-weight: 700;
}

.wrapper {
padding-top: 66px;
}

/* header *************************************************/
header {
position: fixed;
top: 0;
left: 0;
display: block;
width: 100%;
padding-top: 5px;
box-sizing: border-box;
background-color: #fff;
border-bottom: 1px solid #AF9B77;
z-index: 99;
}
header::before {
content: "";
display: block;
position: absolute;
height: 3px;
width: 100%;
background-color: #AF9B77;
top: 0;
}
header::after {
content: "";
display: block;
position: absolute;
height: 1px;
width: 100%;
background-color: #AF9B77;
top: 4px;
}
header .headerWrap {
position: relative;
max-width: 960px;
margin: 0 auto;
}
.logo_area {
text-align: center;
}
.logo_area .logo {
display: inline-block;
margin: 15px 15px;
padding: 0;
height: 30px;
}
.logo_area .logo img {
height: 30px;
}
header .loginBtn {
display: block;
width: 50px;
height: 50px;
box-sizing: border-box;
padding-top: 33px;
position: absolute;
top: 4px;
right: 60px;
color: #424242;
text-align: center;
font-size: 10px;
background-image: url("../../../../lp/lp07/static/img/icn_login.svg");
background-position: center 10px;
background-repeat: no-repeat;
background-size: 20px auto;
}
/ 遏｢蜊ｰ繧｢繧､繧ｳ繝ｳ */
header .headerBack {
display: block;
width: 45px;
height: 45px;
position: absolute;
top: 8px;
left: 10px;
}
header .headerBack:before {
content: "";
display: block;
width: 10px;
height: 10px;
transform: rotate(45deg);
border-bottom: solid 2px #AF9B77;
border-left: solid 2px #AF9B77;
position: absolute;
top: 16px;
left: 16px;
}

/* .noticeArea */
.noticeArea {
position: absolute;
display: inline-block;
top: 20px;
right: 60px;
width: 30px;
height: 30px;
}
.noticeArea .noticeBtn {
display: inline-block;
width: 34px;
height: 34px;
background-image: url(../../../../lp/lp07/static/img/icn_notification_off.svg);
background-repeat: no-repeat;
background-position: center;
}
.noticeArea .noticeBtn.on {
background-image: url(../../../../lp/lp07/static/img/icn_notification_on.svg);
}

/* .nav_list_area */
.nav_list_area {
position: absolute;
display: inline-block;
top: 14px;
right: 20px;
width: 30px;
height: 30px;
}

.menu-btn {
position: relative;
display: block;
width: 34px;
height: 34px;
cursor: pointer;
}
.menu-btn span:before,
.menu-btn span:after {
content: "";
display: block;
height: 2px;
width: 26px;
border-radius: 3px;
background-color: #9F8662;
position: absolute;
}
.menu-btn span:before {
right: 4px;
bottom: 8px;
}
.menu-btn span:after {
top: 8px;
right: 4px;
}

/* .nav_notification_area */
.nav_notification_area {
position: absolute;
display: inline-block;
right: 50px;
top: 20px;
}
.nav_notification_area .notification-btn {
display: inline-block;
width: 34px;
height: 34px;
background-image: url(../../../../lp/lp07/static/img/icn_notification_on.svg);
background-position: center;
background-repeat: no-repeat;
}
.notificationContent ul li a {
padding: 24px 100px 24px 20px;
font-size: 15px;
font-weight: 600;
}

/* nav */
nav {
position: absolute;
top: 60px;
left: 0;
right: 0;
display: none;
background-color: #fbfaf8;
box-shadow: 0 5px 5px 0 rgb(0 0 0 / 50%);
z-index: 100;
}
.wrapper header input[type=checkbox] {
display: none;
}
.wrapper header .notificationArea:checked ~ .notificationContent,
.wrapper header .menuArea:checked ~ .menuContents {
display: block;
}
header .notificationArea:checked ~ label .notification-btn,
header .menuArea:checked ~ label .menu-btn {
background-image: url(../img/icn_close.png);
background-position: center;
background-size: 30px;
background-repeat: no-repeat;
}
header .notificationArea:checked ~ label .notification-btn span::after,
header .notificationArea:checked ~ label .notification-btn span::before,
header .menuArea:checked ~ label .menu-btn span::after,
header .menuArea:checked ~ label .menu-btn span::before {
display: none;
}
.open nav{
display: block;
}
nav ul.mainMenu {
margin-bottom: 20px;
border-top: solid 1px #AF9B77;
border-bottom: solid 1px #AF9B77;
}
nav ul.subMenu {
margin-bottom: 40px;
}
nav ul.mainMenu li:hover {
background-color: #F2EDE6;
}
nav ul.notification li a,
nav ul.mainMenu li a,
nav ul.subMenu li a {
position: relative;
display: block;
width: 100%;
padding: 8px 45px 8px 20px;
color: #424242;
box-sizing: border-box;
font-size: 15px;
font-weight: 800;
}
nav ul.mainMenu li.mainMenuBlank a:after, nav ul.subMenu li.subMenuBlank a:after {
top: 12px;
right: 16px;
width: 12px;
height: 12px;
border: none;
background-image: url("../../../../lp/lp07/static/img/icn_popup.svg");
transform: unset;
}
nav ul.notification li a {
padding: 20px 100px 20px 20px;
border-top: solid 1px #AF9B77;
}
nav ul.mainMenu li a:after,
nav ul.subMenu li a:after {
content: "";
display: block;
width: 7px;
height: 7px;
transform: rotate(45deg);
position: absolute;
top: 15px;
right: 20px;
border-top: solid 1px #AF9B77;
border-right: solid 1px #AF9B77;
}
nav ul.subMenu li a {
font-size: 12px;
font-weight: 600;
}
nav .sns {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
nav .sns a {
display: block;
width: 25px;
height: 25px;
margin: 0 20px;
}
.loginWrap .menuContents {
background-color: #FBFAF8;
}

/* span.data */
.mypage .pointHistoryArea .pointHistoryWrap span.data,
.notificationContent ul li a span.data {
position: absolute;
right: 12px;
top: calc(50% - 8px);
font-weight: 100;
font-size: 12px;
}

/* .nav_back_area */
.nav_back_area {
position: absolute;
left: 10px;
top: 18px;
width: 34px;
height: 34px;
}
.nav_back_area .back-btn {
position: relative;
display: block;
width: 34px;
height: 34px;
}
.nav_back_area .back-btn::before{
content: "";
display: block;
width: 10px;
height: 10px;
border: solid 2px transparent;
border-bottom-color: #9F8662;
border-right-color: #9F8662;
transform: rotate(135deg);
position: absolute;
top: 10px;
right: 7px;
border-radius: 3px;
}

p.kome {
font-size: 12px;
font-weight: 600;
}

footer {
margin-top: 20px;
}
.about footer {
margin-top: 0;
}
footer .footerLink {
border-top: 1px solid #AF9B77;
}
footer .footerLink .footerLogoWrap {
display: block;
max-width: 300px;
margin: 0 auto;
padding: 18px 40px;
text-align: left;
}
.footerLink img {
width: 120px;
}
footer .footerLink .footerLinkWrapper {
display: flex;
flex-flow: column;
max-width: 300px;
align-items:top;
justify-content: start;
padding: 0 40px;
margin: 0 auto
}
footer .footerLink .footerLinkWrapper + .footerLinkWrapper {
padding-top: 10px;
}
footer .footerLink .footerLinkWrapper .footerLinkList {
padding-bottom: 10px;
}
footer .footerLink .footerLinkWrapper .footerLinkList a {
display: inline-block;
font-size: 14px;
font-weight: 700;
color: #535353;
box-sizing: border-box;
}
.snsLinkIcon{
display: flex;
max-width: 300px;
padding: 40px 40px 20px;
margin: 0 auto;
align-items: center;
/* border-bottom: 1px solid #9B8767; */
}
.menuContents .snsLinkIcon{
justify-content: center;
padding-bottom: 30px;
background-color: transparent;
}
.snsLinkIcon > a{
display: block;
width:25px;
height: 25px;
margin-left: 35px;
}
.snsLinkIcon > a:first-child{
margin-left: 0;
}
.snsLinkIcon > a img{
width: 25px;
height: auto;
}
.footerLogoWrap {
margin: 0 auto;
text-align: center;
}
footer > .footerLogoWrap {
padding: 24px 0 10px;
border-top: solid 1px #9B8767;
}
.copyright {
padding-bottom: 10px;
text-align: center;
font-weight: 700;
font-size: 12px;
}

/* .module.faqArea */
.module.faqArea {
padding: 0;
}
.module.faqArea h2 {
margin: 10px auto;
}
.module.faqArea ul {
max-width: 960px;
padding: 20px;
margin: 0 auto;
box-sizing: border-box;
}
.module.faqArea ul li {
border-bottom: solid 1px #9B8767;
}
.module.faqArea ul li:last-child {
border-bottom: none;
}
.module.faqArea ul li input[type="checkbox"] {
display: none;
}
.module.faqArea ul li label {
position: relative;
display: block;
padding: 20px 55px;
}
.module.faqArea ul li label:before {
content: "";
display: block;
position: absolute;
top: 20px;
left: 20px;
width: 20px;
height: 20px;
background-image: url(../../../../lp/lp07/static/img/icn_toggle_open.svg);
}
.module.faqArea ul li input[type="checkbox"]:checked + label:before {
background-image: url(../../../../lp/lp07/static/img/icn_toggle_close.svg);
}
.module.faqArea ul li p {
display: none;
padding: 0px 25px 20px 20px;
}
.module.faqArea ul li input[type="checkbox"]:checked + label + p {
display: block;
padding: 0 20px 20px 55px;
}

.diagnosisBtnArea {
position: relative;
padding: 10px 0;
background-color: #e3dbd0;
}
.diagnosisBtnArea .orderText {
width: 250px;
height: 25px;
margin: 0 auto 10px;
background-image: url(../../../../lp/lp07/static/img/img_to_start.svg);
background-position: center;
background-repeat: no-repeat;
}
.diagnosisBtnArea .btn {
margin-bottom: 0;
}
.diagnosisBtnArea .timeText {
position: absolute;
left: calc(50% - 160px);
top: 25px;
width: 60px;
height: 60px;
margin: 0 auto;
background-image: url(../../../../lp/lp07/static/img/img_2mitinues.svg);
background-repeat: no-repeat;
}

.sp_none {
display: none;
}
.pc_none {
display: block;
}
@media screen and (min-width: 769px) {
nav {
left: unset;
width: 375px;
}
body.lp {
font-size: 16px;
}
h2 {
margin-bottom: 50px;
font-size: 28px;
text-align: center;
}
h2:before {
display: none;
}

.sp_none {
	display: block;
}
.pc_none {
	display: none;
}

footer .footerLink .footerLogoWrap {
	max-width: 960px;
	text-align: center;
}
footer .footerLink .footerEnd {
	display: flex;
	max-width: 465px;
	margin: 0 auto;
	justify-content: center
}
footer .footerLink .footerLinkWrapper {
	padding: 0px 25px;
}
footer .footerLink .footerLinkWrapper + .footerLinkWrapper {
	padding-top: 0;
}
.snsLinkIcon {
	justify-content: center;
}

}