@charset "UTF-8";

html {
  font-size: 100%;
}
body {
  color: #333;
  font-family: "游ゴシック体", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  letter-spacing: 0.1em;
}
a {
  color: #333;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
li {
  list-style: none;
}
/*
コンテンツ幅を設定するための共通クラス
*/
.wrapper {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}
/*
セクションタイトル用の共通クラス
*/
.section-title {
  font-size: 2.25rem;
  margin-bottom: 80px;
  text-align: center;
  position: relative;
}
.section-title5 {
  font-size: 2.25rem;
  margin-bottom: 50px;
  text-align: center;
  position: relative;
  color: #FF9D00;
}
.section-title-nayamimatome {
  font-size: 2.25rem;
  margin-bottom: 40px;
  text-align: center;
  position: relative;
  color: #FF9D00;
}
/* 疑似要素でタイトル下に下線を引く */
.section-title::after {
  content: "";
  width: 100px;
  height: 3px;
  background-color: #333;
  display: block;
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.section-title3 {
  font-size: 2.25rem;
  margin-top: 60px;
  text-align: center;
  position: relative;
  color: #FFF;
}

/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
  height: 100px;
  padding: 40px 0 0 50px;
}
#header .site-title {
  width: 100px;
  line-height: 1px;
}
#header .site-title a {
  display: block;
}

/*
ハンバーガ―メニュー
*/
.hamburger {
  width: 100px;
  height: 100px;
  background-color: #FF9D00;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 30;
  cursor: pointer;
  transition: 0.3s;
}
.hamburger:hover {
  opacity: 0.7;
}
/* ハンバーガーメニューの線の設定（メニューが閉じている時） */
.hamburger span {
  width: 50px;
  height: 2px ;
  background: #fff;
  position: absolute;
  left: 25px;
  transition: 0.3s ease-in-out;
}
/* 1本目の線の位置を設定 */
.hamburger span:nth-child(1) {
  top: 36px;
}
/* 2本目の線の位置を設定 */
.hamburger span:nth-child(2) {
  top: 50px;
}
/* 3本目の線の位置を設定 */
.hamburger span:nth-child(3) {
  top: 64px;
}
/*
ハンバーガーメニューの線の設定（メニューが開いている時）
1本目の線を-45度回転
*/
.hamburger.active span:nth-child(1) {
  top: 47px;
  left: 25px;
  background :#fff;
  transform: rotate(-45deg);
}
/* 2本目と3本目は重ねて45度回転 */
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 47px;
  background: #fff;
  transform: rotate(45deg);
}
/*
メニューの設定
最初は閉じている状態なので、「opacity: 0;」「visibility: hidden;」
で要素を非表示にしておく
*/
#navi {
  width: 100%;
  height: 100vh;
  background-color: #FF9D00;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  opacity: 0;
  text-align: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  visibility: hidden;
}
/*
ハンバーガーメニューがクリックされた際に、jQueryで#naviにactiveクラスを追加して、
メニューを表示させる。
*/
#navi.active {
  opacity: 1;
  visibility: visible;
}
#navi .logo {
  width: 100px;
  position: absolute;
  top: 40px;
  left: 50px;
}
#navi .menu {
  margin: 80px 0 40px 0;
}
#navi .menu li {
  margin-bottom: 20px;
}
#navi .menu a {
  color: #fff;
  font-weight: bold;
}
#navi .btn {
  width: 250px;
  border: solid 1px #fff;
  color: #fff;
  display: block;
  font-weight: bold;
  padding: 15px 0;
  margin: 0 auto;
  position: relative;
  transition: 0.3s ease-in-out;
}
/* ボタンの右と下の線は疑似要素で設定 */
#navi .btn::after {
  content: "　";
  width: 250px;
  border-right: solid 1px #fff;
  border-bottom: solid 1px #fff;
  padding: 15px 0;
  position: absolute;
  right: -6px;
  bottom: -6px;
}
#navi .btn:hover {
  background-color: #fff;
  color: #FF9D00;
}

/*-------------------------------------------
Mainvisual
-------------------------------------------*/
#mainvisual {
  height: 720px;
  position: relative;
  margin-bottom: 60px;
}
/*
テキストとボタンが画像の上に表示されるように「z-index」を設定
*/
#mainvisual .text {
  position: absolute;
  top: 280px;
  left: 10%;
  z-index: 10;
}
/*
「text-shadow」で文字の輪郭に白い影をつけることで、
文字が背景画像に埋もれないようにする
*/
#mainvisual .text .title {
  font-size: 2.875rem;
  font-weight: bold;
  margin-bottom: 30px;
  text-shadow: 0 4px 6px #fff;
}
#mainvisual .text .title-sub {
  font-size: 1.875rem;
  font-weight: bold;
  margin-bottom: 30px;
  text-shadow: 0 4px 6px #fff;
}
#mainvisual .text .btn {
  background-color: #FF9D00;
  /* 文字の下に影をつけてボタンに立体感を出す */
  border-bottom: 6px solid #cc7e00;
  border-radius: 10px;
  color: #fff;
  font-size: 1.5rem;
  display: block;
  padding: 15px 35px;
  text-align: center;
  transition: 0.3s;
  position: relative;
}
/*
ボタンの右矢印
上と右にボーダーを設定し、「transform: rotate(45deg)」で
45度回転させることで矢印を作成
positionで位置を調整する
*/
#mainvisual .text .btn::after {
  content: "";
  width: 16px;
  height: 16px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 26px;
  right: 30px;
}
/*
ホバー時は、opacityで透過させながら「transform: scale(1.05);」で
少しだけボタンのサイズを大きくする
*/
#mainvisual .text .btn:hover {
  opacity: 0.9;
  transform: scale(1.05);
}
/*
メインビジュアル
animationを使用して、画像をフェードイン、フェードアウトで切り替えを行う

※画像のフェード切り替えは、CSSアニメーション以外にも
jQueryのプラグインを使う等便利なやり方が色々ありますが、
今回は学習のためにアニメーションを使用しています。
*/
#mainvisual .fade li {
  width: 75%;
  position: absolute;
  top: 0;
  right: 0;
  /* 最初は3枚の画像を非表示にしておく */
  opacity: 0;
  /*
  アニメーションを実行
  fade：下で定義している「@keyframes fade」を実行
  15s：「@keyframes fade」の処理を15秒かけて実行
  infinite：アニメーションの処理を無限に繰り返す
  */
  animation: fade 15s infinite;
}
/*
1枚目の画像のアニメーション実行タイミングを設定
「animation-delay: 0s;」ですぐに実行
*/
#mainvisual .fade li:nth-child(1) {
  animation-delay: 0s;
}
/*
2枚目の画像のアニメーション実行タイミングを設定
「animation-delay: 5s;」で5秒後に実行
*/
#mainvisual .fade li:nth-child(2) {
  animation-delay: 5s;
}
/*
3枚目の画像のアニメーション実行タイミングを設定
「animation-delay: 10s;」で10秒後に実行
*/
#mainvisual .fade li:nth-child(3) {
  animation-delay: 10s;
}
#mainvisual .fade li img {
  width: 100%;
  height: 720px;
  object-fit: cover;
}
/*
「box-shadow」で画像のまわりをぼかす
*/
#mainvisual .fade li::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: inset 0px 0px 20px 20px #fff;
}
/*
アニメーション処理
上の「animation」で15sを指定しているので下記の処理を15秒かけて実行
0%が0秒を表し、100%が15秒後を表す。

0%の「opacity: 0;」で非表示の状態からスタートし、
15%になるまでの間に少しづつ画像を表示（フェードイン）させる。
そこから30%の時点までは画像を表示させたままの状態を維持し、
45%の時点に向けて画像を非表示（フェードアウト）する。
そこから100%まで非表示の状態を維持する。
*/
@keyframes fade {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/*-------------------------------------------
インビザラインアピール
-------------------------------------------*/
.content {
    display: flex;
    width: 100%;
    margin: 50px auto;
  }
  /*
  「z-index: 10;」を設定して、画面幅を狭めた際に
  テキストが画像の上にくるようにする
  */
  .content .left {
    width: 35%;
    position: relative;
    z-index: 10;
  }
  .content .left .text-area {
    position: absolute;
    top: 60px;
    left: 60px;
  }
  .content .left .title {
    line-height: 1;
    margin-bottom: 56px;
  }
  /*
  「display: block;」を設定することで、
  改行されてmargin-bottomが効くようになる。
  ※spanタグはデフォルトではinlineのため、
  改行もされないしmargin-bottomも効かない
  */
  .content .left .title .en {
    display: block;
    font-size: 2.65rem;
    font-weight: bold;
    margin-bottom: 12px;
  }
  .content .left .title .ja {
    display: block;
    font-size: 0.875rem;
  }
  .content .left .copy {
    font-size: 1.1rem;
  }
  /*
  clip-pathプロパティのpolygonを使って画像を斜めにする
  指定方法は、要素の各点のX座標とy座標を左上から順に指定する
  今回は、画像の左上の点を右側にずらしたい為、
  polygonの1番目のX座標に160pxを設定している
  ※詳細は「clip-path」で検索
  */
  .content .right {
    width: 65%;
    clip-path: polygon(160px 0, 100% 0, 100% 100%, 0 100%);
  }
  /*
  「vertical-align: bottom;」で画像の下にできる隙間を消す
  「object-fit: cover;」で高さを500pxで固定したままトリミングする
  ※「object-fit」はIEでは正しく動作しないため注意が必要
  */
  .content .right img {
    width: 100%;
    height: 500px;
    vertical-align: bottom;
    object-fit: cover;
  }

  /*-------------------------------------------
インビザライン説明
-------------------------------------------*/
.section-title2 {
    font-size: 1.5rem;
    font-weight: normal;
    margin-bottom: 4px;
  }

  .section-title-en2 {
    display: inline-block;
    margin-bottom: 25px;
  }

  .content2 {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .content2 .img2 {
    width: 50%;
  }
  .content2 .text2 {
    width: 50%;
    padding: 0 7%;
  }
  

/*-------------------------------------------
選ばれる理由
-------------------------------------------*/
.section-title-nayami {
  font-size: 2.25rem;
  margin-bottom: 20px;
  text-align: center;
  position: relative;
  color: #fff;
}
#reason .bg {
  background-color: #FF9D00;
  padding: 20px 0;
}
/*
スライド左右共通
最初は「opacity: 0;」で非表示にしておく
*/
#reason .slide {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  padding: 3%;
  opacity: 0;
}
#reason .slide img {
  width: auto;
  height: 60px;
  margin-right: 30px;
}
#reason .slide .title {
  color: #FF9D00;
  display: block;
  font-size: 1.75rem;
  font-weight: bold;
}
#reason .slide .text {
  display: block;
  font-size: 1.125rem;
}
#reason .inview-slide-left {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  margin-bottom: 10px;
}
/*
アニメーション（スライド左）を実行

slide-left：下で定義している「@keyframes slide-left」を実行
0.5s：アニメーションが始まってから終わるまでの時間（0.5sかけて実行）
ease-out：アニメーションの変化（開始時は早く、終了時は緩やかに変化）
0s：アニメーションが始まるまでの時間（0sですぐに実行）
1：アニメーションの繰り返し回数（1回）
forwards：アニメーション終了時の状態をそのまま維持
*/
#reason .slide-left {
  animation: slide-left 0.5s ease-out 0s 1 forwards;
}
/*
アニメーション処理

最初は「translateX(-50%);」で左側に隠しておく
100%（0.5秒）かけて要素を表示させながら元の位置へ移動させる
*/
@keyframes slide-left {
  0% {
    transform: translateX(-50%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
#reason .inview-slide-right {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  margin-bottom: 10px;
}
/*
アニメーション（スライド右）を実行

※左の処理と同様
*/
#reason .slide-right {
  animation: slide-right 0.5s ease-out 0s 1 forwards;
}
@keyframes slide-right {
  0% {
    transform: translateX(150%);
  }
  100% {
    opacity: 1;
    transform: translateX(100%);
  }
}

/*-------------------------------------------
悩み
-------------------------------------------*/
.content-nayami {
  max-width: 1000px;
  height: 698px;
  margin: 100px auto;
  position: relative;
}
/*
【要素の重ね合わせ（子要素）】
「position: absolute;」と「left」で左に配置。
*/
.text-nayami {
  max-width: 680px;
  background-color: #dcdcdc;
  padding: 84px 160px 84px 84px;
  position: absolute;
  left: 0;
}
.text-nayami p {
  line-height: 1.8;
  margin-bottom: 35px;
}
/*
「display: inline-block;」で下線をテキスト幅に合わせる。
*/
.text-nayami .title-nayami {
  border-bottom: solid 1px #35383a;
  display: inline-block;
  font-size: 1.875rem;
  font-weight: normal;
  margin-bottom: 30px;
}
.text-nayami .large-nayami {
  font-size: 1.375rem;
}
/*
「display: inline-block;」でボタンをテキスト幅に合わせてから
paddingでサイズを調整。
「transition」で、ホバーをふわっとさせる。
（※transitionの詳細については調べてみてくださいね。）
*/
.text-nayami .btn-nayami {
  display: inline-block;
  border: solid 1px #35383a;
  border-radius: 30px;
  padding: 16px 50px;
  transition: all 0.3s ease;
}
.text-nayami .btn-nayami:hover {
  background-color: #cc7e00;
}
/*
【要素の重ね合わせ（子要素）】
「position: absolute;」と「top」「right」で、
親要素の上から140px、右から20pxに配置。
*/
.img-nayami {
  max-width: 400px;
  position: absolute;
  top: 140px;
  right: 20px;
}
/*
「vertical-align: bottom;」で、画像の下の隙間を消す。
「top」を指定してもOK。
（※画像の下の隙間を消す方法は、実務でもよく使うので
覚えておいてください。）
*/
.img-nayami img {
  vertical-align: bottom;
}

/*-------------------------------------------
Voice
-------------------------------------------*/
#voice {
  padding-top: 20px;
  padding-bottom: 10px;
  background-color: #fffaf0;
}
#voice .item-left,
#voice .item-right {
  display: flex;
  align-items: flex-start;
  opacity: 0;
  margin-bottom: 10px;
}
#voice .item-left {
  justify-content: flex-start;
}
#voice .item-left:last-of-type {
  margin-bottom: 0;
}
#voice .item-right {
  justify-content: flex-end;
}
#voice .student img {
  width: 120px;
  background-color: #ccc;
  border-radius: 50%;
  margin-bottom: 0px 70px 10px 70px;
}
#voice .student .name {
  font-size: 0.75rem;
  text-align: center;
}
/* ふきだしを設定 */
#voice .item-left .balloon-text,
#voice .item-right .balloon-text {
  width: 60%;
  display: flex;
  justify-content: center;
  background: #e9f1fb;
  border-radius: 15px;
  padding: 20px;
  position: relative;
}
#voice .item-left .balloon-text {
  margin-left: 25px;
}
/* 左のふきだしの矢印部分を設定 */
#voice .item-left .balloon-text::before {
  content: "";
  position: absolute;
  left: 0;
  margin-left: -30px;
  border: 15px solid transparent;
  border-right: 15px solid #e9f1fb;
}
#voice .item-right .balloon-text {
  margin-right: 25px;
}
/* 右のふきだしの矢印部分を設定 */
#voice .item-right .balloon-text::before {
  content: "";
  position: absolute;
  right: 0;
  margin-right: -30px;
  border: 15px solid transparent;
  border-left: 15px solid #e9f1fb;
}
/*
アニメーションを実行

balloon：下で定義している「@keyframes balloon」を実行
0.5s：アニメーションが始まってから終わるまでの時間（0.5sかけて実行）
ease-out：アニメーションの変化（開始時は早く、終了時は緩やかに変化）
0s：アニメーションが始まるまでの時間（0sですぐに実行）
1：アニメーションの繰り返し回数（1回）
forwards：アニメーション終了時の状態をそのまま維持
*/
#voice .balloon {
  animation: balloon 0.5s ease-out 0s 1 forwards;
}
/*
アニメーション処理

最初は「transform: scale(0.1);」で要素を小さくした状態で、「opacity: 0;」で非表示にしておく
0.5秒かけて要素を表示させながら元のサイズへ戻す
*/
@keyframes balloon {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/*-------------------------------------------
フロー
-------------------------------------------*/
.wrapper2 {
    max-width: 900px;
    padding: 40px 20px;
    margin: 0 auto;
  }
  .sec-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.75rem;
    margin-bottom: 60px;
    text-align: center;
  }
  .sec-title::before,
  .sec-title::after {
    border-top: 1px solid;
    content: "";
    width: 28%;
  }
  #flow {
    background-color: #fff;
    padding-top: 40px;
  }
  #flow .step {
    display: flex;
    margin-top: 60px;
  }
  #flow .figure {
    position: relative;
  }
  /* 図形下の黄色い棒線を作成 */
  #flow .figure::before {
    content: "";
    width: 50px;
    height: 500px;
    background-color: #ffdd00;
    position: absolute;
    top: 0;
    left: 75px;
  }
  /*
  図形の四角部分を作成
  */
  #flow .figure li {
    width: 200px;
    height: 80px;
    line-height: 80px;
    background-color: #414141;
    color: #fff;
    font-size: 0.875rem;
    margin-bottom: 75px;
    position: relative;
    text-align:center;
  }
  /*
  図形の三角部分を疑似要素で作成
  「position」を使用して、四角の下に配置
  */
  #flow .figure li::before {
    content: "";
    border-top: 30px solid #414141;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    position: absolute;
    top: 80px;
    right: 0;
    left: 0;
    margin: 0 auto;
  }
  #flow .figure li:last-child {
    margin-bottom: 0;
  }
  #flow .description2 {
    margin-left: 10%;
  }
  #flow .description2 dt {
    border-bottom: solid 1px #121212;
    font-size: 1.25rem;
    padding-bottom: 8px;
    margin-bottom: 10px;
    position: relative;
  }
  /*
  丸数字を作成
  「position」を使用して、タイトルの左側に配置
  */
  #flow .description2 dt span {
    width: 35px;
    height: 35px;
    line-height: 35px;
    background-color: #414141;
    border-radius: 50%;
    color: #fff;
    display: block;
    font-size: 1rem;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: -45px;
  }
  #flow .description2 dd {
    margin-bottom: 43px;
  }
  #flow .description2 dd:last-child {
    margin-bottom: 0;
  }

/*-------------------------------------------
サービスが選ばれる理由
-------------------------------------------*/
/*
アニメーションを実行

fall：下で定義している「@keyframes fall」を実行
10s：アニメーションが始まってから終わるまでの時間（10sかけて実行）
infinite：アニメーションの繰り返し回数(無限に繰り返す)
linear：アニメーションの変化（開始から終了まで一定に変化）
*/
#summary {
  background: #f5f5f5;
  animation: fall 10s infinite linear;
  padding: 60px 0;
  margin-bottom: 50px;
}
/*
アニメーション処理

10秒かけて背景画像の位置「background-position」を移動させる動作を繰り返す
*/
@keyframes fall {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -700px 700px;
  }
}
#summary .menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#summary .menu li {
  width: 48%;
  background-color: #fff;
  border-radius: 20px;
  padding: 60px;
  margin-bottom: 32px;
}
/* 3つ目以降はmargin-bottomを設定しない */
#summary .menu li:nth-child(n + 3) {
  margin-bottom: 0;
}
#summary .menu-title {
  font-weight: bold;
  line-height: 1;
  text-align: center;
}
#summary .menu-title .ja {
  display: block;
  font-size: 1.75rem;
  margin-bottom: 15px;
  color: #FF9D00;
}
#summary .menu-title .en {
  display: block;
  font-size: 1rem;
  padding-top: 10px;
  margin-bottom: 15px;
}
.ja2 {
  display: block;
  font-size: 1.75rem;
  margin-bottom: 30px;
}

/*-------------------------------------------
Entry
-------------------------------------------*/
#entry {
  margin-bottom: 60px;
  text-align: center;
}
#entry .title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 5px;
  margin-top: 60px;
}
#entry .catchphrase {
  font-size: 1.125rem;
  margin-bottom: 40px;
}
#entry .btn {
  background-color: #FF9D00;
  border-radius: 40px;
  border: solid 3px #FF9D00;
  color: #fff;
  font-size: 1.75rem;
  font-weight: bold;
  display: block;
  padding: 15px;
  text-align: center;
  transition: 0.3s;
}
#entry .btn:hover {
  background-color: #fff;
  border: solid 3px #FF9D00;
  color: #FF9D00;
}

/*-------------------------------------------
歯科医師
-------------------------------------------*/

.content3 {
  max-width: 1000px;
  height: 698px;
  margin: 100px auto;
  position: relative;
}
/*
【要素の重ね合わせ（子要素）】
「position: absolute;」と「left」で左に配置。
*/
.text3 {
  max-width: 680px;
  background-color: #fff;
  padding: 84px 160px 84px 84px;
  position: absolute;
  left: 0;
}
.text3 p {
  line-height: 1.8;
  margin-bottom: 35px;
}
/*
「display: inline-block;」で下線をテキスト幅に合わせる。
*/
.text3 .title2 {
  border-bottom: solid 1px #35383a;
  display: inline-block;
  font-size: 1.875rem;
  font-weight: normal;
  margin-bottom: 30px;
}
.text3 .large {
  font-size: 1.875rem;
}
/*
「display: inline-block;」でボタンをテキスト幅に合わせてから
paddingでサイズを調整。
「transition」で、ホバーをふわっとさせる。
（※transitionの詳細については調べてみてくださいね。）
*/
.text3 .btn {
  display: inline-block;
  border: solid 1px #35383a;
  border-radius: 30px;
  padding: 16px 50px;
  transition: all 0.3s ease;
}
.text3 .btn:hover {
  background-color: #efeded;
}
/*
【要素の重ね合わせ（子要素）】
「position: absolute;」と「top」「right」で、
親要素の上から140px、右から20pxに配置。
*/
.img3 {
  max-width: 400px;
  position: absolute;
  top: 140px;
  right: 20px;
}
/*
「vertical-align: bottom;」で、画像の下の隙間を消す。
「top」を指定してもOK。
（※画像の下の隙間を消す方法は、実務でもよく使うので
覚えておいてください。）
*/
.img3 img {
  vertical-align: bottom;
}

/*-------------------------------------------
アクセス
-------------------------------------------*/
#access iframe {
    width: 100%;
    vertical-align: bottom;
  }
  
  #access {
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
    z-index: 20;
  }
  #access .place {
    font-size: 1.75rem;
    font-weight: 400;
    margin-bottom: 20px;
    text-align: center;
  }
  #access .address {
    margin-bottom: 20px;
    text-align: center;
  }
  #access .contact {
    margin-bottom: 50px;
    text-align: center;
  }

/*-------------------------------------------
フッター
-------------------------------------------*/
#footer {
    background-color: #e8e8e8;
    color: #333;
    padding: 20px 0;
  }
  #footer .menu {
    display: flex;
    justify-content: center;
    margin: 30px 0 60px 0;
  }
  #footer .menu li {
    border-right: solid 1px #333;
    font-size: 0.875rem;
    padding: 0 20px;
  }
  #footer .menu li:last-child {
    border-right: none;
  }
  #footer .menu li a {
    color: #333;
  }
  #footer .copyright {
    font-size: 0.75rem;
    text-align: center;
  }
  
  /*-------------------------------------------
  トップへ戻るボタン
  -------------------------------------------*/
  /*
  右下に固定で配置
  表示・非表示の切り替えはjQueryで行うため、詳細は「main.js」のコメントを参照
  */
  #to-top {
    width: 50px;
    height: 50px;
    background-color: #121212;
    border: solid 1px #fff;
    border-radius: 50%;
    position: fixed;
    right: 25px;
    bottom: 25px;
  }
  /*
  中の三角は疑似要素で作成
  */
  #to-top::after {
    content: "";
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fff;
    position: relative;
    left: 17px;
    bottom: 3px;
  }

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 900px) {
  .wrapper {
    padding: 0 16px;
  }
  .section-title {
    font-size: 1.75rem;
    margin-bottom: 60px;
  }
  .section-title::after {
    width: 80px;
  }

  /*-------------------------------------------
  ヘッダー
  -------------------------------------------*/
  #header {
    padding: 25px 0 0 25px;
  }

  /* ハンバーガ―メニュー */
  .hamburger {
    width: 75px;
    height: 75px;
  }
  .hamburger span {
    width: 35px;
    left: 21px;
  }
  .hamburger span:nth-child(1) {
    top: 26px;
  }
  .hamburger span:nth-child(2) {
    top: 37px;
  }
  .hamburger span:nth-child(3) {
    top: 48px;
  }
  .hamburger.active span:nth-child(1) {
    top: 37px;
    left: 21px;
  }
  .hamburger.active span:nth-child(2),
  .hamburger.active span:nth-child(3) {
    top: 37px;
  }
  #navi .logo {
    top: 25px;
    left: 25px;
  }
  #navi .menu {
    margin-top: 110px;
  }

  /*-------------------------------------------
  Mainvisual
  -------------------------------------------*/
  #mainvisual {
    height: 490px;
    margin-bottom: 80px;
  }
  #mainvisual .fade li {
    width: 100%;
  }
  #mainvisual .fade li img {
    height: 300px;
  }
  #mainvisual .text {
    /* 両端に16pxづつ余白を作る */
    width: calc(100% - 32px);
    top: 310px;
    left: 16px;
  }
  #mainvisual .text .title {
    font-size: 1.75rem;
    margin-bottom: 10px;
  }
  #mainvisual .text .title-sub {
    font-size: 0.875rem;
    margin-bottom: 8px;
  }
  #mainvisual .text .btn {
    width: 100%;
  }

  /*-------------------------------------------
　インビザラインアピール
  -------------------------------------------*/
  .content {
    flex-direction: column;
  }
  .content .left {
    width: 100%;
    padding: 0 16px;
    margin-bottom: 20px;
  }
  .content .left .title .en {
    font-size: 2.25rem;
  }
  /*
  「position: static;」で absolute を解除する
  */
  .content .left .text-area {
    position: static;
  }
  /*
  スマホ表示の場合は画像を四角にするため、
  clip-pathにnoneを設定して斜めの設定をリセットする
  */
  .content .right {
    width: 100%;
    clip-path: none;
  }

/*-------------------------------------------
インビザライン説明
-------------------------------------------*/
.section-title2 {
    font-size: 1.25rem;
  }

  .content2 {
    flex-direction: column;
  }
  .content2 .img2 {
    width: 100%;
    margin-bottom: 10px;
  }
  .content2 .text2 {
    width: 100%;
    padding: 0;
  }

  /*-------------------------------------------
  選ばれる理由
  -------------------------------------------*/
  #reason {
    margin-bottom: 80px;
  }
  #reason .bg {
    padding: 40px 0;
  }
  #reason .slide {
    width: calc(100% - 16px);
  }
  #reason .slide .title {
    font-size: 1.5rem;
  }
  @keyframes slide-left {
    0% {
      transform: translateX(-100%);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes slide-right {
    0% {
      transform: translateX(100%);
    }
    100% {
      opacity: 1;
      transform: translateX(16px);
    }
  }
  
/*-------------------------------------------
悩み
-------------------------------------------*/
.content-nayami {
  height: auto;
  position: static;
  margin: 0;
}
.text-nayami {
  max-width: 100%;
  padding: 60px 20px;
  position: static;
}
.img-nayami {
  max-width: 100%;
  position: static;
}

  /*-------------------------------------------
  Voice
  -------------------------------------------*/
  #voice {
    margin-bottom: 80px;
  }
  #voice .student {
    text-align: center;
  }
  #voice .item-left,
  #voice .item-right {
    margin-bottom: 40px;
  }
  #voice .item-left {
    flex-direction: column-reverse;
    align-items: center;
  }
  #voice .item-right {
    flex-direction: column;
    align-items: center;
  }
  #voice .item-left .balloon-text,
  #voice .item-right .balloon-text {
    width: 100%;
    margin: 0 0 30px 0;
  }
  /*
  スマホの場合はふきだしの向きを下に変える
  */
  #voice .item-left .balloon-text::before,
  #voice .item-right .balloon-text::before {
    top: 100%;
    border: 15px solid transparent;
    border-top: 15px solid #e9f1fb;
  }
  #voice .item-left .balloon-text::before {
    margin-left: calc(50% - 15px);
  }
  #voice .item-right .balloon-text::before {
    margin-right: calc(50% - 15px);
  }

  /*-------------------------------------------
  フロー
  -------------------------------------------*/
  .wrapper2 {
    padding: 60px 20px;
  }
  .sec-title {
    font-size: 1.25rem;
    margin-bottom: 30px;
  }
  .sec-title::before,
  .sec-title::after {
    width: 18%;
  }
  #flow {
    padding-top: 0;
  }
  #flow .step {
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
  }
  #flow .figure {
    margin-bottom: 80px;
  }
  /*
  図形下の黄色い棒線を中央に配置
  */
  #flow .figure::before {
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  /*
  図形（四角部分）の横幅を、画面幅から80pxマイナスしてサイズを調整
  ※80pxは任意の数値ですので、図形をもっと小さくして横の余白とりたい場合は、
  ここの数値を大きくする等して調整が可能です。
  */
  #flow .figure li {
    width: calc(100vw - 80px);
  }
  /*
  図形（三角部分）の横幅を設定
  ※上記同様、図形のサイズにあわせて調整を行う
  */
  #flow .figure li::before {
    border-left: calc(50vw - 40px) solid transparent;
    border-right: calc(50vw - 40px) solid transparent;
  }
  #flow .description {
    margin-left: 50px;
  }

  /*-------------------------------------------
  金額
  -------------------------------------------*/
  #summary {
    margin-bottom: 80px;
  }
  #summary .menu {
    flex-direction: column;
  }
  #summary .menu li {
    width: 100%;
    padding: 30px;
  }
  #summary .menu li:nth-child(3) {
    margin-bottom: 32px;
  }
  #summary .menu-title .ja {
    font-size: 1.5rem;
  }
  #summary .menu-title .en {
    font-size: 1rem;
  }
  .ja2 {
    font-size: 1.5rem;
  }

  /*-------------------------------------------
  Entry
  -------------------------------------------*/
  #entry {
    margin-bottom: 80px;
  }
  #entry .title {
    font-size: 1.5rem;
  }
  #entry .catchphrase {
    font-size: 1rem;
  }
  #entry .btn{
    font-size: 1.5rem;
  }

  /*-------------------------------------------
歯科医師
-------------------------------------------*/
.content3 {
  height: auto;
  position: static;
  margin: 0;
}
.text3 {
  max-width: 100%;
  padding: 60px 20px;
  position: static;
}
.img3 {
  max-width: 100%;
  position: static;
}

   /*-------------------------------------------
  アクセス
  -------------------------------------------*/


  /*-------------------------------------------
  フッター
  -------------------------------------------*/
  #footer .menu {
    flex-wrap: wrap;
  }
  #footer .menu li {
    margin-bottom: 10px;
  }
}