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

        フッダー（SP）
************************/
@media screen and (max-width: 450px){
    .footer_pc {
        display: none;
    }
}
/*
 * @parts：フッダー外観
 * @design：バックカラー、文字の色
*/
.footer_sp {
    background-color: #494949;
    color: #fff;
    white-space: nowrap;
    font-size: 4vw;
}

/*
 * @parts：フッダー外観（ロゴ、テキスト）
 * @design：上下のスペース
*/
.footer_top {
    padding: 15% 0 20% 0;
}
/*
 * @parts：フッダー外観（ロゴ、テキスト）
 * @design：ロゴとテキスト横並び左右中央寄せ、基本情報との間にスペース、上下中央寄せ
*/
.footer_top_img {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 10%;
}
/*
 * @parts：フッダー外観（ロゴ）
 * @design：右にスペース
*/
.footer_top_img img {
    margin-right: 10%;
}
/*
 * @parts：フッダー外観（テキスト）
 * @design：下にスペース
*/
.footer_top_img p {
    margin-bottom: 5px;
}
/*
 * @parts：フッダー外観（基本情報）
 * @design：左右中央寄せ
*/
.footer_top_text {
    text-align: center;
}
/*
 * @parts：フッダー外観（基本情報）
 * @design：テキストを左寄せ、左右にスペース
*/
.footer_top_text_1 {
    text-align: left;
    margin: 0 13%;
}
/*
 * @parts：フッダー外観（基本情報）
 * @design：テキストの下にスペース
*/
.footer_top_text_1 p {
    margin-bottom: 5px;
}
.footer_top_text_sub {
    display: flex;
    align-items: center;
}
/*
 * @parts：フッダー外観（基本情報）
 * @design：下線
*/
.footer_top_text_1 a {
    text-decoration:underline;
}
/*
 * @parts：フッダー外観（体験レッスンを予約する）
 * @design：
*/
.footer_sp_btn_1 {
    padding: 7%;
    border-width: 3px;
    border-color: #fff;
    border-style: none none solid none;
    align-content: center;
    background-color: #fff;
    color: #000;
}
/*
 * @parts：フッダー外観（体験レッスンを予約する）
 * @design：ブロック全体をタップ対象
*/
.footer_sp_btn_1 a {
    display: block;
    height: 100%;
    width: 100%;
    align-content: center;
    padding: 10px;
}
/*
 * @parts：フッダー外観（お問い合わせ）
 * @design：
*/
.footer_sp_btn_2 {
    padding: 7%;
    border-width: 3px;
    border-color: #fff;
    border-style: none none  solid none;
}
/*
 * @parts：フッダー外観（問合せ）
 * @design：ブロック全体をタップ対象
*/
.footer_sp_btn_2 a {
    display: block;
    height: 100%;
    width: 100%;
    align-content: center;
    padding: 10px;
}
/*
 * @parts：フッダー外観（問合せ）
 * @design：ブロック全体をタップ対象
*/
.accordion_item {
    border-width: 3px;
    border-color: #fff;
    border-style: solid none none none;
}
/*
  アコーディオンの開閉ボタンの装飾。
  position: relative;が無いと、
  「+」「-」の位置がずれるので注意。
*/
.footer_accordion_head {
position: relative;
width: 100%;
padding: 7.38%;
color: #fff;
cursor: pointer;
}
.footer_accordion_head p {
    padding: 10px;
}
/*
  アコーディオンの開閉ボタンの右側に「+」を表示。
*/
.footer_accordion_head::after {
    content: "＋";
    position: absolute;
    top: 38px;
    right: 34px;
}
/*
  アコーディオンが開いた際に、
  開閉ボタンの右側に「+」を「-」に変更する。
*/
.footer_accordion_item.active .footer_accordion_head::after {
content: "－";
right: 34px;
}
/*
  アコーディオンの閉じている部分の装飾。
  height: 0; overflow: hidden;にすることで、
  通常時は表示されないようにする。
*/
.footer_accordion_body {
overflow: hidden;
width: 100%;
height: 0;
padding: 0 10px;
background: #5e5151;
border-width: 1px;
border-color: #fff;
border-style: solid none none none;
/* transition: all .25s ease; */
}
.footer_accordion_body p {
    padding: 10px;
}
/*
  アコーディオンが開いた際に、
  heightを0からautoに、paddingの上下を0から10に。
*/
.footer_accordion_item.active .footer_accordion_body {
height: auto;
padding: 4.38% 7.38%;
}
/*
  TOTONOU公式SNSのデザイン
*/
.footer_sp_sns {
    display: flex;
    padding: 7%;
    border-width: 3px;
    border-color: #fff;
    border-style: none none solid none;
    align-items: center;
}
/*
  TOTONOU公式SNSのテキスト
*/
.footer_sp_sns p {
    padding: 10px;
    margin-right: 24%;
}
/*
  TOTONOU公式SNSの画像
*/
.footer_sp_sns img {
    padding: 10px;
}
.footer_sp_last {
    display: flex;
    padding: 40px 0;
    margin: 0 10%;
    align-items: center;
    font-size: 14px;
}
/*
  フッターのページトップの丸
  三角を中央寄せにするためのパディング
*/
.circle {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border-width: 2px;
    border-color: #fff;
    padding: 10px;
}
/*
  フッターのページトップの丸の中の三角
  形と丸の中央に寄せるためのマージン
*/
.triangle {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 10px solid #fff;
    margin: -10px -7px -7px -7px;
}
/*
  フッターのテキストフォントサイズ、中央寄せ
*/
.footer_sp_last_text {
    font-size: 12px;
    text-align: center;
    padding-bottom: 20px;
}
.footer_sp_last_1 {
    margin-right: 65px;
}
.footer_sp_last_3 {
    margin: 0 5px;
}
/*
  フッターのページトップのテキストと丸三角を横並び
*/
.footer_sp_last_2 {
    display: flex;
    align-items: center;
}

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

        フッダー（PC）
************************/
@media screen and (min-width: 451px){
    .footer_sp {
        display: none;
    }
    /*
    * @parts：フッダー外観
    * @design：バックカラー、文字の色
    */
    .footer_pc {
        background-color: #494949;
        color: #fff;
        font-size: .9vw;
    }
    /*
    * @parts：フッダー外観
    * @design：ブロック横並び、センター寄せ
    */
    .footer_pc {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    /*
    * @parts：フッダー外観
    * @design：pタグにマージンボトム
    */
    .footer_pc p {
        margin-bottom: .5vw;
    }
    /*
    * @parts：フッダー外観（左）
    * @design：ブロック横幅、トップマージン
    */
    .footer_Standard_1 {
        width: 26%;
        margin: 4vw 0;
        padding-left: 6vw;
    }
    /*
    * @parts：フッダー外観（右）
    * @design：ブロック横幅、トップマージン
    */
    .footer_Standard_2 {
        width: 54%;
        margin: 4vw 0;
        padding-right: 50px;
    }
    /*
    * @parts：フッダー外観（1）
    * @design：ブロックを横並び
    */
    .footer_block_1 {
        display: flex;
        justify-content: center;
        padding: 0 5%;
    }
    /*
    * @parts：フッダー外観（2）
    * @design：横のサイズ
    */
    .footer_block_2 {
        width: 40%;
    }
    /*
    * @parts：フッダー外観（3）
    * @design：上下左右のマージン
    */
    .footer_block_3 {
        margin: 10% 10% 21% 10%;
    }
    /*
    * @parts：フッダー外観（3）
    * @design：タイトルの文字サイズ、マージンボトム
    */
    .footer_block_3 h1 {
        font-size: 1.3em;
        margin-bottom: 12%;
    }
    /*
    * @parts：フッダー外観（会社ロゴ）
    * @design：マージンボトム
    */
    .footer_company_logo {
        display: flex;
        justify-content: center;
        margin-bottom: 2.5vw;
    }
    .footer_company_logo img {
        width: 8vw;
        height: 9vw;
    }
    .footer_text_left {
        margin-bottom: 2.5vw;
        display: flex;
        justify-content: center;
    }
    /*
    * @parts：フッダー外観（会社ロゴ下）
    * @design：pタグのみ左寄せ
    */
    .footer_text_left_1 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin: 0 8%;
    }
    .footer_text_left_sub {
        display: flex;
        align-items: center;
    }
    .footer_text_left_sub img {
        width: 2.5vw;
        height: 1.8vw;
    }
    .footer_text_left_1 a {
        text-decoration:underline;
    }
    /*
    * @parts：フッダー外観（sns）
    * @design：ロゴとテキスト横並び、左寄せ、上下中央、マージンボトム
    */
    .footer_sns_logo {
        display: flex;
        justify-content: left;
        align-items: center;
        margin-bottom: 10px;
    }
    .footer_sns_logo img {
        width: 2vw;
        height: 2vw;
    }
    /*
    * @parts：フッダー外観（sns）
    * @design：テキストのマージンボトムを0にし、ロゴとテキストの間にマージン
    */
    .footer_sns_logo p {
        margin: 0 0 0 10px;
    }
    /*
    * @parts：フッダー外観（©）
    * @design：左右中央
    */
    .footer_text_center {
        text-align: center;
    }
    .footer_text_animation:hover {
        animation: moveRight 0.5s ease forwards;
    }
    @keyframes moveRight {
        from {
        transform: translate(0, 0);
        }
        to {
        transform: translate(15px, 0);
        }
    }
    .footer_text_animation:hover::before {
        content: '';
        position: absolute;
        left: -12px; /* 黒三角の位置 */
        top: 50%; /* 黒三角の位置 */
        transform: translateY(-50%); /* 黒三角の位置 */
        border-left: 8px solid #fff;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        animation: fadeIn 0.5s ease forwards;
    }
    @keyframes fadeIn {
        from {
        opacity: 0;
        }
        to {
        opacity: 1;
        }
    }
    .footer_text_animation{
        text-decoration: none;
    }
    .footer_underline_text{
        position: relative;
        z-index: 1;
    }
    .footer_underline_text:after{
        content: '';
        position: absolute;
        left: 0;
        bottom: -2px;/*テキストからの距離*/
        width: 0%;/*初期状態では下線非表示*/
        height: 1px;/*下線の高さ*/
        background: #fff;/*下線の色*/
        z-index: -1;
        transition: all 0.3s;/*アニメーション速度*/
    }
    .footer_text_animation:hover .footer_underline_text:after{
        width: 100%;/*hover時に表示*/
    }
    .footer_btn_1 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 2%;
        margin-bottom: 2vw;
    }
    .footer_btn_2 {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 14vw;
        height: 3vw;
        padding: .9em 2em;
        overflow: hidden;
        border: 1px solid #fff;
        color: #fff;
        font-size: .7em;
    }
    /*
    * @parts：ヘッダーボタン
    * @design：ホバーした際の動き
    */
    .footer_btn_2::before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: 0;
        height: 100%;
        background-color: #fff;
        content: '';
        transition: width .3s ease;
        cursor: pointer;
    }
    /*
    * @parts：ヘッダーボタン
    * @design：ホバーした際の基本設定
    */
    .footer_btn_2:hover {
        background-color: transparent;
        color: #000;
    }
    .footer_btn_2 a {
        z-index: 1;
    }
    /*
    * @parts：ヘッダーボタン
    * @design：ホバーした際の基本設定
    */
    .footer_btn_2:hover::before {
        width: 100%;
    }
    .arrow-round {
        position: relative;
        display: inline-block;
        padding: .5vw;
        border: 1px solid #fff;
        border-radius: 50%;
        top: 0;
        left: 2vw;
    }
    .arrow-round::before {
        content: '';
        width: .4vw;
        height: .4vw;
        border-top: solid 1px #fff;
        border-right: solid 1px #fff;
        position: absolute;
        top: .28vw;
    }
    .arrow-round.arrow-right::before {
        transform: rotate(45deg);
        left: .2vw;
    }
    .footer_btn_2:hover .arrow-round {
        border-color: #000;
    }
    .footer_btn_2:hover .arrow-round::before {
        border-color: #000;
    }
    .arrow-round_1 {
        position: relative;
        display: inline-block;
        padding: .5vw;
        border: 1px solid #fff;
        border-radius: 50%;
        top: 0;
        left: 3.6vw;
    }
    .arrow-round_1::before {
        content: '';
        width: .4vw;
        height: .4vw;
        border-top: solid 1px #fff;
        border-right: solid 1px #fff;
        position: absolute;
        top: .28vw;
    }
    .arrow-round_1.arrow-right_1::before {
        transform: rotate(45deg);
        left: .2vw;
    }
    .footer_btn_2:hover .arrow-round_1 {
        border-color: #000;
    }
    .footer_btn_2:hover .arrow-round_1::before {
        border-color: #000;
    }
    /* top戻るボタン */
    #page-top {
        position: fixed;
        bottom: 5vw;
        right: 5vw;
        font-size: 1vw;
        line-height: 1;
        z-index: 99;
      }
      #page-top a {
        background: #000;
        text-decoration: none;
        width: 5vw;
        padding: 2vw 1vw;
        text-align: center;
        display: block;
        border-radius: 90px;
        opacity: 0.9;
        transition: all .3s ease;
      }
      .dli-chevron-up {
        display: inline-block;
        vertical-align: middle;
        color: #fff;
        line-height: 1;
        width: 1em;
        height: 1em;
        border: 0.1em solid currentColor;
        border-left: 0;
        border-bottom: 0;
        box-sizing: border-box;
        transform: translateY(25%) rotate(-45deg);
      }
      #page-top a:hover {
        text-decoration: none;
        opacity: .5;
      }
}