@charset "utf-8";

.caution {
    color: #ff8d3b;
    font-size: 12px !important;
}

.caution::before {
    content: "\f06a";
    font-family: "Font Awesome 5 Free";
    font-weight: 900 !important;
    font-weight: normal;
    position: relative;
    top: 1px;
    font-size: 15px;
    display: inline-block;
    margin-right: 0.5em;
    margin-left: 1px;
}

.pr {
    display: inline-block;
    border: 1px solid;
    padding: 0 0.6em;
    font-size: 0.75em;
    font-weight: 400;
}

.premium-sponser {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 100px;
}

.inner .premium-sponser {
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: 60px;
}

.premium-sponser img {
    max-width: 100%;
}

.premium-sponser-pc {
    display: flex;
    justify-content: space-between;
    max-width: 960px;
    margin: 0 auto;
}

.premium-sponser-pc>a {
    display: block;
    width: 300px;
    max-width: 32%;
}

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

  breadcrumb

----------------------------------------------------- */
.breadcrumb {
    background: #fafaed;
    padding-bottom: 5px;
    margin-bottom: 70px;
}

@media screen and (max-width: 540px) {
    .breadcrumb {
        padding-top: 0;
        margin-bottom: 30px;
    }
}

.breadcrumb ul {
    width: calc(100vw - 40px);
    max-width: 1200px;
    margin: 0 auto;
    text-align: right;
}

.breadcrumb li {
    font-size: 10px;
    line-height: 1;
    display: inline-block;
}

.breadcrumb li:after {
    content: "／";
    display: inline-block;
    margin: 0 4px;
}

.breadcrumb li:last-child:after {
    content: none;
    margin: 0;
}

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

  featured

----------------------------------------------------- */
.featured .secBox {
    border-bottom: 1px dashed #000;
    padding-bottom: 30px;
    margin-bottom: 40px;
}

.featured .secBox:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.featured .txt h3 {
    font-size: 26px;
    margin-bottom: 15px;
    font-weight: 500;
}

.featured .txt h3 span {
    font-size: 12px;
    display: block;
    font-weight: 400;
}

.featured .txt strong {
    font-size: 12px;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 600;
    display: block;
    margin-bottom: 40px;
}

.featured .img li {
    width: 31%;
    float: left;
    margin-right: 3.5%;
    margin-bottom: 25px;
}

.featured .img li:nth-child(3n) {
    margin-right: 0;
}

/* .featured .thum .thumLink {
  display: block;
  margin-bottom: 8px;
} */

/* .featured .thum {
  transition: 0.15s;
  padding-top: 75%;
} */

/* .featured .thum:hover {
  opacity: 0.7;
} */

.featured .img li h4 {
    font-size: 16px;
    line-height: 1.5;
}

.featured .img li h4 span {
    font-size: 10px;
    display: block;
    line-height: 1;
    margin-top: 5px;
}

.featured .txt {
    width: 32%;
    float: left;
}

.featured .img {
    width: 65%;
    float: right;
}

/* .featured .thum {
  position: relative;
  background-repeat: none;
  background-size: cover;
  background-position: center center;
} */

@media screen and (max-width: 540px) {
    .featured .txt {
        width: 100%;
        float: none;
        margin-bottom: 35px;
    }

    /* .featured .thum .thumLink {
    height: 8rem;
  } */

    .featured .img {
        width: 100%;
        float: none;
    }

    .featured .txt strong {
        margin-bottom: 10px;
    }

    .featured .img li {
        width: 48%;
        float: left;
        margin-right: 4%;
        margin-bottom: 25px;
    }

    .featured .img li:nth-child(3n) {
        margin-right: 4%;
    }

    .featured .img li:nth-child(2n) {
        margin-right: 0;
    }
}

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

  GENUS

----------------------------------------------------- */
.genusMain {
    margin-bottom: 100px;
    letter-spacing: 0.05em;
}

.genusMain .img {
    height: 10rem;
    min-height: 450px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 960px;
    margin: 0 auto 25px auto;
    position: relative;
}

.genusMain h2 {
    font-size: 34px;
    margin-bottom: 20px;
}

.genusMain h2 span {
    font-size: 16px;
    display: block;
    margin-bottom: 6px;
}

.genusMain strong {
    font-size: 16px;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 600;
    display: block;
    margin-bottom: 50px;
}

.genusMain h3 {
    font-size: 20px;
    margin-bottom: 6px;
}

.genusMain p {
    max-width: 650px;
    font-size: 12px;
    line-height: 1.8;
}

.genusPickup {
    margin-bottom: 80px;
}

.genusPickup h4 a:hover {
    color: #000;
}

.genusPickup li {
    width: 31%;
    margin-right: 3.5%;
    float: left;
    margin-bottom: 40px;
}

.genusPickup ul {
    margin-bottom: 20px;
}

.genusPickup li:nth-child(3n) {
    margin-right: 0;
}

.genusPickup h4 {
    font-size: 18px;
    margin-bottom: 4px;
}

.genusPickup li p {
    font-size: 11px;
    line-height: 1.8;
    margin-bottom: 16px;
}

/* .genusPickup .thum {
  margin-bottom: 10px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: 0.15s;
  width: 100%;
  padding-top: 75%;
} */

a.listLink {
    transition: 0.15s;
    display: block;
}

a.listLink:hover {
    opacity: 0.7;
    color: #000;
}

.genusSearch {
    background: #fafaed;
    padding: 45px 0;
    margin-bottom: 90px;
}

.genusList {
    margin-bottom: 100px;
}

.genusList li {
    width: 32%;
    margin-right: 0;
    margin-bottom: 35px;
}

.genusList li:nth-child(4n) {
    margin-right: 0;
}

.genusList h4 {
    font-size: 16px;
    margin-bottom: 4px;
    margin-left: -1px;
}

.genusList h4 a:hover {
    color: #000;
}

.genusList h4 span {
    font-size: 11px;
    line-height: 1;
    margin-top: 4px;
    margin-left: 1px;
    display: block;
}

/* .genusList .thum {
  margin-bottom: 10px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: 0.15s;
  position: relative;
  padding-top: 75%;
} */

/* .genusList .thum a {
  display: block;
} */

/* .genusList .thum:hover {
  opacity: 0.7;
} */

/* .genusList .heartIcon {
  bottom: 8px;
} */

.genusList ul {
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.genusList h3 {
    font-size: 12px;
    margin-bottom: 25px;
    font-weight: 400;
    line-height: 24px;
    margin-top: 6px;
}

.genusList h3 .catchcopy {
    font-size: 16px;
    display: block;
    font-weight: 600;
}

.pageNav {
    margin-bottom: 50px;
}

.pageNav ul {
    text-align: center;
}

.pageNav li {
    font-size: 18px;
    display: inline-block;
    border-right: 1px solid #000;
    margin-right: 2em;
    padding-right: 2em;
    line-height: 1;
}

.pageNav li:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}

.pageNav li:first-child a::before {
    content: "\f104";
    font-family: "Font Awesome 5 Free";
    font-weight: 900 !important;
    margin-right: 15px;
}

.pageNav li:last-child a::after {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900 !important;
    margin-left: 15px;
}

.shopItemList {
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.speciesList li {
    width: 23.5%;
}

@media screen and (max-width: 540px) {
    .genusMain {
        margin-bottom: 70px;
    }

    .genusList {
        margin-bottom: 50px;
    }

    .genusMain h2 span {
        font-size: 12px;
        margin-bottom: 0;
    }

    .genusMain .img {
        height: 12rem;
        min-height: auto;
    }

    .genusMain h2 {
        font-size: 26px;
        margin-bottom: 15px;
    }

    .genusMain strong {
        margin-bottom: 30px;
    }

    .genusMain h3 {
        font-size: 22px;
    }

    .genusMain p {
        font-size: 14px;
    }

    .genusPickup ul {
        display: flex;
        padding-bottom: 30px;
    }

    .genusPickup li {
        min-width: 250px;
        width: 100%;
        margin-left: 20px;
        margin-right: 0;
        margin-bottom: 20px;
    }

    #taxon.genusPickup ul {
        width: 100%;
        padding-bottom: 0;
    }

    #taxon.genusPickup li {
        width: 47%;
        margin-right: 6%;
        margin-bottom: 0;
    }

    .genusPickup .scBox {
        margin-bottom: 30px;
    }

    #taxon.genusPickup li:nth-child(2n) {
        margin-right: 0;
    }

    /* #taxon.genusPickup .thum a {
    display: block;
    height: 8rem;
    min-height: auto;
  } */

    #taxon.genusPickup h4 {
        font-size: 16px;
        line-height: 1.6;
    }

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

    .genusPickup .btStyle01 {
        max-width: 130px;
    }

    .genusPickup {
        margin-bottom: 40px;
    }

    .genusPickup.inner {
        width: 100%;
    }

    .genusPickup.inner h2 {
        width: calc(100vw - 40px);
        margin-left: auto;
        margin-right: auto;
    }

    .genusSearch {
        padding: 40px 0;
        margin-bottom: 40px;
    }

    .genusList li {
        width: 48%;
        float: left;
        margin-right: 4%;
        margin-bottom: 25px;
    }

    .genusList li:nth-child(4n) {
        margin-right: 4%;
    }

    .genusList li:nth-child(2n) {
        margin-right: 0;
    }

    /* .genusList .thum a {
    height: 8rem;
    min-height: auto;
  } */

    .genusList h3 {
        font-size: 12px;
        margin-bottom: 35px;
    }

    .genusList h3 .catchcopy {
        font-size: 12px;
        line-height: 1;
        margin-top: 5px;
    }

    .pageNav li {
        font-size: 14px;
    }
}

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

  detail

----------------------------------------------------- */
.detailSpec .txt {
    float: left;
    width: 68%;
}

.detailSpec .txt em,
.detailFeature em {
    font-style: normal;
    padding: 0 0.5em;
    background: linear-gradient(transparent 60%, #fff3bd 60%);
}

.detailSpec .txt strong,
.detailFeature strong {
    font-style: normal;
    padding: 0 0.5em;
    background: linear-gradient(transparent 60%, #ffc6cd 60%);
}

.detailSpec .txt blockquote,
.detailFeature blockquote {
    font-size: 13.5px;
    line-height: 2;
    letter-spacing: 0.05em;
    font-style: italic;
    margin: 0 2em 50px;
    color: #57829e;
}

.detailSpec .spec {
    float: right;
    width: 25%;
}

.detailMain {
    margin-bottom: 40px;
}

.detailMain .thum {
    padding-top: 55%;
}

.thumsSwiper {
    margin-top: -30px;
    margin-bottom: 40px;
}

.thumsSwiper .swiper-wrapper {
    display: flex;
    justify-content: space-between;
}

.thumsSwiper .thumSwiper-item {
    width: calc(20% - 12px) !important;
    margin: 0 !important;
}

.thumSwiper-item {
    font-size: 12px;
    text-align: center;
    background: #eaeaea;
    transition: all 0.5s ease;
}

.thumSwiper-item:hover {
    background: #ddd;
}

.thumSwiper-item.swiper-slide-thumb-active,
.thumSwiper-item.swiper-slide-thumb-active:hover {
    background: #789883;
    color: #fff;
}

.thumSwiper-item.disabled,
.thumSwiper-item.disabled:hover {
    background: #fbfbfb;
    color: #ddd;
}

.detailSub .thum {
    padding-top: 55%;
}

.detailSpec {
    margin-bottom: 40px;
}

.detailSpec .txt p {
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: 0.05em;
    margin-bottom: 7px;
}

.detailSpec .txt p:last-child {
    margin-bottom: 0;
}

.detailSpec .spec ul {
    margin-bottom: 8px;
}

.detailSpec .spec li {
    float: left;
    width: 13%;
    margin-right: 1.1%;
    text-align: center;
    color: #dedede;
    border: 1px solid #dedede;
    line-height: 1;
    font-size: 14px;
    padding: 4px 0;
}

.detailSpec .spec li.active {
    color: #fff;
    border: 1px solid #799b86;
    background: #799b86;
}

.detailSpec .spec li.redList-LC.active {
    color: #fff;
    border: 1px solid #00ae53;
    background: #00ae53;
}

.detailSpec .spec li.redList-NT.active {
    color: #fff;
    border: 1px solid #a8d18d;
    background: #a8d18d;
}

.detailSpec .spec li.redList-VU.active {
    color: #fff;
    border: 1px solid #ebd214;
    background: #ebd214;
}

.detailSpec .spec li.redList-EN.active {
    color: #fff;
    border: 1px solid #ff9a33;
    background: #ff9a33;
}

.detailSpec .spec li.redList-CR.active {
    color: #fff;
    border: 1px solid #fe0101;
    background: #fe0101;
}

.detailSpec .spec li.redList-EW.active {
    color: #fff;
    border: 1px solid #702fa0;
    background: #702fa0;
}

.detailSpec .spec li.redList-EX.active {
    color: #fff;
    border: 1px solid #000000;
    background: #000000;
}

.detailSpec .spec strong {
    color: #799b86;
}

.detailSpec .spec .redList-LC strong {
    color: #00ae53;
}

.detailSpec .spec .redList-NT strong {
    color: #a8d18d;
}

.detailSpec .spec .redList-VU strong {
    color: #ebd214;
}

.detailSpec .spec .redList-EN strong {
    color: #ff9a33;
}

.detailSpec .spec .redList-CR strong {
    color: #fe0101;
}

.detailSpec .spec .redList-EW strong {
    color: #702fa0;
}

.detailSpec .spec .redList-EX strong {
    color: #000000;
}

.detailSpec a {
    border-bottom: 1px dashed;
}

.detail-recommendation,
.snsPickup,
#scSec #shopping,
.detail-suggest {
    margin-bottom: 90px;
}

.detail-recommendation h3,
.detail-suggest h3 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 1em;
}

.detail-recommendation h6,
.detail-suggest h6 {
    font-size: 12px;
}

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

    .detail-recommendation .row-cardlist,
    .detail-suggest .row-cardlist {
        display: flex;
        flex-wrap: wrap;
    }

    .detail-recommendation .card-item,
    .detail-suggest .card-item {
        min-width: 42vw;
    }

    .detailSpec .txt {
        float: none;
        width: 100%;
        margin-bottom: 25px;
    }

    .detailSpec .spec {
        float: none;
        width: 100%;
    }

    .detailMain {
        margin-bottom: 40px;
        margin-left: -20px !important;
        margin-right: -20px !important;
    }

    .thumsSwiper {
        margin-top: -30px;
    }

    .thumsSwiper .swiper-wrapper {}

    .detailMain .thum {
        padding-top: 80%;
        background-position: right;
    }

    .thumsSwiper .thumSwiper-item {
        width: calc(20% - 8px) !important;
        margin: 0 !important;
    }
}

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

.detailSpec .spec li p {
    font-size: 14px;
}

.detailSpec .spec li p strong {
    background: #799b86;
}

.detailSpec .spec .redList,
.detailSpec .spec .cites {
    margin-top: 15px;
}

.detailSpec .spec .redList ul,
.detailSpec .spec .cites ul {
    margin: 0;
}

.detailSpec .spec .redList p,
.detailSpec .spec .cites p {
    font-size: 12px;
}

.detailSpecInfo {
    margin-top: 40px;
}

.detailSpecInfo dt {
    font-size: 14px !important;
    margin-bottom: 10px;
    line-height: 1;
}

.detailSpecInfo dd {
    font-weight: bold;
    font-size: 20px;
}

.detailSpecInfo dd span {
    font-size: 16px;
}

.detailSpecInfo dd img {
    width: 75%;
    height: auto;
}

.detailSpecInfo li {
    width: 23%;
    float: left;
    margin-right: 2.6%;
}

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

.information {
    width: 100%;
    font-size: 14px;
    border-top: 1px solid #eee;
}

.information tr {
    border-bottom: 1px solid #eee;
}

.information td {
    text-align: right;
    padding: 0.5em 0;
    line-height: 1.5;
}

.information+.caution {
    color: #ccc;
    line-height: 1.5;
    margin-top: 10px;
}

.blooming_season.sleeping {
    color: #eee;
}

.information .gray {
    color: #ccc;
}

@media screen and (max-width: 540px) {
    .detailSpec .spec p {
        font-size: 14px;
    }

    .detailSpecInfo dd img {
        width: 75%;
        height: auto;
    }

    .recommendList .detailSpecInfo dd img {
        width: calc(100vw - 40px);
        margin-bottom: 0;
    }

    .detailSpecInfo dd {
        margin-bottom: 15px;
    }

    .eventDetailReco .detailSpecInfo dd {
        line-height: 1;
    }

    .detailSpecInfo {
        margin-top: 30px;
    }

    .detailSpecInfo li {
        width: 48%;
        margin-right: 2%;
    }

    .detailSpecInfo li:nth-child(2n) {
        margin-right: 0;
    }
}

.detailTop {
    margin-bottom: 30px;
}

.detailTop .tit h2 {
    font-size: 34px;
    letter-spacing: 0.05em;
    margin-bottom: 25px;
}

.detailTop .tit h2 span {
    font-size: 16px;
    display: block;
    margin-bottom: 8px;
}

.detailTop .tit strong {
    font-size: 16px;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
}

.detailTop .tit h3 {
    font-size: 12px;
    line-height: 2.4;
    margin-left: 10px;
}

.detailTop .tit h3 span.alias-header {
    border: 1px solid #dedede;
    padding: 2px 20px;
    border-radius: 30px;
    position: relative;
    left: -10px;
}

.detailTop .tit h3 span.alias-locale {
    border: 1px solid #dedede;
    padding: 2px 4px;
    border-radius: 0;
    position: relative;
    margin-left: 14px;
    margin-right: 4px;
}

.detailTop .tit h3 span.alias+span.alias {
    margin-left: 10px;
}

.detailTop .tit {
    width: 85%;
    float: left;
}

.detailTop .favBt {
    width: 15%;
    float: right;
    position: relative;
}

@media screen and (max-width: 540px) {
    .detailTop .tit h2 span {
        font-size: 12px;
    }

    .detailTop .tit h2 {
        margin-bottom: 20px;
    }

    detailTop .tit h3 {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
    }

    .detailTop .tit h3 span.alias-header {
        display: block;
        margin-bottom: 12px;
        text-align: center;
        width: 100px;
    }

    .detailTop .tit h3 span.alias-locale {
        margin-left: 0px;
        margin-right: 2px;
    }

    .detailTop .tit h3 span.alias {
        margin-left: 0px;
        margin-right: 8px;
    }

    .detailTop .tit h3 span.alias[last-child] {
        margin-left: 0px;
        margin-right: 16px;
    }

    .detailTop .tit h3 span.alias+span.alias {
        margin-left: 0px;
        margin-right: 8px;
    }

    .detailTop .tit {
        width: 100%;
        float: none;
        margin-bottom: 20px;
    }

    .detailTop .favBt {
        width: 100%;
        float: none;
    }
}

.detailTop .favBt ul {
    text-align: right;
    position: absolute;
    bottom: -3px;
    width: 100%;
}

.detailTop .favBt li {
    font-size: 12px;
    margin-bottom: 10px;
    line-height: 1;
}

.detailTop .favBt li:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 540px) {
    .detailTop .favBt ul {
        position: static;
        bottom: auto;
        width: 100%;
    }

    .detailTop .favBt li {
        width: 32%;
        float: left;
        margin-right: 2%;
    }

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

.detailTop .favBt li a {
    display: block;
    width: 100%;
    padding: 8px 0;
    text-align: center;
    background: #efefef;
    border-radius: 30px;
}

.detailTop .favBt li a:hover {
    color: #000;
    background: #ff8d9c;
}

@media screen and (min-width: 540px) {
    .twitter-container {
        column-count: 3;
        column-gap: 0.6rem;
    }
}

.twitter-tweet {
    background: #fff;
    border: 0;
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 10px 0 rgba(0, 0, 0, 0.05);
    margin: 1px;
    padding: 0;
    display: inline-block;
    margin-bottom: 0.6rem;
    padding: 16px;
    font-size: 12px;
}

.twitter-tweet a {
    color: #24a1ea;
}

.twitter-tweet a::after {
    content: "\f35d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900 !important;
    margin-left: 6px;
    font-weight: normal;
}

.aleartTxt {
    background: #f2f2f2;
    font-size: 10px;
    padding: 12px 15px;
    margin-bottom: 80px;
}

.aleartTxt th {
    padding-right: 2em;
    border-right: 1px solid #707070;
    line-height: 1.7;
    white-space: nowrap;
    vertical-align: middle;
    color: #707070;
}

.aleartTxt td {
    padding-left: 2em;
    line-height: 1.7;
    color: #707070;
}

.aleartTxt a {
    color: #a0d1cf;
    text-decoration: underline !important;
}

.aleartTxt a:hover {
    text-decoration: none !important;
}

.tableContent {
    margin-bottom: 80px;
}

@media screen and (max-width: 540px) {
    .aleartTxt {
        margin-bottom: 60px;
    }

    .aleartTxt table,
    .aleartTxt tr,
    .aleartTxt th,
    .aleartTxt td,
    .aleartTxt tbody {
        width: 100%;
        display: block;
    }

    .aleartTxt th {
        padding-right: 0;
        border-right: none;
    }

    .aleartTxt td {
        padding-left: 0;
    }

    .tableContent {
        margin-bottom: 60px;
    }
}

.tableContent h3 {
    font-size: 16px;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: 0.06em;
}

.tableContent ol {
    border-left: 1px solid #000;
    padding-left: 20px;
}

.tableContent li {
    font-size: 14px;
}

.tableContent ol ol {
    border: 0;
    padding-left: 40px;
    margin-bottom: 0.5em;
}

.tableContent ol ol li::before {
    content: '';
}

.detailPoint .accordion-area li {
    margin: 10px 0;
}

.detailPoint .accordion-area section {
    border: 1px solid #ccc;
}

.accordion-area .title {
    position: relative;
    cursor: pointer;
    font-weight: normal;
    padding: 15px 25px;
    transition: all 0.5s ease;
    background: #fafaed;
    font-size: 18px;
    border-radius: 10px;
}

.accordion-area .title span {
    padding-right: 13px;
}

@media screen and (max-width: 540px) {
    .accordion-area .title {
        padding: 15px;
        font-size: 15px;
    }
}

.accordion-area .title::before,
.accordion-area .title::after {
    position: absolute;
    content: "";
    width: 15px;
    height: 2px;
    background-color: #333;
}

.accordion-area .title::before {
    top: 48%;
    right: 20px;
    transform: rotate(0deg);
}

.accordion-area .title::after {
    top: 48%;
    right: 20px;
    transform: rotate(90deg);
}

.accordion-area .title.close::before {
    transform: rotate(45deg);
}

.accordion-area .title.close::after {
    transform: rotate(-45deg);
}

.accordion-area .box {
    display: none;
    padding: 20px 0 30px 0;
}

.accordion-area p {
    font-size: 12px;
    line-height: 1.9;
    letter-spacing: 0.05em;
}

.accordion-area h4 {
    border-bottom: 1px solid #dedede;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.detailPoint {
    margin-bottom: 80px;
}

.detailFeature {
    margin-bottom: 80px;
}

@media screen and (max-width: 540px) {
    .detailPoint {
        margin-bottom: 60px;
    }

    .detailFeature {
        margin-bottom: 60px;
    }
}

.detailFeature dt {
    display: inline-block;
    background: #000;
    line-height: 1;
    font-size: 16px;
    padding: 5px 25px 7px 25px;
    border-radius: 40px;
    color: #fff;
    margin-bottom: 10px;
    letter-spacing: 0.06em;
}

.detailFeature dt span {
    font-size: 13px;
}

.detailFeature dd,
.detailFeature p {
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: 0.05em;
    margin-bottom: 30px;
}

.detailFeature h4 {
    font-size: 22px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    margin-bottom: 30px;
}

.detailFeature h5 {
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    padding-left: 12px;
    border-left: 4px solid #000;
}

.detailFeature h6 {
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    font-weight: bold;
}

.detailFeature a[name]+h4,
.detailFeature p+h4 {
    margin-top: 60px;
}

.detailFeature a[name]+h5,
.detailFeature p+h5 {
    margin-top: 40px;
}


.detailFeature a {
    border-bottom: 1px dashed;
}

.detailFeature a.external-link {
    color: #ff8d9c;
    border-bottom: 1px dashed #ff8d9c;
}

.detailFeature a.external-link::after {
    content: "\f35d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900 !important;
    margin-left: 6px;
    font-weight: normal;
}

.article-inline-image {
    margin-bottom: 50px;
}

.article-inline-image .caption {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.8;
}

.article-inline-image .caption::before {
    content: "▲";
    margin-right: 0.5em;
    display: inline-block;
    opacity: 0.2;
}

.article-block-species {
    margin-bottom: 50px;
}

.article-block-species .caption {
    font-size: 12px;
    font-weight: 600;
}

.article-block-species .sub-caption {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
}

.article-block-genus {
    margin-bottom: 50px;
}

.article-block-genus .caption {
    font-size: 12px;
    font-weight: 600;
}

.article-block-genus .sub-caption {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
}

.article-block-genus-link {
    display: block;
    margin-bottom: 90px;
    margin-top: -20px;
}

.article-block-genus-link a {
    font-size: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #000;
    line-height: 1;
}

/* 記事内のリンクカード */

.article-link-card {
    margin: 0 0.3rem 50px;
    padding: 20px;
    display: flex;
    width: 100%;
    border: 1px solid #444;
}

.article-link-card .thum {
    width: 30%;
    padding-top: 25%;
    margin-right: 20px;
}

.article-link-card .card-body {
    width: calc(70% - 10px);
}

.article-link-card .caption {
    font-size: 14px !important;
    margin-bottom: 20px;
    line-height: 1.8;
    font-weight: bold;
}

.article-link-card .caption span {
    display: block;
    line-height: 1.8;
    font-size: 10px;
}

.article-link-card .description {
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.article-link-card .btStyle01 {
    max-width: fit-content;
    display: inline-block;
}

.article-link-card .btStyle01 a {
    padding-right: 1.5em;
}

@media screen and (max-width: 540px) {
    .article-link-card {
        display: block;
    }

    .article-link-card .thum {
        width: 100%;
        padding-top: 75%;
        margin-bottom: 20px;
    }

    .article-link-card .card-body {
        width: 100%;
    }
}

#shopping {
    margin-top: 80px;
    padding-top: 80px;
}

.relatedArticle {
    margin-bottom: 100px;
}

.relatedArticle .img {
    width: 25%;
    float: left;
}

.relatedArticle .txt {
    width: 70%;
    float: right;
}

.columnTop .relatedArticle .img {
    width: 53%;
    float: left;
}

.columnTop .relatedArticle .txt {
    width: 42%;
    float: right;
}

@media screen and (max-width: 540px) {
    #shopping {
        padding-top: 50px;
        border-top: none;
        margin-bottom: 50px;
    }

    .relatedArticle .img {
        width: 100%;
        float: none;
        margin-bottom: 15px;
    }

    .detailFeature dd {
        font-size: 14px;
        line-height: 1.9;
    }

    .relatedArticle .txt {
        width: 100%;
        float: none;
    }

    .columnTop .relatedArticle .img {
        width: 100%;
        float: none;
        margin-bottom: 15px;
    }

    .columnTop .relatedArticle .txt {
        width: 100%;
        float: none;
    }
}

/* .relatedArticle .img .thum {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: 0.15s;
  display: block;
  width: 100%;
  padding-top: 75%;
} */

/* .relatedArticle .img .thum a {
} */

/* .columnTop .relatedArticle .img .thum {
  display: block;
  height: 9rem;
  min-height: 320px;
} */

@media screen and (max-width: 540px) {
    /* .columnTop .relatedArticle .img .thum {
    display: block;
    height: 9rem;
    min-height: 200px;
  } */

    /* .relatedArticle .img .thum {
    display: block;
    height: 8rem;
    min-height: auto;
  } */
}

/* .relatedArticle .img .thum:hover {
  opacity: 0.7;
} */

.relatedPost {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.relatedPostLi {
    width: 100%;
    margin-bottom: 1em;
}

.relatedPostLi h3 {
    font-size: 14px;
    margin-bottom: 10px;
    letter-spacing: 0.09em;
    line-height: 1.6;
    position: relative;
}

.relatedPostLi h3 .pr {
    position: absolute;
    right: 0;
    top: 0;
}

@media screen and (max-width: 540px) {
    .relatedPostLi h3 {
        line-height: 1.5;
    }
}

.relatedPostLi h3 span {
    font-size: 10px;
    display: block;
    line-height: 1;
    margin-bottom: 5px;
    letter-spacing: 0.04em;
}

.relatedPostLi .txt p {
    font-size: 11px;
    line-height: 1.9;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.columnTop .relatedPostLi .txt p {
    font-size: 12px;
}

.columnTop .relatedPostLi h3 span {
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

.columnTop .relatedPostLi h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

@media screen and (max-width: 540px) {
    .columnTop .relatedPostLi h3 {
        font-size: 16px;
        margin-bottom: 10px;
    }
}

.tagList {
    margin-bottom: 20px;
}

.tagList li {
    display: inline-block;
    line-height: 1;
    font-size: 10px;
    margin-right: 5px;
}

.tagList li a {
    display: block;
    padding: 4px 15px;
    border: 1px solid #eaeaea;
    border-radius: 40px;
    background: #fff;
}

@media screen and (max-width: 540px) {
    .relatedArticle .scBox {
        margin: 0 -20px;
    }

    .scBox .relatedPost {
        margin: 0 20px;
        flex-wrap: nowrap;
    }

    .scBox .relatedPostLi {
        width: 100%;
        min-width: 44%;
        margin-right: 5% !important;
        margin-bottom: 0px;
    }
}

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

  column

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

.columnSortBt {
    background: #fafaed;
    padding-bottom: 35px;
    margin-bottom: 70px;
}

.columnSortBt li {
    width: 23%;
    margin-right: 2.6%;
    float: left;
}

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

@media screen and (max-width: 540px) {
    .columnSortBt li {
        width: 49%;
        margin-right: 2%;
        font-size: 14px;
        margin-bottom: 10px;
    }

    .columnSortBt li:nth-child(2n) {
        margin-right: 0;
    }

    .columnSortBt {
        padding-bottom: 20px;
    }
}

.columnSortBt li a {
    display: block;
    text-align: center;
    padding: 4px 0;
    border-radius: 40px;
    border: 3px solid #000;
    background: #fff;
}

.columnSortBt li a:hover {
    border: 3px solid #f0939d;
    color: #f0939d;
}

.columnSortBt li.active a {
    border: 3px solid #f0939d;
    color: #f0939d;
}

.columnSortBt h3 {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    top: -15px;
    margin-bottom: 10px;
}

.columnArchive li.relatedPostLi {
    width: 31%;
    float: left;
    margin-right: 3.5%;
    margin-bottom: 60px;
}

.columnArchive li.relatedPostLi:nth-child(3n) {
    margin-right: 0;
}

.relatedArticleSec .columnArchive li.relatedPostLi {
    width: 23%;
    float: left;
    margin-right: 2.6%;
    margin-bottom: 40px;
}

.relatedArticleSec .columnArchive li.relatedPostLi:nth-child(4n) {
    margin-right: 0;
}

.relatedArticleSec {
    background: #fafaed;
    padding-bottom: 50px;
    margin-bottom: 100px;
}

.relatedArticleSec .hStyle01 {
    position: relative;
    top: -10px;
    margin-bottom: 25px;
}

@media screen and (max-width: 540px) {
    .relatedArticleSec .columnArchive li.relatedPostLi {
        width: 47%;
        margin-right: 6%;
        margin-bottom: 50px;
    }

    .relatedArticleSec {
        padding-bottom: 20px;
        margin-bottom: 60px;
    }

    .columnArchive li.relatedPostLi {
        width: 47%;
        margin-right: 6%;
        margin-bottom: 30px;
    }

    .columnArchive li.relatedPostLi:nth-child(3n) {
        margin-right: 6%;
    }

    .columnArchive li.relatedPostLi:nth-child(2n) {
        margin-right: 0;
    }
}

.searchResult .relatedArticleSec {
    background: none;
    margin-bottom: 0;
}

.searchResult .relatedArticleSec em {
    font-weight: bold;
    display: inline;
    margin: 0 0.1em;
    font-style: normal;
}

.columnArchive .relatedArticle .img {
    width: 100%;
    float: none;
    margin-bottom: 15px;
}

.columnArchive .relatedArticle .txt {
    width: 100%;
    float: none;
}

.columnPageNav .pageNav li {
    border-right: 0;
    padding-right: 0;
    margin-right: 5px;
}

.columnArchive .relatedArticle {
    margin-bottom: 0;
}

.columnPageNav .pageNav li a {
    width: 30px;
    height: 30px;
    line-height: 30px;
    background-color: #f2f2f2;
    border-radius: 50%;
    text-align: center;
    display: block;
    font-size: 12px;
}

.columnPageNav .pageNav li.active a {
    background-color: #000;
    color: #fff;
}

.columnPageNav .pageNav li a:hover {
    background-color: #000;
    color: #fff;
}

.columnPageNav .pageNav li:first-child a {
    background: none;
    font-size: 20px;
    width: auto;
    height: auto;
}

.columnPageNav .pageNav li:first-child a:hover {
    color: #000;
    opacity: 0.7;
}

.columnPageNav .pageNav li:last-child a {
    background: none;
    font-size: 20px;
    width: auto;
    height: auto;
}

.columnPageNav .pageNav li:last-child a:hover {
    color: #000;
    opacity: 0.7;
}

.columnPageNav .pageNav ol {
    text-align: center;
}

.columnPageNav .pageNav {
    margin-bottom: 100px;
}

.columnTagList {
    background: #f2f2f2;
    padding: 0 30px 20px 30px;
    margin-bottom: 100px;
    margin-top: 100px;
}

.columnTagList h3 {
    text-align: center;
    font-size: 24px;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 600;
    position: relative;
    top: -12px;
    letter-spacing: 0.09em;
}

.columnTagList ul {
    text-align: center;
}

.columnTagList li {
    display: inline-block;
    margin-right: 10px;
    font-size: 10px;
}

.columnTagList li a {
    display: block;
    line-height: 1;
    padding: 4px 10px;
    text-align: center;
    background: #fff;
    border-radius: 40px;
}

.footerSns {
    background: #fafaed;
    padding: 60px 0;
    text-align: center;
    margin-bottom: 50px;
}

.footerSns h3 {
    font-size: 18px;
    margin-bottom: 5px;
    text-align: center;
    font-weight: 700 !important;
    position: relative;
}

.footerSns h3:before {
    position: absolute;
    top: calc(50%);
    left: 0;
    width: 100%;
    height: 1px;
    content: "";
    background: #000;
}

@media screen and (min-width: 540px) {
    .footerSns h3 br {
        display: none;
    }
}

.footerSns h3 span {
    position: relative;
    padding: 0 1em;
    background: #fafaed;
    font-weight: 700 !important;
}

.footerSns p {
    text-align: center;
    font-size: 12px;
    margin-bottom: 15px;
}

.footerSns ul {
    text-align: center;
}

.footerSns li {
    display: inline-block;
    margin-right: 20px;
    width: 38px;
}

@media screen and (max-width: 540px) {
    .columnTagList li {
        display: inline-block;
        margin-right: 5px;
        margin-bottom: 10px;
        font-size: 13px;
    }

    .footerSns h3 {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .footerSns h3::before {
        content: "";
        display: inline-block;
        width: 20%;
        height: 1px;
        background: #000;
        position: absolute;
        top: 49%;
        right: 0;
        left: auto;
    }

    .footerSns h3:after {
        content: "";
        display: inline-block;
        width: 20%;
        height: 1px;
        background: #000;
        position: absolute;
        top: 49%;
        left: 0;
    }

    .footerSns p {
        text-align: center;
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 25px;
    }

    .columnTagList h3 {
        margin-bottom: 15px;
    }

    .columnTagList {
        background: #f2f2f2;
        padding: 0 15px 30px 15px;
        margin-bottom: 15px;
    }

    .columnTagList li a {
        padding: 10px 15px;
    }

    .columnTagList.inner {
        width: 100%;
    }

    .columnArchive .relatedArticle .txt p {
        display: none;
    }

    .footerSns {
        padding: 30px 0;
    }
}

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

  column detail

----------------------------------------------------- */
.columnInner,
.eventInner {
    max-width: 700px;
    width: calc(100vw - 40px);
    margin: 0 auto;
    text-align: left;
}

.columnDetailTop {
    text-align: left;
    max-width: 700px;
    width: calc(100vw - 40px);
    margin: 0 auto;
}

.columnDetailTop h2 {
    font-size: 22px;
    line-height: 1.7;
    margin-bottom: 5px;
    position: relative;
}

.columnDetailTop h2 .pr {
    position: absolute;
    right: 0;
    top: 0;
}

.columnDetailTop h2 span {
    font-size: 10px;
    display: block;
    line-height: 1;
    margin-bottom: 5px;
}

.columnDetailTop .tagList {
    margin-bottom: 30px;
}

.columnDetailImg {
    max-width: 700px;
    width: 100%;
    margin: 0 auto 50px auto;
    padding-top: 60%;
}

.columnInner .row {
    display: flex;
    flex-wrap: wrap;
}

.columnInner .col-md-12 .thum {
    padding-top: 60%;
}

.columnInner .tableContent {
    margin-bottom: 40px;
}

.columnInner a[name] {
    margin-top: -10px;
    padding-top: 10px;
    display: block;
    visibility: hidden;
}

.columnInner p {
    font-size: 13px;
    line-height: 1.9;
    letter-spacing: 0.05em;
    margin-bottom: 50px;
}

.columnInner blockquote {
    font-size: 13.5px;
    line-height: 2;
    letter-spacing: 0.05em;
    font-style: italic;
    margin: 0 2em 50px;
    color: #57829e;
}

.columnInner h4 {
    font-size: 22px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    margin-bottom: 50px;
}

.columnInner h5 {
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
    padding-left: 16px;
    border-left: 4px solid #000;
    margin-top: 80px;
}

.columnInner h6 {
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.columnInner a[name]+h4,
.columnInner div+h4,
.columnInner p+h4 {
    margin-top: 80px;
}

.columnInner img {
    margin: 0 auto 50px auto;
    display: block;
    max-width: 100%;
    height: auto;
}

.columnInner dl {
    margin-bottom: 80px;
}

.columnInner dt {
    padding-top: 20px;
    border-top: 1px solid #dedede;
    font-size: 16px;
    margin-bottom: 5px;
}

.columnInner .detailSpecInfo dt {
    margin-bottom: 15px;
}

.columnInner .detailSpecInfo dt {
    padding-top: 0;
    border-top: none;
}

.columnInner dd {
    font-size: 11px;
    line-height: 1.8;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
}

.columnInner dd:last-child {
    margin-bottom: 0;
}

.columnInner em {
    font-style: normal;
    padding: 0 0.5em;
    background: linear-gradient(transparent 60%, #fff3bd 60%);
}

.columnInner strong {
    font-style: normal;
    padding: 0 0.5em;
    background: linear-gradient(transparent 60%, #ffc6cd 60%);
}

.columnInner p a {
    color: #24a1ea;
    border-bottom: 1px dashed #24a1ea;
}

.columnInner a.external-link {
    color: #ff8d9c;
    border-bottom: 1px dashed #ff8d9c;
}

.columnInner a.external-link::after {
    content: "\f35d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900 !important;
    margin-left: 6px;
    font-weight: normal;
}

.columnInner a:hover {
    opacity: 0.3;
}

.columnInner .external-link {}

.columnInner ul.list {
    margin-bottom: 50px;
    font-size: 14px;
}

.columnInner ul.list li {
    margin-bottom: 10px;
}

.columnInner ul.list li:before {
    content: "－";
    margin-right: 0.5em;
}

.columnInner ol.list {
    margin-bottom: 50px;
    font-size: 14px;
}

.columnInner ol.list li {
    margin-bottom: 10px;
    list-style: decimal;
    margin-left: 4ex;
    padding-left: 1ex;
}

.recommendList {
    margin-bottom: 40px;
}

.recommendList h3 {
    margin-bottom: 15px;
}

.recommendList li .img {
    margin-bottom: 20px;
}

.recommendList li .txt {}

.recommendList li {
    width: 31%;
    float: left;
    margin-right: 3.5%;
    margin-bottom: 30px;
}

.recommendList li:nth-child(3n) {
    margin-right: 0;
}

/* .recommendList li .img .thum {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: 0.15s;
} */

/* .recommendList li .img .thum a {
  display: block;
  height: 11rem;
  min-height: 150px;
} */

.recommendList .detailSpecInfo li {
    width: 49%;
    margin-right: 2%;
}

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

@media screen and (max-width: 540px) {
    .columnDetailImg {
        margin-left: -20px;
        margin-right: -20px;
        padding-top: 80%;
        width: calc(100% + 40px);
    }

    .columnInner .col-md-12 .thum {
        padding-top: 80%;
    }

    .columnInner p {
        font-size: 14px;
    }

    .columnInner h3 {
        font-size: 16px;
    }

    .recommendList {
        margin-bottom: 10px;
    }

    .recommendList li {
        width: 47%;
        margin-right: 6%;
        margin-bottom: 30px;
    }

    .recommendList .detailSpecInfo li {
        margin-bottom: 0;
    }

    .recommendList .detailSpecInfo li dd {
        margin-bottom: 0;
    }

    .recommendList li:nth-child(3n) {
        margin-right: 6%;
    }

    .recommendList li:nth-child(2n) {
        margin-right: 0;
    }

    /* .recommendList li .img .thum a {
    height: 8rem;
    min-height: auto;
  } */
}

.recommendList h4 {
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    border-left: none;
    padding-left: 0;
}

.recommendList h4 span {
    font-size: 12px;
    display: block;
    margin-top: 5px;
}

.recommendList p {
    margin-bottom: 15px;
    font-size: 11px;
    line-height: 1.8;
    letter-spacing: 0.05em;
}

.recommendList .detailSpecInfo {
    margin-top: 0;
}

.columnSns {
    padding: 30px 0 90px 0;
    border-bottom: 1px dashed #000;
    margin-bottom: 80px;
}

.columnSns h3 {
    text-align: center;
    font-size: 15px;
    margin-bottom: 15px;
    font-weight: 700;
}

.columnSns ul {
    margin-bottom: 20px;
    text-align: center;
}

.columnSns li {
    display: inline-block;
    margin-right: 20px;
    width: 38px;
}

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

.columnSns p {
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 40px;
    text-align: center;
    letter-spacing: 0.07em;
}

.columnItemList li {
    width: 31%;
    float: left;
    margin-right: 3.5%;
    margin-bottom: 30px;
}

.columnItemList li:nth-child(3n) {
    margin-right: 0;
}

.columnItemList li p {
    margin-bottom: 0;
    font-size: 11px;
    line-height: 1.8;
    letter-spacing: 0.05em;
}

.columnItemList h3 {
    font-size: 16px;
}

/* .columnItemList .thum {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: 0.15s;
  margin-bottom: 15px;
  width: 100%;
  padding-top: 75%;
} */

ul.readers-comments {
    font-size: 14px;
    margin-bottom: 50px;
}

ul.readers-comments li {
    border: 1px solid #eee;
    margin-bottom: 10px;
    padding: 8px 16px;
    line-height: 1.5;
    box-shadow: 2px 2px 0 #444;
    border-right-color: #444;
    border-bottom-color: #444;
    display: inline-block;
    margin-right: 15px;
}

@media screen and (min-width: 540px) {
    .pcNone {
        display: none;
    }
}

@media screen and (max-width: 540px) {
    .columnItemList li {
        width: 100%;
        float: none;
        margin-right: 0;
        margin-bottom: 30px;
    }

    .columnSns {
        padding: 30px 0 0 0;
        border-bottom: none;
        margin-bottom: 100px;
    }

    .columnSns ul {
        margin-bottom: 45px;
    }

    .columnInner dd {
        font-size: 12px;
    }
}

.columnInner .detailSpecInfo dl {
    margin-bottom: 0;
}

.columnInner .detailSpecInfo li {
    margin-bottom: 0;
}

.columnItemList h4 {
    padding-left: 0;
    border-left: none;
}

.columnTable {
    font-size: 14px;
    overflow-x: scroll;
}

.columnTable tr {
    border-bottom: 1px solid #ddd;
}

.columnTable table {
    margin: 30px 0;
    width: 100%;
}

.columnTable th {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    font-size: 12px;
    padding: 0.2em 0.5em;
}

.columnTable td {
    font-size: 12px;
    padding: 0 0.5em;
    white-space: nowrap;
    padding: 0.2em 0.5em;
}

.columnTable th.center,
.columnTable td.center {
    text-align: center;
}

.balloonBox {
    overflow: hidden;
    margin-bottom: 40px;
}

.balloonBox p {
    margin-bottom: 20px;
}

.balloon {
    width: 100%;
    margin: 0 0 20px 0;
    overflow: hidden;
}

.balloon:last-child {
    margin-bottom: 0;
}

.balloon .faceicon {
    float: left;
    margin-right: -90px;
    width: 80px;
}

.balloon .faceicon img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    margin-bottom: 0;
}

.balloon .chatting {
    width: 100%;
}

.says {
    display: inline-block;
    position: relative;
    margin: 5px 0 0 105px;
    padding: 17px 13px;
    border-radius: 12px;
    background: #f2f2f2;
}

@media screen and (max-width: 540px) {
    .balloon .faceicon {
        float: left;
        margin-right: -60px;
        width: 50px;
    }

    .says {
        margin: 5px 0 0 75px;
        padding: 12px 13px;
    }
}

.character01 .says {
    color: #d88aa7;
}

.character02 .says {
    color: #93d3d0;
}

.says:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 18px;
    left: -24px;
    border: 12px solid transparent;
    border-right: 12px solid #f2f2f2;
}

.says p {
    margin: 0;
    padding: 0;
}

.shoppingBlock {
    margin-bottom: 3em;
}

.shoppingBlock .name {
    font-size: 14px;
    font-weight: bold;
    margin: 10px 0;
}

.shoppingBlock .sets {
    font-size: 14px;
    line-height: 1.6;
}

.shoppingBlock .price {
    text-align: right;
    font-size: 14px;
    line-height: 1.6;
}

.shoppingBlock .unitprice {
    font-size: 13px;
}

.shoppingBlock .unitprice::before {
    content: "@";
    margin-right: 0.2em;
    font-size: 12px;
}

.shoppingBlock .refered-photo {
    background-size: contain;
}

.columnInner .fullwidth-header-image-pc {
    margin-left: -150px;
    margin-right: -150px;
    margin-top: 60px;
    margin-bottom: 60px;
}

.columnInner h4+.fullwidth-header-image-pc {
    margin-top: -80px;
}

.columnInner .fullwidth-header-image-sp {
    margin: 60px -20px;
    display: none;
}

@media screen and (max-width: 1000px) {
    .columnInner .fullwidth-header-image-pc img {
        max-width: 100vw;
        margin-right: auto;
        margin-left: auto;
    }
}

@media screen and (max-width: 768px) {
    .columnInner .fullwidth-header-image-pc {
        margin-right: -20px;
        margin-left: -20px;
    }
}

@media screen and (max-width: 540px) {
    .columnInner .fullwidth-header-image-pc {
        display: none;
    }

    .columnInner .fullwidth-header-image-sp {
        display: block;
    }
}

.columnInner .stone-thumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.columnInner .stone-item {
    display: block;
    width: 12%;
    margin-bottom: 30px;
}

.columnInner .stone-item img {
    margin: 0;
}

.columnInner .stone-item .title {
    font-size: 11px;
    margin: 0.4em 0 0.2em;
    line-height: 1.5;
    font-weight: bold;
}

.columnInner .stone-item .spec {
    font-size: 10px;
    line-height: 1.5;
    margin: 0;
}

.stone-spec-item {
    display: flex;
    width: 24%;
}

.stone-spec-head {
    width: 40%;
    font-size: 13px;
    font-weight: bold;
}

.stone-spec-table {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 50px;
}

.stone-spec-stars {
    font-size: 18px;
}

@media screen and (max-width: 540px) {
    .columnInner .stone-item {
        width: 24%;
    }

    .stone-spec-item {
        display: flex;
        width: 48%;
    }
}

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

  column detail

----------------------------------------------------- */
.eventTop {
    margin-bottom: 80px;
}

.eventTop h3 {
    font-size: 22px;
    margin-bottom: 20px;
}

.pref-on-title {
    display: block;
    font-size: 16px;
}

.eventTop p {
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.eventTop .accordion-area li {
    background: #fafaed;
    border-radius: 10px;
}

.eventTop .accordion-area .title {
    background: #daeffe;
}

.eventTop .accordion-area li {
    background: #daeffe;
}

.eventTop .accordion-area .title {
    font-size: 12px;
    padding: 10px 25px;
    margin-bottom: 0;
    font-weight: bold;
}

.eventTop .accordion-area a {
    display: block;
    margin-top: 0.8em;
    font-size: 1.2em;
    background: #fff;
    padding: 0.5em;
    text-align: center;
}

.eventTop .accordion-area a:hover {
    opacity: 0.8;
}

.eventTop .accordion-area .box {
    padding: 10px 25px 10px 25px;
}

.eventTop .accordion-area .title span::before {
    content: "\f05a";
    font-family: "Font Awesome 5 Free";
    font-weight: 900 !important;
    font-weight: normal;
    font-size: 16px;
    position: relative;
    top: 1px;
    left: -7px;
}

.areaSearch {
    background: #f2f2f2;
    padding-bottom: 20px;
    margin-bottom: 80px;
}

.areaSearch h3 {
    font-size: 24px;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 600;
    position: relative;
    top: -12px;
    letter-spacing: 0.08em;
}

.areaSearch th {
    vertical-align: middle;
    font-size: 16px;
    padding-right: 30px;
}

.areaSearch th span {
    padding: 20px;
    background: #fff;
    border-radius: 6px;
}

.areaSearch li {
    float: left;
    width: 18%;
    margin-right: 2.5%;
    margin-bottom: 12px;
    font-size: 14px;
}

.areaSearch li:nth-child(5n) {
    margin-right: 0;
}

.topEvent.eventPage,
.topEvent.upcomEvent {
    background: #fff;
    padding-bottom: 0;
    margin-bottom: 80px;
}

.eventPage .eventList li {
    float: left;
    width: 31%;
    margin-right: 3.5%;
}

.eventPage .eventList li:nth-child(4n) {
    margin-right: 3.5%;
}

.eventPage .eventList li:nth-child(3n) {
    margin-right: 0;
}

.upcomEvent .eventList li {
    margin-bottom: 60px;
}

.eventPage .eventList li .img {
    display: block;
    width: 100%;
    padding-top: 75%;
}

.eventPage .eventList li p {
    font-size: 14px;
    margin-bottom: 5px;
}

.eventSummary {
    font-size: 14px;
}

.eventSummary tr {
    border-bottom: 1px solid #ddd;
}

.eventSummary table {
    margin: 30px 0;
    border-top: 1px solid #ddd;
    width: 100%;
}

.eventSummary th {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    padding-right: 25px;
    font-size: 12px;
    max-width: 20%;
    padding: 8px 30px 8px 0;
}

.eventSummary td {
    width: 80%;
    font-size: 12px;
}

.eventArchive {
    margin: 30px 0;
}

.eventArvhive-item {
    margin-bottom: 20px;
    position: relative;
}

.eventArchive-item .scheduleStatus {
    position: relative;
}

.eventArvhive-item .scheduleStatus {
    position: relative;
    margin-right: 10px;
}

.eventArvhive-item .date {
    display: inline-block;
    font-size: 14px;
}

.areaSearch .areaSearch-button {
    cursor: pointer;
    padding: 6px 0;
    border-radius: 5px;
    width: 100%;
    background: #fff;
    display: block;
    text-align: center;
    transition: 0.15s;
}

.areaSearch .areaSearch-button:hover {
    color: #0003;
}

.areaSearch input {
    display: none;
}

.areaSearch .check_box:checked+.label,
.areaSearch .areaSearch-button.active {
    background: #ff8d9c;
    cursor: default;
}

.areaSearch .check_box:checked+.label:hover,
.areaSearch .areaSearch-button.active:hover {
    color: #000;
}

.areaSearch .accordion-area .title {
    background: #fff;
    font-size: 14px;
}

@media screen and (min-width: 540px) {
    .areaSearch select {
        display: none;
    }

    .areaSearch .spAreaList {
        display: none;
    }
}

@media screen and (max-width: 540px) {
    .eventTop .accordion-area .title {
        font-size: 14px;
        line-height: 1.7;
    }

    .pcAreaList {
        display: none;
    }

    .topEvent.upcomEvent {
        margin-bottom: 0;
    }

    .topEvent.upcomEvent .columnPageNav .pageNav {
        margin-bottom: 40px !important;
    }

    .upcomEvent h3 span {
        display: none !important;
    }

    .eventTop h3 {
        text-align: center;
    }

    .eventPage .eventList {
        display: flex;
        padding-bottom: 15px;
    }

    .upcomEvent .eventList li {
        margin-bottom: 30px;
    }

    .eventPage .eventList li {
        min-width: 250px;
        width: 100%;
        margin-left: 20px;
        margin-right: 0;
        margin-bottom: 20px;
    }

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

    .areaSearch table {
        display: none;
    }

    .areaSearch {
        padding-bottom: 20px;
    }

    .areaSearch form {
        width: 100%;
        margin: 0 auto;
    }

    .areaSearch select {
        width: 100%;
        border: none;
        background: #f2f2f2;
        font-size: 14px;
    }

    .areaSearch .title {
        text-align: center;
    }

    .areaSearch .accordion-area .title {
        background: #f2f2f2;
    }

    .areaSearch .box {
        padding-bottom: 0;
    }

    .areaSearch .box li {
        width: 48%;
        margin-right: 4%;
        margin-bottom: 10px;
        float: left;
    }

    .areaSearch .box li:nth-child(2n) {
        margin-right: 0;
    }
}

.eventDetailTop .date {
    font-size: 10px;
    line-height: 1;
    margin-bottom: 10px;
}

.eventDetailTop h2 {
    font-size: 22px;
    line-height: 1.7;
    margin-bottom: 40px;
    letter-spacing: 0.05em;
}

.eventDetailTop h2 span {
    font-size: 12px;
    display: block;
    line-height: 1;
    margin-top: 7px;
}

.eventDetailTop {
    margin-bottom: 30px;
}

.eventDetailTopImg {
    max-width: 700px;
    width: 100%;
    margin: 0 auto 40px auto;
    text-align: left;
    height: 350px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.eventDate {
    margin-bottom: 60px;
}

.eventDate th {
    white-space: nowrap;
    padding-right: 25px;
    font-size: 12px;
    vertical-align: top;
    padding-bottom: 4px;
}

.eventDate th span {
    border-left: 3px solid #000;
    padding-left: 10px;
    font-weight: 500;
}

.eventDate td {
    font-size: 15px;
    vertical-align: top;
    padding-bottom: 10px;
}

@media screen and (max-width: 540px) {
    .eventDate th {
        line-height: 1.8;
    }

    .eventDate td {
        font-size: 14px;
        line-height: 1.8;
    }
}

.eventDate td a {
    color: #93d3d0;
}

.eventInner .tableContent {
    margin-bottom: 40px;
}

.eventContent {
    margin-bottom: 50px;
}

.eventContent p {
    font-size: 13px;
    line-height: 1.9;
    letter-spacing: 0.05em;
    margin-bottom: 25px;
}

.eventContent p:last-child {
    margin-right: 0;
}

.eventInner .recommendList {
    margin-bottom: 0;
}

.eventInner .eventTop {
    margin-bottom: 30px;
}

.eventInner .relatedArticle {
    margin-top: 70px;
    width: 100%;
}

.eventInner .hStyle01 span {
    font-size: 22px;
}

.eventInner .relatedArticle .img {
    width: 35%;
}

.eventInner .relatedArticle .txt {
    width: 60%;
}

.eventDate__weekday {
    display: inline-block;
    width: 2.4em;
    height: 2.4em;
    line-height: 2.4em;
    font-size: 0.8em;
    border-radius: 1.4em;
    margin: 0 3px;
    background: #eee;
    text-align: center;
}

.eventDate__saturday {
    background: #def4ff;
}

.eventDate__sunday {
    background: #ffe4e4;
}

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

  Ranking

----------------------------------------------------- */
.rankingTop {
    margin-bottom: 50px;
}

.rankingTop p {
    font-size: 14px;
    line-height: 1.8;
}

.rankPageSec {
    margin-bottom: 80px;
}

.rankingInner.rankPageSec {
    margin-bottom: 50px;
}

.rankPageSec h3 {
    font-size: 26px;
    margin-bottom: 10px;
}

.rankPageSec p {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.rankPageSec .rankingList {
    margin-bottom: 20px;
}

@media screen and (max-width: 540px) {
    .rankPageSec h3 {
        font-size: 20px;
        width: calc(100vw - 40px);
        margin-left: auto;
        margin-right: auto;
    }

    .rankPageSec .scBox {
        margin-bottom: 20px;
    }

    .rankPageSec .inner {
        width: 100%;
    }

    .rankPageSec p {
        margin-bottom: 20px;
        width: calc(100vw - 40px);
        margin-left: auto;
        margin-right: auto;
    }

    .rankPageSec h2 {
        width: calc(100vw - 40px);
        margin-left: auto;
        margin-right: auto;
    }

    .rankPageSec {
        margin-bottom: 35px;
    }

    .rankPageSec .btStyle01 {
        margin-left: 5%;
    }

    .rankPageSec:nth-child(odd) {
        background: #fafafa;
        padding: 35px 0;
    }

    .rankPageSec.rankingInner:nth-child(odd) {
        background: #fff;
        padding: 0;
    }
}

.rankingInner li {
    margin-bottom: 40px;
}

.rankPageSec p.ranking-score {
    margin: 6px 0;
    font-size: 13px;
}

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

  Shopping

----------------------------------------------------- */
.shoppingMain {
    margin-bottom: 50px;
}

.shoppingMain p {
    font-size: 14px;
    line-height: 1.8;
    max-width: 650px;
}

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

  Shopping

----------------------------------------------------- */
.pickupMain {
    margin-bottom: 50px;
}

.pickupMain p {
    font-size: 14px;
    line-height: 1.8;
    max-width: 650px;
}

.pickup-item {
    float: left;
}

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

  about

----------------------------------------------------- */
.aboutTop {
    margin-top: 70px;
    margin-bottom: 70px;
}

.aboutTop .txt {
    width: 60%;
    float: left;
    position: relative;
}

.aboutTop .img {
    width: 35%;
    float: right;
}

.aboutTop .txt .textInner {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(0);
    -webkit-transform: translateY(-50%) translateX(0);
}

.aboutTop h2 {
    font-size: 40px;
    line-height: 1.7;
    letter-spacing: 0.15em;
    margin-bottom: 40px;
}

.aboutTop p {
    font-size: 16px;
    line-height: 2.2;
    letter-spacing: 0.05em;
}

.aboutSec {
    margin-bottom: 120px;
}

.aboutSec .detailSpecInfo dd img {
    width: 60%;
}

@media screen and (max-width: 768px) {
    .aboutTop h2 {
        font-size: 32px;
    }
}

@media screen and (max-width: 540px) {
    .aboutSec {
        margin-bottom: 60px;
    }

    .aboutTop {
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .aboutTop .txt {
        width: 100%;
        float: none;
        margin-bottom: 20px;
    }

    .aboutTop .img {
        width: 80%;
        float: none;
        margin: 0 auto 40px auto;
    }

    .aboutTop .txt .textInner {
        position: relative;
        top: auto;
        transform: none;
        -webkit-transform: none;
    }

    .aboutTop h2 {
        font-size: 22px;
        line-height: 1.5;
        letter-spacing: 0.05em;
        margin-bottom: 10px;
    }

    .aboutTop p {
        font-size: 12px;
        line-height: 1.8;
    }
}

.aboutSec h3 {
    text-align: center;
    margin-bottom: 40px;
    font-weight: 500;
    font-size: 28px;
    letter-spacing: 0.05em;
}

.aboutEditor {
    position: relative;
}

.charaImg01 {
    position: absolute;
    width: 170px;
    left: -200px;
    top: 0;
}

.charaImg02 {
    position: absolute;
    width: 170px;
    right: -200px;
    top: 0;
}

.aboutEditor li {
    width: 31%;
    float: left;
    margin-right: 3.5%;
    background: #fafaed;
    font-size: 14px;
    line-height: 1.8;
    padding: 30px 40px;
}

@media screen and (max-width: 768px) {
    .charaImg01 {
        position: absolute;
        width: 90px;
        left: -26px;
        top: 0;
    }

    .charaImg02 {
        position: absolute;
        width: 90px;
        right: -20px;
        top: 0;
    }
}

@media screen and (max-width: 540px) {
    .charaImg01 {
        position: absolute;
        width: 80px;
        left: -30px;
        top: 30px;
    }

    .charaImg02 {
        position: absolute;
        width: 80px;
        right: -30px;
        top: 30px;
    }

    .aboutSec h3 {
        font-weight: normal;
        font-size: 22px;
    }

    .aboutEditor li {
        width: 100%;
        float: none;
        margin-right: 0;
        margin-bottom: 20px;
        padding: 20px 30px;
    }
}

.aboutEditor .num {
    text-align: center;
    margin-bottom: 10px;
    font-size: 30px;
}

.aboutEditor .num span {
    border-bottom: 2px solid #000;
    padding-bottom: 8px;
}

.aboutEditor h4 {
    font-size: 22px;
    margin-bottom: 15px;
    text-align: center;
}

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

.aboutCharaList th {
    vertical-align: middle;
    width: 20%;
    padding-bottom: 30px;
}

.aboutCharaList th img {
    width: 80%;
}

.aboutCharaList td {
    font-size: 14px;
    line-height: 1.8;
    padding-left: 40px;
    vertical-align: middle;
    padding-bottom: 30px;
    padding-left: 0;
}

.aboutCharaList h4 {
    font-size: 22px;
    line-height: 1.8;
    margin-bottom: 10px;
}

.aboutPoint .detailSpecInfo p {
    margin-top: 10px;
}

.mbSec {
    margin-bottom: 20px !important;
}

.aboutPoint .detailSpecInfo {
    margin-bottom: 50px;
}

.aboutPoint h4 {
    font-size: 26px;
    margin-bottom: 10px;
    letter-spacing: 0.08em;
}

.aboutPoint p {
    font-size: 12px;
    line-height: 1.8;
}

.aboutPointList dt {
    border-top: 1px dashed #000;
    padding-top: 50px;
}

.aboutPointList dd {
    margin-bottom: 50px;
}

.reaf00 {
    width: 14px;
    height: auto;
    display: inline-block;
    margin: 0 3px;
    position: relative;
    top: -2px;
}

.aboutSupport p {
    font-size: 14px;
    margin-bottom: 30px;
}

.aboutSupport h4 {
    font-size: 22px;
    margin-bottom: 10px;
}

.aboutSupport a.external-link {
    color: #ff8d9c;
    border-bottom: 1px dashed #ff8d9c;
}

.aboutSupport a.external-link::after {
    content: "\f35d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900 !important;
    margin-left: 6px;
    font-weight: normal;
}

.aboutSupport a:hover {
    opacity: 0.3;
}

@media screen and (max-width: 540px) {
    .aboutSec .detailSpecInfo dt {
        margin-bottom: 5px;
    }

    .aboutPointList dt {
        padding-top: 30px;
    }

    .aboutPointList dd {
        margin-bottom: 30px;
    }

    .aboutCharaList h4 {
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 6px;
    }

    .reaf00 {
        top: -4px;
    }

    .aboutPoint li {
        margin-bottom: 20px;
    }

    .aboutPoint .detailSpecInfo {
        margin-bottom: 10px;
    }

    .aboutCharaList,
    .aboutCharaList tr,
    .aboutCharaList td,
    .aboutCharaList th,
    .aboutCharaList tbody {
        width: 100%;
        display: block;
    }

    .aboutPoint h4 {
        font-size: 18px;
        margin-bottom: 5px;
        letter-spacing: 0.08em;
    }

    .aboutPoint p,
    .aboutPointList p {
        font-size: 14px;
        line-height: 1.8;
    }

    .aboutPoint dd p {
        font-size: 12px;
    }

    .aboutPointList p {
        font-size: 14px !important;
        line-height: 1.8;
    }

    .aboutCharaList th {
        text-align: center;
        padding-bottom: 10px;
    }

    .aboutCharaList th img {
        width: 160px;
        height: auto;
    }
}

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

  my favorite

----------------------------------------------------- */
.sort-filter {
    margin: 30px 0;
    font-size: 14px;
}

.sort-filter-item {
    margin-right: 20px;
}

.sort-filter-item.current {
    color: #ff8d9c;
}

.mypage-form {
    width: calc(100vw - 40px);
    max-width: 800px;
    margin: 0 auto 100px;
}

.refere-src {
    position: absolute;
    bottom: 8px;
    left: 10px;
    font-size: 8px;
    line-height: 12px;
    z-index: 4;
    color: #0008;
}

.refere-src a {
    border: 0;
    color: #0008;
    transition: 0.15s;
    padding: 3px;
}

.refere-src a:hover {
    background: #000;
    color: #fff;
}

.no-advertisement {
    display: block;
    padding: 0.6em;
    background: #fff;
    margin-bottom: 60px;
    text-align: center;
    color: #444;
    font-size: 0.9em;
    font-weight: bold;
    border: 2px solid #444;
    font-family: "Josefin Sans";
}

.no-advertisement .limit {
    font-weight: normal;
    font-size: 0.9em;
    line-height: 1.8;
}