@charset "utf-8";
/* CSS Document */
*, *:before, *:after { box-sizing:border-box; margin:0; }
img { max-width:100%; height:auto; vertical-align:top; }
a{text-decoration: none;}
a:hover{opacity: 0.5;text-decoration: underline;}

body {
/*font-family: "meiryo","メイリオ","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",sans-serif;*/
font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", Georgia, "ＭＳ Ｐ明朝", "MS PMincho", serif;

font-size: 16px;
font-weight: 300;
line-height: 1.5;
color: #333;
/*background: #000;*/
}
.sp{display:none;}
.pc{display:block;}

.fs{font-weight: normal !important;font-size: 0.9em;}

/*header -----------------------------------------------------------------*/
header{
width: 100%;
height: 60px;
position: fixed;
top: 0;
z-index: 10;
background: #000;
}
.logo_kawaguchiko{
width: 1100px;
margin: 0 auto;
padding: 0.5em 2em;
display: flex;
justify-content: space-between;
}
a.link_logo{width: 200px;display: block;}
.header_wrap{
width: 100%;
position: relative;
background: #dcdcdc;
margin-top: 60px;
}
.swiper{
width: 100%;
height: 600px;
}
.swiper-wrapper{
width: 100%;
height: 600px;
}
.swiper-slide{height: 600px;position: relative;}
.swiper-slide img{
max-width: unset;
position: absolute;
transform: translate(-50%, -50%);
min-width: 1100px;
}

.swiper-slide img.slide_img01 {width: 100%;top: 50%;left: 50%;}
.swiper-slide img.slide_img02 {width: 100%;top: 50%;left: 50%;}
.swiper-slide img.slide_img03 {width: 100%;top: 50%;left: 50%;}
.swiper-slide img.slide_img04 {width: 100%;top: 50%;left: 50%;}
.swiper-slide img.slide_img05 {width: 100%;top: 50%;left: 50%;}
.swiper-slide img.slide_img06 {width: 100%;top: 50%;left: 50%;}
.swiper-slide img.slide_img07 {width: 100%;top: 50%;left: 50%;}

.title_wrap{
position: absolute;
z-index: 2;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
opacity: 0;

/* アニメーション */
animation: fadeIn 3s linear;
animation-fill-mode: both;
}
.title_wrap img{max-height: 100%;}

@keyframes fadeIn{
0%{opacity: 0;}
40%{opacity: 0;}
100%{opacity: 1;}
}

/*Language -----------------------------------------------------------------*/
.lang_btn{width: 70px;padding-top: 2px;}
.lang_btn_co{
position: relative;
text-align: center;
}
.lang_btn label{
display: block;
line-height: 1;
cursor: pointer;
font-size: 0.8em;
color: #fff;
}
.lang_btn label i{font-size: 2em;margin-bottom: 2px;}
.lang_btn a{display: block;text-decoration: none;}
input{display: none;}
.lang_btn li{height: 0;overflow: hidden;transition: all 0.5s;}
ul#lang_lists{width: 150px;margin-top: 10px;margin-left: -57px;}
#lang_lists li{text-align: center;opacity: 0;}
#lang_list:checked ~ 
#lang_lists li{
height: 50px;
opacity: 1;
}
#lang_lists li a{
padding: 1em;
background: rgba(0, 0, 0, 0.7);
color: #fff;
}
#lang_lists li a:hover{
opacity: 1;
background: #fff;
color: #4c4c4c;
}

/*footer -----------------------------------------------------------------*/
footer{padding: 2em 0 0.5em;}
.footer_logo_kawaguchiko{
width: 1100px;
margin: 0 auto;
padding: 0 0 2em;
}
.footer_logo_kawaguchiko a{width: 220px;display: block;}

.footer_wrap{color: #fff;}
.footer_menu{
display: flex;
flex-wrap: wrap;
width: 100%;
margin-bottom: 2em;
}
.footer_menu a{
color: #fff;
margin-right: 2em;
}
.footer_wrap .footer_title{
font-size: 1.3em;
color: #fff;
border-bottom: dotted 3px #438c99;
line-height: 1.7;
width: 100%;
margin-bottom: 0.6em;
}
.footer_wrap .copy{
width: 100%;
text-align: center;
font-size: 0.9em;
}

/*content -----------------------------------------------------------------*/
section{
margin: 0px 0 3em;
padding: 2em 0;
}
.section_mb0{margin-bottom: 0;}
.bg_dc{background: #dcdcdc;}
.bg_f1{background: #f1f1f1;}
.bg_b{background: #000;}

.content{
width: 1100px;
margin: 0 auto ;
padding: 0 2em;
display: flex;
flex-wrap: wrap;
}
.top_info{text-align: center;}
.top_info h1{
font-size: 22px;
text-align: center;
width: 100%;
margin-bottom: 0.5em;
}
.top_info p{
margin-bottom: 1em;
width: 100%;
font-size: 1.2em;
text-align: center;
}
.open_date{
color: #c10034;
font-weight: bold;
font-size: 1.7em !important;
margin: 1em 0 0.3em !important;
}
.time{margin: 0 0 1.5em !important;}
.time span{font-weight: bold;}
.top_info_text{
width: 650px;
margin: 0 auto;
}
.top_info_text p{text-align:left !important;}

.open_wrap{
background: rgba(256, 256, 256, 0.8);
display: flex;
justify-content: space-between;
width: 530px;
margin: 0 auto;
padding: 0.5em 1.6em;
border: solid 2px #e8d988;
}
.open_text1,.open_text2{font-size: 1.5em;font-weight: bold;}
.open_text1{}
.open_text2{color: #c10034;}

.img_wrap{justify-content: center;margin: 1em auto;}
.fujisantei_img{
width: calc(100% / 3 - 10px);
margin: 0 5px 10px;
}
.insta_wrap{margin-bottom: 0em;}
.insta_wrap h2{
width: 100%;
text-align: center;
color: #000;
font-size: 2em;
margin-bottom: 0.5em;
}
.insta_wrap h2 i{margin-right: 0.3em;}
.insta_wrap p{
text-align: center;
width: 100%;
line-height: 1.9;
}
.insta_wrap p i{margin-left: 0.3em;}
.insta_btn_wrap{
margin: 2em auto 1em;
text-align: center;
width: 50%;
}
.insta_btn_wrap a{
font-size: 1.5em;
background: #000;
color: #fff;
font-weight: bold;
border-radius: 50px;
padding: 0.3em 0 0.2em;
display: block;
}
.insta_btn_wrap a i{margin-right: 0.3em;}
.map_wrap{
width: 100%;
height: 500px;
margin-top: -2em;
}
.shop_detail{padding-top: 1em;}
.shop_detail p{
width: 100%;
text-align: center;
font-size: 1.3em;
}
.shop_detail i{margin-right: 0.3em;}
.shop_detail p.phone{
margin: 0.5em 0 0;
font-size: 1.5em;
}
.shop_detail p.phone a{color: #333;}

@media (min-width: 769px) {
.shop_detail p.phone a[href^="tel:"] {pointer-events: none;  }
}

@media screen and (max-width:768px){
.sp{display:block;}
.pc{display:none;}
/*header -----------------------------------------------------------------*/
header{height: 51px;}
.logo_kawaguchiko{width: 100%;padding: 8px;align-items: flex-start;}
.lang_btn {padding-top: 0px;margin-right: 10px;}
.lang_btn_co{height: 43px;}
.lang_btn label i{font-size: 1.7em;}
ul#lang_lists{
width: 150px;
margin-top: 0px;
margin-left: -62px;
}
a.link_logo {width: 160px;}
a.link_lang{font-size: 0.9em;}
.header_wrap{margin-top: 51px;}
.swiper{height: 500px;}
.swiper-wrapper{height: 500px;}
.swiper-slide{height: 500px;}
.swiper-slide img{min-width: auto;width: auto !important;height: 100%;}

.swiper-slide img.slide_img01 {left: 50%; top: 50%;}
.swiper-slide img.slide_img02 {left: 50%; top: 50%;}
.swiper-slide img.slide_img03 {left: 50%; top: 50%;}
.swiper-slide img.slide_img04 {left: 30%; top: 50%;}
.swiper-slide img.slide_img06 {left: 50%; top: 50%;}
.swiper-slide img.slide_img07 {left: 50%; top: 50%;}

.title_wrap{width: 90%;height: auto;top: 42%;}

/*footer -----------------------------------------------------------------*/
footer{}
.footer_logo_kawaguchiko{width: 100%;padding: 0 0 1.5em;}
.footer_logo_kawaguchiko a{width: 50%;}
.footer_menu a{line-height: 2.5em;}

/*content -----------------------------------------------------------------*/
section{margin: 0px 0 2em; padding: 1.5em 0;}
.content{width: 94%; padding: 0;}
.top_info{text-align: left;}
.top_info h1{font-size: 20px;margin-bottom: 1em;line-height: 1.6;}
.top_info p{font-size: 1.0em;}
.open_date{font-size: 1.4em !important;margin: 0.2em 0 0.3em !important;}
.time{margin: 0 0 2em !important;}
.top_info_text{width: 100%;}
.open_wrap{
width: 80%;
flex-wrap: wrap;
justify-content: center;
padding: 0.5em 1.2em 0.3em;
margin-top: 4em;
}
.open_text1,.open_text2{font-size: 1.3em;text-align: center;}

.img_wrap{justify-content: center;}
.fujisantei_img{width: calc(100% / 2 - 4px); margin: 0 2px 5px;}
.insta_wrap h2{font-size: 1.8em;}
.insta_wrap h2 i{display: block;font-size: 2em;margin: 0;}
.insta_btn_wrap{margin: 2em auto 2em;width: 90%;}
.insta_btn_wrap a{font-size: 1.3em;padding: 0.5em 0 0.3em;}
.map_wrap{height: 350px;}
.shop_detail{padding-top: 1em;}
.shop_detail p{font-size: 1.1em;}
}

/*神戸牛 -----------------------------------------------------------------*/
.kb_header_wrap{
background-color: #000;
background-image: url(../img/header_img_kobe-beef.jpg);
background-repeat: no-repeat;
background-position: right bottom;
/*background-size: cover;*/
}
.kb_header{
width: 1100px;
height: 580px;
margin: 0 auto;
position: relative;
}
.logo_kobe-beef,.logo_kobe-beef_gi,.kb_header_co,.mark_A5{position: absolute;}
.logo_kobe-beef{left: 0;top: 30px;}
.logo_kobe-beef_gi{right: 0;top: 30px;width: 270px;}
.mark_A5{top: 30px;right: 280px;width: 135px;}
.kb_header_co{
color: #fff;
width: 700px;
bottom: 2em;
left: 2em;
}
.kb_header_dl{display: flex;margin-bottom: 1em;}
.kb_header_dl dt{
font-weight: bold;
font-size: 1.7em;
width: 150px;
background: #c10034;
text-align: center;
padding: 0.6em 0 0;
}
.kb_header_dl dd{
width: calc(100% - 150px);
padding: 0px 1em;
}
.kb_header_co p{font-size: 1.1em;}
h2{font-size: 22px;}
.kb_h2_wrap{
background: #c10034;
padding: 0.5em;
color: #fff;
}
h2.kb_h2{
width: 1100px;
margin: 0 auto;
padding: 0 1.5em;
}
.info1,.info2{align-items: center;justify-content: space-between;}
.info1_img_wrap{
position: relative;
width: 48%;
height: 250px;
}
.meet_block,.meet_cut{
position: absolute;
border-radius: 50%;
border: solid 7px #fff;
}
.meet_block{
width: 310px;
top: -20px;
left: -20px;
}
.meet_cut{
width: 210px;
right: 30px;
bottom: -70px;
}
.info1_text{
width: 52%;
font-size: 1.1em;
}
.info1_text span{
background: linear-gradient(transparent 60%, #fcd893 60%);
font-weight: bold;
}
.info2_img_wrap{
order: 2;
width: 45%;
}
.info2_text{
order: 1;
width: 51%;
font-size: 1.1em;
}
.info2_text span,.info3_text span{
font-weight: bold;
display: block;
padding-top: 1em;
}
.info3{justify-content: space-between;margin-top: 3em;}
.info3_img_wrap{
width: 25%;
}
.info3_text_wrap{width: 71%;}
.info3_text_wrap h3{
background: #000;
padding: 0.5em 1em;
color: #fff;
margin-bottom: 0.5em;
}
.info3_text{font-size: 1.1em;}
.bronze_statue{display: none;}

/*神戸牛紹介TOP -----------------------------------------------------------------*/
section.section_top{
background-color: #000;
background-image: url(../img/header_img_kobe-beef.jpg);
background-repeat: no-repeat;
background-position: right bottom;
margin: -1em 0 0em;
padding: 1.5em 0 2em;
color: #fff;
}
.content.top{}
.content.top h2{width: 100%;margin: 1em 0 0.3em;}
.logo_wrap,.logo_wrap2{display: flex;flex-wrap: wrap;}
.logo_wrap{
width: 100%;
justify-content: space-between;
align-items: flex-start;
}
.logo_wrap2{}
.section_top .logo_kobe-beef,.section_top .logo_kobe-beef_gi,.section_top .mark_A5{position: unset;}
.section_top .logo_kobe-beef{width: 280px;}
.section_top .logo_kobe-beef_gi{width: 200px;order: 2;}
.section_top .mark_A5{width: 100px;order: 1;margin-right: 10px;}
.section_top .top_text{
font-size: 1.1em;
width: 76%;
margin-bottom: 1em;
margin-right: 24%;
}
.statue_wrap{
display: flex;
flex-wrap: wrap;
align-items: center;
}
.statue_img{width: 25%;order: 2;}
.statue_text{
width: 490px;
margin: 0 3% 0 2%;
order: 1;
}
.statue_text span{font-weight: bold;}
.btn_agency{
width: 490px;
margin: 0 0 0 2%;
order: 3;
}
.btn_agency a{
font-weight: bold;
text-align: center;
color: #333;
text-decoration: none;
display: block;
background: #fff;
padding: 0.7em 1.0em;
}

@media screen and (max-width:768px){
section.section_top{padding: 1em 0 2em;background-size: 70%;background-position: right 5em;}
.content.top{width: 96%;}
.content.top h2{font-size: 20px;}
.logo_wrap{align-items: center;}
.logo_wrap2{width: 155px;}
.section_top .logo_kobe-beef{margin: 0;width: calc(100% / 1 - 155px - 20px);}
.section_top .logo_kobe-beef_gi{width: 100px;order: 1;margin-right: 5px;}
.section_top .mark_A5{width: 50px;order: 2;margin: 0;}
.section_top .top_text{width: 100%;margin: 0 0 1em;}
.statue_wrap{}
.statue_img{order: 1;width: 70%;margin: 0 auto 1em;}
.statue_text{width: 100%;margin: 0 0;order: 2;}
.btn_agency{width: 80%;margin: 1em auto 0;}

}
