@charset "UTF-8";

@import url("font-awesome.min.css");
@import url("font-notosansjp.css");

html,
body {
	height: 100%;
	font-family: 'Roboto','Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", san-serif;
	background: #fff;
	}




/* header  */

header {
	position: fixed;
	top: 0;
	display: block;
	width: 100%;
	height: 50px;
	padding: 10px;
	background: #c00;
	z-index: 9999999999;
	}

.logo {
	position: absolute;
	left: 10px;
	top: 10px;
	width: 200px;
	height: 30px;
	}

.logo a {
	display: block;
	width: 200px;
	height: 30px;
	font-size: 0;
	text-indent: 100%;
	overflow: hidden;
	background: url(/common/img/logo.png) left center no-repeat;
	background-size: auto 100%;
	}

header ul {
	position: absolute;
	left: 200px;
	top: 10px;
	}
@media screen and (max-width: 767px) {
header ul {
	left: 190px;
	}
}

header ul li {
	display: block;
	width: 40px;
	height: 30px;
	margin: 0;
	padding: 0;
	float: left;
	}

header ul li a {
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
	color: #fff;
	font-size: 25px;
	}

header ul li a:hover {
	color: #fa0;
	}

header ul li a i {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	}




/* グローバルナビ */

#gnav {
	position: fixed;
	right: -330px;
	top: 0;
	display: block;
	width: 330px;
	height: 100%;
	overflow: auto;
	z-index: 99999999999;
	transition: .6s ease;
	}

#gnav.open {
	right: 0;
	}

#gnav ul {
	position: absolute;
	right: -320px;
	top: 0;
	display: block;
	margin: 0;
	padding: 0;
	width: 300px;
	min-height: 100%;
	background: #c00;
	box-shadow: 0 0 10px rgba(0,0,0,.8);
	transition: .6s ease;
	}

#gnav.open ul {
	right: 0;
	}

#gnav ul li {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	border-bottom: 1px solid #a00;
	}

#gnav ul li a {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	padding: 17px 10px 17px 30px;
	color: #fff;
	font-size: 16px;
	line-height: 1em;
	background: #c00;
	}

#gnav ul li a:before {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	content: "\f138";
	font-family: FontAwesome;
	}

#gnav ul li a:hover {
	color: #fff;
	background: #e00;
	}

#gnavbt {
	position: fixed;
	right: 15px;
	top: 10px;
	display: block;
	width: 30px;
	height: 30px;
	content: "";
	z-index: 99999999999999;
	transition: .3s ease;
	cursor: pointer;
	}

#gnavbt:before {
	position: fixed;
	right: 15px;
	top: 18px;
	display: block;
	width: 30px;
	height: 3px;
	content: "";
	background: white;
	transition: .5s ease;
	}

#gnavbt.open:before {
	top: 22px;
	transform: rotate(135deg);
	}

#gnavbt:after {
	position: fixed;
	right: 15px;
	top: 28px;
	display: block;
	width: 30px;
	height: 3px;
	content: "";
	background: white;
	transition: .5s ease;
	}

#gnavbt.open:after {
	top: 22px;
	transform: rotate(-135deg);
	}




/* フッター */

footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: 10px;
	background: #fff;
	border-top: 2px solid #c00;
	}

footer ul {
	display: block;
	float: left;
	}
@media screen and (max-width:767px){
footer ul {
	display: block;
	margin: 0 0 10px 0;
	text-align: center;
	float: none;
	}
}

footer ul li {
	padding: 0 10px 0 0;
	font-size: 10px;
	line-height: 1em;
	float: left;
	}
@media screen and (max-width:768px){
footer ul li {
	display: block;
	line-height: 1.5em;
	}
}
@media screen and (max-width:767px){
footer ul li {
	display: inline-block;
	float: none;
	}
}

footer ul li a {
	display: block;
	color: #333;
	}

footer ul li a:hover {
	color: #c00;
	}

footer address {
	display: block;
	color: #333;
	font-size: 10px;
	line-height: 1em;
	text-align: right;
	float: right;
	}
@media screen and (max-width:768px){
footer address {
	line-height: 1.5em;
	}
}
@media screen and (max-width:767px){
footer address {
	text-align: center;
	float: none;
	}
}

footer address br {
	display: none;
	}
@media screen and (max-width:768px){
footer address br {
	display: block;
	}
}




/* トップへ戻るボタン */

.totop {
	z-index: 99999999;
	position: fixed;
	right: 20px;
	bottom: 80px;
	display: block;
	width: 50px;
	height: 50px;
	}
@media screen and (max-width:414px){
.totop {
	right: 15px;
	width: 40px;
	height: 40px;
	}
}

.totop a {
	display: block;
	width: 50px;
	height: 50px;
	background: url("../img/totop.png") center center no-repeat #c00;
	background-size: 20px 11px;
	overflow: hidden;
	text-indent: 100%;
	font-size: 0;
	border-radius: 25px;
	border: 1px solid #fff;
	box-sizing: border-box;
	}
@media screen and (max-width:414px){
.totop a {
	width: 40px;
	height: 40px;
	}
}

.totop a:hover {
	opacity: .8;
	}




/* メインビジュアル */

.mv {
	position: relative;
	width: 100%;
	padding: 50px 0 0 0;
	}

.mv ul {
	display: block;
	}

.mv ul li {
	display: block;
	width: 100%;
	}

.mv ul li img {
	display: block;
	width: 100%;
	}




/* フィルター */

#control {
	position: relative;
	padding: .5rem;
	text-align: justify;
	font-size: 0.1px;
	background: #eee;
	}

#control:after {
	content: '';
	display: inline-block;
	width: 100%;
	}

.filter {
	position: relative;
	display: block;
	height: 30px;
	margin: 0;
	padding: 0 10px 0 35px;
	background: #fff;
	cursor: pointer;
	font-size: 14px;
	color: white;
	text-align: left;
	transition: .3s ease;
	float: right;
	}
@media screen and (max-width: 767px) {
.filter {
	width: 45px;
	padding: 0;
	font-size: 0;
	}
}
@media screen and (max-width: 320px) {
.filter {
	width: 35px;
	}
}

.filter:after {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translate(0,-50%);
	display: block;
	width: 20px;
	height: 20px;
	content: "";
	}
@media screen and (max-width: 767px) {
.filter:after {
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	}
}

.filter:first-of-type {
	border-radius: 0 15px 15px 0;
	}
@media screen and (max-width: 767px) {
.filter:first-of-type {
	border-radius: 0 5px 5px 0;
	}
}

.filter:last-of-type {
	border-radius: 15px 0 0 15px;
	}
@media screen and (max-width: 767px) {
.filter:last-of-type {
	border-radius: 5px 0 0 5px;
	}
}

.filter[data-filter="all"] {
	width: auto;
	padding: 0 15px;
	color: #666;
	font-size: 14px;
	text-align: center;
	}
@media screen and (max-width: 320px) {
.filter[data-filter="all"] {
	padding: 0 10px;
	}
}
.filter[data-filter="all"]:hover,
.filter[data-filter="all"].active {
	color: #fff;
	background: #c00;
	}

.filter[data-filter=".kimono"] {
	color: #f26687;
	}
.filter[data-filter=".kimono"]:hover,
.filter[data-filter=".kimono"].active {
	color: #fff;
	background: #f26687;
	}
.filter[data-filter=".kimono"]:after {
	background: url(../img/icon_filter.png) 0 0 no-repeat;
	background-size: auto 40px;
	}
.filter[data-filter=".kimono"]:hover:after,
.filter[data-filter=".kimono"].active:after {
	background: url(../img/icon_filter.png) 0 -20px no-repeat;
	background-size: auto 40px;
	}

.filter[data-filter=".animal"] {
	color: #80d84b;
	}
.filter[data-filter=".animal"]:hover,
.filter[data-filter=".animal"].active {
	color: #fff;
	background: #80d84b;
	}
.filter[data-filter=".animal"]:after {
	background: url(../img/icon_filter.png) -20px 0 no-repeat;
	background-size: auto 40px;
	}
.filter[data-filter=".animal"]:hover:after,
.filter[data-filter=".animal"].active:after {
	background: url(../img/icon_filter.png) -20px -20px no-repeat;
	background-size: auto 40px;
	}

.filter[data-filter=".solitude"] {
	color: #4ed8ed;
	}
.filter[data-filter=".solitude"]:hover,
.filter[data-filter=".solitude"].active {
	color: #fff;
	background: #4ed8ed;
	}
.filter[data-filter=".solitude"]:after {
	content: "\f08a";
	}
.filter[data-filter=".solitude"]:after {
	background: url(../img/icon_filter.png) -40px 0 no-repeat;
	background-size: auto 40px;
	}
.filter[data-filter=".solitude"]:hover:after,
.filter[data-filter=".solitude"].active:after {
	background: url(../img/icon_filter.png) -40px -20px no-repeat;
	background-size: auto 40px;
	}

#filter {
	display: block;
	width: 310px;
	height: 30px;
	margin: 0 1rem 0 0;
	padding: 5px 10px;
	font-size: 14px;
	font-weight: 300;
	font-family: FontAwesome;
	line-height: 1em;
	background: #fff;
	border: 0;
	border-radius: 15px;
	float: right;
	}
@media screen and (max-width: 768px) {
#filter {
	float: left;
	}
}
@media screen and (max-width: 767px) {
#filter {
	width: 210px;
	margin: 0;
	border-radius: 5px;
	float: left;
	}
}
@media screen and (max-width: 375px) {
#filter {
	width: 170px;
	}
}
@media screen and (max-width: 320px) {
#filter {
	width: 155px;
	}
}




/* Container */

#container {
	padding: 1rem 1rem 5rem 1rem;
	text-align: justify;
	font-size: 0.1px;
	}
@media screen and (max-width:768px){
#container {
	padding: 1rem 1rem 10rem 1rem;
	}
}

#container:after {
	content: '';
	display: inline-block;
	width: 100%;
	}




/* Target Elements  */

.mix,
.gap {
	display: inline-block;
	vertical-align: top;
	}

.mix {
	position: relative;
	background: #fff;
	border: 1px solid currentColor;
	border-radius: 2px;
	margin-bottom: 1rem;
	display: none;
	}

.mix:before {
	content: '';
	display: inline-block;
	padding-top: 100%;
	}

.mix:after {
	position: absolute;
	right: 10px;
	top: 10px;
	display: block;
	width: 20px;
	height: 20px;
	content: "";
	}

.mix.kimono {
	color: #f26687;
	}
.mix.kimono:after {
	background: url(../img/icon_filter.png) 0 0 no-repeat;
	background-size: auto 40px;
	}

.mix.animal {
	color: #80d84b;
	}
.mix.animal:after {
	background: url(../img/icon_filter.png) -20px 0 no-repeat;
	background-size: auto 40px;
	}

.mix.solitude {
	color: #4ed8ed;
	}
.mix.solitude:after {
	background: url(../img/icon_filter.png) -40px 0 no-repeat;
	background-size: auto 40px;
	}




/* Grid Breakpoints */

/* 2 Columns */

.mix,
.gap {
		width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
	}

/* 3 Columns */
@media screen and (min-width: 541px) {
	.mix,
	.gap {
		width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
	}
}

/* 4 Columns */
@media screen and (min-width: 961px) {
	.mix,
	.gap {
		width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
	}
}

/* 5 Columns */
@media screen and (min-width: 1281px) {
	.mix,
	.gap {
		width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
	}
}

/* カラム共通設定 */
.mix a {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5em;
	text-shadow: 0px 1px 3px rgba(0,0,0,.8);
	text-align: center;
	transition: .3s ease;
	}

.mix a h2 {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: 100%;
	padding: 0 10px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5em;
	transform: translate(-50%,-50%);
	}

.mix a span {
	display: block;
	}

/* 品川女子学院でのきもの授業 核心＆琴線にふれる14歳からの質問 */
.shinajo_faq a				{ background: url("/kimono/img/shinajo_faq_thmb.jpg") center center no-repeat; background-size: auto 100%;}
.shinajo_faq a:hover		{ background-size: auto 120%; }

/* きものレッスン */
.lesson a				{ background: url("/kimono/lesson/img/lesson_h1.jpg") left center no-repeat; background-size: auto 100%;}
.lesson a:hover		{ background-size: auto 120%; }

/* 貝の口 */
.kainokuchi a				{ background: url("/kimono/img/kainokuchi_h1.jpg") center center no-repeat; background-size: auto 100%;}
.kainokuchi a:hover		{ background-size: auto 120%; }

/* 三部式 仕立て */
.sanbushiki_shitate a		{ background: url("/kimono/img/sanbushiki_shitate_h1.jpg") center center no-repeat; background-size: auto 100%;}
.sanbushiki_shitate a:hover	{ background-size: auto 120%;}

/* 三部式 着付け */
.sanbushiki_kitsuke a 		{ background: url("/kimono/img/sanbushiki_kitsuke_h1.jpg") center center no-repeat; background-size: auto 100%;}
.sanbushiki_kitsuke a:hover	{ background-size: auto 120%;}

/* きものサイズ・チャート */
.kimono_sizechart a 		{ background: url("/kimono/img/kimono_sizechart_h1.png") center center no-repeat; background-size: auto 100%;}
.kimono_sizechart a:hover	{ background-size: auto 120%;}

/* きもの歳時表 */
.kimono_calendar a 		{ background: url("/kimono/img/kimono_calendar_h1.jpg") center center no-repeat; background-size: auto 100%;}
.kimono_calendar a:hover	{ background-size: auto 120%;}

/* きもの各部の名前 */
.kimono_parts a 		{ background: url("/kimono/img/kimono_parts_h1.jpg") center center no-repeat; background-size: auto 100%;}
.kimono_parts a:hover	{ background-size: auto 120%;}

/* 角帯 貝の口 男結び 締め方 動画 */
.kainokuchi_obi a			{ background: url("https://i.ytimg.com/vi/0h5rAMzZJi0/hqdefault.jpg") center center no-repeat; background-size: auto 135%;}
.kainokuchi_obi a:hover		{ background-size: auto 150%;}

/* 半幅帯 一文字 文庫結び 締め方 動画 */
.ichimonji_obi a			{ background: url("https://i.ytimg.com/vi/VdG80kbNLzo/hqdefault.jpg") center center no-repeat; background-size: auto 135%;}

/* 女性はたったの5回で着られます */
.ledies5lessons a 		{ background: url("/kimono/img/ledies5lessons_h1.jpg") center center no-repeat; background-size: auto 100%;}
.ledies5lessons a:hover	{ background-size: auto 120%;}

/* 男性はたった2回で着られます */
.gentlemen2lessons a 		{ background: url("/kimono/img/gentlemen2lessons_h1.jpg") center center no-repeat; background-size: auto 100%;}
.gentlemen2lessons a:hover	{ background-size: auto 120%;}

/* きもののたたみ方 */
.folding a 		{ background: url("/kimono/img/folding_h1.jpg") center center no-repeat; background-size: auto 100%;}
.folding a:hover	{ background-size: auto 120%;}

/* きもので乗り物に乗るときのコツ */
.tip_car a 		{ background: url("/kimono/img/tip_car_h1.jpg") center center no-repeat; background-size: auto 100%;}
.tip_car a:hover	{ background-size: auto 120%;}

/* ひとりでできるゆかた着付け */
.yukatabeauty a 		{ background: url("/kimono/img/yukatabeauty_h1.jpg") center center no-repeat; background-size: auto 100%;}
.yukatabeauty a:hover	{ background-size: auto 120%;}

/* Kazumi流とは */
.about a 		{ background: url("/about/img/about_h1.jpg") center center no-repeat; background-size: auto 100%;}
.about a:hover	{ background-size: auto 120%;}

/* プロフィール */
.profile a 		{ background: url("/profile/img/profile_top.jpg") center center no-repeat; background-size: auto 100%;}
.profile a:hover	{ background-size: auto 120%;}

/* コンパニオンアニマル */
.animal a 		{ background: url("/companionanimal/img/animal_top.png") center center no-repeat; background-size: auto 100%;}
.animal a:hover	{ background-size: auto 120%;}

/* ソリテュード */
.solitude a 		{ background: url("/solitude/img/solitude_top.png") center center no-repeat; background-size: auto 100%;}
.solitude a:hover	{ background-size: auto 120%;}

/* danro */
.danro a 		{ background: url("/img/top20180622b.jpg") center center no-repeat; background-size: auto 100%;}
.danro a:hover	{ background-size: auto 120%;}

/* youtube */
.youtube a 		{ background: url("/img/top20190406_01.jpg") center center no-repeat; background-size: auto 100%;}
.youtube a:hover	{ background-size: auto 120%;}