﻿@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap');
body{font-family: 'Noto Serif JP', serif;}

.top #wrap{
opacity: 0;
}
#fakeloader{
z-index: 9999;
}
#fakeloader .fl{
position: absolute!important;
top: 50%!important;
left: 50%!important;
transform: translate(-50%,-50%)!important;
width: 50%!important;
max-width: 300px;
}
#fakeloader .fl{
animation-name: loader;
animation-duration: 5s;
animation-timing-function: ease;
}
@keyframes loader{
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}

header{top:0;padding-bottom: 0;}
#header{padding-bottom: 20px;}
.logo {width:100%;max-width: 250px;}

#header_menu li:last-of-type{display: none;}
#header_menu li:hover .menu__second-level{
top: 70px;
visibility: visible;
opacity: 1;
}
.menu__second-level{
top: 60px;
left: 50%;
text-align: left;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
width: 200px;
-webkit-transition: all .2s ease;
transition: all .2s ease;
visibility: hidden;
opacity: 0;
z-index: 1;
background-color: rgba(250,230,240,0.7);
}
.menu__second-level a{
padding: 10px 0;
display: block;
color: #d75587;
transition: opacity 0.5s;
font-size: 14px;
}
.menu__second-level a:hover{
opacity: 0.5;
}

#footer .logo {width:100%;max-width: 300px;}

/*-------------------------------
TOP
-------------------------------*/
.line,.snow,.line_b-l,.orn1,.orn2{position: relative;}

/* TOP挨拶 装飾 */
.line:before,.line:after{
content: "";
display: block;
width: 250px;
height: 62.5px;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
}
.line:before{
background-image: url(./Dup/img/line1.png);
top: -55px;
}
.line:after{
background-image: url(./Dup/img/line2.png);
bottom: -35px;
}

/* 雪の結晶 装飾 */
.snow:before{
content: "";
display: block;
width: 100px;
height: 100px;
background-image: url(./Dup/img/snow1.png);
background-size: cover;
background-repeat: no-repeat;
position: absolute;
top: -20px;
left: -40px;
z-index: -1;
}
.line_b-l:after{
content: "";
display: block;
width: 50px;
height: 5px;
background-color: rgba(230,205,140,0.5);
position: absolute;
bottom: -5px;
left: 0;
}
#top_cms .line_b-l:after{left: 10px;}
#cms_2-c .line_b-l:after{bottom: 20px;}

.line_l:after{
content: "";
display: block;
width: 15px;
height: 2px;
background-color: rgba(230,205,140,0.5);
position: absolute;
top: 15px;
left: 0;
}

.orn1:before,.orn1:after,.orn2:before,.orn2:after{
content: "";
display: block;
width: 20px;
height: 20px;
background-image: url(./Dup/img/orn1.png);
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}
.orn1:before{
top: -20px;
left: 0;
}
.orn1:after{
top: -20px;
right: 0;
transform: scale(-1, 1);
}
.orn2:before{
bottom: -20px;
left: 0;
transform: scale(1, -1);
}
.orn2:after{
bottom: -20px;
right: 0;
transform: scale(-1, -1);
}

#video{ height: 100vh; }
#video video{
width: 100%;
height: auto;
top: 50%;
left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.cms_2-c .cate{
text-align: center;
width: 30%;
margin: 10px;
box-sizing: border-box;
}
.cms_2-c .cate a{
display: block;
background-color: #d75587;
color: white;
padding: 30px 10px;
transition: color 0.5s, background-color 0.5s;
}
.cms_2-c .cate a:hover{
background-color: #fae6f0;
color: #d75587;
opacity: 1;
}
.cms_2-c .cate span{
display: block;
}

/*-------------------------------
下層
-------------------------------*/
#page_title #filter_white {padding-top: 100px!important;}
.cate_list li{
text-align: center;
width: 30%;
margin: 10px;
box-sizing: border-box;
}
.cate_list li a{
padding: 10px;
background-color: #d75587;
color: white;
}
.cate_list li a:hover{
background-color: #fae6f0;
color: #d75587;
opacity: 1;
}
.cate img, .cate_box img {box-shadow: none;}
#cms_2-c .snow:before,#cms_1-c .snow:before{
width: 80px;
height: 80px;
top: -20px;
left: -35px;
}
/*page2*/
.page2_color1{color: #732D91;}
.page2_color2{color: #D75587;}
.page2_color3{color: #4BC3DC;}
.page2_color4{color: #CDAF50;}
.page2_color5{color: #9B9B9B;}
.page2_color6{color: #22B573;}
.page2_color7{color: #FF8C50;}

/* page3・page4 */
.page3 #cms_2-c .cate_item,.page4 #cms_2-c .cate_item,.page6 #cms_2-c .cate_item{min-height: 300px;}
.page3 #cms_2-c .cate_item:before,.page4 #cms_2-c .cate_item:before,.page6 #cms_2-c .cate_item:before{
content: "";
displat: block;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.2);
position: absolute;
top: 0;
left: 0;
}
.page3 #cms_2-c .cate_item .cate_title,
.page4 #cms_2-c .cate_item .cate_title,
.page6 #cms_2-c .cate_item .cate_title{
position: absolute;
top:50%;
left: 5%;
-ms-transform: translate(0,-50%);
-webkit-transform: translate(0,-50%);
transform: translate(0,-50%);
}
.page3 #cms_2-c .sub_cate.grid_6,
.page4 #cms_2-c .sub_cate.grid_6{
width: 45%!important;
margin-right: 5%;
box-sizing: border-box;
}
#cms_2-c .bottom_txt.snow:before{
width: 150px;
height: 150px;
top:50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

.page6 .cate_box .box_img1,
.page6 .cate_box .box_img2{
width: 47.5%;
margin-right: 5%;
box-sizing: border-box;
}
.page6 .cate_box .box_img2{margin-right: 0;}
/*IEのみ*/
@media all and (-ms-high-contrast: none) {
header #header #header_menu li:last-child a span{padding-top: 7px;padding-bottom: 7px;}
.more a{padding-top: 5px;}
#page_title h2 span{padding-top: 15px;}
#info_title_box .info_title span{padding: 15px 40px;}
#page8 #tel_contact p a{padding: 20px;}
#page8 #form_box #form_bt div::after{top: 53%;}
}
/* 1600px以下 */
@media  screen and (max-width: 1600px){
#video video{
width: auto!important;
height: 100%;
}
}
/*タブレット用（768px以下）
--------------------------------------------------------------------------*/
@media  screen and (max-width: 768px){
#video{ height: 39vh; }
#video video{
width: 100%!important;
height: auto;
}
#intro {
background-size: 100%!important;
background-repeat: no-repeat;
background-position: 0 370px;
}
#page_title #filter_white {
padding-top: 80px!important;
padding-bottom: 80px!important;
}
.cate_list li{width: 46%;}
.cms_2-c .cate{width: 46%;}

/* page3・page4 */
.page3 #cms_2-c .cate_item,.page4 #cms_2-c .cate_item,.page6 #cms_2-c .cate_item{min-height: 250px;}
.page3 #cms_2-c .sub_cate.grid_6,
.page4 #cms_2-c .sub_cate.grid_6{
width: 83.33333%!important;
margin: 0 auto;
}
}

/*スマホ用（667px以下）
--------------------------------------------------------------------------*/
@media  screen and (max-width: 667px){
#header{padding-bottom: 10px;}
.drawer-hamburger{ padding: 24px .75rem 24px;}

.snow:before{
width: 70px;
height: 70px;
top: -15px;
left: -25px;
}
#video{ height: 31vh; }
#wrap {
    padding-top: 74px!important;
}
#intro {
background-position: 0 600px;
}
.cate_list li{width: 100%;margin: 0 0 10px;}
.cms_2-c .cate{width: 100%;margin: 0 0 10px;}

/* page3 */
.page3 #cms_2-c .cate_item,.page4 #cms_2-c .cate_item,.page6 #cms_2-c .cate_item{min-height: 170px;}
.page3 #cms_2-c .sub_cate.grid_6,
.page4 #cms_2-c .sub_cate.grid_6{
width: 100%!important;
}
.page3 .line_l:after,.page4 .line_l:after{
width: 10px;
height: 2px;
top: 11px;
left: 0;
}
.page6 .cate_box .box_img1,
.page6 .cate_box .box_img2{
width: 100%;
margin-right: 0;
margin-bottom: 5%;
}
.page6 .cate_box .box_img2{margin-bottom: 0;}
}

/*--------------------------自動リンク--------------------------*/
/* color */
.linkStyle{color: #dcb973; text-decoration: underline;}
.txt_color_nomal .linkStyle{color: #dcb973;}
.txt_white .linkStyle{color: white;}
.txt_red .linkStyle{color: red;}
.bg_color1 .linkStyle{color: #fff;}
.bg_color2 .linkStyle{color: #d75587;}
.bg_color3 .linkStyle{color: #d75587;}
.bg_color4 .linkStyle{color: #d75587;}

/*IEのみ*/
@media all and (-ms-high-contrast: none) {
.linkStyle{display: inline-block; margin-bottom: 20px;}
}

/*--------------------------カラー--------------------------*/
body,.txt_color_nomal{color: #333;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_blue{ color: #28b4ff;}
.txt_blue2{ color: #0037be;}
.txt_color1{color: #d75587} /* メインカラー */
.txt_color2{color: #fae6f0} /* サブカラー */
.txt_color3{color: #ebc3dc} /* アクセントカラー1 */
.txt_color4{color: #faf0f5} /* アクセントカラー2 */
.txt_color5{color: #dcb973}

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #d75587} /* メインカラー */
.bg_color2{background-color: #fae6f0} /* サブカラー */
.bg_color3{background-color: #ebc3dc} /* アクセントカラー1 */
.bg_color4{background-color: #faf0f5} /* アクセントカラー2 */
.bg_color5{background-color: rgba(240,235,230,0.3);} 
.bg_color_clear{background-color: transparent!important}


/* border-color ※!important */
.border_color1{border-color: #d75587}
.border_color1_05{border-color: rgba(215,85,135,0.5);}
.border_color2{border-color: #fae6f0}
.border_color3{border-color: #ebc3dc}
.border_color4{border-color: #faf0f5}
.border_color5{border-color: #dcb973}


/* hover ---------------------------------------------------------------------------------------------*/
/* color */
.hvr_txt_color_nomal:hover{color: #333;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #d75587} /* メインカラー */
.hvr_txt_color2:hover{color: #fae6f0} /* サブカラー */
.hvr_txt_color3:hover{color: #ebc3dc} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #faf0f5} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #d75587} /* メインカラー */
.hvr_bg_color2:hover{background-color: #fae6f0} /* サブカラー */
.hvr_bg_color3:hover{background-color: #ebc3dc} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #faf0f5} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #d75587}
.hvr_border_color2:hover{border-color: #fae6f0}
.hvr_border_color3:hover{border-color: #ebc3dc}
.hvr_border_color4:hover{border-color: #faf0f5}