@charset "Shift_JIS";

/* 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;
	font-style:normal;
	font-weight: normal;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
	display: block;
}
html{
    overflow-y: scroll;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
ol, ul{
    list-style:none;
}
table{
    border-collapse: collapse;
    border-spacing:0;
}
caption, th{
    text-align: left;
}
a:focus {
	outline:none;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;
}
.both{
	clear:both;
}
.flex{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
/* common */
body{
	font-family: a-otf-ryumin-pr6n, serif;
	background:#f2f2f2;
	color:#231815;
}
*{
	box-sizing:border-box;
}
a:hover img{
	opacity:.7;
}
header {
	width:100%;
	z-index:999;
	position:absolute;
	top:0;
	left:0;
}
header .wrap{
	width:100%;
	max-width:1100px;
	margin:0 auto;
	font-family: 'Lexend Peta', sans-serif;
	position: relative;
}
header .wrap ul:first-child{
	position: absolute;
	top:30px;
	left:47px;
}
header .wrap ul li{
	font-size: 11px;
	line-height: 1;
	float:left;
}
header .wrap ul:first-child li{
	padding: 0 8px;
	position: relative;
}
header .wrap ul:first-child li a{
	color:#231815;
	text-decoration: none;
	display:block;
}
header .wrap ul:first-child li a::after{
	margin-top: 2px;
	border-bottom: solid 2px #231815;
  bottom: 0;
  content: "";
  display: block;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  width: 0;
}
header .wrap ul:first-child li a:hover::after{
  width: 100%;
}
header .wrap ul:first-child li a.current::after{
  width: 100%;
}
/* header ul:first-child li.noline a::after{
  width: 0;
}
header ul:first-child li a:hover::after ~ header ul:first-child li.current a::after{
  width: 0;
} */

header .wrap ul:last-child{
	position: absolute;
	top:25px;
	right:11px;
}
header .wrap ul:last-child li{
	padding: 0 15px;
}
header .wrap ul:last-child li.insta a{
	margin-top: 8px;
	display:block;
	width:19px;
	height:19px;
	background:url(/marys_labo/img/header_insta.png)no-repeat;
	background-size:contain;
}
header .wrap ul:last-child li.insta a:hover{
	opacity:.7;
}
header .wrap ul:last-child li.store a {
    transition: .4s cubic-bezier(.165,.84,.44,1) 0s;
}
header .wrap .button{
overflow:hidden;
border-radius: 100vh;
border:2px solid #231815;
background: #231815;
}
header .wrap .button a {
  position: relative;
  display: block;
	padding: 10px 30px;
  color: #b0b0b0;
  background: #231815;
  text-align: center;
  text-decoration: none;
  transition: .3s;
	margin:-1px;
	font-size:10px;
	z-index:0;
}
header .wrap .button a span{
  color: #b0b0b0;
	position:relative;
	z-index:3;
}
header .wrap .button a:hover span {
  color: #231815;
}
@media screen and (min-width:1101px) {
header .wrap .button a::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: '';
	color:#231815;
  background: #fff;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
header .wrap .button a:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
}
header.is-fixed {
	position: fixed !important;
	position:absolute;
  top: 0;
  left: 0;
	color:#fff;
	background:#231815;
}
@media screen and (min-width:1101px) {
	header.is-fixed .wrap{
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		justify-content: center;
		align-items: center;
		padding: 15px 0;
	}
header.is-fixed ul:first-child,
header.is-fixed ul:last-child{
	position: relative;
	top:0;
	left:0;
	right:0;
}
}
header.is-fixed ul:first-child{
	margin-right:25px;
}
header.is-fixed ul:first-child li a{
	color:#fff;
}
header.is-fixed ul:first-child li a::after{
	margin-top: 2px;
	border-bottom: solid 2px #fff;
}
header.is-fixed ul:last-child li{
	padding: 0 10px;
}
header.is-fixed ul:last-child li:first-child{
	padding-top: 0;
}
header.is-fixed ul:last-child li.insta a{
	margin-top: 5px;
	background:url(/marys_labo/img/header_insta_w.png)no-repeat;
	background-size:contain;
}
header.is-fixed .wrap .button{
border:2px solid #231815;
background: #d5d0c3;
}
header.is-fixed .wrap .button a {
  color: #231815;
  background: #fff;
}
header.is-fixed .wrap .button a span{
  color: #231815;
}
header.is-fixed .wrap .button a:hover span {
  color: #231815;
}
header.is-fixed .wrap .button a::before {
	color:#231815;
  background: #d5d0c3;
}
#top main{
	text-align: center;
	background:#d5d0c3;
	padding: 30px 0 70px;
	position: relative;
}
#top main .ttl{
	text-align: left;
	padding: 135px 0 70px 570px;
	width:100%;
	max-width:1100px;
	margin:0 auto;
}
#top main .ttl p:first-child{
	font-size: 11px;
	font-family: 'Lexend Peta', sans-serif;
}
#top main .ttl p:nth-child(2){
	font-size: 48px;
	letter-spacing: -3px;
	font-family: 'Lexend Peta', sans-serif;
}
#top main .ttl p:nth-child(4){
	font-size: 20px;
	margin-top: 10px;
	letter-spacing:3px;
}
#top main .ttl #lottie{
	width:290px;
	height:76px;
}
#top main .sdb{
	position: relative;
}
#top main .sdb a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border-left: 1px solid #231815;
  border-bottom: 1px solid #231815;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  opacity: 0;
  box-sizing: border-box;
}
#top main .sdb a span:nth-of-type(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
#top main .sdb a span:nth-of-type(2) {
  top: 8px;
  -webkit-animation-delay: .15s;
  animation-delay: .15s;
}
#top main .sdb a span:nth-of-type(3) {
  top: 16px;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}
@-webkit-keyframes sdb {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
section h2{
	font-size: 45px;
	line-height: 1;
	font-family: 'Lexend Peta', sans-serif;
}
section h2 + p{
	font-size: 15px;
	padding: 15px 0 30px;
}
footer{
	color:#fff;
	background:#231815;
	padding: 40px 0 60px;
}
footer > div{
	max-width:905px;
	margin:0 auto;
	text-align: center;
	position: relative;
	font-size: 9px;
}
footer p.brand{
	padding-top: 15px;
}
footer p.copy{
	position: absolute;
	bottom:0;
	left:0;
}
footer img.logo{
	width:46px;
	height:auto;
}
footer ul{
	position: absolute;
	bottom:0;
	right:0;
}
footer ul li{
	float:left;
	line-height: 2;
	padding: 0 8px;
}
footer ul li a{
	color:#fff;
	text-decoration: none;
}
footer ul li:not(:last-child) a::after{
	margin-top: -1px;
	border-bottom: solid 1px #fff;
  bottom: 0;
  content: "";
  display: block;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  width: 0;
}
footer ul li a:hover::after{
  width: 100%;
}

/* top */
section.message{
	color:#fff;
	text-align: center;
	position: relative;
}
section.message h2 {
	padding-top: 70px;
}
section.message .txt{
	font-size: 18px;
	line-height: 2.77;
	padding: 90px 0 200px;
}
section.message div.bg{
	position: relative;
	background:url(/marys_labo/img/message_bg2.jpg)no-repeat;
	background-attachment:fixed;
	background-size:cover;
	padding-top: 50px;
}
@keyframes gradientAnimation {/*アニメーションで位置を移動させる*/
  0% {
    background-position: 0% 30%, 0 0;
  }
  50% {
    background-position: 100% 70%, 0 0;
  }
  100% {
    background-position: 0% 30%, 0 0;
  }
}
section.message div.bg > div{
	padding-top:20px;
}
section.message div.bg::before{
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 100px 100vw ;

  border-color: transparent transparent transparent #d5d0c3;
}
section.message div.bg::after{
  content:"";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 100px 100vw ;

  border-color: transparent transparent #f2f2f2 transparent;
}
section.message .imgs{
	max-width:1100px;
	margin:0 auto;
	position: relative;
}
section.message p img{
	width:100%;
	max-width:100%;
}
section.message .img1{
	position: absolute;
	top:200px;
	right:50%;
	margin-right:350px;
}
section.message .img2{
	position: absolute;
	top:620px;
	left:50%;
	margin-left: 190px;
	z-index:1;
}
section.message .img3{
	position: absolute;
	top:790px;
	right:50%;
	margin-right:130px;
	z-index:1;
}
section.product{
  margin-top:250px;
	padding-top:100px;
}
section.product .wrap{
	background:#e6e5e0;
	position: relative;
	padding: 47px 145px;
	background:url(/marys_labo/img/product_bg.jpg)no-repeat bottom center;
	background-size:100% auto;
	max-width:1100px;
	height:586px;
	margin:0 auto;
}
section.product h2,
section.product h2 + p{
	max-width:945px;
	margin:0 auto 0;
	text-align: right;
}
section.product .wrap h3{
	font-size: 32px;
}
section.product .wrap h3 span{
	position: relative;
  z-index: 1;
}
section.product .wrap h3 span::after{
	content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background: #231815;
  z-index: -1;
  transition: all 1.2s;
}
section.product .wrap h3 span.active::after{
  width: 100%;
}
section.product .wrap .date{
	font-size: 10px;
}
section.product .wrap h4{
	font-size: 21px;
}
section.product .wrap .txt{
	font-size: 11px;
	margin-top: 8px;
}
section.product .wrap .txt span.red{
	color:#A52A2A;
}
section.product .wrap .btn{
	display:inline-block;
	border:1px solid #666;
	position: relative;
}
section.product .wrap .btn::before{
	content:'';
	position: absolute;
	width: 100%;
	height: 100%;
	top:5px;
	left:5px;
	border-right:1px solid #666;
	border-bottom:1px solid #666;
}
section.product article{
	margin-top: 40px;
}
.cmnbtn {
    text-align: center;
		display:inline-block;
		border:1px solid #666;
		position: relative;
		margin-top: 18px;
}
.cmnbtn::before{
	content:'';
	position: absolute;
	width: 100%;
	height: 100%;
	top:5px;
	left:5px;
	border-right:1px solid #666;
	border-bottom:1px solid #666;
}
.cmnbtn a {
    display: block;
    width: 280px;
    height: 60px;
    line-height: 60px;
    border: 1px solid #ccc;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: .075em;
    position: relative;
    -webkit-transition-property: color border;
    transition-property: color border;
    -webkit-transition-duration: .25s;
    transition-duration: .25s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    overflow: hidden;
		color:#231815;
}
.cmnbtn_string {
    display: inline-block;
    -webkit-transition-property: color transform;
    transition-property: color transform;
    -webkit-transition-duration: .45s;
    transition-duration: .45s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    transform: translateX(0);
    position: relative;
}
.cmnbtn_string, .header_overlay {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
}
.cmnbtn_string, .footer_pagetop a:after {
    -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
}
.cmnbtn_string.ls-s{
	letter-spacing: -0.5px;
}
.cmnbtn_arrow {
    display: inline-block;
		width:50px;
		height:5px;
    overflow: hidden;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.cmnbtn_arrow:after {
    content: '';
		width:50px;
		height:5px;
		background:url(/marys_labo/img/cmnbtn_arrow.png)no-repeat;
		background-size:contain;
    position: relative;
    top: 0;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    display: block;
}
@media screen and (min-width:1101px) {
	.cmnbtn a:hover .cmnbtn_arrow:after{
		background:url(/marys_labo/img/cmnbtn_arrow_w.png)no-repeat;
		-webkit-animation-name:arrowInOut;
		animation-name:arrowInOut;
	}

	@-webkit-keyframes arrowInOut{
		0%,100%{
			-webkit-transform:translate(0,0);
			transform:translate(0,0)
		}
		50%,60%{
			-webkit-transform:translate(20px,0);
			transform:translate(20px,0)
		}
		61%{
			opacity:0;-webkit-transform:translate(-20px,0);
			transform:translate(-20px,0)
		}
		62%{
			opacity:1;-webkit-transform:translate(-20px,0);
			transform:translate(-20px,0)
		}
	}
	.cmnbtn a:hover{
		background:#231815;
		color:#fff;
	}
	.cmnbtn a:hover{
		background:#231815;
		color:#fff;
	}
}
section.topics{
	max-width:905px;
	margin:50px auto 0;
	padding-top: 100px;
}
section.topics ul{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin:0 -7.5px;
}
section.topics ul li{
	margin: 0 7.5px 40px;
	width:290px;
}
section.topics ul li img{
	width:100%;
}
section.topics ul li a{
	display:block;
	color:#231815;
	text-decoration: none;
}
section.topics ul li a:hover{
	opacity:.7;
}
section.topics .date{
	font-size: 10px;
}
section.topics h4{
	font-size: 21px;
	line-height: 1.2;
	text-align: left;
	margin-bottom: 5px;
}
section.topics h4.ls-s{
	letter-spacing:-1px;
}
section.topics h4 span.ls-s2{
	letter-spacing:-4px;
}
section.topics .txt{
	font-size: 11px;
}
section.topics .btnArea{
/*	margin-top: 40px;*/
	text-align: center;
}
section.instagram{
	margin-top: 140px;
}
section.instagram h2,
section.instagram h2 + p{
	max-width:905px;
	margin-left:auto;
	margin-right:auto;
	text-align: right;
}
@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-250px * 7));
            transform: translateX(calc(-250px * 7));
  }
}

@keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-250px * 7));
            transform: translateX(calc(-250px * 7));
  }
}
section.instagram #slider{
  overflow:hidden;
}
section.instagram #slider .slick-list {
  margin-right: -10px;
}
section.instagram #slider .slick-slide {
  margin-right: 10px;
}
section.instagram #slider :focus {
	outline:0;
}
section.instagram .slider {
  height: 240px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}
/* .slider::before, .slider::after {
  background: -webkit-gradient(linear, left top, right top, from(white), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
} */
section.instagram .slider::after {
  right: 0;
  top: 0;
  -webkit-transform: rotateZ(180deg);
          transform: rotateZ(180deg);
}
section.instagram .slider::before {
  left: 0;
  top: 0;
}
section.instagram .slider .slide-track {
  -webkit-animation: scroll 40s linear infinite;
          animation: scroll 40s linear infinite;
  display: -webkit-box;
  display: flex;
  width: calc(250px * 12);
}
section.instagram .slider .slide {
  height: 240px;
  width: 250px;
}
section.all_prod{
	margin-top: 150px;
	border-top: 1px solid #adadad;
	padding-bottom: 95px;
}
section.all_prod h2{
	font-size: 14px;
	line-height: 1;
	padding: 40px 0;
	text-align: center;
	font-family: a-otf-ryumin-pr6n, serif;
}
section.all_prod ul{
	max-width:905px;
	margin:0 auto;
}
section.all_prod ul li{
	border:1px solid #666;
	padding: 10px;
	width:49%;
}
section.all_prod ul li a{
	display:block;
	height:100%;
	color:#231815;
	text-decoration: none;
}
section.all_prod ul li:hover{
	opacity: .7;
}
section.all_prod ul li a:hover{
	color:#231815;
	text-decoration: none;
}
section.all_prod ul li:first-child a{
	padding: 10px;
	background:url(/marys_labo/img/all_prod_bg1.jpg)right center no-repeat;
	background-size:auto 100%;
}
section.all_prod ul li:last-child a{
	padding: 10px;
	background:url(/marys_labo/img/all_prod_bg2.png)right 17px center no-repeat;
}
section.all_prod ul li .ttl{
	font-size: 18px;
}
section.all_prod ul li .txt{
	font-size: 9px;
	padding-top: 8px;
	letter-spacing:-1px;
}
/* .start {
	background: #d5d0c3;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
	align-items: center;
	display:flex;
	justify-content: center;
}
.start p {

} */
.start {
	background: #d5d0c3;
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	z-index: 9000;
	align-items: center;
	display:flex;
	justify-content: center;
}
.start p {
	/* display: none; */
	z-index: 9999;
}
.start p img{
	width:110px;
	height:auto;
}
@media screen and (min-width:1101px) {
	.l-drawer{display:none;}
}
@media screen and (max-width:1100px) {
	header .wrap ul:first-child{
		display:none;
	}
	header.is-fixed{
		height:60px;
	}
	header.is-fixed .wrap{
		display:block;
		position: relative;
	}
	header.is-fixed ul:last-child li {
    padding: 0;
	}
	header .wrap ul:last-child {
			position: absolute;
			top: 15px;
			right: 4vw;
	}
	header .wrap ul:last-child li {
			padding: 0 8px;
	}
	.l-drawer {
		position: relative;
	}
	.l-drawer__checkbox {
		display: none;
	}
	.l-drawer__icon {
		cursor: pointer;
		display: block;
		width: 11.2vw;
		height: 60px;
		position: fixed;
		top:0;
		left: 6vw;
	}
	.l-drawer__icon-parts:before, .l-drawer__icon-parts:after {
		background-color: #000;
		display: block;
		width: 11.2vw;
		height: 0.4vw;
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		margin: auto;
	}
	header.is-fixed .l-drawer__icon-parts:before, header.is-fixed .l-drawer__icon-parts:after {
		background-color: #fff;
	}
	.l-drawer__icon-parts:before, .l-drawer__icon-parts:after {
		content: " ";
	}
	.l-drawer__icon-parts:before {
		top: 15px;
	}
	.l-drawer__icon-parts:after {
		top: -15px;
	}
	.l-drawer__overlay {
		background: #000;
		opacity: 0;
		pointer-events: none;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		right: 0;
	}
	.l-drawer__menu {
		background: #231815;
		color: #fff;
		max-width: 50%;
		width: 50%;
		height: 100vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		position: fixed;
		top: 0;
		left: -50%;
	}
	.l-drawer__menu ul:first-child{
		padding: 15vw 6vw 0;
	}
	.l-drawer__menu ul:last-child{
		padding: 0 6vw 6vw;
	}
	.l-drawer__menu ul li{
		margin-bottom: 4vw;
	}
	.l-drawer__menu li a{
		color:#fff;
		font-size:2.667vw;
		text-decoration: none;
		font-family: 'Lexend Peta', sans-serif;
	}
	.l-drawer__icon {
		z-index: 4;
	}
	.l-drawer__menu {
		z-index: 3;
	}
	.l-drawer__overlay {
		z-index: 2;
	}
	.l-drawer__checkbox:checked ~ .l-drawer__icon .l-drawer__icon-parts:before {
		-webkit-transform: rotate(-25deg);
		transform: rotate(-25deg);
		top: 0;
			background: #fff;
	}
	.l-drawer__checkbox:checked ~ .l-drawer__icon .l-drawer__icon-parts:after {
		-webkit-transform: rotate(25deg);
		transform: rotate(25deg);
		top: 0;
		background: #fff;
	}
	.l-drawer__checkbox:checked ~ .l-drawer__overlay {
		opacity: 0.3;
		pointer-events: auto;
	}
	.l-drawer__checkbox:checked ~ .l-drawer__menu {
		left: 0;
	}
	.l-drawer__icon-parts, .l-drawer__icon-parts:after, .l-drawer__icon-parts:before, .l-drawer__overlay, .l-drawer__menu {
		-webkit-transition: all 0.7s;
		transition: all 0.7s;
	}
	.l-drawer__menu ul li{
		display:block;
	}
	header .l-drawer__menu ul:last-child li.insta a{
		margin-top: 8px;
		display:block;
		width:3.733vw;
		height:3.733vw;
		background:url(/marys_labo/img/header_insta_w.png)no-repeat;
		background-size:contain;
	}
	header .l-drawer__menu ul:last-child li.store a {
		display: block;
		border-radius: 100vh;
		padding: 10px 0;
		color: #231815;
		background: #fff;
		text-align: center;
		text-decoration: none;
		font-size:2.2vw;
	}
	#top main .ttl{
		padding: 12.273vw 0 6.364vw 51.818vw;
		width:100%;
	}
	#top main .ttl p:first-child{
		font-size: 1vw;
		font-family: 'Lexend Peta', sans-serif;
	}
	#top main .ttl p:nth-child(2){
		font-size: 4.364vw;
		letter-spacing: -0.273vw;
		font-family: 'Lexend Peta', sans-serif;
	}
	#top main .ttl p:nth-child(4){
		font-size: 1.818vw;
	}
	section h2{
	font-size: 4.091vw;
	line-height: 1;
	font-family: 'Lexend Peta', sans-serif;
	}
	section h2 + p{
		font-size: 1.364vw;
		padding: 1.364vw 0 2.727vw;
	}
	section.message h2 {
		padding-top: 6.364vw;
	}
	section.message div.bg{
		padding-top: 4.545vw;
		background-attachment:scroll;
	}
	section.message div.bg > div{
		padding-top:4vw;
	}
	section.message .txt {
    font-size: 1.636vw;
    line-height: 2.77;
    padding: 8.182vw 0 18.182vw;
		text-shadow: 0 0 7px #000;
	}
	section.message .img1{
	position: absolute;
	top:16vw;
	right:50%;
	margin-right:31.818vw;
	}
	section.message .img2{
		width:26.364vw;
		position: absolute;
		top:57vw;
		left:50%;
		margin-left: 17.273vw;
		z-index:1;
	}
	section.message .img3{
		width:24.455vw;
		position: absolute;
		top:75vw;
		right:50%;
		margin-right:11.818vw;
		z-index:1;
	}
	section.product {
    margin-top: 22.727vw;
    padding-top: 9.091vw;
	}
	section.product h2,
	section.product h2 + p {
		padding-right: 20px;
	}
	section.product .wrap{
	background:#e6e5e0;
	position: relative;
	padding: 4.273vw 13.182vw;
	background:url(/marys_labo/img/product_bg.jpg)no-repeat bottom center;
	background-size:100% auto;
	margin:0 auto;
	}
	section.product .wrap h4 {
    font-size: 1.9vw;
	}
	section.topics {
    max-width: 82.273vw;
    padding-top: 9.091vw;
	}
	section.topics h4{
    font-size: 1.9vw;
	}
	section.topics,
	section.all_prod{
		padding-left:20px;
		padding-right:20px;
	}
	section.instagram {
	    margin-top:12.727vw;;
	}
	section.instagram h2,
	section.instagram h2 + p {
		padding-right: 20px;
	}
	section.all_prod ul li {
	    padding: 1.333vw;
	}
	section.all_prod ul li:first-child a{
		background-size:40% auto;
	}
	section.all_prod ul li:last-child a{
		background-size:30% auto;
	}
	.cmnbtn a{
		width:28vw;
	}
	footer p.brand{
		padding-bottom: 40px;
	}
	footer {
    color: #fff;
    background: #231815;
    padding: 3.636vw 20px;
	}
}
@media screen and (max-width:767px) {
	#top main {
    text-align: center;
    background: #d5d0c3;
    padding: 17vw 0 22vw;
    position: relative;
	}
	main p.logo img {
    width:20vw;
	}
	#top main .ttl {
	    padding: 21vw 6.933vw 20vw;
	    width: 100%;
	}
	#top main .ttl p:first-child{
	font-size: 2vw;
	font-family: 'Lexend Peta', sans-serif;
	}
	#top main .ttl p:nth-child(2){
		font-size: 9vw;
		font-family: 'Lexend Peta', sans-serif;
	}
	#top main .ttl p:nth-child(4){
		font-size: 3.867vw;
	}
	#top main .ttl #lottie {
    width: 54.933vw;
    height: 14.4vw;
	}
	section h2 {
    font-size: 8.667vw;
		text-align: center !important;
		padding-right: 0 !important;
	}
	section h2 + p {
    font-size: 2.667vw;
		text-align: center !important;
		padding-right: 0 !important;
	}
	section.message div.bg {
    padding-top: 0;
		background:url(/marys_labo/img/message_bg_sp.jpg)no-repeat;
		background-size:100% auto;
	}
	section.message div.bg::before {
    border-width: 0 0 50px 100vw;
	}
	section.message div.bg::after {
    border-width: 0 0 50px 100vw;
	}
	section.message div.bg > div {
    padding-top: 6vw;
    padding-bottom: 20vw;
	}
	section.message .txt {
    font-size: 3.5vw;
    padding: 5.5vw 0 18.182vw;
	}
	section.message h2 {
		padding-top: 14vw;
	}
	section.message .img1{
		width:26.667vw;
	position: absolute;
	top:70%;
	left:0;
	z-index:1;
	}
	section.message .img2{
		width:38.667vw;
		position: absolute;
		top:85%;
		right:5%;
		margin-left: 0;
		z-index:1;
	}
	section.message .img3{
		width:36vw;
		position: absolute;
		top:auto;
		bottom:-50vw;
		left:20%;
		z-index:1;
	}
	section.product {
    margin-top: 50vw;
    padding-top: 15vw;
	}
	section.product .wrap {
			width:85.666%;
	    position: relative;
	    padding: 4.273vw 7.7vw 80vw;
	    background:#e6e5e0 url(/marys_labo/img/product_bg_sp.jpg)no-repeat bottom center;
	    background-size: 100% auto;
	    margin: 5vw auto 0;
			height:auto;
	}
	section.product article {
    margin-top: 5.333vw;
	}
	section.product .wrap h4 {
    font-size: 4vw;
	}
	section.product .wrap .txt{
    font-size: 2.5vw;
	}
	section.product .cmnbtn a {
    width: 55vw;
		height:12vw;
		line-height:12vw;
		font-size: 3.5vw;
	}
	section.topics {
		margin-top: -4vw;
		padding-top: 16vw;
	}
	section.topics ul{
		margin:5.333vw 7.333vw 0;
	}
	section.topics ul.flex li{
		width: 100%;
		margin-bottom: 5.333vw;
	}
	section.topics .date {
    margin-top: 4vw;
	}
	section.topics h4 {
    font-size: 4vw;
	}
	section.topics h4 span.ls-s2 {
    letter-spacing: -1px;
	}
	section.topics .cmnbtn a{
		width:56.666vw;
	}
	section.topics, section.all_prod{
		padding-left: 0;
    padding-right: 0;
	}
	section.instagram #slider{
		margin-top: 5vw;
	}
	section.instagram .slider {
    height: 32vw;
	}
	section.instagram .slider .slide-track {
    -webkit-animation: scroll 40s linear infinite;
    animation: scroll 40s linear infinite;
    display: -webkit-box;
    display: flex;
    width: calc(32vw * 12);
	}
	section.instagram .slider .slide{
		height:calc(32vw + 10px);
		width:32vw;
	}
	section.all_prod{
		margin-top: 12vw;
		padding-bottom: 12vw;
	}
	section.all_prod h2{
		padding: 4vw 0;
	}
	section.all_prod ul.flex{
		display:block;
		margin:0 7.333vw;
	}
	section.all_prod ul.flex li{
		width:100%;
		margin-bottom: 2.267vw;
	}
	section.all_prod ul li .txt{
		padding-top: 3px;
	}
	footer img.logo{
		width:12vw;
	}
	footer p.copy{
		width:100%;
		position: relative;
		display:block;
		text-align: center;
	}
	footer ul{
		display:none;
	}
}
/* topics */
#topics main{
	text-align: center;
	background:#d5d0c3;
	padding: 30px 0 280px;
	position: relative;
	background:url(/marys_labo/img/topics_main.jpg)no-repeat bottom center;
	background-size:cover;
	text-align: center;
}
#topics main h1{
	font-size:45px;
	padding-top: 130px;
	font-family: 'Lexend Peta', sans-serif;
}
#topics main h1 + p{
	font-size:15px;
	padding-top: 8px;
}
#topics section.topics{
	max-width:905px;
	margin:60px auto 0;
}
#topics section.topics .filtering {
	list-style: none;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-bottom: 10px;
	margin-bottom: 25px;
	border-bottom:1px solid #231815;
}
#topics section.topics .filtering li{
	margin:0;
	width:auto;
}
#topics section.topics .filtering li + li {
	margin: 0 0 0 15px;
}

#topics section.topics .filtering span {
	cursor: pointer;
}

#topics section.topics .filtering span.active {
	font-family:toppan-bunkyu-midashi-min-st, serif;
	font-weight: 900;
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, #topics section.topics .filtering span.active {
		font-family: a-otf-ryumin-pr6n, serif;
  }
}
#topics section.topics ul.flex{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin:0 -7.5px;
}
#topics section.topics ul.flex li{
      margin: 0 7.5px 40px;
			width:290px;
}
#topics section.all_prod{
	margin-top: 50px;
}
@media screen and (max-width:1100px) {
	section.topics {
    max-width: 82.273vw;
	}
	#topics section.topics ul.flex li {
	    margin: 0 7.5px 40px;
	    width: 31%;
	}
}
@media screen and (max-width:767px) {
	#topics main {
		background: url(/marys_labo/img/topics_main_sp.jpg)no-repeat;
		background-size:cover;
		padding: 17vw 0 20vw;
	}
	#topics main h1 {
	    font-size: 8.667vw;
	    padding-top: 12vw;
	}
	#topics main h1 + p {
    font-size: 2.667vw;
		padding-top: 3px;
	}
	#topics section.topics{
		padding:0 5vw;
	}
	#topics section.topics ul.flex {
		margin: 5.333vw 7.333vw 0;
	}
	#topics section.topics ul.flex li {
	    margin: 0 0 40px;
	    width: 100%;
	}
}
/* column */
#column main{
	text-align: center;
	background:#d5d0c3;
	padding: 30px 0 300px;
	position: relative;
	background:url(/marys_labo/img/column_main.jpg)no-repeat;
	background-size:cover;
	text-align: center;
}
#column main p + p{
	font-size:9px;
	padding-top: 120px;
}
#column main h1{
	font-size:32px;
	padding-top: 5px;
}
#column section.column1{
	max-width:1100px;
	margin:0 auto;
}
#column section.column1 ul.column1{
	margin-bottom: 70px;
}
#column section.column1 ul.column1 li{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
}
@media screen and (min-width:768px) {
	#column main br.sp{
		display:none;
	}
	#column section.column1 ul.column1 li:nth-child(even){
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		-ms-flex-direction: row-reverse;
		flex-direction: row-reverse;
	}
}
#column section.column1 ul.column1 li > div{
	width:50%;
	min-height:470px;
	color:#fff;
}
#column section.column1 ul.column1 li:first-child > div:first-child{
	background:url(/marys_labo/img/column1_01_img.jpg)no-repeat;
	background-size:cover;
}
#column section.column1 ul.column1 li:first-child > div:last-child{
	background:#658685;
	padding: 65px 128px 0;
}
#column section.column1 ul.column1 li:first-child div:last-child h3{
	margin-bottom: 0;
	margin-top: 10px;
	padding-left: 14px;
}
#column section.column1 ul.column1 li:first-child div:last-child p{
	font-size: 11px;
	padding: 5px 0 0 14px;
}
#column ul.column1 .cmnbtn,
#column ul.column1 .cmnbtn::before{
	display:block;
	width:100%;
	border-color:#fff;
}
#column ul.column1 .cmnbtn a{
	width:100%;
	border:none;
	color:#fff;
}
#column ul.column1 .cmnbtn_arrow:after {
    background: url(/marys_labo/img/cmnbtn_arrow_w.png)no-repeat;
}
@media screen and (min-width:1101px) {
	#column ul.column1 .cmnbtn a:hover .cmnbtn_arrow:after{
		background:url(/marys_labo/img/cmnbtn_arrow_g.png)no-repeat;
	}
	#column ul.column1 .cmnbtn a:hover{
		background:#fff;
		color:#658685;
	}
}
#column section.column1 ul.column1 li:nth-child(2) > div:first-child{
	background:url(/marys_labo/img/column1_02_img.jpg)no-repeat;
	background-size:cover;
	position: relative;
}
#column section.column1 ul.column1 li:nth-child(2) > div:last-child{
	background:#8e645e;
	padding: 75px 90px 0;
}
#column section.column1 ul.column1 li:nth-child(3) > div:first-child{
	background:url(/marys_labo/img/column1_03_img.jpg)no-repeat right;
	background-size:cover;
	position: relative;
}
#column section.column1 ul.column1 li:nth-child(3) > div:last-child{
	background:#cda183;
	padding: 75px 90px 0;
}
#column section.column1 ul.column1 li:nth-child(4) > div:first-child{
	background:url(/marys_labo/img/column1_04_img.jpg)no-repeat;
	background-size:cover;
	position: relative;
}
#column section.column1 ul.column1 li:nth-child(4) > div:last-child{
	background:#dbada6;
	padding: 75px 90px 0;
}
#column section.column1 ul.column1 h3{
	font-size: 21px;
	line-height: 1.5;
	margin-bottom: 15px;
}
#column section.column1 ul.column1 .txt{
	font-size: 13px;
	line-height: 2;
}
#column section.column1 ul.column1 span.bold{
	font-family:toppan-bunkyu-midashi-min-st, serif;
	font-weight: 900;
}
#column section.column1 ul.column1 span.line{
	border-bottom:2px solid #fff;
}
#column section.column1 ul.column1 .prof{
	position:absolute;
	bottom:10px;
	left:95px;
	text-align: left;
	font-size: 10px;
	line-height: 1.5;
}
#column section.column1 ul.column1 .name{
	font-size: 18px;
	line-height: 1;
	margin-bottom: 10px;
}
#column section.column1 ul.column1 .name span{
	font-size: 60%;
}
#column section.column1 ul.flex{
	max-width:905px;
	margin:50px auto 0;
}
#column section.column1 ul.flex li:first-child{
	width:50%;
	font-size: 10px;
	line-height: 1.5;
	padding-top: 25px;
	padding-left: 55px;
}
#column section.column1 ul.flex p:nth-child(2){
	font-size: 21px;
	margin-bottom: 12px;
}
#column section.column1 ul.flex p:nth-child(3){
	font-size: 11px;
	margin-bottom: 10px;
}
#column section.column1 ul.flex li:last-child{
	padding-left: 45px;
}
#column section.column1 ul.flex a{
	color:#231815;
	text-decoration: none;
}
#column section.column1 ul.flex a:hover{
	opacity:.7;
}
@media screen and (max-width:1100px) {
	#column main {
    padding: 30px 0 27.273vw;
	}
	#column main p + p {
    padding-top: 10vw;
	}
	#column section.column1 ul.column1 li > div{
		min-height:auto;
	}
	#column section.column1 ul.column1 li:first-child > div:last-child{
		background:#658685;
		padding: 4.545vw 10vw;
	}
	#column section.column1 ul.column1 li:nth-child(2) > div:last-child,
	#column section.column1 ul.column1 li:nth-child(3) > div:last-child,
	#column section.column1 ul.column1 li:nth-child(4) > div:last-child{
		padding: 6.818vw 5.455vw;
	}
	#column section.column1 ul.column1 .prof{
		left:6vw;
	}
	#column section.column1 br.pc{
		display:none;
	}
	#column section.column1 ul.flex {
		max-width:100%;
    margin: 4.545vw 3.333vw 0;
	}
	#column section.column1 ul.flex li:first-child {
    width: 49%;
    padding-top: 2.273vw;
    padding-left: 0;
	}
	#column section.column1 ul.flex li:last-child {
    width: 48%;
	  padding-left: 0;
	}
	#column section.column1 ul.flex li:last-child img{
		width:100%;
	}
	section.all_prod {
    margin-top: 10vw;
}
}
@media screen and (max-width:767px) {
	#column main {
		background: url(/marys_labo/img/column_main_sp.jpg)no-repeat;
		background-size:cover;
		padding: 17vw 0;
	}
	#column section.column1 ul.column1 {
    margin-bottom: 9vw;
	}
	#column section.column1 ul.column1 li{
		display:block;
	}
	#column section.column1 ul.column1 li > div{
		width:100%;
		min-height:100vw;
		background-size:cover;
	}
	#column section.column1 ul.column1 li:first-child > div:last-child {
    padding: 7vw 11vw 9vw;
	}
	#column section.column1 ul.column1 li:first-child div:last-child h3,
	#column section.column1 ul.column1 li:first-child div:last-child p{
		padding-left: 0;
	}
	#column section.column1 ul.column1 li:nth-child(2) > div:first-child{
		background:url(/marys_labo/img/column1_02_img_sp.jpg)no-repeat;
		background-size: cover;
	}
	#column section.column1 ul.column1 li:nth-child(3) > div:first-child{
		background:url(/marys_labo/img/column1_03_img_sp.jpg)no-repeat;
		background-size: cover;
	}
	#column section.column1 ul.column1 .prof {
    left: 0;
		padding:0 3vw;
		text-shadow:0 0 7px #333;
	}
	#column section.column1 ul.column1 .prof{
	font-size: 2.667vw;
	}
	#column section.column1 ul.column1 .name{
		font-size: 4.8vw;
	}
	#column section.column1 ul.column1 h3 {
	  font-size: 5vw;
	}
	#column section.column1 ul.column1 .txt {
	  font-size: 3.5vw;
	}
	#column section.column1 ul.flex{
			margin-top: 5vw;
	}
	#column section.column1 ul.flex li{
		padding:5vw 7.333vw 0 !important;
		width:100% !important;
	}
	#column section.column1 ul.flex li:last-child{
		width:100%;
		padding-left: 0;
	}
	#column section.column1 ul.flex li:first-child{
	font-size: 2.667vw;
	}
	#column section.column1 ul.flex p:nth-child(2){
		font-size: 5.6vw;
	}
	#column section.column1 ul.flex p:nth-child(3){
		font-size: 2.933vw;
	}
}

/* column001 */
#column main.column001{
	background:url(/marys_labo/img/column001_main.jpg)no-repeat bottom center;
	background-size:cover;
}
#column main.column001 h1 + p {
		font-size: 16px;
		line-height: 2;
		margin-top: 20px;
}
@media screen and (min-width:1100px) {
	#column section.column001 ul.column1 li:first-child > div:last-child,
	#column section.column001 ul.column1 li:nth-child(2) > div:last-child,
	#column section.column001 ul.column1 li:nth-child(3) > div:last-child,
	#column section.column001 ul.column1 li:nth-child(4) > div:last-child{
		padding: 70px 90px 0;
	}
	#column section.column001 ul.column1 li:nth-child(4) > div:last-child .txt{
		margin-right:-20px;
	}
}
#column section.column001 ul.column1 h3 {
    font-size: 24px;
}
#column section.column001 ul.column1 .txt {
    font-size: 18px;
    line-height: 1.8;
}
#column section.column001 ul.column1 .txt .choco a {
	color:#fff;
   text-decoration:underline;
}
#column section.column001 ul.column1 .txt .choco a:hover {
	opacity: .7;
}
#column section.column001 ul.column1 .txt .ls-s {
    letter-spacing: -1px;
}
#column section.column001 ul.column1 li:first-child div:last-child h3 {
    margin-bottom: 15px;
    margin-top: 0;
    padding-left: 0;
}
#column section.column001 ul.column1 li:first-child div:last-child p {
    font-size: 18px;
		line-height: 1.8;
    padding: 0;
}
#column section.column001 ul.column1 li:first-child > div:last-child {
    background: #c4ab6d;
}
#column section.column001 ul.column1 li:nth-child(2) > div:last-child {
    background: #94819a;
}
#column section.column001 ul.column1 li:nth-child(3) > div:last-child {
    background: #9fb1ac;
}
#column section.column001 ul.column1 li:nth-child(4) > div:last-child {
    background: #cc9273;
}
#column section.column001 ul.column1 li:first-child > div:first-child{
	background:url(/marys_labo/img/column001_01_img.jpg)no-repeat bottom right;
	background-size:cover;
}
#column section.column001 ul.column1 li:nth-child(2) > div:first-child{
	background:url(/marys_labo/img/column001_02_img.jpg)no-repeat bottom right;
	background-size:cover;
}
#column section.column001 ul.column1 li:nth-child(3) > div:first-child{
	background:url(/marys_labo/img/column001_03_img.jpg)no-repeat bottom;
	background-size:cover;
}
#column section.column001 ul.column1 li:nth-child(4) > div:first-child{
	background:url(/marys_labo/img/column001_04_img.jpg)no-repeat bottom;
	background-size:cover;
}
@media screen and (max-width: 1100px){
	#column main.column001 h1 {
	    font-size: 7vw;
	}
	#column main.column001 h1 + p {
	    font-size: 3vw;
			margin-top: 4vw;
	}
	#column section.column001 ul.column1 li:first-child > div:last-child {
	    padding: 6.818vw 5.455vw;
	}
	#column section.column001 ul.column1 h3 {
	    font-size: 6vw;
	}
	#column section.column001 ul.column1 .txt {
	    font-size: 4vw;
	}
	#column section.column001 ul.column1 li:first-child div:last-child p {
	    font-size: 4vw;
	}
}
@media screen and (max-width: 767px){
	#column section.column001 ul.column1 li > div {
    min-height: 80vw;
	}
}

/* 201022 */
#column main.column001{
	height:690px;
}
#column main.column001 h1 + p {
	text-shadow:
		1px 1px 10px rgb(255,255,255,.5),
		-1px 1px 10px rgb(255,255,255,.5),
		1px -1px 10px rgb(255,255,255,.5),
		-1px -1px 10px rgb(255,255,255,.5);
}
@media screen and (max-width:1100px) {
	#column main.column001{
		height:62.727vw;
		font-size: 1.5vw;
	}
	#column main.column001 p + p{
		font-size:0.818vw;
		padding-top: 10.909vw;
	}
	#column main.column001 h1{
		font-size:2.909vw;
		padding-top: 0.455vw;
	}
	#column main.column001 h1 + p {
			font-size: 1.455vw;
			margin-top: 1.818vw;
	}
	#column section.column001 ul.column1 h3 {
	    font-size: 2.182vw;
	}
	#column section.column001 ul.column1 .txt {
	    font-size: 1.636vw;
	}
	#column section.column001 ul.column1 li:first-child div:last-child h3 {
	    margin-bottom: 1.364vw;
	}
	#column section.column001 ul.column1 li:first-child div:last-child p {
	    font-size: 1.636vw;
	}
}
@media screen and (max-width:1100px) and (min-width:768px) {
	#column main.column001 .logo img{
		width:9vw;
	}
}
@media screen and (max-width:767px) {
	#column main.column001{
		height:auto;
	}
	#column main.column001 h1 {
			font-size: 7vw;
	}
	#column main.column001 h1 + p {
			font-size: 3vw;
			margin-top: 4vw;
	}
	#column section.column001 ul.column1 li:first-child > div:last-child {
			padding: 6.818vw 5.455vw;
	}
	#column section.column001 ul.column1 h3 {
			font-size: 6vw;
	}
	#column section.column001 ul.column1 .txt {
			font-size: 4vw;
	}
	#column section.column001 ul.column1 li:first-child div:last-child p {
			font-size: 4vw;
	}
}