/** Shopify CDN: Minification failed

Line 720:0 Expected "}" to go with "{"

**/
@charset "utf-8";


body {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

p, ul {
  margin: 0;
  padding: 0;
}

img {
  width: 100%;
}

ul li {
  list-style: none;
}

.text {
  color: #646464;
  letter-spacing: 0.07em;
  line-height: 1.8em;
}

div.inner_wrap {
  width: 1000px;
  text-align: center;
  margin: 0 auto;
}

.header_wrap {
  margin-top: 120px;
}

.header_wrap p.title {
  text-align: left;
  font-size: 26px;
  font-weight: bold;
}

.header_wrap p.heading {
  text-align: left;
  font-size: 18px;
}

p.heading {
  margin-top: 60px;
}

div.heading_img {
  margin-top: 100px;
}

h2.title ,h3{
  line-height: 120%;
}

div.main_wrap {
  margin-top: 120px;
}

div.lead .title {
  text-align: left;
  font-size: 210%;
  margin-top: 30px;
  line-height: 120%;
}

div.lead .text {
  text-align: left;
  font-size: 14px;
  margin: 20px 0;
}

div.lead ul li {
  text-align: left;
  letter-spacing: 0.07em;
  line-height: 1.8em;
  color: #646464;
  font-size: 14px;
}

div.inner_wrap_item {
  margin-top: 60px;
}

div.content p {
  text-align: left;
}

div.content p.item_num {
  margin-top: 65px;
}

div.content p.title {
  margin-top: 35px;
}

div.content p.text {
  margin-top: 40px;
  font-size: 14px;
}

div.reccomend {
  margin-top: 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: space-between;
}

div.reccomend div.section {
  width: calc(33% - 5px);
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: #646464 1px solid;
}

div.section div {
  width: 100%;
  flex-grow: 1;
  margin-top: 40px;
  margin-left: 10px;
}

div.section div:nth-child(1) {
  flex-basis: 200px;
}

div.section div:nth-child(2) {
  flex-basis: auto;
}

div.reccomend div.section img {
  width: 100%;
}

p.item_title_r {
  font-size: 13px;
}

p.item_price_r {
  font-size: 10px;
  margin-top: 20px;
}

div.topics {
  margin-top: 50px;
}

div.topics_flex {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

div.topics_flex div {
  width: calc(33% - 10px);
  margin-top: 20px;
}

div.topics_flex p {
  font-size: 15px;
}

.fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.5s, transform 1s;
}

.fade.active {
  opacity: 1;
  transform: translateY(0px);
}

/*LINEぽい吹き出し*/

div.ballon_wrap {
  width: 800px;
  margin: 0 auto;
  text-align: center;
  justify-content: flex-start;
}

.balloon_l,
.balloon_r {
  margin: 30px 0;
  display: flex;
  align-items: flex-start;
  /*縦位置を上揃え*/
  /*  align-items: center; */
  /*縦位置を真ん中揃え*/
}

.balloon_r {
  justify-content: flex-end;
}

.faceicon img {
  width: 80px;
  /*任意のサイズ*/
  height: auto;
}

/*アイコン丸く切り抜く*/

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  /* 円形にする */
  position: relative;
  /* 基準値とする */
  overflow: hidden;
  /* はみ出た部分を非表示 */
}

.circle img {
  position: absolute;
  /* 相対位置に指定 */
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
  object-fit: cover;
  /* 画像の表示サイズを調整 ※IE非対応 */
}

.balloon_r .faceicon {
  margin-left: 25px;
}

.balloon_l .faceicon {
  margin-right: 25px;
}

.balloon_r .faceicon {
  order: 2 !important;
}

.says {
  max-width: 50%;
  /*最大幅は任意*/
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding: 17px 13px 15px 18px;
  border-radius: 12px;
  background: #00B900;
  /*色は任意*/
  box-sizing: border-box;
  margin: 0 !important;
  line-height: 1.5;
  /*   align-items: center; */
  text-align: left;
}

.says p {
  margin: 8px 0 0 !important;
}

.says p:first-child {
  margin-top: 0 !important;
}

.says:after {
  content: "";
  position: absolute;
  border: 10px solid transparent;
  /*   margin-top:-3px;  */
}

.bgleft{
  background-color: #e2e2e2;
}

.balloon_l .says:after {
  left: -26px;
  border-right: 22px solid #e2e2e2;
}

.balloon_r .says:after {
  right: -26px;
  border-left: 22px solid #00B900;
}

/*枠線ありのボックス*/

div.box1 {
  margin: 0 auto;
  text-align: center;
  padding: 50px 0;
  border: #646464 solid 1px;
}

/*文字の太さ*/

.font_bold {
  font-weight: bold;
}

/*文字下のライン*/

.font_line {
  display: inline;
  background: linear-gradient(transparent 50%, rgba(255, 228, 0, 0.4) 50%);
  text-decoration-skip-ink: none;
  /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */

  /* 背景の繰り返しを停止 */
  background-repeat: no-repeat;

  /* マーカーの横方向を0にして縮める */
  background-size: 0% 100%;

  /* マーカーが引かれる速度を指定 */
  transition: background-size 1.5s;
}

/* マーカーが引かれる際に付与するクラス */
.font_line.on {
  /* 横方向を100%にして、マーカーを引く */
  background-size: 100% 100%;
}

/*タイトルの装飾6選*/

.title_kuhaku p {
  margin-top: 50px;
}

.gothic1 {
  font-family: sans-serif;
  padding: 0.5rem 1rem;
  border-left: 6px double #000;
}

.gothic2 {
  font-family: sans-serif;
  padding: 1rem 2rem;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}

.gothic3 {
  font-family: sans-serif;
  background: #B2EBF2;
  padding: .4em .8em .3em;
  margin: 0 0 1em;
  text-align: left;
  position: relative;
}

.gothic3::after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #B2EBF2;
  width: 0;
  height: 0;
}


.meityo1 {
  position: relative;
  padding: 1rem 1rem 1rem 4rem;
  color: #fff;
  border-radius: 100vh 0 0 100vh;
  background: #1f1b7b;
}

.meityo1:before {
  position: absolute;
  top: calc(50% - 7px);
  left: 10px;
  width: 14px;
  height: 14px;
  content: '';
  border-radius: 50%;
  background: #fff;
}

.meityo2 {
  padding: 0.5rem 1rem;
  border-bottom: 4px double #000;
}

.meityo3 {
  padding: 0.5rem 1rem;
  border-left: 5px solid #000;
  background: #f4f4f4;
}

/*ボタン*/

.button {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  margin: 10% 0;
}

.border_btn01 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 300px;
  /* ボタン幅 */
  height:65px;
  margin: 0 auto;
  color: #4D9BC1;
  /* 文字色 */
  border: 2px solid #4D9BC1;
  /* 線幅・種類・色 */
  background: #fff;
  /* 背景色 */
  padding: 1em 2em;
  font-weight: bold;
  /* 文字の太さ */
  text-decoration: none;
  text-align: center;
  transition: 0.3s;
  border-radius: 100dvb;
  font-size: 120%;
}

/* マウスオーバーした際のデザイン */
.border_btn01:hover {
  color: #fff;
  /* 文字色 */
  background: #4D9BC1;
  /* 背景色 */
}


/*QA*/

div.qa_wrap {
  margin: 0 auto;
  padding-left: 50px;
}


div.qa_wrap p.title {
  font-size: 35px;
  text-align: center;
  padding-top: 70px;
  letter-spacing: 0.2em;
}


div.details {
  margin: 0 auto;
}

div.details {
  width: 100%;
  margin: 0 auto;
}

p.sub_title {
  text-align: center;
  padding-top: 25px;
  padding-bottom: 20px;
  border-bottom: double;
}

/*detail部分ここから*/

summary {
  list-style: none;
  position: relative;
  margin-bottom: 10px;
  padding: 20px 70px 20px 30px;
  cursor: pointer;
  background-color: #FFF;
  padding-top: 30px;
}

summary::-webkit-details-marker {
  display: none;
}

summary:hover,
details[open] summary {
  background-color: #FFF;
}

summary::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  transition: transform 0.5s;
  font-size: 30px;
}

details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.answer {
  padding: 20px 30px;
  background-color: #f6f4ef;
}

.answer p {
  line-height: 1.5em;
  letter-spacing: 0.1em;
}

details[open] .answer {
  animation: fadein 0.5s ease;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

div.qa_wrap a {
  text-decoration: underline;
}

div.qa_wrap a:hover {
  opacity: 0.7;
}

/*タイムライン*/

.tl_area {
  counter-reset: item;
  margin: 1em 0;
  text-align: left;
}

.tl_area-item {
  padding: 0 0 1.5em 1.8em;
  position: relative
}

.tl_area-item:before {
  background: #ccd5db;
  bottom: 0;
  content: "";
  display: block;
  left: 6px;
  position: absolute;
  top: 24px;
  width: 3px
}

.tl_area-item:last-of-type:before {
  content: none
}

.tl_area-item__marker {
  border: 3px solid;
  border-radius: 50%;
  content: "";
  display: block;
  height: 14px;
  left: 0;
  position: absolute;
  top: 6px;
  width: 14px
}

.tl_area-item:not(:first-of-type):not(:last-of-type) .tl_area-item__marker {
  background: transparent
}

.tl_area-item__label, .tl_area-item__label--default {
  color: #9a9094;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  padding-top: 5px;
}

.tl_area-item__label--default:before {
  content: "";
  content: "STEP."counter(item);
  counter-increment: item
}

.tl_area-item .tl_area-item__title {
  font-size: 1.1em;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 0;
  margin-top: 5px
}

.tl_area-item__main {
  border-bottom: 1px dashed #ccd5db;
  font-size: .9em;
  line-height: 1.6;
  margin-top: .5em;
  padding: 0 0 1.5em
}

.tl_area-item__main>.sgb-box-simple, .tl_area-item__main>.wp-block-button, .tl_area-item__main>ol, .tl_area-item__main>p, .tl_area-item__main>ul {
  margin: .8em 0
}

.tl_area-item__main img {
  max-width: 700px;
}

@media screen and (max-width: 768px) {

  body {
    width: 100%;
  }

  div.inner_wrap {
    width: 90%;
  }

  .header_wrap {
    margin-top: 60px;
  }

  .header_wrap p.title {
    text-align: left;
    font-size: 18px;
    font-weight: bold;
  }

  .header_wrap p.text {
    text-align: left;
    font-size: 14px;
  }

  .text {
    text-align: left;
    font-size: 12px;
  }

  div.reccomend {
    display: block;
  }

  div.reccomend div.section {
    width: 100%;
  }

  div.reccomend div.section img {
    width: 100%;
  }

  p.item_title_r {
    font-size: 12px;
  }

  p.item_price_r {
    font-size: 10px;
    margin-top: 20px;
  }

  div.topics_flex {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
  }

  div.topics_flex div {
    width: calc(50% - 5px);
    margin-top: 20px;
  }

  div.topics_flex p {
    font-size: 12px;
  }

  div.ballon_wrap {
    width: 100%;
  }

  /*LINEぽい吹き出し*/

  div.ballon_wrap {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    justify-content: flex-start;
  }

  .says {
    max-width: 100%;
    /*最大幅は任意*/
  }

  div.title_kuhaku {
    width: 100%;
  }