@charset "utf-8";

/* =============================================================================
    Stlye
============================================================================= */

/* Common
----------------------------------------------- */
html {
  font-size: 10px;
}

body {
  min-width: 1020px;
  overflow: hidden;
  line-height: 1.6;
  letter-spacing: 1px;
  font-family: "メイリオ", "Meiryo", sans-serif;
  font-size: 1.5em;
}

a[href^="tel:"] {
  pointer-events: none;
  cursor: default;
  color: inherit;
  text-decoration: none;
}

.pcNone {
  display: none;
}

/* ------ clearfix ------ */
.clearfix::after { /* float release */
  content: "";
  display: block;
  height: 0;
  line-height: 0;
  clear: both;
}
.clearfix { display: inline-block; } /* float release for ie */
.clearfix { display: block; } /* cancel inline-block */


/* Header
----------------------------------------------- */
div#header {
  position: fixed;
  top: 0;
  min-width: 1020px;
  width: 100%;
  z-index: 10;
  padding: 5px 0 0;
  border-top: 2px #466f9f solid;
  background: #fff;
}

div#header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #466f9f;
}

div#header div.box {
  min-height: 70px;
  box-sizing: border-box;
  padding: 0 0 6px;
  border-bottom: 1px #466f9f solid;
}

div#header div.contents {
  position: relative;
  width: 1020px;
  overflow: hidden; /* float release */
  z-index: 1;
  margin: 0 auto;
}

h1#headerCompanyLogo,
p#headerCompanyLogo {
  float: left;
  line-height: 1;
  margin: 0 5px 0 0;
}

p#headerOfficeLogo {
  float: left;
  margin: 0 8px 0 0;
}

div#headerMap {
  float: left;
}

div#headerMap ul {
  overflow: hidden;
  line-height: 1;
  margin: 0 0 5px;
  font-size: 1.2rem;
}

div#headerMap ul li {
  float: left;
  margin: 0 5px 0 0;
  border-radius: 3px;
  background: #e6e9ed;
}

div#headerMap ul li a,
div#headerMap ul li span {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 105px;
  padding: 8px 0;
  border-radius: 3px;
  color: #1e1e24;
  text-align: center;
  text-decoration: none;
  background: #e6e9ed;
}

div#headerMap ul li a::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0 5px 0 0;
  border-bottom: 5px transparent solid;
  border-top: 5px transparent solid;
  border-left: 7px #1e1e24 solid;
}

div#headerMap ul li[lang="ja"] a {
  letter-spacing: 0;
}

/* ------ search => ------ */
div#headerMap form {
  box-sizing: border-box;
  width: 215px;
  border: 1px #d3d9e1 solid;
  border-radius: 3px;
}

div#headerMap form input {
  vertical-align: middle;
}

div#headerMap form input[name="q"] {
  box-sizing: border-box;
  width: 184px;
  padding: 2px;
  border: none;
  border-right: 1px #d3d9e1 dotted;
  font-size: 1.4rem;
}

div#headerMap form input[name="btnG"] {
  margin: 2px;
}

/* ------ <= search ------ */

ul#headerOffice {
  float: left;
  font-size: 1.2rem;
}

ul#headerOffice li {
  text-align: right;
}

p#headerContact {
  float: right;
  margin: 4px 0 0;
}

div#header > div.contents {
  display: table;
  position: relative;
  overflow: auto;
}

p#headerOfficeName,
div#header nav {
  display: table-cell;
}

p#headerOfficeName {
  vertical-align: middle;
  font-size: 1.4rem;
  letter-spacing: 0;
}

/* ------ headerNav ------ */
ul#headerNav {
  float: right;
}

ul#headerNav > li {
  position: relative;
  float: left;
}

ul#headerNav > li.off p.hover {
  margin: 0 0 -4px;
}

ul#headerNav > li.off ul {
  display: none;
  position: absolute;
  z-index: 10;
  border: 1px #8f9eb0 solid;
  border-bottom: none;
  background: #fff;
}

ul#headerNav > li.off ul li a {
  display: block;
  padding: 5px 10px;
  border-bottom: 1px #8f9eb0 solid;
  color: inherit;
  text-decoration: none;
  word-break: keep-all;
  white-space: nowrap;
}

ul#headerNav > li.off ul a:hover {
  background: #f3f3f3;
}

ul#headerNav > li.on {
  position: static;
}

ul#headerNav > li.on ul {
  display: block;
  position: absolute;
  left: 0;
  overflow: hidden; /* float release */
  background: #fff;
}

ul#headerNav > li.on ul li {
  float: left;
  height: 50px;
  overflow: hidden;
}

ul#headerNav > li.on ul li a {
  display: block;
  width: 255px;
  height: 50px;
  box-sizing: border-box;
  border-right: 1px #ccc solid;
  border-bottom: 1px #ccc solid;
}

ul#headerNav > li.on ul li:first-child a {
  border-left: 1px #ccc solid;
}

/* ------ product ------ */
ul#headerNav > li.on.product ul li a::before {
  display: block;
  width: 255px;
  height: 50px;
  background-position: -255px 0;
  background-repeat: no-repeat;
}

ul#headerNav > li.on.product ul li:nth-child(1) a::before {
  content: url(../image/product_nav_ceramics_off.svg);
  background-image: url(../image/product_nav_ceramics_on.svg); /* preload */
}

ul#headerNav > li.on.product ul li:nth-child(1):hover a::before,
ul#headerNav > li.on.product ul li.on:nth-child(1) a::before {
  content: url(../image/product_nav_ceramics_on.svg);
  background-image: url(../image/product_nav_ceramics_off.svg); /* preload */
}

ul#headerNav > li.on.product ul li:nth-child(2) a::before {
  content: url(../image/product_nav_heater_off.svg);
  background-image: url(../image/product_nav_heater_on.svg); /* preload */
}

ul#headerNav > li.on.product ul li:nth-child(2):hover a::before,
ul#headerNav > li.on.product ul li.on:nth-child(2) a::before {
  content: url(../image/product_nav_heater_on.svg);
  background-image: url(../image/product_nav_heater_off.svg); /* preload */
}

ul#headerNav > li.on.product ul li:nth-child(3) a::before {
  content: url(../image/product_nav_insulator_off.svg);
  background-image: url(../image/product_nav_insulator_on.svg); /* preload */
}

ul#headerNav > li.on.product ul li:nth-child(3):hover a::before,
ul#headerNav > li.on.product ul li.on:nth-child(3) a::before {
  content: url(../image/product_nav_insulator_on.svg);
  background-image: url(../image/product_nav_insulator_off.svg); /* preload */
}

ul#headerNav > li.on.product ul li:nth-child(4) a::before {
  content: url(../image/product_nav_setter_off.svg);
  background-image: url(../image/product_nav_setter_on.svg); /* preload */
}

ul#headerNav > li.on.product ul li:nth-child(4):hover a::before,
ul#headerNav > li.on.product ul li.on:nth-child(4) a::before {
  content: url(../image/product_nav_setter_on.svg);
  background-image: url(../image/product_nav_setter_off.svg); /* preload */
}
/*
ul#headerNav > li.on.product ul li:nth-child(5) a::before {
  content: url(../image/product_nav_townscape_off.svg);
  background-image: url(../image/product_nav_townscape_on.svg);
}

ul#headerNav > li.on.product ul li:nth-child(5):hover a::before,
ul#headerNav > li.on.product ul li.on:nth-child(5) a::before {
  content: url(../image/product_nav_townscape_on.svg);
  background-image: url(../image/product_nav_townscape_off.svg);
}
*/

/* Footer
----------------------------------------------- */
div#sitemap {
  margin-top: -90px;
}

div#footer {
  padding: 10px 0;
  border-top: 2px #466f9f solid;
  border-bottom: 5px #466f9f solid;
  color: #333;
  font-size: 1.3rem;
  background: #9bbce5;
}

div#footer > div.contents {
  position: relative;
  width: 1020px;
  margin: 0 auto;
}

div#footer a {
  color: #333;
  text-decoration: none;
}

div#footer a:hover {
  color: #e6e6e6;
  text-decoration: underline;
}

div#footer div.sitemap {
  overflow: hidden; /* float release */
  margin: 0 -20px 40px 0;
}

div#footer div.sitemap div.block {
  float: left;
  width: 25%;
  box-sizing: border-box;
  padding: 0 20px 0 0;
}

div#footer div.sitemap div.block h4 {
  margin: 1.6em 0 0;
}

div#footer div.sitemap div.block h3 + div.type h4 {
  margin: 0;
}

div#footer div.sitemap div.type h4 + ul {
  margin-bottom: 0;
}

div#footer div.sitemap h2 {
  font-size: 1.7rem;
}

div#footer div.sitemap h3::before {
  content: "\0025a0";
}

div#footer div.sitemap div.type {
  margin: 1em 0 0;
}

div#footer div.sitemap h3 + div.type,
div#footer div.sitemap div.type:first-child {
  margin: 0;
}

div#footer div.sitemap h4::before {
  content: "[";
}

div#footer div.sitemap h4::after {
  content: "]";
}

div#footer div.sitemap dl {
  margin: 0 0 1em;
}

div#footer div.sitemap dt::before {
  content: "\0030fb";
}

div#footer div.sitemap dd {
  margin: 0 0 0 1.1em;
}

div#footer div.sitemap ul {
  margin: 0 0 1em 1.1em;
}

div#footer div.sitemap dl + ul {
  margin-top: -1em;
}

div#footer div.sitemap ul ul {
  margin-bottom: 0;
}

div#footer div.access {
  position: relative;
}

ul#footerNav {
  overflow: hidden; /* float release */
  padding: 8px 0 0;
  border-top: 1px #466f9f solid;
}

ul#footerNav li {
  float: left;
  padding: 0 12px 0 0;
}

div#footer address {
  padding: 8px 0 0;
}

div#footer address p.companyName {
  font-size: 1.6rem;
}

div#footer address dl dt {
  margin: 1em 0 0;
}

div#footer address dl dt:first-child {
  margin-top: 0;
}

div#footer address dl dt::after {
  content: "\00ff1a";
}

div#footer address dl dd {
  margin: 0 0 0 9.5em;
}

p#footerContact {
  position: absolute;
  right: 0;
  bottom: 0;
}

p#copyright {
  position: absolute;
  top: 8px;
  right: 0;
}


/* Contents
----------------------------------------------- */
/* ------ breadcrumbs => ------ */
nav#breadcrumbs {
 background: #f8f8f8;
}

nav#breadcrumbs p {
  width: 1020px;
  margin: 130px auto 0;
  padding: 0.3em 0;
  font-size: 1.2rem;
}

body.subNav nav#breadcrumbs p {
  margin-top: 180px;
}

nav#breadcrumbs p a,
nav#breadcrumbs p span.parent {
  margin: 0 2px 0 0;
  padding: 2px 10px 0 0;
  color: #adadad;
  text-decoration: none;
  background: url(../image/icon_gt.svg) no-repeat right center;
}
/* ------ <= breadcrumbs ------ */

div.article {
  margin: 130px 0 0;
}

nav + article div.article {
  margin-top: 0;
}

h1#topImage {
  position: relative;
  height: 255px;
  overflow: hidden;
  text-indent: -101%;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

h1#topImage::before,
h1#topImage::after {
  content: "";
  display: block;
  position: absolute;
  width: 50%;
  height: 255px;
  top: 0;
  left: 0;
  z-index: -1;
}

h1#topImage::after {
  left: 50%;
}


h1.border,
h2.border {
  line-height: 1.2;
  margin: 0 0 5px;
  border-bottom: 2px #466f9f solid;
  font-size: 2.4rem;
}

h1.dot,
h2.dot {
  line-height: 1.2;
  margin: 0 0 8px;
  border-bottom: 2px #466f9f dotted;
  font-size: 2rem;
}

/* ------ ページ内リンクのヘッダ高さ吸収 ------ */
div.linkWrap {
  margin: -130px 0 0;
  padding: 130px 0 0;
}

body.subNav div.linkWrap {
  margin: -180px 0 0;
  padding: 180px 0 0;
}

/* ------ gotoTop ------ */
p#gotoTop {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 10;
}

/* ------ center button ------ */
p.centerButton {
  text-align: center;
}

/* ------ detailsButton => ------ */
p.detailsButton a,
dd.detailsButton a,
ul.detailsButton a {
  display: inline-block;
  line-height: 1;
  padding: 6px 30px 3px 50px;
  color: #fff;
  text-decoration: none;
  text-indent: -20px;
  background: #adadad;
}

p.detailsButton a:hover,
dd.detailsButton a:hover,
ul.detailsButton a:hover {
  background: #8c8c8c;
}

p.detailsButton a::before,
dd.detailsButton a::before,
ul.detailsButton a::before {
  content: "";
  display: inline-block;
  position: relative;
  top: -1px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 7px;
  height: 7px;
  margin: 0 10px 0 0;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
}
/* ------ <= detailsButton ------ */


/* Pages: Index
----------------------------------------------- */
/* ====== Slider ====== */
div#indexSlider img {
  width: 600px;
}

div.slider .slick-dots {
  line-height: 1;
  bottom: -30px;
}

div.slider .slick-dots li {
  width: 16px;
}

div.slider .slick-dots li button,
div.slider .slick-dots li button::before,
div.slider .slick-dots li.slick-active button::before {
  width: 12px;
  height: 12px;
}

div.slider .slick-dots li button::before {
  content: url(../../js/slick/btn_off.svg);
  line-height: 12px;
}

div.slider .slick-dots li.slick-active button::before {
  content: url(../../js/slick/btn_on.svg);
  line-height: 12px;
}

div#indexSlider .slick-prev,
div#indexSlider .slick-next {
  left: 50%;
  width: 36px;
  height: 36px;
  z-index: 1;
}

div#indexSlider .slick-prev {
  margin: 0 0 0 -492px;
}

div#indexSlider .slick-prev::before {
  content: url(../../js/slick/arrow_left.svg);
}

div#indexSlider .slick-next {
  margin: 0 0 0 456px;
}

div#indexSlider .slick-next::before {
  content: url(../../js/slick/arrow_right.svg);
}

/* ====== indexInformation ====== */
div.indexInformation {
  width: 1020px;
  overflow: hidden;
  margin: 0 auto 50px;
  padding: 20px 0 0;
}

div.indexInformation p.image {
  float: left;
}

div.indexInformation p.image img {
  width: 353px;
}

div.indexInformation div.info {
  margin: 0 0 0 370px;
}

div.indexInformation p.text {
  margin: 0 0 1em;
}

/* ====== introLink ====== */
div.introLink {
  border-top: 1px #ccd5de solid;
}

div.introLink ul {
  width: 1020px;
  overflow: hidden;
  margin: 0 auto;
}

div.introLink li {
  position: relative;
  float: left;
}

div.introLink li:hover {
  background: #edf1f2;
}

div.introLink li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 40px;
  margin: -20px 0 0;
  background: #ccd5de;
}

div.introLink li:first-child::before {
  content: none;
}

/* ====== contents ====== */
div#index div.linkWrap:nth-child(2n) > section {
  background: #edf1f2;
}

div#index div.introduction {
  position: relative;
  width: 1020px;
  overflow: hidden;
  margin: 0 auto;
  padding: 30px 0;
}

div#index div.introduction h2.title {
  margin: 0 0 10px;
  text-align: center;
}

div#index div.introduction h3 {
  margin: 0 0 10px;
  font-size: 2.2rem;
  text-align: center;
}

div#index div.introduction p.list {
  margin: 0 0 20px auto;
}

div#index div.introduction p.image {
  float: left;
}

div#index div.introduction p.image img {
  width: 300px;
}

div#index div.introduction ul.featureRow {
  overflow: hidden; /* float release */
  margin: 0 -10px 0 0;
}

div#index div.introduction ul.featureRow li {
  float: left;
  margin: 0 10px 0 0;
}

div#index div.introduction ul.featureRow dd.text,
div#index div.introduction ul.featureColumn dd.text {
  background: transparent;
}

div#index p.image + p.text {
  margin: 0 0 10px 320px;
}

/* ------ [Common] p.list ------ */
div#index p.list {
  display: table;
  font-size: 1.4rem;
}

div#index p.list a {
  position: relative;
  display: table-cell;
  line-height: 1.4;
  vertical-align: middle;
  padding: 2px 10px 2px 26px;
  color: #fff;
  text-decoration: none;
  background: #2b8aa5;
}

div#index p.list a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 5px;
  height: 5px;
  margin: -4px 0 0 8px;
  border-right: 2px #fff solid;
  border-top: 2px #fff solid;
}

div#index p.list a:hover {
  background: #6badc0;
}

div#index section p.list a {
  height: 2.6em;
}

div#index section p.list a::before {
  top: 1.5em;
}

/* ------ [Common] ul.featureColumn ------ */
div#index ul.featureColumn {
  margin: 0 0 0 310px;
}

div#index ul.featureColumn li {
  margin: 0 0 10px;
}

div#index ul.featureColumn a,
div#index ul.featureColumn p.text {
  display: table-cell;
  vertical-align: middle;
}

div#index ul.featureColumn a:hover {
  opacity: 0.7;
}

div#index ul.featureColumn p.text {
  padding: 0 0 0 20px;
}

div#index ul.featureColumn dl.details {
  display: block;
}

div#index ul.featureColumn dl.details dt,
div#index ul.featureColumn dl.details dd {
  display: table-cell;
  vertical-align: middle;
}

div#index ul.featureColumn dl.details dd {
  padding: 0 0 0 20px;
}

/* ------ ファインセラミックス ------ */
div#index div#ceramics p.image + ul.featureRow {
  margin: 0 0 10px 300px;
}

div#index div#ceramics p.image + ul.featureRow li {
  margin: 0 0 0 10px;
}

div#index div#ceramics ul.featureRow a:hover {
  opacity: 0.7;
}

div#index div#ceramics dl.list {
  margin: 0 0 0 310px;
  padding: 0 0 10px;
}

div#index div#ceramics dl.list dt {
  clear: left;
  display: table-cell;
  width: 230px;
  vertical-align: middle;
  box-sizing: border-box;
  padding: 2px 15px 1px;
  color: #fff;
  background: #6f9dd1;
}

div#index div#ceramics dl.list dd {
  display: table-cell;
  vertical-align: middle;
  padding: 0 0 0 10px;
}

div#index div#ceramics dl.list dd > ul {
  overflow: hidden; /* float release */
}

div#index div#ceramics dl.list dd > ul > li {
  float: left;
}

div#index div#ceramics dl.list dd > ul > li::before {
  content: "|";
  margin: 0 5px;
}

div#index div#ceramics dl.list dd > ul > li:first-child::before {
  content: none;
  margin: 0;
}

div#index div#ceramics dl.list a {
  color: inherit;
}

div#index div#ceramics dl.list a:hover {
  color: #808080;
}

div#index div#ceramics dl.list + p.centerButton {
  margin: 20px 0 30px;
}

div#index div#ceramics a.process {
  display: block;
  width: 206px;
  margin: 40px auto 0;
}

div#index div#ceramics a.process:hover {
  opacity: 0.7;
}

div#index div#ceramics a.process dl {
  border: 1px #466e9f solid;
  background: #fff;
}

div#index div#ceramics a.process dt {
  height: 77px;
  margin: 1px;
  text-align: center;
  border: 1px #466e9f solid;
  background: #466e9f;
}

div#index div#ceramics a.process dt::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 75px;
  vertical-align: middle;
}

div#index div#ceramics a.process dt img {
  vertical-align: middle;
}

div#index div#ceramics a.process dd {
  text-align: center;
}

div#index div#ceramics h3 + ul.featureRow {
  margin: 0 -9px 40px 0;
}

div#index div#ceramics h3 + ul.featureRow li {
  margin: 0 9px 0 0;
}

/* ====== 下部 ====== */
div#index > div.contents {
  width: 1020px;
  overflow: hidden; /* float release */
  margin: 0 auto;
  padding: 30px 0 0;
}

div#index > div.contents div.office {
  float: left;
}

div#index > div.contents h2.border {
  margin: 0 0 8px;
  padding: 0 0 0 5px;
  border-left: 5px #466e9f solid;
}

div#index > div.contents dl.office {
  border: 1px #466e9f solid;
}

div#index > div.contents dl.office dt {
  width: 206px;
  height: 77px;
  margin: 1px;
  text-align: center;
  border: 1px #466e9f solid;
  background: #466e9f;
}

div#index > div.contents dl.office dt::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 75px;
  vertical-align: middle;
}

div#index > div.contents dl.office dt img {
  vertical-align: middle;
}

div#index > div.contents dl.office dd {
  margin: -80px 0 0 212px;
  text-align: center;
}

div#index > div.contents div.office a:hover {
  opacity: 0.7;
}

/* ------ news ------ */
div#index > div.contents dl.news {
  background: #edf1f2;
}

div#indexNews {
  position: relative;
  margin: 0 0 0 440px;
}

div#indexNews p.list {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
}

div#indexNews dl {
  height: 160px;
  overflow: auto;
  padding: 15px 20px 0;
}

div#indexNews dl dt {
  margin: 0 0 -1.6em;
}

div#indexNews dl dd {
  margin: 0 0 1em 8em;
}


/* Pages: Fine Ceramics
----------------------------------------------- */
div#ceramics h1#topImage {
  background-image: url(../image/ceramics_top.jpg);
}

div#ceramics h1#topImage::before {
  background: #476ec9;
}

div#ceramics > div.contents {
  position: relative;
}

/* ====== type & product ====== */
div#ceramics div#type h2,
div#ceramics div#product h2 {
  position: absolute;
  top: 0;
  left: 50%;
  width: 510px;
  height: 65px;
  overflow: hidden;
}

div#ceramics div#type h2::before,
div#ceramics div#product h2::before {
  display: block;
  background-position: 0 -65px;
  background-repeat: no-repeat;
}

div#ceramics div#type div.product,
div#ceramics div#product div.product {
  padding: 40px 0;
}

div#ceramics div#type.on div.contents,
div#ceramics div#product.on dl,
div#ceramics div#product.on ul {
  display: block;
}

div#ceramics div#type div.contents,
div#ceramics div#product dl,
div#ceramics div#product ul {
  display: none;
}

/* ====== type ====== */
div#ceramics div#type h2 {
  margin: 0 0 0 -510px;
}

div#ceramics div#type h2::before {
  content: url(../image/ceramics_index_type_title_off.svg);
  background-image: url(../image/ceramics_index_type_title_on.svg);
}

div#ceramics div#type.on h2::before {
  content: url(../image/ceramics_index_type_title_on.svg);
  background-image: url(../image/ceramics_index_type_title_off.svg);
}

div#ceramics div#type div.contents:nth-child(2n+1) {
  background: #edf1f2;
}

div#ceramics div#type div.contents div.product {
  width: 1020px;
  margin: 0 auto;
}

div#ceramics div#type h3 {
  margin: 0 0 20px;
  text-align: center;
}

div#ceramics div#type h2 + div.contents {
  padding-top: 105px;
}

/* ------ Lov TEC ------ */
div#ceramics div#type div#lovtec {
  position: relative;
  overflow: hidden;
}

div#ceramics div#type div#lovtec p.image {
  float: left;
}

div#ceramics div#type div#lovtec p.image img {
  width: 300px;
}

div#ceramics div#type div#lovtec dl {
  margin: 0 0 0 320px;
}

div#ceramics div#type div#lovtec dl dt {
  font-size: 2rem;
  letter-spacing: 0.2em;
}

div#ceramics div#type div#lovtec span.initials {
  text-decoration: underline;
}

div#ceramics div#type div#lovtec dd.info {
  margin: -5px 0 10px;
}

div#ceramics div#type div#lovtec p.detailsButton {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0 0 20px;
}

/* ------ nexcera ------ */
div#ceramics div#type div#nexcera {
  position: relative;
  overflow: hidden;
}

div#ceramics div#type div#nexcera p.image {
  float: left;
}

div#ceramics div#type div#nexcera p.image img {
  width: 243px;
}

div#ceramics div#type div#nexcera dl {
  margin: 0 0 0 265px;
}

div#ceramics div#type div#nexcera dl dt {
  margin: 0 0 5px;
  font-size: 2rem;
  letter-spacing: 0.2em;
}

div#ceramics div#type div#nexcera p.detailsButton {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0 0 20px;
}

/* ------ nonOxide, oxide, machinable ------ */
div#ceramics div#nonOxide div.rowParent,
div#ceramics div#oxide div.rowParent,
div#ceramics div#machinable div.rowParent {
  position: relative;
  padding: 0 0 20px;
  text-align: center;
}

div#ceramics div#nonOxide dl.row,
div#ceramics div#oxide dl.row,
div#ceramics div#machinable dl.row {
  display: inline-block;
  width: 243px;
  vertical-align: top;
  padding: 0 8px;
}

div#ceramics div#nonOxide dl:first-child,
div#ceramics div#oxide dl:first-child,
div#ceramics div#machinable dl:first-child {
  padding-left: 0;
}

div#ceramics div#nonOxide dl:last-child,
div#ceramics div#oxide dl:last-child,
div#ceramics div#machinable dl:last-child {
  padding-right: 0;
}

div#ceramics div#nonOxide dl.row > dt,
div#ceramics div#oxide dl.row > dt {
  margin: 0 0 10px;
}

div#ceramics div#nonOxide dl.row img,
div#ceramics div#oxide dl.row img,
div#ceramics div#machinable dl.row img {
  width: 243px;
}

div#ceramics div#nonOxide dl.row > dd.title,
div#ceramics div#oxide dl.row > dd.title,
div#ceramics div#machinable dl.row > dd.title {
  font-size: 2rem;
}

div#ceramics div#nonOxide dl.row > dd.text,
div#ceramics div#oxide dl.row > dd.text,
div#ceramics div#machinable dl.row > dd.text {
  margin: 0 0 20px;
  text-align: left;
}

div#ceramics div#nonOxide dl.row > dd.detailsButton,
div#ceramics div#oxide dl.row > dd.detailsButton {
  position: absolute;
  bottom: 0;
  margin: 0 0 0 11px;
}

/* ------ machinable */
div#ceramics div#machinable dl.row {
  width: 502px;
}

div#ceramics div#machinable dl.row > dt {
  float: left;
  margin: 0 10px 15px 0;
}

div#ceramics div#machinable dl.row > dd.title {
  text-align: left;
}

div#ceramics div#machinable dl.row > dd.lineup {
  clear: left;
  margin: 0 0 20px;
}

div#ceramics div#machinable dl.row > dd.lineup dt {
  font-size: 1.8rem;
  text-align: left;
}

div#ceramics div#machinable dl.row > dd.lineup dt::before {
  content: "\0025a0";
  margin: 0 2px 0 0;
}

div#ceramics div#machinable dl.row > dd.lineup dd {
  display: inline;
}

div#ceramics div#machinable dl.row > dd.lineup dd::before {
  content: "|";
  margin: 0 0.5em;
  color: #8c8c8c;
}

div#ceramics div#machinable dl.row > dd.lineup dt + dd::before,
div#ceramics div#machinable dl.row:first-child > dd.lineup dd:nth-child(5)::before,
div#ceramics div#machinable dl.row + dl.row > dd.lineup dd:nth-child(6)::before {
  content: none;
  margin: 0;
}

div#ceramics div#machinable dl.row:first-child > dd.lineup dd:nth-child(4)::after,
div#ceramics div#machinable dl.row + dl.row > dd.lineup dd:nth-child(5)::after {
  content: "\a";
  white-space: pre;
}

div#ceramics div#type a.process {
  display: block;
  width: 422px;
  margin: 30px auto 0;
}

div#ceramics div#type a.process dl {
  border: 1px #466e9f solid;
}

div#ceramics div#type a.process dl dt {
  width: 206px;
  height: 77px;
  margin: 1px;
  text-align: center;
  border: 1px #466e9f solid;
  background: #466e9f;
}

div#ceramics div#type a.process dl dt::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 75px;
  vertical-align: middle;
}

div#ceramics div#type a.process dl dt img {
  vertical-align: middle;
}

div#ceramics div#type a.process dl dd {
  margin: -80px 0 0 212px;
  text-align: center;
}

div#ceramics div#type a.process:hover {
  opacity: 0.7;
}


/* ====== product ====== */
div#ceramics div#product h2::before {
  content: url(../image/ceramics_index_product_title_off.svg);
  background-image: url(../image/ceramics_index_product_title_on.svg);
}

div#ceramics div#product.on h2::before {
  content: url(../image/ceramics_index_product_title_on.svg);
  background-image: url(../image/ceramics_index_product_title_off.svg);
}

div#ceramics div#product dl.list {
  width: 1020px;
  margin: 0 auto 20px;
}

div#ceramics div#product h2 + dl.list {
  padding: 105px 0 0;
}

div#ceramics div#product dl.list dt,
div#ceramics div#product dl.list dd {
  display: table-cell;
  vertical-align: middle;
}

div#ceramics div#product dl.list dt {
  padding: 0 10px 0 0;
}

div#ceramics div#product dl.list dt a:hover {
  opacity: 0.7;
}

div#ceramics div#product ul.image {
  width: 1020px;
  overflow: hidden; /* float release */
  margin: 30px auto 0;
}

div#ceramics div#product ul.image li {
  float: left;
  margin: 0 0 0 12px;
  font-size: 1.8rem;
  text-align: center;
}

div#ceramics div#product ul.image li:first-child {
  margin-left: 0;
}

div#ceramics div#product ul.image img {
  width: 243px;
  margin: 0 0 10px;
}


/* Pages: Heater, Insulator
----------------------------------------------- */
/* ====== heater, insulator ====== */
div#heater div.contents section:nth-child(2n),
div#insulator div.contents section:nth-child(2n) {
  background: #edf1f2;
}

div#heater div.contents div.product,
div#insulator div.contents div.product {
  position: relative;
  width: 1020px;
  min-height: 207px;
  margin: 0 auto;
  padding: 40px 0;
}

div#heater div.contents div.product h2,
div#insulator div.contents div.product h2 {
  margin: 0 0 5px 320px;
  font-size: 2rem;
}

div#heater div.contents div.product p.image,
div#insulator div.contents div.product p.image {
  position: absolute;
  top: 0;
  left: 0;
  margin: 40px 0 0;
}

div#heater div.contents div.product p.image img,
div#insulator div.contents div.product p.image img {
  width: 300px;
}

div#heater div.contents div.product p.text,
div#insulator div.contents div.product p.text,
div#insulator div.contents div.product ul.mark {
  margin: 0 0 0 320px;
}

div#heater div.contents div.product p.detailsButton,
div#insulator div.contents div.product p.detailsButton {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 0 40px;
}

/* ====== heater ====== */
div#heater h1#topImage {
  background-image: url(../image/heater_top.jpg);
}

div#heater h1#topImage::before {
  background: #d42800;
}

div#heater h1#topImage::after {
  background: #ff826e;
}

/* ====== insulator ====== */
div#insulator h1#topImage {
  background-image: url(../image/insulator_top.jpg);
}

div#insulator h1#topImage::before {
  background: #242e63;
}

div#insulator h1#topImage::after {
  background: #232d62;
}


/* Pages: details
----------------------------------------------- */
/* ====== Layout ====== */
div#details {
  width: 1020px;
  margin: 0 auto;
  padding: 10px 0 0;
}

div#details > div#sideNav {
  display: table-cell;
  width: 205px;
  padding: 3px 0 0;
  border-right: 1px #dadfe5 solid;
}

div#details > div.contents {
  display: table-cell;
  width: 804px;
  padding: 3px 0 0 10px;
}

/* ====== sideNav ====== */
div#details div#sideNav nav > p.title {
  line-height: 1;
  margin: 0 0 12px;
  padding: 3px 0 0 10px;
  border-left: 3px #f12626 solid;
  font-size: 2.2rem;;
}

/* ------ p.title => ------ */
div#details div#sideNav div.wrap p.title,
div#details div#sideNav div.wrap p.on {
  margin: 0 0 1px;
}

div#details div#sideNav div.wrap p.title a,
div#details div#sideNav div.wrap p.title span,
div#details div#sideNav div.wrap p.on a,
div#details div#sideNav div.wrap p.on span {
  position: relative;
  display: block;
  padding: 0 2px 0 16px;
  color: inherit;
  font-size: 1.6rem;
  text-decoration: none;
}

div#details div#sideNav div.wrap p.title a::before,
div#details div#sideNav div.wrap p.title span::before,
div#details div#sideNav div.wrap p.on a::before,
div#details div#sideNav div.wrap p.on span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 8px;
  height: 8px;
  margin: -6px 20px 0 0;
  border-right: 2px solid #2b8aa5;
  border-top: 2px solid #2b8aa5;
  border-radius: 1px;
}

div#details div#sideNav div.wrap p.title a:hover,
div#details div#sideNav div.wrap p.on a {
  color: #fff;
  background: #2b8aa5;
}

div#details div#sideNav div.wrap p.title a:hover::before,
div#details div#sideNav div.wrap p.on a::before {
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
}
/* ------ <= p.title ------ */

div#details div#sideNav ul {
  margin: 0 0 30px 10px;
}

div#details div#sideNav li {
  margin: 0 0 1px;
  font-size: 1.4rem;
}

div#details div#sideNav ul a {
  display: block;
  padding: 0 5px 0 1em;
  color: inherit;
  text-decoration: none;
  text-indent: -1em;
}

div#details div#sideNav ul a:hover,
div#details div#sideNav ul li.on a {
  color: #fff;
  background: #2b8aa5;
}

div#details div#sideNav ul a::before {
  content: "\0030fb";
  width: 1em;
}

/* ====== contents ====== */
div#details > div.contents h1 {
  line-height: 1.2;
  margin: 0 0 5px;
  border-bottom: 2px #466f9f solid;
  font-size: 2.4rem;
}

div#details > div.contents h2 {
  line-height: 1.2;
  margin: 0 0 8px;
  border-bottom: 2px #466f9f dotted;
  font-size: 2rem;
}


/* ------ ellipse title => ------ */
div#details > div.contents h2.ellipse {
  position: relative;
  width: 350px;
  line-height: 1;
  padding: 0.6em 0 0.4em 15px;
  border: none;
  border-radius: 30px;
  color: #fff;
  font-size: 1.6rem;
  background: #ff4d4d;
}

div#details > div.contents h2.ellipse::before {
  content: "";
  display: block;
  position: absolute;
  top: 1px;
  right: 1px;
  width: 170px;
  height: 1.85em;
  border-radius: 28px;
  background: #fff;
}

div#details > div.contents h2.ellipse sup {
  display: inline-block;
  margin: -1em 0 0;
}

div#details > div.contents h2.ellipse > span {
  position: absolute;
  left: 178px;
  color: #000;
}
/* ------ <= ellipse title ------ */

div#details > div.contents h3.belt {
  display: table;
  box-sizing: border-box;
  min-width: 268px;
  line-height: 1;
  margin: 0 0 5px;
  padding: 6px 20px 4px;
  color: #fff;
  text-align: center;
  background: #2b8aa5;
}

div#details > div.contents h3.diamond {
  font-size: 1.8rem;
}

div#details > div.contents h3.diamond::before {
  content: "\0025c6";
}

div#details > div.contents h4.circle {
  line-height: 1.2;
  margin: 0 0 5px;
  border-bottom: 1px #2b8aa5 solid;
  font-size: 1.6rem;
}

div#details > div.contents h4.circle::before {
  content: "\0025cf";
}

div#details > div.contents h5.ellipse {
  display: table;
  line-height: 1.4;
  margin: 0 0 15px;
  padding: 6px 30px 4px;
  border-radius: 48% / 50%;
  box-shadow: 1px 1px 2px 0 #ccc;
  font-size: 1.6rem;
}

div#details > div.contents h5.ellipse.yellow {
  background: #ffd800;
}

div#details > div.contents h5.ellipse.blue {
  color: #fff;
  background: #466e9f;
}

div#details > div.contents p.topImage img {
  width: 804px;
}

/* ------ information ------ */
div#details > div.contents div.information {
  margin: 5px 0 30px;
}

div#details > div.contents div.information p.text {
  margin: 0 0 10px;
}

div#details > div.contents p.information {
  margin: 5px 0 30px;
}

/* ------ div.material ------ */
div#details > div.contents div.material {
  overflow: hidden; /* float release */
  margin: 0 0 30px;
}

div#details > div.contents div.material p.text {
  margin: 0 0 20px;
}

div#details > div.contents div.material p.image {
  float: right;
}

div#details > div.contents div.material ol.number > li {
  margin: 0 0 0 1em;
  text-indent: -1em;
}

div#details > div.contents div.material ol.number p,
div#details > div.contents div.material ol.number dt,
div#details > div.contents div.material ol.number dd {
  text-indent: 0;
}

/* ------ div.product ------ */
div#details > div.contents div.product {
  overflow: hidden; /* float release */
  margin: 0 0 30px;
}

div#details > div.contents div.product p.image {
  float: left;
}

div#details > div.contents div.product p.text {
  margin: 0 0 10px 260px;
}

/* ------ div.half => ------ */
div#details > div.contents div.half {
  float: left;
  width: 50%;
  margin: 0 0 30px;
}
/* ------ <= div.half ------ */

div#details > div.contents dl.feature dt::before {
  content: "\0025c6";
  margin: 0 2px 0 0;
  color: #e81a1a;
}

div#details > div.contents dl.feature dd {
  margin: 0 0 10px 2em;
}

div#details > div.contents dl.imageLeft {
  float: left;
  margin: 0 0 30px;
  text-align: center;
}

div#details > div.contents dl.imageRight {
  float: right;
  margin: 0 0 30px;
  text-align: center;
}

div#details > div.contents dl.image {
  margin: 0 0 30px;
  text-align: center;
}

/* ------ ul.imageDouble ------ */
div#details > div.contents ul.imageDouble {
  overflow: hidden; /* float release */
  margin: 0 0 30px;
}

div#details > div.contents ul.imageDouble li {
  float: right;
}

div#details > div.contents ul.imageDouble li:first-child {
  float: left;
}

/* ------ ul.mark ------ */
div#details > div.contents ul.mark li {
  margin: 0 0 0 1em;
  text-indent: -1em;
}

/* ------ ul.diamond ------ */
div#details > div.contents ul.diamond {
  margin: 0 0 30px;
}

div#details > div.contents ul.diamond li {
  margin: 0 0 0 1em;
  text-indent: -1em;
}

div#details > div.contents ul.diamond li::before {
  content: "\0025c6";
}

/* ------ physicality table ------ */
div#details > div.contents table.physicality,
div#details > div.contents table.physicality th,
div#details > div.contents table.physicality td {
  border: 1px #000 solid;
}

div#details > div.contents table.physicality {
  width: 100%;
  table-layout: fixed;
}

div#details > div.contents table.physicality th,
div#details > div.contents table.physicality td {
  padding: 2px 5px 1px;
}

div#details > div.contents table.physicality tr.em th:not([rowspan]),
div#details > div.contents table.physicality tr.em td {
  background: #e0f4f7;
}

div#details > div.contents table.physicality th {
  font-weight: normal;
  background: #ccedff;
}

div#details > div.contents table.physicality thead th:first-child,
div#details > div.contents table.physicality tbody th {
  text-align: left;
}

div#details > div.contents table.physicality tr.noUnit th:first-child {
  border-right: none;
}

div#details > div.contents table.physicality tr.noUnit th:first-child + th {
  border-left: none;
}

div#details > div.contents table.physicality td {
  text-align: center;
}

div#details > div.contents table.physicality td.long {
  font-size: 1.3rem;
}

div#details > div.contents div.mbTable {
  display: none;
}

/* ------ table.spec ------ */
div#details > div.contents table.spec th,
div#details > div.contents table.spec td {
  padding: 2px 5px 0;
  border: 1px #000 solid;
}

div#details > div.contents table.spec th {
  font-weight: normal;
  background: #ccedff;
}

div#details > div.contents table.spec thead th:first-child,
div#details > div.contents table.spec tbody th {
  text-align: left;
}

/* ------ table.lineup ------ */
div#details > div.contents table.lineup th,
div#details > div.contents table.lineup td {
  padding: 2px 5px 1px;
  border: 1px #000 solid;
}

div#details > div.contents table.lineup th {
  font-weight: normal;
  background: #ccedff;
}

div#details > div.contents table.lineup tbody th {
  text-align: left;
}

div#details > div.contents table.lineup td {
  text-align: center;
}

/* ====== [Page] LovTEC ====== */
div#details div#lovtec div.chatch {
  margin: 0 0 10px;
}

div#details div#lovtec div.chatch p {
  line-height: 1.2;
}

div#details div#lovtec div.chatch p.title {
  font-weight: bold;
}

div#details div#lovtec div.chatch p.info {
  font-size: 1.3rem;
}

div#details div#lovtec div.chatch p.info span.initials {
  text-decoration: underline;
}

div#details div#lovtec ul.imageDouble {
  margin: 0 20px 30px;
  text-align: center;
}

div#details div#lovtec table.physicality {
  width: auto;
}

div#details div#lovtec div.product p.text {
  margin-left: 0;
}

div#details div#lovtec div.product table.physicality {
  margin: 0 auto 5px;
}

div#details div#lovtec div.product ul.mark {
  margin: 0 0 0 62px;
}

div#details div#lovtec img[src$="ceramics_lovtec_image.jpg"] {
  width: 350px;
}

div#details div#lovtec img[src$="ceramics_lovtec_graph_reflection.jpg"] {
  width: 370px;
}

div#details div#lovtec img[src$="ceramics_lovtec_graph_transmission.jpg"] {
  width: 345px;
}

div#details div#lovtec img[src$="ceramics_lovtec_baseball_matte.jpg"] {
  width: 325px;
}

div#details div#lovtec img[src$="ceramics_lovtec_baseball_luster.jpg"] {
  width: 325px;
}

/* ====== [Page] NEXCERA ====== */
div#details div#nexcera h2 + p.image {
  float: none;
  margin: 0 0 20px;
}

div#details div#nexcera p.introduction {
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 5px 8px;
  border: 1px solid #466e9f;
  border-radius: 3px;
  text-align: center;
  background: #f2f9ff;
}

div#details div#nexcera ul.detailsButton li {
  margin: 0 0 10px 90px;
}

div#details div#nexcera div.material div.half:first-child {
  box-sizing: border-box;
  padding-right: 20px;
}

div#details div#nexcera table.physicality {
  font-size: 1.4rem;
}

div#details div#nexcera table.physicality th:first-child {
  width: 7em;
}

div#details div#nexcera table.physicality span.notes {
  font-size: 1.2rem;
}

/* ====== [Page] Sialon, SiC, B4C, AlN ====== */
div#details div#sialon h1,
div#details div#sic h1,
div#details div#b4c h1,
div#details div#aln h1 {
  margin: 0 0 20px;
}

div#details div#sialon ol.number dd {
  margin: 0 0 0 1em;
}

div#details div#sialon p.image img,
div#details div#sic p.image img,
div#details div#b4c p.image img,
div#details div#aln p.image img {
  width: 300px;
}

div#details div#sialon ul.imageDouble img[src$="ceramics_sialon_table_alpha.jpg"],
div#details div#sialon ul.imageDouble img[src$="ceramics_sialon_table_E.jpg"] {
  width: 370px;
}

div#details div#sialon table.physicality,
div#details div#aln table.physicality,
div#details div#sic table.physicality,
div#details div#b4c table.physicality {
  margin: 0 auto;
}

div#details div#sialon p.attention + p.detailsButton,
div#details div#aln p.attention + p.detailsButton {
  margin-top: 20px;
}

div#details div#sic p.attention,
div#details div#b4c p.attention {
  margin: 0 0 20px;
  text-align: center;
}

div#details div#sialon table.physicality td,
div#details div#aln table.physicality td {
  width: 6em;
}

div#details div#sic table.physicality,
div#details div#b4c table.physicality {
  width: auto;
  table-layout: auto;
}

div#details div#sic table.physicality th,
div#details div#sic table.physicality td,
div#details div#b4c table.physicality th,
div#details div#b4c table.physicality td {
  width: 9em;
}

div#details div#sialon p.detailsButton,
div#details div#sic p.detailsButton,
div#details div#b4c p.detailsButton,
div#details div#aln p.detailsButton {
  text-align: center;
}

/* ====== [Page] Process ====== */
div#details div#process ol.process {
  margin: 20px 0 0 15px;
}

div#details div#process ol.process > li {
  overflow: hidden; /* float release */
  min-height: 280px;
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 0 0 35px;
  background: url(../image/quality_process_arrow.svg) no-repeat 30px bottom;
}

div#details div#process ol.process > li:last-child {
  margin: 0;
  padding: 0;
  background: none;
}

div#details div#process dl {
  background: #fff;
}

div#details div#process dl dt {
  position: relative;
  display: inline-block;
  width: 14em;
  margin: 0 0 5px;
  color: #fff;
  text-align: center;
  background: #466f9f;
}

div#details div#process dl dt::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 1.6em;
  background: #fff;
}

div#details div#process dl dd {
  background: #fff;
}

div#details div#process dl dt + dd {
  padding: 0 0 10px;
}

div#details div#process dl dd.example {
  float: left;
  padding: 0 0 10px;
}

div#details div#process dl li::before {
  content: "\0030fb";
}

div#details div#process dl dd.image {
  float: left;
  margin: 0 0 0 320px;
}

div#details div#process dl dd.image + dd.image {
  margin-left: 22px;
}

div#details div#process dl dd.image.three {
  margin-left: 30px;
}

div#details div#process dl dd.image img[src$="quality_process_spraydryer.jpg"] {
  width: 174px;
}

div#details div#process dl dd.image img[src$="quality_process_cip.jpg"] {
  width: 175px;
}

div#details div#process dl dd.image img[src$="quality_process_shape.jpg"] {
  width: 239px;
}

div#details div#process dl dd.image img[src$="quality_process_atmosphere.jpg"] {
  width: 223px;
}

div#details div#process dl dd.image img[src$="quality_process_airAtmosphere.jpg"] {
  width: 223px;
}

div#details div#process dl dd.image img[src$="quality_process_surfaceGrinding.jpg"] {
  width: 145px;
}

div#details div#process dl dd.image img[src$="quality_process_machiningCenter.jpg"] {
  width: 145px;
}

div#details div#process dl dd.image img[src$="quality_process_lappingMachine.jpg"] {
  width: 145px;
}

div#details div#process dl dd.image img[src$="quality_process_laserInterferometer.jpg"] {
  width: 145px;
}

div#details div#process dl dd.image img[src$="quality_process_straightnessMeasuringInstrument.jpg"] {
  width: 145px;
}

div#details div#process dl dd.image img[src$="quality_process_cmm.jpg"] {
  width: 145px;
}

/* ====== [Page] Engineering Ceramics ====== */
div#details div#engineeringCeramics p.image img {
  width: 243px;
}

div#details div#engineeringCeramics p.detailsButton {
  margin-top: 20px;
  text-align: center;
}

/* ====== [Page] Maseraito ====== */
div#details div#maseraito p.detailsButton {
  margin-top: 20px;
  text-align: center;
}

/* ====== [Page] Machinable Ceramics ====== */
div#details div#machinable table.physicality {
  font-size: 1.4rem;
}

div#details div#machinable table.physicality thead th:nth-child(1),
div#details div#machinable table.physicality tbody th:nth-child(1) {
  width: 7em;
}

div#details div#machinable table.physicality thead th:nth-child(2),
div#details div#machinable table.physicality tbody th:nth-child(2) {
  width: 5.5em;
  font-size: 1.3rem;
}

div#details div#machinable table.physicality th,
div#details div#machinable table.physicality td {
  padding: 2px 3px 1px;
}

div#details div#machinable ul.attention {
  overflow: hidden; /* float release */
}

div#details div#machinable ul.attention li {
  float: left;
  padding: 0 1em 0 0;
}

div#details div#machinable p.detailsButton {
  margin-top: 20px;
  text-align: center;
}

/* ====== [Page] Standard ====== */
div#details div#standard img[src$="ceramics_standard_holeplate.jpg"] {
  width: 283px;
}

div#details div#standard img[src$="ceramics_standard_stepgage.jpg"] {
  width: 195px;
}

div#details div#standard img[src$="ceramics_standard_stand.jpg"] {
  width: 300px;
}

div#details div#standard img[src$="ceramics_standard_gear.jpg"] {
  width: 300px;
}

div#details div#standard img[src$="ceramics_standard_holestep01.jpg"],
div#details div#standard img[src$="ceramics_standard_holestep02.jpg"] {
  width: 300px;
}

div#details div#standard img[src$="ceramics_standard_tool.jpg"] {
  width: 300px;
}

div#details div#standard div.table {
  display: table;
  width: 100%;
}

div#details div#standard table.physicality {
  float: right;
  width: 460px;
}

div#details div#standard table.physicality td {
  text-align: left;
}

div#details div#standard p.stepgage + table.physicality {
  table-layout: auto;
}

div#details div#standard p.stepgage + table.physicality tbody th {
  width: 8em;
}

div#details div#standard dl.imageBox {
  float: left;
  width: 50%;
  margin: 0 0 30px;
  text-align: center;
}

div#details div#standard dl.holestep {
  clear: both;
}

div#details div#standard dl.holestep dt {
  width: 50%;
  float: left;
}

div#details div#standard dl.holestep dd {
  clear: both;
}

div#details div#standard dl.tool {
  width: 50%;
}

div#details div#standard ul.mark {
  margin: 0 0 20px;
}

div#details div#standard p.detailsButton {
  text-align: center;
}


/* ====== [Page] Mirror ====== */
/* ------ ol.flow1 ------ */
div#details div#mirror ol.flow1 {
  position: relative;
  overflow: hidden; /* float release */
  margin: 0 0 20px;
  padding: 51px 0 30px;
}

div#details div#mirror ol.flow1 li {
  float: left;
  font-size: 1.3rem;
  text-align: center;
}

div#details div#mirror ol.flow1 li:first-child {
  margin-right: 30px;
}

div#details div#mirror ol.flow1 li.process {
  position: absolute;
  top: 0;
  left: 75px;
  width: 200px;
  height: 46px;
  overflow: hidden;
}

div#details div#mirror ol.flow1 li.process::before {
  content: url(../image/ceramics_mirror_flow1_processing01.svg);
  display: block;
}

div#details div#mirror ol.flow1 li.result {
  margin-right: 30px;
}

div#details div#mirror ol.flow1 li.result::after {
  content: url(../image/ceramics_mirror_arrow_curve.svg);
  position: absolute;
  top: 42px;
  left: 292px;
}

div#details div#mirror ol.flow1 img[src$="ceramics_mirror_flow1_image01.jpg"],
div#details div#mirror ol.flow1 img[src$="ceramics_mirror_flow1_image02.jpg"] {
  width: 160px;
}

div#details div#mirror ol.flow1 img[src$="ceramics_mirror_flow1_data01.jpg"],
div#details div#mirror ol.flow1 img[src$="ceramics_mirror_flow1_data02.jpg"] {
  width: 208px;
}
/* ------ ol.flow2 ------ */
div#details div#mirror ol.flow2 {
  position: relative;
  overflow: hidden; /* float release */
  margin: 20px 0 0;
}

div#details div#mirror ol.flow2 li {
  float: left;
  margin: 10px 0 0;
  font-size: 1.3rem;
  text-align: center;
}

div#details div#mirror ol.flow2 li.process {
  overflow: hidden;
  width: 48px;
  height: 40px;
  margin: 82px 10px 0;
}

div#details div#mirror ol.flow2 li.process::before {
  content: url(../image/ceramics_mirror_flow2_processing01.svg);
  display: block;
}

div#details div#mirror ol.flow2 li.result {
  position: relative;
  margin: 0 0 0 30px;
  padding: 10px;
  border: 1px #ccc solid;
  background: #e6e6e6;
}

div#details div#mirror ol.flow2 li.result::after {
  content: url(../image/ceramics_mirror_border.svg);
  position: absolute;
  top: 84px;
  right: 5px;
}

div#details div#mirror ol.flow2 img[src$="ceramics_mirror_flow2_image01.jpg"],
div#details div#mirror ol.flow2 img[src$="ceramics_mirror_flow2_image02.jpg"] {
  width: 195px;
}

div#details div#mirror ol.flow2 img[src$="ceramics_mirror_flow2_image03.jpg"] {
  width: 190px;
  margin: 0 98px 0 0;
}

/* ------ stability ------ */
div#details div#mirror div.stability div.half {
  width: 330px;
  margin: 0 0 10px;
}

div#details div#mirror div.stability ol.data {
  float: right;
}

div#details div#mirror div.stability ol.data li {
  text-align: right;
}

div#details div#mirror div.stability ol.data li:first-child {
  margin: 0 0 10px;
  padding: 0 0 34px;
  background: url(../image/ceramics_mirror_arrow_down.svg) no-repeat center bottom;
}

div#details div#mirror div.stability p.sample {
  text-align: center;
}

div#details div#mirror div.stability p.value {
  clear: both;
  width: 400px;
  box-sizing: border-box;
  margin: 20px auto;
  padding: 5px 10px 3px;
  border: 1px #ccc solid;
  color: #f00;
  background: #deebf7;
}

div#details div#mirror div.stability p.result {
  width: 590px;
  margin: 0 auto 20px;
  font-size: 1.8rem;
}

div#details div#mirror div.stability p.result::before {
  content: url(../image/ceramics_mirror_arrow_right.svg);
  display: inline-block;
  height: 40px;
  vertical-align: middle;
}

div#details div#mirror div.stability p.detailsButton {
  text-align: right;
}

div#details div#mirror div.stability img[src$="ceramics_mirror_result_image.jpg"] {
  width: 300px;
}

div#details div#mirror div.stability img[src$="ceramics_mirror_result_data_before.jpg"],
div#details div#mirror div.stability img[src$="ceramics_mirror_result_data_after.jpg"] {
  width: 440px;
}


/* ====== [Page] Electrostatic Chuck ====== */
div#details div#electrostaticChuck p.information {
  margin-bottom: 10px;
}

div#details div#electrostaticChuck p.image {
  margin: 0 0 30px;
  text-align: center;
}

div#details div#electrostaticChuck p.image img {
  width: 550px;
}

div#details div#electrostaticChuck table.physicality {
  width: auto;
  margin: 0 auto;
  table-layout: auto;
}

div#details div#electrostaticChuck table.physicality tbody th {
  width: 8em;
}

div#details div#electrostaticChuck p.attention {
  text-align: right;
}


/* ====== [Page] AdsorptionChuck Chuck ====== */
div#details div#adsorptionChuck p.image {
  text-align: center;
}

div#details div#adsorptionChuck p.image img {
  width: 300px;
}

div#details div#adsorptionChuck div.product p.text {
  margin-left: 320px;
}

div#details div#adsorptionChuck div.product table.physicality {
  float: left;
  width: 350px;
  margin: 0;
  table-layout: auto;
}

div#details div#adsorptionChuck div.product table.physicality td {
  width: 10em;
}

div#details div#adsorptionChuck div.product p.attention {
  clear: both;
  margin-bottom: 20px;
}

div#details div#adsorptionChuck div.product ul.mark {
  margin: 0 0 0 310px;
}

div#details div#adsorptionChuck div.product table.physicality + ul.mark {
  margin: 0 0 0 360px;
}

div#details div#adsorptionChuck div.product ul.mark.space > li {
  margin-bottom: 1em;
}

div#details div#adsorptionChuck div.product ul.mark.space > li.noMark {
  text-indent: 0;
}


/* ====== [Page] Probe Card ====== */
div#details div#probecard p.imageNotes {
  font-size: 1.3rem;
  text-align: right;
}

div#details div#probecard ul.diamond {
  overflow: hidden; /* float: release */
}

div#details div#probecard ul.diamond li {
  float: left;
  padding: 0 0 0 1em;
}

div#details div#probecard div.half table.physicality {
  width: 190px;
}

div#details div#probecard p.image {
  text-align: center;
}

div#details div#probecard p.image img {
  width: 300px;
}


/* ====== [Page] Air Stage ====== */
div#details div#airStage > p.image {
  float: right;
  margin: 0 0 20px;
}

div#details div#airStage p.image img {
  width: 300px;
}

div#details div#airStage div.product {
  clear: both;
}

div#details div#airStage ul.image li {
  float: left;
  width: 50%;
  margin: 0 0 20px;
  text-align: center;
}

div#details div#airStage ul.image img[src$="ceramics_airStage_preload.jpg"] {
  width: auto;
  height: 225px;
}


div#details div#airStage table.physicality {
  clear: both;
  width: 520px;
}


/* ====== [Page] Ultrasonic Alignment ====== */
div#details div#ultrasonicAlignment div.list {
  display: table;
  width: 100%;
  margin: 0 0 30px;
}

div#details div#ultrasonicAlignment div.list dl {
  display: table-cell;
  width: 33%;
}

div#details div#ultrasonicAlignment div.list dl dt {
  line-height: 1;
  margin: 0 10px 5px;
  padding: 6px 0 4px;
  color: #fff;
  text-align: center;
  background: #2b8aa5;
}

div#details div#ultrasonicAlignment div.list dl dd {
  overflow: hidden; /* float release */
  margin: 0 10px;
}

div#details div#ultrasonicAlignment div.list dl dd span {
  float: right;
}

div#details div#ultrasonicAlignment table.physicality.impedance thead th {
  text-align: center;
}

div#details div#ultrasonicAlignment table.physicality.impedance thead tr:first-child th:first-child {
  text-align: left;
}


/* ====== [Page] WDS ====== */
div#details div#wds div.information em {
  font-weight: bold;
  text-decoration: underline;
}

div#details div#wds div.characteristic ol.number {
  float: left;
  width: 550px;
}

div#details div#wds div.characteristic ol.number > li {
  margin: 0 0 10px;
}

div#details div#wds div.characteristic ol.number dd {
  margin: 0 0 0 1em;
}

div#details div#wds div.characteristic p.image {
  float: right;
}

div#details div#wds div.material.characteristic p.image img {
  width: 235px;
}

div#details div#wds p.centerImage {
  text-align: center;
}

div#details div#wds p.centerImage img {
  width: 400px;
}

div#details div#wds div.material table.physicality {
  width: 550px;
}

div#details div#wds div.material table.physicality thead th:nth-child(2),
div#details div#wds div.material table.physicality thead th:nth-child(3),
div#details div#wds div.material table.physicality tbody th {
  width: 2.5em;
}

div#details div#wds div.material table.physicality thead th:nth-child(3) {
  width: 3.5em;
}

div#details div#wds div.material table.physicality thead th:nth-child(1),
div#details div#wds div.material table.physicality tbody th:nth-child(1) {
  width: 7em;
}

div#details div#wds div.material table.physicality th,
div#details div#wds div.material table.physicality td {
  padding: 2px 4px 1px;
}

div#details div#wds div.material table.physicality.main {
  font-size: 1.3rem;
}

div#details div#wds div.material table.physicality.main thead th:nth-child(2),
div#details div#wds div.material table.physicality.main tbody th:nth-child(2) {
  width: 5.5em;
}

div#details div#wds div.material table.physicality.main thead th:nth-child(3),
div#details div#wds div.material table.physicality.main tbody th:nth-child(3) {
  width: 3.2em;
}

div#details div#wds div.material table.physicality.main th,
div#details div#wds div.material table.physicality.main td {
  padding: 2px 2px 1px;
}

div#details div#wds div.material p.image {
  text-align: center;
}

div#details div#wds div.material p.image img {
  width: 243px;
}


/* ====== [Page] InsulatingRing ====== */
div#details div#insulatingRing div.information {
  overflow: hidden; /* float release */
}

div#details div#insulatingRing p.image {
  float: right;
  margin: 0 0 0 20px;
}

div#details div#insulatingRing p.image img {
  width: 300px;
}

div#details div#insulatingRing table.physicality thead th:first-child,
div#details div#insulatingRing table.physicality tbody th {
  width: 6em;
}

div#details div#insulatingRing table.physicality.product {
  margin-top: -15px;
}

div#details div#insulatingRing table.physicality.product thead th:nth-child(1),
div#details div#insulatingRing table.physicality.product tbody th:first-child {
  width: 7em;
}

div#details div#insulatingRing table.physicality.product thead th:nth-child(2),
div#details div#insulatingRing table.physicality.product tbody th {
  width: 4em;
}

div#details div#insulatingRing table.physicality ul {
  overflow: hidden; /* float release */
  text-align: left;
}

div#details div#insulatingRing table.physicality li {
  float: left;
  margin: 0 0 0 1em;
}


/* ====== [Page] Mica Heater ====== */
div#details div#micaHeater h1#productName span {
  margin: 0 0 0 2em;
}

div#details div#micaHeater div.information {
  overflow: hidden; /* float release */
}

div#details div#micaHeater div.information p.text {
  float: left;
  width: 480px;
}

div#details div#micaHeater div.information p.image {
  float: right;
}

div#details div#micaHeater div.information p.image img {
  width: 300px;
}

div#details div#micaHeater div.material p.image {
  float: left;
}

div#details div#micaHeater div.material p.image img {
  width: 330px;
}

div#details div#micaHeater div.material table.physicality {
  width: 450px;
  margin: 0 0 0 350px;
  table-layout: auto;
}

div#details div#micaHeater div.material table.physicality th[colspan] {
  text-align: center;
}

div#details div#micaHeater div.material table.physicality th:not([colspan]) {
  width: 9em;
  background: #f2f9ff;
}

div#details div#micaHeater dl.feature.product dt::after {
  content: ":";
}


/* ====== [Page] AlN HotPlate ====== */
div#details div#alnHotPlate div.information {
  overflow: hidden; /* float release */
}

div#details div#alnHotPlate div.information p.text {
  float: left;
  width: 480px;
}

div#details div#alnHotPlate div.information p.image {
  float: right;
}

div#details div#alnHotPlate div.information p.image img {
  width: 300px;
}

div#details div#alnHotPlate div.product p.image img {
  width: 365px;
}

div#details div#alnHotPlate div.product div.half {
  float: none;
  margin: 0 0 0 385px;
}

div#details div#alnHotPlate div.product div.half table.physicality {
  width: 370px;
  margin: 0 0 20px;
}

div#details div#alnHotPlate div.material div.half {
  width: 584px;
}

div#details div#alnHotPlate div.material p.image img {
  width: 200px;
}


/* ====== [Page] HotPlate ====== */
div#details div#hotPlate div.information {
  overflow: hidden; /* float release */
}

div#details div#hotPlate div.information p.image {
  float: right;
}

div#details div#hotPlate div.information p.image img {
  width: 300px;
}

div#details div#hotPlate div.information p.text {
  margin-right: 310px;
}

div#details div#hotPlate div.material dl.feature {
  margin-bottom: 30px;
}

div#details div#hotPlate div.material div.half p.image {
  margin: 0 20px 0 0;
}


/* ====== [Page] Jacket Heater ====== */
div#details div#jacketHeater div.information {
  overflow: hidden; /* float release */
}

div#details div#jacketHeater div.information p.image {
  float: right;
}

div#details div#jacketHeater div.information p.image img {
  width: 300px;
}

div#details div#jacketHeater div.information p.text {
  margin-right: 310px;
}

div#details div#jacketHeater div.feature ol.feature {
  float: left;
  width: 535px;
}

div#details div#jacketHeater div.feature ol.feature > li {
  overflow: hidden; /* float release */
  margin: 0 0 10px;
}

div#details div#jacketHeater div.feature ol.feature ul.mark {
  margin: 0 0 5px 1em;
}

div#details div#jacketHeater div.feature ol.feature p.text {
  margin: 0 0 0 1em;
}

div#details div#jacketHeater div.feature ol.feature ul.mark + p.image {
  float: none;
  margin: 0 0 0 1em;
}

div#details div#jacketHeater img[src$="ceramics_jacketHeater_feature.jpg"] {
  width: 320px;
}

div#details div#jacketHeater div.feature ul.notes {
  padding: 168px 0 16px 570px;
  font-size: 1.3rem;
  background: url(../image/ceramics_jacketHeater_feature_back.jpg) no-repeat 380px 50px;
  background-size: 322px auto;
}

div#details div#jacketHeater div.product div.structure {
  margin: 0 0 0 460px;
}

div#details div#jacketHeater div.product div.structure h3.belt,
div#details div#jacketHeater div.product div.structure table.physicality {
  width: 100%;
}

div#details div#jacketHeater div.product div.structure table.physicality th {
  width: 5.5em;
}

div#details div#jacketHeater div.product div.structure table.physicality td.uniform {
  padding: 2px 0 1px 30px;
  text-align: left;
}

div#details div#jacketHeater div.material p.positionImage {
  margin: 10px 0 0;
  text-align: center;
}

div#details div#jacketHeater img[src$="ceramics_jacketHeater_measurementPosition.jpg"] {
  width: 344px;
}

div#details div#jacketHeater div.material p.attention {
  clear: both;
}

div#details div#jacketHeater ol.list {
  margin: 10px 0 20px;
}

div#details div#jacketHeater ol.list p.text {
  margin: 0 0 10px 1em;
}

div#details div#jacketHeater ol.list ul.notes li {
  margin: 0 0 0 1em;
}


div#details div#jacketHeater ul.list,
div#details div#jacketHeater h4.circle + ul.mark {
  margin: 0 0 20px;
}

div#details div#jacketHeater div.info {
  overflow: hidden; /* float release */
  margin: 0 0 20px;
}

div#details div#jacketHeater div.info p.text {
  float: left;
  width: 610px;
}

div#details div#jacketHeater div.introBox {
  display: table;
  width: 100%;
}

div#details div#jacketHeater div.introBox div.intro {
  display: table-cell;
  width: 33%;
}

div#details div#jacketHeater div.introBox div.intro p.image {
  float: none;
}

div#details div#jacketHeater div.introBox div.intro p.notes {
  margin: 0 15px 0 0;
}

div#details div#jacketHeater div.introBox div.intro p.image {
  margin: 0 15px 0 0;
  text-align: center;
}

div#details div#jacketHeater div.introBox div.intro ol.point {
  margin: 0 20px 0 0;
}

div#details div#jacketHeater div.introBox div.intro ol.point li {
  position: relative;
  margin: 0 0 28px;
  padding: 3px 10px 2px;
  line-height: 1.4;
  border: 1px #000 solid;
  box-shadow: 0 0 0 1px #fff inset;
  color: #f31717;
  text-align: center;
  background: #e7e7e7;
}

div#details div#jacketHeater div.introBox div.intro ol.point li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  margin: -24px 0 0 -15px;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 18px solid #f31717;
}

div#details div#jacketHeater div.introBox div.intro ol.point li:first-child::before {
  content: none;
}

div#details div#jacketHeater div.introBox div.intro ol.point + p.notes {
  margin: 0 20px 0 0;
  text-align: right;
}

div#details div#jacketHeater div.introBox ol.mark li {
  margin: 0 0 0 1.5em;
  text-indent: -1.5em;
}

div#details div#jacketHeater div.example {
  overflow: hidden; /* float release */
}

div#details div#jacketHeater div.example ol.importation {
  overflow: hidden; /* float release */
  float: left;
}

div#details div#jacketHeater div.example ol.importation li {
  position: relative;
  float: left;
  margin: 0 0 0 35px;
  text-align: center;
}

div#details div#jacketHeater div.example ol.importation li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 0;
  margin: -8px 0 0 -26px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 18px solid #f31717;
}

div#details div#jacketHeater div.example ol.importation li:first-child {
  margin-left: 0;
}

div#details div#jacketHeater div.example ol.importation li:first-child::before {
  content: none;
}

div#details div#jacketHeater div.example ol.example {
  margin: 0 0 0 350px;
}

div#details div#jacketHeater div.example ol.example li {
  box-sizing: border-box;
  width: 320px;
  margin: 0 0 10px;
  padding: 5px 8px;
  border: 1px #466e9f solid;
  background: #f2f9ff;
}

div#details div#jacketHeater div.example ol.example p.title {
  text-decoration: underline;
}

div#details div#jacketHeater div.example ol.example p.text {
  margin: 0 0 0 1em;
}

div#details div#jacketHeater div.example ol.example + p.notes {
  margin: -5px 0 0 350px;
}

div#details div#jacketHeater div.jacket div.box {
  float: left;
  width: 650px;
  background: url(../image/ceramics_jacketHeater_jacketbox_back.jpg) no-repeat right 0;
  background-size: 220px auto;
}

div#details div#jacketHeater div.jacket dl.ellipse dt {
  display: table;
  width: 170px;
  line-height: 1.4;
  margin: 0 0 -1.7em;
  padding: 6px 0 4px;
  border-radius: 48% / 50%;
  box-shadow: 1px 1px 2px 0px #ccc;
  color: #fff;
  font-size: 1.6rem;
  text-align: center;
  background: #ff7271;
}

div#details div#jacketHeater div.jacket dl.ellipse dd {
  margin: -2.5em 0 20px 178px;
  width: 250px;
  line-height: 1.4;
}

div#details div#jacketHeater div.jacket dl.ellipse dt.double + dd {
  margin-top: -3.1em;
  margin-bottom: 30px;
}

div#details div#jacketHeater div.jacket p.notes {
  margin: 0 0 0 208px;
  font-size: 1.3rem;
}

div#details div#jacketHeater div.jacket ol.example {
  float: right;
}

div#details div#jacketHeater div.jacket ol.example li {
  position: relative;
  margin: 0 0 35px;
}

div#details div#jacketHeater div.jacket ol.example li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  margin: -25px 0 0 -15px;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 18px solid #466e9f;
}

div#details div#jacketHeater div.jacket ol.example li:first-child::before {
  content: none;
}

div#details div#jacketHeater img[src$="ceramics_jacketHeater_option.jpg"] {
  width: 385px;
}

div#details div#jacketHeater img[src$="ceramics_jacketHeater_hotn2.jpg"] {
  width: 180px;
}

div#details div#jacketHeater img[src$="ceramics_jacketHeater_venturi.jpg"] {
  width: 224px;
}

div#details div#jacketHeater img[src$="ceramics_jacketHeater_installation.jpg"] {
  width: 226px;
}

div#details div#jacketHeater img[src$="ceramics_jacketHeater_exampleBefore.jpg"],
div#details div#jacketHeater img[src$="ceramics_jacketHeater_exampleAfter.jpg"] {
  width: 88px;
}

div#details div#jacketHeater img[src$="ceramics_jacketHeater_jacketBefore.jpg"],
div#details div#jacketHeater img[src$="ceramics_jacketHeater_jacketAfter.jpg"] {
  width: 125px;
}


/* ====== [Page] Setter ====== */
div#details div#setter h1 span {
  position: relative;
  top: -5px;
  margin: 0 20px 0 0;
  padding: 5px 10px 4px;
  color: #fff;
  font-size: 1.5rem;
  background: #002060;
}

div#details div#setter p.information {
  margin: 20px 0;
  font-size: 2.4rem;
  text-align: center;
}

div#details div#setter div.platect {
  overflow: hidden; /* float release */
}

div#details div#setter div.platect > p.text {
  margin: 0 0 10px;
}
div#details div#setter div.platect > p.image {
  float: left;
}

div#details div#setter div.platect div.box {
  margin: 0 0 20px 410px;
}

div#details div#setter div.platect div.box p.image {
  width: 240px;
  margin: 0 auto 10px;
  font-size: 1.3rem;
  font-weight: bold;
}

div#details div#setter div.platect div.element {
  position: relative;
  overflow: hidden; /* float release */
  margin: 0 0 30px;
  padding: 15px 20px;
  border: 1px #fe6464 solid;
  border-radius: 14px;
  box-shadow: 0 0 0 1px #fff inset;
  background: #ffe6e7;
}

div#details div#setter div.platect div.element h3 {
  margin: 0 0 15px;
}

div#details div#setter div.platect div.element p.image {
  float: left;
}

div#details div#setter div.platect div.element p.rightImage {
  position: absolute;
  top: 0;
  right: 0;
  margin: 15px 80px 0 0;
}

div#details div#setter div.platect div.element p.text {
  margin: 135px 0 0 400px;
}

div#details div#setter div.material p.image {
  margin-bottom: 10px;
}

div#details div#setter div.material p.attention {
  clear: both;
}

div#details div#setter div.material ul.attention {
  overflow: hidden;
}

div#details div#setter div.material ul.attention li {
  float: left;
  margin: 0 0 0 1em;
}

div#details div#setter tr.remarks td {
  font-size: 1.3rem;
}

div#details div#setter th.rotate span {
  display: block;
  transform: rotate(-90deg);
}


div#details div#setter img[src$="ceramics_setter_image.jpg"] {
  width: 400px;
}

div#details div#setter img[src$="ceramics_setter_ceramicsCondenser.jpg"] {
  width: 240px;
}

div#details div#setter img[src$="ceramics_setter_element_image.png"] {
  width: 387px;
}

div#details div#setter img[src$="ceramics_setter_element_material.jpg"] {
  width: 250px;
}

div#details div#setter img[src$="ceramics_setter_spraying_image.jpg"] {
  width: 340px;
}


/* ====== [Page] Office ====== */
div#details div#office div.map {
  position: relative;
  height: 710px;
  background: url(../image/quality_office.svg) no-repeat;
}

div#details div#office dl {
  line-height: 1.4;
  position: absolute;
  font-size: 1.2rem;
}

div#details div#office dl dt {
  font-weight: bold;
}

div#details div#office dl dd {
  margin: 0 0 0 1em;
}

div#details div#office dl.office {
  color: #0068b7;
}

div#details div#office dl#tokyo {
  top: 408px;
  left: 536px;
}

div#details div#office dl#osaka {
  top: 530px;
  left: 464px;
}

div#details div#office dl#kyusyu {
  top: 244px;
  left: 60px;
  width: 258px;
}

div#details div#office dl#kokusai {
  top: 134px;
  left: 60px;
  width: 258px;
}

div#details div#office dl#fine {
  top: 352px;
  left: 60px;;
  width: 258px;
}

div#details div#office dl#ariake {
  top: 644px;
  left: 144px;
  width: 300px;
}

div#details div#office dl#dannetu {
  top: 628px;
  left: 464px;
}

div#details div#office dl#denzai {
  top: 252px;
  left: 350px;
  text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}

div#details div#office ul.type li {
  font-size: 1.2rem;
  text-align: right;
}

div#details div#office ul.type li.office {
  color: #0068b7;
}

div#details div#office img[src$="quality_office_link_ariake.jpg"] {
  width: 233px;
  margin: 2px 0 0;
}


/* Pages: Contact
----------------------------------------------- */
/* ------ index ------ */
div#contact h1#topImage {
  height: 200px;
  background-image: url(../image/header_officeLogo.svg);
  background-position: center 30px;
}

div#contact > div.contents {
  width: 1020px;
  margin: 50px auto 0;
}

div#contact > div.contents ul.list li {
  margin: 0 0 30px;
  text-align: center;
}

div#contact > div.contents ul.list li a {
  display: inline-block;
  width: 600px;
  padding: 0.3em 0 0.3em 2em;
  border: 1px #ffb400 solid;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #fff inset;
  color: inherit;
  font-size: 1.8rem;
  text-align: left;
  text-decoration: none;
  background: #fc0;
}

div#contact > div.contents ul.list li a::before {
  content: "";
  display: inline-block;
  position: relative;
  top: -2px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 6px;
  height: 6px;
  margin: 0 10px 0 0;
  border-right: 2px solid #000;
  border-top: 2px solid #000;
}

div#contact > div.contents ul.list li a:hover {
  opacity: 0.7;
}

/* ------ page ------ */
div.article > div#contact {
  width: 1020px;
  margin: 0 auto;
}

div#contact > h1.border,
div#contact > h2.border {
  width: 1020px;
  margin: 20px auto 8px;
}

div#contact p.information {
  margin: 0 0 1em;
}

div#contact p.caution,
div#contact span.caution {
  color: #f00;
  font-weight: bold;
}

div#contact label {
  cursor: pointer;
}

div#contact ul.error li,
div#contact p.caution {
  position: relative;
  padding: 0 0 0 14px;
  color: #f00;
}

div#contact > div.contents > p.text {
  padding: 20px 0;
}

div#contact ul.error > li:before,
div#contact p.caution:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  margin: 0.4em 0 0 1px;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  border-left: 7px solid #f00;
}

div#contact dl.form {
  margin: 40px 0 20px;
  border-top: 1px #466e9f solid;
}

div#contact dl.form dt {
  margin: 1em 0 -1.5em 1em;
  line-height: 1.4;
}

div#contact dl.form dd {
  min-height: 1.6em;
  padding: 0 0 0.6em 13em;
  border-bottom: 1px #466e9f solid;
}

div#contact dl.form dt span[lang="en"] {
  font-size: 1.3rem;
}

div#contact input[type="text"],
div#contact textarea {
  width: 100%;
  box-sizing: border-box;
  margin: -4px 0 2px;
  padding: 2px;
}

div#contact input#postcode {
  width: 6em;
}

div#contact input#tel {
  width: 12em;
}

div#contact textarea {
  height: 8em;
}

div#contact input[type="radio"],
div#contact input[type="checkbox"] {
  position: relative;
  top: 1px;
  margin: 0 4px 0 0;
}

div#contact dl.form span.caution:after {
  content: "\005165\00529b\005fc5\009808"; /* 入力必須 */
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  visibility: hidden;
}

div#contact ul.button {
  text-align: center;
}

div#contact ul.button > li {
  display: inline-block;
  margin: 0 10px;
}

div#contact ul.virticalButton {
  margin: 20px 0 0;
}

div#contact ul.virticalButton li {
  margin: 0 0 10px;
  text-align: center;
}


/* Pages: Use
----------------------------------------------- */
div#use > div.contents {
  width: 1020px;
  margin: 20px auto 0;
}

div#use h1 {
  margin-bottom: 20px;
}

div#use h3 {
  position: relative;
  margin: 0 0 5px;
  border-bottom: 1px #466f9f solid;
}

div#use h3::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0 5px 0 0;
  border-bottom: 5px transparent solid;
  border-top: 5px transparent solid;
  border-left: 7px #466f9f solid;
}

div#use p.text {
  margin: 0 0 1em 1em;
}

div#use ul.notes {
  margin: 0 0 1em 1.5em;
  font-size: 1.3rem;
}

div#use p.text + ul.notes {
  margin-top: -10px;
}

div#use ul.icon {
  overflow: hidden; /* float release */
  margin: 0 0 1em 1em;
}

div#use ul.icon li {
  float: left;
  margin: 0 20px 0 0;
}


/* Pages: Cookie
----------------------------------------------- */
div#cookie > div.contents {
  width: 1020px;
  margin: 20px auto 0;
}

div#cookie h1 {
  margin-bottom: 20px;
}

div#cookie h2.separation {
  margin-top: 2em;
  padding-top: 1em;
  border-top: 2px #466f9f solid;
}

div#cookie p.text {
  margin: 0 0 1em 1em;
}


/* Pages: News
----------------------------------------------- */
div#news > div.contents {
  width: 1020px;
  margin: 0 auto;
  padding: 20px 0 0;
}

div#news > div.contents dt[id] {
  margin: -130px 0 0;
  padding: 130px 0 0;
}

div#news > div.contents dl.news dd.title {
  position: relative;
  margin: 0 0 10px;
  padding: 0 0 0 12px;
  border-bottom: 1px #466f9f dotted;
}

div#news > div.contents dl.news dd.title::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 0;
  margin: -4px 0 0;
  border-bottom: 5px transparent solid;
  border-top: 5px transparent solid;
  border-left: 7px #1e1e24 solid;
}

div#news > div.contents dl.news dd.details {
  margin: 0 0 20px;
  border-bottom: 1px #466f9f solid;
}

div#news > div.contents ul.pagination {
  overflow: hidden;
  margin: 0 0 20px;
}

div#news > div.contents ul.pagination li {
  float: left;
  padding: 0 10px 0 0;
}