@charset "UTF-8";

/************************************
** CUSTOM TAKASHO CSS for UI Redesign at 202509  
************************************/
body {background-color: #f4f4f4;}
#content {background: #fff; margin-top: 0.1em; padding-bottom: 2em;}

/*** Header ***/
.header-in {padding: 1em 0; align-items: center;}
.tagline {display: none;}

/*logo*/
h1.logo {display: none;}
.logo.custom-takasho {display: flex;}

.logo.custom-takasho a {
    display: inline-flex;
    justify-content: center;}
.logo.custom-takasho img {max-height: 26px;}

/*logo (single)*/
.single .logo, .archive .logo {display: none;}
.single .logo.custom-takasho, .archive .logo.custom-takasho {display: flex;}

/*appeal image*/
#appeal {display: block;}
.appeal {
    background-image: url(https://www.takasho-studio.jp/tkss/wp-content/uploads/2025/09/blog_header_takasho4f_re2.jpg);
    background-size: cover;
    background-position: center;
}

@media screen and (max-width: 767px) {
.appeal {min-height: 90px;}
}


/*BreadCrumbs*/
.breadcrumbs {font-size: 0.7em;}
.breadcrumbs.wrap {margin-top: 0.25em;}
@media screen and (max-width: 768px) {
    .breadcrumbs {padding-bottom: 0;}
    .breadcrumbs.wrap {margin-top: 0.5em; margin-bottom: 0.5em;}
}
@media screen and (max-width: 1023px) {
    main.main, div.sidebar {margin-top: 0 !important;}
}


/***Single***/
.article-header {display: flex; flex-direction: column;}
.article-header .eye-catch-wrap {order:1;
    margin-right: -16px; margin-left: -16px;}
.article-header .entry-title {order:2; margin: 2em 0; padding: 0;}
.article-header .date-tags {order:3;
    display: flex; flex-direction: column; gap: 1em; text-align: left;}

.single .breadcrumbs span .current-item {display:none;}
.single .prf .image {max-width: 40px;}
.single .prf h2.name {font-size: 14px; background: transparent; padding: 0 8px 8px; margin: 0;}

@media screen and (max-width: 767px) {
    .single #sidebar {display: none;}
    .single main.main {padding-top: 0;}
}


/*** Content ***/
.cat-label {display: none;}
.ect-vertical-card .entry-card-wrap .entry-card-thumb img {border-radius: 10px;}

/*** Card ***/
.entry-card-title, .related-entry-card-title {font-size: 16px;}
.entry-card-snippet, .related-entry-card-snippet {
    font-size: 14px;
    line-height: 1.5;}


/*** Pagination ***/
.pagination-next-link, .comment-btn {
    font-size: 16px; font-weight: bold; 
    background: none; border: none;}
.page-numbers {
    font-size: 16px; height: 32px; width: 32px;
    border: none; line-height: 200%;}


/*** SideBar ***/
/*Profile Box*/
.prf-box {display: block !important;}
.prf {display: flex; align-items: center;}
#sidebar .prf .image {max-width: 64px;}
.prf .image a {display: flex;}
.prf .image img {border-radius: 50%;}
#sidebar .prf h2.name {
    background-color: transparent; font-size: 16px;
    padding: 0 12px 12px; align-items: center;}
.prf h2.name a {color: #08131a; text-decoration: none;} .prf h2.name a:hover {color: #08131a;}
.prf-description {font-size: 14px; /*font-weight: bold;*/ line-height: 150%; margin-top: 1em;}

ul.prf-socials {display: flex; gap: 0.5em; padding-left: 0.25em;}
.prf-socials li {list-style: none; font-size: 22px;}
.prf-socials a {color: #08131a80;}
.prf-socials a:hover {color: #08131aa8;}

/*Sidebar Widgets*/
#block-3, #block-5 {display: none;}

.sidebar h2, .sidebar h3 {margin: 0;}
.sidebar h2, .sidebar h3 {background-color: transparent; padding: 12px 4px;}
.widget h2 {font-size: 16px;}

#block-2 .wp-block-search__label {display: none;}
#block-2 input[type="search"] {padding: 4px 8px; font-size: 14px;}

#block-6 .wp-block-categories-list li {font-size: 14px;}
#block-6 .wp-block-categories-list li a {color: #000; padding: 2px 0;}


@media screen and (max-width: 1023px) {
    .no-mobile-sidebar .sidebar, .mobile-button-fmb .go-to-top-button, .no-mobile-header-logo #header .logo-header {display: block;}
    #content-in {display: flex;flex-direction: column-reverse;}
    #block-2, #block-3, #block-4, #block-5, #block-6 {display: none;}
    #custom_html-2 {margin-bottom: 0;}
}


/***SideBar (Mobile)***/
#slide-in-custom_html-2, #slide-in-block-3, #slide-in-block-5 {display: none;}



/*** Footer ***/
#footer {
    font-family: "DM Sans", sans-serif;
    margin-top: 0; padding: 0; background: #fafafa;}

#footer .wrap {width: 100%;}

.container .row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-right: -20px;
    margin-left: -20px;}
@media (min-width: 768px) {
    .container .row {flex-direction: row;}
}

#footer-in .container {
    max-width: 1320px; margin-right: auto; margin-left: auto;}

/** Studio link **/
#studio-all-link {
    display: flex; flex-direction: row; justify-content: space-evenly;
    padding: 40px 20px 20px; text-align: center;}

#studio-all-link a {color: #237a9b; text-decoration: none;}
#studio-all-link a:hover {color: #1db2ff;}
#studio-all-link ul li a {color: #1a1a1a;}

#studio-all-link .row {
    justify-content: flex-start; gap: 0 2em;
    padding: 0 20px; text-align: left;}
#studio-all-link > .row {flex-direction: column;}

#studio-all-link h2 {
    display: inline-block;
    font-size: 16px; color: #23809b; font-weight: 800;
    margin: 0 0 0.5em; padding: 0.5em 0;}
@media (min-width: 768px) {
    h2 {font-size: 2.8rem;}
}
#studio-all-link h3 {
    font-size: 12px; color: #237a9b; font-weight: 800; margin-bottom: 1.5em;}

@media (min-width: 768px) {
    h3 {font-size: 2.4rem;}
}

#studio-all-link ul {
    margin-bottom: 1.5em; padding-left: 0;}
#studio-all-link ul li {
    list-style: none;
    font-size: 12px; font-weight: bold; line-height: 1.4;
    margin: 0.7em 0 4px;}

@media (max-width: 767px) {
    #footer-in .container {gap: 12px;}
    .container .row {margin-right: 0; margin-left: 0;}
    #studio-all-link {padding: 40px 16px 20px}
    #studio-all-link .row {gap: 0; padding: 0;}
}

/** Footer logo **/
.site-footer-top {
    display: flex; flex-direction: column;
    width: 100%; padding: 24px; gap: 20px; align-items: center;
    color: #fff;
    background-image: -webkit-gradient(linear, right top, left top, from(#23809b), to(#359AD1));
    background-image: linear-gradient(to left, #23809b, #359AD1);}
@media (min-width: 768px) {
    .site-footer-top {flex-direction: row; margin: 0 auto;}
}

.site-footer-logo-wrapper {
    display: flex; flex-direction: column;
    width: 216px; margin: 0 auto;
    flex-wrap: wrap; row-gap: 5px; align-items: center;}
.site-footer-logo-wrapper a {display: flex; color: #fff; text-decoration: none;}

.site-footer-top .tag-line {
    font-size: 10px; letter-spacing: 0.2em; margin-bottom: 0;}


/*Hidden*/
.footer-bottom,
.footer-bottom-logo, .footer-bottom-content {display: none;}