@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');

@media screen and (max-width: 1176px){
    .subPage #wrapper { padding-top: 249px;}
}

#cont { background: #F7F7F5; width: 100%; padding: 0; overflow: hidden;}
#chef_ropia { width: 100%; background: url(./img/footer.png) no-repeat 50% 100% / contain; padding: 0 0 40%; font-family: 'Noto Sans JP', sans-serif!important;}
.main { width: 100%; position: relative; z-index: 2; margin: 0 0 10%;}
.main .main_bg { width: 100%; height: auto;}
.main figcaption { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); width: 100%; display: block;}
.main figcaption img {max-width: 45%; display: block; margin: 0 auto;}
@media screen and (max-width: 767px){
    #chef_ropia { padding: 0 0 40%;}
    .main { margin: 0 0 40px;}
}
.concept_box { width: 1200px; margin: 0 auto 256px; position: relative;}
.concept_img01 { position: absolute; left: -340px; top: -65px;}
.concept_img02 { position: absolute; right: 42px; top: 32px; z-index: 2;}
.concept_img03 { position: absolute; left: 8px; bottom: -144px; z-index: 2;}
.concept_img04 { position: absolute; right: -330px; bottom: -280px;}
.concept_box h2.title { width: 100%; margin: 0 0 144px; text-align: center;}
.concept_box .concept { width: 900px; margin: 0 auto; background: #fff; position: relative;}
.concept_box .concept::before { content: ""; display: block; width: 100%; height: 96px; background: #fff; clip-path: polygon(0% 100%, 6% 0%, 94% 0%, 100% 100%); position: absolute; top:-95px; left: 0;}
.concept_box .concept::after { content: ""; display: block; width: 100%; height: 96px; background: #fff; clip-path: polygon(6% 100%, 0% 0%, 100% 0%, 94% 100%); position: absolute; bottom:-95px; left: 0;}
.concept_box .concept h2 { font-size: 32px; font-weight: 500; margin: 0 0 64px; text-align: center; font-family: 'Noto Sans JP', sans-serif!important;}
.concept_box .concept p { font-size: 16px; font-weight: 400; margin: 0 0 32px; text-align: center; line-height: 200%; font-family: 'Noto Sans JP', sans-serif!important;}
@media screen and (max-width: 1232px){
    .concept_box { width: 100%; margin: 0 auto 26%;}
    .concept_img01 { width: 32%; height: auto; left: -100px; top: -185px;}
    .concept_img02 { width: 16%; height: auto; right: 42px; top: 18px;}
    .concept_img03 { width: 16%; height: auto; left: 108px; bottom: -176px;}
    .concept_img04 { width: 32%; height: auto; right: -50px; bottom: -320px;}
}
@media screen and (max-width: 932px){
    .concept_img01 { width: 32%; height: auto; left: -60px; top: -124px;}
    .concept_img02 { width: 16%; height: auto; right: -16px; top: 22px;}
    .concept_img03 { width: 16%; height: auto; left: -12px; bottom: -110px;}
    .concept_img04 { width: 32%; height: auto; right: -90px; bottom: -230px;}
    .concept_box .concept { width: calc(100% - 64px); padding: 24px 0 0 0;}
    .concept_box h2.title { margin: 0 0 96px;}

    .concept_box .concept::before { height: 48px; clip-path: polygon(0% 100%, 4% 0%, 96% 0%, 100% 100%); top:-47px;}
    .concept_box .concept::after { height: 48px; clip-path: polygon(4% 100%, 0% 0%, 100% 0%, 96% 100%); bottom:-47px;}
}
@media screen and (max-width: 767px){
    .concept_img01 { width: 32%; height: auto; left: -49px; top: -56px;}
    .concept_img02 { width: 16%; height: auto; right: 12px; top: 20px;}
    .concept_img03 { width: 16%; height: auto; left: 4px; bottom: -60px;}
    .concept_img04 { width: 32%; height: auto; right: -36px; bottom: -140px;}
    .concept_box { width: 100%; margin: 0 auto 168px; padding: 0 5%;}
    .concept_box h2.title { width: 100%; margin: 0 0 56px; text-align: center;}
    .concept_box h2.title img { height: 32px; width: auto;}
    .concept_box .concept { width: 100%; padding: 24px;}
    .concept_box .concept::before { height: 24px; clip-path: polygon(0% 100%, 2% 0%, 98% 0%, 100% 100%); top:-23px; }
    .concept_box .concept::after { height: 24px; clip-path: polygon(2% 100%, 0% 0%, 100% 0%, 98% 100%); bottom:-23px;}
    .concept_box .concept h2 { font-size: 18px; margin: 0 0 48px;}
    .concept_box .concept p { font-size: 14px; margin: 0 0 32px;}
}
@media screen and (max-width: 560px){
    .concept_img01 { width: 40%; height: auto; left: -35px; top: -65px;}
    .concept_img02 { width: 20%; height: auto; right: 6px; top: 2px;}
    .concept_img03 { width: 22%; height: auto; left: 2px; bottom: -56px;}
    .concept_img04 { width: 46%; height: auto; right: -44px; bottom: -151px;}
}

.prof_box { background: #F7F7F5; padding: 48px 62px; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content:space-between; max-width: 700px; margin: 64px auto 0;}
.prof_box div { width: calc(100% - 186px); text-align: left!important;}
.prof_box div h2 {font-size: 14px!important; font-weight: 400; text-align: left!important; margin: 0 0 26px!important; font-family: 'Noto Sans JP', sans-serif!important;}
.prof_box div h2 span {font-size: 14px!important; font-weight: 400; margin: 0 0 0 16px; font-family: 'Noto Sans JP', sans-serif!important; display: inline-block; padding-bottom: 6px;}
.prof_box div p { text-align: left!important; margin: 0!important; font-family: 'Noto Sans JP', sans-serif!important; font-weight: 400; font-size: 14px!important;}
.prof_box figure { width: 180px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap: 1ch;}
.prof_box figure img { width: 100%; height: auto;}
@media screen and (max-width: 767px){
    .prof_box { padding: 40px 46px; margin: 42px auto 0;}
    .prof_box div { width: 100%; margin: 0 0 24px;}
    .prof_box figure { width: 100%;}
    .prof_box figure img { width: 50%;}
}

.works_box { width: 1200px; margin: 0 auto; padding-bottom: 12rem;}
.works_box h2.title { width: 100%; margin: 0 0 72px; text-align: center;}
.works_box #works_list {display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content:space-between;}
.works_box .works_list { width: calc(50% - 32px); margin-bottom: 96px;}
.works_box .works_list h2 { background: #fff; font-size: 14px!important; font-weight: 500; text-align: center; position: relative; margin: 0 0 48px; font-family: 'Noto Sans JP', sans-serif!important;}
.works_box .works_list h2::before { content: ""; display: block; width: 100%; height: 13px; background: #fff; clip-path: polygon(0% 100%, 2% 0%, 98% 0%, 100% 100%); position: absolute; top:-13px; left: 0;}
.works_box .works_list h2::after { content: ""; display: block; width: 100%; height: 13px; background: #fff; clip-path: polygon(2% 100%, 0% 0%, 100% 0%, 98% 100%); position: absolute; bottom:-13px; left: 0;}
@media screen and (max-width: 1232px){
    .works_box { width: calc(100% - 64px);}
    .works_box .works_list { width: calc(50% - 16px); margin-bottom: 80px;}
}
@media screen and (max-width: 767px){
    .works_box { width: 100%; margin: 0 auto; padding: 0 5% 5rem;}
    .works_box h2.title { margin: 0 0 48px;}
    .works_box h2.title img { height: 28px; width: auto;}
    .works_box .works_list { width: 100%; margin-bottom: 80px;}
    .works_box .works_list h2::before { height: 8px; clip-path: polygon(0% 100%, 1% 0%, 99% 0%, 100% 100%); top:-7px;}
    .works_box .works_list h2::after { height: 8px; clip-path: polygon(1% 100%, 0% 0%, 100% 0%, 99% 100%); bottom:-7px;}
    .works_box .works_list h2 { margin: 0 0 24px;}
}

.youtube { position: relative; width: 100%; padding-top: 56.25%;}
.youtube iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%;}

@media screen and (max-width: 767px){
    .subPage #wrapper { padding-top: 70px;}
}

.works_box .more {
    transition: .3s;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    text-align: center;
    height: 64px;
    border: 1px solid #603a19;
    border-radius: 32px;
    display:flex; flex-direction:column; justify-content:center;
}
.works_box .more a {
    font-size: 18px;
    color: #603a19;
    transition: .3s;
}

@media (hover: hover) and (pointer: fine) {
    .works_box .more:hover {
        background: #603a19;
    }
    .works_box .more:hover a {
        color: #fff;
    }
}