@charset "UTF-8";
/*!
 *style css
*/

/*
primary #0080cc
薄青 #e8f4fa
文字色 #363636
*/

/* 基本設定 */
html {
  font-size: 1rem;
}
body {
    color:;
    margin:0;
    padding:0;
    font-size:1rem;
    font-feature-settings : "palt";
	  line-height:1.75em;
	  padding-top: 0px; /* ヘッダー分下げたい場合に必要 */
	  font-family:Noto Sans JP lighter,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
	  overflow-wrap: break-word;/*可能な限り禁則処理が保持される*/
    word-wrap: break-word; /*英単語の折り返し*/
    text-align: justify; /*文字組均等割*/
    text-justify: inter-ideograph;
	    -ms-text-justify: inter-ideograph; /*両端揃え*/
    background-image:url("../images/headimg_bg.png"); background-size:3000px; background-position:top -460px center; background-repeat: no-repeat;
}
@media screen and (max-width: 768px) {
  body {
    background-image:url("../images/headimg_bg.png"); background-size:570%; background-position:top center; background-repeat: no-repeat;
  }
}
img {
  margin:0;
  padding:0;    
}
button {
  border:none;
}
.container {max-width: 1020px;}
button, .button, .btn {box-shadow: none;}

/*! Tools =================================================================*/
.imghover:hover {
  opacity:0.5;
	transition:0.3s;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 768px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

/* スクロールすると下からふわっとさせるためのコード [ fadein ] */
.fadein {
  /* 30px下げる */
  transform: translateY(30px);
  /* 要素を透明にする */
  opacity: 0;
  /* 2秒かけて、変化させる */
  transition: transform 2s, opacity 2s;
}
.fadein.show {
  transform: translateY(0);
  opacity: 1;
}


/*! Nav =================================================================*/
nav .container-fluid, .navbar, .navbar-brand{
  margin:0px;
  padding:0px;
  padding-right: 0.2rem;
}
nav .navbar-nav {
  margin:0px auto;
}
@media screen and (max-width: 768px) {
  nav .navbar-nav {
    margin:10px 20px;
  }
}
.navbar-nav li {
  font-size:0.8rem;
}
@media screen and (max-width: 1125px) {
  .navbar-nav li {
    font-size:0.7rem;
  }
}
@media screen and (max-width: 1100px) {
  .navbar-nav li {
    font-size:0.65rem;
  }
}
@media screen and (max-width: 1080px) {
  .navbar-nav li {
    font-size:0.63rem;
  }
}
@media screen and (max-width: 1019px) {
  .navbar-nav li {
    font-size:0.8rem;
  }
}
.nav-btn li{
  list-style:none;
  float:left;
}
.nav-btn-sp{
  position: absolute;
  right: 80px;
  top:3px;
}
.nav-btn-sp ul{
  margin:0;
  padding:0;
}
.nav-btn-sp li {
  list-style:none;
  margin:0;
  padding:0;
}
.nav-btn-sp img {
  display:block;
  margin:0;
  padding:0;
}

/*! Modal =================================================================*/
.modal-content{
  border-radius: 10px;
}
.modal-header{border:none;}
.form-select{
  box-shadow: none;
}

/*! Head IMG =================================================================*/

.headimg .h-img{
  width: 100%;
  height: auto;
  padding:0px;
  margin:0px;
  padding-top: 50px;
}

.h-img{
  position:relative;
  padding:0px;
  margin:0px;
}
.bg-circle {background-color: #f1f8ea;}

/*! OrderArea =================================================================*/
.orderarea {margin-bottom:4rem; margin-top: 2rem;}
.orderarea_btn {margin-top: -1.8rem;}
@media screen and (max-width: 768px){
  .orderarea_btn {margin-top: 1rem;}
}

/*! RefreshArea =================================================================*/
.refresharea{background-color: #ffffe5;}
.refresharea h3{
  line-height: 2.5rem;
  position: relative;
  font-weight: bold;
  text-align: center;
}
.refresharea h3::before {
  content: '';
  position: absolute;
  top: 75%;
  left: 0;
  right: 0;
  border-top: 1px solid #6fba2c;
}
.refresharea h3 > span {
  position: relative;
  display: inline-block;
  padding: 0 15px;
  background-color: #ffffe5;
}
@media screen and (max-width: 768px){
  .refresharea h3 {line-height: 2rem;}
  .refresharea h3::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border-top: 1px solid #6fba2c;
  } 
}
.refresh_cap {
  font-size: 0.8rem;
}
.refresh_table {
  border: 1px solid #6fba2c;
  background-color: #fff;
  width: 100%;
}
.refresh_table th, .refresh_table td {
  border: 1px solid #6fba2c;
  background-color: #fff;
  padding:0.1rem 0.3rem;
}
.refresh_table th {
  text-align: center;
}
.bg-flat {background-color: #000;}
.refresharea ul {list-style:none;}
.refresharea ul li{
  background:url(../images/refresh_checkbox.png) no-repeat 0 0;
  background-size:auto 20px;
  padding-left: 30px;
}
.refresh_check {
    display: inline-block;
    padding: 2rem 1rem;
    background: linear-gradient(to top, #ffffe5 0%, #dbeeca 30%, #dbeeca 100%);
}
.refresh_28 {
  background-color: #fff;
  padding:1rem 2rem;
  border: 1px solid #6fba2c;
  font-size: 0.8rem;
  line-height: 1.4rem;
}

/*! ThreeSafety =================================================================*/
.threesafety_title {
  display: flex; /* 子要素を横並びにする */
  position: relative;
  align-items: center; /* 子要素を垂直方向の中央に揃える */
  z-index: 50;
}
.heading-text {
  margin-left: 15px; /* テキストと画像の間の余白 */
  margin-top: 20px;
}
.heading-image {
  width: 150px; /* 画像の幅を指定 */
  height: auto;
}
.threesafety_title h2 {
  border-bottom: 2px solid #6fba2c;
  width: 100%;
  padding-bottom: 10px; 
}
.threesafety_box {margin-left:165px;}

.threesafety_textbox {
  background-color: #e2f1d5;
  padding:1.1rem;
  width: 29rem;
  border-radius: 10px;
  margin-top: 1.5rem;
  font-size: 1.4rem;
  line-height: 2.1rem;
  margin-bottom: 0px;
}
.threesafety_grd {
  background-image: linear-gradient(90deg, #ffffff, #e2f1d5);
  margin-top: -2.7rem;
  padding-top:5rem;
  padding-bottom:4rem;
}
.threesafety_grd2 {
  background-image: linear-gradient(90deg, #ffffff, #e2f1d5);
  margin-top: -4.3rem;
  padding-top:5rem;
  padding-bottom:4rem;
}
.text_wavy {
  text-decoration:underline wavy;
  text-underline-offset: 5px; 
}
@media screen and (max-width: 768px) {
  .threesafety_box {margin-left:0px;}
  .threesafety_txt {text-align: center;}
  .threesafety_grd img {width: 200px;}
  .threesafety_title img {width: 20%;}
  .heading-text{margin-top: 8px;margin-left: 5px;}
  .threesafety_grd {margin-top: -1.6rem;padding-top:3rem;padding-bottom:2rem;margin-bottom: 1rem;}
  .threesafety_grd2 {margin-top: -2.7rem;padding-top:2rem;padding-bottom:2rem;margin-bottom: 1rem;}
  .threesafety_textbox {width: 100%;}
}

/*! UserVoice =================================================================*/
.uservice_title {
  color: #6fba2c;
  font-size: 1.4rem;
  border-bottom: 2px dotted #6fba2c;
  width: 100%;
  padding-bottom: 5px; 
  margin-bottom:0.5rem;
}
.uservoice_number {
  color: #fff;
  background-color: #6fba2c;
  padding:0.5rem 1rem;
  font-size: 1.5rem;
  font-weight: bold;
}
.uservoice_voice {
  background-color: #e2f1d5;
  padding:1rem;
  border-radius: 15px;
  margin-top: 1rem;
}
.uservoice_img img {
  width:100%;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .uservoice_img img {
    width:50%;
    text-align: center;
    padding:2rem;
  }
}
.uservoice_voice_txt {font-size: 0.9rem; line-height: 1.7rem;}
.uservoice_voice_r {
  position: relative;
  display: inline-block;
  margin-left: 16px;
  padding: 16px;
  border-radius: 15px;
  background-color: #e9f5df;
}

.uservoice_voice_r::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  border-style: solid;
  border-width: 8px 16px 8px 0;
  border-color: transparent #e9f5df transparent transparent;
  translate: -100% -50%;
  transform: skew(0, -10deg);
  transform-origin: right;
}
.uservoice_voice_l {
  position: relative;
  display: inline-block;
  margin-right: 16px;
  padding: 16px;
  border-radius: 15px;
  background-color: #e9f5df;
}
.uservoice_voice_l::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #e9f5df;
  translate: 100% -50%;
  transform: skew(0, -10deg);
  transform-origin: left;
}

@media screen and (max-width: 768px){
  .uservoice_voice_r::after, .uservoice_voice_l::after {
    border-style: none;
  }
}


/*! Inquiry =================================================================*/
.inquiry .inquiry_q {line-height: 2rem;}
.inquiry .inquiry_a {margin-left: 2rem;}
@media screen and (max-width: 768px){
  .inquiry .inquiry_a {margin-left: 0;}  
}

/*! Spec =================================================================*/
.spec_table {
  width: 100%;
}
.spec_table th, .spec_table td {
  border: 1px solid #fff;
  border-collapse: collapse;
  border-bottom: 10px solid #fff;
}
.spec_table tr {
  margin-bottom: 0.5rem;
}
.spec_table th {
  padding:0.5rem;
  background-color: #999999;
}
.spec_table td {
  padding:0.5rem;
  background-color: ##e5e5e5;
}
@media screen and (max-width: 768px) {
  .spec_table {
    width: 100%;
  }
  .spec_table tr, .spec_table td, .spec_table th {
    display: block; /* ブロック要素にする */
    text-align: center;
    border: none;
  }
}
@media screen and (max-width: 576px) {
  .spec_table2 {margin-top: -1.2rem;}
}

/*! Order =================================================================*/
.gradation_red {
    display: inline-block;
    padding: 0.5em 6em;
    background: linear-gradient(to right, #fff 0%, #e64756 30%, #e64756 70%, #fff 100%);
    color: #fff;
    font-size: 24px;
}
.gradation_green {
    display: inline-block;
    padding: 0.5em 6em;
    background: linear-gradient(to right, #ffffed 0%, #6fba2c 30%, #6fba2c 70%, #ffffed 100%);
    color: #fff;
    font-size: 24px;
}
.order_txt {
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.5rem;
}
.inquiry_txt {
  text-align: left;
  font-size: 0.8rem;
  line-height: 1.3rem;
}
.order_inquiry {
  background-color: #ffffed;
}

/*! Footer =================================================================*/
.groupinfo {
  background-color: #e5e5e5;
}
.groupinfo_box {
  display: flex; /* 子要素を横並びにする */
  align-items: center; /* 子要素を垂直方向の中央に揃える */
}
.groupinfo-text {
  margin-left: 15px; /* テキストと画像の間の余白 */
  margin-top: 20px;
}
.groupinfo-image {
  width: 60px; /* 画像の幅を指定 */
  height: auto;
}
.cominfo {
  background-color: #fff;
  padding: 2rem;
}
.cominfo_box {
  display: flex; /* 子要素を横並びにする */
  align-items: center; /* 子要素を垂直方向の中央に揃える */
}
.cominfo-text {
  margin-left: 15px; /* テキストと画像の間の余白 */
  margin-top: 20px;
  font-size: 0.7rem;
  line-height: 1rem;
}
.cominfo-image {
  width: 230px; /* 画像の幅を指定 */
  height: auto;
  margin-right: 3rem;
}
.address_txt {
  font-size: 0.9rem;
  line-height: 1.8rem;
}
@media screen and (max-width: 768px) {
  .cominfo_box {
    display: block; /* 子要素を横並びにする */
    align-items: center; /* 子要素を垂直方向の中央に揃える */
  }
  .cominfo-text {
  margin-left: 0px; /* テキストと画像の間の余白 */
  margin-top: 20px;
  font-size: 0.7rem;
  line-height: 1rem;
}

}
.cominfo a {
  text-decoration: none;
  color: #000;
}

/** スナックバーのデザイン **/
.c-snackbar {
  position: fixed;
  top: 17px;
  left: 50%;
  z-index: 2000;
  display: flex;
  gap: 4px;
  align-items: center;
  width: calc(100% - 40px);
  max-width: 790px;
  min-height: 56px;
  padding: 13px 0;
  visibility: hidden;
  background-color: #333;
  border-radius: 4px;
  opacity: 0;
  transition: 0.15s;
  transition:
    opacity 0.15s ease,
    visibility 0.15s ease;
  transform: translate(-50%, 0);

  &.is-active {
    visibility: visible;
    opacity: 1;
  }

  &:not(.is-active) {
    visibility: hidden;
    opacity: 0;
  }
}
.c-snackbar__text {
  width: calc(100% - 68px);
  padding: 0 0 0 14px;
  margin: 0;
  font-size: 14px;
  color: #fff;

  @include min-screen(769px) {
    padding: 0 0 0 24px;
  }
}
.c-snackbar__close {
  width: 68px;
  min-width: 68px;
  padding: 0 14px 0 0;
  font-size: 14px;
  color: #fff;
  text-align: right;
  background: transparent;

  @include min-screen(769px;) {
    padding: 0 24px 0 0;
  }
}