@charset "utf-8"; /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- 汎用 ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ body {min-width: 100%; padding-top: 90px;} #content.site-content {margin-bottom: 9.6vw;} .site-content-contain {min-height: calc(100vh - 90px);} .pc {display: none;} .sp {display: block;} .container {margin: 0 20px;} @media screen and (min-width: 640px) { .container {margin: 0 30px;} } /*-------------------------------------------------------------------------- 部品 --------------------------------------------------------------------------*/ /*------------------------------------ 汎用見出し ------------------------------------*/ .g-h img {width: 26px; height: auto; left: 8px; margin: 0 auto;} .g-h span {font-size: 14px;} @media screen and (min-width: 640px) { .g-h img {width: 39px; left: 12px; margin: 0 auto 6px;} .g-h span {font-size: 22px;} } /*------------------------------------ 汎用ヘッダー ------------------------------------*/ .page-heading {margin: 21px 0 24px;} .page-heading h1 {margin-bottom: 22px;} .page-heading h1 .icon {left: 6px; width: 32px; height: auto; margin: 0 auto;} .page-heading h1 .txt {font-size: 15px;} .page-heading h1 .icon.recipe {left: 0;} @media screen and (min-width: 640px) { .page-heading {margin: 30px 0 35px;} .page-heading h1 {margin-bottom: 33px;} .page-heading h1 .icon {left: 9px; width: 48px;} .page-heading h1 .txt {font-size: 22px;} } /*------------------------------------ MORE ------------------------------------*/ .more {width: 108px; height: 27px; font-size: 11px;} @media screen and (min-width: 640px) { .more {width: 162px; height: 40px; font-size: 14px;} } /*------------------------------------ ページネーション ------------------------------------*/ .pagination .page-numbers, .pagination .page-numbers.current {font-size: 1.25em!important;} /*------------------------------------ 前後記事リンク ------------------------------------*/ .postlink li {font-size: .9em;} /*-------------------------------------------------------------------------- ヘッダー --------------------------------------------------------------------------*/ /*sp*/ header.site-header .sp-header {justify-content: space-between; align-items: center; padding: 10px 0;} header.site-header .sp-header .site-branding {margin: 0 auto 0 30px!important;} header.site-header .sp-header .site-branding .site-title a img {width: 53px; height: auto;} header.site-header .sp-header .header-content {margin-right: 12px;} header.site-header .sp-header .header-content .top-content {margin-bottom: 8px;} header.site-header .sp-header .header-content .top-content .tel {justify-content: flex-end; align-items: center; margin-bottom: 4px;} header.site-header .sp-header .header-content .top-content .tel img {width: 14px; height: auto; margin-right: 4px;} header.site-header .sp-header .header-content .top-content .tel span {font-size: 21px; font-weight: 700; line-height: 1;} header.site-header .sp-header .header-content .top-content .hours {font-size: 10px; line-height: 1; text-align: right; margin: 0; transform: scale(.9); transform-origin: right center;} header.site-header .sp-header .header-content .bottom-content {justify-content: flex-end; align-items: center; padding-right: 74px;} header.site-header .sp-header .header-content .bottom-content .btn {font-size: 13px; line-height: 1; margin-right: 10px;} header.site-header .sp-header .header-content .bottom-content .cart {margin-left: 4px;} header.site-header .sp-header .header-content .bottom-content .cart img {display: block; width: 22px; height: auto;} header.site-header .sp-header .header-toggle {position: fixed; top: 54px; right: 12px; display: flex; justify-content: center; align-items: center; width: 64px; height: 26px; color: #fff; font-size: 13px; background: #000; border: 1px solid #000; margin: 0; z-index: 9001;} /*pc（ハンバーガー中身）*/ header.site-header .pc-header {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; margin: 0; overflow-y: scroll; opacity: 0; visibility: hidden; z-index: 9002; transition: .3s ease;} header.site-header .pc-header .inner {display: flex; flex-direction: column; justify-content: flex-start; align-items: center; height: 100%; opacity: 0; transition: opacity .3s ease;} header.site-header .pc-header .site-branding {order: 1; margin: 0!important;} header.site-header .pc-header .site-branding .site-title {padding: 95px 0 38px;} header.site-header .pc-header .site-branding .site-title a {margin: 0 auto;} header.site-header .pc-header .site-branding .site-title a img {width: 206px; height: auto;} header.site-header .pc-header .contact-info {order: 4; flex-direction: column; justify-content: center; min-height: 206px; margin-bottom: 42px;} header.site-header .pc-header .contact-info .tel-big {margin-bottom: 20px;} header.site-header .pc-header .contact-info .tel-big .notice {font-size: 12px; text-align: center; margin-bottom: 8px;} header.site-header .pc-header .contact-info .tel-big .free-dial img {width: 18px; height: auto; margin-right: 4px;} header.site-header .pc-header .contact-info .tel-big .free-dial span .title {font-size: 8px;} header.site-header .pc-header .contact-info .tel-big .free-dial span .num {font-size: 28px;} header.site-header .pc-header .contact-info .tel-small p {font-size: 15px; margin-bottom: 2px;} header.site-header .pc-header .contact-info .hours {font-size: 15px; text-align: center; margin: 16px 0 0;} header.site-header .pc-header .h-navi {order: 2; width: 100%; margin-bottom: 20px;} header.site-header .pc-header .h-navi #top-menu {margin: 0;} header.site-header .pc-header .h-navi #top-menu > li {width: 100%;} header.site-header .pc-header .h-navi #top-menu > li a {font-size: 15px; text-align: center; padding: 10px 0;} header.site-header .pc-header .h-navi #top-menu li.current-menu-item a {color: #fff; background: #d61619;} header.site-header .pc-header .h-navi #top-menu > li.menu-item-has-children > a {position: relative;} header.site-header .pc-header .h-navi #top-menu > li.menu-item-has-children > a:after {display: inline-block; content: ""; position: relative; top: -1px; right: -10px; width: 0; height: 0; border-width: 8px 5px 0 5px; border-style: solid; border-color: #d61619 transparent transparent transparent; transition: .3s ease;} header.site-header .pc-header .h-navi #top-menu > li.menu-item-has-children > a.open:after {transform: rotateX(180deg);} header.site-header .pc-header .h-navi #top-menu > li > .sub-menu {display: none; padding: 0; background: #eee;} header.site-header .pc-header .h-navi #top-menu > li > .sub-menu li:not(:last-child) {border-bottom: 1px solid #f8f8f8;} header.site-header .pc-header .ec-links {order: 3; position: static; justify-content: center; align-items: center; width: 100%; min-height: 90px; margin-bottom: 36px;} header.site-header .pc-header .ec-links .shop-btn.more {width: 90px; height: 90px; margin: 0;} header.site-header .pc-header .ec-links .shop-btn.more span {font-size: 16px; letter-spacing: -2.4px!important;} header.site-header .pc-header .ec-links .shop-btn.more .img {width: 32px; height: 33px; margin-bottom: 6px;} header.site-header .pc-header .ec-links .sub-btn {margin-left: 26px;} header.site-header .pc-header .ec-links .sub-btn a.more:not(:last-child) {margin-bottom: 8px;} header.site-header .pc-header .ec-links .sub-btn a.more span {padding: 8px 15px;} header.site-header .pc-header .header-toggle {position: fixed; top: 30px; right: 18px; width: 30px; height: 12px; margin: 0; padding: 15px; z-index: 9003;} header.site-header .pc-header .header-toggle div {position: absolute; left: 0; width: 100%; height: 2px; background: #000; transition: .6s ease;} header.site-header .pc-header .header-toggle div:nth-child(1) {top: 6px; transform: rotate(-225deg);} header.site-header .pc-header .header-toggle div:nth-child(2) {top: 6px; transform: rotate(225deg);} .menu-open header.site-header .pc-header {opacity: 1; visibility: visible; transition: .3s ease;} .menu-open header.site-header .pc-header .inner {opacity: 1; transition: .5s .3s ease;} @media screen and (min-width: 640px) { header.site-header .sp-header .header-content .bottom-content {padding-right: 90px;} header.site-header .sp-header .header-toggle {width: 78px;} } /*-------------------------------------------------------------------------- フッター --------------------------------------------------------------------------*/ footer.site-footer {padding-top: 36px;} footer.site-footer:before {top: calc(-9.6vw + 2px); height: 9.6vw; background-image: url(../img/common/footer-bg_sp.png);} footer.site-footer * {font-size: 12px;} footer.site-footer .container {margin: 0;} footer.site-footer .f-navi {margin: 0 20px 48px;} footer.site-footer .f-navi ul li {margin-bottom: 14px;} footer.site-footer .f-navi ul li:last-child {margin-bottom: 0;} footer.site-footer .footer-content {display: block;} footer.site-footer .site-logo {margin-bottom: 34px;} footer.site-footer .site-logo a img {width: 120px; height: auto;} footer.site-footer .office-info {border-top: 1px solid #fff;} footer.site-footer .office-info:last-child {border-bottom: 1px solid #fff;} footer.site-footer .office-info > dt {position: relative; padding: 10px 30px;} footer.site-footer .office-info > dt:before {content: ""; position: absolute; top: 15px; right: 30px; width: 0; height: 0; border-style: solid; border-width: 10.5px 6.5px 0 6.5px; border-color: #fff transparent transparent transparent; transform-origin: center; transition: .3s ease;} footer.site-footer .office-info > dt.open:before {transform: rotateX(180deg);} footer.site-footer .office-info > dd {display: none; padding: 0 30px 10px;} footer.site-footer .office-info > dd .tel {margin: 0 0 10px;} footer.site-footer .office-info > dd .tel img {width: 16px; height: auto; margin-right: 4px;} footer.site-footer .office-info > dd .tel span {font-size: 24px;} footer.site-footer .copyright {margin: 28px 0 40px;} footer.site-footer .scroll {top: 4px; right: 27px;} footer.site-footer .scroll .arrow {width: 35px; height: 35px;} footer.site-footer .scroll .arrow:before {top: calc(50% - 8.5px); left: calc(50% - 9.5px); border-width: 0 9.5px 17px 9.5px;} footer.site-footer .scroll span {margin-top: 7px;} @media screen and (min-width: 640px) { footer.site-footer {padding-top: 48px;} footer.site-footer * {font-size: 14px;} footer.site-footer .f-navi {margin: 0 30px 48px;} footer.site-footer .f-navi ul {display: flex; justify-content: center; flex-wrap: wrap;} footer.site-footer .f-navi ul li {margin-right: 1.5em;} footer.site-footer .site-logo {margin-bottom: 48px;} footer.site-footer .site-logo a img {width: 160px;} } /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- フロントページ ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ /*------------------------------------ ヒーローヘッダー ------------------------------------*/ #main .hero-header {margin-bottom: 16px;} #main .hero-header #top-slider .slick-list, #main .hero-header #top-slider .slick-list li {height: 300px;} #main .hero-header #top-slider .slick-list li .logo {width: 44px; height: 89px; bottom: 14px; right: 17px;} #main .hero-header #top-slider .slick-list li .advertise {font-size: 18px; letter-spacing: -.675px!important;} #main .hero-header #top-slider .slick-list li .advertise span.small {font-size: 12px; letter-spacing: -.375px!important; margin: 15px 0 -33px;} #main .hero-header #top-slider .slick-list li .advertise.shadow {text-shadow: 0 0 6px #fff;} #main .hero-header #top-slider .slick-list li .center-box .logo.color-white {width: 88px; height: 180px; margin-bottom: 22px;} #main .hero-header #top-slider .slick-list li .center-box .logo.color-black {width: 74px; height: 152px; margin-bottom: 15px;} #main .hero-header #top-slider .slick-list li .center-box .advertise {font-size: 15px; letter-spacing: -.45px!important;} #main .hero-header #top-slider .slick-arrow {position: absolute; top: calc(50% - 20px); width: 40px; height: 40px; text-indent: 100%; white-space: nowrap; overflow: hidden; background: transparent; padding: 0; z-index: 2;} #main .hero-header #top-slider .slick-arrow.slick-prev {left: 0; right: auto;} #main .hero-header #top-slider .slick-arrow.slick-next {right: 0; left: auto;} #main .hero-header #top-slider .slick-arrow:before, #main .hero-header #top-slider .slick-arrow:after {content:""; position: absolute;} #main .hero-header #top-slider .slick-arrow:before {display: block; top: calc(50% - 8px); width: 16px; height: 16px; background: #fff; border-radius: 50%; opacity: .6; z-index: 3;} #main .hero-header #top-slider .slick-arrow.slick-prev:before {left: 5px;} #main .hero-header #top-slider .slick-arrow.slick-next:before {right: 5px;} #main .hero-header #top-slider .slick-arrow:after {top: calc(50% - 4px); width: 0; height: 0; border-style: solid; z-index: 4;} #main .hero-header #top-slider .slick-arrow.slick-prev:after {left: 9px; border-width: 4px 6px 4px 0; border-color: transparent #000 transparent transparent;} #main .hero-header #top-slider .slick-arrow.slick-next:after {right: 9px; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent #000;} @media screen and (min-width: 640px) { #main .hero-header {margin-bottom: 24px;} #main .hero-header #top-slider .slick-list, #main .hero-header #top-slider .slick-list li {height: 450px;} #main .hero-header #top-slider .slick-list li .logo {width: 66px; height: 134px; bottom: 21px; right: 26px;} #main .hero-header #top-slider .slick-list li .advertise {font-size: 24px;} #main .hero-header #top-slider .slick-list li .advertise span.small {font-size: 18px; margin: 22px 0 -50px;} #main .hero-header #top-slider .slick-list li .center-box .logo.color-white {width: 132px; height: 270px; margin-bottom: 33px;} #main .hero-header #top-slider .slick-list li .center-box .logo.color-black {width: 111px; height: 228px; margin-bottom: 22px;} #main .hero-header #top-slider .slick-list li .center-box .advertise {font-size: 22px;} #main .hero-header #top-slider .slick-arrow {top: calc(50% - 30px); width: 60px; height: 60px;} #main .hero-header #top-slider .slick-arrow:before {top: calc(50% - 12px); width: 24px; height: 24px;} #main .hero-header #top-slider .slick-arrow.slick-prev:before {left: 8px;} #main .hero-header #top-slider .slick-arrow.slick-next:before {right: 8px;} #main .hero-header #top-slider .slick-arrow:after {top: calc(50% - 6px);} #main .hero-header #top-slider .slick-arrow.slick-prev:after {left: 14px; border-width: 6px 9px 6px 0;} #main .hero-header #top-slider .slick-arrow.slick-next:after {right: 14px; border-width: 6px 0 6px 9px;} } /*------------------------------------ 新着情報 & 新規会員 ------------------------------------*/ #main .news-recruit {display: block; margin-bottom: 38px;} #main .news-recruit .news {margin-bottom: 27px;} #main .news-recruit .news h2 {margin-bottom: 7px;} #main .news-recruit .news h2 img {width: 26px; height: auto;} #main .news-recruit .news h2 span {font-size: 15px; margin-left: 4px;} #main .news-recruit .news .news-list {margin-bottom: 18px;} #main .news-recruit .news .news-list li .entry {padding: 1em 0;} #main .news-recruit .news .news-list li .entry time, #main .news-recruit .news .news-list li .entry h3 {font-size: 12px; letter-spacing: -1.2px!important;} #main .news-recruit .news .news-list li .entry time {padding: 0 1em 0 0;} #main .news-recruit .recruiting p {font-size: 11px; margin: 0;} @media screen and (min-width: 640px) { #main .news-recruit {display: flex; justify-content: space-between; margin-bottom: 56px;} #main .news-recruit .news {width: 52%; margin-bottom: 40px;} #main .news-recruit .news h2 {margin-bottom: 10px;} #main .news-recruit .news h2 img {width: 39px; height: auto;} #main .news-recruit .news h2 span {font-size: 22px; margin-left: 6px;} #main .news-recruit .news .news-list {margin-bottom: 27px;} #main .news-recruit .news .news-list li .entry time, #main .news-recruit .news .news-list li .entry h3 {font-size: 15px;} #main .news-recruit .recruiting {width: 44%; margin-top: 55px;} #main .news-recruit .recruiting p {font-size: 14px;} } /*------------------------------------ 特徴 ------------------------------------*/ #main .feature section {height: 400px;} #main .feature section h2 {font-size: 15px;} #main .feature section h3 {font-size: 21px;} #main .feature section p {font-size: 12px;} #main .feature .ambition {height: 300px;} #main .feature .ambition .inner {top: 65px; left: 50%;} #main .feature .ambition .inner img {width: 73px; height: auto; margin: 18px 10px 0 0;} #main .feature .ambition .inner h2 span {margin-left: .1em;} #main .feature .ambition .inner h2 span:last-child {margin-left: 0;} #main .feature .agri .inner {top: 19px; left: calc(47.125% - 84px); width: 168px; height: 228px;} #main .feature .agri h3 {margin-top: -6px;} #main .feature .agri p {margin: 6px 0 -6px;} #main .feature .agri .more.v-write {width: 24px; height: 126px; font-size: 11px; margin: 0 16px auto 0;} #main .feature .mission .inner {top: 26px; left: 13.1%; height: 361px;} #main .feature .contribute .inner {top: 35px; right: 11.7%; height: 283px;} @media screen and (min-width: 640px) { #main .feature section {height: 600px;} #main .feature section h2 {font-size: 22px;} #main .feature section h3 {font-size: 28px;} #main .feature section p {font-size: 16px;} #main .feature .ambition {height: 450px;} #main .feature .ambition .inner {top: 112px; left: 50%;} #main .feature .ambition .inner img {width: 110px; height: auto; margin: 32px 15px 0 0;} #main .feature .agri .inner {top: 28px; left: calc(47.125% - 116px); width: 232px; height: 310px;} #main .feature .agri h3 {margin-top: -9px;} #main .feature .agri p {margin: 9px 0 -9px;} #main .feature .agri .more.v-write {width: 36px; height: 179px; font-size: 14px; margin: 0 24px auto 0;} #main .feature .mission .inner {top: 39px; height: 542px;} #main .feature .contribute .inner {top: 52px; height: 424px;} } /*------------------------------------ 製品 ------------------------------------*/ #main .product {background-size: auto 100%; padding: 37px 0 60px;} #main .product .bnr-list {margin: 0 45px 32px;} #main .product .bnr-list li {width: 100%; margin-bottom: 24px;} #main .product .bnr-list li:nth-child(even) {margin-bottom: 0;} #main .product .item h2 {margin-bottom: 23px;} #main .product .item .product-list {width: 340px; margin: 0 auto 46px;} #main .product .item .product-list li {width: 104px; height: 108px; margin: 0 14px 9px 0; border-radius: 18px; box-shadow: 0 3px 6px rgba(0,0,0, .29);} #main .product .item .product-list li:nth-child(3n) {margin-right: 0;} #main .product .item .product-list li .entry {padding: 12px;} #main .product .item .product-list li .entry .img {width: 79px; height: 62px; margin-bottom: 9px;} #main .product .item .product-list li .entry .img img {max-width: 79px; max-height: 62px;} #main .product .item .product-list li .entry span {font-size: 13px;} @media screen and (max-width: 320px) { #main .product .item .product-list {width: 222px;} #main .product .item .product-list li:nth-child(3n) {margin-right: 14px;} #main .product .item .product-list li:nth-child(2n) {margin-right: 0;} } @media screen and (min-width: 640px) { #main .product {padding: 52px 0 82px;} #main .product .bnr-list {margin: 0 52px 52px;} #main .product .bnr-list li {width: calc((100% - 32px) / 2); margin: 0 32px 0 0;} #main .product .bnr-list li:nth-child(even) {margin-right: 0;} #main .product .item h2 {margin-bottom: 23px;} #main .product .item .product-list {width: 584px; margin: 0 auto 42px;} #main .product .item .product-list li {width: 128px; height: 132px; margin: 0 24px 18px 0; border-radius: 20px; box-shadow: 0 3px 6px rgba(0,0,0, .29);} #main .product .item .product-list li:nth-child(2n) {margin: 0 24px 18px 0;} #main .product .item .product-list li:nth-child(3n) {margin-right: 24px;} #main .product .item .product-list li:nth-child(4n) {margin-right: 0;} #main .product .item .product-list li .entry {padding: 14px;} #main .product .item .product-list li .entry .img {width: 88px; height: 69px; margin-bottom: 10px;} #main .product .item .product-list li .entry .img img {max-width: 88px; max-height: 69px;} #main .product .item .product-list li .entry span {font-size: 14px;} } /*------------------------------------ レシピ ------------------------------------*/ #main .recipe {padding: 32px 0 34px;} #main .recipe .g-h {margin-bottom: 24px;} #main .recipe .recipe-list {margin-bottom: 20px;} #main .recipe .recipe-list #recipe-list {width: 191px;} #main .recipe .recipe-list #recipe-list .slick-slide {margin: 0 5px;} #main .recipe .recipe-list #recipe-list .entry .img {height: 127px;} #main .recipe .recipe-list #recipe-list .entry h3 {font-size: 12px; margin: 7px 0;} #main .recipe .recipe-list #recipe-list .slick-arrow {top: calc(50% - 15px); width: 30px; height: 30px;} #main .recipe .recipe-list #recipe-list .slick-arrow.slick-prev {left: -15px;} #main .recipe .recipe-list #recipe-list .slick-arrow.slick-next {right: -15px;} #main .recipe .recipe-list #recipe-list .slick-arrow:before {top: 8px;} #main .recipe .recipe-list #recipe-list .slick-arrow.slick-prev:before {left: 8px; border-width: 7.5px 12px 7.5px 0;} #main .recipe .recipe-list #recipe-list .slick-arrow.slick-next:before {right: 8px; border-width: 7.5px 0 7.5px 12px;} @media screen and (min-width: 640px) { #main .recipe {padding: 42px 0 45px;} #main .recipe .g-h {margin-bottom: 34px;} #main .recipe .recipe-list {margin-bottom: 28px;} #main .recipe .recipe-list #recipe-list {width: 310px;} #main .recipe .recipe-list #recipe-list .slick-slide {margin: 0 8px;} #main .recipe .recipe-list #recipe-list .entry .img {height: 210px;} #main .recipe .recipe-list #recipe-list .entry h3 {font-size: 18px; margin: 10px 0;} #main .recipe .recipe-list #recipe-list .slick-arrow {top: calc(50% - 21px); width: 42px; height: 42px;} #main .recipe .recipe-list #recipe-list .slick-arrow.slick-prev {left: -21px;} #main .recipe .recipe-list #recipe-list .slick-arrow.slick-next {right: -21px;} #main .recipe .recipe-list #recipe-list .slick-arrow:before {top: 10px;} #main .recipe .recipe-list #recipe-list .slick-arrow.slick-prev:before {left: 10px; border-width: 11.25px 18px 11.25px 0;} #main .recipe .recipe-list #recipe-list .slick-arrow.slick-next:before {right: 10px; border-width: 11.25px 0 11.25px 18px;} } /*------------------------------------ 直営店舗 ------------------------------------*/ #main .directly-stores {width: 85.3vw; height: 32.5vw; margin: 24px auto 32px;} #main .directly-stores .inner {left: 13.1vw; top: 50%; transform: translateY(-50%);} #main .directly-stores .inner .g-h {margin-bottom: 3px;} @media screen and (min-width: 640px) { #main .directly-stores {margin: 36px auto 48px;} #main .directly-stores .inner .g-h {margin-bottom: 12px;} } /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- 個別ページ ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- ご挨拶 (greeting.php) --------------------------------------------------------------------------*/ #greeting .page-heading .img .inner p {font-size: .8em;} #greeting .page-heading .img .inner p em {font-size: 1.4em; margin-left: 6px;} #greeting .heading {margin: 56px auto 30px;} #greeting .heading .inner {font-size: 20px;} #greeting .heading .inner span {margin: 0 5px;} #greeting .heading .inner img {bottom: 16px; right: 8px; width: 75px;} #greeting .message {font-size: 1.25em; margin-bottom: 45px;} #greeting .message p {line-height: 2.5;} #greeting .img-list {display: block; margin: 0 20px;} #greeting .img-list li {margin-bottom: 10px;} #greeting .img-list li figure img {margin-bottom: 10px;} @media screen and (min-width: 640px) { #greeting .page-heading .img .inner p {font-size: 1em;} #greeting .page-heading .img .inner p em {font-size: 1.625em; margin-left: 9px;} #greeting h2 {font-size: 30px; margin: 84px auto 45px;} #greeting h2 span {margin: 0 8px;} #greeting h2 img {bottom: 24px; right: 12px; width: 112px;} #greeting .message {font-size: 1.125em; margin: 0 10px 68px;} } @media screen and (min-width: 1024px) { #greeting .img-list {display: flex; margin: 0 30px;} #greeting .img-list li {margin: 0 10px;} #greeting .img-list li figure img {margin-bottom: 15px;} } /*-------------------------------------------------------------------------- 農之蔵の農業 (agriculture.php) --------------------------------------------------------------------------*/ #agriculture {margin-bottom: -9.6vw;} #agriculture .message h2 {margin: 36px 20px 32px; font-size: 16px;} #agriculture .flow {padding: 32px 0 24.896vw;} #agriculture .flow section {flex-direction: column; margin-bottom: 8px;} #agriculture .flow section:nth-child(even) {flex-direction: column-reverse;} #agriculture .flow section .img img, #agriculture .flow section .img video {height: 56vw;} #agriculture .flow section .img.video #play {width: 59px; height: 59px;} #agriculture .flow section .img.video #play:before {top: 15px; right: 15px; border-width: 15px 0 15px 24px;} #agriculture .flow section .txt {margin-top: 16px;} #agriculture .flow section .txt h3 {font-size: 15px;} #agriculture .flow section .txt p {font-size: 13px;} @media screen and (max-width: 320px) { #agriculture .message h2 {margin: 36px 15px 32px; font-size: 15px;} } @media screen and (min-width: 640px) { #agriculture .message h2 {margin: 54px 60px 48px; font-size: 20px;} #agriculture .flow {padding: 48px 0 24.896vw;} #agriculture .flow section {flex-direction: row; justify-content: space-between; align-items: flex-start; margin-bottom: 25px;} #agriculture .flow section:nth-child(even) {flex-direction: row;} #agriculture .flow section .img {width: 300px;} #agriculture .flow section .img img, #agriculture .flow section .img video {height: 240px;} #agriculture .flow section .txt {width: calc(100% - 340px); margin: 0;} #agriculture .flow section .txt h3 {font-size: 18px;} #agriculture .flow section .txt p {font-size: 16px;} } /*-------------------------------------------------------------------------- 農之蔵物語 (story.php) --------------------------------------------------------------------------*/ #story {margin-bottom: -9.6vw;} #story section.message .container {margin: 42px 20px 46px;} #story section.message h2 {font-size: 20px; margin-bottom: 20px;} #story section.message .logo {width: 92px; height: auto; margin: 26px auto 40px;} #story section.item .item-name span.title {margin-bottom: 10px;} #story section.item .item-name.koun span.title {font-size: 15px;} #story section.item .item-name.tenkou span.title {font-size: 13px;} #story section.item .item-name span.name {font-size: 24px; margin-bottom: 5px;} #story section.item .item-name span.en {font-size: 12px; margin-bottom: 8px;} #story section.item .item-name span.look {font-size: 16px;} #story section.item .heading .img {height: 62.5vw;} #story section.item.koun .heading .txt {left: 66.6456%;} #story section.item.tenkou .heading .txt {left: 68.25%;} #story section.item .heading .salesoon {font-size: 12px; padding: 8px 12px;} #story section.item.koun .flow, #story section.item.tenkou .flow {background: 50% 0 / auto 100% repeat;} #story section.item.koun .flow {background-image: url(../img/story/koun_bg_sp.jpg); padding: 42px 0 52px;} #story section.item.tenkou .flow {background-image: url(../img/story/tenkou_bg_sp.jpg); padding: 42px 0 15.2vw;} #story section.item .flow .flow-list li:before {width: 36px; height: 36px;} #story section.item .flow .flow-list li:after {border-width: 15px 9px 0 9px;} #story section.item .flow .flow-list.small {margin: 0 20px;} #story section.item .flow .flow-list.small li {width: 47.5%; margin-bottom: 56px;} #story section.item .flow .flow-list.small li:before {bottom: -36px;} #story section.item .flow .flow-list.small li:after {bottom: -28px;} #story section.item .flow .flow-list.small li:nth-child(odd) {margin-right: 5%;} #story section.item .flow .flow-list.big li {margin: 0 20px 72px;} #story section.item .flow .flow-list.big li:before {top: -54px;} #story section.item .flow .flow-list.big li:after {top: -42px;} #story section.item .flow .flow-list.big li:last-child {margin-bottom: 0;} #story section.item .flow .flow-list li .img {margin-bottom: 10px;} #story section.item .flow .flow-list li .img .num {width: 56px; height: 56px; top: -12px; left: -12px; font-size: 14px;} #story section.item .flow .comingsoon {display: block;} #story section.item.koun .flow .comingsoon {margin-top: 42px;} #story section.item.koun .flow .comingsoon .img {width: 160px; height: auto; margin: 0 auto 25px;} #story section.item.tenkou .flow .comingsoon {margin-top: 32px;} #story section.item.tenkou .flow .comingsoon .img {width: 150px; height: auto; margin: 0 auto 25px;} @media screen and (min-width: 640px) { #story section.message .container {margin: 62px 30px 68px;} #story section.message h2 {font-size: 25px; margin-bottom: 30px;} #story section.message .logo {width: 138px; margin: 39px auto 60px;} #story section.item .item-name span.title {margin-bottom: 15px;} #story section.item .item-name.koun span.title {font-size: 18px;} #story section.item .item-name.tenkou span.title {font-size: 16px;} #story section.item .item-name span.name {font-size: 30px; margin-bottom: 8px;} #story section.item .item-name span.en {font-size: 15px; margin-bottom: 12px;} #story section.item .item-name span.look {font-size: 20px;} #story section.item .heading .img {height: 50vw;} #story section.item.koun .heading .txt {left: 71.406%;} #story section.item.tenkou .heading .txt {left: 73.125%;} #story section.item .heading .salesoon {font-size: 15px; padding: 12px 18px;} #story section.item.koun .flow {padding: 63px 0 78px;} #story section.item.tenkou .flow {padding: 63px 0 15.2vw;} #story section.item .flow .flow-list li:before {width: 54px; height: 54px;} #story section.item .flow .flow-list li:after {border-width: 22px 13px 0 13px;} #story section.item .flow .flow-list.small {width: 560px; margin: 0 auto;} #story section.item .flow .flow-list.small li {width: 260px; margin-bottom: 84px;} #story section.item .flow .flow-list.small li:before {bottom: -54px;} #story section.item .flow .flow-list.small li:after {bottom: -42px;} #story section.item .flow .flow-list.small li:nth-child(odd) {margin-right: 40px;} #story section.item .flow .flow-list.big li {width: 450px; margin: 0 auto 108px;} #story section.item .flow .flow-list.big li:before {top: -81px;} #story section.item .flow .flow-list.big li:after {top: -63px;} #story section.item .flow .flow-list li .img {margin-bottom: 15px;} #story section.item .flow .flow-list li .img .num {width: 72px; height: 72px; top: -18px; left: -18px; font-size: 18px;} #story section.item .flow .comingsoon {display: flex; justify-content: center; align-items: center;} #story section.item.koun .flow .comingsoon {margin-top: 63px;} #story section.item.koun .flow .comingsoon .img {margin: 0 15px 0 0;} #story section.item.tenkou .flow .comingsoon {margin-top: 48px;} #story section.item.tenkou .flow .comingsoon .img {margin: 0 -12.5px 0 0;} } @media screen and (min-width: 768px) { #story section.item .heading .img {height: 45vw;} #story section.item .item-name span.title {margin-bottom: 18px;} #story section.item .item-name.koun span.title {font-size: 22px;} #story section.item .item-name.tenkou span.title {font-size: 20px;} #story section.item .item-name span.name {font-size: 42px; margin-bottom: 9px;} #story section.item .item-name span.en {font-size: 21px; margin-bottom: 14px;} #story section.item .item-name span.look {font-size: 28px;} #story section.item .flow .flow-list.small {width: 640px;} #story section.item .flow .flow-list.small li {width: 300px;} #story section.item.koun .flow .comingsoon .img {width: 200px;} #story section.item.tenkou .flow .comingsoon .img {width: 188px;} } @media screen and (min-width: 1024px) {} /*-------------------------------------------------------------------------- 会社概要・店舗情報 (about.php) --------------------------------------------------------------------------*/ #about .page-heading {margin-bottom: 26px;} #about h2 {font-size: 1.25em; padding: 36px 0;} #about .g-map {height: 200px; margin-top: 32px;} #about .container {display: block; margin: 0 28px;} #about section {display: block;} #about section.company .img img, #about section.store .img img {width: 66.667vw; margin: 0 auto 28px;} #about section.company .txt {width: 66.667vw; margin: 0 auto;} #about section.company .txt h2 {margin-bottom: 18px;} #about section.depart {padding-bottom: 46px;} #about section.depart section {align-items: center; margin-bottom: 38px;} #about section.depart section:last-child {margin-bottom: 0;} #about section.depart .img {margin: 0 -28px;} #about section.depart .txt h3 {font-size: 1.2em; text-align: center; margin: 1.25em 0;} #about section.store article {margin-bottom: 32px;} #about section.store table {margin-bottom: 28px;} #about section.store .txt .explan {margin: 0 -28px; padding: 28px 28px 0; border-top: 1px solid #c4c4c4;} @media screen and (min-width: 640px) { #about .page-heading {margin-bottom: 39px;} #about h2 {font-size: 1.5625em; padding: 54px 0;} #about .g-map {height: 300px; margin-top: 48px;} #about .container {display: block; margin: 0 42px;} #about section {display: block;} #about section.company .img img, #about section.store .img img {width: 66.667vw; margin: 0 auto 42px;} #about section.company .txt {width: 66.667vw; margin: 0 auto;} #about section.company .txt h2 {margin-bottom: 18px;} #about section.depart section {align-items: center; margin-bottom: 38px;} #about section.depart section:last-child {margin-bottom: 0;} #about section.depart .img {margin: 0;} #about section.depart .txt h3 {font-size: 1.5em; text-align: center; margin: 1.25em 0;} #about section.store article {margin-bottom: 48px;} #about section.store table {margin-bottom: 42px;} #about section.store .txt .explan {margin: 0 -42px; padding: 42px 42px 0;} } @media screen and (min-width: 1024px) { #about .page-heading {margin-bottom: 56px;} #about h2 {padding: 70px 0;} #about .g-map {height: 400px;} #about .container, #about section section {display: flex;} #about section.company .img, #about section.store .img {width: 470px;} #about section.company .txt, #about section.store .txt {width: calc(100% - 520px); margin-left: 50px;} #about section.depart {padding-bottom: 46px;} #about section.depart .container {display: block;} #about section.depart .img {width: 420px;} #about section.depart .txt {width: calc(100% - 460px); margin-left: 40px;} #about section.store .img img {margin-bottom: 1em;} #about section.store .img .explan.pc {display: block; margin: 0; padding: 0;} #about section.store .txt .explan.sp {display: none;} } /*-------------------------------------------------------------------------- お問い合わせ、業務用商品のご案内、メールフォーム (contact.php,commercial.php,mail-form.php) --------------------------------------------------------------------------*/ #contact .desc {margin-bottom: 30px;} #contact .contact-list {display: block; margin: 0 0 21px;} #contact .contact-list section {margin-bottom: 20px;} #contact .contact-list h2 {font-size: 13px;} #contact .contact-list .icons .icon {width: 64px; height: 64px; margin: 0 8px;} #contact .contact-list .more {width: 155px; height: 35px;} #contact .form input[type="text"], #contact .form input[type="tel"], #contact .form input[type="email"], #contact .form textarea, #contact .form label.file {border-width: 2px;} #contact .form input[type="submit"] {width: 155px; margin: 26px auto 32px; border-width: 2px;} #contact .form label.file .img {flex-direction: column;} #contact .cta {display: block; margin-bottom: 32px; padding: 21px 32px;} #contact .cta p {text-align: center;} #contact .cta .name {font-size: 13px; margin-bottom: 3px;} @media screen and (min-width: 640px) { #contact .desc {margin-bottom: 45px;} #contact .contact-list {display: flex; margin: 0 0 32px;} #contact .contact-list section {width: 50%; margin-bottom: 0;} #contact .contact-list h2 {font-size: 18px;} #contact .contact-list .icons .icon {width: 96px; height: 96px; margin: 0 12px;} #contact .contact-list .more {width: 232px; height: 52px;} #contact .cta {display: flex; margin-bottom: 48px; padding: 20px 24px;} #contact .cta p {text-align: right;} #contact .cta .name {font-size: 18px;} } @media screen and (min-width: 768px) { #contact .container {max-width: 832px; margin: 0 auto; padding: 0 30px;} #contact .contact-list h2, #contact .cta .name {font-size: 20px;} #contact .contact-list .icons .icon {width: 114px; height: 114px;} #contact .cta {margin-bottom: 36px; padding: 24px 36px;} } /*-------------------------------------------------------------------------- プライバシーポリシー (privacy-policy.php) --------------------------------------------------------------------------*/ #privacy h2 {font-size: 15px;} @media screen and (min-width: 640px) { #privacy h2 {font-size: 22px;} } /*-------------------------------------------------------------------------- レシピ一覧ページ (archive-recipe.php) --------------------------------------------------------------------------*/ #archive-recipe .desc {margin-bottom: 2.5em;} #archive-recipe .recipe-list > li {width: calc((100% - 3vw) / 2); margin: 0 3vw 4.2vw 0;} #archive-recipe .recipe-list > li:nth-child(2n) {margin-right: 0;} #archive-recipe .recipe-list > li .img {height: 30.8vw;} #archive-recipe .recipe-list > li .state h3 {min-height: 4.44em; font-size: 1.2em; padding: .6em 0; border-bottom-width: 3px;} #archive-recipe .recipe-list > li .state .in-house li {font-size: .9em;} @media screen and (min-width: 1024px) { #archive-recipe .recipe-list > li {width: calc((100% - 4.5vw) / 4); margin: 0 1.5vw 4.2vw 0;} #archive-recipe .recipe-list > li:nth-child(2n) {margin-right: 1.5vw;} #archive-recipe .recipe-list > li:nth-child(4n) {margin-right: 0;} #archive-recipe .recipe-list > li .img {height: 15.4vw;} } /*-------------------------------------------------------------------------- レシピ個別ページ (single-recipe.php) --------------------------------------------------------------------------*/ #single-recipe .page-heading h1 {margin-bottom: .5em;} #single-recipe .container > section {width: 100%; padding: 1.25em 1.75em .5em; border-top-width: 5px;} #single-recipe .container > section > h2 {margin-bottom: .625em;} #single-recipe .catch {font-size: 1.45em; margin: 0 auto 1.25em;} #single-recipe article.main-img {margin-bottom: 1em;} #single-recipe section.products .products-list li {width: calc((100% - 1em) / 2);} #single-recipe section.products .products-list li:nth-child(even) {margin-right: 0;} #single-recipe section.products .products-list li .img {width: 100%; height: auto;} #single-recipe section.products .products-list li h3 {font-size: 12px;} @media screen and (min-width: 640px) { #single-recipe section.ingre {display: flex; flex-wrap: wrap;} #single-recipe section.ingre h2 {width: 100%;} #single-recipe section.ingre .ingre_main {margin-right: 54px;} #single-recipe section.products .products-list li {width: calc((100% - 2em) / 3);} #single-recipe section.products .products-list li:nth-child(even) {margin-right: 1em;} #single-recipe section.products .products-list li:nth-child(3n) {margin-right: 0;} #single-recipe section.products .products-list li h3 {font-size: 16px;} } @media screen and (min-width: 1024px) { #single-recipe article.main-img {width: 57.5%;} #single-recipe section.ingre {width: 40%; margin-left: 2.5%; padding: 1.25em 1.25em .5em;} #single-recipe section.ingre {display: block;} #single-recipe section.ingre .ingre_main {margin-right: 0;} #single-recipe section.products .products-list li {width: calc((100% - 3em) / 4);} #single-recipe section.products .products-list li:nth-child(3n) {margin-right: 1em;} #single-recipe section.products .products-list li:nth-child(4n) {margin-right: 0;} } /*-------------------------------------------------------------------------- 採用情報ページ (archive-recruit.php) --------------------------------------------------------------------------*/ #archive-recruit .container {max-width: 800px; margin-bottom: 32px;} #archive-recruit .desc h2 {font-size: 1.2em;} #archive-recruit .entrance {margin-bottom: 24px;} #archive-recruit .entrance h3 {font-size: 1em; padding: .75em 14px;} #archive-recruit .entrance .entrance-list th, #archive-recruit .entrance .entrance-list td {display: block;} #archive-recruit .entrance .entrance-list th {padding: .75em 0 .25em 14px;} #archive-recruit .entrance .entrance-list td {padding: .25em 0 .75em calc(14px + 2em);} @media screen and (min-width: 640px) { #archive-recruit .container {margin-bottom: 48px;} #archive-recruit .entrance {margin-bottom: 36px;} #archive-recruit .entrance .entrance-list th, #archive-recruit .entrance .entrance-list td {display: table-cell; padding: .75em;} } @media screen and (min-width: 800px) { #archive-recruit .container {margin: 0 auto;} } /*-------------------------------------------------------------------------- よくある質問一覧ページ (archive-faq.php) --------------------------------------------------------------------------*/ #archive-faq .faq-list .entry {margin-bottom: 10px; padding: 12px 25px 10px;} #archive-faq .faq-list .entry dl dt:before, #archive-faq .faq-list .entry dl dd:before {min-width: 36px; height: 36px; font-size: 1.25em; margin-right: 18px; border-radius: 5px;} #archive-faq .faq-list .entry dl dt {font-size: 1.1em; margin-bottom: 16px; padding-bottom: 16px;} @media screen and (max-width: 1199px) { #archive-faq {font-size: 14px;} } @media screen and (max-width: 639px) { #archive-faq {font-size: 12px;} } @media screen and (min-width: 640px) { #archive-faq .faq-list .entry {margin-bottom: 15px;} } @media screen and (min-width: 1024px) { #archive-faq .faq-list .entry {padding: 18px 35px 38px;} #archive-faq .faq-list .entry dl dt:before, #archive-faq .faq-list .entry dl dd:before {min-width: 42px; height: 42px; font-size: 1.5em; margin-right: 27px;} #archive-faq .faq-list .entry dl dt {margin-bottom: 20px; padding-bottom: 20px;} } /*-------------------------------------------------------------------------- お客様の声一覧ページ (archive-voice.php) --------------------------------------------------------------------------*/ #archive-voice .voice-list .entry {margin-bottom: 10px; padding: 16px 20px 10px;} #archive-voice .voice-list .entry h3 {margin-bottom: 6px;} #archive-voice .voice-list .entry h3:after {margin-top: 12px; height: 4.273vw;} #archive-voice .voice-list .entry .customer-info {width: 70px;} #archive-voice .voice-list .entry .customer-info img {max-width: 60px; margin: .25em auto 8px;} #archive-voice .voice-list .entry .comment {width: calc(100% - 80px); margin-left: 10px;} @media screen and (max-width: 1199px) { #archive-voice {font-size: 14px;} } @media screen and (max-width: 639px) { #archive-voice {font-size: 12px;} } @media screen and (min-width: 640px) { #archive-voice .voice-list .entry {margin-bottom: 15px;} #archive-voice .voice-list .entry .customer-info {width: 110px;} #archive-voice .voice-list .entry .customer-info img {max-width: 75px; margin: .25em auto 9px;} #archive-voice .voice-list .entry .comment {width: calc(100% - 130px); margin-left: 20px;} } @media screen and (min-width: 1024px) { #archive-voice .voice-list .entry {padding: 24px 30px 15px;} #archive-voice .voice-list .entry h3 {margin-bottom: 8px;} #archive-voice .voice-list .entry h3:after {margin-top: 18px; height: 47px;} #archive-voice .voice-list .entry .customer-info img {max-width: 85px; margin: .25em auto 10px;} #archive-voice .voice-list .entry .comment {width: calc(100% - 135px); margin-left: 25px;} } /*-------------------------------------------------------------------------- 投稿関連 --------------------------------------------------------------------------*/ #post .container {display: block;} /*記事セクション*/ #post #primary.content-area .entry-heading {font-size: 1.1em; padding: 0 10px 5px; border-bottom-width: 3px;} #post #primary.content-area .news-list {margin-bottom: 36px;} #post #primary.content-area .news-list li {padding: 1em 20px;} #post #primary.content-area .news-list li a {display: block;} #post #primary.content-area .news-list li a time {display: inline-block; margin-bottom: .25em;} /*個別ページ*/ #post #primary.content-area.single {max-width: 100%;} #post #primary.content-area.single header.entry-header {position: relative; margin-bottom: 4em; padding: 0 10px 5px;} #post #primary.content-area.single header.entry-header .entry-title {font-size: 1.1em;} #post #primary.content-area.single header.entry-header .entry-meta {position: absolute; bottom: -2em; right: 4px;} #post #primary.content-area.single header.entry-header .entry-meta span {font-size: .8em;} #post #primary.content-area.single .entry-content {padding: 0 10px;} /*--サイドバー--*/ #post aside.sidebar section {padding-bottom: 15px;} #post aside.sidebar section h2.widget-title {font-size: 1em; margin-bottom: .25em; padding-left: 10px;} #post aside.sidebar section.widget_recent_entries ul {padding: 0 6px; border-width: 1px; border-radius: 3px;} #post aside.sidebar section.widget_recent_entries li .post-date, #post aside.sidebar section.widget_recent_entries li a {font-size: 1em; padding: 0 3px;} #post aside.sidebar section.widget_archive select {font-size: 1em; padding: 4px 12px; border-width: 1px; border-radius: 3px; background-position: right 10px center; background-size: 8px auto;} @media screen and (min-width: 640px) { #post #primary.content-area .heading {font-size: 1.2em;} #post #primary.content-area.single header.entry-header .entry-meta span {font-size: 1em;} #post aside.sidebar {width: 100%;} #post aside.sidebar section {padding-bottom: 20px;} #post aside.sidebar section h2.widget-title {font-size: 1.1em; padding-left: 12px;} #post aside.sidebar section.widget_recent_entries ul {padding: 0 8px; border-width: 2px; border-radius: 5px;} #post aside.sidebar section.widget_recent_entries li .post-date, #post aside.sidebar section.widget_recent_entries li a {padding: 0 5px;} #post aside.sidebar section.widget_archive select {padding: 5px 14px; border-width: 2px; border-radius: 5px; background-position: right 12px center; background-size: 10px auto;} } @media screen and (min-width: 1024px) { #post .container {display: flex;} #post #primary.content-area {min-width: 66%; max-width: 710px; margin-right: auto;} #post #primary.content-area.single {min-width: 100%; max-width: 100%;} #post aside.sidebar {width: 24%; max-width: 250px; margin: 26px 0 0 auto;} } /*-------------------------------------------------------------------------- 404 (404.php) --------------------------------------------------------------------------*/ #notfound {margin-bottom: -9.6vw;}