/*値が 1 つ指定された場合、全四辺に同じマージンが適用される。*/
/*値が 2 つ指定された場合、1 つ目のマージンは上下、2 つ目は左右の辺に適用される。*/
/*値が 3 つ指定された場合、1 つ目のマージンは上、2 つ目は左右、3 つ目は下の辺に適用される。*/
/*値が 4 つ指定された場合、マージンはそれぞれ上、右、下、左の順 (時計回り) に適用される。*/
        /*ページ全体の構成*/
        body{
            background: #fff;
            color: #444444;
            font-size: 14px;
            font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Helvetica, Arial, 'ＭＳ Ｐゴシック', sans-serif;
            line-height: 1.42857;
            margin: 0;
        }
        a:link {
            color: #800; /* color: #999; */
            text-decoration: none;
        }
        a:hover {
            color: #333; /* color: #999; */
            text-decoration: none;
        }
        a:visited {
            color: #080; /* color: #999; */
            text-decoration: none;
        }

        /* ヘッダーの設定 */
        .header {/*ヘッダー全体の構成*/
            z-index: 100;
            padding: 24px 0;
            width: 100%;
        }
        .header-title {/*サイト名*/
            font-family: 'Abril Fatface', cursive;
            color: #444;
            font-weight: bold;
            font-size: 2.4em;
            border-bottom: #ccd1d9 solid 1px;
            text-align: center;
            position: relative;
            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:320px;
            /*width:auto;*/
        }

        /*画面サイズ960px以下のヘッダースタイル*/
        @media screen and (max-width : 960px){
            .header{/*ヘッダー全体の構成*/
                padding: 24px 0px;
                position: relative;
                border-bottom: 1px solid #ccd1d9;
                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;*/
                width: auto;
            }
            .header-title {/*サイト名*/
                position: relative;
                font-size: 30px;
                /*text-align: left;*/
                text-align: center;
                border:none;
                padding: 0;
                /*margin: 0 0 0 30px*/
                margin: 0 auto 0 auto;
            }
            .header-title:after{/*サイト名下の線の設定*/
                display: none;
            }
        }

        /* ナビゲーション */
        .nav {                /*ナビの構成*/
            max-width: 960px;
            height: auto;
            margin: 0 auto 0 auto;  /*homeメニューとGalleryタイトルの間隔*/
            background: #fff;
            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;
            text-decoration: none;
        }
        .nav-list > li a:hover {
            color: #999;
        }
        .nav-list > li a.active {
            border-bottom: #333 solid 2px;
            color: #999;
        }
        /*画面サイズ960px以下のナビスタイル*/
        @media screen and (min-width:960px) {
            #nav-drawer{
                display:none;
            }
        }
        /*画面サイズ960px以下のスタイル*/
        @media screen and (max-width: 960px) {
            .nav{
                 display:none;
            }
            /*ハンバーガーメニューの設定*/
            /*3本の横線が並ぶアイコンで、見た目がハンバーガー（バンズとパテ）のようにみえる*/
            #nav-drawer {
            position: relative; 
            margin: 0 0 0 0;/*IE対策の右寄せ*/
            }

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

            #nav-open { /*アイコンのスペース*/
            display: inline-block;
            width: 30px;
            margin: 0 30px 0 0;
            }
            /*ハンバーガーアイコンをCSSだけで表現*/
            #nav-open span, #nav-open span:before, #nav-open span:after {
                position: absolute;
                height: 3px;/*線の太さ*/
                width: 28px;/*長さ*/
                background: #555;
                display: block;
                content: '';
                cursor: pointer;
            }
            #nav-open span:before {
                bottom: -8px;
            }
            #nav-open span:after {
                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;
            }
            /*ハンバーガーメニュー展開後の中身*/
            #nav-content {
            overflow: auto;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9999;/*最前面に*/
            width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
            max-width:330px;/*最大幅（調整してください）*/
            height: 100%;
            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;
            margin: 10px auto 30px auto; /*margin: 0 auto 100px;*/
            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: 200px;
            margin: 0 auto;
            padding: 5px 10px;
            text-align: center;
        }
        .content-button > a{
            background: #b8e1d9;
            display: block;
            max-width:200px;
            padding: 7px 15px;
            margin: 0 auto;
            text-align: center;
        }
        .content-button > a:hover{/*カーソルが触れているときの設定*/
            opacity: 0.5;
        }
        /*画面サイズ960px以下のボタンスタイル*/
        @media screen and (max-width: 960px){
            .content{
                margin-bottom: 50px;
                /*text-align: left;*/
                text-align: centert; /*960以下のテキストはセンターリング*/
            }
            .content-discription{
                padding: 0 30px;
                margin-bottom: 50px;
                font-size: 14px;
            }
            .content-title{
                margin: auto;
                /*margin: 0 10px 0 10px;*/
            }
            .content-title:after{
                margin: 0;
            }
            .content-discription{
                padding: 0 30px;
            }
        }

        /*メイン記事 960px */
        .conten-category{
            list-style: none;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
/* 960PX以上の前へ、次へのBOXメニュー */
        .conten-category a{  
            display: block;
            /*padding: 10px 60px;*/
            padding: 10px 10px 10px 10px;
            border: 1px solid #ccc;
            margin: 15px 5px 5px 5px; 
/* 960PX以上の前へ、次へのBOXメニュー 上、右、下、左*/
/*margin: 0px 0px 0px 0px;*/
/*margin: auto auto;*/
            width: 170px;  
/* width: 125px; 960PX以上の前へ、次へのBOXメニュー */
        }
        .conten-category a:hover{
            opacity: 0.7;
        }
        .content-list{
            max-width: 960px;
            padding: 0 20px;
            margin-bottom: 100px; /* 写真アイテムの下のスペース */
            /* margin-bottom: 80px; */
            display: flex;
            justify-content: space-between;
        }
        .content-listItem{
            width: 300px;
            height: 300px;/*  height: 250px; */
            list-style: none;
            position: relative;	/* 相対位置指定 */
        }
        .content-listItem img{
            width: 100%;
            height:100%;
            object-fit:  contain; /* object-fit:  cover; */
            font-family: 'object-fit: cover;'; /*IE対策*/
        }
        .content-listItemMask {/*マスクの設定*/
            width: 100%;
            height: 70%;
            position: absolute;	/* 絶対位置指定 */
            top: 50px;
            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:1;	/* マスクを表示する */
        }
        .content-listItemMask-caption{/*マスク上の文字*/
            font-size: 14px;
            text-align: left;
            position: absolute;
            padding: 50px;
            bottom: 10;
            color:#fff;
        }
/* max-widthを960から860に変更してみた　20250109 */
        @media screen and (max-width: 900px){
            .conten-category{
                padding: 0 30px;
                justify-content: space-between;
            }
            .conten-category li{
                display: block;
                width: 50%;
                text-align: center;
                margin: 5px auto 5px auto; /*10px;*/
            }
/* 960PX以下の前へ、次へのBOXメニューのマスの中、マスの大きさ */
            .conten-category a{
                display: block;
                border: 1px solid #ccc;
                padding: 10px 10px;
                margin: auto;/*margin: 10px 0;*/
            }
            .conten-category a:hover{
                opacity: 0.7;
            }
            .content-list{
                display: flex;
                flex-direction: column;
                margin-bottom: 50px;
                margin: 0;
            }
            .content-listLast{
                margin-bottom: 50px;
            }

            .content-listItem{
                width: 350px; /* width: 350px; */
                height: 350px; /* height: 230px; */
                /*margin:0 auto 10px;*/
                margin: 10px auto 180px auto;
                /*  margin-bottom: 80px;*/
                /*  値が 4 つ指定された場合、マージンはそれぞれ上、右、下、左の順*/
            }
            .content-button{
                width: auto;
                margin: 0 auto;
                padding: 0 30px;
                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;
            }
        }