body{font-family:YuMincho,'Yu Mincho',serif;margin:0;}
.shopinfo a{color:#FFF !important;text-decoration:none;}
h1{font-size:20px;text-align:center;line-height:1.5;position:relative;top:-40px;}
h2,h3,h4{text-align:center;}
ul{padding:0;}
li{list-style:none;}
p{padding:5px 15px;}
.logotop{text-align:center;}
.logotop img{width:150px;position:absolute;top:288px;left:50%;transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);}
.menu img{position:absolute;top:24px;left:24px;width:30px;}
.menu_instagram img{position:absolute;top:24px;right:24px;width:30px;}
.copy{position:relative;width:90%;text-align:center;margin:0 auto;}
.copy img{position:relative;top:-40px;}
.copy_pc{display:none;}
.title_pc{display:none;}
.choutitle{margin:40px 0 0 0;}
.donuttitle{width:150px;margin:0 auto;}
.lineup{margin-top:0;}
.products{display:flex;}
.products li{width:50%;padding:10px;text-align:center;}
.products li img{width:100%;border-radius:10px;}
.gentei{margin-top:60px;}
.concept{background:#a3beca;color:#FFF;margin:40px 0;padding:40px 50px 120px;}
.category{text-align:center;width:70%;position:relative;left:15px;top:-130px;}
.category img{width:100%;}
.category2{text-align:center;width:70%;position:relative;left:100px;top:-100px;}
.category2 img{width:100%;}
.category3{text-align:center;width:70%;position:relative;left:15px;top:-70px;}
.category3 img{width:100%;}
.category4{text-align:center;width:70%;position:relative;left:100px;top:-40px;}
.category4 img{width:100%;}
.category5{text-align:center;width:70%;position:relative;left:15px;top:-16px;}
.category5 img{width:100%;}
.send img{width:75%;}
.send{margin-left:15px;font-size:15px;}
.send2{position:relative;top:-100px;text-align:right;margin-right:15px;}
.send2 img{width:160px;}
.sendbtn{text-align:center;padding-bottom:40px;}
.btn{background:#a3beca;color:#FFF;text-decoration:none;width:300px;padding:16px 80px;text-align:center;margin-top:30px;}
.sozai{background:#141c27;color:#FFF;margin-top:40px;}
.sozai h2{font-size:18px;}
.sozai p{margin-bottom:50px;}
.komeko{width:150px;position:relative;left:223px;top:-22px;}
.logomark{text-align:center;}
.logomark img{width:150px;padding-top:40px;}
.riceimg{width:100%;}
.sozai h3{font-size:18px;text-align:left;margin:0 0 0 15px;}
.sozei_eng{font-size:32px;margin:0 0 0 15px;}
.shopimg,.donutimg{width:100%;}
.shopback{background:#141c27;color:#FFF;}
.shopinfo{background:#1e3b63;padding:20px 50px;width:60%;text-align:center;margin:0 auto;position:relative;top:-40px;}
footer{background:#141c27;color:#FFF;padding:20px 27px;margin-top:-2px;}
footer h4{text-align:left;}
footer li{padding-left:10px;}
.sns{text-align:center;}
.sns img{width:30px;margin:5px;}
footer p{font-size:12px;text-align:center;}
.img100{width:100%;}
.img80{width:80%;}
.choutitle{padding:0 30px;}
.cacao{margin-bottom:0 !important;padding-bottom:80px;}
.milkimg{text-align:right;margin-right:15px;}
.kikaiimg{margin-left:15px;}
.parallax_box{display:none;}
.hassakusp{width:100%;}
.shopsp{width:100%;}
.beige{background:#f6f4ef;padding:20px 15px;}
.colombeblanchecolor{background:#a3beca;padding:20px 15px;color:#FFF;}
.grey{background:#ececec;padding:20px 15px;}
.dt_kogasi{width:200px;position:relative;top:-40px;}
.dt_yakusima{width:140px;position:relative;top:-260px;left:220px;}
.dt_earlgrey{width:140px;position:relative;top:-50px;}
.dt_coconut{width:180px;position:relative;top:-260px;left:177px;}
.dt_coconutcocoa{width:180px;position:relative;top:-36px;left:177px;}
.dt_donutgift{width:210px;margin:0 auto;padding-top:40px;}
.donut_lineup{margin-bottom:40px;}

/*CSSアニメーション 背景色が伸びて出現 共通*/
.bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }
  to {
    opacity:1;  
  }
}

/*中の要素*/
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:500ms;
  animation-delay: 0.5s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
 }
}

/*--------- 左から --------*/
.bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}

/*--------- 右から --------*/
.bgRLextend::before{
  animation-name:bgRLextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #a3beca;/*伸びる背景色の設定*/
}
@keyframes bgRLextendAnime{
  0% {
    transform-origin:right;
    transform:scaleX(0);
  }
  50% {
    transform-origin:right;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:left;
  }
  100% {
    transform-origin:left;
    transform:scaleX(0);
  }
}

/*--------- 下から --------*/
.bgDUextend::before{
  animation-name:bgDUextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgDUextendAnime{
  0% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
  50% {
    transform-origin:bottom;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:top;
  }
  100% {
    transform-origin:top;
    transform:scaleY(0);
  }
}

/*--------- 上から --------*/
.bgUDextend::before{
  animation-name:bgUDextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}

@keyframes bgUDextendAnime{
  0% {
    transform-origin:top;
    transform:scaleY(0);
  }
  50% {
    transform-origin:top;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:bottom;
  }
  100% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
}

//じわっと出てくる
.blurcontainer{
	width: 500px;
	max-width: 100%;
}
.logo{
  width: 100%;
	filter: blur(10px);
	animation: blur-anim2 1.5s linear forwards;
}

@keyframes blur-anim2 {
	100% {	filter: blur(0); }
}

@media screen and (min-width: 768px) {
  .logotop img{top:580px;}
  .category2{left:228px;}
  .send2 img{width:auto;}
  .komeko{width:auto;left:442px;}
}

@media screen and (min-width: 1024px) {
  .mainimg{width:50%;margin:0 0 0 auto;}
  .mainback{background:#a3beca;}
  .copy{position:absolute;width:65%;top:50%;}
  .logotop img{top:70px;}
  h1{text-align:left;font-size:36px;color:#FFF;padding-left:40px;}
  .copy_pc{display:block;position:absolute;width:70%;text-align:center;margin:0 auto;top:40%;}
  .copy{display:none;}
  .title_sp{display:none;}
  .title_pc{display:block;}
  .subtitle{font-size:32px;}
  .choutitle{width:720px;margin:90px auto 0 auto;}
  .donuttitle{width:320px;margin:90px auto 0 auto;}
  .products{width:800px;margin:0 auto;}
  .products li{padding:16px;}
  .lineup,.gentei{font-size:36px;}
  .choup,.genteip{width:750px;margin:0 auto;}
  h4{font-size:28px;}
  .concept h2{font-size:40px;}
  .concept p{font-size:24px;width:745px;margin:0 auto;}
  .category{top:-77px;font-size:24px;}
  .category2{top:-40px;right:-385px;font-size:24px;left:auto;}
  .category3{top:0;font-size:24px;}
  .category4{top:32px;right:-385px;font-size:24px;left:auto;}
  .category5{top:70px;font-size:24px;left:auto;}
  .sendsection{margin:100px auto;width:860px;}
  .sendsection h3{font-size:36px;}
  .send2 img{width:50%;}
  .sozai h2{font-size:36px;}
  .sozai_position{display:flex;width:917px;margin:0 auto;}
  .sozai_left{width:70%;order:1;}
  .sozai_right{width:30%;order:2;}
  .sozei_eng{font-size:70px;}
  .sozai h3{font-size:36px;}
  .komeko{width:100%;left:200px;}
  .milk_position{display:flex;width:917px;margin:100px auto;}
  .milkp{width:50%;order:1;}
  .milkimg{width:50%;order:2;}
  .img80{width:auto;}
  .kikai_position{display:flex;width:917px;margin:100px auto;}
  .kikaiimg{width:33%;order:2;}
  .kikaiimg2{width:33%;order:3;}
  .kikaip{width:44%;order:1;}
  .egg_position{display:flex;width:917px;margin:100px auto;}
  .eggp{width:60%;}
  .choco_position{display:flex;width:917px;margin:100px auto 0;}
  .chocop{width:55%;}
  .chocoimg{width:70%;}
  .chocoimg{width:auto;padding:24px;}
  .shopback{padding-top:100px;}
  .shopinfo{width:30%;}
  .shopinfo h2{font-size:36px;}
  .sitemap{width:916px;margin:0 auto;}
  .hassakusp{display:none;}
  .shopsp{display:none;}
  .donutmain{opacity:0.7;}
  .donutimg{width:auto;}
  .donutline{width:1038px;margin:0 auto;}
  .donut_ex{background:#FFF;width:400px;padding:15px 40px 40px;color:#000;position:relative;top:-100px;left:620px;}
  .dt_kogasi{width:380px;top:-80px;}
  .dt_yakusima{width:225px;top:-100px;left:-60px;}
  .dt_earlgrey{width:232px;top:-100px;}
  .dt_coconut{width:280px;top:-543px;left:30px;}
  .dt_coconutcocoa{width:317px;top:-66px;left:20px;}
  .size_ex{width:1038px;margin:0 auto 50px auto;}
  .dt_donutgift{width:370px;margin-bottom:30px;}
  .textcenter{text-align:center;}
  .dtitle{font-size:28px;}

  /*パララックス画像*/
  .parallax_box{display:block;}
  .parallax_content{
    display: flex;
    height: 100%;
    padding: 100%;
    justify-content: center;
    align-items: center;
  
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .img_bg_01{
    background-image: url('../img/chou_ice.webp');
  }
  .img_bg_02{
    background-image: url('../img/shop.webp');
  }
}