@charset "utf-8"; /****************************************************************** Theme Name: stork19 Theme URI: https://open-cage.com/stork19/ Description: ストークの最新モデル。誰が使っても美しいデザインのサイトがつくれます。使い方はドキュメントをご覧ください。 Version: 1.2.0 Author: opencage Author URI: https://open-cage.com/ License: GNU General Public License License URI: licence.txt ******************************************************************/ /********************* common style *********************/ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size: 103%; line-height: 1.9; letter-spacing: .3px; color: #3e3e3e; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-wrap: break-word; background: #f7f7f7; } .gf { font-family: 'Concert One', "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } .gf_UbuntuCon .gf { font-family: 'Ubuntu Condensed', "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; letter-spacing: 0.02em; } .gf_Lora .gf { font-family: 'Lora', serif; } .gf_Lobster .gf { font-family: 'Lobster', "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:focus{outline:thin dotted}a:active,a:hover{outline:0}a img{-webkit-backface-visibility:hidden;backface-visibility:hidden}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}.strong,b,strong{font-weight:700}.em,dfn,em{font-style:italic}hr.wp-block-separator:not([class*="is-style-"]){width: 160px;}hr:not(.wp-block-separator){margin:1.8em 0;border-width:1px 0 0;border-style:dashed}p{-webkit-hyphens:auto;-epub-hyphens:auto;-moz-hyphens:auto;hyphens:auto}code,kbd,pre,samp{font-family:Consolas,Courier New,Courier,Monaco,monospace}code,kbd,samp{font-size:95%;padding:.05em .4em;border-radius:3px;background:#f6f6f6;color:#444}pre{white-space:pre-wrap;margin:0}q{quotes:"\201C" "\201D" "\2018" "\2019"}q:after,q:before{content:'';content:none}.small,small,sub,sup{font-size:75%}sub,sup{line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:0 0 1em}dd{margin:0}menu{padding:0 0 0 40px}ol,ul{padding:0;list-style-type:none}nav ol,nav ul{list-style:none;list-style-image:none}img{border:0;vertical-align:bottom;max-width:100%;height:auto}svg:not(:root){overflow:hidden}figure{margin:0}.field,input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{display:block;padding:10px 2%;font-size:1em;color:#666;border:3px solid rgba(66,66,66,.3);border-radius:1px;vertical-align:middle;max-width:96%;background-color:#fff;-webkit-transition:background-color .24s ease-in-out;transition:background-color .24s ease-in-out;-webkit-appearance:none;appearance:none;border-radius:5px}#main .field,#main input[type="color"],#main input[type="date"],#main input[type="datetime"],#main input[type="datetime-local"],#main input[type="email"],#main input[type="month"],#main input[type="number"],#main input[type="password"],#main input[type="search"],#main input[type="tel"],#main input[type="text"],#main input[type="time"],#main input[type="url"],#main input[type="week"],#main select,#main textarea{width:300px}#main textarea{width:100%}.field:active,.field:focus,input[type="color"]:active,input[type="color"]:focus,input[type="date"]:active,input[type="date"]:focus,input[type="datetime"]:active,input[type="datetime"]:focus,input[type="datetime-local"]:active,input[type="datetime-local"]:focus,input[type="email"]:active,input[type="email"]:focus,input[type="month"]:active,input[type="month"]:focus,input[type="number"]:active,input[type="number"]:focus,input[type="password"]:active,input[type="password"]:focus,input[type="search"]:active,input[type="search"]:focus,input[type="tel"]:active,input[type="tel"]:focus,input[type="text"]:active,input[type="text"]:focus,input[type="time"]:active,input[type="time"]:focus,input[type="url"]:active,input[type="url"]:focus,input[type="week"]:active,input[type="week"]:focus,select:active,select:focus,textarea:active,textarea:focus{background-color:#fbfaf2}input[type=password]{letter-spacing:.3em}textarea{max-width:100%;min-height:90pt;line-height:1.5}select{-webkit-appearance:none;background-image:url(images/select_arrow.png);background-repeat:no-repeat;background-position:97.5% center;background-size:9px}@media only screen and (max-width:480px){#main .field,#main input[type="color"],#main input[type="date"],#main input[type="datetime"],#main input[type="datetime-local"],#main input[type="email"],#main input[type="month"],#main input[type="number"],#main input[type="password"],#main input[type="search"],#main input[type="tel"],#main input[type="text"],#main input[type="time"],#main input[type="url"],#main input[type="week"],#main select,#main textarea{width:auto}}@media (-ms-high-contrast:none),screen and (-ms-high-contrast:active){.field,input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{width:92%;max-width:92%}}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{margin:0}button,input{line-height:normal}button,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;text-transform:none}select::-ms-expand{display:none}select{line-height:1.2}button,html input[type="button"],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;font-size:.95em;padding:8px 20px;background:#666;color:#fff;border:0;border-radius:5px}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*{-webkit-box-sizing:border-box;box-sizing:border-box}.image-replacement,.ir{text-indent:100%;white-space:nowrap;overflow:hidden}.cf,.comment-respond,.widget ul li{zoom:1}.cf:after,.cf:before,.comment-respond:after,.comment-respond:before{content:"";display:table}.cf:after,.comment-respond:after{clear:both}p{-ms-word-wrap:break-word;word-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;hyphens:auto;-webkit-hyphenate-before:2;-webkit-hyphenate-after:3}#submit,.blue-btn{display:inline-block;position:relative;font-size:90%;font-weight:400;padding:1em;border-radius:4px;border:0;cursor:pointer;-webkit-transition:background-color .14s ease-in-out;transition:background-color .14s ease-in-out}#submit,#submit:focus,#submit:hover,.blue-btn{text-decoration:none;color:#fff}.h1,.h2,.h3,.h4,.h5,h1,h2,h3,h4,h5{text-rendering:optimizelegibility; letter-spacing: .3px;}.h1 a,.h2 a,.h3 a,.h4 a,.h5 a,h1 a,h2 a,h3 a,h4 a,h5 a{text-decoration:none}.h1,h1{font-size:1.9em;line-height:1.333em;font-weight:700}.h2,h2{font-size:1.5em;font-weight:700;line-height:1.4em;margin-bottom:.375em}.h3,h3{font-size:1.3em}.h3,.h4,h3,h4{font-weight:700}.h4,h4{font-size:1.2em}.h5,h5{font-size:1em;font-weight:700;line-height:2em;text-transform:uppercase;letter-spacing:1px} /********************* animation *********************/ @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; } } @keyframes blink { 0% { opacity: .2; } 100% { opacity: .9; transform: translateX(2px); } } .fadeIn { -webkit-animation: fadeIn 0.4s ease 0s 1 both; animation: fadeIn 0.6s ease 0s 1 both; } .fadeIn,.fadeInUp { backface-visibility: hidden; } .fadeInUp { -webkit-animation: fadeInUp 0.8s ease .6s 1 both; animation: fadeInUp 0.8s ease 0s 1 both; } .fadeInDown { -webkit-animation: fadeInDown 0.7s ease .4s 1 both; animation: fadeInDown 0.7s ease 0s 1 both; } .delay-0_2s { animation-delay: 0.2s; } .delay-0_4s { animation-delay: 0.4s; } .delay-0_5s { animation-delay: 0.5s; } .delay-0_6s { animation-delay: 0.6s; } .delay-0_8s { animation-delay: 0.8s; } .delay-1s { animation-delay: 1s; } /********************* Base style *********************/ .wrap { max-width: 1166px; margin: 0 auto; } a { color: #1bb4d3; } a:hover { color: #E69B9B; } a, a img { -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } a img { -webkit-backface-visibility: hidden; backface-visibility: hidden; } a:hover img { opacity: 0.8; } a:link, a:visited:link { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3); } .wp-caption, .wp-block-image figure { max-width: 100%; background: #fff; display: inline-block; padding: 5px; margin-bottom: 1.2em; border: 1px solid rgba(0, 0, 0, .08); border-radius: 3px; } .wp-caption img, .entry-content .wp-caption img, .entry-content .wp-block-image img { max-width: 100%; margin-bottom: 0; } .wp-caption .wp-caption-text, .wp-block-image figcaption { font-size: 80%; margin: 4px 0; text-align: center; } .wp-block-image.is-style-stk_shadow_s img { box-shadow: 1px 2px 10px rgba(0,0,0,0.2); } .wp-block-image.is-style-stk_shadow_l img { box-shadow: 5px 10px 20px rgba(0,0,0,0.2); margin-bottom: 1em; } .wp-block-image.is-style-stk_border { padding: 5px; border: 1px solid rgba(0, 0, 0, .09); border-radius: 3px; } .gallery, .wp-block-gallery { display: flex; flex-flow: row wrap; justify-content: left; margin-bottom: calc(1.5 * 1rem); } .gallery-item, .blocks-gallery-item { display: inline-block; margin-right: 5px; margin-bottom: 5px; text-align: center; vertical-align: top; width: 100%; } .entry-content .gallery-item img { margin: 0; } .blocks-gallery-grid .blocks-gallery-image, .blocks-gallery-grid .blocks-gallery-item, .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item, .blocks-gallery-grid .blocks-gallery-image:nth-of-type(2n), .blocks-gallery-grid .blocks-gallery-item:nth-of-type(2n), .wp-block-gallery .blocks-gallery-image:nth-of-type(2n), .wp-block-gallery .blocks-gallery-item:nth-of-type(2n) { margin: 0 5px 5px 0!important; } .gallery-columns-2 .gallery-item, .wp-block-gallery.columns-2 .blocks-gallery-item{ max-width: calc((100% - 5px * 1) / 2); } .gallery-columns-2 .gallery-item:nth-of-type(2n+2), .wp-block-gallery.columns-2 .blocks-gallery-item:nth-of-type(2n+2) { margin-right: 0!important; } .gallery-columns-3 .gallery-item, .wp-block-gallery.columns-3 .blocks-gallery-item { max-width: calc((100% - 5px * 2) / 3); } .gallery-columns-3 .gallery-item:nth-of-type(3n+3), .wp-block-gallery.columns-3 .blocks-gallery-item:nth-of-type(3n+3) { margin-right: 0!important; } .gallery-columns-4 .gallery-item, .wp-block-gallery.columns-4 .blocks-gallery-item { max-width: calc((100% - 5px * 3) / 4); } .gallery-columns-4 .gallery-item:nth-of-type(4n+4), .wp-block-gallery.columns-4 .blocks-gallery-item:nth-of-type(4n+4) { margin-right: 0!important; } .gallery-columns-5 .gallery-item, .wp-block-gallery.columns-5 .blocks-gallery-item { max-width: calc((100% - 5px * 4) / 5); } .gallery-columns-5 .gallery-item:nth-of-type(5n+5), .wp-block-gallery.columns-5 .blocks-gallery-item:nth-of-type(5n+5) { margin-right: 0!important; } .gallery-columns-6 .gallery-item, .wp-block-gallery.columns-6 .blocks-gallery-item { max-width: calc((100% - 5px * 5) / 6); } .gallery-columns-6 .gallery-item:nth-of-type(6n+6), .wp-block-gallery.columns-6 .blocks-gallery-item:nth-of-type(6n+6) { margin-right: 0!important; } .gallery-columns-7 .gallery-item, .wp-block-gallery.columns-7 .blocks-gallery-item { max-width: calc((100% - 5px * 6) / 7); } .gallery-columns-7 .gallery-item:nth-of-type(7n+7), .wp-block-gallery.columns-7 .blocks-gallery-item:nth-of-type(7n+7) { margin-right: 0!important; } .gallery-columns-8 .gallery-item, .wp-block-gallery.columns-8 .blocks-gallery-item { max-width: calc((100% - 5px * 7) / 8); } .gallery-columns-8 .gallery-item:nth-of-type(8n+8), .wp-block-gallery.columns-8 .blocks-gallery-item:nth-of-type(8n+8) { margin-right: 0!important; } .gallery-item:last-of-type { padding-right: 0; } .gallery-caption, .blocks-gallery-item figcaption { display: block; font-size: 80%; line-height: 1.6; margin: 0; padding: 0.3em; } .gallery-item > div > a { display: block; line-height: 0; box-shadow: 0 0 0 0 transparent; } iframe { max-width: 100%; } .wp-block-embed.alignwide iframe, .wp-block-embed.alignfull iframe { max-width: initial; } .txt_c { text-align: center; } .txt_left { text-align: left; } .txt_right { text-align: right; } .txt_s { font-size: 80%; } .txt_m { font-size: 150%; } .txt_l { font-size: 250%; } .txt_ll { font-size: 350%; } .alignleft, img.alignleft { margin-right: 2.5%; display: inline; float: left; } .alignright, img.alignright { margin-left: 2.5%; display: inline; float: right; } .aligncenter, img.aligncenter { margin-right: auto; margin-left: auto; display: block; clear: both; } .wp-block-button.alignright, .wp-block-button.alignleft{ display: block; float: none; } /********************* header style *********************/ #header { width: 100%; } .bgnormal #header { background: none; } /* headder fix style */ .fixhead-active #header { position: sticky!important; position: -webkit-sticky!important; z-index: 9999; top: 0; padding: 0; } .bgfull .fixhead-active #header { margin-top: 0!important; } #header a { text-decoration: none; } #header a.nav_btn:hover { color: inherit; } #header a:hover { opacity: 0.7; } .bgfull #header #inner-header { background: none; } #header .site_description { font-size: 10px; margin: 4px 0 0; line-height: 1.2; width: 100%; } .header-info { margin: auto; } .header-info a { display: block; font-size: 75%; text-decoration: none; text-align: center; color: #fff; background: #F55E5E; padding: .5em; font-weight: bold; } .header-info a i, .header-info a span{ vertical-align: middle; } .header-info a:hover { color: #fff; opacity: 0.9; } #site__logo img { width: auto; height: auto; margin: 5px 0; } #site__logo.fs_ss { font-size: 70%; } #site__logo.fs_s { font-size: 85%; } #site__logo.fs_l { font-size: 150%; } #site__logo.fs_ll { font-size: 200%; } #site__logo.fs_ss img { max-height: 18px; } #site__logo.fs_s img { max-height: 25px; } #site__logo.fs_m img { max-height: 35px; } #site__logo.fs_l img { max-height: 60px; } #site__logo.fs_ll img { max-height: inherit; } #site__logo .h1 { margin: 0; padding: 0; } #g_nav ul ul .gf { display: none!important; } .nav_btn { width: 3em; padding: 8px 0; border: none; background: none; text-align: center; color: #fff; display: block; line-height: 1; text-decoration: none; text-transform: uppercase; } .nav_btn:before, .search_btn:before { font-size: 140%; height: 1.2em; font-family: "Font Awesome 5 Free"; font-weight: 900; content: '\f0c9'; width: 100%; display: block; } .search_btn:before { content: '\f002'; } .nav_btn .text { font-size: 9px; display: block; transform: scale(0.9); } /* header search */ .searchbox::before { content: "キーワードで記事を検索"; } .searchbox .searchform { position: relative; } .searchbox input[type="search"] { width: 100%; -webkit-appearance: none; appearance: none; line-height: 1.2; font-size: 16px; padding: 17px 1.5%; } .searchbox button.searchsubmit { color: initial; position: absolute; right: 3px; top: 50%; transform: translateY(-49%); border: 0; background: none; display: inline-block; width: 1.8em; height: 100%; padding: 0 2%; font-size: 160%; } @media only screen and (max-width: 767px) { #inner-header { position: relative; padding: 0.2em 0; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } #site__logo { order: 2; flex-grow: 2; max-width: calc(100% - 110px); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 50px; margin-right: auto; margin-left: auto; } #inner-header .nav_btn { position: absolute; top: 0; left: 0; width: 45px; padding: 10px 0; margin-right: auto; order: 1; } #inner-header .nav_btn.search_btn { left: auto; right: 0; order: 3; margin-left: auto; margin-right: inherit; } #g_nav { display: block; width: 100%; order: 4; } /* SP gnavi Scroll Style */ #g_nav { position: relative; max-width: 1166px; padding: .2em 0 .2em .5em; font-size: 70%; font-weight: bold; overflow: auto; -webkit-overflow-scrolling: touch; } #g_nav a { color: #ffffff; text-decoration: none; display: block; padding: .3em .9em; background: rgba(255, 255, 255, .11); border-radius: 1em; } #g_nav > ul { width: 100%; margin: 0; display: flex; overflow-x: scroll; white-space: nowrap; } #g_nav > ul:after { font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 160%; content: "\f101"; color: #fff; position: absolute; text-shadow: 0 0 6px rgba(0, 0, 0, .3); right: 3px; margin-top: -0.22em; opacity: .5; -webkit-animation: blink 1.2s ease infinite alternate; animation: blink 1.2s ease infinite alternate; } #g_nav ul ul, #g_nav li .gf { display: none; } #g_nav li { padding-right: .8em; } } @media only screen and (min-width: 768px) { #header { position: relative; z-index: 999; } #inner-header { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; padding: 0 0 0 0.9em; } #site__logo { margin-right: auto; } #g_nav > ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0; } #g_nav > ul > li .gf { display: block; font-weight: normal; font-size: 84%; margin-top: -0.5em; opacity: 0.8; } #g_nav > ul > li { font-size: 68%; flex-flow: row wrap; font-weight: bold; } #g_nav > ul > li > a { display: block; padding: 0.7em 1em; text-align: center; position: relative; } #g_nav > ul > li > a::after { content: ""; display: block; position: absolute; opacity: 0; left: 50%; bottom: 4px; transition: .3s ease-out; width: 10%; border-bottom: 1px solid; } #g_nav > ul > li > a:hover::after { opacity: 0.5; left: 5%; width: 90%; } /* nav second~ */ #g_nav ul.sub-menu, #g_nav ul.children { font-weight: bold; margin: 0; text-align: left; position: absolute; z-index: 8999; box-shadow: 0 0 15px rgba(100, 100, 100, 0.3); } #g_nav ul.sub-menu li, #g_nav ul.children li { position: relative; overflow: hidden; line-height: 1.2; height: 0; transition: .18s; } #g_nav li:hover > ul.sub-menu > li, #g_nav li:hover > ul.children > li { overflow: visible; height: 3em; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } #g_nav ul.sub-menu a, #g_nav ul.children a { display: block; width: 240px; padding: 0.9em 0.5em; } #g_nav ul.sub-menu a:hover, #g_nav ul.children a:hover { opacity: 0.8; } #g_nav ul.sub-menu li:last-child a, #g_nav ul.children li:last-child a { border-bottom: 0; } #g_nav ul.sub-menu ul, #g_nav ul.children ul { top: 0; left: 100%; } #inner-header .menu_btn { display: none; } .bgnormal #header { position: relative; z-index: 1; } .headercenter #inner-header { justify-content: center; flex-wrap: wrap; padding: 0; text-align: center; position: relative; } .headercenter #site__logo { width: 100%; margin: 10px auto; } .headercenter #inner-header .search_btn { position: absolute; right: 0; top: 0.3em; } .headercenter #inner-header .menu_btn { display: inline-block; position: absolute; left: 0; top: 0.3em; } } @media only screen and (min-width: 1167px) { .bgnormal #header { margin: 25px auto 0; padding: 0; } .bgnormal .header-info { max-width: 1166px; position: relative; z-index: 4; font-weight: bold; } .bgnormal #header { position: relative; z-index: 5; } .bgnormal #custom_header { margin-top: -30px; box-shadow: 0 0 100px rgba(0, 0, 0, 0.05) inset; } .bgfull.post-template-single-viral #content { margin-top: 0; } #custom_header{ margin-bottom: 25px; } #content{ margin-top: 25px; margin-bottom: 25px; } .bgnormal #custom_header_img { max-width: 1166px; margin: 25px auto; } #g_nav > ul > li { font-size: 78%; } } @media only screen and (max-width: 1166px) { #inner-content.wide .alignwide, #inner-content.viral .alignwide, #inner-content.wide .alignfull, #inner-content.viral .alignfull{ width: calc(100% + 8.7%); max-width: calc(100% + 8.7%); margin-left: -4.35%; } /* YouTube Responsive */ .youtube-container, .wp-block-embed-vimeo { position: relative; width: 100%; padding-top: 56.25%; } .youtube-container iframe, .wp-block-embed-vimeo iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; } } /* breadcrumb */ #breadcrumb { font-size: 70%; background: #ffffff; padding: 1em; } .bgfull.post-template-single-viral #header + #breadcrumb { margin-bottom: 0; } #breadcrumb ul { display: flex; flex-wrap: wrap; margin: 0; } #breadcrumb li:first-child { margin-left: 0; } #breadcrumb li { margin-left: 0.5em; } #breadcrumb li:after { content: '/'; margin-left: 0.5em; } #breadcrumb li:last-child::after { display: none; } #breadcrumb li.bc_homelink a::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f015"; display: inline-block; margin-right: 0.3em; transform: scale(1.3); } #breadcrumb li a { color: inherit; text-decoration: none; } #breadcrumb li a:hover { opacity: .5; } /* toppage header */ #custom_header { text-align: center; position: relative; background-position: center center; background-size: cover; background-repeat: no-repeat; } #custom_header_img { text-align: center; margin-bottom: 1em; } #custom_header_img img { margin: -1px auto 0; } #custom_header .overlay { content: ""; display: block; width: 100%; height: 100%; position: absolute; z-index: 0; top: 0; left: 0; background: #000; opacity: 0.05; } #custom_header .wrap { position: relative; z-index: 1; padding: 13% 5% 12%; } #custom_header .en { font-size: 170%; } #custom_header .ja { font-weight: bold; font-size: 85%; margin: 0 0.5em 1.5em; } #custom_header .btn-wrap { margin-bottom: 0; } #custom_header .btn-wrap a { width: 340px; border: none; } /* pickup content */ #pickup_content{ margin: 0.5em auto; max-width: 1166px; } #pickup_content ul { display: flex; justify-content: center; align-items: center; margin: 0; font-size: 80%; font-weight: 700; } #pickup_content li { width: 33%; margin: 0.5em; position: relative; } .pickup_content__link{ display: block; color: #fff; text-decoration: none; box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); } .pickup_content__link:hover{ color: #fff; } .pickup_content__link::before, .pickup_content__link::after{ position: absolute; z-index: 2; content: ""; display: inline-block; width: 3em; height: 3em; border-color: #fff; border-width: 1px; } .pickup_content__link::before{ border-top-style: solid; border-left-style: solid; top: 5px; left: 5px; } .pickup_content__link::after{ border-bottom-style: solid; border-right-style: solid; bottom: 5px; right: 5px; } .pickup_content__text span, .pickup_content__link::before, .pickup_content__link::after { -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } .pickup_content__text { position: absolute; font-weight: bold; top: 0; left: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; background: rgba(14, 14, 14, 0.4); } .pickup_content__text span { border-radius: 2em; border: 1px solid; padding: 0.4em 0.8em; text-align: center; line-height: 1.2; min-width: 50%; max-width: 90%; position: relative; overflow: hidden; box-shadow: 0 0 10px -4px; text-shadow: 0 1px 4px #111; } .pickup_content__text span::before{ content: ""; display:block; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: #fff; opacity: 0.25; } @media only screen and (min-width: 768px) { .pickup_content__link:hover { transform: translateY(-5px); box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15); } .pickup_content__link:hover .pickup_content__text span { box-shadow: 0 0 20px 3px; } .pickup_content__link:hover::before, .pickup_content__link:hover::after{ width: 4em; height: 4em; } } @media only screen and (max-width: 767px) { #pickup_content ul{ flex-wrap: wrap; } #pickup_content li{ width: calc(50% - 1.5em); font-size: 80%; } } @media only screen and (max-width: 480px) { #custom_header .wrap { padding: 20% 5%; } } @media only screen and (min-width: 1166px) { #custom_header .en { font-size: 260%; } #custom_header .ja { font-size: 95%; } #custom_header .header-text { max-width: 600px; margin: auto; } #custom_header.textright .header-text { margin-right: 0; } #custom_header.textleft .header-text { margin-left: 0; } #pickup_content ul{ margin: 10px -7px -5px; } .post-template-single-viral #pickup_content ul{ margin: 10px -7px; } } /********************* footer style *********************/ #inner-footer { font-size: 88%; padding: 4%; } .bgfull #inner-footer { margin-bottom: 0; background: none; } #page-top { position: fixed; right: 20px; bottom: -100px; z-index: 99999; transition: all 0.2s ease-out; } #page-top.pt-active { bottom: 10px; } #page-top a { background: rgba(51, 51, 51, 0.5) no-repeat; text-decoration: none; width: 55px; height: 55px; border-radius: 3px; text-align: center; line-height: 55px; padding: 0; display: block; color: #fff; } #page-top a.pt-button::before { font-family: "Font Awesome 5 Free"; content: "\f077"; font-weight: 900; } @media only screen and (min-width: 768px) { #inner-footer { padding: 35px; } } .copyright { margin: auto; } #footer-bottom { text-align: center; font-size: 90%; } .footer-links { margin: 0 auto 1em; } .footer-links > ul { margin: 0 auto; } .footer-links > ul li { display: inline-block; margin: 0 0.9em 0 0; } .footer-links > ul a { text-decoration: none; } .footer-links > ul .gf { display: none; } .footer-links > ul a::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: '\f105'; margin-right: 2px; } .footer-links > ul ul { display: none; } @media only screen and (min-width: 768px) { #footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; } #footer-top .footerwidget { width: calc( 33.333333% - 1em); } } /********************* content style *********************/ #inner-content { padding: 3% 4%; } #sidebar1 { margin-top: 1.5em; } /* viral post */ #viral-header.entry-header { position: relative; overflow: hidden; color: #fff; z-index: -1; background-position: center center; background-size: cover; } #viral-header.entry-header:before { content: ""; background: #000; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: .3; } #viral-header.entry-header .wrap { max-width: 780px; padding: 11% 4%; position: relative; } #viral-header.entry-header .eyecatch { width: 260px; float: left; margin-right: 2em; } #viral-header.entry-header .entry-title { font-size: 200%; text-shadow: 0 0 10px rgba(0, 0, 0, 0.29); padding: 0; } #viral-header.entry-header .byline .time__date { text-shadow: 0 0 5px rgba(0, 0, 0, 0.29); } #viral-header + #inner-content { padding-top: 0; } .wp-block-group.has-background { padding: 8% 4%; } .wp-block-group.has-background p:last-child { margin-bottom: 0; } .wp-block-group.has-background .wp-block-group__inner-container{ max-width: 980px; margin: auto; } .wp-block-cover{ min-height: 40vh; } .wp-block-cover .wp-block-cover__inner-container{ max-width: 1100px; } @media only screen and (min-width: 1167px) { .bgnormal #viral-header.entry-header { max-width: 1166px; margin: 0 auto; } .bgnormal #breadcrumb { max-width: 1166px; margin: 25px auto; } #inner-content, .bgfull #header, .bgfull #footer, .bgfull #page-top + #breadcrumb, .bgnormal #header #inner-header, .bgnormal #footer #inner-footer, .bgnormal #breadcrumb, .bgnormal #viral-header.entry-header { box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } #inner-content.wide .alignwide, #inner-content.viral .alignwide{ width: calc(100% + 100px); max-width: calc(100% + 100px); margin-left: -50px; } #inner-content.wide .alignfull { width: calc(100% + 186px); max-width: calc(100% + 186px); margin-left: -93px; } #inner-content.viral .alignfull { width: calc(100% + 438px); max-width: calc(100% + 438px); margin-left: -219px; } .bgnormal #inner-footer { margin: 25px auto; } } @media only screen and (min-width: 980px) { #inner-content { display: flex; justify-content: flex-start; padding: 35px; } #main { margin-right: 2%; width: 728px; max-width: 728px; min-width: 0; } #sidebar1 { font-size: 88%; width: 336px; max-width: 34%; -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-top: 0; margin-left: auto; } #scrollfix{ position: sticky!important; position: -webkit-sticky!important; z-index: 9998; top: 4%; } .fixhead-active #scrollfix{ top: 10%; } .sidebarleft #main { margin-right: 0; margin-left: 2%; order: 2; } .sidebarleft #sidebar1 { order: 1; margin-left: 0; } } @media only screen and (min-width: 768px) { #inner-content.wide #main { max-width: 980px; width: 100%; margin: auto; } #inner-content.viral #main { margin: auto; } } .byline { display: flex; flex-wrap: wrap; font-size: 95%; } .single .byline .cat-name, .byline .time__date, .byline .writer { margin-right: 0.6em; } .time__date { opacity: .6; } .single .byline .cat-name a { text-decoration: none; color: inherit; } .time__date:before { font-family: "Font Awesome 5 Free"; font-weight: normal; content: "\f017"; margin-right: .3em; display: inline-block; transform: scale(1.05); } .time__date.undo:before { content: "\f0e2"; font-weight: 900; } .byline .writer { margin-right: 0; margin-left: auto; font-size: 90%; } .byline .writer .fn{ opacity: .7; } .byline .writer img { display: inline-block; border-radius: 50%; width: 1.6em; margin: 0 3px 0 auto; border: 1px solid #fff; box-shadow: 0 0 5px rgba(102, 102, 102, 0.3); transform: translateY(-2px); } #content p.byline { margin: 0; } .entry-header .entry-title, .entry-header .eyecatch { margin: 0.4em 0; } .eyecatch-caption-text{ opacity: 0.7; font-size: 80%; } @media only screen and (min-width: 1167px) { .single .byline { position: relative; padding-top: 10px; } .single .byline .cat-name { position: absolute; top: -1.7em; left: -3.3em; transform: rotate(-3deg); } .single.sidebarleft .byline .cat-name{ position: relative; top: 0; left: 0; transform: rotate(0deg); } } @media only screen and (max-width: 767px) { #content p.byline { font-size: 72%; } .entry-header .entry-title { font-size: 115%; } #viral-header.entry-header .entry-title { font-size: 130%; } } #content dl, #content ol, #content p, #content ul { letter-spacing: .025em; } .entry-content p { margin: 0 0 1.6em; line-height: 1.8; } .entry-content a[target="_blank"]:after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: '\f35d'; font-size: 95%; margin: 0 3px 0 2px; } .entry-content a.no-icon[target="_blank"]:after { content: none; } .entry-content table { width: 100%; font-size: 90%; margin-bottom: 1.5em; } .wp-block-table.is-style-stripes{ margin-bottom: 1.5em; } .wp-block-table.is-style-stripes table{ margin-bottom: 0; } .wp-block-table.is-style-stripes th{ background: none; padding-bottom: 0.1em; } .entry-content table caption { margin: 0 0 7px; font-size: 75%; opacity: 0.7; text-transform: uppercase; letter-spacing: 1px; } .entry-content tr{ background: #fff; } .entry-content td, .entry-content th { padding: .8em .5em; } .entry-content td { border: 1px solid #ddd; } .entry-content td input { margin: 3px 0; } .entry-content th { background-color: #f7f7f7; background-color: rgba(0, 0, 0, 0.03); border: 1px solid #ddd; } .entry-content blockquote { font-size: 90%; padding: 6% 4% 2%; margin: 2.5em 0 3em; position: relative; border: 1px solid; border-radius: 5px; opacity: .8; } .entry-content blockquote:before, .entry-content blockquote:after { font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; width: 1em; height: 1em; display: block; padding: .2em; text-align: center; font-size: 1.3em; line-height: 1; background: #fff; } .entry-content blockquote:before { content: '\f10d'; left: -.2em; top: -.3em; } .entry-content blockquote:after { content: '\f10e'; right: -.2em; bottom: -.4em; } .entry-content blockquote h1, .entry-content blockquote h2, .entry-content blockquote h3, .entry-content blockquote h4 { margin-top: 0!important; } .wp-block-pullquote blockquote{ border: none; border-top: 4px solid; border-bottom: 4px solid; border-radius: 0; } .wp-block-pullquote blockquote cite{ font-size: 88%; } .wp-block-pullquote blockquote::before, .wp-block-pullquote blockquote::after { content: none; } .entry-content dt { font-weight: bold; margin-bottom: 2%; } .entry-content dd { margin-left: 0; font-size: .95em; margin-bottom: 4%; } .entry-content img { margin-bottom: 1.5em; max-width: 100%; height: auto; } .wp-block-media-text img{ margin-bottom: 0; } .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail { max-width: 100%; height: auto; } .entry-content pre { background: #555; background: rgba(0, 0, 0, 0.7); color: #f8f9fa; font-size: 85%; line-height: 1.3; padding: 1.2em 1.7em; margin: 0.2em 0 2.2em; border-radius: 5px; } .entry-content pre code{ padding: 0; border-radius: 0; background: none; color: inherit; } /* content - h2,3,4 */ .entry-content h2:not(.is-style-stylenone), .homeadd_wrap h2 { position: relative; border: none; font-size: 125%; padding: 1em 1.1em; margin-top: 2.1em; margin-bottom: 1em; -webkit-border-radius: 3px; border-radius: 3px; background: #13acca; color: #ffffff; box-shadow: 0 1px 5px rgba(0, 0, 0, .03); } .homeadd_wrap.homeaddtop .widget:first-child h2.widgettitle { margin-top: 0; } @media only screen and (max-width: 480px) { .entry-content h2:not(.is-style-stylenone), .homeadd_wrap h2, .widgettitle:not(.footerwidget) { margin-left: -0.5em; margin-right: -0.5em; } .entry-content h2:not(.is-style-stylenone), .entry-content h3:not(.is-style-stylenone), .entry-content h4:not(.is-style-stylenone), .homeadd_wrap h2{ font-size: 105%; } .entry-content h5:not(.is-style-stylenone), .entry-content h6:not(.is-style-stylenone), .entry-content h7:not(.is-style-stylenone){ font-size: 100%; } } .entry-content h3:not(.is-style-stylenone) { border-top: 4px solid; border-bottom: 4px solid; padding: .5em .2em; margin-top: 1.8em; } .entry-content h4:not(.is-style-stylenone) { border-left: 4px solid; padding: .5em 0 .5em .8em; margin-top: 1.8em; } .h_boader .entry-content h2:not(.is-style-stylenone), .h_boader .homeadd_wrap h2 { background: none; color: inherit; font-size: 150%; padding: .5em .1em; border-top: 4px solid; border-bottom: 4px solid; border-radius: 0; box-shadow: none; } .h_boader .entry-content h3:not(.is-style-stylenone) { border-width: 2px; border-top: none; font-size: 120%; padding: 0.1em; } .h_boader .entry-content h4:not(.is-style-stylenone) { border-width: 2px; } .h_balloon .entry-content h2:not(.is-style-stylenone)::after, .h_balloon .homeadd_wrap h2:not(.is-style-stylenone)::after { content: ''; position: absolute; border-top: 13px solid #13acca; border-right: 9px solid transparent; border-left: 9px solid transparent; bottom: -11px; left: 5%; } .h_stitch .entry-content h2:not(.is-style-stylenone), .h_stitch .homeadd_wrap h2 { position: relative; } .h_stitch .entry-content h2:not(.is-style-stylenone)::before, .h_stitch .entry-content h2:not(.is-style-stylenone)::after, .h_stitch .homeadd_wrap h2::before, .h_stitch .homeadd_wrap h2::after { content: ""; display: block; position: absolute; top: 3px; left: 0; width: 100%; height: 1px; border-top: 2px dashed #ffffff; opacity: 0.5; } .h_stitch .entry-content h2:not(.is-style-stylenone)::after, .h_stitch .homeadd_wrap h2::after { top: auto; bottom: 3px; } .h_stitch .entry-content h3:not(.is-style-stylenone) { border-top-style: dotted; border-bottom-style: dotted; } .h_stitch .entry-content h4:not(.is-style-stylenone) { border-left-style: dotted; } h2.is-style-stylenone, h3.is-style-stylenone, h4.is-style-stylenone { background: none; border: none; box-shadow: none; position: static; border-radius: 0; padding: 0; margin: 1% 0; } h2.is-style-stylenone{ font-size: 120%; } h3.is-style-stylenone{ font-size: 110%; } h4.is-style-stylenone{ font-size: 100%; } /* content - list */ .entry-content li { list-style: none; position: relative; padding-left: 1.35em; margin: 0.7em 0; } .entry-content li li { margin: 0.6em 0; } .entry-content ul li:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f111"; display: block; position: absolute; left: 2px; top: 1px; transform: scale(0.6); color: #1bb4d3; background: none; } .entry-content ul ul li:before { content: "\f192"; } /* li css option */ .is-style-border_solid{ border: 3px solid rgba(102, 102, 102, 0.5); padding: 1em; margin-left: 0!important; } .is-style-border_dashed{ border: 3px dashed rgba(102, 102, 102, 0.5); padding: 1em; margin-left: 0!important; } .entry-content .is-style-icon_arrow li:before { transform: scale(1.05); content: "\f138"; } .entry-content .is-style-icon_check li:before { transform: scale(0.8); content: "\f00c"; } .entry-content .is-style-icon_check2 li:before { transform: scale(1.1); content: "\f058"; } .entry-content .is-style-icon_ban li:before { transform: scale(1.1); content: "\f05e"; } .entry-content .is-style-icon_star li:before { transform: scale(0.9); content: "\f005"; } .entry-content .is-style-icon_attention li:before { transform: scale(1.1); content: "\f06a"; } .entry-content ol { counter-reset: number; } .entry-content ol[start] { counter-reset: unset; } .entry-content ol li { padding-left: 1.8em; } .entry-content ol ol { margin-left: -0.55em; } .entry-content ol > li:before { counter-increment: number; content: counter(number)!important; background: #1bb4d3; border: 1px solid #1bb4d3; color: #fff; width: 1.5em; height: 1.5em; line-height: 1.5em; font-weight: bold; display: block; text-align: center; border-radius: 50%; position: absolute; transform: scale(0.7); left: 1px; top: 0; } .entry-content ol ol li:before { background: none; content: counter(number) "."!important; border: none; color: inherit; font-size: 130%; opacity: 0.7; } .wp-block-gallery li { padding: 0; margin: 0; } .wp-block-gallery li img { margin-bottom: 0; } .wp-block-gallery li::before { content: none!important; } .cat-name { font-size: 85%; padding: 0.2em 0.5em; /*! line-height: 1.3; */ } .eyecatch { position: relative; text-align: center; } .eyecatch .cat-name { position: absolute; top: -0.1px; right: 0; } .archives-list .eyecatch .cat-name { font-size: 72%; opacity: 0.88; } .archives-list .eyecatch .cat-name:empty { display: none; } .cat-name.cat-id-page:before { content: "PICK UP"; } /* CTA */ .cta-wrap .widget.widget_text { margin-bottom: 0; } .cta-inner { background: #666666; color: #CACACA; padding: 1.5em 5%; margin-bottom: 1.5em; } .cta-inner:not(:first-child) { margin-top: -1.4em; } .page .cta-inner:last-child { margin-bottom: 0; } .cta-inner .inner { width: 94%; max-width: 780px; margin: auto; } .cta-inner .cta_ttl { text-align: center; color: inherit; margin: 1em 0; padding: 0; font-size: 160%; font-weight: bold; background: none; box-shadow: none; } .cta-inner .btn-wrap a { box-shadow: none; margin-top: 1em; } /* postunder recommend, writer */ #single_foot{ display: flex; flex-direction: column; } #related-box a, #np-post a, .author_name a, #author-newpost a, .author_sns a { text-decoration: none; color: inherit; } #related-box ul, #author-newpost ul { display: flex; flex-wrap: wrap; margin: 0 -0.6em; } .related_newpost__li { width: 25%; } .related_newpost__li a { padding: 0.3em 0.6em 1em; } @media only screen and (max-width: 480px) { .related_newpost__li { width: 50%; } } #related-box .h_ttl::after, .author_profile .h_ttl::after, #author-newpost .h_ttl::after { font-size: 11px; margin-left: 1em; vertical-align: middle; } #related-box .h_ttl::after { content: "こちらの記事も人気です！"; } .author_profile .h_ttl { margin-top: 0; } .author_profile .h_ttl::after { content: "この記事を書いた人"; } #author-newpost .h_ttl::after { content: "このライターの最新記事"; } .related_newpost__li { line-height: 1.5; } .related_newpost__li .cat-name { font-size: 10px; } .related_newpost__li a { display: block; margin: 0; } .related_newpost__li .ttl{ font-weight: bold; font-size: 75%; } .related_newpost__li .time__date { font-size: 70%; } @media only screen and (min-width: 768px) { #top_carousel li.slick-slide{ padding-top: 2px; } #top_carousel a:hover, .related_newpost__li a:hover { transform: translateY(-2px); } } @media only screen and (max-width: 767px) { #inner-content .entry-header .eyecatch, .cta-inner, .fb-likebtn { margin-left: -4.35%; margin-right: -4.35%; } .cta-inner .cta_ttl{ font-size: 120%; } .alignleft, img.alignleft, .alignright, img.alignright { max-width: 55%; margin-bottom: 0.5em; } } #authorbox { padding: 4% 5% 1%; margin-bottom: 2%; border: solid 5px #eee; } .author_profile { font-size: 90%; } .author_profile .author_meta { display: flex; } .author_meta .author_img { width: 90px; max-width: 30%; margin-right: 1em; flex-shrink: 0; } .author_meta .author_img img { border: 3px solid #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } .author_info .author_name { font-weight: bold; } .author_info .author_name .userposition { font-size: 70%; display: block; margin-bottom: 1.5em; font-weight: normal; } .author_info .author_description { margin-bottom: 1em; } .author_sns { display: flex; flex-wrap: wrap; justify-content: center; } .author_sns li { margin: 2px 10px; } .author_sns a::before { transform: scale(1.2); display: inline-block; margin-right: 0.3em; color: inherit; font-family: "Font Awesome 5 Brands", "Font Awesome 5 Free"; } .author_sns_li__site a::before { content: "\f0ac"; font-weight: 900; } .author_sns_li__twitter a::before { content: "\f099"; } .author_sns_li__facebook a::before { content: "\f09a"; } .author_sns_li__google a::before { content: "\f0d5"; } .author_sns_li__instagram a::before { content: "\f16d"; } .author_sns_li__youtube a::before { content: "\f167"; } @media only screen and (max-width: 480px) { #authorbox { margin: auto -3%; } .author_profile .author_meta { display: block; } .author_meta .author_img { margin: 1em auto; } .author_meta .author_img img { width: 100%; margin: auto; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.12); } .author_info { font-size: 90%; } .author_meta .author_name { text-align: center; margin-bottom: 0.8em; } } /* post tags */ .np-post-list a { display: flex; align-items: center; margin-bottom: 1em; font-size: 88%; } .np-post-list a .eyecatch { width: 55px; min-width: 55px; } .np-post-list a .ttl{ overflow: hidden; } .np-post-list.prev a .eyecatch { margin-right: 0.7em; } .np-post-list.next a { justify-content: flex-end; } .np-post-list.next a .eyecatch { margin-left: 0.7em; } .np-post-list.prev a::before, .np-post-list.next a::after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0d9"; margin: 0 0.5em; font-size: 120%; } .np-post-list.next a::after { content: "\f0da"; } @media only screen and (min-width: 768px) { .np-post-list.prev a:hover { transform: translate(-2px, -1px); } .np-post-list.next a:hover { transform: translate(2px, -1px); } } @media only screen and (max-width: 480px) { .np-post-list a .eyecatch { width: 40px; min-width: 40px; } .np-post-list .ttl { font-size: 90%; } } .article-footer .post-categories, .article-footer .tags { margin: 0; display: inline-block; } .article-footer .post-categories li, .article-footer .tags a { display: inline-block; } .article-footer .post-categories li a, .article-footer .tags a { display: inline-block; padding: .35em .5em; margin-right: 0.3em; margin-bottom: 2px; text-decoration: none; line-height: 1.1; font-size: 75%; border: 1px solid; border-radius: .4em; } .article-footer a{ background-color: #1bb4d3; border-color: #1bb4d3; } .article-footer a:hover{ background: #E69B9B; border-color: #E69B9B; } .article-footer .post-categories li a{ color: #ffffff; } .article-footer .tags a { background: none!important; color: #1bb4d3; margin-top: -1px; } .article-footer .post-categories a::before, .article-footer .tags a::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: '\f02b'; margin-right: 0.2em; } .article-footer .post-categories a::before { content: '\f07b'; } .article-footer a:hover { transform: translateY(-1px); } .article-footer a:active { transform: translateY(1px); } /* facebook LikeBox */ .fb-likebtn { background-position: center center; background-size: cover; position: relative; text-align: center; color: #fff; overflow: hidden; margin-top: 1em; } .fb-likebtn::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #111; opacity: 0.8; z-index: 10; } .fb-likebtn .inner { padding: 9% 3%; position: relative; z-index: 11; overflow: hidden; } .fb-likebtn .fb-button { display: block; transform: scale(1.1); -webkit-transform: scale(1.1); overflow: hidden; } .fb-likebtn .like_text { font-size: 180%; font-weight: bold; margin-bottom: 0.5em; } .fb-likebtn .like_text::after { content: "この記事が気に入ったらフォローしよう！"; display: block; padding: 3px; font-size: 10px; margin-bottom: 0; opacity: 0.7; } .followbtn { color: #ffffff; background: #04acee; font-size: 83%; font-weight: bold; text-decoration: none; display: inline-block; text-align: center; line-height: 26px; padding: 0.1em 0.8em; margin: 0.4em 0.3em; border-radius: 3px; } .followbtn:hover { color: #ffffff; } .followbtn::before { font-family: "Font Awesome 5 Brands"; margin-right: 0.4em; font-size: 110%; } .followbtn.btn_facebook::before{ content: "\f09a"; } .followbtn.btn_facebook{ background: #1f6aba; } .followbtn.btn_twitter::before { content: "\f099"; } .followbtn.btn_feedly { background: #5fd043; } /* comment */ #comments-title { padding: 0.75em 0; margin: 0; } #comments-title::before{ font-family: "Font Awesome 5 Free"; content: "\f086"; font-size: 140%; margin-right: 7px; } .commentlist { margin: 0 0 1.5em; list-style-type: none; } .comment, .pingback { clear: both; overflow: hidden; padding: 3.5%; margin-bottom: 1em; font-size: 90%; border: 5px solid #efefef; } .comment .comment { font-size: 1em; border: none; padding-right: 0!important; } .comment .comment-meta, .pingback .comment-meta { padding: 0; } .comment .comment-meta a { color: inherit; text-decoration: none; } .comment .comment-author { border: 0; } .comment .vcard cite.fn { font-weight: 700; font-style: normal; } .comment-metadata { font-size: 80%; } .comment .vcard .avatar { border-radius: 50%; } .comment:last-child, .pingback:last-child { margin-bottom: 0; } .comment .children, .pingback .children { margin: 0; } .comment.depth-1, .pingback.depth-1 { margin-left: 0; margin-top: 0; } .comment:not(.depth-1), .pingback:not(.depth-1) { margin-top: 0; } .comment_content p { margin: 0.7335em 0 1.5em; font-size: 1em; line-height: 1.5em; } .comment-reply-link { font-size: 90%; font-weight: bold; display: block; text-align: right; text-decoration: none; } .comment-reply-link::before { font-family: "Font Awesome 5 Free"; content: "\f3e5"; margin-right: 5px; font-size: 130%; } .comment-edit-link { font-style: italic; margin: 0 7px; text-decoration: none; font-size: 90%; } .comment-navigation { text-align: center; padding: 1em; } /* SNS */ .sharewrap h3 { margin-bottom: 0; } .sharewrap h3::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f1e0"; display: inline-block; transform: scale(1.2); margin: 0 0.3em; } .sns_btn { margin: 1em 0; } .sns_btn ul { width: 100%; display: flex; justify-content: center; align-items: center; margin: 0; font-size: 80%; font-weight: bold; } .sns_btn li { width: 25%; margin: 4px; } .sns_btn li:first-child { margin-left: 0; } .sns_btn li:last-child { margin-right: 0; } .sns_btn li a { display: flex; justify-content: center; align-items: center; color: #ffffff; text-decoration: none; padding: 0.4em 0.2em; border-radius: 0.3em; position: relative; } .sns_btn li a .count { position: absolute; right: 3px; top: 2px; font-size: 10px; -webkit-transform: scale(0.85); transform: scale(0.85); margin: 0; min-width: 1.5em; } .sns_btn li a::before { font-family: "Font Awesome 5 Brands"; font-weight: 400; display: inline-block; margin-right: 3px; text-align: center; font-size: 155%; width: 1.2em; } .sns_btn a:hover { -webkit-transform: translate3d(0px, 3px, 1px); transform: translate3d(0px, 3px, 1px); box-shadow: none; } /* Twitter */ .sns_btn .twitter a { background: #00acee; box-shadow: 0 3px 0 #0092ca; } .sns_btn .twitter a::before { content: '\f099'; } .sns_btn .twitter a:hover { background: #0092ca; } /* Facebook */ .sns_btn .facebook a { background: #1f6aba; box-shadow: 0 3px 0 #2c4373; } .sns_btn .facebook a::before { content: "\f09a"; } .sns_btn .facebook a:hover { background: #2c4373; } /* hatebu */ .sns_btn .hatebu a { background: #2f70be; box-shadow: 0 3px 0 #43638b; } .sns_btn .hatebu a:hover { background: #43638b; } .sns_btn .hatebu a:before { content: 'B!'; font-family: inherit; font-weight: bold; } /* LINE */ .sns_btn .line a { background: #25af00; box-shadow: 0 3px 0 #219900; } .sns_btn .line a::before { content: "\f3c0"; transform: scale(1.2); } .sns_btn .line a:hover { background: #219900; } /* Pocket */ .sns_btn .pocket a { background: #ec2136; box-shadow: 0 3px 0 #c0392b; } .sns_btn .pocket a::before { content: "\f265"; } .sns_btn .pocket a:hover { background: #c0392b; } @media only screen and (max-width: 767px) { .sns_btn li a { flex-flow: wrap column; line-height: 1.2; padding: 0.7em 0.1em 0.4em; } .sns_btn li a::before { margin: 0 auto 2px; display: block; } .sns_btn li a .text { font-size: 10px; -webkit-transform: scale(0.85); transform: scale(0.85); display: block; } } /********************* archive style *********************/ /* archive common style */ .archive-title { font-size: 115%; margin: 0 0 1.5em; padding: 0 0.1em 0.5em; border-bottom: 3px solid; } .archive-title span, .archive-title::before { font-size: 10px; line-height: 1.5; display: block; opacity: 0.7; } .archive-title.ttl-category::before { content: "Category"; } .archive-title.ttl-tags::before { content: "Tags"; } /* archives list common */ .archives-list:not(.big-list) .post-list a { display: block; text-decoration: none; color: inherit; } .archives-list a .entry-title { margin: 0 0 0.4em; font-size: 115%; } .newmark::before{ content: 'NEW'; font-weight: normal; font-size: 70%; padding: 0.35em; margin-right: 4px; border-radius: 3px; background-color: #ff6347; color: #fff; } .archives-list .post-list .description { opacity: 0.6; font-size: 70%; } .archives-list a .entry-meta, .archives-list a .description { font-size: 75%; } .archives-list a .description p:last-child { margin-bottom: 0; } /* big layout */ .archives-list.big-list .post-list { margin-bottom: 3em; } .archives-list.big-list .entry-title a { color: inherit; } .archives-list.big-list .entry-meta, .archives-list.big-list .eyecatch { margin: 0.7em 0; } .archives-list.big-list .cat-name { margin-right: 10px; } @media only screen and (max-width: 480px) { .archives-list.big-list { font-size: 90%; } .archives-list.big-list .entry-title { margin-bottom: 0; } .archives-list.big-list .byline { font-size: 80%; } } /* simple layout */ .archives-list.simple-list .post-list { margin: 3px auto; padding: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .archives-list.simple-list .post-list:first-child { border-top: 1px solid rgba(0, 0, 0, 0.1); } .archives-list.simple-list .post-list a { display: flex; width: 100%; padding: 3%; } .archives-list.simple-list .post-list .eyecatch { flex-shrink: 0; width: 40%; max-width: 280px; margin-bottom: 0!important; } .archives-list.simple-list .post-list .entry-content { padding-left: 3%; width: 100%; overflow: hidden; } @media only screen and (max-width: 767px) { .archives-list.simple-list .post-list .entry-title { font-size: 100%; } .archives-list.simple-list .post-list .description { display: none; } } @media only screen and (max-width: 480px) { .archives-list.simple-list .post-list { margin-left: -4%; margin-right: -4%; font-size: 90%; } .archives-list.simple-list .post-list .eyecatch .cat-name{ font-size: 60%; } } /* card layout */ .archives-list.card-list { display: flex; justify-content: space-between; flex-wrap: wrap; word-break: break-all; margin: 0.5em auto; } .archives-list.card-list a { height: 100%; padding: 1em; box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); } .archives-list.card-list a .eyecatch { margin: -1em -1em 1em; max-height: 210px; overflow: hidden; } .archives-list.card-list .post-list { margin-bottom: 1.4em; } @media only screen and (min-width: 768px) { .archives-list .post-list a:hover { transform: translateY(-5px); box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15); } } @media only screen and (min-width: 481px) { .archives-list.card-list { margin: 0 auto; } .archives-list.card-list .post-list { width: calc(50% - 0.7em); } } /* pagination */ .pagination, .wp-prev-next { margin: 3em auto 4em; } .pagination, .page-links { font-size: 90%; text-align: center; } .pagination ul { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; } .pagination:empty, .wp-prev-next:empty, .pagination ul:empty, .search-no-results .pagination { display: none; } .pagination li { margin: 0 2px 4px; min-width: 2.8em; } .pagination a, .pagination span, .page-links a { margin: 0; display: block; padding: 12px 6px; text-decoration: none; line-height: 1; width: 100%; border: 2px solid; border-radius: 4px; font-weight: bold; } .page-links a { display: inline-block; width: 47%; } .pagination span.dots{ padding-left: 5px; padding-right: 5px; } .pagination a:hover, .pagination a:focus, .page-links a:hover, .page-links a:focus { color: #fff; } .pagination .current { cursor: default; color: #fff; } /* ================================================== */ /* widget */ /* ================================================== */ .widget:not(.widget_text):not(.widget_recent_comments):not(.widget_calendar) a { text-decoration: none; color: inherit; } .widget:not(.widget_text):not(.widget_recent_comments):not(.widget_calendar) a:hover { color: inherit; opacity: 0.7; } .widgettitle { font-size: 100%; padding: 0.65em 0.8em; margin-top: 0; margin-bottom: 0.75em; } #footer-top .widgettitle { font-size: 110%; padding: 0.4em 0.1em; background: none; } .widget { margin: 0 0 2.5em; } .homewidget.widget:last-child, .titleunder .widget:last-child { margin-bottom: 1em; } .widget ul { margin: 0; } /* RSSウィジェット */ .widget.widget_rss li a { font-weight: bold; } .widget.widget_rss li .rssSummary, .widget.widget_rss li .rss-date, .widget.widget_rss li cite { font-size: 88%; opacity: 0.6; } /* ウィジェットカテゴリー・新着記事 */ .widget.widget_categories .widgettitle, .widget.widget_recent_entries .widgettitle, .widget.widget_newentryimagewidget .widgettitle, .widget.widget_nav_menu .widgettitle, .widget.widget_pages .widgettitle, .widget.widget_archive .widgettitle, .widget.widget_mycategoryorder .widgettitle { margin-bottom: 0; } .widget.widget_categories ul, .widget.widget_recent_entries ul, .widget.widget_newentryimagewidget ul, .widget.widget_nav_menu ul, .widget.widget_pages ul, .widget.widget_archive ul, .widget.widget_mycategoryorder ul { margin-top: 0; } .widget.widget_categories ul li, .widget.widget_recent_entries li, .widget.widget_newentryimagewidget li, .widget.widget_nav_menu li, .widget.widget_pages li, .widget.widget_archive li, .widget.widget_mycategoryorder li { border-bottom: 1px dotted rgba(125, 125, 125, 0.3); margin: 0; padding: 0; } .widget .children li:first-child, .widget .sub-menu li:first-child { border-top: 1px dotted rgba(125, 125, 125, 0.3); } /* .widget li.page_item_has_children { border-bottom:none!important; } */ .widget.widget_newentryimagewidget li::before { content: none; } .widget.widget_categories li a, .widget.widget_recent_entries li a, .widget.widget_newentryimagewidget li a, .widget.widget_nav_menu li a, .widget.widget_pages li a, .widget.widget_archive li a, .widget.widget_mycategoryorder li a { display: block; padding: 1em 1.3em 1em 0.3em; margin: 0; position: relative; } .widget li a .countpost { opacity: 0.9; border-radius: 1em; background: rgba(50, 50, 50, 0.1); font-size: 89%; padding: 0 0.5em; margin-left: 0.3em; } .widget.widget_categories li:last-child, .widget.widget_recent_entries li:last-child, .widget.widget_newentryimagewidget li:last-child, .widget.widget_nav_menu li:last-child, .widget.widget_pages li:last-child, .widget.widget_archive li:last-child, .widget.widget_mycategoryorder li:last-child { border-bottom: none; } .widget.widget_categories li a::after, .widget.widget_recent_entries li a::after, .widget.widget_newentryimagewidget li a::after, .widget.widget_nav_menu li a::after, .widget.widget_pages li a::after, .widget.widget_archive li a::after, .widget.widget_mycategoryorder li a::after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: '\f105'; position: absolute; right: 6px; line-height: 1; font-size: 1em; top: 50%; margin-top: -0.5em; transition: 0.15s ease-in-out; } .entry-content .widget.widget_categories li:before, .entry-content .widget.widget_recent_entries li:before, .entry-content .widget.widget_newentryimagewidget li:before, .entry-content .widget.widget_nav_menu li:before, .entry-content .widget.widget_pages li:before, .entry-content .widget.widget_archive li:before, .entry-content .widget.widget_mycategoryorder li:before { content: none; } .widget li a:hover::after { right: 3px; } /* ドロップダウンスタイルの変更 */ .widget select { margin-top: 1em; width: 100%; max-width: 100%; } /* ドロップダウンにした時のlabelを非表示 */ .widget.widget_categories label, .widget.widget_archive label { display: none; } /* リスト 下の階層 */ .widget.widget_nav_menu li ul, .widget.widget_pages li ul, .widget.widget_categories li ul { padding: 0; margin: 0; } .widget.widget_nav_menu li ul a::before, .widget.widget_pages li ul a::before, .widget.widget_categories li ul a::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0da"; display: inline-block; margin-right: 5px; opacity: 0.15; } .widget.widget_nav_menu li ul, .widget.widget_pages li ul, .widget.widget_categories li ul { background: rgba(125, 125, 125, 0.02); } .widget.widget_nav_menu li ul ul a::before, .widget.widget_pages li ul ul a::before, .widget.widget_categories li ul ul a::before { content: "ー"; } .widget.widget_nav_menu li ul a::after, .widget.widget_pages li ul a::after, .widget.widget_categories li ul a::after { content: none; } .widget.widget_nav_menu li ul ul a, .widget.widget_pages li ul ul a, .widget.widget_categories li ul ul a { padding-left: 1.6em; } .widget.widget_nav_menu li ul li a, .widget.widget_pages li ul li a { padding-left: 0.5em; } .widget.widget_recent_comments ul { margin-top: 0; } .widget.widget_recent_comments li { border-bottom: 1px dotted #ccc; border-bottom: 1px dotted rgba(0, 0, 0, .2); margin: 0; padding: 0.5em 0; } .widget.widget_recent_comments li:first-child { border-top: none; } .widget.widget_recent_comments li:last-child { border-bottom: none; } /* ウィジェット検索フォーム */ /* SEARCH FORM */ .widget.widget_search .searchform, #main .entry-content .searchform { position: relative; height: 45px; margin: 0 auto 1.5em; max-width: 500px; text-align: center; } .widget.widget_search input[type="search"], #main .entry-content .searchform input[type="search"] { position: absolute; width: 100%!important; max-width: 100%; padding: 12px 1%; margin: 0; -webkit-appearance: none; appearance: none; -webkit-box-sizing: border-box; box-sizing: border-box; } .widget.widget_search button, #main .entry-content .searchform button { position: absolute; right: 3px; border: 0; background: none; display: inline-block; height: 100%; padding: .6em; font-size: 150%; color: inherit; line-height: 1; } .widget.widget_search button::before, #main .entry-content .searchform button::before, .searchbox .searchform button::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: '\f002'; } @media only screen and (min-width: 1100px) { #main .entry-content .searchform input[type="search"] { line-height: 1.8; } #main .entry-content .searchform button { font-size: 170%; height: 60px; } } /* ウィジェット カレンダー */ .widget.widget_calendar table { width: 100%; text-align: center; } .widget.widget_calendar table * { text-align: center; } /* ウィジェット タグクラウド */ .widget.widget_tag_cloud a { padding: 0.1em 0.6em; margin: 0 0.2em 0.3em 0; display: inline-block; font-size: 12px!important; border-radius: 3px; color: inherit; box-shadow: 0 0 1px; opacity: 0.8; } .widget.widget_tag_cloud a::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: '\f02b'; margin-right: 3px; } .widget.widget_tag_cloud a:hover { opacity: 0.7; box-shadow: 0 0 5px; transform: translateY(-1px); } .widget.widget_tag_cloud a:active { box-shadow: 0 0 2px; transform: translateY(1px); } .widget.widget_nav_menu li a span { display: none; } .widget.widget_newentryimagewidget li a { overflow: hidden; } .widget.widget_newentryimagewidget li .eyecatch, .widget.widget_newentryimagewidget li .inbox { display: table-cell; vertical-align: top; } .widget.widget_newentryimagewidget li .eyecatch { width: 30%; max-width: 140px; padding-right: 3%; overflow: hidden; text-align: center; } .widget.widget_newentryimagewidget li .eyecatch img { width: 100%; margin: 0; } .widget.widget_newentryimagewidget li .eyecatch.noimg::after { font-size: 70%; } .widget.widget_recent_entries li span, .widget li .time__date { padding: 0 0.3em; font-size: 0.9em; opacity: .5; display: inline-block; } .widget.widget_newentryimagewidget li .ttl { overflow: hidden; } .widget.widget_newentryimagewidget li .ttl p, .widget.widget_recent_entries li p { margin: 0; } /* CategoryWidget Toggle Ver */ .widget_categories li, .widget_nav_menu li, .widget_pages li { position: relative; } .widget li.accordionMenu > a::after { content: none; } .accordionBtn { width: 2.4em; height: 2.4em; line-height: 2.4em; border-radius: 50%; display: inline-block; text-align: center; position: absolute; top: 0.7em; right: 1px; color: #ffffff; background: #56a1d8; cursor: pointer; transition: 0.2s ease; } .accordionBtn.active { background: #9eccef; } .accordionBtn::before { font-weight: bold; content: "＋"; display: inline-block; } .accordionBtn.active { transform: rotate(45deg); } @media only screen and (min-width: 768px) { .accordionBtn { width: 1.9em; height: 1.9em; line-height: 1.9em; top: 1em; } } /* Plugin */ /* WordPress Popular Posts */ ul.wpp-list { counter-reset: number; } ul.wpp-list li { list-style: none; position: relative; border-bottom: 1px solid #ddd; margin: 0; padding-bottom: 0.75em; } ul.wpp-list li a::before { counter-increment: number; content: counter(number); background: #3e3e3e; margin-right: 3px; color: #fff; width: 1.5em; height: 1.5em; line-height: 1.5em; font-size: 75%; border-radius: 3px; font-weight: bold; display: block; text-align: center; position: absolute; left: 2px; top: 2px; z-index: 1; } ul.wpp-list img { margin-bottom: 0; margin-right: 5px; } ul.wpp-list li a.wpp-post-title { display: block; } ul.wpp-list li a.wpp-post-title::before, ul.wpp-list li .wpp-author a::before, ul.wpp-list li .wpp-category a::before { content: none; } /* TOC */ @media only screen and (max-width: 480px) { #toc_container { font-size: 90%; } } #toc_container { width: 100%!important; padding: 1.2em; border: 5px solid rgba(100, 100, 100, 0.2); } #toc_container li { margin: 1em 0; font-weight: bold; } #toc_container li li { font-weight: normal; margin: 0.5em 0; } #toc_container li::before { content: none; } #toc_container .toc_number { display: inline-block; font-weight: bold; font-size: 75%; background: #3e3e3e; color: #ffffff; min-width: 2.1em; min-height: 2.1em; line-height: 2.1; text-align: center; border-radius: 1em; margin-right: 0.3em; padding: 0 7px; } #toc_container a { color: inherit; text-decoration: none; } #toc_container a:hover { text-decoration: underline; } #toc_container p.toc_title { max-width: 580px; font-weight: bold; text-align: left; margin: 0 auto; font-size: 100%; vertical-align: middle; } #toc_container .toc_title::before { display: inline-block; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f03a"; margin-right: 0.8em; margin-left: 0.4em; transform: scale(1.4); color: initial; } #toc_container .toc_title .toc_toggle { font-size: 80%; font-weight: normal; margin-left: 0.2em; } #toc_container .toc_list { max-width: 580px; margin-left: auto; margin-right: auto; } #toc_container .toc_list > li { padding-left: 0; } /* EOC */ #ez-toc-container{ width: 100%!important; border: 5px solid rgba(100, 100, 100, 0.2); padding: 1.2em; } #ez-toc-container li:before{ content: none; } #ez-toc-container li, #ez-toc-container ul, #ez-toc-container ul li, .ez-toc-widget-container, .ez-toc-widget-container li { margin-bottom: 0.2em; } #ez-toc-container ul.ez-toc-list{ margin-top: 0.5em; } #ez-toc-container.counter-decimal ul.ez-toc-list li a::before, .ez-toc-widget-container.counter-decimal ul.ez-toc-list li a::before{ font-weight: bold; margin-right: 0.4em; display: inline-block; transform: scale(0.9); opacity: 0.7; } /* editor */ /* マーカー */ .span__stk_maker_yellow, .span-stk-maker-yellow { display: inline; background-position: left -100% center; background-repeat: repeat-x; background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #ff6 50%); background-size: 200% .6em; padding-bottom: .6em; } .span__stk_maker_pink, .span-stk-maker-pink { display: inline; background-position: left -100% center; background-repeat: repeat-x; background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #ffd5d5 50%); background-size: 200% .6em; padding-bottom: .6em; } .span__stk_maker_blue, .span-stk-maker-blue { display: inline; background-position: left -100% center; background-repeat: repeat-x; background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #b5dfff 50%); background-size: 200% .6em; padding-bottom: .6em; } /* ラベル */ [class*="span-stk-label-"]{ font-size: 0.9em; padding: 0.2em 0.5em; border-radius: 0.2em; color: #fff; } [class*="span-stk-label-"] + [class*="span-stk-label-"] { margin-left: 0.1em; margin-right: 0.1em; } .span-stk-label-yellow{ background-color: #f5f512; color: #333; } .span-stk-label-pink{ background-color: #f7b2b2; } .span-stk-label-red{ background-color: #e77373; color: #fff; } .span-stk-label-blue{ background-color: #82c8e2; } .span-stk-label-green{ background-color: #79e37c; } .span-stk-label-gray{ background-color: #9c9c9c; } .span-stk-label-black{ background-color: #222; color: #fff; } /* フォントサイズ */ .span-stk-fs-ss { font-size: 70%; } .span-stk-fs-s { font-size: 90%; } .span-stk-fs-m { font-size: 120%; } .span-stk-fs-l { font-size: 150%; } .span-stk-fs-ll { font-size: 180%; } /*================================================== js remodal style ==================================================*/ html.remodal-is-locked { overflow: hidden; touch-action: none; } .remodal, [data-remodal-id] { display: none; } .remodal-overlay { position: fixed; z-index: 9999; top: -5000px; right: -5000px; bottom: -5000px; left: -5000px; display: none; background: rgba(43, 46, 56, 0.9); } .remodal-wrapper { position: fixed; z-index: 10000; top: 0; right: 0; bottom: 0; left: 0; display: none; text-align: center; overflow: auto; -webkit-overflow-scrolling: touch; padding: 10px 20px 0; } .remodal-wrapper:after { display: inline-block; height: 100%; margin-left: -0.05em; content: ""; } .remodal-overlay, .remodal-wrapper { backface-visibility: hidden; } .remodal { position: relative; outline: none; text-size-adjust: 100%; box-sizing: border-box; width: 100%; margin-bottom: 10px; padding: 1em; transform: translate3d(0, 0, 0); color: #2b2e38; background: #fff; text-align: left; } .remodal-is-initialized { /* Disable Anti-FOUC */ display: inline-block; } .remodal.searchbox { background: none; color: #fff; } .remodal.searchbox .remodal-close { color: #fff; } .remodal-bg.remodal-is-opening, .remodal-bg.remodal-is-opened { filter: blur(3px); } .remodal-overlay.remodal-is-opening, .remodal-overlay.remodal-is-closing { animation-duration: 0.3s; animation-fill-mode: forwards; } .remodal-overlay.remodal-is-opening { animation-name: remodal-overlay-opening-keyframes; } .remodal-overlay.remodal-is-closing { animation-name: remodal-overlay-closing-keyframes; } .remodal.remodal-is-opening, .remodal.remodal-is-closing { animation-duration: 0.3s; animation-fill-mode: forwards; } .remodal.remodal-is-opening { animation-name: remodal-opening-keyframes; } .remodal.remodal-is-closing { animation-name: remodal-closing-keyframes; } .remodal, .remodal-wrapper:after { vertical-align: middle; } .remodal .widget { margin: 0 0 1em; } .remodal-close { display: block; overflow: visible; margin: 1em auto; padding: .5em; cursor: pointer; transition: color 0.2s; text-decoration: none; text-align: center; color: #95979c; border: 0; outline: 0; background: none; font-size: 1.5em; position: static!important; } .remodal-close:hover, .remodal-close:focus { color: #2b2e38; } .remodal-close:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f00d"; font-size: 1.2em; display: inline-block; position: relative; top: 3px; } .remodal-close .text { margin-left: .5em; font-size: .8em; display: inline-block; } .remodal-confirm, .remodal-cancel { font: inherit; display: block; overflow: visible; min-width: 150px; padding: 12px 0; cursor: pointer; transition: background 0.2s; text-align: center; vertical-align: middle; text-decoration: none; border: 0; outline: 0; } .remodal-confirm { color: #fff; background: #81c784; } .remodal-confirm:hover, .remodal-confirm:focus { background: #66bb6a; } .remodal-cancel { color: #fff; background: #e57373; } .remodal-cancel:hover, .remodal-cancel:focus { background: #ef5350; } .remodal-confirm::-moz-focus-inner, .remodal-cancel::-moz-focus-inner, .remodal-close::-moz-focus-inner { padding: 0; border: 0; } @keyframes remodal-opening-keyframes { from { transform: scale(1.05); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes remodal-closing-keyframes { from { transform: scale(1); opacity: 1; } to { transform: scale(0.95); opacity: 0; } } @keyframes remodal-overlay-opening-keyframes { from { opacity: 0; } to { opacity: 1; } } @keyframes remodal-overlay-closing-keyframes { from { opacity: 1; } to { opacity: 0; } } @media only screen and (min-width: 641px) { .remodal { max-width: 700px; } } @media only screen and (max-width: 480px) { .remodal { padding: .5em; font-size: .88em; } } /* IE */ .lt-ie9 .remodal-overlay { background: #2b2e38; } .lt-ie9 .remodal { width: 700px; } /*================================================== Short Code ==================================================*/ .related_article { margin: 3% auto; text-align: left; max-width: 980px; } .related_article a { color: #333333; background: #ffffff; box-shadow: 0 0 1px rgba(125, 125, 125, 0.6); text-decoration: none; display: flex; width: 100%; padding: 2.5%; overflow: hidden; } .related_article a:hover { color: #888888; box-shadow: 0 0 10px rgba(125, 125, 125, 0.5); transform: translateY(-2px); } .related_article a:active { transform: translateY(1px); box-shadow: 0 0 1px rgba(125, 125, 125, 0.5); } .related_article.typecard a { display: block; max-width: 350px; width: 100%; } .related_article.typesimple .inbox { overflow: hidden; } .related_article.typesimple .thum { width: 22%; min-width: 100px; padding-right: 0.7em; } .related_article.typesimple .thum img { width: 100%; margin-bottom: 0; } .related_article p.ttl { margin: 0 0 0.1em!important; font-size: 95%; font-weight: bold; } .related_article .ttl::before { content: attr(data-labeltext); font-size: 70%; font-weight: bold; color: #fff; background: #111; display: inline-block; padding: 0.1em 0.5em; position: relative; top: -2px; text-align: center; margin-right: 0.5em; -webkit-border-radius: 2px; border-radius: 2px; } .related_article.labelnone .ttl::before { content: none; } .related_article .time__date { font-size: 80%; } .related_article.typecard img { margin-bottom: 5px; } .supplement { border: 2px solid; background-color: #fcf8e3; border-color: #faebcc; color: #766341; position: relative; font-size: 93%; padding: 4% 4% 4% 3.3em; margin: 1.5em 0 2em; -webkit-border-radius: 4px; border-radius: 4px; } .supplement p { margin-bottom: .8em; } .supplement p:last-child, .cbox p:last-child { margin-bottom: 0; } .supplement.warning, .supplement.is-style-warning { background-color: #fce3e3; border-color: #facccc; color: #764141; } .supplement.succes, .wp-block-stk-plugin-supplement.is-style-succes { background-color: #cff7c7; border-color: #a3cc72; color: #466348; } .supplement::before { font-family: "Font Awesome 5 Free"; font-weight: 900; line-height: 1; content: '\f06a'; display: inline-block; font-size: 1.1em; } .supplement:not(.boader)::before { font-size: 1.8em; position: absolute; left: 0.5em; } .supplement.warning::before, .supplement.is-style-warning::before { content: '\f071'; } .supplement.succes::before, .supplement.is-style-succes::before { content: '\f058'; } .supplement.boader::before, .supplement.border::before, .supplement.is-style-border::before { content: none; } .supplement.noicon::before { content: none; } .supplement.boader, .supplement.border, .supplement.is-style-border { background: none; color: inherit; border-color: #d4d4d4; } .supplement.boader, .supplement.border, .supplement.is-style-border, .supplement.noicon { padding: 3% 4%; } /* BOX */ .cbox { padding: 1em 3%; margin: 2em 0 2em; border: 2px solid #dddddd; background: #d4f3ff; border-color: #82c8e2; color: #465d65; border-radius: 0.2em; } .cbox.intitle { padding-top: 0; padding-bottom: 1.4em; } .cbox.intitle .box_title .span__box_title { position: relative; top: -1.1em; padding: 0.1em 0.7em; background: #82c8e2; color: #ffffff; font-weight: bold; border-radius: 0.2em; display: inline-block; vertical-align: bottom; min-width: 3em; text-align: center; } .cbox .box_title .span__box_title:empty{ visibility :hidden; } .cbox.is-style-blue_box { background: #d4f3ff; border-color: #82c8e2; color: #465d65; } .cbox.is-style-blue_box .box_title .span__box_title { background: #82c8e2; } .cbox.is-style-red_box { background: #ffafaf; border-color: #e77373; color: #654646; } .cbox.is-style-red_box .box_title .span__box_title { background: #e77373; } .cbox.is-style-yellow_box { background: #fff8d4; border-color: #ded647; color: #636546; } .cbox.is-style-yellow_box .box_title .span__box_title { background: #ded647; } .cbox.is-style-green_box { background: #d8f7c3; border-color: #79e37c; color: #42613a; } .cbox.is-style-green_box .box_title .span__box_title { background: #79e37c; } .cbox.is-style-pink_box { background: #ffeeee; border-color: #f7b2b2; color: #775454; } .cbox.is-style-pink_box .box_title .span__box_title { background: #f7b2b2; } .cbox.is-style-glay_box { background: #ececec; border-color: #c5c5c5; color: #555555; } .cbox.is-style-glay_box .box_title .span__box_title { background: #9c9c9c; } .cbox.is-style-black_box { background: #313131; border-color: #404040; color: #ffffff; } .cbox.is-style-black_box .box_title .span__box_title { background: #404040; } /* type simple */ .cbox.type_simple { background: #fff; } .cbox.type_simple .box_title .span__box_title { background: #fff; color: #82c8e2; } .cbox.type_simple.is-style-blue_box .box_title .span__box_title { color: #82c8e2; } .cbox.type_simple.is-style-red_box .box_title .span__box_title { color: #e77373; } .cbox.type_simple.is-style-yellow_box .box_title .span__box_title { color: #ded647; } .cbox.type_simple.is-style-green_box .box_title .span__box_title { color: #79e37c; } .cbox.type_simple.is-style-pink_box .box_title .span__box_title { color: #f7b2b2; } .cbox.type_simple.is-style-glay_box .box_title .span__box_title { color: #9c9c9c; } .cbox.type_simple.is-style-black_box, .cbox.type_simple.is-style-black_box .box_title .span__box_title { color: #313131; } /* Accordion */ .accordion { margin: 0.9em 0; font-size: 95%; position: relative; box-shadow: 0 0 10px rgba(102, 102, 102, 0.05); } .accordion::before, .accordion::after{ content: ""; display: block; width: 100%; height: 100%; background: #0facca; opacity: 0.3; position: absolute; top: 0; left: 0; z-index: 1; } .accordion::after{ background: #666666; opacity: 0.06; } .accordion_check{ display: none; } .accordion_label{ position: relative; z-index: 2; color: inherit; display: block; margin: 0; padding: 10px 30px 10px 10px; font-weight: bold; cursor: pointer; -webkit-tap-highlight-color:rgba(0,0,0,0); } .accordion label::after { content: "+"; position: absolute; right: 0.8em; top: calc(50% - 0.5em); line-height: 1; transition: .3s; } .accordion_check:checked + .accordion_label::after { transform: rotate(45deg); } .accordion_content{ position: relative; z-index: 2; border-top: none; height: 0; opacity: 0; overflow: hidden; padding: 0 1em; transition: .5s; visibility: hidden; background: #ffffff; } .accordion_content p:last-child{ margin-bottom: 0; } .accordion_check:checked + .accordion_label + .accordion_content{ height: auto; opacity: 1; padding: 10px 1em; margin: 3px; transform: translateY(-3px); visibility: visible; } .btn-wrap, .wp-block-button { margin: 0.5em 0 1em; } .btn-wrap{ text-align: center; } .btn-wrap p, .wp-block-button p { margin: 0; padding: 0; } .btn-wrap a, .wp-block-button.is-style-normal a, .wp-block-button.is-style-simple a { position: relative; z-index: 2; display: inline-block; overflow: hidden; text-decoration: none; padding: 0.8em 5%; max-width: 90%; background: #699fd3; border-color: #699fd3; border-width: 2px; border-style: solid; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 1px 10px rgba(0, 0, 0, 0.07); color: #ffffff; border-radius: 3px; text-decoration: none!important; font-weight: bold; } .btn-wrap a:active, .wp-block-button a:active { -webkit-transform: translate3d(0px, 1px, 1px); transform: translate3d(0px, 1px, 1px); box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); } .widget .btn-wrap:not(.simple) a { color: #ffffff; } .widget .btn-wrap:not(.simple) a:hover { color: #699fd3; } .btn-wrap.simple a, .wp-block-button.is-style-simple a { background: none; color: #4993AF; border: 2px solid #4993AF; } .btn-wrap.simple a:hover, .wp-block-button.is-style-simple a:hover { color: #ffffff; background: #4993AF; } .btn-wrap.lightning a { background: #C81C1C; border-color: #C81C1C; color: #ffffff; } .btn-wrap.lightning a:hover { background: #ffffff; color: #C81C1C; border-color: #C81C1C; } .btn-wrap.big a, .wp-block-button.big a { font-size: 103%; width: 480px; max-width: 94%; } .btn-wrap.bg { background: #efefef; background: rgba(0, 0, 0, .1); padding: 1.5em 1em; margin: 2.5em 0; } .btn-wrap.bg-yellow { background: lightyellow; background: rgba(255, 255, 0, 0.2); padding: 1.5em 1em; margin: 2.5em 0; } .btn-wrap.maru, .btn-wrap.maru a { border-radius: 0.6em; } .btn-wrap[class*="rich_"] a, .wp-block-button[class*="is-style-rich_"] a{ font-weight: bold; position: relative; border-radius: 0.2em; color: #ffffff!important; border: none; text-shadow: 0 1px 1px rgba(0, 0, 0, .09); } .btn-wrap.rich_yellow a, .wp-block-button.is-style-rich_yellow a { background-color: #f7cf2e; box-shadow: 0 4px 0 #ecb254; } .btn-wrap.rich_pink a, .wp-block-button.is-style-rich_pink a { background-color: #ee5656; box-shadow: 0 4px 0 #d34e4e; } .btn-wrap.rich_orange a, .wp-block-button.is-style-rich_orange a { background-color: #ef9b2f; box-shadow: 0 4px 0 #cc8c23; } .btn-wrap.rich_green a, .wp-block-button.is-style-rich_green a { background-color: #39cd75; box-shadow: 0 4px 0 #1eae59; } .btn-wrap.rich_blue a, .wp-block-button.is-style-rich_blue a { background-color: #19b4ce; box-shadow: 0 4px 0 #07889d; } @media only screen and (min-width: 768px) { .btn-wrap a:hover, .wp-block-button a:hover{ -webkit-transform: translate3d(0px, -3px, 1px); transform: translate3d(0px, -3px, 1px); box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15); opacity: 0.8; text-decoration: none!important; } .btn-wrap a:hover, .wp-block-button.is-style-normal a:hover { color: #699fd3; background: none; } .btn-wrap.rich_yellow a:hover, .wp-block-button.is-style-rich_yellow a:hover { color: #ffffff!important; background-color: #f7cf2e; box-shadow: 0 4px 0 #ecb254, 0 1px 2px rgba(0, 0, 0, 0.07), 0 1px 10px rgba(0, 0, 0, 0.09); } .btn-wrap.rich_pink a:hover, .wp-block-button.is-style-rich_pink a:hover { color: #ffffff!important; background-color: #ee5656; box-shadow: 0 4px 0 #d34e4e, 0 1px 2px rgba(0, 0, 0, 0.07), 0 1px 10px rgba(0, 0, 0, 0.09); } .btn-wrap.rich_orange a:hover, .wp-block-button.is-style-rich_orange a:hover { color: #ffffff!important; background-color: #ef9b2f; box-shadow: 0 4px 0 #cc8c23, 0 1px 2px rgba(0, 0, 0, 0.07), 0 1px 10px rgba(0, 0, 0, 0.09); } .btn-wrap.rich_green a:hover, .wp-block-button.is-style-rich_green a:hover { color: #ffffff!important; background-color: #39cd75; box-shadow: 0 4px 0 #1eae59, 0 1px 2px rgba(0, 0, 0, 0.07), 0 1px 10px rgba(0, 0, 0, 0.09); } .btn-wrap.rich_blue a:hover, .wp-block-button.is-style-rich_blue a:hover { color: #ffffff!important; background-color: #19b4ce; box-shadow: 0 4px 0 #07889d, 0 1px 2px rgba(0, 0, 0, 0.07), 0 1px 10px rgba(0, 0, 0, 0.09); } } @media only screen and (min-width: 768px) { .column-wrap { display: flex; flex-flow: row wrap; width: 100%; } .column-wrap .column_2, .column-wrap .column_3 { width: calc(50% - 0.5em); margin: 0 0.5em 0.5em; } .column-wrap .column_3 { width: calc(33.3333% - 0.85em); } .column-wrap .column_4 { width: calc(25% - 0.5em); } .column-wrap .column_5 { width: calc(20% - 0.5em); } .column-wrap .child_column:first-child { margin-left: 0; } .column-wrap .child_column:last-child { margin-right: 0; } .column-wrap p { margin-bottom: 0.5em; } .column-wrap .child_column img { margin-bottom: 1.5%; } .column-wrap .child_column h2, .column-wrap .child_column h3{ margin-top: 1em; } } .voice { margin: 1em 0 1.3em; font-size: 95%; overflow: hidden; } .voice .voicecomment { border: 5px solid rgba(213, 213, 213, 0.5); margin-top: 1em; padding: 2.5%; position: relative; width: 86%; border-radius: 0.6em; } .voice .voicecomment:after { content: ""; position: absolute; top: 7px; left: -19px; width: 0; height: 0; border-style: solid; border-color: transparent rgba(213, 213, 213, 0.5) transparent transparent; border-width: 7px; } .voice.r .voicecomment:after { left: auto; right: -19px; border-color: transparent transparent transparent rgba(213, 213, 213, 0.5); border-width: 7px; } .voice.l .voicecomment { float: right; } .voice.r .voicecomment { float: left; } .voice.fb .voicecomment, .voice.is-style-fb .voicecomment { background: #4e71ba; border-color: #4e71ba; color: #fff; } .voice.fb .voicecomment:after, .voice.is-style-fb .voicecomment:after { border-color: transparent #4e71ba transparent transparent; } .voice.fb.r .voicecomment:after, .voice.is-style-fb.r .voicecomment:after { border-color: transparent transparent transparent #4e71ba; } .voice.line .voicecomment, .voice.is-style-line .voicecomment { background: #7ACC40; border-color: #7ACC40; color: #fff; } .voice.line .voicecomment:after, .voice.is-style-line .voicecomment:after { border-color: transparent #7ACC40 transparent transparent; } .voice.line.r .voicecomment:after, .voice.is-style-line.r .voicecomment:after { border-color: transparent transparent transparent #7ACC40; } .voice .voicecomment p { margin-bottom: 1em; } .voice .voicecomment p:last-child { margin-bottom: 0; } .voice .icon { width: 12%; text-align: center; } .voice.l .icon { float: left; } .voice.r .icon { float: right; } .voice .voice_icon__img { border-radius: 50%; margin: 0; border: 4px solid #f5f5f5; } .voice.icon_red .voice_icon__img { border-color: #FF4E4E; } .voice.icon_blue .voice_icon__img { border-color: #50B4DE; } .voice.icon_yellow .voice_icon__img { border-color: #faee00; } .voice.icon_black .voice_icon__img { border-color: #222; } .voice .icon .name { font-size: 0.65em; padding: 0.4em 0; } .voice.big .icon { width: 18%; } .voice.big .voicecomment { width: 79%; } /* TOP PAGE CATEGORY LIST */ .cat_postlist { width: 100%; margin-bottom: 2em; vertical-align: top; } @media only screen and (min-width: 768px) { .cat_postlist.column2 { display: inline-block; width: 48%; margin: 0 0.8%!important; } .cat_postlist.column3 { display: inline-block; width: 32%; margin: 0 0.4%!important; } .cat_postlist.typecard.column2 li, .cat_postlist.typecard.column3 li { width: calc(50% - 10px); } .cat_postlist li a:hover { transform: translateY(-2px); } .cat_postlist li a:active { transform: translateY(1px); } } .cat_postlist .catttl { font-size: 105%; font-weight: bold; padding: 5px 0; margin: 0 0 5px; border-bottom: 2px solid; } .cat_postlist .catttl.ttlimg { border: none; padding: 0; } .cat_postlist .catttl.ttlimg img{ margin: 0; } .cat_postlist li { margin: 0; padding-left: 0; } .cat_postlist.typecard ul { display: flex; flex-wrap: wrap; margin-left: -5px; margin-right: -5px; } .cat_postlist.typecard li { width: calc(25% - 10px); margin: 5px; } .cat_postlist.typecard .postbody, .cat_postlist.typecard .eyecatch { display: block; width: 100%; padding: 0; font-size: 90%; } .cat_postlist.typecard .eyecatch { margin: 0 0 0.5em; } .cat_postlist li a { color: inherit; text-decoration: none; display: table; table-layout: fixed; width: 100%; overflow: hidden; } .cat_postlist.typesimple li a { padding: 0.7em 0; } .cat_postlist li::before { content: none!important; } .cat_postlist li .postbody, .cat_postlist li .eyecatch { display: table-cell; vertical-align: top; } .cat_postlist li .eyecatch { width: 100px; padding-right: 0.5em; overflow: hidden; text-align: center; } .cat_postlist li .eyecatch img { margin: 0; } .cat_postlist li .ttl { font-size: 90%; font-weight: bold; margin: 0; padding: 0; line-height: 1.5; } .cat_postlist li .time__date { font-size: 85%; line-height: 1.5; opacity: 0.8; } .cat_postlist .btn-wrap { margin: 1.5em 0 2em; } .cat_postlist .btn-wrap a { padding: 5px 1.2em 5px 0.5em; width: 230px; } .cat_postlist .btn-wrap.arrow a::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: '\f105'; position: absolute; right: 5px; transform: scale(0.9); } @media only screen and (max-width: 480px) { .btn-wrap a, .wp-block-button a { font-size: 90%; } .btn-wrap.big a, .wp-block-button.is-style-big a { font-size: 90%; min-width: 80%; max-width: 90%; } .btn-wrap.bg { padding: 0.9em 0.8em; margin: 2.5em 0; } .voice .icon { width: 18%; } .voice .voicecomment { width: 80%; font-size: 95%; } .related_article { font-size: 80%; } .related_article.typesimple .thum { width: 30%; } #container .related_article a { padding: 0.6em; } .cat_postlist.typecard li { width: calc(50% - 10px); } } /* Text meant only for screen readers. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }