@charset "UTF-8";
@import url("../../webfonts/AGaramondPro_Regular/stylesheet.css");
@import url("../../webfonts/Javacom/stylesheet.css");
@import url("../../webfonts/Baskerville_01/stylesheet.css");
@import url("../../webfonts/Om_Telolet_Om/stylesheet.css");
@import url("../../webfonts/BaseOne_Regular/stylesheet.css");
/* CSS Document */

/* ------------------------
     common
----------------------- */
/* =================================
 --- ☆ #mvSct
===================================*/
#mvSct {
width: 100vw;
height: 90vh;
margin-bottom: 0px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
background-image: url("../img/bg_main.jpg");
background-attachment: fixed;
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
@media screen and (max-width: 768px) {
#mvSct {
	background-image: url(../img/bg_main_sp.jpg);
}
}
#mvSct #logoImg {
width: 17%;
max-width: 547px;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 768px) {
#mvSct #logoImg {
width: 25%;
}
}
@media screen and (max-width: 480px) {
#mvSct #logoImg {
width: 35%;
}
}

.scroll {
display: block;
max-width: 15px;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 70%;
}
@media screen and (max-width: 768px) {
.scroll {
top: 85%;
}
}
@media screen and (max-width: 480px) {
.scroll {
top: 75%;
}
}

#mvSct .leaf_basil {
display: block;
position: absolute;
left: 0px;
bottom: -200px;
max-width: 250px;
z-index: 2;
}
@media screen and (max-width: 1000px) {
#mvSct .leaf_basil {
max-width: 180px;
}
}
@media screen and (max-width: 768px) {
#mvSct .leaf_basil {
bottom: -330px;
max-width: 240px;
}
}
@media screen and (max-width: 600px) {
#mvSct .leaf_basil {
bottom: -130px;
max-width: 180px;
}
}
@media screen and (max-width: 480px) {
#mvSct .leaf_basil {
bottom: -140px;
max-width: 180px;
}
}

#mvSct .leaf_parsley {
max-width: 200px;
display: block;
position: absolute;
right: 0px;
bottom: -230px;
z-index: 2;
}
@media screen and (max-width: 1000px) {
#mvSct .leaf_parsley {
max-width: 150px;
}
}
@media screen and (max-width: 768px) {
#mvSct .leaf_parsley {
max-width: 210px;
bottom: -500px;
}
}
@media screen and (max-width: 600px) {
#mvSct .leaf_parsley {
max-width: 160px;
}
}
@media screen and (max-width: 480px) {
#mvSct .leaf_parsley {
max-width: 140px;
bottom: -340px;
}
}

/* =================================
 --- ☆ 共通背景
	（#conceptSct/#pickSct/#menuSct）
===================================*/
.bg_white {
background-color: #FFFFFF;
}

/* =================================
 --- ☆ #conceptSct
===================================*/
#conceptSct {
padding-top: 50px;
position: relative;
}

#conceptSct #catchDiv {
margin-bottom: 50px;
}
#conceptSct #catchDiv .imgBox {
width: 30%;
height: auto;
margin-top: -40px;
}
#conceptSct #catchDiv .imgBox img {
max-width: 800px;
}
@media screen and (max-width: 768px) {
#conceptSct #catchDiv .imgBox {
width: 55%;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 20px;
}
}
#conceptSct #catchDiv .pBox {
width: 65%;
height: auto;
}
@media screen and (max-width: 768px) {
#conceptSct #catchDiv .pBox {
width: 100%;
}
}
#conceptSct #catchDiv .pBox p.txt {
font-size: 1.4rem;
line-height: 2.5;
text-align: left;
}
@media screen and (max-width: 768px) {
#conceptSct #catchDiv .pBox p.txt {
font-size: 1.3rem;
line-height: 2.0;
}
}

#conceptSct #pointDiv {
}
#conceptSct #pointDiv ul {
}
#conceptSct #pointDiv ul li {
width: 28%;
position: relative;
margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
#conceptSct #pointDiv ul li {
width: 30%;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (max-width: 480px) {
#conceptSct #pointDiv ul li {
width: 80%;
}
}
#conceptSct #pointDiv ul li .imgBox {
position: relative;
}
#conceptSct #pointDiv ul li .imgBox .no {
position: absolute;
top: 0px;
left: 0px;
z-index: -5;
width: 49%;
height: 49%;
padding-top: 2%;
padding-left: 5%;
font-size: 3.0rem;
color: #ffffff;
font-family: "Baskerville 01";
background-color: #c8a675;
}
@media screen and (max-width: 480px) {
#conceptSct #pointDiv ul li .imgBox .no {
font-size: 2.5rem;
}
}
#conceptSct #pointDiv ul li .imgBox img {
border-radius: 50%;
margin-bottom: 20px;
}

#conceptSct #pointDiv ul li h3 {
margin-bottom: 10px;
font-size: 1.6rem;
line-height: 1.5;
color: #c8a675;
}
@media screen and (max-width: 768px) {
#conceptSct #pointDiv ul li h3 {
font-weight: bold;
font-size: 1.3rem;
letter-spacing: 0px;
}
}
@media screen and (max-width: 480px) {
#conceptSct #pointDiv ul li h3 {
font-size: 1.6rem;
}
}
#conceptSct #pointDiv ul li p {
font-family: Arial,Helvetica,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 1.3rem;
line-height: 1.7;
text-align: left;
}
@media screen and (max-width: 768px) {
#conceptSct #pointDiv ul li p {
font-size: 1.1rem;
}
}
@media screen and (max-width: 480px) {
#conceptSct #pointDiv ul li p {
font-size: 1.3rem;
}
}

/* =================================
 --- ☆ #pickSct
===================================*/
#pickSct {
margin-left: 10px;
margin-right: 10px;
background-color: #EDE5D7;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
@media screen and (max-width: 480px) {
#pickSct {
margin-left: 8px;
margin-right: 8px;
}
}
#pickSct .h3Div {
position: absolute;
left: 30px;
top: 50px;
z-index: 1;
}
@media screen and (max-width: 480px) {
#pickSct .h3Div {
margin-top: 50px;
}
}
#pickSct .h3Div .wrp {
position: relative;
left: -80px;
}
#pickSct .h3Div p.sub {
color: #ffffff;
border-radius: 5px;
display: inline-block;
padding-left: 15px;
padding-right: 15px;
padding-top: 3px;
padding-bottom: 3px;
font-size: 1.2rem;
text-align: left;
background-color: #000000;
}
#pickSct .h3Div p.line {
margin-left: auto;
margin-right: auto;
width: 1px;
height: 15px;
border-right: 1px dotted #000000;
}
#pickSct .h3Div h3 {
font-family: Javacom;
font-size: 4.0rem;
line-height: 1.2;
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
text-align: left;
margin-top: -10px;
}
#pickSct .h3Div img {
max-width: 129px;
margin-left: 130px;
}
@media screen and (max-width: 480px) {
#pickSct .h3Div img {
display: none;
}
}

#pickSct #pickSlide {
width: 50%;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 768px) {
#pickSct #pickSlide {
width: 80%;
margin-top: 50px;
}
}
@media screen and (max-width: 480px) {
#pickSct #pickSlide {
width: 90%;
margin-top: 120px;
}
}

/* =================================
 --- ☆ #bounoSct
===================================*/
#bounoSct {
background-image: url(../img/menu_obi.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
padding-top: 100px;
padding-bottom: 100px;
}
@media screen and (max-width: 480px) {
#bounoSct {
padding-top: 80px;
padding-bottom: 80px;
}
}
#bounoSct p {
color: #ffffff;
font-size: 5.0rem;
letter-spacing: 10px;
font-family: "Baskerville 01";
}
@media screen and (max-width: 480px) {
#bounoSct p {
font-size: 3.0rem;
}
}
#bounoSct p span {
transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
display: inline-block;
}

/* =================================
 --- ☆ #menuSct
===================================*/
#menuSct {
margin-left: 10px;
margin-right: 10px;
background-color: #EDE5D7;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
@media screen and (max-width: 480px) {
#menuSct {
margin-left: 8px;
margin-right: 8px;
}
}
#menuSct .h3Div h3 {
font-family: Javacom;
font-size: 4.0rem;
line-height: 1.0;
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
margin-top: -5px;
position: relative;
z-index: 1;
}
#menuSct .h3Div p.sub {
background-color: #000000;
color: #ffffff;
border-radius: 5px;
display: inline-block;
padding-left: 15px;
padding-right: 15px;
padding-top: 3px;
padding-bottom: 3px;
font-size: 1.2rem;
}
#menuSct .h3Div p.line {
margin-left: auto;
margin-right: auto;
width: 1px;
height: 25px;
border-right: 1px dotted #000000;
}

.bg_whiteWrp {
background-color: #FFFFFF;
padding: 5%;
margin-top: -10px;
margin-bottom: 30px;
}

#menuSct .border {
border-top: 1px dotted #e7e7e7;
}

#menuSct .clm_l {
width: 45%;
margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
#menuSct .clm_l {
width: 100%;
}
}
#menuSct .clm_l .imgBox {
position: relative;
}
#menuSct .clm_l  .imgBox p {
position: absolute;
bottom: 0;
left: 0;
opacity: 0.6;
width: 100%;
}
#menuSct .clm_l  .imgBox p span {
color: #fff;
display: block;
padding-top: 5px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 5px;
background-color: #000000;
margin: 10px;
font-size: 1.2rem;
line-height: 1.3;
}
@media screen and (max-width: 480px) {
#menuSct .clm_l  .imgBox p span {
font-size: 1.1rem;
}
}

#menuSct .clm_r {
width: 50%;
}
@media screen and (max-width: 768px) {
#menuSct .clm_r {
width: 100%;
}
}
#menuSct .frameBox {
text-align: left;
}
#menuSct h4 {
display: inline-block;
padding-left: 20px;
padding-right: 20px;
padding-top: 4px;
padding-bottom: 2px;
color: #ffffff;
background-color: #c8a675;
letter-spacing: 2px;
font-size: 1.6rem;
}

#menuSct .frameBox .frame {
border: 3px solid #c8a675;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 10px;
margin-bottom: 20px;
}
#menuSct .frameBox .frame ul li {
margin-bottom: 5px;
width: 100%;
}
@media screen and (max-width: 480px) {
#menuSct .frameBox .frame ul li {
font-size: 1.4rem;
margin-bottom: 10px;
}
}
#menuSct .frameBox .frame ul.clm_2 li {
width: 50%;
}
@media screen and (max-width: 480px) {
#menuSct .frameBox .frame ul.clm_2 li {
width: 100%;
}
}
#menuSct .frameBox .frame ul li:before {
font-family: FontAwesome;
content: '\f105';
margin-right: 7px;
color: #c8a675;
}

#menuSct .box {
padding-top: 20px;
padding-bottom: 15px;
border-bottom: 1px dotted #e7e7e7;
}
#menuSct .box dl {
margin-bottom: 5px;
letter-spacing: 1px;
font-size: 1.4rem;
line-height: 2.0rem;
}
#menuSct .box dl dt {
width: 70%;
text-align: left;
}
@media screen and (max-width: 768px) {
#menuSct .box dl dt {
width: 65%;
}
}
#menuSct .box dl dt:before {
font-family: FontAwesome;
content: '\f105';
margin-right: 7px;
color: #c8a675;
}
#menuSct .box dl dd {
width: 30%;
text-align: right;
}
@media screen and (max-width: 480px) {
#menuSct .box dl dd {
width: 35%;
}
}
#menuSct .box dl dd:before {
content: '…';
margin-right: 5px;
font-size: 1.0rem;
}
#menuSct .box dl dd:after {
content: 'yen・込';
margin-left: 2px;
font-size: 1.0rem;
}
#menuSct .box p {
font-size: 1.1rem;
    line-height: 1.5rem;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-align: left;
}

/* =================================
 --- ☆ #greetSct
===================================*/
#greetSct {
}
#greetSct #bg_vi {
background-image: url("../img/owner_pc.png");
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
background-color: #000000;
padding-top: 50px;
padding-bottom: 50px;
}
@media screen and (max-width: 1024px) {
#greetSct #bg_vi {
padding-top:420px;
background-image: url("../img/owner_tablet.png");
background-size: 100% auto;
background-attachment: scroll;
}
}
@media screen and (max-width: 480px) {
#greetSct #bg_vi {
padding-top:400px;
background-image: url("../img/owner_sp.png");
}
}
#greetSct .txtBox {
width:45%;
margin-right: 0px;
margin-left: auto;
color: #ffffff;
text-align: left;
line-height: 2.2;
}
@media screen and (max-width: 1024px) {
#greetSct .txtBox {
width: 100%;
padding-top: 150px;
}
}
@media screen and (max-width: 480px) {
#greetSct .txtBox {
padding-top: 0px;
}
}
#greetSct .txtBox h4 {
font-size: 4.0rem;
letter-spacing: 3px;
font-family: "Baskerville 01";
}
#greetSct .txtBox h4 span {
transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
display: inline-block;
}
#greetSct .txtBox p {
margin-bottom: 50px;
}
#greetSct .txtBox p span {
text-align: right;
display: block;
}

#greetSct .txtBox .historyBox {
border-bottom: 1px dotted #FFFFFF;
padding-bottom: 10px;
line-height: 1.6;
}
#greetSct .txtBox .historyBox h5 {
display: flex;
align-items: center;
margin-bottom: 20px;
}
#greetSct .txtBox .historyBox h5:before,
#greetSct .txtBox .historyBox h5:after {
border-top: 1px dotted;
content: "";
display: inline; /* for IE */
flex-grow: 1;
}
#greetSct .txtBox .historyBox h5:before {
margin-right: 0.5em;
}
#greetSct .txtBox .historyBox h5:after {
margin-left: 0.5em;
}

#greetSct .txtBox .historyBox dl {
margin-bottom: 20px;
}
#greetSct .txtBox .historyBox dl dt {
width: 30%;
}
#greetSct .txtBox .historyBox dl dd {
width: 70%;
}

/* =================================
 --- ☆ #snsSct
===================================*/
#snsSct h3 {
display: inline-block;
margin-bottom: 20px;
padding-bottom: 0px;
padding-right: 5%;
padding-left: 5%;
color: #000000;
font-family: "Baskerville 01";
font-size: 1.6rem;
line-height: 1.6;
border-left-color: #000000;
border-right-color: #000000;
border-left-style: solid;
border-right-style: solid;
border-left-width: 1px;
border-right-width: 1px;
}
#snsSct .imgBox img {
margin-left: auto;
margin-right: 0;
margin-bottom: 10px;
width: auto;
height: 25px;
}
#snsSct .imgBox#ameba img {
max-width: 102px;
}
#snsSct .imgBox#ig img {
max-width: 154px;
}
#snsSct .imgBox#fb img {
max-width: 126px;
}
#snsSct ul.bnrWrp {
padding-bottom: 50px;
}
#snsSct ul.bnrWrp li {
width: 48%;
}
#snsSct ul.bnrWrp li img {
box-shadow: 0 0 10px #B8B8B8;
-webkit-box-shadow: 0 0 10px #B8B8B8;
}

#snsSct {
margin-bottom: 0;
}
#snsSct .clm_l {
width: 60%;
}
#snsSct .clm_r {
width: 35%;
}
@media screen and (max-width: 768px) {
#snsSct .clm_l,
#snsSct .clm_r {
width: 100%;
}
}

/* instagrama */
#snsSct #igDiv {
margin-bottom: 30px;
position: relative;
}
#snsSct #igDiv #linkBox {
position: absolute;
width: 100%;
margin-bottom: 0px;
display: flex;
}
#snsSct #igDiv #linkBox a:hover {
background-color: rgba(200,166,117,0.60);
background-image: url("../img/insta_icon.png");
background-repeat: no-repeat;
background-size: 20% auto;
background-position: center center;
}

/* link */
#snsSct #linkDiv {
max-width: 500px;
margin-top: 0;
margin-right: auto;
margin-left: auto;
margin-bottom: 30px;
}
#snsSct #linkDiv ul {
}
#snsSct #linkDiv ul li {
margin-bottom: 20px;
border: 5px solid #E2E2E2;
}