/*
Theme Name: lp-epaint
Author: B-style
*/

@charset "UTF-8";


/* ========BASIC======== */
html {
   overflow-y:scroll;
}

body {
   margin:0;
   padding:0;
   line-height:1.4;
   letter-spacing:1px;
   font-family:Verdana, Helvetica, sans-serif;
   font-size:16px;
   color:#333;
}

br {
   letter-spacing:normal;
}

strong{
	color:#FF0004;
	font-size:18px;
}

em{
	color:#fff100;
	font-size:30px;
	font-style: normal;
}

a {
   color:#333;
   text-decoration:none;
}

a:visited {
	color:#606;
}

a:hover {
   color:#F00;
   text-decoration:none;
}

.YearBR br {
	display: none;
}

td a {
   color:#333;
   text-decoration:none;
}

td a:visited {
	color:#606;
}

td a:hover {
   color:#F00;
   text-decoration:none;
}

img {
   border:0;
}

h1,h2,h3,h4,h5,h6 {
   margin:0;
}

.table8 {
	border-collapse: collapse;
	width:840px;
	margin:auto;
}
.table8 th {
border: 1px solid #000;
background-color: #CCCCCC;
text-align: left;
padding: 10px;
font-weight: normal;
}
.table8 td {
border: 1px solid #000;
text-align: left;
padding: 10px;
}

table.abautt840 {
	width: 840px;/*テーブルの幅*/
	margin:auto;
}

table.abautt840 th {
	border-bottom:solid 1px #666666;
	padding:10px;
	font-size:16px;
	text-align:left;
}

table.abautt840 td {
	border-bottom:solid 1px #666666;
	padding:10px;
	font-size:16px;
	text-align:left;
}

table.abautt420 {
	width: 420px;/*テーブルの幅*/
	margin:auto;
}

table.abautt420 th {
	border-bottom:solid 1px #666666;
	padding:10px;
	font-size:16px;
	text-align:left;
}

table.abautt420 td {
	border-bottom:solid 1px #666666;
	padding:10px;
	font-size:16px;
	text-align:left;
}

td.middle {
	text-align:center;
}

td.by {
    border-right:1px;
    border-bottom:1px dotted;
    background-position:left top;
    padding:2em 1.5em;
}

img.p220{
	width:220px;
	height:auto;
}

img.p260{
	width:260px;
	height:auto;
}

img.gleft {
  float: left; /* 画像を左寄せにする場合は left */
  display: inline; /* for IE6,7 */
  margin-right:20px;
  margin-bottom:20px;
}

img.gright {
  float: right; /* 画像を左寄せにする場合は left */
  display: inline; /* for IE6,7 */
  margin-left:20px;
  margin-bottom:20px;
}

img.gright85P {
  float: right; /* 画像を左寄せにする場合は left */
  display: inline; /* for IE6,7 */
  margin:10px 20px 0 20px;
}


img.gleft300 {
	float: left; /* 画像を左寄せにする場合は left */
	display: inline; /* for IE6,7 */
	width:300px;
	height:auto;
	margin-right:20px;
	margin-bottom:20px;
}

img.grightH2 {
	float: right; /* 画像を左寄せにする場合は left */
	display: inline; /* for IE6,7 */
	margin:-20px 30px 0 0;
}

img.grightYear {
	float: right; /* 画像を左寄せにする場合は left */
	display: inline; /* for IE6,7 */
	margin:-40px 30px 0 0;
}

img.gright300 {
	float: right; /* 画像を左寄せにする場合は left */
	display: inline; /* for IE6,7 */
	width:300px;
	height:auto;
	margin-left:20px;
	margin-bottom:20px;
}

ul{/*余白と本来あるマークを消します*/
	margin:0;
	padding:10px 0 0 10px;
	list-style:none;
}

.blog ul{
	margin:0;
	padding:5px 0;
}

li{
	font-size:18px;
	margin:5px 0;
	padding:0;
}

li.FFDin{
	font-size:21px;
	font-weight:bold;
	margin:0 0 20px 0;
	padding:0 0 0 40px;
	background:url(images/li-checkmark.png) no-repeat;
} 

.ListH{
	font-size: 13px;
	font-weight: normal;
}

p.cl {
	clear:left;
} 

p.cr {
	clear:right;
}

@media screen and (max-width: 1199px) {
	body {
	text-align: center;	
	}
	.table8 {
	border-collapse: collapse;
	width:95%;
	}
	.table8 th {
	display: block;
	width: 95%;
	text-align: left;
	padding: 10px;
	font-weight: normal;
	}
	.table8 td {
	display: block;
	width: 95%;
	text-align: left;
	padding: 10px;
	}
	
	.abautt840 {
	border-collapse: collapse;
	width:95%;
	}
	.abautt840 th {
	display: block;
	width: 95%;
	text-align: left;
	padding: 10px;
	font-weight: normal;
	background-color: #CCCCCC;
	}
	.abautt840 td {
	display: block;
	width: 95%;
	text-align: left;
	padding: 10px;
	}
	
	.abautt420 {
	border-collapse: collapse;
	width:95%;
	}
	.abautt420 th {
	display: block;
	width: 95%;
	text-align: left;
	padding: 10px;
	font-weight: normal;
	background-color: #CCCCCC;
	}
	.abautt420 td {
	display: block;
	width: 95%;
	text-align: left;
	padding: 10px;
	}
	
	img{
		width:100%;
		height: auto;
	}
	
	img.gleft {
		float: none; 
		width:100%;
		height:auto;
		margin:0 0 20px 0;
	}
	
	img.gleft300 {
		float: none; 
		width:100%;
		height:auto;
		margin:0 0 20px 0;
	}
	
	img.gright {
		float: none; 
		width:100%;
		height:auto;
		margin:0 0 20px 0;
	}
	
	img.gright85P {
		float: none; 
		width:85%;
		height:auto;
		margin:0 0 20px 0;
	}
	
	img.grightH2{
		width:100px;
		height:auto;
		margin:-20px 5px 0 0;
	}
	
	img.grightYear{
		width:160px;
		height:auto;
		margin:-10px 5px 0 0;
	}
	
	img.gright300 {
		float: none; 
		width:100%;
		height:auto;
		margin:0 0 20px 0;
	}
	
	img.p100{
		width:100%;
		height:auto;
	}
	
	img.i70p{
		width:70%;
		height:auto;
	}
	
	img.i95p{
		width:95%;
		height:auto;
	}
	
	img.p130{
		width:130px;
		height:auto;
	}
	
	img.p160{
		width:180px;
		height:auto;
	}

	img.p220{
		width:300px;
		height:auto;
	}
	
	img.p260{
		width:300px;
		height:auto;
	}
}

/* ========HEADER CUSTOMIZE======== */
h1 {
	color:#999;
	margin:0;
	padding:5px 0;
	font-size:11px;
	text-align: right;
}

h2 {
	margin-bottom: 30px;
	padding:15px 0 15px 10px;
	text-align:left;
	background-color: #1136AB;
	color:#FFF500;
	font-size:22px;
}

.hW{
	color:#FFFFFF;
}

.hY{
	background-color: #fff100;
	color:#000;
}

h2.Th2 {
	padding: 40px 10px;
	margin-bottom: 80px;
	background-color:#09F;
	color:#FFF;
    font-size: 35px;
	text-align:center;
	position: relative;
}

h2.Th2:before {
    position: absolute;
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    border-top-color: #09F;
    border-width: 40px;
    margin-left: -40px;
}

h3 {
	font-size:19px;
	font-weight:bold;
}

.h3t{
	padding:10px 0 10px 10px;
	font-size:18px;
	background-color: #000000;
	color:#FFF;
}

.h3tB{
	font-size:36px;
	color:#000000;
}

h4 {
	padding:10px 0;
	font-size:16px;
	font-weight:bold;
	color:#000;
}

h5 {
	margin:20px 0;
	padding:10px 20px;
	font-size:16px;
	font-weight:bold;
	color:#000;
	border:solid 1px #000;
}

.Hred{
	color:#FF0004;
}

@media screen and (max-width: 1199px) {
	h1 {
		text-align: left;
	}
	
	h2{
		font-size:18px;
	}

	h2.Th2{
		font-size:20px;
		padding: 20px 10px;
		margin-bottom: 60px;
	}
	
	h2.Th2:before {
		border-width: 20px;
		margin-left: -20px;
	}
	
	h3{
		font-size:18px;
	}
	
	#aboutR h3{
		font-size:15px;
	}
	
	.h3tB{
		font-size:22px
	}
	
	h4{
		font-size:15px;
	}
	
}
/* ========TEMPLATE LAYOUT======== */
#top {
   margin:0 auto;
   padding:0;
}

#Theader {
   margin:auto;
   padding:0;
   width:100%;
   height:120px;
}

.headerBox {
	display: block;
	width:1100px;
	margin:auto;
	padding:0;
}

#headerLeft {
	float:left;
	width:240px;
	margin-top:5px;
}

#headerRight {
	float:right;
	width:850px;
	text-align: right;
}

#headerSlide {
	width:100%;
	margin:auto;
	background-color:#BBB195;
	text-align:center;
}

.hamburger{
	display: none;
}

#headerMenu {
	display: block;
	width:100%;
	padding:20px 0;
	border-top: 1px solid #A4A4A4;
	border-bottom: 1px solid #A4A4A4;
}

.headerMenuBox {
	margin:auto;
	padding:0;
	text-align:center;
	font-weight:bold;
	font-size:15px;
	color:#333;
}

.headerMenuBox a{
	color:#333;
}

.headerMenuBox a:hover {
	color:#F00;
}

.Box1100{
	width:1100px;
	margin:auto;
}

.Box850{
	float: left;
	width:850px;
}

.Box420{
	float: left;
	width:420px;
}


.Box220{
	float: right;
	width:220px;
}

.menuBox {
	float:left;
	width:260px;
	height:315px;
	margin-right:22px;
	background-color:#FFF;
	box-shadow:rgb(113, 135, 164) 2px 2px 15px -2px;
	-webkit-box-shadow:rgb(113, 135, 164) 2px 2px 15px -2px;
	-moz-box-shadow:rgb(113, 135, 164) 2px 2px 15px -2px;
}

.menuBox h3{
	margin:0;
	padding:15px 0 0 0;
	text-align: center;
}

.Wjirei {
	float:left;
	width: 330px;
	height:500px;
	margin:0px 15px 30px 15px;
	text-align:left;
}

.Wjbox150{
	float:left;
	margin:10px 0;
	width: 145px;
	height:185px;
}

.Wjbox180{
	float:left;
	margin:10px 0;
	width: 185px;
	height:185px;
}

.Wjbox320{
	float:left;
	margin:30px 0;
	width: 320px;
	height:375px;
	text-align: right;
}

.Wjbox500{
	float:right;
	margin:0;
	width: 500px;
	height:375px;
}

.Gsita {
position: relative;
width: 185px;
}

.Gsita500 {
position: relative;
width: 500px;
}

.Gue {
position: absolute;
width: 86px;
height: 35px;
top: 0px;
left: 0px;
}

#aboutL {
	float:left;
	width:580px;
	text-align:left;
}

#aboutR {
	float:right;
	width:470px;
	text-align:left;
}

.wnd{
	color:#00a0e9;
	padding:0;
}

.SBbox{
	float: left;
	width:220px;
	border: 1px solid #999;
	margin:0 10px 20px 0;
}

.SBTbox{
	float: left;
	width:210px;
	height:110px;
	margin:0;
	padding:0 5px 5px 5px;
}

.BlogBox ul{
	margin:0;
	padding:0;
	text-align:left;
}

.BlogBox li{
	margin:0;
	padding:0;
	list-style:none;
	font-size:16px;
	text-align:left;
}

.Cichiran{
	float:left;
	margin-right:20px;
}

#footerMenu {
	display: block;
	width:100%;
	padding:20px 0;
	border-top: 1px solid #A4A4A4;
	border-bottom: 1px solid #A4A4A4;
}

#footer {
   margin:auto;
   padding:0;
   width:100%;
   height:120px;
}

.footerBox {
	display: block;
	width:1100px;
	margin:auto;
	padding:0;
}

#footerLeft {
	float:left;
	width:240px;
	margin-top:5px;
}

#footerRight {
	float:right;
	width:850px;
	text-align: right;
}

#footer_obi {
	clear:both;
	width:100%;
	height:25px;
	margin:auto;
	margin-top:-15px;
	text-align:center;
	padding-top:10px;
	background-color:#009;
	color:#FFF;
}

#footer-menu{
	display: none;
}

.w300{
	width:300px;
	height:auto;
	margin:0 0 20px 0;  
}

@media screen and (max-width: 1199px) {
	.SBoxBR br {
    	display: none;
  	}
	
	.YearBR br {
    	display: block;
  	}
	
	#Theader{
		height:55px;
	}
	
	.headerBox {
		display: none;
	}
	
	#headerMenu {
		display: none;
	}
	
	.hamburger {
		display: block;
		margin: 10px 0 10px 0;
		text-align: left;
	}	
	
	.logo{
		float:left;
	}
	
	.wnd{
		font-size:13px;
		padding:5px 0;
		margin:0;
	}

	.Box1100{
		width:100%;
	}

	.Box850{
		float: none;
		width:100%;
		margin-bottom: 20px;
		text-align: left;
	}
	
	.Box420{
		float: none;
		width:100%;
		text-align: left;
	}

	.Box220{
		float: none;
		width:100%;
		text-align: center;
		margin-bottom: 20px;
	}

	.menuBox {
		float:none;
		margin:auto;
		width:300px;
		height:350px;
		margin-bottom:30px;
	}
	
	.Wjirei {
		float:none;
		margin:auto;
		width: 330px;
		height:500px;
		margin-bottom:30px;
		text-align:left;
	}
	
	.Wjbox320{
		float:none;
		margin:30px 0;
		width: 320px;
		height:375px;
		text-align: right;
	}

	.Wjbox500{
		float:none;
		margin:0;
		width: 100%;
		height:auto;
	}

	.Gsita500 {
		position: relative;
		width: 100%;
	}
	
	#aboutL {
		float:none;
		width:100%;
		text-align:left;	
	}

	#aboutR {
		float:none;
		width:100%;
		text-align:left;	
	}

	.SBbox{
		width:47%;
		border: 1px solid #999;
		margin:0 2% 20px 0;
	}

	.SBTbox{
		float: left;
		width:94%;
		height:80px;
		margin:0;
		padding:0 5px 3% 3%;
	}
	
	.Cichiran{
		float:none;
		margin:10px 20px 0 -10px;
	}
	
	#footerMenu {
		display: none;
	}
	
	#footer{
		display: none;
	}	

	#footer-menu{
		z-index: 200;
		display: inline;
		display: block;
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;
		width:100%;
		text-align:center;
	}

	#footer1 {
		float:left;
		width:50%;
		height:50px;
		padding:10px 0 10px 0;
		background-color:#F7B900;
		text-align:center;
		font-size:24px;
		font-weight: bold;
	}
		
	#footer1 a{
		color:#FFF;		
		text-decoration: none;
	}

	#footer2 {
		float:left;
		width:50%;
		height:50px;
		padding:10px 0 10px 0;
		background-color:#1D2088;
		text-align:center;
		font-size:24px;
		font-weight: bold;
	}
	
	#footer2 a{
		color:#000;
		text-decoration: none;
	}
	
}

.gmapsBox{
	margin:auto;
	margin-top: -23px;
	margin-bottom: -15px;
	padding:25px 0 10px 0;
	font-size: 16px;
	font-weight: bold;
	color: #3883AC;
	text-align: center;
}
.google-maps {
position: relative;
padding-bottom: 500px;
height: 0;
overflow: hidden;
z-index: 1;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 500px;
}

@media screen and (max-width: 1199px) {
	.gmapsBox{
		margin-top: -25px;
		margin-bottom: 90px;
	}
}

/*****************************
*ボタン
*****************************/
.button {
	position: relative;
	width:800px;
	height:40px;
	background-color:#F59100;
	border-radius: 4px;
	margin:auto;
	padding:10px 0;
	font-size:20px;
	color: #fff;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 3px 0 #000;
	text-align: center;
	position: relative;
	z-index: 1; /* 必要であればリンク要素の重なりのベース順序指定 */
}

.button a{
	color:#FFFFFF;
	position: absolute;
	top: 6;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2; /* 必要であればリンク要素の重なりのベース順序指定 */
}

.button:hover {
    background-color: #9E0002;
} 

.button2 {
	position: relative;
	width:150px;
	background-color:#FFF;
	margin:auto;
	margin-top:20px;
	padding:10px 0;
	font-size:16px;
	color: #000;
	border:solid 1px #000;
	text-align: center;
	position: relative;
	z-index: 1; /* 必要であればリンク要素の重なりのベース順序指定 */
}

.button2 a{
	color:#000;
	position: absolute;
	top: 6;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2; /* 必要であればリンク要素の重なりのベース順序指定 */
}

.button2:hover {
    background-color: #999;
} 

@media screen and (max-width: 1199px) {
	.button{
		width:80%;
	}
}

/*****************************
*カレンダーに枠を付ける
*****************************/
#wp-calendar {
    border-collapse: collapse;
    width: 230px;
}
 
/*土曜日のヘッダーセル*/
#wp-calendar thead tr th:nth-child(6){
  background-color: #C0DDF9;
}
 
/*日曜日のヘッダーセル*/
#wp-calendar thead tr th:nth-child(7){
  background-color: #F5D0D3;
}

#wp-calendar td {
    text-align:center;
}

#wp-calendar caption {
    font-weight: bold;
    text-align: left;
}
#wp-calendar tbody tr #today {
    background-color: #CCC;
}

#tableTS {
	border:#999 1px solid;
	width:902px;
	margin:auto;
}

#Pbox {
	float:left;
	margin-left:90px;
}

.Pbox {
	margin:auto;
	width:300px;
	border:1px solid;
}

.Pbox td{
	border:1px solid;
	padding:5px;
}


/* 回り込み解除 */
#contents:after {
   content:"";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
}

/* ========sub CONTENTS CUSTOMIZE======== */
#right_box {
	width:180px;
	background-image:url(images/right-bg.gif);
	line-height:1.3;
	text-align:left;
	padding:10px 10px;
}


/* ========PAGETOP CUSTOMIZE========= */
#pageTop {
	display: block;
	font-size:11px;
	position: fixed;
	right:-20px;
	bottom: 20px;
	z-index: 3;
}

#pageTop a {
   padding:0 0 0 12px;
}

#pageTopM{
	display: none;
}

@media screen and (max-width: 1199px) {
	#pageTop{
		display: none;
	}
	
	#pageTopM {
	  display: block;
	  position: fixed;
	  bottom: 65px;
	  right: 10px;
		z-index: 1000;
	}
}

/*****************************
*ブログ
*****************************/
#main-lp {
	float:left;
	width:840px;
	text-align:left;
}

#main-lp h2 a{
	color:#FFF;
}

#main-lp h2{
	color:#FFF;
}

#main-lp h2 a:hover{
	color:#F00;
}

#main-lp h2 a:visited {
   color:#FFF;
   text-decoration:none;
}

#main-lp b,
strong {
	font-weight: bolder;
	color: initial;
}

.BlogBox{
	margin:0;
	padding:0;
	list-style: none;
}

.contertBoxB{
	margin:auto;
	padding:0 0 40px 0;
	text-align: left;
}

.contertBoxB h2:before {
 content: none;
}

#side-menu-rp {
	float:right;
	width:230px;

}

#side-menu-rp ul{
	margin:0;
	padding:0;
}

#side-menu-rp li{
	margin:0;
	padding:5px 0 5px 5px;
	list-style:none;
	font-size:16px;
	text-align:left;
}

.Bh3t {
	background-color:#000;
	    border-radius: 10px;
    	-webkit-border-radius: 10px;
    	-moz-border-radius: 10px;
	padding:10px;
	margin:5px 0;
	color:#FFF;
	text-align:center;
	font-size:18px;
}

@media screen and (max-width: 1024px) {
/*****************************
*ブログ
*****************************/
	#main-lp {
		float:none;
		width:100%;
		text-align:left;
	}
	
	#main-lp img {
		width: auto;
		height:auto;
	}

	.contertBoxB {
		width:90%;
		background-size:contain;
		padding:30px;
		background-image: url("images/bg-kami2.png");
		background-size: auto;
	}
	

	#side-menu-rp {
		float:none;
		width:100%;
	}	
}

/* ========FOOTER CUSTOMIZE======== */

#footer_navi {
	clear:both;
	width:800px;
	margin:auto;
}


copyright {
	width:800px;
	margin:auto;
}

/* template01 */
.form__wrap {
  width: 100%;
  max-width: 840px;/*フォームの最大幅*/
  margin-right: auto;
  margin-left: auto;
}
.wpcf7 .template01 {
  color: #333;
  font-size: 16px;
}
.wpcf7 .template01 a {
  margin: 0;
  padding: 0;
  text-decoration: underline;
  color: inherit;
  transition: opacity .25s;
}
.wpcf7 .template01 a:hover {
  opacity: .5;
  transition: opacity .25s;
}
.wpcf7 .template01 div.form__row {
  margin: 0;
  padding: 0;
  margin-top: 2em;
}
.wpcf7 .template01 div.form__row.row-privacy {
  margin-top: 3.5em;
  text-align: center;
}
.wpcf7 .template01 div.form__row.row-submit {
  margin-top: 3em;
  text-align: center;
}
.wpcf7 .template01 p.form__label,
.wpcf7 .template01 p.form__body {
  margin: 0;
  margin-bottom: .5em;
  padding: 0;
  box-sizing: border-box;
}
.wpcf7 .template01 p.form__label label {
  position: relative;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wpcf7 .template01 p.form__label.is-required label {
  padding-right: 40px; 
}
.wpcf7 .template01 p.form__label.is-required label::after {
  content: "必須";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  padding: 0 5px;
  background-color: rgba(179,0,36);
  color: #fff;
  font-size: 11px;
  text-align: center;
  box-sizing: border-box;
}
/* テキストフィールド */
.wpcf7 .template01 input[type=text],
.wpcf7 .template01 input[type=tel],
.wpcf7 .template01 input[type=email],
.wpcf7 .template01 input[type=url],
.wpcf7 .template01 input[type=date],
.wpcf7 .template01 input[type=number],
.wpcf7 .template01 textarea {
  width: 100%;
  margin: 0;
  padding: .5em 1em;
  border: 1px solid #ccc;
  border-radius: 0;
  box-shadow: none;
  background-color: #fff;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* テキストフィールド placeholder */
.wpcf7 .template01 input[type=text]::placeholder,
.wpcf7 .template01 input[type=tel]::placeholder,
.wpcf7 .template01 input[type=email]::placeholder,
.wpcf7 .template01 input[type=url]::placeholder,
.wpcf7 .template01 input[type=date]::placeholder,
.wpcf7 .template01 input[type=number]::placeholder,
.wpcf7 .template01 textarea::placeholder {
  color: #ccc;
}
.wpcf7 .template01 input[type=text]:-ms-input-placeholder,
.wpcf7 .template01 input[type=tel]:-ms-input-placeholder,
.wpcf7 .template01 input[type=email]:-ms-input-placeholder,
.wpcf7 .template01 input[type=url]:-ms-input-placeholder,
.wpcf7 .template01 input[type=date]:-ms-input-placeholder,
.wpcf7 .template01 input[type=number]:-ms-input-placeholder,
.wpcf7 .template01 textarea:-ms-input-placeholder {
  color: #ccc;
}
.wpcf7 .template01 input[type=text]::-ms-input-placeholder,
.wpcf7 .template01 input[type=tel]::-ms-input-placeholder,
.wpcf7 .template01 input[type=email]::-ms-input-placeholder,
.wpcf7 .template01 input[type=url]::-ms-input-placeholder,
.wpcf7 .template01 input[type=date]::-ms-input-placeholder,
.wpcf7 .template01 input[type=number]::-ms-input-placeholder,
.wpcf7 .template01 textarea::-ms-input-placeholder {
  color: #ccc;
}
/* テキストフィールド フォーカス時 */
.wpcf7 .template01 input[type=text]:focus,
.wpcf7 .template01 input[type=tel]:focus,
.wpcf7 .template01 input[type=email]:focus,
.wpcf7 .template01 input[type=url]:focus,
.wpcf7 .template01 input[type=date]:focus,
.wpcf7 .template01 input[type=number]:focus,
.wpcf7 .template01 textarea:focus {
  outline: 0;
  border: 1px #080808 solid;
}
/* チェックボックス */
.wpcf7 .template01 input[type=checkbox] {
  display: none;
}
.wpcf7 .template01 input[type=checkbox] + span {
  cursor: pointer;
  position: relative;
  margin: 0;
  padding: 0 1em 0 1.8em;
  font-size: inherit;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template01 input[type=checkbox] + span::before {
  content: "";
  opacity: 1;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1.24em;
  height: 1.24em;
  border: 1px solid #ccc;
  border-radius: 0;
  background-color: #fff;
  box-sizing: border-box;
  transition: opacity .25s ease;
  z-index: 1;
}
.wpcf7 .template01 input[type=checkbox] + span::after {
  content: "";
  opacity: 0;
  display: block;
  position: absolute;
  top: 0.15em;
  left: 0.44em;
  width: 0.4em;
  height: .8em;
  border-bottom: 3px solid #000;
  border-right: 3px solid #000;
  box-sizing: border-box;
  transform: rotate(40deg);
  transition: opacity .25s ease;
  z-index: 10;
}
.wpcf7 .template01 input[type=checkbox]:checked + span {
  color: #306ad4;
  transition: all .25s ease;
}
.wpcf7 .template01 input[type=checkbox]:checked + span::before {
  opacity: 1;
  transition: opacity .25s ease;
}
.wpcf7 .template01 input[type=checkbox]:checked + span::after {
  opacity: 1;
  border-bottom: 2px solid #306ad4;
  border-right: 2px solid #306ad4;
  transition: opacity .25s ease;
}
/* ラジオボタン */
.wpcf7 .template01 input[type=radio] {
  display: none;
}
.wpcf7 .template01 input[type=radio] + span {
  cursor: pointer;
  position: relative;
  margin: 0; 
  padding: 0 1em 0 1.8em;
  font-size: inherit;
  transition: opacity .25s ease;
}
.wpcf7 .template01 input[type=radio] + span::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template01 input[type=radio] + span::after {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template01 input[type=radio]:checked + span {
  color: #306ad4;
  transition: opacity .25s ease;
}
.wpcf7 .template01 input[type=radio]:checked + span::after {
  opacity: 1;
  top: .2em;
  left: .2em;
  width: .6em;
  height: .6em;
  background-color: #306ad4;
  border-radius: 50%;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
/* セレクト */
.wpcf7 .template01 span.select-wrap {
  position: relative;
  width: 250px;
  margin: 0;
  padding: 0;
}
.wpcf7 .template01 select {
  cursor: pointer;
  width: 250px;
  max-width: 100%;
  margin: 0;
  padding: .5em 2.5em .5em 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: none;
  background-color: #fff;
  color: inherit;
  font-size: inherit;
  line-height: 1;
  box-sizing: border-box;
  transition: border-color 0.2s ease, outline 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.wpcf7 .template01 select::-ms-expand {
  display: none;
}
.wpcf7 .template01 span.select-wrap::after {
  content: "";
  pointer-events: none;
  position: absolute;
  display: block;
  width: .6em;
  height: .6em;
  top: 50%;
  right: 1em;
  margin-top: -3px;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  transform: rotate(45deg) translateY(-50%);
  transform-origin: 50% 0;
  box-sizing: border-box;
}
.wpcf7 .template01 select:focus {
  outline: 0;
  border: 1px #080808 solid;
}
.wpcf7 .template01 span.select-wrap:focus-within::after {
  border-bottom: 1px solid #080808;
  border-right: 1px solid #080808;
}
/* 送信ボタン */
.wpcf7 .template01 .submit-btn {
  position: relative;
  width: 320px;
  height: 65px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}
.wpcf7 .template01 input[type="submit"] {
  cursor: pointer;
  width: 320px;
  max-width: 100%;
  padding: 18px;
  border-radius: 0;
  box-shadow: none;
  border: 1px solid #000;
  background-color: rgba(179,0,36);
  color: #fff;
  font-size: 18px;
  text-align: center;
  box-sizing: border-box;
  transition: opacity .25s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.wpcf7 .template01 input[type="submit"]:disabled {
  cursor: not-allowed;
  box-shadow: none!important;
  border: 1px solid #DFDFDF;
  background-color: #DFDFDF;
  color: #666!important;
}
.wpcf7 .template01 input[type="submit"]:hover {
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
  transition: opacity .25s, background-color .25s;
}
.wpcf7 .template01 input[type="submit"]:focus {
  outline: 1px #eee solid;
  border: 1px #080808 solid;
}
.wpcf7 .template01  span.wpcf7-list-item {
  margin: 0 1em .2em 0;
}
.wpcf7 .template01 .ajax-loader {
  display: block;
}
@media only screen and (max-width: 768px) {
  .wpcf7 .template01 span.wpcf7-list-item {
    display: block;
  }
}