@charset "utf-8";

.contentsbox{
	width: 90%;
    margin: 0px 5%;
}
.float_left,
.float_right{
	float:none;
	clear:both;
}
img{
	max-width: 100%;
    height: auto;
}

header {
    position: relative;
    padding-top: 0;
    top: 0;
}
img#imgLogo {
    width: 120px;
	height: auto;
	aspect-ratio: 287 / 63;
	object-fit: contain;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 0;
}
#btnHeaderContact {
    bottom: 5vw;
    top: auto;
    opacity: 0.5;
}

#menuContainer{
    background: var(--white);
    padding: 30px;
    box-shadow: 4px 2px 10px #00000018;
    position: fixed;
    top: 0;
    right: -100%;
    width: 80vw;
    max-height: 86vh;
    overflow: scroll;

    transition: all 0.3s;

    &.open{
        right: 0;
    }
}


.smp-navigation{
    margin-bottom: 40px;
	max-width: 285px;

    padding-top: 25vw;
    background: url(../img/logo.png) no-repeat top center;
    background-size: 80%;
	
	ul{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12vw 0;
        font-size: 1.4em;
        font-weight: 600;
		justify-content: center;
	}

	
	a{
		transition: all 0.3s;
		&:hover{
			color: var(--pink);
		}
	}
}

#spContactButtons{
    & > ul{
        display: flex;
        justify-content: center;
    }
    & a[href*="contact"]{
        width: 57px;
        height: 57px;
        display: block;
        background-color: var(--blue);
        border-radius: 30px;
        &::before{
            content: "";
            display: block;
            width: 24px;
            height: 18px;
            background-repeat: no-repeat;
            background-size: contain;
            background-image: url(../img/icoMail.svg);
            position: relative;
            top: calc((57px - 18px) / 2);
            left: calc((57px - 24px) / 2);
        }	
}
}

.section-title {
    text-align: center;
    font-size: 14vw;
    margin-bottom: 1.5em;
    &::before{
        left: calc(50% - 30px);
        top: 1.3em;
    }
    span {
        font-size: 4vw;
    }
}
.section-title span:not([class]) {
    text-align: center;
    display: block;
    width: 100%;
}
.section-header {
    margin-bottom: 5vh;
}


.tagline{
	font-size: 7vw;
	margin-top: 10vw;
	＆br{
		display:inline;
	}
}

.btnLink {
    width: auto;
    max-width: 330px;
    margin: 40px 30px;

    &.mini{
        padding: 15px 0;
        margin: auto;
        &::after{
            right: 15px;
            top: 10px;
        }
        &::before{
            right: 28px;
            top: 21px;
        }
    }
}

.wpcf7-form .wpcf7-submit.btnLink {
    width: min(330px, 100%);
    margin-left: auto;
    margin-right: auto;
}

#btnGototop {
    bottom: 11vw;
    right: 3vw;
    background-position:center bottom;
    background-size: contain;
    width: 15vw;
    height: 18vw;
}

#mainVisual {
    height: 133vw;
}

.hero__front {
    width: 90%;
    right: -15vw;
}
.title-line {
    margin: 10px auto;
}
.hero__content {
    bottom: 15%;
    left: auto;
    transform: none;
    width: 100%;
    text-align: center;
}
.hero__back {
    top: 15vw;
    bottom: auto;
    left: 10vw;
    right: 10vw;
    transform: none;
}
.hero__logo {
    & h1 {
        span img{
            width: 60%;
        }
        img{
            width: 100%;
        }
    }
}
.hero__dots {
    bottom: 20px;
    gap: 20px;
}
.dot {
    width: 12px;
    height: 12px;
    border-radius: 6px;
}
.dot.active {
    width: 48px;
}

#top01 {
    padding: 30px 0;

    h3 {
        font-size: 8vw;
        margin-top: 1.5em;
        word-break: auto-phrase;
        line-height: 1.5;
        & + p {
            text-align: left;
        }
    }
    ul {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 0;

        li {
            width: 100%;
        }
        & p {
            margin: 1em;
        }
        a {
            padding-bottom: 3em;
        }
    }
}
#top02 {
    & .section-title {
        font-size: 12vw;
        letter-spacing: 0;
    }
    .dxSlider-slide {
        padding: 60px 0;
    }
    .dxSlider-Content {
        flex-direction: column;
		min-width: 0;
        & > .dxContent-text {
            width: 100%;
			min-width: 0;
        }
        h3 {
			width: 100%;
			min-width: 0;
			box-sizing: border-box;
            font-size: clamp(24px, 7vw, 32px);
            text-align: center;
            line-height: 1.45;
            margin-bottom: 0.8em;
            word-break: normal;
            overflow-wrap: anywhere;
        }
        .dxHeadline > .dxHeadline-main,
        .dxHeadline > .dxHeadline-sub {
            display: block;
			width: 100%;
			min-width: 0;
			box-sizing: border-box;
            max-width: 100%;
            white-space: normal;
            word-break: normal;
            overflow-wrap: anywhere;
        }
        .dxHeadline > .dxHeadline-main {
            font-size: 1em;
            line-height: 1.4;
        }
        .dxHeadline > .dxHeadline-sub {
            margin-top: 0.65em;
            padding-inline: 0.5em;
            font-size: clamp(16px, 4.6vw, 21px);
            line-height: 1.65;
        }
        & > .dxImage {
            padding-right: 10px;
            padding-bottom: 10px;
            margin-top: 20px;
            &::after {
                right: -10px;
                bottom: -10px;
            }
        }
    }
}

#top03 {
    padding: 30px 0;

    &::after{
        width: 40%;
        top: 38vw;
    }

    & .deco2{	bottom: auto; left: auto; top: 12vw; right: 15vw; width: 27px;}
	& .deco6{	bottom: 22vw; right: -1vw; width: 35px; height: 35px;}
	& .deco7{	top: 0; left: 15%;  width: 30px; height: 30px;}


}

#top04 {
    & .worksContents {
        &.contentsbox.thin {
            max-width: none;
            width: auto;
            padding-right: 0;
        }
        & > h3 {
            font-size: 7vw;
        }
        & p {
            font-size: 4.5vw;
        }
    }
    & a.btnWorks{
        width: auto;
        max-width: 330px;
        margin: 20px 30px;
    }

    .worksSlider li {
        width: auto;
        margin: 0 7.5vw;
    }
}

#top05 {
    &::after {
        height: 280vw;
        width: 15vw;
        left: 83vw;
        bottom: 60vw;
    }

    & ul {
        display: flex;
        gap: 10vw;
        flex-direction: column;
        & li {
            width: 100%;
        }
    }
}

.infolist{
	display: flex;
	flex-wrap: wrap;
}
.ui-tabs ul.infolist.ui-tabs-panel {
	display: flex;
}

.infolist.boxFour li{
	float: none;
	border-bottom: 1px solid #6d8c9e;
	width: 44%;
    margin: 0 3% 15px;
    padding-bottom: 15px;
}
.infolist li:last-child,
.infolist li:nth-last-child(2){
	border: none;
	padding-bottom:0;
}

.infolist.boxThree > li:nth-child(3n) {
    margin-right: 3%;
}
.infolist.boxFive {
    & li {
        width: 48%;
        & h3{
            text-align: center;
            line-height: 1;
            font-size: 3.7vw;
        }
    }
}
.infolist li h3 {
    font-size: 1.1em;
    line-height: 1.3;
}
.infolist li p {
    font-size: 1em;
    line-height: 1.3;
}

.infolist .imgdammy{
    height: auto;
}
.infolist li img{
	display: block;
	margin:0 auto 15px;
	max-width: 100%;
	width: 100%
}
#pagetitle {
    height: 70vw;
}

ul#breadlist {
    margin-top: 1em;
    font-size: 3vw;
    padding: 0 0.5em;
    position: relative;
}


#footCompany {
    padding: 60px 0 30px;
    & h2 {
        font-size: 9vw;
        letter-spacing: 0.06em;
        word-break: auto-phrase;
        margin: 0 0.5em 1em;
        line-height: 1.6;
    }
    & p {
        margin: 0 1.5em 4em;
        font-size: 4.3vw;
    }
}
footer {
    padding: 60px 0 0;

    .section-title{
        text-align: center;
        font-size: 14vw;

        &::before{
            left: calc(50% - 30px);
            top: 1.3em;
        }

        span {
            font-size: 4.5vw;
        }
    }
}
.footer-contents {
    flex-direction: column;
}
.footer-text {
    flex-direction: column;
    align-items: center;
    text-align: center;

    & > p {
        font-size: 4vw;
    }
    & > a {
        width: 92px;
        height: 92px;
        margin: 50px 0;
        &::before {
            top: calc((92px - 21px) / 2);
            left: calc((92px - 28px) / 2);
        }
    }
}
.footer-navigation {
    max-width: none;
    ul {
        gap: 2em;
        font-size: 4vw;
        margin: 0 8vw;
        grid-template-columns: 8em 10em;
    }
}
.footer-info {
    margin: 0 10vw;
    flex-direction: column;
}

.footer-logo img{
    max-width: 55vw;

}
.footer-media {
    max-width: none;
    text-align: center;
    margin-top: 45px;
    a[class*="sns"] {
        width: 32px;
        height: 32px;
        margin: 0 20px;
    }
}
.copyright {
    margin-top: 60px;
    line-height: 1.8;
}

#tblContact th,
#tblContact td{
	display:block;
	width:90%;
}
#tblContact th{
	border-bottom:none;
	padding:2.5% 2.5% 0;
	font-size:1.2em;
}
#tblContact td{
	padding:0 2.5% 2.5%;
}

.privacypolicy address a{
    color: #fff;
}


#contact-tel {
    padding: 5%;
    margin: 0;
}
#contact-tel h3 {
    padding: 10px;
    font-size: 1.8em;
    margin-bottom: 15px;
}

.sitemap #container div > ul > li,
.sitemap #container div > ul > li:hover{    background-size: auto 100%;}

.sitemap #container div > ul > li > ul {
    flex-wrap: wrap;
    justify-content:space-between;
}
.sitemap #container div > ul > li > ul li{width: 48%;}

#pagenation .navBack,
#pagenation .navNext {
    bottom: 0em;
    width: 45vw;
}


.page #container,
.page.contact #container {
    padding: 15vw 0;
}

.archive #container {
    padding: 20vw 0;
}

.single #container{
    margin: 8vw 0 15vw;
}

.single #container > .contentsbox.hasSidebar {
    gap: 10vw;
    flex-direction: column;
    width: 90%;
    margin: 0 5%;

    & #entryBody {
        width: 100%;
    }

    & #sidebar {
        width: 90%;
        padding: 5%;
        background:var(--colorBgGray);
        margin-bottom: 15vw;
    }
}


.single #container #entryBody{
    padding-bottom: 0;
    h2{
        font-size: 6vw;
    }
    h3{
        font-size: 4.5vw;
    }
    h4{
        font-size: 1em;
    }

}


section[id*="service"] {
    & .contentsbox > div {
        gap: 5vw;
        flex-direction: column-reverse;
    }
    & .section-title {
        text-align: left;
        font-size: 7.5vw;
        &::before {
            left: auto;
            top: 1.3em;
            width: 0.8em;
            height: 6px;
        }
    }


    & .serviceContents {
        width: 100%;
            & p {
            font-size: 1.7em;
        }
    }
    & .serviceImage {
        padding-right: 10px;
        padding-bottom: 10px;
        img {
            box-shadow: 10px 10px 0 var(--yellow);
        }
    }
}
#company1 {
    margin-bottom: 0;

    .contentsbox {
        background:none;
    }
    .deco1 {top: -9vw;left: -1vw;width: 30px;height: 30px;}
    .deco4.big {top: 60vw;left: auto;right: 10vw;width: 4vw;height: 4vw; }

    & h2 + div {
        width: 100%;

        &::before{
            content: "";
            display: block;
            background: url(../img/icoLogomark.svg) no-repeat center;
            width: 30vw;
            height: 35vw;
            background-size: contain;
            margin: 0 auto 5vw;

        }
        
        h3 {
            font-size: 5vw;
            text-align: center;
        }
        p {
            font-size: 3.8vw;
        }
    }
}

#company2 {
    padding: 50px 0 80px;
    margin: 0 0 50px;

    & ul {
        li {
            padding-bottom: 40px;
            border-bottom: 1px solid var(--black);
            margin-bottom: 40px;
            display: flex;
            gap: 3%;
            flex-direction: column-reverse;

            & > div,
            & > div.staffimg {
                width: 100%;
            }
            & > div{
                & > div.staffimg {
                    display: block;
                    margin-bottom: 5vw;
                }
            }
            & > div.staffimg { display: none;}
        }
    }
    h3 {
        font-size: 10vw;
    }
    p {
        font-size: 4vw;
    }
}

#company3{
    &::after { content: none;    }

    .deco1 {top: -9vw;left: -1vw;width: 30px;height: 30px;}


    td,th{
        width: calc(100% - 20px);
    }
    th{
        padding: 2px 10px;
        text-align: left;
        display: block;
        font-size: 4vw;
    }
    td{
        padding: 10px;
        display: block;
        font-size: 4vw;
        line-height: 1.75;
    }
    iframe{
        height: 90vw;
    }
}

#dataCategory {
    flex-wrap: wrap;
    & > li {
        width: auto;
        min-width: 10em;
        margin-bottom: 0.7em;
    }

    .archive.works &,
    .tax-works_category &{
        flex-direction: column;
        align-items: center;

        & > li{
            width: 60%;
            margin-bottom: 0.8em;
        }
    }
}


.news-list{
    li {
        padding: 1em 0;
        a {
            gap: 0.5em 1em;
            grid-template-columns: 6em 6em 1fr;
            grid-template-areas:
                "category date ."
                "title title title";
            
                body[class*="news"] &{
                    grid-template-columns: 6em 6em 1fr;
                    grid-template-areas:
                        "date category ."
                        "title title title";
                }
        }

        time {
            grid-area: date;
        }

        .news-category {
            grid-area: category;
        }

        .news-title {
            grid-area: title;
        }
    }
}

.pagination {
    gap: 1.5em;
}

.archive #container {
    h3 {
        font-size: 5.5vw;
    }
}
.archive.blog #container {
    .deco3 {width: 9vw;height: 11vw;top: 29vw;left: 10vw; }
    .deco4 {width: 12vw;height: 12vw;top: 3vw;right: 0;}
    .deco4.big {width: 14vw;height: 20vh;bottom: 10vw;left: 0;}
    .deco5 {width: 8vw;height: 30px;bottom: 3vw;right: 3vw;}
}

.archive-datalist {
    & > ul.post-grid {
        & > li {
            width: 100%;
        }
    }
}

/* Mobile stability and usability overrides. */
#menuContainer {
	right: 0; width: 80vw; max-width: none; max-height: none; height: 100dvh; box-sizing: content-box;
	overflow-y: auto; overflow-x: hidden; transform: translateX(105%);
}
#menuContainer.open { right: 0; transform: translateX(0); }
#hambarger {
	width: 44px; height: 44px; top: 10px; right: 10px; box-sizing: border-box;
	background: #fff url(../img/hambarger.svg) no-repeat center / 24px 24px;
}
body.menu-open #hambarger { background-image: url(../img/hambarger-cross.gif); }
#headerNavigation, .main-navigation { display: none; }
#smartphoneNavigation, .smp-navigation { display: block; width: 100%; margin: 0; }
.smp-navigation ul.menu { display: flex; flex-direction: column; gap: 0; }
.smp-navigation ul.menu > li > a {
	display: flex; align-items: center; min-height: 60px; padding: 14px 4px; box-sizing: border-box;
	font-size: 26px; line-height: 1.35;
}
#mainVisual { overflow: hidden; }
#top02 .dxSlider-slide { height: auto; }
#top02 .dxSlider-slide > .contentsbox { display: flex; flex-direction: column; min-height: 0; }
#top02 .dxSlider-Content, #top02 .dxContent-text, #top02 .dxImage { width: 100%; box-sizing: border-box; }
#top02 .dxImage img { display: block; width: 100%; height: auto; }
#dxSlider .dx-arrow { width: 44px; height: 44px; }
#dxSlider .slick-dots button { min-width: 44px; min-height: 44px; }
input, select, textarea { font-size: 16px; }