@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@300&family=Noto+Sans+JP:wght@300;500&display=swap");html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline
}

html {
    line-height: 1
}

ol,ul {
    list-style: none
}

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

caption,th,td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle
}

q,blockquote {
    quotes: none
}

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

a img {
    border: none
}

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

@font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: 400;
    src: url(../font/YakuHanJP-Regular.woff2) format("woff2"),url(../font/YakuHanJP-Regular.woff) format("woff")
}

@font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: 500;
    src: url(../font/YakuHanJP-Regular.woff2) format("woff2"),url(../font/YakuHanJP-Regular.woff) format("woff")
}

@font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: 600;
    src: url(../font/YakuHanJP-Medium.woff2) format("woff2"),url(../font/YakuHanJP-Medium.woff) format("woff")
}

@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 400;
    src: url(../font/Jost-400-Book.ttf) format("truetype")
}

@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 500;
    src: url(../font/Jost-500-Medium.ttf) format("truetype")
}

@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 600;
    src: url(../font/Jost-500-Medium.ttf) format("truetype")
}

@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 700;
    src: url(../font/Jost-600-Semi.ttf) format("truetype")
}

@font-face {
    font-family: "Original Yu Gothic";
    src: local("Yu Gothic Medium");
    font-weight: 100
}

@font-face {
    font-family: "Original Yu Gothic";
    src: local("Yu Gothic Medium");
    font-weight: 200
}

@font-face {
    font-family: "Original Yu Gothic";
    src: local("Yu Gothic Medium");
    font-weight: 300
}

@font-face {
    font-family: "Original Yu Gothic";
    src: local("Yu Gothic Medium");
    font-weight: 400
}

@font-face {
    font-family: "Original Yu Gothic";
    src: local("Yu Gothic Bold");
    font-weight: bold
}

@font-face {
    font-family: "ZenKakuGothicNew";
    font-style: normal;
    font-weight: 400;
    src: url(../font/ZenKakuGothicNew-Light.ttf) format("truetype")
}

@font-face {
    font-family: "ZenKakuGothicNew";
    font-style: normal;
    font-weight: 500;
    src: url(../font/ZenKakuGothicNew-Regular.ttf) format("truetype")
}



@font-face {
    font-family: "Tipique_Regular";
    font-style: normal;
    font-weight: 400;
    src: url(../font/Tipique_Regular.woff2) format("woff2"),url(../font/Tipique_Regular.woff) format("woff")
}


@font-face {
    font-family: "Tipique_Regular";
    font-style: normal;
    font-weight: 500;
    src: url(../font/Tipique_Regular.woff2) format("woff2"),url(../font/Tipique_Regular.woff) format("woff")
}


@font-face {
    font-family: "Tipique_Regular";
    font-style: normal;
    font-weight: 600;
    src: url(../font/Tipique_Regular.woff2) format("woff2"),url(../font/Tipique_Regular.woff) format("woff")
}


@font-face {
    font-family: "Tipique_Regular";
    font-style: normal;
    font-weight: 700;
    src: url(../font/Tipique_Regular.woff2) format("woff2"),url(//kokiafeca.local/wp-content/themes/kokiafeca/font/Tipique_Regular.woff) format("woff")
}



@font-face {
    font-family: "BrownNow";
    font-style: normal;
    font-weight: 400;
    src: url(../font/BrownNowTwo_Regular.woff2) format("woff2"),url(../font/BrownNowTwo_Regular.woff) format("woff")
}


@font-face {
    font-family: "BrownNow";
    font-style: normal;
    font-weight: 500;
    src: url(../font/BrownNowTwo_Regular.woff2) format("woff2"),url(../font/BrownNowTwo_Regular.woff) format("woff")
}


@font-face {
    font-family: "BrownNow";
    font-style: normal;
    font-weight: 600;
    src: url(../font/BrownNowOne.woff2) format("woff2"),url(../font/BrownNowOne.woff) format("woff")
}


@font-face {
    font-family: "BrownNow";
    font-style: normal;
    font-weight: 700;
    src: url(../font/BrownNowOne.woff2) format("woff2"),url(//kokiafeca.local/wp-content/themes/kokiafeca/font/BrownNowOne.woff) format("woff")
}


*,*:before,*:after {
    box-sizing: border-box
}

* {
    box-sizing: border-box
}

html,body {
    font-size: 14px;
    line-height: 1.8;
    text-align: center
}

select,input[type="text"],input[type="submit"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    border: 0;
    margin: 0;
    padding: 0;
    background: none transparent;
    vertical-align: middle;
    font-size: inherit;
    color: inherit;
    box-sizing: content-box
}

select::-ms-expand {
    display: none
}

body {
    color: #535657;
    /*background-color: #D1DBE5;*/
	background-image: url("../img/top/background_1.jpg");
    font-family: YakuHanJP,Jost,Roboto,YuGothic,"Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    min-height: 100%;
    word-wrap: break-word;
    -moz-transition: background-color .4s ease;
    -o-transition: background-color .4s ease;
    -webkit-transition: background-color .4s ease;
    transition: background-color .4s ease;

}



body.about {
    background-color: #f9f9f6
}

@media screen and (min-width: 767px) {
    body {
        min-width:1080px
    }
}

@media screen and (max-width: 767px) {
    body {
        font-weight:400
    }
}



a {
    color: #535657;
    text-decoration: none
}

::selection {
    color: #535657;
    background-color: #fff737;
}

img,svg {
    width: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: top
}

hr {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0
}

.blue {
    color: #6184ab
}

.red {
    color: #e35d5d
}



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

@media screen and (min-width: 767px) {
    .only_sp,.sp_only {
        display:none !important
    }
}

button,input {
    border-radius: 0;
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    appearance: button;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    padding: 0;
    margin: 0
}

button:focus,input:focus {
    outline: 0
}

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

#stkr {
  pointer-events: none;
  position: fixed;
  width: 0px;
  height: 0px;
  border: 1px solid rgba(255,250,116);
  top: 0px;
  left: 0px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  opacity: 0;
  z-index: 999;
	
}

  #stkr.is_active {
    top: -40px;
    left: -40px;
    width: 80px;
    height: 80px;
    transition: 0.23;
    opacity: 1;
  }

}

.link-items {
  display: flex;
  justify-content: center;
  gap: 20px;
}
 .link-items .link-item {
    display: block;
    padding: 20px;
    color: #fff;
    text-decoration: none;
    background-color: #000;
    border-radius: 50px;
  }




	
.w_1500 {
    width: 100%;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto
}

@media screen and (max-width: 767px) {
    .w_1500 {
        padding-left:0;
        padding-right: 0
    }
}

.w_1300 {
    width: 100%;
    max-width: 1300px;
    padding-left: 50px;
    padding-right: 50px;
    margin-left: auto;
    margin-right: auto
}

@media screen and (max-width: 767px) {
    .w_1300 {
        padding-left:0;
        padding-right: 0
    }
}

.w_1200 {
    width: 100%;
    max-width: 1200px;
    padding-left: 50px;
    padding-right: 50px;
    margin-left: auto;
    margin-right: auto
}

@media screen and (max-width: 767px) {
    .w_1200 {
        padding-left:0;
        padding-right: 0
    }
}

.w_1150 {
    width: 100%;
    max-width: 1150px;
    padding-left: 50px;
    padding-right: 50px;
    margin-left: auto;
    margin-right: auto
}

@media screen and (max-width: 767px) {
    .w_1150 {
        padding-left:0;
        padding-right: 0
    }
}

.w_800 {
    width: 100%;
    max-width: 800px;
    padding-left: 50px;
    padding-right: 50px;
    margin-left: auto;
    margin-right: auto
}

@media screen and (max-width: 767px) {
    .w_800 {
        padding-left:0;
        padding-right: 0
    }
}

.w_700 {
    width: 100%;
    max-width: 700px;
    padding-left: 50px;
    padding-right: 50px;
    margin-left: auto;
    margin-right: auto
}

@media screen and (max-width: 767px) {
    .w_700 {
        padding-left:0;
        padding-right: 0
    }
}

.reload{
	cursor: pointer;
}

#loading {
    width: 30px;
    height: 30px;
    position: fixed;
    top: 50%;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    margin: -15px 0 0 -15px;
    z-index: 10;
    opacity: 1;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

#loading.load {
    opacity: 0
}

#loading div {
    opacity: 1;
	position: relative;
}

#loading .ball-scale1>div {
    background: url(../img/load_kuma.gif) center center no-repeat;
    width: 230px;
    height: 230px;
    left: 30px;
    top: 20px
}

#loading .ball-scale2>div {
    background: url(../img/load_kuma6.gif) center center no-repeat;
    width: 245px;
    height: 245px;
    left: 30px;
    top: 20px
}




@media screen and (max-width:767px) {

#loading .ball-scale1>div {
    background: url(../img/load_kuma7.gif) center center no-repeat;
    width: 160px!important;
    height: 160px!important;
    left: 7px!important;
}
#loading .ball-scale2>div {
    background: url(../img/load_kuma8.gif) center center no-repeat;
    width: 170px!important;
    height: 170px!important;
    left: 10px!important;
}
}

@media screen and (min-width: 1080px) {
    #loading .ball-scale1>div {
        left:-60px
    }
    #loading .ball-scale2>div {
        left:-60px
    }
}

h1,h2,h3,h4,h5,h6,strong,b {
    font-family: YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
}

.headline {
    font-family: Tipique_Regular,YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
}

.font1 {
	font-family: BrownNow,Tipique_Regular,YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"Yu Gothic Medium","游ゴシック","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
}


.font {
	font-family: BrownNow,Tipique_Regular,YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"Yu Gothic Medium","游ゴシック","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
    font-size: 3.5em!important;
}

.font1_menu {
	font-family: BrownNow,Tipique_Regular,YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
	font-size: 22px !important;
    line-height: 0.8;
}

.font1_spmenu {
	font-family: BrownNow,Tipique_Regular,YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
	font-size: 50px !important;
    line-height: 1;
}

@media screen and (max-width:767px) {
    .font1_spmenu {
          font-size: 37px !important;
    }
    
}

@media screen and (max-width:480px) {
    .font1_spmenu {
          font-size: 32px !important;
    }
    #sp_nav #sp_sns_nav::before{
        font-size: 30px !important;
    }
    
}



.font1_spmenu2 {
	font-family: BrownNow,Tipique_Regular,YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
	font-size: 42px !important;
    line-height: 0.3;
}

#wrap {
    min-height: 100vh
}

@media screen and (max-width: 1500px) {
    #wrap {
        overflow:hidden
    }
}

@media screen and (min-width: 767px) {
    #wrap {
        width:100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: inherit
    }
}

#content,#content_nopjax {
    position: relative;
    top: 0;
    opacity: 0
}

@media screen and (min-width: 767px) {
    #content,#content_nopjax {
        width:calc( 100% - 270px )
    }
}

@media screen and (max-width: 767px) {
    .container {
        padding-top:0px
    }

    .home .container,.shop_top .container,.article-single .container,.article-single .container,.container.shop_top,.shop .container,.container.single-special {
        padding-top: 0
    }

    .container.post-type-archive-article {
        padding-top: 75px
    }

    .container.page-template-default {
        padding-top: 75px
    }
}

#right {
    position: relative;
    font-family: YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
    z-index: 11
}

@media screen and (min-width: 767px) {
    #right {
        width:270px;
		/*background-color:rgba(255,250,116,0.5);*/
		background-image: url("../img/top/yellow_base.png");
        padding-top: 700px;
        -moz-transition: all .4s ease;
        -o-transition: all .4s ease;
        -webkit-transition: all .4s ease;
        transition: all 2s ease 1s
    }

    body.the-brew-note #right,body.dark #right {
        background-color: #181818
    }

    .en #right {
        padding-top: 290px
    }

    .short #right {
        padding-top: 0
    }

    #right::before,#right::after {
        content: "";
        display: block;
        width: 2px;
        height: 100%;
        position: absolute;
        top: 0;
        background-color: rgba(0,0,0,0.03)
    }

    body.the-brew-note #right::before,body.dark #right::before,body.the-brew-note #right::after,body.dark #right::after {
        background-color: rgba(0,0,0,0.1)
    }

    #right::before {
        left: -2px
    }

    #right::after {
        right: -2px
    }
}

@media screen and (max-width: 767px) {
    #right {
        width:100%
    }
}

#right #reco_items+#pop_articles,#right #pop_articles+#reco_items {
    border-top: 1px solid #c4ba3f;
    padding-top: 40px;
    margin-top: 40px
}

@media screen and (min-width: 767px) {
    body.the-brew-note #right #reco_items+#pop_articles,body.dark #right #reco_items+#pop_articles,body.the-brew-note #right #pop_articles+#reco_items,body.dark #right #pop_articles+#reco_items {
        border-top:1px solid #222
    }
}

#right #reco_items {
    padding-bottom: 50px
}

.en #right #reco_items {
    display: none
}

@media screen and (max-width: 767px) {
    #right #pop_articles {
        display:none !important
    }
}

#right #reco_items,#right #pop_articles {
    padding-right: 30px;
    padding-left: 30px;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 767px) {
    .short #right #reco_items,.short #right #pop_articles {
        height:0;
        opacity: 0;
        pointer-events: none
    }
}

#right #reco_items .right_title,#right #pop_articles .right_title {
    color: #535657;;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.7;
    text-align: center;
    margin: 0 0 20px
}

@media screen and (min-width: 767px) {
    body.the-brew-note #right #reco_items .right_title,body.dark #right #reco_items .right_title,body.the-brew-note #right #pop_articles .right_title,body.dark #right #pop_articles .right_title {
        color:#EEE
    }
}

#right #reco_items .right_title .ico,#right #pop_articles .right_title .ico {
    width: 22px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 8px;
}

#right #reco_items .right_title .ico,#right #pop_articles .right_title .ico_poplar {
    width: 155px!important;
    height: 157px!important;
	margin-right: 60px !important;
	-webkit-animation: a-main-common-kata-two2 1.6s step-start 0.5s infinite normal;
    animation: a-main-common-kata-two2 1.6s step-start 0.5s infinite normal;
}

#right #reco_items .right_title .ico,#right #pop_articles .right_title .ico_pickup {
    width: 173px!important;
    height: 157px!important;
	margin-right: 23px !important;
	-webkit-animation: a-main-common-kata-two2 1.6s infinite normal;
    animation: a-main-common-kata-two2 1.6s infinite normal;
}

#right #reco_items .right_title .ico svg,#right #pop_articles .right_title .ico svg {
    width: 100%;
    filter: invert(35%) sepia(7%) saturate(181%) hue-rotate(149deg) brightness(91%) contrast(91%);
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

#right #reco_items .right_title .ico svg,#right #pop_articles .right_title .ico img {
    width: 100%;
    fill: #535657;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 767px) {
    body.the-brew-note #right #reco_items .right_title .ico svg,body.dark #right #reco_items .right_title .ico svg,body.the-brew-note #right #pop_articles .right_title .ico svg,body.dark #right #pop_articles .right_title .ico svg {
        fill:#EEE
    }
}

#right #reco_items .right_title small,#right #pop_articles .right_title small {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em
}

.en #right #reco_items .right_title small,.en #right #pop_articles .right_title small {
    display: none
}

#right #reco_items article,#right #pop_articles article {
    margin: 0 0 30px
}

#right #reco_items article:last-child,#right #pop_articles article:last-child {
    margin-bottom: 0
}

#right #reco_items article a figure::before,#right #pop_articles article a figure::before {
    color: #FFF;
    content: "read more";
    font-family: BrownNow,Tipique_Regular,YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"游ゴシック Medium","Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
    display: flex;
    font-weight: 600;
    font-size: 25px;
    letter-spacing: 0.08em;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 2;
    -moz-transform: translate(0, 5px);
    -ms-transform: translate(0, 5px);
    -webkit-transform: translate(0, 5px);
    transform: translate(0, 5px);
    -moz-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1)
}

#right #reco_items article a figure.pick_item::before{
    content: none;
}

#right #reco_items article a figure.pick_item::after {
    content: none;
}

#right #reco_items article a figure::after,#right #pop_articles article a figure::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: #6184ab;
    z-index: 1;
    mix-blend-mode: multiply;
    -moz-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1)
}

a figure .imgpic{
	width: 100%;
    max-width: inherit;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

#right #reco_items article a:hover .item_pic #item_slide .slick-list::before,#right #reco_items article a:hover figure::before,#right #pop_articles article a:hover .item_pic #item_slide .slick-list::before,#right #pop_articles article a:hover figure::before {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

#right #reco_items article a:hover .item_pic #item_slide .slick-list::after,#right #reco_items article a:hover figure::after,#right #pop_articles article a:hover .item_pic #item_slide .slick-list::after,#right #pop_articles article a:hover figure::after {
    opacity: 0.5
}

#right #reco_items article a:hover .txt,#right #pop_articles article a:hover .txt {
    color: #6184ab !important
}

#right #reco_items article a:hover .txt h3,#right #reco_items article a:hover .txt .tag,#right #reco_items article a:hover .txt .date_category,#right #reco_items article a:hover .txt .item_name,#right #reco_items article a:hover .txt .copy,#right #reco_items article a:hover .txt .price,#right #reco_items article a:hover .txt .volume,#right #reco_items article a:hover .txt .type,#right #pop_articles article a:hover .txt h3,#right #pop_articles article a:hover .txt .tag,#right #pop_articles article a:hover .txt .date_category,#right #pop_articles article a:hover .txt .item_name,#right #pop_articles article a:hover .txt .copy,#right #pop_articles article a:hover .txt .price,#right #pop_articles article a:hover .txt .volume,#right #pop_articles article a:hover .txt .type {
    color: #6184ab !important
}

#right #reco_items article figure,#right #pop_articles article figure {
    position: relative
}

#right #reco_items article .txt,#right #pop_articles article .txt {
    color: #535657;;
    text-align: left;
    margin-top: 10px;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (min-width: 767px) {
    body.the-brew-note #right #reco_items article .txt,body.dark #right #reco_items article .txt,body.the-brew-note #right #pop_articles article .txt,body.dark #right #pop_articles article .txt {
        color:#EEE
    }
}

#right #reco_items article .txt h3,#right #pop_articles article .txt h3 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.6;
    text-align: justify
}

.en #right #reco_items article .txt h3,.en #right #pop_articles article .txt h3 {
    text-align: left
}

#right #reco_items article .txt .date_category,#right #pop_articles article .txt .date_category {
    color: #535657;;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
	margin-top: 5px;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (min-width: 767px) {
    body.the-brew-note #right #reco_items article .txt .date_category,body.dark #right #reco_items article .txt .date_category,body.the-brew-note #right #pop_articles article .txt .date_category,body.dark #right #pop_articles article .txt .date_category {
        color:#CCC
    }
}

#right #reco_items article .txt .date_category span,#right #pop_articles article .txt .date_category span {
    display: inline-block
}

#right #reco_items article .txt .date_category span.date,#right #reco_items article .txt .date_category span.category,#right #pop_articles article .txt .date_category span.date,#right #pop_articles article .txt .date_category span.category {
    margin-right: 6px;
    margin-top: 5px
}

#right #reco_items article .txt .tag,#right #pop_articles article .txt .tag {
    color: #535657;;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (min-width: 767px) {
    body.the-brew-note #right #reco_items article .txt .tag,body.dark #right #reco_items article .txt .tag,body.the-brew-note #right #pop_articles article .txt .tag,body.dark #right #pop_articles article .txt .tag {
        color:#CCC
    }
}

#right #reco_items article .txt .tag li,#right #pop_articles article .txt .tag li {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    margin-right: 6px;
    margin-top: 5px
}

#right #reco_items article .txt .item_name,#right #pop_articles article .txt .item_name {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.5;
    margin: 0 0 5px;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (max-width: 767px) {
    #right #reco_items article .txt .item_name,#right #pop_articles article .txt .item_name {
        font-size:11px
    }
}

#right #reco_items article .txt .price,#right #pop_articles article .txt .price {
    margin: 0 0 5px;
    transition: color .4s ease
}

#right #reco_items article .txt .price .price_wrap,#right #pop_articles article .txt .price .price_wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center
}

#right #reco_items article .txt .price .price_set,#right #pop_articles article .txt .price .price_set {
    line-height: 1;
    margin: 0 5px 0 0
}

#right #reco_items article .txt .price .price_set .p_price,#right #reco_items article .txt .price .price_set .p_volume,#right #pop_articles article .txt .price .price_set .p_price,#right #pop_articles article .txt .price .price_set .p_volume {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.5
}

@media screen and (max-width: 767px) {
    #right #reco_items article .txt .price .price_set .p_price,#right #reco_items article .txt .price .price_set .p_volume,#right #pop_articles article .txt .price .price_set .p_price,#right #pop_articles article .txt .price .price_set .p_volume {
        font-size:11px
    }
}

#right #reco_items article .txt .price .price_set .p_price .tax,#right #reco_items article .txt .price .price_set .p_volume .tax,#right #pop_articles article .txt .price .price_set .p_price .tax,#right #pop_articles article .txt .price .price_set .p_volume .tax {
    font-size: 10px;
    padding-left: 3px
}

#right #reco_items article .txt .price .price_set .p_volume,#right #pop_articles article .txt .price .price_set .p_volume {
    padding-right: 4px
}

#right #reco_items article .txt .price .price_set .p_volume.none,#right #pop_articles article .txt .price .price_set .p_volume.none {
    display: none
}

#right #reco_items article .txt .price .price_set .p_price .sp_price,#right #pop_articles article .txt .price .price_set .p_price .sp_price {
    color: #6184ab
}

#right #reco_items article .txt .price .price_set .p_price .sp_price .label,#right #pop_articles article .txt .price .price_set .p_price .sp_price .label {
    vertical-align: middle;
    padding-right: 5px
}

#right #reco_items article .txt .price .price_set .p_price .regular_price,#right #pop_articles article .txt .price .price_set .p_price .regular_price {
    color: #666
}

@media screen and (min-width: 767px) {
    body.the-brew-note #right #reco_items article .txt .price .price_set .p_price .regular_price,body.dark #right #reco_items article .txt .price .price_set .p_price .regular_price,body.the-brew-note #right #pop_articles article .txt .price .price_set .p_price .regular_price,body.dark #right #pop_articles article .txt .price .price_set .p_price .regular_price {
        color:#CCC
    }
}

#right #reco_items article .txt .price .price_set .p_price::after,#right #pop_articles article .txt .price .price_set .p_price::after {
    content: "/";
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    padding: 0 5px
}

#right #reco_items article .txt .price .price_set .p_price:last-child::after,#right #pop_articles article .txt .price .price_set .p_price:last-child::after {
    display: none
}

#right #reco_items article .txt .volume,#right #reco_items article .txt .type,#right #pop_articles article .txt .volume,#right #pop_articles article .txt .type {
    color: #535657;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.7;
    transition: color .4s ease
}

@media screen and (min-width: 767px) {
    body.the-brew-note #right #reco_items article .txt .volume,body.dark #right #reco_items article .txt .volume,body.the-brew-note #right #reco_items article .txt .type,body.dark #right #reco_items article .txt .type,body.the-brew-note #right #pop_articles article .txt .volume,body.dark #right #pop_articles article .txt .volume,body.the-brew-note #right #pop_articles article .txt .type,body.dark #right #pop_articles article .txt .type {
        color:#CCC
    }
}

@media screen and (max-width: 767px) {
    #right #reco_items article .txt .volume,#right #reco_items article .txt .type,#right #pop_articles article .txt .volume,#right #pop_articles article .txt .type {
        display:none
    }
}

#lang_switch {
    width: 270px;
    height: 60px;
    /*background-color:rgba(255,250,116,0.5);*/
 	background-image: url("../img/top/yellow_base.png");
    position: fixed;
    right: 0;
    z-index: 13;
    display: flex;
    justify-content: center;
    align-items: center;
	opacity: 0;
    pointer-events: none;
    -moz-transition: bottom .4s ease,opacity .4s ease,color .4s ease,background-color .4s ease,box-shadow .4s ease;
    -o-transition: bottom .4s ease,opacity .4s ease,color .4s ease,background-color .4s ease,box-shadow .4s ease;
    -webkit-transition: bottom .4s ease,opacity .4s ease,color .4s ease,background-color .4s ease,box-shadow .4s ease;
    transition: bottom .4s ease,opacity .4s ease,color .4s ease,background-color .4s ease,box-shadow .4s ease
}
.lang_place{
	transition: all 2s ease 1s
}


@media screen and (min-width: 1500px) {
    #lang_switch {
        right:calc( (100% - 1500px) / 2 )
    }
}

@media screen and (min-width: 767px) {
    #lang_switch {
        bottom:-60px;
        box-shadow: 0 -2px 0 rgba(0,0,0,0.05)
    }
}

@media screen and (max-width: 767px) {
    #lang_switch {
        width:120px;
        height: 40px;
        bottom: 0;
        border-radius: 25px;
        right: 10px
    }
}

body.the-brew-note #lang_switch,body.dark #lang_switch {
    color: #FFF;
    background-color: #181818
}

@media screen and (min-width: 767px) {
    body.the-brew-note #lang_switch,body.dark #lang_switch {
        box-shadow:0 -2px 0 rgba(0,0,0,0.2)
    }
}

#lang_switch.load {
    bottom: 0;
	opacity: 1;
    pointer-events: auto;
    -moz-transition: bottom 2s ease 4s,opacity 2s ease 4s,color 2s ease 4s,background-color 2s ease 4s,box-shadow 2s ease 4s;
    -o-transition: bottom 2s ease 4s,opacity 2s ease 4s,color 2s ease 4s,background-color 2s ease 4s,box-shadow 2s ease 4s;
    -webkit-transition: bottom 2s ease 4s,opacity 2s ease 4s,color 2s ease 4s,background-color 2s ease 4s,box-shadow 2s ease 4s;
    -webkit-transition-delay: 1s,1s,1s,1s,1s;
    transition: bottom 2s ease 4s,opacity 2s ease 4s,color 2s ease 4s,background-color 2s ease 4s,box-shadow 2s ease 4s;
}

@media screen and (max-width: 767px) {
    #lang_switch.load {
        bottom:10px
    }
}

.vh100 #lang_switch {
    -moz-transition: bottom .4s ease .5s,opacity .4s ease .5s,color .4s ease .5s,background-color .4s ease .5s,box-shadow .4s ease .5s;
    -o-transition: bottom .4s ease .5s,opacity .4s ease .5s,color .4s ease .5s,background-color .4s ease .5s,box-shadow .4s ease .5s;
    -webkit-transition: bottom .4s ease,opacity .4s ease,color .4s ease,background-color .4s ease,box-shadow .4s ease;
    -webkit-transition-delay: .5s,.5s,.5s,.5s,.5s;
    transition: bottom .4s ease .5s,opacity .4s ease .5s,color .4s ease .5s,background-color .4s ease .5s,box-shadow .4s ease .5s
}

@media screen and (max-width: 767px) {
    .vh100 #lang_switch {
        opacity:0;
        pointer-events: none;
        bottom: 0;
        box-shadow: 0 -2px 0 transparent
    }

    body.the-brew-note .vh100 #lang_switch,body.dark .vh100 #lang_switch {
        box-shadow: 0 -2px 0 transparent
    }
}

#lang_switch #lang {
    display: flex;
    justify-content: center;
    align-items: center
}

@media screen and (min-width: 767px) {
    #lang_switch #lang .ico_lang {
        display:block;
        width: 20px;
        height: 20px;
        position: relative;
        margin-right: 10px;
        opacity: 1
    }
}

@media screen and (min-width: 767px) and (max-width: 767px) {
    #lang_switch #lang .ico_lang {
        width:16px;
        height: 16px;
        margin-right: 6px
    }
}

@media screen and (min-width: 767px) {
    #lang_switch #lang .ico_lang::before,#lang_switch #lang .ico_lang::after {
        content:"";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition: opacity .4s ease
    }

    #lang_switch #lang .ico_lang::before {
        background: url(../img/lang.svg) center center/contain no-repeat;
        opacity: 1
    }

    body.the-brew-note #lang_switch #lang .ico_lang::before,body.dark #lang_switch #lang .ico_lang::before {
        opacity: 0
    }

    #lang_switch #lang .ico_lang::after {
        background: url(../img/lang_w.svg) center center/contain no-repeat;
        opacity: 0
    }

    body.the-brew-note #lang_switch #lang .ico_lang::after,body.dark #lang_switch #lang .ico_lang::after {
        opacity: 1
    }
}

#lang_switch #lang li {
    font-size: 13px
}

@media screen and (max-width: 767px) {
    #lang_switch #lang li {
        font-size:10px
    }
}

#lang_switch #lang li.lang-item-ja::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    background-color: #535657;
    margin: 0 7px
}

body.the-brew-note #lang_switch #lang li.lang-item-ja::after,body.dark #lang_switch #lang li.lang-item-ja::after {
    background-color: #EEE
}

@media screen and (max-width: 767px) {
    #lang_switch #lang li.lang-item-ja::after {
        margin:0 5px
    }
}

#lang_switch #lang li a {
    color: #535657;
    display: inline-block;
    position: relative;
    padding: 10px 5px;
    opacity: 0.8;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (max-width: 767px) {
    #lang_switch #lang li a {
        top:-1px
    }
}

body.the-brew-note #lang_switch #lang li a,body.dark #lang_switch #lang li a {
    color: #FFF
}

#lang_switch #lang li a::after {
    content: "";
    display: block;
    width: calc( 100% - 8px );
    height: 1px;
    position: absolute;
    bottom: 10px;
    left: 4px;
    background-color: #000;
    opacity: 0;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

body.the-brew-note #lang_switch #lang li a::after,body.dark #lang_switch #lang li a::after {
    background-color: #FFF
}

#lang_switch #lang li a:hover {
    color: #6184ab;
    opacity: 1
}

#lang_switch #lang li.current-lang a {
    opacity: 1;
    pointer-events: none
}

#lang_switch #lang li.current-lang a::after {
    opacity: 1
}

.en .only_jp {
    display: none !important
}

.jp .only_jp {
    display: block
}

.only_en {
    display: none !important
}

.en .only_en {
    display: block !important
}

#keyword {
    width: 270px;
    padding: 25px 18px 30px;
    background-color: #f9f9f6;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 12;
    opacity: 0;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    pointer-events: none;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 767px) {
    body.the-brew-note #keyword,body.dark #keyword {
        background-color:#181818
    }
}

#keyword.active {
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
    pointer-events: auto
}

@media screen and (min-width: 1500px) {
    #keyword {
        right:calc( (100% - 1500px) / 2 )
    }
}

@media screen and (min-width: 767px) {
    .short #keyword {
        opacity:1;
        pointer-events: auto
    }

    .en #keyword {
        display: none !important
    }
}

@media screen and (max-width: 767px) {
    #keyword {
        display:none
    }
}

#keyword::before {
    content: "";
    display: block;
    width: 100%;
    height: 30px;
    position: absolute;
    top: -29px;
    left: 0;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmNiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmOWY5ZjYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(249,249,246,0)),color-stop(100%, #f9f9f6));
    background: -moz-linear-gradient(rgba(249,249,246,0),#f9f9f6);
    background: -webkit-linear-gradient(rgba(249,249,246,0),#f9f9f6);
    background: linear-gradient(rgba(249,249,246,0),#f9f9f6)
}

@media screen and (min-width: 767px) {
    body.the-brew-note #keyword::before,body.dark #keyword::before {
        background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmNiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxODE4MTgiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
        background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(249,249,246,0)),color-stop(100%, #181818));
        background: -moz-linear-gradient(rgba(249,249,246,0),#181818);
        background: -webkit-linear-gradient(rgba(249,249,246,0),#181818);
        background: linear-gradient(rgba(249,249,246,0),#181818)
    }
}

#keyword h3 {
    color: #000;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.7;
    text-align: center;
    margin: 0 0 15px
}

@media screen and (min-width: 767px) {
    body.the-brew-note #keyword h3,body.dark #keyword h3 {
        color:#EEE
    }
}

#keyword h3 small {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em
}

.en #keyword h3 small {
    display: none
}

#keyword ul {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap
}

#keyword ul li {
    display: inline-block;
    margin: 4px 2px
}

#keyword ul li a {
    color: #000;
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 26px;
    padding: 0 8px;
    background-color: #FFF;
    border-radius: 15px;
    border: 1px solid #FFF;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 767px) {
    body.the-brew-note #keyword ul li a,body.dark #keyword ul li a {
        color:#EEE;
        background-color: #222;
        border-color: #222
    }
}

@media screen and (min-width: 1080px) {
    #keyword ul li a:hover {
        color:#6184ab;
        border-color: #6184ab
    }
}

@media screen and (min-width: 1080px) and (min-width: 767px) {
    body.the-brew-note #keyword ul li a:hover,body.dark #keyword ul li a:hover {
        color:#FFF;
        background-color: #6184ab
    }
}

@media screen and (max-width: 767px) {
    #keyword ul li a {
        font-size:11px
    }
}

#fixed_nav {
    width: 270px;
    /*background-color:rgba(255,250,116,0.5);*/
 	background-image: url("../img/top/yellow_base.png");
    position: fixed;
    top: 0;
    right: 0;
    z-index: 13;
    box-shadow: 0 2px 0 rgba(0,0,0,0.05);
	transition: all 2s ease 1s
}

@media screen and (min-width: 1500px) {
    #fixed_nav {
        right:calc( (100% - 1500px) / 2 )
    }
}

@media screen and (min-width: 767px) {
    body.the-brew-note #fixed_nav,body.dark #fixed_nav {
        background-color:#181818;
        box-shadow: 0 2px 0 rgba(0,0,0,0.2)
    }
}

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

#fixed_nav #main_nav {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 5px;
    margin: 0 0 15px;
    position: relative
}



#fixed_nav #main_nav.contact_menu  {
    margin: 15px 0!important;
	padding-top: 10px;
}

.en #fixed_nav #main_nav {
    margin: 15px 0 15px
}

#fixed_nav #main_nav::after {
    content: "";
    display: block;
    width: calc( 100% - 30px );
    height: 1px;
    background-color: #9db3cd;
    position: absolute;
    bottom: -14px;
    left: 15px
}

#fixed_nav #main_nav.contact_menu::after {
    bottom: -10.5px!important;
}

@media screen and (min-width: 767px) {
    body.the-brew-note #fixed_nav #main_nav::after,body.dark #fixed_nav #main_nav::after {
        background-color:#222
    }
}

#fixed_nav #main_nav li {
    width: 50%;
    height: 50px;
    line-height: 1.7;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 15px 0;
    position: relative;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}


#fixed_nav #main_nav.contact_menu li {
    width: 100%!important;
    height: 100%!important;
	margin: 6px 0px!important;
}

.scroll #fixed_nav #main_nav li {
    height: 30px
}

.scroll #fixed_nav #main_nav.contact_menu li {
	padding: 8px 0 0;
}

#fixed_nav #main_nav.contact_menu li:nth-child(odd)::after {
    width: 0px!important;
}

#fixed_nav #main_nav li:nth-child(odd)::after {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    background-color: #9db3cd;
    position: absolute;
    top: 0;
    right: -1px
}

@media screen and (min-width: 767px) {
    body.the-brew-note #fixed_nav #main_nav li:nth-child(odd)::after,body.dark #fixed_nav #main_nav li:nth-child(odd)::after {
        background-color:#222
    }
}

#fixed_nav #main_nav li .shop_nav_child {
    opacity: 0;
    pointer-events: none;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    position: absolute;
    left: 3px;
    bottom: -126px;
    z-index: 2;
	background-image: url("../img/top/white_base1.png");
    width: calc( 100% + 0px );
    height: auto;
    padding: 10px 10px 10px 10px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1)
}

@media screen and (min-width: 767px) {
    body.the-brew-note #fixed_nav #main_nav li .shop_nav_child,body.dark #fixed_nav #main_nav li .shop_nav_child {
        background-color:#181818;
        box-shadow: 0 2px 3px rgba(0,0,0,0.3)
    }
}

.scroll #fixed_nav #main_nav li .shop_nav_child {
    bottom: -120px
}

#fixed_nav #main_nav li .shop_nav_child li {
    width: 100%;
    margin: 3px 0
}

#fixed_nav #main_nav li .shop_nav_child li a {
    font-size: 12px;
	display: block;
	line-height: 1.4;
}

#fixed_nav #main_nav li .shop_nav_child li::after {
    display: none
}

#fixed_nav #main_nav li.shop:hover .shop_nav_child {
    opacity: 1;
    pointer-events: auto
}

#fixed_nav #main_nav li a {
    color: #535657;
    display: block;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.1em;
    position: relative;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 767px) {
    body.the-brew-note #fixed_nav #main_nav li a,body.dark #fixed_nav #main_nav li a {
        color:#EEE
    }
}

.scroll #fixed_nav #main_nav li a {
    top: 7px
}

.en .scroll #fixed_nav #main_nav li a {
    top: 0
}

#fixed_nav #main_nav li a small {
    color: #535657;
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    opacity: 1;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 767px) {
    body.the-brew-note #fixed_nav #main_nav li a small,body.dark #fixed_nav #main_nav li a small {
        color:#CCC
    }
}

.scroll #fixed_nav #main_nav li a small {
    opacity: 0
}

.en #fixed_nav #main_nav li a small {
    display: none
}

#fixed_nav #main_nav li a .ico {
    fill: #6184ab
}

@media screen and (min-width: 1080px) {
    #fixed_nav #main_nav li a:hover {
        color:#6184ab !important
    }

    #fixed_nav #main_nav li a:hover small {
        color: #6184ab !important
    }

    #fixed_nav #main_nav li a:hover .ico svg {
        fill: #6184ab !important
    }
}

#fixed_nav #main_nav li#search_articles,#fixed_nav #main_nav li.mycart {
    margin: 14px 0 26px
}

.en #fixed_nav #main_nav li#search_articles,.en #fixed_nav #main_nav li.mycart {
    margin: 7px 0;
    letter-spacing: 0.1em
}

#fixed_nav #main_nav li#search_articles::before,#fixed_nav #main_nav li.mycart::before {
    content: "";
    display: block;
    width: calc( 100% - 10px );
    height: 1px;
    background-color: #9db3cd;
    position: absolute;
    bottom: -20px
}

#fixed_nav #main_nav li.underline_blue_l,#fixed_nav #main_nav li.underline_blue_r{
	margin: 15px 0 26px;
}

#fixed_nav #main_nav li.underline_blue_l::before{
    content: "";
    display: block;
    width: calc( 100% - 10px );
    height: 1px;
    background-color: #9db3cd;
    position: absolute;
    bottom: -21px;
	left: 10px;

}

#fixed_nav #main_nav li.underline_blue_r::before{
    content: "";
    display: block;
    width: calc( 100% - 10px );
    height: 1px;
    background-color: #9db3cd;
    position: absolute;
    bottom: -21px;
	right: 10px
}

@media screen and (min-width: 767px) {
    body.the-brew-note #fixed_nav #main_nav li#search_articles::before,body.dark #fixed_nav #main_nav li#search_articles::before,body.the-brew-note #fixed_nav #main_nav li.mycart::before,body.dark #fixed_nav #main_nav li.mycart::before {
        background-color:#222
    }
}

.en #fixed_nav #main_nav li#search_articles::before,.en #fixed_nav #main_nav li.mycart::before {
    display: none
}

#fixed_nav #main_nav li#search_articles a,#fixed_nav #main_nav li.mycart a {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.scroll #fixed_nav #main_nav li#search_articles a,.scroll #fixed_nav #main_nav li.mycart a {
    top: 0
}

#fixed_nav #main_nav li#search_articles span,#fixed_nav #main_nav li.mycart span {
    position: relative
}

#fixed_nav #main_nav li#search_articles .ico,#fixed_nav #main_nav li.mycart .ico {
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 13px
}

#fixed_nav #main_nav li#search_articles .ico svg,#fixed_nav #main_nav li.mycart .ico svg {
    fill: #535657;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 767px) {
    body.the-brew-note #fixed_nav #main_nav li#search_articles .ico svg,body.dark #fixed_nav #main_nav li#search_articles .ico svg,body.the-brew-note #fixed_nav #main_nav li.mycart .ico svg,body.dark #fixed_nav #main_nav li.mycart .ico svg {
        fill:#EEE
    }
}

#fixed_nav #main_nav li#search_articles {
    font-weight: 600;
    cursor: pointer
}

#fixed_nav #main_nav li#search_articles::before {
    right: 0
}

#fixed_nav #main_nav li#search_articles span {
    left: -2px
}

#fixed_nav #main_nav li#search_articles .txt {
    color: #535657;
    font-size: 12px;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 767px) {
    body.the-brew-note #fixed_nav #main_nav li#search_articles .txt,body.dark #fixed_nav #main_nav li#search_articles .txt {
        color:#EEE
    }
}

@media screen and (min-width: 1080px) {
    #fixed_nav #main_nav li#search_articles:hover {
        color:#667f9b !important
    }

    #fixed_nav #main_nav li#search_articles:hover .ico svg {
        fill: #667f9b !important
    }

    #fixed_nav #main_nav li#search_articles:hover .txt {
        color: #667f9b !important
    }
}

#fixed_nav #main_nav li.mycart {
    font-weight: 500
}

#fixed_nav #main_nav li.mycart::before {
    left: 0
}

#fixed_nav #main_nav li.mycart .ico {
    width: 20px;
    height: 20px
}

#fixed_nav #main_nav li.mycart .txt {
    font-size: 12px
}

#fixed_nav #sns_nav {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    padding: 10px 0 20px;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

.scroll #fixed_nav #sns_nav {
    padding: 10px 0 23px
}

#fixed_nav #sns_nav::before {
	white-space:pre;
    content: "follow\Akokiafeca";
	color: #535657;
	font-family:  BrownNow,Tipique_Regular,YakuHanJP,Jost,Roboto;
    display: block;
    width: auto;
    height: 11px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1;
    margin: 0 23px 22px 0;
    opacity: 1;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 767px) {
    body.the-brew-note #fixed_nav #sns_nav::before,body.dark #fixed_nav #sns_nav::before {
        color:#EEE
    }
}

#fixed_nav #sns_nav li {
    width: 40px;
    margin: 0 0;
    text-align: center
}

#fixed_nav #sns_nav li a {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto
}

#fixed_nav #sns_nav li a svg {
    width: 18px;
    height: 18px;
    fill: #535657;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

#fixed_nav #sns_nav li a svg {
    width: 18px;
    height: 18px;
    filter: invert(35%) sepia(7%) saturate(181%) hue-rotate(149deg) brightness(91%) contrast(91%);
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}


@media screen and (min-width: 767px) {
    body.the-brew-note #fixed_nav #sns_nav li a svg,body.dark #fixed_nav #sns_nav li a svg {
        fill:#EEE
    }
    body.the-brew-note #fixed_nav #sns_nav li a svg,body.dark #fixed_nav #sns_nav li a img {
        filter: invert(99%) sepia(1%) saturate(437%) hue-rotate(237deg) brightness(119%) contrast(87%);
    }
}

#fixed_nav #sns_nav li a:hover svg {
    fill: #667f9b !important
}

#fixed_nav #sns_nav li a:hover img {
    filter: invert(49%) sepia(49%) saturate(251%) hue-rotate(171deg) brightness(90%) contrast(90%) !important;
}

#fixed_nav #sns_nav li.tw a svg {
    width: 20px;
    height: 20px
}

#fixed_nav #sns_nav li.fb a svg {
    width: 20px;
    height: 20px
}

header {
    width: 100%;
    height: 100px;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    background-color: transparent;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (max-width: 767px) {
    header {
        height:50px;
        background-color: transparent
    }
}

header .w_1500 {
    height: 100%;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center
}

@media screen and (min-width: 767px) {
    header .w_1500 {
        padding:0 10px
    }
}

@media screen and (max-width: 767px) {
    header .w_1500 {
        padding:0 20px
    }
}


@media screen and (max-width: 767px) {
    header.scl_cover #logo a img {
	    margin-top: 9.5vw!important;
        -moz-transition:all .4s ease .5s;
        -o-transition: all .4s ease .5s;
        -webkit-transition: all .4s ease;
        -webkit-transition-delay: .5s;
        transition: all .4s ease 0s;
    }
    header.simple_cover2 #logo a img {
	    margin-top: 9.5vw!important;
        -moz-transition:all .4s ease .5s;
        -o-transition: all .4s ease .5s;
        -webkit-transition: all .4s ease;
        -webkit-transition-delay: .5s;
        transition: all .4s ease 0s;
    }
    header.scl_cover #logo.search_articles_nav_active a img {
		filter:  invert(100%) sepia(0%) saturate(0%) hue-rotate(355deg) brightness(100%) contrast(100%)!important;
	}

    header.simple_cover2 #logo.search_articles_nav_active a img {
		filter:  invert(100%) sepia(0%) saturate(0%) hue-rotate(355deg) brightness(100%) contrast(100%)!important;
	}

    header.simple_cover2.scl_cover #logo.search_articles_nav_active a img {
		filter:  invert(100%) sepia(0%) saturate(0%) hue-rotate(355deg) brightness(100%) contrast(100%)!important;
	}

    header.scl_cover #logo.sp_menu_active a img {
		filter:  invert(100%) sepia(0%) saturate(0%) hue-rotate(355deg) brightness(100%) contrast(100%)!important;
	}

    header.simple_cover2 #logo.sp_menu_active a img {
		filter:  invert(100%) sepia(0%) saturate(0%) hue-rotate(355deg) brightness(100%) contrast(100%)!important;
	}

    header.simple_cover2.scl_cover #logo.sp_menu_active a img {
		filter:  invert(100%) sepia(0%) saturate(0%) hue-rotate(355deg) brightness(100%) contrast(100%)!important;
	}

	header #logo a img{
		margin-top: 50px!important;
	}
	
	
	header #logo.sp_menu_active a img {
		filter:  invert(100%) sepia(0%) saturate(0%) hue-rotate(355deg) brightness(100%) contrast(100%)!important;
	}
}

header #logo {
    position: relative;
    -moz-transition: all .8s ease;
    -o-transition: all .8s ease;
    -webkit-transition: all .8s ease;
    transition: all .8s ease
}

@media screen and (min-width: 767px) {
    header #logo {
        left:14px
    }
}

@media screen and (max-width: 767px) {
    header #logo {
        width:19vw;
		top: 6px;
        -moz-transition: all .4s ease;
        -o-transition: all .4s ease;
        -webkit-transition: all .4s ease;
        transition: all .4s ease
    }
}

header #logo a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}

.search_articles_nav_active header #logo a{
		pointer-events: none;
	}
	
.sp_menu_active header #logo a{
		pointer-events: none;
	}


header #logo a svg {
    /*filter: invert(63%) sepia(16%) saturate(402%) hue-rotate(172deg) brightness(91%) contrast(85%);*/
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(40%);
    -moz-transition: all .4s ease 1s;
    -o-transition: all .4s ease 1s;
    -webkit-transition: all .4s ease;
    -webkit-transition-delay: 1s;
    transition: all 2s ease 1s
}

header #logo a img{
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(40%);
    -moz-transition: all 2s ease 1s;
    -o-transition: all 2s ease 1s;
    -webkit-transition: all .4s ease;
    -webkit-transition-delay: 1s;
    transition: all 1s ease 0s;
	height: 170px;
	margin-top: 90px;

}

@media screen and (max-width: 767px) {
header #logo a img{
    transition: all .8s ease 0s;
}
}


header #logo.search_articles_nav_active  a img{
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)!important;
}

header .single_logo #logo a img{
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(40%)!important;
}



header .template_simple #logo a img{
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(40%)!important;
}


header .template_simple #logo a img{
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(40%)!important;
}

.search_articles_nav_active header .template_simple #logo a img{
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)!important;
}

.sp_menu_active header .template_simple #logo a img{
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)!important;
}

header.scl_cover #logo a img {
	height: 170px;
	margin-top: 85px;
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
    -moz-transition: all .4s ease 1s;
    -o-transition: all .4s ease 1s;
    -webkit-transition: all .4s ease;
    -webkit-transition-delay: 1s;
    transition: all 2s ease 0s;
}

header.scl_cover.vh100 #logo a img {
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(40%)!important;
}
header.scroll.vh100 #logo a img {
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(40%)!important;
}

header.scroll.vh100 #logo.sp_menu_active a img {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)!important;
}

header.scroll.vh100 #logo.search_articles_nav_active a img {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)!important;
}

header.simple_cover2 #logo a img {
	height: 170px;
	margin-top: 85px;
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(40%)!important;
    -moz-transition: all .4s ease 1s;
    -o-transition: all .4s ease 1s;
    -webkit-transition: all .4s ease;
    -webkit-transition-delay: 1s;
    transition: all .4s ease 0s;
}



header.scl_cover .single_logo #logo a img {
	height: 170px;
	margin-top: 85px;
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)!important;
    -moz-transition: all .4s ease 1s;
    -o-transition: all .4s ease 1s;
    -webkit-transition: all .4s ease;
    -webkit-transition-delay: 1s;
    transition: all 0.8s ease 0s;
}

header.simple_cover2.scl_cover #logo a img {
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(40%)!important;
}



header .scl_cover .single_logo #logo a img {
	filter: invert(100%) sepia(0%) saturate(100%) hue-rotate(90deg) brightness(200%) contrast(100%)!important;
}

header.scroll #logo a img{
	height: 135px;
	filter: invert(100%) sepia(0%) saturate(100%) hue-rotate(90deg) brightness(200%) contrast(100%);
	margin-top:90px;
}

.black_white header.scroll #logo a img{
    transition: all 1s ease 0s!important;
}

.black_white header.scroll.vh100 #logo a img{
	filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(90deg) brightness(200%) contrast( 40%);
}

header.scroll .single_logo #logo a img{
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(40%)!important;
}

header.scl_cover.scroll .single_logo #logo a img{
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)!important
}


header.scroll.vh100 .single_logo #logo a img{
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(40%)!important;
}


header.scroll.toppage_c .single_logo #logo a img{
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)!important
}


header.scroll .single_logo #logo.sp_menu_active a img{
	filter: invert(100%) sepia(0%) saturate(100%) hue-rotate(90deg) brightness(200%) contrast(100%)!important;
}


header.scroll .single_logo #logo.search_articles_nav_active a img{
	filter: invert(100%) sepia(0%) saturate(100%) hue-rotate(90deg) brightness(200%) contrast(100%)!important;
}

.about header #logo a img {
filter: invert(100%) sepia(0%) saturate(100%) hue-rotate(90deg) brightness(200%) contrast(100%)!important;
}

.the-brew-note header #logo a img {
filter: invert(100%) sepia(0%) saturate(100%) hue-rotate(90deg) brightness(200%) contrast(100%);
}

@media screen and (max-width: 767px) {
    header #logo a svg {
        -moz-transition:all .4s ease;
        -o-transition: all .4s ease;
        -webkit-transition: all .4s ease;
        transition: all .4s ease
    }
	
	header #logo a img {
		margin-top: 9.5vw!important;
	}
	
}

.sp_menu_active header #logo a svg {
filter: invert(100%) sepia(0%) saturate(402%) hue-rotate(90deg) brightness(200%) contrast(100%)!important;
}

@media screen and (max-width: 767px) {
    .search_articles_nav_active header #logo a svg {
        fill:#777 !important
    }
}

@media screen and (min-width: 1080px) {
    header #logo a:hover {
        opacity:0.7
    }
}




.jp header.scl_cover #logo a.only_jp {
    display: flex !important
}

.en header.scl_cover #logo a.only_en {
    display: flex !important
}


@media screen and (min-width: 767px) {
    .en header .copy {
        top:5px
    }
}

@media screen and (max-width: 767px) {
    header .copy {
        width:calc( 45vw - 4px );
        position: absolute;
        top: 4.5vw!important;
        left: 10px!important;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        -webkit-transition: all 1s ease;
        transition: all 2s ease 2s;
    }
}


header .copy .top_logo1 {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(40%);
    animation-name: fadeOutlogo;
    animation-timing-function: ease-in-out;
    animation-duration:.7s!important;
    animation-delay: 2.2s!important;
    animation-fill-mode: forwards;
	opacity: 1;
	position: absolute;
	left: 0;
    top: -45px;
}

@media screen and (max-width: 767px) {
    header .copy .top_logo1 {
        display: none;
    }
}

header .single_log .copy .top_logo1 {
	filter: invert(100%) sepia(0%) saturate(402%) hue-rotate(90deg) brightness(200%) contrast(100%)!important;
}


header .copy .top_logo1_1 {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(40%);
	opacity: 0;
	display: none;
}

header .template_simple .copy .top_logo1_1 {
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(40%)!important;
	opacity: 0;
	display: none;
}


header .single_logo .copy .top_logo1{
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(40%)!important;
}


header .template_simple .copy .top_logo1 {
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(40%)!important;
}

header .copy .top_logo2 {
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(40%);
    animation-name: fadeInlogo;
    animation-timing-function: ease-in-out;
    animation-duration:2s!important;
    animation-delay: 2.8s!important;
	animation-fill-mode:both;
	opacity: 0;
	position: absolute;
	left: 0;
    top: -45px;
	/*display: none;*/
}

header.scroll.vh100 .copy .top_logo2 {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)!important;
}

.sp_menu_active header.scroll.vh100 .copy .top_logo2 {
/*	opacity: 0!important;*/
}

.search_articles_nav_active header.scroll.vh100 .copy .top_logo2 {
/*	opacity: 0!important;*/
}

header.scroll.vh100.simple_cover2 .copy .top_logo2 {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(40%)!important;
}

@media screen and (max-width: 767px) {
header .copy .top_logo2 {
    top: calc(-4.6vw - 4px);
}
}

@media screen and (max-width: 700px) {
header .copy .top_logo2 {
    top: calc( -3.5vw - 10px );
}
}

@media screen and (max-width: 530px) {
header .copy .top_logo2 {
    top: calc( -5vw - 2px );
}
}

@media screen and (max-width: 410px) {
header .copy .top_logo2 {
    top: -5.1vw;
}
}

@media screen and (max-width: 320px) {
header .copy .top_logo2 {
    top: -5.3vw;
}
}

@media screen and (max-width: 260px) {
header .copy .top_logo2 {
    top: -5vw;
}
}


header .single_logo .copy .top_logo2 {
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(40%)!important
}

header .template_simple .copy .top_logo2 {
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(40%)!important;
}


.search_articles_nav_active header .single_logo .copy .top_logo2 {
	filter: invert(100%) sepia(0%) saturate(402%) hue-rotate(90deg) brightness(200%) contrast(100%)!important;
}

.search_articles_nav_active header .template_simple .copy .top_logo2 {
	filter: invert(100%) sepia(0%) saturate(402%) hue-rotate(90deg) brightness(200%) contrast(100%)!important;
}



.sp_menu_active header .single_logo .copy .top_logo2 {
	filter: invert(100%) sepia(0%) saturate(402%) hue-rotate(90deg) brightness(200%) contrast(100%)!important;
}

.sp_menu_active header .template_simple .copy .top_logo2 {
	filter: invert(100%) sepia(0%) saturate(402%) hue-rotate(90deg) brightness(200%) contrast(100%)!important;
}



header.scl_cover .copy .top_logo1 {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(40%);
	opacity: 0;
	display: none;
}


header.simple_cover2 .copy .top_logo1 {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(40%);
	opacity: 0;
	display: none;
}

header.simple_cover2.scl_cover .copy .top_logo1 {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(40%);
	opacity: 0;
	display: none;
}

header.scl_cover .single_logo .copy .top_logo1{
	filter: invert(100%) sepia(0%) saturate(402%) hue-rotate(90deg) brightness(200%) contrast(100%)!important;
}

/* header.scl_cover .template_simple .copy .top_logo1{
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(40%)!important;
} */

header.scl_cover .single_logo .copy.sp_menu_active .top_logo1{
	filter:  invert(0%) sepia(0%) saturate(0%) hue-rotate(355deg) brightness(100%) contrast(100%)!important
}

header.scl_cover .single_logo .copy.search_articles_nav_active .top_logo1{
	filter:  invert(0%) sepia(0%) saturate(0%) hue-rotate(355deg) brightness(100%) contrast(100%)!important
}

header.simple_cover2 .single_logo .copy.sp_menu_active .top_logo1{
	filter:  invert(0%) sepia(0%) saturate(0%) hue-rotate(355deg) brightness(100%) contrast(100%)!important
}

header.simple_cover2 .single_logo .copy.search_articles_nav_active .top_logo1{
	filter:  invert(0%) sepia(0%) saturate(0%) hue-rotate(355deg) brightness(100%) contrast(100%)!important
}


header .single_logo .copy.sp_menu_active .top_logo1{
	filter:  invert(0%) sepia(0%) saturate(0%) hue-rotate(355deg) brightness(100%) contrast(100%)!important	
}

header .single_logo .copy.search_articles_nav_active .top_logo1{
	filter:  invert(0%) sepia(0%) saturate(0%) hue-rotate(355deg) brightness(100%) contrast(100%)!important	
}

header.scl_cover .copy .top_logo2 {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
    animation-name: fadeInlogo;
    animation-timing-function: ease-in-out;
    animation-duration:2s!important;
    animation-delay: 2.8s!important;
	animation-fill-mode:both;
	opacity: 0;
	display: block;
}

header.simple_cover2.scl_cover .copy .top_logo2 {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(40%)!important;
}

header.simple_cover2.scl_cover .copy .top_logo1 {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(40%)!important;
}


header.scl_cover .copy .top_logo1 {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

header.scl_cover .copy.sp_menu_active .top_logo2 {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(355deg) brightness(103%) contrast(103%)!important;
}

header.simple_cover2 .copy.sp_menu_active .top_logo2 {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(355deg) brightness(103%) contrast(103%)!important;
}

header .copy.sp_menu_active .top_logo2 {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(355deg) brightness(103%) contrast(103%)!important;
}

header .copy.search_articles_nav_active .top_logo2 {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)!important
}


header.scl_cover .copy.search_articles_nav_active .top_logo2 {
	filter:  invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(40%);
}

header.simple_cover2 .copy.search_articles_nav_active .top_logo2 {
	filter:  invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(40%);
}

header.scl_cover .single_logo .copy .top_logo2 {
	filter: invert(100%) sepia(0%) saturate(402%) hue-rotate(90deg) brightness(200%) contrast(100%)!important;
}

eader.simple_cover2.scl_cover .single_logo .copy .top_logo2 {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(40%)!important;
}



/* header.scl_cover .template_simple .copy .top_logo2 {
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(40%)!important;
} */


/*
header.scl_cover .single_logo .copy.sp_menu_active .top_logo2{
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(40%) !important;
}
*/

header.simple_cover2 .single_logo .copy.sp_menu_active .top_logo2{
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(40%) !important;
}

@media screen and (max-width: 767px) {
header.scl_cover .single_logo .copy.sp_menu_active .top_logo2{
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}
header.simple_cover2 .single_logo .copy.sp_menu_active .top_logo2{
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}
header .single_logo .copy .top_logo2{
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(00deg) brightness(200%) contrast(40%) !important;
}
header.scl_cover .single_logo .copy .top_logo2 {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(00deg) brightness(200%) contrast(100%)!important
}
header.scl_cover.simple_cover2 .single_logo .copy .top_logo2 {
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(00deg) brightness(200%) contrast(40%)!important;
}
.search_articles_nav_active header.scl_cover.simple_cover2 .single_logo .copy .top_logo2 {
	filter:  invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)!important;
}
	
.sp_menu_active header.scl_cover.simple_cover2 .single_logo .copy .top_logo2 {
	filter:  invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)!important;
}
	
header.scl_cover .copy.search_articles_nav_active .top_logo2 {
	filter:  invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)!important;
}
header.simple_cover2 .copy.search_articles_nav_active .top_logo2 {
	filter:  invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)!important;
}
header.simple_cover2 .single_logo .copy .top_logo2{
    transition: all .4s ease 0s;
}
header.scl_cover .copy .top_logo2{
    animation-duration: .4s !important;
    animation-delay: 0s !important;
}
header .copy{
    top: 35px;
}

header .copy .top_logo2{
    animation-duration: 1s !important;
    animation-delay: 2s !important;
}

header.scl_cover .single_logo .copy{
    transition: all 1s ease 0s!important;
    filter:none!important;
}
header.scl_cover .copy{
    transition: all 1s ease 0s!important;
    filter:none!important;
}
}


header.scl_cover .single_logo.template_simple .copy.sp_menu_active .top_logo2{
   	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(355deg) brightness(103%) contrast(103%)!important;
}


header.simple_cover2 .single_logo.template_simple .copy.sp_menu_active .top_logo2{
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(355deg) brightness(103%) contrast(103%)!important;
}

.search_articles_nav_active header .single_logo .copy.sp_menu_active .top_logo2{
	filter:  invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)!important;
}

.sp_menu_active header .single_logo .copy.sp_menu_active .top_logo2{
	filter:  invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)!important;
}


header .single_logo .copy.sp_menu_active .top_logo2{
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(40%) !important;
}



header.scroll .copy .top_logo1 {
	opacity: 0;
	display: none!important;
}

@media screen and (max-width: 767px) {
header.scroll .copy .top_logo2 {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(355deg) brightness(103%) contrast(103%) !important;
}

header.scroll.simple_cover2 .copy .top_logo2 {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(40%)!important;
}

.search_articles_nav_active header.scroll.simple_cover2 .copy .top_logo2 {
	filter:  invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)!important;
}

.sp_menu_active header.scroll.simple_cover2 .copy .top_logo2 {
	filter:  invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)!important;
}

header.scroll .copy .top_logo1 {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(355deg) brightness(103%) contrast(103%) !important;
}
}

header.scroll .copy .top_logo2 {
	display: block;
}
@keyframes fadeInlogo{
  0% { display: none;opacity: 0;top: -10px}
  1% {display: block;opacity: 0;top: -10px}
  100% {display: block;opacity: 1;}
}
@keyframes fadeOutlogo{
  0% { display: block;opacity: 1;}
  99% {display: block;opacity: 0;top: -15px}
  100% {display: none;opacity: 0;top: -15px}
}

header .copy {
    width: 300px;
    margin-left: 30px;
    position: relative;
    top: 41px;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    -moz-transition: all 2s ease 1s;
    -o-transition: all 2s ease 1s;
    -webkit-transition: all .4s ease;
    -webkit-transition-delay: 1s;
    transition: all 3s ease 1s;
}

header .copy_1{
    -moz-transition: all 2s ease 1s;
    -o-transition: all 2s ease 1s;
    -webkit-transition: all .4s ease;
    -webkit-transition-delay: 1s;
    transition: all 1s ease 1s;
}

header .copy_1 .load{
	display: none;
}


header.scl_cover .copy {
	opacity: 1;
	/*filter: invert(100%) sepia(0%) saturate(100%) hue-rotate(172deg) brightness(100%) contrast(100%);*/
    -moz-transition: all 2s ease 1s;
    -o-transition: all 2s ease 1s;
    -webkit-transition: all 2s ease;
    -webkit-transition-delay: 1s;
    transition: all 2s ease 1s
}

header.scl_cover .single_logo .copy {
	opacity: 1;
	/*filter: invert(100%) sepia(0%) saturate(100%) hue-rotate(172deg) brightness(100%) contrast(100%);*/
    -moz-transition: all 2s ease 1s;
    -o-transition: all 2s ease 1s;
    -webkit-transition: all 2s ease;
    -webkit-transition-delay: 1s;
    transition: all 2s ease 1s
}


header.scroll .copy {
    opacity: 0!important;
	width: 250px;
}


@media screen and (max-width: 767px) {
	
header.scroll .copy.sp_menu_active {
    opacity: 0!important;
	width: 30vw;;
}
header.scroll .copy {
    opacity: 0!important;
	width: 30vw;
}
}



/*
header.scroll .copy.sp_menu_active {
	opacity: 1!important;
}
*/

@media screen and (max-width: 767px) {
    header .copy {
		width: calc(40vw - 4px);
		margin-left: 0px;
    }
    header.scl_cover .copy {
        -moz-transition:all .4s ease .5s;
        -o-transition: all .4s ease .5s;
        -webkit-transition: all .4s ease;
        -webkit-transition-delay: .5s;
        transition: all .2s ease .1s;
		width: 35vw;
		margin-left: 0px;
    }
}

@media screen and (max-width: 570px) {
    header.scl_cover .copy {
		width: 38vw;
    }
}


@media screen and (max-width: 767px) {
    header .copy {
        -moz-transition:all 1s ease 1s;
        -o-transition: all 1s ease 1s;
        -webkit-transition: all 1s ease 1s;
        transition: all 1s ease 1s;
    }
}

.about header .copy {
    ffilter: invert(100%) sepia(16%) saturate(402%) hue-rotate(172deg) brightness(100%) contrast(85%)!important
}

.the-brew-note header .copy {
    filter: invert(100%) sepia(16%) saturate(402%) hue-rotate(172deg) brightness(100%) contrast(85%)
}

.sp_menu_active header .copy {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(172deg) brightness(100%) contrast(100%) !important;
	opacity: 1;
}

.sp_menu_active header.scroll .copy {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(172deg) brightness(100%) contrast(100%) !important;
	opacity: 1;
}

.article-single.sp_menu_active header .copy {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
	
}

.black_white.sp_menu_active header .copy {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(40%) !important;
	
}

@media screen and (max-width: 767px) {
    .search_articles_nav_active header .copy {
        filter: invert(70%) sepia(16%) saturate(402%) hue-rotate(172deg) brightness(91%) contrast(85%)!important;
    }
	 .search_articles_nav_active header .copy.search_articles_nav_active {
        filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)!important;
	}
	.search_articles_nav_active header .copy.sp_menu_activee {
        filter: invert(99%) sepia(1%) saturate(5%) hue-rotate(355deg) brightness(103%) contrast(103%)!important;
	}
}

@media screen and (min-width: 767px) {
    .shop header .copy,.shop-category header .copy,.brand header .copy,.shop-guide header .copy {
        opacity:0
    }
}

@media screen and (min-width: 1350px) {
    .shop header .copy,.shop-category header .copy,.brand header .copy,.shop-guide header .copy {
        opacity:1
    }
}



header #brand_list,header #shop_category_list {
    opacity: 0;
    pointer-events: none;
    position: absolute
}

header .shop_nav_list {
    width: 424px;
    position: absolute;
    top: 70px;
    right: 320px
}

header .shop_nav_list #brand_list,header .shop_nav_list #shop_category_list {
    width: 100%;
	background-image: url("../img/top/white_base1.png");
	/*background-color:rgba(255,250,116,0.35);*/
    border-radius: 15px;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    transform: translate(0, -10px);
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

header .shop_nav_list #brand_list.active,header .shop_nav_list #shop_category_list.active {
    opacity: 1;
    pointer-events: auto;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

header .shop_nav_list #brand_list ul,header .shop_nav_list #shop_category_list ul {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap
}

header .shop_nav_list #brand_list ul li,header .shop_nav_list #shop_category_list ul li {
    display: inline-block;
    margin: 5px
}

header .shop_nav_list #brand_list ul li a,header .shop_nav_list #shop_category_list ul li a {
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 30px;
    padding: 0 10px;
	background-color:rgba(102,127,155,0.8);
    /*background-color: #FFF;*/
    border-radius: 15px;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 1080px) {
    header .shop_nav_list #brand_list ul li a:hover,header .shop_nav_list #shop_category_list ul li a:hover {
        color:#6184ab
    }
}

header #shop_nav {
    width: 422px;
    height: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 20px;
    right: 320px;
    opacity: 0;
    pointer-events: none
}

@media screen and (min-width: 1500px) {
    header #shop_nav {
        right:calc( (100% - 1500px) / 2 + 320px )
    }
}

@media screen and (max-width: 767px) {
    header #shop_nav {
        display:none
    }
}

.shop header #shop_nav,.shop-category header #shop_nav,.brand header #shop_nav,.shop-guide header #shop_nav {
    opacity: 1;
    pointer-events: auto
}

header #shop_nav li {
    width: 140px;
    height: 40px;
    color: #535657;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 40px;
    text-align: center;
 	background-image: url("../img/top/yellow_base.png");
	/*background-color:rgba(255,250,116,0.5);*/
    cursor: pointer;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

header #shop_nav li a,header #shop_nav li span {
    color: #535657;
    width: 140px;
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    position: relative
}

header #shop_nav li span::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    top: 15px;
    right: 13px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    transform: rotate(135deg) scale(1, 1);
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (max-width: 767px) {
    header #shop_nav li span::after {
        width:7px;
        height: 7px;
        top: 9px
    }
}

header #shop_nav li#btn_shop_category_list {
    margin-right: 1px;
    border-radius: 20px 0 0 20px
}

header #shop_nav li#btn_brand_list span,header #shop_nav li#btn_shop_category_list span {
    padding-right: 26px
}

header #shop_nav li#btn_brand_list.active span,header #shop_nav li#btn_shop_category_list.active span {
    color: #6184ab
}

header #shop_nav li#btn_brand_list.active span::after,header #shop_nav li#btn_shop_category_list.active span::after {
    border-color: #6184ab;
    top: 18px;
    transform: rotate(135deg) scale(-1, -1)
}

@media screen and (min-width: 1080px) {
    header #shop_nav li:hover a,header #shop_nav li:hover span {
        color:#6184ab
    }

    header #shop_nav li:hover a::after,header #shop_nav li:hover span::after {
        border-color: #6184ab
    }
}

header #shop_nav li#btn_shop_guide {
    margin-left: 1px;
    border-radius: 0 20px 20px 0
}

#shop_sp_filter {
    width: 100%;
    margin: 15px auto 15px;
    position: relative;
    z-index: 2
}

body.shop #shop_sp_filter {
    margin: 0 auto 10vw
}

#shop_sp_filter .shop_sp_nav_list {
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 50px;
    left: 0
}

@media screen and (min-width: 767px) {
    #shop_sp_filter .shop_sp_nav_list {
        display:none
    }
}

#shop_sp_filter .shop_sp_nav_list #sp_brand_list,#shop_sp_filter .shop_sp_nav_list #sp_shop_category_list {
    width: 100%;
    background-color: #f9f9f6;
    border-radius: 15px;
    padding: 15px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    transform: translate(0, -10px);
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

#shop_sp_filter .shop_sp_nav_list #sp_brand_list.active,#shop_sp_filter .shop_sp_nav_list #sp_shop_category_list.active {
    opacity: 1;
    pointer-events: auto;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

#shop_sp_filter .shop_sp_nav_list #sp_brand_list ul,#shop_sp_filter .shop_sp_nav_list #sp_shop_category_list ul {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap
}

#shop_sp_filter .shop_sp_nav_list #sp_brand_list ul li,#shop_sp_filter .shop_sp_nav_list #sp_shop_category_list ul li {
    display: inline-block;
    margin: 5px
}

#shop_sp_filter .shop_sp_nav_list #sp_brand_list ul li a,#shop_sp_filter .shop_sp_nav_list #sp_shop_category_list ul li a {
    color: #000;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 30px;
    padding: 0 10px;
    background-color: #FFF;
    border-radius: 15px;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 1080px) {
    #shop_sp_filter .shop_sp_nav_list #sp_brand_list ul li a:hover,#shop_sp_filter .shop_sp_nav_list #sp_shop_category_list ul li a:hover {
        color:#6184ab
    }
}

#shop_sp_filter #shop_sp_nav {
    width: 100%;
    height: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center
}

@media screen and (min-width: 767px) {
    #shop_sp_filter #shop_sp_nav {
        display:none
    }
}

#shop_sp_filter #shop_sp_nav li {
    width: calc( 50% - 1px );
    height: 40px;
    color: #000;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 40px;
    text-align: center;
    background-color: #f9f9f6;
    cursor: pointer;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

#shop_sp_filter #shop_sp_nav li a,#shop_sp_filter #shop_sp_nav li span {
    color: #000;
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    position: relative
}

#shop_sp_filter #shop_sp_nav li span::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    top: 15px;
    right: 20px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    transform: rotate(135deg) scale(1, 1);
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

#shop_sp_filter #shop_sp_nav li#btn_sp_shop_category_list {
    margin-right: 1px;
    border-radius: 20px 0 0 20px
}

#shop_sp_filter #shop_sp_nav li#btn_sp_brand_list {
    border-radius: 0 20px 20px 0
}

#shop_sp_filter #shop_sp_nav li#btn_sp_brand_list span,#shop_sp_filter #shop_sp_nav li#btn_sp_shop_category_list span {
    padding-right: 26px
}

#shop_sp_filter #shop_sp_nav li#btn_sp_brand_list.active span,#shop_sp_filter #shop_sp_nav li#btn_sp_shop_category_list.active span {
    color: #6184ab
}

#shop_sp_filter #shop_sp_nav li#btn_sp_brand_list.active span::after,#shop_sp_filter #shop_sp_nav li#btn_sp_shop_category_list.active span::after {
    border-color: #6184ab;
    top: 18px;
    transform: rotate(135deg) scale(-1, -1)
}

#search_articles_nav {
    height: 100vh;
    overflow-x: auto;
    position: fixed;
    top: 0;
    opacity: 0;
    pointer-events: none;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 767px) {
    #search_articles_nav {
        width:calc( 100% - 270px );
        right: 270px;
        -moz-transform: translate(20px, 0);
        -ms-transform: translate(20px, 0);
        -webkit-transform: translate(20px, 0);
        transform: translate(20px, 0);
        z-index: 11;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start
    }
}

@media screen and (min-width: 1500px) {
    #search_articles_nav {
        width:1230px;
        right: calc( (100% - 1500px) / 2 + 270px )
    }
}

@media screen and (max-width: 767px) {
    #search_articles_nav {
        width:100%;
        background-color: rgba(102,127,155,0.8);
        z-index: 9;
        -moz-transform: translate(0, -10px);
        -ms-transform: translate(0, -10px);
        -webkit-transform: translate(0, -10px);
        transform: translate(0, -10px)
    }
}

#search_articles_nav .search_articles_nav_wrap {
    width: 100%;
    max-width: 700px;
    position: relative;
    z-index: 2
}

@media screen and (min-width: 767px) {
    #search_articles_nav .search_articles_nav_wrap {
        padding:50px 30px;
        border-radius: 0 0 0 20px;
 		background-image: url("../img/top/white_base1.png");
        box-shadow: 0 0 0 2px rgba(0,0,0,0.03)
    }

    body.the-brew-note #search_articles_nav .search_articles_nav_wrap,body.dark #search_articles_nav .search_articles_nav_wrap {
        background-color: #181818
    }
}

@media screen and (max-width: 767px) {
    #search_articles_nav .search_articles_nav_wrap {
        padding:30vw 8% 20vw
    }
}

#search_articles_nav .search_articles_nav_wrap .article-category_ul {
    margin: 0 auto 20px
}

@media screen and (min-width: 767px) {
    #search_articles_nav .search_articles_nav_wrap .article-category_ul {
        text-align:left;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start
    }
}

#search_articles_nav .search_articles_nav_wrap .article-category_ul:last-child {
    margin-bottom: 0
}

#search_articles_nav .search_articles_nav_wrap .article-category_ul .li_title {
    color: #535657;
    font-weight: 600
}

@media screen and (min-width: 767px) {
    #search_articles_nav .search_articles_nav_wrap .article-category_ul .li_title {
        width:100px;
        font-size: 11px;
        line-height: 40px;
        text-align: right
    }

    body.the-brew-note #search_articles_nav .search_articles_nav_wrap .article-category_ul .li_title,body.dark #search_articles_nav .search_articles_nav_wrap .article-category_ul .li_title {
        color:#667f9b
    }
}

@media screen and (max-width: 767px) {
    #search_articles_nav .search_articles_nav_wrap .article-category_ul .li_title {
        font-size:10px;
        margin: 0 0 10px;
        text-align: center
    }
	
	.article-category_ul .li_title span{
		color: #fff;
	    font-size: 1.4em;
	}
}


#search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form {
    position: relative
}

@media screen and (min-width: 767px) {
    #search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form {
        width:calc( 100% - 120px );
		bottom: 6px;
    }
}

@media screen and (max-width: 767px) {
    #search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form {
        width:calc( 100% - 8px );
        padding-left: 0;
        padding-right: 0;
        margin-left: auto;
        margin-right: auto
    }
}

#search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form input[type="text"] {
    border-radius: 9999px;
    box-sizing: border-box;
    box-shadow: 0 0 0 #49a36f;
    -moz-transition: color .4s ease,box-shadow .4s ease;
    -o-transition: color .4s ease,box-shadow .4s ease;
    -webkit-transition: color .4s ease,box-shadow .4s ease;
    transition: color .4s ease,box-shadow .4s ease
}

body.the-brew-note #search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form input[type="text"],body.dark #search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form input[type="text"] {
    color: #AAA;
    background-color: #333
}

@media screen and (min-width: 767px) {
    #search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form input[type="text"] {
        width:100%;
        padding: 12px 15px;
        margin: 5px;
        font-size: 12px;
        background-color: #EDEDED;
    }
}

@media screen and (max-width: 767px) {
    #search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form input[type="text"] {
        color:#AAA;
        font-size: 10px;
        background-color: #fff;
        width: 100%;
        padding: 12px 15px;
        margin: 0 auto;
        font-size: 12px
    }
}

#search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form input[type="text"]:hover,#search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form input[type="text"]:focus {
    box-shadow: 0 0 2px  #6184ab
}

body.the-brew-note #search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form input[type="text"]:hover,body.dark #search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form input[type="text"]:hover,body.the-brew-note #search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form input[type="text"]:focus,body.dark #search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form input[type="text"]:focus {
    color: #EEE
}

#search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form .btn_search {
    position: absolute;
    top: 50%
}

@media screen and (min-width: 767px) {
    #search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form .btn_search {
        width:18px;
        height: 18px;
        display: block;
        right: 25px;
        -moz-transform: translate(0, -9px);
        -ms-transform: translate(0, -9px);
        -webkit-transform: translate(0, -9px);
        transform: translate(0, -9px)
    }

    body.the-brew-note #search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form .btn_search,body.dark #search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form .btn_search {
        display: none !important
    }
}

@media screen and (max-width: 767px) {
    #search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form .btn_search {
        display:none
    }
}

#search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form .btn_search_w {
    position: absolute;
    top: 50%
}

@media screen and (min-width: 767px) {
    #search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form .btn_search_w {
        width:18px;
        height: 18px;
        display: block;
        left: 270px;
        display: none;
        -moz-transform: translate(0, -9px);
        -ms-transform: translate(0, -9px);
        -webkit-transform: translate(0, -9px);
        transform: translate(0, -9px)
    }

    body.the-brew-note #search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form .btn_search_w,body.dark #search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form .btn_search_w {
        display: block !important
    }
}

@media screen and (max-width: 767px) {
    #search_articles_nav .search_articles_nav_wrap .article-category_ul .search-form .btn_search_w {
        display:block;
        width: 18px;
        height: 18px;
        display: block;
        right: 15px;
        opacity: .3;
        -moz-transform: translate(0, -9px);
        -ms-transform: translate(0, -9px);
        -webkit-transform: translate(0, -9px);
        transform: translate(0, -9px)
    }
}




#search_articles_nav .search_articles_nav_wrap .article-category_ul ul {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap
}

@media screen and (min-width: 767px) {
    #search_articles_nav .search_articles_nav_wrap .article-category_ul ul {
        width:calc( 100% - 120px )
    }
}

@media screen and (max-width: 767px) {
    #search_articles_nav .search_articles_nav_wrap .article-category_ul ul {
        width:100%
    }
}

#search_articles_nav .search_articles_nav_wrap .article-category_ul ul li {
    display: inline-block;
    margin: 5px
}

@media screen and (max-width: 767px) {
    #search_articles_nav .search_articles_nav_wrap .article-category_ul ul li {
        margin:4px
    }
}

#search_articles_nav .search_articles_nav_wrap .article-category_ul ul li a {
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 26px;
    padding: 0 10px;
    /*background-color: #FFF;*/
	background-color:rgba(102,127,155,0.8);
    border-radius: 15px;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 767px) {
    body.the-brew-note #search_articles_nav .search_articles_nav_wrap .article-category_ul ul li a,body.dark #search_articles_nav .search_articles_nav_wrap .article-category_ul ul li a {
        color:#EEE;
        background-color: #222
    }
}

@media screen and (min-width: 1080px) {
    #search_articles_nav .search_articles_nav_wrap .article-category_ul ul li a:hover {
        color:#6184ab
    }

    body.the-brew-note #search_articles_nav .search_articles_nav_wrap .article-category_ul ul li a:hover,body.dark #search_articles_nav .search_articles_nav_wrap .article-category_ul ul li a:hover {
        color: #FFF;
        background-color: #6184ab
    }
}

@media screen and (max-width: 767px) {
    #search_articles_nav .search_articles_nav_wrap .article-category_ul ul li a {
        color:#AAA;
        font-size: 10px;
        background-color: #fff;
    }
}

#search_articles_nav.search_articles_nav_active {
    opacity: 1;
    pointer-events: auto;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

#search_articles_nav #bg_search_articles_nav {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

#sp_nav_area {
    width: 40vw;
    height: 50px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 12;
    display: flex;
    justify-content: flex-end;
    align-items: center;
	padding-top: 48px;
}

@media screen and (min-width: 767px) {
    #sp_nav_area {
        display:none
    }
}
@media screen and (max-width: 1350px) {
.entry_content p {
        width: calc(100% - 10vw);
	}}
@media screen and (max-width: 1281px) {
.entry_content p {
        width: calc(100% - 9vw);
	}}
@media screen and (max-width: 1240px) {
.entry_content p {
        width: calc(100% - 8vw);
	}}

@media screen and (max-width: 1198px) {
.entry_content p {
        width: calc(100% - 8vw);
	}}
@media screen and (max-width: 1155px) {
.entry_content p {
        width: calc(100% - 8vw);
	}}
@media screen and (max-width: 1080px) {
.entry_content p {
        width: calc(100% - 5.3vw);
	}}

@media screen and (max-width: 980px) {
.entry_content p {
        width: calc(100% - 4.5vw);
	}}

@media screen and (max-width: 875px) {
.entry_content p {
        width: calc(100% - 3vw);
	}}
@media screen and (max-width: 830px) {
.entry_content p {
        width: calc(100% - 3vw);
	}}
@media screen and (max-width: 796px) {
.entry_content p {
        width: calc(100% - 3vw);
	}}
@media screen and (max-width: 765px) {
.entry_content p {
        width: calc(100vw - 36px) !important;
	}
.main_flyer{
		padding-top: 80px;
	    width: 70%;
	}
.flyer img{
    object-fit: scale-down;
    max-width: 430px;
    max-height: 430px;
    margin: 0 auto;
}
}

.flyer{
text-align: center;
}

.flyer img{
    object-fit: scale-down;
    max-width: 600px;
    max-height: 600px;
    margin: 0 auto;
}

.main_flyer {
    object-fit: scale-down;
    width: 80%;
    height: auto;
    margin: 0 auto;
	padding-bottom: 70px;
}
#sp_nav_area li {
    width: 33.3333%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}

.en #sp_nav_area li.mycart {
    display: none !important
}


#sp_nav_area li svg {
    width: 20px;
    height: 20px;
    fill: #535657;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

.black-single #sp_nav_area li svg {
    fill: #535657!important;
}

#sp_nav_area.black-single li svg {
    fill: #535657!important;
}

.black-single #sp_nav_area li#btn_sp_menu span{
    background-color: #535657!important;
}

#sp_nav_area.black-single li#btn_sp_menu span{
    background-color: #535657!important;
}

.white-single #sp_nav_area li svg {
    fill: #FFF!important;
}

#sp_nav_area.white-single li svg {
    fill: #FFF!important;
}

#sp_nav_area.white-single li svg {
    fill: #FFF!important;
}

.white-single #sp_nav_area li#btn_sp_menu span{
    background-color: #FFF!important;
}
.white-single #sp_nav_area.scroll li#btn_sp_menu span {
background-color: #535657!important;
}

.white-single #sp_nav_area.scroll li svg{
    fill: #535657!important;
}

.sp_menu_active #sp_nav_area li svg {
    fill: #FFF !important
}


.schedule #sp_nav_area li svg, .event_schedule #sp_nav_area li svg {
    fill: #535657;
}

.schedule #sp_nav_area li#btn_sp_menu span, .event_schedule #sp_nav_area li#btn_sp_menu span  {
    background-color: #535657;;
}

.search_articles_nav_active #sp_nav_area li svg {
    fill: #FFF !important
}

#sp_nav_area li a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

#sp_nav_area li#btn_sp_menu span {
    display: block;
    height: 1px;
    background-color: #535657;
    position: absolute;
    right: calc( (100% - 22px) / 2 );
    border-radius: 1px;
    transform: scale(0.8, 0.8);
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}
#sp_nav_area.scroll li#btn_sp_menu span{
    background-color: #535657;
}

#sp_nav_area li#btn_sp_menu span:nth-child(1) {
    width: 25px;
    top: 20px
}

.sp_menu_active #sp_nav_area li#btn_sp_menu span:nth-child(1) {
    transform: translateY(4px) rotate(-45deg)
}

#sp_nav_area li#btn_sp_menu span:nth-child(2) {
    width: 18px;
    top: 28px
}

.sp_menu_active #sp_nav_area li#btn_sp_menu span:nth-child(2) {
    width: 25px;
    transform: translateY(-4px) rotate(45deg)
}

.sp_menu_active #sp_nav_area li#btn_sp_menu span {
    background-color: #FFF !important
}

.search_articles_nav_active #sp_nav_area li#btn_sp_menu span {
    background-color: #fff !important
}



#sp_nav_area.scl_cover li svg,body.the-brew-note #sp_nav_area li svg,body.dark #sp_nav_area li svg {
    fill: #fff!important;
}

.related_word #sp_nav_area.scl_cover li svg,body.the-brew-note #sp_nav_area li svg,body.dark #sp_nav_area li svg {
    fill: #535657!important;
}


#sp_nav_area.scl_cover li svg,body.the-brew-note #sp_nav_area li svg,body.dark #sp_nav_area li svg {
    fill: #fff!important;
}

#sp_nav_area.simple_cover2 li svg,body.the-brew-note #sp_nav_area li svg,body.dark #sp_nav_area li svg {
    fill: #535657!important;
}

.search_articles_nav_active #sp_nav_area.simple_cover2 li svg,body.the-brew-note #sp_nav_area li svg,body.dark #sp_nav_area li svg {
    fill: #fff!important;
}

.sp_menu_active #sp_nav_area.simple_cover2 li svg,body.the-brew-note #sp_nav_area li svg,body.dark #sp_nav_area li svg {
    fill: #fff!important;
}

#sp_nav_area.scroll li svg,body.the-brew-note #sp_nav_area li svg,body.dark #sp_nav_area li svg {
    fill: #fff;
}

#sp_nav_area.scroll li svg,body.the-brew-note #sp_nav_area li svg,body.dark #sp_nav_area li svg {
    fill: #535657;
}

#sp_nav_area.scroll.scl_cover li svg{
    fill: #fff;
}

#sp_nav_area.scl_cover li#btn_sp_menu span,body.the-brew-note #sp_nav_area li#btn_sp_menu span,body.dark #sp_nav_area li#btn_sp_menu span {
    background-color: #fff!important;
}

#sp_nav_area.simple_cover2 li#btn_sp_menu span,body.the-brew-note #sp_nav_area li#btn_sp_menu span,body.dark #sp_nav_area li#btn_sp_menu span {
    background-color: #535657!important;
}

.search_articles_nav_active #sp_nav_area.simple_cover2 li#btn_sp_menu span,body.the-brew-note #sp_nav_area li#btn_sp_menu span,body.dark #sp_nav_area li#btn_sp_menu span {
    background-color: #fff!important;
}

.sp_menu_active #sp_nav_area.simple_cover2 li#btn_sp_menu span,body.the-brew-note #sp_nav_area li#btn_sp_menu span,body.dark #sp_nav_area li#btn_sp_menu span {
    background-color: #fff!important;
}

.article-single #sp_nav_area.scroll li#btn_sp_menu span{
    background-color: #535657;
}

.sp_menu_active .article-single #sp_nav_area.scroll li#btn_sp_menu span{
    background-color: #fff;
}

.search_articles_nav_active .article-single #sp_nav_area.scroll li#btn_sp_menu span{
    background-color: #fff;
}

.article-single #sp_nav_area.scl_cover li svg {
    fill: #fff!important
}

.article-single #sp_nav_area.scl_cover.simple_cover2 li svg {
    fill: #535657!important
}


.search_articles_nav_active .article-single #sp_nav_area.scl_cover.simple_cover2 li svg {
    fill: #fff!important
}

.sp_menu_active .article-single #sp_nav_area.scl_cover.simple_cover2 li svg {
    fill: #fff!important
}

.article-single #sp_nav_area.scl_cover li#btn_sp_menu span{
    background-color: #fff;
}

.article-single #sp_nav_area.scl_cover.simple_cover2 li#btn_sp_menu span{
    background-color: #535657!important
}

.search_articles_nav_active .article-single #sp_nav_area.scl_cover.simple_cover2 li#btn_sp_menu span{
    background-color: #fff!important
}

.sp_menu_active .article-single #sp_nav_area.scl_cover.simple_cover2 li#btn_sp_menu span{
    background-color: #fff!important
}

#sp_nav_area.scroll li#btn_sp_menu.sp_menu_active span{
    background-color: #fff!important
}



.black_white #sp_nav_area.scroll li#btn_sp_menu span{
    background-color: #535657!important
}

.search_articles_nav_active #sp_nav_area.scroll li#btn_sp_menu span{
    background-color: #fff!important
}


.search_articles_nav_active .black_white #sp_nav_area.scroll li#btn_sp_menu span{
    background-color: #fff!important
}

.sp_menu_active #sp_nav_area.scroll li#btn_sp_menu span{
    background-color: #fff!important
}


.sp_menu_active .black_white #sp_nav_area.scroll li#btn_sp_menu span{
    background-color: #fff!important
}


.black_white #sp_nav_area.scl_cover li svg {
    fill: #535657!important
}

.black_white #sp_nav_area.scl_cover li#btn_sp_menu span{
    background-color: #535657;
}
.ban_ogf {
    height: 200px;
    margin: 100px auto 0
}

@media screen and (max-width: 767px) {
    .ban_ogf {
        width:100%;
        height: 35vw;
        margin: 10vw aut
    }
}

.ban_ogf a {
    width: 100%;
    height: 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #181818;
    overflow: hidden;
    position: relative
}

.ban_ogf a::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #000;
    opacity: 0;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 1080px) {
    .ban_ogf a:hover::after {
        opacity:0.3
    }
}

@media screen and (max-width: 767px) {
    .ban_ogf a {
        width:100%;
        height: 35vw
    }
}

.ban_ogf a .pic {
    width: 20%;
    height: 200px;
    position: absolute;
    top: 0;
    left: 18%;
    background: url(../img/ban_ogf.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (max-width: 767px) {
    .ban_ogf a .pic {
        width:30%;
        height: 35vw;
        left: 5%
    }
}

.ban_ogf a .txt {
    width: 60%;
    height: 200px;
    text-align: left;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #FFF;
    font-weight: 600;
    text-shadow: 0 0 20px #0ee60b,0 0 20px #0ee60b,0 0 30px #0ee60b;
    padding: 0 3% 0 0;
    z-index: 2
}

.ban_ogf a .txt h3 {
    font-size: 27px;
    letter-spacing: 0.1em;
    line-height: 1;
    margin: 0 0 15px
}

@media screen and (max-width: 767px) {
    .ban_ogf a .txt h3 {
        font-size:4.5vw;
        margin: 0 0 2.5vw
    }
}

.ban_ogf a .txt p {
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 1.7
}

@media screen and (max-width: 767px) {
    .ban_ogf a .txt p {
        font-size:3vw
    }
}

@media screen and (max-width: 767px) {
    .ban_ogf a .txt {
        width:62%;
        height: 35vw
    }
}

.about_campicnic {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin: 100px auto 0
}

@media screen and (max-width: 767px) {
    .about_campicnic {
        margin:10vw auto 0
    }
}

.ban_ogf+.about_campicnic {
    margin: 50px auto 0
}

@media screen and (max-width: 767px) {
    .ban_ogf+.about_campicnic {
        margin:0 auto 0
    }
}

.about_campicnic .about_campicnic_link {
    width: 50%;
    height: 200px;
    background: url(../img/top/campicnic_base.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (max-width: 767px) {
    .about_campicnic .about_campicnic_link {
        width:100%;
        height: 40vw
    }
}

.about_campicnic .about_campicnic_link a {
    color: #FFF;
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
	background: url("../img/top/campicnic_base.jpg") center center / cover no-repeat;;
		
}

@media screen and (max-width: 767px) {
    .about_campicnic .about_campicnic_link a {
        width:100%;
        height: 39vw
    }
}

.about_campicnic .about_campicnic_link a::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #667f9b;
    opacity: 0.3;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 767px) {
    body.the-brew-note .about_campicnic .about_campicnic_link a::after,body.dark .about_campicnic .about_campicnic_link a::after {
        opacity:0.5
    }
}

.about_campicnic .about_campicnic_link a h3 {
    width: 220px;
    position: relative;
    z-index: 2
}

@media screen and (max-width: 767px) {
    .about_campicnic .about_campicnic_link a h3 {
        width:45vw;
        margin-top: 10px
    }
}

.about_campicnic .about_campicnic_link a h3 svg {
    fill: #FFF
}

.about_campicnic .about_campicnic_link a p {
    opacity: 1;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1;
    border-bottom: 2px solid #FFF;
    padding-bottom: 5px;
    margin: 15px auto 0;
    position: relative;
    z-index: 2;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (max-width: 767px) {
    .about_campicnic .about_campicnic_link a p {
        font-size:12px;
        margin: 8px auto 0
    }
}

@media screen and (min-width: 1080px) {
    .about_campicnic .about_campicnic_link a:hover::after {
        opacity:0.5
    }

    body.the-brew-note .about_campicnic .about_campicnic_link a:hover::after,body.dark .about_campicnic .about_campicnic_link a:hover::after {
        opacity: 0.7
    }
}

.about_campicnic #sns_nav {
    width: 50%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    padding: 20px 0 20px;
    background-color:rgba(255,250,116,0.5);
/* 	background-image: url("../img/top/yellow_base.png");
	background-size: cover;
	background-color:rgba(255,255,255,0.5);
	background-blend-mode:lighten;*/
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 767px) {
    .about .about_campicnic #sns_nav {
        background-color:#FFF
    }

    body.the-brew-note .about_campicnic #sns_nav,body.dark .about_campicnic #sns_nav {
        background-color: #181818
    }
}

@media screen and (max-width: 767px) {
    .about_campicnic #sns_nav {
        width:100%;
        height: auto;
        padding: 5vw 20px;
        justify-content: center;
    }
}

@media screen and (min-width: 767px) {
    .about_campicnic #sns_nav::before {
        content:"campicnic";
		color: #535657;
		font-family:BrownNow,Tipique_Regular,YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic, "Medium","Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","Pro W3","Meiryo",sans-serif;
        display: block;
        width: auto;
        height: 12px;
        font-size: 2.1em;
        font-weight: 500;
        letter-spacing: 0.1em;
        line-height: 1;
        margin: 0 14px 11px 0;
        opacity: 1;
        -moz-transition: all .4s ease;
        -o-transition: all .4s ease;
        -webkit-transition: all .4s ease;
        transition: all .4s ease
    }

    body.the-brew-note .about_campicnic #sns_nav::before,body.dark .about_campicnic #sns_nav::before {
        color: #EEE
    }
}

.about_campicnic #sns_nav li {
    width: 50px;
    margin: 0 8px;
    text-align: center
}

@media screen and (max-width: 767px) {
    .about_campicnic #sns_nav li {
        width:40px;
        margin: 0 7.5px 0 7.5px;
    }
}

.about_campicnic #sns_nav li a {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    background-color: #FFF;
    border-radius: 100%
}

@media screen and (min-width: 767px) {
    .about .about_campicnic #sns_nav li a {
        background-color:#f9f9f6
    }

    body.the-brew-note .about_campicnic #sns_nav li a,body.dark .about_campicnic #sns_nav li a {
        background-color: #222
    }
}

.about_campicnic #sns_nav li a svg {
    width: 20px;
    height: 20px;
    fill: #535657;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

.about_campicnic #sns_nav li a img {
    width: 40px;
    height: 40px;
    filter: invert(35%) sepia(7%) saturate(181%) hue-rotate(149deg) brightness(91%) contrast(91%);
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 767px) {
    body.the-brew-note .about_campicnic #sns_nav li a svg,body.dark .about_campicnic #sns_nav li a svg {
        fill:#EEE
    }
	body.the-brew-note .about_campicnic #sns_nav li a svg,body.dark .about_campicnic #sns_nav li a img {
        filter: invert(99%) sepia(1%) saturate(437%) hue-rotate(237deg) brightness(119%) contrast(87%);
    }
}

.about_campicnic #sns_nav li a:hover svg {
    fill: #6184ab !important
}

.about_campicnic #sns_nav li a:hover img {
    filter: invert(46%) sepia(37%) saturate(323%) hue-rotate(172deg) brightness(98%) contrast(89%) !important;
}

    
@media screen and (max-width: 767px) {
    .about_campicnic #sns_nav li a {
        width:40px;
        height: 40px
    }

    .about_campicnic #sns_nav li a svg {
        width: 18px;
        height: 18px
    }
}

.about_campicnic #sns_nav li.tw a svg,.about_campicnic #sns_nav li.fb a svg {
    width: 22px;
    height: 22px
}

@media screen and (max-width: 767px) {
    .about_campicnic #sns_nav li.tw a svg,.about_campicnic #sns_nav li.fb a svg {
        width:20px;
        height: 20px
    }
}






.about_kokiafeca {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin: 100px auto 0
}

@media screen and (max-width: 767px) {
    .about_kokiafeca {
        margin:10vw auto 0
    }
}

.ban_ogf+.about_kokiafeca {
    margin: 50px auto 0
}

@media screen and (max-width: 767px) {
    .ban_ogf+.about_kokiafeca {
        margin:0 auto 0
    }
}

.about_kokiafeca .about_kokiafeca_link {
    width: 50%;
    height: 200px;
    background: url(../img/kokiafeca_shop.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (max-width: 767px) {
    .about_kokiafeca .about_kokiafeca_link {
        width:100%;
        height: 40vw
    }
}

.about_kokiafeca .about_kokiafeca_link a {
    color: #FFF;
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
	background: url("../img/kokiafeca_shop.jpg") center center / cover no-repeat;;
		
}

@media screen and (max-width: 767px) {
    .about_kokiafeca .about_kokiafeca_link a {
        width:100%;
        height: 35vw
    }
}

.about_kokiafeca .about_kokiafeca_link a::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #667f9b;
    opacity: 0.3;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 767px) {
    body.the-brew-note .about_kokiafeca .about_kokiafeca_link a::after,body.dark .about_kokiafeca .about_kokiafeca_link a::after {
        opacity:0.5
    }
}

.about_kokiafeca .about_kokiafeca_link a h3 {
    width: 220px;
    position: relative;
    z-index: 2
}

@media screen and (max-width: 767px) {
    .about_kokiafeca .about_kokiafeca_link a h3 {
        width:45vw;
        margin-top: 10px
    }
}

.about_kokiafeca .about_kokiafeca_link a h3 svg {
    fill: #FFF
}

.about_kokiafeca .about_kokiafeca_link a p {
    opacity: 1;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1;
    border-bottom: 2px solid #FFF;
    padding-bottom: 5px;
    margin: 15px auto 0;
    position: relative;
    z-index: 2;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (max-width: 767px) {
    .about_kokiafeca .about_kokiafeca_link a p {
        font-size:12px;
        margin: 8px auto 0
    }
}

@media screen and (min-width: 1080px) {
    .about_kokiafeca .about_kokiafeca_link a:hover::after {
        opacity:0.5
    }

    body.the-brew-note .about_kokiafeca .about_kokiafeca_link a:hover::after,body.dark .about_kokiafeca .about_kokiafeca_link a:hover::after {
        opacity: 0.7
    }
}

.about_kokiafeca #sns_nav {
    width: 50%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    padding: 28px 0 20px;
    background-color:rgba(255,250,116,0.5);
/* 	background-image: url("../img/top/yellow_base.png");
	background-size: cover;
	background-color:rgba(255,255,255,0.5);
	background-blend-mode:lighten;*/
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 767px) {
    .about .about_kokiafeca #sns_nav {
        background-color:#FFF
    }

    body.the-brew-note .about_kokiafeca #sns_nav,body.dark .about_kokiafeca #sns_nav {
        background-color: #181818
    }
}

@media screen and (max-width: 767px) {
    .about_kokiafeca #sns_nav {
        width:100%;
        height: auto;
        padding: 5vw 20px;
        justify-content: center;
    }
}

@media screen and (min-width: 767px) {
    .about_kokiafeca #sns_nav::before {
        content:"kokiafeca";
		color: #535657;
		font-family:BrownNow,Tipique_Regular,YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic, "Medium","Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","Pro W3","Meiryo",sans-serif;
        display: block;
        width: auto;
        height: 12px;
        font-size: 2.1em;
        font-weight: 500;
        letter-spacing: 0.1em;
        line-height: 1;
        margin: 0 14px 11px 0;
        opacity: 1;
        -moz-transition: all .4s ease;
        -o-transition: all .4s ease;
        -webkit-transition: all .4s ease;
        transition: all .4s ease
    }

    body.the-brew-note .about_kokiafeca #sns_nav::before,body.dark .about_kokiafeca #sns_nav::before {
        color: #EEE
    }
}

.about_kokiafeca #sns_nav li {
    width: 50px;
    margin: 0 8px;
    text-align: center
}

@media screen and (max-width: 767px) {
    .about_kokiafeca #sns_nav li {
        width:40px;
        margin:  0 7.5px 0 7.5px;
    }
}

.about_kokiafeca #sns_nav li a {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    background-color: #FFF;
    border-radius: 100%
}

@media screen and (min-width: 767px) {
    .about .about_kokiafeca #sns_nav li a {
        background-color:#f9f9f6
    }

    body.the-brew-note .about_kokiafeca #sns_nav li a,body.dark .about_kokiafeca #sns_nav li a {
        background-color: #222
    }
}

.about_kokiafeca #sns_nav li a svg {
    width: 20px;
    height: 20px;
    fill: #535657;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

.about_kokiafeca #sns_nav li a img {
    width: 40px;
    height: 40px;
    filter: invert(35%) sepia(7%) saturate(181%) hue-rotate(149deg) brightness(91%) contrast(91%);
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 767px) {
    body.the-brew-note .about_kokiafeca #sns_nav li a svg,body.dark .about_kokiafeca #sns_nav li a svg {
        fill:#EEE
    }
	body.the-brew-note .about_kokiafeca #sns_nav li a svg,body.dark .about_kokiafeca #sns_nav li a img {
        filter: invert(99%) sepia(1%) saturate(437%) hue-rotate(237deg) brightness(119%) contrast(87%);
    }
}

.about_kokiafeca #sns_nav li a:hover svg {
    fill: #6184ab !important
}

.about_kokiafeca #sns_nav li a:hover img {
    filter: invert(46%) sepia(37%) saturate(323%) hue-rotate(172deg) brightness(98%) contrast(89%) !important;
}

    
@media screen and (max-width: 767px) {
    .about_kokiafeca #sns_nav li a {
        width:40px;
        height: 40px
    }

    .about_kokiafeca #sns_nav li a svg {
        width: 18px;
        height: 18px
    }
}

.about_kokiafeca #sns_nav li.tw a svg,.about_kokiafeca #sns_nav li.fb a svg {
    width: 22px;
    height: 22px
}

@media screen and (max-width: 767px) {
    .about_kokiafeca #sns_nav li.tw a svg,.about_kokiafeca #sns_nav li.fb a svg {
        width:20px;
        height: 20px
    }
}

footer {
    width: 100%;
    padding: 70px 0;
    position: relative;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 767px) {
    footer::after {
        content:"";
        display: block;
        width: 100%;
        height: 30%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        opacity: 0;
        pointer-events: none;
        background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzExMTExMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
        background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #111111),color-stop(100%, rgba(0,0,0,0)));
        background: -moz-linear-gradient(#111111,rgba(0,0,0,0));
        background: -webkit-linear-gradient(#111111,rgba(0,0,0,0));
        background: linear-gradient(#111111,rgba(0,0,0,0))
    }
}

@media screen and (max-width: 767px) {
    footer {
        padding:0 0 5vw;
        background-color: #f9f9f6
    }
}

footer .footer_wrap {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-end;
    text-align: left
}

footer .footer_wrap .f_nav {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap
}

@media screen and (min-width: 767px) {
    footer .footer_wrap .f_nav {
        width:100%;
		justify-content:space-between;
        align-items: flex-end
    }
}

@media screen and (max-width: 767px) {
    footer .footer_wrap .f_nav {
        width:100%;
        align-items: flex-end;
		padding-top: 35px;
    }
}

footer .footer_wrap .f_nav ul:first-child li {
    font-size: 33px;
    line-height: 1.3;
}

footer .footer_wrap .f_nav ul .under1 {
    line-height: 0.8!important;
}

@media screen and (min-width: 767px) {
    footer .footer_wrap .f_nav ul:first-child {
        width:250px;
        margin-right: 20px
    }
}

@media screen and (max-width: 767px) {
    footer .footer_wrap .f_nav ul:first-child {
        padding-left:20px;
        padding-right: 20px
    }

    footer .footer_wrap .f_nav ul:first-child li {
        font-size: 5.3vw;
		line-height:1.5;
    }
}



footer .footer_wrap .f_nav ul:nth-child(2) li {
    font-size: 11px;
	text-align: right;
}


@media screen and (max-width: 395px) {
footer .footer_wrap .f_nav ul:nth-child(2) li {
    font-size: 11px;
	text-align: left;
}
footer .footer_wrap .f_nav ul:nth-child(2) {
        margin-top: 10px;
    }
footer .footer_wrap .links li {
        margin: 0px 20px 20px 0;
    }
footer .footer_wrap .links li.kankeisaki_1 {
        margin: 33px 20px 0 0!important;
    }
footer .footer_wrap .links li a.mahouworks_r {
    height: 65px!important;
}
}
@media screen and (max-width: 722px) {
footer .footer_wrap .links li a.mahouworks_r {
    height: 120px!important;
}

footer .footer_wrap .copyright {
        font-size: 2vw;
        text-align: left !important;
        margin-left: 20px;
}
	
footer .footer_wrap .f_nav {
    justify-content: space-between;
}
}


@media screen and (min-width: 767px) {
    footer .footer_wrap .f_nav ul:nth-child(2) {
        width:200px
    }
}

@media screen and (max-width: 767px) {
    footer .footer_wrap .f_nav ul:nth-child(2) {
        padding-left:20px;
        padding-right: 20px;
		padding-bottom: 12px;
    }
}
@media screen and (max-width: 450px) {
        footer .footer_wrap .f_nav ul:nth-child(2) {
            padding-bottom: 5px;
        }

    footer .footer_wrap .f_nav ul:nth-child(2) li {
        font-size: 2.7vw
    }
}

footer .footer_wrap .f_nav ul li a {
    color: #535657;
    display: inline-block;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 26px;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (min-width: 767px) {
    body.the-brew-note footer .footer_wrap .f_nav ul li a,body.dark footer .footer_wrap .f_nav ul li a {
        color:#FFF
    }
}

@media screen and (min-width: 767px) and (min-width: 1080px) {
    body.the-brew-note footer .footer_wrap .f_nav ul li a:hover,body.dark footer .footer_wrap .f_nav ul li a:hover {
        color:#6184ab
    }
}

@media screen and (min-width: 1080px) {
    footer .footer_wrap .f_nav ul li a:hover {
        color:#6184ab
    }
}

@media screen and (min-width: 767px) {
    footer .footer_wrap .f_right {
        text-align:right;
        position: absolute;
        top: 60px;
        right: 50px;
    }
}

@media screen and (max-width: 767px) {
    footer .footer_wrap .f_right {
        width:100%;
        padding: 0 20px;
        text-align: left
    }
}

footer .footer_wrap .links {
    width: 100%;
    margin: 13px 28px 0 0;
}

@media screen and (max-width: 767px) {
    footer .footer_wrap .links {
        margin:0 0 7vw;
        display: flex;
        justify-content: flex-start;
        align-items: center;
		flex-wrap:wrap;
    }
}

footer .footer_wrap .links li {
    margin: 15px 0 0;
    position: relative
}

footer .footer_wrap .links li:last-child {
    top: -1px
}

footer .footer_wrap .links li a {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 20px;
    height: 20px;
    opacity: 1;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

footer .footer_wrap .links li a.mahouworks_r{
    height: 170px;
}


footer .footer_wrap .links li a.campicnic_r{
    height: 40px;
}


footer .footer_wrap .links li a.takeuchikenchiku_r{
    height: 20px;
}


@media screen and (min-width: 767px) {
    body.the-brew-note footer .footer_wrap .links li a,body.dark footer .footer_wrap .links li a {
        color:#FFF
    }
}

footer .footer_wrap .links li a img,footer .footer_wrap .links li a svg {
    width: auto;
    height: 18px;
    fill: #000;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

footer .footer_wrap .links li a .mahouworks_logo_r {
    height: 160px!important;
	filter: invert(34%) sepia(2%) saturate(3%) hue-rotate(176deg) brightness(94%) contrast(90%);
}

footer .footer_wrap .links li a .campicnic_logo_r {
    height: 35px!important;
	filter: invert(34%) sepia(2%) saturate(3%) hue-rotate(176deg) brightness(94%) contrast(90%);
}

footer .footer_wrap .links li a .takeuchikenchiku_logo_r {
    height: 25px!important;
	filter: invert(34%) sepia(2%) saturate(3%) hue-rotate(176deg) brightness(94%) contrast(90%);
}

@media screen and (min-width: 767px) {
    body.the-brew-note footer .footer_wrap .links li a img,body.dark footer .footer_wrap .links li a img,body.the-brew-note footer .footer_wrap .links li a svg,body.dark footer .footer_wrap .links li a svg {
        fill:#FFF
    }
}

@media screen and (min-width: 1080px) {
    footer .footer_wrap .links li a:hover {
    filter: invert(49%) sepia(49%) saturate(251%) hue-rotate(171deg) brightness(90%) contrast(90%) !important;
	color: #667f9b;
    }
}

@media screen and (max-width: 767px) {
    footer .footer_wrap .links li {
        margin:20px 28px 0 0
    }

    footer .footer_wrap .links li a {
        font-size: 14px
    }

    footer .footer_wrap .links li a img,footer .footer_wrap .links li a svg {
        width: auto;
        height: 14px
    }
	
	
footer .footer_wrap .links li a .mahouworks_logo_r {
    height: 100px!important;
}

footer .footer_wrap .links li a .campicnic_logo_r {
    height: 50px!important;
	filter: invert(34%) sepia(2%) saturate(3%) hue-rotate(176deg) brightness(94%) contrast(90%);
}

footer .footer_wrap .links li a .takeuchikenchiku_logo_r {
    height: 25px!important;
	filter: invert(34%) sepia(2%) saturate(3%) hue-rotate(176deg) brightness(94%) contrast(90%);
}
}

footer .footer_wrap .copyright {
    width: 100%;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1;
    text-align: left;
	color: #535657;
	margin-top: 35px;
}

@media screen and (min-width: 767px) {
    body.the-brew-note footer .footer_wrap .copyright,body.dark footer .footer_wrap .copyright {
        color:#FFF
    }
}

@media screen and (max-width: 767px) {
    footer .footer_wrap .copyright {
        font-size:2.7vw;
        text-align: left;
		margin-top: 0px;
    }
footer .footer_wrap .copyright {
    text-align: center;
}
}

.tax_meta_info .tp {
    margin: 25px 0 0px!important;
}


.tp {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: -5px 0 30px
}

@media screen and (max-width: 767px) {
    .tp {
        display:none
    }
	.work_tp .tp{
		display: flex!important;
		padding-left: 7vw;
	}
	.tax_meta_info.work_tp{
		padding-top: 0vw!important;
	}
}

.tp li {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    position: relative
}

.tp li::after {
    color: #000;
    content: "/";
    display: inline-block;
    margin: 0 10px;
    opacity: 0.5
}

.tp li a {
    color: #000;
    opacity: 0.5;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 1080px) {
    .tp li a:hover {
        opacity:1;
        color: #6184ab
    }
}

.tp li a+a::before {
    content: "+";
    display: inline-block;
    margin: 0 4px
}

.tp li:last-child a {
    color: #000;
    opacity: 1
}

.tp li:last-child::after {
    display: none
}

#about .tp,.ochasuru_lab_cover .tp,.page-template-page-colours .tp,.single-special .tp,.ochasuru-single .tp,.the-brew-note .tp {
    position: absolute;
    top: 80px;
    left: 50px;
    z-index: 10
}

.article-template-single-article-colours .tp,.single-article .tp {
    position: absolute;
    right: 50px;
    z-index: 10
}

#cover .tp,#single_cover .tp,.the-brew-note .tp {
    position: absolute;
    bottom: 52px!important;
    left: 50px!important;
    z-index: 10
}

#cover .tp li,#single_cover .tp li,.the-brew-note .tp li {
    color: #FFF
}

#cover .tp li::after,#single_cover .tp li::after,.the-brew-note .tp li::after {
    color: #FFF;
    opacity: 0.5
}

#cover .tp li a,#single_cover .tp li a,.the-brew-note .tp li a {
    color: #FFF;
    opacity: 0.5
}

@media screen and (min-width: 1080px) {
    #cover .tp li a:hover,#single_cover .tp li a:hover,.the-brew-note .tp li a:hover {
        opacity:1
    }
}

#cover .tp li:last-child a,#single_cover .tp li:last-child a,.the-brew-note .tp li:last-child a {
    color: #FFF;
    opacity: 1
}

img#_smartnews_ads_conversion_img_ef3qd {
    display: none
}

#sp_nav {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 110px;
    pointer-events: none;
    opacity: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

#sp_nav::after {
    content: "";
    display: block;
    width: 100%;
    height: 125%;
    position: absolute;
    top: 0;
    left: 0;
	background-color:rgba(102,127,155,0.8);
}

@media screen and (min-width: 767px) {
    #sp_nav {
        display:none
    }
}

#sp_nav.sp_menu_active {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    pointer-events: auto;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

#sp_nav.sp_menu_active #sp_nav_bg {
    pointer-events: auto
}

#sp_nav.sp_menu_active .sp_main_nav>li {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

#sp_nav.sp_menu_active .sp_main_nav>li:first-child {
    -moz-transition: all .5s ease .1s;
    -o-transition: all .5s ease .1s;
    -webkit-transition: all .5s ease;
    -webkit-transition-delay: .1s;
    transition: all .5s ease .1s
}

#sp_nav.sp_menu_active .sp_main_nav>li:nth-child(2) {
    -moz-transition: all .5s ease .2s;
    -o-transition: all .5s ease .2s;
    -webkit-transition: all .5s ease;
    -webkit-transition-delay: .2s;
    transition: all .5s ease .2s
}

#sp_nav.sp_menu_active .sp_main_nav>li:nth-child(3) {
    -moz-transition: all .5s ease .3s;
    -o-transition: all .5s ease .3s;
    -webkit-transition: all .5s ease;
    -webkit-transition-delay: .3s;
    transition: all .5s ease .3s
}

#sp_nav.sp_menu_active .sp_main_nav>li:nth-child(4) {
    -moz-transition: all .5s ease .4s;
    -o-transition: all .5s ease .4s;
    -webkit-transition: all .5s ease;
    -webkit-transition-delay: .4s;
    transition: all .5s ease .4s
}

#sp_nav.sp_menu_active .sp_main_nav>li:nth-child(5) {
    -moz-transition: all .5s ease .5s;
    -o-transition: all .5s ease .5s;
    -webkit-transition: all .5s ease;
    -webkit-transition-delay: .5s;
    transition: all .5s ease .5s
}

#sp_nav.sp_menu_active .sp_main_nav>li:nth-child(6) {
    -moz-transition: all .5s ease .6s;
    -o-transition: all .5s ease .6s;
    -webkit-transition: all .5s ease;
    -webkit-transition-delay: .6s;
    transition: all .5s ease .6s
}

#sp_nav.sp_menu_active .sp_main_nav>li:nth-child(7) {
    -moz-transition: all .5s ease .7s;
    -o-transition: all .5s ease .7s;
    -webkit-transition: all .5s ease;
    -webkit-transition-delay: .7s;
    transition: all .5s ease .7s
}

#sp_nav.sp_menu_active .sp_main_nav>li:nth-child(8) {
    -moz-transition: all .5s ease .8s;
    -o-transition: all .5s ease .8s;
    -webkit-transition: all .5s ease;
    -webkit-transition-delay: .8s;
    transition: all .5s ease .8s
}


#sp_nav.sp_menu_active .sp_main_nav>li:nth-child(9) {
    -moz-transition: all .5s ease .9s;
    -o-transition: all .5s ease .9s;
    -webkit-transition: all .5s ease;
    -webkit-transition-delay: .9s;
    transition: all .5s ease .9s
}



#sp_nav.sp_menu_active .sp_main_nav>li:nth-child(10) {
    -moz-transition: all .5s ease 1s;
    -o-transition: all .5s ease 1s;
    -webkit-transition: all .5s ease;
    -webkit-transition-delay: 1s;
    transition: all .5s ease 1s
}

#sp_nav.sp_menu_active .sp_main_nav>li:nth-child(11) {
    -moz-transition: all .5s ease 1.1s;
    -o-transition: all .5s ease 1.1s;
    -webkit-transition: all .5s ease;
    -webkit-transition-delay: 1.1s;
    transition: all .5s ease 1.1s
}


#sp_nav.sp_menu_active .sp_main_nav>li:nth-child(12) {
    -moz-transition: all .5s ease 1.2s;
    -o-transition: all .5s ease 1.2s;
    -webkit-transition: all .5s ease;
    -webkit-transition-delay: 1.2s;
    transition: all .5s ease 1.2s
}


#sp_nav.sp_menu_active #sp_sns_nav {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    -moz-transition: all .5s ease 1.2s;
    -o-transition: all .5s ease 1.2s;
    -webkit-transition: all .5s ease;
    -webkit-transition-delay: 1.2s;
    transition: all .5s ease 1.2s
}

#sp_nav .sp_main_nav {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: initial;
    position: relative;
    z-index: 10
}

#sp_nav .sp_main_nav>li {
    width: 50%;
    opacity: 0;
    position: relative;
    margin: 10px 0;
    padding: 0 5px;
    -moz-transform: translate(0, 5px);
    -ms-transform: translate(0, 5px);
    -webkit-transform: translate(0, 5px);
    transform: translate(0, 5px);
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

#sp_nav .sp_main_nav>li:nth-child(2n-1)::after {
    content: "";
    display: block;
    height: 100%;
    width: 1px;
    background-color: #FFF;
    opacity: 0.3;
    position: absolute;
    right: 0;
    top: 0
}

.en #sp_nav .sp_main_nav>li.shop {
    display: none !important
}

#sp_nav .sp_main_nav>li a {
    color: #FFF;
    display: inline-block;
    font-size: 3.9vw;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.12em;
    padding: 4px 0
}

#sp_nav .sp_main_nav>li .spmanu_shop {
    padding: 18px 0 10px!important;
}

#sp_nav .sp_main_nav>li a small {
    width: 100%;
    display: block;
    font-size: 13px;
    letter-spacing: 0.08em;
    transform: scale(0.85, 0.85)
}

.en #sp_nav .sp_main_nav>li a small {
    display: none !important
}

#sp_nav .sp_main_nav>li ul {
    width: 100%
}

#sp_nav .sp_main_nav>li ul li a {
    width: 100%;
    display: block;
    font-size: 10px;
    line-height: 1.5;
    padding: 7px 0
}

#sp_nav #sp_sns_nav {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    padding: 30px 0 0;
    opacity: 0;
    position: relative;
    z-index: 10;
    -moz-transform: translate(0, 5px);
    -ms-transform: translate(0, 5px);
    -webkit-transform: translate(0, 5px);
    transform: translate(0, 5px);
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

#sp_nav #sp_sns_nav::before {
    color: #FFF;
	white-space:pre;
    content: "follow\Akokiafeca";
	font-family: BrownNow,Tipique_Regular,YakuHanJP,Jost,Roboto;
    display: block;
    width: 100%;
    height: 55px;
    font-size: 33px;
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 0.95;
    margin: 0 0 10px;
    opacity: 1;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

#sp_nav #sp_sns_nav li {
    width: 50px;
    margin: 0 2px;
    text-align: center
}

#sp_nav #sp_sns_nav li a {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto
}

#sp_nav #sp_sns_nav li a svg {
    width: 22px;
    height: 22px;
    fill: #FFF;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

#sp_nav #sp_sns_nav li a img {
    width: 50px;
    height: 50px;
    filter: invert(100%) sepia(2%) saturate(959%) hue-rotate(197deg) brightness(200%) contrast(102%);
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

#sp_nav #sp_sns_nav li.tw a svg,#sp_nav #sp_sns_nav li.fb a svg {
    width: 24px;
    height: 24px
}

#sp_nav #sp_nav_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    pointer-events: none
}

#cover {
    margin: 180px 0 100px;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    position: relative
}

#cover::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color:;
}

@media screen and (max-width: 767px) {
    #cover::after {
        height:100vw
    }
}

@media screen and (max-width: 767px) {
    #cover {
        width:100vw;
        margin-bottom: 0
    }
}

#shop #cover {
    margin-bottom: 0
}

#cover #cover_wrap {
    width: 100%;
    overflow: hidden;
    opacity: 0;
    -moz-transform: translate(0, 3px);
    -ms-transform: translate(0, 30px);
    -webkit-transform: translate(0, 30px);
    transform: translate(0, 30px);
    position: relative;
    z-index: 1;
    -moz-transition: opacity 2s ease;
    -o-transition: opacity 2s ease;
    -webkit-transition: opacity 2s ease;
    transition: all 2s ease 1.6s;
}

#cover #cover_wrap.slick-initialized {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap {
        height:calc( 100vh - 150px );
        min-height: 600px;
        max-height: 700px
    }

}


@media screen and (max-width: 767px) {

#cover #cover_wrap.slick-initialized {
z-index: 1
}
}

@media screen and (max-width: 565px) {

#cover #cover_wrap.slick-initialized {
z-index: 1
}
}


#cover #cover_wrap .slick-list {
    outline: none
}

#cover #cover_wrap .cover_colour {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start
}

#cover #cover_wrap .cover_colour::after {
    display: none
}

#cover #cover_wrap .cover_colour .colour_cover_thumb {
    position: absolute;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFF
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb {
        width:20%;
        height: 33.3333%
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb {
        width:33.3333%;
        height: 33.3333%
    }
}

#cover #cover_wrap .cover_colour .colour_cover_thumb img {
    width: 70%;
    height: auto;
    fill: #000
}

#cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_1 {
    background: url(../img/colours/colour_cover_thumb_1.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_1 {
        top:0;
        left: 0
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_1 {
        display:none
    }
}

#cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_2 {
    background: url(../img/colours/colour_cover_thumb_2.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_2 {
        top:0;
        left: 20%
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_2 {
        top:0;
        left: 0
    }
}

#cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_3 {
    background: url(../img/colours/colour_cover_thumb_3.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_3 {
        top:0;
        left: 40%
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_3 {
        top:0;
        left: 33.3333%
    }
}

#cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_4 {
    background: url(../img/colours/colour_cover_thumb_4.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_4 {
        top:0;
        left: 60%
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_4 {
        top:0;
        right: 0
    }
}

#cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_5 {
    background: url(../img/colours/colour_cover_thumb_5.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_5 {
        top:0;
        left: 80%
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_5 {
        display:none
    }
}

#cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_6 {
    background: url(../img/colours/colour_cover_thumb_6.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_6 {
        top:33.3333%;
        left: 0
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_6 {
        display:none
    }
}

#cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_7 {
    background: url(../img/colours/colour_cover_thumb_7.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_7 {
        top:33.3333%;
        left: 20%
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_7 {
        top:33.3333%;
        left: 0
    }
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_8 {
        top:33.3333%;
        left: 40%
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_8 {
        top:33.3333%;
        left: 33.3333%
    }
}

#cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_9 {
    background: url(../img/colours/colour_cover_thumb_9.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_9 {
        top:33.3333%;
        left: 60%
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_9 {
        top:33.3333%;
        right: 0
    }
}

#cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_10 {
    background: url(../img/colours/colour_cover_thumb_10.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_10 {
        top:33.3333%;
        left: 80%
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_10 {
        display:none
    }
}

#cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_11 {
    background: url(../img/colours/colour_cover_thumb_11.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_11 {
        bottom:0;
        left: 0
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_11 {
        display:none
    }
}

#cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_12 {
    background: url(../img/colours/colour_cover_thumb_12.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_12 {
        bottom:0;
        left: 20%
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_12 {
        bottom:0;
        left: 0
    }
}

#cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_13 {
    background: url(../img/colours/colour_cover_thumb_13.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_13 {
        bottom:0;
        left: 40%
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_13 {
        bottom:0;
        left: 33.3333%
    }
}

#cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_14 {
    background: url(../img/colours/colour_cover_thumb_14.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_14 {
        bottom:0;
        left: 60%
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_14 {
        bottom:0;
        right: 0
    }
}

#cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_15 {
    background: url(../img/colours/colour_cover_thumb_15.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_15 {
        bottom:0;
        left: 80%
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .cover_colour .colour_cover_thumb.colour_cover_thumb_15 {
        display:none
    }
}

#cover #cover_wrap .shop_cover .shop_cover_thumb {
    position: absolute;
    height: 50%
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .shop_cover .shop_cover_thumb {
        width:25%;
        height: 50%
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .shop_cover .shop_cover_thumb {
        width:50%;
        height: 50%
    }
}

#cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_1 {
    background: url(../img/shop_cover_thumb_1.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_1 {
        top:0;
        right: 0
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_1 {
        display:none
    }
}

#cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_2 {
    background: url(../img/shop_cover_thumb_2.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_2 {
        top:0;
        left: 0
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_2 {
        top:0;
        left: 0
    }
}

#cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_3 {
    background: url(../img/shop_cover_thumb_3.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_3 {
        bottom:0;
        left: 25%
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_3 {
        display:none
    }
}

#cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_4 {
    background: url(../img/shop_cover_thumb_4.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_4 {
        top:0;
        left: 50%
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_4 {
        top:0;
        right: 0
    }
}

#cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_5 {
    background: url(../img/shop_cover_thumb_5.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_5 {
        bottom:0;
        left: 0
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_5 {
        display:none
    }
}

#cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_6 {
    background: url(../img/shop_cover_thumb_6.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_6 {
        bottom:0;
        right: 0
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_6 {
        bottom:0;
        left: 0
    }
}

#cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_7 {
    background: url(../img/shop_cover_thumb_7.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_7 {
        bottom:0;
        left: 50%
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_7 {
        display:none
    }
}

#cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_8 {
    background: url(../img/shop_cover_thumb_8.jpg) center center no-repeat;
    background-size: cover
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_8 {
        top:0;
        left: 25%
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .shop_cover .shop_cover_thumb.shop_cover_thumb_8 {
        bottom:0;
        right: 0
    }
}

#cover #cover_wrap .slide-arrow {
    color: #FFF;
    display: block;
    letter-spacing: 0.1em;
    line-height: 1;
    cursor: pointer;
    position: absolute;
    z-index: 5;
    opacity: 0.5;
    -moz-transition: opacity .4s ease;
    -o-transition: opacity .4s ease;
    -webkit-transition: opacity .4s ease;
    transition: opacity .4s ease
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap .slide-arrow {
        font-weight:600;
        font-size: 11px;
        padding: 15px;
        bottom: 15px
    }

    #cover #cover_wrap .slide-arrow.prev-arrow {
        right: 180px
    }

    #cover #cover_wrap .slide-arrow.next-arrow {
        right: 35px
    }
}

@media screen and (min-width: 767px) and (min-width: 1080px) {
    #cover #cover_wrap .slide-arrow:hover {
        opacity:1
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap .slide-arrow {
        top:50vw;
        width: 50px;
        height: 80px;
        opacity: 0.8;
        margin-top: -40px
    }

    #cover #cover_wrap .slide-arrow::before {
        content: "";
        display: block;
        width: 15px;
        height: 15px;
        position: absolute;
        top: 30px;
        transform: rotate(225deg)
    }

    #cover #cover_wrap .slide-arrow span {
        display: none
    }

    #cover #cover_wrap .slide-arrow.prev-arrow {
        left: 0
    }

    #cover #cover_wrap .slide-arrow.prev-arrow::before {
        left: 18px;
        border-top: 2px solid #FFF;
        border-right: 2px solid #FFF
    }

    #cover #cover_wrap .slide-arrow.next-arrow {
        right: 0
    }

    #cover #cover_wrap .slide-arrow.next-arrow::before {
        right: 18px;
        border-bottom: 2px solid #FFF;
        border-left: 2px solid #FFF
    }
}

@media screen and (min-width: 1080px) {
    #cover #cover_wrap:hover article::before,#cover #cover_wrap:hover article::after {
        opacity:0.25
    }

    #cover #cover_wrap:hover article a::after {
        opacity: 0
    }
}

#cover #cover_wrap article {
    width: 100%;
    position: relative;
    outline: none
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap article {
        height:calc( 100vh - 150px );
        min-height: 600px;
        max-height: 700px
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap article {
        height:auto
    }
}

#cover #cover_wrap article.slick-active a .caption {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    -moz-transition: all 1s ease .75s;
    -o-transition: all 1s ease .75s;
    -webkit-transition: all 1s ease;
    -webkit-transition-delay: .75s;
    transition: all 1s ease .75s
}

#cover #cover_wrap article a {
    color: #FFF;
    width: 100%;
    outline: none
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap article a {
        height:100%;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center
    }

    #cover #cover_wrap article a::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,0.1);
        z-index: 1;
        -moz-transition: all .4s ease;
        -o-transition: all .4s ease;
        -webkit-transition: all .4s ease;
        transition: all .4s ease
    }

    #shop #cover #cover_wrap article a::after {
        background-color: rgba(0,0,0,0.05)
    }
}

#cover #cover_wrap article a .article_title_logo {
    display: block;
    width: 45%;
    max-width: 340px;
    height: auto;
    opacity: 0;
    -moz-transition: opacity 1s ease 2s,-moz-transform 1s ease 2s;
    -o-transition: opacity 1s ease 2s,-o-transform 1s ease 2s;
    -webkit-transition: opacity 1s ease,-webkit-transform 1s ease;
    -webkit-transition-delay: 2s,2s;
    transition: opacity 1s ease 2s,transform 1s ease 2s;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.load #cover #cover_wrap article a .article_title_logo {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

#cover #cover_wrap article a .count {
    color: #999;
    font-weight: 300;
    position: absolute;
    z-index: 3;
    opacity: 0.7;
    vertical-align: top;
    letter-spacing: 0.1em
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap article a .count {
        width:80px;
        height: 11px;
        bottom: 30px;
        right: 100px;
        border-left: 1px solid #999;
        border-right: 1px solid #999;
        line-height: 11px
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap article a .count {
        width:80px;
        height: 11px;
        top: calc( 100vw - 29px );
        right: 10px;
        line-height: 11px;
        text-align: right
    }
}

#cover #cover_wrap article a .count span {
    color: #999;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    vertical-align: top;
    padding: 0 3px
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap article a .count span {
        font-size:11px
    }
}

#cover #cover_wrap article a figure {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

#cover #cover_wrap article a .toppic_pickup1{
    display: none!important;
}

#cover #cover_wrap article a .toppic_pickup2{
    display: none!important;
}


	

@media screen and (max-width: 565px) {
#cover #cover_wrap article a .toppic_pickup1{
    display: block!important;
}
#cover #cover_wrap article a .toppic_pickup2{
    display: block!important;
}
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap article a figure {
        height:80vw;
        position: relative
    }
	#cover {
    margin: 130px 0 0px;

}
	


#cover #cover_wrap article a.pop{
	
}

.toppic_pickup1{
    background-image: url(../img/top/work_kuma1.gif) !important;
	background-size: 150px 141px!important;
    background-repeat: no-repeat !important;
    height: 141px !important;
    width: 150px;
    position: absolute;
    right: 10px;
    top: calc(60vw - 10px);
    opacity: 1 !important;
    /* -webkit-animation: a-main-common-kata-two2 1.6s infinite normal !important;
    animation: a-main-common-kata-two2 1.6s infinite normal !important; */
	z-index: 2;
}

.toppic_pickup2{
    background-image: url(../img/load_kuma7-3.gif) !important;
	background-size: 170px 170px!important;
    background-repeat: no-repeat !important;
    height: 170px !important;
    width: 170px;
    position: absolute;
    right: 10px;
    top: calc(60vw - 10px);
    opacity: 1 !important;
	z-index: 2;
}

.toppic_pickup1 .pickupkuma{
	position: relative;
	font-size: 0.8em !important;
	bottom: 57px;
	right: 43px;
	color: #fff;
	text-shadow: #333 1px 0 10px;
	transform: rotate(-12deg);
	}
	
.toppic_pickup2 .pickupkuma{
	position: relative;
	font-size: 0.8em !important;
	bottom: 46px;
	right: 27px;
	color: #fff;
	text-shadow: #333 1px 0 10px;
	transform: rotate(-12deg);
}
	
}

@media screen and (max-width: 400px) {
    .toppic_pickup2{
        background-size: 140px 140px!important;
        height: 140px !important;
        width: 140px;
        position: absolute;
        top: calc(57vw - 30px);
        right: 10px;
    }
    .toppic_pickup1{
        background-image: url(../img/top/work_kuma1.gif) !important;
        background-size: 128px 120px!important;
        background-repeat: no-repeat !important;
        height: 120px !important;
        width: 128px;
        position: absolute;
        right: 10px;
        top: calc(57vw - 30px);
    }
}

@media screen and (max-width: 768px) {
	.face_move{
        pointer-events: none;
    }
}

@media screen and (max-width: 565px) {
	.face_move{
        display: none!important;
    }
    #cover #cover_wrap article a figure::before{
    background-image: url(../img/top/mv-img-mado-pc3.png)!important;;
    }
    /* #cover #cover_wrap article a figure::after{
    background-image: url(../img/top/kuma_polarbear2.png)!important;
    background-repeat: no-repeat!important;
    height: 150px!important;
    opacity: 1!important;
    background-position-x: 96%!important;
    background-position-y: -7px;
    -webkit-animation: a-main-common-kata-two2 1.6s infinite normal!important;;
    animation: a-main-common-kata-two2 1.6s infinite normal!important;;
    } */
}


@media screen and (max-width: 480px) {
	#cover {
    margin: 103px 0 0px;
}
}

#cover #cover_wrap article a figure::before,#cover #cover_wrap article a figure::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    z-index: 1;
    pointer-events: none;
    -moz-transition: opacity .4s ease;
    -o-transition: opacity .4s ease;
    -webkit-transition: opacity .4s ease;
    transition: opacity .4s ease
}



#cover #cover_wrap article a figure::before {
    width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: 0 auto;
    background-image: url(../img/top/mv-img-mado-pc.png);
	background-position: center!important;
	background-size: 1130px 700px;
    background-repeat: no-repeat;
    position: absolute;
	opacity: 1;
	z-index: 2;
}


@media screen and (max-width: 767px) {
#cover #cover_wrap article a figure::before {
    background-position: top !important;
	background-size: 1277px 767px;
    }
}


@media screen and (max-width: 767px) {
    #cover #cover_wrap article a figure::before {

    }
}



#cover #cover_wrap article a figure::after {
    height: 30%;
    bottom: 0;
    width: 100%;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=')!important;
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0,0,0,0)),color-stop(100%, #000000));
    background: -moz-linear-gradient(rgba(0,0,0,0),#000000);
    background: -webkit-linear-gradient(rgba(0,0,0,0),#000000);
    background: linear-gradient(rgba(0,0,0,0),#000000)!important;
	opacity: 0.4;
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap article a figure::after {
        height:10%
    }
}

#cover #cover_wrap article a .caption {
    color: #FFF;
    z-index: 5;
    font-weight: 600;
    padding: 0;
    text-align: left;
    opacity: 0;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease
}

#shop #cover #cover_wrap article a .caption {
    display: block
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap article a .caption {
        position:absolute;
        width: calc( 100% - 300px );
        left: 50px;
        bottom: 28px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        flex-wrap: wrap
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap article a .caption {
        width:100vw;
        padding: 4vw 4vw 3vw
    }

    #shop #cover #cover_wrap article a .caption {
        padding: 4vw 4vw 4vw
    }
}

#cover #cover_wrap article a .caption .meta,#cover #cover_wrap article a .caption h3,#cover #cover_wrap article a .caption .tag {
    color: #FFF;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap article a .caption .meta,#cover #cover_wrap article a .caption h3,#cover #cover_wrap article a .caption .tag {
        color:#535657
    }
}

#cover #cover_wrap article a .caption h3 {
    letter-spacing: 0.12em;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    -moz-font-feature-settings: "palt";
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt"
}

#shop #cover #cover_wrap article a .caption h3 {
    bottom: 0;
    margin: 0 0 10px
}

@media screen and (min-width: 767px) {
    #cover #cover_wrap article a .caption h3 {
        font-size:18px;
        margin: 0 30px 0 0;
        bottom: -3px
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap article a .caption h3 {
        font-size:4.2vw;
		max-width: 63vw;
    }
}

body.en #cover #cover_wrap article a .caption h3 {
    letter-spacing: 0.03em
}

#cover #cover_wrap article a .caption .meta {
    font-size: 11px;
    letter-spacing: 0.07em;
    line-height: 1.5;
    margin: 15px 0 0;
    position: relative;
    z-index: 1;
    opacity: 0.7
}

#shop #cover #cover_wrap article a .caption .meta {
    margin: 0
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap article a .caption .meta {
        width:100%;
        color: #999;
        font-size: 10px;
        margin: 5px 0 0;
        opacity: 1
    }

    #cover #cover_wrap article a .caption .meta span.date {
        margin-right: 2vw
    }

    #shop #cover #cover_wrap article a .caption .meta {
        display: block
    }
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap article a .caption .meta p {
        margin:5px 10px 0 0;
        line-height: 1
    }
}

#cover #cover_wrap article a .caption .meta p span {
    display: inline-block
}

#cover #cover_wrap article a .caption .meta p span.date {
    margin-right: 10px
}

#cover #cover_wrap article a .caption .meta p span.category+.category::before {
    content: "+";
    display: inline-block;
    margin: 0 4px
}

#cover #cover_wrap article a .caption .meta .tag {
    max-width: 500px;
    margin: 5px 0 0;
    position: relative;
    z-index: 1
}

#cover #cover_wrap article a .caption .meta .tag li {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.05em;
    margin-right: 10px
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap article a .caption .meta .tag {
        color:#999;
        line-height: 1;
        margin: 5px 0 0
    }

    #cover #cover_wrap article a .caption .meta .tag li {
        font-size: 10px;
        line-height: 1;
        margin-right: 2vw
    }
}

#cover #cover_wrap article a .caption .meta .price {
    margin: 5px 0 0;
    transition: color .4s ease
}

#cover #cover_wrap article a .caption .meta .price .price_wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center
}

#cover #cover_wrap article a .caption .meta .price .price_set {
    line-height: 1;
    margin: 0 10px 0 0
}

#cover #cover_wrap article a .caption .meta .price .price_set .p_price,#cover #cover_wrap article a .caption .meta .price .price_set .p_volume {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.5
}

@media screen and (max-width: 767px) {
    #cover #cover_wrap article a .caption .meta .price .price_set .p_price,#cover #cover_wrap article a .caption .meta .price .price_set .p_volume {
        font-size:11px
    }
}

#cover #cover_wrap article a .caption .meta .price .price_set .p_price .tax,#cover #cover_wrap article a .caption .meta .price .price_set .p_volume .tax {
    font-size: 10px;
    padding-left: 3px
}

#cover #cover_wrap article a .caption .meta .price .price_set .p_volume {
    padding-right: 4px
}

#cover #cover_wrap article a .caption .meta .price .price_set .p_volume.none {
    display: none
}

#cover #cover_wrap article a .caption .meta .price .price_set .p_price .sp_price {
    color: #6184ab
}

#cover #cover_wrap article a .caption .meta .price .price_set .p_price .sp_price .label {
    vertical-align: middle;
    padding-right: 5px
}

#cover #cover_wrap article a .caption .meta .price .price_set .p_price .regular_price {
    color: #666
}

#cover #cover_wrap article a .caption .meta .price .price_set .p_price::after {
    content: "/";
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    padding: 0 5px
}

#cover #cover_wrap article a .caption .meta .price .price_set .p_price:last-child::after {
    display: none
}

#cover #cover_wrap article a .caption .meta .volume,#cover #cover_wrap article a .caption .meta .type {
    color: #999;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.7;
    transition: color .4s ease
}


@media screen and (max-width: 767px) {
    #cover #cover_wrap article a .caption .meta .volume,#cover #cover_wrap article a .caption .meta .type {
        display:none
    }
}

.Marquee {
    height: 100%;
    pointer-events: none;
    transition: 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.MarqueeWrap {
    position: absolute;
    inset: 0px 66px 0px 25px;
    pointer-events: none;
}


@media screen and (max-width: 767px) {
.MarqueeWrap {
    inset: 0px 22px 0px 22px;
}
}


.marquee-container {
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: row !important;
  position: relative;
  width: 100%;
}
.marquee-container:hover div {
  animation-play-state: var(--pause-on-hover);
}
.marquee-container:active div {
  animation-play-state: var(--pause-on-click);
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
}
.overlay::before, .overlay::after {
  background: linear-gradient(to right, var(--gradient-color));
  content: "";
  height: 100%;
  position: absolute;
  width: var(--gradient-width);
  z-index: 2;
}
.overlay::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.overlay::before {
  left: 0;
  top: 0;
}

.Marquee.isHidden{
	opacity: 0;
}
.marquee {
  flex: 0 0 auto;
  min-width: 170%;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  animation: scroll var(--duration) linear var(--delay) var(--iteration-count);
  animation-play-state: var(--play);
  animation-delay: var(--delay);
  animation-direction: var(--direction);
  color: #667f9b;
}
@keyframes scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}



.wordmove {
  gap: 1.05px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right_wordmove:hover .underword {
  text-shadow: 0 0 0 #6184ab, 0 1.5em 0 #6184ab;

}

.underword {
  overflow: hidden;
  color: transparent;
  text-shadow: 0 -1.5em 0 #535657, 0 0 0 #535657;
  transition: text-shadow 0.2s;
}



.wordmove2 {
  gap: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wh_wordmove:hover .underword2 {
  text-shadow: 0 0 0 #fff, 0 1.5em 0 #fff;

}

.underword2 {
  overflow: hidden;
  color: transparent;
  text-shadow: 0 -2em 0 #fff, 0 0 0 #fff;
  transition: text-shadow 0.2s;
}



.pad_b10{
padding-botom: 10px;
}
.pad_b20{
padding-botom: 20px;
}
.pad_b30{
padding-botom: 30px;
}
.pad_b40{
padding-botom: 40px;
}
.pad_b50{
padding-botom: 50px;
}
.pad_b60{
padding-botom: 60px;
}
.pad_b70{
padding-botom: 70px;
}
.pad_b80{
padding-botom: 80px;
}
.pad_b90{
padding-botom: 90px;
}
.pad_b100{
padding-botom: 100px;
}
.pad_b110{
padding-botom: 110px;
}
.pad_b120{
padding-botom: 120px;
}
.pad_b130{
padding-botom: 130px;
}
.pad_b140{
padding-botom: 140px;
}
.pad_b150{
padding-botom: 150px;
}
.pad_b160{
padding-botom: 160px;
}
.pad_b170{
padding-botom: 170px;
}
.pad_b180{
padding-botom: 180px;
}
.pad_b190{
padding-botom: 190px;
}
.pad_b200{
padding-botom: 200px;
}
.pad_b210{
padding-botom: 210px;
}
.pad_b220{
padding-botom: 220px;
}
.pad_b330{
padding-botom: 230px;
}
.pad_b240{
padding-botom: 240px;
}
.pad_b250{
padding-botom: 250px;
}
.pad_b260{
padding-botom: 260px;
}
.pad_b270{
padding-botom: 270px;
}
.pad_b280{
padding-botom: 280px;
}
.pad_b290{
padding-botom: 290px;
}
.pad_b300{
padding-botom: 300px;
}



.pad_t10{
padding-top: 10px;
}
.pad_t20{
padding-top: 20px;
}
.pad_t30{
padding-top: 30px;
}
.pad_t40{
padding-top: 40px;
}
.pad_t50{
padding-top: 50px;
}
.pad_t60{
padding-top: 60px;
}
.pad_t70{
padding-top: 70px;
}
.pad_t80{
padding-top: 80px;
}
.pad_t90{
padding-top: 90px;
}
.pad_t100{
padding-top: 100px;
}
.pad_t110{
padding-top: 110px;
}
.pad_t120{
padding-top: 120px;
}
.pad_t130{
padding-top: 130px;
}
.pad_t140{
padding-top: 140px;
}
.pad_t150{
padding-top: 150px;
}
.pad_t160{
padding-top: 160px;
}
.pad_t170{
padding-top: 170px;
}
.pad_t180{
padding-top: 180px;
}
.pad_t190{
padding-top: 190px;
}
.pad_t200{
padding-top: 200px;
}
.pad_t210{
padding-top: 210px;
}
.pad_t220{
padding-top: 220px;
}
.pad_t330{
padding-top: 230px;
}
.pad_t240{
padding-top: 240px;
}
.pad_t250{
padding-top: 250px;
}
.pad_t260{
padding-top: 260px;
}
.pad_t270{
padding-top: 270px;
}
.pad_t280{
padding-top: 280px;
}
.pad_t290{
padding-top: 290px;
}
.pad_t300{
padding-top: 300px;
}



.pad_r10{
padding-right: 10px;
}
.pad_r20{
padding-right: 20px;
}
.pad_r30{
padding-right: 30px;
}
.pad_r40{
padding-right: 40px;
}
.pad_r50{
padding-right: 50px;
}
.pad_r60{
padding-right: 60px;
}
.pad_r70{
padding-right: 70px;
}
.pad_r80{
padding-right: 80px;
}
.pad_r90{
padding-right: 90px;
}
.pad_r100{
padding-right: 100px;
}
.pad_r110{
padding-right: 110px;
}
.pad_r120{
padding-right: 120px;
}
.pad_r130{
padding-right: 130px;
}
.pad_r140{
padding-right: 140px;
}
.pad_r150{
padding-right: 150px;
}
.pad_r160{
padding-right: 160px;
}
.pad_r170{
padding-right: 170px;
}
.pad_r180{
padding-right: 180px;
}
.pad_r190{
padding-right: 190px;
}
.pad_r200{
padding-right: 200px;
}
.pad_r210{
padding-right: 210px;
}
.pad_r220{
padding-right: 220px;
}
.pad_r330{
padding-right: 230px;
}
.pad_r240{
padding-right: 240px;
}
.pad_r250{
padding-right: 250px;
}
.pad_r260{
padding-right: 260px;
}
.pad_r270{
padding-right: 270px;
}
.pad_r280{
padding-right: 280px;
}
.pad_r290{
padding-right: 290px;
}
.pad_r300{
padding-right: 300px;
}


.pad_l10{
padding-left: 10px;
}
.pad_l20{
padding-left: 20px;
}
.pad_l30{
padding-left: 30px;
}
.pad_l40{
padding-left: 40px;
}
.pad_l50{
padding-left: 50px;
}
.pad_l60{
padding-left: 60px;
}
.pad_l70{
padding-left: 70px;
}
.pad_l80{
padding-left: 80px;
}
.pad_l90{
padding-left: 90px;
}
.pad_l100{
padding-left: 100px;
}
.pad_l110{
padding-left: 110px;
}
.pad_l120{
padding-left: 120px;
}
.pad_l130{
padding-left: 130px;
}
.pad_l140{
padding-left: 140px;
}
.pad_l150{
padding-left: 150px;
}
.pad_l160{
padding-left: 160px;
}
.pad_l170{
padding-left: 170px;
}
.pad_l180{
padding-left: 180px;
}
.pad_l190{
padding-left: 190px;
}
.pad_l200{
padding-left: 200px;
}
.pad_l210{
padding-left: 210px;
}
.pad_l220{
padding-left: 220px;
}
.pad_l230{
padding-left: 230px;
}
.pad_l240{
padding-left: 240px;
}
.pad_l250{
padding-left: 250px;
}
.pad_l260{
padding-left: 260px;
}
.pad_l270{
padding-left: 270px;
}
.pad_l280{
padding-left: 280px;
}
.pad_l290{
padding-left: 290px;
}
.pad_l300{
padding-left: 300px;
}



.mar_b10{
margin-bottom: 10px;
}
.mar_b20{
margin-bottom: 20px;
}
.mar_b30{
margin-bottom: 30px;
}
.mar_b40{
margin-bottom: 40px;
}
.mar_b50{
margin-bottom: 50px;
}
.mar_b60{
margin-bottom: 60px;
}
.mar_b70{
margin-bottom: 70px;
}
.mar_b80{
margin-bottom: 80px;
}
.mar_b90{
margin-bottom: 90px;
}
.mar_b100{
margin-bottom: 100px;
}
.mar_b110{
margin-bottom: 110px;
}
.mar_b120{
margin-bottom: 120px;
}
.mar_b130{
margin-bottom: 130px;
}
.mar_b140{
margin-bottom: 140px;
}
.mar_b150{
margin-bottom: 150px;
}
.mar_b160{
margin-bottom: 160px;
}
.mar_b170{
margin-bottom: 170px;
}
.mar_b180{
margin-bottom: 180px;
}
.mar_b190{
margin-bottom: 190px;
}
.mar_b200{
margin-bottom: 200px;
}
.mar_b210{
margin-bottom: 210px;
}
.mar_b220{
margin-bottom: 220px;
}
.mar_b330{
margin-bottom: 230px;
}
.mar_b240{
margin-bottom: 240px;
}
.mar_b250{
margin-bottom: 250px;
}
.mar_b260{
margin-bottom: 260px;
}
.mar_b270{
margin-bottom: 270px;
}
.mar_b280{
margin-bottom: 280px;
}
.mar_b290{
margin-bottom: 290px;
}
.mar_b300{
margin-bottom: 300px;
}


.mar_t10{
margin-top: 10px;
}
.mar_t20{
margin-top: 20px;
}
.mar_t30{
margin-top: 30px;
}
.mar_t40{
margin-top: 40px;
}
.mar_t50{
margin-top: 50px;
}
.mar_t60{
margin-top: 60px;
}
.mar_t70{
margin-top: 70px;
}
.mar_t80{
margin-top: 80px;
}
.mar_t90{
margin-top: 90px;
}
.mar_t100{
margin-top: 100px;
}
.mar_t110{
margin-top: 110px;
}
.mar_t120{
margin-top: 120px;
}
.mar_t130{
margin-top: 130px;
}
.mar_t140{
margin-top: 140px;
}
.mar_t150{
margin-top: 150px;
}
.mar_t160{
margin-top: 160px;
}
.mar_t170{
margin-top: 170px;
}
.mar_t180{
margin-top: 180px;
}
.mar_t190{
margin-top: 190px;
}
.mar_t200{
margin-top: 200px;
}
.mar_t210{
margin-top: 210px;
}
.mar_t220{
margin-top: 220px;
}
.mar_t330{
margin-top: 230px;
}
.mar_t240{
margin-top: 240px;
}
.mar_t250{
margin-top: 250px;
}
.mar_t260{
margin-top: 260px;
}
.mar_t270{
margin-top: 270px;
}
.mar_t280{
margin-top: 280px;
}
.mar_t290{
margin-top: 290px;
}
.mar_t300{
margin-top: 300px;
}



.mar_r10{
margin-right: 10px;
}
.mar_r20{
margin-right: 20px;
}
.mar_r30{
margin-right: 30px;
}
.mar_r40{
margin-right: 40px;
}
.mar_r50{
margin-right: 50px;
}
.mar_r60{
margin-right: 60px;
}
.mar_r70{
margin-right: 70px;
}
.mar_r80{
margin-right: 80px;
}
.mar_r90{
margin-right: 90px;
}
.mar_r100{
margin-right: 100px;
}
.mar_r110{
margin-right: 110px;
}
.mar_r120{
margin-right: 120px;
}
.mar_r130{
margin-right: 130px;
}
.mar_r140{
margin-right: 140px;
}
.mar_r150{
margin-right: 150px;
}
.mar_r160{
margin-right: 160px;
}
.mar_r170{
margin-right: 170px;
}
.mar_r180{
margin-right: 180px;
}
.mar_r190{
margin-right: 190px;
}
.mar_r200{
margin-right: 200px;
}
.mar_r210{
margin-right: 210px;
}
.mar_r220{
margin-right: 220px;
}
.mar_r330{
margin-right: 230px;
}
.mar_r240{
margin-right: 240px;
}
.mar_r250{
margin-right: 250px;
}
.mar_r260{
margin-right: 260px;
}
.mar_r270{
margin-right: 270px;
}
.mar_r280{
margin-right: 280px;
}
.mar_r290{
margin-right: 290px;
}
.mar_r300{
margin-right: 300px;
}


.mar_l10{
margin-left: 10px;
}
.mar_l20{
margin-left: 20px;
}
.mar_l30{
margin-left: 30px;
}
.mar_l40{
margin-left: 40px;
}
.mar_l50{
margin-left: 50px;
}
.mar_l60{
margin-left: 60px;
}
.mar_l70{
margin-left: 70px;
}
.mar_l80{
margin-left: 80px;
}
.mar_l90{
margin-left: 90px;
}
.mar_l100{
margin-left: 100px;
}
.mar_l110{
margin-left: 110px;
}
.mar_l120{
margin-left: 120px;
}
.mar_l130{
margin-left: 130px;
}
.mar_l140{
margin-left: 140px;
}
.mar_l150{
margin-left: 150px;
}
.mar_l160{
margin-left: 160px;
}
.mar_l170{
margin-left: 170px;
}
.mar_l180{
margin-left: 180px;
}
.mar_l190{
margin-left: 190px;
}
.mar_l200{
margin-left: 200px;
}
.mar_l210{
margin-left: 210px;
}
.mar_l220{
margin-left: 220px;
}
.mar_l230{
margin-left: 230px;
}
.mar_l240{
margin-left: 240px;
}
.mar_l250{
margin-left: 250px;
}
.mar_l260{
margin-left: 260px;
}
.mar_l270{
margin-left: 270px;
}
.mar_l280{
margin-left: 280px;
}
.mar_l290{
margin-left: 290px;
}
.mar_l300{
margin-left: 300px;
}

.more_link {
    width: 100%
}

.opac-0 {
    opacity: 0
}

.opac-01 {
    opacity: .1
}

.opac-02 {
    opacity: .2
}

.opac-03 {
    opacity: .3
}

.opac-04 {
    opacity: .4
}

.opac-05 {
    opacity: .5
}

.opac-06 {
    opacity: .6
}

.opac-065 {
    opacity: .65
}

.opac-07 {
    opacity: .7
}

.opac-075 {
    opacity: .75
}

.opac-08 {
    opacity: .8
}

.opac-085 {
    opacity: .85
}

.opac-09 {
    opacity: .9
}

.opac-095 {
    opacity: .95
}

.lh24 {
    line-height: 2.4 !important
}

.lh23 {
    line-height: 2.3 !important
}

.lh22 {
    line-height: 2.2 !important
}

.lh21 {
    line-height: 2.1 !important
}

.lh20 {
    line-height: 2 !important
}

.lh19 {
    line-height: 1.9 !important
}

.lh18 {
    line-height: 1.8 !important
}

.lh17 {
    line-height: 1.7 !important
}

.lh16 {
    line-height: 1.6 !important
}

.lh15 {
    line-height: 1.5 !important
}

.lh14 {
    line-height: 1.4 !important
}

.lh13 {
    line-height: 1.3 !important
}

.lh12 {
    line-height: 1.2 !important
}

.lh11 {
    line-height: 1.1 !important
}

.lh1 {
    line-height: 1 !important
}

.lh09 {
    line-height: .9 !important
}

.lh08 {
    line-height: .8 !important
}

.lh0 {
    line-height: 0 !important
}

.fns30 {
    font-size: 3em
}

.fns25 {
    font-size: 2.5em
}

.fns20 {
    font-size: 2em
}

.fns195 {
    font-size: 1.95em
}

.fns19 {
    font-size: 1.9em
}

.fns185 {
    font-size: 1.85em
}

.fns18 {
    font-size: 1.8em
}

.fns175 {
    font-size: 1.75em
}

.fns17 {
    font-size: 1.7em
}

.fns165 {
    font-size: 1.65em
}

.fns16 {
    font-size: 1.6em
}

.fns155 {
    font-size: 1.55em
}

.fns15 {
    font-size: 1.5em
}

.fns145 {
    font-size: 1.45em
}

.fns14 {
    font-size: 1.4em
}

.fns135 {
    font-size: 1.35em
}

.fns13 {
    font-size: 1.3em
}

.fns125 {
    font-size: 1.25em
}

.fns12 {
    font-size: 1.2em
}

.fns115 {
    font-size: 1.15em
}

.fns11 {
    font-size: 1.1em
}

.fns105 {
    font-size: 1.05em
}

.fns10 {
    font-size: 1em
}

.fns095 {
    font-size: .95em
}

.fns09 {
    font-size: .9em
}

.fns085 {
    font-size: .85em
}

.fns08 {
    font-size: .8em
}

.fns075 {
    font-size: .75em
}

.fns07 {
    font-size: .7em
}

.bold,.fn-bold {
    font-weight: bold !important
}

.fn-normal {
    font-weight: normal !important
}

.fn-w100 {
    font-weight: 100 !important
}

.fn-w200 {
    font-weight: 200 !important
}

.fn-w300 {
    font-weight: 300 !important
}

.fn-w400 {
    font-weight: 400 !important
}

.fn-w500 {
    font-weight: 500 !important
}

.fn-w600 {
    font-weight: 600 !important
}

.fn-w700 {
    font-weight: 700 !important
}

.fn-w800 {
    font-weight: 800 !important
}

.lesp-n,.lesp-normal {
    letter-spacing: normal !important
}



.lesp-003 {
    letter-spacing: .03em
}

.lesp-004 {
    letter-spacing: .04em
}

.lesp-005 {
    letter-spacing: .05em
}

.lesp-006 {
    letter-spacing: .06em
}

.lesp-007 {
    letter-spacing: .07em
}

.lesp-008 {
    letter-spacing: .08em
}

.lesp-009 {
    letter-spacing: .09em
}

.lesp-01 {
    letter-spacing: .1em
}

.lesp-015 {
    letter-spacing: .15em
}

.lesp-02 {
    letter-spacing: .2em
}

.lesp-025 {
    letter-spacing: .25em
}

.lesp-03 {
    letter-spacing: .3em
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.fn-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -moz-text-overflow: ellipsis
}


.setfns-50 {
    font-size: 3.3333333333em
}

.setfns-44 {
    font-size: 2.9333333333em
}

.setfns-40 {
    font-size: 2.6666666667em
}

.setfns-35 {
    font-size: 2.3333333333em
}

.setfns-32 {
    font-size: 2.1333333333em
}

.setfns-30 {
    font-size: 2em
}

.setfns-26 {
    font-size: 1.7333333333em
}

.setfns-20 {
    font-size: 1.3333333333em
}

.setfns-18 {
    font-size: 1.2em
}

.setfns-17 {
    font-size: 1.1333333333em
}

.setfns-14 {
    font-size: .9333333333em
}

.setfns-13 {
    font-size: .8666666667em
}

@media screen and (max-width: 750px) {
    .setfns-50 {
        font-size:min(6.9333333333vw,44px)
    }

    .setfns-44 {
        font-size: min(6.9333333333vw,44px)
    }

    .setfns-40 {
        font-size: min(6.4vw,40px)
    }

    .setfns-35 {
        font-size: min(6.4vw,35px)
    }

    .setfns-32 {
        font-size: min(5.8666666667vw,32px)
    }

    .setfns-30 {
        font-size: min(6.1333333333vw,30px)
    }

    .setfns-26 {
        font-size: 1.2307692308em
    }

    .setfns-18 {
        font-size: min(3.7333333333vw,18px)
    }
}

/* Table */
/* ============================================ */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption {
  text-align: left;
}
td,
th {
  padding: 0;
  vertical-align: top;
}
th {
  font-weight: bold;
  text-align: left;
}


@media screen and (min-width: 1080px) {
    .more_link {
        margin:60px auto 100px;
    }
}



.more_link_history {
margin:20px auto 0px!important;
}

.more_link_history{
margin:0px auto	70px!important;
}


@media screen and (max-width: 767px) {
    .more_link_history {
    margin:0px auto	0px!important;
    position: relative;
    top: -170px
    }
    }

@media screen and (max-width: 640px) {
        .more_link_history {
        margin:0px auto	0px!important;
        position: relative;
        top: -100px
        }
        }


@media screen and (max-width: 490px) {
.more_link_history {
margin: 0px auto 0px !important;
position: relative;
top: -80px
}	
}


@media screen and (max-width: 450px) {
    .more_link_history {
    margin: 0px auto 0px !important;
    position: relative;
    top: 0px
    }	
    }

    
@media screen and (max-width: 430px) {
.more_link_history {
margin: 0px auto 0px !important;
position: relative;
top: 0px;
}	
}


@media screen and (max-width: 767px) {
    .more_link {
        margin:60px auto
    }
    .more_link.news_readmore {
        margin:60px auto 0px!important;
    }
}


.more_link a {
    color: #535657;
    display: inline-block;
    font-weight: 600;
    font-size: 45px;
    letter-spacing: 0.12em;
    line-height: 1.7;
    text-align: center;
    position: relative;
    opacity: 0;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

@media screen and (max-width: 767px) {
    .more_link a {
     margin-bottom: 80px;
     font-size: 40px;
    }
}




p.more_link2{
    margin-bottom: 10px!important;
	margin-top: 10px!important;
	display: flex;
    justify-content: center;
}

.more_link2 a {
    color: #535657!important;
    display: inline-block;
    font-weight: 600;
    font-size: 32px;
    letter-spacing: 0.12em;
    line-height: 1.7;
    text-align: center;
    position: relative;
    opacity: 0;
	text-decoration: none!important;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

@media screen and (max-width: 767px) {
    .more_link2 a {
     margin-bottom: 0px;
     font-size: 34px;
	
    }
	
	p.more_link2{
	display: flex!important;
    justify-content: center!important;
}
	
}


@media screen and (max-width: 370px) {
    .more_link.more_link_history a {
     margin-top: 40px;
    }
}

@media screen and (max-width: 300px) {
    .more_link.more_link_history a {
     margin-top: 80px;
    }
}
.more_link a::after {
    content: "";
    display: block;
    width: 100%;
    height: 5px;
    background-color: #fcf69f;
    position: absolute;
    left: 0;
    bottom: 0;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

@media screen and (max-width: 767px) {
    .more_link a::after {
        bottom:-3px;
        height: 2px
    }
}

.more_link a.scl_on {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

@media screen and (min-width: 1080px) {
    .more_link a:hover {
        color:#667f9b
    }

    .more_link a:hover::after {
        background-color: #fffee8;
    }
}


.more_link.scl_on a {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}




@media screen and (max-width: 370px) {
    .more_link2.more_link_history a {
     margin-top: 40px;
    }
}

@media screen and (max-width: 300px) {
    .more_link2.more_link_history a {
     margin-top: 80px;
    }
}
.more_link2 a::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background-color: #fcf69f;
    position: absolute;
    left: 0;
    bottom: 7px;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

@media screen and (max-width: 767px) {
    .more_link2 a::after {
        bottom: 3px;
        height: 3px;
    }
}

.more_link2 a.scl_on {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

@media screen and (min-width: 1080px) {
    .more_link2 a:hover {
        color:#667f9b
    }

    .more_link2 a:hover::after {
        background-color: #fffee8;
    }
}


.more_link2.scl_on a {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}



.timeline {
    position: relative;
    opacity: 0;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all 1s ease 1s;
    -o-transition: all 1s ease 1s;
    -webkit-transition: all 1s ease;
    -webkit-transition-delay: 1s;
    transition: all 1s ease 1s
}

.load .timeline {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}


@media screen and (min-width: 767px) {
    .timeline {
        display:flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: flex-start;	
        margin-bottom: 150px
    }
    .timeline_3rd {
        justify-content: flex-start!important;
        gap: 3.8%!important;
    }
    .timeline_2nd {
		display: flex;
    }
    .home .timeline {
        margin-bottom: 0;
        padding-bottom: 0
    }

    .timeline.archive {
        padding-right: 50px;
        padding-left: 50px;
		margin-bottom: 0px!important;
    }
	
}

@media screen and (max-width: 767px) {
    .timeline {
        margin-bottom:10vw;
        padding-bottom: 10vw
    }
    .timeline_3rd {
        display: flex;
        justify-content: center;
        gap: 3.6% !important;
        flex-wrap: wrap;
        align-items: flex-start;
        flex-direction: row;
    }
    .timeline_2nd {
        display: flex;
        justify-content: center;
        gap: 3.6% !important;
        flex-wrap: wrap;
        align-items: flex-start;
        flex-direction: row;
    }
    .timeline.archive {
	    margin-bottom: 0!important;
        padding-bottom: 0!important
	}

    .home .timeline {
        margin-bottom: 0;
        padding-bottom: 0
    }
}

	.timeline.archive.menu_list {
        padding-right: 0px!important;
        padding-left: 0px!important;
		margin-bottom: 0px!important;
    }


.timeline .next_posts_link {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5
}

.timeline .next_posts_link a {
    color: #000;
    display: inline-block;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: 0.12em;
    line-height: 1.7;
    text-align: center;
    position: relative;
    opacity: 0;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

@media screen and (max-width: 767px) {
    .timeline .next_posts_link a {
        font-size:5vw
    }
}

.timeline .next_posts_link a::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background-color: #000;
    position: absolute;
    left: 0;
    bottom: 0;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.timeline .next_posts_link a.scl_on {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

@media screen and (min-width: 1080px) {
    .timeline .next_posts_link a:hover {
        color:#6184ab
    }

    .timeline .next_posts_link a:hover::after {
        background-color: #6184ab
    }
}

.timeline .next_posts_link.scl_on a {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

@media screen and (min-width: 767px) {
    .post-type-archive-ochasuru .timeline::after {
        content:"";
        display: block;
        width: calc( 33.333% - 40px )
    }
}

.timeline article {
    width: calc( 50% - 25px );
    margin: 0 0 70px;
    opacity: 0;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.timeline.timeline_2nd article {
    width: calc(47% - 20px)!important;
    margin: 0 0 35px;
}

@media screen and (min-width: 850px) {
.timeline.timeline_2nd article {
    width: calc(47% - 0px)!important;
    justify-content: flex-start !important;
    gap: 5% !important;
}
}

	
@media screen and (min-width: 1080px) {
    .info_archive {
        width: calc( 33% - 25px )!important;
    }
    .menu_archive {
        width: calc( 33% - 18.1px )!important;
    }
	.item_archive{
    	width: calc( 50% - 14px );
	}
	.brand_archive {
        width: calc( 24% - 21px )!important;
    }
	
    }

@media screen and (max-width: 1080px) {
.timeline article {
    width: calc( 50% - 14px );
	}
}
@media screen and (min-width: 767px) {
    .home .timeline article:nth-last-child(1),.home .timeline article:nth-last-child(2) {
        margin-bottom:0
    }
}

@media screen and (min-width: 767px) {
    .timeline article.ochasuru {
        width:calc( 33.333% - 40px );
        margin: 0 0 100px
    }

    .timeline article.ochasuru:nth-child(3n-1) {
        -moz-transform: translate(0, 50px);
        -ms-transform: translate(0, 50px);
        -webkit-transform: translate(0, 50px);
        transform: translate(0, 50px)
    }

    .timeline article.ochasuru:nth-child(3n) {
        -moz-transform: translate(0, 100px);
        -ms-transform: translate(0, 100px);
        -webkit-transform: translate(0, 100px);
        transform: translate(0, 100px)
    }
}

@media screen and (max-width: 1080px) {
    .timeline article.brand_archive {
        width: calc(32% - 9px);
	}
}
	
@media screen and (max-width: 767px) {

    .timeline article.menu_archive {
        width: calc(50% - 11vw) !important;
        margin: 0 0 70px !important;
}
    .timeline article.brand_archive {
        width: calc(33% - 5vw) !important;
        margin: 0 0 70px !important;
}
}
	

	
@media screen and (max-width: 450px) {
    .timeline article.brand_archive {
        margin: 0 0 30px !important;
	}
}
	
	.timeline article.ochasuru .figure.empty {
    background-color: #e5e5e5;
    position: relative
}
	
	.brand_archive .brandtitle .menutitle{
    line-height: 1.25 !important;
}

.timeline article.ochasuru .figure.empty .over_txt {
    color: #FFF;
    font-weight: 600;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0
}

.timeline article.ochasuru .figure.empty .over_txt .tit {
    font-size: 18px;
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin: 0 0 10px
}

.timeline article.ochasuru .figure.empty .over_txt .tit span {
    font-size: 32px
}

.timeline article.ochasuru .figure.empty .over_txt .date {
    font-size: 15px;
    letter-spacing: 0.1em;
    line-height: 1.6
}

.timeline article.ochasuru .figure.empty .over_txt .date span {
    font-size: 11px
}

@media screen and (min-width: 767px) {
    .timeline article.ochasuru a .txt {
        display:block
    }

    .timeline article.ochasuru a .txt h3 {
        width: 100%
    }

    .timeline article.ochasuru a .txt .meta {
        width: 100%;
        text-align: left;
        margin-top: 15px
    }

    .timeline article.ochasuru a .txt .meta .tag {
        justify-content: flex-start
    }

    .timeline article.ochasuru a .txt .meta .tag li {
        margin-left: 0;
        margin-right: 6px
    }
}

@media screen and (max-width: 767px) {
    .timeline article.ochasuru a .txt {
        padding:4.5vw 0 0
    }

    .timeline article.ochasuru a .txt .meta {
        margin-top: 3vw
    }

    .timeline article.ochasuru a .txt .meta .date_category {
        position: relative;
        top: 0;
        left: 0;
        margin: 0
    }

    .timeline article.ochasuru a .txt .meta .tag {
        margin-top: 1vw
    }
}

.timeline article.scl_on {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

@media screen and (max-width: 767px) {
    .timeline article {
        width:93vw;
        margin-left: 7vw;
        margin-bottom: 10vw
    }

    .timeline article a .txt {
        padding: 4vw 4vw 0 0
    }

    .timeline article:nth-child(even) {
        margin-left: 0;
        margin-right: 7vw
    }

    .timeline article.item_archive:nth-child(even) {
        margin-left: 0;
        margin-right: 0;
    }

    .timeline article:nth-child(even) a .txt {
        padding: 4vw 0 0 4vw
    }

    .timeline article:nth-child(even) a .txt .meta .date_category {
        left: 4vw
    }
}

.timeline article a figure {
    width: 100%;
    position: relative
}

.timeline article a figure img {
    width: 100%;
    max-width: inherit;
	aspect-ratio: 5 / 3;
    object-fit: cover;
}

.timeline article.menu_archive figure img {
    width: 100%;
    max-width: inherit;
	aspect-ratio: 5 / 3;
    object-fit: cover;
}

.timeline article.item_archive figure img {
    width: 100%;
    max-width: inherit;
	aspect-ratio: 4 / 3;
    object-fit: cover;
}

.timeline article.brand_archive figure img {
    width: 100%;
    max-width: inherit;
	aspect-ratio: 4 / 4;
    object-fit: cover;
}

.popular_articles figure img {
    width: 100%;
    max-width: inherit;
	aspect-ratio: 4 / 3;
    object-fit: cover;
}

.popular_articles2 figure img {
    width: 100%;
    max-width: inherit;
	aspect-ratio: 4 / 3;
    object-fit: cover;
}

.picup_item_side figure img {
    width: 100%;
    max-width: inherit;
	aspect-ratio: 4 / 3;
    object-fit: cover;
}

@media screen and (min-width: 1080px) {
    .timeline article a figure::before {
        color:#FFF;
        content: "";
        display: block;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.08em;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 2;
		background:center / contain no-repeat url('../img/top/kuma_read2.png');
        -moz-transform: translate(0, 10px);
        -ms-transform: translate(0, 10px);
        -webkit-transform: translate(0, 10px);
        transform: translate(0, 10px);
        -moz-transition: all .8s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all .8s cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transition: all .8s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all .8s cubic-bezier(0.165, 0.84, 0.44, 1)
    }
	
	
    .timeline article a .pick1::before {
		background:center / contain no-repeat url('../img/top/kuma_read2.png');
    }
	
    .timeline article a .pick2::before {
		background:center / contain no-repeat url('../img/top/kuma_read3.png');
    }

    .timeline article a .pick3::before {
		background:center / contain no-repeat url('../img/top/kuma_read6.png');
    }
	
    .timeline article a .pick4::before {
		background:center / contain no-repeat url('../img/top/kuma_read7.png');
    }
	
    .timeline article a .news1::before {
		background:center / contain no-repeat url('../img/top/kuma_read4.png');
    }
	
    .timeline article a .news2::before {
		background:center / contain no-repeat url('../img/top/kuma_read5.png');
    }
	
    .timeline article a .news3::before {
		background:center / contain no-repeat url('../img/top/kuma_read8.png');
    }
	
    .timeline article a .news4::before {
		background:center / contain no-repeat url('../img/top/kuma_read9.png');
    }
	
    .timeline article a .news5::before {
		background:center / contain no-repeat url('../img/top/kuma_read10.png');
    }

    .timeline article a .news6::before {
		background:center / contain no-repeat url('../img/top/kuma_read11.png');
    }
	
	
	
    .timeline article a .archive1::before {
		background:center / contain no-repeat url('../img/top/kuma_read2.png');
    }
	
    .timeline article a .archive2::before {
		background:center / contain no-repeat url('../img/top/kuma_read3.png');
    }

    .timeline article a .archive3::before {
		background:center / contain no-repeat url('../img/top/kuma_read6.png');
    }
	
    .timeline article a .archive4::before {
		background:center / contain no-repeat url('../img/top/kuma_read7.png');
    }
	
    .timeline article a .archive5::before {
		background:center / contain no-repeat url('../img/top/kuma_read4.png');
    }
	
    .timeline article a .archive6::before {
		background:center / contain no-repeat url('../img/top/kuma_read5.png');
    }
	
    .timeline article a .archive7::before {
		background:center / contain no-repeat url('../img/top/kuma_read8.png');
    }
	
    .timeline article a .archive8::before {
		background:center / contain no-repeat url('../img/top/kuma_read9.png');
    }
	
    .timeline article a .archive9::before {
		background:center / contain no-repeat url('../img/top/kuma_read10.png');
    }

    .timeline article a .archive10::before {
		background:center / contain no-repeat url('../img/top/kuma_read11.png');
    }
	
	
	
	
    .timeline article a figure.item_pic_two::after {
        background-color: #ccc!important;
    }
	
    .timeline article a figure::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        background-color: #667f9b;
        z-index: 1;
        mix-blend-mode: multiply;
        -moz-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1)
    }

    .timeline article a:hover figure::before {
        opacity: 1;
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
	
	  .timeline article a:hover figure.item_pic_two::before {
        opacity: 0;
    }


    .timeline article a:hover figure::after {
        opacity: 0.8
    }

    .timeline article a:hover .txt h2,.timeline article a:hover .txt h3,.timeline article a:hover .txt .meta,.timeline article a:hover .txt .lead {
        color: #667f9b;
    }
}

.timeline article a .txt {
    width: 100%;
    position: relative;
    text-align: left
}

@media screen and (min-width: 767px) {
    .timeline article a .txt {
        padding-top:15px
    }
}

.timeline article a .txt h2 {
    color: #000;
    font-size: 20px;
    font-size: clamp(18px, 20px, 1.4vw);
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.7;
    -moz-transition: color .8s ease;
    -o-transition: color .8s ease;
    -webkit-transition: color .8s ease;
    transition: color .8s ease
}

@media screen and (max-width: 767px) {
    .timeline article a .txt h2 {
        width:100%;
        font-size: 4.2vw;
        line-height: 1.6
    }
}

.timeline article a .txt h3 span{
    color: #535657;
	text-align: left;
    font-size: 16px;
    font-size: clamp(14px,17px,1.2vw);
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.7;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
      transition: all 0.8s ease;
}

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

.yellow_line {
  display: inline;
  background-image: linear-gradient(90deg, #fcf69f, #fcf69f); 
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 40%;
  cursor: pointer;
}

.yellow_line:hover {
  background-size: 100% 40%; 
}

.timeline article:hover a .txt .yellow_line {
    background-size: 100% 40%; 
  }


}


.timeline article a .txt h3{
	text-align: center;
	transition: 0.4s ease-in-out;
	display: flex;
	position: relative;
	line-height: 1;
}



.timeline article a .txt h3 span{
	transition: 0.4s ease-in-out;
}



.timeline article a .txt h3:before {
    margin-right: 17px;
	content: '';
	display: block;
	position: relative;
	left: 0;
	top: 8.65px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fcf69f;
}
.timeline article a .txt h3.news_title1:before {
    margin-right: 17px;
	content: '';
	display: block;
	position: relative;
	left: 0;
	top: 4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fcf69f;
}

.timeline article a .txt h3.archive_head:before {
    margin-right: 17px;
	content: '';
	display: block;
	position: relative;
	left: 0;
	top: 4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fcf69f;
}

.timeline article a .txt h3.worktitle:before {
        top: 3.7px!important;
}

.timeline article a .txt h3.menutitle:before {
        top: 3.7px!important;
}

.timeline article a .txt h3.menutitle_en {
        font-size: 1em;
}

.timeline article a .txt .menu_price {
        font-size: 1em;
}

.timeline article a .txt .menu_intro {
        font-size: 1em;
}

.timeline article a .txt .menu_material {
        font-size: 1em;
}

.timeline article a .menu_kind{
        font-size: 1em;
}

.timeline article a .menu_popup{
        font-size: 1em;
}


@media screen and (min-width: 767px) {
	
.timeline article:hover a .txt h3:before{
    animation: linkanime 1.2s ease-in-out;
}
}

@keyframes linkanime {
    0%   { left: 0; }
    25%   { left: 10px; }
    50%   { left: 0; }
    75%   { left: 10px; }
}

@keyframes linkanime2 {
    0%   { left: 0; }
    25%   { left: 7px; }
    50%   { left: 0; }
    75%   { left: 7px; }
}



.en .timeline article a .txt h3 {
    letter-spacing: 0.02em
}

@media screen and (max-width: 767px) {
    .timeline article a .txt h3 {
        width:100%;
        font-size: 3.5vw;
        letter-spacing: 0.03em;
        line-height: 1.6
    }
}

.timeline article a .txt .lead {
    color: #777;
    font-size: 13px;
    letter-spacing: 0.05em;
    line-height: 1.8;
    margin: 10px 0 0;
    text-align: justify;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

.en .timeline article a .txt .lead {
    text-align: left
}

@media screen and (max-width: 767px) {
    .timeline article a .txt .lead {
        font-size:3vw
    }
}

.timeline article a .txt .meta {
    color: #999;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin: 10px 0 0;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (max-width: 767px) {
    .timeline article a .txt .meta {
        width:100%;
        font-size: 10px;
        margin: 3px 0 0;
        text-align: left;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap
    }
}

.timeline article a .txt .meta .date_category {
    line-height: 1;
    margin: 0 0 5px
}

@media screen and (max-width: 767px) {
    .timeline article a .txt .meta .date_category {
        margin:5px 0 0
    }
}

.timeline article a .txt .meta .date_category span {
    display: inline-block;
    margin-right: 6px
}

@media screen and (max-width: 767px) {
    .timeline article a .txt .meta .date_category {
        margin-right:10px
    }

    .timeline article a .txt .meta .date_category span {
        margin-right: 6px
    }
}

.timeline article a .txt .meta .tag {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center
}

@media screen and (min-width: 767px) {
    .timeline article a .txt .meta .tag {
        width:100%
    }
}

@media screen and (max-width: 767px) {
    .timeline article a .txt .meta .tag {
        line-height:1;
        justify-content: flex-start;
        margin-top: 5px
    }
}

.timeline article a .txt .meta .tag li {
    display: inline-block;
    line-height: 1.7
}

@media screen and (min-width: 767px) {
    .timeline article a .txt .meta .tag li {
        margin-right:6px
    }
}

@media screen and (max-width: 767px) {
    .timeline article a .txt .meta .tag li {
        line-height:1;
        margin-right: 6px
    }
}

.tax_meta_info {
    font-weight: 600;
    opacity: 0;
    position: relative;
    z-index: 2;
    text-align: left;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

@media screen and (min-width: 767px) {
    .tax_meta_info {
        padding-top:180px;
        padding-bottom: 70px
    }
	.tax_meta_info.work_tp{
		padding-top: 0px!important;
	}
    .tax_meta_info.item_tp{
		padding-top: 0px!important;
        padding-bottom: 0px!important
    }
}

@media screen and (max-width: 767px) {
    .tax_meta_info {
        padding-top:130px;
        padding-bottom: 40px
    }
	
    .tax_meta_info.item_tp1 {
        padding-top:0px!important;
        padding-bottom: 0px!important
    }
    .tax_meta_info.item_tp2 {
        padding-top:20px!important;
        padding-bottom: 0px
    }
}

.load .tax_meta_info {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.load .tax_meta_info .tax_meta_info_wrap .count,.load .tax_meta_info .tax_meta_info_wrap .tag_list {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.load .tax_meta_info .tax_meta_info_wrap .count .articles1{
    font-family: BrownNow,Tipique_Regular,YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"游ゴシック Medium","Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
    font-weight: 400;
    font-size: 50px;
    letter-spacing: 0.08em;
	position: relative;
    top: 10px;
}


.load .tax_meta_info .tax_meta_info_wrap .count .articles2{
    font-family: BrownNow,Tipique_Regular,YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"游ゴシック Medium","Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
    font-weight: 600;
    font-size: 30px;
    letter-spacing: 0.08em;
	position: relative;
    top:10px;
}

.tax_meta_info .tax_meta_info_wrap {
    width: 100%;
    flex-wrap: wrap;
    display: flex;
    align-items: center
}

@media screen and (min-width: 767px) {
    .tax_meta_info .tax_meta_info_wrap {
        justify-content: space-between
    }
    .tax_meta_info .tax_meta_info_wrap.item_wrap {
        justify-content: flex-end;
    }
}

@media screen and (max-width: 767px) {
    .tax_meta_info .tax_meta_info_wrap {
        padding:0px 7vw;
        justify-content: center
    }

    .shop_wrap .tax_meta_info .tax_meta_info_wrap {
        padding: 0
    }
}

.tax_meta_info .tax_meta_info_wrap .title_wrap {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap
}

.tax_meta_info .tax_meta_info_wrap h1 {
    display: inline-block;
    font-size: 30px;
    letter-spacing: 0.12em;
    line-height: 1;
	color: #535657;
}

@media screen and (max-width: 767px) {
    .tax_meta_info .tax_meta_info_wrap h1 {
        font-size:5vw;
        margin: 5px
    }
}

.tax_meta_info .tax_meta_info_wrap .count {
	color: #535657;
    display: inline-block;
    font-size: 24px;
    letter-spacing: 0.08em;
    line-height: 1;
    margin: 0 0 0 26px;
    opacity: 0;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all .5s ease .2s;
    -o-transition: all .5s ease .2s;
    -webkit-transition: all .5s ease;
    -webkit-transition-delay: .2s;
    transition: all .5s ease .2s
}

.tax_meta_info .tax_meta_info_wrap .count span {
    font-size: 36px;
    padding-right: 8px
}

@media screen and (max-width: 767px) {
    .tax_meta_info .tax_meta_info_wrap .count {
        font-size:4vw;
        margin: 5px
    }

    .tax_meta_info .tax_meta_info_wrap .count span {
        font-size: 5vw;
        padding-right: 0.7vw
    }
}

.tax_meta_info .term_description {
    color: #666;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 2;
    margin: 20px 0 0
}

@media screen and (max-width: 767px) {
    .tax_meta_info .term_description {
        font-size:12px;
        margin: 10px 0 0
    }
}

.tax_meta_info .wp-pagenavi {
    width: 100%;
    margin-top: 50px
}

@media screen and (max-width: 767px) {
    .tax_meta_info .wp-pagenavi {
        margin-top:0
    }
}

#category_filter {
    width: 160px;
    position: relative;
}

@media screen and (max-width: 767px) {
    #category_filter {
        width:100%;
        margin: 15px auto 15px
    }
}

#category_filter .category_filter_nav {
    width: 160px;
	padding-top: 18px;
}

@media screen and (max-width: 767px) {
    #category_filter .category_filter_nav {
        margin:0 auto
    }
}

#category_filter .category_filter_nav li {
    width: 160px;
    height: 40px;
    color: #535657;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 40px;
    text-align: center;
    background-color: #f9f9f6;
    cursor: pointer;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    border-radius: 20px
}

#category_filter .category_filter_nav li a,#category_filter .category_filter_nav li span {
    color: #535657;
    width: 160px;
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 30px 0 10px;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    position: relative
}

#category_filter .category_filter_nav li span::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    top: 15px;
    right: 20px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    transform: rotate(135deg) scale(1, 1);
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

#category_filter .category_filter_nav li.active span {
    color: #6184ab
}

#category_filter .category_filter_nav li.active span::after {
    border-color: #6184ab;
    top: 18px;
    transform: rotate(135deg) scale(-1, -1)
}

@media screen and (min-width: 1080px) {
    #category_filter .category_filter_nav li:hover a,#category_filter .category_filter_nav li:hover span {
        color:#6184ab
    }

    #category_filter .category_filter_nav li:hover a::after,#category_filter .category_filter_nav li:hover span::after {
        border-color: #6184ab
    }
}

#category_filter #article-category_list {
    width: 400px;
    position: absolute;
    top: 70px;
    right: 0;
    z-index: 11;
    background-image: url(../img/top/white_base1.png);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.03);
    border-radius: 15px;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    transform: translate(0, -10px);
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (max-width: 767px) {
    #category_filter #article-category_list {
        width:calc( 100vw - 14vw );
		    right: -4.5vw;
    }
}

@media screen and (max-width: 767px) {
    #category_filter #article-category_list {
        padding:15px
    }
}

#category_filter #article-category_list.active {
    opacity: 1;
    pointer-events: auto;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

#category_filter #article-category_list ul {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap
}

#category_filter #article-category_list ul li {
    display: inline-block;
    margin: 5px
}

#category_filter #article-category_list ul li a {
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 26px;
    padding: 0 10px;
    background-color: rgba(102,127,155,0.8);
    border-radius: 15px;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 1080px) {
    #category_filter #article-category_list ul li a:hover {
        color:#6184ab
    }
}

@media screen and (max-width: 767px) {
    #category_filter #article-category_list ul li a {
        font-size:11px
    }
}


.contents_under_link{
	text-align: center;
}

.schedule_link{
	text-align: center;
	max-width: 600px;
		 margin:0 auto;
}
.schedule_link h2{
	color: #535657;
	font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.7;
    margin-top: 120px;
    margin-bottom: 35px;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

.schedule_calendar{
padding-top: 100px;
}

.button-contact a {
  font-family: YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic";
    font-size: 14px;
    letter-spacing: 0.1em;
    color: #535657;
    font-weight: 600;
    outline: 1px solid #535657;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    max-width: 500px;
    text-align: center;
    padding: 16px 20px;
    margin: 80px auto 40px;
    margin-inline: auto;
    text-decoration: none;
    cursor: pointer;
    z-index: 999;
    transition: all 0.3s;
}

.button-contact a::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 100%;
  height: 100%;
  background: rgba(255,250,116,0.6);
  z-index:-999;
  transition: all 0.3s ease;
}

.button-contact a:hover::before {
  top: 0;
  left: 0;
  transition: all 0.3s;
}


.button-contact a:hover {
  color: #667f9b;
  outline: 1px solid #667f9b;
}





ul.wp-block-list{
  counter-reset:list;
  list-style-type:none;
  padding:0;
  display: inline-block!important;
}



ul.wp-block-list li{
    list-style: none !important;
    position: relative;
    padding: 10px 0 9px 43px;
    margin: 7px 0 9px 0px !important;
    font-weight: 600;
    font-size: 15px !important;
    line-height: 32px !important;
    border-bottom: dashed 1px #6184ab;
    letter-spacing: 1.6px;
}
ul.wp-block-list li:before{
   counter-increment: list;
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    height: 23px;
    width: 23px;
    border-radius: 50%;
    background: #fffa74;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
ul.wp-block-list li:after{
    content: "";
    display: block;
    position: absolute;
    left: 8.5px;
    height: 0;
    width: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid #6184ab;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}






ol.wp-block-list{
  list-style: none; /* デフォルトの数字を非表示に */
  counter-reset: li;
  display: inline-block!important;
}



ol.wp-block-list li{
    list-style: none !important;
    position: relative;
    padding: 10px 0 9px 43px!important;
    margin: 7px 0 9px 0px !important;
    font-weight: 600;
    font-size: 15px !important;
    line-height: 32px !important;
    border-bottom: dashed 1px #6184ab;
    letter-spacing: 1.6px;
}
ol.wp-block-list li:before{
    counter-increment: li;
    content: counter(li);
    position: absolute;
    left: 0;
    top: 15px;
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #fffa74;
    font-size: 14px;
    color: #6184ab;
    font-weight: 600;
    line-height: 21px;
    text-align: center;
    padding-left: 1.6px;
    padding-top: 1.2px;
}




.wp-block-button a {
  font-family: YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic";
font-size: 14px;
    letter-spacing: 0.1em;
    color: #535657!important;
    font-weight: 600;
    outline: 1px solid #535657;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    max-width: 500px;
    text-align: center;
    padding: 16px 56px;
    margin: 80px auto 40px;
    margin-inline: auto;
    text-decoration: none;
    cursor: pointer;
    z-index: 999;
    transition: all 0.3s!important;
    background-color: transparent;
    border-radius: 0px;
}

.wp-block-button a::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 100%;
  height: 100%;
  background: rgba(255,250,116,0.6);
  z-index:-999;
  transition: all 0.3s ease;
}

.wp-block-button a:hover::before {
  top: 0;
  left: 0;
  transition: all 0.3s;
}


.wp-block-button a:hover {
  color: #667f9b!important;
  outline: 1px solid #667f9b!important;
}







.button-link a {
  font-family: YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic";
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #414242;
  font-weight: 600;
  display: block;
  position: relative;
  box-sizing: border-box;
  max-width: 180px;
  text-align: center; 
  padding: 4px 16px 4px 0;
  margin: 40px auto 80px;
  margin-inline: auto;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.5s;
}

.button-link a::before {
  content: "";
  display: block;
  position: absolute;
  width: 195px;
  height: 1px;
  background: #414242;
  bottom: 0;
  right: -6px;
  transition: all 0.5s;
}

.button-link a::after {
  content: "";
  display: block;
  position: absolute;
  width: 30px;
  height: 1px;
  background: #414242;;
    rotate: 53deg;
    right: -12px;
    bottom: 11.6px;
    transition: all 0.5s;
}

.button-link a:hover::after,
.button-link a:hover::before {
  translate: 9px 0;
  transition: all 0.5s;
  background: #667f9b;
}
.button-link a:hover{
  color: #667f9b;
  translate: 13px 0;
  transition: all 0.5s;
}

.f_btn2{ margin:15px 0 0px!important;}

.f_btn {
    color: #535657!important;
	font-family: BrownNow,Tipique_Regular,YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
    display: inline-block;
    font-weight: 600;
    font-size: 40px;
    letter-spacing: 0.12em;
    line-height: 1.7;
    text-align: center;
    margin: 50px 0;
    position: relative;
    opacity: 0;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.con_btn {
	font-family: YakuHanJP,Jost,Roboto,YuGothic,"Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","Meiryo",sans-serif!important;
    font-size: 25px!important;
}

@media screen and (max-width: 767px) {
    .f_btn {
        font-size:6.7vw;
        margin: 10vw 0 0
    }
}

.f_btn.small {
    font-size: 20px
}

@media screen and (max-width: 767px) {
    .f_btn.small {
        font-size:4vw
    }
}

.f_btn.small::after {
    bottom: -1px
}

.f_btn::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background-color: #535657;
    position: absolute;
    left: 0;
    bottom: 0;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.f_btn.scl_on {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

@media screen and (min-width: 1080px) {
    .f_btn:hover {
        color:#6184ab!important;
    }

    .f_btn:hover::after {
        background-color: #6184ab
    }
}

.entry .entry_wrap .content_schedule h2 {
    margin-top: 17px!important;
}
.schedule-info{
  border-radius: 10px 50px/50px 10px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color:#535657;;
  margin-right: 17px;
  margin-bottom: 15px;
}

.schedule-border-shadow {
  padding: calc(1rem - 12px) 1.5rem 1rem;
}

.schedule-border-shadow:before {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 100%;
  height: 100%;

  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: dashed 1px #6184ab;
  border-radius: 0.5rem;
}

.schedule-border-shadow:hover {
  padding: calc(1rem - 3px) 1.5rem;
}

.schedule-border-shadow:hover:before {
  top: 0;
  left: 0;
}

.schedule-border-shadow--color {
  border-radius: 0;
  background: rgba(255,250,116,0.6);
}

.schedule-border-shadow--color:before {
  border-radius: 0;
}

.schedule-info{
  border-radius: 10px 50px/50px 10px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color:#535657;;
  margin-right: 17px;
  margin-bottom: 15px;
}

.schedule-border-shadow {
  padding: calc(1rem - 12px) 1.5rem 1rem;
}

.schedule-border-shadow:before {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 100%;
  height: 100%;

  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: dashed 1px #6184ab;
  border-radius: 0.5rem;
}

.schedule-border-shadow:hover {
  padding: calc(1rem - 3px) 1.5rem;
}

.schedule-border-shadow:hover:before {
  top: 0;
  left: 0;
}

.schedule-border-shadow--color {
  border-radius: 0;
  background: rgba(255,250,116,0.6);
}

.schedule-border-shadow--color:before {
  border-radius: 0;
}




.schedule-info2{
    border-radius: 10px 50px / 50px 10px;
    font-size: 0.7rem !important;
    font-weight: 600;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    padding: 1rem 4rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    color: #535657;
    margin-right: 14px;
}

.schedule-border-shadow2 {
    padding: calc(0.5rem - 6px) 0.8rem 0.6rem
}

.schedule-border-shadow2:before {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 100%;
    height: 100%;
    content: "";
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border: dashed 1px #6184ab;
    border-radius: 0.5rem;
}

.schedule-border-shadow--color2 {
  border-radius: 0;
  background: rgba(255,250,116,0.6);
}

.schedule-border-shadow--color2:before {
  border-radius: 0;
}

.xo-event-list .date2 {
    font-size: 1.3rem!important;
}

.p_event{
    font-size: 16px !important;
    margin: 10px 0 0 0 !important;
    width: 100% !important;
    line-height: 1.45 !important;
}

.p_deteal{
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 !important;
    font-size: 0.9rem !important;
}

.event_br{
    display: block;
    line-height: 0.5;
}

@media screen and (max-width: 767px) {
	
.xo-event-list .date2 {
    font-size: 1rem!important;
}
	.date-1{
    line-height: 1;
	}
	.title-sc{
	font-size: 1.2rem !important;
}

.event-title-s {
	margin-bottom: 5px!important;
}

.p_event{
    font-size: 1rem !important;
    margin: 10px 0 0 0 !important;
    width: 100% !important;
    line-height: 1.25 !important;

}

.p_deteal {
    overflow: visible;
    margin: 6px 0 0 0 !important;
}

}

.xo-event-list .date3 {
    font-size: 0.85rem!important;
}


.date-1 {
    line-height: 1.4;
    padding-top: 8px;
}

.event-title-s {
    font-size: 1.4rem !important;
    margin-top: 10px!important;
	margin-bottom: 0px!important;
    line-height: 1.37;
}


.cate-s {
    position: relative;
    display: inline-block;
    font-size: .8rem !important;
    justify-content: center;
    align-items: center;
    margin: 0 auto 0;
    padding: 0px 7px 0px;
    color: #535657!important;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    border-left: solid 3px #fffa74;
    bottom: 1.2px;
    background: #eee;
    z-index: 0;
}

.title-sc{
	margin-right: 19px!important;
	font-size: 1.4rem!important;}

.cate-s:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    display: block;
    background: #fffa74;
    transition: .3s;
    left:0;
}
.cate-s:hover {
    color: #535657!important;
}
.cate-s:hover:before {
    width: 100%;
    z-index: -1;
}



.e-right{
    width: calc(100% -18vw)!important;
	max-width: 588px;
	padding-top: 12px;
}

.xo-event-list .thumbnail {
    margin: .2rem 14px 0 0!important;
}

.xo-event-list > dl {
    padding: 2.2rem 0!important;
    border-bottom: dotted 1px #6184ab!important;
}

.xo-event-list .thumbnail img {
    max-height: 220px!important;
}
	
@media screen and (max-width: 1228px) {
.xo-event-list .thumbnail img {
    aspect-ratio: 4.8 / 5!important;
}
}

@media screen and (max-width: 1000px) {
.xo-event-list .thumbnail img {
    aspect-ratio: 4.5 / 5!important;
}
}

@media screen and (max-width: 767px) {
.xo-event-list {
    padding-top: 60px;
}
}
	
.event-sc{
    width: 65vw!important;
    max-width: 1000px!important;
}


.marker-y{
background: linear-gradient(transparent 40%, rgba(255,250,116,0.9) 90%);
}

.marker-y2{
background: linear-gradient(transparent 60%, rgba(255,250,116,0.8) 60%);
display: inline-block;
}

.wp-pagenavi {
    width: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

@media screen and (max-width: 767px) {
    .wp-pagenavi {
        margin-top:20vw;
        justify-content: center
    }
}

.wp-pagenavi a,.wp-pagenavi span {
    width: auto;
    min-width: 40px;
    height: 40px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.12em;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5px;
    margin-right: 0;
    z-index: 2;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (max-width: 767px) {
    .wp-pagenavi a,.wp-pagenavi span {
        font-size:3.5vw;
        height: 30px
    }
}

.wp-pagenavi a.current,.wp-pagenavi span.current {
    color: #000;
    border-bottom: 2px solid #000
}

.wp-pagenavi a.first,.wp-pagenavi span.first {
    order: 1;
    display: none
}

.wp-pagenavi a.previouspostslink,.wp-pagenavi span.previouspostslink {
    order: 10;
    margin-right: 20px
}

@media screen and (max-width: 767px) {
    .wp-pagenavi a.previouspostslink,.wp-pagenavi span.previouspostslink {
        margin-right:10px
    }
}

.wp-pagenavi a.pages,.wp-pagenavi span.pages {
    order: 50;
    border-bottom: none
}

.wp-pagenavi a.nextpostslink,.wp-pagenavi span.nextpostslink {
    order: 90;
    margin-left: 20px
}

@media screen and (max-width: 767px) {
    .wp-pagenavi a.nextpostslink,.wp-pagenavi span.nextpostslink {
        margin-left:10px
    }
}

.wp-pagenavi a.last,.wp-pagenavi span.last {
    order: 100;
    display: none
}

.wp-pagenavi a.page,.wp-pagenavi a.current,.wp-pagenavi span.page,.wp-pagenavi span.current {
    display: none
}

.wp-pagenavi a {
    color: #535657;
    border-bottom: 2px solid #535657;
	font-family: BrownNow,Tipique_Regular,YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"游ゴシック Medium","Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
    font-weight: 400;
    font-size: 30px;
}

.wp-pagenavi a:hover {
    color: #6184ab;
    border-color: #6184ab;
}

.wp-pagenavi span {
    color: #535657;
    border-bottom: 2px solid #535657;
	font-family: BrownNow,Tipique_Regular,YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"游ゴシック Medium","Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
    font-weight: 400;
    font-size: 30px;
}

.wp-pagenavi span.extend {
    color: #DDD;
    border-bottom: 2px solid transparent
}

section#about {
    display: flex;
    justify-content: center;
    align-items: center
}

section#about .about_wrap {
    max-width: 800px;
    padding: 220px 50px 150px;
    position: relative
}

@media screen and (max-width: 767px) {
    section#about .about_wrap {
        padding:10vw 4.5vw 20vw
    }
}

section#about .about_wrap h1 {
    font-size: 52px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    text-align: center;
    margin: 0 0 70px;
    opacity: 0;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all 1s ease 1s;
    -o-transition: all 1s ease 1s;
    -webkit-transition: all 1s ease;
    -webkit-transition-delay: 1s;
    transition: all 1s ease 1s
}

section#about .about_wrap h1 span {
    font-size: 45px
}

@media screen and (max-width: 767px) {
    section#about .about_wrap h1 {
        width:100%;
        font-size: 7.5vw;
        text-align: center;
        margin-bottom: 12vw
    }

    section#about .about_wrap h1 span {
        font-size: 7vw
    }
}

section#about .about_wrap p {
    font-family: YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro"","Meiryo",sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 2.2;
    text-align: left;
    margin-top: 25px;
    margin-bottom: 25px;
    text-align: center;
    opacity: 0;
    position: relative;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all 1s ease 1.5s;
    -o-transition: all 1s ease 1.5s;
    -webkit-transition: all 1s ease;
    -webkit-transition-delay: 1.5s;
    transition: all 1s ease 1.5s
}

@media screen and (min-width: 767px) {
    .en section#about .about_wrap p {
        font-weight:400;
        letter-spacing: 0.02em
    }
}

@media screen and (max-width: 1080px) {
    section#about .about_wrap p {
        font-size:14px;
        min-height: 14px
    }
}

@media screen and (max-width: 767px) {
    section#about .about_wrap p {
        font-size:3.25vw;
        font-weight: 500;
        letter-spacing: normal;
        min-height: 3.35vw;
        margin-top: 4vw;
        margin-bottom: 4vw
    }

    .en section#about .about_wrap p {
        font-weight: 400
    }
}

.load section#about .about_wrap h1,.load section#about .about_wrap p {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

#notfonud {
    display: flex;
    justify-content: center;
    align-items: center
}

#notfonud .notfonud_wrap {
    max-width: 800px;
    padding: 150px 50px 150px
}

@media screen and (max-width: 767px) {
    #notfonud .notfonud_wrap {
        padding:10vw 4.5vw 20vw
    }
}

#notfonud .notfonud_wrap h1 {
    font-size: 52px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
    text-align: center;
    margin: 0 0 30px;
    opacity: 0;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all 1s ease 1s;
    -o-transition: all 1s ease 1s;
    -webkit-transition: all 1s ease;
    -webkit-transition-delay: 1s;
    transition: all 1s ease 1s
}

@media screen and (max-width: 767px) {
    #notfonud .notfonud_wrap h1 {
        width:100%;
        font-size: 7.5vw;
        margin-bottom: 6vw
    }
}

#notfonud .notfonud_wrap h2 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    text-align: center;
    margin: 0 0 50px;
    opacity: 0;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all 1s ease 1s;
    -o-transition: all 1s ease 1s;
    -webkit-transition: all 1s ease;
    -webkit-transition-delay: 1s;
    transition: all 1s ease 1s
}

@media screen and (max-width: 767px) {
    #notfonud .notfonud_wrap h2 {
        width:100%;
        font-size: 4vw;
        margin-bottom: 7vw
    }
}

#notfonud .notfonud_wrap p {
    font-family: YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro"","Meiryo",sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 2.2;
    text-align: center;
    margin-top: 25px;
    opacity: 0;
    position: relative;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all 1s ease 1.5s;
    -o-transition: all 1s ease 1.5s;
    -webkit-transition: all 1s ease;
    -webkit-transition-delay: 1.5s;
    transition: all 1s ease 1.5s
}

@media screen and (min-width: 767px) {
    #notfonud .notfonud_wrap p {
        left:10px
    }
}

@media screen and (max-width: 1080px) {
    #notfonud .notfonud_wrap p {
        font-size:14px;
        min-height: 14px
    }
}

@media screen and (max-width: 767px) {
    #notfonud .notfonud_wrap p {
        font-size:3.25vw;
        font-weight: 500;
        letter-spacing: normal;
        min-height: 3.35vw;
        margin-top: 4vw
    }
}

.load #notfonud .notfonud_wrap h1,.load #notfonud .notfonud_wrap h2,.load #notfonud .notfonud_wrap p {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.slick-slider {
    opacity: 0;
    -moz-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-slider.slick-initialized {
    opacity: 1
}



.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0
}

.slick-list:focus {
    outline: none
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.slick-slider .slick-track,.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.slick-track:before,.slick-track:after {
    display: table;
    content: ''
}

.slick-track:after {
    clear: both
}

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px
}

[dir='rtl'] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}

@media screen and (max-width: 767px) {
    .fancybox-slide {
        padding:10px !important
    }
}

.fancybox-enabled body {
    overflow: visible;
    height: 100%
}

.fancybox-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99993;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.fancybox-container ~ .fancybox-container {
    z-index: 99992
}

.fancybox-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #0f0f11;
    opacity: 0;
    transition-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.fancybox-container--ready .fancybox-bg {
    opacity: .87;
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1)
}

.fancybox-controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    opacity: 0;
    z-index: 99994;
    transition: opacity .2s;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    direction: ltr
}

.fancybox-show-controls .fancybox-controls {
    opacity: 1
}

.fancybox-infobar {
    display: none
}

.fancybox-show-infobar .fancybox-infobar {
    display: inline-block;
    pointer-events: all
}

.fancybox-infobar__body {
    display: inline-block;
    width: 70px;
    line-height: 44px;
    font-size: 13px;
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
    text-align: center;
    color: #ddd;
    background-color: rgba(30,30,30,0.7);
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: subpixel-antialiased
}

.fancybox-buttons {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    pointer-events: all
}

.fancybox-show-buttons .fancybox-buttons {
    display: block
}

.fancybox-slider-wrap {
    overflow: hidden;
    direction: ltr
}

.fancybox-slider,.fancybox-slider-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0;
    margin: 0;
    z-index: 99993;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent
}

.fancybox-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
    outline: none;
    white-space: normal;
    box-sizing: border-box;
    text-align: center;
    z-index: 99994;
    -webkit-overflow-scrolling: touch
}

.fancybox-slide:before {
    content: "";
    height: 100%;
    width: 0
}

.fancybox-slide:before,.fancybox-slide>* {
    display: inline-block;
    vertical-align: middle
}

.fancybox-slide>* {
    position: relative;
    padding: 24px;
    margin: 44px 0;
    border-width: 0;
    text-align: left;
    background-color: #fff;
    overflow: auto;
    box-sizing: border-box
}

.fancybox-slide--image {
    overflow: hidden
}

.fancybox-slide--image:before {
    display: none
}

.fancybox-content {
    display: inline-block;
    position: relative;
    margin: 44px auto;
    padding: 0;
    border: 0;
    width: 80%;
    height: calc(100% - 88px);
    vertical-align: middle;
    line-height: normal;
    text-align: left;
    white-space: normal;
    outline: none;
    font-size: 16px;
    font-family: Arial,sans-serif;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-overflow-scrolling: touch
}

.fancybox-iframe {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    height: 100%;
    background: #fff
}

.fancybox-slide--video .fancybox-content,.fancybox-slide--video .fancybox-iframe {
    background: transparent
}

.fancybox-placeholder {
    z-index: 99995;
    background: transparent;
    cursor: default;
    overflow: visible;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.fancybox-image,.fancybox-placeholder,.fancybox-spaceball {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    border: 0
}

.fancybox-image,.fancybox-spaceball {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    background: transparent;
    background-size: 100% 100%
}

.fancybox-controls--canzoomOut .fancybox-placeholder {
    cursor: zoom-out
}

.fancybox-controls--canzoomIn .fancybox-placeholder {
    cursor: zoom-in
}

.fancybox-controls--canGrab .fancybox-placeholder {
    cursor: -webkit-grab;
    cursor: grab
}

.fancybox-controls--isGrabbing .fancybox-placeholder {
    cursor: -webkit-grabbing;
    cursor: grabbing
}

.fancybox-spaceball {
    z-index: 1
}

.fancybox-tmp {
    position: absolute;
    top: -9999px;
    left: -9999px;
    visibility: hidden
}

.fancybox-error {
    position: absolute;
    margin: 0;
    padding: 40px;
    top: 50%;
    left: 50%;
    width: 380px;
    max-width: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: #fff;
    cursor: default
}

.fancybox-error p {
    margin: 0;
    padding: 0;
    color: #444;
    font: 16px/20px Helvetica Neue,Helvetica,Arial,sans-serif
}

.fancybox-close-small {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    outline: none;
    background: transparent;
    z-index: 10;
    cursor: pointer
}

.fancybox-close-small:after {
    content: "×";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    font: 20px/30px Arial,Helvetica Neue,Helvetica,sans-serif;
    color: #888;
    font-weight: 300;
    text-align: center;
    border-radius: 50%;
    border-width: 0;
    background: #fff;
    transition: background .2s;
    box-sizing: border-box;
    z-index: 2
}

.fancybox-close-small:focus:after {
    outline: 1px dotted #888
}

.fancybox-slide--video .fancybox-close-small {
    top: -36px;
    right: -36px;
    background: transparent
}

.fancybox-close-small:hover:after {
    color: #555;
    background: #eee
}

.fancybox-caption-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px 30px 0;
    z-index: 99998;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 20%,rgba(0,0,0,0.2) 40%,rgba(0,0,0,0.6) 80%,rgba(0,0,0,0.8));
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none
}

.fancybox-show-caption .fancybox-caption-wrap {
    opacity: 1
}

.fancybox-caption {
    padding: 30px 0;
    border-top: 1px solid rgba(255,255,255,0.4);
    font-size: 14px;
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
    color: #fff;
    line-height: 20px;
    -webkit-text-size-adjust: none
}

.fancybox-caption a,.fancybox-caption button {
    pointer-events: all
}

.fancybox-caption a {
    color: #fff;
    text-decoration: underline
}

.fancybox-button {
    display: inline-block;
    position: relative;
    width: 44px;
    height: 44px;
    line-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    background: transparent;
    color: #fff;
    box-sizing: border-box;
    vertical-align: top;
    outline: none
}

.fancybox-button--disabled {
    cursor: default;
    pointer-events: none
}

.fancybox-button,.fancybox-infobar__body {
    background: rgba(30,30,30,0.6)
}

.fancybox-button:hover {
    background: rgba(0,0,0,0.8)
}

.fancybox-button:after,.fancybox-button:before {
    content: "";
    pointer-events: none;
    position: absolute;
    border-color: #fff;
    background-color: currentColor;
    color: currentColor;
    opacity: .9;
    box-sizing: border-box;
    display: inline-block
}

.fancybox-button--disabled:after,.fancybox-button--disabled:before {
    opacity: .5
}

.fancybox-button--left:after {
    left: 20px;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.fancybox-button--left:after,.fancybox-button--right:after {
    top: 18px;
    width: 6px;
    height: 6px;
    background: transparent;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor
}

.fancybox-button--right:after {
    right: 20px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.fancybox-button--left {
    border-bottom-left-radius: 5px
}

.fancybox-button--right {
    border-bottom-right-radius: 5px
}

.fancybox-button--close {
    float: right
}

.fancybox-button--close:after,.fancybox-button--close:before {
    content: "";
    display: inline-block;
    position: absolute;
    height: 2px;
    width: 16px;
    top: calc(50% - 1px);
    left: calc(50% - 8px)
}

.fancybox-button--close:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.fancybox-button--close:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.fancybox-loading {
    border: 6px solid rgba(99,99,99,0.4);
    border-top: 6px solid rgba(255,255,255,0.6);
    border-radius: 100%;
    height: 50px;
    width: 50px;
    -webkit-animation: a .8s infinite linear;
    animation: a .8s infinite linear;
    background: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
    z-index: 99999
}

@-webkit-keyframes a {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes a {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@media (max-width: 800px) {
    .fancybox-controls {
        text-align:left
    }

    .fancybox-button--left,.fancybox-button--right,.fancybox-buttons button:not(.fancybox-button--close) {
        display: none !important
    }

    .fancybox-caption {
        padding: 20px 0;
        margin: 0
    }
}

.fancybox-button--fullscreen:before {
    width: 15px;
    height: 11px;
    left: 15px;
    top: 16px;
    border: 2px solid;
    background: none
}

.fancybox-button--play:before {
    top: 16px;
    left: 18px;
    width: 0;
    height: 0;
    border-top: 6px inset transparent;
    border-bottom: 6px inset transparent;
    border-left: 10px solid;
    border-radius: 1px;
    background: transparent
}

.fancybox-button--pause:before {
    top: 16px;
    left: 18px;
    width: 7px;
    height: 11px;
    border-style: solid;
    border-width: 0 2px;
    background: transparent
}

.fancybox-button--thumbs span {
    font-size: 23px
}

.fancybox-button--thumbs:before {
    top: 20px;
    left: 21px;
    width: 3px;
    height: 3px;
    box-shadow: 0 -4px 0,-4px -4px 0,4px -4px 0,inset 0 0 0 32px,-4px 0 0,4px 0 0,0 4px 0,-4px 4px 0,4px 4px 0
}

.fancybox-container--thumbs .fancybox-caption-wrap,.fancybox-container--thumbs .fancybox-controls,.fancybox-container--thumbs .fancybox-slider-wrap {
    right: 220px
}

.fancybox-thumbs {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 220px;
    margin: 0;
    padding: 5px 5px 0 0;
    background: #fff;
    z-index: 99993;
    word-break: normal;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box
}

.fancybox-thumbs>ul {
    list-style: none;
    position: absolute;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 0
}

.fancybox-thumbs>ul>li {
    float: left;
    overflow: hidden;
    max-width: 50%;
    padding: 0;
    margin: 0;
    width: 105px;
    height: 75px;
    position: relative;
    cursor: pointer;
    outline: none;
    border: 5px solid #fff;
    border-top-width: 0;
    border-right-width: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-sizing: border-box
}

li.fancybox-thumbs-loading {
    background: rgba(0,0,0,0.1)
}

.fancybox-thumbs>ul>li>img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.fancybox-thumbs>ul>li:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 2px;
    border: 4px solid #4ea7f9;
    z-index: 99991;
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.fancybox-thumbs>ul>li.fancybox-thumbs-active:before {
    opacity: 1
}

@media (max-width: 800px) {
    .fancybox-thumbs {
        display:none !important
    }

    .fancybox-container--thumbs .fancybox-caption-wrap,.fancybox-container--thumbs .fancybox-controls,.fancybox-container--thumbs .fancybox-slider-wrap {
        right: 0
    }
}

.single-article {
    position: relative;
}

#single_cover {
    opacity: 0;
    position: relative;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all 1s ease 1s;
    -o-transition: all 1s ease 1s;
    -webkit-transition: all 1s ease;
    -webkit-transition-delay: 1s;
    transition: all 1s ease 1s
}

@media screen and (min-width: 767px) {
    #single_cover {
        height:calc( 100vh - 150px );
        min-height: 600px;
        max-height: 700px;
        margin-bottom: 100px
    }
}

#single_cover.defalt_cover::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #666;
    z-index: 0
}

@media screen and (max-width: 767px) {
    #single_cover.defalt_cover::after {
        height:100vw
    }
}

#single_cover.cover_colours {
    height: auto;
    min-height: inherit;
    max-height: inherit;
    margin-top: 80px
}

@media screen and (max-width: 767px) {
    #single_cover.cover_colours {
        margin-bottom:10vw
    }
}

@media screen and (min-width: 767px) {
    #single_cover.audrey_tang {
        margin-top:80px
    }
}

@media screen and (max-width: 767px) {
    #single_cover.audrey_tang {
        height:auto;
        margin-bottom: 15vw;
        position: relative
    }
}

#single_cover.audrey_tang .single_cover_wrap::before,#single_cover.audrey_tang .single_cover_wrap::after {
    display: none
}

@media screen and (min-width: 767px) {
    #single_cover.audrey_tang .single_cover_wrap {
        display:flex;
        justify-content: flex-start;
        align-items: center
    }
}

@media screen and (max-width: 767px) {
    #single_cover.audrey_tang .single_cover_wrap {
        display:block;
        height: auto
    }
}

@media screen and (min-width: 767px) {
    #single_cover.audrey_tang .single_cover_wrap .cover_audrey_tang {
        width:auto;
        height: calc( 100vh - 90px );
        min-height: 650px;
        max-height: 800px;
        position: absolute;
        top: 0;
        right: 0
    }
}

@media screen and (max-width: 767px) {
    #single_cover.audrey_tang .single_cover_wrap .cover_audrey_tang {
        width:100%;
        height: auto;
        position: relative
    }
}

#single_cover.audrey_tang .single_cover_wrap .caption {
    color: #000;
    display: block;
    position: relative;
    bottom: inherit;
    left: inherit;
    background-color: transparent;
    box-shadow: none
}

@media screen and (min-width: 767px) {
    #single_cover.audrey_tang .single_cover_wrap .caption {
        padding-left:50px
    }
}

@media screen and (max-width: 767px) {
    #single_cover.audrey_tang .single_cover_wrap .caption {
        background-color:transparent;
        box-shadow: none;
        padding-top: 0
    }

    #single_cover.audrey_tang .single_cover_wrap .caption::after {
        display: none
    }
}

#single_cover.audrey_tang .single_cover_wrap .caption .meta,#single_cover.audrey_tang .single_cover_wrap .caption h1,#single_cover.audrey_tang .single_cover_wrap .caption .tag {
    color: #000;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (max-width: 767px) {
    #single_cover.audrey_tang .single_cover_wrap .caption .meta {
        margin:0 0 5px
    }
}

#single_cover.audrey_tang .single_cover_wrap .caption h1 {
    font-size: 24px
}

@media screen and (max-width: 767px) {
    #single_cover.audrey_tang .single_cover_wrap .caption h1 {
        font-size:4.5vw
    }
}

#single_cover.audrey_tang .single_cover_wrap .caption .select_lang {
    color: #999;
    font-size: 14px;
    letter-spacing: 0.1em;
    padding-top: 30px;
    margin-top: 27px;
    position: relative;
    padding-left: 3px
}

@media screen and (max-width: 767px) {
    #single_cover.audrey_tang .single_cover_wrap .caption .select_lang {
        font-size:12px;
        padding-top: 20px;
        margin-top: 20px
    }
}

#single_cover.audrey_tang .single_cover_wrap .caption .select_lang::before {
    content: "";
    display: block;
    width: 100px;
    height: 1px;
    background-color:#9db3cd;
    position: absolute;
    top: 0;
    left: 0
}

#single_cover.audrey_tang .single_cover_wrap .caption .select_lang a {
    color: #999
}

#single_cover.audrey_tang .single_cover_wrap .caption .select_lang a.cu {
    color: #000
}

#single_cover.audrey_tang .single_cover_wrap .caption .select_lang span {
    color: #AAA;
    display: inline-block;
    font-weight: 400;
    padding: 0 6px
}

.load #single_cover.audrey_tang .single_cover_wrap .caption {
    background-color: transparent;
    box-shadow: none
}

@media screen and (max-width: 767px) {
    .load #single_cover.audrey_tang .single_cover_wrap .caption {
        background-color:transparent;
        box-shadow: none
    }

    .load #single_cover.audrey_tang .single_cover_wrap .caption::after {
        display: none
    }
}

#single_cover .single_cover_wrap {
    width: 100%;
    position: relative;
    z-index: 1
}

@media screen and (min-width: 767px) {
    #single_cover .single_cover_wrap {
        height:calc( 100vh - 140px );
        min-height: 600px;
        max-height: 700px
    }
}

@media screen and (max-width: 767px) {
    #single_cover .single_cover_wrap {
        padding:0 0 8vw;
        margin: 0 0 8vw;
        border-bottom: 1px solid #9db3cd
    }

    #single_cover .single_cover_wrap.no_title {
        padding: 0;
        margin: 0 0 12vw;
        border: none
    }
}

#single_cover .single_cover_wrap.cover_colours_wrap {
    height: auto;
    min-height: inherit;
    max-height: inherit
}

@media screen and (min-width: 767px) {
    #single_cover .single_cover_wrap.cover_colours_wrap {
        display:flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center
    }

    #single_cover .single_cover_wrap.cover_colours_wrap::before,#single_cover .single_cover_wrap.cover_colours_wrap::after {
        display: none
    }
}

@media screen and (max-width: 767px) {
    #single_cover .single_cover_wrap.cover_colours_wrap {
        display:block
    }

    #single_cover .single_cover_wrap.cover_colours_wrap .sc {
        display: none !important
    }
}

#single_cover .single_cover_wrap.cover_colours_wrap .txt {
    width: 34%;
    font-weight: 600;
    text-align: left
}

@media screen and (min-width: 767px) {
    #single_cover .single_cover_wrap.cover_colours_wrap .txt {
        order:1
    }
}

@media screen and (max-width: 767px) {
    #single_cover .single_cover_wrap.cover_colours_wrap .txt {
        width:100%;
        margin-top: 30px;
        text-align: center
    }
}

#single_cover .single_cover_wrap.cover_colours_wrap .txt h2 {
    margin-bottom: 30px
}

@media screen and (max-width: 767px) {
    #single_cover .single_cover_wrap.cover_colours_wrap .txt h2 {
        width:65vw;
        margin: 0 auto 20px
    }
}

#single_cover .single_cover_wrap.cover_colours_wrap .txt h1 {
    font-size: 30px;
    letter-spacing: 0.1em
}

@media screen and (max-width: 767px) {
    #single_cover .single_cover_wrap.cover_colours_wrap .txt h1 {
        font-size:4.5vw
    }
}

#single_cover .single_cover_wrap.cover_colours_wrap .txt .job {
    font-size: 16px;
    letter-spacing: 0.05em;
    margin-top: 10px
}

@media screen and (max-width: 767px) {
    #single_cover .single_cover_wrap.cover_colours_wrap .txt .job {
        font-size:3vw;
        margin-top: 5px
    }
}

#single_cover .single_cover_wrap.cover_colours_wrap .pic_face {
    width: 60%
}

@media screen and (min-width: 767px) {
    #single_cover .single_cover_wrap.cover_colours_wrap .pic_face {
        order:1;
        order: 2
    }
}

@media screen and (max-width: 767px) {
    #single_cover .single_cover_wrap.cover_colours_wrap .pic_face {
        width:100%
    }
}

#single_cover .single_cover_wrap .article_title_logo {
    display: block;
    width: 45%;
    max-width: 340px;
    height: auto;
    opacity: 0;
    -moz-transition: opacity 1s ease 2s,-moz-transform 1s ease 2s;
    -o-transition: opacity 1s ease 2s,-o-transform 1s ease 2s;
    -webkit-transition: opacity 1s ease,-webkit-transform 1s ease;
    -webkit-transition-delay: 2s,2s;
    transition: opacity 1s ease 2s,transform 1s ease 2s;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.load #single_cover .single_cover_wrap .article_title_logo {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

#single_cover .single_cover_wrap .sc {
    display: block;
    color: #FFF;
    font-size: 10px;
    font-weight: 600;
    line-height: 10px;
    width: 60px;
    height: 10px;
    letter-spacing: 0.15em;
    position: absolute;
    bottom: 84px;
    right: 10px;
    z-index: 5;
    opacity: 0;
    transform: translateY(-10px) rotate(90deg);
    -moz-transition: all 1s ease 3s;
    -o-transition: all 1s ease 3s;
    -webkit-transition: all 1s ease;
    -webkit-transition-delay: 3s;
    transition: all 1s ease 3s
}

@media screen and (max-width: 767px) {
    #single_cover .single_cover_wrap .sc {
        font-size:10px;
        line-height: 10px;
        width: 50px;
        height: 10px;
        top: calc( 100vw - 90px );
        right: -8px
    }
}

#single_cover .single_cover_wrap .sc::before,#single_cover .single_cover_wrap .sc::after {
    content: "";
    display: block;
    width: 0;
    height: 1px;
    position: absolute;
    bottom: 5px
}

@media screen and (max-width: 767px) {
    #single_cover .single_cover_wrap .sc::before,#single_cover .single_cover_wrap .sc::after {
        bottom:4px;
        height: 0.5px
    }
}

#single_cover .single_cover_wrap .sc::before {
    background-color: #FFF;
    left: 70px;
    -moz-transition: all .3s linear 3s;
    -o-transition: all .3s linear 3s;
    -webkit-transition: all .3s linear;
    -webkit-transition-delay: 3s;
    transition: all .3s linear 3s
}

@media screen and (max-width: 767px) {
    #single_cover .single_cover_wrap .sc::before {
        left:60px
    }
}

#single_cover .single_cover_wrap .sc::after {
    background-color: #667f9b;
    left: 120px;
    -moz-transition: all .3s linear 3.3s;
    -o-transition: all .3s linear 3.3s;
    -webkit-transition: all .3s linear;
    -webkit-transition-delay: 3.3s;
    transition: all .3s linear 3.3s
}

@media screen and (max-width: 767px) {
    #single_cover .single_cover_wrap .sc::after {
        left:110px
    }
}

#single_cover .single_cover_wrap figure {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

@media screen and (max-width: 767px) {
    #single_cover .single_cover_wrap figure {
        height:100vw;
        position: relative
    }
}

#single_cover .single_cover_wrap figure::before,#single_cover .single_cover_wrap figure::after {
    content: "";
    display: block;
    width: 100%;
    height: 30%;
    position: absolute;
    left: 0;
    z-index: 2;
    opacity: 0.4;
    pointer-events: none;
    -moz-transition: opacity .4s ease;
    -o-transition: opacity .4s ease;
    -webkit-transition: opacity .4s ease;
    transition: opacity .4s ease
}

#single_cover .single_cover_wrap figure::before {
    height: 300px;
    top: 0;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000),color-stop(100%, rgba(0,0,0,0)));
    background: -moz-linear-gradient(#000000,rgba(0,0,0,0));
    background: -webkit-linear-gradient(#000000,rgba(0,0,0,0));
    background: linear-gradient(#000000,rgba(0,0,0,0))
}

@media screen and (max-width: 767px) {
    #single_cover .single_cover_wrap figure::before {
        height:220px
    }
}

#single_cover .single_cover_wrap figure::after {
    height: 43%;
    bottom: 0;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0,0,0,0)),color-stop(100%, #000000));
    background: -moz-linear-gradient(rgba(0,0,0,0),#000000);
    background: -webkit-linear-gradient(rgba(0,0,0,0),#000000);
    background: linear-gradient(rgba(0,0,0,0),#000000)
}

@media screen and (max-width: 767px) {
    #single_cover .single_cover_wrap figure::after {
        height:10%
    }
}

#single_cover .single_cover_wrap .caption {
    color: #FFF;
    z-index: 5;
    font-weight: 600;
    padding: 0;
    text-align: left;
    opacity: 0;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease
}

#shop #single_cover .single_cover_wrap .caption {
    display: block
}

@media screen and (min-width: 767px) {
    #single_cover .single_cover_wrap .caption {
        position:absolute;
        width: calc( 100% - 100px );
        left: 50px;
        bottom: 28px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        flex-wrap: wrap
    }
}

@media screen and (max-width: 767px) {
    #single_cover .single_cover_wrap .caption {
        width:calc( 100vw - 20px );
        padding: 4vw 4vw 0
    }
}

#single_cover .single_cover_wrap .caption .meta,#single_cover .single_cover_wrap .caption h1,#single_cover .single_cover_wrap .caption .tag {
    color: #FFF;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (max-width: 767px) {
    #single_cover .single_cover_wrap .caption .meta,#single_cover .single_cover_wrap .caption h1,#single_cover .single_cover_wrap .caption .tag {
        color:#000
    }
}

#single_cover .single_cover_wrap .caption h1 {
    letter-spacing: 0.12em;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    -moz-font-feature-settings: "palt";
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt"
}

.en #single_cover .single_cover_wrap .caption h1 {
    letter-spacing: 0.06em
}

#shop #single_cover .single_cover_wrap .caption h1 {
    bottom: 0;
    margin: 0 0 10px
}

@media screen and (min-width: 767px) {
    #single_cover .single_cover_wrap .caption h1 {
        font-size:22px;
        margin: 0 30px 0 0;
        bottom: -3px
    }
}

@media screen and (max-width: 767px) {
    #single_cover .single_cover_wrap .caption h1 {
        font-size:4.2vw
    }
}

#single_cover .single_cover_wrap .caption .meta {
    font-size: 11px;
    letter-spacing: 0.07em;
    line-height: 1.5;
    margin: 15px 0 0;
    position: relative;
    z-index: 1;
    opacity: 0.7
}

#shop #single_cover .single_cover_wrap .caption .meta {
    margin: 0
}

@media screen and (max-width: 767px) {
    #single_cover .single_cover_wrap .caption .meta {
        width:100%;
        color: #999;
        font-size: 10px;
        margin: 5px 0 0;
        opacity: 1;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap
    }

    #single_cover .single_cover_wrap .caption .meta span.date {
        margin-right: 2vw
    }

    #shop #single_cover .single_cover_wrap .caption .meta {
        display: block
    }
}

@media screen and (max-width: 767px) {
    #single_cover .single_cover_wrap .caption .meta p {
        margin:10px 0 0 0;
        line-height: 1
    }
}

#single_cover .single_cover_wrap .caption .meta p span {
    display: inline-block
}

#single_cover .single_cover_wrap .caption .meta p span.date {
    margin-right: 10px
}

#single_cover .single_cover_wrap .caption .meta p span.category+.category::before {
    content: "+";
    display: inline-block;
    margin: 0 4px
}

#single_cover .single_cover_wrap .caption .meta p a {
    color: #FFF;
    display: inline-block;
    margin-right: 10px
}

@media screen and (max-width: 767px) {
    #single_cover .single_cover_wrap .caption .meta p a {
        color:#999;
        margin-right: 2vw
    }
}

#single_cover .single_cover_wrap .caption .meta .tag {
    max-width: 500px;
    margin: 5px 0 0;
    position: relative;
    z-index: 1
}

#single_cover .single_cover_wrap .caption .meta .tag a {
    color: #FFF;
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.05em;
    margin-right: 10px
}

@media screen and (max-width: 767px) {
    #single_cover .single_cover_wrap .caption .meta .tag {
        line-height:1;
        margin: 10px 0 0
    }

    #single_cover .single_cover_wrap .caption .meta .tag a {
        color: #999;
        font-size: 10px;
        line-height: 1;
        margin-right: 2vw
    }
}

.load #single_cover {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.load #single_cover .caption {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.load #single_cover .sc {
    opacity: 1;
    transform: translateY(0) rotate(90deg)
}

.load #single_cover .sc::before,.load #single_cover .sc::after {
    width: 50px
}

.article_info {
    width: 100%;
    height: 340px;
    font-weight: 600;
    text-align: left;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: fixed;
    left: 0;
    top: 50%;
    margin: -170px auto 0 auto;
    opacity: 0;
    -moz-transform: translate(0, 20px);
    -ms-transform: translate(0, 20px);
    -webkit-transform: translate(0, 20px);
    transform: translate(0, 20px);
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    z-index: 5;
    pointer-events: none
}

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

.article_info .w_1300>div {
    width: 25vw;
    max-width: 300px
}

.article_info.active {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.article_info.active.none,.article_info.active.none2 {
    opacity: 0;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    pointer-events: none;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.article_info.active.none .w_1300>div,.article_info.active.none2 .w_1300>div {
    pointer-events: none
}

.article_info.active .w_1300>div {
    pointer-events: auto
}

.article_info.none,.article_info.none2 {
    opacity: 0;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    pointer-events: none;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.article_info.none .w_1300>div,.article_info.none2 .w_1300>div {
    pointer-events: none
}

.article_info .meta {
    font-size: 14px;
    letter-spacing: 0.07em;
    margin: 0 0 10px
}

@media screen and (max-width: 1080px) {
    .article_info .meta {
        font-size:1.2vw
    }
}

.article_info .meta span {
    display: inline-block
}

.article_info .meta span.date {
    margin-right: 10px
}

.article_info .meta span a {
    color: #000;
    display: inline-block;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (min-width: 1080px) {
    .article_info .meta span a:hover {
        color:#6184ab
    }
}

.article_info h1 {
    font-size: 18px;
    letter-spacing: 0.06em;
    line-height: 1.6
}

@media screen and (max-width: 1080px) {
    .article_info h1 {
        font-size:1.75vw
    }
}

.article_info .tag {
    margin: 12px 0 0
}

.article_info .tag a {
    color: #000;
    display: inline-block;
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 2;
    margin-right: 10px;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (max-width: 1080px) {
    .article_info .tag a {
        font-size:1.2vw
    }
}

@media screen and (min-width: 1080px) {
    .article_info .tag a:hover {
        color:#6184ab
    }
}

.article_info .select_lang {
    color: #999;
    font-size: 12px;
    letter-spacing: 0.1em;
    padding-top: 30px;
    position: relative;
    padding-left: 3px
}

.article_info .select_lang a {
    color: #999
}

.article_info .select_lang a.cu {
    color: #000
}

.article_info .select_lang span {
    color: #AAA;
    display: inline-block;
    font-weight: 400;
    padding: 0 6px
}

.article_info .share {
    width: 100%;
    max-width: 170px;
    border-top: 1px solid #9db3cd;
    padding-top: 25px;
    margin-top: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.article_info .share::before {
    content: "SHARE";
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.07em;
    margin-right: 10px
}

@media screen and (max-width: 767px) {
    .article_info .share::before {
        font-size:1.1vw
    }
}

.article_info .share a {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center
}

.article_info .share a svg {
    width: 20px;
    fill: #000;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 1080px) {
    .article_info .share a:hover.fb svg {
        fill:#1877f2
    }

    .article_info .share a:hover.tw svg {
        fill: #1da1f2
    }

    .article_info .share a:hover.line svg {
        fill: #13b719
    }
}

.entry {
    text-align: left;
    opacity: 0;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all 1s ease 2s;
    -o-transition: all 1s ease 2s;
    -webkit-transition: all 1s ease;
    -webkit-transition-delay: 2s;
    transition: all 1s ease 2s
}

.load .entry {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.entry .entry_wrap {
    width: 70vw;
    max-width: 820px;
    font-size: 15px;
    line-height: 2.2;
    margin-left: auto;
    margin-right: auto
}

.entry .entry_wrap2 {
    max-width: 1100px!important;
}

.single-ochasuru .entry .entry_wrap {
    width: 100%
}

.article-template-single-article-photo .entry .entry_wrap {
    width: 100%;
    max-width: none
}

.article-template-single-article-colours .entry .entry_wrap {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap {
        width:100%;
        font-size: 13px
    }
}

.entry .entry_wrap .entry_content{
	color: #414242;
}

.entry .entry_wrap .entry_content h1,.entry .entry_wrap .entry_content h2,.entry .entry_wrap .entry_content h3,.entry .entry_wrap .entry_content h4,.entry .entry_wrap .entry_content h5,.entry .entry_wrap .entry_content h6,.entry .entry_wrap .entry_content p,.entry .entry_wrap .entry_content ul,.entry .entry_wrap .entry_content ol,.entry .entry_wrap .entry_content figcaption,.entry .entry_wrap .entry_content .wp-block-table {
    clear: both;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto
}

.entry .entry_wrap .entry_content h1:first-child,.entry .entry_wrap .entry_content h2:first-child,.entry .entry_wrap .entry_content h3:first-child,.entry .entry_wrap .entry_content h4:first-child,.entry .entry_wrap .entry_content h5:first-child,.entry .entry_wrap .entry_content h6:first-child,.entry .entry_wrap .entry_content p:first-child,.entry .entry_wrap .entry_content ul:first-child,.entry .entry_wrap .entry_content ol:first-child,.entry .entry_wrap .entry_content figcaption:first-child,.entry .entry_wrap .entry_content .wp-block-table:first-child {
    margin-top: 0
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content h1,.entry .entry_wrap .entry_content h2,.entry .entry_wrap .entry_content h3,.entry .entry_wrap .entry_content h4,.entry .entry_wrap .entry_content h5,.entry .entry_wrap .entry_content h6,.entry .entry_wrap .entry_content p,.entry .entry_wrap .entry_content ul,.entry .entry_wrap .entry_content ol,.entry .entry_wrap .entry_content figcaption,.entry .entry_wrap .entry_content .wp-block-table {
        width:91vw
    }
}

.entry .entry_wrap .entry_content h1.has-text-align-center,.entry .entry_wrap .entry_content h2.has-text-align-center,.entry .entry_wrap .entry_content h3.has-text-align-center,.entry .entry_wrap .entry_content h4.has-text-align-center,.entry .entry_wrap .entry_content h5.has-text-align-center,.entry .entry_wrap .entry_content h6.has-text-align-center,.entry .entry_wrap .entry_content p.has-text-align-center,.entry .entry_wrap .entry_content ul.has-text-align-center,.entry .entry_wrap .entry_content ol.has-text-align-center,.entry .entry_wrap .entry_content figcaption.has-text-align-center,.entry .entry_wrap .entry_content .wp-block-table.has-text-align-center {
    text-align: center
}

.entry .entry_wrap .entry_content h1.has-text-align-right,.entry .entry_wrap .entry_content h2.has-text-align-right,.entry .entry_wrap .entry_content h3.has-text-align-right,.entry .entry_wrap .entry_content h4.has-text-align-right,.entry .entry_wrap .entry_content h5.has-text-align-right,.entry .entry_wrap .entry_content h6.has-text-align-right,.entry .entry_wrap .entry_content p.has-text-align-right,.entry .entry_wrap .entry_content ul.has-text-align-right,.entry .entry_wrap .entry_content ol.has-text-align-right,.entry .entry_wrap .entry_content figcaption.has-text-align-right,.entry .entry_wrap .entry_content .wp-block-table.has-text-align-right {
    text-align: right
}

.entry .entry_wrap .entry_content h1.has-text-align-left,.entry .entry_wrap .entry_content h2.has-text-align-left,.entry .entry_wrap .entry_content h3.has-text-align-left,.entry .entry_wrap .entry_content h4.has-text-align-left,.entry .entry_wrap .entry_content h5.has-text-align-left,.entry .entry_wrap .entry_content h6.has-text-align-left,.entry .entry_wrap .entry_content p.has-text-align-left,.entry .entry_wrap .entry_content ul.has-text-align-left,.entry .entry_wrap .entry_content ol.has-text-align-left,.entry .entry_wrap .entry_content figcaption.has-text-align-left,.entry .entry_wrap .entry_content .wp-block-table.has-text-align-left {
    text-align: left
}

/*.entry .entry_wrap .entry_content h1 {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.7;
    margin-top: 60px;
    margin-bottom: 30px
}

.en .entry .entry_wrap .entry_content h1 {
    letter-spacing: 0.03em
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content h1 {
        font-size:4.6vw;
        margin-top: 8vw;
        margin-bottom: 4vw
    }
}*/

.entry .entry_wrap .entry_content h1 {
	color: #414242;
    font-size: 52px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    text-align: center;
    margin: 50px 0 70px;
	-moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
}


.entry .entry_wrap .entry_content h1 span {
    font-size: 45px;
	-moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

@media screen and (max-width: 767px) {
.entry .entry_wrap .entry_content h1 {
        width:100%;
        font-size: 7.5vw;
        text-align: center;
        margin-bottom: 12vw
		
    }

.entry .entry_wrap .entry_content h1 span {
        font-size: 7vw
    }
}

.entry .entry_wrap .entry_content h2 {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.7;
    margin-top: 60px;
    margin-bottom: 30px;
    text-align: center;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

.entry .entry_wrap .entry_content h2.menutitle  {
    margin-bottom: 0px;
    text-align: center;
    font-size: 3.6em!important;
}


.entry .entry_wrap .entry_content a.brandtitle {
	color: #535657!important;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (min-width: 1080px) {
    .entry .entry_wrap .entry_content a.brandtitle:hover {
        color:#6184ab!important;
    }
}

@media screen and (max-width: 767px) {
.entry .entry_wrap .entry_content h2.menutitle2 {
    margin-bottom: 0px;
    text-align: center;
    font-size: 2.1em!important;
}
}
	

.en .entry .entry_wrap .entry_content h2 {
    letter-spacing: 0.03em
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content h2 {
        font-size:4.6vw;
        margin-top: 8vw;
        margin-bottom: 4vw
    }
    .entry .entry_wrap .entry_content h2.event_title {
 text-align: center;
    }
	.schedule-information{
 text-align: center}
}

.schedule-information{
    margin-top: 100px;
    border-top: 1px solid #9db3cd;
    padding-top: 50px;
}
   

.entry .entry_wrap .entry_content h3 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.7;
    margin-top: 60px;
    margin-bottom: 30px;
	-moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

.menutitle {
    font-size: 1.08em!important;
    font-weight: 600!important;
	line-height: 1.5 !important;
	margin-bottom: 0px !important;
    margin-top: 7px !important;
	letter-spacing: 0.05em!important;
}

.itemtitle {
	margin-bottom: 35px !important;
}


.entry .entry_wrap .entry_content h2.item_title {
	    font-size: 3.9em!important;
	}

@media screen and (max-width: 620px) {
.entry .entry_wrap .entry_content h2.item_title {
	    font-size: 2.6em!important;
	}
}



@media screen and (max-width: 480px) {
.entry .entry_wrap .entry_content h2.item_title {
	    font-size: 2.2em!important;
	}
}


@media screen and (max-width: 400px) {
.entry .entry_wrap .entry_content h2.item_title {
	    font-size: 2em!important;
	}
}



@media screen and (max-width: 767px) {
.item_title {
	margin-top: 40px !important;
	}
}

.menutitle_en{
    font-size: 1em!important;
    line-height: 1.4!important;
    text-align: left!important;
    margin: 0px 0px 2px 0px!important;
	letter-spacing: 0.06em!important;
}


.menutitle_en.brand_en{
    text-align: center!important;
}

.menu_price{
	font-size: 1.4em!important;
    font-weight: 600!important;
    letter-spacing: 0.06em!important;
    line-height: 1.5!important;
    margin-top: 7px!important;
    margin-bottom: 12.5px!important;
    margin-left: 5px!important;
}

.label_popup {
position: absolute;
    top: -8px;
    left: 5px;
    z-index: 3;
}

.label_popup2 {
position: absolute;
    top: -10px;
    left: 5px;
    z-index: 3;
}


.triangle_1{
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
}

.triangle_1 svg {
    width: 100%;
    height: 100%;
    transform: rotate(180deg);
}

.label_popup_text {
    position: absolute;
    top: 2px;
    left: 5px;
    font-weight: 700;
    font-size: 12px;
    line-height: 12.5px;
    letter-spacing: 0.1em;
    color: #535657;
}


.square_1{
    display: block;
    padding: 10px;
    background-color: #fffa74;
    color: #535657;
    font-weight: 700;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0.1em;
}

@media screen and (max-width: 767px) {
	
	
.square_1 {
	font-size: 10px;
    padding: 5px 10px;
}
	
.label_popup_text1 {
    font-size: 11px;
}
	
.label_popup_text2 {
    font-size: 10px;
}

}


.imagewrap {
    position: relative;
	overflow: hidden;
	z-index: 2
}

.image_back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.image_back img {
  max-width: 100%!important;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0s cubic-bezier(0.215, 0.61, 0.355, 1), 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.image_front {
  max-width: 100%;
　-webkit-transform: translate(-50%, -50%);
　transform: translate(-50%, -50%);
　-webkit-transition: .2s ease-in-out;
　transition: .2s ease-in-out;
}
.image_front2 {
  max-width: 100%;
　-webkit-transform: translate(-50%, -50%);
　transform: translate(-50%, -50%);
　-webkit-transition: .2s ease-in-out;
　transition: .2s ease-in-out;
}
/* ----------------------- */
.imagewrap:hover .image_back img {
  opacity: 1;
  transform: scale(1.1);
}
.imagewrap:hover .image_front {
  opacity: 0;
}






.zeikomi{
	font-size: 12px !important;
    margin-left: 5px;
}

.enmark{
    margin-right: 2px!important;
	font-size: 0.9em
}
.menu_price_takeout{
	font-size: 0.85em!important;
}

.menu_intro{
	width: 100%!important;
    letter-spacing: 0.06em!important;
    line-height: 1.5!important;
    margin: 12px 0px 0px!important;

}

.menu_intro .date{
    font-size: 0.9em!important;

}

.entry_content p.menu_intro{
	width: 100%!important;

}

.menu_intro_top{
    border-top: 1px solid #9db3cd;
}

.menu_list_img{
	position: relative;
}
.menu_pop{
	font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    position: absolute;
    top: 12px;
    left: 13px;
    line-height: 1;
    letter-spacing: 1.8px;
    background-image: url(../img/top/yellow_base.png);
    padding: 6px 9px 6px 11px;
    border-radius: 8px;
    text-shadow: #667f9b 0px 0px 4px;
	z-index: 1;
}


.menu_kind{
    font-size: 1.7em;
    position: absolute;
    right: 10px;
    transform: rotate(-6deg);
    color: #fff;
    letter-spacing: 1.3px;
    text-shadow: #667f9b 0px 0px 4px;
    /* top: 0; */
    bottom: 47.5px;
    margin: auto 0;
	z-index: 1
}

.menu_kind2{
    -webkit-animation: a-main-common-kata-two 1.6s infinite normal;
    animation: a-main-common-kata-two 1.6s infinite normal;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}

.menu_kuma_yoko{
    position: absolute;
    right: -0px;
	bottom: 0px;
	z-index: 1;
}

.menu_kuma_yoko img{
	height: 55px;
    width: auto!important;
    aspect-ratio: auto !important;

}

.menu_pop {
    font-size: 0.8rem;
    padding: 4px 5px 4px 7px;
    border-radius: 5px;
}

.menu_pop{
    font-weight: 600;
    color: #fff;
    position: absolute;
    top: 12px;
    left: 13px;
    line-height: 1;
    letter-spacing: 0.9px;
    background-image: url(../img/top/yellow_base.png);
    text-shadow: #667f9b 0px 0px 4px;
	z-index: 1;
}


.munu_txt{
    width: 100%;
    flex-flow: wrap;
}

.item_txt{
    padding-right: 7px;
    padding-left: 7px;;
}

.item_txt .menutitle{
    margin-top: 0px !important;
}


.item_txt .item_name{
	margin-top: 20px;
	
}
.item_archive .item_txt .item_name ul li{
	list-style-type: none!important;
	
}
.item_archive .item_brand_name{
	margin: 20px 10px 0px 0px;
}

.item_archive .item_brand_name{
	margin: 20px 10px 0px 0px;
}

.item_archive .item_brand_name{
	font-size: 17px;
}

.item_archive .menu_price{
	 margin-left: 0px !important;
}

.page_closed{
	margin: 0!important;
}

.page_closed_word.more_link a{
    font-size: 23px!important;
	
}

.brand_txt{
    padding-right: 7px;
    padding-left: 7px;
	text-align: center
}
@media screen and (max-width: 1080px) {
.menu_kuma_yoko img{
	height: 75px;
	width: auto!important;
    aspect-ratio: auto !important;

}
.menu_kind {
    font-size: 2.4em;
    right: 18px;
    bottom: 57px;
}
	
.menu_pop {
    font-size: 1.2rem;
    padding: 6px 9px 6px 11px;
    border-radius: 8px;
}

}


@media screen and (max-width: 767px) {
.menu_kuma_yoko img{
	height: 84px;
	width: auto!important;
    aspect-ratio: auto !important;

}
.menu_kind {
    font-size: 2em;
    right: 20px;
    bottom: 71px;
}
}

@media screen and (max-width: 650px) {
.menu_kuma_yoko img{
	height: 65px;
	width: auto!important;
    aspect-ratio: auto !important;

}
.menu_kind {
    font-size: 2em;
    right: 12px;
    bottom: 53px;
}
}


@media screen and (max-width: 500px) {
.menu_kuma_yoko img{
	height: 50px;
	width: auto!important;
    aspect-ratio: auto !important;

}
.menu_kind {
    font-size: 1.7em;
    right: 8px;
    bottom: 41px;
}
	
.menu_pop {
    font-size: 0.8rem;
    padding: 4px 5px 4px 7px;
    border-radius: 5px;

}

}

@media screen and (max-width: 400px) {
.menu_kuma_yoko img{
	height: 40px;
	width: auto!important;
    aspect-ratio: auto !important;

}
	
.menu_kind {
    font-size: 1.5em;
    right: 5px;
    bottom: 30px;
}
}


.pic_dark{
	position: relative;
  display: inline-block;;
}

.pic_dark::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(102, 127, 155, 0.4);
  pointer-events: none;
}

.menu_outer {
	margin: 0.8rem auto;
	}

.menu_material_center{
text-align: left;
    display: flex
;
    margin-top: 5px;
}

.menu_material_center:before {
    margin-right: 9px;
    content: '';
    display: block;
    position: relative;
    left: 0;
    top: 7.3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fcf69f;
}

.munu_material1 {
    cursor: pointer;
    font-size: 0.9em!important;
    line-height: 1.6!important;
    margin: 0px!important;
	}

.munu_material1::before {
    content: '▼';
    display: inline-block;
    font-size: 0.8em;
    transform: rotate(-90deg);
    transition: .4s;
    margin-right: 5px;
    color: #fcf69f;
	}

.munu_material1.active::before {
	transform: rotate(0deg);
	}

.munu_material2 {
    opacity: 0;
    visibility: hidden;
    transition: .4s;
    font-size: 0.9em!important;
    line-height: 1.6!important;
	height: 0px;

	}

.munu_material2.active {
	opacity: 1;
	visibility: visible;
	height: 100%;

	}

.en .entry .entry_wrap .entry_content h3 {
    letter-spacing: 0.03em
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content h3 {
        font-size:4.6vw;
        margin-top: 8vw;
        margin-bottom: 4vw
    }
}

.entry .entry_wrap .entry_content h4 {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.7;
    margin-top: 60px;
    margin-bottom: 30px;
	-moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

.en .entry .entry_wrap .entry_content h4 {
    letter-spacing: 0.03em
}

#base2 .entry .entry_wrap .entry_content h4 {
    font-size: 18px;
    padding-top: 50px;
    margin-top: 50px;
    border-top: 1px solid #9db3cd;
	-moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content h4 {
        font-size:4.3vw;
        margin-top: 8vw;
        margin-bottom: 4vw;
    }

    #base2 .entry .entry_wrap .entry_content h4 {
        font-size: 14px;
        margin-top: 6.5vw;
        padding-top: 6.5vw;
        margin-bottom: 3.5vw;
		-moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
    }
}

.entry .entry_wrap .entry_content h5,.entry .entry_wrap .entry_content h6 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.7;
    margin-top: 60px;
    margin-bottom: 30px;
	-moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
}


.entry .entry_wrap .entry_content h5,.entry .entry_wrap .entry_content h6 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.7;
    margin-top: 60px;
    margin-bottom: 30px;
	-moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

.en .entry .entry_wrap .entry_content h5,.en .entry .entry_wrap .entry_content h6 {
    letter-spacing: 0.03em
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content h5{
        font-size:4vw;
        margin-top: 8vw;
        margin-bottom: 4vw
    }
    .entry .entry_wrap .entry_content h6 {
        font-size:3.6vw;
        margin-top: 8vw;
        margin-bottom: 4vw
    }
}

.entry .entry_wrap .entry_content p {
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 2.2;
    margin-top: 30px;
    margin-bottom: 30px;
    min-height: 16px
}

.en .entry .entry_wrap .entry_content p {
    letter-spacing: 0.02em
}


.entry .entry_wrap .entry_content h1 mark {
  display: inline;
  background: linear-gradient(90deg, #fcf69f, #fcf69f); 
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 40%;
  transition: all 0.8s ease;
  cursor: pointer;
}

.entry .entry_wrap .entry_content h1 mark:hover {
  background-size: 100% 40%; 
}


.entry .entry_wrap .entry_content h2 mark {
  display: inline;
  background: linear-gradient(90deg, #fcf69f, #fcf69f); 
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 40%;
  transition: all 0.8s ease;
  cursor: pointer;
}

.entry .entry_wrap .entry_content h2 mark:hover {
  background-size: 100% 40%; 
}


.entry .entry_wrap .entry_content h3 mark {
  display: inline;
  background: linear-gradient(90deg, #fcf69f, #fcf69f); 
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 40%;
  transition: all 0.8s ease;
  cursor: pointer;
}

.entry .entry_wrap .entry_content h3 mark:hover {
  background-size: 100% 40%; 
}


.entry .entry_wrap .entry_content h4 mark {
  display: inline;
  background: linear-gradient(90deg, #fcf69f, #fcf69f); 
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 40%;
  transition: all 0.8s ease;
  cursor: pointer;
}

.entry .entry_wrap .entry_content h4 mark:hover {
  background-size: 100% 40%; 
}



.entry .entry_wrap .entry_content h5 mark {
  display: inline;
  background: linear-gradient(90deg, #fcf69f, #fcf69f); 
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 40%;
  transition: all 0.8s ease;
  cursor: pointer;
}

.entry .entry_wrap .entry_content h5 mark:hover {
  background-size: 100% 40%; 
}



.entry .entry_wrap .entry_content h6 mark {
  display: inline;
  background: linear-gradient(90deg, #fcf69f, #fcf69f); 
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 40%;
  transition: all 0.8s ease;
  cursor: pointer;
}

.entry .entry_wrap .entry_content h6 mark:hover {
  background-size: 100% 40%; 
}


.entry .entry_wrap .entry_content p .mark {
  display: inline;
  background: linear-gradient(90deg, #fcf69f, #fcf69f); 
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 40%;
  transition: all 0.8s ease;
  cursor: pointer;
}

.entry .entry_wrap .entry_content p mark:hover {
  background-size: 100% 40%; 
}

p.marker a{
    display: inline;
    background: linear-gradient(90deg, #fcf69f, #fcf69f); 
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 40%;
    transition: all 0.8s ease;
    cursor: pointer;
  }
  
 p.marker a:hover {
    background-size: 100% 40%; 
  }
  

.entry .entry_wrap .entry_content p em,.entry .entry_wrap .entry_content p i {
    font-style: italic
}

.entry .entry_wrap .entry_content p a {
    text-decoration: underline
}

#base2 .entry .entry_wrap .entry_content p {
    font-size: 14px;
    margin-top: 20px;
    line-height: 1.9
}


#base2 .entry .entry_wrap .entry_content p strong {
    font-size: 15px
}

#base2 .entry .entry_wrap .entry_content p small {
    color: #666;
    font-size: 12px
}

@media screen and (max-width: 1080px) {
    .entry .entry_wrap .entry_content p {
        font-size:14px;
        min-height: 14px
    }

    #base2 .entry .entry_wrap .entry_content p {
        font-size: 13px
    }

    #base2 .entry .entry_wrap .entry_content p strong {
        font-size: 14px
    }

    #base2 .entry .entry_wrap .entry_content p small {
        font-size: 11px
    }
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content p {
        font-size:3.5vw;
        min-height: 3.5vw;
        margin-top: 4vw;
        margin-bottom: 4vw
    }

    #base2 .entry .entry_wrap .entry_content p {
        font-size: 12px;
        margin-top: 3vw;
        margin-bottom: 3vw;
		display: contents;
		
    }

    #base2 .entry .entry_wrap .entry_content.content_schedule p {
		display: block!important;
    }
    

    #base2 .entry .entry_wrap .entry_content p strong {
        font-size: 13px
    }
	

}


@media screen and (max-width: 590px) {
	.wp-block-media-text>.wp-block-media-text__content {
    padding: 5% 5%;
}
}

@media screen and (max-width: 470px) {
    .entry .entry_wrap .entry_content p {
        font-size:3vw;
    }
}


.entry .entry_wrap .entry_content p.small {
    font-size: 12px
}

@media screen and (max-width: 1080px) {
    .entry .entry_wrap .entry_content p.small {
        font-size:11px
    }
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content p.small {
        font-size:10px
    }
}

.entry .entry_wrap .entry_content p.credit {
    color: #333;
    font-size: 12px;
    letter-spacing: 0.05em;
    line-height: 2
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content p.credit {
        font-size:11px
    }
}

.entry .entry_wrap .entry_content hr {
    clear: both;
    max-width: 700px;
    margin: 60px auto;
    border-top: 2px solid #9db3cd;
}

.wp-block-separator{
	border-bottom:none;
}

.wp-block-embed-youtube .wp-block-embed__wrapper{
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.wp-block-embed-youtube .wp-block-embed__wrapper iframe,
.wp-block-embed-youtube .wp-block-embed__wrapper object,
.wp-block-embed-youtube .wp-block-embed__wrapper embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.wp-block-embed-youtube figcaption {
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 0.8rem;
	line-height: 1.2rem;
}


@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content hr {
        margin-top:6vw;
        margin-bottom: 6vw
    }
}

.entry .entry_wrap .entry_content ul,.entry .entry_wrap .entry_content ol {
    clear: both;
    margin-top: 30px;
    margin-bottom: 30px
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content ul,.entry .entry_wrap .entry_content ol {
        margin-top:6vw;
        margin-bottom: 6vw
    }
}

.entry .entry_wrap .entry_content ul li,.entry .entry_wrap .entry_content ol li {
    font-size: 16px;
    line-height: 1.6;
    margin: 15px 0 15px 25px
}

.entry .entry_wrap .entry_content ul li:first-child,.entry .entry_wrap .entry_content ol li:first-child {
    margin-top: 0
}

.entry .entry_wrap .entry_content ul li:last-child,.entry .entry_wrap .entry_content ol li:last-child {
    margin-bottom: 0
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content ul li,.entry .entry_wrap .entry_content ol li {
        font-size:14px
    }
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content ul li,.entry .entry_wrap .entry_content ol li {
        font-size:3.5vw;
        margin-top: 3vw;
        margin-bottom: 3vw;
        margin-left: 22px
    }
}

.entry .entry_wrap .entry_content ul li {
    list-style-type: disc
}

.entry .entry_wrap .entry_content ol li {
    list-style-type: decimal;
    padding-left: 10px
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content ol li {
        padding-left:8px
    }
}

.entry .entry_wrap .entry_content strong {
    font-weight: 600
}


.wp-block-image img {
    width: 100%;
    max-width: inherit;
    aspect-ratio: 5 / 3.5;
    object-fit: cover;
}

@media screen and (max-width: 767px) {
.wp-block-image img {
    aspect-ratio: 4 / 3;
}
}

.wp-block-image.picture img {
    aspect-ratio: revert-layer!important;
}

.entry .entry_wrap .entry_content .wp-block-image {
    clear: both;
    margin: 60px auto;
    text-align: center
}

.article-template-single-article-photo .entry .entry_wrap .entry_content .wp-block-image {
    opacity: 0!important;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all 1s ease .5s;
    -o-transition: all 1s ease .5s;
    -webkit-transition: all 1s ease;
    -webkit-transition-delay: .5s;
    transition: all 1s ease .5s
}

.article-template-single-article-photo .entry .entry_wrap .entry_content .wp-block-image.scl_on {
    opacity: 1!important;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.entry .entry_wrap .entry_content .wp-block-image.right {
    width: 80%;
    float: right
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content .wp-block-image.right {
        width:90%
    }
}

.entry .entry_wrap .entry_content .wp-block-image.left {
    width: 80%;
    float: left
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content .wp-block-image.left {
        width:90%
    }
}

.entry .entry_wrap .entry_content .wp-block-image figcaption {
    color: #777;
    font-size: 12px;
    line-height: 1.6;
    padding-top: 15px;
    text-align: center
}

.entry .entry_wrap .entry_content .wp-block-image figcaption em {
    font-style: italic
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content .wp-block-image {
        margin-top:7vw;
        margin-bottom: 7vw
    }

    .entry .entry_wrap .entry_content .wp-block-image figcaption {
        font-size: 10px;
        padding-top: 12px;
        width: 93vw;
        margin-left: auto;
        margin-right: auto
    }
}

.entry .entry_wrap .entry_content .video_wrapper {
    clear: both;
    margin: 60px auto
}

.article-template-single-article-photo .entry .entry_wrap .entry_content .video_wrapper {
    opacity: 0;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all 1s ease .5s;
    -o-transition: all 1s ease .5s;
    -webkit-transition: all 1s ease;
    -webkit-transition-delay: .5s;
    transition: all 1s ease .5s
}

.article-template-single-article-photo .entry .entry_wrap .entry_content .video_wrapper.scl_on {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content .video_wrapper {
        margin-top:7vw;
        margin-bottom: 7vw
    }
}

.entry .entry_wrap .entry_content .video_wrapper video {
    width: 100%;
    outline: none
}

.entry .entry_wrap .entry_content .video_wrapper p {
    color: #777;
    font-size: 11px;
    margin: 15px auto 0;
    text-align: center
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content .video_wrapper p {
        font-size:10px;
        margin: 10px auto 0
    }
}

.entry .entry_wrap .entry_content .wp-block-embed-youtube {
    clear: both;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 60px auto
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content .wp-block-embed-youtube {
        margin-top:7vw;
        margin-bottom: 7vw
    }
}

.entry .entry_wrap .entry_content .wp-block-embed-youtube figcaption {
    color: #777;
    font-size: 12px;
    line-height: 1.6;
    padding-top: 15px;
    text-align: center
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content .wp-block-embed-youtube {
        margin-top:7vw;
        margin-bottom: 7vw
    }

    .entry .entry_wrap .entry_content .wp-block-embed-youtube figcaption {
        font-size: 10px;
        padding-top: 12px
    }
}

.entry .entry_wrap .entry_content .wp-block-embed-youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.entry .entry_wrap .entry_content .wp-block-table {
    background-color: #f9f9f6
}

.entry .entry_wrap .entry_content .wp-block-table td {
    padding: 20px;
    border: 2px solid #FFF;
    min-width: 120px
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content .wp-block-table td {
        min-width:100px;
        padding: 15px
    }
}

.entry .entry_wrap .entry_content .wp-block-table td small {
    color: #333;
    font-size: 12px
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content .wp-block-table td small {
        font-size:10px
    }
}

.entry .entry_wrap .entry_content .wp-block-table td.price {
    text-align: center
}


@media (min-width: 782px) {


    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*=flex-basis] {
        flex-grow: 0;
        display: flex!important;
        align-items: center!important;
    }
}


.entry .entry_wrap .entry_content .youtube {
    clear: both;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 60px auto
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content .youtube {
        margin-top:7vw;
        margin-bottom: 7vw
    }
}

.entry .entry_wrap .entry_content .youtube figcaption {
    color: #777;
    font-size: 12px;
    line-height: 1.6;
    padding-top: 15px;
    text-align: center
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content .youtube {
        margin-top:7vw;
        margin-bottom: 7vw
    }

    .entry .entry_wrap .entry_content .youtube figcaption {
        font-size: 10px;
        padding-top: 12px
    }
}

.entry .entry_wrap .entry_content .youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.entry .entry_wrap .entry_content .col {
    clear: both;
    font-size: 13px;
    line-height: 2;
    background-color: #f9f9f6;
    padding: 30px
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content .col {
        width:100%;
        font-size: 11px;
        padding: 4.5vw
    }
}

.entry .entry_wrap .entry_content a {
    color: #6184ab;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (min-width: 1080px) {
    .entry .entry_wrap .entry_content a:hover {
        color:#999
    }
}

.entry .entry_wrap .entry_content .btn {
    clear: both;
    margin-top: 60px;
    margin-bottom: 60px;
    text-align: center
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content .btn {
        margin-top:7vw;
        margin-bottom: 7vw
    }
}

.entry .entry_wrap .entry_content .btn a {
    color: #6184ab;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.6;
    padding: 15px 20px 15px 40px;
    border: 2px solid #6184ab;
    background-color: transparent;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    position: relative
}

.entry .entry_wrap .entry_content .btn a::before {
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #6184ab;
    border-right: 2px solid #6184ab;
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    left: 13px;
    margin-top: -5px;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

@media screen and (min-width: 1080px) {
    .entry .entry_wrap .entry_content .btn a:hover {
        color:#FFF;
        background-color: #6184ab
    }

    .entry .entry_wrap .entry_content .btn a:hover::before {
        border-color: #FFF;
        left: 16px
    }
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content .btn a {
        width:100%;
        font-size: 3.5vw;
        padding: 2.7vw 4.5vw 2.7vw 9vw
    }

    .entry .entry_wrap .entry_content .btn a::before {
        left: 2.4vw
    }
}

.entry .entry_wrap .entry_content .embed_article {
    clear: both;
    width: 100%;
    max-width: 700px
}

@media screen and (min-width: 767px) {
    .entry .entry_wrap .entry_content .embed_article {
        margin:50px auto
    }
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content .embed_article {
        margin:7vw auto
    }
}

.entry .entry_wrap .entry_content .embed_article article {
    width: 100%;
    padding: 20px;
    background-color: #f9f9f6
}

@media screen and (min-width: 767px) {
    .entry .entry_wrap .entry_content .embed_article article {
        margin-bottom:20px
    }

    .entry .entry_wrap .entry_content .embed_article article:last-child {
        margin-bottom: 0
    }
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content .embed_article article {
        margin-bottom:15px
    }
}

.entry .entry_wrap .entry_content .embed_article article:last-child {
    margin-bottom: 0
}

.entry .entry_wrap .entry_content .embed_article article a {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center
}

@media screen and (min-width: 1080px) {
    .entry .entry_wrap .entry_content .embed_article article a:hover figure::before {
        opacity:1;
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    .entry .entry_wrap .entry_content .embed_article article a:hover figure::after {
        opacity: 0.5
    }

    .entry .entry_wrap .entry_content .embed_article article a:hover .txt {
        color: #6184ab
    }

    .entry .entry_wrap .entry_content .embed_article article a:hover .txt .date_category {
        color: #6184ab
    }
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content .embed_article article a {
        align-items:flex-start
    }
}

.entry .entry_wrap .entry_content .embed_article article a figure {
    width: 200px;
    position: relative
}


.entry .entry_wrap .entry_content .embed_article article a figure img{
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content .embed_article article a figure {
        width:40%
    }
}

.entry .entry_wrap .entry_content .embed_article article a figure::before {
    color: #FFF;
    content: "read more";
    font-family: BrownNow,Tipique_Regular,YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,"游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo",sans-serif;
    display: flex;
    font-weight: 600;
    font-size: 25px;
    letter-spacing: 0.08em;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 2;
    -moz-transform: translate(0, 5px);
    -ms-transform: translate(0, 5px);
    -webkit-transform: translate(0, 5px);
    transform: translate(0, 5px);
    -moz-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.entry .entry_wrap .entry_content .embed_article article a figure::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: #6184ab;
    z-index: 1;
    mix-blend-mode: multiply;
    -moz-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.entry .entry_wrap .entry_content .embed_article article a .txt {
    color: #000;
    width: calc( 100% - 220px );
    font-weight: 600;
    letter-spacing: 0.08em;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content .embed_article article a .txt {
        width:60%;
        padding-left: 15px
    }
}

.entry .entry_wrap .entry_content .embed_article article a .txt .date_category {
    color: #999;
    font-size: 10px;
    line-height: 1;
    min-height: 10px;
    margin: 5px 0 0;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

.entry .entry_wrap .entry_content .embed_article article a .txt .date_category span {
    display: inline-block;
    margin: 5px 7px 0 0
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content .embed_article article a .txt .date_category {
        width:100%;
        font-size: 10px;
        margin: 2px 0 0
    }

    .entry .entry_wrap .entry_content .embed_article article a .txt .date_category span {
        display: inline-block;
        margin: 5px 7px 0 0
    }
}

.entry .entry_wrap .entry_content .embed_article article a .txt .subtitle {
    font-size: 13px;
    letter-spacing: 0.05em;
    line-height: 1;
    margin: 0 0 8px;
	color: #535657;
}

.en .entry .entry_wrap .entry_content .embed_article article a .txt .subtitle {
    letter-spacing: 0.02em
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content .embed_article article a .txt .subtitle {
        width:100%;
        font-size: 11px;
        letter-spacing: 0.04em
    }

    .en .entry .entry_wrap .entry_content .embed_article article a .txt .subtitle {
        letter-spacing: 0.02em
    }
}

.entry .entry_wrap .entry_content .embed_article article a .txt h3 {
    font-size: 13px;
    letter-spacing: 0.05em;
    line-height: 1.6;
    margin: 0;
	color: #535657;
}

.en .entry .entry_wrap .entry_content .embed_article article a .txt h3 {
    letter-spacing: 0.02em
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content .embed_article article a .txt h3 {
        width:100%;
        font-size: 12px;
        letter-spacing: 0.04em;
        line-height: 1.5
    }

    .en .entry .entry_wrap .entry_content .embed_article article a .txt h3 {
        letter-spacing: 0.02em
    }
}

.entry .entry_wrap .entry_content .embed_article article a .txt h3 br {
    display: none
}

.entry .entry_wrap .entry_content .embed_article article a .txt .excerpt {
    margin: 5px 0 0;
	color: #414242;
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_content .embed_article article a .txt .excerpt {
        display:none
    }
}

.entry .entry_wrap .entry_content .embed_article article a .txt .excerpt p {
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: calc(18px*2);
    margin: 0 0 10px
}

.entry .entry_wrap .entry_content .embed_article article a .txt .excerpt p:last-child {
    margin-bottom: 0
}

.entry .entry_wrap .entry_content .embed_article .has-text-align-center {
    text-align: center
}

.entry .entry_wrap .entry_content .embed_article .has-text-align-right {
    text-align: right
}

.entry .entry_wrap .entry_content .embed_article .has-text-align-left {
    text-align: left
}

.entry .entry_wrap .related_items+.entry_footer {
    margin: 50px auto 100px
}

.entry .entry_wrap .entry_footer {
    max-width: 700px;
    margin: 100px auto;
    padding-top: 50px;
    border-top: 1px solid #9db3cd
}

.entry .entry_wrap2 .entry_footer {
    max-width: 1100px!important;
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_footer {
        border-top:1px solid #9db3cd;
        padding-left: 4.5vw;
        padding-right: 4.5vw;
        margin: 13vw auto;
        padding-top: 6.5vw
    }
}

.entry .entry_wrap .entry_footer .share {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.entry .entry_wrap .entry_footer .share::before {
    content: "share";
	font-family: BrownNow,Tipique_Regular,YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
    display: inline-block;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0.07em;
    margin-right: 10px;
	color: #535657;
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_footer .share::before {
    font-size:7vw;
	padding-bottom: 8px
    }
}

.entry .entry_wrap .entry_footer .share a {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center
}

.entry .entry_wrap .entry_footer .share a svg {
    width: 20px;
    fill: #535657;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 1080px) {
    .entry .entry_wrap .entry_footer .share a:hover.fb svg {
        fill:#1877f2
    }

    .entry .entry_wrap .entry_footer .share a:hover.tw svg {
        fill: #0F1419
    }

    .entry .entry_wrap .entry_footer .share a:hover.line svg {
        fill: #13b719
    }
}

.entry .entry_wrap .entry_footer .categories {
    margin-top: 10px;
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start
}

@media screen and (max-width: 1080px) {
    .entry .entry_wrap .entry_footer .categories {
        font-size:1.2vw
    }
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_footer .categories {
        font-size:3vw
    }
}

.entry .entry_wrap .entry_footer .categories span {
    margin-right: 10px
}

.entry .entry_wrap .entry_footer .categories span a {
    color: #535657;
    display: inline-block;
    line-height: 25px;
    margin-right: 8px;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (max-width: 1080px) {
    .entry .entry_wrap .entry_footer .categories span a {
        font-size:1.2vw
    }
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .entry_footer .categories span a {
        font-size:3vw
    }
}

@media screen and (min-width: 1080px) {
    .entry .entry_wrap .entry_footer .categories span a:hover {
        color:#6184ab
    }

    .entry .entry_wrap .entry_footer .categories span a:hover::after {
        background-color: #6184ab
    }
}

.entry .entry_wrap .entry_footer .categories span.category a {
    position: relative
}

.entry .entry_wrap .entry_footer .categories span.category a::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #535657;
    position: absolute;
    left: 0;
    bottom: 0;
    -moz-transition: background-color .4s ease;
    -o-transition: background-color .4s ease;
    -webkit-transition: background-color .4s ease;
    transition: background-color .4s ease
}

@media screen and (min-width: 1080px) {
    .entry .entry_wrap .entry_footer .categories span.category a:hover::after {
        background-color:#6184ab
    }
}

.entry .entry_wrap .pagenav {
    max-width: 700px;
    margin: 150px auto 100px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative
}

.entry .entry_wrap .pagenav::before,.entry .entry_wrap .pagenav::after {
    content: "";
    display: block;
    background-color:#9db3cd;
    position: absolute
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .pagenav::before,.entry .entry_wrap .pagenav::after {
        background-color:#9db3cd;
    }
}

.entry .entry_wrap .pagenav::before {
    width: 100%;
    height: 1px;
    top: -100px;
    left: 0
}

.entry .entry_wrap .pagenav::after {
    width: 1px;
    height: 100%;
    top: 0;
    left: 50%
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .pagenav {
        padding:0 4.5vw;
        margin: 21vw auto 13vw
    }

    .entry .entry_wrap .pagenav::before {
        top: -13vw
    }
}

.entry .entry_wrap .pagenav .next_post,.entry .entry_wrap .pagenav .prev_post {
    width: calc( 50% - 50px );
    font-weight: 600
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .pagenav .next_post,.entry .entry_wrap .pagenav .prev_post {
        width:calc( 50% - 4.5vw )
    }
}

.entry .entry_wrap .pagenav .next_post .sub,.entry .entry_wrap .pagenav .prev_post .sub {
    font-size: 15px;
    line-height: 1;
    margin: 0 0 25px
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .pagenav .next_post .sub,.entry .entry_wrap .pagenav .prev_post .sub {
        font-size:3.2vw;
        margin: 0 0 3vw
    }
}

.entry .entry_wrap .pagenav .next_post a figure,.entry .entry_wrap .pagenav .prev_post a figure {
    width: 100%;
    position: relative
}

.entry .entry_wrap .pagenav .next_post a figure::before,.entry .entry_wrap .pagenav .prev_post a figure::before {
    color: #FFF;
    content: "read more";
    display: flex;
    font-family: BrownNow,Tipique_Regular,YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"游ゴシック Medium","Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
    font-weight: 600;
    font-size: 30px;
    letter-spacing: 0.08em;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 2;
    -moz-transform: translate(0, 5px);
    -ms-transform: translate(0, 5px);
    -webkit-transform: translate(0, 5px);
    transform: translate(0, 5px);
    -moz-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.entry .entry_wrap .pagenav .next_post a figure::after,.entry .entry_wrap .pagenav .prev_post a figure::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: #6184ab;
    z-index: 1;
    mix-blend-mode: multiply;
    -moz-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.entry .entry_wrap .pagenav .next_post a figure img{
    aspect-ratio: 4 / 3;
	object-fit: cover;
}

.entry .entry_wrap .pagenav .prev_post a figure img{
    aspect-ratio: 4 / 3;
	object-fit: cover;
}

.entry .entry_wrap .pagenav .next_post a .txt,.entry .entry_wrap .pagenav .prev_post a .txt {
    color: #535657;
    letter-spacing: 0.05em;
    padding-top: 17px;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .pagenav .next_post a .txt,.entry .entry_wrap .pagenav .prev_post a .txt {
        padding-top:15px;
        letter-spacing: 0.05em
    }
}

.entry .entry_wrap .pagenav .next_post a .txt h3,.entry .entry_wrap .pagenav .prev_post a .txt h3 {
    font-size: 13px;
    letter-spacing: 0.03em;
    line-height: 1.6;
    text-align: justify
}

.en .entry .entry_wrap .pagenav .next_post a .txt h3,.en .entry .entry_wrap .pagenav .prev_post a .txt h3 {
    text-align: left
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .pagenav .next_post a .txt h3,.entry .entry_wrap .pagenav .prev_post a .txt h3 {
        font-size:3vw;
        line-height: 1.5
    }
}

.entry .entry_wrap .pagenav .next_post a .txt .date_category,.entry .entry_wrap .pagenav .prev_post a .txt .date_category {
    color: #4f4f4f;
    font-size: 10px;
    line-height: 1;
    min-height: 11px;
    margin: 5px 0 0
}
.entry .entry_wrap .pagenav .prev_post a .txt .date_category {
text-align: right;
}
.entry .entry_wrap .pagenav .next_post a .txt .date_category span,.entry .entry_wrap .pagenav .prev_post a .txt .date_category span {
    display: inline-block;
    margin: 5px 7px 0 0
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .pagenav .next_post a .txt .date_category,.entry .entry_wrap .pagenav .prev_post a .txt .date_category {
        width:100%;
        margin: 2px 0 0
    }

    .entry .entry_wrap .pagenav .next_post a .txt .date_category span,.entry .entry_wrap .pagenav .prev_post a .txt .date_category span {
        display: inline-block;
        margin: 5px 7px 0 0
    }
}

.entry .entry_wrap .pagenav .next_post a .txt .tag,.entry .entry_wrap .pagenav .prev_post a .txt .tag {
    margin: 5px 0 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center
}

.entry .entry_wrap .pagenav .next_post a .txt .tag li,.entry .entry_wrap .pagenav .prev_post a .txt .tag li {
    display: inline-block;
    font-size: 10px;
    margin-right: 6px
}

@media screen and (max-width: 767px) {
    .entry .entry_wrap .pagenav .next_post a .txt .tag,.entry .entry_wrap .pagenav .prev_post a .txt .tag {
        font-size:2.5vw;
        line-height: 4vw
    }
}

@media screen and (min-width: 1080px) {
    .entry .entry_wrap .pagenav .next_post a:hover figure::before,.entry .entry_wrap .pagenav .prev_post a:hover figure::before {
        opacity:1;
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    .entry .entry_wrap .pagenav .next_post a:hover figure::after,.entry .entry_wrap .pagenav .prev_post a:hover figure::after {
        opacity: 0.5
    }

    .entry .entry_wrap .pagenav .next_post a:hover .txt,.entry .entry_wrap .pagenav .prev_post a:hover .txt {
        color: #6184ab
    }
}

.entry .entry_wrap .pagenav .prev_post .sub {
    text-align: right
}

.en.article-single .yarpp-related,.en.article-single .related_items {
    display: none !important
}

.yarpp-related .related_article.scl_on article,#pop_articles_sp.scl_on article,#reco_items_sp.scl_on article {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.yarpp-related .related_article.scl_on article:first-child,#pop_articles_sp.scl_on article:first-child,#reco_items_sp.scl_on article:first-child {
    -moz-transition: all .5s ease .2s;
    -o-transition: all .5s ease .2s;
    -webkit-transition: all .5s ease;
    -webkit-transition-delay: .2s;
    transition: all .5s ease .2s
}

.yarpp-related .related_article.scl_on article:nth-child(2),#pop_articles_sp.scl_on article:nth-child(2),#reco_items_sp.scl_on article:nth-child(2) {
    -moz-transition: all .5s ease .4s;
    -o-transition: all .5s ease .4s;
    -webkit-transition: all .5s ease;
    -webkit-transition-delay: .4s;
    transition: all .5s ease .4s
}

.yarpp-related .related_article.scl_on article:nth-child(3),#pop_articles_sp.scl_on article:nth-child(3),#reco_items_sp.scl_on article:nth-child(3) {
    -moz-transition: all .5s ease .6s;
    -o-transition: all .5s ease .6s;
    -webkit-transition: all .5s ease;
    -webkit-transition-delay: .6s;
    transition: all .5s ease .6s
}

.yarpp-related .related_article .sub_title,#pop_articles_sp .sub_title,#reco_items_sp .sub_title {
	font-family: BrownNow,Tipique_Regular,YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
	color: #535657;
    display: inline-block;
    font-size: 35px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    margin: 0 0 30px;
    text-align: left;
}

.yarpp-related .related_article .sub_title span,#pop_articles_sp .sub_title span,#reco_items_sp .sub_title span {
    display: block;
    font-size: 11px;
    letter-spacing: 0.08em;
    padding-top: 10px
}

@media screen and (max-width: 767px) {
    .yarpp-related .related_article .sub_title,#pop_articles_sp .sub_title,#reco_items_sp .sub_title {
        font-size:7vw;
        margin: 0 1vw 8vw;
        vertical-align: middle
    }

    .yarpp-related .related_article .sub_title span,#pop_articles_sp .sub_title span,#reco_items_sp .sub_title span {
        display: block;
        font-size: 2.7vw;
        padding: 7.5px 0 0 0px
    }
}

@media screen and (min-width: 767px) {
    .yarpp-related .related_article .swipe,#pop_articles_sp .swipe,#reco_items_sp .swipe {
        width:100%
    }

    .yarpp-related .related_article .swipe .list,#pop_articles_sp .swipe .list,#reco_items_sp .swipe .list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start
    }

    .yarpp-related .related_article .swipe .list::after,#pop_articles_sp .swipe .list::after,#reco_items_sp .swipe .list::after {
        content: "";
        display: block;
        width: 30.5%
    }

    .yarpp-related .related_article .swipe .list article,#pop_articles_sp .swipe .list article,#reco_items_sp .swipe .list article {
        width: 30.5%
    }

    .yarpp-related .related_article .swipe .list article:nth-child(4),#pop_articles_sp .swipe .list article:nth-child(4),#reco_items_sp .swipe .list article:nth-child(4) {
        display: none
    }
}

@media screen and (max-width: 767px) {
    .yarpp-related .related_article .swipe,#pop_articles_sp .swipe,#reco_items_sp .swipe {
        width:100%;
        overflow: hidden;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch
    }

    .yarpp-related .related_article .swipe .list,#pop_articles_sp .swipe .list,#reco_items_sp .swipe .list {
        width: 202.5vw;
        padding-left: 4.5vw;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start
    }

    .yarpp-related .related_article .swipe .list article,#pop_articles_sp .swipe .list article,#reco_items_sp .swipe .list article {
        width: 60vw;
        margin-right: 4.5vw
    }

    .yarpp-related .related_article .swipe .list article:nth-child(4),#pop_articles_sp .swipe .list article:nth-child(4),#reco_items_sp .swipe .list article:nth-child(4) {
        display: none
    }
}

.yarpp-related .related_article article,#pop_articles_sp article,#reco_items_sp article {
    margin: 0 0 30px;
    /*opacity: 0;*/
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px)
}

.yarpp-related .related_article article:first-child,#pop_articles_sp article:first-child,#reco_items_sp article:first-child {
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.yarpp-related .related_article article:nth-child(2),#pop_articles_sp article:nth-child(2),#reco_items_sp article:nth-child(2) {
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.yarpp-related .related_article article:nth-child(3),#pop_articles_sp article:nth-child(3),#reco_items_sp article:nth-child(3) {
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.yarpp-related .related_article article:last-child,#pop_articles_sp article:last-child,#reco_items_sp article:last-child {
    margin-bottom: 0
}

.yarpp-related .related_article article a figure,#pop_articles_sp article a figure,#reco_items_sp article a figure {
    width: 100%;
    position: relative
}

.yarpp-related .related_article article a figure::before,#pop_articles_sp article a figure::before,#reco_items_sp article a figure::before {
    color: #FFF;
    content: "read more";
    font-family: BrownNow,Tipique_Regular,YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"游ゴシック Medium","Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
    display: flex;
    font-weight: 600;
    font-size: 30px;
    letter-spacing: 0.08em;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 2;
    -moz-transform: translate(0, 5px);
    -ms-transform: translate(0, 5px);
    -webkit-transform: translate(0, 5px);
    transform: translate(0, 5px);
    -moz-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.yarpp-related .related_article article a figure::after,#pop_articles_sp article a figure::after,#reco_items_sp article a figure::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: #6184ab;
    z-index: 1;
    mix-blend-mode: multiply;
    -moz-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.yarpp-related .related_article article a figure img{
    aspect-ratio: 5 / 3;
    object-fit: cover;
}

.yarpp-related .related_article article a .txt,#pop_articles_sp article a .txt,#reco_items_sp article a .txt {
    color: #000;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding-top: 17px;
    text-align: left;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (max-width: 767px) {
    .yarpp-related .related_article article a .txt,#pop_articles_sp article a .txt,#reco_items_sp article a .txt {
        padding-top:10px
    }
}

.yarpp-related .related_article article a .txt h3,#pop_articles_sp article a .txt h3,#reco_items_sp article a .txt h3 {
    font-size: 12px;
    letter-spacing: 0.03em;
    line-height: 1.6;
    text-align: justify
}

.en .yarpp-related .related_article article a .txt h3,.en #pop_articles_sp article a .txt h3,.en #reco_items_sp article a .txt h3 {
    text-align: left
}

.yarpp-related .related_article article a .txt .date_category,#pop_articles_sp article a .txt .date_category,#reco_items_sp article a .txt .date_category {
    color: #999;
    font-size: 10px;
    line-height: 1;
    min-height: 11px;
    margin: 0;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

.yarpp-related .related_article article a .txt .date_category span,#pop_articles_sp article a .txt .date_category span,#reco_items_sp article a .txt .date_category span {
    display: inline-block;
    margin: 5px 7px 0 0
}

@media screen and (max-width: 767px) {
    .yarpp-related .related_article article a .txt .date_category,#pop_articles_sp article a .txt .date_category,#reco_items_sp article a .txt .date_category {
        width:100%;
        margin: 2px 0 0
    }

    .yarpp-related .related_article article a .txt .date_category span,#pop_articles_sp article a .txt .date_category span,#reco_items_sp article a .txt .date_category span {
        display: inline-block;
        margin: 5px 7px 0 0
    }
}

.yarpp-related .related_article article a .txt .tag,#pop_articles_sp article a .txt .tag,#reco_items_sp article a .txt .tag {
    color: #999;
    margin: 5px 0 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

.yarpp-related .related_article article a .txt .tag li,#pop_articles_sp article a .txt .tag li,#reco_items_sp article a .txt .tag li {
    display: inline-block;
    font-size: 10px;
    margin-right: 6px
}

@media screen and (max-width: 767px) {
    .yarpp-related .related_article article a .txt .tag,#pop_articles_sp article a .txt .tag,#reco_items_sp article a .txt .tag {
        font-size:2.5vw;
        line-height: 4vw
    }
}

.yarpp-related .related_article article a .txt .item_name,#pop_articles_sp article a .txt .item_name,#reco_items_sp article a .txt .item_name {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.5;
    margin: 0 0 5px;
    transition: color .4s ease
}

@media screen and (max-width: 767px) {
    .yarpp-related .related_article article a .txt .item_name,#pop_articles_sp article a .txt .item_name,#reco_items_sp article a .txt .item_name {
        font-size:11px
    }
}

.yarpp-related .related_article article a .txt .price,#pop_articles_sp article a .txt .price,#reco_items_sp article a .txt .price {
    margin: 0 0 5px;
    transition: color .4s ease
}

.yarpp-related .related_article article a .txt .price .price_wrap,#pop_articles_sp article a .txt .price .price_wrap,#reco_items_sp article a .txt .price .price_wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center
}

.yarpp-related .related_article article a .txt .price .price_set,#pop_articles_sp article a .txt .price .price_set,#reco_items_sp article a .txt .price .price_set {
    line-height: 1;
    margin: 0 5px 0 0
}

.yarpp-related .related_article article a .txt .price .price_set .p_price,.yarpp-related .related_article article a .txt .price .price_set .p_volume,#pop_articles_sp article a .txt .price .price_set .p_price,#pop_articles_sp article a .txt .price .price_set .p_volume,#reco_items_sp article a .txt .price .price_set .p_price,#reco_items_sp article a .txt .price .price_set .p_volume {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.5
}

@media screen and (max-width: 767px) {
    .yarpp-related .related_article article a .txt .price .price_set .p_price,.yarpp-related .related_article article a .txt .price .price_set .p_volume,#pop_articles_sp article a .txt .price .price_set .p_price,#pop_articles_sp article a .txt .price .price_set .p_volume,#reco_items_sp article a .txt .price .price_set .p_price,#reco_items_sp article a .txt .price .price_set .p_volume {
        font-size:11px
    }
}

.yarpp-related .related_article article a .txt .price .price_set .p_price .tax,.yarpp-related .related_article article a .txt .price .price_set .p_volume .tax,#pop_articles_sp article a .txt .price .price_set .p_price .tax,#pop_articles_sp article a .txt .price .price_set .p_volume .tax,#reco_items_sp article a .txt .price .price_set .p_price .tax,#reco_items_sp article a .txt .price .price_set .p_volume .tax {
    font-size: 10px;
    padding-left: 3px
}

.yarpp-related .related_article article a .txt .price .price_set .p_volume,#pop_articles_sp article a .txt .price .price_set .p_volume,#reco_items_sp article a .txt .price .price_set .p_volume {
    padding-right: 4px
}

.yarpp-related .related_article article a .txt .price .price_set .p_volume.none,#pop_articles_sp article a .txt .price .price_set .p_volume.none,#reco_items_sp article a .txt .price .price_set .p_volume.none {
    display: none
}

.yarpp-related .related_article article a .txt .price .price_set .p_price .sp_price,#pop_articles_sp article a .txt .price .price_set .p_price .sp_price,#reco_items_sp article a .txt .price .price_set .p_price .sp_price {
    color: #6184ab
}

.yarpp-related .related_article article a .txt .price .price_set .p_price .sp_price .label,#pop_articles_sp article a .txt .price .price_set .p_price .sp_price .label,#reco_items_sp article a .txt .price .price_set .p_price .sp_price .label {
    vertical-align: middle;
    padding-right: 5px
}

.yarpp-related .related_article article a .txt .price .price_set .p_price .regular_price,#pop_articles_sp article a .txt .price .price_set .p_price .regular_price,#reco_items_sp article a .txt .price .price_set .p_price .regular_price {
    color: #666
}

.yarpp-related .related_article article a .txt .price .price_set .p_price::after,#pop_articles_sp article a .txt .price .price_set .p_price::after,#reco_items_sp article a .txt .price .price_set .p_price::after {
    content: "/";
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    padding: 0 5px
}

.yarpp-related .related_article article a .txt .price .price_set .p_price:last-child::after,#pop_articles_sp article a .txt .price .price_set .p_price:last-child::after,#reco_items_sp article a .txt .price .price_set .p_price:last-child::after {
    display: none
}

@media screen and (min-width: 1080px) {
    .yarpp-related .related_article article a:hover figure::before,#pop_articles_sp article a:hover figure::before,#reco_items_sp article a:hover figure::before {
        opacity:1;
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    .yarpp-related .related_article article a:hover figure::after,#pop_articles_sp article a:hover figure::after,#reco_items_sp article a:hover figure::after {
        opacity: 0.5
    }

    .yarpp-related .related_article article a:hover .txt,#pop_articles_sp article a:hover .txt,#reco_items_sp article a:hover .txt {
        color: #6184ab !important
    }

    .yarpp-related .related_article article a:hover .txt .date_category,.yarpp-related .related_article article a:hover .txt .tag,#pop_articles_sp article a:hover .txt .date_category,#pop_articles_sp article a:hover .txt .tag,#reco_items_sp article a:hover .txt .date_category,#reco_items_sp article a:hover .txt .tag {
        color: #6184ab !important
    }
}

#pop_articles_sp,#reco_items_sp {
    background-color: #f9f9f6;
    padding: 10vw 0 5vw
}

#pop_articles_sp .sub_title,#reco_items_sp .sub_title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative
}

#pop_articles_sp .sub_title span,#reco_items_sp .sub_title span {
    position: relative;
    top: -3px;
	margin-left: 20px;
}

#pop_articles_sp .sub_title::after,#reco_items_sp .sub_title::after {
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    position: absolute;
    top: 50%;
    right: -4.5vw;
    background-color: #DDD
}

#pop_articles_sp .swipe,#reco_items_sp .swipe {
    width: 100%;
    overflow: hidden;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch
}

#pop_articles_sp .swipe .list,#reco_items_sp .swipe .list {
    width: 202.5vw;
    padding-left: 4.5vw;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start
}

#pop_articles_sp .swipe .list article,#reco_items_sp .swipe .list article {
    width: 60vw;
    margin-right: 4.5vw;
    margin-bottom: 30px;
}

#pop_articles_sp .swipe .list article:nth-child(4),#reco_items_sp .swipe .list article:nth-child(4) {
    display: none
}

#pop_articles_sp {
    margin-top: 20vw
}

#reco_items_sp {
    margin-bottom: 20vw
}

#reco_items_sp .swipe .list {
    width: 163.5vw
}

#reco_items_sp .swipe .list article {
    width: 50vw
}

/*.yarpp-related {
    opacity: 0;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

@media screen and (min-width: 767px) {
    .yarpp-related {
        width:100%;
        max-width: 1300px;
        padding-left: 50px;
        padding-right: 50px;
        margin-left: auto;
        margin-right: auto
    }

    .shop .yarpp-related {
        padding-left: 0;
        padding-right: 0
    }
}

@media screen and (max-width: 767px) {
    .yarpp-related {
        width:100%;
        padding: 10vw 0 0 0;
        margin: 0 0 5vw;
        border-top: 1px solid #9db3cd;
    }

    .shop .yarpp-related {
        margin: 6vw 0 5vw
    }

    .yarpp-related .related_items {
        border: none;
        padding-top: 0
    }
}*/

.yarpp-related.scl_on {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.yarpp-related.scl_on .related_article article {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.yarpp-related.scl_on .related_article article:first-child {
    -moz-transition: all .5s ease .2s;
    -o-transition: all .5s ease .2s;
    -webkit-transition: all .5s ease;
    -webkit-transition-delay: .2s;
    transition: all .5s ease .2s
}

.yarpp-related.scl_on .related_article article:nth-child(2) {
    -moz-transition: all .5s ease .4s;
    -o-transition: all .5s ease .4s;
    -webkit-transition: all .5s ease;
    -webkit-transition-delay: .4s;
    transition: all .5s ease .4s
}

.yarpp-related.scl_on .related_article article:nth-child(3) {
    -moz-transition: all .5s ease .6s;
    -o-transition: all .5s ease .6s;
    -webkit-transition: all .5s ease;
    -webkit-transition-delay: .6s;
    transition: all .5s ease .6s
}

section#shop p.specific_trade_law {
    display: inline-block;
    font-weight: 600;
    position: relative;
    border-bottom: 2px solid #000;
    cursor: pointer;
    position: relative;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 767px) {
    section#shop p.specific_trade_law {
        margin-right:25px
    }

    section#shop p.specific_trade_law.single {
        margin-right: 0
    }
}

@media screen and (max-width: 767px) {
    section#shop p.specific_trade_law {
        font-size:12px;
        height: 30px;
        line-height: 28px;
        margin-right: 20px
    }

    section#shop p.specific_trade_law.single {
        margin-right: 0
    }
}

section#shop p.specific_trade_law a {
    display: inline-block;
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 38px;
    padding: 0 40px 0 0;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (max-width: 767px) {
    section#shop p.specific_trade_law a {
        font-size:12px;
        line-height: 28px;
        padding: 0 22px 0 0
    }
}

section#shop p.specific_trade_law a::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    top: 15px;
    right: 2px;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    transform: translateY(0) rotate(-45deg);
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (max-width: 767px) {
    section#shop p.specific_trade_law a::before {
        width:7px;
        height: 7px;
        top: 11px
    }
}

@media screen and (min-width: 1080px) {
    section#shop p.specific_trade_law:hover {
        color:#6184ab;
        border-bottom: 2px solid #6184ab
    }

    section#shop p.specific_trade_law:hover a {
        color: #6184ab
    }

    section#shop p.specific_trade_law:hover a::before,section#shop p.specific_trade_law:hover a::after {
        border-color: #6184ab
    }
}

section#shop .shop_wrap.full {
    width: 100%;
    margin: 0 auto 140px;
    opacity: 0;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

@media screen and (max-width: 767px) {
    section#shop .shop_wrap.full {
        padding:0 4.5vw 5vw;
        margin-bottom: 20vw
    }
}

.load section#shop .shop_wrap.full {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.load section#shop .shop_wrap.full .count,.load section#shop .shop_wrap.full .tag_list,.load section#shop .shop_wrap.full .nourin,.load section#shop .shop_wrap.full .brand_wrap {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.shop_news {
    width: 100%;
    background-color: #f9f9f6;
    text-align: left;
    color: #000;
    line-height: 1.7
}

@media screen and (min-width: 767px) {
    .shop_news {
        font-size:12px;
        padding: 20px 50px
    }
}

@media screen and (max-width: 767px) {
    .shop_news {
        font-size:10px;
        padding: 20px 20px
    }
}

@media screen and (min-width: 767px) {
    .shop_news .date {
        display:inline-block;
        font-size: 14px;
        margin-right: 10px
    }
}

@media screen and (max-width: 767px) {
    .shop_news .date {
        display:block;
        font-size: 12px
    }
}

.shop_news strong {
    font-weight: 600
}

@media screen and (min-width: 767px) {
    .shop_news strong {
        font-size:14px
    }
}

@media screen and (max-width: 767px) {
    .shop_news strong {
        font-size:12px
    }
}

.shop_news a {
    color: #535657;
    text-decoration: underline;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

.shop_news a:hover {
    color: #667f9b;
}

.shop_news p+p {
    margin-top: 10px
}

.shop_category_nav {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    opacity: 0;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease
}

@media screen and (max-width: 767px) {
    .shop_category_nav {
        margin:20vw auto
    }

    .home .shop_category_nav {
        margin: 30px auto 120px;
    }
}

.shop_category_nav.scl_on {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

@media screen and (min-width: 767px) {
    .shop_category_nav {
        margin:30px auto 250px;
		padding-bottom: 120px;
    }

    #cover+.shop_category_nav {
        margin-top: 0
    }

    .shop_news+.shop_category_nav {
        margin-top: 0
    }
}

@media screen and (max-width: 767px) {
    #cover+.shop_category_nav {
        margin:0 auto 10vw
    }

    .shop_news+.shop_category_nav {
        margin: 0 auto 10vw
    }
}

.shop_category_nav .shop_category_nav_box {
    position: relative
}

.shop_category_nav .shop_category_nav_box.col2 {
    width: 50%;
    height: 300px
}

@media screen and (max-width: 767px) {
    .shop_category_nav .shop_category_nav_box.col2 {
        height:50vw
    }
}

.shop_category_nav .shop_category_nav_box a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.shop_category_nav .shop_category_nav_box a:hover figure::before {
    opacity: 0.7
}

.shop_category_nav .shop_category_nav_box a:hover figure::after {
    opacity: 0.2
}

.shop_category_nav .shop_category_nav_box figure {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0
}

.shop_category_nav .shop_category_nav_box figure::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #667f9b;
    opacity: 0;
    mix-blend-mode: multiply;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

.shop_category_nav .shop_category_nav_box figure::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #395676;
    opacity: 0.2;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

.shop_category_nav .shop_category_nav_box .txt {
    color: #FFF;
    width: 100%;
    height: 100%;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    position: relative;
    z-index: 1
}

.shop_category_nav .shop_category_nav_box .txt h3 {
    font-size: 60px;
    letter-spacing: 0.15em;
    margin: 0px 0 10px;
	line-height: 0.75em;
}

@media screen and (max-width: 767px) {
    .shop_category_nav .shop_category_nav_box .txt h3 {
        font-size:6.8vw;
		line-height: 0.75em;
    }
}

@media screen and (max-width: 640px) {
	.shop_category_nav .shop_category_nav_box .txt h3 {
        font-size: 2.7em;
        line-height: 0.85em;
    }
}

@media screen and (max-width: 430px) {
	.shop_category_nav .shop_category_nav_box .txt h3 {
        font-size: 2.1em;
        line-height: 0.85em;
    }
	
    .shop_category_nav .shop_category_nav_box .txt p {
        font-size: 27px!important;
    }
	
}


.shop_category_nav .shop_category_nav_box .txt p {
    display: inline-block;
    font-size: 45px;
    font-weight: 700;
    letter-spacing: 0.13em;
    margin: 0px auto 0;
    padding: 0 0 7px;
    border-bottom: 2px solid #FFF
}

@media screen and (max-width: 767px) {
    .shop_category_nav .shop_category_nav_box .txt p {
        font-size:35px;
        margin: 0px auto 0;
        padding: 0 0 5px
    }
}

.shop_item_list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start
}

@media screen and (min-width: 767px) {
    .shop_item_list::before {
        content:"";
        display: block;
        width: 22%;
        order: 1
    }

    .shop_item_list::after {
        content: "";
        display: block;
        width: 22%
    }
}

@media screen and (min-width: 767px) {
    .shop_item_list.col3::before {
        display:none
    }

    .shop_item_list.col3::after {
        width: 30%
    }

    .shop_item_list.col3 article {
        width: 30%;
        margin: 0
    }
}

@media screen and (max-width: 767px) {
    .shop_item_list.col3 article {
        width:calc( 50% - 10px );
        margin: 0
    }
}

.shop_item_list article {
    position: relative
}

.shop_item_list article .free_shipping {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: left;
    position: absolute;
    top: -30px
}

@media screen and (min-width: 767px) {
    .shop_item_list article .free_shipping {
        display:flex;
        justify-content: center;
        align-items: center
    }
}

@media screen and (max-width: 767px) {
    .shop_item_list article .free_shipping {
        top:-45px
    }
}

.shop_item_list article .free_shipping img {
    display: inline-block;
    width: 22px;
    height: auto;
    margin: 0 5px 0 0;
    position: relative
}

@media screen and (max-width: 767px) {
    .shop_item_list article .free_shipping img {
        top:3px
    }
}

.shop_item_list article .free_shipping .green {
    color: #6184ab;
    display: inline-block;
    font-size: 10px;
    margin-left: 5px
}

@media screen and (max-width: 767px) {
    .shop_item_list article .free_shipping .green {
        display:block;
        margin-left: 0
    }
}

@media screen and (min-width: 767px) {
    .shop_item_list article {
        width:22%;
        margin: 0 0 40px
    }
}

@media screen and (max-width: 767px) {
    .shop_item_list article {
        width:calc( 50% - 10px );
        margin: 0 0 20px
    }
}

.shop_item_list article.item_1 {
    width: 100%;
    margin: 0 0 150px
}

@media screen and (max-width: 767px) {
    .shop_item_list article.item_1 {
        margin:0 0 25vw
    }
}

.shop_item_list article.item_1 a {
    width: 100%
}

@media screen and (min-width: 767px) {
    .shop_item_list article.item_1 a {
        display:flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center
    }
}

@media screen and (min-width: 767px) {
    .shop_item_list article.item_1 a .item_pic {
        width:48%
    }
}

@media screen and (max-width: 767px) {
    .shop_item_list article.item_1 a .item_pic {
        width:100%
    }
}

.shop_item_list article.item_1 a .item_pic #item_slide {
    width: 100%
}

.shop_item_list article.item_1 a .item_pic #item_slide .slider .slick-list {
    background-color:#667f9b
}

.shop_item_list article.item_1 a .item_pic #item_slide .slider li {
    outline: none
}

.shop_item_list article.item_1 a .item_pic #item_slide .slider li img {
    width: 100%
}

.shop_item_list article.item_1 a .item_pic #item_slide button {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.shop_item_list article.item_1 a .item_pic #item_slide .slide-dots {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px
}

@media screen and (max-width: 767px) {
    .shop_item_list article.item_1 a .item_pic #item_slide .slide-dots {
        margin-top:10px
    }
}

.shop_item_list article.item_1 a .item_pic #item_slide .slide-dots li {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin: 0 7px
}

.shop_item_list article.item_1 a .item_pic #item_slide .slide-dots li button {
    position: relative;
    text-indent: -9999px;
    cursor: pointer
}

.shop_item_list article.item_1 a .item_pic #item_slide .slide-dots li button:before {
    content: '';
    text-indent: 0px;
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background-color: #AAA;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    border-radius: 100%
}

.shop_item_list article.item_1 a .item_pic #item_slide .slide-dots li.slick-active button:before {
    background-color: #6184ab
}

.shop_item_list article.item_1 a .item_pic #item_slide .thumbnail-list {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: flex-start
}

.shop_item_list article.item_1 a .item_pic #item_slide .thumbnail-list li {
    width: 16.6666%;
    opacity: 0.7;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

.shop_item_list article.item_1 a .item_pic #item_slide .thumbnail-list li.thumbnail-current {
    opacity: 1
}

.shop_item_list article.item_1 a .txt {
    transition: color .4s ease
}

@media screen and (min-width: 767px) {
    .shop_item_list article.item_1 a .txt {
        width:48%
    }
}

@media screen and (max-width: 767px) {
    .shop_item_list article.item_1 a .txt {
        width:100%
    }
}

.shop_item_list article.item_1 a .txt .item_name {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.07em;
    line-height: 1.7;
    margin: 0 0 25px;
    transition: color .4s ease
}

@media screen and (max-width: 767px) {
    .shop_item_list article.item_1 a .txt .item_name {
        font-size:4vw;
        margin: 0 0 3vw
    }
}

.shop_item_list article.item_1 a .txt .copy {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.07em;
    line-height: 1.7;
    margin: 0 0 25px;
    transition: color .4s ease
}

@media screen and (max-width: 767px) {
    .shop_item_list article.item_1 a .txt .copy {
        font-size:3.5vw;
        margin: 0 0 3vw
    }
}

.shop_item_list article.item_1 a .txt .volume,.shop_item_list article.item_1 a .txt .type {
    font-size: 12px
}

.shop_item_list article.item_1 a .txt .volume span,.shop_item_list article.item_1 a .txt .type span {
    display: inline-block;
    font-size: 10px;
    margin-right: 10px
}

@media screen and (max-width: 767px) {
    .shop_item_list article.item_1 a .txt .volume,.shop_item_list article.item_1 a .txt .type {
        font-size:10px
    }
}

.shop_item_list article.item_1 a .txt .price {
    line-height: 1;
    margin: 10px 0;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 20px 0 30px
}

@media screen and (max-width: 767px) {
    .shop_item_list article.item_1 a .txt .price {
        margin:4vw 0 3vw
    }
}

.shop_item_list article.item_1 a .txt .price .price_wrap .price_set {
    margin-bottom: 10px
}

.shop_item_list article.item_1 a .txt .price .price_wrap .price_set:last-child {
    margin-bottom: 0
}

.shop_item_list article.item_1 a .txt .price .price_wrap .p_volume {
    clear: both;
    display: inline-block;
    font-size: 17px;
    font-weight: 600;
    margin: 0 10px 0 0
}

@media screen and (max-width: 767px) {
    .shop_item_list article.item_1 a .txt .price .price_wrap .p_volume {
        font-size:12px
    }
}

.shop_item_list article.item_1 a .txt .price .price_wrap .p_volume.none {
    width: 0;
    margin: 0 0 10px;
    padding: 0
}

@media screen and (max-width: 767px) {
    .shop_item_list article.item_1 a .txt .price .price_wrap .p_volume.none {
        display:none
    }
}

.shop_item_list article.item_1 a .txt .price .price_wrap .p_price {
    display: inline-block;
    font-size: 20px;
    font-weight: 600
}

.shop_item_list article.item_1 a .txt .price .price_wrap .p_price .sp_price {
    color: #6184ab;
    display: inline-block
}

.shop_item_list article.item_1 a .txt .price .price_wrap .p_price .regular_price {
    color: #999;
    display: inline-block;
    font-size: 15px;
    margin-left: 10px
}

@media screen and (max-width: 767px) {
    .shop_item_list article.item_1 a .txt .price .price_wrap .p_price .regular_price {
        font-size:12px
    }
}

.shop_item_list article.item_1 a .txt .price .price_wrap .p_price .regular_price .yen {
    font-size: 12px
}

@media screen and (max-width: 767px) {
    .shop_item_list article.item_1 a .txt .price .price_wrap .p_price .regular_price .yen {
        font-size:11px
    }
}

.shop_item_list article.item_1 a .txt .price .price_wrap .p_price .regular_price .tax {
    font-size: 11px;
    padding-left: 3px;
    font-weight: 600
}

@media screen and (max-width: 767px) {
    .shop_item_list article.item_1 a .txt .price .price_wrap .p_price .regular_price .tax {
        font-size:10px
    }
}

.shop_item_list article.item_1 a .txt .price .price_wrap .p_price .label {
    color: #FFF;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    height: 24px;
    line-height: 24px;
    background-color: #6184ab;
    padding: 0 5px;
    margin: 0 10px 0 0
}

@media screen and (max-width: 767px) {
    .shop_item_list article.item_1 a .txt .price .price_wrap .p_price .label {
        font-size:11px;
        height: 20px;
        line-height: 20px;
        margin: 0 6px 0 0
    }
}

.shop_item_list article.item_1 a .txt .price .price_wrap .p_price .yen {
    font-size: 17px
}

.shop_item_list article.item_1 a .txt .price .price_wrap .p_price .tax {
    font-weight: 500;
    font-size: 11px;
    padding-left: 8px
}

@media screen and (max-width: 767px) {
    .shop_item_list article.item_1 a .txt .price .price_wrap .p_price {
        font-size:15px
    }

    .shop_item_list article.item_1 a .txt .price .price_wrap .p_price .yen {
        font-size: 13px
    }

    .shop_item_list article.item_1 a .txt .price .price_wrap .p_price .tax {
        font-size: 11px
    }
}

.shop_item_list article.item_1 a .txt .free_shipping_attention {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.7;
    position: relative;
    top: 1px;
    margin: 20px 0
}

@media screen and (max-width: 767px) {
    .shop_item_list article.item_1 a .txt .free_shipping_attention {
        font-size:11px;
        margin: 3vw 0
    }
}

.shop_item_list article.item_1 a .txt .free_shipping_attention .single_only {
    display: none
}

.shop_item_list article.item_1 a .txt .free_shipping {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    top: 1px;
    margin-top: 20px
}

.shop_item_list article.item_1 a .txt .free_shipping .ico {
    display: inline-block;
    margin-right: 8px;
    width: 29px
}

@media screen and (max-width: 767px) {
    .shop_item_list article.item_1 a .txt .free_shipping {
        font-size:13px;
        margin-top: 15px
    }
}

.shop_item_list article.item_1 a .txt .description {
    width: 100%;
    margin-top: 30px
}

.shop_item_list article.item_1 a .txt .description p {
    font-size: 13px;
    letter-spacing: 0.05em;
    line-height: 2;
    text-align: justify;
    margin-bottom: 10px
}

.shop_item_list article.item_1 a .txt .description p:last-child {
    margin-bottom: 0
}

@media screen and (min-width: 1080px) {
    .shop_item_list article a .item_pic #item_slide .slick-list::before,.shop_item_list article a figure::before {
        color:#FFF;
        content: "READ MORE";
        display: flex;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.08em;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 2;
        -moz-transform: translate(0, 5px);
        -ms-transform: translate(0, 5px);
        -webkit-transform: translate(0, 5px);
        transform: translate(0, 5px);
        -moz-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1)
    }

    .shop_item_list article a .item_pic #item_slide .slick-list::after,.shop_item_list article a figure::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        background-color: #6184ab;
        z-index: 1;
        mix-blend-mode: multiply;
        -moz-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1)
    }

    .shop_item_list article a:hover .item_pic #item_slide .slick-list::before,.shop_item_list article a:hover figure::before {
        opacity: 1;
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    .shop_item_list article a:hover .item_pic #item_slide .slick-list::after,.shop_item_list article a:hover figure::after {
        opacity: 0.5
    }

    .shop_item_list article a:hover .txt .item_name,.shop_item_list article a:hover .txt .copy,.shop_item_list article a:hover .txt .price,.shop_item_list article a:hover .txt .volume,.shop_item_list article a:hover .txt .type {
        color: #6184ab
    }
}

.shop_item_list article a figure {
    position: relative
}

.shop_item_list article a .txt {
    text-align: left;
    margin-top: 10px
}

.shop_item_list article a .txt .item_name {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.5;
    margin: 0 0 5px;
    transition: color .4s ease
}

@media screen and (max-width: 767px) {
    .shop_item_list article a .txt .item_name {
        font-size:11px
    }
}

.shop_item_list article a .txt .price {
    margin: 0 0 5px;
    transition: color .4s ease
}

.shop_item_list article a .txt .price .price_wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center
}

.shop_item_list article a .txt .price .price_set {
    line-height: 1;
    margin: 0 5px 0 0
}

.shop_item_list article a .txt .price .price_set .p_price,.shop_item_list article a .txt .price .price_set .p_volume {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.5
}

@media screen and (max-width: 767px) {
    .shop_item_list article a .txt .price .price_set .p_price,.shop_item_list article a .txt .price .price_set .p_volume {
        font-size:11px
    }
}

.shop_item_list article a .txt .price .price_set .p_price .tax,.shop_item_list article a .txt .price .price_set .p_volume .tax {
    font-size: 10px;
    padding-left: 3px
}

.shop_item_list article a .txt .price .price_set .p_volume {
    padding-right: 4px
}

.shop_item_list article a .txt .price .price_set .p_volume.none {
    display: none
}

.shop_item_list article a .txt .price .price_set .p_price .sp_price {
    color: #6184ab
}

.shop_item_list article a .txt .price .price_set .p_price .sp_price .label {
    vertical-align: middle;
    padding-right: 5px
}

.shop_item_list article a .txt .price .price_set .p_price .regular_price {
    color: #666
}

.shop_item_list article a .txt .price .price_set .p_price::after {
    content: "/";
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    padding: 0 5px
}

.shop_item_list article a .txt .price .price_set .p_price:last-child::after {
    display: none
}

.shop_item_list article a .txt .volume,.shop_item_list article a .txt .type {
    color: #999;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.7;
    transition: color .4s ease
}

@media screen and (max-width: 767px) {
    .shop_item_list article a .txt .volume,.shop_item_list article a .txt .type {
        display:none
    }
}

@media screen and (min-width: 767px) {
    .shop_single {
        padding-top:80px;
        padding-bottom: 70px
    }
}

.shop_single article.post {
    width: 100%
}

@media screen and (min-width: 767px) {
    .shop_single article.post {
        margin:0 0 100px
    }

    .shop_single article.post .item_wrap {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: flex-start
    }

    .shop_single article.post .item_wrap .item_pic {
        width: 52%
    }

    .shop_single article.post .item_wrap .item_txt {
        width: 48%;
        padding-left: 45px;
        padding-right: 15px
    }
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_pic {
        margin-bottom:7vw
    }

    .shop_single article.post .item_wrap .item_txt {
        padding-right: 4.5vw;
        padding-left: 4.5vw
    }
}

.shop_single article.post .item_wrap {
    margin-bottom: 80px
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap {
        margin-bottom:15vw
    }
}

.shop_single article.post .item_wrap:last-child {
    margin-bottom: 0
}

.shop_single article.post .item_wrap .item_pic #item_slide {
    width: 100%
}

.shop_single article.post .item_wrap .item_pic #item_slide .slider {
    opacity: 0;
    -moz-transition: opacity .4s ease;
    -o-transition: opacity .4s ease;
    -webkit-transition: opacity .4s ease;
    transition: opacity .4s ease
}

.shop_single article.post .item_wrap .item_pic #item_slide .slider.slick-initialized {
    opacity: 1
}

.shop_single article.post .item_wrap .item_pic #item_slide .slider .slick-list {
    background-color: #999
}

.shop_single article.post .item_wrap .item_pic #item_slide .slider li {
    height: 100%;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center
}

.shop_single article.post .item_wrap .item_pic #item_slide .slider li img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    background-color: #fff;
}

.shop_single article.post .item_wrap .item_pic #item_slide .slider li .slid-image {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #999;
    position: relative
}

.shop_single article.post .item_wrap .item_pic #item_slide .slider li .slid-image.youtube {
    cursor: pointer
}

.shop_single article.post .item_wrap .item_pic #item_slide .slider li .slid-image.youtube::before,.shop_single article.post .item_wrap .item_pic #item_slide .slider li .slid-image.youtube::after {
    content: "";
    display: block;
    position: absolute;
    pointer-events: none
}

.shop_single article.post .item_wrap .item_pic #item_slide .slider li .slid-image.youtube::before {
    width: 27%;
    height: 24%;
    top: 38%;
    left: 38%;
    z-index: 2;
    background: url(../img/btn_play.svg) center center no-repeat;
    background-size: contain
}

.shop_single article.post .item_wrap .item_pic #item_slide .slider li .slid-image.youtube::after {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #000;
    opacity: 0.2;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    mix-blend-mode: multiply
}

.shop_single article.post .item_wrap .item_pic #item_slide .slider li .slid-image.youtube:hover::after {
    opacity: 0.4
}

.shop_single article.post .item_wrap .item_pic #item_slide .slider li .slid-image.youtube a {
    display: block;
    width: 100%;
    height: 100%
}

.shop_single article.post .item_wrap .item_pic #item_slide button {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.shop_single article.post .item_wrap .item_pic #item_slide .slide-dots {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_pic #item_slide .slide-dots {
        margin-top:10px
    }
}

.shop_single article.post .item_wrap .item_pic #item_slide .slide-dots li {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin: 0 7px
}

.shop_single article.post .item_wrap .item_pic #item_slide .slide-dots li button {
    position: relative;
    text-indent: -9999px;
    cursor: pointer
}

.shop_single article.post .item_wrap .item_pic #item_slide .slide-dots li button:before {
    content: '';
    text-indent: 0px;
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background-color: #AAA;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    border-radius: 100%
}

.shop_single article.post .item_wrap .item_pic #item_slide .slide-dots li.slick-active button:before {
    background-color: #6184ab
}


.shop_single article.post .item_wrap .item_pic #item_slide .thumbnail-list .thumbnail-item img {
    aspect-ratio: 1;
    object-fit: contain;
    background-color: #fff;
}

.shop_single article.post .item_wrap .item_pic #item_slide .thumbnail-list {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: flex-start
}

.shop_single article.post .item_wrap .item_pic #item_slide .thumbnail-list li {
    width: 16.6666666%;
    opacity: 0.5;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    position: relative;
    cursor: pointer
}

.shop_single article.post .item_wrap .item_pic #item_slide .thumbnail-list li::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #6184ab;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    -moz-transition: opacity 500ms ease;
    -o-transition: opacity 500ms ease;
    -webkit-transition: opacity 500ms ease;
    transition: opacity 500ms ease;
    mix-blend-mode: multiply
}

.shop_single article.post .item_wrap .item_pic #item_slide .thumbnail-list li.thumbnail-current {
    opacity: 1
}

.shop_single article.post .item_wrap .item_pic #item_slide .thumbnail-list li.thumbnail-current::before {
    opacity: 0.1
}

.shop_single article.post .item_wrap .item_pic #item_slide .thumbnail-list li.thumbnail-current .slid-image.youtube::after {
    opacity: 0.5;
    background-color: #6184ab
}

.shop_single article.post .item_wrap .item_pic #item_slide .thumbnail-list li .slid-image {
    width: 100%;
    height: 100%;
    position: relative
}

.shop_single article.post .item_wrap .item_pic #item_slide .thumbnail-list li .slid-image.youtube::before,.shop_single article.post .item_wrap .item_pic #item_slide .thumbnail-list li .slid-image.youtube::after {
    content: "";
    display: block;
    position: absolute;
    pointer-events: none
}

.shop_single article.post .item_wrap .item_pic #item_slide .thumbnail-list li .slid-image.youtube::before {
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;
    z-index: 2;
    background: url(../img/thumb_movie.svg) center center no-repeat;
    background-size: contain
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_pic #item_slide .thumbnail-list li .slid-image.youtube::before {
        width:70%;
        height: 70%;
        top: 15%;
        left: 15%
    }
}

.shop_single article.post .item_wrap .item_pic #item_slide .thumbnail-list li .slid-image.youtube::after {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #000;
    opacity: 0.2;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    mix-blend-mode: multiply
}

@media screen and (min-width: 1080px) {
    .shop_single article.post .item_wrap .item_pic #item_slide .thumbnail-list li:hover {
        opacity:0.9
    }
}

.shop_single article.post .item_wrap .item_txt {
    text-align: left;
    letter-spacing: 0.07em
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop {
    width: 100%;
    margin: 20px auto
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type1 table {
    width: 100%;
    min-height: 40px
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type1 table tr {
    width: 100%
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type1 table tr {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type1 table tr td {
    height: 40px
}

@media screen and (min-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .cart_futureshop.type1 table tr td {
        width:calc( 50% - 5px )
    }
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .cart_futureshop.type1 table tr td {
        width:100%
    }
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type1 table tr td:first-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background-color: #f2f2f2;
    font-size: 10px;
    padding: 0 15px
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type1 table tr td:first-child input {
    width: calc( 100% - 50px );
    height: 40px;
    font-family: YakuHanJP,Jost,Roboto,"Koburina Gothic W6 JIS2004","Koburina Gothic W3 JIS2004",FP-KoburinaGoStdN-W6,FP-KoburinaGoStdN-W3,YuGothic,"Yu Gothic Medium","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    background-color: #f2f2f2;
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .cart_futureshop.type1 table tr td:first-child input {
        width:calc( 100% - 40px )
    }
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type1 table tr td:last-child {
    width: 100%;
    height: 50px;
    margin-top: 10px;
    position: relative
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type1 table tr td:last-child button {
    width: 100%;
    height: 50px;
    background-color: #000;
    color: #FFF;
    text-align: center
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type1 table tr td:last-child::before {
    content: "";
    display: block;
    width: 100%;
    height: 18px;
    background: url(../img/btn_buy.svg) center center no-repeat;
    background-size: contain;
    position: absolute;
    top: 16px;
    left: 0;
    z-index: 5;
    pointer-events: none
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type1 table tr td:last-child::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    pointer-events: none;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type1 table tr td:last-child:hover::after {
    background-color: #6184ab
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type2 form>table {
    width: 100%;
    min-height: 40px
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type2 form>table>tbody tr {
    width: 100%
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type2 form>table>tbody tr td table {
    width: 100%;
    border-right: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
    margin: 0 0 20px
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type2 form>table>tbody tr td table tr td {
    width: 50%;
    border-top: 1px solid #DDD;
    border-left: 1px solid #DDD;
    padding: 7px 14px;
    font-size: 12px;
    text-align: left
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type2 form>table>tbody tr td table tr td:last-child {
    background-color: #f2f2f2;
    text-align: center
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type2 form>table>tbody>tr:last-child {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type2 form>table>tbody>tr:last-child td {
    height: 40px
}

@media screen and (min-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .cart_futureshop.type2 form>table>tbody>tr:last-child td {
        width:calc( 50% - 5px )
    }
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .cart_futureshop.type2 form>table>tbody>tr:last-child td {
        width:100%
    }
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type2 form>table>tbody>tr:last-child td:first-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background-color: #f2f2f2;
    font-size: 10px;
    padding: 0 15px
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type2 form>table>tbody>tr:last-child td:first-child input {
    width: calc( 100% - 50px );
    height: 40px;
    font-family: YakuHanJP,Jost,Roboto,"游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo",sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: center
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .cart_futureshop.type2 form>table>tbody>tr:last-child td:first-child input {
        width:calc( 100% - 40px )
    }
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type2 form>table>tbody>tr:last-child td:last-child {
    width: 100%;
    height: 50px;
    margin-top: 10px;
    position: relative
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type2 form>table>tbody>tr:last-child td:last-child button {
    width: 100%;
    height: 50px;
    background-color: #000;
    color: #FFF;
    text-align: center
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type2 form>table>tbody>tr:last-child td:last-child::before {
    content: "";
    display: block;
    width: 100%;
    height: 18px;
    background: url(../img/btn_buy.svg) center center no-repeat;
    background-size: contain;
    position: absolute;
    top: 16px;
    left: 0;
    z-index: 5;
    pointer-events: none
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type2 form>table>tbody>tr:last-child td:last-child::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    pointer-events: none;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

.shop_single article.post .item_wrap .item_txt .cart_futureshop.type2 form>table>tbody>tr:last-child td:last-child:hover::after {
    background-color: #6184ab
}

.shop_single article.post .item_wrap .item_txt .cartjs_box {
    margin: 20px 0 !important;
    padding: 0 !important;
    border: none !important
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .cartjs_box {
        margin:20px 0 0 !important
    }
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block {
    padding: 0 !important
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl {
    display: block !important;
    margin-bottom: 15px !important
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_product_num,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_option {
    width: 100%;
    margin: 0 auto 10px;
    font-family: YakuHanJP,Jost,Roboto,"游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo",sans-serif;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    background-color: #f2f2f2
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_product_num:last-child,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_option:last-child {
    margin-bottom: 0
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_product_num th,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_product_num td,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_option th,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_option td {
    display: block;
    height: 40px;
    line-height: 40px
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_product_num th,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_option th {
    color: #000;
    width: 55px !important;
    text-align: center !important;
    font-size: 10px;
    letter-spacing: 0.1em;
    padding: 0 !important;
    background-color: transparent !important
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_product_num td,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_option td {
    color: #000;
    width: calc( 100% - 65px ) !important;
    text-align: center;
    font-size: 14px;
    font-family: YakuHanJP,Jost,Roboto,"游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo",sans-serif;
    letter-spacing: 0.1em;
    padding: 0 !important;
    position: relative
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_product_num td input,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_product_num td select,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_option td input,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_option td select {
    color: #000 !important;
    width: 100% !important;
    height: 40px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: YakuHanJP,Jost,Roboto,"游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo",sans-serif;
    font-weight: 600;
    text-align: center;
    padding: 0 !important;
    background-color: transparent !important;
    line-height: 40px !important;
    border: none !important;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    outline: none;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    box-sizing: border-box
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_product_num td select,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_option td select {
    padding-right: 30px !important;
    font-size: 12px !important;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

@media screen and (min-width: 1080px) {
    .shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_product_num td:hover input,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_product_num td:hover select,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_option td:hover input,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_option td:hover select {
        color:#6184ab !important
    }

    .shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_product_num td:hover::after,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_option td:hover::after {
        border-color: #6184ab !important
    }
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_block .cartjs_dtl_tbl tbody .cartjs_option td::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 14px;
    margin-top: -4px;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table {
    margin: 0 0 10px
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table {
    display: block;
    width: 100% !important;
    margin: 0 !important
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr {
    display: block;
    width: calc( 50% - 5px );
    height: 42px;
    line-height: 42px;
    background-color: #f2f2f2
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr.cartjs_product_num,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr.cartjs_option {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr.cartjs_product_num th,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr.cartjs_product_num td,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr.cartjs_option th,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr.cartjs_option td {
    display: block;
    height: 40px
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr.cartjs_product_num th,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr.cartjs_option th {
    color: #000;
    width: 60px;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0.1em;
    padding: 0 !important
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr.cartjs_product_num td,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr.cartjs_option td {
    color: #000;
    width: calc( 100% - 60px );
    text-align: center;
    font-size: 15px;
    font-family: YakuHanJP,Jost,Roboto,"游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo",sans-serif;
    letter-spacing: 0.1em;
    padding: 0 !important;
    position: relative
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr.cartjs_product_num td input,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr.cartjs_product_num td select,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr.cartjs_option td input,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr.cartjs_option td select {
    color: #000 !important;
    width: 100% !important;
    height: 40px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: YakuHanJP,Jost,Roboto,"游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic","Noto Sans Japanese","Source Sans Pro","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo",sans-serif;
    font-weight: 600;
    text-align: center;
    padding: 0 !important;
    background-color: transparent !important;
    line-height: 40px !important;
    border: none !important;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    outline: none;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr.cartjs_product_num td select,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr.cartjs_option td select {
    text-align: left;
    font-size: 12px !important;
    padding-right: 30px !important;
    box-sizing: border-box
}

@media screen and (min-width: 1080px) {
    .shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr.cartjs_product_num td:hover input,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr.cartjs_product_num td:hover select,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr.cartjs_option td:hover input,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr.cartjs_option td:hover select {
        color:#6184ab !important
    }

    .shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr.cartjs_product_num td:hover::after,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr.cartjs_option td:hover::after {
        border-color: #6184ab !important
    }
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_product_table table tbody tr.cartjs_option td::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 14px;
    margin-top: -4px;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_buy {
    width: 100% !important;
    position: relative;
    margin: 0 !important;
    background-color: #000
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_buy p {
    width: 100% !important;
    height: 50px !important;
    position: relative
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_buy p input {
    width: 100% !important;
    height: 50px !important;
    background-color: #000 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    opacity: 0 !important
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_buy p::before,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_buy p::after {
    content: "";
    display: block;
    pointer-events: none
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_buy p::before {
    width: calc( 100% - 3px );
    height: 18px;
    background: url(../img/btn_buy.svg) center center no-repeat;
    background-size: contain;
    position: absolute;
    top: 16px;
    left: -3px;
    z-index: 5
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_buy p::after {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 4;
    background: linear-gradient(25deg, #43633c,#44725a,#20362d);
    background-size: 300% 300%;
    -webkit-animation: AnimationName 10s ease infinite;
    -moz-animation: AnimationName 10s ease infinite;
    animation: AnimationName 10s ease infinite;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

@media screen and (min-width: 1080px) {
    .shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_buy p:hover::after {
        opacity:1
    }
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_cart_in {
    width: 100% !important;
    position: relative;
    margin: 0 !important;
    background-color: #000
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_cart_in input {
    width: 100% !important;
    height: 50px !important;
    background-color: #000 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    opacity: 0 !important
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_cart_in::before,.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_cart_in::after {
    content: "";
    display: block;
    pointer-events: none
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_cart_in::before {
    width: calc( 100% - 3px );
    height: 18px;
    background: url(../img/btn_buy.svg) center center no-repeat;
    background-size: contain;
    position: absolute;
    top: 16px;
    left: -3px;
    z-index: 5
}

.shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_cart_in::after {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 4;
    background: linear-gradient(25deg, #43633c,#44725a,#20362d);
    background-size: 300% 300%;
    -webkit-animation: AnimationName 10s ease infinite;
    -moz-animation: AnimationName 10s ease infinite;
    animation: AnimationName 10s ease infinite;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.item_brand_name{
	font-size: 20px;
    line-height: 1.3em;

}

@media screen and (min-width: 1080px) {
    .shop_single article.post .item_wrap .item_txt .cartjs_box .cartjs_cart_in:hover::after {
        opacity:1
    }
}

.shop_single article.post .item_wrap .item_txt .item_name {
    font-size: 1.6em;
    font-weight: 600;
    letter-spacing: 0.07em;
    line-height: 1.7;
    margin: 0px 0 5px
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .item_name {
        font-size:25px;
        margin: 0 0 0vw
    }
}

.shop_single article.post .item_wrap .item_txt .copy {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.07em;
    line-height: 1.7;
    margin: 0 0 25px;
    transition: color .4s ease
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .copy {
        font-size:3.5vw;
        margin: 0 0 4vw
    }
}

.shop_single article.post .item_wrap .item_txt .volume,.shop_single article.post .item_wrap .item_txt .type {
    font-size: 12px
}

.shop_single article.post .item_wrap .item_txt .volume span,.shop_single article.post .item_wrap .item_txt .type span {
    display: inline-block;
    font-size: 10px;
    margin-right: 10px
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .volume span,.shop_single article.post .item_wrap .item_txt .type span {
        margin-right:7px
    }
}

.shop_single article.post .item_wrap .item_txt .price {
    line-height: 1;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 5px 0 5px;
    
}

.product_meta{
    margin: 20px 0 15px
    }_
@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .price {
        margin:0 0 0
    }
    .product_meta{
    margin:2vw 0 2vw;
    }_
}

.shop_single article.post .item_wrap .item_txt .price .price_wrap .price_set {
    margin-bottom: 10px
}

.shop_single article.post .item_wrap .item_txt .price .price_wrap .price_set:last-child {
    margin-bottom: 0
}

.shop_single article.post .item_wrap .item_txt .price .price_wrap .p_volume {
    clear: both;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    margin: 0 10px 0 0
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .price .price_wrap .p_volume {
        font-size:12px
    }
}

.shop_single article.post .item_wrap .item_txt .price .price_wrap .p_volume.none {
    width: 0;
    margin: 0 0 10px;
    padding: 0
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .price .price_wrap .p_volume.none {
        display:none
    }
}

.shop_single article.post .item_wrap .item_txt .price .price_wrap .p_price {
    display: inline-block;
    font-size: 20px;
    font-weight: 600
}

.shop_single article.post .item_wrap .item_txt .price .price_wrap .p_price .sp_price {
    color: #6184ab;
    display: inline-block
}

.shop_single article.post .item_wrap .item_txt .price .price_wrap .p_price .regular_price {
    color: #999;
    display: inline-block;
    font-size: 15px;
    margin-left: 10px
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .price .price_wrap .p_price .regular_price {
        font-size:4.2vw
    }
}

.shop_single article.post .item_wrap .item_txt .price .price_wrap .p_price .regular_price .yen {
    font-size: 12px
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .price .price_wrap .p_price .regular_price .yen {
        font-size:10px
    }
}

.shop_single article.post .item_wrap .item_txt .price .price_wrap .p_price .regular_price .tax {
    font-size: 11px;
    padding-left: 3px;
    font-weight: 600
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .price .price_wrap .p_price .regular_price .tax {
        font-size:10px
    }
}

.shop_single article.post .item_wrap .item_txt .price .price_wrap .p_price .label {
    color: #FFF;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    height: 24px;
    line-height: 24px;
    background-color: #6184ab;
    padding: 0 5px;
    margin: 0 10px 0 0
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .price .price_wrap .p_price .label {
        font-size:11px;
        height: 20px;
        line-height: 20px;
        margin: 0 6px 0 0
    }
}

.shop_single article.post .item_wrap .item_txt .price .price_wrap .p_price .yen {
    font-size: 17px
}

.shop_single article.post .item_wrap .item_txt .price .price_wrap .p_price .tax {
    font-weight: 500;
    font-size: 11px;
    padding-left: 8px
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .price .price_wrap .p_price {
        font-size:22px
    }
    .shop_single article.post .item_wrap .item_txt .price{
        margin: 8px 0 10px;
    }

    .shop_single article.post .item_wrap .item_txt .price .price_wrap .p_price .yen {
        font-size: 13px
    }

    .shop_single article.post .item_wrap .item_txt .price .price_wrap .p_price .tax {
        font-size: 11px
    }
}

.shop_single article.post .item_wrap .item_txt .maintenance {
    color: #6184ab;
    border: 1px solid #6184ab;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.7;
    position: relative;
    top: 1px;
    margin-top: 20px;
    padding: 15px
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .maintenance {
        font-size:2.7vw;
        margin-top: 20px;
        padding: 3vw
    }
}

.shop_single article.post .item_wrap .item_txt .soldout {
    color: #FFF;
    width: 100%;
    height: 50px;
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 50px;
    text-align: center;
    background-color: #BBB;
    margin: 20px 0
}

@media screen and (min-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .soldout {
        font-size:18px;
        max-width: 350px
    }
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .soldout {
        font-size:16px;
        height: 44px;
        line-height: 44px
    }
}

.shop_single article.post .item_wrap .item_txt .free_shipping_attention {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.7;
    position: relative;
    top: 1px;
    margin-top: 20px
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .free_shipping_attention {
        font-size:2.7vw;
        margin-top: 10px
    }
}

.shop_single article.post .item_wrap .item_txt .free_shipping_attention a {
    color: #6184ab;
    text-decoration: underline;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (min-width: 1080px) {
    .shop_single article.post .item_wrap .item_txt .free_shipping_attention a:hover {
        color:#999
    }
}

.shop_single article.post .item_wrap .item_txt .free_shipping_attention+.free_shipping_attention {
    margin-top: 10px
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .free_shipping_attention+.free_shipping_attention {
        margin-top:8px
    }
}

.shop_single article.post .item_wrap .item_txt .free_shipping {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    top: 1px;
    margin-top: 20px
}

.shop_single article.post .item_wrap .item_txt .free_shipping .ico {
    display: inline-block;
    margin-right: 8px;
    width: 29px
}

.shop_single article.post .item_wrap .item_txt .free_shipping .green {
    color: #6184ab;
    display: inline-block;
    letter-spacing: 0.05em;
    font-size: 12px;
    margin-left: 5px
}

@media screen and (max-width: 767px) {
    .shop_single article.post .item_wrap .item_txt .free_shipping {
        font-size:13px;
        margin-top: 15px
    }

    .shop_single article.post .item_wrap .item_txt .free_shipping .green {
        font-size: 11px
    }
}

.shop_single article.post .item_wrap .item_txt .description {
    width: 100%;
    margin-top: 10px
}

.shop_single article.post .item_wrap .item_txt .description p {
    font-size: 13px;
    letter-spacing: 0.05em;
    line-height: 2;
    text-align: justify;
    margin-bottom: 10px
}

.shop_single article.post .item_wrap .item_txt .description p:last-child {
    margin-bottom: 0
}

.shop_single article.post .item_wrap .item_txt .description p a {
    color: #6184ab;
    text-decoration: underline;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (min-width: 1080px) {
    .shop_single article.post .item_wrap .item_txt .description p a:hover {
        color:#999
    }
}

@-webkit-keyframes AnimationName {
    0% {
        background-position: 51% 0%
    }

    50% {
        background-position: 50% 100%
    }

    100% {
        background-position: 51% 0%
    }
}

@-moz-keyframes AnimationName {
    0% {
        background-position: 51% 0%
    }

    50% {
        background-position: 50% 100%
    }

    100% {
        background-position: 51% 0%
    }
}

@keyframes AnimationName {
    0% {
        background-position: 51% 0%
    }

    50% {
        background-position: 50% 100%
    }

    100% {
        background-position: 51% 0%
    }
}

.related_articles,.related_items {
    text-align: left;
    margin-top: 70px
}

.single-article .related_articles,.special-single .related_articles,.single-article .related_items,.special-single .related_items {
    max-width: 700px;
    margin: 100px auto 0;
    padding-top: 50px;
    border-top: 1px solid #9db3cd
}

@media screen and (max-width: 767px) {
    .single-article .related_articles,.special-single .related_articles,.single-article .related_items,.special-single .related_items {
        border-top:1px solid #EEE;
        padding-left: 4.5vw;
        padding-right: 4.5vw;
        margin: 13vw auto;
        padding-top: 13vw
    }
}

.single-article .related_articles .sub_title,.special-single .related_articles .sub_title,.single-article .related_items .sub_title,.special-single .related_items .sub_title {
    margin: 0 0 30px
}

@media screen and (max-width: 767px) {
    .single-article .related_articles .sub_title,.special-single .related_articles .sub_title,.single-article .related_items .sub_title,.special-single .related_items .sub_title {
        font-size:4vw;
        margin: 0 0 8vw
    }
}

@media screen and (max-width: 767px) {
    .related_articles,.related_items {
        margin-top:8vw;
        padding-top: 10vw;
        border-top: 1px solid #EEE;
        padding-left: 4.5vw;
        padding-right: 4.5vw
    }
}

.related_articles+.yarpp-related .related_items,.related_items+.yarpp-related .related_items {
    margin-top: 20px
}

@media screen and (max-width: 767px) {
    .related_articles+.yarpp-related .related_items,.related_items+.yarpp-related .related_items {
        margin-top:0
    }
}

.related_articles .sub_title,.related_items .sub_title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    margin: 0 0 40px
}

.related_articles .sub_title span,.related_items .sub_title span {
    display: block;
    font-size: 11px;
    letter-spacing: 0.08em;
    padding-top: 10px
}

@media screen and (max-width: 767px) {
    .related_articles .sub_title,.related_items .sub_title {
        font-size:4vw;
        margin: 0 0 8vw
    }

    .related_articles .sub_title span,.related_items .sub_title span {
        font-size: 2.7vw;
        padding-top: 2.7vw
    }
}

.related_articles .col4 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start
}

@media screen and (min-width: 767px) {
    .related_articles .col4::before {
        content:"";
        display: block;
        width: 22%;
        order: 1
    }

    .related_articles .col4::after {
        content: "";
        display: block;
        width: 22%
    }

    .related_articles .col4 article {
        width: 22%;
        margin: 0 0 70px
    }

    .related_articles .col4 article:nth-last-child(1),.related_articles .col4 article:nth-last-child(2),.related_articles .col4 article:nth-last-child(3),.related_articles .col4 article:nth-last-child(4) {
        margin: 0
    }
}

@media screen and (max-width: 767px) {
    .related_articles .col4 article {
        width:calc( 50% - 2.25vw );
        margin: 0 0 4.5vw
    }
}

@media screen and (min-width: 767px) {
    .related_articles .col4 article a figure::before {
        color:#FFF;
        content: "READ MORE";
        display: flex;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.08em;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 2;
        -moz-transform: translate(0, 5px);
        -ms-transform: translate(0, 5px);
        -webkit-transform: translate(0, 5px);
        transform: translate(0, 5px);
        -moz-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1)
    }

    .related_articles .col4 article a figure::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        background-color: #6184ab;
        z-index: 1;
        mix-blend-mode: multiply;
        -moz-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1)
    }
}

.related_articles .col4 article a:hover figure::before {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.related_articles .col4 article a:hover figure::after {
    opacity: 0.5
}

.related_articles .col4 article a:hover .txt {
    color: #6184ab
}

.related_articles .col4 article a:hover .txt h3,.related_articles .col4 article a:hover .txt .tag,.related_articles .col4 article a:hover .txt .date_category,.related_articles .col4 article a:hover .txt .item_name,.related_articles .col4 article a:hover .txt .copy,.related_articles .col4 article a:hover .txt .price,.related_articles .col4 article a:hover .txt .volume,.related_articles .col4 article a:hover .txt .type {
    color: #6184ab
}

.related_articles .col4 article figure {
    position: relative
}

.related_articles .col4 article .txt {
    color: #000;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding-top: 10px;
    text-align: left;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

.related_articles .col4 article .txt h3 {
    font-size: 12px;
    letter-spacing: 0.03em;
    line-height: 1.6;
    text-align: justify;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

.related_articles .col4 article .txt .date_category {
    color: #999;
    font-size: 10px;
    line-height: 1;
    min-height: 11px;
    margin: 0;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

.related_articles .col4 article .txt .date_category span {
    display: inline-block;
    margin: 5px 7px 0 0
}

@media screen and (max-width: 767px) {
    .related_articles .col4 article .txt .date_category {
        width:100%;
        margin: 2px 0 0
    }

    .related_articles .col4 article .txt .date_category span {
        display: inline-block;
        margin: 5px 7px 0 0
    }
}

.related_articles .col4 article .txt .tag {
    color: #999;
    margin: 5px 0 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

.related_articles .col4 article .txt .tag li {
    display: inline-block;
    font-size: 10px;
    margin-right: 6px
}

@media screen and (max-width: 767px) {
    .related_articles .col4 article .txt .tag {
        font-size:2.5vw;
        line-height: 4vw
    }
}

#base2 {
    padding: 195px 70px 80px
}



@media screen and (max-width: 767px) {
    #base2 {
        padding:17vw 4.5vw 20vw
    }
	
	.simple_base #base2 {
        padding:28vw 4.5vw 20vw
    }
}

@media screen and (min-width: 767px) {
    #base2 .entry {
        padding-top:80px
    }
    #base2 .entry.access {
        padding-top:0px!important;
    }
	
	#base2 .entry.access1 {
        padding-top:50px!important;
    }

}

    #base2 .entry.access1 {
        padding-top:50px!important;
    }

#base2 .entry h1 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.5;
    text-align: left;
    opacity: 0;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all 1s ease .4s;
    -o-transition: all 1s ease .4s;
    -webkit-transition: all 1s ease;
    -webkit-transition-delay: .4s;
    transition: all 1s ease .4s
}

@media screen and (max-width: 767px) {
    #base2 .entry h1 {
        width:100%;
        font-size: 4vw
    }
}

.load #base2 .entry h1 {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

#base2 .entry .entry_content {
    opacity: 0;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all 1s ease .6s;
    -o-transition: all 1s ease .6s;
    -webkit-transition: all 1s ease;
    -webkit-transition-delay: .6s;
    transition: all 1s ease .6s
}

.load #base2 .entry .entry_content {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.ochasuru_lab_top .ochasuru_lab_cover {
    width: 100%;
    background: url(../img/cover_ochasuru_lab.jpg) center center no-repeat;
    background-size: cover;
    position: relative
}

.ochasuru_lab_top .ochasuru_lab_cover::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.05);
    position: absolute;
    top: 0;
    left: 0
}

@media screen and (min-width: 767px) {
    .ochasuru_lab_top .ochasuru_lab_cover {
        height:calc( 100vh - 150px );
        min-height: 600px;
        max-height: 700px;
        margin: 0 0 65px
    }
}

@media screen and (max-width: 767px) {
    .ochasuru_lab_top .ochasuru_lab_cover {
        height:60vw;
        margin: 0 0 7.5vw
    }
}

@media screen and (min-width: 767px) {
    .ochasuru_lab_top .ochasuru_lab_logo {
        width:390px;
        margin: 0 auto 55px
    }
}

@media screen and (max-width: 767px) {
    .ochasuru_lab_top .ochasuru_lab_logo {
        width:50%;
        margin: 0 auto 7.5vw
    }
}

.ochasuru_lab_top .ochasuru_lab_logo svg {
    width: 100%;
    fill: #00a748
}

.ochasuru_lab_top .lead {
    width: 100%;
    position: relative
}

@media screen and (min-width: 767px) {
    .ochasuru_lab_top .lead {
        display:flex;
        justify-content: center;
        align-items: center;
        margin: 55px auto 100px
    }
}

@media screen and (max-width: 767px) {
    .ochasuru_lab_top .lead {
        width:91vw;
        margin: 0 auto 15vw
    }
}

.ochasuru_lab_top .lead p {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 2.4;
    text-align: left;
    margin-top: 15px;
    margin-bottom: 15px
}

.ochasuru_lab_top .lead p .sc {
    position: absolute
}

.ochasuru_lab_top .lead p a {
    color: #00A748;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 767px) {
    .ochasuru_lab_top .lead p a:hover {
        color:#999
    }
}

@media screen and (max-width: 767px) {
    .ochasuru_lab_top .lead p {
        font-size:12px;
        line-height: 2.2;
        margin-top: 0;
        margin-bottom: 10px
    }
}

@media screen and (min-width: 767px) {
    #ochasuru_mv {
        width:100%;
        height: calc( 100vh - 70px );
        max-height: 780px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 150px;
        padding-right: 50px
    }
}

@media screen and (max-width: 767px) {
    #ochasuru_mv {
        margin-bottom:20vw
    }
}

@media screen and (min-width: 767px) {
    #ochasuru_mv .mv {
        width:calc( 50% - 75px );
        height: calc( 100vh - 70px );
        max-height: 780px;
        background: url(../img/cover_ochasuru_pc.jpg) center center no-repeat;
        background-size: cover
    }
}

@media screen and (max-width: 767px) {
    #ochasuru_mv .mv {
        width:100%;
        height: 70vw;
        background: url(../img/cover_ochasuru_sp.jpg) center center no-repeat;
        background-size: cover
    }
}

@media screen and (min-width: 767px) {
    #ochasuru_mv h1 {
        position:relative;
        left: 12px;
        top: -12px
    }

    #ochasuru_mv h1 svg {
        width: 60px;
        margin: 0 auto
    }
}

@media screen and (max-width: 767px) {
    #ochasuru_mv h1 svg {
        width:50%;
        margin: 8vw auto
    }
}

#ochasuru_mv .lead {
    position: relative
}

@media screen and (min-width: 767px) {
    #ochasuru_mv .lead {
        width:calc( 50% - 75px )
    }
}

@media screen and (max-width: 767px) {
    #ochasuru_mv .lead {
        width:91vw;
        margin: 0 auto
    }
}

#ochasuru_mv .lead p {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 2.4;
    text-align: left;
    margin-top: 15px;
    margin-bottom: 15px
}

#ochasuru_mv .lead p .sc {
    position: absolute
}

#ochasuru_mv .lead p a {
    color: #00A748;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 767px) {
    #ochasuru_mv .lead p a:hover {
        color:#999
    }
}

@media screen and (max-width: 767px) {
    #ochasuru_mv .lead p {
        font-size:12px;
        line-height: 2.2;
        margin-top: 0;
        margin-bottom: 10px
    }
}

@media screen and (min-width: 767px) {
    .single-ochasuru>.w_1500 {
        display:flex;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;
        padding-right: 50px;
        padding-left: 50px
    }
}

.single-ochasuru #ochasuru_cover {
    width: 100%;
    opacity: 0;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

@media screen and (min-width: 767px) {
    .single-ochasuru #ochasuru_cover {
        position:fixed;
        top: 0;
        right: 0
    }
}

@media screen and (min-width: 767px) {
    .single-ochasuru #ochasuru_cover .ochasuru_cover_wrap {
        position:absolute;
        width: calc( ( 100% - 270px ) / 2 - 50px );
        height: 100vh;
        top: 0;
        right: 270px
    }
}

@media screen and (min-width: 767px) and (min-width: 1500px) {
    .single-ochasuru #ochasuru_cover .ochasuru_cover_wrap {
        right:calc( (100% - 1500px) / 2 + 270px )
    }
}

@media screen and (min-width: 1500px) {
    .single-ochasuru #ochasuru_cover .ochasuru_cover_wrap {
        width:calc( ( 1500px - 270px ) / 2 - 50px )
    }
}

@media screen and (max-width: 767px) {
    .single-ochasuru #ochasuru_cover .ochasuru_cover_wrap {
        width:100%;
        height: 150vw;
        margin-bottom: 10vw
    }
}

.load .single-ochasuru #ochasuru_cover {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

@media screen and (min-width: 767px) {
    .load .single-ochasuru #ochasuru_cover.active {
        opacity:0;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -webkit-transition: all .5s ease;
        transition: all .5s ease
    }
}

@media screen and (min-width: 767px) {
    .single-ochasuru .entry {
        width:50%;
        padding-top: 180px
    }
}

@media screen and (max-width: 767px) {
    .single-ochasuru .entry {
        text-align:center
    }
}

@media screen and (max-width: 1080px) {
    .single-ochasuru .entry .head_title,.single-ochasuru .entry .entry_content,.single-ochasuru .entry .entry_footer {
        text-align:left
    }
}

.single-ochasuru .entry .head_title {
    font-weight: 600;
    margin: 0 auto 50px
}

@media screen and (max-width: 767px) {
    .single-ochasuru .entry .head_title {
        width:91vw;
        margin-bottom: 10vw
    }
}

.single-ochasuru .entry .head_title .meta {
    font-size: 14px;
    letter-spacing: 0.07em;
    line-height: 1;
    margin: 0 0 10px
}

@media screen and (max-width: 767px) {
    .single-ochasuru .entry .head_title .meta {
        font-size:3vw
    }
}

.single-ochasuru .entry .head_title .meta span {
    display: inline-block
}

.single-ochasuru .entry .head_title .meta span.date {
    margin-right: 10px
}

.single-ochasuru .entry .head_title .meta span a {
    color: #000;
    display: inline-block;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (min-width: 1080px) {
    .single-ochasuru .entry .head_title .meta span a:hover {
        color:#6184ab
    }
}

.single-ochasuru .entry .head_title h1 {
    font-size: 24px;
    letter-spacing: 0.1em;
    line-height: 1.8
}

@media screen and (max-width: 767px) {
    .single-ochasuru .entry .head_title h1 {
        font-size:4.5vw;
        letter-spacing: 0.08em;
        line-height: 1.5
    }
}

.single-ochasuru .entry .head_title .tag {
    margin: 10px 0 0
}

.single-ochasuru .entry .head_title .tag a {
    color: #000;
    display: inline-block;
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 2;
    margin-right: 10px;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (max-width: 767px) {
    .single-ochasuru .entry .head_title .tag a {
        font-size:3vw;
        margin-right: 2vw
    }
}

@media screen and (min-width: 1080px) {
    .single-ochasuru .entry .head_title .tag a:hover {
        color:#6184ab
    }
}

.single-ochasuru .entry .head_title .share {
    width: 100%;
    max-width: 170px;
    border-top: 1px solid #9db3cd;
    padding-top: 25px;
    margin-top: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.single-ochasuru .entry .head_title .share::before {
    content: "SHARE";
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.07em;
    margin-right: 10px
}

@media screen and (max-width: 767px) {
    .single-ochasuru .entry .head_title .share::before {
        font-size:1.1vw
    }
}

.single-ochasuru .entry .head_title .share a {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center
}

.single-ochasuru .entry .head_title .share a svg {
    width: 20px;
    fill: #000;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 1080px) {
    .single-ochasuru .entry .head_title .share a:hover.fb svg {
        fill:#1877f2
    }

    .single-ochasuru .entry .head_title .share a:hover.tw svg {
        fill: #1da1f2
    }

    .single-ochasuru .entry .head_title .share a:hover.line svg {
        fill: #13b719
    }
}

#about_colours {
    margin: 220px auto 140px
}

@media screen and (max-width: 767px) {
    #about_colours {
        margin:10vw 10px 18vw
    }
}

.article-single #about_colours {
    margin: 80px auto
}

@media screen and (max-width: 767px) {
    .article-single #about_colours {
        margin:8vw 10px 14vw
    }
}

#about_colours h1 {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 40px
}

#about_colours h1 svg {
    fill: #000;
    width: 100%
}

@media screen and (max-width: 767px) {
    #about_colours h1 {
        width:65vw;
        margin-bottom: 7vw
    }
}

#about_colours .lead {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 2.2;
    margin-bottom: 40px;
    text-align: center
}

@media screen and (max-width: 767px) {
    #about_colours .lead {
        font-size:3vw;
        letter-spacing: 0.03em;
        line-height: 2;
        margin-bottom: 7vw
    }
}

#about_colours .ico_insta_clours {
    display: block;
    width: 236px;
    margin: 0 auto
}

#about_colours .ico_insta_clours svg {
    fill: #375a60;
    width: 100%;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 1080px) {
    #about_colours .ico_insta_clours:hover svg {
        fill:#6184ab
    }
}

@media screen and (max-width: 767px) {
    #about_colours .ico_insta_clours {
        width:55vw
    }
}

.colours_timeline.w_1300 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 140px
}

@media screen and (max-width: 767px) {
    .colours_timeline.w_1300 {
        margin-bottom:18vw;
        padding-left: 1px;
        padding-right: 1px
    }
}

.colours_timeline.w_1300::after {
    content: "";
    display: block;
    width: calc(33.3333% - 20px);
    margin-bottom: 30px
}

@media screen and (max-width: 767px) {
    .colours_timeline.w_1300::after {
        width:calc(33.3333% - 1px);
        margin-bottom: 1px
    }
}

.article-single .colours_timeline.w_1300 {
    margin-bottom: 20px
}

@media screen and (max-width: 767px) {
    .article-single .colours_timeline.w_1300 {
        margin-bottom:8vw
    }
}

.colours_timeline.w_1300 .video_wrapper {
    width: 100%;
    padding-bottom: 56.2%;
    margin-bottom: 30px;
    background: url(../img/colours/bg_movie.jpg) center center no-repeat #375a60;
    background-size: cover;
    position: relative
}

@media screen and (max-width: 767px) {
    .colours_timeline.w_1300 .video_wrapper {
        margin-bottom:1px
    }
}

.colours_timeline.w_1300 .video_wrapper a {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center
}

.colours_timeline.w_1300 .video_wrapper a .btn_play {
    width: 130px;
    position: relative;
    z-index: 3
}

@media screen and (max-width: 767px) {
    .colours_timeline.w_1300 .video_wrapper a .btn_play {
        width:27%
    }
}

.colours_timeline.w_1300 .video_wrapper a::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: 0.2;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    z-index: 2
}

@media screen and (min-width: 1080px) {
    .colours_timeline.w_1300 .video_wrapper a:hover::before {
        opacity:0.4
    }
}

.colours_timeline.w_1300 .video_wrapper a video {
    width: 100%;
    height: 100%;
    outline: none;
    -moz-transition: all 1s ease .5s;
    -o-transition: all 1s ease .5s;
    -webkit-transition: all 1s ease;
    -webkit-transition-delay: .5s;
    transition: all 1s ease .5s;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none
}

.colours_timeline.w_1300 .video_wrapper .colours_logo_l {
    width: 95px;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1
}

@media screen and (max-width: 767px) {
    .colours_timeline.w_1300 .video_wrapper .colours_logo_l {
        width:11%;
        top: 2.3%;
        left: 2.3%
    }
}

.colours_timeline.w_1300 .video_wrapper .colours_logo_l svg {
    fill: #FFF;
    width: 100%
}

.colours_timeline.w_1300 article {
    opacity: 1;
    width: calc(33.3333% - 20px);
    margin-bottom: 30px;
    position: relative;
    overflow: hidden
}

@media screen and (max-width: 767px) {
    .colours_timeline.w_1300 article {
        width:calc(33.3333% - 1px);
        margin-bottom: 1px
    }
}

.colours_timeline.w_1300 article a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #375a60
}

@media screen and (min-width: 1080px) {
    .colours_timeline.w_1300 article a:hover .txt::before {
        opacity:0.7
    }

    .colours_timeline.w_1300 article a:hover .txt h3,.colours_timeline.w_1300 article a:hover .txt .job {
        opacity: 1;
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    .colours_timeline.w_1300 article a:hover .txt h3 {
        -moz-transition: all .6s ease .2s;
        -o-transition: all .6s ease .2s;
        -webkit-transition: all .6s ease;
        -webkit-transition-delay: .2s;
        transition: all .6s ease .2s
    }

    .colours_timeline.w_1300 article a:hover .txt .job {
        -moz-transition: all .6s ease .4s;
        -o-transition: all .6s ease .4s;
        -webkit-transition: all .6s ease;
        -webkit-transition-delay: .4s;
        transition: all .6s ease .4s
    }
}

@media screen and (max-width: 767px) {
    .colours_timeline.w_1300 article.comingsoon .txt {
        opacity:1
    }
}

.colours_timeline.w_1300 article::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 100%
}

.colours_timeline.w_1300 article .txt,.colours_timeline.w_1300 article .figure,.colours_timeline.w_1300 article .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.colours_timeline.w_1300 article .txt {
    color: #FFF;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.8;
    text-align: left;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    padding: 6%;
    opacity: 0;
    -moz-transition: all .4s ease .8s;
    -o-transition: all .4s ease .8s;
    -webkit-transition: all .4s ease;
    -webkit-transition-delay: .8s;
    transition: all .4s ease .8s
}

.colours_timeline.w_1300 article .txt::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: #375a60;
    mix-blend-mode: multiply;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -webkit-transition: all .6s ease;
    transition: all .6s ease
}

@media screen and (max-width: 767px) {
    .colours_timeline.w_1300 article .txt {
        opacity:0;
        pointer-events: none;
        padding: 10%
    }
}

.colours_timeline.w_1300 article .txt h3,.colours_timeline.w_1300 article .txt .job {
    opacity: 0;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -webkit-transition: all .6s ease;
    transition: all .6s ease
}

.colours_timeline.w_1300 article .txt h3 {
    font-size: 24px
}

@media screen and (max-width: 767px) {
    .colours_timeline.w_1300 article .txt h3 {
        font-size:2.5vw
    }
}

.colours_timeline.w_1300 article .txt .job {
    font-size: 14px;
    margin-top: 5px
}

@media screen and (max-width: 767px) {
    .colours_timeline.w_1300 article .txt .job {
        font-size:2vw;
        margin-top: 8px
    }
}

.colours_timeline.w_1300 article .txt .cs {
    font-size: 14px
}

@media screen and (max-width: 767px) {
    .colours_timeline.w_1300 article .txt .cs {
        font-size:2.5vw
    }
}

.colours_timeline.w_1300 article .txt .colours_logo_l {
    width: 25%;
    position: absolute;
    top: 6%;
    left: 6%
}

@media screen and (max-width: 767px) {
    .colours_timeline.w_1300 article .txt .colours_logo_l {
        width:32%;
        top: 7%;
        left: 7%
    }
}

.colours_timeline.w_1300 article .txt .colours_logo_l svg {
    fill: #FFF;
    width: 100%
}

.colours_timeline.w_1300 article .txt.no_pic {
    color: #000;
    background-color: #FFF
}

@media screen and (max-width: 767px) {
    .colours_timeline.w_1300 article .txt.no_pic {
        opacity:1;
        pointer-events: auto;
        padding-top: 16%
    }
}

.colours_timeline.w_1300 article .txt.no_pic .colours_logo_l svg {
    fill: #000
}

.colours_timeline.w_1300 article .txt.no_pic h3 {
    opacity: 1;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    font-size: 16px
}

@media screen and (max-width: 767px) {
    .colours_timeline.w_1300 article .txt.no_pic h3 {
        font-size:2.3vw;
        letter-spacing: 0.02em;
        line-height: 1.5
    }
}

.colours_timeline.w_1300 article .figure {
    z-index: 1;
    opacity: 0;
    -moz-transition: all .6s ease .4s;
    -o-transition: all .6s ease .4s;
    -webkit-transition: all .6s ease;
    -webkit-transition-delay: .4s;
    transition: all .6s ease .4s
}

.colours_timeline.w_1300 article .figure div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0
}

.colours_timeline.w_1300 article .figure div.pic_face {
    animation: bgAnime3 15s infinite
}

.colours_timeline.w_1300 article .figure div.pic_chaba {
    animation: bgAnime1 15s infinite
}

.colours_timeline.w_1300 article .figure div.pic_memory {
    animation: bgAnime2 15s infinite
}

@keyframes bgAnime1 {
    0% {
        opacity: 1
    }

    33.333% {
        opacity: 1
    }

    36.333% {
        opacity: 0
    }

    97% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes bgAnime2 {
    0% {
        opacity: 0
    }

    30.333% {
        opacity: 0
    }

    33.333% {
        opacity: 1
    }

    66.666% {
        opacity: 1
    }

    69.666% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

@keyframes bgAnime3 {
    0% {
        opacity: 1
    }

    3% {
        opacity: 0
    }

    63.666% {
        opacity: 0
    }

    66.666% {
        opacity: 1
    }

    100% {
        opacity: 1
    }
}

.colours_timeline.w_1300 article .bg {
    pointer-events: none;
    opacity: 1;
    z-index: 0
}

.colours_timeline.w_1300 article.scl_on {
    opacity: 1
}

.colours_timeline.w_1300 article.scl_on .txt {
    opacity: 1
}

.colours_timeline.w_1300 article.scl_on .figure {
    opacity: 1
}

.colours_timeline.w_1300 article:nth-child(2) .figure div.pic_face,.colours_timeline.w_1300 article:nth-child(6) .figure div.pic_face,.colours_timeline.w_1300 article:nth-child(10) .figure div.pic_face,.colours_timeline.w_1300 article:nth-child(14) .figure div.pic_face,.colours_timeline.w_1300 article:nth-child(18) .figure div.pic_face,.colours_timeline.w_1300 article:nth-child(22) .figure div.pic_face,.colours_timeline.w_1300 article:nth-child(26) .figure div.pic_face,.colours_timeline.w_1300 article:nth-child(30) .figure div.pic_face,.colours_timeline.w_1300 article:nth-child(34) .figure div.pic_face {
    animation: bgAnime1 12s infinite
}

.colours_timeline.w_1300 article:nth-child(2) .figure div.pic_chaba,.colours_timeline.w_1300 article:nth-child(6) .figure div.pic_chaba,.colours_timeline.w_1300 article:nth-child(10) .figure div.pic_chaba,.colours_timeline.w_1300 article:nth-child(14) .figure div.pic_chaba,.colours_timeline.w_1300 article:nth-child(18) .figure div.pic_chaba,.colours_timeline.w_1300 article:nth-child(22) .figure div.pic_chaba,.colours_timeline.w_1300 article:nth-child(26) .figure div.pic_chaba,.colours_timeline.w_1300 article:nth-child(30) .figure div.pic_chaba,.colours_timeline.w_1300 article:nth-child(34) .figure div.pic_chaba {
    animation: bgAnime2 12s infinite
}

.colours_timeline.w_1300 article:nth-child(2) .figure div.pic_memory,.colours_timeline.w_1300 article:nth-child(6) .figure div.pic_memory,.colours_timeline.w_1300 article:nth-child(10) .figure div.pic_memory,.colours_timeline.w_1300 article:nth-child(14) .figure div.pic_memory,.colours_timeline.w_1300 article:nth-child(18) .figure div.pic_memory,.colours_timeline.w_1300 article:nth-child(22) .figure div.pic_memory,.colours_timeline.w_1300 article:nth-child(26) .figure div.pic_memory,.colours_timeline.w_1300 article:nth-child(30) .figure div.pic_memory,.colours_timeline.w_1300 article:nth-child(34) .figure div.pic_memory {
    animation: bgAnime3 12s infinite
}

.colours_timeline.w_1300 article:nth-child(3) .figure div.pic_face,.colours_timeline.w_1300 article:nth-child(7) .figure div.pic_face,.colours_timeline.w_1300 article:nth-child(11) .figure div.pic_face,.colours_timeline.w_1300 article:nth-child(15) .figure div.pic_face,.colours_timeline.w_1300 article:nth-child(19) .figure div.pic_face,.colours_timeline.w_1300 article:nth-child(23) .figure div.pic_face,.colours_timeline.w_1300 article:nth-child(27) .figure div.pic_face,.colours_timeline.w_1300 article:nth-child(31) .figure div.pic_face,.colours_timeline.w_1300 article:nth-child(35) .figure div.pic_face {
    animation: bgAnime2 14s infinite
}

.colours_timeline.w_1300 article:nth-child(3) .figure div.pic_chaba,.colours_timeline.w_1300 article:nth-child(7) .figure div.pic_chaba,.colours_timeline.w_1300 article:nth-child(11) .figure div.pic_chaba,.colours_timeline.w_1300 article:nth-child(15) .figure div.pic_chaba,.colours_timeline.w_1300 article:nth-child(19) .figure div.pic_chaba,.colours_timeline.w_1300 article:nth-child(23) .figure div.pic_chaba,.colours_timeline.w_1300 article:nth-child(27) .figure div.pic_chaba,.colours_timeline.w_1300 article:nth-child(31) .figure div.pic_chaba,.colours_timeline.w_1300 article:nth-child(35) .figure div.pic_chaba {
    animation: bgAnime3 14s infinite
}

.colours_timeline.w_1300 article:nth-child(3) .figure div.pic_memory,.colours_timeline.w_1300 article:nth-child(7) .figure div.pic_memory,.colours_timeline.w_1300 article:nth-child(11) .figure div.pic_memory,.colours_timeline.w_1300 article:nth-child(15) .figure div.pic_memory,.colours_timeline.w_1300 article:nth-child(19) .figure div.pic_memory,.colours_timeline.w_1300 article:nth-child(23) .figure div.pic_memory,.colours_timeline.w_1300 article:nth-child(27) .figure div.pic_memory,.colours_timeline.w_1300 article:nth-child(31) .figure div.pic_memory,.colours_timeline.w_1300 article:nth-child(35) .figure div.pic_memory {
    animation: bgAnime1 14s infinite
}

body.the-brew-note {
    background-color: #111
}

body.the-brew-note #content {
    background-color: #111
}

@media screen and (max-width: 767px) {
    body.the-brew-note #content .container {
        padding-top:0
    }
}

@media screen and (max-width: 767px) {
    body.the-brew-note .scroll .brew-note-title #play_btn {
        top:32px
    }
}

body.the-brew-note .brew-note-title {
    position: relative
}

body.the-brew-note .brew-note-title::after {
    content: "";
    display: block;
    width: 100%;
    height: 15%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    opacity: 0.6;
    pointer-events: none;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzExMTExMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #111111),color-stop(100%, rgba(0,0,0,0)));
    background: -moz-linear-gradient(#111111,rgba(0,0,0,0));
    background: -webkit-linear-gradient(#111111,rgba(0,0,0,0));
    background: linear-gradient(#111111,rgba(0,0,0,0))
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-title::after {
        height:25vw;
        opacity: 0.8
    }
}

body.the-brew-note .brew-note-title #play_btn {
    color: #FFF;
    position: fixed;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 10px;
    letter-spacing: 0.1em;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}

@media screen and (min-width: 1080px) {
    body.the-brew-note .brew-note-title #play_btn {
        width:120px;
        height: 40px;
        top: 20px;
        right: 300px;
        justify-content: flex-end;
        text-shadow: 0 0 20px #000, 0 0 20px #000, 0 0 30px #000
    }
}

@media screen and (min-width: 1500px) {
    body.the-brew-note .brew-note-title #play_btn {
        right:calc( (100% - 1500px) / 2 + 300px )
    }
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-title #play_btn {
        width:100px;
        height: 40px;
        top: 52px;
        left: 22px;
        justify-content: flex-start;
        transform: scale(0.85);
        transform-origin: center left;
        text-shadow: 0 0 20px #000, 0 0 20px #000
    }
}

body.the-brew-note .brew-note-title #play_btn span {
    opacity: .3;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    padding-left: 10px
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-title #play_btn span {
        padding-left:8px
    }
}

body.the-brew-note .brew-note-title #play_btn.paused span.off {
    opacity: 1
}

body.the-brew-note .brew-note-title #play_btn.paused span.on {
    opacity: .3
}

body.the-brew-note .brew-note-title #play_btn.play span.off {
    opacity: .3
}

body.the-brew-note .brew-note-title #play_btn.play span.on {
    opacity: 1
}

body.the-brew-note .brew-note-title #brew_cover {
    width: 100%;
    height: 680px;
    position: relative;
    opacity: 0;
    -moz-transition: opacity 1s ease 0s;
    -o-transition: opacity 1s ease 0s;
    -webkit-transition: opacity 1s ease;
    -webkit-transition-delay: 0s;
    transition: opacity 1s ease 0s
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-title #brew_cover {
        height:100vw
    }
}

body.the-brew-note .brew-note-title #brew_cover.slick-initialized {
    opacity: 1;
    -moz-transition: opacity 1s ease .5s;
    -o-transition: opacity 1s ease .5s;
    -webkit-transition: opacity 1s ease;
    -webkit-transition-delay: .5s;
    transition: opacity 1s ease .5s
}

body.the-brew-note .brew-note-title #brew_cover::before {
    content: "";
    display: block;
    width: 100%;
    height: 50px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
    background-color: #111
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-title #brew_cover::before {
        height:0
    }
}

body.the-brew-note .brew-note-title #brew_cover::after {
    content: "";
    display: block;
    width: 100%;
    height: 30%;
    position: absolute;
    left: 0;
    bottom: 50px;
    z-index: 2;
    pointer-events: none;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMTExMTEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0,0,0,0)),color-stop(100%, #111111));
    background: -moz-linear-gradient(rgba(0,0,0,0),#111111);
    background: -webkit-linear-gradient(rgba(0,0,0,0),#111111);
    background: linear-gradient(rgba(0,0,0,0),#111111)
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-title #brew_cover::after {
        height:25vw;
        bottom: 0
    }
}

body.the-brew-note .brew-note-title #brew_cover .brew_cover_slide {
    width: 100%;
    height: 680px
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-title #brew_cover .brew_cover_slide {
        height:100vw
    }
}

body.the-brew-note .brew-note-title .txt {
    color: #FFF;
    text-align: center;
    position: relative;
    z-index: 2;
    margin: -250px auto 100px
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-title .txt {
        margin:-20vw auto 15vw
    }
}

body.the-brew-note .brew-note-title .txt h1 {
    width: 300px;
    margin: 0 auto 50px
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-title .txt h1 {
        width:42vw;
        margin: 0 auto 8vw
    }
}

body.the-brew-note .brew-note-title .txt h2 {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.5;
    margin: 0 auto 15px;
    position: relative;
    left: 20px
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-title .txt h2 {
        font-size:5vw;
        margin: 0 auto 1vw;
        left: 2vw
    }
}

body.the-brew-note .brew-note-title .txt h3 {
    font-size: 16px;
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 2;
    margin: 0 auto;
    position: relative;
    left: 15px
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-title .txt h3 {
        font-size:3.4vw;
        margin: 0 auto;
        left: 1vw;
        letter-spacing: 0.08em
    }
}

body.the-brew-note .brew-note-title .txt .lead {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    margin: 0 auto
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-title .txt .lead {
        font-size:3.4vw;
        margin: 0 auto
    }
}

body.the-brew-note .brew-note-title .txt .brewnote_info {
    margin: 40px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-title .txt .brewnote_info {
        margin:6vw 0 0;
        padding-left: 20px;
        padding-right: 20px
    }
}

body.the-brew-note .brew-note-title .txt .brewnote_info .brewnote_info_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}

body.the-brew-note .brew-note-title .txt .brewnote_info .brewnote_info_icon {
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: -2px
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-title .txt .brewnote_info .brewnote_info_icon {
        width:18px;
        height: 18px;
        top: 0
    }
}

body.the-brew-note .brew-note-title .txt .brewnote_info p {
    font-size: 13px;
    line-height: 1.7;
    text-align: left;
    padding-left: 30px
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-title .txt .brewnote_info p {
        font-size:2.8vw;
        padding-left: 25px
    }
}

body.the-brew-note .brew-note-jacket,body.the-brew-note .brew-note-article {
    text-align: left;
    margin: 0 0 50px
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-jacket,body.the-brew-note .brew-note-article {
        margin:0 0 10vw;
        padding-left: 20px;
        padding-right: 20px
    }
}

@media screen and (min-width: 767px) {
    body.the-brew-note .brew-note-jacket .c_title_wrap,body.the-brew-note .brew-note-article .c_title_wrap {
        width:100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        margin: 0 0 40px
    }
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-jacket .c_title_wrap,body.the-brew-note .brew-note-article .c_title_wrap {
        margin:0 auto 6vw
    }
}

body.the-brew-note .brew-note-jacket h3.c_title,body.the-brew-note .brew-note-article h3.c_title {
    color: #FFF;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.5
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-jacket h3.c_title,body.the-brew-note .brew-note-article h3.c_title {
        font-size:5vw
    }
}

body.the-brew-note .brew-note-jacket .coupon,body.the-brew-note .brew-note-article .coupon {
    color: #FFF;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.7;
    border: 1px solid #FFF;
    vertical-align: middle
}

@media screen and (min-width: 767px) {
    body.the-brew-note .brew-note-jacket .coupon,body.the-brew-note .brew-note-article .coupon {
        display:flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 10px
    }
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-jacket .coupon,body.the-brew-note .brew-note-article .coupon {
        display:flex;
        flex-wrap: wrap;
        font-size: 10px;
        margin-top: 10px;
        padding: 8px
    }
}

body.the-brew-note .brew-note-jacket .coupon .coupon_code,body.the-brew-note .brew-note-jacket .coupon .coupon_txt,body.the-brew-note .brew-note-article .coupon .coupon_code,body.the-brew-note .brew-note-article .coupon .coupon_txt {
    line-height: 1.5
}

@media screen and (min-width: 767px) {
    body.the-brew-note .brew-note-jacket .coupon .coupon_code,body.the-brew-note .brew-note-jacket .coupon .coupon_txt,body.the-brew-note .brew-note-article .coupon .coupon_code,body.the-brew-note .brew-note-article .coupon .coupon_txt {
        display:block
    }
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-jacket .coupon .coupon_code,body.the-brew-note .brew-note-jacket .coupon .coupon_txt,body.the-brew-note .brew-note-article .coupon .coupon_code,body.the-brew-note .brew-note-article .coupon .coupon_txt {
        display:block
    }
}

@media screen and (min-width: 767px) {
    body.the-brew-note .brew-note-jacket .coupon .coupon_code,body.the-brew-note .brew-note-article .coupon .coupon_code {
        padding-right:10px;
        padding-bottom: 0
    }
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-jacket .coupon .coupon_code,body.the-brew-note .brew-note-article .coupon .coupon_code {
        font-size:10px;
        display: block
    }
}

body.the-brew-note .brew-note-jacket .coupon .coupon_code strong,body.the-brew-note .brew-note-article .coupon .coupon_code strong {
    font-weight: 600;
    letter-spacing: 0.07em;
    padding-left: 4px;
    padding-right: 4px
}

body.the-brew-note .brew-note-jacket .coupon .coupon_txt,body.the-brew-note .brew-note-article .coupon .coupon_txt {
    font-size: 12px
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-jacket .coupon .coupon_txt,body.the-brew-note .brew-note-article .coupon .coupon_txt {
        font-size:10px
    }
}

body.the-brew-note .brew-note-jacket .brew-note-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start
}

@media screen and (min-width: 1080px) {
    body.the-brew-note .brew-note-jacket .brew-note-list::before {
        content:"";
        display: block;
        width: 22.5%;
        order: 1
    }

    body.the-brew-note .brew-note-jacket .brew-note-list::after {
        content: "";
        display: block;
        width: 22.5%
    }
}

body.the-brew-note .brew-note-jacket .brew-note-list article {
    width: 22.5%;
    margin: 0 0 50px;
    position: relative
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-jacket .brew-note-list article {
        width:calc( 50% - 10px );
        margin: 0 0 8vw
    }
}

body.the-brew-note .brew-note-jacket .brew-note-list article .jacket_wrap {
    width: 100%;
    position: relative
}

body.the-brew-note .brew-note-jacket .brew-note-list article figure {
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    background-color: #111
}

body.the-brew-note .brew-note-jacket .brew-note-list article .txt {
    width: 100%;
    position: relative;
    text-align: left
}

@media screen and (min-width: 767px) {
    body.the-brew-note .brew-note-jacket .brew-note-list article .txt {
        padding:15px 5px 0
    }
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-jacket .brew-note-list article .txt {
        padding:3vw 0 1vw
    }
}

body.the-brew-note .brew-note-jacket .brew-note-list article .txt h3.song_name {
    color: #EEE;
    font-size: 12px;
    font-size: clamp(11px, 12px, 1.1vw);
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.6;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (max-width: 1080px) {
    body.the-brew-note .brew-note-jacket .brew-note-list article .txt h3.song_name {
        font-size:10px;
        letter-spacing: 0.03em
    }
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-jacket .brew-note-list article .txt h3.song_name {
        width:100%;
        font-size: 10px;
        letter-spacing: 0.03em
    }
}

body.the-brew-note .brew-note-jacket .brew-note-list article .txt p.artist {
    color: #AAA;
    font-size: 12px;
    font-size: clamp(11px, 12px, 1.1vw);
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.6;
    margin: 6px 0 0;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-jacket .brew-note-list article .txt p.artist {
        width:100%;
        font-size: 10px;
        margin: 3px 0 0;
        text-align: left
    }
}

body.the-brew-note .brew-note-jacket .brew-note-list article::after {
    content: "";
    display: block;
    width: calc( 100% + 24px );
    height: calc( 100% + 24px );
    position: absolute;
    top: -12px;
    left: -12px;
    background-color: #6184ab;
    opacity: 0;
    z-index: 0;
    -moz-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border-radius: 8px;
    pointer-events: none
}

body.the-brew-note .brew-note-jacket .brew-note-list article .links {
    position: relative
}

@media screen and (min-width: 767px) {
    body.the-brew-note .brew-note-jacket .brew-note-list article .links {
        position:absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        background-color: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        -moz-transform: translate(0, 5px);
        -ms-transform: translate(0, 5px);
        -webkit-transform: translate(0, 5px);
        transform: translate(0, 5px);
        -moz-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        text-align: center;
        padding: 0 15px;
        z-index: 2
    }

    body.the-brew-note .brew-note-jacket .brew-note-list article .links>div {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center
    }

    body.the-brew-note .brew-note-jacket .brew-note-list article .links::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #6184ab;
        opacity: 0;
        mix-blend-mode: multiply;
        -moz-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1)
    }

    body.the-brew-note .brew-note-jacket .brew-note-list article .links a {
        color: #FFF;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13px;
        font-size: clamp(11px, 13px, 1.1vw);
        font-weight: 600;
        width: 100%;
        height: 40px;
        padding: 0 10px;
        letter-spacing: 0.06em;
        line-height: 40px;
        background-color: #111;
        position: relative;
        z-index: 2;
        border-radius: 5px;
        opacity: .95;
        -moz-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1)
    }

    body.the-brew-note .brew-note-jacket .brew-note-list article .links a span {
        font-size: 10px;
        letter-spacing: 0.02em;
        padding-left: 8px
    }

    body.the-brew-note .brew-note-jacket .brew-note-list article .links a img {
        display: inline-block;
        width: 20px;
        margin-right: 10px
    }
}

@media screen and (min-width: 767px) and (min-width: 767px) {
    body.the-brew-note .brew-note-jacket .brew-note-list article .links a:hover {
        color:#FFF;
        background-color: #368256;
        opacity: 1
    }
}

@media screen and (min-width: 767px) {
    body.the-brew-note .brew-note-jacket .brew-note-list article .links .how_ro_brew,body.the-brew-note .brew-note-jacket .brew-note-list article .links .story,body.the-brew-note .brew-note-jacket .brew-note-list article .links .tryit {
        height:40px;
        margin: 5px 0
    }

    body.the-brew-note .brew-note-jacket .brew-note-list article .links .how_ro_brew {
        width: 100%
    }

    body.the-brew-note .brew-note-jacket .brew-note-list article .links .story,body.the-brew-note .brew-note-jacket .brew-note-list article .links .tryit {
        width: calc( 50% - 5px )
    }

    body.the-brew-note .brew-note-jacket .brew-note-list article .links .links_single .story,body.the-brew-note .brew-note-jacket .brew-note-list article .links .links_single .tryit {
        width: 100%
    }
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-jacket .brew-note-list article .links {
        margin-top:5px
    }

    body.the-brew-note .brew-note-jacket .brew-note-list article .links>div {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center
    }

    body.the-brew-note .brew-note-jacket .brew-note-list article .links a {
        color: #EEE;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3vw;
        font-weight: 600;
        width: 100%;
        height: 36px;
        padding: 0;
        letter-spacing: 0.12em;
        line-height: 36px;
        background-color: #333;
        position: relative;
        z-index: 2;
        border-radius: 5px;
        opacity: .9;
        -moz-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1)
    }

    body.the-brew-note .brew-note-jacket .brew-note-list article .links a:hover {
        color: #FFF;
        background-color: #368256;
        opacity: 1
    }

    body.the-brew-note .brew-note-jacket .brew-note-list article .links a img {
        display: inline-block;
        width: 16px;
        margin-right: 8px
    }

    body.the-brew-note .brew-note-jacket .brew-note-list article .links .how_ro_brew,body.the-brew-note .brew-note-jacket .brew-note-list article .links .story,body.the-brew-note .brew-note-jacket .brew-note-list article .links .tryit {
        height: 36px;
        margin: 2px 0
    }

    body.the-brew-note .brew-note-jacket .brew-note-list article .links .how_ro_brew {
        width: 100%
    }

    body.the-brew-note .brew-note-jacket .brew-note-list article .links .story,body.the-brew-note .brew-note-jacket .brew-note-list article .links .tryit {
        width: calc( 50% - 2px )
    }

    body.the-brew-note .brew-note-jacket .brew-note-list article .links .story a {
        border-radius: 5px 0 0 5px
    }

    body.the-brew-note .brew-note-jacket .brew-note-list article .links .tryit a {
        border-radius: 0 5px 5px 0
    }

    body.the-brew-note .brew-note-jacket .brew-note-list article .links .links_single .story,body.the-brew-note .brew-note-jacket .brew-note-list article .links .links_single .tryit {
        width: 100%
    }

    body.the-brew-note .brew-note-jacket .brew-note-list article .links .links_single .story a,body.the-brew-note .brew-note-jacket .brew-note-list article .links .links_single .tryit a {
        border-radius: 5px
    }
}

@media screen and (min-width: 767px) {
    body.the-brew-note .brew-note-jacket .brew-note-list article:hover .links {
        opacity:1;
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    body.the-brew-note .brew-note-jacket .brew-note-list article:hover .links::before {
        opacity: 0.4
    }

    body.the-brew-note .brew-note-jacket .brew-note-list article:hover::after {
        opacity: 0.2
    }
}

body.the-brew-note .brew-note-article .brew-note-article-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start
}

@media screen and (min-width: 1080px) {
    body.the-brew-note .brew-note-article .brew-note-article-list::after {
        content:"";
        display: block;
        width: 30%
    }
}

body.the-brew-note .brew-note-article .brew-note-article-list article {
    width: 31%;
    margin: 0 0 50px;
    position: relative
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-article .brew-note-article-list article {
        width:100%;
        margin: 0 0 8vw
    }
}

body.the-brew-note .brew-note-article .brew-note-article-list article a figure {
    width: 100%;
    position: relative;
    border-radius: 5px;
    overflow: hidden
}

body.the-brew-note .brew-note-article .brew-note-article-list article a figure img {
    width: 100%;
    max-width: inherit
}

@media screen and (min-width: 1080px) {
    body.the-brew-note .brew-note-article .brew-note-article-list article a figure::before {
        color:#FFF;
        content: "READ MORE";
        display: flex;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.08em;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 2;
        -moz-transform: translate(0, 5px);
        -ms-transform: translate(0, 5px);
        -webkit-transform: translate(0, 5px);
        transform: translate(0, 5px);
        -moz-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1)
    }

    body.the-brew-note .brew-note-article .brew-note-article-list article a figure::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        background-color: #6184ab;
        z-index: 1;
        mix-blend-mode: multiply;
        -moz-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1)
    }

    body.the-brew-note .brew-note-article .brew-note-article-list article a:hover figure::before {
        opacity: 1;
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    body.the-brew-note .brew-note-article .brew-note-article-list article a:hover figure::after {
        opacity: 0.5
    }

    body.the-brew-note .brew-note-article .brew-note-article-list article a:hover .txt h2,body.the-brew-note .brew-note-article .brew-note-article-list article a:hover .txt h3,body.the-brew-note .brew-note-article .brew-note-article-list article a:hover .txt .meta,body.the-brew-note .brew-note-article .brew-note-article-list article a:hover .txt .lead {
        color: #6184ab
    }
}

body.the-brew-note .brew-note-article .brew-note-article-list article a .txt {
    width: 100%;
    position: relative;
    text-align: left
}

@media screen and (min-width: 767px) {
    body.the-brew-note .brew-note-article .brew-note-article-list article a .txt {
        padding:15px 5px 0
    }
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-article .brew-note-article-list article a .txt {
        padding:3.5vw 5px 0
    }
}

body.the-brew-note .brew-note-article .brew-note-article-list article a .txt h3 {
    color: #EEE;
    font-size: 14px;
    font-size: clamp(12px, 14px, 1.1vw);
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.7;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-article .brew-note-article-list article a .txt h3 {
        width:100%;
        font-size: 3.5vw;
        letter-spacing: 0.03em;
        line-height: 1.6
    }
}

body.the-brew-note .brew-note-article .brew-note-article-list article a .txt .meta {
    color: #DDD;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin: 10px 0 0;
    -moz-transition: color .4s ease;
    -o-transition: color .4s ease;
    -webkit-transition: color .4s ease;
    transition: color .4s ease
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-article .brew-note-article-list article a .txt .meta {
        width:100%;
        font-size: 10px;
        margin: 3px 0 0;
        text-align: left;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap
    }
}

body.the-brew-note .brew-note-article .brew-note-article-list article a .txt .meta .date_category {
    line-height: 1;
    margin: 0 0 5px
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-article .brew-note-article-list article a .txt .meta .date_category {
        margin:5px 0 0
    }
}

body.the-brew-note .brew-note-article .brew-note-article-list article a .txt .meta .date_category span {
    display: inline-block;
    margin-right: 6px
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-article .brew-note-article-list article a .txt .meta .date_category {
        margin-right:10px
    }

    body.the-brew-note .brew-note-article .brew-note-article-list article a .txt .meta .date_category span {
        margin-right: 6px
    }
}

body.the-brew-note .brew-note-article .brew-note-article-list article a .txt .meta .tag {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center
}

@media screen and (min-width: 767px) {
    body.the-brew-note .brew-note-article .brew-note-article-list article a .txt .meta .tag {
        width:100%
    }
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-article .brew-note-article-list article a .txt .meta .tag {
        line-height:1;
        justify-content: flex-start;
        margin-top: 5px
    }
}

body.the-brew-note .brew-note-article .brew-note-article-list article a .txt .meta .tag li {
    display: inline-block;
    line-height: 1.7
}

@media screen and (min-width: 767px) {
    body.the-brew-note .brew-note-article .brew-note-article-list article a .txt .meta .tag li {
        margin-right:6px
    }
}

@media screen and (max-width: 767px) {
    body.the-brew-note .brew-note-article .brew-note-article-list article a .txt .meta .tag li {
        line-height:1;
        margin-right: 6px
    }
}

.ball-pulse-sync>div,.ball-pulse>div,.ball-scale-random>div,.ball-scale>div {
    background-color: #fff;
    border-radius: 100%;
    margin: 2px;
    display: inline-block
}

@-webkit-keyframes scale {
    0%,80% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }

    45% {
        -webkit-transform: scale(.1);
        transform: scale(.1);
        opacity: .7
    }
}

@keyframes scale {
    0%,80% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }

    45% {
        -webkit-transform: scale(.1);
        transform: scale(.1);
        opacity: .7
    }
}

.ball-pulse>div:nth-child(1) {
    -webkit-animation: scale .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08);
    animation: scale .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08)
}

.ball-pulse>div:nth-child(2) {
    -webkit-animation: scale .75s -.12s infinite cubic-bezier(.2,.68,.18,1.08);
    animation: scale .75s -.12s infinite cubic-bezier(.2,.68,.18,1.08)
}

.ball-pulse>div:nth-child(3) {
    -webkit-animation: scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08);
    animation: scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08)
}

.ball-pulse>div {
    width: 15px;
    height: 15px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes ball-pulse-sync {
    33% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    66% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes ball-pulse-sync {
    33% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    66% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.ball-pulse-sync>div:nth-child(1) {
    -webkit-animation: ball-pulse-sync .6s -.14s infinite ease-in-out;
    animation: ball-pulse-sync .6s -.14s infinite ease-in-out
}

.ball-pulse-sync>div:nth-child(2) {
    -webkit-animation: ball-pulse-sync .6s -70ms infinite ease-in-out;
    animation: ball-pulse-sync .6s -70ms infinite ease-in-out
}

.ball-pulse-sync>div:nth-child(3) {
    -webkit-animation: ball-pulse-sync .6s 0s infinite ease-in-out;
    animation: ball-pulse-sync .6s 0s infinite ease-in-out
}

.ball-pulse-sync>div {
    width: 15px;
    height: 15px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes ball-scale {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

@keyframes ball-scale {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

.ball-scale>div {
    height: 60px;
    width: 60px;
    -webkit-animation: 0s 0s ease-in-out infinite!important;
    animation:  0s 0s ease-in-out infinite!important;
}

.ball-scale-random {
    width: 37px;
    height: 40px
}

.ball-scale-random>div {
    position: absolute;
    height: 30px;
    width: 30px;
    -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
    animation: ball-scale 1s 0s ease-in-out infinite
}

.ball-rotate,.ball-rotate>div {
    position: relative
}

.ball-rotate>div,.ball-rotate>div:after,.ball-rotate>div:before {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%
}

.ball-scale-random>div:nth-child(1) {
    margin-left: -7px;
    -webkit-animation: ball-scale 1s .2s ease-in-out infinite;
    animation: ball-scale 1s .2s ease-in-out infinite
}

.ball-scale-random>div:nth-child(3) {
    margin-left: -2px;
    margin-top: 9px;
    -webkit-animation: ball-scale 1s .5s ease-in-out infinite;
    animation: ball-scale 1s .5s ease-in-out infinite
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.ball-rotate>div {
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.ball-rotate>div:first-child {
    -webkit-animation: rotate 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite;
    animation: rotate 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite
}

.ball-rotate>div:after,.ball-rotate>div:before {
    margin: 2px;
    content: "";
    position: absolute;
    opacity: .8
}

.ball-rotate>div:before {
    top: 0;
    left: -28px
}

.ball-rotate>div:after {
    top: 0;
    left: 25px
}

.ball-clip-rotate>div {
    border-radius: 100%;
    margin: 2px;
    border: 2px solid #fff;
    border-bottom-color: transparent;
    height: 26px;
    width: 26px;
    background: 0 0!important;
    display: inline-block;
    -webkit-animation: rotate .75s 0s linear infinite;
    animation: rotate .75s 0s linear infinite
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes scale {
    30% {
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.ball-clip-rotate-pulse {
    position: relative;
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px)
}

.ball-clip-rotate-pulse>div {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 100%
}

.ball-clip-rotate-pulse>div:first-child {
    background: #fff;
    height: 16px;
    width: 16px;
    top: 7px;
    left: -7px;
    -webkit-animation: scale 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;
    animation: scale 1s 0s cubic-bezier(.09,.57,.49,.9) infinite
}

.ball-clip-rotate-pulse>div:last-child {
    position: absolute;
    width: 30px;
    height: 30px;
    left: -16px;
    top: -2px;
    background: 0 0;
    border: 2px solid;
    border-color: #fff transparent;
    -webkit-animation: rotate 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;
    animation: rotate 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

.ball-beat>div,.ball-scale-multiple>div {
    background-color: #fff;
    border-radius: 100%
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1)
    }

    50% {
        -webkit-transform: rotate(180deg) scale(.6);
        transform: rotate(180deg) scale(.6)
    }

    100% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1)
    }
}

.ball-clip-rotate-multiple {
    position: relative
}

.ball-clip-rotate-multiple>div {
    position: absolute;
    left: -20px;
    top: -20px;
    border: 2px solid #fff;
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-radius: 100%;
    height: 35px;
    width: 35px;
    -webkit-animation: rotate 1s 0s ease-in-out infinite;
    animation: rotate 1s 0s ease-in-out infinite
}

.ball-clip-rotate-multiple>div:last-child {
    display: inline-block;
    top: -10px;
    left: -10px;
    width: 15px;
    height: 15px;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    border-color: #fff transparent;
    -webkit-animation-direction: reverse;
    animation-direction: reverse
}

@-webkit-keyframes ball-scale-ripple {
    0% {
        -webkit-transform: scale(.1);
        transform: scale(.1);
        opacity: 1
    }

    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: .7
    }

    100% {
        opacity: 0
    }
}

@keyframes ball-scale-ripple {
    0% {
        -webkit-transform: scale(.1);
        transform: scale(.1);
        opacity: 1
    }

    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: .7
    }

    100% {
        opacity: 0
    }
}

.ball-scale-ripple>div {
    height: 50px;
    width: 50px;
    border-radius: 100%;
    border: 2px solid #fff;
    -webkit-animation: ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8);
    animation: ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8)
}

@-webkit-keyframes ball-scale-ripple-multiple {
    0% {
        -webkit-transform: scale(.1);
        transform: scale(.1);
        opacity: 1
    }

    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: .7
    }

    100% {
        opacity: 0
    }
}

@keyframes ball-scale-ripple-multiple {
    0% {
        -webkit-transform: scale(.1);
        transform: scale(.1);
        opacity: 1
    }

    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: .7
    }

    100% {
        opacity: 0
    }
}

.ball-scale-ripple-multiple {
    position: relative;
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px)
}

.ball-scale-ripple-multiple>div:nth-child(0) {
    -webkit-animation-delay: -.8s;
    animation-delay: -.8s
}

.ball-scale-ripple-multiple>div:nth-child(1) {
    -webkit-animation-delay: -.6s;
    animation-delay: -.6s
}

.ball-scale-ripple-multiple>div:nth-child(2) {
    -webkit-animation-delay: -.4s;
    animation-delay: -.4s
}

.ball-scale-ripple-multiple>div:nth-child(3) {
    -webkit-animation-delay: -.2s;
    animation-delay: -.2s
}

.ball-scale-ripple-multiple>div {
    position: absolute;
    top: -2px;
    left: -26px;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: 2px solid #fff;
    -webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21,.53,.56,.8);
    animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21,.53,.56,.8)
}

@-webkit-keyframes ball-beat {
    50% {
        opacity: .2;
        -webkit-transform: scale(.75);
        transform: scale(.75)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes ball-beat {
    50% {
        opacity: .2;
        -webkit-transform: scale(.75);
        transform: scale(.75)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.ball-beat>div {
    width: 15px;
    height: 15px;
    margin: 2px;
    display: inline-block;
    -webkit-animation: ball-beat .7s 0s infinite linear;
    animation: ball-beat .7s 0s infinite linear
}

.ball-beat>div:nth-child(2n-1) {
    -webkit-animation-delay: -.35s!important;
    animation-delay: -.35s!important
}

@-webkit-keyframes ball-scale-multiple {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }

    5% {
        opacity: 1
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

@keyframes ball-scale-multiple {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }

    5% {
        opacity: 1
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

.ball-scale-multiple {
    position: relative;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px)
}

.ball-scale-multiple>div:nth-child(2) {
    -webkit-animation-delay: -.4s;
    animation-delay: -.4s
}

.ball-scale-multiple>div:nth-child(3) {
    -webkit-animation-delay: -.2s;
    animation-delay: -.2s
}

.ball-scale-multiple>div {
    position: absolute;
    left: -30px;
    top: 0;
    opacity: 0;
    margin: 0;
    width: 60px;
    height: 60px;
    -webkit-animation: ball-scale-multiple 1s 0s linear infinite;
    animation: ball-scale-multiple 1s 0s linear infinite
}

.ball-triangle-path>div:nth-child(1),.ball-triangle-path>div:nth-child(2) {
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite
}

@-webkit-keyframes ball-triangle-path-1 {
    33% {
        -webkit-transform: translate(25px,-50px);
        transform: translate(25px,-50px)
    }

    66% {
        -webkit-transform: translate(50px,0);
        transform: translate(50px,0)
    }

    100% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }
}

@keyframes ball-triangle-path-1 {
    33% {
        -webkit-transform: translate(25px,-50px);
        transform: translate(25px,-50px)
    }

    66% {
        -webkit-transform: translate(50px,0);
        transform: translate(50px,0)
    }

    100% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }
}

@-webkit-keyframes ball-triangle-path-2 {
    33% {
        -webkit-transform: translate(25px,50px);
        transform: translate(25px,50px)
    }

    66% {
        -webkit-transform: translate(-25px,50px);
        transform: translate(-25px,50px)
    }

    100% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }
}

@keyframes ball-triangle-path-2 {
    33% {
        -webkit-transform: translate(25px,50px);
        transform: translate(25px,50px)
    }

    66% {
        -webkit-transform: translate(-25px,50px);
        transform: translate(-25px,50px)
    }

    100% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }
}

@-webkit-keyframes ball-triangle-path-3 {
    33% {
        -webkit-transform: translate(-50px,0);
        transform: translate(-50px,0)
    }

    66% {
        -webkit-transform: translate(-25px,-50px);
        transform: translate(-25px,-50px)
    }

    100% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }
}

@keyframes ball-triangle-path-3 {
    33% {
        -webkit-transform: translate(-50px,0);
        transform: translate(-50px,0)
    }

    66% {
        -webkit-transform: translate(-25px,-50px);
        transform: translate(-25px,-50px)
    }

    100% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }
}

.ball-triangle-path {
    position: relative;
    -webkit-transform: translate(-29.99px,-37.51px);
    transform: translate(-29.99px,-37.51px)
}

.ball-triangle-path>div:nth-child(1) {
    -webkit-animation-name: ball-triangle-path-1;
    animation-name: ball-triangle-path-1;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite
}

.ball-triangle-path>div:nth-child(2) {
    -webkit-animation-name: ball-triangle-path-2;
    animation-name: ball-triangle-path-2;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite
}

.ball-triangle-path>div:nth-child(3) {
    -webkit-animation-name: ball-triangle-path-3;
    animation-name: ball-triangle-path-3;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.ball-triangle-path>div {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    border: 1px solid #fff
}

.ball-grid-beat>div,.ball-pulse-rise>div {
    -webkit-animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite
}

.ball-grid-beat>div,.ball-grid-pulse>div,.ball-pulse-rise>div {
    height: 15px;
    border-radius: 100%;
    display: inline-block;
    background-color: #fff;
    margin: 2px
}

.ball-triangle-path>div:nth-of-type(1) {
    top: 50px
}

.ball-triangle-path>div:nth-of-type(2) {
    left: 25px
}

.ball-triangle-path>div:nth-of-type(3) {
    top: 50px;
    left: 50px
}

@-webkit-keyframes ball-pulse-rise-even {
    0% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    25% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }

    50% {
        -webkit-transform: scale(.4);
        transform: scale(.4)
    }

    75% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes ball-pulse-rise-even {
    0% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    25% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }

    50% {
        -webkit-transform: scale(.4);
        transform: scale(.4)
    }

    75% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes ball-pulse-rise-odd {
    0% {
        -webkit-transform: scale(.4);
        transform: scale(.4)
    }

    25% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    75% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform: scale(.75);
        transform: scale(.75)
    }
}

@keyframes ball-pulse-rise-odd {
    0% {
        -webkit-transform: scale(.4);
        transform: scale(.4)
    }

    25% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    75% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform: scale(.75);
        transform: scale(.75)
    }
}

.ball-pulse-rise>div {
    width: 15px;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: cubic-bezier(.15,.46,.9,.6);
    animation-timing-function: cubic-bezier(.15,.46,.9,.6);
    animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
    animation-delay: 0
}

.ball-pulse-rise>div:nth-child(2n) {
    -webkit-animation-name: ball-pulse-rise-even;
    animation-name: ball-pulse-rise-even
}

.ball-pulse-rise>div:nth-child(2n-1) {
    -webkit-animation-name: ball-pulse-rise-odd;
    animation-name: ball-pulse-rise-odd
}

@-webkit-keyframes ball-grid-beat {
    50% {
        opacity: .7
    }

    100% {
        opacity: 1
    }
}

@keyframes ball-grid-beat {
    50% {
        opacity: .7
    }

    100% {
        opacity: 1
    }
}

.ball-grid-beat {
    width: 57px
}

.ball-grid-beat>div:nth-child(1) {
    -webkit-animation-delay: .15s;
    animation-delay: .15s;
    -webkit-animation-duration: 1.45s;
    animation-duration: 1.45s
}

.ball-grid-beat>div:nth-child(2) {
    -webkit-animation-delay: -20ms;
    animation-delay: -20ms;
    -webkit-animation-duration: .97s;
    animation-duration: .97s
}

.ball-grid-beat>div:nth-child(3) {
    -webkit-animation-delay: .66s;
    animation-delay: .66s;
    -webkit-animation-duration: 1.23s;
    animation-duration: 1.23s
}

.ball-grid-beat>div:nth-child(4) {
    -webkit-animation-delay: .64s;
    animation-delay: .64s;
    -webkit-animation-duration: 1.24s;
    animation-duration: 1.24s
}

.ball-grid-beat>div:nth-child(5) {
    -webkit-animation-delay: -.19s;
    animation-delay: -.19s;
    -webkit-animation-duration: 1.13s;
    animation-duration: 1.13s
}

.ball-grid-beat>div:nth-child(6) {
    -webkit-animation-delay: .69s;
    animation-delay: .69s;
    -webkit-animation-duration: 1.42s;
    animation-duration: 1.42s
}

.ball-grid-beat>div:nth-child(7) {
    -webkit-animation-delay: .58s;
    animation-delay: .58s;
    -webkit-animation-duration: 1.14s;
    animation-duration: 1.14s
}

.ball-grid-beat>div:nth-child(8) {
    -webkit-animation-delay: .21s;
    animation-delay: .21s;
    -webkit-animation-duration: 1.17s;
    animation-duration: 1.17s
}

.ball-grid-beat>div:nth-child(9) {
    -webkit-animation-delay: -.18s;
    animation-delay: -.18s;
    -webkit-animation-duration: .65s;
    animation-duration: .65s
}

.ball-grid-beat>div {
    width: 15px;
    animation-fill-mode: both;
    float: left;
    -webkit-animation-name: ball-grid-beat;
    animation-name: ball-grid-beat;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
    animation-delay: 0
}

@-webkit-keyframes ball-grid-pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(.5);
        transform: scale(.5);
        opacity: .7
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes ball-grid-pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(.5);
        transform: scale(.5);
        opacity: .7
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

.ball-grid-pulse {
    width: 57px
}

.ball-grid-pulse>div:nth-child(1) {
    -webkit-animation-delay: .22s;
    animation-delay: .22s;
    -webkit-animation-duration: .9s;
    animation-duration: .9s
}

.ball-grid-pulse>div:nth-child(2) {
    -webkit-animation-delay: .64s;
    animation-delay: .64s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

.ball-grid-pulse>div:nth-child(3) {
    -webkit-animation-delay: -.15s;
    animation-delay: -.15s;
    -webkit-animation-duration: .63s;
    animation-duration: .63s
}

.ball-grid-pulse>div:nth-child(4) {
    -webkit-animation-delay: -30ms;
    animation-delay: -30ms;
    -webkit-animation-duration: 1.24s;
    animation-duration: 1.24s
}

.ball-grid-pulse>div:nth-child(5) {
    -webkit-animation-delay: 80ms;
    animation-delay: 80ms;
    -webkit-animation-duration: 1.37s;
    animation-duration: 1.37s
}

.ball-grid-pulse>div:nth-child(6) {
    -webkit-animation-delay: .43s;
    animation-delay: .43s;
    -webkit-animation-duration: 1.55s;
    animation-duration: 1.55s
}

.ball-grid-pulse>div:nth-child(7) {
    -webkit-animation-delay: 50ms;
    animation-delay: 50ms;
    -webkit-animation-duration: .7s;
    animation-duration: .7s
}

.ball-grid-pulse>div:nth-child(8) {
    -webkit-animation-delay: 50ms;
    animation-delay: 50ms;
    -webkit-animation-duration: .97s;
    animation-duration: .97s
}

.ball-grid-pulse>div:nth-child(9) {
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
    -webkit-animation-duration: .63s;
    animation-duration: .63s
}

.ball-grid-pulse>div {
    width: 15px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    float: left;
    -webkit-animation-name: ball-grid-pulse;
    animation-name: ball-grid-pulse;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
    animation-delay: 0
}

@-webkit-keyframes ball-spin-fade-loader {
    50% {
        opacity: .3;
        -webkit-transform: scale(.4);
        transform: scale(.4)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes ball-spin-fade-loader {
    50% {
        opacity: .3;
        -webkit-transform: scale(.4);
        transform: scale(.4)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.ball-spin-fade-loader {
    position: relative;
    top: -10px;
    left: -10px
}

.ball-spin-fade-loader>div:nth-child(1) {
    top: 25px;
    left: 0;
    -webkit-animation: ball-spin-fade-loader 1s -.96s infinite linear;
    animation: ball-spin-fade-loader 1s -.96s infinite linear
}

.ball-spin-fade-loader>div:nth-child(2) {
    top: 17.05px;
    left: 17.05px;
    -webkit-animation: ball-spin-fade-loader 1s -.84s infinite linear;
    animation: ball-spin-fade-loader 1s -.84s infinite linear
}

.ball-spin-fade-loader>div:nth-child(3) {
    top: 0;
    left: 25px;
    -webkit-animation: ball-spin-fade-loader 1s -.72s infinite linear;
    animation: ball-spin-fade-loader 1s -.72s infinite linear
}

.ball-spin-fade-loader>div:nth-child(4) {
    top: -17.05px;
    left: 17.05px;
    -webkit-animation: ball-spin-fade-loader 1s -.6s infinite linear;
    animation: ball-spin-fade-loader 1s -.6s infinite linear
}

.ball-spin-fade-loader>div:nth-child(5) {
    top: -25px;
    left: 0;
    -webkit-animation: ball-spin-fade-loader 1s -.48s infinite linear;
    animation: ball-spin-fade-loader 1s -.48s infinite linear
}

.ball-spin-fade-loader>div:nth-child(6) {
    top: -17.05px;
    left: -17.05px;
    -webkit-animation: ball-spin-fade-loader 1s -.36s infinite linear;
    animation: ball-spin-fade-loader 1s -.36s infinite linear
}

.ball-spin-fade-loader>div:nth-child(7) {
    top: 0;
    left: -25px;
    -webkit-animation: ball-spin-fade-loader 1s -.24s infinite linear;
    animation: ball-spin-fade-loader 1s -.24s infinite linear
}

.ball-spin-fade-loader>div:nth-child(8) {
    top: 17.05px;
    left: -17.05px;
    -webkit-animation: ball-spin-fade-loader 1s -.12s infinite linear;
    animation: ball-spin-fade-loader 1s -.12s infinite linear
}

.ball-spin-fade-loader>div,.ball-spin-loader>div {
    -webkit-animation-fill-mode: both;
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 100%
}

.ball-spin-fade-loader>div {
    background-color: #fff;
    margin: 2px;
    animation-fill-mode: both
}

@-webkit-keyframes ball-spin-loader {
    75% {
        opacity: .2
    }

    100% {
        opacity: 1
    }
}

@keyframes ball-spin-loader {
    75% {
        opacity: .2
    }

    100% {
        opacity: 1
    }
}

.ball-spin-loader {
    position: relative
}

.ball-spin-loader>span:nth-child(1) {
    top: 45px;
    left: 0;
    -webkit-animation: ball-spin-loader 2s .9s infinite linear;
    animation: ball-spin-loader 2s .9s infinite linear
}

.ball-spin-loader>span:nth-child(2) {
    top: 30.68px;
    left: 30.68px;
    -webkit-animation: ball-spin-loader 2s 1.8s infinite linear;
    animation: ball-spin-loader 2s 1.8s infinite linear
}

.ball-spin-loader>span:nth-child(3) {
    top: 0;
    left: 45px;
    -webkit-animation: ball-spin-loader 2s 2.7s infinite linear;
    animation: ball-spin-loader 2s 2.7s infinite linear
}

.ball-spin-loader>span:nth-child(4) {
    top: -30.68px;
    left: 30.68px;
    -webkit-animation: ball-spin-loader 2s 3.6s infinite linear;
    animation: ball-spin-loader 2s 3.6s infinite linear
}

.ball-spin-loader>span:nth-child(5) {
    top: -45px;
    left: 0;
    -webkit-animation: ball-spin-loader 2s 4.5s infinite linear;
    animation: ball-spin-loader 2s 4.5s infinite linear
}

.ball-spin-loader>span:nth-child(6) {
    top: -30.68px;
    left: -30.68px;
    -webkit-animation: ball-spin-loader 2s 5.4s infinite linear;
    animation: ball-spin-loader 2s 5.4s infinite linear
}

.ball-spin-loader>span:nth-child(7) {
    top: 0;
    left: -45px;
    -webkit-animation: ball-spin-loader 2s 6.3s infinite linear;
    animation: ball-spin-loader 2s 6.3s infinite linear
}

.ball-spin-loader>span:nth-child(8) {
    top: 30.68px;
    left: -30.68px;
    -webkit-animation: ball-spin-loader 2s 7.2s infinite linear;
    animation: ball-spin-loader 2s 7.2s infinite linear
}

.ball-spin-loader>div {
    animation-fill-mode: both;
    background: green
}

.ball-zig-zag-deflect>div,.ball-zig-zag>div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px 2px 2px 15px;
    top: 4px;
    left: -7px
}

@-webkit-keyframes ball-zig {
    33% {
        -webkit-transform: translate(-15px,-30px);
        transform: translate(-15px,-30px)
    }

    66% {
        -webkit-transform: translate(15px,-30px);
        transform: translate(15px,-30px)
    }

    100% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }
}

@keyframes ball-zig {
    33% {
        -webkit-transform: translate(-15px,-30px);
        transform: translate(-15px,-30px)
    }

    66% {
        -webkit-transform: translate(15px,-30px);
        transform: translate(15px,-30px)
    }

    100% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }
}

@-webkit-keyframes ball-zag {
    33% {
        -webkit-transform: translate(15px,30px);
        transform: translate(15px,30px)
    }

    66% {
        -webkit-transform: translate(-15px,30px);
        transform: translate(-15px,30px)
    }

    100% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }
}

@keyframes ball-zag {
    33% {
        -webkit-transform: translate(15px,30px);
        transform: translate(15px,30px)
    }

    66% {
        -webkit-transform: translate(-15px,30px);
        transform: translate(-15px,30px)
    }

    100% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }
}

.ball-zig-zag {
    position: relative;
    -webkit-transform: translate(-15px,-15px);
    transform: translate(-15px,-15px)
}

.ball-zig-zag>div {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute
}

.ball-zig-zag>div:first-child {
    -webkit-animation: ball-zig .7s 0s infinite linear;
    animation: ball-zig .7s 0s infinite linear
}

.ball-zig-zag>div:last-child {
    -webkit-animation: ball-zag .7s 0s infinite linear;
    animation: ball-zag .7s 0s infinite linear
}

@-webkit-keyframes ball-zig-deflect {
    17%,84% {
        -webkit-transform: translate(-15px,-30px);
        transform: translate(-15px,-30px)
    }

    34%,67% {
        -webkit-transform: translate(15px,-30px);
        transform: translate(15px,-30px)
    }

    100%,50% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }
}

@keyframes ball-zig-deflect {
    17%,84% {
        -webkit-transform: translate(-15px,-30px);
        transform: translate(-15px,-30px)
    }

    34%,67% {
        -webkit-transform: translate(15px,-30px);
        transform: translate(15px,-30px)
    }

    100%,50% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }
}

@-webkit-keyframes ball-zag-deflect {
    17%,84% {
        -webkit-transform: translate(15px,30px);
        transform: translate(15px,30px)
    }

    34%,67% {
        -webkit-transform: translate(-15px,30px);
        transform: translate(-15px,30px)
    }

    100%,50% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }
}

@keyframes ball-zag-deflect {
    17%,84% {
        -webkit-transform: translate(15px,30px);
        transform: translate(15px,30px)
    }

    34%,67% {
        -webkit-transform: translate(-15px,30px);
        transform: translate(-15px,30px)
    }

    100%,50% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }
}

.ball-zig-zag-deflect {
    position: relative;
    -webkit-transform: translate(-15px,-15px);
    transform: translate(-15px,-15px)
}

.ball-zig-zag-deflect>div {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute
}

.line-scale-party>div,.line-scale-pulse-out-rapid>div,.line-scale-pulse-out>div,.line-scale>div {
    width: 4px;
    height: 35px;
    display: inline-block
}

.line-scale-party>div,.line-scale-pulse-out-rapid>div,.line-scale-pulse-out>div,.line-scale>div,.line-spin-fade-loader>div {
    border-radius: 2px;
    margin: 2px;
    background-color: #fff
}

.ball-zig-zag-deflect>div:first-child {
    -webkit-animation: ball-zig-deflect 1.5s 0s infinite linear;
    animation: ball-zig-deflect 1.5s 0s infinite linear
}

.ball-zig-zag-deflect>div:last-child {
    -webkit-animation: ball-zag-deflect 1.5s 0s infinite linear;
    animation: ball-zag-deflect 1.5s 0s infinite linear
}

@-webkit-keyframes line-scale {
    0%,100% {
        -webkit-transform: scaley(1);
        transform: scaley(1)
    }

    50% {
        -webkit-transform: scaley(.4);
        transform: scaley(.4)
    }
}

@keyframes line-scale {
    0%,100% {
        -webkit-transform: scaley(1);
        transform: scaley(1)
    }

    50% {
        -webkit-transform: scaley(.4);
        transform: scaley(.4)
    }
}

.line-scale>div:nth-child(1) {
    -webkit-animation: line-scale 1s -.4s infinite cubic-bezier(.2,.68,.18,1.08);
    animation: line-scale 1s -.4s infinite cubic-bezier(.2,.68,.18,1.08)
}

.line-scale>div:nth-child(2) {
    -webkit-animation: line-scale 1s -.3s infinite cubic-bezier(.2,.68,.18,1.08);
    animation: line-scale 1s -.3s infinite cubic-bezier(.2,.68,.18,1.08)
}

.line-scale>div:nth-child(3) {
    -webkit-animation: line-scale 1s -.2s infinite cubic-bezier(.2,.68,.18,1.08);
    animation: line-scale 1s -.2s infinite cubic-bezier(.2,.68,.18,1.08)
}

.line-scale>div:nth-child(4) {
    -webkit-animation: line-scale 1s -.1s infinite cubic-bezier(.2,.68,.18,1.08);
    animation: line-scale 1s -.1s infinite cubic-bezier(.2,.68,.18,1.08)
}

.line-scale>div:nth-child(5) {
    -webkit-animation: line-scale 1s 0s infinite cubic-bezier(.2,.68,.18,1.08);
    animation: line-scale 1s 0s infinite cubic-bezier(.2,.68,.18,1.08)
}

.line-scale>div {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes line-scale-party {
    0%,100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(.5);
        transform: scale(.5)
    }
}

@keyframes line-scale-party {
    0%,100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(.5);
        transform: scale(.5)
    }
}

.line-scale-party>div:nth-child(1) {
    -webkit-animation-delay: .48s;
    animation-delay: .48s;
    -webkit-animation-duration: .54s;
    animation-duration: .54s
}

.line-scale-party>div:nth-child(2) {
    -webkit-animation-delay: -.15s;
    animation-delay: -.15s;
    -webkit-animation-duration: 1.15s;
    animation-duration: 1.15s
}

.line-scale-party>div:nth-child(3) {
    -webkit-animation-delay: 40ms;
    animation-delay: 40ms;
    -webkit-animation-duration: .77s;
    animation-duration: .77s
}

.line-scale-party>div:nth-child(4) {
    -webkit-animation-delay: -.12s;
    animation-delay: -.12s;
    -webkit-animation-duration: .61s;
    animation-duration: .61s
}

.line-scale-party>div {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: line-scale-party;
    animation-name: line-scale-party;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
    animation-delay: 0
}

@-webkit-keyframes line-scale-pulse-out {
    0%,100% {
        -webkit-transform: scaley(1);
        transform: scaley(1)
    }

    50% {
        -webkit-transform: scaley(.4);
        transform: scaley(.4)
    }
}

@keyframes line-scale-pulse-out {
    0%,100% {
        -webkit-transform: scaley(1);
        transform: scaley(1)
    }

    50% {
        -webkit-transform: scaley(.4);
        transform: scaley(.4)
    }
}

.line-scale-pulse-out>div {
    -webkit-animation: line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85,.25,.37,.85);
    animation: line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85,.25,.37,.85)
}

.line-scale-pulse-out>div:nth-child(2),.line-scale-pulse-out>div:nth-child(4) {
    -webkit-animation-delay: -.4s!important;
    animation-delay: -.4s!important
}

.line-scale-pulse-out>div:nth-child(1),.line-scale-pulse-out>div:nth-child(5) {
    -webkit-animation-delay: -.2s!important;
    animation-delay: -.2s!important
}

@-webkit-keyframes line-scale-pulse-out-rapid {
    0%,90% {
        -webkit-transform: scaley(1);
        transform: scaley(1)
    }

    80% {
        -webkit-transform: scaley(.3);
        transform: scaley(.3)
    }
}

@keyframes line-scale-pulse-out-rapid {
    0%,90% {
        -webkit-transform: scaley(1);
        transform: scaley(1)
    }

    80% {
        -webkit-transform: scaley(.3);
        transform: scaley(.3)
    }
}

.line-scale-pulse-out-rapid>div {
    vertical-align: middle;
    -webkit-animation: line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11,.49,.38,.78);
    animation: line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11,.49,.38,.78)
}

.line-scale-pulse-out-rapid>div:nth-child(2),.line-scale-pulse-out-rapid>div:nth-child(4) {
    -webkit-animation-delay: -.25s!important;
    animation-delay: -.25s!important
}

.line-scale-pulse-out-rapid>div:nth-child(1),.line-scale-pulse-out-rapid>div:nth-child(5) {
    -webkit-animation-delay: 0s!important;
    animation-delay: 0s!important
}

@-webkit-keyframes line-spin-fade-loader {
    50% {
        opacity: .3
    }

    100% {
        opacity: 1
    }
}

@keyframes line-spin-fade-loader {
    50% {
        opacity: .3
    }

    100% {
        opacity: 1
    }
}

.line-spin-fade-loader {
    position: relative;
    top: -10px;
    left: -4px
}

.line-spin-fade-loader>div:nth-child(1) {
    top: 20px;
    left: 0;
    -webkit-animation: line-spin-fade-loader 1.2s -.84s infinite ease-in-out;
    animation: line-spin-fade-loader 1.2s -.84s infinite ease-in-out
}

.line-spin-fade-loader>div:nth-child(2) {
    top: 13.64px;
    left: 13.64px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: line-spin-fade-loader 1.2s -.72s infinite ease-in-out;
    animation: line-spin-fade-loader 1.2s -.72s infinite ease-in-out
}

.line-spin-fade-loader>div:nth-child(3) {
    top: 0;
    left: 20px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-animation: line-spin-fade-loader 1.2s -.6s infinite ease-in-out;
    animation: line-spin-fade-loader 1.2s -.6s infinite ease-in-out
}

.line-spin-fade-loader>div:nth-child(4) {
    top: -13.64px;
    left: 13.64px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-animation: line-spin-fade-loader 1.2s -.48s infinite ease-in-out;
    animation: line-spin-fade-loader 1.2s -.48s infinite ease-in-out
}

.line-spin-fade-loader>div:nth-child(5) {
    top: -20px;
    left: 0;
    -webkit-animation: line-spin-fade-loader 1.2s -.36s infinite ease-in-out;
    animation: line-spin-fade-loader 1.2s -.36s infinite ease-in-out
}

.line-spin-fade-loader>div:nth-child(6) {
    top: -13.64px;
    left: -13.64px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: line-spin-fade-loader 1.2s -.24s infinite ease-in-out;
    animation: line-spin-fade-loader 1.2s -.24s infinite ease-in-out
}

.line-spin-fade-loader>div:nth-child(7) {
    top: 0;
    left: -20px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-animation: line-spin-fade-loader 1.2s -.12s infinite ease-in-out;
    animation: line-spin-fade-loader 1.2s -.12s infinite ease-in-out
}

.line-spin-fade-loader>div:nth-child(8) {
    top: 13.64px;
    left: -13.64px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;
    animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out
}

.line-spin-fade-loader>div {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute;
    width: 5px;
    height: 15px
}

@-webkit-keyframes triangle-skew-spin {
    25% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
        transform: perspective(100px) rotateX(180deg) rotateY(0)
    }

    50% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
        transform: perspective(100px) rotateX(180deg) rotateY(180deg)
    }

    75% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
        transform: perspective(100px) rotateX(0) rotateY(180deg)
    }

    100% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
        transform: perspective(100px) rotateX(0) rotateY(0)
    }
}

@keyframes triangle-skew-spin {
    25% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
        transform: perspective(100px) rotateX(180deg) rotateY(0)
    }

    50% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
        transform: perspective(100px) rotateX(180deg) rotateY(180deg)
    }

    75% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
        transform: perspective(100px) rotateX(0) rotateY(180deg)
    }

    100% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
        transform: perspective(100px) rotateX(0) rotateY(0)
    }
}

.triangle-skew-spin>div {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #fff;
    -webkit-animation: triangle-skew-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;
    animation: triangle-skew-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite
}

@-webkit-keyframes square-spin {
    25% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
        transform: perspective(100px) rotateX(180deg) rotateY(0)
    }

    50% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
        transform: perspective(100px) rotateX(180deg) rotateY(180deg)
    }

    75% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
        transform: perspective(100px) rotateX(0) rotateY(180deg)
    }

    100% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
        transform: perspective(100px) rotateX(0) rotateY(0)
    }
}

@keyframes square-spin {
    25% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
        transform: perspective(100px) rotateX(180deg) rotateY(0)
    }

    50% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
        transform: perspective(100px) rotateX(180deg) rotateY(180deg)
    }

    75% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
        transform: perspective(100px) rotateX(0) rotateY(180deg)
    }

    100% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
        transform: perspective(100px) rotateX(0) rotateY(0)
    }
}

.square-spin>div {
    width: 50px;
    height: 50px;
    background: #fff;
    -webkit-animation: square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;
    animation: square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite
}

.pacman>div:first-of-type,.pacman>div:nth-child(2) {
    width: 0;
    height: 0;
    border-right: 25px solid transparent;
    border-top: 25px solid #fff;
    border-left: 25px solid #fff;
    border-bottom: 25px solid #fff;
    border-radius: 25px;
    position: relative;
    left: -30px
}

@-webkit-keyframes rotate_pacman_half_up {
    0%,100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg)
    }

    50% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotate_pacman_half_up {
    0%,100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg)
    }

    50% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes rotate_pacman_half_down {
    0%,100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    50% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

@keyframes rotate_pacman_half_down {
    0%,100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    50% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

@-webkit-keyframes pacman-balls {
    75% {
        opacity: .7
    }

    100% {
        -webkit-transform: translate(-100px,-6.25px);
        transform: translate(-100px,-6.25px)
    }
}

@keyframes pacman-balls {
    75% {
        opacity: .7
    }

    100% {
        -webkit-transform: translate(-100px,-6.25px);
        transform: translate(-100px,-6.25px)
    }
}

.pacman {
    position: relative
}

.pacman>div:nth-child(3) {
    -webkit-animation: pacman-balls 1s -.66s infinite linear;
    animation: pacman-balls 1s -.66s infinite linear
}

.pacman>div:nth-child(4) {
    -webkit-animation: pacman-balls 1s -.33s infinite linear;
    animation: pacman-balls 1s -.33s infinite linear
}

.pacman>div:nth-child(5) {
    -webkit-animation: pacman-balls 1s 0s infinite linear;
    animation: pacman-balls 1s 0s infinite linear
}

.pacman>div:first-of-type {
    -webkit-animation: rotate_pacman_half_up .5s 0s infinite;
    animation: rotate_pacman_half_up .5s 0s infinite
}

.pacman>div:nth-child(2) {
    -webkit-animation: rotate_pacman_half_down .5s 0s infinite;
    animation: rotate_pacman_half_down .5s 0s infinite;
    margin-top: -50px
}

.pacman>div:nth-child(3),.pacman>div:nth-child(4),.pacman>div:nth-child(5),.pacman>div:nth-child(6) {
    background-color: #fff;
    border-radius: 100%;
    margin: 2px;
    width: 10px;
    height: 10px;
    position: absolute;
    -webkit-transform: translate(0,-6.25px);
    transform: translate(0,-6.25px);
    top: 25px;
    left: 70px
}

@-webkit-keyframes cube-transition {
    25% {
        -webkit-transform: translateX(50px) scale(.5) rotate(-90deg);
        transform: translateX(50px) scale(.5) rotate(-90deg)
    }

    50% {
        -webkit-transform: translate(50px,50px) rotate(-180deg);
        transform: translate(50px,50px) rotate(-180deg)
    }

    75% {
        -webkit-transform: translateY(50px) scale(.5) rotate(-270deg);
        transform: translateY(50px) scale(.5) rotate(-270deg)
    }

    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg)
    }
}

@keyframes cube-transition {
    25% {
        -webkit-transform: translateX(50px) scale(.5) rotate(-90deg);
        transform: translateX(50px) scale(.5) rotate(-90deg)
    }

    50% {
        -webkit-transform: translate(50px,50px) rotate(-180deg);
        transform: translate(50px,50px) rotate(-180deg)
    }

    75% {
        -webkit-transform: translateY(50px) scale(.5) rotate(-270deg);
        transform: translateY(50px) scale(.5) rotate(-270deg)
    }

    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg)
    }
}

.cube-transition {
    position: relative;
    -webkit-transform: translate(-25px,-25px);
    transform: translate(-25px,-25px)
}

.cube-transition>div {
    width: 10px;
    height: 10px;
    position: absolute;
    top: -5px;
    left: -5px;
    background-color: #fff;
    -webkit-animation: cube-transition 1.6s 0s infinite ease-in-out;
    animation: cube-transition 1.6s 0s infinite ease-in-out
}

.cube-transition>div:last-child {
    -webkit-animation-delay: -.8s;
    animation-delay: -.8s
}

@-webkit-keyframes spin-rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes spin-rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.semi-circle-spin {
    position: relative;
    width: 35px;
    height: 35px;
    overflow: hidden
}

.semi-circle-spin>div {
    position: absolute;
    border-width: 0;
    border-radius: 100%;
    -webkit-animation: spin-rotate .6s 0s infinite linear;
    animation: spin-rotate .6s 0s infinite linear;
    background-image: linear-gradient(transparent 0,transparent 70%,#fff 30%,#fff 100%);
    width: 100%;
    height: 100%
}

















/*ローディング*/

.jumping span:first-of-type {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.jumping span:nth-of-type(2) {
  -webkit-animation-delay: 2.1s;
  animation-delay: 2.1s;
}

.jumping span:nth-of-type(3) {
  -webkit-animation-delay: 2.2s;
  animation-delay: 2.2s;
}


.jumping span {
  -webkit-animation: poyon 1.1s linear 0s 1;
  animation: poyon 1.1s linear 0s 1;
}

.jumping span:first-of-type {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.jumping span:nth-of-type(2) {
  -webkit-animation-delay: 2.1s;
  animation-delay: 2.1s;
}

.jumping span:nth-of-type(3) {
  -webkit-animation-delay: 2.2s;
  animation-delay: 2.2s;
}


.p-opening {
  position: fixed;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100vh;
  background: #D1DBE5;
  width: 100%;
  opacity: 0;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
  z-index: 500;
}

.p-opening .bg-img {
  display: block;
}

.p-opening .bg-img01 {
  width: 100px;
  margin-top: 60px;

}

.p-opening .bg-img02 {
  width: 58px;
  margin-top: 10px;
}

.p-opening .bg-img03 {
  width: 60px;
  margin-top: 53px;
}

.p-opening__inner {
  width: 290px;
}

.p-opening__img-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-right: 32px;
}

.p-opening__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  width: 190px;
  margin: 20px auto 0 auto;
}

.p-opening__text span {
  display: block;
}

@media (max-width: 767px) {
  .p-opening__inner {
    margin-top: -80px;
    width: 260px;
  }
  .p-opening__text {
    width: 170px;
  }
  .p-opening__text span:first-of-type {
    width: 17px;
  }
  .p-opening__text span:nth-of-type(2) {
    width: 24px;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
	position:relative;
	right: -3px;
  }
  .p-opening__text span:nth-of-type(3) {
    width: 20px;
	-webkit-transform: translateY(-2px);
    transform: translateY(-2.7px);
	position:relative;
	bottom:-0.5px;
	left: -3px;
	
  }
  .p-opening__text span:nth-of-type(4) {
    width: 6.5px;
	position:relative;
	left: -2px;
	top:-2px;
  }
  .p-opening__text span:nth-of-type(5) {
    width: 17.5px;
	position:relative;
	right: -2px;
	bottom:-4px;

  }
  .p-opening__text span:nth-of-type(6) {
    width: 9.5px;
	position:relative;
	right: -8px;
	bottom:-1x;
  }
  .p-opening__text span:nth-of-type(7) {
    width: 17px;
	position:relative;
	bottom:-3px;
	right: -11px;
  }
  .p-opening__text span:nth-of-type(8) {
    width: 16px;
	-webkit-transform: translateY(4px);
    transform: translateY(4px);
	position:relative;
	right: -12px;
	bottom:0px;
  }
  .p-opening__text span:nth-of-type(9) {
    width: 16px;
	position:relative;
	right: -14px;
	bottom:-5px;
  }
.p-opening .bg-img01 {
  width: 90px;
  margin-top: 57px;

}

.p-opening .bg-img02 {
  width: 53px;
  margin-top: 10px;
}

.p-opening .bg-img03 {
  width: 58px;
  margin-top: 45px;
}
}

@media screen and (min-width: 768px), print {
  .p-opening__text span:first-of-type {
    width: 17px;
  }
  .p-opening__text span:nth-of-type(2) {
    width: 24px;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
	position:relative;
	right: -4px;
  }
  .p-opening__text span:nth-of-type(3) {
    width: 20px;
	-webkit-transform: translateY(-2px);
    transform: translateY(-2.7px);
	position:relative;
	left: -4px;
	
  }
  .p-opening__text span:nth-of-type(4) {
    width: 6.5px;
	position:relative;
	left: -2px;
	top:-2px;
  }
  .p-opening__text span:nth-of-type(5) {
    width: 17.5px;
	position:relative;
	right: -2px;
  }
  .p-opening__text span:nth-of-type(6) {
    width: 9.5px;
	position:relative;
	right: -6px;
  }
  .p-opening__text span:nth-of-type(7) {
    width: 17px;
	position:relative;
	bottom:-3px;
	right: -7px;
  }
  .p-opening__text span:nth-of-type(8) {
    width: 16px;
	-webkit-transform: translateY(4px);
    transform: translateY(4px);
	position:relative;
	right: -6px;
  }
  .p-opening__text span:nth-of-type(9) {
    width: 17px;
	position:relative;
	right: -6px;
  }

}



.fadeIn {
  -webkit-animation: fadeInDown 1s;
  animation: fadeInDown 1s;
}

.fadeIn2 {
  opacity: 0;
  -webkit-animation: fade_in 1s forwards;
  animation: fade_in 1s forwards;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}



.each-text-wave span {
  -webkit-animation-name: wave;
  animation-name: wave;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-iteration-count: 2;
  animation-iteration-count: 2;
}

.each-text-wave span:first-of-type {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.each-text-wave span:nth-child(2) {
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
}

.each-text-wave span:nth-child(3) {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

.each-text-wave span:nth-child(4) {
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
}

.each-text-wave span:nth-child(5) {
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
}

.each-text-wave span:nth-child(6) {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.each-text-wave span:nth-child(7) {
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

.each-text-wave span:nth-child(8) {
  -webkit-animation-delay: 1.7s;
  animation-delay: 1.7s;
}

.each-text-wave span:nth-child(9) {
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s;
}

.each-text-wave span:nth-child(10) {
  -webkit-animation-delay: 1.9s;
  animation-delay: 1.9s;
}


.p-top-mv-img.is-active {
  -webkit-animation: scallDownFadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1
    forwards;
  animation: scallDownFadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.p-top-mv-wrapper__inner.is-visible::after {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}


.p-top-mv-img.is-visible::before {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}



.p-top-mv-img__wrapper {
  position: relative;
    min-width: 1050px;
	z-index: 100;
  }


.ico-eye-bg {
  position: absolute;
}

.ico-eye-bg .bg-img01 {
  width: 12px;
  position: absolute;
  top: 50%;
  left: 65%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.ico-eye-bg.ico-eye-left::before,
.ico-eye-bg.ico-eye-left::after {
  content: "";
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
}


.ico-eye-bg.ico-eye-right {
  top: 65px;
  right: 25px;
}

@media (max-width: 767px) {
  .ico-eye-bg .bg-img01.img-eye {
    width: 27px;
    position: absolute;
    top: 25%;
    left: 15%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: rotate_top 4s linear infinite;
    animation: rotate_top 4s linear infinite;
  }
  .ico-eye-bg.ico-eye-left::before {
    display: none;
  }
  .ico-eye-bg.ico-eye-left::after {
    top: -48px;
    right: -18px;
  }
  .ico-eye-bg.ico-eye-right {
    top: 65px;
    right: 29px;
  }
}

@media screen and (min-width: 768px), print {
  .ico-eye-bg {
    top: 160px;
    right: 230px;
    width: 25px;
    height: 36px;
    background-size: 25px 36px;
    top: 210px;
    right: 150px;
  }
  .ico-eye-bg .bg-img01 {
    width: 27px;
  }
  .ico-eye-bg.ico-eye-left {
    right: 165px;
    top: 225px;
    bottom: 0;
    left: 0px;
    margin: 0 auto;
	z-index: 2;
}
  }

  .ico-eye-bg.ico-eye-left::after {
    z-index: 20;
    width: 87px;
    height: 44px;
    background-size: contain;
    top: -50px;
    right: -72px;
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  .ico-eye-bg.ico-eye-right {
    right: 0px;
    top: 215px;
    bottom: 0;
    left: 110px;
    margin: 0 auto;
}





@-webkit-keyframes poyon {
  0% {
    -webkit-transform: scale(1, 1.2) translate(0%, -25%);
    transform: scale(1, 1.2) translate(0%, -25%);
  }
  10% {
    -webkit-transform: scale(1, 1.2) translate(0%, -13%);
    transform: scale(1, 1.2) translate(0%, -13%);
  }
  20% {
    -webkit-transform: scale(1.2, 0.8) translate(0%, 19%);
    transform: scale(1.2, 0.8) translate(0%, 19%);
  }
  30% {
    -webkit-transform: scale(1, 1.1) translate(0%, -5%);
    transform: scale(0.9, 1.1) translate(0%, -5%);
  }
  40% {
    -webkit-transform: scale(0.95, 1.2) translate(0%, -19%);
    transform: scale(0.95, 1.1) translate(0%, -19%);
  }
  50% {
    -webkit-transform: scale(0.95, 1.2) translate(0%, -3%);
    transform: scale(0.95, 1.1) translate(0%, -3%);
  }
  60% {
    -webkit-transform: scale(1.1, 0.9) translate(0%, 2%);
    transform: scale(1.1, 0.9) translate(0%, 2%);
  }
  70% {
    -webkit-transform: scale(1, 1) translate(0%, 0%);
    transform: scale(1, 1) translate(0%, 0%);
  }
  100% {
    -webkit-transform: scale(1, 1) translate(0%, 0%);
    transform: scale(1, 1) translate(0%, 0%);
  }
}

@keyframes poyon {
  0% {
    -webkit-transform: scale(1, 1.2) translate(0%, -25%);
    transform: scale(1, 1.2) translate(0%, -25%);
  }
  10% {
    -webkit-transform: scale(1, 1.2) translate(0%, -13%);
    transform: scale(1, 1.2) translate(0%, -13%);
  }
  20% {
    -webkit-transform: scale(1.2, 0.8) translate(0%, 19%);
    transform: scale(1.2, 0.8) translate(0%, 19%);
  }
  30% {
    -webkit-transform: scale(1, 1.1) translate(0%, -5%);
    transform: scale(0.9, 1.1) translate(0%, -5%);
  }
  40% {
    -webkit-transform: scale(0.95, 1.2) translate(0%, -19%);
    transform: scale(0.95, 1.1) translate(0%, -19%);
  }
  50% {
    -webkit-transform: scale(0.95, 1.2) translate(0%, -3%);
    transform: scale(0.95, 1.1) translate(0%, -3%);
  }
  60% {
    -webkit-transform: scale(1.1, 0.9) translate(0%, 2%);
    transform: scale(1.1, 0.9) translate(0%, 2%);
  }
  70% {
    -webkit-transform: scale(1, 1) translate(0%, 0%);
    transform: scale(1, 1) translate(0%, 0%);
  }
  100% {
    -webkit-transform: scale(1, 1) translate(0%, 0%);
    transform: scale(1, 1) translate(0%, 0%);
  }
}


@-webkit-keyframes wave {
  100% {
    -webkit-transform: translate3d(0, -6px, 0);
    transform: translate3d(0, -6px, 0);
  }
}

@keyframes wave {
  100% {
    -webkit-transform: translate3d(0, -6px, 0);
    transform: translate3d(0, -6px, 0);
  }
}





.cm-noise {
    height:100%; 
    left:0; 
    opacity:.12; 
    pointer-events: none;
    position: fixed;
    top: 0;
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
    z-index: 499;
	background: #899AAE;
}



@media screen and (max-width: 1024px) {
    .cm-noise {
        opacity:.1
    }
}




.face_move {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  width: 100%;
  min-height: 500px;
  max-height: 500px;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  transition: all 2s ease 2s;
  animation-name: fadeInface;
  animation-timing-function: ease-in-out;
  animation-delay: 2.4s;
  animation-duration:2.5s;
  animation-fill-mode:both;
}


.top_face1{
      position: absolute;
      opacity: 1;
      width: 20px;
      height: 20px;
      transition: transform .6s linear .008s;
    }

 .top_face2 {
      position: absolute;
      opacity: 1;
      width: 27px;
      height: 25px;
	  top: 230px;
	  right: 300px;
	  left: 0px;
	  bottom: 0;
	  margin: 0 auto;
	  background: url("../img/animation/left_eye.png");
	  background-repeat: no-repeat;
	  background-size:27px 25px;
      transition: transform .4s linear .008s;
    }
.top_face3 {
      position: absolute;
      opacity: 1;
      width: 27px;
      height: 22px;
	  top: 230px;
	  right: 0px;
	  left: 90px;
	  bottom: 0;
	  margin: 0 auto;
	  background: url("../img/animation/right_eye.png");
	  background-repeat: no-repeat;
	  background-size:27px 22px;
      transition: transform .3s linear 0s;
    }
 
.top_face4 {
      position: absolute;
	  opacity: 1;
	  width: 145px;
	  height: 158px;
	  top: 255px;
	  right: 90px;
	  left: 0px;
	  bottom: 0;
	  margin: 0 auto;
	  background: url("../img/animation/hana.png");
	  background-repeat: repeat;
	  background-size: auto;
	  background-repeat: no-repeat;
	  background-size: 145px 158px;
	  transition: transform .8s ease-in-out .004s;
    }


 .top_face5 {
	  position: absolute;
	  opacity: 1;
	  width: 95px;
	  height: 70px;
	  top: 144px;
	  right: 480px;
	  left: 0px;
	  bottom: 0;
	  margin: 0 auto;
	  background: url(../img/animation/mimi_right.png);
	  background-repeat: no-repeat;
	  background-size: 95px 70px;
	  transition: transform 1s linear .02s;
    }
.top_face6 {
	  position: absolute;
	  opacity: 1;
	  width: 95px;
	  height: 69px;
	  top: 144px;
	  right: 0;
	  left: 270px;
	  bottom: 0;
	  margin: 0 auto;
	  background: url(../img/animation/mimi_left.png);
	  background-repeat: no-repeat;
	  background-size: 95px 69px;
	  transition: transform 1s linear .02s;
    }
 



@media screen and (max-width: 766px) {

 .top_face2 {
	  right: 210px;
    }
.top_face3 {
	  left: 170px;
    }
 
.top_face4 {
	  right: 0px;
	  left: 10px;
    }

 .top_face5 {
	  right: 400px;
    }
.top_face6 {
	  left: 315px;
    }
 
}


.ico-eye-bg{
  transition: all 2s ease 3.6s;
  animation-name: fadeInface;
  animation-timing-function: ease-in-out;
  animation-delay: 3.6s;
  animation-duration:2s;
  animation-fill-mode:both;
}

@keyframes fadeInface{
  0% { opacity: 0; transform: translateY(30px);}
  20% { opacity: 0; transform: translateY(30px);}
  100% {opacity: 1; transform: translateY(0px);}
}
@keyframes fadeOutface{
  0% { display: block;opacity: 1;}
  88% { display: block;opacity: 1;}
  98% {display: block;opacity: 0;}
  100% {display: none;opacity: 0;}
}






@media (max-width: 1200px) {
.ico-eye-bg.ico-eye-left::before {
    display: none;
  }
  .ico-eye-bg.ico-eye-left::after {
    display: none;
  }
}

@media screen and (min-width: 768px), print {
  .ico-eye-bg.ico-eye-left::before {
    background-image: url(../img/top/coffee_kuma_hand2.png);
    width: 150px;
    height: 228px;
    background-size: contain;
    top: -270px;
    left: 380px;
    right: 0px;
    bottom: 0px;
    z-index: 23;
    -webkit-animation: katakata 3s infinite ease-in-out alternate;
    animation: katakata 3s infinite ease-in-out alternate;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
	  
  }
	
  .ico-eye-bg.ico-eye-left::after {
    background-image: url(../img/top/nodatekanban.png);
    background-size: contain;
    width: 170px;
	height: 197px;
    top: -270px;
    left: 440px;
    right: 0px;
    bottom: 0px;
    z-index: 22;
    transform: rotate(360deg);
    -webkit-animation: a-main-common-kata-two 1.6s infinite normal;
    animation: a-main-common-kata-two 1.6s infinite normal;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }

}



.vertical-shake {
  -webkit-animation: a-main-common-kata-two 1.6s infinite normal;
  animation: a-main-common-kata-two 1.6s infinite normal;
}

@-webkit-keyframes katakata {
  0% {
    -webkit-transform: translate(0, -2px) rotate(3deg);
    transform: translate(0, -2px) rotate(3deg);
  }
  10% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(0, 0) rotate(-3deg);
    transform: translate(0, 0) rotate(-3deg);
  }
  30% {
    -webkit-transform: translate(0, -2px) rotate(0deg);
    transform: translate(0, -2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(0, -2px) rotate(3deg);
    transform: translate(0, -2px) rotate(3deg);
  }
  50% {
    -webkit-transform: translate(2px, 0) rotate(-1deg);
    transform: translate(2px, 0) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(0, 2px) rotate(0deg);
    transform: translate(0, 2px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(0, 0) rotate(3deg);
    transform: translate(0, 0) rotate(3deg);
  }
  80% {
    -webkit-transform: translate(2px, 0) rotate(-1deg);
    transform: translate(2px, 0) rotate(-1deg);
  }
  90% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(0, -2px) rotate(3deg);
    transform: translate(0, -2px) rotate(3deg);
  }
}

@keyframes katakata {
  0% {
    -webkit-transform: translate(0, -2px) rotate(3deg);
    transform: translate(0, -2px) rotate(3deg);
  }
  10% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(0, 0) rotate(-3deg);
    transform: translate(0, 0) rotate(-3deg);
  }
  30% {
    -webkit-transform: translate(0, -2px) rotate(0deg);
    transform: translate(0, -2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(0, -2px) rotate(3deg);
    transform: translate(0, -2px) rotate(3deg);
  }
  50% {
    -webkit-transform: translate(2px, 0) rotate(-1deg);
    transform: translate(2px, 0) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(0, 2px) rotate(0deg);
    transform: translate(0, 2px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(0, 0) rotate(3deg);
    transform: translate(0, 0) rotate(3deg);
  }
  80% {
    -webkit-transform: translate(2px, 0) rotate(-1deg);
    transform: translate(2px, 0) rotate(-1deg);
  }
  90% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(0, -2px) rotate(3deg);
    transform: translate(0, -2px) rotate(3deg);
  }
}


@-webkit-keyframes a-main-common-kata-two {
  0%,
  10%,
  21%,
  30%,
  41%,
  to {
    -webkit-transform: translateY(1px);
    transform: translate(2px, 2px);
  }
  11%,
  20%,
  31%,
  40% {
    -webkit-transform: translateY(-1px);
    transform: translate(-2px, -2px);
  }
}

@keyframes a-main-common-kata-two {
  0%,
  10%,
  21%,
  30%,
  41%,
  to {
    -webkit-transform: translateY(1px);
    transform: translate(-2px, 2px);
  }
  11%,
  20%,
  31%,
  40% {
    -webkit-transform: translateY(-1px);
    transform: translate(2px, -2px);
  }
}



@-webkit-keyframes a-main-common-kata-two2 {
  0%,
  10%,
  21%,
  30%,
  41%,
  to {
    -webkit-transform: translateY(1px);
    transform: translate(0px, 1px);
  }
  11%,
  20%,
  31%,
  40% {
    -webkit-transform: translateY(-1px);
    transform: translate(0px, -1px);
  }
}

@keyframes a-main-common-kata-two2 {
  0%,
  10%,
  21%,
  30%,
  41%,
  to {
    -webkit-transform: translateY(1px);
    transform: translate(0px, 1px);
  }
  11%,
  20%,
  31%,
  40% {
    -webkit-transform: translateY(-1px);
    transform: translate(0px, -1px);
  }
}







.c-title__lineBody {
    display: flex;
    overflow: hidden;
    width: 104%;
	display: flex;
    justify-content: center;
}

@media screen and (max-width: 640px) {
.c-title__lineBody.nagai {
    width: 120%;
}
}

.c-title__lineBody span span{
    --scalex: 1.1;
    --margin: .17;
    display: block;
    transform-origin: top left
}

.c-title.is-center :is(.c-title__lineBody span) {
    transform-origin: top center
}

.c-title__lineBody span:not(:first-of-type) {
    margin-left: calc(var(--margin)*1em)
}

.cm-under__title .c-title__lineBody {
    padding: 0 .1em
}

.p-top__calenderTitle .c-title__lineBody span {
    transform: scaleY(var(--scalex))
}

@media screen and (max-width: 1024px) {
    .p-top__calenderTitle .c-title__lineBody span {
        transform:scaleX(var(--scalex))
    }
}

.p-top__calenderTitle .c-title__lineBody span:not(:first-of-type) {
    margin: calc(var(--margin)*1em) 0 0 0
}

@media screen and (max-width: 1024px) {
    .p-top__calenderTitle .c-title__lineBody span:not(:first-of-type) {
        margin:0 0 0 calc(var(--margin)*1em)
    }
}


.p-eventslist .cm-under__title .c-title__line:nth-of-type(2) .c-title__lineBody {
    align-items: flex-end
}

.p-eventslist .cm-under__title .c-title__line:nth-of-type(2) .c-title__lineBody span:first-of-type {
    --ml: 12;
    --mr: 16;
    background: currentColor;
    border-radius: 50%;
    content: "";
    height: calc(7em/var(--fs));
    margin: 0 calc(var(--mr)*1em/var(--fs)) .2em calc(var(--ml)*1em/var(--fs));
    width: calc(7em/var(--fs))
}



.p-revery__serviceBlockTxt .c-title__lineBody {
    align-items: flex-end
}

.p-revery__serviceBlock:nth-of-type(3) .p-revery__serviceBlockTxt .c-title__line:nth-of-type(2) .c-title__lineBody span:first-of-type {
    background-color: var(--main-color);
    border-radius: 50%;
    display: block;
    height: calc(7em/var(--title-fs));
    margin: 0 calc(30em/var(--title-fs)) .25em calc(8em/var(--title-fs));
    width: calc(7em/var(--title-fs))
}



.p-top__about {
    --ptb: 0;
	--ptc: 150;
    padding: calc(var(--ptb)*1em/16) 0 calc(var(--ptc)*1em/16);
}

@media screen and (max-width: 1024px) {
.p-top__about {
    --ptb: 230*.8;
	--ptc: 120;
    padding: calc(var(--ptb)*1em/16) 0 calc(var(--ptc)*1em/16);
}
}


@media screen and (max-width: 640px) {
.p-top__about {
    --ptb: 230*.8;
	--ptc: 0;
    padding: calc(var(--ptb)*1em/16) 0 calc(var(--ptc)*1em/16);
}
}

@media screen and (max-width: 430px) {
    .p-top__about {
    --ptb:190*.8;
	--ptc: 0;
    }
}

@media screen and (max-width: 330px) {
    .p-top__about {
    --ptb:120*.8
    }
}
.p-top__about-inner {
    --wnum: 1250;
    --hnum: 1211;
    --letter-width: calc(var(--wnum)/1600*100vw);
    --letter-height: calc(var(--hnum)/1600*100vw);
    align-items: center;
    display: flex;
    height: var(--letter-height);
    justify-content: center;
    position: relative
}

@media screen and (min-width: 1760px) {
    .p-top__about-inner {
        --letter-width:calc(var(--wnum)*1.1em/16);
        --letter-height: calc(var(--hnum)*1.1em/16)
    }
}

@media screen and (max-width: 1620px) {
    .p-top__about-inner {
        --letter-width:calc(var(--wnum)*1em/16);
        --letter-height: calc(var(--hnum)*1em/16)
    }
}

@media screen and (max-width: 640px) {
    .p-top__about-inner {
        --letter-width:calc(var(--wnum)*0.95em/16);
        --letter-height: calc(var(--hnum)*0.95em/16)
    }
}

@media screen and (max-width: 430px) {
    .p-top__about-inner {
        --letter-width:calc(var(--wnum)*0.9em/16);
        --letter-height: calc(var(--hnum)*0.9em/16)
    }
}

.p-top__aboutBody {
    --w: 30.75em;
    --mt: 160;
    margin-top: calc(var(--mt)*1em/16);
    position: relative;
    text-align: left;
    width: calc(var(--w));
    z-index: 1
}

@media screen and (max-width: 1024px) {
    .p-top__aboutBody {
        --w:72%;
        --mt:150;
    }
}

@media screen and (max-width: 700px) {
    .p-top__aboutBody {
        --mt:90;
    }
}

@media screen and (max-width: 640px) {
    .p-top__aboutBody {
        --mt:0;
    }
}

@media screen and (max-width: 459px) {
    .p-top__aboutBody {
        --mt:80;
    }
}

@media screen and (max-width: 430px) {
    .p-top__aboutBody {
        --w:80%;
        --mt:0;
    }
}

.p-top__aboutLetter {
    height: 100%;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translate3d(-50%,0,0);
    width: var(--letter-width)
}

.p-top__aboutLetterBody {
    margin-left: calc(0/var(--wnum)*100%);
    width: 100%;
	opacity: .13;
}



.p-top__aboutObjectItem {
    --transform-x: 0;
    --transform-y: 0;
    position: absolute;
    transform: translate3d(calc(var(--transform-x)*1em/16),calc(var(--transform-y)*1em/16),0)
}

.p-top__aboutObjectItem.is-left {
    --transform-x: -300;
    --transform-y: -180
}

@media screen and (max-width: 1024px) {
    .p-top__aboutObjectItem.is-left {
        --transform-x:0;
        --transform-y: 0
    }
}

.p-top__aboutObjectItem.is-right {
    --transform-x: 300;
    --transform-y: 180
}

@media screen and (max-width: 1024px) {
    .p-top__aboutObjectItem.is-right {
        --transform-x:0;
        --transform-y: 0
    }
    .p-top__aboutObjectItem.is-right.scroll_up{
        top: 2.5em;
    }
    .p-top__aboutObjectItem.is-right.scroll_up.scroll_on1 {
        top: 0em!important;
    }

}

@media screen and (max-width: 768px) {
    .p-top__aboutObjectItem {
        --fs:14;
        font-size: calc(var(--fs)/750*100vw)
    }
    .p-top__aboutObjectItem.is-right.scroll_up.scroll_on1 {
        margin-top: 30px;
    }
}


@media screen and (max-width: 700px) {

    .p-top__aboutObjectItem.is-right.scroll_up.scroll_on1 {
        margin-top: 0px;
    }
}


.p-top__aboutObjectItem:first-of-type {
    right: calc(-570 / var(--wnum)* 100%);
    top: calc(-50 / var(--hnum)* 100%);
    width: calc(750 / var(--wnum)* 100%);
}

.p-top__aboutObjectItem:first-of-type img{
	-webkit-animation: katakata 4s step-start 2s infinite normal;
    animation: katakata 4s step-start 2s infinite normal;
}

@media screen and (max-width: 1024px) {
    .p-top__aboutObjectItem:first-of-type {
        display:none
    }
}

.p-top__aboutObjectItem:nth-of-type(2) {
	right: calc(-570/var(--wnum)*100%);
	top: calc(900/var(--hnum)*100%);
    width: calc(520/var(--wnum)*100%);
}
.p-top__aboutObjectItem:nth-of-type(2) img{
	-webkit-animation: katakata2 4s step-start 2s infinite normal;
    animation: katakata2 4s step-start 2s infinite normal;
}

@media screen and (max-width: 1024px) {
    .p-top__aboutObjectItem:nth-of-type(2) {
        display:none
    }
}

.p-top__aboutObjectItem:nth-of-type(3) {
	bottom: calc(460 / var(--hnum)* 100%);
    right: calc(1230 / var(--wnum)* 100%);
    width: calc(455 / var(--wnum)* 100%);
}

.p-top__aboutObjectItem:nth-of-type(3) img{
	-webkit-animation: katakata 4s step-start 0s infinite normal;
    animation: katakata 4s step-start 0s infinite normal;
}

@media screen and (max-width: 1024px) {
    .p-top__aboutObjectItem:nth-of-type(3) {
        display:none
    }
}

.p-top__aboutObjectItem:nth-of-type(4) {
        display:none;
}

.p-top__aboutObjectItem:nth-of-type(4) img{
	-webkit-animation: katakata 4s step-start 2s infinite normal;
    animation: katakata 4s step-start 2s infinite normal;
}

@media screen and (max-width: 1024px) {
    .p-top__aboutObjectItem:nth-of-type(4) {
		display: block; 
		width: 26em;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
    }
}



@-webkit-keyframes katakata {
  0% {
    -webkit-transform: translate(0, -1px) rotate(3deg);
    transform: translate(0, -1px) rotate(3deg);
  }
  10% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(0, 0) rotate(-3deg);
    transform: translate(0, 0) rotate(-3deg);
  }
  30% {
    -webkit-transform: translate(0, -1px) rotate(0deg);
    transform: translate(0, -1px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(0, -1px) rotate(2deg);
    transform: translate(0, -1px) rotate(2deg);
  }
  50% {
    -webkit-transform: translate(1px, 0) rotate(-1deg);
    transform: translate(1px, 0) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(0, 1px) rotate(0deg);
    transform: translate(0, 1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(0, 0) rotate(3deg);
    transform: translate(0, 0) rotate(3deg);
  }
  80% {
    -webkit-transform: translate(1px, 0) rotate(-1deg);
    transform: translate(1px, 0) rotate(-1deg);
  }
  90% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(0, -1px) rotate(3deg);
    transform: translate(0, -1px) rotate(3deg);
  }
}

@keyframes katakata {
  0% {
    -webkit-transform: translate(0, -1px) rotate(3deg);
    transform: translate(0, -1px) rotate(3deg);
  }
  10% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(0, 0) rotate(-3deg);
    transform: translate(0, 0) rotate(-3deg);
  }
  30% {
    -webkit-transform: translate(0, -1px) rotate(0deg);
    transform: translate(0, -1px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(0, -1px) rotate(3deg);
    transform: translate(0, -1px) rotate(3deg);
  }
  50% {
    -webkit-transform: translate(1px, 0) rotate(-1deg);
    transform: translate(1px, 0) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(0, 1px) rotate(0deg);
    transform: translate(0, 1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(0, 0) rotate(3deg);
    transform: translate(0, 0) rotate(3deg);
  }
  80% {
    -webkit-transform: translate(1px, 0) rotate(-1deg);
    transform: translate(1px, 0) rotate(-1deg);
  }
  90% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(0, -1px) rotate(3deg);
    transform: translate(0, -1px) rotate(3deg);
  }
}


@-webkit-keyframes katakata2 {
  0% {
    -webkit-transform: translate(0, 1px) rotate(-3deg);
    transform: translate(0, 1px) rotate(-3deg);
  }
  10% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(0, 0) rotate(3deg);
    transform: translate(0, 0) rotate(3deg);
  }
  30% {
    -webkit-transform: translate(0, 1px) rotate(0deg);
    transform: translate(0, 1px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(0, 1px) rotate(-3deg);
    transform: translate(0, 1px) rotate(-3deg);
  }
  50% {
    -webkit-transform: translate(-1px, 0) rotate(1deg);
    transform: translate(-1px, 0) rotate(1deg);
  }
  60% {
    -webkit-transform: translate(0, -1px) rotate(0deg);
    transform: translate(0, -1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(0, 0) rotate(-3deg);
    transform: translate(0, 0) rotate(-3deg);
  }
  80% {
    -webkit-transform: translate(-1px, 0) rotate(1deg);
    transform: translate(-1px, 0) rotate(1deg);
  }
  90% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(0, 1px) rotate(-3deg);
    transform: translate(0, 1px) rotate(-3deg);
  }
}

@keyframes katakata2 {
  0% {
    -webkit-transform: translate(0, 1px) rotate(-3deg);
    transform: translate(0, 1px) rotate(-3deg);
  }
  10% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(0, 0) rotate(3deg);
    transform: translate(0, 0) rotate(3deg);
  }
  30% {
    -webkit-transform: translate(0, 1px) rotate(0deg);
    transform: translate(0, 1px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(0, 1px) rotate(-3deg);
    transform: translate(0, 1px) rotate(-3deg);
  }
  50% {
    -webkit-transform: translate(-1px, 0) rotate(1deg);
    transform: translate(-1px, 0) rotate(1deg);
  }
  60% {
    -webkit-transform: translate(0, -1px) rotate(0deg);
    transform: translate(0, -1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(0, 0) rotate(-3deg);
    transform: translate(0, 0) rotate(-3deg);
  }
  80% {
    -webkit-transform: translate(-1px, 0) rotate(1deg);
    transform: translate(-1px, 0) rotate(1deg);
  }
  90% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(0, 1px) rotate(-3deg);
    transform: translate(0, 1px) rotate(-3deg);
  }
}

.p-top__aboutBodyTitle {
    --fs: 46;
    font-size: calc(var(--fs)*1em/10)
}

@media screen and (max-width: 768px) {
    .p-top__aboutBodyTitle {
        --fs:50*.65
    }
}

@media screen and (max-width: 430px) {
    .p-top__aboutBodyTitle {
        --fs:50*.6
    }
}

.p-top__aboutBodyTxt {
    --mt: 10;
    line-height: 2.4;
    margin-top: calc(var(--mt)*1em/10);
	font-size: 1.3em;
    font-weight: 600;
	color: #535657;
}


@media screen and (max-width: 768px) {
    .p-top__aboutBodyTxt {
        font-size: 1.2em;
    }
    .p-top__aboutBodyTxt p{
        line-height: 2.7;
    }
    }


@media screen and (max-width: 640px) {
.p-top__aboutBodyTxt {
    font-size: 1.05em;
}
.p-top__aboutBodyTxt p{
    line-height: 2.55;
}
}

@media screen and (max-width: 430px) {
    .p-top__aboutBodyTxt {
        --mt:15
    }
}

.p-top__aboutBodyTxt p:not(:first-of-type) {
    margin-top: 2.3em
}

	
	
	
.js-title__body{
    ransform: scaleX(0.8) scaleY(0.8)!important;
    
}
.js-title__body span span{
	opacity: 0;
    color: #535657;
}

.title__about{
	padding-left: 25px;
}
  .show {
	transform: scaleX(1.6) scaleY(1.4)!important;
}

   .text-animation-span {
      display: inline-block;
      overflow: hidden;

    }

    .shoptitle .text-animation-span {
        margin-right: 3px;

      }

 .show span span{

      display: inline-block;
      letter-spacing: 0.1em;
      animation: smoothAnime 0.6s forwards;
    }

 .show span .title_a{

      display: contents!important;
    }

 .show.cafe_title span span{
      letter-spacing: 0.01em;
    }



@keyframes smoothAnime{
  from {
  transform:translate3d(0, 7%, 0) skewY(20deg);
  height: 0%;
  opacity:0;
  }

  to {
  transform:translate3d(0, 0, 0) skewY(0);
  height: 100%;
  opacity:1;
  }
}

@keyframes showText {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}



/* 左から右へ表示される */

.move_l_to_r1{
animation: move_animation_r1 1.5s linear 1s 1 forwards normal;
animation-timing-function: steps(7, end);
}

.move_l_to_r1 img{
animation: animation_r1_rote 1.5s ease-in 1s 1 forwards normal;
transform: rotate(-6deg));
}


@keyframes move_animation_r1 {
0% {
}

100% {
bottom: calc(300 / var(--hnum)* 100%);
right: calc(680 / var(--wnum)* 100%);
}
}


@keyframes animation_r1_rote {
0% {
transform: rotate(-6deg));
}

100% {
transform: rotate(6deg);
}
}
	
/* 右から左へ表示される */





.move_r_to_l1{
animation: move_animation_l1 1.5s linear 1s 1 forwards normal;
animation-timing-function: steps(7, end);
}

.move_r_to_l1 img{
animation: animation_l1_rote 1.5s ease-in 1s 1 forwards normal;
transform: rotate(6deg);
}

@keyframes move_animation_l1 {
0% {
}

100% {
right: calc(-10 / var(--wnum)* 100%);
top: calc(-70 / var(--hnum)* 100%);
}
}

@keyframes animation_l1_rote {
0% {
transform: rotate(6deg);
}

100% {
transform: rotate(-6deg);
}
}




.move_r_to_l2{
animation: move_animation_l2 1.5s linear 1s 1 forwards normal;
animation-timing-function: steps(7, end);
}

.move_r_to_l2 img{
animation: animation_l2_rote 1.5s ease-in 1s 1 forwards normal;
transform: rotate(-5deg);
}

@keyframes move_animation_l2 {
0% {
}

100% {
right: calc(100/var(--wnum)*100%);
top: calc(800/var(--hnum)*100%);
}
}

@keyframes animation_l2_rote {
0% {
transform: rotate(-5deg);
}

100% {
transform: rotate(10deg);
}
}

.scroll_up {
transition: 1s ease-in-out;
top: -11.3em;
left: 50%;
opacity: 0;
}
.scroll_up.scroll_on1 {
top: 0em;
left: 50%;
opacity: 1;
}

@media screen and (max-width: 600px) {
.scroll_up.scroll_on1 {
top: -3em;
}
.scroll_up{
top: 0em;
}
}
	
@media screen and (max-width: 500px) {
.scroll_up.scroll_on1 {
top: -3em;
}
.scroll_up{
    top: 0em;
    }
}

@media screen and (max-width: 430px) {
.scroll_up.scroll_on1 {
top: -3em;
}
.scroll_up{
    top: 0em;
    }
}


.sentence_up{
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-name: sentence_up;
 animation-name: sentence_up;
 visibility: visible !important;
}
.about_sentence1{ animation-duration:1s;
}
.about_sentence2{ animation-duration:1.5s;
}
.about_sentence3{ animation-duration:2s;
}
@-webkit-keyframes sentence_up {
 0% { opacity: 0; -webkit-transform: translateY(20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes sentence_up {
 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}




.img_up{
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-name: img_up1;
 animation-name: img_up1;
 animation-duration:4s;
 animation-delay: 2s;
 visibility: visible !important;
}

.img_up2{
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-name: img_up1;
 animation-name: img_up1;
 animation-duration:1s;
 animation-delay: 0s;
 visibility: visible !important;
}


@-webkit-keyframes img_up1 {
 0% { opacity: 0; -webkit-transform: translateY(20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes img_up1 {
 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}





.p-top__inner {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative
}

.p-top__BodyTitle {
    --fs: 46;
    font-size: calc(var(--fs)*1em/10)
}

@media screen and (max-width: 768px) {
    .p-top__BodyTitle {
        --fs:50*.65
    }
}

@media screen and (max-width: 430px) {
    .p-top__BodyTitle {
        --fs:50*.55
    }
}

.p-top__moji {
    display: flex;
    justify-content: center;
    align-items: center;
	--ptb: 150;
    --ptc: 27;
    padding: calc(var(--ptb)* 1em / 16) 0 calc(var(--ptc)* 1em / 16);
}

@media screen and (max-width: 768px) {
.p-top__moji_pick {
	--ptb: 0;
    --ptc: 0;
    padding: calc(var(--ptb)* 1em / 16) 0 calc(var(--ptc)* 1em / 16);
}
.p-top__moji.more_link_shop {
	--ptb: 20;
}
}

.p-top__space{
    display: block;
    justify-content: center;
    align-items: center;
	padding: 3em 0 4.3em 0;
}


.p-top__hoshi{
    display: block;
    justify-content: center;
    align-items: center;
	padding: 0;
}



.p-top__insta{
    display: block;
    justify-content: center;
    align-items: center;
	padding: 0;
}

.p-top__insta.load{
    display: none;
}

.insta_page.load{
    display: none;
}

@media screen and (max-width: 1620px) {
.p-top__insta{
	padding-top: 120px;
}
}

@media screen and (max-width: 768px) {
.p-top__insta{
	padding: 0;
}
}

.p-top_Body {
    --w: 27.3em;
    --mb: 50;
    margin-bottom: calc(var(--mb)*1em/16);
    position: relative;
    text-align: left;
    width: calc(var(--w));
    z-index: 1
}




.p-top_Body_contents {
    --w: 39em;
    --mb: 0;
    margin-bottom: calc(var(--mb)*1em/16);
    position: relative;
    text-align: left;
    width: calc(var(--w));
    z-index: 1
}

.p-top_Body_space {
    --mb: 20;
    margin-bottom: calc(var(--mb)*1em/16);
    position: relative;
    text-align: left;
    width: 100%;
    z-index: 1;
    height: 27vw;
    max-height: 400px;
    min-height: 330px;
}


.p-top_Body_insta {
    --mt: 80;
    margin-top: calc(var(--mt)*1em/16);
    position: relative;
    text-align: left;
    width: 100%;
    z-index: 1;
    height: 10vw;
}



.p-top_Body_space .kuma1{
	position: absolute;
	top: 50%;
    left: 47%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}



.p-top_Body_insta .kuma1{
	position: absolute;
	top: 132%;
    left: 37%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: 1;
}




.p-top_Body_hoshi {
    position: relative;
    text-align: left;
    width: 100%;
    z-index: 1;
}


.kuma_anime1{
	width: auto;
    height: 16.8vw;
    max-height: 300px;
    min-height: 200px;
    min-width: 394px;
	-webkit-animation: a-main-common-kata-two 1.6s infinite normal;
    animation: a-main-common-kata-two 1.6s infinite normal;
}

@media screen and (max-width: 764px) {
.kuma_anime1{
    width: auto;
    height: auto;
    max-height: 200px;
    min-height: auto;
    min-width: 280px;
}
}



.kuma_insta_anime1{
	width: 260px;
    height: auto;
	-webkit-animation: a-main-common-kata-two2 1.6s step-start 0.5s infinite normal;
    animation: a-main-common-kata-two2 1.6s step-start 0.5s infinite normal;
}

.kuma_insta_anime2{
	width: 270px;
    height: auto;
	-webkit-animation: a-main-common-kata-two 1.6s infinite normal;
    animation: a-main-common-kata-two 1.6s infinite normal;
}

.p-top_Body_space .kuma2{
    position: absolute;
    top: 80%;
    left: 85%;
	transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

@media screen and (min-width: 767px) {
.p-top_Body_space .kuma2 .kuma_coffee{
   width: 15vw;
   height: 15vw;
   will-change: transform;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}
}

.p-top_Body_insta .kuma2{
	position: absolute;
	top: 70%;
    left: 63%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.kuma_anime2{
	width: auto;
    max-height: 135px;
    height: 10vw;
    min-height: 105px;
    min-width: 63px;
	-webkit-animation: katakata 4s step-start 2s infinite normal;
    animation: katakata 4s step-start 2s infinite normal
}


@media screen and (max-width: 480px) {
.kuma_anime2{
    min-height: 70px;
    min-width: 42px;
}
}

@media screen and (max-width: 768px) {
.p-top_Body_space .kuma2{
    top: 65%;
    left: 86%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
	
.p-top_Body_insta .kuma2{
	top: 50%;
    left: 67%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
	
.kuma_insta_anime1{
	width: 220px;
    height: auto;
	-webkit-animation: a-main-common-kata-two2 1.6s step-start 0.5s infinite normal;
    animation: a-main-common-kata-two2 1.6s step-start 0.5s infinite normal;
}
	

.p-top_Body_insta .kuma1 {
    position: absolute;
    top: 170%;
    left: 28%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	
}
}


@media screen and (max-width: 640px) {
.p-top_Body_space .kuma2{
    top: 65%;
    left: 93%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
	

	
}

@media screen and (max-width: 500px) {
.kuma_insta_anime1 {
    width: 180px;
    height: auto;
    -webkit-animation: a-main-common-kata-two2 1.6s step-start 0.5s infinite normal;
    animation: a-main-common-kata-two2 1.6s step-start 0.5s infinite normal;
}
}




.p-top_Body_space .blog_moji{
}

.blog_b{
    width: auto;
    max-height: 135px;
    height: 9vw;
    min-height: 90px;
	-webkit-animation: katakata 4s step-start 2s infinite normal;
    animation: katakata 4s step-start 0s infinite normal;
	position: absolute;
    top: -20%;
    left: 63%;
}

.blog_l{
    width: auto;
    max-height: 100px;
    height: 8vw;
    min-height: 90px;
	-webkit-animation: katakata 4s step-start 2s infinite normal;
    animation: katakata2 4s step-start 2s infinite normal;
	position: absolute;
    top: -15%;
    left: 73%;
}

.blog_o{
    width: auto;
    max-height: 73px;
    height: 6vw;
    min-height: 50px;
	-webkit-animation: katakata 4s step-start 2s infinite normal;
    animation: katakata 4s step-start 2s infinite normal;
	position: absolute;
    top: -5%;
    left: 77.5%;
}

.blog_g{
    width: auto;
    max-height: 110px;
    height: 8vw;
    min-height: 80px;
    -webkit-animation: katakata 4s step-start 2s infinite normal;
    animation: katakata2 4s step-start 0s infinite normal;
    position: absolute;
    top: 3%;
    left: 84%;
}

@media screen and (max-width: 768px) {
	.p-top__space{
    padding: 3em 0 0em 0;
	}
.p-top_Body_space .blog_moji{
	    position: absolute;
        top: -9%;
        left: 35.8%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
}
	
	
.blog_b ,.blog_l ,.blog_o ,.blog_g{
	    position: relative;
        vertical-align: bottom;
        margin-right: 10px;
}
}


.h4_none{
    padding-top: 0px!important;
    margin-top: 70px!important;
    border-top: none!important;
	color: #414242!important;
}
.ma_bottom_0 {
        margin-bottom: 0px!important;
}
	
@media screen and (max-width: 768px) {
.h4_none{
    margin-top: 50px!important;
}
 hr.ma_top_15vw {
        margin-top: 15vw!important;
		
}
}


.h4_none2{
    padding-top: 0px!important;
    margin-top: 80px!important;
    border-top: none!important;
	color: #414242!important;
}

.pdf_link {
	text-align: center;
}

.pdf_link a{
    color: #535657 !important;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.12em;
    line-height: 1.5;
    text-align: center;
    position: relative;
    padding-bottom: 20px;
    bottom: 10px;
    text-decoration: none !important;
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}


.pdf_link a::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background-color: #fcf69f;
    position: absolute;
    left: 0;
    bottom: 9px;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}


@media screen and (max-width: 600px) {
.p-top_Body_space .blog_moji{
	left: 28%;
    top: -5%;
}}
	

@media screen and (max-width: 540px) {
.p-top_Body_space .blog_moji{
	left: 26.7%;
}}
	
@media screen and (max-width: 450px) {
.p-top_Body_space .blog_moji{
	left: 22.5%;
    top: -5%;
}}

@media screen and (max-width: 430px) {
.p-top_Body_space .blog_moji{
	left: 22.5%;
}
}
	
@media screen and (max-width: 360px) {
.p-top_Body_space .blog_moji{
	left: 26.5%;
}
}
.news_n{
    width: auto;
    max-height: 95px;
    height: 9vw;
    min-height: 80px;
	-webkit-animation: katakata 4s step-start 0s infinite normal;
    animation: katakata 4s step-start 0s infinite normal;
	position: absolute;
    top: -28.5%;
    left: 29%;
}

.news_e{
    width: auto;
    max-height: 100px;
    height: 8vw;
    min-height: 80px;
	-webkit-animation: katakata 4s step-start 2s infinite normal;
    animation: katakata2 4s step-start 2s infinite normal;
	position: absolute;
    top: -22%;
    left: 41.5%;
}

.news_w{
    width: auto;
    max-height: 95px;
    height: 8vw;
    min-height: 80px;
	-webkit-animation: katakata 4s step-start 2s infinite normal;
    animation: katakata 4s step-start 2s infinite normal;
	position: absolute;
    top: -25%;
    left: 52%;
}

.news_s{
    width: auto;
    max-height: 100px;
    height: 8vw;
    min-height: 80px;
    -webkit-animation: katakata 4s step-start 0s infinite normal;
    animation: katakata2 4s step-start 0s infinite normal;
    position: absolute;
	top: -27%;
    left: 66%;
}

.news_n2{
    width: auto;
    max-height: 95px;
    height: 9vw;
    min-height: 80px;
	-webkit-animation: katakata 4s step-start 1s infinite normal;
    animation: katakata 4s step-start 1s infinite normal;
	position: absolute;
    top: -24.5%;
    left: 30%;
	opacity: 0.4;
}

.news_e2{
    width: auto;
    max-height: 100px;
    height: 8vw;
    min-height: 80px;
	-webkit-animation: katakata 4s step-start 1s infinite normal;
    animation: katakata2 4s step-start 1s infinite normal;
	position: absolute;
    top: -18%;
    left: 42%;
	opacity: 0.4;
}

.news_w2{
    width: auto;
    max-height: 95px;
    height: 8vw;
    min-height: 80px;
	-webkit-animation: katakata 4s step-start 1s infinite normal;
    animation: katakata 4s step-start 1s infinite normal;
	position: absolute;
    top: -21%;
    left: 51.5%;
	opacity: 0.4;
}

.news_s2{
    width: auto;
    max-height: 100px;
    height: 8vw;
    min-height: 80px;
    -webkit-animation: katakata 4s step-start 3s infinite normal;
    animation: katakata2 4s step-start 3s infinite normal;
    position: absolute;
	top: -23%;
    left: 65%;
	opacity: 0.4;
}

@media screen and (max-width: 768px) {
.news_n ,.news_e ,.news_w ,.news_s{
	    position: relative;
        vertical-align: bottom;
        margin-right: 0px;
}
.news_n2 ,.news_e2 ,.news_w2 ,.news_s2{
	    display: none;
}}


@media screen and (max-width: 430px) {
	.news_n,.news_e,.news_w,.news_s{
	    min-height: 65px;
	}
}



@media screen and (max-width: 768px) {
.news_hoshi{
	display: none
	}}

.news_hoshi{
	    position: relative;
	    opacity: 0;
        transition: all .8s ease
}

.news_hoshi1{
	position: absolute;
    top: -300px;
    left: -10%;
	animation: move_hoshi_r1 1.5s linear 0s 1 forwards normal;
	animation-timing-function: steps(8, end);
}
.news_hoshi2{
	position: absolute;
    top: 50px;
    left: -10%;
	animation: move_hoshi_r2 1.5s linear 0s 1 forwards normal;
	animation-timing-function: steps(8, end);
}
.news_hoshi3{
	position: absolute;
    top: -450px;
    left: 27%;
	animation: move_hoshi_r3 1.5s linear 0s 1 forwards normal;
	animation-timing-function: steps(8, end);
}
.news_hoshi4{
	position: absolute;
    top: 0px;
    left: -13%;
	animation: move_hoshi_r4 1.5s linear 0s 1 forwards normal;
	animation-timing-function: steps(8, end);
}
.news_hoshi5{
	position: absolute;
    top: 200px;
    left: -10%;
	animation: move_hoshi_r5 1.5s linear 0s 1 forwards normal;
	animation-timing-function: steps(8, end);
}
.news_hoshi6{
	position: absolute;
    top: -300px;
    left: 110%;
	animation: move_hoshi_l1 1.5s linear 0s 1 forwards normal;
	animation-timing-function: steps(8, end);
}
.news_hoshi7{
	position: absolute;
    top: 50px;
    left: 110%;
	animation: move_hoshi_l2 1.5s linear 0s 1 forwards normal;
	animation-timing-function: steps(8, end);
}
.news_hoshi8{
	position: absolute;
    top: -450px;
    left: 73%;
	animation: move_hoshi_l3 1.5s linear 0s 1 forwards normal;
	animation-timing-function: steps(8, end);
}
.news_hoshi9{
	position: absolute;
    top: 0px;
    left: 113%;
	animation: move_hoshi_l4 1.5s linear 0s 1 forwards normal;
	animation-timing-function: steps(8, end);
}
.news_hoshi10{
	position: absolute;
    top: 200px;
    left: 110%;
	animation: move_hoshi_l5 1.5s linear 0s 1 forwards normal;
	animation-timing-function: steps(8, end);
}



.hoshi1{
    width: auto;
    height: 2.5vw;
    max-height: 70px;
    min-height: 60px;
	-webkit-animation: katakata_hoshi1 4s step-start 2s infinite normal;
    animation: katakata_hoshi1 4s step-start 2s infinite normal;
}

.hoshi2{
    width: auto;
    height: 2.5vw;
    max-height: 70px;
    min-height: 60px;
	-webkit-animation: katakata_hoshi2 4s step-start 2s infinite normal;
    animation: katakata_hoshi2 4s step-start 2s infinite normal;
}

.hoshi3{
    width: auto;
    height: 2.5vw;
    max-height: 70px;
    min-height: 60px;
	-webkit-animation: katakata_hoshi1 4s step-start 1s infinite normal;
    animation: katakata_hoshi1 4s step-start 1s infinite normal;
}

.hoshi4{
    width: auto;
    height: 1.2vw;
    max-height: 26px;
    min-height: 20px;
	-webkit-animation: katakata_hoshi2 4s step-start 3s infinite normal;
    animation: katakata_hoshi2 4s step-start 3s infinite normal;
}

.hoshi5{
    width: auto;
    height: 2.2vw;
    max-height: 60px;
    min-height: 50px;
	-webkit-animation: katakata_hoshi1 4s step-start 0s infinite normal;
    animation: katakata_hoshi1 4s step-start 0s infinite normal;
}

.hoshi6{
    width: auto;
    height: 1.2vw;
    max-height: 26px;
    min-height: 20px;
	-webkit-animation: katakata_hoshi2 4s step-start 0s infinite normal;
    animation: katakata_hoshi2 4s step-start 0s infinite normal;
}

.hoshi7{
    width: auto;
    height: 2.5vw;
    max-height: 70px;
    min-height: 60px;
	-webkit-animation: katakata_hoshi1 4s step-start 1s infinite normal;
    animation: katakata_hoshi1 4s step-start 1s infinite normal;
}

.hoshi8{
    width: auto;
    height: 2.3vw;
    max-height: 70px;
    min-height: 60px;
	-webkit-animation: katakata_hoshi1 5s step-start 5s infinite normal;
    animation: katakata_hoshi1 5s step-start 5s infinite normal;
}

.hoshi9{
    width: auto;
    height: 2.5vw;
    max-height: 70px;
    min-height: 60px;
	-webkit-animation: katakata_hoshi1 4s step-start 4s infinite normal;
    animation: katakata_hoshi1 4s step-start 4s infinite normal;
}

.hoshi10{
    width: auto;
    height: 1.2vw;
    max-height: 26px;
    min-height: 20px;
	-webkit-animation: katakata_hosh21 4s step-start 1s infinite normal;
    animation: katakata_hoshi2 4s step-start 1s infinite normal;
}






@keyframes move_hoshi_r1 {
0% {}
100% {
	top: -150px;
    left: 14%;
}}
@keyframes move_hoshi_r2 {
0% {}
100% {
	top: 60px;
    left: 17%;
}}

@keyframes move_hoshi_r3 {
0% {}
100% {
    top: -230px;
    left: 35%;
}}
@keyframes move_hoshi_r4 {
0% {}
100% {
    top: -39px;
    left: 10%;
}}
@keyframes move_hoshi_r5 {
0% {}
100% {
	top: 210px;
    left: 10%;
}}



@keyframes move_hoshi_l1 {
0% {}
100% {
    top: -110px;
    left: 76%;
}}
@keyframes move_hoshi_l2 {
0% {}
100% {
	top: 80px;
    left: 76%;
}}

@keyframes move_hoshi_l3 {
0% {}
100% {
    top: -242px;
    left: 59%;
}}
@keyframes move_hoshi_l4 {
0% {}
100% {
    top: -30px;
    left: 83%;
}}
@keyframes move_hoshi_l5 {
0% {}
100% {
    top: 210px;
    left: 84%;
}}


@-webkit-keyframes katakata_hoshi1 {
  0% {
    -webkit-transform: translate(0, -2px) rotate(3deg);
    transform: translate(0, -2px) rotate(3deg);
	opacity: 1;
  }
  5% {
	opacity: 0;
  }
  10% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
	opacity: 1;
  }
  20% {
    -webkit-transform: translate(0, 0) rotate(-3deg);
    transform: translate(0, 0) rotate(-3deg);
	opacity: 1;
  }
  30% {
    -webkit-transform: translate(0, -2px) rotate(0deg);
    transform: translate(0, -2px) rotate(0deg);
	opacity: 1;
  }
  40% {
    -webkit-transform: translate(0, -2px) rotate(3deg);
    transform: translate(0, -2px) rotate(3deg);
	opacity: 1;
  }
  42% {
	opacity: 0;
  }
  46% {
	opacity: 1;
  }
  50% {
    -webkit-transform: translate(2px, 0) rotate(-1deg);
    transform: translate(2px, 0) rotate(-1deg);
	opacity: 1;
  }
  60% {
    -webkit-transform: translate(0, 2px) rotate(0deg);
    transform: translate(0, 2px) rotate(0deg);
	opacity: 1;
  }
  70% {
    -webkit-transform: translate(0, 0) rotate(3deg);
    transform: translate(0, 0) rotate(3deg);
	opacity: 1;
  }
  72% {
	opacity: 0;
  }
  76% {
	opacity: 1;
  }
  80% {
    -webkit-transform: translate(2px, 0) rotate(-1deg);
    transform: translate(2px, 0) rotate(-1deg);
	opacity: 1;
  }
  90% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
	opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, -2px) rotate(3deg);
    transform: translate(0, -2px) rotate(3deg);
	opacity: 1;
  }
}

@keyframes katakata_hoshi1 {
  0% {
    -webkit-transform: translate(0, -2px) rotate(3deg);
    transform: translate(0, -2px) rotate(3deg);
	opacity: 1;
  }
  5% {
	opacity: 0;
  }
  10% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
	opacity: 1;
  }
  20% {
    -webkit-transform: translate(0, 0) rotate(-3deg);
    transform: translate(0, 0) rotate(-3deg);
	opacity: 1;
  }
  30% {
    -webkit-transform: translate(0, -2px) rotate(0deg);
    transform: translate(0, -2px) rotate(0deg);
	opacity: 1;
  }
  40% {
    -webkit-transform: translate(0, -2px) rotate(3deg);
    transform: translate(0, -2px) rotate(3deg);
	opacity: 1;
  }
  42% {
	opacity: 0;
  }
  46% {
	opacity: 1;
  }
  50% {
    -webkit-transform: translate(2px, 0) rotate(-1deg);
    transform: translate(2px, 0) rotate(-1deg);
	opacity: 1;
  }
  60% {
    -webkit-transform: translate(0, 2px) rotate(0deg);
    transform: translate(0, 2px) rotate(0deg);
	opacity: 1;
  }
  70% {
    -webkit-transform: translate(0, 0) rotate(3deg);
    transform: translate(0, 0) rotate(3deg);
	opacity: 1;
  }
  72% {
	opacity: 0;
  }
  76% {
	opacity: 1;
  }
  80% {
    -webkit-transform: translate(2px, 0) rotate(-1deg);
    transform: translate(2px, 0) rotate(-1deg);
	opacity: 1;
  }
  90% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
	opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, -2px) rotate(3deg);
    transform: translate(0, -2px) rotate(3deg);
	opacity: 1;
  }
}


@-webkit-keyframes katakata_hoshi2 {
  0% {
    -webkit-transform: translate(0, 1px) rotate(-3deg);
    transform: translate(0, 1px) rotate(-3deg);
	opacity: 1;
  }
  10% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
	opacity: 1;
  }
  20% {
    -webkit-transform: translate(0, 0) rotate(3deg);
    transform: translate(0, 0) rotate(3deg);
	opacity: 1;
  }
  30% {
    -webkit-transform: translate(0, 1px) rotate(0deg);
    transform: translate(0, 1px) rotate(0deg);
	opacity: 1;
  }
  40% {
    -webkit-transform: translate(0, 1px) rotate(-3deg);
    transform: translate(0, 1px) rotate(-3deg);
	opacity: 1;
  }
  50% {
    -webkit-transform: translate(-1px, 0) rotate(1deg);
    transform: translate(-1px, 0) rotate(1deg);
	opacity: 1;
  }
  52% {
	opacity: 0;
  }
  56% {
	opacity: 1;
  }
  60% {
    -webkit-transform: translate(0, -1px) rotate(0deg);
    transform: translate(0, -1px) rotate(0deg);
	opacity: 1;
  }
  70% {
    -webkit-transform: translate(0, 0) rotate(-3deg);
    transform: translate(0, 0) rotate(-3deg);
	opacity: 1;
  }
  80% {
    -webkit-transform: translate(-1px, 0) rotate(1deg);
    transform: translate(-1px, 0) rotate(1deg);
	opacity: 1;
  }
  90% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
	opacity: 1;
  }
  92% {
	opacity: 0;
  }
  96% {
	opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, 1px) rotate(-3deg);
    transform: translate(0, 1px) rotate(-3deg);
	opacity: 1;
  }
}

@keyframes katakata_hoshi2 {
  0% {
    -webkit-transform: translate(0, 1px) rotate(-3deg);
    transform: translate(0, 1px) rotate(-3deg);
	opacity: 1;
  }
  10% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
	opacity: 1;
  }
  20% {
    -webkit-transform: translate(0, 0) rotate(3deg);
    transform: translate(0, 0) rotate(3deg);
	opacity: 1;
  }
  30% {
    -webkit-transform: translate(0, 1px) rotate(0deg);
    transform: translate(0, 1px) rotate(0deg);
	opacity: 1;
  }
  40% {
    -webkit-transform: translate(0, 1px) rotate(-3deg);
    transform: translate(0, 1px) rotate(-3deg);
	opacity: 1;
  }
  50% {
    -webkit-transform: translate(-1px, 0) rotate(1deg);
    transform: translate(-1px, 0) rotate(1deg);
	opacity: 1;
  }
  52% {
	opacity: 0;
  }
  56% {
	opacity: 1;
  }
  60% {
    -webkit-transform: translate(0, -1px) rotate(0deg);
    transform: translate(0, -1px) rotate(0deg);
	opacity: 1;
  }
  70% {
    -webkit-transform: translate(0, 0) rotate(-3deg);
    transform: translate(0, 0) rotate(-3deg);
	opacity: 1;
  }
  80% {
    -webkit-transform: translate(-1px, 0) rotate(1deg);
    transform: translate(-1px, 0) rotate(1deg);
	opacity: 1;
  }
  90% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
	opacity: 1;
  }
  92% {
	opacity: 0;
  }
  96% {
	opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, 1px) rotate(-3deg);
    transform: translate(0, 1px) rotate(-3deg);
	opacity: 1;
  }
}

@media screen and (max-width: 768px) {
.p-top_Body {
    --w: 27.3em;
}
}
@media screen and (max-width: 640px) {
    .p-top_Body {
        --w:21em;
        margin-bottom: 56px;
        padding-top: 80px;
    }
	.p-top_Body_contents  {
        --w:72%
}
	.p-top_Body_contents_title {
        --w:100%!important;
}
}

@media screen and (max-width: 430px) {
    .p-top_Body {
        --w:19em;
		padding-top: 30px;
        margin-bottom: 55px;
    }
	.p-top_Body_contents {
        --w:80%
}
	.p-top_Body_contents_title {
        --w:100%!important;
}
	.about_s{
		padding-top: 80px;
	}
}

@-webkit-keyframes a-main-common-kata-two {
  0%,
  10%,
  21%,
  30%,
  41%,
  to {
    -webkit-transform: translateY(1px);
    transform: translateY(2px);
  }
  11%,
  20%,
  31%,
  40% {
    -webkit-transform: translateY(-1px);
    transform: translateY(-2px);
  }
}

@keyframes a-main-common-kata-two {
  0%,
  10%,
  21%,
  30%,
  41%,
  to {
    -webkit-transform: translateY(1px);
    transform: translateY(2px);
  }
  11%,
  20%,
  31%,
  40% {
    -webkit-transform: translateY(-1px);
    transform: translateY(-2px);
  }
}


.blue_background{
	transition: background-color 0.7s cubic-bezier(0.645,0.045,0.355,1.000);

}

  
  

.is-blue {
    background-color: rgba(102,127,155,0.35);
　　 transition: background-color 2s ease;
}

.is-lbshow:where(html) {
    overflow: hidden;
		
}




.insta{
    overflow: hidden;
    margin: 0 0 0 calc(50% - 50vw)
}

.insta_loop {
    position: relative;
    margin-top: 180px;
    width: 100vw;
	height: 300px;
	z-index: 1
}



.insta_icon{
     display: block;
    position: absolute;
    width: 390px;
    z-index:50;
    bottom:33px;
    left:30px;
}


 .insta_slide_wrap{
    position: relative;
    --scroll-gap: 30px;
    /*
    display: -ms-grid;
    -ms-grid-columns: min-content;
    transform: translateY(-50%);
    */    
  display: flex;
    width: 6000px;
    transform: translateY(-50%);
	padding-top: 100px;
}
 .insta_slide{
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
    width:1990px;
	padding: 5px;
}
 .insta_slide a{
    position: relative;
    display: block;
    width: 370px;
    margin: 0 10px;
    background-size:cover;
    background-position:center center;
    border-radius:4px;
}
 .insta_slide a:before{

    display: block;
    padding-top: 100%;
}

.insta_slide {
    animation: loop0 90s linear infinite;

    &:hover {
        animation-play-state: paused;
  }
}

.insta_slide:first-child {
  animation: loop 90s linear infinite;
}

 .insta_slide:nth-child(2) {
  animation: loop2 90s -60s linear infinite;
}

 .insta_slide:last-child {
  animation: loop3 90s -30s linear infinite;
} 

#sb_instagram .sbi_type_carousel .fa-clone{
right: 0px;
}

@keyframes loop0 {
    0% {
    transform: translateX(0);
    }
    100% {
    transform: translateX(-100%);
    }
    }
    @keyframes loop0{
    0% {
    transform: translateX(0);
    }
    100% {
    transform: translateX(calc(-50% - var(--scroll-gap) / 2));
    }
}

@keyframes loop {
  0% {
    transform: translateX(200%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-200%);
  }
}

@keyframes loop3 {
  0% {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-300%);
  }
}



 .insta_slide a:hover{
    transform: translateY(-10px);
}

/*
 .insta_slide{
    position: relative;
    transform: translateY(-50%);
}
 .slick-slider .slick-track, .slick-slider .slick-list{
    padding-top: 10px;
}

 .insta_slide a{
    position: relative;
    display: block;
    background-size:cover;
    background-position:center center;
    border-radius:4px;
}

 .insta_slide a:hover{
    transform: translateY(-10px);
}
 .insta_slide a:before{
    content:"";
    display: block;
    padding-top: 100%;
}

.insta_slide .slick-slide{margin: 0 10px; }
*/



@media screen and ( max-width: 1400px ) {
     .text_area {
        width: calc(100% - 65px - 5vw);
    }   
}

		

@media screen and ( max-width: 800px ) {
    
    .insta_icon{
        width: 285px;
        left: calc(5% + 7.5vw - 40px);
        bottom:20px;
    }

    .pickup .insta_slide_wrap{
        width: 3150px;
	padding-top: 35px;
    }
    .pickup .insta_slide{
        width:1050px;
    }
    .pickup .insta_slide a{
        width: 130px;
    }
}



.pore {
    position: relative;
	padding: 40px 0 120px;
}
	
.pore.shop_headline{
	padding: 0px 0 120px;	
	}

.flex-jcs { 
	display: flex; 
	justify-content: 
		space-between; 
	flex-wrap: wrap; 
}

.shop_wrap {
    margin: 0;
}



.Shop_Box:not(:last-child) {
    margin-bottom: 160px
}

.Shop_Box_left {
    width: calc(100% - 490px);
    overflow: hidden;
    max-width: 540px;
	min-height: 360px;
}


.swiper-slide{
	max-width: 540px;
	width: 100%;
}
.Shop_Box_left .swiper-slide {
    max-height: 324px;
	height: 40%;
}


.Shop_Box_left .swiper-slide img{
	object-fit: cover;
	max-height: 324px;
	aspect-ratio: 4 / 3;
}

.Shop_Box_right {
    width: calc(50% - 45px);
    margin-top: -15px;
	color: #535657;
}

.Shop_Box_right_h2ttl {
    margin-bottom: 25px
}

.Shop_Box_right .comingday {
    margin-bottom: 25px
}

.Shop_Box_right table th {
    font-weight: 600;
    font-size: 1.3em;
    letter-spacing: .1em
}

.Shop_Box_right table td {
    padding-bottom: 15px;
    padding-left: 30px;
    padding-top: 1px;
    line-height: 25px;
	font-weight: 600;
    font-size: 1.2em;
}

.Shop_Box_right table td span{
    font-size: 0.85em;
}

.Shop_Box_right table td p.bikou {
    font-size: .65em;
    margin-top: 3px
}

.Shop_Box_right table td .maplink {
    font-size: .8em;
    margin-top: 10px;
    display: inline-block
}

.Shop_Box_right .Shop_Box_right_link {
    margin-top: 30px
}

.Shop_Box_right .Shop_Box_right_link ul li {
    margin-right: 32px;
    line-height: 45px
}

.Shop_Box_right .Shop_Box_right_link ul li:first-child .morebtn {
    max-width: min(17vw,170px)
}

.Shop_Box_right .Shop_Box_right_link ul li:last-child {
    margin-right: 0
}

.Shop_Box_right .Shop_Box_right_link ul li.line {
    line-height: 44px
}

.Shop_moyo {
    width: 50%;
    right: -9.5%;
    top: -4.5vw;
    z-index: -1;
    max-width: 1000px
}

@media screen and (max-width: 1200px) {
    .Shop_Box:not(:last-child) {
        margin-bottom:min(16vw,160px)
    }

    .Shop_Box_left {
        width: 42%;
    }

    .Shop_Box_left .swiper-slide {
        height: min(29.1666666667vw,350px)
    }

    .Shop_Box_right {
        width: 50%;
        margin-top: min(-1.5vw,-15px);
		margin:0 3%;
    }

    .Shop_Box_right_h2ttl {
        margin-bottom: min(2.5vw,25px)
    }

    .Shop_Box_right .comingday {
        margin-bottom: min(2.5vw,25px)
    }

    .Shop_Box_right table td {
        padding-bottom: min(1vw,10px);
        padding-left: min(3vw,30px);
        padding-top: min(.5vw,5px);
        line-height: min(2.5vw,25px)
    }

    .Shop_Box_right table td p.bikou {
        font-size: .95em;
        margin-top: min(.3vw,3px)
    }

    .Shop_Box_right table td .maplink {
        font-size: .95em;
        margin-top: min(1vw,10px)
    }

    .Shop_Box_right .Shop_Box_right_link {
        margin-top: min(3vw,30px)
    }

    .Shop_Box_right .Shop_Box_right_link ul li {
        margin-right: min(2.5vw,25px)
    }

    .Shop_Box_right .Shop_Box_right_link ul li.line {
        width: min(4.5vw,45px);
        line-height: 41px
    }

    .Shop_moyo {
        width: 80%;
        right: -29.5%;
        top: -7vw
    }
}

@media screen and (max-width: 850px) {
    .Shop_Box_right {
        width: min(52vw,52vw);
        margin-top: min(-1.5vw,-15px)
    }
    .Shop_Box_left {
        width: min(37.5vw,37.5vw);
    }

}
@media screen and (max-width: 750px) {
    .Shop_Box:not(:last-child) {
        margin-bottom:min(21.3333333333vw,100px)
    }

    .Shop_Box_left {
        width: 100%;
        max-width: 100%;
        padding-bottom: min(16vw,60px)
    }

    .Shop_Box_left .swiper-slide {
        height: inherit
    }

    .Shop_Box_right {
        width: 100%;
        margin: 50px 15% 0;
    }

	
@media screen and (max-width: 768px) {
 .Shop_Box_right {
        margin: 5px 6% 0;
	}
}

    .Shop_Box_right_h2ttl {
        margin-bottom: min(6.6666666667vw,40px)
    }

    .Shop_Box_right .comingday {
        margin-bottom: min(6.6666666667vw,40px)
    }

    .Shop_Box_right table th {
        font-size: 1.25em;
        line-height: 1.7;
    }

    .Shop_Box_right table td {
        padding-bottom: min(4vw,35px);
        padding-left: min(5.3333333333vw,50px);
        padding-top: 1px;
        line-height: 1.7
    }

    .Shop_Box_right table td p.bikou {
        font-size: .9em;
        margin-top: min(.8vw,3px);
        letter-spacing: normal
    }

    .Shop_Box_right table td .maplink {
        font-size: .9em;
        margin-top: min(2.6666666667vw,10px)
    }

    .Shop_Box_right .Shop_Box_right_link {
        margin-top: min(5.3333333333vw,40px)
    }

    .Shop_Box_right .Shop_Box_right_link ul li {
        margin-right: 25px
    }

    .Shop_Box_right .Shop_Box_right_link ul li:first-child .morebtn {
        max-width: 170px
    }

    .Shop_Box_right .Shop_Box_right_link ul li.line {
        width: min(10.6666666667vw,40px);
        line-height: 44px
    }

    .Shop_moyo {
        width: 100%;
        right: -32%;
        top: 12vw
    }
}

@media screen and (max-width: 550px) {
    .Shop_Box_right .Shop_Box_right_link ul {
        display:block
    }

    .Shop_Box_right .Shop_Box_right_link ul li {
        margin: 0 auto;
        width: 200px
    }

    .Shop_Box_right .Shop_Box_right_link ul li:first-child .morebtn,.Shop_Box_right .Shop_Box_right_link ul li .morebtn {
        width: 200px;
        max-width: 200px
    }

    .Shop_Box_right .Shop_Box_right_link ul li:not(:last-child) {
        margin-bottom: 15px
    }

    .Shop_Box_right .Shop_Box_right_link ul li.line {
        width: 35px;
        line-height: inherit;
        margin: 25px auto 0
    }
    .Shop_Box_right table th {
        font-size: 1.2em;
        line-height: 1.7;
    }
	
    .Shop_Box_right table td {
        padding-bottom: min(4vw,13px);
        padding-left: min(5.3333333333vw,10px);
        padding-top: 1px;
        line-height: 1.5
    }
	.Shop_Box_right table td p.bikou {
        font-size: .75em;
        margin-top: min(.8vw,3px);
        letter-spacing: normal
    }
	
}



.swiper_param {
    position: relative !important
}

.swiper_param .swiper-pagination {
    width: 100%;
    bottom: -40px;
    z-index: 2;
    position: absolute;
}

.swiper_param .swiper-pagination span {
    margin: 0 20px !important;
    display: inline-block;
    background: rgba(255,250,116,0.8);
    opacity: 1;
    border-radius: 50%;
}

.swiper_param .swiper-pagination span.swiper-pagination-bullet-active {
    width: 17px;
    height: 17px;
    position: relative;
    bottom: -2px;
    background: #667f9b;
}

.swiper-pagination-bullet{
	width: 12px;
    height:12px;
}


@media screen and (max-width: 1000px) {
    .swiper_param .swiper-pagination {
        bottom:-4vw
    }

    .swiper_param .swiper-pagination span {
        margin: 0 min(.8vw,8px) !important
    }

    .swiper_param .swiper-pagination span.swiper-pagination-bullet-active {
        width: min(1.2vw,12px);
        height: min(1.2vw,12px)
    }

    .swiper_param .swiper-pagination span.swiper-pagination-bullet-active {
        bottom: min(.2vw,2px)
    }
}

@media screen and (max-width: 750px) {
    .swiper_param .swiper-pagination {
        bottom:-30px
    }

    .swiper_param .swiper-pagination span {
        margin: 0 min(1.6vw,6px) !important
    }

    .swiper_param .swiper-pagination span.swiper-pagination-bullet-active {
        width: min(2.6666666667vw,10px);
        height: min(2.6666666667vw,10px)
    }

    .swiper_param .swiper-pagination span.swiper-pagination-bullet-active {
        bottom: min(.2666666667vw,1px)
    }
}

.flex { 
	display: flex; 
	flex-wrap: wrap; 
}

.fn-shuei {
    font-family: dnp-shuei-mincho-pr6n,sans-serif;
    font-weight: 500;
	text-align: center;
}

.setfns-30 {
    font-size: 2em
}


@media screen and (max-width: 750px) {

    .setfns-30 {
        font-size: min(6.1333333333vw,30px);
		line-height: 1.1em;
        margin-top: 10px;
    }
.setfns-15  {
    	font-size: min(3.1333333333vw, 13px);
}
.Shop_Box_right table td {
	    font-size: 1.1em;
	
}
}

.morebtn {
    width: 200px
}

.morebtn a {
    border-radius: 100px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #004b34;
    display: flex;
    position: relative;
    height: 48px;
    line-height: 47px;
    box-sizing: border-box;
    justify-content: center;
    font-size: 15px
}

.morebtn a .morebtn_svg {
    width: 10px;
    height: 10px;
    margin-top: 17.5px;
    margin-left: 16px
}

.morebtn a .fn-Noto500 {
    font-size: 13px;
    line-height: 44px
}

.morebtn a svg {
    fill: #004b34;
    transition: .3s cubic-bezier(0.22, 1, 0.36, 1)
}

.morebtn a:hover {
    background: #004b34;
    color: #fff
}

.morebtn a:hover svg {
    fill: #fff
}

#indexPage .morebtn a {
    height: 54px;
    line-height: 53px
}

#indexPage .morebtn a .morebtn_txt {
    font-size: 1.2em
}

#indexPage .morebtn a .morebtn_svg {
    margin-top: 20.5px
}

#indexPage #ind_Shop .morebtn {
    max-width: 170px
}

#indexPage #ind_Shop .morebtn a {
    height: 48px;
    line-height: 47px
}

#indexPage #ind_Shop .morebtn a .morebtn_txt {
    font-size: 1em
}

#indexPage #ind_Shop .morebtn a .morebtn_svg {
    margin-top: 17.5px
}

@media screen and (min-width: 751px)and (max-width: 1200px) {
    .morebtn {
        width:min(20vw,200px)
    }

    .morebtn a {
        font-size: min(1.5vw,15px)
    }

    .morebtn a .morebtn_svg {
        margin-left: min(1.6vw,16px)
    }

    .morebtn a .fn-Noto500 {
        font-size: min(1.3vw,13px)
    }
}

@media screen and (max-width: 750px) {
    .morebtn {
        width:170px
    }

    .morebtn a .morebtn_svg {
        margin-left: 13px
    }

    #indexPage .morebtn a {
        height: 48px;
        line-height: 47px
    }

    #indexPage .morebtn a .morebtn_txt {
        font-size: 16px
    }

    #indexPage .morebtn a .morebtn_svg {
        margin-top: 17.5px
    }

    #indexPage #ind_Shop .morebtn a .morebtn_txt {
        font-size: 14px
    }
}





/* Google Mapを囲う要素 */
.map {
    position: relative;
    margin-top: 70px;
    width: 100%;
    height: 0;
    padding-top: 55%;
}
 
/* Google Mapのiframe */
.map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.related_title_u{
	display: flex;
	padding-bottom: 10px;
}

@media screen and (max-width: 767px) {
.related_title_u{
	display: flex;
	padding-bottom: 10px;
	justify-content: center;
}
}

.related_kuma{
    width: 55px;
	margin-right: 25px;
    -webkit-animation: a-main-common-kata-two2 1.6s step-start 0.5s infinite normal;
    animation: a-main-common-kata-two2 1.6s step-start 0.5s infinite normal;
}
.related_title_img{
    position: relative;
	bottom: 10px;
}

.top-midashi{
    margin-bottom: 43px;
}

.top-midashi .show{
    transform: scaleX(1.4) scaleY(1.2) !important;
}

.top-midashi.worktitle .show{
    transform: scaleX(0.9) scaleY(0.9) !important;
}

.top-midashi.worktitle{
    margin-bottom: 0px!important;
}

.worktitle .show span span{
	display: flex!important;
}

.top-midashi.menutitle .show{
    transform: scaleX(1.1) scaleY(1.1) !important;
}
.top-midashi.access{
    margin-bottom: 0px!important;
}

.show.access span span {
transform: scaleX(1.2) scaleY(1.2) !important;
letter-spacing: 0.23em !important
}

top-midashi.access{
    transform: scaleX(1.4) scaleY(1.4) !important;
}
.top-midashi.show.access{
    transform: scaleX(1.4) scaleY(1.4) !important;
}

.contents_404{
    display: flex;
    flex-wrap: wrap;
}
@media screen and (max-width: 750px) {
.contents_404{
    margin-top: 80px;
}
}
.left_404 , .right_404{
    display: flex;
    flex-wrap: wrap;
    width: 50%;
    align-items: flex-start;
}
.left_404 img{
    width: 70%;
    max-width: 290px;
    margin-right: 50px;
    -webkit-animation: a-main-common-kata-two 1.6s step-start 0.5s infinite normal;
    animation: a-main-common-kata-two 1.6s step-start 0.5s infinite normal;
}

.right_404 img{
        width: 70%;
    max-width: 250px;
    transform: rotate(360deg);
    -webkit-animation: a-main-common-kata-two 1.6s infinite normal;
    animation: a-main-common-kata-two 1.6s infinite normal;
}

.right_404 h1{
    color: #667f9b!important;
    font-size: 3em !important;
    margin: 10px 0 10px !important;
    line-height: 1!important;
    letter-spacing: 0.07em!important;
}
.right_404 h3{
    width: calc(100% - 1vw)!important;
    color: #667f9b;
    font-size: 20px!important;
    margin: 20px 0!important;
}

.right_404 p{
    width: calc(100% - 1vw)!important;
}

.posted_in a{
font-size: 1.1em;
}

.u-m-t-a {
    margin-top: auto
}

.u-m-b-a {
    margin-bottom: auto
}

.u-m-r-a {
    margin-right: auto
}

.u-m-l-a {
    margin-left: auto!important;
}

.u-no-selection::-moz-selection {
    background: 0 0
}

.u-no-selection::selection {
    background: 0 0
}

.u-ta-l {
    text-align: left
}

.u-ta-c {
    text-align: center
}

.u-ta-r {
    text-align: right
}

.u-ta-j {
    text-align: justify
}

.u-trsde-5 {
    -webkit-transition-delay: 50ms;
    transition-delay: 50ms
}

.u-trsde-10 {
    -webkit-transition-delay: .1s;
    transition-delay: .1s
}

.u-trsde-15 {
    -webkit-transition-delay: .15s;
    transition-delay: .15s
}

.u-trsde-20 {
    -webkit-transition-delay: .2s;
    transition-delay: .2s
}

.u-trsde-25 {
    -webkit-transition-delay: .25s;
    transition-delay: .25s
}

.u-trsde-30 {
    -webkit-transition-delay: .3s;
    transition-delay: .3s
}

.u-trsde-35 {
    -webkit-transition-delay: .35s;
    transition-delay: .35s
}

.u-trsde-40 {
    -webkit-transition-delay: .4s;
    transition-delay: .4s
}

.u-trsde-45 {
    -webkit-transition-delay: .45s;
    transition-delay: .45s
}

.u-trsde-50 {
    -webkit-transition-delay: .5s;
    transition-delay: .5s
}

.u-trsde-55 {
    -webkit-transition-delay: .55s;
    transition-delay: .55s
}

.u-trsde-60 {
    -webkit-transition-delay: .6s;
    transition-delay: .6s
}

.u-trsde-65 {
    -webkit-transition-delay: .65s;
    transition-delay: .65s
}

.u-trsde-70 {
    -webkit-transition-delay: .7s;
    transition-delay: .7s
}

.u-trsde-75 {
    -webkit-transition-delay: .75s;
    transition-delay: .75s
}

.u-trsde-80 {
    -webkit-transition-delay: .8s;
    transition-delay: .8s
}

.u-trsde-85 {
    -webkit-transition-delay: .85s;
    transition-delay: .85s
}

.u-trsde-90 {
    -webkit-transition-delay: .9s;
    transition-delay: .9s
}

.u-trsde-95 {
    -webkit-transition-delay: .95s;
    transition-delay: .95s
}

.u-trsde-100 {
    -webkit-transition-delay: 1s;
    transition-delay: 1s
}

.u-tt-n {
    text-transform: none
}

.u-tt-c {
    text-transform: capitalize
}

.u-tt-u {
    text-transform: uppercase
}

.u-tt-l {
    text-transform: lowercase
}

.u-w-1p {
    width: 1%
}

.u-w-2p {
    width: 2%
}

.u-w-3p {
    width: 3%
}

.u-w-4p {
    width: 4%
}

.u-w-5p {
    width: 5%
}

.u-w-6p {
    width: 6%
}

.u-w-7p {
    width: 7%
}

.u-w-8p {
    width: 8%
}

.u-w-9p {
    width: 9%
}

.u-w-10p {
    width: 10%
}

.u-w-11p {
    width: 11%
}

.u-w-12p {
    width: 12%
}

.u-w-13p {
    width: 13%
}

.u-w-14p {
    width: 14%
}

.u-w-15p {
    width: 15%
}

.u-w-16p {
    width: 16%
}

.u-w-17p {
    width: 17%
}

.u-w-18p {
    width: 18%
}

.u-w-19p {
    width: 19%
}

.u-w-20p {
    width: 20%
}

.u-w-21p {
    width: 21%
}

.u-w-22p {
    width: 22%
}

.u-w-23p {
    width: 23%
}

.u-w-24p {
    width: 24%
}

.u-w-25p {
    width: 25%
}

.u-w-26p {
    width: 26%
}

.u-w-27p {
    width: 27%
}

.u-w-28p {
    width: 28%
}

.u-w-29p {
    width: 29%
}

.u-w-30p {
    width: 30%
}

.u-w-31p {
    width: 31%
}

.u-w-32p {
    width: 32%
}

.u-w-33p {
    width: 33%
}

.u-w-34p {
    width: 34%
}

.u-w-35p {
    width: 35%
}

.u-w-36p {
    width: 36%
}

.u-w-37p {
    width: 37%
}

.u-w-38p {
    width: 38%
}

.u-w-39p {
    width: 39%
}

.u-w-40p {
    width: 40%
}

.u-w-41p {
    width: 41%
}

.u-w-42p {
    width: 42%
}

.u-w-43p {
    width: 43%
}

.u-w-44p {
    width: 44%
}

.u-w-45p {
    width: 45%
}

.u-w-46p {
    width: 46%
}

.u-w-47p {
    width: 47%
}

.u-w-48p {
    width: 48%
}

.u-w-49p {
    width: 49%
}

.u-w-50p {
    width: 50%
}

.u-w-51p {
    width: 51%
}

.u-w-52p {
    width: 52%
}

.u-w-53p {
    width: 53%
}

.u-w-54p {
    width: 54%
}

.u-w-55p {
    width: 55%
}

.u-w-56p {
    width: 56%
}

.u-w-57p {
    width: 57%
}

.u-w-58p {
    width: 58%
}

.u-w-59p {
    width: 59%
}

.u-w-60p {
    width: 60%
}

.u-w-61p {
    width: 61%
}

.u-w-62p {
    width: 62%
}

.u-w-63p {
    width: 63%
}

.u-w-64p {
    width: 64%
}

.u-w-65p {
    width: 65%
}

.u-w-66p {
    width: 66%
}

.u-w-67p {
    width: 67%
}

.u-w-68p {
    width: 68%
}

.u-w-69p {
    width: 69%
}

.u-w-70p {
    width: 70%
}

.u-w-71p {
    width: 71%
}

.u-w-72p {
    width: 72%
}

.u-w-73p {
    width: 73%
}

.u-w-74p {
    width: 74%
}

.u-w-75p {
    width: 75%
}

.u-w-76p {
    width: 76%
}

.u-w-77p {
    width: 77%
}

.u-w-78p {
    width: 78%
}

.u-w-79p {
    width: 79%
}

.u-w-80p {
    width: 80%
}

.u-w-81p {
    width: 81%
}

.u-w-82p {
    width: 82%
}

.u-w-83p {
    width: 83%
}

.u-w-84p {
    width: 84%
}

.u-w-85p {
    width: 85%
}

.u-w-86p {
    width: 86%
}

.u-w-87p {
    width: 87%
}

.u-w-88p {
    width: 88%
}

.u-w-89p {
    width: 89%
}

.u-w-90p {
    width: 90%
}

.u-w-91p {
    width: 91%
}

.u-w-92p {
    width: 92%
}

.u-w-93p {
    width: 93%
}

.u-w-94p {
    width: 94%
}

.u-w-95p {
    width: 95%
}

.u-w-96p {
    width: 96%
}

.u-w-97p {
    width: 97%
}

.u-w-98p {
    width: 98%
}

.u-w-99p {
    width: 99%
}

.u-w-100p {
    width: 100%
}

.u-whs-n {
    white-space: normal
}

.u-whs-p {
    white-space: pre
}

.u-whs-nw {
    white-space: nowrap
}

.u-whs-pw {
    white-space: pre-wrap
}

.u-whs-pl {
    white-space: pre-line
}