@charset "UTF-8";
/* ========================================================================
	Foundation - ファウンデーション
======================================================================== */
/*	Reset
-------------------------------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="submit"], input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
}
input[type="submit"]::-webkit-search-decoration, input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus, input[type="button"]::focus {
  outline-offset: -2px;
}

/*	ベース設定
-------------------------------------------------------- */
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  overflow-x: auto;
}

li {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* リンク設定
-------------------------------------------------------- */
a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  transition: .3s;
}

main {
  color: #212950;
}

picture {
  display: block;
}

/*
// Clearfix
@mixin clearfix {
	&:after {
	  content: "";
	  display: block;
	  clear: both;
	}
}

// Block Centering
@mixin block-centering($w) {
	display: block;
	width: $w;
	margin-right: auto;	
	margin-left: auto;
}

// Transition
@mixin transition($property:all, $value: 0.3s, $easing: ease) {
	transition: $property $value $easing;
}

// Hover
@mixin text-hover-lighten($c, $op:10%) {
	&:hover {
		color: lighten($c, $op);
		transition: all 0.3s ease;
	}
}

@mixin text-hover-darken($c, $op:20%) {
	&:hover {
		color: darken($c, $op);
		transition: all 0.3s ease;		
	}
}

@mixin bg-hover-lighten($bgc, $op:10%) {
	&:hover {
		background-color: lighten($bgc, $op);
		transition: all 0.3s ease;		
	}
}

@mixin bg-hover-darken($bgc, $op:10%) {
	&:hover {
		background-color: darken($bgc, $op);
		transition: all 0.3s ease;		
	}
}



// 文字詰め
@mixin kerning {
	font-feature-settings: "palt";
}

// サムネイルのマスク
@mixin mask-thumbnail($height) {
	position: relative;
	width: 100%;
	
	&:before {
		content: "";
		display: block;
		padding-top: $height;
	}
	
	& > div {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;		
	}

	img {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}

}

// ボックスシャドウ
@mixin box-shadow($x:0, $y:0, $blur:10px, $color: rgba(0,0,0,0.2)) {
	box-shadow: $x $y $blur $color;	
}

// テキストシャドウ
@mixin text-shadow($x:0, $y:0, $blur:10px, $color: rgba(0,0,0,0.5)) {
	text-shadow: $x $y $blur $color;	
}
*/
/* ========================================================================
	Layout - レイアウト
======================================================================== */
/*	aside
-------------------------------------------------------- */
.aside {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #efefef;
}
.aside__list {
  display: flex;
}
.aside__item {
  flex: 1;
}
.aside__link {
  display: block;
  padding: 0.8rem 0;
  text-align: center;
}
.aside__link .pic {
  width: 2.5rem;
  margin: 0 auto;
}
.aside__link .text {
  font-size: 1.2rem;
  color: #672F87;
  font-weight: 500;
}

/*	共通設定
-------------------------------------------------------- */
.container-padding {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

[class$="__container"] {
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (min-width: 811px) {
  .br-sp {
    display: none;
  }
}

@media only screen and (max-width: 810px) {
  .br-pc {
    display: none;
  }
}

@media only screen and (min-width: 811px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}
.title-base {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 2.8rem;
  letter-spacing: 0.05em;
  text-align: center;
  color: #672F87;
}

.subtitle-base {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  text-align: center;
  color: #672F87;
}

/* ========================================================================
	Object - オブジェクト
======================================================================== */
/*	TOPページ
-------------------------------------------------------- */
#top .achivement__container {
  text-align: center;
  font-family: "source-han-serif-japanese", serif;
  padding: 0 1.5rem;
}
#top .achivement__title {
  font-size: 2.6rem;
  font-weight: 500;
  margin-bottom: 1rem;
}
#top .achivement__subtitle {
  font-size: 1.8rem;
  font-weight: 500;
}
#top .achivement__pic {
  margin-top: 4rem;
}
#top .campaign {
  margin-top: 3rem;
}
#top .campaign__container {
  padding: 0 1.5rem;
  font-family: "Noto Sans JP", sans-serif;
}
#top .campaign__list {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#top .campaign__item {
  flex: 0 0 47%;
  margin-bottom: 2rem;
}
#top .campaign__link {
  display: block;
  margin-bottom: 0.5rem;
}
#top .campaign__subject {
  font-size: 1.5rem;
  font-weight: 700;
}
#top .campaign__text {
  font-size: 1.4rem;
}
#top .about__container {
  margin-top: 4rem;
  margin-bottom: 4rem;
  text-align: center;
  font-family: "source-han-serif-japanese", serif;
}
#top .about__title {
  font-size: 2.6rem;
  font-weight: 500;
}
#top .about__text {
  font-size: 1.8rem;
  font-weight: 500;
}
#top .about__button {
  margin-top: 1.5rem;
  padding: 0 1.5rem;
}
#top .about__link {
  display: block;
  width: 15rem;
  border: 1px solid #999;
  font-size: 1.6rem;
  text-align: center;
  line-height: 2;
  margin-left: auto;
  position: relative;
}
#top .about__link i {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
#top .about h2.about__title {
  line-height: 1.6;
  margin-bottom: 0.5rem;
}
#top .ranking {
  background-color: #F1F1F1;
  padding: 3rem 1.5rem;
}
#top .ranking__list {
  margin-top: 2rem;
}
#top .ranking__item {
  margin-bottom: 3rem;
  background-color: white;
  position: relative;
}
#top .ranking__item::after {
  position: absolute;
  top: 0;
  left: 0;
  color: #672F87;
  font-size: 6rem;
  font-family: "source-han-serif-japanese", serif;
  transform: translateY(-50%);
}
#top .ranking__item:nth-child(1)::after {
  content: "1";
}
#top .ranking__item:nth-child(2)::after {
  content: "2";
}
#top .ranking__item:nth-child(3)::after {
  content: "3";
}
#top .ranking__item:last-child {
  margin-bottom: 0;
}
#top .ranking__box1 {
  display: flex;
  padding: 1.5rem;
}
#top .ranking .pic {
  flex: 0 0 10rem;
}
#top .ranking .txt {
  flex: 1;
  font-family: "source-han-serif-japanese", serif;
}
#top .ranking .catch {
  font-size: 1.6rem;
  font-weight: 500;
}
#top .ranking .name {
  font-size: 1.4rem;
  font-weight: 500;
  margin-top: 0.8rem;
}
#top .ranking .description {
  font-size: 1.2rem;
  margin-top: 0.8rem;
}
#top .ranking__box2 {
  display: flex;
  text-align: center;
  font-size: 1.6rem;
  line-height: 2;
}
#top .ranking .price {
  flex: 0 0 50%;
  background-color: #D7CEDC;
  font-family: "source-han-serif-japanese", serif;
}
#top .ranking .link {
  flex: 0 0 50%;
  background-color: #885EA1;
  color: white;
}
#top .lineup__container {
  margin-top: 3rem;
  padding: 0 1.5rem;
}
#top .lineup__list {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-family: "source-han-serif-japanese", serif;
}
#top .lineup__item {
  flex: 0 0 47%;
  margin-bottom: 2rem;
}
#top .lineup__link {
  display: block;
}
#top .lineup__link .tagbox {
  display: flex;
  justify-content: space-around;
  margin-top: 0.3rem;
}
#top .lineup__link .tag {
  flex: 0 0 45%;
  border: 1px solid #672F87;
  border-radius: 2px;
  color: #672F87;
  text-align: center;
  padding: 0.2rem 0;
  font-size: 1.2rem;
}
#top .lineup__link .catch {
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 0.5rem;
}
#top .lineup__link .name {
  font-size: 1.4rem;
  margin-top: 0.5rem;
}
#top .lineup__link .price {
  font-size: 1.4rem;
  text-align: right;
}
#top .voice {
  margin-top: 5rem;
  margin-bottom: 5rem;
}
#top .voice__container {
  padding: 0 0 0 1.5rem;
}
#top .voice .slick-list {
  padding: 0 30% 0 0 !important;
  overflow: visible;
}
#top .voice__list {
  margin-top: 2rem;
  overflow-x: clip;
}
#top .voice li {
  margin: 0 0.5%;
}
#top .voice__item {
  position: relative;
}
#top .voice .slick-slide {
  margin: 0 0.5%;
}
#top .voice__txt {
  position: absolute;
  bottom: 0;
  right: -2rem;
  width: 95%;
  background-color: rgba(242, 242, 242, 0.6);
  padding: 0.8rem 0.6rem;
  transform: translateY(50%);
}
#top .voice__txt .subject {
  font-size: 1.5rem;
  font-family: "source-han-serif-japanese", serif;
  font-weight: 600;
}
#top .voice__txt .tag {
  font-size: 1.2rem;
  color: white;
  background-color: #672F87;
  display: inline-block;
  padding: 0.3rem 1rem;
  border-radius: 3px;
  margin: 0.3rem 0;
}
#top .voice__txt .product {
  font-size: 1.2rem;
  color: #672F87;
}
#top .voice__button {
  margin-top: 8.5rem;
  padding: 0 1.5rem;
}
#top .voice__link {
  display: block;
  width: 15rem;
  border: 1px solid #999;
  font-size: 1.6rem;
  text-align: center;
  line-height: 2;
  margin-left: auto;
  position: relative;
}
#top .voice__link i {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
#top .topics__button {
  margin-top: 1.5rem;
  padding: 0 1.5rem;
}
#top .topics__link {
  display: block;
  width: 15rem;
  border: 1px solid #999;
  font-size: 1.6rem;
  text-align: center;
  line-height: 2;
  margin-left: auto;
  position: relative;
}
#top .topics__link i {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

#top {
  margin-bottom: 10rem;
}

.cation {
  margin-top: 10rem;
  padding: 0 1.5rem;
}

/*# sourceMappingURL=style.css.map */