@charset "utf-8";
/* CSS Document */

/*--------------------------------------
基本設定
--------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200&display=swap');

html{font-size: 62.5%;/*pxだと10px*/ font-family: 'Noto Serif JP', serif; color: #333;}
img{vertical-align: top; width: 100%;}
a{color:#333; text-decoration: none; display: block; line-height: 100%;}
a:hover{text-decoration: underline; color: #ccc;}
nav{width: 100%; display: block; overflow: hidden;}
#wrap{font-size: 3.4vw; width: 100%; overflow: hidden; text-align: center; line-height:8vw;}

@media (min-width: 1000px) {
body{background: url("../img/pb/back_hamon.png") repeat-y; background-size:contain;}
#wrap{font-size: 2rem; background-color: rgb(255,255,255,0.3); line-height: 150%; letter-spacing: 0.1rem;}
}

/*--------------------------------------
ヘッダー
--------------------------------------*/
header{width: 100%; text-align: left; padding: 1rem 0 1rem 1rem; box-sizing: border-box; overflow: hidden; border-bottom: #eee solid 1px; background: #fff; display: block;}
header .logo{width: auto; float: left; overflow: hidden;}
header .logo img{width: 40px; float:left;}
header .logo p{float:left; line-height: 40px; padding-left: 0.5rem;}
header a{display: block; float: left; padding-right: 1rem;}
header nav{width: auto; float: right;}
header nav a{width:auto; padding: 0 1rem; line-height: 40px;}
header nav a:hover{background: #ccc; border-radius: 4px; color: #333; text-decoration: none; font-weight: bold;}
@media (min-width: 1000px) {
header{padding: 1rem;}
header nav a{font-size: 80%; padding: 0 2rem;}
}
/*--------------------------------------
コンテンツ
--------------------------------------*/
/*TOP動画*/
video.sp{width: 100%; height:calc(100vw / 1.618122977346278); display: block;}
video.pc{display: none;}
@media (min-width: 1000px) {
video.pc{width: 100%; height:calc(100vw / 2.615803814713896); display: block;}
video.sp{display: none;}
}

/*セクション*/
section{width: 100%; overflow: hidden; padding: 0 0 6rem 0; position: relative;}
section#dashi,section#howto,section#faq,section#reco,section#itemlist{transition-duration: 2s; opacity: 0;}
section#dashi.effect,section#howto.effect,section#faq.effect,section#reco.effect,section#reco.effect,section#itemlist.effect{opacity: 1;}
@media (min-width: 1000px) {
section{padding: 0 0 12rem 0;}
}

/*ボタン*/
section nav a{width: 50%; float: left; margin: 0 0 2.5rem 0;}
section nav a p{background: #333; width: 95%; padding: 1rem 0; font-size: 16px; color: #fff; border-radius: 4px; margin: auto; line-height: 150%;}
section nav a:hover p{background: #ccc; color: #333; text-decoration: none; font-weight: bold;}
section#movie nav a{width: 50%; float: none; margin:2rem  auto 0 auto;}

@media (min-width: 1000px) {
section{width:1000px; margin: auto;}
section#movie{width:100%;}
section nav a{width: 25%;}
section#movie nav{width: 1000px; margin: auto; position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}
section#movie nav a{width: 250px; margin: 0 0 0 750px;}
}

/*コンテンツ全般*/
section h1{font-size:7vw; padding: 0.5rem 0; margin: 4rem 0 1rem 0; line-height: 120%;}
section h1 span{display: block; font-size: 5vw;}
section h2{font-size: 6vw; padding: 0.5rem 0; margin: 1rem 0 0 0;}
section p{width: 100%; padding: 3rem 0;}

@media (min-width: 1000px) {
section h1{font-size:180%;}
section h1 span{font-size: 70%;}
section h2{font-size: 150%;}
}

/*最初のセクション*/
section#cha{background: url("../img/pb/back_hamon_sp1.png") no-repeat; background-size:contain;}
section#cha p span{display: block;}
@media (min-width: 1000px) {
section#cha{background:none;}
section#cha p span{display: inline;}
}

/*だし*/
section#dashi{background: url("../img/pb/back_hamon_sp2.png") no-repeat; background-size:contain;}
section#dashi nav a{float: none; margin: 6rem auto 0 auto;}
section#dashi .commit{width: 100%; position: relative;}
section#dashi .commit h1{margin-top: -16vw; position: relative;}
section#dashi .commit h1 span:first-of-type:before{content: url(../img/pb/nakurazaki-logo_80.png); display: inline-block; transform: scale(0.8); position: relative; top: 10px; left: 1.5%;}
section#dashi .commit h1 b{font-size: 6vw;}
p.apptext{background: url("../img/pb/back_hamon_sp1.png") no-repeat; background-size:contain;}

@media (min-width: 1000px) {
section#dashi{background:none;}
section#dashi .commit h1{position: absolute; bottom: 0;  left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}
section#dashi .commit h1 b{font-size: 80%;}
}

/*商品紹介*/
section#dashi .item{width: 100%; overflow: hidden; padding: 3rem 1rem; box-sizing: border-box; transition-duration: 2s; opacity: 0;}
section#dashi .item.effect{opacity: 1;}
section#dashi .item p{text-align: left; padding-top: 1rem; font-size: 92%;}
@media (min-width: 1000px) {
section#dashi .item{width: 50%; float: left;}
section#dashi .item p{font-size: 80%;}
}

/*お召し上がり方*/
section#howto{background: url("../img/pb/back_hamon_sp2.png") no-repeat; background-size:contain;}
section#howto .howto1 video,section#howto .howto2 video{width:100%;}
section#howto dd{font-size: 90%;}
@media (min-width: 1000px) {
section#howto{background:none; width:1000px; margin: auto;}
section#howto dd{font-size: 94%;}
section#howto .howto1 video,section#howto .howto2 video{width:400px;}
}

section#howto dt{font-size: 150%; font-weight: bold; padding-bottom: 1rem;}
section#howto .howto1,section#howto .howto2{width: 100%; text-align: left; overflow: hidden; padding: 6rem 0;}
section#howto dl{padding-left: 1rem;}
@media (min-width: 1000px) {
section#howto .howto1 video{float:left; margin-right: 2rem;}
section#howto .howto2 video{float:right; margin-left: 2rem;}
section#howto dl{padding-left: 0;}
section#howto .howto2 dl{float:right; text-align: right;}
}

/*アレンジ*/
section#howto .arrange{width: 100%; overflow: hidden;}
@media (min-width: 1000px) {
section#howto .arrange img{width: 400px; float: left; margin-right: 2rem;}
section#howto .arrange p{float: left; width: auto; text-align: left;}
}

/*よくある質問*/
section#faq{background: url("../img/pb/back_hamon_sp1.png") no-repeat; background-size:contain;}
@media (min-width: 1000px) {
section#faq{background:none;}
section#faq{width:1000px; margin: auto;}
}

section#faq dl{width: 92%; text-align: left; padding: 2rem 0.5rem; margin-left: 8%;}
section#faq dt{padding-bottom: 1rem; font-weight: bold;}
section#faq dt{font-size: 94%;}
section#faq dd{font-size: 94%;}
section#faq dt:before{content: "Q."; font-size: 150%; font-weight: bold; margin-left: -8%;}
section#faq dd:before{content: "A."; font-size: 180%; font-weight: bold; margin-left: -8%;}
@media (min-width: 1000px) {
section#faq dl{width:42%; float: left; padding: 3rem 0; box-sizing: border-box;}
section#faq dt{font-size: 76%;}
section#faq dd{font-size: 76%;}
}

section#faq .inquiry{width: 100%; margin: auto; padding: 3rem 0 0 0; display: flow-root;}
section#faq .inquiry a{width: 250px; float: none; margin: auto;}
@media (min-width: 1000px) {
section#faq .inquiry a{width: 25%;}
}

/*大切な方への贈り物に*/
section#reco{background: url("../img/pb/back_hamon_sp2.png") no-repeat; background-size:contain;}
section#reco h1{font-size: 160%;}
section#reco p{font-size: 90%;}
@media (min-width: 1000px) {
section#reco{background:none;}
section#reco h1{font-size: 180%;}
section#reco p{font-size: 100% !important; letter-spacing: 0.1rem;}
}

section#itemlist img{border-radius: 4px;}
section#itemlist p span{display: block;}
@media (min-width: 1000px) {
section#itemlist p span{display: inline;}

}
/*--------------------------------------
フッター
--------------------------------------*/
footer{width: 100%; padding: 1rem 0;}
footer .copyright{width:100%; font-size:70%; text-align: center; color: #666;}
footer .copyright a{display:inline; color:#666;}