@import url('variables.css');

/* =====================
    header pc-list sp-hamburger
========================= */
.header{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
}

.header__inner{
    display: flex;
    justify-content: space-between;
    padding: 0 2% 0 2.1875%;
}

.header-logo{
    width: 11.6%;
    max-width: 170px;
    min-width: 90px;
    margin-top: calc(0px + (20 - 0) * ((100vw - 320px) / (1280 - 320)));
}

.header-logo-link{
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.header__info{
    margin-left: auto;
}

.header__info-inner{
    display: flex;
    align-items: center;
    height: 100%;
}

.header__menu {
  position: relative; 
  z-index: 1; 
}
.js-active .header__menu::before {
    content: '';
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 80px); 
    height: 50px; 
    background-color: #ffffff63;
    backdrop-filter: blur(4px);
    z-index: -1;
    border-radius: 2em;
}


.header__menu-list{
    display: flex;
    height: 100%;
}

.header__menu-list > li{
    margin-left: calc(10px + (25 - 10) * ((100vw - 320px) / (1400 - 320)));
    position: relative;
    font-weight: 600;
    font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1400 - 320)));
}

.header__menu-list > li.estimate-two{
    margin-left: calc(20px + (40 - 20) * ((100vw - 320px) / (1400 - 320)));
}

.header__menu-list > li:first-child{
    margin-left: 0;
}

.header__menu-list > li > a{
    padding: 35px 0;
    display: block;
    transition: 0.4s ease;
}

.header__menu-list > li > a:hover{
    color: var(--main-color);
}

.header .estimate-two a:first-of-type{
    color: var(--gray-medium-color);
}
.header .estimate-two > a[href="/estimate-2/"]::before {
    content: "";
    background-color: var(--main-color);
    width: 100%;
    height: 27px;
    display: block;
    padding: 0 clamp(70px, calc(70px + (95 - 70) * ((100vw - 320px) / (1400 - 320))), 130px);
    border-radius: 15px;
    border: 1px solid;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: -1;
    transition: .3s;
}
.header .sub-menu .estimate-two a::before{
    display: none;
}
.header .estimate-two a:hover:first-of-type{
    color: var(--main-color);
}
.header .estimate-two a:hover::before{
    background-color: var(--gray-medium-color);
}
.header__btn-container{
    display: flex;
    align-items: center;
    margin-left: 2.25vw;
}

.header__btn01{
    width: 135px;
}

.header__btn01 .btn__link{
    padding: 16px 0;
}

.header__btn02{
    width: 198px;
    margin-left: 15px;
    border-color: #0075b6;
    background-color: #0075b6; 
}

.header__btn02:hover{
    background-color: #fff;
}

.header__btn02 .btn__link{
    font-size: 1.8rem;
    padding: 2px 0 4px;
}

.header__btn02:hover .btn__link{
    color: #0075b6;
}

.header__btn02 .size--sm{
    font-size: 0.722em;
    display: inline-block;
    width: 100%;
}

.header__menu-list .current-menu-item > a,
.header__menu-list .current_page_item > a {
    position: relative; 
}

.header__menu-list .current-menu-item > a::after,
.header__menu-list .current_page_item > a::after {
    content: '';
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--main-color);
    display: block;
}
.header__menu-list .sub-menu .current-menu-item > a::after,
.header__menu-list .sub-menu .current_page_item > a::after{
    display: none;
}
.header .sub-menu{
	display: none;
    position: absolute;
	/* top: 0%; */
	/* left: -45px; */
    top: 73px;
    left: 55%;
    transform: translate(-50%, 0%);
	width: 200px;
	z-index: 2;
}

.header .sub-menu a{
	background-color: var(--main-color);
	color: #fff;
	padding: 12px 15px;
	font-size: calc(12px + (13 - 12) * ((100vw - 320px) / (1280 - 320)));
    display: block;
    width: 100%;
    height: 100%;
	transition:.3s;
}

.header__menu-list .sub-menu .current-menu-item > a {
    background-color: var(--accent-color);
}

.header .sub-menu a:hover{
	color: #fff;
    background-color: var(--accent-color);
	cursor:pointer;
}

.header .sub-menu .disabled-link {
    color: #888;
    background-color: #888;
    pointer-events: none;
    text-decoration: none;
}

.hamburger-menu {
    display: none;
    position: fixed;
    top: 5px;
    right: 8px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 100;
}

.bar {
    position: absolute;
    width: 80%;
    height: 1.5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--main-color);
    border-radius: 4px;
    transition: 0.4s ease;
}

.bar--top {
    top: 30%;
}

.bar--middle {
    top: 50%;
}

.bar--bottom {
    top: 70%;
}

.js-close .bar--top {
    top: 43%;
    transform: translateX(-50%) rotate(45deg);
}

.js-close .bar--middle {
    opacity: 0;
    transition: 0.1s;
}

.js-close .bar--bottom {
    top: 43%;
    transform: translateX(-50%) rotate(-45deg);
}

@media screen and (max-width: 1024px){
    .header__inner {
        padding: 0 10px;
    }
	
	.header__menu-list > li{
		margin-left: 1.2vw;
	}

	.header__btn-container {
    margin-left: 1.6vw;
}

    .header__btn01 {
        width: 105px;
    }

    .header__btn01 .btn__link {
        padding: 12px 0;
    }

    .header__btn02 {
        width: 145px;
        margin-left: 5px;
    }

    .header__btn02 .btn__link {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 782px){
    .header {
        position: static;
    }

    .header__inner {
        padding: 10px;
    }

    .header__logo {
        width: 125px;
    }

    .header__info {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        padding: 15% 8vw;
        z-index: 90;
        transition: 0.4s ease;
        transform: translateX(110%);
        overflow: auto;
    }

    .header__info.js-active{
        transform: translateX(0);
    }

    .header__info-inner,
    .header__menu-list{
        display: block;
        height: auto;
    }
    .header__menu::before{
        display: none;
    }

    .header__info-inner{
        width: 80%;
        margin: 0 auto;
        position: relative; 
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transform: none;
    }

    .header__menu {
        width: 100%;
    }
	
	.header__menu-list > li{
		margin-left: 0;
	}

    .header__menu-list > li > a {
        padding: 20px 0;
        text-align: center;
        border-bottom: 1px solid var(--main-color);
        position: relative;
    }

    .header__menu-list .current-menu-item > a::after,
    .header__menu-list .current_page_item > a::after{
        display: none;
    }

    .header__btn-container {
        display: block;
        margin: 40px 0 0; 
    }

    .header__btn-container .btn{
        margin: 20px auto 0;
        width: 200px;
    }

    .header__btn-container .btn:first-child{
        margin-top: 0;
    }

    .dropdown-parent > a{
        position: relative;
    }
            
    .dropdown-parent > a::before,
    .dropdown-parent > a::after{
        content: "";
        display: block;
        width: 20px;
        height: 1px;
        background-color: var(--title-color);
        position: absolute;
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
    }
            
    .dropdown-parent > a::after{
        transform: translateY(-50%) rotate(90deg);
        transition: 0.4s ease;
    }
    
    .dropdown-parent > a.js-active::after{
        transform: translateY(-50%) rotate(0deg);
    }
            
    .header .sub-menu{
        display: none;
        position: static;
		transform: translate(0%, 0%);
        width: 100%;
        border-bottom: 1px solid var(--title-color);
        margin-top: 5px;
    }
            
    .header .sub-menu li{
        margin-top: 0;
    }
    
    .header .sub-menu a{
        padding: 9px 0;
        background-color: transparent;
        color: var(--title-color);
        text-align: center;
    }

    .menu-item-has-children > .has-submenu::after {
        content: "▼";
        font-size: 0.8rem;
        margin-left: 8px;
        display: inline-block;
        transition: transform 0.3s ease;
        position: absolute;
        right: 1em;
    }

    
    
    .header__menu-list li a.js-active::after {
        transform: rotate(180deg);
    }
    
    .header__menu-list li a .menu-arrow {
        cursor: pointer;
    }

    .header .estimate-two .sub-menu a:first-of-type{
        color: var(--main-color);
    }
    
    .hamburger-menu{
        display: block;
    }
}

/* =====================
    パンクズ
========================= */
.breadcrumb{
    width: 80vw;
    max-width: 1500px;
    margin: auto;
    position: relative;
    z-index: 1;
}
.breadcrumb-list{
    display: flex;
    position: absolute;
    right: 0;
}

.breadcrumb-list li {
    position: relative;
}

.breadcrumb-list li + li{
    font-weight: 500;
    margin-left: 20px;
    position: relative;
}

.breadcrumb-list li::before{
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--title-color);
    border-bottom: 2px solid var(--title-color);
    position: absolute;
    top: 4px;
    left: 100%; /* 右側に配置 */
    transform: translateX(6px) rotate(315deg); 
}


.breadcrumb-list li:nth-last-child(n + 2){
    flex-shrink: 0;
}

.breadcrumb-list li:last-child{
    flex-grow: 1;
    color: var(--main-color);
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(1em * 18);
    }

    .breadcrumb-list li:last-child::before{
        display: none;
    }

.breadcrumb-list *{
    color: var(--title-color);
    font-size: 12px;
    line-height: 1;
    line-break: anywhere;
    display: inline-block;
    text-decoration: revert-layer;
}

.breadcrumb-list img{
    margin-top: -0.5px;
    width: 15px;
    height: 15px;
}
@media screen and (max-width: 782px){
	.breadcrumb-list *{
		font-size: 11px;
        /* display: none; */
	}
    .breadcrumb-list{
        right: -20px;
    }
    .breadcrumb-list li:last-child {
        max-width: calc(1em * 8);
    }
}