@charset "utf-8";

/*個人情報保護方針ページ*/
html,body,h1,h2,h3,h4,p,ul,li,a{
margin:0;
padding:0;
line-height:1.0;
box-sizing:border-box;
}
ul{
list-style:none;
}
a{
text-decoration:none;
color:inherit;
}
img{
width:100%;
vertical-align: bottom;
}
html{
font-size:62.5%;/*10px*/
}
body{
font-size:1.6rem;
font-family: 'Noto Sans JP', sans-serif;
}

/*へッダー*/
header{
border-top:5px solid #0887db;
width:100%;
margin-bottom:4rem;
box-sizing:border-box;
}
/*ハニービーンズのロゴ*/
.logo{
width:29rem;
margin:3rem auto 1rem;
}
h1{
margin:0 1.5rem 0.5rem;
font-size:1.6rem;
font-weight:normal;
line-height:1.4;
}
.title-br{
display:none;
}
.header-photo{
max-width:42rem;
height:100%;
margin:0 auto 1rem;
}
/*h1のp*/
.text{
padding:2rem 2rem 1rem;
line-height:1.8;
font-size:1.8rem;
}
/*h1のpのbr改行を消す*/
.text-br{
display:none;
}
/*topへアイコン(コーヒーカップ)*/
#to-top{
width:50px;
height:79px;
position:fixed;
right:1rem;
bottom:2rem;
z-index:1000;
}
/*ナブがスクロールした時のp*/
.text.scroll{
margin-top:150px;
}
/*ナブ*/
.g-nav.scroll {
position:fixed;
width: 100%;
top :0;
z-index:999999;
}
.g-nav>ul{
display:flex;
justify-content:space-between;
flex-wrap:wrap;

}
.g-nav>ul>li{
width:33.33%;
height:70px;
}
.g-nav a{
display:block;/*aに絶対入れる*/
text-align:center;
color:#fff;
background:#0887db;
font-size:1.4rem;
padding:45px 0 10px;
height:70px;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
position:relative;
}
.g-nav li:nth-of-type(3) a{
padding:36px 0 10px;
height:70px;
border-right:0;
}
.g-nav li:nth-of-type(4) a{
border-bottom:0;
}
.g-nav li:nth-of-type(5) a{
border-bottom:0;
}
.g-nav li:last-child a{
border-bottom:0;
border-right:0;
}
.g-nav a:hover{
background:#904f5c;
}
.g-nav a::before{
display:block;
content:"";
width:30px;
height:30px;
position:absolute;
top:10px;
left:0;
right:0;
margin:auto;
background:url(/img/home.svg) no-repeat center center/contain;
}
.g-nav li:nth-of-type(2) a::before{
background:url(/img/concept.svg) no-repeat center center/contain;
}
.g-nav li:nth-of-type(3) a::before{
top:8px;
background:url(/img/framedripper.svg) no-repeat center center/contain;
}
.g-nav li:nth-of-type(4) a::before{
background:url(/img/access.svg) no-repeat center center/contain;
}
.g-nav li:nth-of-type(5) a::before{
background:url(/img/contact.svg) no-repeat center center/contain;
}
.g-nav li:nth-of-type(6) a::before{
background:url(/img/netshop.svg) no-repeat center center/contain;
}


/*メイン写真*/
.content{
display:none;
}

/*main*/
.main{
max-width:96rem;
padding:2rem;
margin:0 auto 8rem;
}
h2{
color:#904f5c;
font-family: 'Damion', cursive;
font-size:4rem;
margin-bottom:1.5rem;
}
h2>span{
font-family: 'Noto Sans JP', sans-serif;
font-size:1.9rem;
font-weight:normal;
margin-left:1rem;
text-align: left;
}


.boreder1{
display:none;
}
/*個人情報について*/
h3{
font-family: 'Noto Sans JP', sans-serif;
font-size:1.8rem;
color:#904f5c;
text-align:left;
line-height:1.5;
font-weight:normal;
margin-bottom:2rem;
}

.text-top{
line-height:1.8;
margin-bottom:5rem;
}
.block{
margin:0 auto 4rem;
}
.block>p{
line-height:1.8;
}
.text-list{
margin:1rem 0 3rem;
}
.text-list li{
font-size:1.6rem;
line-height:1.8;
margin-left:3rem;
list-style-type: square;
}
/*コーヒーの入れ方*/
.make-coffee{
margin:0 auto 4rem;
}
.make-coffee>h3{
margin:1rem 0 0;
}
/*コーヒーの入れ方順番*/
ol{
padding-left:2rem;
}
.make-list li{
font-size:1.6rem;
line-height:1.8;
list-style-type:decimal;
}
.make-coffee>p{
font-size:1.6rem;
line-height:1.8;
}
/*フレームドリッパーの写真*/
.box-photo{
width:100%;
margin-bottom:1rem;
}
/*フレームドリッパーの動画*/
.movie{
margin:0 auto;
}

.video{
position:relative;
width:100%;
padding-top:56.25%;
margin-bottom:5rem;
}
.video iframe{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
}
.contact{
text-decoration:underline;
color:#0887db;
}
h4{
color:#0887db;
margin:1rem 0 0.5rem;
padding-left:0.5rem;
border-left:0.5rem solid #0887db;
}
.quality{
margin-bottom:5rem;
}
.quality-block>h3{
margin:4rem 0 1rem;
}
.quality-block>p{
line-height:1.8;
}




/*フッター*/
footer{
padding:2rem 0;
background:#0887db;
}

/*footerのpのリンク幅の調整*/
.sns-inner{
max-width:96rem;
margin:0 auto;
padding:0 2rem 2rem;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
}
/*コピーライト*/
.copy-text{
width:100%;
padding:1.5rem 0 5rem;
}

/*フェイスブックのアイコン*/
.sns img{
width:5rem;
height:5rem;
}

footer p{
line-height:1.8;
text-align: center;
color:#fff;
}

/*個人情報リンク*/
.privacy-policy{
font-size:1.5rem;
text-decoration:underline;
color:#fff;
padding:1.8rem;
}

/*モバイルLレイアウト*/
/*ナブのフレームドリッパー改行を１行に*/
@media (min-width:425px){

/*h1のbr改行を消す*/
.title-br{
display:block;
}
.nav-text{
display:none;
}
.g-nav li:nth-of-type(3) a::before{
top:10px;
}
.g-nav li:nth-of-type(3) a{
padding:45px 0 10px;
}
}


/*iPadレイアウト*/
@media (min-width:641px){
.header{
max-width:96rem;
margin:0 auto 5rem;
transition: 3.9s;
}
.content{
display:block;
max-width:960px;
margin:0 auto;
background:#fff;
}
.header-photo{
display:none;
}
.logo{
width:40rem;
}
h1{
text-align: center;
}
.title-br{
display:block;
}
.text{
text-align: center;
max-width:96rem;
}
/*h1のpのbr改行をだす*/
.text-br{
display:block;
}

/*ナブがスクロールした時のp*/
.text.scroll{
margin-top:0;
}
.header.scroll{
height:0;
}

/*ヘッダー*/
.g-nav>ul{
justify-content:space-around;
flex-wrap:nowrap;
max-width:96rem;
background:#fff;
border-bottom:1px solid #0887db;
margin-bottom:1rem;
}
.g-nav>ul>li{
width:auto;
height:70px;
}
.g-nav a{
color:#0887db;
background:#fff;
font-size:1.4rem;
padding:45px 0 10px;
height:70px;
border-bottom:0;
border-right:0;
}
/*ナブアイコン*/
.g-nav a::before{
background:url(/img/phome.svg) no-repeat center center/contain;
}
.g-nav li:nth-of-type(2) a::before{
background:url(/img/pconcept.svg) no-repeat center center/contain;
}
.g-nav li:nth-of-type(3) a::before{
top:8px;
background:url(/img/pframedripper.svg) no-repeat center center/contain;
}
.g-nav li:nth-of-type(4) a::before{
background:url(/img/paccess.svg) no-repeat center center/contain;
}
.g-nav li:nth-of-type(5) a::before{
background:url(/img/pcontact.svg) no-repeat center center/contain;
}
.g-nav li:nth-of-type(6) a::before{
background:url(/img/pnetshop.svg) no-repeat center center/contain;
}
/*ホバー*/
.g-nav a:hover{
color:#904f5c;
background:0;
}
.g-nav a::before:hover{
color:#904f5c;
}
/*ホバーアイコン*/
.g-nav li a:hover::before{
margin:auto;
background:url(/img/hoverhome.svg) no-repeat center center/contain;
}
.g-nav li:nth-of-type(2) a:hover::before{
background:url(/img/hoverconcept.svg) no-repeat center center/contain;
}
.g-nav li:nth-of-type(3) a:hover::before{
top:8px;
background:url(/img/hoverframedripper.svg) no-repeat center center/contain;
}
.g-nav li:nth-of-type(4) a:hover::before{
background:url(/img/hoveraccess.svg) no-repeat center center/contain;
}
.g-nav li:nth-of-type(5) a:hover::before{
background:url(/img/hovercontact.svg) no-repeat center center/contain;
}
.g-nav li:nth-of-type(6) a:hover::before{
background:url(/img/hovernetshop.svg) no-repeat center center/contain;
}

/*メイン*/
.main{
max-width:960px;
padding:0 2rem 0;
margin:0 auto 10rem;
}
.box{
display:flex;
justify-content: space-between;
}
.block{
width:31%;
}
/*h2の改行を消す*/
.article-br{
display: none;
}
/*h2の横の線*/
h2{
background:url(/img/border.svg) no-repeat 42rem center/contain;
}
.line-one h2{
background:url(/img/border.svg) no-repeat 38rem center/contain;
}
.line-two{
background:url(/img/border.svg) no-repeat 35rem center/contain;
}
.line-three h2{
background:url(/img/border.svg) no-repeat 28rem center/contain;
}
h3{
margin-bottom:0.5rem;
}
.text-br2{
display: none;
}
.text-list{
margin:0.5rem 0 1rem;
}

/*footerのpのリンク幅の調整*/
.sns-inner{
padding:0 2rem 1rem;
flex-wrap:nowrap;
}
.copy-text{
width:33.33%;
padding:0;
}
}