@use "sass:color";
html {
  font-size: 16px; }

section {
  margin: 10vh 0; }
  section h2 {
    color: #3026b3; }
    section h2::after {
      position: absolute;
      content: '';
      left: 0;
      bottom: 0;
      width: 30%;
      height: .35rem;
      background-color: #e1dff8; }

.container {
  display: block;
  position: relative;
  margin: 0 auto;
  width: 66%;
  text-align: left; }

.btn, .btn-blue {
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  background-color: #636363;
  color: seashell; }

.btn-blue {
  background-color: #333333; }

.card {
  margin: 3.25rem 0;
  overflow: hidden;
  display: flex;
  flex-flow: column;
  width: 100%;
  border: .125rem solid #fff;
  -webkit-border-radius: 2.25rem;
  -moz-border-radius: 2.25rem;
  -ms-border-radius: 2.25rem;
  border-radius: 2.25rem;
  background: rgba(255, 255, 255, 0.25); }
  .card .card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: royalblue;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 600;
    padding: 1rem 0; }
  .card .card-body {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center; }
    .card .card-body .card-body-item {
      flex: 1 1 300px; }
    .card .card-body .card-img {
      margin: .5rem;
      height: 20vh;
      background-color: salmon; }
      .card .card-body .card-img img {
        min-width: 100%;
        max-height: 100%;
        object-fit: cover;
        vertical-align: baseline;
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        /* For Webkit browsers */
        filter: gray;
        /* For IE 6 - 9 */
        -webkit-transition: all 0.6s ease;
        /* Transition for Webkit browsers */ }
        .card .card-body .card-img img:hover {
          filter: grayscale(0%);
          -webkit-filter: grayscale(0%);
          /* For Webkit browsers */
          filter: none;
          /* For IE 6 - 9 */
          -webkit-transition: all 0.6s ease;
          /* Transition for Webkit browsers */ }
    .card .card-body .card-info {
      display: flex;
      flex-flow: column;
      margin: .5rem;
      width: 50%; }
      .card .card-body .card-info .name {
        flex-grow: 2;
        margin: .5rem 0;
        font-weight: 600;
        font-size: 1.75rem; }
      .card .card-body .card-info .email,
      .card .card-body .card-info .phone {
        flex-grow: 2;
        margin: .25rem 0;
        font-weight: 400;
        font-size: 1.25rem; }
  .card .card-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f8f8;
    border-top: .125rem solid #d9d9d9;
    padding: 1rem 0; }

body {
  background: rgba(204, 177, 61, 0.25);
  font-family: 'Times New Roman', Times, serif;
  margin: 0;
  padding: 0;
  text-align: center;
  color: #636363; }
  body ul, body ol {
    list-style: none;
    margin: 0;
    padding: 0; }
  body a {
    text-decoration: none; }
  body h1 {
    color: #313131;
    font-size: 3.2rem;
    margin-bottom: 2.25rem;
    font-family: 'Noto Sans JP', sans-serif; }
  body h2 {
    position: relative;
    font-size: 2.25rem;
    line-height: 4.5rem;
    margin-bottom: 1.5rem;
    font-family: 'Lato', sans-serif;
    letter-spacing: .0625rem;
    word-spacing: .75rem;
    text-transform: uppercase; }
  body h3 {
    font-size: 1.7rem;
    margin-bottom: 1rem;
    font-family: 'Roboto', sans-serif; }
  body h4 {
    font-size: 1.025rem; }
  body p {
    font-size: 1.25rem;
    line-height: 1.4;
    margin: 0;
    padding-bottom: 1rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif; }

header {
  margin: 3.25rem 0 4.25rem;
  display: grid;
  grid-template: 30vh auto / 100%; }
  header #logo {
    flex: 1 1 100%;
    overflow: hidden; }
    header #logo img {
      max-height: 100%;
      min-width: 100%;
      object-fit: cover;
      vertical-align: bottom; }
  header #top-nav-menu ul {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap; }
    header #top-nav-menu ul li {
      flex: 1;
      margin-left: .125rem; }
      header #top-nav-menu ul li a {
        display: block;
        font-size: 1.25rem;
        font-weight: 600;
        padding: 1rem;
        padding-right: 1.5rem;
        color: #fff;
        background: rgba(204, 177, 61, 0.5);
        transition: all .5s ease; }
        header #top-nav-menu ul li a:hover, header #top-nav-menu ul li a:focus, header #top-nav-menu ul li a:active {
          color: #333333;
          background: #ccb13d; }

@media screen and (max-width: 768px) {
  #top-nav-menu ul {
    flex-flow: column; } }

#us-flag-2-flexboxes .us-flag-strips {
  display: flex;
  flex-flow: column;
  border: 0.0625rem solid #ffffff;
  width: 80%;
  height: 26rem;
  z-index: 1;
  position: relative; }
  #us-flag-2-flexboxes .us-flag-strips .strip {
    height: 2rem; }
    #us-flag-2-flexboxes .us-flag-strips .strip:nth-of-type(odd) {
      background-color: white; }
    #us-flag-2-flexboxes .us-flag-strips .strip:nth-of-type(even) {
      background-color: red; }
  #us-flag-2-flexboxes .us-flag-strips .us-flag-stars {
    position: absolute;
    z-index: 2;
    padding: .75rem;
    width: 16.5rem;
    height: 12.5rem;
    background-color: darkblue;
    left: 0;
    top: 0;
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    align-items: flex-start; }
    #us-flag-2-flexboxes .us-flag-strips .us-flag-stars .star {
      flex: 1 1 1.5rem;
      height: 1.25rem; }
      #us-flag-2-flexboxes .us-flag-strips .us-flag-stars .star:nth-of-type(even) {
        background: no-repeat center center url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='%23fff'%3e%3cpath d='M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z'/%3e%3c/svg%3e"); }

#us-flag-grids .us-flag-grids {
  border: 0.0625rem solid #ffffff;
  width: 80%;
  height: 26rem;
  z-index: 1;
  position: relative; }
  #us-flag-grids .us-flag-grids .upper {
    display: grid;
    grid-template: repeat(7, 2rem)/4.5fr 5.5fr;
    grid-template-areas: "starsArea ." "starsArea ." "starsArea ." "starsArea ." "starsArea ." "starsArea ." "starsArea ."; }
    #us-flag-grids .us-flag-grids .upper .us-flag-stars {
      grid-area: starsArea;
      background-color: darkblue;
      padding: .75rem;
      display: grid;
      grid-template: repeat(9, 1fr)/repeat(11, 1fr); }
      #us-flag-grids .us-flag-grids .upper .us-flag-stars .star:nth-of-type(even) {
        background: no-repeat center center url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='%23fff'%3e%3cpath d='M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z'/%3e%3c/svg%3e"); }
  #us-flag-grids .us-flag-grids .bottom {
    display: grid;
    grid-template: repeat(7, 2rem)/1fr; }
  #us-flag-grids .us-flag-grids .strip {
    height: 2rem; }
    #us-flag-grids .us-flag-grids .strip:nth-of-type(even) {
      background-color: red; }
    #us-flag-grids .us-flag-grids .strip:nth-of-type(odd) {
      background-color: white; }

/*
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
*/
section {
  margin: 15vh 0 20vh; }
  section h2 {
    position: relative;
    font-size: 2.25rem;
    padding-bottom: .75rem;
    color: rgba(190, 163, 50, 0.5); }
    section h2::after {
      position: absolute;
      content: '';
      left: 0;
      bottom: 0;
      width: 30%;
      height: .35rem;
      background-color: rgba(225, 209, 142, 0.5); }

.old-school-layout {
  -webkit-border-radius: 0.75rem;
  -moz-border-radius: 0.75rem;
  -ms-border-radius: 0.75rem;
  border-radius: 0.75rem;
  background-color: #313131;
  margin: 3.5rem 0;
  padding: 2.5%; }
  .old-school-layout .clearfix {
    clear: both;
    height: 0; }
  .old-school-layout .item {
    display: block;
    float: left;
    padding: 3.5% 2.5%;
    width: 28.33%;
    background-color: #d8d8d8; }
    .old-school-layout .item .header {
      display: block;
      position: relative;
      font-size: 2.25rem;
      line-height: 1.75;
      font-weight: 600;
      color: #404040; }
      .old-school-layout .item .header::after {
        display: block;
        position: absolute;
        content: '';
        left: 0;
        bottom: 0;
        width: 6.25rem;
        height: .325rem;
        background-color: #ffb3b3; }
    .old-school-layout .item .text {
      display: block;
      font-size: .9rem;
      margin: 10% 0; }
      .old-school-layout .item .text::selection {
        background-color: #999999;
        color: red; }
    .old-school-layout .item:nth-child(odd) {
      background-color: #ffffff; }
    .old-school-layout .item:nth-last-child(1) {
      clear: right; }

.flexbox-layout {
  display: flex;
  flex-flow: row wrap;
  margin: 3.5rem 0;
  padding: 2.5%;
  background-color: #565656;
  -webkit-border-radius: 0.75rem;
  -moz-border-radius: 0.75rem;
  -ms-border-radius: 0.75rem;
  border-radius: 0.75rem; }
  .flexbox-layout .item {
    flex: 1 1 28%;
    height: 15rem;
    overflow: hidden;
    padding: 3.5% 2.5%;
    overflow: hidden;
    background-color: #d8d8d8; }
    .flexbox-layout .item .header {
      display: block;
      position: relative;
      font-size: 2.25rem;
      line-height: 1.75;
      font-weight: 600;
      color: #404040; }
      .flexbox-layout .item .header::after {
        display: block;
        position: absolute;
        content: '';
        left: 0;
        bottom: 0;
        width: 6.25rem;
        height: .325rem;
        background-color: #ffb3b3; }
    .flexbox-layout .item .text {
      display: block;
      margin: 10% 0;
      font-size: .9rem; }
      .flexbox-layout .item .text::selection {
        background-color: #999999;
        color: red; }
    .flexbox-layout .item:nth-child(odd) {
      background-color: #ebebeb; }