/* =====保存用CSS開始===================================================================== */
/* ===== BulueMonkeyテンプレート用CSS ===================================================================== */

html,body{
  height: 100%;
  margin: 0;
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",
                "Hiragino Sans","Noto Sans JP",sans-serif;
}

body{
  display: flex;
  flex-direction: column;
  /* max-width: 1300px; */
  min-width: 400px;
  margin:0 auto;
}

/* 上部　FISAヘッダー */
.template_c2{
  display: none;
}

/*  上部　パンくず  */
#locator_template_c2{
  height:40px;
  flex-shrink:0;
  margin-top: 0px;
}

/* コード埋め込み部  */
main.inner,
#dcms_layoutPageBlockPasteArea,
#dcms_layoutPageBlock{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 下部　フィーサ最貧をご検討の方へ、動画資料ダウンロード、お問い合わせ */
.dlb_contact_area4{
  display: none;
}

/* 下部　お問い合わせ */
.dlb_contact_area{
  display: none;
}

/* 下部　最下部フッター　黒エリア */
footer{
  display: none;
}

/*-----------------------------------------------------------------*/
/* ぱんくず locator */
/*-----------------------------------------------------------------*/

/* dcms_media/css/base.css からの引用 */
a {
	-webkit-tap-highlight-color: rgba(0,0,0,0.3);
	margin: 0;
	padding: 0;
	color: #333333;
	text-decoration: none;
	transition: all .2s ease 0s;
}

/* dcms_media/css/common.css からの引用 */

#locator_template_c2 {
  font-size: 12px;
  line-height: 1.4;
  border-width: 1px 0 1px 0;
  border-style: solid;
  /* width: 100vw; */
  margin-bottom: 5px;
  margin-top: 5px;
  margin-bottom: 0;
  width: 100%;
}

#locator_template_c2 li {
  display: inline-block;
  list-style: none;
  margin-right: 6px;
  position: relative;
}

#locator_template_c2 li::after {
  content: ">";
  margin-left: 6px;
}

#locator_template_c2 li a {
  text-decoration: underline;
}

#locator_template_c2 li:last-child::after {
  display: none;
}

#locator_template_c2 li:first-child {
  margin-left: 0;
}

/* ===== オリジナル埋め込みコード用CSS ===================================================================== */
    :root {
      --mainColor: #146d57;
      --borderColor: #707070;
      --bgColor1: #f0f0f0;
      --bgColor2: #fafafa;
      --textColor: #333333;
      --accentColor: #aa5a0e;
      --attentionColor: #a70202;
      --errorColor: #ffaaaa;
      --noteColor: #009; /* 注意書きの赤色 */
    }

    body {
      margin: 0;
      padding: 0px;
      color: var(--textColor);
      font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN",
      "Noto Sans JP","Helvetica Neue", Arial,sans-serif;
    }

    .calcTitle{
      margin:5px 0 25px;
      text-align:center;
      font-size:28px;
    }

    .mainArea{
      display:flex;
      justify-content:center;
      align-items:flex-start;
      gap:30px;
    }

    .photoArea{
      margin: 10px;
      width:600px;
      flex-shrink:0;
    }

    .photoArea img{
      width:100%;
      display:block;
    }

    .note{
      margin: 20px 0px;
      font-size: 16px;
    }

    .note a {
      color: var(--noteColor);
      font-weight: bold;
      text-decoration: underline;   
      text-decoration-color: var(--noteColor);
    }

    /* 計算エリア */
    .calcArea {
      margin: 10px;
      width:380px;
      padding:10px;
      background: var(--bgColor1);
      border:1px solid var(--borderColor);
      border-radius:10px;
    }


    /* 条件入力 */
    .inputBlock {
      margin: 10px auto;
      padding: 10px;
      background: var(--bgColor2);
      border: 1px solid var(--borderColor);
      border-radius: 10px;
    }

    /* 計算結果 */
    .resultBlock {
      margin: 10px auto;
      padding: 10px;
      background: var(--bgColor2);
      border: 1px solid var(--borderColor);
      border-radius: 10px;
    }
    
    h3 {
      margin: 0px 0px 10px;
      color: var(--textColor);
      font-weight: bold;
      font-size: 20px;
      text-align: left;
    }

    .nozzleType {
      margin-top: 10px;
      margin-bottom:10px;
      font-size: 18px;
      text-align: left;
    }

    .nozzleType > div {
      display: flex;
    }

    .nozzleType .label {
      width: 8em;      /* 項目名の幅を固定 */
      text-align: right;
    }

    .nozzleType .label::after {
    content: "：";
    margin-right: 0.5em;
    }

    .model {
      font-weight: bold;
      color: var(--mainColor);
    }

    .input-group {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }

    .input-group label {
      width: 160px;
      text-align: right;
      margin-right: 12px;
      font-weight: bold;
    }
    
    /* 条件入力テキストボックス、プルダウン */
    .input-group input,
    .input-group select{
      width: 120px;
      padding: 5px 10px;
      border: 1px solid var(--borderColor);
      border-radius: 6px;
      font-size: 15px;
      text-align: right;
      box-sizing: border-box;
    }
    
    /* 単位 */
    .unit {
      width: 50px;
      margin-left: 10px;
      font-weight: bold;
    }

    /* 計算結果テキストボックス */
    .result input {
      background: var(--accentColor);
      color: white;
      font-weight: bold;
    }

    /* 条件未入力 */
    .error {
      background: var(--errorColor);
    }

    /* スピンボタン非表示　Chrome, Edge, Safari */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    /* スピンボタン非表示　Firefox */
    input[type="number"] {-moz-appearance: textfield;}

    /* スマホ対応 */
    @media (max-width:1100px){
      .mainArea{
        flex-direction:column;
        align-items:center;
      }
      .photoArea{
        width:380px;
      }
      .calcArea{
        width:100%;
        max-width:380px;
      }
    }

/* =====保存用CSS終了===================================================================== */