@charset "utf-8";
/* CSS Document */



@media(max-width:768px){

/* SPメニュー */
	
	body{
		position: relative;
	}
	
	header{
		position: relative;
		z-index: 2;
	}

	
	/* ハンバーガーメニューボタン */

	.button {
	  position: absolute;
	  top: 1rem;
	  left: 6.5%;
	  width: 34px;
	  height: 24px;
	  background: transparent;
	  border: none;
	  cursor: pointer;
	  z-index: 101;
	}

	/* 中央の線 */
	.button-bar {
	  position: relative;
	  display: block;
	  width: 100%;
	  height: 2px;
	  background: #333;
	  transition: background 0.3s ease;
	}

	/* 上下の線（擬似要素） */
	.button-bar::before,
	.button-bar::after {
	  content: "";
	  position: absolute;
	  width: 100%;
	  height: 2px;
	  background: #333;
	  left: 0;
	  transition: transform 0.3s ease, top 0.3s ease;
	}

	/* 上の線：中央から上に配置 */
	.button-bar::before {
	  top: -8px;
	}

	/* 下の線：中央から下に配置 */
	.button-bar::after {
	  top: 8px;
	}
	
	
	.button-menu{
		position:absolute;
        top: 43px;
		left: 6%;
		z-index: 1001; 
	}

	/* メニューがアクティブなとき（バツ印に変形） */
	.button.is-active .button-bar {
	  background: transparent;
	}

	.button.is-active .button-bar::before {
	  top: 0;
	  transform: rotate(45deg);
	}

	.button.is-active .button-bar::after {
	  top: 0;
	  transform: rotate(-45deg);
	}
	
	
	/*ハンバーガーメニュー内容*/
	
	
	.menu {
	  opacity: 0;
	  visibility: hidden;
	  position: fixed;
	  inset: 0;
	  transition: 0.3s ease;
	}

	.menu.is-active {
	  opacity: 1;
	  visibility: visible;
	  width: 100%;
	  height: auto;
	  transition: 0.5s ease;
      position: fixed;
	}
	
	.menu {
	  z-index: 100;
	}

	.overlay {
	  position: fixed;
	  inset: 0;
	  z-index: 99;
	  width: 100vw;
	  height: 387px;
	  background: rgba(207,207,207,0.9);
	}

	.list {
		display: flex;
	  	z-index: 101;
		align-items: flex-start;
        justify-content: center;
		height: 373px;
		gap: 24px;
		font-size: 20px;
		flex-direction: column;
		list-style-type: none;
		padding: 0;
		position: relative;
	}
	
	.item{
		border-top: solid 1px #333333;
		display: inline-block;
		width: 100%;
		padding-left: 5%;
        padding-top: 1em;
	}
	
	.item a {
	  display: block;         /* リンクをブロック要素にする */
	  width: 100%;            /* 親の <li> 全体に広げる */
	  color: inherit;         /* 親の色を継承（任意） */
	}
	

	.list .item:first-of-type{
        padding-top: 1em;
		margin-top: 6rem;
	}
	
	.list .item:last-of-type{
		border-bottom:solid 1px #333333;
        padding-bottom: 1em;
	}	
		
	

	/* ハンバーガーメニューここまで */

	.menu-content ul li{
		font-size: calc(0.65vw + 0.85rem);	
        padding: 0 8%;
	}
	
	.logo_sp{
		text-align: center;
		margin: 0 auto;	
		padding: 25px 0;
	}
	
	.logo_sp a:hover{
		border: none;
	}


	.logo_sp img{
		width:33%;
	}
	
	.menu_sp{
		background-color: #EFEFEF;
	}

	#nav_pc{
		display: none;
	}

}

@media(min-width:769px){

/* PCメニュー */
	
	header{
		max-width: 1500px;
	}
	
	#nav_pc div{
		text-align: left;
	}

	#nav_pc ul{
		display: flex;
		align-items:center;
		width:100%;
		margin: 1em 0;
		padding: 0;
	}
	
	#nav_pc ul li{
		padding: 1%;	
	}

	#nav_pc ul li:first-of-type img{
		width:68%;
		padding-left: 4%;
	}

	#nav_pc ul li:first-of-type{
		margin-right: auto;
		width: 46%;
	}
	
	#nav_pc ul li:first-of-type a:hover{
		border: none;
	}

	#nav_pc ul li:nth-of-type(n+2){
		text-align: right;
		width:11%;
		font-size: calc(1.2vw + 0.5rem);
	}
	
	#nav_pc ul li:nth-of-type(4){
		width:22%;
		padding-right: 8%;
	}
	


	.logo_sp,#nav,.js-button,.button-menu{
		display: none;
	}	
	
	
}

@media(min-width:769px) and (max-width:830px){

	#nav_pc ul li:nth-of-type(4) {
        width: 24%;
    }	
	
}


@media(min-width:661px) and (max-width:720px){

	.button-menu {
			top: 42px;
	}
	
    .logo_sp img {
        width: 40%;
    }	
	
	
}

@media(min-width:551px) and (max-width:660px){

	.button-menu {
			top: 42px;
	}
	
    .logo_sp img {
        width: 40%;
    }	
	
	
	
}

@media(min-width:561px) and (max-width:660px){

	.button-menu {
			top: 42px;
	}
	
    .logo_sp img {
        width: 40%;
    }	
	
	
	
}

@media(min-width:451px) and (max-width:560px){

	.button-menu {
			top: 42px;
	}
	
    .logo_sp img {
        width: 40%;
    }	
	


	
}


@media (max-width: 450px) {

	.button-menu {
			top: 42px;
	}
	
    .logo_sp img {
        width: 45%;
    }	
	
	
}

/* タブレットメニュー */

@media(min-width:769px) and (max-width:1000px){
	
	

	#nav_pc ul li:nth-of-type(n+2){
		font-size: calc(0.65vw + 0.85rem);
		width:13%;
	}		
	
	
	#nav_pc ul li:nth-of-type(4){
		width:24%;
	}
	
	#nav_pc ul li:nth-of-type(4){
		width:26%;
		padding-right: 8%;
	}
	
}

/* 大画面制御 */

@media(min-width:1200px){

	header{
		width:90%;
		margin: 0 auto;
	}
	
	#nav_pc ul li:nth-of-type(n+2) {
        font-size: calc(1.0vw + 0.5rem);
    }
		
   #nav_pc ul li:first-of-type {
        margin-right: auto;
        width: 60%!important;
    }

	#nav_pc ul li:nth-of-type(n+2) {
		width:13%;
        font-size: 1.6rem!important;
    }
		

	#nav_pc ul li:nth-of-type(4){
		width:22%;
		padding-right: 3%;
		margin-left: -2%;
	}
	
	
}


@media(min-width:769px) and (max-width:900px){
	
	#nav_pc ul li:first-of-type {
        margin-right: auto;
        width: 60%;
    }

	#nav_pc ul li:nth-of-type(2) {
		padding-right: 0;	
	}

	#nav_pc ul li:nth-of-type(n+2) {
		width:18%;
		padding-right: 2%;
        font-size: calc(1.4vw + 0.5rem)!important;
    }
		

	#nav_pc ul li:nth-of-type(4){
		width:32%;
		padding-right: 8%;
		margin-left: -2%;
	}


}