@charset "utf-8";

/* -----------------------------------------------------------
　common
----------------------------------------------------------- */

@media screen and (max-width: 767px){ 
  body {
    -webkit-text-size-adjust: 100%;
    font-size:13px;
  }
  .pc_cont {display:none!important;} 
}

/* -----------------------------------------------------------
  template
----------------------------------------------------------- */

@media screen and (max-width: 767px){

/* :::::::::: header :::::::::: */
  
  header {
    height:60px;
    padding:10px 3% 10px;
  }
  header .header_box div:nth-of-type(1) .logo {
    display:block;
    width:140px;
    padding:0;
    margin:0;
  }
  header .header_box div:nth-of-type(1) p {
    display:block;
    font-size:10px;
    text-align:right;
  }
  header .header_box div:nth-of-type(2) p {font-size:12px;}
  header .header_box div:nth-of-type(2) p a {padding:0 0.75em;}
  header .header_box div:nth-of-type(2) ul li {
    width:20px;
    margin:0 0 0 5px;
  }

  /* :::::::::: main :::::::::: */

  .box {padding:0 5%;}

  /* :::::::::: footer :::::::::: */
  
  footer {
    height:150px;
    padding:50px 5% 0;
    background:url("../img/f_bg.png") no-repeat center / auto 100px, var(--color01);
    margin:0 0 11.7vw;
  }
  footer p {
    width:140px;
    font-size:10px;
  }
  .btn_ec {
    width:100%;
    height:auto;
    top:auto;
    bottom:0;
    left:0;
    right:0;
  }
  .btn_ec img {display:block;}
  .pagetop {
    width:15vw;
    height:15vw;
    bottom:14vw;
    right:2%;
  }
} 
  
/* -----------------------------------------------------------
 contents
----------------------------------------------------------- */

@media screen and (max-width: 767px) {
  
  /** KV / banner**/

  .kv {
    position:relative;
    width:100%;
    height:180vw;
    margin:0 auto 10%;
  }
  .summer .kv { background: url("../img/kv_summmer.jpg") no-repeat top right 27% / auto 75%, #000000; }
  .winter .kv {background:url("../img/kv_winter_sp.jpg") no-repeat top center / 100%,#000000;}
  .kv .kv_cont {
    width:65%;
    height:auto;
    left:1%;
    top:60px;
  }
  .kv .kv_cont img {
    width:100%;
    height:auto;
  }
  .kv .kv_banner {transform:translateY(0);}
  .kv .kv_banner img {display:block;}
  .kv .kv_banner::after {display:none;}
  .head_banner {margin:0 auto 10%;}
  .head_banner h2 {
    font-size:18px;
    margin:0 auto 5%;
  }
  .head_banner .box {padding:0;}
  .head_banner .box div {margin:0 auto;}
  .head_banner .box div p {
    width:100%;
    float:none;
    margin:0 auto 3%;
  }
  .head_banner .box div + p {font-size:13px;}

  .bnr_btn {
    padding:0;
    margin:20% auto;
  }
  .bnr_btn > p {
    font-size:3.6vw;
    float:left;
  }
  .bnr_btn > p:nth-of-type(1) {width:50%;padding:0 0 0 4%;}
  .bnr_btn > p:nth-of-type(2) {width:50%;padding:0 4% 0 0;}
  .bnr_btn ul {
    font-size:0;
    clear:both;
  }
  .bnr_btn ul li {
    float:none;
    display:inline-block;
  }
  .bnr_btn ul li:nth-child(1) {width:34.5%;}
  .bnr_btn ul li:nth-child(2) {width:31.2%;}
  .bnr_btn ul li:nth-child(3) {width:34.3%;}
  
  /** lead **/

  .lead {
    margin:25% auto 35%;
    padding:15% 0;
  }
  .lead::before,.lead::after {
    width:200vw;
    left:-100vw;
    right:-100vw;
  }
  .lead::before {background:url("../img/bg_p.jpg") center / 20%;}
  .lead::after {background:url("../img/bg_b.jpg")  center / 20%;}
  .lead > .fade01,.lead > .fade02 {
    width:80vw;
    height:25vw;
  }
  .lead > .fade01 {top:-17vw;}
  .lead > .fade02 {bottom:-15vw;}
  .lead .box::before,.lead .box::after {
    width:262px;
    height:437px;
  }
  .lead .box::before {
    right:80%;
    top:-200px;
  }
  .lead .box::after {
    left:85%;
    bottom:-80px;
  }
  .lead h2 {
    font-size:20px;
    margin:0 auto 8%;
  }
  .lead h2 span {font-size:26px;}
  .lead p {font-size:14px;}  
  
  /** voice **/

  .voice h2 {
    height:100px;
    font-size:22px;
    padding:0;
    margin:0 auto 8%;
    background:url("../img/h2_voice.png") no-repeat center / auto 100%;
    font-feature-settings: "palt";
  }
  .voice h2 span {font-size:28px;}
  .voice .slider_area {
    background:url("../img/bg_g.jpg") center / 50%;
    padding:8% 0;
  }
  .voice .slider_area .box p {font-size:14px;}
  .voice .slider_area .voice_slider {
    width:85%;
    margin:6% auto;
  }
  .voice .slider_area .voice_slider .slick-slide {
    padding:20px 0 0;
    transform:translateY(0);
    margin:0 4vw;
  }
  .voice .slider_area .voice_slider .slick-slide.w01,
  .voice .slider_area .voice_slider .slick-slide.m01 {background:url(../img/bg01.png) repeat-x top center / auto 20px;}
  .voice .slider_area .voice_slider .slick-slide.w02,
  .voice .slider_area .voice_slider .slick-slide.m02 {background:url(../img/bg02.png) repeat-x top center / auto 20px;}
  .voice .slider_area .voice_slider .slick-slide.w03,
  .voice .slider_area .voice_slider .slick-slide.m03 {background:url(../img/bg03.png) repeat-x top center / auto 20px;}
  .voice .slider_area .voice_slider .slick-slide dl dt {
    font-size:17px;
    border-bottom:dashed 1px #B69527; 
  }
  .voice .slider_area .voice_slider .slick-slide dl dd {font-size:12px;}
  .voice .slider_area .voice_slider .slick-arrow {
    width:10%;
    height:38%;
  }
  .voice .slider_area .voice_slider .slick-prev {left:-8%;}
  .voice .slider_area .voice_slider .slick-next {right:-8%;}
  .voice .slider_area .voice_slider + .box p {font-size:12px;}
  
  /** reason **/

  .reason .head_section {
    height:90vw;
    padding:15vw 0 0;
    background:url("../img/reason_head_sp.png") no-repeat top center / 100%,var(--color01);
  }
  .reason .head_section h2 {
    font-size:27px;
    text-shadow:0px 2px 5px rgba(255, 255, 255, 1),0px -2px 5px rgba(255, 255, 255, 1),2px 0px 5px rgba(255, 255, 255, 1),-2px 0px 5px rgba(255, 255, 255, 1);
    margin:0 auto 30px;
    line-height:1.2;
  }
  .reason .head_section h2 > span span {font-size:38px;}
  .reason .head_section p {
    display:block;
    width:100%;
    padding:1em 0;
    font-size:14px;
    border-radius:0;
    background:rgba(255,255,255,0.6);
  }
  .reason > section {padding:12% 0;}
  .reason > section h3 {
    font-size:21px;
    background:url("../img/h3_reason.png") no-repeat bottom center / 90%;
    margin:0 auto 10%;
  }
  .reason > section section {
    display: flex;
    flex-direction:column;
    min-height:auto;
    margin:0 auto 10%;
    padding:0;
  }
  .reason > section section > div {
    width:90%;
    margin:0 auto;
    order:1;
  }
  .reason > section section:nth-of-type(even) > div {
    width:90%;
    margin:0 auto;
  }
  .reason > section section h4 {
    font-size:18px;
    padding:0 0 3%;
    margin:0 0 3%;
  }
  .reason > section section > div p {font-size:13px;}
  .reason > section section > p {
    width:10%;
    left:auto;
    right:2%;
  }
  .reason > section section:nth-of-type(even) > p {
    right:auto;
    left:2%;
  }
  .reason > section section > figure {
    position:static;
    width:85%;
    margin:0 0 3%;
    order:0;
  }
  .reason > section section:nth-of-type(even) > figure {margin:0 0 3% 15%;}
  .reason > .kodawari02 h3 {background:url("../img/h3_reason02.png") no-repeat bottom center / 90%;}
  .reason > .kodawari03 h3 {margin:0 auto 5%;}
  .reason > .kodawari03 section {padding:0 5%;}
  .reason > .kodawari03 section > p {
    width:110px;
    margin:0 auto;
  }
  .reason > .kodawari03 section h4 + p {font-size:13px;}

  /** recipe **/

  .recipe {
    margin:25% auto 0;
    padding:15% 0 0;
  }
  .recipe::after {background:url("../img/bg_b.jpg") center / 40%;}
  .recipe .box:nth-of-type(1)::before {
    width:253px;
    height:254px;
    right:calc(50% + 150px);
    top:-200px;
  }
  .recipe .box:nth-of-type(1)::after {
    width:262px;
    height:438px;
    left:calc(50% + 200px);
    top:-200px;
  }
  .recipe h2 {
    font-size:28px;
    margin:0 auto 5%;
  }
  .recipe h2 span {font-size:38px;}
  .recipe .box p {
    font-size:14px;
    margin:0 auto 10%;
  }
  .recipe > ul li {width:100%;}
  .recipe > ul li figure a {pointer-events:none;}
  .recipe > ul li p {font-size:3.9vw;}
  .recipe > ul li p a {pointer-events:auto;}
  .recipe > ul + div {
    padding:10% 5% 35vw;
    background:url("../img/recipe_bottom.png") no-repeat bottom center / 110%,#E5897C;
  }
  .recipe > ul + div {font-size:15px;}
  
  /** gift **/

  .gift .head_section {
    padding:40vw 5% 5%;
    background:url("../img/gift_head_sp.png") no-repeat top center / 100%,url("../img/bg_p.jpg") center / 40%;
  }
  .gift .head_section h2 {
    font-size:28px;
    margin:0 auto 30vw;
  }
  .gift .head_section h2 span {font-size:38px;}
  .gift .head_section ul li {
    width:100%;
    padding:0;
    float:none;
    margin:0 auto 8%;
  }
  .gift .head_section ul li img {margin:0 auto 4%;}
  .gift .head_section ul li dl dt {
    font-size:22px;
    margin:0 0 3%;
  }
  .gift .bottom_section {
    padding:20% 0;
    background:url("../img/top_gift.png") repeat-x top center / 200%,url("../img/bottom_gift.png") repeat-x bottom center / 200%,#E5DAB3;
  }
  .gift .bottom_section > .box {padding:0;}
  .gift .bottom_section > .box > section {
    margin:0 auto;
    padding:0 0 10%;
    box-shadow:none;
  }
  .gift .bottom_section > .box > section .box {padding:0;}
  .gift .bottom_section > .box > section:nth-last-of-type(3) {padding:0 0 15%;}  
  .gift .bottom_section > .box > section:nth-last-of-type(2) {padding:0 0 5%;}  
  .gift .bottom_section > .box > section:nth-last-of-type(1) {padding:0 0 5%;}  
  .gift .bottom_section > .box > section h3 {
    font-size:21px;
    margin:0 auto 6%;
  }

  .gift .bottom_section > .box > section .box > p {
    padding:0 5%;
    font-size:14px;
    margin:0 0 5%;
  }
  .gift .bottom_section > .box > section section {margin:0 0 8%;}
  .gift .bottom_section > .box > section section h4 {
    width:90%;
    font-size:16px;
    padding:0.4em 1em;
    margin:0 auto 3%;
    border-radius:10px;
  }
  .gift .bottom_section > .box > section section p {padding:0 5%;}
  .gift .bottom_section > .box > section section .noshi {
    padding:0 5%;
    flex-wrap: wrap;
  }
  .gift .bottom_section > .box > section section .noshi div {
    width:46%;
    margin:0 2% 4%;
  }
  .gift .bottom_section > .box > section section .caution {
    font-size:14px;
    margin:4% 0 0;
  }
  .gift .bottom_section > .box > section .hoso {display:block;} 
  .gift .bottom_section > .box > section .hoso dl {
    width:90%;
    margin:0 auto 8%;
  }
  .gift .bottom_section > .box > section .hoso dl dt {
    font-size:18px;
    margin:0 auto 3%;
    border-radius:10px;
  }
  .gift .bottom_section > .box > section .kakegami {display:block;}
  .gift .bottom_section > .box > section .kakegami img {
    display:inline-block;
    margin:6% 0 2%;
  }
  .gift .bottom_section > .box > section .fukuro {display:block;}
  .gift .bottom_section > .box > section .fukuro div {
    width: 92%;
    margin:0 4% 6%;
  }

  /** history **/

  .history {
    background:url("../img/history_head_sp.jpg") no-repeat top center / 100%,#FAF8F0;
    padding:calc(30vw + 40px) 0 40px;
  }
  .history h2 {
    height:100px;
    font-size:26px;
    padding:30px 0 0;
    margin:0 auto 40px;
    background:url("../img/h2_voice.png") no-repeat center / auto 100%;
  }
  .history section {margin:0 auto 10%;}
  .history section .h3_hisory {
    flex-direction:column;
    height:auto;
    margin:0 0 6%;
  }
  .h3_hisory > img {
    position:static;
    width:100%;
    height:auto;
    order:0;
  }
  .history section .h3_hisory h3 {
    position:static;
    width:100%;
    font-size:23px;
    padding:1em;
    order:1;
  }
  .history section .h3_hisory p {
    font-size:10vw;
    top:2%;
  }
  .history section:nth-of-type(1) .h3_hisory p {left:auto;right:2%;}
  .history section:nth-of-type(2) .h3_hisory p {right:auto;left:2%;}
  .history section:nth-of-type(3) .h3_hisory p {left:auto;right:2%;}
  .history section .box p {font-size:14px;}
  
  /** order **/

  .order {padding:15% 0 0;}
  .order h2 {
    font-size:22px;
    margin:0 auto 6%;
  }
  .order section {margin:0 auto 8%;}
  .order .box {padding:0;}
  .order section h3 {
    font-size:18px;
    margin:0 auto 6%;
  }
  .order section p {
    font-size:14px;
    padding:0 5%;
    text-align:left;
  }
  .order section .tel_box p {margin:0 5% 3%;}
  .order section .pay_box {padding:0 5%;}
  .order section .pay_box p {
    display:block;
    font-size:12px;
    margin:0 0 5%;
    padding:0;
  }
  .order section .pay_box {margin:5% auto 0;}
  .order .btn {
    width:260px;
    height:40px;
    line-height:40px;
  }
  .order .btn a {
    font-size:16px;
    background: url("../img/bg_btn.png") no-repeat left 10px center / auto 50%,linear-gradient(to right, rgba(53,99,142,1) 0%, rgba(53,99,142,1) 10%, rgba(0,50,101,1) 100%);
  }
  
  
  
  .fade {transform:translateY(50px);}
}