/*
Theme Name: familyrestraunt
Description: familyrestraunt
Version: 1.0
Author: seto
*/

:root {
   --base-font-size: 16px;
   --regular-font-size: 20px;
   --midium-font-size: 24px;
   --l-size-font-size: 36px;
   --xl-font-size: 40px;
}

body {
    font-family: "Mulish",serif;
    font-size: var(--base-font-size);
    color: #1B1B1A;
    background-color: #FEFCED;
    height:100%;
}

.header {
    display: flex;
    justify-content: center;
    height: 100vh;
}

.header__container {
    position: relative;
    width: 1000px;
    height:533px;
}

.header__logo {
    display: flex;
    position: absolute;
    left:-7%;
    z-index: 10;
    width: 150px;
    height:85px;
    font-size:var(--midium-font-size);
    font-family: "Playfair Display", serif;
    color: #fff;
    background-color: #D80F08;
    justify-content: center;
    align-items: center;
}

.header__img {
    width: 1000px;
    height:533px;
    object-fit: cover;
    object-position: 0 100%;
}

.header__cp {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 90%;
    left:30%;
    z-index: 10;
}

.cp__title {
    font-family: "Playfair Display", serif;
    font-size: var(--xl-font-size);
    font-weight: bold;
    margin-bottom: 20px;
}

.cp__body {
    font-size: var(--regular-font-size);
}

.cp__br {
    display: none;
}

.introduction {
    display: grid;
    grid-template-columns: 300px 1fr 300px;
    height: 100vh;
}

.introduction__subcontainer {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    justify-content: center;
}

.introduction__sp__subcontainer {
    display: none;
}

.introduction__img {
    width: 100%;
}

.introduction__img_col{
    width: 187px;
    height: 280px;
    margin: 0px 53px;
}

.introduction__container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.intro__conteiner__mv {
    width: 250px;
    height: 133px;
    margin-top: 40px;
    margin-bottom: 20px;
}

.intro__conteiner__title {
    font-family: "Playfair Display", serif;
    font-size:var(--l-size-font-size);
    font-weight: bold;
    margin-bottom: 60px;
}

.intro__conteiner__welcome {
    font-size:var(--midium-font-size);
}

.intro__conteiner__body{
    text-align: center;
    line-height: 1.5;
}

.news {
    height: 100vh;
    background-color: #F0EBC6;
    padding-top: 100px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-image: url("assets/img/news_back.gif");
    background-repeat: no-repeat;
    background-size: 400px;
    background-position:0% 80%;
    padding: 100px 0px;
}

.news__header {
    width:400px;
    margin-right: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.news__header__content {
    width: 160px;
    height: 77px;
}

.news__header_gif {
    width: 160px;
    height:72px;
}

.news__header_img {
    position: relative;
}

.news__header_title {
    font-family: "Lobster",serif;
    font-size: var(--l-size-font-size);
    position: absolute;
}

.news__list_item {
    display: flex;
    flex-direction: row;
    column-gap: 85px;
    background-color: #FEFCED;
    padding: 30px 13px;
    width: 600px;
    height: 55px;
    margin-bottom:20px;
    align-items: center;
}

.news__list_box {
    margin-top: 40px;
    display: flex;
    justify-content: flex-end;
}


.menu {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.menu__header__content {
    display: flex;
    width: 192px;
    height: 88px;
    margin-bottom: 20px;
}

.menu__header_img {
    position: relative;
}

.menu__header_gif {
    width: 130px;
    height:67px;
    transform: rotate(-10deg);
}

.menu__header_title {
    position: relative;
    font-family: "Lobster",serif;
    font-size: var(--l-size-font-size);
    text-align: right;
    margin-top: auto;
}

.menu__header__dp {
    margin-bottom: 60px;
}

.menu__list {
    display: flex;
    flex-direction: row;
    column-gap: 60px;
}

.menu__list_item {
    width: 300px;
    height: 417px;
    margin-bottom:80px;
}

.menu__list_img {
    position: relative;
    width: 100%;
    height: 300px;
    clip-path: polygon(35% 0,100% 0,100% 100%,0 100%,0 35%);
}

.menu__list_num {
    position: absolute;
    z-index: 10;
    display: inline;
    font-family: "Ribeye Marrow", serif;
    font-size:var(--xl-font-size);
    border-bottom: 1px solid #000000;
}

.menu__list_body {
    display: flex;
    flex-direction: column;
    text-align: right;
    margin-top:20px;
    row-gap:10px;
    font-family: "Mulish", sans-serif;
}

.menu__list_name {
    font-size: var(--midium-font-size);
}

.menu__list_price {
    font-size: var(--midium-font-size);
    font-weight: bold;
}

.menu__list_tax {
    font-weight: lighter;
    font-size:var(--base-font-size)
}

.menu__box {
    display: flex;
    justify-content: center;
}

.chefs {
    height:100vh;
    background-color: #F0EBC6;
}

.chefs__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px 240px;
}

.chefs__bg {
    width: 100%;
    height: 55px;
    background-image: url("assets/img/chefs_thoughts.gif");
    background-repeat: repeat-x;
    background-position:0% 0%;
    background-color: #FEFCED;
}

.chefs__header {
    width: 800px;
    display: flex;
    margin-top:50px;
    margin-bottom:43px;
    border-bottom: 1px solid #000000;
}

.chefs__header_title {
    font-family: "Lobster",serif;
    font-size: var(--l-size-font-size);
}

.chefs__header_content {
    font-family: "Mulish", sans-serif;
    font-size: var(--regular-font-size);
}

.chefs__body {
    display: flex;
    column-gap: 40px;
}

.chefs__img {
    width: 360px;
    height: 616px;
}

.chefs__body__title {
    font-size:var(--midium-font-size);
    margin-bottom: 40px;
    font-weight: bold;
}

.chefs__content {
    display: flex;
    width: 400px;
    flex-direction: column;
    font-family: "Mulish", sans-serif;
    line-height: 1.5em;
}

.access {
    height: 100vh;
}

.access__bg {
    background-color: #F0EBC6;
    height: 192px;
    position: relative;
}

.access__bg:before {
    content: "";
    width: 100%;
    height: 192px;
    background-color: #FEFCED;
    position: absolute;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.access__header {
    font-family: "Lobster",serif;
    font-size: var(--l-size-font-size);
    text-align: center;
    margin-top: 180px;
    margin-bottom: 42px;
}

.access__body {
    display: flex;
    column-gap: 20px;
    justify-content: center;
    align-items: center;
}

.access__map_content {
    font-family: "Mulish", sans-serif;
    line-height: 1.5em;
}

.access__map_img {
    width: 400px;
    height: 330px;
}

.access__map_tel {
    font-family: lobster,serif;
    font-size: var(--l-size-font-size);
}

.footer {
    position: relative;
    height: 100vh;
    background-image: url("assets/img/footer.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.footer::before {
    content: "";
    width: 100%;
    height: 149px;
    background-color: #FEFCED;
    position: absolute;
    top: 0px;
    clip-path: polygon(50% 0, 0 0, 0 100%);
}

.footer::after {
    content: "";
    width: 100%;
    height: 149px;
    background-color: #FEFCED;
    position: absolute;
    top: 0px;
    clip-path: polygon(100% 0, 50% 0, 100% 100%);
}

.footer__content {
    display: flex;
    flex-direction: row;
    column-gap: 211px;
    justify-content: center;
    padding: 192px 240px 0px 240px;
    color: #fff;
}

.footer__title_logo {
    font-size: var(--xl-font-size);
}

.footer__icon {
    width: 30px;
    height: 30px;
    margin-top: 10px;
    margin-right: 16px;
}

.footer__body {
    font-family: "Mulish", sans-serif;
    line-height: 1.5em;
}

.border__box_content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 55px;
    border:1px solid #1B1B1A;
}

.border__box_content::before {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 0;
    height: 0;
    border-top: 15px solid #1B1B1A;
    border-left: 15px solid transparent;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3))
}

/* news */
.subnews__header {
    width:100%;
    height:550px;
    background-image: url("assets/img/news_back.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.subnews__header_circle {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.5);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.subnews__header_title {
    font-family: "Lobster",serif;
    font-size: var(--l-size-font-size);
}

.subnews__header_subtitle {
    font-size: var(--base-font-size);
}

.subnews {
    display: flex;
    align-items: center;
    justify-content:center;
    padding:80px 0px 80px 0;
}

.subnews__wrapper {
    display: flex;
    flex-direction: column;
    width: 800px;
    row-gap: 40px;
}

.subnews__date {
    width: 100%;
    padding-bottom: 10px;
    text-align: right;
    font-size: var(--base-font-size);
    border-bottom: 1px solid #000000;
}

.subnews__title {
    font-size:var(--midium-font-size);
    font-weight: bold;
}

.subnews__body {
    line-height: 1.5;
}

.subnews__body > p {
    margin-bottom: 1em;
}

.subnews__img {
    width: 100%;
    height: 300px;
}

.subnews__list_box {
    display: flex;
    justify-content: center;
}

/* media Queries 430 */
@media screen and (max-width:430px) { 

.header {
    height: 574px;
}

.header__logo {
    left:30%;
}

.header__img {
    width: 389px;
    height:401px;
    object-fit: cover;
    object-position: 0 100%;
}

.header__cp {
    position: absolute;
    top: 70%;
    left:15%;
}

.header__container {
   width: 100%;
   text-align: center;
}

.cp__br {
    display: block;
}

.introduction {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height:100%;
}

.introduction__subcontainer {
    display: none;
}

.introduction__sp__subcontainer {
    padding: 30px 20px;
    display: block;
}

.intro__conteiner__body {
    padding: 30px 20px;
}

.introduction__img {
    margin-bottom: 30px;
}

.news {
    height:100%;
    flex-direction: column;
    background-size: 150px;
    background-position: 50% 8%;
}

.news__list {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.news__list_item {
    align-items: flex-start;
    flex-direction: column;
    row-gap: 10px;
    width: 390px;
    height: 95px;
}

.news__header {
    width: 100%;
    margin-right: 0px;
}

.news__header__content {
    width: 100%;
    height: 115px;
    display: flex;
    justify-content: center;
}

.news__header_img {
    display: none;
}

.news__list_box {
    justify-content: center;
}

.menu {
    height: 100%;
    padding: 45px 65px 100px 65px;
}

.menu__list {
    flex-direction: column;
}

.chefs {
    height: 100%;
}

.chefs__body {
    flex-direction: column;
    align-items: center;
}

.chefs__header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 430px;
    border-bottom: none;
}

.chefs__header_title {
    text-align: center;
}

.chefs_header_sp {
    border-bottom: 1px solid #000000;
}

.chefs__wrapper {
    padding: 0;
}

.chefs__content {
    margin-top: 60px;
    margin-bottom: 60px;
    justify-content: center;
    align-items: center;
}

.access__bg {
    height: 100px;
}

.access__bg:before {
    height: 100px;
}

.access__header {
    margin-top: 0px;
}

.access__body {
    flex-direction: column;
    row-gap: 60px;
}

.footer {
    height: 621px;
}

.footer::before {
    height: 100px;
}

.footer::after {
    height: 100px;
}

.footer__content {
    flex-direction: column;
    row-gap: 34px;
    justify-content: center;
    color: #fff;
    padding: 100px 24px 0px 24px;
}

/* NEWS */
.subnews {
    padding: 80px 20px 80px 20px;
}

.subnews__img {
    height: 155px;
}

}