@charset "utf-8";
/*■■ 色・文字 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

:root{
    --color1: #003366;
    --color2: #fff;
    --color3: #5b5b5b;
    --color4: #f6f5ee;
    --black: #222222;
    --base: #F7F7F6;
    --font1: 16px;
}

/* スマホ */
@media screen and (max-width: 667px){
    :root{
        --fontB1: 22px;
    }
}
html,body,.font_10,.font_11,.font_12,.font_13,.font_14,.font_15,
.font_10_tb,.font_11_tb,.font_12_tb,.font_13_tb,.font_14_tb,.font_15_tb,
.font_10_sp,.font_11_sp,.font_12_sp,.font_13_sp,.font_14_sp,.font_15_sp{font-size: var(--font1);}
.font_2up{font-size: max(calc(var(--font1) + 2px), calc(1rem  + 2px));}
.font_4up{font-size: max(calc(var(--font1) + 4px), calc(1rem  + 4px));}
.font_2dw{font-size: max(calc(var(--font1)), calc(1rem  - 2px));}
.font_4dw{font-size: max(calc(var(--font1)), calc(1rem  - 4px));}
.font_6dw{font-size: max(calc(var(--font1)), calc(1rem  - 6px));}


.base_color{background-color: var(--base);} /* ベースカラー　全体の背景色 */

.txt_white, .hvr_txt_white:hover{color: white;}
.txt_red, .hvr_txt_red:hover{color: #C12326;}
.txt_gray, .hvr_txt_gray:hover{color: #ccc}
.txt_color1, .hvr_txt_color1:hover{color: var(--color1)} /* メインカラー */
.txt_color2, .hvr_txt_color2:hover{color: var(--color2)} /* サブカラー */
.txt_color3, .hvr_txt_color3:hover{color: var(--color3)} /* アクセントカラー1 */
.txt_color4, .hvr_txt_color4:hover{color: var(--color4)} /* アクセントカラー2 */

/* background-color */
.bg_white, .hvr_bg_white:hover{background-color: white} /* 白背景 */
.bg_black, .hvr_bg_black:hover{background-color: var(--black)} /* 黒背景 */
.bg_gray, .hvr_bg_gray:hover{background-color: #ccc}
.bg_color1, .hvr_bg_color1:hover{background-color: var(--color1)} /* メインカラー */
.bg_color2, .hvr_bg_color2:hover{background-color: var(--color2)} /* サブカラー */
.bg_color3, .hvr_bg_color3:hover{background-color: var(--color3)} /* アクセントカラー1 */
.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4)} /* アクセントカラー2 */
.bg_color_clear, .hvr_bg_color_clear:hover{background-color: transparent!important}


/* border-color ※!important */
.border_white, .hvr_border_white:hover{border-color: white}
.border_black, .hvr_border_black:hover{border-color: var(--black)}
.border_gray, .hvr_border_gray:hover{border-color: #ccc}
.border_color1, .hvr_border_color1:hover{border-color: var(--color1)}
.border_color2, .hvr_border_color2:hover{border-color: var(--color2)}
.border_color3, .hvr_border_color3:hover{border-color: var(--color3)}
.border_color4, .hvr_border_color4:hover{border-color: var(--color4)}

/*■■ テンプレート調整 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#page_title:before{background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, var(--color1) 50.5%) no-repeat top left/100% 100%;}
#contents .box .box_item:after{background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, var(--color1) 50.5%) no-repeat top left/100% 100%;}
.g-menu{background: var(--color1);}
.g-menu-btn:after{border: 1px solid var(--color1);}
.g-menu-btn .dot span{background: var(--color1);}
.back_color{background:linear-gradient(rgba(0,51,102,0.5) 0%,  rgba(0,51,102,0.975) 20%, rgba(0,51,102,0.975) 80%,rgba(0,51,102,0.5) 100%)}
.cate_list > div {width: 100%!important;}
.cate_list li{
    padding: 4px 1%;
}
.cate_list li a{
    background-color: var(--color1);
    color: var(--base);
    padding: 10px;
    width: 90%;
}
.cate_list li a:hover{
    color: var(--base);
}
#page_title .page_title_box .wrap{
    left: 5%;
}
#page_title p{
    display: block;
    width: 100%;
    padding: 0 0 15px;
}
#page_title p:nth-child(2){
    text-align: center;
}

/* タブレット */
@media screen and (max-width: 768px){
    .cate_list li{
        width: 48%;
        padding: 4px 1%;
    }
    .shop_info h2{width: 100%;}
    #footer .logo{text-align: center;}
    
    #page_title{
        background-position: center;
    }
    #page_title .page_title_box .wrap{
        top: 36%;
        left: 3%;
    }
    #page_title p{
        letter-spacing: 0em;
        font-size: 2.2rem;
    }
    #page_title p:nth-child(2){
        
        font-size: 1.5rem;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    #contents .box .box_item:after{
        background: linear-gradient(to top left, rgba(255,255,255,0) 50%, var(--color1) 50.5%) no-repeat bottom left/100% 100%;;
    }
    .cate_list p{
        transform: rotate( 90deg) translateX(50%);
        top: 43px;
    }
    .cate_list li{
        width: 88%;
    }
    .shop_info h2{width: 100%;}
    .shop_info.more a.info_box:after{display: none;}
    #page_title .page_title_box .wrap{
        left: 2.5%;
    }
    #page_title p{
        font-size: 1.2rem;
        padding: 0 0 8px;
    }
    #page_title p:nth-child(2){font-size: 0.8rem;}
    .page10 .more a:after{display: none;}
    .more a:after{width: 12%;}
}

/*■■ top, all ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#header{background-color: var(--color1);}
.pc_back,.sp_back{
    background-position: center;
}

.catch_txt{width: 60%!important;}
.catch_txt h2{
    border-bottom: 2px solid var(--base);
    padding: 0 0 10px;
    font-size: 2.3rem;
    text-align: center;
}

#page_title:after{background-color: rgb(0 51 102 / 40%);}
#contents .box .box_item:before{background-color: rgb(7 22 37 / 60%);}
#contents .box{box-shadow: 0 3px 10px rgb(0 0 0 / 30%);}
#page_title .txt_color_nomal{
    color: var(--black);
}
#page_title{
    background-attachment: scroll;
    height: 40vw;
}
#page_title:after{
    background-color: transparent;
}

/* タブレット */
@media screen and (max-width: 768px){
    #page_title{
        height: 45vw;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    .catch_txt{width: 100%!important;}
    .catch_txt h2{
        font-size: 2rem;
    }
    #footer .logo{text-align: center;}
}
@media screen and (max-width: 400px){.shop_info h2{font-size: 28px;}}
/*■■ ヘッダー,logo ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/



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


/*■■ cms1 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


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

/*■■ カテゴリデザイン統一 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.content_wrap{
    padding: 80px 5%;
}

#cms_2-g .cate_title,#cms_2-f .cate_title{
    line-height: 1.6;
    font-weight: bold;
    font-size: 2.0em;
}
#cms_2-g .box_title1,#cms_2-f .box_title1{
    line-height: 1.6;
    font-weight: normal;
    font-size: 1.3em;
    letter-spacing: 0.07em;
}

/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){
    .content_wrap{
        padding: 50px 3%;
    }
    #cms_2-g .cate_title, #cms_2-f .cate_title{
        font-size: 1.6em;
        line-height: 1.5;
    }
}
/*■■ cms_2-g cms2,5 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


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

/*■■ cms3 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.link_type2 .cate_box a {
    color: #fff;
}
.link_type2 .cate_box a:before, .link_type2 .cate_box a:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 1;
}
.link_type2 .cate_box a:after {
    top: 100%;
    background-color: var(--color1);
    transition: 0.5s;
	z-index: 3;
}
.link_type2 .cate_box a:hover:after {
    top: 0;
}
.link_type2 .cate_box .txt_wrap {
    z-index: 2;
}
.link_type2 .more {
	letter-spacing: 3px;
    box-sizing: border-box;
	opacity: 0;
	transition: opacity .8s;
	z-index: 4;
}
.link_type2 .cate_box a:hover .more {
    opacity: 1;
}

#cms_2-f .cate{
    border-top: 1px solid var(--base);
    border-bottom: none;
    border-left: none;
    border-right: none;
    margin-bottom: 0;
}

#cms_2-f .box_title1{
    padding: 15px 0;
}
#cms_2-f .box_title1::after{
    display: none;
}
#cms_2-f .cate_box:last-child{
    border-bottom: none;
}

/* タブレット */
@media screen and (max-width: 768px){
    #cms_2-f .cate{
        padding: 30px 0;
    }
}
/* スマホ */
@media screen and (max-width: 667px){}

/*■■ cms4 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.cms_6-b .cate_box .box_txt2,#cms_6-b .cate_box .box_txt2{
    background-color: var(--base);
}

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


/*■■ プライバシーポリシー ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


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

/*■■ お問い合わせ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#tel_contact{
    padding-top: 60px;
}
#tel_contact .title{
    font-size: 1.5rem;
    font-weight: bold;
}

.conbtn_box{}
.conbtn_box .con_btn{
    width: 49%;
}
.conbtn_box .con_btn a{
    width: calc(100% - 40px);
    font-size: 1.7rem;
    letter-spacing: 0.1em;
}
.conbtn_box .con_btn .small{
    font-size: 1.2rem;
    display: block;
}
@media screen and (max-width: 1160px){
    .conbtn_box .con_btn{
        width: 100%;
    }
}
/* タブレット */
@media screen and (max-width: 768px){
    .conbtn_box .con_btn{
        width: 100%;
    }
    .conbtn_box .con_btn a{}
}
/* スマホ */
@media screen and (max-width: 667px){
    #tel_contact{padding: 60px 5%;}
    .conbtn_box .con_btn a{
        width: 90%;
        font-size: 1.6rem;
    }
}

/*■■ サイトマップ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


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

/*■■ リンクボタン ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


.linkStyle,a{
	color: var(--color1);
	text-decoration: underline;
	transition: all 0.5s;
}
a{
    text-decoration: none;
}
.linkStyle:hover,a:hover{
	opacity: 0.7;
	text-decoration: none;
}

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

}
/* スマホ */
@media screen and (max-width: 667px){}

/*■■ メインイメージ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#main .logo{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 250px;
    padding: 1%;
    background: linear-gradient(115deg, var(--color1) 80%,var(--color1) 81%, transparent 81.5% ,transparent 100%);
}
#main .main_box{
    max-width: 800px;
}
#main .main_box .entry.more{
    margin: 30px auto 0px 4%;
}
#main .main_box .entry.more a{
    width: 250px;
    background: linear-gradient(0deg, #003366, #0068b6);
    font-size: 1.2rem;
    color: #fffc8d;
    text-shadow: 0 3px 0 rgba(0,0,0,0.4);
    border-radius: 8px;
    box-shadow: 0 3px 0px rgba(0, 24, 49, 0.8);
}
/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){
    #main .logo{
        width: 200px;
        padding: 3%;
    }
    #main .main_box{
        width: 90%;
        left: 50%;
        top: auto;
        bottom: 30px;
        transform: translate(-50%, 0%);
    }
    #main .main_box .entry.more{
        margin: 30px auto 0;
    }
    #main .main_box .entry.more a{
        margin: 0 auto;
        width: 80%;
    }
    #main .main_box .entry.more a:after{
        display: none;
    }
}