@charset "utf-8";
* {
 margin: 0;
 padding: 0;
}
h1 {
 font-size: 2.4em;
 letter-spacing: 0.04em;
}
h2 {
 color: #626262;
 font-size: 2.2em;
 letter-spacing: 0.05em;
}
h3 {
 font-size: 1.2em;
 color: #2e3538;
 letter-spacing: 0.01em;
}
h4 {
 color: #626262;
 letter-spacing: 0.04em;
}
h5 {
 letter-spacing: 0.04em;
}
body {
 border-top: 6px solid #85bbc7;
 font-family: "Hiragino Kaku Gothic Pro", sans-serif, Meiryo, "MS PGothic", "MS UI Gothic", Helvetica, Arial;
 color: #2e3538;
 line-height: 1.7;
}
#mainWrapper {
 width: 100%;
 margin: 0 auto;
}
header {
 width: 1000px;
 margin: 0 auto;
}

/*ロゴ*/
#logo {
 float: left;
 padding-top: 20px;
 padding-bottom: 8px;
 padding-left: 10px;
 width: 235px;
 text-align: center;
}
#logo img {
 width: 100%;
}
#logo img:hover {
 opacity: 0.5;
}


/*ヘッダー*/
#offer {
 font-family: "Hiragino Kaku Gothic Pro", sans-serif, Meiryo, "MS PGothic", "MS UI Gothic", Helvetica, Arial;
 clear: both;
 color: #2e3538;
 background-color: #bedde4;
 padding-left: 115px;
 padding-top: 50px;
 padding-bottom: 50px;
}


/*メインコンテンツ*/
#content {
 width: 1000px;
 clear: both;
 overflow: auto;
 padding-top: 40px;
 margin: 0 auto;
}
.download {
 width: 600px;
 margin: 0 auto;
}
.download p {
 margin-bottom: 15px;
}
.howto-container {
 overflow: hidden;
 height: auto;
 border: dotted 2px #cccccc;
 margin-top: 20px;
 margin-bottom: 30px;
}
.howto-container h4 {
 text-align: center;
 margin-bottom: 10px;
}
.howto-pc {
 padding: 4%;
 text-align: left;
}
.hidden_box label {
 cursor: pointer;
 color: #626262;
 font-weight: bold;
 transition: .5s;
}
.howto-label {
 text-align: center;
 margin-top: 10px;
 margin-bottom: 20px;
}
.hidden_box label:hover {
 color: #AA56CC;
 text-decoration: underline;
}
.hidden_box label:before {
 display: inline-block;
 content: '\f054';
 font-family: 'FontAwesome';
 padding-right: 5px;
 transition: 0.2s;
}
.hidden_box input {
 display: none;
}
.hidden_box .howto-sp-hidden {
 height: 0;
 padding: 0;
 overflow: hidden;
 opacity: 0;
 transition: 0.8s;
}
.hidden_box input:checked~.howto-sp-hidden {
 padding: 10px 0;
 height: auto;
 opacity: 1;
}
.mainContent {
 float: left;
 width: 1000px;
 text-align: center;
 margin-bottom: 30px;
}
.productRow {
 margin-top: 60px;
 overflow: hidden;
}
.mainContent .productRow .productInfo {
 float: left;
 padding-left: 3%;
 padding-right: 3%;
 width: 27%;
 margin-top: 10px;
 margin-bottom: 75px;
}
.oil-document-title a {
 text-decoration: none;
 color: #2e3538;
}
.productContent a {
 text-decoration: none;
 color: #929292;
}
#content a:hover {
 text-decoration: underline;
 color: #AA56CC;
}
.oil-document-title {
 font-family: "Hiragino Kaku Gothic Pro", sans-serif, Meiryo, "MS PGothic", "MS UI Gothic", Helvetica, Arial;
 color: #2e3538;
 text-decoration: none;
 font-size: 17px;
 position: relative;
 margin-top: 8px;
}
.productContent {
 position: relative;
 font-size: 13px;
 font-family: s"Hiragino Kaku Gothic Pro", sans-serif, Meiryo, "MS PGothic", "MS UI Gothic", Helvetica, Arial;
 font-style: normal;
 font-weight: 200;
 color: #929292;
 white-space: pre-wrap;
 margin-top: 5px;
}
.productInfo div img {
 width: 100%;
}
.productInfo div img:hover {
 opacity: 0.5;
}

/*ダウンロードボタン*/
input {
 cursor: pointer;
 cursor: hand;
 -webkit-appearance: none;
}
.productRow .productInfo .downloadButton {
 position: relative;
 width: 85%;
 background-color: #e49f9a;
 height: 35px;
 color: #FFFFFF;
 border-style: none;
 border-radius: 5px;
 box-shadow: 0 4px #ca635b;
 font-size: 15px;
 margin-top: 9px;
}
.productRow .productInfo .downloadButton:hover {
 box-shadow: none;
 position: relative;
 top: 4px;
}

/*ORDER*/
#order {
 width: 100%;
 margin: 0 auto;
}
.order-container {
 width: 100%;
 margin-bottom: 60px;
}
.order-title {
 width: 100%;
 margin: 0 auto;
 padding-bottom: 30px;
 text-align: center;
}
.order-product {
 width: 250px;
 margin: 0 auto;
 text-align: center;
}
.order-product .order-bpt {
 width: 250px;
 height: auto;
}
.order-product a {
 font-size: 14px;
 color: #929292;
 text-decoration: none;
 text-align: center;
 padding: 5px;
}
.order-product a:hover {
 text-decoration: underline;
 color: #AA56CC;
}
.order-product img {
 width: 100%;
}
.order-product img:hover {
 opacity: 0.5;
}


/*OPTION*/
#option {
 width: 100%;
 margin: 0 auto;
}
.option-container {
 width: 100%;
 margin-bottom: 60px;
}
.option-title {
 width: 100%;
 margin: 0 auto;
 padding-bottom: 30px;
 text-align: center;
}
.option-product {
 width: 600px;
 margin: 0 auto;
 overflow: hidden;
 text-align: center;
}
.option-product .option-01 {
 width: 250px;
 height: auto;
 float: left;
 margin: 10px;
 padding-bottom: 25px;
}
.option-product .option-02 {
 width: 250px;
 height: auto;
 float: right;
 margin: 10px;
 padding-bottom: 25px;
}
.option-product .option-03 {
 width: 250px;
 height: auto;
 float: left;
 margin: 10px;
}
.option-product .option-04 {
 width: 250px;
 height: auto;
 float: right;
 margin: 10px;
}
.option-product a {
 font-size: 14px;
 color: #929292;
 text-decoration: none;
 text-align: center;
 padding: 5px;
}
.option-product a:hover {
 text-decoration: underline;
 color: #AA56CC;
}
.option-product img {
 width: 100%;
}
.option-product img:hover {
 opacity: 0.5;
}

/*HPIトップに戻る*/
.hpi--top {
 width: 100%;
 text-align: center;
}
.hpi--top img {
 padding: 20px 40px;
 border: 1px solid #ccc;
 margin-bottom: 5px;
}
.hpi--top img:hover {
 opacity: 0.5;
}
.hpi--top p {
 margin-bottom: 45px;
}
.hpi--top a {
 color: #666;
 margin-bottom: 45px;
 text-decoration: none;
}
.hpi--top a:hover {
 text-decoration: underline;
}

/*FAQ*/
.faqContent {
 width: 800px;
 margin: 0 auto;
 padding-bottom: 30px;
}
.faq--title {
 text-align: center;
 padding-bottom: 30px;
}
.faq {
 padding-bottom: 90px; /* 各Q&Aの間の余白 */
}
.faq__dt, .faq__dd {
 font-family: "Hiragino Kaku Gothic Pro", sans-serif, Meiryo, "MS PGothic", "MS UI Gothic", Helvetica, Arial;
 color: #2e3538;
 text-decoration: none;
 position: relative;
 padding-left: 35px;
}
.faq__dt::before, .faq__dd::before {
 font-weight: bold;
 position: absolute;
 left: 0;
 top: 0;
}
.faq__dt {
 font-size: 23px;
 letter-spacing: 0.02em;
 position: relative;
 border-bottom: 1px solid #ccc;
 margin-bottom: 20px;/* 下余白 */
 padding-bottom: 6px;
}
.faq__dt::before {
 content: 'Q.';
 font-size: 24px;
 color: #85bbc7; /* 「Q」の文字色 */
 margin-top: -1px;
}
.faq__dd::before {
 content: 'A.';
 font-size: 24px;
 color: #d68882; /* 「A」の文字色 */
 margin-top: -9px;
}

/*トップページに戻る*/
.return {
 text-align: center;
 margin-bottom: 45px;
}
.return a {
 color: #666;
 text-decoration: none;
}
.return a:hover {
 text-decoration: underline;
}


/*CONTACT*/
#contact {
 font-family: "Hiragino Kaku Gothic Pro", sans-serif, Meiryo, "MS PGothic", "MS UI Gothic", Helvetica, Arial;
 clear: both;
 background-color: #f6f6f6;
 color: #2e3538;
 width: 100%;
 overflow: hidden;
}
.contact-container {
 width: 80%;
 height: 150px;
 padding-top: 50px;
 margin: 0 auto;
}
.contact-intro {
 width: 46%;
 padding-top: 7px;
 margin: 0 auto;
 float: left;
}
.contact-telemail {
 width: 45%;
 padding-left: 30px;
 padding-right: 0;
 padding-top: 15px;
 padding-bottom: 15px;
 float: right;
 background-color: #ffffff;
}


/*フッター*/
footer {
 clear: both;
 overflow: auto;
 background-color: #9FA0A0;
 font-family: "Hiragino Kaku Gothic Pro", sans-serif, Meiryo, "MS PGothic", "MS UI Gothic", Helvetica, Arial;
 font-style: normal;
 font-weight: 200;
 line-height: 1.8;
 text-align: center;
 padding-top: 25px;
 padding-left: 22px;
 padding-right: 22px;
 padding-bottom: 20px;
}
footer .footer-container {
 width: 80%;
 margin: 0 auto;
}
footer .footerlinks {
 width: 50%;
 float: left;
 color: #FFFFFF;
 text-align: justify;
}
footer .footerlinks a {
 color: #FFFFFF;
 display: block;
 text-decoration: none;
 text-align: center;
 padding-left: 5%;
 padding-right: 5%;
}
footer .footerlinks {
 font-size: 14px;
}
footer a:hover {
 color: #2e3538;
}

/*コピーライト*/
.copyright {
 clear: both;
 overflow: auto;
 background-color: #9FA0A0;
 font-family: "Hiragino Kaku Gothic Pro", sans-serif, Meiryo, "MS PGothic", "MS UI Gothic", Helvetica, Arial;
 font-style: normal;
 font-weight: 200;
 font-size: 12px;
 padding-left: 22px;
 text-align: center;
 padding-right: 22px;
 padding-top: 24px;
 padding-bottom: 13px;
 border-top: 1px solid #cccccc;
}
.copyright p {
 color: #FFFFFF;
}

/*タブレット*/
@media screen and (max-width:768px) {
 body {
  width: 100%;
 }
 #mainWrapper {
  width: 100%;
 }
 header {
  width: 100%;
 }
 #logo {
  padding-top: 15px;
  padding-bottom: 5px;
  padding-left: 3%;
 }
 #offer {
  padding-left: 7%;
  padding-top: 35px;
  padding-bottom: 35px;
 }
 #content {
  width: 100%;
 }
 #mainWrapper #content .mainContent {
  overflow: hidden;
  width: 100%;
 }
 .download {
  width: 80%;
  margin-bottom: 45px;
 }
 .mainContent .productRow .productInfo {
  float: left;
  padding-left: 5%;
  padding-right: 5%;
  width: 40%;
 }
 .productRow .productInfo .oil-document-title {
  font-size: 19px;
 }
 .productRow .productInfo .productContent {
  font-size: 16px;
 }
 .productRow .productInfo .buyButton {
  font-size: 15px;
 }
 .productRow .productInfo .downloadButton:active {
  box-shadow: none;
  position: relative;
  top: 4px;
 }
#order {
  width: 85vw;
  margin:0 auto;
 }
 .order-title {
  width: 100%;
 }
 .order-product {
    width: 45%;
 }
 .order-product .order-bpt {
 	width: 100%;
 }
#option {
  width: 85vw;
  margin:0 auto;
 }
 .option-title {
  width: 100%;
 }
 .option-product {
   width: 100%;
 }
 .option-product .option-01 {
   width: 45%;
 }
  .option-product .option-02 {
   width: 45%;
 }
  .option-product .option-03 {
   width: 45%;
 }
  .option-product .option-04 {
   width: 45%;
 }
 .faqContent {
 	width: 85vw;
 }
 .qa-list dl {
  position: relative;
  padding: 15px 40px 15px 10px;
 }
 .qa-list dl::before {
  top: 20px;
  right: 20px;
  width: 7px;
  height: 7px;
 }
 .qa-list dl dt {
  padding: 0 0 0 30px;
  font-size: 14px;
 }
 .qa-list dl dt::before {
  font-size: 14px;
  top: 3px;
  left: 5px;
  content: 'Q.';
 }
 .qa-list dl dd::before {
  font-size: 14px;
  top: 5px;
  left: 5px;
  content: 'A.';
 }
 .qa-list dl dd {
  margin: 10px 0 0;
  padding: 0 0 0 30px;
  font-size: 14px;
 }
 .qa-list dl dd p {
  margin: 30px 0 0;
 }
 .qa-list dl dd p:first-child {
  margin-top: 0;
 }
 .contact-container {
  height: auto;
  padding-top: 30px;
  padding-bottom: 45px;
 }
 .contact-intro {
  width: auto;
  padding-bottom: 30px;
  float: none;
  text-align: center;
 }
 .contact-telemail {
  width: 80%;
  margin: 0 auto;
  float: none;
 }
 footer .footer-container {
  width: 100%;
 }
}

/*スマホ*/
@media screen and (max-width:480px) {
 h1 {
  font-size: 2em;
 }
  #logo {
  padding-top: 10px;
  padding-bottom: 3px;
  padding-left: 3%;
 }
 #offer {
  padding: 3%;
 }
 .download {
  width: 90%;
  margin-bottom: 60px;
 }
 .mainContent .productRow .productInfo {
  float: none;
  width: 80%;
  margin: 0 auto;
  padding-bottom: 90px;
 }
 #order {
  width: 95vw;
  }
  #option {
  width: 95vw;
  }
 .contact-telemail {
  width: 90%;
  padding-left: 20px;
  padding-right: 0px;
  margin: 0 auto;
 }
}