@charset "utf-8";

/* 
name: style
designer: nobuomatsumoto
designer_url: https://adclip.net/ 
*/

/* 点滅 */
.sdown{
    -webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

.whttc h2{line-height:1.2em; font-weight:normal;}
.whttc .sec2 .right{background:rgba(143,195,31,0.9);}
.whttc img{width:100%;}
.supvsr .sec2 .box {background:#f9f9f9;}
.supvsr .sec2 .box h2{font-size:200%;}
.supvsr .sec2 .box h3{font-size:140%;}
.supvsr .sec2 .box p{margin-top:20px;}
.supvsr .sec2 .box:first-childp{margin-top:0;}
.supvsr img{width:100%;}
.retail img{width:100%;}
.retail .sec1 .box h3{margin-top:10px;}


/*画像サイズ1080px以上*/
@media  print, screen and (min-width:1080px) {

.cntpg.type1 h2{margin:100px auto; font-size:200%; text-align:center;}

.cntpg .abutus .sec2 dl{width:80%; margin:0 auto; display:flex; flex-wrap:wrap; border-top:#aaa 1px dotted;}
.cntpg .abutus .sec2 dt{padding:20px; width:20%; border-bottom:#aaa 1px dotted;}
.cntpg .abutus .sec2 dd{padding:20px; width:80%; border-bottom:#aaa 1px dotted;}

.whttc h2{font-size:200%;}
.whttc h2.typ2{margin-bottom:40px; border-bottom:#8fc31f 5px solid;}
.whttc p{margin-top:20px;}
.whttc .sec2 {height:700px; position:relative; color:#fff;}
.whttc .sec2 h2{font-size:300%;}
.whttc .sec2 p{font-size:140%;}
.whttc .sec2 .left{width:65%; height:700px; position:absolute; bottom:0; right:0; text-align:right; overflow:hidden;}
.whttc .sec2 .left img{width:100%; height:700px; object-fit:cover;}
.whttc .sec2 .right{padding:40px 40px 40px 40px; position:relative; top:100px; z-index:1; display:inline-block;}
.whttc .sec3 {margin-top:100px;}
.whttc .sec3 .box {display:flex; justify-content:space-between;}
.whttc .sec3 .box .left{width:40%;}
.whttc .sec3 .box .right{width:50%;}
.whttc .sec4 {margin-top:100px;}
.whttc .sec4 .box {display:flex; justify-content:space-between; flex-direction: row-reverse;}
.whttc .sec4 .box .left{width:30%;}
.whttc .sec4 .box .right{width:55%;}

.supvsr .sec2 .box{padding:40px; display:flex; justify-content:space-between;}
.supvsr .sec2 .box h2{margin-bottom:40px;}
.supvsr .sec2 .box h3{margin-bottom:15px;}
.supvsr .sec2 .box .left{width:25%;}
.supvsr .sec2 .box .right{width:60%;}
.supvsr .sec2 .box .right ul{margin-bottom:40px; border-top:#aaa 1px dotted;}
.supvsr .sec2 .box .right li{padding:10px; border-bottom:#aaa 1px dotted;}
.supvsr .sec3 .box {width:65%; margin:60px auto;}
.supvsr .sec3 .box h2{font-size:200%; text-align:center;}
.supvsr .sec3 .box p{margin-top:20px;}

.retail .sec1{display:flex; flex-wrap:wrap;}
.retail .sec1 .box{width:33.33%; padding:10px;}

.athrbox h3{margin-top:40px;}
.athrbox ul{margin-top:40px;}


}/*画像サイズ600px以上1080以下*/
@media only screen and (min-width:600px)and (max-width:1080px)  {

.cntpg.type1 h2{margin:100px auto; font-size:200%; text-align:center;}

.cntpg .abutus .sec2 dl{width:80%; margin:0 auto; display:flex; flex-wrap:wrap; border-top:#aaa 1px dotted;}
.cntpg .abutus .sec2 dt{padding:20px; width:30%; border-bottom:#aaa 1px dotted;}
.cntpg .abutus .sec2 dd{padding:20px; width:70%; border-bottom:#aaa 1px dotted;}

.whttc h2{font-size:160%;}
.whttc h2.typ2{margin-bottom:40px; border-bottom:#8fc31f 5px solid;}
.whttc p{margin-top:20px;}
.whttc .sec2 {height:700px; position:relative; color:#fff;}
.whttc .sec2 h2{font-size:200%;}
.whttc .sec2 p{font-size:120%;}
.whttc .sec2 .left{width:80%; height:700px; position:absolute; bottom:0; right:0; text-align:right; overflow:hidden;}
.whttc .sec2 .left img{width:100%; height:700px; object-fit:cover;}
.whttc .sec2 .right{padding:40px 40px 40px 40px; position:relative; top:100px; z-index:1; display:inline-block;}
.whttc .sec3 {margin-top:60px;}
.whttc .sec3 .box {display:flex; justify-content:space-between;}
.whttc .sec3 .box .left{width:40%;}
.whttc .sec3 .box .right{width:55%;}
.whttc .sec4 {margin-top:60px;}
.whttc .sec4 .box {display:flex; justify-content:space-between; flex-direction: row-reverse;}
.whttc .sec4 .box .left{width:30%;}
.whttc .sec4 .box .right{width:605%;}

.supvsr .sec2 .box{padding:40px; display:flex; justify-content:space-between;}
.supvsr .sec2 .box h2{margin-bottom:40px;}
.supvsr .sec2 .box h3{margin-bottom:15px;}
.supvsr .sec2 .box .left{width:35%;}
.supvsr .sec2 .box .right{width:60%;}
.supvsr .sec2 .box .right ul{margin-bottom:40px; border-top:#aaa 1px dotted;}
.supvsr .sec2 .box .right li{padding:10px; border-bottom:#aaa 1px dotted;}
.supvsr .sec3 .box {width:65%; margin:60px auto;}
.supvsr .sec3 .box h2{font-size:200%; text-align:center;}
.supvsr .sec3 .box p{margin-top:20px;}

.retail .sec1{display:flex; flex-wrap:wrap; justify-content:space-between;}
.retail .sec1 .box{width:49%; padding:10px 0;}

.athrbox h3{margin-top:40px;}
.athrbox ul{margin-top:40px;}

}/*画像サイズ600px以下*/
@media only screen and (max-width:599px)  {

.cntpg.type1 h2{margin:100px auto; font-size:200%; text-align:center;}

.cntpg .abutus .sec2 dl{margin:0 auto; display:flex; flex-wrap:wrap; border-top:#aaa 1px dotted;}
.cntpg .abutus .sec2 dt{padding:10px; width:25%; border-bottom:#aaa 1px dotted;}
.cntpg .abutus .sec2 dd{padding:10px; width:75%; border-bottom:#aaa 1px dotted;}

.whttc h2{font-size:200%;}
.whttc h2.typ2{margin-bottom:40px; border-bottom:#8fc31f 5px solid;}
.whttc p{margin-top:20px;}
.whttc .sec2 {position:relative; color:#fff;}
.whttc .sec2 h2{font-size:180%;}
.whttc .sec2 p{font-size:120%;}
.whttc .sec2 .left{width:100%; }
.whttc .sec2 .left img{width:100%;}
.whttc .sec2 .right{padding:30px;}
.whttc .sec3 {margin-top:40px;}
.whttc .sec3 .box {}
.whttc .sec3 .box .left{width:60%; margin:40px auto 20px auto;}
.whttc .sec3 .box .right{}
.whttc .sec4 {margin-top:40px;}
.whttc .sec4 .box {}
.whttc .sec4 .box .left{width:60%; margin:40px auto 20px auto;}
.whttc .sec4 .box .right{}

.supvsr .sec2 .box{padding:30px;}
.supvsr .sec2 .box h2{margin-bottom:40px;}
.supvsr .sec2 .box h3{margin-bottom:15px;}
.supvsr .sec2 .box .left{}
.supvsr .sec2 .box .right{}
.supvsr .sec2 .box .right ul{margin-bottom:40px; border-top:#aaa 1px dotted;}
.supvsr .sec2 .box .right li{padding:10px; border-bottom:#aaa 1px dotted;}
.supvsr .sec3 .box {width:90%; margin:60px auto;}
.supvsr .sec3 .box h2{font-size:200%; text-align:center;}
.supvsr .sec3 .box p{margin-top:20px;}

.retail .sec1{}
.retail .sec1 .box{margin-top:20px;}
.retail .sec1 .box:first-child{margin-top:0;}

.athrbox h3{margin-top:40px;}
.athrbox ul{margin-top:40px;}
}