@charset "utf-8";
/*----- 
01.牡蠣の販売ページ
----- */
#sell .intro{
background-color: #FCF8F4;
padding: 50px 0 109px;
position: relative;
}
#sell .menu-area{
  background-color: #E3F6FC;
  background: linear-gradient(#E3F6FC, #a2c9d4);
  position: relative;
  padding: 0px 0 100px;
}
#sell .menu-area .wrapper-wrap{
  overflow: hidden;
  position: relative;
}
#sell .menu-area .wrapper{
  position: relative;
}
#sell .menu-area::before{
  content: "";
  display: inline-block;
  width: 100%;
  height: 218px;
  background: center/cover no-repeat url(../../img/sell/deco-wave.png);
  position: absolute;
  top: -108px;
}
#sell .menu-area h2{
font-size: 42px;
font-weight: 700;
margin-bottom: 15px;
color: #005C92;
position: relative;
text-shadow: 0 2px 1px rgba(255, 255, 255, 1);
  position: relative;
  z-index: 10;
}
#sell .first-box{
position: relative;
z-index: 10;
margin-bottom: 50px;
padding: 50px 35px;
}
#sell .first-box p{
  position: relative;
  z-index: 10;
}
#sell .first-box .deco-wave3{
position: absolute;
width: 25%;
}
#sell .first-box .deco-wave3-1{
transform: rotate(15deg) scale(1, -1);
bottom: 0;
left: 0;
}
#sell .first-box .deco-wave3.hanten{
transform: rotate(15deg) scale(-1, 1);
top: 0;
right: 0;
}
#sell ul{
  list-style-position: inside;
}
#sell .pic1{
  margin: 0 auto;
}
#sell .pic1 + div{
  display: grid;
  margin-bottom: 20px;
  text-align: center;
}
#sell .gaikan{
max-width: 500px;
margin: 0 auto 40px;
}
#sell .pic1 + div p{
  margin-bottom: 16px;
}
#sell .menu-box .flex-box.flex-box0{
  max-width: 1200px;
}
#sell .menu-box .flex-box{
  justify-content: space-between;
  padding: 20px 0 50px;
  position: relative;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
#sell .menu-box .flex-box::after{
  content: "";
  display: block;
  width: 1897px;
  height: 199px;
  background: center/contain no-repeat url(../../img/sell/deco-wave-white.png);
  position: absolute;
  bottom: 0;
  left: 0;
}
#sell .menu-box .flex-box.row-reverse::after{
  right: 0;
  left: auto;
  transform: scale(-1,1);
}
#sell .menu-box .cnt-left{
  position: relative;
  z-index: 10;
  width: 48%;
}
#sell .menu-box .cnt-left-wrap{
overflow: hidden;
position: relative;
}
#sell .menu-box .deco-zoto{
position: absolute;
left: -20%;
top: 0;
transform: rotate(-45deg);
width: 60%;
z-index: 5;
}
#sell .menu-box .cnt-left img{
border-radius: 10px;
}
#sell .menu-box .cnt-right{
  position: relative;
  z-index: 10;
  width: 48%;
  min-height: 470px;
}
#sell .menu-box .cnt-right ul{
  color: #005C92;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
}
#sell .menu-box .cnt-right h2 + p{
  margin-bottom: 20px;
}
#sell .point{
width: 100px;
height: 100px;
position: absolute;
font-weight: 700;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 20px;
letter-spacing: 0.1em;
top: -50px;
right: -10px;
z-index: 10;
}
#sell .zoutou{
  font-size: 14px;
}
#sell .point1{
  background: center/contain no-repeat url(../../img/common/deco-circle1.png);
}
#sell .point2{
  background: center/contain no-repeat url(../../img/common/deco-circle2.png);
}
#sell .point3{
  background: center/contain no-repeat url(../../img/common/deco-circle3.png);
}
#sell .point4{
  background: center/contain no-repeat url(../../img/common/deco-circle4.png);
  text-shadow: 0 1px 1px black;
}
#sell .deco-fune,#sell .deco-ikada{
  position: absolute
}
#sell .deco-fune{
top: -4%;
left: 10%;
z-index: 30;
}
#sell .deco-ikada{
bottom: -20px;
left: -80px;

}
#sell .contact{
  position: relative;
  padding: 52px 0 120px;
  background: #fff;
}
#sell .contact h2{
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  position: relative;
  line-height: 1;
  margin-bottom: 20px;
  
}
#sell .contact h2 + p{
  text-align: center;
  color: #fff;
  font-weight: 700;
  position: relative;
  margin-bottom: 30px;
}
#sell .contact .h2-top{
font-weight: 700;
color: #fff;
position: relative;
max-width: fit-content;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
#sell .contact .h2-top::before{
  content: "";
  display:block;
  width: 1px;
  height: 18px;
  background: #fff;
  transform: rotate(-45deg);
  margin-right: 10px;
}
#sell .contact .h2-top::after{
  content: "";
  display:block;
  width: 1px;
  height: 18px;
  background: #fff;
  transform: rotate(45deg);
  margin-left: 10px;
}
#sell .contact::before{
  content: "";
  display: block;
  width: 100%;
  height: 250px;
  background: #005C92;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  z-index: 0;
}
#sell .contact .flex-box .cnt-box{
  width: 49%;
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  position: relative;
  z-index: 10;
  border: 2px solid #E5EEF4;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}
#sell .contact .flex-box{
  margin-bottom: 20px;
}
#sell .contact .first{
  text-align: center;
  font-size: 18px;
  color: #4A4A4A;
  font-weight: 700;
  margin-bottom: 5px;
}
#sell .contact .barlow{
  font-size: 42px;
  font-weight: 700;
  color: #005C92;
  text-align: center;
  display: block;
  line-height: 1;
  letter-spacing: 0.03em;
}
#sell .contact .fax .barlow{
pointer-events: none;
}
#sell .contact span.flex-box{
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 700;
color: #005C92;
gap: 15px;
margin-bottom: 10px;
}
#sell .contact .fax .barlow{
  color: #005C92 !important;
  -webkit-text-fill-color: #005C92;
}
#sell .contact .blue{
  display: block;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 5px;
  color: #005C92;
}
#sell .contact .mb30,#sell .contact span.flex-box.mb30{
  margin-bottom: 30px;
}
#sell .contact .icon{
  margin: 0 auto 10px;
}
#sell .mail{
  margin: 0 auto;
}
#sell .mail a{
  color: #005C92;
}
@media screen and (max-width: 1080px){
/*----- 
01.牡蠣の販売 1080px
----- */
#sell .menu-area{
  padding: 0 0 50px;
}
#sell .menu-area h2 {
font-size: 34px;
margin-bottom: 0;
}
#sell .menu-box .cnt-right ul {
font-size: 18px;
line-height: 1.8;
}
#sell .menu-box .flex-box::after{
  bottom: 50px;
}
#sell .contact{
  padding: 30px 0 120px;
}
#sell .contact h2{
  font-size: 34px;
  margin-bottom: 20px;
  
}
#sell .contact .h2-top{
margin: 0 auto 10px;
}
#sell .contact::before{
  height: 220px;
}
#sell .contact .flex-box .cnt-box{
  padding: 25px;
}
#sell .contact .barlow{
  font-size: 34px;
}
#sell .contact span.flex-box{
  margin-bottom: 10px;
}
#sell .contact .mb30,#sell .contact span.flex-box.mb30{
  margin-bottom: 20px;
}
}
@media screen and (max-width: 768px){
/*----- 
01.牡蠣の販売 768px
----- */
#sell .menu-area .wrapper-wrap{
  padding-top: 70px;
}
#sell .menu-area .first-box h2{
line-height: 1.5;
font-size: 27px;
}
#sell .first-box {
padding: 40px 0;
background: transparent;
border:none;
border-radius: 0;
margin-bottom: 0;
}
#sell .first-box .deco-wave3{
  width: 30%;
}
#sell .first-box .deco-wave3.hanten{
  top: 0;
}
#sell .first-box .deco-wave3-1 {
bottom: 0;
}
#sell .menu-area h2 {
font-size: 28px;
margin-bottom: 10px;
}
#sell .menu-box .flex-box {
flex-direction: column;
padding: 50px 0 30px;
}
#sell .menu-box .cnt-left {
width: 100%;
margin: 0 auto 10px;
max-width: 600px;
}
#sell .menu-box .cnt-right{
  width: 100%;
  min-height: auto;
}
#sell .menu-box .flex-box::after,#sell .menu-box .flex-box.row-reverse::after {
left: 50%;
transform: translateX(-50%);
width: 150%;
height: 100px;
}

#sell .menu-box .flex-box1::after{
  bottom: -20px;
}
#sell .menu-box .flex-box0::after,#sell .menu-box .flex-box2::after,#sell .menu-box .flex-box3::after{
  bottom: -30px;
}
#sell .menu-box .flex-box4::after{
bottom: -40px;
}
#sell .menu-box .flex-box5::after{
bottom: 0;
}
#sell .deco-ikada {
bottom: 0;
left: 0;
width: 30%;
z-index: 10;
}
#sell .point {
width: 80px;
height: 80px;
font-size: 16px;
}
#sell .contact{
  padding: 30px 0 100px;
}
#sell .contact h2{
  font-size:28px;
  margin-bottom: 20px;
  
}
#sell .contact .h2-top{
margin: 0 auto 10px;
}
#sell .contact .flex-box{
  flex-direction: column;
  gap: 20px;
}
#sell .contact::before{
  height: 220px;
}
#sell .contact .flex-box .cnt-box{
  padding: 20px;
  width: 100%;
}
#sell .contact h2 + p {
line-height: 1.3;
margin-bottom: 15px;
}
#sell .contact span.flex-box {
gap: 0px;
font-size: 16px;
}
#sell .contact .barlow{
  font-size: 28px;
}
#sell .contact .blue {
font-size: 20px;
}
}