/*値が 1 つ指定された場合、全四辺に同じマージンが適用される。*/
/*値が 2 つ指定された場合、1 つ目のマージンは上下、2 つ目は左右の辺に適用される。*/
/*値が 3 つ指定された場合、1 つ目のマージンは上、2 つ目は左右、3 つ目は下の辺に適用される。*/
/*値が 4 つ指定された場合、マージンはそれぞれ上、右、下、左の順 (時計回り) に適用される。*/
        /*ページ全体の構成*/
        body{
            /*background: #000;*/
            background: #ffff;
            /*color: #ffffff;*/
            color: #444444;
            font-size: 16px;
            font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Helvetica, Arial, 'ＭＳ Ｐゴシック', sans-serif;
            line-height: 1.42857;
            margin: 0;
        }
        a:link {
            color: #800;　/* color: #888; */
            text-decoration: none;
        }
        a:hover {
            color: #080;　/* color: #333; */
            text-decoration: none;
        }
        a:visited {
            color: #080;
            text-decoration: none;
        }
        /* ヘッダーの設定 */
        .header {/*ヘッダー全体の構成*/
            z-index: 100;
            padding: 10px 0px; /* padding: 24px 0px; */
            width: 100%;
        }
        .header-title {/*サイト名*/
            font-family: 'Abril Fatface', cursive;
            /*color: #444;*/
            color: #fff;
            font-weight: bold;
            font-size: 2.4em;
            border-bottom: #ccd1d9 solid 1px;
            text-align: center;
            position: relative;
            margin: 0 auto 0; /* margin: 0 auto 30px; タイトル下線の下のスペース */
            padding: 0 0 20px;
         }
         .header-title:after{/*サイト名下の線の設定*/
            position: absolute;
            bottom:-2px;
            left: 0;
            right: 0;
            margin: auto;
            /*border-bottom: 3px solid #444;*/
            content:"";
            /*width:120px;*/
        }

        /*画面サイズ960px以下のヘッダースタイル*/
        @media screen and (max-width: 960px){
            .header{/*ヘッダー全体の構成*/
                padding: 5px 0px; /* padding: 24px 0px; */
                position: relative;
                border-bottom: 1px solid #ccd1d9;
                margin-bottom: 0px; /* margin-bottom: 50px; タイトル下線の下のスペース */
                display: flex;
                justify-content: space-between;
            }
            .header:after{/*サイト名下の線の設定*/
                position: absolute;
                bottom: -2px;
                /*left: 30px;*/
                /*border-bottom: 3px solid #444;*/
                content: "";
                width: 140px;
            }
            .header-title {/*サイト名*/
                position: relative;
                font-size: 30px; 
                text-align: center;   /*text-align: left;*/
                border:none;
                padding: 0;
                margin: 0 auto 0 auto; /* margin: 0 auto 0px; タイトル下線の下のスペース */
                /*margin: 0 0 0 20px*/
            }
            .header-title:after{/*サイト名下の線の設定*/
                display: none;
            }
        }

        /* ナビゲーション */
        .nav {/*ナビの構成*/
            /*max-width: 960px;*/
            max-width: 960px;
            height: auto;
            margin: 0 auto 0; /*homeメニューとGalleryタイトルの間隔*/
            background: #fff; /*background: #000;*/
            text-align: center;
        }
        .nav-list {
            display: flex;
            justify-content: center;
            padding: 0;
            margin: 0;
            /* border: #ff0000 solid 2px;*/
        }
        .nav-list > li {
            list-style-type: none;
            padding: 0 5px;
            margin: 3px;
            border: #333 solid 1px;
        }
        .nav-list > li a {
            display: block;
            padding: 6px 12px;
            color: #333;
            /*color: #fff;*/
            text-decoration: none;
        }
        .nav-list > li a:hover {
            color: #999;
        }
        .nav-list > li a.active {/*HOMEから横浜風景までのメニューボタン*/
            border-bottom: #333 solid 2px; /*メニューボタンの枠*/
            color: #999;
        }
        /*画面サイズ960px⇒700px以下のナビスタイル*/
        @media screen and (min-width:700px) {
            #nav-drawer{
                display:none;
            }
        }
        /*画面サイズ960px⇒700px以下のスタイル*/
        @media screen and (max-width: 960px) {
            .nav{
                 display:none;
            }
            /*960PX以下のＮＡＶ（ハンバーガー）メニューの設定*/
            /*3本の横線が並ぶアイコンで、見た目がハンバーガー（バンズとパテ）のようにみえる*/
            #nav-drawer {
            position: relative;
            margin: 0 0 0 auto;/*IE対策の右寄せ*/
            }

            .nav-unshown {/*チェックボックス等は非表示に*/
            display:none;
            }

            #nav-open { /*アイコンのスペース*/
            display: inline-block;
            width: 30px;
            margin: 0 30px 0 0;
            }
            /*960px以下のＮＡＶ（ハンバーガー）アイコンをCSSだけで表現*/
            #nav-open span, #nav-open span:before, #nav-open span:after {
                position: absolute;
                height: 3px;/*線の太さ*/
                width: 38px;/*width: 28px;　長さ*/
                /*background: #fff;*/
                background: #555;
                display: block;
                content: '';
                cursor: pointer;
            }
            #nav-open span:before {
                bottom: -8px;
            }
            #nav-open span:after {
                bottom: -16px; /*bottom: -16px;*/
            }
            /*閉じる用の薄黒カバー*/
            #nav-close {
                display: none;/*はじめは隠しておく*/
                position: fixed;
                z-index: 99;
                top: 0;/*全体に広がるように*/
                left: 0;
                width: 100%;
                height: 100%;
                background: black;
                opacity: 0;
                transition: .3s ease-in-out;
            }
            /*960px以下の時に左から展開するＮＡＶメニュー展開後の中身*/
            #nav-content {
            overflow: auto;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9999;/*最前面に*/
            width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
            max-width: 330px;/*最大幅（調整してください）*/
            height: 50%; /*height: 100%;*/
            background: #333;/*background: #fff;背景色*/
            transition: .3s ease-in-out;/*滑らかに表示*/
            -webkit-transform: translateX(-105%);
            transform: translateX(-105%);/*左に隠しておく*/
            }

            /*チェックが入った後の表示*/
            #nav-input:checked ~ #nav-close {
            display: block;/*カバーを表示*/
            opacity: .5;
            }
            #nav-input:checked ~ #nav-content {
            -webkit-transform: translateX(0%);
            transform: translateX(0%);/*中身を表示（右へスライド）*/
            box-shadow: 6px 0 25px rgba(0,0,0,.15);
            }

            /*展開後のリストのスタイル*/
            .nav-drawerList{
                list-style: none;
                text-align: center;
                padding: 0;
            }
            .nav-drawerList-item{
                line-height: 1.5;
            }
            .nav-drawerList-item > a{
                display: block;
                padding: 15px;
            }
        }

        /*ページ全体の構成*/
        .content{
            /*max-width: 960px;*/
            max-width: 960px;
            /*margin: 10px auto 10px auto;*/
            margin: auto auto auto auto;
            text-align: center;
        }
        .content-title{
            font-family: 'Open Sans', sans-serif;
            font-size: 20px;
            margin: 0 auto 0px;
            padding-bottom: 10px;
            position: relative;
            }
        .content-title:after{
            position: absolute;
            bottom:-2px;
            left: 0;
            right: 0;
            margin: auto;
            /*border-bottom: 2px solid #444;*/
            content:"";
            width:120px;
        }
        .content-discription{
            padding: 0 80px;
            margin-bottom: 50px;
            font-size: 14px;
            line-height: 2;
        }

        /*more aout のbuttonスタイル*/
        .content-button{
            width: 170px;
            margin: 0 auto;
            padding: 5px 10px;
            text-align: center;
        }
        .content-button > a{
            background: #b8e1d9;
            display: block;
            max-width: 170px;
            padding: 7px 15px;
            /*margin: 0 auto;*/
            text-align: center;
        }
        .content-button > a:hover{/*カーソルが触れているときの設定*/
            opacity: 0.5;
        }
        /*画面サイズ960px⇒700px以下のボタンスタイル*/
        @media screen and (max-width: 960px){
            .content{
                margin-bottom: 10px;
                /*text-align: left;*/
                text-align: centert; /*960以下のテキストはセンターリング*/
            }
            .content-discription{
                padding: 0 10px;
                margin-bottom: 20px;
                font-size: 14px; /*14px*/
            }
            .content-title{
                margin: auto;
                /*margin: 10px 10px 5px 10px;*/
            }
            .content-title:after{
                margin: 0;
            }
            .content-discription{
                padding: 0 30px;
            }
        }

        .conten-category{      /*メイン記事 960PX以上 */
            list-style: none;
            padding: 0;
            display: flex;   /* BOXメニューの配置　横並び 縦並びはblock */
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .conten-category a{  /* 960PX以上の前へ、次へのBOXメニュー */
            display: block;
            border: 1px solid #ccc;
            width: 125px;  /* 960PX以上の前へ、次へのBOXメニュー */
            padding: 10px 20px;
            /*margin: auto auto;*/
            /*padding: auto;*/
            margin: auto;
        }
        .conten-category a:hover{
            opacity: 0.7;
        }
        .content-list{
           /* max-width: 100%;*/
            max-width: 100%;
            padding: 0 0 0 0;
            /*margin: 0 auto 10 auto;*/
            margin-bottom: auto;
            display: flex;
            justify-content: space-between;
        }
        .content-listItem{
            /* width: 800px; */  width: 100%;   
            /* height: 800px; */ height: 100%;  
            list-style: none;
            position: relative; /* 相対位置指定 */
            margin: 0 auto 10px auto;
        }
        .content-listItem img{
             /*width: 1024px;   width: 100%; */
             /*height: 1024px;   height: 100%;*/
            /*object-fit:  contain; */ object-fit:  cover;
            font-family: 'object-fit: cover;'; /*IE対策*/
        }
        .content-listItemMask {/*マスクの設定*/
            width: 100%;
            height: 100%;
            position: absolute;	/* 絶対位置指定 */
            top: 0;
            left: 0;
            opacity: 0;	/* マスクを表示しない */
            background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
            -webkit-transition:	all 0.4s ease;
            transition:		all 0.4s ease;
        }
        .content-listItem:hover .content-listItemMask {
            opacity:2;	/* マスクを表示する */
        }
        .content-listItemMask-caption {/*マスクの上の*/
            font-size: 30px;
            text-align: left;
            position: absolute;
            padding: auto;
            bottom: 0;
            color:#fff;
        }
/* 960PX以下 */
        @media screen and (max-width: 960px){
            .conten-category{
                padding: 0 0px;
                justify-content: space-between;
            }
            .conten-category li{  /* 960PX以下の前へ、次へのBOXメニュー */
                display: block;
                width: 35%;/*width: 45%;*/
                text-align: center;
                margin: 10px auto 10px auto; /*10px;*/
            }
            .conten-category a{
/* 960PX以下の前へ、次へのBOXメニューのマスの中、マスの大きさ */
                display: block;
                border: 1px solid #ccc;
                padding: auto; /*padding: 10px 20px;*/
                margin: auto;/*margin: 10px 0;*/
                width: 180px;
            }
            .conten-category a:hover{
                opacity: 0.7;
            }
            .content-list{
                display: flex;
                flex-direction: column;
                margin: 0;
            }
            .content-listLast{
                margin-bottom: auto;
            }
            .content-listItem{
            /*width: 500px;*/   width: 100%; 
            /*height: 500px;*/  height: 100%;
                margin: 0 0 0 0;
                /*margin: 0 auto 80px auto;*/
            }
/* 960PX以下の写真の表示 */
            .content-listItem img{
            /* width: 800px; */  width: 90%;
            /* height: 600px; */ height: 90%;
            /* object-fit:  contain; */ object-fit:  cover;
            font-family: 'object-fit: cover;'; /*IE対策*/
            }
            .content-button{
                width: auto;
                margin: 0 auto;
                padding: 0 auto;
                line-height: 1.2;
            }
            .content-button > a{
                display: block;
                max-width: 100%;
                background: #b8e1d9;
                padding: 15px;
                margin: 0 auto;
            }
        }
        /*フッター*/ /*注釈権利*/
        .footer{
            border-top: 1px solid #ccc;
            text-align: center;
            padding: 20px 0;
            font-size: 12px;
        }
        /*SNSボタン*/
        .sns {/*SNSアイコン*/
            display: flex;
            justify-content: center;
            padding: 0;
            list-style-type: none;
        }
        .snsIcon{
            width: 38px;
            margin: 0 5px 0;
        }
        @media(max-width: 960px){
            .footer-wrapGroupSNSicon{
                margin: 0 auto;
                padding: 20px;
            }
            .footer-wrapGroupSNSicon-group{
                justify-content: center;
            }
        }