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

/* 
01.all
02.top
03.menu
04.products
05.other
06.sp
07.recipe
*/

/*01.all*/
.staff_oshi {
	box-sizing: border-box;
}
/*end 01.all*/

/*02.top*/
.staff_oshi #FirstView {
    padding: 50px 0 0 0;
    background: #F4EAED;
    margin-bottom: 50px;
}

p#note {
margin-top: 30px;
font-size: 20px;
color: #812c31;
}
/*end 02.top*/

/*03.menu*/
.staff_oshi #navi_box {
    min-width: 1200px;
    max-width: 1280px !important;
    margin: 20px auto 0;
    padding: 0 60px;
    display: block;
    overflow: hidden;
    padding-top: 100px !important;
    margin-top: -100px;
}

.staff_oshi #navi_box ul {
display: flex;
justify-content: space-between;
}

.staff_oshi #navi_box ul li {
width: 32%;
height:auto;
margin-bottom: 4px;
}

.staff_oshi #navi_box ul li a {
width: 100%;
text-align:left;
font-size: 16px;
line-height:1.6;
}

.staff_oshi #navi_box ul li a:hover {
    transform: translateY(5px);
}

.staff_oshi #navi_box ul li a:nth-child(2) {
padding:10px;
}
/*end 03.menu*/

/*04.products*/
.staff_oshi #Products {
    min-width: 1200px;
    max-width: 1280px !important;
    margin: 20px auto;
    padding: 0 60px;
}

.staff_oshi #Products a {
display: block;
width:100%;
}

.staff_oshi #Products #sec_staff01Link {
padding-top: 140px;
margin-top: -100px;
}

.staff_oshi #Products #sec_staff02Link {
padding-top: 120px;
margin-top: -100px;
}

.staff_oshi #Products #sec_staff03Link {
padding-top: 120px;
margin-top: -100px;
}

.staff_oshi #Products #sec_staff01 {
width: 100%;
padding: 44px;
background: #f2e8e5;
}

.staff_oshi #Products #sec_staff02 {
width: 100%;
padding: 44px;
background: #e9f1ee;
}

.staff_oshi #Products #sec_staff03 {
width: 100%;
padding: 44px;
background: #f6f3e5;
}

.catchP {
display: flex;
justify-content: space-between;
align-items: center; 
}

.catchP p:nth-child(1) {
width:26%;
}

.catchP p:nth-child(2) {
width:70%;
font-size:40px;
line-height: 1.6;
}

.productBoxIn {
display: flex;
justify-content: space-between;
background: #fff;
padding: 40px;
border-radius: 16px;
}

.productBoxIn {
border: solid 2px #fff;
box-sizing: border-box;
}

.productBoxIn:hover {
    border: dashed 2px #ccc;
    cursor: pointer;
    transform: translateY(5px);
}

.imgBox {
width: 28%;
text-align: center;
}

.imgBox img {
max-width: 260px;
}

.txtBox {
width: 66%;
}

.txtBox dt {
font-size: 32px;
margin-bottom: 10px;
line-height: 1.6;
}

.txtBox dd {
font-size:18px;
}

.txtBox dd ul li {
line-height: 2.0;
}

#sec_staff01 .txtBox dd ul li span{
background: #f2e8e5;
padding: 0 10px;
margin-right: 10px;
}

#sec_staff02 .txtBox dd ul li span{
background: #e9f1ee;
padding: 0 10px;
margin-right: 10px;
}

#sec_staff03 .txtBox dd ul li span{
background: #f6f3e5;
padding: 0 10px;
margin-right: 10px;
}

.txtBox dd ul li:nth-child(1){
padding-bottom:20px;
}

.txtBox dd ul li:nth-child(3) span:nth-child(2){
background: #fff!important;
padding: 0px!important;
}

.txtBox dd ul li:nth-child(3) span:nth-child(2)::after{
vertical-align:middle;
padding-left: 5px;
transform: scale(0.7);
display: inline-block;
}

.txtBox dd ul li:nth-child(3) span.france::after{
content: url('https://gigaplus.makeshop.jp/kbwine/site/special/staff_oshi/france.jpg');
}

.txtBox dd ul li:nth-child(3) span.italy::after{
content: url('https://gigaplus.makeshop.jp/kbwine/site/special/staff_oshi/italy.jpg');
}

.txtBox dd ul li:nth-child(3) span.america::after{
content: url('https://gigaplus.makeshop.jp/kbwine/site/special/staff_oshi/america.jpg');
}

.txtBox dd ul li:nth-child(3) span.spain::after{
content: url('https://gigaplus.makeshop.jp/kbwine/site/special/staff_oshi/spain.jpg');
}

.txtBox dd ul li:nth-child(3) span.lithuania::after{
content: url('https://gigaplus.makeshop.jp/kbwine/site/special/staff_oshi/lithuania.jpg');
}

.txtBox dd ul li.price  {
font-size:30px;
}

#sec_staff01 .txtBox dd ul li.price span,
#sec_staff02 .txtBox dd ul li.price span,
#sec_staff03 .txtBox dd ul li.price span {
background:#fff;
font-size: 14px;
}

.txtBox ul.toPage {
display: flex;
justify-content: space-between;
font-size: 18px;
margin-top: 20px;
align-items:center;
}

.txtBox ul.toPage li:nth-child(2) {
background: #8b1f3a;
color: #fff;
padding:5px 10px;
border-radius: 5px
}

.txtBox ul.toPage li:nth-child(2)::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0 0.5em 0 0.5em;
  border: 6px solid transparent;
  border-right: 0 solid transparent;
  border-left: 10px solid #fff;
}

.commentBox01 {
  position: relative;
  display: inline-block;
  margin:30px 0 50px 0;
  padding:40px 50px;
  border-radius:16px;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
  width: 100%;
  background-color: #f2e8e5;
}

.commentBox01::after {
  content: "";
  position: absolute;
  top: 0;
  left: 68%;
  border-style: solid;
  border-width: 0 20px 24px 20px;
  border-color: transparent transparent #f2e8e5;
  translate: -50% -100%;
  transform: skew(32deg);
  transform-origin: bottom;
}

.commentBox02 {
  position: relative;
  display: inline-block;
  margin:30px 0 50px 0;
  padding:40px 50px;
  border-radius:16px;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
  width: 100%;
  background-color: #e9f1ee;
}

.commentBox02::after {
  content: "";
  position: absolute;
  top: 0;
  left: 68%;
  border-style: solid;
  border-width: 0 20px 24px 20px;
  border-color: transparent transparent #e9f1ee;
  translate: -50% -100%;
  transform: skew(32deg);
  transform-origin: bottom;
}

.commentBox03 {
  position: relative;
  display: inline-block;
  margin:30px 0 50px 0;
  padding:40px 50px;
  border-radius:16px;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
  width: 100%;
  background-color: #f6f3e5;
}

.commentBox03::after {
  content: "";
  position: absolute;
  top: 0;
  left: 68%;
  border-style: solid;
  border-width: 0 20px 24px 20px;
  border-color: transparent transparent #f6f3e5;
  translate: -50% -100%;
  transform: skew(32deg);
  transform-origin: bottom;
}

.commentBox p {
font-size: 22px;
margin-bottom: 0;
}

.commentBox p:nth-child(2) {
text-align: right;
}

.commentBox p span {
background: linear-gradient(transparent 20%, #fff 80%);
padding-bottom: 0.05em;
font-weight:600;
}

.commentBox p span {
background: linear-gradient(rgb(255, 255, 255 0.2),rgb(255, 255, 255, 0.8));
}
/*end 04.products*/

/*05.other*/
#page-top a{
display: flex;
justify-content:center;
align-items:center;
background:#942D2F;
border-radius: 5px;
width: 80px;
height: 80px;
color: #fff;
text-align: center;
text-transform: uppercase; 
text-decoration: none;
font-size:0.6rem;
transition:all 0.3s;
}

#page-top a:hover{
opacity:70%
}

#page-top {
position: fixed;
right: 10px;
bottom:10px;
z-index: 2;
opacity: 0;
transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
transform: translateY(100px);
  }
  to {
    opacity: 1;
transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  opacity: 1;
transform: translateY(0);
  }
  to {
  opacity: 1;
transform: translateY(100px);
  }
}
/*end 05.other*/

/*06.sp*/
@media (max-width: 767px) {
p#note {
font-size:16px;
line-height: 1.6;
}

.staff_oshi #navi_box {
        min-width: 100%;
        max-width: 100% !important;
        padding:20px;
        padding-top: 0px !important;
        margin-top: 20px;
    }

.staff_oshi #navi_box ul {
display:block;
}

.staff_oshi #navi_box ul li {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}

.staff_oshi #navi_box ul li a:nth-child(1) {
width: 40%;
margin-right: 10px;
}

.staff_oshi #navi_box ul li a:nth-child(2) {
width: 60%;
font-size:18px;
text-align: left;
line-height: 1.6;
}
	
.staff_oshi #Products {
padding: 0;
min-width: 100%;
max-width: 100% !important;
}
	
.staff_oshi #Products #sec_staff01,
.staff_oshi #Products #sec_staff02,
.staff_oshi #Products #sec_staff03 {
padding:20px;
}

.staff_oshi #Products #sec_staff02Link {
padding-top: 180px;
margin-top: -180px;
}

.staff_oshi #Products #sec_staff03Link {
padding-top: 180px;
margin-top: -180px;
}

.catchP {
display:block;
}

.catchP p:nth-child(1) {
width:100%;
text-align: center;
}

.catchP p:nth-child(1) img{
max-width:320px;
}

.catchP p:nth-child(2) {
font-size:20px;
width:100%;
}

.productBoxIn {
display:block;
background: #fff;
padding:10px;
}

.productBoxIn .imgBox {
text-align: center;
margin: 20px 0;
width: 100%;
}

.productBoxIn .imgBox img {
 height:280px;
 width: auto;
}

.txtBox {
padding-left:0;
width: 100%;
}

.txtBox dt {
font-size:20px;
margin-bottom: 20px
}

.txtBox dd {
font-size:16px;
}

.txtBox dd ul li {
line-height:1.6;
padding-bottom:10px;
}

.txtBox dd ul li:nth-child(1){
padding-bottom: 20px;
}

.txtBox ul.toPage {
display:block;
margin-top: 10px;
}

.txtBox ul.toPage li:nth-child(2) {
text-align: center;
margin: 10px 0;
}

.txtBox ul.toPage li:nth-child(2)::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0 0.5em;
  border: 6px solid transparent;
  border-right: 0 solid transparent;
  border-left: 8px solid #fff;
}

.commentBox {
  margin:30px 0 50px 0;
  padding:20px;
  border-radius:16px;
  text-align: left;
  font-size:16px;
  line-height: 1.6;
}

.commentBox p {
font-size:16px;
line-height:1.6;
}

}
/*end 06.sp*/

/*07.recipe*/
.txtBox h2 {
font-weight: normal;
}

.commentBox hr  {
    border-width: 1px 0px 0px 0px;
    border-style: solid;
    border-color: #cccccc;
    height: 1px;
	margin:50px 0;
}

.recipe {
margin-top:20px;
}

.recipe dl {
display: flex;
justify-content: space-between;
align-items:center;
}

.recipe dl dt {
width: 24%;
margin-bottom:30px;
}

.recipe dl dd {
width: 72%;
}

.recipe dl dd ul {
display: flex;
justify-content: space-between;
}

.recipe dl dd ul li {
width: 49%;
}

.recipe dl dd ul li a {
    width:50%;
    display: block;
    box-sizing: border-box;
    padding:20px;
    overflow: hidden;
    border-radius: 5px;
    margin-bottom: 30px;
    width: 32%;
    text-decoration: none;
    color: #333;;
	background: #fff;
	line-height: 1.4;
}

.commentBox01 .recipe dl dd ul li a {
border: 2px dotted #800603;
}

.commentBox02 .recipe dl dd ul li a {
border: 2px dotted #688579;
}

.commentBox03 .recipe dl dd ul li a {
border: 2px dotted #ecd570;
}


.recipe dl dd ul li a:hover {
    cursor: pointer;
    transform: translateY(5px);
}

.recipe dl dd ul li a img {
margin-bottom:20px;
}

.recipe dl dd ul li a span {
font-weight: bold;
margin-bottom:5px;
display: block;
}

.recipe dl dd ul li a span::after {
    font-family: "Font Awesome 5 Free";
    content: " \f138";
    padding-right: 5px;
}

.recipe p {
font-size: 14px;
}

.recipe p a:hover {
opacity: 70%;
transform: translateY(3px);
}

@media (max-width: 767px) {
.recipe dl {
display:block;
}

.recipe dl dt {
width:60%;
margin:0 auto 40px auto;
}

.recipe dl dd {
width:100%;
}

.recipe dl dd ul {
display:block;
}

.recipe dl dd ul li {
width:100%;
}

.recipe p {
font-size: 12px;
}
}
/*end 07.recipe*/