/*
Theme Name: Twenty Twenty-Two Child
Theme URI: https://habone.biz/tt2/
Author: Himaart
Author URI: https://habone.biz/
Description: A child theme for TT2.
Requires at least: 6.0.2
Tested up to: 6.0.2
Version: 1.4.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwo-child
Template: twentytwentytwo
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments

Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two Child is distributed under the terms of the GNU GPL.
*/

/* all */
@keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

html {
    scroll-behavior: smooth;
}

body {
    /*background: url(http://maru-design.info/hinokino-athome-test/wp-content/uploads/2023/03/seamless-texture-natural-wood.jpg);*/
    line-height: 1.7;
}

.wp-site-blocks {
    background: rgb(255, 255, 255, 30%);
}

.wp-block-cover__inner-container *:last-child {
    margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: sans-serif !important;
    letter-spacing: 0.1em;
    margin-top: 1em;
    margin-bottom: 1em;
    font-weight: bold;
}

h1.has-background,
h2.has-background,
h3.has-background,
h4.has-background,
h5.has-background,
h6.has-background {
    padding: 0.5em 1em;
}

.page-title h2 {
    font-weight: bold;
}

.example-list h3 {
    font-size: 1.5em;
    border-bottom-color: #399;
    border-bottom-width: 6px;
}

p,
ul,
ol {
    margin-top: 1em;
    margin-bottom: 1em;
}

p[style="font-size:1.5em"] {
    line-height: 1.2;
}

ul {
    padding-left: 1em;
}

li {
    margin: 0.5em 0;
    line-height: 1.5;
}

a {
    transition: ease 0.5s;
    text-decoration-style: dashed;
}

header a,
footer a {
    text-decoration: none;
}

a:hover {
    opacity: 0.7;
}

.br-sp {
    display: none;
}

footer img {
    width: 100%;
}

main .wp-block-button:not(.navi) a {
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

main .wp-block-button:not(.navi) a:hover {
    transform: translateY(-5px);
    box-shadow: 0 13px 20px rgba(0,0,0,0.1);
}

main p a::after,
main li a::after,
main .wp-block-button a::after{
    content: "\f138";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-left: 5px;
}

main p a[target="_blank"]::after,
main li a[target="_blank"]::after,
main .wp-block-button a[target="_blank"]::after{
    content: "\f08e";
}

.menu-left-column a::after {
    content: "" !important;
}




/* Navigation */
.wp-block-navigation__container {
    gap: 0 !important;
}

.wp-block-navigation ul.wp-block-navigation__container .wp-block-navigation-item {
    width: 20%;
    margin: 0;
    text-align: center;
    display: block;
}

nav {
    margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
    margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
    width: unset;
    box-shadow: 3px 3px 5px #ddd;
    position: sticky !important;
    box-shadow: 0 0 5px rgb(0, 0, 0, 60%);
    margin-top: 0 !important;
    top: 0;
    z-index: 999;
}

.wp-block-navigation ul.wp-block-navigation__container {
    border-right: solid 1px #999;
}

.wp-block-navigation ul.wp-block-navigation__container .wp-block-navigation-item {
    width: calc(20% - 1px);
    border-left: solid 1px #999;
}

a.wp-block-navigation-item__content {
    padding: 20px 0;
}

.wp-block-navigation .wp-block-navigation-item a:hover,
.current-menu-item > a {
    text-decoration: none;
    background: #72aee63b;
}

.wp-block-navigation .wp-block-navigation-item a:focus {
    text-decoration: none;
}

header a.wp-block-button__link::after {
    content: "\f138";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-left: 5px
}

body header .navigation-contact .is-layout-flex {
    gap: 10px;
    margin-top: 10px;
}

.wp-block-navigation__responsive-container.is-menu-open {
    font-weight: bold;
}

.wp-block-navigation .wp-block-navigation-item__content {
    position: relative;
}

.wp-block-navigation .wp-block-navigation__submenu-icon {
    position: absolute;
    top: 40%;
    right: 8px;
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content::before {
    content: "-";
    margin-right: 0.5em;
}

ul.wp-block-navigation-submenu {
    border: 1px solid #ccc;
    border-left: none;
    font-weight: normal;
}

ul.wp-block-navigation-submenu li {
    width: 100%!important;
}

ul.wp-block-navigation-submenu li a {
    justify-content: center;
    border-top: 1px solid #ccc;
}

nav ol.has-background, nav ul.has-background {
    padding: 0;
}


/* responsive-navigation */

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
    padding: 0;
}

ul.wp-block-navigation__submenu-container.has-text-color.has-background.has-background-background-color.wp-block-navigation-submenu li {
    border-color: transparent;
}


/* Contents */
.wp-site-blocks>.wp-block-cover.page-contents-container {
    max-width: 1000px;
    margin-left: auto !important;
    margin-right: auto !Important;
    padding: 0 !important;
}

body:not(.home) .wp-site-blocks>.wp-block-cover.page-contents-container {
    box-shadow: none;
}

.home .wp-block-cover {
    box-shadow: 0 0 5px rgb(0, 0, 0, 60%);
}


/* Footer */
.page-top-button {
    position: fixed;
    bottom: 3em;
    left: 50%;
    z-index: 9999;
    transform: translateX(460px);
}

.page-top-button a {
    width: 80px;
    height: 80px;
    border-radius: 50% !important;
    opacity: 0.6;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* TOP Slider */
.stx-main-container {
    max-width: 1000px;
    max-height: 381px;
    box-shadow: 0 0 5px rgb(0, 0, 0, 60%);
}

/* TOP Information */
.new-contents-information h2 {
    animation: blink 1.5s ease-in-out infinite alternate;
    font-weight: bold;
    color: #f60 !important;
}

.new-contents-information ul {
    padding-left: 0 !important;
    list-style: none;
    font-size: 1.2em;
}

.new-contents-information li {
    margin-bottom: 0.5em;
}

.new-contents-information p:first-child {
    letter-spacing: 0.3em;
}

/* TOP Three-column-information */
.top-three-column-information h2 {
    padding: 0.5em;
    margin-top: 0;
    height: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-three-column-information figure:last-child {
    margin-bottom: 0;
}

.top-three-column-information ul {
    padding-left: 0.5em;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

.top-three-column-information ul li {
    width: fit-content;
}

/* TOP ZEH-table */
.ZEH-table {
    overflow-x: scroll;
    font-size: 0.8em;
}

.ZEH-table table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.ZEH-table table th,
.ZEH-table table td {
    border: 1px solid #000;
    padding: 0.5em;
}


/* Hinoki Sidebar */
.is-layout-flow.wp-block-column.menu-left-column>div {
    position: sticky;
    top: 100px;
    z-index: 99;
}

body .menu-left-column .is-layout-flex.wp-block-buttons {
    gap: 0;
    margin-block-start: 0;
}

body .menu-left-column .is-layout-flex.wp-block-buttons a {
    border: 1px solid #999;
    border-top: none;
    color: #000;
}

.sidebar-main-columns figure {
    text-align: center;
}

figure.wp-block-image.size-full.sidebar-header-figure {
    background: #0064b5;
    margin-bottom: 0;
}

.now-section a {
    background-color: #72aee63b!important;
}

nav.company-sidebar-nav {
    box-shadow: none;
}

.company-sidebar-nav ul, .company-sidebar-nav ul li {
    width: 100%!important;
}

.company-sidebar-nav ul li a {
    border-bottom: 1px solid #999;
    font-size: 14px;
}

/* Menu */
.menu-list-block .wp-block-group.wp-container-14 {
    justify-content: space-between;
}

.menu-list-block table th,
.menu-list-block table td {
    vertical-align: top;
    line-height: 1.3;
}

.menu-list-block table tr :first-child {
    padding-left: 0;
}

.menu-list-block table tr :last-child {
    padding-right: 0;
}

.menu-list-block table strong {
    white-space: nowrap;
}

.menu-list-block table strong::before {
    content: "・";
}

/* example */

.wp-block-gallery.has-nested-images.example-list figure.wp-block-image a img {
    width: 100%;
}

/* spec */

.spec-columns > .is-layout-flow.wp-block-column {
    border-left: 6px solid #bcaea4;
    border-top: 1px solid #bcaea4;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}

.spec-columns h3 {
    padding: 0.3em 1em;
}

.spec-columns ul {
    padding-left: 1em;
    font-size: 16px;
}

.spec-columns li {
    margin: 0.5em 0;
    line-height: 1.3;
}

.spec-columns a,
.spec-recomend a {
    color: #FF6633;
    text-decoration: underline;
}

.spec-columns p.figcaption {
    margin-top: 6px;
}

.spec-jio {
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}

.spec-jio .wp-block-columns {
    margin-top: 0;
    gap: 0;
}

.spec-jio .wp-block-column {
    border: 1px solid transparent;
    border-left-color: #ccc;
    border-bottom-color: #ccc;
}

.spec-jio .wp-block-column:last-child {
    border-right-color: #ccc;
}

.spec-jio .is-style-vk-group-solid {
    padding: 20px 10px;
    border: none;
}

.spec-recomend {
    border: 1px solid #ccc;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}

.spec-recomend h4 {
    border: 2px solid;
    padding: 0.5em 1em;
}


/* company */

.company-profile.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th {
    background-color: #fff;
    border-color: transparent;
    border-right: #ccc dotted 1.5px;
}

.company-profile.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr td {
    background-color: #fff;
    border-color: transparent;
    font-size: 16px;
}

.company-profile tr th, 
.company-profile tr td {
    background: url(https://maru-design.info/hinokino-athome-test/wp-content/uploads/2023/03/to_back.png) repeat-x left bottom;
}

.company-profile mark {
    line-height: 1.4;
    display: inline-block;
}


/* company2 */

.work-client-button a {
    padding: 0.3em 1em;
}


/* event */

.event-column h4 {
    border-color: #900;
    background: url(https://maru-design.info/hinokino-athome-test/wp-content/uploads/2023/04/owari-triming.png) no-repeat left 2em center;
}

.event-column .wp-block-group .wp-block-group:nth-child(2) h4 {
    background: none;
}


/* gift */

.border-red {
    border: 2px solid #903;
    border-radius: 10px;
}

.border-blue {
    border-color: #369;
}


/* Postmail */



form table {
    border-collapse: collapse;
    width: 100%;
    line-height: 0;
}

form table th, form table td {
    white-space: nowrap;
    padding: 1em;
    background: rgb(120 119 187 / 20%);
    border: 1px solid #7777bb;
}

form table th {
    width: 7em;
}

form table td {
    background-color: rgb(188 185 185 / 20%);
}

span.wpcf7-list-item {
    display: block;
    margin: 0.5em 0;
}

form table p {
    margin: 0;
    line-height: 1.4;
}

form table th p span {
    font-size: 0.8em;
    color: #903;
    display: block;
}

form input[type="text"], form input[type="email"], form input[type="tel"], form textarea {
    width: 100%;
    background: rgb(255 255 255 / 90%);
    border-width: 1px;
    height: 1.5em;
}

form p.submit {
    text-align: center;
}

form input[type="submit"],
form input[type="reset"] {
    padding: 1em 2em;
    font-size: 18px;
    cursor: pointer;
}

.wpcf7-spinner {
    margin: 0 5px;
}


/* long-term-superior-housing */
figure.padding-bottom-zero {
    transform: translateY(40px);
}

.long-term-top p.has-background {
    border: 2px solid #FABE2C;
    border-radius: 30px;
    box-shadow: 1px 1px 0 #FABE2C;
}

figure.alignright {
    text-align: right;
}

.long-term-message p.has-background {
    border: 2px solid #0E66B2;
    border-radius: 30px;
    box-shadow: 1px 1px 0 #0E66B2;
}

.long-term-merit .wp-block-column.is-vertically-aligned-top {
    align-self: stretch;
    border: 2px solid #FABE2C;
}

.long-term-standard .wp-block-group {
    border: solid 1px #0E66B2;
    border-radius: 20px;
}

.long-term-standard .wp-block-group h5 {
    padding: 0.5em;
    background: #EAF0F6;
    border-radius: 20px 20px 0 0;
    border-bottom: solid 1px #0E66B2;
    color: #0E66B2;
}

.long-term-standard .wp-block-group p {
    padding: 0.5em 1em;
    margin-top: 0;
}

.long-term-standard {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 1em;
}

.long-term-standard > * {
    margin: 0!important;
}

.long-term-standard :first-child {
    grid-column: 1/2;
    grid-row: 1/2;
}

.long-term-standard :nth-child(2) {
    grid-column: 1/2;
    grid-row: 2/3;
}

.long-term-standard :nth-child(3) {
    grid-column: 1/2;
    grid-row: 3/4;
}

.long-term-standard :nth-child(4) {
    grid-column: 2/3;
    grid-row: 3/4;
}

.long-term-standard :nth-child(5) {
    grid-column: 3/4;
    grid-row: 1/2;
}

.long-term-standard :nth-child(6) {
    grid-column: 3/4;
    grid-row: 2/3;
}

.long-term-standard :nth-child(7) {
    grid-column: 3/4;
    grid-row: 3/4;
}

.long-term-standard :nth-child(8) {
    grid-column: 2/3;
    grid-row: 1/3;
}

.long-term-standard figure img {
    height: 100%;
    object-fit: cover;
}

.long-term-eco figure,
.long-term-endurance figure{
    margin-top: 0;
}

p.banner-message {
    min-height: 45px;
    background: url(https://maru-design.info/hinokino-athome-test/wp-content/uploads/2023/04/banner-left.png)no-repeat center left 5% / contain,url(https://maru-design.info/hinokino-athome-test/wp-content/uploads/2023/04/banner-right.png)no-repeat center right 5% / contain;
}

.long-term-endurance .long-term-three-generations {
    height: 100%;
    background: url(https://maru-design.info/hinokino-athome-test/wp-content/uploads/2023/04/long-term_10.png)no-repeat center bottom / 70%;
}


/* ZEH */

.zeh-top {
    background-image: url(https://maru-design.info/hinokino-athome-test/wp-content/uploads/2023/04/zeh_01.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 450px;
    border: solid 1em #FFF8E6;
}

.zeh-top .wp-block-group {
    min-height: 560px;
    justify-content: space-between;
}

body .is-layout-flex.zeh-energy {
    align-items: stretch;
}

.zeh-energy h4 {
    border-radius: 20px 20px 0 0;
    margin-bottom: 0;
}



/* Navigetion list */
@media (min-width: 921px) {
    .wp-block-navigation ul.wp-block-navigation__container .wp-block-navigation-item.nav-top {
        display: none;
    }
	nav div#modal-7-content {
    width: 1000px;
    margin: auto;
}
}

/* Navigation button */
@media (max-width: 920px) {

    /* Logo */
    .wp-block-site-logo {
        padding-top: 20px;
    }

    /* Header-Contact */
    body .is-layout-flex.header-logo-contact {
        justify-content: center;
    }

    /* PC-Navigation */
    .wp-block-navigation ul.wp-block-navigation__container {
        border-right: none;
    }

    .wp-block-navigation ul.wp-block-navigation__container .wp-block-navigation-item {
        width: 100%;
        border-left: none;
        border-bottom: solid 1px #999;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
        padding: 1em 0;
    }


    /* SP-Navigation */
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
        padding: 10px;
        position: fixed;
        background: rgb(255, 255, 255, 80%);
        top: 10px;
        right: 10px;
        z-index: 99999;
        box-shadow: 0 0 5px rgb(0, 0, 0, 30%);
    }

    /* PAGE Page-title */
    .page .page-title {
        border-top: 1px solid #fff;
    }

    .page .page-title .wp-block-post-title {
        font-size: 1.3em !important;
    }
}

@media (max-width: 781px) {
    .spec-columns h3, .spec-columns figure {
        max-width: 100%;
        text-align: center;
    }
    .spec-columns .wp-block-gallery.has-nested-images figure.wp-block-image img {
        max-height: 200px;
        max-width: 150px!Important;
        width: 200px;
    }
	
	.flex-reverse > :first-child {
    order: 2;
}
	
	.long-term-grade {
    max-width: 450px !important;
}
	
	.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table.has-fixed-layout {
table-layout: auto;
}

}

@media (max-width: 768px) {
    .home p.has-text-align-center {
        text-align: left;
    }

    p.sp-text-align-center {
        text-align: center;
    }

    p.has-text-align-center.figcaption {
        text-align: center!important;
    }
	
	.long-term-standard {
    display: flex;
    flex-wrap: wrap;
}
	
	.long-term-standard > * {
    width: 48%;
}
	
	.long-term-standard figure img {
    height: 250px;
    object-position: 10%;
}
	
	figure.wp-block-flexible-table-block-table.is-scroll-on-mobile {
    box-shadow: -5px 0 10px rgba(0,0,0,0.1) inset;
}
	
	.wp-block-flexible-table-block-table.is-scroll-on-mobile table {
    white-space: nowrap;
    width: auto;
}
	
	.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr td {
    background-color: #ffffff00;
}
}

@media (max-width: 600px) {
    
    .is-style-vk-group-shadow {
        padding: 1em;
    }
    .is-style-vk-group-solid {
        border: solid 1px;
        padding: 1em;
    }

    .page-contents-container .wp-block-cover {
        padding: 0.5em !important;
    }

    header .is-nowrap {
        flex-wrap: wrap !important;
    }

    header .is-nowrap>* {
        width: 100%;
        flex-basis: 100%;
    }

    .flex-wrap-wrap {
        flex-wrap: wrap !important;
    }

    flex-wrap-wrap .is-nowrap>* {
        width: 100%;
        flex-basis: 100%;
    }

    .page-contents-container .is-layout-constrained.wp-block-group {
        padding: 0.8em !important;
    }

    .page-top-button {
        bottom: 3em;
        left: auto;
        transform: translateX(0);
        right: 1em;
    }

    .page-top-button a {
        width: 50px;
        height: 50px;
    }

    .br-sp {
        display: inline;
    }

    .wp-block-spacer {
        height: 0!important;
    }

    figure.alignright, figure.alignleft {
        margin: 2em auto;
        float: none;
        width: 100%;
    }

    .sp-one-column {
        flex-wrap: wrap!important;
    }

    .sp-one-column > * {
        width: 100%!important;
    }

    /* lineup */

    .example-list h3 {
        font-size: 1.2em;
    }

    .wp-block-gallery.wp-block-gallery-11.example-list {
        gap: 1px;
    }

    /* Spec */

    .wp-block-group.is-content-justification-space-between.is-nowrap.is-layout-flex {
        flex-wrap: wrap;
    }

    /* Event */

    .event-column h4 {
        background: url(https://maru-design.info/hinokino-athome-test/wp-content/uploads/2023/04/owari-triming.png) no-repeat left center/80px;
    }

    /* Postmail */

    .table-scroll {
        overflow: scroll;
        box-shadow: -5px 0 10px rgba(0,0,0,0.1) inset;
    }
	
	/* long-term-sperior-housing */
	
	body .is-layout-flow > .alignright {
    float: none;
    margin-inline-start: 0;
    margin-inline-end: 0;
}
	
	.long-term-top, 
	.long-term-message, 
	.long-term-merit {
    padding: 1em!important;
}
	
	p.banner-message {
    background-position: left center,right center;
    background-size: 50px 100%;
    line-height: 1.2;
    height: auto;
}
	
	figure.padding-bottom-zero {
    transform: translateY(1em);
}
	
	/* ZEH */
	
	.zeh-top {
    margin-top: 0 !important;
    padding: 0 !important;
    background-image: url(https://maru-design.info/hinokino-athome-test/wp-content/uploads/2023/04/zeh_01_sp.png);
    background-position: center bottom;
    background-size: auto 400px;
}
	
	.zeh-top .wp-block-group {
    min-height: 415px;
    width: 100%;
}
	
	.zeh-top .wp-block-group figure {
    text-align: right;
}
	
	.zeh-top figure:first-child img {
    transform: scale(0.7) translate(3em , -4em);
}
	
	.zeh-top figure:last-child img {
    transform: scale(0.7) translate(60px , 70px);
}
	

}


@media (max-width: 499px) {
	.long-term-standard > * {
    width: 100%;
}
}