@charset "utf-8";

/*-----------------------------------
radius
-----------------------------------*/
.list .box,
.pic img,
.blank-link a{
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.more-btm a{
    border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;    
}
/*--Small screens--*/
@media only screen and (max-width: 40em){
    .ttl{
        border-radius: 5px 5px 0 0;
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;  
    }
}

/*-----------------------------------
list
-----------------------------------*/
.list .box{
    position: relative;
    /*background: #F7F7F7;*/
    border: 1px solid #CCC;
}
.ttl{   
    background: #3D8D8B;
    color: #FFF;
}
.ttl a,.ttl a:hover,.ttl a:visited{
    color: #FFF;
    text-decoration: none;
}
.ttl:hover{
    background: #317170;    
}
.ttl h3{
    font-weight: bold;
}
.more{
    position: absolute;
    top: 7px;
    right: 0;
    padding: 5px 15px 5px 38px;
    border-left: 1px dotted #FFF;
    background: url(/static/image/icon/arrow01.png) 13px 8px no-repeat;
    -webkit-background-size: 18px 18px;
    -moz-background-size: 18px 18px;
    -o-background-size: 18px 18px;
    -ms-background-size: 18px 18px;
    background-size: 18px 18px;
}
.more-btm a{
    display: block;
    background: #D3EEEF;
    font-weight: bold;
    text-align: center;
}
.more-btm a,.more-btm a:hover,.more-btm a:visited{
    color: #3D8D8B;
    text-decoration: none;
}
.more-btm a:hover{
    background: #B1E1E2;
}

.blank-link a{
    display: block;
    padding: 5px 35px;
    background-color: #EEEAF7;
    background-image: url(/static/image/icon/arrow03.png),url(/static/image/icon/blank.png);
    background-repeat: no-repeat,no-repeat;
    background-position: 15px 11px, 97% 11px;
    -webkit-background-size: 14px 14px,14px 14px;
    -moz-background-size: 14px 14px,14px 14px;
    -o-background-size: 14px 14px,14px 14px;
    -ms-background-size: 14px 14px,14px 14px;
    background-size: 14px 14px,14px 14px;
}
.blank-link a,.blank-link a:hover,.blank-link a:visited{
    color: #333;
    text-decoration: none;
}
.blank-link a:hover{
    background-color: #E0D9F0;
}


/*--Large screens--*/
@media print, screen and (min-width: 40.063em){
    .list .box{
        margin-bottom: 40px;
        padding: 60px 25px 0;
    }
    .ttl{
        width: 70%;
        position: absolute;
        top: -10px;
        left: -10px;
        padding: 8px 20px;
    }
    .ttl:after {
        content: "";
        position: absolute;
        top:　0;
        left: -8px;
        content: "";
        border: 8px solid transparent;
        border-right-color: #003333 ;
        z-index: -1;
    }
    .ttl h3{
        padding-right: 130px;
        font-size: 125%;
    }
    .summary{
        display: table;
        width: 100%;
        margin-bottom: 20px;
    }
    .pic,
    .txt{
        display: table-cell;
        vertical-align: top;
    }
    .pic{
        width: 130px;
        padding-right: 20px;
    }
    .pic img{
        width: 130px;
    }
    .more-btm a{
        margin: 0 -25px;
        padding: 5px;
    }

    .blank-link{
        float: right;
    }
}

/*--Small screens--*/
@media only screen and (max-width: 40em){
    .list .box{
        margin-bottom: 0.9375em;
        padding: 0.9375em;
    }
    .ttl{
        margin: -0.9375em -0.9375em 0.9375em;
    }
    .ttl h3{
        padding: 10px 130px 10px 15px;
        font-size: 115%;
    }
    .summary{
        margin-bottom: 10px;
    }
    .pic{
        text-align: center;
    }
    .pic img{
        width: 100px;
        margin-bottom: 10px;
    }
    .more-btm a{
        margin: 0 -0.9375em -0.9375em;
        padding: 5px;
    }
}

/*--Medium screens--*/
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
    .ttl{
        width: 100%;
    }
    .ttl h3{
        font-size: 115%;
    }
}

/*-----------------------------------
arekore
-----------------------------------*/
.arekore{
    border: 2px solid #5EBBB9;
}
.arekore h3{
    font-weight: bold;
}
.arkr img{
    width: 278px;
}

/*--Large screens--*/
@media print, screen and (min-width: 40.063em){
    .arekore{
        margin-bottom: 40px;
        padding: 30px;
        background: url(/static/image/common/arekore-bkg.png);
    }
    .arkr{
        margin: -28px 0 15px -28px;
    }
    .arekore h3{
        font-size: 125%;
        margin-bottom: 15px;
    }
}

/*--Small screens--*/
@media only screen and (max-width: 40em){
    .arekore{
        margin-bottom: 0.9375em;
        padding: 0.9375em;
    }
    .arkr{
        margin: -0.9em 0 10px -0.9em;
    }
    .arekore h3{
        font-size: 120%;
        margin-bottom: 10px;
    }
}

/*-----------------------------------
clear
-----------------------------------*/
.txt
{
    display: block;
    min-height: 1%;
}
.txt:after
{
    clear: both;
    content:".";
    display: block;
    height: 0;
    visibility: hidden;
}