@charset "utf-8";
    /*------------------------------------共通 --*/
    @import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=M+PLUS+1p:wght@100;300;400;500&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Hurricane&display=swap');

    #shokuiku{
        font-family: "Noto Sans JP", sans-serif;
    }

    .feature-container {
        width: 860px;
        margin: 0 auto;
    }
    
    .feature-desc {
        position: relative;
    }
    
    .mt30 {
        margin-top: 30px;
    }
    
    
    /*-------------------------------------shokuiku --*/
    
    .present_url{
        font-size:24px;
    }
    #shokuiku .main-container{
        padding:35px 0;
    }
    #shokuiku .content {
        font-feature-settings: "palt";
    }
    
    #shokuiku .bg-tranceparent {
        background: #FFF;
    }
    
    #shokuiku hr {
        border: none;
        border-top: 1px solid #336a34;
    }
    
    #shokuiku hr.bold {
        border: none;
        border-top: 3px solid #a50319;
    }
    
    #shokuiku .feature-container a {
        color: #406878;
    }
    
    #shokuiku .sec01 {
        padding: 30px 0;
        background: url(../images/202608/syokuiku/bg01.jpg) no-repeat right top;
        background-size: 500px auto;
        margin-top:20px;
        color:#FFF;
    }
    
    #shokuiku .sec01 p {
        margin-top: 10px;
        line-height: 1.8;
        width: 390px;
        text-align: justify;
        font-size:16px;
        color:#9a6786;
    }
    
    #shokuiku .sec01 p.txt-lg {
        font-size: 21px;
        letter-spacing: 0.1em;
    }
    
    #shokuiku h2 {
        font-weight: 300;
        font-size: 46px;
        line-height: 1.2;
        color:#333;
    }
    
    #shokuiku h2 span {
        font-weight: 400;
        display: block;
        font-size: 18px;
        margin-bottom: 20px;
        line-height:1.4;
        letter-spacing: 0.1em;
    }
    #shokuiku h2 span.md{
        font-weight: 300;
        font-size:20px;
        margin-bottom:0;
    }
    #shokuiku h2 span.md{
        font-size:30px;
        letter-spacing: 0.1em;
    }
    #shokuiku .sec01 h3{
        /*background:#ab4653;*/
        width:380px;
        font-weight:300;
        margin-top:30px;
        box-sizing: border-box;
        font-size:30px;
        letter-spacing: 0.2em;
        color:#9a6786;
    }
    
    #shokuiku .sec02,
    #shokuiku .sec03,
    #shokuiku .sec04 {
        padding: 30px 0;
    }
    
    #shokuiku .sec02,
    #shokuiku .sec03{
        background:rgba(143, 130, 177, .3);
    }
    
    #shokuiku .sec02 h3,
    #shokuiku .sec03 h3 {
        color: #8f82b1;
        line-height: 1.2;
        font-weight:300;
        font-size: 35px;
        margin-bottom: 20px;
    }
    /*#shokuiku .sec02 h3{
        text-align: right;
    }*/

    #shokuiku .sec04 li h4{
        font-size:18px;
        font-weight: bold;
        color:#333;
        margin-bottom:10px;
    }
    
    #shokuiku .sec02 p,
    #shokuiku .sec03 p{
        width:85%;
        font-size:16px;
        font-weight:400;
        line-height:1.8;
    }
    #shokuiku .sec04 p,
    #shokuiku .sec05 p {
        font-size: 16px;
        line-height: 1.8;
    }
    #shokuiku .sec04 p{
        margin-top:20px;
        text-align:left;
    }
    /*#shokuiku .sec03 {
        margin: 30px 0;
    }*/
    
    #shokuiku .sec04{
        background:rgba(143, 130, 177, .5);
        text-align: center;
        position:relative;
    }
    #shokuiku .sec04 ul{
        display:flex;
        flex-wrap: wrap;
        /*justify-content: center;*/
        margin-top:30px;
    }
    #shokuiku .sec04 div > h4{
        font-size:24px;
        color:#8f82b1;
        position:relative;
        z-index:5;
    }
    #shokuiku .sec04 p.grm{
        position:absolute;
        color:rgba(255, 255, 255, .4);
        font-family: "EB Garamond", serif;
        font-size:130px;
        top:-40px;
        left:35%;
        z-index:1;
    }
    #shokuiku .sec04 h3{
        color:#333;
        font-size:36px;
        font-weight:300;
        letter-spacing: 0.25em;
        position:relative;
        z-index:5;
    }
    #shokuiku .sec04 li{
        width:24%;
        background:#FFF;
        margin:0 0.5% 15px 0.5%;
        text-align: left;
        padding:20px 18px;
        box-sizing: border-box;
        position:relative;
        border-radius:20px;
    }
    #shokuiku .sec04 li:nth-child(odd){
        background:rgba(143, 130, 177, .3);
    }
    #shokuiku .sec04 li:nth-child(even){
        background:rgba(255, 255, 255, .5);
    }
    #shokuiku .sec04 li img{
        width:80px;
        height: auto;
        position:absolute;
        top:-12px;
        right:-12px;
        z-index:10;
    }
    #shokuiku .sec04 li:nth-child(odd) h4{
        color:#FFF;
        font-size:40px;
        line-height:1;
        font-family: "Hurricane", cursive;
    }
    #shokuiku .sec04 li:nth-child(even) h4{
        color:#8f82b1;
        font-size:40px;
        line-height:1;
        font-family: "Hurricane", cursive;
    }
    #shokuiku .sec04 h5{
        font-size:21px;
        margin-top:-10px;
        line-height:1.3;
    }
    #shokuiku .sec04 li p{
        font-size:13px;
        text-align:justify;
    }

    #shokuiku .sec05{
        background:url(../images/202608/syokuiku/bg02.jpg) no-repeat;
        background-size:100%;
        color:#FFF;
        padding-bottom:50px;
    }
    #shokuiku .sec05 h3{
        font-family: "EB Garamond", serif;
        color:rgba(255, 255, 255, .5);
        font-size:130px;
    }
    #shokuiku .sec05 h4{
        font-size:30px;
        margin-bottom:40px;
        font-weight:300;
    }
    #shokuiku .sec05 h5{
        font-size:22px;
        font-weight:300;
    }
    #shokuiku .sec05 p{
        margin-top:20px;
        width:70%;
        
    }
    
    #shokuiku .sec07 {
        margin: 0 0 30px 0;
        background:rgba(143, 130, 177, .3);
    }
    #shokuiku .sec07 h3{
        font-weight: 300;
        font-style: normal;
        font-size: 40px;
        line-height: 1.2;
        color: #FFF;
        position:relative;
        text-align: center;
        margin-top:34px;
    }
    /*#shokuiku .sec07 h3 img{
        width:180px;
        height:auto;
        position:absolute;
        right:250px;
        top:-40px;
    }*/
    
    #shokuiku .sec07 ul {
        padding: 40px 0 30px 0;
        display: flex;
        flex-wrap:wrap;
        justify-content: space-between;
    }
    
    #shokuiku .sec07 li {
        box-sizing:border-box;
        position:relative;
        width: 48%;
        font-size: 13px;
        margin: 20px 0 20px 0;
        padding:20px;
    }
    #shokuiku .sec07 li:nth-child(odd){
        background:rgba(143, 130, 177, .2)
    }
    #shokuiku .sec07 li:nth-child(even){
        background:rgba(255, 255, 255, .5)
    }
    #shokuiku .sec07 li img{
        position:absolute;
        width:110px;
        height:auto;
        top:-12px;
        right:-20px;
    }
    #shokuiku .sec07 h4{
        font-size:20px;
        background:#8f82b1;
        color:#FFF;
        line-height: 1.3;
        font-weight:300;
        padding:3px 10px;
    }
    #shokuiku .sec07 h5{
        font-size:15px;
        font-weight:400;
    }
    #shokuiku .sec07 p img{
        position:absolute;
        top:10px;
        left:20px;
        height:35px;
    }
    #shokuiku .sec07 p.howto{
        color:#8f82b1;
        font-size:18px;
        font-weight:500;
        margin:10px 0;
    }
    #shokuiku .sec07 p.ingredients{
        font-size:14px;
        color: #4c4948;
        padding-top:5px;
        border-top:1px solid #4c4948;
        margin-bottom:10px;
    }
    
    


    #shokuiku .sec08{
        margin-top:30px;
    }
    #shokuiku .sec08 .fr div {
        float: left;
        width: 400px;
    }
    
    #shokuiku .sec08 .fl p,
    #shokuiku .sec08 .fr p {
        font-size: 12px;
        margin: 10px 10px 0 0;
        text-align: justify;
    }
    
    #shokuiku .sec08 .fl img,
    #shokuiku .sec08 .fr img {
        float: right;
    }

    
    /*------------------------------------外部リンク --*/
    #christmas .profile a[target="_blank"] {
        &:after {
          font-family: "Font Awesome 5 Free";
          content: " \f35d";
          font-weight: 600;
          margin: 0 0.25rem;
          color:#107ab0;
        }
      }
    

    @media screen and (max-width: 640px) {
        /*------------------------------------共通 --*/
        .feature-container {
            width: 92%;
            margin:0 auto;
        }
        .feature-desc p {
            width: 100%;
        }
        /*-------------------------------------shokuiku --*/
        .present_url{
            font-size:18px;
        }
        #shokuiku .sec01 {
            padding: 5% 0;
            background-image: none;
        }
        #shokuiku .sec01 img {
            margin: 20px auto;
            height: auto;
        }
        #shokuiku .sec01 p.txt-lg {
            font-size: 14px;
        }
        #shokuiku .sec01 p {
            width: 100%;
        }
        #shokuiku h2 {
            font-size: 38px;
        }
        #shokuiku h2 span.gmd {
            font-size: 60px;
          }
        #shokuiku .sec01 h3{
            width:100%;
            font-size:26px;
        }
        #shokuiku h2 span,
        #shokuiku .sec03 h3 span {
            font-size: 18px;
        }
        #shokuiku .sec02,
        #shokuiku .sec03{
            padding: 30px 0;
        }
        
        #shokuiku .sec02 .feature-container,
        #shokuiku .sec03 .feature-container{
            display:inherit;
        }
        #shokuiku .sec02 .feature-container div{
            width:100%;
        }
        #shokuiku .sec02 .feature-container div p,
        #shokuiku .sec03 p{
            width:100%;
        }
        #shokuiku .sec02 .feature-container img{
            width:100%;
        }
        #shokuiku .sec02 h3,
        #shokuiku .sec03 h3{
            font-size: 26px;
            margin: 20px 0;
        }
        #shokuiku .sec05 h3{
            font-size: 80px;
        }
        #shokuiku .sec02 h3 span, #shokuiku .sec03 h3 span {
            font-size: 20px;
        }
        #shokuiku .sec02 h4,
        #shokuiku .sec03 h4,
        #shokuiku .sec04 h4,
        #shokuiku .sec05 h4 {
            font-size: 18px;
        }
        #shokuiku .sec02 p,
        #shokuiku .sec03 p,
        #shokuiku .sec04 p,
        #shokuiku .sec05 p{
            font-size:14px;
        }
        #shokuiku .sec05 p {
            width: 100%;
        }
        #shokuiku .sec04 h3{
            font-size:26px;
        }
        #shokuiku .sec04 h5{
            font-size:18px;
        }
        #shokuiku .sec04 h5 span{
            font-size:30px;
        }
        #shokuiku .sec04 p.grm{
            font-size:110px;
            top:-40px;
            left:22%;
        }
        #shokuiku .sec04 ul{
            justify-content: space-between;
        }
        #shokuiku .sec04 li{
        width:48%;
        background:#FFF;
        margin-bottom:15px;
        text-align: left;
        padding:10px;
        box-sizing: border-box;
        }
        #shokuiku .sec04 div > h4 {
            font-size: 18px;
        }
        #shokuiku .sec04 li img {
            width: 60px;
        }
        #shokuiku .sec05 {
            background: url(../images/202608/syokuiku/bg02_sp.jpg) no-repeat;
            background-size: 100%;
            padding-bottom: 50px;
        }
        #shokuiku .sec06 .feature-container {
            padding: 10px 20px;
            position: relative;
            box-sizing: border-box;
        }
        #shokuiku .sec06 img.mb10 {
            width: 100%;
            height: auto;
          }
        #shokuiku .sec06 img.present-item{
            position:inherit;
            right:0;
            top:inherit;
            width:100%;
            height:auto;
        }
        #shokuiku .sec06>div{
            display: inherit;
            justify-content: inherit;
        }
        #shokuiku .sec06 div div{
            width:100%;
        }
        #shokuiku .sec06 h3 {
            font-size: 16px;
        }
        #shokuiku .sec06 h3 .big {
            font-size: 20px;
        }
        #shokuiku .sec06 h3 .mid {
            font-size: 18px;
        }
        #shokuiku .sec06 .must {
            padding: 8px 14px;
            margin:10px 0;
        }
        #shokuiku .sec06 > div > div {
        display: inherit;
        justify-content: inherit;
        }
        #shokuiku .sec06 div div div {
            width: 100%;
        }
        
        #shokuiku .sec07 {
            margin: 30px 0;
        }
        #shokuiku .sec07 {
            margin: 0 0 30px 0;
            background-image: none;
            padding:0;
        }
        #shokuiku .sec07  .feature-container{
            width:100%;
        }
        #shokuiku .sec07 li img {
            width: 100px;
        }
        #shokuiku .sec07 h3 {
            margin-top:0;
            font-size: 30px;
        }
        #shokuiku .sec07 h4 {
            font-size: 20px;
        }
        #shokuiku .sec07 ul {
            padding: 0;
            width:90%;
            margin:0 auto;
        }
        #shokuiku .sec07 li {
            width: 100%;
            margin-top: 30px;
        }
        #shokuiku .sec08 .fr div {
            float: none;
            width: 100%;
        }

        /*------------------------------------クリスマス　--*/
        #christmas .wrap{
            background:#d8a6a5;
        }

        #christmas section.sec01{
            background-image:none;
            background-position: inherit;
            background-repeat: inherit;
            padding:10% 4%;
        }
        #christmas .sec01 h2{
            font-size:20px;
        }
        #christmas .sec01 p{
            font-size:16px;
            font-weight: bold;
        }
        #christmas .sec01 img{
            width:80%;
            margin-top:20px;
        }

        #christmas .sec02{
            background-image:none;
            background-position: inherit;
            background-repeat: inherit;
            padding:10% 4%;
        }
        #christmas .sec02 div.frame{
            width:100%;
            padding:20px;
            box-sizing: border-box;
        }
        #christmas .sec02 div .baloon{
            width:200px;
            position:absolute;
            top:-75px;
            right:-10px;
        }
        #christmas .sec02 p{
            font-size:16px;
        }
        #christmas .sec02 p span{
            font-size:19px;
        }
        #christmas .sec02 div.tc img{
            width:100%;
        }
        #christmas .sec02 div.tc img.logo{
            width:200px;
        }
        div.divided{
            display:flex;
        }
        .sec02 div.divided p{
            font-size:13px;
            width:40%;
            padding:5px 10px;
        }
        .sec02 div.divided h3{
            font-size:16px;
            margin-left:20px;
        }
        #christmas .sec03{
            background-image:none;
            background-position: inherit;
            background-repeat: inherit;
            padding:10% 4%;
        }
        #christmas .sec03 p{
            font-size:18px;
            text-align: center;
        }
        #christmas .sec03 p .white{
            color:#FFF;
        }
        #christmas .sec03 p .big{
            font-size:24px;
        }
        #christmas .sec03 img{
            position:inherit;
            right:inherit;
            top:inherit;
            width:80%;
            margin-top:20px;
        }
        #christmas .sec04{
            background-image:none;
            background-position: inherit;
            background-repeat: inherit;
            padding:10% 4%;
        }
        #christmas .sec04 div.divided{
            display: inherit;
        }
        #christmas .sec04 div.frame{
            width:100%;
            box-sizing: border-box;
        }
        #christmas .sec04 div.must{
            margin-left:0;
            margin-top:20px;
        }
        #christmas .sec04 p.sm{
            font-size:12px;
        }
    

        

        
    }