body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}
figcaption {
  color: #7a7a7a;
  font-size: 0.875rem;
  margin-top:8px;
}

/* SCROLL UP Large and up */
@media screen and (min-width: 64em) {
    #scrollUp::before {
        display: inline-block;
        font-size: 30px;
        padding-left: 12px;
        padding-top:4px;
        font-weight: 800;
        font-family: "Font Awesome 5 Pro"; content: "\f062";
    }
     #scrollUp {
        bottom: 32px;
        right: 32px;
        width:50px;
        height:50px;
        background-color: rgba(0,0,0,0.5);
        -webkit-transition: all .25s;
        -moz-transition: all .25s;
        transition: all .25s;
    }
    a#scrollUp:hover {
        background-color: rgba(21,162,146,1);
    }
    a#scrollUp {
        color: #fff;
    }
}



/*nav*/

div#gmenu {
  position: fixed !important;
  -webkit-align-items: center;
  align-items: center;
  z-index: 999 !important;
  top: 0 !important;
  left: 0 !important;
  background: #323232;
  color: #FFF !important;
  width: 100% !important;
  display: flex !important;
  justify-content: space-between;
  -webkit-backface-visibility: hidden !important;
  font-family: "Noto Sans Japanese","source-han-sans-japanese";
  font-weight: 700;
}
div#gmenu.hide {
  top: -100px !important;
}

div#gmenu .logo {
 margin:16px 32px 16px 24px;
}
div#gmenu .gmenu_r_logo {
    margin-right:24px;
}
div#gmenu .gmenu_r_logo a {
    margin-right:4px;
}
div#gmenu .gmenu_r_logo a:last-child {
    margin-left: 16px;
}

div#gmenu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
    letter-spacing: -.4em;
}
div#gmenu ul li {
    display: inline-block;
    letter-spacing: normal;
}
div#gmenu ul li a {
  color: #fff;
  margin:0 16px;
  -webkit-transition: all 0.25s ease-in-out !important;
  -moz-transition: all 0.25s ease-in-out !important;
  -o-transition: all 0.25s ease-in-out !important;
  transition: all 0.25s ease-in-out !important;
}
div#gmenu ul li a:hover {
    color: #1da1f2;
}
div#gmenu ul li.home a::after {
    content: "|";
    margin-left:16px;
    color: #fff;
}

div#gmenu ul li.about a::before {
    content: "|";
    margin-right:16px;
    color: #fff;
}

div#gmenu .logo {
    min-width:100px;
}

div#gmenu .gmenu_r_logo {
    min-width:150px;
}


@media screen and (max-width: 39.9375em) {
div#gmenu {
    display: none !important;
}
div#gmenu-mobile {
  position: fixed;
  -webkit-align-items: center;
  align-items: center;
  z-index: 2;
  top: 0;
  left: 0;
  background:#323232;;
  color: #FFF;
  width: 100%;
  display: flex;
  justify-content: space-between;
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  -webkit-backface-visibility: hidden;
  height:64px;
}
#gmenu-mobile .logo {
  position: absolute;
  top: 50%;
  left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
#gmenu-mobile .gmenu_r_logo {
    position: absolute;
    top: 50%;
    right: 24px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
/*ハンバーガーメニュー*/

#hamb_nav .hamb-wrap {
  height: 30px;
  width: 40px;
  position: absolute;
  top: 50%;
  left: 24px;
   -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  cursor: pointer;
  z-index: 9999;
}
#hamb_nav .hamb {
  height: 3px;
  width: 35px;
  background: #fff;
  position: absolute;
  top: 14px;
  left: 0;
  transition: 0.2s;
}
#hamb_nav .hamb:before, #hamb_nav .hamb:after {
  content: '';
  position: absolute;
  background: #fff;
  height: 3px;
  width: 100%;
  transition: 0.2s;
}
#hamb_nav .hamb:before {
  top: 8px;
}
#hamb_nav .hamb:after {
  top: -8px;
}
#hamb_nav .active {
  background: none;
  transition: 0.2s;
}
#hamb_nav .active:before, #hamb_nav .active:after {
  transition: 0.2s;
  top: 0;
}
#hamb_nav .active:before {
  transform: rotate(45deg);
}
#hamb_nav .active:after {
  transform: rotate(-45deg);
}
#hamb_nav .logo {
  color: white;
  font-family: 'Over the Rainbow';
  font-size: 1.9em;
  margin: 0 0 0 85px;
  line-height: 2;
}
#hamb_nav nav {
    position: absolute;
    top: 0;
    left: 0;
    top: 64px;
    height: calc(100vh - 64px);
    width: 100%;
    padding-top:20px;
    padding-left: 24px;
    display: none;
    background: rgba(50, 50, 50, 0.97);
    z-index: 3;
}
    #hamb_nav ul.topgnav {
        font-size: 1rem;
        list-style: none;
        position:relative;
    }
    #hamb_nav ul.topgnav ul {
        list-style: none;
        margin: 0;
    }
    #hamb_nav ul.topgnav ul {
        margin-left: 1rem;
    }
    #hamb_nav ul.topgnav li {
        line-height: 2;
        font-weight: 800;
    }
    #hamb_nav ul.topgnav li a {
        color: #ffffff;
    }
    #hamb_nav ul.topgnav li a::before {
        margin-right: 0.5em;
        display: inline-block;
        font-family: "Font Awesome 5 Pro"; content: "\f105";
    }
    p.sns_nav_sm {
        margin-left: 1rem;
    }
    p.sns_nav_sm .fa-stack {
        font-size: 1.3rem;
    }
    p.sns_nav_sm a {
        margin-right:8px;
    }
}


/*TOPPage*/

.tophead {
    margin-bottom: 64px;
}

.tophead p {
    text-align: center;
}

.toplogo {
    margin-bottom: 48px;
}

.toplogo img {
    width:320px;
}

.headcopy {
    font-family: "Noto Sans Japanese","source-han-sans-japanese";
    font-weight: 700;
    font-size: 1.1rem;
    color: #525252;
}

.headcopy span.hc2 {
    font-family: "Noto Sans Japanese","source-han-sans-japanese";
    font-weight: 600;
    font-size: 1.1rem;
    color: #333232;
}

/*breadcrumb*/

.breadcrumbscontainer {
    margin-top:90px;
}
.breadcrumbs li {
    font-size: 0.8rem;
}

.breadcrumbs li:not(:last-child)::after {
    font-family: "Font Awesome 5 Pro";
    content: "\f105";
    font-weight: 500;
      color: #cacaca;
}

/*page*/
.pagecontainer {
    margin-top:120px;
    margin-bottom: 96px;
}

.toppage .pagecontainer {
    margin-top: 40px;
    margin-bottom: 0px;
}

.breadcrumbscontainer + .pagecontainer {
    margin-top:64px;
}

@media screen and (max-width: 39.9375em) {
    .pagecontainer {
    margin-top:120px;
    margin-bottom: 96px;
    }
}

.title-area{
}
.corner-title {
    font-family: "Noto Sans Japanese","source-han-sans-japanese";
    font-weight: 500;
    font-size: 1.2rem;
}
.corner-title a {
    background-color: #1779ba;
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
}
.title-area {
    margin-bottom: 16px;
}
.title-area h1 {
    font-family: "Noto Sans Japanese","source-han-sans-japanese";
    font-weight: 600;
    font-size: 2.5rem;
    color: #323232;
}



.title-area h1.categolyheadline {
    font-size: 2rem;
    margin-bottom: 0;
}
.title-area p {
    font-size:1.2rem;
    margin-bottom:2rem;
}
.title-area .article-title-col,.title-area .article-title-date {
    color: #323232;
}
p.article-title-col {
    margin-bottom: 4px;
}
.title-area .article-title-col a {
    background-color: #d9d9d9;
    color: #323232;
    padding: 4px 16px;
    border-radius: 4px;
    margin-right: 8px;
    font-size: 0.9rem;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    transition: all .25s;
}
.title-area .article-title-col a:hover {
    background-color: #b4b4b4;
}
.main-area .main-content {
    margin: 32px 40px;
}

.main-area .main-content p {
    line-height: 2;
    margin-bottom: 2rem;
}

@media screen and (max-width: 39.9375em) {
    .main-area .main-content {
    margin: 32px 0px;
    }
}

/*page side-area*/
.side-id {
    text-align: center;
    margin-top:0;
    margin-bottom: 32px;
}
.side-id p {
    font-size: 0.9rem;
}
.side-copy{
    font-family: "Noto Sans Japanese","source-han-sans-japanese";
    font-weight: 700;
    font-size: 0.9rem;
    color: #525252;
    margin: 16px 0 16px;
    text-align: left;
}

.side-area h2 {
    font-family: "Noto Sans Japanese","source-han-sans-japanese";
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 24px;
    border: solid 3px #323232;
    padding:8px;
    text-align: center;
}
.feature-article,.feature-links {
    margin-bottom: 72px;
}
.feature-article a {
    display: block;
    margin-bottom: 32px;
}

@media screen and (max-width: 39.9375em) {
    #aside {
        width:100%;
    }
}



.article-cover {
    margin-bottom: 16px;
}
.article-text {
    color: #323232;
    font-size: 0.9rem;
    padding:0;
}
.article-title {
    font-family: "Noto Sans Japanese","source-han-sans-japanese";
    font-weight: 600;
    line-height: 1.5;
}
.feature-article .article-title {
    margin-bottom: 8px;
}
.article-date {
    font-size: 0.84rem;
    color: #525252;
}

.feature-links h2 {
    margin-top:72px;
}
.feature-links h2:first-child {
    margin-top:0;
}

.feature-links a {
    display: block;
    border: solid 1px #d9d9d9;
        text-align: center;
    margin-bottom: 8px
}
.side-link-img {
    display: flex;
    height:200px;
    align-items :center;
    justify-content:center;
}
.side-link-img p {
    margin:0;
    padding:0;
}
.feature-links a .side-link-text p {
    color: #7a7a7a;
    font-size: 0.9rem;
    line-height: 1.4;
}
.side-sns-area {
    margin-top:24px;
    position: fixed;
}
.side-sns-area ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.side-sns-area li {
    text-align: center;
    margin-bottom: 16px;
    
}
.side-sns-area a .fa-circle {
    color:#d9d9d9;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    transition: all .25s;
}
.side-sns-area a .fa-stack {
    font-size: 1.6rem;
}
.side-sns-area .button-twitter a:hover .fa-circle {
    color:#1DA1F2;
}
.side-sns-area .button-facebook a:hover .fa-circle {
    color:#425F9C;
}
.side-sns-area p {
    font-family: "Noto Sans Japanese","source-han-sans-japanese";
    font-weight: 600;
    color:#b4b3b3;
}

/*relation-area*/
.foot-relation-article-area {
    background-color: #f3f3f3;
    padding: 32px 0;
}
.foot-relation-article-area h2 {
    font-family: "Noto Sans Japanese","source-han-sans-japanese";
    font-weight: 600;
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 32px;
}
section.relation-article-area {
    display: flex;
    justify-content:center;
   flex-wrap:wrap;
}

.article-block {
    background-color: #fff;
}
.article-block .article-title {
    font-size: 1rem;
    margin-bottom: 8px;
}
.article-block .article-text {
    padding : 0;
}

/*top-categoly-article-area*/

.top-categoly-article-area section.relation-article-area {
    display: flex;
    justify-content:flex-start;
   flex-wrap:wrap;
}

.top-categoly-article-area h2 {
    font-family: "Noto Sans Japanese","source-han-sans-japanese";
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 16px;
    color:#6d6c6c;
}

/*top-feature-area*/

@media screen and (min-width: 64em) {
    section.top-feature-area {
        display: flex;
        margin-bottom: 0;
    }
}

.feature-block {
    background-color: #fff;
    margin:0 16px 32px;
}
.feature-cover {
    margin-bottom: 16px;
}
section.top-feature-area h2 {
    font-size: 1.375rem;
}


/*footer*/
footer {
    background-color: #F6F5EC;
    padding: 32px 0;
    margin-top:0;
}
footer p.copyrights {
    font-family: "Noto Sans Japanese","source-han-sans-japanese";
    font-size: 0.9rem;
}

footer ul.footnav  {
    list-style: none;
    margin: 0 0 32px 0;
}
footer h2 {
    font-family: "Noto Sans Japanese","source-han-sans-japanese";
    font-weight: 500;
    font-size: 1.1rem;
    color: #5c5c5c;
}
footer ul.footnav li,footer ul.footnav li a {
    color: #7a7a7a;
}
footer ul.footnav li a:hover {
    text-decoration: underline;
}
footer ul.footnav li::before {
    margin-right: 0.5em;
    display: inline-block;
    font-family: "Font Awesome 5 Pro"; content: "\f105";
}
footer ul.toogrouplist {
    list-style: none;
    margin: 0 0 32px 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    column-gap: 54px;
}
footer ul.toogrouplist li {
    line-height: 2;
    margin:0 8px 32px 8px;
}
@media screen and (min-width: 40em) {
    footer ul.toogrouplist {
    display: flex;
    justify-content: flex-start;
}
}

footer ul.toogrouplist a img {
    opacity: 0.7;
    -webkit-transition: all 0.25s ease-in-out !important;
  -moz-transition: all 0.25s ease-in-out !important;
  -o-transition: all 0.25s ease-in-out !important;
  transition: all 0.25s ease-in-out !important;
}
footer ul.toogrouplist a:hover img {
    opacity: 1;
}
p.foot-id {
    margin-bottom: 48px;
}

/*entrylist*/

a .label {
    cursor: pointer;
}

.entrylist {
    margin-bottom: 56px;
}

.entrylist .label {
    background-color: #e2e2e2;
    color: #7b7b7b;
    padding: 4px 16px;
    border-radius: 4px;
    margin-left: 4px;
    margin-bottom:4px;
    font-size: 0.75rem;
    line-height:1;
    font-weight: 300;
}

.entrylist a h2,.entrylist a p {
    color: #323232;
}
.entrylist h2 {
    font-size: 1.2rem;
    font-family: "Noto Sans Japanese","source-han-sans-japanese";
    font-weight: 600;
    margin-top:0
}
.entrylist p {
    margin-bottom: 8px;
}

.entrylist p.excerpt {
    font-size: 0.875rem;
    margin-bottom: 16px;
}

.entrylist p.date {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #7a7a7a;
}

.entrylist p.date .label:first-child {
    margin-left: 12px;
}

/*relation-article-area*/

.relation-article-area h3 {

}

.relation-article-area .entrylist {
    margin-bottom: 16px;
}

.relation-article-area .entrylist h2 {
    font-size:1rem;
    margin-bottom: 8px;
}

.relation-article-area .entrylist p.coverimage img {
    width:150px;
    height:80px;
    object-fit: cover;
}









/*entry*/
.mt-image-left {
    float: left; margin: 0 20px 20px 0;
}
.mt-image-center {
    text-align: center; display: block; margin: 0 auto 20px;
}
.mt-image-right {
    float: right; margin: 0 0 20px 20px;
}

.main-content h2 {
    font-family: "Noto Sans Japanese","source-han-sans-japanese";
    font-weight: 500;
    font-size: 2rem;
    color: #323232;
    margin-bottom: 2rem;
}

.main-content p+h2,.main-content code+h2,.main-content ul+h2,.main-content ol+h2,.main-content table+h2 {
    margin-top:4rem;
}

.main-content p+h3,.main-content code+h3,.main-content ul+h3,.main-content ol+h3,.main-content table+h3 {
    margin-top:4rem;
}

.main-content h3 {
    font-family: "Noto Sans Japanese","source-han-sans-japanese";
    font-weight: 500;
    font-size: 1.6rem;
    color: #323232;
    margin-bottom: 2rem;
}

@media screen and (max-width: 39.9375em) {
    .title-area h1{
        font-size: 1.6875rem;
    }
    .main-content h2 {
        font-size: 1.4375rem;
        margin-bottom: 1.5rem;
    }
    .main-content h3 {
        font-size: 1.21875rem;
        margin-bottom: 1.5rem;
    }
    .main-content p {
        font-size: 0.9375rem;
    }
    .main-content p+h2,.main-content code+h2,.main-content ul+h2,.main-content ol+h2,.main-content table+h2 {
    margin-top:3rem;
}

.main-content p+h3,.main-content code+h3,.main-content ul+h3,.main-content ol+h3,.main-content table+h3 {
    margin-top:3rem;
}
}

.main-content a.button {
    font-family: "Noto Sans Japanese","source-han-sans-japanese";
    font-weight: 600;
    border-radius: 4px;
    padding: 12px 32px;
}

.main-content a.button i {
    margin-left:0.5rem;
}

.main-content .writerinfo {
    margin-bottom: 48px;
}

div.gallery {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}
div.gallery img {
    width:49%;
    margin-bottom: 16px;
}
div.gallery img:last-child {
    width:100%
}
div.gallery img:nth-child(2n){
    width:49%;
    margin-left:2%;
}

code {
    display: block;
    margin-bottom: 32px;
    padding: 16px;
}

p.categorydescription {
    margin-top: 24px;
    font-family: "Noto Sans Japanese","source-han-sans-japanese";
    font-weight: 500;
    color: #5c5c5c;
}

/*Pagenation*/

li span.current_page {
    padding: 0.1875rem 0.625rem;
    background: #1779ba;
    color: #fefefe;
    cursor: default;
    display:block;
}

/*taglist*/

.taglist {
    margin: 120px 0 64px;
    background-color: #f3f3f3;
    padding:40px 24px;
}

.toppage .taglist {
  margin-top:32px;
  margin-bottom:32px;
}

.taglist h2 {
    font-size: 1.2rem;
    margin-bottom: 16px;
    font-family: "Noto Sans Japanese","source-han-sans-japanese";
    font-weight: 600;
    color:#7d7d7d;
}

.taglist p {
    margin-bottom: 0 !important;
    line-height:2;
}

.taglist p a {
    background-color: #d9d9d9;
    color: #323232;
    padding: 4px 16px;
    border-radius: 4px;
    margin-right: 8px;
    font-size: 0.9rem;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    transition: all .25s;
    white-space: nowrap;
}
.taglist p a:hover {
    background-color: #b4b4b4;
}

section.top-follow-area{
    background-color: #323232;
    padding: 32px 8px;
    margin-bottom: 0;
    margin-top:0;
}
section.top-follow-area h2,section.top-follow-area p {
    color: #fefefe
}
section.top-follow-area h2 {
    font-family: "Noto Sans Japanese","source-han-sans-japanese";
    font-weight: 500;
    font-size: 2rem;
}
div.fb-page,div.twfollow {
    margin-bottom: 32px;
}
p.snsiconlist {
    text-align: center;
}
p.snsiconlist span {
    margin:0 4px 16px 4px;
}
p.snsiconlist a .fa-circle {
    color:#d9d9d9;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    transition: all .25s;
}
p.snsiconlist a .fa-stack {
    font-size: 1.6rem;
}
p.snsiconlist .button-twitter a .fa-square {
    color:#1DA1F2;
}
p.snsiconlist .button-facebook a .fa-square {
    color:#425F9C;
}
.snsbutton {
    margin-bottom:48px;
}
.fb-like {
    margin-bottom: 0;
}
.snsbutton p.twitterbutton {
    margin-bottom: 8px;
    margin-top:48px;
}

.embedly-card {
  margin-bottom:64px;
  border:solid 1px #e1e1e1;
  border-radius:4px;
}

.nav-twitter .fa-circle {
    color:#1DA1F2;
}
.nav-facebook .fa-circle {
    color:#425F9C;
}

/*design surf seminar report*/

p.seminar_name {
    margin-bottom: 0 !important;
    font-weight: bold;
    color:#323232;
}
p.seminar_name span {
    font-size:0.8125rem;
    margin-left:8px;
}
.seminar_section {
    line-height:1.5 !important;
    color: #5c5c5c;
    font-weight: bold;
    font-size:0.9375rem;
    margin-bottom: 16px !important;
}
.seminar_section p {
margin-bottom:0 !important;
}
.seminar_section small {
    font-size: 0.875rem;
    color: #7a7a7a;
    line-height:1.2 !important;
}
.seminar_profile {
    font-size: 0.875rem;
    color: #5c5c5c;
    margin-bottom:32px;
}
.writerinfo img {
  padding-bottom:16px;
}

.dssr-callout {
    margin-bottom:32px;
}
.dssr-callout p {
    font-size:80%;
    margin-bottom:0 !important;
}

.category2ndlist {
    border:solid 1px rgba(10, 10, 10, 0.25);
    margin:32px 0;
    padding:16px;
  }
  .category2ndlist ul {
    margin-bottom:0;
  }

div.main-content a.external::after {
    font-family: "Font Awesome 5 Pro";
    content: "\f08e";
    font-weight: 300;
    padding: 0 5px;
}
div.main-content a.button.external::after {
  font-weight: 600;
}

p.mainlogo {
}
p.rlogo {
    margin:16px 0
}
.topheadcopy {
        font-family: "Noto Sans Japanese","source-han-sans-japanese";
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    margin: 24px 0 40px;
}
.entrylist + nav {
    margin-top: -16px;
}

.top-categoly-article-area h2.listhead {
    display: flex;
    justify-content: space-between;
    align-items:center;
    border-bottom: solid 1px #adadad;
    margin: 0 0 24px;
}

.top-categoly-article-area h2.listhead a.button.secondary {
    font-size: 0.7rem;
    margin-bottom: 4px;
    background-color: #8d8d8d;
    padding:6px 16px;
}

.toppagenation {
    margin:0 0 64px 0;;
}

.hs {
    margin-bottom:32px;
}

@media screen and (max-width: 39.9375em) {
    /*横スクロール*/
    
    .small-full {
    padding-right: 0;
    padding-left: 0;
    max-width: 100%;
    margin: 0 auto; 
    }
    
    :root {
      --gutter: 20px;
    }

    .app {
      padding: var(--gutter) 0;
      display: grid;
      grid-gap: var(--gutter) 0;
      grid-template-columns: var(--gutter) 1fr var(--gutter);
      align-content: start;
        -webkit-overflow-scrolling: touch;
    }

    .app > * {
      grid-column: 2 / -2;
    }

    .app > .full2 {
      grid-column: 1 / -1;
    }
    
    .app .article-block {
        scroll-snap-align: start;
    }

    .hs {
      display: grid;
      grid-gap: calc(var(--gutter) / 2);
      grid-template-columns: 10px;
      grid-template-rows: minmax(150px, 1fr);
      grid-auto-flow: column;
      grid-auto-columns: calc(50% - var(--gutter) * 2);
      overflow-x: scroll;
      scroll-snap-type: x proximity;
      scroll-padding:10px;
      padding-bottom: calc(.75 * var(--gutter));
      margin-bottom: calc(-.25 * var(--gutter));
    }

    .hs:before,
    .hs:after {
      content: '';
      width: 10px;
    }
    
    .hs.grid-padding-x .cell {
        padding:0;
    }
    
}

.toppagesmallheader {
    display: none;
}


@media screen and (max-width: 39.9375em) {
    .toppagesmallheader {
        display: block;
    background-color: #323232;
    padding: 56px 0 56px 0;
}
    .toppagesmallheader {
        padding: 60px 16px 0 16px;
    }
    .toppagesmallheader + .pagecontainer {
    margin-top:32px;
}
}

.breadcrumbs li {
  text-transform: none;
}

/* サーチバー */

.hero-search-filter {
    display: flex;
    justify-content: flex-end;
    margin-top: 100px;
  }
  
  .hero-search-filter-logo {

  }
  
  .hero-search-filter-content {
    width: 400px;
  }
  
  @media screen and (max-width: 39.9375em) {
    .hero-search-filter-menu li {
              flex-basis: 50%;
    }
    .hero-search-filter-menu li a {
              justify-content: center;
    }
  }
  
  .hero-search-filter-menu a {
    color: #f3f3f3;
    font-weight: bold;
  }
  
  .hero-search-filter-menu a .fa {
    font-size: 1.125rem;
    font-weight: normal;
    text-decoration: none;
  }

  .hero-search-filter-form {
    display: flex;
    align-items: center;
  }
  
  .hero-search-filter-form .divider {
    background-color: #cacaca;
    width: 1px;
  }
  
  .hero-search-filter-form label {
    margin-right: 0.75rem;
    margin-left: 0.75rem;
    color: #8a8a8a;
    font-weight: bold;
  }
  
  .hero-search-filter-form input {
    margin-bottom: 0;
    background: #f3f3f3;
  }
  .hero-search-filter-form .button {
    margin-bottom: 0;
    background: #8a8a8a;
  }
  
  @media screen and (max-width: 39.9375em) {
    .hero-search-filter-form {
      width: 95%;
    }
  }
  
  .hero-search-filter-form-find,
  .hero-search-filter-form-near {
    border: 0;
    box-shadow: none;
  }
  
  .hero-search-filter-form-find:focus,
  .hero-search-filter-form-near:focus {
    border:#e1e1e1 1px solid;
    box-shadow: none;
  }

  .twitter-embed {
    padding-bottom: 40px;
  }
.top_add_banner {
	display: block;
	margin:16px 0
}
.nav-twitter-x .fa-circle {
    color:#000;
}
.side-sns-area .button-twitter a:hover .fa-circle {
    color:#000000;
}

@media screen and (max-width: 39.9375em) {
  	.hero-search-filter {
    margin-top: 18px;
  }
    .hero-search-filter-form {
		margin-right:auto;
        margin-left:auto;
    }
    .toppage .pagecontainer {
    margin-top: 20px;
    }
    .headcopy span.hc2 {
    display:block;
    }
}