/*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- 汎用 ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ body {min-height: calc(100vh - 50px); min-width: 320px; padding-bottom: 50px;} /*汎用flex*/ .flex {display: flex;} /*sp限定*/ .pc {display: none!important;} /*コンテナ*/ .container {margin: 0 20px;} /*-------------------------------------------------------------------------- 部品 --------------------------------------------------------------------------*/ /*------------------------------------ 汎用見出し ------------------------------------*/ .g-h {font-size: 24px; margin-bottom: 28px;} @media screen and (min-width: 768px) { .g-h {font-size: 28px; margin-bottom: 36px;} } /*------------------------------------ 汎用固定画像 ------------------------------------*/ .g-fix-bg {height: 220px; margin-bottom: 48px;} /*------------------------------------ パンくず ------------------------------------*/ #breadcrumbs {padding: 9px 0;} #breadcrumbs * {font-size: 10px;} /*------------------------------------ ページネーション ------------------------------------*/ .pagination * {font-size: 14px; margin: 0 2px; padding: 10px 14px;} /*------------------------------------ MORE ------------------------------------*/ .more {width: 162px; height: 42px;} .more span {font-size: 10px;} .more:before, .more:after {right: 10px; width: 8px;} .more:before {top: calc(50% - 3px);} .more:after {top: calc(50% + 3px);} /*フォームへのリンク用*/ .more.form-link, .more.form-link > span {width: 235px; height: 50px; font-size: .8rem;} .more.form-link > span .icon {width: 15px; height: 10px; margin: 0 5px 1px 0;} /*------------------------------------ お知らせリスト ------------------------------------*/ .post-list .entry {margin-bottom: 24px;} .post-headline {margin-bottom: 8px;} .post-headline h2 {font-size: 21px; margin-bottom: 3px;} .post-headline time {font-size: 11px;} /*------------------------------------ お知らせ固定ナビ ------------------------------------*/ /* aikou2 */ /* .fix-info {left: 0; bottom: 0; width: 100%; height: 50px;} */ .fix-info {left: 0; bottom: 50px; width: 100%; height: 50px;} .fix-info.info {opacity: 0; transform: translateY(200px);} .fix-info.eat {bottom: 0; opacity: 0; transform: translateY(200px);} /* aikou2 */ .fix-info img {width: 24px; height: auto; margin-right: 14px;} .fix-info span {font-size: 18px; letter-spacing: .125em;} /* aikou2 アニメーション */ .fix-info.move-1{ animation: LeftAnime 1s forwards; } @keyframes LeftAnime{ from { opacity: 0; transform: translateY(200px); } to { opacity: 1; transform: translateX(0); } } .fix-info.move-2{ animation: RightAnime 1s forwards; } @keyframes RightAnime{ from { opacity: 1; transform: translateX(0); } to { opacity: 1; transform: translateY(200px); } } /*-------------------------------------------------------------------------- ヘッダー --------------------------------------------------------------------------*/ header .fix-logo {top: 16px; left: 20px;} header .fix-logo .sub {width: 114px; height: auto; margin-bottom: 6px;} header .fix-logo .main {width: 102px; height: auto;} @media screen and (min-width: 768px) { header .fix-logo {top: 20px; left: 24px;} header .fix-logo .sub {width: 136px; margin-bottom: 7px;} header .fix-logo .main {width: 122px;} } /*------------------------------------ トグル ------------------------------------*/ header #nav-toggle .border {top: 12px; right: 16px;} /*------------------------------------ グローバルナビゲーション ------------------------------------*/ header #nav-drawer .global-nav {width: 100%;} header #nav-drawer .drawer-top {justify-content: center; margin: 70px 6.76vw 0;} header #nav-drawer .drawer-top .nav-list:nth-child(1) {width: 185px; margin-right: 11.58vw;} header #nav-drawer .drawer-top .nav-list:nth-child(2) {width: 132px;} header #nav-drawer .drawer-top .nav-list > li > a {height: 73px; font-size: 11.5px;} header #nav-drawer .drawer-top .nav-list .cat {margin-top: 32px;} header #nav-drawer .drawer-top .nav-list .cat li {margin-top: 3px;} header #nav-drawer .drawer-top .nav-list .cat li a {height: 42px;} header #nav-drawer .drawer-top .nav-list .cat li a span {font-size: 9px;} header #nav-drawer .drawer-top .nav-list .cat li a .thumb {max-width: 84px; min-width: 84px; height: 100%;} header #nav-drawer .drawer-bottom {margin: 38px auto;} header #nav-drawer .drawer-bottom .info {justify-content: center;} header #nav-drawer .drawer-bottom .info .tel {font-size: 18px; letter-spacing: 2px;} header #nav-drawer .drawer-bottom .info address, header #nav-drawer .drawer-bottom .copyright {display: none;} /*-------------------------------------------------------------------------- フッター --------------------------------------------------------------------------*/ footer .contact {padding: 42px 0;} footer .contact .desc {font-size: 20px; margin-bottom: 20px;} footer .contact .inner {display: block; text-align: center;} footer .contact .inner .tel {margin-bottom: 16px;} footer .contact .inner .mail {width: 200px; margin: 0 auto; padding: 10px 0;} footer .info {display: block; margin-bottom: 8px; padding: 26px 0 14px;} footer .info .title {justify-content: center;} footer .info .title .melon {width: 82px; height: auto; margin-right: 12px;} footer .info .title .logo .sub {width: 142px; height: auto; margin-bottom: 7px;} footer .info .title .logo .main {width: 127px; height: auto;} footer .info address {font-size: 13px; text-align: center; margin: 18px 0 0;} footer .copyright {font-size: 12px; padding: 8px 0;} @media screen and (min-width: 768px) { footer .contact .desc {font-size: 22px; margin-bottom: 20px;} footer .contact .inner .mail {width: 250px;} footer .contact .inner .tel {margin-bottom: 24px;} footer .info address {font-size: 14px;} } /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- フロントページ ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ #front .txt-set {height: 300px; width: 258px;} #front .txt-set h2 {font-size: 25px; margin-left: 15px;} #front .txt-set p {font-size: 14px; line-height: 2;} #front .fix-bg {height: 280px;} #front .intro {padding: 108px 0 48px;} #front .intro .inner {padding: 0 90px 64px;} #front .intro .inner h1.title {width: 81px; height: auto;} #front .intro .inner .melon {bottom: 0; left: 0; width: 112px; height: auto;} #front .intro .stamp {top: 8px; right: -64px; width: 162px; height: auto;} #front .top-slider {width: 100%; height: 200px;} #front .top-slider #top-slider {width: 50%; height: 200px;} #front .top-slider #top-slider li {width: 50%; height: 200px;} /* aikou */ /* #front .about .inner {display: block; margin: 70px auto;} */ #front .about .inner {display: block; padding: 70px 0;} /* aikou */ #front .about .inner .img {width: 100%; height: auto;} #front .about .inner.messe-02 .img {max-width: 334px; margin: 0 auto 48px;} /* aikou */ /* #front .about .inner.merit {margin: 70px 20px 50px;} */ #front .about .inner.merit {padding: 70px 0 50px; margin: 0 20px;} /* aikou */ #front .about .inner.merit .img {width: 230px; height: auto; margin: 0 auto 30px;} #front .about .inner.merit h3 {font-size: 22px;} #front .about .inner.merit p {font-size: 14px;} #front .about .inner.messe-03 .img {max-width: 334px; margin: 40px auto;} #front .about .inner.messe-04 .img {max-width: 334px; margin: 0 auto 40px; padding: 0 20px;} #front .melons {padding: 20px;} #front .melons .container {padding: 0 20px 235px; border-radius: 15px;} #front .melons h2 {font-size: 22px; padding: 30px 0;} #front .melons .melon-list li {display: block; margin-bottom: 42px;} #front .melons .melon-list li .img {max-width: 150px; margin: 0 auto 24px;} #front .melons .melon-list li .txt h3 {font-size: 22px; text-align: center; margin-bottom: 6px;} #front .melons .melon-list li .txt p {font-size: 14px;} #front .melons .natural {width: 400px; height: 255px;} #front .melons .natural .img {width: 100%; height: auto;} #front .melons .natural .txt {top: 37px; right: 20px; width: 162px; height: auto;} #front .melons .icon.wood, #front .melons .icon.liver, #front .melons .icon.mountain {display: none;} @media screen and (min-width: 768px) { #front .txt-set {height: 350px; margin: 0;} #front .txt-set h2 {font-size: 28px; margin-left: 18px;} #front .txt-set p {font-size: 16px;} #front .fix-bg {height: 350px;} #front .intro {padding: 130px 0 58px;} #front .intro .inner {padding: 0 108px 76px;} #front .intro .inner h1.title {width: 98px;} #front .intro .inner .melon {width: 134px;} #front .intro .stamp {top: 8px; right: -96px; width: 325px;} #front .top-slider, #front .top-slider #top-slider, #front .top-slider #top-slider li {height: 300px;} /* aikou */ /* #front .about .inner {display: flex; justify-content: center; align-items: center; margin: 84px auto;} */ #front .about .inner {display: flex; justify-content: center; align-items: center; padding: 84px 0; margin: 0;} /* aikou */ #front .about .inner.messe-02 .img {margin: 0 48px 0 0;} /* aikou */ /* #front .about .inner.merit {margin: 84px 42px 64px;} */ #front .about .inner.merit {padding: 84px 42px 64px; margin: 0 42px;} /* aikou */ #front .about .inner.merit .img {margin: 0 40px 0 0;} #front .about .inner.merit h3 {font-size: 24px;} #front .about .inner.merit p {font-size: 15px;} #front .about .inner.messe-03 .img {margin: 0 0 0 48px;} #front .about .inner.messe-04 .img {margin: 0 48px 0 0; padding: 0;} #front .melons {padding: 30px;} #front .melons .container {padding: 0 36px 282px; border-radius: 20px;} #front .melons h2 {font-size: 30px; padding: 40px 0;} #front .melons .melon-list li {display: flex; align-items: center; margin-bottom: 42px;} #front .melons .melon-list li .img {max-width: 175px; margin: 0 36px 0 0;} #front .melons .melon-list li .txt h3 {font-size: 24px; text-align: left; margin-bottom: 8px;} #front .melons .melon-list li .txt p {font-size: 15px;} #front .melons .natural {width: 480px; height: 307px;} #front .melons .natural .txt {top: 56px; right: 30px; width: 163px; height: auto;} #front .melons .icon.wood, #front .melons .icon.liver, #front .melons .icon.mountain {display: block;} #front .melons .icon.wood {left: 60px; top: 18px; width: 32px;} #front .melons .icon.liver {right: 51px; top: 28px; width: 79px;} #front .melons .icon.mountain {left: 56px; bottom: 41px; width: 158px;} } /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- テンプレ ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- お知らせ (index.php) --------------------------------------------------------------------------*/ #post {margin-bottom: 24px;} /*-------------------------------------------------------------------------- 固定ページ (page.php) --------------------------------------------------------------------------*/ #page {margin-bottom: 100px;} #page .more {margin-top: 100px;} /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- 固定ページ ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- お問い合わせ (contact.php) --------------------------------------------------------------------------*/ #contact .contact {margin-bottom: 30px;} #contact .contact p {margin-bottom: 18px;} #contact .contact .tel img {width: 18px; margin-right: 4px;} #contact .contact .tel span {font-size: 28px;} #contact .form {padding: 15px;} #contact .form dl {padding: 15px 5px;} #contact .form dl dt {margin-bottom: 8px; align-items: center;} #contact .form dl dt span {font-size: 14px;} #contact .form dl dd small {margin-top: 5px;} #contact .form input[type="text"], #contact .form input[type="email"], #contact .form input[type="tel"], #contact .form textarea {font-size: 14px; width: calc(100% - 16px); padding: 4px 8px;} #contact .form input[type="radio"] + span.wpcf7-list-item-label, #contact .form input[type="checkbox"] + span.wpcf7-list-item-label, #contact .form input[type="acceptance"]+ span.wpcf7-list-item-label {font-size: 14px;} #contact .form input[type="radio"] + span.wpcf7-list-item-label:before, #contact .form input[type="checkbox"] + span.wpcf7-list-item-label:before, #contact .form input[type="acceptance"]+ span.wpcf7-list-item-label:before {top: 0;} #contact .form span.wpcf7-list-item-label:after {top: 4px;} #contact .form input[type="submit"] {padding: 10px 36px;} #contact .consent h2 {font-size: 21px; margin: 0 0 20px;} #contact .consent p {font-size: 14px; margin: 0 0 30px;} #contact .consent a {text-decoration: underline;} /*-------------------------------------------------------------------------- 404.php --------------------------------------------------------------------------*/ #notfound {height: 444px;} #notfound h1 span {letter-spacing: 5px;} #notfound h1 span.big {font-size: 3.6rem;} #notfound h1 span.small {font-size: 1.5rem;} #notfound p {font-size: .9rem; margin: 12px 0 75px;} /*-------------------------------------------------------------------------- 投稿汎用要素 --------------------------------------------------------------------------*/ #single * {font-size: .925rem;} #single h2 {margin: 45px 0 15px 0;} #single h3 {margin: 40px 0 13px 0;} #single h4 {margin: 35px 0 11px 0;} #single h5 {margin: 30px 0 9px 0;} #single h6 {margin: 25px 0 7px 0;} #single h2:first-child {margin: 0 0 15px 0;} #single h3:first-child {margin: 0 0 13px 0;} #single h4:first-child {margin: 0 0 11px 0;} #single h5:first-child {margin: 0 0 9px 0;} #single h6:first-child {margin: 0 0 7px 0;} #single h2 {font-size: 1.35rem;} #single h3 {font-size: 1.225rem;} #single h4 {font-size: 1.1rem;} #single h5 {font-size: 1rem;} #single h6 {font-size: .925rem;} #single hr {margin: 40px 0;} #single p {line-height: 1.75; margin: 0 0 30px 0;} /* aikou2 */ /*-------------------------------------------------------------------------- メロンの美味しい食べ方 (page-how-to-eat.php) --------------------------------------------------------------------------*/ /* #how-to .g-fix-bg {margin-bottom: 0;} */ #how-to h1 { margin-bottom: 0; font-size: 22px; } #how-to .intro {padding: 30px 0 120px;} #how-to .intro .txt-set {width:278px; height: 300px; font-size: 14px; line-height: 2;} #how-to .intro .img { width: 80px; height: auto; bottom: -65px; left: -25px; } #how-to .sec-delivery { padding: 20px 0; } /* #how-to .sec-delivery .container { width: 1020px; } */ #how-to .sec-delivery .container { margin: 0 10px; } @media screen and (min-width: 768px) { #how-to .sec-delivery { padding: 30px 0; } #how-to .sec-delivery .container { margin: 0 50px; } } #how-to .sec-delivery .container > .box { border-radius: 25px; margin-bottom: 35px; padding: 0 20px 25px; } #how-to .sec-delivery h2 { font-size: 22px; padding: 30px 0; } #how-to .sec-delivery .container > .box p { /* margin-left: 70px; */ } #how-to .sec-delivery .container > .box .img { /* position: relative; top: -30px; */ padding-top: 15px; } @media screen and (min-width: 768px) { #how-to .sec-delivery .container > .box { padding: 0 20px 5px; } #how-to .sec-delivery .container > .box p { margin-left: 40px; font-size: 20px; } #how-to .sec-delivery .container > .box .img { position: relative; top: -30px; } } #how-to .sec-delivery ol li { display: block; /* align-items: center; */ padding: 20px; } #how-to .sec-delivery ol li:not(:last-child) { margin-bottom: 15px; } #how-to .sec-delivery ol li h3 { width: 150px; font-size: 20px; } #how-to .sec-delivery ol li h3:before { width: 32px; height: 32px; top: 48%; } #how-to .sec-delivery ol li h3:after { right: 36px; top: 48%; } #how-to .sec-delivery ol li .desc { width: 100%; padding-top: 20px; } #how-to .sec-delivery ol li .desc h4 { font-size: 20px; } #how-to .sec-delivery ol li .desc > p { font-size: 13px; padding-top: 10px; } #how-to .sec-eat { padding: 77px 0 0; } #how-to .sec-eat .container { /* width: 1020px; */ padding: 0 20px 45px; margin: 0 10px; } #how-to .sec-eat h2 { font-size: 22px; padding: 30px 0; } #how-to .sec-eat ol li { display: block; } @media screen and (min-width: 768px) { #how-to .sec-eat .container { margin: 0 50px; } #how-to .sec-eat ol li { display: flex; } } #how-to .sec-eat ol li:not(:last-child) { margin-bottom: 30px; } #how-to .sec-eat ol li .img-wrap { width: 100%; margin-bottom: 10px; } #how-to .sec-eat ol li .img-wrap .img{ width: 260px; } #how-to .sec-eat ol li:first-child .img-wrap .img{ width: 240px; } #how-to .sec-eat ol li .desc { width: 100%; /* padding-left: 70px; */ } #how-to .sec-eat ol li .desc h3 { font-size: 20px; margin-bottom: 20px; } #how-to .sec-eat ol li .desc > p { font-size: 14px; } #how-to .sec-eat .storage { width: 100%; /* margin-left: auto; */ padding: 15px 17px 25px; /* position: relative; top: -20px; */ margin-top: 20px; } #how-to .sec-eat .storage h3 { font-size: 20px; margin-bottom: 20px; } #how-to .sec-eat .storage > p { font-size: 14px; } #how-to .sec-maturity { padding: 20px 0; } #how-to .sec-maturity .container { /* width: 1020px; */ padding: 0 20px 200px; margin: 0 10px; } #how-to .sec-maturity h2 { font-size: 22px; padding: 30px 0; } #how-to .sec-maturity ol { display: block; margin-bottom: 35px; } @media screen and (min-width: 768px) { #how-to .sec-maturity ol { display: flex; } } #how-to .sec-maturity ol li { width: 100%; } #how-to .sec-maturity ol li:not(:first-child) { /* margin-left: 8%; */ } #how-to .sec-maturity ol li .desc-wrap { top: -15px; text-align: center; } #how-to .sec-maturity ol li .desc-wrap .stage { font-size: 20px; margin-bottom: 20px; } #how-to .sec-maturity ol li .desc-wrap .desc { font-size: 14px; margin-bottom: 25px; } #how-to .sec-maturity ol li .desc-wrap .desc2 { font-size: 14px; padding: 0 20px; } #how-to .sec-maturity .best-time-wrap { width: 100%; /* margin-left: 45px; */ } #how-to .sec-maturity .best-time-wrap .img { margin: 0 auto; } #how-to .sec-maturity .illust-girl { width: 150px; height: auto; right: 30px; bottom: 0; } @media screen and (min-width: 768px) { #how-to .sec-maturity .container { padding: 0 30px 30px; margin: 0 50px; } #how-to .sec-maturity ol li .desc-wrap { text-align: left; } #how-to .sec-maturity .best-time-wrap { width: 38%; margin-left: 45px; } #how-to .sec-maturity .illust-girl { width: 300px; height: auto; right: 30px; bottom: 0; } }