.back_color {
    background: -webkit-gradient(linear, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.975) 20%, rgba(0,0,0,0.975) 80%,rgba(0,0,0,0.5) 100%);
    background: -webkit-linear-gradient(rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.975) 20%, rgba(0,0,0,0.975) 80%,rgba(0,0,0,0.5) 100%);
    background: linear-gradient(rgba(0,0,0,0.5) 0%, rgba(223, 223, 223, 0.98) 20%, rgba(195, 195, 195, 0.98) 80%,rgba(0,0,0,0.5) 100%);
}

#contents .box .box_item:after {
    background: linear-gradient(to top left, rgba(255,255,255,0) 50%, #000 50.5%) no-repeat top left/100% 100%;
}

.more a {
    background-color: #31579b;
}

#contents h2{
        color: #ffff48;
}

#main .cms_img1 img {
    height: 60vw;
    position: absolute;
}

#main {
    height: 60vw !important;
    max-height: 100%;
}

.cms_img1{
    position: relative;
    height: 60vw;
}

/*.cms_img1:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/mask.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: cover;
    z-index: 0;
    mix-blend-mode: hard-light;
    opacity: 0.8;
    transition: 0.3s;
}

.cms_img1:after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/catch.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 60%;
    z-index: 0;
    mix-blend-mode: hard-light;
    opacity: 1;
    transition: 0.3s;
}


.cms_img1:hover:before{
    opacity: 0;
    transition: 0.3s;
}*/

.cms_img1 .catch{
    height: auto !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.3s;
}

.cms_img1 .mask{
    transition: all 0.1s;
}

.copy{
        z-index: 0;
    height: auto !important;
    max-width: 2000px;
    width: 100% !important;
    transform: translate(-50%, -50%);
    top: 40%;
    left: 50%;
    opacity: 0;
}

.mask{
    z-index: 1;
}

.catch{
    z-index: 2;
}

.sns_link{
    z-index: 3;
}

#main .main_box {
    top: 10%;
}

.entry.more{
        position: absolute;
    z-index: 2;
    top: 70%;
    left: 50%;
    width: 400px;
    transform: translate(-50%, -50%);
}

.entry.more a{
        width: 60%;
    margin: auto;
    
}

#main .main_box{
    z-index: 2;
}

.no  div.en_font{
        color: #31579b;
}

.no  div.en_font span{
        color: white;
}

.catch_txt h2{
    text-align: center;
    color: yellow;
    font-size: -webkit-calc(1rem + 24px);
    font-size: calc(1rem + 24px);
    margin: 70px auto;
}

.catch_txt{
        background-color: transparent;
    background-image: url(./Dup/img/backk.png);
    background-size: 100%;
}

.catch_txt p{
    filter: drop-shadow(2px 4px 10px black);
}

#catch{
   background-image: url(./Dup/img/icon.png), url(./Dup/img/bottom_r.png), url(./Dup/img/top_l.png);
    background-repeat: no-repeat;
    background-position: 90% 0%, bottom right, top left;
    background-size: 20%, 50%, contain;
}

.cms_img1 .te{
    z-index: 3;
    width: 31% !important;
    height: auto !important;
    top: 30%;
    left: 59%;
    opacity: 0.8;
    mix-blend-mode: exclusion;
    pointer-events: none;
}

.tuka{
        width: 3% !important;
    z-index: 2;
    top: 10%;
    height: auto !important;
    left: 75%;
}

/*.catch_box figure.catch_img:nth-of-type(1){
        mix-blend-mode: hard-light;
    width: 45% !important;
    left: -5%;
}*/

#page_title {
    background-position: bottom right;
}

#page_title p.font_9up{
        color: yellow;
}

.cate_list p span{
    color: yellow;
}

.banner{
        position: relative;
    margin-left: 0;
}


/*--------20220712 design check--------*/

#loader .load_logo{
        filter: brightness(0.5);
}

.tel a{
        background-color: yellow;
    color: black;
        font-size: 20px;
}


#footer .entry.more{
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    width: auto;
}

#youtube{
  position: relative;
	/*max-width: 780px;*/
	width: 70%;
	text-align: center;
	margin: 4% auto 4%;
}
#youtube:before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 56.25%;
  }
#youtube iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

footer .entry.more a {
    color: white;
}


/*--------20220712 design check--------*/

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){

#main {
    height: 100vh !important;
}

.cms_img1 {
    position: relative;
    height: 100vh;
}

#main .cms_img1 img {
    height: 100vh;
}

.tuka {
    width: 5% !important;
    top: 13%;
}

.copy {
    width: 110% !important;
}

#catch figure:first-child, #catch figure:last-child {
    width: 55%!important;
}

#loader{
    height: 110vh !important;
}

#contents .box .box_item{
        background-position: center right;
}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){

.tuka {
    top: 18%;
}

.catch_txt {
    background-size: 100% 100%;
}

.catch_txt h2 {
        font-size: -webkit-calc(1rem + 14px);
    font-size: calc(1rem + 14px);
}

#wrap{
    width: 100%;
}

#catch {
    background-size: 20%, 120%, contain;
}

#loading_line, #loading_bg {
    height: 100vh;
}

.shop_info h2 {
    font-size: 22px;
}

#main .sns_link {
    top: 20%;
}

.cate_list {
    margin-left: 10px;
}

.page_title_box p.font_30up span{
        font-size: -webkit-calc(1rem + 12px);
    font-size: calc(1rem + 12px);
}

.page10 .more a {
    font-size: 14px;
}

.tel a {
    font-size: 12px;
}



}