@charset "UTF-8";

@import url("https://fonts.googleapis.com/css?family=Asap+Condensed:600");

/*additional reset
---------------------------------------------------*/
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

body.safari #content,
body.safari #footer {
  /*サファリでリンク先から戻った時文字が拡大する対応*/
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
}

/** link **/
a:link {
  color: #1c7fbd;
  text-decoration: underline;
}

a:visited {
  color: #1c7fbd;
}

a:hover,
a:active {
  text-decoration: none;
}

/*初期設定
----------------------------------------------------*/
#wrapper {
  width: 700px;
  padding: 0 0 0 0;
  overflow: hidden;
  margin: auto;
  position: relative;
}
.content {
  display: block;
  margin: 0 auto;
  width: 95%;
}
@media screen and (min-width: 640px) {
  .pc {
    display: block;
  }
  .sp {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  #wrapper {
    width: 100%;
  }
  .content {
    width: 100%;
  }
}
/*layout
----------------------------------------------------*/

img {
  width: 100%;
  margin: 0;
  padding: 0;
}
.tac {
  text-align: center;
}
.tar {
  text-align: right;
}
.mt0 {
  margin-top: 0;
}
.mb0 {
  margin-bottom: 0;
}
.mb10 {
  margin-bottom: 10px;
}
.mb20 {
  margin-bottom: 20px;
}
.mt20 {
  margin-top: 20px;
}
.mb30 {
  margin-bottom: 30px;
}
.mt30 {
  margin-top: 30px;
}
.mb40 {
  margin-bottom: 40px;
}
.mt40 {
  margin-top: 40px;
}
.mt50 {
  margin-top: 50px;
}
.pink {
  color: rgb(255, 0, 120);
}
.red {
  color: rgb(255, 0, 0);
}
.gray {
  color: rgb(150, 150, 150);
}
.orange {
  color: rgb(255, 153, 0);
}
.blue {
  color: rgb(0, 102, 204);
}
.green {
  color: #21a887;
}
.marker {
  background: rgba(0, 0, 0, 0) linear-gradient(transparent 50%, #ffee57 0%)
    repeat scroll 0 0;
}
.marker02 {
  border-bottom: 1px solid #000;
}
.marker03 {
  background: rgba(0, 0, 0, 0) linear-gradient(transparent 50%, #facccc 0%)
    repeat scroll 0 0;
}
.recbox-wrapper {
  position: relative;
  padding: 8px;
  border: 2px dashed #bfa776;
  margin-top: 20px;
  margin-bottom: 20px;
}

.recbox-wrapper h2 {
  position: absolute;
  top: 0;
  left: 50%;
  min-width: 60%;
  text-align: center;
  transform: translate(-50%, -50%);
  padding: 3px 3px;
  background: #bfa776;
  color: #ffffff;
}

.recbox-wrapper__list ul li {
  position: relative;
  padding-left: 20px;
  line-height: 1.8;
}

ul {
  padding-inline-start: 7px;
}

.recbox-wrapper__list ul li:before {
  position: absolute;
  top: 4px;
  left: -4px;
  /* transform: translate(0, -50%); */
  display: inline-block;
  content: "";
  background: url("../img/check.png") no-repeat center/100%;
  width: 22px;
  height: 22px;
  border: 1px solid #000;
}
.fsLL {
  font-size: 23px;
}
.fsL {
  font-size: 20px;
}
.fsM {
  font-size: 19px;
}
.fsS {
  font-size: 10px;
}

footer {
  font-size: 13px;
  padding: 5%;
  background: #ececec;
  text-align: center;
  margin-top: 10px;
}

/* ----- 導入部分 ----- */
.introduction {
  background: #ffebf0;
  padding: 5% 3%;
}
.bgW {
  background: #fff;
}
.bgskin {
  background: #fff6f1;
}

.box_intro {
  padding: 20px;
  margin: 0.2em 0;
  color: #00a37a;
  background: #e5fff9;
  /*背景色*/
  border-radius: 10px;
}

.box_intro p {
  margin: 0;
  padding: 1% 0;
}
.box_intro span {
  color: #f85985;
  margin: 0 2% 0 0;
}

.intro01 {
  padding: 5% 4% 0;
}

.intro02_ttl {
  padding: 0;
  margin: 0 0 -2%;
}
.intro02-in {
  background: #fff6f1;
  margin: 0;
  padding: 4% 3%;
}

/* ----- 目次 ----- */
.mokuji_link h2 {
  margin: 2% 0 0;
  padding: 0;
}
.mokuji_link ul {
  border: 6px solid #f55b85;
  padding: 6% 4%;
  margin: -2% 0 2%;
}
.mokuji_link ul li {
  list-style: none;
  margin: 2% 0 3%;
  font-size: 1.5em;
  display: flex;
  align-items: center;
}
.m_Point img {
  width: 18%;
}
.mokuji_link ul li a {
  color: #f84b7a;
  padding: 2% 0 0 4%;
}

@media screen and (max-width: 765px) {
  .mokuji_link {
    padding: 0 3%;
  }
  .mokuji_link ul li {
    font-size: 1.3em;
  }
  .mokuji_link ul {
    border: 4px solid #f55b85;
    margin: -4% 0 2%;
  }
  .mokuji_link ul li a {
    padding: 0 0 0 4%;
  }
}

.intro_btext {
  text-align: center;
  margin-top: 10%;
}

.bgtext {
  margin-bottom: -29px;
}
@media screen and (max-width: 765px) {
  .bgtext {
    margin-bottom: -24px;
  }
}

/* ----- ポイント1 ----- */
h2.point_title1 {
  text-align: center;
  font-size: 2.2em;
  color: #f84b7a;
  background-image: url(../img/point1_bg.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  padding: 20% 0 2%;
}
.hold-in {
  background: #ffebf0;
  margin: -3% 0 0;
  padding: 4%;
}
.hold-in .fsS {
  margin: -2% 0 5%;
}
.hold-in1 {
  padding: 7% 4% 5%;
  border-radius: 20px;
}
.hold-in1_Air {
  padding: 5% 4%;
  border-radius: 20px;
}
.pinkshadow {
  box-shadow: 0px 6px 7px 0px rgb(155 126 135 / 16%);
}

h4.balloon_bg1 {
  background: #f35a86;
  padding: 3%;
  font-size: 1.2em;
  color: #fff;
  border-radius: 20px 20px 0 0;
  margin: 24px 0 0;
}
h4.balloon_bg2 {
  background: #21a887;
  padding: 3%;
  font-size: 1.2em;
  color: #fff;
  border-radius: 20px 20px 0 0;
  margin: 24px 0 0;
}
.hold-in .fsS2 {
  margin: 1% 0 5% !important;
  font-size: 10px;
}

/* LUNA カップ */
.LUNA_cup {
  background: #fff;
  padding: 5% 4%;
}

h2.point_end {
  padding: 0;
  margin-bottom: -5%;
}

.hold_end1 {
  border: 2px #fff solid;
  padding: 4%;
}
.hold_end img.bgtext {
  opacity: 0.3;
}
/* 結論 */
.conclusion {
  background: #fff6f1;
}
.conclusion h3 {
  text-align: center;
  font-size: 2.2em;
  color: #f84b7a;
  background-image: url(../img/conclusion_titlebg.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  padding: 14% 0 2%;
}
.conclusion_in {
  padding: 0 4% 6%;
}
@media screen and (max-width: 765px) {
  .hold-in {
    margin: -9% 0 0;
  }
}


/* ----- ポイント2 ----- */
h2.point_title2 {
  text-align: center;
  font-size: 2.2em;
  color: #f84b7a;
  background-image: url(../img/point2_bg.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  padding: 20% 0 2%;
}
.bone_in{
  background: #ffebf0;
  margin: -3% 0 0;
  padding: 4% 4% 5%;
}
h3.analysis_title{
  padding: 0;
  background: #ffffff00;
}

ul.bone_list{
  padding: 5%;
}
ul.bone_list li{
  list-style:none;
  display: flex;
  align-items: flex-start;
  gap: 1%;
}
ul.bone_list li img{
  display: block;
  width: 4%;
  margin-bottom: 0.5%;
}

/* 結論2 */
.conclusion2 {
  background: #fff6f1;
}
.conclusion2 h3 {
  text-align: center;
  font-size: 2.2em;
  color: #f84b7a;
  background-image: url(../img/conclusion2_titlebg.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  padding: 14% 0 2%;
}
.conclusion2 h3 span{
  font-size: 20px;
}

@media screen and (max-width: 765px) {
  .bone_in{
    margin: -8% 0 0;
  }
  ul.bone_list li{
    display: flex;
    align-items: flex-start;
  }
  ul.bone_list li img {
    width: 6%;
    margin-bottom: 6%;
    margin-top: 1.5%;
}
}


/* ----- ポイント3 ----- */
h2.point_title3 {
  text-align: center;
  font-size: 2.2em;
  color: #f84b7a;
  background-image: url(../img/point3_bg.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  padding: 20% 0 2%;
}
h2.point_title3 span{
  font-size: 0.7em;
}
.relax_in{
  background: #ffebf0;
  margin: -3% 0 0;
  padding: 4% 4% 5%;
}

.relax-in1 {
  padding: 7% 4% 5%;
  border-radius: 20px;
}
@media screen and (max-width: 765px) {
  .relax_in{
    margin: -9% 0 0;
  }

}

/* ----- まとめ ----- */
@media screen and (max-width: 765px) {
.last_area{
  margin: 4%;
}
}

.viage_last{
  border-radius: 20px;
  border: solid 2px #f84b7a;
  background: #ffe4eb;
}
.viage_last img{
  margin: 3% 0;
}
.luna_last{
  border-radius: 20px;
  border: solid 2px #20a887;
  background: #daf8f1;
  margin-top: 30px;
}
.luna_last img{
  margin: 3% 0;
}


.conclusion3 {
  background: #fff6f1;
}
.conclusion3 h3 {
  text-align: center;
  font-size: 2.2em;
  color: #f84b7a;
  background-image: url(../img/conclusion2_titlebg.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  padding: 16% 0 2%;
}
@media screen and (max-width: 765px) {
  .conclusion3 h3 {
    padding: 23% 0 2%;
  }
  .viage_last img{
    margin: 5% 0 3%;
  }
  .luna_last img{
    margin: 5% 0 3%;
  }
  }




ul {
  padding-inline-start: 7px;
}


h2 {
  padding: 10px 0;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 20px;
}

.title2 {
  background-color: #f55b85;
  text-align: center;
  color: #fff;
}

/*全体テーブル設定*/
table {
  /*幅*/
  width: 500px;
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  table-layout: fixed;
}

th img {
  width: 50%;
  margin: 0 auto;
  height: auto;
}
/*1行目ヘッダー部分*/
table th {
  /*セル内側余白*/
  padding: 1em;
  /*文字サイズ*/
  font-size: 0.85em;
  /*文字色*/
  color: #7b5b56;
}
table thead th {
  /*文字色*/
  color: #7b5b56;
  text-align: center;
}
table thead th.bgP{
  background-color: #ffebf0 !important;
}
table thead th.bgG{
  background-color: #daf8f1 !important;
}
/*1行目ヘッダーの強調したいセル*/
table thead th.red {
  /*文字色*/
  color: white;
  /*背景色*/
  background: #e81010;
  /*線。太さ｜種類｜色*/
  border: 4px solid red !important;
}
/*左端のテーブルヘッダー*/
table tbody th {
  /*右側の線。太さ｜種類｜色*/
  border-right: 2px solid #eee;
  /*背景色*/
  background-color: #fff;
  /*文字サイズ*/
  font-size: 0.85em;
  min-width: 50px;
}
/*2行目以降の比較結果セル*/
table tr {
  /*背景色*/
  background-color: #fff;
  /*外側の線。太さ｜種類｜色*/
  border: 2px solid #eee;
}
tbody tr th {
  font-size: 0.7em;
}
/*比較結果のセル部分*/
table td {
  /*セル内側余白。上下｜左右*/
  padding: 1em 0.1em;
  /*右側の線。太さ｜種類｜色*/
  border-right: 2px solid #eee;
  /*文字の水平方向の配置。左寄せはleft、真ん中はcenter*/
  text-align: center;
  font-size: 0.85em;
}
/*各比較結果セルの単位文字*/
td span {
  /*文字サイズ*/
  font-size: 0.6em;
}

/*スマホの場合*/
@media screen and (max-width: 600px) {
  table {
    width: 100%;
  }
}
.balloon {
  position: relative;
  /*吹き出し内側の余白*/
  padding: 15px;
  /*吹き出しの背景色*/
  background-color: #fdd;
  /*角を丸くする指定*/
  border-radius: 10px;
  /*吹き出し周りの余白。上｜左右｜下*/
  margin: 40px 10px 40px;
}

.balloon::before {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -12px;
  /*三角部分の色変更は下記#から始まるカラーコードを変更ください*/
  border-top: 12px solid #fdd;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
}


/* widget全体の設定 */
.balloon__area {
  /* 横幅 */
  width: 100%;
  /* 高さ */
  height: auto;
  /* 位置( left | center | right ) */
  text-align: left;
  position: relative;
}

/* 吹き出しの設定 */
.under__balloon {
  display: inline-block;
  /* 外側の余白 */
  margin: 0;
  /* 内側の余白 */
  padding: 6px 8px;
  /* 最小幅 */
  min-width: 50px;
  /* 最大幅 */
  max-width: 100%;
  /* 吹き出しの色 */
  background: #f35a86;
  /* 吹き出しの角丸 */
  border-radius: 10px;
}

/* 吹き出しの三角 */
.under__balloon:before {
  content: "";
  position: absolute;
  /* 表示位置（上基準） */
  top: calc(100% - 1px);
  /* 表示位置（左基準） */
  left: 35%;
  /* 外側の左余白 */
  margin-left: -8px;
  /* 三角形の横幅 */
  border: 8px solid transparent;
  /* 三角形の高さ、三角形の色 */
  border-top: 6px solid #f26671;
}

/* 吹き出し内テキスト */
.under__balloon p {
  /* 外側の余白 */
  margin: 0;
  /* 内側の余白 */
  padding: 0;
  /* 文字の大きさ */
  font-size: 14px;
  /* 文字の色 */
  color: #fff;
  /* 文字の位置 */
  text-align: center;
  /* 文字の太さ */
  font-weight: bold;
  /* フォント（webフォント） */
}

/* アニメーション */
.is-slide {
  /*アニメーションの設定｜アニメーション名｜1回のサイクルに要する時間｜実行回数 */
  animation: slide 1s infinite;
}
/* アニメーションの詳細 */
@keyframes slide {
  /* スタート時 */
  0% {
    /* X方向、Y方向 */
    transform: translate(0, 0);
  }

  50% {
    transform: translate(0, 10px);
  }

  /* 終了時 */
  100% {
    transform: translate(0, 0);
  }
}

h3 {
  position: relative;
  line-height: 1.3;
  padding: 10px 20px 10px 20px;
  background: #ffc0cb;
  color: #2f241d;
  font-size: 21px;
  margin: 10px 0 5px;
}

.cp_arrows {
  position: relative;
  /*widget自体の高さ*/
  height: 50px;
  /*widgetの上余白*/
  margin-top: 1em;
  /*widgetの下余白*/
  margin-bottom: 1em;
}

/*一個目の矢印*/
.cp_arrows .cp_arrowfirst {
  /*アニメーション設定。
    左からアニメーション名、動きの速さ（2s=2秒）、変化の度合い（ease-in-out=開始時と終了時は、緩やかに変化）、動きの回数（infinite=無限、3=3回など）*/
  animation: arrow-move08 2s ease-in-out infinite;
}

/*二個目の矢印*/
.cp_arrows .cp_arrowsecond {
  /*アニメーション設定。
    左からアニメーション名、動きの速さ（2s=2秒）、開始時間（1s=1秒後）、変化の度合い（ease-in-out=開始時と終了時は、緩やかに変化）、動きの回数（infinite=無限、3=3回など）*/
  animation: arrow-move08 2s 1s ease-in-out infinite;
}

/*共通設定*/
.cp_arrows .cp_arrow {
  position: absolute;
  /*矢印の到着位置　（縦位置）*/
  top: 100%;
  /*矢印の到着位置　（横位置）*/
  left: 45%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  /*透明度（0=透明、1=不透明）*/
  opacity: 0;
}

/*.content :first-child {
    margin-top: 0;
}*/

@keyframes arrow-move08 {
  /*スタート地点（サンプルは[class:cp_arrows]height300pxの35%）*/
  0% {
    top: 40%;
    opacity: 0;
  }

  /*2sの70％（1.7秒）時に不透明になる*/
  70% {
    opacity: 1;
  }

  /*2s（2秒）時に透明になる*/
  100% {
    opacity: 0;
  }
}

.cp_arrows .cp_arrow:before {
  /*矢印左の棒の設定。1番目の値は棒の角度、2番目の値は棒のX方向の位置。*/
  transform: rotate(30deg) translateX(-39%);
  /*矢印左の棒の起点。（top left=左上）*/
  transform-origin: top left;
}

.cp_arrows .cp_arrow:after {
  /*矢印右の棒の設定。1番目の値は棒の角度、2番目の値は棒のX方向の位置。*/
  transform: rotate(-30deg) translateX(39%);
  /*矢印右の棒の起点。（top right=右上）*/
  transform-origin: top right;
}

.cp_arrows .cp_arrow:before,
.cp_arrows .cp_arrow:after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  /*矢印の棒の横の長さ*/
  width: 40px;
  /*矢印の棒の縦の長さ*/
  height: 3px;
  content: "";
  /*矢印の色*/
  background: #e91e63;
}

.cp_arrows *,
.cp_arrows *:before,
.cp_arrows *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.cp_arrows *,
.cp_arrows *:before,
.cp_arrows *:after {
  box-sizing: border-box;
}

.memo1 {
  position: relative;
  background: #ffebf0;
  padding: 4% 5%;
  color: #454545;
  margin-top: -2%;
}
.memo2 {
  position: relative;
  background: #daf8f1;
  padding: 4% 5%;
  color: #454545;
  margin-top: -2%;
}

.memo {
  margin: 0;
  padding: 2%;
}

.flash {
  animation: flash 2s ease infinite alternate;
  display: flex;
  /*左寄せは flex-start、真ん中寄せはcenter*/
  justify-content: center;
  color: #f35a86;
  text-align: center;
}

/*設定した時間（初期：1秒）の半分の時に透明になる*/
@keyframes flash {
  50% {
    opacity: 0;
  }
}

.cta{
  width: 98%;
  margin: 0 auto;
}


@-webkit-keyframes shiny-btn1 {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0;
  }

  80% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }

  81% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

.cta_lead {
  text-align: center;
  margin: -2% 4% -3%;
}

.w80 {
  width: 80%;
  display: block;
  margin: auto;
}

@media screen and (max-width: 600px) {
  .w80 {
    width: 100%;
  }
}

video {
  width: 100%;
  height: auto;
}

/* ----- ポイント2 骨格診断 ----- */
.choice_text{
  padding: 5% 0 0 0;
  margin: 0 5% 5%;
}
@media screen and (max-width: 600px) {
  .choice_text{
    margin: -3% 5% 5%;
  }
}

/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  background-color: #fff;
  width: 100%;
  margin: -2% auto 0;
}

/*タブのスタイル*/
.tab_item {
  font-size: 20px;
  color: #565656;
  font-weight: bold;
  transition: all 0.2s ease;
}
/*タブ切り替えの中身のスタイル*/
.tab_content {
  margin-top: 20px;
  display: none;
  clear: both;
  overflow: hidden;
}
.tab_content h4{
  text-align: center;
}
/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}


.tabs label {
  cursor: pointer;
  padding-left: 56px;
  position: relative;
  display: block;
}

.tabs label::before,
.tabs label::after {
  content: "";
  display: block;
  position: absolute;
}

.tabs label::before {
  background-color: #fff;
  border-radius: 0%;
  border: 2px solid #ffc0cb;
  width: 25px;
  height: 25px;
  transform: translateY(-50%);
  top: 50%;
  left: 24px;
  border-radius: 5px;
}

.tabs label::after {
  border-bottom: 2px solid #ff2478;
  border-left: 2px solid #ff2478;
  opacity: 0;
  height: 10px;
  width: 15px;
  transform: rotate(-45deg);
  top: 7px;
  left: 30px;
}

input:checked + label::after {
  opacity: 1;
}
.purupuru {
  /*アニメーション名、動きの速さ0.8s（=0.8秒）、動き具合、開始時間5s(=5秒後)、動く回数infinite(=無限 3=3回など)   */
  animation: purupuru 2s linear 0s infinite;
}

@keyframes purupuru {
  /*アニメーションの最初の動き*/
  0% {
    /*skew = 傾斜変形する、1番目の値はX軸、2番目に値がある場合はY軸に傾斜変形する
    　　　　9deg = 9度*/
    transform: skew(9deg);
  }

  10% {
    transform: skew(-8deg);
  }

  20% {
    transform: skew(7deg);
  }

  30% {
    transform: skew(-6deg);
  }

  40% {
    transform: skew(5deg);
  }

  50% {
    transform: skew(-4deg);
  }

  60% {
    transform: skew(3deg);
  }

  70% {
    transform: skew(-2deg);
  }

  80% {
    transform: skew(1deg);
  }

  90% {
    transform: skew(0deg);
  }

  /*アニメーションの最後の動き*/
  100% {
    transform: skew(0deg);
  }
}

/*------ スライダーの横幅 ------*/
.slider {
  width: 90%;
  margin: 0 auto;
}

/*------ スライダー画像 ------*/
.slider img {
  width: 100%;
}

/*-------- 高さ調整 ----------*/
.slider .slick-slide {
  height: auto !important;
}

/*---------- 矢印 ----------*/
.slider .slick-next {
  right: -1%;
}
.slider .slick-prev {
  left: -1%;
}
.slider .slick-arrow {
  width: initial !important;
  height: initial !important;
  z-index: 2 !important;
}
.slider .slick-arrow:before {
  font-size: 30px !important;
}

.slick-prev:before,
.slick-next:before {
  color: #ffe0cf !important;
}
.slider {
  border: 2px solid #f35a86;
  width: 100%;
  padding: 15px;
  border-radius: 0 0 20px 20px;
  background: #fff;
}
.slider2 {
  border: 2px solid #21a887;
  width: 100%;
  padding: 15px;
  border-radius: 0 0 20px 20px;
  background: #fff;
}
.slick-dots {
  position: absolute;
  bottom: -25px;
  display: block;
  width: 100%;
  right: 0;
  margin: auto;
  text-align: center;
}
.coupon {
  width: 80%;
  margin: 0 auto;
}
@media screen and (max-width: 600px) {
  .coupon {
    width: 100%;
    margin: 0 auto;
  }
}

/* スライド*/
ul {
  padding: 0;
  margin: 0;
}
.insta01 {
  width: 130px;
  height: 130px;
}
.insta01 {
  margin-left: 20px;
  list-style: none;
}
.insta01:nth-child(1) {
  background-image: url(../img/slide_01.jpg);
  background-size: cover;
}
.insta01:nth-child(2) {
  background-image: url(../img/slide_02.jpg);
  background-size: cover;
}
.insta01:nth-child(3) {
  background-image: url(../img/slide_03.jpg);
  background-size: cover;
}
.insta01:nth-child(4) {
  background-image: url(../img/slide_04.jpg);
  background-size: cover;
}
.insta01:nth-child(5) {
  background-image: url(../img/slide_05.jpg);
  background-size: cover;
}
.insta01:nth-child(6) {
  background-image: url(../img/slide_06.jpg);
  background-size: cover;
}
.insta01:nth-child(7) {
  background-image: url(../img/slide_07.jpg);
  background-size: cover;
}
.insta01:nth-child(8) {
  background-image: url(../img/slide_08.jpg);
  background-size: cover;
}

/* スライドレールの枠 */
.wrap {
  overflow: hidden;
  display: flex;
  align-items: center;
  width: 100%;
  margin: auto;
  top: 81%;
  left: 0;
  right: 0;
  z-index: 1;
}
.slideshow {
  display: flex;
  -webkit-animation: loop-slide 35s infinite linear 0s both;
  margin-top: 10px;
  padding-bottom: 10px;
}
@-webkit-keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*追従*/
.floating-button {
  position: fixed;
  bottom: 20px; /* 下部に配置 */
  left: 50%; /* 横中央に配置 */
  transform: translateX(-50%); /* 中央に配置するための調整 */
  z-index: 1000;
}

.floating-button__btn {
  border: none;
  background: none;
  padding: 0;
  display: flex; /* 画像を横並びにするためにflexboxを使用 */
  align-items: center; /* 画像を縦中央に揃える */
}

.floating-button__img {
  width: 400px;
  height: auto;
  margin-right: 5px; /* 画像の間にスペースを追加 */
}

@media screen and (max-width: 600px) {
  .floating-button {
    bottom: 10px; /* 下部に配置 */
  }
  .floating-button__img {
    /*width: 350px;*/
    width: 213px;
    height: auto;
    margin: 0px -14px;
  }
  .floating-button__btn {
    display: flex;
    /*flex-direction: column;  縦に並べる */
    align-items: center; /* 中央揃え */
  }
}