@charset "UTF-8";
/*-----------------------------------------------------------
===  [ layout CSS ]  ====================================
------------------------------------------------------------*/
/* ***************************************************************************** */
/*

　目次

-------------------------------------------------------------------------------

　01. PC layout,02. Tab layout
　03. SP layout

*/
/* ***************************************************************************** */
/** -------------------------------------------------------
 ** 01. PC layout,02. Tab layout
 ** ------------------------------------------------------- */
html {/*scroll-behavior: smooth;*/}


@media print, screen and (min-width: 769px) {
  /* ***************************************************************** */
  /*ocha*/
  body {
    color: #533c3a;
  }
  #ochamilk #header {
    z-index: 100;
    background-color: #f8f5f1;
  }
  #ochamilk .globalnav li:last-child {
    padding-right: 1.5%;
    margin-left: 1.5%;
  }
  #ochamilk .globalnav li a:hover {
    color: #3faebf;
  }
  .wrapper {
    background-color: #ffffff;
    scroll-snap-type: y mandatory;
    overflow-y: auto;  
    height: 100vh;
      /* height: 1200px*/;
  }
  .section {
  scroll-snap-align: start;
    width: 100%;
    position: relative;
    background-color: #f8f5f1;
   /*    margin: 0;
    padding: 0;*/
      
  }
  #kv {
    height: 703px;
    z-index: 50;
  }
    #kv img { width:100%;} 
  #kv .base {
    top: 0;
    left: 0;
    position: absolute;
  }
   #kv .hora {
   /* top: -99px;left: 100px;width:472px;*/
      top:-12%;
       left: 7%;
      width:33%;
    position: absolute;
    opacity: 0;
      height:auto;
  }

  #kv .packageblue {
    /* top: 52px;
    left: 700px;
      width:291px;*/
      top:7%;
      left:48%;
      width:20%;
    position: absolute;
    opacity: 0;
  }
  #kv .packagered {
 /*top: 175px;
    left: 985px;
      width:319px;*/
      top: 25%;
    left: 69%;
      width:22%;
    position: absolute;
    opacity: 0;
  }
  #kv .blue {
    /*top: 211px;
    left: 570px;
      width:222px;*/
      top: 30%;
    left: 40%;
      width:15%;
    position: absolute;
    opacity: 0;
  }
  #kv .red {
   /* top: 459px;
    left: 1180px;
       width:222px;*/
       top: 65%;
    left: 82%;
       width:15%;
    position: absolute;
    opacity: 0;
  }
  #kv .kv_bred01 {
    /* top: 30px;
    left: 1185px;
      width:226px;*/
      top: 4%;
    left: 82%;
      width:16%;
    position: absolute;
    opacity: 0;
  }
  #kv .kv_bred02 {
    /* top: 383px;
    left: 590px;
      width:216px;*/
       top: 55%;
    left: 41%;
      width:15%;
    position: absolute;
    opacity: 0;
  }
  #kv .btn_online {
   /* top: 470px;
    left: 175px;
      width:327px;*/
       top: 67%;
    left: 12%;
      width:23%;
    position: absolute;
    opacity: 0;
  }
 #about {
    height: 1028px;
     overflow: hidden;
  }
  #about img {
    width: 100%;
  }
  #about .base {
    /*    top: 353px;
    right: 0px;
      width:473px;*/
    top: 34%;
    right: -20%;
    width: 33%;
    position: absolute;
  }
  #about .c0201 {
    /*top: 133px;
    left: 0;
      width:708px;*/
    top: 13%;
    left: 0;
    width: 50%;
    position: absolute;
  }
  #about p.c0202p {
    z-index: 100;
    font-family: 'BIZ UDPMincho', serif;
    font-size: min(2vw,2.8rem);
    line-height: 174%;
    font-weight: 500;
    /*  top:60px;
    width: 550px;*/
    top: 20%;
    width: 100%;
    position: absolute;
  }
  #about .c0202 {
    /* top: 30px;
    left: 730px;
      width:548px;*/
    top: 3%;
    left: 55%;
    width: 38%;
    position: absolute;
  }
  #about .c0203 {
    /*  top: 320px;
    left: 774px;*/
    top: 28%;
    left: 54%;
    position: absolute;
  }
  #about ul.c0203p {
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: min(1.6vw,1.9rem);
    line-height: 280%;
  font-weight: 900;
  font-style: normal;
  }
  #about ul.c0203p li {
    height: 280%;
    border-bottom: 2px dashed #f2cf98;
  }
  #about .c02_package {
    top: 0px;
    left: 0px;
    /*width:702px;*/
    width: 49%;
    position: absolute;
    opacity: 0;
  }
    
     #about .c0204 {
/*    bottom: 0px;
    left: 0px;*/
      left: 0px;
         bottom:-1px;
    position: absolute;
  }
    
    
    
  #products {
    height: 1580px;
    font-family: 'BIZ UDPMincho', serif;
    letter-spacing: 0.3rem;
    z-index: 1;
  }
  #products img {
    width: 100%;
    height: auto;
  }
  #products .bg {
    /* top: 600px;
      width:1303px;*/
    top: 38%;
    width: 90%;
    left: 0px;
    position: absolute;
  }
  #products .title {
    /* top: 80px;
      width:494px;*/
    top: 3%;
    width: 27%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
     
       max-width: 494px;
  }
  #products .bred_left {
    /* top: 180px;
    left: 80px;
      width:276px;*/
    top: 11%;
    left: 6%;
    width: 19%;
    position: absolute;
    opacity: 0;
  }
  #products .bred_right {
    /*top: 182px;
    right: 95px;
      width:205px;*/
    top: 12%;
    right: 6%;
    width: 14%;
    position: absolute;
    opacity: 0;
  }
  #products .pro {
    /*  top: 300px;*/
    top: 21%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
      width:80%;
      
/* background-color:#00ffff;*/
  }
  #products .pro ul {
    display: flex;margin: auto; 
  }
  #products .pro li {
    list-style: none;
    margin: 0 3% 0 3%;
     /* width: 360px;*/
  /*    width:100%;*/
      /* background-color:#ff2233;*/
    width:44%;
  }
    #products .pro li img { max-width:320px;}
  #products .pro li .catch {
    font-size: min(1.7vw,1.7rem);
    line-height: 150%;
    margin-top: -5%;
  }
  #products .pro li .pro_namme {
    font-size: min(2.6vw,2.6rem);
    margin-top: 5%;
    font-weight: 400;
    margin-bottom: 10%;
  }
  #products .pro li p {
    text-align: left;
    font-size: min(1.5vw,1.5rem);
    line-height: 150%;
    border-top: 2px dashed #f2cf98;
    padding-top: 5%;
    font-family: "Zen Maru Gothic", sans-serif;
  }
  #products .pro_btnonline {
    /* top: 1050px;*/
    top: 68%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    padding-bottom: 20%;
  }
    
 
  /* ***************************************************************** */
}
/** -------------------------------------------------------
 ** 03. SP layout
 ** ------------------------------------------------------- */
@media screen and (max-width: 768px) {
  /* ***************************************************************** */
  body {
    color: #533c3a;
    background-color: #f8f5f1;
  }
  #ochamilk #header {
    z-index: 100;
    background-color: #f8f5f1;
  }

  .section {
    width: 100%;
    position: relative;
       background-color: #f8f5f1;
      
  }
  #kv {
    padding-top: 65px;
  }
     #kv .base {
    top: 0;
    left: 0;
    
  }
  #kv img {
    width: 100%;
  }
  #kv .hora {
    position: absolute;
    width: 100%;
      top:0;
    left: 0;
    opacity: 0;
  }
     #kv .packageblue {
    position: absolute;
    width: 100%;
      top:8%;
    left: 0;
    opacity: 0;
  }
    #kv .kv_bred01 {
    position: absolute;
    width: 100%;
      top:31%;
    left: 0;
    opacity: 0;
  }
  #kv .btn_online {
    bottom: 0%;
    position: absolute;
    left: 10%;
    opacity: 0;
    width: 80%;
  }
  #about {
    position: static;
    padding-top: 100px;
  }
  #about .base {
    display: none;
  }
  #about .c0201 {
    top: 0;
    left: 0;
    display: block;
  }
  #about img {
    width: 100%;
  }
  #about .c0202,#about .c0203 {
    position: relative;
      opacity: 0;
  }
  
  #about p.c0202p {
    z-index: 100;
    font-family: 'BIZ UDPMincho', serif;
    font-size: 5.6vw;
    line-height: 174%;
    font-weight: 500;
    position: absolute;
    top: 20%;
    width: 100%;
    text-align: center;
  }
  #about ul.c0203p {
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 2rem;
    line-height: 320%;
    font-weight: 500;
    padding-bottom: 100px;
    background: url("../ocha-milk/images/about04_sp.png") no-repeat;
    background-position: right bottom;
    /*letter-spacing: 0.3rem;*/
  }
  #about ul.c0203p li {
    height: 64px;
    border-bottom: 2px dashed #f2cf98;
    width: 90%;
    margin-left: 5%;
  }
 
  #products {
    background: url("../ocha-milk/images/pr_milk.png") no-repeat;
    background-position: top center;
    background-size: contain;
    font-family: 'BIZ UDPMincho', serif;
    letter-spacing: 0.3rem;
       background-color: #f8f5f1;
  }
  #products .bg {}
  #products .title {
    margin: 10% auto 0 auto;
    padding-top: 25%;
    width: 60%;
      
  }
  #products .title img {
    width: 100%;
    height: auto;
  }
  #products .pro {
    width: 100%;
  }
  #products .pro ul {
    margin: 0 auto;
    width: 100%;
  }
  #products .pro li {
    list-style: none;
    width: 100%;
    margin-top: 100px;
    margin-bottom: 100px;
    /* margin: 100px 50px 100px 50px;*/
  }
  #products .pro li:first-child {
    background: url("../ocha-milk/images/pro_bred01_sp.png") no-repeat;
    background-position: top center;
    background-size: contain;
  }
  #products .pro li:last-child {
    background: url("../ocha-milk/images/pro_bred02_sp.png") no-repeat;
    background-position: top center;
    background-size: contain;
  }
  #products .pro li .catch {
    font-size: 1.7rem;
    line-height: 150%;
    margin-top: -18px;
  }
  #products .pro li .pro_namme {
    font-size: 2.6rem;
    margin-top: 16px;
    font-weight: 400;
    margin-bottom: 30px;
  }
  #products .pro li p {
    font-family: "Zen Maru Gothic", sans-serif;
    text-align: left;
    font-size: 1.5rem;
    line-height: 150%;
    border-top: 2px dashed #f2cf98;
    padding-top: 30px;
    width: 90%;
    margin-left: 5%;
  }
    #products .pro li img { width:65%; z-index: 100;}
    #products img { width:100%; height:auto;}

  #products .pro_btnonline {
    text-align: center;
  }
 
}

/*feature*/

@media print, screen and (min-width: 769px) {
    .cmn-fsp {display: none;}
    
    .main-contents {
    margin: 20px 0 0;
}
.cards-container {
    position: relative;
    width: 100%;
    height: 796px; /* ★ カードが収まる高さを指定して、親要素が潰れるのを防ぐ */
   /*  height: 140vw;  ※カードの縦幅に合わせて、後で数値を微調整してください */
}
.card-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-contents {
    position: relative;
    margin: auto;
    max-width: 1120px;
    max-height: 496px;
    width: 77%; /* 画面幅の90%（左右に少し余白ができるサイズ） */
    height: auto; /* 高さは画像に合わせて自動計算 */
}
  
  /* 3. 中の画像を枠に合わせて縮小させる */
  .card-contents img {
    width: 100%;
    height: auto;
  }
    
    
#feature {
    max-width: 1440px;
    margin: 0 auto;
    text-align: center;
   /* min-height: 100vh;*/
    min-height:  1150px;
    overflow: hidden;
    background: url('../ocha-milk/images/feature03.png') top / cover no-repeat;
    padding-top: 20px;

}
    


 

    
    #feature .maintitle {
    /* top: 80px;
      width:494px;*/
    top: 3%;
    width: 27%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
     
       max-width: 494px;
  }
#feature .maintitle img {width:100%; height: auto;}

  #feature .card1 .title {
       position: absolute;
    font-family: 'BIZ UDPMincho', serif;
      width:100%;
    font-size: min(2.6vw,3rem);
      white-space: nowrap;
      top:12%;
   
  }
  
  #feature .card1 table {
    position: absolute;
      top:28%;
      width:60%;
       max-width: 650px;
          left: 50%;
    transform: translateX(-50%);
     font-size: min(1.4vw,2rem);
      height:60%;
      border-spacing: 12px;
          
  }
 
  #feature .card1 table td {
    font-family: 'BIZ UDPMincho', serif;
    text-align: left;
    padding-left: 10%;
    white-space: nowrap;
      vertical-align: middle;
      height:14%;
  }
 
    
     #feature .card1 .small {
    font-family: "Zen Maru Gothic", sans-serif;
         width:55%;
         white-space: nowrap;
      font-size: min(1.2vw,1.7rem);
         line-height: 165%; 
         padding-left:2%;
    
  }
    


    
  #feature .card2 .title {
      text-align: left;
    font-family: 'BIZ UDPMincho', serif;
     left: 50%;
    white-space: nowrap;
    font-size: min(2vw,2.8rem);
      top:7%;
    position: absolute;
    line-height: 150%;
  }
    
  #feature .card2 p {
    position: absolute;
    font-family: "Zen Maru Gothic", sans-serif;
    left: 50%;
     font-size: min(1.2vw,1.7rem);
      top: 27%;
    text-align: left;
    line-height: 180%;
      font-weight: 900;
    padding-top: 10px;
    border-top: 2px dashed #f2cf98;
  }
  #feature .card3 .title {
    text-align: left;
    font-family: 'BIZ UDPMincho', serif;
     left: 50%;
    white-space: nowrap;
    font-size: min(2vw,2.8rem);
      top:7%;
    position: absolute;
    line-height: 150%;
  }
  #feature .card3 p {
    position: absolute;
    font-family: "Zen Maru Gothic", sans-serif;
    left: 50%;
     font-size: min(1.2vw,1.7rem);
      top:27%;
    text-align: left;
    line-height: 180%;
    padding-top: 10px;
    border-top: 2px dashed #f2cf98;
      font-weight: 900;
  }
  

}

@media print, screen and (max-width: 768px) {
    /*feature*/
.cmn-fpc {display: none;}
    /* 1. 全体の高さを自動にして重なりを解除 */
  #feature {
    width: 100%;
    min-height: auto; /* 固定値を解除 */
    height: auto;
    overflow: visible;
    padding-bottom: 80px;
      padding-top: 150px;
    position: relative; /* absoluteにしない */
      background: url('../ocha-milk/images/feature03_sp.png') top / cover no-repeat;
            background-color: #f8f5f1;
  }

  /* 2. カードを縦に並べる */
  .cards-container {
    height: auto;
    display: block; /* 縦に並べる */
  }

  /* 3. 各カードの重なり設定を解除 */
  #feature .card-wrapper {
    position: relative !important; /* absoluteを上書き */
    top: auto !important;
    left: auto !important;
    transform: none !important; /* GSAPの残骸を無効化 */
    margin-bottom: 20px; /* カード同士の間隔 */
    width: 100%;
  }

  /* 4. カードの中身を整える */
  .card-contents {
    width: 90%;
    margin: 0 auto;
    position: relative;
    height: auto;
  }

      #feature .maintitle {
    top: 10%;
 /*   left: 50%;
    transform: translateX(-50%);*/
    position: relative;
    display: block;
    width: 60%;
      z-index: 10;
      margin: 0 auto;
          padding-bottom:5%;
  }
    .card-contents img,#feature .maintitle img {width:100%; height:auto;}
  /* 5. カード内の文字（titleやp）の位置調整 */
  /* absoluteのままだと画像の上で重なるので、位置を調整 */
  #feature .card1 .title {
    font-family: 'BIZ UDPMincho', serif;
    left: 50%;
    transform: translateX(-50%);
    font-size: 5vw;
    line-height: 160%;
    top: 7%;
    position: absolute;
    display: block;
    padding-bottom: 3%;
    border-bottom: 2px dashed #f2cf98;
  }
  #feature .card1 table {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
   /*   background-color:#00ff00;
      opacity: 0.5;*/
  }
  #feature .card1 table tr {
    display: block;
    margin-bottom: 11%;
  }
  #feature .card1 table td {
    display: block;
    width: 100%;
    font-family: 'BIZ UDPMincho', serif;
    font-size: 3.8vw;
    padding-left: 3%;
  }
  #feature .card1 .small {
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: min(3vw,3.5rem);
    padding-bottom: 11.5%;
    padding-top: 5%;
    line-height: 180%;
    width: 100%;
    padding-left: 0%;
  }
  #feature .card2 .title {
    display: block;
    font-family: 'BIZ UDPMincho', serif;
    text-align: center;
    font-size: min(4.5vw,5rem);
    top: 21%;
    position: absolute;
    line-height: 150%;
    width: 100%;
  }
  #feature .card2 p {
    position: absolute;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: min(3vw,3.8rem);
    top: 35%;
    width: 80%;
    margin-left:10%;
    text-align: left;
    line-height: 180%;
    padding-top: 3%;
    border-top: 2px dashed #f2cf98;
  }
  #feature .card3 .title {
    display: block;
    font-family: 'BIZ UDPMincho', serif;
    text-align: left;
     font-size: min(4.5vw,5rem);
    position: absolute;
    top: 22%;
    margin-left: 10%;
    line-height: 150%;
    width: 100%;
  }
  #feature .card3 p {
    position: absolute;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: min(3vw,3.8rem);
    top: 36%;
    width: 80%;
    margin-left:10%;
    text-align: left;
    line-height: 180%;
    padding-top: 3%;
    border-top: 2px dashed #f2cf98;
  }
}