@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:100px; } @media (max-width: 768px) { main{ padding-top:60px; } } section{ width:100%; position:relative; } .inner{ width:1000px; max-width:calc(100vw - 80px); padding:60px 0 100px 0; margin:0 auto; } @media (max-width: 930px) { .inner{ max-width:calc(100vw - 56px); } } @media screen and (max-width: 768px) { .inner{ padding: 40px 0 80px 0; } } @media screen and (max-width: 528px) { .inner{ padding: 36px 0 60px 0; max-width:calc(100vw - 40px); } } /* button */ .button { text-transform: none; padding: 8px 28px; color: var(--red); border-radius: 50vh; cursor: pointer; font-weight: bold; display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative; font-size:1.2em; border: 2px solid var(--red); } .button:hover{ text-decoration:none; background:var(--red); color:white; } @media screen and (max-width: 768px) { .button:after{ top:12px; } } /* header */ header{ width:100%; margin:0 auto; height:100px; background: linear-gradient(to bottom, #000000 50%, #858687 100%); position:fixed; z-index:999; box-shadow:0 4px 20px #BE0202; padding-top:12px; } header .inner{ padding:0; position:relative; } header .h-b-box{ position:absolute; top:68px; right:0; left:0; display:flex; justify-content: center; width:100%; } header .h-b-box li{ width:stretch; } header .sp{ display:none; } header .logo{ width:160px; } header .header-sns{ float:right; margin-top:8px; } header .header-sns:hover img{ box-shadow: 0 0 16px white; border-radius:12px; } .h-b-box{ box-shadow:0 4px 20px #BE0202; border-radius:8px; } .h-button { overflow:hidden; text-transform: none; padding: 8px 16px; color: white; background: linear-gradient(to bottom, #E51C21 28%, #F4C60E 100%); cursor: pointer; font-weight: bold; display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative; border-right:1px solid white; } .h-b-box li:first-child .h-button{ border-top-left-radius:8px; border-bottom-left-radius:8px; } .h-b-box li:nth-child(5) .h-button{ border-right:none; border-top-right-radius:8px; border-bottom-right-radius:8px; } .h-button:hover{ text-decoration:none; border-bottom: none; background: linear-gradient(to bottom, #E51C21 0%, #F4C60E 80%); } @media (max-width: 930px) { .h-button { font-size:.9em; padding:8px 10px; } } @media screen and (max-width: 1240px) { header .h-b-box{ right:-20px; } header .button{ font-size: 1.25vw; } header .button:after{ top:calc(50% - 3px); width:8px; height:8px; } } @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 .button{ font-size: 1.2em; } header .button:after{ top:15px; width:10px; height:10px; } } @media (max-width: 768px) { .h-button { font-size:1em; } } .height-list{ height:auto; } header .h-b-box li.sp{ display:none; } /* ハンバーガーメニュー */ header .header-sns{ display:block; } @media (max-width: 768px) { header .header-sns{ display:none; } header{ height:60px; padding-top:8px; } header .inner{ max-width:calc(100% - 20px); } header .logo{ width:128px; } /* チェックボックスを非表示にする */ .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; float:right; margin-top:-6px; } /* ハンバーガーメニューのアイコン */ .drawer_open span, .drawer_open span:before, .drawer_open span:after { content: ''; display: block; height: 3px; width: 25px; border-radius: 3px; background: white; 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: #EF9801; } header .h-b-box{ width:300px; position:relative; flex-direction: column; gap:8px; margin:100px auto; box-shadow:none; } .h-button, .h-button:hover{ background:none; border:none; border-bottom:1px solid #EF9801; } .h-b-box li .h-button{ border-radius:0; } .h-b-box li:first-child .h-button { border-top-left-radius: 0; border-bottom-left-radius: 0; } .h-b-box li:nth-child(5) .h-button{ border-top-right-radius:0; border-bottom-right-radius:0; } .h-button:hover{ border-bottom:1px solid white; } header .h-b-box li.sp{ text-align: center; margin-top:20px; display:block; } } @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); } } /* footer */ footer{ background:#2f3131; } footer .inner{ display:flex; justify-content:center; gap:80px; } footer .footer-nav{ display:flex; gap:80px; padding-top:20px; } footer .footer-nav ul{ display:flex; flex-direction: column; gap:12px; } footer .footer-nav ul li a{ color:white; } footer .footer-nav ul li a:hover{ color:#FFCC01; } footer .footer-case-low{ width:100%; background:white; padding:60px 0; } footer .footer-case-low ul{ display:flex; justify-content: center; } footer .footer-case-low ul li a{ border-right:1px solid gray; padding:2px 20px; color:#2f3131; } footer .footer-case-low ul li a:hover{ color:#D61518; } footer .footer-case-low ul li:last-child{ border-right:0; } footer .copyright p{ text-align: center; margin-top:20px; font-size:.8em; } @media (max-width: 1000px) { footer .inner{ gap:60px; padding:40px 0; } footer .footer-nav{ gap:40px; } footer .footer-case-low{ padding:28px 0; } } @media (max-width:768px) { footer .inner{ flex-direction: column; align-items: center; gap:20px; padding:40px 0; } footer .footer-nav{ gap:40px; } footer .footer-case-low{ padding:28px 0; } footer .footer-case-low ul{ flex-direction: column; align-items: center; gap:4px; } footer .footer-case-low ul li a{ border-right:0; } } @media (max-width:480px) { footer .inner{ gap:0; } footer .footer-nav{ flex-direction: column; gap:8px; align-items: center; } footer .footer-nav ul{ gap:8px; } footer .footer-nav ul li{ text-align: center; } } footer .kobutsu{ text-align: center; font-size: .8em; line-height: 1.5; padding: 20px 0; } /* 下層ページのヘッダー */ .page-header{ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: #ffa500; position: relative; overflow: hidden; } .page-header::before { content: ""; position: absolute; inset: 0; background-image: url(/wp-content/themes/oneshot-theme/assets/img/bg.jpg); background-repeat: repeat; background-size: 200px; mix-blend-mode: multiply; pointer-events: none; } .page-header .inner{ padding:60px 0 40px 0; } .page-header .inner h1{ color:white; font-size:2em; font-weight:700; position:relative; display:flex; align-items: center; gap:4px; line-height: 80px; } @media (max-width:768px) { .page-header .inner{ padding:24px 0 20px 0; height:92px; } .page-header .inner h1{ font-size:1.8em; line-height: 1.2; } .page-header .inner h1 img{ height:48px; } } /* パンくず */ .breadcrumb{ position:relative; margin-top:100px; } .breadcrumb:before{ position:absolute; content:""; top:-79px; width:100%; height:80px; background: linear-gradient(to bottom, #ffffff 0%, #E7E7E7 100%); } .breadcrumb .inner{ padding:40px 0; } .breadcrumb .post-page{ word-break: break-all; } @media (max-width:768px) { .breadcrumb{ margin-top:60px; } .breadcrumb:before{ top:-39px; height:40px; } .breadcrumb .inner{ padding:20px 0; } }