html{scroll-behavior: smooth;}

body{overflow-x:hidden;}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 共通
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 12px;
    color: #333333;
    font-weight: normal;
    line-height: 1.5;
}

section {
    padding: 0 0 40px 0;
}

.fixed{
 position: fixed;
 top: 0;
}

/*----- フォント -----*/
.txt-big {
    font-size:  140%;
}

.txt-small {
    font-size: 80%;
}

h2 {
    font-size: 60px;
    font-weight: bold;
    text-align: center;
}

h2 span {
    color: #5c9d25;
}

h3 {
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    width: 600px;
    margin: auto;
    position: relative;
    padding: 1rem 2rem calc(1rem + 10px);
    background: #fad126;
    animation: flash 2s linear infinite;
}

h3:before {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 100%;
    height: 100%;
    content: '';
    border: 4px solid #000;
}

h4 {
    font-weight: bold;
    font-size: max(2.1vw,30px);
    margin-bottom: 25px;
}

h5 {
    font-weight: 600;
    font-size: max(1.6vw,28px);
    margin-bottom: 25px;
}

h5 span {
    font-size: 130%;
    background:linear-gradient(transparent 60%, #fad126 60%);
}

p {
    font-size: 16px;
}

/*----- 画像 -----*/
.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-filter {
    border: 10px solid #ffffff;
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}

/*----- 位置 -----*/
.right {
    text-align: right;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

/*----- 余白 -----*/
.my-sec {
    margin: 40px 0;
}

.py-sec {
    padding: 40px 0;
}


/*----- デバイスの表示・非表示 -----*/
.pc {
	display: block;
}

.sp {
	display: none;
}


/*----- ☆PC以下（992px未満）☆ -----*/
@media (max-width: 992px) {
    .img-filter {
        border: 10px solid #ffffff;
        filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5));
    }
    
    h5 {
        font-size: max(2.2vw, 20px);
        margin: 15px auto;
    }
}

/*----- ☆タブレット以下（768px未満）☆ -----*/
@media (max-width: 768px) {
    section {
        padding: 0 0 20px 0;
    }
    
    h2 {
        font-size: 7vw;
    }
    
    h3 {
        font-size: 5vw;
        width: 85%;
    }
    h3:before {
        top: -7px;
        left: -7px;
    }
    
    h4 {
        font-size:  max(3.1vw,20px);
        margin: 10px auto 5px;
    }
    
    h5 {
        font-size: max(3.1vw, 15px);
        margin: 15px auto;
    }
    
    p {
        font-size: 10px;
    }
    
    .my-sec {
        margin: 20px 0;
    }
    .py-sec {
        padding: 20px 0;
    }
}

/*----- ☆スマートフォン以下（576px未満）☆ -----*/
@media (max-width: 576px) {
	.pc {
	    display: none;
    }

    .sp {
	    display: block;
    }
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 ボタン動き　＆　アニメーション
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*◆◆　【ボタン】縦揺れ　◆◆*/
.btn-yure {
    animation: btn-yure 2s infinite;
}

@keyframes btn-yure {
    0% {
        transform: translate(0px, 2px);
    }
    5% {
        transform: translate(0px, -2px);
    }
    10% {
        transform: translate(0px, 2px);
    }
    15% {
        transform: translate(0px, -2px);
    }
    20% {
        transform: translate(0px, 2px);
    }
    25% {
        transform: translate(0px, -2px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}

.btn-yure:hover {
    filter: hue-rotate(300deg);
}


/*◆◆　【アニメ】徐々にくっきり　◆◆*/
.blur-up01 {
    width: 100%;
    filter: blur(100px);
    animation: blur-anime 1s linear forwards;
}

@keyframes blur-anime {
    100% {
        filter: blur(0);
    }
}

.blur-up02 {
    width: 100%;
    filter: blur(100px);
    animation: blur-anime 1.5s linear forwards;
}

@keyframes blur-anime {
    100% {
        filter: blur(0);
    }
}

.blur-up03 {
    width: 100%;
    filter: blur(100px);
    animation: blur-anime 2s linear forwards;
}

@keyframes blur-anime {
    100% {
        filter: blur(0);
    }
}


/*◆◆　【アニメ】フラッシュ　◆◆*/
.flash {
    animation: flash 1s linear infinite;
}

@keyframes flash {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
  
  
  100% {
    opacity: 1;
  }
}


/*◆◆　【アニメ】フラッシュ（カラー）　◆◆*/
.flash02 {
    animation: flash02 1s ease infinite;
}

@keyframes flash02 {
  0% {
    opacity: 1;
  }

  50% {
      filter: brightness(150%);
  }
  
  
  100% {
    opacity: 0;
  }
}

/*◆◆　【アニメ】フラッシュ（光る＆拡大）　◆◆*/
.flash03 {
    animation: flash03 3s ease-in-out infinite;
}

@keyframes flash03 {
  0% {
      opacity: 1;
  }

  50% {
      filter: brightness(130%);
      transform: scale(1.1, 1.1);
  }
  
  
  100% {
    opacity: 1;
  }
}


/*◆◆　【アニメ】振り子　◆◆*/
.swing {
    animation: yurayura 3s linear infinite;
}

@keyframes yurayura {
    0%,
    100% {
        transform: scale(1.0) rotate(2deg);
    }

    25% {
        transform: scale(1.0) rotate(0deg);
    }

    50% {
        transform: scale(1.0) rotate(-2deg);
    }
}

/*◆◆　【アニメ】バウンド　◆◆*/
.bound {
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1s;
}

.bound-anime {
    animation-name: jump;
    animation-duration: .8s;
}

@keyframes jump {
    0% {
        transform: translate(0%, 20px) rotateX(20deg);
    }
    100% {
        transform: translate(0%, 0%);
    }
}

/*◆◆　【アニメ】キラリ　◆◆*/
.reflection {
    position: relative;
    overflow: hidden;
}

.reflection:after {
    content: "";
    display: block;
    width: 30px;
    height: 100%;
    position: absolute;
    top: -180px;
    left: 0;
    background-color: #FFF;
    opacity: 0;
    transform: rotate(45deg);
    animation: reflect 2s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflect 2s ease-in-out infinite;
}

@keyframes reflect {
    0% {
        transform: scale(0) rotate(45deg);
        opacity: 0;
    }

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

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

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

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

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

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

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

.reflection img:hover {
    filter: brightness(120%);
}


/*◆◆　【ホバー】拡大　◆◆*/
.big01 img {
	transition: 0.5s;
}
.big01 img:hover {
	transform: scale(1.2, 1.2);
}


/*◆◆　【ホバー】拡大+フィルター　◆◆*/
.big02 img {
	transition: 0.5s;
	width: 100%;
}
.big02 img:hover {
	transform: scale(1.2, 1.2);
    filter: brightness(120%);
}


/*◆◆　【ホバー】横回転　◆◆*/
.rotate-yoko img {
    transition: 1.5s;
    transform: rotateY(0deg );
}

.rotate-yoko img:hover {
    transform: rotateY( 360deg );
}


/*◆◆　【ホバー】右下がり　◆◆*/
.down-right img{
    transition: 0.5s;
    transform: rotateZ( 0deg );
}

.down-right img:hover {
    transform: rotateZ( 20deg );
}


/*◆◆　【ホバー】左下がり　◆◆*/
.down-left img{
    transition: 0.5s;
    transform: rotateZ( 0deg );
}

.down-left img:hover {
    transform: rotateZ( -20deg );
}

/*◆◆　【ホバー】回転＆アップ　◆◆*/
.rotate-up img {
    transition: 0.5s;
    transform: rotatez(0deg);
}

.rotate-up img:hover {
    transform: rotatez(360deg)  scale(1.2, 1.2);
    filter: brightness(130%);
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
　header　ヘッダー
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
header {
    
}

#logo {
    text-align: left;
    margin-left: 10%;
}

#header-btn {
    text-align: right;
    margin-right: 10%;
}


/*----- ☆PC大以下（1200px未満）☆ -----*/
@media (max-width: 1200px) {
    #logo {
        margin-left: 5%;
    }
    
    #header-btn {
        margin-right: 5%;
    }
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
　mv　メインビジュアル
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#mv-cover {
    background-image: url(../images/mv_cover.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    animation: mv-cover-anime 15s ease-out infinite;
}

@keyframes mv-cover-anime {
	0%{
		background-image: url(../images/mv_cover.png);
	}
	33%{
		background-image: url(../images/mv_cover02.png);
	}
    66%{
		background-image: url(../images/mv_cover03.png);
	}
    100%{
		background-image: url(../images/mv_cover.png);
	}
}


#mv-copy {
    padding: 30px 0;
}

#mv-copy02 {
    margin-top: 10px;
}

#mv-before-after {
    margin-top: 20px;
}

#mv-copy03 {
    margin-top: 40px;
}

/*#mv-copy04 {
    margin-top: 30px;
}*/

/*----- ☆PC以下（992px以下）☆ -----*/
@media (max-width: 992px) {
    #mv-copy {
        line-height: 1;
        padding: 15px 0;
    }
    #mv-before-after {
        margin-top: 5px;
    }
    #mv-copy03 {
        margin-top: 10px;
    }
    /*#mv-copy04 {
        margin-top: 10px;
    }*/
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 sec01　都内4店舗
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#sec01-bg {
    /*background-image: url(../images/sec01_bg.png);
    background-size: cover left;
    background-repeat: no-repeat;
    animation: walk 2s linear infinite;*/
}

@keyframes walk {
    0% {
        background-position: 10px 10px;
    }
    25% {
        background-position: 20px 15px;
    }
    50% {
        background-position: 10px 10px;
    }
    75% {
        background-position: 0px 15px;
    }
    100% {
        background-position: 10px 10px;
    }
}

.sec01-shop {
    /*text-align: center;*/
    margin-bottom: 30px;
    /*margin-left: 30%;*/
}

.sec01-shop dt {
    width: 100%;
	margin-bottom: 30px;
}

.sec01-shop dt img {
    width: 100%;
}

.sec01-shop dd {
    max-width: 1116px;
	margin: 0 auto;
}


/*----- ☆タブレット（576px以上768px未満）☆ -----*/
@media (min-width:576px) and (max-width: 768px) {
    #sec01-bg {
        background-size: contain;
    }
    
    @keyframes walk {
        0% {
            background-position: -210px 10px;
        }

        25% {
            background-position: -220px 15px;
        }

        50% {
            background-position: -210px 10px;
        }

        75% {
            background-position: -200px 15px;
        }

        100% {
            background-position: -210px 10px;
        }
}
    
    .sec01-shop {
        margin-bottom: 15px;
        margin-left: 0;
    }
}


/*----- ☆スマホ横以下（576px未満）☆ -----*/
@media (max-width: 576px) {
    #sec01-bg {
        background-size: contain;
    }
    
    @keyframes walk {
        0% {
            background-position: -10px 10px;
        }

        25% {
            background-position: -20px 15px;
        }

        50% {
            background-position: -10px 10px;
        }

        75% {
            background-position: -0px 15px;
        }

        100% {
            background-position: -10px 10px;
        }
    }

    .sec01-shop dt {
	    margin-bottom: 10px;
    }
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
　sec02　ポイント
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#sec02-bg {
    background-color: #e3f9d6;
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
　sec03　効果
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*□□□□□　たった1回の施術　□□□□□*/
.before-after {
    margin: 40px auto;
    text-align: center;
}

#sec03 #before_after_first {
    max-width: 70%;
    height: auto;
}

#sec03 .before_after_other {
    max-width: 100%;
    height: auto;
}


/*----- ☆PC以下（992px未満）☆ -----*/
@media (max-width: 992px) {
    .before-after {
        margin: 20px auto;
    }
    
    #sec03 .before_after_other {
        max-width: 70%;
    }
}


/*□□□□□　お客様からのお喜びの声　□□□□□*/
.voice-right {
    margin: 40px 0 40px 20%;
    text-align: right;
}

.voice-left {
    margin: 40px 20% 40px 0;
    text-align: left;
}

.voice-right2 {
    margin: 40px 0 10px 20%;
    text-align: right;
}


/*----- ☆PC以下（992px未満）☆ -----*/
@media (max-width: 992px) {
    .voice-right , .voice-left {
        margin: 20px 0;
        text-align: center;
    }
    .voice-right2 {
        margin: 20px 0 10px 0;
        text-align: center;
    }
}


/*□□□□□　他にも、皆様にお喜び頂いてます　□□□□□*/
#slide-wrap {
    display: flex;
    align-items: center;
    overflow: hidden;
    margin: 40px 0;
}

/*--　スラーダー枠　--*/
#slide-wrap {
    padding: 20px;
    background-color: #ffdbc9;
    border: 20px solid #333333;/* 枠線の太さ・色 */
    box-shadow: 0 0 5px 2px #5c5c5c inset;/* 影の色 */
    border-radius: 30px;
}

.slide {
    display: flex;
    animation: loop-slide 20s infinite linear 1s both;
}

@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.voice-pic {
    margin: 10px;
}


/*----- ☆PC以下（992px未満）☆ -----*/
@media (max-width: 992px) {
    #slide-wrap {
        margin: 20px 0;
        padding: 10px;
    }
    
    .voice-pic {
        margin-top: 20px;
    }
    
    .voice-pic img {
        width: 300px;
    }
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
　order　オーダー
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.order-cover {
    background-image: url(../images/order_cover.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.order-copy01 {
    text-align: center;
    padding: 40px 0;
}

.order-copy-price {
    text-align: right;
    padding-bottom: 0px;
}

.order-copy02 {
    text-align: center;
    padding-bottom: 20px;
}


/*----- ☆タブレット以下（768px未満）☆ -----*/
@media (max-width: 768px) {
    .order-copy01 {
        padding: 10px 0 30px;
    }
    
    .order-copy-price {
        padding-bottom: 20px;
    }
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
　sec04　選ばれる理由
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.reason-left , .reason-right {
    position: relative;
    display: flex;
    width: 80%;
    margin-bottom: 60px;
}

.reason-left_num {
    position: absolute;
    left: -5%;
}

.reason-left_img {
    width: 45%;
    margin-left: 5%;
    text-align: right;
}

.reason-left_txt {
    width: 55%;
    position: relative;
    order: -1;
    z-index: 1;
    vertical-align: middle;
    margin: auto 0;
}

.reason-left_txt p , .reason-right_txt p {
    font-size: max(1.1vw,20px);
    line-height: normal;
}

.reason-right_num {
    position: absolute;
    right: -5%;   
}

.reason-right_img {
    width: 45%;
    margin-right: 5%;
}

.reason-right_txt {
    width: 55%;
    position: relative;
    order: -1;
    z-index: 1;
    vertical-align: middle;
    margin: auto 0; 
    order: 2;
}



/*----- ☆タブレット以下（768px未満）☆ -----*/
@media (max-width: 768px) {
    .reason-left , .reason-right {
        position: unset;
        display: unset;
        margin-bottom: 0;
    }
    
    .reason-left_num {
        left: 0%;
        width: 30%;
    }
    
    .reason-left_img {
        width: 70%;
        margin-left: 30%;
    }
    
    .reason-right_num {
        right: 0%;
        width: 30%;
    }
    
    .reason-right_img {
        width: 70%;
        margin-right: 0%;
    }
    
    .reason-left_txt , .reason-right_txt {
        width: 100%;
        position: relative;
        margin-bottom: 30px;
        padding: 0 5%;
    }
    
    .reason-left_txt p , .reason-right_txt p {
        font-size: min(3vw,20px);
    }
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
　sec05　補正施術の流れ
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#sec05-bg {
    background-color: #e3f9d6;
}

#time-border {
    border: solid 3px #000000;
    border-radius: 10px;
    background-color: #ffffff;
    font-size: max(1.5vw,20px);
    font-weight: bold;
    width: 70%;
    margin: 0 auto 60px;;
    padding: 10px;
}

.flow {
    border: solid 5px #5c9d25;
    border-radius: 10px;
    background-color: #ffffff;
    margin-bottom: 30px;
    padding: 10px;
}

.flow p {
    font-size: max(1.2vw,20px);
}

.arrow {
    text-align: center;
    margin-bottom: 30px;
}

/*----- ☆タブレット以下（768px未満）☆ -----*/
@media (max-width: 768px) {
    .flow p {
        font-size: max(3.1vw, 16px);
    }
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
　sec06　各店舗情報
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.sec06-box {
    border: 5px solid #5c9d25;
    margin-bottom: 30px;
    padding-bottom: 10px;
}

.sec06-box-last {
    border: 5px solid #5c9d25;
    margin-bottom: 60px;
    padding-bottom: 10px;
}

.shop-name {
    background-color: #5c9d25;
    color: #ffffff;
    text-align: center;
    margin-bottom: 20px;
    padding: 10px 0;
}

.shop-txt {
    font-size: min(1.5vw,20px);
    line-height: 1.6;
}

.shop-tel {
    color: #5c9d25;
    font-size: min(3.6vw,40px);
    font-weight: bold;
}

.sec06-box-line {
    border: 5px solid #00b900;
    border-radius: 20px;
    margin-bottom: 30px;
    padding: 15px;
}

.line-title {
    color: #00b900;
    text-align: center;
    font-size: max(2.6vw,36px);
}

.line-col {
    display: flex;
}

.line-box {
    border: 5px solid #00b900;
    margin: 0 1% 30px;
    padding-bottom: 10px;
    width: 50%;
}

.line-box h4 {
    background-color: #00b900;
    color: #ffffff;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 10px 0;
}

.line-box h4 span {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fad126;
    text-align: center;
    line-height: 50px;
    margin-right: 5px;
}

.img-bg {
    padding: 20px;
    text-align: center;
}

.line-txt {
    color: #ec4a59;
    text-align: center;
}

.line-txt ruby {
    ruby-position: under;
    font-size: 120%;
}

.line-txt ruby rt {
    color: #333333;
    font-size: 40%;
}


/*----- ☆タブレット以下（768px未満）☆ -----*/
@media (max-width: 768px) {
    .shop-name {
        margin-bottom: 10px;
}
    .shop-txt {
        font-size: max(2.6vw, 14px);
        line-height: normal;
    }
    
    .shop-tel {
        font-size: max(4vw, 28px);
        line-height: normal;
        text-align: center;
    }
    .shop-btn {
        text-align: center;
    }
    
    .line-title {
        font-size: max(3.2vw,20px);
        margin-bottom: 20px;
    }
    .line-col {
        display: block;
        margin: auto;
        text-align: center;
    }
    .line-box {
        width: 100%;
        margin: 0 auto 20px;
    }
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
　footer　フッター
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#footer-bg {
    background-color: #5c9d25;
    color: #ffffff;
}

#contact-btn {
    position: fixed;
    right: 0;
    top: 10%;
}

.contact-btn {
  position: fixed;
  right: 0;
  top: 10%;
  cursor: pointer;
  transition: .3s;
  
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
}

/*このクラスが付与されると表示する*/
.active{
  opacity: 1;
  visibility: visible;
}

/*----- ☆タブレット以下（768px未満）☆ -----*/
@media (max-width: 768px) {
    .contact-btn{
        width: 8%;
        top: 5%;
    }
}