/*------全体-------*/
body {
 font-size: 14px;
 margin: 0px;
 line-height: 120%;
 color: #333333;
 font-family: 'Noto Sans JP', sans-serif;
 font-weight: 400;
}

hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
strong {
 font-weight: 700;
}
.br-mb {
 display: none;
}
.br-pc {
 display: block;
}
header {
 top: 0;
 width: 100%;
 background-color: #ffffff;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 border-bottom-color: #eeeeee;
}
footer {
 text-align: center;
 margin-top: 20px;
}
address {
 font-style: normal;
}
.cont {
 width: 850px;
 margin: 0 auto;
 text-align: center;
}
/*--ヘッダー部分--*/
.header_cont {
 width: 850px;
 margin: 0 auto;
 height: 90px;
 position: relative;
}
.header_title {
 position: absolute;
 left: 5px;
 width: 100%;
 text-align: left;
 height: 80px;
}
.logo {
 position: absolute;
 top: 10px;
 /*font-family: Verdana;*/
}
.msg {
 position: absolute;
 top: 30px;
 left: 170px;
 width: 500px;
 text-align: center;
 font-size: 1.4rem;
}
.header_inq {
 width: 350px;
 position: absolute;
 top: 100px;
 right: 10px;
 text-align: right;
}
.mail {
 font-family: Garamond;
 font-size: 22px;
 margin-top: 5px;
}
.otoi {
 position: relative;
 top: 5px;
}
.osirase {
 position: relative;
 top: 15px;
}
/*--カートのアイコン部分--*/
.header_cart {
 width: 60px;
 height: 80px;
 position: absolute;
 right: 5px;
}
.cart_icon {
 position: absolute;
 right: 0;
 width: 50px;
 height: 50px;
 bottom: 0;
}
.circle {
 position: absolute;
 bottom: 30px;
 left: 28px;
 width: 21px;
 height: 21px;
}
.circle_img {
 z-Index: 1;
}
#amount {
 position: absolute;
 bottom: 4px;
 width: 17px;
 height: 15px;
 right: 3px;
 z-Index: 2;
 font-weight: bold;
 color: #ffffff;
 text-align: center;
}
/*--コンテンツのボックス--*/
.main {
 margin: 60px auto;
}
.main_cart {
 margin: 60px auto;
}
.navi {
 margin-top: 80px;
}
.howtobox {
 border: 2px solid #FFEC8A;
 margin: 1em auto;
 text-align: left;
 padding: 1em;
 border-radius: 8px;
}
/*------フォーム-------*/
input[type=text], textarea {
 border: 1px solid #999999;
 border-radius: 3px;
 margin-bottom: 1px;
}
select {
 border: 1px solid #999999;
 width: 120px;
}
input[type=text] {
 height: 2.8em;
 box-sizing: border-box;
}
select {
 height: 40px;
 box-sizing: border-box;
}
textarea {
 box-sizing: border-box;
 line-height: 1.25;
 padding: 4px;
}

.selectbox {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.selectbox::after {
    position: absolute;
    right: 15px;
    width: 10px;
    height: 7px;
    background-color: #535353;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}

.selectbox select {
    appearance: none;
    min-width: 160px;
    height: 2.8em;
    padding: .4em calc(.8em + 30px) .4em .8em;
    border: 1px solid #999999;
    border-radius: 3px;
    background-color: #fff;
    color: #333333;
    font-size: 1em;
    cursor: pointer;
}
/*-------ボタン-------*/
.btn {
 padding: 8px 15px;
 background-color: #365ea5;
 border-radius: 4px;
 border-style: solid;
 border-color: #365ea5;
 border-width: 1px;
 color: #ffffff;
 font-weight: bold;
}
/*-------その他-------*/
.cl {
 width: 100%;
}
.cl:after {
 content: "";
 display: block;
 clear: both;
}
.zaiko {
 text-align: center;
 color: #FFF;
 background-color: #F00;
 margin: 0 5px;
 font-weight: bold;
}
/*------以下はスマートフォン用の表示-------*/
@media screen and (max-width:600px) {
 /*------全体-------*/
 body {
  font-size: 15px;
  line-height: 150%;
 }
 .strong {
  font-size: 1.2em;
 }
 .br-mb {
  display: block;
 }
 .br-pc {
  display: none;
 }
 .cont {
  width: 100%;
 }
 /*------ヘッダー-------*/
 .header_cont {
  width: 100%;
 }
 .header_title {
  width: 98%;
  text-align: center;
 }
 .header_inq {
  display: none;
 }
 .logo {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
 }
 .msg {
  font-size: 1.1rem;
  width: 90%;
  top: 100px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
 }
 /*------部品-------*/
 #amount {
  bottom: 8px;
  right: 2px;
 }
 .howtobox {
  width: 90%;
  padding: 0.5em;
  font-size: 0.8rem;
  margin: 1em auto;
 }
}