/*
Theme Name: blex
Description: 
Theme URI: http://www.mori-block.co.jp/wp/
Version: 1.0
License: blex
License URI: http://www.mori-block.co.jp/wp/
*/


/****************************************

          reset css

*****************************************/


* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

/*------------------ body ------------------*/
body {
color: #333;
font-weight: normal;
font-size: 14px;
background: #FFF;	
font-family: "游ゴシック", Hiragino Kaku Gothic Pro,"メイリオ", Meiryo, Osaka,"ＭＳ Ｐゴシック", MS PGothic,"sans-serif";
line-height: 1.7;
}

/*------------------ html ------------------*/
html {
    -webkit-text-size-adjust: 100%;
	height: 100%;
}

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

h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}

ol, ul, li {
list-style: none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}

a {
text-decoration: none;
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

a:hover {
opacity: 0.7;
}

a:link,
a:visited,
a:active {
color: #333;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

/*------------------ clearfix ------------------*/
.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}

/*------------------ mapカーソル ------------------*/
#method1, #method2, #method3, #method4, #method5, #method6,
#method7, #method8, #method9, #method10, #method11, #method12,
#method13, #method14, #method15, #method16, #method17,
#method18, #method19, #method20, #method21, #method22,
#method23, #method24, #method25, #method26, #method27,
#method28, #method29, #method30, #method31, #method32 {
	cursor: pointer;
}

/****************************************

          共通

*****************************************/

/*-----------タイトル画像置換------------*/
.hide_txt {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

/*-----------画像サイズ------------*/
img {
	width: 100%;
	height: auto;
	display: block;
}

.flex_b img, .flex_b_r img, .flex_s img {
	align-items: flex-start;
}

/*-----------flex_b------------*/
@media screen and (min-width: 768px) {
	.flex_b, .flex_b_r {
		display: flex;
		justify-content: space-between;
	}
	
	.flex_s {
		display: flex;
		justify-content: flex-start;
	}
}

@media screen and (max-width: 767px) {
	.flex_b, .flex_s {
		display: flex;
		flex-direction: column;
	}
	
	.flex_b_r {
		display: flex;
		flex-direction: column-reverse;
	}
}

/*-----------sp横幅------------*/
@media screen and (max-width: 767px) {
	.catch, .product, .pro_info_inner, .put, .place, .eco, .contact, .footer_info {
		width: 90%;
		margin: 0 auto;
	}
}

/*-----------各セクションタイトル------------*/
.product h2, .put h2, .place h2, .eco h2, .contact h2 {
	width: 100%;
	height: 30px;
	background: #0071be;
	border-radius: 7.5px;
	margin-bottom: 20px;
	position: relative;
	z-index: 1;
}

.product h2::before, .put h2::before, .place h2::before, .eco h2::before,
.contact h2::before {
	height: 40px;
	display: block;
	margin: auto;
	position: absolute;
	z-index: 2;
	top: -15px;
	right: 0;
	bottom: 0;
	left: 0;
}

.product h2::before {
	content: url(img/product_h2.png);
	width: 130px;
}

.put h2::before {
	content: url(img/put_h2.png);
	width: 100px;
}

.place h2::before {
	content: url(img/place_h2.png);
	width: 140px;
}

.eco h2::before {
	content: url(img/eco_h2.png);
	width: 230px;
}

.contact h2::before {
	content: url(img/contact_h2.png);
	width: 190px;
}


/****************************************

          wrapper

*****************************************/
#wrapper{
    max-width: 960px;
	width: 100%;
	height: 100%;
	background: #FFF;
	margin: 0 auto;
}

/****************************************

          header

*****************************************/
header {
	width: 100%;
	height: 0;
	background: url(img/header_bg.png) no-repeat center bottom;
	background-size: 100%;
	position: relative;
}

.header_inner {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

header p {
	color: #CCC;
	padding: 20px 0 0 10px;
}

header h1 img {
	width: 90%;
	max-width: 940px;
	margin: 0 auto;
	display: block;
	padding-top: 14.5%;
}

@media screen and (min-width: 768px) {
	header {
		padding-top: 62.5%;
	}
}

@media screen and (max-width: 767px) {
	header {
		padding-top: 70%;
	}
}

/****************************************

          catch

*****************************************/
.catch {
	padding-top: 5%;
	margin-bottom: 9%;
}

.catch_in01 {
	margin-bottom: 2%;
}

/*.catch_in01, .catch_in02 {
	flex: 0 0 50%;
}*/

.photo {
	height: 100%;
	border: 5px solid #FFF;
	box-shadow: 5px 5px rgba(200,200,200,.5);
	transform: rotate(3deg);
}

@media screen and (min-width: 768px) {
	.catch_in01 h2, .catch_in02 li:first-child {
		margin-right: 3%;
	}
}

@media screen and (max-width: 767px) {
	.catch_in01 h2, .photo, .catch_in02 li {
		margin-bottom: 5%;
	}
}

/****************************************

          product

*****************************************/
.product ul {
	margin-bottom: 40px;
}

.pro_info {
	width: 100%;
	background: #d8e9f5;
	padding: 20px 20px 10px 20px;
	margin-bottom: 40px;
}

.pro_info_text h3, .pro_info_text h4 {
	margin-bottom: 10px;
}

.pro_info_text span {
	margin: 10px 0;
	display: block;
}

@media screen and (min-width: 768px) {
	.product ul li {
		margin-right: 4%;
		border: 1px solid #c9c9c9;
	}

	.product ul li:last-child {
		margin: 0;
	}
	
	.pro_info_inner .photo {
		margin: 30px 10px 10px;
	}
}

@media screen and (max-width: 767px) {
	.product ul {
		flex-direction: row;
	}
	.product ul li {
		margin-right: 4%;
		border: 1px solid #c9c9c9;
	}
	
	.product ul li:last-child {
		margin: 0;
	}
	
	.pro_info_inner .photo {
		margin-top: 20px;
	}
}

/****************************************

          put

*****************************************/
.put {
	margin-bottom: 40px;
}

@media screen and (min-width: 768px) {
	.put div img {
		margin-right: 40px;
	}
}

@media screen and (max-width: 767px) {
	.put div img {
		margin-bottom: 20px;
	}
}

/****************************************

          place

*****************************************/
.place {
	margin-bottom: 40px;
}

.tenpo_deta {
	width: 100%;
	margin-left: 20px;
}

.tenpo_deta h3 {
	background: #0071be;
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    padding: 3px 10px;
    margin-bottom: 10px;
}

#map {
	width: 100%;
	max-width: 960px;
	height: 350px;
}

@media screen and (min-width: 768px) {
	.place ul {
		margin-top: 20px; 
	}
	
	.place ul.flex_s li {
		width: 33.3%;
	}
	
	.place ul li {
		padding: 20px;
		border-right: 3px dotted #0071be;
	}
	
	.place ul li img {
		max-width: 140px;
		height: 120px;
	}

	.place ul li:last-child {
		border: none;
	}
}

@media screen and (max-width: 767px) {
	.place ul li {
		width: 100%;
		border-bottom: 3px dotted #0071be;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		padding: 20px 0;
	}
	
	.place ul li img {
		height: 100%;
	}
	
	.place ul li img, .place ul li .tenpo_deta {
		width: 49%;
	}
}

/****************************************

          ECO

*****************************************/
.eco {
	margin-bottom: 40px;
}

.eco_text h3 {
	margin-bottom: 30px;
}

@media screen and (min-width: 768px) {
	.eco_text {
		margin-right: 30px;
	}
}

/****************************************

          contact

*****************************************/
.contact dl dt {
	background: #d8e9f5;
	padding: 15px 10px;
	border-top: 1px dotted #CCC;
}

.contact dl dd {
	padding: 10px;
	border-top: 1px dotted #CCC;
}

.contact input {
	height: 30px;
	border: none;
	border-radius: 5px;
	background: #CCC;
	padding: 5px;
}

.contact select {
	height: 30px;
}

.contact textarea {
	width: 100%;
	height: 90px;
	border: none;
	border-radius: 5px;
	background: #CCC;
	padding: 5px;
}

.contact button, .c_btn {
	width: 100%;
	height: 40px;
	background: #999;
	line-height: 40px;
	font-weight: bold;
	color: #FFF;
	border: none;
	margin-top: 30px;
}

@media screen and (min-width: 768px) {
	.contact dl dt {
		width: 30%;
	}

	.contact dl dd {
		width: 70%;
	}
	
	.contact button, .c_btn {
		width: 280px;
		display: block;
		margin: 30px auto 0;
	}
}

@media screen and (max-width: 767px) {
	.contact dl dt, .contact dl dd,
	.contact input, .contact select {
		width: 100%;
	}
}


/****************************************

          footer

*****************************************/
footer {
	width: 100%;
	background: #0071be;
	margin-top: 70px;
	color: #FFF;
}

.footer_inner {
	background: url(img/footer_bg.png) repeat-x center bottom;
}

.footer_info {
	padding-top: 30px;
}

.footer_info div {
	margin-bottom: 40px;
}

address {
	color: #FFF;
	font-size: 90%;
	text-align: center;
}

@media screen and (min-width: 768px) {
	footer, .footer_inner {
		height: 240px;
	}
	
	.footer_info {
		width: 960px;
		margin: 0 auto;
	}
	
	.footer_info h2 {
		margin-right: 40px;
	}
}

@media screen and (max-width: 767px) {
	.footer_info h2 img {
		max-width: 260px;
		margin: 0 auto 20px;
	}
	
	footer, .footer_inner {
		height: 320px;
	}
}

/****************************************

          anime

*****************************************/
.fuwatAnime {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fuwatAnime;
 -ms-animation-name: fuwatAnime;
 animation-name: fuwatAnime;
 visibility: visible !important;
}
@-webkit-keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


#page-top {
    position: fixed;
	z-index: 9999;
    bottom: 20px;
    right: 20px;
}


/****************************************

          お問い合わせフォーム

*****************************************/
.error {
	color: #FF0000;
}

.confirm h2 {
	padding: 10px;
	background: #d8e9f5;
	font-weight: bold;
	margin-bottom: 20px;
}

.confirm h3 {
	margin-bottom: 20px;
}

.sender_info label {
	background: #d8e9f5;
	padding: 10px;
}

.sender_info p {
	padding: 10px;
}

.thanks {
	text-align: center;
}

@media screen and (min-width: 768px) {
	.confirm, .thanks {
		width: 960px;
		margin: 30px auto;
	}
	
	.sender_info label {
		width: 30%;
	}
	
	.sender_info p {
		width: 70%;
	}
}

@media screen and (max-width: 767px) {
	.confirm, .thanks {
		width: 90%;
		margin: 30px auto;
	}
}