* {
        box-sizing: border-box;
        margin: 0;

    }
    html {
        /*font-size: 10px;*/
        font-family: '筑紫B丸ゴシック',  'Open Sans', sans-serif;
        color: #1d2a3b;
        margin:0px;
    }
    body {
        margin:0px;

    }
    img {
        margin:0;

    }
    .div_row{
        text-align: center;
    }
    /* コンテナ */
    .container {

        /* Webサイトのトップページ上の最大幅(横)の制限(ピクセルの絶対値):960px */
            max-width: 960px;
        /* 外部余白 */
            margin: 0 auto;
        /* */
            margin-top: 0px;
            margin-bottom: 0px;
        /* 背景色 */
            /*background-color: #0092B4;*/
            background-color: #3A97C1;
        /* 影 */
            box-shadow: 0 0 15px gray;
    }

    /* ------------------------------------------*/
    .container.card {
        /* 外部余白 */
        /* 内部余白設定 */
        padding:0px;

        /* 枠線 */
        /* border-radius: 10px;
        box-shadow: -5px -4px 47px 3px rgba(198, 198, 198, 0.3);*/
        text-align: center;

    }
    .title-main {
        /* font-size: 3.6rem;
        font-weight: 700;*/
        margin-top: 0;
        margin-bottom: 2.1rem;
    }
    .main-image svg {
        max-width: 61rem;
        margin-bottom: 2rem;
    }

    .subheading{
        font-size: 1.6rem;
        font-weight: 600;
        margin-bottom: 3rem;
    }

    .card .text {
        /*font-size: 13px;
        letter-spacing: 0.26px;
        */
    }
    footer {
        color: #b1b1b1;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 1.7rem;
    }
    footer .logo svg {
        width: 145px;
        padding-left: 11px;
    }
    footer .left-side {
        display: flex;
        align-items: center;
    }
    /* ------------------------------------------------------------- */

    a {
        border:0px solid red;
        text-decoration:none;
    }
    a img {
        border: none;


    }
    .img_sized
    {

        margin:0.3em;
    }
        .splitter
        {
            max-width: 90%;
            margin-top:2em;
            margin-bottom:2em;
        }


        /* ロゴ・HP・バナー・スチール撮影・ポスター・チラシ・名刺・グッズ作成 */
        #header_text_01{
            margin:1em;
            max-width:65%;
        }
        #header_logo{
            max-width:55%;
        }
        #meishi_text_title{
            max-width:90%;
        }
        .meishi
        {
            margin:0px;
            max-width:28%;

        }
        #meishi_sample_01_small
        ,#meishi_sample_02_small
        ,#meishi_sample_03_small
        ,#meishi_sample_04_small
        ,#meishi_sample_05_small
         {
            margin:0px;
            max-width:28%;
        }
        #chirashi_text_title{
            max-width:90%;
        }
        #chirashi_sample_gakkou_small
        ,#chirashi_sample_beerset_small{
            margin:2px;
            max-width:25%;
            vertical-align: top;

        }
        #chirashi_text_price{
            max-width:58%;
        }

        /* logo */
        #logo_sample_01_small{
            max-width: 30%;
            vertical-align: top;
        }
        /* #logo_sample_02_small{
            max-width:19%;
            vertical-align: top;

        } */
        #logo_sample_03_small{
            max-width:21%;
            vertical-align: top;

        }
        #logo_sample_04_small{
            max-width:21%;
            vertical-align: top;

        }
        #logo_text_price{
            max-width:38%;
        }
        /* hp */
        #hp_sample_01_small{
            max-width:39%;
        }
        #hp_text_price{
            max-width:25%;

        }
        /* still-photo */
        #still-photo_text_01{
            max-width:40%;
        }

        /* bottom */
        #bottom_text_01{
            max-width:85%;
        }
        #bottom_text_03{
            max-width:33%;
            margin:0;
        }
        #bottom_dog_small{
            max-width:28%;
            margin-top:0px;
        }
        /* inquiry */
        #inquiry_text_01{
            max-width:70%;
        }
        #inquiry_button{
            max-width:35%;

        }
        /* -------------- footer ------------------- */
        #div_copyright {
            color:white;
            font-size:1.3rem;
            line-height:2.5rem;
            padding:1rem;
        }
    /* -- CSSアニメーション設定 ------------------------------------------------- */


    .c-btn{
        opacity: 1;
        /* transition-duration: .4s; */
        transition-duration: 1s;
        /* animation: poyopoyo 2s ease-out infinite; */
        /* animation: fuwafuwa 3s ease-in-out infinite alternate;
        transition: 1.5s ease-in-out; */
        /* animation: poyopoyo 2s ease-out infinite; */

    }
         @keyframes poyopoyo {
            0%, 40%, 60%, 80% {
                transform: scale(1.0);
            }
            50%, 70% {
                /* transform: scale(0.95); */
                transform: scale(0.985);
            }
        }
    /* hover拡大 */
    /* .c-btn-hover {
        transform: scale(1.2);
    } */
    /* --- フェード---------------------------------------------------- */
    .fade-in{
        opacity:0;
    }
    /* fade-in-up フェードインアップ */

    .fade-in-up {
        opacity:1;
        animation: fadeInUp 1s ease-out forwards;
        /* animation: fadeInUp 1s ease-out; */
        /* durationは適宜変更 */
        /* transition-duration: .4s; */
        transition-duration: .8s;
    }
        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(20px); /* 下から50px移動 */
            }
            100% {
                opacity: 1;
                transform: translateY(0); /* 元の位置へ */
            }
        }


    /* poyopoyo */
    .poyopoyo {
        /* animation: poyopoyo 2s ease-out infinite; */
        animation: poyopoyo 2s ease-out infinite;
        opacity: 1;
        transition-duration: 1s;
    }




    /* ふわふわ */
    .fuwafuwa {
        /* animation: fuwafuwa 3s ease-in-out infinite alternate; */
        animation: fuwafuwa 1.5s ease-in-out infinite alternate;
        /* background: url(../img/ico-apple.svg) no-repeat center center / 60px auto; */
        display: inline-block;
        transition: 1.5s ease-in-out;
        /* transition: .8s ease-in-out; */
        /* width: 70px; */
        /* height: 70px; */
        /* margin-top: 15px; */
        /* transition-duration: .8s; */
    }
        @keyframes fuwafuwa {
            0% {
                /* transform:translate(0, 0) rotate(-7deg); */
                transform:translate(0, 0);

            }
            50% {
                /* transform:translate(0, -7px) rotate(0deg); */
                transform:translate(0, -5px);

            }
            100% {
                /* transform:translate(0, 0) rotate(7deg); */
                transform:translate(0, 0);
            }
        }
    /* -- お問い合わせ画面のスタイル ------------------------------------------------- */
        #tbl_inquiry {
            border-collapse: collapse;
            margin-left:auto;
            margin-right:auto;

        }
        #tbl_inquiry th,
        #tbl_inquiry td,
        #tbl_inquiry input,
        #tbl_inquiry textarea
        {
            font-size:2rem;
        }
        #tbl_inquiry th,
        #tbl_inquiry td
        {
            border:1px solid black;
            font-size:2rem;
            padding:2rem;
        }
        #tbl_inquiry th
        {
            background-color: lightgray;

        }
        #tbl_inquiry td
        {
            background-color: #FFFFFF;
            text-align: left;

        }
        #tbl_inquiry input
        {

        }
    /* -------------------------------------------------------------------------------------*/
    /* Medias ----------------------------------------------------------------- */
    /*
        @media [メディアタイプ] and ([メディア特性]) {
            (適用したいCSSルール)
        }
        [メディアタイプ] : どのような種類のデバイスを対象にするか
            all: すべてのデバイス（デフォルト）
            screen: PC、タブレット、スマートフォン等
            print: 印刷プレビューやプリンター
        [メディア特性]:
            min-width: 指定した幅以上の場合に適用
            max-width: 指定した幅以下の場合に適用
            min-height: 指定した高さ以上の場合に適用
            max-height: 指定した高さ以下の場合に適用
    */
    @media screen and (max-width: 1024px)
    {

        /* PC,タブレット,スマートフォン等の画面の横幅が */
        /* 1024px以下(max-width: 1024px)の場合に適用するCSS */
        .container
        {
            max-width: 95%;
            /* コンテナの最大幅を画面の90%にする */
        }
        #chirashi_sample_gakkou_small,
        #chirashi_sample_beerset_small
        {

            max-width:40%;
        }

        @media screen and (max-width: 768px)
        {
            /* タブレット,スマートフォン等の画面幅が
                768px以下の場合(max-width: 768px)に適用するCSS */
            .container
            {
                /* コンテナの最大幅を画面の90%にする */
                max-width:95%;
            }
            img
            {
                /*max-width: 700px;*/
            }
            html {
                font-size: 7px;
            }

            .container.card
            {
                /*margin-top: 6rem;*/
            }
            .card .text { font-size: 1.6rem;}
        }
        @media screen and (max-width: 480px)
        {
            /* タブレット、スマートフォン等の画面幅が */
            /* 480px以下の場合に適用するCSS */
            .container
            {
                /* コンテナの最大幅を画面の95%にする */
                max-width: 95%;
            }

            html
            {
                font-size: 5.7px;
            }
            .title-main {font-size: 6.6vw;}
            /* .container.card {margin-top: 2rem;} */
            .subheading{font-size: 13px;}
            .card .text { font-size: 12px;}
            footer {flex-direction: column;}
        }
    }