@charset "utf-8";
#pan {
width: 1200px;
margin: 45px auto 40px;
padding: 0 15px;
font-size: 86%;
}
#pan a {
text-decoration: underline;
}
#pan a:hover {
text-decoration: none;
}
@media screen and (max-width: 768px) {
#pan {
margin: 0 auto 3%;
}
}

#title {
width: 1200px;
margin: 0 auto;
padding: 0 15px 30px;
}
#title h2 {
font-size: 507%;
line-height: 1.3;
}
@media screen and (max-width: 768px) {
#title {
padding-bottom: 5%;
}
#title h2 {
font-size: 255%;
}
}

#content > article.container {
padding-left: 15px;
padding-right: 15px;
}

.yBox {
margin-top: 170px;
padding-bottom: 45px;
border-top: 1px #ecc94c solid;
border-bottom: 1px #ecc94c solid;
text-align: center;
}
.yBox > h4 {
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;
}
.yBox > .container {
margin-top: 25px;
text-align: left;
}
.yBox > .container > div > div {
padding: 35px 50px;
border-radius: 10px;
background-color: #ffb3a4;
}
.yBox > .container > div > div em {
display: block;
margin-bottom: 45px;
font-size: 171%;
}
.yBox > .container > div > div ul li {
position: relative;
padding-left: 1em;
font-size: 171%;
}
.yBox > .container > div > div ul li:before {
content: "・";
position: absolute;
left: 0;
top: 0;
}
.yBox > .container > div > p {
margin-top: 60px;
font-size: 129%;
}
.yBox > .container > figure {
text-align: right;
}
.yBox #circle.inlineList {
margin-top: 60px;
text-align: center;
}
.yBox #circle.inlineList li {
position: relative;
width: 250px;
height: 250px;
border: 3px #88b3d7 solid;
border-radius: 50%;
}
.yBox #circle.inlineList li + li {
margin-left: 100px;
}
.yBox #circle.inlineList li:nth-child(4) {
margin-left: 10px;
}
.yBox #circle.inlineList li figure {
position: absolute;
left: 0;
top: 50%;
display: block;
width: 100%;
text-align: center;
transform: translateY(-50%);
}
.yBox #circle.inlineList li figure figcaption {
margin-top: 15px;
font-size: 115%;
}
@media screen and (max-width: 768px) {
.yBox #circle.inlineList {
margin-top: 8%;
text-align: left;
}
.yBox #circle.inlineList li {
position: relative;
width: 45%;
height: 0;
margin: 0 2% !important;
padding-top: 45%;
}
.yBox #circle.inlineList li figure img {
max-width: 40%;
}
.yBox #circle.inlineList li figure figcaption {
font-size: 72%;
}

.yBox #circle.inlineList li:nth-child(n+3) {
margin-top: 20px !important;
}
}
@media screen and (max-width: 768px) {
.yBox {
margin-top: 20%;
padding-bottom: 8%;
}
.yBox > h4 {
padding: 4%;
font-size: 143%;
line-height: 1;
}

.yBox > .container {
margin-top: 4%;
}
.yBox > .container > div > div {
padding: 3%;
}
.yBox > .container > div > div em {
margin-bottom: 4%;
font-size: 115%;
}
.yBox > .container > div > div ul li {
font-size: 115%;
}
.yBox > .container > div > p {
margin-top: 3%;
font-size: 115%;
}
.yBox > .container > figure img {
width: 80%;
max-width: 300px;
}

.yBox .spmaT20 {
margin-top: 20px;
}
}

.vaT {
vertical-align: top;
}

@media screen and (max-width: 768px) {
.alpha,
.omega {
margin-left: 0;
margin-right: 0;
}
.spplr {
padding-left: 15px;
padding-right: 15px;
}
}

#faq dl dt {
position: relative;
padding-left: 50px;
font-size: 129%;
cursor: pointer;
text-decoration: underline;
}
#faq dl dt:before {
content: "Q ";
position: absolute;
left: 0;
top: -10px;
color: #6d9bd3;
font-size: 143%;
text-decoration: none;
}
#faq dl dt:hover {
text-decoration: none;
}
@media screen and (max-width: 768px) {
#faq dl dt {
padding-left: 30px;
}
}
#faq dl dd {
display: none;
margin-top: 25px;
padding-left: 100px;
}
#faq dl dd + dt {
margin-top: 15px;
}
@media screen and (max-width: 768px) {
#faq dl dd {
margin-top: 3%;
padding: 0;
}
#faq dl dd + dt {
margin-top: 5%;
}
}

#about table tbody tr th,
#about table tbody tr td {
padding: 5px 0;
font-size: 115%;
vertical-align: top;
border-bottom: 1px #88b3d7 solid;
}
#about table tbody tr th {
width: 170px;
}
@media screen and (max-width: 768px) {
#about table {
display: block;
}
#about table tbody {
display: block;
}
#about table tbody tr {
display: block;
}
#about table tbody tr th,
#about table tbody tr td {
display: block;
width: 100% !important;
}
#about table tbody tr th {
padding-bottom: 0;
border-bottom: none;
}
#about table tbody tr td {
padding-top: 0;
font-size: 100%;
}
}

#contact table tbody tr th,
#contact table tbody tr td {
border-left: 1px #000 solid;
border-bottom: 1px #000 solid;
font-size: 115%;
vertical-align: top;
}
#contact table tbody tr:first-child th,
#contact table tbody tr:first-child td {
border-top: 1px #000 solid;
}
#contact table tbody tr th {
width: 270px;
padding: 10px 15px;
}
#contact table tbody tr th.req:after {
content: " ※";
color: #f00;
}
#contact table tbody tr td {
padding: 10px;
border-right: 1px #000 solid;
}
#contact table tbody tr td input {
width: 450px;
padding: 0 3px;
border: 1px #d8d8d8 solid;
font-size: 115%;
background-color: #f5f5f5;
}
#contact table tbody tr td input.long {
width: 100%;
}
#contact table tbody tr td input.short {
width: 350px;
}
#contact table tbody tr td br + input {
margin-top: 8px;
}
#contact table tbody tr td textarea {
width: 100%;
height: 11em;
padding: 3px;
border: 1px #d8d8d8 solid;
font-size: 115%;
background-color: #f5f5f5;
}
#contact table tbody tr td .error {
margin-top: 10px;
color: #f00;
font-size: 115%;
}
@media screen and (max-width: 768px) {
#contact table {
display: block;
}
#contact table tbody {
display: block;
}
#contact table tbody tr {
display: block;
}
#contact table tbody tr th,
#contact table tbody tr td {
display: block;
width: 100% !important;
}
#contact table tbody tr:first-child td {
border-top: none;
}
#contact table tbody tr th {
padding-bottom: 0;
border-right: 1px #000 solid;
border-bottom: none;
}
#contact table tbody tr td input {
width: 100%;
}
#contact table tbody tr td input.short {
width: 40%;
}
#contact table tbody tr td textarea {
height: 16em;
}
}
#contact .btn {
margin-top: 50px;
}
#contact .btn input {
display: inline-block;
width: 170px;
margin: 0 15px;
padding: 20px 0;
border: none;
color: #000;
font-size: 115%;
text-align: center;
line-height: 1;
background-color: #ffb3a4;
transition: all 0.5s;
}
#contact .btn input:hover {
opacity: 0.6;
}
#contact #contactTxt {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}

#recipe #category li {
float: left;
display: block;
width: 170px;
margin-left: 30px;
}
#recipe #category li:first-child {
margin-left: 0;
}
#recipe #category li a {
position: relative;
display: block;
padding: 20px;
border-radius: 8px;
color: #000;
font-size: 129%;
text-align: center;
line-height: 1;
}
#recipe #category li a:before {
content: "";
position: absolute;
left: -3px;
top: -3px;
display: block;
width: 100%;
height: 100%;
border: 3px #fff solid;
border-radius: 10px;
}
#recipe #category li a:hover {
text-decoration: none;
}
#recipe #category li a[href$="=pan"] {
background-color: #ffb3a4;
}
#recipe #category li a[href$="=pan"]:hover:before,
#recipe #category li a[href$="=pan"].active:before {
border-color: #f00;
}
#recipe #category li a[href$="=side-dish"] {
background-color: #88b3d7;
}
#recipe #category li a[href$="=side-dish"]:hover:before,
#recipe #category li a[href$="=side-dish"].active:before {
border-color: #00a8ff;
}
#recipe #category li a[href$="=salad"] {
background-color: #bfffd7;
}
#recipe #category li a[href$="=salad"]:hover:before,
#recipe #category li a[href$="=salad"].active:before {
border-color: #00ff60;
}
#recipe #category li a[href$="=dressing"] {
background-color: #fffdbf;
}
#recipe #category li a[href$="=dressing"]:hover:before,
#recipe #category li a[href$="=dressing"].active:before {
border-color: #fff600;
}
#recipe #category li a[href$="=dessert"] {
background-color: #ffe8bf;
}
#recipe #category li a[href$="=dessert"]:hover:before,
#recipe #category li a[href$="=dessert"].active:before {
border-color: #ffa200;
}
#recipe #category li a[href$="=drink"] {
background-color: #f2bfff;
}
#recipe #category li a[href$="=drink"]:hover:before,
#recipe #category li a[href$="=drink"].active:before {
border-color: #da44ff;
}
@media screen and (max-width: 768px) {
#recipe #category {
text-align: center;
}
#recipe #category li {
float: none;
display: inline-block;
width: 47%;
margin: 3% 1.1% 0;
}
#recipe #category li a {
padding: 5% 2%;
}
}
#recipe #sugTitle {
margin-top: 45px;
font-size: 171%;
overflow: hidden;
}
#recipe #sugTitle span {
position: relative;
padding-right: 15px;
background-color: #fff;
}
#recipe #sugTitle span:before {
content: "";
position: absolute;
z-index: -1;
left: 100%;
top: 50%;
display: block;
width: 5000%;
height: 1px;
margin-left: -5px;
border: 0;
border-width: 0 0 5px;
border-style: solid;
transform: translateY(-50%);
background-position: 50%;
}
#recipe #sugTitle[class^="pan"] span:before {
border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1"><circle fill="#ffb3a4" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat;
}
#recipe #sugTitle[class^="side-dish"] span:before {
border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1"><circle fill="#88b3d7" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat;
}
#recipe #sugTitle[class^="salad"] span:before {
border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1"><circle fill="#bfffd7" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat;
}
#recipe #sugTitle[class^="dressing"] span:before {
border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1"><circle fill="#fffdbf" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat;
}
#recipe #sugTitle[class^="dessert"] span:before {
border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1"><circle fill="#ffe8bf" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat;
}
#recipe #sugTitle[class^="drink"] span:before {
border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1"><circle fill="#f2bfff" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat;
}
@media screen and (max-width: 768px) {
#recipe #sugTitle {
margin-top: 5%;
}
}
#recipe #cooking li {
float: left;
width: 570px;
margin-top: 85px;
}
#recipe #cooking li:nth-child(3n-1) {
margin-left: 30px;
}
#recipe #cooking li.clear {
float: none;
width: 0;
margin: 0;
}
#recipe #cooking li figure {
border: 1px #000 solid;
text-align: center;
}
#recipe #cooking li em {
display: block;
margin: 10px 0;
font-size: 171%;
text-align: center;
}
#recipe #cooking li .clearFix > *:first-child {
margin-left: 0;
}
#recipe #cooking li .clearFix > *:last-child {
margin-right: 0;
}
#recipe #cooking li .clearFix .grid_1 {
padding: 25px 0;
font-size: 129%;
text-align: center;
letter-spacing: 0.2em;
line-height: 1;
background-color: #ffb3a4;
}
#recipe #cooking li .clearFix .grid_2 {
font-size: 100%;
line-height: 1.5;
}
@media screen and (max-width: 768px) {
#recipe #cooking li {
float: none;
width: 100%;
margin: 5% 0 0 !important;
}
#recipe #cooking li.clear {
margin: 0 !important;
}
#recipe #cooking li em {
margin: 3% 0;
}
#recipe #cooking li .clearFix > * {
margin: 0;
}
#recipe #cooking li .clearFix .grid_1 {
margin: 0;
padding: 2%;
}
#recipe #cooking li .clearFix .grid_2 {
margin-top: 1%;
}
#recipe #cooking li .clearFix .grid_2 + .grid_1 {
margin-top: 3%;
}
}

#item #product > figure {
text-align: center;
}
#item #product > div em {
display: block;
color: #bf3b53;
font-size: 213%;
}
#item #product > div h3 {
margin: 10px 0 45px;
font-size: 339%;
line-height: 1.3;
}
#item #product > div h3 span {
display: block;
font-size: 65%;
}
#item #product > div p {
font-size: 171%;
line-height: 1.2;
}
#item #product > div form {
display: block;
margin-top: 35px;
}
#item #product > div form div input {
width: 3.5em;
height: 2.5em;
margin: 0 15px 0 50px;
padding: 10px;
border: 2px #d8d8d8 solid;
border-radius: 10px;
font-size: 143%;
vertical-align: bottom;
}
#item #product > div form input[type="submit"] {
width: 370px;
margin-top: 30px;
padding: 20px 0;
border: none;
border-radius: 10px;
color: #fff;
font-size: 199%;
text-align: center;
line-height: 1;
background-color: #ffb3a4;
transition: all 0.5s;
}
#item #product > div form input[type="submit"]:hover {
opacity: 0.6;
}
@media screen and (max-width: 768px) {
#item #product > * {
margin: 0;
}
#item #product > div {
margin-top: 4%;
}
#item #product > div em {
font-size: 171%;
}
#item #product > div h3 {
font-size: 213%;
}
#item #product > div p {
font-size: 122%;
}
#item #product > div form {
margin-top: 7%;
}
#item #product > div form div input {
margin: 0 3%;
}
#item #product > div form input[type="submit"] {
margin-top: 7%;
padding: 4% 0;
font-size: 171%;
}
}
#item #info {
margin-top: 70px;
}
#item #info > ul {
text-align: center;
}
#item #info > ul li {
margin: 0 15px;
border: 1px #000 solid;
}
#item #info > div table tbody tr th,
#item #info > div table tbody tr td {
padding: 10px 20px;
border-left: 1px #000 solid;
border-bottom: 1px #000 solid;
font-size: 129%;
vertical-align: top;
letter-spacing: -0.05em;
}
#item #info > div table tbody tr:first-child th,
#item #info > div table tbody tr:first-child td {
border-top: 1px #000 solid;
}
#item #info > div table tbody tr th {
width: 150px;
}
#item #info > div table tbody tr td {
border-right: 1px #000 solid;
}
@media screen and (max-width: 768px) {
#item #info {
margin-top: 8%;
}
#item #info > * {
margin: 0;
}
#item #info > ul li {
max-width: 45%;
margin: 0 1.5%;
}
#item #info > div {
margin-top: 7%;
}
#item #info > div table {
display: block;
}
#item #info > div table tbody {
display: block;
}
#item #info > div table tbody tr {
display: block;
}
#item #info > div table tbody tr th,
#item #info > div table tbody tr td {
display: block;
width: 100% !important;
}
#item #info > div table tbody tr:first-child td {
border-top: none;
}
#item #info > div table tbody tr th {
padding: 3% 3% 0;
border-right: 1px #000 solid;
border-bottom: none;
}
#item #info > div table tbody tr td {
padding: 0 3% 3%;
font-size: 115%;
}
}

#good .good h3 {
font-size: 255%;
text-align: center;
}
#good .good h3 span {
color: #bf3b53;
font-size: 129%;
}
#good .good .inlineList {
margin-top: 60px;
text-align: center;
}
#good .good .inlineList li:nth-child(2n) {
margin: 0 150px;
}
#good .good p {
margin-top: 90px;
font-size: 192%;
text-align: center;
}
#good .good p span {
color: #bf3b53;
}
@media screen and (max-width: 768px) {
#good .good h3 {
font-size: 185%;
}
#good .good h3 span {
display: block;
}
#good .good .inlineList {
margin-top: 5%;
}
#good .good .inlineList li {
width: 27%;
margin: 0 2% !important;
}
#good .good p {
margin-top: 5%;
font-size: 143%;
}
}
#good #flow > article {
margin: 115px auto 0;
padding-top: 55px;
padding-bottom: 95px;
border-radius: 10px;
background-color: #e1ecf5;
}
#good #flow > article .head .grid_2 {
position: relative;
top: -15px;
padding-top: 170px;
border-radius: 50%;
background-color: #fff;
}
#good #flow > article .head .grid_2 span {
position: absolute;
left: 0;
top: 50%;
display: block;
width: 100%;
font-size: 199%;
text-align: center;
transform: translateY(-50%);
}
#good #flow > article .head .grid_8 {
font-size: 129%;
letter-spacing: 0.2em;
line-height: 1.4;
}
#good #flow > article .pht {
margin-top: 90px;
text-align: center;
}
#good #flow > article .pht li {
float: left;
position: relative;
width: 25%;
}
#good #flow > article .pht li:before {
content: "";
position: absolute;
right: 0;
top: 0;
display: block;
width: 5px;
height: 100%;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 13"><circle fill="#000" cx="2.5" cy="2.5" r="2.5"/></svg>') repeat left center;
}
#good #flow > article .pht li:last-child:before {
display: none;
}
#good #flow > article .pht li figure {
display: flex;
width: 100%;
height: 195px;
align-items: flex-end;
}
#good #flow > article .pht li figure img {
display: block;
width: auto;
margin: 0 auto;
}
#good #flow > article .pht li p {
margin-top: 50px;
font-size: 157%;
text-align: center;
}
#good #flow > article > figure {
position: relative;
margin-top: 115px;
text-align: center;
}
#good #flow > article > figure figcaption {
margin-top: 85px;
font-size: 129%;
}
#good #flow > article > figure + figure {
margin-top: 60px;
padding-top: 110px;
}
#good #flow > article > figure + figure:before {
content: "";
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 5px;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 5"><circle fill="#000" cx="2.5" cy="2.5" r="2.5"/></svg>') repeat left center;
}
#good #flow > article .freshness {
margin-top: 80px;
text-align: center;
}
#good #flow > article .freshness li {
position: relative;
width: 194px;
height: 194px;
margin: 0 30px;
border: 3px #86adcd solid;
border-radius: 50%;
}
#good #flow > article .freshness li:first-child {
margin-left: 0;
}
#good #flow > article .freshness li:last-child {
margin-right: 0;
}
#good #flow > article .freshness li span {
position: absolute;
left: 0;
right: 0;
top: 50%;
display: block;
width: 90%;
margin: auto;
font-size: 122%;
text-align: center;
transform: translateY(-50%);
}
#good #flow > article .freshness li span em {
color: #f00;
}
#good #flow > article.bodyoil {
padding-bottom: 55px;
margin-top: 30px;
}
#good #flow > article.bodyoil p {
font-size: 129%;
}
#good #flow > article.bodyoil h5 {
font-size: 157%;
margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
#good #flow > article {
margin: 11% auto 0;
padding: 5% 2%;
}
#good #flow > article .head .grid_2 {
float: left;
top: 0;
width: 100px;
margin: 0 15px 10px 0;
padding-top: 100px;
}
#good #flow > article .head .grid_2 span {
font-size: 143%;
}
#good #flow > article .head .grid_8 {
margin: 0;
}
#good #flow > article .pht {
margin-top: 6%;
}
#good #flow > article .pht li {
float: none;
width: 100%;
padding: 3% 0;
}
#good #flow > article .pht li:before {
top: auto;
bottom: 0;
width: 100%;
height: 5px;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 5"><circle fill="#000" cx="2.5" cy="2.5" r="2.5"/></svg>') repeat left center;
}
#good #flow > article .pht li figure {
display: block;
height: auto;
align-items: baseline;
}
#good #flow > article .pht li p {
margin-top: 50px;
font-size: 157%;
text-align: center;
}
#good #flow > article > figure {
margin-top: 4%;
}
#good #flow > article > figure figcaption {
margin-top: 5%;
}
#good #flow > article > figure + figure {
margin-top: 4%;
padding-top: 7%;
}
#good #flow > article .freshness {
margin-top: 2%;
}
#good #flow > article .freshness li {
width: 45%;
height: 0;
margin: 3% 2% 0 !important;
padding-top: 45%;
}
#good #flow > article .freshness li span {
font-size: 93%;
letter-spacing: -0.1em;
}
#good #flow > article.grid_12 table.grid_10.omega.prefix_2.alpha {
padding-left: 0;
}
#good #flow > article.grid_12 table.grid_10.omega.prefix_2.alpha th,
#good #flow > article.grid_12 table.grid_10.omega.prefix_2.alpha td {
display: block;
}
}
#good #flow #req {
margin-top: 85px;
}
#good #flow #req h5 {
font-size: 213%;
line-height: 1;
}
#good #flow #req h5 span {
position: relative;
display: inline-block;
}
#good #flow #req h5 span:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
top: 25%;
display: block;
width: 105%;
height: 50%;
background-color: #ffb3a4;
transform: skewX(-10deg);
}
#good #flow #req p {
margin-top: 25px;
font-size: 129%;
}
@media screen and (max-width: 768px) {
#good #flow #req {
margin-top: 7%;
}
#good #flow #req h5 {
font-size: 178%;
}
}

#why h3 {
font-size: 255%;
text-align: center;
}
#why h3 span {
color: #bf3b53;
font-size: 129%;
}
#why figure {
margin-top: 30px;
text-align: center;
}
#why p {
margin-top: 40px;
font-size: 192%;
text-align: center;
}
#why p span {
color: #bf3b53;
}
#why + .yBox {
margin-top: 80px;
}
#why + .yBox p {
margin-top: 0;
}
@media screen and (max-width: 768px) {
#why h3 {
font-size: 143%;
}
#why h3 span {
display: block;
line-height: 1;
}

#why .inlineList {
margin-top: 5%;
}

#why .inlineList li {
width: 27%;
margin: 0 2% !important;
}

#why p {
margin-top: 5%;
font-size: 143%;
}

#why + .yBox {
margin-top: 15%;
}
}

.annotation {
margin-top: 20px !important;
margin-left: 15px;
margin-right: 15px;
font-size: 14px !important;
}

.inlineLinolenic {
text-align: left;
letter-spacing: 0.4em;
display: table;
margin: 50px 130px 0;
}
.inlineLinolenic > div {
display: table-cell;
font-size: 1rem;
letter-spacing: 0;
vertical-align: middle;
margin-right: 20px;
}
@media screen and (max-width: 768px) {
.inlineLinolenic {
margin: 0;
display: block;
}
.inlineLinolenic > div {
margin-right: 0;
margin-bottom: 20px !important;
width: 100% !important;
display: block;
}
}

.spoon {
width: 300px;
margin: 50px auto 0;
padding: 15px;
border-radius: 10px;
font-size: 129%;
text-align: center;
line-height: 1.4;
background-color: #e1ecf5;
margin-left: 20px;
/*.spoon{
	margin-top: 40px;
	padding: 0 410px;
	.grid_2.alpha{
		margin-top: 10px;
		text-align: left;
	}
	@include mq768 {
		padding: 0;
		.grid_2.alpha{
			text-align: center;
		}
	}
}*/
}
.spoon .spoon01 {
width: 30%;
margin-right: 10px;
}
@media screen and (max-width: 768px) {
.spoon {
margin-left: 0;
margin-top: 20px;
}
.spoon > * {
vertical-align: middle;
}
}

.linolenic {
position: absolute;
right: 0;
bottom: -80px;
}
.linolenic img {
height: 600px;
}
@media screen and (max-width: 768px) {
.linolenic {
display: none;
}
}

#balance {
margin-top: 60px;
margin-bottom: 180px;
}
#balance > section.clearFix {
position: relative;
padding: 60px 0;
border-radius: 10px;
background-color: #e1ecf5;
}
#balance > section.clearFix:before {
content: "";
position: absolute;
left: 50%;
top: 60px;
bottom: 60px;
display: block;
width: 5px;
height: auto;
margin-left: -2.5px;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 13"><circle fill="#000" cx="2.5" cy="2.5" r="2.5"/></svg>') repeat left center;
}
#balance > section.clearFix article {
float: left;
width: 50%;
text-align: center;
}
#balance > section.clearFix article h5 {
display: inline-block;
padding: 10px 25px;
border-radius: 10px;
font-size: 192%;
line-height: 1;
background-color: #fff;
}
#balance > section.clearFix article figure {
margin-top: 110px;
}
#balance > section.clearFix article div {
width: 370px;
margin: 35px auto 0;
padding: 20px;
border-radius: 10px;
font-size: 115%;
text-align: left;
background-color: #fff;
}
#balance > section.clearFix article div ul {
margin-top: 1em;
}
#balance > section.clearFix article div ul li {
position: relative;
padding-left: 1em;
}
#balance > section.clearFix article div ul li:before {
content: "・";
position: absolute;
left: 0;
top: 0;
}
#balance .description {
position: relative;
text-align: center;
}
#balance .description h5 {
margin: 60px 0 30px;
font-size: 213%;
text-align: left;
line-height: 1;
}
#balance .description h5 span {
position: relative;
display: inline-block;
}
#balance .description h5 span:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
top: 25%;
display: block;
width: 105%;
height: 50%;
background-color: #ffb3a4;
transform: skewX(-10deg);
}
#balance .description > p {
font-size: 129%;
text-align: left;
}
#balance .description hr {
display: block;
margin: 85px 0 35px;
width: 100%;
height: 48px;
background: url(../images/page/arrow01.png) center no-repeat;
}
#balance .description > strong {
display: block;
margin-bottom: 55px;
font-size: 248%;
text-align: center;
line-height: 1.33;
}
#balance .description .indication {
display: inline-block;
width: 300px;
padding: 15px 45px;
border-radius: 10px;
font-size: 115%;
text-align: center;
line-height: 1.4;
background-color: #e1ecf5;
}
#balance .description .indication span {
color: #bf3b53;
font-size: 143%;
}
#balance + .yBox {
margin-top: 80px;
}
@media screen and (max-width: 768px) {
#balance {
margin-top: 8%;
margin-bottom: 0;
}
#balance > section.clearFix {
padding: 4%;
}
#balance > section.clearFix:before {
display: none;
}
#balance > section.clearFix article {
float: none;
width: 100%;
padding-bottom: 5%;
}
#balance > section.clearFix article + article {
position: relative;
margin-top: 5%;
padding-top: 10%;
}
#balance > section.clearFix article + article:before {
content: "";
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 5px;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 5"><circle fill="#000" cx="2.5" cy="2.5" r="2.5"/></svg>') repeat left center;
}
#balance > section.clearFix article h5 {
padding: 3%;
font-size: 143%;
}
#balance > section.clearFix article figure {
margin-top: 7%;
}
#balance > section.clearFix article div {
width: 90%;
margin: 4% auto 0;
padding: 3%;
font-size: 115%;
}
#balance > section.clearFix article div ul {
margin-top: 1em;
}
#balance > section.clearFix article div ul li {
position: relative;
padding-left: 1em;
}
#balance > section.clearFix article div ul li:before {
content: "・";
position: absolute;
left: 0;
top: 0;
}

#balance .description h5 {
margin: 8% 0 4%;
font-size: 178%;
}
#balance .description hr {
height: 0;
margin: 10% 0 5%;
padding-top: 6%;
background-size: contain;
}
#balance .description > strong {
margin-bottom: 4%;
font-size: 171%;
}
#balance .description .indication {
margin: 6% auto 0;
padding: 3% 5%;
}

#balance + .yBox {
margin-top: 15%;
}
}

#flax .clearFix {
padding: 80px 0 35px;
border-radius: 10px;
background-color: #e1ecf5;
}
#flax .clearFix p {
font-size: 129%;
}
#flax .clearFix > figure.grid_5 {
position: relative;
right: 220px;
}
@media screen and (max-width: 768px) {
#flax .clearFix {
padding: 5%;
}
#flax .clearFix > * {
margin: 0;
padding: 0;
}
#flax .clearFix figure {
margin-top: 4%;
text-align: center;
}
#flax .clearFix > figure.grid_5 {
position: static;
}
}
#flax .flaxbbbox {
position: relative;
margin-bottom: 20px;
}
#flax .flaxbbbox .flexbb {
position: absolute;
right: -10px;
bottom: -35px;
}
@media screen and (max-width: 768px) {
#flax .flaxbbbox {
margin-bottom: 0;
}
#flax .flaxbbbox .flexbb {
display: none;
}
}

#flaxDetail {
margin-top: 95px;
}
#flaxDetail .inlineList {
margin-top: 30px;
}
#flaxDetail .inlineList li {
width: 33.333%;
border-left: 1px #ecc94c solid;
}
#flaxDetail .inlineList li:nth-child(3n+1) {
border-left: 0;
}
#flaxDetail .inlineList li:nth-child(n+4) {
padding-top: 25px;
border-top: 1px #ecc94c solid;
}
#flaxDetail .inlineList li em {
display: block;
padding-bottom: 10px;
font-size: 129%;
text-align: center;
line-height: 1;
}
#flaxDetail .inlineList li em span {
position: relative;
display: inline-block;
}
#flaxDetail .inlineList li em span:before {
content: "";
position: absolute;
z-index: -1;
left: -5%;
top: 5%;
display: block;
width: 110%;
height: 90%;
background-color: #ffb3a4;
transform: skewX(-10deg);
}
#flaxDetail .inlineList li figure {
display: flex;
text-align: center;
align-items: center;
}
#flaxDetail .inlineList li figure img {
margin: 0 auto;
}
#flaxDetail .inlineList li p {
margin-top: 10px;
padding: 10px 60px 1.28em;
line-height: 1.28;
}
@media screen and (max-width: 768px) {
#flaxDetail {
margin-top: 15%;
}
#flaxDetail .inlineList {
margin-top: 0;
}
#flaxDetail .inlineList li {
width: 100%;
padding: 3% !important;
border-left: none !important;
border-top: 1px #ecc94c solid;
}
#flaxDetail .inlineList li:first-child {
border-top: none;
}
#flaxDetail .inlineList li em {
padding-bottom: 3%;
}
#flaxDetail .inlineList li figure {
display: block;
align-items: baseline;
}
#flaxDetail .inlineList li p {
margin-top: 0;
padding: 4%;
}
}

#working {
margin-top: 65px;
}
#working .inner {
margin: 0 auto;
}
#working .inner .grid_7 h4 {
font-size: 213%;
line-height: 1;
}
#working .inner .grid_7 h4 span {
position: relative;
display: inline-block;
}
#working .inner .grid_7 h4 span:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
top: 25%;
display: block;
width: 105%;
height: 50%;
background-color: #ffb3a4;
transform: skewX(-10deg);
}
#working .inner .grid_7 p {
margin-top: 30px;
}
#working .inner .grid_7 .inlineList {
margin-top: 60px;
text-align: center;
}
#working .inner .grid_7 .inlineList li {
position: relative;
width: 250px;
height: 250px;
border: 3px #88b3d7 solid;
border-radius: 50%;
}
#working .inner .grid_7 .inlineList li + li {
margin-left: 100px;
}
#working .inner .grid_7 .inlineList li figure {
position: absolute;
left: 0;
top: 50%;
display: block;
width: 100%;
text-align: center;
transform: translateY(-50%);
}
#working .inner .grid_7 .inlineList li figure figcaption {
margin-top: 15px;
font-size: 115%;
}
@media screen and (max-width: 768px) {
#working {
margin-top: 8%;
}
#working .inner .grid_7 h4 {
font-size: 178%;
}
#working .inner .grid_7 p {
margin-top: 4%;
}
#working .inner .grid_7 .inlineList {
margin-top: 8%;
}
#working .inner .grid_7 .inlineList li {
position: relative;
width: 45%;
height: 0;
margin: 0 2% !important;
padding-top: 45%;
}
#working .inner .grid_7 .inlineList li figure img {
max-width: 40%;
}
#working .inner .grid_7 .inlineList li figure figcaption {
font-size: 72%;
}
#working .inner .grid_3 {
margin: 4% 0 0;
text-align: right;
}
#working .inner .grid_3 img {
width: 80%;
max-width: 300px;
}
}

#fattyacid .inner {
margin: 0 auto;
}
#fattyacid .container {
margin-top: 50px;
font-size: 115%;
}
#fattyacid .container .whyBtn a {
display: block;
background-color: #e1ecf5;
width: 200px;
border-radius: 5px;
margin: 0 auto;
text-align: center;
margin-top: 15px;
font-size: 18px;
}
@media screen and (max-width: 768px) {
#fattyacid .container .whyBtn a {
position: static;
margin-bottom: 30px;
}
}
#fattyacid .container .whyBtn a:hover {
text-decoration: none;
opacity: 0.6;
}
#fattyacid .container .grid_3.omega {
position: relative;
top: 140px;
right: 20px;
}
@media screen and (max-width: 768px) {
#fattyacid .container .grid_3.omega {
position: static;
margin-top: 20px;
}
}
#fattyacid .container .omegafigure {
margin: 30px 0;
}
#fattyacid .container .omegafigure > div {
width: 30%;
border-radius: 5px;
vertical-align: middle !important;
}
#fattyacid .container .omegafigure > div div {
text-align: center;
padding: 10px 0;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
#fattyacid .container .omegafigure > div p {
padding: 20px;
}
#fattyacid .container .omegafigure > div.omega6 {
border: #ecc94c 1px solid;
}
#fattyacid .container .omegafigure > div.omega6 div {
background: #fffdbf;
}
#fattyacid .container .omegafigure > div.arrow02 {
text-align: center;
width: 20%;
}
#fattyacid .container .omegafigure > div.omega3 {
border: #88b3d7 1px solid;
}
#fattyacid .container .omegafigure > div.omega3 div {
background: #e1ecf5;
}
@media screen and (max-width: 768px) {
#fattyacid .container .omegafigure > div {
width: 100%;
}
#fattyacid .container .omegafigure > div.arrow02 {
transform: rotate(90deg);
margin: 50px 0;
width: 100%;
}
}