@charset "UTF-8";

/* --------------------------------------------------------------------
	import
--------------------------------------------------------------------- */

@import url(/cms/css/reset.css);			/* リセットCSS */
@import url(base_ph3.css);      /* ヘッダーフッター */

/* @import url(layout/s_lmr.css);	基本レイアウト */
/* @import url(common.css);		共通 */
/* @import url(sidebox.css);		サイドボックス */
/* @import url(category.css);		カテゴリ */
/* @import url(goods.css);			商品 */
/* @import url(order.css);			注文 */
/* @import url(customer.css);		お客様ページ */
/* @import url(etc.css);			その他機能 */
/* @import url(quickorder.css);	クイックオーダー */
/* @import url(userreview.css);	ユーザーレビュー */
/* @import url(core.css);			(Javascript制御部分) */
/* @import url(skin.css);			(Javascript制御部分) */
/* @import url(dropframe.css);		(Javascript制御部分) */
/* @import url(user.css);			ユーザー定義デザイン */
/* @import url(freepage.css); 		フリーページ */
/* @import url(ui-lightness/jquery-ui-1.8.14.custom.css); jQuery-UI */

/* @import url(cms.css);			CMS */

/* font
-------------------------------------- */
@font-face {
  font-family: 'NotoSansJP';
  src: url(/cms/conomichi/font/NotoSansJP-Medium.woff) format('woff'),
           url(/cms/conomichi/font/NotoSansJP-Medium.ttf) format('ttf');
  font-weight: 500;
  font-style: normal;
}
/* bold */
@font-face {
  font-family: 'NotoSansJP';
  src: url(/cms/conomichi/font/NotoSansJP-Bold.woff) format('woff'),
           url(/cms/conomichi/font/NotoSansJP-Bold.ttf) format('ttf');
  font-weight: 700;
  font-style: normal;
}

/* レスポンシブ
-------------------------------------- */
body {
  width: 100%;
}
@media screen and (max-width: 999px) {
	body {
		width: 1000px;
		overflow-x: scroll;
	}
}
@media screen and (max-width: 767px) {
	body { width: 100%; overflow-x: auto;}
}

/* slider 
-------------------------------------- */
/* サークルアニメ */
/* circle-control */
.mainVisual .circle-control {
  display: block;
  height: 30px;
  position: relative;
  width: 30px;
  z-index: 2;
}

.mainVisual .circle-control__box {
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}

.mainVisual .circle-control__box::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #7E7E7E;
  border-radius: 50%;
  z-index: 0;
}

.mainVisual .circle-control__svg {
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  transform: scaleX(1) rotate(-90deg);
  transform-origin: center;
  z-index: 1;
}

.mainVisual .circle-control__circle {
  stroke:#000;
  stroke-width: 2;
  fill: transparent;
  r: 14px;
  cx: 15.5px;
  cy: 15.5px;
  stroke-dasharray: 437px;
  stroke-dashoffset:437px;
}

.is-active .circle-control__circle {
  -webkit-animation: circle_active 23s linear 0s 1 normal both;
  animation: circle_active 23s linear 0s 1 normal both;
}

.is-change .circle-control__svg {
  transform: scaleX(-1) rotate(-90deg);
}

.is-change .circle-control__circle {
  -webkit-animation: circle_change .75s cubic-bezier(.19,1,.22,1) 0s 1 normal both;
  animation: circle_change .75s cubic-bezier(.19,1,.22,1) 0s 1 normal both;
}

.mainVisual .circle-control__number {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
}

.mainVisual .circle-control__number-inner {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  line-height: 12px;
  text-align: left;
  display: block;
}

.fixed-application-button-content {
  position: fixed;
  bottom: 100px;
  right: 18px;
  z-index: 1;
}

.fixed-application-button-content.is-hide {
  display: none !important;
}

.fixed-application-button-content__link {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 98px;
  height: 100px;
  background-image: url(/cms/conomichi/img/common/circle_yellow_bg.png);
  background-position: center center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: transform 0.5s ease 0s;
  will-change: transform;
  overflow: hidden;
}

.fixed-application-button-content__link:hover {
  background-image: url(/cms/conomichi/img/common/circle_black_bg.png);
  transform: scale(1.1939);
  opacity: 1;
}

.fixed-application-button-content__link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 129px;
  height: 129px;
  background-image: url(/cms/conomichi/img/common/circle_line_ring.png);
  background-position: center center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation-name: rotation;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  margin-top: -64.5px;
  margin-left: -64.5px;
}

.fixed-application-button-content__link:hover::before {
  background-image: url(/cms/conomichi/img/common/circle_line_ring_yellow.png);
}

.fixed-application-button-content__text {
  position: relative;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
  z-index: 2;
}

.fixed-application-button-content__link:hover .fixed-application-button-content__text {
  color: #F0C855;
}

@media screen and (max-width: 767px) {
  .fixed-application-button-content {
    bottom: 20px;
    right: 10px;
  }

  .fixed-application-button-content__link {
    width: 80px;
    height: 80px;
  }

  .fixed-application-button-content__link::before {
    width: 106px;
    height: 106px;
    margin-top: -53px;
    margin-left: -53px;
  }

  .fixed-application-button-content__text {
    font-size: 13px;
    line-height: 16px;
  }
}

/* keyframes */
@-webkit-keyframes circle_active {
	0% {
			stroke-dashoffset: 437px
	}

	to {
			stroke-dashoffset: 0px
	}
}

@keyframes circle_active {
	0% {
			stroke-dashoffset: 437px
	}

	to {
			stroke-dashoffset: 0px
	}
}

@-webkit-keyframes circle_change {
	0% {
			stroke-dashoffset: 0px
	}

	to {
			stroke-dashoffset: 437px
	}
}

@keyframes circle_change {
	0% {
			stroke-dashoffset: 0px
	}

	to {
			stroke-dashoffset: 437px
	}
}

@-webkit-keyframes circle_active_sp {
	0% {
			stroke-dashoffset: 330px
	}

	to {
			stroke-dashoffset: 0px
	}
}

@keyframes circle_active_sp {
	0% {
			stroke-dashoffset: 330px
	}

	to {
			stroke-dashoffset: 0px
	}
}

@-webkit-keyframes circle_change_sp {
	0% {
			stroke-dashoffset: 0px
	}

	to {
			stroke-dashoffset: 330px
	}
}

@keyframes circle_change_sp {
	0% {
			stroke-dashoffset: 0px
	}

	to {
			stroke-dashoffset: 330px
	}
}

/* rotation（回転） */
@keyframes rotation {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 横に流れていくアニメーション */
@keyframes infoAnimation {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}