@charset "utf-8";
/*------------------------------------------------------------
	書式設定
------------------------------------------------------------*/
/* テキストの位置 */
.taLeft { text-align: left !important; }
.taCenter { text-align: center !important; }
.taRight { text-align: right !important; }

/* フォントの太さ */
.fwNormal { font-weight: normal !important; }
.fwBold { font-weight: bold !important; }

/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
	* html .clearfix {
		zoom: 1;
	}

	*+html .clearfix {
		zoom: 1;
	}

.clearfix:after {
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}

/*------------------------------------------------------------
	comInner
------------------------------------------------------------*/
#main .comInner {
    padding: 20px 3.5% 23px 9.6%;
    margin: 0 8.6% 30px 0;
    border: 4px solid #F9C346;
    border-left: none;
    border-radius: 0 60px 60px 0;
    background: #fff;
    position: relative;
}

#main .comInner.right {
    padding: 28px 12% 23px 0.5%;
    margin: 0 0 30px 8.6%;
    border-radius: 60px 0 0 60px;
    border-left: 4px solid #F9C346;
    border-right: none;
}

#main .comInner:last-child {
    margin-bottom: 0 !important;
}

#main .comInner.blue {
    border-color: #2769A1;
}

#main .comInner .tag {
    position: absolute;
    top: -4px;
    right: 3.9%;
    width: 7.9vw;
}

#main .comInner.right .tag {
    right: 13.5%;
}

#main .comInner h3 {
    margin-bottom: 1px;
    font-weight: normal;
    font-size: 1.87vw;
}

#main .comInner h3 img {
    margin-right: 30px;
    width: 15.55%;
    vertical-align: middle;
}

#main .comInner .blueTtl {
    padding: 0 0 0 4%;
    color: #2769A1;
    font-size: 1.24vw;
    text-align: left !important;
}

#main .comInner .blueTtl span {
    margin: 0 10px 0 0;
    font-size: 2.33vw;
    vertical-align: baseline;
    font-family: 'Concert One', cursive;
}

#main .comInner .photoUl {
    margin-top: -35px;
    padding: 0 0 0 4%;
}

#main .comInner .photoUl > li {
    margin-top: 35px;
    float: left;
    width: 47%;
    text-align: center;
}

#main .comInner .photoUl > li:nth-child(2n) {
    float: right;
}

#main .comInner .photoUl > li .photo {
    position: relative;
}

#main .comInner .photoUl > li .photo span {
    position: absolute;
    width: 16%;
    top: 0;
    right: 0;
}

#main .comInner .photoUl .sub {
    margin: -21px 2% 0 9%;
    position: relative;
    z-index: 1;
}

#main .comInner .photoUl .sub.modelSub {
    margin: -10px 10% 0;
}

#main .comInner .photoUl .sub.modelSub li {
    margin-top: 10px;
}

#main .comInner .photoUl .sub li {
    float: left;
    width: 52.5%;
    text-align: left;
}

#main .comInner .photoUl .sub li:nth-child(2n) {
    float: right;
}

#main .comInner .photoUl .sub.modelSub li {
    width: 48%;
}

#main .comInner .photoUl .sub span {
    margin-top: 3px;
    display: block;
    font-size: 1.1vw;
}

#main .comInner .photoUl .sub li.link {
    margin: 0;
    width: 46%;
    font-size: 1.24vw;
    text-align: center;
    float: right;
}

#main .comInner .photoUl .link a,
#main .comInner .photoUl .sub li.link a {
    padding: 2px 0 2px 25px;
    display: inline-block;
    color: #000;
    font-weight: bold;
    min-height: 22px;
    background: url("/cms/images/products/goods/nekobu/img/icon01.png") no-repeat left center;
    background-size: 20px 20px;
}

#main .comInner .photoUl .link {
    margin: 20px 10% 0;
    font-size: 1.24vw;
    text-align: left;
}

@media all and (max-width: 767px) {
    #main .comInner {
        padding: 21px 15px 32px 36px;
        margin: 0 21px 10px 0;
        border-radius: 0 30px 30px 0;
    }

    #main .comInner.right {
        padding: 21px 36px 23px 15px;
        margin: 0 0 10px 21px;
        border-radius: 30px 0 0 30px;
    }

    #main .comInner .tag {
        right: 27px;
        width: 60px;
    }

    #main .comInner.right .tag {
        right: 55px;
    }

    #main .comInner h3 {
        margin-bottom: 3px;
        font-size: 14px;
    }

    #main .comInner h3 img {
        display: block;
        margin: 0 0 6px;
        width: 121px;
    }

    #main .comInner .blueTtl {
        padding: 0 0 6px;
        font-size: 11px;
    }

    #main .comInner .blueTtl span {
        margin: 0 10px 0 0;
        font-size: 20px;
    }

    #main .comInner .photoUl {
        margin: 0 14px 0 18px;
        padding: 0;
    }

    #main .comInner .photoUl > li {
        margin-top: 0;
        float: none;
        width: auto;
    }

    #main .comInner .photoUl > li:not(:last-child) {
        margin-bottom: 18px;
    }

    #main .comInner .photoUl > li:nth-child(2n) {
        float: none;
    }

    #main .comInner .photoUl .sub {
        margin: -16px 2% 0 14%;
    }

    #main .comInner .photoUl .sub.modelSub {
        margin: 13px 49px 0 8px;
    }

    #main .comInner .photoUl .sub li {
        margin-top: 0;
    }

    #main .comInner .photoUl .sub.modelSub li {
        width: auto;
        float: none;
    }

    #main .comInner .photoUl .sub.modelSub li:not(:last-child) {
        margin-bottom: 3px;
    }
    
    #main .comInner .photoUl .sub span {
        margin-top: 3px;
        font-size: 9.5px;
    }

    #main .comInner .photoUl .sub li.link {
        margin: 0;
        width: 46%;
        font-size: 12px;
    }

    #main .comInner .photoUl .link a,
    #main .comInner .photoUl .sub li.link a {
        padding: 1px 0 1px 18px;
        min-height: inherit;
        background: url("/cms/images/products/goods/nekobu/img/icon01.png") no-repeat left center;
        background-size: 15px 15px;
    }

    #main .comInner .photoUl .link {
        margin: 5px 0 0 8px;
        font-size: 12px;
    }
    
    #main .comInner.blue .photoUl {
        margin: 10px 0 0;
    }
    
    #main .comInner.blue .photoUl > li {
        margin-bottom: 0;
        float: left;
        width: 50%;
    }

    #main .comInner.blue .photoUl > li:nth-child(2n) {
        float: right;
    }
      
    #main .comInner.blue .blueTtl {
        padding: 0;
    }
    
    #main .comInner.blue .blueTtl span {
        display: block;
        margin: 0 0 -4px;
    }
    
    #main .comInner.blue .photoUl > li .photo span {
        width: 29%;
        top: -51%;
    }
}