@charset "utf-8";
/* CSS Document */
/*-- **ページ全体　余白無くす ↓↓ --*/
section.p-i-koukan {
  max-width: 928px;
  margin: 0 auto;
  padding: 1% 3%;
  box-sizing: border-box;
}
/*------------------------------------------------------
　　　　　　　top SP
------------------------------------------------------*/
/*top＿親ブロック*/
#top {
  padding: 10% 0;
  background-color: #ffe82c;
  color: #323333;
  font-weight: 600;
  font-style: normal;
}
/*top＿見出し*/
#top_p1 {
  text-align: center;
  font-size: 1.65em;
  line-height: 1.5em;
  letter-spacing: 0.25em;
}
/*top＿タイトル_交換サービス*/
#top_ttl {
  margin: auto;
  width: 76%;
  padding: 7% 0;
}
/*チェックボックス_テキスト*/
.top-p1, .top-p2 {
  margin: 0 8%;
  font-size: 1.35em;
  line-height: 1.5em;
  letter-spacing: 0.25em;
}
/*チェックボックス_画像*/
.top-p1 img, .top-p2 img {
  width: 7%;
  margin: 0 2% 0;
}
/*チェックボックス_テキスト「安心度」*/
.top-p1 span {
  color: #6bbc1d;
}
/*チェックボックス_テキスト「満足度」*/
.top-p2 span {
  color: #e61f19;
}
/*------------------------------------------------------
　　　　　　　top PC
------------------------------------------------------*/
@media screen and (min-width:450px) {
  /*top＿親ブロック*/
  #top {
    padding: 6% 0;
  }
  #top img {
    max-width: 100%;
  }
  /*top＿タイトル_交換サービス*/
  #top_ttl {
    width: 32%;
    padding: 3% 0;
  }
  #top_p1 {
    font-size: 2.8em;
    line-height: 1.5em;
    letter-spacing: 0.25em;
  }
  /*チェックボックス_テキスト*/
  .top-p1, .top-p2 {
    margin: 0 22% 1%;
    font-size: 1.9em;
    line-height: 1.5em;
    letter-spacing: 0.25em;
  }
  .top-p1 img, .top-p2 img {
    width: 7%;
  }
}
/*------------------------------------------------------
　　　　　　　cont SP
------------------------------------------------------*/
/*cont＿親ブロック*/
#cont {
  text-align: center;
  background-color: #fff;
  padding: 9% 0;
}
/*cont＿見出し*/
#cont h3 {
  text-align: center;
  margin: 0 0 8%;
  color: #323333;
  font-weight: 600;
  font-style: normal;
  font-size: 1.45em;
  line-height: 1.5em;
  letter-spacing: 0.2em;
}
/*cont＿ulボックス*/
#cont ul {
  text-align: center;
  color: #323333;
  font-weight: 600;
  font-style: normal;
  padding: 0 5% 7%;
}
/*cont＿幹事の悩み、当選者の悩み*/
#cont ul p {
  width: 53%;
  margin: auto;
}
/*cont＿リスト*/
#cont ul li {
  text-align: center;
  width: 90%;
  margin: auto;
}
/*cont＿リスト_フキダシ設定＿左←*/
#cont ul li.left {
  position: relative;
  display: inline-block;
  margin: 1% 15px;
  padding: 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 2px #7f7f80;
  box-sizing: border-box;
  border-radius: 3px;
}
#cont ul li.left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -23px;
  margin-top: -10px;
  border: 10px solid transparent;
  border-right: 17px solid #FFF;
  z-index: 2;
}
#cont ul li.left:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -27px;
  margin-top: -10px;
  border: 10px solid transparent;
  border-right: 17px solid #7f7f80;
  z-index: 1;
}
#cont ul li.left p {
  margin: 0;
  padding: 0;
}
/*cont＿リスト_フキダシ設定＿右→*/
#cont ul li.right {
  position: relative;
  display: inline-block;
  margin: 1% 15px;
  padding: 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 2px #7f7f80;
  box-sizing: border-box;
  border-radius: 3px;
}
#cont ul li.right:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -23px;
  margin-top: -10px;
  border: 10px solid transparent;
  border-left: 17px solid #FFF;
  z-index: 2;
}
#cont ul li.right:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -27px;
  margin-top: -10px;
  border: 10px solid transparent;
  border-left: 17px solid #7f7f80;
  z-index: 1;
}
#cont ul li.right p {
  margin: 0;
  padding: 0;
}
/*グレーダウンのボックス*/
#cont_down {
  width: 100%;
  background-color: #cbcbcb;
  margin: 0 0 39%;
}
/*グレーダウン_画像*/
#cont_down div {
  margin: auto;
  width: 48%;
  padding: 5% 0 1%;
}
/*グレーダウン_イベントが～*/
#cont_down p {
  text-align: center;
  padding: 0 0 10%;
  color: #323333;
  font-weight: 600;
  font-style: normal;
  font-size: 1.7em;
  line-height: 1.5em;
  letter-spacing: 0.1em;
}
/*------------------------------------------------------
　　　　　　　cont PC
------------------------------------------------------*/
@media screen and (min-width:450px) {
  #cont {
    padding: 6% 0;
  }
  #cont h3 {
    margin: 0 0 6%;
  }
  #cont img {
    max-width: 100%;
  }
  /*cont＿幹事の悩み、当選者の悩み*/
  #cont ul {
    width: 48%;
    display: inline-block;
    vertical-align: top;
  }
  #cont ul p {
    width: 70%;
  }
  /*cont＿リスト*/
  #cont ul li {
    float: none;
  }
  #cont ul li.left {
    margin: 4% 15px;
  }
  #cont ul li.right {
    margin: 3% 15px;
  }
  /*グレーダウンのボックス*/
  #cont_down {
    margin: 0 0 14%;
  }
  /*グレーダウン_画像*/
  #cont_down div {
    width: 25%;
  }
  #cont_down p {
    padding: 0 0 7%;
  }
}
/*------------------------------------------------------
　　　　　　　service
------------------------------------------------------*/
/*service＿親ブロック*/
#service {
  background-color: #fff;
  text-align: center;
  color: #323333;
  font-weight: 600;
  font-style: normal;
}
/*service＿そんなお悩みは*/
#service_cat {
  margin: auto;
  width: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: absolute;
  top: -14%;
  left: 15%;
}
/*黄色サービスのボックス*/
#service_box {
  background-color: #ffe82c;
  margin: 0 0 20%;
  padding: 8% 0 9%;
  position: relative;
}
/*黄色サービスのボックス＿タイトル*/
#service h3 {
  margin: auto;
  width: 48%;
}
/*黄色サービスのボックス＿リスト*/
div#service ul {
  padding: 4%;
}
div#service ul li {
  padding: 5% 0 8%;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9);
  list-style: none;
}
/*黄色サービスのボックス＿リスト_アイコン*/
.service_li_icon {
  margin: 0 auto 4%;
  width: 18%;
}
/*黄色サービスのボックス＿リスト_数字*/
.service_li_txt {}
/*黄色サービスのボックス＿リスト_見出し*/
.service_li_notxt {
  display: inline-block;
  text-align: center;
  width: 87%;
  padding: 0 0 2%;
  color: #e61f19;
  font-weight: 600;
  font-style: normal;
  font-size: 1.7em;
  line-height: 1.5em;
  letter-spacing: 0.01em;
}
/*黄色サービスのボックス＿リスト_説明文*/
div#service ul li p {
  text-align: center;
  color: #323333;
  font-weight: 600;
  font-style: normal;
  font-size: 1.2em;
  line-height: 1.25em;
  letter-spacing: 0.01em;
}
/*------------------------------------------------------
　　　　　　　service PC
------------------------------------------------------*/
@media screen and (min-width:450px) {
  #service img {
    max-width: 100%;
  }
  /*service＿そんなお悩みは*/
  #service_cat {
    width: 32%;
    top: -8%;
    left: 33%;
  }
  /*黄色サービスのボックス＿タイトル*/
  #service h3 {
    width: 22%;
    padding: 0 0 1%;
  }
  /*黄色サービスのボックス＿リスト*/
  div#service ul {
    padding: 2% 4%;
  }
  div#service ul li {
    float: none;
    padding: 5% 0 6%;
    list-style: none;
  }
  /*黄色サービスのボックス＿リスト_アイコン*/
  .service_li_icon {
    width: 9%;
  }
  /*黄色サービスのボックス＿リスト_見出し*/
  .service_li_notxt {
    width: 50%;
  }
}