@charset "utf-8";
/* CSS Document */

@media print, screen and (min-width: 768px) {
    .sp { display: none;}
    .pc {display: block;}    
}

@media screen and (max-width: 767px) {
    .sp { display: block;}
    .pc {display: none;}
}

@media screen and (max-width: 767px) {
    .gnav { display: none;}
    .overlay {
      content: "";
      display: block;
      width: 0;
      height: 0;
      /*background-color: rgba(0, 0, 0, 0.5);*/
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      opacity: 0;
      transition: opacity .5s;
    }
    .overlay.open {
      width: 100%;
      height: 100%;
      opacity: 1;
    }
    #ContentsBase {
      height: 100%;
      min-height: 100vh;
    }
    #ContentsBase.open {
      transform: translateX(-250px);
    }

    .menu-trigger {
      display: inline-block;
      width: 36px;
      height: 28px;
      vertical-align: middle;
      cursor: pointer;
      position: fixed;
      top: 15px;
      right: 10px;
      z-index: 808;
    /*   transform: translateX(0);
      transition: transform .5s;
     */}
    /* .menu-trigger.active {
      transform: translateX(-250px);
    }
     */.menu-trigger span {
      display: inline-block;
      box-sizing: border-box;
      position: absolute;
      left: 0;
      width: 100%;
      height: 4px;
      background-color: #c97586;
      transition: all .5s;
    }
    .menu-trigger.active span {
      background-color: #c97586;
    }
    .menu-trigger span:nth-of-type(1) {
      top: 0;
    }
    .menu-trigger.active span:nth-of-type(1) {
      transform: translateY(12px) rotate(-45deg);
    }
    .menu-trigger span:nth-of-type(2) {
      top: 12px;
    }
    .menu-trigger.active span:nth-of-type(2) {
      opacity: 0;
    }
    .menu-trigger span:nth-of-type(3) {
      bottom: 0;
    }
    .menu-trigger.active span:nth-of-type(3) {
      transform: translateY(-12px) rotate(45deg);
    }

    nav.sp {
      width: 250px;
      height: 100%;
      padding-top: 100px;
      background-color: rgb(256, 256, 256, 0.95);
      position: fixed;
      top: 0;
      right: 0;
      z-index: 807;
      transform: translate(250px);
      transition: all .5s;
      box-shadow: 5px 5px 10px -3px rgba(102,102,102,0.3);
      -webkit-box-shadow: 5px 5px 10px -3px rgba(102,102,102,0.3);
      -moz-box-shadow: 5px 5px 10px -3px rgba(102,102,102,0.3);
      font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
    }
    nav.sp.open {
      transform: translateZ(0);
    }
    nav.sp ul { padding: 0;}
    nav.sp li {
      color: #fff;
      text-align: left;
      /*padding: 10px 15px;*/
        list-style: none;
        display: block;
    }
    nav.sp li a {
        color: #222222;
        padding: 10px 15px;
        display: block;
        text-align: left;
    }
    
    header { height: auto; border-bottom:solid #eeeeee 1px;}
    .header-left { float: none; width: 60%; display: inline-block;}
    .logo { height: auto; width: 60%;}
    .header-left img {
        width: 200px;
        height: auto;
    }
    footer { padding: 0 15px;}
    #content,
    header,
    .fnav{ width: 100%;}
    
    .fnav li { display: block; margin-bottom: 10px; width: 100%;}
    .fnav li a { display: block; padding: 8px; margin: 0;}
    .contents{ width: auto; padding: 0 ;}
    .mainColumn { margin-top: 0; width: auto; padding: 0;}
    
    .subColumn { margin-top: 20px; padding-top: 20px;}
    .cont1 {
        float: none;
        width: 90%;
        margin: auto;
    }
    .cont1 img { width: 100%; height: auto;}
    
    .subColumn .widget {
        width: auto;
        display: block;
        border-bottom: solid #eeeeee 1px;
        padding: 0 15px 20px;
        margin-bottom: 30px;
    }
    .otoiawase {
        width: 100%;
        margin: 10px auto;
        text-align: center;
    }
    
    
    /*トップページ*/
    #bx { width: 100%;}
    .bx-wrapper img,
    .bx-viewport{ height: inherit;}
    
    .pageIndex .informationTopics,
    .pageIndex .order,
    .pageIndex .video1{ padding: 0 15px;}
    
    .pageIndex .topics dl dt,
    .pageInformation .topics dl dt,
    .pageIndex .topics dl dt,
    .pageIndex .topics dl dd,
    .pageInformation .topics dl dt,
    .pageInformation .topics dl dd{ display: block; width: 100%;}
    
     .pageIndex .topics dl dt,
    .pageInformation .topics dl dt { padding-bottom: 0;}
    
    .pageIndex .topics dl dd,
    .pageInformation .topics dl dd { padding-top: 0;}
    
    .video1 video { width: 100% !important;}
    
    
    /*お知らせ*/
    .pageInformation .informationTopics { padding: 0 15px;}
    .pageInformation .entrycontents  { padding:0 15px;}
    .pageInformation .entrycontents img { max-width: 100%; height: auto;}  
    
    .pageInformation.index .mainColumn h2,
    .pageInformation.entry .mainColumn h2 { margin-top: 20px;}
    
    
    /*お菓子*/
    .pageProduct .otoiawase { margin-bottom: 40px;}
    .pageProduct .wp-block-column { text-align: center;}
    .pageProduct.index .mainColumn h2 { margin-top: 20px;}
    .pageProduct .contents { padding: 0 15px;}
    
    /*手毬について*/
    .pageTemari.index .mainColumn h2 { margin-top: 20px;}
    .pageTemari.index .mainColumn p { text-align: center;}
    .pageTemari .history,
    .pageTemari .temariabout,
    .pageTemari .history2{
        width: 100%;
        background-size: cover;
        background-position: 100% 100%;
        background-color: rgba(255,255,255,0.3);
        background-blend-mode: lighten;
        height: auto;
    }
    
    .pageTemari .history p,
    .pageTemari .history2 p{ padding: 0 10px; text-align: left !important;}
    .pageTemari .history2 { margin-bottom: 30px;}
    
    .pageTemari h3.history_title { width: 100%; margin: 40px 0;}
    .pageTemari p.otoiawase { width: 90%; margin: auto; text-align: center !important; display: block;}
    .pageTemari p.otoiawase a { text-align: center !important; display: block;}
    
    
    /*和菓子教室*/
    .pageLesson .mainColumn { padding: 0;}
    .pageLesson .lesson,
    .pageLesson .lesson2,
    .pageLesson .lesson3{
        width: auto;
        margin: auto;
        background-size: cover;
        background-position: 80% 100%;
        background-color: rgba(255,255,255,0.5);
        background-blend-mode: lighten;
        height: auto;
        padding: 15px;
    }
    .pageLesson .lesson h2 { width: 100%; margin:40px 0;}
    .pageLesson .lesson p { margin-left: 0;}
    .pageLesson .ippan2,
    .pageLesson .lesson2 .ippan2 a { width: auto; display: block; text-align: center;}
    .pageLesson .setsumei { text-align: center;}
    
    .pageLesson .lesson3 { text-align: center;}
    .pageLesson .wp-block-group__inner-container { padding: 0 10px;}
    
    
    /*手毬の事業内容*/
    .pageService.index .mainColumn h2 { margin-top: 20px; margin-bottom: 0;}
    .pageService .mainColumn .kashi .wp-block-group__inner-container { width: auto; padding: 0 15px 30px;}
    .pageService .mainColumn .kashi {
        width: auto;
        margin: auto;
        background-size: cover;
        background-position: 80% 23%;
        background-color: rgba(255,255,255,0.0);
        background-blend-mode: lighten;
        height: auto; 
        padding: 15px;
    }
    
    /*会社概要*/
    .pageCompany .company {
        width: auto;
        margin: auto;
        background-size: cover;
        background-position: 52% 23%;
        background-color: rgba(255,255,255,0.6);
        background-blend-mode: lighten;
        height: auto;
        padding: 15px;
    }
    .pageCompany .company h2 { width:100%; margin-top: 0;}
    .pageCompany iframe { width: 100%;}
    
    
    /*意匠登録*/
    .pageDesign.index .mainColumn h2 { margin-top: 20px;}
    .pageDesign.index .mainColumn { padding: 0 15px;}
    
    
    /*特定商取引法に基づく表示*/
    .pageTokuteisyou .tokusho { padding: 15px;}
    .pageTokuteisyou .tokusho dt,
    .pageTokuteisyou .tokusho dd {
        width: auto;
        display: block;
    }
    .pageTokuteisyou .tokusho dt { font-weight: bold;}
    
    /*お問い合わせ*/
    .pageForm .form {
        width: auto;
        margin: auto;
        background-size: cover;
        background-position: 52% 0;
        background-color: rgba(255,255,255,0.6);
        background-blend-mode: lighten;
        height: auto;
        padding: 15px;        
    }
    .pageForm .form p { width: 100%;}
    .pageForm .form .ippan2 a { 
        width: auto;
        text-align: center;
        margin: 30px 0;
    }
    
}




/*end*/