/* 基本CSS（スマホ基準）　*/
body{
    background: #f4f3f9;
}
.contents_box{
}

h1,h2,h3,h4,h5,p,form,ul,ol,.form_submit{
    font-family: Arial, Helvetica, sans-serif;
}
p{
    margin-bottom: 20px;
    line-height: 1.5;
}
.red{
    color: #aa0d23;
}

.t_left{
    text-align: left;
}
.t_center{
    text-align: center;
}
.t_right{
    text-align: right;
}

/* スマホメニュー  ============================*/
    .sp_menu{
        /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
        position:fixed;
        z-index: -1;
        opacity: 0;/*はじめは透過0*/
        /*ナビの位置と形状*/
        top:0;
        width:100%;
        height: 100vh;/*ナビの高さ*/
        background:#fff;
        /*動き*/
        transition: all 0.3s;
    }
    /*アクティブクラスがついたら透過なしにして最前面へ*/
    .sp_menu.panelactive{
        opacity: 1;
        z-index:999;
    }
    /*ナビゲーションの縦スクロール*/
    .sp_menu.panelactive nav{
        /*ナビの数が増えた場合縦スクロール*/
        position: fixed;
        z-index: 999; 
        width: 100%;
        height: 100vh;/*表示する高さ*/
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .sp_menu nav ul {
        display: none;
        width: 80%;
        /*ナビゲーション天地中央揃え*/
        position: absolute;
        z-index: 999;
        top:20%;
        left:50%;
        transform: translate(-50%,-50%);

    }
    .sp_menu.panelactive ul {
        display: block;
    }
    .sp_menu nav ul li {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 20px;

    }
        .sp_menu nav ul li a{
            display: block;
            color: #000;
            padding: 8px 10px 8px 10px;
            border: 1px solid #000;
            margin-bottom: 20px;
            /* transition : all 0.2s ease 0s; */
        }

        .sp_menu nav ul li a:hover{
            background: #aa0d23;
            color: #ffffff;
            border: 1px solid #aa0d23;

        }
        .sp_menu nav ul li a span.nav_initial{
            color: #aa0d23;
        }

        .sp_menu nav ul li a:hover span.nav_initial{
            color: #ffffff;
            }
            .nav_br{
                display: block;
            }

        .sp_menu .nav_br{
            font-size: 9px;
        }

        /*========= ボタンのためのCSS ===============*/
        .openbtn{
            position:fixed;
            z-index: 9999;/*ボタンを最前面に*/
            top:10px;
            right: 10px;
            cursor: pointer;
            width: 50px;
            height:50px;
        }
            
        /*×に変化*/	
        .openbtn span{
            display: inline-block;
            transition: all .4s;
            position: absolute;
            left: 14px;
            height: 3px;
            border-radius: 2px;
            background-color: #666;
            width: 45%;
        }

        .openbtn span:nth-of-type(1) {
            top:15px;	
        }

        .openbtn span:nth-of-type(2) {
            top:23px;
        }

        .openbtn span:nth-of-type(3) {
            top:31px;
        }

        .openbtn.active span:nth-of-type(1) {
            top: 18px;
            left: 18px;
            transform: translateY(6px) rotate(-45deg);
            width: 30%;
        }

        .openbtn.active span:nth-of-type(2) {
            opacity: 0;
        }

        .openbtn.active span:nth-of-type(3){
            top: 30px;
            left: 18px;
            transform: translateY(-6px) rotate(45deg);
            width: 30%;
        }


    /* 画面サイズ 600px 以上 */
    @media (width > 600px) {
        .sp_menu,.openbtn{
            display: none;
        }

    }

/* PC左メニュー  ============================*/
    .pc_menu{
        height: auto;
        padding: 50px 30px 20px 30px;
        width: auto;
        position: static;
    }
    .pc_menu h1{
        text-align: center;
        margin-bottom:30px;
    }
        .pc_menu h1 img{
            width: 140px;
            height: auto;
        }
        

    .pc_menu h2{
        text-align: center;
        margin-bottom:40px;
    }
        .pc_menu h2 img{
            width: 66px;
            height: auto;
        }

    .pc_menu h3{
        text-align: center;
        margin-bottom:0px;
    }
        .pc_menu h3 img{
            width: 100px;
            height: auto;
        }

    .pc_menu nav{
        display: none;
    }

    /* スマホ トップページ以外削除項目 */
    .pc_menu h2,
    .pc_menu h3{
        display: none;
    }
    .top .pc_menu h2,
    .top .pc_menu h3{
        display: block;
    }

    .sub .pc_menu h2,
    .sub .pc_menu h3{
        display: none;
    }

    /* 画面サイズ 600px 以上 */
    @media (width > 600px) {
    /* 左メニュー */
        .pc_menu{
            height: 100vh;
            box-sizing: border-box;
            padding: 50px 30px;
            width: 200px;
            position: fixed;
        }

        .pc_menu h1{
            margin-top: 10px;
            margin-bottom:30px;
        }

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

         .pc_menu h3{
            margin-bottom:30px;
        }


        /* スマホ トップページ以外削除項目 */
        .pc_menu h2,
        .pc_menu h3,
        .sub .pc_menu h2,
        .sub .pc_menu h3{    
            display: block;
        }


        /* ナビメニュー */
        .pc_menu nav{
            display: block;
        }    
        .pc_menu nav ul li {
            margin: 0 10px;
        }
                .pc_menu nav ul li {
                font-family: Arial, Helvetica, sans-serif;
                font-weight: bold;
                font-size: 20px;

            }
                .pc_menu nav ul li a{
                    display: block;
                    color: #000;
                    padding: 8px 10px 8px 10px;
                    border: 1px solid #000;
                    margin-bottom: 20px;
                    /* transition : all 0.2s ease 0s; */
                }

                .pc_menu nav ul li a:hover{
                    background: #aa0d23;
                    color: #ffffff;
                    border: 1px solid #aa0d23;

                }
                .pc_menu nav ul li a span.nav_initial{
                    color: #aa0d23;
                }

                .pc_menu nav ul li a:hover span.nav_initial{
                    color: #ffffff;
                    }
                    .nav_br{
                        display: block;
                    }

                .nav_br{
                    font-size: 9px;
                }
            /*　該当ページクラス　*/
            .pc_menu nav ul li.thispage a {
                background: #aa0d23;
                color: #ffffff;
                border: 1px solid #aa0d23;

            }
            .pc_menu nav ul li.thispage a span.nav_initial{
                color: #ffffff;
                }
                .nav_br{
                    display: block;
                }

    }

/* 右可変ボックス ============================*/
/* 共通 ============================*/
    .right_box{
        /*background:#cf8181;*/
        margin-left: 0;
        padding: 0px 30px;
    }


    /* 画面サイズ 600px 以上  */
    @media (width > 600px) {

        /* トップページ　右可変ボックス */
        .right_box{
            /*background:#cf8181;*/
            margin-left: 200px;
            padding: 50px 30px;
        }

    }

/* 中ページ ============================*/
    .page{
        margin: 0 auto;
        width: auto;
        padding-top: 10px;
    }
    .page h1,.page h2{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        text-align: center;
    }
    .page h1{
        font-size: 30px;
    }
    .page h2{
        font-size: 12px;
        margin-bottom: 60px;
    }
    .title_initial{
        color: #aa0d23;
    }
        /* 画面サイズ 600px 以上  */
        @media (width > 600px) {

            .page{
                margin: 0 auto;
                width: 420px;
            }
            .page h1,.page h2{
                text-align: left;
            }
         
        }
    

/* トップ ============================*/
    .top .right_box{
        padding: 50px 30px;
        display: -webkit-flex;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        transition: all;
    }

    .right_box_top{
        margin-bottom: 20px;
    }
        .right_box_top a{
            display: block;
            transition : all 0.5s ease 0s;
            
        }
        .right_box_top a:hover{
        /* border: 10px solid #aa0d23;*/
        }
        .right_box img{
            width: 100%;
            height: auto;
        }
        .right_box_top a:hover img{
            opacity: 0.6;
            transition : all 0.5s ease 0s;
        }


    /* 画面サイズ 600px 以上  */
    @media (width > 600px) {

        /* トップページ　右可変ボックス */
        .top .right_box{
            display: -webkit-flex;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            transition: all;
            

        }

            .right_box_top{
                margin: 10px;
            }
                .right_box_top a{
                    
                }
                .right_box_top a:hover{
                }
                .right_box_top img{
                    width: 300px;
                    height: auto;
                }

    }


/* お問い合わせ  ============================*/

    .contact_form form{
    }
    .contact_form form dl{
        display: block;
        font-size: 16px;
    }
    .contact_form form dt{
        width: auto;
        font-weight: normal;
        padding-bottom: 10px;
    }
    .contact_form form dd{
        width: auto;
        padding-bottom: 20px;

    }


        .contact_form p,.contact_form form span{
            font-size: 75%;
            margin-bottom: 10px;
        }

        .contact_form  > form > label{
            display: block;
            
        }
        .contact_form > form > label > label{
            display: inline-block;
            margin:0 20px 10px 0;
        }

        .contact_form form input[type=text],
        .contact_form form textarea{
            width: 100%;
            border: 1px solid #000;
            padding: 5px 10px;
        }

      
        .contact_form form .maintext{
            font-weight: bold;
            margin-top: 20px;
        }
        .contact_form form .subtext{
            color: #555;
        } 
        
        .form_submit{
            background-color: #000000;
            color: #fff;
            padding: 10px 30px;
            font-size: 16px;
            margin: 20px 0;
        }


    /* 画面サイズ 600px 以上  */
    @media (width > 600px) {
        .contact_form form dl{
            font-size: 12px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }
        .contact_form form dt{
            width: 25%;
            font-weight: normal;
            padding-bottom: 20px;
        }
        .contact_form form dd{
            width: 75%;
            padding-bottom: 20px;
        }
    
        .contact_form form input[type=text],
        .contact_form form textarea{
            width: 100%;
        }
    
    }