/*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- 汎用 ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ body {min-width: 100%; min-height: 100vh; scrollbar-face-color: #aaa; scrollbar-track-color: #fff; scrollbar-arrow-color: #aaa; scrollbar-shadow-color: #fff;} main.lower {padding-top: 100px;} /*スクロールバー*/ ::-webkit-scrollbar {width: 8px; background: #fff; z-index: 3;} ::-webkit-scrollbar:horizontal {height: 8px;} ::-webkit-scrollbar-thumb {width: 8px; background: #aaa;} /*汎用flex*/ .flex {display: flex;} /*pc限定*/ .sp {display: none!important;} /*コンテナ*/ .container {width: 880px; margin: 0 auto;} /*-------------------------------------------------------------------------- 部品 --------------------------------------------------------------------------*/ /*------------------------------------ 汎用見出し ------------------------------------*/ .g-h {font-size: 36px; margin-bottom: 48px;} /*------------------------------------ 汎用固定画像 ------------------------------------*/ .g-fix-bg {height: 320px; margin-bottom: 64px;} /*------------------------------------ ページネーション ------------------------------------*/ .pagination * {margin: 0 4px; padding: 12px 18px;} /*------------------------------------ MORE ------------------------------------*/ .more {width: 196px; height: 50px;} .more span {font-size: 12px;} .more:before, .more:after {right: 12px; width: 10px;} .more:before {top: calc(50% - 4px);} .more:after {top: calc(50% + 4px);} /*フォームへのリンク用*/ .more.form-link, .more.form-link > span {width: 438px; height: 96px; font-size: 1.075rem;} .more.form-link > span .icon {width: 23px; height: 16px; margin: 0 20px 0 0;} /*------------------------------------ お知らせリスト ------------------------------------*/ .post-list .entry {margin-bottom: 36px;} .post-headline {margin-bottom: 10px;} .post-headline h2 {font-size: 28px; margin-bottom: 4px;} .post-headline time {font-size: 12px;} /*------------------------------------ お知らせ固定ナビ ------------------------------------*/ .fix-info {flex-direction: column; right: -8px; top: 120px; padding: 20px 20px 20px 12px; border-radius: 12px 0 0 12px;} /* aikou2 */ .fix-info{ opacity: 0; } .fix-info:hover { opacity: 0; } .fix-info.eat {top: 381px;} /* aikou2 */ .fix-info.move-1:hover {transform: translateX(-8px); opacity: 1;} .fix-info img {width: 28px; height: auto; margin-bottom: 12px;} .fix-info span {-ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 18px; letter-spacing: .25em;} /* aikou2 アニメーション */ .fix-info.move-1{ animation: BtnAnime1 1s forwards; } @keyframes BtnAnime1{ from { opacity: 0 } to { opacity: 1 } } .fix-info.move-2{ animation: BtnAnime2 .5s forwards; pointer-events: none; } @keyframes BtnAnime2{ from { opacity: 1; } to { opacity: 0; } } /*-------------------------------------------------------------------------- ヘッダー --------------------------------------------------------------------------*/ header .fix-logo {top: 55px; left: 100px;} header .fix-logo .sub {width: 190px; height: auto; margin-bottom: 10px;} header .fix-logo .main {width: 170px; height: auto;} /*------------------------------------ トグル ------------------------------------*/ header #nav-toggle .border {top: 38px; right: 32px;} header #nav-toggle.lower .border div {background: #000;} /*------------------------------------ オープン時 ------------------------------------*/ .open-menu header .fix-tel {right: 112px;} .open-menu header #nav-toggle {right: 8px;} @media all and (-ms-high-contrast:none) {.open-menu header .fix-tel {right: 124px;} .open-menu header #nav-toggle {right: 18px!important;}} @-moz-document url-prefix() {.open-menu header .fix-tel {right: 124px;} .open-menu header #nav-toggle {right: 18px!important;}} /*------------------------------------ グローバルナビゲーション ------------------------------------*/ header #nav-drawer .logo {flex-direction: column; justify-content: center; align-items: center; margin: 17.46vh 0 auto 11.51vw;} header #nav-drawer .logo .img {width: 5.833vw; max-width: 112px; min-width: 84px; height: 4.167vw; max-height: 80px; min-height: 60px; margin-bottom: 13px;} header #nav-drawer .logo .txt {width: 13.75vw; max-width: 264px; min-width: 198px; height: 1.823vw; max-height: 35px; min-height: 26px;} header #nav-drawer .global-nav {margin: 0 10.6vw 0 auto;} header #nav-drawer .drawer-top {width: 46vw; max-width: 883px; min-width: 706px; margin: 10vh 0 9.2vh;} header #nav-drawer .drawer-top .nav-list {width: 41.9%;} header #nav-drawer .drawer-top .nav-list > li > a {height: 102px; font-size: 19px;} header #nav-drawer .drawer-top .nav-list .cat {margin-top: 25px;} header #nav-drawer .drawer-top .nav-list .cat li a {height: 84px;} header #nav-drawer .drawer-top .nav-list .cat li a span {font-size: 14px;} header #nav-drawer .drawer-top .nav-list .cat li a .thumb {width: 118px; height: 100%; background: #fff;} header #nav-drawer .drawer-top .nav-list .cat li a .thumb img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50%;'} header #nav-drawer .drawer-bottom {margin: 0 0 5.714vh;} header #nav-drawer .drawer-bottom .info {margin-bottom: 16px;} header #nav-drawer .drawer-bottom .info .tel {font-size: 32px; letter-spacing: 5px; margin-right: 56px;} header #nav-drawer .drawer-bottom .info address {font-size: 20px;} header #nav-drawer .drawer-bottom .copyright {font-size: 11px; letter-spacing: 2px;} /*-------------------------------------------------------------------------- フッター --------------------------------------------------------------------------*/ footer .contact {padding: 75px 0 65px;} footer .contact .desc {font-size: 29px; margin-bottom: 56px;} footer .contact .inner {justify-content: center; align-items: center;} footer .contact .inner .tel {margin-right: 60px;} footer .contact .inner .mail {width: 265px; padding: 12px 0;} footer .info {justify-content: center; align-items: center; margin-bottom: 10px; padding: 35px 0 20px;} footer .info .title .melon {width: 108px; height: auto; margin-right: 15px;} footer .info .title .logo .sub {width: 190px; height: auto; margin-bottom: 10px;} footer .info .title .logo .main {width: 170px; height: auto;} footer .info address {font-size: 17px; margin-left: 108px;} footer .copyright {font-size: 14px; padding: 10px 0;} /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- フロントページ ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ #front .container {width: 768px;} #front .txt-set {height: 380px; width: 381px;} #front .txt-set h2 {font-size: 36px; margin-left: 20px;} #front .txt-set p {font-size: 17px; line-height: 2.5;} #front .fix-bg {height: 440px;} #front .intro {padding: 80px 132px;} #front .intro .inner {padding: 0 120px 84px;} #front .intro .inner h1.title {width: 108px; height: auto;} #front .intro .inner .melon {bottom: 0; left: 0; width: 150px; height: auto;} #front .intro .stamp {top: 10px; right: -128px; width: 433px; height: auto;} #front .top-slider {width: 100%; height: 400px;} #front .top-slider #top-slider {width: 600px; height: 400px;} #front .top-slider #top-slider li {width: 600px; height: 400px;} /* aikou */ /* #front .about .inner {align-items: center; margin: 92px auto;} */ #front .about .inner {align-items: center; padding: 92px 0;} /* aikou */ #front .about .inner.messe-02 .img {width: 334px; height: auto; margin-right: 48px;} #front .about .inner.merit .img {width: 306px; height: auto; margin-right: 60px;} #front .about .inner.merit h3 {font-size: 29px;} #front .about .inner.merit p {font-size: 15px;} #front .about .inner.messe-03 .img {width: 334px; height: auto; margin-left: 48px;} #front .about .inner.messe-04 .img {width: 414px; height: auto; margin-right: 40px;} #front .melons {padding: 82px 0;} #front .melons .container {width: 1020px; padding: 0 125px 390px; border-radius: 30px;} #front .melons h2 {font-size: 42px; padding: 60px 0;} #front .melons .melon-list li {align-items: center; margin-bottom: 84px;} #front .melons .melon-list li .img {max-width: 200px;} #front .melons .melon-list li .txt {margin-left: 54px;} #front .melons .melon-list li .txt h3 {font-size: 26px; margin-bottom: 8px;} #front .melons .natural {width: 640px; height: 409px;} #front .melons .natural .img {width: 100%; height: auto;} #front .melons .natural .txt {top: 74px; right: 40px; width: 217px; height: auto;} #front .melons .icon.wood {left: 80px; top: 24px; width: 56px;} #front .melons .icon.liver {right: 68px; top: 42px; width: 140px;} #front .melons .icon.mountain {left: 74px; bottom: 54px; width: 210px;} /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- テンプレ ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- お知らせ (index.php) --------------------------------------------------------------------------*/ #post {margin-bottom: 42px;} /*-------------------------------------------------------------------------- 固定ページ (page.php) --------------------------------------------------------------------------*/ #page {margin-bottom: 200px;} /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- 固定ページ ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- お問い合わせ (contact.php) --------------------------------------------------------------------------*/ #contact .contact {margin-bottom: 40px;} #contact .contact p {text-align: center; margin-bottom: 20px;} #contact .contact .tel img {width: 20px; margin-right: 5px;} #contact .contact .tel span {font-size: 32px;} #contact .form {padding: 30px 60px;} #contact .form dl {display: flex; flex-wrap: wrap; justify-content: center; padding: 30px 0;} #contact .form dl dt {width: 220px; margin-right: 30px; align-items: flex-start;} #contact .form dl dt span {font-size: 14px;} #contact .form dl dd {width: 465px;} #contact .form .wpcf7-list-item {display: block!important; margin: 0!important;} #contact .form input[type="text"], #contact .form input[type="email"], #contact .form input[type="tel"], #contact .form textarea {font-size: 15px; width: calc(100% - 20px); margin: -8px 0 8px; padding: 10px;} #contact .form input[type="text"], #contact .form input[type="email"], #contact .form input[type="tel"] {height: 24px;} #contact .form textarea {resize: vertical;} #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: 15px;} #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: 12px 86px;} #contact .consent h2 {font-size: 24px; margin: 0 0 20px;} #contact .consent p {font-size: 15px; margin: 0 0 40px;} /*--エラーメッセージ--*/ #contact .wpcf7-not-valid-tip {color: #f00; font-size: 14px;} #contact .wpcf7-response-output {text-align: center; margin: 0 0 20px; padding: 8px 35px 8px 14px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); border-radius: 5px;} #contact .wpcf7-validation-errors {text-align: center; color: #b94a48; background-color: #f2dede; border: 1px solid #eed3d7;} #contact .wpcf7-mail-sent-ok {text-align: center; color: #3a87ad; background-color: #d9edf7; border: 1px solid #bce8f1;} #contact p.notice {text-align: center; margin: 50px 0 25px;} /*-------------------------------------------------------------------------- 404.php --------------------------------------------------------------------------*/ #notfound {height: 925px;} #notfound h1 span {letter-spacing: 7px;} #notfound h1 span.big {font-size: 4.95rem;} #notfound h1 span.small {font-size: 2.75rem;} #notfound p {font-size: 1.05rem; margin: 12px 0 100px;} /*-------------------------------------------------------------------------- 投稿汎用要素 --------------------------------------------------------------------------*/ #single * {font-size: 1rem;} #single h2 {margin: 50px 0 20px 0;} #single h3 {margin: 45px 0 18px 0;} #single h4 {margin: 40px 0 16px 0;} #single h5 {margin: 35px 0 14px 0;} #single h6 {margin: 30px 0 12px 0;} #single h2:first-child {margin: 0 0 20px 0;} #single h3:first-child {margin: 0 0 18px 0;} #single h4:first-child {margin: 0 0 16px 0;} #single h5:first-child {margin: 0 0 14px 0;} #single h6:first-child {margin: 0 0 12px 0;} #single h2 {font-size: 1.6rem;} #single h3 {font-size: 1.45rem;} #single h4 {font-size: 1.3rem;} #single h5 {font-size: 1.15rem;} #single h6 {font-size: 1rem;} #single hr {margin: 60px 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; } #how-to .container {width: 768px;} #how-to .intro {padding: 50px 0 92px;} #how-to .intro .txt-set {width: 420px; height: 380px; font-size: 17px; line-height: 2.5;} #how-to .intro .img { width: 187px; height: auto; bottom: 0; left: -220px; } #how-to .sec-delivery { padding: 70px 0 100px; } #how-to .sec-delivery .container { width: 1020px; } #how-to .sec-delivery .container > .box { border-radius: 25px; margin-bottom: 100px; padding: 0 20px 25px; } #how-to .sec-delivery h2 { font-size: 42px; padding: 60px 0 85px; } #how-to .sec-delivery .container > .box p { font-size: 35px; margin-left: 70px; } #how-to .sec-delivery .container > .box .img { position: relative; top: -30px; } #how-to .sec-delivery ol li { align-items: center; padding: 20px 25px; } #how-to .sec-delivery ol li:not(:last-child) { margin-bottom: 36px; } #how-to .sec-delivery ol li h3 { width: 200px; font-size: 27px; line-height: 1; } #how-to .sec-delivery ol li h3:before { width: 46px; height: 46px; } #how-to .sec-delivery ol li h3:after { right: 42px; } #how-to .sec-delivery ol li .desc { width: calc(100% - 200px); } #how-to .sec-delivery ol li .desc h4 { font-size: 29px; } #how-to .sec-delivery ol li .desc > p { font-size: 14px; padding-top: 5px; } #how-to .sec-eat { padding: 77px 0 0; } #how-to .sec-eat .container { width: 1020px; padding: 0 75px 45px; } #how-to .sec-eat h2 { font-size: 42px; padding: 60px 0 100px; } #how-to .sec-eat ol li:not(:last-child) { margin-bottom: 30px; } #how-to .sec-eat ol li .img-wrap { width: 260px; } #how-to .sec-eat ol li .img-wrap .img{ width: 100%; } #how-to .sec-eat ol li:first-child .img-wrap .img{ width: 240px; } #how-to .sec-eat ol li .desc { width: calc(100% - 260px); padding-left: 70px; } #how-to .sec-eat ol li .desc h3 { font-size: 26px; margin-bottom: 20px; } #how-to .sec-eat ol li .desc > p { font-size: 14px; } #how-to .sec-eat .storage { width: calc(100% - 330px); margin-left: auto; padding: 15px 17px 25px; position: relative; top: -20px; } #how-to .sec-eat .storage h3 { font-size: 26px; margin-bottom: 20px; } #how-to .sec-eat .storage > p { font-size: 14px; } #how-to .sec-maturity { padding: 100px 0; } #how-to .sec-maturity .container { width: 1020px; padding: 0 30px 35px; } #how-to .sec-maturity h2 { font-size: 42px; padding: 60px 0 50px; } #how-to .sec-maturity ol { margin-bottom: 35px; } #how-to .sec-maturity ol li { width: calc(100% / 3 - 8% + 8% / 3); } #how-to .sec-maturity ol li:not(:first-child) { margin-left: 8%; } #how-to .sec-maturity ol li .desc-wrap { top: -15px; } #how-to .sec-maturity ol li .desc-wrap .stage { font-size: 24px; margin-bottom: 20px; } #how-to .sec-maturity ol li .desc-wrap .desc { margin-bottom: 25px; } #how-to .sec-maturity ol li .desc-wrap .desc2 { font-size: 14px; padding: 0 28px; } #how-to .sec-maturity .best-time-wrap { width: 38%; margin-left: 45px; } #how-to .sec-maturity .illust-girl { width: 380px; height: auto; right: 30px; bottom: 0; }