/* すべての画面幅で適用されるCSS  */

.header {
	box-sizing: border-box;
    position: fixed;
    width: 100%;
	top: 0;
	right: 0;
	z-index: 100;
}
.header__inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header__logo {
    display: block;
    font-size: 0;
}
.header__logo img {
    width: 100%;
    height: auto;
}
.header__menu-input {
    display: none;
}

/* パソコンサイズ用のCSS  */
@media screen and (min-width:768px) {
    .header__inner {
        padding: 20px;
    }
    .header__logo {
        width: 160px;
        height: 19px;
        transition: opacity .2s ease;
    }
    .header__logo:hover {
        opacity: .7;
    }
    .menu__list {
        display: flex;
    }
    .menu__item:nth-child(n+2) {
        margin-left: 20px;
    }
    .menu__link {
        position: relative;
        display: block;
    }
    .menu__link::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #333333;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .2s ease;
    }
    .menu__link:hover::after {
        transform: scaleX(1);
    }
    .header__menu-label {
        display: none;
    }
}

/* スマートフォン、タブレットサイズ用のCSS*/
@media screen and (max-width:767px) {
    .container {
        overflow: hidden;
    }
    .header {
		box-sizing: border-box;
        overflow: hidden;
        position: fixed;
		background-color:rgba(255 , 255 , 255 , 1);
		padding-bottom: 5px;
    }
    .header__inner {
        position: relative;
        z-index: 5;
    }
    .header__logo {
        width: 180px;
        height: auto;
        margin-left: 3px;
		margin-top:3px;

    }

    .header__dummy {
        width: 180px;
        height: 50px;
        margin-left: 3px;
		margin-top:3px;

    }

    .header__txt {
        font-size:min(3vw, 12px);
		line-height:110%;
    }




    .header__menu {
        position: fixed;
        z-index: 5;
        top: 45px;
        width: 100%;
        height: calc(100vh - 50px);
		background-color:rgba(255 , 255 , 255 , 1);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease;
    }
    /*
    疑似クラス:hasを使うことで、
    直前に「.header__menu-input:checked」がある
    「.header__menu」に適用される。
    */
    .header__menu:has(+ .header__menu-input:checked ) {
        opacity: .8;
        visibility: visible
    }
    .menu__list {
        border-top: 1px solid #d7d7d7;

    }
    .menu__item {
        border-bottom: 1px solid #d7d7d7;
    	list-style:none;
    }
    .menu__link {
        display: block;
        padding: 13px 0;
        color: #333333;
    }
    .header__menu-label {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: end;
        width: 40px;
        height: 30px;
        padding: 5px 5px 5px 5px;
        cursor: pointer;
    }
    .header__menu-label span:nth-child(-n+3) {
        position: absolute;
        display: block;
        width: 30px;
        height: 2px;
        background: #333333;
    }
    .header__menu-label span:nth-child(1) {
        top: 10px;
        transition: all .2s ease;
    }
    .header__menu-input:checked + .header__menu-label span:nth-child(1) {
        top: 20px;
        transform: rotate(45deg);
    }
    .header__menu-label span:nth-child(2) {
        top: 18px;
        transition: opacity .2s ease;
    }
    .header__menu-input:checked + .header__menu-label span:nth-child(2) {
        opacity: 0;
    }
    .header__menu-label span:nth-child(3) {
        top: 26px;
        transition: all .2s ease;
    }
    .header__menu-input:checked + .header__menu-label span:nth-child(3) {
        top: 20px;
        transform: rotate(-45deg);
    }
    .header__menu-label span:nth-child(4) {
        font-size: 10px;
        color: #333333;
    }
}

@media screen and (max-width:359px) {
    .header__txt {
        display: none;
    }
}