*{margin: 0;padding: 0;}
.fs-l-main{padding: 0;}
.wrapper{padding-right: calc(50vw - 50%);padding-left: calc(50vw - 50%);display: inline-block;font-family: 'Noto Serif JP', serif;color: #fff;} 

/*背景色*/ 
.section1{margin-right: calc(50% - 50vw);margin-left: calc(50% - 50vw);background-color: #002F4E;}
.section2{margin-right: calc(50% - 50vw);margin-left: calc(50% - 50vw);background-color: #27475A;}
.section3{margin-right: calc(50% - 50vw);margin-left: calc(50% - 50vw);background-color: #406A87;}
.section4{margin-right: calc(50% - 50vw);margin-left: calc(50% - 50vw);background-color: #13517A;}   


/*セクションタイトル*/
.ttl-lead{text-align: center;padding: 40px 0;}
.ttl-lead img{width:35%;}
/* 960px以上に適用されるCSS（PC用） */  
@media screen and (min-width: 960px) {
/*.ttl-lead{padding: 60px 0px 70px;}*/
.ttl-lead img{width:20%;}}

/*各グループページストーリー*/   
.ttl-lead-story{text-align: center;padding: 40px 0;}
.ttl-lead-story img{width:70%;}
/* 960px以上に適用されるCSS（PC用） */  
@media screen and (min-width: 960px) {
.ttl-lead-story{padding: 30px 0px 40px;}
.ttl-lead-story img{width:40%;}}   
    
    
/*メインプロダクト*/
.container{width: 100%;margin: 0 auto;}
.area01{display: flex;flex-direction: column;align-items: center;padding: 20px;}
.area02{display: flex;flex-direction: column-reverse;align-items: center;padding: 20px;}
.contents-item{width: 100%;padding: 10px;text-align: center;}
.subttl-lead{width: 80%; margin: 0 auto;}
.contents-item h3{font-size: 20px;font-weight: bold;}   
.contents-item p{font-size: 14px;line-height: 1.4;padding: 14px;}     
/* 960px以上に適用されるCSS（PC用） */
@media screen and (min-width: 960px) { 
.container{width: 80%;}
.area01,.area02{display: flex;flex-direction: row;justify-content: center;padding: 20px;margin: 0 auto;} 
.contents-item{width: 50%;padding: 10px;} 
.subttl-lead{width: 50%;}
.contents-item h3{font-size: 22px;}
.contents-item p{font-size: 18px;line-height: 1.6;}
}
.txt-content{font-size: 14px;line-height: 1.6;padding: 14px;text-align: center;}   
@media screen and (min-width: 960px){
.txt-content{font-size: 18px;line-height: 1.6;}}
    
/*ボタン設定*/  
.top-btn{list-style: none; padding-left: 0;display: flex;justify-content: center;}
.p-btn{padding: 0 4px;box-sizing: border-box;}
.p-btn a{appearance: none;font-family: inherit;display: inline-block;
min-width: 100px;border: 0;border-radius: 20px;background: #C9A030;color: #fff;padding: 10px 20px;font-size: 1.4rem;text-decoration: none;cursor: pointer;transition: 0.3s ease-out;
&:hover{background: #AB8622;}}    
.p-btn02 a{appearance: none;font-family: inherit;display: inline-block;
min-width: 300px;border: 0;border-radius: 20px;background: #C9A030;
color: #fff;padding: 10px 20px;font-size: 1.4rem;text-decoration: none;cursor: pointer;transition: 0.3s ease-out;margin-top: 10px;
&:hover {background: #AB8622;}}      
    
/*関連商品*/ 
.flexbox{display: flex;flex-wrap:wrap;text-align: center;justify-content: center;gap: 10px 10px;/*縦10px,横10pxの余白指定*/
margin-bottom: 40px;}
.flex-item {width: 45%;}
.flex-item-option{width: 45%;}
.common-txt{color: #fff;font-size: 14px;}
.sns-list{list-style: none; padding-left: 0;display: flex;justify-content: center;margin-bottom: 60px;}   
.sns-item{width: 15%;margin: 0px 10px;}
/* 960px以上に適用されるCSS（PC用） */  
@media screen and (min-width: 960px) {
.flexbox{display: flex;flex-wrap:wrap;text-align: center;gap: 20px 30px;/*縦20px,横30pxの余白指定*/margin-bottom: 40px;}
.flex-item {width: 25%;}
.flex-item-option{width: 20%;}
.common-txt{font-size: 20px; }  
.sns-item{width: 5%;margin: 0px 10px;}}

/*画像バナー差し込み*/
.bg-image{display: flex;justify-content: center;margin-right: calc(50% - 50vw);margin-left: calc(50% - 50vw);background-color: #061c34;margin-top: 0px;}
.bg-image02{display: flex;justify-content: center;margin-right: calc(50% - 50vw);margin-left: calc(50% - 50vw);background-color: #061c34;margin-top: 0px;flex-direction: column;align-items: center;}

.bg-image2{display: flex;justify-content: center;margin-right: calc(50% - 50vw);margin-left: calc(50% - 50vw);background-color: #002F4E;}

.store-bnr{display: flex;justify-content: center;margin-right: calc(50% - 50vw);margin-left: calc(50% - 50vw);background-color: #13517A;}
/* 960px以上に適用されるCSS（PC用） */  
@media screen and (min-width: 960px) {
.bg-image{display: flex;justify-content: center;margin-right: calc(50% - 50vw);margin-left: calc(50% - 50vw);background-color: #061c34;margin-top: 800px;/*560px*/}

.bg-image02{display: flex;justify-content: center;margin-right: calc(50% - 50vw);margin-left: calc(50% - 50vw);background-color: #061c34;margin-top: 55px;/*560px*/flex-direction: column;align-items: center;}}

/*ティーウェア画像バナー*/
.teaware-bnr{margin: 0 auto;width: 80%;margin-bottom: 60px;margin-top: 40px;}

/*改行*/
.sp_br{display: none;/*改行タグ無効*/}
@media screen and (max-width: 960px) {
.sp_br{display: block; /*960px未満改行タグ有効*/}}

/*TOPカルーセル*/
.top_carousel {
  width: 100%;
  position: relative;
  padding-bottom: 29.81949%;/* (826/2770)*100% */
}
.sp_img {
    display: none !important;
}
.pc_img {
    display: block !important;
}
@media screen and (max-width: 960px) {
  .top_carousel {
    width: 100%;
    position: relative;
    padding-bottom: 111.111111%;/* (1000/900)*100% */
  }
  .sp_img {
    display: block !important;
  }
  .pc_img {
      display: none !important;
  }
}
.top_carousel img { 
  animation: fade 9s infinite;/*合計時間*/
  -webkit-animation: fade 9s infinite;
  -moz-animation: fade 9s infinite;
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
@keyframes fade {
  0% {opacity: 0;}
  30% {opacity: 1;}
  35% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 0;}
}
@-webkit-keyframes fade {
  0% {opacity: 0;}
  30% {opacity: 1;}
  35% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 0;}
}
@-moz-keyframes fade {
  0% {opacity: 0;}
  30% {opacity: 1;}
  35% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 0;}
}
.top_carousel img:nth-of-type(1) {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
}
.top_carousel img:nth-of-type(2) {
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
}
.top_carousel img:nth-of-type(3) {
    animation-delay: 6s;
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
}
.concept picture img {
  vertical-align: bottom;
}