/* 全ての文字のフォントを統一 */
div {
  font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro",
    "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
}

/* carousel */
.carousel {
  width: 1100px;
  margin: auto;
}

.carousel img {
  height: 600px;
}

.carousel-caption {
  text-align: center;
}

.carousel-caption h3 {
  color: white;
  font-size: 30px;
}
.carousel-caption p {
  color: white;
  font-size: 20px;
}

/* nayami & voice & instagram & twitter & ggmap*/

/* コンテンツのサイズ、枠線 */
.n-container,
.v-container,
.instagram,
.ggmap {
  width: 1200px;
  padding: 0.5em 1em;
  font-weight: bold;
  color: brown; /*文字色*/
  background: #fff;
  border: solid 12px wheat; /*線*/
  border-radius: 10px; /*角の丸み*/
  margin-bottom: 80px;
}

.twitter {
  width: 800px;
  padding: 0.5em 1em;
  font-weight: bold;
  color: brown; /*文字色*/
  background: #fff;
  border: solid 12px wheat; /*線*/
  border-radius: 10px; /*角の丸み*/
  margin-bottom: 80px;
}

/* n-containerのリスト */
.n-container ul {
  margin-bottom: initial; /*BootStrap指定のmb30pxを初期化 */
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
}

.n-container ul li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none !important; /*ポチ消す*/
}

.n-container ul li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f06a"; /* チェックマークのアイコン */
  position: absolute;
  left: 1em; /*左端からのアイコンまで*/
  color: #ffb03f; /*アイコン色*/
  margin-bottom: 0;
}

/* 悩み写真 */
.nayami img {
  width: 280px;
  height: 280px;
}
.n-img {
  text-align: center;
}

/* appeal */

.a-container {
  background-color: honeydew;
}

.appeal {
  padding: 15px;
}

.rounded-circle {
  width: 230px;
  height: 240px;
  cursor: pointer; /* ホバー時、ポインターに変える */
  transition: 0.7s; /* 遷移するタイム */
}

.rounded-circle:active {
  transform: rotateY(720deg); /* コイン回転 */
}

.appeal h3,
.appeal p {
  width: 300px;
  text-align: center;
  display: table-cell; /* 子要素はテーブルセル要素にする */
  vertical-align: middle;
}

.appeal h3 {
  font-weight: bold;
  -webkit-text-stroke: 1px black;
  padding-top: 30px;
}

.appeal p {
  color: black;
  font-size: 22px;
}

/* voice */

.balloon {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #fff;
  border: solid 3px #555;
  box-sizing: border-box;
  border-radius: 15px;
}

.balloon:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #fff;
  z-index: 2;
}

.balloon:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #555;
  z-index: 1;
}

.balloon p {
  margin: 0;
  padding: 0;
  font-size: 20px;
}

.voice img {
  width: 100px;
  height: 100px;
}
.v-img {
  text-align: center;
  padding-top: 30px;
}

.age {
  text-align: right;
}

/* check */

.c-container {
  background-color: honeydew;
}

.check {
  padding: initial;
}

.check h3 {
  color: #6cb4e4;
  font-weight: bold;
  text-align: center;
  padding: 0.25em;
  border-top: solid 4px #6cb4e4;
  border-bottom: solid 4px #6cb4e4;
  background: -webkit-repeating-linear-gradient(
    -45deg,
    #f0f8ff,
    #f0f8ff 3px,
    #e9f4ff 3px,
    #e9f4ff 7px
  );
  background: repeating-linear-gradient(
    -45deg,
    #f0f8ff,
    #f0f8ff 3px,
    #e9f4ff 3px,
    #e9f4ff 7px
  );
}

.personal img {
  width: 540px;
  height: 359px;
}

.personal p {
  text-align: center;
  color: #6cb4e4;
}

.check h4 {
  position: relative;
  border-top: solid 2px #80c8d1;
  border-bottom: solid 2px #80c8d1;
  background: none;
  line-height: 1.4;
  padding: 0.4em 0.5em;
  margin: 2em 0 0.5em;
  font-size: 24px;
  color: peru;
}

.check h4:after {
  /*タブ*/
  position: absolute;
  font-family: "Font Awesome 5 Free", "Quicksand", "Avenir", "Arial", sans-serif;
  font-weight: 900;
  content: "\f0a7\ POINT";
  background: #80c8d1;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 5px 7px 3px;
  font-size: 0.5em;
  line-height: 1;
  letter-spacing: 0.05em;
}

/* 「この世に１つしかありません」に赤線 */
.only1 {
  background: linear-gradient(transparent 70%, #ff99ab 70%);
}

/* check-point */

.check-point img {
  width: 525px;
  height: 639px;
  border-radius: 10%;
}

/* 個人差がありますの注意書き */
.kojinsa {
  text-align: right;
}

/* before,afterのリボン */

.ribbon9 {
  display: inline-block;
  position: absolute;
  height: 45px;
  text-align: center;
  box-sizing: border-box;
}

.ribbon9:before {
  /*左側のリボン端*/
  content: "";
  position: absolute;
  width: 10px;
  bottom: -10px;
  left: -35px;
  z-index: -2;
  border: 20px solid #56adf3;
  border-left-color: transparent; /*山形に切り抜き*/
}

.ribbon9:after {
  /*右側のリボン端*/
  content: "";
  position: absolute;
  width: 10px;
  bottom: -10px;
  right: -35px;
  z-index: -2;
  border: 20px solid #56adf3;
  border-right-color: transparent; /*山形に切り抜き*/
}

.ribbon9 h5 {
  width: 552px;
  display: inline-block;
  position: relative;
  margin-left: -29px;
  padding: 0 20px;
  line-height: 45px;
  color: #fff;
  background: #2196f3; /*真ん中の背景色*/
}
.ribbon9 h5:before {
  position: absolute;
  content: "";
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 15px #397eb5; /*左の折り返し部分*/
}
.ribbon9 h5:after {
  position: absolute;
  content: "";
  top: 100%;
  right: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-left: solid 15px #397eb5; /*右の折り返し部分*/
}

/* 治療成果 */

.box {
  padding: 0.5em 1em;
  margin: 2em 0;
  font-weight: bold;
  color: #6091d3; /*文字色*/
  background: #fff;
  border: solid 3px #6091d3; /*線*/
  border-radius: 10px; /*角の丸み*/
}
.box p {
  margin: 0;
  padding: 0;
}

.denkyu-img img {
  width: 200px;
  height: 200px;
}

/* Instagram */

.embedded {
  padding: 20px 15px;
}

.instagram-media {
  height: 500px;
}

/* map */

.ggmap {
  overflow: hidden;
  margin-bottom: 180px;
}

.ggmap iframe {
  width: 1070px;
  height: 720px;
}

/* レスポンシブ */

@media screen and (max-width: 768px) {
  .carousel {
    width: auto;
    margin: auto;
  }
  .carousel img {
    height: auto;
  }
  .n-img img {
    width: 100%;
    height: auto;
  }
  .personal {
    padding: 0 4px;
  }
  .personal img {
    width: 100%;
    height: auto;
  }

  .check-point .row {
    margin: initial;
    padding: initial;
    width: 100%;
    text-align: center;
  }

  .check-point img {
    width: 100%;
    height: auto;
  }

  .ribbon9 h5 {
    width: 100%;
    padding: 0 4px;
  }

  .ribbon9:after {
    content: none;
  }

  .denkyu-img {
    text-align: center;
  }
  .denkyu-img img {
    margin-top: 20px;
    width: 200px;
    height: 200px;
  }

  .ggmap {
    padding: 10px;
  }

  .ggmap iframe {
    height: 360px;
    text-align: center;
  }

  .instagram iframe {
    width: 200px;
  }

  .n-container,
  .c-container,
  .a-container,
  .v-container,
  .instagram,
  .twitter,
  .ggmap {
    width: 100%;
  }

  .instagram body {
    width: 50px;
  }
}