* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

form {
    display: inline
}

html {
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

body {
    margin: 0
}

img {
    vertical-align: top
}

ul,ol {
    list-style: none;
    letter-spacing: -0.4em
}

ul li,ol li {
    letter-spacing: normal
}

table {
    border-spacing: 0;
    border-collapse: collapse
}

dl {
    margin-top: 0;
    margin-bottom: 20px
}

dd,dt {
    line-height: 1.42857143
}

dt {
    font-weight: 700
}

dd {
    margin-left: 0
}

td,th {
    padding: 0
}

.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before {
    display: table;
    content: " "
}

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block
}

nav ul {
    list-style: none
}

blockquote,q {
    quotes: none
}

blockquote:before,blockquote:after,q:before,q:after {
    content: '';
    content: none
}

a {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    background: transparent
}

ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none
}

mark {
    background-color: #ff9;
    color: #000;
    font-style: italic
}

del {
    text-decoration: line-through
}

abbr[title],dfn[title] {
    border-bottom: 1px dotted;
    cursor: help
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0
}

input,select {
    vertical-align: middle
}

.clearfix {
    *zoom:1}

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

html {
    overflow-y: scroll;
    height: 100%;
    min-height: 100%;
    overflow-x: visible
}

body {
    height: 100%;
    min-height: 100%;
    color: #333;
    font-family: "メイリオ","Hiragino Sans",sans-serif;
    font-size: 14px;
    font-weight: 300;
    overflow-x: visible;
    line-height: 1.6;
    letter-spacing: 0.04em
}

body a {
    color: inherit;
    text-decoration: none;
    -webkit-transition: .2s ease;
    transition: .2s ease
}

body a:hover {
    opacity: 0.8
}

.wrapper .contents>.wrap {
	max-width: 100%;
}

.pci {
    display: block !important
}

.spi {
    display: none !important
}

#summer_lp.wrapper {
    display: -ms-flexbox;
    display: flex;
    min-height: 100vh;
    background-color: #fff;
    width: 100%
}

#summer_lp.wrapper>.inner {
    width: 100%
}

#summer_lp.wrapper .contents .container>.inner {
    max-width: 1005px;
    margin: 0 auto;
    text-align: center
}

#summer_lp.wrapper .contents .container.key_visual {
    padding-bottom: 16vw
}

#summer_lp.wrapper .contents .container.key_visual .headline img {
    width: 100%
}

#summer_lp.wrapper .contents .container.key_visual .description {
    margin-top: 2.5vw;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

#summer_lp.wrapper .contents .container.category {
    background-color: #ffecd1
}

#summer_lp.wrapper .contents .container.category:before {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    transform: skewY(-5deg);
    transform-origin: bottom left;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #ffecd1
}

#summer_lp.wrapper .contents .container.category>.inner {
    position: relative;
    z-index: 2;
    top: -8vw
}

#summer_lp.wrapper .contents .container.category .wrap_top .image_container {
    float: left;
    width: 50%
}

#summer_lp.wrapper .contents .container.category .wrap_top .right {
    width: 50%;
    float: right
}

#summer_lp.wrapper .contents .container.category .wrap_top .right .title {
    margin-top: 40px;
    text-align: center;
}

#summer_lp.wrapper .contents .container.category .wrap_top .right .description {
    padding: 40px 0;
    text-align: left;
    padding-left: 40px;
}

#summer_lp.wrapper .contents .container.category .wrap_top .right .link {
    display: block;
    margin: 0 auto;
    width: 134px
}

#summer_lp.wrapper .contents .container.category .wrap_top .right .link img {
    width: 100%
}

#summer_lp.wrapper .contents .container.category .category_list {
    margin-top: 60px
}

#summer_lp.wrapper .contents .container.category .category_list ul {
    letter-spacing: -0.4em;
    wdith: 100%
}

#summer_lp.wrapper .contents .container.category .category_list ul.column4 li {
    width: 25%
}

#summer_lp.wrapper .contents .container.category .category_list ul li {
    letter-spacing: normal;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 3%;
    width: 33%
}

#summer_lp.wrapper .contents .container.recommend {
    background-color: #fff;
    padding-bottom: 12vw
}

#summer_lp.wrapper .contents .container.recommend:before {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    transform: skewY(-5deg);
    transform-origin: bottom left;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #fff
}

#summer_lp.wrapper .contents .container.recommend+.recommend {
    margin-top: -6vw
}

#summer_lp.wrapper .contents .container.recommend>.inner {
    position: relative;
    z-index: 2;
    top: -2vw
}

#summer_lp.wrapper .contents .container.recommend h2 {
    font-size: 45px;
    font-weight: normal
}

#summer_lp.wrapper .contents .container.recommend h2 span {
    display: block;
    font-size: 18px;
    margin-top: 20px;
}

#summer_lp.wrapper .contents .container.recommend h2.text {
    margin-bottom: 40px
}

#summer_lp.wrapper .contents .container.recommend .item_list {
    margin-top: 0
}

#summer_lp.wrapper .contents .container.recommend .item_list ul {
    letter-spacing: -0.4em;
    wdith: 100%
}

#summer_lp.wrapper .contents .container.recommend .item_list ul li {
    letter-spacing: normal;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 2%;
    width: 23%;
    margin-right: 2%
}

#summer_lp.wrapper .contents .container.recommend .item_list ul li:nth-child(4n) {
    margin-right: 0
}

#summer_lp.wrapper .contents .container.recommend .item_list ul li .image_container img {
    width: 100%
}

#summer_lp.wrapper .contents .container.recommend .item_list ul li .name {
    margin-top: 12px;
    font-size: 14px
}

#summer_lp.wrapper footer {
    color: #000;
    text-align: center;
    background: #cef4f7;
    width: 100%;
    margin: 0 auto;
    line-height: 1.5;
    font-size: 12px;
    padding: 10px 0
}

.mT10 {
    margin-top: 10px !important
}

.mT15 {
    margin-top: 15px !important
}

.mT20 {
    margin-top: 20px !important
}

.mT25 {
    margin-top: 25px !important
}

.mB10 {
    margin-bottom: 10px !important
}

.mB15 {
    margin-bottom: 15px !important
}

.mB20 {
    margin-bottom: 20px !important
}

.mB25 {
    margin-bottom: 25px !important
}

@media screen and (max-width: 767px) {
    .pci {
        display:none !important
    }

    .spi {
        display: block !important
    }

    #summer_lp.wrapper .contents .container.key_visual .description {
        font-size: 4vw;
        font-weight: bold;
        padding: 4vw
    }

    #summer_lp.wrapper .contents .container.category {
        padding-bottom: 22vw
    }

    #summer_lp.wrapper .contents .container.category>.inner {
        top: 8vw
    }

    #summer_lp.wrapper .contents .container.category .wrap_top .image_container {
        float: none;
        width: 100%;
        padding: 20px
    }

    #summer_lp.wrapper .contents .container.category .wrap_top .image_container img {
        width: 100%
    }

    #summer_lp.wrapper .contents .container.category .wrap_top .right {
        float: none;
        width: 100%
    }

    #summer_lp.wrapper .contents .container.category .wrap_top .right .title {
        margin-top: 30px
    }

    #summer_lp.wrapper .contents .container.category .wrap_top .right .description {
        padding: 40px 20px
    }

    #summer_lp.wrapper .contents .container.category .category_list ul.column4 li {
        width: 47%
    }

    #summer_lp.wrapper .contents .container.category .category_list ul li {
        width: 47%;
        margin-right: 3%
    }

    #summer_lp.wrapper .contents .container.category .category_list ul li:nth-child(2n) {
        margin-right: 0
    }

    #summer_lp.wrapper .contents .container.category .category_list ul li a {
        display: block
    }

    #summer_lp.wrapper .contents .container.category .category_list ul li a img {
        width: 100%
    }

    #summer_lp.wrapper .contents .container.recommend {
        padding-bottom: 32vw
    }

    #summer_lp.wrapper .contents .container.recommend+.recommend {
        margin-top: -12vw
    }

    #summer_lp.wrapper .contents .container.recommend>.inner {
        top: 6vw
    }

    #summer_lp.wrapper .contents .container.recommend h2 {
        line-height: 1.4;
        font-size: 6.4vw;
        padding: 0 12px 18px
    }

    #summer_lp.wrapper .contents .container.recommend h2 span {
        font-size: 3.2vw
    }

    #summer_lp.wrapper .contents .container.recommend h2.text {
        margin-bottom: 20px
    }

    #summer_lp.wrapper .contents .container.recommend .item_list {
        margin-top: 0
    }

    #summer_lp.wrapper .contents .container.recommend .item_list ul {
        padding: 0 12px
    }

    #summer_lp.wrapper .contents .container.recommend .item_list ul li {
        width: 32%;
        margin-right: 2%
    }

    #summer_lp.wrapper .contents .container.recommend .item_list ul li:nth-child(3n) {
        margin-right: 0 !important
    }

    #summer_lp.wrapper .contents .container.recommend .item_list ul li:nth-child(4n) {
        margin-right: 2%
    }

    #summer_lp.wrapper .contents .container.recommend .item_list ul li a {
        display: block
    }

    #summer_lp.wrapper .contents .container.recommend .item_list ul li .image_container img {
        width: 100%
    }

    #summer_lp.wrapper .contents .container.recommend .item_list ul li .name {
        font-size: 11px;
        margin-top: 6px
    }

    .mT10 {
        margin-top: 20px !important
    }

    .mT15 {
        margin-top: 30px !important
    }

    .mT20 {
        margin-top: 40px !important
    }

    .mT25 {
        margin-top: 50px !important
    }

    .mB10 {
        margin-bottom: 20px !important
    }

    .mB15 {
        margin-bottom: 30px !important
    }

    .mB20 {
        margin-bottom: 40px !important
    }

    .mB25 {
        margin-bottom: 50px !important
    }
}

.wrapper .contents .wrap .main_side .container {
	margin-top: inherit;
}

.wrapper .contents .wrap h2 {
  text-align: center;
}