@charset "UTF-8";
/*
	Theme Name: CIKI BLOG themes
	Description: For CIKI BLOG themes
	Theme URI:
	Author: CIKI
	Author URI:
	Version: 0.370
	License: GNU General Public License
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Tags: white, right-sidebar, two-columns
*/
/*----------------------------------------
0.0 Color root
----------------------------------------*/
:root{
	--white: #ffffff;
	--gr-fa: #fafafa;
	--gr-f3: #f3f3f3;
	--gr-e0: #e0e0e0;
	--gr-ee: #eeeeee;
	--gr-e9: #e9e9e9;
	--gr-dd: #dddddd;
	--gr-cc: #cccccc;
	--gr-aa: #aaaaaa;
	--bl-99: #999999;
	--bl-88: #888888;
	--bl-68: #686868;
	--bl-52: #525252;
	--bl-41: #414141;
	--bl-22: #222222;
	--black: #000000;
	--link: #46f;
	--sdw--gr: rgba(0, 0, 0, 0.4);
	--tw: rgb(0, 0, 0);
	--fb: rgb(27,116,228);
	--pk: rgb(238,64,86);
    --line-a: rgb(147 170 187 / 20%);
	--line-b: rgb(147 170 187 / 40%);

	--txt-gr: #9faab1;
	--bg-grid: #f6f8f9;

}
/*----------------------------------------
0.0 General Setting
----------------------------------------*/
html, body{
	margin: 0;
	padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body{
	overflow-x: hidden;
    color: var(--bl-41);
	font-size: 1rem;
	font-family: 'Montserrat', 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", メイリオ, sans-serif;
    -moz-osx-font-smoothing: grayscale;
	font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	letter-spacing: 1px;
    line-height: 1.6;
}
/*----------------------------------------
0.0 Typography
----------------------------------------*/
h1, h2, h3, h4, h5, h6{
    margin: 0;
	font-weight: bold;
}
blockquote {
	margin: 2em 0;
    background-color: var(--bg-grid);
    padding: 2em;
    border-radius: 15px;
    color: var(--bl-68);
    font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
    line-height: 2;
    letter-spacing: 0.7px;
}
blockquote .image-via {
    margin: 0!important;
}
/*----------------------------------------
0.0 List
----------------------------------------*/
ul,ol{
	margin: 0;
	padding: 0;
	list-style: none;
}
ul ul{
	margin-left: 1em;
}
article ul{
	list-style: disc;
}
article ol{
	list-style: disc;
}
ul li {
    margin-left: 1rem;
    margin-bottom: 0.25rem;
}
/*----------------------------------------
0.0 Link
----------------------------------------*/
a{
	border-bottom: 1px solid;
	color: var(--bl-41);
	text-decoration: none;
    transition: 0.2s;
}
a:hover{
	border-bottom: 1px solid;
	color: var(--bl-99);
}
/*----------------------------------------
0.0 Image
----------------------------------------*/
img{
    width: 100%;
    height: auto;
    vertical-align: bottom;
	user-drag: none;
	-webkit-user-drag: none;
	-moz-user-select: none;
}
/*----------------------------------------
0.0 Layout
----------------------------------------*/
#container{
	position: relative;
	width: 100%;
}
header{
	position: fixed;
	width: 100%;
    height: 64px;
	-webkit-backdrop-filter: saturate(180%) blur(5px);
    backdrop-filter: saturate(180%) blur(5px);
    background-color: rgba(255,255,255,0.8);
	border-bottom: 0.5px solid var(--gr-e9);
	z-index: 5;
}
main {
	padding-top: 64px;
}
aside {
	width: 300px;
    min-width: 300px;
	max-width: 300px;
}
footer{
    color: var(--bl-22);
    background-color: var(--white);
}
/*----------------------------------------
0.0 Flex
----------------------------------------*/
.flx{
    display: -webkit-flex;
    display: flex;
}
.flx .col1{
	-ms-flex: 2;
    -webkit-flex: 2;
    flex: 2;
}
.flx .col2{
	-ms-flex: 1;
	-webkit-flex: 1;
	flex: 1;
}
/*----------------------------------------
0.0 Breadcrumb
----------------------------------------*/
#breadcrumb{
	margin-bottom: 20px;
}
#breadcrumb li{
	float: left;
	margin-right: .5em;
}
/*----------------------------------------
0.0 Header
----------------------------------------*/
#logo{
	margin: 11px 0 0;
	padding: 0 0 0 30px;
    display: inline-flex;
}
#logo a{
	border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.6rem;
}
/*----------------------------------------
0.0 Navigation
----------------------------------------*/
nav{
	position: fixed;
    top: 0;
    right: 10px;
	z-index: 5;
}
nav ul > li{
	float: left;
}
nav ul li{
	position: relative;
	margin: 0;
}
nav ul a{
	display: block;
    font-weight: bold;
    padding: 22px 0;
    margin: 0 14px;
    border-bottom: none;
    font-size: 0.8rem;
    position: relative;
    transition: 0.2s;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
}
nav ul a:hover{
	color: var(--bl-41);
	border-bottom: none;
}
nav > ul > li.current_page_item a:after,
nav > ul > li.current_page_parent a:after{
	content: '';
    position: absolute;
    bottom: 0;
    border-bottom: 3px solid var(--bl-41);
    width: 100%;
	left: 0;
    border-radius: 15px;
}
/*----------------------------------------
0.0 Main
----------------------------------------*/
main .l-contents{
	position: relative;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}
main .w-contents{
	position: relative;
	margin: 0 auto;
	padding: 0 20px;
	width: 1180px;
	box-sizing: border-box;
}
main .contents-inner{
	padding: 5% 0;
}
/*----------------------------------------
0.0 Page index / Header image
----------------------------------------*/
.page-index {
	position: relative;
	overflow: hidden;
    text-align: center;
	padding: 60px 0 0;
}
.page-index h2 {
	font-size: 1.9rem;
    font-weight: 900;
	font-family: 'Montserrat', sans-serif;
}
.page-index .category-title {
    font-size: 0.8rem;
}
.page-index .category-title i {
    margin-right: 4px;
}
.article-index {
	position: relative;
	overflow: hidden;
    text-align: center;
}
.article-index .index-image:after{
    background-color: rgb(0 0 0 / 80%);
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}
.article-index .index-image{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.article-index .index-image{
    position: absolute;
    height: 360px;
	width: 100%;
	top: 0;
	left: 0;
    -webkit-filter: blur(8px);
    -webkit-transform: scale(1.1);
    filter: blur(8px);
    transform: scale(1.1);
}
.index-text{
    text-align: center;
    border-color: var(--gr-e0);
    position: relative;
    height: 360px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.article-index .index-postmeta {
    padding: 0 5%;
}
.article-index .index-postmeta h2{
    font-size: 1.6rem;
    color: var(--white);
	margin-bottom: 20px
}
.article-index .index-postmeta .cat {
	font-size: 0.8rem;
    color: var(--white);
}
.article-index .index-postmeta .cat i {
    margin-right: 4px;
	color: var(--white);
}
.article-index .index-postmeta .cat a{
	border-bottom: none;
	color: var(--white);
}
main.single .share-button ul li {
	margin: 0;
}
/*----------------------------------------
0.0 Blog
----------------------------------------*/
main.single .share-button {
	position: sticky;
    top: 94px;
    width: 42px;
}
main.single .share-text {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 2.625rem;
    font-family: 'Montserrat', sans-serif;
}
main.single .share-button ul li a {
    border: none;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bl-41);
    border: none;
    border-radius: 50%;
    color: var(--white);
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 16px;
    padding: 0;
	width: 42px;
    height: 42px;
    font-size: 16px;
}
main.single .share-button ul li a:hover{
	color: var(--white);
}
main.single .share-button ul li a.twitter:hover{
	background-color: var(--tw);
}
main.single .share-button ul li a.facebook:hover{
	background-color: var(--fb);
}
main.single .share-button ul li a.poket:hover{
	background-color: var(--pk);
}
main.single .share-button ul li a i{
    position: relative;
    left: 1px;
}
main.single .article-entry p.post-first-section{
	margin: 0;
}
main.single .article-entry{
	line-height: 1.9;
    font-size: 0.9rem;
    margin: 0 8% 0 6%;
    max-width: 686px;
	font-feature-settings: normal;
	-webkit-font-feature-settings: normal;
	letter-spacing: 0.5px;
}
main.single .article-entry .post-meta-section {
	position: relative;
    font-size: 0.8rem;
    margin-bottom: 30px;
    letter-spacing: 0.5px;
    font-weight: bold;
    color: var(--bl-52);
    border-radius: 15px;
}
main.single .article-entry .post-meta-section .date time > div {
    display: inline-block;
    margin-right: 16px;
}
main.single .article-entry .post-meta-section .date time > div i{
    margin-right: 2px;
}
main.single .article-entry .post-meta-section .view i {
    margin-right: 4px;
}
main.single .article-entry .view{
    position: absolute;
    top: 0;
    right: 0;
}
main.single .article-entry .view a{
	border-bottom: none;
}
main.single .article-entry .item-scroll{
    width: 100%;
    margin: 1.5rem auto 0.5em;
}
main.single .main-image.image-via{
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 1;
    font-size: 0.6rem;
}
main.single .main-image.image-via,
main.single .main-image.image-via a{
	color: var(--white);
	border-bottom: none;
}
main.single .main-image .via-txt:before{
	content: ':';
    display: inline-block;
    padding: 0 3px;
}
main.single .article-entry .image-via {
	margin: 0 0 25px;
    font-size: 0.6rem;
    color: var(--txt-gr);
    text-align: right;
    position: relative;
}
.via-url a, .via-txt{
    display: inline-block;
}
main.single .article-entry .image-via .via-txt:before{
	content: ':';
    display: inline-block;
    padding: 0 3px;
}
main.single .article-entry .media-radius{
    border-radius: 15px;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
main.single .article-entry h1,
main.single .article-entry h2,
main.single .article-entry h3,
main.single .article-entry h4,
main.single .article-entry h5,
main.single .article-entry h6{
	margin: 80px 0 20px;
}
main.single .article-entry h1{
	font-size: 1.8rem;
	font-weight: bold;
}
main.single .article-entry h2{
	font-size: 1.5rem;
    font-weight: bold;
    position: relative;
    padding-bottom: 0.5rem;
}
main.single .article-entry h2::before{
    content: "";
    height: 4px;
    width: 100%;
    background-color: var(--gr-ee);
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
}
main.single .article-entry h2::after{
    content: "";
    display: block;
    height: 4px;
    width: 60px;
    background-color: var(--bl-41);
    bottom: 0;
    left: 0;
    position: absolute;
}
main.single .article-entry h3{
	font-size: 1.2rem;
    font-weight: bold;
    position: relative;
	margin-bottom: 0px;
	border-left: 4px solid var(--bl-41);
    padding-left: 12px;
}
main.single .article-entry h3::after{
    content: '';
    display: inline-block;
    width: 4px;
    height: 50%;
    background: var(--gr-e0);
    position: absolute;
    top: 0;
    left: -4px;
}
#linkcard{
	line-height: 1;
    letter-spacing: 0;
    background-color: var(--gr-fa);
    border: 1px solid var(--line-a);
    word-wrap: break-word;
	margin: 25px 0;
	overflow: hidden;
    border-radius: 15px;
	font-family: Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", YuGothic, "Yu Gothic", メイリオ, Meiryo, sans-serif;
}
#linkcard a {
    display: block;
    border-bottom: none;
}
.linkcard-thumb{
    display: inline-block;
	vertical-align: middle;
    width: 28%;
}
.linkcard-contents{
	display: inline-block;
    vertical-align: middle;
    width: 70%;
    padding: 2%;
}
.linkcard-title{
	font-size: min(11px,12px);
	font-weight: bold;
	line-height: 1.6;
    padding-bottom: 5%;
}
.linkcard-url{
	font-size: min(9px,11px);
    line-height: 1.3;
    padding: 0;
    text-align: left;
    color: var(--txt-gr);
    text-decoration: underline;
}
.linkcard-title span,
.linkcard-url span{
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}
/*----------------------------------------
0.0 List Item
----------------------------------------*/
.article-list{
	display: flex;
	flex-wrap: wrap;
}
#article-item{
	width: 30%;
	margin-bottom: 5%;
}
#article-item{
	box-shadow: none;
}
#article-item .item-scroll.item-reach.item-slide{
	transition: 0.6s ease;
}
#article-item:nth-child(3n-1){
	margin: 0 5% 5%;
}
#article-item h2{
	line-height: 1.8;
    font-size: 0.85rem;
    margin-top: 14px;
}
#article-item h2 span{
	background-image: linear-gradient(180deg, transparent 65%, #fff20d 0);
	background-size: 0 100%;
	background-repeat: no-repeat;
	text-decoration: none;
	transition: background-size 0.6s ease;
}
#article-item a{
	position: relative;
	overflow: hidden;
	border: none;
}
#article-item a:hover h2 span{
	background-size: 100% 100%;
}
#article-item a:hover img{
	transform: scale(1.1);
}
#article-item .text-meta{
    position: relative;
    color: var(--txt-gr);
	font-size: 0.8rem;
	font-weight: bold;
	line-height: 1;
    margin-top: 6px;
}
#article-item .text-meta > p{
	margin: 0;
}
#article-item .text-meta i {
    margin-right: 4px;
}
#article-item .text-meta p.view {
    position: absolute;
    top: 0;
    right: 0;
}
#article-item .item-scroll .thumb-animation img {
    aspect-ratio: 16 /9;
	overflow: hidden;
	border-radius: 14px;
}
.item-scroll .thumb-animation{
	position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    z-index: 2;
}
.item-scroll .thumb-animation .thumb-transform{
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0;
    z-index: 2;
    opacity: 1;
    overflow: hidden;
	border-radius: 14px;
    background: var(--bg-grid);
    transition: 0.2s;
    aspect-ratio: 16 / 9;
}
.item-scroll .thumb-animation img{
	opacity: 0;
    transform: scale3d(1.2, 1.2, 1);
    border-radius: 15px;
	overflow: hidden;
}
.item-scroll .text{
    opacity: 0;
    transition: 1s;
    padding: 10px 0 0;
}
.item-scroll.item-reach .thumb-animation .thumb-transform {
    opacity: 1;
}
.item-scroll.item-reach.item-slide .thumb-animation .thumb-transform {
    opacity: 0;
}
.item-scroll.item-reach.item-slide .thumb-animation img{
	opacity: 1;
	transition: 0.2s;
	transform: scale3d(1, 1, 1);
}
.item-scroll.item-reach.item-slide .text{
	opacity: 1;
}
.thumb-category-area {
    position: relative;
}
.thumb-category {
	position: absolute;
    bottom: 0;
    right: 0;
	height: 40px;
	width: 30%;
    z-index: 1;
}
.cat {
	width: 100%;
    height: 100%;
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.cat.img01 {
	background-image: url(assets/images/category/logo01.png);
}
.cat.img02 {
	background-image: url(assets/images/category/logo02.png);
}
.cat.img03 {
	background-image: url(assets/images/category/logo03.png);
}
.cat.img04 {
	background-image: url(assets/images/category/logo04.png);
}
.cat.img05 {
	background-image: url(assets/images/category/logo05.png);
}
.cat.img06 {
	background-image: url(assets/images/category/logo06.png);
}
.cat.img07 {
	background-image: url(assets/images/category/logo07.png);
}
.cat.img08 {
	background-image: url(assets/images/category/logo08.png);
}
.cat.img09 {
	background-image: url(assets/images/category/logo09.png);
}
.cat.img10 {
	background-image: url(assets/images/category/logo10.png);
}
/*----------------------------------------
0.0 Index
----------------------------------------*/
.index{
	position: relative;
    width: 100%;
    display: block;
    margin: 40px 0 50px;
    background-color: var(--bg-grid);
    border-radius: 15px;
}
.index-title{
	letter-spacing: 4px;
    width: 100%;
    display: block;
	padding: 15px 20px;
    text-align: left;
    color: var(--bl-22);
    font-weight: bold;
}
.index-toggle{display: none;}
.index-switch::before{
	content:"\f06e";
	font-family: "Font Awesome 6 Free";
	cursor:pointer;
	color: var(--bl-21);
	position: relative;
	left: 0;
}
.index-toggle:checked + .index-switch::before{
	content:"\f070";
	font-family: "Font Awesome 6 Free";
	position: relative;
    left: -1px;
}
.index-switch + .index-list{
	overflow: hidden;
    width: 0;
    height: 0;
}
.index-toggle:checked + .index-switch + .index-list{
	width: 100%;
    height: 100%;
    padding: 7px 20px;
    border-radius: 15px;
}
article ul.index-list {
	list-style: none;
}
.index-list li {
    margin-left: 0;
    padding: 18px 0px;
    border-bottom: 1px solid var(--line-a);
}
.index-list li:last-child{
    border-bottom: none;
}
.index-item ul.index-list {
    padding: 12px 0 0;
}
.index-item ul.index-list li{
    border-bottom: none;
    padding: 8px 0 8px 10px;
}
.index-item:before{content: normal;}
.index-link{
	border: none;
}
.index-link:hover{border:none;}
.index-number{}
label.index-switch{
	position: absolute;
    top: 1px;
    left: 48px;
    padding: 15px;
}
li .index-item{
	list-style-type: none!important;
    position: relative;
    padding-left: 10px;
}
li .index-item:before{
	background-color: var(--line-b);
    content: '';
    counter-increment: none;
    height: 1px;
    position: absolute;
    left: -1rem;
    top: 1.3rem;
    width: 1rem;
}
/*----------------------------------------
0.0 Sidebar
----------------------------------------*/
aside h2{
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--bl-22);
    font-weight: normal;
    letter-spacing: 4px;
}
aside .widgettitle{
	font-weight: bold;
	margin: 0 0 15px;
    text-align: left;
    color: var(--bl-22);
}
aside .widget{
	margin-bottom: 40px;
}
aside .widget ul{
    border-radius: 15px;
	padding: 7px 20px;
	background-color: var(--bg-grid);
}
aside .widget ul li{
    margin-left: 0;
	padding: 16px 0px;
    border-bottom: 1px solid var(--line-a);
}
aside .widget ul li:last-child{
    border-bottom: none;
}
aside .widget ul li a{
	font-size: 0.8rem;
	border-bottom: none;
    color: var(--bl-41);
    text-decoration: none;
	word-break: break-all;
}
aside .widget ul li a:hover{
	color: var(--gr-aa);
}
aside .widget.widget-categories ul li{
	font-weight: bold;
}
aside .widget.widget-categories ul li ul li{
	font-weight: normal;
}
aside .widget ul li ul{
    padding: 6px 0;
	background-color: transparent;
}
aside .widget ul li ul li{
    border: none;
	padding: 8px 0 8px 10px;
	position: relative;
	font-weight: normal;
}
aside .widget ul li ul li:before{
	background-color: var(--line-b);
    content: '';
    counter-increment: none;
    height: 1px;
	position: absolute;
    left: -1rem;
    top: 1.3rem;
    width: 1rem;
}
aside .widget-profile {
	background-color: var(--bg-grid);
    border-radius: 15px;
    overflow: hidden;
}
aside .widget-profile .profile-header{
	position: relative;
}
aside .widget-profile .picture-head {
	background-color: var(--bl-41);
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
aside .widget-profile .profile-picture{
	position: relative;
    overflow: hidden;
    border-radius: 50%;
    width: 100px;
	height: 100px;
	background-color: var(--white);
    margin: 0 auto;
    top: 45px;
}
aside .widget-profile .profile-contents {
	text-align: center;
    padding: 0 20px 30px;
    margin-top: 60px;
}
aside .widget-profile .about-name{
	font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 6px;
}
aside .widget-profile .about-label{
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
	color: var(--gr-99);
}
aside .widget-profile .text{
	font-size: 0.8rem;
    text-align: left;
    margin-top: 20px;
    line-height: 1.8;
}
aside .widget-contents{
    position: -webkit-sticky;
    position: sticky;
	top: 94px;
}
/*----------------------------------------
0.0 Footer
----------------------------------------*/
#copyright{
	padding: 30px 0;
    font-size: 0.5rem;
    text-align: center;
    margin: 0;
}
/*----------------------------------------
0.0 Codes
----------------------------------------*/
.article-entry :not(pre)>code{
    display: inline-block;
    margin: 0 .5em;
    padding: .3em .7em;
    color: #333;
    font-size: .85em;
    line-height: 1;
    letter-spacing: 0;
    background-color: var(--bg-grid);
    border-radius: 2px;
}
.article-entry .hlcode-wrap{
    margin: 0.85rem auto 2rem;
	border-radius: 15px;
    overflow: hidden;
}
/*----------------------------------------
0.0 Before After
----------------------------------------*/
.post-comparison-section {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: stretch;
    align-content: stretch;
    width: 100%;
}
/* Before After Container */
.bal-container {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: grab;
    overflow: hidden;
	background-color: var(--bg-grid);
	aspect-ratio: 16/9;
}
.bal-after {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.bal-before {
    display: block;
    position: absolute;
    top: 0;
    /* right: 0; */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}
.bal-before-inset {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}
.bal-after img,
.bal-before img {
    object-fit: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    object-position: 50% 50%;
    top: 0;
    bottom: 0;
    left: 0;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.bal-before-position {
	-webkit-backdrop-filter: saturate(120%) blur(2px);
    backdrop-filter: saturate(120%) blur(2px);
    background-color: rgba(0,0,0,0.8);
    color: var(--white);
    left: 0;
    pointer-events: none;
    border-radius: 0.2rem;
    padding: 2px 10px;
}
.bal-after-position {
	-webkit-backdrop-filter: saturate(120%) blur(2px);
    backdrop-filter: saturate(120%) blur(2px);
    background-color: rgba(0,0,0,0.8);
    color: var(--white);
    right: 0;
    pointer-events: none;
    border-radius: 0.2rem;
    padding: 2px 10px;
}
.before-label {
    position: absolute;
    bottom: 0;
    margin: 1rem;
    font-size: 1em;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.after-label {
    position: absolute;
    bottom: 0;
    margin: 1rem;
    font-size: 1em;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
/* handle and arrow */
.bal-handle {
    height: 41px;
    width: 41px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    margin-top: -21px;
    border: 2px solid #fff;
    border-radius: 1000px;
    z-index: 2;
    pointer-events: none;
	-webkit-backdrop-filter: saturate(180%) blur(2px);
    backdrop-filter: saturate(180%) blur(2px);
    background-color: rgba(255,255,255,0.5);
    box-shadow: 0 0 10px rgb(12, 12, 12);
}
.handle-left-arrow,
.handle-right-arrow {
    width: 0;
    height: 0;
    border: 6px inset transparent;
    position: absolute;
    top: 50%;
    margin-top: -6px;
}
.handle-left-arrow {
    border-right: 6px solid #fff;
    left: 50%;
    margin-left: -17px;
}
.handle-right-arrow {
    border-left: 6px solid #fff;
    right: 50%;
    margin-right: -17px;
}
.bal-handle::before {
    bottom: 50%;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgb(12, 12, 12);
}
.bal-handle::after {
    top: 50%;
    margin-top: 20.5px;
    box-shadow: 0 0 5px rgb(12, 12, 12);
}
.bal-handle::before,
.bal-handle::after {
    content: " ";
    display: block;
    width: 2px;
    background: #fff;
    height: 9999px;
    position: absolute;
    left: 50%;
    margin-left: -1.5px;
}
/*----------------------------------------
0.0 Front
----------------------------------------*/
.bg-statement {
	position: relative;
	width: 100%;
	height: calc(100vh - 63px);
}
.fit {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.fit .ovarlay {
	background-color: rgb(0 0 0 / 50%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    position: absolute;
}
.fitsize {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%,-50%);
}
.catch-ol {
	z-index: 2;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
	/* background-color: var(--white);*/
    /* mix-blend-mode: lighten;*/
}
.catch {
	position: absolute;
	text-align: center;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    z-index: 2;
}
.catch svg {
    width: 140px;
    height: auto;
}
.catch p {
	font-weight: bold;
	font-family: 'Montserrat', sans-serif;
    line-height: 1;
    text-align: center;
    color: var(--white);
    font-size: 0.933em;
    margin: 13px 0 0;
    border-top: 1px solid var(--white);
    padding-top: 20px;
}
/*----------------------------------------
0.0 Wordpress Misc
----------------------------------------*/
main.single .article-entry .media-contents{
	margin: 30px 0 8px;
    background-color: var(--bg-grid);
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
}
iframe{
	width: 100%;
	height: 100%;
}
iframe[src*="//www.youtube"]{
	border-radius: 15px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
iframe[src*="//gfycat"]{
	aspect-ratio: 16 / 10;
}
@media only screen and (max-width: 1180px){
	/*----------------------------------------
	0.0 Main
	----------------------------------------*/
	main .w-contents {
	    width: 100%;
		max-width: 1180px;
	    padding: 0 20px;
	}
	aside {
	    width: 280px;
	    min-width: 280px;
	    max-width: 280px;
	}
}
@media only screen and (max-width: 1020px){
	/*----------------------------------------
	0.0 Main
	----------------------------------------*/
	main.single .w-contents {
		max-width: 700px;
	    width: 100%;
	}
	main aside.contents-inner {
	    padding-top: 0%;
	}
	aside .widget-profile .profile-header {
	    height: 140px;
	}
	aside .widget-profile .profile-picture {
	    top: 85px;
		margin: 0 0 0 20px;
	}
	aside .widget-profile .profile-contents {
	    text-align: left;
	}
	/*----------------------------------------
	0.0 List Item
	----------------------------------------*/
	#article-item:nth-child(3n-1) {
	    margin: inherit;
	}
	#article-item {
	    width: 47.5%;
	    margin: 0 0 10% 0;
	}
	#article-item:nth-child(odd){
		margin: 0 5% 10% 0;
	}
	/*----------------------------------------
	0.0 Flex
	----------------------------------------*/
	.flx{
		display: grid;
	    grid-auto-flow: row;
	    grid-auto-columns: 100%;
	    width: 100%;
	}
	.flx .col1{
		order: 1;
	}
	.flx .col2{
		order: 3;
	}
	.flx .col3{
		order: 2;
	}
	.flx .linkcard-contents.col1{
		order: 2;
	}
	.flx .linkcard-thumb.col2{
		order: 1;
	}
	/*----------------------------------------
	0.0 Blog
	----------------------------------------*/
	main.single .article-entry {
	    margin: 0;
	}
	main.single .share-button {
	    position: relative;
	    top: 0;
		width: 100%;
		margin: 0 auto;
	}
	main.single .share-text {
	    -ms-writing-mode: inherit;
	    writing-mode: inherit;
	    line-height: inherit;
	    margin-bottom: 8px;
	}
	main.single .share-button ul {
		display: -webkit-flex;
	    display: -moz-flex;
	    display: -ms-flex;
	    display: -o-flex;
	    display: flex;
	}
	main.single .share-button ul li {
	    margin-right: 10px;
	}
	main.single .share-button ul li a {
	    margin-bottom: 0;
	}

	aside {
	    width: 100%;
	    max-width: 100%;
	    min-width: 100%;
	}
}
@media only screen and (max-width: 560px){
	/*----------------------------------------
	0.0 Layout
	----------------------------------------*/
	#container, nav, body #sidr-menu .icon-bar{
		-webkit-transition: all 0.2s cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-moz-transition: all 0.2s cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-o-transition: all 0.2s cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transition: all 0.2s cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		will-change: transition;
	}
	#container{
		position: relative;
	    left: 0;
	}
	main {
	    padding-top: 58px;
	}
	/*----------------------------------------
	0.0 Main
	----------------------------------------*/
	main .l-contents{
		width: 100%;
	}
	main .w-contents{
		padding: 0 20px;
	}
	main .contents-inner{
		padding: 12% 0;
	}
	/*----------------------------------------
	0.0 Page index / Header image
	----------------------------------------*/
	.page-index {
	    padding: 12% 0 0;
	}
	.article-index .index-postmeta {
	    padding: 0 10%;
	    text-align: left;
	}
	/*----------------------------------------
	0.0 Header
	----------------------------------------*/
	header {
	    height: 58px;
	}
	#logo{
    	margin: 6px 0 5px;
		padding: 0;
	    display: block;
	    text-align: center;
	}
	#logo a {
	    border: none;
	    display: inline-block;
	    margin: 3px 0 3px;
	}
	#logo a svg {
	    width: 125px;
	}
	#loader, #loader:after {
	    width: 32px;
	    height: 32px;
	}
	/*----------------------------------------
	0.0 Navigation
	----------------------------------------*/
	body #sidr-menu{
    	position: fixed;
		display: block;
        top: 0;
        right: 0;
        z-index: 7;
        width: 20px;
	    margin: 0;
    	padding: 20px 12px;
        cursor: pointer;
        will-change: transition, transform;
    	box-sizing: content-box;
    }
	body nav{
		position: fixed;
        overflow-y: auto;
		overflow-x: hidden;
        top: 0;
        right: -300px;
        width: 300px;
        height: 100%;
    	background-color: var(--white);
        z-index: 6;
    	padding: 58px 0 0 0;
    }
	body nav li{
        width: 100%;
        float: none;
    }
	body nav > ul > li.current_page_item,
	body nav > ul > li.current_page_parent{
		background-color: var(--bg-grid);
	}
	body nav > ul > li a{
		font-size: 0.92rem;
    	padding: 20px 36px;
		border-bottom: none;
		color: transparent!important;
		font-weight: bold;
        text-align: left;
		transition: color 0.35s, transform 0.2s;
		transform: translateX(100%);
		will-change: transform;
	}
	body nav > ul > li.current_page_item a:after,
	body nav > ul > li.current_page_parent a:after {
		border-bottom: none;
	}
	body.sidr-open nav li:nth-child(1) a{
	  transition-delay: 0.35s, 100ms;
	}
	body.sidr-open nav li:nth-child(2) a{
	  transition-delay: 0.35s, 150ms;
	}
	body.sidr-open nav li:nth-child(3) a{
	  transition-delay: 0.35s, 200ms;
	}
	body.sidr-open nav li:nth-child(4) a{
	  transition-delay: 0.35s, 250ms;
	}
	body.sidr-open nav li:nth-child(5) a{
	  transition-delay: 0.35s, 300ms;
	}
	body.sidr-open nav li:nth-child(6) a{
	  transition-delay: 0.35s, 350ms;
	}
    body.sidr-open nav{
        right:0;
    }
	body.sidr-open nav li.current_page_item a,
	body.sidr-open nav li.current_page_parent a{
		color: var(--bl-41)!important;
	}
	body.sidr-open nav li a{
		color: var(--bl-22)!important;
		transition: color 0.15s, transform 0.5s;
		transform: translateX(0%);
		transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		will-change: transition, transform;
	}
	body.sidr-open nav > ul > li.current_page_item a:after,
	body.sidr-open nav > ul > li.current_page_parent a:after {
		border-bottom: none;
	}
	body.sidr-open{
        overflow: hidden;
        height: 100%;
    }
    body.sidr-open #container{
        left: -300px;
    }
	body #sidr-menu .icon-bar{
	    height: 2px;
	    background-color: var(--bl-22);
	    display: block;
	    margin-bottom: 6px;
		border-radius: 15px;
	}
	body #sidr-menu .icon-bar:nth-child(1){
		width: 100%;
	}
	body #sidr-menu .icon-bar:nth-child(2) {
		width: 100%;
	}
	body #sidr-menu .icon-bar:nth-child(3){
		width: 100%;
	}
	body #sidr-menu .icon-bar:nth-child(3){
		margin-bottom: 0;
	}
    body.sidr-open #sidr-menu .icon-bar{
        background-color: var(--bl-22);
    }
    body.sidr-open #sidr-menu .icon-bar:nth-child(1){
        transform:translate(0,8px) rotate(45deg);
        -webkit-transform:translate(0,8px) rotate(45deg);
		will-change: transform;
    }
    body.sidr-open #sidr-menu .icon-bar:nth-child(2){
        transform:translate(-20px ,0);
        -webkit-transform:translate(-20px ,0);
        opacity:0;
		will-change: transform;
    }
    body.sidr-open #sidr-menu .icon-bar:nth-child(3){
        transform:translate(0,-8px) rotate(-45deg);
        -webkit-transform:translate(0,-8px) rotate(-45deg);
		will-change: transform;
    }
	/*----------------------------------------
	0.0 Flex
	----------------------------------------*/
	.flx{
		display: grid;
	    grid-auto-flow: row;
	    grid-auto-columns: 100%;
	    width: 100%;
	}
	.flx .col1{
		order: 1;
	}
	.flx .col2{
		order: 3;
	}
	.flx .col3{
		order: 2;
	}
	/*----------------------------------------
	0.0 Blog
	----------------------------------------*/
	main.single .flx-box{
	    padding-right: 0;
	}
	main.single .article-entry{
	    margin: 0;
		width: 100%;
		padding: 0;
	    background-color: transparent;
	}
	main.single .article-entry h2{
	    padding-bottom: 1rem;
	    line-height: 1.4;
	    font-size: 1.4em;
	}
	main.single .article-entry .item-scroll{
	    width: 100%;
    	margin: 20px auto 5px;
	}
	#article-item a:hover img{
		transform: inherit;
	}
	.article-index .index-postmeta h2{
	    font-size: 1.4rem;
	}
	/*----------------------------------------
	0.0 List Item
	----------------------------------------*/
	#article-item:nth-child(odd){
		margin: 0 0 16% 0
	}
	#article-item:nth-child(3n-1){
	    margin: 0 0 16% 0
	}
	#article-item{
	    width: 100%;
	    margin-bottom: 16%;
	}
	/*----------------------------------------
	0.0 Overlay
	----------------------------------------*/
	.ol{
		opacity: 0;
		visibility: hidden;
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 5;
		top: 0;
		left: 0;
		background: rgba(80, 80, 84, 0.2);
		-webkit-transition: all 0.2s cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-moz-transition: all 0.2s cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-o-transition: all 0.2s cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transition: all 0.2s cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		will-change: transition;
	}
	body.sidr-open .ol{
		opacity: 1;
		visibility: visible;
		overflow: hidden;
	}
	/*----------------------------------------
	0.0 Front
	----------------------------------------*/
	.bg-statement {
		position: relative;
		width: 100%;
		height: calc(100vh - 57px);
	}
	.catch svg {
	    width: 105px;
	    height: auto;
	}
	.catch p {
		font-size: 0.733em;
		padding-top: 18px;
	}
	/*----------------------------------------
	0.0 Wordpress Misc
	----------------------------------------*/
	iframe[src*="//gfycat"] {
	    aspect-ratio: 16 / 11;
	}
}