﻿/* 1536 , 1530 × 735 ,1366 *//* 上記画面幅でも崩れていないか確認 */

/* 修正した場合→各項目の一番下に日付をコメントアウトして追記 */



@charset "utf-8";
/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.main_wrap {
    background-color: var(--color2);
}

#wrap:before {
    content: "";
    display: block;
    width: calc(100vw - 5px);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 3;
    pointer-events: none;
    outline: 3px solid var(--color1);
    outline-offset: -11px;
}

/* 固定バナー */
.fix-bnr {
    right: 30px;
    bottom: 30px;
    z-index: 1;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
}

.fix-bnr:hover {
    box-shadow: 0 10px 5px rgba(0, 0, 0, 0.2);
    transform: translateY(-7px);
}

.overlay {
        background: rgba(255, 255, 255, 0.95)!important;
}

/* SNSリンク */
.all_page .sns_link li {
    background-color: transparent;
    border-radius: 0;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
/* 固定バナー */
.fix-bnr {
    left: 0;
    right: 0;
    margin: auto;
}

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

#wrap:before {
    outline: 2px solid var(--color1);
    outline-offset: -5px;
}

.fix-bnr {
    bottom: 15px;
}

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


.maincopy {
    padding: 35px 30px 35px 50px;
    left: 0;
    top: 45%;
    z-index: 2;
}

.main_img:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--color3);
    opacity: 0.3;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

.maincopy {
    padding: 25px 30px 25px 50px;
    left: 0;
    top: 40%;
    z-index: 2;
}

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

#main {
        height: 60vh;
}
    
.maincopy {
    padding: 15px 10px 15px 20px;
    left: 0;
    top: auto;
    z-index: 2;
    bottom: 20%;
}

.vegas-slide-inner {
    background-position: 85% 50%!important;
}

}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.top_page #header {
    background: transparent;
    background-color: transparent;
}

.no_item .no, .no_item .box_title2 {
	display: inline-block;
	background: #F7E2D8;
	background: linear-gradient(120deg, rgba(247, 226, 216, 1) 0%, rgba(255, 204, 178, 1) 	35%, rgba(239, 204, 181, 1) 55%, rgba(247, 226, 216, 1) 85%);
	background: -webkit-linear-gradient(120deg, rgba(247, 226, 216, 1) 0%, rgba(255, 204, 178, 1) 	35%, rgba(239, 204, 181, 1) 55%, rgba(247, 226, 216, 1) 85%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#contents1_2:before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    background-image: url(../img/bg1.png);
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
    z-index: 0;
    position: absolute;
    bottom: 0;
    right: -30%;
    opacity: 0.4;
    pointer-events: none;
}


#contents3 .box .box_img .no_box {
    top: 60px;
}


.top_page footer #footer{
    text-shadow: 2px 2px 15px rgba(17, 17, 17, 0.85)!important;
    filter: none!important;
}

#top_cms:before {
    background-color:#faf7f5!important;
}

.top_cms_box .cms_title .cms_title_box:before, #contents3 .img_wrap .content_title:before {
    background-color: var(--color5);
}

/* 画像差し替えたら消す */

#contents1_2 .con1 .box_img, #contents3 .box .box_img {
    position: relative;
}

#contents1_2 .con1 .box_img:before, #contents3 .box .box_img:before {
    content: "※画像はイメージです";
    display: block;
    padding: 5px;
    background-color: var(--color2);
    font-size: 12px;
    position: absolute;
    bottom: 15px;
    left: -1px;
    z-index: 1;
}


/* 画像差し替えたらここまで消す */

/* 12/3修正 */
#contents3 .img_wrap .box_img .img2, #contents3 .img_wrap .box_img.img3 {
    width: 30vw;
}

#contents3 .img_wrap .box_img.img3 img {
    height: 40vh;
}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

#contents1_2:before {
    width: 100%;
    background-size: 100%;
    background-position: top left;
    bottom: auto;
    right: 0;
    top: 0;
    background-image: url(../img/bg2.png);
}


#contents3 .img_wrap {
        height: 100vh;
}

#contents3 .img_wrap .box_img .img1 {
        width: 60%;
        left: 0;
        top: 25%;
    }

#contents3 .img_wrap .box_img .img2 {
        width: 45%;
        left: 69%;
        bottom: -5%;
    }

.top_cms_box .cms_title {
    justify-content: end;
}

/* 12/3修正 */
#contents3 .img_wrap .box_img .img2, #contents3 .img_wrap .box_img.img3 {
    width: 45vw;
}

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

    #contents3 .img_wrap {
        height: 115vh;
    }

#contents3 .img_wrap .box_img .img1 {
    width: 75%;
    left: 0;
    top: 25%;
}

#contents3 .img_wrap .box_img .img1 img {
    height: 40vh;
    }

#contents3 .img_wrap .box_img .img2 {
        width: 50%;
        left: 60%;
        bottom: 8%;
    }

#contents3 .box .box_item {
    width: 85%;
    padding: 40px 5% 50px 5%;
    }
    .top_cms_box {
        width: 80%;
    }
    .top_page #copyright {
        bottom: 90px;
    }

/* 12/3修正 */
    #contents3 .img_wrap .box_img .img1 {
        left: -10%;
    }
    
}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#header-change {
    background:transparent;
    padding: 20px 25px 10px;
}

.page_title .p_title_item:before {
    background-color: var(--color5);
}

.blogListPattern_item a {
    border-color: var(--color3);
}

.cate_list li {
    width: 25% !important;
    background-color: #eeeeee;
    margin-right: 5%;
    margin-bottom: 1%;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

.g_type6 .cate_box{width: 49%!important;}

.cate_list li {
    width: 45% !important;
    margin-right: 1%;
    margin-bottom: 1%;
}

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

.g_type6 .box_wrap{	width: 100%!important;margin-left: 8px;}
.g_type6 .cate_box{width: 48%!important;}

.page2 .content_wrap, .page5 .content_wrap, .page7 .content_wrap {
    width: 85%!important;
}
.cate_list li {
    width: 90% !important;
    margin-right: 0;
    margin-bottom: 1%;
}

#cms_3-g .box_title1 .title_item, .cms_3-g .box_title1 .title_item {
    max-width: 100%;
}
}


