@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

.sphere {
    width: 100px;
    /* 画像の幅に合わせて調整 */
    height: 100px;
    /* 画像の高さに合わせて調整 */
    background-image: url('http://test.aroma-relaxation-jog.com/wp-content/uploads/2023/11/img.png');
    /* 画像ファイルのパス */
    background-size: cover;
    /* 画像を要素に合わせて表示 */
    background-repeat: no-repeat;
    /* 画像を繰り返し表示しない */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0);
    /* 初期の回転角度 */
    animation: roll 10s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
    /* カスタムのタイミング関数を設定 */
}

@keyframes roll {
    0% {
        transform: translate(-50%, -50%) rotate(0);
        /* 初期の回転角度 */
        left: -50px;
        /* 左端の位置 */
    }

    100% {
        transform: translate(-50%, -50%) rotate(1080deg);
        /* 2回転 (360度 × 2回転) */
        left: calc(100% + 50px);
        /* 右端の位置 */
    }
}

/*ブログパーツ2019*/
.top_name {
    box-sizing: border-box;
    display: flex;
    height: 80vh;
    align-items: flex-center;

    /*    -webkit-text-stroke: 1px ;
	-webkit-text-stroke-color: rgb(76, 73, 72);
*/
}

.name_jog {
    height: 10vh;
    width: 10vw;
    color: red;
}

.parent_svg_wrap {
    width: 100%;
    height: 100%;
    display: flex;
}

.p-mainVisual__textLayer>.p-blogParts {
    margin: 1em 0 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.svg-wrap {

    /*	display:block;
    position: absolute;
    background-color: #222;
*/
    padding: 0%;
    text-align: left;
    transform: scale(1);
}

.svg-wrap svg {
    width: 40VH;

}

.svg-wrap svg .cls-1:first-child {
    stroke-dasharray: 1000px;
    /*  stroke: #fff;*/
    stroke: transparent;
    fill: transparent;
    stroke-width: 0.25px;
    animation: svgAnime2 6.0S, svgAnime3 3.0S;
    animation-delay: 0.2S;
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);

    animation-fill-mode: forwards;
}

.svg-wrap svg .cls-1:nth-of-type(2) {
    stroke-dasharray: 1000px;
    /*  stroke: #fff;*/
    stroke: transparent;
    fill: transparent;
    stroke-width: 0.25px;
    animation: svgAnime2 6.0S, svgAnime3 3.0S;
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);

    animation-delay: 1.2S;
    animation-fill-mode: forwards;
}

.svg-wrap svg .cls-1:last-child {
    stroke-dasharray: 1000px;
    /*  stroke: #fff;*/
    stroke: transparent;
    stroke-width: 0.25px;
    fill: transparent;
    animation: svgAnime2 6.0S, svgAnime3 3.0S;

    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);

    animation-delay: 2.2S;
    animation-fill-mode: forwards;
}


@keyframes svgAnime {
    0% {
        stroke-dashoffset: 1000px;
        fill: transparent;
    }

    70% {
        stroke-dashoffset: 800px;
        fill: transparent;
    }

    100% {
        stroke-dashoffset: 0px;
        stroke: transparent;
        fill: #fff;
    }
}

@keyframes svgAnime2 {
    0% {
        fill: transparent;
    }

    50% {
        fill: #8BA487;
    }

    100% {
        fill: #fff;
    }
}

@keyframes svgAnime3 {
    0% {
        transform: translate(0, 30px)
    }

    50% {
        transform: translate(0, 0)
    }

    100% {
        transform: translate(0, 0)
    }
}


.main-parts2 {
    display: flex;
    padding-bottom: 7%;
}

.main-parts3 {
    height: 5%;
}


.main-parts2-child1 {
    flex: 1;
    display: flex;
    flex-wrap: wrap;

}

.main-parts2-child1-parts1 {
    display: block;
    width: 45%;
    border: 1px solid #ffffff;
    border-radius: 11px;
    text-align: center;
    color: white;
    margin-bottom: 6%;
    margin-right: 5%;
}

.main-parts2-child1-parts2 {
    display: block;
    width: 45%;
    margin-bottom: 6%;
    margin-right: 5%;
}



#_レイヤー_1-2 {
    transform: scale(0.4);
}

.main-parts1 {
    display: flex;
    flex-direction: column;
    /*	align-items: end;*/
}

.sub-title-jog {
    font-family: "myriad-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
    padding-bottom: 7%;
    letter-spacing: .1rem;
}

.main_copy {
    display: flex;
    flex-direction: column;
    /*	justify-content:end;*/
    align-items: end;
    flex: 40vh;
}

.main_copy_item1 {
    width: 100%;
    flex: 0.2;
}

@media screen and (min-width: 600px) {
    .main_copy_item1 {
        flex: 0.4;
        /* 変更したい高さを指定 */
    }
}


.main_copy_item2 {
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.6rem;
    flex: 0.8;
    width: 20%;
    text-align: right;

}

@media screen and (min-width: 600px) {
    .main_copy_item2 {
        flex: 0.6;
        /* 変更したい高さを指定 */
    }
}



.main_copy_item2>p {
    writing-mode: vertical-rl;
    width: 100%;
    text-align: justify;
}


/* 3 つのサンプル共通 */
.sample {
    overflow: hidden;
    position: relative;
}

.sample img {
    display: block;
    height: auto;
    width: 100%;
}

/* 1 つ目のサンプル */
.sample-one.sample-animation img {
    animation: sample-one 1.2s cubic-bezier(.4, 0, .2, 1);
}

@keyframes sample-one {
    0% {
        opacity: 0;
        transform: scale(1.2) translateY(24px);
    }

    32% {
        opacity: 0;
        transform: scale(1.2) translateY(24px);
    }
}

/* 2 つ目のサンプル */
.sample-second.sample-animation {
    animation: sample-second-img 2s cubic-bezier(.4, 0, .2, 1);
}

.sample-second.sample-animation:before {
    animation: sample-second-before 2s cubic-bezier(.4, 0, .2, 1) forwards;
    background: #fff;
    bottom: 0;
    content: '';
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

@keyframes sample-second-img {
    0% {
        opacity: 0;
    }
}

@keyframes sample-second-before {
    100% {
        transform: translateX(100%);
    }
}

/* 3 つ目のサンプル */
.sample-third.sample-animation:before,
.sample-third.sample-animation:after {
    animation: 2s cubic-bezier(.4, 0, .2, 1) forwards;
    background: #fff;
    bottom: 0;
    content: '';
    pointer-events: none;
    position: absolute;
    top: 0;
    z-index: 1;
}

.sample-third.sample-animation:before {
    animation-name: sample-third-before;
    left: 0;
    right: 50%;
}

.sample-third.sample-animation:after {
    animation-name: sample-third-after;
    left: 50%;
    right: 0;
}

@keyframes sample-third-before {
    100% {
        transform: translateY(100%);
    }
}

@keyframes sample-third-after {
    100% {
        transform: translateY(-100%);
    }
}

.font_myriad-pro1 {
    font-family: "myriad-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
    padding-bottom: 7%;
    letter-spacing: .1rem;
}

.font_myriad-pro2 {
    font-family: "myriad-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: .1rem;
}

.font_tsuku1 {
    font-family: "fot-tsukuardgothic-std", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

.font_futura1 {
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.font_futura2 {
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.font_imperial {
    font-family: "imperial-urw", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
	font-size: 1.6rem !important;
}

.gyokan0 {
    line-height: 2rem;
}

/*固定ページタイトル高さ変更*/
.l-topTitleArea {
    min-height: 50vh;
}


/*固定ページタイトルフォント変更*/
.c-pageTitle {
    font-family: "imperial-urw", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
}

.c-pageExcerpt {
    font-family: "fot-tsukuardgothic-std", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

p.has-text-align-right.font_tsuku1.animated.o-anim-ready.fadeIn.slower {
    line-height: 1.3rem;
}

.wp-block-image .is-style-rounded img,
.wp-block-image.is-style-circle-mask img,
.wp-block-image.is-style-rounded img {
    border-radius: 10px !important;
}

/*固定ページのリンク位置を指定*/

/*.kotei_link_parts {
    display: flex;
    padding-bottom: 7%;
    position: relative;
    top: -140px;
}*/

.kotei_link_parts2 {
    display: flex;
    padding-bottom: 7%;
    position: relative;
    top: -160px;
}

/*お着換え無料IMGの位置を指定*/
.kigae_img{
    position:  relative;        /* 要素の配置方法を指定 */
    padding:  0px;             /* 余白指定 */
    right:  0px;                /* 左からの位置指定 */
    top: -40vh;                  /* 上からの位置指定 */
}



/*リンクのLAST_CHILDのレイアウトを修正*/
a.main-parts2-child1-parts1.last-link {
    margin-bottom: 6% !important;
}

/*salon booking systemu レイアウト調整*/


.sln-service, #sln-salon .sln-service {
    margin-bottom: 0em !important;
}

.col-xs-12.col-md-4.sln-box--formactions {
    margin-top: 50px;
}

.col-xs-12.col-md-4 {
    margin-top: 50px;
}

.row.sln-total {
    margin-top: 30px;
}



/* 予約者の名前に「様」をつける */
p[class="sln-text--dark"] ::after  {
	content: " 様";
}

/* 施術時間を非表示にする*/
.sln-steps-duration.sln-service-duration {
	visibility:hidden;
}

#sln-salon .datetimepicker.sln-datetimepicker table tr td.day.active:not(.disabled),
#sln-salon .datetimepicker.sln-datetimepicker table tr td span.minute.active:not(.disabled){
    color: #4c4948 !important;
}


/* パソコン用のCSS レイアウトを整える */
@media (max-width: 5000px){
h3[class="sln-steps-name sln-service-name"] {
	width: 100% !important;
	padding: 0em 0em 0em 0em !important;
	margin: 0em 0em 0em 0em !important;
	font-size: 1.0em !important;
}
h3[class="sln-steps-price sln-service-price"]{
	width: 100% !important;
	padding: 0em 0em 0em 0em !important;
	margin: 0em 0em 0em 0em !important;
	font-size: 1.0em !important;
}

/* タブレットサイズ用のCSS レイアウト崩れを防ぐ */
@media (max-width: 768px){
h3[class="sln-steps-name sln-service-name"] {
	width: 100% !important;
	padding: 0em 0em 0em 0em !important;
	margin: 0em 0em 0em 2em !important;
	font-size: 1.0em !important;
}
h3[class="sln-steps-price sln-service-price"]{
	width: 100% !important;
	padding: 0em 0em 0em 0em !important;
	margin: 0em 0em 0em -1em !important;
	font-size: 1.0em !important;
}

/* スマホ用のCSS レイアウト崩れを防ぐ */
@media (max-width: 574px){
h3[class="sln-steps-name sln-service-name"] {
	width: 100% !important;
	padding: 0em 0em 0em 0em !important;
	margin: 0em 0em 0em 0em !important;
	font-size: 0.84em !important;
}
h3[class="sln-steps-price sln-service-price"]{
	width: 100% !important;
	padding: 0em 0em 0em 0em !important;
	margin: 0em 0em 0em 0em !important;
	font-size: 0.84em !important;
}

/*swiperパーツ 色調整*/

.swiper-button-prev,.swiper-button-next{
	background-color:rgba(0,0,0,0.2) !important;
    color: rgba(255,255,255,0.5) !important;
}
.swiper-pagination-bullet-active{
	background-color:rgba(255,255,255,0.5) !important;
}
	

/*メニューにNEWの表示*/
.menuList::after {
  display        : inline-block;       /* インラインボックス定義  */
  content        : "NEW";              /* 表示する文字            */
  background     : #F987C5;            /* 背景色                  */
  color          : #ffffff;            /* 文字色                  */
  font-weight    : bold;               /* 太字                    */
  font-size      : 10pt;               /* ベースの文字サイズ      */
  letter-spacing : -1px;               /* 文字間隔詰め            */
  line-height    : 1;                  /* 1行の高さ               */
  vertical-align : top;                /* 基準の高さ位置          */
  margin         : 0;                  /* 外余白なし              */
  padding        : 2px;                /* 反転時の内余白          */
  transform      : scale(0.8)          /* 文字サイズ変更          */
                   translateX(-30%);    /* 横位置調整              */
                                       /* ブリンクのアニメ指定    */
  animation      : newAnime 1.5s infinite alternate;
}
@keyframes newAnime {
   0% { color      : #F987C5;          /* ブリンク時の文字色      */
        background : #ffffff;          /* ブリンク時の背景色      */
      }
 100% { color      : #ffffff;          /* ブリンク時の文字色      */
        background : #F987C5;          /* ブリンク時の背景色      */
      }
}