.main{width: 100%;height: 350px;padding-top: 20px;}
.main01{background-color: #ffffff;background-image: url(../product/main01_bg.png);}
#inner{background-image: url(../category/main02_bg.png);background-repeat: no-repeat;background-position: left;margin-top: -50px;margin-bottom: 50px;}
#inner02{min-height: 400px;}
#sub_page_title{font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;color: #FFFFFF;font-weight: bold;font-size: 2em;letter-spacing: 3px;width: 100%;text-align: center;text-shadow: 3px 3px 5px black;height: 200px;background-image: url(../product/sub_top_bg.png);background-repeat: no-repeat;background-position: center top;padding-top: 155px;line-height: 24px;}

/* button
-----------------------------------------------------------*/
.button,.button02,.button03,.button04 {position: relative;display: inline-block;padding: .9em 4em;background-color: #FFF;border: 2px solid #000;color: #000;text-align: center;text-decoration: none;transition: all .3s;width: 240px;}
.button::after,.button02::after,.button03::after,.button04::after {position: absolute;top: 50%;right: .2em;content: '';margin-top: -5px;border: 7px solid transparent;border-top-width: 5px;border-bottom-width: 5px;border-left-color: #fff;transition: all .3s;}
.button:hover,.button02:hover,.button03:hover,.button04:hover {background-color: #000;color: #fff;}
.button {margin-top: 480px;margin-right: 38px;float: right;}
.button02 {margin-top: 408px;float: left;margin-left: 40px;}
.button03 {margin-top: 471px;margin-right: 322px;float: right;}
.button04 {margin-top: 310px;margin-right: 370px;float: right;}

/* RESET */
ul, li {display: block;margin: 0;padding: 0;list-style-type: none;}
.tab{letter-spacing: 2px;line-height: 20px;margin-top: 120px;}
.tab-title {position: relative;width: 100%;}
.tab-title:before, .tab-title:after {display: table;content: '';}
.tab-title:after { clear: both;}
.tab-title li {float: left;width: 50%;padding: 1.4em 0;color: #000000;text-align: center;background-color: #f7f7f7;cursor: pointer;}
.tab-title-bar {position: absolute;left: 0;bottom: 0;width: 50%;height: 2px;background-color: #000;-webkit-transition: .45s ease-in-out;-moz-transition: .45s ease-in-out;-o-transition: .45s ease-in-out;transition: .45s ease-in-out;}
.tab-contents li {display: none;padding: 1.4em;background-color: #fff;}
.tab-contents li.active {display: block;}

.tp-grid li{width:300px;}
.tp-grid li img{width:100%;aspect-ratio:4/3;height:auto;display:block;object-fit:cover;}

@media screen and (max-width: 768px) {
    #inner{background: none;}
    #tp-grid { margin-left: auto !important; margin-right: auto !important; left: 0 !important; right: 0 !important; width: 100%; max-width: 200px;}

    .main02 .content,.main02 .container { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; text-align: center;}
}