@charset "utf-8";
/* CSS Document */

/* ------------------
 header
--------------------*/
.topBox {
	background: url("../img/top_bg.jpg") no-repeat center;
	background-size: cover;
}
.topinnerBox {
	position: relative;
	margin: 0 auto;
}
.topinnerBox:before {
	content: '';
	display: block;
	padding: 173.33% 0 0;
}
.topinnerBox > * {
	position: absolute;
}
h1.topCaption {
	width: 313px;
	height: 57px;
	top: 30px;
	left: 0;
	right: 0;
	margin: auto;
}
h1.topLogo {
	width: 247px;
	height: 199px;
	top: 110px;
	left: 0;
	right: 0;
	margin: auto;
}

/* ------------------
 section01
--------------------*/
section.section01 {
    margin: 60px 0 80px;
    text-align: center;
}

/* ------------------
 section02
--------------------*/
section.section02 {
    margin-bottom: 80px;
}
.inner01 {
    max-width: 1100px;
    margin: 0 auto;
    width: 90%;
}
.flameBox {
    position: relative;
    padding-top: 72px;
    box-sizing: border-box;
}
.flameBox:before {
	content: '';
	width: 77px;
	height: 77px;
	background: url("../../img/common_flame.svg") no-repeat;
	background-size: contain;
	position: absolute;
	left: 0;
	top: 0;
}
.flameBox:after {
	content: '';
	width: 77px;
	height: 77px;
	background: url("../../img/common_flame.svg") no-repeat;
	background-size: contain;
	transform: rotate(90deg);
	position: absolute;
	right: 0;
	top: 0;
}
.sec2ttl {
    width: 239px;
    height: 57px;
    margin: 0 auto 35px;
}
p.flameTxt {
    line-height: 2.5;
    margin-bottom: 20px;
    letter-spacing: -0.05rem;
    font-size: 1.2rem;
    text-align: center;
}
p.fromName {
    text-align: center;
}
p.fromName > img {
    width: 68px;
    height: 14px;
}
span.underLine {
    border-bottom: solid 1px #bf9733;
}
.flameTxtArea {
    position: relative;
    padding-bottom: 72px;
    box-sizing: border-box;
}
.imageArea {
    position: relative;
    margin-bottom: 35px;
    text-align: center;
}
.flameTxtArea:before {
	content: '';
	width: 77px;
	height: 77px;
	background: url("../../img/common_flame.svg") no-repeat;
	background-size: contain;
	transform: rotate(-90deg);
	position: absolute;
	left: 0;
	bottom: 0;
}
.flameTxtArea:after {
	content: '';
	width: 77px;
	height: 77px;
	background: url("../../img/common_flame.svg") no-repeat;
	background-size: contain;
	transform: rotate(180deg);
	position: absolute;
	right: 0;
	bottom: 0;
}

/* ------------------
 section03
--------------------*/
section.section03 {
    overflow: hidden;
    padding: 20px 0;
}
.corkBoard {
    max-width: 875px;
    margin: 0 auto;
    background: url("../../img/cork.jpg");
    padding: 30px 20px 40px 20px;
    position: relative;
    box-sizing: border-box;
    z-index: 1;
}
.paperBox {
    background: #fff;
    padding: 300px 15px 60px 15px;
    box-sizing: border-box;
    position: relative;
    filter: drop-shadow(10px 10px 7px rgba(0,0,0,0.3));
}
h2.section03Ttl {
    width: 285px;
    height: 79px;
    margin: 0 auto 20px;
}
.materialList li + li {
    margin-top: 3em;
}
.textAreaS3 {
    box-sizing: border-box;
}
.textAreaS3.textEven {
    text-align: right;
}
h3.materialName {
    font-size: 2.6rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 5px;
}
.textAreaS3 p {
    line-height: 2em;
    letter-spacing: -0.05rem;
    text-align: left;
    font-size: 1.3rem;
}
figure.sec3Deco {
    position: absolute;
}
figure.sec3Deco.granola {
    top: -50px;
    left: -150px;
}
figure.sec3Deco.memo {
    top: -45px;
    right: -30px;
    width: 368px;
    height: 385px;
}
h4.materialEn {
    margin-bottom: 20px;
    line-height: 1rem;
    text-align: center;
}
h4.materialEn01 > img {
    width: 217px;
}
h4.materialEn02 > img {
    width: 100px;
}
h4.materialEn03 > img {
    width: 49px;
}
h4.materialEn04 > img {
    width: 129px;
}
h4.materialEn05 > img {
    width: 103px;
}
h4.materialEn06 > img {
    width: 55px;
}
h4.materialEn07 > img {
    width: 44px;
}
h4.materialEn08 > img {
    width: 128px;
}
h4.materialEn09 > img {
    width: 81px;
}
.materialList li > figure {
    text-align: center;
}

/* ------------------
 section04
--------------------*/
section.section04 {
    margin: 80px 0;
}
.sec04Bg {
    position: relative;
    width: 839px;
    height: 561px;
    margin: 0 auto;
    background: url("../img/section4_bg.jpg") no-repeat center;
    background-size: contain;
}
.sec04Box {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}
figure.sec4Flame {
    text-align: center;
    position: relative;
}
h2.sec04Ttl {
    width: 260px;
    height: auto;
    margin: 0 auto 15px;
}
a.orderBtn {
    font-size: 1.9rem;
    font-weight: bold;
    background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
    padding: 0.7rem 1.5rem;
    border-radius: 50px;
    color: #251E1C;
}
figure.price {
    margin: 0.5em 0 1.2em;
}
.price > img {
    width: 265px;
}
figure.reservation {
    margin-top: 0.8em;
}
.reservation > img {
    width: 264px;
    height: auto;
}
figure.sc4item {
    position: absolute;
}
figure.sc4item.spoon {
    width: 233px;
    height: 370px;
    left: -94px;
    right: 0;
    bottom: -15px;
}
figure.sc4item.stamp {
    width: 90px;
    height: 90px;
    bottom: 230px;
    left: 40px;
    right: 0;
}
figure.sc4item.package {
    width: 268px;
    height: 361px;
    top: 123px;
    right: -63px;
    bottom: 0;
}
figure.pack > img {
    width: 100px;
    height: auto;
}
@media (max-width: 780px) {
	.sec04Bg {
		width: 100%;
	}
	figure.sc4item.package {
		top: 123px;
		right: 0;
	}
}

/* ------------------
 section05
--------------------*/
.sec05inner {
	max-width: 1170px;
	margin: 0 auto;
	background: #fff;
	box-sizing: border-box;
}
h2.sec05Ttl {
    width: 321px;
    height: 168px;
    margin: 0 auto 50px;
}
.recipeList li {
    position: relative;
}
.recipeList li + li {
    margin-top: 50px;
}
.recipeTxtArea h4 > img {
    width: 195px;
    height: 70px;
}
.recipeTxtArea {
    width: 90%;
    position: relative;
    margin: 0 auto;
}
.recopeImg {
    width: 100%;
}
h3.recipeTtl {
    color: #bf953e;
    font-size: 2.1rem;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}
.spicesList {
    margin-top: 35px;
}
.spicebox {
	position: relative;
	padding-left: 55px;
}
.spicebox:before {
	content: '';
	width: 48px;
	height: 48px;
	background: url("../../img/section5_plus.svg") no-repeat;
	background-size: contain;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.spicebox + .spicebox {
    margin-top: 20px;
}
dt.spices {
    font-size: 2rem;
}
.recipeTxtArea h5 {
    margin: 10px auto;
    text-align: center;
}
span.goldenMilk {
    font-size: 2rem;
    background: #7C7C7C;
    color: #fff;
    padding: 0.2rem 1rem;
}
.recipeTxtArea p {
    line-height: 2.1;
    font-size: 16px;
    letter-spacing: -0.1rem;
    text-align: center;
}
p.smallTxt {
    font-size: 1.2rem;
    margin-top: 5px;
}
.recipeTxtArea h4 {
    margin: 30px 0;
}
figure.illustration {
    position: absolute;
}
figure.illustration.illust01 {
    bottom: 18px;
    right: 0;
}
figure.illustration.illust02 {
    bottom: 30px;
    right: 0;
}
figure.illust03 {
    margin-top: 20px;
}
span.dot {
    padding-top: .4em;
    /* background-position: top left -2px; */
    /* background-repeat: repeat-x; */
    /* background-size: 1.0em .14em; */
    /* background-image: radial-gradient(.07em .07em at center center,#251E1C,#251E1C 100%,transparent); */
    position: relative;
    /* padding-top: 0.2em; */
}
span.dot::before {
    position: absolute;
    content: "";
    width: 0.1em;
    height: 0.1em;
    border-radius: 50%;
    background-color: #000;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

/* ------------------
 section06
--------------------*/
section.section06 {
    margin: 80px 0;
}
h2.flameTtl.sec6ttl {
    width: 264px;
    height: 113px;
    margin: 0 auto 35px;
}

/* ------------------
 section07
--------------------*/
section.section07 {
    background: #dabd64;
    padding: 0 0 30px;
}
.sec07Inner {
    max-width: 1100px;
    margin: 0 auto;
    /* width: 90%; */
    /* display: flex; */
}
.sc7Image {
	position: relative;
}
.sc7Image:after {
	content: '';
	width: 127px;
	height: 161px;
	background: url("../../img/section7_book.png") no-repeat center;
	background-size: contain;
	position: absolute;
	right: 0;
	bottom: -10px;
}
.sec07TxtArea {
    margin: 0 auto;
    width: 90%;
    text-align: center;
}
h3.sec07Ttl > img {
    width: 193px;
    height: 18px;
}
h3.sec07Ttl {
    display: inline-block;
    margin: 30px auto;
}
.sec07TxtArea p {
    line-height: 2.1;
    text-align: center;
    font-size: 1.2rem;
}


/* ------------------
 copyright
--------------------*/
.copyright {
    padding: 30px 0 25px;
}