@charset "UTF-8";
/* 
 style info : デザインスタイル

2021/06


 */
 


/*----------------------------------------------------
	mainvisual
----------------------------------------------------*/
/*@media screen and (min-width:1181px) {
.mainvisual h1 img{
	width: 1200px;
	margin: auto;
	}
}
@media screen and (max-width:1180px) {
.mainvisual h1 img{
	width: 100%;
	margin: auto;
	}
}*/
.mainvisual{
    /*   height: 900px;*/
      background:#13322B;
      position: relative;
      padding-bottom:20px;
   }
.mainvisual h1 img{
	width: 80%;
	margin: auto;
	}
    @media screen and (max-width:1180px) {
        .mainvisual h1 img{
            max-width: 100%;
            margin: auto;
            }
    }
    @media screen and (max-width:768px) {
        .mainvisual h1 img{
            width: 100%;
            margin: auto;
            }
        .mainvisual{
           padding-bottom: 0;
        }
     
    }
    

.slick-box li{
  /*  padding-bottom: 80px;*/

}
.slick-box li.mv01{
    background: url(../img/main01_bg.jpg);
    background-size:cover;
}
.slick-box li.mv02{
   background:#13322B;
}
.slick-box li.mv03{
    background: url(../img/main03_bg_pc.jpg);
    background-position: center;
    background-size:cover;
}
.slick-box li.mv04{
    background: url(../img/main04_bg_pc.jpg);
    background-position: top;
    background-size:cover;
}
.slick-box li.mv05 {
    background: url(../img/main01_bg.jpg);
    background-size:cover;
}

@media screen and (max-width: 768px) {
    .slick-box li.mv03{
        background: url(../img/main03_bg_sp.jpg);
        background-size:cover;
    }
    .slick-box li.mv04{
        background: url(../img/main04_bg_sp.jpg);
        background-size:cover;
    }
}

/*2022.10　メインビジュアル追加*/

.mainvisual .mv00　h1 img{
	width: 100%;
	margin: auto;
	}
.slick-box li.mv00{
    background: url(../img/main00_bg.png);
    background-size:cover;
}


/*ドットの調整*/
.slick-dots {
	position: relative;
	z-index: 3;
    text-align:center;
	margin:-80px 0 0 0;/*ドットの位置*/
}
.slick-dots li {
    display:inline-block;
	margin:0 5px;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;

    opacity: .5;
    color: #fff;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.slick-dots li.slick-active button:before
{
    opacity: 1;
    color:#fff;
}


.mainvisual .snslogo {
    position:absolute;
    right: 10px;
    top: 20px;
}
.mainvisual .snslogo img{
 width: 40px;
}
.mainvisual .snslogo .x-icon img {
    width: 25px;
}
.mainvisual .snslogo .x-icon {
    margin-bottom: 10px;
}
/*スクロールダウン全体の場所*/
.scrolllogo{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	right:15px;
	top:300px;
    /*全体の高さ*/
	height:76px;
}

/*Scrollテキストの描写*/

/* 線の描写 */
.scrolllogo::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height:70px;
	background: #fff;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.8s cubic-bezier(1, 0, 0, 1) infinite;
    
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
    0% {
        transform: scale(1, 0);
        transform-origin: 0 0;
      }
      50% {
        transform: scale(1, 1);
        transform-origin: 0 0;
      }
      50.1% {
        transform: scale(1, 1);
        transform-origin: 0 100%;
      }
      100% {
        transform: scale(1, 0);
        transform-origin: 0 100%;
      }
}

/*----------------------------------------------------
	コンテンツ デザイン
----------------------------------------------------*/
#contents{
    background: #fff;
    padding-top: 60px;
    padding-bottom:40px;
    color: #13322B;
}

.contents02{
    background:#13322B;
}
.contents03{
    padding-bottom: 20px;
}
/*共通*/
section{
	padding:40px 0 20px;
 }  
 h2{
    text-align: center;
}
h3{
	
  }
  @media screen and (min-width: 769px) {
.flexbox{
    display: flex;
    justify-content: space-around;
}
}

.flexbox.spflex{
        display: flex;
        justify-content: space-around;
}

@media screen and (max-width: 768px) {
    #contents{
        padding-top:20px;
    }
    section{
        padding:20px 0 10px;
     } 
}
  

/*ショップリンク*/
.shoplink.pc{
    margin-bottom: 60px;
}
.shoplink.pc li {
    display: inline-block;
    width:180px;
    margin: 0 10px;
}
.shoplink.pc li a{
    display:block;
    background:#13322B;
    width: 100%;
    padding: 6px 0;
    text-align: center;
    color: #fff;
}
.shoplink.pc li:last-of-type a{
    display:block;
    background:#899895;
    width: 100%;
    padding: 6px 0;
    text-align: center;
    color: #fff;
}

.shoplink.foot{
    margin-bottom: 40px;
}
.shoplink.foot li {
    display: inline-block;
    width: 180px;
    margin: 0 10px;
}
.shoplink.foot li a{
    display:block;
    background:#13322B;
    width: 100%;
    padding: 6px 0;
    text-align: center;
    color: #fff;
}
.shoplink.foot li:last-of-type a{
    display:block;
    background:#899895;
    width: 100%;
    padding: 6px 0;
    text-align: center;
    color: #fff;
}
@media screen and (max-width: 768px) {
    .shoplink.foot li {
        width: 70%;
        display: block;
        margin:15px auto 0;
    }
}
.shoplink.sp{
    margin-bottom: 40px;
}
.shoplink.sp li {
    width: 70%;
    margin:15px auto 0;
}
.shoplink.sp li a{
    display:block;
    background:#fff;
    width: 100%;
    padding: 6px 0;
    text-align: center;
    color: #13322B;
}
.contents01 .shoplink.sp{
    margin:10px 0 20px;
}
.contents01 .shoplink.sp li a{
    background:#13322B;
    width: 100%;
    padding: 6px 0;
    text-align: center;
    color: #fff;
}
.shoplink.less1080{
    margin-bottom: 40px;
}
.shoplink.less1080 li {
    width: 70%;
    margin:15px auto 0;
}
.shoplink.less1080 li a{
    display:block;
    background:#fff;
    width: 100%;
    padding: 6px 0;
    text-align: center;
    color: #13322B;
}
.contents01 .shoplink.less1080{
    margin:40px 0 20px;
}
.contents01 .shoplink.less1080 li a{
    background:#13322B;
    width: 100%;
    padding: 6px 0;
    text-align: center;
    color: #fff;
}

/*製品情報
----------------------------------------------------*/

.products h2 {
    margin-bottom: 40px;
}

@media screen and (min-width: 769px) {
.products h2 img{
width: 293px;
}
#products .flexbox {
    justify-content: space-between;
}
}
@media screen and (max-width: 768px) {
    .products h2 img{
    width: 67%;
    }
    }

.introduction {
    text-align: left;
    margin-top: 80px;
}
.introduction h3{
    margin: 30px 0 20px;
}


@media screen and (min-width: 769px) {
    .introduction p{
        font-size: 2.2rem;
        line-height:1.8;
        font-weight: bold;
    }
.introduction.flexbox{
    justify-content: space-around;
}

.introduction h3 img{
    width: 408px;

}
.introduction figure img{
    width: 480px;

}
}
@media screen and (max-width: 768px) {
    .introduction h3 img{
        width: 72%;
    
    }
    .introduction > div {
        padding: 0 15px;

    }
    .introduction figure{
        margin-top: 30px;
    }
}

.informedsports_wrap{
    margin-top: 90px;
}
.informedsports_wrap h3{
    font-size: 2.0rem;
}
.informedsports p{
    font-size: 1.4rem;

}
@media screen and (min-width: 769px) {
.informedsports{
    width:690px;
    margin:8px auto 90px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    padding: 5px 20px;
    justify-content: space-around;
    align-items: center;
    }

    .informedsports p{
        text-align: left;
        width: 60%;
    }
}

@media screen and (max-width: 768px) {
    .informedsports_wrap{
        margin-top:50px;
    }
    .informedsports{
        margin:5px 15px 50px;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        padding: 15px 30px;
        }
        .informedsports p{
            text-align: left;
        }
        .informedsports br{
            display: none;
        }
      
    }


.itembox{
    margin-top: 60px;
}
.itembox.Tshirt{
    margin-top: 80px;
}
.itemsummary {
    text-align: left;
}
.itemsummary h4{
    font-size: 2.1rem;
}
.itemsummary h4 sup {
    font-size: 1.3rem;
    vertical-align: top;
}
.itemsummary h4 span{
    background: linear-gradient(transparent 50%,#A6DCCE 50%);
}
.itemsummary figure{
    margin-top: 30px;
}
.itemsummary p{
    margin-top: 10px;
}
.itemsummary dl{
    margin-top:20px;
}
.itemsummary .btn{
    margin-top: 20px;
}

@media screen and (min-width: 769px) {
   .itemimg,.itemsummary{
    width: 45%;
   }
  .Tshirt .itemimg{
    width: 70%;
   }
   .Tshirt .itemsummary{
    padding-top: 50px;
   }
.itemsummary img{
   width: 430px;
}
.powdersummary{
    display: flex;
    justify-content: space-around;
}
.powdersummary .box01 {
    width: 55%;
}
.powdersummary .box02 {
    width: 45%;
}
.powdersummary .box02 {
    padding-top: 40px;
    text-align: right;
}
.powdersummary .box02 img{
    width:175px;
}
}
@media screen and (max-width: 768px) {
  .itemsummary{
    padding: 0 15px;
  }
  .powdersummary .box01 .sp{
    width:70%;
    margin:20px auto 0;
}
  .Tshirt .itemimg{
      margin-bottom: 15px;
  }
}
.comingsoon img{
    width: 150px;
    margin-top: 20px;
}

/*モーダル共有*/
/*fade*/
.mfp-fade.mfp-bg{
	opacity: 0;
    transition: all 0.3s ease-out;
    z-index:3;
}
.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing{
	opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content{
	opacity: 0;
	transition: all 0.3s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content{
	opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content{
	opacity: 0;
}
/*レイアウト*/
.modalinner{
    margin:20px;
}
@media screen and (min-width: 769px) {
.modalinner.flexbox,.modalinner .flexbox{
    justify-content: space-around;
}
.modalinner.flexbox > div,.modalinner .flexbox > div{
    width: 45%;
}
}
@media screen and (max-width: 768px) {
    .modalinner{
        margin:10px;
    }
}
/*モーダル-商品詳細*/
.modalbox{
    background: #fff;
    margin: auto;
    z-index:9999;
    padding-bottom: 15px;
}
@media screen and (min-width: 769px) {
    .modalbox{
        width: 860px;
      /*  height:800px;*/
    }
}
.itemdetail h4{
    position: relative;
background: #13322B;
color: #fff;
text-align: center;
padding: 5px 0;
}
.itemdetail h4 a{
    position: absolute;
    right:5px;
    top: 1px;
    color: #fff;
    font-size: 2.2rem;;
}
.itemdetail h4 a img{
    width:20px;
}
.itemdetail dl{
    font-weight: bold;
}
.itemdetail h5{
    background: #13322B;
    padding: 5px 8px;
    color: #fff;
    display: inline-block;
    margin-top: 15px;
    margin-bottom: 5px;
}
.itemdetail h6{
   border-top:1px solid #13322B;
   border-bottom:1px solid #13322B;
    padding: 5px;
    margin:20px 0 5px;
    font-weight: normal;
}
.itemdetail h6+p{
    font-size: 1.5rem;
}
.itemdetail p .vitamin{
    font-size: 1.1rem;
}
.itemdetail p .meyasu{
    font-size: 1.4rem;
    border-bottom:1px solid #13322B;
    padding:3px 0;
    margin: 5px 0;
    display: block;
}
.itemdetail .itemtext{
    padding: 10px 20px;
    font-size: 1.5rem;
}
.itemdetail .itemtext p:first-of-type{
    margin-bottom: 10px;
}
.itemdetail .itemspec{
    font-size: 1.4rem;
}
.itemdetail .itemspec p{
    margin-bottom: 8px;
}
.itemdetail table{
    margin: 20px 0 5px;
}
.itemdetail th{
    border-top:1px solid #13322B;
    border-bottom:1px solid #13322B;
     padding:5px;
     white-space: nowrap;
}
.itemdetail th {
	width: 20%;
    text-align: center;
    font-size: 1.4rem;
}
.itemdetail td{
	padding: 3px;
	width: 20%;
    height: 30px;
    text-align: center;
    font-size: 1.4rem;
}
@media screen and (max-width: 768px) {
    .itemdetail figure{
        margin-top: 20px;
        text-align: center;
    }
}
/*@media screen and (min-width: 769px) {
.mfp-wrap{
    position: absolute !important;

}
}
*/
/*tommorow
----------------------------------------------------*/
.tomorrow{
	width: 100%;
    height:350px;
    margin-top: 80px;
}
.tomorrow h2{
	padding: 0 15px;
	margin: 0 auto;
	line-height: 350px;
	text-align: center;
}

@media screen and (min-width: 769px) {
.tomorrow{
	width: 100%;
	height:350px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-attachment: fixed;
    background-size: cover;
 
}
.bgimg{
	background-image: url(../img/tomorrow_bg.jpg);
}
}

@media screen and (max-width: 768px) {
 
    .bgimg{
        background-image: url(../img/tomorrow_bg.jpg);
        background-size: cover;
        background-position: center;
    }
    
}
/*about
----------------------------------------------------*/
.about{
    color: #fff;
}

.about h2 {
    margin-bottom: 40px;
}
.about h3 {
    margin-bottom: 40px;
}
.sec01,.sec02{
    padding-bottom:80px;

}

@media screen and (min-width: 769px) {
.about h2 img{
width: 266px;
}
}
@media screen and (max-width: 768px) {
    .about h2 img{
    width: 67%;
    }
    }
  
    @media screen and (min-width: 769px) {
        .sec01detail{
            padding: 0 40px;
            justify-content: center;
        }
        .sec01detail figure{
            width: 480px; 
            margin-right:40px;
        }
       
    }
    @media screen and (max-width: 768px) {
    .sec01detail{
        padding: 0 20px;
    }
    .sec01detail figure{
        margin-bottom: 20px;
    }
    .sec01detail ul{
        width: 80%;
        margin: auto;
    }
}
    .sec01detail li{
        text-align: left;
        padding-left: 30px;
        margin-bottom: 15px;
        background: url(../img/about_num01.svg) no-repeat left top;
        background-size:10px;
        font-size: 1.7rem;
    }
    .sec01detail li:nth-of-type(2){
        background: url(../img/about_num02.svg) no-repeat left top;
        background-size:19px;
    }
    
    /*2022.9 about改修*/
  
.sec02box li{
    text-align: left;
}
.sec02box_item {
    display: flex;
    }
    .sec02box_item figure{
        width: 150px;
        margin-right:5px;
    }
    .sec02box_itemtxt {
        text-align: left;
        padding-top: 30px;
    }
    .sec02box_itemtxt p{
        font-size: 2.0rem;
        }
    .sec02box_itemtxt p:nth-of-type(2){
    font-size: 2.8rem;
    font-weight: bold;
    }
    @media screen and (min-width: 769px) {
        .sec02detail_01{
          margin-bottom: 30px;
          display: flex;
        }  
        .sec02box{
          width: 50%;
          box-sizing: border-box;
          padding-left:60px;
        }
        .sec02box:first-of-type{
          padding-left:90px;
          border-right:1px dashed #fff;
        }
        .sec02box ul{
          padding-bottom: 30px;
          margin-bottom: 20px;
          background: url(../img/about_arrow.svg) no-repeat 35% bottom;
          background-size: 60px;
        }
        .sec02box li{
          font-size: 1.7rem;
      }
      }
      
    @media screen and (max-width: 768px) {
      
        .sec02box ul{
            padding-bottom: 30px;
            margin-bottom: 20px;
            background: url(../img/about_arrow.svg) no-repeat center bottom;
            background-size:50px;
          }
          .sec02box_item{
            margin-bottom: 50px;
          }
          .sec02box_item figure{
            width: 140px;
            margin-left:10px;
        }
    }
   

    .sec02detail_02 .endcopy{
        background: #0F946F;
        padding: 20px 10px;
        text-align: center;
        font-size: 2.5rem;
        margin: auto;
        margin-top: 20px;
    }
@media screen and (min-width: 769px) {
    .sec02detail_02 figure{
        width: 730px;
        margin: auto;
        margin-bottom: 5px;
        margin-top:40px
    }
    .sec02detail_02 .endcopy{
        width: 730px;
        margin-top:40px;
    }
}
@media screen and (max-width: 768px) {
    .sec02detail_02 figure{
        width:68%;
        margin: auto;
        margin-bottom:16px;
    }
    .sec02detail_02 p {
        text-align: left;
        padding: 0 5%;
    }
}

/**/

.athlete .inner,.voice .inner,.teams .inner{
    padding: 0 5%;
    }


/*athlete
----------------------------------------------------*/
.athlete{
    padding:90px 0 30px;
}

.athlete h2 {
    margin-bottom: 40px;
}
.athlete dl{
    text-align: left;
}
.athlete dd {
font-feature-settings:"palt" 1;
letter-spacing:0.07em;
line-height: 1.7em;
}
.athlete dd p{
    margin-top: 20px;
}
.athlete dd p a{
    color: #009C74;
    padding-left: 8px;
    text-decoration: underline;

}
@media screen and (min-width: 769px) {
    .athlete h2 img{
    width: 820px;
    }
    .athlete dl{
        width: 900px;
        margin: auto;
    }
    .athlete dt{
        width:24%;
        font-size: 2.5rem;
        font-weight: bold;
    }
    .athlete dd{
        width: 65%;
    }
    }
    @media screen and (max-width: 768px) {
        .athlete{
            padding:40px 0 20px;
        }
        
        .athlete h2 img{
        width: 71%;
        }
        .athlete dl{
            margin: auto;
        }
        .athlete dt{
            font-size: 2.1rem;
            font-weight: bold;
            margin-bottom: 10px;
        }
        }
 @media screen and (min-width: 769px) {
            .partner {
                width:  1146px;
                margin: auto;
                }
            }
.partner {
    margin-top: 80px;
}
.partner > h3{
    border: solid 1px #ACB7B5;
    padding: 8px 0;
    text-align: center;
    font-size: 2.1rem;
}
.partner h3 + p{
    margin-top: 40px;
}
    @media screen and (max-width: 768px) {
        .partner h3 + p{
          text-align: left;
          padding: 0 5%;
        }
    }
    .sa_wrap{
       /* width: 1116px;*/
       width: 1146px;
        margin:60px auto 50px;
        padding: 0 40px 4px;
        background: url(../img/sa_box_bg_left.png) left top no-repeat, url(../img/sa_box_bg_right.png)right top no-repeat;
        background-size:16.55px,16.1px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        box-sizing: border-box;
    }
    .sa_wrap::after {
        content: "";
        width: 250px;
    }
    .sa_box {
        width:250px;
        height:396px;
        background:#d0d6d5;
    }
    /*nocontents*/
    .sa_box.pc {
        background:#fff;
        border: 1px solid #acb7b5;
    }
    .sa_box.pc img {
        width:250px;
        height: 396px;
    }
    /*nocontents end*/
    .sa_box:nth-of-type(n+5){
        margin-top:20px;
    }
    .sa_box h3 {
        text-align: left;
        padding: 8px 5px 0px;
    }
    .sa_box h3 img{
        height: 34px;
    }
    .sa_box_img{
        width:250px;
        height:230px;
        overflow: hidden;
        position: relative;
        display: block;
    }
    .sa_box_img p{
        width:140px;
        position: absolute;
        left:5px;
        top: 0;
        z-index:999;
    }
    .sa_box_img p.small{
        width:40px;
    }
   .imghover{
       width: 100%;
       transition-duration: 0.3s;
}
.imghover:hover{
  transform: scale(1.2);
  transition-duration: 0.3s;
}
.sa_name{
    background:#d0d6d5;
    padding:8px 10px 15px;
    z-index:2;
    text-align: left;
    color:#13322B;
    box-sizing:border-box;
    height: 115px;
}
.sa_name h4{
    font-size: 2.7rem;
}
.sa_name p{
    font-size: 1.4rem;
    line-height: 1.3;
    font-feature-settings:"palt" 1;
}
@media screen and (max-width: 768px) {
    .sa_wrap{
        width:90%;
        margin:50px auto 40px;
        padding:0;
        background:none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .sa_box {
        width:48%;
        height:255px;
    }
    .sa_wrap::after {
        content: "";
        width:48%;
    }
    .sa_box:nth-of-type(n+3){
        margin-top:24px;
    }
    .sa_box h3 {
        padding: 5px 5px 0;
    }
    .sa_box h3 img{
        height: 29px;
    }
    .sa_box_img{
        width:100%;
        height:130px;
        overflow: hidden;
        position: relative;
        display: block;
    }
    .sa_box_img p{
        width:100px;
        top: -6px;
    }
    .sa_box_img p.small{
        width:30px;
    }
    .sa_name{
        height:95px;
    }
    .sa_name br{
        display: none;
    }
    .sa_name h4{
        font-size: 2.2rem;
    }
    .sa_name p{
        font-size: 1.2rem;
    }
}
@media screen and (max-width:320px) {
    .sa_name h4{
        font-size: 1.8rem;
    }
}

/*モーダル-アンバサダー*/
.modalbox2{
    background: #fff;
    margin: auto;
    z-index:9999;
    padding:20px;
}
@media screen and (min-width: 769px) {
    .modalbox2{
        width: 880px;
       /* height:580px;*/
    }
}
@media screen and (max-width: 768px) {
    .modalbox2{
        padding:10px;
    }
}
.sadetail figure img{
    width: 345px;
}
.sadetail h4{
    margin-top:10px;
}
.sadetail h4 img:first-of-type{
    width:235px;
}
.sadetail h4 img:nth-of-type(2){
    height: 55px;
}
.sadetail h5{
    font-size: 3.1rem;
}
.sadetail h5 span{
    font-size: 2.1rem;
}
.sadetail h5 span.small{
    font-size: 1.9rem;
}
.sadetail h6{
    font-size: 1.8rem;
    margin-top: 30px;
}
.sadetail p{
    font-size: 1.5rem;
    font-feature-settings:"palt" 1;
}
@media screen and (min-width: 769px) {
    .sadetail h4 img:first-of-type{
        margin-bottom: 15px;
    }
}


@media screen and (max-width: 768px) {
    .sadetail h4 img:first-of-type{
        margin-bottom: 5px;
    }
    .sadetail figure{
        margin:20px 0 30px;
    }
    .sadetail h5{
        font-size:2.5rem;
    }
    .sadetail h5 span,.sadetail h5 span.small{
        font-size: 1.6rem;
    }
    .sadetail h6{
        margin-top: 15px;
    }
    .sadetail p{
        font-size: 1.4rem;
    }
    .sadetail p:last-of-type br{
        display: none;
    }
}

/*閉じるボタン調整*/
.sadetail{
    position: relative;
}

.sa_close img{
    width:37px;
}
@media screen and (min-width: 769px) {
    .sa_close{
        position: absolute;
        right:-15px;
        bottom: -100px;
    }
    }
    @media screen and (max-width: 768px) {
        .sa_close{
            position: absolute;
            right:0;
            top:0;
        }
        }

/*user voice
----------------------------------------------------*/

.voice{

}
.voice h2 {
    margin-bottom: 40px;
}
.voice h3 {
    margin: 40px 0 -20px;
    font-size: 2.1rem;
}
.voice_wrap{
    margin-top: 50px;
}
.voice_box{
    text-align: left;
    font-size: 1.4rem;
    line-height: 2;
    letter-spacing:0.03em;
    margin-bottom: 15px;
    background: #ACB7B5;
    padding: 20px;
    box-sizing: border-box;
}
.voice_box:nth-child(even){
background:#DCE0DF;
}
.voice_box p:last-of-type{
    text-align: right;
    margin-top: 10px;
    font-size: 1.2rem;
}
.voice_box:nth-of-type(1){
    background-image: url(../img/uservoice_bg_pict01.svg);
    background-repeat: no-repeat;
    background-size:83px;
    background-position:90% center ;
}
.voice_box:nth-of-type(2){
    background-image: url(../img/uservoice_bg_pict02.svg);
    background-repeat: no-repeat;
    background-size:83px;
    background-position:90% center ;
}
.voice_box:nth-of-type(3){
    background-image: url(../img/uservoice_bg_pict03.svg);
    background-repeat: no-repeat;
    background-size:121px;
    background-position:90% center ;
}
.voice_box:nth-of-type(4){
    background-image: url(../img/uservoice_bg_pict04.svg);
    background-repeat: no-repeat;
    background-size:121px;
    background-position:90% center ;
}
.voice_box:nth-of-type(5){
    background-image: url(../img/uservoice_bg_pict05.svg);
    background-repeat: no-repeat;
    background-size:81px;
    background-position:90% center ;
}
.voice_box:nth-of-type(6),
.voice_wrap.vege .voice_box:nth-of-type(2) {
    background-image: url(../img/uservoice_bg_pict06.svg);
    background-repeat: no-repeat;
    background-size:81px;
    background-position:90% center ;
}
.voice_wrap.vege .voice_box:nth-of-type(1) {
    background-image: url(../img/uservoice_bg_pict07.svg);
    background-repeat: no-repeat;
    background-size:81px;
    background-position:90% center ;
}
.voice_wrap.vege .voice_box:nth-of-type(3) {
    background-image: url(../img/uservoice_bg_pict08.svg);
    background-repeat: no-repeat;
    background-size:75px;
    background-position:90% center ;
}
@media screen and (min-width: 769px) {
    .voice h2 img{
    width: 820px;
    }
    .voice_wrap{
        width: 950px;
        margin-right: auto;
        margin-left: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .voice_box{
        width: 307px;
        height:220px;
        position: relative;
    }
    .voice_box p:last-of-type{
        position: absolute;
        right:15px;
        bottom:20px;
    }
}

@media screen and (max-width: 768px) {
    .voice h2 img{
    width:71%;
    }
}

/*support teams
----------------------------------------------------*/
.teams{

}
.teams h2 {
    margin-bottom: 40px;
}

@media screen and (min-width: 769px) {
    .teams h2 img{
    width: 820px;
    }
  
}
@media screen and (max-width: 768px) {
    .teams h2 img{
    width:71%;
    }
}
.teams_wrap{
    margin-top: 50px;
}
.teams_box{
    text-align: left;
    margin-bottom:30px;
    box-sizing: border-box;
}
.teams_box h3{
    font-size: 1.9rem;
    margin-bottom: 10px;
}
.teams_box h3 + p{
    margin-bottom: 10px;
    font-size: 1.4rem;
    line-height: 1.5;
    font-feature-settings:"palt" 1;
}
@media screen and (min-width: 769px) {
.teams_wrap{
    width: 950px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
}
.teams_box{
    width: 300px;
}
.teams_box:not(:nth-child(3n)) {
    margin-right: 25px;
}
.teams_box:nth-child(n+4) {
    margin-top: 25px;
  }
.teams__box{
    display: flex;
    flex-direction: column;
  height: 100%;
}
/*.teams_box h3{
    flex-grow: 1; 
}*/
.teams_box h3 + p{
    flex-grow: 1; 
}
}
@media screen and (max-width: 768px) {
    .teams_box img{
        width: 100%;
    }
    .teams_box:nth-child(n+2) {
        margin-top: 35px;
      }
}


/*tvcmbnr 追加　2022.5
----------------------------------------------------*/
.tvcmbnr{
    text-align: center;
    padding:0 0 80px;
}
.tvcmbnr figure{
    margin-bottom: 30px;
}

.tvcmbnr .btn_freesize{
    width: 400px;
    margin: auto;
}
@media screen and (max-width: 768px) {
    .tvcmbnr{
        padding: 0 20px 40px;
    }
    .tvcmbnr figure{
        margin-bottom: 20px;
    }
    .tvcmbnr .btn_freesize{
        width: 80%;
    }
}
.storedetail h4{
    position: relative;
background: #13322B;
color: #fff;
text-align: center;
padding: 5px 0;
}
.storedetail h4 a{
    position: absolute;
    right:5px;
    top: 1px;
    color: #fff;
    font-size: 2.2rem;;
}
.storedetail h4 a img{
    width:20px;
}
@media screen and (min-width: 769px) {
.storedetail .flexbox{
    flex-wrap: wrap;
    align-items:stretch;
    justify-content: flex-start;
}
.storedetail .flexbox>div{
    width: 50%;
}
.storedetail div:nth-of-type(n+3){
    margin-top:25px;
}
.storedetail dd br{
    display: none;
}
}
.storedetail dl{
font-feature-settings:"palt" 1;
letter-spacing:0.07em;
line-height: 1.7em;
}
.storedetail dt{
    font-weight: bold;
    font-size: 1.8rem;
}

.storedetail dd{
    font-size: 1.6rem;
    padding-left: 1.5em;
}
.storeinfo{
    width: 100%;
    font-size: 1.3rem;
    margin-top: 30px;
    text-align: right;
}
@media screen and (max-width: 768px) {
    .storedetail dt{
        font-size: 1.6rem;
    }
    .storedetail dd{
        font-size: 1.5rem;
    }
    
    .storedetail .flexbox div:nth-of-type(n+2){
        margin-top:20px ;
    }
    .storeinfo{
        font-size: 1.2rem;
        text-align: left;
    }
}

/*spmovie_bnr 追加　2022.10
----------------------------------------------------*/
.spmovie {
    text-align: center;
    padding:0 0 80px;
}
@media screen and (min-width: 769px) {
.spmovie img{
    width: 100%;
}
.spmovie_inner{
    width: 900px;
    margin: auto;
}
.spmovie_inner > figure{
    margin-bottom:12px;
}
.spmovie__inner{
    display: flex;
    justify-content: space-between;
}
.spmovie__inner figure{
    width:440px;
}
}

@media screen and (max-width: 768px) {
    .spmovie {
        padding:20px 15px 50px;
    }
  /*  .spmovie_inner{
    display: flex;
    justify-content: space-between;
    }
    .spmovie_inner > figure,.spmovie__inner{
        width: 49%;
    }
    .spmovie__inner >figure{
        margin-bottom:3px;
    }*/
}
@media screen and (max-width: 320px) {
    .spmovie__inner >figure{
        margin-bottom:0;
    }
}

/*ScrollTrigger用
----------------------------------------------------*/

.invisible {
	transition: opacity 0.5s ease;
	opacity: 0.0;
}

.visible {
	transition: opacity 0.5s ease;
	opacity: 1.0;
}

/*animate.cssの調整*/
.animated.fadeInLeft,.animated.fadeInRight{
    animation-delay:0.5s;
    animation-duration:1.2s;
    }
    @media screen and (max-width: 768px) {
        .animated.fadeInLeft,.animated.fadeInRight{
            animation-delay:0s;
            animation-duration:1.2s;
            }
    }
/*css3フェード*/
.fadeInTOP{
    animation-delay:0.5s;
animation-name: fadein;
    animation-duration: 1s;
    opacity: 0;
}
@keyframes fadein {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

.fadeInL{
    animation-delay:0.5s;
animation-name: fadeinL;
    animation-duration: 1s;
    opacity: 0;
}
@keyframes fadeinL {
from {
    opacity: 0;
    transform: translateX(-20px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}

.fadeInR{
    animation-delay:0.5s;
animation-name: fadeinR;
    animation-duration: 1s;
    opacity: 0;
}
@keyframes fadeinR {
from {
    opacity: 0;
    transform: translateX(20px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}

.flipLeft{
    animation-name: flipLeft;
    animation-delay:0.5s;
    animation-duration:0.8s;
    animation-fill-mode:forwards;
    perspective-origin: left center;
    opacity: 0;
    }
    
    @keyframes flipLeft{
      from {
       transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
         opacity: 0;
      }
    
      to {
      transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
      opacity: 1;
      }
    }
    
/*2024.04*/
.sec03detail {
    padding-bottom: 90px;
}
.sec03detail ul {
    text-align: left;
    margin: 0 auto 40px;
}
.sec03detail .intake {
    display: table;
    margin: 0 auto 40px;
}
.sec03detail dl dt {
    text-align: left;
    margin-bottom: 0.5em;
}
.sec03detail dl dd {
    display: flex;
    align-items: center;
}
.sec03detail dl dd figure {
    margin-right: 30px;
}
.sec03detail dl dd p {
    padding: 3.6em 1.5em;
    background-color: #009C74;
    color: #fff;
    border-radius: 100%;
    font-size: 2rem;
    font-weight: bold;
}
.sec03box_item {
    text-align: center;
}
.nutrients {
    text-align: left;    
    margin-bottom: 40px;
}
.nutrients p {
    font-size: 2.2rem;
    line-height:2.5;
}
.nutrients p em {
    font-weight: bold;
    font-style: normal;
}

.note {
    font-size: 1.3rem;
    text-align: right;
}
@media screen and (max-width: 768px) {


    .sec03detail dl dd {
        display: block;
    }
    .sec03detail dl dd figure {
        margin-right: 0;
    }
    .sec03detail dl dd p {
        padding: 3.85em 1em;
        width: 50%;
        margin: 20px auto;
    }
    .nutrients p {
        font-size: 2rem;
        line-height: 1.5;
    }
    .nutrients p + p {
        margin-top: 1.5em;
    }
    .sec03detail ul li {
        text-indent: -1em;
        margin-left: 1em;
    }
}