@charset "utf-8"; /* Theme Name:Mad Princess 2019 Theme URI:https://mad-princess.com Author:ONZE Author URI:https://on-ze.com Description:Design by ONZE. Version:0.9 Text Domain:madprincess-2019 */ /******************/ /******************/ /* reset **********/ * { border:0; margin:0; outline:0; padding:0; background:none; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; font:inherit; font-family:inherit; font-size:100%; font-style:inherit; font-weight:inherit; text-decoration:none; vertical-align:baseline; } html {font-size:62.5%; width:100%; height:100%;} body { background:#19140a; color:#fff; /*font-family:'YuGothic', 'Yu Gothic', '游ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'Helvetica', sans-serif; font-family:'YuMincho', 'Yu Mincho', '游明朝', 'Hiragino Kaku Gothic ProN', 'ヒラギノ明朝 ProN W3', 'Meiryo', 'メイリオ', 'Times New Roman', serif;*/ /* メイリオ系 font-family:'Meiryo', 'メイリオ', 'YuGothic', 'Yu Gothic', '游ゴシック', Arial, Verdana, sans-serif; */ font-family:'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro', 'YuGothic', 'Yu Gothic', '游ゴシック', 'Meiryo', 'メイリオ', Helvetica, sans-serif; font-size:19px; font-size:1.9rem; letter-spacing:0.06em; line-height:1; position:relative; text-align:center; -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; -ms-text-size-adjust:100%; -o-text-size-adjust:100%; text-size-adjust:100%; -webkit-font-smoothing:antialiased; /*-moz-font-smoothing:antialiased; -ms-font-smoothing:antialiased; -o-font-smoothing:antialiased;*/ -moz-osx-font-smoothing:grayscale; font-smoothing:antialiased; /* text-rendering:optimizeLegibility; まだ使わないほうが無難 */ width:100%; height:100%; } article, aside, dialog, figure, footer, header, main, menu, nav, section {display:block;} audio, canvas, video {display:inline-block;} br, hr {display:block;} ol, ul {list-style:none;} blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;} input, select {vertical-align:middle;} /******************/ /******************/ /* html format ****/ a, a:link, a:visited, a:hover, a:active { color:#555; /* -webkit-tap-highlight-color:transparent rgba(0,0,0,0); -moz-tap-highlight-color:transparent rgba(0,0,0,0); -ms-tap-highlight-color:transparent rgba(0,0,0,0); -o-tap-highlight-color:transparent rgba(0,0,0,0); tap-highlight-color:transparent rgba(0,0,0,0);*/ text-decoration:none; } a:hover {color:#ff9b19;} h1, h2, h3, h4, h5, h6 {font-family:'YuMincho', 'Yu Mincho', '游明朝', 'Hiragino Kaku Gothic ProN', 'ヒラギノ明朝 ProN W3', 'Meiryo', 'メイリオ', 'Times New Roman', serif;} b {color:#ff9b19;} i {font-style:normal;} u {text-decoration:underline;} em {} strong {} mark {color:#ff9b19;} q {} s {text-decoration:line-through;} del {text-decoration:line-through; margin:0 12px;} ruby {} rt {font-size:0.5em;} hr {clear:both; margin:0 0 2em 0; border-bottom:1px solid #555;} table {border-collapse:collapse; border-spacing:0; empty-cells:show; text-align:left; width:100%; margin:0 0 60px 0; border:none;} table th, table td {padding:32px 12px; vertical-align:top; border:none;} table th {border-top:1px solid; border-bottom:1px solid; border-color:#ff9b19; color:#ff9b19; text-align:center;} table td {border-top:1px solid; border-bottom:1px solid; border-color:#555;} table caption {text-align:left; padding:4px;} /******************/ /******************/ /* shortcodes *****/ .pc {display:block;} .tb {display:none;} .sp {display:none;} .alignright, .align-right {text-align:right;} .alignleft, .align-left {text-align:left;} .center, .aligncenter, .align-center {text-align:center; display:block; margin-left:auto; margin-right:auto;} .clear {clear:both;} .clearfix {zoom:1;} .clearfix:after {content:""; clear:both; display:block; height:0; visibility:hidden; zoom:1;} .hide, .none {display:none;} .hidden {overflow:hidden;} .left, .floatleft, .float-left {float:left;} .right, .float-right, .float-right {float:right;} .relative {position:relative;} .absolute {position:absolute;} .static {position:static;} .fixed {position:fixed;} .nowrap {white-space:nowrap;} .small {font-size:0.8em;} img.left, img.floatleft, img.float-left {margin:0 20px 20px 0;} img.right, img.floatright, img.float-right {margin:0 0 20px 20px;} img.full {width:100%; height:auto;} /* ::-moz-selection {background:#1aa; color:#fff;} ::selection {background:#1aa; color:#fff;} */ .table {display:table; table-layout:fixed; width:100%;} .table .cell {display:table-cell; vertical-align:top;} table.border, table.border th, table.border td {border:1px solid #ccc;} table.hover tbody tr:hover, table.hover tbody tr:nth-child(odd):hover, table.hover tbody tr:nth-child(even):hover {background:#555; color:#fff; cursor:pointer;} table.stripe tbody tr:nth-child(even) {background-color:#555;} table thead th {vertical-align:bottom; font-weight:bold;} :root { --oz-color-black:#19140a; --oz-color-dark:#555; --oz-color-light:#cccccc; --oz-color-orange:#ff9b19; --oz-color-yellow:#ffb900; } /******************/ /******************/ /* WordPress Tags */ img.size-full, img.size-large, img.size-midium, .wp-post-image, .post-thumbnail img { max-width:100%; width:100%; height:auto; } .wp-video {margin:0 0 40px 0;} .wp-caption {} .wp-caption-text {} .sticky {} .gallery-caption {} .bypostauthor {} #wpstats {display:none;} /******************/ /******************/ /* layout *********/ #to, #bo {clear:both; display:block; height:0; overflow:hidden; visibility:hidden;} .site {width:100%; height:100%;} .inner {clear:both; display:block; width:100%; max-width:1600px; margin:0 auto; position:relative; padding:0 32px; padding-left:calc( 24px + constant(safe-area-inset-left) ); padding-right:calc( 24px + constant(safe-area-inset-right) ); } .inner[data-width="min"] {max-width:600px;} .inner[data-width="mid"] {max-width:1200px;} .inner[data-width="max"] {max-width:1600px;} /******************/ /******************/ /* header *********/ #header {display:block; padding:60px 0 0.1em 0; width:100%; margin:0; text-align:center; line-height:2.0;} .home #header {display:none;} #header img {max-width:100%; height:auto;} #logo {display:block; width:90px; position:absolute; z-index:999;} #header h1 {display:none;} #header h2 {margin:0 0 20px 0;} #main {position:relative; padding:0 0 0.1em 0; margin:0; clear:both; text-align:left; line-height:2.4; background:#19140a;} #main img {max-width:100%; height:auto;} /******************/ /******************/ /* navi ***********/ #header-navi { border-top:1px solid; border-bottom:1px solid; border-color:#555; border:0; padding:90px 0 0 0; background-color:#19140a; margin:0; line-height:1.6; position:relative; display:none; } /*#header-navi:before, #header-navi:after { content:""; display:block; height:10px; color:#555; background-image:linear-gradient(90deg, currentColor, currentColor 33.33%, transparent 33.33%, transparent 100%); background-size:3px 100%; }*/ #header-navi ul {display:table; table-layout:fixed; width:100%; font-size:13px; font-size:1.3rem; text-align:center;} #header-navi ul li {display:table-cell; overflow:hidden; position:relative;} #header-navi ul li i {display:block; font-size:17px; font-size:1.7rem;} #header-navi ul li a {display:block; padding:16px 0;} #header-navi ul li a:after {content:""; display:block; width:100%; padding:100% 0 0 0; position:relative; background:center top 20px no-repeat; background-size:50% 50%; filter:grayscale(100%); opacity:0.8; } #header-navi ul li a:after {background-image:url("images-page/character-cinderella.png");} #header-navi ul li a:hover:after {filter:grayscale(0); opacity:1;} #header-navi ul li a:hover {color:#ff9b19; color:var(--oz-color-orange);} @media screen and (max-width:800px) { #header-navi ul li {height:60px;} #header-navi ul li a {padding:80px 0 0 0; position:absolute; top:0; left:0; right:0; display:block; background:transparent center top 6px no-repeat; background-size:50px 50px; } #header-navi ul li:nth-child(1) a {background-image:url("images/icon-cinderella.svg");} #header-navi ul li:nth-child(2) a {background-image:url("images/icon-cinderella.svg");} #header-navi ul li:nth-child(3) a {background-image:url("images/icon-cinderella.svg");} #header-navi ul li:nth-child(4) a {background-image:url("images/icon-cinderella.svg");} #header-navi ul li:nth-child(5) a {background-image:url("images/icon-cinderella.svg");} #header-navi ul li:nth-child(6) a {background-image:url("images/icon-cinderella.svg");} #header-navi ul li a:hover {fill:#ff9b19;} } /******************/ /******************/ /* footer-navi ****/ #footer-navi {line-height:1.6;} #footer-navi ul {margin:0 auto 60px; padding:20px; font-size:13px; font-size:1.3rem; border-top:1px solid rgba(0,0,0,0.4); border-bottom:1px solid rgba(0,0,0,0.4); display:inline-block;} #footer-navi ul li {display:inline-block; padding:0; margin:0 12px; white-space:nowrap;} #footer-navi ul li a {display:block; color:#000;} #footer-navi ul li a:hover {color:#fff;} #footer-navi ul li i {display:block; white-space:nowrap; font-size:17px; font-size:1.7rem;} @media screen and (max-width:900px) { #footer-navi {line-height:1;} #footer-navi ul {font-size:15px; font-size:1.5rem; display:block; padding:0; border-bottom:0; text-align:left;} #footer-navi ul li {display:block; margin:0; border-bottom:1px solid rgba(0,0,0,0.4);} #footer-navi ul li i {position:absolute; right:54%; text-align:right; top:22px; font-size:19px; font-size:1.9rem;} #footer-navi ul li a {padding:22px 0 20px 50%; position:relative;} } @media screen and (max-width:720px) { #footer-navi ul {font-size:13px; font-size:1.3rem;} #footer-navi ul li i {font-size:15px; font-size:1.5rem;} } @media screen and (max-width:460px) { #footer-navi ul {text-align:center;} } /******************/ /******************/ /* footer *********/ #footer-bg {clear:both; margin-top:-80px; overflow:hidden; background:#19140a;} #scene {clear:both; width:100%; height:40vw; position:relative; bottom:-60px;} #scene .layer {width:140%; height:56vw; margin-left:-20%; top:inherit !important; position:absolute !important; bottom:0;} #scene #footer-layer-01 {z-index:9;} #scene #footer-layer-02 {z-index:8;} #scene #footer-layer-03 {z-index:7;} #scene #footer-layer-04 {z-index:6;} #scene .wave {width:100%; height:40vw; background:transparent center top no-repeat; background-size:cover; position:absolute; bottom:0;} #scene #footer-layer-01 .wave {background-image:url("images/footer-bg-01.png");} #scene #footer-layer-02 .wave {background-image:url("images/footer-bg-02.png");} #scene #footer-layer-03 .wave {background-image:url("images/footer-bg-03.png");} #scene #footer-layer-04 .wave {background-image:url("images/footer-bg-04.png");} .wave { -webkit-animation:wave 4s 0.1s infinite linear; -moz-animation:wave 4s 0.1s infinite linear; animation:wave 4s 0.1s infinite linear; } .wave.depth-80 { -webkit-animation:wave 4.88889s 0.1s infinite linear; -moz-animation:wave 4.88889s 0.1s infinite linear; animation:wave 4.88889s 0.1s infinite linear; } .wave.depth-60 { -webkit-animation:wave 5.77778s 0.1s infinite linear; -moz-animation:wave 5.77778s 0.1s infinite linear; animation:wave 5.77778s 0.1s infinite linear; } .wave.depth-40 { -webkit-animation:wave 6.66667s 0.1s infinite linear; -moz-animation:wave 6.66667s 0.1s infinite linear; animation:wave 6.66667s 0.1s infinite linear; } .wave.depth-20 { -webkit-animation:wave 7.55556s 0.1s infinite linear; -moz-animation:wave 7.55556s 0.1s infinite linear; animation:wave 7.55556s 0.1s infinite linear; } @media screen and (max-width:900px) { #scene {bottom:-40px;} } @media screen and (max-width:720px) { #scene {bottom:-20px;} } #footer {padding:40px 0 120px 0; margin:0; position:relative; color:#000; line-height:2.0; background: #ff9b19; /* Old browsers */ background: -moz-linear-gradient(top, #ff9b19 0%, #c3735f 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ff9b19 0%,#c3735f 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ff9b19 0%,#c3735f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9b19', endColorstr='#c3735f',GradientType=0 ); /* IE6-9 */ } #footer-logo p {margin:0 auto 20px;} #footer-logo h2 {margin:0 0 52px 0;} #footer-link {} #footer-link ul {margin:0 auto 32px; text-align:center;} #footer-link ul li {width:120px; height:30px; overflow:hidden; position:relative; display:inline-block; margin:0 12px;} #footer-link ul li a {color:#000; display:block; background:url("images/ic-onze.svg") 0 0 no-repeat; background-size:120px 30px; padding:40px 0 0 0;} #footer-link ul li:nth-child(2) a {background-image:url("images/ic-line.svg");} #footer-link ul li a:hover {opacity:0.6;} #site-info {clear:both; display:block; text-align:center; margin:0 auto; padding:0; font-size:11px; font-size:1.1rem; text-transform:uppercase;} #site-info a {color:#000;} /******************/ /******************/ /* main ***********/ #bg {height:100vh; min-height:520px; max-height:86vw; background:url("images/bg.png") center center no-repeat; background-size:cover; position:fixed; left:0; right:0; top:0; z-index:-1;} #top-branding {padding:0; height:100vh; min-height:520px; max-height:86vw; background:url("images/bg.png") center center no-repeat; background-size:cover; background:none; text-align:center; position:relative; overflow:hidden;} #top-branding:after { content:""; display:block; width:100%; height:20vh; position:absolute; left: 0; right: 0; bottom: 0; z-index:0; background: -moz-linear-gradient(top, rgba(25,20,10,0) 0%, rgba(25,20,10,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(25,20,10,0) 0%,rgba(25,20,10,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(25,20,10,0) 0%,rgba(25,20,10,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0019140a', endColorstr='#19140a',GradientType=0 ); /* IE6-9 */ } #top-branding p, #top-branding h2 {left:50%; width:100%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%); padding:0 20px; z-index:9; } #top-branding p {position:absolute; height:68vh; bottom:22vh;} #top-branding h2 {position:absolute; height:22vh; bottom:4vh;} #top-branding img {width:auto; max-width:100%; height:auto; margin:0 auto;} #top-branding p img {max-height:68vh; bottom:0; position:absolute; left:50%; transform:translateX(-50%); } #top-branding h2 img {max-height:22vh;} @media screen and (max-height:520px) { #top-branding p {height:68%; bottom:22%;} #top-branding h2 {height:22%; bottom:4%;} #top-branding p img {max-height:100%;} #top-branding h2 img {max-height:100%;} } @media screen and (max-width:960px) { #top-branding {max-height:100vw;} } @media screen and (max-width:600px) { #top-branding {min-height:100vw;} #top-branding p {bottom:26vw;} #top-branding h2 {bottom:20px; height:auto;} #top-branding p img {max-height:400px;} #top-branding h2 img {max-height:160px;} } #clouds {width:100%; height:100%; position:relative; z-index:2;} #clouds ul {width:100%; height:100%; position:relative;} #clouds ul li {width:8vw; height:4vw; position:absolute !important; display:block;} #clouds ul li:nth-child(1) {margin-top:16%; margin-left:-6%; width:36vw; height:18vw;} #clouds ul li:nth-child(2) {margin-top:-2%; margin-left:20%; width:32vw; height:16vw;} #clouds ul li:nth-child(3) {margin-top:18%; margin-left:60%; width:40vw; height:20vw;} #clouds ul li:nth-child(4) {margin-top:12%; margin-left:86%; width:20vw; height:10vw;} #clouds ul li:nth-child(5) {margin-top:-6%; margin-left:72%; width:32vw; height:16vw;} #clouds ul li span { width:100%; height:50%; display:block; background:url("images/thumbnail.png") 0 0 no-repeat; background-size:cover; -webkit-animation:cloud 7.2s 0.1s infinite linear; -moz-animation:cloud 7.2s 0.1s infinite linear; animation:cloud 7.2s 0.1s infinite linear; opacity:0.4; } #clouds ul li:nth-child(1) span {-webkit-animation-duration:6.2s; -moz-animation-duration:7.2s; animation-duration:7.2s; background-image:url("images/cloud-01.png"); width:36vw; height:18vw;} #clouds ul li:nth-child(2) span {-webkit-animation-duration:7.2s; -moz-animation-duration:6.2s; animation-duration:6.2s; background-image:url("images/cloud-02.png"); width:32vw; height:16vw;} #clouds ul li:nth-child(3) span {-webkit-animation-duration:9.2s; -moz-animation-duration:9.2s; animation-duration:9.2s; background-image:url("images/cloud-03.png"); width:40vw; height:20vw;} #clouds ul li:nth-child(4) span {-webkit-animation-duration:8.2s; -moz-animation-duration:8.2s; animation-duration:8.2s; background-image:url("images/cloud-04.png"); width:20vw; height:10vw;} #clouds ul li:nth-child(5) span {-webkit-animation-duration:10.2s; -moz-animation-duration:8.2s; animation-duration:8.2s; background-image:url("images/cloud-04.png"); width:32vw; height:16vw;} #top-message {padding:0 0 120px 0; margin:0; margin-bottom:-1px; text-align:center; background:url("images/thumbnail.png") right 8vw bottom no-repeat; background-size:20vw 10vw; background: -moz-linear-gradient(top, rgba(25,20,10,0) 0%, rgba(25,20,10,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(25,20,10,0) 0%,rgba(25,20,10,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(25,20,10,0) 0%,rgba(25,20,10,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0019140a', endColorstr='#19140a',GradientType=0 ); /* IE6-9 */ } #top-message p {margin:0 auto 2.4em;} /******************/ /******************/ /* article ********/ .article {clear:both; display:block; overflow:hidden; position:relative;} .article a {color:#ff9b19; word-wrap:break-word;} .article a:hover {color:#ff9b19;} .article a img:hover { -webkit-transition:0.2s ease-in-out; -moz-transition:0.2s ease-in-out; -ms-transition:0.2s ease-in-out; -o-transition:0.2s ease-in-out; transition:0.2s ease-in-out; } .article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {line-height:1.6; position:relative;} .article h1 {font-size:35px; font-size:3.5rem;} .article h2 {font-size:31px; font-size:3.1rem;} .article h3 {font-size:25px; font-size:2.5rem;} .article h4 {font-size:21px; font-size:2.1rem;} .article h5 {font-size:19px; font-size:1.9rem;} .article h6 {font-size:17px; font-size:1.7rem;} .article p {margin:0 0 2em 0;} /******************/ /* article-type ***/ .section h3 {font-size:41px; font-size:4.1rem; margin:0 auto 24px;} .page-title, .post-title {padding:80px 0 0 0; margin:0 auto 80px;} .page-title h3, .post-title h3 {color:#fff; font-size:21px; font-size:2.1rem; margin:0 0 0; text-align:center;} .page-title h3 i, .post-title h3 i {display:block; font-size:51px; font-size:5.1rem; color:#ff9b19;} .post-thumbnail {margin:0 auto 40px; max-width:400px;} .post-content {text-align:center;} /* .post-content table caption {border-bottom:1px solid #555; margin:0 0 12px 0; font-size:21px; font-size:2.1rem;} .post-content table tr {display:inline-block; float:left; text-align:left; padding:0 40px 0 0;} .post-content table tr th, .post-content table tr td {display:block; padding:0; border:0; text-align:left;} .post-content table tr th {color:#fff; font-weight:bold;} */ .post-content #slider {position:relative; line-height:0;} .post-content #slider:before, .post-content #slider:after {content:""; display:block; background:#000; width:60px; height:246px; position:absolute; top:0; z-index:2;} .post-content #slider:before {left:0; background: -webkit-linear-gradient(left, rgba(25,20,10,1) 0%,rgba(25,20,10,0) 100%); background: -moz-linear-gradient(left, rgba(25,20,10,1) 0%, rgba(25,20,10,0) 100%); background: linear-gradient(to right, rgba(25,20,10,1) 0%,rgba(25,20,10,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19140a', endColorstr='#0019140a',GradientType=1 ); } .post-content #slider:after {right:0; background: -webkit-linear-gradient(left, rgba(25,20,10,0.01) 0%,rgba(25,20,10,1) 100%); background: -moz-linear-gradient(left, rgba(25,20,10,0.01) 0%, rgba(25,20,10,1) 100%); background: linear-gradient(to right, rgba(25,20,10,0.01) 0%,rgba(25,20,10,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0319140a', endColorstr='#19140a',GradientType=1 ); } .post-content #slider ul {list-style:none; padding:0; margin:0 0 60px; width:100%; position:relative; line-height:0;} .post-content #slider ul li {float:left; list-style:none; width:240px; background:center center no-repeat; background-size:cover;} .post-content #slider ul li img {width:100%; height:auto;} /* Swiper Edit */ .swiper-container-free-mode>.swiper-wrapper { -webkit-transition-timing-function:linear; -o-transition-timing-function:linear; transition-timing-function:linear; } @media screen and (max-width:800px) { .post-content #slider:before, .post-content #slider:after {width:32px;} .post-content #slider ul li {width:200px;} } /******************/ /******************/ .type-post h4 {background:#f6f6f6; padding:8px 12px;margin:4em 0 1.2em 0;} .type-post h5 {padding:4px 0 4px 12px; border-left:4px solid #555; margin:0 0 1.2em 0;} .type-post h6 {text-decoration:underline; margin:0 0 1.2em 0;} .type-post h4:before { content:''; position:absolute; border-top:12px solid #f3f3f3; border-right:12px solid transparent; border-left:12px solid transparent; bottom:-12px; left:20px; } .type-post b {color:#ff9b19;} /* キーワードや人名 */ .type-post u {text-decoration:underline;} .type-post em { background:-webkit-linear-gradient(transparent 40%, #ff9 40%); background-image:-moz-linear-gradient(top,#ffcc00 0%,#ff6600 49%,#ff3300 50%,#ff6600); background:-ms-linear-gradient(transparent 40%, #ff9 40%); background:-o-linear-gradient(transparent 40%, #ff9 40%); background:linear-gradient(transparent 40%, #ff9 40%); } .type-post strong {font-size:1.2em; font-weight:bold;} .type-post mark {color:#ff9b19;} .type-post q {font-weight:bold;} .type-post q:before {content:' “';} .type-post q:after {content:'” ';} .type-post s {text-decoration:line-through;} .type-post del {text-decoration:line-through;} .type-post figure {margin:0;} .type-post p {margin:0 0 3.2em 0;} .type-post ul, .type-post ol {margin:0 0 2em 1em; padding-left:1.6em;} .type-post ul ul, .type-post ul ol, .type-post ol ul, .type-post ol ol {margin-bottom:0;} .type-post ul li {list-style:disc outside none;} .type-post ul ul li {list-style:circle outside none;} .type-post ul ol li {list-style-type:lower-roman;} .type-post ol li {list-style:decimal outside none;} .type-post ol ol li {list-style-type:lower-roman;} .type-post ol ul li {list-style:circle outside none;} .type-post ul ul, .type-post ul ol, .type-post ol ul, .type-post ol ol {} .type-post dl {margin:0 0 2em 0; padding-left:0.8em;} .type-post dl dt {margin:0; position:relative; padding-left:1.6em; text-indent:-1.6em; font-weight:bold;} .type-post dl dt:before {content:'\e074'; margin:0 0.6em 0 0; font-family:"linea-arrows-10"; vertical-align:bottom;} .type-post dl dt:not(:first-child) {} .type-post dl dt dfn {display:block;} .type-post dl dd {margin:0 0 1em 0; padding-left:1.6em;} .type-post dl dd:last-child {margin-bottom:0;} .type-post dl dd > * {margin-bottom:0;} .type-post hr {border-bottom:1px solid #ccc; margin:0 0 2em 0;} .type-post img {max-width:100%; height:auto;} .type-post img.border { border:1px solid rgba(0,0,0,0.2); box-shadow:0 2px 3px rgba(0,0,0,0.2); -webkit-transition:0.2s ease-in-out; -moz-transition:0.2s ease-in-out; -ms-transition:0.2s ease-in-out; -o-transition:0.2s ease-in-out; transition:0.2s ease-in-out; } .type-post .box {border:1px solid #eee; clear:both; padding:2em; margin:0 0 2em 0;} .type-post .box:after {content:""; clear:both; display:block; height:0; visibility:hidden;} .type-post .box > *:last-child {margin:0;} /******************/ /******************/ /* page.php *******/ /******************/ /******************/ /* archive.php ****/ .archives-characters {clear:both;} .archives-characters ul {margin:0 0 0;} .archives-characters ul li {clear:both; margin:0; margin-bottom:calc(60px + 4%); padding:0 0 0 0; position:relative;} .archives-characters ul li:before {content:""; clear:both; display:block; width:240px; height:8px; /*border-width:0 0 8px; border-style:solid;*/ background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDQiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojNTU1O308L3N0eWxlPjwvZGVmcz48Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjQiIGN5PSIyIiByPSIyIi8+PC9zdmc+') 0 0 repeat; margin:0 auto; margin-bottom:calc(60px + 4%); } .archives-characters ul li .ac-thumbnail {width:32%; height:auto; float:left; position:relative; display:block; padding:0 0 0 20px; margin-top:-5%;} .archives-characters ul li .ac-thumbnail a {display:block;} .archives-characters ul li .ac-thumbnail img {width:100%; height:auto; transition:0.4s ease-in-out;} .archives-characters ul li .ac-thumbnail img:hover {transform:scale(1.1,1.1)} .archives-characters ul li .ac-thumbnail i {position:absolute; bottom:-0.5em; left:50%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%); text-align:center; color:#ff9b19; font-size:41px; font-size:4.1rem; white-space:nowrap; display:none; } .archives-characters ul li .ac-bg {display:block; position:absolute; top:-10%;; right:0; color:#999; opacity:0.3; transform:rotate(-12deg); z-index:1;} .archives-characters ul li .ac-bg i {font-size:91px; font-size:9.1rem; font-size:7vw;} .archives-characters ul li dl {margin:0 0 0 36%; overflow:hidden; position:relative;} .archives-characters ul li dl dt {font-size:25px; font-size:2.5rem; font-weight:bold; margin:0 0 12px 0; color:#ff9b19; line-height:1.6;} .archives-characters ul li dl dt b {font-size:35px; font-size:3.5rem; color:#fff; display:block;} .archives-characters ul li dl dt span {font-size:0.6em;} .archives-characters ul li dl dd {} .archives-characters ul li dl dd.ac-description {margin:0 0 20px 0;} .archives-characters ul li dl dd.ac-link {font-size:15px; font-size:1.5rem;} .archives-characters ul li dl dd.ac-link span {display:inline-block; text-align:center; margin:0 20px 0 0;} .archives-characters ul li dl dd.ac-link span a {display:block; padding:8px 12px; background:#ff9b19; color:#19140a; width:100%; min-width:140px; font-weight:bold; border-radius:2px;} .archives-characters ul li dl dd.ac-link span a:hover {background:#ffb900;} @media screen and (max-width:1200px) { .archives-characters ul li .ac-bg i {font-size:9vw;} .archives-characters ul li .ac-thumbnail {width:30%;} .archives-characters ul li dl {margin:0 0 0 40%;} } @media screen and (max-width:900px) { .archives-characters ul li .ac-bg i {font-size:11vw;} .archives-characters ul li .ac-thumbnail {width:40%;} .archives-characters ul li dl {margin:0 0 0 46%;} } @media screen and (max-width:760px) { .archives-characters ul li {margin:0 0 120px 0; padding:0 0 0 80px 0;} .archives-characters ul li .ac-bg {top:0; right:inherit; transform:rotate(0deg); position:relative; text-align:center; opacity:1;} .archives-characters ul li .ac-thumbnail {width:100%; float:none; padding:0 20px; margin:0 0 40px 0;} .archives-characters ul li .ac-thumbnail img {width:80%; max-width:80%; height:auto; display:block; margin:0 auto;} .archives-characters ul li dl {width:100%; margin:0;} .archives-characters ul li dl dt {text-align:center; margin:0 0 20px 0; font-size:19px; font-size:1.9rem;} .archives-characters ul li dl dt b {font-size:25px; font-size:2.5rem;} .archives-characters ul li dl dd.ac-link {display:table; table-layout:fixed; width:100%; border-spacing:8px 0; padding:0 40px;} .archives-characters ul li dl dd.ac-link span {display:table-cell;} } @media screen and (max-width:400px) { .archives-characters ul li dl dd.ac-link {padding:0;} } /******************/ /******************/ /* comments.php ***/ /******************/ /******************/ /* Materials ******/ .btn a { display:inline-block; padding:12px 24px; margin:0; line-height:1; text-align:center; white-space:nowrap; vertical-align:middle; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none; border:1px solid #ff9b19; border-radius:2px; background-color:#ff9b19; color:#000; cursor:pointer; } .btn a:hover {background-color:#ffb900; color:#000;} .btn.btn-small a {padding:4px 12px; min-width:30px; font-size:0.8em;} .btn.btn-large a {padding:20px 12px; width:300px; max-width:100%;} .border {border:1px solid #ccc;} /******************/ /******************/ /* Column System **/ .col {width:100%;} .col:after {content:""; clear:both; display:block; height:0; visibility:hidden;} .col-2, .col-3, .col-4, .col-5, .col-6 {float:left; padding:0; margin:0 2% 2% 0;} .col-2 {width:49%; /*47.5% - 49%*/} .col-3 {width:32%; /*30% - 32%*/} .col-4 {width:23.5%; /*20% - 23.5%*/} .col-5 {width:18.4%; /*15% - 18.4%*/} .col-6 {width:15%; /*12.5% - 15%*/} .col-2:nth-child(even), .col-3:nth-child(3), .col-3:nth-child(6), .col-4:nth-child(4), .col-4:nth-child(8), .col-5:nth-child(5), .col-5:nth-child(10), .col-6:last-child {float:right; margin:0 0 2% 0;} .col-2:nth-child(odd), .col-3:nth-child(2), .col-3:nth-child(5), .col-4:nth-child(3), .col-4:nth-child(7), .col-5:nth-child(4), .col-5:nth-child(9), .col-6:nth-child(5), .col-7:nth-last-child(2) {margin:0 0 2% 0;} .col-2:nth-child(3), .col-3:nth-child(4), .col-4:nth-child(5), .col-5:nth-child(6), .col-6:nth-child(7) {clear:both;} /******************/ /* responsive-table */ .r-table, .responsive-table {overflow:scroll; width:100%; word-break:normal;} /******************/ /******************/ /* breadcrumbs ****/ /******************/ /******************/ /* navigation *****/ .navigation {clear:both; max-width:1200px; margin:0 auto; position:relative; line-height:1;} .navigation:after {content:""; clear:both; display:block;} /******************/ /* page-links *****/ .page-links {clear:both; text-align:center; margin:0 0 40px 0;} .page-links:after {content:""; clear:both; display:block; height:0; visibility:hidden;} .page-links span { padding:8px 12px; margin:5px; border:1px solid #161514; background:#161514; color:#fff; } .page-links a span {border:1px solid #555; color:#555; background:transparent;} .page-links a:hover span {border:1px solid #ff9b19; color:#ff9b19;} /******************/ /******************/ /* wp-pagenavi ****/ /******************/ /******************/ /* Plugins *******/ /******************/ /******************/ /******************/ /* noscript *******/ /******************/ /******************/ /* fonts **********/ i {font-family:'Henny Penny', cursive;} /******************/ /******************/ /******************/ /* Media Query ****/ @media screen and (max-width:800px) { #footer-logo h2 img {max-width:240px; height:auto;} #post-information table th, #post-information table td {display:block;} #post-information table th {border-bottom:0; text-align:left; padding-bottom:0; border-color:#555;} #post-information table td {border-top:0; border-bottom:1px solid #555; padding:12px 12px 32px;} } @media screen and (max-width:600px) { body {font-size:17px; font-size:1.7rem;} .section h3 {font-size:31px; font-size:3.1rem;} } @media screen and (max-width:520px) { #footer-link ul li {width:80px; height:20px;} #footer-link ul li a {background-size:80px 20px;} } /******************/ /******************/ /* keyframes ******/ @-webkit-keyframes cloud { 0% {-webkit-transform: rotateZ(0deg) translate3d(0,1vw,0) rotateZ(0deg);} 100% {-webkit-transform: rotateZ(360deg) translate3d(0,1vw,0) rotateZ(-360deg);} } @-moz-keyframes cloud { 0% {-moz-transform: rotateZ(0deg) translate3d(0,1vw,0) rotateZ(0deg);} 100% {-moz-transform: rotateZ(360deg) translate3d(0,1vw,0) rotateZ(-360deg);} } @-ms-keyframes cloud { 0% {-ms-transform:rotateZ(0deg) translate3d(0,1vw,0) rotateZ(0deg);} 100% {-ms-transform: rotateZ(360deg) translate3d(0,1vw,0) rotateZ(-360deg);} } @keyframes cloud { 0% {transform: rotateZ(0deg) translate3d(0,1vw,0) rotateZ(0deg);} 100% {transform: rotateZ(360deg) translate3d(0,1vw,0) rotateZ(-360deg);} } @-webkit-keyframes wave { 0% {-webkit-transform: rotateZ(0deg) translate3d(0,2%,0) rotateZ(0deg);} 100% {-webkit-transform: rotateZ(360deg) translate3d(0,2%,0) rotateZ(-360deg);} } @-moz-keyframes wave { 0% {-moz-transform: rotateZ(0deg) translate3d(0,2%,0) rotateZ(0deg);} 100% {-moz-transform: rotateZ(360deg) translate3d(0,2%,0) rotateZ(-360deg);} } @-ms-keyframes wave { 0% {-ms-transform:rotateZ(0deg) translate3d(0,2%,0) rotateZ(0deg);} 100% {-ms-transform: rotateZ(360deg) translate3d(0,2%,0) rotateZ(-360deg);} } @keyframes wave { 0% {transform: rotateZ(0deg) translate3d(0,2%,0) rotateZ(0deg);} 100% {transform: rotateZ(360deg) translate3d(0,2%,0) rotateZ(-360deg);} } /* end ************/ /******************/ /******************/