/* -----------------------------------------------------------------
	sam_tpml toppage.css Document
	Description: 株式会社SAM様 デザインのテーマ
	Version: 1.0
----------------------------------------------------------------- */

 /* Webフォント 読み込み */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);

@font-face {
    font-family: 'font kokumr';
    src:url('../fonts/font_1_kokumr_1_rls.ttf');
    src:url('../fonts/font_1_kokumr_1_rls.ttf') format('truetype');
}
@font-face {
    font-family: 'Harenosora';
    src:url('../fonts/Harenosora.otf');
    src:url('../fonts/Harenosora.otf') format('truetype');
}


/* トップページ
-------------------------------------------------- */
.top-aisatsu-box {
	margin: 6.0% 0;
	padding:0;
	background-image:url(images/top_aisatsu_bg.png);
	background-position:top right;
	background-repeat:no-repeat;
	background-size:auto;
}
.top-aisatsu-box-inner {
	margin:0;
	padding:0;
}
.top-aisatsu-box-inner p {
	font-size:130%;
	color:#696969;
	line-height:235%;
	font-family:"Sawarabi Mincho";
	/*font-family:"見出ミンMA31", "Midashi Min MA31";*/
	/* font-family: “Times New Roman”, “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “HG明朝E”, “メイリオ”, Meiryo, serif; */
}
.top-aisatsu-box-inner b {
	font-size:135%;
}
.top-aisatsu-photo {
	margin:0;
	padding:0;
	float:right;
	-webkit-shape-outside: polygon(nonzero, -6px 396px, -5px 321px, 61px 216px, 135px 182px, 148px 168px, 124px 136px, 109px 85px, 125px 35px, 151px -2px, 302px 1px, 305px 398px);
	shape-outside: polygon(nonzero, -6px 396px, -5px 321px, 61px 216px, 135px 182px, 148px 168px, 124px 136px, 109px 85px, 125px 35px, 151px -2px, 302px 1px, 305px 398px);
}
.top-aisatsu-photo img {
	width:300px;
	height:auto;
}

/* ただいま施工中 */
.working-category {
	margin:4% 0 0;
	padding:4%;
	font-size:70%;
	line-height:130%;
	border-top:dashed 1px #696969;
}
.working-category a {
	display:block;
}

/* 最新ニュース */
ul.news-list {
	margin: 1% 0 2.5%;
	padding:0;
	list-style:none;
	height:410px;
	overflow:auto;
}
ul.news-list li {
	border-bottom: solid 1px #696969;
}
ul.news-list li a {
	margin:0;
	padding:2%;
	display:block;
	color:#1c205f;
}
ul.news-list li a:active,
ul.news-list li a:hover {
	padding:-2%;
	background-color:#e3e4eb;
}
ul.news-list li span.news-day {
	margin:0;
	padding:0;
	font-size:80%;
}
ul.news-list li p {
	margin:0 0 0.5% 0;
	padding:0;
	line-height:135%;
	font-weight:bold;
}
ul.news-list li div.news-overview {
	margin:0;
	padding:0;
	font-size:85%;
}



/* 最新の施工事例 */
/*
.case-box,
.top-greeting {
	margin-bottom:5%;
}
.photo-title {
	margin-left:-1%;
	margin-right:-1%;
	margin-bottom:1%;
	vertical-align:middle;
}
.photo-title h2 {
	margin:0;
	padding:2% 2.5%;
	color:#ffffff;
	font-family: 'rounded mplus 1m bold';
	font-size:135%;
	font-weight:bold;
	background-image:url(images/top_photo_title_bg.svg);
	background-repeat:no-repeat;
	background-position:left center;
	background-size: contain;
}
*/
.top-photo-box {
	margin:0;
	padding:0;
	background-image:url(images/top_photo_bg.png);
	background-repeat:no-repeat;
	background-size: cover;
}
.top-photo-box-image img {
	margin:30px 0 0 0;
	padding:0;
	width:77.5%;
	height:auto;
	border:solid 2px #ffffff;
	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);
}
.top-photo-box-text {
	margin:3% 5%;
	padding:2%;
}
.top-photo-box-text span {
	font-size:80%;
}
.top-photo-box-text p {
	margin:0 0 8%;
	padding:0;
}
/* 写真 上ステッカー */
.top-photo-box-image {
	position:relative;
}
.top-photo-box-image:after {
	position:absolute;
	top:0px;
	left:0px;
}
.photo-new:after {
	content:url(images/top_photo_new.png);
}
.photo-kitchen:after {
	content:url(images/top_photo_kitchen.png);
}
.photo-bathroom:after {
	content:url(images/top_photo_bathroom.png);
}
.photo-eco:after {
	content:url(images/top_photo_eco.png);
}
.photo-outside:after {
	content:url(images/top_photo_outside.png);
}
.photo-washroom:after {
	content:url(images/top_photo_washroom.png);
}
.photo-toilet:after {
	content:url(images/top_photo_toilet.png);
}
.photo-waterheater:after {
	content:url(images/top_photo_waterheater.png);
}
.photo-nursingcare:after {
	content:url(images/top_photo_nursingcare.png);
}
.photo-etc:after {
	content:url(images/top_photo_etc.png);
}






.top-photo-box h4 {
	margin:3% 0;
	padding:0.5%;
	font-size:105%;
	line-height:125%;
}
.top-photo-box a:link,
.top-photo-box a:visited {
	color:#696969;
}
.top-photo-box a:hover,
.top-photo-box a:active {
	color:#ffaa00;
}

/* インフォメーション・現場ブログ・塗装の豆知識 */
.update-box {
	margin: 2.0% 0;
	padding: 0;
}
.update-box h2 {
	margin:0;
	padding:2% 4.5%;
	color:#ffffff;
	font-family: 'rounded mplus 1m bold';
	font-size:125%;
	font-weight:bold;
	background-image:url(images/top_update_title_bg.png);
	background-repeat:no-repeat;
	background-size:cover;
}
.update-box ul {
	margin:0 0 5% 0;
	padding:0;
	list-style:none;
	height: 160px;
	overflow:auto;
}
.update-box ul li {
	margin:0;
	padding:5% 3%;
	font-size:90%;
	line-height:140%;
	border-bottom:dashed 1px #a9a9a9;
}
.update-box ul li span {
	font-size:90%;
}
.update-box ul li a {
	display:block;
}
.update-box ul li a:link,
.update-box ul li a:visited {
	color:#696969;
}
.update-box ul li a:hover,
.update-box ul li a:active {
	margin:-2% -2.5%;
	padding:2% 2.5%;
	color:#696969;
	background-color:#ffe6b3;
}
.top-blog-info {
	margin: 1.5% 0 0;
	padding: 1.0%;
	text-align: right;
	font-size: 80.0%;
	border-top: dashed 1px #d8d5e3;
}

/* ごあいさつ */
section.top-greeting {
	margin-top:2%;
}
section.top-greeting h3 {
	font-size:135%;
	font-weight:bold;
	color:#a9a9a9;
}
.greeting-name {
	padding:1% 4% 1%;
	text-align:right;
}
.greeting-name img {
	width:35%;
}

/* ブレイクポイント 985px以下
------------------------------------------------------------*/
@media only screen and (min-width: 40em){
	/* 最新ニュース */
	ul.news-list li p br {
		display:none;
	}
}


/* ブレイクポイント 985px以下
------------------------------------------------------------*/
@media only screen and (max-width: 985px){
	.update-box h2 {
		font-size:100%;
	}
}

@media only screen and (max-width: 40em) {
	/* トップページ
	-------------------------------------------------- */
	.photo-title h2 {
		background-size:cover;
	}
	/* あいさつ */
	.top-aisatsu-box-inner br {
		display:none;
	}
	.top-aisatsu-photo {
		margin:0;
		padding:0;
		float:none;
		-webkit-shape-outside: none;
		shape-outside: none;
	}
	.top-aisatsu-photo img {
		width:100%;
		height:auto;
	}
	.top-greeting p br {
		display:none;
	}
	.greeting-name img {
		width:60%;
	}
	/* 最新ニュース */
	ul.news-list li div.news-overview {
		display:none;
	}
}