@charset "utf-8";

.inner {
    width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 0;
}
.inner2 {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 60px 0;
}
.poyopoyo {
    animation: poyopoyo 2s ease-out infinite;
    opacity: 1;
}

.cate {
    background-color: #77b723;
    display: inline-block;
    border-radius: 20px;
    margin-bottom: 20px;
}

.cate p {
    padding: 8px 36px;
    color: #fff;
}

.section_title {
    font-size: 32px;
    color: #083e6e;
    border-bottom: #083e6e solid 2px;
    padding:10px 0 10px;
    font-weight: bold;
    margin-bottom:40px;
}
.in_wrap h3{
    font-size: 18px;
    border-radius:5px;
    background:#4160A3;
    color:#fff;
    padding:5px;
    margin:20px auto 30px;
}
.in_wrap p{
    text-align:left;
    font-size:14px;
}



#point .section_title,
#goods .section_title,
#question .section_title {
    /* text-shadow: rgb(255, 255, 255) 4px 0px 0px, rgb(255, 255, 255) 3.87565px 0.989616px 0px, rgb(255, 255, 255) 3.51033px 1.9177px 0px, rgb(255, 255, 255) 2.92676px 2.72656px 0px, rgb(255, 255, 255) 2.16121px 3.36588px 0px, rgb(255, 255, 255) 1.26129px 3.79594px 0px, rgb(255, 255, 255) 0.282949px 3.98998px 0px, rgb(255, 255, 255) -0.712984px 3.93594px 0px, rgb(255, 255, 255) -1.66459px 3.63719px 0px, rgb(255, 255, 255) -2.51269px 3.11229px 0px, rgb(255, 255, 255) -3.20457px 2.39389px 0px, rgb(255, 255, 255) -3.69721px 1.52664px 0px, rgb(255, 255, 255) -3.95997px 0.56448px 0px, rgb(255, 255, 255) -3.97652px -0.432781px 0px, rgb(255, 255, 255) -3.74583px -1.40313px 0px, rgb(255, 255, 255) -3.28224px -2.28625px 0px, rgb(255, 255, 255) -2.61457px -3.02721px 0px, rgb(255, 255, 255) -1.78435px -3.57996px 0px, rgb(255, 255, 255) -0.843183px -3.91012px 0px, rgb(255, 255, 255) 0.150409px -3.99717px 0px, rgb(255, 255, 255) 1.13465px -3.8357px 0px, rgb(255, 255, 255) 2.04834px -3.43574px 0px, rgb(255, 255, 255) 2.83468px -2.82216px 0px, rgb(255, 255, 255) 3.44477px -2.03312px 0px, rgb(255, 255, 255) 3.84068px -1.11766px 0px, rgb(255, 255, 255) 3.9978px -0.132717px 0px; */
}


.fadeIn {
    animation-name: fadeInAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 下から */
.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

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

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

.fadeLeft {
    animation-name: fadeLeftAnime;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeLeftAnime {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

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

.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
    opacity: 0;
}


.section_title img {
    width: 160px;
    margin-right: 8px;
    vertical-align: sub;
}

.title_comment {
    margin-bottom: 40px;
}

.red {
    color: #E14545;
}

.big {
    font-size: 24px;
}

.small {
    font-size: 12px;
}

/*ーーーーーーーーーー header ーーーーーーーーーー*/
#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background:#4160A3;
}

#header .logo a {
    width: 150px;
    font-size: 0;
}

#header .logo a:hover {
    opacity: 0.7;
}


#header .login_btn {
    background-color: #77b723;
    border-radius: 10px;

}

#header .login_btn a {
    color:#fff;
    font-size: 20px;
    padding: 20px 32px;
}

#header .login_btn a:hover {
    opacity: 0.7;
}

/*ーーーーーーーーーー keibadey_bnr ーーーーーーーーーー*/

#keibaday_bnr {
    background-color: rgba(255, 69, 69, 0.8);
    text-align: center;
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 99;
}

#keibaday_bnr .keibaday_bnrtext {
    color: #fff;
    font-size: 24px;
}

#keibaday_bnr span {
    font-size: 40px;
    color: #fba92d;
}



/*ーーーーーーーーーー mv ーーーーーーーーーー*/
#mv {
    background: url(../images/arimachan_mv_back.jpg) center no-repeat;
    background-size: cover;
    position: relative;
}


#mv .mv_illust1 {
    width: 900px;
    margin: 0 auto;
    display: block;
    padding: 50px 0;
}




#mv .cv_btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%);
}


@keyframes poyopoyo {

    0%,
    40%,
    60%,
    80% {
        transform: scale(1.0);
    }

    50%,
    70% {
        transform: scale(0.95);
    }
}

/*ーーーーーーーーーー point ーーーーーーーーーー*/
#point {
    background-color: #D0E3F5;
    position: relative;
    padding-bottom: 80px;
}

#point::before {
    content: "";
    background: url(../images/kusa.png)center no-repeat;
    background-size: cover;
    width: 100%;
    height: 120px;
    display: inline-block;
    position: absolute;
    bottom: 0;
}

#point .merit_list {
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
    justify-content: space-between;
}

#point .merit_list li {
    width: 45%;
}

/*ーーーーーーーーーー about ーーーーーーーーーー*/

#about {
    position: relative;
}

#about .section_title {
    margin-bottom: 40px;
}

#about .title_comment {
    line-height: 24px;
    margin-bottom: 60px;
}

#about .title_comment img {
    width: 200px;
}

#about .flow {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
}

#about .flow_content {
    width: 30%;
    display: flex;
    flex-flow: column;
    align-items: center;
}

#about .flow_content .flow_title {
    background-color: #D0E3F5;
    border-radius: 10px;
    width: -webkit-fill-available;
    padding: 20px 0;
    margin-bottom: 40px;
}

#about .flow_content img {
    width: 120px;
}

#about .flow2 {
    background-color: #77b723;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

#about .flow2 h3 {
    line-height: 24px;
}

#about .about_illust1 {
    position: absolute;
    width: 150px;
    top: 20%;
    right: 70%;
}

#about .about_illust2 {
    position: absolute;
    width: 150px;
    top: 20%;
    left: 70%;
}

/*ーーーーーーーーーー goods ーーーーーーーーーー*/

#goods {
    background-color: #D0E3F5;
    position: relative;
    padding-bottom: 80px;
}

#goods::before {
    content: "";
    background: url(../images/kusa.png)center no-repeat;
    background-size: cover;
    width: 100%;
    height: 120px;
    display: inline-block;
    position: absolute;
    bottom: 0;
}

#goods .goods_list {
    display: flex;
    justify-content: space-between;
}

#goods .goods_list li {
    width: 45%;
}

/*ーーーーーーーーーー voice ーーーーーーーーーー*/

#voice .inner {
    margin-bottom: 20px;
}

#voice .comment_contener {
    border: #77b723 solid;
    border-radius: 10px;
    margin-bottom: 40px;
}

#voice .comment_contener .comment_title {
    background-color: #77b723;
    padding: 10px 0;
}

#voice .comment_contener .comment_title {
    display: flex;
    align-items: center;
    justify-content: center;
}

#voice .comment_contener .comment_title img {
    width: 50px;
    margin-right: 10px;
}

#voice .comment_contener .comment_text {
    padding: 20px 10px;
}

/*ーーーーーーーーーー voice ーーーーーーーーーー*/

#question {
    background-color: #D0E3F5;
    position: relative;
    padding-bottom: 60px;
}

#question::before {
    content: "";
    background: url(../images/kusa.png)center no-repeat;
    background-size: cover;
    ;
    width: 100%;
    height: 120px;
    display: inline-block;
    position: absolute;
    bottom: 0;
}

#question .question_container {
    margin-bottom: 40px;
}

#question .question_container .question_title {
    display: flex;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px 40px;
    align-items: center;
    margin-bottom: 20px;
}

#question .question_container .question_title img {
    width: 40px;
    margin-right: 20px;
}

#question .question_container .question_title .question_title_text {
    text-align: left;
    font-size: 16px;
}

#question .question_container .question_text {
    padding: 0 40px;
    text-align: left;
}

/*ーーーーーーーーーー footer ーーーーーーーーーー*/

#footer {
    padding: 40px 0 20px 0;
    text-align: center;
}

#footer .footer_logo {
    margin-bottom: 30px;
}

#footer .footer_logo img {
    width: 180px;
}


.foot_cta{
    margin:0 auto;
    text-align:center;
    padding:20px 0 20px;
}
.foot_cta a{display: inline-block;}
.foot_cta img{
    max-width:400px;
}

ul.footLink{
    display: flex;
    justify-content: center;
    align-items: center;
}
ul.footLink li{
    padding:10px;
}
ul.footLink li a{
    font-size:14px;
    color:#fff;
}

#sp_float{
    bottom:-50%;
    position: fixed;
    z-index: 1;
}

@media screen and (max-width: 520px){
    #sp_float {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    z-index: 9;
    background: rgba(0,0,0,0.75);
    justify-content: center;
    padding: 8px 0;
    }

    .sp_cv_box{
        width:50%;
        box-sizing: border-box;
        padding:0 10px 0;
    }
    .topLogin{
        width:100%;
        height:50px;
        box-sizing: border-box;
        border:4px solid #77b723;
        background:#fff;
        color:#77b723;
        font-size:18px;
        font-weight:bold;
        display: inline-block;
        text-align:center;
        line-height: 1;
        padding:10px 0 0;
        margin:0;
    }

}





.formPolicy {
    background: #fcfcfc;
    border: 1px solid #e9e9e9;
    padding: 15px;
    height: 10em;
    overflow: scroll;
}
.formPolicy h4{
    font-size:12px;
    font-weight: bold;
}
.formPolicy p{
    font-size:12px;
}
.termsCheck {
    text-align: center;
    margin-top:20px;
}

.termsCheck label {
    background: #FFF;
    padding: 10px 26px 10px 20px;
    border-radius: 100vw;
}
@media screen and (max-width:1024px) {
    #mv .mv_illust1{
        width: 98%;
    }
}

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

    .inner {
        width: 400px;
    }
    .inner2 {
        width: 400px;
    }
    p {
        font-size: 12px;
    }

    h3 {
        font-size: 16px;
    }

    .big {
        font-size: 18px;
    }

    .small {
        font-size: 10px;
    }

    .cate p {
        font-size: 12px;
    }

    #header {
        padding: 16px 60px;
    }

    #header .logo a {
        width: 160px;
        height: 59px;
        font-size: 0;
        background: url(../images/arimachan_logo.png) left top/160px auto no-repeat;
    }

    .formPolicy {
        height: 150px;
    }
    
    .termsCheck{
        margin-top:30px;
    }

    #keibaday_bnr .keibaday_bnrtext {
        font-size: 18px;
    }

    #keibaday_bnr span {
        font-size: 30px;
    }


    .section_title {
        font-size: 20px;
        line-height: 30px;
    }

    .section_title img {
        width: 140px;
    }
    .in_wrap h3{
        font-size: 16px;
        padding:5px;
        margin:20px auto 20px;
    }
    .in_wrap p{
        padding:0 15px 0;
        box-sizing: border-box;
        text-align:left;
        font-size:14px;
    }
    
    
    #point::before,
    #goods::before,
    #question::before {
        height: 100px;
    }

    #about .title_comment img {
        width: 150px;
    }

    #about .flow {
        flex-direction: column;
    }

    #about .flow_content {
        width: 100%;
        margin-bottom: 40px;
    }

    #about .flow_content:nth-of-type(3) {
        margin-bottom: 0;
    }

    #about .flow_content .flow_title {
        margin-bottom: 20px;

    }

    #about .about_illust1,
    #about .about_illust2 {
        width: 120px;
        top: 12.5%;
    }

    #voice .section_title {
        line-height: 40px;
    }

    #voice .comment_contener .comment_title img {
        width: 40px;
    }

    #question .question_container .question_title img {
        width: 30px;
    }

    #footer .footer_logo img {
        width: 140px;
    }
    #footer{
        padding-bottom:80px;
    }
    .foot_cta{
        box-sizing: border-box;
        padding:20px;
    }
    ul.footLink{
        flex-direction: column;
    }
    ul.footLink li{
        padding:5px;
        box-sizing: border-box;
    }

    
}

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

    #header .login_btn a {
        font-size: 10px;
    }


    #header .logo a {
        width: 150px;
        height: 56px;
        font-size: 0;
        background: url(../images/arimachan_logo.png) left top/150px auto no-repeat;
    }
}

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

    .inner {
        /* width: 280px; */
        padding: 40px 30px;
        box-sizing: border-box;
    }

    .cate {
        margin-bottom: 10px;
    }

    .cate p {
        font-size: 10px;
        padding: 4px 20px;
    }

    .section_title {
        font-size: 18px;
        padding-bottom: 4px;
        margin-bottom: 4px;
        line-height: 50px;
    }

    p {
        font-size: 12px;
    }

    h3 {
        font-size: 14px;
    }

    .big {
        font-size: 16px;
    }

    .small {
        font-size: 8px;
    }

    #keibaday_bnr .keibaday_bnrtext {
        font-size: 14px;
    }

    #keibaday_bnr span {
        font-size: 20px;
    }


    #point,
    #goods,
    #question {
        padding-bottom: 20px;
    }

    #point::before,
    #goods::before,
    #question::before {
        height: 50px;
    }

    .section_title img {
        width: 110px;
    }

    .title_comment {
        margin-bottom: 20px;
    }

    #header {
        padding: 8px 10px;
    }


    #header .logo a {

    }
    #header .logo img{
        width:80%;
    }

    #header .login_btn a {
        font-size: 12px;
        padding: 8px 24px;
    }



    #point .merit_list {
        flex-direction: column;
    }

    #point .merit_list li {
        width: 100%;
    }

    #point .merit_list li img {
        width: 80%;
    }

    #about .section_title {
        margin-bottom: 20px;
    }

    #about .title_comment {
        font-size: 12px;
        line-height: 16px;
        margin-bottom: 40px;
    }

    #about .title_comment img {
        width: 140px;
        margin: 8px 0;
    }


    #about .flow_content img {
        width: 80px;
    }

    #about .flow_content .flow_title {
        padding: 10px 0;
    }

    #about .about_illust1,
    #about .about_illust2 {
        width: 80px;
        top: 15%;
    }

    #about .about_illust1 {
        right: 75%;
    }

    #about .about_illust2 {
        left: 75%;
    }

    #goods .section_title {
        line-height: 50px;
    }

    #goods .goods_list {
        flex-direction: column;
    }

    #goods .goods_list li {
        width: 100%;
        margin-bottom: 20px;
    }

    #question .question_container {
        margin-bottom: 30px;
    }

    #voice .comment_contener .comment_title img {
        width: 30px;
    }

    #question .question_container .question_title {
        padding: 10px 20px;
        margin-bottom: 10px;
    }

    #question .question_container .question_title .question_title_text {
        font-size: 12px;
    }

    #question .question_container .question_text {
        padding: 0 20px;
    }

    #footer {
        padding-top: 20px;
    }

    #footer .footer_logo {
        margin-bottom: 20px;
    }

    #footer .footer_logo img {
        width: 120px;
    }

}

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


    #about .title_comment {
        margin-bottom: 20px;
    }

    #about .about_illust1,
    #about .about_illust2 {
        position: initial;
        margin-bottom: 40px;
    }
}