@charset "utf-8";


/* General Settings Common for All Devices (Desktop, Tablets, Smartphone)
-------------------------------------------------------------------------------------------------------------------------------------------*/
body {
	color: #444;	/* Website-Wide Character Color */	// Default (Too Bright, Not Easy to Read): #666;
	margin: 0px;
	padding: 0px;
	/* Changed font-family from Japanese fonts to Myanmar fonts for DZK by Kazuo 2021.01.16 */
	/* font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-family: Padauk; sans-serif; unicode;	// Myanmar Font Families: Tharlon; Khyay; "Myanmar Sans Pro"; Myanmar3; mm3web;
	font-size: 18px;	/* Character Size */	// Default: 15px;
	line-height: 1.5;	/* Line Spacing */	// Default: 2;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 5px;}		// Defaukt padding-bottom: 15px;
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}
/* Customized for DZK by Kazuo */
p.black {color: black;}
/* End of Cutomization */

/* Common Settings on Hyperlinks
---------------------------------------------------------------------------*/
a {
	color: #666;		/*  Link Text Color */
	transition: 0.5s;	/* Transition Time at the Time of Mouse Over */
}
a:hover {
	color: #0c97ac;		/* Entire Text Color at Mouse Over */
	text-decoration: none;	/* Link Underline Non-Display Option at Mouse Over (Delete this line if you want to display underline) */
}

/* Containers (Block Surrounding the Entire HP)
---------------------------------------------------------------------------*/
#container {
	max-width: 1200px;	/*サイトの最大幅*/
	padding: 0 3%;	/*上下、左右へのボックス内の余白*/
	margin: 0 auto;
}

/* Header
---------------------------------------------------------------------------*/
header {
	padding: 10px 5px;	/*上下、左右へのヘッダー内の余白*/	 // Default: 30px 20px;
}
/* Logo Image */
header #logo img {
	width: 300px;	/*画像幅*/	// Default: 300px;
}

/* Menu Bar at Top
---------------------------------------------------------------------------*/
/* Settings of Menu Bar Block */
#menubar {
	background: #0a7889;	/* Background Color */
	height: 40px;		/* Menu Height */	// Default: 40px; For 2-Line Menu Items: 80px
	border-radius: 6px;	/* Corner Round Radius */
	background: linear-gradient(#0c97ac, #0a7889);		/* Gradation */
	padding-left: 20px;	/* Left-Side Margin */
	-webkit-box-shadow: 0px 2px 5px #bebebe;	/* Settings of Shadow Width (Left, Right, Down), Shadow Color */
	box-shadow: 0px 2px 5px #bebebe;		/* Same as Above */
	margin-bottom: 10px;	// Default: 30px;
}
/* Settings of Items in Menu Bar */
#menubar li {
	float: left;	/* Float to Left */
	border-right: 1px solid rgba(255,255,255,0.3);	/* Right Boarder Line of Each Item, Line Width, Line Type, Color (RGB 3 Values, Transparency[%]) */
}
#menubar li a {
	text-decoration: none;display: block;
	line-height: 40px;	/* Line Height */
	color: #FFF;		/* Character Color */
	text-align: center;	/* Text Alignment, Center */
	padding: 0 10px;	/* Margin around Each Item, Above&Below, Left&Right */		// Default: 0 20px;
}
/* Settings of Mouse Over ON */
#menubar li a:hover {
	background: #0eb5ce;	/* Background Color at Mouse Over */
	color: #FFF;		/* Text Color  at Mouse Over */
}
/* Settings of Borderline for the Leftmost First Item in Menu */
#menubar li:first-child {
	border-left: 1px solid rgba(255,255,255,0.3);
}
/* Disable to Display Menu for Smartphonw */
#menubar-s {display: none;}
/* Disable to Display 3-Bar Icon */
#menubar_hdr {display: none;}

/* Contents (Block Surrounding main, sub, and footer)
---------------------------------------------------------------------------*/
#contents {
	clear: left;
}

/* Settings of Main Image (Placed at the Top of main)
---------------------------------------------------------------------------*/
#mainimg img {
	border-radius: 6px;	/* Radius for Rounding 4 Corners of Main Image */
	box-shadow: 1px 2px 5px rgba(0,0,0,0.3);	/* Shading Settings: Width Values toward Right and Dow, Blur Width, Color (RGB 3 Values, Transparency) */
	margin-bottom: 30px;	/* Bottom Margin (Space below Main Image) */
	width: 100%		/* Added to streatch the main image to the entire Web page */
}

/* Main Contents (1st Column)
---------------------------------------------------------------------------*/
#main {
	float: left;	/* Float Left */	/* Defaukt left; To switch 2 columns' positions, change main to right; and sub to left;*/
	width: 72%;	/* Width of Main Contents */	// Default Ratio of 2 Columns 72% vs 24% (4% space)
}
/* Settings when Using 1-Column Layout */
body.c1 #main {
	float: none;
	width: auto;
}
/* h2 Tag in Main Container */
#main h2 {
	clear: both;
	margin-bottom: 20px;	// Default: 20px;
	background: #0a7889;	/* Background Color (for Old Browsers) */
	background: linear-gradient(#0c97ac, #0a7889);	/* Gradation */
	border-radius: 6px;	/* Corner Rounding Radius */
	box-shadow: 0px 2px 5px #bebebe;	/* Settings of Shading, Toward Right, Toward down, Blur Width, Color */
	color: #FFF;	/* Character Color */
	padding: 5px 20px;	/* Margin Space Width, Above&Below, Left&Right */
}
#main h3 {
	clear: both;
	margin-bottom: 20px;	// Default: 20px;
	border-radius: 6px;	/* Corner Rounding Radius */
	background: linear-gradient(#fff, #eee);	/* Gradation */
	border: 1px solid #ccc;	/* Borderline Width, Type, Color */
	padding: 2px 20px;	/* Margin Space Width, Above&Below, Left&Right */
	/* h3 Customized as Follows by Kazuo */
	color: black;
	font-weight: bold;
	/* End of Customization */
}
/* Paragraph Tag p Settings in Main Contents */
#main p {
	padding: 0px 20px 15px;	/* Margin Space, Above, Left&Right, Down */
}
#main h2 + p,
#main h3 + p {
	margin-top: -10px;
}
#main section+section {
	margin-top: 50px;
}

/* Settings of Each Block in service.html
---------------------------------------------------------------------------*/
/* Settings of Each Block */
#main .list {
	position: relative;overflow: hidden;
	border: 1px solid #CCC;	/* Extrerial Frame Line Width, Type, Color */
	border-radius: 6px;		/*角丸のサイズ*/
	margin-bottom: 20px;
	background: linear-gradient(#FFF, #e3e3e3);			/* Gradation */
	box-shadow: 0px 2px 5px #CCC, 0px 0px 1px 1px #FFF inset;	/* Settings of Shading, Toward Right, Toward down, Blur Width, Color + Settings of Internal Shadow Toward Right, Down, Blur Width, Color */
	padding: 20px;	/* Margin Space inside Box */
}
#main .list a {
	overflow: hidden;display: block;text-decoration: none;
	margin: -20px;	/* Margin Space inside Box */
	padding: 20px;	/* White Space around Box */
}
/* Settings at Mouse Over ON */
#main .list a:hover {
	background: #ebdeab;	/* Box Color at Mouse Over ON */
}
/* Marking Symbol "→" Displayed when a Link is specified for Box */
#main .list a::before {
	content: "→";	/* Displayed Character (that can be changed to a Different Character, but Careful to Avoid a Device-Dependent Character */
	position: absolute;
	right: 20px;		/* Place the Character at This Distance from Box Right End */
	bottom: 20px;		/* Place the Chatacter at This Distance from the Box Bottom */
	background: #000;	/* Background Color (for Old Browsers) */
	background: rgba(0,0,0,0.5);	/*Background Color RGB 3 Values (Black 0,0,0), Transparency */
	color: #fff;		/* Character Color */
	border: 1px solid #fff;	/* Borderline Width, Type, Color */
	border-radius: 4px;	/* Corner Rounding Radius */
	width: 30px;		/* Width */
	line-height: 30px;	/* Height */
	text-align: center;
}
#main .list a:hover::before {
	background: #000;	/* Background Color of the Marking Symbol at Mouse Over ON */
}
/* h4 Settings inside Box */
#main .list h4 {
	font-size: 16px;
	border-bottom: 1px solid #CCC;	/* Bottom Borderline Width, Type, Color */
	border-left: 3px solid #0c97ac;	/* Left Borderline Width, Type, Color */
	margin-bottom: 10px;
	padding-left: 10px;
}
/* Image Settings inside Box */
#main .list figure img {
	float: left;	/* Float Left */
	width: 30%;	/* Image Width */
	background: #FFF;	/* Background Color of Area between Box Frame and Image */
	padding: 5px;	/* Space above Image with Background Color Set Above */
	border: 1px solid #CCC;	/* Borderline Width, Type, Color */
	margin-right: 20px;	/* Margin Space at Right Side of Image */
}
/* Paragraph Settings inside Box */
#main .list p {
	padding: 0px;
}

/* Sub-Contents (2nd Column)
---------------------------------------------------------------------------*/
#sub {
	float: right;	/* Float Right */	/* Defaukt right; To switch 2 columns' positions, change sub to left; and main to right;*/
	width: 24%;	/* Width of the 2nd Column */
}
/* Settings when Using 1-Column Layout */
body.c1 #sub {
	display: none;	/* Disable to Display "c1" part in Sub-Contents */
}
/* h2 Settings in Sub-Contents */
#sub h2 {
	border: 1px solid #CCC;	/* Borderline Width, Type, Color */
	border-radius: 6px 6px 0 0;	/* Corner Rounding Radius, Upper-Left, Upper-Right, Lower-Right, Lower-Left */
	text-align: center;
	padding: 5px 0px;
	background: #00e3e3;	/* Background Color (for Old Browsers) */	// Default: #e3e3e3;
	background: linear-gradient(#FFF, #99eeee);	/* Gradation */		// Default: linear-gradient(#FFF, #e3e3e3);
}
/* Paragraph Settings in Sub-Contents */
#sub p {
	padding: 0 10px;
}

/* Menu Settings in Sub-Contents
---------------------------------------------------------------------------*/
/* Settings of the Entire Menu Block */
#sub ul.submenu {
	margin-bottom: 1em;
}
/* Settings of Each Menu Item */
#sub ul.submenu li a {
	text-decoration: none;
	display: block;
	border-right: 1px solid #CCC;	/* Right Borderline Width, Type, Color */
	border-bottom: 1px solid #CCC;	/* Bottom Borderline Width, Type, Color */
	border-left: 1px solid #CCC;	/* Left Borderline Width, Type, Color */
	padding-left: 10px;
}
/* Settings at Mouse Over ON */
#sub ul.submenu li a:hover {
	background: #f0f0f0;
}

/* Footer Settings
---------------------------------------------------------------------------*/
footer {
	clear: both;
	text-align: center;
	padding-top: 30px;
}
footer a {
	text-decoration: none;
}
footer .pr {
	display: block;
	font-size: 80%;
}

/* Settings of "Updates & Announcements" Block in Top Page
---------------------------------------------------------------------------*/
/* Settings of the Entire Block */
#new dl {
	padding: 0 20px;
	margin-bottom: 20px;
}
/* Settings of Dates */
#new dt {
	float: left;
	width: 9em;		/* Width */
	letter-spacing: 0.1em;
}
/* Settings of Entries */
#new dd {
	padding-left: 9em;
	border-bottom: 1px solid #d2d2d2;	/* Bottom Borderline Width, Type, Color */
}

/* Table1
---------------------------------------------------------------------------*/
.ta1 {
	width: 100%;
	margin: 0 auto 20px;
}
.ta1, .ta1 td, .ta1 th{
	border: 1px solid #CCC;	/* Table Borderline Width, Type, Color */
	padding: 10px 15px;	/* Margin Size inside Box */
	word-break: break-all;	/* Break a Word at Any Position (Better to use this only when the table is narrow, e.g., due to narrow screen) */
}
/* Settings of Headings on the 1st Row */
.ta1 th.tamidashi{
	width: auto;
	text-align: left;
	background: #ffffff;	/* Background Color */	// Default: #e2e2e2;
}
/* Settings of Headings on the Left Column */
.ta1 th{
	width: 200px;		/* Width */		// Default: 150px;
	text-align: center;
	background: #ffffff;	/*Background Color*/	// Default: #f3f3f3;
}

/* Settings for FAQ Page (Used by CMS)
---------------------------------------------------------------------------*/
/* Entire Block */
.faq {
	padding: 0px 20px;	/* Margin Values for Above&Below and Left&Right */
}
/* Settings of Questions */
.faq dt {
	font-weight: bold;	/* Bold Font Style */
	color: #0c97ac;		/* Character Color */
	padding-top: 15px;
}
.faq dt a {
	color: #0c97ac;		/* Character Color */
}
/* Settings of Answers */
.faq dd {
	border-bottom: 1px solid #dbdbdb;	/* Bottom Borderline Width, Type, Color */
	overflow: hidden;
	padding-bottom: 15px;
}

/* input Button
---------------------------------------------------------------------------*/
#main input[type="submit"].btn,
#main input[type="button"].btn,
#main input[type="reset"].btn {
	padding: 5px 10px;
	border: 1px solid #ccc;
	font-size: 15px;
	border-radius: 3px;
	background: #fff;
}
/* Settings at Mouse Over ON */
#main input[type="submit"].btn:hover,
#main input[type="button"].btn:hover,
#main input[type="reset"].btn:hover {
	border: 1px solid #999;
}

/* Option Mark at the Box Right Bottom on the List Page (Site Map?)
(In case of using CMS, this is related to a pulldown menu of "Option 1" in the management page and optional selections in setup.php)
---------------------------------------------------------------------------*/
.option1 {
	font-size: 10px;
	color: #FFF;
	background: #F00;
	text-align: center;
	display: block;
	width: 120px;
	position: absolute;
	right: 0px;
	top: 0px;
	transform: rotate(45deg) translate(35px);
}
h2 span.option1 {
	width: auto;
	padding: 0px 5px;
	position: static;
	transform: none;
	display: inline-block;
}
.option2 {
	font-size: 10px;
	color: #FFF;
	background: #069;
	text-align: center;
	display: block;
	width: 120px;
	position: absolute;
	right: 0px;
	top: 0px;
	transform: rotate(45deg) translate(35px);
}
h2 span.option2 {
	width: auto;
	padding: 0px 5px;
	position: static;
	transform: none;
	display: inline-block;
}

/* Settings of the Button "↑" for Jumping to Top of the Page
---------------------------------------------------------------------------*/
@keyframes scroll {
0% {opacity: 0;}
100% {opacity: 1;}
}

body .nav-fix-pos-pagetop a {display: none;}
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 100;
	animation-name: scroll;		/* Name "scroll" of keyframe (specified above) for Animation */
	animation-duration: 1S;		/* Time of Executing Animation */
	animation-fill-mode: forwards;	/* Keeping to Display the Last Frame of Animation upon Completion of Animation */
	width: 50px;			/* Width */
	line-height: 50px;		/* Height */
	position: fixed;		/* Fixed Position */
	bottom: 40px;			/* Distance of the Bottom Edge of Button "↑" Layout from the Screen Bottom */	// Default: 50px;
	left: 2%;			/* Distance of the Right Edge of Button "↑" Layout from the Screen Right End */	// Default: right: 3%;
	background: #000;		/* Background Color (for Old Browsers) */
	background: rgba(0,0,0,0.6);	/* Background Color RGB 3 Values (Black 0,0,0), Transparency */
	color: #fff;			/* Character Color */
	border: 1px solid #fff;		/* Borderline Width, Type, Color */
}
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
	background: #999;	/* Background Color at Mouse Over ON */
}

/* NEW Icon in Top Page
---------------------------------------------------------------------------*/
.newicon {
	background: #F00;	/* Background Color */
	color: #FFF;		/* Character Color */
	font-size: 70%;		/* Character Font Size */
	line-height: 1.5;
	padding: 2px 5px;
	border-radius: 2px;
	margin: 0px 5px;
	vertical-align: text-top;
}

/* Miscellaneous
---------------------------------------------------------------------------*/
.look {background: #dcdcdc;}
.mb15,.mb1em {margin-bottom: 15px !important;}
.clear {clear: both;}
ul.disc {padding: 0em 25px 15px;list-style: disc;}
.color1, .color1 a {color: #0c97ac;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
img.fr {float: right;margin-left: 10px;margin-bottom: 10px;}
img.fl {float: left;margin-right: 10px;margin-bottom: 10px;}
.big1 {font-size: 20px;}
.mini1 {font-size: 11px;display: inline-block;line-height: 1.5;}
.sh {display: none;}


/* Addition: Floating Social Media Bar (Customization for ZDK by Kazuo)
---------------------------------------------------------------------------*/
.social-sharing {
	display: block;
	position: fixed;
	// text-align: center;	// Place Floating Bar at Left End instead of Center
	width: 100%;
	left: 5px;
	bottom: 0;
}
/* End Addition of Floating Social Media Bar ------------------------------*/



/* Settings Applied to Screen with Width <= 800 px
-------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

/* main, sub-contents
---------------------------------------------------------------------------*/
#main, #sub {
	float: none;
	width: auto;
}

/* Main Menu
---------------------------------------------------------------------------*/
/* Animation Settings (Assume Animation of 100 Frames, Specify Transparency from opacity 0% to Transparent 100% */
@keyframes menu1 {
0% {opacity: 0;}
100% {opacity: 1;}
}
/* Menu Block for Smartphone */
#menubar-s {
	display: block;
	overflow: hidden;
	position: absolute;
	top: 130px;	/* Location of Menu, Distance from the Top Screen Edge */	// Default: 90px;
	border-top: 1px solid #fff;		/* Borderline Width, Type, Color */
	width: 45%;	/* Width of Menu */	// Default: 94%;
	z-index: 10;
	animation-name: menu1;		/* Name of the keyframe Specified above */
	animation-duration: 0.5S;	/* Time of Playing Animation */
	animation-fill-mode: both;	/* Display the 1st Frame when Standing by, the Last Frame after Animation Completed */
}
/* Settings of Each Menu Item */
#menubar-s li a {
	display: block;text-decoration: none;
	padding: 5px 5px 5px 5px;	/* Space inside Menu Item, Above, Right, Below, Left */	// Default: 5px 10px 15px 20px;
	border-bottom: 1px solid #fff;	/* Bottom Borderline Width, Type, Color */
	background: #000;		/* Background Color */
	color: #fff;			/* Character Color */
	font-size: 14px;	// Default: 15px;
}
/* English Notation (Decorative Characters) */
#menubar-s li a span {
	display: block;
	font-size: 12px;	/* Character Font Size */
}
/* Disable to Display the Menu Bar for Desktop */
#menubar {
	display: none;
}

/* 3-Bar Icon Settings
---------------------------------------------------------------------------*/
/* 3-Bar Block */
#menubar_hdr {
	display: block;
	position: absolute;
	top: 10px;	/* Position (either Absolute or relative) of the 3-Bar Icon from the Screen Top Edge */		// Default: 20px;
	right: 5px;	/* Position (either Absolute or relative) of the 3-Bar Icon from the Screen Right Edge */	// Default: 3%;
	border: 1px solid #000;	/* Borderline Width, Type, Color */
}
/* Common Settings of the Icons */
#menubar_hdr.close,
#menubar_hdr.open {
	width: 30px;	/* Width */	// Default: 50px;
	height: 30px;	/* Height */	// Default: 50px;
}
/* Settings Specific to the 3-Bar Icon */
#menubar_hdr.close {
	background: #fff url(../images/icon_menu.png) no-repeat center top/30px;	//Default: 50px;
}
/* Settings Specific to the Closing Icon (X Mark) */
#menubar_hdr.open {
	background: #fff url(../images/icon_menu.png) no-repeat center bottom/30px;	//Default: 50px;
}

/* Others
---------------------------------------------------------------------------*/
body.s-n #sub,body.s-n #footermenu,.m-n {display: none;}
.sh {display:block;}
.pc {display:none;}

}


/* Settings of an Optional Button for Swiching Layout between Smartphone Mode (Default) and Desktop Mode
-------------------------------------------------------------------------------------------------------------------------------------------*/
/* Disabled on the DZK Website (because this switch of display modes messes Web pages up)
#viewport_sw a {
	display: block;
	text-align: center;
	padding: 3% 0;
	width: 100%;
	background: #000;
	color: #fff;
	font-size: 20px;	// Default: 14px;
	font-size: 4vw;
	position: fixed;	// Default: Enabled fixed;
	bottom: 0;
	z-index: 200;
}
*/



/* Settings for Screen Width <= 480px
-------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/* General Settings
---------------------------------------------------------------------------*/
body {
	font-size: 12px;	/* Character Font Size */
	line-height: 1.5;	/* Line Spacing */
}

/* Header
---------------------------------------------------------------------------*/
header {
	padding: 5px 0px;	/* Space inside Header, Above&Below, Left&Right */	// Default: 30px 0px;
}

/* Main Contents
---------------------------------------------------------------------------*/
#main h2 {
	font-size: 14px;
	padding: 10px;
}
#main h3 {
	font-size: 14px;
	padding: 6px 10px;
	/* h3 Added for Customization by Kazuo */
	color: black;
	font-weight: bold;
	/* End of Cutomization */
}
/* Paragraph Settings */
#main p {
	padding: 0px 10px 15px;	/* Space inside Paragraph, Above, Left&Right, Below */
}

/* Settings of Each Block in service.html
---------------------------------------------------------------------------*/
/* Each Box Settings */
#main .list {
	padding: 10px;	/* Space inside Box */
}
#main .list a {
	margin: -10px;	/* Margin Size inside Box */
	padding: 10px;	/* Space inside Box */
}
/* Marking Symbol "→" Displayed when a Link is specified for Box */
#main .list a::before {
	right: 10px;		/* Position of "→" from the Box Right Edge */
	bottom: 10px;		/* Position of "→" from the Box Bottom Edge */
}
/* h4 Settings in Box */
#main .list h4 {
	font-size: 12px;
}

/* Menu in Sub-Contents
---------------------------------------------------------------------------*/
/* Settings of Each Menu Item */
#sub ul.submenu li a {
	padding: 10px;
}

/* Block of "Updates & Announcements" in the Top Page
---------------------------------------------------------------------------*/
/* Settings of the Entire Block */
#new dl {
	padding-left: 10px;
	padding-right: 10px;
}

/* Table1（ta1）
---------------------------------------------------------------------------*/
/* ta1 Settings */
.ta1, .ta1 td, .ta1 th {
	padding: 5px;	/* Space inside Box */
}
/* Left Box in ta1 */
.ta1 th {
	width: 120px;	// Default 100px;
}

/* Others
---------------------------------------------------------------------------*/
.ws,.wl {width: 94%;}
.big1 {font-size: 16px;}
img.fr,img.fl {float: none;margin: 0;width: 100%;}

}



/* Settings for Screen Width <= 400px
-------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:400px){

/* Header
---------------------------------------------------------------------------*/
/* Logo Image */
header #logo img {
	width: 200px;	/* Image Width */
}

/* Added ta1 style settings for the DZK Website by Kazuo */
/* Table （ta1）
---------------------------------------------------------------------------*/
/* ta1 Settings */
.ta1, .ta1 td, .ta1 th {
	padding: 5px;	/* Space inside Box */
}
/* Left Box in ta1 */
.ta1 th {
	width: 110px;
}

}