/*--------------------------------
全体
--------------------------------*/
body,#wrap{background-color: #f0ece7;}

header{
padding-top: 15px;
padding-bottom: 15px;
}
header.transform{background-color: rgba(255,255,255,0.7);}
#header_menu li a.txt_color_nomal span{
font-size: 16px;
text-shadow:
0 0 10px white,
0 0 10px white,
0 0 10px white,
0 0 10px white,
0 0 10px white,
0 0 10px white,
0 0 10px white,
0 0 10px white;
}
header.transform #header_menu li a.txt_color_nomal span{ text-shadow:none;}
#logo img{transition: all 0.3s;}

/* 円形追従バナー */
.circle_banner{
position: fixed;
bottom: 10px;
right: 95px;
width: 180px;
z-index: 4;
transition: width 0.3s,height 0.3s;
}
.circle_banner:before{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
background-image: url(./Dup/img/circle_banner2.png);
width: 180px;
height: 180px;
top: 0;
left: 0;
z-index: -1;
-webkit-animation: rotate 30s linear infinite;
animation: rotate 30s linear infinite;
transition: width 0.3s,height 0.3s;
}
.circle_banner.top.first{width: 230px;}
.circle_banner.top.first:before{
width: 230px;
height: 230px;
}
@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@media  screen and (max-width: 768px){
.circle_banner.top.first{width: 180px;}
.circle_banner.top.first:before{
width: 180px;
height: 180px;
}
}
@media  screen and (max-width: 667px){

.circle_banner{
bottom: 12px;
right: 80px;
}
.circle_banner,.circle_banner.top.first{width: 100px;}
.circle_banner:before,.circle_banner.top.first:before{
width: 100px;
height: 100px;
}

}
/*--------------------------------
TOP
--------------------------------*/
.main1{
width: 800px;
height: 160px;
overflow: hidden;
margin: 0 auto;
position: absolute;
top: 38%;
left: 5%;
right: 0;
}

#intro{
background-image: url(./Dup/img/bg3.jpg);
background-size: cover;
background-position: center center;
}


#intro #video{ height: 41vh; }
#intro #video video{
height: 100%;
object-fit: cover;
top: 50%;
left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

@media  screen and (max-width: 1600px){
#intro #video video{
width: auto!important;
height: 100%;
}
}

/*タブレット用（768px以下）
--------------------------------------------------------------------------*/
@media  screen and (max-width: 768px){
#intro #video{
width: 85%;
height: 32vh;
}
#intro #video video{
width: 100%!important;
height: auto;
}
}

/*スマホ用（667px以下）
--------------------------------------------------------------------------*/
@media  screen and (max-width: 667px){
#intro #video{ height: 31vh; }
}

#intro .intro_img2{
margin: -74px -50px 0 auto;
z-index: 1;
position: relative;
}

/* 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
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.topcms_news_type2 .cate_box {width: 100%!important;}
.topcms_news_type2 .txt_height {height: 3em}
}

/* TOPギャラリー */
/* ---------- loopSlider ---------- */
#topcms_gallery_type1 .loopSliderWrap{
    top: 0;
    left: 0;
    height: 450px;
}
#topcms_gallery_type1 .loopSlider {
    margin: 0 auto;
    height: 450px;
    text-align: left;
    position: relative;
    overflow: hidden;
}
#topcms_gallery_type1 .loopSlider .ul {
    height:450px;
    float: left;
    overflow: hidden;
}
#topcms_gallery_type1 .loopSlider .ul .li {
    width: 450px;
    height: 450px;
    float: left;
    display: inline;
    overflow: hidden;
	position: relative;
	box-sizing: border-box;
	padding: 0;
}
#topcms_gallery_type1 .loopSlider .ul .li img{
    border-radius: 0;
}
#topcms_gallery_type1 .loopSliderWrap:after {
    content: "";
    display: none;
    clear: none;
}

/*リンクボタン*/
#topcms_gallery_type1 .btn{z-index: 3;}
#topcms_gallery_type1 .btn a::before {
    content: '';
    position: absolute;
    bottom: 55px;
    right: 27%;
    width: 42%;
    height: 1px;
    background: #333;
    transition: all .3s;
}
#topcms_gallery_type1 .btn a::after {
    content: '';
    position: absolute;
    bottom: 60px;
    right: 27%;
    width: 15px;
    height: 1px;
    background: #333;
    transform: rotate(35deg);
    transition: all .3s;
}
#topcms_gallery_type1 .btn a:hover::before {
    right: 16%;
    background: #fff;
}
#topcms_gallery_type1 .btn a:hover::after {
    right: 15%;
    background: #fff;
}
#topcms_gallery_type1 .btn {
    display: block;
}
#topcms_gallery_type1 .btn a {
    background: #fff;
    color: #212121;
    width: 200px;
    height: 200px;
    display: flex;
    align-content: center;
    justify-content: center;
    border-radius: 50%;
    flex-wrap: wrap;
    transition: all 0.4s;
}
#topcms_gallery_type1 .btn a:hover {
    background: #1c1c1c;
    color: #fff;
}
#topcms_gallery_type1 .btn a span, .btn a strong {
    text-align: center;
}
@media(max-width: 768px) {
#topcms_gallery_type1,#topcms_gallery_type1 .loopSliderWrap,#topcms_gallery_type1 .loopSlider,#topcms_gallery_type1 .loopSlider ul,#topcms_gallery_type1 .loopSlider .ul .li{
	height: 280px;
}
#topcms_gallery_type1 .loopSlider .ul .li{
    width: 280px;
}
#topcms_gallery_type1 {
    padding-bottom: 0;
    padding-top: 0;
}
}
@media(max-width: 667px) {
#topcms_gallery_type1,.loopSliderWrap,.loopSlider,.loopSlider .ul,.loopSlider .ul .li{
	height: 179px!important;
}
#topcms_gallery_type1 .loopSlider .ul .li{
    width: 179px;
}
#topcms_gallery_type1 .btn a::after {
    bottom: 35px;
    right: 27%;
}
#topcms_gallery_type1 .btn a::before {
    bottom: 30px;
    right: 27%;
}
#topcms_gallery_type1 .btn a {
    width: 140px;
    height: 140px;
    line-height: 1.7;
}
}
/*--------------------------------
下層
--------------------------------*/
#page_title #filter_white{
background-color: rgba(240,235,230,0.8);
padding-bottom: 100px;
}


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

.drawer-hamburger{padding-bottom: 15px!important;}

#main_img{height: 75vw;}
.main1 {
width: 600px;
height: 130px;
top: 33%;
left: 3%;
}
#intro .intro_img2{margin: -140px 0 0 auto;}

}

/*スマホ用（667px以下）*/
@media  screen and (max-width: 667px){

.main1{
width: 300px;
height: 65px;
top: 37%;
left: 3%;
}
#intro .intro_img2{margin: -85px 0 0 auto;}

#page_title #filter_white{
padding-top: 100px;
padding-bottom: 65px;
}

}

/*IE*/
@media all and (-ms-high-contrast: none) {}




/*--------------------------------
自動リンク
--------------------------------*/
/* color */
.linkStyle{color: #333; text-decoration: underline;}
.txt_color_nomal .linkStyle{color: #333;}
.txt_white .linkStyle{color: white;}
.txt_red .linkStyle{color: red;}
.bg_color1 .linkStyle{color: #fff;}
.bg_color2 .linkStyle{color: #333;}
.bg_color3 .linkStyle{color: #fff;}
.bg_color4 .linkStyle{color: #333;}

/*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: #3c372d;} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #b9afa0;} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #5f5550;} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #cdc3b9;} /* アクセントカラー2 */

/* 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: #3c372d;} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #b9afa0;} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #5f5550;} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #cdc3b9;} /* アクセントカラー2 */
.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: #3c372d;}
.border_color2,.hvr_border_color2:hover{border-color: #b9afa0;}
.border_color3,.hvr_border_color3:hover{border-color: #5f5550;}
.border_color4,.hvr_border_color4:hover{border-color: #cdc3b9;}