@charset "utf-8";
/* 基本スタイル
---------------------------------------------*/
/*ページ全体の構成*/
/*ieだと使えない
:root{
    
    --contentswidth-max:960px;
    --contentswidth-sub-l-max:660px;
    --contentswidth-sub-r-max:300px;
    
}
ieだと使えない*/


    body{
        background: rgb(255, 255, 255); color: #292929; font-size: 16px;
        font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Helvetica, Arial, 'ＭＳ Ｐゴシック', sans-serif;
        line-height: 1.42857;
        margin: 0;
    }

    body{
        background: url("../img/bg_005.jpg") no-repeat bottom;
    }    
    a:link { color: rgb(20, 137, 160);  }
    a:visited { color:rgb(20, 137, 160);   }
    a:hover {color: rgb(20, 137, 160); 
    text-decoration: underline rgb(20, 137, 160)3px;}
    /* a:visited {color: rgb(201, 32, 32);text-decoration: none;} */
    
    
    /* ヘッダー */
    .header {
        z-index: 900;
        padding: 0px auto;
        margin: 0 auto;
        width: 100%;
        /*border-bottom: #ccd1d9 solid 1px;*/
        background: rgb(61, 61, 61);
        color: rgb(255, 255, 255);
        top:0;/*古いスマホのブラウザーで位置ずれを起こすための処理*/
    }
    .header-group{
        /*max-width:var(--contentswidth-max);ieだと使えない*/
        max-width:960px;
        height: auto;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
    }
    .header-groupTitle {
        color:#fff;
        margin: 0;
        font-size: 0.8em;
        font-weight: 100;
        padding: 10px 10px 10px 20px;        
    }

    .header-groupDescription {
        color: #fff;
    }

    /* ナビゲーション */
    .section{
        background: rgba(61, 61, 61, 0.452);
        /*　グラデーション　ヘンデスナ
        background:
        linear-gradient(to left,rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.74) 10%, rgba(0, 0, 0, 0.74) 90%, rgba(255, 255, 255, 0) 100% );
;        */

        padding: 0 auto;
        margin: 0 auto;
    }        
    .section-nav {
        
        width: 100%;
        height: 30px;
        margin: 0 auto;
        padding: 0;
        background: rgb(100, 100, 100);
        text-align: center;
    }
    .section-navGroup {
        max-width:960px;
        display: flex;
        justify-content: space-around;
        margin: 0 auto;
        padding-left: 0;/*リストの左の余白を無くす*/
    }
    .section-navGroup > li {
        list-style-type: none;
    }
    .section-navGroup > li a {
        display: block;
        padding: 2px 6px;
        color: rgb(255, 255, 255);
        text-decoration: none;
    }
    .section-navGroup > li a:hover {
        color: rgb(253, 238, 189);
        border-bottom: rgb(253, 238, 189) solid 2px;
    }
    .section-navGroup > li a.active {
        border-bottom: #333 solid 2px;
        color: rgb(138, 172, 216);
    }


    /*イメージ */
    .topdsp{
        max-width:960px;
        height: auto;
        margin: 0 auto;
        padding: 0px 0px 0px 0px;
        /* background-color:rgb(124, 109, 85)
          */  
    }
    /*  スライダー無し */
    .mainImg{
        margin: 0 auto;
        height: auto;
        padding: 0;  
    }
    .mainImg img{
        /* height: 500px; */
        max-width:960px;
        margin: 0 auto;
        height: 100%;
        width: 100%;        
        object-fit: cover;
        font-family: 'object-fit: cover;'; /*IE対策*/
        vertical-align:top;
    }

    .mainmsg_bg{
        width: 100%; 
        height: auto;
        background: rgba(146, 146, 146, 0.144);
    }

    .mainmsg{
        max-width:960px;
        max-height: 260px;            
        width: 100%; 
        height: 100%;
        margin: 0 auto;
        padding: 30px 0px 30px 0px;
        /*
        background: url("../img/img_bg_002.jpg") no-repeat top;
        background-size: 100% 100%;
        */
        background: url("../img/img_bg_001.jpg") no-repeat top;
        background-size: 100% 100%;        
        text-align: center;
        
    }
    .mainmsg > h1{
        margin: 0 auto;        
        font-size: 1.4em;
        font-family:"Hiragino Mincho ProN","YuMincho","Yu Mincho", serif;
        color: rgb(0, 0, 0);
        text-shadow:2px 2px 3px rgb(255, 255, 255),-2px -2px 3px rgb(255, 255, 255);       
    }

    .line {
        border-width: 2px;
        margin: 0px auto; 
        max-width:960px; 
    }
    hr {
        color: inherit;
        background-color: currentColor;
        opacity: .25;
    }
    
    
    /*メインコンテンツ*/
    .row {
        max-width:960px;
        height: auto;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;            
        padding:0 auto;
        background-color:rgb(255, 255, 255);
    }

    /* 会社概要 */
    .row-cmp {
        max-width:1816px;
        height: auto;
        margin: 0 auto;
        padding:0;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    /* 全画面パーツ */

    .row-bg-set-one {
        /* max-width: 2000px;*/
        width: 100%;
        height: auto;
        margin: 0 auto;
    /*　グラデーション　背景画像で処理した  */
        background:
        linear-gradient(to left,rgba(255, 255, 255, 0) 5%, rgb(255, 255, 255) 24%, rgb(255, 255, 255) 76%, rgba(255, 255, 255, 0) 95% );        
      }
    .row-bg-set-two {
        width: 100%;
        height: auto;
        background-color:rgb(156, 155, 155);
        padding: 20px;
    }    
    
    .row-bg-set-three {
        width: 100%;
        height: auto;
        background: rgba(145, 145, 145, 0.116);
    }    
    .row-bg-set-four {
        width: 100%;
        height: auto;
        background: rgb(87, 87, 87);
    }  



    /* 行内列パーツ */
    .col-one {
        flex:1 1 auto;
        max-width:660px;
        padding: 0 auto;
        margin: 0 auto;
    }
    .col-one > h2{
        font-size: 2em;
        /* サブタイトルの空間　*/
        line-height: 0.8em; /* ちょうど文字下になる*/
        margin: 0px 0px 0px 0px;        
        padding: 30px 20px 20px 20px;      
    }

    .col-one > h2.yohaku{       
        /* サブタイトルの空間の個別用　*/ 
        line-height: 0.8em; /* ちょうど文字下になる*/
        margin: 0px 0px 0px 0px;
        padding: 20px 20px 10px 20px;          
    }

    .col-one > h3{
        font-size: 1.5em;
        line-height: 0.8em; /* ちょうど文字下になる*/
        margin: 0px 0px 0px 0px;        
        padding: 20px 20px 14px 20px;
    }

    .col-one > h3.min{
        font-size: 1.322em;
        line-height: 0.8em; /* ちょうど文字下になる*/
        margin: 0px 0px 0px 0px;        
        padding: 10px 20px 3px 20px;
    }

    .col-one > h3.big{
        font-size: 2.0em;
        line-height: 1.0em; /* 0.8emちょうど文字下になる*/    
    }

    .col-one > p{
        margin: 0px 20px 0px 20px;
        font-size: 1.15em;
    }    
    .col-one > img{
        vertical-align:top;
    }
     
    /* ---  会社概要  --- */
    .col-cmp {
        flex:1 1 auto;
        max-width:420px;
        width:100%;
        padding: 0 auto;
        margin: 0 auto;
        justify-content: center;
        color: #fff;
    }
    .col-cmp > p{
        margin: 0px 20px 0px 20px;
        font-size: 1.0em;
    }    
    .col-cmp > h2{
        font-size: 2em;
        /* サブタイトルの空間　*/
        line-height: 0.8em; /* ちょうど文字下になる*/
        margin: 0px 0px 0px 0px;        
        padding: 30px 20px 10px 20px;       
    }

    .col-cmp > h3{
        font-size: 1.855em;
        line-height: 1.0em; /* 0.8emちょうど文字下になる*/ 
        margin: 0px 0px 0px 0px;        
        padding: 15px 20px 14px 20px;
    }

    .col-cmp-r {
        flex:1 1 auto;
        width: 30%; 
        padding: 20px 20px 10px 0px; /*ここで設定親で設定すると位置がおかしくなる*/
    }

    .col-cmp > p { padding: 10px 0px 10px 0px; }
    .col-cmp > p > a:link { color: rgb(200, 241, 221);  }
    .col-cmp > p > a:visited { color:rgb(207, 253, 232);   }
    .col-cmp > p > a:hover {color: rgb(207, 253, 232); text-decoration: underline rgb(207, 253, 232)3px;}

   


    .wide_one{
        width: 100%;        
    }
    .col-one-r {
        flex:1 1 auto;  
        width:300px;  
    }
    
    .col-one-r > img{
        width:300px;
        vertical-align:top;
        font-family: 'object-fit: cover;'; /*IE対策*/
    }




    .order-col-1 {
        order: 1!important;        
    }
    .order-col-2 {
        order: 2!important;
    }
    .row_middle {
        max-width:660px;
        margin: 0 auto;
        padding: 0 auto;
        display: flex;
        justify-content: start;
        flex-wrap: nowrap;
    }


    /* バナーなど用 Row中用 */
    .row_middle_two {
        max-width: 620px;
        width: 100%;        
        margin: 0 auto;        
        padding: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
    }     

    .row_middle_two > a > img {
        width:294px;
        margin: 0 auto;
        padding: 0 auto; 
    }    
    .row_middle_two > a > img.big {
        width: 280px;
        padding: 2px 2px 2px 2px ;
    }
    .row_middle_two > a {
        text-decoration: none;
    }


    /* バナーなど用 ※全横幅使用 */   
    .row_max_bn {
        max-width:960px;   
        margin: 0 auto;
    }

    .row_max_bn > img{
        vertical-align:top;        
    }
    
    .row_max_bn-box {      
        height: auto;        
        padding: 10px 20px 10px 20px;       
        margin: 0 auto;       
    }

    .row_max_bn-box > h3{
        font-size: 1.333em;
        /* サブタイトルの空間　*/
        line-height: 0.95em; /* 0.8 だとちょうど文字下になる*/
        margin: 0 auto;      
        padding: 14px 0px 10px 0px;      
    }

    .row_max_bn-box > img.big {
        width: 100%;        
        /*　リンクを張ると↑効かないです*/         
    }
    .row_max_bn-box > a > img {
        width: 100%;
    }    

    .row_max_bn-box-bg_img_one {              
        /*
        background: url("../img/img_bg_003.jpg") no-repeat top;
        background-size: 100% 100%; 
        background-color: rgb(255, 245, 231);
        
        */
        background: url("../img/img_bg_003.jpg") no-repeat top;
        background-size: 100% 100%; 
        
    }    

    .row_max_bn-box-in_one {      
        /*height: auto;*/
        width: 100%;        
        padding: 0 auto;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;    
        justify-content:start;
    }    
    
    .row_max_bn-box-in_one > img {
        width: 222px;
        padding: 0px 8px 10px 0px ;
        /*　リンクを張ると↑効かないです*/         
    }
    .row_max_bn-box-in_one > a > img {
        width: 222px;
        padding: 0px 8px 10px 0px ;
    }    
    .row_max_bn-box-in_two {      
        height: auto;
        width: 100%;  
        padding: 0 auto;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;    
        justify-content:space-between;
    }  

    .row_max_bn-box-in_two > img {
        width: 450px;
        padding: 0px 0px 0px 0px ;
        /*　リンクを張ると↑効かないです*/         
    }
    .row_max_bn-box-in_two > a > img {
        width: 450px;
        padding: 0px 8px 0px 0px ;
    }    


    /*  更に小分け
    --------------------- */
    .col_middle_one {
        width: 100%;
        /*max-width: 660px;*/
        flex:1 1 auto;
        margin: 0 auto;
        padding: 0 auto;
    }
    /*
        .col_middle_one_r {
            flex:1 1 auto;width: 200px; 
            margin: 0 auto;
            padding: 0 auto;  
        }
        .col_middle_one_r > img{
            vertical-align:top;
            margin: 0px 0px 20px 0px ;
        }
    */
    .row_in {
        /*max-width: 660px;*/
        height: auto;
        margin: 0 auto;
        padding: 0 auto;
        display: flex;
        justify-content:start;
        flex-wrap: nowrap;            
    }
    .col-in-one {
        flex:1 1 auto;width:80%;
        margin: 0 auto;
        padding: 0 auto;
    }
    .col-in-one-r {
        flex:1 1 auto;width: 19.5%; 
        margin:  0 auto;
        padding:  0px 10px 0px 20px ;    
    }
    /*  更に小分け　end
    --------------------- */


    /* スマホサイズ時最下位スペース */
    .margin_btm_end{
        margin-bottom: 0px;
    }

    /*注釈権利*/
    .footer{
        background: #313131;
        text-align: center;
        margin: 0 auto;
        padding: 10px 0;

        font-size: 12px;
        color: rgb(255, 255, 255);
    }

    /*共通上へ移動*/
    .topmove{
        text-align: right;
        width: 100%;
        margin: 15px 0px 0px 0px;	
        padding: 0;
    }
    .topmove a{
        /*right: 0px;*/
        width: auto;
        height: 25px !important; 	/*他のブラウザーIE6用　※引いた分*/
        height /**/: 12px; 			/*対策IE5用の値をセット※最大分*/
        padding: 4px 20px 0px 0px;
        color: #aeaeae;
        font-size: 95%;
        text-decoration: none;
    }
    .topmove a:hover {
        color: black; 
        text-decoration: underline;     /* 下線を表示する */
    }


/*------------------------------
  ここから下がハンバーガーメニュー
  に関するCSS
------------------------------*/
  
/* チェックボックスは非表示に */
.drawer-hidden {
    display: none;
  }
  
  /* ハンバーガーアイコンの設置スペース */
  .drawer-open {
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 999;/* 重なり順を一番上に */
    cursor: pointer;  
    top:15px;    
    display: none;
  }
  
  /* ハンバーガーメニューのアイコン */
  .drawer-open span,
  .drawer-open span:before,
  .drawer-open span:after {
    content: '';
    /*display: block;*/
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: rgb(255, 255, 255);
    position: absolute;
  }
  
  /* 三本線のうち一番上の棒の位置調整 */
  .drawer-open span:before {
    bottom: 8px;
  }
  
  /* 三本線のうち一番下の棒の位置調整 */
  .drawer-open span:after {
    top: 8px;
  }
  
  /* アイコンがクリックされたら真ん中の線を透明にする */
  #drawer-check:checked ~ .drawer-open span {
    background: rgba(255, 255, 255, 0);
  }
  
  /* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
  #drawer-check:checked ~ .drawer-open span::before {
    bottom: 0;  transform: rotate(45deg);
  }
  #drawer-check:checked ~ .drawer-open span::after {
    top: 0;  transform: rotate(-45deg);
  }
    
  
  /* アイコンがクリックされたらメニューを表示 */
  #drawer-check:checked ~ .section-nav {
    left: 0%;/* メニューを画面に入れる */
  }

/* ----------------------------------------------- */
.mainImgbg{
    display: none;
}

    /*画面サイズxxx以下のナビスタイル*/ 
    @media screen and (max-width :660px){

        body {background : none;}

        .row-bg-set-one {background:none;}
        .row-bg-set-two { background:none;}   

        /*  ハンバーガーボタン用 and ミニスタイル */
        .header{  position: fixed;}/*スマホによってここが絡む*/
        .topdsp{  margin-top:30px;}

        .section{
            width: 100%;                
            display:block;
            flex-direction: column-reverse;
        } 

        .drawer-open{
            display:block;
            position: fixed;
            right: 2px; 
            top:15px;    
        }

        /* ハンバーガーボタン用　メニューのデザイン*/
        .section-nav {
            height: auto;
            top: 0;
            left: 100%;/* メニューを画面の右端に位置す */
            z-index: 980;
            background:rgba(0, 0, 0, 0);
            transition: .4s;
            margin-top: 36px;
            position: fixed;
        }

        .section-navGroup{
            margin: 0 auto;
            padding: 0 auto;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            text-align: center;
        }
        .section-navGroup > li{
            border: 1px solid #ccc;
            margin-bottom: 5px;
            min-width: 100%;
            list-style-type: none;              
        }
        .section-navGroup > li a {
            display: block;
            padding: 20px 6px;
            color: rgb(255, 255, 255);
            text-decoration: none;
        }

        /* ハンバーガーボタン用空きスペース　メニューを閉じる*/
        .drawer-close {
            width: 100%;
            height: 100%;
            background: rgba(54, 54, 54, 0.95);
            position: fixed;
            top: 0;
            left: 100%;/* 閉じるための要素を画面外へ */
            z-index: 970;/* 重なり順をメニューより下に*/
            transition: .4s;
        }

        #drawer-check:checked ~ .drawer-close {
            left: 0;/* 閉じるための要素を画面内へ */
        }
        /*↑↑↑↑　ハンバーガーボタン用 end　↑↑↑↑↑↑*/

        .mainImg{
            margin: 0  auto;
            width: 0%;
            display: none;
        }

        .mainImgbg {
            width: 100%;
            display: block;
        }

        .mainImgbg > img{
            width: 100%;
            vertical-align:top;
        }

        
        .mainmsg > h1{
            margin: 0 auto;
            font-size: 0.9em;
            font-family:"Hiragino Mincho ProN","YuMincho","Yu Mincho", serif;
        }    


        .row{
            flex-wrap: wrap-reverse;
            justify-content: center;
            margin: 0px 0px 50px 0px ;
        }

	    .row_max_bn  > img {
	        margin: 0px auto ;
	    }        
	    .row_max_bn-box  > h3 {
            font-size: 1em;
            /* サブタイトルの空間　*/
            line-height: 1.3em;
            margin: 0 auto;      
            padding: 10px 0px 10px 0px;         
	    }
	    .row_max_bn-box  > img {
	        width: 96%;
	        margin: 0px auto ;
	        /*　リンクを張ると↑効かないです*/         
	    }
	    .row_max_bn-box > a > img {
	        width: 96%;
	        margin: 0px auto ;
	    }  

        .row_max_bn-box-in_one { 
            height: auto;          
            display:block;
            justify-content:stretch;

        }  

	    .row_max_bn-box-in_one  > img {
            width:100%;
	        /*　リンクを張ると↑効かないです*/         
	    }
	    .row_max_bn-box-in_one > a > img {
            width:100%;
	    }    

	    .row_max_bn-box-in_two > img {
	        width: 96%;
            margin: 0 auto;
            padding: 0 auto;
	        /*　リンクを張ると↑効かないです*/         
	    }
	    .row_max_bn-box-in_two > a >img {
	        width: 96%;
            margin: 0 auto;
            padding: 0 auto;
	    }    


        .row_middle {
            flex-wrap: wrap;
            justify-content: center;     
        }

        /*ここの調整は注意がいる*/
        .row_middle_two > a > img {
            width: 92%;
            margin: 10px 10px 10px 20px;
            padding: 0;
        }    


        .col-cmp-r {
            width: 100%; 
            padding: 20px 0px 0px 0px; /*ここで設定親で設定すると位置がおかしくなる*/
        }
        

        .col_middle_one_r > img{
            vertical-align:top;
            margin: 20px 0px 20px 0px ;
        }
        
        .col-one {         
            width:100%;               
        }
        .col-one > img{
            width: 100%;
            margin: 0 auto ;  
        }

        
        .col-one > h3.big{
            font-size: 1.5em;        
        }
        
        .col-one-r {
            flex:1 1 auto;
            width:100%;               
        }    
        .col-one-r > img {
            width:100%;
        }                    
        .order-col-1 {
            order: 2!important;
        }
        .order-col-2 {
            order: 1!important;
        }




        
        .margin_btm_end{
            margin-bottom: 30px;
        } 
    }
    
    /*画面サイズxxx以下のナビスタイル*/ 
    @media screen and (max-width :400px){
        .mainmsg > h1{
            margin: 0 auto;
            font-size: 0.7em;
            font-family:"Hiragino Mincho ProN","YuMincho","Yu Mincho", serif;
        }

        .col-cmp > h2{
            font-size: 1.522em;
            /* サブタイトルの空間　*/
            padding: 30px 20px 10px 20px;       
        }
    
        .col-cmp > h3{
            font-size: 1.522em;
            padding: 10px 20px 14px 20px;
        }
    }
/* 共有パーツ */
.mg_btm_zero{   margin-bottom: 0px;}
.mg_btm_one{    margin-bottom: 10px;}
.mg_btm_two{    margin-bottom: 20px;}
.mg_btm_three{  margin-bottom: 30px;}

.mg_top_zero{   margin-top: 0px;}
.mg_top_one{    margin-top: 10px;}
.mg_top_two{    margin-top: 20px;}
.mg_top_three{  margin-top: 30px;}


.pd_btm_zero{   padding-bottom: 0px;}
.pd_btm_one{    padding-bottom: 10px;}
.pd_btm_two{    padding-bottom: 20px;}
.pd_btm_three{  padding-bottom: 30px;}

.pd_top_zero{   padding-top: 0px;}
.pd_top_one{    padding-top: 10px;}
.pd_top_two{    padding-top: 20px;}
.pd_top_three{  padding-top: 30px;}

.pd_left_zero{  padding-left: 0px;}
.pd_left_one{   padding-left: 10px;}
.pd_left_two{   padding-left: 20px;}
.pd_left_three{ padding-left: 30px;}



.bg_test{background-color: antiquewhite;}


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