@charset "shift_jis";
/* CSS Document */

/* =========================================================
reset
========================================================= */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
html {
	overflow-y: scroll;
	scroll-behavior: smooth;
}
body{
    overflow: hidden;
    background: url(/woman_lp/img/body_bg.webp) no-repeat center bottom;
    background-attachment: fixed;
    background-size: cover;
}
a{text-decoration: none;}
blockquote,q {
	quotes: none;
}
blockquote:before,blockquote:after,q:before,q:after {
	content: '';
	content: none;
}
input,textarea {
	margin: 0;
	padding: 0;
}
ol,ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption,th {
	text-align: left;
	vertical-align: middle;
}
a:focus {
	outline: none;
}

.fade-up {
	opacity: 0;
	transform: translateY(60px);
	transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  .fade-up.is-active {
	opacity: 1;
	transform: translateY(0);
  }

/*
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
*/
/* =========================================================
custom_properties
var(propertie) or var(propertie,substitute)
========================================================= */
body{
	--main-color:#BE7882;
	--sub-color:#F3F4EF;
	--font-small-size:clamp(12px, 3.5vw, 14px);
	--font-middle-size:clamp(16px, 4vw, 18px);
	--font-large-size:clamp(20px, 5.5vw, 24px);
	--font-midashi-size:clamp(36px, 7vw, 40px);
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-style: normal;
}

/* =========================================================
base
========================================================= */
header {
	display: flex;
    flex-wrap: nowrap;
	align-items: flex-end;
    width: 100%;
    margin: 1em 5%;
	h1 {
		color: var(--main-color);
		font-size: clamp(20px, 6vw, 25px);
		margin-right: 1em;
		span {
			font-size: clamp(16px, 5.5vw, 20px);
			display: block;
			color: #fff;
			background-color: var(--main-color);
			width: fit-content;
			font-weight: bold;
			padding: 0 1em;
            line-height: 1.5em;
		}
	}
	img {
		width: fit-content;
        height: fit-content;
	}
}
section.main {
    position: relative;
    margin: 50px auto;
    height: 650px;
	div {
		position: absolute;
        top: 300px;
        left: 46%;
        width: 52%;
        max-width: 800px;
        display: block;
        background: #ffffffe0;
        padding: 2em;
        box-sizing: border-box;
		p {
			font-size: 20px;
			font-weight: bold;
		}
		
		h2 {
			font-size: 35px;
			color: var(--main-color);
		}
	}
}
section.main::before {
	content: "";
    position: absolute;
    background: url(/woman_lp/img/main_img.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    top: 0px;
    left: 0;
    width: 65%;
    max-width: 850px;
    height: 65vh;
    min-width: 850px;
}

section.reason {
	width: 100%;
	background-color: var(--sub-color);
	padding: 50px 0px;
	div.reason_mainblock {
		width: 1050px;
        padding-left: 400px;
        display: block;
        position: relative;
        margin: auto;
        box-sizing: border-box;
		height: 350px;
		h2 {
            font-size: 30px;
            padding-top: 80px;
            margin: 0.5em auto;
            position: relative;
		}
		h2::before {
            content: "";
            position: absolute;
            top: 10px;
            left: 0;
            background: url(/woman_lp/img/reason_abc.png);
            background-repeat: no-repeat;
            background-size: contain;
            width: 370px;
            height: 90px;
		}
		p {
			font-size: 16px;
		}
	}
	div.reason_mainblock::before {
        content: "";
        position: absolute;
        background: url(/woman_lp/img/reazon_main.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        top: 0px;
        left: 0;
        width: 346px;
        height: 327px;
	}
	ul {
        width: 1050px;
        display: flex;
        flex-wrap: wrap;
        margin: 30px auto 100px auto;
		li {
			width: 23%;
			margin: 1%;
			img {
				width: 100%;
			}
		}
	}
}
section.voices {
	background: #fff;
    width: 100%;
	padding: 50px 0;
	div.title_section {
		margin: 0px auto;
		width: fit-content;
		max-width: 368px;
		h2 {
			margin-bottom: 50px;
			img {
				width: 100%;
			}
		}
	}
	div.voices_list {
		display: flex;
		flex-wrap: wrap;
		margin: auto;
		width: 900px;
		div.voices_list_block {
            display: flex;
            flex-wrap: nowrap;
			gap: 20px;
            margin: 28px;
            box-shadow: 10px 10px #be7882;
            padding: 5px 15px 5px 5px;
			div {
				img {
					width: fit-content;
                    max-width: 246px;
				}
				h3 {
					line-height: 2em;
                    font-size: 24px;
				}
				p {
				}
				span {
					height: 2em;
                    font-weight: bold;
                    text-align: right;
                    display: block;
                    width: 100%;
                    align-self: flex-end;
				}
			}
			div:nth-child(2){
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
			}
		}
	}
}


section.question {
	background-color: #fff;
	h2.title_section {
		font-size: 35px;
		font-weight: bold;
		text-align: center;
		line-height: 1.5em;
		position: relative;
		display: inline-block;
		margin: 0;
		padding: 20px 0 35px;
		width: 100%;
		color: #fff;
		background: var(--main-color);
		span {
			display: block;
			font-size: 24px;
		}
	}
	h2.title_section:before {
    	content: "";
    	position: absolute;
    	top: 99%;
    	left: 50%;
    	margin-left: -30px;
    	border: 30px solid transparent;
    	border-top: 25px solid var(--main-color);
		z-index: 10;
	}
	div.question_block {
		background:url(/woman_lp/img/question_bg.png)no-repeat center bottom;
		background-size:cover;
		position:relative;
		padding-bottom: 60px;
		div.question_fukidashi_block {
			ul {
				position: relative;
				height: 670px;
				li {
					font-weight: bold;
                    position: absolute;
                    line-height: 1.5em;
                    display: table;
                    text-align: left;
                    box-sizing: border-box;
					h3 {
						font-size: 18px;
						color: var(--main-color);
						line-height: 1.5em;
                        padding-bottom: 0.5em;
						align-self: anchor-center;
					}
					p {
						font-size: 14px;
						line-height: 1.5em;
					}
				}
				li:nth-child(1) {
					background: url(/woman_lp/img/fukidashi_l_t.png) no-repeat;
                    width: 382px;
                    height: 180px;
                    padding: 30px 55px 50px 15px;
					top: 240px;
                    right: 60%;
				}
				li:nth-child(2) {
					background: url(/woman_lp/img/fukidashi_l_b.png) no-repeat;
                    width: 390px;
                    height: 180px;
                    padding: 25px 70px 35px 15px;
					top: 430px;
                    right: 60%;
				}
				li:nth-child(3) {
					background: url(/woman_lp/img/fukidashi_center.png) no-repeat;
                    width: 382px;
                    height: 225px;
                    padding: 20px 55px 55px 15px;
					top: 50px;
					left: 52%;
					transform: translateX(-50%);
				}
				li:nth-child(4) {
					background: url(/woman_lp/img/fukidashi_r_t.png) no-repeat;
					width: 400px;
                    height: 200px;
                    padding: 35px 20px 60px 65px;
                    top: 240px;
                    left: 60%;
				}
				li:nth-child(5) {
					background: url(/woman_lp/img/fukidashi_r_b.png) no-repeat;
					width: 400px;
                    height: 200px;
                    padding: 35px 20px 60px 65px;
					top: 430px;
                    left: 61%;
				}
			
			}
			img {
                display: block;
                width: 200px;
                position: absolute;
				top: 350px;
				left: 50%;
				transform: translateX(-50%);
			}
		}
		.question_finish {
			position: relative;
			margin-bottom: 0.2rem;
			padding: 1em;
			color: #353535;
			background-color: #F9F4EF;
			font-weight: bold;
			font-size: 26px;
			width: 750px;
			text-align: center;
			margin: auto;
			p {
				font-size: 20px;
				span {
					display: block;
                    margin: auto;
                    background: linear-gradient(transparent 60%, #ff6 60%);
                    font-size: 25px;
                    width: fit-content;
				}
			}
		}
		.question_finish::before {
			position: absolute;
			inset: 10px -10px -10px 10px;
			border: 3px dotted #333;
			content: "";
		}
	}
}
section.service {
	background-color: hsl(30, 100%, 97%);
	padding: 50px 0;
	div.title_section {
		text-align: center;
		position: relative;
		margin-bottom: 100px;
		span {
			font-size: 20px;
            line-height: 2em;
            font-weight: bold;
		}
		h2 {
            font-size: 35px;
            color: var(--main-color);
            line-height: 1.5em;
		}
	}
	div.title_section ::before{
		content: "";
        position: absolute;
        background: url(/woman_lp/img/service_title_line.png) no-repeat;
        width: 325px;
        height: 33px;
        bottom: -60px;
		left: 50%;
		transform: translateX(-50%);
	}
	div.service_block {
		ul {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			width: 1050px;
			margin: 5em auto;
			li {
				width: 47%;
				img {
					width: 100%;
                    height: 25em;
                    object-fit: cover;
                    border-radius: 20px;
				}
				p {
					font-size: 16px;
					line-height: 1.8em;
					span {
						display: block;
						background:linear-gradient(transparent 60%, #ff6 60%);
						width: fit-content;
					}
				}
			}
		}
		ul:nth-child(2){
			flex-flow: row-reverse;
			li{
				img{height: 20em;}
			}

		}
	}
}
section.cta {
	background-color: var(--main-color);
	padding: 5em 0;
	a.cta_pc_block {
		display: block;
		margin: auto;
		width: fit-content;
	}
	div.cta_sp_block {
		img {
		}
		ul {
			li {
				a {
					img {
					}
				}
			}
		}
	}
}
section.staff {
	background-color: #F3F4EF;
	padding: 5em 0;
	div.title_section {
		h2 {
			text-align: center;
			font-size: 40px;
			position: relative;
			span {
				font-size: 20px;
				display: block;
			}
		}
		h2::before{
			content: "";
            position: absolute;
            background: url(/woman_lp/img/staff_title.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            top: -40px;
            width: 120px;
            height: 30px;
            left: 50%;
            transform: translateX(-50%);
		}
	}
	div.staff_block {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin: 4em auto;
        padding: 5px 15px 5px 5px;
        width: 860px;
		div.staff_img {
			width: 185px;
			img {
				width: 100%;
			}
		}
		div.staff_text {
			width: 70%;
			line-height: 1.7em;
			display: flex;
			flex-wrap: wrap;
			h3 {
				line-height: 2em;
				font-size: 18px;
				width: 100%;
				display: block;
			}
			h4 {
				font-size: 24px;
				line-height: 2em;
				width: 100%;
				display: block;
			}
			p {
				font-size: 16px;
			}
			a {
				height: 2em;
				font-weight: bold;
				text-align: right;
				display: block;
				width: 100%;
				align-self: flex-end;
				color: var(--main-color);
			}
		}
	}
	div.ceo_block {
		display: block;
        margin: auto;
        width: 90%;
        max-width: 980px;
        background: white;
        border-radius: 10px;
        padding: 2em 4em 3em;
        box-sizing: border-box;
		h2 {
			text-align: center;
			font-size: 32px;
			color: var(--main-color);
		}
		div.ceo_block_child {
			display: flex;
			flex-wrap: nowrap;
			justify-content: flex-start;
			margin: 2em auto;
			gap: 30px;
			div.staff_img {
				width: auto;
				img {
					width: 184px;
				}
			}
			div.staff_text {
				h3 {
					font-size: 18px;
					margin: 0.5em auto;
				}
				h4 {
					font-size: 24px;
					margin: 0.5em auto;
				}
			}
		}
		p {
			font-size: 16px;
			line-height: 1.7em;
		}
	}
}
section.points {
	background: url(/woman_lp/img/anshin_bg.webp) no-repeat center bottom;
	background-size: cover;
	position: relative;
	padding-bottom: 60px;
	h2.title_section {
		text-align: center;
        font-size: 60px;
        font-weight: bold;
        margin: 2em auto 1em auto;
        display: inline-block;
        width: -webkit-fill-available;
		span {
			display: block;
			font-size: 16px;
		}
	}
	ul {
		width: 1200px;
		margin: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		li {
			width: 40%;
            box-shadow: 4px 5px 6px #d4d4d4;
            background-color: white;
            border-radius: 10px;
            margin: 1.5em 1em;
            padding: 1em 2em 2em;
			position: relative;
			h3 {
				text-align: center;
                font-size: 24px;
                font-weight: bold;
                line-height: 3em;
			}
			img {
				width: fit-content;
			}
			p {
				text-align: left;
				font-size: 16px;
			}
		}
		li::before{
            content: "";
            position: absolute;
            background: url(/woman_lp/img/point_block_title.png) no-repeat;
            background-size: contain;
            width: 120px;
            height: 40px;
            top: -1.5em;
            left: 50%;
            transform: translateX(-50%);
		}
	}
}
section.QA {
    background-color: #fff;
    padding-bottom: 60px;
    padding-top: 40px;
	h2.title_section {
		margin: 2em auto;
		width: fit-content;
		img{width: 500px;}
	}
	ul {
        width: 1000px;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
		li {
			width: 49%;
            box-sizing: border-box;
            padding: 1em 1em 1em 3em;
            font-size: 22px;
            font-weight: bold;
            border-bottom: 1px solid #c6c6c6;
            position: relative;
		}
		li::before{
			content: "";
            position: absolute;
            background: url(/woman_lp/img/check_box.png) no-repeat;
            background-size: contain;
            width: 30px;
            height: 30px;
            top: 1em;
            left: 1em;
		}
		li:nth-child(2n) {
			border-left:1px solid #c6c6c6 ;
		}
		li:nth-child(5) {
			border-bottom:unset;
		}
		li:nth-child(6) {
			border-bottom:unset;
		}
	}
	div {
        display: block;
        width: fit-content;
        margin: 5em auto;
		img {}
	}
}
section.shop_date {
	background-color: #fff;
	padding-bottom: 60px;
	position: relative;
	div {
		width: 50%;
		display: block;
		position: relative;
		padding-top: 70px;
		left: 50%;
		h2 {
			font-size: 26px;
            line-height: 3em;
			position: relative;
		}
		h2::before{
			content: "";
            position: absolute;
            background: url(/woman_lp/img/shopdate_title.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            top: -60px;
            left: 0;
            width: 250px;
            height: 70px;
		}
		dl {
			line-height: 2.3em;
			dt{
				float: left;
			}
			dd{
				margin-left: 80px;
			}
		}
	}
}
section.shop_date::before{
    content: "";
    position: absolute;
    background: url(/woman_lp/img/shopdate_img.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    top: 0px;
    left: 0;
    width: 45%;
    max-width: 850px;
    border-radius: 0 20px 20px 0;
    height: 30em;
}
section.form {
	background-color: #fff;
	padding-bottom: 60px;
	padding-top: 60px;
	h2.title_section {
        font-size: 40px;
        display: block;
        margin: 2em auto 1em auto;
        width: fit-content;
        position: relative;
	}
	h2.title_section::before {
        content: "";
        position: absolute;
        background: url(/woman_lp/img/form_title.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        top: -60px;
        left: 50%;
        transform: translateX(-50%);
        width: 150px;
        height: 50px;
	}
	p {
        font-size: 16px;
        line-height: 1.7em;
        text-align: center;
		span {
			color: #4C8B50;
            font-weight: bold;
		}
	}
}

@media (min-width: 767px){
	.pc_off{display: none !important;}

}

@media (max-width: 764px){
	.sp_off{display: none !important;}
	header {
		display: block;
		width: 96%;
		margin: 2%;
		h1 {
			span {
			}
		}
		img {
			margin-right: 1%;
			margin-left: auto;
			display: block;
			width: 40%;
			height: auto;
		}
	}
	section.main {
		height: 55vh;
		margin: 5vh auto 0vh auto;
		div {
			width: 85%;
			left: 10%;
			top: 26vh;
			padding: 1em;
			p {
				font-size: 3.5vw;
			}
			h2 {
				font-size: 5vw;
			}
		}
	}
	section.main::before {
		width: 90%;
		max-width: 850px;
		height: 30vh;
		min-width: auto;
	}
	section.reason {
		div.reason_mainblock {
			width: 90%;
			padding-left: 0;
			height: auto;
			h2 {
				font-size: 4.5vw;
				padding-top: 7vh;
			}
			h2::before {
				top: 1vh;
                left: 0;
                width: 70%;
                height: 8vh;
			}
			p {
				font-size: 3.5vw;
			}
			
		}
		div.reason_mainblock::before {
			display: none;
		}
		ul {
			width: 90%;
			margin: 5vh auto;
			li {
				width: 48%;
				img {
				}
			}
		}
	}
	section.voices {
		div.title_section {
			width: 60%;
			h2 {
				img {
				}
			}
		}
		div.voices_list {
			width: 95%;
			div.voices_list_block {
				flex-wrap: wrap;
				div {
					width: fit-content;
					margin: auto;
					img {
					}
					h3 {
						font-size: 4.5vw;
						line-height: 1.5em;
					}
					p {
						font-size: 3.5vw;
						margin: 1em auto;
					}
					span {
					}
				}
			}
		}
	}
	section.question {
		h2.title_section {
			font-size: 6vw;
			span {
				font-size: 4vw;
			}
		}
		div.question_block {
			div.question_fukidashi_block {
				ul {
					height: auto;
					margin: 5vh auto;
					li {
                        position: relative;
                        background-image: unset !important;
                        top: unset !important;
                        left: unset !important;
                        right: unset !important;
                        bottom: unset !important;
                        width: 90% !important;
						height: auto !important;
                        margin: 1em auto !important;
                        padding: 1em !important;
                        border: 2px solid #cbcbcb;
                        border-radius: 10px;
						h3 {
							font-size: 4vw;
						}
						p {
							font-size: 3.5vw;
						}
					}
					li:nth-child(3) {
						transform: translateX(-0%);
					}
				}
				img {
					top: auto;
                    bottom: 20vh;
                    width: 40%;
				}
			}
			div.question_finish {
				width: 70%;
				padding: 1em 0.5em 1em 1em;
				margin-top: 28vh;
				p {
					font-size: 4vw;
					width: fit-content;
					span {
						font-size: 5vw;
						display: inline;
						padding: 0 1px 0px;
					}
				}
			}
		}
	}
	section.service {
		width: 90%;
		padding: 5vh 5%;
		div.title_section {
			span {
				font-size: 3.5vw;
			}
			h2 {
				font-size: 7vw;
			}
		}
		div.service_block {
			ul {
				width: 100%;
				flex-wrap: wrap;
				li {
					width: 100%;
					img {
						height: 17em;
					}
					p {
						span {
							display: inline;
							padding: 0 1px 0px;
						}
					}
				}
			}
			ul:nth-child(2) {
				flex-flow: column;
				li{
					img{height: 15em;}
				}
			}
		}
	}
	section.cta {
		padding: 4vh 0;
		div.cta_sp_block {
            background-color: #fff;
            width: 90%;
            margin: auto;
            padding: 5%;
            box-sizing: border-box;
            border-radius: 10px;
			img {
				width: 100%;
			}
			ul {
				li {
					a {
						img {
							width: fit-content;
                            max-width: 100%;
                            margin: 1em auto;
                            display: block;
						}
					}
				}
			}
		}
	}
	section.staff {
		div.title_section {
			h2 {
				font-size: 7vw;
				span {
					font-size: 4vw;
				}
			}
			h2::before{
				width: 25%;
				height: 1.5em;
			}

		}
		div.staff_block {
			flex-wrap: wrap;
            width: 90%;
			div.staff_img {
				width: 60%;
				margin: auto;
				img {
				}
			}
			div.staff_text {
				margin: 2em auto;
				width: 100%;
				h3 {
					font-size: 4vw;
				}
				h4 {
					font-size: 5vw;
					color: var(--main-color);
				}
				
				p {
					font-size: 3.5vw;
					line-height: 1.5em;
				}
				a {
					font-size: 3.5vw;
				}
			}
		}
		div.ceo_block {
			padding: 1.5em;
			h2 {
				font-size: 5vw;
			}
			div.ceo_block_child {
                flex-wrap: wrap;
                justify-content: center;
				div.staff_img {
					img {
					}
				}
				div.staff_text {
					h3 {
						font-size: 4vw;
					}
					h4 {
						font-size: 5vw;
					}
					p {
						font-size: 3.5vw;
					}
				}
			}
			p {
				font-size: 3.5vw;
			}
		}
	}
	section.points {
		h2.title_section {
			font-size: 8vw;
			span {
				font-size: 3.5vw;
			}
		}
		ul {
			width: 90%;
			li {
				width: 100%;
				h3 {
                    font-size: 5vw;
                    line-height: 1.5em;
                    margin: 0.5em auto;
				}
				img {
					width: 90%;
				}
				p {
					font-size: 3.5vw;
				}
			}
			li::before{
				width: 25%;
				height: 4vh;
				top: -1em;
				left: 50%;
			}
		}
	}
	section.QA {
		h2.title_section {
			img {
				width: 72%;
				display: block;
				margin: auto;
			}
		}
		ul {
			flex-wrap: wrap;
			width: 90%;
			li {
				width: 100%;
                font-size: 4vw;
			}
			li:nth-child(2n) {
				border-left:unset ;
			}
			li:nth-child(5) {
				border-bottom: 1px solid #c6c6c6;
			}
			li:nth-child(6) {
				border-bottom:unset;
			}
		}
		div {
			img {
				width: 80%;
                display: block;
                margin: auto;
			}
		}
	}
	section.shop_date {
		height: auto;
		padding: 0vh 0 30vh;
		div {
			width: 90%;
			top: 25vh;
			left: 50%;
			transform: translateX(-50%);
			h2 {
				font-size: 5vw;
			}
			h2::before {
                top: -3vh;
                left: 0;
                width: 50%;
                height: 5vh;
			}
			dl {
				font-size: 3.5vw;
				line-height: 2em;
				dt {
				}
				dd {
				}
			}
		}
	}
	section.shop_date::before {
		content: "";
		position: absolute;
		background: url(/woman_lp/img/shopdate_img.webp);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		top: 0px;
		left: 0;
		width: 90%;
		max-width: 850px;
		border-radius: 0 10px 10px 0;
		height: 27vh;
	}
	section.form {
		h2.title_section {
			font-size: 7vw;
		}
		h2.title_section::before {
			top: -5vh;
			left: 50%;
			transform: translateX(-50%);
			width: 30%;
			height: 5vh;
		}		
		p {
			font-size: 3.5vw;
			span {
			}
		}
	}

}