/* Reset margin, padding, border
 * *********************************** */

html, body,
h1, h2, h3, h4, h5, h6,
a, p, span,
em, small, strong,
sub, sup,
mark, del, ins, strike,
abbr, dfn,
blockquote, q, cite,
code, pre,
ol, ul, li, dl, dt, dd,
div, section, article,
main, aside, nav,
header, hgroup, footer,
img, figure, figcaption,
address, time,
audio, video,
canvas, iframe,
details, summary,
fieldset, form, label, legend,
table, caption,
tbody, tfoot, thead,
tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Typography
 * *********************************** */
@font-face {
    font-family: "Yu Gothic";
    src: local("Yu Gothic Medium");
    font-weight: 100;
}
@font-face {
    font-family: "Yu Gothic";
    src: local("Yu Gothic Medium");
    font-weight: 200;
}
@font-face {
    font-family: "Yu Gothic";
    src: local("Yu Gothic Medium");
    font-weight: 300;
}
@font-face {
    font-family: "Yu Gothic";
    src: local("Yu Gothic Medium");
    font-weight: 400;
}
@font-face {
    font-family: "Yu Gothic";
    src: local("Yu Gothic Bold");
    font-weight: bold;
}
@font-face {
    font-family: "Helvetica Neue";
    src: local("Helvetica Neue Regular");
    font-weight: 100;
}
@font-face {
    font-family: "Helvetica Neue";
    src: local("Helvetica Neue Regular");
    font-weight: 200;
}

* {
    font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,serif;
    font-size: inherit;
    line-height: inherit;
	letter-spacing: .1rem;
}
html {
    font-size: 62.5%;
}
body {
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 2.3rem;
}
p{
	color: #5b534d;
font-weight: 400;
}
/*tab*/
@media (max-width: 1023px) {

}


/*sp*/
@media (max-width:767px) {
body {
    font-size: 12px;
    font-size: 1.2rem;
}
}


a,
a:visited {
    color: inherit;
	text-decoration: none;
  display: inline-block;
}


/* Layout
 * *********************************** */

article,
aside,
footer,
header,
nav,
section,
main {
    display: block;
}

* {
    box-sizing: border-box;
}

*:before,
*:after {
    box-sizing: inherit;
}

/* Elements
 * *********************************** */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

ol,
ul {
    list-style: none;
}

img,
video {
    max-width: 100%;
}

img {
    border-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: "";
    content: none;
}

/* Attributes & states
 * *********************************** */

[hidden] {
    display: none !important;
}

[disabled] {
    cursor: not-allowed;
}

:focus:not(:focus-visible) {
    outline: none;
}


/* reset form
 * *********************************** */
button,
input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
}

textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    resize: none;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    background: transparent;
}
input[type="checkbox"] {
    display: none;
}
input[type="checkbox"]:checked + label {
    background: #ff0000;
}
input[type="text"] {
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    outline: none;
    background: none;
}
input[type="email"] {
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    outline: none;
    background: none;
}

header{
	height:90rem;
	background-image: url("img/top.jpg");
	background-position: center right;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}
header img{
	width: 100%;
}
header h1{
	position: absolute;
	top:8%;
	left: 6%;
}
header h1 img{
	width: 63rem;
}

header a{
	position: absolute;
	-webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
	bottom:2.4rem;
	left: 50%;
}
header a img{
	width: 110px;
}
@media (max-width:767px) {
header{
	height:40rem;
	background-image: url("img/top_sp.jpg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
	header h1 {
    position: relative;
    padding: 6%;
		top:0;
		left: 0;
}
	header h1 img{
	width: 88%;
}
	header a img{
	width: 8rem;
}
}

section{
	padding: 7.2rem 1rem;
}

#profile {
    background-image: url(img/prof_back.jpg);
    background-position: center right;
    background-size: contain;
    background-repeat: no-repeat;
}
#profile>div{
	display: -webkit-flex; /* Safari */
display: flex;
max-width: 1024px;
	margin: 0 auto;
	padding: 0 1rem;
}
#profile>div>div{
	width:50%;
	position: relative;
}
#profile>div>div:first-of-type>img{
	width:32.8rem;
	position: absolute;
	bottom:0;
	left: 1rem;
}
#profile>div>div:nth-of-type(2)>h2 img{
	width: 13rem;
}
#profile>div>div:nth-of-type(2) h3{
color: #9bb5c4;
	margin: 1rem 0 0 0;
}
#profile>div>div:nth-of-type(2)>p:first-of-type{
	margin: 0 0 1rem;
}
#profile>div>div:nth-of-type(2)>i {
    color: #5b534d;
    font-size: 3rem;
    margin: 2rem 3rem 0 -1.6rem;
}
@media (max-width:767px) {
	section{
		padding: 4rem 4%;
	}

  #profile {
    background: none;
  }


	#profile>div{
-webkit-flex-direction: column; /* Safari */
flex-direction: column;
		padding: 0;
	}
	#profile>div>div:first-of-type>img {
    width: 40%;
    margin: 0 auto;
    position: relative;
    display: block;
    bottom: auto;
    left: auto;
}
	#profile>div>div {
    width: 100%;
    position: relative;
		margin: 0 0 1rem 0;
}
	#profile>div>div h2{
		text-align: center;
	}
}
#service{
	background: #f4f7f8;
}
#service>div{
	padding: 0 1rem;
max-width: 1024px;
	margin: 0 auto;
	text-align: center;
}
#service>div h2 img{
	width: 14rem;
}
#service>div>p{
	font-size: 1.5rem;
	line-height: 2.8rem;
	margin: 0 0 3.4rem;
}
#service>div ul{
	display: -webkit-flex; /* Safari */
display: flex;
-webkit-justify-content: space-between; /* Safari */
 justify-content: space-between;

}
#service>div ul li{
	width: 30%;
}
#service>div ul li img{
	height: 8rem;
	width: auto;
}
#service>div ul li h3 {
    color: #5b534d;
    font-weight: 400;
    margin: .8rem 0 1rem;
    font-size: 1.7rem;
}
#service>div ul li p{
	text-align: left;
}


@media (max-width:767px) {
	#service>div ul{
		-webkit-flex-direction: column; /* Safari */
flex-direction: column;
		-webkit-align-items: center; /* Safari */
align-items: center;
	-webkit-justify-content: center; /* Safari */
justify-content: center;
	}
	#service>div {
    padding: 0;
}
	#service>div ul li {
    width: 100%;
}
	#service>div ul li+li{
		margin: 4rem 0 0 0;
	}
}



#shop>div{
	padding: 0 1rem;
max-width: 1024px;
	margin: 0 auto;
	text-align: center;
	position: relative;
}
#shop>div h2 img{
	width: 22rem;
}
#shop>div>p{
	font-size: 1.5rem;
	line-height: 2.8rem;
	margin: 0 0 3.4rem;
}
#shop>div>a img{
width:36rem;
	   margin: 0 0 5rem 0;
}
#shop>div>img:nth-of-type(1){
	position: absolute;
	left: 1rem;
		top:0;
width:14rem;
}
#shop>div>img:nth-of-type(2){
	position: absolute;
	left: 6rem;
		bottom:-1rem;
width:14rem;
}
#shop>div>img:nth-of-type(3){
	position: absolute;
	right: 1rem;
		top:0rem;
width:14rem;
}
#shop>div>img:nth-of-type(4){
	position: absolute;
	right: 6rem;
		bottom:-1rem;
width:14rem;
}

@media (max-width:767px) {
	#shop>div {
    padding: 0;
	}
#shop>div>img:nth-of-type(1) {
    display: none;
}
	#shop>div>img:nth-of-type(4) {
    display: none;
}
	#shop>div>img:nth-of-type(2) {
    position: relative;
    left: auto;
    bottom: auto;
    width: 44%;
    display: inline-block;
}
	#shop>div>img:nth-of-type(3) {
    position: relative;
    left: auto;
    bottom: auto;
    width: 44%;
    display: inline-block;
}
	#shop>div>img{
		padding: 1rem 2rem;
	}
	#shop>div>a img{
width:36rem;
		margin: 0 0 1rem 0;
}
}
#contact{
background: #fcfbee;
}
#contact>div{
	padding: 0 1rem;
max-width: 1024px;
	margin: 0 auto;
	text-align: center;
}
#contact>div h2 img{
	width: 14rem;
}
#contact>div>p{
	font-size: 1.5rem;
	line-height: 2.8rem;
	margin: 0 0 3.4rem;
}

.mailform{
	display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap: wrap;
}
.mailform dt {
    width: 22rem;
    position: relative;
    padding: .8rem 0 .8rem;
    background: #eff2f5;
    margin: 0 0 3rem;
	font-size: 1.5rem;
	display: -webkit-flex; /* Safari */
display: flex;
-webkit-align-items: center; /* Safari */
align-items: center;
-webkit-justify-content: center; /* Safari */
justify-content: center;
}

.fa-asterisk{
  color: #dec471;
}
.mailform dt i {
    font-size: .1rem;
    color: #dec471;
    margin: 0 0 0 .2rem;
}
.mailform dd:first-of-type {
    padding: 1rem 4rem;
    border: #eff2f5 2px solid;
}
.mailform dd {
    width: calc(100% - 22rem);
    margin: 0 0 3rem;
    text-align: left;
    background: #fff;
}
.mailform dt p {
    bottom: -2.2rem;
    left: .4rem;
    position: absolute;
    font-size: 1.2rem;
}
.mailform input {
    width: 100%;
    padding: .8rem;
    border: #eff2f5 2px solid;
}
.mailform textarea {
    width: 100%;
    padding: .8rem;
    border: #eff2f5 2px solid;
    height: 100%;
}
.mfp_buttons img{
	width:35rem;
}
.mfp_buttons button {
    background: none;
    border: none;
    cursor: pointer;
	margin: 4rem 0 0 0;
}
label {
    width: 23rem;
    display: inline-block;
}
label input{
	display: none;
	}
label span{
	padding-left: 20px;
    position: relative;
    margin-right: 20px;
    line-height: 1;
	}
label span:before{
	    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    border: 1px solid #dbd3db;
    border-radius: 50%;
	}
.mfp_checked>span:after {
    content: "";
    display: block;
    position: absolute;
    top: .2rem;
    left: .2rem;
    width: 11px;
    height: 11px;
    background: #dbd3db;
    border-radius: 50%;
}
div.mfp_buttons{
	padding: 0;
}
.mailform dt:last-of-type{
	margin: 0;
}
.mailform dd:last-of-type{
	margin: 0;
}
div#mfp_hidden {
    display: none;
}
#mfp_loading{
	display: none;
}
#mfp_loading_screen{
	display: none;
}
#mfp_overlay{
	display: none;
}
#mfp_overlay_background{
	display: none;
}


@media (max-width:767px) {
#contact>div {
    padding: 0;
	}
.mailform dt {
    width: 100%;
    position: relative;
    padding: .8rem 0 .8rem;
    background: #eff2f5;
    margin: 0;
    font-size: 1.5rem;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
	.mailform dd {
    width: 100%;
}
	.mailform dt p {
    bottom: -6.6rem;
    left: .4rem;
    position: absolute;
    font-size: 1.2rem;
}
.mailform dt i {
    font-size: 1rem;
    margin: 0 0 0 .2rem;
}
}

footer{
	background: #b3c7d2;
	text-align: center;
	color: #fff;
	    padding: 3rem 0;
}
footer p {
    color: #fff;
    margin: 1rem 0 0 0;
}
footer>a{
	position: fixed;
	right:10%;
	bottom:10%;
}
footer>img{
width:24rem;
margin: 0 0 1rem;
}
footer>a img{
width:8.8rem;
}
footer ul li{
	display: inline-block;
}
footer ul li+li:before {
    content: "\002f";
    margin: 0 1rem 0 .6em;
}
@media (max-width:767px) {
	footer>a img {
    width: 4.8rem;
}
}



.fadein-bottom{
  -webkit-transition: all .5s linear;
  -o-transition: all .5s linear;
  transition: all .5s linear;
  -webkit-transform: translateY(20%);
  -moz-transform: translateY(20%);
  -ms-transform: translateY(20%);
  transform: translateY(20%);
  opacity: 0;
}
.fadein-bottom.active{
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  opacity: 1;
}