/*===============reset=================*/
        * {
            margin:0;
            padding:0;
            border:0;
            outline:0;
            font-size:100%;
            max-width:100%;
            vertical-align:baseline;
            background:transparent;
        }
        body {
            line-height:1.6;
        }
        article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
            display:block;
        }
        ol, ul {
            list-style:none;
        }
        blockquote, q {
            quotes:none;
        }
        blockquote:before, blockquote:after,
        q:before, q:after {
            content:'';
            content:none;
        }
        a {
            margin:0;
            padding:0;
            font-size:100%;
            vertical-align:baseline;
            background:transparent;
            text-decoration: none;

        }
        img {
        　　　vertical-align: top;
        　　　font-size:0;
        　　　line-height: 0;
        }
        strong {
             font-weight: bold;
        }
        /*===============End:reset=================*/


        body {
            color: #202020;
            background: #fafafa;
            font-family: "Noto Serif JP", serif;
            font-size: 20pt;
            font-weight: 900;
            font-feature-settings: "palt" 1;
            letter-spacing: -0.01em
        }
        ::selection {
          background: #ff8c00;
          color: #145DA0;
        }
        a {
            color: #202020;
            text-decoration: underline;
        }
        a:hover{
            color: #145DA0;
        }
        p{
            margin-bottom: 20px;
        }
        h1 {
            font-size: 150%;
        }
        h1 a {
          color: #145DA0;
        }
        h1 a:hover {
          color: #ff8c00;
        }
        h2 {
            font-size: 100%;
        }
        .hidden {
          display: none;
        }
        .colored {
          color: #145DA0;
        }
        .head {
          padding-top: 20px;
        }
        .gnav{
          display: flex;
          flex-wrap: wrap;
        }
        .gnav li{
          margin-right: 10px;
        }
        .pnav{
          display: inline-flex;
          flex-wrap: wrap;
        }
        .pnav li{
          margin-right: 10px;
          white-space: nowrap;
        }
        .container {
          padding-top: 50px;
          display: flex;
          flex-wrap:wrap;
        }
        .flex,.flex6 {
          font-size: 50%;
        }
        .flex2 {
          font-size: 70%;
        }
        .flex,.flex3 {
            position: relative;
        }
        /*
        .flex:before,.flex3:before {
            display: block;
            content: "";
            padding-top: 100%;
        }
        .flex2:before {
            display: block;
            content: "";
            padding-top: 50%;
        }
        */
        .flex2,.flex4 {
            position: relative;
        }
        .flex_content{
            position: ;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
        .flex4 .flex_content{
            position: relative;
        }
        .items{
            display: block;
            margin-bottom: 7px;
        }
        .footer {
            font-size: 40%;
            border-top: 1px solid;
            padding: 40px 0px;
            text-align: center;
        }
        .atmark span {
            display: none;
        }
        .atmark:after {
            content: "@";
        }

        @media screen and (max-width:840px) {
            /*　画面サイズが610pxまではここを読み込む　*/
        body {
            font-size: ;
        }
        .wrap {
            width: 94%;
            margin: auto;
        }
        .flex,.flex2,.flex3,.flex4,.flex6 {
            width: 100%;
            margin-bottom: 20px;
        }
        .flex_content img{
            width: 100%;
        }
        }
        @media screen and (min-width:840px) and (max-width:1260px) {
            /*　画面サイズが840pxから1024pxまではここを読み込む　*/
        body {
            font-size: ;
        }
        .head {
            width: 800px;
            margin: 0 auto;
        }
        .wrap {
            width: 840px;
            margin: auto;
        }
        .flex {
        width: 380px;
        margin: 20px;
        }
        .flex img {
            width: 380px;
        }
        .flex2,.flex3,.flex4,.flex5,.flex6 {
        width: 800px;
        margin: 20px;
        overflow: hidden;
        }
        .flex2 img {
            height: 380px;
            width: auto;
        }
        .flex3 img {
            width: 800px;
        }
        .flex5 img {
            width: 800px;
        }
        .footer {
            width: 800px;
            margin: 0 auto;
        }
        }
        @media screen and (min-width:1260px) {
            /*　画面サイズが1260pxからはここを読み込む　*/
        body {
            font-size: ;
        }
        .head {
            width: 1220px;
            margin: 0 auto;
        }
        .wrap {
            width: 1260px;
            margin: auto;
        }
        .flex,.flex6 {
        width: 380px;
        margin: 20px;
        }
        .flex img {
            width: 380px;
        }
        .flex2,.flex4,.flex5 {
        width: 800px;
        margin: 20px;
        overflow: hidden;
        }
        .flex3 {
        width: 1220px;
        margin: 20px;
        overflow: hidden;
        }
        .flex2 img {
            height: 380px;
            width: auto;
        }
        .flex3 img {
            width: 1220px;
        }
        .flex5 img {
            width: 800px;
        }
        .footer {
            width: 1220px;
            margin: 0 auto;
        }
      }