@charset "utf-8";

/*============================================================
     Koubou JIN　基本
  ============================================================ */
/*
layout.css
color:#262626
point color1:#fcc800
point color2:#009DA5

/*----------------------------------------------
 RESPONSIVE
------------------------------------------------*/

/* 　  ---------------------------*/ 
@media screen and (max-width: 1080px) {
.pconly	{
display:none;　
}
}

/*   ------------------------------*/ 
@media screen and (max-width: 767px) {
.exceptsma{
display:none;　
}
}

/*   ------------------------------*/ 
@media (min-width: 768px)and (max-width: 1080px) { 
.tab{
}
}

/*   ------------------------------*/ 
@media (min-width: 1080px) { 
.mobile{
display:none;
}
}

/*   ------------------------------*/  
@media (min-width: 767px) { 
.smaonly{
display:none;
}
}



/*--------------------------------------------------
   TOP
 --------------------------------------------------*/  

/* BASIC
 --------------------------------------------------*/ 

/* ---　base  ------------*/ 
body{
margin:0;
padding:0 0 0 0;
color:#262626;
letter-spacing:0.08em;
}

/* ---　link img  ---------*/ 
a:active img ,
a:hover img {
outline: 0;
opacity: 0.6;
}



/* ALL CONTENS
 ------------------------------------------------------*/

#all{
width: 100%;
text-align:center;
margin-left: auto;
margin-right:auto;  
}


/* MAIN IMG
--------------------------------------------------------*/

.slider {
width: 100vw;
height: 800px;
background-position: center center;
background-size: cover;
display: flex;
align-items: center;
justify-content: flex-end;
}

.dot {
	background-image: url("../img/topimg/dots.png");
  position: absolute;
  height: 800px;
  width: 100%;
  z-index: 100;
}

.slider-title {
	font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",Meiryo,serif;
  font-size: 44px;
  padding:20px 50px 0 0;
  color: #fff;
  line-height: 1.4;
  text-align: right;
  z-index: 200;
}


/* ---------　ov  ------------*/ 
@media screen and (min-width: 1024px) {
.slider {
    height: 900px;
}
.dot {
    height: 900px;
}
}

/* ---------　sm  ------------*/ 
@media screen and (max-width: 767px) {
.slider {
    height: 620px;
}
.dot {
    height: 620px;
}
.slider-title {
  font-size: 32px;
	padding:20px 30px 0 0;
	line-height: 1.3;
}
}



/* TOP POLICY
-------------------------------------------------------*/
.top-policy	{
width: 100%;
margin-top:5px;
padding-top:20px;
background-image: url("../img/index/policy_back.jpg");
background-size: cover;
height: 560px;
}

/*---- MOBILE ------*/
@media screen and (max-width: 767px) {
.top-policy	{
padding-top:5px;
background-position: center;
}   
}  

.top-poltext{
text-align:left;
margin-top: 2%;
color: #fff;
}

.top-policy p{
margin:0px 18px 10px;
text-align:left;
}


/* TOPICS
-------------------------------------------------------*/
.topics{
width: 100%;
height: 100%;
margin-top: 5px;
padding:20px 5px 40px;
background-image:url("../img/index/topics_back.jpg");
background-size: cover;
}

/*---- MOBILE ------*/
@media screen and (max-width: 767px) {
.topics{
padding:5px 5px 40px !important;
}   
}  

/* RSS SPACE*/ 
.post{
display: block;
height:auto;
margin-left:auto;
margin-right:auto;
}
article dt{
display: block;
max-width:780px;
padding:20px 35px 10px;
height:auto;
font-size: 0.9em;
margin: 3px auto 0 ;
color:#C3835E;
text-align:left;
background-color: #fff;
}  
article dd{
max-width:780px;
font-size: 1.2em;
margin:0 auto;
padding:0px 35px 10px;
color:#009DA5;
line-height:140%;
text-align:left;
font-weight:560;
background-color: #fff;
}
article dd.descrip{
max-width:780px;
font-size: 1.0em;
color:#262626;
margin: 0 auto;
padding:0px 35px 24px;
line-height: 160%;
text-align:left; 
font-weight:normal;
background-color: #fff;
}   


/*---- MOBILE ------*/
@media screen and (max-width: 767px) {
.topics{
padding:5px 5px 40px;
}
article dt{
padding:15px 15px 10px;
}  
article dd{
padding:0px 15px 10px;
}
article dd.descrip{
padding:0px 15px 20px;
}   
}  


/*------ LINK ------*/
article dd.descrip a:link{
color:#262626;   
}
article dd.descrip a:visited{
color:#262626;   
}
article dd.descrip a:hover{
color:#00C3F9;
}

article dd a:link {
color:#009DA5;
 }    
article dd a:visited {
color:#009DA5;
 }    
article dd a:hover  {
 color: #00CFD6;
 } 


/* PICK UP WORK
-------------------------------------------------------*/
.pickup-work{
padding:20px 0 50px;
width: 100%;
background-image: url("../img/index/grey_back.jpg");
height: auto;
}

.pickup-work .p-left{
padding-right: 18px;
}
.pickup-work .p-mid{
padding-left: 11px;
padding-right: 11px;
}
.pickup-work .p-right{
padding-left: 18px;
}

.shop-concept{
  font-size: 14px;
  font-size: 1.4rem;
	text-align: left;
	line-height: 1.8;
}

/*---- MOBILE ------*/
@media (max-width: 767px){
.pickup-work{
padding:5px 15px 50px;
}
.pickup-work .p-left{
padding-right: 0px;
}
.pickup-work .p-mid{
padding-left: 0px;
padding-right: 0px;
}
.pickup-work .p-right{
padding-left: 0px;
}
}	
	
.proj-name{
  line-height: 100%;
  margin:20px 0px 20px;
  font-size: 15px;
  font-size: 1.5rem;
  display:block;
  white-space: nowrap;
}
.proj-name span{
  font-size: 12px;
  font-size: 1.2rem;
  padding-top: 8px;
  font-weight:normal;
  display:block;
}

@media (max-width: 767px) {
.proj-name{
	padding-top:10px;
  margin:8px 0px 15px;
  font-size: 15px;
  font-size: 1.5rem;
  display:block;
}
.shop-concept{
  padding-bottom:10px;
	text-align: left;
}
}



/* ---　projects  ------------*/ 

#projects .col-lg-3 .col-md-3 .col-sm-6{
padding: 10px 20px ;
}

.fotorama{
margin-left: 20px ;
margin-right:20px;
}

.projects-data{
margin: 40px 50px 20px 40px ;
letter-spacing: 0.06em;
line-height:180%;
text-align:left;
}

@media (max-width: 767px) {
.fotorama{
margin-left: 2px ;
margin-right:2px;
}

.projects-data{
margin: 40px 18px 10px;
}
}

.projects-data ul{
margin: 30px 0 0px -10px;
}
.projects-data ul li{
list-style:none;
line-height:90%;
text-align:left;
}



/* CONTACT
--------------------------------------------------------*/
.contact-banner{
max-width: 580px;
margin:40px auto 124px;
padding:40px 20px 27px;
background-color: #fcc800;
height: auto;
text-align: center;
}

.subtitle{
color:#fff;
padding:50px 20px;
font-size: 60%;
font-weight: 300 !important;
}

/*---- MOBILE ------*/
@media (max-width: 767px){
.contact-banner{
max-width: 88%;
margin:35px auto 35px;
padding:35px 10px 25px;
}
.subtitle{
color:#fff;
padding:40px 10px;
font-size: 56%;
font-weight: 300 !important;
}
.contact-banner p{
font-size: 94%;
line-height: 130%;
}
}



/*---Google ICONS---*/
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 37px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;

display: inline-flex;
vertical-align: middle;
}



/* FOOTER
 ------------------------------------------------------*/
/*top-footer*/
#footer{
position: fixed;
bottom:0;
width:100%;
height:auto;
padding:7px 0 7px;
background-color:#3e3a39;
vertical-align: bottom;
z-index: 200;
}
@media screen and (max-width: 767px) {
#footer{
position: inherit;
}	
}	
	
#footer .address{
color:#fff;
font-size:1.2rem;
margin:5px 0 5px 10px;
letter-spacing: 0.08em;
text-align:left;
vertical-align: bottom;
}
#footer .copyright{
color:#fff;
font-size:1.1rem;
margin:15px 10px 5px;
letter-spacing: 0.08em;
text-align:right;
vertical-align: bottom;
}


/*---- MOBILE ------*/
@media (max-width: 767px){
#footer .copyright{
margin:-20px 10px 5px;
letter-spacing: 0.08em;
text-align:left;
}
}


/* PAGE	TOP
----------------------------------------------------*/ 
#pagetop {
width:100%;
z-index:10000;
}
#pagetop a:hover {
text-decoration: none;
opacity: 0.8;
}

#pagetop a {
display: block;
position:fixed;
bottom:10px;
right:10px;
}