/*
Theme Name: 87kotoba
Theme URI: ★ テーマの公式サイトなどのURL（空欄でも可） ★
Template: arkhe
Description: ★ テーマの説明（空欄でも可） ★
Author: itlabo
Tags: 
Version: 0.0.1
*/
/* ----------------------------------- 共通 ----------------------------------- */
:root {
	--color:#f8f8f8;
}
body , p , li , dt , dd , figcaption{
	color:#121212;
	font-size:16px;
	letter-spacing: 0.05rem;
}
table {
	width: 100%;
	table-layout: fixed;
	word-break: break-all;
	word-wrap: break-all;
}
.center{
	text-align:center;
}
.right{
	text-align:right;
}
.red{
	color:#cc0000;
}
.bold{
	font-weight:bold;
}
p a , li a , a , p a:hover , li a:hover , a:hover{
	color:#121212;
	text-decoration:none;
	transition:all 0.4s;
}
.flex_box{
	display:flex;
	display:-webkit-flex;
	flex-wrap:wrap;
	-webkit-flex-wrap:wrap;
}
.entry-meta-item-updated , .entry-meta-item-author , .pc1199 , .sp991 ,.sps , .sp , .page-header{
	display:none;
}
.fs12{
	font-size:1.2rem;
}
.fs2{
	font-size:2rem;
}
.ls{
	letter-spacing:0.3rem;
}
.mt05{
	margin-top:0.5rem;
}
.mb05{
	margin-bottom:0.5rem;
}
.mb15{
	margin-bottom:1.5rem;
}
.mb3{
	margin-bottom:3rem;
}
/* ul */
.list_none{
	padding:0;
}
.list_none li{
	list-style:none;
}
/* full_page */
.full_page .l-article{
	max-width:100%;
}
.full_page .container{
	max-width:1200px;
	margin-left:auto;
	margin-right:auto;
}
.l-main__body>.c-postContent{
	margin-top:2rem;
}
/* ------------------ Header ------------------ */
.home .l-header[data-pcfix="1"] , .home .l-header{
	position:absolute;
	background:transparent;
	top:0;
}
.has-image img{
	max-width:180px;
}
.has-image , .has-image>.c-headLogo , .has-image img{
	height:50px;
	display:block;
}
/*  hamburger  */
.hamburger{
	width:60px;
	height:60px;
	cursor:pointer;
	position:fixed;
	top:10px;
	right:3rem;
	z-index:100000;
}
.hamburger span{
	display:block;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
.hamburger .sp_menu_span{
	position:absolute;
	width:50px;
	height:2px;
	left:5px;
	background:#222;
}
.w_color.hamburger .sp_menu_span{
	background:#ffffff;
}
.hamburger .sp_menu_th:before , .hamburger .sp_menu_th:after{
	font-size:0.7rem;
	display:block;
	position:absolute;
	bottom:1px;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}
.hamburger span:nth-child(1) {
	top:10px;
}
.hamburger span:nth-child(2) {
	top:22px;
}
.hamburger span:nth-child(3) {
	top:34px;
}
.hamburger .sp_menu_th:before{
	content:"MENU";
	color:#222;
}
.w_color.hamburger .sp_menu_th:before{
	color:#ffffff;
}
/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1){
	width:50px;
	top:22px;
	-webkit-transform:rotate(-30deg);
	-moz-transform:rotate(-30deg);
	transform:rotate(-30deg);
}
.hamburger.active span:nth-child(3){
	width:50px;
	top:22px;
	-webkit-transform:rotate(30deg);
	-moz-transform:rotate(30deg);
	transform:rotate(30deg);
}
.hamburger .sp_menu_th:after{
	content:"CLOSE";
	color:#ffffff;
	opacity:0;
}
.hamburger.active .sp_menu_th:before , .hamburger.active span:nth-child(2) {
	opacity:0;
}
.hamburger.active .sp_menu_th:after{
	opacity:1;
}
.hamburger.active .sp_menu_span{
	background:#ffffff;
}
/* adminbar hamburger */
.admin-bar .hamburger{
	top:45px;
}
/*  menu  */
.p-drawer__close{
	display:none;
}
#drawer_menu.open{
	opacity: 1;
   pointer-events: inherit;
   visibility: inherit;	
}
.c-drawerNav , .c-drawerNav .menu-item{
	border:none;
}
.menu-item a{
	color:#ffffff;
}
.menu-item .__mainText{
	font-size:1.5rem;
	letter-spacing:0.5rem;
}
.__mainText span{
	font-size:0.8rem;
	display:block;
}
.menu-item .c-drawerNav__a:hover{
	background-color:#ccc;
}
/* footer */
.l-footer__foot{
	padding-top:2.5rem;
	padding-bottom:2rem;
}
.l-footer__foot .flex_box{
	justify-content:space-between;
	align-items:center;
}
.footer_logo , .footer_logo img{
	width:180px;
	text-align:center;
}
.c-copyright{
	padding-left:2rem;
	color:#ffffff;
}
/* flex_box */
.w60{
	width:56%;
	margin:0 2% 2rem 2%;
}
.w50{
	width:46%;
	margin:0 2% 2rem 2%;
}
.w40{
	width:36%;
	margin:0 2% 2rem 2%;
}
.w33{
	width:29%;
	margin:0 2% 2rem 2%;
}
.w25{
	width:23%;
	margin:0 1% 2rem 1%;
}
/* th */
.th01{
	font-size:1.8rem;
	letter-spacing:0.5rem;
}
.th01a{
	font-size:2.5rem;
	letter-spacing:1.2rem;
}
.th02{
	font-size:1.5rem;
	letter-spacing:0.3rem;
}
.th02a{
	position:relative;
	text-align:center;
	margin-bottom:3rem;
}
.th02a:after{
	content:"";
	display:block;
	border-bottom:solid 2px #222222;
	width:80px;
	position:absolute;
	left:50%;
	bottom:-1.5rem;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
}
/* page_title */
.c-pageTitle__main{
	font-size:2.5rem;
	letter-spacing:0.5rem;
}
.c-pageTitle__main span{
	display:block;
	font-size:1.2rem;
	font-weight:normal;
}
.p-archive__title .c-pageTitle__main{
	text-transform: uppercase;
}
/* link */
.btn_base{
	display:inline-block;
}
.arrow{
	position:absolute;
	right:1.5rem;
	top:50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transition:all 0.4s;
}
.arrow:before{
	content:"";
	display:block;
	width:8px;
	height:8px;
	transform:rotate(45deg);
}
.btn01a .arrow:before , .btn01aa .arrow:before , .btn01bb:hover .arrow:before{
	border-top:solid 2px #222;
	border-right:solid 2px #222;
}
.btn01b .arrow:before , .btn01bb .arrow:before , .btn01aa:hover .arrow:before{
	border-top:solid 2px #ffffff;
	border-right:solid 2px #ffffff;
}
.btn01_arrow:hover .arrow{
	right:1rem;
}
.btn01{
	font-weight:bold;
	border:solid 2px #222;
	padding:0.5rem 1rem;
}
.btn01_arrow{
	display:block;
	position:relative;
	padding:0.5rem 2.5rem 0.5rem 1rem;
}
.btn01a , .btn01bb:hover{
	color:#222;
	background-color:#ffffff;
}
.btn01b , .btn01b:hover , .btn01bb , .btn01aa:hover{
	color:#ffffff;
	background-color:#222;
}
.btn01_web , .btn01_contact{
	padding:0.5rem 2.5rem 0.5rem 3rem;
}
.btn01_web:before , .btn01_contact:before{
	content:"";
	display:block;
	width:20px;
	height:20px;
	position:absolute;
	left:0.8rem;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	background-color: #fff;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: center;
   mask-position: center;
   -webkit-mask-size: auto;
   mask-size: auto;
	transition:all 0.4s;
}
.btn01_web:before{
	-webkit-mask-image: url('img/web.svg');
   mask-image: url('img/web.svg');
}
.btn01_contact:before{
	-webkit-mask-image: url('img/mail.svg');
   mask-image: url('img/mail.svg');
}
.btn01_web:hover:before , .btn01_contact:hover:before{
	background-color: #222;
}

/* ---------- HOME ---------- */
.bg_flower , .bg_sec01 > .container{
	padding-top:5rem;
	padding-bottom:5rem;
}
.sec00{
	padding-top:3rem;
	padding-bottom:3rem;
}
.sec01{
	margin:0 0 3rem 0;
}
.bg_sec01{
	position:relative;
}
.bg_sec01:before{
	content:"";
	display:block;
	width:100vw;
	height:94%;
	background-color:var(--color);
	position:absolute;
	left:0;
	bottom:0;
	z-index:1;
}
.bg_sec01 > .container , .bg_sec01 > h2{
	position:relative;
	z-index:2;
}
/* news & event */
.bg_flower{
	position:relative;
}
.bg_flower:before, .bg_flower:after{
	content:"";
	display:block;
	position:absolute;
}
.bg_flower:before{
	background:url("img/bg01a.png") no-repeat center;
	background-size:contain;
	width:calc(683px * 0.4);
	height:calc(760px * 0.4);
	left:-2rem;
	top:0;
	z-index:1;
}
.bg_flower:after{
	background:url("img/bg01b.png") no-repeat center;
	background-size:contain;
	width:calc(620px * 0.4);
	height:calc(1000px * 0.4);
	right:0;
	bottom:-6rem;
	z-index:2;
}
.bg_flower > .container{
	position:relative;
	z-index:3;
}
.news_top_box{
	max-width:800px;
	margin:2rem auto 5rem auto;
}
.topi_child{
	align-items:center;
	margin:0;
	border-bottom:solid 1px #ccc;
	padding:0 1rem;
}
.topi_child:first-child{
	border-top:solid 1px #ccc;
}
.tc01{
	width:100px;
	margin:0 15px;
}
.tc02{
	width:calc(100% - 130px);
	padding:0 0 0 1rem;
}
.tc02 a{
	display:block;
	color:#333333;
	padding:1rem 2.5rem 1rem 0;
	position:relative;
}
.tc02 a .arrow{
	right:1rem;
}
.tc02 a .arrow:before{
	border-top: solid 2px #222;
   border-right: solid 2px #222;
}
.tc02 a:hover .arrow{
	right:0.5rem;
}

.news_img_box figure{
	width:31%;
	margin:0 1% 2rem 1%;
}
/* store */
.store_box{
	padding:0 0.8rem;
}
.store_box  figure{
	width:calc(33.33% - 2%);
	margin:0 1% 2rem 1%;
	position:relative;
}
.store_box {
  display: flex;
  justify-content: space-between;
}

.store_box figure a{
	display:block;
}
.store_box figure a:before{
	content:"";
	background-color:rgba(0,0,0,0.6);
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	top:0;
	left:0;
	transition:all 0.6s;
}
.store_box figure a:hover:before{
	background-color:rgba(0,0,0,0.3);
}
.store_box figure img{
	display:block;
	object-fit:cover;
}
.store_box figure a:hover{
	box-shadow:2px 2px 5px #999; 
}
.store_box figcaption{
	font-weight:bold;
	letter-spacing:0.2rem;
	color:#ffffff;
	line-height:1.8rem;
	width:100%;
	position:absolute;
	top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
	opacity:1;
	margin-top:0.5rem;
}
/* LESSON & INSTAGRAM */
.lesson_box{
	margin-bottom:5rem;
}
.lesson_child{
	width:50%;
	overflow:hidden;
}
.link_arrow , .lesson_child img{
	height:350px;
}
.lesson_child img{
	display:block;
	object-fit:cover;
	width:100%;
}
.link_arrow{
	position:relative;
	display:block;
}
.text_child{
	width:100%;
	position:absolute;
	top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
	padding-bottom:4rem;
}
.text_child > span , .text_child > span:before{
	position:absolute;
	width:24px;
	height:24px;
	display:block;
}
.text_child > span{
	bottom:1rem;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transition:all 0.4s;
}
.text_child > span:before{
	content:"";
	border-bottom:solid 2px #222;
	border-right:solid 2px #222;
	transform:rotate(45deg);
}
.link_arrow:hover{
	background:rgba(0,0,0,0.4);
}
.link_arrow:hover .text_child > span{
	bottom:0.5rem;
}
/* ITEMS */
.top_items_box{
	justify-content:center;
}
.top_items_left{
	width:25%;
	padding:0 1rem;
}
.top_items_right{
	width:75%;
}
.top_items_left p{
	font-size:0.85rem;
	margin-bottom:2rem;
}
.top_items_left ul{
	padding:0 0.5rem;
}
.top_items_left ul li{
	margin:1rem 0;
}
.items_box li{
	margin-bottom:1rem;
}
.items_box figure{
	overflow:hidden;
	margin-bottom:0.5rem;
	transition:all 0.4s;
}
.items_box figure img{
	display:block;
	transition:all 0.4s;
}
.items_box li:hover figure{
	box-shadow:2px 2px 5px #999; 
}
.items_box li:hover figure img{
	transform:scale(1.1,1.1);
}
.size_text{
	font-size:0.8rem;
	text-indent:-60px;
	padding-left:60px;
	margin-bottom:0.5rem;
}
.size_text:before{
	content:"size";
	font-size:0.9rem;
	padding:0 1rem;
}
.price_text{
	font-weight:bold;
	font-size:1.2rem;
}

/* CONTACT */
.top_contact_box{
	position:relative;
	border:solid 2px #222;
	width:80%;
	margin:auto;
	align-items:center;
}
.top_contact_box:before , .top_contact_box:after{
	content:"";
	display:block;
	width:90%;
	height:8px;
	background-color:#ffffff;
	position:absolute;
	left: 50%;
	transform: translateX(-50%);
   -webkit-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
}
.top_contact_box:before{
	top:-4px;
}
.top_contact_box:after{
	bottom:-4px;
}
.tc_left{
	width:30%;
	padding:2rem 1rem 2rem 3rem;
	text-align:center;
}
.tc_right{
	width:70%;
	padding:3rem;
}
.contact_menu_box li{
	margin-bottom:1.5rem;
}
.tc_right h3 , .tc_right p{
	letter-spacing:0.2rem;
}
.tc_right p{
	line-height:1.5;
}
.tc_right small{
	font-weight:bold;
}
/* web_order */
.table_contact th{
	width:300px;
	text-align:left;
}
.table_contact td{
	width:calc(100% - 300px);
}
#purpose_other , #message_text{
	width:100%;
	display:none;
}
#purpose_other{
	margin-top:0.5rem;
}
.caution{
	font-size:0.9rem;
	line-height:1.5;
	display:block;
}
.table_contact input:read-only{
	outline:none;
	background-color:#efefef;
}
.order_th , .delivery_title th{
	background-color:#ddd;
}
.table_contact th .red{
	white-space:nowrap;
}
/* add_num */
.add_num_box{
	vertical-align:middle;
}
.add_num_box:before{
	content:"〒";
}
/* datepicker */
.ui-datepicker th{
	padding:.3em .3em !important;
}
.ui-datepicker td{
    padding:1px !important;
}
/* w50_box */
.w50_box{
	justify-content:space-between;
}
.w50_box li{
	width:49%;
}
.w50_box li input , .w100{
	width:100%;
}
/* submit */
.mw_wp_form input[type=submit]:hover{
	transition:all 0.4s;
}
/* 商品詳細ページ */
.post_flowers .pf_size{
	line-height:1.5rem;
	margin-bottom:0.5rem;
	padding-bottom:1rem;
	border-bottom:solid 1px #222;
}
.post_flowers .pf_size dt{
	font-weight:bold;
	width:60px;
}
.post_flowers .pf_size dd{
	width:calc(100% - 60px);
}
.post_flowers .pf_price{
	font-weight:bold;
	text-align:right;
	font-size:2rem;
	margin-bottom:1rem;
}

/* ------------------ Responnsive ------------------ */
/* -----------  PC 1199.98px ----------- */
@media screen and (max-width:1199.98px) {
	/* ----- HOME ----- */
	/* ITEMS */
	.sec01_items:before{
		height:96%;
	}
	.sec01_items > .container{
		padding-top: 3rem;
	}
	.top_items_left{
		width:450px;
		padding:0 1rem;
		margin-bottom:3rem;
	}
	.top_items_right{
		width:100%;
		padding:0 1rem;
	}
	.top_contact_box{
		width:90%;
	}
	.item_img {
  width: 800px;
  height: 500px;
　　}
}
/* -----------  SP 999.98px（ header_logoの位置 ） ----------- */
@media screen and (max-width:999.98px) {
	body {
		-webkit-text-size-adjust: 100%;
    }
	.w60 , .w50 , .w40 , .w33{
		width:96%;
	}
	/* header */
	.l-header__body{
		display:flex;
		padding:0;
	}
	.l-header__center{
		padding-left:2rem;
	}
	.l-header__logo{
		justify-content: flex-start;
		order:0;
	}
	.l-header__drawerBtn{
		order:1;
	}
	/* hamburger */
	.hamburger{
		right:1rem;
	}
	/* ----- HOME ----- */
	/* news */
	.bg_flower:before{
		width:calc(683px * 0.3);
		height:calc(760px * 0.3);
	}
	.bg_flower:after{
		width:calc(620px * 0.3);
		height:calc(1000px * 0.3);
	}
	.news_top_box{
		padding:0 2rem;
	}
	/* store */
	.bg_sec01:before{
		height:96%;
	}
	.bg_sec01 > .container{
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
	.store_box figure{
		width:46%;
		margin:0 2% 2rem 2%;
	}
	.store_box figure img{
		width:100%;
		height:200px;
	}
	/* lesson */
	.lesson_box figure{
		padding:0 4rem;
	}
	.lesson_child{
		width:100%;	
	}
	.lesson_child01{
		order:0;
	}
	.lesson_child02{
		order:1;
	}
	.lesson_child03{
		order:3;
	}
	.lesson_child04{
		order:2;
	}
	/* items */
	.sec01_items:before{
		height:98%;
	}
	.items_box .w25{
		width:46%;
		margin:0 2% 2rem 2%;
	}
	.price_text.center{
		text-align:right;
		padding:0 1rem;
	}
	/* contact */
	.tc_left{
		width:100%;
		padding:0;
		position:absolute;
		top:-1.5rem;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}
	.tc_right{
		width:100%;
	}
	/* items 商品紹介 */
	.item_box figure{
		width:46%;
	}
	.item_box figcaption{
		margin:0;
	}
	/* web_order */
	.table_contact th{
		width:180px;
	}
	.table_contact td{
		width:calc(100% - 180px);
	}
	/* 商品詳細ページ */
	.post_flowers .w60{
		order:1;
	}
	.post_flowers .w40{
		order:0;
	}
}
/* -----------  SP 782.98px（ admin-barのheight変更位置 ） ----------- */
@media screen and (max-width:782.98px) {
	.admin-bar .hamburger{
		top:60px;
	}
}
/* -----------  SP 767.98px iphone ----------- */
@media screen and (max-width:767.98px) {
	body , p{
		font-size:1rem;
	}
	.sps{
		display:block;
	}
	.sps_none{
		display:none;
	}
	/* header */
	.l-header__center{
		padding-left:1rem;
	}
	.hamburger{
		right:0.5rem;
	}
	/* footer */
	.l-footer__foot{
		padding-top:2rem;
	}
	.footer_logo , .c-copyright{
		width:100%;
		padding:0 1rem;
	}
	.footer_logo{
		margin-bottom:0.5rem;
	}
	/* MOVIE */
	.movie_box , .movie_box img{
		height:90vh;
		object-fit:cover;
	}
	/* news */
	.bg_flower{
		padding-top:4rem;
		padding-bottom: 5rem;
	}
	.bg_flower:before{
		width:calc(683px * 0.25);
		height:calc(760px * 0.25);
	}
	.bg_flower:after{
		width:calc(620px * 0.25);
		height:calc(1000px * 0.25);
		bottom:auto;
		top:40%;
	}
	.news_top_box{
		padding:0 1.5rem;
	}
	.topi_child{
		padding:1rem 0 1rem 0.5rem;
	}
	.tc01{
		width:100%;
		margin:0 0 0.2rem 0;
		line-height:1.5rem;
	}
	.tc02{
		width:100%;
		padding:0;
	}
	.tc02 a{
		padding:0 2rem 0 0;
	}
	.news_img_box figure{
		width:100%;
		margin:0 0 1.5rem 0;
		padding:0 2rem;
	}
	/* store */
	.bg_sec01:before , .sec01_items:before{
		height:97%;
	}
	.store_box figure{
		width:94%;
		margin:0 3% 1rem 3%;
	}
	.store_box figcaption{
		font-size:1.2rem;
		line-height:2.5rem;
		margin:0;
	}
	/* lesson */
	.sec_lesson{
		padding-top:0;
		padding-bottom: 0;
	}
	.lesson_box figure{
		padding:0 3rem;
		margin-bottom:1rem;
	}
	.link_arrow{
		height:300px;
	}
	.lesson_child img{
		height:100%;	
	}
	/* items */
	.sec01_items > .container{
		padding-top: 3rem;
		padding-bottom: 1rem;
	}
	.top_items_left{
		width:100%;
		padding:0 2rem;
	}
	.top_items_left ul{
		padding:0 1rem;
	}
	.size_text{
		text-indent:0;
		padding-left:0.5rem;
		font-size:1rem;
	}
	.size_text:before{
		display:block;
		padding:0;
	}
	.price_text.center{
		padding:0 0.5rem;
	}
	/* contact */
	.tc_right{
		padding:3rem 2rem;
	}
	.top_contact_box:before, .top_contact_box:after{
		width:80%;
	}
	.contact_menu_box li , .contact_menu_box{
		margin-bottom:1rem;
	}
	.tc_right h3{
		margin-bottom:1rem;
	}
	.tc_right p{
		font-size:1.1rem;
	}
	.tc_right small{
		display:block;
		margin-top:1rem;
		font-weight:normal;
		font-size:0.9rem;
		line-height:1.5rem;
	}
	/* items 商品紹介 */
	.item_box figure{
		width:96%;
	}
	/* web_order */
	.table_contact th , .table_contact td{
		display:block;
		width:100%;
	}
	/* w50_box */
	.w50_box li{
		width:100%;
		margin-top:0.5rem;
	}
	.w50_box li:first-child{
		margin-top:0;
	}
}