@charset "UTF-8";
@import url("./color.css");




.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

/* Recommended icon sizes */
material-symbols-outlined.size-20 {
  font-size: 20px;
  font-variation-settings: 'OPSZ' 20;
}
material-symbols-outlined.size-24 {
  font-size: 24px;
  font-variation-settings: 'OPSZ' 24;
}
material-symbols-outlined.size-40 {
  font-size: 40px;
  font-variation-settings: 'OPSZ' 40;
}
material-symbols-outlined.size-48 {
  font-size: 48px;
  font-variation-settings: 'OPSZ' 48;
}

/* Rules for using icons as black on a light background. */
.material-symbols-outlined.dark {
  background: black;
  color: rgba(255, 255, 255, 1);
  font-variation-settings: 'GRAD' -25;
}
.material-symbols-outlined.dark-inactive {
  background: black;
  color: rgba(255, 255, 255, 0.3);
  font-variation-settings: 'GRAD' -25;
}


/*---------------------------------------------------------------------------------------
切り替えクエリ
---------------------------------------------------------------------------------------*/
@media screen {
	:root {
		--sType: "169";
		--devWidth: 1920px;
		--devHeight: 1080px;
		--headerWidth: 120px;
		--headerHeight: 1080px;
		--blockWidth: 360px;
		--blockHeight: 360px;
		--baseRows: 3;
		--baseCols: 5;
	}
}

@media screen and (aspect-ratio: 16/9) {
	:root {
		--sType: "169";
		--devWidth: 1920px;
		--devHeight: 1080px;
		--headerWidth: 120px;
		--headerHeight: 1080px;
		--blockWidth: 360px;
		--blockHeight: 360px;
		--baseRows: 3;
		--baseCols: 5;
	}
}



/*
360*5=1800
1800+120=1920
*/


/*---------------------------------------------------------------------------------------
親配置CSS
---------------------------------------------------------------------------------------*/
*, *:before, *:after {
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
}

html {
	border-collapse: collapse;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-size: 62.5%;
	line-height: 1;
}

body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	overflow: hidden;
}


/*---------------------------------------------------------------------------------------
基本配置CSS
---------------------------------------------------------------------------------------*/
#scmsgr_wrapper{
  width:100vw;
  height:100vh;
  display:grid;
  grid-template-rows: 1fr 48px;
  grid-template-columns: 48px 1fr;
	overflow: hidden;
}

#scmsgr_wrapper > *{
  background-color:var(--ud_black);

}

#scmsgr_header{
  grid-column: 1/3;
  grid-row: 2/3;
  background-color: var(--ud_black);
  color:var(--ud_white);
	overflow: hidden;
}

#scmsgr_side{
  grid-column: 1/2;
  grid-row: 1/2;
  background-color: var(--ud_black);
  color:var(--ud_white);
	overflow: hidden;
}

#scmsgr_mainimg{
  grid-column: 2/3;
  grid-row: 1/2;
	overflow: hidden;
}

#scmsgr_mainimg > #swiper_container{
	width:100%;
	height:100%;
	overflow: hidden;
}

.swiper-slide img{
	display: block;
	width:100%;
	height:100%;
	
	object-fit: scale-down;
}


.fully_header{
	padding:0 16px;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	align-items:center;
}

.fully_header > *{
	flex:0 0 auto;
	margin:0 0;
}


.fully_header *[class^="fh_logo"]{
	flex:0 0 320px;
	height:48px;
	margin-right: auto;
	padding:8px 0;
	overflow: hidden;
}

.fully_header *[class^="fh_logo"] > img{
	display: block;
	width:100%;
	height:100%;
	object-fit: scale-down;
}



.fully_header *[class^="fh_icon"]{
	flex:0 0 48px;
	color:var(--ud_white);
}