@charset "UTF-8"; /* Theme Name: Child for arkhe. Theme URI: https://arkhe-theme.com Description: A very simple theme for production templates. Customize as you like. Author: LOOS,Inc. Textdomain: arkhe Author URI: https://loos.co.jp/ Template: arkhe Version: 3.2.3 License: GNU General Public License v3 or later License URI: https://www.gnu.org/licenses/gpl-3.0.html */ html { font-size: 14px; font-family: sans-serif; } h1 { font-size: 2.2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.2rem; } p { font-size: 1rem; } .mid { font-size: 1.2rem; } nav, menu { font-size: 0.9rem; } small, cite { font-size: 0.8rem; } .l-terms-title h2, .l-aboutus-title h2 { font-size: 2.2rem; } .c-postMetas > div { font-size: 1rem; } .c-block-dlBtn_link { color: var(--ark-color--bg); line-height: 1.5rem; text-align: center; text-decoration: none; } /*** The new CSS reset - version 1.9 (last updated 19.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *: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; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; padding: 0; } /* 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; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* 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; } .pc { display: none; } .sp { display: block; } @media (min-width:1280px) { .pc { display: block; } .sp { display: none; } } footer { background: #D9D9D9; } footer .l-footer-menu ul { display: flex; align-items: flex-start; gap: 20px; } @media (min-width:1280px) { footer .l-footer-menu { display: flex; justify-content: space-between; } footer .l-footer-menu > nav > ul { flex-direction: column; } } footer .l-footerlogo { height: 30vh; overflow: hidden; } footer .l-footerlogo svg { height: 35vh; } @media (min-width:1280px) { footer .l-footerlogo { height: auto; } footer .l-footerlogo svg { height: auto; width: 120dvw; } } #header .l-header__body { padding-left: 0; padding-right: 0; } .l-header__logo { justify-content: flex-start; } .l-mainvisual { width: 100dvw; height: auto; } .l-mainvisual > div h1 picture img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .l-scriptlist-title { width: 100%; border-bottom: 1px solid #000; } .l-scriptlist { display: flex; gap: 40px; flex-wrap: wrap; } .l-scriptlist .l-script-tag { display: flex; align-items: flex-start; gap: 5px; } .l-scriptlist > section { width: 100%; } .l-scriptlist > section .l-script-thumbnail > img { width: 100%; height: 100%; aspect-ratio: 240/150; -o-object-fit: cover; object-fit: cover; } @media (min-width:768px) { .l-scriptlist > section { width: calc((100% - 40px) / 2); } } @media (min-width:1280px) { .l-scriptlist > section { max-width: 240px; } } .l-scriptlist a { color: inherit; } .l-terms-title, .l-aboutus-title { display: block; width: 100dvw; text-align: center; } .l-aboutus { background: #000; color: #fff; } .l-aboutus-title h2 { display: flex; align-items: center; justify-content: center; } .l-aboutus-title img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (min-width:1280px) { .l-aboutus-title img { width: 30%; } } .l-terms { background: #D9D9D9; } .l-terms-title + div { border-top: 3px solid #f3f3f3; } .l-terms ul { list-style: none; /* デフォルトのアイコンを消す */ margin: 0; /* デフォルト指定上書き */ padding: 0; /* デフォルト指定上書き */ } .l-terms li:before { content: ""; /* 空の要素作成 */ width: 10px; /* 幅指定 */ height: 10px; /* 高さ指定 */ display: inline-block; /* インラインブロックにする */ background-color: #F44336; /* 背景色指定 */ border-radius: 50%; /* 要素を丸くする */ position: relative; /* 位置調整 */ top: -1px; /* 位置調整 */ margin-right: 5px; /* 余白指定 */ } [data-btns=l-r] .l-header__body { grid-template-areas: "menu center right search"; grid-template-columns: var(--ark-drawerW) calc(75% - var(--ark-drawerW)) calc(25% - var(--ark-searchW)) var(--ark-searchW); } /*３ページ以上で利用されるならcomponentへ　親がhtmlタグはだめ*/ .c-andmore { display: flex; justify-content: center; align-items: center; width: 100%; border-top: 1px dashed #000; background: #f5f5f5; } .c-andmore a { display: block; color: inherit; } .c-copyright { text-align: left; } .c-postMetas > div { margin-bottom: 0; } .c-dlBtn { position: relative; width: 3rem; height: 3rem; background-color: transparent; fill: #ffffff; display: flex; justify-content: center; align-items: center; } .c-dlBtn::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--ark-color--footer_bg); border-radius: 50%; z-index: -1; } .c-block-dlBtn { display: flex; flex-wrap: wrap; justify-content: center; } .c-block-dlBtn-fill .c-block-dlBtn_link { background: var(--ark-color--main); } .c-block-dlBtn_link { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.2em; max-width: 100%; min-width: 3em; padding: 0.75rem 1.75rem; border-radius: 100vh; transition: all 0.25s; } .c-block-dlBtn_link:hover { filter: brightness(1.2); opacity: 0.8; } .wrapper { width: 80%; margin-inline: auto; } @media (min-width:1280px) { .wrapper { max-width: 800px; } } header { padding-block: 1.2rem; } footer { margin-top: 12rem; padding-top: 1.8rem; } footer .l-sns { margin-top: 2.5rem; } footer .l-footerlogo { margin-top: 3rem; } @media (min-width:1280px) { footer { padding-top: 4.2rem; } footer .l-sns { margin-top: 0; } } footer .l-container { padding: 0; } .l-scriptlist-container { padding-block: 1.8rem; } .l-scriptlist-container > div > article { margin-top: 0.8rem; margin-bottom: 3.2rem; } .l-scriptlist-title { padding-block: 0.8rem; } .l-scriptlist { padding-block: 0.8rem; } .l-script-summary { margin-top: 1rem; } .l-script-summary > ul { margin-top: 1.3rem; } .l-script-summarytxt { margin-top: 1.2rem; } .l-aboutus { margin-top: 5rem; } .l-aboutus .l-aboutus-title + div div { padding-top: 2rem; padding-bottom: 4rem; } .l-aboutus .l-aboutus-title + div div p { margin-top: 1rem; } .l-terms-title { padding-block: 4rem; } .l-terms-title + div { padding-block: 4.5rem; } .l-terms-list > div > div > h3 { margin-top: 3.2rem; margin-bottom: 1rem; } .c-andmore a { padding: 1rem; } .c-topArea { padding: 2rem 0; }/*# sourceMappingURL=style.css.map */