@charset "utf-8";
/* CSS Document */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    max-height: 99999px;
}

img {
    vertical-align: bottom;
    display: block;
    /*輪切り縦ならベ時に主にAndroidで画像同士の間に隙間ができるのを避ける設定*/
    /*inline要素にしたい場合は適宜クラス設定してください*/

}

body {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    line-height: 1.3;
    font-size: 1rem;
}

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

body,
.fgot {
    font-family: "Helvetica Neue",
        Arial,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        Meiryo,
        sans-serif;
    font-size: 0;
    line-height: 0;
}

.fmin {
    font-family: "Roboto Slab", Garamond, "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

/*
	SP向けテキストサイズ自動調整避け#2
	文字が指定したサイズを無視して拡大していたら適宜セレクタを加える
*/
span,
div,
p {
    /*max-height: 100%; */
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}

del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* clearfix */
.clearfix {
    width: 100%;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

/* util */

/*画像縦並べで隙間が開いた時の調整用*/

.mtNeg {
    margin-top: -1px;
}



/*============================
#layout
margin、paddingなどは親コンテナの幅を基準に％指定
30pxなら30/640*100=4.69%、通常4.69%に設定
画像は左右paddingとmax-widthでコントロール
============================*/

#wrapper {
    width: 100%;
    background-color: #FFF;
}

#wrapper .mainCont {
    position: relative;
    max-width: 640px;
    /* デザインデータ幅を最大幅に設定 */
    margin: 0 auto;
    background-color: #FFF;
    text-align: center;
    overflow: hidden;
}

#wrapper img {
    max-width: 100%;
}

/* position:absolute使用時のコンテナに */
#wrapper .btnCont {
    position: relative;
    text-align: center;
}

/* 依頼書で画像・テキストなど指定 */
#wrapper .header {
    position: relative;
    overflow: hidden;
}

/* SNSボタンレイアウト */
#wrapper .sns {
    margin: 1% 0 3%;
    padding-right: 3.15%;


}

#wrapper .sns li {
    display: inline-block;
    margin-left: 5px;
    vertical-align: top;
}

#wrapper .promotion {
    font-size: 0.7rem;
    line-height: 1.3;
    color: #949494;
    margin-bottom: 0;
}

/* コンテンツの幅設定コンテナ */
#wrapper .sec_inner {
    padding: 0 3% 7%;
}

/* 画像下のmarginはここで一括指定しています */
#wrapper .sec_inner>img {
    margin-bottom: 7%;
}

#wrapper .boxArea h4 {
    padding-top: 0;
}

/*============================
txt
font-size、line-heightは
基本デザインデータの2/3から半分程度に設定
(画面幅320pxのiPhone5で段落ちしない程度)
============================*/

#wrapper a {
    text-decoration: none;
    color: #000;
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -ms-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}

#wrapper a:hover {
    opacity: 0.7;
}

/* 本文用のpはここで一括指定しています */
#wrapper p {
    font-size: 1.06rem;
    line-height: 1.6;
    text-align: left;
    margin-bottom: 5%;
}

/*ヘッダーがテキストの時の設定*/
#wrapper .header_text {
    padding: 4.69%;
    font-size: 1.6rem;
    text-align: left;
    line-height: 1.3;
    color: #000;
}

#wrapper h2 {
    font-size: 1.4rem;
    line-height: 1.4;
    text-align: left;
    color: #000;
    margin-bottom: 5%;
}

/*記事タイトル用h2*/

#wrapper #content_title {
    font-size: 1.4rem;
    line-height: 1.3;
    text-align: left;
    color: #000;
}

#wrapper h3 {
    font-size: 1.33rem;
    line-height: 1.3;
    font-weight: bold;
    text-align: left;
    padding-bottom: 5%;
}

#wrapper h4 {
    font-size: 1rem;
    line-height: 1.6;
    color: #000;
    text-align: left;
    margin-bottom: 5%;
    padding: 2%;
}

#wrapper h5 {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #d7257d;
    margin-bottom: 8%;
}

#wrapper .sns-block {
    display: flex;
    justify-content: space-between;
}

/*日付コンテナ*/
#wrapper .date_block {
    text-align: left;
    margin-bottom: 3%;
    padding: 0 3%;

}

#wrapper .date_block p,
#wrapper .date_block .include-date {
    display: inline-block;
}

/*日付テキスト*/
#wrapper .include-date {
    font-size: 0.7rem;
    line-height: 1.3;
    color: #949494;
    font-weight: bold;
    text-align: left;
}

/*太文字*/
#wrapper .t_bold {
    font-weight: bold;
}

#wrapper .t_pink {
    color: #3f5a34;
}

#wrapper .t_red {
    color: #ff0000;
}

/*上付き文字*/
#wrapper .sec_inner sup {
    font-size: 0.7rem;
    vertical-align: text-top;
    line-height: 1.2;
}

/*テキスト下線*/
#wrapper .t_line {
    border-bottom: 1px solid #000;
}

/*テキスト幅調整*/
#wrapper .t_narrow {
    letter-spacing: -0.5px;
}

/*色付き文字*/
#wrapper .t_color {
    color: #ff0000;
}

/*マーカー*/
#wrapper .marker {
    background-color: #fff36d;
}

/*マーカー下線*/
#wrapper .marker_under {
    background: linear-gradient(transparent 60%, #fff36d 60%);
    padding-bottom: 4px;
}

/*文字大きめ*/
#wrapper .t_big {
    font-size: 1.3rem;
}

/*注釈*/
#wrapper .comment {
    font-size: 0.8rem;
}


/*番号付きリスト*/
#wrapper .list {
    margin-bottom: 5%;
}

/*内箇条書き形式の設定*/
#wrapper .list li {
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
    text-indent: -1rem;
    padding-left: 1rem;
}


/* 背景色付きボックス */
#wrapper .boxArea {
    background: #eef2ea;
    margin-bottom: 5%;
    padding: 5%;
}

#wrapper .boxArea p:last-child,
#wrapper .boxArea ul {
    margin-bottom: 0;
}

#wrapper .boxArea-border {
    border: 3px solid #ff7e7e;
}

/*============================
user_voice
============================*/

#wrapper .user_voice {
    display: table;
    width: 100%;
}

#wrapper .user_voice h4.voice_head {
    display: table-cell;
    margin: 0;
    padding: 0 3% 0 0;
    vertical-align: middle;
}

#wrapper .uv_img {
    max-width: 100%;
    display: table-cell;
    margin: 0;
    padding: 0;
    width: 100%;
}

/*============================
user_voice_float
============================*/

#wrapper .user_voice_float {
    overflow: hidden;
    clear: both;
}

#wrapper .user_voice_float img {
    max-width: 30%;
}

#wrapper .float_right {
    float: right;
}

#wrapper .float_left {
    float: left;
}

#wrapper .flL_img {
    margin: 0 5% 3% 0;
}

#wrapper .flR_img {
    margin: 0 0 3% 5%;
}

/*============================
voice
============================*/

/*引用コメント部分*/

#wrapper .voice_wrap {
    position: relative;
    background-color: #f8f5f0;
    margin-bottom: 7%;
    padding: 40px 20px;
    max-height: 99999px;
}

#wrapper .voice_wrap:before {
    position: absolute;
    content: "";
    color: #ccb99d;
    background: url(../img/quote_left.png);
    left: 12px;
    top: 15px;
    width: 23px;
    height: 18px;
    max-height: 99999px;
}

#wrapper .voice_wrap:after {
    position: absolute;
    content: "";
    color: #ccb99d;
    background: url(../img/quote_right.png);
    right: 12px;
    bottom: 15px;
    width: 23px;
    height: 18px;
    max-height: 99999px;
}

#wrapper .voice_wrap p:last-child {
    margin: 0;
}

/*============================
related
============================*/

/*フッター上関連リンク(回遊リンク)*/

#wrapper .related_link {
    overflow: hidden;
}

#wrapper .related_link h3 {
    background-color: #ccc;
    color: #000;
    font-size: 1rem;
    padding: 8px;
    margin-bottom: 30px;
}

#wrapper .related_link li {
    width: 48%;
    box-sizing: border-box;
    vertical-align: top;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

#wrapper .related_link ul li:nth-of-type(1) {
    margin-right: 4%;
    /*letter-spacing: -1px;*/
    /*テキスト段落ち時調整*/
}

#wrapper .related_link ul li img {
    border: 1px solid #999;
    margin-bottom: 5px;
}

#wrapper .related_link ul li a p {
    color: #000;
    font-size: 1rem;
    line-height: 1.5;
}


/*============================
footer
============================*/

#wrapper footer {
    position: relative;
    padding: 5% 0;
    background-color: #98774c;
    /*依頼書で指定の色と合わせることが多いです*/
    text-align: center;
}

#wrapper footer .footer_list {
    margin-bottom: 3%;
    overflow: hidden;
}

#wrapper footer .footer_list li {
    margin: 0 0 1%;
    padding: 0;
    color: #fff;
    font-size: 0.8rem;
    text-align: center;
    font-weight: normal;
    line-height: 1.1;
}

#wrapper footer .footer_list li a {
    color: #fff;
    text-decoration: none;
}

/* 横並びリンク */
#wrapper .footer_link {
    margin-bottom: 3%;
    text-align: center;
    font-size: 0;
}

#wrapper .footer_link li {
    display: inline;
    border-left: 1px solid #fff;
    font-size: 0.73rem;
    line-height: 1;
}

#wrapper .footer_link li:first-child {
    border-left: 0;
}

#wrapper .footer_link li a {
    padding: 0 4px;
    color: #FFF;
}

/* テキストリンク */
#wrapper p.footer_link_txt {
    margin-bottom: 3%;
    text-align: center;
    line-height: 1;
}

#wrapper .footer_link_txt a {
    color: #fff;
    font-size: 0.8rem;
}

#wrapper p.copy {
    margin-bottom: 0;
    color: #FFF;
    font-family: ArialMT;
    font-size: 0.73rem;
    text-align: center;
    line-height: 1;
}

#wrapper p.btn_top {
    position: relative;
    margin-top: 5%;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
}

#wrapper .btn_top:before {
    content: '▲';
    position: absolute;
    top: -58%;
    left: 48%;
    color: #000;
    font-weight: bold;
    font-size: 0.8rem;
}


/*============================
#util
============================*/


/*top*/

#wrapper .mt3 {
    margin-top: 3% !important;
}

#wrapper .mt4 {
    margin-top: 4% !important;
}

#wrapper .mt5 {
    margin-top: 5% !important;
}

#wrapper .mt6 {
    margin-top: 6% !important;
}

#wrapper .mt7 {
    margin-top: 7% !important;
}

#wrapper .mt8 {
    margin-top: 8% !important;
}

#wrapper .mt9 {
    margin-top: 9% !important;
}

#wrapper .mt10 {
    margin-top: 10% !important;
}


/*bottom*/

#wrapper .mb0 {
    margin-bottom: 0 !important;
}

#wrapper .mb3 {
    margin-bottom: 3% !important;
}

#wrapper .mb4 {
    margin-bottom: 4% !important;
}

#wrapper .mb5 {
    margin-bottom: 5% !important;
}

#wrapper .mb6 {
    margin-bottom: 6% !important;
}

#wrapper .mb7 {
    margin-bottom: 7% !important;
}

#wrapper .mb8 {
    margin-bottom: 8% !important;
}

#wrapper .mb9 {
    margin-bottom: 9% !important;
}

#wrapper .mb10 {
    margin-bottom: 10% !important;
}

#wrapper .TaC_img {
    display: inline-block;
    width: 100%;
}

#wrapper .TaC {
    text-align: center;
}

#wrapper .TaR {
    text-align: right;
}

#wrapper .TaL {
    text-align: left;
}


/*============================
#見出し
色ごとにhtml化されているのでcssを以下にペースト
============================*/

#wrapper .tit01 {
    border-top: 1px solid #58c1f2;
    border-bottom: 1px solid #58c1f2;
    padding: 0.7rem 0;
}

#wrapper .tit02 {
    border-left: 0.32rem solid #58c1f2;
    padding-left: 0.8rem;
}

#wrapper .tit03 {
    border-bottom: 1px solid #58c1f2;
    padding-bottom: 0.7rem;
}

#wrapper .tit04 {
    border-top: 1px solid #58c1f2;
    padding-top: 0.7rem;
}

#wrapper .tit05 {
    background: #58c1f2;
    color: #fff;
    padding: 0.6rem;
}

#wrapper .tit06 {
    background: #efefef;
    border-left: 0.32rem solid #58c1f2;
    padding: 0.7rem;
}

#wrapper .tit07 {
    border-left: 0.32rem solid #4f6148;
    border-bottom: 1px solid #4f6148;
    padding: 0.7rem;
}

#wrapper .pce {
    display: inline;
}

/*============================
#btn ゴシック
btnはゴシックと明朝があります
============================*/

#wrapper .btn,
#wrapper .btn_tl {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif;
    text-align: center;
    width: 80%;
    max-width: 600px;
    margin: 0 auto;
}

#wrapper .btn_tl {
    width: 100%;
    position: relative;
}

#wrapper .btn a {
    display: block;
    color: #fff;
    padding: 1rem;
    font-size: 1.25rem;
    border-radius: 70px;
}

#wrapper .btn a:after {
    content: '\025b6';
    color: #fff;
    font-size: 0.6rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}


#wrapper .c_black {
    background: #000;
}

#wrapper .btn_tl a {
    display: block;
    color: #fff;
    padding: 1rem;
    font-size: 1rem;
    border-radius: 70px;
}

#wrapper .btn_tl:after {
    position: absolute;
    content: '\025b6';
    color: #fff;
    font-size: 0.6rem;
    right: 3%;
    top: 42%;
}

/*============================
#btn 明朝
明朝はbtn_minなので注意
============================*/

#wrapper .btn_min {
    font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "Sawarabi Mincho", serif;
    width: 80%;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

#wrapper .offer {
    margin-bottom: 10%;
}

#wrapper .btn_min a {
    display: block;
    color: #fff;
    padding: 1rem;
    font-size: 1.25rem;
    border-radius: 70px;
}

#wrapper .btn_min a:after {
    content: '\025b6';
    color: #fff;
    font-size: 0.6rem;
    margin-left: 0.5em;
    vertical-align: middle;
}

#wrapper .btn_min a.c_black {
    background: #000;
}


/*============================
#btn カラー
============================*/

/*グラデーション*/

#wrapper .c_grade_naname {
    background: linear-gradient(45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background: -webkit-linear-gradient(45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background: -ms-linear-gradient(45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 600% 600%;
    -webkit-animation: gradationNaname 9s ease infinite;
    animation: gradationNaname 9s ease infinite;

}

#wrapper .c_grade_tate {
    background: linear-gradient(to bottom, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background: -webkit-linear-gradient(top, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background: -ms-linear-gradient(top, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 600% 600%;
    -webkit-animation: gradationTate 9s linear infinite alternate;
    animation: gradationTate 9s linear infinite alternate;

}


@keyframes gradationNaname {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@-webkit-keyframes gradationNaname {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes gradationTate {
    0% {
        background-position: 50% 0%
    }

    25% {
        background-position: 50% 50%
    }

    50% {
        background-position: 50% 85%
    }

    75% {
        background-position: 50% 50%
    }

    100% {
        background-position: 50% 0%
    }
}

@-webkit-keyframes gradationTate {
    0% {
        background-position: 50% 0%
    }

    25% {
        background-position: 50% 50%
    }

    50% {
        background-position: 50% 85%
    }

    75% {
        background-position: 50% 50%
    }

    100% {
        background-position: 50% 0%
    }
}

/*オレンジ*/
#wrapper .c_orange {
    background: #ef7300;
}

/*キャメル*/
#wrapper .c_camel {
    background: #98774c;
}

/*グリーン*/
#wrapper .c_green {
    background: #00a02e;
}

/*グレー*/
#wrapper .c_gray {
    background: #babbbe;
}

/*ゴールドイエロー*/
#wrapper .c_gyellow {
    background: #fdc200;
}

/*サックス*/
#wrapper .c_sax {
    background: #58c1f2;
}

/*ダークグリーン*/
#wrapper .c_dgreen {
    background: #005927;
}

/*ダークグレー*/
#wrapper .c_dgray {
    background: #505153;
}

/*ダークネイビー*/
#wrapper .c_dnavy {
    background: #020045;
}

/*ダークブラウン*/
#wrapper .c_dbrown {
    background: #4b2f15;
}

/*ネイビー*/
#wrapper .c_navy {
    background: #083062;
}

/*パープル*/
#wrapper .c_purple {
    background: #56127d;
}

/*ブラウン*/
#wrapper .c_brown {
    background: #763f1a;
}

/*ブルー*/
#wrapper .c_blue {
    background: #0060b4;
}

/*ブラック*/
#wrapper .c_black {
    background: #000;
}

/*ホットピンク*/
#wrapper .c_hotpink {
    background: #e30074;
}

/*ライトピンク*/
#wrapper .c_lpink {
    background: #f1b2c1;
}

/*ライトグリーン*/
#wrapper .c_lightgreen {
    background: #82bd00;
}

/*レッド*/
#wrapper .c_red {
    background: #e50000;
}

/*レモンイエロー*/
#wrapper .c_lyellow {
    background: #fff200;
}

/*============================
 フッター固定ボタン
============================*/

#wrapper #fixdBtn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    width: 100%;
    transform: translateY(101%);
    -webkit-transform: translateY(101%);
    transition: .3s;
    -webkit-transition: .3s;
    opacity: 0;
}

#wrapper #fixdBtn p {
    opacity: 0.7;
}

#wrapper #fixdBtn img {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

#wrapper .is-show {
    transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
    opacity: 1 !important;

}

#wrapper .is-hide {
    transform: translateY(101%) !important;
    -webkit-transform: translateY(101%) !important;
    opacity: 0 !important;
}

/*============================
レスポンシブ化(フォントサイズ、コンテンツ幅調整)
を行う際は以下を有効にしてください。
SP向けの場合は削除、PC版作成時は
メディアクエリを削除以下のプロパティを
上の方の該当箇所に反映
でお願い致します。
============================*/

@media (min-width: 769px) {

    /*rem設定用*/
    html {
        font-size: 20px;
    }

    #wrapper .mainCont {
        max-width: 750px;
    }

    #wrapper .pce {
        display: none !important;
    }

    #wrapper .voice_wrap {
        padding: 50px 30px;
    }

    #wrapper #fixdBtn img {
        max-width: 750px;
    }

    #wrapper footer {
        padding: 3% 0;
    }
}


.count-wrap {
    background-color: #4f6148;
    padding: min(calc(20/750*100%), 20px) 0;
}

.count-wrap p {
    color: #FFF;
    font-size: min(calc(28/750*100vw), 28px);
    text-align: center !important;
    line-height: 1;
    border: 2px solid;
    border-image: linear-gradient(to right, #ad7421, #e0bd68, #ad7421) 1;
    width: calc(720/750*100%);
    margin: 0 auto !important;
    padding: 0.5em 0;

}

.acc-table {

    overflow: hidden;
}

.acc-table .acc-head {
    position: relative;
    font-size: 18px;
    color: #333333;
    font-weight: bold;
    line-height: 1.2;
    cursor: pointer;

    margin: -1px -1px 0;
    padding: 0.5em 0.5em 0.4em 2.2em;
}

.acc-table .acc-head::before,
.acc-table .acc-head::after {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 2px;
    background-color: #000000;
    position: absolute;
    top: calc(50% - 0.1em);
    left: 0.8em;
    -webkit-transform: none;
    transform: none;
}

.acc-table .acc-head::after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
}

.acc-table .acc-head.is-active::after {
    -webkit-transform: rotate(0);
    transform: rotate(0);
}

.acc-table .acc-head.is-active+.acc-body {
    height: auto;
    padding: 1em;
    opacity: 1;
    visibility: visible;
}

.acc-table .acc-body {
    visibility: hidden;
    height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    transition: padding-top 0.25s, padding-bottom 0.25s, opacity 0.25s, visibility 0.25s, height 0.25s;
}

.tbl-border {
    max-width: 100%;
    width: 400px;
    border-collapse: collapse;
    text-align: center;
}

.tbl-border th,
.tbl-border td {
    border: 1px solid #cccccc;
    padding: 0.5em;
}

.acc-body .yt-wrap {
    width: 100%;

}

.yt-wrap iframe {
    margin-bottom: 3%;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9;
}

/* 追従ボタン */
.bl_floatArea {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s, visibility .3s;
    box-sizing: border-box;
}

.bl_floatArea.is_show {
    visibility: visible;
    opacity: 1;
}

.bl_floatArea_inner {
    max-width: 750px;
    margin: auto;
    padding: 0 min(calc(25/750*100%), 25px);
    box-sizing: border-box;
}

.bl_floatArea_btn {
    display: block;
    width: 100%;
}

.bl_floatArea_inner img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}