@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

:root {
	--base-color: #0e211f;
	--base-inverse-color: #fff;
	--primary-color: #2cee0e;
	--primary-inverse-color: #fff;
	--content-space: 1rem;
}

@media screen and (min-width:900px) {
	:root {
		--content-space: 4rem;
	}

	@keyframes animation1 {
		0% {
			left: -200px;
		}

		100% {
			left: 0px;
		}
	}

	@keyframes opa1 {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes jump1 {

		0%,
		80%,
		100% {
			transform: translateX(-50%) translateY(0);
		}

		90% {
			transform: translateX(-50%) translateY(-10px);
		}
	}

	body * {
		box-sizing: border-box;
	}

	html,
	body {
		font-size: 13px;

	}


	@media screen and (min-width:900px) {

		html,
		body {
			font-size: 15px;
		}

	}




	body {
		margin: 0;
		padding: 0;
		font-family: "Noto Serif JP", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
		/*フォント種類（ゴシック）*/
		font-optical-sizing: auto;
		font-style: normal;
		-webkit-text-size-adjust: none;
		background: var(--base-color);
		/*背景色。css冒頭のbase-colorを読み込みます。*/
		color: var(--base-inverse-color);
		/*文字色。css冒頭のbase-inverse-colorを読み込みます。*/
		line-height: 2;
		/*行間*/
		overflow-x: hidden;
	}

	/*リセット*/
	figure {
		margin: 0;
	}

	dd {
		margin: 0;
	}

	nav,
	ul,
	li,
	ol {
		margin: 0;
		padding: 0;
	}

	nav ul {
		list-style: none;
	}

	/*table全般の設定*/
	table {
		border-collapse: collapse;
	}

	/*画像全般の設定*/
	img {
		border: none;
		max-width: 100%;
		height: auto;
		vertical-align: middle;
	}

	/*videoタグ*/
	video {
		max-width: 100%;
	}

	/*iframeタグ*/
	iframe {
		width: 100%;
	}

	/*他*/
	input {
		font-size: 1rem;
	}

	/*section*/
	section {
		padding: var(--content-space) 0;
		/*section内の余白。上下にcss冒頭のcontent-spaceを読み込み、左右は0（ゼロ）*/
	}

	a {
		color: inherit;
		transition: 0.3s;
		/*hoverまでにかける時間。0.3秒。*/
	}

	/*マウスオン時*/
	a:hover {
		filter: brightness(1.1);
		/*少しだけ明るくする*/
	}


	/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
	#container {
		position: relative;
		animation: opa1 1s 0.4s both;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		padding: 0 var(--content-space);
		/*コンテナー内の余白。上下は0（ゼロ）、左右はcss冒頭のcontent-spaceを読み込む。*/
	}


	/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
	/*ヘッダーブロック*/
	header {
		padding: var(--content-space) 0;
		/*ヘッダー内の余白。上下にcss冒頭のcontent-spaceを読み込み、左右は0（ゼロ）*/
	}

	/*画面幅400px以下の追加指定*/
	@media screen and (max-width:400px) {

		/*ヘッダーブロック*/
		header {
			padding-top: calc(var(--content-space) + 70px);
			/*右上ボタンとロゴが重ならないようヘッダー上部の余白に70px上乗せ*/
		}

	}

	/*追加指定ここまで*/


	/*ロゴ*/
	#logo {
		margin: 0;
		padding: 0;
	}

	#logo img {
		display: inline-block;
		width: 250px;
		/*ロゴの幅*/
	}


	/*ヘッダー右側の「Online Shop」のボックス
---------------------------------------------------------------------------*/
	#header-box * {
		margin: 0;
		padding: 0;
	}

	/*ボックス全体*/
	#header-box {
		list-style: none;
		position: fixed;
		/*スクロールしても常に同じ場所に配置*/
		z-index: 101;
		right: 70px;
		/*右側からの配置場所。ハンバーガーアイコンの幅と合わせておくときれいに並びます。*/
		top: 0px;
		/*上からの配置場所。*/
		height: 70px;
		/*高さ。ハンバーガーアイコンの高さと合わせておくときれいに並びます。*/
		display: flex;
		/*メニューが増えた場合に横並びにする*/
	}

	/*メニュー１個あたり*/
	#header-box a {
		display: flex;
		text-decoration: none;
		height: 100%;
		align-items: center;
		background: var(--primary-color);
		/*背景色。css冒頭のprimary-colorを読み込みます。*/
		color: var(--primary-inverse-color);
		/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
		padding: 0 2rem;
		/*上下、左右へのボタン内の余白*/
	}


	/*mainimg（4枚構成の横スライドショー）
---------------------------------------------------------------------------*/
	/*h2見出し*/
	#mainimg-box h2 {
		font-size: 5vw;
		/*文字サイズ*/
		line-height: 1.6;
		/*行間を少し狭く*/
		font-weight: 200;
		/*文字の太さ。細く。*/
		position: relative;
		/*カギカッコを絶対配置する為に必要な指定*/
		display: inline-block;
		padding: 1rem 3rem;
		/*上下、左右への見出し内の余白。カギカッコとテキストの間のバランスを調整します。*/
	}

	/*h2内の色がついた部分（span）*/
	#mainimg-box h2 span {
		color: var(--primary-color);
		/*css冒頭のprimary-colorを読み込みます。*/
	}

	/*h2見出しのカギカッコ装飾（共通設定）*/
	#mainimg-box h2::before,
	#mainimg-box h2::after {
		content: "";
		position: absolute;
		width: 20px;
		/*カギカッコの幅。お好みで。*/
		height: 50px;
		/*カギカッコの高さ。お好みで。*/
		border: 1px solid var(--base-inverse-color);
		/*枠線の幅、線種、varは色の事でcss冒頭で指定しているvase-inverse-colorを読み込みます*/

	}

	/*h2見出しの最初（左上）のカギカッコの設定*/
	#mainimg-box h2::before {
		top: 0px;
		left: 0px;
		border-right: none;
		/*右の線は消す*/
		border-bottom: none;
		/*下の線は消す*/
	}

	/*h2見出しの最後（右下）のカギカッコの設定*/
	#mainimg-box h2::after {
		bottom: 0px;
		right: 0px;
		border-left: none;
		/*左の線は消す*/
		border-top: none;
		/*上の線は消す*/
	}

	/*スライドショー全体を囲むブロック*/
	#mainimg {
		overflow-x: hidden;
		position: relative;
		background: linear-gradient(transparent 20%, var(--primary-color) 20%);
		/*背景グラデーション。上から20%までは透明で、それ以外はcss冒頭のprimary-colorを読み込みます。最後にも20%とする事で境界がくっきりします。これがないとなめらかグラデーションに。*/
		color: var(--primary-inverse-color);
		/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
	}

	/*画像たちを囲むブロック*/
	#mainimg .img {
		display: flex;
	}

	/*画像*/
	#mainimg .img img {
		padding: 0 1vw;
		/*上下の余白はなし、左右への余白は画面の1%*/
	}

	/*スライド下の英語表記のテキスト*/
	#mainimg .img+p.c {
		padding: 2rem;
		/*テキスト内の余白。2文字分。*/
		font-size: 1.4rem;
		/*文字サイズ140%*/
	}

	/*スライド下の英語テキストに使うフォント。css冒頭のGoogle Fonts（Caveat）用のスタイル*/
	.caveat {
		font-family: "Caveat", cursive;
		font-optical-sizing: auto;
		font-weight: normal;
		font-style: normal;
	}

	/*右から左へ、左から右へ、のアニメーション*/
	#mainimg .rtl,
	#mainimg .ltr {
		animation-timing-function: linear;
		animation-iteration-count: infinite;
	}

	#mainimg .rtl {
		animation-name: slide-rtl;
	}

	#mainimg .ltr {
		animation-name: slide-ltr;
	}

	@keyframes slide-rtl {
		0% {
			transform: translateX(0);
		}

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

	@keyframes slide-ltr {
		0% {
			transform: translateX(-50%);
		}

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


	/*コンテンツ
---------------------------------------------------------------------------*/
	/*コンテンツブロック*/
	#contents {
		flex: 1;
	}

	/*コンテンツ内で使用するul,ol要素（リストタグ）*/
	#contents ul,
	#contents ol {
		margin-left: 2rem;
		margin-right: 2rem;
	}


	/*main
---------------------------------------------------------------------------*/
	/*h2見出し*/
	main h2 {
		font-weight: 500;
		/*太さ。200〜900まで指定可能。大きいほど太くなります。*/
		font-size: 1.8rem;
		/*文字サイズ180%。*/
	}


	/*スライドショー下のテキストメッセージブロック（「素敵なキッチンアイテムや暮らしを彩る雑貨が揃うお店」）
---------------------------------------------------------------------------*/
	/*p要素に使っています*/
	.message {
		line-height: 3;
		/*行間を広くする*/
	}

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

		.message {
			text-align: center;
			/*中身をセンタリング*/
		}

	}

	/*追加指定ここまで*/


	/*btn5（「今だけ10%OFF　オンラインショップはこちら」ボタン）
---------------------------------------------------------------------------*/
	.btn5-container {
		position: relative;
		margin-top: 40px;
		/*ふきだしを使う場合に上の要素に食い込んでしまうので、それを回避する*/
	}

	a.btn5 {
		text-decoration: none;
		display: inline-block;
		background: linear-gradient(#4ed139, var(--primary-color));
		/*背景グラデーション。#4ed139からcss冒頭のprimary-colorへかけて色が変化。*/
		color: #fff;
		/*文字色*/
		padding: 1rem 3rem;
		/*ボタン内の余白。上下、左右へ。*/
		font-size: 1.3rem;
		/*文字サイズを130%*/
		border-radius: 5px;
		/*角を少しだけ丸くする*/
	}

	/*マウスオン時に少しだけ大きく*/
	a.btn5:hover {
		transform: scale(1.02);
	}

	/*ふきだし*/
	.btn5-container .fukidasi {
		background: #fff;
		/*背景色*/
		color: #333;
		/*文字色*/
		border: 2px solid var(--primary-color);
		/*枠線の幅、線種、色*/
		padding: 0.2rem 2rem;
		/*ふきだし内の余白。上下、左右へ。*/
		border-radius: 100px;
		/*角を丸くする指定。大きめであれば適当でOK。*/
		position: absolute;
		top: -30px;
		/*ふきだしの位置の設定*/
		left: 50%;
		transform: translateX(-50%);
		box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
		/*ふきだしの影。右へ、下へ、ぼかす量、0,0,0は黒色のことで0.2は色が20%出た状態*/
		animation: jump1 2s infinite;
		/*ぴょこんと上に移動するアニメーション。動きが不要ならこの１行を削除。*/
	}

	/*ふきだしの下の三角形の設定*/
	.btn5-container .fukidasi::before {
		content: "";
		position: absolute;
		bottom: -8px;
		/*配置場所*/
		left: 50%;
		transform: translateX(-50%) rotate(315deg);
		width: 10px;
		/*三角形の幅*/
		height: 10px;
		/*三角形の高さ*/
		background: #fff;
		/*三角形の色*/
		border-left: 2px solid var(--primary-color);
		/*枠線の幅、線種、色についてはcss冒頭のprimary-colorを読み込みます。*/
		border-bottom: 2px solid var(--primary-color);
		/*枠線の幅、線種、色についてはcss冒頭のprimary-colorを読み込みます。*/
	}

	/*角をまんまるにする*/
	.btn5.border-radius {
		border-radius: 100px;
	}


	/*「商品ラインナップ」ブロック
---------------------------------------------------------------------------*/
	.list-grid .list * {
		margin: 0;
		padding: 0;
	}

	/*ブロック全体を囲むブロック*/
	.list-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		/*2列にする指定。3列にしたければrepeat(3, 1fr)とする。*/
		gap: 1rem;
		/*ブロックの間に1文字分のスペースを空ける*/
	}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

		/*ブロック全体を囲むブロック*/
		.list-grid {
			grid-template-columns: repeat(4, 1fr);
			/*4列にする指定。2列にしたければrepeat(2, 1fr)とする。*/
			gap: 2rem;
			/*ブロックの間に2文字分のスペースを空ける*/
		}

	}

	/*追加指定ここまで*/


	/*ボックス１個あたり*/
	.list-grid .list {
		display: grid;
		position: relative;
		grid-template-rows: auto 1fr;
		/*１つ目（この場合はfigure要素のサイズ）は自動に、２つ目（この場合はtextブロック））を残った幅で使う*/
		overflow: hidden;
	}

	/*ボックス内のp要素*/
	.list-grid .list p {
		font-size: 0.85rem;
		/*文字サイズを85%に*/
		line-height: 1.5;
	}

	.list-grid .icon-bg1,
	.list-grid .icon-bg2 {
		font-family: "Roboto", sans-serif;
		font-weight: 600;
		overflow: hidden;
		position: absolute;
		left: 0px;
		top: 0px;
		font-size: 0.85rem;
		width: 10rem;
		padding-top: 2rem;
		text-align: center;
		transform: rotate(-45deg) translate(-2.4rem, -3rem);
		box-shadow: 0px 5px #fff;
	}
	.list-grid .icon-bg1 {
		background: #ff3535;
		color: #fff;
	}
	.list-grid .icon-bg2 {
		background: #1c31ff;
		color: #fff;
	}
	.bg-slideup {
		background-image: url("../images/6.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		width: 100%;
		height: 50vh;
		border-radius: 0px 15vw 0px 15vw;
	}
	.list-yoko-scroll * {
		margin: 0;
		padding: 0;
	}
	.list-yoko-scroll {
		display: flex;
		overflow-x: auto;
		scrollbar-width: none;
		scroll-snap-type: x mandatory;
	}

	.list-yoko-scroll::-webkit-scrollbar {
		display: none;
	}
	.list-yoko-scroll .list {
		width: 60%;
		flex-shrink: 0;
		scroll-snap-align: start;
		padding: 0 2rem;
		position: relative;
		display: flex;
		flex-direction: column;
	}
	@media screen and (min-width:600px) {
		.list-yoko-scroll .list {
			width: 28%;
		}
    }
	.list-yoko-scroll figure {
		width: 80px;
		border-radius: 50%;
		overflow: hidden;
		margin: 0 auto 1rem;
	}

	.list-yoko-scroll h4 {
		text-align: center;
	}
	.list-yoko-scroll .text {
		flex: 1;
		font-size: 0.85rem;
		line-height: 1.5;
	}
	.news-c2 * {
		margin: 0;
		padding: 0;
	}
	.news-c2 .title {
		margin-bottom: 2rem;
		text-align: center;
	}
	@media screen and (min-width:600px) {

		.news-c2 {
			display: flex;
			gap: 2rem;
		}
		.news-c2 .title {
			margin-bottom: 0;
			text-align: left;
			width: 30%;
		}
		.news-c2 .text {
			flex: 1;
		}

	}
	.news dd {
		padding-bottom: 1rem;
	}
	.news dt span {
		display: inline-block;
		text-align: center;
		line-height: 1.8;
		padding: 0 1rem;
		width: 8rem;
		transform: scale(0.8);
		background: #fff;
		color: #777;
		border: 1px solid #999;
	}
	.news .icon-bg1 {
		border-color: transparent;
		background: #cd0000;
		color: #fff;
	}
	.news .icon-bg2 {
		border-color: transparent;
		background: #006acd;
		color: #fff;
	}
	@media screen and (min-width:700px) {
		.news {
			display: grid;
			grid-template-columns: auto 1fr;
		}
    }
    .list-c2>a {
		text-decoration: none;
		display: block;
	}
	@media screen and (min-width:600px) {
		.list-c2 {
			display: flex;
		}

	}
	.list-c2 .list {
		text-align: center;
		position: relative;
		overflow-y: hidden;
		color: #fff;
		padding: 5rem 2rem;
		margin: 1rem 0;
	}
	@media screen and (min-width:600px) {

		.list-c2>* {
			flex: 1;
		}

		.list-c2 .list {
			margin: 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.list-c2>a .list {
			height: 100%;
		}

	}
	.list-c2 .list.image1 {
		background: url("../images/10.jpg") no-repeat center center / cover;
	}
	.list-c2 .list.image2 {
		background: url("../images/11.jpg") no-repeat center center / cover;
	}
	.list-c2 h4 {
		font-weight: 200;

		line-height: 1.2;

	}

	.list-c2 h4 .main-text {
		display: block;
		font-size: 3rem;
		padding-top: 1.5rem;
		padding-bottom: 3rem;
	}

	@media screen and (min-width:600px) {

		.list-c2 h4 .main-text {
			font-size: 4rem;
		}

	}

	.list-c2 h4 .sub-text {
		position: relative;
		padding: 0 5rem;
	}
	.sub-text::before {
		left: 0;
	}

	.sub-text::after {
		right: 0;
	}

	.list-c2 h4 .sub-text::before,
	.list-c2 h4 .sub-text::after {
		content: "";
		position: absolute;
		top: 50%;
		width: 2rem;
		border-top: 1px solid #fff;
	}
	.list-c2 .list .text {
		position: relative;
		z-index: 1;
		font-size: 0.85rem;
		/*文字サイズ85%*/
	}
	.list-c2 .list::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		transition: transform 0.3s 0.1s;
	}

	.list-c2 .list:hover::before {
		transform: translateY(100%);
	}
	footer * {
		margin: 0;
		padding: 0;
	}

	footer ul {
		list-style: none;
	}
	footer {
		background: #0414fa;
		color: #ccc;
		padding: var(--content-space);
	}
	footer .logo {
		width: 300px;
	}
	footer div.footer1 {
		flex: 10;
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}
	@media screen and (min-width:700px) {

		footer {
			display: flex;
			gap: 1rem;
		}
        footer div.footer1 {
			text-align: center;
			width: 80%;
			font-size: 20px;
		}
    }
    .sns1 {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
	}
    .sns1 i {
		font-size: 30px;
	}
    .iframe-box1 {
		width: 100%;
		height: 0;
		padding-top: 56.25% !important;
		position: relative;
		overflow: hidden;
	}

	.iframe-box1 iframe {
		position: absolute;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
	}

	#footermenu {
		font-size: 0.85rem;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	#footermenu a {
		text-decoration: none;
		color: inherit;
		opacity: 0.6;
	}

	#footermenu a:hover {
		opacity: 1;
	}

	#footermenu ul {
		margin: 0;
		list-style: none;
		padding: 0 2px;
		flex: 1;
	}
	#footermenu .title {
		font-weight: bold;
		padding-bottom: 5px;
	}

	#footermenu li+.title {
		margin-top: 1.5rem;
	}
	.pr * {
		margin: 0;
		padding: 0;
	}

	.pr a {
		text-decoration: none;
		display: block;
		background: #555;
		color: #ccc;
		text-align: right;
		padding: 0.5rem 1rem;
		font-size: 0.8rem;
	}

	.pr a::before {
		font-family: "Font Awesome 6 Free";
		content: "\e2ca";
		font-weight: bold;
		margin-right: 0.5em;
	}
	#popup * {
		margin: 0;
		padding: 0;
	}

	#popup {
		display: none;
		font-size: 0.9rem;
		padding: 1rem 2rem;
		position: fixed;
		z-index: 1001;
		right: 30px;
		bottom: 100px;
		width: 300px;
		background: #fff;
		color: #555;
		border: 3px solid #333;
		border-radius: 10px;
		overflow: hidden;
	}

	#popup .close-btn {
		display: block;
		width: 50px;
		line-height: 50px;
		text-align: center;
		position: absolute;
		right: 0px;
		top: 0px;
		background: #ff0000;
		color: #fff;
		cursor: pointer;
	}

	#menubar_hdr {
		display: none;
		position: fixed;
		z-index: 101;
		cursor: pointer;
		right: 0px;
		top: 0px;
		width: 70px;
		height: 70px;
		background: #f43900;
		transform-origin: right top;
		transform: scale(1);
	}

	#menubar_hdr.ham {
		background: #ff0000;
	}

	#menubar_hdr span {
		display: block;
		position: absolute;
		left: 18px;
		width: 35px;
		height: 2px;
		background: #fff;
		transition: 0.3s;
	}
	#menubar_hdr span:nth-of-type(1) {
		top: 24px;
	}

	#menubar_hdr span:nth-of-type(2) {
		top: 34px;
	}

	#menubar_hdr span:nth-of-type(3) {
		top: 44px;
	}
	#menubar_hdr.ham span:nth-of-type(1) {
		transform: translateY(10px) rotate(-45deg);
	}
	#menubar_hdr.ham span:nth-of-type(2) {
		opacity: 0;
	}
	#menubar_hdr.ham span:nth-of-type(3) {
		transform: translateY(-10px) rotate(45deg);
	}
	.small-screen #menubar_hdr {
		display: flex;
	}
	.small-screen #menubar {
		animation: animation1 0.2s both;
		position: fixed;
		overflow: auto;
		z-index: 100;
		right: 0px;
		top: 0px;
		width: 70%;
		height: 100%;
		padding: 100px var(--content-space) 50px;
		background: var(--primary-color);
		color: var(--primary-inverse-color);
	}

	.small-screen #menubar {
		display: none;
	}
	.small-screen #menubar a {
		display: block;
		text-decoration: none;
		color: inherit;
		border: 1px solid #fff;
		margin-bottom: 1rem;
		padding: 1rem 2rem;
	}

	.small-screen #menubar ul ul a {
		border: none;
		padding: 0;
		margin-left: 3.8rem;
	}

	a.ddmenu::before {
		font-family: "Font Awesome 6 Free";
		font-weight: bold;
		content: "\f078";
		margin-right: 0.3em;
		transform: scale(0.7);
		display: inline-block;
	}

	a.ddmenu {
		cursor: default;
	}

	.pagetop-show {
		display: block;
	}

	.pagetop a {
		display: block;
		text-decoration: none;
		text-align: center;
		z-index: 99;
		animation: opa1 1s 0.4s both;
		position: fixed;
		right: 20px;
		bottom: 50px;
		font-size: 1.5rem;
		background: var(--primary-color);
		color: var(--primary-inverse-color);
		width: 60px;
		line-height: 60px;
		border-radius: 50%;
	}

	#kazari1 {
		position: absolute;
		z-index: -1;
		left: 0;
		top: 0;
		fill: none;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-miterlimit: 10;
		stroke: #fff;
		stroke-width: 30;
		width: 100%;
	}

	.bg1 {
		background: var(--primary-color);
		color: var(--primary-inverse-color);

	}

	.margin-lr0 {
		margin: 0 calc(-1 * var(--content-space));
	}

	#manual {
		background-image: none;
	}

	.manual {
		padding: 5vw;
	}

	.manual h2,
	.manual h3 {
		margin-top: 3rem;
	}

	pre {
		white-space: pre-wrap;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	.clearfix::after {
		content: "";
		display: block;
		clear: both;
	}

	.color-check,
	.color-check a {
		color: #ff0000 !important;
	}

	.l {
		text-align: left !important;
	}

	.c {
		text-align: center !important;
	}

	.r {
		text-align: right !important;
	}

	.ws {
		width: 95%;
		display: block;
	}

	.wl {
		width: 95%;
		display: block;
	}

	.mb0 {
		margin-bottom: 0px !important;
	}

	.mb30 {
		margin-bottom: 30px !important;
	}

	.look {
		display: inline-block;
		padding: 0px 10px;
		background: #eee;
		border: 1px solid #ccc;
		color: #888;
		border-radius: 3px;
		margin: 5px 0;
		word-break: break-all;
	}

	.small {
		font-size: 40px;
	}

	.large {
		font-size: 2em;
		letter-spacing: 0.1em;
	}

	.pc {
		display: none;
	}

	.dn {
		display: none !important;
	}

	.block {
		display: block !important;
	}

	@media screen and (min-width:900px) {

		.ws {
			width: 48%;
			display: inline;
		}

		.sh {
			display: none;
		}

		.pc {
			display: block;
		}

	}
}