@charset "utf-8";

/* レスポンシブ設定
------------------------------------- */
@media screen and (max-width: 750px){
	/* aタグ設定
	------------------------------------- */
	a:hover {
		opacity: 1;
		filter: alpha(opacity=100);
		-ms-filter: "alpha(opacity=100)";
		-moz-opacity: 1;
		-khtml-opacity: 1;
		zoom: 1;
	}
a {
	transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0s;
	text-decoration: none;
}
	
	.sp {
		display: block;
	}
	.spInline {
		display: inline-block;
	}
	.pc {
		display: none;
	}

	.pageTop {
		width: 30px;
		position: fixed;
		bottom: 14px;
		right: 14px;
	}
	.Btn a {
		width: 40vw;
		height: 11.74vw;
		border-radius: 5.87vw;
		font-size: 3.47vw;
	}

	.btnHamburger {
		position: fixed;
		top: 25px;
		right: 28px;
		width: 16px; /* クリックエリアの横幅*/
		height: 16px; /* クリックエリアの高さ*/
		cursor: pointer;
		z-index: 10001;
		background: none;
	}
	.btnHamburger .line {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 20px; /* 横幅 */
		height: 2px; /* 1本辺りの高さ */
		background: #000; /* 線の色 */
		/* 適用するプロパティ、変化する時間、変化する速度 */
	-webkit-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
	}
	.btnHamburger.is-active .line{
		background:#000;
	}
	.btnHamburger .line_01 {
		top: 4px;
		left:0px;
	}
	.btnHamburger .line_02 {
		top: 11px;
		left:0;
	}
	.btnHamburger .line_03 {
		top: 18px;
		left:0;
	}
	.btnHamburger.is-active .line_01 {
		top: 11px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.btnHamburger.is-active .line_02 {
		opacity: 0;
	}
	.btnHamburger.is-active .line_03 {
		top: 11px;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	header {
		background: none;
		padding: 20px 7.2vw 30px;
		width: 100%;
		position: absolute;
		z-index: 10000;
		top: 0!important;
		display: block;
	}
	header.mnuspopen {
		display: block;
		position: fixed;
		background: #fff;
		height: 100vh;
		overflow: auto;
	}
	header #gNav,
	header .rightBox {
		display: none;
	}
	header.mnuspopen #gNav,
	header.mnuspopen .rightBox {
		display: flex;
		flex-flow: column-reverse;
	}
	header .layout {
		width: 100%;
		display: block;
		position: static;
}
	header .sitelogo {
		float: inherit;
	}
	header .sitelogo img {
		width: 75px;
		height:auto;
	}
	header nav#gNav {
		margin-top: 59px;
		margin-bottom: 25px;
		position: inherit;
		top: 0;
		right: 0;
	}
	header nav#gNav .gNavList {
		width: 100%;
		display: block;
	}
	header nav#gNav li:first-child a {
		border-top: 1px solid #808080;
	}
	header nav#gNav li a {
		width: 100%;
		display: block;
		padding: 25px 0 24px;
		border-bottom: 1px solid #808080;
		background: url("../img/ham_arrow.gif") right center no-repeat;
		background-size: 9px 16px;
	}
	header nav#gNav li a .newIcon {
		display: inline-block;
		position: static;
		margin-left: 10px;
	}
	.gNavList a:hover {
		border-bottom: none;
	}
	header .rightBox {
		width: 100%;
	}
	header .logo {
		position: static;
		width: 135px;
		margin: 17px auto 0;
		float: none;
	}
	header .info a {
		font-size: 11px;
		line-height: 1;
		border: 1px solid #000;
		width: 100%;
		height: 24px;
		border-radius: 12px;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	
	footer {
		padding: 0 7.2vw 14.67vw;
	}
	footer #share {
		padding-bottom: 5.33vw;
	}
	footer #share .shareList {
		width: 19.07vw;
	}
	footer #share .shareList li {
		width: 7.33vw;
	}
	footer .footerList {
		display: none;
	}
	footer .logo {
		width: 36vw;
		margin-top: 5.6vw;
	}
	footer .copy {
		font-size: 2.93vw;
		margin-top: 5.33vw;;
	}


/* top
------------------------------------- */
	#topPage header .sitelogo img {
		width: 120px;
		height:auto;
	}
	#topPage #topMainArea {
		position: relative;
		padding-bottom: 40vw;
	}
	#topPage #topMainArea .slideList {
		width: 100000px;
		display: flex;
	}
	#topPage #topMainArea .slideNav {
		position: absolute;
		left: 50%;
		bottom: 30vw;
		transform: translateX(-50%);
		text-align: center;
		z-index: 3;
	}
	#topPage #topMainArea .slideNav span {
		background: #d3d3d4;
		width: 2.66vw;
		height: 2.66vw;
		border-radius: 1.33vw;
		display: inline-block;
		margin: 0 2.66vw;
		cursor: pointer;
	}
	#topPage #topMainArea .backBtn {
		display: none;
	}
	#topPage #topMainArea .nextBtn {
		display: none;
	}
	#topPage #topMainArea .mainLead {
		position: absolute;
		top: 28.53vw;
		left: 7.2vw;
		width: 43.07vw;
	}
	#topPage #topMainArea .mainLead-ec-button {
		margin-top: 15px;
	}
	#topPage #topMainArea .ec-button_link-v2 {
		padding: 8px 27px 9px;
		font-size: 1.5rem;
		line-height: 1;
	}
	#topPage #topMainArea .ec-button_link-v2:hover {
		opacity: 1.0;
	}
	#topPage #topMainArea .slideInfoArea {
		position: absolute;
		bottom: 5vw;
		left: 7.2vw;
	}
	#topPage #topMainArea .appBox {
		padding: 0 0 0 21.87vw;
		background: url("../img/logo_tepralite_sp.png") 0 0 no-repeat;
		background-size: 17.2vw 17.2vw;
		height: 17.2vw;
		z-index: 2;
	}
	#topPage #topMainArea .appBox .txt {
		width: 47.47vw;
		margin-bottom: 2.93vw;
	}
	#topPage #topMainArea .appBox .appList {
		display: flex;
	}
	#topPage #topMainArea .appBox .appList li {
	width: 30.66vw;
	}
	#topPage #topMainArea .appBox .appList li a {
		border: 2px solid #969696;
		border-radius: 1.5vw;
	}
	#topPage #topMainArea .appBox .appList li:not(:last-child) {
		margin-right: 2vw;
	}

	#topPage #movie {
		padding: 0 7.2vw;
	}
	#topPage #movie .movieArea {
		width: 100%;
		height: auto;
	}
	#topPage #movie .txtArea {
		margin-top: 10.93vw;
	}
	#topPage #movie .txtArea .title {
		font-size: 5.87vw;
		line-height: 1.4545;
		margin-bottom: 2.27vw;
	}
	#topPage #movie .txtArea .txt {
		font-size: 4vw;
		line-height: 1.667;
	}

	#topPage #about {
		padding-top: 9.33vw;
	}
	#topPage #about .aboutArea {
		width: 100%;
		display: block;
	justify-content: center;
		margin-bottom: 5.3vw;
	}
	#topPage #about .aboutArea.about04 {
		margin-bottom: 0px;
	}
	#topPage #about .aboutArea .imgArea {
		width: 100%;
	}
	#topPage #about .aboutArea .txtArea {
		width: 100%;
		padding: 11.33vw 0 9.33vw;
	}
	#topPage #about .aboutArea .txtArea .number {
		width: 9.87vw;
		padding-left: 0.67vw;
		padding-bottom: 1.73vw;
	}
	#topPage #about .aboutArea .txtArea .title {
		font-size: 5.6vw;
		line-height: 1;
		margin-top: 5.87vw;
	}
	#topPage #about .aboutArea .txtArea .titlesub {
		font-size: 3.47vw;
		line-height: 1;
		margin-top: 2.4vw;
	}
	#topPage #about .aboutArea .txtArea .btn a {
		margin-top: 6vw;
	}

	#topPage #tape {
		padding: 17.07vw 7.2vw 19.73vw;
	}
	#topPage #tape h2.title {
		font-size: 5.6vw;
		margin-bottom: 6.67vw;
	}
	#topPage #tape .aboutType {
		display: block;
	}
	#topPage #tape .aboutType .tapeImgArea {
		width: 65%;
		margin: 0 auto;
}
	#topPage #tape .aboutType .txtTypeBox {
		width: 100%;
	}
	#topPage #tape .aboutType .txtArea {
		margin-top: 25px;
		padding: 0;
	}
	#topPage #tape .aboutType .txtArea .new {
		width: 34.67vw;
		position: inherit;
	}
	#topPage #tape .aboutType .txtArea .title {
		font-size: 5.33vw;
		margin-top: 7.2vw;
	}
	#topPage #tape .aboutType .txtArea .txt {
		font-size: 3.73vw;
		margin-top: 1.47vw;
	letter-spacing: 0.03em;
	}
	#topPage #tape .aboutType .txtArea .priceArea .price {
		font-size: 3.47vw;
		line-height: 1.5385;
		margin-top: 3.73vw;
		letter-spacing: 0.03em;
	}
	#topPage #tape .aboutType .txtArea .priceArea .price span {
		font-size: 4.27vw;
		letter-spacing: 0.05em;
	}
	#topPage #tape .aboutType .txtArea .priceArea .date {
		font-size: 3.47vw;
		line-height: 1.5385;
		margin-top: 3.73vw;
		letter-spacing: 0.03em;
	}
	#topPage #tape .aboutType .txtArea .priceArea .date + .price {
		margin-top: 1.73vw;
	}
	#topPage #tape .aboutType .txtArea .priceArea .txt {
		font-size: 2.93vw;
		margin-top: 1.73vw;
	}
	#topPage #tape .aboutType .typeArea {
		margin-top: 25px;
		padding: 0;
	}
	#topPage #tape .aboutType .typeArea .typeList {
		display: block;
	}
	#topPage #tape .aboutType .typeArea .typeList > li {
		width: 100% !important;
		margin: 0 !important;
	}
	#topPage #tape .aboutType .typeArea .typeList > li + li {
		margin-top: 25px !important;
	}
	#topPage #tape .aboutType .typeArea .typeList .sample {
		text-align: center;
	}
	#topPage #tape .aboutType .typeArea .typeList .sample + .sample {
		margin-top: 13px;
	}
	#topPage #tape .aboutType .typeArea .typeList .typeName {
		font-size: 3.47vw;
		margin-top: 2.8vw;
		margin-bottom: 4.93vw
	}
	#topPage #tape .aboutType .typeArea .typeList .typeName span {
		font-size: 2.93vw;
	}
	#topPage #tape .txt01 {
		font-size: 3.47vw;
		line-height: 1.5385;
		margin-top: 8.93vw;
	}
	#topPage #tape .Btn a {
		width: 100%;
		margin: 3.2vw auto 0;
	}
	
	/* low
	------------------------------------- */
	.low {
		padding-top: 23.6vw;
	}
	.low h1.title {
		font-size: 6.4vw;
	}
	.low .titlesub {
		font-size: 3.47vw;
	}
	.pagelinkBtn {
		padding-bottom: 14.67vw;
	}
	.pagelinkBtn a {
		width: 63.2vw;
		margin: 18.67vw auto 0;
	}

	/* TEPRA Lite LR30の特徴
	------------------------------------- */
	#featurePage #featureArea .layout {
		display: block;
		padding-top: 11.07vw;
	}
	#featurePage #featureArea .feature .featureImg {
		margin-bottom: 5.6vw;
	}
	#featurePage #featureArea .feature .txtBox {
		position: inherit;
		padding: 0 7.2vw;
		margin-bottom: 8.8vw;
	}
	#featurePage #featureArea .feature.feature01 .txtBox {
		left: 0;
		bottom: 0;
		color: #000;
	}
	#featurePage #featureArea .feature.feature02 .txtBox {
		top: 0;
		left: 0;
	}
	#featurePage #featureArea .feature.feature03 .txtBox {
		top: 0;
		right: 0;
		margin-bottom: 0;
	} 
	#featurePage #featureArea .feature .txtBox .title,
	#featurePage #featureArea .feature.feature01 .txtBox .title {
		width: 100%;
		font-size: 4.8vw;
		margin-bottom: 1.33vw;
	}
	#featurePage #featureArea .feature .txtBox .txt {
		width: 100%;
		font-size: 3.73vw;
		letter-spacing: 0.03em;
		text-align: justify;
	}
	#featurePage #featureArea .feature.feature01 .txtBox .txt {
		width: 100%;
	}
	#featurePage #featureArea .feature.feature02 .txtBox .txt {
		width: 100%;
	}
	
	/*　専用アプリの使い方
	------------------------------------- */
#featurePage #customArea {
	padding: 24.13vw 7.2vw 0;
}
	#featurePage #customArea h2.title {
		font-size: 5.6vw;
	}
	#featurePage #customArea .customList {
		display: block;
		margin-top: 0;
	}
	#featurePage #customArea .customList.customList01 {
		margin-top: 0;
	}
	#featurePage #customArea .customList .customBox {
		width: 100%;
		margin-top: 9.33vw;
	}
	#featurePage #customArea .customList.customList01 .customBox {
		margin-top: 4.27vw;
	}
	#featurePage #customArea .customList02 .customBox {
		width: 100%;
	}
	#featurePage #customArea .customList .customBox .title {
		font-size: 4.8vw;
		padding: 2.8vw 0 2.53vw;
	}
	#featurePage #customArea .customList .customBox .customImg {
		width: 100%;
	}
	#featurePage #customArea .customList01 .customBox .customImg {
		width: 57.81%;
		margin: 5.33vw auto;
	}
	#featurePage #customArea .customList02 .customBox .customImg {
		width: 57.81%;
		margin: 5.33vw auto;
	}
	#featurePage #customArea .customList04 .customBox .customImg {
		margin-top: 5.33vw;
	}
	#featurePage #customArea .customList04 .customBox .tapeList {
		display: block;
		margin-top: 5.07vw;
	}
	#featurePage #customArea .customList04 .customBox .tapeList li {
		width: 100%;
		display: block;
		font-size: 3.47vw;
	}
	#featurePage #customArea .customList04 .customBox .tapeList li:not(:last-child) {
		margin-bottom: 3.73vw;
	}
	#featurePage #customArea .customList04 .customBox .tapeList li:nth-child(1) .tapeImg {
		width: 100%;
	}
	#featurePage #customArea .customList04 .customBox .tapeList li:nth-child(2) .tapeImg {
		width: 92.81%;
	}
	#featurePage #customArea .customList04 .customBox .tapeList li:nth-child(3) .tapeImg {
		width: 85%;
	}
	#featurePage #customArea .customList .customBox .txt {
		font-size: 3.47vw;
	}
	#featurePage #customArea .customList03 .customBox .txt {
		margin-top: 4.8vw;
	}
	#featurePage #customArea .customList03 .customBox.customflame .txt {
		font-size: 3.3vw;
		margin-top: 1.73vw;
	}
	#featurePage #customArea .customList04 .customBox .txt {
		margin-top: 4.8vw;
	}
	#featurePage #customArea .customList04 .customBox .tapeList .txt {
		margin-top: 5.07vw;
		margin-bottom: 2vw;
	}

	#featurePage #customArea .linkBtn a {
		width: 63.2vw;
		margin: 13.87vw auto 0;
	}
	
	/*　専用アプリの使い方
	------------------------------------- */
	#howtoappPage #howtoArea .stepBox #tab02 {
		display: none;
	}
	#howtoappPage #howtoArea .tabList {
		width: 59.33vw;
	margin: 19.33vw auto 8.53vw;
}
	#howtoappPage #howtoArea .tabList a {
		font-size: 4.8vw;
	padding-bottom: 0.53vw;
}
	#howtoappPage #howtoArea .tabList .current a {
		border-bottom: 0.8vw solid #c3cbd3;
	}
	#howtoappPage #howtoArea .stepBox {
		position: relative;
	}
	#howtoappPage #howtoArea .stepBox .spslideArea {
		width: 49.33vw;
		overflow: hidden;
		margin: 0 auto;
	}
	#howtoappPage #howtoArea .stepBox .stepList {
		width: 10000px;
		display: flex;
		justify-content: flex-start;
		margin: 0;
	}
	#howtoappPage #howtoArea .stepBox .stepList li:not(:last-child) .txt::after {
		display: none;
	}
	#howtoappPage #howtoArea .stepBox .stepList .title {
		padding-bottom: 9.07vw;
		margin-bottom: 0;
	}
	#howtoappPage #howtoArea .stepBox .stepList .title img {
		height: 7.75vw;
	}
	#howtoappPage #howtoArea .stepBox .stepList .title span {
		font-size: 4.69vw;
		padding-bottom: 0.6vw;
		position: relative;
		top: -1.8vw;
		margin-right: 3.73vw;
}
	#howtoappPage #howtoArea .stepBox .stepList .stepImg {
		width: 49.33vw;
		margin-bottom: 0;
	}
	#howtoappPage #howtoArea .stepBox .stepList .txt {
		font-size: 4.27vw;
		line-height: 1.5;
		padding-top: 4.67vw;
	}
	#howtoappPage #howtoArea .stepBox .backBtn {
		position: absolute;
		top: 50%;
		left: 30px;
		transform: translateY(-50%);
		width: 4.27vw;
		z-index: 3;
	}
	#howtoappPage #howtoArea .stepBox .nextBtn {
		position: absolute;
		top: 50%;
		right: 30px;
		transform: translateY(-50%);
		width: 4.27vw;
		z-index: 3;
	}

	#howtoappPage #downloadArea {
		padding-top: 21.2vw;
	}
	#howtoappPage #downloadArea .layout {
		width: 100%;
		display: block;
		padding: 0 12.4vw;
	}
	#howtoappPage #downloadArea .layout .leftArea .title {
		font-size: 5.6vw;
		margin-bottom: 5.33vw;
	}
	#howtoappPage #downloadArea .layout .leftArea .icon {
		width: 26.94vw;
		border-radius: 4.27vw;
	margin: 0 auto 5.73vw;
}
	#howtoappPage #downloadArea .layout .leftArea .txt01 {
		font-size: 3.73vw;
		line-height: 1.5714;
		margin-bottom: 6.67vw;
	}
	#howtoappPage #downloadArea .layout .leftArea .appList {
		width: 100%;
		display: block;
		margin: 0 auto 8.27vw;
	}
	#howtoappPage #downloadArea .layout .leftArea .appList li {
		width: 62.13vw;
		margin: 0 auto;
	}
	#howtoappPage #downloadArea .layout .leftArea .appList li:first-child {
		margin-bottom: 2.93vw;
	}
	#howtoappPage #downloadArea .layout .leftArea .txt02 {
		font-size: 3.73vw;
	}
	#howtoappPage #downloadArea .layout .sampleImg {
		width: 100%;
		margin-bottom: 8.93vw;
	}
	#howtoappPage .pagelinkBtn a {
		width: 58.4vw;
		margin-top: 12.53vw;
	}
	#ancTape {
		top: 0;
	}

/*　本体仕様
------------------------------------- */
	#specPage #specArea .layout {
		padding: 0 7.2vw;
	}
	#specPage #specArea .slideArea {
		position: relative;
		padding-bottom: 20.53vw;
	}
	#specPage #specArea .slideList {
		margin-top: 0.67vw;
	}
	#specPage #specArea .slideList li {
		max-width: calc(100vw - 14.4vw);
	}
	#specPage #specArea .slideNav {
		width: 100%;
		position: absolute;
		left: 50%;
		bottom: 14.9vw;
		transform: translateX(-50%);
		text-align: center;
		z-index: 3;
	}
	#specPage #specArea .slideNav span {
		background: #d3d3d4;
		width: 2.66vw;
		height: 2.66vw;
		border-radius: 1.33vw;
		display: inline-block;
		margin-right: 4.27vw;
		cursor: pointer;
	}
	#specPage #specArea .slideNav span:last-child {
		margin-right: 0;
	}
	#specPage #specArea .slideNav span.cur {
		background: #000;
	}
	#specPage #specArea .previewList {
		display: none;
	}

	#specPage #tableArea {
		padding: 0 7.2vw 0;
	}
	#specPage #tableArea table {
		width: 100%;
	}
	#specPage #tableArea table th {
		width: 100px;
		border-right: 1px solid #918b8a;
		padding: 0.4em 0.2em 0.2em 0.2em;
	}
	#specPage #tableArea table td {
		padding: 0.4em 0.2em 0.2em 0.5em;
	}

	#specPage .pagelinkBtn a {
		margin-top: 16vw;
	}
	
	/*　使用例
	------------------------------------- */
	#exusePage #exuseArea .layout {
		padding: 0 7.2vw;
	}
#exusePage #exuseArea .photoArea {
	padding-top: 7.07vw;
	padding-bottom: 16vw;
}
	#exusePage #exuseArea .photoArea .photoList li {
		width: 47%;
		float: left;
		margin-right: 0;
		margin-bottom: 6%;
	}
#exusePage #exuseArea .photoArea .photoList li:nth-child(3),
#exusePage #exuseArea .photoArea .photoList li:nth-child(4),
#exusePage #exuseArea .photoArea .photoList li:nth-child(9),
#exusePage #exuseArea .photoArea .photoList li:nth-child(10) {
	width: 100%;
}
#exusePage #exuseArea .photoArea .photoList li:nth-child(3),
#exusePage #exuseArea .photoArea .photoList li:nth-child(9) {
	float: inherit;
}
#exusePage #exuseArea .photoArea .photoList li:nth-child(1),
#exusePage #exuseArea .photoArea .photoList li:nth-child(5),
#exusePage #exuseArea .photoArea .photoList li:nth-child(7),
#exusePage #exuseArea .photoArea .photoList li:nth-child(11) {
	margin-right: 6%;
}
/* modal */
.modalBody .slideArea {
	width: 73.33vw;
}
.modalBody .photoList li {
	width: 73.33vw;
}
.modal .slideBox .close{
	width: 4.53vw;
	position: absolute;
	right: -5.73vw;
	top: -3.73vw;
}
.modal .slideBox .backBtn {
	position: absolute;
	top: 50%;
	left: -6vw;
	transform: translateY(-50%);
	width: 2.27vw;
}
.modal .slideBox .nextBtn {
	position: absolute;
	top: 50%;
	right: -6vw;
	transform: translateY(-50%);
	width: 2.27vw;
}
	
	/* ----- ec-button ----- */
	.tette-header-ec-button {
		margin: 15px 0 20px;
		text-align: center;
	}
	.table_cell_ec {
		display: flex;
		flex-flow: column wrap;
		-ms-align-items: flex-start;
		align-items: flex-start;
	}
	.ec-button {
		display: inline-block;
		max-width: 120px;
		min-width: 70px;
		margin-top: 5px;
		margin-left: 0;
		padding: 0;
		padding-bottom: 6px;
		vertical-align: middle;
	}
	.ec-button_link {
		display: inline-block;
		border: 2px solid #418fde;
		border-radius: 5px;
		padding: 5px 18px;
		color: #418fde;
		font-weight: bold;
		font-size: 1.4rem;
		font-family: "Noto Sans CJK JP", "Noto Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	}
	
		/* clearfix
	------------------------------------- */
	.clearfix::after {
		content: '';
		display: block;
		clear: both;
		height: 0;
	}
}