@charset "utf-8";
* {
    box-sizing: border-box;
 }
 
body{
    margin:0;
    padding:0;
    color: rgb(102, 95, 95);
    font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    
}
#logo {
    position: absolute;
    z-index: 999;
    width: 100%;
    height: 100vh;
    background-color: #40b6fab9;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  
  
  
  
  #logo img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  
  #page {
    opacity: 0.5; /* 初期状態ではページを透明にする */
  }
  
  
  

/* .line{
    width: 0%;
    height: 1px;
    background-color: #fff;
    position:fixed;
    top:50%;
    z-index: 2;
}
.up{
    width: 100%;
    height: 50%;
    background-color: #000;
    position:fixed;
}
.down{
    width: 100%;
    height: 50%;
    background-color: #000;
    position:fixed;
    bottom: 0;
} */
a{
    text-decoration: none;
}
 
    header {
    background: rgba(0, 0, 0, .8);
    height: 60px;
    line-height: 60px;
    padding: 30px 1% 10px;
    position: fixed;
    z-index: 10; 
    top: 0;
    width: 100%;
    display: flex; 
    align-items: center;
} 
header .top{
    display: flex;
    align-items: flex-start;
}
header img{
    line-height: 50px;
    padding:0 10px 0 0;
    width: 58px;
    height: 50px;
    text-align: left;
    z-index: 990; 

}

     .top p {
    font-family:"游明朝体" ;
    padding-bottom:15px ;
    font-size: 15px;
    color: #fff;
    width: 100%;
    font-weight: bold;
 } 

 .pc-nav {
    display: none;
 }
 nav.sp-nav.toggle{
    opacity: 0.9;
 }

 .sp-nav {
    z-index: 1;
    position: fixed;
    overflow-y: scroll;
    overflow-x: hidden;
    top: 0;
    left: 0;
    height: 100vh;
    display: block;
    width: 100%;
    background:linear-gradient(#6ccaf5,#506df0);
    transition: all .5s ease-in-out;
   transform: translateY(-100%);
 }

 #hamburger {
    position: relative;
    display: block;
    width: 30px;
    height: 35px;
    margin: 0 0 0 auto;
 }

 #hamburger span {
    position: absolute;
    top: 35%;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transform: translateY(-50%);
 }

 #hamburger::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
 }

 #hamburger::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 70%;
    height: 2px;
    background-color: #fff;
 }

 .sp-nav ul {
    padding-top:160%;
    width: 100%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
 }

 .sp-nav li a {
    color: #fff;
    display: block;
    width: 100%;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 5px;
 }

 .sp-nav li span {
    font-size: 20px;
    color: #fff;
 }

 .sp-nav li a, .sp-nav li span {
    display: block;
    padding: 10px 30px;
 }

 .sns a{
     padding: 0 10px;
 }
 /*基準となるli要素*/
 .sp-nav .close {
    position: relative;
    text-align: center;
    font-weight: bold;

 } 
 /*バツ印線1*/
  .sp-nav .close::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 70px;
    display: block;
    width: 16px;
    height: 1px;
    background: #fff;
    transform: rotate( 45deg );
 } 
 /*バツ印線2*/
  .sp-nav .close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 70px;
    display: block;
    width: 16px;
    height: 1px;
    background: #fff;
    transform: rotate( -45deg );
 } 

 .toggle {
    transform: translateY( 0 );
    opacity: 1;
 }

 .mainimg img{
     padding-top:60px;
     width: 100%;
     vertical-align: bottom;
 } 

 /* メイン始まり  */
 .top-info{
    width: 100%;
    margin: 0 auto;
    background-image: url(../image/network-g364faae42_1281.png);
    background-color:rgba(255,255,255,0.9);
    background-blend-mode:lighten;
    background-size: cover;
    
}

.top-info h1{
    font-size: 1rem;
    text-align: center;
    padding-top: 20px;
    font-weight: bold;
    line-height: 1.6;

}
.secnd-info{
    width: 95%;
    margin: 0 auto;
}
.secnd-info p{
    font-size: 12px;
    line-height: 1.6;
}
.info-two p{
    font-size:20px;
    letter-spacing:10px;
    background-image: url(../image/22899673_s.jpg);
    background-color:rgba(255,255,255,0.9);
    background-blend-mode:lighten;
    background-size: contain;
    
}
 
   /* .info h1{
    font-size:15px;
    font-weight:bold;
    width: 80%;
    margin:0 auto;
    white-space: nowrap;
    text-align: center;
    padding: 25px 0;
    color: #727171;
    
}   */
@keyframes  showTextFromTop{
    0%{
        transform: translateY(-100%);
    }
    100%{
        transform: translateY(0px);
    }
}
@keyframes  showTextFromBottom{
    0%{
        transform: translateY(100%);
    }
    100%{
        transform: translateY(0px);
    }
}

/* .info h1 span{
    display: inline-block;
}
.info h1 >span{
    overflow: hidden;
}
.info h1 >span:nth-of-type(odd)>span{
    animation:showTextFromTop cubic-bezier(0,0.8,0.2,1) 2s backwards;
}
.info h1 >span:nth-of-type(even)>span{
    animation:showTextFromBottom cubic-bezier(0,0.8,0.2,1) 2s backwards;
} */
   .info{
    margin:0 auto;
    margin-top: 30px;
    vertical-align: bottom;
    width: 100%;
    text-align: center;
 }  
.info h1{
    font-size:24px;
    font-weight: bold;
    width: 100%;
    margin:0 auto;
    white-space: nowrap;
    text-align: center;
    color: rgb(102, 95, 95);
    padding: 50px 0 20px 0;
    
    

} 
.thumbh{
    text-align: center;
    width: 100%;
    padding:20px 10px;
    margin: 0px auto;
    vertical-align: top;

 }
 .thumbh p{
    padding:20px 10px;
    font-size: 12px;
    margin: 0 auto;
    width: 100%;
    line-height :1.8;
    /* font-weight: bold; */
    color: #727171;
}
/* ここからお知らせ・情報 */
.wrapper{
    width: 100%;
    margin:0 auto ;
    padding-bottom: 20px;
    background-image: url(../image/5099362_s.jpg);
    background-color:rgba(255, 255, 255, 0.9);
    background-blend-mode:lighten;
    background-size: cover;
    
}

.menu-bar h3{
    font-size:20px ;
    text-align: center;
    padding:20px 0;
   color: rgb(0, 0, 0);
}

.company-sp  section{
    font-size:10px;
    margin:0 auto;
    width: 95%;
    color: rgb(0, 0, 0);
} 

section.pany-sp dl{
    border-top: 1px solid #c8c8c8;
    display: table;
    width:100%;
}

section.pany-sp dl:last-child{
    border-bottom: 1px solid #c2bfbf;
}

section.pany-sp dl dt,
section.pany-sp dl dd{
    display: table-cell;
    padding:15px 10px;
    vertical-align: top;
    /* font-weight: bold; */
}
section.pany-sp dl dt{
    /* background:#f8f8f8; */
    width:20%;
    text-align: center;
}
section.pany-sp dl dd{
    width: 80%;
}
section.pany-sp dl dd a{
    color:rgb(29, 29, 29);
    letter-spacing :1.5px;
}
section.pany-sp dl dd a span{
    color: red;
    font-weight: bold;
}
.news{
    width: 100%;
    margin: 0 auto;
    text-align: right;
}
/*基本と主な共通部分は省略*/

a.btn-gradient {
    -webkit-transform: skew(-15deg);
    transform: skew(-15deg);
    color: #fff;
    border-radius: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(#2af598), to(#009efd));
    background-image: -webkit-linear-gradient(left, #2af598 0%, #009efd 100%);
    background-image: linear-gradient(90deg, #2af598 0%, #009efd 100%);
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  }
  
a.btn-gradient:hover {
    -webkit-transform: skew(0);
    transform: skew(0);
    color: #fff;
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
  }

 .news a {
    width: 100px;
    font-size: 16px;
    padding: 15px;
    border-radius: 6px;
    display: inline-block;
    margin-top: 30px;
    text-align: center;
    margin-right: 30px;
}


/* ここまでお知らせ・情報 */

.title {
    color: #727171;
    padding:20px 10px;
    font-size: 18px;
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .title::before, .title::after {
    content: "";
    width: 3em;
    border-top: 1px solid #333;
  }
  .title::before {
    margin-right: 1em;
  }
  .title::after {
    margin-left: 1em;
  }
.contents{
    display: none;
}

  main{
    /* width: 100%;
    margin:0 auto;
    overflow: hidden;
    padding-top: 20px; */
    display: none;
} 
/* ここからスマホメイン */

aside{
    width: 100%;
    margin:0 auto;
    overflow: hidden;
}
.contents-sp{
    width:100%;
    color: white;
    padding-bottom: 170px;
}
.animationTarget-sp img{
    width: 100%;
    height:380px;
    object-fit: cover;
    margin:0 auto;
    vertical-align: bottom;
}
.animationTarget-sp{
    width: 100%;
    position: relative;
}
.contentsText-sp{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.39);
    height: 80%;
    width: 95%;
    padding:30px 10px;
}
.contentsText-sp h2{
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 1.6;
}
.contentsText-sp p{
    font-size: 15px;
    margin: 20px 0;
    text-align: center;
    line-height: 1.8;
}
.contentsText-sp p span{
    background-color: red;
    font-weight: bold;
}
.contentsText-sp h4{
    width: 50%;
    margin: 0 auto;
    text-align: center;
    background-color: white;
    padding: 15px 0;
    border-radius: 50px;
    position: absolute;
    bottom:-20px;
    left: 25%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    
}
.contentsText-sp h4 a{
    color: rgba(0, 0, 0, 0.767);
    padding: 15px 35px;
    cursor: pointer;

}
/* ここからWEBサイトメイン */
.contents-web{
    width:100%;
    color: white;
}
.animationTarget-web img{
    width: 100%;
    height: 80vh;
    object-fit: cover;
    margin:0 auto;
    vertical-align: bottom;
}
.animationTarget-web{
    width: 100%;
    position: relative;
}
.contentsText-web{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.719);
    height: 80%;
    width: 95%;
    padding:30px 10px;
}
.contentsText-web h2{
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 1.6;
}
.contentsText-web p{
    font-size: 15px;
    margin: 20px 0;
    text-align: center;
    line-height: 1.8;
}
.contentsText-web h4{
    width: 50%;
    margin: 0 auto;
    text-align: center;
    background-color: white;
    padding: 15px 0;
    border-radius: 50px;
    position: absolute;
    bottom:-20px;
    left: 25%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    
}
.contentsText-web h4 a{
    color: rgba(0, 0, 0, 0.767);
    padding: 15px 35px;
    cursor: pointer;

}
     /* スクロールしたらフワッとさせる */

  /* .contents-sp li{
  
transform: translateY(0px);
transition: 10s;  
} 
  
 .contents-sp li.show h2,
.contents-sp li.show p,
main .contents li.show img{
    transform: none;
    opacity: 1;
} 


 .contents-sp li:not(:first-of-type){
    margin-top: 0px;
} 

 .contents-sp li:not(:first-of-type){
    margin-top: 0px;
}  

  .contents-sp li:nth-of-type(odd) .contentsText-sp{
    right:0;
}  

  .contents-sp li:nth-of-type(even) .contentsText-sp{
    align-items: flex-start;
} 

 .contents-sp li:nth-of-type(odd) img{
    transform: translate(-20px, 20px);
} 

 .contents-sp li:nth-of-type(even) img{
    margin-left: auto;
    transform: translate(20px,20px);
} 
 .animationTarget-sp{
     margin-bottom:20px;
    position: relative;  
} 

.contentsTextleft h2 {
    position:absolute;
    top:20px;
    left:0;
    width: 70%;
    max-width: 70%;

} 
.contentsTextleft p{
    position:absolute;
    top: 70px;
    left: 0;
    width: 70%;
    max-width: 70%;
    font-weight: bold;
}
.contentsTextright h2 {
    position:absolute;
    top:20px;
    right:0;
    width: 70%;
    max-width: 70%;
} 

.contentsTextright p{
    position:absolute;
    top: 70px;
    right: 10px;
    width: 70%;
    max-width: 70%;
    font-weight: bold;
}
 
   .contentsText{
    display: flex;
    text-align: center;
    flex-direction: column; 
}  
  .contents h2 {
    font-size: 15px;
     font-weight: bold; 
    white-space: nowrap;
    line-height: 1.4;
    padding: 5px;
    letter-spacing:0.5em;
    border-radius: 5px;
    opacity: 0;
    transform: translateY(20px);
    transition:1s;
    color:#fff;
    width: 70%;
    max-width: 70%;
} 
.font-smallright{
    font-size: 8px;
    position: absolute;
    right: 0;
}
.font-smallleft{
    font-size:8px;
}
  .contents p{
    line-height: 1.6;
    font-size: 13px;
     padding: 10px; 
    border-radius: 5px;
    opacity: 0;
    transform: translateY(20px);
    transition:1s;
    color:#f2f2f2;
    width: 70%;
    max-width: 70%;
} 

   .contents img{
    width: 75%;
    max-width: 75%;
    border-radius: 5px;
    display: block;
    opacity: 0;
    transform: translateX(-30px);
    transition: 2.5s ;
    border: 1px solid #555;
    margin-bottom: 80px;
    position: relative;
}  
h4 a {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 20px;
    background-image: url("../image/4940442_s.jpg");
    border-radius: 10px;
  }
.contentsTextleft h4{
    position: absolute;
    top: 115%;
    left:20%;
}
.contentsTextright h4{
    position: absolute;
    top: 115%;
    right:20%;
}
h5 a {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 20px;
    background-color: #000000;
    border-radius: 10px;
  }
.contentsTextright h5{
    position: absolute;
    top: 110%;
    right:20%;
} 


     @keyframes titleAnimation {
        0% {
            letter-spacing: .3em;
            opacity: 0;
        }
    }     

/*フッター始まり  */

footer {
    background: rgba(0, 0, 0, .8);
    width: 100%;
    text-align:center;
    height: 60px;
    position: fixed;
    bottom: 0;
}
.sns-sp{
    display: none;
    /* justify-content:space-around;
    height: 120px;
   align-items:flex-start; */
}
.sns_footer{
    display: flex;
    justify-content:space-around;
    align-items: center;
    height: 60px;
}
.sns_footer a{
    display:block;
    width: 30px;
}

footer p{
    width: 100%;
    font-size:8px;
    color: rgb(255, 254, 254);
    position:absolute; 
    bottom: 0;
}

/* .fa-facebook-f {
    background:linear-gradient(#053fff,#2367ee);
    border-radius: 25%;
    padding: 5px 9px;
}

.fa-twitter{
    padding: 5px;
    background:linear-gradient(#05fbff,#1d62f0);
    border-radius: 25%;

}

.fa-youtube{
    padding: 5px;
    background:linear-gradient(#f00505,#e75e5e);
    border-radius: 25%;
}

.fa-instagram{
    padding: 5px;
    background:linear-gradient(#340383,#e07c42,#c918ba);
    border-radius: 25%;

} */

/*フッター終わり  */
/* 上に戻るボタン */
 a.gototop{  
    background: rgba(0, 0, 0, .8);
    bottom: 1%;
    color:#fff;
    display: none;  
    font-size: 3rem;
    height: 3rem;
    line-height: 3.8rem;
    position:fixed;
    right:2%;
    text-align: center;
    text-decoration: none;
    width: 3rem;  
    margin-bottom:100px;
    z-index:111 ;
} 
/* 事業案内ページ */
.fadein {
    opacity : 0;
    /* transform : translate(0, 10px);
    transition : all 500ms; */
    transform: translateY(30px);
    transition: 2s
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}
.subimage img{ 
    display: block;
    margin: 20px auto;
    width: 60%;
    border-radius: 10px;
}
 /* ここからお米のページ */
 article{
    width: 100%;
    margin:0 auto;
    margin-bottom: 100px;
    overflow: hidden;
    padding-top: 20px;
    background-image: url(../image/home1.png);
    background-color:rgba(255, 255, 255, 0.7);
    background-blend-mode:lighten;
    background-size:cover;
}
.thumb img{
    padding: 10px;
    width: 60%;
}
/* お米紹介　携帯サイズ */
.rice{
    width: 90%;
    margin: 10px auto 0;
}
.rice1{
    /* background-color: #4b494910; */
    background-image: url(../image/taue.jpg);
    background-repeat: no-repeat;
        background-color:rgba(255, 255, 255, 0.808);
        background-blend-mode:lighten;
        background-size:cover;
    width: 100%;
    margin: 5px;
    border-radius: 10px;
}
.rice2{
    background-color: #4b494910;
    width: 100%;
    margin: 5px;
    border-radius: 10px;
    background-image: url(../image/plant-g95c37cb65_640.jpg);
    background-repeat: no-repeat;
        background-color:rgba(255, 255, 255, 0.808);
        background-blend-mode:lighten;
        background-size:cover;
}
.rice3{
    background-color: #4b494910;
    width:100%;
    margin: 5px;
    border-radius: 10px;
    background-image: url(../image/IMG_3665.jpeg);
    background-repeat: no-repeat;
        background-color:rgba(255, 255, 255, 0.808);
        background-blend-mode:lighten;
        background-size:cover;
} 

.thumb{
    text-align: center;
    width: 100%;
    margin: 10px auto;
 }
 .thumb h2{
     font-size: 16px;
     font-weight: bold;
     padding: 30px;
     line-height: 32px;
 }
 .thumb p{
    font-size:12px;
    width: 80%;
    margin:0 auto;
    line-height: 1.3;
    padding:5px 10px 20px 10px;
}
.highlight{
    color: #f00505;
    font-size: 18px;
}
.infoo h1{
    letter-spacing: .05em;
    font-size:24px;
    width: 90%;
    margin:0 auto;
    margin-top: 20px;
    white-space: nowrap;
    text-align: center;
    padding-top: 80px;
    color: rgb(102, 95, 95);
    padding-bottom: 10px;
}

/* 色々な文章 */
section h2{
    font-size: 16px;
    margin: 20px auto;
    width: 90%;
    line-height : 1.3;
    color: #727171;
    text-align: center;
}
 section p{
    font-size: 12px;
    margin: 20px auto;
    width: 90%;
    line-height : 1.5;
    color: #727171;
    text-align: center;
} 

.rice-top h2{
    font-size: 14px;
    margin: 20px auto;
    width: 90%;
    line-height : 1.3;
    color: #727171;
    text-align: center;
}
 .rice-top p{
    font-size: 12px;
    margin: 20px auto 0;
    width: 90%;
    line-height : 1.5;
    color: #727171;
    text-align: center;
} 

/* お米の日本地図 */
.card-container{ 
    display: flex; 
    max-width: 100%;
    margin: 100px auto;
    box-shadow: 0 12px 10px -6px rgba(0, 0, 0, 0.25);
}

.card-text{
    min-width:60%;
    margin: 0px auto;
    margin-top: 70px;
     background: rgba(26, 25, 25, 0.53); 
    color:  rgb(255, 255, 255);
    padding:10px 10px;
    /* background-color: rgba(0, 0, 0, 0.678); */
    /* background: linear-gradient(to bottom, #a6d900 0%, #ff4454 100%);  */
    /* background: linear-gradient(to bottom, #a6d90000 0%, #020202 0%);  */
    opacity: 0.8;
    animation: huerotator 3s infinite alternate;
    border-radius: 10px;
  }
  .card-text h3{
    padding-top: 10px 5px;
    font-size: 1em;
    line-height:100%;
}

.card-img img{
    width: 100%;
    margin-left: 20px;
}
/* ここまで日本地図 */

.HACCP{
    margin: 10px auto 30px;
    text-align: center;

}
.Manufacturing img{
    width: 90%;
    border-radius:5px ;
 }
 /* お米の提案文 */
 section.detailrice dl{
    border-top: 1px solid #e2e2e2;
    display: table;
    width:100%;
}

section.detailrice dl:last-child{
    border-bottom: 1px solid #e2e2e2;
}

section.detailrice dl dt,
section.detailrice dl dd{
    display: table-cell;
    padding:20px;
    vertical-align: top;
    width: 80%;
    text-align: center;
}
section.detailrice dl dt{
    background:#f8f8f8;
    width:30%;
    font-weight: bold;
    text-align: left;
}
section.detailrice dl dd{
    width: 80%;
    text-align: left;
}
/* お米の販促物 */
.pop{
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
}
.thumbpop img{
    padding: 5px;
    width: 100%;
    background-color: rgb(247, 8, 8);
}
/* お米の最後 */
.last{
    background-color: #a3daf49a;
    padding: 20px;
    text-align: center;
    width: 100%;
    font-weight: bold;
    font-size: 25px;
}
.lastrice{
    width: 100%;
    padding: 20px;
    margin-bottom: 90px;
    text-align: center;
    font: 22px;
}


  
  @keyframes huerotator {
    0% {
      -webkit-filter: hue-rotate(0deg);
      filter: hue-rotate(0deg);
    }
  
    100% {
      -webkit-filter: hue-rotate(360deg);
      filter: hue-rotate(360deg);
    }
  }
  
     @keyframes titleAnimation {
        0% {
            letter-spacing: .3em;
            opacity: 0;
        }  }
/* ここからWEBページ */
.get{
    width: 100%;
    text-align: center;
}
.webtitle {
    color: #727171;
    font-size: 20px;
    padding:10px 0;
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .webtitle::before, .webtitle::after {
    content: "";
    width: 3em;
    border-top: 1px solid #333;
  }
  .webtitle::before {
    margin-right: 1em;
  }
  .webtitle::after {
    margin-left: 1em;
  }
  .container{
    display: flex;
    flex-direction:column;
    justify-content: center;
    text-align:center;
  }
.container2{
    display: flex;
    flex-direction:column;
    justify-content: center;
    text-align:center;
    margin-bottom: 50px;
  }
  .container-web {
    display:none;
  }
  .container2-web{
      display: none;
  }

  

  .lesson-icon img{
      border-radius:10px;
      width:100%;
      border: 1px solid #c5c4c4;
  }
 .lesson{
     padding: 20px;
 } 
 .lesson-icon h2{
    padding: 20px ;
    margin: 20px auto;
    width: 100%;
    border-radius: 30px;
    font-size:24px;
    font-weight: bold; 
 }
 .lesson-icon p{
     font-size: 18px;
     padding: 10px;
     line-height: 25px;
 }
.txt-contents{
      font-size: 20px;
      padding: 10px　200px;
      line-height: 120%;
      background-color: #95959517;
 }
  .txt-contents h2{
    background-color: #1d3f5d; 
    color: white;
    padding: 10px ;
    margin: 20px auto;
    width: 70%;
    border-radius: 30px;
    font-size:18px;
    font-weight: bold;
  }
  .txt-contents p{
    font-size: 14px;
    line-height: 20px;
    padding: 20px;
    margin:20px auto;
    border-radius: 20px;
    background-color: rgb(26 25 25 / 4%);
    width: 80%;

}
 .Neon{
     display: none;
 }
 /* コロナに負けるなキャンペーン */
 .priceless{
     margin: 100px auto;
     text-align: center;
 }
 .priceless h2 {
    font-size: 1rem;
    width: 80%;
    margin: 0 auto;
    border-radius: 10px;
    line-height: 1.5;
    font-weight: bold;
    color: rgb(14, 13, 13);
    padding: 20px;
    background-color: rgb(252, 9, 9);
    animation: huerotator 3s infinite alternate;
}
.priceless h2 span{
    font-size: 22px;
}
.priceless img{
    width: 80%;
    margin: 0 auto;
}
/* web料金表 */
.messageweb{
    padding:15px;
}

.messageweb a {
  color: #fff;
  font-size: 16px;
  background: #333;
  padding: 18px 30px;
  border-radius: 6px;
  position: relative;
  z-index: 1;
  display: inline-block;
  transition: .3s;
}
.messageweb a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 3px solid #333;
  border-radius: 6px;
  box-sizing: border-box;
  z-index: -1;
  transform: scale(1.2);
  opacity: 0;
  transition: transform ease .3s, opacity .3s;
}
.messageweb a:hover {
  color: #333;
  background: transparent;
}
.messageweb a:hover::before {
  transform: scale(1);
  opacity: 1;
}
/* ここまでweb料金表 */
.message a {
  color: #fff;
  width: 200px;
  font-size: 16px;
  background: rgb(72, 64, 64);
  padding: 18px 30px;
  border-radius: 6px;
  position: relative;
  z-index: 1;
  display: inline-block;
  transition: .5s;
  margin-top: 30px;
  text-align: center;
}
.message a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 3px solid #333;
  border-radius: 6px;
  box-sizing: border-box;
  z-index: -1;
  transform: scale(1.2);
  opacity: 0;
  transition: transform ease .3s, opacity .3s;
}
.message a:hover {
  color: #333;
  background: transparent;
}
.message a:hover::before {
  transform: scale(1);
  opacity: 1;
}
/* ここから料金表ページ */
 .list  section{
    font-size:12px;
    margin:0 auto;
    width: 90%;
    margin-bottom: 100px;
} 

section.detail dl{
    border-top: 1px solid #2e2e2e;
    display: table;
    width:100%;
}

section.detail dl:last-child{
    border-bottom: 1px solid #2e2e2e;
}

section.detail dl dt,
section.detail dl dd{
    display: table-cell;
    padding:15px 10px;
    vertical-align: top;
}
section.detail dl dt{
    background:#f8f8f8;
    width:50%;
}
section.detail dl dd{
    width: 40%;
    background:#f8f8f8;
}
/* お米の採用事例 */
.money h3{
    font-size:24px;
   display: flex;
   justify-content: center;
    width: 50%;
    padding:20px;
    color: rgb(38, 38, 38);
    font-weight: bold;
    background-color: rgba(155, 252, 252, 0.625);
    text-align: center;
    margin-bottom: 30px;
    margin-left: 20px;
    border-radius: 10px;
}
.money p{
    font-size: 22px;
    margin:0 auto;
    width: 90%;
    padding-bottom:10px;
    color: rgba(51, 51, 51, 0.66);
}
/* 企業理念 */
.about{
    width: 100%;
    margin: 0 auto;
    padding-top: 100px;
    max-width: 1280px;
}
.about_main{
    width: 90%;
    margin: 0 auto;
}
.about_main h2{
    font-size: 24px;
    text-align: center;
    margin: 0 0 30px 0;
    font-weight: bold;
}
.about_main p{
    line-height: 1.4;
    font-size: 14px;
}
.about_main h3{
    font-size: 24px;
    text-align:right;
    font-size: 14px;
    margin-top: 20px;
}
/* 会社概要ページ */
.company  section{
    font-size:12px;
    margin:0 auto;
    width: 90%;
    margin-bottom: 100px;
    line-height: 1.5;
} 

section.pany dl{
    border-top: 1px solid #c8c8c8;
    display: table;
    width:100%;
}

section.pany dl:last-child{
    border-bottom: 1px solid #c2bfbf;
}

section.pany dl dt,
section.pany dl dd{
    display: table-cell;
    padding:15px 10px;
    vertical-align: top;
    /* font-weight: bold; */
}
section.pany dl dt{
    background:#f8f8f8;
    width:25%;
}
section.pany dl dd{
    width: 70%;
}
/* お問い合わせページ*/
/* .contact{

} */
.contact h2{
    font-size: 20px;
    text-align: center;
    width: 100%;
    padding: 50px;
}

.contact form{
    margin:30px auto 0;
    width:90%;
}

.contact form dl{
    margin-bottom: 30px;
}

.contact form dl dt{
    font-size:13px;
    margin-bottom: 10px;
}

.contact form dl.required dt:after{
    color:#f30;
    content:"*必須";
    font-size: 10px;
    margin-left: 10px;
    vertical-align:super;
}

.contact form dl dd input,
.contact form dl dd textarea,
.contact form dl dd select{
    /*width:100%とpadding:10pxが干渉してしまうのを防ぐ*/
    box-sizing: border-box; /*borderとpaddingを幅と高さに含めます*/
    border:1px solid #d2d2d2;
    border-radius:3px;
    padding:10px;
    width:100%;
}

.contact form dl dd textarea{
    height:200px;
}

.contact form dl dd select{
    background:#fff;
    height:46px;
}

.contact form .buttonArea{
    text-align:center;
    margin-bottom: 50px;
}

.contact form .buttonArea button{
    background-color: #59a1be;
    border:none;
    border-radius: 3px;
    box-shadow:2px 2px #05141d;
    color:#fff;
    font-size:16px;
    font-weight: bold;
    padding:8px 0 10px;
    text-decoration: none;
    width:50%;
}
/* contactページ終わり*/
/* ニュースページ スマホ*/
.nyu-s {
    width: 100%;
    margin: 0 auto;
    background-image: url(../image/home1.png);
     background-color:rgba(255, 255, 255, 0.6);
     background-blend-mode:lighten;
     background-size:cover;
}
.nyu-s .subimage img{
    width:100%;
    padding-top: 20px;
}
.News{
    width: 90%;
    margin: 0 auto;
    padding-bottom: 30px;
}
.New h1{
    text-align: left;
    font-size: 20px;
    margin:20px 0;
}
.getu h2{
    font-size: 16px;
    padding-left: 10px;
    border-left: 5px solid #2367ee;
    margin-top: 50px;
    margin-bottom: 5px;
}
.getu p{
    font-size: 14px;
    line-height: 1.6;
    padding:20px 0;
}
.getu img{
    width: 100%;
    height: 100%;
    margin:30px 0;
}
.bana{
    text-align: center;
}
.bana img {
    width: 100%;
    height: 50%;
}
.bana h2{
    font-size: 20px;
    padding-left: 10px;
    border-left: 5px solid #2367ee;
    margin: 20px 0;
    text-align: left;
}
.bana p{
    font-size: 14px;
    line-height: 1.6;
    padding:20px 0;
}
.getu iframe{
    width: 100%;
    height: 200px;
}
/* 清掃事業 */
.hero p {
    margin: 0.5rem 0;
    color: #666;
  }
  
  .service-category {
    padding: 1rem;
    border-bottom: 1px solid #ddd;
  }
  
  .service-category h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  
  .service-category ul {
    list-style: none;
    padding: 0;
  }
  
  .service-category li {
    margin-bottom: 1rem;
  }
  
  .service-category h3 {
    font-size: 1rem;
    margin: 0.5rem 0;
    color: #333;
    font-weight: bold;
}
  /* サービスカテゴリーのスタイル (モバイルファースト) */
.service-category {
    margin-bottom: 30px;
  }
  
/* h2タグに線を引くスタイル */
/* h2タグにグラデーションの線を引くスタイル */
.service-category h2 {
    font-size: 1.4rem;
    margin-bottom: 40px;
    color: #333;
    text-align: center;
    position: relative;
    padding-bottom: 10px; /* 線とテキストとの間に余白を作る */
  }
  
  .service-category h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px; /* 線の高さ */
    background-image: linear-gradient(to right, #cbcbcb, #000000);  }
  
  /* サービスリスト */
  .service-category ul {
    list-style: none;
    padding: 0;
  }
  
  /* 各サービスアイテム */
  .service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 30px;
  }
  
  .service-item img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  /* サービス名 */
  .service-item h3 {
    font-size: 1.4rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
  }
  
  /* サービス説明 */
  .service-item p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    max-width: 90%;
    margin: 0 auto;
  }
  /* ボタン全体のスタイル */
.cta-buttons {
  text-align: center;
  margin-top: 30px;
}

.cta-buttons .btn {
  display: inline-block;
  padding: 12px 30px;
  margin: 10px 0 30px 0;
  font-size: 1.1rem;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  background-color: #007bff;
  border-radius: 5px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.cta-buttons .btn:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
}

/* お問い合わせ・お見積りボタンのカスタマイズ */
.btn-inquiry {
    background-image: linear-gradient(to right, #58d75d, #4CAF50);
}

.btn-inquiry:hover {
  background-image: linear-gradient(to right, #0056b3, #0084bf); /* ホバーカラーの変更 */
}

  /* レスポンシブ対応：画面が大きくなった時の調整 (タブレット以上) */
  @media (min-width: 768px) {
    .service-category{
        width: 80%;
        margin: 0 auto;
    }
    .service-category h2 {
      font-size: 2rem;
    }
  
    .service-item {
        flex-direction: row;
        align-items: flex-start;
        margin: 0 auto;
        display: block;
    }
  
    .service-item img {
      max-width: 40%;
    }
  
    .service-item p {
      max-width: 55%;
    }
    .cta-buttons .btn {
        padding: 14px 40px;
        font-size: 1.2rem;
      }
  }
  
  /* デスクトップ以上のサイズで調整 */
@media (min-width: 1024px) {
    .service-category h2 {
      font-size: 2.2rem;
    }
  

  
    .service-category li h3 {
      font-size: 1.8rem;
      margin-bottom: 20px;
    }
  
    .service-category li p {
      font-size: 1.1rem;
      width: 100%;
    }
    .cta-buttons {
        margin-top: 40px; /* PCでは少し余裕を持たせる */
      }
      .cta-buttons .btn {
        padding: 16px 50px;
        font-size: 1.4rem;
        border-radius: 8px; /* PCでは丸みを少し大きく */
      }
  }
  
@media(max-width:370px){
    .contents-sp p{
        font-size:10px;
    }
    .contents-sp h2{
        font-size:13px;
    }
    .font-smallright{
        font-size:6px;
    }
    article{
        width: 100%;
        margin:0 auto;
        overflow: hidden;
        padding-top: 20px;
        background-image: url(../image/home1.png);
        background-color:rgba(255, 255, 255, 0.808);
        background-blend-mode:lighten;
        background-size:cover;
    }
    .contents-sp{
        width:100%;
        color: white;
    }
    .animationTarget-sp img{
        width: 100%;
        height: 65vh;
        object-fit: cover;
        margin:0 auto;
        vertical-align: bottom;
    }
    .animationTarget-sp{
        width: 100%;
        position: relative;
    }
    .contentsText-sp{
        position:absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.39);
        border-radius: 5px;
        width: 95%;
        padding:30px 10px;
    }
    .contentsText-sp h2{
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        line-height: 1.5;
    }
    .contentsText-sp p{
        font-size: 12px;
        margin: 20px 0;
        text-align: center;
        line-height: 1.7;
    }
    .contentsText-sp h4{
        width: 50%;
        margin: 0 auto;
        text-align: center;
        background-color: white;
        padding: 15px 0;
        border-radius: 50px;
        position: absolute;
        bottom:-20px;
        left: 25%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        
    }
    .wrapper{
        width: 100%;
        margin:0 auto ;
        background:chocolate;
        padding-bottom: 50px;
    }
    
    .menu-bar h3{
        font-size:20px ;
        text-align: center;
        padding:20px 0;
    }
    
    .company-sp  section{
        font-size:10px;
        margin:0 auto;
        width: 90%;
    } 
    
    section.pany-sp dl{
        border-top: 1px solid #c8c8c8;
        display: table;
        width:100%;
    }
    
    section.pany-sp dl:last-child{
        border-bottom: 1px solid #c2bfbf;
    }
    
    section.pany-sp dl dt,
    section.pany-sp dl dd{
        display: table-cell;
        padding:15px 10px;
        vertical-align: top;
        /* font-weight: bold; */
    }
    section.pany-sp dl dt{
        /* background:#f8f8f8; */
        width:20%;
    }
    section.pany-sp dl dd{
        width: 70%;
    }
    section.pany-sp dl dd a span{
        color: red;
        font-weight: bold;
    }
    /* ここからお知らせ・情報 */
.wrapper{
    width: 100%;
    margin:0 auto ;
    padding-bottom: 20px;
    background-image: url(../image/5099362_s.jpg);
    background-color:rgba(255, 255, 255, 0.9);
    background-blend-mode:lighten;
    background-size: cover;
    
}

.menu-bar h3{
    font-size:18px ;
    text-align: center;
    padding:20px 0;
   color: rgb(0, 0, 0);
}

.company-sp  section{
    font-size:10px;
    margin:0 auto;
    width: 95%;
    color: rgb(0, 0, 0);
} 

section.pany-sp dl{
    border-top: 1px solid #c8c8c8;
    display: table;
    width:100%;
}

section.pany-sp dl:last-child{
    border-bottom: 1px solid #c2bfbf;
}

section.pany-sp dl dt,
section.pany-sp dl dd{
    display: table-cell;
    padding:15px 0;
    vertical-align: top;
    /* font-weight: bold; */
}
section.pany-sp dl dt{
    /* background:#f8f8f8; */
    width:18%;
}
section.pany-sp dl dd{
    width: 80%;
}
.news{
    width: 100%;
    margin: 0 auto;
    text-align: right;
}
/*基本と主な共通部分は省略*/

a.btn-gradient {
    -webkit-transform: skew(-15deg);
    transform: skew(-15deg);
    color: #fff;
    border-radius: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(#2af598), to(#009efd));
    background-image: -webkit-linear-gradient(left, #2af598 0%, #009efd 100%);
    background-image: linear-gradient(90deg, #2af598 0%, #009efd 100%);
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  }
  
a.btn-gradient:hover {
    -webkit-transform: skew(0);
    transform: skew(0);
    color: #fff;
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
  }

 .news a {
    width: 100px;
    font-size: 16px;
    padding: 15px;
    border-radius: 6px;
    display: inline-block;
    margin-top: 30px;
    text-align: center;
    margin-right: 30px;
}


/* ここまでお知らせ・情報 */
    /* ここからWEBサイトメイン */
.contents-web{
    width:100%;
    color: white;
}
.animationTarget-web img{
    width: 100%;
    height: 80vh;
    object-fit: cover;
    margin:0 auto;
    vertical-align: bottom;
}
.animationTarget-web{
    width: 100%;
    position: relative;
}
.contentsText-web{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.719);
    height: 80%;
    width: 95%;
    padding:30px 10px;
}
.contentsText-web h2{
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 1.6;
}
.contentsText-web p{
    font-size: 12px;
    margin: 20px 0;
    text-align: center;
    line-height: 1.8;
}
.contentsText-web h4{
    width: 50%;
    margin: 0 auto;
    text-align: center;
    background-color: white;
    padding: 15px 0;
    border-radius: 50px;
    position: absolute;
    bottom:-20px;
    left: 25%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    
}
.contentsText-web h4 a{
    color: rgba(0, 0, 0, 0.767);
    padding: 15px 35px;
    cursor: pointer;

}
    
    /* .sns-sp .fa-facebook-f {
        margin:0 20px 0 50px;
    }
    .fa-facebook-f {
        background:linear-gradient(#053fff,#2367ee);
        border-radius: 25%;
        padding: 5px 9px;
        margin-right: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .sns-sp .fa-twitter{
        margin:0 20px;
    }
    .fa-twitter{
        padding: 5px;
        background:linear-gradient(#05fbff,#1d62f0);
        border-radius: 25%;
        margin-right: 10px;
    }
    .sns-sp .fa-youtube{
        margin:0 20px;
    }
    .fa-youtube{
        padding: 5px;
        background:linear-gradient(#f00505,#e75e5e);
        border-radius: 25%;
        margin-right: 10px;
    }
    .sns-sp .fa-instagram{
        margin:0 20px;
    }
    .fa-instagram{
        padding: 5px;
        background:linear-gradient(#340383,#e07c42,#c918ba);
        border-radius: 25%;
       margin-right: 20px;
    } */
    /* .sns-sp{
        position: absolute;
        bottom: 50px;
    } */
      /* footer p{
        font-size:6px;
        color: rgb(255, 254, 254);
        position: absolute;
        bottom: 20px;
        left: 1%;
    }  */
 
}
@media(min-width:375px){
 .sp-nav ul {
    padding-top:110%;
 } 
 
}





@media(min-width:768px){
    .sp-nav ul {
       padding-top:125%;
       font-size:35px ;
    } 
    header img{
        line-height: 60px;
        padding:0 10px 0 0;
        margin: 0 auto;
        width: 60px;
        height: 55px;
        text-align: left;
    }
  .top p{
        font-size: 30px;
    }
    .info h1{
        font-size:36px;
        line-height: 1.6;
    }
    .info p{
        font-size:36px;
    }
    .sns a{
        padding: 0 30px;
    }
    .sp-nav li a{
        padding: 50px 0;
    }
    .sp-nav li span {
        font-size: 30px;
        color: #fff;
     }
     .sp-nav .close::before {
         width: 40px;
         font-weight:bold;
     }
     .sp-nav .close::after {
        width: 40px;
        font-weight:bold;
     }
     #hamburger {
        position: relative;
        display: block;
        width: 30px;
        height: 35px;
        margin: 0 0 0 auto;
        margin-right: 20px;
     }
     #hamburger::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 140%;
        height: 3px;
        background-color: #fff;
     }
     #hamburger::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 10px;
        left: 0;
        width: 140%;
        height: 3px;
        background-color: #fff;
     }
     #hamburger span {
        position: absolute;
        top: 35%;
        left: 0;
        display: block;
        width: 140%;
        height: 3px;
        background-color: #fff;
        transform: translateY(-50%);
     }
     .top-info{
        width: 100%;
        margin: 0 auto;
        background-image: url(../image/network-g364faae42_1281.png);
        background-color:rgba(255,255,255,0.8);
        background-blend-mode:lighten;
        background-size: cover;
        
    }
   
    .top-info h1{
        font-size: 30px;
        text-align: center;
        padding-top: 20px;
        font-weight: bold;
    }
    .secnd-info{
        width: 80%;
        margin: 0 auto;
    }
    .secnd-info p{
        font-size: 18px;
        line-height: 1.6;
    }
    .info-two p{
        font-size:40px;
        letter-spacing:10px;
        background-image: url(../image/22899673_s.png);
        background-repeat: no-repeat;
        background-color:rgba(255,255,255,0.9);
        background-blend-mode:lighten;
        background-size: cover;
        
    }
    /* ここからお知らせ・情報 */
.wrapper{
    width: 100%;
    margin:0 auto ;
    padding-bottom: 20px;
    background-image: url(../image/5099362_s.jpg);
    background-color:rgba(255, 255, 255, 0.9);
    background-blend-mode:lighten;
    background-size: cover;
    
}

.menu-bar h3{
    font-size:24px ;
    text-align: center;
    padding:20px 0;
   color: rgb(0, 0, 0);
}
     /* 企業理念 */
     .about{
        width: 100%;
        margin: 0 auto;
        padding-top: 100px;
        max-width: 1280px;
    }
    .about_main{
        width: 90%;
        margin: 0 auto;
    }
    .about_main h2{
        font-size: 24px;
        text-align: center;
        margin: 0 0 30px 0;
        font-weight: bold;
    }
    .about_main p{
        text-align: center;
        line-height: 1.4;
        font-size: 18px;
    }
    .about_main h3{
        font-size: 24px;
        text-align:right;
        font-size: 18px;
        margin-top: 30px;
    }

.company-sp  section{
    font-size:16px;
    margin:0 auto;
    width: 95%;
    color: rgb(0, 0, 0);
} 

section.pany-sp dl{
    border-top: 1px solid #c8c8c8;
    display: table;
    width:100%;
}

section.pany-sp dl:last-child{
    border-bottom: 1px solid #c2bfbf;
}

section.pany-sp dl dt,
section.pany-sp dl dd{
    display: table-cell;
    padding:15px 10px;
    vertical-align: top;
    /* font-weight: bold; */
}
section.pany-sp dl dt{
    text-align: center;
    width:20%;
}
section.pany-sp dl dd{
    width: 80%;
}
.news{
    width: 100%;
    margin: 0 auto;
    text-align: right;
}
/*基本と主な共通部分は省略*/

a.btn-gradient {
    -webkit-transform: skew(-15deg);
    transform: skew(-15deg);
    color: #fff;
    border-radius: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(#2af598), to(#009efd));
    background-image: -webkit-linear-gradient(left, #2af598 0%, #009efd 100%);
    background-image: linear-gradient(90deg, #2af598 0%, #009efd 100%);
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  }
  
a.btn-gradient:hover {
    -webkit-transform: skew(0);
    transform: skew(0);
    color: #fff;
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
  }

 .news a {
    width: 100px;
    font-size: 16px;
    padding: 15px;
    border-radius: 6px;
    display: inline-block;
    margin-top: 30px;
    text-align: center;
    margin-right: 50%;
}


/* ここまでお知らせ・情報 */
     /* スクロールしたらフワッとさせる */
     main{
         display:none;
     }
    /* ここからスマホメイン */
    
    aside{
        width: 100%;
        margin:0 auto;
        overflow: hidden;
    }
    .contents-sp{
        width:100%;
        color: white;
    }
    .animationTarget-sp img{
        width: 100%;
        height: 50vh;
        object-fit: cover;
        margin:0 auto;
        vertical-align: bottom;
    }
    .animationTarget-sp{
        width: 100%;
        position: relative;
    }
    .contentsText-sp{
        position:absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.39);
        height: 80%;
        width: 95%;
        padding:30px 10px;
    }
    .contentsText-sp h2{
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        line-height: 1.6;
        letter-spacing:0.1em ;
    }
    .contentsText-sp p{
        font-size: 20px;
        margin: 20px 0;
        text-align: center;
        line-height: 1.8;
    }
    .contentsText-sp h4{
        width: 50%;
        margin: 0 auto;
        text-align: center;
        background-color: white;
        padding: 25px 0;
        border-radius: 50px;
        position: absolute;
        bottom:0;
        left: 25%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        font-size: 20px;
    }
    .contentsText-sp h4 a{
        color: rgba(0, 0, 0, 0.767);
        padding: 23px 130px;
        cursor: pointer;
    
    }
    /* ここからWEBサイトメイン */
    .container-web  {
        display:none;
      }
      .container2-web{
          display: none;
      }
.contents-web{
    width:100%;
    color: white;
}
.animationTarget-web img{
    width: 100%;
    height: 70vh;
    object-fit: cover;
    margin:0 auto;
    vertical-align: bottom;
}
.animationTarget-web{
    width: 100%;
    position: relative;
}
.contentsText-web{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.719);
    height: 80%;
    width: 95%;
    padding:30px 10px;
}
.contentsText-web h2{
    font-size: 55px;
    font-weight: bold;
    text-align: center;
    line-height: 1.6;
    padding-bottom: 50px;
}
.contentsText-web p{
    font-size: 20px;
    margin: 20px 0;
    text-align: center;
    line-height: 1.8;
}
.contentsText-web h4{
    width: 50%;
    margin: 0 auto;
    text-align: center;
    background-color: white;
    padding: 15px 0;
    border-radius: 50px;
    position: absolute;
    bottom:-20px;
    left: 25%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    
}
.contentsText-web h4 a{
    color: rgba(0, 0, 0, 0.767);
    padding: 15px 35px;
    cursor: pointer;

}
     /* .contentsTextleft h2 {
        position:absolute;
        top:80px;
        left:0;
        font-size: 30px;
    } 
    .contentsTextleft p{
        position:absolute;
        top: 200px;
        left: 0;
        font-size: 23px;
    }
    .contentsTextright h2 {
        position:absolute;
        top:80px;
        right:0;
        font-size: 30px;
    } 
    
    .contentsTextright p{
        position:absolute;
        top: 200px;
        right: 0;
        font-size:23px;
    }
    .contents img{
        width: 75%;
        max-width: 75%;
        border-radius: 5px;
        display: block;
        opacity: 0;
        transform: translateX(-30px);
        transition: 2.5s ;
        border: 1px solid #555;
        margin-bottom: 110px;
        position: relative;
    } 
    h4 a {
        color: #fff;
        font-size: 20px;
        padding: 30px 50px;
        background-color: #000000;
        border-radius: 10px;
      }
    .contentsTextleft h4{
        position: absolute;
        top: 110%;
        left:20%;
    }
    .contentsTextright h4{
        position: absolute;
        top: 115%;
        right:20%;
    }
    h5 a {
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        padding: 30px 50px;
        background-color: #000000;
        border-radius: 10px;
      }
    .contentsTextright h5{
        position: absolute;
        top: 110%;
        right:20%;
    } */
    /* .font-smallright{
        font-size: 20px;
        position: absolute;
        right: 45px;
    } */
    /* .font-smallleft{
        font-size:20px;
    } */
    /* ここからお米のページ */
    .rice{
        display: flex;
        justify-content: space-between;
    }
   
    .thumb h2{
        font-size: 20px;
        font-weight: bold;
        padding: 10px;
        line-height: 32px;
    }
    .thumb img{
        padding: 10px;
        width: 60%;
    }
    /* 精米HACCP工場画像 */
    .Manufacturing img{
        width: 90%;
        border-radius:5px ;
    }
    /* お米の日本地図 */
     .card-text h3{ 
        font-size: 3vw;
        line-height: 40px;
    }
    .money h3{
        width: 30%;
    }
    section.detailrice dl{
        border-top: 1px solid #e2e2e2;
        display: table;
        width:100%;
    }
    
    section.detailrice dl:last-child{
        border-bottom: 1px solid #e2e2e2;
    }
    
    section.detailrice dl dt,
    section.detailrice dl dd{
        display: table-cell;
        padding:20px;
        vertical-align: top;
        width: 80%;
        text-align: center;
    }
    section.detailrice dl dt{
        background:#f8f8f8;
        width:20%;
        text-align: left;
        font-size: 30px;
    }
    section.detailrice dl dd{
        width: 80%;
        text-align: left;
        font-size: 20px;
    }
    .card-text{
        min-width:60%;
        margin: 0px auto;
        margin-top: 120px;
        color: #fff;
        padding:10px 10px;
        background: rgba(26, 25, 25, 0.53); 
        /* background: linear-gradient(to bottom, #a6d900 0%, #ff4454 100%); */
        opacity: 0.5;
        animation: huerotator 3s infinite alternate;
      }
      /* お米の販促物 */
.pop{
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto 20px;
}
.thumbpop img{
    padding: 5px;
    width: 100%;
    background-color: rgb(247, 8, 8);
}
      
      @keyframes huerotator {
        0% {
          -webkit-filter: hue-rotate(0deg);
          filter: hue-rotate(0deg);
        }
      
        100% {
          -webkit-filter: hue-rotate(360deg);
          filter: hue-rotate(360deg);
        }
      }
      
         @keyframes titleAnimation {
            0% {
                letter-spacing: .3em;
                opacity: 0;
            }  }
 /* ボタンのネオン*/
.messageweb{
    display: none;
}
.Neon{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    /* min-height: 100vh; */
     /* background-color: #031321;  */
}
.Neon a{
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    /* color: #2196f3; */
    color: rgba(199, 234, 248, 0.904);
    border: 0.1px solid #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-decoration: none;
    font-size: 24px;
    overflow: hidden;
    transition: 0.1s;
    margin: 50px 0 30px;
}
.Neon a:hover{
    color:#050c13;
    background:#2196f3 ;
    box-shadow:0 0 100px #2196f3, 0 0 400px #2196f3, 0 0 800px #2196f3 ;
    transition-delay: 1s;
}
.Neon a span{
    position:absolute;
    display:block;
}
.Neon a span:nth-child(1){
    top:0;
    left:-100%;
    width: 100%;
    height:10px;
    background:linear-gradient(90deg,transparent,#2196f3)
}
.Neon a:hover span:nth-child(1){
    left:100%;
    transition:0.5s;
}
.Neon a span:nth-child(3){
    bottom: 0;
    right:-100%;
    width: 100%;
    height:10px;
    background:linear-gradient(270deg,transparent,#2196f3)
}
.Neon a:hover span:nth-child(3){
    right:100%;
    transition:0.5s;
    transition-delay: 0.5s;
}
.Neon a span:nth-child(2){
    top:-100%;
    right:0;
    width: 10px;
    height:100%;
    background:linear-gradient(180deg,transparent,#2196f3)
}
.Neon a:hover span:nth-child(2){
    top:100%;
    transition:0.5s;
    transition-delay: 0.25s;
}
.Neon a span:nth-child(4){
    bottom:-100%;
    left:0;
    width: 10px;
    height:100%;
    background:linear-gradient(360deg,transparent,#2196f3)
}
.Neon a:hover span:nth-child(4){
    bottom:100%;
    transition:0.5s;
    transition-delay: 0.75s;
}
/* WEB 制作ページ*/

.webtitle{
    font-size: 35px;
}
.containers{
    display: flex;
    justify-content: space-around ;
  }
  .containers2{
    display: flex;
    text-align:center;
    margin-bottom: 50px;
  }
  
  .lessons{
    justify-content: space-between;
    width: 33%;
  }
 
  .lesson-icon img{
      border-radius:10px;
      border: 1px solid #474747fb;
      position: relative;
  }
  /* ここからコロナに負けるな */
  .priceless h2 {
    font-size: 24px;
    width: 80%;
    border-radius: 10px;
    margin: 0 auto;
    line-height: 1.5;
    font-weight: bold;
    color: rgb(14, 13, 13);
    padding: 20px;
    background-color: rgb(252, 9, 9);
    animation: huerotator 3s infinite alternate;
}
.priceless h2 span{
    font-size: 30px;
}
 
  .messageweb{
      display: none;
  }
  .message{
    padding-top: 30px;
}

.message a {
  color: #fff;
  font-size: 16px;
  background: #333;
  padding: 18px 30px;
  border-radius: 6px;
  position: relative;
  z-index: 1;
  display: inline-block;
  transition: .3s;
  text-align: center;
}
.message a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 3px solid #333;
  border-radius: 6px;
  box-sizing: border-box;
  z-index: -1;
  transform: scale(1.2);
  opacity: 0;
  transition: transform ease .3s, opacity .3s;
}
.message a:hover {
  color: #333;
  background: transparent;
}
.message a:hover::before {
  transform: scale(1);
  opacity: 1;
}
   /* ここまでWEB専用 */
  .txt-contents{
    width: 100%;
    display:inline-block;
    background-color: #102b42; 
    border-radius: 10px;
    color: white;
    margin-top: 30px;
    position: relative;
}
.txt-contents h2{
    position: absolute;
    top:-30px;
    left: 12%;
  background: linear-gradient(to bottom, #8bc7f8 0%, #f8f7ac 100%);  
  color: rgb(0, 0, 0);
  padding: 10px 0;
  border-radius: 10px;
  font-size:16px;
  font-weight: bold; 
  text-align: center;
  /* background-color: rgb(248, 239, 239); */
  /* opacity: 0.5;
    animation: huerotator 3s infinite alternate; */
}

.txt-contents p{
    font-size: 20px;
    padding: 10px;
    margin-top: 70px;
}
/* web料金表 */
.messageweb{
    padding-top: 30px;
}

.messageweb a {
  color: #fff;
  font-size: 16px;
  background: #333;
  padding: 18px 30px;
  border-radius: 6px;
  position: relative;
  z-index: 1;
  display: inline-block;
  transition: .3s;
}
.messageweb a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 3px solid #333;
  border-radius: 6px;
  box-sizing: border-box;
  z-index: -1;
  transform: scale(1.2);
  opacity: 0;
  transition: transform ease .3s, opacity .3s;
}
.messageweb a:hover {
  color: #333;
  background: transparent;
}
.messageweb a:hover::before {
  transform: scale(1);
  opacity: 1;
}
/* ここまでweb料金表 */
  .message{
      padding-top: 30px;
  }
  
  .message a {
    color: #fff;
    font-size: 16px;
    background: #333;
    padding: 18px 30px;
    border-radius: 6px;
    position: relative;
    z-index: 1;
    display: inline-block;
    transition: .3s;
    text-align: center;
  }
  .message a::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 3px solid #333;
    border-radius: 6px;
    box-sizing: border-box;
    z-index: -1;
    transform: scale(1.2);
    opacity: 0;
    transition: transform ease .3s, opacity .3s;
  }
  .message a:hover {
    color: #333;
    background: transparent;
  }
  .message a:hover::before {
    transform: scale(1);
    opacity: 1;
  }
  /* ここから料金表ページ */
/*detail*/
.list  section{
    margin:0 auto;
    width: 80%;
    margin-bottom: 100px;
}

section.detail dl{
    border-top: 1px solid #e2e2e2;
    display: table;
    font-size: 28px;
    width:100%;
}

section.detail dl:last-child{
    border-bottom: 1px solid #e2e2e2;
}

section.detail dl dt,
section.detail dl dd{
    display: table-cell;
    padding:20px;
    vertical-align: top;
    width: 80%;
    text-align: center;
}
section.detail dl dt{
    background:#f8f8f8;
    width:50%;
    text-align: left;
}
section.detail dl dd{
    width: 30%;
    text-align: left;
}
/* 会社概要ページ */
.company  section{
    font-size:18px;
    margin:0 auto;
    width: 90%;
    margin-bottom: 100px;
    line-height: 1.5;
} 

section.pany dl{
    border-top: 1px solid #959595;
    display: table;
    width:100%;
}

section.pany dl:last-child{
    border-bottom: 1px solid #959595;
}

section.pany dl dt,
section.pany dl dd{
    display: table-cell;
    padding:15px 10px;
    vertical-align: top;
}
section.pany dl dt{
    background:#f8f8f8;
    width:20%;
}
section.pany dl dd{
    width: 70%;
}
.nyu-s {
    width: 100%;
    margin: 0 auto;
    background-image: url(../image/home1.png);
     background-color:rgba(255, 255, 255, 0.6);
     background-blend-mode:lighten;
     background-size:cover;
}
.nyu-s .subimage img{
    width:100%;
    padding-top: 20px;
}
.News{
    width: 90%;
    margin: 0 auto;
    padding-bottom: 30px;
}
.New h1{
    text-align: left;
    font-size: 24px;
    margin:20px 0;
}
.getu h2{
    font-size: 20px;
    padding-left: 10px;
    border-left: 5px solid #2367ee;
    margin: 20px 0;
}
.getu p{
    font-size: 14px;
    line-height: 1.6;
    padding:20px 0;
}
.getu img{
    width: 100%;
    height: 100%;
    margin-top: 30px;
}
.bana{
    text-align: center;
}
.bana img {
    width: 90%;
    height: 50%;
    padding-top: 30px;
}
.bana h2{
    font-size: 20px;
    padding-left: 10px;
    border-left: 5px solid #2367ee;
    margin: 20px 0;
    text-align: left;
}
.bana p{
    font-size: 14px;
    line-height: 1.6;
    padding:20px 0;
}
.youtube{
    width: 100%;
    aspect-ratio: 16/9;
}
.youtube iframe{
    width: 100%;
    height:100% ;
}
.you1{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
}
    @media(min-width:1024px) and (max-width:1024px){
        /* .sp-nav {
            z-index: 1;
            position: fixed;
            overflow-y: scroll;
            overflow-x: hidden;
            top: 0;
            left: 0;
            height: 100vh;
            display: block;
            width: 100%;
            background:linear-gradient(#6ccaf5,#506df0);
            transition: all .5s ease-in-out;
           transform: translateY(-100%);
       } */
        /* .sp-nav ul {
            padding-top:100%;
            font-size:40px ;
         }  
         .contentsTextleft h2 {
            position:absolute;
            top:80px;
            left:0;
            font-size: 35px;
        } 
        .contentsTextleft p{
            position:absolute;
            top: 200px;
            left: 0;
            font-size: 28px;
        }
        .contentsTextright h2 {
            position:absolute;
            top:80px;
            right:0;
            font-size: 35px;
        } 
        
        .contentsTextright p{
            position:absolute;
            top: 200px;
            left: 300px;
            font-size:28px;
        }
    .font-smallright{
        position: absolute;
        left:60px;
    }
    .contents img{
        width: 75%;
        max-width: 75%;
        border-radius: 5px;
        display: block;
        opacity: 0;
        transform: translateX(-30px);
        transition: 2.5s ;
        border: 1px solid #555;
        margin-bottom: 110px;
        position: relative;
    }  */
    /* h4 a {
        color: #fff;
        font-size: 25px;
        padding: 30px 60px;
        background-color: #000000;
        border-radius: 10px;
      }
    .contentsTextleft h4{
        position: absolute;
        top: 80%;
        left:20%;
    }
    .contentsTextright h4{
        position: absolute;
        top: 85%;
        right:20%;
    } */
    /* h5 a {
        color: #fff;
        font-size: 20px;
        padding: 30px 60px;
        background-color: #000000;
        border-radius: 10px;
      }
    .contentsTextright h5{
        position: absolute;
        top: 85%;
        right:20%;
    } */
      
    aside{
        width: 100%;
        margin:0 auto;
        overflow: hidden;
    }
    .contents-sp{
        width:100%;
        color: white;
    }
    .animationTarget-sp img{
        width: 100%;
        height: 50vh;
        object-fit: cover;
        margin:0 auto;
        vertical-align: bottom;
    }
    .animationTarget-sp{
        width: 100%;
        position: relative;
    }
    .contentsText-sp{
        position:absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.39);
        height: 80%;
        width: 95%;
        padding:30px 10px;
    }
    .contentsText-sp h2{
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        line-height: 1.6;
        letter-spacing:0.1em ;
    }
    .contentsText-sp p{
        font-size: 20px;
        margin: 20px 0;
        text-align: center;
        line-height: 1.8;
    }
    .contentsText-sp h4{
        width: 50%;
        margin: 0 auto;
        text-align: center;
        background-color: white;
        padding: 25px 0;
        border-radius: 50px;
        position: absolute;
        bottom:0;
        left: 25%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        font-size: 20px;
    }
    .contentsText-sp h4 a{
        color: rgba(0, 0, 0, 0.767);
        padding: 23px 130px;
        cursor: pointer;
    
    }
      /* お米の日本地図 */
      .card-text h3{ 
        font-size:1.5em;
        line-height: 150%;
    }
   
    .card-text{
        min-width:60%;
        margin: 0px auto;
        margin-top: 250px;
        color: #fff;
        padding:10px 10px;
        background: linear-gradient(to bottom, #93c206 0%, #000000 100%);
        /* background: linear-gradient(to bottom, #a6d900 0%, #ff4454 100%); */
        opacity: 0.5;
        animation: huerotator 3s infinite alternate;
      }

      
      @keyframes huerotator {
        0% {
          -webkit-filter: hue-rotate(0deg);
          filter: hue-rotate(0deg);
        }
      
        100% {
          -webkit-filter: hue-rotate(360deg);
          filter: hue-rotate(360deg);
        }
      }
      
         @keyframes titleAnimation {
            0% {
                letter-spacing: .3em;
                opacity: 0;
            }  }
}

@media(min-width:1000px){
    header img{
        line-height: 60px;
        padding:0 10px 0 0;
        margin: 0 auto;
        width: 65px;
        height: 58px;
        text-align: left;
    }
    .top-info{
        width: 100%;
        margin: 0 auto;
        background-image: url(../image/network-g364faae42_1281.png);
        background-color:rgba(255,255,255,0.8);
        background-blend-mode:lighten;
        background-size: cover;
        
    }
   
    .top-info h1{
        font-size: 30px;
        text-align: center;
        padding-top: 20px;
        font-weight: bold;
        line-height: 1.6;

    }
    .secnd-info{
        width: 80%;
        margin: 0 auto;
    }
    .secnd-info p{
        font-size: 18px;
        line-height: 1.6;
    }
    .info-two p{
        font-size:40px;
        letter-spacing:10px;
        background-image: url(../image/22899673_s.png);
        background-repeat: no-repeat;
        background-color:rgba(255,255,255,0.9);
        background-blend-mode:lighten;
        background-size: cover;
        
    }
    .info h1{
        font-size:30px;
       letter-spacing: 10px;
       line-height: 1.6;
    }
    .info p{
        font-size:40px;
        letter-spacing:10px;
        }
     .top p {
        font-size:25px;

    }
       .sp-nav{
        display: none;
    }
    #hamburger{
        display: none;
    } 
    
    .pc-nav{
        display: block;
        line-height: 60px;
        margin: 0 0 0 auto;
    }

    .pc-nav ul {
        transition:all 0.5;
        margin: 0;
        display: flex;
    }
    
    .pc-nav li{
        font-size: 15px;
        margin: 0 0 0 15px;
    }
    
    .pc-nav li a{
        height:60px;
        color:#fff; 
        display: block;
        text-align: center;
        width: 100px;
        font-weight: bold;
        text-decoration: none;

         }
    
    .pc-nav a:hover{
    color:rgb(124, 190, 235);
    /* transform: scale(1.1); */
    }
    .pc-nav li{
        position: relative;
    }
    .pc-nav li ul{
        position: absolute;
        top: 50px;
        right: -80px;
        flex-direction:column;
        visibility: hidden;
        opacity: 0.8;
        }
        
        .pc-nav li ul a{
            display: block;
            width: 200px;
            border-bottom: 1px solid #fff;
        }
        .pc-nav li li{
            opacity: 0;
            transition:all 0.1s ;
            background: rgba(0, 0, 0, .8);

        }
        .pc-nav li:hover ul li{
            visibility: visible;
            opacity: 1;
        }
          /* ここからお知らせ・情報 */
.wrapper{
    width: 100%;
    margin:0 auto ;
    padding-bottom: 20px;
    background-image: url(../image/5099362_s.jpg);
    background-color:rgba(255, 255, 255, 0.9);
    background-blend-mode:lighten;
    background-size: cover;
    
}

.menu-bar h3{
    font-size:28px ;
    text-align: center;
    padding:40px 0;
   color: rgb(0, 0, 0);
}

.company-sp  section{
    font-size:20px;
    margin:0 auto;
    width: 95%;
    
} 

section.pany-sp dl{
    border-top: 1px solid #c8c8c8;
    display: table;
    width:100%;
}

section.pany-sp dl:last-child{
    border-bottom: 1px solid #c2bfbf;
}

section.pany-sp dl dt,
section.pany-sp dl dd{
    display: table-cell;
    padding:15px ;
    vertical-align: top;
    /* font-weight: bold; */
}
section.pany-sp dl dt{
    /* background:#f8f8f8; */
    width:20%;
    text-align: right;
    color: rgb(0, 0, 0);
}
section.pany-sp dl dd{
    width: 80%;
    padding-left: 80px;
    
}
section.pany-sp a{
    position: relative;
  display: inline-block;
  text-decoration: none;
  color: rgb(0, 47, 255);
}
section.pany-sp a::after{
    position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
section.pany-sp a:hover::after{
    transform-origin: left top;
    transform: scale(1, 1);
}
.news{
    width: 100%;
    margin: 0 auto;
    text-align: right;
}
section.pany-sp dl dd a span{
    color: red;
    font-weight: bold;
}
/*基本と主な共通部分は省略*/

a.btn-gradient {
    -webkit-transform: skew(-15deg);
    transform: skew(-15deg);
    color: #fff;
    border-radius: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(#2af598), to(#009efd));
    background-image: -webkit-linear-gradient(left, #2af598 0%, #009efd 100%);
    background-image: linear-gradient(90deg, #2af598 0%, #009efd 100%);
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  }
  
a.btn-gradient:hover {
    -webkit-transform: skew(0);
    transform: skew(0);
    color: #fff;
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
  }

 .news a {
    width: 100px;
    font-size: 16px;
    padding: 20px;
    border-radius: 6px;
    display: inline-block;
    margin-top: 30px;
    text-align: center;
    margin-right: 10%;
}


/* ここまでお知らせ・情報 */
   
    /* メイン始まり */

    .contents-sp{
        display: none;
    }
    aside{
        display: none;
    }
    main{
        max-width:100%;
        padding-bottom:100px;
        width: 100%;
        margin:0 auto;
        display: block;
        background-image: url(../image/home1.png);
        background-color:rgba(255,255,255,0.8);
        background-blend-mode:lighten;
        background-size: contain;
        
    }
    .contents{
        display:block;
        width: 90%;
        margin:0 auto;
    }
  
    .contents li{
     position:relative; 
    transition: 1s; 
    margin-bottom: 250px;
    }

     .contents li.show{
        opacity:1;
        transform: none;
    }  
     
    .contents li.show h2,
    .contents li.show p,
    main .contents li.show img{
        transform: none;
        opacity: 1;
    }
    /* .animationTarget{
        margin-bottom: 200px;
    } */
    
    .contents li:not(:first-of-type){
        margin-top: 200px;
    }
    
    .contents li:nth-of-type(odd) .contentsText{
        right:0;
        transform: translate(-20px, 20px);
    }
    
    .contents li:nth-of-type(even) .contentsText{
        align-items: flex-start;
        transform: translate(20px, 20px);
    }
    
    .contents li:nth-of-type(odd) img{
        transform: translate(-20px, 20px);
    }
    
    .contents li:nth-of-type(even) img{
        margin-left: auto;
        transform: translate(20px,20px);
    }
    
    .contentsText{
        display: flex;
        flex-direction: column;
        /* align-items: flex-end; */
        position: absolute;
        top: 50%; 
        width: 55%;
        margin:0 auto;
        padding:20px 20px 100px 20px;
        transform: translateY(20px);
        transition:1s;
        background:rgba(0, 0, 0, 0.767);
        border-radius: 10px;
    }
    .contents h2{
        font-size: 22px;
        font-weight: bold;
        white-space: nowrap;
        line-height: 1.6;
        padding:10px 20px;
        color: rgb(102, 95, 95);
        letter-spacing:0.2em;
        border-radius: 5px;
        opacity: 0;
        transform: translateY(20px);
        transition:1s;
        color: white;
        margin:0 auto;
    }
   
    .contents p{
        line-height: 1.8;
        width: 95%;
        font-size: 18px;
        padding: 20px;
        /* margin:10px; */
        border-radius: 5px;
        opacity: 0;
        transform: translateY(20px);
        transition:1s;
        color: rgb(102, 95, 95);
        color: white;
    }
    .contents p span{
        background-color: red;
        font-size: 20px;
    }
    
    .contents img{
        width: 60%;
        border-radius: 5px;
        display: block;
        opacity: 0;
        transform: translatex(-20px);
        transition: 1s .5s;
        position: relative;  
        height:auto;
        padding-top: 100px;
    } 
   
    .animationTarget a:hover{
        transform: scale(1.9);
    }
    
    .contentsText h4{
        display:inline-block;
        width: 60%;
        margin: 0 auto;
        text-align: center;
        background-color: white;
        padding: 15px 0;
        border-radius: 50px;
        position: absolute;
        bottom:25px;
        left: 25%;
        z-index: 1;
        transition: .3s;
        /* transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%); */
        
    }
    .contentsText h4 a{
        color: rgba(0, 0, 0, 0.767);
        padding: 15px 50px;
        cursor: pointer;
    }
   
   /* h4 a {
    color: #fff;
    font-size: 16px;
    background: #333;
    padding: 18px 30px;
    border-radius: 6px;
    position: relative;
    z-index: 1;
    display: inline-block;
    transition: .3s;
  } */
  h4 a::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 3px solid rgb(252, 1, 1);
    border-radius: 35px;
    box-sizing: border-box;
    z-index: -1;
    transform: scale(1.2);
    opacity: 0;
    transition: transform ease .3s, opacity .3s;
  }
  h4 a:hover {
    color: #333;
    background: transparent;
  }
  h4 a:hover::before {
    transform: scale(1);
    opacity: 1;
  }
    .font-smallright{
        font-size: 22px;
        position: absolute;
        left:0;
    }
  /* ここからフッター*/
footer {
    background: rgba(0, 0, 0, .8);
    width: 100%;
    text-align:center;
    height: 120px;
    position: relative;
}
.sns_footer{
    display: none;
}
.sns-sp{
    display: flex;
    justify-content:space-around;
    height: 120px;
   align-items:flex-start;
}
footer a{
    display:block;
    color: #fff;
    font-size: 40px;
    margin-top: 30px;
}

footer p{
    width: 100%;
    font-size:15px;
    color: rgb(255, 254, 254);
    position:absolute; 
    top:100px;
}

.fa-facebook-f {
    background:linear-gradient(#053fff,#2367ee);
    border-radius: 25%;
    padding: 8px 16px;
}

.fa-twitter{
    padding: 5px;
    background:linear-gradient(#05fbff,#1d62f0);
    border-radius: 25%;

}

.fa-youtube{
    padding: 5px;
    background:linear-gradient(#f00505,#e75e5e);
    border-radius: 25%;
}

.fa-instagram{
    padding: 5px;
    background:linear-gradient(#340383,#e07c42,#c918ba);
    border-radius: 25%;

}
    a.gototop {
        background: rgba(0, 0, 0, .8);
        bottom: 1%;
        color: #fff;
        display: none;
        font-size: 3rem;
        height: 3rem;
        line-height: 3.8rem;
        position: fixed;
        right: 2%;
        text-align: center;
        text-decoration: none;
        width: 3rem;
        margin-bottom: 50px;
    }
   
      
      @keyframes huerotator {
        0% {
          -webkit-filter: hue-rotate(0deg);
          filter: hue-rotate(0deg);
        }
      
        100% {
          -webkit-filter: hue-rotate(360deg);
          filter: hue-rotate(360deg);
        }
      }
      
         @keyframes titleAnimation {
            0% {
                letter-spacing: .3em;
                opacity: 0;
            }  }

         /* 事業内容ページ */
         /* お米コンサルティング */
         .subimage img{
             width: 40%;
         }
         .info{
            margin: 80px auto 0;
        }
         .infoo h1{
            font-size:35px;
            /* font-weight: bold; */
            width: 90%;
            margin:0 auto;
            margin-top: 20px;
            white-space: nowrap;
            text-align: center;
            padding-top: 80px;
            color: rgb(102, 95, 95);
            border-bottom: 6px solid rgb(255, 196, 0);
            padding-bottom: 10px;
        } 
        .rice-top p{
            font-size: 22px;
            margin: 0 auto;
            margin-bottom: 60px;
            width: 80%;
            line-height :35px;
            text-align: center;
            color: #727171;
            
        } 
        .rice-top h2{
            font-size: 24px;
            margin: 20px auto;
            width: 90%;
            color: #727171;
            text-align: center;
        }
         section p{
            font-size: 22px;
            margin: 0 auto;
            margin-bottom: 60px;
            width: 80%;
            line-height :35px;
            text-align: center;
            color: #727171;
            
        } 
        section h2{
            font-size: 24px;
            margin: 20px auto;
            width: 90%;
            color: #727171;
            text-align: center;
        }
            /* お米の日本地図 */
        .card-container{
            margin-bottom: 200px;
            margin-top: 200px;
        }
      .card-text h3{ 
        font-size:1.9em ;
        line-height: 200%;
    }
    
    .card-text{
        min-width:60%;
        margin: 0px auto;
        margin-top: 350px;
        color:  rgb(255, 255, 255);
        padding:40px 10px;
        background: rgba(0, 0, 0, 0.945);
        opacity: 0.8;
      }
      

      /* WEBページ */
      .container-web {
        display:block;
      }
      .container2-web{
          display:block;
      }
    .txt-contents p{
        font-size: 20px;
        padding: 10px;
        margin-top: 70px;
    }
     /* 企業理念 */
.about{
    width: 100%;
    margin: 0 auto;
    padding-top: 100px;
    max-width: 1280px;
}
.about_main{
    width: 90%;
    margin: 0 auto;
}
.about_main h2{
    font-size: 24px;
    text-align: center;
    margin: 0 0 30px 0;
    font-weight: bold;
}
.about_main p{
    text-align: center;
    line-height: 1.4;
    font-size: 18px;
}
.about_main h3{
    font-size: 24px;
    text-align:right;
    font-size: 18px;
    margin-top: 30px;
}
      /* 会社概要ページ */
.company  section{
    font-size:25px;
    margin:0 auto;
    width: 60%;
    margin-bottom: 100px;
    line-height: 1.5;
} 

section.pany dl{
    border-top: 1px solid #959595;
    display: table;
    width:100%;
}

section.pany dl:last-child{
    border-bottom: 1px solid #959595;
}

section.pany dl dt,
section.pany dl dd{
    display: table-cell;
    padding:15px 10px;
    vertical-align: top;
    line-height: 1.5;
    letter-spacing: 2px;
}
section.pany dl dt{
    background:#f8f8f8;
    width:30%;
}
section.pany dl dd{
    width: 70%;
}

/* お問い合わせページ*/

.contact{
    background: #fafafa;
    padding:50px 0;
}

.contact h2{
    font-size: 30px;
    text-align: center;
}

.contact form{
    margin:30px auto 0;
    width:600px;
}

.contact form dl{
    margin-bottom: 30px;
}

.contact form dl dt{
    font-size:13px;
    margin-bottom: 10px;
}

.contact form dl.required dt:after{
    color:#f30;
    content:"*必須";
    font-size: 10px;
    margin-left: 10px;
    vertical-align:super;
}

.contact form dl dd input,
.contact form dl dd textarea,
.contact form dl dd select{
    /*width:100%とpadding:10pxが干渉してしまうのを防ぐ*/
    box-sizing: border-box; /*borderとpaddingを幅と高さに含めます*/
    border:1px solid #d2d2d2;
    border-radius:3px;
    padding:10px;
    width:100%;

}

.contact form dl dd textarea{
    height:200px;
}

.contact form dl dd select{
    background:#fff;
    height:46px;
}

.contact form .buttonArea{
    text-align:center;
    margin-bottom: 500px;

}

.contact form .buttonArea button{
    background-color: #59a1be;
    border:none;
    border-radius: 3px;
    box-shadow:2px 2px #05141d;
    color:#fff;
    font-size:16px;
    font-weight: bold;
    padding:8px 0 10px;
    text-decoration: none;
    width:50%;
}
.thank .buttonArea button{
    background-color: red;
    padding: 100px;
}


/* contactページ終わり*/
/* ニュースページ スマホ*/
.nyu-s {
    width: 100%;
    margin: 0 auto;
    background-image: url(../image/home1.png);
     background-color:rgba(255, 255, 255, 0.6);
     background-blend-mode:lighten;
     background-size:cover;
}
.nyu-s .subimage img{
    width:100%;
    padding-top: 20px;
}
.News{
    width: 90%;
    margin: 0 auto;
    padding-bottom: 30px;
}
.New h1{
    text-align: left;
    font-size: 24px;
    margin:20px 0;
}
.getu h2{
    font-size: 20px;
    padding-left: 10px;
    border-left: 5px solid #2367ee;
    margin: 20px 0;
}
.getu p{
    font-size: 14px;
    line-height: 1.6;
    padding:20px 0;
}
.getu img{
    width: 100%;
    height: 100%;
    margin-top: 30px;
}
.bana{
    text-align: center;
}
.bana img {
    width: 80%;
    height: 50%;
}
.bana h2{
    font-size: 20px;
    padding-left: 10px;
    border-left: 5px solid #2367ee;
    margin: 20px 0;
    text-align: left;
}
.bana p{
    font-size: 14px;
    line-height: 1.6;
    padding:20px 0;
}

.youtube{
    width: 100%;
    aspect-ratio: 16/9;
}
.youtube iframe{
    width: 100%;
    height:100% ;
}
.you1{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

}