@charset "utf-8";

/* CSS Document */


.nodisp {
  display: none;
}


/*================================================================
clearfix
================================================================*/


/* For modern browsers */

.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
  /* For IE 6/7 (trigger hasLayout) */
  position: relative;
  /*for preview*/
}

html {
  margin: 0;
  padding: 0;
  font-size: 62.5%;
}

body {
  margin: 0;
  padding: 0;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 1.6;
  color: #333333;
  background-color: #ffffff;
}


/* langSelect */

#langSelect {
  position: relative;
  float: left;
  min-width: 151px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.selectLang {
  position: absolute;
  top: 32px;
  left: 0;
  display: none;
  z-index: 100;
}

.selectLang>li+li {
  border-top: 1px solid #b2b2b2;
}

.langSelectSwitch {
  position: relative;
  min-width: 151px;
  height: 32px;
  padding: 6px 28px 6px 35px;
  background: url(../image/header_ic03.png) no-repeat 100% 50% #2e2e2e;
  color: #ffffff;
  font-size: 16px;
  font-size: 1.6rem;
  /* box-sizing */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  /* transition */
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.langSelectSwitch:before {
  content: "";
  position: absolute;
  top: 8px;
  left: 12px;
  display: block;
  width: 17px;
  height: 17px;
  background: url(../image/header_ic02.png) no-repeat 0 0;
}

.langSelectSwitch:hover {
  opacity: 0.7;
}

.selectLang {
  min-width: 151px;
}

.selectLang>li>a {
  display: block;
  padding: 6px;
  background: #656565;
  color: #ffffff;
  font-size: 14px;
  font-size: 1.4rem;
  text-align: center;
  text-decoration: none;
}

.langSelectSwitch, .selectLang>li {
  cursor: pointer;
}


/*================================================================
レイアウト
================================================================*/

div#wrapper {
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

div#header {
  background-repeat: no-repeat;
  background-color: #ffffff;
}

div#content {
  padding: 0;
  text-align: left;
}

div.bluesec {
  background-color: #eaf1f5;
  font-size: 1.4rem;
}

div.freesec {
  margin-bottom: 10px;
  font-size: 1.4rem;
}

div#footer {
  padding: 20px 0;
  margin: 40px 0;
  border-top: 1px solid #007bc9;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#ownerName {
  margin: 5px 0 0;
  font-size: 21px;
  font-size: 2.1rem;
  font-weight: bold;
}

#ownerName>a {
  color: #333333;
  text-decoration: none;
}

/* ----- footerUtility ----- */

.footerUtilityLinks {
  display: inline-block;
  margin: 0 0 0 auto;
}

.footerUtilityLinks>li {
  float: left;
}

.footerUtilityLinks>li+li {
  float: left;
  margin-left: 16px;
  padding-left: 15px;
  border-left: 1px solid #5b5b5b;
}

.footerUtilityLinks>li>a {
  font-size: 14px;
  font-size: 1.4rem;
  color: #333333;
  text-decoration: none;
  line-height: 1.1;
}

.footerUtilityLinks>li>a:hover {
  text-decoration: underline;
}

#copyright {
  margin: 5px 0 0;
  font-size: 12px;
  font-size: 1.2rem;
}


/*================================================================
個別要素
================================================================*/

h3 {
  font-size: 1.8rem;
  font-size: 1.8;
  font-weight: bold;
  margin-bottom: 10px;
}

h4 {
  font-size: 1.5rem;
  font-size: 1.5;
  font-weight: bold;
  color: #000;
  margin-bottom: 10px;
}

h5 {
  font-size: 1.5rem;
  font-size: 1.5;
  font-weight: bold;
  color: #000;
  margin-bottom: 4px;
  display: inline-block;
}

/*================================================================
共通
================================================================*/


.m10tb {
  margin: 10px 0;
}

.m10tb label.w150, .m10t label.w150 {
  line-height: 40px;
 }

.m10all {
  margin: 10px;
}

.m10t {
  margin-top: 10px;
}

.m10b {
  margin-bottom: 10px;
}

.m20tb {
  margin: 20px 0;
}

.m20all {
  margin: 20px;
}

.m20t {
  margin-top: 20px;
}

.m20b {
  margin-bottom: 20px;
}

.m30tb {
  margin: 30px 0;
}

.m30all {
  margin: 30px;
}

.pd30all {
  padding: 30px;
}

.txleft {
  text-align: left;
}

.txright {
  text-align: right;
}

.txcen {
  text-align: center;
}

span.smallcal {
  font-size: 0.8rem;
  font-size: 0.8;
}


/*================================================================
フォーム関連
================================================================*/

/* input */

select, input, textarea, button {
  vertical-align: middle;
  font-size: 15px;
  font-size: 1.5rem;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

input, select {
  position: relative;
}

input[type=checkbox],input[type=radio] {
  display: none;
}

input[type="radio"]:checked+label {
  color: #ffffff;
  background: url(../image/btn_arrow_white.png) 92% 50% no-repeat, #0087e5;
  background-size: 7px, 14px;
}
input[type="checkbox"]:checked+label {
  color: #ffffff;
  background: url(../image/btn_arrow_white.png) 92% 50% no-repeat, #0087e5;
  background-size: 7px, 14px;
}

	
.btn-toggle-es {
  display: block;
  margin: 0 0 10px 0;
  width: 130px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
  color: #0087e5;
  border: 1px solid #0087e5;
  cursor: pointer;
  text-decoration: none;
  transition: .3s;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
  background: url(../image/btn_arrow_blue.png) 92% 50% no-repeat;
  background-size: 7px, 14px;
}

div.es-comment {
  float: left;
  margin-top: 4px;
  line-height: 1.3;
  margin-left: 10px;
  font-size: 12px;
  font-size: 1.2rem;
}

.select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 40px;
  border: 1px solid #cfcfcf;
  cursor: pointer;
  box-sizing: border-box;	
  padding: 0 10px;
  background: url(../image/pulldown.png) 98% 50% no-repeat, #fff;
  background-size: 17px, 17px;
}

select::-ms-expand {
	display: none;
}


.select-128 {
  width: 128px;
  height: 28px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border: 1px solid #ccc;
  cursor: pointer;
  box-sizing: border-box;
}



input.spin_upw {
  margin: 0;
  background: url("../image/spin_rw.png") no-repeat #f2f2f2 50% 50%;
}

input.spin_up {
  margin: 0;
  background: url("../image/spin_r.png") no-repeat #f2f2f2 50% 50%;
}

input.spin_down {
  margin: 0;
  background: url("../image/spin_l.png") no-repeat #f2f2f2 50% 50%;
}

input.spin_downw {
  margin: 0;
  background: url("../image/spin_lw.png") no-repeat #f2f2f2 50% 50%;
}
span.sph40 {
  margin-left: 1em;
  line-height: 40px;	
}

.spin_noline {
  border-left: 0px!important;
  border-right: 0px!important;
	}

/* トグルスイッチ */

div.btn-top-left {
	display: block;
	float: left;
	width: 90%;
}

div.btn_open {
  background: url("../image/btn_toggle_up.png") no-repeat 95% 50%;
}

div.btn_close {
  background: url("../image/btn_toggle_down.png") no-repeat 95% 50%;
}

#button_simple {
  cursor: pointer;
  padding: 30px;
}

#button_simple:hover {
  background-color: #408ab6;
  transition: .3s;
  color: #fff;
}

#button_detail {
  cursor: pointer;
  padding: 30px;
}

#button_detail:hover {
  background-color: #408ab6;
  transition: .3s;
  color: #fff;
}

#custom-option {
  border: 1px solid #cfcfcf;
  background-color: #fff;
  margin-top: 10px;
  padding: 10px 20px;
  border-radius: 4px;
}

#btn-toggle-co {
  margin: 0 10px;
  width: 20px;
  height: 20px;
  text-align: center;
  color: #0087e5;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: .3s;
  background-image: url(../image/arrow24.png);
  background-position: 50% 50%;
  background-color: #0087e5;
}

#product-series {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 50px;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
}

button.color_or {
  color: #fff;
  border: 1px solid #ff7800;
  background: url(../image/btn_arrow_white.png) 95% 50% no-repeat, #ff7800;
  background-size: 7px, 14px;
}

button.color_wht {
  color: #333;
  border: 1px solid #cfcfcf;
  background: url(../image/btn_arrow_blue.png) 95% 50% no-repeat, #fff;
  background-size: 7px, 14px;
}

.form-text {
  border: 1px solid #cfcfcf;
  height: 40px;
  cursor: pointer;
  box-sizing: border-box;
  padding: 9px 2px;
}

input[type="text"][disabled] {
  background: #f2f2f2;
  cursor: not-allowed!important;
  /* 禁止カーソル */
}

input[type="text"][readonly] {
  background: #ffffff;
  outline: none;
  cursor: text!important;
  /* 文字カーソル */
}


.button_wrapper {
  text-align: center;
}

.button_wrapper button {
  text-align: center;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: bold;
  height: 70px;
  line-height: 48px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}

div.button-result {
  display: block;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #0087e5;
  border: 1px solid #0087e5;
  cursor: pointer;
  text-decoration: none;
  transition: .3s;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
}

input.disfield {
	width: 80px;
	margin-left: 80px;
}

.ldouble-l {
	border-left: 3px double #ccc!important;
}
.ldouble-t {
	border-top: 3px double #ccc!important;
}