@charset "utf-8";
/* CSS Document */

/* hover時の枠線装飾処理 @ border-deco シリーズ */
/*  命名規則 : border-deco[幅]x[高さ]c[色番号] */
/* 使用例:)
<p>test01.jpg(220x220) と test02(260x220) を並べ、hover時に opacityクラスのみ透過し枠線表示</p>
<a href="#" class="border-deco480x220c1">
    <img class="opacity" src="test01.jpg"><img src="test02.jpg"><span></span>
</a>
*/
    /* border-deco480x220c1 : 色 #0E6EB8 , 480px x 220px */
        a.border-deco480x220c1,a.border-deco480x220c1 span{
            width: 480px;   /* width @リンク対象範囲 */
            height: 220px;  /* height @リンク対象範囲 */
        }
        a.border-deco480x220c1 {
            position: relative;
        }
        a.border-deco480x220c1 span{
            position: absolute;
            top: 0; left:0;
            box-sizing: border-box;
        }
        a.border-deco480x220c1{
            display: inline-block;
            background-color: #E3E1DC;  /* 透過時の背景色 */
            border-style: none;
        }
        .border-deco480x220c1 span{
            position: absolute;
            top: 0; left: 0;
            background-color: transparent;
            border-color: transparent;
            opacity: 0.0;
            transition: border 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0s;
        }
        a.border-deco480x220c1:hover img.opacity {
            opacity: 0.5;   /* 画像の透明度 */
        }
        a.border-deco480x220c1:hover span{
            border: solid 8px #0E6EB8; /* 枠線の色 */
            opacity: 0.5;   /* 枠線の透明度 */
        }
    /* border-deco220x220c1 : 色 #0E6EB8 , 220px x 220px */
        a.border-deco220x220c1,a.border-deco220x220c1 span{
            width: 220px;   /* width @リンク対象範囲 */
            height: 220px;  /* height @リンク対象範囲 */
        }
        a.border-deco220x220c1 {
            position: relative;
        }
        a.border-deco220x220c1 span{
            position: absolute;
            top: 0; left:0;
            box-sizing: border-box;
        }
        a.border-deco220x220c1{
            display: inline-block;
            background-color: #E3E1DC;  /* 透過時の背景色 */
            border-style: none;
        }
        .border-deco220x220c1 span{
            position: absolute;
            top: 0; left: 0;
            background-color: transparent;
            border-color: transparent;
            opacity: 0.0;
            transition: border 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0s;
        }
        a.border-deco220x220c1:hover img.opacity {
            opacity: 0.5;   /* 画像の透明度 */
        }
        a.border-deco220x220c1:hover span{
            border: solid 8px #0E6EB8; /* 枠線の色 */
            opacity: 0.5;   /* 枠線の透明度 */
        }

    /* border-deco480x220c2 : 色 #1B1464 , 480px x 220px */
        a.border-deco480x220c2,a.border-deco480x220c2 span{
            width: 480px;   /* width @リンク対象範囲 */
            height: 220px;  /* height @リンク対象範囲 */
        }
        a.border-deco480x220c2 {
            position: relative;
        }
        a.border-deco480x220c2 span{
            position: absolute;
            top: 0; left:0;
            box-sizing: border-box;
        }
        a.border-deco480x220c2{
            display: inline-block;
            background-color: #E3E1DC;  /* 透過時の背景色 */
            border-style: none;
        }
        .border-deco480x220c2 span{
            position: absolute;
            top: 0; left: 0;
            background-color: transparent;
            border-color: transparent;
            opacity: 0.0;
            transition: border 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0s;
        }
        a.border-deco480x220c2:hover img.opacity {
            opacity: 0.5;   /* 画像の透明度 */
        }
        a.border-deco480x220c2:hover span{
            border: solid 8px #1B1464; /* 枠線の色 */
            opacity: 0.5;   /* 枠線の透明度 */
        }

    /* border-deco220x440c2 : 色 #1B1464 , 220px x 440px */
        a.border-deco220x440c2,a.border-deco220x440c2 span{
            width: 220px;   /* width @リンク対象範囲 */
            height: 440px;  /* height @リンク対象範囲 */
        }
        a.border-deco220x440c2 {
            position: relative;
        }
        a.border-deco220x440c2 span{
            display: inline-block;
            position: absolute;
            top: 0; left:0;
            box-sizing: border-box;
        }
        a.border-deco220x440c2{
            display: inline-block;
            background-color: #E3E1DC;  /* 透過時の背景色 */
            border-style: none;
        }
        .border-deco220x440c2 span{
            position: absolute;
            top: 0; left: 0;
            background-color: transparent;
            border-color: transparent;
            opacity: 0.0;
            transition: border 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0s;
        }
        a.border-deco220x440c2:hover img.opacity {
            opacity: 0.5;   /* 画像の透明度 */
        }
        a.border-deco220x440c2:hover span{
            border: solid 8px #1B1464; /* 枠線の色 */
            opacity: 0.5;   /* 枠線の透明度 */
        }

    /* border-deco220x220c3 : 色 #ffffff , 220px x 220px */
        a.border-deco220x220c3,a.border-deco220x220c3 span{
            width: 220px;   /* width @リンク対象範囲 */
            height: 220px;  /* height @リンク対象範囲 */
        }
        a.border-deco220x220c3 {
            position: relative;
        }
        a.border-deco220x220c3 span{
            position: absolute;
            top: 0; left:0;
            box-sizing: border-box;
        }
        a.border-deco220x220c3{
            display: inline-block;
            background-color: #E3E1DC;  /* 透過時の背景色 */
            border-style: none;
        }
        .border-deco220x220c3 span{
            position: absolute;
            top: 0; left: 0;
            background-color: transparent;
            border-color: transparent;
            opacity: 0.0;
            transition: border 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0s;
        }
        a.border-deco220x220c3:hover img.opacity {
            opacity: 0.5;   /* 画像の透明度 */
        }
        a.border-deco220x220c3:hover span{
            border: solid 8px #ffffff; /* 枠線の色 */
            opacity: 0.65;   /* 枠線の透明度 */
        }

    /* border-deco220x440c2 : 色 #1B1464 , 231px x 280px */
        a.border-deco220x440c2,a.border-deco220x440c2 span{
            width: 220px;   /* width @リンク対象範囲 */
            height: 440px;  /* height @リンク対象範囲 */
        }
        a.border-deco220x440c2 {
            position: relative;
        }
        a.border-deco220x440c2 span{
            display: inline-block;
            position: absolute;
            top: 0; left:0;
            box-sizing: border-box;
        }
        a.border-deco220x440c2{
            display: inline-block;
            background-color: #E3E1DC;  /* 透過時の背景色 */
            border-style: none;
        }
        .border-deco220x440c2 span{
            position: absolute;
            top: 0; left: 0;
            background-color: transparent;
            border-color: transparent;
            opacity: 0.0;
            transition: border 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0s;
        }
        a.border-deco220x440c2:hover img.opacity {
            opacity: 0.5;   /* 画像の透明度 */
        }
        a.border-deco220x440c2:hover span{
            border: solid 8px #1B1464; /* 枠線の色 */
            opacity: 0.5;   /* 枠線の透明度 */
        }