@charset "utf-8";

/*============================================================
    IKUYO NAKAMA ARCHITECT/ASSOCIATES 2ND LAYER
  ============================================================ */
/*
layout.css
color:#524439　 link #A86000;
color2:#7e5948  lighter #8c6351
background: #e1e1db/225,225,219　lighter #e7e7e2, #F5F5F3
background2: #c4bfb6  darker #beb8ae;
background3: #cdc9c1   lighter #d6d2cc
point color :#8B7661; #659D9E;


 
/*--------------------------------------------------
   EACH CONTENS
 --------------------------------------------------*/ 
#news, #about, #office, #works, #works-detail, #recruit, #contact, #entry{
width:100%;
height: auto;
margin:110px auto 0px;
padding:0  0px 50px 0px;
background: #e1e1db;
overflow: hidden;
}

#news h1, #about h1, #office h1, #works h1, #recruit h1 , #entry h1, #contact h1{
font-family: "Shippori Mincho", serif;
font-weight: 400;
color:#8c6351;
margin:auto;
padding:10px 20px 30px;
font-size: 1.9rem;
letter-spacing: 0.05em;
line-height: 1.6;
text-align: center;
}

@media (max-width: 767px) {
#news h1, #about h1, #office h1, #recruit h1 {
padding:0px 20px 25px;
font-size: 1.7rem;
letter-spacing: 0.05em;
line-height: 1.4;
}
}
.en {
margin:20px auto;
font-size: 90%;
color:#875647;
}

/*--------------------------------------------------
   01 NEWS
 --------------------------------------------------*/ 
#news article {
width:86%;
max-width: 1100px;
height: auto;
margin:40px auto 60px;
padding: 26px 34px 30px;
text-align: left;
border-radius: 14px;
background-color: #F5F5F3;
}
#news article img {
padding:5px 20px 10px 0px;
}
#news article h2 {
font-family: "Shippori Mincho", serif;
font-size: 1.34rem;
margin:0 0 20px;
padding:0px 0px 10px !important;
font-weight: 500 !important;
letter-spacing: 0.02em;
line-height: 1.2;
}
#news article time {
font-size: 0.86rem !important;
line-height: 1.0;
}
#news article .text_content {
font-size: 0.96rem !important;
line-height: 1.9;
}
#news article .text_content a {
}
#news article .text_content a:hover {
}

@media (max-width: 767px) {
#news article {
width:90%;
margin:20px auto 40px;
padding: 20px 20px 20px 21px;
}
#news article img {
padding:5px 0 10px;
}
#news article h2 {
font-size: 1.16rem;
line-height: 1.2;
}
#news article .text_content {
font-size: 0.88rem !important;
line-height: 1.7;
}
}

/*--------------------------------------------------
   02 ABOUT
 --------------------------------------------------*/ 
	
/* -- INTRO --*/
.introduction{
width:52%;
height: auto;
margin:10px auto 25px;
padding: 20px 30px 0px 30px;
text-align: left;
}
.introduction p{
margin-bottom:20px;
text-align: justify;
letter-spacing: 0.04em;
}
@media (max-width: 1260px) {
.introduction{
width:70%;
height: auto;
margin:10px auto 0px;
padding: 20px 20px 25px 20px;
text-align: left;
}
}
@media (max-width: 767px) {
.introduction{
width:94%;
height: auto;
margin:10px auto 0px;
padding: 20px 20px 25px 20px;
text-align: left;
}
.introduction p{
font-size: 96% !important;
}
}

/* -- PROFILE --*/
.profile{
width: 100%;
margin:auto;
padding: 60px 40px 20px;
background: #cdc9c1;
text-align: center;
overflow: hidden;
}
.profile .container{
width:100%;
max-width: 1000px;
margin: auto;
padding: 30px 20px 30px 90px;
text-align: center;
}
.profile img{
width: 90%;
margin:0px auto -15px;
}

.profile dl {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding-left: 30px;
display: flex; 
flex-wrap: wrap;
text-align: left;
margin-bottom: 5rem;
letter-spacing: 0.04em;
}
.profile dt {
width: 23%;
margin: 0;
font-size: 0.94rem;
line-height: 1.6rem;
padding: 10px 15px 10px 18px;
vertical-align: middle;
align-items: left;
}
.profile dd {
width: 77%;
margin: 0;
font-size: 0.94rem;
padding: 10px 10px 10px 18px;
vertical-align: middle;
line-height: 1.6;
}
.right-link{
text-align: right;
}
@media (max-width: 960px) {
.profile .container{
padding: 30px 20px 30px 30px;
}
.profile img{
width: 90%;
margin:10px auto -10px;
}
.right-link{
text-align: right;
padding-right: 10px;
}
}

@media (max-width: 767px) {
.profile{
margin: auto;
padding: 45px 15px 0px;
}
.profile .container{
width: 100%;
height: auto;
margin: auto;
padding: 10px 5px 10px;
text-align: center;
}
.profile img{
width: 58%;
margin: auto;
text-align: center;
}
.career{
margin: 15px auto 0;
}
.profile dl {
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 0;
display: flex;
flex-wrap: wrap;
text-align: left;
margin-bottom: 2rem;
}
.profile dt {
width: 26%;
margin: 0;
font-size: 0.92rem;
line-height: 1.5rem;
padding: 6px 4px 6px 4px;
vertical-align: middle;
align-items: left;
}
.profile dd {
 width: 74%;
 margin: 0;
	font-size: 0.92rem;
 padding: 6px 0px 6px 0;
 vertical-align: middle;
 line-height: 1.5;
}
.right-link{
text-align: right;
padding-right: 6px;
}
}

/* -- AWARD --*/
.award{
width:100%;
height: auto;
padding:40px 0px 30px 0px;
background: #e1e1db;
overflow: hidden;
}
.award dl {
width: 100%;
max-width: 900px;
margin: 10px auto 0;
padding-left: 0px;
display: flex;
flex-wrap: wrap;
text-align: left;
margin-bottom: 20px;
letter-spacing: 0.05em;
}
.award dt {
width: 14%;
margin: 0;
border-bottom: 1px solid #CDC3B4;
font-size: 0.94rem;
line-height: 1.4rem;
padding: 15px 5px 10px 20px;
vertical-align: middle;
align-items: left;
}
.award dd {
 width: 86%;
 margin: 0;
	font-size: 0.94rem;
 padding: 15px 10px 15px 0px;
 border-bottom: 1px solid #CDC3B4;
 vertical-align: middle;
 line-height: 1.7;
}
.award dd p{
	font-size: 0.94rem;
 line-height: 1.4;
}
.award h2 {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
max-width: 140px;
font-size: 1rem;
margin:20px 30px 20px;
padding: 8px 6px 8px !important;
color: #524439 !important;
font-weight: 500 !important;
line-height: 1.2;
text-align: center;
border: #524439 0.9px solid;
letter-spacing: 0.1em;
}
@media (max-width: 767px) {
.award .container{
width: 100%;
height: auto;
margin: auto;
padding: 10px 15px 10px;
text-align: center;
}
.award h2 {
max-width: 160px;
margin:10px auto 10px;
}
.award dt {
width: 18%;
margin: 0;
border-bottom: 1px solid #CDC3B4;
font-size: 0.92rem;
line-height: 1.4rem;
padding: 15px 5px 10px 10px;
vertical-align: middle;
align-items: left;
}
.award dd {
 width: 82%;
 margin: 0;
	font-size: 0.92rem;
 padding: 15px 10px 15px 0px;
 border-bottom: 1px solid #CDC3B4;
 vertical-align: middle;
 line-height: 1.5;
}
}


/*--------------------------------------------------
   03-1 WORKS
 --------------------------------------------------*/ 
.filter{
 display: flex;
 align-items: center; /* 垂直 */
 justify-content: center; /* 水平 */
 text-align: center;
 color:#5e4126;
 font-size: 80%;
 font-weight: 600; 
	margin-bottom: 20px;
}
.filter::before,
.filter::after {
 content: '';
 flex-grow: 1; /* 残りの幅いっぱい */
 height: 0.5px; /* 線の太さ */
 background-color: #5e4126; 
 margin: 0 10px; /* 文字との間隔 */
}

.work-intro{
width: 88%;
margin:auto;
padding: 10px 0px 5px 10px;
text-align: center;
}
.work-intro p{
text-align: left;
}
.category-button{
	margin:40px auto 10px;
}

.category-button button{
  display: inline-block;
		font-size:0.88rem;
		margin:15px 5px 12px;
  padding: 5px 20px;
  text-decoration: none;
  color:#5e4126;
  font-weight: 400;
		background-color: #EDECE6;
  letter-spacing: 0.1em;
  border: #5e4126 solid 0.9px;
		border-radius: 4px;
}
.category-button button:hover{
	color:#FFFFFF !important;
	background: #705445 !important;
	opacity: 0.6;
}

@media screen and (max-width: 767px) {
.category-button button{
		margin:15px 5px 0px;
		line-height: 1.0;
}
}

#works * {
box-sizing: border-box;

&::before, &::after {
		box-sizing: border-box;
}
}
.item-box {
width: 98%;
min-height: 280px;
margin:50px auto 30px;
display: flex;
flex-wrap: wrap;
gap: 10px; 
justify-content:left;
}

.item-box {
width: 96%;
min-height: 280px;
margin:50px auto 30px;
display: flex;
flex-wrap: wrap;
gap: 10px; 
justify-content:left;
}

@media screen and  (max-width: 1024px){
.item-box {
width: 94%;
}
}

.item {
box-sizing: border-box;
width: calc(25% - 36px / 4);
margin: 0 0 30px 0;

&:nth-child(4n) {
margin-right: 0;
}
}

#works .item img {
margin:auto;
height: auto;
width: 82%;
max-width: 82%;
display: block;
object-fit: cover;/* 画像比率を保つ */
}

.item p{
padding-top:3px;
color:#524439;
font-size: 84%;
letter-spacing: 0.06em;
line-height: 1.6;
}	

@media screen and  (max-width: 1024px){
.item {
			margin: 0 0 20px 0;
			width: calc(33.3333333% - 30px / 3);

			&:nth-child(3n) {
					margin-right: 0;
			} 

			&:nth-child(3n) {
					margin-right: 0;
			}

			&:nth-child(6n) {
					margin-right: 0;
			}
	}
}
	

@media screen and (max-width: 767px) {
#works img {
margin:auto;
height: auto;
width: 90%;
max-width:90%;
}
.item {
			margin: 0 0 15px 0;
			width: calc(50% - 10px / 2);

&:nth-child(2n) {
					margin-right: 0;
			} 

			&:nth-child(3n) {
					margin-right: 0px;
			}

			&:nth-child(6n) {
					margin-right: 0;
			}
	}
	
.item p{
color:#524439;
font-size: 80% !important;
line-height: 1.4;
padding:3px 3px 0 2px;
}	
}


/*--------------------------------------------------
   03-2 WORKS detail
 --------------------------------------------------*/ 

/*---
  PC 
 --------------------------------------------------*/ 
#works-detail{
padding:0px;
margin-bottom:30px;
}

/* ---- PC SLIDE ---- */
.fotorama img {
padding:0px 20px 10px　!important;
}

#counter {
  height:37px;
  margin-top:-10px;
  left: 0;
  right: 0;
  text-align: center;
  color: #8B7661;
  font-size: 13px;
}

/* ---- PC TITLE ---- */
.works-head{
 max-width: 1200px; 
 display: flex;
	justify-content: space-between; 
	padding: 0 10px 10px;
	border-bottom: #8B7661 0.8px solid;
}
#works-detail h2{
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
margin:0;
padding:0 0 0 4px;
font-weight: 500;
font-size: 20px;
letter-spacing: 0.04em;
}

.detail-cate{
display: flex;
padding-right:4px;
align-items: center;
color:#8B7661;
font-size: 90%;
letter-spacing: 0.08em;
}

/* ---- PC TEXT ----*/
#works-detail h3{
margin:0px ;
padding-right: 20px !important;
padding-bottom:24px;
font-size: 22px;
letter-spacing: 0.02em;
}
.pc-conc{
padding: 0 35px 30px;
text-align: center;
letter-spacing: 0.07em;
}

.conc-jp{
margin:40px 0px 0px 0;
text-align: left;
text-align: justify;
}
.conc-jp p{
line-height: 1.8 !important;
margin-top:20px;
margin-bottom:15px;
}

.conc-en{
color:#7A5246;
margin:40px 0px 0px 0px !important;
text-align: left;
text-align: justify;
}
.conc-en p{
font-size: 90% !important;
color:#7A5246;
line-height: 1.8 !important;
margin-top:20px;
margin-bottom:15px;
}

/* ---- PC CREDIT ----*/
.credit-box{
width: 88%;
margin:0 auto;
padding: 20px 20px 30px 30px;
text-align: center;
}
.credit-box p{
width: 100%;
margin:auto;
color:#8F7A65;
font-size:77%;
text-align: left;
text-align: justify;
letter-spacing: 0.065em;
}
@media screen and (max-width:1219px){
.credit-box{
width: 96%;
margin:10px auto 20px;
padding: 20px 20px 0px 20px;
}
}

/* ---- PC BUTTON ----*/
.bt-works-list{
margin:0px auto 0;
justify-content: left; 
padding: 40px 0 50px;
text-align: center;
}
.bt-works-list a.btn-flat2{
padding: 0.4em 2.6em;
border-radius: 6px !important;
}


/*---
  SP 
 --------------------------------------------------*/ 
@media screen and (max-width: 767px) {
#works-detail{
padding:0px;
margin-top:90px;
margin-bottom:20px;
}

.sp-main{
width: 100%;
height: auto;
padding-top:0px;
 margin: 0 auto 15px;
}
.sp-main img{
 width: 100%;      
 height: auto;
 object-fit: cover; /* 比率維持 */   
}

/* ---- SP TITLE ---- */
.works-head{
	padding: 10px 3px;
}
#works-detail h2{
font-size: 1.1rem !important;
font-weight: 500;
}
.detail-cate{
font-size: 80%;
letter-spacing: 0.05em;
}

/* ---- SP TEXT ----*/
#works-detail h3{
margin:0px ;
padding-bottom:5px;
font-size: 20px;
letter-spacing: 0.03em;
}

.conc-jp{
margin:10px 0px 0px 0;
text-align: left;
text-align: justify;
}
.conc-jp p{
font-size: 91% !important;
line-height: 2.0 !important;
margin-top:10px;
margin-bottom:15px;
text-align: left;
}

.conc-en{
color:#7A5246;
margin:20px 0px 0px 0px !important;
text-align: left;
}
.conc-en p{
font-size: 94% !important;
color:#7A5246;
line-height: 1.7 !important;
margin-top:10px;
margin-bottom:15px;
}

/* ---- SP READ MORE ----*/
.readmore {
		position: relative;
		margin: 0.2em auto 0em;
		display: block;
		color:#524439;
		border: none;
		outline: 0;
		cursor: pointer;
		background: none;
		letter-spacing: 0.1em;
}
.readmore:before {
  content: "";
  width: 27px;
  height: 27px;
  text-align: center;
/* --border-radius: 50%;-*/
  display: block;
  margin: 0 auto 2px;
  background: url("../works/img/arrow.png") no-repeat center / 10px rgba(255, 255, 255, 0.0);
  background-size: 60%;
  transition: .3s;
}

.readmore.on-click:before {
  transform: rotate(180deg);
}
.readmore .open {
		font-size: 12px;
  display: block;
}
.readmore.on-click .open {
  display: none;
}
.readmore .close {
  display: none;
}
.readmore.on-click .close {
  display: block;
}

/* ---- SP CREDIT ----*/
.credit-box{
width: 96% ;
margin:10px auto 30px;
padding:10px 0 0;
text-align: left;
}
.credit-box p{
width: 100%;
margin:0px auto -20px !important;
line-height: 1.6 !important;
padding: 0px 0 20px;
color:#8F7A65;
font-size:78% !important;
text-align: left;
letter-spacing: 0.065em;
}


/* ---- SP PHOTOS----*/
.sp-photo{
width: 100%;
}
.sp-photo ul{
width: 100%;
margin:10px 0 40px;
padding:0;
}
.sp-photo li{
list-style: none !important;
width: 100%;
margin:0 ;
padding:20px 0 0 0 ;
}
}



/*--------------------------------------------------
   04 OFFICE
 --------------------------------------------------*/ 
#office{
margin-bottom:20px;
}
#office h2 {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
width: 100%;
font-size: 1.042rem;
margin:15px 10px 15px 0;
padding: 8px 6px 8px ;
color: #524439 !important;
font-weight: 500 !important;
line-height: 1.2;
border-bottom: #524439 0.8px solid;
letter-spacing: 0.1em;
text-align: left;
}
.outline, .history{
width: 90%;
margin:auto;
padding: 10px 20px 0px;
}
.kinoffice img{
width: 70%;
max-width: 380px;
margin:auto;
padding: 30px 10px 10px 0;
text-align: left;
}


.outline dl, .history dl {
width: 100%;
margin: 5px auto -20px;
padding: 0px;
display: flex;
flex-wrap: wrap;
text-align: left;
letter-spacing: 0.05em;
}
.outline dt, .history dt {
width: 16%;
margin: 0;
font-weight: 500;
font-size: 0.94rem;
line-height: 1.5rem;
padding: 10px 5px 9px 10px;
vertical-align: middle;
align-items: left;
}
.outline dd , .history dd {
font-weight: 500;
 width: 82%;
 margin: 0;
	font-size: 0.94rem;
	line-height: 1.6rem !important;
 padding: 10px 5px 9px 0px;
/*　border: #C5BBAC 1px solid;*/ 
 vertical-align: middle;
	letter-spacing: 0.02em;
}


@media (max-width: 980px) {
.outline, .history{
width: 98%;
margin:auto;
padding: 10px 0px 10px;
}
.history dd {
line-height: 1.4rem !important;
}
}
@media not all and (min-width: 768px) {
.outline, .history{
width: 100%;
margin:auto;
padding: 10px 8px 0px 6px;
}	
.kinoffice img{
width: 90%;
margin:auto;
padding: 30px 6px 10px;
}
.history dt{
width: 23%;
padding: 9px 5px 9px 10px;
line-height: 1.4rem;
}
.history dd {
width: 77%;
padding: 9px 5px 9px 10px;
line-height: 1.4rem !important;
}
}


/*--------------------------------------------------
   05 RECRUIT
 --------------------------------------------------*/ 
#recruit{
margin-bottom:-50px;
}
#recruit h2 {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
width: 100%;
font-size: 1.4rem;
margin:15px 10px 15px 0;
padding: 8px 6px 8px ;
color: #524439 !important;
font-weight: 500 !important;
line-height: 1.2;
text-align: center;
letter-spacing: 0.08em;
}

/* -- PREFECT --*/
.preface{
width: 94%;
margin:10px auto 25px;
padding: 10px 20px 20px;
}
.preface .container1000{
padding: 10px 50px 20px;
}
.preface img{
width: 86%;
margin-top:10px;
}
.preface p{
margin-bottom:20px;
text-align: justify;
letter-spacing: 0.04em;
}

@media (max-width: 1000px) {
.preface .container{
padding: 10px 0px 20px;
}
}
@media (max-width: 767px) {
.preface{
width: 100%;
margin:10px auto 25px;
text-align: center !important;
}
.preface .container1000{
padding: 10px 14px 20px 10px;
}
.preface img{
width: 78%;
margin:10px auto 25px;
}
.preface p{
font-size: 98% !important;
}
}

/* -- RULE --*/
/* -.rec-rule{
width:100%;
margin:10px auto 25px;
padding: 40px 40px 40px;
background: #cdc9c1;
overflow: hidden;
}
.rec-rule h2 {
font-family: "Shippori Mincho", serif;
font-size: 1.5rem;
margin:10px auto 20px;
font-weight: 500 !important;
letter-spacing: 0.02em;
line-height: 1.2;
text-align: center;
}
.rec-rule-text{
padding: 0px 70px;
}
.rec-rule-text p{
margin-bottom: 30px;
text-align: left;
}

@media (max-width: 767px) {
.rec-rule{
padding: 40px 10px 40px;
}
.rec-rule-text{
padding: 0px 30px;
}
}


/* -- JOB INFO --*/
.jobinfo{
width:100%;
margin:10px auto 0px;
padding: 40px 40px 70px;
background: #dbd8d3;
overflow: hidden;
}

.accordion {
 width: 90%;
	max-width: 496px;
	margin: 40px auto;
	border-radius: 10px;
	box-shadow: 0 7px 15px -5px rgb(0 0 0 / 5%);
	background-color: #EDECE6;
}
.accordion summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	font-size: 1.02rem;
	padding: 25px 35px;
	font-weight: 600;
	cursor: pointer;
}
.accordion summary::-webkit-details-marker {
 display: none;
}
.accordion summary::after {
	transform: translateY(-25%) rotate(45deg);
	width: 12px;
	height: 12px;
	margin-left: 10px;
	border-bottom: 3px solid #524439b3;
	border-right: 3px solid #524439b3;
	content: '';
	transition: transform .3s;
}
.accordion[open] summary::after {
	transform: rotate(225deg);
}
.accordion p {
	transform: translateY(-10px);
	opacity: 0;
	margin: 0;
	padding: .3em 2em 1.5em;
	color: #524439;
	transition: transform .5s, opacity .5s;
}
.accordion[open] p {
	transform: none;
	opacity: 1;
}
.accordion dl {
width: 98%;
margin: 0px auto 0;
padding: 0px 20px 0;
display: flex;
flex-wrap: wrap;
text-align: left;
letter-spacing: 0.02em;
}
.accordion dt {
width: 20%;
margin: 0;
border-top: 1px dotted #ccc;
font-size: 0.95rem;
line-height: 1.4rem;
padding: 10px 5px 10px 6px;
vertical-align: middle;
align-items: left;
}
.accordion dd {
 width: 80%;
 margin: 0;
	font-size: 0.96rem;
 padding: 10px 10px 10px 0px;
border-top: 1px dotted #ccc;
 vertical-align: middle;
 line-height: 1.5;
align-items: left; 
}
@media (max-width: 767px) {
.jobinfo{
padding: 40px 20px 70px;
}

.accordion {
 width: 96%;
	max-width: 600px;
}
.space{
margin-top: -50px !important;
}
}

/*--------------------------------------------------
   06 RECRUIT ENTRY-FORM
 --------------------------------------------------*/ 



/*--------------------------------------------------
   07 ENGLISH
 --------------------------------------------------*/ 
	
	.award h2.en-award {
max-width: 154px;
font-size: 0.9rem;
margin:22px 15px 20px;
padding: 8px 15px 8px !important;
letter-spacing: 0.08em;
}
@media (max-width: 767px) {
.award h2.en-award {
max-width: 180px;
margin:10px auto 10px;
}