@charset "utf-8";

/*
************************************************************************
* 有料オプション
************************************************************************
*/
.option-list
{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;

    margin:-1em;
}
.option-list > .option-list-item
{
    width:calc(25% - 2em);
    margin:1em;
    position: relative;
}
.option-list > .option-list-item:hover
{
    text-decoration:none;
}
.option-list > .option-list-item .image
{
    border-radius:0.5em;
    border-radius:0.5em;
    overflow:hidden;
}
.option-list > .option-list-item .title
{
    margin-top:1.0em;
    margin-bottom: 1.0em;
    line-height:1;
}
.option-list > .option-list-item .sub-title
{
    margin-top:0.5em;
    line-height:1;
    font-size:1.2rem;
    font-weight:normal;
}
.option-list > .option-list-item .price
{
    line-height:1;
    margin-top:0.5em;
    margin-bottom: 0.5em;
}
.option-list > .option-list-item .detail a
{
    text-decoration: none;
    border-bottom: 1px solid #000;
    font-size: 1.4rem;
}
.option-list > .option-list-item .detail:hover {
    border-bottom: none;
}
.option-list > .option-list-item div.detail:after
{
    content: " > ";
}
.option-list > .option-list-item .title > span
{
    font-size:1.6rem;
    font-weight:bold;
}
.option-list > .option-list-item .title > span.sub
{
    font-size:1.2rem;
    font-weight:normal;
}
.option-list > .option-list-item .price > span
{
    font-size:2.0rem;
    font-weight:bold;
    line-height:1;
}
.option-list > .option-list-item .price > span.sub,
.option-list > .option-list-item .price > span.sub2
{
	display: block;
    font-size:1.2rem;
    font-weight:normal;
    margin-right: 0.5em;
    line-height: 1;
}
.option-list > .option-list-item .price > span.sub2{
	display:inline;
}
.option-list > .option-list-item .price .yen
{
    font-size:1.6rem;
    font-weight:bold;
    line-height:1;
}
.option-list > .option-list-item .label
{
    position: absolute;
    right: 6px;
    top: 6px;
    width: 75px;
    text-align: center;
    background-color: #bca53c;
    font-weight: bold;
    font-size: 1.4rem;
    color: #fff;
    border-radius: 0.5em;
    /*text-indent: 0.5em;*/
}
.option-list > .option-list-item .label.rank1 {
	background-color: #d3bc46;
}
.option-list > .option-list-item .label.rank2 {
	background-color: #8c9ca1;
}
.option-list > .option-list-item .label.rank3 {
	background-color: #c67a47;
}


/* == ブレークポイント ==========================================================*/
@media screen and (max-width: 1100px) {
    .option-list > .option-list-item
    {
        width:calc(33.33333% - 2em);
    }
}
/* == スマートフォンサイズ ======================================================*/
@media screen and (max-width: 767px) {
    .option-list > .option-list-item
    {
        width:calc(50% - 2em);
    }
    .option-list > .option-list-item .title > span
    {
        font-size:2.6rem;
    }
    .option-list > .option-list-item .title > span.sub
    {
        font-size:2.0rem;
    }
    .option-list > .option-list-item .sub-title {
        display: inline;
    }
    .option-list > .option-list-item .sub-title
    {
        font-size:2.0rem;
    }
    .option-list > .option-list-item .price > span
    {
        font-size:3.2rem;
    }

    .option-list > .option-list-item .price .yen
    {
        font-size:2.4rem;
    }
    .option-list > .option-list-item .price > span.sub
    {
        font-size:2.0rem;
    }
	.option-list > .option-list-item .price > span.sub2 {
		font-size: 1em;
		line-height: 1.4;
}
    .option-list > .option-list-item .detail a
    {
        font-size: 2.40rem;
    }
    .option-list > .option-list-item .label
    {
        right: 0.5em;
        top: 0.5em;
        /*width: 10vw;*/
		width: 45px;
        font-size: 1.8rem;
    }
}