@charset "utf-8";
@import url("fontawesome-free/css/fontawesome-all.min.css");

/* Rows
--------------------------------------------------------------------------------------------------------------- */
.row0,
.row0 a {}

.row1,
.row1 a {}

.row2,
.row2 a {}

.row3,
.row3 a {}

.row4,
.row4 a {}

.row5,
.row5 a {}

.row6,
.row6 a {}

/* Padding
--------------------------------------------------------------------------------------------------------------- */
.padding-S {
    padding-top: 20px;
    padding-bottom: 20px;
}


/* Top Bar
--------------------------------------------------------------------------------------------------------------- */
#topbar {
    padding: 12px 0;
    text-transform: uppercase;
}

#topbar a {
    color: #FFFFFF;
}

#topbar a:hover {
    color: #F7A804;
}

#topbar ul li {
    font-size: 12px;
    font-size: 1.2rem;
    display: inline-block;
    /*  margin-right: 10px;*/
    padding: 0 15px;
    margin: 0;
    border-right: 1px solid;
}

#topbar ul li:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}

#topbar i {
    line-height: normal;
}

#topbar h2 {
    font-size: inherit;
    line-height: inherit;
    display: inline;
    font-weight: bold;
}

/* Header
--------------------------------------------------------------------------------------------------------------- */
#header {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#header #logo * {
    margin: 0;
    padding: 0;
    line-height: 1;
    width: 280px;
}

#header #logo h1 {
    font-size: 32px;
    font-size: 3.2rem;
    font-weight: 700;
}

#header #logo h1 span {
    font-size: 4rem;
    font-weight: 400;
}

#header ul {}

#header ul li {}

#header ul li div {
    position: relative;
}

#header ul li div .bs-widget-area-4,
#header ul li div .bs-widget-area-4 div,
#header ul li div .bs-widget-area-5,
#header ul li div .bs-widget-area-5 div {
    padding: 0;
}

#header ul li div i {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    line-height: 58px;
    font-size: 22px;
    text-align: center;
    border: 1px solid;
    border-radius: 50%;
}

#header ul li div span {
    display: block;
    line-height: 1.4;
}

#header div:last-child {
    margin-bottom: 0;
}

/* Used when elements stack in small viewports */


/* Page Intro
--------------------------------------------------------------------------------------------------------------- */
#pageintro {
    padding: 180px 0;
}

#pageintro article {
    display: block;
    max-width: 75%;
}

#pageintro .heading {
    margin-bottom: 20px;
    font-size: 4rem;
}

#pageintro p:first-of-type {
    margin: 0 0 20px 0;
    text-transform: uppercase;
    font-size: 1.6rem;
    letter-spacing: 5px;
}

#pageintro footer {
    margin-top: 50px;
}

/* Grid - RS-MQF 1140 V.2 - https://www.os-templates.com/free-basic-html5-templates/rs-mqf-1140
--------------------------------------------------------------------------------------------------------------- */
.bs-main-contents {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.one_half,.one_third,.two_third,.one_quarter,.two_quarter,.three_quarter {
    display: inline-block;
    /* float: left;
    margin: 0 0 0 4.21052%; */
    margin: 0;
    list-style: none;
  }
  
  .first {
    /* margin-left: 0;
    clear: left; */
  }
  
  .one_quarter {
    /* width: 21.8421%; */
    width: 22%;
  }
  
  .one_third {
    /* width: 30.52631%; */
    width: 30%;
  }
  
  .one_half,
  .two_quarter {
    /* width: 47.89473%; */
    width: 48%;
  }
  
  .two_third {
    /* width: 65.26315%; */
    width: 66%;
  }
  
  .three_quarter {
    /* width: 73.94736%; */
    width: 76%;
  }
  
  .one_column {
    width: 100%;
  }

/* Content Area
--------------------------------------------------------------------------------------------------------------- */
.container {
    padding: 40px 0;
}

/* Content */
.container .content {
    font-size: 16px;
    font-size: 1.6rem;
    position: relative;
    z-index: 0;
    background-color: #ffffff;
    padding: 40px;
}

.content p {
    margin: 0 0 30px;
    position: relative;
}

.content img {
    display: inline-block;
    padding: 5px;
    border: solid #ccc 1px;
    margin: 5px;
    background-color: #ffffff;
}

/* 画像の罫線 */
.content * .Frame {
    border: solid #ccc 1px;
    padding: 5px;
}

/* 画像の余白リセット */
.content * .nonFrame {
    border: none;
    padding: 0;
}

/* @end */
.content .caption p {
    text-align: center;
    font-size: 14px;
    font-size: 1.4rem;
}
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
    clear: both;
}
.content h1 {
    font-size: 34px;
    font-size: 3.4rem;
    text-align: center;
    line-height: 1.3;
    margin: 0 0 30px;
    padding: 1rem 2rem;
    position: relative;
    color: #fff;
    background: #969696;
    -webkit-box-shadow: 5px 5px 0 #757575;
    box-shadow: 5px 5px 0 #757575;
}
.content h1 {
    background: #49af5a;
    -webkit-box-shadow: 5px 5px 0 rgb(14 95 49 / 80%);
    box-shadow: 5px 5px 0 rgb(14 95 49 / 80%);
}
.content h2 {
    border-bottom: 1px solid #c6c6c6;
    padding-bottom: 10px;
}

.content h2:after {
    content: "";
    background: #b3c70f;
    width: 150px;
    height: 3px;
    display: block;
    position: absolute;
    left: 0;
    bottom: -1px;
}

.content h3 {
    margin: 0 0 25px;
    padding: 0 0 0 30px;
    border-bottom: 1px dotted #999;
}

.content h3:before {
    content: "";
    display: block;
    width: 15px;
    height: 4px;
    background-color: #f7a804;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5px;
    margin: auto;
}

.content h4 {
    margin: 0 0 10px;
    padding: .75em 1em .75em 1.5em;
}

.content h4:after {
    position: absolute;
    top: .7em;
    left: .5em;
    content: '';
    width: 6px;
    height: -webkit-calc(80% - 1em);
    height: calc(80% - 1em);
    background-color: #999;
    /*    border-radius: 4px;*/
}

.content h5 {
    /* 2017.10.20 透明レイヤー追加 yfujii@ailes*/
    margin: 0 0 25px;
    padding: .75em .5em .75em .5em;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 186, 0.6) 0%, rgba(255, 255, 186, 0.6) 100%);
    background-image: -moz-linear-gradient(top, rgba(255, 255, 186, 0.6) 0%, rgba(255, 255, 186, 0.6) 100%);
    background-image: -o-linear-gradient(top, rgba(255, 255, 186, 0.6) 0%, rgba(255, 255, 186, 0.6) 100%);
    background-image: linear-gradient(to bottom, rgba(255, 255, 186, 0.6) 0%, rgba(255, 255, 186, 0.6) 100%);
    background-color: #E1E1E1;
}
.content h6 {
    /* 2017.10.20 透明レイヤー追加 yfujii@ailes*/
    margin: 0 0 25px;
    padding: .75em .5em .75em .5em;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 186, 0.6) 0%, rgba(255, 255, 186, 0.6) 100%);
    background-image: -moz-linear-gradient(top, rgba(255, 255, 186, 0.6) 0%, rgba(255, 255, 186, 0.6) 100%);
    background-image: -o-linear-gradient(top, rgba(255, 255, 186, 0.6) 0%, rgba(255, 255, 186, 0.6) 100%);
    background-image: linear-gradient(to bottom, rgba(255, 255, 186, 0.6) 0%, rgba(255, 255, 186, 0.6) 100%);
    background-color: #E1E1E1;
}

/* リスト */
.content ul,
.content ol {
    margin: 0 0 30px;
}

.content li {
    /* ul ol*/
    margin: 5px 0px 10px 0px;
    padding: 0 0 0 20px;
    position: relative;
}

.content ul li {
    list-style-type: none;
    list-style-image: none;
}

.content ul li:before {
    content: "\f138";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    color: #aaa;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.content ol {
    counter-reset: item;
    list-style-type: none;
}

.content ol li {
    display: block;
    padding: 5px 0px 0px 35px;
    margin-left: 0px;
}

.content ol>li:before {
    counter-increment: item;
    content: counter(item) ".";
    position: absolute;
    display: block;
    text-align: center;
    font-style: italic;
    left: 0px;
    top: -5px;
    font-size: 24px;
    font-size: 2.4rem;
    color: #999;
    font-family: Futura, 'Century Gothic';
}

.content ol ol>li:before {
    top: -2px;
    font-size: 20px;
    font-size: 2.0rem;
}

.content dl {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #ccc;
    border-top: none;
    margin: 0 auto 30px;
}

.content dl p {
    margin: 0;
}

.content dt {
    background: #ddd;
    width: 30%;
    padding: 10px;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
}

.content dd {
    padding: 10px;
    margin: 0;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    width: 70%;
    background: #fff;
    box-sizing: border-box;
}

/* table tag */
.content table {
    width: 98%;
    border-collapse: collapse;
    border: 1px solid #ddd;
    margin: 0 auto 50px;
}

.content th,
.content td {
    border: 1px solid #ddd;
    padding: 10px;
}

.content th {
    color: #666;
    background: #ededed;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.content td {
    background: #fff;
    text-align: left;
}

.content tr:last-child th,
.content tr:last-child td {
    border-bottom: none;
}

.content table caption {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: bold;
}

.content table.reset {
    border: none;
}

.content .reset th,
.content .reset td {
    border: none;
}

.content table p {
    margin: 0;
}

.content .content-navi h2 {
    text-align: center;
    margin-bottom: 5px;
}

.content .content-navi h2:after {
    /*  content: none*/
    margin: auto;
    left: 0;
    right: 0;
}

.content .content-navi ul,
.content.content-navi ol {
    margin: 0 0 30px;
    padding-bottom: 5px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    border-bottom: solid 1px #ccc;
}

.content .content-navi li {
    margin: 0 10px;
}

.sectiontitle {
    display: block;
    max-width: 55%;
    margin: 0 auto 80px;
    text-align: center;
}

.sectiontitle * {
    margin: 0;
}

.ringcon {
    display: inline-block;
    border: 1px solid;
    border-radius: 50%;
}

.ringcon i {
    display: block;
    width: 160px;
    height: 160px;
    line-height: 160px;
    font-size: 56px;
}

.overview {}

.overview>li {
    margin-bottom: 30px;
}

.overview>li:nth-last-child(-n+3) {
    margin-bottom: 0;
}

/* Removes bottom margin from the last three items - margin is restored in the media queries when items stack */
.overview>li:nth-child(3n+1) {
    margin-left: 0;
    clear: left;
}

/* Removes the need to add class="first" */
.overview>li figure {
    position: relative;
    max-width: 348px;
}

/* Uses the one_third width in pixels */
.overview>li figure a::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
}

.overview>li figure figcaption {
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 15px;
}

.overview>li figure a::after,
.overview>li figure figcaption {}

.overview>li figure:hover a::after,
.overview>li figure:hover figcaption {
    opacity: 0;
    visibility: hidden;
}

.overview>li figure figcaption * {
    margin: 0;
}

.overview>li figure .heading {
    margin-bottom: 10px;
    font-size: 1.2rem;
}

/* Comments */
#comments ul {
    margin: 0 0 40px 0;
    padding: 0;
    list-style: none;
}

#comments li {
    margin: 0 0 10px 0;
    padding: 15px;
}

#comments .avatar {
    float: right;
    margin: 0 0 10px 10px;
    padding: 3px;
    border: 1px solid;
}

#comments address {
    font-weight: bold;
}

#comments time {
    font-size: smaller;
}

#comments .comcont {
    display: block;
    margin: 0;
    padding: 0;
}

#comments .comcont p {
    margin: 10px 5px 10px 0;
    padding: 0;
}

#comments form {
    display: block;
    width: 100%;
}

#comments input,
#comments textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid;
}

#comments textarea {
    overflow: auto;
}

#comments div {
    margin-bottom: 15px;
}

#comments input[type="submit"],
#comments input[type="reset"] {
    display: inline-block;
    width: auto;
    min-width: 150px;
    margin: 0;
    padding: 8px 5px;
    cursor: pointer;
}

/* Sidebar */
.container .sidebar {
    font-size: 16px;
    font-size: 1.6rem;
}
.bs-sub-contents {
    position: sticky;
    top: 0;
    transition: all 0.5s ease-in-out; 
}
.sidebar .sdb_holder {
    margin-bottom: 50px;
}

.sidebar .sdb_holder:last-child {
    margin-bottom: 0;
}

.sidebar h2 {
    font-size: 20px;
    font-size: 2rem;
    margin: 10px 0 0;
    padding: 0 0 30px;
    z-index: 0;
}

.sidebar h2:after {
    content: "";
    position: absolute;
    background-image: url(../img/side.png);
    background-position: bottom left;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 90px;
    left: 0;
    bottom: -12px;
    z-index: -1;
}

.sidebar ul {
    list-style: none;
    margin-bottom: 10px;
    padding: 0;
    box-shadow:
    0px 12px 21px -22px rgba(10,10,10,0.8), 0px 0px 18px -9px rgba(10,10,10,0.32);
}

.sidebar li {
    border-bottom: dashed 1px #ccc;
    margin: 0;
    padding: 0;
    position: relative;
}
.sidebar li:nth-child(even){
	background-color: #F6F0FF;
}
.sidebar li:nth-child(odd){
	background-color: #FFFFFF;
}
.sidebar li::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 15px;
    width: 5px;
    height: 5px;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    transform: rotate(-45deg);
}
.sidebar li a {
    display: block;
    padding: 15px 15px 15px 25px;
}

.sidebar li a:hover {
    background-color: rgb(255, 221, 177);
}

.sidebar .bca-hidden {
    float: left;
}

.sidebar input#SearchIndexQ {
    width: 95%;
}

/* Testimonials
--------------------------------------------------------------------------------------------------------------- */
#testimonials {}

#testimonials article {
    text-align: center;
}

#testimonials article * {
    margin: 0;
    padding: 0;
}

#testimonials article img {
    margin-bottom: 20px;
    border-radius: 50%;
}

#testimonials article blockquote {
    margin-bottom: 20px;
    padding: 20px;
}

#testimonials article blockquote::before {
    top: 5px;
    left: 5px;
    font-size: 30px;
    line-height: 30px;
}

#testimonials article .heading {
    font-size: 1.4rem;
}

#testimonials article em {
    display: block;
    margin-top: -5px;
    font-size: .8rem;
    font-style: normal;
}


/* Latest
--------------------------------------------------------------------------------------------------------------- */
#latest {}

#latest article {}

#latest article figure {
    display: block;
    position: relative;
}

#latest article figure img {}

#latest article figure figcaption {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 50px;
}

#latest article figure figcaption * {
    display: block;
    margin: 0;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
    font-style: normal;
    line-height: 1;
}

#latest article figure figcaption time {
    width: 100%;
}

#latest article figure figcaption time strong {
    padding: 12px 0;
    font-size: 18px;
}

#latest article figure figcaption time em {
    padding: 8px 0;
}

#latest article .excerpt {
    padding: 25px 20px;
}

#latest article .excerpt .heading {
    margin: 0 0 10px 0;
    font-size: 1.4rem;
}

#latest article .excerpt .meta {}

#latest article .excerpt .meta li {
    display: inline-block;
    font-size: .8rem;
}

#latest article .excerpt .meta li::after {
    margin-left: 5px;
    content: "|";
}

#latest article .excerpt .meta li:last-child::after {
    margin: 0;
    content: "";
}

#latest article .excerpt p {}

#latest article .excerpt footer {
    margin-top: 30px;
}

/* Blog
--------------------------------------------------------------------------------------------------------------- */

/* カードレイアウト部分をラッピングし、
Flexboxを指定"space-between"で各アイテムを均等に配置し、
最初と最後のアイテムを端に寄せます。*/
#cardlayout-wrap {
    position: relative;
    display: flex;
    margin: 2em auto;
    max-width: 960px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* リンクテキストの下線を非表示 */
a.card-link {
    text-decoration: none;
}

/* カードレイアウト内の画像を幅いっぱいに表示 */
#cardlayout-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
    padding: 0;
    border: none;
    margin: 0 auto;
    background-color: #ffffff;
}

.card-figure {
    margin: 0;
    padding: 0;
    height: 180px;
    overflow: hidden;
    background-color: #fff;
}

/* カードレイアウトのタイトル部分 */
h2.card-title {
    margin: 0.6em 0 0;
    color: #333;
    text-align: center;
    font-size: 1.4em;
    border-bottom: none;
}

h2.card-title:after {
    content: none;
}

/* カードレイアウトの説明文部分 */
.card-text-tax {
    margin: 0;
    padding: 1em;
    color: #818181;
}

/* カードレイアウトを1カラムで配置 */
.card-list {
    margin: 0.5em auto;
    padding: 0;
    width: 96%;
    background: #e5e8ea;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    position: relative;
}

/* 画面幅768px以上の場合カードレイアウトを2カラムで配置 */
@media all and (min-width: 768px) {
    .card-list {
        margin: 0.5em 0;
        width: calc(96% / 2);
        /* 96%幅を2で割るという指定 */
    }
}

/* 画面幅992px以上の場合カードレイアウトを3カラムで配置 */
@media all and (min-width: 992px) {
    .card-list {
        width: calc(96% / 3);
        /* 96%幅を3で割るという指定 */
    }

    /* 最後の行が3列より少ない場合左寄せにレイアウトさせる */
    #cardlayout-wrap::after {
        content: "";
        display: block;
        width: calc(96% / 3);
    }
}


/* Click to Action
--------------------------------------------------------------------------------------------------------------- */
#cta {}

#cta .sectiontitle {
    margin-bottom: 50px;
}

#cta ul {}

#cta ul li {
    padding: 0;
    margin: 10px 0;
}

#cta ul li:last-child {
    /*  margin-bottom: 0;*/
}

/* Used when elements stack in small viewports */
#cta ul li div {
    position: relative;
    min-height: 60px;
    padding: 20px;
    padding-left: 100px;
}

#cta ul li div i {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    line-height: 58px;
    font-size: 22px;
    text-align: center;
    border: 1px solid;
    border-radius: 50%;
}

#cta ul li div span {
    display: block;
    padding: 8px 0 0 0;
}

#cta ul li div span strong {
    display: block;
    text-transform: capitalize;
}

/* Footer
--------------------------------------------------------------------------------------------------------------- */
#footer {
    padding-top: 20px;
    height: 200px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

#footer .heading {
    margin: 0;
    font-size: 16px;
    font-size: 1.6rem;
    display: flex;
    flex-flow: column;
}

#footer h1 {
    margin-bottom: 10px;
    font-size: 32px;
    font-size: 3.2rem;
    font-weight: 700;
}

#footer h1 span {
    font-size: 4rem;
    font-weight: 400;
}

#footer h1 img {
    width: 200px;
}

#footer .add,
#footer .tel,
#footer .fax {
    font-size: 14px;
    font-size: 1.4rem;
    margin: 0;
}

#footer .linklist ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
}

#footer .linklist li {
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;
    display: block;
    margin-bottom: 15px;
    padding: 3px 15px 1px;
    border-right: 1px solid;
}

#footer .linklist li:last-child {
    /*
  margin: 0;
  padding: 0;
*/
    border: none;
}

#footer .linklist li::before,
#footer .linklist li::after {
    display: table;
    content: "";
}

#footer .linklist li,
#footer .linklist li::after {
    clear: both;
}

#footer input,
#footer button {
    border: 1px solid;
}

#footer input {
    display: block;
    width: 100%;
    padding: 8px;
}

#footer button {
    padding: 8px 18px 10px;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
}


/* Copyright
--------------------------------------------------------------------------------------------------------------- */
#copyright {
    padding: 20px 0;
    color: #ffffff;
}

#copyright * {
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-size: 1.2rem;
}


/* Transition Fade
This gives a smooth transition to "ALL" elements used in the layout - other than the navigation form used in mobile devices
If you don't want it to fade all elements, you have to list the ones you want to be faded individually
Delete it completely to stop fading
--------------------------------------------------------------------------------------------------------------- */
*,
*::before,
*::after {
    /*  transition: all .3s ease-in-out;*/
}

#mainav form * {
    transition: none !important;
}


/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */


/* Navigation
--------------------------------------------------------------------------------------------------------------- */
nav ul,
nav ol {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 16px;
    font-size: 1.6rem;
}

#mainav,
#breadcrumb,
.sidebar nav {
    line-height: normal;
}

#mainav .drop::after,
#mainav li li .drop::after,
#breadcrumb li a::after,
#breadcrumb li a::before,
.sidebar nav a::after {
    position: absolute;
    font-family: "Font Awesome\ 5 Free";
    font-weight: 900;
    font-size: 10px;
    line-height: 10px;
}

/* Top Navigation */
#mainav {
    position: relative;
    /* margin-bottom: -30px; */
    padding: 0;
    z-index: 999;
}

#mainav ul {
    text-transform: uppercase;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

#mainav ul ul {
    z-index: 9999;
    position: absolute;
    width: 180px;
    text-transform: none;
    text-align: left;
}

#mainav ul ul ul {
    left: 180px;
    top: 0;
}

#mainav li {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
}

#mainav li:last-child {
    margin-right: 0;
}

#mainav li li {
    width: 100%;
    margin: 0;
}

#mainav li a {
    display: block;
    padding: 20px;
}

#mainav li li a {
    border: solid;
    border-width: 0 0 1px 0;
}

#mainav .drop {
    padding-left: 15px;
}

#mainav li li a,
#mainav li li .drop {
    display: block;
    margin: 0;
    padding: 10px 15px;
}

#mainav .drop::after,
#mainav li li .drop::after {
    content: "\f0d7";
}

#mainav .drop::after {
    top: 25px;
    left: 5px;
}

#mainav li li .drop::after {
    top: 15px;
    left: 5px;
}

#mainav ul ul {
    visibility: hidden;
    opacity: 0;
    flex-wrap: wrap;
    /*2020.01.12 yfujii@ailes*/
}

/*2020.01.12 yfujii@ailes*/
/*
#mainav ul li:hover > .sub-nav {
    display: block;
}
*/
/*2020.01.12 yfujii@ailes*/
/*#mainav ul li:hover > .sub-nav ul {*/
#mainav ul li:hover>.sub-nav ul {
    visibility: visible;
    opacity: 1;
}

#mainav form {
    display: none;
    margin: 0;
    padding: 0;
}

#mainav form select,
#mainav form select option {
    display: block;
    cursor: pointer;
    outline: none;
}

#mainav form select {
    width: 100%;
    padding: 5px;
    border: none;
}

#mainav form select option {
    margin: 5px;
    padding: 0;
    border: none;
}

/* Breadcrumb */
#breadcrumb {
    padding: 250px 0 30px;
}

.bs-crumbs {
    font-size: 14px;
    font-size: 1.4rem;
}

#breadcrumb ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-transform: uppercase;
}

#breadcrumb li {
    display: inline-block;
    margin: 0 6px 0 0;
    padding: 0;
}

#breadcrumb li a {
    display: block;
    position: relative;
    margin: 0;
    padding: 0 12px 0 0;
    font-size: 14px;
    font-size: 1.4rem;
}

#breadcrumb li:first-child a {
    padding: 0 12px 0 18px;
}

#breadcrumb li a::after {
    top: 5px;
    right: 0;
    content: "\f0da";
}

#breadcrumb li:first-child a::before {
    top: 5px;
    left: 0;
    content: "\f015";
}

#breadcrumb li:last-child a {
    margin: 0;
    padding: 0;
}

#breadcrumb li:last-child a::after {
    display: none;
}

#breadcrumb .heading {
    margin: 0;
    font-size: 36px;
    font-size: 3.6rem;
}

/* Sidebar Navigation */
.sidebar nav {
    display: block;
    width: 100%;
}

.sidebar nav li {
    margin: 0 0 3px 0;
    padding: 0;
}

.sidebar nav a {
    display: block;
    position: relative;
    margin: 0;
    padding: 5px 10px 5px 15px;
    text-decoration: none;
    border: solid;
    border-width: 0 0 1px 0;
}

.sidebar nav a::after {
    top: 10px;
    left: 5px;
    content: "\f0da";
}

.sidebar nav ul ul a {
    padding-left: 35px;
}

.sidebar nav ul ul a::after {
    left: 25px;
}

.sidebar nav ul ul ul a {
    padding-left: 55px;
}

.sidebar nav ul ul ul a::after {
    left: 45px;
}

/* Pagination */
.pagination {
    /* display: block;
    width: 100%;
    text-align: center;
    clear: both; */
    padding-bottom: 45px;
    border-bottom: 2px solid #e9e9e9;
    overflow: hidden;
    width: 100%;
    margin: 100px auto 45px;
    text-align: center;
}

.pagination .prev {
    float: left;
}

.pagination .prev:before {
    /* content: "\f053"; */
}

.pagination .next {
    float: right;
}

.pagination .next:before {
    /* content: "\f054"; */
}

.pagination .page-numbers {
    background-color: #ffc141;
    border-bottom: 2px solid #d09d35;;
    border-radius: 3px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    transition: opacity .2s;
    padding: 7px 15px;
    display: inline-block;
    margin: 0 10px 0 0;
    font-size: 1em;
}

.pagination .page-numbers a {
    color: #fff
}

.pagination .page-numbers:hover {
    opacity: .8;
}

.content .pagination ul li:before {
    /* content:none; */
}

.pagination li:last-child {
    margin-right: 0;
}


.pagination .active.page-numbers {
    background-color: #dadada;
    border-color: #c1c0c0;
}

.pagination .next:before,
.pagination .prev:before {
    font-weight: bold;
    color: #fff;
}
.pagination .page-numbers:before {
    content: none;
}




/* Back to Top */
#backtotop {
    z-index: 999;
    display: inline-block;
    position: fixed;
    visibility: hidden;
    bottom: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    text-align: center;
    opacity: .2;
}

#backtotop i {
    display: block;
    width: 100%;
    height: 100%;
    line-height: inherit;
}

#backtotop.visible {
    visibility: visible;
    opacity: .5;
}

#backtotop:hover {
    opacity: 1;
}

/* indexページ */
.index-layout {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding: 0;
}

ul.index-layout li {
    flex-basis: calc(100% / 3 - 6%);
    flex-grow: 1;
    list-style-type: none;
    position: relative;
    font-size: 18px;
    font-size: 1.8rem;
    text-align: center;
    padding: 0;
    margin: 1%;
    border-style:solid;
	border-width:35px;
	border-image-source:url("../img/index-bg.png");
	border-image-slice:35;
	border-image-width:1;
	border-image-outset:0;
	border-image-repeat:repeat;
}

ul.index-layout li:before,
ul.index-layout li a:before {
    content: none;
}

ul.index-layout li:first-child:before {
    content: "";
    position: absolute;
    background-image: url(../img/index-bg-first.png);
    width: 95px;
    height: 65px;
    background-repeat: no-repeat;
    top: auto;
    left: -45px;
    bottom: -45px;
}

ul.index-layout:after {
    content: "";
    display: block;
    width: calc(100% * 2/3);
    height: 0;
}

ul.index-layout li a {
    text-decoration: none;
    color: #8e7c6a;
    display: block;
    padding: 40px 0;
    font-weight: bold;
    width: 100%;
    height: 100%;
    transition: .3s;
}

.subtext {/* ページ説明文が入っている場合表示 */
    display: block;
    font-size: 14px;
    font-size: 1.4rem;
}

ul.index-layout li a:hover {
    /*  color: #8e7c6a;*/
    background-color: #ffde98;
}

/* indexページここまで */

/* もくじ */
#toc {
    position: relative;
    margin: 0 auto 40px auto;
    padding: 1em 2em 1em;
    min-width: 90%;
    border: 1px solid #eee;
}

#toc:before {
    content: "もくじ";
    margin: 20px;
    font-size: 20px;
    font-size: 2.0rem;
    font-weight: 700;
}

/*チェック非表示*/
#toc label {
    cursor: pointer;
}

#toc label:after {
    display: inline-block;
    content: '[表示]';
}

#toc input:checked~label:after {
    display: inline-block;
    content: '[非表示]';
}

#toc input {
    display: none;
}

/*中身を非表示*/
#toc .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
#toc input:checked~.hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

#toc li {
    display: block;
    border-bottom: 1px dotted #ddd;
}

#toc li a {
    display: block
}

/* Tables
--------------------------------------------------------------------------------------------------------------- */
table,
th,
td {
    border: 1px solid;
    border-collapse: collapse;
    vertical-align: top;
}

table,
th {
    table-layout: auto;
}

table {
    width: 100%;
    margin-bottom: 15px;
}

th,
td {
    padding: 5px 8px;
}

td {
    border-width: 0 1px;
}

.table-wrap{
    overflow: auto;
    white-space: nowrap;
    clear: both;
}
.table-wrap::-webkit-scrollbar {
    height: 5px;
}
.table-wrap::-webkit-scrollbar-track {
    background: #F1F1F1;
}
.table-wrap::-webkit-scrollbar-thumb {
    background: #BCBCBC;
}

/* Gallery
--------------------------------------------------------------------------------------------------------------- */
#gallery {
    display: block;
    width: 100%;
    margin-bottom: 50px;
}

#gallery figure figcaption {
    display: block;
    width: 100%;
    clear: both;
}

#gallery li {
    margin-bottom: 30px;
}


/* Font Awesome Social Icons
--------------------------------------------------------------------------------------------------------------- */
.faico {
    margin: 0;
    padding: 0;
    list-style: none;
}

.faico li {
    display: inline-block;
    margin: 8px 5px 0 0;
    padding: 0;
    line-height: normal;
}

.faico li:last-child {
    margin-right: 0;
}

.faico a {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 18px;
    text-align: center;
}

.faico a {
    color: #FFFFFF;
    background-color: #0E74A5;
}

.faico a:hover {}

.faicon-dribble:hover {
    background-color: #EA4C89;
}

.faicon-facebook:hover {
    background-color: #3B5998;
}

.faicon-google-plus:hover {
    background-color: #DB4A39;
}

.faicon-linkedin:hover {
    background-color: #0E76A8;
}

.faicon-twitter:hover {
    background-color: #00ACEE;
}

.faicon-vk:hover {
    background-color: #4E658E;
}


/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */


/* Colours
--------------------------------------------------------------------------------------------------------------- */
body {
    color: #474747;
    background-color: #FFFFFF;
}

a {
    color: #F7A804;
}

a:active,
a:focus {
    background: transparent;
}

/* IE10 + 11 Bugfix - prevents grey background */
hr,
.borderedbox {
    border-color: #D7D7D7;
}

label span {
    color: #FF0000;
    background-color: inherit;
}

input:focus,
textarea:focus,
*:required:focus {
    border-color: #56AED4;
}

.overlay {
    color: #FFFFFF;
    background-color: inherit;
}

.overlay::after {
    color: inherit;
    /*  background-color: rgba(0, 0, 0, .15);*/
}

.overlay.light {
    color: #474747;
}

.overlay.light::after {
    background-color: rgba(255, 255, 255, .7);
}

.btn,
.btn.inverse:hover {
    color: #FFFFFF;
    background-color: #F7A804;
    border-color: #F7A804;
}

.btn:hover,
.btn.inverse {
    color: inherit;
    background-color: transparent;
    border-color: inherit;
}

.logoname {
    color: #F7A804;
}

.logoname span {
    color: #0E74A5;
}


/* Rows */
.row0,
.row0 a {
    color: #FFFFFF;
    background-color: #1383b9;
}

.row-bannerArea {

}

.row1 {
    color: #474747;
    background-color: #FFFFFF;
    background-image: url(../img/body.jpg);
    background-repeat: repeat;
}

.row2 {
    color: #474747;
    background-color: #fff6e0;
}

.row3 {
    color: #474747;
    background-color: #FFFFFF;
    background-image: url(../img/body.jpg);
    background-repeat: repeat;
}

.row4 {
    color: #ffffff;
    background-image: url(../img/dot.png), url(../../../images/top_about_background.jpg);
    background-color: rgba(0, 0, 0, 0.2);
    background-attachment: fixed;
    background-position: center top, center bottom;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
}

.row4:before{
    content: '';
    position: absolute;
    /* width: 100%;
    height: 100%; */
    top:0;
    left: 0;
    /* background: inherit; */
    filter: brightness(60%);
}

.row5,
.row5 a {
    color: #bcc8ce;
    background-color: #262c33;
}

.row5 {
    border-top: 1px solid #0F1620;
}

.row-end {
    background-color: #423831;
    background-image: url(../img/headerArea.png)/*, url(../img/copyright.svg)*/;
    background-position: center top/*, center bottom*/;
    background-repeat: repeat-x/*, repeat*/;
}

.gradient {
    color: #FFFFFF;
    background: linear-gradient(to bottom, #e7edf5, #f0f5fb);
}


/* Top Bar */
#topbar ul li {
    border-color: rgba(255, 255, 255, .4);
}

/*
#topbar div:first-of-type li:first-child a {
  color: #F7A804;
}
*/

/* position: fixed */
.fix {
    position: fixed;
    z-index: 2;
}

/* Header */

#HeaderWrap {
    box-shadow: 0px 0px 18px 0px rgb(66, 53, 92, 0.16);
    transition: .5s;
}

#header a {
    color: inherit;
}

#header ul li div i {
    border-color: rgba(0, 0, 0, .1);
}


/* Page Intro */
#pageintro {
    color: #FFFFFF;
}


/* Content Area */
.ringcon {
    background-color: #FFFFFF;
    border-color: rgba(0, 0, 0, .2);
}

.ringcon:hover {
    color: #FFFFFF;
    background-color: #F7A804;
}

.overview>li figure a::after {
    background-color: rgba(0, 0, 0, .5);
}

.overview>li figure figcaption {
    color: #FFFFFF;
}


/* Testimonials */
#testimonials article blockquote {
    color: #474747;
    background-color: #FFFFFF;
}

#testimonials article blockquote::before {
    color: rgba(0, 0, 0, .1);
}


/* Latest */
#latest article figure figcaption {
    color: #FFFFFF;
}

#latest article figure figcaption time strong {
    background-color: #1B2026;
}

#latest article figure figcaption time em {
    background-color: #0F1620;
}

#latest article .excerpt {
    color: inherit;
    background-color: #FFFFFF;
}


/* Click to Action */
#cta ul li {
    color: #474747;
    background-color: #FFFFFF;
}

#cta ul li div i {
    color: #4FB5F5;
    border-color: rgba(0, 0, 0, .1);
}


/* Footer */
#footer .heading {
    color: #000000;
}

#footer hr,
#footer .borderedbox,
#footer .linklist li {
    border-color: rgba(0, 0, 0, .1);
}

#footer input,
#footer button {
    border-color: transparent;
}

#footer input {
    color: #FFFFFF;
    background-color: #0E74A5;
}

#footer input:focus {
    border-color: #F7A804;
}

#footer button {
    color: #FFFFFF;
    background-color: #F7A804;
}


/* Navigation */
#mainav {
    /* color: #FFFFFF; */
    /* background-color: #F7A804; */
}

#mainav li a {
    color: inherit;
}

#mainav .active a,
#mainav a:hover,
#mainav li:hover>a {
    color: #0E74A5;
    background-color: inherit;
}

#mainav li li a,
#mainav .active li a {
    color: #FFFFFF;
    background-color: rgba(155, 149, 204, .5);
    border-color: rgba(255, 255, 255, .5);
}

#mainav li li:hover>a,
#mainav .active .active>a {
    color: #0E74A5;
    background-color: #F7A804;
}

#mainav form select {
    color: #474747;
    background-color: #FFFFFF;
}

#breadcrumb a {
    color: inherit;
    background-color: inherit;
}

#breadcrumb li:last-child a {
    color: #F7A804;
}

.container .sidebar nav a {
    color: inherit;
    border-color: #D7D7D7;
}

.container .sidebar nav a:hover {
    color: #F7A804;
}

.pagination a,
.pagination strong {
    border-color: #D7D7D7;
}

.pagination .current * {
    color: #FFFFFF;
    background-color: #F7A804;
}

#backtotop {
    color: #FFFFFF;
    background-color: #F7A804;
}


/* Tables + Comments */
table,
th,
td,
#comments .avatar,
#comments input,
#comments textarea {
    border-color: #D7D7D7;
}

#comments input:focus,
#comments textarea:focus,
#comments *:required:focus {
    border-color: #F7A804;
}

th {
    color: #FFFFFF;
    background-color: #888;
}

tr,
#comments li,
#comments input[type="submit"],
#comments input[type="reset"] {
    color: inherit;
    background-color: #FBFBFB;
}

tr:nth-child(even),
#comments li:nth-child(even) {
    color: inherit;
    background-color: #F7F7F7;
}

table a,
#comments a {
    background-color: inherit;
}

.content hr {
    margin: 0 0 30px;
    border-color: #c6c6c6;
}

/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */

/* 個別
--------------------------------------------------------------------------------------------------------------- */
/* Sports-history */
/* table 1列目のスタイル */
#Sports-history .bs-main-contents .content table tr td:nth-of-type(1),
#Sports-history .bs-main-contents .content table tr td:nth-of-type(2),
#Sports-history .bs-main-contents .content table tr td:nth-of-type(3) {
    white-space: nowrap;
}

/* @end */

/* Blog */

/* Blog説明 */
.content .bs-blog-description p {
    margin: 0;
}

/* Blog eyecatch */
.bs-single-post__eye-catch {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin-bottom: 15px;
}

/* Blogタグ */
.content .tag {
    font-size: 12px;
    font-size: 1.2rem;
    vertical-align: middle;
    text-shadow: none;
}

.content .tag a {
    color: #fff;
    /*  border: 1px solid #f7a804;*/
    background-color: #d25959;
    padding: 5px 10px;
    margin: 0 10px;
    border-radius: 15px;
    ;
}

/* @end */

/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport {
    width: device-width;
}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and  (min-width: 1240px) {
    .hocL {
        width: 100%;
        padding: 0px 50px;
        padding: 0rem 5rem;
    }
}
@media screen and  (min-width:1240px) {
    .hocL {
        width: 100%;
    }
    .hoc {
        max-width: 1240px;
    }
}

@media screen and (max-width:1139px) {
    .hocL {
        width: 100%;
        padding: 0px 5px;
        padding: 0rem 0.5rem;
    }
    .hoc {
        max-width: 90%;
    }
    #header {
        flex-flow: column wrap;
    }
    .container .sidebar .bs-widget-blog-calendar {
        font-size: 12px;
        font-size: 1.2rem;
    }
    #footer .linklist ul {
        justify-content: flex-start;
    }
}

/* Mobile Devices
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:978px) {
    .hocL {
        width: 100%;
    }
    .hoc {
        max-width: 90%;
    }

    .one_half,
    .two_quarter {
        width: 90%;
    }

    .one_half,
    .one_third,
    .two_third,
    .one_quarter,
    .two_quarter,
    .three_quarter {
        display: block;
        width: 100%;
        margin: 0 0 30px 0;
        padding: 0;
    }

    #topbar {}

    #header {
        flex-flow: column wrap;
    }

    #header ul {
        width: auto;
    }

    #header ul li {
        display: block;
        width: auto;
        margin: 0 0 30px 0;
    }

    #mainav {
        padding: 15px;
    }

    #mainav ul {
        display: none;
    }

    #mainav form {
        display: block;
    }

    #breadcrumb {}

    .container {}

    #comments input[type="reset"] {
        margin-top: 10px;
    }

    .pagination li {
        display: inline-block;
        margin: 0 5px 5px 0;
    }

    #footer {
        flex-flow: column-reverse;
        justify-content: start;
    }
    #footer .one_third, #footer .two_third {
        margin: 0;
    }
    #footer .heading {
        flex-flow: row;
        justify-content: center;
    }
    #footer .add, #footer .tel, #footer .fax {
        margin: 0 0 0 30px;
    }
    #footer .linklist ul {
        justify-content: center;
    }
    #copyright {}

    #copyright p:first-of-type {
        margin-bottom: 10px;
    }
    #Sports-history .content .bc-blog-category-list li a {
        font-size: 30px;
        font-size: 3rem;
    }
}

@media screen and (max-width:750px) {

    .imgl,
    .imgr {
        display: inline-block;
        float: none;
        margin: 0 0 10px 0;
    }

    .fl_left,
    .fl_right {
        display: block;
        float: none;
    }

    .group .group>*:last-child,
    .clear .clear>*:last-child,
    .clear .group>*:last-child,
    .group .clear>*:last-child {
        margin-bottom: 0;
    }

    /* Experimental - Needs more testing in different situations, stops double margin when stacking */
    .one_half,
    .one_third,
    .two_third,
    .one_quarter,
    .two_quarter,
    .three_quarter {
        display: block;
        width: auto;
        margin: 0 0 30px 0;
        padding: 0;
    }

    #topbar {
        padding-top: 15px;
        text-align: center;
    }

    #topbar ul {
        margin: 0 0 15px 0;
        line-height: normal;
    }

    #header {}

    #pageintro article {
        max-width: none;
        text-align: left;
    }

    #pageintro .heading {
        font-size: 2rem;
    }

    #pageintro p:first-of-type {
        font-size: 1rem;
    }

    .sectiontitle {
        max-width: none;
    }

    .overview>li:nth-last-child(-n+3) {
        margin-bottom: 30px;
    }

    #latest article {
        max-width: 348px;
    }


    #footer {
        padding-bottom: 50px;
    }

    #footer .heading {
        display: none;
    }

    .bs-main-contents ul.index-layout li {
        flex-basis: calc(100% / 2 - 6%);
    }

    .bs-main-contents ul.index-layout:after {
        width: calc(100% * 1/2);
    }

    #Sports-history .content .bc-blog-category-list li {
        flex-basis: 100%;
    }

    #Sports-history .content .bc-blog-category-list li a {
        font-size: 32px;
        font-size: 3.2rem;
    }
}

@media screen and (max-width:450px) {
    #topbar ul li {
        margin-bottom: 2px;
        padding-right: 0;
        border-right: none;
    }
    #Sports-history .bc-blog-category-list {
    }
    #Sports-history .content .bc-blog-category-list li a {
        font-size: 26px;
        font-size: 2.6rem;
    }
}

/* @end */

/* Other
--------------------------------------------------------------------------------------------------------------- */
/* ページ内マルチカラムレイアウト用
-------------------- */
.content .flex-parent {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
}

.content .flex-parent>div,
.content .flex-parent a>div {
    width: 100%;
    padding: 10px;
}

.content .flex-border {
    border: solid 1px #eeeeee;
}

.content .item2 {
    width: 48%;
}

.content .item3 {
    width: 32%
}

.content .item4 {
    width: 23%
}

/* @end */

/* カレンダー
-------------------- */
.content .calendar a,
.bs-widget-blog-calendar a,
.bs-widget-blog-recent-entries a,
.bs-widget-blog-monthly-archives a,
.bs-widget-blog-yearly-archives a {
    text-decoration: underline;
}

.content .calendar a:hover,
.bs-widget-blog-calendar a:hover,
.bs-widget-blog-recent-entries a:hover,
.bs-widget-blog-monthly-archives a:hover,
.bs-widget-blog-yearly-archives a:hover {
    background-color: #F7A804;
}

.content .calendar th,
.content .calendar td,
.bs-widget-blog-calendar th,
.bs-widget-blog-calendar td {
    width: calc(100% / 7);
    text-align: center;
}

.content .calendar th:nth-child(1),
.content .calendar td:nth-child(1),
.bs-widget-blog-calendar th:nth-child(1),
.bs-widget-blog-calendar td:nth-child(1) {
    color: #ff3838;
    /*    background-color: #ffe8f0;*/
    font-weight: bold;
}

/*日曜日カラー彩度下*/
.content .calendar th:nth-child(1),
.bs-widget-blog-calendar th:nth-child(1) {
    color: #fba9a9;
}

.content .calendar th:nth-child(7),
.content .calendar td:nth-child(7),
.bs-widget-blog-calendar th:nth-child(7),
.bs-widget-blog-calendar td:nth-child(7) {
    color: #3885ff;
    /*    background-color: #e8f6ff;*/
    font-weight: bold;
}

/*土曜日カラー彩度下*/
.content .calendar th:nth-child(7),
.bs-widget-blog-calendar th:nth-child(7) {
    color: #a4c7ff;
}

.bs-widget-blog-calendar tr:nth-child(1) th,
.bs-widget-blog-calendar tr:nth-child(1) td {
    background-color: #FBFBFB;
    color: inherit;
}

/* @end */

/* @end */

/* タイムライン */
@media screen and (max-width:650px) {
    .scrollable {
        display: block;
        width: 100%;
        margin: 0 0 30px 0;
        padding: 0 0 15px 0;
        overflow: auto;
        overflow-x: scroll;
    }

    .scrollable table {
        margin: 0;
        padding: 0;
        white-space: nowrap;
    }

    .inline li {
        display: block;
        margin-bottom: 10px;
    }

    .pushright li {
        margin-right: 0;
    }

    .font-x2 {
        font-size: 1.4rem;
    }

    .font-x3 {
        font-size: 1.6rem;
    }
}

/* @end */