@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/*** パンくずリスト非表示 ***/
#breadcrumb {
		display: none;	
}	


// 絞り込み検索のCSS

// variables
$wrap: 560px;
$gapY: 20px;

// reset
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}

// 共通
.filters, .products {
  display: flex;
  flex-wrap: wrap;
  margin: $gapY auto 0;
  max-width: $wrap;
  width: 100%;
  & > li {
    margin: 10px;
  }
}

// ボタン
.filters {
  button {
    appearance: none;
    background: #4082f0;
    border: none;
    border-radius: 30px;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.59);
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    line-height: 15px;
    min-width: 120px;
    padding: 1em;
    transform: translateY(-2px);
    transition: all 0.2s;
    &.active,
    &:hover {
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.79);
      transform: none;
    }
    &.active {
      background: #15366d;
    }
  }
}

// 商品部分
.products {
  border-top: 1px solid #f6f6f6;
  padding-top: 20px;
  & > li {
    width: calc((100% - (10px * 6)) / 3);
  }
  &__box {
    border: 1px solid #cacaca;
    display: flex;
    flex-direction: column;
    padding: 8px;
    &--title {
      color: #444;
      font-size: 0.9em;
      margin-top: 10px;
    }
    &--tags {
      font-size: 10px;
      li {
        color: #888;
        display: inline-block;
        &::before {
          color: #4082f0;
          content: "#";
          opacity: 0.5;
          padding-right: 2px;
        }
        &:not(:first-child) {
          margin-left: 6px;
        }
      }
    }
  }
}

.products h4 {
	padding-top: 1em;
}

// 表示/非表示
.js-item {
  list-style: none; 
  animation: fadeInItem 0.5s both;
  will-change: opacity, width;
  &.fadeOut {
    animation: fadeOutItem 0.5s both;
    .products__box {
      display: none;
    }
  }
}

.filters{
  display: flex;
  flex-wrap: wrap;
  max-width: 560px;
  width: 100%;
}

.filters-title {
  background-color: #959284;
  color: white;
  padding: 10px 10px;
}

.filters > li {
  margin: 10px;
  list-style: none;
}

.products > li {
  list-style: none; 
}

.filters button {
  appearance: none;
  border: 2px solid #EECF03;
  padding: 0.5em;
  transform: translateY(-2px);
  transition: all 0.2s;
}
.filters button.active, .filters button:hover {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.79);
  transform: none;
}
.filters button.active {
  background: #EECF03;
}

.products__box {
  margin-top: 1em;
}

.js-item.fadeOut {
  animation: fadeOutItem 0.5s both;
}

.js-item.fadeOut .products__box {
  display: none;
}

@keyframes fadeInItem {
  0% {
    margin: 0;
    opacity: 0;
    padding: 0;
    width: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOutItem {
  0% {
    opacity: 1;
  }
  100% {
    display: none;
    margin: 0;
    opacity: 0;
    padding: 0;
    width: 0;
  }
}


// トップページのスライドのCSS
	     .swiper {
        width: 772px;
		   height: 348.05px;
      }

.top-page-article {
	display:flex;
	height: 342.05px;
}

.swiper-slide {
 position:relative;
 border: 1px #eee solid;
 box-shadow: 2px 2px 12px rgb(232 233 234 / 75%);
 border-radius: 8px;
 margin: 0 10px 12px 0;
			  padding-bottom: 10px;
	height:330.05px;
       width: 280px;
		  border-radius: 8px;
}

.swiper-slide-header {
position:relative;
	  width: 280px;
}

.swiper-slide-header img{
 	border-radius: 8px 8px 0 0;
}


.swiper-slide-rank {
position:absolute;
    font-weight: bold;
    font-size: 20px;
    position: absolute;
    background: #fff;
    padding: 5px 10px;
    margin: 1px;
    border-radius: 50px;
    line-height: 20px;
	 box-shadow: 2px 2px 12px rgb(232 233 234 / 75%);
}

.swiper-slide-rank.rank1 {
		color: #C3BD7F;
}


.swiper-slide-rank.rank2 {
		color: #B4B4B4;
}

.swiper-slide-rank.rank3 {
		    color: #C3977F;
}

.swiper-slide-rank.rank4 {
		    color: black;
}

.swiper-slide-rank.rank5 {
		    color: black;
}

      .swiper-slide img {
        display: block;
		      width: 100%;
      }

.swiper-slide-main {
	display: flex;
	    padding: 10px 10px 0 10px;
	width: 100%;
}

.swiper-slide-icon-wrap {
	margin-right:10px;
}

.swiper-slide-rank-item-icon {
	height:50px !important;
	border-radius: 8px;
	object-fit: contain;
}

.swiper-slide-rank-item-footer {
    position: relative;
    margin: 10px;
	  width: 260px;
}

.swiper-slide-rank-item-footer a {
    color: #fff!important;
    text-decoration: none!important;
}

.swiper-slide-rank-item-footer-link {
	display: flex;
   flex-direction: column;
}

/*** ボタンをぷるんぷるんと震わせる ***/
.swell-block-button__link {
  -webkit-background-clip: padding-box  !important;
  background-clip: padding-box  !important;
  -webkit-transition: -webkit-box-shadow .3s  !important;
  transition: box-shadow .3s  !important;
}

.swell-block-button__link:hover, .swell-block-button__link:focus  {
  -webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8)  !important;
  transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8)  !important;
  -webkit-animation: gelatine 0.5s 1  !important;
  animation: gelatine 0.5s 1  !important;
}

.swell-block-button__link:active {
  background: #4ecdc4  !important;
  -webkit-transition-duration: 0  !important;
  transition-duration: 0  !important;
}

@keyframes gelatine {
  from, to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }

  25% {
    -webkit-transform: scale(0.9, 1.1);
    transform: scale(0.9, 1.1);
  }

  50% {
    -webkit-transform: scale(1.1, 0.9);
    transform: scale(1.1, 0.9);
  }

  75% {
    -webkit-transform: scale(0.95, 1.05);
    transform: scale(0.95, 1.05);
  }

  from, to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }

  25% {
    -webkit-transform: scale(0.9, 1.1);
    transform: scale(0.9, 1.1);
  }

  50% {
    -webkit-transform: scale(1.1, 0.9);
    transform: scale(1.1, 0.9);
  }

  75% {
    -webkit-transform: scale(0.95, 1.05);
    transform: scale(0.95, 1.05);
  }
}
@-webkit-keyframes gelatine {
  from, to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }

  25% {
    -webkit-transform: scale(0.9, 1.1);
    transform: scale(0.9, 1.1);
  }

  50% {
    -webkit-transform: scale(1.1, 0.9);
    transform: scale(1.1, 0.9);
  }

  75% {
    -webkit-transform: scale(0.95, 1.05);
    transform: scale(0.95, 1.05);
  }

  from, to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }

  25% {
    -webkit-transform: scale(0.9, 1.1);
    transform: scale(0.9, 1.1);
  }

  50% {
    -webkit-transform: scale(1.1, 0.9);
    transform: scale(1.1, 0.9);
  }

  75% {
    -webkit-transform: scale(0.95, 1.05);
    transform: scale(0.95, 1.05);
  }
}

/* ------------------------------------------------------------
診断ジェネレーター作成プラグイン用style
------------------------------------------------------------*/
.diagnosis-wrap .question{
	margin-bottom:1.5em;
	padding: 1.5em;
    background-color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-left: 5px solid #4ecdc4;
    position: relative;
}
.diagnosis-wrap .question::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 16px 16px 0;
    border-style: solid;
    border-color: #fff #fff #e1e1e1 #e1e1e1;
    background: #e1e1e1;
    box-shadow: -1px 1px 1px rgba(0,0,0,0.05);
}
.diagnosis-wrap .question .qcontents{
	margin-bottom:.5em;
	font-weight:bold;
}
.diagnosis-wrap .question .qselect span{
	display:block;
}
.diagnosis-wrap .question .qselect span input{
	margin:0 5px;
}
.diagnosis-wrap .submit input{
	padding:1em;
	width:300px;
	max-width:80%;
	margin-bottom:1em;
	background:#4ecdc4;
	color:white;
}

.diagnosis-form .question {
    margin: 20px 0 20px 0 !important;
}
.diagnosis-form #diagnosis-name {
	background: white;
}
.submit {
    text-align: center;
}