/* Theme Name:givel Theme URI:https://www.givel.art/ */ @charset "UTF-8"; @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap'); :root { --border-color:rgba(0,0,0,.2); --border-width:1px; --field-color:#ffffff; --opposite-color:var(--field-color); --light-color:229,208,172; --gray-color:#efefef; --layer-color:rgba(var(--light-color), 0.2); --shadow-color:18,18,18; --caution-color:#ed3a16; --strong-color:#8e1616; --theme-color:rgba(var(--light-color),0.9); --link-color:#8e1616; --hover-color:#8e1616; --button-color:var(--link-color); --button-hover-color:var(--hover-color); --button-text-color:var(--opposite-color); --focus-color:#ecf9ff; --container-width:1600px; --content-width:740px; --transition:.25s; } /* Color & Typography */ html { background:#fff; } h1, h2 { font-family:"Lato", var(--body-font); font-weight:bold; } div.header-entry { padding-top:12px; padding-bottom:12px; margin:0; } div.header-entry p { text-align:center; padding:0; margin-top:.5em!important; margin-bottom:.5em!important; } .entry h2 { color:var(--strong-color); } /* .entry h3 { vertical-align:middle; } */ .entry h3::before { display:inline-block; content:'◆'; margin: 0 .2em 0 0; color: var(--strong-color); width: auto; border-width: 0; height: auto; } /* .entry h3::before { display:inline-block; content:''; margin: 0 .5em 0 0; height:.52em; width:2.2em; border-top:.3em solid var(--strong-color); } */ .entry-section-header-h2 { margin-top:2.4em; margin-bottom:1em; color:inherit!important; font-weight:bold; display:flex; align-items:center; text-align:center; padding:0; } .entry-section-header-h2::before, .entry-section-header-h2::after { content:''; flex:1; min-width:1em; height:6px; background-color:rgba( var(--light-color), .5); display:block; } .entry-section-header-h2::before { margin-right:.4em; } .entry-section-header-h2::after { margin-left:.4em; } .entry strong { color: #6e4155; font-size: 1.1em; } .entry h4 { color:var(--theme-color); } main { padding-top:calc( var(--column-gap) * 3 ); min-height:calc(100vh - 210px); } main > article, section.archive { padding:0; position:relative; } .article .container { margin-bottom:calc( var(--column-gap) * 3 ); margin-top:calc( var(--column-gap) * 2 ); display:block; } .article .archive.container, .article .work.container { margin-top: 0; } .post.container, .option.container { max-width:960px; } .article .container > .entry { max-width:960px; margin: 0 auto; } h1.entitle { color:var(--theme-color); font-weight: 900; font-size:4em; line-height:1.2; display:inline-block; } h1.headline { text-align:center; padding:0; margin:0 0 calc( var(--column-gap) * 1.5); position:relative; font-weight:900; font-size:2em; text-transform:uppercase; color:inherit; font-weight:bold; text-shadow: 4px 4px 0px #FFF, 7px 7px 0px rgba(0, 0, 0, 0.2); background: url("images/bg_common.jpg") center no-repeat; background-size: contain; } .en, .headword { font-family:"Lato"; text-transform:capitalize; } .image, .image-wrap { overflow:hidden; } .entry { margin:0; padding:0; } .entry, .entry p { line-height:1.8em; } /* .entry p + p { margin-top:1.5em; } */ .twocolumns.columns .column { align-self:stretch; } .entry-dl, .entry-dl dt, .entry-dl dd { display:block; } .entry-dl dd + dt { border-top-width:1px; } /*.entry-dl:first-child { padding-top:; }*/ .entry-dl dt { font-weight:bold; padding:32px 0 8px; } .entry-dl dd { display:block; padding:8px 0 32px; } section.post .entry + .channel { border-top-width:1px; padding:32px 0; } blockquote{ font-size: 1.06em; font-weight:bold; border-radius:3px; } table:not([class]):not([id]) thead tr:nth-child(n), table:not([class]):not([id]) tfoot tr:nth-child(n) { background-color:rgba(230,22,115,.2); } table:not([class]):not([id]) tr:nth-of-type(even) { background:rgba(0,0,0,0.05); } a.more { display:block; text-align:center; width:120px; font-size:14px; font-weight: bold; text-transform:uppercase; margin:var(--column-gap) 1em 0 auto; position:relative; color:var(--link-color); } a.more::before, a.more::after { transition:all 0.25s ease 0s; position:absolute; top:auto; bottom:0; content:""; vertical-align:middle; } a.more::before { right:8px; bottom: -5px; box-sizing:border-box; width:5px; height:5px; border:5px solid transparent; border-top:5px solid var(--link-color); transform:rotate(45deg); } a.more::after { right:12px; width:98px; height:0px; border-top:1px solid var(--link-color); } a.more:hover::before { right:-26px; } a.more:hover::after { right:-22px; width:132px;} body.modal-opened #toggle-menu { z-index:100; } body.modal-opened .modal-overlay, body.modal-loading .modal-overlay { opacity: .85; } .modal-overlay::before, .modal-overlay::after { font-size:10px; width:10em; height:10em; } .modal-overlay::before { border-color:rgba(255,255,255,0.05) rgba(255,255,255,0.05) rgba(255,255,255,0.05) rgba(255,255,255,.25); } .modal-button-close::before, .pswp__button--close::before { background-image:url( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' %3E%3Cpath d='M22.3,20.2l15.2,15.2l-2.1,2.1L20.2,22.3L5,37.5l-2.1-2.1l15.2-15.2L2.8,5L5,2.8l15.2,15.2L35.4,2.8L37.5,5L22.3,20.2z' fill='%23ffffff' /%3E%3C/svg%3E"); } .swiper-button-prev, .swiper-container-rtl .swiper-button-next, .pswp__button--arrow--left::before, .modal-button-prev::before { background-image:url( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44' %3E%3Cpath d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='%23ffffff' /%3E%3C/svg%3E"); } .swiper-button-next, .swiper-container-rtl .swiper-button-prev, .pswp__button--arrow--right::before, .modal-button-next::before { background-image:url( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44' %3E%3Cpath d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='%23ffffff' /%3E%3C/svg%3E"); } .swiper-button-prev, .swiper-button-next { opacity: .6; font-size:40px; width:1em; height:1em; border-radius:50% ; margin-top:-.5em; z-index:10; cursor:pointer; background-color:rgba(0,0,0,.5); background-size:35% auto; transition:all 0.25s ease 0s; } .swiper-button-prev:hover, .swiper-button-next:hover {opacity: .8; } .swiper-button-disabled { opacity:0; } .modal-caption { font-size:10px; line-height:1.2em; } .swiper-pagination-bullet, .swiper-slide-active { border-width:0; background-color: #fff; } .swiper-pagination-bullet-active { background-color:var(--link-color); } .swiper-pagination.bullets-thumbnail .swiper-pagination-bullet-active, .swiper-container-thumbs .swiper-slide-thumb-active { border-color:var(--link-color); } /* ::::::::::: HEADER CROWN & MENU ::::::::::: */ #site-header { position:fixed; top:0; right:0; left:0; padding:0; z-index:110; margin:0 auto; -webkit-backface-visibility:hidden; backface-visibility:hidden; transition:all .25s ease-out 0s; background-color:rgba(255,255,255,.5); } #site-header:hover { background-color:rgba(255,255,255,.9); } #site-header .container { position:static; margin:0 auto; } #site-header a { transition:all .25s ease-out 0s; color:inherit; } #site-header a:hover { color:var(--hover-color); } #site-logo { width:240px; display:block; padding:12px 8px; float: left; z-index: 2; background:transparent; transition:all .2s ease-in; } #site-header-nav { margin-left:240px; transition:all .25s ease-out 0s; padding:0 8px; z-index:1; display:flex; align-items:center; flex-wrap:nowrap; } #site-header-nav > * { flex-grow:1; } #site-header-nav > #site-navi { flex-grow:7; } #site-navi { margin:0 auto; padding:0 8px; width:auto; display:block; display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; } #site-navi > li { width:9em; margin:0; padding:0; display:inline-block; position:relative; z-index:1; } #site-navi li.sub-menu-item, #site-navi li.navi-home { display:none } #site-navi a { color:inherit; padding:16px 8px; font-size:var(--font-size); position:relative; display:block; text-align:center; color: inherit; } #site-navi strong { display:block; font-size:10px; line-height:1em; font-weight:normal; padding:2px 0; margin:0; } #site-navi .en { display:block; font-size:1.2em; font-weight: 700; line-height:1em; color:inherit; margin:0; padding:4px 0; } /* #site-navi a:hover { color: inherit; } */ #site-navi .image { display:none; width:100%; max-height:96px; margin:0 auto; overflow:hidden; position:relative; } #site-navi > li .children { display:block; margin:0; padding: 8px 0; width:11em; position:absolute; left:-100px; right:-100px; z-index:2; color:#fff; background-color:var(--theme-color); } #site-navi > li .children li { display:block; float:none; margin:0; padding:0; text-align:center; } #site-navi > li .children li a { font-weight:normal; display:block; float:none; margin:0; padding:8px 0; text-align:center; } #header-weather { width:90px; padding:2px 0 4px 4px; float:right; font-size:10px; line-height:1em; text-align:center; } #header-weather div { overflow:hidden; height: 1em; line-height:1em; } #header-weather img { width:42px; height:42px; margin:0; } #toggle-menu { display:none; position:fixed; top:6px; right:6px; z-index:9999; margin:0; padding:0; width:56px; height:56px; text-align:center; background-color:#1a1a1a; color:#fff; border-width:0!important; border-radius:50%; } #toggle-menu::after { content:'MENU'; font-weight:normal; transform:scale(.8); display:block; color:#fff; line-height:1em; text-align:center; font-size:10px; padding:35px 0 0; transition:color .25s ease-in-out; } #toggle-menu span { display:none; display:inline-block; width:28px; height:3px; background-color:#fff; position:absolute; left:14px; transition:.25s ease-in-out; } #toggle-menu .bar-1 { top:14px; } #toggle-menu .bar-2 { top:22px; } #toggle-menu .bar-3 { top:30px; } body.toggle-opened #toggle-menu .bar-1 { top:22px; transform:rotate(45deg); } body.toggle-opened #toggle-menu .bar-2 { width:0; } body.toggle-opened #toggle-menu .bar-3 { top:22px; transform:rotate(-45deg); } @media screen and ( max-width:1248px ){ #header-weather { display:none; } #site-navi ul.children { padding:0 16px; } } @media screen and ( min-width:968.1px ){ #site-navi > li .children { display:none; margin:-8px auto; } #site-navi > li:hover .children { display:block; padding:4px 0; } #site-navi > li .children li .en { display:none; } #site-navi > li .children li strong { font-size:.9em; font-weight:bold; padding:0; } } @media screen and ( max-width:968px ){ #site-header { position:static; height:76px; } body.home #site-header { height:0; } /* body.home #site-logo { display:none; } */ main { padding-top:0; } #site-logo { display:block; text-align:center; float: none; padding:8px; position:relative; z-index: 11; } #site-logo span { display:inline-block; } #toggle-menu { display:block; border-width:1px; } #site-header-nav { position:fixed!important; margin:0; width:0; top:0; bottom:0; right:-100%!important; width:100%; padding:56px 0 24px; z-index:9998; overflow:auto; display:block; background-color:#fff; transition:all .5s ease-in-out; } #site-header #header-info { display:block; margin:0; padding:16px 8px 24px; } #site-navi { display:block; text-align:center; position:static; padding:0; margin:0; font-size:.95em; } #site-navi > li { float:none; display:block; padding:0; margin:0; width: auto; } #site-navi > li::after { display:block; height:0; content:''; margin:0; border-bottom:1px dotted #ddd; } #site-navi a { padding:23px 8px; } #site-navi li.sub-menu-item, #site-navi li.navi-home { display:block } #site-navi > li.navi-parent a { padding:24px 8px 8px; } #site-navi a::before { display:none; } /* #site-navi strong { font-size:.95em; line-height:1em; } */ /* #site-navi .en { font-size:21px; line-height:1em; } */ #site-navi > li .children { font-size:.85em; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; position:static; background-color:transparent; padding:8px; color: inherit; width: auto; } #site-navi > li .children li { margin:4px; } #site-navi > li .children li a { background-color: var(--layer-color); border-radius:4px; padding:4px 12px; min-width: 10em; } /* #site-navi > li .children li strong { } */ /* #site-navi > li .children li .en { font-size:12px; } */ body.toggle-opened #site-header-nav { right:0!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch; overflow-x:hidden!important; z-index:9998; opacity:1; } /* body.toggle-opened #wrapper { margin-right:280px; margin-left:-280px; -webkit-backface-visibility:hidden; backface-visibility:hidden; overflow-x:visible; } */ h1 { font-size: 3em; } } @media only screen and ( min-width:781.1px ){ body.admin-bar #site-header { top: 32px; } body.admin-bar #toggle-menu { top: 40px; } } @media only screen and ( max-width:781px ){ #wpadminbar { position:absolute; top: -46px; z-index:99 } } @media only screen and ( max-width:480px ){ h1 { font-size:2.5em; } } body#cushion { background-color:#3a3739; min-height: 100vh; padding:5%; padding-bottom: calc( 5% + 40px); display:flex; align-items:center; } #cushion-wrapper { max-width:540px; margin: 0 auto; padding:0; color:#fff; } #cushion-wrapper p span { display:inline-block; } #cushion-wrapper h1 { margin:0 0 24px; } body#cushion #copyright { position:absolute; bottom: 0; right: 0; left: 0; } #cushion .enter-box { margin:24px 0 0; display:flex; align-items:center; } #cushion .enter-box::before { content:"R23"; line-height: 1; text-decoration:underline; padding:.15em .2em .3em; font-size: 3em; font-weight:900; font-family:"Lato", "Noto Sans JP", "メイリオ", sans-serif; border-radius:8px; border: 3px solid #fff; margin-right:.4em; } #cushion .enter-buttons { display:inline-block; margin:24px -18px 0; letter-spacing:-.4em; } #cushion .enter-buttons a { display:inline-block; letter-spacing:0;font-size:3.6em; padding:8px 24px; font-weight:900; font-family:"Lato", "Noto Sans JP", "メイリオ", sans-serif; color: #fff; transition:color 0.25s ease 0s; transition:color 0.25s ease 0s; } #cushion .enter-buttons a.no { color: #777; } #cushion .enter-buttons:hover a { color: #555; } #cushion .enter-buttons:hover a:hover { opacity:1; color:var(--hover-color); } /* ::::::::::: HOMESLIDER ::::::::::: */ #home-screen { position:relative; z-index:1; padding-bottom: calc( 4% + 4em ); -webkit-backface-visibility:hidden; backface-visibility:hidden; overflow:hidden; max-width:1600px; margin: 0 auto; } #home-screen::before { display:block; content: ''; padding:48% 0 0; } #home-screen .catchphrase { display:block; margin:-10.4vw 3vw 0; padding:0; z-index:99; position:relative; } #home-screen .catchphrase h1 { font-size:6.2vw; line-height:1.1; margin: 0; font-weight: 900; } @media only screen and ( min-width:1600px ){ #home-screen .catchphrase { margin:-170px 0 0; } #home-screen .catchphrase h1 { font-size:100px; }} #home-screen .catchphrase h1 span { display:block; } #home-screen .catchphrase .excerpt { font-size:1.2em; font-weight: bold; } #home-slider { position:absolute; z-index:-1; top:0; left:auto; right:0; bottom:auto; width:72%; overflow:hidden; display:block; margin:0; padding:0; } @media only screen and ( min-width:1200.1px ){ @-webkit-keyframes zoomUp { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } @keyframes zoomUp { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } } @media only screen and ( max-width:1200px ) and ( min-width:934.1px ){ @-webkit-keyframes zoomUp { 0% { transform: scale(1); } 100% { transform: scale(1.2); } } @keyframes zoomUp { 0% { transform: scale(1); } 100% { transform: scale(1.2); } } } @media only screen and ( max-width:934px ) and ( min-width:480.1px ){ #home-screen::before { padding-top: 60%; } #home-slider { width:80%; } #home-slider::before { padding-top:80%; } #home-screen .catchphrase h1 { font-size: 9vw; } @-webkit-keyframes zoomUp { 0% { transform: scale(1); } 100% { transform: scale(1.4); } } @keyframes zoomUp { 0% { transform: scale(1); } 100% { transform: scale(1.4); } } } @media only screen and ( max-width:480px ){ @-webkit-keyframes zoomUp { 0% { transform: scale(1); } 100% { transform: scale(1.6); } } @keyframes zoomUp { 0% { transform: scale(1); } 100% { transform: scale(1.6); } } #home-screen::before { padding-top:75%; } #home-slider::before { padding-top:100%; } #home-screen .catchphrase h1 { font-size:11vw; } } #home-slider .swiper-slide-active .image-wrap, #home-slider .swiper-slide-duplicate-active .image-wrap, #home-slider .swiper-slide:last-child:not(.swiper-slide-active):not(.swiper-slide-next) .image-wrap, /* 切り替え時の途切れを防止 */ #home-slider .swiper-slide-prev .image-wrap { -webkit-animation: zoomUp 8s linear 0s 1 normal both; animation: zoomUp 8s linear 0s 1 normal both; } #section-blockmenu { padding:0; } #section-blockmenu .container { margin:0; padding:0; background:gray; max-width:100%; width: 100%; } ul.block-list { width:100%; margin:0; padding:0; display:block; display:flex; flex-wrap:wrap; } ul.block-list li { display:block; float:left; margin:0; padding:0; width:33.333%; } ul.block-list li a { display:block; margin:0; padding:0; position:relative; background-color:#222; } ul.block-list li a::before { content:''; display:block; padding:100% 0 0 0; } ul.block-list li a .image { position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; opacity:.8; } ul.block-list li a .image img { width:100%; height:100%; -o-object-fit:cover; object-fit:cover; -webkit-filter:grayscale(100%); filter:grayscale(100%); transition:opacity .5s ease-out, -webkit-filter .5s ease-out; transition:filter .5s ease-out, opacity .5s ease-out; transition:filter .5s ease-out, opacity .5s ease-out, -webkit-filter .5s ease-out; } ul.block-list li a:hover .image img { -webkit-filter:grayscale(0%); filter:grayscale(0); } ul.block-list li a div.wrap { position:absolute; top:50%; left:0; right:0; z-index:2; transform:translate(0,-50%); display:block; text-align:center; } ul.block-list li a:hover div.wrap::after { color:red; } ul.block-list li h2 { color:#fff; padding:0; display:block; } ul.block-list li h2.title { font-size: 1em; margin: 0; } ul.block-list li h2.entitle { font-size:2em; margin:.2em 0 0; font-weight: 900; text-transform:uppercase } @media only screen and ( max-width:480px ){ ul.block-list li { width: 100%; } ul.block-list li a { padding:12% 0; } ul.block-list li a::before { display:none; } ul.block-list li a div.wrap { position:relative; top: 0; margin: 0; transform:translate(0,0); } } section.bg { background-color:var(--theme-color); } section.bg a.more { color:#fff; } section.bg a.more::before, section.bg a.more::after { border-top-color:#fff; } #section-about { background-color:var(--theme-color); padding-top:calc(4% + 4em); padding-bottom:calc(4% + 4em) } #section-about h2 { text-align:center; } #section-about h2 span { display:block; } #section-about h2 strong { display:block; font-size:2em; color: #fff; font-weight: 900; } #section-about .entry { max-width: 600px; font-size: 1.1em; margin:2em auto ; } #swiper-about { background-color:#333; } #grid-gallery { overflow:hidden; display:block; list-style:none; margin:0; padding:0; } #grid-gallery:hover li { opacity:.8; } #grid-gallery:hover li:hover { opacity:1; } #grid-gallery li { display:block; position:relative; z-index:1; float:left; list-style:none; width:16.6666666%; padding:0; margin:0; transition:opacity .3s ease-out; } #grid-gallery .image-wrap { padding:0; margin:0; position:relative; z-index:1;display:block; transition:opacity .5s ease-out; background-size:cover; background-position:center; } #grid-gallery .image-wrap::before { content:' '; display:block; padding:100% 0 0 0; } #grid-gallery .image-wrap img { height:100%; width:100%; -o-object-fit:cover; object-fit:cover; position:absolute; left:0; top:0; z-index:1; } #grid-gallery .image-wrap img.cover { z-index: 5; } #grid-gallery li:nth-child(n+13) { display:none; } @media only screen and ( max-width:1200px ){ #grid-gallery li { width:20%; } #grid-gallery li:nth-child(n+11) { display:none; } } @media only screen and ( max-width:968px ){ #grid-gallery li { width:25%; } #grid-gallery li:nth-child(n) { display:block; } #grid-gallery li:nth-child(n+13) { display:none; } } @media only screen and ( max-width:480px ){ #grid-gallery li { width:33.33333%; } #grid-gallery li:nth-child(n) { display:block; } #grid-gallery li:nth-child(n+10) { display:none; } } /* ::::::::::: FOOTER ::::::::::: */ #site-footer { clear:both; position:relative; overflow:visible; background-color:#3a3739; text-align:center; } #site-footer::after { content:' '; display:block; clear:both; visibility:hidden; } #site-footer > .container { padding-top:32px; padding-bottom:48px; } #footer-logo { max-width:420px; width:80%; display:block; margin:3em auto 0; } #footer-logo + p { max-width:540px; margin:1em auto; color:#1a1a1a; } #footer-navi { letter-spacing:-.4em; } #footer-navi:hover li a { opacity: .7; } #footer-navi:hover li a:hover { opacity:1; } #footer-navi li { display:inline-block; margin: 0; letter-spacing:0; text-align:center; position:relative; border-left:1px dotted #aaa; } #footer-navi li:first-child { border-left-width:0; } #footer-navi li a { font-size:.95em; display:block; padding:.3em 1em; color: #fff; } #footer-contact { display:inline-block; border-radius:1.7em; padding: 1em; line-height:1; font-size: var(--font-size); text-align:center; width:20em; color: #fff; font-weight: bold; border-width: 3px; } #footer-contact:hover { border-color:var(--hover-color); } @media only screen and ( max-width : 781px ){ #footer-navi { text-align:left; } #footer-navi li { width: 33.33%; } #footer-navi li:nth-child(n) { border-left:1px dotted #605e5f; } #footer-navi li:nth-child(3n + 1) { border-left-width:0; } } @media only screen and ( max-width:480px ){ #footer-navi li { width: 50%; } #footer-navi li:nth-child(n) { border-left:1px dotted #605e5f; } #footer-navi li:nth-child(2n + 1) { border-left-width:0; } } #copyright { clear:both; font-size:10px; padding:24px; text-align:center; background-color:#1a1a1a; color:#c7cace; } #copyright a { color:inherit; } #copyright span { display:inline-block; padding:0 0 0 7px; } /* ::::::::::: PAGE CONTENT) ::::::::::: */ .content-swiper .swiper-slide { background-color:transparent;} .content-swiper-section + .content-swiper-section { padding-top:calc( var(--column-gap) * 2 ); } .content-swiper-wrap { position:relative; overflow:hidden; background-color:var(--gray-color); background: linear-gradient(0deg, rgba(255,236,243,1) 0%, rgba(240,240,240,1) 100%); } .content-swiper-tab { max-width:var(--container-width); margin: 0 auto; padding:var(--column-gap) var(--column-gap) 0; overflow: visible; } .content-swiper-tab .swiper-wrapper { align-items:stretch; } .content-swiper-tab .swiper-wrapper li.swiper-slide { height:auto; background-color:#fff; width:23%; display:flex; align-items:center; justify-content: center; flex-wrap:nowrap; padding:1em .5em; margin:0 1%; text-align:center; cursor:pointer; border-width: 0; font-size:1em; line-height: 1.2; font-weight:bold;} .content-swiper-tab .swiper-wrapper li.swiper-slide-thumb-active { background-color:var(--theme-color); color:var(--field-color); } .content-swiper-tab .swiper-wrapper li.swiper-slide:hover { opacity: .9; } .content-swiper-tab .swiper-wrapper li::after, .content-swiper-tab .swiper-wrapper li::before { display:none } .content-swiper { margin:0; position:relative; z-index: 1;} .content-swiper .entry { max-width: var(--container-width); margin: 0 auto; transition:opacity 1.2s ease 1.2s; opacity:0; } .content-swiper .hasimage { display:flex; } .content-swiper .hasimage .image { width:38%; padding-right:var(--column-gap); transition:opacity 1.2s ease .6s; opacity:0; } .content-swiper .hasimage .image .image-wrap { padding:1em; background-color:rgba(255,255,255,.7); } .content-swiper dl.field { font-size:.95em; } .content-swiper .hasimage .image + .entry { width:62%; background-color: rgba(255,255,255,.7); padding:var(--column-gap); } .content-swiper .bg-hasimage { background-color: #1a1a1a; } .content-swiper .bg-hasimage .entry { color:#fff; } .content-swiper .bg-image { transition:opacity 2.2s ease .2s; opacity: .1; } .content-swiper .bg-image::before { display:block; content: ''; position:absolute; background-color:#1a1a1a; opacity:.7; z-index:2; left: 0; top: 0; width: 100%; height: 100%; } .content-swiper li.swiper-slide { background-color:transparent; padding: var(--column-gap); } .content-swiper li.swiper-slide-active .bg-image { opacity: 1; } .content-swiper li.swiper-slide-active .entry, .content-swiper li.swiper-slide-active .image { opacity: 1; } .content-swiper .box-layout { max-width:720px; margin:4em auto; } .content-swiper .box-layout:nth-child(even) { margin-left: 0; } .content-swiper .box-layout:nth-child(odd) { margin-right: 0; } /* #page-about .entry { max-width: var(--container-width); } */ #page-about { position: relative;} #page-about .container { margin:0; padding:0; width:auto; max-width:none; } #page-about h2 { display:flex; align-items:center; flex-wrap:nowrap; color: inherit; } #page-about h2::before { content:''; display:inline-block; width:2.5em; border-top: 1px solid #fff; height: 0; margin-right: .2em ; } #page-about .content-swiper li.swiper-slide { background-color:#333; padding:calc(4% + 120px) var(--column-gap) calc(4% + 40px); } #page-about .content-swiper-tab li.swiper-slide { padding:16px; } #page-about .content-swiper-tab { position:absolute; top: 0; left: 0; right: 0; z-index: 99; } #page-about strong { color:var(--strong-color);} #page-process .content-swiper { counter-reset:step; } #page-process .content-swiper .entry { position:relative; } #page-process .content-swiper .entry::before { display: block; padding: 0; font-family:"Lato";font-weight:800; content:"STEP." counter(step); counter-increment:step; color:rgba( var(--light-color), 0.5); font-size:4em; position:absolute; right:-.2em; top:-.2em;} #page-process .content-swiper-tab { counter-reset:step; } #page-process .content-swiper-tab .swiper-slide { padding-left:2.5em;} #page-process .content-swiper-tab .swiper-slide::before { display: block; padding:.25em 0; opacity:1; font-family:"Lato"; font-weight:800; content:counter(step); counter-increment:step; width:1em; background-color: rgba(0,0,0,.1); display:flex; justify-content: center; align-items:center; border-width:0; color:#fff; font-size:2em; line-height:1; } #page-process dl.field dt, #page-process dl.field dd { padding-bottom:0; border-width: 0; } #page-process .process-options { display:none; } dl.field li { margin:6px 0; } dl.field li:first-child { margin-top: 0; } dl.field li:last-child { margin-bottom: 0; } #page-options .content-swiper .entry + .entry { margin-top:calc( var(--column-gap) * 2); } #page-options .content-swiper .entry h2 { text-align: center; } #page-options .content-swiper .entry p { margin-top:.5em; font-size:14px; } p.price { color:var(--strong-color); font-weight:bold; } p.price::before { content: '価格: '; } #page-brand-history { margin-bottom: 0; } .content-swiper .box-layout { max-width:720px; margin:4em auto; } #page-brand-history .bg-hasimage { padding:calc( var(--column-gap) * 4 ) 0; } #page-brand-history .bg-hasimage .column { max-width:800px; margin:0 auto; font-size: 1.2em; line-height: 2em; } #page-brand-history .bg-hasimage .column > :first-child::first-letter { font-size: 3em; } /* #page-brand-history .bg-hasimage .bg-image { width: 100vw; left: -50vw; margin-left: 50%; } */ #page-brand-history .bg-hasimage:nth-child(even) .bg-image img { width: 65%; margin-left:auto; display:block; } #page-brand-history .bg-hasimage:nth-child(odd) .bg-image img{ width: 65%; margin-right:auto; display:block; } #page-brand-history .bg-hasimage:nth-child(even) .bg-image::before { background: rgb(6,54,35); background: linear-gradient(90deg, rgba(6,54,35,1) 0%, rgba(54,98,80,1) 35%, rgba(111,147,137,0.5) 100%); } #page-brand-history .bg-hasimage:nth-child(odd) .bg-image::before { background: rgb(54,26,6); background: linear-gradient(-90deg, rgba(54,26,6,1) 0%, rgba(108,68,80,1) 35%, rgba(112,77,86,0.5) 100%); } #page-brand-history .bg-hasimage:nth-child(even) .column { margin-left: 0; } #page-brand-history .bg-hasimage:nth-child(odd) .column { margin-right: 0; } .bg.column { border-radius:3px; } .two-coutures > .column { padding-top:calc( 5% + 2em ); padding-bottom:calc( 5% + 2em ); background-color:var(--theme-color); color: #fff; text-align:center; } .two-coutures > .column h2 { color:inherit; font-weight: 800; } .two-coutures > .column h4 { color:var(--strong-color); } .entry .options .option-wrap { padding:calc( var(--column-gap) * 0.75); font-size: .9em; background-color: #fff; margin-bottom: var(--column-gap); -webkit-break-inside:avoid; -moz-break-inside:avoid; -moz-column-break-inside: avoid; break-inside: avoid-column; display:table; width: 100%; } .entry .options::after { display:block; content: ''; } @media only screen and ( max-width:980px ){ #page-process dl.field dt, #page-process dl.field dd { padding-bottom:0; border-width: 0; } #page-process dl.field dt { display:block; width:100%; padding:0; border-bottom-width: 1px; } #page-process dl.field dd { display:block; width:100%; padding:.5em 0 0 0; } } @media only screen and ( max-width : 781px ){ .content-swiper .hasimage { display:block } .content-swiper .hasimage .image { width:auto } .content-swiper .hasimage .image + .entry { width:auto; } .content-swiper-tab .swiper-wrapper li.swiper-slide { width:auto; } #page-process .content-swiper .field { display:none; } #page-process .content-swiper .image { padding: 0; } #page-process .process-options { margin:0; display:block; width: 100vw; left: -50vw; margin-left: 50%; position: relative; font-size: .95em; background-color:rgba(255,236,243,1); /* color:var(--opposite-color); */ padding:0 var(--column-gap) var(--column-gap); } #page-process .process-options h4 { color:inherit; } #page-process dl.field { margin: 0; padding: 0; } #page-process dl.field + dl.field { padding-top: 1em; } #page-process dl.field a { text-decoration:none; } /* #page-process dl.field a:hover { text-decoration:underline; } */ #page-process .process-options ul { display:flex; flex-wrap:wrap; margin:0 -.5em 0 0; padding:0;} #page-process .process-options ul li { margin: 0 .5em .5em 0; padding: .25em .5em; background-color: #fff; border-radius:.25em; list-style:none; } #page-process .content-swiper .entry::before { font-size:3em; top:-.5em; right:.25em; opacity:.7; } #page-process .content-swiper-wrap { position: relative; overflow: hidden; width: 100vw; left: -50vw; margin-left: 50%; } } @media only screen and ( min-width:480.1px ){ #page-options .content-swiper .entry .options { display: block; -moz-column-count:2; column-count:2; -moz-column-gap:var(--column-gap); column-gap:var(--column-gap); } } @media only screen and ( max-width:480px ){ .content-swiper-tab .swiper-wrapper li.swiper-slide { width:48%; } #page-brand-history .bg-hasimage:nth-child(even) .bg-image img { width: 80%; } #page-brand-history .bg-hasimage:nth-child(odd) .bg-image img{ width: 80%;} #page-brand-history .bg-hasimage:nth-child(even) .bg-image::before {background: linear-gradient(90deg, rgba(6,54,35,1) 0%, rgba(54,98,80,1) 20%, rgba(111,147,137,0.6) 100%); } #page-brand-history .bg-hasimage:nth-child(odd) .bg-image::before { background: linear-gradient(-90deg, rgba(54,26,6,1) 0%, rgba(108,68,80,1) 20%, rgba(112,77,86,0.6) 100%); } } .crop-bg-image { overflow: hidden; position: relative; } .crop-bg-image::before, .crop-bg-image::after { -webkit-animation: 2s cubic-bezier(.4, 0, .2, 1) forwards; animation: 2s cubic-bezier(.4, 0, .2, 1) forwards; background: #fff; content: ''; left: 0; pointer-events: none; position: absolute; right: 0; z-index: 1; } .crop-bg-image::before { -webkit-animation-name: img-wrap-before; animation-name: img-wrap-before; top: 0; bottom: 50%; } .crop-bg-image::after { -webkit-animation-name: img-wrap-after; animation-name: img-wrap-after; top: 50%; bottom: 0; } @-webkit-keyframes img-wrap-before { 100% { transform: translateX(100%); } } @keyframes img-wrap-before { 100% { transform: translateX(100%); } } @-webkit-keyframes img-wrap-after { 100% { transform: translateX(-100%); } } @keyframes img-wrap-after { 100% { transform: translateX(-100%); } } /* ::::::::::: ITEMSLIST SECTION (ARCHIVE PAGE) ::::::::::: */ section.archive { position:relative; } .archive-header { display:block; padding-bottom:0; } .archive-header .description { float:right; display:table; table-layout:fixed; border-spacing:24px; } .archive-header .description .text { width:450px; display:table-cell; vertical-align:bottom; padding:0; } .archive-header .description .text p { font-size:.9em; text-align:justify; margin:.8em 0 0 ; } .archive-header .description .text a.button { margin-bottom:0; } .archive-header .description h1 { text-transform:capitalize; font-size:2.05em; font-weight:900; line-height:1.35em; margin:0 0 .1em; } .archive-header .description h2 { font-size:1.1em; font-weight:900; line-height:1.35em; margin:0 0 .1em; } .archive-header .description h1 img { max-width:240px; max-height:160px; height:auto; width:auto; } .archive-header .description .image { width:210px; display:table-cell; vertical-align:bottom; } .archive-header .description .image img { max-width:100%; max-height:100%; height:auto; width:auto; } #term-ranking { background:#eee; padding:0 24px; margin:0; } #term-ranking h1 { padding:24px 0 8px; margin:0; } #term-buttons { padding:32px 0; } #term-buttons a.banner { background-position:center center!important; background-size:cover!important; display:block; position:relative; } #term-buttons a.banner::before { content:''; display:block; padding:28% 0 0 0; min-height:88px; background:#fff; opacity:0; transition:all 0.25s; } #term-buttons a.banner:hover::before, #term-buttons a.banner:hover::before { opacity:.3; } #term-buttons a.banner span { position:absolute; z-index:2; bottom:0; font-size:.9em; line-height:1.4em; font-weight:900; display:inline-block; padding:.25em .5em; margin:.5em; min-width:9em; text-align:center; background:#fff; } .header-title { border-width:1px 0; padding:1.5em 0; margin: 0; position:relative; } .header-title h1 { font-size:1.3em;line-height: 1; text-transform:capitalize; text-align:center; margin: 0; padding: 0; color: var(--theme-color); } .header-title h1 span { padding:0 .6em; } .header-title h1 .name + .en { border-left-width:1px; } #controller { padding:0; margin-top:0; margin-bottom:0; overflow: visible; } #controller::after { content:''; display:block; clear: both; } #controller .swiper-container { overflow: visible; } #controller a.modal-open-button { display:inline-block; padding: 8px; } #controller .sub-navi { padding:0; margin:0; } .archive.container #controller .sub-navi { float: left; margin:0 -8px 1em; } /* #controller .sub-navi.category-navi { margin:0 -8px; transform: translateX(0); } */ #controller .sub-navi ul { display:flex; justify-content:center; margin: 0; } #controller .sub-navi li { display:flex; align-items: center; margin:0; padding: 0 8px; } #controller .sub-navi li a { display:flex; align-items: center; height: 46px; padding:8px; font-weight: bold; font-size:var(--font-size); line-height: 24px; color:inherit; text-decoration: none; border-top:8px solid transparent; transition: color 0.2s ease 0s; cursor: pointer; white-space: nowrap; } #controller .sub-navi li a.current { border-top:8px solid var(--hover-color);} #controller .sub-navi::after { display:block; content:''; clear: both; } #controller .search-box { float: right; } .search-box { margin:16px 0 0; padding:0; height:48px; width:21em; position:relative; } .search-box input.search-key { width:100%; height:100%; margin:0; padding:0 3.2em 0 .4em; border-width:1px; display:block; z-index:1; position:relative; background:#fff; border-radius:2px; } .search-box button { position:absolute; z-index:2; right:0; top:0; bottom:0; color:#ccc; background:transparent!important; } .search-box button:hover { color:#ddd; cursor:pointer; } #controller .swiper-button-prev, #controller .swiper-button-next { font-size:28px; background-color:var(--theme-color); border-width:0; opacity:1; } #controller .swiper-button-prev { left: -.5em; background-image:url( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44' %3E%3Cpath d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='%23ffffff' /%3E%3C/svg%3E"); } #controller .swiper-button-next { right: -.5em; background-image: url( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44' %3E%3Cpath d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='%23ffffff' /%3E%3C/svg%3E");} #controller .swiper-button-disabled { opacity:.3; } .tax-list { margin:0; padding:0; } .tax-list li { padding:0; margin:0 12px; } .tax-list a { display:block; margin:0; font-size:.95em; padding:.7em 1.1em; max-width:200px; overflow:hidden; position:relative; z-index:2; color:inherit; font-weight:bold; border-radius:2px; text-align:center; background-color: var(--layer-color); } .tax-list a::before { display:block; content: ''; opacity: .5;position:absolute; left: 0; top: 0; right: 0; bottom: 0; border-width:.4em; z-index:3; border-radius:2px; border-color:var(--layer-color); } .tax-list a:hover { opacity:.8; } .tax-list a .image { position:absolute; top:0; left:0; right:0; bottom:0; display:block; z-index: -1; overflow:hidden; background-color:#000; } .tax-list a .image img { display:block; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; opacity:.3; } .tax-list a .name { display:block; line-height:1.3em; font-weight: bold; overflow: hidden; } .tax-list a small { display:block; font-size: 11px; font-weight: normal; } .tax-list a .image img { opacity:.5 } .tax-list a.current::before { border-color:var(--hover-color); } .genre-list a .name { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .tax-list-h3 { margin:0; padding:16px 0 8px; font-size:12px; clear: both; } .tax-list-h3 .label { display:none } .tax-list-wrap { text-align:center; } .tax-list-wrap h3 { position:relative; z-index: 2; margin:0 auto; padding:0; display:inline-block; } .tax-list-wrap .tax-list { position:relative; z-index: 2; } .tax-list-wrap a.modal-close-self { display:block; z-index: 1; content:''; position:absolute; left: 0; right: 0; top: 0; bottom: 0; cursor:pointer; background-color: transparent; } .series-list a { color: #fff; background-color:#605e5f; padding:.5em; max-width:220px; width:220px; height:120px; position:relative; } .series-list a .name { position:relative; transform:translateY(-50%); top: 50%; } .series-list a .patron { display:block; line-height:1.2em; font-size: 11px; position:absolute; left:6px; top:6px; padding:2px; background-color:rgba(0,0,0,.8); } #modal-work_category li a .image { max-width:160px; margin: 0 auto 8px; background-color:transparent; box-shadow: none; } #modal-work_category li a .image::before { padding:100% 0 0 0; margin:0; background-color:transparent; } #modal-work_category li a .name { display:block; position:static; transform:translate( 0 ); } .work-item .wrap { display:block; margin:0; padding:0; text-align:left; position:relative; } .work-item .image { display:block; height:auto; padding:0; margin:0 auto; overflow:hidden; position:relative; z-index:2; background:#fff; border-radius:3px; } .work-item .image::before { display:block; width:100%; content:' '; padding:100% 0 0 0; margin:0; opacity:.8; } .work-item a:hover .data, .work-item a:hover .data { opacity:1; } .work-item a:hover { color:inherit; border-color:inherit; } .work-item .image img { position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; margin:0; display:block; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; } .work-item .image .text { position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; margin:0; font-size:1em; line-height: 1; font-family:'EB Garamond','Serif JP','Noto Serif JP', serif; display:block; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; transition:transform 10s ease-in-out; } @media only screen and ( max-width:1600px ){ .work-item .image .text { font-size:1vw; } } @media only screen and ( max-width:480px ){ .work-item .image .text { font-size:2vw; } } .work-item .image .text span { padding:0; margin:0; display:inline; } .work-item .image .text span:nth-child(1) { font-size:3em; float:left; } .work-item .image .text span:nth-child(2) { font-size:4em; display:block; float:right; -webkit-writing-mode:vertical-rl; -ms-writing-mode:vertical-rl; writing-mode:vertical-rl; } .work-item .image .text span:nth-child(3) { font-size:1.6em; } .work-item .image .text span:nth-child(4) { font-size:2.4em; float: left; -webkit-writing-mode:vertical-rl; -ms-writing-mode:vertical-rl; writing-mode:vertical-rl; height:6em; } .work-item .image .text span:nth-child(5) { font-size:1.2em; } .work-item .image .text span:nth-child(6) { font-size:1.6em; float:left; -webkit-writing-mode:vertical-rl; -ms-writing-mode:vertical-rl; writing-mode:vertical-rl; } .work-item .image .text span:nth-child(7) { font-size:2.6em; } .work-item .image .voice { background-color:rgba( var(--light-color), 0.3); position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; margin:0; font-size:1em; line-height: 1; display:block; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; transition:transform 10s ease-in-out; } .work-item .image .voice span { color:#c13d7b; white-space: nowrap; position:absolute; top:68%; display:block; -webkit-animation: autoscrolltext 100s linear infinite; animation: autoscrolltext 100s linear infinite; } .work-item .image .voice::before { display:block; width:30%; height:50%; transform:translate(-50%,-50%); content: ''; opacity: .3; margin: 0; position:absolute; padding: 0; top:50%; top:calc(50% - 16px); left:50%; background-size:contain; background-position:center; background-repeat:no-repeat; background-image:url( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' %3E%3Cpath d='M147.6,199.4h4.8c28,0,50.8-22.8,50.8-50.8V80.3c0-28-22.8-50.8-50.8-50.8h-4.8c-28,0-50.8,22.8-50.8,50.8 v68.3C96.7,176.6,119.6,199.4,147.6,199.4z M138.1,66.3h-28.5c5.9-15.9,20.9-26.4,37.9-26.4h4.8c22.3,0,40.4,18.1,40.4,40.4v68.3 c0,22.3-18.1,40.4-40.4,40.4h-4.8c-17,0-32-10.6-37.9-26.4h28.5c0.6,0,1-0.4,1-1v-8.4c0-0.6-0.4-1-1-1h-30.8 c-0.1-1.2-0.2-2.4-0.2-3.6v-7.5h31c0.6,0,1-0.4,1-1v-8.4c0-0.6-0.4-1-1-1h-31v-11.1h31c0.6,0,1-0.4,1-1v-8.4c0-0.6-0.4-1-1-1h-31 V98.2h31c0.6,0,1-0.4,1-1v-8.4c0-0.6-0.4-1-1-1h-31v-7.5c0-1.2,0.1-2.4,0.2-3.6h30.8c0.6,0,1-0.4,1-1v-8.4 C139.1,66.7,138.7,66.3,138.1,66.3z' fill='%23c13d7b' /%3E%3Cpath d='M229.1,133.8h-8.4c-0.6,0-1,0.4-1,1v13.8c0,37.1-30.2,67.3-67.3,67.3h-4.8c-37.1,0-67.3-30.2-67.3-67.3v-13.8 c0-0.6-0.4-1-1-1h-8.4c-0.6,0-1,0.4-1,1v13.8c0,20.4,7.9,39.7,22.2,54.3c14.1,14.4,32.7,22.6,52.7,23.3v38.4h-29.3 c-0.6,0-1,0.4-1,1v8.4c0,0.6,0.4,1,1,1h69c0.6,0,1-0.4,1-1v-8.4c0-0.6-0.4-1-1-1h-29.3v-38.4c20-0.7,38.7-9,52.7-23.3 c14.3-14.6,22.2-33.9,22.2-54.3v-13.8C230.1,134.2,229.6,133.8,229.1,133.8z' fill='%23c13d7b' /%3E%3C/svg%3E"); } .work-item .image .voice.voice-notext::before { top:50% ; } @-webkit-keyframes autoscrolltext { from { left: 0; } to { left: -500% } } @keyframes autoscrolltext { from { left: 0; } to { left: -500% } } .work-item h3 { margin:0; padding:0; font-size:14px; line-height:1.3em; height:1.3em; font-weight:bold; text-overflow: ellipsis; overflow:hidden; } .work-item h3 .bracket { font-size:10px;} .work-item .series { font-size:12px; margin:0 0 4px; line-height:1.3em; height:1.3em; text-overflow: ellipsis; overflow:hidden; } .work-item .year { font-size:12px; margin:0 0 4px; line-height:1.3em; height:1.3em; text-overflow: ellipsis; overflow:hidden; } .work-list { padding:0; margin-left:-12px; margin-right:-12px; display:flex; align-items:stretch; flex-wrap:wrap; } .work-list::after { content:' '; display:block; height:40px; clear:both; visibility:hidden; } .work-list .work-item { display:block; width:20%; padding:12px; margin:0; overflow:visible; float: left; } .work-list a:hover .image::before { opacity:0; transition:opacity 3s ease 0s; } .work-list a .image::before { opacity:.8; background-color:#1a1a1a; transition:opacity .5s ease-in-out 0s; } .work-list a .image img { transition:transform .5s ease-in-out .1s; } .work-list a:hover .image img { transform: scale(2); transition:transform 30s ease 0s; } .work-item .cat-label { position:absolute; top:8px; left:8px; } .cat-label { display:block; color:#fff; background-color:#c13d7b; font-size:10px; line-height:1.3em; padding:.2em .3em .3em; font-weight:bold; text-align:center; width:5.4em; z-index:4; text-transform:uppercase; } .cat-label-illust { background-color:#c13d7b; } .cat-label-manga { background-color:#2462a5; } .cat-label-3dcg { background-color:#ccba34; } .cat-label-voice { background-color:#339036; } .cat-label-novel { background-color:#693fa2; } .work-list .caption { color: #fff; position:absolute; left: 0; bottom: 0; right:0; z-index:9; padding:.5em; transition:background-color 4s ease 0s; font-size:.9em; } .work-list .work-item:nth-child(2n+1) { transition-delay:0s; } .work-list .work-item:nth-child(2n+2) { transition-delay:0.15s; } .work-list a:hover .caption { background-color: rgba(0,0,0,.2); } .noresult { display:block; padding:32px 0; width: 100%; text-align:center; } .noresult img { margin:12px 0; } .noresult a.button { margin:24px auto 0; } .creator-list { clear:both; display:block; padding:0; margin:0 -12px; display:flex; align-items:stretch; flex-wrap:wrap; } /* important margin-top ** disable padding */ .creator-list::after { content:' '; display:block; height:40px; clear:both; visibility:hidden; } .creator-list .creator { display:block; width:33.3333%; padding:12px; margin:0; overflow:visible; float:left; } .creator-list .creator a { padding:8px; margin:0; display:block; border-color: inherit; background-color:var(--gray-color); } .creator-list .creator .images { padding:0; margin:0; border-radius:3px; overflow: hidden; position:relative; background-color:#ffffff; display:flex; align-items:stretch; flex-wrap:nowrap; } .creator-list .creator .images-0 { padding-top:50%; } .creator-list .creator .images-1 .image:empty::after, .creator-list .creator .images-0::before { content: 'Now Printing'; color:var(--theme-color); font-weight: bold; position:absolute; left:0; top:50%; right:0; text-align: center; transform:translateY(-50%);} .creator-list .creator .images-1 .image::before { padding-top:50%; } .creator-list .creator .images-2 .image::before { padding-top:100%; } .creator-list .creator .images-3 .image::before { padding-top:150%; } .creator-list .creator .images .image { height:100%; flex:1; border-radius:0; } .creator-list .creator a:hover .data, .creator-list .creator a:hover .data { opacity:1; } .creator-list .creator a:hover { color:inherit; border-color:inherit; } .creator-list:hover .creator { opacity:.9; } .creator-list:hover .creator:hover { opacity:1; } .creator-list .creator h3 { font-size:1em; line-height:1.2em; font-weight:bold; margin:8px 0 0; text-align:center; } .creator-list .creator h3 .en-name { display:inline-block; font-size:12px; } .creator-list .creator:nth-child(4n+1) { transition-delay:0s; } .creator-list .creator:nth-child(4n+2) { transition-delay:0.1s; } .creator-list .creator:nth-child(4n+3) { transition-delay:.2s; } @media only screen and ( max-width:1400px ){ .work-list .work-item { display:block; width:25% } } @media only screen and ( max-width:900px ){ /* #controller .sub-navi { margin: 0 -4px; } */ /* #controller .sub-navi li { padding: 0 4px; } */ /* #controller .sub-navi li a { height: 46px; padding:8px 4px; } */ #controller .search-box { float: none; clear: left; margin-top: 8px; } .work-list .work-item { width:33.333%; padding:8px; } .archive-header .description { float:none; display:block; border-spacing:24px; position:relative; } .archive-header .description .text h1 { font-size:1.65em; } .archive-header .description .text { display:block; width:auto; } .archive-header .description .text p { padding-right:28%; font-size:.9em; line-height:1.6em; } .archive-header .description .image { width:25%; display:block; position:absolute; right:0; bottom:0; top:0; } .archive-header .description .image img { position:absolute; right:0; bottom:0; } } @media only screen and ( max-width : 781px ){ .creator-list .creator { width:50%; } .creator-list, .work-list { margin-left:-8px; margin-right:-8px; } .creator-list .creator, .work-list .work-item { padding: 8px; } .creator-list .creator h3 { font-size:.95em; } #term-buttons a.banner span { font-size:10px; } .creator-list .creator { width: 50%; } } @media only screen and ( max-width : 600px ){ .tax-list a {font-size:.95em; } } @media only screen and ( max-width:480px ){ .series-list a { max-width:160px; width:160px; height:100px; } #controller .sub-navi li a, .tax-list a { font-size: .9em; } .creator-list .creator { width:100%; } .work-list .work-item { width:50%;} } /* ::::::::::: SNGLE ITEM SECTION ::::::::::: */ .work-items { margin-left:-50vw; width:100vw; position:relative; left:50%; } .work-items .swiper-pagination { left: auto; top: 16px; bottom: auto; right:16px; text-align:right; } .work-items .swiper-pagination .swiper-pagination-bullet { opacity:.75; } .work-items .swiper-container { background-color:#3a3739; padding:0; } .work-items .swiper-slide { z-index: 2; background-color: transparent; } .work-items .swiper-slide-active { z-index: 3; border-color:inherit; } .work-items .swiper-slide .item-wrap { opacity:.1; transition:opacity 1s ease .25s; } .work-items .swiper-slide-active .item-wrap { opacity:1; transition:opacity 1s ease .25s; } .work-items .swiper-slide:not(.swiper-slide-active)::before { display:block; position:absolute; z-index: 99; content:''; background-color:transparent; left: 0; right: 0; top:0; bottom: 0; } /* link blocker */ .work-items .swiper-slide-active .item-wrap:hover img { opacity:1; } .work-items .caption { font-size:.95em; color:#fff; background-color:rgba(40,40,40,.6); padding:12px 16px; } .work-items .caption h3 { margin:0; padding:0; font-size:1em; } .work-items .caption h3::after { margin:0 -16px; padding:4px 0 0; display:block; content: ''; clear: both; } .work-items .caption h3 + p { margin-top:8px; padding-top:8px; border-top-width:1px; border-color:rgba(255,255,255,.3); } .work-items .caption p { font-size:12px; margin: 0; } .work-items .caption .zoom-button { float: right; display:block; } .work-items .caption .zoom-button:hover { color:var(--link-color); } .work-items .swiper-button-prev { left:-1em; } .work-items .swiper-button-next { right:-1em; } .work-items .swiper-container:hover .swiper-button-prev { left:.2em; } .work-items .swiper-container:hover .swiper-button-next { right:.2em; } .swiper-slide.slide-audio { width:90%; max-width: 700px; background-color:rgba(230,22,115,.025); } .audio-wrap { background-color:rgba(0,0,0,.1); padding:32px 0; } .audio-wrap::before { width: 200px; height: 200px; display:block; margin:0 auto; content: ''; background-color:transparent; background-size:100%; background-image:url( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' %3E%3Cpath d='M147.6,199.4h4.8c28,0,50.8-22.8,50.8-50.8V80.3c0-28-22.8-50.8-50.8-50.8h-4.8c-28,0-50.8,22.8-50.8,50.8 v68.3C96.7,176.6,119.6,199.4,147.6,199.4z M138.1,66.3h-28.5c5.9-15.9,20.9-26.4,37.9-26.4h4.8c22.3,0,40.4,18.1,40.4,40.4v68.3 c0,22.3-18.1,40.4-40.4,40.4h-4.8c-17,0-32-10.6-37.9-26.4h28.5c0.6,0,1-0.4,1-1v-8.4c0-0.6-0.4-1-1-1h-30.8 c-0.1-1.2-0.2-2.4-0.2-3.6v-7.5h31c0.6,0,1-0.4,1-1v-8.4c0-0.6-0.4-1-1-1h-31v-11.1h31c0.6,0,1-0.4,1-1v-8.4c0-0.6-0.4-1-1-1h-31 V98.2h31c0.6,0,1-0.4,1-1v-8.4c0-0.6-0.4-1-1-1h-31v-7.5c0-1.2,0.1-2.4,0.2-3.6h30.8c0.6,0,1-0.4,1-1v-8.4 C139.1,66.7,138.7,66.3,138.1,66.3z' fill='%23ffffff' /%3E%3Cpath d='M229.1,133.8h-8.4c-0.6,0-1,0.4-1,1v13.8c0,37.1-30.2,67.3-67.3,67.3h-4.8c-37.1,0-67.3-30.2-67.3-67.3v-13.8 c0-0.6-0.4-1-1-1h-8.4c-0.6,0-1,0.4-1,1v13.8c0,20.4,7.9,39.7,22.2,54.3c14.1,14.4,32.7,22.6,52.7,23.3v38.4h-29.3 c-0.6,0-1,0.4-1,1v8.4c0,0.6,0.4,1,1,1h69c0.6,0,1-0.4,1-1v-8.4c0-0.6-0.4-1-1-1h-29.3v-38.4c20-0.7,38.7-9,52.7-23.3 c14.3-14.6,22.2-33.9,22.2-54.3v-13.8C230.1,134.2,229.6,133.8,229.1,133.8z' fill='%23ffffff' /%3E%3C/svg%3E"); } .audio-wrap audio { display:block; margin: 32px auto 0; width:100% } .work-items + .entry { margin-top:calc( var(--column-gap) * 2 ); } .swiper-slide.slide-text { width:90%; max-width: 700px; background-color:rgba(230,22,115,.025); } .text-wrap { font-family:"Sawarabi Mincho", serif; margin:var(--column-gap); padding: var(--column-gap); font-size: var(--font-size); line-height:2.5; overflow:scroll; height:500px; height:60vh; } .text-wrap h3 { font-family:inherit; } .text-wrap h3::before { display:none; } .work-items .text-wrap { color:#fff; background-color:rgba(0,0,0,.3); } .text-wrap p:first-child { font-size: 1.5em; } .text-wrap p + p { margin-top:1em; } .text-wrap::after { display:block; height: 32px; content: ''; background-color:transparent; } .work-details { padding:0; margin:calc( var(--column-gap) * 2 ) 0; display:flex; align-items:start; flex-wrap:nowrap; } .datas { margin:0; padding:0; } .datas h1 { font-size:21px; margin:0; } .datas h2 { font-size:var(--font-size); margin:.2em 0 0; color:var(--theme-color); } .datas h1 + dl, .datas h2 + dl { margin-top: 2em; } .datas dl { margin-top: 1em; display:flex; align-items:center; flex-wrap:nowrap; border-bottom-width: 1px; } .datas dt { flex:1; font-size:12px; font-weight:bold; padding-right:6px; } .datas dt::before { content:'● '; color:var(--link-color); } .datas dd { flex:2;} .work-details .datas { width:35%; padding-right:3%; position:-webkit-sticky; position:sticky; top:calc( var(--column-gap) * 3 ); min-width:300px; } .work-details .datas + .entry { width:65%; } .datas .description { font-size: .95em; padding: 1em; background-color:var(--layer-color); } .datas .description > :first-child { margin-top: 0; } .tag-list { margin: 0; padding: 0; display:block; list-style:none; } .tag-list li { margin: 0 4px 4px 0; padding: 0; display:block; float: left; list-style:none; } .tag-list li a { display:block; line-height:1; padding: .3em; font-size:.9em;background-color: var(--layer-color); border-radius:2px; } .creator-entry-title { font-size: 1.2em; font-weight: bold; display: none; } .creator.container .work-details { margin-top: 0; } .creator-works { display:block; padding:0; -moz-column-count:2; column-count:2; -moz-column-width:240px; column-width:240px; -moz-column-gap:1em; column-gap:1em; } .creator-works li { display:block; margin: 0 0 1em; background-color:var(--layer-color); padding:1em; border-radius:2px; -moz-column-break-inside: avoid; break-inside: avoid;} .creator-works .caption { margin-top: .5em; font-size: .95em; } .creator-works .caption h3 { font-size: 1em; margin: 0; } .creator-works .caption h3::before { display:none; } .creator-works .caption h3 + p { margin-top:.5em; } .creator-works .caption p { font-size:12px; margin: 0; } .creator-works .text-wrap { margin:0; height:500px; height:50vh; background-color: #fff; padding: 1em; } @media screen and ( max-width:1080px ){ .creator-works .image-wrap { padding:0; } } @media only screen and ( max-width : 781px ){ .work-details .datas { width:auto; position: static; margin-bottom:var(--column-gap); } .work-details .datas + .entry { width:auto; position: static;} .creator-entry-title { display:block; } } a.work-form-button { display:block; max-width:24em; margin:1.6em 0 0; padding:.8em 1.5em; font-size:1.1em; line-height:1.3em; text-align:center; color:#605e5f; border:2px solid rgba(0,0,0,.2); background-color:var(--gray-color); border-radius:2px; } a.work-form-button span.en { margin:0; padding:0; line-height:1.2em; } a.work-form-button::before { display:inline-block; content:'\e806'; font-size:1.6em; line-height:.8em; margin:0 .3em 0 0; vertical-align:middle; color:rgba(0,0,0,.2); font-family:'fontello'; } a.work-form-button:hover { background:#c8e4ed; } /*VIEWED & RELATED ITEMS */ .related-works { padding:var(--column-gap); background-color:var(--gray-color); } .related-works + .related-works { margin-top: var(--column-gap); } .related-works h2 { color:var(--strong-color); margin: 0; font-weight:bold; font-size: 1.2em; line-height:1; } .related-works .desc { max-width: 700px; margin-top:1em; } .related-works .work-list { margin-top: 0; margin-bottom: calc( var(--column-gap) * -0.5 ); } @media only screen and ( min-width : 781.1px ){ .swiper-slide.slide-image .caption { position:absolute; bottom:16px; top:auto; left:50%; right:calc( 50% - 50vw + 16px ); margin:0 auto; width:480px; transition:opacity 1s ease .25s; } .swiper-slide.slide-image > .image-wrap img { height:540px; height:60vh; } .work-items .caption { opacity:0; transition:opacity 1s ease-out .3s; } .work-items .swiper-slide-active .caption { opacity:1; } } @media only screen and ( max-width : 781px ){ .work-items .swiper-pagination { left:0; top:8px; right:0; text-align:center; } .work-items .swiper-container .swiper-slide { width: 100%; } .work-items .swiper-slide > .image-wrap img { width: 100%; height:auto; } .text-wrap { margin:40px 24px 32px; padding:32px 24px; } .work-details { display:block; } .work-details .datas, .work-details .datas + .entry { width:auto; padding: 0; position:static; top:auto; } .work-details .creator-entry ul { margin:-16px; padding:16px; } .entry-images { margin:0 -6px; } .entry-images li.empty, .entry-images li a { padding:0 6px 12px; } } @media only screen and ( max-width:480px ){ .related-works .series .en { display:block; margin:0; padding:0; border-width:0; } .entry-images { margin:0 -4px; } .entry-images li.empty, .entry-images li a { padding:0 4px 8px; } } /* ::::::::::: FRONT PAGE CONTENTS ::::::::::: */ h1.front-title { font-weight:bold; font-size:44px; line-height:64px; margin:0; padding:0 0 1em; } #page-home { padding-top:100px; padding-bottom:100px; } #entry-container { max-width:740px; position:relative; } #page-home .entry { font-size:1.1em; } #page-home .entry > div { clear:both; } #page-home .entry p { margin:.7em 0; } #page-home .entry > div.en { padding-top:40px; font-weight:normal; font-size:1.1em; } #page-home .entry > div.en h3 { font-style:italic; font-weight:normal; font-size:1.3em; } #page-home h1.front-title, #page-home .entry { padding-left:160px; } #page-home i.icon-logo { font-size:180px; line-height:1em; position:absolute; left:0; top:0; padding:0; margin:0.04em 0 0 -0.22em; display:block; } #page-home i.icon-logo::before { margin:0; padding:0; } .archive-link { text-align:right; } .archive-link a { display:inline-block; font-size:.9em; padding:.3em .1em; color:#195564; vertical-align:middle; } .archive-link a::before { opacity:.8; content:'▶'; font-size:10px; color:#fff; background:#137edd; height:16px; width:16px; line-height:10px; padding:3px 0; margin:-.2em .3em 0 0; vertical-align:middle; display:inline-block; text-align:center; border-radius:50%; } .archive-link a:hover { color:var(--link-color); } .archive-link a:hover::before { background:var(--link-color); } #recent-news { border-width:1px 0; padding:16px 0; } .news-list { display:block; padding:0; margin:12px 0 0; } .news-list::after { clear:both; display:block; content:' '; overflow:hidden; visibility:hidden; } .news-list li { display:block; margin:8px 0; } .news-list a { display:block; padding:0; position:relative; z-index:1; transition:all 0.25s; } .news-list a .date { float:left; width:130px; font-size:.9em; } .news-list a .title { display:inline-block; margin-right:1em; font-size:1.1em; } #works-wrapper { overflow:hidden; } @media only screen and ( min-width : 781.1px ){ .fadein { opacity:0; transform:translate(0, 40px); transition:opacity 1s ease-out, transform 1s ease-out; } .fadein.fadeinLeft { transform:translate(-40px, 0); } .fadein.fadeinRight { transform:translate(40px, 0); } .fadein.trigger { opacity:1; transform:translate(0, 0); } } @media only screen and ( max-width : 781px ){ #page-home { padding-top:40px; padding-bottom:40px; } h1.front-title { font-size:28px; line-height:40px; margin:0; } h1.front-title br { display:block; } #page-home .entry { font-size:1em; } #page-home h1.front-title { padding-left:100px; } #page-home i.icon-logo { font-size:120px; } #page-home .entry { padding-left:0; } } @media only screen and ( max-width : 600px ){ #page-home i.icon-logo { width:120px; position:static; margin:0 auto 12px; display:block; } #page-home h1.front-title { padding-left:0; text-align:center; font-size:24px; } #page-home .entry { text-align:justify; } #page-home .entry br { display:none; } } /* ::::::::::: FORMS ::::::::::: */ @media (min-width:1px) { /*only modern browser*/ input[type="radio"]+label::after, input[type="radio"]+span::after { background:#ddd; } input[type="radio"]:checked+label::after, input[type="radio"]:checked+span::after { background:var(--hover-color); } input[type="checkbox"]:checked+label::after, input[type="checkbox"]:checked+span::after { border-color:var(--hover-color); } } .contact-info { margin-bottom:32px; } .contact-info .form-box { border-width:2px; text-align:center; padding:24px 4px; margin-bottom:8px!important; vertical-align:middle; } .contact-info .form-box .line-1 { font-weight:bold; text-align:center; font-size:1.2em; padding:0; margin:0; line-height:1.4em; } .contact-info .form-box .line-2 { font-weight:bold; text-align:center; font-size:1.4em; line-height:1.5em; margin:0; padding:.5em 0; } .contact-info .form-box .line-2 b { font-size:1.4em; } .contact-info .form-box .line-2.stretch { line-height:3em; } .contact-info .form-box .line-3 { font-weight:normal; text-align:center; font-size:.85em; line-height:1.4em; padding:0; margin:0; } .contact-info::after { content:' '; display:block; clear:both; visibility:hidden; } .wpcf7 .form-box + h4 { margin-top:var(--column-gap); } .tab-panels-wrapper { border-width: 2px; border-radius: 3px; padding:var(--column-gap); background-color:#fff; margin-top:var(--column-gap); } .tab-panels-list { list-style:none; text-align:center; margin:0; padding:0; } label.tab-panel-label { border-radius:2px; padding:16px 0; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; display:block; width:100%; cursor:pointer; color:#fff; background-color:var(--theme-color); transition-property:background-color, color; transition-duration:.15s; } label.tab-panel-label:hover { background-color:var(--hover-color); } .tab-panel-radio { display:none; } .tab-panels { margin:0; padding:0; } .tab-panels .tab-panel { max-height:0; opacity:0; transition:opacity .5s; overflow-y:hidden; } .tab-panels .tab-panel > .wpcf7 { padding:var(--column-gap) 0 0 0; } #tab-panel-1-ctrl:checked ~ .tab-panels #tab-panel-1, #tab-panel-2-ctrl:checked ~ .tab-panels #tab-panel-2, #tab-panel-3-ctrl:checked ~ .tab-panels #tab-panel-3, #tab-panel-4-ctrl:checked ~ .tab-panels #tab-panel-4, #tab-panel-5-ctrl:checked ~ .tab-panels #tab-panel-5 { max-height:initial; opacity:1; } #tab-panel-1-ctrl:checked ~ .tab-panels-list #li-for-panel-1 label.tab-panel-label, #tab-panel-2-ctrl:checked ~ .tab-panels-list #li-for-panel-2 label.tab-panel-label, #tab-panel-3-ctrl:checked ~ .tab-panels-list #li-for-panel-3 label.tab-panel-label, #tab-panel-4-ctrl:checked ~ .tab-panels-list #li-for-panel-4 label.tab-panel-label, #tab-panel-5-ctrl:checked ~ .tab-panels-list #li-for-panel-5 label.tab-panel-label { background-color:var(--link-color); color:#fff; } .tab-nav-close label.tab-panel-label { background-color:#666; color:#fff; } #tab-panel-1-ctrl:checked ~ .tab-panels-list #li-for-panel-1, #tab-panel-2-ctrl:checked ~ .tab-panels-list #li-for-panel-2, #tab-panel-3-ctrl:checked ~ .tab-panels-list #li-for-panel-3, #tab-panel-4-ctrl:checked ~ .tab-panels-list #li-for-panel-4, #tab-panel-5-ctrl:checked ~ .tab-panels-list #li-for-panel-5 { pointer-events:none; cursor:default; border-top:none; border-right:none; } .tab-panels-list > li { margin:0 0.5% 0; display:block; text-align:center; float:left; font-size:0.875em; width:32.333%; transition-property:border-top; transition-duration:.15s; } .tab-panels-list::after { display:table; content:''; clear:both; } .tab-panels-list .tab-nav-open, ul.tab-panels-list .tab-nav-close { display:none; } .tab-nav-ctrl { display:none; } @media all and ( max-width : 781px ) { .tab-panels-list-toggle + .tab-panels { border-width:0; } .tab-nav-ctrl:checked ~ .tab-panels-list-toggle #li-for-panel-1, .tab-nav-ctrl:checked ~ .tab-panels-list-toggle #li-for-panel-2, .tab-nav-ctrl:checked ~ .tab-panels-list-toggle #li-for-panel-3, .tab-nav-ctrl:checked ~ .tab-panels-list-toggle #li-for-panel-4, .tab-nav-ctrl:checked ~ .tab-panels-list-toggle #li-for-panel-5 { max-height:44px; opacity:1; } .tab-panels-list-toggle .tab-nav-open { display:block; position:absolute; top:0; right:0; bottom:0; left:0; cursor:pointer; z-index:10; } .tab-nav-ctrl:checked ~ .tab-panels-list-toggle .tab-nav-open { display:none; } .tab-panels-list-toggle .tab-nav-close { display:block; max-height:0; overflow-y:hidden; padding:0px; transition:max-height .15s; cursor:pointer; } .tab-nav-ctrl:checked ~ .tab-panels-list-toggle .tab-nav-close { max-height:44px; opacity:1; } .tab-panels-list-toggle { position:relative; margin:0; padding:0; } .tab-panels-list-toggle > li { margin:0; width:auto; display:block; box-shadow:none; border-bottom-width:1px; font-size:1em; } .tab-panels-list-toggle label.tab-panel-label { border-radius:0; padding:12px 0; } .tab-panels-list-toggle #li-for-panel-1, .tab-panels-list-toggle #li-for-panel-2, .tab-panels-list-toggle #li-for-panel-3, .tab-panels-list-toggle #li-for-panel-4, .tab-panels-list-toggle #li-for-panel-5 { max-height:0; overflow-y:hidden; transition:max-height .15s; } #tab-panel-1-ctrl:checked ~ .tab-panels-list-toggle #li-for-panel-1, #tab-panel-2-ctrl:checked ~ .tab-panels-list-toggle #li-for-panel-2, #tab-panel-3-ctrl:checked ~ .tab-panels-list-toggle #li-for-panel-3, #tab-panel-4-ctrl:checked ~ .tab-panels-list-toggle #li-for-panel-4, #tab-panel-1-ctrl:checked ~ .tab-panels-list-toggle #li-for-panel-5 { max-height:44px; opacity:1; transform:translate(0, 0); } .tab-panels .tab-panel .wrap { padding:16px; } } /* ::::::::::: SINGLE NEWS PAGE ::::::::::: */ .social-buttons { text-align:right; font-size:.9em; padding-top:16px; } article .social-buttons > li a { color:#ccc!important; } header.archive-channel { padding:8px 0 20px; clear:both; text-align:center; border-width:0; } footer.archive-channel { border-top-width:1px; margin-top: 32px; padding:24px 0 0; clear:both; text-align:center; } .archive-channel > .container { padding:0; } .channel .page-numbers, .channel .posts-counter { border-width:0; padding:2px 4px; margin:0; background:transparent; letter-spacing:-1px; font-size:.93em; } .channel a.prev, .channel a.next { letter-spacing:0; } .channel a.next::after, .channel a.prev::before { display:none; } .channel .page-numbers.current { font-weight:bold; } .post-link { margin:16px 0; text-align:center; } .post-link a { display:inline-block; min-width:40%; padding-left:16px; padding-right:16px; } /* ::::::::::: ACCESS PAGE ::::::::::: */ .map-canvas { height:440px; z-index:2; margin:48px 0 24px; clear:both; background:#ddd; } .map-canvas * { border-style:none; } /*css reset for google maps infowindow */ @media screen and ( max-width:1080px ){ .map-canvas { height:380px; } .map-canvas * { border-style:none; } /*css reset for google maps infowindow */ } @media screen and ( max-width:480px ){ .map-canvas { height:320px; } .wpcf7 .customerMessage textarea { height:320px; } } .modal-form { max-width:1000px; } .modal-form .wpcf7 { margin:0; } .modal-form .wpcf7 form { padding:24px; display:block; } @media screen and ( ( min-width : 781.1px ){ .pswp__ui--idle .pswp__top-bar, .pswp__ui--idle .pswp__button--arrow--left, .pswp__ui--idle .pswp__button--arrow--right , .pswp__ui--hidden .pswp__top-bar, .pswp__ui--hidden .pswp__caption, .pswp__ui--hidden .pswp__button--arrow--left, .pswp__ui--hidden .pswp__button--arrow--right { opacity:1; } } @media screen and ( max-width : 781px ){ .modal-form .wpcf7 form { padding:8px; } } @media print { .swiper-slide, .entry-images li a { background:none!important; } .swiper-slide img, .entry-images li a img { opacity:1!important; width:100%!important; max-height:100%!important; width:auto!important; height:auto!important; } }