@charset "utf-8";
/*   
Theme Name: 北海道表具内装業協同組合 2019
Theme URI: dou-hyou-kyou.jp
Description:北海道表具内装業協同組合にカスタマイズしたテーマです。
Author: VanguardNetworks co,. ltd.
Author URI:https://vanguard.ne.jp/
Version: 1.0
*/

/* ------------ */
/* デザイン共通 */
/* ------------ */

*,
*::before,
*::after{
	box-sizing:border-box;
}
html,body,div,span,applet,object,iframe,strong,h1,h2,h3,h4,h5,h6,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,fieldset,form,legend,caption,tbody,tfoot,thead,table,label,tr,th,td,p,img,figure,ul,dl,dt,dd{
	margin:0;
	padding:0;
	border:none;
}
body{
	overflow-x:hidden;
	overflow-y:scroll;
	color:#000;
	font-family:"游ゴシック体", "Yu Gothic", YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	line-height:1.75;
	-webkit-text-size-adjust:100%;
}
#wrapper {
	opacity: 0;
}
#load {
	position:fixed;
	width:100vw;
	height:100vh;
	background:url('images/intro/intro_bg.png') 50% 50% no-repeat;
}
a{
	color: #8d7c52;
	text-decoration:none;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}
a:hover{
	opacity:0.65;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}
img{
	vertical-align:top;
	max-width:100%;
	height:auto;
}
@media screen and (max-width:767px) {
	html{ font-size:14px; }
	.sp_none{ display:none !important; }
}
@media print,screen and (min-width:768px) {
	html{ font-size:16px; }
	.pc_tab_none{ display:none !important; }
}
@media print,screen and (min-width:768px) and (max-width:1024px) {
	.tab_none{ display:none !important; }
}
@media print,screen and (min-width:1025px) {
	.pc_none{ display:none !important; }
}

/* ------------------------- */
/* コンテンツ　スクロールで出現用 */
/* ------------------------- */
@media print,screen and (min-width:768px) {
	.fadein {
		opacity:0 !important;
		transform: translate(0,40px); 
		-webkit-transition: 0.8s ease-out;
		-moz-transition: 0.8s ease-out;
		-ms-transition: 0.8s ease-out;
		transition: 0.8s ease-out;
	}
	.scrollin {
		transform: translate(0,0); 
		opacity:1 !important;
	}
}

.loading_msk {
	position:fixed;
	z-index:200;
	width:100vw;
	height:100vh;
	background:#fff;
	top:0;
	right:0;
}

.loading_msk img {
	position: absolute;
	width: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

/* ------ */
/* header */
/* ------ */
header {
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	width:100%;
}
header h1 {
	margin:0;
}
/*homeとhome以外のページでブレイクポイントが変わる為style_home.cssとstyle_page.cssで分けて記述。(ブレイクポイント以外の記述はほぼ同じ)*/

/* ----------- */
/* sp_menu */
/* ----------- */
/*homeとhome以外のページでブレイクポイントが変わる為style_home.cssとstyle_page.cssで分けて記述。(ブレイクポイント以外の記述はほぼ同じ)*/

/* ----------- */
/* global_navi */
/* ----------- */
/*homeとhome以外のページでブレイクポイントが変わる為style_home.cssとstyle_page.cssで分けて記述。(ブレイクポイント以外の記述はほぼ同じ)*/


/* -------- */
/* #wrapper */
/* -------- */
html .wrapper{
	width:100%;
	overflow: hidden;
	font-size:1.125rem;
}

/* ---- */
/* main */
/* ---- */
main{
	display: block;
	position: relative;
	top:0;
	z-index: 1;
}
main,
main *{ box-sizing: border-box; }

main hr,
main + hr {
	width:30%;
	margin:5rem auto 7rem;
	border:none;
	border-top:#534741 1px solid;
	
}
@media screen and (max-width:1024px) {
	:not(#home) main{
		padding-top: 60px;
	}
}


section strong {
	color:#ba272d;
	font-size:1.25rem;
}

section a.bnr {
	display:inline-block;
	clear:both;
	box-shadow:15px 15px 0 0 rgba(255,255,255,0.9);
}

section .body_area p { margin-bottom:1em; }
section .body_area p:last-child { margin-bottom:0; }


/* ------------ */
/* company info */
/* ------------ */
.company_info_area{
	width: 95%;
	margin: 0 auto;
	padding-bottom:6rem;
}

.company_info_area,
.company_info_area .logo_area a,
.company_info_area .contact_area {
	display:flex;
	justify-content:flex-start;
	align-items:center;
}

.company_info_area > * { font-size:1rem; }
.company_info_area .logo_area .txt_area > span { display:block; line-height:1.2; }
.company_info_area .logo_area .txt_area .jap { font-size:1.5rem; }
.company_info_area .logo_area a .txt_area .jap { color: #000; }
.company_info_area .logo_area .txt_area .en { font-size:0.8rem; color:#c5b69c; }
.company_info_area .contact_area a.contact_btn {
	padding:0.5em 1em 0.5em 3em;
	color:#fff;
	line-height:1;
	text-align:right;
	font-size:0.875rem;
	border:#ae9980 1px solid;
	border-radius:1rem;
	background:#ae9980 url('images/contact_icon.png') 0.75rem 50% no-repeat;
	background-size:20px;
}
.company_info_area .contact_area a.tel span {
	display:block;
	color:#000;
	line-height:1.2;
}
.company_info_area .contact_area a.tel span.num { font-size:1.5rem; font-weight:bold; }
.company_info_area .contact_area a.tel span.hour { font-size:0.8rem; }

@media screen and (max-width:767px) {
	.company_info_area{
		padding-bottom:0;
	}
	.company_info_area,
	.contact_area{
		flex-wrap: wrap;
	}
	.company_info_area .logo_area,
	.company_info_area .contact_area {
		width: 100%;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	.company_info_area .logo_area,
	.company_info_area .address,
	.company_info_area .contact_area {
		margin-right:  auto;
		margin-left:  auto;
		padding-bottom: 1rem;
	}
	.company_info_area .contact_area {
		display: none;
	}
	.company_info_area .logo_area .logo {
		width: 70px;
	}
	.company_info_area .contact_area a {
		margin: 0 1rem
	}
}
@media print,screen and (min-width:768px) {
	.company_info_area { 
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.company_info_area .logo_area .logo { width:6rem; }
	.company_info_area > * { margin: 0 auto 2rem; }
}
@media print,screen and (min-width:1024px) {
	.company_info_area > * {
		margin-bottom: 0;
	}
	.company_info_area > .logo_area { width:40%; }
	.company_info_area > .address { width:40%; }
}
@media print,screen and (min-width:768px) and (max-width:1024px) {
	.company_info_area .address {
		width: 100%;
		text-align: center;
	}
	.company_info_area .address br {
		display: none;
	}
}
@media print,screen and (min-width:1200px) {
	.company_info_area { flex-wrap: nowrap;}
	.company_info_area > * { font-size:1rem; }
	.company_info_area > .logo_area { width:36%; }
	.company_info_area > .address { width:auto; }
	.company_info_area .logo_area .logo { width:6rem; }
	.company_info_area .logo_area .txt_area { width:calc(100% - 7rem); }
}

/* ------------ */
/* sp_side_scroll */
/* ------------ */
@media screen and (max-width:767px) {
	.sp_side_scroll {
		overflow: auto;
		white-space: nowrap;
	}

	.sp_side_scroll::before {
		content: "※横にスクロールできます。\A　見えない箇所は左に動かしてご覧ください。";
		color: #8d7c52;

		width: 100%;
		display: block;
		font-size: 0.95rem;
		font-weight: bold;
		line-height: 1.4rem;
		white-space: pre;
		border: 3px solid #8d7c52;
		background-color: #ebe3d8;
		margin-bottom: 0.5rem;
		padding: 0.5rem;
	}
}

/* ------ */
/* footer */
/* ------ */
footer {
	padding:0.75rem 0 0;
	color:#fff;
	line-height:1;
	background:#1a1a1a;
}
footer .footer_navi ul { list-style:none; }
footer .footer_navi ul li a {
	display:block;
	margin-bottom:0.5rem;
	color:#fff;
}

footer .footer_navi > ul > li li a::before { content:"＋"; }
footer .copy {
	width:100%;
	padding:1em 0;
	color:#000;
	text-align:center;
	font-size:0.75rem;
}

@media screen and (max-width:767px) {
	footer .footer_navi {
		display: none;
	}
	footer .copy {
		color: #fff;
		padding-bottom: 5rem;
	}
	
}
@media print,screen and (min-width:768px) {
	footer .footer_navi {
		display:flex;
		justify-content:space-around;
		width:768px;
		margin:0 auto;
		padding:6rem 0;
	}
	footer .copy {
		background:#fff;
	}
}
@media print,screen and (min-width:767px) and (max-width:1024px) {
	footer {font-size: 1rem;}
	body:not(#home) footer {margin-bottom: 3.5rem;}
}

}
@media print,screen and (min-width:1024px) {
	footer .footer_navi { width:1024px; }
}
@media print,screen and (min-width:1200px) {
	footer .footer_navi { width:1200px; }
}
/* ---- */
/* LAST */
/* ---- */