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

/* スマホ閲覧時のハンバーガーメニュー */
	:root{
		--navBg:#000;/*ボタン、スマホ時メニュー背景カラー*/
		--navTxt:#fff;/*ボタン文字色*/
		--open:linear-gradient(90deg,#f981b5,#3dc3e5);
		--smpselect:linear-gradient(90deg,#f981b5,#3dc3e5);
		--bottomselect:#32c0ba;
		--buyBt:#32c0ba;
		--pcTxt:#fff;
		--psselect:linear-gradient(90deg,#f981b5,#3dc3e5);
	} 
	#smpNav {
	  display: none; /* チェックボックスを非表示 */
	}

	.menu_button { /* ボタンのスタイル */
		width: 4em;
		height: 4em;
	  position: fixed;
	  top: 0;
	  right: 0;
	  /*background: var(--navBg);*/ /* 背景色 */
	  z-index: 920;
	}
	.menu_button:after { 
		 content: "menu";
		position: absolute;
		display: block;
		font-size: 0.8em;
		width:100%;
		text-align: center;
		bottom:0.4em;
		letter-spacing: 1px;
		color: var(--navTxt);
	}
	#smpNav:checked + .menu_button::after{
			content: "close";

	}
	
	.menu_button .bticon,
	.menu_button .bticon:before,
	.menu_button .bticon:after{
		width: 2.6em;
		height: 2px;
		margin-top: -1px;
		margin-left: -1.3em;
		left:50%;
		transition: all 200ms 0s ease;
		background: var(--open);
	}
	
	.menu_button .bticon{
		position: relative;
		top:43%;
	}
	.menu_button .bticon:before{
		content: "";
		top:-0.6em;
		position: absolute;
		display: block;
	}
	.menu_button .bticon:after{
		content: "";
		top:0.7em;
		position: absolute;
		display: block;
	}
	#smpNav:checked + .menu_button .bticon{
		background:transparent;
	}
	#smpNav:checked + .menu_button .bticon:before{
		transform: rotateZ(45deg) scaleX(0.9);
		height: 4px;
		margin-top: -2px;
		top:0;
	}
	#smpNav:checked + .menu_button .bticon:after{
		transform: rotateZ(-45deg)scaleX(0.9);
		height: 4px;
		margin-top: -2px;
		top:0;
	}

 /*メニュー開閉----------------------------------*/
	.global_menu { /* メニュー全体のスタイル */
	  visibility: hidden; /* メニューを非表示 */
	  width: 100%;
	  height: calc(100% - 4em);
	  padding: 0 0 1em;
	  position: fixed;
	  top: 4em;
		left: 0;
	  color:  var(--navTxt); /* 文字色 */
	  background-color:  var(--navBg); /* 背景色 */
		background-image: url("../img/smp/navi_bg.jpg");
		background-position: center top;
		background-size: cover;
	  overflow-y: auto;
	  transition: all 200ms 0s ease;
	   opacity: 0;
		z-index: 900;
	}

	#smpNav:checked ~ .global_menu { /* メニュー全体のスタイル（チェック済） */
	  visibility: visible; /* メニューを表示 */
		opacity: 1;
	/* transform: translateX(0);*/
	}

	.global_menu ul{
			width: 100%;
		font-size: min(1.2em,16px);
	}

/*メニューリンクスタイル設定（共通）----------------------------------*/
	.global_menu a { /* 各項目のスタイル */
	  display: block;
	  width: 100%;
	  position: relative;
		padding: 1em ;
	}
	.global_menu a.non{
		pointer-events: none;
		opacity: 0.3;
	}
	.menu_style {/*タイトル別ナビスタイル*/
		color: var(--navTxt);
	 }
	.naviNew{font-size: 0.8em; line-height: 1em;}/*新着日付表示文字サイズ*/

/*SNSリンク：基本（スタイル１・スタイル２）-------------------------------------------*/
	.snsBt{
		width: 10.5em;
		margin: 1em 0 0 auto;
		display: block;
		position: relative;
		padding-right: 1em;

	}
	.snsBt:before{
		content: "OFFICIAL ACCOUNT";
		display: block;
		position: absolute;
		vertical-align: middle;
		font-size: 0.8em;
		line-height: 1em;
		width: 11em;
		top:50%;
		margin-top: -0.5em;
		left: -10em;

	}
	.snsBt img{
	}
	.snsBt a{
		width: calc(calc(100% / 3) - 0.5em);
		display:inline-block;
		vertical-align: top;
		margin: 0 0.25em;
		padding: 0;
	}
/*SNSリンク：スタイル3-------------------------------------------*/
	.style3 .snsBt{
		margin: 1em 0;
		margin-left: 0.7em;
	}
	.style3 .snsBt:before{
		content: "OFFICIAL ACCOUNT";
		position: relative;
		width: 10em;
		top:auto;
		margin-top:0;
		left: 0.6em;
		margin-bottom: 0.25em;

	}

/*ナビデザイン：スタイル１-------------------------------------------*/
	.global_menu.style1 ul{
			width: 100%;
	}
	.style1 .menu_style {/*タイトル別ナビスタイル*/
		border-bottom: #ccc 1px solid;
	 }
	.style1 .menu_style.selected {/*タイトル別ナビスタイル（選択時）*/
		background: var(--smpselect);
	}
	.style1 .menu_style .naviNew{
		position: absolute;
		right:1em;
		top:50%;
		margin-top: -0.5em;
	}

/*ナビデザイン：スタイル2-------------------------------------------*/
	.global_menu.style2:before{
		content: "";
		width: 100%;
		top:4em;
		left: 0;
		bottom: 0;
		position: fixed;
		display: block;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top right;
		z-index: -1;
	}
	.global_menu.style2 ul{
			width: 65%;
	}

	.style2 .menu_style.selected {/*タイトル別ナビスタイル（選択時）*/
		background: var(--smpselect);
	}
	.style2 .menu_style .naviNew{
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-left: 1.5em;
		
	}
	/*ランダム画像-------*/
	#bg1.global_menu.style2:before{
		
		background-image: url("../img/navi/spm_bg1.jpg");
	}
	#bg2.global_menu.style2:before{
		background-image: url("../img/navi/spm_bg2.jpg");
	}
	#bg3.global_menu.style2:before{
		background-image: url("../img/navi/spm_bg3.jpg");
	}
	#bg4.global_menu.style2:before{
		background-image: url("../img/navi/spm_bg4.jpg");
	}
	#bg5.global_menu.style2:before{
		background-image: url("../img/navi/spm_bg5.jpg");
	}
	#bg6.global_menu.style2:before{
		background-color:cadetblue;/*テスト用*/
		/*background-image: url("../img/smp/top_img.jpg");*/
	}
	/*ランダム画像ここまで-------*/

/*ナビデザイン：スタイル3-------------------------------------------*/
	.global_menu.style3 ul{
			width: 65%;
	}

	.style3 .menu_style.selected {/*タイトル別ナビスタイル（選択時）*/
		background: var(--smpselect);
	}
	.global_menu.style3:before{
		content: "";
		width: 35%;
		top:4em;
		right: 0;
		bottom: 0;
		position: fixed;
		display: block;
		background-image: url("../img/smp/top_img.jpg");/*画像URL*/
		background-repeat: no-repeat;
		background-size: cover;
		z-index: -1;
	}

/*----------------------------------------------------------------
上部ナビ
-----------------------------------------------------------------*/
	.topFixArea{
		top:0;
		position: sticky;
		width: 100%;
		background: var(--navBg);
		z-index: 990;
		/*border-bottom:var(--gold) 1px solid;*/
	}

	.top_snsLink{
		position: absolute;
		top:0;
		right: 4em;
		bottom: 0;
		z-index: 903;
		width: 8em;
		display: grid;
		align-items: center;
		grid-template-columns:repeat(2, 1fr);
	}

	.top_snsLink a,.top_snsLink a.youtubeBt,.top_snsLink a.tikBt{
		display: grid;
	}
	.top_snsLink a img{
		object-fit: contain;
	}

	.top_snsLink a{
		position: relative;
		height: 100%;
		display: block;
		background-image: url("../img/sns_icon_x.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: auto 70%;
		text-indent: -9999px;
	}

	.top_snsLink a.youtubeBt{
		/*display: none;*/
		background-image: url("../img/sns_icon_youtube.png");
	}
	.top_snsLink a.tikBt{
		display: none;
		background-image: url("../img/sns_icon_tik.png");
	}
	.buyBt{
		background-color:var(--buyBt);/*任意カラー*/
		width: 8em;
		padding: 0 1em;
		position: absolute;
		top:0;
		bottom: 0;
		right: 12em;
		z-index: 900;
		text-indent: -9999px;
		background-image: url("../img/navi/buy.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}
	.topLogo{
		text-align: left;
		position: relative;
		display: block;
		top:0;
		left: 0;
		z-index: 900;
		padding:0.4em 0.5em 0.5em;
		padding-right: 1em;
		
	}
	.topLogo,.topLogo.scSize{
		width: 40vw;
		height: 4em;
	}
	.topLogo img{
		height: 100%;
		width: auto;
	}

/*下部固定ナビ---------------------------*/
	.bottomNavi{
		position:fixed;
		bottom: 0;
		background-color: #000;/*任意カラー*/
		display: block;
		width: 100%;
		left: 0;
		z-index: 900;
		border-top: var(--gold) 1px solid;
	}
	.bottomNavi .btBox{
		max-width: 1000px;
		margin: 0 auto;
		display: grid;
		grid-template-columns:repeat(5, 1fr);
		column-gap: 1px;
		row-gap: 1px;
	}
	.bottomNavi .btBox a{
		display: block;
		text-align: center;
	}
	.bottomNavi .btBox a.non{
		pointer-events: none;
		opacity: 0.3;
	}


	.bottomNavi .btBox a.selected{
		background: var(--bottomselect);/*任意カラー*/
	}
	.bottomNavi .btBox a img{
		max-width: 100px;
	}
/*以下PC時表示-----------------------------------------------------------*/

@media screen and (min-width: 1025px) {
	/* PC閲覧時のメガメニュー */
	.menu_button {
	display: none; /* ハンバーガーメニューのボタンを非表示 */
	}
	/*下部固定ナビ削除*/
	.bottomNavi{
		display: none;
	}	
	/*スマホ時SNSアカウント削除*/
	.snsBt{display: none;}

	/*更新日付削除*/
	.naviNew,
	.style1 .menu_style .naviNew,
	.style2 .menu_style .naviNew{display: none;}
	
	.global_menu,
	.topFixArea,
	.top_snsLink,
	.buyBt,
	.topLogo,
	.global_menu.style1 ul,
	.global_menu.style2 ul,
	.global_menu.style3 ul{
		font-size:14px;
	}
/*スマホでの設定をリセット--------------------------------------*/
  .global_menu { /* メニュー全体のスタイル */
    position:absolute;
	/*マスト------------------------------*/
	transition: all 200ms 0s ease;
	visibility: visible;
	overflow-y: visible;
	opacity: 1;
	/*------------------------------*/
	padding: 0;

	width: calc(100% - 26em);
  	height: 100%;
	/*margin-left: 9.2em;*/
	margin-left: 10.5em;
	margin-right: 16em;
	background-color: transparent;
	  background-image: none;
  	display: grid;
	bottom: 0;
	top:0;
	align-items: center;
  }

  .global_menu .menu{
    display: inline-block;
  }
	.global_menu.style2:before,
	.global_menu.style3:before{
		display: none;
	}

	.global_menu.style1 ul,
	.global_menu.style2 ul,
	.global_menu.style3 ul{
		width: 100%;
		max-width: none;
		margin-left: 0;
		display: block;
	}
	.menu_style {/*タイトル別ナビスタイル*/
		color: var(--pcTxt);
	 }
	.style1 .menu_style {
		border: 0;
	}
	.style1 .menu_style.selected,
	.style2 .menu_style.selected,
	.style3 .menu_style.selected{ 
		background: transparent;
	}
	/*PC版選択中*/
	.style1 .menu_style.selected:before,
	.style2 .menu_style.selected:before,
	.style3 .menu_style.selected:before{
		content: "";
		width: 100%;
		bottom: 0.8em;
		left: 0;
		height: 3px;
		background: var(--psselect);
		position: absolute;
		display: block;
	}
	.style1 .menu_style:hover:before,
	.style2 .menu_style:hover:before,
	.style3 .menu_style:hover:before{
		content: "";
		width: 100%;
		bottom: 0.8em;
		left: 0;
		height: 3px;
		background: var(--psselect);
		position: absolute;
		display: block;
		opacity: 0.3;
		
	}
/*スマホでの設定をリセットここまで--------------------------------------*/
/*----------------------------------------------------------------
上部ナビ
-----------------------------------------------------------------*/
	.global_menu a { /* 各項目のスタイル */

		padding: 1em 0.5em;
	}
	.buyBt{
		padding: 0 0.5em;
	}

	.topFixArea{
		/*min-width:1100px;*/

		background: rgba(0,0,0,0.9);
	}

	.top_snsLink{
		right: 0;
		width: 10em;
		display: grid;
		align-items: center;
		grid-template-columns:repeat(2, 1fr);
	}
	.top_snsLink a,.top_snsLink a.youtubeBt,.top_snsLink a.tikBt{
		display: grid;
	}
	.top_snsLink a img{
		object-fit: contain;
	}

	.buyBt{
		right: 10em;
		width: 9em;
	}
	.topLogo{
		width: 10em;
		height: auto;
		transition: width 0.2s 0s ease-out;

		box-sizing: border-box;
		
	}
	.topLogo.scSize{
		width: 9em;
		height: auto;
		padding: 0.5em;
	}
	.topLogo img{
		width: 100%;
		height: auto;

	}

}
@media screen and (min-width: 1451px) {/*1450px以上*/
	.global_menu,
	.topFixArea,
	.top_snsLink,
	.buyBt,
	.topLogo,
	.global_menu.style1 ul,
	.global_menu.style2 ul,
	.global_menu.style3 ul{
		font-size:clamp(12px, 0.9vw, 18px);
	}
  .global_menu { /* メニュー全体のスタイル */
	width: calc(100% - 32em);

	margin-left: 13em;
	margin-right: 16em;
  }


/*----------------------------------------------------------------
上部ナビ
-----------------------------------------------------------------*/
	.top_snsLink{
		width: 10em;
	}

	.buyBt{
		right: 10em;
		width: 11em;
	}
	.topLogo{
		width: 13em;
		
	}
	.topLogo.scSize{
		width: 11em;
	}

}