@charset "utf-8";

/*============================================================
    KINHAKU
============================================================ */
/*
layout.css
color:#333;
point color:rgba(186,167,131,0.5) #baa783
point color:rgb(201,194,177)#c9c2b1

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

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

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



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

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

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

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

img {
max-width: 100%;
}

.btn {
margin:20px 0 10px !important;
min-width: 200px !important;
}


p{
margin: 0.5rem 0;
}
.f-bold{
font-weight: bold;
}	


/* ALL CONTENS
-------------------------------------------------------*/
#all{
width: 100%;
margin-top:0;
padding-top: 0;
margin-left: auto;
margin-right:auto;
text-align: center;
position: relative;
}




/* INTRO
--------------------------------------------------------*/
.intro{
width: 100%;
min-height: 300px;
margin:50px auto 5px;
padding:20px 5px 20px !important;
}

.intro p{
max-width: 700px;
margin:20px auto 5px;
padding:0 0 5px 10px; 
text-align: left;
}


@media (max-width: 767px) {
.intro{
min-height: 280px;
}
.intro p{
padding:0 12px 5px; 
text-align: left;
}
}
	
.career{
max-width: 700px;
margin:0 auto 5px;
padding:10px 15px 0 10px; 
text-align: left;
}
.career ul{
padding:10px 20px 0 30px; 
}


/* WORKS
--------------------------------------------------------*/
.works{
width: 100%;
margin:10px auto 20px;
padding: 0 10px 0;
text-align: left;
}
@media (max-width: 767px){
.works{
margin:20px auto 10px;
padding: 0 30px 0;
}
}

.graphic, .web{
padding-bottom:50px;
text-align: center;
}
		
.graphic img, .web img{
max-width: 70%;
margin:20px 0 0px;
border: 1px solid #DCDBDB;
}
.no-border{
border: none !important;
}
.works-name {
 font-size: 14px;
 font-weight: bold;
 margin-top: 0px;
	line-height: 130%;
}

.works-info {
 font-size: 12px;
 margin-top: 5px;
	padding-bottom:0px;
	line-height: 120%;
}

@media (max-width: 767px){
.graphic img{
width: 80%;
}
.works-name {
 font-size: 12px;
 font-weight: bold;
 margin-top: 0px;
	line-height: 130%;
}
}

/* FOOTER
--------------------------------------------------------*/
#footer{
width:100%;
height: 80px;
padding:10px 0;
z-index: 200;
background-color: rgba(229,233,233,1.00)
}

@media (max-width: 767px){
#footer{
padding:20px 0 0 0;
}	
}


/* MOVIE
--------------------------------------------------------*/
.mv{
padding-bottom: 50px;
}

.youtube {
width: 50%;
aspect-ratio: 16/9;
margin-top:30px;
margin-bottom: 40px;
}
.youtube iframe {
width: 520px;
height: 293px;
}

@media (max-width: 1223px){
.youtube {
width: 50%;
aspect-ratio: 16/9;
margin-top:40px !important;
margin-bottom: 50px !important;
}
.youtube iframe {
width: 400px;
height: 225px;
}
}

@media (max-width: 767px){
.youtube {
width: 100%;
aspect-ratio: 16/9;
margin-top:40px !important;
margin-bottom: 50px !important;
}
.youtube iframe {
 width: 390px;
 height: 219px;
}
}

@media (max-width: 480px){
.mv .container { 
 padding-right: 0.5%; 
 padding-left: 0.5%; 
}
.youtube {
width: 100%;
aspect-ratio: 16/9;
margin-top:40px !important;
margin-bottom: 50px !important;
}
.youtube iframe {
 width: 350px;
 height: 197px;
}
}

@media (max-width: 400px){
.mv .container { 
 padding-right: 0.5%; 
 padding-left: 0.5%; 
}
.youtube {
width: 100%;
aspect-ratio: 16/9;
margin-left: -10px;
margin-top:40px !important;
margin-bottom: 50px !important;
}
.youtube iframe {
 width: 340px;
 height: 191px;
}
}



.mv-name {
 font-size: 14px;
 text-align: center;
 font-weight: bold;
}
.mv-info {
 font-size: 12px;
	line-height: 110%;
}