/* 
HTMLで使用する際のテンプレート

<div class="katteyo2">
<div class="katteyo2-child">
    <div class="katteyo2-image"><a target="_blank"
            href="https://www.amazon.co.jp/gp/product/4798169951/ref=as_li_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4798169951&amp;linkCode=as2&amp;tag=hamcat-22&amp;linkId=2279af661d9ce6634ed661170145cb22"
            rel="noopener"><img border="0"
                src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&amp;MarketPlace=JP&amp;ASIN=4798169951&amp;ServiceVersion=20070822&amp;ID=AsinImage&amp;WS=1&amp;Format=_SL160_&amp;tag=hamcat-22"></a>
    </div>
    <div class="katteyo2-text">
        <div class="katteyo2-title"><a target="_blank"
                href="https://www.amazon.co.jp/gp/product/4798169951/ref=as_li_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4798169951&amp;linkCode=as2&amp;tag=hamcat-22&amp;linkId=a713c9e996f83afb9329e74a6328548c"
                rel="noopener">「ゆる副業」のはじめかた アフィリエイトブログ スキマ時間で自分の「好き」をお金に変える!</a></div>
        <div class="katteyo2-description"><strong>【こんな方におすすめ】</strong>
            <ul>
                <li>ゆる副業を始めたい方</li>
                <li>スキマ時間を有効活用したい方</li>
            </ul>
        </div>
    </div>
</div>
<div class="katteyo2-btns">
    <div class="katteyo2-btns-child-orange"><a target="_blank"
            href="https://www.amazon.co.jp/gp/product/4798169951/ref=as_li_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4798169951&amp;linkCode=am2&amp;tag=hamcat-22&amp;linkId=92a323705564bb93039bf24c27b4478d"
            rel="noopener">Amazonで確認</a></div>
    <div class="katteyo2-btns-child-red"><a target="_blank" rel="noopener"
            href="https://hb.afl.rakuten.co.jp/ichiba/1cc69a4a.2d25d230.1cc69a4b.572b2435/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fbook%2F16779530%2F&amp;link_type=hybrid_url&amp;ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJyaWdodCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MCwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjEsInByb2QiOjAsImFtcCI6ZmFsc2V9">楽天市場で確認</a>
    </div>
</div>
</div> 
*/

/*ここからCSS*/
.katteyo2 {
    box-sizing: border-box;
    width: 95%;
    padding: 10px 10px 5px 10px;
    text-align: center;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    margin-bottom: 30px;
}

.katteyo2-child {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-content: center;
    align-content: center;
    width: 95%;
    margin: 5px auto;
}

.katteyo2-image {
    text-align: center;
    box-sizing: border-box;
    max-width: 50%;
    height: auto;
    position: relative;
}

.katteyo2-image img {
    box-shadow: 1px 1px 5px -2px #aaaaaa;
    margin: 0;
}

.katteyo2-text {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    text-align: left;
}

.katteyo2-title a {
    display: block;
    text-decoration: none;
    font-size: 0.9em;
    color: #0000ff;
}

.katteyo2-description {
    margin-top: 5px;
    margin-left: 8px;
    font-size: 0.8em;
}

.katteyo2-btns {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-content: center;
    align-content: center;
    box-sizing: border-box;
    width: 99%;
    margin: 0px auto;
}

.katteyo2-btns a {
    display: block;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    text-decoration: none;
    font-weight: bold;
    line-height: 2.0;
    text-align: center;
    font-size: 0.9em;
    border-radius: 8px;
    color: #ffffff;
}

.katteyo2-btns a:hover {
    color: #faa536;
}

.katteyo2-btns img {
    position: absolute;
}

.katteyo2-btns-child-orange {
    display: inline;
    width: 85%;
    margin: 5px auto;
}

.katteyo2-btns-child-orange a {
    background: #faa64d;
}

.katteyo2-btns-child-orange a:hover {
    background-color: #aaaaaa;
}


.katteyo2-btns-child-red {
    display: inline;
    width: 85%;
    margin: 5px auto;
}

.katteyo2-btns-child-red a {
    background: #fe3c3c;
}

.katteyo2-btns-child-red a:hover {
    background-color: #ffddff;
}

.amazon-image {
    text-align: center;
    box-sizing: border-box;
    max-width: 50%;
    height: auto;
    position: relative;
}

@media (min-width: 768px) {
    .katteyo2-image {
        width: 22%;
    }

    .amazon-image {
        width: 22%;
    }

    .katteyo2-text {
        margin-left: 5px;
        width: 75%;
    }

    .katteyo2-btns-child-orange {
        width: 48%;
    }

    .katteyo2-btns-child-red {
        width: 48%;
    }
}