/* トップバナー */
		body {
    		background-image:none;
 		}
	.top_left{
		float:left;
		width:500px;
		margin:-4px 10px 20px 0px;
	    font-family: "Noto Sans JP";
	    font-weight:400;
	    position: relative;
		z-index:999;
	}

	.bname{
		font-size:24px;
		color:#fff;
		position:absolute;
		left:24px;
		top:254px;
		text-shadow: 2px 2px 3px #000, -2px -2px 3px #000;
	}

	.barea{
		font-size:16px;
		color:#fff;
		padding:1px 3px;
		border-width:1px;
		border-style:solid;
		border-color:#fff;
		position:absolute;
		left:24px;
		top:224px;
		text-shadow: 2px 2px 3px #000, -2px -2px 3px #000;
	}

	#slider img{
		width: 500px;
    	height: 300px;
    	object-fit: cover;
	}

	.top_right{
		margin-top:10px;
	}

	.t_rights{
		margin-bottom:3px;
	    position: relative;
	}

	.tbutton {
	    font-family: "Noto Sans JP", sans-serif;
	    font-weight:400;
	    display: block;
	    text-align: center;
	    background: #012350;
	    line-height: 22px;
	    text-decoration: none;
	    width: 99px;
	    height: 22px;
	    border-radius: 5px;
	    -moz-border-radius: 5px;
	    -webkit-border-radius: 5px;
	    margin: 0 auto;
	    font-size: 11px;
	    position: absolute;
	    right:5px;
	    bottom:10px;
	    z-index: 100;
	}

	#new1 {
        width: 100%;
        margin-bottom: 20px;
    }

	#new1 .t_rights a {
	    color: #fff;
	}

	#new1 .t_rights a:hover {
	    color: #ff3300;
	}

	#tnavi{
	    margin: 10px 0px 0px 0px;
	    padding: 0px;
	    width: 308px;
	}

	#tnavi select{
		float:right;
		width:220px;
		margin-right:10px;
	}

	#tnavi .find{
		background-position: 80px 12px;
	}

	.search iframe {
	    border-width: 1px;
	    border-style: solid;
	    border-color: #ccc;
	    border-width: 1px;
	    border-style: solid;
	    border-color: #ccc;
	}
	
	#tnavi .select{
		padding:20px 10px;
	}
	

	#tnavi .select:nth-child(2){
	    border-top-width: 0px;
	    padding-top:0px;
	}

	#link2{
		height:80px;
	}

	.linknew{
		width:327px;
		padding:5px;
		margin:0 auto;
		float:left;
	}

	.linknew a{
		display: inline-block;
		padding: 20px 10px;
		color: #fff;
		background: #072a62;
		width:100%;
		box-sizing: border-box;
		border-radius: 5px;
		font-size:18px;
		font-weight:500;
	}

	.linknew a span{
		display: inline-block;
		position: relative;
		padding-left: 26px;
	}

	.linknew a span::before{
		width: 18px;
		height: 18px;
		background: #fff;
		border-radius: 20px;
		margin-top: -9px;
		left: 0;
	}
	.linknew a span::before, .linknew a span::after{
		content: "";
		display: block;
		position: absolute;
		top: 50%;
	}

	.linknew a span::after{
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 3px 0 3px 6px;
		border-color: transparent transparent transparent #072a62;
		left: 7px;
		margin-top: -3px;
	}

	.linknew1{
		width:327px;
		padding:5px;
		margin:0 auto;
		float:left;
	}

	.linknew1 a{
		display: inline-block;
		padding: 20px 10px;
		color: #fff;
		background: #942343;
		width:100%;
		box-sizing: border-box;
		border-radius: 5px;
		font-size:18px;
		font-weight:500;
	}

	.linknew1 a span{
		display: inline-block;
		position: relative;
		padding-left: 26px;
	}

	.linknew1 a span::before{
		width: 18px;
		height: 18px;
		background: #fff;
		border-radius: 20px;
		margin-top: -9px;
		left: 0;
	}
	.linknew1 a span::before, .linknew1 a span::after{
		content: "";
		display: block;
		position: absolute;
		top: 50%;
	}

	.linknew1 a span::after{
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 3px 0 3px 6px;
		border-color: transparent transparent transparent #942343;
		left: 7px;
		margin-top: -3px;
	}

	#snavi{
		float:none;
		width:100%;
	}
	#snavi ul{
		width:calc(100% - 2px);
	}

	#snavi_t ul{
		width:calc(100% - 2px);
	}

	#mform table{
		margin:20px 0px 5px 15px;
		width:calc(100% - 44px)
	}
	
	.mformt {
		border-top-width: 1px;
		border-top-style: solid;
		border-top-color: #ccc;
		margin-bottom:20px;
	}
	
	.mformt input{
		padding:5px;
	}
	
	.mformt select{
		width:215px!important;
		height:40px;
	}
	
	.mformt td{
		padding-bottom:10px;
	}
	
	.find {
		border-top-width: 1px;
		border-top-style: solid;
		border-top-color: #ccc;
		line-height: 20px;
		font-size: 14px!important;
		height: 20px;
		background-color: #eee;
		text-align: center;
		padding: 10px 10px 10px 10px;
		background-image: url(/neoimg/but.png);
		background-repeat: no-repeat;
		background-position: 110px 12px;
	}
	
	.pop ul {
		position:relative;
	}
	
	.kosin{
		left:160px;
	}
	
	.newts {
		width: 240px;
		border-top-width: 1px;
		border-top-style: solid;
		border-top-color: #ccc;
		float: right;
	}

	.newss {
		width: 240px;
		float: right;
	}
	
	.pickb{
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #ccc;
		padding:10px 0 20px 0;
	}

	#keyword{
		width: 100%;		
	}

	#sidebar {
		width:240px;
		float:right;
	}

	#photo li a img {
		vertical-align: bottom;
		width: 225px;
	}

	.plan img{
		width:200px;
	}

	.check img{
		width:30px;
		height:20px;
		padding-right:3px;
	}

	.yens{
		-webkit-appearance: none;		
	}

	.yens .label {
		display: inline-block;
		padding: 0 5px;
		border: #ccc 1px solid;
		line-height: 24px;
		margin-right: 10px;
		-webkit-appearance: none;
	}

	.haku{
		margin-right: 10px;
		vertical-align: top;
		line-height: 26px;
		-webkit-appearance: none;
	}

	.blues{
		line-height: 24px;
		padding: 0;
		-webkit-appearance: none;

	}

	.blue{
		line-height: 24px;
		padding: 0;
		font-size: 28px;
		vertical-align: middle;
	}

	.p_gaiyou p{
		line-height: 24px;		
	}

	#pagetop {
    position: fixed;
    width: 65px;
    height: 65px;
    border-radius: 65px;
    right: 30px;
    bottom: 30px;
    background: url(../neoimg/ic_pagetop.png) no-repeat center, #002c59;
    background-size: 32px 19px, auto;
    z-index: 777;
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease;
	}

	.footer_menu{
    margin: 0 auto;
    width: 950px;
	}

	li.footer_menu{
		float:left;
	}

	#main{margin-bottom: 20px;}

@media screen and (max-width:480px) {

	.sp{
		display:inline-block;
	}

	.pc{
		display: none;
	}

	body{
		background:none;
	}

	.tbutton {
		bottom:8px;
	}

	select{
		border-width: 1px;
    	border-style: solid;
    	border-color: #777;
		-webkit-appearance: none;
    	/*width: calc(100% - 5.2vw);*/
    	height: 8.6vw;
    	padding: 0 2.6vw 0 2.6vw;
    	border-radius: 1.2vw;
    	background-color: #fff;
	}

	input{ font-size:16px; } 

	#keyword{
		width: calc(100% - 34px);
	}

/*ヘッダー*/

	#logo{
		width:100%;
		margin:0;
	}

	#logo img{
		width:75%;
		height:auto;
		padding:16px;
	}

	#head{
		width:100%;
		height:auto;
		min-width:100%;
		margin-top:-1px;
	}


	#head > picture {
		margin:0 auto;
	    position: relative;
    	left: 0%;
    	margin-left: 0px;
	}

	#head > picture img{
		width:100%;
	}

/*グローバルナビ*/

	#global-nav{
	  font-size:12px;
	  margin-top:-5px;
	  display:none;
	}

	#global-nav ul{
	   width:100%;
	   margin:0 auto;
	   padding:0;
	   display:table;
	   box-sizing:border-box;
	}

	#global-nav li{
	  display:table-cell;
	  vertical-align:middle;
	  box-sizing:border-box;
	  text-align:center;
	}

	#global-nav ul li a{
	  font-family:Arial;
	  padding:10px 0 10px;
	}

	#global-nav ul li.active a{
	  background:#fff;
	  box-sizing:border-box;
	}
	
	#global-nav ul li.active a::after,
	#global-nav ul li a:hover::after,
	#global-nav ul li a:focus::after{
	  content:"";
	  display:block;
	  background:#fff;
	  height:1px;
	  width:100%;
	  position:absolute;
	  left:0;
	  bottom:-1px;
	  z-index:2;
	}

	#menu1 a,#menu2 a,#menu3 a,#menu5 a,#menu6 a,#menu7 a{
		font-size:0;
	}
	#menu1 a:before{
		font-size:12px;content:"TOP";
	}
	#menu2 a:before{
		font-size:12px;content:"SEARCH";
	}
	#menu3 a:before{
		font-size:12px;content:"LIST";
	}
	#menu5 a:before{
		font-size:12px;content:"ABOUT";
	}
	#menu6 a:before{
		font-size:12px;content:"EARN";
	}
	#menu7 a:before{
		font-size:12px;content:"USE";
	}


/*パンくずリスト*/

	#plist{
		width:calc(100% - 10px);
		height:30px;
		line-height:30px;
		padding-left:10px;
		white-space: nowrap;
		overflow-x: scroll;
	}

	#plist ul{
    	width: max-content;
	}

	#plist li {
	    float: left;
	    margin-right: 5px;
	}

	#plist a {
	    margin-right: 5px;
	}

	.p3{
		float:none;
		padding-left:10px;
	}

	.p2{
		padding:10px;
	}

	#contents{
		width:100%;
	}

	.amenu{
		width:100%;
	}

/*トップ*/

	#new1{
	    width: 100%;
	    margin-bottom:20px;
	}

	#pref{
		width: 100%;	
	}

	.newts{
	    display:none;
	}

	.newss{
	    display:none;
	}

	.top_left{
	    width: 100%;
	    margin-right:0px;
	}

	#slider img{
		width:100%;
		height:auto;
	}

	.bname{
		font-size:20px;
		left:10px;
		top:175px;
		text-shadow: 2px 2px 3px #000, -2px -2px 3px #000;
	}

	 .barea{
		font-size:14px;
		left:10px;
		top:150px;
		text-shadow: 2px 2px 3px #000, -2px -2px 3px #000;
	}

	.top_left{
		margin-bottom:0px;
	}

	.top_right{
	    width: calc(100% - 20px);
	    margin:0 auto;
	}

	.top_right img{
	    width: 100%;
	}

	#aboutt {
	    width: 360px;
	    margin: 0 auto;
	}

	#aboutt .onsenmile {
	    margin: 0 auto;
	    float: none;
	}

	.search {
	    width: 100%;
	    float: none;
	    margin-right:0px;
	}

	#mform {
	    width: calc(100% - 2px);
	    margin: 0 auto;
	}
	#mform table{
		width: calc(100% - 15px);
	}
	.newt {
	    margin: 0 auto;
	    margin-bottom: 20px;
	    float: none;
	}

	.theme {
	    margin: 0 auto;
	    float: none;
	}

	.poponsen {
        width: 100%;
        margin-bottom: 20px;
    }

	.pop {
	    width: 100%;
	    height: auto;
	    float: none;
	}

	#ranking {
		width: calc(100% - 20px);
	    margin: 0 auto;
	}

	.rankn{
		width:100%;
		float:none;
		margin-bottom: 20px;
	}

	.rank1 img{
		width:100%;
	}

	.rank1 img, .rank2 img, .rank3 img, .rank4 img{
		width:100%;
	}

	.rank1,.rank2,.rank3,.rank4{
		width:100%;
		margin-bottom:0px;
	}

	.rank4 p{
		padding-top:10px;
	}

	.rank4 a > p {
		display: block;
		width:100%
	}

	.rankcap{
		width:100%
	}


	#ranking1 .tab01 li.ac {
		border-bottom-style: solid;
		border-bottom-color: #fff;
	}

	.pop ul {
	    width: 100%;
	    position: relative;
	}

	#about{
		float:none;
		width: calc(100% - 40px);
	    	margin: 0 auto;
		padding-top:17px;
	}

	#news {
	    width: 360px;
	    float: none;
	    margin: 0 auto;
	    margin-bottom: 20px;
	}

	#snavi {
		width:calc(100% - 40px);
		margin:0 auto;
		margin-top:20px;
	    float: none;
	}

	#snavi ul, #snavi_t ul {
	    width: calc(100% - 2px);
	}

/*提携一覧*/

	#main-list{
		width:calc(100% - 20px );
		padding:0 10px 0 10px;
		margin:0 auto;
		float:none;
	}

	.ivent{
		width:100%;
		float:none;
		line-height:12px;
		padding:10px 0px 10px 0;
	}

	#list-bun table,#owari table{
		width:100%;
		font-size:12px;
	}

	#list-bun table img{
		display:none;
	}

	.w160,.w50{
		display:none;
	}

	#list-bun .w100{
		width:50px;
	}

	#list-bun .w150{
		width:90px;
	}

	#list-bun td:nth-child(4),#list-bun td:nth-child(5){
		display:none;
	}

	#list-bun th,#list-bun td{
		padding:7px;
		text-align:center;
	}

	#owari table{
		padding:0px 10px 0px 0px;
	}

	.up{
		font-size:12px;
	}

	.up a{
		padding-right:10px;
	}

/* 詳細用 */

	#shop_logo{
		width:calc(100% - 10px);
		padding:5px;
		height:auto;
	}

	#shop_logo img{
		height:40px;
	}

	#shop_logo .icon{
		padding:0px 0px 10px 5px;
	}

	#shop_name{
		width:calc(100% - 10px);
		padding-left:10px;
		height:auto;
		margin-bottom:10px;
	}

	#shop_name .head{
		font-size:20px;
	}

	#shousai_photo{
	    width: 100%;
	    height: auto;
	}

	#shousai_photo img{
	    width: 100%;
	    position:relative;
	}

	#shousai_navi li{
		width:calc(( 100% - 9px ) / 4 );
		height:auto;
		margin:0px 3px 3px 0px;
	}

	#shousai_navi li:nth-child(4){
		margin:0px 0px 3px 0px;
	}

	#shousai_navi img{
		width:100%;
	}

	#photogg{
		width:calc(( 100% - 9px ) / 4 );
	}

	#photogg img{
		width:100%;
	}

	#photo2{
		display:none;
	}

	#main{
		width:calc(100% - 20px);
	}

	#kcpy,#honbun{
		width:calc(100% - 20px);
		line-height:150%;
		margin-left:0px;
		margin-top:15px;
		padding:0px 10px 0px 10px ;
	}

	#kcpy{
		font-size:16px;
	}

	#honbun{
		padding-bottom:10px;
	}

	#details{
		width:calc(100% - 20px);
		margin:0 auto;
	}

	#details table{
		width:100%;
	}

	#details th{
		width:90px;
	}

	#map_canvasa {
		width: calc(100% - 20px);
		margin:0 auto;
	}

	#link{
		width:calc(100% - 20px);
		margin:0 auto;
		margin-top:20px;
		height:40px;
		line-height:40px;
		-webkit-appearance: none;
	}

	#link img{
		display:none;
	}

	#link a{
		float:none;
		text-align:center;
		padding-left:17px;
		background-image: url(../../neoimg/but.png);
    	background-repeat: no-repeat;
		background-position: 0px 3px;
	}

	#link2{
			width:calc(100% - 20px);
			margin:0 auto;
			height:auto;
	}

	.linknew{
			width:calc(100% - 10px);
			float:none;
	}

	.linknew a{
	    padding: 15px 10px;
	    color: #fff;
		font-size:14px;
	}

	.linknew1{
			width:calc(100% - 10px);
			float:none;
	}

	.linknew1 a{
	    padding: 15px 10px;
	    color: #fff;
		font-size:14px;
	}

	.linkgmap{
		text-align: center;
		padding:20px;
	}

	.linkgmap a{
		font-weight:bold;
	}

	#photo li {
		margin-bottom:20px;
	}

	#photo li a img {
		width:100%;
		margin:0 auto;
	}

	#sidebar{
		width:calc(100% - 40px);
		margin:0 auto;
		clear:both;
		padding-top:20px;
		float:none;
	}

	#snavi_t{
		width:calc(100% - 40px);
		margin:0 auto;
		float:none;
	}

	.kakko1{
		width:90px;		
	}

	#snavi_t ul{
		width:calc(100% - 2px);
	}

	.copyright{
		padding-left:10px;
	}

	#social{
		margin:0px;
		padding-left:10px;
	}

	#shop_name .hdg03 {
    		font-size: 20px;
	}

	#use .hdg02 {
		padding-top:20px;
		background-position: 5px 20px;
	}

	#use .hdg-box,.alink {
		width:100%;
	}

	.art p{
		width:calc(100% - 20px);
		margin-left:10px;
	}

	.alink a{
		width:calc(100% - 20px);
	}

	#link4 a{
		width:calc(100% - 20px);
	}

	#link4 a{
	    padding: 15px 10px;
	    color: #fff;
		font-size:14px;
	}

	.plan{
		clear:both;
		text-align: center;
	}

	.plan img{
		width:242px;
		float:none;
		padding:10px;
		margin:0 auto;
	}

	.check img{
		width:30px;
		height:20px;
		padding:3px;
	}

	.p_gaiyou{
		width:100%;
		float:none;
	}


/*温泉マイルとは*/
	#main-top{
		width:100%;
		margin:0 auto;
		float:none;
	}

	.box_about{
		height:auto;
		display:block;
	}

	.box_about img{
		width:100%;
	}

	.box_about .about_hdg01{
		position:relative;
		bottom:0;
	}

	.about_hdg01{
		font-size:18px;
	}

	.box_about .txt{
		position:relative;
		margin-bottom:20px;
	}

	#point{
		width:100%;
		text-align:center
	}

	#point a{
		position:relative;
		text-align:left;
	}

	#point .point_inner{
		margin:0 auto;
		padding-left:0;
		float:none;

	}

/*使い方*/
	#main{
		width:calc( 100% - 20px );
		margin:0 auto;
		float:none;
	}

	#use{
		width:100%;
		float:none;
	}

	#earn{
		width:100%;
		float:none;
	}

	.hdg02{
		height:auto;
		/*padding-bottom:10px;*/
	}

	.tolink a{
		background-position: 10px 10px;
		text-align:left;
	}

	#iconsetumei{
		width:100%;
		float:none;
	}

	.art .icon01, .icon01{
		width:calc( 100% - 35px );
		float:none;
	}

	.art img{
		width:100%;
	}

	.artd{
		width:100%;
		float:none;
		margin-bottom:20px;
	}

	.artd p{
		margin-left:0px;
	}

	.gray1{
		margin-top:10px;
		padding:10px;
	}

	.gray{
		width:auto;
		padding-bottom:20px;
		float:none;
	}

	.link01::after{
		content: "";
    		display: block;
		clear:both;
	}

/*特約店について*/

	#tokuyakuten a{
		width:auto;
		padding:10px 0px 10px 0px;
		background-position:10px;
	}

	#tokuyakuten_box{
		padding:20px;
	}

	#tokuyakuten_box img{
		width:100%;
	}


	#tokuyakuten_box .txt .note1,#tokuyakuten_box .txt .note2 {
		display:block;
		width:auto;
	}
	#tokuyakuten_box .txt .note2 .icon {
		top:0%;
		margin-top:0px;
	}

	#tokuyakuten_box .num {
		text-align:left;
	}

	#tokuyakuten_box .type2 {
		margin-left:0px;
		padding:2px 5px;
		width:auto;
	}

	#tokuyakuten_box .total {
		text-align:left;
	}

	#tokuyakuten_box .type1 {
		margin-left:10px;
		margin-right:20px;
		padding:2px 5px;
	}

/*都道府県で探す*/

	#search{
		display:none;
	}
	.sonsenp{
		width:auto;
		height:auto;
	}

	.sonsenl{
		float:none;
		width:100%;
	}

	.sonsenr{
		float:none;
		width:100%;
	}

	#ponsen .link img{
		width:100%;
	}

/*ランキング*/
	#search{
		display:none;
	}


/*トップ エリアから探す*/


	.search iframe{
		display:none;
	}

	#tnavi{
	    width: 100%;
	}

	#tnavi .find{
		background-position: 110px 12px;
	}

	#tnavi select{
		width:calc(100% - 82px);
	}

	.syosai{
		margin-bottom:5px;
	}

	.newt .find{
		background-position: 100px 12px;
	}

    #pagetop {
        width: 13.2vw;
        height: 13.2vw;
        border-radius: 13.2vw;
        right: 6vw;
        /* bottom: 6vw; */
        bottom: 9vw;
        background: url(../neoimg/ic_pagetop.png) no-repeat center, #002c59;
        background-size: 6.2vw auto, auto;
    }

/*フッター*/

	.copyright {
	    width:calc(100% - 10px);
	    padding-left:10px;
	}

	.copyright>div {
	    width:100%;
	}

	.footer_menu{
	  clear: both;
	  width:calc(100% - 30px);
	  font-family: "Noto Sans JP", sans-serif;
	  font-optical-sizing: auto;
	  font-weight: 400;
	  font-style: normal;
	  font-size:14px;
	  margin: 20px 0 10px 0;
	}

    .footer_menu li{
	display:inline-block;
	padding-left:20px;
	background-image:url(../neoimg/icon.jpg);
	background-repeat:no-repeat;
	background-position:left 0px top 1px;
	margin:0 15px 10px 0;
	vertical-align:middle;
	height:20px;
	}
}

@media screen and (max-width:376px) {

	.newt{
		width: calc(100% - 20px);		
	}

	.slide a img {
		width: 100%;
	}

	#news{
		width: calc(100% - 22px);			
	}

	.pop li{
		background-position: 85px 15px;
	}

	.hdg02-box .hdg {
		padding-left: 20px;
		font-size: 12px;
	}

}

@media screen and (max-width:321px) {

	#tnavi .find{
		background-position: 85px 12px;
	}

	.newt .find{
		background-position: 75px 12px;
	}

	.pop li{
		background-position: 55px 15px;
	}

	.tbutton{
		font-size: 9px;
		line-height: 18px;
		right:2px;
		bottom: 5px;
		width: 80px;
		height: 18px;
	}

	.onsenti .title {
		padding-top: 0px;
	}

	.onsenti{
		margin-bottom: 10px;
	}

	.hdg02-box .hdg {
		vertical-align: top;
	}

	.tonew{
		font-size:9px;
	}

}

/* ハンバーガーメニュー */
.c-header {
  align-items: center;
  /* background-color: #eeeeee;  カスタマイズしてください */
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  /*padding: 1rem 2rem;  カスタマイズしてください */
  width: 100%;
}

.c-header__logo {
  color: #000; /* カスタマイズしてください */
  min-width: 80px; /* カスタマイズしてください */
  text-decoration: none;
}

.c-header__list {
  box-sizing: border-box;
  display: flex;
  margin: 0;
  padding: 0;
  display:none;
}

.c-header__list-item {
  list-style: none;
  text-decoration: none;
}

li.c-header__list-item{
  padding-left:25px;
  background-image: url(/neoimg/icon.jpg);
  background-repeat: no-repeat;
  background-position:left 0px top 11px;
}

.c-header__list-link {
  color: #000; /* カスタマイズしてください */
  display: block;
  margin-right: 20px; /* カスタマイズしてください */
  text-decoration: none;
  padding: 10px 0px; /* カスタマイズしてください */
}

.c-header__list-link:hover {
  filter: opacity(0.6); /* カスタマイズしてください */
}

.c-hamburger-menu {
  position: relative;
}

@media screen and (max-width: 750px) {
  .c-hamburger-menu__list {
    background-color: #fff;  
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    left: 0;
    padding:10px 2rem 2rem 2rem; /* カスタマイズしてください */
    position: absolute;
    transform: translateX(-100%);
    transition: 0.3s; /* カスタマイズしてください */
    top: 100%;
    width: 100%;
  }

  #hamburger:checked ~ .c-hamburger-menu__list {
    transform: translateX(0%);
    transition: 0.3s;
    z-index:9999;
  }
}

.c-hamburger-menu__input {
  display: none;
}

.c-hamburger-menu__bg {
  background-color: #fff; /* カスタマイズしてください */
  cursor: pointer;
  display: none;
  height: 100vh;
  left: 0;
  opacity: 0; /* カスタマイズしてください */
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 9999;
}

#hamburger:checked ~ .c-hamburger-menu__bg {
  display: block;
}

.c-hamburger-menu__button {
  display: none;
}

@media screen and (max-width: 750px) {
  .c-hamburger-menu__button {
    align-items: center;
    appearance: none;
    /*background-color: transparent;*/
    background-image:url("../neoimg/hb_bg.jpg");
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px; /* カスタマイズしてください */
    height: 32px; /* カスタマイズしてください */
    justify-content: center;
    width: 32px; /* カスタマイズしてください */
    float:right;
    padding:14px;
  }
}

.c-hamburger-menu__button-mark {
  background-color: #fff; /* カスタマイズしてください */
  display: block;
  height: 1px; /* カスタマイズしてください */
  transition: 0.3s; /* カスタマイズしてください */
  width: 20px; /* カスタマイズしてください */
}

@media screen and (max-width: 750px) {
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(1) {
    transform: translate(2px, 1px) rotate(45deg); /* カスタマイズしてください */
    transform-origin: 0%; /* カスタマイズしてください */
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(2) {
    opacity: 0;
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(3) {
    transform: translate(2px, 3px) rotate(-45deg); /* カスタマイズしてください */
    transform-origin: 0%; /* カスタマイズしてください */
  }
}