﻿#cms_1-e .pager li{
width: 60px!important;
height: 46px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 20px;
}

/*--------------------------------
疑似要素にオブジェクト
--------------------------------*/
#main,#catch .catch_txt h2,.recommend li,#contents .box h2,#recommend h3{position: relative;}
/*リピートなし*/
#main:before,#main:after,#catch .catch_txt h2:before,#recommend h3:before,.recommend li:before,.recommend .frame:before,.recommend .frame:after,#contents .box h2:before{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}

#main:before,#main:after{
background-image: url(./Dup/img/main1.png);
background-size: 100%;
width: 26vw;
height: 42vw;
z-index: 1;
opacity: 0.5;
}
#main:before{top: 0;left: 0;}
#main:after{bottom: 0;right: 0;transform: scale(-1, -1);}

#main .main_box .catch{
content: "";
display: block;
background-image: url(./Dup/img/catch.png);
background-size: 100%;
background-repeat: no-repeat;
width: 40vw;
height: 25vw;
}

.recommend .frame1:before,.recommend .frame1:after{
content: "「";
top: 0;
}
.recommend .frame2:before,.recommend .frame2:after{
content: "」";
bottom: 0;
}
.recommend .frame:before{left: 0;}
.recommend .frame:after{right: 0;}
.recommend .frame1:after,.recommend .frame2:before{transform: scale(-1, 1); /*左右*/}

.recommend li:before{
width: 100px;
height: 100px;
top:35px;
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
}
.recommend li:nth-of-type(1):before{background-image: url(./Dup/img/icon1.png);}
.recommend li:nth-of-type(2):before{background-image: url(./Dup/img/icon2.png);}
.recommend li:nth-of-type(3):before{background-image: url(./Dup/img/icon3.png);}
.recommend li:nth-of-type(4):before{background-image: url(./Dup/img/icon4.png);}
.recommend li:nth-of-type(5):before{background-image: url(./Dup/img/icon5.png);}

#catch .catch_txt h2:before,#recommend h3:before{
background: linear-gradient(135deg,rgba(55,140,185,1), rgba(150,210,220,1));
width: 70px;
height: 3px;
bottom: -10px;
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
}
#recommend h3:before{background: #fff;}

#contents .box h2:before{
background: linear-gradient(135deg,rgba(55,140,185,1), rgba(150,210,220,1));
width: 70px;
height: 3px;
bottom: -10px;
left: 0;
}

/*--------------------------------
全体
--------------------------------*/
.back_color{
background: -webkit-gradient(linear, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.975) 20%, rgba(255,255,255,0.975) 80%,rgba(255,255,255,0.5) 100%);
background: -webkit-linear-gradient(rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.975) 20%, rgba(255,255,255,0.975) 80%,rgba(255,255,255,0.5) 100%);
background: linear-gradient(rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.975) 20%, rgba(255,255,255,0.975) 80%,rgba(255,255,255,0.5) 100%);
background: linear-gradient(rgba(255,255,255,0.5) 0%, rgba(55,140,185,0.7) 20%, rgba(150,210,220,0.7) 80%,rgba(255,255,255,0.5) 100%);
}

#header{background-color: rgba(255,255,255,0.85);}
#header .logo img{max-width: 200px;}
#header li a{color: #333;}
.g-menu-btn .dot span{background: #fff;}
.g-menu-btn:after{border: 1px solid #fff;background: rgba(0,75,155,0.5);}

#main .sns_link li,#page_title .sns_link li{background-color: #fff;}

footer .entry.more a{
background-color: #fff;
}
.footer_nav{
justify-content: center;
align-items: center;
}

.more a:after{width: 8%;}

/* 閉じるボタン付き追従バナー */
.fix_banner{
	max-width: 400px;
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 10;
	transition: 0.5s;
}
.fix_banner .close_bt{
	position: absolute;
	bottom: 110px;
    right: 380px;
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	transition: 0.5s;
	background-color: #fff;
	border: solid 2px #004b9b;
	z-index: 11;
	cursor: pointer;
}
.fix_banner .close_bt:hover{opacity: 0.7;}
.fix_banner .close_bt span{
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
}
.fix_banner .close_bt span:before,.fix_banner .close_bt span:after{
	content: "";
	display: block;
	background-color: #004b9b;
	height: 4px;
	width: 20px;
	position: absolute;
	top:50%;
	left: 50%;
}
.fix_banner .close_bt span:before{
	-ms-transform: translate(-50%,-50%) rotate(-45deg);
	-webkit-transform: translate(-50%,-50%) rotate(-45deg);
	transform: translate(-50%,-50%) rotate(-45deg);
}
.fix_banner .close_bt span:after{
	-ms-transform: translate(-50%,-50%) rotate(45deg);
	-webkit-transform: translate(-50%,-50%) rotate(45deg);
	transform: translate(-50%,-50%) rotate(45deg);
}
.fix_banner.close{right: -450px;}
.fix_banner.close2{right: -450px;}

@media  screen and (max-width: 768px){
.fix_banner{max-width: 300px;}
.fix_banner .close_bt{bottom: 80px;right: 280px;}
}

@media  screen and (max-width: 667px){
.fix_banner{max-width: 250px;}
.fix_banner .close_bt{
	width: 25px;
	height: 25px;
	bottom: 40px;
	right: 230px;
}
.fix_banner .close_bt span{
	width: 25px;
	height: 25px;
}
}
/*--------------------------------
TOP
--------------------------------*/
#main .sns_link,#main .main_box{z-index: 2;}

#video{ height: 100vh; }
#video video{
width: 100%!important;
height: auto;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
@media  screen and (max-width: 1600px){
#video video{
width: auto!important;
height: 100%;
}
}
/* タブレット用 */
@media  screen and (max-width: 768px){
#main,#video{ height: 40vh!important; }
#video video{
width: 100%!important;
height: auto;
}
}
/* スマホ用 */
@media  screen and (max-width: 667px){
#main,#video{ height: 31vh!important; }
}

#catch .catch_txt,.top_cms_box{
background-color: rgba(255,255,255,0.9);
}
#catch .catch_txt h2{
font-size: 50px;
margin-bottom: 50px;
}

.recommend li{
width: calc(20% - 20px);
margin-right: 20px;
box-sizing: border-box;
padding: 50px 20px;
padding-top: 150px;
}
.recommend li:last-of-type{margin-right: 0;}

#contents .box .box_item:before{background-color: rgba(255,255,255,0.85);}
#contents .box .box_item:after{background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #19648C 50.5%) no-repeat top left/100% 100%;}


/* TOP お知らせ */
.topcms_news_type2 .cate_box {
	width: 46.33333%!important;
	margin-right: 1.5%;
	margin-left: 1.5%;
	cursor: pointer;
	border-bottom: 1px solid #ddd;
	margin-bottom: 30px;
	box-shadow: 0 6px 12px rgb(0 0 0 / 0);
	/* padding: 20px; */
	/* border-radius: 20px; */
	/* background-color: #f5f5f5; */
}
.topcms_news_type2 .cate_box:hover {
	transform: translateY(-5px);
}
.topcms_news_type2 .cate_box .box_item {
	cursor: pointer;
}
.topcms_news_type2 .txt_height {
	height: 5em
}
.topcms_news_type2 .box_img1 {
	border-radius: 10px;
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.topcms_news_type2 .cate_box {width: 100%!important;}
.topcms_news_type2 .txt_height {height: 3em}
}

.shop_info .bg_color1{background-color: rgba(25,100,140,0.7);}
/*--------------------------------
下層
--------------------------------*/
main.bg_color1{background-color: #f2f2f2;}

#page_title:before{background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #f2f2f2 50.5%) no-repeat top left/100% 100%;}
#page_title:after{background: linear-gradient(135deg,rgba(55,140,185,0.8), rgba(150,210,220,0.8));}
#page_title .txt_shadow-l{
text-shadow: none;
font-family: "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}
#page_title .page_title_box{color: #fff;}

/* 先輩経営者の声 */
.v_type3 .cate_box{border: 1px solid #378CB9;}
.v_type3 .box_title1{color: #19648C;}

/* よくある質問 */
.qa_type5 .faq_no {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    top: -10px;
    left: 0;
	-webkit-background-clip: padding-box; 
	-moz-background-clip: padding; 
	background-clip: padding-box;
}
.qa_type5 .box_title1, .qa_type5 .box_txt1 {padding-left: 70px;line-height: 1.7;}

@media  screen and (max-width: 1600px){

.recommend li{
width: calc(33% - 100px);
padding: 50px;
padding-top: 150px;
margin-right: 100px;
}
.recommend li:nth-of-type(1),
.recommend li:nth-of-type(2),
.recommend li:nth-of-type(3){margin-bottom: 50px;}
.recommend li:nth-of-type(3){margin-right: 0;}

}
@media  screen and (max-width: 1400px){

.recommend li{
width: calc(33% - 50px);
margin-right: 50px;
}

}
@media  screen and (max-width: 1000px){

.recommend li{
width: calc(33% - 20px);
padding: 50px 20px;
padding-top: 150px;
margin-right: 20px;
}

}

/*タブレット用（768px以下）*/
@media  screen and (max-width: 768px){
#main .sns_link{display: none;}

.header_menu li:last-of-type{display: none;}

.recommend li{
width: 80%;
padding: 50px;
padding-left: 150px;
margin-right: 0;
margin-bottom: 50px;
}
.recommend li:before{
width: 70px;
height: 70px;
top:50%;
left: 60px;
-ms-transform: translate(0,-50%);
-webkit-transform: translate(0,-50%);
transform: translate(0,-50%);
}

#cms_1-e .pager li{width: 59px!important;}

}

/*スマホ用（667px以下）*/
@media  screen and (max-width: 667px){

#main .main_box .catch{
width: 60vw;
height: 36vw;
}

#catch .catch_txt h2{font-size: 30px;margin-bottom: 30px;}
#catch .catch_txt h2:before, #recommend h3:before{bottom: -15px;}

.recommend li{
width: 100%;
padding: 30px;
padding-top: 100px;
}
.recommend li:before{
width: 50px;
height: 50px;
top:35px;
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
}

#contents .box .box_item:after{background: linear-gradient(to top left, rgba(255,255,255,0) 50%, #19648C 50.5%) no-repeat bottom left/100% 100%;}
#contents .box h2:before{
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
}
#contents .box .box_item{padding: 70px 30px 50px;}

.shop_info h2{width: 60%;}

.cate_list > div{margin-left: 10%;}

#cms_1-e .pager li{
width: 45px!important;
}
#cms_1-e .pager li a.font_2dw_sp{font-size: 12px;}
.font_14up_sp{
font-size: -webkit-calc(1rem + 14px);
font-size: calc(1rem + 14px);
}

}

/*IE*/
@media all and (-ms-high-contrast: none) {}




/*--------------------------------
自動リンク
--------------------------------*/
/* color */
.linkStyle{color: #19648c; text-decoration: underline;}
.txt_color_nomal .linkStyle{color: #19648c;}
.txt_white .linkStyle{color: white;}
.txt_red .linkStyle{color: red;}

/*IEのみ*/
@media all and (-ms-high-contrast: none) {
.linkStyle{display: inline-block;}
}

/*--------------------------------
カラー
--------------------------------*/
body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: #333333;}
.txt_black,.hvr_txt_black:hover{color: black;}
.txt_white,.hvr_txt_white:hover{color: white;}
.txt_red,.hvr_txt_red:hover{color: red;}
.txt_color1,.hvr_txt_color1:hover{color: #19648C;} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #378CB9;} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #D7D2CD;} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #F0F0F0;} /* アクセントカラー2 */
.txt_color5,.hvr_txt_color5:hover{color: #377DFF;}
.txt_color6,.hvr_txt_color6:hover{color: #46DCFF;}

/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: white;} /* 白背景 */
.bg_black,.hvr_bg_black:hover{background-color: black;} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: #19648C;} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #378CB9;} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #D7D2CD;} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #F0F0F0;} /* アクセントカラー2 */
.bg_color5,.hvr_bg_color5:hover{background-color: #377DFF;}
.bg_color6,.hvr_bg_color6:hover{background-color: #46DCFF;}
.bg_color_clear,.hvr_bg_color_clear:hover{background-color: transparent!important;}

/* border-color */
.border_white,.hvr_border_white:hover{border-color: white;}
.border_black,.hvr_border_black:hover{border-color: black;}
.border_color1,.hvr_border_color1:hover{border-color: #19648C;}
.border_color2,.hvr_border_color2:hover{border-color: #378CB9;}
.border_color3,.hvr_border_color3:hover{border-color: #D7D2CD;}
.border_color4,.hvr_border_color4:hover{border-color: #F0F0F0;}
.border_color5,.hvr_border_color5:hover{border-color: #377DFF;}
.border_color6,.hvr_border_color6:hover{border-color: #46DCFF;}