/*///// frame ///*/


#wrapper{
}
#contents{
  position: relative;
  width:100%;
}


/* keyvisual */
	#keyvisual {
    min-height:1000px;
		width:100%;
    background:#FC6F2D;
    position: relative;
	}
  #keyvisual .topkeyimg{
    position: absolute;
    bottom:0;
    left:0%;
  }
  	#keyvisual .inner{
      display: flex;
      align-items: center;
      height: 100%;
    }
	#keyvisual .content{
    /* max-width:560px; */
    width:100%;
    height: auto;
    margin:auto;
    padding:0px;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-60%);
    color: white;

	}

  #keyvisual h2{
    width:100%;
    font-size:4.267rem;
    line-height: 1.4;
    color: white;
      text-align: center;
  }

    #keyvisual h2 .logo{
      display: block;
      width:200px;
      margin:auto;
    }
    #keyvisual h2 .small{
      display: block;
      font-size:clamp(16px,4vw,.4em);
      font-weight: 500;
      margin:15px 0 0 0;
    }
    #keyvisual h2 .ti{
      display: block;
      font-family: 'Be Vietnam Pro', sans-serif;
      font-kerning: auto;
      width:100%;
      margin:auto;
    }
  #keyvisual h2 .row01{letter-spacing: .23em; margin-bottom:30px;}
  #keyvisual h2 .row02{letter-spacing: .05em; margin-bottom:30px;}
  #keyvisual h2 .row03{letter-spacing: .0; margin-bottom:30px;}

  #keyvisual .content > div{
    width:100%;
  }
  	#keyvisual .content p{
      margin:30px 0;
      line-height: 2.3;
      letter-spacing: .1em;
    }
  #keyvisual .star{
    color:white;
    font-size:30px;
  }


/*/// header //*/


#header .header{
	width:70px;
  height: 100%;
  padding:50px 10px;
  position: fixed;
  right:7%;
  top:0;
  z-index: 10;
  text-align: center;
}
#header .header .logo{
	padding:10px ;
  margin:auto;
  writing-mode: vertical-rl;
  font-size:clamp(18px,3vw,33px);
  font-family: 'Be Vietnam Pro', sans-serif;
  line-height: 1;
  font-weight: 600;
  color:#FC6F2D;
}
#header .header .logo .mini{
  font-size:clamp(12px,1vw,14px);
}
#header.home .header .logo{
  color:white;
}
#globalmenu {
  width: 100%;
  height: 100%;
	background:#D0D524;
  position: fixed;
  right:0;
  top:0;
  z-index: 9;
}

#globalmenu .menu {
  max-width:650px;
  width:100%;
  position: absolute;
  right:10%;
  top:80px;
}
#globalmenu .menu > ul.m li{
  text-align: left;
    font-size:clamp(24px,3.5vw,42px);
    font-weight: 600;
    font-family: 'Be Vietnam Pro', sans-serif;
}
#globalmenu .menu > ul.m li a{
  display: block;
  padding:10px 10px;
  color:white;

}
#globalmenu .menu a:hover{
  color:#FC6F2D;
}
#globalmenu ul.media{
  display: flex;
  justify-content: left;
  margin-top:8vh;
}
#globalmenu ul.media li{
  margin:13px;
  width:32px;
}

#nav-drawer {
  width:40px;
  height: 40px;
  margin:auto;
	background:#FC6F2D;
	font-size:1.8rem;
	color:#FC6F2D;
	border-radius:20px;
	text-align: center;
  line-height: 1.5;
}

.toggle_btn{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  cursor:pointer;
}
.hanbargar{
  display: block;
  height: 1px;
  background-color:white;
  width:40%;
  position: relative;
}
.hanbargar:before,
.hanbargar:after{
  content:"";
  display: block;
  width:100%;
  height: 1px;
  background-color:white;
  position: absolute;
}
.hanbargar:before{
  top:7px;
}
.hanbargar:after{
  bottom:7px;
}
#header.home #nav-drawer {
  background:white;
}
#header.home #nav-drawer .hanbargar,
#header.home #nav-drawer .hanbargar:before,
#header.home #nav-drawer .hanbargar:after
{
  background:#FC6F2D;
}


.inner{
  max-width: 1000px;
  margin:auto;
}

.mini{
  font-size: .8rem;
}

.bo {
  position: relative;
  padding: 2%;
}
.bo:after {
  content:"";
  display: block;
  width:50px;
  border-bottom:1px solid #666;
  position: absolute;
  bottom:0%;
  left: 50%;
  transform: translateX(-50%);
}

/*///////////////////////
   contents
/////////////////////////*/
.title h2,
.title h3 {
	font-size:2.3em;
	text-align: left;
	font-weight: 500;
}

.title {
  margin:10% auto 4%;
}

.btn{
  margin:8% 0;
}
.btn a{
  border:1px solid white;
  padding:5px 20px;
  text-align: center;
  display: block;
  border-radius:5px;
  color:white;#FB6F2D;
  max-width:170px;
}
.btn a:hover{
  background:#FC6F2D !important;
}
.btn.blue a{
  background:#31508B;
  border-color:#31508B ;
}
.pan{
  padding:20px 0 0px 0;
}
.pan p{
  margin:0;
}
.orenge{
  color:#FB6F2D;
}
.flex{
  display: flex;
}

div[class^="layout"] .title .small{
  display: block;
  font-size:.5em;
  margin:15px 0 0 0;
}
div[class^="layout"] .inner{
  display: flex;
  align-items: center;
  padding:70px 0;
}
div[class^="layout"] .title h3{
  font-size:3.1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .03em;
}
div[class^="layout"] .textarea p,
div[class^="layout"] .textarea .btn a{
  font-size:1.15rem;
}
div[class^="layout"] .textarea .title{
  margin: 0 0 10% 0;
}

.layoutA .textarea{
  width:35%;
  margin-right:0%;
  position: relative;
  z-index: 3;
}
.layoutA .photoarea{
  width:65%;
  position: relative;
  z-index: 2;
  text-align: right;
}
.layoutB .textarea{
  width:35%;
  margin-left:0%;
  position: relative;
  z-index: 3;
  order:2;
}
.layoutB .photoarea{
  width:65%;
  position: relative;
  z-index: 2;
  order:1;
}
.layoutB .btn a{
  margin:0 0 0 auto ;
}
.layoutN {
  padding: 5% 0;
}
#design.layoutA .textarea,
#movie.layoutA .textarea
{
  width:65%;
  margin-right:-30%;
  display: flex;
  flex-wrap:wrap;
  align-content: space-between;
  height: min(550px,100vh);
}

.textarea ul li{
  font-size:1.2rem;
}
.textarea ul li:before{
  content:"・";
}
#archive .title{
  width:100%;
  height: 100%;
  margin:0;
}
#archive .lineup .thumb{
  margin: 0 auto;
  max-width:120px;
}
#archive {
  padding:60px 0;
  background:#F8F8F8;
}

#archive .lineup ul{
  display: flex;
  justify-content: center;
}
#archive .lineup ul li{
  margin:20px;
}
#archive .lineup ul li a{
  display: block;
  width:340px;
  background:white;
  box-shadow:3px 7px 10px rgba(0,0,0,.3);
  text-align:center;
  color:inherit;
  border:2px solid white;
}
#archive .lineup ul li a:hover{
  border-color:#F96F2D;
}
#archive .lineup ul li .thumb{
  padding:60px 0 30px;
}
#archive .lineup ul li dl{
  margin:20px auto 0;
}
#archive .lineup ul li dl dt{
  font-size:1.25rem;
}
#archive .lineup ul li dl dt .blue{
  color:#FC6F2D;
  font-size:1.2em;
  display: block;
}
#archive .lineup ul li dl dd p{
  text-align: center;
}
#archive .lineup ul li dl dd .more{
  font-size:1.4rem;
  color:#FC6F2D;
  padding:10px 0 18px;
  text-align: center;
  border-top:1px solid #C8C8C8;
}
#consultation {
  background:#FC6F2D;
  color:white;
  padding:15px 0;
}
#careers .title h3,
#consultation .title h3,
#commercial .title h3{
  font-size:3rem;
}

#consultation.layoutA .textarea{
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  height: min(360px,100vh);
  width:55%;
  margin-right:-20%;
}
#consultation.layoutA .textarea .btn,
#careers.layoutB .textarea .btn{
  margin-bottom: 0;
  width: 100%;
}
#consultation.layoutA .textarea .btn a:hover{
  background-color:#E94424 !important;
}
#consultation.layoutA h4,
#careers.layoutB h4{
  font-size:1.4rem;
  margin-bottom: 6%;
}
#consultation.layoutA .textarea p{
  margin-top:0;
}

#careers{
  background:#D0D524;
  padding:15px 0;
}

#careers.layoutB .textarea{
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  height: min(360px,100vh);
  color:white;
}
#commercial{
  background:#C8C8C8;
  padding:15px 0;
}


/*------- design -----*/
#contents.design .pan{
  background:  #fff;
}
#design{
  background: #fff;
}

#design .title{
  color:#FB6F2D;
}
#design .title .small{
  color:rgb(50,50,50);
}
#design .textarea .contact_area .btn a{
  border-color: #FB6F2D;
  color:#FB6F2D;
  background:white;
}
#design .textarea .contact_area .btn a:hover{
  color:white;
}
#webdesing{
  background:#F1F0EC;
}
.example_area{
  padding:100px 4%;
}
.example_area h3{
  text-align: center;
  font-size:clamp(23px,5vw,42px);
  color:#FB6F2D;
}
.example_area h5{
  font-size:1.1rem;
  color:#FB6F2D;
  text-align: center;
  margin-top:80px;
  font-weight: 400;
}
.example_area .example{
  margin:0 0 10%  0;

}
.example_area .example:nth-last-child(1){
  border-bottom:0;
}
.example_area .example h4{
  text-align: center;
  font-size:clamp(18px,2.5vw,23px);
  margin:20px auto;
  font-weight: 500;
}
.example_area .example ul{
  margin:150px auto;
}
.example_area .example ul:nth-child(3){
  margin-top:100px ;
}
.example_area .example h5 + ul{
  margin-top:60px;
}
.example_area .example ul.flex{
  display: flex;
  margin:60px auto;
}

.example_area .example ul li{
  width:fit-content;
  margin:60px auto ;
}
.example_area .example ul li.waku img{
  border:1px solid #E0E0E0;
}
.example_area .example ul.flex li{
  width:40%;
  margin:30px auto ;
}
.example_area .example ul li.long{
  width:100% !important;
}
.example_area .example .border{
  height: 1px;
  width: 100%;
  border-bottom:1px solid  #E2E2E2;
}

.example_area .example ul li p{
  font-size:1rem;
  margin:.5em 0 0 0;
}
.example_area .example ul li a{
  color:black;
}
.example_area .inner {
  max-width:840px;
}
.example_area .flex{
  flex-wrap: wrap;
  justify-content: flex-start;
}
.example_area .example ul.flex li{
  width:calc(50% - 40px);
  margin-left:20px;
  margin-right:20px;
  text-align: center;
}

/*-------------- movie ------------*/
#movie.layoutA{
  background:#343231;
  color:white;
}
#movie .title{
  color:#FB6F2D;
}
#movie .title .small{
  color:white;
}
.contact_area .btn{
  margin-top:1em;
}
#movie .btn a{
  background:white;
  color:#FB6F2D;
  border-color:#FB6F2D;
}
#movie .btn a:hover{
  color:white;
}
#movie .textarea{
  width:60%;
  margin-right:-20%;
}
#movie .textarea .contact_area,
#movie .textarea .text{
  width:100%;
}
.movie .pan{
  background:#343231;
  color:white;
}
.matter-into{
  background:#B72B26;
  text-align: center;
  color:white;
  padding:30px 20px;
}
.matter-into h3{
  font-size:clamp(22px,4.7vw,47px);
  font-family: 'Be Vietnam Pro', sans-serif;
  color: white;
}
.matter-into h4{
  text-align: center;
  font-size:clamp(18px,2.5vw,25px);
}
.matter-into p{
  text-align: center;
}
.matter-icon{
  width: clamp(100px,13.5vw,135px);
margin: 20px auto;
display: block;
}
.about_matter dl{
  border:1px solid #B72B26;
  position: relative;
  padding:20px;
  margin:100px 20px;
}
.about_matter dl dt{
  text-align: center;
  position: absolute;
  top:0;
  left:50%;
  transform:translate(-50%,-50%);
  width:clamp(250px,30vw,300px);
}
.about_matter dl dd p{
  text-align: center;
  margin: 30px  0 0px;
  line-height: 1.8;
}
h4.redtitle{
  width:fit-content;
  background:#B72B26;
  color:white;
  text-align: center;
  font-weight: 700;
  padding:.2em 2em;
  font-size:clamp(18px,2.2vw,22px);
  margin:auto;
}
.about_matter .copy01{
  font-size:clamp(16px,2vw,20px);
  text-align: center;
  font-weight: 500;
  padding:0 1em;
}
.about_matter ul.copy01{
  margin:50px auto;
  padding:0 20px ;
  width:fit-content;
}
.about_matter ul.copy01 li{
  text-align: left;
  margin:.2em 0;
}
.about_matter ul.point{
  display: flex;
  justify-content: center;
}
.about_matter ul.point li{
  padding:10px;
}

/*----------- company ------------*/
#company.layoutN .inner{
  display: block;
  padding-top:10px;
}
#company.layoutN .title{
  margin-top:0;
}
#company h4{
  margin-top:100px;
  font-size:clamp(20px,2.6vw,26px);
  margin-bottom: 40px;
  font-weight: 500;
  letter-spacing: 0.2em;
}
#company h4 .en{
  display: block;
  color:#FB6F2D;
  font-weight: 500;
  font-size:.8em;
  margin:10px 0;
  letter-spacing: 0;
}
#company .large{
  font-size:1.3em;
}
#company table{
  width:80%;
}
#company table tr td,
#company table tr th{
  padding:1em 2em 1em 0;
  border-bottom:1px solid #DCDCDC;
  text-align: left;
  font-weight: normal;
  line-height: 2.5;
}
#company table tr th {
  width:20%;
}
#company table tr td {
  width:80%;
}
/*------- private -----*/
#private .textarea .title h3 .small{
  color:#FB6F2D;
}
#private p{
  font-size:1rem;
  margin-top:10px;
}
#private h4{
  margin-top:30px;
  margin-bottom: 10px;
}
/*------- contact -----*/
#contents.contact .pan{
  background:#F8F8F8;
}
#contact{
  background:#F8F8F8;
}
#contact .textarea{
  width:100%;
}
#contact .textarea .title h3{
  color:#FB6F2D;
}
#contact .formarea{
  width: 65%;
  margin:0 auto 0 35%;
  padding:20px;
}
#contact .formarea .fgroup{
  background:white;
  padding:10px 15px;
}
#contact .thanks h3,
#contact .error-message h3{
 font-size:1.75rem;
 text-align: center;
 margin:4% auto;
}
#contact .read{
	text-align: center;
}
#contact .tel a{
	font-size:1.4rem;
	color: black;
	display: block;
	margin:10px auto;
	pointer-events: none;
}
.red{
  color:rgb(199, 0, 0);
}
#confirm{
  display: none;
}
#confirm .mClose{
  font-size:1.2rem;
  text-align: center;
  padding:5px 10px;
  margin:5px auto;
  cursor: pointer;

}
#confirm .formarea dl dd{
  line-height: 1.4;
}
/*/--------- modal ajax ----*/
.modaal-container{
  /* background:transparent !important; */
}


/*////// footer ////////*/
#footer{
 margin:0px 0 0 0 ;
 padding:0px 0;
 background:#F3F3F3;
}
#footer .flex-footer{
	height: 100%;
  padding:4% 0;
  background: #fff;
}
#footer .flex-footer .inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#footer .flex-footer .elem{
	width:auto;
}
#footer .co p{
  margin:0;
  font-size:.9em;
}
#footer .co .btm_logo{
  width:230px;
  margin-bottom:30px;
}
#footer .footerlink{
  padding:4% 0;

}
#footer .footerlink ul {
  display: flex;
  justify-content: center;
  padding:4%;
}
#footer .footerlink ul li{
  font-size:1.1rem;
  margin:0 4%;
}
#footer .footerlink ul li a{
  color:inherit;
}
#footer .footerlink ul li a:hover{
  color:#E94424;
}
#footer .flex-footer .elem p{
  font-size:.9em;
}
#footer .flex-footer .elem .media{
  display: flex;
  justify-content: flex-start;
}
#footer .flex-footer .elem .media li{
  margin: 0 12px;
  width:33px;
}
#footer .flex-footer .btn a{
  background:#FB6F2D;
  color:white;
  width:170px;
  font-size: initial;
}
#footer .flex-footer .btn a:hover{
  background:#E94424;
  border-color:#E94424;
}
#footer .flex-footer .copyrignt p{
	font-size:.8rem;
	font-weight: 200;
  text-align: left;
  margin:40px 0;
}