/* ----------　all　---------- */
@import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500&display=swap');

.linkStyle{
	color:#603813;
	text-decoration: underline;
}
.linkStyle:hover{
	color:#603813;
	opacity: 0.5;
	transition: all 0.5s;
}

.txt_color3{color: #fbe39a!important} /* アクセントカラー1 */

.bg_color3 {
	background-color: #a37c50!important;
}

.border_color3 {
	border-color: #a37c50!important;
	
}

header {
	background-image: url("Dup/img/header_bg_pc.jpg");
	background-size: cover;
	
}

header #main_menu a {
	color: #ffffff;
	font-weight: 400;
}

.head_banner a {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.head_banner a::after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    display: block;
    content: '';
    width: 30em;
    height: 30em;
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all .5s;
}

.head_banner a:hover::after {
    box-shadow: inset 0 0 0 15em rgb(96 59 26);
}

body {
background-image: url("Dup/img/renga_bg.png");
background-size: contain;
background-color: #a37c50;
font-family: 'Zen Kaku Gothic New', sans-serif;
}

p {
    font-weight: 300;
}

.font_bold {
    font-weight: 400;
}

#main_menu ul li a::before {
	display: none;
	background-image: url("Dup/img/coffeeicon.png");
	background-color:transparent;
	top:0;
	left: -170px;
	width: 15px;
	height: 15px;
	background-repeat: no-repeat;
	background-size: 100%;
}

#main_menu ul li a:hover::before {
	display: block;
	width: 15px;
}

.tel_bt a{
	color: #ffffff!important;
}

#footer_menu a:hover {
    color: #ffffff!important;
}

footer h2 img {
    max-width: 300px!important;
}



/* ----------　loading　---------- */

#loader-bg {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  background: #412e19;
  z-index: 1000;
}

#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #fff;
  z-index: 2;
}

.loading-gif {
	width: 100%;
	margin-bottom: 30px;
}

#loader p {
    font-size:20px;
}

.link_box ul li {
    height: 21px!important;
}

/* ----------　TOP　---------- */

#video:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(65, 46, 25, .4);
    position: absolute;
    top: 0;
    left: 0;
}

video {
	z-index:-1;
}

.chachcopy {
    text-align: left;
	font-family: 'Shippori Mincho', serif!important;
	font-size: 40px;
	color: #ffffff!important;
	position: absolute;
	top:50%;
	left: 25%;
	z-index: 100;
	text-shadow: 1px 1px 3px rgb(0 0 0 / 85%);
	
}

.br_tb {
    display: none;
}


#contents1 {
	background:linear-gradient(to right, #412E19 0%, #412E19 45%, transparent 100%),url("Dup/img/top1.jpg");
	background-position: right center;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
}

 #contents3 {
	background-image: url("Dup/img/contens_bg_2.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}

#contents1 h2, #contents2 h2, #contents3 h3 {
	color: #fbe39a;
	font-weight: 500;
	font-family: 'Shippori Mincho', serif!important;
}

#contents1 p {
	color: #ffffff;
}

/*
#contents1 h2::after {
	content: "";
    position: absolute;
    top: 0;
    right: 0;
    background-image: url("Dup/img/coffee4.png");
    background-repeat: no-repeat;
    background-size: 100%;
    height: 100%;
    width: 30%;
}*/



#contents2 {
	background-color: #a37c50!important;
	position: relative;
}

 #contents2 h2 {
     margin-top:5px;
 }

#contents2 p {
	color: #ffffff;
}



#contents2 .d_flex .grid_6:first-child::after {
    content: "";
    width: 20%;
    height: 100%;
    background-image: url(Dup/img/mil.png);
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    right: 45%;
    bottom: -20%;
}


#contents3 .con_no {
	color: #fbe39a;
}

 #contents3 h3 {
     margin-top:30px;
 }


.intro_sub, .con2_no {
	position: absolute;
    top: 5%;
    left: 5%;
    width: 20%;
    height: auto;
    max-width: 240px;
}

.con3_no {
	width: 25%;
	margin-top: 15px;
}

#contents3 .d_flex::after {
    content: "";
    width: 20%;
    height: 100%;
    background-image: url(Dup/img/cf_reef.png);
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    right: 5%;
    bottom: -70%;
}


#top_cms .box:first-child {
    background-image: url(Dup/img/cf_mi.png);
    background-repeat: no-repeat;
    background-position: left;
}


#top_cms .box:nth-child(2n){
    background-image: url(Dup/img/drip.png);
    background-repeat: no-repeat;
    background-position: right;
}


#top_cms .box:last-child {
    background-image: url(Dup/img/coffee_in.png);
    background-repeat: no-repeat;
    background-position: left;
}


#top_cms .cms_title h2 {
    font-weight: bold;
}


#top_cms .cms_1-e, #top_cms .cms_5-c {
    background-color: rgba(255,255,255,0.6);
    padding: 15px;
}

.cms_title h2 {
    font-family: 'Shippori Mincho', serif!important;
}

.cms_title p {
    color: #a37c50!important;
}

#top_cms .cms_5-c .box_txt1 {
    font-weight: 400!important;
}

#top_cms .cms_1-e .cate_box .box_title1:empty {
    display: block!important;
    height: 38px;
}


/*
.top_cms_wrap {
    background-image: url(Dup/img/koruku_bg.jpg);
}*/

.footer_cms {
    font-weight: 400!important;
}


/* ----------　下層ページ　---------- */

#page_title h2 {
    font-family: 'Shippori Mincho', serif!important;
    font-weight: 500;
}


#page_title .page_box p {
    color: #a37c50!important;
}

#page03.box_txt1 {
    font-weight: 500;
}

#cms_2-c .cate .box_txt1 {
    background-color: #a37c50;
    padding: 5px;
    text-align: center;
    margin-bottom: 10px;
}

#cms_4-a .cate_txt1, #cms_1-e .box_txt1 {
    font-weight: 400;
}

#cms_4-a .cate_box h4 {
    color: #603813!important;
}

#cms_5-c .box_txt1 {
    font-weight: 400;
}


/* 会社情報 */

#page7 .box_item h3 {
    color: #603813!important;
    font-weight: 500;
}

#page7 .box_item p {
    font-weight: 400;
}

/* お問い合わせ */

#contact_tel a {
    color: #603813!important;
}

#page8 p {
    font-weight: 400;
}

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

#page9 p {
    font-weight: 400!important;
}

/* サイトマップ */


/*-------------------------------------------------------
			          タブレット
-------------------------------------------------------*/
@media screen and (max-width: 768px){
    
#video {
    margin-top:30px;
}
    
.chachcopy {
    font-size: 30px;
    top: 45%;
    left: 2%;
}

.br_tb {
    display: block;
}
    
header {
    background-image: url('Dup/img/header-bg_tb.jpg');
	background-size: cover;
	
}

.hamburger {
    top:35px;
}

.hamburger__icon, .hamburger__icon:before, .hamburger__icon:after {
    background-color: #fbe39a!important;
}

.hamburger.active .hamburger__icon:before, .hamburger.active .hamburger__icon:after {
    background-color: #603813!important;
}

.hamburger.active .hamburger__icon {
    background-color: transparent!important;
}
    
.intro_sub, .con2_no {
    width: 45%;
}

#contents1 {
    background: linear-gradient(to right, rgba(65, 46, 25, .75) 0%, rgba(65, 46, 25, .75) 100%),url(Dup/img/top1.jpg);
    background-size: cover;
    background-position: right;

}


.con2_no {
    top:3%;
}

#contents3 h3 {
    text-align: center;
}

.con3_no {
	width: 35%;
}
    
#contents2 .d_flex .grid_6:first-child::after {
    width: 25%;
    bottom: -5%;
    right: 5%;
    
}

/*-------------------------------------------------------
		            	スマホ
-------------------------------------------------------*/
@media screen and (max-width: 667px){
    
#video {
    margin-top:20px;
}
    
.chachcopy {
    font-size: 25px;
    top: 60%;
}
    
.width_300 {
    width: 100%;
}
    
#contents1 h2::after {
    width: 45%;
}

.hamburger {
    top:20px;
} 


#contents2 .d_flex .grid_6:first-child::after {
    width: 45%;
    bottom: -15%;
    right: 5%;
}

#contents3 .d_flex::after {
    width: 40%;
    right: 5%;
    bottom: -90%;
}

#top_cms .box:first-child {
    background-size: 50%;
    background-position: left top;
}


#top_cms .box:nth-child(2n){
    background-size: 50%;
    background-position: right top;
}


#top_cms .box:last-child {
    background-size: 80%;
    background-position: left bottom;
}
    
}