/*warning:  write css in for_common , for_phone, or for_desktop */
/*warning:  write css in for_common , for_phone, or for_desktop */
/*warning:  write css in for_common , for_phone, or for_desktop */

/*********************************************for_common start********************************/
@media (min-width: 10px) {
    .help-text-1 {
        color: grey;
        font-size: 0.8em;
        /* text-align: center; */
        margin-left: 18px;
    }

    html {
        scroll-behavior: smooth;
    }

    .select-pointer {
        padding: 0 2.125% 1%;
    }

    .Secondtime-XAxis line {
        stroke: grey;
    }

    .Secondtime-XAxis path {
        stroke: grey;
    }

    .Secondtime-XAxis text {
        fill: grey;
    }

    .Secondtime-YAxis line {
        stroke: grey;
    }

    .Secondtime-YAxis path {
        stroke: grey;
    }

    .Secondtime-YAxis text {
        color: grey;
    }

    .myCharacter-container {

    }

    .myCharacter-img {
        height: 150px;
        background: transparent;
    }

    .mySpeechBalloon-img {
        /* height:60px; */
        height: 143px;
    }

    .mySpeechBalloon-textarea {
        font-family: "HGP創英角ゴシックUB";
        font-size: 0.6em;
        background: transparent;
        border-color: transparent;
        overflow: hidden;
        resize: none;
    }

    .material-icons {
        color: white !important;
        font-family: 'Material Icons';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
    }

    #SelectButton {
        text-align: left;
        padding: 0 10px;
        border-radius: 50px;
        position: relative;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -o-user-select: none;
    }

    .mytitle {
        line-height: 2.5;
        margin-right: 30px;
        display: inline-block;
    }

    .comment-textarea-tr-disabled {
        background: #e4e4e4;
        border-color: #b35900 !important;
    }

    .fromLeft {
        position: absolute;
        display: inline-block;
        right: 4px;
        top: 3px;
        background: #186bff;
        border: none;
        height: 34px;
        width: 34px;
        color: #fff;
        border-radius: 50px;
        padding: 4px;
        outline: none;
        cursor: pointer;
    }


    a:hover, a:focus {
        text-decoration: none;
        outline: none;
    }

    #accordion .panel {
        border: none;
        box-shadow: none;
        border-radius: 0;
        margin-bottom: -5px;
    }

    #accordion .panel-heading {
        padding: 0;
        border-radius: 0;
        border: none;
        text-align: center;
    }

    #accordion .panel-title div {
        display: block;
        padding: 25px 30px;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        background: #333;
        border-bottom: 1px solid #4a4a4a;
        position: relative;
        transition: all 0.5s ease 0s;
    }

    #accordion .panel-title div:hover {
        background: #4a4a4a;
    }

    #accordion .panel-title div:after,
    #accordion .panel-title div.collapsed:after {
        content: "\f067";
        font-family: FontAwesome;
        font-size: 15px;
        font-weight: 200;
        position: absolute;
        top: 25px;
        left: 15px;
        transform: rotate(135deg);
        transition: all 0.5s ease 0s;
    }

    #accordion .panel-title div.collapsed:after {
        transform: rotate(0deg);
    }

    #accordion .panel-body {
        background: #167ea0;
        padding: 0 0 0 40px;
        border: none;
        position: relative;
    }

    #accordion .panel-body p {
        font-size: 14px;
        color: #fff;
        line-height: 25px;
        background: #3296b7;
        padding: 30px;
        margin: 0;
    }

    #accordion .panel-collapse .panel-body p {
        opacity: 0;
        transform: scale(0.9);
        transition: all 0.5s ease-in-out 0s;
    }

    #accordion .panel-collapse.in .panel-body p {
        opacity: 1;
        transform: scale(1);
    }


    .custom-hexbin {
        width: fit-content;
        /*height: 400px;*/
        /*position: center;*/
        /*float: left;*/
        /*display: inline-block;*/
        margin: auto;
        /* padding-left: 0px; */
    }

    .custom-select {
        float: none;
        display: inline-block;
        margin-left: 0;
    }

    .custom-tips {
        color: #00ab4c
    }

    .comment-area {
        margin: auto;
    }


    /* ---------- Welcome page: Losange icon turn grey on hover: ----------------- */
    /* ---------- Button ----------------- */
    .btn {
        font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-weight: 500;
    }

    .btn-xl {
        font-size: 18px;
        padding: 20px 40px;
    }

    .irit {
        position: inherit;
    }


    .aside {
        float: right;
        margin-right: -80px;
        width: 80px;
        color: red;
    }


    .send-btn {
        background-color: #b35900;
        border-color: #b35900;
        color: #000;
        border-width: thin;
    }

    .submitbtn {
        height: 30px;
        /* width: 675px; */
        /* margin-left: 30px; */
        margin: auto;
    }


    .send-btn:active, .send-btn:focus, not(.disabled).send-btn:hover {
        background-color: #fc3815 !important;
        border-color: #b35900 !important;
        color: black;
    }

    .send-btn:active, .send-btn:focus {
        box-shadow: 0 0 0 0.2rem rgba(254, 209, 55, 0.5) !important;
        background-color: tomato !important;
    }


    .send-btn:not(:disabled):not(.disabled).active {
        background-color: #b35900 !important;
        border-color: #b35900 !important;
        color: white;
    }


    .btn-ripple {
        display: block;
        outline: 0;
        position: relative;
        transition: .3s;
        cursor: pointer;
        user-select: none;
        text-align: center;
        /*line-height: 100px;*/
        font-size: 14px;
        background: tomato;
        color: #fff;
        border-radius: 10px;
    }

    .btn-ripple-after {
        background: #e1c1bc;
    }

    .btn-ripple:active {
        background: orangered;
    }

    @keyframes ripple-in {
        from {
            transform: translate(-50%, -50%) scale(0);
            background: rgba(0, 0, 0, .25);
        }
        to {
            transform: translate(-50%, -50%) scale(1);
            background: transparent;
        }
    }

    @keyframes ripple-out {
        from {
            transform: translate(-50%, -50%) scale(0);
            background: rgba(0, 0, 0, .25);
        }
        to {
            transform: translate(-50%, -50%) scale(1);
            background: transparent;
        }
    }


    .selectbtn {
        width: 80px;
        background: #feefbb repeat 0 0 url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAyADIDAREAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAQACAwn/xAArEAABBAECBAUEAwAAAAAAAAABAAIRITESQQMiUWETMlJxsTNCgZFyodH/xAAaAQEBAQEAAwAAAAAAAAAAAAABAAIDBAUG/8QAKREAAgEDAgQGAwEAAAAAAAAAAAERAiExEkEiYXHwAzJRgaGxkdHx4f/aAAwDAQACEQMRAD8A9OGOBbE3NgdV8tTUmon+nsGgbtu5s9pCFayyp90LJxbT5AExIU482xKcC8zzTMHA3TU54kC9ClrRFFpmP8VKSti8foiaQ0ubMbEdlWpbpb/hO9x0H1ftqdHP4CeRl0FxFCyJGVlw3D/JpYGdbhZLhtPwl8bUvvkGBJGmZbE4hLdpncIuZby3JbsQ1ZTi8x0NO5CANjJ3wlJJSv8AP6AvI1GwcEneFVRN3P2SViDXAec/tKlWVRewTznYiSJGOyynxfXfMYsajmNE+wwtJTVLlmQM6TIIPXv1VU3F1D7uKyQMsqpExGChOaYVi3EyG+Uxv3HVauljqHuDvOAQbq9j1WavNDx3cVgPGIQ/FayOkg2DpdAMZUlD01ZLmiBBdYDYo3Sk1qvC+gFwJ9JbmZytNekQSAOGkOABO4NFZlRqQxeBbGmAWl20nKVDUWkH6h9wLgLPWaVN06t/cehrw+7P2taehnUE6SCRqDqJI2WW9N3dMcjyuedDbFTFLaSdXAgulcBYjRpOMZ6hZV1CpjvA43IPbDtTfLQq0KqmGq9ih7ERpaOSR0OxS+FLhsGdyJLeYA1tGOyqm6eJLHcCr2EN4J2YrT4LvC+Q4wbPhybs1P8ASlOmX3yFxJUYqD1BzCJT2uWAOQNRDpCKnsnexGncroIkYsrdTiqIBYkKgkAx0BWZV4wItvXDiQIiflKu25ld3J7Gb9DvwViZ9SN8MSB3C7UJW6BUY4f0+H/Irl4flp6s1VlmnW4A3n4W8v8AP0BcQfTO+o2s14pfMqdxafP7rTtq6h6A0c35PylJfJVYOHEp7vcrx60tTOqwf//Z)

    }


    .path {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: dash 5s linear forwards;
    }

    @keyframes dash {
        to {
            stroke-dashoffset: 0;
        }
    }

    /*rainbow*/
    .rainbowWrapper {
        height: 100%;
        width: 100%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        position: absolute;
        background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
        background-size: 1800% 1800%;

        -webkit-animation: rainbow 18s ease infinite;
        -z-animation: rainbow 18s ease infinite;
        -o-animation: rainbow 18s ease infinite;
        animation: rainbow 18s ease infinite;
    }

    @-webkit-keyframes rainbow {
        0% {
            background-position: 0% 82%
        }
        50% {
            background-position: 100% 19%
        }
        100% {
            background-position: 0% 82%
        }
    }

    @-moz-keyframes rainbow {
        0% {
            background-position: 0% 82%
        }
        50% {
            background-position: 100% 19%
        }
        100% {
            background-position: 0% 82%
        }
    }

    @-o-keyframes rainbow {
        0% {
            background-position: 0% 82%
        }
        50% {
            background-position: 100% 19%
        }
        100% {
            background-position: 0% 82%
        }
    }

    @keyframes rainbow {
        0% {
            background-position: 0% 82%
        }
        50% {
            background-position: 100% 19%
        }
        100% {
            background-position: 0% 82%
        }
    }

    /*rainbow*/
    /*select background-color*/
    .bg-orange1 {
        background-color: #ff9719;
        opacity: 0.98;
    }

    .bg-orange2 {
        background-color: #fa9419;
        opacity: 0.98;
    }

    .bg-orange3 {
        background-color: #f08c19;
        opacity: 0.98;
    }

    .bg-orange4 {
        background-color: #eb8819;
        opacity: 0.98;
    }

    /*select background-color*/
    /*placeholder input*/
    ::placeholder {
        /*background: #feefbb repeat 0 0 url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAyADIDAREAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAQACAwn/xAArEAABBAECBAUEAwAAAAAAAAABAAIRITESQQMiUWETMlJxsTNCgZFyodH/xAAaAQEBAQEAAwAAAAAAAAAAAAABAAIDBAUG/8QAKREAAgEDAgQGAwEAAAAAAAAAAAERAiExEkEiYXHwAzJRgaGxkdHx4f/aAAwDAQACEQMRAD8A9OGOBbE3NgdV8tTUmon+nsGgbtu5s9pCFayyp90LJxbT5AExIU482xKcC8zzTMHA3TU54kC9ClrRFFpmP8VKSti8foiaQ0ubMbEdlWpbpb/hO9x0H1ftqdHP4CeRl0FxFCyJGVlw3D/JpYGdbhZLhtPwl8bUvvkGBJGmZbE4hLdpncIuZby3JbsQ1ZTi8x0NO5CANjJ3wlJJSv8AP6AvI1GwcEneFVRN3P2SViDXAec/tKlWVRewTznYiSJGOyynxfXfMYsajmNE+wwtJTVLlmQM6TIIPXv1VU3F1D7uKyQMsqpExGChOaYVi3EyG+Uxv3HVauljqHuDvOAQbq9j1WavNDx3cVgPGIQ/FayOkg2DpdAMZUlD01ZLmiBBdYDYo3Sk1qvC+gFwJ9JbmZytNekQSAOGkOABO4NFZlRqQxeBbGmAWl20nKVDUWkH6h9wLgLPWaVN06t/cehrw+7P2taehnUE6SCRqDqJI2WW9N3dMcjyuedDbFTFLaSdXAgulcBYjRpOMZ6hZV1CpjvA43IPbDtTfLQq0KqmGq9ih7ERpaOSR0OxS+FLhsGdyJLeYA1tGOyqm6eJLHcCr2EN4J2YrT4LvC+Q4wbPhybs1P8ASlOmX3yFxJUYqD1BzCJT2uWAOQNRDpCKnsnexGncroIkYsrdTiqIBYkKgkAx0BWZV4wItvXDiQIiflKu25ld3J7Gb9DvwViZ9SN8MSB3C7UJW6BUY4f0+H/Irl4flp6s1VlmnW4A3n4W8v8AP0BcQfTO+o2s14pfMqdxafP7rTtq6h6A0c35PylJfJVYOHEp7vcrx60tTOqwf//Z)*/

    }

    :-ms-input-placeholder { /* Internet Explorer 10-11 */
        /*background: #feefbb repeat 0 0 url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAyADIDAREAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAQACAwn/xAArEAABBAECBAUEAwAAAAAAAAABAAIRITESQQMiUWETMlJxsTNCgZFyodH/xAAaAQEBAQEAAwAAAAAAAAAAAAABAAIDBAUG/8QAKREAAgEDAgQGAwEAAAAAAAAAAAERAiExEkEiYXHwAzJRgaGxkdHx4f/aAAwDAQACEQMRAD8A9OGOBbE3NgdV8tTUmon+nsGgbtu5s9pCFayyp90LJxbT5AExIU482xKcC8zzTMHA3TU54kC9ClrRFFpmP8VKSti8foiaQ0ubMbEdlWpbpb/hO9x0H1ftqdHP4CeRl0FxFCyJGVlw3D/JpYGdbhZLhtPwl8bUvvkGBJGmZbE4hLdpncIuZby3JbsQ1ZTi8x0NO5CANjJ3wlJJSv8AP6AvI1GwcEneFVRN3P2SViDXAec/tKlWVRewTznYiSJGOyynxfXfMYsajmNE+wwtJTVLlmQM6TIIPXv1VU3F1D7uKyQMsqpExGChOaYVi3EyG+Uxv3HVauljqHuDvOAQbq9j1WavNDx3cVgPGIQ/FayOkg2DpdAMZUlD01ZLmiBBdYDYo3Sk1qvC+gFwJ9JbmZytNekQSAOGkOABO4NFZlRqQxeBbGmAWl20nKVDUWkH6h9wLgLPWaVN06t/cehrw+7P2taehnUE6SCRqDqJI2WW9N3dMcjyuedDbFTFLaSdXAgulcBYjRpOMZ6hZV1CpjvA43IPbDtTfLQq0KqmGq9ih7ERpaOSR0OxS+FLhsGdyJLeYA1tGOyqm6eJLHcCr2EN4J2YrT4LvC+Q4wbPhybs1P8ASlOmX3yFxJUYqD1BzCJT2uWAOQNRDpCKnsnexGncroIkYsrdTiqIBYkKgkAx0BWZV4wItvXDiQIiflKu25ld3J7Gb9DvwViZ9SN8MSB3C7UJW6BUY4f0+H/Irl4flp6s1VlmnW4A3n4W8v8AP0BcQfTO+o2s14pfMqdxafP7rTtq6h6A0c35PylJfJVYOHEp7vcrx60tTOqwf//Z)*/

    }

    ::-ms-input-placeholder { /* Microsoft Edge */
        /*background: #feefbb repeat 0 0 url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAyADIDAREAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAQACAwn/xAArEAABBAECBAUEAwAAAAAAAAABAAIRITESQQMiUWETMlJxsTNCgZFyodH/xAAaAQEBAQEAAwAAAAAAAAAAAAABAAIDBAUG/8QAKREAAgEDAgQGAwEAAAAAAAAAAAERAiExEkEiYXHwAzJRgaGxkdHx4f/aAAwDAQACEQMRAD8A9OGOBbE3NgdV8tTUmon+nsGgbtu5s9pCFayyp90LJxbT5AExIU482xKcC8zzTMHA3TU54kC9ClrRFFpmP8VKSti8foiaQ0ubMbEdlWpbpb/hO9x0H1ftqdHP4CeRl0FxFCyJGVlw3D/JpYGdbhZLhtPwl8bUvvkGBJGmZbE4hLdpncIuZby3JbsQ1ZTi8x0NO5CANjJ3wlJJSv8AP6AvI1GwcEneFVRN3P2SViDXAec/tKlWVRewTznYiSJGOyynxfXfMYsajmNE+wwtJTVLlmQM6TIIPXv1VU3F1D7uKyQMsqpExGChOaYVi3EyG+Uxv3HVauljqHuDvOAQbq9j1WavNDx3cVgPGIQ/FayOkg2DpdAMZUlD01ZLmiBBdYDYo3Sk1qvC+gFwJ9JbmZytNekQSAOGkOABO4NFZlRqQxeBbGmAWl20nKVDUWkH6h9wLgLPWaVN06t/cehrw+7P2taehnUE6SCRqDqJI2WW9N3dMcjyuedDbFTFLaSdXAgulcBYjRpOMZ6hZV1CpjvA43IPbDtTfLQq0KqmGq9ih7ERpaOSR0OxS+FLhsGdyJLeYA1tGOyqm6eJLHcCr2EN4J2YrT4LvC+Q4wbPhybs1P8ASlOmX3yFxJUYqD1BzCJT2uWAOQNRDpCKnsnexGncroIkYsrdTiqIBYkKgkAx0BWZV4wItvXDiQIiflKu25ld3J7Gb9DvwViZ9SN8MSB3C7UJW6BUY4f0+H/Irl4flp6s1VlmnW4A3n4W8v8AP0BcQfTO+o2s14pfMqdxafP7rTtq6h6A0c35PylJfJVYOHEp7vcrx60tTOqwf//Z)*/

    }

    /*placeholder input*/
    /*placeholder textarea*/
    textarea::-webkit-input-placeholder {
        /*color: #9e9e9e;*/
    }

    textarea:-moz-placeholder { /* Firefox 18- */
        /*color: #9e9e9e;*/
    }

    textarea::-moz-placeholder { /* Firefox 19+ */
        /*color: #9e9e9e;*/
    }

    textarea:-ms-input-placeholder {
        /*color: #9e9e9e;*/
    }

    textarea::placeholder {
        /*color: #9e9e9e;*/
    }

    /*placeholder textarea*/
    /*.wave {*/
    /*    position: absolute;*/
    /*    top: calc((100% - 30px) / 2);*/
    /*    left: calc((100% - 30px) / 2);*/
    /*    width: 30px;*/
    /*    height: 30px;*/
    /*    border-radius: 300px;*/
    /*    background: rgba(235, 255, 246, 0.1);*/
    /*    !*background: url("../img/A0255.jpg");*!*/
    /*    background-attachment: fixed;*/
    /*    background-position: center center;*/
    /*}*/
    /*.wave0 {*/
    /*    z-index: 2;*/
    /*    background-size: auto 106%;*/
    /*    animation: w 1s forwards;*/
    /*}*/
    /*.wave1 {*/
    /*    z-index: 3;*/
    /*    background-size: auto 102%;*/
    /*    animation: w 1s .2s forwards;*/
    /*}*/
    /*.wave2 {*/
    /*    z-index: 4;*/
    /*    background-size: auto 104%;*/
    /*    animation: w 1s .4s forwards;*/
    /*}*/
    /*.wave3 {*/
    /*    z-index: 5;*/
    /*    background-size: auto 101%;*/
    /*    animation: w 1s .5s forwards;*/
    /*}*/
    /*.wave4 {*/
    /*    z-index: 6;*/
    /*    background-size: auto 102%;*/
    /*    animation: w 1s .8s forwards;*/
    /*}*/
    /*.wave5 {*/
    /*    z-index: 7;*/
    /*    background-size: auto 100%;*/
    /*    animation: w 1s 1s forwards;*/
    /*}*/
    /*@keyframes w {*/
    /*    0% {*/
    /*        top: calc((100% - 10px) / 2);*/
    /*        left: calc((100% - 10px) / 2);*/
    /*        opcity:75;*/
    /*        width: 10px;*/
    /*        height: 10px;*/
    /*    }*/
    /*    100% {*/
    /*        top: calc((100% - 150px) / 2);*/
    /*        left: calc((100% - 150px) / 2);*/
    /*        opacity: 0;*/
    /*        width: 150px;*/
    /*        height: 150px;*/
    /*    }*/
    /*}*/
    .dot:before {
        content: ' ';
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
        width: 0px;
        height: 0px;
        background-color: #ff4200;
        border-radius: 50%;
    }

    .dot:after {
        content: ' ';
        position: absolute;
        z-index: 1;
        width: 0px;
        height: 0px;
        background-color: rgba(232, 8, 59, 0.9);
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
        -webkit-animation-name: 'ripple'; /*动画属性名，也就是我们前面keyframes定义的动画名*/
        -webkit-animation-duration: 1s; /*动画持续时间*/
        -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
        -webkit-animation-delay: 0.1s; /*动画延迟时间*/
        -webkit-animation-iteration-count: 1; /*定义循环资料，infinite为无限次*/
        -webkit-animation-direction: normal; /*定义动画方式*/
    }

    @keyframes ripple {
        0% {
            top: calc((100% - 15px) / 2);
            left: calc((100% - 15px) / 2);
            opcity: 75;
            width: 15px;
            height: 15px;
        }
        100% {
            top: calc((100% - 200px) / 2);
            left: calc((100% - 200px) / 2);
            opacity: 0;
            width: 200px;
            height: 200px;
        }
    }

    .carousel-item {
        height: 100vh;
        /*min-height: 350px;*/
        background: no-repeat center center scroll;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    #carouselExampleIndicators {
        display: inline-block;
        width: 100%;
        height: 650px;
    }

}

/*********************************************for_common end********************************/


/*************************************  ******for_desktop start*******************************/
@media (min-width: 569px) {
    .comment-textarea-tr {
        width: 100%;
    }

    #my_dataviz {
        /* margin-left: 140px; */
        margin: auto;
        width: fit-content;
    }
}

.comment-container {
}

/*************************************  ******for_desktop end*******************************/

/*************************************  ******for_phone start*******************************/
@media (max-width: 568px) {
    .custom-hexbin {
        /*width: 400px;
        height: 400px;*/
    }

    .modal-content {
        touch-action: manipulation;
    }

    .SelectButton {
        font-size: 0.75em;
    }

    .comment-textarea {
        width: 310px;
    }

    .mytitle {
        line-height: 2.5;
        margin-right: 31px;
        display: inline-block;
        font-size: 0.8em;
    }

    .pk-tag > .txt {
        float: left;
        padding-right: 22px;
        /*margin-right: 10px;*/
        border-radius: 6px;
        position: relative;
        background: #F28F19;
        color: #fff;
        font-size: 0.7em;
    }

    .pk-tag {
        float: left;
        /* cursor: pointer; */
        padding-top: 3px;
        /* margin-bottom: 6px; */
        font-size: smaller;
    }

    .close {
        width: auto;
    }

    .comment-container {
        float: left;
        margin-left: 0px;
        width: 100%;
    }

    .message-r {
        font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        font-size: .88em;
    }

    .btn-right {
        padding-right: 20px;
        float: right;
    }

    .morecontent span {
        display: none;
    }

    .morelink {
        display: block;
    }

    #carouselExampleIndicators {
        display: inline-block;
        width: 100%;
        height: 225px;
    }

    #my_dataviz {
        margin: auto;
        width: fit-content;
    }

    .myCharacter-img {
        height: 93px;
        background: transparent;
    }

    .mySpeechBalloon-img {
        height: 87px;
    }

    .mySpeechBalloon-textarea {
        font-family: "HGP創英角ゴシックUB";
        font-size: 12px;
        color: black;
        width: 108px;
        background: transparent;
        border-color: transparent;
        overflow: hidden;
        resize: none;
    }


}

/*************************************  ******for_phone end*******************************/