﻿
@import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
    overflow-x: hidden;
    height: 100%;
    margin: 0;
    pdding: 0;
    -webkit-text-size-adjust: 100%;
}



/* body */
body {
    font-family:'メイリオ','Osaka','Arial';
    background-color:#fffffff;
    overflow-y:scroll;
}


/* anchor */
a	{color: #3f72af; text-decoration: none;}
a:hover	{color: #3f72af; text-decoration: underline;}
a.none	{border: none; text-decoration :none;}


a.a1:after {
    font-family: "Font Awesome 5 Free";
    content: "\f061";
    font-weight: 700;
    margin-left: 0.5em;
}

a.a2:after {
    font-family: "Font Awesome 5 Free";
    content: "\f054";
    font-weight: 700;
    margin-left: 0.5em;
    border:none; text-decoration:none;
    font-size: 70%;
}


a.aPDF::after {
    font-family: "Font Awesome 5 Free";
    content: "\f1c1";
    font-weight: 700;
    margin-left: 0.5em;
    color: #b22222;
}

a.aPDF2::after {
    font-family: "Font Awesome 5 Free";
    content: "\f1c1";
    font-weight: 700;
    margin-left: 0.5em;
    color: #b0c4de;
}


a.aEx::after {
    font-family: "Font Awesome 5 Free";
    content: "\f35d";
    font-weight: 700;
    margin-left: 0.5em;
    font-size: 70%;
}




/* form */
input	{font-size: 100%;}
select	{font-size: 100%;}
textarea{font-size: 100%; ime-mode:active;}


input:invalid {
    border: solid 2px red;
}
input.g:invalid {
    border: solid 2px #0072bc;
}

input:disabled + label {
    color:#aaaaaa;
}

input[type="radio"]:checked + label {
    background-color:#abdcfb;
    border-radius:6px;
}
input[type="radio"]:checked {
    box-shadow: 0 0 0 3px #abdcfb;
}

input[type="checkbox"]:checked + label {
    background-color:#abdcfb;
    border-radius:6px;
}
input[type="checkbox"]:checked {
    box-shadow: 0 0 0 3px #abdcfb;
}

.clsInput {
	font-size:100%; font-weight:bold; 
	letter-spacing:0.2em;
	padding:0.5em;
}

.contact_form_explanation	{color: #DA6272; } 
.input_text	{padding: 0.2em; max-width: 98%!important; ime-mode: active;}
.input_select	{padding: 0.2em; max-width: 98%!important;}

.input_radio	{padding: 0.2em; max-width: 98%!important;}
.dv_radio .input_radio	{margin:  0 0.3em 0 0;}
.dv_radio .input_radio:first-child {margin: 0 0.3em 0 0;}
.dv_radio .input_radio:last-child {margin: 0 0.3em 0 0;}
.dv_radio	{margin: 0; padding: 0;}

.input_checkbox	{padding: 0.2em; max-width: 98%!important;}
.dv_checkbox .input_checkbox	{margin: 0 0.3em 0 1em;}
.dv_checkbox .input_checkbox:first-child {margin: 0 0.3em 0 0;}

.input_tel	{padding: 0.2em; max-width: 98%!important; ime-mode: inactive;}
.algn-r		{text-align: right;}



.clsHissu{
	color:#ffffff;
	background-color:#ff4500;
	padding:0.1em; margin-left:0.5em;
	border-radius:4px;
	font-size:80%;
}


.input-wrap{
}
.toggle-pass{

}
.toggle-pass::after {
    font-family: "Font Awesome 5 Free";
    content: "\f14a パスワードを表示";
    font-weight: normal; font-size:90%;
    margin-left: 0.5em;
    color: #444444;
    font-style: normal;
}
.toggle-pass2::after {
    font-family: "Font Awesome 5 Free";
    content: "\f14a パスワードを非表示";
    font-weight: normal; font-size:90%;
    margin-left: 0.5em;
    color: #444444;
    font-style: normal;
}

.cssgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0 0.8em;
  border: 1px solid #ffffff;
  padding: 0em;
  margin: 0 0 0 0;
}

.cssgrid > div {
  border: 1px solid #ffffff;
  background: #ffffff;
  overflow: auto;
  min-width: 0;
  padding: 0.3em 0.3em 0.3em 0;
  margin: 0;
}

.cssgrid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0;
  border: 1px solid #ffffff;
  padding: 0em;
  margin: 1em 0 2em 0;
}

.cssgrid2 > div {
  background: #ffffff;
  border:dotted 1px #bbbbbb;
  overflow: auto;
  min-width: 0;
  padding: 0.3em 0.3em 0.3em 0.3em;
  margin: 0;
}






/* span */
.spnInline span {
    display: inline-block;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}



/* slider */
.opening {
	position: relative;
}

.opening p {
    position: absolute;
    color: #cc0000
    font-weight: 900;
    font-size: 2.5vw;
    bottom: 20px;
    left:1%;
    background-color: rgba(255,255,255,0.6);
    height:auto;
    line-height:1.5em;
    border-radius: 6px;
    z-index: 9998;
}



/* Container */
@media all and (min-width: 1025px) {
    #idContainer {
	width: 1080px;
	margin: 0 auto;
	padding: 0;
    }
}
@media all and (max-width: 1024px) {
    #idContainer {
	width: 95%;
	margin: 0 auto;
	padding: 0;
    }
}



/* Header */
@media all and (min-width: 1025px) {
    header{
	width: 100%;
	padding: 0.5em 0 0.5em 0;

	display: -webkit-flex;
	display: flex;
	flex-direction: row;

	-webkit-align-items: center;
	align-items: center;			/* 垂直中央寄せ */

    }
    .logo{
	width: 60px;
	height: 60px;
        margin: 0 auto 0 0;
	background:url(../images/logo.jpg) no-repeat; border:none;
    }
    .gnav{
	display: -webkit-flex;
	display: flex;
	margin-left: auto;

	list-style: none;
    }
    .gnav a{
        padding: 0 0 0 1em;
        display: block;
        font-size: 100%; color: #888888;
	border: none;
        border-radius: 4px;
    }
    #idHeaderMenu {
	display: -webkit-flex;
	display: flex;

	margin: 0;
	padding: 0;
	list-style: none;
    }
}

@media all and (max-width: 1024px) {
    header{
	padding: 0.5em;
	width: 100%;
 
	display: -webkit-flex;
	display: flex;
	flex-direction: column;

	-webkit-justify-content: center;
	justify-content: center;		/* 水平中央寄せ */
	-webkit-align-items: center;
	align-items: center;			/* 垂直中央寄せ */
   }
    .logo {
	width: 60px;
	height: 60px;
	margin: 0.5em 0;
	background:url(../images/logo.jpg) no-repeat; border:none;
    }
    .gnav {
	display: -webkit-flex;
	display: flex;
    }
    .gnav a {
	display: block;
	padding: 0.5em;
        font-size: 100%;
	border: none;
    }
    #idHeaderMenu {
	display: none;
    }
}



/* Header 2 */
@media all and (min-width: 1025px) {
    #idHeader {
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #ff9999;
	height: 80px;
    }
}
@media all and (max-width: 1024px) {
    #idHeader {
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #ff9999;
	height: 80px;
    }
}



/* Footer */
@media all and (min-width: 1025px) {
    #idFooter {
	width: 100%;
	margin: 0;
	height: 100px;
	line-height: 1.5em;
	padding: 20px 0 20px 0;
	background-color: #f1efed;
	text-align: center;
    }
    #idFooter span::before {
	width: 1080px;
	content: 'センシンメディカル株式会社 \A 〒113-0034　東京都文京区湯島2-7-16　プリ・テックビル6階 \A 電話：03-5802-0560（代表） \A COPYRIGHT(C) SENSHIN MEDICAL ALL RIGHTS RESERVED.';
	margin: auto;
	padding: 0;
	white-space: pre;
    }
    #idFooterTop {
	width: 100%;
	margin: 0;
	height: 120px;
	line-height: 1.5em;
	padding: 10px 0 10px 0;
	background-color: #f1efed;
	text-align: center;
    }
    #idFooterTop span::before {
	width: 1080px;
	content: 'センシンメディカル株式会社 \A 〒113-0034　東京都文京区湯島2-7-16　プリ・テックビル6階 \A 電話：03-5802-0560（代表） \A COPYRIGHT(C) SENSHIN MEDICAL ALL RIGHTS RESERVED.';
	margin: auto;
	padding: 0;
	white-space: pre;
    }
}

@media all and (max-width: 1024px) {
    #idFooter {
	width: 100%;
	margin: 30px 0 0 0;
	height: 80px;
	line-height: 1.5em;
	padding: 20px 0 20px 0;
	background-color: #f1efed;
	text-align: center;
	font-size: 80%;
    }
    #idFooter span::before {
	width: 100%;
	font-size: 10px;
	content: 'センシンメディカル株式会社 \A 〒113-0034　東京都文京区湯島2-7-16 \A プリ・テックビル6階 \A 電話：03-5802-0560（代表） \A COPYRIGHT(C) SENSHIN MEDICAL ALL RIGHTS RESERVED.';
	margin: auto;
	padding: 0;
	white-space: pre;
    }
    #idFooterTop {
	width: 100%;
	margin: 30px 0 0 0;
	height: 100px;
	line-height: 1.5em;
	padding: 10px 0 10px 0;
	background-color: #f1efed;
	text-align: center;
	font-size: 80%;
    }
    #idFooterTop span::before {
	width: 100%;
	font-size: 10px;
	content: 'センシンメディカル株式会社 \A 〒113-0034　東京都文京区湯島2-7-16 \A プリ・テックビル6階 \A 電話：03-5802-0560（代表） \A COPYRIGHT(C) SENSHIN MEDICAL ALL RIGHTS RESERVED.';
	margin: auto;
	padding: 0;
	white-space: pre;
    }
}



/* MainMenu */
@media all and (min-width: 1025px) {
    #idToggle {
	display: none;
    }

    #idMenu {
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #ffffff;
	height: 60px;
    }
    #nav_toggle{
	display: none;
    }
}

@media all and (max-width: 1024px) {
    #idMenu {
	display: none;
	position: fixed;
	top: 36px;
	width:100%; height: auto;
	margin: auto; padding: 0;
	text-align: left;
	z-index: 999;
	background-color: #76e2f4;
    }

    /*開閉ボタン*/
    #nav_toggle{
	width: 30px;
	height: 28px;
	position: absolute;
	top: 0px; right: 2%;
	z-index: 100;
	background-color: #76e2f4;
	cursor: pointer;
	float:right;
	padding: 4px 6px 4px 6px; margin: 0;
    }

    #nav_toggle div {
	position: relative;
	padding: 0; margin: 0;
    }

    #nav_toggle span{
	display: block;
	height: 3px;
	background: #ffffff;
	position: absolute;
	width: 100%;
	left: 0;
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out:
	text-align:center;
    }

    #nav_toggle span:nth-child(1){top:4px;}
    #nav_toggle span:nth-child(2){top:12px;}
    #nav_toggle span:nth-child(3){top:20px;}

    /*開閉ボタンopen時*/
    .open #nav_toggle span:nth-child(1) {
	top: 12px;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	transform: rotate(135deg);
    }
    .open #nav_toggle span:nth-child(2) {
	width: 0;
	left: 50%;
    }
    .open #nav_toggle span:nth-child(3) {
	top: 12px;
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	transform: rotate(-135deg);
    }
}



@media all and (min-width: 1025px) {
  #idMainMenu {
	display: flex;
	display: -webkit-flex;

	-webkit-justify-content: space-between;
	justify-content: space-between;	/* 並列均等配置（左右隙間なし） */

	-webkit-align-items: center;
	align-items: center;			/* 垂直中央寄せ */

	height: 50px;
	list-style: none;
	margin: 0;
	padding: 0;
    }
  #idMainMenu li {
	background-color: #76e2f4;
	margin: 0;
	padding: 0em;
	text-align: center;
	width: 10em;
	height: 50px;
	line-height: 50px;
	letter-spacing: 0.2em;
	-webkit-flex-grow: 1;			/* 伸長 */
	flex-grow: 1;
    }
  #idMainMenu a {
	display: block;
	width: 100%;
	height: 100%;
	color: #212121;
	border: none;
	font-weight: bold;
    }
  #idMainMenu li:hover {
	background-color: #ceecf0;
    }
  #idMainMenu li .menu_selected {
	background-color: #ceecf0;
    }
}
@media all and (max-width: 1024px) {
  #idMainMenu {
	display: flex;
	display: -webkit-flex;

	-webkit-flex-direction: column;
	flex-direction: column;

	list-style: none;
	margin: 0;
	padding: 0;
    }
  #idMainMenu li {
	background-color: #76e2f4;
	margin: 0; 
	padding: 0.5em 0 0.5em 0.5em;
	text-align: left;
	width: auto;
	border-bottom: solid 1px #d6e6f2;
    }
  #idMainMenu li:last-child {
	background-color: #76e2f4;
	margin: 0; 
	padding: 0.5em 0 0.5em 0.5em;
	text-align: left;
	width: auto;
	border-bottom: solid 1px #76e2f4;
    }
  #idMainMenu a {
	display: block;
	width: 100%;
	height: 100%;
	color: #000000;
	border: none;
    }
  #idMainMenu li:hover {
	background-color: #ceecf0;
    }
}



/* Title */
@media all and (min-width: 1025px) {
    #idTitle {
	margin: 20px 0 20px 0;
	padding: 0 0 0 0.5em;
	width: auto;
	height: 60px;
	line-height: 60px;
	text-align: left; font-size: 150%; font-weight: normal; color: #444444; letter-spacing: 0.1em;
	background-color: #f1efed;
    } 
}

@media all and (max-width: 1024px) {
    #idTitle {
	margin: 20px 0 20px 0;
	padding: 0 0 0 0.5em;
	width: auto;
	height: 60px;
	line-height: 60px;
	text-align: left; font-size: 150%; font-weight: normal; color: #444444; letter-spacing: 0.1em;
	background-color: #f1efed;
    } 
}



/* Article */
article {
    display: -webkit-flex;
    display: flex;

    flex-wrap: wrap;

    -webkit-justify-content: space-between;
    justify-content: space-between;

    margin: 0;
    padding: 0;
}



/* SideMenu */
@media all and (min-width: 1025px) {
    #idSide {
	margin: 0;
	padding: 0 10px 0 0;
	width: 200px;
	min-height: 500px;
	text-align: left;
	background-color: #ffffff;
	border-right: dashed 1px #afc2cb;
    } 

    .details1 {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
    }

    .details1.summary1:first-of-type {
	list-style: inside disclosure-open;
    }

    .summary1 {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 0em 0 0.8em 0.5em;
	background-color: #f1efed;
	display: none;
    } 
    .summary1::-webkit-details-marker {
	display: none;
    } 
    .summary1:hover, .details1[open] summary {
	background-color: #f1efed;
    }
    .summary1::after {
	content: '+';
	position: relative;
	top: 50%;
	right: 30px;
	transform: translateY(-50%);
	transition: transform 0.5s;
	font-size: 30px;
    }

    .details1[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
    }

    .answer {
	padding: 15px 0 0 0;
    }

    .details1[open] .answer {
	animation: fadein 0.5s ease;
    }

    @keyframes fadein {
	0% { opacity: 0; }
	100% { opacity: 1; }
    }
}
@media all and (max-width: 1024px) {
    #idSide {
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: left;
	background-color: #ffffff;
    } 

    .summary1 {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 0.5em 0 0.5em 0.5em;
	background-color: #f1efed;
	outline: none;
	display: block;
    } 
    .summary1::-webkit-details-marker {
	display: none;
    } 
    .summary1:hover, .details1[open] summary {
	background-color: #f1efed;
    }
    .summary1::after {
	content: '+';
	position: absolute;
	top: 50%;
	right: 30px;
	transform: translateY(-50%);
	transition: transform 0.8s;
	font-size: 30px;
    }

    .details1[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
    }

    .answer {
	padding: 5px 0 0 0;
	background-color: #ffffff;
    }

    .details1[open] .answer {
	animation: fadein 0.5s ease;
    }

    @keyframes fadein {
	0% { opacity: 0; }
	100% { opacity: 1; }
    }
}



#idSideMenu {
   display: flex;
   display: -webkit-flex;
 
    -webkit-justify-content: space-between;
    justify-content: space-between;		/* 並列均等配置（左右隙間なし） */

    -webkit-align-items: flex-start;
    align-items: flex-start;			/* 上寄せ */

    -webkit-flex-direction: column;		/* 列 */
    flex-direction: column;
}

@media all and (min-width: 1025px) {
    #idSideMenu a {
	color: #000000;
    } 
}
@media all and (max-width: 1024px) {
    #idSideMenu {
	margin: 0 0 0 0.5em;
    } 
    #idSideMenu a {
	color: #000000;
    } 
}



/* list-style */
.list_triangle {
    padding: 0;
    margin: 0;
    list-style: none;
}

.list_triangle > li {
    position: relative;
    padding: 0 0 0 0.8em;
    margin: 0.2em 0 0.2em 1em;
    cursor: pointer;
}
.list_triangle > li::before {
    position: absolute;
    content:'▲';
    top: 0em;
    left: -1em;
    transform: rotate(90deg);
    color: #aec4c7;
}

.list_triangle > li.list_selected {
    font-weight: bold;
}
.list_triangle > li.list_selected::before {
    position:absolute;
    content:'▽';
    top: 0em;
    left: -1em;
    transform: rotate(0deg);
    color: #aec4c7;
}

.list_sub {
    padding: 0 0 0 1.3em;
    margin: 0.5em 0 0 -1.3em;
    list-style-type: none;
    font-weight: normal;
    border-left: solid 1px #cccccc;
    line-height: 1em;
}
.list_sub li {
    margin: 0.5em 0 0.5em 0;
}
.list_sub li.list_sub_selected {
    font-weight: bold;
}




/* Contents */
@media all and (min-width: 1025px) {
    .contenttop {
	margin: 0;
	padding: 0;
	width:100%;
	min-height:1000px;
	text-align:left;
	background-color:#ffffff;
	line-height:1.4em;
	text-justify: inter-ideograph;
    }
    .content {
	margin: 0 0 0 15px;
	padding: 0;
	width:850px;
	min-height:500px;
	text-align:left;
	background-color:#ffffff;
	line-height:1.4em;
	text-align: justify;
    }
}

@media all and (max-width: 1024px) {
    .contenttop {
	margin: 20px 0 0 0;
	padding: 0;
	width:100%;
	text-align:left;
	background-color:#ffffff;
	line-height:1.3em;
    }
    .content {
	margin: 20px 0 0 0;
	padding: 0;
	width:100%;
	text-align:left;
	background-color:#ffffff;
	line-height:1.3em;
	text-align: left;
    }
}



/* PageTop */
#idPageTop {
    width: 50px;
    height: 50px;
    right: 0;
    bottom: 0;
    background: #ceecf0;
    opacity: 1;
    border-radius: 20%;
    cursor: pointer;
}
@media all and (min-width: 1025px) {
    #idPageTop {
	position: -webkit-sticky;
	position: sticky;
    }
}
@media all and (max-width: 1024px) {
    #idPageTop {
	position: fixed;
	right: 3%;
    }
}

#idPageTop span {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
    border: none;
}
#idPageTop span::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f062';
    font-size: 25px;
    color: #fff;
    position: absolute;
    width: 25px;
    height: 25px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}



/* Table */
/* テーブル */
.clsTb {margin:0.5em 0 0.5em 0; border-collapse:collapse;}
.clsTb th, .clsTb td {border:solid 1px #aaaaaa;padding:0.5em;}
.clsTb th {background:#f9f9f9;}
.clsTb0 {margin:0; border-collapse:collapse; border:none;}
.clsTb0 th {padding:0.5em 0 0.5em 0; color:#0e2d53; border:none;}
.clsTb0 td {padding:0.5em 0 0.5em 0; border:none;}

.clsTb {
    margin-top: 20px;
    margin-left: auto;
    margin-bottom: 20px;
    margin-right: auto;
    border: solid 1px #c6c8b5;
    border-collapse: collapse;
}

.clsTb th,
.clsTb td {
    padding: 0.5em;
    transition: 0.2s;
    border: solid 1px #c6c8b5;
}

.clsTb th {
    font-weight: bold;
    background-color: #f5f5f5;
}

.clsTb tbody:hover td {
    color: #77735a;
}

.clsTb tbody:hover tr:hover td {
    color: #111;
    background-color: #f4f8f4;
}

@media all and (max-width: 1024px) {

    th.res {
	display: block;
	width:100% !important;
	border: none;
	padding-left:0; padding-right:0;
    }
    td.res {
	display: block;
	width:100% !important;
	border: none;
	padding:0; margin:0.5em 0 1em 0;
    }
    th.res0 {
	display:block;
	background:#f5f5f5; font-weight:bold;
	width:100% !important;
	border:none;
	padding:0.2em 0 0.2em 0;
    }
     td.res0 {
	display:block;
	width:100% !important;
	border:none;
	padding:0.1em 0 0.1em 0;
	margin:0;
    }
}




@media all and (min-width: 1025px) {
    .side-scroll-table {
    }
    .side-scroll-table table {
    }
}
@media all and (max-width: 1024px) {
    .side-scroll-table {
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
	overflow: auto;
	overflow-x: auto;
	overflow-y: hidden;
    }
    .side-scroll-table table {
	width:100%;
    }
}



/* 見出し */
h2	{
    margin: 2em 0 1em 0; padding: 0.5em 0 0.5em 0.5em;
    text-align:left; color:#adc3c6; font-size:170%; line-height:1en; font-weight:bold;
    border-left: solid 4px #adc3c6; 
    background-color:#ffffff;
    line-height:1em;
}
h2:first-child {
    margin: 0 0 1em 0;
}



h3	{
    margin: 2em 0 1em 0; padding: 0 0 0.2em 0;
    text-align:left; color:#adc3c6; font-size:140%; line-height:1en; font-weight:bold;
    border-bottom: solid 2px #adc3c6; 
    background-color:#ffffff;
    line-height:1em;
}
h3:first-child {
    margin: 0 0 1em 0;
}


h4	{
    margin: 2em 0 1em 0; padding: 0 0 0.2em 0;
    text-align:left; color:#adc3c6; font-size:140%; line-height:1en; font-weight:bold;
    border-bottom: solid 1px #adc3c6; 
    background-color:#ffffff;
    line-height:1em;
}
h4:first-child {
    margin: 0 0 1em 0;
}


h5	{
    margin: 2em 0 1em 0; padding: 0 0 0.2em 0;
    text-align:left; color:#adc3c6; font-size:140%; line-height:1en; font-weight:bold;
    border-bottom: dotted 1px #adc3c6; 
    background-color:#ffffff;
    line-height:1em;
}
h5:first-child {
    margin: 0 0 1em 0;
}




/* div */
div.dv1 {
    padding: 0.5em;
    margin: 20px 0 20px 0;
    background-color: #efebe9;
}
div.dv1b {
    padding: 0.5em;
    margin: 20px 0 20px 0;
    border: solid 2px #efebe9;
}



div.dv2 {
    padding: 0.5em;
    margin: 20px 0 20px 0;
    background-color: #ceecf0
}
div.dv2b {
    padding: 0.5em;
    margin: 20px 0 20px 0;
    border: solid 2px #ceecf0
}


div.dv3 {
    padding: 0.5em;
    margin: 10px 0 10px 0;
    background-color: #ffe2e2;
}
div.dv3b {
    padding: 0.5em;
    margin: 10px 0 10px 0;
    border: solid 2px #fc5185;
}

.clsCaution {
    color: #fc5185;
}

.pen {
  background: linear-gradient(transparent 70%, #e5bb09 70%);
}


.dvMemo {
    background-color:#ffff99; 
    color:#ff4500; 
    border: double 3px #ffd700; 
    padding: 8px; margin: 1em 0 1em 0;
}

div.dvSubPage {
    background-color:#FAFAFA;padding:8px; margin-top:30px;margin-bottom:0px; border-top:double 3px #BBBBBB; word-break: break-all;
}

div.dvSubPage2 {
    background-color: #eaedf8;
    border-top: solid 2px #eaedf8; border-bottom: solid 2px #eaedf8;
    padding: 0.5em;
}


div.dvTopBottom {
    margin: 4em 0 0 0;
    padding: 0.5em;
    border-top: solid 2px #eaedf8; border-bottom: solid 2px #eaedf8;
    justify-content: center;
    align-items: center;
    font-size: 80%
}

div.dvTopBottom div {
    background-color: #ffffff;s
}


.alignBottom {
}


.dvContact {
    padding: 0.5em;
    border: solid 2px #eaedf8;
}

.dvDL {
    padding: 0.5em;
    border: solid 2px #efebe9;
}


/*///// UL OL /////*/
ul li {
    margin:0 0 0.5em 0;
    padding:0;
}
ul li:last-child {
    margin-bottom:0;
}

ol li {
    margin:0  0 0.5em 0;
    padding:0px;
}
ol li:last-child {
    margin-bottom:0;
}

@media all and (min-width: 769px) {
    ul.ulRes	{
	justify-content:center;
	list-style: none outside none;
	margin:0px auto; padding:0px;
	position:relative;
    }
    ul.ulRes > li{
	position:relative;
	display: inline-block;
	vertical-align:top;
	margin:0px 1em 0 0;
	padding:0px;
    }
    ul.ulRes > li:last-child {
	margin:0px;
	padding:0px;
    }
    ul.ulRes:after	{content:""; display:block; clear: both; margin:0px; padding:0px;}
}
@media all and (max-width: 768px) {

    ul.ulRes {
	justify-content:center;
	list-style: none outside none;
	margin:0px auto; padding:0px;
	position:relative;
    }
    ul.ulRes > li{
	position:relative;
	display: block;
	vertical-align:top;
	margin:0px 0 0.5em 0;
	padding:0px;
	width:100% !important;
    }
    ul.ulRes > li:last-child {
	margin:0px;
	padding:0px;
	width:100% !important;
    }
    ul.ulRes > li img{
	max-width:100% !important;
    }
    ul.ulRes:after	{content:""; display:block; clear: both; margin:0px; padding:0px;}
}






/* 製品 1 */
ul.ulProduct1 {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
 
    margin: 0 auto;
    max-width: 100%;
    list-style: none;
}
@media all and (min-width: 1025px) {
    ul.ulProduct1 {
    }
}
@media all and (max-width: 1024px) {
    ul.ulProduct1 {
	-webkit-justify-content: center;
    	justify-content: center;
    }
}

.ulProduct1 li {
    padding: 0 0 0 0;
    margin: 0px 10px 20px 0;

    color: #111;
    text-decoration: none;
    background-color: #f1f1f1;
    transition: 0.2s;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
@media all and (min-width: 1025px) {
    .ulProduct1 li {
	width: 32%;
    }
}
@media all and (max-width: 1024px) {
    .ulProduct1 li {
	width: 300px;
	max-width: 100%;
    }
}

.ulProduct1 img {
    display: block;
    max-width: 100%;
    height: auto;
}

.ulProduct1 p {
    margin: 0;
    padding: 0.5em;
    font-size: 80%;
    line-height:1.5em;
    word-break:break-all;
    overflow-wrap:break-word;
}

.clsPrice {
    font-size: 100%;
    line-height:1.2em;
}

.noclamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin: 20px 0;
  font-size: 100%;
  overflow: visible;
}



/* 製品 2 */  /* 製品 card */
.wrapcard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-gap: 20px;
  padding: 20px;
}

.wrapcard .item {
  display: grid;
  grid-template-rows: max-content 150px 1fr;
  padding: 10px 10px 10px 10px;
  background-color: #efebe9;
  break-inside: avoid;
  line-height: 1.4;
}

.wrapcard p.clsProductName {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 0 0 10px 0;
  font-size: 100%;
  overflow: hidden;
  font-weight: 700;
}

.wrapcard img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;	/* アスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小 */
  /* object-fit: cover;	アスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小 */
}

.wrapcard p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 20px 0;
  font-size: 100%;
  overflow: hidden;
}

.wrapcard .noclamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin: 20px 0;
  font-size: 100%;
  overflow: visible;
}

.wrapcard ul {
  display: flex;
  font-size: 100%;
}

.wrapcard time {
  margin-right: 20px;
}


/* 製品 detail */
.wrapdetail {
/*   display: grid;	*/
/*     grid-template-columns: repeat(auto-fill, minmax(650px, 1fr));	*/	/* 列のトラックの高さ */
/*     grid-gap: 20px;	*/
/*     padding: 20px;	*/
}

.wrapdetail .item {
  display: grid;
  grid-template-rows: max-content 250px 1fr;			/* 行のトラックの高さ */
  padding: 10px 10px 10px 10px;
  background-color: #FFFFFF;
  * break-inside: avoid; 					/* 主ボックスの途中での改ページ・改カラム禁止 */
  line-height: 1.4;
}

.wrapdetail p.clsProductName {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 0 0 10px 0;
  font-size: 14px;
  overflow: visible;
  font-weight: 700;
}

.wrapdetail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;	/* アスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小 */
  /* object-fit: cover;	アスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小 */
}

.wrapdetail p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
/*  -webkit-line-clamp: 3; */
  margin: 20px 0;
  font-size: 14px;
  overflow: visible;
}

.wrapdetail ul {
  display: flex;
  font-size: 13px;
}

.wrapcard time {
  margin-right: 20px;
}




.wrapgyo {

}

.wrapgyo td {
  max-width:200px;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}

.wrapgyo img {
  display: block;
  height: 50px;
  object-fit: contain;	/* アスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小 */
  /* object-fit: cover;	アスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小 */
}




/*///// マウスオーバー時拡大 /////*/
.image_mouseover_1 {
    text-align:center;
    overflow: visible;
    width: auto;
    height: auto;
    background-color:#ffffff;
}
.image_mouseover_1 img {
    text-align:center;
    max-width: 240px;
    max-height: 300px;
    display: block;
    transition-duration: 0.5s;
}
.image_mouseover_12 img:hover {
    max-width: 500px;
    transform: scale(1.2,1.2);
    transition-duration: 0.5s;
}

.dvZoomOuter {
    text-align: center;
    position: relative;
    width: 100%;
    background-color:#ffffff;
    visibility: hidden;
}
.dvZoom {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 800px;
    z-index: 99;
    visibility: hidden;
}
.dvZoom img {
    text-align: center;
    max-width: 500px;
    height: auto;
    margin: auto 0;
    padding: 30px;
    background-color:#ffffff;
    border: solid 2px #cccccc;
}

.batsu {
    display: block;
    position: relative;
    width: 30px;
    height: 30px;
    margin: auto;
    top: 10px;
    z-index: 100;
    cursor: pointer;
}
.batsu::before, .batsu::after { /* 共通設定 */
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px; 		/* 棒の幅（太さ） */
    height: 30px; 		/* 棒の高さ */
    background: #333;
    border-radius: 2.5px;
}
.batsu::before {
    transform: translate(-50%,-50%) rotate(45deg);
}
.batsu::after {
    transform: translate(-50%,-50%) rotate(-45deg);
}




/*///// この商品を資料請求カートに追加する /////*/
.clsAddCart {
    font-size: 150%; color: #3f72af; font-weight: bold;
    padding: 0.5em;

}



/*///// GRID /////*/
.grid1 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));	/* 列のトラックの高さ */
  grid-gap: 20px;
  padding: 20px;
}

.grid1 .griditem1 {
  display: grid;
  grid-template-rows: 230px 1fr;			/* 行のトラックの高さ */
  padding: 4px 4px 4px 4px;
  background-color: #ffffff;
  border: solid 1px #aaaaaa;
  break-inside: avoid;					/* 主ボックスの途中での改ページ・改カラム禁止 */
}

.grid1 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: none;					/* 置換コンテンツの拡大縮小なし */
}

.grid1 p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 10px 0 0 0;
  padding: 0;
  overflow: hidden;
  background-color: #ffffff;
}




/* トピックス */
.gridTopics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));	/* 列のトラックの高さ */
  grid-gap: 20px;
  padding: 0px;
}

.gridTopics .gridTopicsitem {
  display: grid;
  grid-template-rows: 250px 1fr;		/* 行のトラックの高さ */
  padding: 0;
  background-color: #ffffff;
  border: solid 1px #efebe9;
  break-inside: avoid;					/* 主ボックスの途中での改ページ・改カラム禁止 */
}

.gridTopics img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: none;					/* 置換コンテンツの拡大縮小なし */
}

.gridTopics p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 10px 0 0 0;
  padding: 0;
  overflow: hidden;
  background-color: #ffffff;
}

.gridTopics a {
  color: #000000;
}





/* 製品情報 */
.gridProducts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));	/* 列のトラックの高さ */
  grid-gap: 10px;
  padding: 0px;
}

.gridProducts .gridProductsitem {
  display: grid;
  grid-template-rows: 200px 1fr;		/* 行のトラックの高さ */
  padding: 0;
  background-color: #ffffff;
  border: solid 1px #efebe9;
  break-inside: avoid;					/* 主ボックスの途中での改ページ・改カラム禁止 */
}

.gridProducts img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: none;					/* 置換コンテンツの拡大縮小なし */
}

.gridProducts p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 10px 0 0 0;
  padding: 0;
  overflow: hidden;
  background-color: #ffffff;
}

.gridProducts a {
  color: #000000;
}




.clsFitNone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: none;					/* 置換コンテンツの拡大縮小なし */
}

.clsFitCover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;					/* 置換コンテンツの拡大縮小なし */
}
.clsFitAuto img {
  display: block;
  width: 100%;
  height: height:auto;					/* 置換コンテンツの拡大縮小なし */
}


/*///// RSS /////*/
div.dvRSS	{
	text-align:right;
	border-top:solid 1px #bbbbbb;
	margin:0; padding:0.3em 0 0.3em 0;
}
div.dvRSS a	{
	text-decoration:none;
	border:none;
}





.clsEmp1 {
    color: #234768;
    font-weight: bold;
    border-bottom: dotted 3px #234768;
}
@media all and (max-width: 768px) {
    .clsEmp1 {
    line-height: 160%;
    }
}

.clsEmp2 {
    color: #b4fab4;
    font-weight: bold;
    border-bottom: dotted 3px #b4fab4;
}
@media all and (max-width: 768px) {
    .clsEmp2 {
    line-height: 160%;
    }
}

.clsEmp3 {
    color: #ff0000;
    font-weight: bold;
    border-bottom: dotted 3px #ff0000;
}
@media all and (max-width: 768px) {
    .clsEmp3 {
    line-height: 160%;
    }
}


.clsMk1		{background-color : #BEC9D8;}
.clsMk2		{background-color : #DEFAC9;}
.clsMk3		{background-color : #FFD7CE;}
.clsMk4		{background-color : #FFFF99;}

.cls1 {
    color: #325b97;
}

.cls2 {
    color: #b4fab4;
}

.clsRed {
    color: #ff0000;
}

.clsAnnai {
    font-weight: normal;
    font-size: 80%;
}

.cls99{
    background-color: #ffff00;
}

.clsHissu{
	color:#ffffff;
	background-color:#ff4500;
	padding:0.1em; margin-left:0.5em;
	border-radius:4px;
	font-size:80%;
}
.clsCaution	{
	color:#ffffff;font-weight:bold;
	background-color:#ff0000;
	padding:0.3em; margin-left:0.5em;
	border-radius:4px;
}
.clsPages{
	color:#ffffff; font-size:90%;
	background-color:#6A8CC7;
	padding: 0.1em 0.3em 0.1em 0.3em; margin-left:0.5em;
	border: solid 2px #3261AB;
	border-radius:4px;
}

.clsNews {
	color:#ffffff;
	background-color:#444444;
	padding:0.1em 0.2em 0.1em 0.2em; margin-right:0.5em;
	border-radius:0px;
	font-size:80%;
}

.clsBtnPDF {
	color:#ffffff;
	background-color:#a31f2c;
	padding: 0.2em 0.5em 0.1em 0.5em; margin-left:0.5em;
	border-radius: 10px;
	font-size:100%;
}
.clsBtnPDF:hover {
	opacity: 0.7;
}
.clsBtnPDF a {
	color:#ffffff;
}
.clsBtnViewer {
	color:#ffffff;
	background-color:#ffa500;
	padding: 0.2em 0.5em 0.1em 0.5em; margin-left:0.5em;
	border-radius: 10px;
	font-size:100%;
}
.clsBtnViewer:hover {
	opacity: 0.7;
}
.clsBtnViewer a {
	color:#ffffff;
}




.top0	{margin-top:0;}
.top03	{margin-top:0.3em;}
.top05	{margin-top:0.5em;}
.top1	{margin-top:1em;}
.top15	{margin-top:1.5em;}
.top2	{margin-top:2em;}


@media all and (min-width: 1025px) {
    .br1 {}
    .br2 {display:none;}
    .br3 {}

    .centerM{}
    img.imgM{}

    .w50 {width:50%; margin: auto;}
    .w80 {width:80%; margin: auto;}

}

@media all and (max-width: 1024px) {
    .br1 {display:none;}
    .br2 {}
    .br3 {}

    .centerM {text-align:center;}
    img.imgM {max-width:100%;}

    .w50 {}
    .w80 {}
}


@media all and (min-width: 1025px) {

    div.dvParent {
	display: block;
    }
    div.dvParent:after {content:""; display:block; clear:both; margin:0; padding:0;}
    div.dvParent2 {
	display: block;
    }
    div.dvParent2:after {content:""; display:block; clear:both; margin:0; padding:0;}

    div.dvParent .dvR1{
	width:auto;
	display: inline-block;
	float: right;
	margin-left:1em;
    }
    div.dvParent2 .dvR1{
	width:auto;
	display: inline-block;
	float: right;
	margin-left:1em;
    }
    div.dvR1 img{
	max-width: 100%;
    }


    div.dvParent .dvL1{
	width:auto;
	display: inline-block;
	float: left;
	margin-right:1em;
     }
     div.dvL1 img{
	max-width: 100%;
    }
}
@media all and (max-width: 1024px) {
    div.dvParent {
	display: flex;
	display : -webkit-box;     /* old Android */
	display : -webkit-flex;    /* Safari etc. */
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
    }
    div.dvParent:after {content:""; display:block; clear: both; margin:0; padding:0;}
    div.div.dvParent2 {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
    }
    div.dvParent2:after {content:""; display:block; clear: both; margin:0; padding:0;}

    div.dvParent div {
    }
    div.dvParent .dvR1{	
	width:100% !important;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;

	text-align:center;
	margin-top:0.5em;
    }
    div.dvParent2 .dvR1{	
	width:100% !important;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;

	text-align:center;
	margin-top:0.5em;
    }
    div.dvR1 img{
	max-width: 100%;
    }

    div.dvParent .dvL1{	
	width:100% !important;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;

	text-align:center;
	margin-top:0.5em;

	-webkit-box-ordinal-group: 1;
	-ms-flex-order: 1;
	order: 1;
    }
    div.dvL1 img{
	max-width: 100%;
    }
}



/* FLEX-BOX */
@media all and (min-width: 1025px) {

	.flex-containerSB {
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}

	.flex-containerSA {
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		-webkit-justify-content: space-around;
		justify-content: space-around;
	}

	.flex-containerL {
	display: -webkit-flex;
	display:flex;
	flex-diretion: row;
	flex-wrap: wrap;
	justify-content: left;
	}
}

@media all and (max-width: 1024px) {

	.flex-containerSB {
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
	.flex-containerSB > div {
		margin:0 0 1em 0; padding:0;
		width:100% !important;
	}
	.flex-containerSB > div:last-child {
		margin:0; padding:0;
		width:100% !important;
	}
	.flex-containerSB > p {
		margin:0 0 1em 0; padding:0;
		width:100% !important;
	}
	.flex-containerSB > p:last-child {
		margin:0; padding:0;
		width:100% !important;
	}

	.flex-containerSB > li {
		margin:0 0 1em 0; padding:0;
		width:100% !important;
	}
	.flex-containerSB > li:last-child {
		margin:0; padding:0;
		width:100% !important;
	}

	.flex-containerSA {
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		-webkit-justify-content: space-around;
		justify-content: space-around;
	}
	.flex-containerSA > div {
		margin:0 0 1em 0; padding:0;
		width:100% !important;
	}
	.flex-containerSA > div:last-child {
		margin:0; padding:0;
		width:100% !important;
	}

	.flex-containerL {
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		-webkit-justify-content: left;
		justify-content: left;
	}
	.flex-containerL > div {
		margin:0 0 1em 0; padding:0;
		width:100% !important;
	}
	.flex-containerL > div:last-child {
		margin:0; padding:0;
		width:100% !important;
	}
}




.clsYesNo {
}
.clsYesNo a {
	color:#ffffff; text-decoration: none;
	display: block;
	width: 100%;
	height: 100%;
}
.clsYesNo:hover {
	opacity: 0.6;
	cursor: pointer;
}
.clsYesNo span {
	 margin-right:-0.5em;
}

.clsYes {
	background-color: #51c7ee;
	color: #ffffff; font-size: 100%; font-weight: bold;
	text-align:center; letter-spacing: 0.5em;
	padding: 0.5em;
	border-radius: 8px;
}

.clsNo {
	background-color: #51c7ee;
	color: #ffffff; font-size: 100%; font-weight: bold;
	text-align:center; letter-spacing: 0.5em;
	padding: 0.5em;
	border-radius: 8px;
}


.clsTel 	{
	color:#069bdf; font-size:150%; font-weight:bold; text-decoration:underline;
}

.clsContact {
	padding: 0.3em;
	background-color: #069bdf;
	color: #ffffff; font-size: 130%; font-weight: bold;
	text-align:center;
	border-radius: 8px;
}



.dvRound1 {
    padding:0.8em;
    text-align:center; 
    font-size:100%; font-weight:bold;
    line-height:1em;
    background-color:#EDAD0B;
    border:solid 4px #F3C759;
    border-radius:4px;
}
.dvRound1 a {
    color:#ffffff;
}
.dvRound1:hover {
    opacity: 0.8;
}