@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/*--------------------------------------
Base
----------------------------------------*/
body {
  font-size: 0.9em;
  line-height: 1.8em;
  color: #333333;
}

#navigation {
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#branch {
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

p#branch {
  width: 980px;
  margin: 0 auto;
  font-size: 0.85em;
  padding-top: 7px;
}

p#branch a {
  color: #333;
  text-decoration: none;
}

p#branch a:hover,
p#branch a:focus {
  background-color: #195ebd;
  color: #fff;
}

a {
  text-decoration: none;
  cursor: pointer;
}

div {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.wrapper, .conts01--wrap, .conts02--wrap, .conts03, .conts04--inner, .conts05, .conts06--inner, .topHeader, .topHeader .logo, .bottomHeader ul, .mainvisual, .conts01, .conts01--wrap .col2, .conts01--before, .conts02--wrap .conts02--after, .conts01--beforeCase, .conts02--wrap .conts02--afterCase, .conts01--beforeCase .beforeCase-01, .conts02--wrap .conts02--afterCase .beforeCase-01, .conts02--wrap .conts02--afterCase .afterCase-01, .conts01--beforeCase .beforeCase-02, .conts02--wrap .conts02--afterCase .beforeCase-02, .conts02--wrap .conts02--afterCase .afterCase-02, .conts01--beforeCase .beforeCase-02 ul, .conts02--wrap .conts02--afterCase .beforeCase-02 ul, .conts02--wrap .conts02--afterCase .afterCase-02 ul, .conts01--beforeCase .beforeCase-02 ul > li, .conts02--wrap .conts02--afterCase .beforeCase-02 ul > li, .conts02--wrap .conts02--afterCase .afterCase-02 ul > li, .conts01--beforeCase .beforeCase-02 .caseTtl, .conts02--wrap .conts02--afterCase .beforeCase-02 .caseTtl, .conts02--wrap .conts02--afterCase .afterCase-02 .caseTtl, .conts02, .conts02--wrap .col2, .conts03--tileCase, .conts03--tileCase ul li .tileTtl, .conts03--tileCase ul li .tileTtl .sub, .conts03--tileCase ul li .tileTtl .title, .conts03--tileCase ul li .tileImg, .conts04 .arrow, .conts04--inner .col2, .conts04--inner .col2 .col-02, .conts04--inner .col2 .col-02 .img, .conts04--inner .col2 .col-02 .txt, .conts04--inner .conts04-case, .conts04--inner .conts04-case ul, .conts04--inner .conts04-case li, .conts04--inner .conts04-case .case-01, .conts04--inner .conts04-case .case-01 .tileTtl, .conts04--inner .conts04-case .case-01 .tileTtl .sub, .conts04--inner .conts04-case .case-01 .tileTtl .title, .conts04--inner .conts04-case .case-01 .tileImg, .conts04--inner .conts04-case .case-02, .conts04--inner .conts04-case .case-02 .tileTtl, .conts04--inner .conts04-case .case-02 .tileTtl .sub, .conts04--inner .conts04-case .case-02 .tileTtl .title, .conts04--inner .conts04-case .case-02 .tileImg, .conts05Wrap, .conts06--inner .col2, .conts06--inner .col-01, .conts06--inner .col-01 .txt-01, .conts06--inner .col-01 .txt-02, .conts06--inner .col-02, .conts06--inner .txt-03 {
  *zoom: 1;
}
.wrapper:before, .conts01--wrap:before, .conts02--wrap:before, .conts03:before, .conts04--inner:before, .conts05:before, .conts06--inner:before, .topHeader:before, .topHeader .logo:before, .bottomHeader ul:before, .mainvisual:before, .conts01:before, .conts01--wrap .col2:before, .conts01--before:before, .conts02--wrap .conts02--after:before, .conts01--beforeCase:before, .conts02--wrap .conts02--afterCase:before, .conts01--beforeCase .beforeCase-01:before, .conts02--wrap .conts02--afterCase .beforeCase-01:before, .conts02--wrap .conts02--afterCase .afterCase-01:before, .conts01--beforeCase .beforeCase-02:before, .conts02--wrap .conts02--afterCase .beforeCase-02:before, .conts02--wrap .conts02--afterCase .afterCase-02:before, .conts01--beforeCase .beforeCase-02 ul:before, .conts02--wrap .conts02--afterCase .beforeCase-02 ul:before, .conts02--wrap .conts02--afterCase .afterCase-02 ul:before, .conts01--beforeCase .beforeCase-02 ul > li:before, .conts02--wrap .conts02--afterCase .beforeCase-02 ul > li:before, .conts02--wrap .conts02--afterCase .afterCase-02 ul > li:before, .conts01--beforeCase .beforeCase-02 .caseTtl:before, .conts02--wrap .conts02--afterCase .beforeCase-02 .caseTtl:before, .conts02--wrap .conts02--afterCase .afterCase-02 .caseTtl:before, .conts02:before, .conts02--wrap .col2:before, .conts03--tileCase:before, .conts03--tileCase ul li .tileTtl:before, .conts03--tileCase ul li .tileTtl .sub:before, .conts03--tileCase ul li .tileTtl .title:before, .conts03--tileCase ul li .tileImg:before, .conts04 .arrow:before, .conts04--inner .col2:before, .conts04--inner .col2 .col-02:before, .conts04--inner .col2 .col-02 .img:before, .conts04--inner .col2 .col-02 .txt:before, .conts04--inner .conts04-case:before, .conts04--inner .conts04-case ul:before, .conts04--inner .conts04-case li:before, .conts04--inner .conts04-case .case-01:before, .conts04--inner .conts04-case .case-01 .tileTtl:before, .conts04--inner .conts04-case .case-01 .tileTtl .sub:before, .conts04--inner .conts04-case .case-01 .tileTtl .title:before, .conts04--inner .conts04-case .case-01 .tileImg:before, .conts04--inner .conts04-case .case-02:before, .conts04--inner .conts04-case .case-02 .tileTtl:before, .conts04--inner .conts04-case .case-02 .tileTtl .sub:before, .conts04--inner .conts04-case .case-02 .tileTtl .title:before, .conts04--inner .conts04-case .case-02 .tileImg:before, .conts05Wrap:before, .conts06--inner .col2:before, .conts06--inner .col-01:before, .conts06--inner .col-01 .txt-01:before, .conts06--inner .col-01 .txt-02:before, .conts06--inner .col-02:before, .conts06--inner .txt-03:before, .wrapper:after, .conts01--wrap:after, .conts02--wrap:after, .conts03:after, .conts04--inner:after, .conts05:after, .conts06--inner:after, .topHeader:after, .topHeader .logo:after, .bottomHeader ul:after, .mainvisual:after, .conts01:after, .conts01--wrap .col2:after, .conts01--before:after, .conts02--wrap .conts02--after:after, .conts01--beforeCase:after, .conts02--wrap .conts02--afterCase:after, .conts01--beforeCase .beforeCase-01:after, .conts02--wrap .conts02--afterCase .beforeCase-01:after, .conts02--wrap .conts02--afterCase .afterCase-01:after, .conts01--beforeCase .beforeCase-02:after, .conts02--wrap .conts02--afterCase .beforeCase-02:after, .conts02--wrap .conts02--afterCase .afterCase-02:after, .conts01--beforeCase .beforeCase-02 ul:after, .conts02--wrap .conts02--afterCase .beforeCase-02 ul:after, .conts02--wrap .conts02--afterCase .afterCase-02 ul:after, .conts01--beforeCase .beforeCase-02 ul > li:after, .conts02--wrap .conts02--afterCase .beforeCase-02 ul > li:after, .conts02--wrap .conts02--afterCase .afterCase-02 ul > li:after, .conts01--beforeCase .beforeCase-02 .caseTtl:after, .conts02--wrap .conts02--afterCase .beforeCase-02 .caseTtl:after, .conts02--wrap .conts02--afterCase .afterCase-02 .caseTtl:after, .conts02:after, .conts02--wrap .col2:after, .conts03--tileCase:after, .conts03--tileCase ul li .tileTtl:after, .conts03--tileCase ul li .tileTtl .sub:after, .conts03--tileCase ul li .tileTtl .title:after, .conts03--tileCase ul li .tileImg:after, .conts04 .arrow:after, .conts04--inner .col2:after, .conts04--inner .col2 .col-02:after, .conts04--inner .col2 .col-02 .img:after, .conts04--inner .col2 .col-02 .txt:after, .conts04--inner .conts04-case:after, .conts04--inner .conts04-case ul:after, .conts04--inner .conts04-case li:after, .conts04--inner .conts04-case .case-01:after, .conts04--inner .conts04-case .case-01 .tileTtl:after, .conts04--inner .conts04-case .case-01 .tileTtl .sub:after, .conts04--inner .conts04-case .case-01 .tileTtl .title:after, .conts04--inner .conts04-case .case-01 .tileImg:after, .conts04--inner .conts04-case .case-02:after, .conts04--inner .conts04-case .case-02 .tileTtl:after, .conts04--inner .conts04-case .case-02 .tileTtl .sub:after, .conts04--inner .conts04-case .case-02 .tileTtl .title:after, .conts04--inner .conts04-case .case-02 .tileImg:after, .conts05Wrap:after, .conts06--inner .col2:after, .conts06--inner .col-01:after, .conts06--inner .col-01 .txt-01:after, .conts06--inner .col-01 .txt-02:after, .conts06--inner .col-02:after, .conts06--inner .txt-03:after {
  content: " ";
  display: table;
}
.wrapper:after, .conts01--wrap:after, .conts02--wrap:after, .conts03:after, .conts04--inner:after, .conts05:after, .conts06--inner:after, .topHeader:after, .topHeader .logo:after, .bottomHeader ul:after, .mainvisual:after, .conts01:after, .conts01--wrap .col2:after, .conts01--before:after, .conts02--wrap .conts02--after:after, .conts01--beforeCase:after, .conts02--wrap .conts02--afterCase:after, .conts01--beforeCase .beforeCase-01:after, .conts02--wrap .conts02--afterCase .beforeCase-01:after, .conts02--wrap .conts02--afterCase .afterCase-01:after, .conts01--beforeCase .beforeCase-02:after, .conts02--wrap .conts02--afterCase .beforeCase-02:after, .conts02--wrap .conts02--afterCase .afterCase-02:after, .conts01--beforeCase .beforeCase-02 ul:after, .conts02--wrap .conts02--afterCase .beforeCase-02 ul:after, .conts02--wrap .conts02--afterCase .afterCase-02 ul:after, .conts01--beforeCase .beforeCase-02 ul > li:after, .conts02--wrap .conts02--afterCase .beforeCase-02 ul > li:after, .conts02--wrap .conts02--afterCase .afterCase-02 ul > li:after, .conts01--beforeCase .beforeCase-02 .caseTtl:after, .conts02--wrap .conts02--afterCase .beforeCase-02 .caseTtl:after, .conts02--wrap .conts02--afterCase .afterCase-02 .caseTtl:after, .conts02:after, .conts02--wrap .col2:after, .conts03--tileCase:after, .conts03--tileCase ul li .tileTtl:after, .conts03--tileCase ul li .tileTtl .sub:after, .conts03--tileCase ul li .tileTtl .title:after, .conts03--tileCase ul li .tileImg:after, .conts04 .arrow:after, .conts04--inner .col2:after, .conts04--inner .col2 .col-02:after, .conts04--inner .col2 .col-02 .img:after, .conts04--inner .col2 .col-02 .txt:after, .conts04--inner .conts04-case:after, .conts04--inner .conts04-case ul:after, .conts04--inner .conts04-case li:after, .conts04--inner .conts04-case .case-01:after, .conts04--inner .conts04-case .case-01 .tileTtl:after, .conts04--inner .conts04-case .case-01 .tileTtl .sub:after, .conts04--inner .conts04-case .case-01 .tileTtl .title:after, .conts04--inner .conts04-case .case-01 .tileImg:after, .conts04--inner .conts04-case .case-02:after, .conts04--inner .conts04-case .case-02 .tileTtl:after, .conts04--inner .conts04-case .case-02 .tileTtl .sub:after, .conts04--inner .conts04-case .case-02 .tileTtl .title:after, .conts04--inner .conts04-case .case-02 .tileImg:after, .conts05Wrap:after, .conts06--inner .col2:after, .conts06--inner .col-01:after, .conts06--inner .col-01 .txt-01:after, .conts06--inner .col-01 .txt-02:after, .conts06--inner .col-02:after, .conts06--inner .txt-03:after {
  clear: both;
}

.wrapper {
  margin: auto;
  font-family: "Hiragino Sans","メイリオ" , Meiryo ,"Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" ,  "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

.mt90 {
  margin-top: 90px;
}

.mb90 {
  margin-bottom: 90px;
}

.mt85 {
  margin-top: 85px;
}

.mb85 {
  margin-bottom: 85px;
}

.mt80 {
  margin-top: 80px;
}

.mb80 {
  margin-bottom: 80px;
}

.mt75 {
  margin-top: 75px;
}

.mb75 {
  margin-bottom: 75px;
}

.mt70 {
  margin-top: 70px;
}

.mb70 {
  margin-bottom: 70px;
}

.mt65 {
  margin-top: 65px;
}

.mb65 {
  margin-bottom: 65px;
}

.mt60 {
  margin-top: 60px;
}

.mb60 {
  margin-bottom: 60px;
}

.mt55 {
  margin-top: 55px;
}

.mb55 {
  margin-bottom: 55px;
}

.mt50 {
  margin-top: 50px;
}

.mb50 {
  margin-bottom: 50px;
}

.mt45 {
  margin-top: 45px;
}

.mb45 {
  margin-bottom: 45px;
}

.mt40 {
  margin-top: 40px;
}

.mb40 {
  margin-bottom: 40px;
}

.mt35 {
  margin-top: 35px;
}

.mb35 {
  margin-bottom: 35px;
}

.mt30 {
  margin-top: 30px;
}

.mb30 {
  margin-bottom: 30px;
}

.mt25 {
  margin-top: 25px;
}

.mb25 {
  margin-bottom: 25px;
}

.mt20 {
  margin-top: 20px;
}

.mb20 {
  margin-bottom: 20px;
}

.mt15 {
  margin-top: 15px;
}

.mb15 {
  margin-bottom: 15px;
}

.mt10 {
  margin-top: 10px;
}

.mb10 {
  margin-bottom: 10px;
}

.mt5 {
  margin-top: 5px;
}

.mb5 {
  margin-bottom: 5px;
}

span.subText {
  font-size: 75.5%;
  vertical-align: bottom;
  position: relative;
  top: 0.1em;
}

h2 {
  font-size: 36px;
  text-align: center;
  font-weight: 600;
}

.conts01--wrap, .conts02--wrap, .conts03, .conts04--inner, .conts05, .conts06--inner {
  width: 1000px;
  margin: auto;
}

.conts--ttl {
  min-width: 1000px;
  width: 100%;
  height: 110px;
  padding-top: 30px;
  line-height: 50px;
}
.conts--ttl > h2 {
  color: #231815;
}

/*--------------------------------------
header
----------------------------------------*/
.header {
  width: 100%;
  height: 65px;
  position: fixed;
  padding-top: 5px;
  top: 0;
  left: 0;
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ccffffff,EndColorStr=#ccffffff);
  /*IE8以下用*/
  z-index: 90;
  background-color: #fff;
}

.topHeader {
  z-index: 90;
  width: 1000px;
  margin: auto;
}
.topHeader h1 {
  z-index: -999;
  position: absolute;
  font-size: -99px;
  color: rgba(255, 255, 255, 0);
  display: none;
  overflow: hidden;
}
.topHeader .logo {
  display: block;
  width: 146px;
  height: 46px;
  margin-right: 40px;
  float: left;
  margin-top: 3px;
}
.topHeader .logo img {
  width: 100%;
}
.topHeader .productName {
  display: block;
  font-size: 21px;
  font-weight: bold;
  color: #231815;
  float: left;
}
.topHeader .headerContact {
  display: block;
  width: 188px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  float: right;
  font-family: "Hiragino Sans","メイリオ" , Meiryo ,"Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" ,  "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
  background-color: #54c3f1;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 6px 0 #00abeb;
  -webkit-box-shadow: 0 6px 0 #00abeb;
  box-shadow: 0 6px 0 #00abeb;
}
.topHeader .headerContact:hover {
  -moz-transform: translateY(3px);
  -ms-transform: translateY(3px);
  -webkit-transform: translateY(3px);
  transform: translateY(3px);
  background-color: #1fc2ff;
  -moz-box-shadow: 0 3px 0 #0098d2;
  -webkit-box-shadow: 0 3px 0 #0098d2;
  box-shadow: 0 3px 0 #0098d2;
  -moz-transition-duration: 0.1s;
  -o-transition-duration: 0.1s;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}
.topHeader .headerContact:active {
  -moz-transform: translateY(6px);
  -ms-transform: translateY(6px);
  -webkit-transform: translateY(6px);
  transform: translateY(6px);
  background-color: #006185;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -moz-transition-duration: 0.1s;
  -o-transition-duration: 0.1s;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}

/*--------------------------------------
header 	bottom
----------------------------------------*/
.bottomHeader {
  position: relative;
  width: 100%;
  height: 73px;
  margin: auto;
  background-color: #f39800;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  margin-top: 65px;
  cursor: pointer;
}
.bottomHeader ul {
  width: 1000px;
  margin: auto;
  cursor: pointer;
}
.bottomHeader ul li {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  cursor: pointer;
  height: 56px;
  width: 333.33333px;
  margin-top: 12px;
  font-family: "Hiragino Sans","メイリオ" , Meiryo ,"Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" ,  "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}
.bottomHeader ul li.border {
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}
.bottomHeader ul li a {
  text-align: center;
  display: block;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  width: 333.33333px;
  height: 57px;
  line-height: 24px;
  -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  cursor: pointer;
}

/*--------------------------------------
mainvisual
----------------------------------------*/
.mainvisual {
  width: 100%;
  background-color: #f7b74d;
  margin: auto;
}

#mainvisual-0 {
  /*position:absolute;*/
  top: 138px;
  width: 100%;
  height: 590px;
  background-color: #333;
  margin: auto;
}

#mainvisual-1 {
  position: absolute;
  top: 138px;
  background-image: url("../images/top_bg-1.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 590px;
  background-color: #666;
  margin: auto;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  opacity: 0;
}

#mainvisual-2 {
  position: absolute;
  top: 138px;
  background-image: url("../images/top_bg-2.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 590px;
  background-color: #666;
  margin: auto;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  opacity: 0;
}

#mainvisual_txt {
  position: absolute;
  top: 116px;
  width: 100%;
  padding-top: 50px;
  margin: 0　auto;
  text-align: center;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  opacity: 0;
}

#titleback {
  position: absolute;
  left: 50%;
  top: 270px;
  width: 0%;
  height: 178px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  opacity: 0;
  background: #000;
}

#point, #title-1, #title-2, #title-3 {
  position: absolute;
  left: 50%;
  opacity: 0;
}

#point {
  top: 256px;
  margin-left: -370px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  opacity: 0;
  /*width:0%;*/
}

#title-1 {
  top: 256px;
  margin-left: -239px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  opacity: 0;
}

#title-2 {
  top: 294px;
  margin-left: -239px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  opacity: 0;
}

#title-3 {
  top: 440px;
  margin-left: -269px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  opacity: 0;
}

#arrow-1 {
  position: absolute;
  top: 600px;
  width: 100%;
  height: 77px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  opacity: 0;
  background: #f4ac45;
}

.sankaku {
  position: absolute;
  top: 677px;
  left: 50%;
  margin-left: -20px;
  width: 0;
  height: 0;
  border: 40px solid transparent;
  border-top: 40px solid #f4ac45;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  opacity: 0;
}

.conts01 {
  margin-top: 80px;
}

/*--------------------------------------
conts01
----------------------------------------*/
.conts01 {
  width: 100%;
  background-image: url("../images/conts-01Bg.jpg");
  background-size: cover;
  margin-top: 80px;
}
.conts01 .conts--ttl {
  background-color: #fff;
}
.conts01--wrap {
  margin: auto;
}
.conts01--wrap > h3 {
  font-size: 24px;
  color: #c30d23;
  font-weight: 500;
  text-align: center;
  margin-top: 33px;
  margin-bottom: 43px;
}
.conts01--wrap .col2 .col-01 {
  float: left;
  width: 480px;
  font-size: 16px;
  line-height: 32px;
  margin-right: 48px;
}
.conts01--wrap .col2 .col-02 {
  float: left;
  width: 470px;
}
.conts01--before, .conts02--wrap .conts02--after {
  margin-top: 47px;
  width: 1000px;
}
.conts01--before .before-01, .conts02--wrap .conts02--after .before-01, .conts02--wrap .conts02--after .after-01 {
  height: 65px;
  line-height: 65px;
  text-align: center;
  font-size: 24px;
  color: #fff;
  float: left;
  width: 170px;
  background-color: #c30d23;
}
.conts01--before .before-02, .conts02--wrap .conts02--after .before-02, .conts02--wrap .conts02--after .after-02 {
  height: 65px;
  line-height: 65px;
  text-align: center;
  font-size: 24px;
  color: #fff;
  float: left;
  width: 830px;
  background-color: #dc5b4d;
}
.conts01--beforeCase, .conts02--wrap .conts02--afterCase {
  width: 1000px;
  height: 710px;
  margin-top: 36px;
}
.conts01--beforeCase .beforeCase-01, .conts02--wrap .conts02--afterCase .beforeCase-01, .conts02--wrap .conts02--afterCase .afterCase-01 {
  width: 512px;
  height: 655px;
  position: relative;
  float: left;
}
.conts01--beforeCase .beforeCase-01 > img, .conts02--wrap .conts02--afterCase .beforeCase-01 > img, .conts02--wrap .conts02--afterCase .conts01--beforeCase .afterCase-01 > img, .conts02--wrap .conts02--afterCase .afterCase-01 > img {
  position: absolute;
  top: -14px;
  left: 40px;
}
.conts01--beforeCase .beforeCase-02, .conts02--wrap .conts02--afterCase .beforeCase-02, .conts02--wrap .conts02--afterCase .afterCase-02 {
  width: 472px;
  height: 710px;
  float: left;
}
.conts01--beforeCase .beforeCase-02 ul, .conts02--wrap .conts02--afterCase .beforeCase-02 ul, .conts02--wrap .conts02--afterCase .afterCase-02 ul {
  margin-top: 40px;
}
.conts01--beforeCase .beforeCase-02 ul > li > p, .conts02--wrap .conts02--afterCase .beforeCase-02 ul > li > p, .conts02--wrap .conts02--afterCase .afterCase-02 ul > li > p {
  line-height: 30px;
}
.conts01--beforeCase .beforeCase-02 .caseTtl, .conts02--wrap .conts02--afterCase .beforeCase-02 .caseTtl, .conts02--wrap .conts02--afterCase .afterCase-02 .caseTtl {
  width: 472px;
  height: 47px;
  position: relative;
}
.conts01--beforeCase .beforeCase-02 .caseTtl > .ttl, .conts02--wrap .conts02--afterCase .beforeCase-02 .caseTtl > .ttl, .conts02--wrap .conts02--afterCase .afterCase-02 .caseTtl > .ttl {
  position: absolute;
  font-size: 26px;
  color: #595757;
  float: left;
  top: 12px;
}
.conts01 .corol-top {
  width: 100%;
  height: 30px;
  background-color: #f4ac45;
}
.conts01 .arrow {
  width: 100%;
  min-width: 1000px;
  text-align: center;
  margin: auto;
  background-color: #fff;
}
.conts01 .arrow > img {
  margin-top: -2px;
}
.conts01 .color-bottom {
  width: 100%;
  height: 30px;
  background-color: #d48e30;
  opacity: 0.9;
}

/*--------------------------------------
conts02
----------------------------------------*/
.conts02 {
  width: 100%;
  background-image: url("../images/conts-02Bg.jpg");
  background-size: cover;
  padding-bottom: 40px;
}
.conts02 .conts--ttl {
  background-color: #fff;
}
.conts02--wrap {
  margin: auto;
}
.conts02--wrap .col2 .col-01 {
  float: left;
  width: 488px;
  font-size: 16px;
  line-height: 32px;
  margin-right: 40px;
}
.conts02--wrap .col2 .col-02 {
  float: left;
  width: 470px;
}
.conts02--wrap .conts02--after .after-01 {
  background-color: #f39800;
}
.conts02--wrap .conts02--after .after-02 {
  background-color: #f8b62d;
  color: #595757;
}
.conts02--wrap .conts02--afterCase {
  height: auto;
}
.conts02--wrap .conts02--afterCase .afterCase-01 {
  width: 519px;
  height: 745px;
}
.conts02--wrap .conts02--afterCase .afterCase-01 > img {
  top: 12px;
  left: -26px;
}
.conts02--wrap .conts02--afterCase .afterCase-02 {
  height: auto;
}
.conts02--wrap .conts02--afterCase .afterCase-02 ul {
  margin-top: 0;
}
.conts02--wrap .conts02--afterCase .afterCase-02 ul > li > p > a {
  text-decoration: none;
  color: #f39800;
}
.conts02--wrap .conts02--afterCase .afterCase-02 ul > li > p > a:after {
  content: "▶";
  font-size: 7px;
  color: #595757;
}
.conts02--wrap .conts02--afterCase .afterCase-02 .caseTtl > .num {
  color: #f8b62d;
}
.conts02--wrap .conts02--afterCase .afterCase-02 .caseTtl > .ttl {
  font-weight: 600;
}
.conts02 .corol-top {
  width: 100%;
  height: 30px;
  background-color: #f39800;
}
.conts02 .arrow {
  width: 100%;
  min-width: 1000px;
  text-align: center;
  margin: auto;
  background-color: #fff;
}
.conts02 .arrow > img {
  margin-top: -2px;
}

/*--------------------------------------
conts3
----------------------------------------*/
.conts03 h3 {
  font-size: 24px;
  text-align: center;
  color: #595757;
  margin-top: 44px;
  margin-bottom: 30px;
}
.conts03--tileCase {
  margin-bottom: 44px;
}
.conts03--tileCase ul li {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 285px;
  height: 350px;
  float: left;
  background-color: #f39800;
  padding: 18px;
  position: relative;
}
.conts03--tileCase ul li.mr {
  margin-left: 72px;
  margin-right: 72px;
}
.conts03--tileCase ul li .tileTtl .sub {
  font-size: 14px;
  line-height: 17px;
  color: #fff;
  margin-bottom: 13px;
}
.conts03--tileCase ul li .tileTtl .title {
  font-size: 24px;
  line-height: 27px;
  font-weight: 500;
  color: #fff;
}
.conts03--tileCase ul li .tileTtl .title > span {
  font-size: 11px;
}
.conts03--tileCase ul li .tiletxt p {
  font-size: 14px;
  color: #fff;
  text-align: justify;
}
.conts03--tileCase ul li .tileImg {
  position: absolute;
  bottom: 8px;
}
.conts03--tileCase ul li .link {
  position: absolute;
  bottom: 12px;
  right: 18px;
  font-size: 11px;
  color: #231815;
}

/*--------------------------------------
conts4
----------------------------------------*/
.conts04 {
  width: 100%;
  height: 700px;
  background-color: #99d8f3;
}
.conts04 .arrow {
  width: 1000px;
  margin: auto;
  margin-bottom: 30px;
  text-align: center;
}
.conts04 .arrow > img {
  margin-top: -2px;
  text-align: center;
}
.conts04--inner {
  width: 1000px;
  margin: auto;
}
.conts04--inner .col2 .col-01 {
  width: 450px;
  float: left;
  margin-right: 52px;
}
.conts04--inner .col2 .col-01 > p {
  font-size: 16px;
  line-height: 32px;
  color: #595757;
}
.conts04--inner .col2 .col-02 {
  width: 492px;
  float: left;
}
.conts04--inner .col2 .col-02 > p {
  font-size: 16px;
  line-height: 32px;
  color: #595757;
}
.conts04--inner .col2 .col-02 .img {
  float: left;
}
.conts04--inner .col2 .col-02 .txt {
  float: left;
  margin-left: 24px;
  width: 198px;
  text-align: justify;
  font-size: 12px;
}
.conts04--inner .conts04-case {
  width: 645px;
  margin: auto;
  margin-top: 40px;
}
.conts04--inner .conts04-case li {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.conts04--inner .conts04-case .case-01 {
  position: relative;
  float: left;
  width: 285px;
  height: 310px;
  background-color: #718cc7;
  margin-right: 72px;
  padding: 18px;
}
.conts04--inner .conts04-case .case-01 .tileTtl .sub {
  font-size: 14px;
  line-height: 17px;
  color: #fff;
  margin-bottom: 13px;
}
.conts04--inner .conts04-case .case-01 .tileTtl .title {
  font-size: 24px;
  line-height: 27px;
  font-weight: 500;
  color: #fff;
}
.conts04--inner .conts04-case .case-01 .tileTtl .title > span {
  font-size: 11px;
}
.conts04--inner .conts04-case .case-01 .tiletxt p {
  font-size: 14px;
  color: #fff;
  text-align: justify;
}
.conts04--inner .conts04-case .case-01 .tileImg {
  position: absolute;
  bottom: 8px;
}
.conts04--inner .conts04-case .case-01 .link {
  position: absolute;
  bottom: 12px;
  right: 18px;
  font-size: 11px;
  color: #231815;
}
.conts04--inner .conts04-case .case-02 {
  position: relative;
  float: left;
  width: 285px;
  height: 310px;
  background-color: #718cc7;
  padding: 18px;
}
.conts04--inner .conts04-case .case-02 .tileTtl .sub {
  font-size: 14px;
  line-height: 17px;
  color: #fff;
  margin-bottom: 13px;
}
.conts04--inner .conts04-case .case-02 .tileTtl .title {
  font-size: 24px;
  line-height: 27px;
  font-weight: 500;
  color: #fff;
}
.conts04--inner .conts04-case .case-02 .tileTtl .title > span {
  font-size: 11px;
}
.conts04--inner .conts04-case .case-02 .tiletxt p {
  font-size: 14px;
  color: #fff;
  text-align: justify;
}
.conts04--inner .conts04-case .case-02 .tileImg {
  position: absolute;
  bottom: 8px;
}
.conts04--inner .conts04-case .case-02 .link {
  position: absolute;
  bottom: 12px;
  right: 18px;
  font-size: 11px;
  color: #231815;
}

/*--------------------------------------
conts05
----------------------------------------*/
.conts05Wrap {
  background-color: #f9f9f9;
}

.conts05 {
  padding-bottom: 50px;
  width: 1000px;
}
.conts05__txt {
  text-align: center;
  font-size: 16px;
  margin-top: 42px;
  margin-bottom: 28px;
}
.conts05__top {
  text-align: center;
  margin-top: 35px;
}
.conts05__top > span {
  font-size: 19px;
}
.conts05__top > a {
  color: #231815;
  font-size: 16px;
}
.conts05 .conts05Conts {
  margin: auto;
  margin-top: 5px;
  display: block;
  width: 465px;
  height: 68px;
  text-align: center;
  line-height: 68px;
  font-size: 24px;
  color: #fff;
  font-weight: bold;
  background-color: #54c3f1;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 6px 0 #00abeb;
  -webkit-box-shadow: 0 6px 0 #00abeb;
  box-shadow: 0 6px 0 #00abeb;
}
.conts05 .conts05Conts:hover {
  -moz-transform: translateY(3px);
  -ms-transform: translateY(3px);
  -webkit-transform: translateY(3px);
  transform: translateY(3px);
  background-color: #1fc2ff;
  -moz-box-shadow: 0 3px 0 #0098d2;
  -webkit-box-shadow: 0 3px 0 #0098d2;
  box-shadow: 0 3px 0 #0098d2;
  -moz-transition-duration: 0.1s;
  -o-transition-duration: 0.1s;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}
.conts05 .conts05Conts:active {
  -moz-transform: translateY(6px);
  -ms-transform: translateY(6px);
  -webkit-transform: translateY(6px);
  transform: translateY(6px);
  background-color: #006185;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -moz-transition-duration: 0.1s;
  -o-transition-duration: 0.1s;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}

/*--------------------------------------
conts06
----------------------------------------*/
.conts06 {
  width: 100%;
  background-color: #f8b62d;
  height: 284px;
  padding: 20px;
}
.conts06--inner .col2 {
  width: 1000px;
}
.conts06--inner .col-01 {
  width: 490px;
  margin-right: 38px;
  float: left;
}
.conts06--inner .col-01 .txt-01 {
  width: 423px;
  height: 96px;
  margin-top: 10px;
  margin-bottom: 36px;
}
.conts06--inner .col-01 .txt-01 > p {
  font-size: 32px;
  line-height: 48px;
  font-weight: 700;
}
.conts06--inner .col-01 .txt-02 {
  width: 452px;
  height: 88px;
  color: #fff;
}
.conts06--inner .col-02 {
  float: left;
  background-color: #c30d23;
}
.conts06--inner .txt-03 {
  width: 471px;
  height: 223px;
  padding: 18px 20px;
  background-color: #fddea6;
}
.conts06--inner .txt-03 .h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
}
.conts06--inner .txt-03 .txt {
  font-size: 16px;
  line-height: 32px;
}
.conts06--inner .txt-03 .txt > a {
  color: #231815;
}

/*--------------------------------------
copy
----------------------------------------*/
.copy2 {
  width: 1000px;
  margin: auto;
  text-align: center;
  margin-top: 18px;
}

/*--------------------------------------
pagetop
----------------------------------------*/
.pickup {
  display: block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 2;
  position: fixed;
  width: 195px;
  bottom: 3px;
  left: 0px;
  font-size: 12px;
  line-height: 22px;
  color: #fff;
  height: 65px;
  padding: 10px;
  text-align: center;
  background-color: #3270C6;
  -moz-box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.2);
  font-weight: 600;
  font-family: "Hiragino Sans","メイリオ" , Meiryo ,"Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" ,  "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

#page_top {
  z-index: 2;
  position: fixed;
  bottom: 1px;
  right: 0px;
  height: 60px;
}
#page_top > a {
  display: block;
  width: 100%;
  height: 100%;
  vertical-align: bottom;
}

/*--------------------------------------
header　　2017/07/13 追加
----------------------------------------*/
.header {
  width: 100%;
  height: 70px;
  position: fixed;
  top: 0;
  left: 0;
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ccffffff,EndColorStr=#ccffffff);
  /*IE8以下用*/
  z-index: 90;
  background-color: #fff;
  -moz-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.25);
}

.productName {
  text-decoration: none;
}

.h_nav {
  width: 408px;
  float: right;
  text-align: right;
  float: right;
}

.topHeader {
  z-index: 90;
  width: 1000px;
  margin: auto;
  margin-top: 6px;
}

.topHeader h1 {
  z-index: -999;
  position: absolute;
  font-size: -99px;
  color: rgba(255, 255, 255, 0);
  display: none;
  overflow: hidden;
}

.topHeader .logo {
  display: block;
  width: 146px;
  height: 46px;
  margin-right: 52px;
  float: left;
  margin-top: 3px;
}

.topHeader .logo img {
  width: 100%;
}

.topHeader .productName {
  display: block;
  font-size: 19px;
  font-weight: 600;
  color: #323232;
  float: left;
  margin-top: 7px;
  width: 370px;
}
.topHeader .productName > img {
  width: 100%;
}

.topHeader .headerContact {
  margin-top: 2px;
  display: block;
  width: 188px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
  font-weight: 600;
  font-family: "Hiragino Sans","メイリオ" , Meiryo ,"Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" ,  "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
  float: right;
  background-color: #00abeb;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 6px 0 #007099;
  -webkit-box-shadow: 0 6px 0 #007099;
  box-shadow: 0 6px 0 #007099;
  text-decoration: none;
}

.topHeader .headerContact:hover {
  -moz-transform: translateY(3px);
  -ms-transform: translateY(3px);
  -webkit-transform: translateY(3px);
  transform: translateY(3px);
  background-color: #1fc2ff;
  -moz-box-shadow: 0 3px 0 #007099;
  -webkit-box-shadow: 0 3px 0 #007099;
  box-shadow: 0 3px 0 #007099;
  -moz-transition-duration: 0.1s;
  -o-transition-duration: 0.1s;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}

.topHeader .headerContact:active {
  -moz-transform: translateY(6px);
  -ms-transform: translateY(6px);
  -webkit-transform: translateY(6px);
  transform: translateY(6px);
  background-color: #007099;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -moz-transition-duration: 0.1s;
  -o-transition-duration: 0.1s;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}

.h__translation {
  width: auto;
  height: auto;
  margin-top: 10px;
  float: left;
}

.h_nav {
  width: 408px;
  float: right;
  text-align: right;
  float: right;
}

.h__tel {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 19px;
  border-left: none !important;
  width: 210px;
  height: 39px;
  float: left;
}

.h__tel__txt01 {
  font-size: 11px;
  text-align: left;
  margin-top: 0;
  line-height: 24px;
  font-family: "Hiragino Sans","メイリオ" , Meiryo ,"Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" ,  "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

.h__tel__txt02 {
  font-size: 18px;
  font-weight: bold;
  text-align: left;
  line-height: 23px;
  font-family: "Hiragino Sans","メイリオ" , Meiryo ,"Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" ,  "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

.h__tel__txt02 > span {
  display: block;
  width: 26px;
  height: 15px;
  background-image: url(../images/h__tel-icon.png);
  float: left;
  margin-top: 3px;
  margin-right: 5px;
  font-size: 0.0000001px;
  color: rgba(255, 255, 255, 0);
}

.h__contact {
  width: auto;
  height: 39px;
  float: right;
}

/*--------------------------------------
footer__more　copy
----------------------------------------*/
.footer__more {
  display: block;
  width: 278px;
  color: #323232;
  font-size: 15px;
  font-weight: bold;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  position: relative;
  left: 0;
  right: 0;
  text-decoration: none;
  margin: auto;
  text-align: center;
  margin-top: 36px;
  margin-bottom: 40px;
}

.footer__more:after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #323232;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.footer__more:hover:after {
  width: 100%;
}
