/*============================================================================
基本スタイル
============================================================================*/
@charset "utf-8";

/*----------------------------------------------------------------------------

----------------------------------------------------------------------------*/
.top_frame{
    display:flex;
    margin-top:20px;
    margin-bottom:20px;
}

.top_frame u{
    text-decoration:underline solid #ff0000;
}

.top_frame .left{
    position:relative;
    width:400px;    
}

.top_frame .left img{
    width:100%;
    position:absolute;
    left:0;
    top:0;
}

.top_frame .right{
    padding-left:10px;
    width:570px;
}

.top_frame .right .content_item,
.content_item_line{
    display:block;
    position:relative;
    margin:20px 0 0 0;
    padding:30px 10px;
    width:100%;
    background:#ffffff;
    border:solid 5px #e25a3c;
    box-shadow:inset 2px 2px 2px rgba(0,0,0,0.2),2px 2px 2px rgba(0,0,0,0.2);
    border-radius:20px;
    cursor:pointer;
    transition:all 0.5s;
}

.top_frame .right .content_item .small{
    font-size:24px;
    line-height:24px;    
}


.top_frame .right .content_item img{
    position:absolute;
    width:50px;
    right:30px;
    bottom:20px;
    pointer-events:none;
}

.top_frame .right .content_item a,
.content_item_line a{
    color:#000000;
    font-size:32px;
    font-weight:bold;
    line-height:32px;
    text-align:center;
}

.top_frame .right .content_item.cost a{
    font-size:30px;
    line-height:32px;
}

.top_frame .right .content_item a i,
.content_item_line a i{
    font-style:normal;
    text-decoration:none;
    color:#ff0000;
    font-weight:bold;
}

.top_frame .right .content_item:hover,
.content_item_line:hover{
    background:#ffffcc;
}

.top_frame .right .content_item.blue{
    border:solid 5px #094a9f;
}

.top_frame .right .content_item.yellow,
.content_item_line.yellow{
    border:solid 5px #77771e;
}

.top_frame .right .content_item.green,
.content_item_line.green{
    background:#e4fffd;
    border:solid 5px #1e7724;
}

.top_frame .right .content_item.green:hover,
.content_item_line.green:hover{
    background:#b0ff98;
}

.content_item_line{
    margin:10px 0 0 0;
}

.yoko_bar{
    position:relative;
    text-align:center;
    background:#5c5c5c;
    margin-top:50px;
    padding:20px 40px;
    border-radius:20px;
    cursor:pointer;
}

.yoko_bar a{
    color:#ffffff;
    font-size:32px;
    line-height:32px;
    font-weight:bold;
}

.yoko_bar img{
    position:absolute;
    width:100px;
    height:100px;
    right:-10px;
    top:30px;
}

@media screen and (max-width:639px){
    .top_frame{
        display:block;
    }

    .top_frame .left{
        display:none;
        position:none;
        width:100%;
    }

    .top_frame .left img{
        position:none;
    }

    .top_frame .right{
        width:100%;        
    }

    .inflation a{
        font-size:3.4vw;
        line-height:4vw;
    }

    .inflation .nazeka{
        font-size:4vw;
        line-height:4vw;
    }
}

/*----------------------------------------------------------------------------
商品モニター(工業団地等)
----------------------------------------------------------------------------*/
.monitor_boshu{
    width:100%;
    margin-bottom:40px;
    padding:5px;
    border:solid 3px #808080;

    cursor:pointer;
    border-color:#808080;
}

.monitor_boshu .frame{
    width:100%;
    display:flex;

}
.monitor_boshu .frame .left{
    width:40%;
}

.monitor_boshu .frame .left .header{
    color:#000000;
    background:#ffd900;
    font-family:'M PLUS 1p',sans-serif;
    font-size:32px;
    line-height:32px;
    font-weight:bold;
    text-align:center;
    padding:5px 0;
}

.monitor_boshu .frame .left .photo{
    background:#00a000;
    width:100%;
    height:350px;
}

.monitor_boshu .frame .left .photo img{
    width:100%;
    height:100%;
}

.monitor_boshu .frame .right{
    width:60%;
    display:grid;
    grid-template-rows:auto auto;
}

.monitor_boshu .frame .right .right_box_up{
    margin:0 0 0 10px;
    border-radius:20px;
    border:solid 3px #155315;
    min-height:0;
}

.monitor_boshu .frame .right .right_box_up h3{
    margin:0;
    padding:0;
    background:#155315;
    color:#ffffff;
    font-size:32px;
    line-height:34px;
    font-weight:bold;
    padding:10px 0;
    border-radius:17px 17px 0 0;
}

.monitor_boshu .frame .right .right_box_up h3 .yellow{
    color:#ffff00;
}

.monitor_boshu .frame .right .right_box_up .body{
    padding:10px;
    font-size:24px;
    line-height:32px;
    text-align:center;
}

.monitor_boshu .frame .right .right_box_up .body hr{
    width:90%;
    margin:10px auto 10px auto;
    border:solid 2px #45d445;
    border-radius:4px;
}

.monitor_boshu .frame .right .right_box_up .body .bold{
    color:#ff0000;
    font-size:40px;
    line-height:40px;
    font-weight:bold;
    margin-top:10px;
}

.monitor_boshu .frame .right .right_box_down{
    padding-top:40px;
}

.monitor_boshu .monitor_boshu_detail{
    text-align:center;
}

.monitor_boshu .monitor_boshu_detail a{
    padding:5px 20px;
    margin-top:20px;
    border:solid 2px #dac737;
    border-radius:30px;
    font-family:'M PLUS 1p',sans-serif;
    font-size:32px;
    font-weight:bold;
    line-height:32px;
    transition:background-color 0.3s;
    background-color:#ebf0b5;
}

article .monitor_boshu .monitor_boshu_detail a:hover,
article .monitor_boshu:hover .monitor_boshu_detail a{
    background-color:#ffd2af;
}

article .monitor_boshu:hover{
    border-color:#db1d1d;
}

@media screen and (max-width:639px){
    .monitor_boshu .frame .left .header{
        font-size:3vw;
        line-height:3vw;
    }

    .monitor_boshu .frame .left .photo{
        background:#00a000;
        width:100%;
        height:auto;
    }

    .monitor_boshu .frame .right .right_box_up h3{
        font-size:3.5vw;
        line-height:3.5vw;
    }
            
    .monitor_boshu .frame .right .right_box_up .body{
        font-size:4vw;
        line-height:4vw;
    }
    
    .monitor_boshu .frame .right .right_box_up .body .bold{
        font-size:5vw;
        line-height:5vw;
    }

    .monitor_boshu .frame .right .right_box_down{
        padding-top:2vw;
    }

    .monitor_boshu .monitor_boshu_detail{
        margin-bottom:3vw;
    }

    .monitor_boshu .monitor_boshu_detail a{
        margin-top:1vw;
        font-size:3vw;
        line-height:3vw;
    }
}

/*----------------------------------------------------------------------------
商品モニター
----------------------------------------------------------------------------*/
/*
article .monitor_oubo{
    display:block;
    width:100%;
    margin:40px auto 50px auto;
    padding:10px 20px 30px 20px;
    background:#fcf1f1;

}

article .monitor_oubo h3{
    margin:0;
    margin-bottom:20px;
    text-align:center;
    border:none;
    font-size:32px;
    line-height:24px;
    color:#ffffff;

    background:linear-gradient( 60deg,#12d6df, #f70fff,#faea3d, #fd644f);
    background-size:400%;
    animation: textAnime 15s infinite;
}

@keyframes textAnime{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

article .monitor_oubo .monitor_detail{
    text-align:center;
}

article .monitor_oubo .monitor_detail a{
    background:#4040ff;
    color:#ffffff;
    font-weight:bold;
    padding:5px 20px;
    border-radius:20px;
}

article .monitor_oubo .monitor_detail a:hover{
    background:#fcd8d8;
    color:#4040ff;
}

@media screen and (max-width:900px){
    article .monitor_oubo{
        width:90vw;
        font-size:4vw;
        line-height:5vw;
        margin:3vw auto 0 auto;
        padding:2vw 2vw 5vw 2vw;
    }
    
    article .monitor_oubo h3{
        font-size:5vw;
        line-height:5vw;
    }
    
    article .monitor_oubo .monitor_detail a{
        padding:2vw 5vw;
        border-radius:5vw;
        font-size:3vw;
        line-height:4vw;
    }
}
*/

/*----------------------------------------------------------------------------
インフレ
----------------------------------------------------------------------------*/
article .inflation{
    position:relative;
    width:85%;
    margin:60px auto 40px auto;
    padding:10px 20px;
    text-align:center;
    background:#fcffad;
    box-shadow:inset 0 0 0 5px #76f36b,0 0 0 5px #297921;
    border:solid 5px #40bb35;
    border-radius:60px 20px 60px 20px;
    font-size:32px;
    line-height:40px;
    cursor:pointer;
}

article .inflation img{
    position:absolute;
    width:100px;
    height:100px;
    right:-40px;
    bottom:10px;
}

article .inflation a{
    color:#000000;
}

article .inflation .nazeka{
    display:inline-block;
    margin:20px 0 5px 0;
    padding:0 20px 2px 20px;
    border-radius:20px;
    height:38px;
    font-size:32px;
    line-height:32px;
    font-weight:bold;
    color:#ffffff;
    background:#ff3b3b;
    text-align:center;
}

@media screen and (max-width:900px){
    article .inflation{
        width:calc(100% - 3vw);
        margin:10vw auto 10vw auto;
        padding:5vw 3vw 3vw 3vw;
        box-shadow:inset 0 0 0 1vw #76f36b,0 0 0 1vw #297921;
        border:solid 1vw #40bb35;
        border-radius:20vw 8vw 20vw 8vw;
        font-size:4vw;
        line-height:4.5vw;
    }
    
    article .inflation img{
        width:15vw;
        height:15vw;
        right:0;
        bottom:2vw;
    }
    
    article .inflation .nazeka{
        margin:2vw 0 0 0;
        padding:0 3vw 1vw 3vw;
        border-radius:6vw;
        height:6vw;
        font-size:5vw;
        line-height:5vw;
    }
    

}

/*----------------------------------------------------------------------------
資料ダウンロード
----------------------------------------------------------------------------*/
article .download{
    width:930px;
    margin:10px auto 0 auto;
    padding:0;
    border-radius:10px;
    background-image:linear-gradient(#9bbece,#ececec);
}

article .download .title{
    margin:0;
    padding:5px;
    color:#ffffff;
    background:#0056a7;
    text-align:center;
    font-size:25px;
    font-weight:bold;
    line-height:30px;
    text-shadow:0 0 5px #000000;
    border-radius:10px 10px 0 0;
}

article .download .attention{
    margin:0;
    padding:10px 10px 15px 10px;
    background-image:linear-gradient(to right,rgba(255,255,255,0) 0%,#ffffff 30%,#ffffff 70%,rgba(255,255,255,0) 100%);
    text-align:center;
    text-shadow:1px 1px 5px #ffffff;
    font-size:20px;
    line-height:20px;
}

article .download .list{
    margin:10px 20px 0 20px;
    padding:0;
}

article .download .list .item{
    float:left;
    width:435px;
    height:80px;
    margin:5px;
    padding:10px;
    background-image:linear-gradient(#579af1,#2c6bbd);
    box-shadow:2px 2px 1px rgba(0,0,0,0.3);
    border-radius:5px;
    text-align:center;
    font-size:25px;
    line-height:30px;
    font-weight:bold;
    cursor:pointer;
}

article .download .item.line1{
    padding:25px 10px;
}

article .download .item a{
    color:#ffffff;
}

article .download .item:hover{
    background-image:linear-gradient(#376199,#1c4272);
}

article .download .item:hover a{
    text-shadow:1px 1px 2px #000000;
    color:#ffff34;
}

article .download .item.no-link{
    cursor:auto;
    color:#404040;
    font-weight:normal;
}

/* リンク無し（配信準備中） */
article .download .item.no-link:hover{
    background-image:linear-gradient(#579af1,#2c6bbd);
}

@media screen and (max-width:900px){
    article .download{
        width:100%;
        margin:10px auto 0 auto;
        border-radius:5vw;
    }
    
    article .download .title{
        padding:2vw;
        font-size:5vw;
        line-height:5vw;
        text-shadow:0 0 0.1vw #000000;
        border-radius:5vw 5vw 0 0;
    }
    
    article .download .attention{
        padding:1vw 5vw 2vw 5vw;
        text-shadow:0.5vw 0.5vw 3vw #ffffff;
        font-size:4vw;
        line-height:4vw;
        text-align:left;
    }
    
    article .download .list{
        margin:2vw 2vw 0 2vw;
        padding:0;
    }
    
    article .download .list .item{
        float:none;
        width:auto;
        height:15vw;
        margin:2vw;
        padding:2vw;
        box-shadow:0.5vw 0.5vw 0.5vw rgba(0,0,0,0.3);
        border-radius:2vw;
        font-size:5vw;
        line-height:5vw;
    }
    
    article .download .item.line1{
        padding:25px 10px;
    }
    
    article .download .item a{
        color:#ffffff;
    }
    
    article .download .item:hover{
        background-image:linear-gradient(#376199,#1c4272);
    }
    
    article .download .item:hover a{
        text-shadow:1px 1px 2px #000000;
        color:#ffff34;
    }
    
    article .download .item.no-link{
        cursor:auto;
        color:#404040;
        font-weight:normal;
    }
    
    /* リンク無し（配信準備中） */
    article .download .item.no-link:hover{
        background-image:linear-gradient(#579af1,#2c6bbd);
    }
}

/*----------------------------------------------------------------------------
ネクストとは
----------------------------------------------------------------------------*/
article h2.about{
    margin-top:60px;
}

article h2.about .subtitle{
    font-size:24px;
}

article .about_next{
    margin:0 0 30px 0;
}

article .about_next dl{
    width:980px;
    padding:10px;
    margin-bottom:20px;
    background:#d5d5d5;
    border-radius:20px;
    box-shadow:5px 5px 5px rgba(0,0,0,0.3);
}

article .about_next dl dt{
    float:left;
    width:250px;
    height:64px;
    font-size:30px;
    line-height:30px;
    font-weight:bold;
}

article .about_next dl dt.full{
    float:none;
    width:960px;
    height:40px;
    font-size:32px;
    line-height:32px;
    font-weight:bold;
    text-align:center;
}

article .about_next dl dd{
    position:relative;
    width:710px;
    height:64px;
    margin-left:250px;
    font-size:18px;
    line-height:30px;
    font-weight:normal;
}

article .about_next dl dd::before{
    position:absolute;
    content:"";
    border-top:solid 10px transparent;
    border-bottom:solid 10px transparent;
    border-left:solid 20px #ff0000;
    left:-30px;
    top:5px;
}

article .about_next .small{
    font-size:16px;
    line-height:20px;
    color:#ff0000;
}

@media screen and (max-width:639px){
    article .about_next{
        width:100%;
        margin:20px 0 30px 0;
    }

    article .about_next dl{
        width:100%;
    }

    article .about_next dl dt{
        width:100%;
        height:auto;
        font-size:4vw;
        margin-top:20px;
        line-height:4vw;
    }

    article .about_next dl dd{
        width:90%;        
        margin-left:10%;
        font-size:4vw;
        line-height:4vw;
        height:auto;
    }

    article .about_next dl dd::before{
        display:none;
    }

    article .about_next dl dt.full{
        width:100%;
    }
}

/*----------------------------------------------------------------------------
4つの特徴 (ver.2)
----------------------------------------------------------------------------*/
article .feature{
    width:900px;
    margin:20px auto 0 auto;
    padding:0 0 5px 0;
    background:linear-gradient(180deg,#ffd484,#fff6d9);
    box-shadow:10px 10px #dbb774;
    border-radius:10px;
}

article .feature h3{
    margin:0;
    padding:10px 0 0 0;
    background:none;
    border:none;
    color:#000000;
    font-size:35px;
    line-height:40px;
    font-weight:bold;
}

article .feature .iconclick{
    position:absolute;
    width:100px;
    height:100px;
    left:calc(100% - 110px);
    top:-20px;
    /* top:70px; */
    text-align:right;
    transition:width 0.2s;
}

article .feature .iconclick:hover{
    /*
    top:-50px;
    height:130px;
    */
    width:150px;
    height:100px;
}

article .feature .iconclick img{
    width:100%;
}

article .feature .entry{
    clear:both;
    display:block;
    position:relative;
    width:880px;
    height:170px;
    margin:10px auto 10px auto;
    padding:10px;
    cursor:pointer;
    background-image:linear-gradient(135deg,#fff6d9,#f3d36b);
}

article .feature .entry:hover{
    background-image:linear-gradient(135deg,#f0ffd9,#76f36b);
}

article .feature .entry .image{
    position:static;
    float:left;
    width:200px;
    height:150px;
    border-radius:10px;
}

article .feature .entry .image img{
    width:200px;
    border-radius:10px;
}

article .feature .entry .detail{
    position:static;
    margin:0 0 0 200px;
    padding-left:10px;
    font-size:24px;
    line-height:30px;
}

article .feature .entry .detail h4{
    color:#0b0b50;
    padding:5px 0 10px 0;
    text-align:left;
    font-size:30px;
    line-height:30px;
    font-weight:bold;
}

article .feature .entry .detail h4 a{
    color:#0b0b50;
    padding:0 10px;
    background-image:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(255, 199, 241,0.3) 40%,rgba(255, 132, 224,0.3) 80%,rgba(0,0,0,0) 90%,rgba(0,0,0,0));
}

article .feature .entry:hover .detail h4 a{
    background-image:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(255, 255, 132,0,5) 40%,rgba(255,255,0,0.5) 80%,rgba(0,0,0,0) 90%,rgba(0,0,0,0));
}

article .feature .entry .detail h4 b{
    font-size:35px;
    font-weight:bold;
    color:#d00000;
}

article .feature .entry .detail u{
    text-decoration:underline wavy 2px #ff0000;
}

article .feature .entry .detail .memo{
    position:static;
    font-size:14px;
    line-height:20px;
    margin-top:5px;
}


@media screen and (max-width:900px){
    article .feature{
        width:100%;
        padding:0 0 5px 0;
        box-shadow:1vw 1vw #dbb774;
        border-radius:3vw;
        margin-top:2vw;
    }
    
    article .feature h3{
        padding:1.5vw 0 0 0;
        font-size:5vw;
        line-height:5vw;
    }
    
    article .feature .iconclick{
        width:20vw;
        height:20vw;
        left:calc(100% - 25vw);
        top:5vw;
    }
    
    article .feature .iconclick:hover{
        width:10vw;
        height:10vw;
    }
    
    article .feature .entry{
        width:87vw;
        height:auto;
        margin:2vw auto 2vw auto;
        padding:4vw 2vw;
    }
    
    article .feature .entry .image{
        float:none;
        width:80%;
        height:auto;
        margin:0 auto 0 auto;
        border-radius:2vw;
    }
    
    article .feature .entry .image img{
        width:100%;
        border-radius:2vw;
    }
    
    article .feature .entry .detail{
        margin:0;
        padding-left:1vw;
        font-size:4vw;
        line-height:5vw;
    }
    
    article .feature .entry .detail h4{
        padding:1vw 0 1vw 0;
        font-size:5vw;
        line-height:6vw;
    }
    
    article .feature .entry .detail h4 a{
        color:#0b0b50;
        padding:0 10px;
    }
    
    article .feature .entry .detail h4 b{
        font-size:6vw;
    }

    article .feature .entry .detail .memo{
        font-size:3vw;
        line-height:4vw;
        margin-top:3vw;
    }   
}

/*----------------------------------------------------------------------------
5つの用途
----------------------------------------------------------------------------*/
article .uses{
    clear:both;
    margin:20px auto 0 auto;
    width:800px;
}

article .uses .entry{
    position:relative;
    clear:both;
    background:linear-gradient(135deg,#ffffff,#e0e0e0);
    margin:10px 0 10px 0; 
    padding:10px 20px;   
    border-radius:5px;
    /* box-shadow:inset 5px 5px 5px rgba(0,0,0,0.1); */
    cursor:pointer;
}

article .uses .entry:hover{
    background:linear-gradient(135deg,#ffffff,#fdc9c9);    
}

article .uses .entry .iconclick{
    position:absolute;
    left:690px;
    top:150px;
    width:100px;
    height:100px;
}

article .uses .entry .iconclick img{
    width:100%;
}

article .uses .entry .image{
    float:left;
    width:300px;
    height:230px;
}

article .uses .entry .image img{
    width:100%;
    border-radius:10px;
}

article .uses .entry .detail{
    float:left;
    width:450px;
    margin-left:10px;
    font-size:28px;
    font-weight:normal;
    line-height:35px;
}

article .uses .entry .detail a{
    text-decoration:none;   
}

article .uses .entry .detail .flower{
    float:right;
    width:200px;
    height:150px;
    background:#ff8080;
}

article .uses .entry .detail .flower img{
    width:100%;
    border-radius:10px;
}

@media screen and (max-width:639px){
    article .uses{
        margin:5vw auto 0 auto;
        width:100%;
    }
    
    article .uses .entry{
        position:relative;
        clear:both;
        background:linear-gradient(135deg,#ffffff,#e0e0e0);
        margin:2vw 0 2vw 0; 
        padding:2vw 3vw;   
        border-radius:2vw;
    }
    
    article .uses .entry:hover{
        background:linear-gradient(135deg,#ffffff,#fdc9c9);    
    }
    
    article .uses .entry .iconclick{
        position:absolute;
        left:75vw;
        top:5vw;
        width:15vw;
        height:15vw;
    }
    
    article .uses .entry .image{
        float:none;
        width:80%;
        height:auto;
        margin:0 auto 0 auto;
    }
        
    article .uses .entry .detail{
        float:none;
        width:100%;
        margin-left:0;
        font-size:5vw;
        line-height:6vw;
    }
    
    article .uses .entry .detail .flower{
        float:none;
        width:80%;
        height:auto;
        margin:3vw auto 0 auto;
    }
    
    article .uses .entry .detail .flower img{
        border-radius:4vw;
    }    
}

/*----------------------------------------------------------------------------
動画へのリンク
----------------------------------------------------------------------------*/
article .shiken_video{
    width:800px;
    margin:50px auto 50px auto;
    padding:20px 0 20px 0;
    background:linear-gradient(180deg,#ffd1e4,#fff5f9);
    box-shadow:10px 10px #ffd1e4;
    border-radius:10px;
    cursor:pointer;
}

article .shiken_video:hover{
    background:linear-gradient(180deg,#87e7ff,#cbf5ff);
    box-shadow:10px 10px #87e7ff;
}

article .shiken_video .title{
    font-family:'M PLUS 1p',sans-serif;
    font-size:40px;
    line-height:40px;
    font-weight:bold;
    text-align:center;
    color:#000000;
}

article .shiken_video .video{
    width:600px;
    margin:20px auto 0 auto;
}

article .shiken_video .video img{
    width:100%;
}

article .shiken_video .message{
    margin-top:20px;
    text-align:center;
}

@media screen and (max-width:639px){
    article .shiken_video{
        width:100%;
        margin:5vw auto 5vw auto;
        padding:5vw 0 5vw 0;
        box-shadow:1.5px 1.5px #ffd1e4;
        border-radius:4px;
        cursor:pointer;
    }
    
    article .shiken_video:hover{
        box-shadow:1.5px 1.5px #87e7ff;
    }
    
    article .shiken_video .title{
        font-size:6vw;
        line-height:6vw;
    }
    
    article .shiken_video .video{
        width:80%;
        margin:4vw auto 0 auto;
    }
    
    article .shiken_video .message{
        margin-top:4vw;
    }
}

/*============================================================================
EOF
============================================================================*/