@tailwind base;
@tailwind components;
@tailwind utilities;

a {
  @apply border-b border-dotted border-black border-slate-400
}
@font-face {
  font-family: 'icomoon';
  src:  url(/assets/icomoon-464b0217b7126136783736d755cfc0b2d5923749476e21e5d4e29128af2b356d.eot?xny5oq);
  src:  url(/assets/icomoon-464b0217b7126136783736d755cfc0b2d5923749476e21e5d4e29128af2b356d.eot?xny5oq#iefix) format('embedded-opentype'),
    url(/assets/icomoon-6678a1461be00259f9711ef1eb42a55383c4ad8008f193ab4fb4d0a8f4ab2aa0.ttf?xny5oq) format('truetype'),
    url(/assets/icomoon-2072603d3209473f35f44f2f591d530cf374999bd787d456aece8425a81c02e2.woff?xny5oq) format('woff'),
    url(/assets/icomoon-f69ea97c44dea9c0fa72323c8716249bec261fdec943e5530536113f18a4723e.svg?xny5oq#icomoon) format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-search:before {
  content: "\f002";
}
.icon-close:before {
  content: "\f00d";
}
.icon-remove:before {
  content: "\f00d";
}
.icon-times:before {
  content: "\f00d";
}
.icon-external-link:before {
  content: "\f08e";
}
.icon-twitter:before {
  content: "\f099";
}
.icon-chain:before {
  content: "\f0c1";
}
.icon-link:before {
  content: "\f0c1";
}
.icon-bars:before {
  content: "\f0c9";
}
.icon-navicon:before {
  content: "\f0c9";
}
.icon-reorder:before {
  content: "\f0c9";
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */

body{
  /* Noto Serif JP の webfont は読み込まない(layouts/_external_tags.html.erb 参照)。端末標準の明朝に任せる。 */
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Noto Serif CJK JP', 'Noto Serif JP', serif;
}

.title-font{
  font-family: 'RocknRoll One', sans-serif;
}

.share-flash{
  animation: change-color-share-flash 1s linear;
}

@keyframes change-color-share-flash {
  0%,50%,100%{
    background-color: #F3F4F6;
  }
  25%,75%{
    background-color: #888888;
  }
}

.background-icon{
  background-attachment: fixed;
  background-size: 60%;
}

@media screen and (max-width: 1024px){
  .background-icon{
    background-size: 75%;
  }
}

@media screen and (max-width: 768px){
  .background-icon{
    background-size: 90%;
  }
}

@media screen and (max-width: 640px){
  .background-icon{
    background-size: 120%;
  }
}