@charset "utf-8";

/*-------------------
   clearfix
-------------------*/
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

/*-------------------
   common
-------------------*/
.wrapper {
    font: 1.0em/1.2 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-feature-settings: "palt";
    letter-spacing: .1em;
    padding: 0 0;
    position: relative;
}

.wrapper * {
    box-sizing: border-box;
}

.wrapper a {
    color: inherit;
    display: block;
}

.wrapper img {
    height: auto;
    max-width: 100%;
}

#container .flex {
    align-items: flex-start;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    flex-wrap: wrap;
    margin: 0 auto;
}

/*ブレイクポイントのルール*/
/* -スマホ基本設計 解像度に依存しない-
 *350pxまで：SP縦 i5 SE
 *350px〜480px：SP縦 i6-8　****一番重要****
 *480px〜960px：SP横からタブレット
 *960px〜小型PC　大型PC
 
/*  全体指定 スマホ縦 i5 i5SE　350pxまで  */

/*-- 画面外にいる状態 --*/
.fadein {
    opacity: 0;
    transform: translate(0, 30px);
    transition: ease-in 400ms;
}

/*-- 画面内に入った状態 --*/
.fadein.scrollin {
    opacity: 1;
    transform: translate(0, 0);
}

/*-------------------
   category_top
-------------------*/
#container .category_top h1 img {
    display: block;
    margin: 0 auto;
    width: 100%;
}

#container .category_top .title-desc {
    font: 0.9rem/1.4 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    padding: 5%;
}

/*-------------------
   tab
-------------------*/
#container .tab {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
}

#container .tab li {
    background: #f7f7f7;
    border-bottom: 1px solid #cfcfcf;
    border-right: 1px solid #cfcfcf;
    display: block;
    font: 0.9rem/1.2 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    padding: 3%;
    text-align: center;
    width: 50%;
}

#container .tab li.active {
    background: #e0e0e0;
}

#container .hide {
    display: none;
}

/*-------------------
   content_area
-------------------*/
#container .content_area {
    margin: 0 auto;
    width: 90%;
}

#container .content_area h2 {
    border-bottom: 1px solid #2e2e2e;
    font: bold 1.2rem/2 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    padding-left: 0;
    margin: 5% 0;
}

#container .content_area .feature-list a {
    border-bottom: 1px solid #eee;
    display: flex;
    flex-flow: nowrap;
    margin: 0 0 5%;
    padding: 0 0 5%;
    width: 100%;
}

#container .content_area .feature-list li {
    margin: 0 1%;
    width: 49%;
}

#container .content_area .feature-list .title2 {
    font: 0.8rem/1.6 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
}

@media screen and (min-width:350px) and (max-width:480px) {
    /*　スマホ縦　i6 / i6plus / i7  350pxから480pxまではここを読み込む　*/
}

@media screen and (min-width:480px) and (max-width:960px) {

    /*　スマホ横～タブレット 480pxから960pxまではここを読み込む　*/
    /*-------------------
   category_top
-------------------*/
    #container .category_top .title-desc {
        text-align: center;
    }

    /*-------------------
   tab
-------------------*/
    #container .tab li {
        width: calc(100%/3);
    }

    /*-------------------
   content_area
-------------------*/
    #container .content_area .feature-list {
        display: inline-block;
        margin: 0 1%;
        width: 22%;
    }

    #container .content_area .feature-list a {
        display: flex;
        flex-flow: wrap;
        border-bottom: 0;
    }

    #container .content_area .feature-list img {
        margin: 0 0 3%;
        width: 100%;
    }

    #container .content_area .feature-list li {
        margin: 0;
        width: 100%;
    }
}

@media screen and (min-width:960px) {

    /*　小・大画面デスクトップ　960pxからはここを読み込む　*/
    #container {
        margin: 0 auto;
        max-width: 1400px
    }

    /*-------------------
   category_top
-------------------*/
    #container .category_top h1 img {
        display: block;
        margin: 0 auto;
        width: 100%;
    }

    #container .category_top .title-desc {
        font-size: 1rem;
        padding: 2%;
        text-align: center;
    }

    /*-------------------
   tab
-------------------*/
    #container .tab li {
        font-size: 1rem;
        padding: 1% 1%;
        width: calc(100%/7);
    }

    /*-------------------
   content_area
-------------------*/
    #container .content_area {
        width: 95%;
    }

    #container .content_area h2 {
        font-size: 1.5rem;
        line-height: 2.4rem;
        padding-left: 1%;
        margin: 2% 0;
    }

    #container .content_area .feature-list {
        display: inline-block;
        margin: 1% 1.5%;
        width: 16%;
    }

    #container .content_area .feature-list a {
        display: flex;
        flex-flow: wrap;
        border-bottom: 0;
    }

    #container .content_area .feature-list img {
        margin: 0 auto 3%;
        width: 228px;
    }

    #container .content_area .feature-list li {
        margin: 0;
        width: 100%;
    }
}