/********************************************************************************/
/*　（ｃ）デルタ・システム
/*　書式：css3
/*　説明：共通スタイル設定(メインページ以外)
/*  設計：2020.03.13    デルタ・システム　李 泳坤　　　　　　　　　
/*  作成：2020.03.17    デルタ・システム　李 泳坤
/*	懸案#1　ホームページリニューアル
/*  変更：2020.04.01    デルタ・システム　李 泳坤
/*	懸案#2　印刷時footerの出力/linux ブラウザでのfooterフォントすれ問題/印刷の倍率でもスタイル適用に設定
/********************************************************************************/
/*ウェブフォント使用*/
@import url('https://fonts.googleapis.com/css?family=Kosugi+Maru|Satisfy&display=swap');
/*ページ全体指定*/
*{
    margin: 0;
    padding: 0;
}
/*表示領域設定*/
body{
    background: #fff;/*全体背景色白*/
    font-family: 'Kosugi Maru', sans-serif;/*全体基本フォント設定*/
}
        
/*テキストベースの文字設定*/
/*本文タイトル基本設定*/
h3{
    font-size:1.2em;
    line-height: 2;
}
/*本文文字基本設定*/
section p{
    font-size:1em;
    line-height:30px;
    padding: 10px 5%;
}
/*上段ページタイトル日本語*/
.page_title p{
    font-family: 'Meiryo UI', sans-serif;
    font-weight: 600;
    font-size:2em;
    line-height: 2em;
    letter-spacing:0.1em;
}
/*リスト文字基本設定*/
li{
    font-size:1em;
    line-height: 2;
}
/*テキスト内リスト文字基本設定*/
.text li{
    font-size:0.9em;
}
/*リンク文字基本設定*/
a {
    text-decoration: none;/*リンク下線削除*/
}

/*基本ベースのモバイルレイアウト構造作成*/
/*モバイル用アイコン*/
nav img{
    display: block;/*表示設定*/
}
/*全体領域基本設定*/
#container{
    width:100%;/*横幅*/
    margin:auto;/*margin自動*/
}
/*header設定*/
    /*上段領域設定*/
    header{
        width:100%;/*header幅*/
        height:200px;/*header高さ*/
        background-color: white;
        margin: 0;/*marginなし*/
        position: relative;/*親指定*/
        z-index: 10;/*重ねレベル[0]*/
    }
    /*ロゴ*/
    .logo{
        position: absolute;/*自由配置設定*/
        float:left;/*header内左並び*/
        top: 0px;/*header内上段合わせ*/
        padding-left: 25px; /*左から25px右移動*/
        z-index:8;/*重ねレベル[1]*/       
    }
      /*上段メニューバー*/
      /*モバイル用ボタン領域の設定*/
      .menu-trigger {
        width: 36px;
        height: 28px;
        vertical-align: middle;
        cursor: pointer;
        position: fixed;
        top: 30px;
        right: 30px;
        z-index: 500;
    }
    /*モバイル用ボタン線の設定*/
    .menu-trigger span {
        display: inline-block;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        width: 100%;
        height: 4px;
        background-color:orange;
        transition: all .5s;
    }
    .menu-trigger.active span{
        background-color: rgb(255, 102, 0);
    }
    /*モバイル用ボタン一番目線の場所*/
    .menu-trigger span:nth-of-type(1) {
        top: 0;
    }
    /*モバイル用ボタン押したとき一番目線の動作*/
    .menu-trigger.active span:nth-of-type(1) {
        transform: translateY(12px) rotate(-45deg);
    }
    /*モバイル用ボタン2番目線の場所*/
    .menu-trigger span:nth-of-type(2) {
        top: 12px;
    }
    /*モバイル用ボタン押したとき2番目線の動作*/
    .menu-trigger.active span:nth-of-type(2) {
        opacity: 0;
    }
     /*モバイル用ボタン3番目線の場所*/
    .menu-trigger span:nth-of-type(3) {
        bottom: 0;
    }
    /*モバイル用ボタン押したとき3番目線の動作*/
    .menu-trigger.active span:nth-of-type(3) {
        transform: translateY(-12px) rotate(45deg);
    }
    /*モバイルメニューバー大きさ領域設定*/
    nav {
        width: 150px;/*横幅*/
        background-color: rgba(0, 0, 0, 0.8);/*背景色黒80%透明*/
        position: fixed;/*画面位置固定*/
        top: 60px;/*上から60px*/
        right: 0;/*みぎ合わせ*/
        transform: translate(160px);/*画面みぎ160pxに*/
        transition: all 0.5s;/*transition時間0.5秒*/
        text-align: center;/*文字中央*/
        z-index: 10;
    }
    /*モバイル用メニューバーを開けた時*/
    nav.open {
    transform: translateZ(0);
    }
    /*メニューバー領域中の領域*/
    nav ul{
        padding:20px;
        list-style: none;
        z-index: 999;
    }
    /*メニューバー文字領域*/
    nav li{
        border-bottom: 1px solid orange;/**/
    }
    /*メニューバー文字*/
    nav li a {
        color: #fff;/**/
        padding: 10px 0;/**/
        /* transitionの設定文字色 */
        transition-property: color;
        /* transitionの変更完了時間0.5秒*/
        transition-duration: 0.5s;
        /* 変更速度段々早くなるパターン */
        transition-timing-function: ease-out;
    }

    /*変更効果マウス置いた時の文字色*/
    nav a:hover{
        color: orange;
    }
    /*上段ページタイトル*/
    header .page_title {
        position: absolute;/*自由配置設定*/
        width: 100%;/*横幅*/
        text-align: center;/*文字中央*/
        bottom: 30px;/*header領域下から10px上*/
    }
/*モバイル用section設定*/
    /*section領域設定*/
    section{
        position: relative;/*自然配置設定*/
        width: 100%;/*横幅*/
        height: auto;/*高さ自動*/
        margin: 0;/*margin無し*/
        padding: 10px 0 10px 0;/*上下要素との距離10px*/
        z-index: 0;/*重ねレベル0(メニューバーと重なっても下に)*/
    }
    /*section内title領域設定*/
    section>.title{
        padding-left: 5%;/*左から5%離す*/
        border-bottom: 2px solid orange;/*下に線を引く*/
        }
    /*section内のリスト領域設定*/
    section ul{
        width: 90%;/*横幅(リスト模様表示のため)*/
        margin: 10px;/*領域と内容との距離*/
    }
    /*section内のリスト内容設定*/
    section >ul{
        text-align: justify;/*文章両端揃えの調節on*/
        text-justify: inter-word;/*単語間の半角スペースを広げて行を両端揃え*/
    }  
/*モバイル用footer 設定*/
    /*footer領域設定*/
    footer{
        width: 100%;/*横幅*/
        position: relative;/*自然に配置*/
        /* mdf 懸案#2 >>> */
        height: auto;/*高さ自動*/
        /* mdf 懸案#2 --- */
        /*height: 100px;/*高さ*/
        /* mdf 懸案#2 --- */
        /* del 懸案#2 background: #000 ;/*背景色黒*/
        margin: 0 auto;/*margin上下なし・横自動*/
        clear:both;/*独立配置*/
    }
    /*footerの文字設定:社名・住所*/
    /* del 懸案#2 footer p{
        font-family: 'Kosugi Maru', sans-serif;/*fontのstyle
        color:white;/*fontの色
        font-size:1em;/*文字の大きさ
        line-height: 20px;/*文字行間の距離
        position:absolute;/*ポジション自由設定
        text-align: right;/*文字は右寄り
        right:10px;/*右から3px
        top:10px;/*上から10px
    }*/
    /*footerのイメージ設定：電話番号・fax番号*/
    footer img{
        /*　del 懸案#2 position:absolute;/*ポジション自由設定*/
        /*　del 懸案#2 max-width: 95%;/*幅の100%を超えない*/
        width:100%; /* add 懸案#2 footerサイズにimgサイズを合わす */
        /*　del 懸案#2 max-height: 50px;/*高さは50pxを超えない*/
        /*　del 懸案#2 right:0px;/*右から0px*/
        /*　del 懸案#2 bottom:0px;/*下から0px*/
    }

    /*PC用レイアウト作成　画面が720px以上になると適用*/
    /* mdf 懸案#2 >>>　全ての機器にサイズスタイル適用設定*/
    @media all and (min-width:720px){
    /* mdf 懸案#2 --- */
    /*@media screen and (min-width:720px){*/
    /* mdf 懸案#2 --- */
        /*ロゴ*/
        .logo{
            position: absolute;/*自由配置設定*/
            float:left;/*header内左並び*/
            top: 0px;/*header内上段合わせ*/
            left:-225px;/*左から25px右移動*/
            z-index:8;/*重ねレベル[1]*/       
        }
        /*モバイル用イメージを非表示*/
        nav img{
            display: none;
        }
        /*全体横幅723px*/
        #container{
            width: 723px;
            margin: 0 auto;
        }
        /*モバイル用ボタン非表示*/
        .menu-trigger{
            display: none;
        }
        /*pc用メニューバー領域位置再設定*/
        nav {
            width: auto;/*幅自動*/
            background-color:  rgba(255,255,255,0);/*背景色白*/
            position: absolute;/*自由配置設定*/
            top:0;/*画面上段に合わせ*/
            left:0;
            transform: translate(0);/*モバイル用隠し戻す*/
            text-align: center;
            }
        /*上段メニューバー領域指定*/
        nav> ul{
            background-color:  rgba(255,255,255,0);/*背景色白に透明*/
            margin: 0;/*marginなし*/
            padding: 0px;/*paddingなし*/
            text-align: center;/*メニューバー文字右寄せ*/
        }
        /*pc用上段メニューバー文字位置設定*/
        nav> ul> li{
            display: inline-block;/*縦並びから横並びに変更*/
            font-size: 1.1em;/*文字大きさ変更*/
            margin:10px 5px;/*文字同士の幅設定*/
            padding: 0;/*padding値初期か*/
            border: 0;/*borderstyle初期化*/
        }
        nav li a {
            color: black;
        }
    /*section設定*/
        /*section領域再設定*/        
        section{
            margin: 10px 0 10px 0;/*margin再設定*/
            border-top: 1px dotted #ccc;/*section上線入れ*/
        }
        /*section title 右寄せ*/
        section .title{
            float: left;/*左配置*/
        }
        /*section title 幅決定*/
        section >.title{
            width: 25%;/*横幅*/
            padding: 0;/*padding無し*/
            border: 0;/*枠線無し*/
        }
        /*section titleの文字設定*/
        section >.title>h3{
            padding-left: 20px;/*左から20pxに文字表示*/
            border-left:2px solid orange;/*文字左に縦線*/
        }
        /*section text 幅決定*/
        section　>.text{
            width: 70%;/*横幅*/
        }
        /*section text 領域設定*/
        section .text{
            margin-left: 25%;/*左25%から表示(25%以内title領域)*/
        }

        /*メニューバーリンクにマウス置いた時の変更文字色*/
        nav a:hover{
            color: orange;/*変更文字色*/
        }
        /*footerの文字再設定設定:社名・住所*/
        /* del 懸案#2 footer p{ 
            line-height: 25px;/*文字行間の距離
        }*/
        /*footerのイメージ再設定：電話番号・fax番号*/
        /* del 懸案#2 footer img{
            width:50%;/*横幅footer領域の50%
        }*/
    }