@charset "UTF-8";

/* CSS Document */

@import url("reset.css");

@import url("fonts.css");



html {

    box-sizing: border-box;

}



*,

*:before,

*:after {

    box-sizing: inherit;

}



body {

    text-align: center;

    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

    font-size: 18px;

    line-height: 190%;

    color: #333333;

    background: #f3f1f1;

}



a:hover img {

    opacity: 0.8;

    filter: alpha(opacity=60);

    -ms-filter: "alpha( opacity=60 )";

}



input:hover {

    opacity: 0.8;



    /* IE */

    filter: alpha(opacity=8);

}



.clear {

    clear: both;

}



.timer {

    margin: 0px auto 0px auto;

    padding: 10px 0px 20px 0px;

    font-size: 24px;

    color: #ff2f56;

    text-align: center;

}



.timer2 {

    margin: 0px auto 10px auto;

    padding: 0px;

    font-size: 30px;

    color: #fb0000;

    text-align: center;

    font-weight: bold;

}



/* button start  */

.anihv button {

    width: 558px;

    padding: 13px 5px 10px;

    border: 3px double #fff;

    color: #fff;

    font-size: 160%;

    cursor: pointer;

    border-radius: 2em;

    animation: regbtngreen2 0.8s infinite alternate;

}



.anihv button {

    font-size: 28px;

    font-weight: bold;

    margin-top: 10px;

}



.fa {

    display: inline-block;

    font-size: inherit;

    text-rendering: auto;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



@-webkit-keyframes regbtngreen2 {

    from {

        color: #fff;

        background-image: linear-gradient(#298A08, #04d339);

        box-shadow: 0 0 2px 2px #74DF00;

        /*

box-shadow:0 0 2px 2px #74DF00;

text-shadow:0 0 2px #fff;*/

    }



    99%,

    to {

        color: #fff;

        background-image: linear-gradient(#04d339, #298A08);

        box-shadow: 0 0 4px 8px #cfc;

        /*

box-shadow:0 0 4px 8px #cfc;

text-shadow:0 0 2px #fff;*/

    }

}



/*

.fa-youtube-play:before{

content:"\f16a";

box-sizing: border-box;

}

*/

/*  button end */

/*s

@-webkit-keyframes regbtngreen2{

from{

color:#fcc;

background-image:linear-gradient(#090,#0f0);

box-shadow:0 0 2px 2px olive;

text-shadow:0 0 2px #999;

}

99%,to{

color:#fff;

background-image:linear-gradient(#0f0,#0c0);

box-shadow:0 0 4px 8px #cfc;

text-shadow:0 0 3px #fcc;

}}

*/

.padding40 {

    padding: 40px 0px 40px 0px !important;

}



.paddingtop40 {

    padding-top: 40px !important;

}



.padding50 {

    padding: 50px 0px 10px 0px !important;

}



.margin0 {

    margin: 0px auto 0px auto !important;

}



.margintop0 {

    margin: 0px auto 40px auto !important;

    padding: 40px 0px 20px 0px !important;

}



.margin30 {

    margin: 0px auto 30px auto !important;

}



div#headline .padding15 {

    padding: 15px 0px 15px 0px;

}



/*******  button end *******/



/*******  headline *******/

div#headline {

    width: 100%;

    margin: 0px auto 0px auto;

    padding: 0px 0px 0px 0px;

    background: #155db9 url(../image/bg.jpg) no-repeat top center;

    text-align: center;

}



div#headline.other {

    background: #000 url(../image/bg_other.jpg) no-repeat top center;

}



div#headline h1 {

    margin: 0px auto 0px auto;

    padding: 10px 0px 40px 0px;

    text-align: center;

    font-size: 0;

    line-height: 0;

}



div#headline h2 {

    margin: 0px auto 0px auto;

    padding: 0px 0px 30px 0px;

    text-align: center;

    font-size: 0;

    line-height: 0;

}



div#headline h4 {

    margin: 0px auto 0px auto;

    padding: 0px 0px 0px 0px;

    text-align: center;

    line-height: 0;

}



div#headline .banner01 {

    width: 100%;

    margin: 0px auto 30px auto;

    padding: 15px 0px 15px 0px;

    line-height: 0;

    background: url(../image/banner02_bg.jpg) repeat top center;

}



div#headline .banner02 {

    width: 100%;

    margin: 0px auto 0px auto;

    padding: 50px 0px 50px 0px;

    background: url(../image/banner02_bg.jpg) repeat top center;

    font-size: 0;

    line-height: 0;

}



div#headline .black {

    background: #000;

}



div#headline .banner03 {

    width: 100%;

    margin: 0px auto 0px auto;

    padding: 30px 0;

    background: #000000;

    font-size: 18px;

    font-weight: bold;

    color: #ffffff;

    line-height: 0;

}





/*******  banner *******/

div#wrapper .banner02 {

    width: 100%;

    margin: 0px auto 40px auto;

    padding: 60px 0px 1px 0px;

    background: url(../image/banner02_bg.jpg) repeat top center;

}



div#wrapper {

    width: 1000px;

    margin: 0px auto 0px auto;

    padding: 50px 0px 40px 0px;

    text-align: center;

    background: #ffffff;

}



div#wrapper .padding0 {

    padding: 0px;

}



div#wrapper h2 {

    margin: 0px auto 30px auto;

    padding: 0px 0px 0px 0px;

    text-align: center;

    line-height: 0;

}



div#wrapper h3 {

    margin: 0px auto 20px auto;

    padding: 0px 0px 0px 0px;

    text-align: center;

    font-size: 0;

    line-height: 0;

}





div#wrapper h4 {

    margin: 0px auto 30px auto;

    padding: 0px 0px 5px 0px;

    text-align: center;

    font-size: 24px;

    font-weight: bold;

    border-bottom: 2px solid #313131;

    box-sizing: border-box;

}



div#wrapper h5 {

    margin: 0px auto 50px auto;

    padding: 0px 0px 0px 0px;

    text-align: center;

    font-size: 0;

    line-height: 0;

}



div#wrapper h6 {

    margin: 0px auto 0px auto;

    padding: 0px 0px 0px 0px;

    text-align: center;

    line-height: 0;

}



div#wrapper .banner01 {

    width: 100%;

    margin: 0px auto 40px auto;

    padding: 45px 0px 10px;

    background: url(../image/banner01_bg.jpg) repeat top center;

}



.box01 {

    width: 700px;

    margin: 0px auto 40px auto;

    padding: 0px;

    text-align: left;

}



.box01 p {

    margin: 0px 0px 18px 0px;

    padding: 0px;

}



div#wrapper .box01in {

    height: 200px;

    overflow-y: scroll;

}



div#wrapper .box02 {

    max-width: 100%;

    width: 860px;

    margin: 0px auto 40px auto;

    padding: 0px;

    text-align: center;

}



div#wrapper .box02 p {

    margin: 0px 0px 18px 0px;

    padding: 0px;

}



div#wrapper .box02 img {

    max-width: 100%;

}



div#wrapper .box03 {

    max-width: 620px;

    width: 95%;

    margin: 0px auto 30px auto;

    padding: 20px 0px 0px 0px;

    text-align: left;

    font-size: 15px;

}



div#wrapper .box03 p {

    margin: 0px 0px 18px 0px;

    padding: 0px;

}



div#wrapper .box04 {

    width: 90%;

    margin: 0px auto 40px auto;

    padding: 30px 0px 0px 0px;

    background: url("../image/blackout.png") no-repeat top center;

    z-index: 100;

}



div#wrapper .box05 {

    width: 730px;

    margin: 0px auto 40px auto;

    padding: 0px;

    text-align: left;

    z-index: 1;

    filter: alpha(opacity=30);

    -moz-opacity: 0.30;

    opacity: 0.30;

}



div#wrapper .box05 p {

    margin: 0px 0px 18px 0px;

    padding: 0px;

}



div#wrapper .img_left {

    float: left;

    margin: 0px 20px 10px 0px;

    padding: 0px;

}



div#wrapper .img_left2 {

    float: left;

    margin: 0px 0px 10px 0px;

    padding: 0px;

}



div#wrapper .img_left3 {

    float: left;

    margin: 0px 20px 10px 0px;

    padding: 0px;

}



div#wrapper .img_right {

    float: right;

    margin: 0px 0px 20px 10px;

    padding: 0px;

}



div#wrapper .img_right p {

    margin: 0px 0px 10px 0px;

    padding: 0px;

}



div#wrapper .img_right2 {

    width: 500px;

    float: right;

    margin: 0px 0px 20px 10px;

    padding: 0px;

}



div#wrapper .frame01 {

    width: 860px;

    margin: 0px auto 50px auto;

    padding: 30px 0px 20px;

    border: 10px solid #eeeeee;

    background: #fffef4;

    box-sizing: border-box;

}

div#wrapper .frame01_img01 {
    background: #fffef4 url(../image/voice_medal01.png) no-repeat top left;
}

div#wrapper .frame01_img01_1 {
    background: #fffef4 url(../image/voice_medal01_1.png) no-repeat top left;
}

div#wrapper .frame01_img01_2 {
    background: #fffef4 url(../image/voice_medal01_2.png) no-repeat top left;
}

div#wrapper .frame01_img01_3 {
    background: #fffef4 url(../image/voice_medal01_3.png) no-repeat top left;
}


div#wrapper .yellow {

    border: 10px solid #fcfae1;

}

div#wrapper .frame_voice01 {
    float: left;
    width: 420px;
    margin: 0px auto 30px 70px;
    padding: 0px;
    box-sizing: border-box;
}

div#wrapper .frame_voice02 {
    float: right;
    width: 420px;
    margin: 0px 70px 30px auto;
    padding: 0px;
    box-sizing: border-box;
}


div#wrapper .voice01 {

    width: 860px;

    margin: 0px auto 50px auto;

    padding: 50px 0px 1px;

    border-left: 10px solid #eeeeee;

    border-right: 10px solid #eeeeee;

    border-bottom: 10px solid #eeeeee;

    background: #fffef4;

    box-sizing: border-box;

}



div#wrapper .voice01_ttl01 {

    margin: 0px auto 20px auto;

    padding: 0px 0px 10px 0px;

    border-bottom: 1px solid #535353;

    text-align: center;

    box-sizing: border-box;

    font-size: 28px;

    font-weight: bold;

}



div#wrapper .voice01_ttl02 {

    margin: 0px auto 30px auto;

    padding: 0px;

    text-align: right;

    box-sizing: border-box;

    font-size: 20px;

    font-weight: bold;

}

div#wrapper .voice01_ttl03 {

    margin: 0px auto 10px auto;

    padding: 0px 0px 10px 0px;

    border-bottom: 1px solid #535353;

    text-align: center;

    box-sizing: border-box;

    font-size: 28px;

    font-weight: bold;

}

div#wrapper .voice01_ttl04 {
    margin: 0px auto 10px auto;
    padding: 0px 0px 10px 0px;
    text-align: center;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: bold;
    line-height: 120%;

}

div#wrapper .voice01_ttl04 image {
    margin: 0px auto 10px auto;
    padding: 0px 0px 10px 0px;
    text-align: center;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: bold;
    line-height: 140%;

}


div#wrapper .voice01_ttl05 {
    margin: 0px auto 7px auto;
    padding: 0px;
}



div#wrapper .voice01_box01 {

    width: 700px;

    margin: 0px auto 0px auto;

    padding: 0px;

    text-align: left;

}



div#wrapper .voice01_box01 p {

    margin: 0px 0px 18px 0px;

    padding: 0px;

}

div#wrapper .voice01_box02 {

    width: 700px;

    margin: 0px auto 0px auto;

    padding: 0px;

    text-align: left;

}



div#wrapper .cart {

    width: 100%;

    margin: 0px auto 50px auto;

    padding: 45px 0px 25px 0px;

    background: #000000 url(../image/cart_bg.jpg) no-repeat top center;

}



div#wrapper .cart_ttl {

    margin: 0px auto 30px auto;

    padding: 10px 0px 0px 0px;

    text-align: center;

    font-size: 0;

    line-height: 0;

}



.cart_in {

    width: 860px;

    margin: 0px auto 30px auto;

    padding: 30px 0px 10px 0px;

    background: #ffffff;

    border: 10px solid #f2efdd;

    box-sizing: border-box;

}



.cart_in .box01 {

    width: 790px;

    margin: 0px auto 20px auto;



}



.banner02 .cart_in {

    margin: 0px auto;

}



div#wrapper .profile {

    width: 860px;

    margin: 0px auto 50px auto;

    padding: 45px 0px 10px 0px;

    border: 10px solid #eeeeee;

    background: url(../image/profile_bg.jpg) repeat top center;

    box-sizing: border-box;

}



div#wrapper .profile_ttl {

    margin: 0px auto 18px auto;

    padding: 0px 0px 0px 0px;

    text-align: center;

}



div#wrapper .profile .box01 {

    margin: 0px auto 0px auto;

    padding: 0px 0px 0px 0px;

    text-align: left;

}



div#wrapper .frame01in {

    margin: 0px auto 30px auto;

    padding: 0px;

    background: #ffffff;

    box-sizing: border-box;

}



div#wrapper .frame01in2 {

    width: 730px;

    margin: 0px auto 30px auto;

    padding: 25px 0px 10px 0px;

    border: 10px solid #e8e1be;

    background: #ffffff;

    box-sizing: border-box;

}



div#wrapper .frame01_ttl {

    margin: 0px auto 18px auto;

    padding: 0px 0px 3px 0px;

    border-bottom: 1px solid #313131;

    box-sizing: border-box;

    font-size: 18px;

    font-weight: bold;

}



div#wrapper .frame01_ttl02 {

    margin: 0px auto 25px auto;

    padding: 12px 0px 12px 20px;

    border-left: 10px solid #7d7d7d;

    text-align: left;

    background: #eeeeee;

    font-size: 0;

    line-height: 0;

    box-sizing: border-box;

}



div#wrapper .frame01 .box01 {

    margin: 0px auto 0px auto;

    padding: 0px 0px 0px 0px;

    text-align: left;

}



div#wrapper .endin {

    position: relative;

    padding: 0px 0px 1px 0px;

}



div#wrapper .endin:after {

    content: "";

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.7);

    position: absolute;

    top: 0;

    left: 0;

}



div#wrapper .end {

    position: relative;

    padding: 0;

}



div#wrapper .end:before {

    content: "";

    width: 457px;

    height: 203px;

    display: inline-block;

    background-image: url(../image/soldout.png);

    background-size: contain;

    vertical-align: middle;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    z-index: 1;

}



/*

div#wrapper .end:before {

content: "";

display: inline-block;

width: 457px;

height: 203px;

background-image: url(../image/soldout.png);

background-size: contain;

vertical-align: middle;

}

*/





div#wrapper .ul01 {

    margin: 0px auto 18px auto;

    padding: 0px;

}



div#wrapper .ul01 li {

    margin: 0px auto 0px 1em;

    padding: 0px;

    list-style-type: disc;

    list-style-position: outside;

    text-align: left;

}



div#wrapper .ul02 {

    width: 750px;

    margin: 0px auto 0px auto;

    padding: 0px;

    font-size: 24px;

    font-weight: bold;

    text-align: left;

}



div#wrapper .ul02 li {

    margin: 0px 0px 0px 0px;

    padding: 7px 0px 7px 45px;

    background: url(../image/icon01.png) no-repeat left 10px;

    border-bottom: 1px solid #E5E5E5;

}



div#wrapper .img_change01 {

    display: none;

}



div#wrapper .grid2 {

    display: grid;

    max-width: 860px;

    margin: 0px auto 40px auto;

    padding: 20px;

    text-align: left;

    grid-template-columns: 1fr 1fr;

    gap: 20px 20px;

    background: #f3f1f1;

    box-sizing: border-box;

}



div#wrapper .grid_item {

    width: 100%;

    margin: 0px auto;

    padding: 20px;

    background: #fff;

    box-sizing: border-box;

}



div#wrapper .grid_item img {

    width: 100%;

}



div#wrapper .table01 {

    width: 96%;

    margin: 0px auto 8px auto;

    text-align: center;

    box-sizing: border-box;

}



div#wrapper .table02 {

    width: 100%;

    margin: 0px auto 30px auto;

    font-size: 14px;

    line-height: 140%;

    text-align: center;

    border-top: 1px solid #dddddd;

    border-left: 1px solid #dddddd;

    background: #FFFFFF;



}



div#wrapper .table02 p {

    padding: 0px;

    margin: 0px auto 10px auto;

}



div#wrapper .table02 th {

    padding: 6px 15px;

    text-align: center;

    vertical-align: middle;

    color: #333;

    font-weight: bold;

    border-right: 1px solid #dddddd;

    border-bottom: 1px solid #dddddd;

    background: #f2f6f8;

}



div#wrapper .table02 td {

    padding: 4px 15px;

    text-align: left;

    border-right: 1px solid #dddddd;

    border-bottom: 1px solid #dddddd;

}



div#wrapper .table01 td {

    padding: 4px 4px;

    text-align: center;

}



div#footer_links {

    width: 100%;

    margin: 0px auto 0px auto;

    padding: 20px 0px 10px 0px;

    border-bottom: 1px solid #eeeeee;

    text-align: center;

    font-size: 12px;

    color: #535353;

    background: #e5e5e5;

}



div#footer_links a {

    color: #535353;

    text-decoration: none;

}



div#footer {

    width: 100%;

    margin: 0px auto 0px auto;

    padding: 15px 0px;

    text-align: center;

    font-size: 12px;

    color: #535353;

    background: #bfbfbf;

}



.iframe_wrap {

    margin: 0px auto 10px auto;

    padding: 0px;

    text-align: center;

}



.pconly {

    display: block;

}



.sponly {

    display: none;

}



/*****    form   *****/

.kiyaku {

    width: 700px;

    margin: 0 auto 40px;

    height: 320px;

    overflow: auto;

    border: 1px solid #eee;

    background: #FCFCFC;

    line-height: 135%;

}



.kiyaku2 {

    margin: 0px auto 20px auto;

    padding: 18px 30px 0px 30px;

    border: 3px solid #ff0000;

    color: #ff0000;

    line-height: 155%;

    font-weight: bold;

    font-size: 16px;

}



.form-item {

    margin: 0 auto 20px;

    padding: 0px 0px 20px;

    border-bottom: 1px solid #eee;

}



.form-item-name {

    display: block;

    font-weight: bold;

}



.m-form-text {

    height: 2.4em;

    width: 100%;

    padding: 0 16px;

    border-radius: 4px;

    border: none;

    box-shadow: 0 0 0 1px #ccc inset;

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    box-sizing: border-box;

}



.m-form-text:focus {

    outline: 0;

    box-shadow: 0 0 0 2px rgb(33, 150, 243) inset;

}



.m-form-radio input {

    position: absolute;

    white-space: nowrap;

    width: 1px;

    height: 1px;

    overflow: hidden;

    border: 0;

    padding: 0;

    clip: rect(0 0 0 0);

    clip-path: inset(50%);

    margin: -1px;

}



.m-form-radio-name {

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    color: #666;

}



.m-form-radio-name:before {

    content: "";

    display: inline-block;

    width: 1em;

    height: 1em;

    border: 1px solid #ccc;

    border-radius: 50%;

    margin-right: 4px;

    flex-shrink: 0;

}



.m-form-radio input:checked + .m-form-radio-name:before {

    border: 0.3em solid rgb(33, 150, 243);

}



.m-form-radio input:checked + .m-form-radio-name {

    color: rgb(33, 150, 243);

}



.m-form-radio input:focus + .m-form-radio-name {

    color: rgb(33, 150, 243);

}



.m-form-radio input.focus-visible + .m-form-radio-name .m-form-radio-text {

    background: linear-gradient(transparent 90%, rgba(33, 150, 243, 0.3) 90%);

}





.m-form-textarea {

    height: 200px;

    display: block;

    width: 100%;

    padding: 4px 16px;

    border-radius: 4px;

    border: none;

    box-shadow: 0 0 0 1px #ccc inset;

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    resize: vertical;

}



.m-form-textarea:focus {

    outline: 0;

    box-shadow: 0 0 0 2px rgb(33, 150, 243) inset;

}



.entry_btn {

    width: 350px;

    position: relative;

    display: inline-block;

    padding: 14px 17px 8px 17px;

    border: none;

    text-decoration: none;

    font-size: 22px;

    color: #FFF;

    background: #fd9535;

    border-bottom: solid 5px #d27d00;

    border-radius: 4px;

    font-weight: bold;

    cursor: pointer;

}





.entry_btn:hover {

    opacity: 0.6
}



.with-validate {

    display: block;

    position: relative;

}



.with-validate label.error {

    display: inline-block;

    position: absolute;

    z-index: 5;

    left: -5px;

    bottom: 100%;

    margin-bottom: 10px;

    background-color: #c3272a;

    color: #ffffff;

    padding: 5px 10px;

    font-size: 12px;

    border-radius: 4px;

}



.with-validate label.error::before {

    content: "";

    background-color: transparent;

    position: absolute;

    top: 100%;

    margin: 0;

    left: 20px;

    width: 0;

    height: 0;

    border-width: 10px;

    border-style: solid;

    border-color: #c3272a transparent transparent;

}







.reflection-img {

    width: 704px;

    height: 110px;

    margin: 0px auto 20px;

    text-align: center;

    position: relative;

    overflow: hidden;

    border-radius: 10px;

}



.reflection {

    height: 100%;



    width: 30px;



    position: absolute;

    top: -180px;

    left: 0;

    background-color: #fff;

    opacity: 0;

    transform: rotate(45deg);

    animation: reflection 5s ease-in-out infinite;

    -webkit-transform: rotate(45deg);

    -webkit-animation: reflection 5s ease-in-out infinite;

    -moz-transform: rotate(45deg);

    -moz-animation: reflection 5s ease-in-out infinite;

    -ms-transform: rotate(45deg);

    -ms-animation: reflection 5s ease-in-out infinite;

    -o-transform: rotate(45deg);

    -o-animation: reflection 5s ease-in-out infinite;

}



@keyframes reflection {

    0% {

        transform: scale(0) rotate(45deg);

        opacity: 0;

    }



    80% {

        transform: scale(0) rotate(45deg);

        opacity: 0.5;

    }



    81% {

        transform: scale(4) rotate(45deg);

        opacity: 1;

    }



    100% {

        transform: scale(50) rotate(45deg);

        opacity: 0;

    }

}



@-webkit-keyframes reflection {

    0% {

        -webkit-transform: scale(0) rotate(45deg);

        opacity: 0;

    }



    80% {

        -webkit-transform: scale(0) rotate(45deg);

        opacity: 0.5;

    }



    81% {

        -webkit-transform: scale(4) rotate(45deg);

        opacity: 1;

    }



    100% {

        -webkit-transform: scale(50) rotate(45deg);

        opacity: 0;

    }

}



@-moz-keyframes reflection {

    0% {

        -moz-transform: scale(0) rotate(45deg);

        opacity: 0;

    }



    80% {

        -moz-transform: scale(0) rotate(45deg);

        opacity: 0.5;

    }



    81% {

        -moz-transform: scale(4) rotate(45deg);

        opacity: 1;

    }



    100% {

        -moz-transform: scale(50) rotate(45deg);

        opacity: 0;

    }

}



@-ms-keyframes reflection {

    0% {

        -ms-transform: scale(0) rotate(45deg);

        opacity: 0;

    }



    80% {

        -ms-transform: scale(0) rotate(45deg);

        opacity: 0.5;

    }



    81% {

        -ms-transform: scale(4) rotate(45deg);

        opacity: 1;

    }



    100% {

        -ms-transform: scale(50) rotate(45deg);

        opacity: 0;

    }

}



@-o-keyframes reflection {

    0% {

        -o-transform: scale(0) rotate(45deg);

        opacity: 0;

    }



    80% {

        -o-transform: scale(0) rotate(45deg);

        opacity: 0.5;

    }



    81% {

        -o-transform: scale(4) rotate(45deg);

        opacity: 1;

    }



    100% {

        -o-transform: scale(50) rotate(45deg);

        opacity: 0;

    }

}



@-webkit-keyframes pulse {

    from {

        opacity: 1.0;

        /*透明度100%*/

    }



    to {

        opacity: 0.6;

        /*透明度80%*/

    }

}



.btn {

    -webkit-animation-name: pulse;

    /* 実行する名前 */

    -webkit-animation-duration: 0.5s;

    /* 0.5秒かけて実行 */

    -webkit-animation-iteration-count: infinite;

    /* 何回実行するか。infiniteで無限 */

    -webkit-animation-timing-function: ease-in-out;

    /* イーズインアウト */

    -webkit-animation-direction: alternate;

    /* alternateにするとアニメーションが反復 */

    -webkit-animation-delay: 0s;

    /* 実行までの待ち時間 */

}



@media screen and (min-width: 1800px) {



    /* PC用のスタイル記述 */

    div#headline {
        /*
        background-size: cover;
*/
    }

}



@media screen and (min-width: 769px) and (max-width: 950px) {

    img.miniimg {

        display: block;

    }



    img.bigimg {

        display: none;

    }



    img.frame01tab {

        display: block;

    }



    img {

        max-width: 100%;

        width
        /**************/

        : auto;

        height: auto;

        vertical-align: bottom;

    }



    div#headline {

        width: 100%;

    }



    div#wrapper {

        width: 100%;

    }

    div#wrapper .frame_voice01 {
        float: none;
        width: 90%;
        margin: 0px auto 30px auto;
    }

    div#wrapper .frame_voice02 {
        float: none;
        width: 90%;
        margin: 0px auto 30px auto;
    }

}



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



    body {

        text-align: center;

        font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

        font-size: 16px;

        line-height: 180%;

    }



    img.miniimg {

        display: block;

    }



    /* mini\ */

    img.bigimg {

        display: none;

    }



    /* big\ */

    img.frame01tab {

        display: block;

    }



    /* frame01tab\ */

    img {

        max-width: 100%;

        width
        /***/

        : auto;

        height: auto;

        vertical-align: bottom;

    }



    .btn1 {

        width: 100%;

    }



    .btn2 {

        max-width: 85%;

    }



    .btn3 {

        max-width: 75%;

    }



    .timer {

        margin: 0px auto 0px auto;

        padding: 0px;

        font-size: 16px;

        background: #000000;

    }



    .timer2 {

        margin: 0px auto 0px auto;

        font-size: 16px;

    }



    .padding40 {

        padding: 15px 0px !important;

    }



    .paddingtop40 {

        padding-top: 20px !important;

    }



    .padding50 {

        padding: 10px 0px 1px 0px !important;

    }







    div#headline {

        background: none;

    }



    div#headline h1 {

        margin: 0px auto 0px auto;

        padding: 0px 0px 0px 0px;

        text-align: center;

    }



    div#headline h2 {

        margin: 0px auto 10px auto;

        padding: 0px;

        text-align: center;

    }



    div#headline .banner01 {

        margin: 0px auto 0px auto;

        padding: 7px 0px 7px 0px;

    }



    div#headline .banner01 img {

        width: 95%;

    }



    div#headline .banner02 {

        width: 100%;

        margin: 0px;

        padding: 15px 0;

    }



    div#headline .banner02 img {

        width: 92%;

        margin: 0px;

    }



    div#headline .black img {

        width: 100%;

        margin: 0px;

    }



    div#wrapper {

        width: 100%;

        padding: 20px 0px 20px 0px;

    }



    div#wrapper h2 {

        width: 100%;

        margin: 0px auto 20px auto;

        padding: 0px;

        text-align: center;

    }



    div#wrapper h3 {

        margin: 0px auto 15px auto;

        padding: 0px;

        text-align: center;

        width: 90%;

    }



    div#headline h4 {

        width: 100%;

        margin: 0px auto 0px auto;

        padding: 0px;

        text-align: center;

    }





    div#wrapper h4 {

        margin: 0px auto 20px auto;

        font-size: 18px;



    }



    div#wrapper h5 {

        margin: 0px auto 40px auto;

        padding: 0px 0px 0px 0px;

        text-align: center;

    }





    div#wrapper h6,

    div#wrapper .sp90 {

        width: 90%;

    }



    div#wrapper .banner01 {

        width: 100%;

        margin: 0px auto 40px auto;

        padding: 15px 0px 1px;

        background: url(../image/banner01_bg.jpg) repeat top center;

    }



    .box01 {

        width: 90%;

        margin: 0px auto 30px auto;

        padding: 0px;

        text-align: left;

    }



    .box01 p {

        margin: 0px 0px 18px 0px;

        padding: 0px;

    }



    div#wrapper .box02 img {

        max-width: 90%;

    }



    div#wrapper .voice01 .box01 {

        margin: 0px auto 10px auto;

    }

    div#wrapper .frame_voice01 {
        float: none;
        width: 90%;
        margin: 0px auto 30px auto;
    }

    div#wrapper .frame_voice02 {
        float: none;
        width: 90%;
        margin: 0px auto 30px auto;
    }


    div#wrapper .banner02 .box01 {

        margin: 0px auto 1px auto;

    }



    div#wrapper .frame03 .box01 {

        width: 95%;

        margin: 0px auto 1px auto;

    }



    div#wrapper .voice01 {

        width: 90%;

        margin: 0px auto 15px auto;

        padding: 15px 0px 1px 0px;

        border: none;

    }



    div#wrapper .voice01_box01 {

        width: 93%;

        margin: 0px auto 1px auto;

    }



    div#wrapper .voice01_box01 p {

        margin: 0px 0px 10px 0px;

        padding: 0px;

    }



    div#wrapper .voice01 .box01 img {

        width: 100%;

    }



    div#wrapper .voice01_ttl {

        margin: 0px auto 10px auto;

        padding: 5px;

        font-size: 16px;

    }



    div#wrapper .cart {

        width: 100%;

        margin: 0px auto 20px auto;

        padding: 0px 0px 1px 0px;

        background: #000;



    }



    .cart_in {

        width: 90%;

        margin: 0px auto 20px auto;

        padding: 10px 0px 1px 0px;

        background: #ffffff;

        border: 5px solid #f2efdd;

        box-sizing: border-box;

    }



    #headline .cart_in {

        width: 95%;

    }



    div#wrapper .cart_ttl {

        width: 100%;

        margin: 0px auto 0px auto;

        padding: 0px 0px 15px 0px;

        text-align: center;

        font-size: 0;

        line-height: 0;

    }



    .cart_in .box01 {

        width: 95%;

        margin: 0px auto 0px auto;

        padding: 0px;

    }



    .cart_in .box01 p {

        margin: 0px 0px 10px 0px;

        padding: 0px;

    }



    div#wrapper .profile {

        width: 95%;

        margin: 0px auto 40px auto;

        padding: 10px 0px 1px 0px;

        border: 5px solid #eeeeee;

        box-sizing: border-box;

    }



    div#wrapper .profile_ttl {

        width: 95%;

        margin: 0px auto 18px auto;

        padding: 0px 0px 0px 0px;

        text-align: center;

    }



    .margintop0 {

        width: 100%;

        padding: 20px 0px 10px !important;

    }



    div#wrapper .end:before {

        content: "";

        width: 90%;

        height: 30%;

        display: inline-block;

        background-size: 100% auto;

        background-repeat: no-repeat;

    }



    div#wrapper .frame01 {

        width: 90%;

        margin: 0px auto 30px auto;

        padding: 15px 0px 1px;

        border: 4px solid #eeeeee;

        /*

        border: 5px solid #fcfae1;

        */

    }

    div#wrapper .frame01_img01 {
        background-image: none;
    }

    div#wrapper .frame01_img01_1 {
        background-image: none;
    }

    div#wrapper .frame01_img01_2 {
        background-image: none;
    }

    div#wrapper .frame01_img01_3 {
        background-image: none;
    }







    div#wrapper .yellow {

        border: 4px solid #fcfae1;

    }





    div#wrapper .img_left,

    div#wrapper .img_left2 {

        width: 100%;

        float: none;

        margin: 0px auto 18px auto;

        padding: 0px;

        text-align: center;

    }



    div#wrapper .img_left3 {

        display: none;

    }



    div#wrapper .img_right {

        width: 100%;

        float: none;

        margin: 0px auto 18px auto;

        padding: 0px;

        text-align: center;

    }



    div#wrapper .img_left img,

    div#wrapper .img_right img {

        max-width: 65%;

    }



    div#wrapper .img_right2 {

        width: 100%;

        float: none;

        margin: 0px auto 18px auto;

        padding: 0px;

    }



    div#wrapper .frame01 .box01 {

        margin: 0px auto 0px auto;

        padding: 0px 0px 0px 0px;

        text-align: left;

    }





    div#wrapper .ul02 {

        width: 95%;

        margin: 0px auto 10px auto;

        padding: 0px;

        font-size: 16px;

        font-weight: bold;

        text-align: left;

    }



    div#wrapper .ul02 li {

        margin: 0px 0px 0px 0px;

        padding: 5px 0px 5px 30px;

        background: url(../image/icon01_sp.png) no-repeat left 7px;

        border-bottom: 1px solid #E5E5E5;

        line-height: 150%;

    }



    div#wrapper .img_change01 {

        display: block;

        width: 100%;

        margin: 0px auto 18px auto;

        padding: 20px 0px 0px 0px;

        text-align: center;

    }



    div#wrapper .table01 td {

        display: block;

    }



    .sponly {

        display: block;

    }



    .pconly {

        display: none;

    }



    div#wrapper .grid2 {

        display: block;

        width: 100%;

        padding-bottom: 1px;

    }



    div#wrapper .grid_item {

        margin: 0 auto 20px;

    }



    div#wrapper .grid_item img {

        margin: 0 auto 15px;

    }



    div#wrapper .voice01_ttl01 {

        font-size: 18px;

        line-height: 150%;

    }



    div#wrapper .voice01_ttl02 {

        font-size: 16px;

    }



    div#footer_links {

        width: 100%;

        margin: 0px auto 0px auto;

        padding: 7px 0px 5px 0px;

        text-align: center;

        font-size: 12px;

    }



    div#footer_links a {

        text-decoration: none;

    }



    div#footer {

        width: 100%;

        margin: 0px auto 0px auto;

        padding: 15px 0px;

        text-align: center;

        font-size: 12px;

    }



    .iframe_wrap {

        margin: 0px auto 5px auto;

        position: relative;

        width: 100%;

        padding: calc(360 / 640 * 100%) 0 0;

    }



    iframe {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

    }



    .anihv button {

        width: 90%;

        font-size: 20px;

    }



    .reflection-img {

        width: 100%;

        height: 15%;

        margin: 0px auto 10px auto;

        position: relative;

        overflow: hidden;

        border-radius: 5px;

    }



    .reflection {

        height: 90%;

        width: 30px;

        position: absolute;

        top: -180px;

    }



    .kiyaku {

        width: 95%;

        margin: 0 auto 30px;

        padding: 15px 0 0 0;

        height: 235px;

        overflow: auto;

        border: 1px solid #eee;

        background: #FCFCFC;

    }



    .kiyaku2 {

        margin: 0px auto 20px auto;

        padding: 15px 20px 0px 20px;

        border: 3px solid #ff0000;

        color: #ff0000;

        line-height: 155%;

        font-weight: bold;

        font-size: 16px;

    }



    div#wrapper .box03 {

        padding: 0px;

    }



    /******************* form *******************/

    .entry_btn {

        width: 100%;

        font-size: 22px;

    }

}