/*
Theme Name: KOBE avocado farm
Theme URI: 
Author: GENIO
Author URI: 
Description: 
Version: 1.0
License: 
License URI: 
Tags: 
Text Domain: 
*/

@charset "utf-8";


/* reset
------------------------------------------------------------ */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, address,
abbr, code, pre, samp, blockquote, q, cite,
img, del, ins, dfn, var, strong, em, small, b, i, sub, sup,
dl, dt, dd, ol, ul, li,
form, fieldset, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, details, dialog, figcaption, figure, footer, header,
hgroup, menu, nav, section, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-style: normal; vertical-align: baseline; background: transparent;}

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

blockquote, q { quotes: none;}


/* common
------------------------------------------------------------ */
html {
	width: 100%;
	height: 100%;
}
body {
	color: #666;
	font-family: 'EB Garamond', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	/*font-family: "Libre Franklin", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
	font-size: 14px;
	line-height: 160%;
	text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
	width: 100%;
	height: 100%;
	background: #FFF;
}

img { vertical-align: bottom;}
a img { border: none; vertical-align: bottom;}

a.trans { transition : all 0.3s;}
a.trans:hover { opacity: 0.6;}

a			{ color: #666; text-decoration: none;}
a:visited	{ color: #666;}
a:hover		{ color: #000; text-decoration: none;}
a:active	{ color: #666;}
a:focus		{ color: #666;}

a.underline { display: inline-block; text-decoration: none; position: relative;}
a.underline::after {
	content: ''; width: 100%; height: 1px; background: #555;
	position: absolute; bottom: -4px; left: 0; opacity: 0; visibility: hidden; transition: .3s;
}
a.underline:hover::after { bottom: -2px; opacity: 1; visibility: visible;}
a.underline.current { color: #000;}
a.underline.current::after {
	content: ''; width: 100%; height: 1px; background: #555;
	position: absolute; bottom: -2px; left: 0; opacity: 1; visibility: visible;
}

a.underline2 { display: inline-block; text-decoration: none; position: relative;}
a.underline2::after {
	content: ''; width: 100%; height: 1px; background: #555;
	position: absolute; bottom: 0; left: 0; opacity: 0; visibility: hidden; transition: .3s;
}
a.underline2:hover::after { bottom: -1px; opacity: 1; visibility: visible;}
a.underline2.current { color: #000;}
a.underline2.current::after {
	content: ''; width: 100%; height: 1px; background: #555;
	position: absolute; bottom: -1px; left: 0; opacity: 1; visibility: visible;
}

ul { list-style: none;}

#bitnami-banner { display: none;}


/* contents
------------------------------------------------------------ */

.header_wrap { width: 100%;}
.header { max-width: 1300px; height: 100px; margin: 0 auto; padding: 0 20px; position: relative; overflow: hidden;}
.header .logo { float: left; margin: 25px 0 0;}
.header .logo p { margin: 10px 0 0; line-height: 1.2; font-size: 12px;}

.header .sns { position: absolute; top: 20px; right: 140px;}
.header .sns a { display: inline-block; width: 66px; height: 60px; margin-left: 10px; line-height: 20em; overflow: hidden;}
.header .sns a.twitter { background: url(./img/icon_twitter.svg) no-repeat; opacity: 0.7;}
.header .sns a.instagram { background: url(./img/icon_instagram.svg) no-repeat; opacity: 0.7;}
.header .sns a.onlinestore { margin-left: 20px; background: url(./img/icon_onlinestore.svg) no-repeat; opacity: 0.7;}
.header .sns a:hover { opacity: 1;}

.btn_menu,
.modal_menu { display: none;}

.footer { width: 100%; padding: 120px 0 20px; font-size: 10px; letter-spacing: 0.5px; text-align: center;}

.main_img { display: block; width: 100%; height: 100%;}
.main_img div { display: block; width: 100%; height: 100%;}
.sp_main_img { display: none;}

.contents {
	display: -webkit-flex; display:-ms-flexbox; display: flex;
	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
	max-width: 1300px; margin: 0 auto; padding: 0 20px;
}

.contents .main { width: calc( 100% - 350px);}
.contents .side { width: 300px; padding: 20px 0 0;}

.sticky_box { position: sticky; top: 20px;}
.sticky_box > div { margin: 0 0 40px;}

.side .title_side { margin: 0 0 10px; font-weight: bold;}

.article_box { margin: 60px 0; padding: 60px 0 0; border-top: dashed 1px #BBB;}
	.contents .main > div:first-child { margin-top: 0; padding-top: 20px; border-top: none;}
.article_box .date { font-size: 13px;}
.article_box .title { font-size: 16px; font-weight: bold; margin: 5px 0 40px;}
.article_box .more { padding: 40px 20px 0; text-align: right;}
.article_box a { text-decoration: underline;}
.article_box a:hover { text-decoration: none;}
.article_box a img { transition : all 0.3s;}
.article_box a:hover img { opacity: 0.6;}
.article_box img { max-width: 100%; height: auto;}

.search_box input[type="text"] {
	width: 160px; height: 30px; padding: 0 10px; line-height: 30px; border: solid 1px #999; border-radius: 4px;
	background: #FFF; box-sizing: border-box;
}
.search_box input[type="image"] { margin-left: 2px; vertical-align: top; opacity: 0.7;}
.search_box input[type="image"]:hover { opacity: 1;}

.info_box .contact { margin: 6px 0 0;}

.youtube { width:100%; padding-top:56.25%; position:relative;}
.youtube iframe { width:100%; height:100%; position:absolute; top:0; right:0;}

.toPageTop { display: none; position: fixed; right: 30px; bottom: 30px;}
.toPageTop a {
	display: block; width: 30px; height: 30px; line-height: 20em; overflow: hidden;
	background: url(./img/btn_pagetop.svg) no-repeat;
	background-size: 30px 30px;
}
.toPageTop a span { display: none;}

.wpcf7 { width: 1000px; margin: 0 auto; padding: 0 20px;}

.mail_wrap table { width: 80%; margin: 80px auto;}
.mail_wrap table th { width: 20%; padding: 10px 0; text-align: left; vertical-align: top;}
.mail_wrap table td { width: 80%; padding: 10px 0;}
.mail_wrap input[type="text"],
.mail_wrap input[type="email"],
.mail_wrap textarea {
	width: 100%; margin: 0; padding: 5px; font-size: 14px; border: solid 1px #DDD; border-radius: 0; background: #F7F7F7; box-sizing: border-box;
	font-family: 'EB Garamond', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}
.mail_wrap input[type="submit"],
.mail_wrap input[type="button"] {
	display: inline-block; margin: 0 10px 0 0; padding: 5px 15px; font-size: 14px; color: #FFF; border: none; border-radius: 3px;
	background: #666; cursor: pointer;
	font-family: 'EB Garamond', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}
.mail_wrap input[type="button"] { background: #999;}
.mail_wrap input[type="submit"]:hover,
.mail_wrap input[type="button"]:hover { opacity: 0.7;}

.mail_wrap input[readonly],
.mail_wrap textarea[readonly] { border: none; border-bottom: solid 1px #DDD; background: #FFF;}

.wpcf7-form.sent .mail_wrap { display: none;}

.mail_sent { display: none;}
.wpcf7-form.sent .mail_sent { display: block; margin: 200px 0;}
.wpcf7-form.sent .mail_sent p { text-align: center;}
/*.wpcf7-form.sent .wpcf7-mail-sent-ok { display: none;}*/
.wpcf7-form.sent .wpcf7-response-output { display: none;}

.under_construction { padding: 100px 0; text-align: center;}

.pagenation { padding: 20px 0; text-align: center;}
.pagenation ul { padding: 0;}
.pagenation ul li { display: inline-block;}
.pagenation a {
	display: inline-block; width: 30px; height: 30px; margin: 0 8px; line-height: 30px; text-decoration: none;
}
.pagenation a.num {}
.pagenation a.current,
.pagenation a.num:hover { color: #000; font-weight: bold;}



/* 768px以下 */
@media screen and (max-width:768px) {

	body {
		padding: 50px 0 0;
		font-family: 'EB Garamond', "Noto Sans JP", "メイリオ", sans-serif;
	}
	
	.header_wrap { height: 50px; background: #FFF; position: fixed; top: 0; left: 0; z-index: 10;}

	.header { height: 50px; padding: 0 20px 0 10px;}
	.header .logo { margin: 6px 0 0;}
	.header .logo h1 { font-size: 21px;}
	.header .logo p { margin: 2px 0 0; font-size: 10px; zoom: 0.8;}

	.header .sns { display: none;}
	
	.footer { padding: 60px 0 10px;}

	.main_img { display: none;}
	.sp_main_img,
	.sp_main_img div { display: block; width: 100%; height: 100%;}

	.contents { max-width: auto; padding: 0 10px;}
	
	.contents .main { width: 100%;}
	.contents .side { display: none;}

	
	.article_box { margin: 30px 0; padding: 30px 0 0;}
	.article_box .date { margin: 0 0 10px;}
	.article_box .more { padding: 20px 10px 0;}
	
	.toPageTop { display: none; position: fixed; right: 13px; bottom: 13px;}
	
	.pagenation a { margin: 0 3px;}


	/* モーダルメニュー
	------------------------------------------------------------ */
	
	.btn_menu { display: block; position: fixed; top: 0; right: 0; z-index: 99;}
	.btn_menu > div { padding: 18px 20px 0 0;}
	
	.menu-trigger { display: block; width: 16px; height: 13px; position: relative;}
	.menu-trigger span {
		display: block; width: 100%; height: 1px; background-color: #666;
		position: absolute; left: 0; transition: all .2s;
	}
	.menu-trigger span:nth-of-type(1) { top: 0;}
	.menu-trigger span:nth-of-type(2) { top: 6px;}
	.menu-trigger span:nth-of-type(3) { bottom: 0;}

	.menu-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(6px) rotate(-45deg);
				transform: translateY(6px) rotate(-45deg);
	}
	.menu-trigger.active span:nth-of-type(2) {
		display: none;
	}
	.menu-trigger.active span:nth-of-type(3) {
		-webkit-transform: translateY(-6px) rotate(45deg);
				transform: translateY(-6px) rotate(45deg);
	}

	.modal_menu {
		display: none; width: 100%; height: 100%; background: #FFF; overflow: scroll; z-index: 98;
		position: fixed; top: 0; left: 0;
		-webkit-overflow-scrolling: touch;	/* iOSで滑らかなスクロール */
	}
	.modal_menu .logo { padding: 8px 20px 0 10px;}
	.modal_menu .logo h1 { font-size: 21px;}
	.modal_menu .logo p { margin: 2px 0 0; line-height: 1; font-size: 10px;}

	.modal_menu .menu { margin: 30px 25px 0;}
	.modal_menu .menu a { display: inline-block; font-size: 14px;}
	.modal_menu .menu ul li { margin: 0 0 5px;}
	.modal_menu .category_box,
	.modal_menu .archive_box,
	.modal_menu .search_box { margin: 0 0 25px;}
	.modal_menu .search_box input[type="text"] { width: 240px; font-size: 16px;}

	.modal_menu .info_box { margin: 0 0 20px;}
	.modal_menu .title { margin: 0 0 10px; font-weight: bold;}
	.modal_menu .sns a { display: inline-block; width: 66px; height: 60px; margin-right: 10px; line-height: 20em; overflow: hidden;}
	.modal_menu .sns a.twitter { background: url(./img/icon_twitter.svg) no-repeat; opacity: 0.7;}
	.modal_menu .sns a.instagram { margin-right: 20px; background: url(./img/icon_instagram.svg) no-repeat; opacity: 0.7;}
	.modal_menu .sns a.onlinestore { background: url(./img/icon_onlinestore.svg) no-repeat; opacity: 0.7;}
	.modal_menu .menu_toggle { display: none; padding: 0 0 20px; border-top: solid 1px #FFF;}
	.modal_menu .menu_toggle a { font-size: 16px;}
	.modal_menu .menu_toggle span { display: block; width: 20px; height: 1px; margin: 30px auto 0; background: #CCC;}

	.wpcf7 { width: 100%; padding: 0;}

	.mail_wrap table { width: 100%; margin: 40px auto;}
	.mail_wrap table th { display: block; width: auto; padding: 0 0 10px;}
	.mail_wrap table td { display: block; width: auto; padding: 0 0 15px;}
	.mail_wrap input[type="text"],
	.mail_wrap input[type="email"],
	.mail_wrap textarea { font-size: 16px;}

	input[type="submit"],
	input[type="button"] {
		-webkit-box-sizing: content-box;
		-webkit-appearance: button;
		appearance: button;
		border: none;
		box-sizing: border-box;
		cursor: pointer;
	}
	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;
	}
	input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px white inset;
	}

}