@charset "UTF-8";
article {
  letter-spacing: .1rem;
}
.pc_only {
  display: none;
}
.sp_only {
  display: block;
}
.isOtherDevice .pc_only {
  display: block;
}
.isOtherDevice .sp_only {
  display: none;
}

#container a:hover{
	text-decoration: none;
}

#breadcrumb {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}
#wedding.ranking .gray {
  background-color: #f7f7f7
}
#wedding.ranking .blue {
  background-color: #dff4f7;
}
#wedding.ranking section {
  padding: 60px 0;
}
.isOtherDevice #wedding.ranking section {
  padding: 90px 0;
}
#wedding.ranking .inner {
  padding: 0 3%;
}
.isOtherDevice #wedding.ranking .inner {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}
#wedding.ranking h2 {
  font-size: 2.4rem;
  text-align: center;
  font-weight: bold;
  margin-bottom: 30px;
}
#wedding.ranking h2 span {
  font-size: 1.5rem;
  display: block;
}
#wedding.ranking h3 {
  font-weight: bold;
}
#wedding.ranking .pic {
  margin-bottom: 3%;
}
#wedding.ranking .txt {
  font-size: 1.2rem;
}
/*--------------------------------
button
----------------------------------*/
#wedding.ranking .button {
  width: 80%;
  max-width: 480px;
  margin: 30px auto;
  position: relative;
}
#wedding.ranking .button a {
  display: flex;
  align-items: center;
	text-align: center;
  justify-content: center;
  margin: 0 auto;
  padding: 1em 0;
  width: 100%;
  color: #fff;
  background-color: #333;
  transition: .3s;
  box-shadow: rgb(0 0 0 / 15%) 1.95px 1.95px 2.6px;
}
#wedding.ranking .button a:hover {
  background-color: #bbb;
}
#wedding.ranking .button:after {
  position: absolute;
  content: "";
  top: 40%;
  right: 3%;
  width: 5px;
  height: 5px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg);
}
/*--------------------------------
main_visual_area
----------------------------------*/
#wedding.ranking .main_visual_area {
  padding: 0 0 60px;
}
.isOtherDevice #wedding.ranking .main_visual_area {
  padding: 0 0 90px;
}
#wedding.ranking .main_visual_area .main_visual {
  background: url(/wedding/ranking/images/main_sp.jpg) no-repeat center center / cover;
  height: 250px;
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: flex-end;
  text-align: left;
  position: relative;
  padding: 0;
  margin-bottom: 30px;
}
#wedding.ranking .main_visual_area .title_block {
  padding: 5px 20px;
  background: rgba(255, 255, 255, 0.7);
  width: 100%;
}
#wedding.ranking .main_visual_area .title_block h1 {
  font-size: 2.4rem;
  font-weight: bold;
}
#wedding.ranking .main_visual_area .lead {
  width: 90%;
  margin: auto;
}
.isOtherDevice #wedding.ranking .main_visual_area .main_visual {
  background: url(/wedding/ranking/images/main.jpg)no-repeat center center / cover;
  height: 400px;
  width: 1200px;
  display: flex;
  margin: 0 auto 30px;
  justify-content: left;
  align-items: flex-end;
  text-align: left;
  position: relative;
  padding: 0;
}
.isOtherDevice #wedding.ranking .main_visual_area .title_block {
  padding: 10px 30px;
  background: rgba(255, 255, 255, 0.5);
  width: 100%;
}
.isOtherDevice #wedding.ranking .main_visual_area .title_block h1 {
  font-size: 5rem;
  font-weight: normal;
  line-height: 1.25;
}
.isOtherDevice #wedding.ranking .main_visual_area .lead {
  margin: auto;
  line-height: 1.8;
  font-size: 1.6rem;
}
/*--------------------------------
swiper
----------------------------------*/


#wedding.ranking .rank .swiper-wrapper  {
margin-bottom: 10px;
}

#wedding.ranking .rank .swiper-wrapper li {
	padding: 10px;
    background-color: #fff;
    box-shadow: rgb(0 0 0 / 15%) 1.95px 1.95px 2.6px;
	height: auto;
}

#wedding.ranking .swiper-container.inside_slider .swiper-pagination {
  position: relative;
  bottom: auto !important
}
#wedding.ranking .swiper-container.inside_slider .swiper-button-next:after, #wedding.ranking .swiper-container.inside_slider .swiper-container-rtl, #wedding.ranking .swiper-container.inside_slider .swiper-button-prev:after {
  content: none !important;
}
#wedding.ranking .swiper-container.inside_slider .swiper-button-prev, #wedding.ranking .swiper-container.inside_slider .swiper-button-next {
  position: absolute;
  top: 44%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  width: 40px;
  height: 48px;
  margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  background-size: 36px 48px;
}
#wedding.ranking .swiper-container.inside_slider .swiper-button-prev {
  left: -10px;
  background-image: url(/cmn/images/arrow.svg);
  transform: scale(-1, 1);
}
#wedding.ranking .swiper-container.inside_slider .swiper-button-next {
  right: -10px;
  background-image: url(/cmn/images/arrow.svg);
}
#wedding.ranking .swiper-container .swiper-pagination-bullet-active {
  background-color: #5fcad6;
}
#wedding.ranking .rank .swiper-wrapper li .item:before,#wedding.ranking .rank .swiper-wrapper li .item:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  border: 0
}
#wedding.ranking .rank .swiper-wrapper li .item:before{
  z-index: 2;
  font-size: 1.7rem;
  width: 28px;
  text-align: center;
  top: 10px
}
#wedding.ranking .rank .swiper-wrapper li .item:after{
  z-index: 1;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 56px 56px 0 0;
  border-color: #404040 transparent transparent
}
#wedding.ranking .rank .swiper-wrapper li:first-child .item:before{
  content: "1"
}
#wedding.ranking .rank .swiper-wrapper li:first-child .item:after{
  border-top-color: #9c8b47
}
#wedding.ranking .rank .swiper-wrapper li:nth-child(2) .item:before{
  content: "2"
}
#wedding.ranking .rank .swiper-wrapper li:nth-child(2) .item:after{
  border-top-color: #8b8b8b
}
#wedding.ranking .rank .swiper-wrapper li:nth-child(3) .item:before{
  content: "3"
}
#wedding.ranking .rank .swiper-wrapper li:nth-child(3) .item:after{
  border-top-color: #9c6b47
}
#wedding.ranking .rank .swiper-wrapper li:nth-child(4) .item:before{
  content: "4"
}
#wedding.ranking .rank .swiper-wrapper li:nth-child(5) .item:before{
  content: "5"
}

#wedding.ranking .rank .swiper-wrapper li:nth-child(6) .item:before{
  content: "6"
}

#wedding.ranking .rank .swiper-wrapper li:nth-child(7) .item:before{
  content: "7"
}

#wedding.ranking .rank .swiper-wrapper li:nth-child(8) .item:before{
  content: "8"
}

#wedding.ranking .rank .swiper-wrapper li:nth-child(9) .item:before{
  content: "9"
}

#wedding.ranking .rank .swiper-wrapper li:nth-child(10) .item:before{
  content: "10"
}



/*--------------------------------
campaign_area
----------------------------------*/
#wedding.ranking .campaign_area ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#wedding.ranking .campaign_area ul li {
  width: 48%;
  margin-bottom: 20px;
}
#wedding.ranking .campaign_area ul li:nth-of-type(n + 3) {
  margin-bottom: 0;
}
#wedding.ranking .campaign_area ul li .pic {
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px
}
.isOtherDevice #wedding.ranking .campaign_area ul li {
  width: 23%;
  margin-bottom: 0;
}
/*--------------------------------
catalogranking_area
----------------------------------*/
#wedding.ranking .catalogranking_area .bnr {
  width: 100%;
}
.isOtherDevice #wedding.ranking .catalogranking_area .bnr {
  width: 100%;
  max-width: 750px;
  margin: auto;
}
#wedding.ranking .catalogranking_area .pic {
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px
}
/*--------------------------------
category_area
----------------------------------*/
#wedding.ranking .category_area .inner ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}
#wedding.ranking .category_area .inner ul li {
  width: 48%;
  margin: 0 0 20px 0
}
.isOtherDevice #wedding.ranking .category_area .inner ul li {
  width: 23%;
}
#wedding.ranking .category_area .inner .category_top {
  margin-bottom: 20px
}
#wedding.ranking .category_area .inner .category_top .pic {
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.isOtherDevice #wedding.ranking .category_area .inner .category_top ul li .pic {
  margin-bottom: 3%;
}
#wedding.ranking .category_area .inner .category_bottom .name {
  height: 3em;
  display: flex;
  align-items: center;
}
#wedding.ranking .category_area .inner .category_bottom ul li {
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  border: 1px solid #f3f3f3;
}
#wedding.ranking .category_area .category_bottom ul li :nth-last-of-type(-n+2) {
  margin: 0
}
.isOtherDevice #wedding.ranking .category_area .inner ul li :nth-of-type(-n+5) {
  margin: 0;
}
#wedding.ranking .category_area .inner .category_bottom ul li a {
  display: flex !important;
  align-items: center;
  padding: 5px 10px;
  background-color: #fff;
}
#wedding.ranking .category_area .inner .category_bottom ul li span {
  width: 30px;
  display: block;
  margin-right: 10px
}
/*--------------------------------
recipient_area
----------------------------------*/
#wedding.ranking .recipient_area ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#wedding.ranking .recipient_area ul li {
  width: 48%;
  margin-bottom: 20px;
}
.isOtherDevice #wedding.ranking .recipient_area ul li {
  width: 23%;
  margin-bottom: 0;
}
#wedding.ranking .recipient_area ul li:nth-of-type(n + 3) {
  margin-bottom: 0;
}
#wedding.ranking .recipient_area ul li .pic {
  box-shadow: rgb(0 0 0 / 15%) 1.95px 1.95px 2.6px;
}
/*--------------------------------
brand_area
----------------------------------*/
#wedding.ranking .brand_area ul {
  display: flex;
  flex-wrap: wrap;
}
#wedding.ranking .brand_area ul li {
  width: 32%;
  margin: 0 2% 20px 0;
}
.isOtherDevice #wedding.ranking .brand_area ul li {
  width: 18%;
  margin: 0 2% 20px 0;
}
#wedding.ranking .brand_area ul li p {
  margin-bottom: 0;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
#wedding.ranking .brand_area ul li:nth-of-type(3n) {
  margin: 0 0 20px 0;
}
.isOtherDevice #wedding.ranking .brand_area ul li:nth-of-type(3n) {
  margin: 0 2% 20px 0;
}
/*--------------------------------
price_area
----------------------------------*/
#wedding.ranking .price_area ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
#wedding.ranking .price_area ul li {
  width: 48%;
  margin: 0 0 20px 0;
  background-color: #fff;
  box-shadow: rgb(0 0 0 / 15%) 1.95px 1.95px 2.6px;
  border: 1px solid #f3f3f3;
}
#wedding.ranking .price_area ul li:nth-of-type(n + 7) {
  margin: 0;
}
#wedding.ranking .price_area ul li a {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.isOtherDevice #wedding.ranking .price_area ul li {
  width: 23%;
}
.isOtherDevice #wedding.ranking .price_area ul li:nth-of-type(n + 7) {
  margin: 0 0 20px 0;
}
.isOtherDevice #wedding.ranking .price_area ul li:nth-of-type(n + 5) {
  margin: 0;
}
/*--------------------------------
itemlist_area
----------------------------------*/
#wedding.ranking .itemlist_area .pic {
/*  box-shadow: rgb(0 0 0 / 15%) 1.95px 1.95px 2.6px;*/
}
#wedding.ranking .itemlist_area .item .name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden
}
#wedding.ranking .itemlist_area .item .price {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-size: 1rem;
}
#wedding.ranking .itemlist_area .item .price span {
  font-weight: bold;
  font-size: 1.5rem;
}
/*--------------------------------
service_area
----------------------------------*/
#wedding.ranking .popular_service_area .inner ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#wedding.ranking .popular_service_area .inner ul li {
    width: 48%;
}
#wedding.ranking .popular_service_area .inner ul li:nth-of-type(n + 3){
    margin-top: 20px;
}
#wedding.ranking .popular_service_area .inner ul li img {
    box-shadow: rgba(0, 0, 0, .15) 1.95px 1.95px 2.6px
}
#wedding.ranking .popular_service_area .inner ul li .name,
#wedding.ranking .popular_service_area .inner ul li .txt{
    margin-top: 5px;
}
/* ==========================================
	768~(tablet)
========================================== */
@media screen and (min-width:768px) { 
    #wedding.ranking .popular_service_area .inner ul li {
        width: 23%;
    }
    #wedding.ranking .popular_service_area .inner ul li:nth-of-type(n + 3){
        margin-top: 0;
    }
}
/*--------------------------------
manner_area
----------------------------------*/
#wedding.ranking .manner_area {
  padding: 60px 0;
}
/*.isOtherDevice #wedding.ranking .manner_area {
  padding: 0 0 90px;
}*/
#wedding.ranking .manner_area .bnr {
  width: 100%;
}
#wedding.ranking .manner_area .bnr .pic {
  box-shadow: rgb(0 0 0 / 15%) 1.95px 1.95px 2.6px;
}
.isOtherDevice #wedding.ranking .manner_area .bnr {
  width: 100%;
  max-width: 750px;
  margin: auto;
}