/* Theme Name: KAMIKAZE ATTACK THEME Text Domain: kamikaze Theme URI: https://kamikaze-attack.com/ Author: MATHMATH CRAFTS Author URI: https://relax13.com/ Description: KAMIKAZE ATTACK Co.,Ltd. Theme Version: 1.0.9 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: Responsive */ :root { -ms-overflow-style: -ms-autohiding-scrollbar; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } *, *::after, *::before { margin: 0; padding: 0; box-sizing: inherit; } * { font-size: inherit; line-height: inherit; font-weight: inherit; } ::before, ::after { text-decoration: inherit; vertical-align: inherit; } *, ::before, ::after { border-style: solid; border-width: 0; } html { font-size: 62.5%; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; } body { position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; box-sizing: border-box; background-color: #fff; } hr { box-sizing: content-box; height: 0; overflow: visible; } b, strong { font-weight: bolder; } small { font-size: 80%; } ol, ul { padding: 0; list-style: none; } img { display: block; max-width: 100%; height: auto; border-style: none; line-height: 1; } img[src$=".svg"] { width: 100%; } svg:not(:root) { overflow: hidden; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } [hidden] { display: none; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /*============================ Base ============================*/ :root { --base-color: #181818; --main-color: #c41924; --accent-color: #043c78; --text-size: 1.4rem; --base-padding: 20px; --base-margin: 40px; --content-width: 1400px; --sub-color: #f7f6f2; --background-color: #fff; --brand-color: #d4000; } .defs { display: none; } body { background-color: var(--background-color); } /*++++++++++++++++++++++++++++ Grid ++++++++++++++++++++++++++++*/ .row { display: flex; flex-wrap: wrap; padding: 0 10px; } .col { display: block; flex-basis: 0; flex-grow: 1; flex-shrink: 1; } .grid-inner { padding: 0 10px 10px; } .col.s1 { width: calc(100% / 12); flex: none; } .col.s2 { width: calc(100% / 6); flex: none; } .col.s3 { width: calc(100% / 4); flex: none; } .col.s4 { width: calc(100% / 3); flex: none; } .col.s5 { width: calc(100% / 12 * 5); flex: none; } .col.s6 { width: calc(100% / 2); flex: none; } .col.s7 { width: calc(100% / 12 * 7); flex: none; } .col.s8 { width: calc(100% / 3 * 2); flex: none; } .col.s9 { width: calc(100% / 4 * 3); flex: none; } .col.s10 { width: calc(100% / 6 * 5); flex: none; } .col.s11 { width: calc(100% / 12 * 11); flex: none; } .col.s12 { width: 100%; flex: none; } @media only screen and (min-width: 600px) { .col.m1 { width: calc(100% / 12); flex: none; } .col.m2 { width: calc(100% / 6); flex: none; } .col.m3 { width: calc(100% / 4); flex: none; } .col.m4 { width: calc(100% / 3); flex: none; } .col.m5 { width: calc(100% / 12 * 5); flex: none; } .col.m6 { width: calc(100% / 2); flex: none; } .col.m7 { width: calc(100% / 12 * 7); flex: none; } .col.m8 { width: calc(100% / 3 * 2); flex: none; } .col.m9 { width: calc(100% / 4 * 3); flex: none; } .col.m10 { width: calc(100% / 6 * 5); flex: none; } .col.m11 { width: calc(100% / 12 * 11); flex: none; } .col.m12 { width: 100%; flex: none; } } @media only screen and (min-width: 960px) { .col.l1 { width: calc(100% / 12); flex: none; } .col.l2 { width: calc(100% / 6); flex: none; } .col.l3 { width: calc(100% / 4); flex: none; } .col.l4 { width: calc(100% / 3); flex: none; } .col.l5 { width: calc(100% / 12 * 5); flex: none; } .col.l6 { width: calc(100% / 2); flex: none; } .col.l7 { width: calc(100% / 12 * 7); flex: none; } .col.l8 { width: calc(100% / 3 * 2); flex: none; } .col.l9 { width: calc(100% / 4 * 3); flex: none; } .col.l10 { width: calc(100% / 6 * 5); flex: none; } .col.l11 { width: calc(100% / 12 * 11); flex: none; } .col.l12 { width: 100%; flex: none; } } @media only screen and (min-width: 1280px) { .col.xl1 { width: calc(100% / 12); flex: none; } .col.xl2 { width: calc(100% / 6); flex: none; } .col.xl3 { width: calc(100% / 4); flex: none; } .col.xl4 { width: calc(100% / 3); flex: none; } .col.xl5 { width: calc(100% / 12 * 5); flex: none; } .col.xl6 { width: calc(100% / 2); flex: none; } .col.xl7 { width: calc(100% / 12 * 7); flex: none; } .col.xl8 { width: calc(100% / 3 * 2); flex: none; } .col.xl9 { width: calc(100% / 4 * 3); flex: none; } .col.xl10 { width: calc(100% / 6 * 5); flex: none; } .col.xl11 { width: calc(100% / 12 * 11); flex: none; } .col.xl12 { width: 100%; flex: none; } } /*============================ Font Init ============================*/ @font-face { font-family: YuGothicM; src: local("Yu Gothic Medium"); } body { color: var(--base-color); font-size: 14px; font-size: 1.4rem; font-weight: 400; font-family: Roboto, -apple-system, BlinkMacSystemFont, "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; word-wrap: break-word; } .bbb { font-family: a-otf-gothic-bbb-pr6n, sans-serif; font-weight: 400; font-style: normal; } @font-face { font-family: 'bernier'; src: url('assets/fonts/bernier_regular-webfont.woff2') format('woff2'), url('assets/fonts/bernier_regular-webfont.woff') format('woff'), url('assets/fonts/bernier_regular-webfont.ttf') format('truetype'), url('assets/fonts/bernier_regular-webfont.svg#bernier') format('svg'); font-weight: normal; font-style: normal; } .bernier { font-family: 'bernier'; } @font-face { font-family: 'kamikazeicons'; src: url('assets/fonts/kamikazeicons.ttf?qde8xq') format('truetype'), url('assets/fonts/kamikazeicons.woff?qde8xq') format('woff'), url('assets/fonts/kamikazeicons.svg?qde8xq#kamikazeicons') format('svg'); font-weight: normal; font-style: normal; } .ki { font-family: 'kamikazeicons' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; letter-spacing: 0; -webkit-font-feature-settings: "liga"; -moz-font-feature-settings: "liga=1"; -moz-font-feature-settings: "liga"; -ms-font-feature-settings: "liga" 1; font-feature-settings: "liga"; -webkit-font-variant-ligatures: discretionary-ligatures; font-variant-ligatures: discretionary-ligatures; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ki-command::before { content: "\e900"; } .ki-shift::before { content: "\e901"; } .ki-ctrl::before { content: "\e902"; } .ki-opt::before { content: "\e903"; } .ki-arrow-up::before { content: "\e904"; } .ki-arrow-down::before { content: "\e905"; } .ki-arrow-left::before { content: "\e906"; } .ki-arrow-right::before { content: "\e907"; } .ki-arrow-circle-up::before { content: "\e908"; } .ki-arrow-circle-down::before { content: "\e909"; } .ki-arrow-circle-left::before { content: "\e90a"; } .ki-arrow-circle-right::before { content: "\e90b"; } .ki-chevron-up::before { content: "\e90c"; } .ki-chevron-down::before { content: "\e90d"; } .ki-chevron-left::before { content: "\e90e"; } .ki-chevron-right::before { content: "\e90f"; } .ki-chevron-circle-up::before { content: "\e910"; } .ki-chevron-circle-down::before { content: "\e911"; } .ki-chevron-circle-left::before { content: "\e912"; } .ki-chevron-circle-right::before { content: "\e913"; } .ki-angle-up::before { content: "\e914"; } .ki-angle-down::before { content: "\e915"; } .ki-angle-left::before { content: "\e916"; } .ki-angle-right::before { content: "\e917"; } .ki-caret-up::before { content: "\e918"; } .ki-caret-down::before { content: "\e919"; } .ki-caret-left::before { content: "\e91a"; } .ki-caret-right::before { content: "\e91b"; } .ki-plus::before { content: "\e91c"; } .ki-minus::before { content: "\e91d"; } .ki-check::before { content: "\e91e"; } .ki-close::before { content: "\e91f"; } .ki-remove::before { content: "\e91f"; } .ki-circle::before { content: "\e920"; } .ki-circle-o::before { content: "\e921"; } .ki-circle-fill::before { content: "\e922"; } .ki-square::before { content: "\e923"; } .ki-check-square::before { content: "\e924"; } .ki-square-o::before { content: "\e925"; } .ki-check-square-o::before { content: "\e926"; } .ki-external-link::before { content: "\e927"; } .ki-plus-circle::before { content: "\e928"; } .ki-minus-circle::before { content: "\e929"; } .ki-check-circle::before { content: "\e92a"; } .ki-close-circle::before { content: "\e92b"; } .ki-question-circle::before { content: "\e92c"; } .ki-exclamation-circle::before { content: "\e92d"; } .ki-info-circle::before { content: "\e92e"; } .ki-info::before { content: "\e92f"; } .ki-search::before { content: "\e930"; } .ki-search-plus::before { content: "\e931"; } .ki-search-minus::before { content: "\e932"; } .ki-asterisk::before { content: "\e933"; } .ki-certificate::before { content: "\e934"; } .ki-award::before { content: "\e935"; } .ki-diamond::before { content: "\e936"; } .ki-gear::before { content: "\e937"; } .ki-quotes-left::before { content: "\e938"; } .ki-quotes-right::before { content: "\e939"; } .ki-feed::before { content: "\e93a"; } .ki-rss::before { content: "\e93b"; } .ki-heart::before { content: "\e93c"; } .ki-heart-o::before { content: "\e93d"; } .ki-star::before { content: "\e93e"; } .ki-star-half::before { content: "\e93f"; } .ki-star-o::before { content: "\e940"; } .ki-bookmark::before { content: "\e941"; } .ki-bookmark-o::before { content: "\e942"; } .ki-tag::before { content: "\e943"; } .ki-tags::before { content: "\e944"; } .ki-th-large::before { content: "\e945"; } .ki-th::before { content: "\e946"; } .ki-th-list::before { content: "\e947"; } .ki-list::before { content: "\e948"; } .ki-bars::before { content: "\e949"; } .ki-bell::before { content: "\e94a"; } .ki-bell-o::before { content: "\e94b"; } .ki-home::before { content: "\e94c"; } .ki-building::before { content: "\e94d"; } .ki-clock::before { content: "\e94e"; } .ki-calendar-o::before { content: "\e94f"; } .ki-calendar::before { content: "\e950"; } .ki-date::before { content: "\e951"; } .ki-list-alt::before { content: "\e952"; } .ki-table::before { content: "\e953"; } .ki-book::before { content: "\e954"; } .ki-books::before { content: "\e955"; } .ki-paperclip::before { content: "\e956"; } .ki-camera::before { content: "\e957"; } .ki-image::before { content: "\e958"; } .ki-file::before { content: "\e959"; } .ki-file-text::before { content: "\e95a"; } .ki-file-o::before { content: "\e95b"; } .ki-file-text-o::before { content: "\e95c"; } .ki-file-download::before { content: "\e95d"; } .ki-clone::before { content: "\e95e"; } .ki-window::before { content: "\e95f"; } .ki-code::before { content: "\e960"; } .ki-toggle-off::before { content: "\e961"; } .ki-toggle-on::before { content: "\e962"; } .ki-comment::before { content: "\e963"; } .ki-comment-o::before { content: "\e964"; } .ki-commenting::before { content: "\e965"; } .ki-commenting-o::before { content: "\e966"; } .ki-comments::before { content: "\e967"; } .ki-comments-o::before { content: "\e968"; } .ki-comment-alt::before { content: "\e969"; } .ki-comment-alt-o::before { content: "\e96a"; } .ki-envelope::before { content: "\e96b"; } .ki-envelope-o::before { content: "\e96c"; } .ki-link::before { content: "\e96d"; } .ki-globe::before { content: "\e96e"; } .ki-edit::before { content: "\e96f"; } .ki-pencil::before { content: "\e970"; } .ki-edit-square::before { content: "\e971"; } .ki-sissors::before { content: "\e972"; } .ki-map::before { content: "\e973"; } .ki-map-o::before { content: "\e974"; } .ki-map-marked::before { content: "\e975"; } .ki-marker::before { content: "\e976"; } .ki-post::before { content: "\e977"; } .ki-user::before { content: "\e978"; } .ki-user-alt::before { content: "\e979"; } .ki-profile::before { content: "\e97a"; } .ki-v-card::before { content: "\e97b"; } .ki-tel::before { content: "\e97c"; } .ki-shopping-cart::before { content: "\e97d"; } .ki-shopping-bag::before { content: "\e97e"; } .ki-truck::before { content: "\e97f"; } .ki-facebook-official::before { content: "\e980"; } .ki-facebook::before { content: "\e981"; } .ki-twitter::before { content: "\e982"; } .ki-instagram::before { content: "\e983"; } .ki-tumblr::before { content: "\e984"; } .ki-google-plus::before { content: "\e985"; } .ki-line::before { content: "\e986"; } .ki-hatebu::before { content: "\e987"; } .ki-pinterest::before { content: "\e988"; } .ki-github::before { content: "\e989"; } .ki-pocket::before { content: "\e98a"; } .ki-youtube::before { content: "\e98b"; } .ki-vimeo::before { content: "\e98c"; } .ki-wordpress::before { content: "\e98d"; } .ki-slack::before { content: "\e98e"; } .ki-skype::before { content: "\e98f"; } .ki-google-drive::before { content: "\e990"; } .ki-amazon::before { content: "\e991"; } .ki-apple::before { content: "\e992"; } .ki-app-store::before { content: "\e993"; } .ki-google::before { content: "\e994"; } .ki-android::before { content: "\e995"; } .ki-safari::before { content: "\e996"; } .ki-chrome::before { content: "\e997"; } .ki-firefox::before { content: "\e998"; } .ki-opera::before { content: "\e999"; } .ki-edge::before { content: "\e99a"; } .ki-ie::before { content: "\e99b"; } .ki-desktop::before { content: "\e99c"; } .ki-laptop::before { content: "\e99d"; } .ki-tablet::before { content: "\e99e"; } .ki-mobile::before { content: "\e99f"; } .ki-wifi::before { content: "\e9a0"; } .ki-yen::before { content: "\e9a1"; } .ki-credit-card::before { content: "\e9a2"; } .ki-cc-visa::before { content: "\e9a3"; } .ki-cc-mastercard::before { content: "\e9a4"; } .ki-cc-discover::before { content: "\e9a5"; } .ki-cc-amex::before { content: "\e9a6"; } .ki-cc-paypal::before { content: "\e9a7"; } .ki-cc-jcb::before { content: "\e9a8"; } .ki-cc-diners-club::before { content: "\e9a9"; } .ki-cc-stripe::before { content: "\e9aa"; } .ki-cc-apple-pay::before { content: "\e9ab"; } .ki-cc-amazon-pay::before { content: "\e9ac"; } .ki-paypal::before { content: "\e9ad"; } .ki-apple-pay::before { content: "\e9ae"; } .ki-amazon-pay::before { content: "\e9af"; } .ki-logo::before { content: "\41"; } .ki-logo-ja::before { content: "\42"; } .ki-logo-en::before { content: "\43"; } .ki-attack::before { content: "\44"; } /*============================ Header ============================*/ @media screen and (max-width: 600px), all { #wpadminbar { position: fixed; } } .header { position: fixed; top: 0; width: 100%; z-index: 1200; padding-left: 10px; padding-left: calc(env(safe-area-inset-left) + 10px); padding-right: 10px; padding-right: calc(env(safe-area-inset-right) + 10px); padding-top: 10px; transition: background-color .5s; } .header-inner { position: relative; width: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .header a { text-decoration: none; } .header.on { mix-blend-mode: difference; } .admin-bar .header { top: 46px; } @media (min-width: 768px) { .admin-bar .header { top: 32px; } } @media (min-width: 960px){ .header { padding-top: 30px; } .header-inner { width: calc(100% - 40px); } .header:hover { background-color: rgba(255,255,255,.96); box-shadow: 0 0 5px 0 rgba(0,0,0,.2); mix-blend-mode: normal; } } /*---------------- Branding ----------------*/ .branding { padding: 5px 0; transition: all .5s; } .headline-logo { display: block; width: 50px; height: 50px; transition: all .5s; } .headline-logo .logo-svg { width: 100%; height: 100%; fill: #fff; transition: all .5s; } @media (min-width: 960px){ .header.on .branding { padding: 5px 0; } .header.on .headeline-logo .logo-svg { fill: #fff; } .header:hover .branding { padding: 12px 0; } .header:hover .headline-logo { width: 60px; height: 60px; } .header:hover .headline-logo .logo-svg { fill: var(--base-color); } } /*---------------- Nav ----------------*/ .header-nav { display: none; } .nav-shop { display: none; } @media (min-width: 960px){ .header-nav { display: flex; align-items: center; margin-left: 30px; margin-right: auto; transition: all .5s; } .nav-list { display: flex; align-items: center; } .nav-item { margin-right: 10px; } .nav-item > .nav-item-target { position: relative; display: block; color: #fff; line-height: 1; padding: 14px 18px 12px 8px; transition: all .5s; } .nav-shop { display: flex; justify-content: flex-end; margin-right: 0; } .nav-shop > .nav-item-target { position: relative; display: block; color: #fff; line-height: 1; padding: 14px 24px 12px; transition: all .5s; margin-left: 5px; } .nav-shop > .nav-item-target::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--main-color); /*transform: skewX(-4deg);*/ border-radius: 3px; transition: all .5s; } .nav-item > .nav-item-target::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: var(--main-color); transform: scale3d(0,1,1); transform-origin: 100% 0; transition: transform .2s linear; } .nav-item > .nav-item-target:hover::after { transform: scale3d(1,1,1); transform-origin: 0 0; transition: transform .3s linear; } .nav-item-title { position: relative; display: block; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.025em; } .nav-item-label { position: relative; display: block; font-size: 1rem; font-weight: 700; letter-spacing: -0.5em; white-space: nowrap; transform: scale3d(0,0,1); transform-origin: left top; transition: transform .3s, padding-top .3s, letter-spacing .3s; } .nav-shop .nav-item-title { display: flex; align-items: center; } .nav-shop .nav-label-s { display: none; } .nav-item-title i { font-size: 2rem; padding: 0 5px 2px 0; } .header.on .nav-item > .nav-item-target { padding: 12px 12px 10px 4px; color: #fff; } .header.on .nav-shop > .nav-item-target { padding: 12px 18px 10px; color: #fff; } .header.on .nav-shop > .nav-item-target::before { background-color: transparent; } .header.on .nav-shop > .nav-item-target .nav-label { display: none; } .header.on .nav-shop > .nav-item-target .nav-label-s { display: block; } .header:hover .nav-item > .nav-item-target { padding: 14px 18px 10px 4px; color: var(--base-color); } .header:hover .nav-item > .nav-item-target .nav-item-label { padding-top: 3px; letter-spacing: 0; transform: scale3d(1,1,1); } .header:hover .nav-shop > .nav-item-target { padding: 14px 24px 10px; color: #fff; } .header:hover .nav-shop > .nav-item-target::before { background-color: var(--main-color); } .header:hover .nav-shop > .nav-item-target .nav-label { display: block; } .header:hover .nav-shop > .nav-item-target .nav-label-s { display: none; } .header:hover .nav-sns .sns-icon a { color: var(--base-color); } .header:hover .nav-item > .nav-item-target:hover { color: var(--main-color); } .header:hover .nav-shop > .nav-item-target:hover { color: var(--main-color); } .header:hover .nav-shop > .nav-item-target:hover::before { background-color: transparent; border: 2px solid var(--main-color); } } .toggle { position: relative; } .menu-toggle { display: flex; justify-content: flex-end; align-items: center; width: 40px; height: 40px; background-color: transparent; transition: all .5s ease; } .menu-toggle:focus { outline: none; }/* Chrome */ .menu-toggle:hover { cursor: pointer; } .menu-toggle.collapsed { background-color: transparent; } .menu-toggle-inner { position: relative; display: block; width: 28px; height: 20px; margin-right: 6px; } .menu-toggle-inner span { position: absolute; height: 2px; width: 28px; left: 0; background-color: #fff; transition: all .3s ease; } .menu-toggle.collapsed .menu-toggle-inner span { background-color: #fff; } .menu-toggle-inner span:nth-child(1) { top: 9px; transform: rotate(45deg); } .menu-toggle-inner span:nth-child(2) { top: 9px; width: 0px; opacity: 0; } .menu-toggle-inner span:nth-child(3) { bottom: 9px; transform: rotate(-45deg); } .menu-toggle.collapsed .menu-toggle-inner span:nth-child(1) { top: 0; transform: rotate(0deg); } .menu-toggle.collapsed .menu-toggle-inner span:nth-child(2) { top: 9px; width: 28px; opacity: 1; } .menu-toggle.collapsed .menu-toggle-inner span:nth-child(3) { bottom: 0; transform: rotate(0deg); } .header.on .toggle { mix-blend-mode: exclusion; } @media (min-width: 960px) { .toggle { display: none; } } .drawer { position: fixed; display: none; top: 0; right: 0; width: 100%; height: 100%; color: #fff; background-color: #181818; overflow-y: scroll; z-index: 1100; } .drawer-inner { display: block; min-width: 320px; } .drawer a { text-decoration: none; } .drawer-on .drawer { display: flex; align-items: center; justify-content: center; animation: openDrawer .3s ease 0s; } .drawer-heading { display: block; margin: 30px auto 20px; width: 70px; } .drawer-heading > a { display: block; width: 70px; } .drawer-heading .logo-svg { width: 70px; height: 70px; fill: #fff; } @keyframes openDrawer { 0% { opacity: 0; transform: scale(.9); } 100% { opacity: 1; transform: scale(1); } } .drawer-nav { display: block; } .drawer-nav .nav-list { display: block; } .drawer-nav .nav-item { text-align: center; margin: 10px auto; } .drawer-nav .nav-item > .nav-item-target { color: #fff; padding: 10px 20px; } .drawer-nav .nav-item > .nav-item-target::after { display: none; } .drawer-nav .nav-item-title { display: block; font-size: 1.6rem; font-weight: 700; padding-bottom: 5px; } .drawer-nav .nav-item-label { display: block; font-size: 1.3rem; } .drawer-nav .nav-shop { margin: 10px auto; } .drawer-sns { display: flex; justify-content: center; align-items: center; padding: 20px; } .drawer-sns .sns-icon { font-size: 2.1rem; padding: 0 10px; } .sns-icon a { color: #fff; text-decoration: none; } @media (max-width: 320px) { .drawer-nav .nav-item { margin: 5px auto 10px; } .drawer-nav .nav-item > .nav-item-target { padding: 5px 10px; } } /*============================ Featured ============================*/ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track::before, .slick-track::after { display: table; content: ''; } .slick-track::after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .main-visual { position: relative; } .logo { position: absolute; top: 50vh; left: 50%; width: 70vw; z-index: 998; transform: translate(-50%, -50%); } .logoja { width: 70vw; height: calc(70vw * 115 / 280); fill: #d40000; transition: all .5s ease; } .logoen { position: absolute; top: calc(70vw * 9 / 28); left: 50%; width: calc(70vw * 11 / 14); height: 7vw; transform: translateX(-50%); fill: #fff; transition: all .5s ease; } @media only screen and (min-width: 600px) { .logo { width: 55vw; } .logoja { width: 55vw; height: calc(55vw * 115 / 280); } .logoen { top: calc(55vw * 9 / 28); width: calc(55vw * 11 / 14); height: calc(55vw / 10); } } @media only screen and (min-width: 960px) { .logo { width: 30vw; } .logoja { width: 30vw; height: calc(30vw * 115 / 280); } .logoen { top: calc(30vw * 9 / 28); width: calc(30vw * 11 / 14); height: 3vw; } } .featured-image { position: relative; width: 100%; height: 100vh; overflow: hidden; transition: all .5s ease; } .featured-image img { width: 100%; height: 100%; object-fit: cover;} .featured-image:not(.slick-active) img { transform: scale(1.05); } .featured-image.slick-active img { animation: featuredSlide 5s linear forwards; } @keyframes featuredSlide { 0% { transform: scale(1); } 100% { transform: scale(1.05); } } .slick-dots { position: absolute; bottom: 15px; left: 50%; width: 100%; max-width: var(--content-width); display: flex; justify-content: flex-end; align-items: center; padding: 0 20px; margin: 0 auto; list-style: none; padding-left: calc(env(safe-area-inset-left) + 20px); padding-right: calc(env(safe-area-inset-right) + 20px); transform: translateX(-50%); } .slick-dots li { position: relative; display: block; margin-left: 10px; } .slick-dots li.slick-active { } .slick-dots li button { position: relative; display: block; width: 50px; color: #fff; text-align: right; line-height: 20px; font-size: 1.2rem; font-weight: 700; cursor: pointer; outline: none; background-color: transparent; transition: .3s all ease; border-bottom: 2px solid #fff; } .slick-dots li.slick-active button { color: #d40000; } .slick-dots li button::before { content: "0"; } .slick-dots li button::after { position: absolute; content: ""; bottom: -2px; right: 0; width: 50px; height: 2px; background-color: #d40000; transform: scale3d(0,1,1); transform-origin: 100% 0; transition: transform .2s linear; } .slick-dots li.slick-active button::after { transform: scale3d(1,1,1); transform-origin: 0 0; transition: transform 5s linear; } @media (min-width: 960px) { .slick-dots { padding: 0 30px; } } /*============================ Layout ============================*/ .section { position: relative; padding: 50px 0; background-color: #fff; } .inner { position: relative; width: 100%; max-width: var(--content-width); margin: 0 auto; padding: 0 10px; padding-left: calc(env(safe-area-inset-left) + 10px); padding-right: calc(env(safe-area-inset-right) + 10px); } .headline { color: #181818; font-size: 3.2rem; text-align: center; padding-bottom: 30px; } @media (min-width: 600px) { .headline { font-size: 3.8rem; } .inner { padding: 0 20px; padding-left: calc(env(safe-area-inset-left) + 20px); padding-right: calc(env(safe-area-inset-right) + 20px); } } @media (min-width: 960px) { .headline { font-size: 4.2rem; } } .crtbtn { position: relative; display: block; width: 100%; text-align: center; padding: 40px 0; } .crtbtn .btn { position: relative; display: inline-flex; justify-content: center; align-items: center; flex-direction: column; color: #fff; font-size: 1.6rem; letter-spacing: 0.05em; text-decoration: none; padding: 10px 30px;} .btn-en { position: relative; font-size: 1.8rem; font-weight: 700; line-height: 1.5; z-index: 100; } .btn-ja { position: relative;font-size: 1.4rem; font-weight: 700; z-index: 100; } .crtbtn .btn::before { content: ""; position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; transform: translate(-50%, -50%) rotate(45deg); background-color: #d40000; transition: .5s all ease; } .crtbtn .btn:hover::before { animation: crtBtn .3s ease 0s forwards; } @keyframes crtBtn { 0% { width: 80px; height: 80px; transform: translate(-50%, -50%) rotate(-45deg); transform-origin: center center; } 100% { transform: translate(-50%, -50%) rotate(45deg); } } /*---------------- INFORMATION ----------------*/ .section-information { background-color: #efefef; } .archive .section-information, .category .section-information, .tag .section-information { min-height: calc(100vh - 400px); } .info { } .info-list { } .info-item { position: relative; display: block; padding: 10px 10px 45px; margin: 0 0 20px; background-color: #fff; } .info-title { font-size: 1.6rem; font-weight: 700; line-height: 1.2; padding: 0 5px 10px; margin-bottom: 10px; border-bottom: 1px solid var(--base-color); } .info-date { font-size: 1.1rem; color: #ccc; padding: 0 5px 10px; } .info-img { width: 100%; padding-bottom: 10px; } .info-body { font-size: 1.4rem; line-height: 1.5; margin-bottom: 20px; padding: 0 5px; } .readmore { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: inline-block; text-decoration: none; padding: 7px 18px 5px; color: var(--base-color); font-size: 1.2rem; font-weight: 700; border: 1px solid var(--base-color); transition: all .5s; border-radius: 3px; } .readmore:hover { color: #fff; background-color: var(--base-color); } .calendar-unit { position: relative; overflow: hidden; } .calendardrop { padding-bottom: 30px; } table.calendar { width: 100%; border-collapse: separate; border-spacing: 0; border-bottom: 1px solid #aaa; border-right: 1px solid #aaa; background-color: #fff; margin-bottom: 10px; } table.calendar td { border-top: 1px solid #aaa; border-left: 1px solid #aaa; } table.calendar td { position: relative; padding: 8px 2px 4px; width: calc(100% / 7); text-align: right; } table.calendar thead td { text-align: center; font-weight: bold; background-color: #cac8b5; } table.calendar thead td.headsun { color: #9a0002; /*color: #101014;*/ } table.calendar thead td.headsat { color: #1953a7; /*color: #101014;*/ } .cdate { display: flex; justify-content: space-between; align-items: baseline; padding: 0 0 5px; } .cmonth-en { font-size: 2.8rem; margin-right: auto; } .cyear { font-size: 1.6rem; font-weight: 700; padding-right: 5px; } .cmonth { font-size: 2.8rem; font-weight: 700; } .day { font-size: 1.6rem; font-weight: 700; } .null { background-color: #f6f6f6; } .sat { /* color: #1953A7; */ color: #101014; } .sun, .holiday { color: #9a0002; } .close { background-color: #fcc; } .openholiday { color: #9A0002; background-color: #fff; } .opensunday { color: #9A0002; background-color: #fff; } .today { border: 2px solid #7b93bd !important; } table.calendar td.daytitle::after { position: absolute; opacity: 0; top: 40px; left: -50%; content: attr(data-title); display: block; width: 200%; padding: 10px 5px 10px; background-color: rgba(0, 0, 0, .5); border-radius: 4px; color: #fff; font-size: 1.2rem; font-weight: 700; transition: .3s ease-in-out; z-index: 1999; text-align: center; visibility: hidden; } table.calendar td.daytitle.sun::after { left: 20%; } table.calendar td.daytitle.sat::after { left: -80%; } table.calendar td.daytitle::before { position: absolute; opacity: 0; top: 20px; left: 50%; content: ''; border: 8px solid transparent; border-top-width: 10px; border-bottom-width: 10px; border-bottom-color: rgba(0, 0, 0, .5); transition: .3s ease-in-out; z-index: 1999; visibility: hidden; transform: translateX(-50%); } table.calendar td.daytitle.sun::before { left: 75%; } table.calendar td.daytitle.sat::after { left: 25%; } table.calendar td.daytitle:hover::after, table.calendar td.daytitle:hover::before { opacity: 1; visibility: visible; } .calendar-close { display: flex; align-items: center; font-size: 1.4rem; font-weight: 700; line-height: 20px; margin-top: -24px; } .calendar-close::before { content: ""; display: block; width: 30px; height: 20px; background-color: #fcc; border: 1px solid #aaa; margin-right: 5px; } .calendar-unit .slick-prev, .calendar-unit .slick-next { position: absolute; bottom: 0; right: 0; display: block; font-size: 0; line-height: 0; width: 24px; height: 24px; z-index: 100; background-color: transparent; } .calendar-unit .slick-prev { right: 30px; } .calendar-unit .slick-prev:not(.slick-disabled):hover, .calendar-unit .slick-next:not(.slick-disabled):hover { cursor: pointer; } .calendar-unit .slick-prev::before, .calendar-unit .slick-next::before { font-family: "kamikazeicons"; font-size: 2.4rem; line-height: 1; color: #181818; } .calendar-unit .slick-prev::before { content: "\e912"; } .calendar-unit .slick-next::before { content: "\e913"; } .calendar-unit .slick-prev.slick-disabled::before, .calendar-unit .slick-next.slick-disabled::before { color: #ccc; } .calendar-notice { font-size: 1.4rem; padding: 10px 0; } @media (min-width: 600px) { .info-list { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; } .info-item { width: calc(100% / 2 - 20px); margin: 0 0 40px; } .info-dummy { width: calc(100% / 2 - 20px); margin: 0; } .day { font-size: 1.4rem; } } @media (min-width: 960px) { .info-list { padding: 0 10px; } .info-item { width: calc(100% / 4 - 20px); margin: 0 0 20px; } .info-dummy { width: calc(100% / 4 - 20px); margin: 0; } } /*---------------- Tweet ----------------*/ .news { position: relative; width: 100%; padding-top: 30px; padding-bottom: 30px; } .tweet-account { text-align: center; padding-bottom: 20px; } .tweet-account a { font-size: 1.4rem; color: var(--base-color); text-decoration: none; display: inline-flex; align-items: center; } .tweet-account a i { font-size: 2.1rem; } .ourtweets { display: block; } .tweet { position: relative; width: 100%; padding: 20px 10px 60px; } .tweet::after { content: ""; position: absolute; bottom: 0; left: 10px; width: calc(100% - 20px); height: 1px; background-color: #ccc; } .mediabox { width: 100%; height: 200px; margin-bottom: 20px; overflow: hidden; } .mediabox.media-3, .mediabox.media-2 { display: flex; } .media-left, .media-right { width: 50%; height: 200px; } .media-right { padding-left: 1px; } .media-top, .media-bottom { display: block; width: 100%; height: 100px; } .media-bottom { padding-top: 1px; } .mediabox img { width: 100%; height: 100%; object-fit: cover; } .nomedia { width: 100%; height: 200px; margin-bottom: 20px; background-image: url(https://kamikaze-attack.com/wpdir/wp-content/themes/kamikazeWP/assets/img/nomedia.png); background-size: cover; background-position: center center; } .tweet-text { margin-bottom: 20px; } .tweet-text p { font-size: 1.4rem; line-height: 1.5; padding-bottom: 10px; } .profile-unit { position: absolute; bottom: 20px; left: 10px; width: calc(100% - 20px); display: flex; align-items: center; justify-content: space-between; } .profile-img { display: block; width: 40px; height: 40px; border-radius: 40px; overflow: hidden; margin-right: 10px; } .profile-img img { display: block; width: 100%; height: 100%; } .profile { margin-right: auto; } .profile .screen-name { display: block; font-size :1.4rem; font-weight: 700; padding-bottom: 5px; } .profile .create-at { display: block; font-size: 1.3rem; color: #999; } .tweet-link { display: block; width: 40px; height: 40px; } .tweet-link a { display: block; width: 100%; height: 100%; text-align: center; font-size: 2rem; line-height: 40px; text-decoration: none; color: var(--base-color); background-color: #fff; border-radius: 40px; transition: all .5s; } .tweet-link a:hover { color: #fff; background-color: #00aced; } @media (min-width: 600px) { .ourtweets { display: flex; flex-wrap: wrap; justify-content: space-between; border-left: 1px solid #ccc; } .tweet { width: calc(100% / 2); padding: 20px 20px 60px; border-right: 1px solid #ccc; } .tweet::after { left: 20px; width: calc(100% - 40px); } .profile-unit { left: 20px; width: calc(100% - 40px); } } @media (min-width: 960px) { .news { padding: 30px 10px; } .tweet { width: calc(100% / 3); } } /*---------------- CONCEPT ----------------*/ .section-concept { background-image: url(https://kamikaze-attack.com/wpdir/wp-content/themes/kamikazeWP/assets/img/bg001.jpg); background-size: cover; background-position: center center; } .section-concept .headline { color: #fff; } .concept { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px; } .concept-unit { margin: 0 10px; width: calc(100% - 20px); border-top: 2px solid #fff; border-bottom: 2px solid #fff; } .concept-unit:first-child { border-bottom: none; } .concept-inner { padding: 20px; } .c-logo { display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 20px; } .c-para { color: #fff; font-size: 1.3rem; font-weight: 700; line-height: 1.8; text-align: center; } .c-para.c-en { font-size: 1.2rem; line-height: 1.5; } @media (min-width: 600px) { .concept-unit { width: calc(50% - 40px); } .concept-unit:first-child { border-bottom: 2px solid #fff; } .c-para { font-size: 1.4rem; } .c-para.c-en { font-size: 1.3rem; } } .shop { position: relative; width: 100%; padding-bottom: 320px; } .shop-info { position: relative; display: flex; flex-wrap: wrap; z-index: 100; } .shopimage { width: 100%; padding: 20px 10px; } .shopadd { width: 100%; padding: 20px 10px; } .shopadd-ja { margin-bottom: 30px; } .shopadd-en { } .shop-hl { font-size: 1.8rem; font-weight: 700; padding-bottom: 5px; margin-bottom: 20px; border-bottom: 1px solid #181818; } .shop-para { font-size: 1.4rem; line-height: 1.5; } .shopadd-en .shop-para { font-size: 1.2rem; } .mapimage { position: absolute; bottom: 20px; right: 0; width: 85%; } .shoplink { position: relative; display: flex; flex-wrap: wrap; z-index: 100; text-align: center; width: calc(100% - 10px); margin: 0 auto; } .shoplink a { display: block; margin: 5px; width: 100%; } .shop-link { display: block; padding: 15px 40px 20px; margin: 0 auto; text-align: center; background-color: var(--main-color); color: #fff; text-decoration: none; transition: all .3s ease; } .shop-link-en { font-size: 2.2rem; margin-bottom: 10px; } .shop-link-ja { font-size: 1.4rem; font-weight: 700; } .shop-link:hover { background-color: var(--main-color); } .section-information .shoplink { padding-bottom: 40px; } @media (min-width: 600px) { .shop { padding-bottom: 0; } .shop-info { margin-bottom: 20px; } .shopimage { width: 30%; } .shopadd { width: 40%; } .shopadd-en { display: none; } .shop-hl { font-size: 1.6rem; } .mapimage { width: 36%; bottom: -40px; } .shop-link { background-color: var(--base-color); } .shop-link:hover { background-color: var(--main-color); } .shop-link-en { font-size: 3.2rem; } .shop-link-ja { font-size: 1.6rem; } .section-information .shoplink { display: none; } .shoplink a { width: calc(50% - 10px); } } @media (min-width: 960px) { .shop-info { margin-bottom: 40px; } .shopimage { width: 36%; } .shopadd { width: 33%; } .shopadd-en { display: block; } .shop-hl { font-size: 1.6rem; } .mapimage { width: 38%; } } @media (min-width: 1280px) { .section-shop { overflow-y: hidden; } .shop-info { margin-bottom: 60px; } .shopimage { width: 34%; } .shopadd { width: 32%; } .shop-hl { font-size: 1.6rem; } .mapimage { width: 38%; bottom: -80px; } } .section-map { padding-top: 0; padding-bottom: 40px; } .map { overflow: hidden; width: 100%; height: 320px; } /*============================ Single ============================*/ .sub-visual { position: relative; width: 100%; background-color: #323232; } .sub-visual .inner { padding-top: 140px; padding-bottom: 60px; } .sub-visual .headline { color: #fff; font-size: 4.8rem; tex-align: center; } .sub-visual .content-title { text-align: center; } .sub-visual .content-title .page-title { color: #fff; font-size: 4.8rem; } .sub-visual .content-title .page-info { color: #fff; font-size: 2.2rem; font-weight: 700; } .main { position: relative; padding-bottom: 30px; background-color: #efefef; } .main-content { position: relative; width: 100%; max-width: 1280px; display: block; background-color: #fff; margin: 0 auto; padding: 40px 20px; z-index: 10; transform: translateY(-40px); } .posts { width: 100%; } .post-body { position: relative; } .post-header { position: relative; } .post-title { font-size: 2rem; font-weight: 700; line-height: 1.25; padding: 30px 0 20px; border-bottom: 1px solid #ddd; margin-bottom: 20px; } .post-category { display: flex; align-items: center; padding: 20px 80px 0 0; } .post-categories { display: flex; align-items: center; } .post-categories a { display: block; padding: 5px 10px; margin-right: 10px; color: #7b5f10; font-size: 1.4rem; font-weight: 700; border-bottom: 2px solid #7b5f10; text-decoration: none; } .post-categories a:hover { color: var(--main-color); border-bottom-color: var(--main-color); } .post-category .edit a { padding: 5px 15px 5px 10px; background-color: #999; color: #fff; font-weight: 700; font-size: 1.4rem; border-radius: 20px; text-decoration: none; } .post-category .edit a::before { content: "\e96f"; font-family: "kamikazeicons"; padding-right: 5px; } .post-category .edit a:hover { background-color: var(--main-color); } .post-category .edit { margin-left: 0; } .post-date { position: absolute; top: 0; right: 0; width: 50px; height: 50px; background-color: var(--base-color); border-radius: 3px; } .post-date span { position: absolute; font-weight: 700; color: #fff; } .post-date .year { bottom: 5px; left: 50%; transform: translateX(-50%); font-size: 1rem; } .post-date .month { top: 5px; left: 14px; font-size: 1.4rem; } .post-date .day { bottom: 16px; right: 9px; font-size: 1.4rem; } .post-date::before { content: ''; position: absolute; top: 17px; left: 10px; width: 30px; height: 1px; background-color: #fff; transform: rotate(-45deg); } .post-content { padding: 0 0 40px; } .post-tags { margin-bottom: 30px; padding: 0 20px; } .share { padding: 30px 20px 30px 20px; border-top: 1px dashed #ddd; } .share ul { display: flex; justify-content: flex-end; align-items: center; } .share ul li { display: block; margin: 0 3px; } .share ul li a { display: block; min-width: 32px; padding: 8px 10px; border-radius: 3px; color: #fff; background-color: #ccc; text-decoration: none; text-align: center; transition: background-color .3s; } .share ul li a bi { font-size: 1.8rem; } .share-on { padding: 0 10px; font-weight: 700; font-size: 1.4rem; } .share .s-facebook a:hover { background-color: #3b5998; } .share .s-tweet a:hover { background-color: #55acee; } .share .s-instagram a:hover { background-color: #d93177; } .share .s-hatena a:hover { background-color: #008fde; } .share .s-line a:hover { background-color: #00b900; } .share .s-pocket a:hover { background-color: #ef3f56; } @media (min-width: 600px) { .post-date { width: 60px; height: 60px; } .post-date .year { font-size: 1.2rem; bottom: 5px; left: 50%; } .post-date .month { font-size: 1.8rem; top: 6px; left: 16px; } .post-date .day { font-size: 1.8rem; bottom: 20px; right: 8px; } .post-date::before { top: 22px; left: 10px; width: 40px; } } @media (min-width: 960px) { .main-content { padding: 40px; } .post-title { margin-left: 20px; margin-right: 20px; font-size: 2.4rem; } .post-category { padding: 20px 80px 0 20px; } .post-date { right: 20px; } .post-content { padding: 0 20px 40px; } } @media (min-width: 1280px) { .main-content { padding: 60px 80px; } .post-title { font-size: 2.8rem; } } .post-content .more { text-align: center; } .post-content a.more-link { display: inline-block; padding: 16px 48px; margin: 40px 0 0; background-color: var(--main-color); border-radius: 48px; font-size: 1.4rem; line-height: 1; font-weight: 900; letter-spacing: 1px; color: #fff; -webkit-appearance: none; text-decoration: none; text-transform: uppercase; } .post-content a.more-link:hover { background-color: var(--accent-color); color: #fff; text-decoration: none; } /*++++++++++++++++++++++++++++ Contact ++++++++++++++++++++++++++++*/ .mw_wp_form form { padding: 20px 0; } .form-header { margin-bottom: 30px; } .form-title { padding: 20px; background: #eee; line-height: 1.8; } .form-items { padding: 10px 0; border-bottom: 1px solid #aaa; font-size: 1.4rem; } .form-items.row { margin: 0 0 10px 0; } @media (min-width: 600px) { .mw_wp_form form { padding: 20px; border: 1px solid #eee; } .form-items { font-size: 1.6rem; } .form-label { text-align: right; } } @media (min-width: 960px) { .mw_wp_form form { padding: 40px 80px; } } .form-label { color: var(--base-color); font-weight: 700; padding: 5px 0; } .kome { color: #e00; font-size: 1.1rem; font-weight: 700; padding: 0 5px; } .input-text { padding: 8px 10px 5px; line-height: 1; background-color: #fff; margin-right: 10px; max-width: 100%; font-size: 1.6rem; } .input-text:focus { background-color: #f2f2f2; outline: none; } .input-name { max-width: calc(50% - 20px); font-size: 1.6rem; } .input-textarea { padding: 8px 10px; line-height: 1.8; background: #fff; width: 100%; font-size: 1.6rem; } .input-textarea:focus { background-color: #f2f2f2; outline: none; } .input-address { width: 100%; font-size: 1.6rem; } .form-select { padding: 4px 10px; line-height: 1; background-color: #fff; border: 1px solid #ddd; border-radius: 5px; } .form-notice { color: #e00; font-weight: 700; font-size: 1.3rem; padding: 20px 0; } .form-submit { display: flex; align-items: center; justify-content: center; padding: 20px; } .form-btn { background-color: var(--brand-color); padding: 10px 30px; text-align: center; border-radius: 50px; } .form-btn-text { font-size: 1.8rem; font-weight: 700; color: #fff; } .mw_wp_form ul { font-size: 1.6rem; line-height: 1; padding: 0; list-style: none; } .other-text { display: block; font-size: 1.3rem; color: #666; padding: 10px 0; } .confirm, .input-submit { font-size: 1.8rem; font-weight: 700; color: #fff; background-color: var(--base-color); border-radius: 50px; padding: 10px 30px; text-align: center; margin: 0 10px; } .back { font-size: 1.8rem; font-weight: 700; color: #181818; background-color: #ccc; padding: 10px 30px; text-align: center; margin: 0 10px; border-radius: 50px; } .confirm:hover, .input-submit:hover, .back:hover { cursor: pointer; background-color: var(--main-color); color: #fff; } /*++++++++++++++++++++++++++++ Page Navigation ++++++++++++++++++++++++++++*/ .post-navigation { position: relative; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .post-navigation-inner { display: flex; justify-content: space-between; width: 100%; padding: 20px 0; } .post-navigation:before { content: ""; position: absolute; display: block; width: 1px; height: 100%; background-color: #ddd; left: 50%; } .post-nav-prev, .post-nav-next { display: block; width: 50%; padding: 0 20px; } .post-navigation p { position: relative; display: inline-block; margin-bottom: 10px; font-size: 1.2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: #999; } .post-navigation h4 { display: block; font-size: 1.6rem; line-height: 1.3; font-weight: 700; } .post-nav-next, .post-nav-next h4 { text-align: right; } .post-navigation h4 a { color: var(--base-color); text-decoration: none; } .post-navigation h4 a:hover { color: var(--main-color); } .post-nav-prev p::before { content: "\e916"; position: relative; font-family: "kamikazeicons"; padding-right: 5px; font-size: 1.4rem; } .post-nav-next p::after { content: "\e917"; position: relative; font-family: "kamikazeicons"; padding-left: 5px; font-size: 1.4rem; } @media (min-width: 600px) { .post-nav-prev { padding-left: 20px; } .post-nav-next { padding-right: 20px; } } /*============================ Sidebar ============================*/ .sidebar { display: block; padding: 30px 20px; width: 100%; } .sidebar .widget { width: 100%; } @media (min-width: 600px) { .sidebar { display: flex; flex-wrap: wrap; margin-left: -20px; margin-right: -20px; width: 100%; } .sidebar .widget { width : calc(100% / 2); padding: 0 20px; margin-bottom: 20px; } .sidebar .widget + .widget { padding-top: 0; } } @media (min-width: 960px) { .sidebar { display: block; margin: 0; padding: 40px 0; width: 260px; } .sidebar .widget { width: 100%; padding: 0; margin-bottom: 0; } .sidebar .widget + .widget { padding-top: 60px; } } @media (min-width: 1280px) { .sidebar { width: 280px; } } .sidebar { display: none; } /*============================ Footer ============================*/ .footer { padding: 60px 0 30px; background-color: #181818; color: #fff; } .footer-inner { display: flex; justify-content: space-between; align-items: center; padding: 0 10px; } .footer-left { display: flex; justify-content: flex-start; align-items: center; } .footer-logo { display: block; width: 50px; margin-right: 20px; } .footer-logo .logo-svg { width: 50px; height: 50px; fill: #fff; } .footer-nav { display: none; justify-content: flex-start; align-items: center; } .footer-nav-item > a { display: inline-block; padding: 5px; text-decoration: none; color: #fff; font-weight: 700; } .footer-parts { text-align: right; } .footer-sns { display: flex; justify-content: flex-end; align-items: center; padding: 10px 0; } .footer-sns .sns-icon { font-size: 2.4rem; margin-right: 10px; } .footer-sns .sns-icon:last-child { margin-right: 0; } .copyright { font-size: 1.1rem; padding-bottom: 10px; } @media (min-width: 960px) { .footer-nav { display: flex; } } /*============================ Baguette ============================*/ #baguetteBox-overlay { display: none; opacity: 0; position: fixed; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000000; background-color: rgba(0,0,0,.98); transition: opacity .3s ease; } #baguetteBox-overlay.visible { opacity: 1; } #baguetteBox-overlay .full-image { display: inline-block; position: relative; width: 100%; height: 100%; padding: 10px; text-align: center; } #baguetteBox-overlay .full-image figure { display: inline; margin: 0; height: 100%; } #baguetteBox-overlay .full-image img { display: inline-block; width: auto; height: auto; max-height: 100%; max-width: 100%; vertical-align: middle; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); } #baguetteBox-overlay .full-image figcaption { display: block; position: absolute; bottom: 0; width: 100%; text-align: center; line-height: 1.8; white-space: normal; color: #ccc; } #baguetteBox-overlay .full-image:before { content: ""; display: inline-block; height: 50%; width: 1px; margin-right: -1px; } #baguetteBox-slider { position: absolute; left: 0; top: 0; height: 100%; width: 100%; white-space: nowrap; transition: left .4s ease, transform .4s ease; } #baguetteBox-slider.bounce-from-right { animation: bounceFromRight .4s ease-out; } #baguetteBox-slider.bounce-from-left { animation: bounceFromLeft .4s ease-out; } @keyframes bounceFromRight { 0% { margin-left: 0; } 50% { margin-left: -30px; } 100% { margin-left: 0; } } @keyframes bounceFromLeft { 0% { margin-left: 0; } 50% { margin-left: 30px; } 100% { margin-left: 0; } } .baguetteBox-button#next-button, .baguetteBox-button#previous-button { top: 0; width: 15%; height: 100%; } .baguetteBox-button { position: absolute; cursor: pointer; outline: none; padding: 0; margin: 0; border: 0; color: #fff; background-color: transparent; } .baguetteBox-button#next-button { right: 0; } .baguetteBox-button#previous-button { left: 0; } .baguetteBox-button#close-button { top: 20px; right: 2%; right: calc(2% + 6px); width: 30px; height: 30px; } .baprev::after { font-family: "kamikazeicons"; content: "\e90e"; font-size: 2.4rem; color: #fff; } .banext::after { font-family: "kamikazeicons"; content: "\e90f"; font-size: 2.4rem; color: #fff; } .baclose::after { font-family: "kamikazeicons"; content: "\e91f"; font-size: 2.4rem; color: #fff; } .baguetteBox-spinner { width: 40px; height: 40px; display: inline-block; position: absolute; top: 50%; left: 50%; margin-top: -20px; margin-left: -20px; } .baguetteBox-double-bounce1, .baguetteBox-double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: rgba(255,255,255,.6); position: absolute; top: 0; left: 0; animation: bounce 2s infinite ease-in-out; } .baguetteBox-double-bounce2 { animation-delay: -1s; } @keyframes bounce { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); } } /*++++++++++++++++++++++++++++ Gutenberg ++++++++++++++++++++++++++++*/ .post-content p, .post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6, .wp-block-image, .wp-block-gallery, .wp-block-media-text, .wp-block-video, .wp-block-audio, .wp-block-cover, .wp-block-embed, .wp-block-file, .wp-block-quote, .wp-block-pullquote, .wp-block-button, .wp-block-columns, .wp-block-text-columns, .post-content > ul, .post-content > ol, .wp-block-preformatted, .wp-block-code, .wp-block-verse, .wp-block-table { margin: 0 auto 30px; max-width: 100%; } .post-content figcaption { padding: 0.8em 0; color: #555d66; text-align: center; font-size: 1.4rem; } .post-content .alignleft, .post-content .alignright { max-width: calc(50% - 20px); display: block; } .post-content .alignleft { float: left; margin-right: 20px; } .post-content .alignright { float: right; margin-left: 20px; } .post-content .aligncenter, .post-content .aligncenter img { margin-left: auto; margin-right: auto; } .post-content .alignnone, .post-content .aligncenter, .post-content .alignwide, .post-content .alignfull { margin-left: auto; margin-right: auto; } .post-content .alignwide { margin-left: -10px; margin-right: -10px; width: calc(100% + 20px); max-width: 100vw; } .post-content .alignfull { margin-left: -20px; margin-right: -20px; width: calc(100% + 40px); max-width: 100vw; } @media (min-width: 600px) { .post-content .alignwide { margin-left: -20px; margin-right: -20px; width: calc(100% + 40px); max-width: 100vw; } .post-content .alignfull { margin-left: -40px; margin-right: -40px; width: calc(100% + 80px); max-width: 100vw; } } @media (min-width: 960px) { .post-content .alignwide { margin-left: -40px; margin-right: -40px; width: calc(100% + 80px); max-width: 100vw; } .post-content .alignfull { margin-left: -80px; margin-right: -80px; width: calc(100% + 160px); max-width: 100vw; } } /*-------------------- Color --------------------*/ .has-back-color { color: var(--background-color); } .has-sub-color { color: var(--sub-color); } .has-accent-color { color: var(--accent-color); } .has-main-color { color: var(--main-color); } .has-black-color { color: #181818; } .has-white-color { color: #fff; } .has-brook-color { color: #005dac; } .has-poppy-color { color: #ff7772; } .has-turquoise-color { color: #2ab7ca; } .has-mustard-color { color: #ffd954; } .has-honey-color { color: #f2ab39; } .has-fuchsia-color { color: #a1268e; } .has-cherryblossom-color { color: #f6abb6; } .has-meadow-color { color: #598234; } .has-moss-color { color: #498eaf; } .has-tomato-color { color: #ff2002; } .has-back-background-color { background-color: var(--background-color) !important; } .has-sub-background-color { background-color: var(--sub-color) !important; } .has-accent-background-color { background-color: var(--accent-color) !important; } .has-main-background-color { background-color: var(--main-color) !important; } .has-black-background-color { background-color: #181818 !important; } .has-white-background-color { background-color: #fff !important; } .has-brook-background-color { background-color: #005dac !important; } .has-poppy-background-color { background-color: #ff7772 !important; } .has-turquoise-background-color { background-color: #2ab7ca !important; } .has-mustard-background-color { background-color: #ffd954 !important; } .has-honey-background-color { background-color: #f2ab39 !important; } .has-fuchsia-background-color { background-color: #a1268e !important; } .has-cherryblossom-background-color { background-color: #f6abb6 !important; } .has-meadow-background-color { background-color: #598234 !important; } .has-moss-background-color { background-color: #aebd38 !important; } .has-tomato-background-color { background-color: #ff2002 !important; } /*-------------------- Separator --------------------*/ .wp-block-separator { clear: both; width: 50%; margin: 60px auto; } .wp-block-separator:not(.is-style-wide):not(.is-style-dots) { max-width: 240px; } .wp-block-separator, .wp-block-separator.is-style-default { height: 6px; background: repeating-linear-gradient(-45deg, transparent 0, transparent 2px, #ccc 4px, #ccc 4px); border: none; } .wp-block-separator.is-style-wide { width: 100%; height: 6px; background: repeating-linear-gradient(-45deg, transparent 0, transparent 2px, #ddd 4px, #ddd 4px); border: none; } .wp-block-separator.is-style-dots { position: relative; margin-left: -20px; margin-right: -20px; width: calc(100% + 40px); background: none; border-bottom: 1px dashed #8c8b8b; } .wp-block-separator.is-style-dots:after { position: absolute; content: "\e972"; top: -2px; left: 20px; padding: 0 3px; background: #fff; color: #8c8b8b; font-size: 18px; font-family: "kamikazeicons" } @media (min-width: 600px) { .wp-block-separator.is-style-dots { margin-left: -40px; margin-right: -40px; width: calc(100% + 80px); } .wp-block-separator.is-style-dots:after { left: 60px; } } @media (min-width: 960px) { .wp-block-separator.is-style-dots { margin-left: -80px; margin-right: -80px; width: calc(100% + 160px); } .wp-block-separator.is-style-dots:after { left: 100px; } } /*-------------------- Preformtted, Code --------------------*/ .wp-block-preformatted { font-family: Menlo, Consolas, monaco, monospace; font-size: 1.4rem; color: #1818124; line-height: 1.5; max-width: 100%; overflow: scroll; } .wp-block-code { font-family: Menlo, Consolas, monaco, monospace; font-size: 1.4rem; color: #23282d; padding: 0.8em 1em; border: 1px solid #e2e4e7; border-radius: 4px; max-width: 100%; overflow: scroll; } /*-------------------- Verse --------------------*/ .wp-block-verse { color: #181824; font-family: "Noto Serif JP", 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif; padding: 1em 2em; overflow: auto; font-size: 1.8rem; line-height: 1.8; background-color: #f7f8f2; border-radius: 8px; } /*-------------------- Heading --------------------*/ .post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 { position: relative; color: #181818; font-weight: 700; padding: 0.8em 0 0.5em; line-height: 1.2; } .post-content h1 { font-size: 2.8rem; } .post-content h2 { font-size: 2.4rem; } .post-content h3 { font-size: 2.1rem; } .post-content h4 { font-size: 1.8rem; } .post-content h5 { font-size: 1.6rem; margin-bottom: 20px; } .post-content h6 { font-size: 1.4rem; margin-bottom: 20px; } .post-content h1.is-style-underline, .post-content h2.is-style-underline, .post-content h3.is-style-underline, .post-content h4.is-style-underline, .post-content h5.is-style-underline, .post-content h6.is-style-underline { border-bottom: 2px solid #636363; } .post-content h1.is-style-underline-accent, .post-content h2.is-style-underline-accent, .post-content h3.is-style-underline-accent, .post-content h4.is-style-underline-accent, .post-content h5.is-style-underline-accent, .post-content h6.is-style-underline-accent { border-bottom: 3px solid var(--accent-color); } .post-content h1.is-style-deco1, .post-content h2.is-style-deco1, .post-content h3.is-style-deco1, .post-content h4.is-style-deco1, .post-content h5.is-style-deco1, .post-content h6.is-style-deco1 { padding: 0.5em; background-color: #f6f6f6 } .post-content h1.is-style-deco1::before, .post-content h2.is-style-deco1::before, .post-content h3.is-style-deco1::before, .post-content h4.is-style-deco1::before, .post-content h5.is-style-deco1::before, .post-content h6.is-style-deco1::before { content: ""; position: absolute; left: -5px; bottom: 0; width: 5px; height: 100%; background-color: var(--accent-color); } .post-content h1.is-style-deco2, .post-content h2.is-style-deco2, .post-content h3.is-style-deco2, .post-content h4.is-style-deco2, .post-content h5.is-style-deco2, .post-content h6.is-style-deco2 { margin-left: -10px; width: calc(100% + 20px); max-width: 100vw; padding: 0.5em 10px; color: #fff; background-color: var(--accent-color); } .post-content h1.is-style-deco3, .post-content h2.is-style-deco3, .post-content h3.is-style-deco3, .post-content h4.is-style-deco3, .post-content h5.is-style-deco3, .post-content h6.is-style-deco3 { margin-left: -10px; width: calc(100% + 20px); max-width: 100vw; padding: 0.5em 0.5em 0.5em 10px; color: #fff; background-color: var(--main-color); } @media (min-width: 600px) { .post-content h1 { font-size: 3.2rem; } .post-content h2 { font-size: 2.8rem; } .post-content h3 { font-size: 2.4rem; } .post-content h4 { font-size: 2.1rem; } .post-content h5 { font-size: 1.8rem; } .post-content h6 { font-size: 1.6rem; } .post-content h1.is-style-deco3, .post-content h2.is-style-deco3, .post-content h3.is-style-deco3, .post-content h4.is-style-deco3, .post-content h5.is-style-deco3, .post-content h6.is-style-deco3 { margin-left: -20px; width: calc(100% + 40px); max-width: 100vw; padding: 0.5em 0.5em 0.5em 40px; color: #fff; background-color: var(--main-color); } } @media (min-width: 960px) { .post-content h1.is-style-deco3, .post-content h2.is-style-deco3, .post-content h3.is-style-deco3, .post-content h4.is-style-deco3, .post-content h5.is-style-deco3, .post-content h6.is-style-deco3 { margin-left: -40px; width: calc(100% + 80px); max-width: 100vw; padding: 0.5em 0.5em 0.5em 80px; color: #fff; background-color: var(--main-color); } } /*-------------------- Paragraph --------------------*/ .post-content p { line-height: 1.8; font-size: 1.6rem; } .post-content a:not(.wp-block-button__link):not(.more-link) { color: var(--main-color); } .post-content a:not(.wp-block-button__link):not(.more-link):hover { color: var(--accent-color); } .post-content p a { text-decoration: underline; } .post-content p.has-drop-cap:first-letter { font-size: 4.8em; margin-right: 10px; margin-top: 0; float: left; line-height: 1; } .post-content p.is-style-comment { position: relative; display: block; ; border: 1px solid #ccc; border-radius: 6px; padding: 12px; background-color: #f8f8f8; margin-left: 20px; } .post-content p.is-style-comment[style*="center"] { margin-left: 0; } .post-content p.is-style-comment[style*="right"] { margin-left: 0; margin-right: 20px; } .post-content p.is-style-comment::before { content: ""; position: absolute; width: 12px; height: 12px; border-left: 1px solid #ccc; border-top: 1px solid #ccc; background-color: inherit; transform: rotate(-45deg); top: 20px; left: -7px; } .post-content p.is-style-comment[style*="center"]::before { top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg); } .post-content p.is-style-comment[style*="right"]::before { transform: rotate(135deg); top: 20px; left: auto; right: -7px; } .post-content p.has-background { padding: 12px; border-radius: 6px; } .linemarker { display: inline; background-position: left -100% center; background-repeat: repeat-x; background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #fffc68 50%); background-size: 200% .7em; font-weight: 700; padding-bottom: .7em; } .post-content p.is-style-shadow { display: block; ; border-radius: 6px; padding: 12px; box-shadow: 0 3px 15px rgba(0,0,0,.2); } /*-------------------- List --------------------*/ .post-content > ol { padding: 20px; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc; background-color: #f9f9f9; list-style: none; counter-reset: number; } .post-content > ol li { padding: 4px 0; } .post-content > ol li ol { padding: 8px 0 0 20px; list-style: none; counter-reset: number2; } .post-content > ol li ul { padding: 8px 0 0 20px; list-style: none; } .post-content > ol > li::before { counter-increment: number; content: counter(number); color: #666; padding-right: 10px; } .post-content > ol > li ol li::before { counter-increment: number2; content: counter(number2); color: #999; padding-right: 10px; } .post-content > ol > li ul li::before { content: "\e91b"; color: #999; padding-right: 4px; font-family: "kamikazeicons"; } .post-content > ol.is-style-simple{ border: none; background: none; } .post-content ul { list-style: none; } .post-content > ul:not(.wp-block-gallery) { padding: 20px; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc; background-color: #f9f9f9; } .post-content > ul:not(.wp-block-gallery) li { padding: 4px 0; } .post-content > ul:not(.wp-block-gallery) li ul { padding: 8px 0 0 20px; } .post-content > ul:not(.wp-block-gallery) li ol { padding: 8px 0 0 20px; list-style: none; counter-reset: number2; } .post-content > ul:not(.wp-block-gallery) li::before { content: "\e91b"; color: #999; padding-right: 4px; font-family: "kamikazeicons"; } .post-content > ul:not(.wp-block-gallery) > li ol li::before { counter-increment: number2; content: counter(number2); color: #999; padding-right: 10px; } .post-content > ul.is-style-simple:not(.wp-block-gallery) { border: none; background: none; } .post-content ul.wp-block-latest-posts li { position: relative; padding: 4px 10px 4px 26px; margin-bottom: 4px; } .post-content ul.wp-block-latest-posts li::before { position: absolute; content: "\e952"; font-size: 1.4rem; font-family: "kamikazeicons"; border-radius: 0; color: #666; background-color: transparent; top: 6px; left: 8px; } .post-content ul.wp-block-latest-posts.is-grid { display: flex; flex-wrap: wrap; } .post-content ul.wp-block-latest-posts.is-grid li { padding: 4px 10px 4px 26px; width: 50%; } .post-content ul.wp-block-latest-posts.columns-2 li { width: 50%; } @media (min-width: 600px) { .post-content ul.wp-block-latest-posts.columns-3 li { width: calc(100% / 3); } .post-content ul.wp-block-latest-posts.columns-4 li { width: calc(100% / 4); } .post-content ul.wp-block-latest-posts.columns-5 li { width: calc(100% / 5); } .post-content ul.wp-block-latest-posts.columns-6 li { width: calc(100% / 6); } } /*.post-content ul.wp-block-latest-posts.has-dates {}*/ .wp-block-latest-posts__post-date { display: block; padding: 5px 0; color: #999; font-size: 1.3rem; } .post-content ul.wp-block-archives-list li::before { content: "\e950"; font-size: 1.4rem; font-family: "kamikazeicons"; color: #666; padding-right: 4px; } .post-content ul.wp-block-categories-list li::before { content: "\e944"; font-size: 1.4rem; font-family: "kamikazeicons"; color: #666; padding-right: 4px; } .wp-block-archives-list.alignleft, .wp-block-archives-list.alignright, .wp-block-categories-list.alignleft, .wp-block-categories-list.alignright { width: calc(50% - 20px); } .wp-block-archives-list.aligncenter, .wp-block-categories-list.aligncenter { width: 60%; } .wp-block-archives-list li, .wp-block-categories-list li { font-size: 1.4rem; color: #999; } .wp-block-archives-list li a, .wp-block-categories-list li a { font-size: 1.6rem; } /*-------------------- Table --------------------*/ .wp-block-table { border-collapse: collapse; width: 100%; min-width: 240px; } .wp-block-table.is-style-stripes { border-spacing: 0; border-collapse: inherit; border-bottom: 1px solid #eee; } .wp-block-table td, .wp-block-table th { padding: 1em; border: 1px solid currentColor; } .wp-block-table.is-style-stripes tr:nth-child(odd) { background-color: #f3f4f5; } .wp-block-table.is-style-stripes td { border-color: transparent; } .wp-block-table.alignleft, .wp-block-table.aligncenter, .wp-block-table.alignright { display: table; width: 100%; max-width: 60%; } .wp-block-table.has-fixed-layout { table-layout: fixed; width: 100%; } .wp-block-table.alignwide.has-fixed-layout { width: calc(100% + 80px); } .wp-block-table.alignfull.has-fixed-layout { width: calc(100% + 160px); } /*-------------------- Blockquote --------------------*/ .wp-block-quote { padding: 1em; border-left: 5px solid var(--accent-color); background-color: #f9f9f9; } .wp-block-quote cite { display: block; color: #6c7781; font-size: 1.3rem; padding-top: 1em; font-style: italic; } .wp-block-quote.is-style-large p { font-size: 2.4rem; line-height: 1.6; } .wp-block-quote.is-style-large cite { font-size: 1.6rem; } .wp-block-pullquote { position: relative; padding: 3em 1em; margin-left: 0; margin-right: 0; text-align: center; border-top: 5px solid var(--accent-color); border-bottom: 5px solid var(--accent-color); overflow: hidden; } .wp-block-pullquote p { font-size: 2.4rem; line-height: 1.6; } .wp-block-pullquote.alignleft p, .wp-block-pullquote.alignright p { font-size: 1.8rem; } .wp-block-pullquote.is-style-solid-color { border: none; } .wp-block-pullquote.is-style-solid-color blockquote { margin-left: auto; margin-right: auto; text-align: left; max-width: 80%; } .wp-block-pullquote.is-style-solid-color blockquote p { margin-top: 0; margin-bottom: 0; font-size: 3.2rem; } .wp-block-pullquote cite { display: block; color: #6c7781; font-size: 1.3rem; padding-top: 1em; font-style: italic; } .wp-block-pullquote::before { content: ""; height: 20px; width: 100%; background-image: radial-gradient( farthest-side at 50% -50%, hsla(255, 100%, 0%, 0.1), hsla(0, 0%, 100%, 0)); position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .wp-block-pullquote::after { content: ""; height: 20px; width: 80%; background-image: radial-gradient( farthest-side at 50% 50%, hsla(255, 100%, 0%, 0.1), hsla(0, 0%, 100%, 0)); position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); } /*-------------------- Audio --------------------*/ .wp-block-audio { padding: 0 20px; } .wp-block-audio audio { width: 100%; min-width: 300px; } /*-------------------- Button --------------------*/ .wp-block-button { color: #fff; margin-top: 20px; } .wp-block-button.alignleft { text-align: left; margin-top: 10px; margin-right: 20px; margin-bottom: 10px; } .wp-block-button.aligncenter { text-align: center; } .wp-block-button.alignright { text-align: right; margin-top: 10px; margin-left: 20px; margin-bottom: 10px; } .wp-block-button__link { background-color: var(--main-color); border: none; border-radius: 32px; box-shadow: none; color: inherit; cursor: pointer; display: inline-block; font-size: 1.6rem; font-weight: 700; padding: 16px 36px; text-align: center; text-decoration: none; white-space: normal; overflow-wrap: break-word; } .is-style-squared .wp-block-button__link { border-radius: 0; } .is-style-outline { color: var(--main-color); } .is-style-outline .wp-block-button__link { background: transparent; border: 2px solid currentcolor; } .wp-block-button__link:hover { color: inherit; background-color: var(--accent-color); } .is-style-outline .wp-block-button__link:hover { background: transparent; border-color: var(--accent-color); color: var(--accent-color); } /*-------------------- Columns --------------------*/ .wp-block-columns { display: flex; justify-content: space-between; flex-wrap: wrap; } .wp-block-column { padding: 0 10px 20px; width: 50%; } @media (min-width: 600px) { .has-2-columns .wp-block-column { width: 50%; } .has-3-columns .wp-block-column { width: calc(100% / 3); } .has-4-columns .wp-block-column { width: 25%; } .has-5-columns .wp-block-column { width: 20%; } .has-6-columns .wp-block-column { width: calc(100% / 6); } } .wp-block-column > h1, .wp-block-column > h2, .wp-block-column > h3, .wp-block-column > h4, .wp-block-column > h5, .wp-block-column > h6 { padding-top: 0; margin-bottom: 16px; } .wp-block-column h1.is-style-deco3, .wp-block-column h2.is-style-deco3, .wp-block-column h3.is-style-deco3, .wp-block-column h4.is-style-deco3, .wp-block-column h5.is-style-deco3, .wp-block-column h6.is-style-deco3 { margin-left: -10px; margin-right: -10px; width: calc(100% + 20px); max-width: 100vw; padding: 0.5em 10px; padding-top: 0; } /*-------------------- Images --------------------*/ .wp-block-image { max-width: 100%; margin-left: 0; margin-right: 0; } .wp-block-image.aligncenter { text-align: center; } .wp-block-image.alignfull img, .wp-block-image.alignwide img { width: 100%; } .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image .aligncenter { display: table; } .wp-block-image .alignleft > figcaption, .wp-block-image .alignright > figcaption, .wp-block-image .aligncenter > figcaption { display: table-caption; caption-side: bottom; } .wp-block-image .aligncenter { margin-left: auto; margin-right: auto; } .wp-block-image .aligncenter { margin-left: auto; margin-right: auto; } .wp-block-image.is-style-shadow img { box-shadow: 0 3px 10px 0 rgba(0,0,0,.2); } .wp-block-image.is-style-border img { border: 1px solid #eee; padding: 10px; background-color: #fff; } .wp-block-image.is-style-bordershadow img { border: 10px solid #fff; box-shadow: 0 3px 10px 0 rgba(0,0,0,.2); } .wp-block-image.is-style-grayscale img { filter: grayscale(100%); transition: .3s; } .wp-block-image.is-style-grayscale img:hover { filter: none; } .wp-block-image.is-style-grayborder img { border: 10px solid #fff; box-shadow: 0 3px 10px 0 rgba(0,0,0,.3); filter: grayscale(100%); transition: .3s; } .wp-block-image.is-style-grayborder img:hover { filter: none; } /*-------------------- Video --------------------*/ .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper, .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper, .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper, .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper, .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper, .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper, .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper { position: relative; } .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper::before, .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper::before, .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before, .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper::before, .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper::before, .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper::before, .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper::before { content: ""; display: block; padding-top: 50%; } .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper iframe, .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper iframe, .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe, .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper iframe, .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper iframe, .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper iframe, .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper::before { padding-top: 42.85%; } .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper::before { padding-top: 50%; } .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before { padding-top: 56.25%; } .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper::before { padding-top: 75%; } .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper::before { padding-top: 100%; } .wp-block-embed.wp-embed-aspect-9-6 .wp-block-embed__wrapper::before { padding-top: 66.66%; } .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper::before { padding-top: 200%; } /*-------------------- Cover --------------------*/ .wp-block-cover-image, .wp-block-cover { position: relative; background-color: #eee; background-size: cover; background-position: center center; min-height: 430px; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; } .wp-block-cover-image h2, .wp-block-cover-image .wp-block-cover-image-text, .wp-block-cover-image .wp-block-cover-text, .wp-block-cover h2, .wp-block-cover .wp-block-cover-image-text, .wp-block-cover .wp-block-cover-text { color: #fff; font-size: 2.1rem; line-height: 1.4; z-index: 1; margin-bottom: 0; max-width: 80%; padding: 14px; text-align: center; } .wp-block-cover-image.has-left-content, .wp-block-cover.has-left-content { justify-content: flex-start; } .wp-block-cover-image.has-left-content h2, .wp-block-cover-image.has-left-content .wp-block-cover-image-text, .wp-block-cover-image.has-left-content .wp-block-cover-text, .wp-block-cover.has-left-content h2, .wp-block-cover.has-left-content .wp-block-cover-image-text, .wp-block-cover.has-left-content .wp-block-cover-text { margin-left: 0; text-align: left; } .wp-block-cover-image.has-right-content, .wp-block-cover.has-right-content { justify-content: flex-end; } .wp-block-cover-image.has-right-content h2, .wp-block-cover-image.has-right-content .wp-block-cover-image-text, .wp-block-cover-image.has-right-content .wp-block-cover-text, .wp-block-cover.has-right-content h2, .wp-block-cover.has-right-content .wp-block-cover-image-text, .wp-block-cover.has-right-content .wp-block-cover-text { margin-right: 0; text-align: right; } .wp-block-cover-image h2 a, .wp-block-cover-image .wp-block-cover-image-text a, .wp-block-cover-image .wp-block-cover-text a, .wp-block-cover h2 a, .wp-block-cover .wp-block-cover-image-text a, .wp-block-cover .wp-block-cover-text a { color: #fff; } .wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax { background-attachment: fixed; } @supports (-webkit-overflow-scrolling: touch) { .wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax { background-attachment: scroll; } } .wp-block-cover-image.has-background-dim::before, .wp-block-cover.has-background-dim::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: inherit; opacity: 0.5; } .wp-block-cover-image.has-background-dim.has-background-dim-10::before, .wp-block-cover.has-background-dim.has-background-dim-10::before { opacity: 0.1; } .wp-block-cover-image.has-background-dim.has-background-dim-20::before, .wp-block-cover.has-background-dim.has-background-dim-20::before { opacity: 0.2; } .wp-block-cover-image.has-background-dim.has-background-dim-30::before, .wp-block-cover.has-background-dim.has-background-dim-30::before { opacity: 0.3; } .wp-block-cover-image.has-background-dim.has-background-dim-40::before, .wp-block-cover.has-background-dim.has-background-dim-40::before { opacity: 0.4; } .wp-block-cover-image.has-background-dim.has-background-dim-50::before, .wp-block-cover.has-background-dim.has-background-dim-50::before { opacity: 0.5; } .wp-block-cover-image.has-background-dim.has-background-dim-60::before, .wp-block-cover.has-background-dim.has-background-dim-60::before { opacity: 0.6; } .wp-block-cover-image.has-background-dim.has-background-dim-70::before, .wp-block-cover.has-background-dim.has-background-dim-70::before { opacity: 0.7; } .wp-block-cover-image.has-background-dim.has-background-dim-80::before, .wp-block-cover.has-background-dim.has-background-dim-80::before { opacity: 0.8; } .wp-block-cover-image.has-background-dim.has-background-dim-90::before, .wp-block-cover.has-background-dim.has-background-dim-90::before { opacity: 0.9; } .wp-block-cover-image.has-background-dim.has-background-dim-100::before, .wp-block-cover.has-background-dim.has-background-dim-100::before { opacity: 1; } .wp-block-cover-image::after, .wp-block-cover::after { display: block; content: ""; font-size: 0; min-height: inherit; } @supports ((position: -webkit-sticky) or (position: sticky)) { .wp-block-cover-image::after, .wp-block-cover::after { content: none; } } .wp-block-cover-image.aligncenter, .wp-block-cover-image.alignleft, .wp-block-cover-image.alignright, .wp-block-cover.aligncenter, .wp-block-cover.alignleft, .wp-block-cover.alignright { display: flex; } .wp-block-cover__video-background { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 100%; height: 100%; z-index: 0; -o-object-fit: cover; object-fit: cover; } .wp-block-cover-text.alignwide, [data-align="wide"] .wp-block-image, .wp-block-image.alignwide, .wp-block-gallery.alignwide, .wp-block-text-columns.alignwide { margin-left: -10px; margin-right: -10px; max-width: 100vw; } .wp-block-cover-text.alignfull, [data-align="full"] .wp-block-image, .wp-block-image.alignfull, .wp-block-gallery.alignfull, .wp-block-text-columns.alignfull { margin-left: -20px; margin-right: -20px; max-width: 100vw; } @media (min-width: 600px) { .wp-block-cover-text.alignwide, [data-align="wide"] .wp-block-image, .wp-block-image.alignwide, .wp-block-gallery.alignwide, .wp-block-text-columns.alignwide { margin-left: -20px; margin-right: -20px; } .wp-block-cover-text.alignfull, [data-align="full"] .wp-block-image, .wp-block-image.alignfull, .wp-block-gallery.alignfull, .wp-block-text-columns.alignfull { margin-left: -40px; margin-right: -40px; } } @media (min-width: 960px) { .wp-block-cover-text.alignwide, [data-align="wide"] .wp-block-image, .wp-block-image.alignwide, .wp-block-gallery.alignwide, .wp-block-text-columns.alignwide { margin-left: -40px; margin-right: -40px; } .wp-block-cover-text.alignfull, [data-align="full"] .wp-block-image, .wp-block-image.alignfull, .wp-block-gallery.alignfull, .wp-block-text-columns.alignfull { margin-left: -80px; margin-right: -80px; } } /*-------------------- Media + Text --------------------*/ .wp-block-media-text { display: grid; grid-template-rows: auto; align-items: center; grid-template-areas: "media-text-media media-text-content"; grid-template-columns: 50% auto; } .wp-block-media-text.has-media-on-the-right { grid-template-areas: "media-text-content media-text-media"; grid-template-columns: auto 50%; } .wp-block-media-text .wp-block-media-text__media { grid-area: media-text-media; align-self: center; width: 100%!important; } .wp-block-media-text .wp-block-media-text__content { grid-area: media-text-content; text-align: initial; padding: 0 8% 0 8%; } /* .wp-block-media-text.is-style-comment { display: flex; align-items: flex-start; justify-content: space-between; } .wp-block-media-text.has-media-on-the-right.is-style-comment { flex-direction: column-reverse; } .wp-block-media-text.is-style-comment .wp-block-media-text__media { display: block; width: 60px!important; height: 60px; border-radius: 100%; align-self: flex-start; overflow: hidden; } .wp-block-media-text.is-style-comment .wp-block-media-text__media img { width: 100%; height: 100%; object-fit: cover; } .wp-block-media-text.is-style-comment .wp-block-media-text__content { position: relative; display: block; width: calc(100% - 80px); border: 1px solid #ddd; border-radius: 6px; padding: 12px; background-color: #fff; } .wp-block-media-text.is-style-comment .wp-block-media-text__content::before { content: ""; position: absolute; content: ""; position: absolute; width: 12px; height: 12px; border-left: 1px solid #ddd; border-top: 1px solid #ddd; background-color: inherit; transform: rotate(-45deg); top: 20px; left: -7px; } */ /*-------------------- File --------------------*/ .wp-block-file.aligncenter { text-align: center; } .wp-block-file.alignright { text-align: right; } .wp-block-file .wp-block-file__button { background: #32373c; border-radius: 2em; color: #fff; font-size: 13px; padding: 0.5em 1em; } .wp-block-file a.wp-block-file__button { text-decoration: none; } .wp-block-file a.wp-block-file__button:hover, .wp-block-file a.wp-block-file__button:visited, .wp-block-file a.wp-block-file__button:focus, .wp-block-file a.wp-block-file__button:active { box-shadow: none; color: #fff; opacity: 0.85; text-decoration: none; } .wp-block-file * + .wp-block-file__button { margin-left: 0.75em; } /*-------------------- Gallery --------------------*/ .wp-block-gallery {} .blocks-gallery-grid { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin-left: -8px; margin-right: -8px; width: calc(100% + 16px); max-width: 100vw; } .post-content .wp-block-gallery, .post-content .wp-block-gallery.alignnone {} .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item { padding: 8px; display: flex; flex-grow: 1; flex-direction: column; justify-content: center; position: relative; } .wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure { margin: 0; height: 100%; } @supports ((position: -webkit-sticky) or (position: sticky)) { .wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure { display: flex; align-items: flex-end; justify-content: flex-start; } } .wp-block-gallery .blocks-gallery-image img, .wp-block-gallery .blocks-gallery-item img { display: block; width: 100%; max-width: 100%; height: auto; } @supports ((position: -webkit-sticky) or (position: sticky)) { .wp-block-gallery .blocks-gallery-image img, .wp-block-gallery .blocks-gallery-item img { width: auto; } } .wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption { position: absolute; bottom: 5px; width: calc(100% - 10px); max-height: calc(100% - 10px); overflow: auto; padding: 40px 10px 15px; color: #fff; text-align: center; font-size: 1.4rem; background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.3) 60%, transparent); } .wp-block-gallery .blocks-gallery-image figcaption img, .wp-block-gallery .blocks-gallery-item figcaption img { display: inline; } .wp-block-gallery.is-cropped .blocks-gallery-image a, .wp-block-gallery.is-cropped .blocks-gallery-image img, .wp-block-gallery.is-cropped .blocks-gallery-item a, .wp-block-gallery.is-cropped .blocks-gallery-item img { width: 100%; } @supports ((position: -webkit-sticky) or (position: sticky)) { .wp-block-gallery.is-cropped .blocks-gallery-image a, .wp-block-gallery.is-cropped .blocks-gallery-image img, .wp-block-gallery.is-cropped .blocks-gallery-item a, .wp-block-gallery.is-cropped .blocks-gallery-item img { height: 100%; flex: 1; -o-object-fit: cover; object-fit: cover; } } .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item { width: calc(100% / 2); } .wp-block-gallery.columns-1 .blocks-gallery-image, .wp-block-gallery.columns-1 .blocks-gallery-item { width: 100%; } .wp-block-gallery .blocks-gallery-item.has-add-item-button { width: 100%; } .wp-block-gallery.alignleft { margin-right: 20px; } .wp-block-gallery.alignright { margin-left: 20px; } .wp-block-gallery.alignleft, .wp-block-gallery.aligncenter, .wp-block-gallery.alignright { display: flex; } .wp-block-gallery.aligncenter .blocks-gallery-item figure { justify-content: center; } .post-content .wp-block-gallery.alignwide { margin-left: -15px; margin-right: -15px; width: calc(100% + 30px); } .post-content .wp-block-gallery.alignfull { margin-left: -20px; margin-right: -20px; width: calc(100% + 40px); } @media (max-width: 599px) { .post-content .wp-block-gallery.alignfull .blocks-gallery-image, .post-content .wp-block-gallery.alignfull .blocks-gallery-item { padding: 0; margin-right: 10px; margin-bottom: 10px; width: calc((100% - 10px) / 2); } .wp-block-gallery.alignfull .blocks-gallery-image:nth-of-type(even), .wp-block-gallery.alignfull .blocks-gallery-item:nth-of-type(even) { margin-right: 0; } .wp-block-gallery.alignfull .blocks-gallery-image:last-child, .wp-block-gallery.alignfull .blocks-gallery-item:last-child { margin-right: 0; } .post-content .wp-block-gallery.alignfull.columns-1 .blocks-gallery-image:nth-of-type(1n), .post-content .wp-block-gallery.alignfull.columns-1 .blocks-gallery-item:nth-of-type(1n) { margin-right: 0; } .post-content .wp-block-gallery.alignfull.columns-2 .blocks-gallery-image:nth-of-type(2n), .post-content .wp-block-gallery.alignfull.columns-2 .blocks-gallery-item:nth-of-type(2n) { margin-right: 0; } .wp-block-gallery.alignfull .blocks-gallery-item figcaption { bottom: 0px; width: 100%; } } @media (min-width: 600px) { .wp-block-gallery.columns-3 .blocks-gallery-image, .wp-block-gallery.columns-3 .blocks-gallery-item { width: calc(100% / 3); } .wp-block-gallery.columns-4 .blocks-gallery-image, .wp-block-gallery.columns-4 .blocks-gallery-item { width: calc(100% / 4); } .wp-block-gallery.columns-5 .blocks-gallery-image, .wp-block-gallery.columns-5 .blocks-gallery-item { width: calc(100% / 5); } .wp-block-gallery.columns-6 .blocks-gallery-image, .wp-block-gallery.columns-6 .blocks-gallery-item { width: calc(100% / 6); } .wp-block-gallery.columns-7 .blocks-gallery-image, .wp-block-gallery.columns-7 .blocks-gallery-item { width: calc(100% / 7); } .wp-block-gallery.columns-8 .blocks-gallery-image, .wp-block-gallery.columns-8 .blocks-gallery-item { width: calc(100% / 8); } .post-content .wp-block-gallery.alignwide { margin-left: -25px; margin-right: -25px; width: calc(100% + 50px); } .post-content .wp-block-gallery.alignfull { margin-left: -45px; margin-right: -45px; width: calc(100% + 90px); } } @media (min-width: 960px) { .post-content .wp-block-gallery.alignwide { margin-left: -45px; margin-right: -45px; width: calc(100% + 90px); } .post-content .wp-block-gallery.alignfull { margin-left: -85px; margin-right: -85px; width: calc(100% + 170px); } } #sb_instagram .sb_instagram_header h3.sbi_no_bio { color: var(--main-color); } #sb_instagram .sbi_follow_btn a { background-color: var(--main-color); } @media (max-width: 640px) { #sb_instagram.sbi_col_3 #sbi_images .sbi_item, #sb_instagram.sbi_col_4 #sbi_images .sbi_item, #sb_instagram.sbi_col_5 #sbi_images .sbi_item, #sb_instagram.sbi_col_6 #sbi_images .sbi_item { width: 33.33%; } } @media (max-width: 480px) { #sb_instagram.sbi_col_10 #sbi_images .sbi_item, #sb_instagram.sbi_col_3 #sbi_images .sbi_item, #sb_instagram.sbi_col_4 #sbi_images .sbi_item, #sb_instagram.sbi_col_5 #sbi_images .sbi_item, #sb_instagram.sbi_col_6 #sbi_images .sbi_item, #sb_instagram.sbi_col_7 #sbi_images .sbi_item, #sb_instagram.sbi_col_8 #sbi_images .sbi_item, #sb_instagram.sbi_col_9 #sbi_images .sbi_item { width: 50%; } } img[data-action="zoom"] { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: url(images/zoomin.png), pointer; } .zoom-img, .zoom-img-wrap { position: relative; z-index: 666; } img.zoom-img { cursor: pointer; cursor: -webkit-zoom-out; cursor: -moz-zoom-out; cursor: url(images/zoomout.png), pointer; } .zoom-overlay { z-index: 420; background: #fff; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; opacity: 0; transition: opacity 300ms; } .zoom-overlay-open, .zoom-overlay-transitioning { cursor: default; } .zoom-overlay-open .zoom-overlay { opacity: 1; } .post-content p.page-links { display: inline-block; margin-bottom: 15px; background: #eee; font-size: 0.75em; line-height: 1; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: #666; } .page-links a, .page-links > span { display: inline-block; padding: 10px; } .page-links a:first-child, .page-links span:first-child { margin-left: 0; } .post-content .page-links a:hover { background: #ca2017; color: #fff; text-decoration: none; } .page-links > span:nth-of-type(2) { background: #ccc; color: #111; } /*-------------------- Font Size --------------------*/ .has-smaller-font-size　{ font-size: 1.1rem; } .has-small-font-size　{ font-size: 1.4rem; } .has-normal-font-size { font-size: 1.6rem; } .has-regular-font-size { font-size: 1.8rem; } .has-medium-font-size　{ font-size: 2.1rem; } .has-large-font-size { font-size: 2.8rem; } .has-larger-font-size { font-size: 3.6rem; } .post-content p.has-smaller-font-size　{ font-size: 1.1rem; } .post-content p.has-small-font-size　{ font-size: 1.4rem; } .post-content p.has-normal-font-size { font-size: 1.6rem; } .post-content p.has-regular-font-size { font-size: 1.8rem; } .post-content p.has-medium-font-size　{ font-size: 2.1rem; } .post-content p.has-large-font-size { font-size: 2.8rem; } .post-content p.has-larger-font-size { font-size: 3.6rem; } /* .post-content .has-background { background-color: #272F38; } .post-content .has-accent-color { color: #CA2017; } .post-content .has-accent-background-color { background-color: #CA2017; } .page-template-full-width-page-template-php .content { width: 100%; float: none; } .page-template-full-width-page-template-php .post-inner { width: auto; } .page-title { padding: 23px 0 0; height: 60px; background: rgba(0,0,0,0.6); } .page-title h4 { font-size: 0.75em; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: #fff; text-align: center; text-shadow: 1px 0 0 rgba(0,0,0,0.2); } .page-title span:not(.vcard) { color: rgba(255,255,255,0.8); } .page-title + .posts > .post:first-child { border-top: none; } .archive-navigation { margin-top: 60px; } .archive-navigation p { display: inline; font-size: 0.9em; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } .archive-navigation p + p:before { content: "/"; display: inline; margin: 0 20px; color: #aaa; } .archive-navigation, .archive-navigation a { color: #666; } .archive-navigation a:hover { color: var(--main-color); } .textwidget { line-height: 150%; } .widget_archive li, .widget_categories li, .widget_meta li, .widget_nav_menu li, .widget_pages { color: #888; } .widget_archive li a, .widget_categories li a, .widget_meta li a, .widget_nav_menu li a, .widget_pages li a { color: #111; } .widget_archive li a:hover, .widget_categories li a:hover, .widget_meta li a:hover, .widget_nav_menu li a:hover, .widget_pages li a:hover { color: var(--main-color); text-decoration: none; } .widget_archive li:before, .widget_categories li:before, .widget_meta li:before, .widget_nav_menu li:before { font: 16px/1 'Genericons'; width: 16px; height: 16px; display: inline-block; vertical-align: middle; color: #999; margin-right: 8px; position: relative; top: -1px; } .widget_archive li:before { content: '\f307'; } .widget_categories li:before { content: '\f301'; } .widget_meta li:before { content: '\f445'; } .widget_nav_menu li:before { content: '\f429'; } .widget_rss .widget-title img { width: 13px; height: 13px; margin-right: 2px; position: relative; bottom: -2px; } .widget_rss li a { display: block; font-size: 1.1em; line-height: 120%; font-weight: 700; color: #111; } .widget_rss li .rss-date { display: block; margin-top: 2px; font-size: 0.8em; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #888; } .widget_rss li .rssSummary { margin-top: 5px; } .widget_rss li cite { display: block; margin-top: 8px; font-size: 0.9em; } .widget_rss li cite:before { content: "— "; } #wp-calendar { width: 100%; max-width: 100%; color: #111; text-align: center; } #wp-calendar thead { border-top: 1px solid #ddd; } #wp-calendar, #wp-calendar caption, #wp-calendar tr, #wp-calendar td, #wp-calendar th { text-align: center; } #wp-calendar caption { text-transform: capitalize; color: #111; padding-bottom: 4%; } #wp-calendar th, #wp-calendar td { padding: 4% 2%; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } #wp-calendar thead th { font-size: 0.75em; font-weight: 900; text-transform: uppercase; color: var(--main-color); } #wp-calendar th:first-child, #wp-calendar tbody td:first-child { border-left: 1px solid #ddd; } #wp-calendar tbody a:hover { text-decoration: underline; } #wp-calendar tfoot td { padding: 0; border: none !important; } #wp-calendar tfoot #prev a { text-align: left; } #wp-calendar tfoot #next a { text-align: right; } #wp-calendar tfoot a { display: block; margin-top: 12px; font-size: 0.75em; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: #111; } #wp-calendar tfoot a:hover { text-decoration: none; color: var(--main-color); } */