@charset "UTF-8";
/*////////////////////////
umisoba.aoinapoli.jp
dinner.css
///////////////////////*/

#main_visual{
    background-image: url(../images/menu/dinner/dinner_top_pc.jpg);
}

.btn_box_flex{
    display: flex;
    width: 60%;
    margin: 0 auto 10rem;
}

.pizza{
    position: relative;
    width: 80%;
    background-color: #F1F093;
    margin: 5rem auto;
    padding: 4rem;
}

.pizza .fukidashi{
    position: absolute;
    top: 2rem;
    right: 7rem;
    width: 460px;
    height: 95px;
    background: #fff;
    border-radius: 20% 40% 40% 60% / 60% 80% 50% 60%;
}

.pizza .fukidashi::after {
content: "";
  position: absolute;
  top: 50%;
  right: .7em;
  border-style: solid;
  border-width: 5.5px 0 5.5px 45.5px;
  border-color: transparent transparent transparent #fff;
  translate: 100% -50%;
  transform: skew(0, 12deg);
  transform-origin: left;
}

.pizza .fukidashi p{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    line-height: 2.1rem;
    text-align: center;
}

.pizza .human_postion{
    width: 170px;
    right: -6.5rem;
    top: 0;
}

.dinner_sub_ttl{
    max-width: 250px;
    margin: 2rem 0 3rem;
}

.dinner_sub_ttl p{
    font-size: 1.2rem;
}

.sub_ttl{
    margin: .7rem 0 0;
    text-align: left;
    justify-content: inherit;
}

.pizza_flex{
    display: flex;
    justify-content: center;
    align-items: center;
}

.pizza_flex .img{
    width: 50%;
}

.pizza_flex .txt{
    width: 50%;
    margin-left: 3rem;
}

.pizza_flex .txt .pizza_menu{
   font-size: 1.4rem;
   margin-bottom: 2.5rem;
   font-weight: 600;
}

.pizza_flex .txt .pizza_menu .en{
   display: inline-block;
   font-size: 1.1rem;
   color: #E3594D;
   margin: .7rem 0;
}

.pizza_flex .txt .pizza_menu .ingredients,.dinner_cont .txt .menu_name .ingredients{
   font-size: 1.1rem;
   line-height: 2rem;
   letter-spacing: 0;
   font-weight: 400;
}

.txt_right{
    margin-top: 1rem;
    text-align: right;
    font-size: 1.2rem;
}

.pizza .kama{
    position: absolute;
    left: -9rem;
    bottom: -5rem;
    width: 210px;
    transform: rotate(-10deg);
}

.dinner_flex{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 85%;
    margin: auto;
}

.dinner_cont{
    width: 45%;
    margin: 2.5rem;
}

.pizza .slick-dots,.dinner_cont .slick-dots {
    margin: -4rem 0;
    z-index: 10;
}

.pizza .slick-dots li button:before,.dinner_cont .slick-dots li button:before {
    -webkit-text-stroke-color: #fff;
    opacity: .75;
}

.pizza .slick-dots li.slick-active button:before,.dinner_cont .slick-dots li.slick-active button:before {
    color: #fff;
    opacity: 1.2;
}

.dinner_cont .slider{
    width: 90%;
    margin: auto;
}

.dinner_cont .dinner_sub_ttl{
    margin-left: 2.5rem;
}

.dinner_cont .txt{
    background-color: #024099;
    padding: 6rem 3rem 3rem;
    margin-top: -2rem;
}

.dinner_cont .txt .menu_name{
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 2.5rem;
    font-weight: 600;
}

.dinner_cont .txt .menu_name .en{
    display: inline-block;
    font-size: 1.1rem;
    color: #F1F093;
    margin: .7rem 0;
}

.dinner_cont .txt .txt_right{
    color: #fff;
}

.mb{
    margin: 2rem 0 0;
}


@media (max-width: 767px){

#main_visual{
    background-image: url(../images/menu/dinner/dinner_top_sp.jpg);
}

#sec {
    padding: 3rem 0 0;
}

.btn_box {
    margin-bottom: 5rem;
}

.btn_box_flex {
    flex-wrap: wrap;
    width: 90%;
    margin: 0 auto 5rem;
}

.btn_box_flex .btn_b:first-of-type{
    margin-bottom: 1rem;
}

.pizza {
    width: 90%;
    padding: 10rem 2rem 5rem;
    margin: 10rem auto 5rem;
}

.pizza_flex {
    flex-wrap: wrap;
}

.pizza_flex .img {
    width: 100%;
}

.pizza_flex .txt {
    width: 100%;
    margin: 0;
}

.pizza .human_postion {
    width: 115px;
    right: 2rem;
    top: 4%;
}

.pizza .fukidashi {
    top: -6rem;
    right: inherit;
    left: -1rem;
    width: 300px;
    height: 125px;
}

.pizza .fukidashi p {
    font-size: 1.1rem;
    padding: 0 3rem;
    top: 48%;
    text-align: left;
}

.pizza .fukidashi::after {
    top: auto;
    bottom: -.5rem;
    right: 50%;
    border-width: 10.5px 0 10.5px 85.5px;
    transform: skew(0, 25deg);
}

.pizza_flex .txt .pizza_menu {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.pizza .kama {
    left: 1rem;
    bottom: -4rem;
    width: 125px;
    transform: rotate(-5deg);
}

.dinner_flex {
    width: 90%;
}

.dinner_cont {
    width: 100%;
    margin: 1rem 0;
}

.dinner_cont .txt .menu_name {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}
}