/* ===== PC Header ===== */
header {
    position: relative;
    max-width: 100%;
    z-index: 200;
}

.site-header__wrapper {
    position: fixed;
    width: 100%;
    background:  #fff;
    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.05);
    display:flex;
    align-items:center;
    justify-content:space-between;
    height: 80px;
    z-index: 150;
}

.site-header__wrapper > .top-logo {
    margin-left: 40px;
    display: flex;
    align-items: end;
}

.pc-header.site-header__wrapper > .top-logo > img {
    height: 32px;
}

.sp-header.site-header__wrapper > .header-content > .top-logo > img {
    height: 24px;
}

.nav {
    margin-right: 40px;
}

/* ===== PC Header カレント表示 ===== */
.cat-about .menu-about,
.cat-principle .menu-principle,
.cat-elements .menu-elements,
.cat-components .menu-components,
.cat-contact .menu-contact,
.cat-info .menu-info {
    border-bottom: 3px solid var(--orange);
}

/* ===== Side Menu ===== */
.side-menu__wrapper {
    position: fixed;
    width: 308px;
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;
    border-right: 1px solid #ECEDF2;
}

.accordion > label {
    border-bottom: 1px solid #ECEDF2;
}

.side-menu__content {
    width: 240px;
    padding-top: 136px;
    float: right;
    box-sizing: border-box;
}

.overflow__wrapper {
    height: calc(100vh - 192px);
}

.overflow__wrapper .accordion {
    height: 100%;
    overflow: auto;
}

.menu-ttl__wrapper {
    display: flex;
    align-items: center;
    height: 56px;
    border-bottom: solid 1px #D9D9D9;
    font-size: 16px;
    font-family: "Noto sans JP Bold";
    color: var(--primary);
}

.menu-ttl__wrapper > .heading {
    background: var(--orange);
    width: 3px;
    height: 13px;
    margin: 0 8px 0 12px;
}

/* ベース */
.toggle {
	display: none;
}

/* ページ */
.btn-label {
    font-size: 16px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
}

.single {
    height: 24px;
}

.btn-label + .single {
    padding: 0;
}

.btn-label a {
    width: 100%;
}

.btn-label.single a {
    display: inline-block;
    position: relative;
    padding: 16px 0;
    width: 100%;
    line-height: 150%;
}

.btn-label.single > a > br {
    height: 0;
}

/* タイトル横の矢印 */
.btn-label::before{
	content :"";
	width: 16px;
    height: 16px;
    background: url("../assets/img/icon_accordion-arrow.svg");
	position: absolute;
	right: 20px;
	transform: rotate(180deg);
}

/* 単一ページの場合 */
.single::before {
	transform: rotate(90deg);
}

.btn-label,
.content__wrapper {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
}

.sp-accordion,
.content__wrapper {
	height: 0;
	margin-bottom:10px;
	overflow: hidden;
    background: #FAFAFA;
    margin-bottom: 0;
}

.content__wrapper > button {
	padding: 16px 12px 16px 40px;
    border-bottom: 1px solid #ECEDF2;
    font-size: 16px;
    font-family: "Noto sans JP Bold";
    color: var(--primary);
}

/* 開閉時 */
.toggle:checked + .accordion-btn + .sp-accordion,
.toggle:checked + .btn-label + .content__wrapper {
	transition: all 0s;
    height: fit-content;
}

.toggle:checked + .btn-label::before {
    transform: rotate(0deg);
}

.toggle:checked + .single::before {
	transform: rotate(90deg) !important;
}

.accordion-btn {
    display: flex;
    align-items: center;
    height: 55px;
}

.accordion-btn span {
    padding-left: 24px;
}

/* +-開閉 */
.accordion-btn img {
    position: absolute;
    right: 24px;
}

#cat-accordion-01:not(:checked) ~ .accordion-btn img:nth-child(2),
#cat-accordion-02:not(:checked) ~ .accordion-btn img:nth-child(2),
#cat-accordion-03:not(:checked) ~ .accordion-btn img:nth-child(2) {
    display: none;
}

#cat-accordion-01:checked ~ .accordion-btn img:nth-child(3),
#cat-accordion-02:checked ~ .accordion-btn img:nth-child(3),
#cat-accordion-03:checked ~ .accordion-btn img:nth-child(3) {
    display: none;
}

#cat-accordion {
    display: none;
}


/* ===== サイドメニュー カレント表示 ===== */
/* ===== 基本原則 ===== */
.p-principle .label__principle,
.p-tone-and-manner .label__tone-and-manner,

/* ===== 基本要素 ===== */
.p-typography .label__typography,
.p-primitive-color .label__primitive-color,
.p-semantic-color .label__semantic-color,
.p-spacing .label__spacing,
.p-shadow .label__shadow,

/* ===== コンポーネント ===== */
/* ボタン */
.p-primary-btn .label__primary-btn,
.p-secondary-btn .label__secondary-btn,
.p-text-link .label__text-link,
.p-dashboard-btn .label__dashboard-btn,
.p-card-btn .label__card-btn,
.p-transfer-btn .label__transfer-btn,

/* インプット・リスト */
.p-input .label__input,
.p-list .label__list,

/* モーダルウィンドウ */
.p-modal-window .label__modal-window,

/* 米印・中黒・丸数字 */
.p-point .label__point {
    background: #FFF4E6;
}

.nav__wrapper {
    display: flex;
}

.nav__item {
    display: flex;
    align-items: center;
    height: 76px;
}

.nav__item a {
    font-family: 'Noto Sans JP Regular';
    font-size: 16px;
    color: var(--primary);
    padding: 6px 12px;
}

@media screen and (min-width: 1001px) {
    .sp-header {
        display: none;
    }
}

@media screen and (max-width: 800px) {
    .side-menu__wrapper {
        display: none;
    }
}

/* ===== タブレットは途中までPC使用のヘッダー+サイドメニュー ===== */
@media screen and (max-width: 1000px) {
    .pc-header {
        display: none !important;
    }

    .site-header__wrapper {
        max-width: 100%;
        height: 60px;
        z-index: 150;
    }

    .header-content {
        position: relative;
        width: 100%;
    }

    .site-header__wrapper > .header-content >.top-logo {
        position:absolute;
        float: left;
        margin-left: 20px;
    }

    .menu-btn {
        display: flex;
        float: right;
        justify-content: center;
        margin-right: 20px;
        z-index: 90;
    }

    #menu-btn-check:not(:checked) ~ .menu-btn img:nth-child(2) {
        display: none;
    }

    #menu-btn-check:checked ~ .menu-btn img:nth-child(1) {
        display: none;
    }

    #menu-btn-check {
        display: none;
    }

    /*メニューを画面内へ*/
    #menu-btn-check:checked ~ .menu-content {
        left: 0;
    }

    #menu-btn-check:not(:checked) ~ .top-logo {
        display: none;
    }

    .hamburger-menu > img {
        padding-right: 20px;
        width: 22px;
    }

    .menu-content {
        width: 100%;
        height: calc(100vh - 58px);
        overflow: scroll;
        white-space: nowrap;
        position: fixed;
        top: 58px;
        left: 100%;
        transition: all .8s;
        background: #fff;
        border-top: #D9D9D9 solid 1px;
    }

    .menu-content ul {
        margin-bottom: 64px;
    }

    .menu-content ul li {
        list-style: none;
        border-bottom: 1px solid #ECEDF2;
        background-color: #fff;
    }

    .menu-content ul li.single,
    .menu-content ul > li > a {
        display: flex;
        align-items: center;
        height: 55px;
        font-size: 16px;
    }

    .menu-content ul li.single a {
        padding-left: 24px;
        width: 100%;
    }

    /* 第一階層 single */
    .menu-content ul li.single a::before,
    /* 第二階層 single */
    .menu-content ul li .sp-accordion .btn-label::before {
        content: "";
        width: 16px;
        height: 16px;
        background: url(../assets/img/icon_accordion-arrow.svg);
        position: absolute;
        right: 24px;
        transform: rotate(90deg);
    }

    /* 第一階層 multiple */
    .menu-content ul li.multiple {
        display: flex;
    }

    .sp-accordion {
        padding-left: 32px;
    }
    
    .sp-accordion .btn-label {
        font-family: "Noto Sans JP Regular"; 
        border-bottom: 1px solid #ECEDF2;
    }

    .menu-content ul li:nth-of-type(2) .sp-accordion .btn-label:nth-child(3),
    .menu-content ul li:nth-of-type(3) .sp-accordion .btn-label:nth-child(6),
    .menu-content ul li:nth-of-type(4) .sp-accordion .btn-label:nth-child(11)
    {
        border-bottom: none;
    }
}