@charset "UTF-8";

/* -------------------------------
sanitize.css
------------------------------- */

/* Document
 * ========================================================================== */

/**
 * Add border box sizing in all browsers (opinionated).
 */

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

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */

::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}

/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Use a 4-space tab width in all browsers (opinionated).
 * 4. Remove the grey highlight on links in iOS (opinionated).
 * 5. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 * 6. Breaks words to prevent overflow in all browsers (opinionated).
 */

html {
  cursor: default; /* 1 */
  line-height: 1.5; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  -webkit-tap-highlight-color: transparent /* 4 */;
  -ms-text-size-adjust: 100%; /* 5 */
  -webkit-text-size-adjust: 100%; /* 5 */
  word-break: break-word; /* 6 */
}

/* Sections
 * ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/* Grouping content
 * ========================================================================== */


/**
 * Add the correct display in IE.
 */

main {
  display: block;
}

/* Text-level semantics
 * ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

/* Embedded content
 * ========================================================================== */

/*
 * Change the alignment on media elements in all browsers (opinionated).
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/**
 * Remove the border on images within links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */

svg:not([fill]) {
  fill: currentColor;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Tabular data
 * ========================================================================== */

/**
 * Collapse border spacing in all browsers (opinionated).
 */

table {
  border-collapse: collapse;
}

/* User interaction
 * ========================================================================== */

/*
 * 1. Remove the tapping delay in IE 10.
 * 2. Remove the tapping delay on clickable elements
      in all browsers (opinionated).
 */

a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  -ms-touch-action: manipulation; /* 1 */
  touch-action: manipulation; /* 2 */
}

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

/* Accessibility
 * ========================================================================== */

/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */

[aria-busy="true"] {
  cursor: progress;
}

/*
 * Change the cursor on control elements in all browsers (opinionated).
 */

[aria-controls] {
  cursor: pointer;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */

[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
}

/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */

[aria-hidden="false"][hidden] {
  display: initial;
}

[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}



/*****************************

common

*******************************/

/* -------------------------------
画面幅別の表示・非表示
------------------------------- */
.only-m {
    display: none;
    margin: 0;
}

@media screen and (max-width: 767px) {
    .only-pc {
        display: none;
    }

    .only-m {
        display: block;
    }
}

/* -------------------------------
PCでのみテキスト中央揃え
------------------------------- */

@media screen and (min-width: 768px) {
    .text-align-center-pc {
        text-align: center;
    }
}

/* -------------------------------
チェックリスト設定
------------------------------- */

ul.checklist {
    /* border: 1px solid #ccc; */
    list-style: none;
    padding: 1em;
}

ul.checklist>li {
    background-image: url(../images/icon-check.png);
    background-position: 0 5px;
    background-repeat: no-repeat;
    background-size: 1.2em;
    padding-left: 1.8em;
    margin-bottom: 0.8em;
}

ul.checklist>li:last-child {
    margin-bottom: 0em;
}

/********************************

メイン設定

**********************************/

/* CSS Document */
:root {
    --preset--color--main: #ff0033;
    --preset--color--logo: #ed6d4e;
    --preset--color--logo-2: #373333;
    --preset--color--base: #ffffff;
    --preset--color--contrast: #101010;
    --preset--color--accent: #fff100;
    --preset--color--sumi-200: #E8E8EB;
    --preset--color--sumi-100: #f1f1f4;
    --preset--color--sumi-50: #F8F8FB;
    --preset--color--gray: #cccccc;
    --preset--color--light-gray: #cacfd7;
    --preset--color--btn-mail: #00c12d;
    --preset--color--btn-tel: #00c12d;

    --preset--color--base-2: #fff6f3;
    --preset--color--base-3: #ffffe4;
    --preset--color--link: #3399ff;
    --preset--color--link-hover: #ff6600;

    --preset--spacing--10: 10px;
    --preset--spacing--20: clamp(1rem, 0.8555rem + 0.6163vw, 1.25rem);
    --preset--spacing--30: clamp(1.25rem, 0.8889rem + 1.5408vw, 1.875rem);
    --preset--spacing--50: clamp(1.875rem, 1.1527rem + 3.0817vw, 3.125rem);
    --preset--spacing--70: clamp(3.125rem, 2.4027rem + 3.0817vw, 4.375rem);
    --preset--spacing--100: clamp(4.375rem, 3.2916rem + 4.6225vw, 6.25rem);

    --preset--font-size--body: clamp(0.875rem, 0.8021rem + 0.3333vw, 1rem);
    /* 16-14px */
    --preset--font-size--h2: clamp(2rem, 1.3438rem + 3vw, 3.125rem);
    /* 50-32px */
    /* --preset--font-size--h2-2: clamp(1.75rem, 1.2396rem + 2.3333vw, 2.625rem); */
    /* 42-28px */
    --preset--font-size--h3: clamp(1.5rem, 1.1739rem + 1.3913vw, 2rem);
    /* 32-24px */
    --preset--font-size--h4: clamp(1.375rem, 1.1304rem + 1.0435vw, 1.75rem);
    /* 28-22px */
    --preset--font-size--h5: clamp(1.125rem, 0.962rem + 0.6957vw, 1.375rem);
    /* 22-18px */
    --preset--font-size--large: clamp(1rem, 0.8971rem + 0.4706vw, 1.25rem);
    /* 20-16px */

}

/* -------------------------------
基本設定
------------------------------- */

html {
    scroll-behavior: smooth;
    scroll-margin-top: 0;
}

/* body全体の初期スタイル */
body {
    font-family: "Noto Sans JP", sans-serif;
    font-size: var(--preset--font-size--body);
    font-weight: 400;
    background-color: var(--preset--color--base);
    color: var(--preset--color--contrast);
    margin: 0;
}

img {
    display: block;
    /* imgの下に余計な空白が入るのを防ぐ */
    width: 100%;
}

/* リンク文字の設定 */
a {
    color: var(--preset--color--link);
}
a:hover {
    color: var(--preset--color--link-hover);
}


.smalltext {
    font-size: 0.8rem;
}

/* -------------------------------
見出しタグ設定
------------------------------- */

h1,
h2,
h3,
h4,
h5 {
    font-weight: 700;
    line-height: 1.5;
    min-height: 0vw;
    /* clampをSafariで機能させるため */
}

h2 {
    font-size: var(--preset--font-size--h2);
    margin-bottom: var(--preset--spacing--50);
    margin-top: var(--preset--spacing--70);
    text-align: center;
}

h3 {
    font-size: var(--preset--font-size--h3);
    margin-bottom: var(--preset--spacing--30);
    margin-top: var(--preset--spacing--50);
}

h4 {
    font-size: var(--preset--font-size--h4);
    margin-bottom: var(--preset--spacing--20);
    margin-top: var(--preset--spacing--30);
}

h5 {
    font-size: var(--preset--font-size--h5);
    margin-bottom: var(--preset--spacing--20);
    margin-top: var(--preset--spacing--30);
}

/* -------------------------------
全体レイアウト／背景設定
------------------------------- */

/* 記事（ボディ）エリア */
article {
    width: 100%;
}

article p {
    line-height: 1.7;
}

article p:first-of-type {
    margin-top: 0;
}

/* 全体の幅を設定する */
.header_inr,
.section_inr {
    margin: 0 auto;
    max-width: 1200px;
    /* 画面幅が375pxの時に左右の余白が15px -> 92% */
    width: 92%;
}

section {
    clear: both;
    overflow: auto;
    padding: var(--preset--spacing--70) 0;
}

section h2:first-of-type {
    margin-top: 0;
}

/* ボタン */
.wrap_btn a:hover {
    opacity: 0.9;
}

/* 強調テキスト */
.emphasize_phrase,
h3 span {
    background-image: linear-gradient(rgba(0 0 0 / 0) 70%,
            var(--preset--color--accent) 70%);
    font-weight: 700;
}

/* セクション見出し */
h2.h_section {
    /* background-image: url(images/logo_company_v.png); */
    background-image: url(images/logo_company_mark.png);
    background-position: center top;
    background-repeat: no-repeat;
    /* background-size: clamp(60px, 8vw, 80px);
    padding-top: clamp(70px, 10vw, 90px); */
    background-size: clamp(40px, 6vw, 60px);
    padding-top: clamp(50px, 6vw, 70px);
}


/* 見出し：下線 */
:is(h1, h2, h3, h4, h5, h6).underline {
    border-bottom: 2px solid var(--preset--color--main);
    padding-bottom: 5px;
}

/* 見出し：短い下線 */
:is(h1, h2, h3, h4, h5, h6).short-line {
    margin-bottom: var(--preset--spacing--50);
    padding-bottom: 20px;
    position: relative;
    text-align: center;
}

:is(h1, h2, h3, h4, h5, h6).short-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 5px;
    background-color: var(--preset--color--main);
}

:is(h1, h2, h3, h4, h5, h6).h_section.short-line::after {
    background-color: var(--preset--color--logo);
}

/* 見出し：左右線 */
:is(h1, h2, h3, h4, h5, h6).lr-lines {
    display: flex;
    justify-content: center;
    align-items: center;
}

:is(h1, h2, h3, h4, h5, h6).lr-lines::before,
:is(h1, h2, h3, h4, h5, h6).lr-lines::after {
    content: '';
    width: 70px;
    height: 3px;
    background-color: var(--preset--color--gray);
}

:is(h1, h2, h3, h4, h5, h6).lr-lines::before {
    margin-right: var(--preset--spacing--30);
}

:is(h1, h2, h3, h4, h5, h6).lr-lines::after {
    margin-left: var(--preset--spacing--30);
}

/* -------------------------------
上部固定ヘッダー設定
------------------------------- */

/* 上部固定ヘッダー全体 */
header {
    background-color: var(--preset--color--base);
    border-bottom: 1px solid var(--preset--color--gray);
    height: 100px;
}

@media screen and (min-width: 768px) {
    header {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        z-index: 5000;
    }
}

/* ヘッダー内部 */
.header_inr {
    align-items: center;
    display: flex;
    gap: var(--preset--spacing--50);
    height: 100%;
    justify-content: space-between;
}

.header_inr img {
    width: 100%;
}

.header_logo {
    max-width: 200px;
}

.header_menu {
    align-items: center;
    display: flex;
    gap: var(--preset--spacing--30);
}

.header_menu .wrap_tel {
    min-width: 200px;
    max-width: 280px;
}

.header_menu .wrap_btn {
    min-width: 200px;
    max-width: 280px;
}

@media screen and (max-width: 767px) {
    header {
        height: 80px;
    }

    .header_logo {
        min-width: 140px;
        max-width: 180px;
    }

    .header_menu .wrap_tel,
    .header_menu .wrap_btn {
        min-width: 160px;
        max-width: 180px;
    }
}

@media screen and (max-width: 599px) {
    header {
        height: 60px;
    }

    .header_menu .wrap_tel {
        display: none;
    }
}

/* -------------------------------
ファーストビュー設定
------------------------------- */

.top_image {
    background-image: url(images/top_image_back.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    height: auto;
}

.top_image_in {
    margin: 0 auto;
    max-width: 1200px;
}

@media screen and (max-width: 1200px) {
    .top_image {
        background-image: none;
    }

    .top_image_in {
        max-width: none;
        width: 100%
    }
}

.top_image_in img {
    width: 100%;
}

/* -------------------------------
section別設定
------------------------------- */

/* CTA */

.area_cta {
    background-color: var(--preset--color--main);
    background-image: url(images/bg_cta.png);
    padding: var(--preset--spacing--50) 0;
}

.area_cta .section_inr {
    max-width: 1104px;
}

.cta_title {
    margin: 0;
}

.cta_microcopy_upper {
    margin-top: 10px;
}

.cta_main {
    background-color: var(--preset--color--base);
    margin-top: -1px;
    padding: 0 var(--preset--spacing--30) var(--preset--spacing--30);
}


.cta_btns {
    align-items: center;
    display: flex;
    gap: var(--preset--spacing--30);
    padding-top: var(--preset--spacing--30);
}

.cta_under {
    margin-top: var(--preset--spacing--30);
}

@media screen and (max-width: 767px) {
    .cta_btns {
        flex-direction: column;
        gap: var(--preset--spacing--20);
    }

    .cta_under {
        margin-top: var(--preset--spacing--50);
    }
}


.cta_note {
    color: var(--preset--color--base);
    font-size: 0.8rem;
    margin-top: 5px;
    text-align: right;
}

/* 悩み */
.sec_nayami {
    background-color: var(--preset--color--sumi-200);
}

/* 解決 */
.sec_kaiketsu {
    padding-top: 0;
}

/* YouTube広告の4つの特長 */
.sec_merits {
    background-color: var(--preset--color--base-2);
    padding-top: var(--preset--spacing--50);
}

.merit_item {
    background-color: var(--preset--color--base);
    display: flex;
    margin-top: var(--preset--spacing--20);
}

.merit_img {
    flex-shrink: 0;
    width: 300px;
}

.merit_txt {
    flex-grow: 1;
    padding: var(--preset--spacing--20);
}

.merit_num {
    border-bottom: 2px solid var(--preset--color--main);
    color: var(--preset--color--main);
    font-size: var(--preset--font-size--h5);
    font-weight: 700;
    line-height: 1;
    padding-bottom: 5px;
}

.merit_item h3 {
    font-size: var(--preset--font-size--h4);
    margin-top: 5px;
}

.merit_item h3 span {
    background-image: linear-gradient(rgba(0 0 0 / 0) 70%,
            var(--preset--color--accent) 70%);
}

@media screen and (max-width: 767px) {
    .merit_item {
        flex-direction: column-reverse;
    }

    .merit_img {
        width: 100%;
    }
}


/* 当社のサービス内容 */

.sec_service h3 {
    background-image: url(images/icon-check.png);
    background-position: 0 10px;
    background-repeat: no-repeat;
    background-size: 1em;
    padding-left: 1.5em;
    margin-top: 0;
}

.service_item_main {
    display: flex;
    gap: var(--preset--spacing--30);
}

.service_item_main,
.service_item {
    border: 1px solid var(--preset--color--light-gray);
    padding: var(--preset--spacing--20);
}

.service_item_main_img {
    flex-shrink: 0;
    width: 50%;
}

.wrap_service_others {
    display: flex;
    gap: var(--preset--spacing--30);
    margin-top: var(--preset--spacing--30);
}

@media screen and (max-width: 767px) {

    .service_item_main,
    .wrap_service_others {
        flex-direction: column;
    }

    .service_item_main,
    .service_item {
        border: none;
        padding: 0;
    }

    .service_item_main_img {
        width: 100%;
    }

    .wrap_service_others {
        gap: var(--preset--spacing--50);
        margin-top: var(--preset--spacing--50);
    }

}

.service_item {
    flex: 1;
}

.service_item img {
    border: 1px solid var(--preset--color--gray);
    margin-top: var(--preset--spacing--30);

}

/* 当社が選ばれる理由 */

.point_item {
    display: flex;
    gap: var(--preset--spacing--20);
    margin-top: var(--preset--spacing--20);
}

.point_img {
    flex-shrink: 0;
    width: 300px;
}

.point_txt {
    flex-grow: 1;
}

.point_num {
    background-color: var(--preset--color--logo-2);
    color: var(--preset--color--base);
    font-size: var(--preset--font-size--h5);
    line-height: 1;
    padding: 4px 8px 7px;
}

.point_num span {
    font-weight: 700;

}

.point_item h3 {
    font-size: var(--preset--font-size--h4);
    margin: 5px 0;
}


@media screen and (max-width: 767px) {
    .point_item {
        flex-direction: column-reverse;
    }

    .point_img {
        width: 100%;
    }
}

/* こんな方におすすめ */

.sec_target {
    background-color: var(--preset--color--base-2);
    padding-top: var(--preset--spacing--50);
}

.sec_target h2.short-line::after {
    background-color: var(--preset--color--logo);
}

.wrap_target {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--preset--spacing--30);
}

@media screen and (max-width: 767px) {
    .wrap_target {
        grid-template-columns: repeat(1, 1fr);
    }
}

.target_item {
    background-color: var(--preset--color--base);
    border: 1px solid var(--preset--color--sumi-100);
    border-radius: 10px;
    display: flex;
}

.target_item img {
    align-self: flex-end;
    flex-shrink: 0;
    padding: 10px 0 0 10px;
    width: 200px;
}

.target_txt {
    align-self: flex-start;
    padding: var(--preset--spacing--20);
}

.target_item h3 {
    font-size: var(--preset--font-size--h5);
    margin: 0 0 var(--preset--spacing--20);
}

.target_item p {
    margin: 0;
}

@media screen and (max-width: 767px) {
    .target_item {
        flex-direction: column-reverse;
    }

    .target_item img {
        align-self: center;
        flex-shrink: 0;
        padding: 10px 0 0 10px;
        width: 200px;
    }
}

/* 料金プラン */

.wrap_plan_offer {
    text-align: center;
}

.plan_offer {
    border: 2px solid var(--preset--color--logo);
    border-radius: 10px;
    display: inline-block;
    padding: var(--preset--spacing--20);
}

.plan_offer h3 {
    margin: 0 0 10px;
}

.plan_offer p {
    margin: 0;
}

@media screen and (max-width: 767px) {
    .plan_offer p {
        text-align: left;
    }
}


.plan_price {
    margin-top: var(--preset--spacing--30);
}

table {
    border-top: 1px solid var(--preset--color--gray);
    border-left: 1px solid var(--preset--color--gray);
    margin: 0 auto;
}

th,
td {
    border-right: 1px solid var(--preset--color--gray);
    border-bottom: 1px solid var(--preset--color--gray);
    font-size: var(--preset--font-size--h5);
    padding: var(--preset--spacing--20);
}

th {
    background-color: var(--preset--color--sumi-100);
    font-weight: 400;
    text-align: center;
}

td {
    background-color: var(--preset--color--base);
    font-weight: bold;
}

td.price {
    font-size: var(--preset--font-size--h3);
}

td .tax {
    font-size: var(--preset--font-size--body);
    font-weight: 400;
}

.price_note {
    font-size: 0.8rem;
    text-align: center;
    margin-top: 10px;
}

.wrap_included {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--preset--spacing--30);
    list-style: none;
    padding: 0;
}

@media screen and (max-width: 767px) {
    .wrap_included {
        grid-template-columns: repeat(1, 1fr);
    }
}

.included_item {
    background-color: var(--preset--color--sumi-50);
    border-radius: 10px;
    padding: var(--preset--spacing--20);
}

.included_item h4 {
    background-image: url(images/icon-check.png);
    background-position: 0 10px;
    background-repeat: no-repeat;
    background-size: 0.8em;
    font-size: var(--preset--font-size--large);
    padding-left: 1.2em;
    margin-top: 0;
}

.included_item ul {
    list-style: disc;
    padding-left: 30px;
}

/* サービスの流れ */

.sec_flow {
    background-color: var(--preset--color--sumi-50);
}

.wrap_steps {
    background-color: var(--preset--color--base);
    border: 1px solid var(--preset--color--sumi-100);
    border-radius: 10px;
    padding: var(--preset--spacing--30);
}

.step_item {
    display: flex;
    gap: var(--preset--spacing--20);
}

.step_num {
    flex-shrink: 0;
    width: 100px;
}

.step_content {
    display: flex;
    gap: var(--preset--spacing--20);
}

.step_img {
    flex-shrink: 0;
}

.step_img>img {
    width: 300px;
}

.step_img .arrow {
    margin: var(--preset--spacing--20) auto;
    width: 60px;
}

.step_txt h3 {
    font-size: var(--preset--font-size--h4);
    line-height: 1;
    margin-top: 0;
}

.step_txt p {
    margin: 0;
}

@media screen and (max-width: 767px) {
    .step_item {
        flex-direction: column;
    }

    .step_num {
        align-self: center;
    }

    .step_content {
        flex-direction: column-reverse;
    }

    .step_img>img {
        width: 100%;
    }

    .step_txt h3 {
        line-height: 1.5;
        text-align: center;
    }
}

/* よくある質問 */

.faq_item {
    background-color: var(--preset--color--sumi-50);
    border-radius: 10px;
    margin-top: var(--preset--spacing--30);
    padding: var(--preset--spacing--30);
}

.faq_item a {
    color: var(--preset--color--link);
}

.faq_item a:hover {
    color: var(--preset--color--link-hover);
    text-decoration: underline;
}

.faq_q h4 {
    font-size: var(--preset--font-size--h5);
    margin: 0;
}

.faq_a {
    margin-top: var(--preset--spacing--20);
}

.faq_a p {
    margin: 0;
}

.faq_q,
.faq_a {
    display: flex;
    gap: var(--preset--spacing--20);
}

.faq_q_img,
.faq_a_img {
    flex-shrink: 0;
    width: 28px;
}

.faq_q_img {
    margin-top: 2px;
}

.faq_a_img {
    margin-top: 0.5em;
}

/* 会社概要 */
.sec_company {
    background-color: var(--preset--color--logo-2);
}

.sec_company .section_inr {
    display: flex;
    justify-content: center;
}

.sec_company h2 {
    border-bottom: 1px solid var(--preset--color--base);
    color: var(--preset--color--base);
    font-size: var(--preset--font-size--h5);
    margin: 0;
    padding-bottom: 10px;
}

.company_content {
    color: var(--preset--color--base);
    margin-top: var(--preset--spacing--20);
}

.company_info {
    display: flex;
    flex-direction: column;
    gap: var(--preset--spacing--20);
    margin: 0;
    padding: 0;
}

.company_info>div {
    display: flex;
    gap: 10px;
}

.company_info dt {
    font-weight: 700;
    white-space: nowrap;
    width: 4em;
}

.company_info dd {
    margin: 0;
}

/* -------------------------------
フッター部分
------------------------------- */

footer {
    background-color: var(--preset--color--logo-2);
    color: var(--preset--color--base);
    margin: 0;
    padding: 0 0 var(--preset--spacing--30);
    text-align: center;
}

footer a {
    color: var(--preset--color--base);
}

/* -------------------------------
上へ戻るボタン（PCのみ）
-ページの指定の高さを超えたら下から出現-
------------------------------- */

#page-top {
    display: none;
}

@media screen and (min-width: 768px) {
    /*リンクを右下に固定*/
    #page-top {
        bottom: 20px;
        display: block;
        /*はじめは非表示*/
        opacity: 0;
        position: fixed;
        right: 20px;
        transform: translateY(100px);
        z-index: 2;
    }
    #page-top img {
        width: 60px;
    }
}

/*　上に上がる動き　*/

#page-top.UpMove,
#fix_menu_smartphone.UpMove {
    animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*　下に下がる動き　*/

#page-top.DownMove,
#fix_menu_smartphone.DownMove {
    animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 1;
        transform: translateY(100px);
    }
}

/*--------------------------------------------------
スマホ用下部固定フッター（スマホのみ）
アニメーションの指定は上記「上へ戻るボタン」と同
-----------------------------------------------------*/

#fix_menu_smartphone {
    display: none;
}

@media screen and (max-width: 767px) {
    #fix_menu_smartphone {
        align-items: center;
        bottom: 0px;
        box-shadow: 0px 0px 3px #594a42;
        display: flex;
        left: 0px;
        position: fixed;
        width: 100%;
        z-index: 10000;
        /*はじめは非表示*/
        opacity: 0;
        transform: translateY(100px);
    }

    #fix_menu_smartphone a {
        margin: 0 auto;
    }

    #fix_menu_smartphone img {
        max-width: 300px;
    }

    /* footer下スペース広げる */
    footer {
        padding-bottom: 4em;
    }
}