@charset "utf-8";
#body h2 {
font-size: 339%;
letter-spacing: 0.17em;
}
html.win.ie #body h2 {
letter-spacing: 0.17em;
}
#body h2 span {
color: #bf3b53;
font-size: 150%;
}
@media screen and (max-width: 768px) {
#body h2 {
font-size: 213%;
text-align: center;
line-height: 1.5;
}
#body h2 span {
display: block;
}
}
#body > section.grid_12 {
position: relative;
}
#body > section.grid_12 > figure {
position: absolute;
right: 0;
top: 0;
}
#body > section.grid_12 > .clearFix {
margin-top: -20px;
padding: 35px 0 30px;
border-radius: 10px;
background-color: #e1ecf5;
}
#body > section.grid_12 > .clearFix > figure {
text-align: center;
}
#body > section.grid_12 > .clearFix > div > p strong {
font-size: 171%;
line-height: 1;
}
#body > section.grid_12 > .clearFix > div .price {
margin: 15px 0 20px;
padding: 10px;
border-radius: 10px;
text-align: right;
background-color: #ffb3a4;
}
#body > section.grid_12 > .clearFix > div .price p {
float: left;
width: 100%;
}
#body > section.grid_12 > .clearFix > div .price p + p {
margin-top: -10px;
}
#body > section.grid_12 > .clearFix > div .price p.left {
text-align: left;
}
#body > section.grid_12 > .clearFix > div .price p span {
position: relative;
top: 5px;
padding-left: 15px;
font-size: 255%;
line-height: 1;
}
#body > section.grid_12 > .clearFix > div .price p i {
position: relative;
top: 5px;
padding-right: 5px;
}
#body > section.grid_12 > .clearFix > div p.souryou {
margin: -15px 0 10px;
font-size: 12px;
text-align: right;
}
@media screen and (max-width: 768px) {
#body > section.grid_12 > .clearFix > div p.souryou {
font-size: 11px;
margin: -5px 0 5px;
}
}
#body > section.grid_12 > .clearFix > div ul.clearFix {
margin-top: 20px;
}
#body > section.grid_12 > .clearFix > div ul.clearFix li {
float: left;
position: relative;
display: block;
width: 80px;
height: 80px;
margin-right: 16px;
border-radius: 50%;
background-color: #fff;
}
#body > section.grid_12 > .clearFix > div ul.clearFix li:before {
content: "";
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
border: 3px #000 solid;
border-radius: 50%;
box-sizing: border-box;
}
#body > section.grid_12 > .clearFix > div ul.clearFix li:nth-child(4n) {
margin-right: 0;
}
#body > section.grid_12 > .clearFix > div ul.clearFix li:nth-child(n+5) {
margin-top: 15px;
}
#body > section.grid_12 > .clearFix > div ul.clearFix li span {
position: absolute;
left: 0;
top: 53%;
display: block;
width: 100%;
font-size: 108%;
text-align: center;
letter-spacing: 0;
line-height: 1.3;
transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
#body > section.grid_12 {
margin-top: 3%;
padding: 0;
}
#body > section.grid_12 > figure {
position: static;
padding-left: 15%;
text-align: center;
}
#body > section.grid_12 > figure img {
max-width: 60%;
}
#body > section.grid_12 > .clearFix {
margin-top: 5%;
padding: 5% 0;
}
#body > section.grid_12 > .clearFix > figure {
margin: 0;
padding: 0 4%;
}
#body > section.grid_12 > .clearFix > div {
margin-top: 4%;
}
#body > section.grid_12 > .clearFix > div .price {
margin: 4% 0;
}
#body > section.grid_12 > .clearFix > div .price p + p {
margin-top: 0;
}
#body > section.grid_12 > .clearFix > div .price p span {
top: 0;
font-size: 171%;
}
#body > section.grid_12 > .clearFix > div .price p i {
top: 0;
}
#body > section.grid_12 > .clearFix > div ul.clearFix {
margin-top: 3%;
}
#body > section.grid_12 > .clearFix > div ul.clearFix li {
width: 32%;
height: 0;
padding-top: 32%;
margin: 2% 2% 0 0 !important;
border-radius: 50%;
}
#body > section.grid_12 > .clearFix > div ul.clearFix li:nth-child(3n) {
margin-right: 0 !important;
}
}

#step {
margin-top: 110px;
padding-bottom: 45px;
border-top: 1px #ecc94c solid;
border-bottom: 1px #ecc94c solid;
text-align: center;
}
#step > h3 {
display: inline-block;
width: auto;
padding: 10px 60px;
border: 1px #ecc94c solid;
border-radius: 50px;
font-size: 213%;
line-height: 1;
transform: translateY(-50%);
background-color: #fff;
}
#step ul li em {
display: block;
color: #420149;
font-size: 192%;
}
#step ul li em span {
padding-right: 10px;
color: #88b3d7;
font-size: 213%;
font-weight: normal;
vertical-align: middle;
}
#step ul li figure {
position: relative;
text-align: center;
}
#step ul li figure:before {
content: "";
position: absolute;
z-index: 1;
right: -90px;
top: 50px;
display: block;
width: 128px;
height: 113px;
background: url(../images/top/icon01.png) left top no-repeat;
}
#step ul li:nth-child(3) figure:before {
display: none;
}
#step ul li p {
margin-top: 15px;
font-size: 16px;
}
@media screen and (max-width: 768px) {
#step {
margin-top: 20%;
padding-bottom: 8%;
}
#step > h3 {
padding: 4%;
font-size: 143%;
line-height: 1;
}

#step ul li em {
font-size: 143%;
}
#step ul li figure:before {
display: none;
}
#step ul li p {
margin-top: 4%;
letter-spacing: -0.05em;
}
#step ul li p br {
display: none;
}
}

#recipe {
margin-top: 90px;
}
#recipe > div {
display: flex;
align-items: flex-end;
letter-spacing: 0.1em;
}
#recipe > div .grid_2 {
padding: 10px;
font-size: 115%;
}
#recipe > div .grid_10 {
font-size: 213%;
}
#recipe > div .grid_10 span {
position: relative;
display: inline-block;
padding: 0 5px;
}
#recipe > div .grid_10 span:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
bottom: 0;
width: 100%;
height: 40%;
transform: skew(3deg);
background: linear-gradient(transparent 0%,
#ebdafc 90%);
}
#recipe > div .grid_10 span:after {
content: "";
position: absolute;
z-index: -1;
left: 0;
bottom: 0;
width: 100%;
height: 40%;
background: url(../images/common/fillter01.png) left top repeat;
}
#recipe > section {
margin-top: 110px;
}
#recipe > section article h4 {
padding-bottom: 10px;
font-size: 129%;
text-align: center;
}
#recipe > section article .clearFix {
margin-top: 20px;
padding-bottom: 30px;
}
#recipe > section article .clearFix .grid_1 {
padding: 25px 0;
font-size: 129%;
text-align: center;
letter-spacing: 0.2em;
line-height: 1;
background-color: #ffb3a4;
}
#recipe > section article .clearFix .grid_3 {
font-size: 129%;
line-height: 1.5;
}
@media screen and (max-width: 768px) {
#recipe {
margin-top: 10%;
}
#recipe > div {
display: block;
}
#recipe > div .grid_2 {
padding: 0;
font-size: 157%;
}
#recipe > div .grid_10 {
margin-top: 3%;
font-size: 185%;
}
#recipe > div .grid_10 span {
display: inline;
padding: 0;
}
#recipe > div .grid_10 span:before,
#recipe > div .grid_10 span:after {
display: none;
}

#recipe > section {
margin-top: 8%;
}
#recipe > section article {
margin-top: 6%;
}
#recipe > section article h4 {
padding-bottom: 2%;
}
#recipe > section article figure {
text-align: center;
}
#recipe > section article .clearFix {
margin-top: 2%;
padding-bottom: 4%;
}
#recipe > section article .clearFix .grid_1 {
margin: 0;
padding: 2%;
}
#recipe > section article .clearFix .grid_3 {
margin: 2% 0 0;
}
}