/*web font*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&family=Poppins:wght@200;300;400;500;600;700&display=swap');



@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap');



body{

	margin: 0 auto;

	font-family:'Yu Gothic Medium', '游ゴシック Medium', 'YuGothic', '游ゴシック体', 'ヒラギノ角ゴ Pro W3', 'メイリオ' , 'Noto Sans JP', sans-serif;

	font-family: 'Inter', sans-serif;

	color: #000;

	line-height:1em;

	letter-spacing:0.07em;

	box-sizing: border-box;

}



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



h1,h2,h3,p{

	color:#303344;

	word-wrap: break-word;

}



a{

	text-decoration: none;

}



/*不透明度55%*/

.op{opacity: 0.55;}



/*color*/

.or{color:#F07800;}

.nv{color:#1C3A82;}

.pr{color:#8A76BE;}

.bs{color:#303344;}





/*背景色添加薄色*/

.orback{background-color: #f1851e;}

.nvback{background-color: #334e8e;}

.prback{background-color: #9684c3;}



/*

.bsback{background-color: #6e707c;}

.opback{background-color: #3E4459;}*/





/*背景色添加原色*/

/*

.orback{background-color: #F07800;}

.nvback{background-color: #1C3A82;}

.prback{background-color: #8A76BE;}

*/

.bsback{background-color: #303344;}

.opback{background-color: #3E4459;}



#pc {

	display: none;

}

	

/*ヘッダー*/

	

.header{

	width: 100%;

	height:18vw;

	background-color: #303344;

	position: sticky;

	top: 0;

	z-index: 999;

}



.container{

	width: 100%;

	height:18vw;

	display: flex;

	align-items: center;

	justify-content: space-between;

}



.headlogo{

	margin-left: 5%;

	width: 40%;

}



/* チェックボックスは非表示に */

.drawer-hidden {

	display: none;

}

/* ハンバーガーアイコンの設置スペース */

.drawer-open {

	display: flex;

	height:30px;

	width: 50px;

	justify-content: center;

	align-items: center;

	position: relative;

	z-index: 100;/* 重なり順を一番上に */

	cursor: pointer;

}

	

	



/* ハンバーガーメニューのアイコン */



.drawer-open span,

.drawer-open span:before,

.drawer-open span:after {

	content: '';

	display: block;

	height: 1px;

	width: 30px;

	border-radius: 3px;

	background: #fff;

	transition: 0.5s;

	position: absolute;

}



/* 三本線のうち一番上の棒の位置調整 */

.drawer-open span:before {

	bottom: 8px;

}

	/* 三本線のうち一番下の棒の位置調整 */

.drawer-open span:after {

	top: 8px;

}

	/* アイコンがクリックされたら真ん中の線を透明にする */

#drawer-check:checked ~ .drawer-open span {

	background: rgba(255, 255, 255, 0);

}

	/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */

#drawer-check:checked ~ .drawer-open span::before {

	bottom: 0;

	transform: rotate(45deg);

}

#drawer-check:checked ~ .drawer-open span::after {

	top: 0;

	transform: rotate(-45deg);

}

	

/* アイコンがクリックされたらメニューを表示 */

#drawer-check:checked ~ .drawer-content {

left: 0;/* メニューを画面に入れる */

}





/* メニューのデザイン*/



	

.drawer-content {

	width: 100%;

	height: 100%;

	position: fixed;

	top: 0;

	left: 100%;/* メニューを画面の外に飛ばす */

	z-index: 99;

	background: #303344;

	line-height: 2.8;

}



.dmenu-cont{

	display: flex;

}



.dmenu-l{

	margin-left: 5%;

}



.dmenu-l p{

	font-size: 4vw;

	font-weight: bold;

}

	

.dmenu-r{

	margin-left: auto;

	margin-right: 25%;

}



.dmenu-r p{

	padding-top:1vw;

	font-size: 3vw;

	font-weight: normal;

}

	

.dmenu-cont p{

	color: #fff;

}



.buynow p{

	margin: 40vw auto auto auto ;

	text-align: center;

	width: 90%;

	padding: 0.2em 0;

	border-radius:10em;

	background-color: #fff;

	color:#303344;

	font-size: 4vw;

	font-weight: bold;

	

}





/*メインビジュアル*/

.mv{

	padding-top: 10vw;	

	padding-bottom: 15vw;

	margin: auto;

	width: 90%;

}



.mv h1{

	font-size: 10vw;

	line-height: 10vw;

	font-weight: 900;

	padding-bottom: 2vw;

}



.mv h2{

	font-size: 5vw;

	line-height: 6vw;

	font-weight: 900;

	padding-bottom: 6vw;

}



.mv p{

	font-size: 3.5vw;

	line-height: 6.5vw;

	font-weight: 900;

	padding-bottom: 4vw;

}

	

.mv img{

	width: 100%;

	margin: 4vw auto;

}

	

/*Move*/

	#smove {

			padding: 10vw 0 20vw;

		background: #fff;

		margin-bottom: 20vw;

	}

#smove h1 {

    font-size: 7vw;

    text-align: center;

    line-height: 10vw;

    font-weight: 900;

    padding-bottom: 8vw;
}

.video {

position: relative;

height: 0;

padding: 30px 0 56.25%;

overflow: hidden;

}

.video iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

/*information*/

	#sinfo {

		padding-bottom: 20vw;

	}

#sinfo h1 {

    font-size: 7vw;

    text-align: center;

    line-height: 10vw;

    font-weight: 900;

    padding-bottom: 8vw;

}

.show-scroll-bar-wrapper {

    width: 94%;

    margin: 0 auto 30px;

    position: relative;

    z-index: 1;

    overflow: hidden;

}

.show-scroll-bar {

    max-height: 20em;

    overflow: hidden;

    overflow-y: scroll;

}

.scroll-bar {

    position: absolute;

    top: 0;

    bottom: 0;

    right: 0;

    width: 4px;

    background-color: #ccc;

}

.scroll-bar-thumb{

  position: relative;

  min-height: 10%;

  background-color: #666;

  border-radius: 2px;



}

#sinfo li {

	background-color: #f1f1f5;

    padding: 4vw;

	line-height: 1.5;



}

#sinfo li + li {

    margin-top: 5px;

}

#sinfo ul li div.text-area{

    margin: 0;

    padding: 0;

    display: flex;

    align-items: center;

    flex-grow: 1 2;

}

#sinfo ul li div.text-area a{

	text-decoration: underline;
	color: #303344;

	}

#sinfo div.text-area{

    letter-spacing: 0.2vw;

    text-align: left;

    margin-top: 3.0vh;

    padding: 0 3vw;

}

#sinfo div.text-area div.date {

    font-weight: 500;

    font-size: 3.2vw;

    margin-right: 10%;

}

#sinfo div.text-area div.text-list{

    font-weight: 500;

    font-size: 3.5vw;

	word-break: break-all;

}

#sinfo .btn button, #topics .btn button {

    font-family: 'Questrial', sans-serif;

    text-align: center;

    font-size: 18px;

    letter-spacing: 2px;

    border: none;

    color: #fff;

    background-color: #303344;

    padding: 8px 10px 8px 0;

    min-width: 200px;

    position: relative;

    height: 40px;

    margin: 0 auto;

    display: block;

}

#sinfo .btn button:after, #topics .btn button:after {

    content: ">";

    position: absolute;

    right: 50%;

    margin-right: -80px;

}

/*キューブ*/	

.box_contena {

  width: 100%;

  max-width: 900px;

  margin: 100px auto;

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

}	

.box_contena .box01 {

    width: 100%;

    height: 100%;

}

.box_contena .inpos {

    position: relative;

    width: 100%;

    height: 100%;

}	

.box_contena .inpos_center {

    position: absolute;

    width: 100%;

    top: 50%;

    text-align: center;

    -webkit-transform: translate(0%, -50%);

    transform: translate(0%, -50%);

}	

.box_contena h3.box_titleH3 {

    font-size: 40px;

    font-family: 'Pathway Gothic One', sans-serif;

    color: #fff;

    font-weight: 300;

    line-height: 100%;

}

.box_contena p.box_p {

    font-size: 14px;

    color: #fff;

    padding: 15px 0 20px 0;

    line-height: 125%;

}

.box_contena div.photo {

    width: 100%;

    margin: 0 auto;

}	

.box_contena .botanwaku span {

    display: inline-block;

    padding: 12px 0px;

    width: 150px;

    margin: 0 auto;

    color: #fff;

    font-family: 'Pathway Gothic One', sans-serif;

    border: 1px solid #fff;

    text-align: center;

    position: relative;

    font-size: 18px;

    line-height: 100%;

}

.box_contena .botanwaku span::after {

    position: absolute;

    content: "";

    top: 50%;

    right: 10px;

    -webkit-transform: translate(0%, -50%);

    transform: translate(0%, -50%);

    width: 9px;

    height: 14px;

}

.box_contena .box01on {

    width: 100%;

    height: 100%;

}	

	

/**scss共通***/

img {

  width: 100%;

}



.test {

  -webkit-transition: all .4s ease-out;

  transition: all .4s ease-out;

  -webkit-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  animation: Flash1 1s infinite;

  font-family: 'Noto Serif JP', serif;

  background: linear-gradient(90deg, #00486e 0%, #00789b 100%);

}



@keyframes Flash1 {

  50% {

    opacity: 0;

  }

}



.test {

  content: "\f105";

  font-family: FontAwesome;

}



/**scss共通ここまで***/

.type_boxH {

  width: 400px;

  height: 400px;

  cursor: pointer;

  -webkit-perspective: 1600px;

  perspective: 1600px;

}



@media (max-width: 1000px) {

  .type_boxH {

    width: 40vw;

    height: 40vw;

  }

}



@media (max-width: 800px) {

  .type_boxH {

    width: 47vw;

	  height: 47vw;

    margin-bottom: 5vw;

  }

}



.type_boxH a {

  display: inline;

}



.type_boxH .item {

  height: 100%;

  transform-style: preserve-3d;

  transition: all .5s;

  -webkit-transition: -webkit-transform .5s;

  -webkit-transform: translateZ(-200px);

  transform: translateZ(-200px);

}



@media (max-width: 1000px) {

  .type_boxH .item {

    -webkit-transform: translateZ(-20vw);

    transform: translateZ(-20vw);

  }

}



@media (max-width: 800px) {

  .type_boxH .item {

    -webkit-transform: translateZ(-23.5vw);

    transform: translateZ(-23.5vw);

  }

}



.type_boxH .item-img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-size: cover;

  background-position: 50%;

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  -webkit-transform: translateZ(200px);

  transform: translateZ(200px);

  z-index: 10;

}



@media (max-width: 1000px) {

  .type_boxH .item-img {

    -webkit-transform: translateZ(20vw);

    transform: translateZ(20vw);

  }

}



@media (max-width: 800px) {

  .type_boxH .item-img {

    -webkit-transform: translateZ(23.5vw);

    transform: translateZ(23.5vw);

  }

}



.type_boxH .item-content {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-size: cover;

  background-position: 50%;

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  -webkit-transform: translateY(-200px) rotateX(90deg);

  transform: translateY(-200px) rotateX(90deg);

  z-index: 5;

}



@media (max-width: 1000px) {

  .type_boxH .item-content {

    -webkit-transform: translateY(-20vw) rotateX(90deg);

    transform: translateY(-20vw) rotateX(90deg);

  }

}



@media (max-width: 800px) {

  .type_boxH .item-content {

    -webkit-transform: translateY(-23.5vw) rotateX(90deg);

    transform: translateY(-23.5vw) rotateX(90deg);

  }

}



.type_boxH:hover {

  z-index: 10;

}



.type_boxH:hover .item {

  -webkit-transform: rotateX(-90deg) translateY(200px);

  transform: rotateX(-90deg) translateY(200px);

}



@media (max-width: 1000px) {

  .type_boxH:hover .item {

    -webkit-transform: rotateX(-90deg) translateY(20vw);

    transform: rotateX(-90deg) translateY(20vw);

  }

}



@media (max-width: 800px) {

  .type_boxH:hover .item {

    -webkit-transform: rotateX(-90deg) translateY(23.5vw);

    transform: rotateX(-90deg) translateY(23.5vw);

  }

}



@media (max-width: 800px) {

  .type_boxH.active {

    z-index: 10;

  }

  .type_boxH.active .item {

    -webkit-transform: rotateX(-90deg) translateY(23.5vw);

    transform: rotateX(-90deg) translateY(23.5vw);

  }

}



/********************/

/********************/

/***********************************************************/

@media (-ms-high-contrast: none), (-ms-high-contrast: active) {

  .ie_only {

    font-size: 50px;

  }

  .type_boxH .item {

    -webkit-transform: translateZ(0px) !important;

    transform: translateZ(0px) !important;

  }

  .type_boxH .item-content {

    -webkit-transform: rotateX(-90deg) translateY(200px) !important;

    transform: rotateX(-90deg) translateY(200px) !important;

    -webkit-transform: translateZ(200px) !important;

    transform: translateZ(200px) !important;

  }

  .type_boxH:hover {

    z-index: 10;

  }

  .type_boxH:hover .item {

    -webkit-transform: rotateX(0deg) translateY(0px);

    transform: rotateX(0deg) translateY(0px);

  }

  .type_boxH:hover .item-img {

    -webkit-transition: all .4s ease-out;

    transition: all .4s ease-out;

    opacity: 0;

  }

}

	

	

/*FEATURES*/



#sfeatures{

	background-color: #EDEDED;

	width: 100%;

	padding-bottom: 35vw;

}



.features{

	padding-top: 20vw;

	width: 90%;

	margin: auto;

}



.features h1{

	font-size: 7vw;

	text-align: center;

	line-height: 10vw;

	font-weight: 900;

	padding-bottom: 8vw;

}



.features img{

	width: 100%;

}



.featarea{

	padding-bottom: 4vw;

	margin-bottom: 10vw;

}

	

.featareaend{

margin-bottom: -10vw;

}

	

.featarea h2{

	opacity: 0.4;

	padding: 10vw 5vw 0;

	font-size: 8vw;

	font-weight: 900;

	color:#fff;

}



.featarea h3{

	padding: 10vw 5vw 0;

	font-size: 4.8vw;

	color:#fff;

	line-height: 6vw;

}



.featarea p{

	padding: 4vw 5vw;

	font-size: 3.4vw;

	font-weight: bold;

	line-height: 6vw;

	color:#fff;

}





/*Gallery*/

.gallery{

	margin-top: 20vw;

}

.gallery h1{

	font-size: 7vw;

	text-align: center;

	line-height: 10vw;

	font-weight: 900;

	padding-bottom: 8vw;

}



.galcont{

	display: flex;

	flex-wrap: wrap;

	justify-content:space-around ;

}



.galimage{

	width: 47%;

}



.galimage img{

	width: 100%;

	margin-bottom:2vw;

}



/*ファンクション*/

.function{

	padding-top: 20vw;

	padding-bottom: 20vw;

}

	

.funcinner{

	margin: auto;

	width: 90%;

}



.function h1{

	font-size: 7vw;

	text-align: center;

	line-height: 10vw;

	font-weight: 900;

	padding-bottom: 8vw;

	color: #fff;

}



.function img{

	width: 100%;

	border-radius:5vw 5vw 0 0;

}



.funcarea{

	padding-bottom: 4vw;

	margin-bottom: 3vw;

	border-radius: 5vw;

}



.funcarea h2{

	padding: 7vw 5vw 0;

	font-size: 4.8vw;

	color:#fff;

	line-height: 6vw;

}



.funcarea p{

	padding: 4vw 5vw;

	font-size: 3.4vw;

	font-weight: bold;

	line-height: 6vw;

	color:#fff;

}



/*ブロック*/

.blocks{

	padding-top: 20vw;	

}



.blocks h1{

	font-size: 7vw;

	text-align: center;

	line-height: 10vw;

	font-weight: 900;

	padding-bottom: 8vw;

}





/*切り替えパネルforブロック*/

.tab_wrap{

	width:90%;

	margin:0 auto;

}

input[type="radio"]{

	display:none;

}

.tab_area{

	margin:auto;

	display: flex;

	justify-content: center;

}

.tab_area label{

	color: #303344;

	border: solid thin #000;

	width:35%;

	margin:0 auto;

	display:inline-block;

	padding:5vw 0;

	text-align:center;

	font-size: 2.4vw;

	font-weight:bold;

	cursor:pointer;

	opacity:1;

}

.panel_area{

	margin:auto;

	width: 100%;

}

.tab_panel{

	width:100%;

	padding:5vw 0;

	display:none;

}

.tab_panel p{

	font-size:14px;

	letter-spacing:1px;

	text-align:center;

}



#tab1:checked ~ .tab_area .tab1_label{

	background:#1C3A82; color:#fff;

}

#tab1:checked ~ .panel_area #panel1{display:block;}

#tab2:checked ~ .tab_area .tab2_label{

	background:#8A76BE; color:#fff;

}

#tab2:checked ~ .panel_area #panel2{display:block;}

#tab3:checked ~ .tab_area .tab3_label{

	background:#F07800; color:#fff;

}

#tab3:checked ~ .panel_area #panel3{display:block;}



/*ブロック切り替えパネルの中身*/



.blockparts{

	width: 90%;

	margin: auto;

	padding-bottom: 15vw;

}

	

.blockparts img{

	width: 100%;

	margin: 0 auto 2vw;;

}



.blockparts h2{

	margin: 2vw auto;

	font-size: 4.8vw;

	line-height: 6vw;

	text-align: center;

}



.blockparts p{

	text-align:center;

	font-size: 3.4vw;

	font-weight: bold;

	line-height: 6vw;

	color:#303344;

	margin-bottom: 3vw;

}



.blockparts .level{

	text-align: center;

	font-size: 3.6vw;

	line-height: 5vw;

	font-weight: 900;

	opacity: 0.6;

	

}
	
.blockparts .hash{
	font-size: 12px;
	font-weight: normal;
}
	
.hash span{
	display: inline-block;
	margin: 0 2px 7px;
	background: #F1F1F5;
	padding: 0 8px;
	border-radius: 20px;
}
	
.btn{
	margin-top: 20px;
}
.btn a{
	display: block;
	color: #fff;
	background: no-repeat 95% center url("../img/arrow.png") #303344;
	background-size: 5px 10px;
	padding: 10px 0;
	text-align: center;
	transition: 0.3s;
}





/*プロダクト*/

.products{

	margin-top: 23vw;	

}



.products h1{

	font-size: 7vw;

	text-align: center;

	line-height: 10vw;

	font-weight: 900;

	padding-bottom: 8vw;

}



.procont{

	display: flex;

	width: 90%;

	margin: auto;

	align-items: center;

	justify-content: center;

}



.proinner img{

	width: 100%

}



.proinner p{

	padding: 3vw 2vw;

	text-align: center;

	font-size: 3.4vw;

	font-weight: bold;

}

	

.productparts h2{

	margin:3vw auto;

	text-align: center;

	width: 90%;



}



.productparts h2 img{

	width: 100%;

}



.speclist{

	width: 90%;

	margin: auto;

	font-size: 3vw;

	font-weight: bold;

	line-height: 6vw;

	

}



.speclist table colgroup{

	width: 55%;

}

	

.speclist table{

	margin: auto;

	color:#303344;

}



.speclist table td{

	color:#303344;

}



/*footer*/	



.footer-content {

	margin: 20vw auto 0;

	width: 100%;

	background: #303344;

	line-height: 2.8;

	padding-bottom: 10vw;

	justify-content: flex-start;

	align-items: center;

	

}



.footlogo{

	width: 40%;

}



.fbuynow {

	/*margin: auto;

	width: 30%;*/

	text-align: center;

	/*margin-top: 4vw;*/



}	



/*.footer-content .container{

	width: 90%;

	margin: auto;

	height:18vw;

	display: flex;

	align-items: center;

	justify-content: space-between;

}*/

	

.fmenu-cont{

	display: flex;

	padding-top: 8vw;

}



.fmenu-l{

	margin-left: 5%;

}



.fmenu-l p{

	font-size: 4vw;

	font-weight: bold;

	overflow-wrap: break-word;

}

	

.fmenu-r{

	margin-left: 30%;

	width: 50%;

}



.fmenu-r p{

	padding-top:1vw;

	font-size: 3vw;

	font-weight: normal;

	overflow-wrap: break-word;

}

	

.fmenu-cont p{

	color: #fff;

}



.fbuynow p{

	border-radius:10em;

	background-color: #fff;

	color:#303344;

	font-size: 3vw;

	font-weight: bold;

	white-space: nowrap;

	width: 70%;

	margin-bottom: 5vw;

}



/*Luminous*/

.lum-lightbox{

	z-index:999;

}



.lum-lightbox-position-helper img{

width:100%;

height:100%;

object-fit:contain;

font-family:'object-fit: contain;';

}



/*SPここまで*/