@charset "utf-8";
/* このファイルはUTF-8のBOMなし(UTF-8N)で保存しています */

/**
 * CSS Information
 * ===============================================================
 *
 * Site URL:  http://
 * File name: module.css
 * Summary:   モジュール用スタイル
 * Author:    CrEa Inc.
 *
 * -----------------------------------
 *
 * TOC:
 *     =1    modules
 *       =1-1   header
 *       =1-2   nav
 *              - sp_menu
 *              - pc_nav
 *              - topic path
 *       =1-3   pagetop
 *       =1-4   footer
 *              - company
 *              - footer_nav
 *              - copyright
 *
 *     =2    contents
 *       =2-1   mainimage
 *       =2-2   contents
 *              - greeting
 *              - flow
 *              - example-detail
 *              - example-gallery
 *              - example-comment
 *       =2-3   table styles
 *       =2-4   iframe
 *       =2-5   reset(news_textarea)
 *
 * ===============================================================
*/



/** =1
 * ========================================
 * modules
 * ========================================
 */

/** =1-1
 * header
 * ----------------------------------
 */

.l-header p.summary {
	font-size: 12px;
	padding: 10px 0 15px;
	color: #333333;
}
h1 {
	float: left;
}
.l-header p.contact {
	float: right;
	position: relative;
	text-align: right;
}
.l-header p.contact img {
	padding-left: 10px;
}
.l-header p.contact a {
	position: relative;
	top: -15px;
}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 360px) {
		.l-header p.summary {
			display: none;
		}
		h1 img {
			margin-top: 15px;
		}
	}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 639px) {
		.l-header p.summary {
			display: none;
		}
		h1 {
			width: 65%;
		}
		h1 img {
			margin-top: 10px;
			max-height: 40px;
		}
		.l-header p.contact {
			display: none;
		}
	}
	/* -- >>> styles for middle layout ----- */
	@media screen and (min-width: 640px) and (max-width: 769px) {
		.l-header p.summary {
			font-size: 10px;
			padding: 5px 0 5px;
		}
		h1 img {
			max-height: 45px;
		}
		.l-header p.contact {
			top: -5px;
			right: 60px;
		}
		.l-header p.contact img {
			max-height: 50px;
		}
		.l-header p.contact a {
			display: none;
		}
	}
	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 770px) and (max-width: 860px) {
		.l-header p.contact img {
			margin-top: 5px;
			max-width: 180px;
		}
		.l-header p.contact a img {
			max-width: 160px;
		}
	}




/** =1-2
 * nav
 * ----------------------------------
 */

/* [ sp_menu ]
------------------------------ */
.navHandler {
	display: none;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 769px) {
		.l-header .navHandler,
		.l-nav .navHandler .menu_close {
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			width: 60px;
			height: 60px;
		}
		.l-nav .navHandler {
			display: inline-block;
		}
		.l-nav .navHandler .menu_close {
			top: -70px;
			right: 5px;
			position: absolute;
		}
	}
	/* -- >>> styles for middle layout ----- */
	@media screen and (min-width: 640px) and (max-width: 769px) {
		.l-header .navHandler{
			top: 10px;
			right: 5px;
		}
		.l-nav .navHandler .menu_close {
			top: -70px;
			right: 5px;
			position: absolute;
		}
	}



/* [ pc_nav ]
------------------------------ */
.l-nav {
}
.navList > li {
	float: left;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 769px) {
		.navList.pc {
			display: none;
		}
		.navList {
			float: left;
			background: #FFFFFF;
			border-top: 5px solid #f2f2e9;
		}
		.navHandler .navList {
			margin-bottom: -10px;
		}

		.navList li {
			width: 46%;
			border-bottom: 1px solid #CCCCCC;

			position: relative;
			display: inline-block;
			padding-left: 4%;
		}
		.navList li::before,
		.navList li::after{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			content: "";
			vertical-align: middle;
		}
		.navList li::before{
			left: 10px;
			width: 5px;
			height: 5px;
			border-top: 1px solid #4aa500;
			border-right: 1px solid #4aa500;
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
		}

		.navList li a {
			display: block;
			padding: 10px;
			color: #333333;
			letter-spacing: -0.05em;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 770px) {
		.navToggle {
			display: none;
		}
		.navList.pc {
			max-width: 960px;
			width: 96%;
		}
		.navList > li {
			width: 20%;
			margin: 15px 0;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			-o-box-sizing: border-box;
			-ms-box-sizing: border-box;
			box-sizing: border-box;
		}
		.navList > li:first-child{
			border-left: rgba(255,255,255,0.2) 1px solid ;
		}
		.navList > li a{
			display: block;
			padding: 8px 0;
			width: 100%;
			border-right: rgba(255,255,255,0.2) 1px solid ;
			color: #FFFFFF;
			font-weight: bold;
			text-align: center;
			font-size: 16px;
			letter-spacing: 0.1em;
		}
		.navList > li a span{
			display: block;
			font-size: 10px;
			letter-spacing: 0.15em;
			font-weight: normal;
		}
		.navList > li > a {
			-moz-transition: all 300ms ease-in-out;
			-webkit-transition: all 300ms ease-in-out;
			transition: all 300ms ease-in-out;
		}

		#construction .navList > li.construction > a,
		#renovation .navList > li.renovation > a,
		#store .navList > li.store > a,
		#estate .navList > li.estate > a,
		#contact .navList > li.contact > a,
		.navList > li > a:hover,
		#construction .navList > li.construction > a:hover,
		#renovation .navList > li.renovation > a:hover,
		#store .navList > li.store > a:hover,
		#estate .navList > li.estate > a:hover,
		#contact .navList > li.contact > a:hover{
			background: rgba(255,255,255,0.2);
		}
	}



/* [ topic path ]
------------------------------ */

.topic_path {
	font-size: 80%;
	color: #999999;
}
.topic_path ul{
	margin: 0 auto;
	max-width:960px;
	width:98%;
}
.topic_path ul li {
	float: left;
}
.topic_path ul li a {
	color: #6FA501;
	text-decoration: underline;
}
.topic_path ul li.home {
	margin-left: 5px;
	padding-left: 25px;
	background: url(../src/image/common/nav/topic_home.svg) center left no-repeat ;
	background-size: 15px 13px;
}
.topic_path ul li.arrow{
	position: relative;
	display: inline-block;
	padding-left: 30px;
}
.topic_path ul li.arrow::before,
.topic_path ul li.arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.topic_path ul li.arrow::before{
	left: 12px;
	width: 5px;
	height: 5px;
	border-top: 1px solid #666666;
	border-right: 1px solid #666666;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 639px) {
		.topic_path {
			font-size: 70%;
		}
		.topic_path ul li.home {
			margin-left: 2.5%;
		}
	}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (min-width: 640px) and (max-width: 769px) {
		.topic_path {
			font-size: 75%;
		}
		.topic_path ul li.home {
			margin-left: 4%;
		}
	}




/** =1-3
 * pagetop
 * ----------------------------------
 */

.pagetop {
	position: rerative;
	z-index: 20;
	margin: 0 auto -10px;
}
.pagetop p {
	text-align: center;
}
.pagetop a {
	width: 100px;
	height: 50px;
	display: inline-block;
	background-image: url(../src/image/common/nav/pagetop.svg) ;
	background-position: center top ;
	background-repeat: no-repeat ;
	background-size: 100%;
	/* スコットケラムメソッド */
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.pagetop a:hover {
	background-image: url(../src/image/common/nav/pagetop_hover.svg) ;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 769px) {
		.pagetop {
			width: 92%;
			margin: -70px auto -10px;
		}
		.pagetop p {
			text-align: right;
		}
		.pagetop a {
			background-position: center -5px ;
			background-color: #FFFFFF;
			-webkit-border-radius: 3px 3px 0 0;
			-moz-border-radius: 3px 3px 0 0;
			border-radius: 3px 3px 0 0;
		}
	}



/** =1-4
 * footer
 * ----------------------------------
 */

.l-footer {
	font-size: 14px;  /* CSS3未対応ブラウザ対策 */
	font-size: 1.4rem;  /* CSS3単位 実質14px */
}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 769px) {
		.l-footer {
			padding-top: 0;
		}
	}


/* [ maker_logo ]
------------------------------ */

.l-footer ul.maker_logo {
	padding: 60px 0;
	margin-bottom: 40px;
	text-align: center;
	border-bottom: #dbdbc4 1px solid;
}
.l-footer ul.maker_logo li {
	text-align: center;
	display: inline-block;
	max-width: 190px;
	width: 18%;
}
.l-footer ul.maker_logo li img {
	max-width: 100%;
}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 769px) {
		.l-footer ul.maker_logo {
			padding: 60px 0 0;
			border-bottom: none;
		}
		.l-footer ul.maker_logo li {
			max-width: auto;
			width: 30%;
			margin-bottom: 20px;
		}
	}


/* [ company ]
------------------------------ */

.l-footer p {
	text-align: center;
	padding: 40px 0px;
}


/* [ footer_nav ]
------------------------------ */

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 769px) {
		.l-footer ul.footer_nav {
			margin: 0 auto;
		}
		.l-footer ul.footer_nav:first-child {
			border-top: 1px solid #CCCCCC;
		}
		.l-footer ul.footer_nav li {
			float: left;
			width: 46%;
			border-bottom: 1px solid #CCCCCC;

			position: relative;
			display: inline-block;
			padding-left: 4%;
		}
		.l-footer ul.footer_nav li::before,
		.l-footer ul.footer_nav li::after{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			content: "";
			vertical-align: middle;
		}
		.l-footer ul.footer_nav li::before{
			left: 10px;
			width: 5px;
			height: 5px;
			border-top: 1px solid #4aa500;
			border-right: 1px solid #4aa500;
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
		}
		.l-footer ul.footer_nav li a {
			display: block;
			padding: 10px;
			color: #000000;
			letter-spacing: -0.05em;
		}
	}
	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 770px) {
		.l-footer ul.footer_nav {
			text-align: center;
		}
		.l-footer ul.footer_nav li {
			display: inline-block;
			border-right: 1px solid #666666;
		}
		.l-footer ul.footer_nav li:last-child {
			border: none;
		}
		.l-footer ul.footer_nav li a{
			color: #333333;
			display: block;
			padding: 0px 1em;
			line-height: 1;
		}
	}


/* [ copyright ]
------------------------------ */

.l-footer address{
	clear: both;
	padding: 10px;
	background: #4aa500;
	color: #FFFFFF;
	text-align: center;
	font-size: 75%;
}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 769px) {
		.l-footer address{
			margin-top: 1px;
			padding: 10px;
			font-size: 60%;
		}
	}






/** =2
 * ========================================
 * contents
 * ========================================
 */


/** =2-1
 * mainimage
 * ----------------------------------
 */

.main_image {
	color: #333333;
	position: relative;
	z-index: 1;
	background-image: url(../src/image/common/mainimage.jpg) ;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}


/** =2-2
 * contents
 * ----------------------------------
 */

.l-contents .shadow{
	box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
.l-contents .radius{
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

/* greeting */
.l-article.greeting img{
	float: right;
	width: 30%;
	max-width: 300px;
	margin-left: 1em;
}
.l-article.greeting strong{
	letter-spacing: 0.05em;
	margin: 0.8em 0;
	line-height: 1.2;
}

/* flow */
.l-article.flow dl.arrow{
	margin-bottom: 25px;
	padding-bottom: 25px;
	background: url(../src/image/common/bottom_arrow.svg) bottom center no-repeat;
	background-size: 50px 25px;
}
.l-article.flow dl dt{
	background: #FFFFFF;
	padding-top: 1em;
	font-weight: bold;
	font-size: 160%;
	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
}
.l-article.flow dl dd{
	background: #FFFFFF;
	padding: 1em 2em 2em;
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	border-radius: 0 0 4px 4px;
}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 769px) {
		.l-article.flow dl.arrow{
			margin-bottom: 10px;
		}
		.l-article.flow dl dt{
			padding: 1em 1em 0;
			font-size: 125%;
		}
		.l-article.flow dl dd{
			padding: 1em 1em;
			font-size: 90%;
		}
	}

/* example-detail */
.l-article .l-section.example{
	padding-bottom: 40px;
	margin-bottom: 40px;
	border-bottom: 1px solid #bababa;
}
.l-article .l-section.example:last-child,
.example .l-section.example{
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}
.l-section.example p.image{
	float: left;
	width: 48%;
}
.l-section.example p.image .before{
	float: left;
	width: 40%;
	position: relative;
	z-index: 2;
	margin-bottom: -20%;
}
.l-section.example p.image .after{
	float: right;
	width: 75%;
	position: relative;
	z-index: 1;
}
.l-section.example p.image .before:after,
.l-section.example p.image .after:after {
	display: block;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 1;
	padding: 4px 0;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	content: attr(data-text);
	background: rgba(0,0,0,0.4);
	position: relative;
	z-index: 3;
}
.l-section.example p.image .before:after{
	font-size: 10px;
	font-size: 1.0rem;
	margin: -18px 0 0;
}
.l-section.example p.image .after:after {
	font-size: 16px;
	font-size: 1.6rem;
	margin: -24px 0 0;
}
.l-section.example h4,
.l-section.example .detail{
	float: right;
	width: 48%;
	font-size: 95%;
}
.l-section.example h4{
	color: #333333;
	font-size: 180%;
	font-weight: normal;
	padding: 0.8em 0 0.5em;
	line-height: 1.4;
}
.l-section.example dl{
	border-top: 1px solid #bababa;
	margin: 0.5em 0 1.5em;
}
.l-section.example dt,
.l-section.example dd{
	padding: 0.5em 0;
	float: left;
	width: 28%;
	border-bottom: 1px solid #bababa;
}
.l-section.example dt{
	width: 18.5%;
	font-weight: bold;
	position: relative;
	display: inline-block;
	padding-left: 3.5%;
	letter-spacing: 0.05em;
}
.l-section.example dt::before,
.l-section.example dt::after{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	left: 4px;
	box-sizing: border-box;
	height: 2px;
	border: 3px solid transparent;
	border-left: 5px solid #594441;
}
.l-section.example dl.list-odd dd:last-child{
	width: 78%;
}

.l-section.example dd sup{
	font-size:50%;
}
.l-section.example .pickup{
	margin-bottom: 1.5em;
}
.l-section.example .btn{
	display: block;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 639px) {
		.l-section.example p.image,
		.l-section.example h4,
		.l-section.example .detail{
			float: none;
			width: 100%;
		}
		.l-section.example h4{
			font-size: 160%;
			padding-top: 0;
			text-align: center;
		}
		.l-section.example dl{
			font-size: 85%;
			margin: 2em 0 1.5em;
		}
		.l-section.example dt,
		.l-section.example dd{
			width: 26%;
		}
		.l-section.example dt{
			width: 20.5%;
		}
		.l-section.example dl.list-odd dd:last-child{
			width: 76%;
		}
	}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (min-width: 640px) and (max-width: 769px) {
		.l-section.example h4{
			font-size: 170%;
			padding: 0.5em 0;
		}
		.l-section.example dl{
			font-size: 88%;
		}
		.l-section.example dt,
		.l-section.example dd{
			width: 26%;
		}
		.l-section.example dt{
			width: 20.5%;
		}
		.l-section.example dl.list-odd dd:last-child{
			width: 76%;
		}
		.l-section.example dt::before,
		.l-section.example dt::after{
			left: 2px;
			border: 3px solid transparent;
			border-left: 4px solid #594441;
		}
	}

/* example-gallery */
.l-section.gallery h4{
	font-size: 170%;
	padding: 3em 0 0.5em;
	text-align: center;
	letter-spacing: 0.1em;
}
.l-section.gallery h4 .caption{
	font-size: 45%;
	display: block;
	letter-spacing: 0;
}
.l-section.gallery .photo{
	margin: 1em -1.75%;
}
.l-section.gallery .photo li{
	float: left;
	width: 30.3%;
	margin: 1em 1.5%;
}
.l-section.gallery .photo li .title{
	position: relative;
	z-index: 1;
	background: rgba(0,0,0,0.5);
	display: block;
	font-size: 15px;
	font-size: 1.5rem;
	font-weight: bold;
	color: #FFFFFF;
	line-height: 1;
	padding: 10px 0;
	margin: -35px 0 0;
	text-align: center;
}
.l-section.gallery .photo li .text{
	display: block;
	font-size: 85%;
	padding: 10px 0;
	color: #333333;
}
.l-section.gallery .photo li img{
	width:auto;
	height:auto;
	max-width:100%;
	max-height:225px;
	display:block;
	margin:0 auto;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 639px) {
		.l-section.gallery{
			margin-top: 10px;
			border-top: 1px solid #bababa;
		}
		.l-section.gallery h4{
			font-size: 150%;
			padding: 1.5em 0 0;
		}
		.l-section.gallery .photo{
			margin: 1em -2%;
		}
		.l-section.gallery .photo li{
			width: 46%;
			margin: 1em 2% 0;
		}
		.l-section.gallery .photo li .title{
			font-size: 12px;
			font-size: 1.2rem;
			margin: -28px 0 0;
			padding: 8px 0;
		}
		.l-section.gallery .photo li .text{
			padding: 8px 0;
			font-size: 75%;
		}
	}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (min-width: 640px) and (max-width: 769px) {
		.l-section.gallery{
			margin-top: 30px;
			border-top: 1px solid #bababa;
		}
		.l-section.gallery h4{
			padding: 1.5em 0 0;
		}
		.l-section.gallery .photo li .title{
			font-size: 14px;
			font-size: 1.4rem;
			margin: -30px 0 0;
			padding: 8px 0;
		}
		.l-section.gallery .photo li .text{
			padding: 8px 0;
			font-size: 80%;
		}
	}

/* example-comment */
.l-section.gallery .comment{
	background: rgba(255,255,255,0.3);
	padding: 2.5em;
	margin-top: 60px;
}
.l-section.gallery .comment dt{
	font-weight: bold;
	font-size: 150%;
	width: 27%;
	padding: 1em 2.5%;

	position: relative;
	display: inline-block;
}
.l-section.gallery .comment dt::before,
.l-section.gallery .comment dt::after{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	box-sizing: border-box;
	height: 20px;
	border: 20px solid transparent;
}
.l-section.gallery .comment .owner dt::before,
.l-section.gallery .comment .owner dt::after{
	right: 0;
	border-right: 20px solid #FFFFFF;
}
.l-section.gallery .comment .tanda dt::before,
.l-section.gallery .comment .tanda dt::after{
	left: 0;
	border-left: 20px solid #FFFFFF;
}
.l-section.gallery .comment .owner dt{
	color: #006699;
}
.l-section.gallery .comment .tanda dt{
	text-align: center;
	color: #4aa500;
}
.l-section.gallery .comment dd{
	background: #FFFFFF;
	padding: 1.5em 2.5%;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	width: 63%;
}
.l-section.gallery .comment .owner dd{
	float: right;
}
.l-section.gallery .comment .tanda dd{
	float: left;
}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 769px) {
		.l-section.gallery .comment{
			margin-top: 40px;
			padding: 40px 0 0;
			border-top: 1px solid #bababa;
			background: none;
		}
		.l-section.gallery .comment dt{
			font-size: 135%;
			width: 100%;
			padding: 0 0 25px;
			text-align: center;
			background: url(../src/image/common/top_arrow.svg) bottom center no-repeat;
			background-size: 40px 20px;
		}
		.l-section.gallery .comment dt::before,
		.l-section.gallery .comment dt::after{
			height: 0;
			width: 0;
			border: none;
		}
		.l-section.gallery .comment dd{
			background: #FFFFFF;
			padding: 1em 2.5%;
			width: 95%;
			float: none;
		}
	}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (min-width: 770px) and (max-width: 960px) {
		.l-section.gallery .comment{
			padding: 2.5em 2.5vw;
		}
		.l-section.gallery .comment dt{
			font-size: 2.7vw;
		}
	}


/** =2-3
 * table styles
 * ----------------------------------*/
table {
	border-collapse: collapse;
	width: 100%;
	background: #FFFFFF;
}

th {
	font-weight: bold;
}

table.tableBase {
	width: 100%;
	border-top: 1px solid #d9d9d7;
	border-left: 1px solid #d9d9d7;
}
table.tableBase tr {
	border-bottom: 1px solid #d9d9d7;
}
table.tableBase th,
table.tableBase td {
	padding: 1.0em 15px;
}
table.tableBase td {
	padding: 1.0em 15px;
	border-right: 1px solid #d9d9d7;
}
table.tableBase th {
	background: #f1f1ec;
	vertical-align: top;
}
table th.width25per {	width: 25%;}
table th.width35per {	width: 35%;}
table th.width50per {	width: 50%;}
table th.width75per {	width: 75%;}

		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 769px) {
			table.tableBase,
			table.tableBase tr,
			table.tableBase th,
			table.tableBase td {
				display: inline-block;
				width: 100%;
			}
			table.tableBase th,
			table.tableBase td {
				width: 96%;
				padding: .5em 2%;
				border-right: 1px solid #d9d9d7;
			}

			/* table form */
			table.tableForm,
			table.tableForm tr,
			table.tableForm th,
			table.tableForm td {
				display: block;
				display: inline-block;
				width: auto;
				width: 100%;
				padding: .5em 0;
				border: none;
			}
			table.tableForm th{
				width: 96%;
				padding: .5em 2%;
			}
		}

	/* table form */
	.btn, .btn:link, .btn:visited, .btn:hover, .btn:active {
		display: inline-block;
		padding: .75em 2em;
		border: none;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		background: #4aa500;
		color: #fff;
		font-weight: bold;
		line-height: 1.4;
		text-align: center;
		vertical-align: bottom;
		cursor: pointer;
	}
	.btn.large {
		font-size: 18px;
		font-size: 1.8rem;
	}
	.btn.middle {
		font-size: 16px;
		font-size: 1.6rem;
	}
	.btn.small {
		font-size: 12px;
		font-size: 1.2rem;
		padding: .5em 1em;
	}
	.btn span{
		font-weight: bold;
		padding-left: 1.5em;
		background: url(../src/image/common/btn_ico.svg) left center no-repeat;
		background-size: 1em;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="search"],
	input.txt,
	textarea {
		width: 75%;
		padding: .25em .5em;
		border: 1px solid #ccc;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	textarea {
		width: 100%;
	}
	input.txt_s {
		width: 20%;
	}
	textarea {
		display: block;
		height: 10em;
	}
	label + label {
		margin-left: .5em;
	}

	input.alpha {
		-moz-transition: all 300ms ease-in-out;
		-webkit-transition: all 300ms ease-in-out;
		transition: all 300ms ease-in-out;
		margin: 5px 10px;
	}
	input.alpha:hover {
		filter: alpha(opacity=50);
		-moz-opacity: 0.50;
		opacity: 0.50;
	}
		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 769px) {
			input[type="text"],
			input[type="password"],
			input[type="email"],
			input[type="tel"],
			input[type="url"],
			input[type="search"],
			input.txt,
			textarea {
				width: 100%;
				font-size: 16px;
			}
		}


/** =2-4
 * iframe
 * ----------------------------------*/

.iframeWrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.iframeWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}


/** =2-5
 * reset(news_textarea)
 * ---------------------------------- */

.l-article .reset {
	line-height: 1.5;
}
.l-article .reset p {
	margin-bottom: 0.5em;
}
.l-article .reset em,
.l-article .reset address{
	font-style: italic;
}
.l-article .reset ul li{
	margin-left: 1em;
	list-style-type: disc;
}
.l-article .reset a{
	text-decoration: underline;
}
.l-article .reset hr{
	margin: 1em 0;
}
.l-article .reset strong,
.l-article .reset strong span{
	font-weight: bold;
}
.l-article .reset img {
/* 	border: 1px solid #CCCCCC; */
	padding: 2px;
	max-width: 99%;
}
.l-article .reset img[alt="smiley"],
.l-article .reset img[alt="sad"],
.l-article .reset img[alt="wink"],
.l-article .reset img[alt="laugh"],
.l-article .reset img[alt="frown"],
.l-article .reset img[alt="cheeky"],
.l-article .reset img[alt="blush"],
.l-article .reset img[alt="surprise"],
.l-article .reset img[alt="indecision"],
.l-article .reset img[alt="angry"],
.l-article .reset img[alt="angel"],
.l-article .reset img[alt="cool"],
.l-article .reset img[alt="devil"],
.l-article .reset img[alt="crying"],
.l-article .reset img[alt="enlightened"],
.l-article .reset img[alt="no"],
.l-article .reset img[alt="yes"],
.l-article .reset img[alt="heart"],
.l-article .reset img[alt="broken heart"],
.l-article .reset img[alt="kiss"],
.l-article .reset img[alt="mail"] {
	border: none;
	padding: 0px;
}
.l-article .reset table {
	border: 1px solid #CCCCCC;
	border-collapse: separate;
	border-spacing: 1px;
	max-width: 100%;
}
.l-article .reset table th,
.l-article .reset table td {
	padding: 5px 5px;
	border: 1px solid #CCCCCC;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.l-article .reset table th[scope="row"] {
	vertical-align: middle;
}
.l-article .reset table[border="0"],
.l-article .reset table[border="0"] th,
.l-article .reset table[border="0"] td {
	border: none;
}

.l-article .reset h1,
.l-article .reset h2,
.l-article .reset h3,
.l-article .reset h4,
.l-article .reset h5,
.l-article .reset h6{
	margin: 0;
	margin-bottom: 0.5em;
	padding: 0;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border: none;
	background: none;
	color: #333333;
	font-size: 100%;
	font-weight: bold;
	display: block;
	text-shadow: none;
	float: none;
	position: static;
	text-align: left;
}
.l-article .reset h1{	font-size: 200%;}
.l-article .reset h2{	font-size: 150%;}
.l-article .reset h3{	font-size: 120%;}
.l-article .reset h4{	font-size: 100%;}
.l-article .reset h5{	font-size: 80%;}
.l-article .reset h6{	font-size: 70%;}
.l-article .reset pre {
	white-space: -moz-pre-wrap;	/* Mozilla */
	white-space: -pre-wrap;		/* Opera 4-6 */
	white-space: -o-pre-wrap;	/* Opera 7 */
	white-space: pre-wrap;		/* CSS3 */
	word-wrap: break-word;		/* IE 5.5+ */
}

.l-article .reset blockquote{
	background: #F5F5F5;
	padding: 1.5em 2em 1em;
	margin: 1em;
	font-size: 90%;
}