@charset "UTF-8"; @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); /* reset */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* common */ :root { --padding: 80px; --base-color: #ffffff; --red:#D61518; --yellow:#FAC500; --lightyellow:#FFF000; --text-color: #1a1c1c; --darkredgray:#2f3131; --mediumgray:#454747; --lightgray:#e2e3e3; } html{ scroll-behavior: smooth; overflow-x: hidden; scroll-padding-top: 150px; } body { font-family: "Noto Sans JP", sans-serif; line-height: 1.6; display: flex; flex-direction: column; background:var(--base-color); color: var(--navy); font-size:16px; overflow-x: hidden; position:relative; width:100%; } @media screen and (max-width: 768px) { html{ scroll-padding-top: 100px; } body { font-size:14px; } } a { color: var(--red); text-decoration: none; } a:hover{ text-decoration: none; } img { object-fit: cover; } main{ width:100%; padding-top:120px; } section{ width:100%; position:relative; } .inner{ width:1200px; max-width:90%; padding:80px 0 100px 0; margin:0 auto; } @media screen and (max-width: 768px) { .inner{ padding: 40px 0 80px 0; } } @media screen and (max-width: 528px) { .inner{ padding: 36px 0 60px 0; } } /* button */ .button { overflow:hidden; text-transform: none; padding: 4px 36px 4px 16px; color: var(--red); border-radius: 16px; background: white; cursor: pointer; font-weight: bold; display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative; margin-bottom:20px; font-size:1.2em; border-bottom: 6px solid var(--red); } .button:after{ position:absolute; top:15px; right:20px; content:""; width:10px; height:10px; transform: rotate(45deg); border-top:2px solid var(--red); border-right:2px solid var(--red); } .button:hover{ text-decoration:none; border-bottom: none; border-top: 6px solid var(--yellow); border-top-left-radius: 20px; border-top-right-radius: 20px; } @media screen and (max-width: 768px) { .button:after{ top:12px; } } /* header */ header{ width:100%; margin:0 auto; height:120px; background:var(--yellow); position:fixed; z-index:999; border-bottom: 8px solid var(--red); } header .inner{ padding:0; position:relative; display: flex; justify-content: flex-end; } header .h-b-box{ position:absolute; top:40px; right:0; display:flex; justify-content: space-between; gap:20px; } header .copy{ position:fixed; top:40px; right:calc(50% + 120px); z-index:10; } header .sp{ display:none; } @media (max-width: 1400px) { header .copy{ width:360px; right:calc(50% + 80px); } } @media (max-width: 950px) { header .pc{ display:none; } header .sp{ display:block; top: 10px; width: 200px; left: 20px; } } header .logo{ position:fixed; top:12px; right:0; left:0; margin:0 auto; z-index:10; } .height-list{ height:auto; } /* ハンバーガーメニュー */ @media (max-width: 950px) { header{ height:70px; } header .inner{ max-width:calc(100% - 20px); } header .logo{ width:100px; } /* チェックボックスを非表示にする */ .drawer_hidden { display: none; } /* ハンバーガーアイコンの設置スペース */ .drawer_open { display: flex; height: 60px; width: 60px; justify-content: center; align-items: center; position: relative; z-index: 100;/* 重なり順を一番上にする */ cursor: pointer; } /* ハンバーガーメニューのアイコン */ .drawer_open span, .drawer_open span:before, .drawer_open span:after { content: ''; display: block; height: 3px; width: 25px; border-radius: 3px; background: #333; transition: 0.5s; position: absolute; } /* 三本線の一番上の棒の位置調整 */ .drawer_open span:before { bottom: 8px; } /* 三本線の一番下の棒の位置調整 */ .drawer_open span:after { top: 8px; } /* アイコンがクリックされたら真ん中の線を透明にする */ #drawer_input:checked ~ .drawer_open span { background: rgba(255, 255, 255, 0); } /* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */ #drawer_input:checked ~ .drawer_open span::before { bottom: 0; transform: rotate(45deg); } #drawer_input:checked ~ .drawer_open span::after { top: 0; transform: rotate(-45deg); } /* メニューのデザイン*/ .nav_content { width: 100%; height: 100%; position: fixed; top: 0; left: 100%; /* メニューを画面の外に飛ばす */ z-index: 99; background: #fff; transition: .5s; } /* メニュー黒ポチを消す */ .nav_list { list-style: none; } /* アイコンがクリックされたらメニューを表示 */ #drawer_input:checked ~ .nav_content { left: 0;/* メニューを画面に入れる */ background: var(--yellow); } header .h-b-box{ width:300px; position:relative; flex-direction: column; gap:8px; margin:100px auto; } } @media (max-width: 500px) { header .sp{ display:block; width: 160px; left: 105px; top:16px; } header .logo{ position:fixed; right:auto; left:12px; margin:0 auto; z-index:10; } header .inner { max-width: calc(100% - 10px); } } /*//// swiper ////*/ .swiper{ padding:0 0 40px 0 !important; } /* 画面全幅のヒーロー領域（左右の余白を無視して100vwに拡張） */ .hero-swiper { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-top: 80px; } /* 高さは600px固定（必要なら下の「レスポンシブ案」を参照） */ .hero-swiper .swiper { height: 600px; } /* slidesPerView:'auto' で「スライド幅 = 内包コンテンツ幅」にする */ .hero-swiper .swiper-slide { width: auto !important; /* 重要：コンテンツ幅に追従 */ display: flex; /* 画像を中央揃え */ align-items: center; justify-content: center; background: #0e0e0e; /* レターボックス部分の背景（任意） */ } /* 画像は縦いっぱい（= 600px）で、横は比率維持。トリミング禁止 */ .hero-swiper .swiper-slide img { height: 100%; width: auto; object-fit: contain; /* 見切れ防止（非トリミング） */ display: block; } /* ページネーション（●）の位置調整（任意） */ .hero-swiper .swiper-pagination { bottom: 12px !important; } .swiper-pagination-bullet-active{ background:var(--red) !important; } .swiper-button-next, .swiper-button-prev{ color:white !important; filter:drop-shadow(0 0 10px var(--red)); } /* 初期状態: PC向け 600px */ .hero-swiper .swiper { height: 600px; } /* 横幅1000px以下のとき */ @media (max-width: 1000px) { .hero-swiper .swiper { height: 400px; } .hero-swiper .swiper-slide img { height: 100%; /* 高さに合わせる */ } } /* 横幅768px以下のとき */ @media (max-width: 768px) { .hero-swiper .swiper { height: 220px; } .hero-swiper .swiper-slide img { height: 100%; } } @media (max-width: 950px) { .hero-swiper{ padding-top:0px; } } /* pickup */ h2{ text-align: center; font-size:1.5em; font-weight:700; z-index:2; } h2 img{ height:60px; } .pickup{ background-image: url(../images/pickup_back.png); background-repeat: repeat; margin-top:80px; } .pickup-box{ background:white; border:2px solid var(--text-color); border-radius:16px; padding:40px; margin-top:-28px; display:grid; grid-template-columns: repeat(3, 1fr); gap:40px; } .normal{ margin-top:-80px; } .normal .pickup-box{ border:none; } .pickup-box.first{ display:block; } .pickup-box.first li{ display:flex; border:none; } .pickup-box.first a:hover li{ border:none; } .first li .photo{ width:50%; } .first li .text{ padding:0 0 16px 16px; width:calc(50% - 16px); } .first li .text > p{ font-size:2em; } .pickup-box.first li .price span{ font-size:2em; } .pickup-box.first li div.price{ padding:16px 0; } .pickup-box a{ border:1px solid var(--darkredgray); border-bottom-left-radius:12px; border-bottom-right-radius:12px; } .pickup-box.first a{ border:none; } .pickup-box li .photo{ position: relative; overflow:hidden; } .pickup-box li .photo img{ display:block; width:100%; transition:transform 0.3s ease; } .pickup-box a:hover li .photo img{ transform: scale(1.1); } .pickup-box li > p{ padding:16px 16px 0 16px; } .pickup-box li div.price{ display:flex; justify-content: space-between; align-items: center; padding:16px; } .pickup-box li .price span{ font-size:1.5em; font-weight:600; } .pickup-box li .price img{ width:28px; height:28px; } .pickup-box a:hover li p{ text-decoration: none; } .pickup-box.first a:hover{ border:none; } @media (max-width: 950px) { .pickup{ margin-top:40px; } .pickup-box{ grid-template-columns: repeat(2, 1fr); gap:40px; } .normal{ margin-top:-40px; } } @media (max-width: 768px) { .pickup-box{ gap:20px; padding:40px 20px; } } @media (max-width: 500px) { .pickup-box{ grid-template-columns: repeat(1, 1fr); gap:20px; padding:40px 20px; } .pickup-box.first li{ flex-direction: column; } .first li .text{ padding:16px 0 0 0; } .first li .photo, .first li .text{ width:100%; } .first li .text > p{ font-size:1.5em; } } /* about */ .about{ background: linear-gradient( to bottom, #fce4ec, /* 上：淡いピンク (#fce4ec あたり) */ #fff8e1 /* 下：クリーム系 (#fff8e1 あたり) */ ); } .about .inner{ display:flex; gap:80px; } .about .inner > img{ width: 300px; object-fit: contain; } .about .inner .text h2{ text-align: left; margin-bottom:20px; } .about .inner .text h2 img{ height:120px; } .about .inner .text h2 img.sp{ display:none; } @media (max-width: 768px) { .about .inner{ flex-direction: column; gap:20px; } .about .inner > img{ margin:0 auto; } .about .inner .text h2{ text-align: center; } .about .inner .text h2 img.pc{ display:none; } .about .inner .text h2 img.sp{ display:block; margin:0 auto; } } /* howto */ .howto{ background-image: url(../images/red_grid_parts.png); background-repeat: repeat; } .howto .inner{ position:relative; } .howto-area{ background:var(--yellow); border:2px solid var(--text-color); border-radius:16px; padding:40px; margin-top:-28px; text-align: center; } .howto-area h3{ text-align: center; font-size:3em; font-weight:700; line-height:1.8; margin-bottom:40px; } .howto-area h3 span{ background:white; padding:2px 8px; } .howto-area h3 span.red{ color:var(--red); } .howto-area h3 span.red02{ color:var(--red); padding:2px 0 2px 8px; } .howto-area > img{ width:100%; max-width:800px; } .howto-area .sp{ display:none; } .button-area{ width:300px; margin:40px auto 0 auto; } .s_star_red{ position:absolute; top: 400px; right: -100px; width: 200px; object-fit: contain; } .s_star_yellow{ position:absolute; bottom: 200px; left: -100px; width: 200px; object-fit: contain; } .star_gold{ position:absolute; bottom: 400px; left: -50px; width: 100px; object-fit: contain; transform: rotate(-30deg); } @media screen and (max-width: 950px) { .s_star_red, .s_star_yellow, .star_gold{ display:none; } } @media screen and (max-width: 768px) { .howto-area .pc{ display:none; } .howto-area .sp{ display:block; max-width:calc(100% - 20px); margin: 0 auto; } .howto-area h3{ font-size:2em; } .howto-area{ padding:40px 12px; } } @media (max-width: 500px) { .howto h2 img{ height:auto; max-width:90%; object-fit: contain; } .howto-area{ margin-top:-20px; } .howto-area h3{ font-size:1.5em; } } /* sns */ .sns{ position:relative; background-image: url(../images/share_back.png); background-repeat: repeat; } .sns:after{ width:100%; height:100%; content:""; background:var(--lightyellow); position:absolute; top:0; left:0; right:0; margin:0 auto; z-index:-1; } .sns .inner{ position:relative; } .sns-area{ background:white; border:2px solid var(--text-color); border-radius:16px; padding:40px; text-align: center; margin-bottom:80px; width: 100%; max-width: 590px; margin: -28px auto 0 auto; } .star_red{ position:absolute; top: 50px; left: 150px; width: 100px; object-fit: contain; transform: rotate(-45deg); } .repost{ position:absolute; top: 250px; left: 50px; width: 100px; object-fit: contain; transform: rotate(30deg); } .tag{ position:absolute; top: 400px; left: 130px; width: 80px; object-fit: contain; transform: rotate(-25deg); } .s_star_gold{ position:absolute; top: 100px; right: 50px; width: 200px; object-fit: contain; } .star_yellow{ position:absolute; top: 300px; right: 0px; width: 100px; object-fit: contain; transform: rotate(30deg); } .heart{ position:absolute; top: 400px; right: 130px; width: 100px; object-fit: contain; transform: rotate(25deg); } .sns .button{ background:var(--red); color:white; border-bottom: 6px solid var(--darkredgray); padding: 8px 36px 8px 16px; } .sns .button:after{ border-top:2px solid white; border-right:2px solid white; top: 19px; } .sns .button:hover{ border:none; border-top: 6px solid var(--lightyellow); border-top-left-radius: 20px; border-top-right-radius: 20p } .sns-area .button{ font-size:1em; display:flex; flex-direction: row; gap: 8px; } .sns-area .button:hover{ border-top: 6px solid white; } @media screen and (max-width: 1050px) { .star_red, .repost, .tag, .s_star_gold, .star_yellow, .heart{ display:none; } } @media (max-width: 500px) { .sns h2 img{ height:auto; max-width:90%; object-fit: contain; } .sns-area{ margin-top:-20px; padding:40px 0; } } /* footer */ footer{ background:var(--text-color); padding:40px 0 100px 0; } footer ul{ width:1000px; max-width:100%; text-align:center; margin:0 auto 40px auto; } footer ul li { margin-bottom:12px; } footer ul li a{ color:white; } footer ul li a:hover{ text-decoration: underline; } footer p{ font-size:0.6em; color:white; text-align:center; }