@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
html {
	scroll-behavior: smooth;
	font-size: 16px;
}

body {
	color: #121212;
	-webkit-print-color-adjust: exact;
	position: relative;
	font-family: 'Noto Sans JP',
	"Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

/*カスタムプロパティ-------------*/
:root {
	--maincolor: #0e6893;
	--Nijicolor: rgb(199,131,88);
	--Kozocolor:rgb(140,198,128);
	--Suiricolor:rgb(140,198,223);
	--Kaisekicolor:rgb(199,131,166);
	--table_thcolor:#e9faf9;
	--table_bordercolor:#778ca3;
	--h3_bordercolor:rgb(204,204,204);
	--shadow:0 0 1rem -0.5rem #00000073;
}

/*header(全ページコピペ)-------------------------------------------------------------------*/
/*hmgMenu非表示*/
.hbgMenu {
	display: none;
}

header {
    width: 100%;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.93);
    z-index: 100;
	box-shadow: 0 0 2rem -10px #b3b1b1da;
}

header img {
	width: 22rem;
	margin-bottom: 0.4rem;
	margin-left: 0.5rem;
}

header nav  {
	width: 100vw;
}

header nav ul {
	display: flex;
    justify-content: flex-end;
    padding: 1.8rem 3rem 0.5rem 0;
    margin: 0;
}

header nav ul li {
	margin: 0 0 0 2%;
}

header nav ul li a {
	font-size: 0.9rem;
	padding: 0 0.3rem;
	color: rgb(102, 102, 102);
	position: relative;
	font-family:'Noto Sans JP', sans-serif;
	font-weight: 700;
}

header nav ul li a::after {
	position: absolute;
	left: 0;
	content:'';
	width: 100%;
	height: 2px;
	background: #3366ccc4;
	bottom: -1px;
	transform: scale(0,1);
	transform-origin: left top;
	transition: transform 0.3s;
}

header nav ul li a:hover::after {
	transform: scale(1,1);
}


/*パンくずリスト----------*/
.breadcrumb {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
	font-family: 'Noto sans jp',sans-serif;
}

.breadcrumb li {
	display: inline;
	list-style: none;
	font-weight: bold;
}

.breadcrumb li:after {
	content: '≫';
	padding: 0 0.2em;
	color: #75a3ff;
}

.breadcrumb li:last-child:after {
	content: '';
}

.breadcrumb li a {
	text-decoration: none;
	color: #6d6c6c;
}

.breadcrumb li a:hover {
	color: #75a3ff;
}


/*---------------------------------------------*/
/*-----------ここからメインコンテンツ------------*/
/*---------------------------------------------*/
.main_aside_flex {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-top: 67px;
	flex-wrap: nowrap;
	/* background-image: url('../../../images/BG-white.jpg'); */
	background-color: #f1f1f1;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}
main {
	/* border: 1px solid red; */
	width: inherit;
	text-align: center;
	padding: 1rem 2rem;
	background-color: #fff;
	/* border-right: 2px double #e4e4e4; */
}
#tp_logo {
	width: 700px;
}
#tp_image {
	width: 500px;
}
main #other_product {
	margin-top: 1rem;
}
main #other_product a {
	color: red;
}
main #other_product a:hover {
	border-bottom: 1px solid;
}
/*製品詳細------------*/
main section {
	/* border: 1px solid rgb(231, 231, 231); */
	text-align: left;
	width: 60rem;
	margin:5rem auto 0;
}
main section h2 {
	font-size: 1.2rem;
	font-weight: 700;
	padding: 0.8rem;
	margin-bottom: 0.8rem;
	border-left: 0.6rem solid var(--maincolor);
}
main section h3 {
	font-size: 1.1rem;
	font-weight: 700;
	border-bottom: 2px solid var(--h3_bordercolor);
	margin: 2rem 1rem 0.5rem;
	padding-left: 0.5rem;
}
main section p {
	word-break: keep-all;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

main section p,
main section ul,
main section ol {
	margin-left: 3rem;
	margin-bottom: 0.5rem;
}
main section ul {
	list-style: square;
}
main section ol {
	list-style: decimal;
}

main section  li {
	margin-bottom: 0.5rem;
}
main section img {
	margin: 1rem auto;
	text-align: center;
	display: block;
}
main section.first {
	margin-top: 3rem;
}
main section.first h2 {
	background-color: var(--maincolor);
	color: #ffffff;
	font-size: 1.4rem;
	padding: 0.5rem;
}
main section.first p {
	line-height: 1.5rem;
}
main section table {
	margin: 0 auto;
}

/*参考文献--------*/
main .quote ul {
	list-style: none;
}
main .quote ul li {
	border-bottom: 1px solid #dadada;
	padding-bottom: 0.2rem;
	padding-left: 1rem;
	margin-top: 1.2rem;
}
main .quote ul li cite::before {
	content:"・ ";
}
main cite {
	font-style: normal;
}
.flexcite {
	display: flex;
	justify-content: flex-start;
}
.flexcite p {
	margin: 0;
	width: 100%;
}
.flexcite .citebase {
	text-align: left;
	width:70%;
}
.flexcite .citedate {
	width:30%;
}


/*動作環境--------*/
.operate table {
	border: 2px solid var(--maincolor);
}
.operate table th,
.operate table td {
	padding: 1rem 4rem;
	border: 1px solid#0e6893;
	text-align: center;
}
.operate table th {
	background-color: #b0cfdd;
}
.operate p {
	text-align: center;
}
#caution {
	margin: 4rem auto 2rem;
}

/*aside---------------------------------*/
/*フェードアニメーション------*/
/* 右から */
.fadeRight{
	animation-name:fadeRightAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes fadeRightAnime{
	from {
	opacity: 0;
	transform: translateX(100px);
	}

	to {
	opacity: 1;
	transform: translateX(0);
	}
}
/*-----------------------*/
aside {
	/* border: 1px solid blue; */
	width: auto;
	height: 110vh;
	position: sticky;
	top: 70px;
	bottom: 0;
	right: 0;
	z-index: 1;
	min-width: 400px;
	padding: 0.25rem 0.5rem;
	text-align: center;
	font-weight: 700;
}
aside .links {
	/* border: 2px solid rgb(233, 233, 233); */
	text-align: left;
	padding: 1rem;
	margin: 0 1rem;
	color:#3f3f3f;
	background-color: #ffffff;
	margin-top: 1rem;
}
aside .links p {
	font-size: 1.3rem;
	padding-left: 0.5rem;
	border-bottom: 2px solid #6d6c6c;
}
/*製品詳細一覧へ------------*/
aside .products_link ul {
	display: flex;
	flex-direction: column; 
}
aside .products_link ul li {
	margin: 1rem 0 1rem 1rem;
	transition: all 0.2s ease-out;
	display: inline;
}
aside .products_link ul li:hover {
	transform: translateY(-3px);
	transform: translateX(-5px);
}
aside .products_link ul li a {
	padding: 0.5rem 0;
	border-radius: 0.5rem;
	font-size: 1.1rem;
}
aside .products_link ul li a::before {
	content: "▶  ";
}
#NijiLink a::before {
	color: var(--Nijicolor);
}
#NijiLink a:hover {
	color: var(--Nijicolor);
}
#KozoLink a::before {
	color: var(--Kozocolor);
}
#KozoLink a:hover {
	color: var(--Kozocolor);
}
#SuiriLink a::before {
	color: var(--Suiricolor);
}
#SuiriLink a:hover  {
	color: var(--Suiricolor);
}
#KaisekiLink a::before {
	color: var(--Kaisekicolor);
}
#KaisekiLink a:hover {
	color: var(--Kaisekicolor);
}
/*製品詳細目次------------*/
aside .pageindex_link {
	height: 240px;
}
aside .pageindex_link ul {
	overflow-y: scroll;
	height: 80%;
	list-style: disc;
}
aside .pageindex_link ul li {
	margin-top: 1rem;
	margin-left: 1.5rem;
	transition: all 0.1s ease-out;
	font-size: 1rem;
}
aside .pageindex_link ul li:hover {
	color: #ec7f7f;
}
/*関連製品----------------------*/
aside .near_products_link_link ul {
	list-style: disc;
}
aside .near_products_link ul li {
	margin-top: 1rem;
	margin-left: 1.5rem;
	transition: all 0.1s ease-out;
	font-size: 1rem;
}

/*お問い合わせはこちら------------*/
aside .inquiry_link {
	width: 30vh;
	height: 30vh;
	border-radius: 50%;
	background-color: #3366cc;
	/* position: absolute; */
	bottom: 1rem;
	left: 0;
	right: 0;
	margin: 1rem auto;
	color: #ffffff;
	display: inline-block;
	transition: all 0.3s ease-out;
	max-width: 300px;
	max-height: 300px;
	min-width: 200px;
	min-height: 200px;
	box-shadow: 0px 0px 20px -3px #b6b5b5;
}
aside .inquiry_link:hover {
	transform: translateY(-10px);
}
/* aside .inquiry_link h2 {
	font-size: 180%;
	margin-bottom: 5%;
}
aside .inquiry_link address {
	font-size: 120%;
} */
aside .inquiry_link img {
	width: 68%;
	margin-top: 20%;
}

/*お問い合わせボタンを非表示-----*/
.inquiry_btn {
	display: none;
}


/*モバイル用のナビを非表示-----*/
.navMobile {
	display: none;
}
/*フッターまでスクロールしたら消す----------------------------*/
.is-hidden {
	opacity: 0;
	visibility: hidden;
}

/*ページ内リンク------------*/
#a1,#a2,#a3,#a4,#a5,#a6,#a7 {
	padding-top: 100px;
	margin-top: -100px
}

/*footer(全ページコピペ)-------------------------------------------------------------------*/
footer {
	background-color: rgb(27,20,100);
	color: #ffffff;
	width: 100%;
	font-family:'Noto Sans JP', sans-serif;
	padding-top: 2rem;
	bottom: 0;
	z-index: 1000;
}
footer img {
	width: 13rem;
	margin-bottom: 1rem;
}

address {
	margin-bottom: 1rem;
}

.footercontents {
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.footerlink {
	border-left: dashed 1px #fff;
	padding-bottom: 2rem;
	margin-left: 0.5rem;
}

.mainUl {
	display: flex;
	font-size: 1rem;
	
}

.mainUl li a:hover  {
	font-weight: bolder;
	color: #f8da2d;
}
.mainUl li a {
	transition: all 0.1s;
}

.mainUl li {
	margin-left: 1vW;
	margin-right: 0.5vw;
}
.mainUl li::before {
	content: '●';
}
.mainUl li a:hover .mainUl li::before {
	color: #f8da2d;
}
.subUl {
	display: block;
	font-size: 0.8rem;
}
.subUl li {
	margin-left: 1rem;
	margin-top: 0.8rem;
}
.subUl li::before {
	content: '-';
}

.copylight {
	text-align: center;
}

.copylight p {
	font-size: 1rem;
	padding: 0.63rem 0 0.63rem;
	border-top: 1px dotted #ffffff;
	border-bottom: 1px solid #ffffff;
}


/*break point----------------*/
/* =================================
breakpoint:1420px
================================= */
@media screen and (max-width: 1420px) {
	main section {
		width: auto;
	}
	aside {
		min-width: 270px;
		height: 120vh;
	}
	aside .inquiry_link {
		width: 20vh;
		height: 20vh;
	}
}
/* =================================
breakpoint:1100px
================================= */
@media screen and (max-width: 1100px) {
	/* Humbarger Menu */
	.defMenu {
		display: none;
	}
	.hbgMenu {
		display: inline;
		background-color: rgba(255, 255, 255, 0.93);
		z-index: 500;
	}
	/* Nav items */
	.menu {
		font-family: 'Noto sans JP',sans-serif;
		list-style: none;
		position: absolute;
		width: 100%;
		height: auto;
		top: 0;
		margin-top: 52px;
		padding: 0 0 10px 0;
		clear: both;
		background: var(--background-navbar);
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
		transform: scale(1, 0);
		transform-origin: top;
		background-color: rgba(255, 255, 255, 0.93);
	}
	
	/* Hamburger menu button */
	.menu-btn:checked ~ .menu {
		transform: scale(1, 1);
		transform-origin: top;
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	}
	
	/* Hamburger menbu text */
	.menu a {
		text-decoration: none;
		font-weight: 500;
		letter-spacing: 2px;
		font-size: 16px;
		text-transform: capitalize;
		color:#525252;
		opacity: 0;
		/* transition: 0.5s; */
	}
	.menu a:hover {
		color: #447cec;
	}
	
	.menu li {
		border-top: 1px solid rgb(156, 156, 156);
		padding: 15px 0;
		margin: 0 54px;
		opacity: 0;
		transition: 0.5s;
	}
	
	.menu-btn:checked ~ .menu a,
	.menu-btn:checked ~ .menu li {
		opacity: 1;
		/* transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.2s; */
	}
	
	.menu-btn {
		display: none;
	}
	
	.menu-icon {
		display: inline-block;
		position: absolute;
		right: 0;
		cursor: pointer;
		padding: 24px 14px;
		-webkit-tap-highlight-color: rgba(255, 1, 1, 0);
	}
	
	.navicon {
		background: #3366cc;
		display: block;
		height: 3px;
		width: 26px;
		position: relative;
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	}
	
	.navicon:before,
	.navicon:after {
		content: "";
		display: block;
		height: 100%;
		width: 100%;
		position: absolute;
		background: #3366cc;
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	}
	
	.navicon:before {
		top: 9px;
	}
	
	.navicon:after {
		bottom: 9px;
	}
	
	/* Hamburger Menu Animation Start */
	.menu-btn:checked ~ .menu-icon .navicon:before {
		transform: rotate(-45deg);
	}
	
	.menu-btn:checked ~ .menu-icon .navicon:after {
		transform: rotate(45deg);
	}
	
	.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before {
		top: 0;
	}
	.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
		bottom: 0;
	}
	
	.menu-btn:checked ~ .menu-icon .navicon {
		background: rgba(0, 0, 0, 0);
		transition: 0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	}
	/* Hamburger Menu Animation End */
	
	/* Navbar Container */
	.navtext-container {
		width: 100%;
		height: 52px;
		position: absolute;
		box-sizing: border-box;
		display: flex;
		justify-content:left center;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.93);
		box-shadow: 0 0 2rem -10px #5f5e5eda;
	}
	
	/* Navbar Text */
	.navtext {
		position: absolute;
		text-transform: uppercase;
		color: #ddd;
		letter-spacing: 4px;
		font-size: 20px;
	}

	header img {
		margin: 0;
		margin-left: 1rem;
	}
	/*hbgMenuここまで----------------------*/

	aside {
		display: none;
	}
	
	.inquiry_btn {
		display: block;
		background-color: #3366cc;
		position: fixed;
		bottom: 50px;
		right: 20px;
		width: 120px;
		height: 120px;
		border-radius: 50%;
		text-align: center;
		padding-top: 34px;
		color: #fff;
		transition-duration: 0.2s;
		font-weight: 700;
		box-shadow: 0px 0px 20px -3px #b6b5b5;
	}
	.inquiry_btn:hover  {
		transform: translateY(-7px);
		transition-duration: 0.3s;
	}
	.inquiry_btn p {
		margin-bottom: 0.75rem;
	}


	/*footer-----------------------*/
	.subUl {
		display: none;
	}
	.mainUl {
		flex-wrap: wrap;
	}
	.mainUl li {
		margin-left: 3vW;
		margin-right: 1.5vw;
		margin-top: 2rem;
	}
	.footerinn {
		margin-left: 2rem;
	}
}

/* =================================
breakpoint:768px
================================= */
@media screen and (max-width: 768px) {
	html {
		font-size: 14px;
	}
	.inquiry_btn {
		display: none;
	}

	/*モバイル用ナビを表示------*/
	.navMobile {
		height: 5.5rem;
		width: 100vw;
		display: block;
		z-index: 500;
		position: fixed;
		bottom: -0.4rem;
		color: #fff;
		font-family:'Noto Sans JP', sans-serif;
		background-color: #3366cc;
	}
	.navMobile nav {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 100%;
	}
	.navMobile a {
		width: 50%;
		height: 100%;
		text-align: center;
		padding-top: 0.5rem;
		border: 2px solid #2e58ad;
	}
	.navMobile a:hover {
		background-color: #447cec;
	}
	.navMobile img {
		width: 2rem;
	}

	/*パンくずリスト-------*/
	.breadcrumb {
		font-size: 0.9rem;
	}

	header img {
		width: 15rem;
	}
	main {
		padding: 0rem 1rem 1rem 1rem;
	}
	#tp_logo {
		width: auto;
		margin-top: 1rem;
	}
	#tp_image {
		width: auto;
		max-width: 100%;
		padding: 0.5rem;
	}
	main section p {
		word-break:normal;
		word-wrap:normal;
		overflow-wrap:normal;
	}
	main section img {
		max-width: 100%;
	}
	main section h3,
	main section p {
		margin-left: 0;
	}
	main section ul,
	main section ol {
		margin-left: 1.5rem;
	}

	main .quote ul {
		margin-left: 0;
		font-size: 0.9rem;
		word-break:keep-all;
		word-wrap:break-word;
		overflow-wrap:break-word
	}

	main section table {
		width: auto;
	}
	main section table td {
		vertical-align: middle;
	}
	.operate table th, 
	.operate table td {
		padding: 1rem;
		font-size: 0.8rem;
	}

	/*footer-----*/
	footer img {
		width: 9.5rem;
	}
	.mainUl li a {
		font-size: 0.8rem;
	}
	footer p {
		font-size: 0.8rem;
	}
	.copylight p {
		font-size: 0.8rem;
	}
	footer {
		margin-bottom: 5rem;
	}
}


/* =================================
breakpoint:460px
================================= */
@media screen and (max-width: 460px) {


}

/*-----print_setting--------------------------------*/
@media print {
	header {display: none;}
	footer {display: none;}
	.sideForm {display:none;}
	aside {display: none;}
	body {background: none;}
	.pagetitle {
		color: #000000;
	}
	main h1 {
		color:#000000;
	}
	main {
		margin:  0 auto 0;
	}
}