[lang|="en"] nav .jp_only{display:none;}
[lang|="ja"] nav .en_only{display:none;}

nav a[href=""],nav a:not([href]){
    pointer-events:none;
    cursor:default;
    text-decoration:none;
}

nav summary{
    position: relative;
    cursor: pointer;
    list-style: none;
    summary::-webkit-details-marker {
        display: none;
    }
}

nav summary::after{
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    right: 30px;
    width: 6px;
    height: 6px;
    transform: translateY(-50%) rotate(135deg);
    transition: transform 0.3s ease-in-out;
}

nav details.is-open summary::after{
    transform: translateY(-50%) rotate(-45deg);
}



/*
@keyframes openAnime{
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
    */

@media screen and (min-width:840px){
    /*スマホ用メニューの非表示*/
    .sp_only{display:none !important;} 

    /*メインメニュー*/
    #mainmenu{
	    margin-bottom: 20px;
    }

    #mainmenu ul{
        clear: both;
        float: none;
        width: 840px;
        height: 50px;
    }

    #mainmenu li{float: left;}

    /*サイドメニュー*/
    #sidemenu .scrollmenu {
        box-sizing:borde-box;
        background-color: #ECF0FF;
        max-height: 30vh;
        width: calc(100%-2px);
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-gutter: stable;
        scrollbar-color: #356AD1 transparent;
        border-left-color:#356AD1;
        border-left-style:solid;
        border-left-width:1px;  
        border-right-color:#356AD1;
        border-right-style:solid;
        border-right-width:1px;
    }
    
    #sidemenu {
        width: 200px;
        position: sticky;
        position: -webkit-sticky;
        top: 20px;
    }

    
    #sidemenu>nav>ul>li{
        border-left-color:#356AD1;
        border-left-style:solid;
        border-left-width:1px;   
        border-right-color:#356AD1;
        border-right-style:solid;
        border-right-width:1px;    
    }

    #sidemenu details[open]>summary{
        background-color: #E3F9D7;
		color: #4FA01D;   
    }

    #sidemenu details[open]>ul, #sidemenu summary, li.side_li{
        /*
        background-image: url(img/line.gif);
		background-repeat: repeat-x;
		background-position: left bottom;   
        */
        background-size: 3px 1px;
        background-image: linear-gradient(to right, #396CD2 1px, transparent 1px);
        background-position: left bottom;
        background-repeat: repeat-x;	
    }

    #sidemenu details[open]>ul>li{
        padding: 1px;
    }
     

    #sidemenu summary {
		width: 100%;
        /*
		background-color: #ECF0FF;
		background-image: url(img/line.gif);
		background-repeat: repeat-x;
		background-position: left bottom;
		*/
        padding-bottom: 10px;
		padding-top: 10px;
		padding-left: 20px;
	}

    #sidemenu summary:hover {
		background-color: #E3F9D7;
		color: #4FA01D;
	}

    #sidemenu details.is-open summary{
        background-image:none;
    }

    #sidemenu summary::after{
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        overflow: hidden;
    }

	ul.accordion_items {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0px;
		background-color: #ECF0FF;
	}

	ul.accordion_items li {
		width: 100%;

		&:nth-child(3n+2){
			border-left-style: none;
			border-right-style: none;
		};
		&:nth-child(3n+3){
			border-left-style: none;
		};
		&:nth-child(3n+1){
			border-right-style: none;
		}
	}

	#sidemenu details li a{
		width: 100%;
		display: block;
		text-decoration: none;
		text-align: center;
		color: #333;
		background-color: #ECF0FF;
		padding-bottom: 10px;
		padding-top: 10px;
	}

	#sidemenu a:hover {
		background-color: #E3F9D7;
		color: #4FA01D;
	}
    /*
    #sidemenu ul details[open] summary ~*{
        animation: openAnime 0.5s ease forwards;
    }

	#sidemenu details[open] summary::before {
		transform: rotate(90deg);
	}

	#sidemenu details[open] summary{
		background-image: none;
		background-color: #E3F9D7;
		color: #4FA01D;
	}

	#sidemenu details[open] ul.accordion_items li:nth-last-of-type(-n+3){
		background-image: url(images/line.gif);
		background-repeat: repeat-x;
		background-position: left bottom;
		padding-bottom: 1px;
	}
        */

    ul#side_ul{
        width: 100%;
        background-image: url(img/sidemenu_ft.jpg);
        background-repeat: no-repeat;
        background-position: left bottom;
        padding-bottom: 14px;
    }

    li.side_li {
        /*
        background-image: url(img/line.gif);
        background-repeat: repeat-x;
        background-position: left bottom;
        */
        padding-bottom: 1px;
        /*
        border-right-width: 1px;
        border-left-width: 1px;
        border-right-style: solid;
        border-left-style: solid;
        border-right-color: #356AD1;
        border-left-color: #356AD1;
        */
    }  

    li.side_li a {
        display: block;
        width: 171px;
        text-decoration: none;
        color: #333;
        padding: 10px 5px 10px 22px;
        background-color: #ECF0FF;
        background-image: url(img/sidemenu_arrow.jpg);
        background-repeat: no-repeat;
        background-position: 5px center;
    }  

    li.side_li a:hover {
        background-color: #E3F9D7;
        color: #4FA01D;
        background-image: url(img/sidemenu_arrow_ov.jpg);
    }    
}

@media screen and (max-width: 840px){
    /*PC用メニューの非表示*/
    .pc_only{display:none !important;}
    #mainmenu ul li a img {
        display:none
    }
    
    /*スマホ用トップ画像の調整*/
    h1{margin-bottom:15px;}
    h1 img.sp_only{
        display: block;
        margin: auto;
        width:calc(100% - 10px);}

    /*メインメニュー*/
    #mainmenu {
        background: #333;
        color: #fff;
        height: calc(100%);
        z-index: 100;
        width: 60%;
        overflow-x: none;
        overflow-y: auto;
        top: 0px;
        right: -70%;
        position: fixed;
        -webkit-transition: All 0.5s ease;
        transition: All 0.5s ease;
    }

    #mainmenu.nav_open{
        right: 0 !important;
    }

    #mainmenu a, #mainmenu summary {
        border-bottom:1px solid rgba(0, 0, 0, 0.15);
        font-size:1.1em;
        color:#fff;
        font-weight:bold;
        display:block;
        padding:1.2em 1.5em;
        text-decoration:none;
        position:relative
    }

    #mainmenu summary{
        position: relative;
        cursor: pointer;
    }

    #mainmenu summary::after{
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
    }

    #mainmenu ul li a:after{
        content:attr(data-text);
        /*display:block;*/
    }

    #mainmenu li a[href=""],a:not([href]){
        background:#4FA01D;
    }

    #mainmenu ul li a:hover, #mainmenu ul details:hover {
        /*-webkit-box-shadow:inset 0 0 10px 2px rgba(0, 0, 0, 0.3);*/
        box-shadow:inset 0 0 10px 2px rgb(0 0 0 /0.3)
    }


    
    

    /*
    #mainmenu ul li, #mainmenu ul details {
        display:block;
        margin:0
    }

    #mainmenu>ul, #mainmenu>ul>li, #mainmenu>ul>details{
        display:block;
        margin:0;
        padding:0
    }

    #mainmenu li a[href=""],a:not([href]){
        background:#4FA01D;
    }

   


    #mainmenu ul details{
        overflow: hidden;
        /*transition: all 0.5s ease;    
    }

    #mainmenu ul details summary{
        cursor:pointer;
        margin:0 0 0 0;
        list-style: none;
    }

    /*
    #mainmenu ul details[open] summary ~*{
        animation: openAnime 0.5s ease forwards;
    }
        

    

    #mainmenu ul li a:hover, #mainmenu ul details:hover {
        /*-webkit-box-shadow:inset 0 0 10px 2px rgba(0, 0, 0, 0.3);
        box-shadow:inset 0 0 10px 2px rgb(0 0 0 /0.3)
    }

   


    #mainmenu ul details ul {
        display:block;
        margin:0 0 0 0;
        background:#333
    }

    #mainmenu ul details ul li {
        display:block;
        margin:0
    }

    #mainmenu ul details ul li a {
        font-size:1.1em;
        color:#fff;
        padding: 12px 4px 12px 41px;
        text-decoration:none;
        border-bottom:1px solid rgba(0, 0, 0, 0.15);
    }

    #mainmenu ul details ul li a:before {
        content:"";
        position:absolute;
        top:1.3em;
        left: 26px;
        width:0;
        height:0;
        border-style:solid;
        border-width:4px 0 4px 6px;
        border-color:transparent transparent transparent #ffffff;
    }

    #mainmenu ul details ul li a:after {
        content:attr(data-text);
        display:block;
    }
    
    /*サイドメニューの非表示*/
    #sidemenu {
        display: none !important;
    }
}