/*カード*/

/*SP*/
@media screen and (max-width: 1023px) {
    .textwidget .bento_box{
        font-size: 4vw;
		width: 100%;
	}
}
/*PC*/
@media screen and (min-width: 1024px) {
	.textwidget .bento_box{
        font-size: min(28px,2.8vw);
		width: min(100%,644px);
        
    }
}
/*共通*/
.textwidget .bento_box{
    padding: .75em .5em .5em;
    border: solid 1px #666;
    border-radius: .4em;
    box-sizing: border-box;
	position: relative;
    margin: 0 auto .5em auto;
}
.bento_box .top_text,
#main-contents .bento_box .top_text{
    width: 100%;
    margin: auto;
    padding: .2em .4em;
    font-size: .9em;
    font-weight: bold;
    border-radius: .2em;
    box-shadow: 0px .08em 0px #ccc;
    box-sizing: border-box;
}
.bento_box .bento_inner,
#main-contents .bento_box .bento_inner{
    width: 100%;
    margin: .3em auto 0 auto;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}
.bento_box .left,
#main-contents .bento_box .left{
    width: 38%;
    float: none;
    margin: 0 !important;
}
.bento_box .left .name{
    padding: .2em 0;
    font-size: 1em;
    font-weight: bolder;
    line-height: 1;
}
.bento_box .left .banner,
#main-contents .bento_box .left .banner{
    width: 100%;
}
.bento_box .left .spec,
#main-contents .bento_box .left .spec{
    width: 100%;
    margin: .5em 0 0 0;
}
.bento_box .left .spec table,
#main-contents .bento_box .left .spec table{
    width: 100%;
    font-size: .5em;
    margin: 0;
    border-collapse:collapse;
}
.bento_box .left .spec table tr th,
#main-contents .bento_box .left .spec table tr th{
    width: 40%;
    padding: .4em 0;
    font-size: 1em;
    border: solid 1px #ccc;
    background: #fde7db;
    background-color: #fde7db;
}
.bento_box .left .spec table tr td,
#main-contents .bento_box .left .spec table tr td{
    padding: .4em 0;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    border: solid 1px #ccc;
}
.bento_box .left .app,
#main-contents .bento_box .left .app{
    display: block;
    position: relative;
    width: 100%;
    margin: .2em 0 0 0;
    padding: .4em 0;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: .75em;
    overflow: hidden;
    border-radius: .15em;
    line-height: 1.5;
    background-image: linear-gradient(0deg, rgba(217, 22, 22, 1), rgba(223, 79, 26, 1));
    box-sizing: border-box;
    transition: 300ms;
    text-decoration: none;
}
.bento_box .left .app::before{
    position: absolute;
    content: '';
    display: inline-block;
    top: -6em;
    left: 0;
    width: 1em;
    height: 100%;
    background-color: #fff;
    transition: 300ms;
    animation: shinyshiny 2.5s ease-in-out infinite;
}
.bento_box .left .pr-name,
#main-contents .bento_box .left .pr-name{
    width: 100%;
    margin: .08em 0 0 0;
    font-size: .3em;
    font-weight: bold;
    text-align: center;
}
.bento_box .right{
    width: 60%;
    float: none;
    margin: 0 !important;
}
#main-contents .bento_box .right{
    width: 60%;
}
.bento_box .right ul.tag,
#main-contents .bento_box .right ul.tag{
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 1em;
    list-style: none;
}
.bento_box .right ul.tag li,
#main-contents .bento_box .right ul.tag li{
    width: 23%;
    margin: 0 0 .3em 0;
    padding: 0;
    background: none;
}
.bento_box .right ul.tag li img{
    width: 100%;
}
.bento_box .right .conveni{
    margin: 0 0 0 0;
}
.bento_box .right .conveni .midashi{
    padding: .05em;
    color: #333;
    font-size: .5em;
    font-weight: bold;
    text-align: center;
    border: solid 1px #ccc;
    border-radius: .35em .35em 0 0;
    background: #fcfae2;
    box-sizing: border-box;
}
.bento_box .right .conveni ul.inner,
#main-contents .bento_box .right .conveni ul.inner{
    display: flex;
    justify-content: space-around;
    margin: 0;
    padding: .15em;
    font-size: 1em;
    list-style: none;
    border-right: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    border-left: solid 1px #ccc;
    border-radius: 0 0 .175em .175em;
    background: #fcfae2;
    box-sizing: border-box;
}
.bento_box .right .conveni ul.inner li,
#main-contents .bento_box .right .conveni ul.inner li{
    margin: 0;
    padding: 0;
    margin-bottom: 0;
    width: 1.6em;
}
.bento_box .right .point{
    margin: .25em 0 0 0;
    border-radius: .3em;
    border: solid 3px #ddc17a;
}
.bento_box .right .point ul{
    margin: 0;
    padding: .08em;
    list-style: none;
}
.bento_box .right .point ul li,
#main-contents .bento_box .right .point ul li{
    margin: 0px .66em;
    padding: .33em 0 .33em 1.75em;
    font-size: .57em;
    font-weight: bold;
    color: #111;
    line-height: 1.2;
    border-bottom: dashed 1px #ccc;
    background: url("../images/productCard/check2.png") no-repeat left 0 top 45% / 8%;
}
.bento_box .right .point ul li:nth-child(4){
    border: none;
}
.bento_box .right .comment p,
#main-contents .bento_box .right .comment p{
    margin: 1px 0 0 0;
    font-size: .35em;
    font-weight: bold;
}
.tt-aif{color: #fff;background: #dd3e50;}
.na-aif{color: #dd3e50;}

.tt-pro{color: #fff;background: #00479d;}
.na-pro{color: #00479d;}

.tt-aco{color: #fff;background: #dc0000;}
.na-aco{color: #dc0000;}

.tt-mob{color: #fff;background: #004831;}
.na-mob{color: #004831;}

@-webkit-keyframes shinyshiny {
	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; }
}