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

/* 汎用CSS */
.clearfix:after{content:" ";display:block;clear:both;height:0;visibility:hidden;}
.user_noselect{user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;}

/* 初期スタイル */
body{
    color:#202020;
    /* font-family:"M PLUS 1p","Helvetica Neue",sans-serif; */
    font-family:"Noto Sans JP","Helvetica Neue",sans-serif;    
}

/* placeholder */
:placeholder-shown{color:#a0a0a0;}
::-webkit-input-placeholder{color:#a0a0a0;}
:-moz-placeholder{color:#a0a0a0; opacity:1;}
::-moz-placeholder{color:#a0a0a0; opacity:1;}
:-ms-input-placeholder{color:#a0a0a0;}

/*----------------------------------------------------------------------------
基本フレーム
z-index:    header =120
            article=10
            footer =100
            .go_top=130
----------------------------------------------------------------------------*/
header{
    z-index:120;
}
article{
    z-index:10;
}
footer{
    z-index:100;
}

/*----------------------------------------------------------------------------
ヘッダーデザイン
----------------------------------------------------------------------------*/
header{
    position:fixed;
    display:block;
    color:#ffffff;
    background:#097a2f;
    overflow:hidden;
    width:100%;
    top:0;
    left:0;
    right:0;
    margin:0;
    padding:0;
    height:50px;
}

/* ハンバーガーメニューボタン */
header .hamburger_menu #hamburger_menu_check{
    visibility:visible;
}

header .hamburger_menu .hamburger_menu_btn{
    position:fixed;
    top:0;
    left:0;
    display:flex;
    height:50px;
    width:50px;
    justify-content:center;
    align-items:center;
    z-index:135;
    background-color:#064b1d;
}

/* ハンバーガーアイコン */
header .hamburger_menu .hamburger_menu_btn span,
header .hamburger_menu .hamburger_menu_btn span:before,
header .hamburger_menu .hamburger_menu_btn span:after{
    content:'';
    display:block;
    height:3px;
    width:25px;
    border-radius:3px;
    background-color:#ffffff;
    position:absolute;
}

header .hamburger_menu .hamburger_menu_btn span:before{
    bottom:8px;
}
header .hamburger_menu .hamburger_menu_btn span:after{
    top:8px;
}

/* メニューを畳む×マーク */
header .hamburger_menu #hamburger_menu_check:checked ~ .hamburger_menu_btn span{
    background-color:rgba(150, 150, 150, 0);
}

header .hamburger_menu #hamburger_menu_check:checked ~ .hamburger_menu_btn span:before{
    bottom:0;
    transform:rotate(45deg);
}

header .hamburger_menu #hamburger_menu_check:checked ~ .hamburger_menu_btn span:after{
    top:0;
    transform:rotate(-45deg);
}

/* ハンバーガーメニュー背景 */
header .hamburger_menu .hamburger_menu_back{
    position:fixed;
    z-index:130;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.3);
    display:none;
}

/* ハンバーガーメニュー本体 */
header .hamburger_menu .menu{
    position:fixed;
    z-index:131;
    width:500px;
    height:100%;
    position:fixed;
    display:block;
    top:0;
    left:0;
    background:#0c9e3d;
}

header .hamburger_menu  .menu ul{
    padding:60px 10px 0 10px; 
}

header .hamburger_menu  .menu ul li{
    list-style:none;
    border:solid 1px #c1eccf;
    padding:5px;
    margin:0 0 5px 0;
}

header .hamburger_menu .menu ul li a{
    display:block;
    width:calc(100% - 30px);
    font-size:24px;
    line-height:24px;
    box-sizing:border-box;
    color:#ffffff;
    text-decoration:none;
    padding:0;
    position:relative;
}

header .hamburger_menu  .menu ul li:hover{
    background:#078a33;
    /* background:#23577c; */
}

header .hamburger_menu  .menu{
    left:-500px;
    box-shadow:none;
    transition:left 0.5s;
}

header #hamburger_menu_check:checked ~ .hamburger_menu_back{
    display:block;
}

header #hamburger_menu_check:checked ~ .menu{
    left:0;
    box-shadow:5px 0 5px rgba(0,0,0,0.2); 
    transition:left 0.5s;
}

/* ヘッダーリンク */
header a,header a:hover{
    font-style:normal;
    text-decoration:none;
}

/* スマホ画面では画面いっぱいにメニュー表示 */
@media screen and (max-width:500px){
    header .hamburger_menu .menu{
        width:90vw;
        left:-90vw;
    }
}


header h1{
    font-style:normal;
    font-weight:bold;       
    text-decoration:none;
    overflow:hidden;
    position:fixed;
    top:0;
    left:50px;
    margin:0;
    padding:10px 0 10px 10px;
    font-size:30px;
    line-height:30px;
    width:calc(100% - 50px);
    text-align:center;
}

article{
    width:100%;
    overflow-y:hidden;
    margin:0;
    padding:0;
    color:#404040;
    background:#ffffff;
    font-style:normal;
    font-weight:normal;       
    text-decoration:none;
    font-size:20px;
    line-height:30px;
}


/*----------------------------------------------------------------------------
メインデザイン
----------------------------------------------------------------------------*/
/* 1000px以上は横幅を絞る */
@media screen and (min-width:1000px){
    article{
        width:1000px;
        margin:0 auto 0 auto;
    }    
}

article h2{
    color:#303030;
    background:linear-gradient(to right,rgb(255,255,255), rgb(26, 123, 168));;
    font-weight:bold;
    overflow:hidden;
    font-size:30px;
    line-height:30px;
    border:solid 1px rgb(26, 123, 168);
    margin:20px 0 20px 0;
    padding:20px 0 20px 20px;
}

article h3{
    display:block;
    background-image:linear-gradient(135deg,rgba(0,0,0,0),#fffec6,#fadb98,rgba(0,0,0,0));
    color:#303030;
    font-family:'M PLUS 1p',sans-serif;
    font-weight:normal;
    overflow:hidden;
    font-size:30px;
    font-weight:bold;
    line-height:30px;
    text-align:center;
    padding:20px 0; 
    margin:50px 100px 20px 100px;
}

article .feature_link{
    width:100%;
}

article .feature_link img{
    width:100%;
}


/*----------------------------------------------------------------------------
タイトル
----------------------------------------------------------------------------*/
article .newsheet{
    width:100%;
    margin:0;
    padding:0;
    position:relative;
}

article .newsheet .logo{
    width:100%;
    margin-top:70px;
}

article .newsheet .logo img{
    width:100%;
}

article .newsheet .infla{
    position:absolute;
    width:90%;
    height:12%;
    left:2%;
    top:55%;
}

article .newsheet .infla img{
    width:100%;
}

article .newsheet .click{
    position:absolute;
    pointer-events:none;
    width:7%;   
    left:52%;
    top:77%;
}

article .newsheet .click img{
    width:100%;
}

article .newsheet .firepop{
    position:absolute;
    z-index:115;
    left:calc(100% - 22%);
    top:-10%;
    width:22%;
    height:22%;    

    /*
    transform-origin:center middle;
    animation:YURAYURA 2s linear infinite;
    */
}

/*
@keyframes YURAYURA{
    0%,100%{
        transform:rotate(3deg);
    }
    50%{
        transform:rotate(-17deg);
    }
}
*/

article .newsheet .firepop img{
    width:100%;
}

article .newsheet .firepop.small{
    left:calc(100% - 23%);
    top:-20px;
    width:20%;
    height:20%;    
}

article .content{
    margin-top:0;
    padding:10px;
}

/*----------------------------------------------------------------------------
参照リンク
----------------------------------------------------------------------------*/
article .reference_link{
    width:800px;
    font-size:24px;
    line-height:30px;
    margin:30px auto 30px auto;
    padding:10px;
    border:solid 2px #29ad24;
    border-radius:5px;
    background:#f0f0f0;
    background:linear-gradient(180deg,#f9fff7,#b7ffba);
    box-shadow:3px 3px 5px rgba(0,0,0,0.3);
    cursor:pointer;
}

article .reference_link .left{
    width:300px;
    float:left;
}

article .reference_link .right{
    float:left;
    margin-left:10px;
}

article .reference_link .right .memo{
    margin-top:20px;
}
article .reference_link .link_button ~ img{
    width:50px;
    height:40px;
    margin-left:15px;
}

article .reference_link:hover{
    border:solid 2px #ff2020;
}


article .reference_link .left img{
    width:300px;
    border-radius:10px;
    margin-right:20px;
}

article .reference_link .right a.outer_link{
    color:#0000ff;
    font-weight:bold;
    text-decoration:none;
}

article .reference_link:hover .right a.outer_link{
    color:#ff0000;
    text-decoration:underline;
}

@media screen and (max-width:639px){
    article .reference_link{
        width:100%;
        font-size:4vw;
        line-height:5vw;
        margin:7vw auto 8vw auto;
        padding:3vw;
        border:solid 0.5vw #29ad24;
        border-radius:1vw;
        box-shadow:1vw 1vw 3vw rgba(0,0,0,0.3);
    }
    
    article .reference_link .link_button ~ img{
        width:10vw;
        height:8vw;
        margin-left:2vw;
    }
    
    article .reference_link:hover{
        border:solid 0.5vw #ff2020;
    }
    
    article .reference_link img{
        width:80%;
        padding:0;
        border-radius:2vw;
        margin-right:0;
        margin:0 10% 2vw 10%;
    }
}

/*----------------------------------------------------------------------------
フッターデザイン
----------------------------------------------------------------------------*/
footer{
    display:block;
    color:#ffffff;
    background:#097a2f;
    font-style:normal;
    font-weight:normal;       
    text-decoration:none;
    overflow:hidden;
    width:100%;
    font-size:20px;
    line-height:24px;
    padding:10px 0 10px 10px;
}

footer .link li{
    float:left;
    text-overflow:ellipsis;
    margin-right:10px;
}

footer .copyright{
    clear:both;
}

footer .go_top{
    z-index:130;
    position:fixed;
    display:inline;
    color:#ffffff;
    background:rgba(65, 67, 160, 0.8);
    font-style:normal;
    font-weight:normal;
    text-decoration:none;
    text-align:center;
    cursor:pointer;
    padding:13px 0;
    width:220px;
    height:50px;
    right:-20px;
    bottom:20px;
    font-size:20px;
    line-height:20px;
    border-radius:30px;
    box-shadow:0.5vw 0.5vw 1vw rgba(0,0,0,0.5);
    transition:all 0.5s;
}

footer .go_top:hover{
    background:rgba(65, 67, 160, 0.5)
}

/*----------------------------------------------------------------------------
見出し
----------------------------------------------------------------------------*/

@media screen and (max-width:800px){
}

@media screen and (max-height:800px){
}

/*----------------------------------------------------------------------------
リンクボタン
----------------------------------------------------------------------------*/
article .box_button{
    font-weight:bold;
    color:#ffffff;
    background:#5860ad;
    margin:2vw;
    padding:2vw;
    text-align:center;
    border-radius:2vw;
    box-shadow:0.5vw 0.5vw 1vw rgba(0,0,0,0.5);
}

article .box_button:hover{
    color:#000000;
    background:#fdf478;
}

/*----------------------------------------------------------------------------
メインメニュー
----------------------------------------------------------------------------*/
article .menu{
    position:relative;
    margin:20px 0 30px 0;
    padding:5px;
    background:linear-gradient(#99fded,#ffffff);
    border:solid 2px #258083;
}

article .menu .iconclick{
    position:absolute;
    width:100px;
    height:100px;
    left:calc(100% - 10px - 100px);
    z-index:115;
    top:-20px;
    transition:top .2s;
}

article .menu .iconclick:hover{
    top:-80px;
    height:160px;
}

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

article .menu ul{
    z-index:11;
}

article .menu li{
    list-style:none;
    float:left;
    margin:2px 2px;
    padding:3px 20px 5px 20px;
    background-image:linear-gradient(180deg,#86dacf,#ffffff 25%,#ffffff 35%,
        #46c7c7 90%,#258080);
    border:solid 2px #258080;
    border-radius:20px;
    box-shadow:2px 2px 2px rgba(0,0,0,0.3),
        inset 5px 5px 3px #ffffff;
    position:relative;
    cursor:pointer;
    transition:all 0.3s;
}

article .menu li:hover{
    background:#258080;
}

article .menu li a{
    color:#202040;
    padding:0;
    margin:0;
    font-size:20px;
    line-height:20px;
    font-weight:bold;
    cursor:pointer;
    transition:all 0.3s;
}

article .menu li:hover a{
    color:#ffffff;
}

/* メニューは表示しない(2022/4/16) */
article .menu.top{
    display:none;
}

/* 縦幅が狭い場合はメニューを消す */
/*
@media screen and (max-width:600px),screen and (max-height:768px){
    article .menu.top{
        display:none;
    }
}
*/

/* スマホ画面では下メニューも消す */
/*
@media screen and (max-width:600px){
    article .menu.bottom{
        display:none;
    }
}
*/

/*----------------------------------------------------------------------------
テーブル
----------------------------------------------------------------------------*/
article table{
    width:100%;
}

article table th,article table td{
    border-right:solid 0.2vw #ffffff;
    border-bottom:solid 0.2vw #ffffff;
    padding:0.5vw 1vw;
}

article table th{
    background:#414288;
    color:#ffffff;
    font-weight:bold;
}

article table td{
    background:#e0e0e0;
    color:#000000;
}

@media screen and (max-width:800px){
    article table th,article table td{
        display:block;
        width:100%;
    }
}

/*----------------------------------------------------------------------------
特別価格ご注意
----------------------------------------------------------------------------*/
.price_attention{
    display:flex;
    width:800px;
    margin:0 auto 0 auto;
    border:solid 3px #ffffff;
    border-radius:1px;
    box-shadow:inset 0 0 0 3px #000000,0 0 0 3px #000000;
}

.price_attention .left{
    width:140px;
    background:#000000;
    color:#ffffff;
    font-size:32px;
    line-height:32px;
    font-weight:bold;
    padding:7px 20px;
    left:10px;
    top:-20px;
    text-align:center;
}

.price_attention .right{
    padding:5px 10px;
    font-size:18px;
    line-height:20px;
    font-weight:normal;
    text-align:left;
    color:#000000;
}

@media screen and (max-width:639px){
    .price_attention{
        width:100%;
    }
}

/*----------------------------------------------------------------------------
印刷用
----------------------------------------------------------------------------*/
@media print{
    header,footer{
        position:static;
        display:block;
    }
    
    header{
        display:none;
    }
    
    article{
        margin-top:0;
    }
    
    article .menu{
        display:none!important;
    }

    footer .go_top{
        display: none!important;
    }
}

/* ---------------------------------------------------------------------------
メッセージボックス
--------------------------------------------------------------------------- */
div.msgbox{
    display:none;
    z-index:300;
    user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    background:rgba(0,0,0,0.3);
    position:fixed;
    width:100%;
    height:100%;
    left:0;
    top:0;
}

div.msgbox .base{
    position:fixed;
    display:block;
    left:50px;
    top:50px;
    background:rgba(255,255,255,0.9);
    box-shadow:5px 5px 5px rgba(0,0,0,0.4);
    border-radius:10px;
    border:solid 5px #ffffff;
    font-size:24px;
    line-height:24px;
}

div.msgbox .title{
    margin:0;
    padding:5px;
    text-align:left;
    background:#ffffff;
    cursor:pointer;
}

div.msgbox .body{
    box-shadow:inset 2px 2px 2px rgba(0,0,0,0.2);
    padding:10px;
}

div.msgbox .footer{
    padding:10px 5px 5px 5px;
    text-align:center;
}

div.msgbox .footer button{
    color:#000000;
    background:#e0e0e0;
    border:solid 1px #d0d0d0;
    border-radius:10px;
    padding:10px 30px 12px 30px;
    box-shadow:1px 1px 1px rgba(0,0,0,0.2);
    margin:0 5px;
}

div.msgbox .footer button:hover{
    color:#ffffff;
    background:#808080;
}

div.msgbox .footer button:active{
    background:#4067b6;
}

@media screen and (max-width:1000px){
    div.msgbox .base{
        left:0;
        top:0;
        width:100%;
        border-radius:0;
        box-shadow:none;
        border:solid 1vw #ffffff;
        font-size:5vw;
        line-height:6vw;
    }
    
    div.msgbox .title{
        padding:1vw;
    }
    
    div.msgbox .body{
        padding:3vw;
    }
    
    div.msgbox .footer{
        padding:2vw 1vw 1vw 1vw;
    }    

    div.msgbox button{
        font-size:5vw;
        line-height:5vw;
        border:solid 0.2vw #d0d0d0;
        border-radius:2vw;
        padding:5vw 10vw 6vw 10vw;
        box-shadow:0.2vw 0.2vw 0.2vw rgba(0,0,0,0.2);
        margin:0 0.2vw;
    }    
}


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