<?php
/*
 Theme Name:   sevensfarm
 Description:  セブンズファームのWebサイトテーマです。
 Author:       cuerda 内田みくに
*/
 ?>
html{
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%
}
*{
	margin:0;
	padding:0
}
body{
	font-family:"Kiwi Maru",serif;
	font-weight:800;
	font-style:normal;
}
.kiwi{
	font-family:"Kiwi Maru",serif;
	font-weight:800;
	font-style:normal;
}
#contents{
	padding:52px 0 0 0;
	max-width:1100px;
	margin:0 auto;
}
.container{
/*
	background:url("/img/page_background.png") repeat 0 0;
	background-color: antiquewhite;
	background-color: antiquewhite;
 */

}
.information .grecaptcha-badge { visibility: hidden; }
section{
	padding-top:30px
}
h1{
	font-size:1.4em;
	letter-spacing:0.1em;
	margin:3em 0.5em 2em 0.5em;
	padding:0.1em 0 0.1em 3em;
	background: url("/img/h1_back.png") no-repeat 0 50%;
	background-size:2.4em;
}
#about h1{
	margin:1em 0.5em 2em 0.5em;
}
h1#form_h1{
	width:5em;
	margin:3em auto 2em auto;
}
#contents p,
#contents dt,
#contents dd,
#contents li{
	font-weight:bold;
	margin:0 0.8em 1em 0.8em;
	color:#000
}
a.link_btn{
display:block;
border:1px solid #888;
border-radius:8px;
background:#fff;
width:10em;
text-align:center;
text-decoration:none;
line-height:4em
}
iframe{
	width:100%;
}
#access iframe{
	height:50vh;
}
iframe.instagram-media{
	border-radius:12px !important;
	max-width:540px;
}
.twitter-timeline iframe{
	max-width:540px;
}
#contents dt{
	margin-top:2em
}
#contents dd{
	margin-bottom:1em
}
#contents ul{
	margin-left:1em
}
img{
	width:100%;
	max-width:640px;
	display:block;
	margin:0 auto;
}
address{
	width:100%;
	height:1em;
	background:#000;
	margin:4em auto 0 auto
}
address p{
	font-family: "BIZ UDPMincho", serif;
	font-size:0.8em;
	line-height:2em;
	font-style:normal;
	text-align:center;
	margin:0;
}
address p span{
	display:block;
	background:#000;
	color:#fff
}

.mail_form{
	max-width:600px;
	margin:0 auto;
	padding: 2em 1em;
	border:1px solid #ccc;
	border-radius:10px 10px 0 0;
	box-shadow: 0px 10px 10px -5px rgba(204, 204, 204, 0.5);

}
input.wpcf7-form-control{
	width:100%;
	line-height:2em;
	padding:2px;
	margin-bottom:2em
}
textarea.wpcf7-form-control{
	line-height:2em;
	padding:2px;
	width:100%
}
input.wpcf7-submit{
	cursor: pointer;
	display:block;
	margin:2em auto;
	width:10em;
	line-height:2em;
	padding:1.5em 0;
}
label{
	display:none;
}
input{
	display:block;
	width:40em;
}


/* 上に戻るボタン */
#page_top{
width:60px;
height:100px;
position:fixed;
right:-70px;
bottom:10vh;
opacity: 1.0;
border-radius:50%
}
#page_top a{
position:relative;
display:block;
width:60px;
height:100px;
text-decoration:none
}
#page_top a::before{
content:"TOP";
padding-top:12px;
font-size:16px;
border-radius:50%;
color:#000;
position:absolute;
width:50px;
height:38px;
background:#fff;
top:0;
right:0;
left:0;
margin:auto;
text-align:center;
opacity:0.7;
}
/* 配色 */
#page_top{
	background: url("/img/seven.png") no-repeat 94% 100%;
}


/* 新カレンダーのスタイル */
.calblock{
	background: url("/img/cal_back.png") repeat 50% 50%;
	padding-bottom:20px;
	box-shadow: 10px 10px 10px -5px rgba(204, 204, 204, 0.5);

}
#calend{
	position:relative;
	max-width:640px;
	width:100vw;
	margin:2em 0;
	padding:0 0 20px 0;
/*	background-color:rgb(251,239,198); */
}
#calend .calhead{
	max-width:640px;
	width:100vw;
	background: url("/img/ribbon.png") no-repeat 50% 50%;
	background-size:calc(100% - 40px);
	position:relative;
	max-height:240px;
	height:38vw;
}
#calend .calhead h2{
	position:absolute;
	max-width:640px;
	width:100vw;
	text-align:center;
	font-size:30px;
	color:rgb(148,55,107);
	top:70px;
}

#calend .calhead h3{
	position:absolute;
	max-width:640px;
	width:100vw;
	text-align:center;
	font-size:14px;
	top:160px;
}
.calendar td{
	position:relative;
	white-space: pre;
}
.calendar td::after{
top:38%;
left:18%;
}

@media screen and (min-width: 0px) and (max-width: 640px) {
	#calend .calhead h2{
		font-size:5vw;
		top:10vw;
	}
	#calend .calhead h3{
		font-size:2vw;
		top:25vw;
	}
	.calendar td::after{
	top:50%;
	left:10%;
	}

}

#calend table.calendar{
	max-width:600px;
	width:calc(100vw - 40px);
	margin:0 auto;
	border-collapse:collapse;
	background:url("/img/line_side.png") repeat-y 0 0;
	background-size:3px 30px;
}
#calend table.calendar tbody{
	background:url("/img/line_top.png") repeat-x 0 100%;
	background-size:20% 3px;
}
#calend table.calendar tr{
	background:url("/img/line_top.png") repeat-x 0 0;
	background-size:20% 3px;
}
#calend .sun{
	color:#cc0000;
}
#calend .sat{
	color:#003399;
}
#calend .today::after{
	content:"Today";
	position:absolute;
	font-size:12px;
	color:#000
}
#calend td,#calend th{
	background:url("/img/line_side.png") repeat-y 100% 0;
	background-size:3px 30px;
}
#calend thead th{
	height:40px;
	font-size:16px;
}
#calend tbody td{
	vertical-align:top;
	padding:0 0 0 8px;
	height:80px;
	width:80px;
	font-size:20px;
}


/*タブ切り替え全体のスタイル*/
.tabs {
	margin-top:1em;
	padding-bottom:0;
	width:100%;
	margin: 0 auto;
	border-bottom:1px solid #ccc;
}
.tab_content{
	border-top:1px solid #ccc;
	width:calc(100% - 2px);
	background:#fff;
}
/*タブのスタイル*/
.tab_item {
	width: calc(100%/3 - 4px);
	height: 50px;
	margin:0 1px 0 1px;
	border:1px solid #999;
	border-bottom:none;
	background-color:#fff;
	line-height:50px;
	font-size:1.0em;
	text-align: center;
	color: #000;
	display: block;
	float: left;
	text-align: center;
	font-weight: bold;
	transition: all 0.2s ease;
	border-radius: 10px 10px 0 0;
}

.tab_item:hover {
	opacity:1;
}
/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab_content {
	display: none;
	padding:0 0 0 0;
	clear: both;
	overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
	display: block;
}
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
	background-color: #312a47;
	color: #fff;
}
#contents .tab_content p{
	margin:0
}
@media screen and (max-width:220px) {
	.navtext{
		font-size:12px;
		text-indent:24px;
	}
	#page_top{
		bottom:20vh;
	}
}
@media screen and (min-width: 221px) and (max-width: 450px) {
	.navtext{
		font-size:18px;
	}
	#page_top{
		bottom:15vh;
	}
}

@media screen and (min-width: 370px) and (max-width: 450px) {
	.navtext{
		font-size:18px;
	}
	#page_top{
		bottom:15vh;
	}
	.header{
		height:102px;
		background: url("/img/frame.png") no-repeat 0 50% #fff;
		background-size:contain
	}
	.navtext-container{
		margin:40px 0 0 0;
		background:none;
		width: 100%;
		height: 52px;
		position: absolute;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.menu-icon{
	margin:40px 30px 0 0
	}
	.menu{
		margin-top:82px
	}
	#about{
		padding-top:60px;
	}
}

@media screen and (min-width: 451px){
	.navtext{
		font-size:28px;
	}
	p{
		color:#333
	}
	#page_top{
		bottom:15vh;
	}
}
@media screen and (min-width: 1300px){
		bottom:13vw;
}
@media screen and (min-width: 2520px){
	.container{
	background:#fff;
	width:2520px;
	margin:0 auto;
	}
	.header{
	width:2520px;
	}
}